/* ============ Startliste, Labels für Kunden, Vorab-Fragen ============
   Liegt ganz zuletzt (nach 28-anfragen). Nur Aussehen für js/54-startliste.js, js/53-kundenlabels.js und die Vorab-Fragen
   in js/32-online.js. Farben nur über var(--…); die Karten und Zeilen sind die vorhandenen Bausteine (.th-karte, .th-zeile,
   .sk-neu, .sg-chip), hier steht nur, was dazukommt. */

/* ---------- Startliste („Los geht’s“): die Karte von „Für dich heute“ mit Fortschritt und tippbaren Zeilen ---------- */
.sl-stand{display:flex;align-items:center;gap:10px;margin:2px 0 6px;}
.sl-balken{flex:1;min-width:0;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-2);}
.sl-balken i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width var(--dur-ruhig, .34s) var(--ease, ease);}
.sl-zahl{flex:none;font-size:12px;color:var(--ink-soft);}
.sl-zeile{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line);
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.sl-text{display:flex;flex-direction:column;gap:1px;}
.sl-text b{font-size:13.5px;font-weight:600;}
.sl-text small{font-size:12px;line-height:1.35;color:var(--ink-soft);}
.sl-zeile.fertig .sl-text b{font-weight:500;color:var(--ink-soft);text-decoration:line-through;}
.sl-zeile.fertig .sl-text small{display:none;}
.sl-zeile.fertig .sl-z{color:var(--ok);background:var(--ok-soft);}
.sl-los{flex:none;pointer-events:none;}
.sl-pfeil{flex:none;display:grid;place-items:center;color:var(--ink-soft);}
.sl-pfeil svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){
  .sl-zeile:hover .sl-text b{color:var(--accent-deep);}
}
@media (max-width:360px){ .sl-los{padding-left:10px;padding-right:10px;} }

/* ---------- Labels ---------- */
/* Die Pille nimmt die Farbe ihrer Umgebung: im Kopf der Akte (dort sind die Töne vertauscht) und überall sonst lesbar. */
.kl-pille{display:inline-flex;align-items:center;max-width:100%;padding:3px 10px;border-radius:var(--r-klein, 6px);
  font-size:12px;font-weight:600;line-height:1.3;color:inherit;overflow-wrap:anywhere;
  border:1px solid var(--line);
  border-color:color-mix(in srgb, currentColor 35%, transparent);
  background:color-mix(in srgb, currentColor 10%, transparent);}
.ka-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;}
.kf-labels .kl-chips{margin-bottom:0;}
.kf-labels .kl-neu{margin:12px 0 0;}
.kf-labels .kl-leer{margin:0 0 4px;}
.kl-knopf{flex:none;background:transparent;}
.kl-knopf .st-z{display:flex;color:var(--ink-soft);}
.kl-knopf .st-z svg{width:13px;height:13px;}
.kl-bsp{margin:0 0 6px;}
.kl-tipp{margin:0 4px 6px;}

/* ---------- Vorab-Fragen (Einstellungen → Website & Buchung) ---------- */
.wf-liste{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;}
.wf-zeile{display:flex;align-items:center;gap:8px;}
.wf-feld{flex:1;min-width:0;margin:0;}
.wf-pflicht,.wf-zeile .weg-kreuz{flex:none;}
.wf-neu{margin:0 0 8px;}
.wf-bsp{margin:0 0 10px;}
@media (max-width:380px){
  .wf-zeile{flex-wrap:wrap;}
  .wf-feld{flex:1 1 100%;}
}

