/* Oben die Unternehmensuebersicht: Logo, Name und drei Zahlen, die man
   antippen kann. Darunter jeder Abschnitt als eigene Karte in eigener
   Farbe - so findet das Auge "Logo" oder "Sicherung" wieder, ohne zu lesen. */
.set-held{
  position:relative;overflow:hidden;
  margin:2px 0 14px;padding:18px 16px 14px;border-radius:26px;
  background:var(--surface);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 65%),
    var(--surface);
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.sh-oben{display:flex;align-items:center;gap:14px;min-width:0;}
.sh-logo{
  flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.sh-logo .sh-bild{width:54px;height:54px;border-radius:50%;display:block;}
.sh-logo:has(img.lg){background:none;border-color:transparent;}
.sh-logo img.lg{width:100%;height:100%;}
/* Das Logo ist der Knopf zum Waehlen eines eigenen Logos: die Kamera
   sagt "antippen", das Kreuz setzt auf MyLifeBase zurueck. Beide liegen
   ausserhalb des Knopfs, weil der rund abschneidet. */
.sh-logo-halter{position:relative;flex:none;display:block;}
button.sh-logo{padding:0;cursor:pointer;color:inherit;font:inherit;
  transition:transform var(--dur-schnell) var(--ease-feder);}
button.sh-logo:active{transform:scale(.95);transition-duration:.06s;}
.sh-kamera{
  position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 2px var(--surface);
}
.sh-kamera svg{width:11px;height:11px;}
.sh-logo-weg.weg-kreuz{position:absolute;top:-7px;right:-7px;width:22px;height:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);}
.sh-logo-weg.weg-kreuz svg{width:9px;height:9px;}
.sh-txt{display:flex;flex-direction:column;min-width:0;}
.sh-klein{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);
}
.view .set-held h1{
  margin:3px 0 2px;font-size:clamp(20px, 6vw, 26px);line-height:1.1;
  overflow-wrap:anywhere;
}
.sh-sub{font-size:12.5px;color:var(--ink-soft);}
/* Noch kein Studioname: die Bitte steht leiser und kleiner als ein Name. */
.sh-leer{
  padding:0;border:none;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:17px;font-weight:600;line-height:1.25;color:var(--ink-soft);
  text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--ink) 25%, transparent);
  text-underline-offset:4px;
}
.sh-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;}
/* Die Karte misst sich selbst: bei grosser Schrift ist die App gezoomt, das
   sieht der Bildschirm allein nicht. (Die Reihe kann sich nicht selbst
   abfragen - darum die Karte darum herum.) */
.set-held{container:held / inline-size;}
.sh-zahlen button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;
  padding:10px 11px;border-radius:16px;cursor:pointer;text-align:left;
  font-family:var(--font-body);color:var(--ink);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition:background var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder);
}
.sh-zahlen button:active{transform:scale(.95);transition-duration:.06s;}
.sh-zahlen b{
  font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
/* Ein Wort wird nicht mehr mitten im Wort umgebrochen ("Kundinne-n"): lieber
   mit Trennstrich an der richtigen Silbe, und nur wenn es gar nicht anders
   geht, als letzter Ausweg irgendwo. */
.sh-zahlen span{
  max-width:100%;font-size:10.5px;font-weight:600;line-height:1.25;color:var(--ink-soft);
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
}
/* Wird die Reihe schmal (kleines Handy, grosse Schrift), ruecken die Kacheln
   zusammen und geben den Woertern ihren Platz. */
@container held (max-width:300px){
  .sh-zahlen button{padding:9px 7px 9px 8px;border-radius:14px;}
  .sh-zahlen span{font-size:10px;letter-spacing:-.01em;}
  .sh-zahlen b{font-size:18px;}
}
/* Noch schmaler (grosse Schrift auf kleinem Handy) passen drei Kacheln
   nebeneinander nicht mehr ohne zerbrochene Woerter - dann stehen sie
   untereinander, Zahl und Wort in einer Zeile. */
@container held (max-width:249px){
  .sh-zahlen{grid-template-columns:1fr;gap:6px;}
  .sh-zahlen button{flex-direction:row;align-items:baseline;gap:9px;padding:8px 12px;}
  .sh-zahlen b{flex:none;min-width:2.2em;}
  .sh-zahlen span{font-size:11px;}
}

/* Jeder Abschnitt hat seine eigene Farbe. Sie wird aus dem Akzent des
   Designs gedreht - der Farbton wandert je Abschnitt ein Stueck weiter, Hellig-
   keit und Saettigung bleiben. So passen alle Farben zum Design und
   zueinander, in jedem Design. Wo der Browser das nicht kann, bleibt es
   beim Akzent. */
.set-design, .set-liste .cat{--farbe:var(--accent);}
@supports (color: oklch(from red l c h)){
  .set-design, .set-liste .cat{
    --farbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));
  }
}
.set-k-design{--dreh:0;}
.set-k-logo{--dreh:45;}
.set-k-erinn{--dreh:95;}
.set-k-sperre{--dreh:145;}
.set-k-tz{--dreh:195;}
.set-k-zu{--dreh:245;}
.set-k-start{--dreh:295;}
.set-k-daten{--dreh:335;}
.set-k-az{--dreh:20;}
.set-k-termin{--dreh:70;}
.set-k-leist{--dreh:120;}
.set-k-ds{--dreh:170;}
.set-k-korb{--dreh:220;}
.set-k-verlauf{--dreh:250;}
.set-k-modell{--dreh:180;}
.set-k-hilfe{--dreh:270;}
.set-k-impressum{--dreh:320;}

