/* ═══════════════════════════════════════════════════════════════════════
   SmileReply – gemeinsames Stylesheet aller Seiten
   Grundlage: Design v24 von Matteo (Stand 14.10.2026), uebernommen in D1
   (2026-10-19). Regeln: docs/design-regeln.md.

   Klassennamen wie im Prototyp (.btn--primary, .panel, .nav-i …), damit
   sich eine spaetere Fassung Zeile fuer Zeile vergleichen laesst. Neu sind
   nur die Teile, die der Prototyp nicht hat (Anmeldung, Fehlerseiten,
   einfacher Rahmen) - sie sind unten als "neu" markiert.

   Abweichungen vom Prototyp, alle aus der Barrierefreiheit (LIESMICH
   verbindlich; nachgerechnet in docs/design-abgleich.md, 3.8):
   - Farben fuer Text 4.5:1 gegen Weiss, Seiten- und Auswahlflaeche:
     --tx-3, --ok, --warn, --danger dunkler (Werte unten, alter Wert daneben)
   - ein sichtbarer Fokusring an ALLEN bedienbaren Elementen (--focus, 3:1)
   - Klickziele mindestens 32px (.btn--sm, .ibtn)
   - keine Schrift unter 11px

   Nicht hier: Seitenbezogenes liegt in static/<app>/ der jeweiligen App.
   Kein @import, keine Adresse eines fremden Servers, kein data: - die CSP
   der Postfach-Seite laesst nur 'self' zu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ Schriften: eigene Dateien, Lizenz daneben (static/fonts/OFL-*.txt) ══ */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-500.f95b8f975304.woff2") format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/manrope-600.58d382c3e448.woff2") format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700.ed9e261b92db.woff2") format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/manrope-800.63c74bc8894a.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-400.caf0dfde4e44.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-500.a21e038a03f7.woff2") format('woff2')}

/* ══ Variablen (helles Design) ══ */
:root{
  --navy:#0C2055; --navy-2:#152D6B; --navy-3:#1B356F;
  --blue:#0047DB; --blue-2:#1A5FF0; --blue-soft:#EAF1FF; --sky:#7EA0FF;
  --bg:#F6F9FD; --surface:#FFF; --soft:#F1F5FB;
  --border:#DCE5F2; --border-2:#B9C9E2;
  --tx:#122252; --tx-2:#3D4E75;
  --tx-3:#5F6E8E;                       /* Prototyp #6B7CA0: 3.7:1 */
  --ok:#0E7C4E; --ok-soft:#E4F5EC;      /* Prototyp #12915B: 3.5:1 */
  --ok-bd:#BFE6D3;
  --warn:#A65800;                       /* Prototyp #B25E00: 4.1:1 */
  --warn-soft:#FFF4E0; --warn-bd:#F3D9A4;
  --danger:#CB3434; --danger-soft:#FDF0F0;   /* Prototyp #D93838: 4.1:1 */
  --danger-bd:#F5CFCF;
  /* Fokusring: 3:1 gegen alle Flaechen, auch die dunkle Kopfleiste.
     Der Prototyp nahm --sky (2.2:1 auf Weiss); --sky bleibt fuer
     Rahmen beim Ueberfahren, die keinen Kontrast brauchen. */
  --focus:#6B87D8;
  --r-s:8px; --r-m:10px; --r-l:16px;
  /* Gemeinsames Abstandsmass zwischen Bloecken (Feld, Statuszeile, Fortschritt, Knopfzeile) - postfach-freundlich */
  --abstand:16px;
  --f-ui:'Manrope',system-ui,-apple-system,sans-serif; --f-d:'Manrope',sans-serif; --f-m:'JetBrains Mono',monospace;
  --sh-1:0 1px 2px rgba(4,18,59,.05); --sh-2:0 6px 18px rgba(4,18,59,.10); --sh-3:0 16px 40px rgba(4,18,59,.16);
  --ui-zoom:1;
  /* Markierungen (Schreiben, Schritt 6): die fuenf Farben des Vorgaengers,
     Toene aus dem Prototyp (FLAGS/FLAGPAL). Nur Flaechen und Symbole - kein Text. */
  /* Postfach (inbox/static/inbox/css/mailbox.css): alle Farben hier, damit sie
     zentral bleiben (praxis-verwalten-ordnung). Text auf dunkler Flaeche,
     ungelesene Zeile, Kopf der Assistent-Spalte, Rahmen beim Ueberfahren. */
  --tx-inv:#fff; --blue-bd:#C9DBFA; --unread:#F7FAFF; --unread-hover:#EFF5FF; --assist-top:#EEF4FF;
  --ring-dark:rgba(0,0,0,.1);
  /* Textmarker im Editor und Hervorhebung von Luecken/Platzhaltern - nur Flaechen. */
  --mark-gelb:#fff176; --mark-rot:#ff8a80; --mark-blau:#82b1ff; --mark-platzhalter:#ffcdd2;
  --flag-orange:#F97316; --flag-red:#E5484D; --flag-blue:#2F7DD4; --flag-green:#2DB36A; --flag-purple:#8B5CF6;
}

