/* ============ 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);}

/* 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;}
.style-grid .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;}