/* ============ Kundenpflege (so hat Evi es gewollt) ============
   Folgetermin nach "Stattgefunden", Geburtstag in der Akte, der Dialog zum
   Gruessen. Steht nach allen Gewaendern, damit es ueber ihnen gilt; die Werte
   (Zeiten, Kurven, Schatten) kommen aus der Politur. */

/* ---------- Folgetermin ---------- */
.ft-satz{margin:4px 0 12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.ft-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ft-knopf{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;
  padding:11px 12px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;
  font-family:var(--font-body);color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);
}
.ft-knopf:active{transform:scale(.97);transition-duration:.06s;}
.ft-w{font-size:14px;font-weight:700;}
.ft-d{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
/* Der uebliche Abstand des Kunden: im Akzent, mit kleiner Marke. Der zweite
   Rand sitzt im Schatten, damit nichts springt. */
.ft-knopf.ueblich{
  background:var(--accent-soft);border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.ft-marke{
  position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.02em;
  color:var(--on-accent);background:var(--accent);
}
@media (hover:hover) and (pointer:fine){
  .ft-knopf:hover{border-color:var(--accent);}
}
/* Bei sehr enger Breite (320 px, grosse Schrift) steht die Marke unter dem Wort. */
@media (max-width:360px){
  .ft-marke{position:static;margin-top:4px;}
}

/* ---------- Geburtstag ---------- */
/* Im Bogen: Tag, Monat und Jahr in einer Reihe - das Jahr ist schmal. */
.gb-reihe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr);gap:8px;}
.gb-reihe select, .gb-reihe input{
  width:100%;min-width:0;font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 10px;
}
.gb-reihe input:focus, .gb-reihe select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.gb-hint{margin:6px 2px 0;font-size:11.5px;color:var(--ink-soft);}
/* Im Kopf der Akte: eine ruhige Zeile unter "Kunde seit". Am Tag selbst
   leuchtet sie in der Farbe des Kunden und traegt "Gratulieren". */
.ka-gb{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;
  margin-top:8px;max-width:100%;
  font-size:12px;font-weight:600;line-height:1.35;color:var(--ink-soft);
}
.ka-gb svg{flex:none;width:16px;height:16px;color:var(--accent-deep);}
.ka-gb span{min-width:0;overflow-wrap:anywhere;}
.ka-gb.heute{
  padding:6px 6px 6px 12px;border-radius:999px;color:var(--ink);
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--kfarbe) 18%, var(--surface));
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--kfarbe) 40%, transparent);
}
.ka-gb .btn{padding:7px 13px;}

/* Ein langer Doppelname in "Fuer dich heute" bricht um, statt ueber den
   Knopf daneben zu laufen (320 px, grosse Schrift). */
.th-text{overflow-wrap:anywhere;}

/* ---------- Der Dialog zum Gruessen ---------- */
/* Dieselben Zeilen wie "Erinnerungen fuer morgen" - vorn das Bild statt der
   Uhrzeit, bei "lange nicht gesehen" rechts das Kreuz. */
.gr-zeile{grid-template-columns:auto minmax(0,1fr) auto;}
.gr-zeile .gr-bild{width:40px;height:40px;}
.gr-zeile .er-knoepfe{grid-column:1 / -1;}
.gr-zeile.fertig .gr-bild{opacity:.7;}
.gr-hint{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);}

/* ============ Auswertung ============
   Eine Seite mit den Zahlen des Business. Kacheln wie "Studio auf einen
   Blick", darunter Karten mit ruhigen Saeulen in einer Farbe (dem Akzent):
   die gewaehlte Saeule satt, die anderen zurueckgenommen. Zahlen stehen nur
   an der gewaehlten und der hoechsten Saeule - der Rest steht im aria-label
   und ist einen Tipp entfernt. */
.sh-auswertung{width:100%;margin-top:10px;}
.aw-zurueck{margin-bottom:12px;}
.aw-kopf{margin-bottom:10px;}
.aw-art{margin-bottom:14px;}
.aw-kacheln{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px;
  container:awk / inline-size;
}
/* Fuenf Kacheln in zwei Spalten: die erste (Termine) geht ueber die ganze
   Breite, sonst bliebe unten rechts ein Loch. */
.aw-kacheln > .aw-kachel:first-child{grid-column:1 / -1;}
.aw-kachel{
  display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 13px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.aw-k-kopf{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-soft);}
.aw-k-kopf svg{flex:none;width:15px;height:15px;color:var(--accent-deep);}
.aw-k-wert{
  font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);overflow-wrap:anywhere;
}
.aw-k-unter{font-size:11px;line-height:1.4;color:var(--ink-soft);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;}
.aw-delta{font-weight:700;color:var(--ink-soft);}
.aw-delta.hoch{color:var(--ok);}
.aw-karte{
  margin:0 0 12px;padding:14px 14px 12px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.aw-titel{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:var(--font-display);font-size:15px;font-weight:650;color:var(--ink);
}
.aw-titel svg{flex:none;width:17px;height:17px;color:var(--accent-deep);}
.aw-satz{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink);}
.aw-satz.leise{color:var(--ink-soft);font-size:11.5px;}
.aw-fuss{margin-top:4px;}

/* Saeulen: jede eine Spalte mit Zahl, Feld und Wort. Der Balken waechst von
   der Grundlinie, oben 4 px rund, unten gerade; hoechstens 24 px breit. */
