/* Die Zeilen liegen nicht mehr offen auf dem Hintergrund, sondern auf einer
   gedeckten Karte - sonst laufen die Berge durch Namen und Nummern. Jede
   Buchstabengruppe ist eine Karte: die erste Zeile rundet oben, die letzte
   unten, dazwischen trennt eine feine Linie. */
.ku-zeile{
  background:var(--surface);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding-right:8px;
}
.cust-gruppe > .ku-zeile:first-child,
.cust-buchstabe + .ku-zeile{
  border-top:1px solid var(--line);
  border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm);
}
.cust-gruppe > .ku-zeile:last-child{
  border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}
.cust-gruppe > .ku-zeile.warn:last-child{box-shadow:inset 3px 0 0 var(--danger), var(--shadow);}
.cust-gruppe + .cust-gruppe{margin-top:10px;}
/* Die Allergie steht nur noch als rotes Ausrufezeichen in einer kleinen
   Scheibe - so hat Evi es gewollt: das Wort nahm "noch kein Termin" den
   Platz weg. Was genau, verraet ein Tipp darauf; der Name fuer Vorleser
   steht im aria-label. Die rechte Angabe muss darum nicht mehr nachgeben. */
.ku-mark.al{
  width:28px;height:28px;padding:0;gap:0;border-radius:50%;
  background:var(--warn-soft);color:var(--warn);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent);
}
.ku-mark.al svg{width:16px;height:16px;}
.ku-zeile:has(.ku-mark.al) .ku-wann:not(.kommt){max-width:none;}
@media (max-width:420px){
  .ku-mark.al{padding:0;gap:0;}
  .ku-mark.al svg{width:15px;height:15px;}
}
/* Der Buchstabe ueber der Gruppe ist eine kleine gedeckte Pille statt eines
   Bandes in der Farbe des Grundes - ein Band laege als flacher Streifen
   ueber den Bergen. Er klebt beim Scrollen weiter oben fest. */
.cust-buchstabe{
  width:fit-content;min-width:28px;text-align:center;
  margin:0 0 6px 4px;padding:4px 10px;top:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:inset 0 1px 0 var(--glanz);
}
/* Die Zeile rundet ihre Ecken - der Druck soll darin bleiben. */
.ku-tipp{border-radius:inherit;}

/* Jede Kundin traegt ihre Farbe (--dreh aus kundinDreh()). Ohne Browser-
   Unterstuetzung fuer gedrehte Farben bleibt es beim Akzent. */
.ku-ton{--kfarbe:var(--accent);}
@supports (color: oklch(from red l c h)){
  .ku-ton{--kfarbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));}
}
.avatar.ku-ton{
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--kfarbe) 17%, var(--surface));
  color:var(--kfarbe);
}
/* Der Ring sagt, wie nah sie gerade ist: kraeftig = kommt bald, zart = war
   kuerzlich da oder ist spaeter geplant, keiner = lange nicht gesehen. Die
   Luecke davor hat die Farbe der Karte, darum liegen Bilder mit Ring immer
   auf einer Karte. Ein Schatten, kein Rand - so springt nichts. */
.avatar.ring-bald{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--kfarbe);}
.avatar.ring-nah{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--line);}
.avatar.ring-nah{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--kfarbe) 40%, transparent);}

/* Die Reihe oben: wer bald kommt und wer zuletzt da war, rund wie Stories.
   Sie rollt fuer sich zur Seite und liegt auf einer Karte. */
