/* entrosana.app — Gestaltung nach docs/handoff-design.md, Stand 2026-08-01 23:10.
 *
 * Grundsatz aus §1: gemeinsames Fundament, eigene Aufgabe. Farben, Schriftleiter
 * und Satzspiegel kommen unverändert von entrosana.com (§3), die Dichte ist die
 * einer Arbeitsfläche (§7), und der filigrane Trennstrich (§4) trägt die
 * Handschrift auch hier.
 *
 * Schriftstapel wie auf .com: die eingebetteten Schnitte haben keinen
 * Lateinbereich (§3), es entscheidet also der Rückfallstapel. Carlito ist auf
 * diesem Rechner vorhanden, damit rendert der Prototyp, was .com rendert.
 * Welche Schrift die Marke ist, steht in §10 offen.
 */

:root{
  color-scheme:dark;
  --paper:#1B1E24; --paper-2:#22262E;
  --ink:#E9EBE7; --ink-2:#C6CAD1; --muted:#8F95A1;
  --line:#323843; --line-2:#3A404C; --line-ui:#5A6273;
  --seal:#2BD4E8; --seal-2:#7FE7F3;
  --verify:#2FB89E; --warn:#D2685C;
  --card-bg:#232833; --field-bg:#1F232B; --btn-fg:#071316;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.30);
  --shadow-2:0 4px 8px rgba(0,0,0,.42),0 14px 32px rgba(0,0,0,.45);

  --font-mono:"Inconsolata", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans:Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif:Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1:clamp(.78rem, .74rem + .2vw, .86rem);
  --step-0:clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --step-4:clamp(2.8rem, 2rem + 4vw, 5.2rem);

  --wrap:1140px;
  --gutter:clamp(1.25rem, .8rem + 2.5vw, 3rem);
  --radius:4px;

  /* Dichte einer Arbeitsfläche, §7. Satzspiegel und Leiter bleiben unberührt. */
  --pad-block:56px;
  --pad-card:22px;
  --gap-grid:18px;
  --pad-para:12px;
  --rail:15.5rem;

  /* Lichtschimmer wie auf .com. Keine neue Farbe, nur --seal und --verify in
     geringer Sättigung über --paper (§8: der Vorrat bleibt geschlossen). Als
     eigener Wert, weil ihn zwei Stellen brauchen: body hier und body in
     project-shell.css, wo project.css den Untergrund flachlegt. Vorher
     standen dort zwei Abschriften, die auseinandergelaufen sind. Steht
     bewusst im gemeinsamen :root und nicht im hellen Block: --seal, --verify
     und --paper darin lösen sich erst beim Einsetzen auf und folgen dem
     gewählten Modus von selbst.
     Zuoberst liegt das Korn von entrosana.com: feTurbulence-Rauschen als
     160er-Kachel, per soft-light eingeblendet, in der hellen Fassung per
     overlay. Die background-Langformen an beiden body-Stellen zählen die
     Schichten hier — wer eine ergänzt oder streicht, zählt dort nach. */
  --schimmer:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%272%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(130% 90% at 12% -10%, color-mix(in srgb, var(--seal) 16%, transparent), transparent 68%),
    radial-gradient(90% 70% at 92% 0%, color-mix(in srgb, var(--verify) 11%, transparent), transparent 70%),
    radial-gradient(140% 120% at 50% 118%, color-mix(in srgb, var(--seal) 8%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--seal) 3%, var(--paper)) 0, var(--paper) 58%),
    var(--paper);
}

:root[data-theme="light"]{
  color-scheme:light;
  --paper:#f5fffe; --paper-2:#ECEEEA;
  --ink:#16181d; --ink-2:#3A3F49; --muted:#6C7078;
  --line:#DCDDD6; --line-2:#2C313B; --line-ui:#8A8D84;
  --seal:#077183; --seal-2:#09606F;
  --verify:#0B6B5C; --warn:#B23A2E;   /* 2026-09-10: 4.9:1 auf der Kartenfarbe, vorher 3.9 */
  --card-bg:#FFFFFF; --field-bg:#FFFFFF; --btn-fg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(22,24,29,.06),0 4px 10px rgba(22,24,29,.07);
  --shadow-2:0 3px 6px rgba(22,24,29,.08),0 12px 28px rgba(22,24,29,.11),0 28px 56px rgba(22,24,29,.07);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; height:100% }
body{
  font-family:var(--font-sans); color:var(--ink); font-size:var(--step-0); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Der Lichtschimmer steht als --schimmer weiter oben, weil ihn zwei Stellen
     brauchen: hier und noch einmal in project-shell.css, wo project.css den
     Untergrund flachlegt. Zwei Abschriften sind auseinandergelaufen, darum
     jetzt eine Fassung an einer Stelle. */
  background:var(--schimmer);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:160px 160px,auto,auto,auto,auto;
  background-blend-mode:soft-light,normal,normal,normal,normal;
  background-attachment:fixed;
}
/* Auf hellem Grund trägt soft-light kaum auf; overlay hält das Korn sichtbar,
   wie auf entrosana.com in der hellen Fassung. */
:root[data-theme="light"] body{
  background-blend-mode:overlay,normal,normal,normal,normal;
}
a{ color:var(--seal); text-decoration:none }
p{ margin:0 0 var(--pad-para) }
.mono{ font-family:var(--font-mono) }
.muted{ color:var(--muted) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* ---------- §4 Der filigrane Trennstrich ----------
   Eine Rezeptur, vier Stärken. Waagerecht 26 %, senkrecht 34 % und 42 %,
   kurz mit Schimmer 65 %. Nie eine harte Kante. */
.hair{ position:relative }
.hair + .hair::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(var(--wrap,1140px), calc(100% - 3rem)); height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 18%,
    color-mix(in srgb, var(--seal) 26%, transparent) 82%, transparent);
}
/* Senkrecht in einer Fuge, 34 %. Ohne Spalten keine Fuge. */
.seam{ position:relative }
.seam::before{
  content:""; position:absolute; top:0; right:0; width:1px; height:min(70%, 40rem);
  background:linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--seal) 34%, transparent) 12%,
    color-mix(in srgb, var(--seal) 34%, transparent) 88%, transparent);
}
/* Kurz und mit Schimmer, 65 %. Laufender Verweis und Wortmarke. */
.glow::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 65%, transparent), transparent);
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--seal) 55%, transparent));
}

/* ---------- Marke ----------
   §8: einfarbig. Zeichen, «entro» und «sana» tragen dieselbe Farbe.
   §5: Zeichen als eingebettetes SVG auf currentColor, 2.4em gegen 15 px Wort. */
.brand{
  display:inline-flex; align-items:center; gap:.5rem; position:relative;
  color:var(--seal); text-decoration:none;
}
/* 2.4em auf der geerbten Grundgrösse, wie .com: 2,4 × 16,8 px = 40,31 px. */
.brand__logo{ width:2.4em; height:2.4em; display:block; flex:none }
/* Wortmarke wie auf entrosana.com (Eigentümer 2026-09-11): Mono-Stapel, Schnitt 400, -.01em. */
.brand__word{ font-family:var(--font-mono); font-size:15px; letter-spacing:-.01em; font-weight:400; color:inherit }

/* ---------- Gerüst ---------- */
.app{ display:grid; grid-template-columns:var(--rail) 1fr; min-height:100dvh }
.app > main{ min-width:0 }   /* Rasterkind: sonst wächst die Spalte mit breiten Tabellen, statt dass sie in sich scrollen (2026-09-10) */

.rail{
  padding:1.35rem 1rem; display:flex; flex-direction:column; gap:.2rem;
  position:relative;
  /* durchscheinend, damit der Schimmer des Untergrunds durchträgt */
  background:color-mix(in srgb, #000 13%, transparent);
  backdrop-filter:blur(6px);
}
.rail__brand{ padding:.2rem .3rem 1.05rem }
/* Der Strich gehört zur Marke, nicht als Deckel auf den ersten Eintrag.
   Darum eigenes Element mit Luft nach unten, §4 in der 26-%-Stärke. */
.rail__rule{
  height:1px; margin:0 .3rem 1.15rem;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent) 0,
    color-mix(in srgb, var(--seal) 26%, transparent) 72%, transparent);
}
.rail__group{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:1.15rem .55rem .45rem;
}
.rail__item{
  position:relative; display:flex; align-items:center; gap:.65rem;
  padding:.42rem .55rem; color:var(--ink-2); font-size:.95rem;
  border-radius:10px; transition:background-color .12s, color .12s;
}
.rail__item:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent) }
/* Der gewählte Reiter: ruhige Füllung im Sealton, dazu ein kurzer Balken an
   der linken Kante. Der frühere Unterstrich mit Schimmer machte den Eintrag
   höher als seine Nachbarn und las sich als Provisorium. Der Radius folgt
   konzentrisch der 26px-Rundung der Leiste, gilt in jeder Breite und ersetzt
   auch die mobile Punkt-Ersatzform aus §4. */
.rail__item.is-active{
  color:var(--ink);
  background:color-mix(in srgb, var(--seal) 13%, transparent);
}
.rail__item.is-active::after{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:1.15rem; border-radius:999px; background:var(--seal);
  box-shadow:0 0 6px color-mix(in srgb, var(--seal) 55%, transparent);
}
.rail__glyph{
  width:1.4rem; height:1.4rem; flex:none; display:grid; place-items:center;
  color:var(--seal); font-size:.82rem;
}
.rail__count{ margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--muted) }
.rail__foot{ margin-top:auto; padding-top:1rem; position:relative }
.rail__foot::before{
  content:""; position:absolute; top:0; left:.3rem; right:.3rem; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 18%,
    color-mix(in srgb, var(--seal) 26%, transparent) 82%, transparent);
}
.rail__acct{ display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem }
.rail__avatar{
  width:1.75rem; height:1.75rem; border-radius:999px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-ui); color:var(--muted); font-family:var(--font-mono); font-size:.7rem;
}
.rail__acctname{ font-size:.88rem; color:var(--ink-2) }
.rail__acctsub{ display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--muted) }

/* ---------- Kopfleiste ----------
   §10 offen: Pille oder bündiger Balken. Hier bündig und klebend, aber auf der
   Höhe der Pille von .com (62 px) und mit derselben Unschärfe. */
/* §10 entschieden: die schwebende Pille, wie auf entrosana.com.
   Sie trägt ihren eigenen Rand, darum keine Kante quer über die Breite. */
.top{
  position:sticky; top:.85rem; z-index:5; height:62px;
  margin:.85rem 1.5rem 0; padding:0 .6rem 0 1.25rem;
  display:flex; align-items:center; gap:1rem;
  border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
}
.crumb{ font-family:var(--font-mono); font-size:.82rem; color:var(--muted) }
.crumb b{ color:var(--ink); font-weight:600 }
.crumb i{ font-style:normal; padding:0 .45rem; opacity:.5 }
.search{
  margin-left:auto; display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-ui); border-radius:var(--radius); background:var(--field-bg);
  padding:.35rem .7rem; min-width:17rem; color:var(--muted);
  font-family:var(--font-mono); font-size:.8rem;
}
.search kbd{
  margin-left:auto; border:1px solid var(--line); border-radius:3px;
  padding:.05rem .3rem; font-size:.7rem; color:var(--muted);
}
.iconbtn{
  width:2rem; height:2rem; border-radius:999px; border:1px solid var(--line-ui);
  background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer;
}

/* ---------- Arbeitsfläche ---------- */
.work{ padding:0 1.5rem }
.block{ position:relative; padding:var(--pad-block) 0 }
.block--tight{ padding-block:calc(var(--pad-block) - 16px) }
.wrapper{ width:min(100% - 0px, var(--wrap)) }

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--seal); margin:0 0 .85rem;
}
.eyebrow::before{
  content:""; width:22.0156px; height:1px; background:var(--seal); opacity:.5; flex:none;
}
.work__h{ font-size:var(--step-2); letter-spacing:-.02em; font-weight:600; margin:0 0 .2rem }
.work__sub{ color:var(--muted); margin:0 0 1.6rem }
/* Per-field letter size (set by UX admin on the enclosing element). */
.fs-xs{ font-size:var(--step--1) !important; }
.fs-sm{ font-size:calc(var(--step-0) * 0.92) !important; }
.fs-md{ /* default — no override */ }
.fs-lg{ font-size:var(--step-1) !important; }
.fs-xl{ font-size:var(--step-2) !important; }
.fs-2xl{ font-size:var(--step-3) !important; }
.h3{ font-size:var(--step-1); font-weight:600; letter-spacing:-.015em; margin:0 }

/* ---------- Karten und Kacheln ---------- */
.grid{ display:grid; gap:var(--gap-grid); grid-template-columns:repeat(3,1fr) }
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card-bg); padding:var(--pad-card); box-shadow:var(--shadow-1);
}
/* Verlauf statt Fläche: --seal in geringer Sättigung über --card-bg. Der
   Schimmer in der rechten Ecke ist weg (Wunsch des Eigentümers, 2026-09-10). */
.tile{
  display:flex; flex-direction:column; gap:.45rem; color:inherit;
  position:relative; overflow:hidden; box-shadow:var(--shadow-2);
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--seal) 9%, var(--card-bg)) 0%, var(--card-bg) 58%);
}
.tile > *{ position:relative }
.tile__glyph{
  width:2.2rem; height:2.2rem; display:grid; place-items:center;
  color:var(--seal); font-size:1.05rem; margin-bottom:.55rem;
}
.tile p:not(.h3){ color:var(--ink-2); font-size:.92rem; margin:.35rem 0 .9rem; min-height:3em }
.tile__foot{
  display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono);
  font-size:.74rem; color:var(--muted); padding-top:.7rem; position:relative;
  margin-top:auto; /* 2026-09-09: Fusszeile «Open» in allen Karten einer Reihe auf gleicher Höhe */
}
.tile__foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent), transparent 82%);
}
.tile__go{ margin-left:auto; color:var(--seal) }

/* Fortsetzen */
.resume{
  display:grid; grid-template-columns:auto 1fr auto; gap:.4rem 1.15rem; align-items:center;
}
.ring{ width:3.1rem; height:3.1rem; position:relative; flex:none }
.ring svg{ transform:rotate(-90deg) }
.ring span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink);
}
.resume__m{ font-family:var(--font-mono); font-size:.76rem; color:var(--muted); margin:.15rem 0 0 }

/* ---------- Schaltflächen, §6: drei Stufen plus zerstörerisch ---------- */
.btn{
  font-family:var(--font-sans); font-weight:600; font-size:var(--step--1);
  padding:.5rem 1.1rem; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:var(--seal); color:var(--btn-fg); border:1px solid var(--seal);
}
.btn--ghost{ background:none; color:var(--ink-2); border-color:var(--line-ui) }
.btn--quiet{ background:none; color:var(--muted); border-color:transparent; padding-inline:.5rem }
.btn--danger{ background:none; color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)) }
:focus-visible{ outline:2px solid var(--seal); outline-offset:2px }

/* ---------- §6 Tabelle: Mono-Kopf, Haarlinien, kein Zebra ---------- */
.tbl{ width:100%; border-collapse:collapse }
.tbl th{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  text-align:left; padding:.7em .8em; border-bottom:1px solid var(--line);
}
.tbl td{ padding:.7em .8em; border-bottom:1px solid var(--line); vertical-align:baseline }
.tbl tr:last-child td{ border-bottom:0 }
.tbl td.num, .tbl th.num{ text-align:right }
.svc__n{ font-family:var(--font-mono); font-size:.86rem; color:var(--ink) }
.svc__w{ color:var(--ink-2) }
.svc__p{ font-family:var(--font-mono); font-size:.8rem; color:var(--seal) }
.svc__s{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted) }
.svc__s.ok{ color:var(--verify) }
.svc__s.warn{ color:var(--warn) }
.svc__grp td{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-top:1.3em;
}
.svc__flag{ color:var(--warn); font-size:.84rem; padding-left:.8em; border-left:2px solid var(--warn) }

/* §6 Zustandsvorrat: vier Farben, mehr nicht. «läuft» über Bewegung,
   «wartet» über --muted mit --line-ui-Rand. */
.led{ width:.5rem; height:.5rem; border-radius:999px; background:var(--verify); display:inline-block }
.led--warn{ background:var(--warn) }
.led--off{ background:var(--muted); opacity:.45 }
.led--wait{ background:transparent; border:1px solid var(--line-ui) }
.led--run{ background:var(--seal); animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- §5 Die Quittung, aus site.css übernommen ---------- */
.receipt{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2); overflow:hidden; max-width:460px;
}
.receipt__perf{ height:10px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px) }
.receipt__body{ padding:1.1rem 1.25rem }
.receipt__row{ display:grid; grid-template-columns:4.5rem 1fr; gap:.75rem; align-items:baseline; padding-block:.45rem }
.receipt__k{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); letter-spacing:.08em; text-transform:uppercase }
.receipt__in{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--ink-2); word-break:break-word }
.receipt__hash{ font-family:var(--font-mono); font-size:var(--step-1); color:var(--seal); letter-spacing:.01em }
.receipt__meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); margin-top:.4rem }
.receipt__status{
  font-family:var(--font-mono); font-size:var(--step--1); margin-top:.9rem; padding-top:.8rem;
  border-top:1px dashed var(--line); color:var(--muted);
}
.receipt__status[data-state=ok]{ color:var(--verify) }
.receipt__status[data-state=warn]{ color:var(--warn) }