.aw-saeulen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;align-items:end;}
.aw-saeulen.zwoelf{grid-template-columns:repeat(12,minmax(0,1fr));}
.aw-saeulen.sieben{grid-template-columns:repeat(7,minmax(0,1fr));}
.aw-saeule{
  display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:0;
  background:none;border:none;font-family:var(--font-body);color:var(--ink-soft);
}
button.aw-saeule{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.aw-s-zahl{height:15px;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.aw-s-feld{
  position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:96px;
  border-bottom:1px solid var(--line);
}
.aw-s-balken{
  display:block;width:100%;max-width:24px;min-height:2px;border-radius:4px 4px 0 0;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 32%, transparent);
  transition:height var(--dur-ruhig) var(--ease), background var(--dur) var(--ease);
}
.aw-saeule.an .aw-s-balken{background:var(--accent);}
.aw-s-wort{font-size:10.5px;font-weight:600;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap;}
.aw-saeule.an .aw-s-wort{color:var(--ink);font-weight:700;}
/* Der laufende Monat ist unterstrichen. */
.aw-saeule.jetzt .aw-s-wort{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:var(--accent);}
button.aw-saeule:active .aw-s-balken{transform:scaleY(.97);transform-origin:bottom;}
@media (hover:hover) and (pointer:fine){
  button.aw-saeule:hover .aw-s-balken{background:var(--accent);opacity:.75;}
  button.aw-saeule.an:hover .aw-s-balken{opacity:1;}
}
/* Zwoelf Monate auf einem Handy: die Woerter werden kuerzer. */
.aw-saeulen.zwoelf .aw-s-wort{font-size:9.5px;letter-spacing:-.02em;}

/* Beliebteste Leistungen: Zeichen, Name, Zahl - darunter ein duenner Balken. */
.aw-leist{display:flex;flex-direction:column;gap:10px;}
.aw-l-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 9px;align-items:center;}
.aw-l-z{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--accent-deep);
  background:var(--accent-soft);background:color-mix(in srgb, var(--accent) 12%, transparent);}
.aw-l-z svg, .aw-l-z img{width:16px;height:16px;}
.aw-l-z img{border-radius:4px;object-fit:cover;}
.aw-l-name{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.aw-l-wert{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.aw-l-bahn{grid-column:2 / -1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.aw-l-balken{display:block;height:100%;border-radius:999px;background:var(--accent);}
/* Reiter (Uebersicht, Kunden, Zeiten), Zeilen zum Antippen, Heatmap und Tabelle.
   Die Zeile aus awZeilen() ist mal ein div, mal ein Knopf (Kunde antippen). */
.aw-teile{margin-bottom:14px;}
.aw-leist + .aw-satz{margin-top:12px;}
.aw-heute{margin:8px 0 0;}
button.aw-l-tipp{
  width:100%;padding:0;margin:0;border:0;background:none;text-align:left;font:inherit;color:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease);
}
button.aw-l-tipp:active{transform:scale(.99);}
.aw-l-z.person{background:none;width:auto;height:auto;}
.aw-export{width:100%;margin-top:6px;}
.aw-export svg{width:16px;height:16px;flex:none;}

/* Heatmap: Stunden untereinander, Wochentage nebeneinander. Die Zelle ist ein
   Feld mit einer Deckkraft darauf - dunkler heisst mehr gebucht. */
.aw-heat{display:grid;grid-template-columns:22px repeat(7,minmax(0,1fr));gap:3px;align-items:center;margin-top:4px;}
.aw-h-tag{font-size:10.5px;font-weight:600;color:var(--ink-soft);text-align:center;}
.aw-h-std{font-size:10px;font-weight:600;color:var(--ink-soft);text-align:right;padding-right:3px;font-variant-numeric:tabular-nums;}
.aw-hz{position:relative;display:block;height:20px;border-radius:5px;background:var(--surface-2);overflow:hidden;}
.aw-hz i{position:absolute;inset:0;background:var(--accent);}
.aw-h-legende{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;font-size:10.5px;color:var(--ink-soft);}
.aw-h-legende i{width:14px;height:10px;border-radius:3px;background:var(--accent);}

/* Auf einem schmalen Handy mit grosser Schrift stehen die Kacheln enger. */
@container awk (max-width:300px){
  .aw-kachel{padding:10px 10px;}
  .aw-k-wert{font-size:21px;}
}

/* ============ Vorher & Nachher (Galerie) ============
   Im Bogen zwei Plaetze nebeneinander, in der Galerie eine geteilte Kachel,
   im Vollbild ein Schieber. Die Linie und der Griff sind Licht auf dem Bild -
   darum stehen sie fest in Weiss, wie die Knoepfe des Vollbilds. */
.vn-plaetze{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;}
.vn-platz{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.vn-platz input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.vn-vorschau{
  display:grid;place-items:center;width:100%;aspect-ratio:4 / 5;border-radius:14px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent-deep);
  transition:border-color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);
}
.vn-vorschau svg{width:22px;height:22px;}
.vn-vorschau img{width:100%;height:100%;object-fit:cover;display:block;}
.vn-platz:active .vn-vorschau{transform:scale(.97);transition-duration:.06s;}
.vn-platz:has(input:focus-visible) .vn-vorschau{outline:2px solid var(--accent);outline-offset:2px;}
.vn-wort{font-size:12px;font-weight:700;color:var(--ink-soft);}
.vn-platz.voll .vn-wort{color:var(--ink);}
.vn-tausch{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;padding:0;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder);
}
.vn-tausch svg{width:16px;height:16px;}
.vn-tausch:active{transform:rotate(180deg) scale(.94);}
.vn-hint{margin:10px 2px 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){
  .vn-platz:hover .vn-vorschau{border-color:var(--accent);}
}

