/* 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-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;}
.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;}
.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:calc(88vh / 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-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: ruhig, uebersichtlich,
   leicht zu bedienen). Die Bilder stehen ohne Rahmen in einem gleichmaessigen
   Raster, nach Monaten gruppiert; unter jedem Bild zwei kurze Zeilen. 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;}

/* Ueber jeder Gruppe der Monat als Glaspille - lesbar auch ueber den Bergen. */
.st-gruppe + .st-gruppe{margin-top:20px;}
.st-monat{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 7px 5px 12px;
  border-radius:999px;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.st-monat .cnt{
  min-width:20px;padding:1px 7px;border-radius:999px;text-align:center;
  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);
}

.style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;}
@media (min-width:600px){ .style-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px;} }
@media (min-width:900px){ .style-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }

.style-item{position:relative;margin:0;min-width:0;}
.style-grid .style-open{
  border:none;border-radius:18px;background:var(--surface-2);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
             0 10px 22px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  transition:transform var(--dur-schnell) var(--ease-feder), box-shadow var(--dur) var(--ease);
}
.style-grid .style-open:active{transform:scale(.97);transition-duration:.06s;}
.style-grid .style-open img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:18px;}
/* Zwei Zeilen unter dem Bild, immer gleich hoch - so stehen alle Reihen auf
   einer Linie. */
.st-etikett{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 4px 0;}
.st-titel{
  font-size:13.5px;font-weight:650;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.st-meta{
  display:flex;align-items:center;gap:5px;min-width:0;min-height:15px;
  font-size:11.5px;font-weight:500;line-height:1.3;color:var(--ink-soft);
  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-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:8px;right:8px;padding:4px 8px 4px 6px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);}
@media (max-width:360px){
  .style-grid{gap:14px 9px;}
  .st-titel{font-size:13px;}
  .st-meta{font-size:11px;gap:4px;}
}

/* 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){
  .style-grid .style-open:hover{box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 16px 30px -14px color-mix(in srgb, var(--ink) 55%, transparent);}
}




























/* 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:nth-child(7n+6), .cal-grid > .cal-dow:nth-child(7n){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);
  box-shadow:inset 0 1px 0 var(--glanz), 0 -10px 40px rgba(0,0,0,.18);
}

@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);}
.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;} }