/* MemberBoost Onboarding-Plattform · Designsystem nach Documentation/BAUPLAN.md
   Eine Bewegungskurve · drei Schriftgewichte · eine Akzentfläche pro Bildschirm */

:root{
  /* Schrift: Systemstack — auf Mac ist das SF Pro, auf Windows Segoe UI */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Typo-Skala. 700 gilt nur für Display und Titel 1 (BAUPLAN 2.1), t2 und t3
     tragen weiter 600. Fett braucht mehr Luft als Halbfett — darum sind die
     beiden oberen Laufweiten eine Spur offener als vorher. */
  --fs-display:44px; --lh-display:1.05; --tr-display:-.028em;
  --fs-t1:31px;      --lh-t1:1.14;      --tr-t1:-.023em;
  --fs-t2:22px;      --tr-t2:-.016em;
  --fs-t3:19px;      --tr-t3:-.014em;
  --fs-body:16px;    --lh-body:1.62;
  --fs-sec:14px;
  --fs-label:12px;   --tr-label:.07em;

  /* 4px-Raster */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  /* Maße. --read bleibt die Lesespalte für Fließtext. --mitte ist neu: Listen
     standen auf 720 px und ließen bei 1920 px Fenster 900 px daneben leer. */
  --side:272px; --content:1400px; --read:720px; --mitte:1080px; --doklese:880px;

  /* Kanten */
  --r-ctl:10px; --r-card:14px; --r-lg:20px;

  /* Bewegung: eine Kurve für alles */
  --ease:cubic-bezier(.32,.72,0,1);
  --in:160ms var(--ease); --out:120ms var(--ease); --page:180ms var(--ease);
}

/* --ctl ist die Fläche von etwas, das man drücken kann. Vorher waren Knöpfe
   durchsichtig und von Text nicht zu unterscheiden. Nur Grauwerte, kein neuer Ton.
   --ok ist die entschiedene zweite Aussage neben dem Rot: offen rot, gesehen grün.
   Tannengrün, kein Signalgrün — Ton 147°, hell mit 6,25:1 genau so schwer wie
   #B02C18 mit 6,26:1. Gleiche Dichte liest sich als Paar, nicht als Ampel. Dunkel
   fällt der Ton heller aus, sonst hält er auf der eigenen Tönung keine 4,5:1. */
/* --warn2, der Bernstein der Tagesampel. --warn ist nicht rot, sondern Ocker,
   als Ampelgelb aber zu laut: dunkel 7,76:1 gegen 6,74 grün und 6,06 rot.
   --warn2 nimmt deren Dichte an — hell 6,31:1, dunkel 6,52:1, Ton 38°, gedämpft
   wie das Tannengrün; auf eigener Tönung 5,31:1 und 4,84:1. */
/* color-scheme gehört ans Thema, nicht ins <meta>: dort steht „dark light", und
   im Hellthema kamen die Radioknöpfe deshalb als dunkle Vollkreise — alle vier
   Antworten lasen sich wie angekreuzt. Gilt auch für Rollbalken und Felder. */
[data-theme="dunkel"]{
  color-scheme:dark;
  --bg:#0A0A0A; --s-1:#141312; --s-2:#1C1A19; --hair:#262322; --hair-2:#332F2D;
  --ctl:#232120; --ctl-hover:#2E2B29; --ctl-hi:rgba(255,255,255,.05);
  --tx:#F5F2F1; --tx-2:#A8A09D; --tx-3:#6E6663;
  --ac:#C93A22; --ac-tx:#fff; --ac-bg:rgba(201,58,34,.13); --ac-line:rgba(201,58,34,.42);
  --ac-auf-bg:#E4694C;
  --ok:#66A386; --ok-bg:rgba(102,163,134,.12);
  --warn:#D9942F; --warn-bg:rgba(217,148,47,.12);
  --warn2:#BE8A46; --warn2-bg:rgba(190,138,70,.12);
  --err:#E4674C;
  --scrim:rgba(0,0,0,.62);
}
[data-theme="hell"]{
  color-scheme:light;
  --bg:#FBFAF9; --s-1:#FFFFFF; --s-2:#F5F2F1; --hair:#E8E2E0; --hair-2:#D8CFCC;
  --ctl:#FFFFFF; --ctl-hover:#F5F2F1; --ctl-hi:rgba(255,255,255,.9);
  --tx:#171615; --tx-2:#615955; --tx-3:#8E8683;
  --ac:#B02C18; --ac-tx:#fff; --ac-bg:rgba(176,44,24,.07); --ac-line:rgba(176,44,24,.34);
  --ac-auf-bg:#B02C18;
  --ok:#33684B; --ok-bg:rgba(51,104,75,.09);
  --warn:#8A5810; --warn-bg:rgba(154,100,19,.09);
  --warn2:#73592B; --warn2-bg:rgba(160,122,52,.10);
  --err:#B4321C;
  --scrim:rgba(20,14,12,.34);
}

/* Das hidden-Attribut muss gewinnen.
   .login, .palette und .tour setzen display:grid — eine Autorenregel schlägt die
   Browserregel [hidden]{display:none}. Dadurch lag das Tour-Fenster unsichtbar
   über der ganzen Seite und hat jeden Klick abgefangen: man konnte sich nicht
   anmelden, und niemand sah, woran es lag. Eine Zeile, vier Bildschirme. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
/* Überschriften laufen enger als Fließtext — SF Pro wechselt über 20 px selbst
   auf den Display-Schnitt, der eine engere Laufweite verlangt. */
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.012em}
/* Ein Ort für das Halbfett von <b> und einer fürs Abschneiden — zehn bzw. fünf
   Einzelregeln haben die beiden vorher wörtlich wiederholt. */
b,strong{font-weight:600}
.subnav a,.crumbs,.row .txt span,.hit em,.kz-titel{overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
::selection{background:var(--ac-bg)}

/* Akzentrahmen plus getönter Hof: auf einer Karte gleicher Helligkeit setzt ein
   reiner Rahmen zu wenig ab. */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 5px var(--ac-bg)}
/* Was über der Seite schwebt, trägt dieselbe Kante. Der Radius nicht. */
.skip,.palette .box,.toast,.glockenfach{background:var(--s-1);border:1px solid var(--hair-2)}
.skip{position:absolute;left:-9999px;top:var(--s2);z-index:99;padding:var(--s2) var(--s4);
  border-radius:var(--r-ctl)}
.skip:focus{left:var(--s2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Anmelden */
.login{min-height:100dvh;display:grid;place-items:center;padding:var(--s6)}
.login-card,.tour-card{background:var(--s-1);border:1px solid var(--hair);border-radius:var(--r-lg)}
.login-card{width:100%;max-width:412px;
  padding:var(--s8) var(--s8) var(--s6);animation:rise var(--page) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.login-mark{background:#0A0A0A;border-radius:var(--r-ctl);padding:var(--s3) var(--s4);
  display:inline-block;margin-bottom:var(--s6)}
.login-mark img{height:26px;display:block}
/* Ein Etikett, eine Laufweite — .03em und .04em standen daneben ohne Grund. */
.kicker,.navlabel,.tbl th,.b-tbl thead th,.b-script b{font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tr-label)}
.kicker{font-size:var(--fs-label);color:var(--ac);margin:0}
.login-card h1{margin:var(--s2) 0 var(--s1)}
.login-card>p.sub{margin:0 0 var(--s6);color:var(--tx-2);font-size:var(--fs-sec)}
form.stack{display:grid;gap:var(--s4)}
label{display:grid;gap:var(--s2);font-size:13px;font-weight:600;color:var(--tx-2);
  letter-spacing:-.002em}
/* Die Antwortzeile der Abschlussfragen ist ein Feld wie jedes andere. */
input,select,textarea,.wahl{width:100%;min-height:40px;padding:0 var(--s3);border-radius:var(--r-ctl);
  border:1px solid var(--hair-2);background:var(--bg);color:var(--tx);font:inherit;
  font-size:15px;transition:border-color var(--in),box-shadow var(--in)}
textarea{padding:var(--s2) var(--s3);min-height:78px;line-height:1.55}
input:hover,select:hover,textarea:hover,.wahl:hover{border-color:var(--tx-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-bg)}
.err{margin:0;color:var(--err);font-size:13px;font-weight:600}
.login-foot{margin:var(--s6) 0 0;font-size:13px;color:var(--tx-3);text-align:center}

/* Passwortfeld mit Auge — Tippfehler sind der häufigste Grund, nicht
   hereinzukommen. Rechts Platz, damit ein langes Passwort nicht unter dem Knopf
   verschwindet. Auge als CSS-Form: ein Icon-Satz für ein Symbol wäre eine
   Abhängigkeit für nichts. */
.pw-feld{position:relative;display:block}
.pw-feld input{padding-right:42px}
.pw-auge{position:absolute;right:1px;top:1px;bottom:1px;width:40px;padding:0;
  border:0;background:none;cursor:pointer;color:var(--tx-3);transition:color var(--in)}
.pw-auge:hover{color:var(--tx-2)}
.pw-auge:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.pw-auge::before,.pw-auge::after{content:"";position:absolute;
  inset:50% auto auto 50%;transform:translate(-50%,-50%)}
.pw-auge::before{width:17px;height:11px;border:1.6px solid currentColor;
  border-radius:50%/60% 60% 40% 40%}
.pw-auge::after{width:5px;height:5px;border-radius:50%;background:currentColor;
  transition:opacity var(--out)}
/* Sichtbares Passwort: die Pupille füllt das Auge, damit ein zweiter Druck als
   „wieder verbergen" lesbar ist. */
.pw-auge[aria-pressed=true]{color:var(--ac-auf-bg)}
.pw-auge[aria-pressed=true]::after{opacity:0}
.pw-auge[aria-pressed=true]::before{width:11px;height:11px;border-radius:50%;border-width:3.4px}

/* Kästchen zum Anhaken. Klickbar ist der ganze Streifen — ein 18-px-Ziel trifft
   niemand beim ersten Versuch. Beim versteckten Feld müssen min-height und
   padding mit aus, sonst gäbe die globale Feldregel ihm 40 px Höhe. */
.haken{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  align-items:start;padding:var(--s3);margin:calc(var(--s1) * -1) 0 0;
  border-radius:var(--r-ctl);cursor:pointer;font-weight:400;transition:background var(--in)}
.haken:hover{background:var(--ctl-hover)}
.haken input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;
  padding:0;margin:0;pointer-events:none}
/* Rand --tx-3, nicht --hair-2 wie bei den Feldern: ein Feld hat Breite und
   Innenraum, dieses Quadrat hat nur den Rand. Mit --hair-2 stand es bei 1,4:1
   und sah ausgegraut aus, jetzt bei 3,3 (dunkel) und 3,6 (hell). */
.haken-kaestchen{width:18px;height:18px;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--tx-3);background:var(--bg);display:grid;place-items:center;
  transition:background var(--in),border-color var(--in)}