/* ══ Darstellung ueber Klassen am <html> (docs/design-regeln.md, 3) ══
   Der Server schreibt die Klassen beim Ausliefern; kein Skript im Kopf.
   Bis nach dem Umzug fest "theme-hell zoom-normal" (templates/base.html).
   - Schriftgroesse: die beiden Stufen sind hier schon vorgesehen.
   - Dunkles Design (html.theme-dunkel, html.theme-system): nach dem
     Umzug. Dann kommen die dunklen Werte aus dem Prototyp hierher, als
     Variablen an html.theme-dunkel - nicht als body.dark-Regeln. */
html.zoom-groesser{--ui-zoom:1.12}
html.zoom-gross{--ui-zoom:1.25}

/* ══ Grundlage ══ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f-ui);font-size:14px;line-height:1.5;background:var(--bg);color:var(--tx)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
a:hover{color:var(--navy)}
svg{flex-shrink:0;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* hidden gilt immer - auch wenn eine Klasse display:flex setzt (sonst blieb
   z. B. die leere Cc-Zeile im Lesebereich stehen, D2). */
[hidden]{display:none!important}
.mono{font-family:var(--f-m)}
.grow{flex:1}
/* Nur fuer Bildschirmleser (z. B. Beschriftung eines Symbol-Knopfs). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ein Fokusring fuer alles Bedienbare - der Prototyp hatte ihn nur an
   .btn und zwei weiteren Stellen. Selektor mit Element, damit er jede
   Klassenregel weiter unten schlaegt. Nie "outline:none" ohne Ersatz. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}

/* ══ Buttons ══ */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-m);font-family:var(--f-d);font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none;
  background-size:100% 200%;background-position:0 0;
  transition:background-position .28s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease}