.ku-kreise{
  margin:0 0 14px;padding:12px 0 8px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.ku-kreise.mit-leiste{margin-right:26px;}
.kk-titel{
  padding:0 14px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.kk-reihe{
  display:flex;gap:4px;overflow-x:auto;padding:6px 12px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.kk-reihe::-webkit-scrollbar{display:none;}
.kk{
  flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:none;padding:0 2px;cursor:pointer;scroll-snap-align:start;
  font-family:var(--font-body);color:var(--ink);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder);
}
.kk:active{transform:scale(.94);transition-duration:.06s;}
.kk .avatar{width:54px;height:54px;margin-bottom:6px;}
.kk-name{
  max-width:100%;font-size:12px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kk-wann{
  max-width:100%;font-size:10.5px;font-weight:600;line-height:1.2;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kk-wann.kommt{color:var(--accent-deep);font-weight:700;}

/* Der Kopf der Akte: gross das Bild mit Ring, darunter Name, Kontakt, seit
   wann sie kommt, und drei Zahlen. Die Karte ist in ihrer Farbe getoent. */
.ka-held{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin:0 0 16px;padding:22px 14px 14px;border-radius:24px;
  background:var(--surface);
  background:color-mix(in srgb, var(--kfarbe) 7%, var(--surface));
  border:1.5px solid var(--line);
  border-color:color-mix(in srgb, var(--kfarbe) 30%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), var(--shadow);
}
.ka-bild .avatar{width:92px;height:92px;}
.ka-held .avatar.ring-bald{box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--kfarbe);}
.ka-held .avatar.ring-nah{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--line);}
.ka-held .avatar.ring-nah{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--kfarbe) 40%, transparent);}
.ka-bild .cam{right:-1px;bottom:-1px;width:28px;height:28px;border-color:var(--surface);}
.ka-bild .cam svg{width:13px;height:13px;}
.ka-name{
  margin:14px 0 0;font-family:var(--font-display);font-size:24px;font-weight:650;
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere;
}
.ka-kontakt{margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink-soft);overflow-wrap:anywhere;}
.ka-seit{
  margin-top:10px;padding:4px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:var(--ink);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--kfarbe) 14%, var(--surface));
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--kfarbe) 30%, transparent);
}
.ka-seit.neu{color:var(--ink-soft);}
.ka-zahlen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line);
  border-top-color:color-mix(in srgb, var(--ink) 10%, transparent);
}
.ka-zahl{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:0 4px;}
.ka-zahl + .ka-zahl{border-left:1px solid var(--line);}
.ka-zahl + .ka-zahl{border-left-color:color-mix(in srgb, var(--ink) 10%, transparent);}
.ka-zahl .v{
  max-width:100%;font-size:17px;font-weight:700;line-height:1.25;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ka-zahl.dran .v{color:var(--accent-deep);}
.ka-zahl .l{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.3;color:var(--ink-soft);
}
.ka-zahl .l small{
  display:block;margin-top:1px;font-size:10.5px;font-weight:600;
  letter-spacing:0;text-transform:none;
}
/* Die Leistung darf auf zwei Zeilen stehen - gekuerzt waere sie in einer
   Drittelspalte fast immer. Das Zeichen steht darueber, nicht daneben. */
.ka-liebling{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;line-height:1.2;}
.ka-liebling .kl-z{display:flex;flex:none;color:var(--accent-deep);}
.ka-liebling .kl-z svg{width:15px;height:15px;}
.ka-liebling .kl-t{
  max-width:100%;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}

/* Ein eigener Auftritt statt eines Tresors: das Logo auf einer feinen Bahn,
   auf der ein kleiner Mond kreist; darunter ein Gruss nach der Tageszeit;
   und die Felder auf einer Glasflaeche, durch die die Berge scheinen. */
.sperre{justify-content:center;padding-top:26px;}
.sperre::before{
  background:
    radial-gradient(60% 38% at 50% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(55% 30% at 50% 100%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 72%);
  opacity:1;
}
/* Die Bahn um das Logo: gestrichelt, mit einem Punkt darauf, und sie dreht
   sich so langsam, dass man es eher ahnt als sieht. Bewegt wird nur
   transform - das bleibt fluessig. */
.sperre-logo-ring{
  position:relative;margin-bottom:18px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), 0 14px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sperre-logo-ring::before{
  content:'';position:absolute;inset:-12px;border-radius:50%;pointer-events:none;
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background:radial-gradient(circle at 50% 0, var(--accent) 3.5px, transparent 4px);
  will-change:transform;
  animation:sperreBahn 36s linear infinite;
}
.sperre-logo-ring::after{
  content:'';position:absolute;inset:-24px;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
@keyframes sperreBahn{to{transform:rotate(360deg);}}
.sperre-name{
  font-size:27px;font-weight:600;line-height:1.1;
  font-variation-settings:'opsz' 96,'SOFT' 50,'WONK' 1;letter-spacing:-.02em;
}
.sperre-datum{margin-top:4px;font-size:12.5px;color:var(--ink-soft);}
/* Ohne die Marke darunter steht der Gruss direkt unter dem Logo - er
   braucht Luft zum aeusseren stillen Ring, der 24 px ueber das Feld reicht. */
.sperre-logo-ring + .sperre-name{margin-top:16px;}
@media (max-height:680px){ .sperre-logo-ring + .sperre-name{margin-top:4px;} }
.sperre-frage{
  margin-top:14px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-color:color-mix(in srgb, var(--ink) 10%, transparent);
}
/* Die Glasflaeche, auf der die Felder der Anmeldung liegen. */
.sperre-feld{
  padding:18px 20px;border-radius:34px;
  background:color-mix(in srgb, var(--surface) 42%, transparent);
  border:1px solid rgba(255,255,255,.35);
  border-color:color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 var(--glanz), 0 24px 50px -24px color-mix(in srgb, var(--accent) 55%, transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sperre-feld{background:var(--surface);}
}

.sperre-hilfe{
  margin-top:18px;border-color:transparent;background:transparent;
  text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset:4px;
}
@media (hover:hover) and (pointer:fine){
  .sperre-hilfe:hover{background:transparent;border-color:transparent;color:var(--accent-deep);}
}
@media (max-height:740px){
  .sperre-logo-ring{margin-bottom:14px;}
  .sperre-name{font-size:23px;}
  .sperre-frage{margin-top:10px;}
  .sperre-feld{padding:14px 16px;border-radius:30px;}
  .sperre-hilfe{margin-top:10px;}
}
@media (max-height:680px){
  .sperre{padding-top:20px;}
  .sperre-logo-ring::after{display:none;}
  .sperre-logo-ring::before{inset:-8px;}
  .sperre-name{font-size:20px;}
  .sperre-datum{font-size:11.5px;margin-top:2px;}
  .sperre-frage{margin-top:8px;padding:5px 13px;}
  .sperre-feld{padding:10px 12px;border-radius:26px;}
  .sperre-hilfe{margin-top:6px;padding:6px 14px;}
}
/* Das kleinste Handy (320 x 568): hier zaehlt jeder Pixel, damit nichts
   scrollt. */
@media (max-height:600px){
  .sperre{padding-top:14px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .sperre-logo-ring{width:66px;height:66px;margin-bottom:10px;}
  .sperre-logo{width:48px;height:48px;}
}
@media (prefers-reduced-motion:reduce){ .sperre-logo-ring::before{animation:none;} }

/* Registrierung und Anmeldung (statt der Zifferntasten, so hat Evi es
   gewollt). Sie tragen dasselbe Gewand wie vorher die Code-Eingabe: Logo
   auf der Bahn, Gruss, Pille, Glasflaeche. Neu sind nur die Felder darauf. */
.zg h1.sperre-name{margin:0;text-wrap:balance;}
.sperre-logo-ring + h1.sperre-name{margin-top:16px;}
.zg-satz{margin-top:6px;max-width:320px;text-wrap:balance;}
.zg .sperre-feld{
  width:100%;max-width:380px;margin-top:18px;
  display:grid;gap:12px;text-align:left;
}
.zg .sperre-frage{justify-self:center;margin:0 0 2px;text-align:center;}
.zg .sperre-frage[hidden]{display:none;}
.zg.rein .sperre-feld{animation:zgRein .5s var(--ease) both;animation-delay:var(--rein, 0ms);}
@keyframes zgRein{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
/* Der Ring um das Logo fuellt sich mit jedem Schritt der Registrierung. Er
   liegt genau auf der gestrichelten Bahn (inset -12px wie ::before). */
.zg-fort{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);
  transform:rotate(-90deg);pointer-events:none;overflow:visible;}
.zg-fort circle{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1;transition:stroke-dashoffset .7s var(--ease);}
@media (max-height:680px){ .zg-fort{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);} }
/* Das Logo von MyLifeBase ist ein abgerundetes Quadrat - Bahn, Punkt,
   stiller Ring und Fortschritt laufen in derselben Form darum (so hat Evi
   es gewollt). Die runde Bahn (::before) tritt dafuer ab; der Punkt faehrt
   als kurzer Strich mit runden Enden die Linie entlang, statt dass sich die
   ganze Form dreht. Die Rundungen sind so gerechnet, dass alle Linien den
   gleichen Abstand zum Logo halten. */
.sperre-logo-ring.eckig::before{display:none;}
.sperre-logo-ring.eckig::after{border-radius:31%;}
.zg-bahn{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);
  pointer-events:none;overflow:visible;}
.zg-bahn path{fill:none;}
.zg-bahn-linie{stroke:var(--line);stroke:color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width:.8;stroke-dasharray:2.3 2.3;}
.zg-bahn-punkt{stroke:var(--accent);stroke-width:5.5;stroke-linecap:round;
  stroke-dasharray:0 100;animation:zgBahnPunkt 36s linear infinite;}
@keyframes zgBahnPunkt{to{stroke-dashoffset:-100;}}
@media (prefers-reduced-motion:reduce){ .zg-bahn-punkt{animation:none;} }
.zg-fort.eckig{transform:none;}
.zg-fort path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1;transition:stroke-dashoffset .7s var(--ease);}
@media (max-height:680px){ .zg-bahn{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);} }

/* Wo man steht: zwei Perlen auf einem Faden. */
.zg-schnur{position:relative;display:flex;justify-content:space-between;width:180px;margin-top:16px;}
.zg-schnur::before{content:'';position:absolute;left:24px;right:24px;top:6px;height:1px;background:var(--line);}
.zg-perle{position:relative;display:grid;justify-items:center;gap:6px;min-width:48px;
  font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);}