/* ---------- Die Projektdatei ----------
   §9: «.open» hiess zweierlei. Das Aufklappfeld heisst jetzt .disclosure. */
.disclosure{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg) }
.split{ display:grid; grid-template-columns:1fr 19.5rem; gap:1.6rem; align-items:start }
.file{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg); box-shadow:var(--shadow-1) }
.file__h{ padding:var(--pad-card); display:flex; gap:1rem; align-items:center; position:relative }
.file__h::after{
  content:""; position:absolute; left:var(--pad-card); right:var(--pad-card); bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}
.file__m{ font-family:var(--font-mono); font-size:.76rem; color:var(--muted); margin:.15rem 0 0 }
.file__act{ margin-left:auto; display:flex; gap:.5rem }

.step{
  display:grid; grid-template-columns:1.1rem 1.5rem minmax(0,1fr) 6.5rem; gap:.3rem .55rem;
  padding:.75rem var(--pad-card); align-items:start; border-bottom:1px solid var(--line);
  position:relative;
}
.step:last-of-type{ border-bottom:0 }
.box{
  width:1.1rem; height:1.1rem; border:1px solid var(--line-ui); border-radius:3px;
  background:var(--field-bg); display:grid; place-items:center; margin-top:.12rem;
  font-size:.72rem; color:var(--btn-fg);
}
.box.on{ background:var(--verify); border-color:var(--verify) }
.step__t{ margin:0; font-size:.98rem }
.step.done .step__t{ color:var(--muted) }
.step__n{ display:block; color:var(--muted); font-size:.82rem; margin-top:.1rem }
.step__r{ font-family:var(--font-mono); font-size:.76rem; text-align:right; color:var(--muted) }
.step__r.has{ color:var(--verify) }
.step__note{
  grid-column:3/-1; margin-top:.5rem; border:1px solid var(--line); border-radius:3px;
  background:var(--field-bg); padding:.45rem .6rem; color:var(--ink-2); font-size:.86rem;
}
.step__note::before{ content:"note "; font-family:var(--font-mono); font-size:.7rem; color:var(--muted) }
.file__add{
  display:flex; align-items:center; gap:.6rem; padding:.75rem var(--pad-card);
  font-family:var(--font-mono); font-size:.82rem; color:var(--muted); position:relative;
}
.file__add::before{
  content:""; position:absolute; top:0; left:var(--pad-card); right:var(--pad-card); height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}

.side{ display:grid; gap:1rem }
.panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg) }
.panel__h{
  padding:.65rem .9rem; font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); position:relative;
}
.panel__h::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}
.panel__b{ padding:.8rem .9rem; font-size:.88rem; color:var(--ink-2) }
.kv{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; font-family:var(--font-mono); font-size:.78rem }
.kv b{ font-weight:600; color:var(--ink) }
.hash{ font-family:var(--font-mono); font-size:.74rem; color:var(--seal) }

.plan{ border:1px dashed var(--line-ui); border-radius:var(--radius); padding:.85rem .95rem }
.tag{
  display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--line-ui); border-radius:999px;
  padding:.1rem .45rem; color:var(--muted); margin-bottom:.45rem;
}
.plan p{ margin:0; font-size:.84rem; color:var(--ink-2) }

/* ---------- §6 Fehlende Bauteile ---------- */
.note{ font-family:var(--font-mono); font-size:var(--step--1); display:flex; align-items:center; gap:.5rem }
.note--ok{ color:var(--verify) }
.note--warn{ color:var(--warn) }
.note--idle{ color:var(--muted) }

.skel{ background:var(--line); border-radius:3px; height:.8rem; animation:pulse 1.6s ease-in-out infinite }
.skel--w70{ width:70% } .skel--w45{ width:45% } .skel--w90{ width:90% }

.empty{ text-align:left; padding:1.4rem var(--pad-card) }
.empty h4{ margin:.5rem 0 .3rem; font-size:var(--step-1); font-weight:600 }
.empty p{ color:var(--muted); margin:0 0 .9rem }

.field{ display:grid; gap:.3rem; max-width:560px; margin-bottom:1rem }
.field label{ font-size:var(--step--1); color:var(--ink-2) }
.field input{
  font:inherit; font-size:.92rem; padding:.6em .7em; border-radius:var(--radius);
  border:1px solid var(--line-ui); background:var(--field-bg); color:var(--ink);
}
.field .help{ font-size:var(--step--1); color:var(--muted) }
.field.is-bad input{ border-color:var(--warn) }
.field.is-bad .help{ color:var(--warn) }
.req{ color:var(--seal) }

.toggle{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none }
.toggle input{ position:absolute; opacity:0; pointer-events:none }
.toggle__track{ width:34px; height:18px; border-radius:999px; background:var(--line); border:1px solid var(--line); position:relative }
.toggle__dot{ position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--ink) }
.toggle input:checked+.toggle__track{ background:color-mix(in srgb,var(--seal) 30%,var(--line)) }
.toggle input:checked+.toggle__track .toggle__dot{ transform:translate(16px); background:var(--seal) }
.toggle__label{ font-size:var(--step--1); color:var(--ink-2) }

/* Die mobile Punkt-Ersatzform aus §4 entfällt: Füllung und Balken des
   gewählten Reiters tragen in jeder Breite. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---------- Ergänzungen für die Anwendung ---------- */
.tool__who{
  display:block; font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--seal-2); margin:.35rem 0 .5rem;
}
.rail__none{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); padding:.35rem .55rem; margin:0 }
.rail__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail__item .rail__count{ padding-left:.4rem }

/* Rückmeldezeile, §6: drei Ausgänge, sonst nichts. */
.saybar{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:20;
  background:var(--card-bg); border:1px solid var(--line-ui); border-radius:var(--radius);
  padding:.55rem .9rem; box-shadow:var(--shadow-2); max-width:min(90vw,40rem);
}
.saybar[hidden]{ display:none }

.step__note{ display:flex; align-items:center; gap:.5rem }
.step__note input{
  font:inherit; font-size:.86rem; flex:1; min-width:0; color:var(--ink-2);
  background:transparent; border:0; padding:.15rem 0;
}
.step__note input:focus{ outline:none; color:var(--ink) }
.step__note:focus-within{ border-color:var(--seal) }

.box{ cursor:pointer; font:inherit; font-size:.72rem; line-height:1; padding:0 }
.file__add .btn--quiet{ padding-inline:0 }
.tile{ text-decoration:none }
.empty .btn{ display:inline-block }

@media (max-width:900px){
  .grid{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
  .split{ grid-template-columns:1fr }
}
/* Der Burger existiert nur unter 760 px; auf dem Schreibtisch bleibt er weg. */
.rail__burger{ display:none }

@media (max-width:759.98px){
  .app{ grid-template-columns:1fr }
  .rail{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:.15rem .5rem; padding:.55rem .8rem }
  .rail .seam::before, .rail__rule{ display:none }
  .rail__brand{ padding:.2rem .5rem .2rem .3rem; margin-right:auto }
  /* zugeklappt: nur Marke und Burger, alles andere wartet hinter dem Knopf */
  .rail:not(.is-open) .rail__item,
  .rail:not(.is-open) .rail__group,
  .rail:not(.is-open) .rail__row,
  .rail:not(.is-open) .rail__proj,
  .rail:not(.is-open) .rail__foot{ display:none }
  .rail__burger{
    display:grid; place-items:center; width:44px; height:44px; flex:none;
    border:0; background:none; color:var(--ink-2); font-size:1.1rem;
    border-radius:var(--radius); cursor:pointer;
  }
  .rail__burger:hover{ color:var(--ink) }
  /* Fitts: Fingerziele in der offenen Leiste mindestens 44 px hoch. */
  .rail__item, .nav__projects .navitem{ min-height:2.75rem }
  .rail__chev{ width:2.2rem; min-height:2.75rem }
  .rail__row .rail__plus{ width:2rem; height:2rem }
  .rail__burger::before{ content:"☰" }
  .rail.is-open .rail__burger::before{ content:"✕" }
  /* aufgeklappt: die volle senkrechte Leiste, der Knopf wandert in die Ecke */
  .rail.is-open{ flex-direction:column; align-items:stretch }
  .rail.is-open .rail__brand{ margin-right:0 }
  .rail.is-open .rail__burger{ position:absolute; top:.55rem; right:.6rem }
  .work{ padding:0 1rem }
  .top{ padding:0 1rem }
  .search{ min-width:44px; min-height:44px; padding:0 .6rem; justify-content:center }
  .search .search__t, .search kbd{ display:none }
}

/* Luft unter der schwebenden Pille, sonst beginnt der erste Block darunter zu eng. */
.work > .block:first-child{ padding-top:34px }
.work > .block:first-child.hair::before{ display:none }
@media (max-width:759.98px){
  .top{ margin:.6rem 1rem 0; padding-inline:1rem .6rem; top:.6rem }
  .work > .block:first-child{ padding-top:26px }
}

.grid--2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:900px){ .grid--2{ grid-template-columns:1fr } }
.tool__head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap }
.tool__head .h3{ flex:1 1 auto; min-width:12rem }
.tool__head .note{ font-size:.72rem }

/* ---------- Neues Projekt: Plus-Knopf und Auswahl ---------- */
.rail__group--act{ display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.rail__plus{
  font:inherit; font-size:1rem; line-height:1; cursor:pointer;
  width:1.4rem; height:1.4rem; display:grid; place-items:center;
  background:none; color:var(--seal); border:1px solid var(--line-ui); border-radius:var(--radius);
  padding:0; letter-spacing:0;
}
.rail__plus:hover{ border-color:var(--seal); background:color-mix(in srgb, var(--seal) 12%, transparent) }

/* ---------- Die Projektliste in der Leiste ----------
   Zwei Stellen schreiben in denselben Kasten: rail-projects.js auf jeder
   Seite, paintNav der Kopie auf /project. Beide liefern dieselbe Form
   (a|button.navitem > .pdot, Name, .cnt), damit hier ein einziger Regelsatz
   für das ganze Haus reicht und die Leiste beim Wechsel nicht ihr Aussehen
   ändert. Masse und Farben stammen von .rail__item (Zeile 142). */
.nav__projects{ display:flex; flex-direction:column; gap:.05rem }
.nav__projects .navitem{
  display:flex; align-items:center; gap:.65rem; width:100%; min-width:0;
  padding:.42rem .55rem; border:0; background:transparent; text-align:left;
  text-decoration:none; color:var(--ink-2); font:inherit; font-size:.95rem;
  letter-spacing:normal; border-radius:10px; cursor:pointer;
  white-space:nowrap; overflow:hidden; transition:background-color .12s, color .12s;
}
.nav__projects .navitem:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent) }
.nav__projects .navitem.is-on{ color:var(--ink); background:color-mix(in srgb, var(--seal) 13%, transparent) }
/* Der Punkt sitzt im selben 1.4rem-Feld wie die Zeichen der Reiter darüber,
   damit alle Beschriftungen der Leiste auf einer Kante stehen. */
.nav__projects .pdot{ width:1.4rem; height:1.4rem; flex:none; display:grid; place-items:center }
.nav__projects .pdot::before{
  content:""; width:.4rem; height:.4rem; border-radius:999px;
  background:color-mix(in srgb, var(--seal) 45%, transparent);
}
.nav__projects .navitem.is-on .pdot::before{
  background:var(--seal);
  box-shadow:0 0 5px color-mix(in srgb, var(--seal) 60%, transparent);
}
.nav__projects .cnt{
  margin-left:auto; padding-left:.5rem; flex:none;
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
}

.pick{
  border:1px solid var(--line-ui); border-radius:var(--radius); padding:0;
  background:var(--card-bg); color:var(--ink); max-width:min(94vw, 34rem); width:100%;
  box-shadow:var(--shadow-2);
}
.pick::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.pick__box{ padding:var(--pad-card) }
.pick__box .h3{ margin:0 0 1rem }
.pick__sec{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:1rem 0 .4rem;
}
.pick__sec:first-child{ margin-top:0 }
.pick__seed{
  display:flex; flex-direction:column; gap:.15rem; width:100%; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink); background:var(--field-bg);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:.55rem .7rem; margin-bottom:.4rem;
}
.pick__seed:hover{ border-color:var(--seal); background:color-mix(in srgb, var(--seal) 8%, var(--field-bg)) }
.pick__t{ font-size:.95rem }
.pick__m{ font-family:var(--font-mono); font-size:.74rem; color:var(--muted) }
.pick .field{ margin-top:1.2rem; position:relative; padding-top:1rem }
.pick .field::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 18%,
    color-mix(in srgb, var(--seal) 26%, transparent) 82%, transparent);
}
.pick .actions{ margin-top:1.1rem }

/* ---------- Leiste und Kopf schweben ----------
   Beide Flächen liegen als eigene Körper über dem Untergrund: stark gerundet,
   mit Rand, tiefem Schatten und einer hellen Oberkante als Lichtkante. Der
   Untergrundschimmer trägt weiter durch, deshalb bleibt beides durchscheinend. */
.rail{
  margin:.85rem 0 .85rem .85rem;
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--seal) 16%, transparent);
  overflow:hidden;
}
/* Der Rand der Leiste übernimmt, was vorher die senkrechte Fuge geleistet hat. */
.rail.seam::before{ display:none }

.top{
  border-radius:999px;
  box-shadow:var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--seal) 16%, transparent);
  margin-inline:1rem 1.5rem;
}

@media (max-width:759.98px){
  .rail{ margin:.6rem; border-radius:20px }
  .top{ margin-inline:.6rem }
}
/* Der Auswahlkasten folgt derselben Rundung wie Leiste und Kopf. */
.pick{ border-radius:22px; box-shadow:var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--seal) 16%, transparent) }

/* ---------- Quittung leiser ----------
   Das Siegel ist ein Beleg, keine Überschrift. Es tritt zurück. */
.receipt{ box-shadow:var(--shadow-1) }
.receipt__perf{
  height:7px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--line) 55%, transparent) 0 6px, transparent 6px 12px);
}
.receipt__hash{
  font-size:var(--step-0); letter-spacing:.02em;
  color:color-mix(in srgb, var(--seal) 55%, var(--ink-2));
}
.receipt__status{ opacity:.85 }

/* ---------- Aufgaben: volle Struktur ---------- */
.sec{ position:relative }
.sec__h{
  display:flex; align-items:baseline; gap:.6rem; padding:.9rem var(--pad-card) .35rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.sec__n{ margin-left:auto; font-size:.72rem }

.step{ align-items:start }
.step--sub{ padding-left:calc(var(--pad-card) + 1.9rem) }
.step--sub .step__t{ font-size:.93rem }

/* Rang: nur der vorhandene Vorrat, kein neues Rot. */
.prio{
  width:.9rem; height:.9rem; flex:none; border-radius:2px; display:inline-grid; place-items:center;
  font-family:var(--font-mono); font-size:.6rem; line-height:1;
  border:1px solid var(--line-ui); color:var(--muted); background:transparent;
}
.prio--1{ border-color:var(--warn); color:var(--warn) }
.prio--2{ border-color:var(--seal); color:var(--seal) }
.prio--3{ border-color:var(--line-ui); color:var(--ink-2) }
/* p4 is the default (lowest) rank: show a dashed chip only when it's a button */
.prio--4:not(.prio--btn){ display:none }

.meta{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin-top:.3rem; align-items:center }
.due{
  font-family:var(--font-mono); font-size:.72rem; border:1px solid var(--line);
  border-radius:999px; padding:.05rem .45rem; color:var(--muted); white-space:nowrap;
}
.due--today{ border-color:color-mix(in srgb, var(--seal) 45%, var(--line)); color:var(--seal) }
.due--over{ border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); color:var(--warn) }
.due--done{ border-color:var(--line); color:var(--muted); opacity:.7 }
.lbl{
  font-family:var(--font-mono); font-size:.72rem; color:var(--seal-2);
  border:1px solid transparent; padding:.05rem .1rem;
}
.lbl::before{ content:"@" }
.rep{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted) }
.rep::before{ content:"⟳ " }

.qa{ display:flex; gap:.5rem; padding:.75rem var(--pad-card); align-items:center; position:relative }
.qa::before{
  content:""; position:absolute; top:0; left:var(--pad-card); right:var(--pad-card); height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}
.qa input{
  flex:1; min-width:0; font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:.45rem .6rem;
}
.qa input:focus{ outline:none; border-color:var(--seal) }
.qa__hint{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted); flex-basis:100%; margin:0 }

/* Zeichen der drei Abschnitte: Linien, nicht Flächen, damit sie klein tragen. */
.ico{ width:1.15em; height:1.15em; display:block }
.rail__glyph .ico{ width:1.05rem; height:1.05rem }
.tile__glyph .ico{ width:1.7rem; height:1.7rem }
/* Derselbe Schimmer wie am laufenden Verweis und unter der Marke. */
.ico{ filter:drop-shadow(0 0 4px color-mix(in srgb, var(--seal) 55%, transparent)) }
.rail__glyph .ico{ filter:drop-shadow(0 0 2px color-mix(in srgb, var(--seal) 45%, transparent)) }
.tile__glyph .ico{ filter:drop-shadow(0 0 6px color-mix(in srgb, var(--seal) 55%, transparent)) }