/* Glanzstreifen, der beim Ueberfahren einmal durchlaeuft */
.btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);opacity:0}
.btn:hover::after{animation:sheen .55s ease-out}
@keyframes sheen{0%{left:-60%;opacity:1}100%{left:115%;opacity:0}}
.btn>*{position:relative;z-index:1}
.btn svg{width:14px;height:14px}
.btn--sm{height:32px;padding:0 10px;font-size:12px;border-radius:var(--r-s)}   /* Prototyp 29px */
.btn--sm svg{width:13px;height:13px}
.btn--block{display:flex;width:100%}                                              /* neu */
.btn--primary{color:#fff;background-image:linear-gradient(180deg,#1E3B84 0%,var(--navy-2) 40%,var(--navy) 70%,#081842 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(4,18,59,.22)}
.btn--primary:hover{color:#fff;background-position:0 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px rgba(4,18,59,.22)}
.btn--primary:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.34)}
.btn--ai{color:#fff;background-image:linear-gradient(180deg,#3C7BFF 0%,var(--blue-2) 40%,var(--blue) 70%,#0038AE 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,71,219,.24)}
.btn--ai:hover{color:#fff;background-position:0 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,71,219,.24)}
.btn--ai:active{box-shadow:inset 0 2px 5px rgba(0,20,80,.38)}
.btn--ok{color:#fff;background-image:linear-gradient(180deg,#22BC7E 0%,#16A368 40%,#0F7C4E 70%,#0A5F3B 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(15,124,78,.22)}
.btn--ok:hover{color:#fff;background-position:0 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(15,124,78,.22)}
.btn--ok:active{box-shadow:inset 0 2px 5px rgba(0,40,20,.36)}
.btn--sec{background-image:linear-gradient(180deg,#fff 0%,#fff 50%,#F3F7FE 55%,#E9F0FC 100%);border-color:var(--border-2);color:var(--tx-2);box-shadow:var(--sh-1)}
.btn--sec:hover{background-position:0 100%;border-color:var(--sky);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(126,160,255,.35),var(--sh-1)}
.btn--sec:active{box-shadow:inset 0 2px 4px rgba(4,18,59,.12)}
.btn--ghost{background:transparent;color:var(--tx-2)}
.btn--ghost:hover{background:var(--soft);color:var(--navy);box-shadow:inset 0 0 0 1px var(--border)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none}
.ibtn{width:32px;height:32px;border:none;background:transparent;border-radius:var(--r-s);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx-3);transition:all .14s}   /* Prototyp 30px */
.ibtn:hover{background:var(--soft);color:var(--tx)}
.ibtn svg{width:15px;height:15px}
.spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ══ Formularfelder ══ */
.inp{height:36px;border:1px solid var(--border-2);border-radius:var(--r-s);padding:0 11px;font-size:13.5px;background:var(--surface);color:var(--tx);font-family:var(--f-ui);width:270px;max-width:100%}
.inp.mono{font-family:var(--f-m);font-size:12.5px}
.inp--voll{width:100%}                                                            /* neu */
textarea.inp{height:auto;padding:8px 10px;line-height:1.55;resize:vertical;width:100%}
select.inp{width:auto;min-width:150px}
.inp:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(126,160,255,.2)}
.inp::placeholder{color:var(--tx-3)}
/* Beschriftung ueber dem Feld (neu - der Prototyp hat nur Zeilen .sf) */
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--abstand)}
.feld-lbl{font-family:var(--f-d);font-size:12.5px;font-weight:700;color:var(--tx-2)}
.feld-hilfe{font-size:12px;color:var(--tx-3)}
.feld-fehler{display:block;font-size:12.5px;color:var(--danger)}                  /* Meldung des Servers am Feld (W-64) */
.feld-fehler:empty{display:none}
/* Leerer Zustand und kurzer Hinweis im Fliesstext (frueher in mailboxes.css, jetzt auf allen Verwaltungsseiten) */
.leer{color:var(--tx-3)}
.t-hinweis{font-size:12px;color:var(--tx-3)}

/* ══ Panels, Zeilen, Marken ══ */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin-bottom:15px}
.panel-h{font-family:var(--f-d);font-size:12.5px;font-weight:800;padding:12px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.prow{display:flex;align-items:center;gap:12px;padding:11px 17px;border-bottom:1px solid var(--border);font-size:13px}
.prow:last-child{border-bottom:none}
.prow .t{font-family:var(--f-m);font-size:11px;color:var(--tx-3);margin-left:auto}
/* Fliesstext in einem Panel (neu - der Prototyp hat dort nur Zeilen) */
.panel-b{padding:14px 17px;font-size:13px;line-height:1.55;color:var(--tx-2)}
.panel-b+.panel-b{padding-top:0}
.panel--hervor{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
/* Gefaehrliche Aktion (Trennen): wie .btn--sec, Schrift rot (neu) */
.btn--dg{color:var(--danger)}
.btn--dg:hover{color:var(--danger);border-color:var(--danger-bd);background:var(--danger-soft)}
/* Zeile mit langem Text und Knoepfen bricht auf schmalen Bildschirmen um statt quer zu
   scrollen (375 px; seit Stufe 10.3 gemeinsam, vorher nur in mailboxes.css). */
.prow .grow{min-width:0;overflow-wrap:anywhere}
.prow form{display:inline}
@media (max-width:560px){.prow{flex-wrap:wrap}}
.pnote{padding:11px 17px;font-size:12px;color:var(--tx-3);line-height:1.5;border-top:1px solid var(--border);background:var(--soft)}
.sf{display:flex;align-items:center;gap:14px;padding:12px 17px;border-bottom:1px solid var(--border);font-size:13px}
.sf:last-child{border-bottom:none}
.sf .sl{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sf .sl small{font-size:11.5px;color:var(--tx-3);line-height:1.45}
.bdg{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;flex-shrink:0}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-dg{background:var(--danger-soft);color:var(--danger)}
.b-n{background:var(--soft);color:var(--tx-3)}

/* ══ Hinweise und Meldungen nach einer Aktion (neu, Farben wie .bdg/.pnote) ══
   Die Rolle setzt das Template: role="alert" fuer Fehler, sonst
   role="status" - der Prototyp-Toast hatte keine (Befund 4). */
.meldungen{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.meldungen:not(:has(li)){display:none}                                          /* nur Meldungen am Feld: nichts oben */
.hinweis{padding:11px 15px;border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);font-size:13px;line-height:1.5;color:var(--tx-2)}
.hinweis--ok{background:var(--ok-soft);border-color:var(--ok-bd);color:var(--ok)}
.hinweis--warn{background:var(--warn-soft);border-color:var(--warn-bd);color:var(--warn)}
.hinweis--fehler{background:var(--danger-soft);border-color:var(--danger-bd);color:var(--danger)}

/* ══ Dialog (Rueckfrage) - wie .modal im Prototyp, als <dialog> ══ */
dialog.modal{border:none;border-radius:var(--r-l);width:calc(100% - 32px);max-width:460px;padding:22px;margin:80px auto auto;box-shadow:var(--sh-3);background:var(--surface);color:var(--tx)}
dialog.modal::backdrop{background:rgba(4,18,59,.45)}
.modal h3{font-family:var(--f-d);font-size:16px;font-weight:800;margin-bottom:5px;overflow-wrap:anywhere}
.modal p{font-size:12.5px;color:var(--tx-2);line-height:1.55;margin-bottom:14px}
.mact{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:13px}

/* ══ Rahmen "app": Kopfleiste, Navigation links, Inhalt ══ */
body.app-body{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.app{flex:1;min-height:0;display:flex;flex-direction:column;zoom:var(--ui-zoom)}
.shell{flex:1;display:flex;flex-direction:row;min-height:0}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

.topbar{height:60px;background:var(--navy);display:flex;align-items:center;gap:14px;padding:0 18px;flex-shrink:0;position:relative;z-index:12}
.topright{display:flex;align-items:center;gap:8px;margin-left:auto}
.acct{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border-radius:999px}
.acct .av{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-d);font-weight:800;font-size:11px}
.acct b{color:#fff;font-size:12.5px;font-weight:600;display:block;line-height:1.25}
.acct span{font-size:11px;color:rgba(255,255,255,.72)}
/* Knopf auf der dunklen Kopfleiste (neu: Abmelden; der Prototyp hat es im Konto-Menue) */
.btn--kopf{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.btn--kopf:hover{background:rgba(255,255,255,.14);border-color:var(--sky);color:#fff}

.col-nav{width:250px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:14px 10px;min-height:0}
.col-nav>*{flex-shrink:0}
.navlogo{display:flex;align-items:center;justify-content:center;height:58px;padding:6px 4px 16px;box-sizing:content-box}
.navlogo img{height:42px;width:auto}
.navkopf{padding:4px 0 14px;border-bottom:1px solid var(--border);margin-bottom:8px}
.navliste{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:8px 10px;border:none;background:none;border-radius:var(--r-s);font-size:13.5px;color:var(--tx-2);cursor:pointer;text-align:left;text-decoration:none;transition:all .14s;position:relative}
.nav-i svg{width:16px;height:16px;color:var(--tx-3)}
.nav-i:hover{background:var(--soft);color:var(--tx)}
.nav-i.on{background:var(--blue-soft);color:var(--navy);font-weight:600;box-shadow:inset 2.5px 0 0 var(--blue)}
.nav-i.on svg{color:var(--blue)}

.view{padding:26px 32px;overflow-y:auto;flex:1}
.view h1{font-family:var(--f-d);font-size:21px;font-weight:800;letter-spacing:-.015em;color:var(--tx)}
.view .vs{font-size:12.5px;color:var(--tx-3);margin:3px 0 20px}

/* ══ Rahmen "einfach": Anmeldung, Fehlerseiten, Zustimmung (neu) ══
   Aufbau wie die Karte .cons des Prototyps: eine Karte mittig auf der
   Seitenflaeche, Logo oben. */
.einfach{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10vh 16px 32px;zoom:var(--ui-zoom)}
.karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-3);width:100%;max-width:420px;padding:28px 30px 26px}
.karte--breit{max-width:580px}
.karte-logo{display:block;height:36px;width:auto;margin-bottom:22px}
.karte h1{font-family:var(--f-d);font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--tx);margin-bottom:6px}
.karte .sub{font-size:13px;color:var(--tx-3);line-height:1.55;margin-bottom:20px}
.karte p{font-size:13.5px;line-height:1.6;color:var(--tx-2)}
.karte p+p{margin-top:10px}
.karte .hinweis{margin-bottom:16px}
.karte-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.karte-fuss form{display:inline}
.fehlercode{font-family:var(--f-m);font-size:11px;font-weight:500;color:var(--tx-3);letter-spacing:.04em;margin-bottom:8px}
.fehlertext{font-size:13.5px;line-height:1.6;color:var(--tx-2);max-width:560px}
.unter-karte{margin-top:16px;font-size:12px;color:var(--tx-3);text-align:center}

/* Passwortfeld mit Knopf "Anzeigen" im Feld (Anmeldung) */
.pw-feld{position:relative}
.pw-feld .inp{padding-right:100px}
.pw-feld .pw-toggle{position:absolute;right:2px;top:2px}

/* ══ Band "ENTWICKLUNGS-POSTFACH" (graph/dev/): nicht zu uebersehen ══
   Fehlt im Design (Abgleich 4.2); Farben wie bisher, Kontrast 9.5:1. */
.dev-band{padding:8px 24px;text-align:center;font-size:13px;color:#3d2c00;flex-shrink:0;
  background:repeating-linear-gradient(-45deg,#ffd54f,#ffd54f 16px,#ffca28 16px,#ffca28 32px);
  border-bottom:2px solid #b58900}
.dev-band strong{letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Schmale Bildschirme: Navigation ueber dem Inhalt statt daneben. */
@media (max-width:760px){
  body.app-body{height:auto;overflow:visible}
  .shell{flex-direction:column}
  .col-nav{width:auto;border-right:none;border-bottom:1px solid var(--border)}
  .navlogo{height:auto;padding:0 0 10px}
  .view{padding:20px 16px}
  .acct b,.acct span{display:none}
  .karte{padding:22px 18px}
}

/* ══ Hinweis unten rechts (static/js/sr.js, wie .toast im Prototyp) ══ */
.toast{position:fixed;bottom:24px;right:24px;max-width:min(420px,calc(100% - 48px));background:var(--navy);color:#fff;padding:12px 17px;border-radius:var(--r-m);font-size:13px;font-weight:600;box-shadow:var(--sh-3);opacity:0;transform:translateY(12px);transition:opacity .26s,transform .26s;z-index:500;pointer-events:none}
.toast.on{opacity:1;transform:translateY(0)}
.toast--fehler{background:var(--danger)}
/* ══ Bauteile der Verwaltungsseiten (praxis-verwalten-ordnung, 2026-10-25) ══
   Entwurf angenommen (docs/stufe6-plan.md 5.11); Template-Teile in
   templates/partials/ (_reiter, _statuszeile, _frage, _chips, _mehr,
   _eigene_angabe, _fortschritt). Alles ohne Skript bedienbar; der Fokusring
   kommt aus der gemeinsamen :focus-visible-Regel oben (auch fuer summary). */

/* Reiter: Seitennavigation - <nav> mit Links und aria-current="page", keine
   ARIA-Tabs (jeder Reiter ist eine eigene Seite). Ersetzt .k-reiter, dessen
   aktiver Reiter var(--primary) nutzte - die Variable gab es nicht. */
.reiter{display:flex;gap:2px;margin:4px 0 14px;border-bottom:1px solid var(--border);overflow-x:auto}
.reiter a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;font-family:var(--f-d);font-size:13.5px;font-weight:700;color:var(--tx-2);text-decoration:none;white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.reiter a:hover{color:var(--navy);border-bottom-color:var(--border-2)}
.reiter a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--blue)}

/* Statuszeile: EINE Zeile oben statt mehrerer Kaesten - ein Zustand (Punkt
   und Satz, nie nur Farbe), kurze Angaben, hoechstens eine Aktion rechts. */
.statuszeile{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:44px;padding:8px 14px;margin-bottom:var(--abstand);border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);font-size:13px;color:var(--tx-2)}
.statuszeile-zustand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--tx)}
.statuszeile-zustand::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tx-3);flex-shrink:0}
.statuszeile--ok .statuszeile-zustand::before{background:var(--ok)}
.statuszeile--warn{border-color:var(--warn-bd);background:var(--warn-soft)}
.statuszeile--warn .statuszeile-zustand{color:var(--warn)}
.statuszeile--warn .statuszeile-zustand::before{background:var(--warn)}
.statuszeile-teil{display:inline-flex;align-items:center;gap:6px}
.statuszeile-teil::before{content:"·";color:var(--tx-3)}
.statuszeile-aktion{margin-left:auto}

/* Abschnitt: einklappbare Gruppe als <details>. Im Kopf Titel (Text, keine
   Ueberschrift - im summary verliert sie in manchen Bildschirmlesern die
   Rolle; entschieden 2026-10-25), eine Zeile Stand, rechts eine Marke. Alle
   starten zu; "open" setzt der Server nur fuer Abschnitte mit Fehler oder den
   per ?abschnitt= angesprungenen (p_management/abschnitte.py) - zugeklappt
   ist nie ein Fehler versteckt. Kein Hervorheben per Rahmenfarbe. */
.abschnitt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);margin-bottom:10px}
.abschnitt>summary{list-style:none;display:grid;grid-template-columns:1fr auto 20px;align-items:center;gap:4px 12px;min-height:56px;padding:10px 17px;cursor:pointer;border-radius:var(--r-l)}
.abschnitt>summary::-webkit-details-marker{display:none}
.abschnitt>summary:hover{background:var(--soft)}
.abschnitt[open]>summary{border-bottom:1px solid var(--border);border-radius:var(--r-l) var(--r-l) 0 0}
.abschnitt-titel{font-family:var(--f-d);font-size:14.5px;font-weight:800;color:var(--tx)}
.abschnitt-stand{grid-column:1;font-size:12.5px;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abschnitt>summary .bdg{grid-column:2;grid-row:1 / span 2}
.abschnitt-pfeil{grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.abschnitt[open]>summary .abschnitt-pfeil{transform:rotate(-135deg);margin-top:4px}
.abschnitt-inhalt{padding:4px 17px 16px}
.abschnitt-inhalt>.panel-b,.abschnitt-inhalt>.prow,.abschnitt-inhalt>.sf,.abschnitt-inhalt>.postfach,.abschnitt-inhalt>.pnote{margin-left:-17px;margin-right:-17px}
.abschnitt-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 17px;border-top:1px solid var(--border);background:var(--soft);border-radius:0 0 var(--r-l) var(--r-l)}
.abschnitt--fehler{border-color:var(--danger)}
/* Ueberschrift ueber mehreren Abschnitten (z. B. "Verhaltensregeln") */
.teil-titel{font-family:var(--f-d);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin:22px 4px 8px}
.teil-titel:first-of-type{margin-top:6px}

/* Frage: <fieldset> - Legende, EINE Zeile Erklaerung, "Mehr dazu", Auswahl,
   "+ Eigene Angabe". Keine internen Kennungen (H1, F1) auf der Seite. */
.frage{border:0;margin:0;padding:16px 0;border-bottom:1px solid var(--border);display:grid;gap:8px;min-width:0}
.frage:last-child{border-bottom:0;padding-bottom:4px}
.frage>legend{float:left;width:100%;padding:0;font-size:14px;font-weight:700;color:var(--tx)}
.frage>legend+*{clear:both}
.frage-kurz{font-size:12.5px;color:var(--tx-3);margin:0}
.frage-marke{margin-left:8px;font-size:11px;font-weight:700;color:var(--warn)}
.frage-art{margin-left:6px;font-size:12px;font-weight:600;color:var(--tx-3)}
.frage[hidden]{display:none}
.frage--fehler{background:var(--danger-soft);margin:0 -17px;padding-left:17px;padding-right:17px}
.frage-fehler{display:block;font-size:12.5px;font-weight:600;color:var(--danger)}
/* Zusatz, der nur zu einer bestimmten Antwort gehoert (Ich-Form -> Person):
   ohne :has() (alte Browser) bleibt er sichtbar - nie unerreichbar. */
.frage-zusatz{display:flex;flex-direction:column;gap:4px;max-width:360px}
@supports selector(:has(*)){
  .frage-zusatz{display:none}
  .frage:has(input[data-zeigt-zusatz]:checked) .frage-zusatz{display:flex}
}

/* Optionszeilen (fragebogen-seiten, Plan 3.1, Sollbilder 2/3/5; partials/_optionen.html) - ersetzen die Chips auf
   "Fragen zur Praxis", im Antwortstil und bei den Stammdaten-Auswahlen. Breite Zeilen untereinander, mindestens 48 px,
   echtes Kaestchen (mehrere) bzw. runder Punkt (eine) - Form, nicht nur Farbe; Tab und Leertaste bedienen jede Zeile,
   der Fokusring liegt an der Zeile. Gewaehlt: Rand und Hintergrund blau, Text fett. "Sonstiges" gestrichelt.
   Die Zusatzangabe steht eingerueckt direkt unter ihrer Option. Nur Variablen. */
.optionen-hinweis{margin:0;font-size:12px;color:var(--tx-3)}
/* minmax(0,1fr): die Spalte darf schmaler werden als ihr breitester Inhalt - sonst ragt bei 375 px die Zeile
   "Eigenen Eintrag hinzufuegen" mit Knopf ueber den Rand (gesehen im Browser). */
.optionen{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.option{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-m);background:var(--surface);font-size:14px;line-height:1.4;color:var(--tx);cursor:pointer;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--sky)}
.option input{flex-shrink:0;width:18px;height:18px;margin:0;accent-color:var(--blue);cursor:pointer}
.option-text{flex:1;min-width:0;overflow-wrap:anywhere}
.option:has(input:checked){border-color:var(--blue);background:var(--blue-soft);font-weight:700;color:var(--navy)}
.option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.option--sonstiges{border-style:dashed}
.option--sonstiges:has(input:checked){border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.option-feld{display:grid;gap:6px;margin:0 0 4px 30px;max-width:640px}
.option-feld[hidden]{display:none}
.option-feld-lbl{font-size:12.5px;font-weight:700;color:var(--tx-2)}
.option-feld-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.option-feld-zeile .inp{width:auto;flex:0 1 200px}
.option-feld-zeile select.inp{flex:0 0 auto;width:auto}
.tage{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--r-m);background:var(--surface);font-size:13.5px;cursor:pointer}
.tag input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.tag:has(input:checked){border-color:var(--blue);background:var(--blue-soft);font-weight:700;color:var(--navy)}
.tag:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.eintraege{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.eintraege-text{display:grid;gap:6px}
.eintraege-text[hidden],.eintraege-liste[hidden],.eintrag-neu[hidden]{display:none}
.eintraege-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.eintrag{display:flex;align-items:center;gap:8px}
.eintrag .option{flex:1;min-width:0}
.eintrag-neu{display:flex;gap:8px}
.eintrag-neu .inp{flex:1;min-width:0}
.chip-zusatz{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}

/* Aufklapper "Mehr dazu": Erklaerung eine Zeile, der Rest hier (<details>).
   Neutral grau wie ein Hinweis (Klicktest 2026-10-25) - kein Blau, keine
   Unterstreichung: eine Hilfe, kein Link. */
.aufklapper>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 4px;margin-left:-4px;font-size:12px;font-weight:600;color:var(--tx-3);cursor:pointer;list-style:none;border-radius:var(--r-s)}
.aufklapper>summary::-webkit-details-marker{display:none}
.aufklapper>summary::before{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.aufklapper[open]>summary::before{transform:rotate(45deg)}
.aufklapper>summary:hover{color:var(--tx-2)}
.aufklapper-inhalt{margin-top:4px;padding:9px 12px;border-radius:var(--r-m);background:var(--soft);font-size:12.5px;line-height:1.55;color:var(--tx-2);display:grid;gap:6px}
.aufklapper-fest{font-weight:600;color:var(--tx)}

/* Eigene Angabe (statt "Sonstiges"): eingeklappt als gestrichelter Chip; mit
   Text oder Status offen (Server setzt "open"). Der Hinweis "pruefen wir
   zuerst" steht EINMAL oben auf der Seite. */
.eigen>summary{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 13px;border:1.5px dashed var(--border-2);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tx-2);cursor:pointer;list-style:none;background:transparent}
.eigen>summary::-webkit-details-marker{display:none}
.eigen>summary:hover{border-color:var(--sky);color:var(--navy);background:var(--blue-soft)}
.eigen[open]>summary{border-style:solid;color:var(--navy)}
.eigen-inhalt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;max-width:640px}
.eigen-inhalt .inp{flex:1 1 280px}
/* fragebogen-feldtyp: Auswahlen (Stunde, Minute) nur so breit wie ihr Inhalt */
.eigen-inhalt select.inp{flex:0 0 auto;width:auto}