.haken-kaestchen::after{content:"";width:9px;height:5px;border:2px solid var(--ac-tx);
  border-top:0;border-right:0;transform:rotate(-45deg) scale(.4);
  opacity:0;transition:opacity var(--out),transform var(--in)}
.haken:hover .haken-kaestchen{border-color:var(--tx-3)}
.haken input:checked + .haken-kaestchen{background:var(--ac);border-color:var(--ac)}
.haken input:checked + .haken-kaestchen::after{opacity:1;transform:rotate(-45deg) scale(1)}
.haken input:focus-visible + .haken-kaestchen{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-bg)}
.haken-text{font-size:13px;font-weight:600;color:var(--tx);line-height:1.45}
.haken-text small{display:block;font-weight:400;font-size:12px;color:var(--tx-3);
  margin-top:2px;letter-spacing:0}

/* Fläche, Kante, Lichtkante oben — und vier sichtbare Zustände: Ruhe,
   Überfahren, Drücken (1 px runter, Licht weg), Fokus über die globale Regel.
   Knopf, Schalterleiste und Umschalter sind dieselbe drückbare Fläche. */
.btn,.seg,.schalter{display:inline-flex;border-radius:var(--r-ctl);border:1px solid var(--hair-2);
  background:var(--ctl);box-shadow:inset 0 1px 0 var(--ctl-hi)}
.btn{align-items:center;justify-content:center;gap:var(--s2);
  min-height:38px;padding:0 var(--s4);cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:-.006em;
  transition:border-color var(--in),background var(--in),transform var(--out)}