/* Die Antworten des Kunden in der Terminanfrage. */
.anf-antw{margin:8px 0 0;display:flex;flex-direction:column;gap:6px;}
.anf-antw > div{padding:8px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);}
.anf-antw dt{font-size:12px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere;}
.anf-antw dd{margin:2px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;}
/* ============ Zwei-Faktor-Anmeldung (js/56-zweiterfaktor.js) ============ */
.zf-zeile{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 6px;border:1px solid var(--line);border-radius:var(--r-karte, 14px);background:var(--surface);}
.zf-z{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--accent-deep);}
.zf-zeile.an .zf-z{color:var(--ok);}
.zf-z svg{width:18px;height:18px;}
.zf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.zf-txt b{font-size:13.5px;font-weight:600;}
.zf-txt small{font-size:12px;line-height:1.35;color:var(--ink-soft);}
.zf-zeile .btn{flex:none;}
@media (max-width:360px){ .zf-zeile{flex-wrap:wrap;} .zf-txt{flex:1 1 100%;} }
.zf-schritte{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:zf;}
.zf-schritte li{position:relative;display:flex;flex-direction:column;gap:1px;padding-left:34px;counter-increment:zf;}
.zf-schritte li::before{content:counter(zf);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--on-accent);background:var(--accent);}
.zf-schritte b{font-size:13.5px;}
.zf-schritte span{font-size:12.5px;line-height:1.4;color:var(--ink-soft);}
.zf-knoepfe{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px;}
/* Der QR-Code steht immer schwarz auf weiss - ein Lesegeraet muss ihn erkennen, egal welches Design gewaehlt ist. */
.zf-qr{width:min(220px,70%);margin:0 auto 12px;padding:8px;border-radius:12px;background:#fff;line-height:0;}
.zf-qr svg{width:100%;height:auto;display:block;}
.zf-schluessel-wort{margin:0 0 6px;font-size:12px;color:var(--ink-soft);}
.zf-schluessel{display:flex;align-items:center;gap:8px;margin:0 0 14px;}
.zf-schluessel code{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  font-size:13px;letter-spacing:.06em;overflow-wrap:normal;word-break:normal;}
.zf-schluessel .btn{flex:none;}
.zf-code{text-align:center;font-size:22px;letter-spacing:.3em;font-variant-numeric:tabular-nums;}
.zf-fehler{margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--danger);}
.zf-fertig{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.zf-warnung{display:flex;flex-direction:column;gap:6px;padding:12px;margin:0 0 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--wait-soft, var(--surface-2));font-size:12.5px;line-height:1.45;}
.zf-warnung b{font-size:13.5px;}
.zf-warnung .zf-schluessel{margin:4px 0 0;}
.zf-code-fenster{max-width:360px;}

/* Eine Frage ist ein Textfeld, das mit seinem Text waechst (data-waechst) - bis zu 120 Zeichen passen nicht in eine Zeile. */
.field.wf-feld textarea{min-height:44px;height:auto;resize:none;padding-top:10px;padding-bottom:10px;line-height:1.4;}
/* Lange Beispiele brechen um, statt am Rand abgeschnitten zu werden; schmale Felder geben dem Feld die ganze Zeile, der Knopf rutscht darunter. */
.wf-bsp,.kl-bsp{flex-wrap:wrap;}
.wf-bsp .cf-chip,.kl-bsp .cf-chip{max-width:100%;height:auto;white-space:normal;text-align:left;line-height:1.3;padding-top:7px;padding-bottom:7px;}
@media (max-width:380px){
  .wf-neu,.kl-neu,.kl-teil .sk-neu{flex-wrap:wrap;}
  .wf-neu input,.kl-neu input,.kl-teil .sk-neu input{flex:1 1 100%;}
}