.zg-perle i{width:13px;height:13px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease-feder);}
.zg-perle.fertig i{background:var(--accent);border-color:var(--accent);}
.zg-perle.jetzt{color:var(--ink);font-weight:600;}
.zg-perle.jetzt i{background:var(--accent);border-color:var(--accent);transform:scale(1.25);
  box-shadow:0 0 0 4px var(--accent-soft);}

/* Das Feld: Zeichen vorn, das Wort schwebt beim Tippen nach oben. 16 px
   Schrift im Feld - kleiner, und das iPhone zoomt beim Hineintippen. */
.zg-ein{position:relative;display:flex;align-items:center;gap:10px;height:56px;padding:0 6px 0 14px;
  border-radius:16px;background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.zg-ein:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.zg-ein > svg{width:19px;height:19px;flex:none;color:var(--ink-soft);transition:color var(--dur) var(--ease);}
.zg-ein:focus-within > svg{color:var(--accent-deep);}
.zg-fl{position:relative;flex:1;min-width:0;align-self:stretch;}
.zg-fl input{position:absolute;inset:0;width:100%;border:0;outline:0;background:transparent;box-shadow:none;
  padding:21px 8px 7px 0;font:inherit;font-size:16px;color:var(--ink);border-radius:0;}
.zg-fl input:disabled{opacity:.5;}
.zg-fl label{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:100%;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;
  font-size:15px;color:var(--ink-soft);
  transition:top var(--dur) var(--ease),font-size var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);}