.btn:hover{border-color:var(--tx-3);background:var(--ctl-hover)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.primary{background:var(--ac);border-color:var(--ac);color:var(--ac-tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary:hover{background:var(--ac);filter:brightness(1.08)}
.btn.plain{border-color:transparent;background:transparent;box-shadow:none}
.btn.plain:hover{border-color:var(--hair-2);background:var(--s-2)}
.btn.sm{min-height:32px;padding:0 var(--s3);font-size:13px}
.btn.wide{width:100%}

/* ── Shell */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.side{background:var(--bg);border-right:1px solid var(--hair);position:sticky;top:0;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.side-top{padding:var(--s4) var(--s4) var(--s3)}
.side-top .mark{background:#0A0A0A;border-radius:var(--r-ctl);padding:var(--s2) var(--s3);display:block}
.side-top .mark img{height:20px;display:block}
.nav{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) var(--s4);scrollbar-width:thin}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.navlabel{font-size:11px;color:var(--tx-3);padding:var(--s4) var(--s2) var(--s1)}
/* Nackter Knopf: keine Fläche, keine Kante — Navigation und Schalterleiste. */
.nav a,.nav button,.seg button,.schalter-knopf,.bereich-knopf,.burger{border:0;background:none;
  color:var(--tx-2);cursor:pointer;transition:background var(--in),color var(--in)}
.nav a,.nav button{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  min-height:34px;padding:0 var(--s2);border-radius:8px;font-size:14px}
.nav a:hover,.nav button:hover{background:var(--s-2);color:var(--tx)}
/* Gewicht, nicht nur Tönung: sonst sucht man beim Zurückkommen, wo man war. */
.nav a[aria-current="page"]{background:var(--ac-bg);color:var(--tx);font-weight:600}
.nav .nr{color:var(--tx-3);font-size:12px;font-weight:600;min-width:16px}
.nav a[aria-current="page"] .nr{color:var(--ac)}
.nav .kbd{margin-left:auto;font-size:11px;color:var(--tx-3);font-family:var(--mono)}
/* Ein Balken, drei Größen: 3 px Navigation, 4 px Kapitelzeile, 6 px Fortschritt.
   Füllung und grüne Vollendung standen vorher dreimal da. display:block gehört
   hierher: auf einem inline <span> wirkt keine Höhe, der Balken lag deshalb
   einmal als grober Block in der Zeile. */
.bar,.prog .track{display:block;border-radius:2px;background:var(--s-2);overflow:hidden}
.bar i,.prog .track i{display:block;height:100%;background:var(--ac);transition:width var(--page)}
.bar i.full,.prog .track i.full{background:var(--ok)}
.nav .bar{margin-left:auto;width:26px;height:3px;background:var(--hair);flex:none}
.subnav{padding:var(--s1) 0 var(--s2) var(--s6);display:grid;gap:1px}
.subnav a{min-height:28px;font-size:13px;color:var(--tx-3)}
.subnav a[aria-current="page"]{background:none;color:var(--ac);font-weight:600}
.side-foot{border-top:1px solid var(--hair);padding:var(--s3)}
.side-foot .who{display:flex;align-items:center;gap:var(--s2);padding:var(--s2)}
.side-foot .who small{display:block;color:var(--tx-3);font-size:11px}
.ver{margin:var(--s3) var(--s2) 0;font-size:11px;color:var(--tx-3)}

.main{min-width:0;display:flex;flex-direction:column}
.top,.tour-head,.kuerzel-kopf{display:flex;border-bottom:1px solid var(--hair)}
.top{position:sticky;top:0;z-index:6;align-items:center;gap:var(--s3);
  min-height:52px;padding:0 var(--s6);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px)}
.burger{display:none;padding:var(--s2)}
.crumbs{flex:1;min-width:0;font-size:14px;color:var(--tx-3)}
.crumbs b{color:var(--tx);letter-spacing:-.008em}
.top .btn{background:transparent;box-shadow:none}
.top .btn:hover{background:var(--ctl-hover)}
/* Verkleidet: der Balken sagt über die volle Breite, wessen Plattform man
   sieht. Getönt statt Warnfarbe, ohne Bewegung — ein Zustand, kein Alarm. */
.ansicht-banner{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s2) var(--s6);font-size:13px;font-weight:600;
  background:var(--ac-bg);border-bottom:1px solid var(--ac-line);color:var(--ac-auf-bg)}
.ansicht-banner .btn{margin-left:auto;color:var(--tx)}
/* Runde Marke — Kürzel, Haken, Ziffer: fünfmal derselbe Kreis. */
.avatar,.person .av,.row .tick,.tick-btn,.tour-list .n,.ls-punkt{display:grid;
  place-items:center;border-radius:50%;flex:none}
.avatar,.nav a .dot,.glocke-zahl{background:var(--ac);color:#fff;font-size:11px;font-weight:600}
.avatar{width:28px;height:28px}
.view{flex:1;padding:var(--s8) var(--s6) var(--s24)}
.wrap{max-width:var(--content);margin:0 auto}
/* „narrow" ist jetzt Übersichts-, nicht Lesebreite. Der Fließtext bleibt über
   74ch und --read begrenzt; breit werden nur Listen, Tabellen und Raster. */
.narrow{max-width:var(--mitte)}

/* ── Typografie der Seiten */
/* Fett nur, wo 31 px oder mehr stehen: Begrüßung, Kapitel-, Dokument-, Anmeldetitel.
   Darunter trägt 600 — 700 läuft in kleinen Graden im Dunkeln zu und wirkt dann
   schmutzig statt kräftig. */
.display,.t1,.dochead h1,.login-card h1,.team-kopf h1{font-weight:700}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.t1,.dochead h1,.login-card h1,.team-kopf h1{font-size:var(--fs-t1);line-height:var(--lh-t1);letter-spacing:var(--tr-t1)}
.lede,.hello p{color:var(--tx-2);font-size:17px;line-height:1.55}
.lede{margin:var(--s2) 0 var(--s8);max-width:var(--read)}
.muted{color:var(--tx-2)}
.dim{color:var(--tx-3)}

.sec{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s12) 0 var(--s4)}
.sec h2{font-size:var(--fs-t3);letter-spacing:var(--tr-t3)}
.sec .rule{flex:1;height:1px;background:var(--hair)}
.sec .n{font-size:12px;color:var(--tx-3);font-weight:600}

/* ── Flächen und Zeilen
   Fläche, Kante und Radius standen sechsmal wörtlich da, .msg und .task mit
   12 px statt des Tokens — jetzt eine Quelle. Wer eine Karte braucht, hängt
   sie hier ein und schreibt daneben nur das Innenmaß. */
.rows,.next,.panel,.msg,.task,.kapitelliste,.tagkarte,.livespiegel,.pdfbox,
.meine-tage,.tz-box,.fs-rolle{background:var(--s-1);
  border:1px solid var(--hair);border-radius:var(--r-card)}
/* Den Winkel tragen nur Zeilen, die ein Link sind — der Unterschied, den man ohne
   Klick sieht. Am Elementtyp entschieden, weil Klassen ins Markup gehören. */
a.row::after,a.task::after{content:"›";color:var(--tx-3);
  font-size:18px;line-height:1;transition:transform var(--in),color var(--in)}
a.row:hover::after,a.task:hover::after{color:var(--ac);transform:translateX(3px)}

.rows,.meine-tage{overflow:hidden}
/* Listenzeile, Suchtreffer, Wochen- und Onboardingzeile: dasselbe Zeilenmaß. */
.row,.hit,.mt-zeile,.ob-zeile{padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair);
  transition:background var(--in)}
.row:last-child,.hit:last-child,.mt-zeile:last-child,.ob-zeile:last-child{border-bottom:0}
.row{display:flex;align-items:center;gap:var(--s4)}
a.row{cursor:pointer}
a.row:hover{background:var(--ctl-hover)}
.row .tick{width:20px;height:20px;border:1.5px solid var(--hair-2);font-size:11px;color:transparent}
.row .tick.on{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.row .txt{min-width:0;flex:1}
.row .txt b,.task-body>b{display:block;font-size:16px;letter-spacing:-.014em}
.row .txt span{display:block;color:var(--tx-2);font-size:14px;line-height:1.5}
.row .meta,.ls-person,.tz-person{display:flex;align-items:center;gap:var(--s2)}
.row .meta{flex:none}

.pill,.ampelchip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:3px var(--s2);border-radius:999px;
  border:1px solid var(--hair);color:var(--tx-2);background:var(--s-2);white-space:nowrap}
a.pill,.wahl{cursor:pointer;transition:border-color var(--in),background var(--in)}
a.pill:hover{border-color:var(--ac);background:var(--ac-bg)}
.pill.ac,[data-zustand] .pill.warn{color:var(--ac-auf-bg);border-color:var(--ac-line);background:var(--ac-bg)}
.pill.warn{color:var(--warn);border-color:transparent;background:var(--warn-bg)}
.pill.ok{color:var(--ok);border-color:transparent;background:var(--ok-bg)}
/* raw und dimmed sagen dasselbe; dimmed hing an .task-meta und griff im
   Meldungsverlauf nicht. Verweis braucht keine Spezifitätsstütze mehr und trägt
   --ac-auf-bg: mit --ac stand es bei 2,7:1 auf Fläche 2, jetzt bei 5,3 und 5,9. */
.pill.raw,.pill.dimmed{color:var(--tx-3)}
.pill.verweis{color:var(--ac-auf-bg)}

/* ── Heute */
.hello{margin-bottom:var(--s8)}
.hello .display{margin:var(--s2) 0 var(--s3)}
.hello p{margin:0;max-width:64ch}
.next{display:block;padding:var(--s6);transition:border-color var(--in),background var(--in)}
a.next{cursor:pointer}
a.next:hover{border-color:var(--ac-line);background:var(--ctl-hover)}
.next h3{font-size:var(--fs-t2);letter-spacing:var(--tr-t2);margin:var(--s2) 0 var(--s2)}
.next p{margin:0 0 var(--s6);color:var(--tx-2);font-size:16px;line-height:1.55}
/* Ungebunden: dieselbe Knopfzeile steht auch unter den Abschlussfragen und im
   Fuß der Tageskarte. */
.go,.tk-fuss{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.prog .lbl{display:flex;justify-content:space-between;gap:var(--s3);font-size:14px;color:var(--tx-2);margin-bottom:var(--s2)}
.prog .track{height:6px;border-radius:3px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:var(--s3)}
.fact{background:var(--s-2);border-radius:var(--r-card);padding:var(--s4)}
.fact small{display:block;color:var(--tx-3);font-size:12px;font-weight:600;letter-spacing:.02em}
.fact b{display:block;font-size:17px;margin-top:var(--s1);letter-spacing:-.014em}

/* Querformat nutzen — Heute. Vorher eine 720 px schmale Spalte, dreimal scrollen
   bis zu den Themenblöcken. Jetzt nächster Schritt links, Fortschritt und Kennzahlen
   rechts. An data-seite erkannt, nicht an :has(>.hello): die Kennung sagt, welche
   Seite das ist, der Begrüßungsblock nur, was darin steht. Der Platzhalter trägt
   dieselbe Kennung, bleibt aber ohne Raster — Zeilenlücken machten ihn zu hoch. */
@media (min-width:1120px){
  [data-seite=heute]:not([aria-hidden]){display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:var(--s6) var(--s12);align-items:start}
  [data-seite=heute]>*{grid-column:1/-1}
  /* Zeile 2 gehört der Tageskarte: selbstgesetzt käme sie erst hinter das
     Onboarding, wo der Morgen niemanden abholt. Das Band darunter rückt fest
     eine Zeile tiefer; ohne Tageskarte bleibt Zeile 2 leer und kostet nur eine
     Zeilenlücke — billiger als ein :has() über drei Regeln. */
  [data-seite=heute]>.tagkarte{grid-row:2}
  [data-seite=heute]>.next{grid-column:1;grid-row:3/span 2;align-self:start}
  /* Der Zusatz richtet „Dein Fortschritt" auf die Zeile „Dein nächster Schritt"
     in der Karte links aus. */
  [data-seite=heute]>.prog{grid-column:2;grid-row:3;padding-top:var(--s4)}
  /* Feste zwei Spalten: mit auto-fit blieb die vierte Kennzahl allein stehen. */
  [data-seite=heute]>.facts{grid-column:2;grid-row:4;align-self:start;
    grid-template-columns:1fr 1fr}
}

/* ── Tagessteuerung: die Tageskarte
   Ein Blick, ein Knopf: sichtbar ist nur der Schritt, der jetzt dran ist, im Fuß
   steht genau ein Primärknopf — wer nichts wählen muss, ist in zwanzig Sekunden
   fertig. Beim Arbeiten ist die Uhr die größte Zahl der Karte, sie belegt, dass
   gezählt wird. Ziel und Vorgabe links untereinander, das Feld daneben über
   beide Zeilen: die Zahl liegt überall gleich, am Telefon bricht der Zielname
   nicht um, gesetzt fällt nur die Feldkante weg. Kein display auf .tagkarte —
   Behälter bleiben Block (siehe Glocke). */
.tagkarte{padding:var(--s6)}
.tk-kopf,.ls-kopf,.team-kopf{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.tk-kopf{margin-bottom:var(--s4)}
.tk-titel{font-size:var(--fs-t2);letter-spacing:var(--tr-t2)}
.tk-uhr,.ls-stand{margin-left:auto;flex:none}
.tk-uhr,.ls-zeit{color:var(--tx-2);white-space:nowrap}
.tk-uhr{font-size:14px}
[data-schritt=arbeiten] .tk-uhr{font-size:var(--fs-t2);color:var(--tx);font-weight:600}
.tk-ziele,.tk-notiz{margin-bottom:var(--s4)}
.tk-ziele{display:grid;gap:var(--s2)}
.zielzeile{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:0 var(--s3)}
.zz-wert{grid-area:1/2/3;text-align:right;font-weight:600}
input.zz-wert{font-size:16px}
.zz-vorgabe{grid-column:1}
/* Fertig wird nicht gefeiert, sondern quittiert — der Abend endet leise. */
.tagkarte[data-schritt=fertig]{border-color:var(--ok);background:var(--ok-bg)}

/* ── Livespiegel (Startseite der Admins)
   Zum Lesen, nicht zum Anfassen: keine klickbare Zeile, kein Winkel, kein Zebra.
   Die Ampeln erben Form und Maß von der Pille; „offen" behält die neutrale —
   noch kein Bericht ist kein Versagen und bekommt keine Farbe. Auch „nicht
   eingestempelt" wird nur leiser, nie rot, das ist morgens kein Vorwurf. Der
   Punkt atmet alle 2,4 s statt zu blinken; Deckkraft statt Ring bewegt kein
   Layout und wirft keinen Schatten. */
.livespiegel,.tz-box{overflow-x:auto;margin-top:var(--s6)}
.ls-kopf{padding:var(--s4) var(--s4) var(--s3)}
.ls-kopf>:first-child{font-size:var(--fs-t3)}
.ls-person,.tz-person{font-weight:600;white-space:nowrap}
.zz-vorgabe,.tk-hinweis,.ls-rolle,.mt-status,.ob-kap{font-size:13px;color:var(--tx-3)}
.ls-rolle{font-weight:400}
.ls-zeit{font-size:13px}
[data-drin=nein] .ls-zeit{color:var(--tx-3)}
.ls-bericht{text-align:center}
.ampelchip{gap:5px;border-color:transparent}
[data-ampel=offen]{color:var(--tx-3);border-color:var(--hair)}
[data-ampel=gruen]{color:var(--ok);background:var(--ok-bg)}
[data-ampel=gelb]{color:var(--warn2);background:var(--warn2-bg)}
[data-ampel=rot]{color:var(--ac-auf-bg);background:var(--ac-bg)}
.ls-punkt{width:8px;height:8px;background:var(--tx-3)}
/* Derselbe Atem an allen vier Stellen, an denen etwas gerade läuft. */
.ls-punkt[data-online=ja],.nav-punkt,[data-drin=ja] .mt-min::before,
.tz-tag[data-drin=ja]::before{background:var(--ok);animation:puls 2400ms var(--ease) infinite}
@keyframes puls{50%{opacity:.42}}

/* ── Stempeluhr in der Navigation
   „In Grün pulsieren" war der Wunsch. Was pulsiert, wird aber nicht gelesen: eine
   Zahl, die alle 2,4 s heller wird, holt den Blick den ganzen Tag in die
   Seitenleiste. Also pulsiert der Punkt daneben — er sagt nichts außer „läuft" —,
   die Zahl bleibt ruhig in Tannengrün, tabellarisch geerbt vom body: sonst rückt
   die Zeile jede Minute. Wochen- und Teamtabelle liefern kein Punkt-Element,
   dort trägt ihn ein ::before. */
.nav a[data-stempel]{margin-bottom:var(--s2)}   /* ein Zustand, kein Ort */
.nav a[data-stempel=drin]{color:var(--tx)}
.nav-uhr{color:var(--ok);font-weight:600}
.nav-punkt,[data-drin=ja] .mt-min::before,.tz-tag[data-drin=ja]::before{
  width:7px;height:7px;border-radius:50%;flex:none}
[data-drin=ja] .mt-min::before,.tz-tag[data-drin=ja]::before{content:"";
  display:inline-block;margin-right:5px}

/* ── Stempel-Seite: meine Woche
   Zeilenmaß und Kante kommen von der Listenzeile. Gelesen wird die Spalte nach
   unten, darum stehen Minuten und Status rechts in fester Breite. Heute liegt
   auf Fläche 2, nicht in Rot — die Tageskarte darüber ist die Akzentfläche. */
.meine-tage{margin-top:var(--s6)}
.mt-zeile{display:grid;grid-template-columns:minmax(0,1fr) 116px 92px;
  align-items:center;gap:var(--s3)}
.mt-datum{color:var(--tx-2);font-size:14px}
.mt-min,.ob-pct{text-align:right;font-weight:600;font-size:14px;white-space:nowrap}
.ob-kap{text-align:right}
/* Geschätzt heißt geraten, nicht gemessen — die Zahl tritt zurück, hier wie
   in der Teamtabelle. */
[data-geschaetzt=ja] .mt-min,.tz-tag[data-geschaetzt=ja]{color:var(--tx-3)}
.mt-zeile[data-heute=ja]{background:var(--s-2)}
.mt-zeile[data-heute=ja] .mt-datum{color:var(--tx);font-weight:600}

/* ── Team-Seite (nur Admins)
   Drei Ansichten, ein Umschalter, der immer dasteht. Deshalb füllt der aktive
   Knopf nicht mit Markenrot — gefüllt heißt im Haus „das ist jetzt zu tun", und
   ein Dauerzustand ist das nicht. Er trägt die Sprache des gewählten
   Navigationseintrags: getönte Fläche, voller Textton. */
.team-kopf{margin-bottom:var(--s6)}
.team-kopf h1{margin-right:auto}   /* Umschalter und Tagwähler stehen rechts */
/* Bahn aus der Knopfregel; sie bricht um, statt am Telefon überzulaufen. */
.schalter{gap:2px;padding:3px;flex-wrap:wrap}
.schalter-knopf,.bereich-knopf{min-height:30px;padding:0 var(--s3);border-radius:7px;
  font-size:13px;font-weight:600}
.schalter-knopf[aria-pressed=true],.bereich-knopf[aria-pressed=true]{background:var(--ac-bg);color:var(--tx)}
.schalter-knopf:focus-visible,.bereich-knopf:focus-visible{outline-offset:-2px}   /* Ring in die Bahn */
/* Der Bereichsumschalter steht in der Kopfleiste, nicht auf der Seite: die Bahn
   bleibt schmal und bricht dort nie um — zwei Welten sind zwei Wörter. */
#bereich{flex:none;flex-wrap:nowrap}
/* Arbeitszeit: sieben schmale Zahlenspalten, damit man senkrecht vergleicht,
   der Name links wie im Livespiegel. Geschätzte Tage tragen den Stern, den die
   Fußnote unter der Tabelle erklärt. */
.tz-tag{text-align:right;white-space:nowrap;color:var(--tx-2)}
.tz-tag[data-heute=ja]{color:var(--tx);font-weight:600}
.tz-tag[data-drin=ja]{color:var(--ok)}
.tz-tag[data-geschaetzt=ja]::after{content:"*";color:var(--warn2)}
.row>.tz-person{width:180px;flex:none}   /* Kennzahlen: Ampeln ab fester Spalte */
/* Onboarding: Name, Balken, Prozent, Kapitelstand. Mobil fällt der Balken weg
   wie in der Kapitelzeile — Wort und Prozent genügen. */
.ob-zeile{display:grid;grid-template-columns:180px minmax(0,320px) 44px 92px;
  align-items:center;gap:var(--s3)}
.ob-zeile .bar{height:6px}

/* ── Dokument */
/* Gliederung 264 statt 200 px (ganze Titel statt Ellipsen), Lesespalte 880 statt
   720. Der Fließtext bleibt bei 74ch — breiter verliert man die Zeile; die
   zusätzliche Breite geht an Tabellen, Skripte, Merksätze. Mittig, damit die
   Lesespalte immer an derselben Stelle liegt. */
.doc-grid{display:grid;grid-template-columns:264px minmax(0,var(--doklese));
  gap:var(--s12);align-items:start;justify-content:center}
.toc{position:sticky;top:84px;max-height:calc(100dvh - 140px);overflow-y:auto}
.toc .navlabel{padding:0 0 var(--s2)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.toc a{display:block;font-size:14px;color:var(--tx-3);padding:var(--s1) var(--s2);
  border-left:2px solid transparent;margin-left:-2px;line-height:1.45;transition:color var(--in)}
.toc a:hover{color:var(--tx)}
.toc a.here{color:var(--ac);font-weight:600;border-left-color:var(--ac)}
.readbar{position:fixed;left:0;top:0;height:2px;background:var(--ac);z-index:20;width:0;
  transition:width 80ms linear}
.dochead{margin-bottom:var(--s8)}
.dochead h1{margin:var(--s2) 0 var(--s3);max-width:24ch}
.dochead .sub{margin:0;color:var(--tx-2);font-size:18px;line-height:1.55;max-width:66ch}
.docmeta{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s4);flex-wrap:wrap}

.b-h{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s12) 0 var(--s1);scroll-margin-top:84px}
.b-h .n{font-size:20px;font-weight:600;color:var(--ac)}
.b-h h2{font-size:var(--fs-t2);letter-spacing:var(--tr-t2)}
.b-rule{height:1px;background:var(--hair);margin:var(--s2) 0 var(--s4)}
.b-h2{font-size:17px;font-weight:600;margin:var(--s6) 0 var(--s2);letter-spacing:-.01em}
.b-lead{font-size:18px;line-height:1.6;margin:0 0 var(--s4);max-width:70ch}
.b-p{margin:0 0 var(--s3);max-width:74ch}
.b-list,.b-script{display:grid;gap:var(--s2);margin:0 0 var(--s4);max-width:74ch}
.b-list{list-style:none;padding:0}
.b-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s2);align-items:start}
.b-list .m{color:var(--ac);font-weight:600;text-align:center}
.b-list.dont .m{color:var(--tx-3)}
.b-script div{background:var(--s-2);padding:var(--s3) var(--s4)}
.b-script b{display:block;font-size:12px;color:var(--ac);margin-bottom:2px}
.b-pull{margin:var(--s8) 0;padding-left:var(--s6);border-left:3px solid var(--ac);
  font-size:25px;line-height:1.32;letter-spacing:-.02em;font-weight:600;max-width:34ch}
