/* Ergänzungen zur Prototyp-CSS für die lauffähige Anwendung.
   Keine Gestaltungsänderungen — nur echte Formulare/Buttons anstelle
   der Klick-Attrappen des Prototyps. */

/* App-Gerüst: Server-Rendering zeigt je Seite genau einen Bereich */
.stageA.active{display:block}
.frame-single{grid-template-columns:1fr}
.sec-live{display:block!important}

/* Links, die im Prototyp <label>-Attrappen waren */
a.custlink{text-decoration:none}
a.inlink{color:var(--link);font-weight:700;cursor:pointer;text-decoration:none}
.bannerlink{color:var(--weiss);text-decoration:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.inlineform{display:inline}
.krow a.k{text-decoration:none}

/* Echte Eingabefelder im Stammdaten-/Erfassungs-Raster */
.frm .f input,.frm .f select{width:100%;font:inherit;font-size:14px;color:var(--ink);
  border:1.4px solid var(--ink);border-radius:12px;padding:9px 13px;background:var(--weiss);outline:none}
.frm .f input:focus,.frm .f select:focus{border-color:var(--link)}
/* Ankreuz- und Auswahlfelder sind keine Eingabezeilen: Die Breitenregel oben
   zog sie bis 25.08.2026 auf volle Spaltenbreite — die Beschriftungen der
   Modulwahl lagen dadurch übereinander. */
.frm .f input[type=checkbox],.frm .f input[type=radio]{width:auto;
  min-width:0;padding:0;border-radius:4px;flex:none}
.frm .f input:disabled,.frm .f select:disabled{background:#f2f2f2;color:var(--muted,#666);
  border-color:#c9c9c9;cursor:not-allowed}
/* Kachel mit Ankreuzfeld (Modulwahl): gewählt gold, offen grau. */
.chipwahl{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #bbb;
  border-radius:10px;padding:7px 13px;cursor:pointer;background:#f7f7f7;
  font-size:14px;font-weight:600;color:var(--muted,#666);user-select:none}
.chipwahl:has(input:checked){border-color:var(--yellow,var(--gold-700));background:#fdf9ef;
  color:var(--ink)}
.chipwahl.vorbereitung{border-style:dashed}
.chipwahl input:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.modulwahl{margin:8px 0 2px}
/* Belegzeile des Monatsbeitrags — Abweichung von der Preisliste wird gemeldet. */
.frm .f .fh.abweichung{color:#8a4b00;font-weight:700}
.frm .f .fh{font-size:11.5px;color:var(--muted);margin-top:3px}
textarea.notiz{width:100%;font:inherit;font-size:14px;color:var(--ink);
  border:1.4px solid var(--ink);border-radius:12px;padding:9px 13px;background:var(--weiss);min-height:70px}

/* Fehlerliste der Pflichtfeldprüfung */
.errbox{background:#FBECEC;border:1px solid var(--rot-600);border-radius:12px;
  padding:12px 16px;margin-bottom:14px;color:#8E1B1B;font-size:14px}
.errbox b{display:block;margin-bottom:4px}

/* Login: 2FA-Feld */
.totp-hint{max-width:460px;margin:14px auto 0;text-align:left;font-size:13.5px;
  color:var(--body);background:#FBF6EA;border:1px solid #EADFC8;border-radius:12px;padding:11px 14px}
.totp-hint code{font-weight:700;color:var(--ink);word-break:break-all}
.lerr{max-width:460px;margin:0 auto 14px;color:var(--rot-600);font-weight:700;text-align:left}

/* Kleine Inline-Korrekturformulare in der Rechnungslauf-Vorschau */
.fixform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fixform input{font:inherit;font-size:13px;border:1.2px solid var(--ink);
  border-radius:10px;padding:5px 9px;width:96px}
.btnxs{background:var(--weiss);color:var(--ink);border:1.2px solid var(--ink);
  border-radius:14px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.btnxs.p{background:var(--primary);color:var(--weiss);border-color:var(--primary)}
tr.zurueck td{opacity:.45;text-decoration:line-through}
tr.zurueck td:last-child{text-decoration:none}

/* KPI-Kacheln als Drill-down-Links („keine Zahl ohne Beleg") */
a.kpi{display:block;text-decoration:none;color:inherit}
a.kpi:hover{outline:2px solid var(--banner);outline-offset:-2px}

/* Demo-Kennzeichnung */
.demochip{display:inline-block;background:var(--chip);border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:700;color:var(--muted);margin-left:7px;vertical-align:1px}

/* Toast initial sichtbar ohne JS; JS blendet nach 4 s aus */
#toast{opacity:0;pointer-events:none}
#toast.show{opacity:1}

/* Kundenaufruf in der Kopfzeile: von jeder Seite aus zum Kunden */
.kopfsuche{font:inherit;font-size:13px;border:1.4px solid var(--line,#ccc);
  border-radius:10px;padding:6px 11px;width:190px;background:var(--weiss);outline:none}
.kopfsuche:focus{border-color:var(--link,#0a58ca)}

/* Seitenleiste: Trennzeile vor den Ausbau-Bereichen (A2–A4) — die
   Tagesarbeit steht oben, die Platzhalter treten zurück. */
.sb-abschnitt{margin:14px 8px 4px;font-size:10.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:#8E8E93;
  border-top:1px solid rgba(142,142,147,.35);padding-top:10px}
.sb-abschnitt ~ a{opacity:.62;font-size:13px}
.sb-abschnitt ~ a:hover{opacity:1}

/* Stub-Seiten A2–A4 */
.stubcard{border:1.6px dashed var(--line);border-radius:16px;padding:26px 30px;margin-top:8px}
.stubcard .stufe{display:inline-block;background:var(--yellow);color:var(--ink);
  border-radius:10px;padding:6px 13px;font-size:14px;font-weight:700;margin-bottom:12px}
.stubcard p{font-size:15px;max-width:640px}

/* ---- Wissensverwaltung: Meldekarte, Klickwahl, Haftleiste ----
   Bedien-Standard vom 04.08.2026: goldumrandete Meldekarte oben auf jeder
   Arbeitsansicht, Klickwahl statt Tippen, Bestätigung in haftender Leiste. */
.chatcard{border:2px solid var(--yellow,var(--gold-700));border-radius:16px;
  padding:12px 16px;margin:0 0 16px;background:#fffdf7}
.chatcard-kopf{font-weight:700;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Fusion (03.09.2026): die goldene Karte OBEN — Einladungssatz im Kopf,
   rechts der Vertrauens-Satz (KI-ASSISTENT-MUSTER). */
.chatcard-satz{font-weight:400;color:var(--muted,#666);font-size:13px}
.chatcard-vertrauen{margin-left:auto;font-weight:400;color:var(--muted,#666);font-size:11.5px;text-align:right;max-width:280px}
.chatcard{margin-bottom:14px}
@media print{.chatcard,.denkanzeige{display:none !important}}
/* Denkanzeige der Meldekarte (Erscheinungsbild 22.08.2026): Überlage, solange der Server arbeitet */
/* Warteschirm nach Docs Regel (31.08./01.09.): Logo GROSS und mittig, Satz auf
   einer kleinen Karte — OHNE milchigen Schleier. */
.denkanzeige{position:fixed;inset:0;background:transparent;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:200}
.denkanzeige.an{display:flex}
.denkanzeige .sgo-denk img{width:96px;height:96px}
.denkanzeige p{font-size:15px;color:var(--ink,#1C1C1E);font-weight:500;margin:0;
  background:var(--weiss,#fff);border:1px solid var(--line,#e2e2e2);border-radius:12px;
  padding:10px 18px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.chatcard-feld{width:100%;font:inherit;font-size:14px;border:1.4px solid var(--line,#ccc);
  border-radius:12px;padding:9px 13px;resize:vertical;background:var(--weiss)}
.chatcard-zeile{display:flex;align-items:center;gap:10px;margin-top:8px}
/* Satzspeicher §13.2 (28.08.2026): der Pfeil steht NEBEN dem Feld, nicht davor
   — davor nähme er der Karte den Platz, um die es geht. */
.chatcard-feldzeile{display:flex;align-items:flex-start;gap:6px}
.chatcard-feldzeile .chatcard-feld{flex:1 1 auto}
.satzpfeil{position:relative;flex:0 0 auto}
.satzpfeil-knopf{cursor:pointer;font-size:15px;line-height:1;border:1.4px solid var(--line,#ccc);
  background:var(--weiss);border-radius:10px;padding:10px 9px;color:var(--muted,#666)}
.satzpfeil-liste{position:absolute;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px;
  list-style:none;background:var(--weiss);border:1px solid var(--line,#ccc);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.13);min-width:280px;max-width:460px;
  max-height:320px;overflow-y:auto}
.satzpfeil-liste li{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satzpfeil-liste li:hover{background:#f3f0e8}
.chatcard-klammer,.chatcard-mikro{cursor:pointer;font-size:18px;border:0;background:none}
.chatcard-hinweis{color:var(--muted,#666);font-size:12.5px}

/* Klickwahl: Wortkacheln, abgewählte durchgestrichen */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{display:inline-block;border:1.5px solid var(--yellow,var(--gold-700));border-radius:10px;
  padding:6px 12px;cursor:pointer;background:#fdf9ef;font-weight:600;font-size:14px;user-select:none}
.chip.aus{border-color:#bbb;background:#f1f1f1;color:#999;text-decoration:line-through}
.chip:has(input:checked){border-color:var(--yellow,var(--gold-700));background:#fdf9ef;
  color:inherit;text-decoration:none}
/* Facharztmodul-Filter (Wissen): aktiv ausgewähltes Fachgebiet */
a.chip{text-decoration:none;color:inherit}
a.chip.chip-an{background:var(--navy,var(--navy-800));border-color:var(--navy,var(--navy-800));color:var(--weiss)}

/* Haftende Bestätigungsleiste — Übernahme nur nach ausdrücklicher Zustimmung */
.haftleiste{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--yellow,var(--gold-700));margin-top:16px;padding:14px 2px}
.haftleiste .btn{background:var(--yellow,var(--gold-700));color:var(--weiss);border:0;border-radius:10px;
  padding:11px 20px;font:inherit;font-weight:700;cursor:pointer}
.haftleiste span{flex:1;min-width:240px;color:var(--muted,#555);font-size:13.5px}

/* Wissensübersicht */
.zt tr.faellig td{background:#fdf3e0}
.zt tr.aktiv td{font-weight:600}
.wissenform .zt input[type=text]{width:100%;font:inherit;font-size:14px;
  border:1.4px solid var(--ink,#222);border-radius:12px;padding:8px 12px}
.secttl{margin:22px 0 8px;font-size:16px}

/* Klickwahl-Kacheln in Formularen */
.klickwahl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.klickwahl .chip{font-size:13px;padding:5px 11px;border-width:1.2px}
.klickwahl .chip:hover{background:#f7edd8}
.klickwahl .chip.zahnrad{border-style:dashed;font-weight:400}
.chatcard-senden{background:var(--yellow,var(--gold-700));color:var(--weiss);border:0;
  border-radius:8px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer}
.chatcard-form{margin:0}

/* ---- Hilfe und Kontakt (Suite-Standard 1.5) ----
   Baustein eins: der sichtbare Eingang, gleiche Stelle, gleiche Form, auf
   jeder Seite. Gold (var(--gold-500)) bleibt Akzent, nie die Hauptaktion. */
.hilfe-eingang{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--ink);font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;
  border:1px solid var(--gold-500);background:#FBF6EA;white-space:nowrap}
.hilfe-eingang:hover{background:#F3E8CE}
.hilfe-eingang .ring{font-size:15px;line-height:1}
@media print{.hilfe-eingang{display:none !important}}

/* Das Fenster: Kopfbalken, feine Linie, zwei Knöpfe — Punkt 28 des Standards.
   Der Rettungsring erscheint im Fenster nur EINMAL, in der Überschrift. */
.hk-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.hk-kopf h1,.hk-kopf h2{margin:0;font-size:19px;display:flex;align-items:center;gap:9px}
.hk-kopf .modul{color:var(--muted);font-weight:400;font-size:15px}
.hk-trenner{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.hk-knopf{display:inline-block;padding:7px 14px;border-radius:10px;text-decoration:none;
  border:1px solid var(--line);background:var(--weiss);color:var(--ink);font-size:13.5px;cursor:pointer}
.hk-knopf:hover{border-color:var(--primary)}
.hk-knopf.aktiv{background:var(--primary);border-color:var(--primary);color:var(--weiss);font-weight:600}
.hk-rechts{margin-left:auto;display:flex;gap:8px}
.hk-neu{display:block;text-align:center;margin-bottom:10px;
  background:#FBF6EA;border-color:var(--gold-500);font-weight:600}

.hk-zwei{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.hk-zwei{grid-template-columns:1fr}}
.hk-liste{border:1px solid var(--line);border-radius:14px;background:var(--weiss);overflow:hidden}
.hk-liste .eintrag{display:block;padding:11px 13px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink)}
.hk-liste .eintrag:last-child{border-bottom:none}
.hk-liste .eintrag:hover{background:#F7F9FC}
.hk-liste .eintrag.aktiv{background:#EAF1F6;border-left:3px solid var(--gold-500)}
.hk-liste .betreff{font-weight:600;font-size:13.5px}
.hk-liste .neben{color:var(--muted);font-size:12px;margin-top:2px}
.hk-inhalt{border:1px solid var(--line);border-radius:14px;background:var(--weiss);padding:16px 18px}
.hk-stand{color:var(--muted);font-size:12.5px;margin-top:10px}
.hk-kapitel{border-bottom:1px solid var(--line);padding:12px 0}
.hk-kapitel:last-child{border-bottom:none}
/* Der eigene Zug im Gespraech (Standard 2.0 §5) — abgesetzt von der Antwort,
   damit beim Zurueckblaettern sofort zu sehen ist, wer gesprochen hat. */
.hk-zug-frage{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:10px 0 0}
.hk-kapitel h3{margin:0 0 3px;font-size:15px}
.hk-dauer{color:var(--muted);font-size:12.5px}
.hk-bildkasten{padding:10px 12px;background:#FBF6EA;border:1px solid var(--gold-500);border-radius:10px}

/* Verlauf eines Vorgangs — die eigene Seite rechts, die andere links. */
.hk-gespraech{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.hk-gespraech .blase{max-width:82%;padding:10px 13px;border-radius:12px;
  border:1px solid var(--line);background:#F7F9FC;align-self:flex-start}
.hk-gespraech .blase p{margin:0 0 6px}
.hk-gespraech .blase p:last-of-type{margin-bottom:0}
.hk-gespraech .meine{align-self:flex-end;background:#FBF6EA;border-color:#E2D2A8}
.hk-gespraech .zeit{color:var(--muted);font-size:12px;margin-top:6px}

/* Merker (Stand, dringend, Art) — Wortlaut wie im Klickdummy. */
.merker{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--line);background:#F2F5F8;color:var(--muted);white-space:nowrap}
.merker.dringend{background:#FBEDEB;border-color:#E9C6C1;color:#A4342B;font-weight:700}
.merker.erledigt{background:#E8F1EC;border-color:#CBE0D4;color:#2E6B4F}
.merker.art{background:var(--weiss);border-color:#D5DEE9;color:var(--primary)}

/* Themenzählung: Balken je Thema, nur Thema und Zähler. */
.themenreihe{display:grid;grid-template-columns:220px 1fr 44px;gap:12px;
  align-items:center;margin-bottom:9px}
.themenreihe .name{font-size:13.5px}
.themenreihe .spur{background:var(--grau-100);border-radius:5px;height:18px;overflow:hidden}
.themenreihe .balken{height:100%;background:var(--primary);border-radius:5px}
.themenreihe .wert{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--muted)}

/* Reichweite der Wissenspakete — dreistufig (Übergabe vom 13.08.2026).
   Farbe sagt, wie weit ein Paket reisen darf. */
.reichweite{display:inline-block;border-radius:999px;padding:2px 9px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.r-global{background:#DCEEE8;color:var(--gruen-600)}
.r-praxis{background:#F6E7CC;color:var(--orange-700)}
.r-mandant{background:#FDECEC;color:#8A2F2F}

/* Meldekarte, Vollausbau 22.08.2026 (Standard KI-Vollmacht): Einladung über der
   Karte (§13.1), Anhang-Kacheln (§1 Eigenschaft 2), Vorschau mit Satz und Feldern
   (§5.5), Stufen und zweite Leiste (§2.4, §2.5). */
.chatcard-einladung{font-size:13px;color:var(--muted,#666);margin:0 0 4px 4px}
.chatcard-anhaenge{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chatcard-anhang{font-size:12.5px;border:1px solid var(--line,#ccc);border-radius:8px;padding:2px 6px}
.chatcard-anhang button{border:0;background:none;cursor:pointer;font-size:12px}
.vorschau-schritt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 18px;align-items:start}
.vorschau-felder{font-size:12.5px;border-collapse:collapse}
.vorschau-felder th{text-align:left;font-weight:500;color:var(--muted,#666);padding:1px 10px 1px 0;vertical-align:top;white-space:nowrap}
.vorschau-felder td{padding:1px 0;vertical-align:top;word-break:break-word}
.sprechprobe{font-size:14px;font-weight:600;margin:10px 0 4px}
/* Bilanz der Anhaenge (28.08.2026): steht ueber der Vorschau, wenn etwas
   liegengeblieben ist. Auffaellig genug, dass niemand sie ueberliest —
   sie erscheint nur im Ausnahmefall, nicht bei jedem Aufruf. */
.anhang-bilanz{background:#FDF3E3;border:1px solid #E0B77A;border-left:4px solid var(--orange-700);border-radius:6px;color:#7A4400;font-size:14px;font-weight:600;padding:10px 12px;margin:0 0 12px}
.stufe{display:inline-block;font-size:11px;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.stufe-beenden{background:#F6D8D8;color:#8B1A1A}
.stufe-geld{background:#F3E6C8;color:#7A5200}
.stufe-aussen{background:#DCE8F6;color:#1F4E8C}
.stufe-steuern{background:#E6EFE6;color:#2D6A2D}
.zweite-leiste{display:block;width:100%;font-size:13.5px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line,#ccc)}
.zweite-beenden{border-color:#B42318;background:#FBEAEA;color:#8B1A1A}
.zweite-geld{border-color:var(--gold-700);background:#FBF6EA}
.zweite-aussen{border-color:#1F4E8C;background:#EEF4FB}
@media (max-width:760px){.vorschau-schritt{grid-template-columns:1fr}}

/* Listenkopf: Anlegen-Knopf über der Liste, nicht darunter (Doc 06.09.2026).
   Der Knopf stand hinter allen Bestandszeilen — bei 56 Kunden unauffindbar. */
.listenkopf { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.listenkopf-satz { color: var(--muted); font-size: 13px; margin-left: 12px; }
.listenkopf-zahl { color: var(--muted); font-size: 13px; }

/* Schreibzeile des KI-Assistenten nach dem Muster (Doc 06.09.2026): Klammer,
   Mikrofon, Feld, Pfeil und Senden in EINER Zeile. Vorher lagen Klammer und
   Mikrofon darunter, mit einem Hinweistext, der den Kopfsatz wiederholte. */
.chatcard-feldzeile{align-items:center}
.chatcard-feldzeile .chatcard-klammer,
.chatcard-feldzeile .chatcard-mikro{flex:0 0 auto;align-self:center}
.chatcard-feldzeile .chatcard-senden{flex:0 0 auto;align-self:center}
/* Eigene Standardsätze stehen jetzt UNTER der Schreibzeile (Muster: „Darunter:
   eigene Standards"), nicht mehr darüber. */
.chatcard-saetze{margin-top:10px}