.zg-fl input:focus + label,
.zg-fl input:not(:placeholder-shown) + label{top:15px;font-size:11.5px;letter-spacing:.04em;}
.zg-auge{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.zg-auge svg{width:20px;height:20px;}
.zg-unsichtbar{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}

/* Wie stark das Passwort ist: vier Glieder, dieselben Farben wie ueberall. */
.zg-staerke{display:grid;grid-template-columns:repeat(4,1fr) 64px;gap:6px;align-items:center;margin:-2px 2px 0;}
.zg-staerke span{height:5px;border-radius:5px;background:var(--line);transition:background var(--dur) var(--ease);}
.zg-staerke b{font-size:12px;font-weight:600;color:var(--ink-soft);text-align:right;}
.zg-staerke[data-n="1"] span:nth-child(-n+1){background:var(--off);}
.zg-staerke[data-n="2"] span:nth-child(-n+2){background:var(--wait);}
.zg-staerke[data-n="3"] span:nth-child(-n+3){background:var(--accent);}
.zg-staerke[data-n="4"] span:nth-child(-n+4){background:var(--ok);}
.zg-hinweis{margin:0 2px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}

/* Der Knopf: gross, gefuellt, der Pfeil rueckt beim Ueberfahren ein Stueck. */
.zg .btn.zg-los{width:100%;height:54px;font-size:16px;
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.zg .btn.zg-los svg{width:18px;height:18px;transition:transform var(--dur) var(--ease);}
.zg-reihe{display:flex;gap:10px;}
.zg-reihe .btn.zg-los{flex:1;width:auto;}
.zg .btn.zg-zurueck{flex:0 0 54px;height:54px;padding:0;color:var(--ink);}
.zg .btn.zg-zurueck svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){
  .zg .btn.zg-los:not([disabled]):hover svg{transform:translateX(3px);}
  .zg-auge:hover{color:var(--ink);background:var(--accent-soft);}
}
.zg .sperre-feld.ruettel{animation:ruetteln .4s ease;}

/* "Angemeldet bleiben" unter dem Passwort - dasselbe Kaestchen wie ueberall
   (.kaestchen), die ganze Zeile ist der Knopf, damit der Daumen sicher trifft. */
.zg-bleiben{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  margin:-2px 0 0;padding:6px 8px 6px 4px;border:none;border-radius:10px;background:none;cursor:pointer;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.zg-bleiben:active .kaestchen{transform:scale(.88);transition-duration:.06s;}
.zg-bleiben:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
@media (max-height:680px){ .zg-bleiben{padding-block:3px;} }

/* Fertig: ein Haken, der aufgeht, und was angelegt wurde. */
.zg-fertig{justify-items:center;}
.zg-haken{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok);animation:zgHaken .6s var(--ease-feder);}
.zg-haken svg{width:34px;height:34px;}
@keyframes zgHaken{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
.zg-zusammen{width:100%;margin:0;display:grid;}
.zg-zusammen div{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);}
.zg-zusammen div:last-child{border-bottom:0;}
.zg-zusammen dt{color:var(--ink-soft);font-size:13.5px;}
.zg-zusammen dd{margin:0;font-weight:600;font-size:14px;text-align:right;overflow-wrap:anywhere;min-width:0;}

/* Die Anmeldung soll nicht leer wirken (so hat Evi es gewollt): oben die
   Uhrzeit neben dem Datum, in der Glasflaeche eine Kontokarte mit Bild,
   Name und E-Mail, darunter ein Impuls fuer den Tag und leise der
   Leitsatz. Aus den Daten steht dort nichts - es bleibt ein Sichtschutz. */
.zg-wann{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 7px;}
.zg-tz{display:inline-grid;place-items:center;color:var(--accent-deep);}
.zg-tz svg{width:14px;height:14px;}
.zg-punkt{width:3px;height:3px;border-radius:50%;background:var(--ink-soft);opacity:.6;}
.zg-uhr{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;}

.zg-konto{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:18px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glanz);}
.zg-konto-bild{position:relative;flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);
  font-size:17px;font-weight:600;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);}