/* Merksatz, Hinweis, Skriptzeile: dieselbe Kante links, gleiche Kappung. */
.b-note,.hint,.rueckmeldung,.b-script div{border-left:2px solid var(--ac);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.b-note,.hint,.rueckmeldung{background:var(--ac-bg);padding:var(--s4);
  margin:0 0 var(--s4);font-size:15px;line-height:1.6;max-width:74ch}
/* Handbuch-Verwaltung: eine Liste, die man überfliegt, keine Tabelle zum Studieren.
   Die Herkunftsmarke trägt die wichtigste Information — ob ein neues PDF den
   gelesenen Text überhaupt ändert. Deshalb steht sie neben dem Namen, nicht am Rand. */
.hb-kapitel{border-bottom:1px solid var(--hair)}
.hb-kapitel summary{padding:var(--s4) 0;cursor:pointer;font-size:15px;font-weight:600}
.hb-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--s4);
  align-items:center;padding:8px 0 8px var(--s5);border-top:1px solid var(--hair)}
.hb-datei{min-width:0;font-size:14px;display:grid}
.hb-datei small{font-family:var(--mono);font-size:11px}
.hb-quelle{font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.hb-quelle.ist-generator{background:var(--ok-bg);color:var(--ok)}
.hb-quelle.ist-pdf{background:var(--warn2-bg,var(--s-2));color:var(--warn2,var(--tx-2))}
.hb-quelle.ist-keine{background:var(--s-2);color:var(--tx-3)}
.hb-groesse{font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-neu{font-size:11px;color:var(--ac-auf-bg);white-space:nowrap}
.hb-tun{display:flex;gap:6px}
.hb-upload{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair)}
.hb-upload h3{font-size:15px;margin:0 0 var(--s4)}
@media (max-width:700px){.hb-zeile{grid-template-columns:1fr auto}.hb-groesse,.hb-neu{display:none}}
/* Beispielansicht der Vorlagen: ein echtes Dokument im Rahmen, aufklappbar.
   Zugeklappt ist die Voreinstellung — wer die Vorlage kennt, will das Formular,
   nicht erst ein Blatt Papier. */
.beispiel-fach,.kd-fach{border:1px solid var(--hair);border-radius:var(--r-card);
  background:var(--s-1);margin:0 0 var(--s5);overflow:hidden}
.beispiel-fach summary,.kd-fach summary{padding:var(--s4) var(--s5);cursor:pointer;
  font-size:15px;font-weight:600}
.beispiel-fach summary:hover,.kd-fach summary:hover{color:var(--ac-auf-bg)}
.beispiel-rahmen{display:block;width:100%;height:70vh;min-height:420px;border:0;
  border-top:1px solid var(--hair);background:#fff}
/* Fehlendes Pflichtfeld: rote Kante am Feld selbst, nicht nur ein Satz oben.
   Wer sieben Felder ausgefüllt hat, will wissen welches — nicht dass eines fehlt. */
[data-fehlt=ja]{border-color:var(--ac)!important;box-shadow:0 0 0 3px var(--ac-bg)}
.b-note[data-fehler=ja]{border-left-color:var(--ac)}
/* Warnband: die Rechnung ist erstellt, aber es fehlt eine Pflichtangabe der
   Firma, die niemand in der Oberfläche nachtragen kann (USt-IdNr., IBAN). Das
   darf nicht als Nebensatz verschwinden. */
.warnbalken{background:var(--ac-bg);color:var(--ac-auf-bg);border:1px solid var(--ac);
  border-radius:var(--r-ctl);padding:var(--s4);margin:var(--s4) 0 0;font-size:14px;line-height:1.55}
/* Kasten mit Titel und Zeilen: eine Checkliste, die man am Bildschirm abarbeitet.
   Deshalb Fläche und Rahmen wie eine Karte, nicht die Akzentkante der Merksätze —
   ein Kasten mit acht Punkten in Rot gerandet liest sich wie eine Warnung. */
.b-box{background:var(--s-1);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s5);margin:0 0 var(--s5);max-width:74ch}
.b-box .bx-titel{display:block;font-size:15px;margin-bottom:var(--s3)}
.b-box ul{margin:0;padding-left:1.15em;display:grid;gap:6px}
.b-box li{font-size:15px;line-height:1.55;color:var(--tx-2)}
.b-box li::marker{color:var(--tx-3)}
.b-pre,.b-tbl{border:1px solid var(--hair);border-radius:var(--r-ctl)}
.b-pre{margin:0 0 var(--s4);padding:var(--s4);background:var(--s-2);
  overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre}
.b-tbl{margin:0 0 var(--s6);overflow:auto;max-height:70vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
/* Der rote, mitlaufende Kopf gehört nur zu den Handbuchtabellen. Als bloßes
   `thead th` griff er auch in der Verwaltung — und weil `.tbl th` spezifischer
   Grau setzte, stand dort grauer Text auf Markenrot, weit unter 4,5:1. */
.b-tbl thead th{position:sticky;top:0;background:var(--ac);color:#fff;text-align:left;
  padding:var(--s3);font-size:12px;white-space:nowrap;z-index:1}
.b-tbl tbody td{padding:var(--s3);border-top:1px solid var(--hair);vertical-align:top;line-height:1.5}
.b-tbl tbody tr:nth-child(even){background:var(--s-2)}
/* a{text-decoration:none} gilt global — ein .verweis war von seinem Absatz nicht
   zu unterscheiden; er bekommt die Unterkante des Querverweises, :not(.pill) hält
   die Pillen frei. --ac-auf-bg statt --ac: --ac hält dunkel keine 3:1 als Text. */
.xref,a.verweis:not(.pill){color:var(--ac-auf-bg);border-bottom:1px solid var(--ac-line);padding-bottom:1px}
.xref:hover,a.verweis:not(.pill):hover{border-bottom-color:var(--ac-auf-bg)}
.docfoot,.tour-foot{display:flex;align-items:center;border-top:1px solid var(--hair)}
.docfoot{gap:var(--s3);margin-top:var(--s12);padding-top:var(--s4);flex-wrap:wrap}
.docfoot .spacer{flex:1}

/* ── Suche */
.palette{position:fixed;inset:0;z-index:40;display:grid;place-items:start center;
  padding-top:12vh;background:var(--scrim);backdrop-filter:blur(2px)}
.palette .box{width:min(640px,92vw);border-radius:var(--r-lg);overflow:hidden;
  animation:rise var(--in) both}
.palette input{border:0;border-radius:0;min-height:52px;font-size:17px;background:transparent;
  border-bottom:1px solid var(--hair)}
.palette input:focus{box-shadow:none;border-color:var(--hair)}
.hits{max-height:52vh;overflow-y:auto}
.hit{display:block;cursor:pointer;border-left:2px solid transparent}
.hit:hover{background:var(--s-2)}
/* Akzentkante zusätzlich zur Tönung: die ist im Hellthema nur 7 Prozent stark
   und beim Blättern mit den Pfeiltasten kaum zu verfolgen. */
.hit.on{background:var(--ac-bg);border-left-color:var(--ac)}
.hit b{display:block;font-size:16px;letter-spacing:-.012em}
.hit small,.hit em{display:block;color:var(--tx-2);font-size:13px;margin-top:2px}
.hit em{font-style:normal}
.hit mark{background:var(--ac-bg);color:var(--ac-auf-bg);border-radius:3px;padding:0 2px}
.palette .foot{padding:var(--s2) var(--s4);border-top:1px solid var(--hair);
  font-size:12px;color:var(--tx-3);display:flex;gap:var(--s4)}

/* ── Wer macht was */
/* Übergabekette und Team zeigen nur an, man kann sie nicht drücken. Deshalb
   flach auf Fläche 2 ohne Kante — vorher sahen sie aus wie die klickbaren
   Zeilen darunter. */
/* `.link` bleibt an `.chain` gebunden, obwohl die Pillen jetzt `verweis` heißen:
   ungebunden hat das Wort sie einmal in dreispaltige Raster verwandelt. */
/* Kette und Person sind dieselbe flache Kachel — die Fläche stand zweimal da. */
.chain .link,.person{align-items:center;background:var(--s-2);border:0;
  border-radius:var(--r-ctl);padding:var(--s3) var(--s4)}
.chain{display:grid;gap:var(--s1);margin:0 0 var(--s8)}
.chain .link{display:grid;grid-template-columns:190px minmax(0,1fr) 190px;gap:var(--s6)}
.chain .link .from{font-weight:600;font-size:15px;letter-spacing:-.01em}
.chain .link .trig{color:var(--tx-2);font-size:14px}
/* Frist ist Frist, in Kette wie Diagramm. --ac-auf-bg statt --ac: das reine
   Markenrot stand dunkel bei 2,5:1 auf der flachen Kachel. */
.chain .link .sla,.fs-frist{font-weight:600;color:var(--ac-auf-bg)}
.chain .link .sla{font-size:13px;text-align:right}
.people{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.person{display:flex;gap:var(--s3)}
.person .av{width:34px;height:34px;background:var(--s-1);color:var(--tx-2);font-size:12px;font-weight:600}
.person b{display:block;font-size:15px;letter-spacing:-.012em}
/* Namenszeile: Person wie Station, ein Maß. */
.person small,.fs-wer{display:block;color:var(--tx-2);font-size:13px;margin-top:1px}

/* ── Wer macht was: derselbe Inhalt als Weg
   Die Kette darüber ist eine Tabelle, den Weg muss man sich aus drei Spalten
   zusammenlesen. Hier steht er da. Senkrecht ist der Grundfall, weil er jede
   Breite trägt; ab 1120 px klappt derselbe Aufbau waagerecht auf. */
.fluss{display:grid;margin:0 0 var(--s8)}
.fs-rolle{display:grid;align-content:center;padding:var(--s3) var(--s4)}
.fs-wer{font-weight:600}   /* .fs-name liegt beim Kapiteltitel, gleiches Maß */
.fs-tut{font-size:13px;line-height:1.45;color:var(--tx-2);margin-top:var(--s2)}
/* Ein echter Pfeil: Schaft (::before), Spitze (::after) als Randdreieck.
   Auslöser und Frist hängen AM Pfeil statt in einer Spalte daneben — das war
   der Fehler der Tabelle. Zwei gleich hohe Zellen halten den Schaft in der
   Mitte, auch wenn die Frist fehlt. */
.fs-pfeil{position:relative;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;column-gap:var(--s6);min-height:72px}
.fs-pfeil::before,.fs-pfeil::after{content:"";position:absolute;left:50%}
.fs-pfeil::before{top:0;bottom:4px;width:1px;background:var(--tx-3);transform:translateX(-50%)}
.fs-pfeil::after{bottom:0;border:5px solid transparent;border-bottom:0;
  border-top-color:var(--tx-3);transform:translateX(-50%)}
.fs-ausloeser,.fs-frist{font-size:12px;line-height:1.4;text-wrap:balance}
.fs-ausloeser{text-align:right;color:var(--tx-2)}

/* Ab 1120 px Schlange, nicht rollende Reihe. Sechs Stationen brauchen quer
   rund 1800 px, am 1440er Schirm stehen 1120 bereit. Die rollende Reihe
   (overflow-x wie .tz-box) war gebaut und ist am Bild gescheitert: sichtbar
   Lead-System bis Closer, für den Rest musste man schieben — Felix' Frage
   blieb offen. Drei Spalten fest, weil sechs die Zahl dieses Hauses ist. */
@media (min-width:1120px){
  .fluss{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s6)}
  /* Rücklauf: Stufe 4 rechts, 6 links, ihre Pfeile zeigen nach links. */
  .fluss-stufe:nth-child(n+4){grid-row:2;flex-direction:row-reverse}
  .fluss-stufe:nth-child(4){grid-column:3}
  .fluss-stufe:nth-child(5){grid-column:2}
  .fluss-stufe:nth-child(6){grid-column:1}
  /* Alle Stufen legen sich quer — außer der dritten: sie bleibt hochkant und
     knickt den Weg in die zweite Reihe. Ohne Knick liefe er rechts ins Leere
     und die zwei Reihen läsen sich als zwei Tabellen. Verschachtelt, weil der
     Vorbehalt sonst siebenmal wörtlich dastünde. */
  .fluss-stufe:not(:nth-child(3)){display:flex;align-items:stretch;
    & .fs-rolle{flex:1;min-width:0}
    & .fs-pfeil{grid-template-columns:none;grid-template-rows:1fr 1fr;
      flex:none;width:150px;padding:0 var(--s2)}
    & .fs-ausloeser{align-self:end;padding-bottom:var(--s2);text-align:center}
    & .fs-frist{align-self:start;padding-top:var(--s2);text-align:center}
    & .fs-pfeil::before{top:50%;bottom:auto;left:var(--s2);
      right:calc(var(--s2) + 3px);width:auto;height:1px;transform:translateY(-50%)}
    /* Dieselbe Spitze, nur gedreht — ein Dreieck reicht für drei Richtungen. */
    & .fs-pfeil::after{top:50%;bottom:auto;left:auto;right:var(--s2);
      transform:translateY(-50%) rotate(-90deg)}
  }
  .fluss-stufe:nth-child(n+4) .fs-pfeil{
    &::before{left:calc(var(--s2) + 3px);right:var(--s2)}
    &::after{left:var(--s2);right:auto;transform:translateY(-50%) rotate(90deg)}
  }
}

/* ── Verwaltung */
.panel{padding:var(--s6);margin-bottom:var(--s4)}
.panel>h2{font-size:var(--fs-t3);letter-spacing:var(--tr-t3)}
.panel>p.sub{margin:var(--s2) 0 var(--s6);color:var(--tx-2);font-size:15px;line-height:1.55;max-width:70ch}
.inline{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:end}
.inline>label{flex:1;min-width:172px}
.tbl{width:100%;font-size:14px;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;color:var(--tx-2);padding:0 var(--s3) var(--s2);
  background:transparent;border-bottom:1px solid var(--hair-2)}
.tbl td,.ls-tabelle td{padding:var(--s3);border-bottom:1px solid var(--hair);vertical-align:middle;line-height:1.5}
.tbl tr:last-child td,.ls-tabelle tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--s-2)}   /* Lesehilfe, lange Listen */
/* Die Wochentabelle ist eine .tbl; eigen ist nur die Spaltenausrichtung. */
.tz-tabelle th+th{text-align:right}
/* Vorher durchsichtig und dadurch wie drei nebeneinanderstehende Wörter.
   Fläche und Kante kommen aus der Knopfregel. */