/* Fortschritt (Onboarding): natives <progress> plus der Satz als Text. */
.fortschritt{display:grid;gap:6px;margin-bottom:var(--abstand)}
/* Eine Zeile mit Knoepfen zwischen Bloecken (z. B. "Starten" auf /einrichtung/): Abstand nach unten wie jeder Block */
.knopfzeile{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--abstand)}
.fortschritt-zeile{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--tx-2)}
.fortschritt-zeile span{font-weight:600;color:var(--tx-3)}
.fortschritt progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;background:var(--soft);overflow:hidden}
.fortschritt progress::-webkit-progress-bar{background:var(--soft);border-radius:999px}
.fortschritt progress::-webkit-progress-value{background:linear-gradient(90deg,var(--sky),var(--blue));border-radius:999px}
.fortschritt progress::-moz-progress-bar{background:linear-gradient(90deg,var(--sky),var(--blue));border-radius:999px}

/* Speicherleiste: klebt unten, solange das Formular sichtbar ist. */
.speicherleiste{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;margin-top:6px;background:linear-gradient(180deg,rgba(246,249,253,0),var(--bg) 30%);z-index:2}
.speicherleiste-hinweis{font-size:12px;color:var(--tx-3)}

@media (max-width:560px){
  .abschnitt>summary{grid-template-columns:1fr 20px}
  .abschnitt>summary .bdg{grid-column:1;grid-row:auto;justify-self:start}
  .abschnitt-pfeil{grid-column:2}
  .statuszeile-aktion{margin-left:0}
}