/* Das Eingabefeld wurde vom Hinweis erdrückt: ohne Umbruch teilen sich beide
   eine Zeile, und flex-basis:100% am Hinweis lässt für das Feld nichts übrig. */
.qa{ flex-wrap:wrap; align-items:flex-start }
.qa input{ flex:1 1 100%; min-width:12rem }
.qa__hint{ flex-basis:100%; margin:.15rem 0 0 }

/* Siegel als Randnotiz: kleinste Stufe, gedämpft, ohne eigene Fläche. */
.file__seal{
  display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap;
  padding:.5rem var(--pad-card) .7rem;
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted);
}
.file__seal b{ font-weight:400; color:color-mix(in srgb, var(--seal) 30%, var(--muted)) }

/* ---------- Werkzeugleiste des Projekts ---------- */
.bar{
  display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:center;
  padding:.6rem var(--pad-card); position:relative;
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted);
}
.bar::after{
  content:""; position:absolute; left:var(--pad-card); right:var(--pad-card); bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}
.bar__b{
  font:inherit; cursor:pointer; color:var(--ink-2); background:none;
  border:1px solid var(--line); border-radius:var(--radius); padding:.2rem .55rem;
}
.bar__b:hover{ border-color:var(--seal); color:var(--seal) }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.seg .bar__b{ border:0; border-radius:0; padding:.2rem .7rem }
.seg .bar__b.is-on{ background:color-mix(in srgb, var(--seal) 16%, transparent); color:var(--seal) }
.bar__sel{ display:inline-flex; align-items:center; gap:.35rem }
.bar__sel select{
  font:inherit; font-size:var(--step--1); color:var(--ink-2); background:var(--field-bg);
  border:1px solid var(--line); border-radius:var(--radius); padding:.15rem .35rem;
}

/* ---------- Zeilenhandlungen ---------- */
/* Griff · Checkbox · Inhalt · Status (Aktionen absolut, sonst blähen sie die Spalte auf) */
.step__side{
  display:flex; align-items:center; justify-content:flex-end; gap:.35rem;
  min-width:0; position:relative;
}
.step__r{ white-space:nowrap }
.step__act{
  display:flex; gap:.1rem; position:absolute; right:0; top:-.15rem;
  opacity:0; pointer-events:none; transition:opacity .12s;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  border:1px solid var(--line); border-radius:var(--radius); padding:.1rem .15rem;
  box-shadow:var(--shadow-1);
}
.step:hover .step__act, .step:focus-within .step__act{
  opacity:1; pointer-events:auto;
}
.act{
  font:inherit; font-size:.8rem; line-height:1; cursor:pointer; padding:.2rem .3rem;
  background:none; border:1px solid transparent; border-radius:3px; color:var(--muted);
}
.act:hover{ color:var(--seal); border-color:var(--line) }
.act--prio{ font-family:var(--font-mono); font-size:.7rem; opacity:.55 }
.card2:hover .act--prio, .card2:focus-within .act--prio{ opacity:1 }

/* Ziehgriff — nur hier greifen, nicht die ganze Zeile */
.grip{
  display:inline-grid; place-items:center; width:1.1rem; height:1.4rem;
  font-size:.85rem; line-height:1; color:var(--muted); cursor:grab;
  user-select:none; opacity:.35; transition:opacity .12s, color .12s;
}
.step:hover .grip, .card2:hover .grip, .sec__h:hover .grip, .col__h:hover .grip,
.grip:hover, .grip:focus{ opacity:1; color:var(--seal) }
.grip:active{ cursor:grabbing }
.prio--btn{
  cursor:pointer; font:inherit; padding:0; min-width:.9rem; vertical-align:middle;
  margin-right:.15rem;
}
.prio--btn:hover{ filter:brightness(1.15) }
/* p4 default: no label; faint dashed chip only on row hover */
.prio--idle{
  opacity:0; width:.9rem; border-style:dashed; color:transparent;
  vertical-align:middle;
}
.step:hover .prio--idle, .step:focus-within .prio--idle{
  opacity:.5; color:var(--muted);
}
.step:hover .prio--idle:hover, .step:focus-within .prio--idle:hover{
  opacity:1; color:var(--seal); border-color:var(--seal);
}
/* remove duplicate bar rules later in file */
.bar__note{ display:none !important }
.sec__body{ min-height:.25rem }
.sec__empty{
  margin:0 var(--pad-card) .5rem; padding:.55rem .7rem;
  border:1px dashed var(--line); border-radius:var(--radius);
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
  text-align:center;
}
.sec__body.is-over .sec__empty,
.col.is-over .sec__empty{
  border-color:var(--seal); color:var(--seal);
  background:color-mix(in srgb, var(--seal) 8%, transparent);
}
.sec__h--loose{ opacity:.85 }
.drop-nest{
  box-shadow:inset 3px 0 0 var(--seal),
    inset 0 0 0 1px color-mix(in srgb, var(--seal) 35%, transparent);
  background:color-mix(in srgb, var(--seal) 8%, transparent);
}
.bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem;
  padding:.55rem var(--pad-card); max-width:100%;
}
.bar__note{ display:none } /* hints live in bar title — kept class for old markup */

.edit{ display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; padding:.6rem var(--pad-card) }
.edit input{
  flex:1 1 100%; font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--seal); border-radius:var(--radius);
  padding:.45rem .6rem;
}
.edit input:focus{ outline:none }
.edit__h{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted) }

/* ---------- Brettansicht ---------- */
.board{ display:flex; gap:1rem; overflow-x:auto; padding:1rem var(--pad-card) }
.col{ flex:0 0 15rem; display:flex; flex-direction:column; gap:.5rem }
.col__h{
  display:flex; gap:.5rem; align-items:baseline; padding-bottom:.4rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line);
}
.col__h .sec__n{ margin-left:auto }
.card2{
  display:flex; gap:.45rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card-bg); padding:.6rem .7rem;
  min-width:0;
}
.card2.done .card2__t{ color:var(--muted) }
.card2__b{ min-width:0; flex:1 }
.card2__t{ margin:0; font-size:.92rem; line-height:1.35 }
.rep2{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted) }
/* Board: one column stack is fine; keep column width stable */
.col{ min-height:8rem }
.board{ align-items:flex-start }

/* ---------- Ziehen zum Umsortieren ---------- */
.is-dragging{ opacity:.4 }
.drop-before{ box-shadow:inset 0 2px 0 var(--seal) }
.drop-after{ box-shadow:inset 0 -2px 0 var(--seal) }
.sec__h.is-over, .col.is-over, .sec__body.is-over{
  background:color-mix(in srgb, var(--seal) 10%, transparent);
  border-radius:var(--radius);
}
.card2{ position:relative }
.card2 .grip{ flex:none; margin-top:.15rem }

/* Projektansicht über die volle Breite: keine Seitenspalte mehr, die Angaben
   zur Datei stehen in der Zeile unter dem Titel. */
.wide{ display:block }
.wide .file{ width:100% }

/* ---------- Arbeitsbahnen, übernommen aus dem Vorbau ---------- */
.lane{
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-2);
  background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:.15rem .3rem; max-width:9.5rem;
}
.lane:hover{ border-color:var(--seal) }
.lane:focus{ outline:none; border-color:var(--seal) }

/* Der Zustand der Bahn steht als Punkt im Kopf, im geschlossenen Vorrat (§6). */
.sec__h::before, .col__h::before{
  content:""; width:.5rem; height:.5rem; border-radius:999px; flex:none;
  background:var(--muted); margin-right:.1rem;
}
.sec__h[data-lane="in_progress"]::before, .col__h[data-lane="in_progress"]::before{
  background:var(--seal); animation:pulse 1.6s ease-in-out infinite;
}
.sec__h[data-lane="audit"]::before, .col__h[data-lane="audit"]::before{ background:var(--seal-2) }
.sec__h[data-lane="done"]::before,  .col__h[data-lane="done"]::before { background:var(--verify) }
.sec__h[data-lane="pending"]::before, .col__h[data-lane="pending"]::before{
  background:transparent; border:1px solid var(--line-ui);
}

/* Der Rangsetzer auf p4-Karten erscheint erst beim Überfahren, wie die
   Zeilenhandlungen. Sonst steht auf jeder Karte ein einzelnes «p». */
.card2 .act--prio{ opacity:0; transition:opacity .12s }
.card2:hover .act--prio, .card2:focus-within .act--prio{ opacity:1 }

/* ---------- Details-Fenster, aus dem Vorbau ---------- */
.modal-back{
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); padding:1.5rem;
}
.modal{
  width:min(94vw, 40rem); max-height:88vh; overflow:auto;
  background:var(--card-bg); color:var(--ink);
  border:1px solid var(--line-ui); border-radius:22px; padding:var(--pad-card);
  box-shadow:var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--seal) 16%, transparent);
}
.modal__head{ display:flex; align-items:baseline; gap:1rem; padding-bottom:.6rem; position:relative }
.modal__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--seal) 26%, transparent) 12%,
    color-mix(in srgb, var(--seal) 26%, transparent) 88%, transparent);
}
.modal__title{ margin:0; font-size:var(--step-1); font-weight:600; letter-spacing:-.015em }
.modal__x{
  margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--muted); cursor:pointer; padding:.15rem .45rem; font:inherit;
}
.modal__x:hover{ color:var(--seal); border-color:var(--seal) }
.modal__meta{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); margin:.7rem 0 1rem }
.modal__label{
  display:block; font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .3rem;
}
.modal__input, .modal__area{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--line-ui);
  border-radius:var(--radius); padding:.5rem .65rem;
}
.modal__area{ resize:vertical; line-height:1.5 }
.modal__area--tall{ min-height:11rem; font-family:var(--font-mono); font-size:.86rem }
.modal__input:focus, .modal__area:focus{ outline:none; border-color:var(--seal) }
.modal__foot{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.3rem }

/* ---------- Karten und Bahnen im Brett ---------- */
.card2{ position:relative; flex-wrap:wrap }
.card2__d{ margin:.25rem 0 0; font-size:.84rem; color:var(--ink-2) }
.card2 .lane{ margin-top:.45rem; width:100% }
.card2__act{ position:absolute; top:.35rem; right:.4rem; display:flex; gap:.1rem; opacity:0; transition:opacity .12s }
.card2:hover .card2__act, .card2:focus-within .card2__act{ opacity:1 }

.col__add{ margin-top:.35rem }
.col__addb{
  font:inherit; font-family:var(--font-mono); font-size:.78rem; cursor:pointer;
  background:none; border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); padding:.35rem .6rem; width:100%; text-align:left;
}
.col__addb:hover{ border-color:var(--seal); color:var(--seal) }
.col__add input{
  width:100%; font:inherit; font-size:.88rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--seal);
  border-radius:var(--radius); padding:.4rem .55rem;
}
.col__add input:focus{ outline:none }

.sec__add{
  font:inherit; font-size:.9rem; line-height:1; cursor:pointer; margin-left:.5rem;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--muted); padding:.05rem .35rem;
}
.sec__add:hover{ border-color:var(--seal); color:var(--seal) }
.sec__addin{
  display:block; width:calc(100% - 2*var(--pad-card)); margin:.4rem var(--pad-card);
  font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--seal);
  border-radius:var(--radius); padding:.4rem .55rem;
}
.sec__addin:focus{ outline:none }

/* Die Leeransicht steht ausserhalb des Zeilenrasters, sonst quetscht sie sich
   in die Kästchenspalte von .step. */
.step--empty{
  display:block; padding:1.1rem var(--pad-card) 1.3rem;
  border-bottom:1px solid var(--line);
}
.step--empty .step__t{ margin:0; font-size:var(--step-1); font-weight:600; letter-spacing:-.015em }
.step--empty .step__n{ display:block; margin-top:.35rem; font-weight:400; max-width:60ch }

/* ---------- Brett nach dem Vorbau: Spalte, Körper, Karte mit Leiste ---------- */
.board{
  display:flex; gap:1rem; overflow-x:auto; padding:.25rem 0 1.25rem;
  align-items:stretch; min-height:22rem; width:100%;
}
.col{
  flex:1 1 16rem; min-width:15.5rem; max-width:none;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:16px; padding:.65rem .7rem; min-height:18rem;
  display:flex; flex-direction:column; max-height:calc(100vh - 14rem);
}
.col__h{
  display:flex; align-items:center; gap:.45rem; padding:.25rem .3rem .55rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:0; margin-bottom:.45rem; flex:none; position:relative;
}
.col__h::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent), transparent 88%);
}
.col__cnt{
  margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
  background:var(--field-bg); border-radius:999px; min-width:1.4rem; text-align:center;
  padding:.1rem .35rem;
}
.col__body{ flex:1; overflow:auto; min-height:4rem; border-radius:var(--radius); padding-bottom:.25rem }
.col__body.is-over{ background:color-mix(in srgb, var(--seal) 10%, transparent) }
.sec__badge{ width:.55rem; height:.55rem; border-radius:50%; flex:none; background:var(--muted) }
.sec__badge[data-lane="in_progress"]{ background:var(--seal); animation:pulse 1.6s ease-in-out infinite }
.sec__badge[data-lane="audit"]{ background:var(--seal-2) }
.sec__badge[data-lane="done"]{ background:var(--verify) }
.sec__badge[data-lane="pending"]{ background:transparent; border:1px solid var(--line-ui) }
.sec__empty{
  color:var(--muted); font-family:var(--font-mono); font-size:.78rem; text-align:center;
  padding:.75rem .5rem; border:1px dashed var(--line); border-radius:var(--radius); margin:.25rem 0;
}
.col__add{
  width:100%; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-family:var(--font-mono); font-size:.78rem;
  text-align:left; padding:.45rem .4rem; border-radius:var(--radius); margin-top:.15rem;
}
.col__add:hover{ color:var(--seal); background:color-mix(in srgb, var(--seal) 8%, transparent) }
.col__addin{
  width:100%; font:inherit; font-size:.88rem; color:var(--ink);
  background:var(--field-bg); border:1px solid var(--seal);
  border-radius:var(--radius); padding:.4rem .55rem; margin-top:.15rem;
}
.col__addin:focus{ outline:none }

.task{
  display:flex; flex-direction:row; align-items:flex-start; gap:.5rem;
  padding:.75rem 2.2rem .75rem .45rem;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  position:relative; width:100%; max-width:100%; box-sizing:border-box;
}
.task:last-of-type{ border-bottom:0 }
.task.done .task__content{ color:var(--muted) }
.task__rail{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  flex:0 0 auto; width:2.15rem; padding-top:.05rem;
}
.task__body{ flex:1 1 auto; min-width:0; max-width:100%; padding-top:.05rem }
.task__content{
  margin:0; padding:.2rem 0 .4rem; font-size:1rem; line-height:1.5; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere; cursor:pointer;
}
.task__content:hover{ color:var(--seal) }
.task__desc{
  margin:.2rem 0 .4rem; font-size:.86rem; line-height:1.5; color:var(--ink-2);
  white-space:pre-wrap; overflow-wrap:break-word;
}
.task__meta{ display:flex; flex-wrap:wrap; gap:.3rem .4rem; margin-top:.35rem; align-items:center }
.task__meta .lane{ margin-left:auto }
.task__actions{
  position:absolute; top:.45rem; right:.25rem;
  display:flex; flex-direction:column; gap:0; opacity:0; z-index:2;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  border-radius:var(--radius); transition:opacity .12s;
}
.task:hover .task__actions, .task:focus-within .task__actions{ opacity:1 }

.check{
  width:1.6rem; height:1.6rem; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--line-ui); background:var(--field-bg);
  display:grid; place-items:center; flex:none; color:transparent; font-size:0;
}
.check:hover{ border-color:var(--seal) }
.check.on{ background:var(--verify); border-color:var(--verify) }
.check.on::after{
  content:"✓"; color:var(--btn-fg); font-size:.8rem; line-height:1;
}
.task .prio{
  min-width:2rem; height:1.6rem; border-radius:2px; padding:0 .35rem; flex:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.7rem; display:inline-grid; place-items:center;
  background:transparent; border:1px solid currentColor; color:var(--muted);
}
.task .prio--1{ color:var(--warn) }
.task .prio--2{ color:var(--seal) }
.task .prio--3{ color:var(--line-ui) }
.task .grip{ cursor:grab; color:var(--muted); min-height:1.4rem; display:grid; place-items:center }
/* Der Punkt kommt aus .sec__badge, wie im Vorbau. Der frühere ::before entfällt,
   sonst stehen zwei Punkte im Spaltenkopf. */
.col__h::before{ content:none }


/* ---------- Grundton eine Stufe heller ----------
   Bewusste Abweichung von docs/handoff-design.md §3: die Arbeitsfläche wird
   länger angesehen als eine Werbeseite. Gilt für alle Seiten, damit keine
   Unterseite anders aussieht als die andere. */
:root{
  --paper:#21252C; --paper-2:#272C34;
  --card-bg:#2A2F39; --field-bg:#242932;
  --line:#39404C; --line-2:#434B58; --line-ui:#78808F;
}