.seg{overflow:hidden}
.seg button{min-height:36px;padding:0 var(--s4);font-size:13px;font-weight:600}
.seg button:hover,.schalter-knopf:hover,.bereich-knopf:hover{background:var(--ctl-hover);color:var(--tx)}
.seg button+button{border-left:1px solid var(--hair-2)}
.seg button[aria-pressed="true"]{background:var(--ac);color:var(--ac-tx)}
.mono,kbd{font-family:var(--mono);background:var(--s-2);padding:2px 6px;border-radius:5px}
.mono{font-size:13px}
.empty{padding:var(--s16) var(--s6);text-align:center;color:var(--tx-2);font-size:15px}
.hint{margin-bottom:var(--s6)}   /* steht über einer Tabelle */
/* Zweistufiger Löschknopf. Die Klasse wurde vom Zugangslöschen längst gesetzt und
   hatte keine Regel — der Knopf wechselte den Text und sah dabei unverändert
   harmlos aus. Kante und Textton in Markenrot, keine Füllung: gefüllt heißt im
   Haus „das ist jetzt zu tun", und Löschen ist nie das, was zu tun ist. */
.btn.danger{border-color:var(--ac);color:var(--ac-auf-bg)}
.btn.danger:hover{background:var(--ac-bg);border-color:var(--ac)}