/* ══ Gefuehrte Einrichtung (einrichtung-seiten, 2026-10-29) ══
   Rahmen templates/rahmen/gefuehrt.html, Teile partials/_abschnittsliste, _fussleiste, _gefuehrt_kopf, _gefuehrt_felder.
   Nur Variablen von oben, keine neue Farbe (Plan 6). Die Hauptnavigation steht zurueckgenommen in der Kopfleiste: blasser,
   aber lesbar und immer klickbar - keine Sperre (W-56). */
.topnav{display:flex;align-items:center}
.topnav .navkopf{display:none}
.topnav .navliste{flex-direction:row;gap:2px}
/* Zurueckgenommen wird JEDER Eintrag einzeln (Deckkraft am Link, nicht an der Leiste): Hervorgehoben ist nur der unter der Maus
   und der mit Fokus - wie ausserhalb der Einrichtung. Eine Deckkraft an der Leiste hellte beim Darueberfahren alle auf. */
.topnav .nav-i{width:auto;min-height:36px;padding:6px 10px;font-size:12.5px;color:var(--tx-inv);opacity:.62;transition:opacity .14s,background .14s}
.topnav .nav-i svg{color:var(--tx-inv)}
.topnav .nav-i.on{background:none;box-shadow:none;color:var(--tx-inv)}
.topnav .nav-i:hover,.topnav .nav-i:focus-visible{opacity:1;background:var(--navy-2);color:var(--tx-inv)}