/* Die Kachel in der Galerie: links das Vorher, rechts das Nachher. */
.st-vn{position:relative;display:block;}
.st-raster .style-open .st-vn-vor{
  position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 50% 0 0);
}
.st-vn-linie{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(0,0,0,.25);
}
.st-vn-griff{
  position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:#26292B;box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.st-vn-griff svg{width:16px;height:16px;}

/* Das Vollbild mit Schieber. Das Nachher bestimmt die Groesse, das Vorher
   liegt deckungsgleich darueber und ist bis zur Linie zu sehen. */
.lb-vn{
  --vn:50%;
  position:relative;flex:0 1 auto;min-height:0;max-width:100%;
  border-radius:14px;overflow:hidden;cursor:ew-resize;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.lb-vn img{display:block;border-radius:0;-webkit-user-drag:none;pointer-events:none;}
.lb-stage .lb-vn .vn-nach{
  max-width:100%;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);object-fit:contain;
}
.lb-stage .lb-vn .vn-vor{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  clip-path:inset(0 calc(100% - var(--vn)) 0 0);
}
.vn-linie{
  position:absolute;top:0;bottom:0;left:var(--vn);width:2px;margin-left:-1px;
  background:#FFF;box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none;
}
.vn-griff{
  position:absolute;top:50%;left:var(--vn);width:46px;height:46px;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.94);color:#26292B;box-shadow:0 3px 14px rgba(0,0,0,.35);
}
.vn-griff svg{width:22px;height:22px;}
.vn-griff:focus-visible{outline:2px solid #FFF;outline-offset:3px;}
.vn-marke{
  position:absolute;top:10px;padding:4px 10px;border-radius:999px;pointer-events:none;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:#FFF;background:rgba(20,20,22,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.vn-marke.links{left:10px;}
.vn-marke.rechts{right:10px;}

/* ============ Notiz zum Besuch und „Nächstes Mal“ ============ */
.ca-besuch{margin-top:8px;padding:9px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink);}
.ca-besuch.leer{padding:0;background:none;border:0;}
.ca-besuch b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);}
.ca-besuch p{margin:1px 0 0;white-space:pre-line;overflow-wrap:anywhere;}
.ca-besuch p + b{margin-top:7px;}
.ca-besuch-knopf{margin-top:8px;}
.ca-besuch.leer .ca-besuch-knopf{margin-top:0;}
.ca-besuch-knopf svg{width:14px;height:14px;}
.ka-naechstes{display:flex;gap:11px;align-items:flex-start;margin:10px 0 14px;padding:12px 14px;border-radius:16px;
  background:var(--accent-soft);border:1px solid var(--line);}
.ka-naechstes > span{flex:none;margin-top:1px;color:var(--accent-deep);}
.ka-naechstes svg{width:19px;height:19px;}
.ka-naechstes > div{min-width:0;}
.ka-naechstes b{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent-deep);}
.ka-naechstes p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;}
.ka-naechstes small{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-soft);}

/* ============ Kurz einrichten (neues Konto) ============ */
/* Drei Schritte: oben ein Balken je Schritt, der jeweils erste bis aktuelle
   gefuellt, der neue Schritt gleitet herein. */
.ein-fort{display:flex;gap:6px;margin:2px 0 14px;}
.ein-fort i{flex:1;height:4px;border-radius:99px;background:var(--line);transition:background var(--dur,.22s) var(--ease,ease-out);}
.ein-fort i.on{background:var(--accent);}
.modal.ein .ein-schritt{animation:einSchritt var(--dur-ruhig,.34s) var(--ease,ease-out) both;}
.modal.ein .ein-schritt[hidden], .ein-fuss [hidden]{display:none !important;}
@keyframes einSchritt{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.modal.ein .ein-schritt{animation:none;}}
.modal.ein .sg-chips{margin-bottom:10px;}
.ein-hinweis{margin:2px 2px 4px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);overflow-wrap:anywhere;}
.ein-hinweis:empty{display:none;}
.ein-fuss{display:flex;gap:10px;}
.ein-fuss .btn{width:auto;flex:1 1 0;min-width:0;}
.ein-fuss .btn.ghost{flex:0 0 38%;}
.ein-spaeter{width:100%;margin-top:10px;}

/* ============ Terminanfragen, Online-Buchung ============ */
.anf-karte{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:18px;
  background:var(--accent-soft);border:1px solid var(--accent);}