/* ── Kundenbereich (P11)
   Zwei Welten, ein Formenvorrat: Karten, Pillen, Bahnen und Tabellen kommen
   unverändert von oben. Eigen ist hier nur, was es im Haus noch nicht gab — die
   Verteilungsbahn, die Säulenreihe und die Markierung des Überfälligen. */
/* Gekündigt ist kein Alarm, sondern ein Abschluss: still und durchgestrichen,
   damit die roten Pillen weiter „hier ist etwas zu tun" bedeuten. */
[data-ampel=aus]{color:var(--tx-3);background:var(--s-2);border-color:var(--hair);
  text-decoration:line-through}
/* Ein Rufzeichen am Kundennamen in der Navigation. Rechts wie der Zähler an
   „Heute", damit die Spalte eine Kante hat, an der das Auge herunterläuft. */
.nav-spaet{margin-left:auto;color:var(--ac-auf-bg);font-weight:700;flex:none}
/* Die Kennzahlkarte sagt jetzt auch, WAS sie zählt. Eine Zahl ohne ihre
   Definition ist der Anfang zweier Wahrheiten: „aktive Kunden" und „laufende
   Betreuungen" sind verschiedene Mengen und wurden nebeneinander verwechselt. */
.kd-fussnote{display:block;margin-top:var(--s1);font-size:11px;line-height:1.4;color:var(--tx-3)}
/* Verteilung als eine Bahn statt fünf Balken: gefragt ist das Verhältnis, nicht
   der Einzelwert — der steht in der Legende darunter. Volltöne, weil eine
   12-%-Tönung auf 10 px Höhe nicht unterscheidbar ist. */
.kd-band{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--s-2)}
.kd-band i{display:block;min-width:2px}
.kd-band i[data-ampel=offen]{background:var(--tx-3)}
.kd-band i[data-ampel=gruen]{background:var(--ok)}
.kd-band i[data-ampel=gelb]{background:var(--warn2)}
.kd-band i[data-ampel=rot]{background:var(--ac)}
.kd-band i[data-ampel=aus]{background:var(--hair-2);text-decoration:none}
.kd-legende{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
/* Verlauf in reinem CSS, kein Diagrammmodul für zwölf Säulen. Über jeder Säule
   steht ihre Zahl: eine Höhe ohne Zahl ist eine Behauptung, die man nicht
   nachlesen kann — und Höhen sind auf den Höchstwert bezogen, nicht auf eine
   Achse, die es hier nicht gibt. */
.kd-verlauf{display:flex;align-items:flex-end;gap:var(--s2);height:132px;margin-top:var(--s2)}
.kd-saeule{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:var(--s1);height:100%}
.kd-saeule b{font-size:12px;font-variant-numeric:tabular-nums;color:var(--tx-2);font-weight:600}
.kd-saeule i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;
  background:var(--ac);transition:height var(--page)}
.kd-saeule small{font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums}
/* Überfällig muss ins Auge fallen, ohne die Tabelle zu bemalen: eine Kante links
   an der Zeile und die Frist in Markenrot. Die Zeilenfarbe bleibt frei für die
   Lesehilfe jeder zweiten Zeile. */
.kd-tabelle tr[data-spaet=ja] td:first-child{box-shadow:inset 3px 0 0 var(--ac)}
.kd-frist{font-size:12px;color:var(--tx-3)}
tr[data-spaet=ja] .kd-frist{color:var(--ac-auf-bg);font-weight:600}
.kd-stand{display:flex;align-items:center;gap:var(--s2);font-size:12px}
.kd-stand .bar{width:56px;height:6px;flex:none}
.kd-zahl{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* Der Kasten der überfälligen Schritte ist der einzige Ort, an dem das Warnband
   eine Liste trägt — deshalb hier die Aufzählung, nicht in der Grundregel. */
.kd-ueber ul{margin:var(--s3) 0 0;padding-left:1.2em;display:grid;gap:6px}
.kd-ueber li{line-height:1.5}
.kd-ueber .tk-hinweis{margin:var(--s3) 0 0;color:var(--ac-auf-bg)}
/* Aufklappbares Fach: Kopf zum Überfliegen, Rumpf zum Ändern. Der Rumpf erbt das
   Innenmaß der Karte, damit Formular und Kopf auf einer Linie stehen. */
.kd-rumpf{padding:0 var(--s5) var(--s5)}
.kd-fach summary .pill,.kd-fach summary .dim{font-weight:400;margin-left:var(--s2)}
/* Login und Passwortmanager sind von außen erreichbar, ohne aufzuklappen: wer den
   Zugang braucht, will nicht erst ein Formular sehen. */
.kd-wege{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:1px solid var(--hair);margin-bottom:var(--s4)}
/* Mehrfachauswahl: die Feldregel oben setzt 40 px Mindesthöhe und Innenabstand
   nur waagerecht — bei size=4 muss die Höhe von den Zeilen kommen. */
.kd-mehr{min-height:0;height:auto;padding:var(--s2) var(--s3)}
/* Der Zustand des letzten Tests, ehrlich: „nein" ist die Regel, solange keine
   Schnittstelle hängt, und trägt deshalb den ruhigen Warnton, nicht Rot. Grün
   gibt es nur für ein echtes ok — der Server kann es heute nicht liefern. */
.kd-testzeile{margin:var(--s3) 0 0;font-size:13px;line-height:1.55;padding-left:var(--s3);
  border-left:2px solid var(--hair);color:var(--tx-2)}
.kd-testzeile[data-test=ok]{border-left-color:var(--ok);color:var(--ok)}
.kd-testzeile[data-test=nein]{border-left-color:var(--warn2);color:var(--warn2)}

/* Querformat nutzen — Tafelstapel. Einstellungen und Entscheidungen wurden sehr lang;
   sie stehen jetzt zu zweit, Titel und Vorspann über die Breite. Namentlich genannt
   statt an drei Tafeln erkannt: die Zahl der Entscheidungen kommt aus einer Datei,
   das Layout darf nicht an ihr hängen. Verwaltung bleibt draußen, dort stehen in den
   Tafeln breite Tabellen. */
@media (min-width:1000px){
  /* Zeilenabstand null, der senkrechte Abstand kommt weiter aus dem margin der
     Tafeln: sonst reißt er auch Etikett–Titel–Vorspann darüber auseinander. */
  [data-seite=einstellungen],[data-seite=entscheidungen]{display:grid;
    grid-template-columns:1fr 1fr;column-gap:var(--s6);row-gap:0;align-items:start}
  [data-seite=einstellungen]>:not(.panel),[data-seite=entscheidungen]>:not(.panel){grid-column:1/-1}
}
.pdfbox{overflow:hidden;background:var(--s-2)}
.pdfbox iframe{width:100%;height:76vh;border:0;display:block;background:#fff}

/* Waagerecht: rechts kann ein „Rückgängig" stehen, siehe .toast-undo. */
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:var(--s4);max-width:min(560px,90vw);
  padding:var(--s3) var(--s4);border-radius:var(--r-ctl);font-size:14px;font-weight:600;
  animation:rise var(--in) both}
.toast.bad{border-color:var(--err);color:var(--err)}

/* 1160 statt 1080: die Gliederung braucht 264 px, darunter bleibt zu wenig. */
@media (max-width:1160px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .toc{position:static;max-height:none;border-bottom:1px solid var(--hair);padding-bottom:var(--s3)}
  .toc ol{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:var(--s2)}
  .toc a{border-left:0;border-bottom:2px solid transparent;margin:0}
  .toc a.here{border-left:0;border-bottom-color:var(--ac)}
}

/* ── Aufgaben je Rolle */
.nav a .dot,.glocke-zahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px}
.nav a .dot{margin-left:auto}
/* Zwei Karten nebeneinander: gleicher Inhalt, halbe Seitenlänge. Unter 940 px
   fällt es von selbst auf eine Spalte, min(100%,…) verhindert Überlauf mobil. */