.set-design{
  margin-bottom:12px;padding:14px 14px 14px;border-radius:22px;
  background:color-mix(in srgb, var(--farbe) 7%, var(--surface));
  border:1.5px solid color-mix(in srgb, var(--farbe) 36%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.set-design .set-label{color:var(--farbe);}
.set-label-zwei{margin-top:14px;}

.set-liste{display:flex;flex-direction:column;gap:10px;}
/* Die Gruppen (so hat Evi es gewollt): ein leises Wort darueber, darunter
   eine Karte, in der die Abschnitte als Zeilen liegen - getrennt nur durch
   eine feine Linie. Jede Zeile behaelt ihr farbiges Zeichen; der
   aufgeklappte Abschnitt liegt auf einem Hauch seiner Farbe. */
.set-liste{gap:0;}
.set-block-kopf{margin:22px 8px 8px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);}
.set-block-kopf:first-child{margin-top:4px;}
.set-block{border-radius:22px;overflow:hidden;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);}
.set-liste .set-block .cat, .set-liste .set-block .cat:last-child{
  margin:0;border:none;border-radius:0;background:transparent;box-shadow:none;}
.set-liste .set-block .cat + .cat{border-top:1px solid var(--line);}
.set-liste .set-block .cat:not(.is-shut){
  background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 6%, transparent);box-shadow:none;}
.set-liste .set-block .cat-head{padding:4px 6px 4px 12px;flex-wrap:nowrap;min-height:52px;}
/* Offen steht, was im Kopf stand, ohnehin darunter - der Wert weicht,
   damit der Pfeil in der Zeile bleibt. */
.set-liste .set-block .cat:not(.is-shut) .cat-wert{display:none;}
.set-liste .set-block .cat-chev{margin-left:auto;}
/* Ganz eng (320 px, grosse Schrift) bricht ein langer Titel lieber in zwei
   Zeilen, statt gekuerzt zu werden. */
@container (max-width:262px){
  .set-liste .set-block .cat .cat-toggle .t, .set-liste .set-block .cat.hat-wert.is-shut .cat-toggle .t{white-space:normal;overflow:visible;line-height:1.2;text-wrap:balance;}
}
/* Design und Schrift standen frueher in einer eigenen Karte - jetzt liegen
   sie in ihrer Zeile, ohne zweiten Rahmen. */
.set-block .set-design{margin:0;padding:0;background:none;border:none;box-shadow:none;}
/* Abmelden: ein eigener, ruhiger Knopf ganz unten - gut zu finden, ohne
   zu locken. */
.set-abmelden-block{margin:26px 0 6px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.btn.set-abmelden{width:100%;padding:13px 20px;
  color:var(--warn);border-color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 45%, transparent);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 88%, transparent);}
.set-abmelden svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){
  .btn.set-abmelden:hover{background:var(--warn-soft);border-color:var(--warn);}
}
.set-angemeldet{margin:0;font-size:12px;color:var(--ink-soft);text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-angemeldet b{color:var(--ink);font-weight:600;}
/* Konto loeschen steht neben Abmelden - so hat Evi es gewollt. Leiser als
   Abmelden: man findet es, aber es lockt nicht. Passen beide Woerter nicht
   ganz nebeneinander, stehen die Knoepfe untereinander statt gekuerzt -
   gemessen an der wirklich geladenen Schrift (Umbruch der Reihe), nicht an
   einer festen Breite. */
.set-abmelden-reihe{width:100%;display:flex;flex-wrap:wrap;gap:8px;}
.set-abmelden-reihe .btn.set-abmelden{width:auto;flex:1 1 0;min-width:max-content;padding:13px 12px;}
.btn.set-abmelden.set-konto-weg{
  color:var(--ink-soft);border-color:var(--line);
  border-color:color-mix(in srgb, var(--ink) 16%, transparent);
}
@media (hover:hover) and (pointer:fine){
  .btn.set-abmelden.set-konto-weg:hover{color:var(--warn);background:var(--warn-soft);border-color:var(--warn);}
}
/* Der Dialog dazu: was alles weggeht, die Sicherung davor, das Passwort. */
.modal.kl-modal{max-width:420px;}
.kl-zeichen{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:12px;
  background:var(--warn-soft);color:var(--warn);}
.kl-zeichen svg{width:23px;height:23px;}
.kl-satz{margin:-4px 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere;}
.kl-satz b{color:var(--ink);font-weight:600;}
.kl-liste{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:5px;font-size:13px;line-height:1.4;color:var(--ink);}
.kl-liste li{position:relative;padding-left:16px;}
.kl-liste li::before{content:'';position:absolute;left:3px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--warn);}
.kl-liste b{font-variant-numeric:tabular-nums;}
.kl-sicher{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0 0 16px;padding:12px 14px;
  border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);}