.anf-z{flex:none;color:var(--accent-deep);}
.anf-z svg{width:22px;height:22px;}
.anf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.anf-txt b{font-size:14.5px;}
.anf-txt span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.anf-karte .btn{flex:none;}
.anf-eine .anf-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.anf-eine .anf-kopf b{font-size:15.5px;overflow-wrap:anywhere;}
.anf-wann{font-size:13px;color:var(--ink-soft);}
.anf-zeile{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;overflow-wrap:anywhere;}
.anf-zeile.leise{color:var(--ink-soft);font-size:12.5px;}
.anf-zeile svg{width:18px;height:18px;flex:none;}
.anf-msg{margin:8px 0 0;padding:8px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;}
.anf-eine .zeit-hinweis{display:block;margin:8px 0 0;}
.anf-tun{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.anf-fertig{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.anf-f{display:flex;flex-direction:column;font-size:13px;padding:8px 11px;border-radius:12px;background:var(--surface-2);}
.anf-f span{font-size:12px;color:var(--ink-soft);}
/* Urlaub anfragen: eine Zeile je Anfrage mit Zeitraum, Dauer und Stand. */
.modal.ur h3{hyphens:auto;overflow-wrap:anywhere;}
/* Urlaubsanfragen beantworten: das Fenster steht in der Mitte, und unter "Genehmigen" / "Ablehnen"
   bleibt Luft bis zum Rand der Karte (.tf-teil lässt unten sonst nur 1 px). */
.overlay.mitte{align-items:center;padding-top:calc(12px + env(safe-area-inset-top, 0px) * .5);}
.overlay.mitte .modal{animation-name:mitteIn;}
@keyframes mitteIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.modal.ur .anf-eine{padding-bottom:16px;}
.ur-zeile{gap:6px;}
.ur-zeile .ur-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ur-zeile .ur-kopf b{font-size:14px;}
.ur-zeile .ur-fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.ur-zeile .anf-msg{margin:2px 0 0;}
.anf-wunsch{display:block;margin:0 0 12px;}
.wk-tag.zu{background:var(--ok-soft);color:var(--ok);}
.set-k-buchung .field input[readonly]{font-size:12.5px;}

/* Aussehen der Buchungsseite: kleine Vorschau, Farbwahl, Titelbild, Wunsch-Adresse.
   Die Probefarbe (--wf) ist die der Seite im hellen Modus - sie gehoert der Seite,
   nicht dem Design der App, und steht darum fest. */
.web-vorschau{margin:8px 0 12px;border:1px solid var(--line);border-radius:var(--r-karte, 14px);overflow:hidden;background:var(--surface);}
.wv-titel{display:block;width:100%;height:64px;object-fit:cover;background:var(--surface-2);}
.wv-titel.leer{background:var(--surface-2);}
.wv-kopf{display:flex;align-items:center;gap:10px;padding:10px 14px 0;min-width:0;}
.wv-logo{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-top:-22px;border-radius:10px;overflow:hidden;
  border:2px solid var(--surface);background:var(--surface-2);color:var(--ink-soft);font-weight:700;font-size:15px;}
.wv-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.wv-kopf b{min-width:0;font-size:14.5px;overflow-wrap:anywhere;}
.wv-knopf{display:inline-flex;margin:10px 14px 12px;padding:7px 14px;border-radius:999px;background:var(--wkn, var(--wf));color:var(--wka, var(--wa, #fff));font-size:12.5px;font-weight:700;}
/* Mit eigenem Hintergrund malt die Vorschau Grund, Karte, Schrift und Linie der Seite (--wb, --wk, --wt, --wl, --wa aus web/farben.js). */
.web-vorschau.mit-grund{background:var(--wb);color:var(--wt);border-color:var(--wl);}
.web-vorschau.mit-grund .wv-titel{background:var(--wk);}
.web-vorschau.mit-grund .wv-logo{border-color:var(--wb);background:var(--wk);color:var(--wt);}
/* Die Vorschau der Buchungsseite ueber der App ("Ansehen"): oben eine Leiste, darunter die echte Seite in einem Rahmen. */
.bv{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;background:var(--ground);}
.bv-leiste{display:flex;align-items:center;gap:8px;padding:max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom:1px solid var(--line);background:var(--surface);}
.bv-leiste .btn{flex:none;}
.bv-leiste .btn svg{width:16px;height:16px;}
.bv-titel{flex:1;min-width:0;text-align:center;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-soft);overflow-wrap:anywhere;}
.bv-seite{flex:1;min-height:0;width:100%;border:0;background:#fff;}
@media (max-width:359px){.bv-titel{display:none;}.bv-leiste{justify-content:space-between;}}
.bv-leiste .btn.on{background:var(--accent-deep, var(--accent));}
/* Gestalten in der Vorschau: eine Leiste unter der Seite mit drei Reitern (Hintergrund, Akzent, Knoepfe), dieselben
   Chips wie in "Website & Buchung". Sie bleibt niedrig, damit die Seite darueber gut zu sehen ist; der Inhalt rollt. */
.bv-g{flex:none;display:flex;flex-direction:column;max-height:min(46vh, 340px);border-top:1px solid var(--line);background:var(--surface);
  padding:10px 12px max(10px, env(safe-area-inset-bottom));}
.bv-g[hidden]{display:none;}
.bv-g-kopf{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 8px;}
.bv-reiter{flex:1;min-width:0;margin:0;flex-wrap:nowrap;}
/* Einklappen: nur Reiter und Speichern bleiben, die Vorschau darueber wird gross. */
.bv-klein{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-feld, 10px);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.bv-klein svg{width:18px;height:18px;transition:transform var(--dur-ruhig, .34s) var(--ease, ease);}
.bv-g.klein .bv-klein svg{transform:rotate(180deg);}
.bv-g.klein .bv-g-inhalt{display:none;}
.bv-g.klein .bv-g-kopf{margin:0;}
.bv-g.klein .bv-g-fuss{margin-top:8px;padding-top:8px;}
@media (hover:hover) and (pointer:fine){.bv-klein:hover{color:var(--ink);border-color:var(--kn-rahmen, var(--accent));}}
.bv-g-inhalt{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 4px;}
.bv-g-inhalt .web-farben{margin:0;}
.bv-g-inhalt .set-hint{margin:8px 0 0;}
.bv-mehr{appearance:none;border:0;background:none;padding:10px 0 2px;font:inherit;font-size:13px;font-weight:600;color:var(--accent-deep, var(--accent));
  cursor:pointer;touch-action:manipulation;text-decoration:underline;text-underline-offset:3px;}
.bv-g-fuss{flex:none;display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid var(--line);margin-top:6px;}
/* Rueckfrage und Meldung stehen ueber der Vorschau (sie liegt sehr weit oben). */
.bv ~ #confirmOverlay{z-index:2100;}
html:has(.bv) #toast{z-index:2100;}
.web-gestalten-zeile{margin:0 0 12px;}
.web-farben{margin-bottom:6px;}
.set-k-buchung .set-hint + .field{margin-top:14px;}
.wf-punkt{display:block;flex:none;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.18);}
/* "Eigene Farbe": der Farbwaehler liegt unsichtbar ueber dem ganzen Chip, ein Tipp oeffnet ihn (auch auf dem iPhone). Gewaehlt sieht der Chip aus wie die anderen. */
.sg-chip.web-eigen input{inset:0;width:100%;height:100%;opacity:0;pointer-events:auto;cursor:pointer;}
.cf-chip.sg-chip.web-eigen.an{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.wf-punkt.halb{background:linear-gradient(90deg,#fff 50%,#1B2333 50%);}
.wf-punkt.regenbogen{background:conic-gradient(#E0433F,#E9B341,#5BB85A,#3D8ED9,#9A5BD4,#E0433F);}
.wt-zeile{position:relative;display:flex;align-items:center;gap:10px;margin:8px 0 4px;}
.wt-zeile .btn svg{width:16px;height:16px;}
.wt-weg.weg-kreuz{position:static;}
.web-adr{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r-feld, 10px);background:var(--surface-2);overflow:hidden;}
.web-adr span{padding:0 0 0 12px;color:var(--ink-soft);font-size:14px;}
.web-adr input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;padding-left:2px;}

/* ============ Mini-Website: QR-Code und Bilderwahl (Einstellungen) ============ */
/* Der QR-Code steht fest dunkel auf weiss - ein Lesegeraet braucht diesen
   Kontrast, egal welches Design die App traegt (wie das Glas der Leiste). */
.web-qr{display:flex;align-items:center;gap:14px;margin:12px 0;padding:12px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line);}
.web-qr-bild{flex:none;width:112px;height:112px;border-radius:10px;background:#fff;color:#000;padding:2px;display:block;}
.web-qr-bild svg{display:block;width:100%;height:100%;}
.web-qr-txt{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.web-qr-txt b{font-size:14.5px;}
.web-qr-txt small{font-size:12.5px;color:var(--ink-soft);line-height:1.4;}
.web-qr-txt .btn{margin-top:6px;}
.web-qr-txt .btn svg{width:16px;height:16px;}
@media (max-width:359px){.web-qr{flex-direction:column;align-items:stretch;text-align:left;}.web-qr-bild{align-self:center;}}
.web-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin:6px 0;}
.web-bild{position:relative;appearance:none;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:1;
  background:var(--surface-2);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  outline:1px solid var(--line);outline-offset:-1px;}
.web-bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity var(--dur) var(--ease);}
.web-bild.an img{opacity:1;}
.web-bild.an{outline:2px solid var(--ok);outline-offset:-2px;}
.web-bild .kaestchen{position:absolute;right:5px;top:5px;}

/* ============ Tipp „Kurz einrichten“ ============ */
.ein-tipp{position:fixed;z-index:60;left:12px;right:12px;max-width:440px;margin:0 auto;
  bottom:calc(78px + var(--leiste-unten) + 12px);display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(20,28,45,.18);animation:einTippRein var(--dur-ruhig,.34s) var(--ease,ease-out);}
@keyframes einTippRein{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.ein-tipp-z{flex:none;color:var(--accent-deep);}
.ein-tipp-z svg{width:22px;height:22px;}
.ein-tipp-txt{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:1px;}
.ein-tipp-txt b{font-size:14.5px;}
.ein-tipp-txt span{font-size:12.5px;color:var(--ink-soft);}
.ein-tipp-tun{display:flex;gap:8px;flex:none;margin-left:auto;}
@media (prefers-reduced-motion:reduce){.ein-tipp{animation:none;}}

/* ---------- Kundenakte: Termin buchen und der Reiter Dokumente ----------
   So hat Evi es gewollt: in der Akte gleich einen Termin buchen und ein eigener
   Reiter fuer Dokumente, deutlich als wichtig markiert (gelb wie "Offen", dazu
   ein Schild mit Haken). Der Umschalter ist der aus der Organisation
   (.pl-teile). Farben nur ueber var(--...). */
.ka-buchen{width:100%;min-height:50px;margin:12px 0 14px;gap:8px;font-size:15px;}
.ka-buchen svg{width:18px;height:18px;flex:none;}
.ka-reiter{margin-bottom:14px;}
.dk-chip .pl-t-z{color:var(--wait);}
.dk-chip.on .pl-t-z{color:inherit;}

.dk-hinweis{
  display:flex;align-items:flex-start;gap:12px;padding:14px;margin:0 0 12px;border-radius:18px;
  background:var(--wait-soft);border:1.5px solid var(--wait);color:var(--ink);
}
.dk-hinweis{
  background:color-mix(in srgb, var(--wait) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--wait) 65%, transparent);
}
.dk-schild{
  flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);color:var(--wait);border:1.5px solid var(--wait);
}
.dk-schild svg{width:24px;height:24px;}
.dk-hinweis-txt{min-width:0;}
.dk-hinweis-txt b{display:block;font-size:14.5px;line-height:1.3;}
.dk-hinweis-txt p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink);}

.dk-hoch{width:100%;min-height:50px;gap:8px;margin:0 0 14px;font-size:15px;}
.dk-hoch svg{width:18px;height:18px;flex:none;}
.dk-liste{display:flex;flex-direction:column;gap:8px;container:dkliste / inline-size;}
.dk-zeile{
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.dk-oeffnen{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;padding:6px;
  border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.dk-art{
  flex:none;width:46px;height:54px;border-radius:12px;display:grid;place-items:center;
  font-size:11px;font-weight:800;letter-spacing:.04em;
}
.dk-art.pdf{background:none;color:var(--warn);overflow:visible;}
.dk-art .dk-seite{width:100%;height:100%;display:block;}
.dk-knoepfe{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;}
.dk-stift svg{width:11px;height:11px;}
.dk-seite .s-blatt{fill:var(--surface);stroke:var(--ink-soft);stroke-opacity:.55;stroke-width:1.2;}
.dk-seite .s-ohr{fill:var(--surface-2, var(--line));stroke:var(--ink-soft);stroke-opacity:.55;stroke-width:1;stroke-linejoin:round;}
.dk-seite .s-zeile{fill:none;stroke:var(--ink-soft);stroke-width:1.6;stroke-linecap:round;opacity:.45;}
.dk-seite .s-band{fill:var(--warn);}
.dk-seite .s-wort{fill:var(--surface);font:800 8px/1 var(--font-body, sans-serif);letter-spacing:.06em;}
.dk-art.bild{background:var(--accent-soft);color:var(--accent-deep);}
.dk-art svg{width:24px;height:24px;}
.dk-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dk-name{font-size:14px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;}
.dk-txt small{font-size:11.5px;line-height:1.35;color:var(--ink-soft);}
.dk-mark{flex:none;display:grid;color:var(--wait);}
.dk-mark svg{width:20px;height:20px;}
.dk-fuss{margin:10px 2px 0;}
.dk-leer{margin:0;padding:6px 4px 2px;font-size:12.5px;line-height:1.4;color:var(--ink-soft);}
/* Ordner "Bilder" und "PDF-Dokumente": der Abschnitt traegt seine Karte, die Zeilen darin nur einen feinen Rand. */
.dk-ordner{margin-bottom:10px;}
.dk-ordner .cat-body{padding:2px 8px 12px;}
.dk-ordner .cat-zeichen{--farbe:var(--accent);}
/* Das Datum steht links in einem eigenen Streifen, durch eine feine Linie von Datei und Namen getrennt. */
.dk-datum{
  align-self:stretch;width:50px;padding:2px 10px 2px 2px;margin:-2px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:17px;font-weight:750;line-height:1.05;color:var(--ink);
}
.dk-datum small{font-size:9.5px;font-weight:700;letter-spacing:.05em;line-height:1.25;color:var(--ink-soft);opacity:1;}
.dk-datum small:first-of-type{margin-top:1px;color:var(--accent-deep);}
.dk-datum:empty{display:none;}
.dk-art{overflow:hidden;}
/* Wird die Liste schmal (320 px, grosse Schrift), weicht zuerst das Schild - Ordner und Hinweis sagen es ohnehin -, dann rueckt alles zusammen. */
@container dkliste (max-width:270px){
  .dk-mark{display:none;}
  .dk-art{width:38px;height:46px;}
  .dk-datum{width:40px;padding-right:7px;font-size:14px;}
  .dk-oeffnen{gap:8px;padding:5px 4px;}
  .dk-zeile{gap:2px;padding:5px;}
}
.dk-art img{width:100%;height:100%;object-fit:cover;display:block;}
@media (hover:hover) and (pointer:fine){
  .dk-oeffnen{transition:background var(--dur) var(--ease);}
  .dk-oeffnen:hover{background:var(--accent-soft);}
}
@media (max-width:360px){
  .dk-art{width:40px;height:48px;}
  .dk-oeffnen{gap:8px;}
  .dk-datum{width:42px;padding-right:8px;font-size:15px;}
  .dk-hinweis{padding:12px;gap:10px;}
  .dk-schild{width:38px;height:38px;}
}


/* ---------- Kundenakte: Schnellkontakt, Zuverlaessigkeit, Verlauf ----------
   So hat Evi es gewollt (Vorschlaege fuer eine attraktivere Akte): eine Reihe
   runder Knoepfe im Kopf, die Zuverlaessigkeit als kleine Karte und der Verlauf
   als Zeitstrahl statt dreier Listen. Farben nur ueber var(--...). */
.ka-schnell{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 4px;
  width:100%;margin-top:14px;
}
.sk{
  flex:1 1 0;max-width:66px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.sk-kreis{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--line);
  background:color-mix(in srgb, var(--kfarbe) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--kfarbe) 32%, transparent);
  transition:transform var(--dur) var(--ease-feder), background var(--dur) var(--ease);
}
.sk-kreis svg{width:21px;height:21px;}
.sk-wort{
  max-width:none;font-size:10px;font-weight:650;line-height:1.2;text-align:center;
  color:var(--ink-soft);white-space:nowrap;
}
.sk:active .sk-kreis{transform:scale(.92);transition-duration:.06s;transition-timing-function:var(--ease);}
@media (hover:hover) and (pointer:fine){
  .sk:hover .sk-kreis{background:color-mix(in srgb, var(--kfarbe) 24%, var(--surface));}
}
.ka-marken{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px;}
.ka-marken .ka-seit{margin-top:0;}
.ka-stamm{
  display:inline-flex;align-items:center;gap:5px;color:var(--ink);
  background:var(--wait-soft);border-color:var(--wait);
  background:color-mix(in srgb, var(--wait) 16%, var(--surface));
  border-color:color-mix(in srgb, var(--wait) 55%, transparent);
}
.ka-stamm svg{width:13px;height:13px;flex:none;color:var(--wait);fill:currentColor;}

.zv-karte{
  margin:0 0 12px;padding:10px 12px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.zv-kopf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;}
.zv-titel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);}
.zv-titel svg{width:15px;height:15px;flex:none;color:var(--accent-deep);}
.zv-marke{
  padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-soft);
}
.zv-marke.ok{background:var(--ok-soft);color:var(--ok);}
.zv-marke.wait{background:var(--wait-soft);color:var(--wait);}
.zv-marke.warn{background:var(--warn-soft);color:var(--warn);}
.zv-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;}
.zv-zahl{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:0 4px;}
.zv-zahl + .zv-zahl{border-left:1px solid var(--line);}
.zv-zahl .v{font-size:17px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;}
.zv-zahl.hat .v{color:var(--warn);}
.zv-zahl .l{
  font-size:11px;font-weight:600;line-height:1.25;
  text-align:center;color:var(--ink-soft);overflow-wrap:break-word;hyphens:auto;
}
.zv-zahl .l small{display:block;font-size:10px;font-weight:500;opacity:.85;}
.zv-quote{display:flex;align-items:center;gap:10px;margin-top:9px;}
.zv-satz{flex:none;font-size:11.5px;color:var(--ink-soft);}
.zv-balken{flex:1 1 40px;min-width:40px;height:6px;border-radius:999px;overflow:hidden;background:var(--surface-2);}
.zv-fuell{display:block;height:100%;border-radius:inherit;background:var(--ok);}
.zv-balken.wait .zv-fuell{background:var(--wait);}
.zv-balken.warn .zv-fuell{background:var(--warn);}
.zv-stamm{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line);}
.zv-text{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--ink-soft);}
.zv-weg{flex:0 0 56px;height:5px;border-radius:999px;overflow:hidden;background:var(--surface-2);}
.zv-weg i{display:block;height:100%;border-radius:inherit;background:var(--accent);}
p.zv-stamm.ist{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;font-weight:650;color:var(--ink);
}
.zv-stamm.ist svg{width:14px;height:14px;flex:none;color:var(--wait);fill:currentColor;}