.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));
  gap:var(--s3);margin:var(--s4) 0 var(--s8)}
.task{display:flex;gap:var(--s4);padding:var(--s4);
  transition:border-color var(--in),background var(--in),opacity var(--in)}
.task:hover{border-color:var(--hair-2)}
a.task{cursor:pointer;align-items:flex-start}
a.task:hover{background:var(--ctl-hover)}
a.task::after{align-self:center}
.task.done{opacity:.58}
.task.done .task-body>b{text-decoration:line-through;text-decoration-thickness:1px}
.tick-btn,.tour-list .n{border:1px solid var(--hair-2)}
.tick-btn{width:26px;height:26px;margin-top:2px;background:transparent;color:transparent;
  cursor:pointer;font-size:14px;line-height:1;
  transition:background var(--in),border-color var(--in),color var(--in)}
.tick-btn:hover{border-color:var(--ac);background:var(--ac-bg)}
.tick-btn[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:#fff}
.tick-btn:disabled{cursor:progress}
.task-body{min-width:0;flex:1}
.task-body>p{margin:var(--s2) 0 0;font-size:14px;line-height:1.55;color:var(--tx-2)}
.task-meta,.ls-ziele{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.task-meta{margin-top:var(--s3)}
a.task .tick-btn{font-size:15px}

/* ── Erstlogin-Tour */
.tour{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--s6);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)}
.tour-card{width:100%;max-width:560px;overflow:hidden;animation:tourIn 200ms var(--ease)}
@keyframes tourIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.tour-head{align-items:center;gap:var(--s3);padding:var(--s4) var(--s6)}
.tour-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#0A0A0A}
.tour-mark img{width:18px;display:block}
.tour-steps{display:flex;gap:5px;margin-left:var(--s2)}
.tour-steps i{width:18px;height:3px;border-radius:2px;background:var(--hair-2);
  transition:background var(--in)}
.tour-steps i.on{background:var(--ac)}
.tour-head .btn{margin-left:auto}
.tour-body{padding:var(--s8) var(--s6) var(--s6)}
.tour-body .kicker{margin:0 0 var(--s2)}
.tour-body h2{font-size:26px;letter-spacing:-.022em;margin:0 0 var(--s3)}
.tour-body p{margin:0 0 var(--s4);font-size:16px;line-height:1.6;color:var(--tx-2)}
.tour-body p:last-child{margin-bottom:0}
.tour-body label{display:block;margin:0 0 var(--s3);font-size:12px;color:var(--tx-3)}
.tour-body input{margin-top:var(--s1)}
.tour-body .kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  border-radius:6px;font-family:var(--mono);font-size:12px}
.tour-foot{gap:var(--s4);padding:var(--s4) var(--s6);background:var(--s-2)}
.tour-btns{margin-left:auto;display:flex;gap:var(--s2)}
.tour-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.tour-list li{display:flex;gap:var(--s3);font-size:14px;line-height:1.55;color:var(--tx-2)}
.tour-list b{color:var(--tx)}
.tour-list .n{width:20px;height:20px;font-size:11px;font-weight:600;color:var(--tx-3)}

/* ── Vorlagen-Formular */
.fld{display:block;margin:0 0 var(--s6)}
.fld-l{display:block;margin-bottom:var(--s2);font-size:14px;font-weight:600;color:var(--tx)}
.fld-l .dim{font-weight:400}
.fld-h{display:block;margin-top:var(--s2);font-size:13px;line-height:1.5;color:var(--tx-2)}
/* Breite, Schrift und Rahmen kommen aus der Feldregel oben. */
.fld textarea{min-height:84px;resize:vertical;line-height:1.6}

/* ── Meldungsverlauf */
.verlauf{display:flex;flex-direction:column;gap:var(--s3)}
.msg{padding:var(--s4)}
.msg.mein{border-color:var(--ac-line);background:var(--ac-bg)}
.msg-kopf{display:flex;gap:var(--s3);align-items:baseline;margin-bottom:var(--s2)}
.msg-kopf b{font-size:14px}
.msg-kopf span{font-size:12px;margin-left:auto}
.msg p,.docwarn p{margin:0;font-size:15px;line-height:1.6;color:var(--tx-2)}
.msg p{white-space:pre-wrap;max-width:74ch}

/* ── Warnung im Dokumentkopf */
.docwarn{margin:var(--s6) 0 0;padding:var(--s4) var(--s6);border-radius:12px;
  border:1px solid var(--warn);background:var(--warn-bg)}
.docwarn h2{font-size:16px;margin:0 0 var(--s2)}
.docwarn small{display:block;margin-top:var(--s2);font-size:12px;color:var(--tx-2)}

/* ── Ladeplatzhalter in der Form des Inhalts
   Kein Spinner: ein Kreisel, der aufblitzt, wirkt langsamer als Stille. */
.sk{border-radius:6px;background:var(--s-2);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--hair),transparent);
  animation:skWisch 1100ms var(--ease) infinite}
@keyframes skWisch{to{transform:translateX(100%)}}
.sk-kicker{width:120px;height:11px;margin:0 0 var(--s4)}
.sk-titel{width:min(420px,70%);height:30px;margin:0 0 var(--s4)}
.sk-lede{width:min(620px,92%);height:15px;margin:0 0 var(--s8)}
.sk-zeile{height:13px;margin:0 0 var(--s3)}

/* ── Rückgängig in der Meldung */
kbd,.tour-body .kbd,.toast-undo{border:1px solid var(--hair-2);color:var(--tx)}
.toast-undo{background:transparent;border-radius:8px;
  font:inherit;font-size:12px;font-weight:600;padding:4px 10px;cursor:pointer;
  white-space:nowrap;transition:border-color var(--in)}
.toast-undo:hover{border-color:var(--ac-auf-bg)}

/* ── Tastenkürzel-Tafel */
#kuerzel .box{max-width:660px;padding:0}
.kuerzel-kopf{align-items:baseline;gap:var(--s4);padding:var(--s4) var(--s6)}
.kuerzel-kopf b{font-size:14px}
.kuerzel-kopf .dim{margin-left:auto;font-size:12px}
.kuerzel-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s8);padding:var(--s6)}
.kuerzel-raster dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:var(--s3) 0 0}
.kuerzel-raster dd{margin:0;font-size:13px;color:var(--tx-2);line-height:1.5}
kbd{display:inline-block;min-width:22px;font-size:11px;text-align:center;white-space:nowrap}
.hit-kbd{margin-left:auto;align-self:center}
.hit.befehl{display:grid;grid-template-columns:1fr auto;align-items:center}
.hit.befehl small{grid-column:1}

/* ── Zeile, die per j/k ausgewählt ist */
/* Volle Akzentfarbe statt halbtransparenter Linie: die alte Auswahl lag bei
   1,5:1 und war damit praktisch unsichtbar. WCAG 1.4.11 verlangt 3:1. */
.liste-an{outline:2px solid var(--ac);outline-offset:2px;border-radius:8px}

/* ── Weiche Übergänge zwischen Ansichten.
   Nativ im Browser, keine Fremdbibliothek. Nur Deckkraft und ein winziger
   Versatz — Bewegung soll die Änderung erklären, nicht sich selbst zeigen. */
::view-transition-old(root){animation:vtRaus 120ms var(--ease) both}
::view-transition-new(root){animation:vtRein 180ms var(--ease) both}
@keyframes vtRaus{to{opacity:0}}
@keyframes vtRein{from{opacity:0;transform:translateY(6px)}}

/* Alles Laufende an einem Ort. Mit den Kennungen, sonst verliert es gegen die
   Regeln darüber. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  .ls-punkt[data-online],.nav-punkt,[data-drin] .mt-min::before,
  .tz-tag[data-drin]::before{animation:none}
  .sk::after{animation:none}   /* eigene Zeile: die Prüfung sucht genau sie */
}

/* ── Onboarding-Fortschritt: Kapitelliste zum Aufklappen
   Festes Raster statt Flex: alle sechs Angaben stehen in jeder Zeile an derselben
   Stelle, man liest spaltenweise nach unten. Balken und Prozent bleiben auch leer. */
.kapitelliste{margin:var(--s6) 0;overflow:hidden}
.kapitelblock+.kapitelblock{border-top:1px solid var(--hair)}
.kapitelzeile{display:grid;grid-template-columns:16px 24px minmax(0,1fr) auto 104px 46px;
  align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);
  border:0;background:none;text-align:left;cursor:pointer}