/* ---------- Kleintext und Ränder lesbarer ----------
   Gemessen gegen --card-bg #2A2F39: --muted stand bei 4.46:1 (AA verlangt
   4.5:1 für Fliesstext), --warn bei 3.76:1, --line-ui als Komponentenrand
   bei 2.69:1 (Soll 3:1). Drei Töne angehoben, der Farbcharakter bleibt;
   die helle Fassung erfüllt AA bereits und bleibt unangetastet. */
:root{ --muted:#9CA4B2; --warn:#DC7A6E }

/* ---------- Heller Arbeitsplatz ----------
   Eigentümer 2026-09-11, wie auf entrosana.com: auf Rechnern mit heller
   Systemeinstellung, die den dunklen Modus zeigen, wirkte alles etwas zu dunkel
   (Büromonitor). Dort liegen Grund, Flächen, Felder, Linien und die leise Schrift
   noch eine Stufe über den Werten oben; Geräte mit dunkler Systemeinstellung sehen
   die Werte oben unverändert. Nur die Töne, nicht die Akzente. Dunkel ist der
   Zustand ohne Attribut, darum :not([data-theme="light"]); --schimmer folgt --paper.
   Denselben Satz trägt project-shell.css für /project. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="light"]){
    --paper:#2A2E35; --paper-2:#30353D; --card-bg:#333842; --field-bg:#2D323B;
    --line:#434A56; --line-2:#4D5562; --line-ui:#828A99;
    --muted:#A4ACBA; --ink-2:#CDD1D8;
  }
}

/* Der Rollbalken bekommt seine Bahn immer reserviert. Sonst springt die Breite
   je nachdem, ob eine Seite genug Inhalt zum Rollen hat, und die Kopfpille
   endet auf der einen Seite 15 px weiter rechts als auf der anderen. */
html{ scrollbar-gutter:stable }

/* ---------- Erledigt ist grün ----------
   --verify ist ein Blaugrün (#2FB89E) und liest sich nicht eindeutig als
   «fertig». Auf Wunsch des Eigentümers bekommt der Zustand einen eigenen
   grünen Ton. Bewusste Erweiterung des Vorrats aus §8, nur für diesen einen
   Zustand; --verify bleibt für Geprüftes unverändert. */
:root{ --done:#35B36B }
:root[data-theme="light"]{ --done:#1E8E4A }

/* ---------- Projektübersicht ---------- */
.ov{ display:grid; gap:var(--gap-grid); grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)) }
.ov__card{
  display:flex; flex-direction:column; gap:.9rem; text-decoration:none; color:inherit;
  border-top:2px solid var(--seal);
}
.ov__card:hover{ border-color:var(--seal); background:color-mix(in srgb, var(--seal) 6%, var(--card-bg)) }
.ov__head{ display:flex; gap:.9rem; align-items:center }
.ov__m{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); margin:.15rem 0 0 }
.ov__lanes{ display:grid; gap:.3rem }
.ov__lane{ display:flex; align-items:center; gap:.5rem; font-size:.88rem }
.ov__dot{ width:.5rem; height:.5rem; border-radius:999px }
.ov__lname{ color:var(--ink-2) }
.ov__lcount{ margin-left:auto; font-family:var(--font-mono); font-size:.76rem; color:var(--muted) }
.ov__foot{
  display:flex; align-items:center; gap:.6rem; padding-top:.7rem; position:relative;
  font-family:var(--font-mono); font-size:.76rem; color:var(--muted);
}
.ov__foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--seal) 26%, transparent), transparent 82%);
}
.ov__p1{ color:var(--warn) }
.ov__go{ margin-left:auto; color:var(--seal) }

/* ---------- Ablegen und Löschen ----------
   Zwei Handlungen, zwei Gewichte. Ablegen erscheint erst, wenn nichts mehr
   offen ist, und trägt deshalb die Farbe des Erledigten. Löschen ist nie ein
   Vorschlag: es steht nur im Dreipunktmenü und dort in --warn. */
.ov__card--fertig{ border-top-color:var(--done) }
.ov__titel{ min-width:0; flex:1 1 auto }
.ov__menu{ position:relative; margin-left:auto; align-self:flex-start }
.ov__more, .top__more{
  font:inherit; line-height:1; cursor:pointer; letter-spacing:0;
  width:1.75rem; height:1.75rem; display:grid; place-items:center; padding:0;
  background:none; color:var(--muted); border:1px solid transparent; border-radius:var(--radius);
}
.ov__more:hover, .top__more:hover, .ov__more[aria-expanded="true"], .top__more[aria-expanded="true"]{
  color:var(--ink); border-color:var(--line-ui);
}
.ov__arch{
  font-family:var(--font-mono); font-size:.76rem; line-height:1; cursor:pointer;
  padding:.4rem .6rem; border-radius:var(--radius);
  background:color-mix(in srgb, var(--done) 14%, transparent);
  color:var(--done); border:1px solid color-mix(in srgb, var(--done) 42%, transparent);
}
.ov__arch:hover{ background:color-mix(in srgb, var(--done) 22%, transparent) }
.top__menu{ position:relative; display:flex; align-items:center }
/* Ist alles erledigt, sagt es der Punkt am Knopf — ohne die Pille zu dehnen. */
.top__more--fertig::after, .ov__more--fertig::after{
  content:""; position:absolute; top:.15rem; right:.15rem;
  width:.36rem; height:.36rem; border-radius:999px; background:var(--done);
  box-shadow:0 0 5px color-mix(in srgb, var(--done) 65%, transparent);
}
.top__more, .ov__more{ position:relative }

/* Das Menü selbst. Hängt am Auslöser, nicht am Fenster: so wandert es beim
   Scrollen mit und braucht keine Rechnerei. */
.menu{
  position:absolute; top:calc(100% + .35rem); right:0; z-index:40; min-width:11rem;
  display:flex; flex-direction:column; padding:.3rem;
  background:var(--card-bg); border:1px solid var(--line-ui); border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}
.menu__item{
  font:inherit; font-size:.88rem; text-align:left; cursor:pointer;
  padding:.45rem .55rem; border:0; border-radius:var(--radius);
  background:none; color:var(--ink-2);
}
.menu__item:hover{ background:color-mix(in srgb, var(--seal) 10%, transparent); color:var(--ink) }
.menu__item--warn{ color:var(--warn) }
.menu__item--warn:hover{ background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--warn) }

/* Die Rückfrage vor dem Löschen. */
.dlg{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1rem;
  background:color-mix(in srgb, #000 52%, transparent);
}
.dlg__box{
  width:min(94vw, 27rem); padding:var(--pad-card);
  background:var(--card-bg); border:1px solid var(--line-ui); border-radius:16px;
  box-shadow:var(--shadow-2);
}
.dlg__title{ font-size:var(--step-1); margin:0 0 .5rem; line-height:1.25 }
.dlg__text{ font-size:.9rem; color:var(--ink-2); margin:0 }
.dlg__foot{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.1rem }
.dlg__cancel, .dlg__ok{
  font:inherit; font-size:.88rem; cursor:pointer; padding:.45rem .9rem;
  border-radius:var(--radius); border:1px solid var(--line-ui);
  background:none; color:var(--ink-2);
}
.dlg__cancel:hover{ color:var(--ink); border-color:var(--ink-2) }
.dlg__ok--warn{
  background:var(--warn); border-color:var(--warn); color:var(--btn-fg, #fff); font-weight:600;
}
.dlg__ok--warn:hover{ filter:brightness(1.08) }

/* Das Archiv unter dem Feld: eine ruhige Liste, kein zweites Kartenfeld. */
.ov__abschnitt{ margin-top:var(--pad-block) }
.ov__none{ border-top:2px solid var(--line-ui) }
.ov__archiv{ display:flex; flex-direction:column; gap:.1rem; padding-block:.6rem }
.ov__row{
  display:flex; align-items:center; gap:.75rem; padding:.5rem .3rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
}
.ov__row + .ov__row{ border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent) }
.ov__row .pdot{ width:.9rem; height:.9rem; flex:none; display:grid; place-items:center }
.ov__row .pdot::before{
  content:""; width:.4rem; height:.4rem; border-radius:999px;
  background:color-mix(in srgb, var(--muted) 70%, transparent);
}
.ov__rname{
  font-family:var(--font-sans); font-size:.95rem; color:var(--ink-2);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ov__rcount{ flex:none }
.ov__rwhen{ margin-left:auto; flex:none }
.ov__back{
  font:inherit; font-size:.76rem; cursor:pointer; flex:none;
  padding:.3rem .55rem; border-radius:var(--radius);
  background:none; color:var(--seal); border:1px solid color-mix(in srgb, var(--seal) 38%, transparent);
}
.ov__back:hover{ background:color-mix(in srgb, var(--seal) 12%, transparent) }
.ov__row .ov__go{ margin-left:0; flex:none }
.ov__row .ov__menu{ margin-left:0 }
@media (max-width:640px){
  .ov__rwhen{ display:none }
}

/* ---------- Projekte hängen am Eintrag ----------
   Vorher nannte die Leiste die Projekte zweimal: als Reiter «Projects» oben
   und als eigene Zwischenüberschrift mit Plus weiter unten. Jetzt trägt der
   Reiter selbst Pfeil und Plus, die Liste klappt direkt darunter auf. Das
   Aufklappen läuft über grid-template-rows, damit die Höhe weich fährt statt
   zu springen; der Zustand übersteht den Seitenwechsel (rail-projects.js). */
.rail__row{ display:flex; align-items:center; gap:.3rem }
.rail__row .rail__item{ flex:1 1 auto; min-width:0 }
.rail__chev{
  width:1.4rem; height:1.4rem; flex:none; display:grid; place-items:center; padding:0;
  font:inherit; font-size:.68rem; line-height:1; cursor:pointer;
  background:none; border:0; color:var(--muted); border-radius:var(--radius);
}
.rail__chev::before{ content:"▸"; display:block; transition:transform .22s ease }
.rail__chev:hover{ color:var(--seal) }
.rail__chev[aria-expanded="true"]::before{ transform:rotate(90deg) }
.rail__proj{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s ease }
.rail__proj > .nav__projects{ overflow:hidden; min-height:0 }
.rail__proj.is-closed{ grid-template-rows:0fr }

/* Das Auswahlfenster für neue Projekte kommt weich, nicht sprunghaft. */
.pick[open]{ animation:pick-rise .18s cubic-bezier(.2,.7,.3,1) }
@keyframes pick-rise{ from{ opacity:0; transform:translateY(8px) } }

/* ---------- Katalog, Unterseiten, Dienste ----------
 *
 * Kartenwand fuer Modules und Tools, die Unterseite dahinter, und die
 * Dienstegruppen zum Auf- und Zuklappen. Nutzt ausschliesslich die Marken
 * aus :root — keine neue Farbe, kein neuer Radius (handoff-design §8).
 * Steht am Ende, weil die Leiste oben (.top) hier dichter gesetzt wird als
 * weiter vorn: der Text laeuft darunter durch. */

/* ------------------------------------------------------------- Kartenwand */
.cards{ display:grid; gap:var(--gap-grid); grid-template-columns:repeat(3,1fr) }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:759.98px){ .cards{ grid-template-columns:1fr } }

/* Die ganze Karte ist der Link. Kein Knopf in der Ecke, den man treffen muss —
   auf dem Telefon ist die Trefferfläche sonst der einzige Fehler. */
.mcard{
  display:flex; flex-direction:column; gap:.55rem;
  padding:var(--pad-card); background:var(--card-bg);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); text-decoration:none; color:inherit;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mcard:hover, .mcard:focus-visible{
  border-color:var(--line-ui); transform:translateY(-2px); box-shadow:var(--shadow-2);
}
.mcard__t{ font-size:var(--step-1); font-weight:600; letter-spacing:-.015em; margin:0 }
.mcard__l{ color:var(--ink-2); margin:0; font-size:.94rem }
.mcard__m{
  margin-top:auto; padding-top:.6rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted);
  display:flex; align-items:center; gap:.5rem;
}
.mcard__m > span:first-child{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mcard__go{ margin-left:auto; flex:none; color:var(--seal) }

.chip{
  align-self:flex-start; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--seal);
  border:1px solid color-mix(in srgb, var(--seal) 40%, var(--line));
  border-radius:999px; padding:.15rem .55rem;
}
.chip--muted{ color:var(--muted); border-color:var(--line) }

/* Filterleiste über der Kartenwand. Reine Anzeigefilter, keine Navigation. */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem }
.filters button{
  font:inherit; font-size:var(--step--1); cursor:pointer;
  background:none; color:var(--ink-2); border:1px solid var(--line);
  border-radius:999px; padding:.3rem .8rem;
}
.filters button.is-on{ color:var(--btn-fg); background:var(--seal); border-color:var(--seal) }

/* ------------------------------------------------------------ Unterseite */
.mod__back{ font-size:var(--step--1); color:var(--muted); text-decoration:none }
.mod__back:hover{ color:var(--ink-2) }
.mod__lede{ font-size:var(--step-1); color:var(--ink-2); max-width:56ch; margin:.4rem 0 0 }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--gap-grid) }
@media (max-width:759.98px){ .facts{ grid-template-columns:1fr } }
.facts div{ padding:.7rem 0; border-bottom:1px solid var(--line) }
.facts dt{ font-size:var(--step--1); color:var(--muted) }
.facts dd{ margin:.15rem 0 0; color:var(--ink) }
.steps{ list-style:none; margin:0; padding:0; counter-reset:s }
.steps li{ position:relative; padding:.55rem 0 .55rem 2.2rem; border-bottom:1px solid var(--line) }
.steps li:last-child{ border-bottom:0 }
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:.55rem; width:1.5rem; height:1.5rem;
  display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line-ui); font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
}
.steps b{ font-weight:600 }
.steps span{ display:block; color:var(--muted); font-size:.9rem }

/* Entwurfstext ist als solcher zu erkennen, sonst wird er irgendwann zitiert. */
.draft{ border-left:2px dashed color-mix(in srgb, var(--warn) 55%, var(--line)); padding-left:.9rem }
.draft::after{
  content:"draft — your words go here"; display:block; margin-top:.4rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--warn);
}

/* ------------------------------------------------------------- Services */
.svcbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin:0 0 1.2rem }
.svcbar .note{ margin:0 }
.svcbar .btn{ margin-left:auto }

.grp{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card-bg); box-shadow:var(--shadow-1); margin-bottom:.7rem;
}
.grp > summary{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:.75rem var(--pad-card); list-style:none; border-radius:var(--radius);
}
.grp > summary::-webkit-details-marker{ display:none }
.grp > summary::before{
  content:"›"; font-size:1.1rem; line-height:1; color:var(--muted);
  transition:transform .16s ease; transform-origin:50% 55%;
}
.grp[open] > summary::before{ transform:rotate(90deg) }
.grp > summary:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent) }
.grp__n{ font-weight:600 }
.grp__c{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted) }
.grp__s{ margin-left:auto; font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted) }
.grp__s.ok{ color:var(--verify) }
.grp__s.warn{ color:var(--warn) }
.grp__body{ border-top:1px solid var(--line); padding:0 }
.grp .tbl th{ padding-top:.6em }

.origin{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:.08rem .45rem; white-space:nowrap;
}
.origin--module{ color:var(--seal); border-color:color-mix(in srgb, var(--seal) 40%, var(--line)) }
.origin--own{ color:var(--verify); border-color:color-mix(in srgb, var(--verify) 40%, var(--line)) }

.rowact{ white-space:nowrap; background:none; border:0; padding:.2rem .35rem; cursor:pointer; color:var(--muted); font:inherit; font-size:.9rem }
.rowact:hover{ color:var(--ink) }
.rowact--danger:hover{ color:var(--warn) }

.hint{
  border:1px solid var(--line); border-left:2px solid var(--seal);
  border-radius:var(--radius); padding:.8rem 1rem; color:var(--ink-2);
  font-size:.92rem; margin:.9rem 0 0;
}
.hint code{ font-family:var(--font-mono); font-size:.85em; color:var(--seal) }

/* style-Attribute werden von der eigenen CSP (style-src 'self') verworfen —
   deshalb steht auch Kleinkram als Klasse hier. */
.measure{ max-width:62ch }
.chip--head{ display:inline-block; margin:.7rem 0 .5rem }
.gap-top{ margin-top:1rem }

/* Feste Spalten, sonst misst jede Gruppe ihre Tabelle selbst und die Spalten
   springen von Block zu Block. */
/* Sieben Spalten brauchen Platz: unter 54rem scrollt die Gruppe in sich, statt dass Zellen in hohe Zeilen umbrechen (2026-09-10). */
.grp__body{ overflow-x:auto; overscroll-behavior-x:contain }
.grp .tbl{ table-layout:fixed; min-width:54rem }
.grp .tbl td{ vertical-align:top }
.grp .tbl th:nth-child(1){ width:2.4rem }
.grp .tbl th:nth-child(2){ width:11.5rem }
.grp .tbl th:nth-child(4){ width:7.5rem }
.grp .tbl th:nth-child(5){ width:7.5rem }
.grp .tbl th:nth-child(6){ width:8.5rem }
.grp .tbl th:nth-child(7){ width:9.5rem }
.grp .tbl .svc__p, .grp .tbl .svc__s{ overflow-wrap:anywhere }
.grp .tbl td.num .rowact{ display:inline-block }
.field > [hidden]{ display:none !important }
.grp .tbl th:nth-child(5){ width:7rem }
.grp .tbl th:nth-child(6){ width:10.5rem }
.grp .tbl th:nth-child(7){ width:6rem }
.grp .tbl td{ overflow-wrap:anywhere }