/* Der Verlauf: eine Linie, ein Punkt je Termin, neueste oben, dazwischen "Heute". */
.vz{list-style:none;margin:0 0 12px;padding:0;position:relative;}
.vz::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--line);background:color-mix(in srgb, var(--ink) 14%, transparent);
}
.vz-eintrag, .vz-heute{position:relative;padding-left:34px;}
.vz-punkt{
  position:absolute;left:1px;top:12px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;box-sizing:border-box;
  background:var(--surface);border:2px solid var(--accent);
  box-shadow:0 0 0 3px var(--ground);
}
.vz-punkt svg{width:12px;height:12px;}
.vz-eintrag.kommt .vz-punkt::after,
.vz-eintrag.offen .vz-punkt::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);}
.vz-eintrag.offen .vz-punkt{border-color:var(--wait);background:var(--wait-soft);}
.vz-eintrag.offen .vz-punkt::after{background:var(--wait);}
.vz-eintrag.ok .vz-punkt{background:var(--ok);border-color:var(--ok);color:var(--ground);}
.vz-eintrag.ab .vz-punkt{background:var(--off-soft);border-color:var(--warn);color:var(--warn);}
.vz-karte.upcoming{border-left:1px solid var(--line);}
.ca-date small{margin-left:5px;font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--ink-soft);}
.vz-lz{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--accent-deep);}
.vz-lz svg, .vz-lz .lz-bild{width:16px;height:16px;}
.vz-heute{display:flex;align-items:center;min-height:26px;margin:2px 0 10px;}
.vz-heute::before{
  content:"";position:absolute;left:6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px var(--ground);
}
.vz-heute span{
  padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--ink);color:var(--ground);
}
.vz-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.vz-foto, .vz-mehr{width:52px;height:52px;border-radius:12px;flex:none;}
.vz-foto{padding:0;border:1px solid var(--line);overflow:hidden;background:var(--surface-2);cursor:pointer;}
.vz-foto img{display:block;width:100%;height:100%;object-fit:cover;}
.vz-mehr{display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--surface-2);}
.vz-alle{width:100%;margin:0 0 14px;}
.kn-kopf{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-right:34px;}
.kn-kopf h3{margin:0;overflow-wrap:anywhere;}
.kn-kopf .modal-sub{margin:2px 0 0;}
@media (max-width:360px){
  .sk-kreis{width:42px;height:42px;}
  .vz-eintrag, .vz-heute{padding-left:30px;}
  .vz-punkt{left:0;}
  .vz::before{left:10px;}
  .vz-heute::before{left:5px;}
}
/* Die Leistung steht in einer eigenen Zeile unter Datum und Uhrzeit - neben
   ihnen bliebe ihr zu wenig Platz und der Name bräche mitten im Wort. */