/* Linke Liste: je Schritt eine Gruppe, je Seite eine Zeile (Haken oder Nummer, Titel, Zaehler, Minuten) */
.col-liste{width:300px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:14px 12px;min-height:0}
.liste-inhalt{display:grid;gap:14px}
.liste-umschalter{display:none}
.liste-kopf{display:grid;gap:2px}
.liste-kopf .navlogo{justify-content:flex-start;height:auto;padding:0 0 8px}
.liste-titel{font-family:var(--f-d);font-size:18px;font-weight:800;color:var(--tx)}
.liste-sub{font-size:12px;color:var(--tx-3)}
.liste .fortschritt{margin-bottom:0}
.liste-gruppe{display:grid;gap:2px}
.liste-gruppe-titel{padding:6px 8px 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.liste-seite{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:1px 10px;padding:9px 8px;border-radius:var(--r-m);color:var(--tx);text-decoration:none}
.liste-seite:hover{background:var(--soft);color:var(--tx)}
/* einrichtung-ungespeichert: auf Seiten mit Formular ist jeder Eintrag ein Knopf (speichert, dann springt) - sieht aus wie der Link */
button.liste-seite{width:100%;margin:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.liste-seite[aria-current="page"]{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.liste-punkt{grid-row:1 / span 2;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--tx-3)}
.liste-seite--erledigt .liste-punkt{background:var(--ok);border-color:var(--ok);color:var(--tx-inv)}
.liste-seite[aria-current="page"] .liste-punkt{border-color:var(--blue);color:var(--blue)}
.liste-seite--erledigt[aria-current="page"] .liste-punkt{color:var(--tx-inv)}
.liste-name{font-size:13.5px;font-weight:700;line-height:1.3}
.liste-zusatz{font-weight:600;color:var(--tx-3)}
.liste-zahl{font-size:12px;font-weight:700;color:var(--tx-3)}
.liste-min{grid-column:2 / span 2;font-size:11.5px;color:var(--tx-3)}

/* Kopf der Seite: Gruppe als kleine Zeile, Titel, ein Satz */
.gefuehrt-kopf{margin-bottom:18px}
.gefuehrt-gruppe{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.gefuehrt-kopf .vs{margin-bottom:0}
/* Der Abschnitt ist die Seite selbst: ohne Kopfzeile, nicht einklappbar; sonst bleibt die Zeile als Zwischentitel stehen. */
.abschnitt--kopflos{border:0;background:none;margin-bottom:0}
.abschnitt--kopflos>summary{display:none}
.abschnitt--kopflos>.abschnitt-inhalt{padding:0}
.gefuehrt-body .abschnitt>summary{pointer-events:none;cursor:default}
.gefuehrt-body .abschnitt>summary .bdg,.gefuehrt-body .abschnitt>summary .abschnitt-pfeil,.gefuehrt-body .abschnitt>summary .abschnitt-stand{display:none}

/* Fussleiste: Zurueck links, Weiter rechts, fest unten */
.fussleiste{flex-shrink:0;position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 32px;background:var(--surface);border-top:1px solid var(--border)}
.fussleiste-hinweis{margin-left:auto;font-size:13px;font-weight:700;color:var(--danger)}
.fussleiste-weiter{margin-left:auto;min-width:96px}
.fussleiste-hinweis+.fussleiste-weiter{margin-left:0}

/* Fehlende Pflichtangabe nach "Weiter" (?fehlt=1): rot umrandet, darunter ein Satz - nie nur Farbe */
.frage--fehlt{border:1.5px solid var(--danger);border-radius:var(--r-m);padding:14px;margin:6px 0}
.feld--fehlt{border:1.5px solid var(--danger);border-radius:var(--r-m);padding:10px 12px}
.abschnitt--kopflos>.abschnitt-inhalt.feld--fehlt{padding:10px 12px}
.feld-fehlt{display:block;font-size:12.5px;font-weight:700;color:var(--danger)}

@media (max-width:760px){
  .col-liste{width:auto;border-right:none;border-bottom:1px solid var(--border);overflow:visible;padding:8px 16px}
  .liste-umschalter{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:13px;font-weight:700;color:var(--tx);cursor:pointer;list-style:none}
  .liste-umschalter::-webkit-details-marker{display:none}
  .liste-pfeil{width:8px;height:8px;border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);transform:rotate(45deg);margin-top:-3px}
  .liste[open] .liste-pfeil{transform:rotate(-135deg);margin-top:3px}
  .liste .fortschritt{margin-bottom:6px}
  .liste-kopf{display:none}
  .topnav .nav-i span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .topnav .nav-i{padding:6px 8px}
  .fussleiste{padding:10px 16px}
  .gefuehrt-body .app{min-height:100vh}
  .gefuehrt-body .topbar{padding:0 10px;gap:6px}
}