.kl-sicher p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.kl-sicher .btn svg{width:15px;height:15px;}
.kl-form .field{margin-bottom:14px;}
.kl-knoepfe{display:flex;gap:10px;flex-wrap:wrap;}
.kl-knoepfe .btn{flex:1 1 130px;}
.btn.kl-los{background:var(--danger);border-color:var(--danger);color:var(--on-danger, #FFF);box-shadow:none;}
.kl-modal.laeuft .modal-close, .kl-modal.laeuft .kl-sicher .btn, .kl-modal.laeuft [data-kl-abbrechen]{pointer-events:none;opacity:.45;}
.set-liste .cat, .set-liste .cat:last-child{
  margin:0;border-radius:20px;
  background:color-mix(in srgb, var(--farbe) 10%, var(--surface));
  border:1.5px solid color-mix(in srgb, var(--farbe) 48%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.set-liste .cat:not(.is-shut){
  border-color:color-mix(in srgb, var(--farbe) 60%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 24px -14px color-mix(in srgb, var(--farbe) 70%, transparent);
}
.set-liste .cat-head{padding:4px 6px 4px 10px;}
.set-liste .cat.hat-wert.is-shut .cat-head{padding-left:10px;padding-right:6px;}
.set-liste .cat-toggle{gap:10px;}
.set-liste .cat-body{padding:2px 14px 16px;}
.cat-zeichen{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;
  color:var(--farbe, var(--accent-deep));
  background:color-mix(in srgb, var(--farbe, var(--accent)) 20%, var(--surface));
  border:1px solid color-mix(in srgb, var(--farbe, var(--accent)) 40%, transparent);
}
.cat-zeichen svg{width:17px;height:17px;}
.set-liste .cat-chev{color:var(--farbe);}
.set-liste .cat-wert b{color:var(--ink);}
@media (max-width:430px){ .set-liste .cat-wert .cw-mehr{display:none;} }
/* Wird es noch enger (grosse Schrift auf einem kleinen Handy), faellt
   zuerst der Wert weg und erst danach gibt der Titel nach - der Pfeil bleibt
   immer im Bild. Gemessen wird die Kopfzeile selbst, nicht der Bildschirm:
   bei grosser Schrift ist die App gezoomt, und das sieht nur die Zeile. */
.set-liste .cat-head{container-type:inline-size;}
.set-liste .cat-toggle .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@container (max-width:300px){
  .set-liste .cat.hat-wert.is-shut .cat-wert{display:none;}
  .set-liste .cat.hat-wert.is-shut .cat-toggle{flex:0 1 auto;min-width:0;}
}
@container (max-width:262px){
  .set-liste .cat-toggle{gap:7px;}
  .set-liste .cat-toggle .t{font-size:12.5px;}
  .set-liste .cat-zeichen{width:27px;height:27px;border-radius:9px;}
  .set-liste .cat-zeichen svg{width:15px;height:15px;}
  .set-liste .cat-chev{padding-left:3px;padding-right:3px;}
}
/* Die beiden Knoepfe unter dem Tag im Kalender teilen sich die Zeile auch
   bei grosser Schrift, ohne ueber den Rand zu laufen. */
@media (max-width:400px){ .tb-tasten .btn{min-width:0;padding-left:10px;padding-right:10px;} }

/* Die Schriftgroesse: drei Proben nebeneinander - man sieht, was man
   bekommt, bevor man tippt. Die gewaehlte ist gefuellt wie ein Filter. */
.schrift-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.sw-schrift{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  min-height:62px;padding:8px 4px 8px;border-radius:15px;cursor:pointer;
  font-family:var(--font-body);color:var(--ink);
  background:color-mix(in srgb, var(--surface) 75%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur-schnell) var(--ease-feder);
}
.sw-schrift:active{transform:scale(.95);transition-duration:.06s;}
.sw-schrift .sw-aa{font-family:var(--font-display);font-weight:600;line-height:1;}
.sw-schrift .sw-name{font-size:10.5px;font-weight:600;color:var(--ink-soft);}
.sw-schrift.on{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.sw-schrift.on .sw-name{color:var(--ground);opacity:.8;}

/* Die Erinnerung: die Vorschau steht da wie eine Sprechblase im Chat. */
.erinn-blase{
  position:relative;margin:0 0 14px;padding:11px 13px;
  border-radius:18px 18px 18px 5px;white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:13px;line-height:1.5;color:var(--ink);
  background:color-mix(in srgb, var(--farbe, var(--accent)) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--farbe, var(--accent)) 30%, transparent);
}
.erinn-platz{margin-bottom:4px;}
.erinn-knoepfe{display:flex;gap:8px;}
.erinn-knoepfe .btn[type=submit]{flex:1;}
.erinn-termin{
  margin-top:14px;padding:12px;border-radius:18px;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.et-kopf{display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-size:12px;font-weight:700;color:var(--accent-deep);}
.et-kopf svg{width:16px;height:16px;flex:none;}
.et-knoepfe{display:flex;flex-wrap:wrap;gap:7px;}
.et-knoepfe .btn{flex:1 1 auto;min-width:0;}
.et-hint{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
/* Die Wahl der Vorlage - im Termin und in den Einstellungen dieselben Chips. */
.et-wahl{margin:0 0 10px;}
.et-blase{margin:0 0 10px;font-size:12.5px;}
.vl-wahl{margin:4px 0 14px;}
/* Nach dem Buchen: der Haken sagt "gespeichert", darunter die Frage. */
.bs-modal{max-width:440px;}
.bs-kopf{display:flex;align-items:center;gap:12px;padding-right:34px;}
.bs-haken{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--ok);background:var(--ok-soft);}
.bs-haken svg{width:22px;height:22px;}
.bs-txt{min-width:0;}
.bs-txt h3{margin:0;overflow-wrap:anywhere;}
.bs-txt .modal-sub{margin:3px 0 0;overflow-wrap:anywhere;}
.bs-frage{margin:16px 0 0;font-size:14px;font-weight:700;color:var(--ink);}
.bs-modal .erinn-termin{margin-top:8px;}
.bs-nein{width:100%;margin-top:10px;}
/* Eine neue Vorlage direkt im Nachrichtenkasten. */
.et-neu-knopf{cursor:pointer;font-family:var(--font-body);}
.et-neu-knopf.on{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.et-neu{margin:0 0 10px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);}
.et-neu .field{margin-bottom:10px;}
.et-neu .et-hint{margin:6px 0 10px;}
.et-neu-knoepfe{display:flex;flex-wrap:wrap;gap:7px;}
.et-neu-knoepfe .btn{flex:1 1 auto;min-width:0;}
.vl-neu svg{width:13px;height:13px;flex:none;}
/* Text direkt aendern: Plus unter der Blase, darunter (nur wenn geaendert) der Weg zurueck. */
.et-edit-feld{margin:0 0 10px;}
.et-edit-feld[hidden]{display:none;}
.et-edit-feld textarea{min-height:120px;font-size:13px;line-height:1.5;}
.et-aendern{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;}
.et-aendern [hidden]{display:none;}
.et-zurueck{border:0;background:none;padding:6px 2px;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.erinn-knoepfe .vl-weg{flex:none;width:46px;padding-left:0;padding-right:0;color:var(--warn);}
/* Ein Link, der wie ein Knopf aussieht, traegt keinen Unterstrich. */
a.btn{text-decoration:none;}

/* Die Schriftgroesse wirkt auf die ganze App, die Dialoge und die kurze
   Rueckmeldung. Nicht auf die Code-Eingabe: die ist genau auf die Hoehe
   des Bildschirms gebaut und wuerde sonst scrollen. */
html[data-schrift="groesser"]{--schrift:1.08;}
html[data-schrift="gross"]{--schrift:1.16;}
html[data-schrift] #app,
html[data-schrift] .overlay .modal,
html[data-schrift] #toast{zoom:var(--schrift, 1);}
html[data-schrift] #app:has(.sperre){zoom:1;}
html[data-schrift] .overlay .modal{max-height:min(calc(88vh / var(--schrift, 1)), calc(100% / var(--schrift, 1)));}

@media (hover:hover) and (pointer:fine){
  .sh-zahlen button:hover{background:var(--surface);}
  .sw-schrift:not(.on):hover{border-color:var(--accent);}
}

/* Oben die Visitenkarte: so, wie Evi sich vorstellt. Sie liegt wie eine
   Karte aus festem Papier auf der Seite - ein Hauch Licht in der Ecke und
   ein Ring um das Bild. Darunter die Felder in drei Gruppen,
   jede in ihrer eigenen Farbe wie in den Einstellungen. */
.vk{
  position:relative;overflow:hidden;
  margin:2px 0 14px;padding:18px 16px 14px;border-radius:26px;
  background:var(--surface);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 66%),
    var(--surface);
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
/* Der feine Bogen oben rechts (eine Praegung) ist weg - so hat Evi es
   gewollt. Das Licht in der Ecke bleibt. */
.vk-oben{position:relative;display:flex;align-items:center;gap:15px;min-width:0;}
.vk-bild{
  position:relative;flex:none;width:78px;height:78px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:none;color:var(--accent-deep);
  box-shadow:0 0 0 3px var(--surface), 0 0 0 4.5px color-mix(in srgb, var(--accent) 45%, transparent),
             0 12px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
  transition:transform var(--dur-schnell) var(--ease-feder);
}
.vk-bild:active{transform:scale(.95);transition-duration:.06s;}
/* Das Bild liegt fest im Kreis, egal welches Format es hat. Mit Hoehe 100 %
   allein wuchs ein Hochformat ueber den Rahmen hinaus - die Hoehe bezog sich
   nicht auf den Knopf. Jetzt fuellt es genau den Kreis, die Mitte des Bildes
   bleibt in der Mitte. */
.vk-bild img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  border-radius:50%;object-fit:cover;object-position:center 30%;display:block;
}
.vk-ini{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1;
  font-variation-settings:'opsz' 72,'SOFT' 50;}
.vk-fig{display:flex;} .vk-fig svg{width:34px;height:34px;}
/* Die kleine Kamera sagt: antippen, um das Bild zu aendern. */
.vk-kamera{
  position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 2.5px var(--surface);
}
.vk-kamera svg{width:14px;height:14px;}
.vk-txt{display:flex;flex-direction:column;min-width:0;gap:2px;}
.vk-studio{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);overflow-wrap:anywhere;
}
.vk-name{
  font-family:var(--font-display);font-size:clamp(21px, 6.2vw, 27px);font-weight:600;line-height:1.1;
  font-variation-settings:'opsz' 96,'SOFT' 50,'WONK' 1;letter-spacing:-.02em;color:var(--ink);
  overflow-wrap:anywhere;
}
.vk-studio.leer, .vk-name.leer{opacity:.45;}
.vk-zeilen{
  position:relative;display:flex;flex-direction:column;gap:7px;
  margin:16px 0 0;padding:14px 0 0;
  border-top:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
}
.vk-zeilen.ganz-leer{display:none;}
.vk-zeile{display:flex;align-items:flex-start;gap:9px;min-width:0;
  font-size:13px;line-height:1.4;color:var(--ink);}
.vk-zeile[hidden]{display:none;}
.vk-zeile > span:last-child{min-width:0;overflow-wrap:anywhere;}
.vk-z{flex:none;display:flex;color:var(--accent);margin-top:1px;}
.vk-z svg{width:16px;height:16px;}
/* Der Ring zeigt, wie viel vom Profil schon da ist. */
.vk-fuss{
  display:flex;align-items:center;gap:11px;margin-top:14px;padding:10px 11px;border-radius:16px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.vk-ring{
  --anteil:0;flex:none;position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--anteil) * 360deg),
             color-mix(in srgb, var(--accent) 16%, transparent) 0);
  transition:background var(--dur) var(--ease);
}
.vk-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--surface);}
.vk-ring b{position:relative;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-deep);}
.vk-satz{flex:1;min-width:0;font-size:12px;line-height:1.45;color:var(--ink-soft);}
.vk-satz strong{color:var(--ink);}
.vk-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.vk-knoepfe #vkTeilen{flex:1 1 auto;}