.ca-row.vz-karte .svc{flex:1 1 100%;}
/* ---- Die drei Reiter der Akte: wie die Reiterleiste unten ----
   So hat Evi es gewollt: man sieht, in welchem Block man ist, und der Name
   verschwindet nie. Glas mit Licht oben, das Zeichen über dem Wort, der offene
   Reiter liegt in einer Glaskugel (dieselben Bausteine wie .tab-pille in
   css/10-politur.css: Streifen oben, Schatten innen unten, heller Rand, Glanz-
   sichel). Die Kugel gleitet über .pl-pille (--von/--nach). Die Weißtöne stehen
   absichtlich fest: sie stellen Licht dar, keine Farbe des Designs. */
.ka-reiter{
  --luecke:2px;padding:5px;border-radius:24px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 46%),
    rgba(var(--ground-rgb),.55);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
          backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(0,0,0,.22);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ka-reiter{background:var(--surface);}
}
.ka-reiter .pl-pille{
  top:5px;bottom:5px;left:5px;width:calc((100% - 10px - 2 * var(--luecke)) / 3);border-radius:999px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 58%),
    linear-gradient(to bottom, var(--surface) 0%, var(--accent-soft) 72%, var(--accent-soft) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 -7px 12px -7px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.08),
    0 6px 14px rgba(0,0,0,.10);
}
.ka-reiter .pl-pille::before{
  content:'';position:absolute;left:14%;right:14%;top:2px;height:38%;border-radius:999px;
  background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0));
  pointer-events:none;
}
.ka-reiter .cf-chip{
  min-height:58px;padding:8px 2px 6px;gap:3px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink-soft);
}
.ka-reiter .cf-chip.on{color:var(--accent-deep);}
.ka-reiter .cf-chip.on .pl-t-w{font-weight:700;}
.ka-reiter .pl-t-z svg{width:22px;height:22px;}
/* Das Wort bricht lieber in zwei Zeilen um ("Termin / Verlauf"), als dass es
   abgeschnitten wird. */