/* Auf dem Telefon ist eine siebenspaltige Tabelle keine Tabelle mehr, sondern
   ein Querscroll. Dieselbe Auszeichnung, als Zeile gesetzt. */
@media (max-width:759.98px){
  .grp .tbl{ table-layout:auto }
  .grp .tbl thead{ display:none }
  .grp .tbl, .grp .tbl tbody{ display:block }
  .grp .tbl tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem;
    padding:.75rem var(--pad-card); border-bottom:1px solid var(--line);
  }
  .grp .tbl tr:last-child{ border-bottom:0 }
  .grp .tbl td{ display:block; padding:0; border:0 }
  .grp .tbl td:nth-child(1){ order:0 }
  .grp .tbl td:nth-child(2){ order:1; flex:1 1 auto }
  .grp .tbl td:nth-child(5){ order:2 }
  .grp .tbl td:nth-child(3){ order:3; flex:1 0 100% }
  .grp .tbl td:nth-child(4){ order:4 }
  .grp .tbl td:nth-child(6){ order:5; text-align:left }
  .grp .tbl td:nth-child(7){ order:6; margin-left:auto; text-align:right }
}

.mcard__head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.mcard__head .note{ font-size:.7rem }
.cards--2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:759.98px){ .cards--2{ grid-template-columns:1fr } }
.crumb__up{ color:inherit }
.draftnote{
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--warn);
  margin:.9rem 0 0;
}

.hint__t{ margin:0 0 .35rem; color:var(--ink); font-weight:600 }
.hint p{ margin:0 0 .6rem }
.watchline{
  font-family:var(--font-mono); font-size:.78rem; color:var(--seal);
  background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem .7rem; margin:.2rem 0 .8rem; overflow-x:auto; white-space:pre;
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--gap-grid) }
@media (max-width:559.98px){ .row2{ grid-template-columns:1fr } }
.pick__box select{
  font:inherit; color:var(--ink); background:var(--field-bg);
  border:1px solid var(--line-ui); border-radius:var(--radius); padding:.5rem .6rem;
}

/* Die Leiste oben liegt fest und der Text laeuft darunter durch. Bei 86 %
   Deckung liest man beides gleichzeitig; deshalb hier dichter. */
.top{ background:color-mix(in srgb, var(--paper) 97%, transparent) }

/* Detailseite: Luft zwischen den Zeilen, sonst steht alles auf einem Haufen. */
#detail .mod__lede{ margin-bottom:.2rem }
#detail .facts div{ padding:.85rem 0 }
#detail .steps li{ padding-top:.7rem; padding-bottom:.7rem }
#detail .steps span{ margin-top:.15rem }
#detail ul.measure{ margin:0; padding-left:1.15rem }
#detail ul.measure li{ margin-bottom:.35rem }
#detail .actions{ margin-bottom:.9rem }
#detail .actions + .muted{ font-size:.9rem; margin:0 }
#detail .hint{ margin-top:1.1rem }

/* Offene Bitten: eine Zeile je Bitte, Aufwand rechts. Bewusst keine Karten —
   eine Liste laesst sich in einer Minute pflegen und liest sich schneller. */
.asks{ list-style:none; margin:0; padding:0 }
.asks li{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.asks li:last-child{ border-bottom:0 }
.ask__t{ flex:1 1 22rem; min-width:0 }
.ask__w{
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); white-space:nowrap;
}
.block > .actions{ margin-top:1.2rem }
.block > ul.measure{ margin:0; padding-left:1.15rem }
.block > ul.measure li{ margin-bottom:.4rem }

.asks + .muted{ margin-top:1rem }

/* Die Zeile unter dem Namen ist dieselbe wie auf entrosana.com: Schreibmaschine,
   leise, nennt das Gebiet statt es zu beschreiben. */
.mcard__who, .mod__who{
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--seal);
  margin:0;
}
.mod__who{ margin:.5rem 0 .1rem }

/* Ein einzelnes fertiges Modul steht nicht als Drittelkarte da. */
.cards--1{ grid-template-columns:minmax(0,42rem) }
.dl__lang{
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--seal);
  margin:1rem 0 .5rem;
}
#detail .dl__lang:first-of-type{ margin-top:.4rem }
#detail .actions{ margin-bottom:.9rem }

/* Zwischenueberschrift unter einer Rubrik, wenn die Rubrik selbst schon eine
   Ueberschrift traegt. */
.work__h2{ font-size:var(--step-1); font-weight:600; letter-spacing:-.015em; margin:0 0 .5rem }

/* ---------- Reiter für die Gebiete ----------
   Dieselbe Auswahl-Sprache wie in der Leiste: Füllung im Sealton und ein
   Balken. Der Balken steht hier unten statt links, das unterscheidet einen
   Reiter von einem Listeneintrag. Die Höhe von 2.75rem ist die
   Fingergrösse — die Reiter tragen in jeder Breite, ohne Sonderfassung. */
.tabs{ display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 1.3rem; position:relative }
.tabs::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent), transparent 82%);
}
.tabs__b{
  position:relative; z-index:1; display:inline-flex; align-items:center;
  min-height:2.75rem; padding:.4rem .85rem; border:0; cursor:pointer;
  border-radius:10px 10px 0 0; background:none; color:var(--ink-2);
  font:inherit; font-size:.95rem; transition:background-color .12s, color .12s;
}
.tabs__b:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent) }
.tabs__b.is-on{ color:var(--ink); background:color-mix(in srgb, var(--seal) 13%, transparent) }
.tabs__b.is-on::after{
  content:""; position:absolute; left:.55rem; right:.55rem; bottom:0; height:2px;
  border-radius:999px; background:var(--seal);
  box-shadow:0 0 6px color-mix(in srgb, var(--seal) 55%, transparent);
}
.tabpanel{ max-width:68ch }
.tabpanel:focus-visible{ outline:2px solid var(--seal); outline-offset:6px; border-radius:var(--radius) }
.tabpanel__who{ font-size:var(--step--1); color:var(--seal-2); margin:0 0 .55rem }
.tabpanel__l{ font-size:var(--step-1); line-height:1.4; letter-spacing:-.01em; margin:0 0 .65rem }
.tabpanel__a{ color:var(--ink-2); margin:0 0 1rem }
.tabpanel__go{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--seal) }
/* Auf schmalen Geräten teilen sich die Reiter die Zeile, statt umzubrechen. */
@media (max-width:559.98px){ .tabs__b{ flex:1 1 8rem; justify-content:center } }

/* ---------- Die helle Fassung schärfen ----------
   Sie war formlos: --paper stand auf #f5fffe, --card-bg auf #FFFFFF — ein
   Prozent Unterschied. Karten, Kopfpille und Leiste verschwammen mit dem
   Grund, und das Korn hatte keine Fläche, auf der es sichtbar wird (Rauschen
   im Overlay-Modus braucht einen Ton, den es aufhellen und abdunkeln kann).
   Deshalb bekommt der Grund einen echten Ton, und Weiss wird wieder das,
   was es sein soll: die erhobene Fläche darüber. */
:root[data-theme="light"]{
  --paper:#CFE6EA; --paper-2:#C0DBE1;
  /* Ränder kühler und eine Spur dunkler: der alte Wert war ein warmes Grau
     und stand quer zum Cyan des Hauses. */
  --line:#A8C4C9; --line-2:#2C313B; --line-ui:#6F7E80;
  /* Auf dem getönten Grund verfehlten die alten Werte die Lesbarkeitsschwelle:
     --muted lag bei 3.82:1, --seal bei 4.37:1 (Soll 4.5:1). Eine Stufe tiefer,
     der Farbcharakter bleibt. Gemessen gegen Grund und gegen die weisse Karte. */
  --muted:#5C6067; --seal:#066675;
  --shadow-1:0 1px 2px rgba(16,32,36,.07),0 4px 10px rgba(16,32,36,.10);
  --shadow-2:0 3px 6px rgba(16,32,36,.09),0 12px 28px rgba(16,32,36,.13),0 28px 56px rgba(16,32,36,.08);
}
/* Leiste und Kopfpille sind auf hellem Grund keine dunklen Schleier, sondern
   helle Körper: derselbe Bau wie im Dunkeln, nur andersherum gemischt. */
:root[data-theme="light"] .rail{ background:color-mix(in srgb, #fff 60%, transparent) }
:root[data-theme="light"] .top{ background:color-mix(in srgb, #fff 84%, transparent) }
/* Die Lichtkante am oberen Rand ist auf Weiss unsichtbar; dort trägt eine
   feine dunkle Kante die Form. */
:root[data-theme="light"] .rail,
:root[data-theme="light"] .top,
:root[data-theme="light"] .pick,
:root[data-theme="light"] .modal{
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Masse und Feingrade als Klassen. Inline-Stile blockiert die CSP (style-src 'self'),
   geprüft 2026-09-08 an index.html:135. */
.work__sub--narrow{ max-width:46ch }
.work__sub--wide{ max-width:62ch }
.fine{ font-size:.9rem }
.fine--tight{ font-size:.88rem; margin:0 }

/* Phase 4: Einreichen aus der Projektdatei. */
.field select, .field textarea{
  font:inherit; font-size:.92rem; padding:.6em .7em; border-radius:var(--radius);
  border:1px solid var(--line-ui); background:var(--field-bg); color:var(--ink);
}
.field textarea{ min-height:7.5em; resize:vertical }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }   /* Honigfalle */
.submit{ margin-top:1.2rem }
.submit .field{ max-width:none }
.submit__out{ margin-top:.8rem }
.status__row{ display:grid; grid-template-columns:9rem 1fr; gap:.3rem 1rem; padding:.45rem 0; border-bottom:1px solid var(--line) }
.status__row:last-child{ border-bottom:0 }
.status__k{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); letter-spacing:.08em; text-transform:uppercase }

/* Phase 6: Beiträge aus der Gemeinschaft tragen den Namen der einreichenden Person. */
.mod__by, .mcard__by{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); margin:.1rem 0 .4rem }

/* ---------- Die Leiste steht (2026-09-08) ----------
   Sie war eine Rasterspalte, die mit der Seite wuchs: auf /contribute 3628 px
   hoch, Marke und Konto beim Scrollen fort. Jetzt klebt sie wie die Pille bei
   .85rem, ist so hoch wie das Fenster und rollt für sich, wenn sie mehr trägt.
   Unter 760 px bleibt sie die zugeklappte Zeile im Fluss. */
.rail{
  position:sticky; top:.85rem; align-self:start;
  height:calc(100dvh - 1.7rem); overflow:hidden auto; scrollbar-width:thin;
}
/* Der Rollbalken der Leiste: dünn, dunkler Griff, kein Trog, keine Pfeile. Windows
   zeichnete sonst seinen hellen Systembalken in die dunkle, gerundete Leiste
   (gtaura, 2026-09-08 22:35, Fenster rund 790 px hoch). Erscheint nur, wenn die
   Leiste mehr trägt als das Fenster hoch ist. */
.rail{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--line-ui) 55%, transparent) transparent }
.rail:hover{ scrollbar-color:var(--line-ui) transparent }
@media (max-width:759.98px){
  .rail{ position:relative; top:auto; height:auto; overflow:hidden }
  .rail:not(.is-open) .nav__filters{ display:none }
}

/* ---------- Einreichen: eine Spalte, drei Gruppen (2026-09-08) ----------
   Vier Felder nebeneinander mit je eigenem Hilfetext liefen ungleich hoch, und
   die Beschriftungen hingen nicht an den Feldern. Jetzt eine Spalte auf 560 px
   wie .form auf entrosana.com (Handoff §6), drei Gruppen durch den Trennstrich
   (§4, 26 %) gegliedert; Pflicht ist die Regel, «optional» die Ausnahme.
   Kontrast bleibt, wo er trägt: Schaltfläche, Fehler, die Entscheidung zur
   Namensnennung. */
.submit{ max-width:560px }
.submit fieldset{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:.9rem }
.submit fieldset + fieldset{ margin-top:1.4rem; padding-top:1.3rem; position:relative }
.submit fieldset + fieldset::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent) 0,
    color-mix(in srgb, var(--seal) 26%, transparent) 60%, transparent);
}
.submit legend{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:0; margin-bottom:.2rem;
}
.submit .field{ margin-bottom:0 }
.field input, .field select, .field textarea{ line-height:1.35; min-height:2.6rem; width:100%; box-sizing:border-box }
.field textarea{ min-height:7.5em }
.field.is-bad select, .field.is-bad textarea{ border-color:var(--warn) }
.field .help{ line-height:1.4 }
.field label .opt{ font-size:var(--step--1); color:var(--muted); font-weight:400 }
.submit__rule{ font-size:var(--step--1); color:var(--muted); margin:0 0 1.1rem }
.submit__choice{
  display:grid; gap:.5rem; padding:.85rem .95rem; border-radius:var(--radius);
  border:1px solid var(--line); background:color-mix(in srgb, var(--seal) 4%, transparent);
}
.submit__choice .toggle{ align-items:flex-start }
.submit__choice .toggle__track{ flex:none; margin-top:.15rem }
.submit__choice .toggle__label{ color:var(--ink) }
.submit__choice .help{ font-size:var(--step--1); color:var(--muted); margin:0 }
.submit__choice a{ color:var(--seal) }
.submit .actions{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.submit__out:empty{ display:none }
.submit__out .note{ align-items:flex-start; flex-wrap:wrap }

/* ---------- Konto (2026-09-08) ----------
   Der Kontoblock der Leiste ist ein Verweis auf /me; angemeldet trägt der Kreis
   den Anfangsbuchstaben in Siegelfarbe. /me selbst: eine Spalte auf 560 px wie
   das Formular, Stand als .chip, keine neuen Farben. */
.rail__acct{ color:inherit; text-decoration:none; border-radius:10px; min-width:0 }
.rail__acct > span:last-child{ min-width:0; display:block }
.rail__acct:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent) }
.rail__acctname, .rail__acctsub{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail__acct.is-in .rail__avatar{ color:var(--seal); border-color:var(--seal); background:color-mix(in srgb, var(--seal) 12%, transparent) }
.me{ max-width:560px; margin-top:1.2rem; display:grid; gap:1rem }
.me__id{ display:flex; gap:1rem; align-items:flex-start }
.me__avatar{
  width:3rem; height:3rem; border-radius:999px; flex:none; display:grid; place-items:center;
  border:1px solid var(--seal); color:var(--seal); background:color-mix(in srgb, var(--seal) 12%, transparent);
  font-family:var(--font-mono); font-size:1.2rem;
}
.me__meta{ display:grid; gap:.4rem; min-width:0; justify-items:start }
.me__line{ margin:0; color:var(--ink-2) }
.me .field{ margin:0; max-width:none }
.me .actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.me .submit__out{ margin-top:.6rem }
.me textarea{ min-height:6em }
/* Der dritte Weg unter den Knöpfen braucht etwas Luft. */
.actions + .fine{ margin-top:.7rem }

/* /me: Profil bearbeiten, Aufgaben, Dokumente, Journal (Vorbild LearningView:
   planen, begleiten, reflektieren). Listen in einer Spalte, Mono für Zahlen. */
.me__edit summary{ list-style:none; display:inline-block; cursor:pointer }
.me__edit summary::-webkit-details-marker{ display:none }
.me__edit[open] summary{ margin-bottom:.9rem }
.me__edit form{ display:grid; gap:.9rem }
/* Sprachwähler: Chips oben, Feld, Buchstabenleiste, Trefferliste in Fluss (kein Überlagern). */
.langpick{ display:grid; gap:.5rem }
.langpick__chips{ display:flex; flex-wrap:wrap; gap:.35rem; min-height:1.6rem; align-items:center }
.langpick__chip{ display:inline-flex; align-items:center; gap:.3rem; text-transform:none; letter-spacing:0; font-family:var(--font-sans); font-size:var(--step--1) }
.langpick__x{ border:0; background:none; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 .1rem }
.langpick__x:hover{ color:var(--warn) }
.langpick__empty{ font-size:var(--step--1); color:var(--muted) }
.langpick__abc{ display:flex; flex-wrap:wrap; gap:.15rem }
.langpick__letter{
  width:1.7rem; height:1.7rem; border:1px solid var(--line); border-radius:var(--radius); background:none;
  color:var(--ink-2); font-family:var(--font-mono); font-size:.78rem; cursor:pointer;
}
.langpick__letter:hover{ border-color:var(--seal); color:var(--seal) }
.langpick__list{ display:flex; flex-wrap:wrap; gap:.3rem; max-height:11rem; overflow:auto; padding:.4rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--field-bg) }
.langpick__opt{
  border:1px solid var(--line-ui); border-radius:999px; background:none; color:var(--ink);
  font-size:var(--step--1); padding:.25rem .7rem; cursor:pointer; text-align:left;
}
.langpick__opt:hover, .langpick__opt.is-hi{ border-color:var(--seal); color:var(--seal); background:color-mix(in srgb, var(--seal) 10%, transparent) }
.langpick__none{ font-size:var(--step--1); color:var(--muted) }
.me__list{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.me__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; padding:.5rem 0; border-top:1px solid var(--line) }
.me__row:first-child{ border-top:0 }
.me__t{ color:var(--ink); flex:1 1 14rem; min-width:0 }
.me__n{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); white-space:nowrap }
.me__next{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--seal); flex:1 1 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.me__file{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--seal) }