.zg-konto-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zg-konto-bild svg{width:22px;height:22px;}
.zg-konto-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left;}
.zg-konto-text b{font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.zg-konto-mail{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--ink-soft);}
.zg-konto-mail svg{width:13px;height:13px;flex:none;}
.zg-konto-mail span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.zg-anmelden .sperre-feld{gap:11px;}
/* Eine lange E-Mail darf die Flaeche nicht aufweiten - sie wird hinten
   gekuerzt und steht ganz im Tooltip. */
.zg .sperre-feld{grid-template-columns:minmax(0,1fr);}
.zg-anmelden .sperre-hilfe{margin-top:12px;}
/* Unter dem Knopf: "Passwort vergessen?" und "Jetzt registrieren"
   nebeneinander - so hat Evi es gewollt. Wird es eng, rutscht das zweite
   darunter. */
.zg-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:2px;
  margin-top:14px;}
.zg-links .sperre-hilfe, .zg-anmelden .zg-links .sperre-hilfe{margin-top:0;padding:8px 7px;font-size:12px;}
.zg-links .zg-neu{color:var(--accent-deep);font-weight:700;}
@media (max-width:340px){ .zg-links .sperre-hilfe, .zg-anmelden .zg-links .sperre-hilfe{padding:8px 4px;font-size:11.5px;} }
/* Die Kontokarte: rechts der Weg zu einem anderen Konto. */
.zg-konto-wechsel{flex:none;padding:7px 11px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--accent-deep);
  background:var(--accent-soft);border:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);}