.ka-reiter .pl-t-w{max-width:100%;white-space:normal;text-align:center;overflow-wrap:normal;}
/* Das Schild der Dokumente bleibt gelb: dort liegt Wichtiges (siehe .dk-hinweis). */
.ka-reiter .dk-chip .pl-t-z, .ka-reiter .dk-chip.on .pl-t-z{color:var(--wait);}
@media (max-width:360px){
  .ka-reiter{padding:4px;--luecke:2px;}
  .ka-reiter .pl-pille{top:4px;bottom:4px;left:4px;width:calc((100% - 8px - 2 * var(--luecke)) / 3);}
  .ka-reiter .cf-chip{font-size:10.5px;}
}
/* Die Zahl am Zeichen steht in jedem Zustand auf dem Akzent - auf der hellen Kugel
   verschwand sie sonst. */
.ka-reiter .pl-t-z .cnt, .ka-reiter .cf-chip.on .pl-t-z .cnt{background:var(--accent);color:var(--on-accent);}

/* ============ Team: Person am Termin, Chips, Liste ============ */
/* Die Person ist ein kleiner Kreis mit ihrem Anfangsbuchstaben in einer
   eigenen Farbe (dieselbe Drehung wie die Kundinnen, `ku-ton`). */
.pe-punkt{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;
  font-size:10px;font-weight:700;line-height:1;font-style:normal;
  background:var(--accent-soft);background:color-mix(in srgb, var(--kfarbe) 22%, var(--surface));
  color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kfarbe) 45%, transparent);}