/* Anmelden und Abmelden als Knöpfe unter dem Kontoblock (Wunsch des Eigentümers, 2026-09-08). */
.rail__auth{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.35rem .55rem .1rem }
.rail__authbtn{ font-size:.78rem; padding:.35rem .8rem }
@media (max-width:759.98px){ .rail:not(.is-open) .rail__auth{ display:none } .rail__authbtn{ min-height:2.4rem } }

/* Handlungszeilen (2026-09-08): Knöpfe standen als Inline-Elemente und legten sich
   am Telefon übereinander (/contribute: 410–443 px und 434–467 px gemessen).
   Jetzt eine Flex-Zeile mit Abstand; am Telefon dürfen Beschriftungen umbrechen. */
.actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
@media (max-width:759.98px){ .actions .btn{ white-space:normal; text-align:center; line-height:1.3 } }

/* Profilbild, Journal, öffentliches Profil (2026-09-08). */
.me__avatar{ overflow:hidden }
.me__avatarimg, .rail__avatarimg{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block }
.rail__avatar{ overflow:hidden; padding:0 }
.journal__e{ display:grid; gap:.35rem }
.journal__top{ display:flex; align-items:center; gap:.6rem }
.journal__t{ margin:0; color:var(--ink); white-space:pre-wrap }
.journal__acts{ margin-top:.2rem }
.me__pic{ margin-top:.2rem }

/* ---------- Suche (2026-09-08) ----------
   Der Knopf in der Pille ersetzt die Attrappe; die Palette ist ein <dialog>
   in .pick-Form, oben im Fenster, am Telefon ganzseitig. */
.search{ font:inherit; cursor:pointer; appearance:none; text-align:left; display:inline-flex; align-items:center; gap:.5rem }
.search:hover{ border-color:var(--seal); color:var(--seal) }
.search__g{ opacity:.8 }
.palette{ width:min(92vw, 640px); max-width:640px; margin:7vh auto 0; padding:0 }
.palette .pick__box{ padding:.5rem .55rem .7rem }
.palette__head{ display:flex; align-items:center; gap:.6rem; padding:.15rem .5rem; border-bottom:1px solid var(--line) }
.palette__g{ color:var(--muted); font-size:1.1rem }
.palette__in{ flex:1; font:inherit; font-size:1.05rem; background:none; border:0; color:var(--ink); padding:.7rem .2rem; outline:none; min-width:0 }
.palette__in::-webkit-search-cancel-button{ appearance:none }
.palette__list{ max-height:min(58vh, 28rem); overflow:auto; display:grid; gap:.15rem; padding:.35rem .15rem 0 }
.palette__group{ display:grid; gap:.05rem; padding:.25rem 0 }
.palette__group .eyebrow{ margin:.2rem .55rem .25rem; font-size:.68rem }
.palette__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.55rem .6rem; border-radius:10px; color:var(--ink); text-decoration:none }
.palette__row:hover, .palette__row.is-hi{ background:color-mix(in srgb, var(--seal) 12%, transparent) }
.palette__row:focus-visible{ outline:2px solid var(--seal); outline-offset:-2px }
.palette__t{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.palette__k{ font-family:var(--font-mono); font-size:.68rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; align-self:center; white-space:nowrap }
.palette__l{ grid-column:1 / -1; color:var(--muted); font-size:var(--step--1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.palette__foot{ margin:.5rem .6rem 0; font-family:var(--font-mono); font-size:.68rem; color:var(--muted) }
.palette__none{ padding:.9rem .6rem; color:var(--muted) }
@media (max-width:759.98px){
  .palette{ width:100vw; max-width:100vw; margin:0; height:100dvh; max-height:100dvh; border-radius:0; border:0 }
  .palette__list{ max-height:calc(100dvh - 8.5rem) }
  .palette__row{ padding:.75rem .6rem }
}
/* Tagesköpfe in Journal und Records (2026-09-09). */
.me__day{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding:.9rem 0 .25rem; border-top:0; font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--seal) }
.me__day .me__n{ letter-spacing:0; text-transform:none }
.me__day + .me__row{ border-top:0 }

/* Zustände der Karten (2026-09-09): development bernstein, idea grau; finished bleibt note--ok. */
.note--dev{ color:#C9A227 } .note--dev .led{ background:#C9A227; box-shadow:0 0 6px rgba(201,162,39,.55) }
.note--idea{ color:var(--muted) } .note--idea .led{ background:var(--muted); box-shadow:none }

/* Schlange (/review), eigene Module (/me/modules), Punkte (2026-09-09). */
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem }
button.chip{ cursor:pointer; background:none; font:inherit; font-size:inherit }
.chip--on{ background:var(--seal); color:#071316; border-color:var(--seal) }
.rev{ display:grid; grid-template-columns:8rem minmax(0,1fr) 12rem 6rem 4rem; gap:.8rem; align-items:start;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card-bg); box-shadow:var(--shadow-1);
  padding:var(--pad-card); margin:0 0 .8rem }   /* 2026-09-09: jede Zeile ein Kasten, wie die Karten der Seite */
.rev .btn--quiet{ justify-self:end }
/* 2026-09-09: in den Kästen dieselbe Schrift wie im Rest der Seite (Calibri/Carlito), keine Mono-Spalten. */
.rev, .rev .fine, .rev__id{ font-family:var(--font-sans) }
.rev__id{ color:var(--muted) } .rev__id > span:first-child{ color:var(--seal); font-weight:600 }
/* Abgeschlossene Kästen (2026-09-09): grüne Marke «done», leicht zurückgenommen. */
.rev--done{ opacity:.78 } .rev--done:hover{ opacity:1 }
.rev__done{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase }
.rev__t{ font-weight:600; margin:0 } .rev__t a{ color:inherit }
.rev__pre{ white-space:pre-wrap; font:inherit; line-height:1.55; margin:.4rem 0 1rem }
.rev__tbl{ width:100%; border-collapse:collapse; font-size:.9rem }
.rev__tbl td,.rev__tbl th{ padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left }
.rev__tbl th{ color:var(--muted); font-weight:400 }
.rev__form{ display:grid; gap:.6rem; max-width:44rem; margin:.6rem 0 }
.rev__form select,.rev__form textarea,.rev__form input{ font:inherit; font-size:.95rem; padding:.55em .7em; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; max-width:100% }
.rev__form textarea{ min-height:6rem }
.mods{ display:grid; gap:1rem }
.mods .rev__form{ max-width:none }
.ptbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
@media (max-width:760px){ .rev{ grid-template-columns:1fr; gap:.3rem; padding:.9rem 1rem } .rev .btn--quiet{ justify-self:start } }

/* Modulseite in Gebieten (2026-09-09): Karte + Kontaktzeile als ein Element der Kartenwand. */
.mitem{ display:flex; flex-direction:column; gap:.45rem; min-width:0 }
.mitem .mcard{ flex:1 }
.mcard__contact{ margin:0 .2rem; font-family:var(--font-mono); font-size:.74rem; color:var(--muted); line-height:1.7; overflow-wrap:anywhere }
.mcard__contact a{ color:var(--seal) }
.area__intro{ margin-bottom:.9rem } .area__intro .work__sub{ margin-bottom:.3rem }

/* Aufklappmenüs (2026-09-09): der Browser zeichnete die offene Liste in seinen Farben. Wo der
   Browser «customizable select» kann (Chromium seit 135, auch Android), gehört die Liste dem Haus:
   Kartenfarbe, Linie, Siegel für die Auswahl, Mono wo das Feld Mono ist. Sonst bleibt es nativ. */
@supports (appearance: base-select) {
  select, ::picker(select){ appearance:base-select }
  select{ border:1px solid var(--line); border-radius:8px; background:var(--card-bg, transparent); color:inherit; padding:.45em .7em }
  select::picker-icon{ color:var(--muted); content:"▾"; margin-left:.5em }
  ::picker(select){
    background:var(--card-bg); color:var(--ink); border:1px solid var(--line); border-radius:10px;
    padding:.3rem; box-shadow:var(--shadow-2, 0 12px 30px rgba(0,0,0,.35)); margin-top:.25rem; font:inherit;
  }
  select option{ padding:.5rem .8rem; border-radius:6px; color:var(--ink); background:transparent; min-height:2.2rem }
  select option:hover, select option:focus-visible{ background:color-mix(in srgb, var(--seal) 16%, transparent); outline:none }
  select option:checked{ color:var(--seal); font-weight:600 }
  select option::checkmark{ content:"" }
}

/* Leiste (2026-09-09): lange Projektnamen enden in einer Ellipse, der Zähler bleibt stehen. */
.nav__projects .navitem{ display:flex; align-items:center; min-width:0 }
.nav__projects .navitem__t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nav__projects .navitem .cnt{ flex:none; margin-left:auto }
/* Eigene Module: das Adressfeld für Mitwirkende in voller Breite. */
.mods .actions input[type=email]{ flex:1 1 14rem; min-width:12rem; font:inherit; font-size:.95rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit }

/* Telefon (2026-09-09): Fingerziele nach Material mindestens 44 px; Kartenfusszeile darf umbrechen. */
@media (max-width:760px){
  .iconbtn{ width:2.75rem; height:2.75rem }
  .btn{ min-height:2.75rem; padding:.6rem 1.1rem; display:inline-flex; align-items:center; justify-content:center }
  a.chip, button.chip{ padding:.5rem .85rem; min-height:2.4rem; display:inline-flex; align-items:center }
  .langpick__letter{ width:2.4rem; height:2.4rem; font-size:.9rem }
  .ov__more, .top__more{ width:2.75rem; height:2.75rem }
  input[type=checkbox]{ width:1.5rem; height:1.5rem }
  .mcard__m{ flex-wrap:wrap }
  .mcard__m > span:first-child{ white-space:normal; overflow:visible }
}

/* Helles Thema (2026-09-10): Bernstein und aktive Chips mit ausreichendem Kontrast. */
:root[data-theme="light"] .note--dev{ color:#7E5A00 }
:root[data-theme="light"] .note--dev .led{ background:#7E5A00; box-shadow:none }
:root[data-theme="light"] .chip--on{ color:#fff }

/* Eigene Dienste (2026-09-10): Erklärung als Blase, geheime Adresse, Schnappschuss des Teams. */
.svc__bubble{ margin:1rem 0 1.2rem; border-left:3px solid var(--seal) }
.svc__bubble ul{ margin:.4rem 0 .8rem; padding-left:1.1rem }
.svc__bubble li{ margin:.25rem 0 }
.pick.is-hook .pick__box > :not(.svc__hookview){ display:none }
.svc__hookview .h3{ margin:.2rem 0 .6rem }
.svc__hookview .watchline{ white-space:pre-wrap; overflow-wrap:anywhere; margin:.8rem 0 }
.svc__hookview .actions{ margin-top:.9rem }
.svc__dir{ display:inline-flex; flex-wrap:wrap; max-width:100%; margin:.1rem 0 }
.svc__dir .bar__b{ font:inherit; font-size:var(--step--1); cursor:pointer; background:none; color:var(--ink-2); border:0; border-radius:0; padding:.45rem .8rem }
.svc__dir .bar__b + .bar__b{ border-left:1px solid var(--line) }
.svc__dir .bar__b.is-on{ background:color-mix(in srgb, var(--seal) 16%, transparent); color:var(--seal) }
.svc__dir .bar__b:focus-visible{ outline:2px solid var(--seal); outline-offset:-2px }
#svc-kind-field[hidden]{ display:none }
.svc__snap{ margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--line) }
.svc__snap .tbl{ margin-top:.6rem }
.svc__legacy{ margin:0 0 1.2rem }
.svc__legacy ul{ margin:.5rem 0 .2rem; padding-left:1.2rem }
.svc__legacy .actions{ margin-top:.8rem }
.led--wait{ background:transparent; border:1px solid var(--line-ui) }
.led--off{ background:var(--muted); opacity:.45 }

/* Gebiete als Reiter (2026-09-10): das Feld darf die volle Breite haben, der Zähler sitzt im Reiter. */
.tabpanel--wide{ max-width:none }
.tabs--areas .tabs__b{ display:inline-flex; align-items:center; gap:.45rem }
.tabs__n{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.05rem .45rem }
.tabs__b.is-on .tabs__n{ color:var(--seal); border-color:color-mix(in srgb, var(--seal) 40%, var(--line)) }
@media (max-width:760px){ .tabs--areas{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:.2rem } .tabs--areas .tabs__b{ flex:none; min-height:2.6rem } }

/* Edit-Knopf auf der Karte (2026-09-10): liegt über der Kartenfläche, die Karte bleibt ein Link. */
.mitem{ position:relative }
.mcard__editbtn{ position:absolute; top:.8rem; right:.8rem; z-index:2; padding:.3rem .8rem; font-size:.78rem; min-height:0; line-height:1.4 }
.mitem--editable .mcard__head{ padding-right:4.6rem }
@media (max-width:760px){ .mcard__editbtn{ min-height:2.2rem; padding:.4rem .9rem } }


/* ---------- Leiste aufgeräumt (2026-09-10) ----------
   Vier Dinge machten sie unruhig: zwei Icon-Sprachen nebeneinander (Textzeichen
   ▤ ▦ ◷ ◔ ✓ ↧ neben Strich-Icons mit 1.4er Kontur), Zähler, die frei an der
   Aussenkante hingen, ein «+» im Kasten, das schwerer wog als alles andere,
   und der Systemrollbalken, den Windows mit Pfeilen in die gerundete Leiste
   zeichnete. Die Zeichen sind im Markup ersetzt, der Rest steht hier. */

/* Zähler: Ziffern gleicher Breite, damit 3 und 57 dieselbe Spalte halten,
   und leiser als die Beschriftung, zu der sie gehören. */
.rail__count, .nav__projects .cnt{
  font-variant-numeric:tabular-nums; font-size:.72rem;
  color:var(--muted); opacity:.7; padding-left:.75rem; padding-right:.1rem;
}
.rail__item:hover .rail__count,
.rail__item.is-active .rail__count{ opacity:1; color:var(--ink-2) }

/* «none yet» stand an der Aussenkante statt an der Textkante der Einträge.
   2.6rem = .55rem Polster + 1.4rem Zeichenfeld + .65rem Lücke. */
.rail__none{ padding-left:2.6rem; opacity:.8 }

/* Zeichen und Icons auf ein Gewicht: das Feld ist überall 1.4rem breit, die
   Kontur überall 1.4, und im Ruhezustand tragen sie die Textfarbe statt des
   vollen Sealtons. Erst der gewählte Eintrag holt die Farbe. */
.rail__glyph{ color:var(--ink-2); opacity:.85 }
.rail__glyph .ico{ width:1.15rem; height:1.15rem }
.rail__item:hover .rail__glyph{ color:var(--seal); opacity:1 }
.rail__item.is-active .rail__glyph{ color:var(--seal); opacity:1 }

/* «+» und Winkel: gleich gross, ohne Kasten, gleiche Rundung wie die Einträge. */
.rail__plus, .rail__chev{
  width:1.7rem; height:1.7rem; border-radius:8px; border:0; color:var(--muted);
  transition:background-color .12s, color .12s;
}
.rail__plus{ font-size:1.05rem; background:none }
.rail__plus:hover, .rail__chev:hover{
  border:0; color:var(--seal); background:color-mix(in srgb, var(--seal) 12%, transparent);
}

/* Gruppentitel: sie sollen die Liste gliedern, nicht mit ihr konkurrieren. */
.rail__group{ letter-spacing:.12em; opacity:.7; padding:1rem .55rem .35rem }

/* Der Rollbalken verschwindet ganz (2026-09-10, zweiter Durchgang).
   Getönt half nicht: ein Balken in einem Kasten mit 26 px Radius läuft als
   Gerade über beide Rundungen und setzt oben und unten seine Pfeile an die
   Ecke. Er kann mit dem Rahmen nicht in Einklang kommen, also gehört er nicht
   hinein. Gerollt wird weiter mit Rad, Tastatur und Wischgeste; die Leiste
   trägt selten mehr als ein Fenster hoch ist. */
.rail{ scrollbar-width:none; -ms-overflow-style:none }
.rail::-webkit-scrollbar{ width:0; height:0; display:none }


/* Rollhinweis der Leiste (2026-09-10, dritter Durchgang, siehe rail-projects.js).
   Der Griff sagt, wo man steht, und erscheint nur während des Rollens. Im
   Ruhezustand steht an der Kante nichts. Ein Verlauf an der Unterkante war der
   Versuch davor und hing am Polster statt am Kartenrand. */
.rail__scroll{
  position:sticky; top:0; height:0; z-index:3; pointer-events:none;
  margin-bottom:-.2rem; flex:0 0 0;
}
.rail__scroll > i{
  position:absolute; right:4px; top:0; width:3px; border-radius:999px;
  background:color-mix(in srgb, var(--seal) 55%, transparent);
  opacity:0; transition:opacity .3s ease;
}
.rail.has-scroll.is-scrolling .rail__scroll > i{ opacity:1; transition:opacity .1s ease }

/* Die Zähler halten Abstand zur Kante, damit der Griff sie nicht berührt. */
.rail__count, .nav__projects .cnt{ padding-right:.5rem }

@media (prefers-reduced-motion:reduce){
  .rail__scroll > i{ transition:none }
}

/* Der Erklärtext der Dienste liegt hinter einem Knopf (2026-09-10).
   Als Block stand er dauerhaft auf der halben Seite, auch nach dem zehnten
   Lesen. Der Knopf sitzt neben «Add a service», das Fach klappt darunter auf. */
.iconbtn--info{ width:2.1rem; height:2.1rem; flex:none; color:var(--muted) }
.iconbtn--info:hover{ color:var(--seal); border-color:var(--seal) }
.iconbtn--info.is-on{
  color:var(--seal); border-color:var(--seal);
  background:color-mix(in srgb, var(--seal) 12%, transparent);
}
.iconbtn--info .ico{ width:1.15rem; height:1.15rem }
/* Die Erklärung als grosses Fenster in der Mitte (2026-09-10): breiter als der Dialog, scrollt in sich. */
.svc__infodlg{ max-width:min(94vw, 46rem) }
.svc__infodlg .pick__box{ max-height:84vh; overflow:auto; overscroll-behavior:contain }
.svc__pop__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; position:sticky; top:0; z-index:1; background:var(--card-bg); padding:0 0 .5rem; margin:0 0 .2rem; border-bottom:1px solid var(--line) }
.svc__pop__head .h3{ margin:0 }
.svc__pop__x{ width:2rem; height:2rem; flex:none; font-size:1.25rem; line-height:1; color:var(--muted) }
.svc__pop__x:hover{ color:var(--seal); border-color:var(--seal) }
.svc__infodlg .svc__bubble{ border:0; padding:0; margin:.6rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-2) }
.svc__infodlg .svc__bubble .measure{ max-width:none }
.svc__infodlg .svc__bubble .hint__t{ margin:1.1rem 0 .4rem; font-size:1.02rem; color:var(--ink) }
.svc__infodlg .svc__bubble li{ margin:.4rem 0 }
.svc__infodlg .actions{ margin-top:1.2rem }
.svc__info .hint{ margin:0 }
.svc__info ol.measure{ margin:.35rem 0 .9rem; padding-left:1.3rem }
.svc__info ol.measure li{ margin-bottom:.35rem }

/* Konto in der Kopfleiste (2026-09-10).
   Es sass im Fuss der Leiste, dreizeilig, und war dort nur zu sehen, wenn man
   ganz nach unten rollte. In der Pille steht es einzeilig rechts, unmittelbar
   vor dem Themenumschalter, der seinen Platz behält. Die Zeile «owner · Mail»
   bleibt im Markup, damit das Skript sie weiter schreibt, und wird hier
   ausgeblendet: bei 62 px Höhe ist für zwei Zeilen kein Raum. Sie steht
   weiterhin auf /me und im aria-label des Verweises.
   Die Suche verliert ihr margin-left:auto und rückt damit neben den Pfad. */
.search{ margin-left:0 }
.top__acct{ margin-left:auto; display:flex; align-items:center; gap:.5rem; min-width:0 }
.top__acct .rail__acct{
  padding:.25rem .55rem .25rem .3rem; border-radius:999px; gap:.5rem; max-width:15rem;
}
.top__acct .rail__acctsub{ display:none }
.top__acct .rail__acctname{ font-size:.88rem; color:var(--ink-2) }
.top__acct .rail__acct.is-in .rail__acctname{ color:var(--ink) }
.top__acct .rail__auth{ padding:0; gap:.4rem; flex-wrap:nowrap }
.top__acct .rail__authbtn{ font-size:.76rem; padding:.3rem .75rem }

@media (max-width:900px){
  .top__acct .rail__acctname{ display:none }
  .top__acct .rail__acct{ padding:.25rem }
}
@media (max-width:759.98px){
  .top__acct .rail__authbtn:nth-child(2){ display:none }
}

/* Abschluss der Leiste (2026-09-10).
   Seit das Konto in der Kopfleiste sitzt, hörte die Leiste nach «Export trail»
   einfach auf. Hier schliesst sie, mit derselben Haarlinie wie unter der Marke,
   und trägt zugleich die Verweise, die es im Hub sonst nirgends gab: eine
   Fusszeile im Seitenkörper existiert auf keiner der 17 Seiten. */
.rail__end{
  margin-top:auto; padding:.9rem .55rem .2rem; position:relative;
  display:flex; flex-wrap:wrap; gap:.15rem .7rem; align-items:baseline;
  font-family:var(--font-mono); font-size:.7rem; color:var(--muted);
}
.rail__end::before{
  content:""; position:absolute; top:0; left:0; right:.25rem; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--seal) 26%, transparent) 0,
    color-mix(in srgb, var(--seal) 26%, transparent) 72%, transparent);
}
.rail__end a{ color:var(--muted); text-decoration:none }
.rail__end a:hover{ color:var(--seal) }
.rail__lic{ opacity:.7 }
@media (max-width:759.98px){ .rail__end{ display:none } }