.zg-konto-wechsel:active{transform:scale(.95);transition-duration:.06s;}
.zg-kopf-satz{font-size:13px;color:var(--ink-soft);text-align:left;margin:0 2px;}
@media (max-height:680px){ .zg-links{margin-top:6px;} }

.zg-impuls{width:100%;max-width:380px;margin:12px 0 0;padding:13px 16px;border-radius:20px;
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;align-items:center;text-align:left;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 50%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 18%, transparent);}
.zg-impuls-zeichen{grid-row:1 / 3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);}
.zg-impuls-zeichen svg{width:16px;height:16px;}
.zg-impuls figcaption{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.zg-impuls blockquote{margin:0;font-size:14.5px;font-style:italic;line-height:1.4;color:var(--ink);text-wrap:pretty;}
.zg.rein .zg-impuls{animation:zgRein .5s var(--ease) both;animation-delay:calc(var(--rein, 0ms) + 120ms);}

.zg-leitsatz{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  margin:14px 0 0;font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);}
.zg-leitsatz::before,.zg-leitsatz::after{content:'';flex:none;width:18px;height:1px;background:var(--line);}
/* Schmal ohne die Striche - der Satz selbst bleibt in einer Zeile. */
@media (max-width:370px){ .zg-leitsatz::before,.zg-leitsatz::after{display:none;} }
.zg-leitsatz span:last-child{color:var(--ink);font-weight:600;}
/* Wird es knapp, weichen erst der Leitsatz, dann der Impuls - Konto,
   Passwort und Knopf bleiben immer ohne Scrollen erreichbar. */
@media (max-height:720px){ .zg-leitsatz{display:none;} }
@media (max-height:640px){ .zg-impuls{display:none;} }

/* Die Felder brauchen mehr Hoehe als die Tasten. Bis 780 px Hoehe wird
   das Logo kleiner und alles rueckt zusammen; darunter darf die Seite
   scrollen, statt dass etwas abgeschnitten wird. */
@media (max-height:780px){
  .zg.sperre{padding-top:22px;}
  .zg .sperre-logo-ring{width:84px;height:84px;margin-bottom:10px;}
  .zg .sperre-logo{width:60px;height:60px;}
  .zg .sperre-logo-ring::after{display:none;}
  .zg .sperre-logo-ring::before, .zg-fort, .zg-bahn{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);}
  .zg .sperre-logo-ring + .sperre-name{margin-top:10px;}
  .zg .sperre-name{font-size:23px;}
  .zg .sperre-feld{margin-top:14px;gap:10px;padding:14px 16px;}
  .zg-schnur{margin-top:12px;}
}
@media (max-height:680px){
  .zg .sperre-feld{margin-top:12px;gap:10px;}
  .zg-schnur{margin-top:10px;}
  .zg-ein{height:52px;}
  .zg .btn.zg-los, .zg .btn.zg-zurueck{height:50px;}
}
@media (prefers-reduced-motion:reduce){
  .zg.rein .sperre-feld, .zg-haken{animation:none;}
}

/* Face ID bei der Anmeldung (so hat Evi es gewollt): es startet von selbst,
   dazu ein kleines rundes Zeichen in der Kontokarte neben der E-Mail - kein
   eigener Knopf zwischen Konto und Passwort. */