.kapitelzeile,.dokzeile,.glockenzeile{transition:background var(--in)}
.kapitelzeile:hover,.dokzeile:hover,.glockenzeile:hover{background:var(--ctl-hover)}
/* Ring nach innen, sonst kappt ihn das overflow:hidden der Liste. */
.kapitelzeile:focus-visible,.dokzeile:focus-visible,.glockenzeile:focus-visible{outline-offset:-3px}
/* Nur der Pfeil dreht; das Fach schaltet über [hidden]. */
.kz-pfeil{font-size:17px;line-height:1;color:var(--tx-3);transition:transform var(--out)}
[aria-expanded=true] .kz-pfeil{transform:rotate(90deg)}
.kz-nr{font-size:12px;font-weight:600;color:var(--tx-3)}
.kz-titel,.fs-name{font-size:16px;font-weight:600;letter-spacing:-.014em}
.kz-balken .bar{width:100%;height:4px}
.kz-pct{font-size:13px;font-weight:600;color:var(--tx-2);text-align:right}
/* Rot heißt „noch nicht", grün „erledigt" — die zwei Aussagen, um die der Kunde
   gebeten hat. Alle offenen Zustände tragen dasselbe Rot (Regel oben bei .pill.ac),
   wie weit einer ist sagen Wort und Balken. Getönt, nicht gefüllt: sieben
   Vollflächen wären eine Warnwand. Ohne Pflicht bleibt nur das Wort — als Schild
   war „nichts zu tun" das Auffälligste der Liste. */
[data-zustand=keine-pflicht] .pill{border-color:transparent;background:transparent}
/* Ein Fach, keine zweite Liste: zurückgesetzte Fläche, kein eigener Rahmen. Rot
   bleibt oben, zwei Dutzend rote Ringe wären der Weihnachtsbaum. Einzug 40 statt
   48, weil die Zeile 8 px eigene Luft mitbringt: 40+8+20+12 sind die 80 px, bei
   denen auch der Kapiteltitel darüber anfängt. */
.kapitelfach{background:var(--s-2);padding:var(--s2) var(--s4) var(--s3) 40px}
.dokzeile{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:baseline;
  gap:var(--s3);padding:var(--s1) var(--s2);border-radius:8px}
.dz-haken{font-size:13px;text-align:center;color:var(--tx-3)}
[data-gelesen=ja] .dz-haken{color:var(--ok)}
.dz-titel{font-size:14px;line-height:1.5}
[data-gelesen=ja] .dz-titel{color:var(--tx-2)}
.dz-min,.gz-zeit,.ls-stand{font-size:12px;color:var(--tx-3)}
.dokzeile:last-child :is(.dz-haken,.dz-titel){color:var(--ac-auf-bg)}

/* ── Glocke und Ansichtswähler
   .glocke ist der Anker, .ansicht derselbe Anker für den zweiten Knopf im Kopf
   — ein Fachbauteil, zwei Auslöser. Bewusst kein display auf .glockenfach: die
   Zeilen sind selbst Raster, der Behälter bleibt Block, und der Streit mit
   [hidden], der hier einen halben Tag kostete, entsteht gar nicht. */
.glocke,.ansicht{position:relative;flex:none}
.glocke-zahl{position:absolute;top:0;right:0}
.glockenfach{position:absolute;top:calc(100% + var(--s2));right:0;z-index:12;
  width:min(340px,calc(100vw - var(--s8)));overflow:hidden;border-radius:var(--r-card)}
.glockenzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);
  padding:var(--s2) var(--s4);border-bottom:1px solid var(--hair);
  border-left:2px solid transparent}
.glockenzeile[data-neu=ja]{border-left-color:var(--ac)}
.gz-titel{font-size:14px;font-weight:600;line-height:1.4;color:var(--tx-2)}
[data-neu=ja] .gz-titel{color:var(--tx)}
.gz-zeit{grid-column:1}
.glockenzeile:last-child{border-bottom:0;background:var(--s-2)}
.glockenzeile:last-child .gz-zeit{grid-column:2;align-self:center}

/* ── Abschlussfragen
   Die ganze Zeile ist die Antwort, nicht der Knopf davor; angekreuzt trägt sie die
   Akzentfläche. Ein legend im Rahmenspalt reißt die Kante auf — als Float bleibt
   sie zu, dafür räumt das nächste Element auf. */
[data-seite=fragen] form{max-width:var(--read)}
fieldset.panel{min-width:0}
.panel>legend{float:left;width:100%;padding:0;margin:0 0 var(--s4);
  font-size:17px;line-height:1.45;letter-spacing:-.01em;color:var(--tx)}
.panel>legend+*{clear:both}
.wahl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3);
  margin:0 0 var(--s2);padding:var(--s2) var(--s4)}
.wahl:hover{background:var(--ctl-hover)}
.wahl:has(:checked){border-color:var(--ac);background:var(--ac-bg)}
/* Ring um die Zeile, nicht um den Knopf; die Feldregel oben gibt input 100 %. */
.wahl:has(:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.wahl input{width:18px;height:18px;min-height:0;padding:0;border:0;background:none;
  accent-color:var(--ac)}
.wahl input:focus-visible{outline:none;box-shadow:none}
/* Rot bringt .b-note oben schon mit: „noch nicht" ist der Regelfall. */
.rueckmeldung{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);font-size:14px;line-height:1.55}
.rueckmeldung[data-richtig=ja]{border-left-color:var(--ok);background:var(--ok-bg)}

/* ── Schmale Bildschirme: fünf verstreute Blöcke, jetzt zwei am Ende. Nicht nur
   Ordnung — das mobile Raster der Kapitelzeile stand vor der Grundregel und hat
   nie gegriffen. */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;width:var(--side);transform:translateX(-100%);
    z-index:30;transition:transform var(--page)}
  .side.open{transform:none}
  .burger{display:grid;place-items:center;min-width:44px;min-height:44px}
  .view{padding:var(--s6) var(--s4) var(--s16)}
  .display{font-size:32px;letter-spacing:-.026em}
  /* Unter 28 px zurück auf 600. Der Dokumenttitel schrumpft hier erstmals mit:
     31 px waren auf 390 px dreizeilig und fett zugleich. */
  .t1,.dochead h1,.login-card h1,.team-kopf h1{font-size:26px;font-weight:600}
  .chain .link{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .chain .link .sla{text-align:left}
  .btn,.row,.hit,.kapitelzeile,.dokzeile,.glockenzeile,.wahl,input.zz-wert,
  .schalter-knopf{min-height:44px}
  /* Das Auge sitzt IM Feld, also wächst das Feld mit — sonst bliebe der Knopf
     bei 38 px und wäre das einzige zu kleine Ziel im Anmeldebildschirm. */
  .pw-feld input{min-height:46px}
  .pw-auge{width:46px}
  .pw-feld input{padding-right:48px}
  /* Balken raus, bevor der Titel zu Ellipsen wird; Wort und Prozent genügen. */
  .kapitelzeile{grid-template-columns:16px 24px minmax(0,1fr) auto 46px}
  .kz-balken{display:none}
  /* Die Kopfleiste ist am Telefon voll: „intern" gegen „Kunden" trägt dieselbe
     Aussage wie „MemberBoost intern" gegen „Kunden". */
  .bereich-knopf .lang{display:none}
  /* Am Telefon zählen Name, Status und der nächste Schritt. Produkte, Betreuung
     und Phasenstand fallen weg, statt die Tabelle waagerecht scrollen zu lassen —
     dieselbe Entscheidung wie beim Balken der Kapitelzeile. */
  .kd-tabelle th:nth-child(3),.kd-tabelle td:nth-child(3),
  .kd-tabelle th:nth-child(4),.kd-tabelle td:nth-child(4),
  .kd-tabelle th:nth-child(5),.kd-tabelle td:nth-child(5){display:none}
  .kd-verlauf{height:104px}
}
@media (max-width:640px){
  .ob-zeile{grid-template-columns:minmax(0,1fr) 44px}
  .ob-zeile .bar,.ob-kap{display:none}
  .tick-btn{width:44px;height:44px;min-height:44px;margin-top:0}
  .tour{padding:0;place-items:stretch}
  .tour-card{max-width:none;border:0;border-radius:0;display:flex;flex-direction:column}
  .tour-body{flex:1;overflow:auto}
  .tour-foot .btn{min-height:44px}
  .kuerzel-raster{grid-template-columns:1fr}
}

/* ── Drucken: Skripte und Checklisten landen neben dem Telefon auf Papier */
@media print{
  /* Auch die Bedeutungsfarben umstellen: aus dem Dunkelthema gedruckt lagen
     überfällig, geprüft und Fehler bei 2,5 bis 3,3:1 auf Weiß — genau die
     Aussagen, die auf Papier zählen. */
  :root{--bg:#fff;--s-1:#fff;--s-2:#fff;--tx:#111;--tx-2:#333;--tx-3:#666;
    --hair:#ccc;--hair-2:#999;--ac:#B02C18;--ac-auf-bg:#B02C18;
    --ctl:#fff;--ctl-hover:#fff;--ctl-hi:transparent;
    --ok:#33684B;--ok-bg:#eef3f0;--warn:#8A5810;--warn-bg:#f7f1e6;--err:#B4321C;
    --warn2:#73592B;--warn2-bg:#f7f1e6}
  .side,.top,.readbar,.palette,#kuerzel,.toast,.docfoot,.toc,.tour,.skip,.sk,.pdfbox{display:none !important}
  .main{margin:0;padding:0}
  .wrap,.wrap.narrow{max-width:none;padding:0}
  body{background:#fff;color:#111;font-size:11pt}
  .dochead h1{font-size:20pt}
  .b-h,.b-h2,h1,h2,h3{break-after:avoid}
  .b-list li,.b-script>div,.b-tbl tr{break-inside:avoid}
  .b-tbl table{border:1px solid #999}
  .b-tbl thead th{background:#B02C18 !important;color:#fff !important}
  a[href^="#"]::after{content:""}
  .docwarn{border:2px solid #B02C18}
  .dochead::after{content:"MemberBoost Consulting GmbH · gedruckt aus der Onboarding-Plattform";
    display:block;margin-top:8pt;font-size:8pt;color:#666}
  @page{margin:16mm}
}