/* Die drei Gruppen: dieselbe gedrehte Farbe wie die Abschnitte der
   Einstellungen, damit beide Seiten aus einem Guss sind. */
.pf-form{display:flex;flex-direction:column;gap:10px;}
.pf-gruppe{
  --farbe:var(--accent);
  padding:13px 14px 2px;border-radius:20px;
  background:color-mix(in srgb, var(--farbe) 8%, var(--surface));
  border:1.5px solid color-mix(in srgb, var(--farbe) 40%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz);
}
@supports (color: oklch(from red l c h)){
  .pf-gruppe{--farbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));}
}
.pf-studio{--dreh:20;}
.pf-du{--dreh:130;}
.pf-kontakt{--dreh:250;}
.pf-recht{--dreh:330;}
.pf-kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pf-titel{display:flex;flex-direction:column;min-width:0;}
.pf-titel b{font-size:14px;font-weight:700;color:var(--ink);}
.pf-titel small{font-size:11.5px;line-height:1.35;color:var(--ink-soft);}

@media (hover:hover) and (pointer:fine){
  .vk-bild:hover{box-shadow:0 0 0 3px var(--surface), 0 0 0 4.5px var(--accent),
                            0 12px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);}
}

/* Die Galerie (neu gestaltet - so hat Evi es gewollt: ansprechend, serioes,
   einfach, sie soll sich von anderen Apps abheben). Oben eine Reihe Mappen,
   darunter die Bilder nach Monaten. Das Raster ist versetzt (die zweite
   Spalte beginnt tiefer) und laesst jedes Bild in seinem Format - nichts
   wird zugeschnitten. Titel und Kategorie stehen in einer dunklen Blende
   unten auf dem Bild. Jede Kategorie traegt ihre eigene Farbe, aus dem
   Akzent gedreht wie die Abschnitte der Einstellungen - sie steht im
   Zeichen, nicht im Rahmen. */