/* /me mit Kopfband und Reitern (2026-09-10).
   Vorher zwölf gleichrangige Karten in einer Spalte. Jetzt trägt ein Kopfband
   die Identität, drei Reiter teilen Profil, Arbeit und Konto, und was nicht
   rückgängig zu machen ist, steht abgesetzt in der Gefahrenzone. */
.idband{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin:1.2rem 0 1.4rem }
.idband__av{
  width:4rem; height:4rem; border-radius:999px; flex:none; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--seal); color:var(--seal); background:color-mix(in srgb,var(--seal) 12%,transparent);
  font-family:var(--font-mono); font-size:1.5rem;
}
.idband__n{ font-size:var(--step-2); font-weight:600; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.idband__m{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); margin:.15rem 0 0 }
.idband__act{ margin-left:auto; display:flex; gap:.5rem; align-items:center }
.me__pane[hidden]{ display:none }
.me__pane > .block:first-child{ padding-top:.6rem }
.me__bio{ white-space:pre-wrap }

.sumrows{ display:grid; gap:0; margin:.4rem 0 .2rem }
.sumrow{ display:flex; align-items:center; gap:1rem; padding:.8rem .1rem; border-bottom:1px solid var(--line); color:inherit; text-decoration:none }
.sumrow:last-child{ border-bottom:0 }
.sumrow:hover .sumrow__t{ color:var(--seal) }
.sumrow__t{ font-size:.98rem }
.sumrow__s{ color:var(--muted); font-size:var(--step--1) }
.sumrow__n{ margin-left:auto; font-family:var(--font-mono); font-size:.8rem; color:var(--muted) }
.sumrow__go{ font-family:var(--font-mono); font-size:.8rem; color:var(--seal) }

.danger{
  border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line)); border-radius:var(--radius);
  background:color-mix(in srgb,var(--warn) 9%,transparent); padding:var(--pad-card); margin:1.6rem 0 2rem;
}
.danger .h3{ color:var(--warn) }
.danger__row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.75rem 0; border-bottom:1px solid color-mix(in srgb,var(--warn) 22%,transparent) }
.danger__row:last-child{ border-bottom:0 }
.danger__row p{ margin:0; font-size:.9rem; color:var(--ink-2); flex:1 1 22rem }

/* ---------- Profil als Portfolio (2026-09-10) ----------
   Für /p/<id> und /me dieselbe Form. Kopf mit Bild, Name und Einzeiler,
   ein Zahlenband mit dem, was sich belegen lässt, die Biographie als Prosa,
   die Module als Schaufenster, das Journal als Zeitleiste. Kästen nur für
   die Ausstellungsstücke. Auf /me kommt links die Person mit Bearbeiten,
   rechts die Arbeit als geführte Liste. */
.hero{ display:grid; grid-template-columns:auto 1fr auto; gap:1.8rem; align-items:center; padding:1.2rem 0 2rem }
.hero__av{
  width:7.5rem; height:7.5rem; border-radius:999px; overflow:hidden; display:grid; place-items:center;
  border:1px solid var(--seal); color:var(--seal); background:color-mix(in srgb,var(--seal) 12%,transparent);
  font-family:var(--font-mono); font-size:2.6rem; box-shadow:var(--shadow-1);
}
.hero__av img{ width:100%; height:100%; object-fit:cover; display:block }
.hero__name{ font-size:var(--step-3); font-weight:600; letter-spacing:-.03em; line-height:1.02; margin:0 }
/* Titel der öffentlichen Profilseite in Glegoo (Wunsch des Eigentümers, 2026-09-10,
   nach Kavivanar): Serifenschrift, Schnitt 400, kein künstliches Fett. Die Dateien liegen unter
   assets/fonts/ (SIL Open Font License, Text daneben) und werden nur geladen, wo eine
   Regel die Familie nennt; der übrige Hub bleibt beim Stapel aus --font-sans. */
@font-face{ font-family:"Glegoo"; font-style:normal; font-weight:400; font-display:block;
  src:url(/assets/fonts/glegoo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Glegoo"; font-style:normal; font-weight:400; font-display:block;
  src:url(/assets/fonts/glegoo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
:root{ --font-head:"Glegoo", var(--font-sans) }
/* Kein Schriftwechsel beim Laden (Eigentümer 2026-09-11): die lateinischen Dateien werden
   in jedem Seitenkopf vorgeladen, und font-display:block wartet auf sie, statt erst den
   Rückfall zu zeichnen und dann zu tauschen. */
/* Monospace mitgeliefert (Wunsch des Eigentümers, 2026-09-11): Inconsolata, frei (OFL),
   nach Consolas entworfen, eine variable Datei je Bereich für alle Schnitte 200 bis 900.
   Damit sieht die Wortmarke auf jedem Gerät so aus wie auf seinem Windows-Rechner. */
@font-face{ font-family:"Inconsolata"; font-style:normal; font-weight:200 900; font-display:block;
  src:url(/assets/fonts/inconsolata-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Inconsolata"; font-style:normal; font-weight:200 900; font-display:block;
  src:url(/assets/fonts/inconsolata-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
.solo .hero__name, .solo .psect__h h2{ font-family:var(--font-head); font-weight:400; font-synthesis:none; letter-spacing:0 }
.solo .hero__name{ line-height:1.08 }
.hero__line{ font-size:var(--step-1); color:var(--ink-2); margin:.45rem 0 .7rem; max-width:44ch; line-height:1.4 }
.hero__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted) }
.hero__meta .tag{ margin:0 }
.hero__act{ display:flex; flex-direction:column; gap:.5rem; align-items:stretch }
.facts2{ display:flex; flex-wrap:wrap; gap:0 2.4rem; padding:1rem 0 1.4rem; position:relative; margin-bottom:2rem }
.facts2::before,.facts2::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--seal) 26%,transparent), transparent 82%);
}
.facts2::before{ top:0 } .facts2::after{ bottom:0 }
.fact2{ display:grid; gap:.1rem }
.fact2 b{ font-size:var(--step-1); font-weight:600; letter-spacing:-.015em }
.fact2 span{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
/* Dateien im Band (2026-09-10): Beschriftung oben, Art und Grösse unten, der Eintrag lädt die Datei. */
.fact2--file{ text-decoration:none; color:inherit }
.fact2--file b{ max-width:18ch; line-height:1.15 }
.fact2--file:hover b, .fact2--file:focus-visible b{ color:var(--seal) }
.inline-edit{ font:inherit; font-size:.95rem; padding:.15rem .45rem; border:1px solid var(--line-ui); border-radius:.4rem; background:transparent; color:var(--ink); width:min(100%, 22rem) }
.bio{ max-width:62ch; margin:0 0 2.6rem; font-size:var(--step-0); line-height:1.65; color:var(--ink-2); white-space:pre-wrap }
.bio--none{ color:var(--muted); font-style:italic }
.psect{ margin:0 0 2.8rem }
.psect__h{ display:flex; align-items:baseline; gap:.7rem; margin:0 0 .25rem }
.psect__h h2{ font-size:var(--step-2); font-weight:600; letter-spacing:-.02em; margin:0 }
.psect__h > span, .psect__h > a:not(.btn){ margin-left:auto; font-family:var(--font-mono); font-size:.78rem; color:var(--muted); text-decoration:none }
.psect__h > a:not(.btn){ color:var(--seal) } .psect__h > a.btn{ margin-left:auto }
.psect__s{ color:var(--muted); font-size:.92rem; margin:0 0 1.1rem }
.show{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)) }
.piece{ padding:1.3rem 1.3rem 1.1rem; min-height:14rem; display:flex; flex-direction:column; color:inherit; text-decoration:none }
.piece .chip{ align-self:flex-start; margin-bottom:.9rem }
.piece__t{ font-size:var(--step-1); font-weight:600; letter-spacing:-.015em; margin:0 0 .35rem; line-height:1.2 }
.piece__l{ color:var(--ink-2); font-size:.92rem; margin:0 0 .9rem; flex:1 }
.piece__f{ font-family:var(--font-mono); font-size:.74rem; color:var(--muted); display:flex; justify-content:space-between; gap:.6rem; padding-top:.7rem; position:relative }
.piece__f::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, color-mix(in srgb,var(--seal) 26%,transparent), transparent 82%) }
.piece__f .st{ color:var(--seal) }
.tl{ display:grid }
.tl__d{ display:grid; grid-template-columns:6rem 1fr; gap:1.2rem; padding:.8rem 0; border-bottom:1px solid var(--line) }
.tl__d:last-child{ border-bottom:0 }
.tl__k{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); padding-top:.15rem }
.tl__t{ margin:0; color:var(--ink-2); max-width:62ch; white-space:pre-wrap }
.tl__acts{ grid-column:2; display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.2rem }
.quiet{ color:var(--muted); font-size:.92rem; margin:0 }

/* /me: zweispaltig, links die Person, rechts die Arbeit. */
.pf{ display:grid; grid-template-columns:19rem 1fr; gap:3rem; align-items:start; padding:1.2rem 0 2rem }
.pf__id{ position:sticky; top:5.5rem }
.pf__av{
  width:9rem; height:9rem; border-radius:999px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--seal); color:var(--seal); background:color-mix(in srgb,var(--seal) 12%,transparent);
  font-family:var(--font-mono); font-size:3rem; margin-bottom:1rem;
}
.pf__av img{ width:100%; height:100%; object-fit:cover; display:block }
.pf__name{ font-size:var(--step-2); font-weight:600; letter-spacing:-.025em; margin:0; line-height:1.1 }
.pf__handle{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted); margin:.15rem 0 .8rem }
.pf__bio{ margin:0 0 1rem; color:var(--ink-2); max-width:34ch; white-space:pre-wrap; font-size:.95rem }
.pf__facts{ display:grid; gap:.4rem; margin:0 0 1.1rem; font-size:.9rem; color:var(--ink-2) }
.pf__fact{ display:flex; gap:.55rem; align-items:baseline }
.pf__fact .ico{ width:1rem; height:1rem; flex:none; color:var(--muted); align-self:center }
.pf__fact a{ color:inherit } .pf__fact a:hover{ color:var(--seal) }
.pf__chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 1.2rem }
.pf__edit{ width:100%; display:inline-flex; justify-content:center }
.pf__quiet{ display:flex; flex-direction:column; gap:.35rem; margin-top:1rem; font-family:var(--font-mono); font-size:var(--step--1) }
.pf__quiet a{ color:var(--muted); text-decoration:none } .pf__quiet a:hover{ color:var(--seal) }
.pf__main{ min-width:0 }
.pf__lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink-2); max-width:60ch; margin:0 0 2rem }
.rowlist{ display:grid }
.row2{ display:grid; grid-template-columns:1fr auto; gap:.2rem 1.5rem; padding:1rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit }
.row2:last-child{ border-bottom:0 }
.row2:hover .row2__t{ color:var(--seal) }
.row2__t{ font-size:1.05rem; font-weight:500; grid-column:1 }
.row2__s{ color:var(--muted); font-size:.9rem; grid-column:1 }
.row2__m{ grid-column:2; grid-row:1/3; align-self:center; text-align:right; font-family:var(--font-mono); font-size:.78rem; color:var(--muted) }
.row2__m .ok{ color:var(--verify) }
.pf__edit-form{ margin-top:1rem }
.pf__edit-form[hidden]{ display:none }
.acct{ margin-top:3rem; padding-top:2rem; position:relative }
.acct::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, color-mix(in srgb,var(--seal) 26%,transparent), transparent 82%) }
.acct .block{ padding-top:1.2rem }
@media (max-width:900px){
  .pf{ grid-template-columns:1fr; gap:1.6rem } .pf__id{ position:static } .pf__av{ width:5rem; height:5rem; font-size:1.8rem }
  .hero{ grid-template-columns:auto 1fr } .hero__act{ grid-column:1/-1; flex-direction:row } .hero__av{ width:4.6rem; height:4.6rem; font-size:1.6rem }
}
.psect > .tl__t{ margin-bottom:.85rem; max-width:70ch }
.pf__main > .tabs{ margin-bottom:1.6rem }

/* ---------- Alleinstehende Profilseite (2026-09-10) ----------
   /contributors/<name> und /p/<id>: nur das Portfolio, ohne Leiste und ohne
   Kopfleiste. Eine schmale Zeile mit der Marke und dem Themenumschalter oben,
   eine Zeile mit den Verweisen unten, dazwischen die Seite in Lesebreite. */