.pe-punkt.gross{width:34px;height:34px;font-size:14px;}
.pe-leiste{margin:0 0 10px;}
.pe-chip{display:inline-flex;align-items:center;gap:6px;}
.pe-wahl{margin-top:2px;}
.wk-namezeile .pe-punkt{align-self:center;}
.te-liste{margin:6px 0 10px;}
.te-zeile{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-top:1px solid var(--line);
  background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.te-liste .te-zeile:first-child{border-top:0;}
.te-zeile.ich,.te-zeile.offen{cursor:default;}
.te-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.te-txt b{font-size:14.5px;overflow-wrap:anywhere;}
.te-txt small{font-size:12px;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere;}
.te-pfeil{flex:none;color:var(--ink-soft);display:grid;}
.te-pfeil svg{width:16px;height:16px;}
.te-tun{display:flex;align-items:center;gap:6px;flex:none;}
/* Arbeitszeiten & Urlaub je Mitarbeiter: eine Zeile im Dialog der Person, dahinter das Fenster „Zeiten von …“ */
.te-zeiten{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:12px 2px;border:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;color:var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.te-zeiten .tf-zeichen{flex:none;}
.te-zeiten .tf-zeichen svg{width:18px;height:18px;}
.te .modal-sub{overflow-wrap:anywhere;}
.pz .az-liste{margin-top:10px;}
.pz .sg-chips{margin-bottom:2px;}
.pz .field-row{margin-top:10px;}

.te-ok{display:flex;gap:8px;align-items:flex-start;color:var(--ok);font-size:13.5px;margin:0 0 12px;}
.te-ok svg{width:18px;height:18px;flex:none;margin-top:1px;}
.te-raus{width:100%;margin-top:12px;}
.te-rechte{margin-top:6px;}

/* Team-ID im Abschnitt Team (js/36-team.js): die ID zum Kopieren, der Schalter, „Neue ID erzeugen“. */
.te-id{display:grid;gap:10px;margin:14px 0 8px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);}
.te-id-kopf{display:grid;gap:2px;}
.te-id-kopf b{font-size:14px;font-weight:600;color:var(--ink);}
.te-id-kopf small{font-size:12.5px;line-height:1.4;color:var(--ink-soft);}
.te-id-wert{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.te-id-wert code{flex:1 1 190px;min-width:0;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;letter-spacing:.05em;overflow-wrap:anywhere;user-select:all;}
.te-id .set-hint{margin:0;}
.te-id-zeile{display:grid;gap:6px;}
.te-id-zeile .set-label{margin:0;}
.te-id-zeile .sg-chips{margin:0;}
/* Die Karte "Neu im Team": Text oben, die beiden Knoepfe darunter (bei 320 px ist fuer zwei daneben kein Platz). */
.anf-karte.tn-karte{flex-wrap:wrap;}
.tn-tun{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;padding-left:34px;}
/* Das Fenster "Willkommen im Team" */
.tw-kopf{display:grid;justify-items:center;gap:4px;text-align:center;padding:4px 0 8px;}
.tw-kopf h3{margin:0;}
.tw-kopf .modal-sub{margin:0;overflow-wrap:anywhere;}
.tw-z{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:var(--accent-soft);color:var(--accent-deep);}
.tw-z svg{width:28px;height:28px;}
.tw-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.tw-liste li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;}
.tw-liste li span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-soft);color:var(--ok);}
.tw-liste li span svg{width:14px;height:14px;}
.tw-liste li.nein{color:var(--ink-soft);}
.tw-liste li.nein span{background:var(--line-soft, var(--accent-soft));color:var(--ink-soft);}
.tw-liste.tipps li span{background:var(--accent-soft);color:var(--accent-deep);}
.tw-liste.tipps li span svg{width:14px;height:14px;}

/* ---------- Kunden importieren ----------
   Ein Bogen wie der Terminbogen (.modal.tf, .tf-teil, .tf-fuss): erst die Wahl der
   Quelle, dann das, was die App gefunden hat, mit den Spalten zum Umstellen. Die
   Zeilen der Vorschau sind schlicht, ohne eigenes Gewand. Farben nur über var(--…). */
.imp-wahl{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.imp-wahl .btn{width:100%;min-height:48px;gap:8px;}
.imp-wahl .btn svg{width:18px;height:18px;}
.imp-tipps{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:7px;
  font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.imp-tipps b{color:var(--ink);font-weight:650;}
.imp-datei{margin-left:auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:var(--ink-soft);}
.imp-zahl{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.imp-zahl b{font-size:16px;font-weight:650;}
.imp-zahl span{font-size:12px;color:var(--ink-soft);line-height:1.4;}
.imp-liste{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-feld, 10px);overflow:hidden;}
.imp-vor{display:flex;align-items:center;gap:10px;padding:8px 10px;}
.imp-vor + .imp-vor{border-top:1px solid var(--line);}
.imp-vor-bild{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-deep);}
.imp-vor-bild svg, .imp-vor-bild img{width:100%;height:100%;object-fit:cover;}
.imp-vor-txt{min-width:0;display:flex;flex-direction:column;gap:1px;}
.imp-vor-txt b{font-size:13.5px;font-weight:650;overflow-wrap:anywhere;}
.imp-vor-txt small{font-size:11.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.imp-kopf{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:none;background:none;
  text-align:left;color:var(--ink);font-family:var(--font-body);font-size:13.5px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.imp-spalten{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.imp-spalte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.imp-spalte-txt{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;gap:1px;}
.imp-spalte-txt b{font-size:13px;font-weight:650;overflow-wrap:anywhere;}
.imp-spalte-txt small{font-size:11.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.imp-feld{flex:1 1 150px;min-width:0;margin:0;}
.imp-feld select{width:100%;}
.imp-mehr{margin-top:12px;}
.imp-mehr summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent-deep);padding:6px 0;}
/* Zwei Knöpfe unten: „Andere Datei“ schmal, der Knopf zum Importieren breit; wird es zu eng (320 px,
   große Schrift), stehen sie untereinander, statt über den Rand zu laufen. */
.modal.imp .tf-fuss{display:flex;flex-wrap:wrap;gap:8px 10px;}
.modal.imp .tf-fuss .btn{width:auto;min-width:0;white-space:nowrap;padding-left:14px;padding-right:14px;}
.modal.imp .tf-fuss .btn.ghost{flex:1 1 110px;}
.modal.imp .tf-fuss .btn:not(.ghost){flex:2 1 150px;}
.ku-import{display:flex;justify-content:center;margin-top:-6px;}
.ku-import .btn{gap:8px;}

/* Kundenimport: eine Spalte "Allergien" steht gesperrt da - Gesundheitsangaben
   kommen erst nach der unterschriebenen Einwilligung in die Akte. */
.imp-spalte.imp-gesperrt .imp-spalte-txt b{color:var(--ink-soft);}
.imp-weg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);}
.imp-weg svg{width:15px;height:15px;flex:none;}
.imp-allergie{margin:8px 2px 0;}