.zg-konto-bio{flex:none;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;padding:0;
  color:var(--accent-deep);background:var(--accent-soft);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);}
.zg-konto-bio svg{width:21px;height:21px;}
.zg-konto-bio:active{transform:scale(.9);transition-duration:.06s;}
.zg-konto-bio:disabled{opacity:.55;}
.zg-konto-bio:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.zg-konto-bio[hidden], .ag-wichtig[hidden], .zg-offline[hidden]{display:none;}
.zg-konto:has(.zg-konto-bio:not([hidden])){gap:8px;}
/* Schmal (320 px): Bild, Zeichen und "Wechseln" ruecken zusammen, damit
   Name und E-Mail noch lesbar bleiben. */
.zg-konto{container:konto / inline-size;}
@container konto (max-width:290px){
  .zg-konto{padding:8px 8px 8px 10px;}
  .zg-konto-bild{width:36px;height:36px;font-size:15px;}
  .zg-konto-bio{width:32px;height:32px;} .zg-konto-bio svg{width:19px;height:19px;}
  .zg-konto-wechsel{padding:6px 8px;font-size:11px;}
}

/* Ohne Internet: eine leise Pille unter Datum und Uhrzeit. */
.zg-offline{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:6px 12px;
  border-radius:999px;font-size:12.5px;line-height:1.3;text-align:left;color:var(--ink);
  background:var(--wait-soft);border:1px solid color-mix(in srgb, var(--wait) 35%, transparent);}
.zg-offline svg{width:15px;height:15px;flex:none;color:var(--wait);}

/* Die Konten auf diesem Geraet: kleine Bilder nebeneinander, das gewaehlte
   mit Ring in der Akzentfarbe. Rollt fuer sich, wenn es viele sind. */
.zg-konten{display:flex;justify-content:center;gap:12px;margin:0 -4px;padding:2px 4px 0;
  overflow-x:auto;scrollbar-width:none;}
.zg-konten::-webkit-scrollbar{display:none;}
.zg-kk{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:56px;padding:0;
  border:none;background:none;cursor:pointer;font:inherit;color:var(--ink-soft);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.zg-kk-bild{position:relative;width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:15px;font-weight:600;
  background:var(--accent-soft);color:var(--accent-deep);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);}
.zg-kk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zg-kk-name{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;}
.zg-kk.an{color:var(--ink);font-weight:600;}
.zg-kk.an .zg-kk-bild{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);}
.zg-kk:not(.an) .zg-kk-bild{opacity:.8;}
.zg-kk:active .zg-kk-bild{transform:scale(.92);transition-duration:.06s;}
.zg-kk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px;}
@media (max-height:680px){ .zg-kk-name{display:none;} .zg-kk-bild{width:34px;height:34px;} }

/* Licht nach der Tageszeit (so hat Evi es gewollt). Die Toene stehen fest
   wie Korn und Glanzkante: sie stellen Licht dar, keine Farbe des Designs -
   morgens warm und hell, abends und nachts legt sich ein leiser Schatten
   ueber die Seite. Tagsueber bleibt es beim gewohnten Schimmer. */
.zg-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);}
.zg-zeit-morgen .zg-licht{opacity:1;background:
  radial-gradient(58% 34% at 50% 12%, rgba(255,190,120,.30), transparent 72%),
  radial-gradient(40% 26% at 22% 4%, rgba(255,228,176,.26), transparent 70%);}
.zg-zeit-abend .zg-licht{opacity:1;background:
  radial-gradient(55% 32% at 50% 12%, rgba(255,150,110,.14), transparent 72%),
  linear-gradient(to bottom, rgba(12,16,32,.03), rgba(12,16,32,.12));}
.zg-zeit-nacht .zg-licht{opacity:1;background:
  radial-gradient(50% 30% at 50% 12%, rgba(150,170,220,.12), transparent 72%),
  linear-gradient(to bottom, rgba(8,12,28,.10), rgba(8,12,28,.20));}
@media (prefers-reduced-motion:reduce){ .zg-licht{transition:none;} }