/* ============ Zeiten vorschlagen (js/55-zeitenvorschlag.js) ============ */
.ka-vorschlag{width:100%;min-height:42px;margin:-4px 0 14px;gap:8px;}
.ka-vorschlag svg{width:16px;height:16px;flex:none;}
.zv-wer{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.zv-wer .avatar,.zv-wer img{width:34px;height:34px;flex:none;}
.zv-wer-name{font-weight:600;overflow-wrap:anywhere;}
.zv-wahl{margin:0 0 12px;}
.zv-wahl-knopf{max-width:100%;}
.zv-wahl-knopf svg{width:14px;height:14px;flex:none;}
.zv-wahl-knopf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zv-liste{margin-top:8px;}
.zv-dauer{margin:-4px 0 8px;font-size:12px;color:var(--ink-soft);}
.zv-tag{display:grid;grid-template-columns:minmax(58px,auto) minmax(0,1fr);gap:4px 10px;align-items:start;padding:8px 0;border-top:1px solid var(--line);}
.zv-tag:first-child{border-top:none;}
.zv-tagwort{padding-top:7px;font-size:13px;font-weight:600;white-space:nowrap;}
.zv-zeiten{margin:0;}
.zv-mehr{margin:6px 0 0;}
.zv-nachricht{margin:0 0 6px;}
.zv-nachricht:empty{display:none;}
.zv-leer{margin:0 4px 14px;}
@media (max-width:360px){
  .zv-tag{grid-template-columns:minmax(0,1fr);}
  .zv-tagwort{padding-top:0;}
}

/* ---- E-Mail bestaetigen (js/57-mailbestaetigung.js) ----
   Dasselbe Blatt wie die Anmeldung; der Kreis traegt einen Brief statt des Hakens, in der Akzentfarbe. */
.zg-mail .zg-haken.zg-mail-z{background:var(--accent-soft);color:var(--accent-deep);}
.zg-mail .zg-haken.zg-mail-z svg{width:32px;height:32px;}
.zg-mail-satz{margin:0;text-align:center;font-size:14.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.zg-mail-satz b{font-weight:650;}
.zg-mail .sperre-frage{text-align:center;}
.zg-mail .btn.zg-mail-neu{width:100%;height:48px;font-size:14.5px;}
.zg-mail .zg-hinweis{text-align:center;}

/* ---- Einwilligung für Gesundheitsangaben: Formular und Unterschrift (js/58-einwilligung.js) ----
   Das Formular liest sich wie ein Blatt: kleiner Satz, Abschnitte mit fettem Anfang. Das Feld zum
   Unterschreiben ist weißes Papier mit dunkler Tinte – in jedem Design, weil die Unterschrift genau
   so ins PDF geht (dieselbe Ausnahme wie beim QR-Code). */
.modal.tf.ew{padding-bottom:0;}
.modal.tf.ew.ew-ohne{padding-bottom:22px;}
.ew-ohne .ka-fotook{margin:6px 0 16px;}
.ew-text{font-size:13px;line-height:1.55;color:var(--ink);}
.ew-titel{margin:0 0 2px;font-size:15px;font-weight:650;line-height:1.3;letter-spacing:-.01em;}
.ew-unter-titel{margin:0 0 12px;font-size:12px;color:var(--ink-soft);}
.ew-parteien{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:10px 16px;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line);}
.ew-parteien > div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;}
.ew-parteien b{font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:2px;}
.ew-abs{margin:0 0 9px;overflow-wrap:break-word;hyphens:auto;}
.ew-abs:last-child{margin-bottom:0;}
.ew-abs b{font-weight:650;}
.ew-haken{display:flex;align-items:flex-start;gap:11px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ew-haken input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.ew-haken .kaestchen{flex:none;margin-top:1px;}
.ew-haken:has(input:focus-visible) .kaestchen{box-shadow:0 0 0 3px var(--accent-soft);}
.ew-haken-txt{font-size:13.5px;line-height:1.5;font-weight:600;color:var(--ink);}
.ew-ort{margin:0 0 8px;font-size:12.5px;color:var(--ink-soft);}
.ew-feld{position:relative;height:170px;border-radius:var(--r-feld, 10px);border:1px solid var(--line);background:#FFFFFF;overflow:hidden;}
.ew-feld::after{content:"";position:absolute;left:18px;right:18px;bottom:38px;border-top:1px dashed #B9C1CE;pointer-events:none;}
.ew-pad{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.ew-platz{position:absolute;left:0;right:0;bottom:46px;text-align:center;font-size:13px;color:#7A8394;pointer-events:none;}
.ew-platz[hidden]{display:none;}
.ew-wer{margin:0;font-size:12px;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere;}
.ew-wer-zeile{display:flex;align-items:center;gap:8px;margin-top:6px;min-height:30px;}
.ew-leeren{margin-left:auto;flex:none;}
.ew-leeren[hidden]{display:none;}
/* Mehrere Erklärungen (Fotos): die freiwillige steht etwas leiser darunter, mit ihrem Hinweis. */
.ew-haken + .ew-haken{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.ew-haken.frei .ew-haken-txt{font-weight:500;}
.ew-haken-txt small{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--ink-soft);}
/* Minderjährige: der Haken über dem Feld und der Teil für den Erziehungsberechtigten. */
.ew-haken.ew-minder{margin:0 0 12px;}
.ew-haken.ew-minder .ew-haken-txt{font-weight:500;font-size:13px;}
.ew-eltern{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.ew-eltern[hidden]{display:none;}
.ew-eltern .field{margin-bottom:10px;}
.ew-fehlt{margin:0 0 8px;font-size:12.5px;text-align:center;color:var(--ink-soft);}
.ew-fehlt.bereit{color:var(--ok);}
/* In der Akte: erst der Knopf zum Formular, darunter der Satz dazu (so hat Evi es gewollt); "Formular ansehen" hinter dem grünen. */
.btn.ka-ew-knopf{margin:2px 0 8px;}
.btn.ka-ew-knopf + .ka-fotook{margin:0 0 16px;}
.ka-ew-link{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
/* "Gesundheitsangaben" passt bei 320 px mit großer Schrift nicht in eine Zeile – dann an der Silbe trennen. */
.modal.ew h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
/* Website-Bilder: ein rotes Ausrufezeichen, wenn ein zugeordneter Kunde der Veröffentlichung nicht zugestimmt hat. */
.web-warn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#FFFFFF;font-size:13px;font-weight:700;line-height:1;}
.web-bild .web-warn{position:absolute;left:5px;top:5px;}
.web-warn-hinweis{display:flex;align-items:flex-start;gap:8px;color:var(--danger);}
.web-warn-hinweis .web-warn{flex:none;margin-top:1px;}
/* "Widerrufen" an einer Einwilligung: leiser als "Formular ansehen", es ist der seltene Weg. */
.ka-ew-link.weg{margin-left:6px;color:var(--ink-soft);}
/* Einwilligung nur vermerkt, nicht unterschrieben (so hat Evi es gewollt: orange statt grün, siehe ewStand() in js/58).
   Dasselbe Orange wie „Krank“, auf Karte und Grund in jedem Design lesbar gerechnet. */
.ka-fotook.offen{color:var(--krank-text);}
.field .ka-fotook.offen{margin:7px 0 0;}
/* Der Schalter „Einwilligung für Gesundheitsangaben“ lässt sich ohne Unterschrift nicht einschalten. */
.ag-wichtig:has(input:disabled){opacity:.62;cursor:default;}

/* ============ Ausfallgebühr (js/59-ausfall.js) ============
   Fällig ist etwas zu tun – darum im Gelb von „Offen“. Jedes Zeichen hat seine feste Größe. */
:root .tag-open.aus-marke{display:inline-flex;align-items:center;gap:4px;margin-left:6px;vertical-align:middle;
  color:var(--wait);background:var(--wait-soft);border:1px solid var(--wait);}
:root .aus-marke svg{width:12px;height:12px;flex:none;}
.zeit-hinweis.aus-satz{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:10px 12px;
  border-radius:var(--r-feld, 10px);background:var(--wait-soft);font-weight:500;line-height:1.45;}
.zeit-hinweis.aus-satz[hidden]{display:none;}
.zeit-hinweis.aus-satz svg{width:16px;height:16px;flex:none;margin-top:1px;}
.zeit-hinweis.aus-satz b{font-weight:700;}
.modal .zeit-hinweis.aus-satz{margin:0 0 14px;}
.tf-teil .zeit-hinweis.aus-satz{margin:10px 0 0;}
.aus-schalter{margin-top:10px;}
/* Menü → Ausfallgebühr */
.aus-form .ag-wichtig + .aus-werte{margin-top:12px;}
.aus-form .aus-werte + .ag-wichtig{margin-top:4px;}
.aus-form .field-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:10px;}
.aus-form .field-row .field{min-width:0;}
.aus-regel-kopf{margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--ink-soft);}
.aus-regel{margin:0 0 10px;padding:12px 14px;border-radius:var(--r-feld, 10px);border:1px solid var(--line);
  background:var(--surface-2);font-size:13px;line-height:1.5;color:var(--ink);}
.aus-form > .btn{width:100%;margin-top:6px;}