.style-item, .st-chip{--farbe:var(--accent);}
@supports (color: oklch(from red l c h)){
  .style-item, .st-chip{--farbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));}
}
.st-kopf{align-items:center;}
.st-kopf > .btn{flex:none;}
.st-suche{margin:0 0 14px;}

/* Ueber jeder Gruppe der Monat: gross, das Jahr leise daneben, eine feine
   Linie bis zur Anzahl - wie die Kopfzeile in einem Magazin. */
.st-gruppe + .st-gruppe{margin-top:26px;}
.st-monat{
  display:flex;align-items:baseline;gap:7px;margin:0 2px 12px;
  font-family:var(--font-display);color:var(--ink);
}
.st-monat-name{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.st-monat-jahr{font-size:13px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.st-monat-linie{flex:1;min-width:12px;height:1px;align-self:center;margin:0 3px;background:var(--line);}
.st-monat .cnt{
  align-self:center;min-width:22px;padding:2px 8px;border-radius:999px;text-align:center;
  font-family:var(--font-body);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--accent-deep);background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Das Raster: Spalten nebeneinander, jede von oben nach unten. Die Zahl der
   Spalten kommt aus dem Skript (--sp), jede zweite beginnt etwas tiefer. */
.st-raster{display:grid;grid-template-columns:repeat(var(--sp, 2), minmax(0, 1fr));gap:12px;align-items:start;}
.st-spalte{display:flex;flex-direction:column;gap:12px;min-width:0;}
.st-spalte:nth-child(even){padding-top:24px;}

.style-item{position:relative;margin:0;min-width:0;}
.st-raster .style-open{
  position:relative;display:block;width:100%;padding:0;border:none;border-radius:20px;overflow:hidden;
  background:var(--surface-2);line-height:0;cursor:zoom-in;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
             0 12px 24px -16px color-mix(in srgb, var(--ink) 50%, transparent);
  transition:transform var(--dur-schnell) var(--ease-feder), box-shadow var(--dur) var(--ease);
}
.st-raster .style-open:active{transform:scale(.97);transition-duration:.06s;}
/* Bis das Bild da ist, steht ein Platz im Hochformat - danach gilt sein
   eigenes Format. Ein sehr hohes Bild wird oben und unten beschnitten. */
.st-raster .style-open img{
  display:block;width:100%;height:auto;max-width:100%;aspect-ratio:auto 4 / 5;max-height:70vh;
  object-fit:cover;border-radius:0;
}

/* Die Blende: Titel und Kategorie in Weiss auf dunklem Verlauf - fest, weil
   sie auf einem Foto stehen und in jedem Design lesbar sein muessen (wie
   die Knoepfe im Vollbild). */
.st-etikett{
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:38px 12px 11px;line-height:1.25;text-align:left;color:#fff;
  background:linear-gradient(to top, rgba(10,12,18,.68), rgba(10,12,18,.36) 58%, rgba(10,12,18,0));
}
.st-titel{
  font-size:13.5px;font-weight:650;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.st-meta{
  display:flex;align-items:center;gap:5px;min-width:0;min-height:15px;
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;
}
.st-kat{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.st-z{flex:none;display:flex;color:var(--farbe);}
.st-z svg{width:13px;height:13px;}
.st-etikett .st-z{color:color-mix(in srgb, var(--farbe) 42%, #fff);}
.st-meta .st-z svg{width:12px;height:12px;}
/* Wem das Bild gilt, steht nur, wenn es jemandem zugeordnet ist - als
   kleine Pille oben rechts auf dem Bild. */
.style-item .st-kunden{top:10px;right:10px;padding:4px 8px 4px 6px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);}
@media (max-width:360px){
  .st-raster, .st-spalte{gap:9px;}
  .st-spalte:nth-child(even){padding-top:18px;}
  .st-titel{font-size:13px;}
  .st-meta{font-size:11px;gap:4px;}
  .st-etikett{padding:34px 10px 9px;}
  .st-monat-name{font-size:20px;}
}

/* Die Filter tragen Zeichen und Farbe ihrer Kategorie. */
.st-chip .st-z{color:var(--farbe);}
.st-chip.on .st-z{color:inherit;}
.st-filter{margin-bottom:16px;}

/* Leer: drei Rahmen wie an einer Wand, die auf Bilder warten. */
.st-leer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 20px 24px;border-radius:24px;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.st-leer p{margin:0 0 16px;max-width:34ch;font-size:13px;line-height:1.55;color:var(--ink-soft);}
.st-leer .empty-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.stl-rahmen{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px;}
.stl-rahmen span{
  display:block;width:46px;height:58px;border-radius:12px;
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
}
.stl-rahmen span:nth-child(2){width:58px;height:72px;transform:translateY(-6px);}
.stl-rahmen span:nth-child(3){height:50px;}

@media (hover:hover) and (pointer:fine){
  .st-raster .style-open:hover{box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 18px 32px -16px color-mix(in srgb, var(--ink) 55%, transparent);}
  .st-raster .style-open img{transition:transform .6s var(--ease);}
  .st-raster .style-open:hover img{transform:scale(1.035);}
}




























/* Die Hinweise: ruhige Karten, die Farbe sitzt im Rand. */
.buch-hinweis{
  border-radius:20px;border-width:1.5px;
  box-shadow:inset 0 1px 0 var(--glanz);
}
.buch-hinweis{border-color:color-mix(in srgb, var(--alert) 40%, transparent);}
.buch-hinweis.ruhig{background:color-mix(in srgb, var(--surface) 88%, transparent);border-color:color-mix(in srgb, var(--accent) 30%, transparent);}
.buch-hinweis.warn{border-color:color-mix(in srgb, var(--warn) 45%, transparent);}

































/* Das Monatsblatt liegt als Karte auf der Seite, und hinter den Tagen steht
   gross und blass die Monatszahl - wie auf einem Wandkalender. Jeder Tag
   toent sich nach dem, was er traegt: je mehr Termine, desto kraeftiger. So
   sieht man die vollen Tage des Monats, bevor man eine Marke liest. */
.cal-blatt{
  position:relative;isolation:isolate;overflow:hidden;
  padding:12px 10px 12px;border-radius:26px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.cal-blatt::after{
  content:attr(data-monat);position:absolute;z-index:-1;pointer-events:none;
  right:-6px;bottom:-34px;
  font-family:var(--font-display);font-weight:600;font-size:190px;line-height:1;
  letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  font-variation-settings:'opsz' 144,'SOFT' 100;
  color:color-mix(in srgb, var(--accent) 9%, transparent);
}
.cal-grid{gap:4px 3px;}
.cal-dow{padding-bottom:6px;}
/* Das Wochenende erkennt man an der Kopfzeile. Die Felder selbst bleiben
   ungetoent - eine Toenung heisst im Blatt "hier stehen Termine", und
   dasselbe Zeichen darf nie zweierlei heissen. */
.cal-grid > .cal-dow.we{color:var(--accent-deep);}
.cal-tag{border-radius:14px;}
/* Die Toenung nach Termine: eins, zwei, drei und mehr. */
.cal-tag.dicht-1{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.cal-tag.dicht-2{background:color-mix(in srgb, var(--accent) 19%, transparent);}
.cal-tag.dicht-3{background:color-mix(in srgb, var(--accent) 30%, transparent);}
.cal-tag.vorbei[class*="dicht-"]{opacity:.8;}
/* Gewaehlt ist ein feiner Ring - die Toenung darunter bleibt stehen, sie
   sagt ja etwas ueber den Tag. */
.cal-tag.sel, .cal-tag.sel:not(.zu){
  background-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--accent), 0 6px 14px -9px color-mix(in srgb, var(--accent) 80%, transparent);
}
.cal-tag.sel[class*="dicht-"]{box-shadow:inset 0 0 0 1.5px var(--accent);}
.cal-tag.sel.dicht-1{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.cal-tag.sel.dicht-2{background:color-mix(in srgb, var(--accent) 19%, transparent);}
.cal-tag.sel.dicht-3{background:color-mix(in srgb, var(--accent) 30%, transparent);}
.cal-tag.sel.zu-fest{background:var(--off-soft);}
.cal-tag.sel.zu-urlaub{background:var(--ok-soft);}
/* Die Legende steht als ruhige Zeile unter einer feinen Linie im Blatt. */
.cal-blatt .cal-legende{
  margin-top:12px;padding-top:10px;
  border-top:1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Ein kleines Stufenzeichen erklaert die Toenung - nur Farbe, drei Felder. */
.cal-legende .lg-dicht{display:inline-flex;gap:2px;}
.cal-legende .lg-dicht i{width:9px;height:9px;border-radius:3px;display:block;}
.cal-legende .lg-dicht .d1{background:color-mix(in srgb, var(--accent) 16%, transparent);}
.cal-legende .lg-dicht .d2{background:color-mix(in srgb, var(--accent) 30%, transparent);}
.cal-legende .lg-dicht .d3{background:color-mix(in srgb, var(--accent) 48%, transparent);}

/* Das Tagblatt: dieselbe Karte, links das Datum als Kalenderblatt wie im
   Wochenplan. */
.tagblatt{
  margin-top:14px;border-radius:24px;
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tb-kopf{justify-content:flex-start;}
.tb-blatt{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:46px;height:50px;border-radius:14px;
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  color:var(--ink);
}
.tb-blatt small{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.tb-blatt b{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.tb-blatt.heute{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.tb-blatt.heute small{color:var(--on-accent);opacity:.85;}
.tb-wann{flex:1 1 auto;min-width:0;}
.tb-tasten{flex:1 1 100%;}
.tb-tasten .btn{flex:1;}

/* Das Blatt bekommt oben denselben Lichtfleck wie die Seite - es gehoert
   zur App und nicht zum Betriebssystem. */
.overlay{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.modal{
  background:
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--ground);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 14px 44px rgba(0,0,0,.2);
}

@media (hover:hover) and (pointer:fine){
  .btn:not(.ghost):not(.subtle):not(.danger):not(.ein):not(.aus):hover:not([disabled]){
    background:linear-gradient(to bottom, var(--glanz-knopf), rgba(255,255,255,0) 60%), var(--accent);
    border-color:transparent;filter:brightness(1.06);
    box-shadow:
      inset 0 1px 0 var(--glanz-knopf),
      0 2px 4px color-mix(in srgb, var(--accent) 30%, transparent),
      0 14px 26px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  }
  .btn.subtle:hover:not([disabled]){background:color-mix(in srgb, var(--accent) 20%, var(--surface));}
  .btn.ghost:hover:not([disabled]){background:color-mix(in srgb, var(--surface) 80%, transparent);border-color:var(--accent);color:var(--accent-deep);}
  .cf-chip:not(.on):hover, .chip:not(.on):hover{background:var(--surface);border-color:var(--accent);color:var(--accent-deep);}.cal-pfeil:hover{background:var(--surface);border-color:var(--accent);}
  .cal-tag:not(.pad):not(.sel):hover{background:color-mix(in srgb, var(--accent) 6%, transparent);}
}


/* ---------- Die neuen Abschnitte der Einstellungen ----------
   Arbeitszeiten, Termine & Pausen, Leistungen, Datenschutz, Zuletzt
   geloescht und Hilfe (so hat Evi es gewollt). Alles aus den vorhandenen
   Bausteinen: Felder, .bu-tab, .weg-kreuz, .pl-neu-zeile. */

/* Arbeitszeiten: Tag, von - bis in einer Zeile. Wird es eng, steht der Tag
   kurz ("Mo") da. */
.az-liste{container:azliste / inline-size;display:flex;flex-direction:column;gap:6px;}
.az-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,96px) auto minmax(0,96px);
  align-items:center;gap:6px;margin:0;}
.az-zeile.field input{min-height:40px;padding:8px 8px;font-size:14px;text-align:center;}
.az-tag{font-size:13px;font-weight:650;color:var(--ink);min-width:0;}
.az-kurz{display:none;}
.az-zeile.zu{grid-template-columns:minmax(0,1fr) auto;padding:6px 0;}
.az-zu{font-size:12.5px;color:var(--ink-soft);}
.az-liste .az-zeile .zf-strich{align-self:center;margin:0;color:var(--ink-soft);}
.az-liste .set-bak{margin-top:8px;}
@container azliste (max-width:300px){
  .az-lang{display:none;} .az-kurz{display:inline;}
  .az-zeile{grid-template-columns:30px minmax(0,1fr) auto minmax(0,1fr);gap:4px;}
  .az-zeile.field input{padding:8px 2px;font-size:13px;}
}

/* Leistungen: Zeichen, Name, Kreuz - darunter die Dauer. */
.ls-liste{display:flex;flex-direction:column;margin:0 0 12px;}
.ls-zeile{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:4px 10px;
  padding:10px 0;border-bottom:1px solid var(--line);}
.ls-zeile:last-child{border-bottom:none;}
.ls-z{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;
  color:var(--farbe);background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 12%, transparent);}
.ls-z svg{width:16px;height:16px;}
.ls-z img{width:100%;height:100%;object-fit:cover;}
.ls-name{font-size:14px;font-weight:650;color:var(--ink);overflow-wrap:anywhere;}
.ls-werte{grid-column:2 / -1;display:flex;gap:8px;min-width:0;}
.ls-werte select{
  font:inherit;font-size:13.5px;color:var(--ink);min-width:0;height:38px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
.ls-werte select{flex:1 1 0;padding:0 8px;}
.ls-werte select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
/* Der Preis neben der Dauer - er steht nur auf der Buchungsseite. */
.ls-preis{flex:1 1 0;display:flex;align-items:center;gap:5px;min-width:0;}
.ls-preis input{font:inherit;font-size:13.5px;color:var(--ink);width:100%;min-width:0;height:38px;padding:0 10px;text-align:right;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.ls-preis span{flex:none;font-size:13px;color:var(--ink-soft);}
.ls-preis input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ls-neu{container:aufgneu / inline-size;}
/* Das Symbol ist ein Knopf: ein Tipp oeffnet "Symbol waehlen". Der kleine
   Stift sagt, dass das geht - wie die Kamera in der Auswahl im Terminbogen.
   Ohne overflow:hidden, sonst waere der Stift abgeschnitten; das Bild ist
   darum selbst rund. */
button.ls-z{position:relative;overflow:visible;padding:0;border:none;cursor:pointer;font:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder);}
button.ls-z:active{transform:scale(.9);transition-duration:.06s;}
button.ls-z img{border-radius:50%;}
.ls-stift{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);color:var(--ground);border:1.5px solid var(--surface);}
.ls-stift svg{width:8px;height:8px;}

/* Symbol waehlen (Einstellungen > Leistungen): "Meine Symbole" zum Hochladen,
   darunter die fertigen Zeichen in Gruppen. Jedes Feld ist ein Knopf; das
   gewaehlte traegt den Ring im Schatten, damit nichts springt. */
.sy-modal{max-width:460px;}
.sy-jetzt{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;
  color:var(--accent-deep);background:var(--accent-soft);}
.sy-jetzt svg{width:22px;height:22px;}
.sy-gruppe{margin-top:18px;}
.sy-titel{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-soft);}
.sy-raster{display:grid;grid-template-columns:repeat(auto-fill, minmax(48px, 1fr));gap:8px;}
.sy-halter{position:relative;display:block;min-width:0;}
.sy-feld{
  display:grid;place-items:center;width:100%;aspect-ratio:1;min-width:0;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sy-feld:active{transform:scale(.93);transition-duration:.06s;}
.sy-feld svg{width:24px;height:24px;}
.sy-feld img{display:block;width:100%;height:100%;object-fit:cover;}
.sy-feld.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep);
  box-shadow:inset 0 0 0 1.5px var(--accent);}
.sy-bild.on img{opacity:.9;}
/* "Hochladen" ist zwei Felder breit - in ein Feld passt das Wort bei 320 px nicht. */
.sy-hoch{grid-column:span 2;aspect-ratio:auto;min-height:48px;grid-auto-flow:column;gap:6px;justify-content:center;
  color:var(--accent-deep);background:var(--surface-2);}
.sy-hoch svg{width:18px;height:18px;}
.sy-hoch span{font-size:12.5px;font-weight:700;line-height:1;}
/* Das Kreuz sitzt auf der Ecke des Bildes - dasselbe .weg-kreuz wie ueberall. */
.sy-weg.weg-kreuz{position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);}
.sy-weg.weg-kreuz svg{width:9px;height:9px;}
.sy-tipp{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
.sy-auto{width:100%;margin-top:20px;}
.sy-auto.on{border-color:var(--accent);color:var(--accent-deep);}
@media (hover:hover) and (pointer:fine){
  .sy-feld:not(.on):hover{border-color:var(--accent);box-shadow:var(--shadow);}
  button.ls-z:hover{box-shadow:0 0 0 2px var(--accent-soft);}
}
/* In der Auswahl im Termin steht die Dauer leise neben dem Namen. */
.spick-info{margin-left:auto;padding-left:8px;flex:none;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}

/* Der Satz unter den Uhrzeiten: knapp oder ausserhalb der Arbeitszeit. */
.zeit-hinweis.eng{color:var(--wait);font-weight:600;}

/* Datenschutz: die Erklaerung als ruhiger Text in der Zeile. */
.ds-fehlt{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:14px;
  font-size:12.5px;line-height:1.45;color:var(--wait);background:var(--wait-soft);}
.ds-fehlt svg{flex:none;width:16px;height:16px;margin-top:1px;}
.ds-link{display:inline;padding:0;border:none;background:none;cursor:pointer;font:inherit;font-weight:700;
  color:inherit;text-decoration:underline;text-underline-offset:2px;}
.ds-knoepfe-oben{margin:0 0 12px;}
.ds-text{padding:14px 14px 4px;border-radius:16px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 45%, var(--surface));
  border:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--ink);overflow-wrap:break-word;hyphens:auto;}
.ds-text h3{margin:0 0 6px;font-size:16px;font-weight:700;}
.ds-text h4{margin:14px 0 4px;font-size:13px;font-weight:700;}
.ds-text p{margin:0 0 8px;}
.ds-text ul{margin:0 0 8px;padding-left:18px;}
.ds-text li{margin:0 0 4px;}
.ds-text li::marker{color:var(--farbe);}

/* Zuletzt geloescht: Zeichen oder kleines Bild, was es war, Zurueckholen. */
.korb-zeile{align-items:center;justify-content:flex-start;}
.korb-zeile .bz-n{flex:1;}
.korb-zeile .btn{flex:none;}
.korb-z{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;overflow:hidden;
  color:var(--farbe);background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 12%, transparent);}
.korb-z svg{width:17px;height:17px;}
.korb-z.bild img{width:100%;height:100%;object-fit:cover;}

/* Hilfe & Ueber die App */
.hl-liste{display:flex;flex-direction:column;gap:12px;}
.hl-punkt{display:flex;align-items:flex-start;gap:11px;}
.hl-z{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;
  color:var(--farbe);background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 12%, transparent);}
.hl-z svg{width:17px;height:17px;}
.hl-txt{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.45;}
.hl-txt b{font-size:13.5px;color:var(--ink);}
.hl-txt span{font-size:12.5px;color:var(--ink-soft);}
.hl-neu{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.5;color:var(--ink);}
.hl-neu li::marker{color:var(--farbe);}
.hl-ueber{display:flex;align-items:center;gap:12px;}
.hl-logo{flex:none;width:48px;height:48px;}
.hl-logo .lg{width:48px;height:48px;border-radius:50%;display:block;}

/* ============ Einstellungen, schlicht ============
   So hat Evi es gewollt: simpel und uebersichtlich. Steht zuletzt in dieser
   Datei und ueberstimmt darum die bunte Fassung darueber.
   - Alle Zeichen in einem Ton (dem Akzent), statt jede Zeile in einer
     eigenen gedrehten Farbe. Die --dreh-Werte bleiben stehen, wirken hier
     aber nicht mehr.
   - Die Werte rechts in einer leisen Schrift, ohne Fett und Kursiv. Passt
     einer nicht ganz, blendet schrittKnopfMessen() ihn aus (.passt-nicht)
     statt ihn mit "..." zu kuerzen.
   - Die Karte oben schlanker: kleineres Logo, flache Kacheln, ruhiger Grund. */
.set-design, .set-liste .cat{--farbe:var(--accent);}
.set-liste .cat-zeichen{
  width:30px;height:30px;border-radius:10px;
  color:var(--accent-deep);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:none;
}
.set-liste .cat-zeichen svg{width:16px;height:16px;}
.set-liste .cat-chev{color:var(--ink-soft);}
.set-liste .cat-wert, .set-liste .cat.hat-wert.is-shut .cat-wert{font-size:11.5px;}
.set-liste .cat-wert b, .set-liste .cat-wert .leer{
  flex:none;overflow:visible;text-overflow:clip;
  font-weight:500;font-style:normal;opacity:1;color:var(--ink-soft);
}
.set-liste .cat-wert.passt-nicht{visibility:hidden;}
.set-liste .cat-wert .cw-mehr{opacity:.8;}
.set-hint{font-size:12px;line-height:1.45;}

.set-held{
  margin:2px 0 12px;padding:14px 14px 12px;border-radius:22px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.sh-oben{gap:12px;}
.sh-logo{width:46px;height:46px;box-shadow:none;}
.sh-logo .sh-bild{width:40px;height:40px;}
.view .set-held h1{font-size:clamp(18px, 5.2vw, 21px);margin:1px 0 1px;}
.sh-leer{font-size:15px;}
.sh-sub{font-size:12px;}
.sh-zahlen{gap:6px;margin-top:12px;}
.sh-zahlen button{padding:8px 10px;border-radius:13px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  border-color:transparent;}
.sh-zahlen b{font-size:17px;}
.sh-auswertung{margin-top:8px;padding-top:9px;padding-bottom:9px;}
/* Ganz eng faellt der Wert weg (display:none) - der Pfeil bleibt trotzdem
   rechts in der Ecke, statt am Titel zu kleben. Ein langes Wort bricht an
   der Silbe ("Nachrichten-vorlagen"), nicht irgendwo. */
@container (max-width:300px){
  .set-liste .cat.hat-wert.is-shut .cat-wert ~ .cat-chev{margin-left:auto;}
}
.set-liste .cat-toggle .t{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;}
/* Auf der eigenen Adresse fehlt die Kachel "Gesichert" (Firestore sichert
   selbst) - dann teilen sich zwei Kacheln die Reihe. */
.sh-zahlen.zwei{grid-template-columns:repeat(2, minmax(0, 1fr));}
@container held (max-width:249px){ .sh-zahlen.zwei{grid-template-columns:1fr;} }