.solo{ min-height:100dvh; display:flex; flex-direction:column }
.solo__top{ display:flex; align-items:center; gap:1rem; padding:1.1rem var(--gutter) .4rem; max-width:72rem; width:100%; margin:0 auto }
.solo__top .brand{ font-size:.92rem } .solo__top .brand__logo{ width:1.8rem; height:1.8rem }
.solo__top .iconbtn{ margin-left:auto }
.solo__main{ flex:1; width:100%; max-width:72rem; margin:0 auto; padding:0 var(--gutter) 3rem }
.solo__main .block{ padding-top:.4rem }
.solo__foot{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; padding:1.2rem var(--gutter) 1.6rem; max-width:72rem; width:100%; margin:0 auto;
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted); position:relative }
.solo__foot::before{ content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--seal) 26%,transparent), transparent 82%) }
.solo__foot a{ color:var(--muted); text-decoration:none } .solo__foot a:hover{ color:var(--seal) }
.hero__contact{ font-family:var(--font-mono); font-size:var(--step--1) }

/* docs.entrosana.app (2026-09-10): Prosa aus Markdown, gleiche Hülle wie der Hub. */
.doc{ max-width:70ch; color:var(--ink-2); line-height:1.6 }
.doc h2{ font-size:var(--step-1); color:var(--ink); letter-spacing:-.015em; margin:2rem 0 .6rem }
.doc h3{ font-size:1.05rem; color:var(--ink); margin:1.5rem 0 .4rem }
.doc p{ margin:0 0 .95rem }
.doc ul, .doc ol{ margin:0 0 1.1rem; padding-left:1.35rem }
.doc li{ margin:.35rem 0 }
.doc li ul{ margin:.3rem 0 0 }
.doc b{ color:var(--ink) }
.doc a{ color:var(--seal) }
.doc code{ font-family:var(--font-mono); font-size:.86em; color:var(--seal); background:var(--field-bg); padding:.05em .35em; border-radius:3px; overflow-wrap:anywhere }
.doc pre{ font-family:var(--font-mono); font-size:.8rem; line-height:1.5; color:var(--ink); background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .85rem; margin:.4rem 0 1.15rem; overflow-x:auto }
.doc pre code{ background:none; padding:0; color:inherit; font-size:inherit }
.doc__scroll{ overflow-x:auto; margin:.4rem 0 1.2rem }
.doc table{ width:100%; min-width:32rem; border-collapse:collapse; font-size:.92rem }
.doc th, .doc td{ text-align:left; padding:.5em .65em; border-bottom:1px solid var(--line); vertical-align:top }
.doc th{ color:var(--muted); font-weight:500; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase }
.doc td:first-child{ white-space:nowrap }
.doc td:first-child code{ white-space:normal }
.doc blockquote{ margin:0 0 1rem; padding:.6rem 1rem; border-left:2px solid var(--seal) }
.doc hr{ border:0; border-top:1px solid var(--line); margin:1.6rem 0 }
.doc__toc{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem; margin:0 0 1.4rem; font-size:.9rem }
.doc__toc .eyebrow{ margin:0 }
.doc__toc a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line) }
.doc__toc a:hover{ color:var(--seal); border-color:var(--seal) }
@media (max-width:759.98px){ .doc td:first-child{ white-space:normal } }
.app--docs .rail__proj, .app--docs .nav__projects{ display:none }   /* die Docs haben keine Projekte; rail-projects.js schreibt sonst «none yet» */
#docs .work__sub code{ font-family:var(--font-mono); font-size:.86em; color:var(--seal) }


/* Überschriften im ganzen Hub in Glegoo (Wunsch des Eigentümers, 2026-09-10):
   Seitentitel, Abschnittstitel, Kartentitel, Dialogtitel, Doku. Schnitt 400,
   kein künstliches Fett, keine Unterschneidung. Zeilentitel in Listen, Eyebrows
   und Zahlen im Band bleiben in der Grundschrift. Steht am Ende, damit die Regel
   über den älteren Gewichtsangaben liegt. */
h1, h2, h3, h4, .h3, .work__h, .work__h2, .view__title, .pf__name, .hero__name, .psect__h h2, .modal__title, .dlg__title,
.mcard__t, .piece__t, .step--empty .step__t, .doc h1, .doc h2, .doc h3{
  font-family:var(--font-head); font-weight:400; font-synthesis:none; letter-spacing:0 }

/* Klare Knöpfe statt leiser Zeilen auf /me (Wunsch des Eigentümers, 2026-09-11):
   kleine Rahmenknöpfe in Zeilen und Abschnittsköpfen, ein Bearbeitungsfeld je Zeile
   mit Titel, Sichtbarkeit und Löschen an einem Ort, die Wege links als Knopfstapel. */
.btn--sm{ padding:.28rem .7rem; font-size:.8rem }
.pf__btns{ display:grid; gap:.5rem; margin-top:1rem }
.pf__btns .btn{ width:100%; display:inline-flex; justify-content:center }
.row2__m .btn{ font-family:var(--font-sans); margin-left:.6rem; vertical-align:middle }
.edit-panel{ display:grid; gap:.8rem; padding:1rem 1.1rem; margin:.3rem 0 1rem; border:1px solid var(--line-ui); border-radius:.7rem; background:color-mix(in srgb, var(--ink) 3%, transparent) }
.edit-panel[hidden]{ display:none }
.edit-panel__t{ margin:0; font-family:var(--font-mono); font-size:.8rem; color:var(--muted) }
.edit-panel .actions .btn--danger{ margin-left:auto }
.tl__acts .btn--sm{ margin-top:.2rem }
/* Auch die grossen Werte im Zahlenband der Profilseite, Zahlen wie Dateititel, stehen in
   Glegoo (Eigentümer 2026-09-11: «the letter is still the old one»). */
.fact2 b{ font-family:var(--font-head); font-weight:400; letter-spacing:0 }

/* ---------- Telefon: Fortsetzen-Karte und Kopfpille (2026-09-11) ----------
   Gemessen auf entrosana.app bei echten Telefonbreiten, nicht geschätzt:
   · Die Fortsetzen-Karte ist ein Raster auto 1fr auto. Auf dem Schreibtisch richtig,
     am Telefon bekommt die Textspalte, was nach Ring und Knopf übrig bleibt: bei 360 px
     die Spalten 49,6 | 100 | 105,2 in einer 328-px-Karte. Der Titel bricht in vier
     Zeilen, der Untertitel in acht; bei 320 px schneidet der Rand «Open project» ab.
   · Die Kopfpille bricht nicht um (flex-wrap:nowrap). Bei 320 px bleiben dem
     Kontoverweis 8 px (min-width:0, flex 0 1 auto): das Fragezeichen des Avatars steht
     dann unter «Sign in». Das sieht aus wie eine Überlappung und ist ein zerquetschter
     Verweis.
   Unter 760 px, der Telefongrenze dieser Datei, stapelt die Karte: Ring und Text in
   einer Zeile, der Knopf darunter über die volle Breite, wie .pf__btns es schon hält.
   Der Kontoverweis darf nicht mehr schrumpfen. Unter 360 px bricht die Kopfpille um
   und wächst in der Höhe, statt ihre Kinder zu zerdrücken. */
@media (max-width:759.98px){
  .resume{
    grid-template-columns:auto 1fr; grid-template-areas:"ring text" "btn btn";
    gap:.5rem .9rem;
  }
  .resume > .ring{ grid-area:ring }
  .resume > div:not(.ring){ grid-area:text; min-width:0 }
  .resume > .btn{
    grid-area:btn; width:100%; display:inline-flex; justify-content:center; margin-top:.35rem;
  }
  .top__acct .rail__acct{ flex:none }
}
@media (max-width:359.98px){
  .top{ flex-wrap:wrap; height:auto; min-height:62px; padding-block:.5rem; row-gap:.35rem }
}

/* ---------- Telefon: die Leiter neu geboden (2026-09-11) ----------
   Die Stufen --step--1 … --step-2 wurden gesetzt, als Überschriften Calibri 600
   trugen. Seit dem Wechsel auf Glegoo 400 (2026-09-10, Zeile 2289) ist derselbe
   Nennwert kleiner in der x-Höhe und leichter im Strich, und die Telefonenden der
   Leiter wurden nie nachgeführt. Gemessen bei 360 px: Fliesstext 14,7–15,3 px
   Calibri (die kleine x-Höhe liest sich eine Stufe kleiner), Mono 12,2–12,6 px
   (Kartenzeile, Eyebrows, «Nothing recorded yet»), h3 18,6 px, h1 24,4 px.
   Eigentümer: «text cut too tight, headers not readable».
   Nicht Elemente einzeln, sondern die Leiter: unter 760 px wird jede Stufe auf den
   Wert geboden, den die Leiter selbst bei 760 px liefert. Ein Telefon fällt so nie
   unter Tablet-Grösse, und an der Grenze bleibt es stetig (grösster Sprung +1,0 px
   bei --step--1). Steigung und Obergrenze bleiben stehen, damit die Stufen weiter
   fliessen, wenn die Enden je angehoben werden. Schnitt 400 und Laufweite 0 aus
   Zeile 2289 bleiben unangetastet.
   Drei Läufe mit festem rem in Leseposition treten der Leiter bei: die Kartenzeile
   .resume__m (.76rem), der Kachelfuss .tile__foot (.74rem) und der Kacheltext
   .tile p (.92rem). Pille und Ring behalten ihre Masse: Chrom, kein Lesetext. */
@media (max-width:759.98px){
  :root{
    --step--1:clamp(.9rem,   .74rem + .2vw,  .9rem);
    --step-0: clamp(1.05rem, .9rem + .25vw,  1.05rem);
    --step-1: clamp(1.3rem,  1.05rem + .5vw, 1.4rem);
    --step-2: clamp(1.75rem, 1.3rem + 1vw,   2.1rem);
  }
  .resume__m, .tile__foot{ font-size:var(--step--1) }
  .tile p:not(.h3){ font-size:var(--step-0) }
}

/* ---------- Telefon: Konto und Abmelden im aufgeklappten Menü, unter «Export trail»
   (Wunsch des Eigentümers, 2026-09-11) ----------
   Angemeldet steht in der Kopfpille Avatar + «Sign out», breiter als «? Sign in»,
   der einzige Stand, der zuvor gemessen wurde. Bei 412 px schneidet der Schalter ◐
   den Knopf an («Sign ou|t»), und der Pfad «Contribute / Submit» bricht in zwei
   Zeilen. Kein Platz erzwingt das. Also zurück in die Leiste, wo der Block bis zum
   2026-09-08 sass: als .rail__account direkt unter «Export trail», vor .rail__end.
   app.js bemalt jeden .rail__acct (querySelectorAll) und hängt die Anmelde- und
   Abmeldezeile an dessen Elternknoten; der zweite Block braucht keine Zeile Skript.
   Unter 760 px verlässt das Konto die Pille; in der Leiste erscheint es nur
   aufgeklappt, wie .rail__auth seit Zeile 1776. Auf dem Schreibtisch ändert sich
   nichts: das Konto bleibt in der Pille, der Leistenblock ist verborgen. */
.rail__account{ display:none }
@media (max-width:759.98px){
  .top__acct{ display:none }
  .rail.is-open .rail__account{ display:block; margin-top:.6rem; padding-top:.75rem; position:relative }
  .rail.is-open .rail__account::before{   /* dieselbe Haarlinie wie .rail__end */
    content:""; position:absolute; top:0; left:0; right:.25rem; height:1px;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--seal) 26%, transparent) 0,
      color-mix(in srgb, var(--seal) 26%, transparent) 72%, transparent);
  }
  .rail__account .rail__acct{ display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem }
}

/* Startdateien auf /contribute (2026-09-11): dieselben Knöpfe wie im Dialog «New
   project» (.pick__sec/.pick__seed sind nicht an .pick gebunden), nur begrenzt in
   der Breite, damit ein Knopf im Satzspiegel nicht über die ganze Spalte läuft. */
.seedlist{ max-width:34rem; margin-top:.4rem }

/* Landeseite /start (2026-09-11). Über der Falz: Eyebrow, Titel, ein Satz, eine
   Handlung — was Nielsen Norman und Baymard als den Teil messen, auf dem gut die
   Hälfte der Aufmerksamkeit liegt. Darum sitzt der Held mit Luft nach oben, der
   Titel eine Stufe grösser als ein Seitentitel, die Zeile auf Lesebreite. */
.landing__hero{ padding-top:clamp(1.5rem, 8vh, 4.5rem) }
.landing__h{ font-size:var(--step-3); max-width:16ch; line-height:1.08 }
.landing__lede{ font-size:var(--step-0); margin-bottom:1.4rem }
.landing__record{ margin-top:1.4rem; max-width:62ch }

/* Docs-Hosts, Aufbau wie eine Produktdokumentation (2026-09-11): Gruppen im Rail, Suche, Inhaltsspalte rechts, Vor/Zurück, Hinweiskästen, Kopierknöpfe. */
.rail__sec{ margin:.4rem 0 0 }
.rail__sec > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding-right:.4rem }
.rail__sec > summary::-webkit-details-marker{ display:none }
.rail__sum::after{ content:"›"; color:var(--muted); transform:rotate(90deg); transition:transform .15s; font-size:1rem; line-height:1 }
.rail__sec:not([open]) > .rail__sum::after{ transform:none }
.rail__item--plain{ padding-left:1.1rem; font-size:.92rem }
.docsearch{ position:relative; flex:1 1 12rem; max-width:22rem; margin-left:.4rem }
.docsearch input{ width:100%; box-sizing:border-box; font:inherit; font-size:.92rem; padding:.45rem .7rem; border:1px solid var(--line-ui); border-radius:999px; background:var(--field-bg); color:var(--ink) }
.docsearch input:focus{ outline:2px solid var(--seal); outline-offset:1px }
.docsearch__r{ position:absolute; top:calc(100% + .45rem); left:0; right:0; z-index:40; background:var(--card-bg); border:1px solid var(--line-ui); border-radius:var(--radius); box-shadow:var(--shadow-2); padding:.3rem; max-height:60vh; overflow:auto }
.docsearch__a{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding:.45rem .6rem; text-decoration:none; color:var(--ink); border-radius:3px }
.docsearch__a:hover, .docsearch__a:focus{ background:color-mix(in srgb, var(--seal) 12%, transparent) }
.docsearch__a b{ font-weight:500 } .docsearch__a span, .docsearch__none{ color:var(--muted); font-size:.8rem } .docsearch__none{ margin:.3rem .6rem }
.docgrid{ display:grid; grid-template-columns:minmax(0, 72ch); gap:2.5rem; align-items:start }
.doccol{ min-width:0 }
.doc h2 .anchor, .doc h3 .anchor{ color:inherit; text-decoration:none }
.doc h2 .anchor:hover::after, .doc h3 .anchor:hover::after{ content:" #"; color:var(--seal); font-weight:400 }
.callout{ margin:0 0 1.1rem; padding:.7rem 1rem; border:1px solid var(--line); border-left:3px solid var(--seal); border-radius:var(--radius); background:color-mix(in srgb, var(--seal) 6%, transparent) }
.callout__k{ display:block; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--seal); margin:0 0 .25rem }
.callout p{ margin:0 }
.callout--warning{ border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 7%, transparent) } .callout--warning .callout__k{ color:var(--warn) }
.callout--owner{ border-left-color:var(--verify) } .callout--owner .callout__k{ color:var(--verify) }
.callout--tip{ border-left-color:var(--done, var(--seal)) }
.code{ position:relative; margin:.4rem 0 1.15rem }
.code pre{ margin:0 }
.code__copy{ position:absolute; top:.45rem; right:.45rem; font:inherit; font-size:.72rem; padding:.15rem .5rem; border:1px solid var(--line-ui); border-radius:3px; background:var(--card-bg); color:var(--muted); cursor:pointer }
.code__copy:hover{ color:var(--seal); border-color:var(--seal) }
.doc pre[data-lang]{ padding-top:1.7rem; position:relative }
.doc pre[data-lang]::before{ content:attr(data-lang); position:absolute; top:.5rem; left:.85rem; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.doc__pn{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2.4rem 0 .6rem; border-top:1px solid var(--line); padding-top:1.2rem }
.doc__pn-a{ display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:var(--ink); padding:.6rem .85rem; border:1px solid var(--line); border-radius:var(--radius) }
.doc__pn-a--next{ text-align:right; align-items:flex-end }
.doc__pn-a:hover{ border-color:var(--seal) } .doc__pn-a b{ font-weight:500 }
.doc__meta{ margin:0 0 2rem }
.doctoc{ min-width:0 }
@media (min-width:1200px){
  .docgrid{ grid-template-columns:minmax(0, 72ch) 14rem }
  .doctoc{ position:sticky; top:1.2rem }
  .doctoc .doc__toc{ flex-direction:column; align-items:flex-start; gap:.4rem; margin:0; border-left:1px solid var(--line); padding-left:1rem; font-size:.88rem }
  .doctoc .doc__toc a{ border:0 }
}
@media (max-width:759.98px){ .docsearch{ flex-basis:100%; max-width:none; margin:0; order:5 } .doc__pn{ grid-template-columns:1fr } .doc__pn-a--next{ text-align:left; align-items:flex-start } }