:root{
  --paper:#FDF6E3; --card:#FFFFFF; --line:#EFE3C8; --line-soft:#F5ECD9;
  --ink:#3A3226; --ink-2:#6E6353; --ink-3:#9A8D78;
  --gruen:#2E9E6B; --gruen-tief:#1E7A52; --gruen-hell:#E3F3EB;
  --clay:#E07A3F; --clay-tief:#C05A2E; --clay-hell:#FBEADF;
  --sonne:#F4B942; --sonne-hell:#FDF3DA;
  --rot:#C64A3A; --rot-hell:#F9E6E2;
  --radius:18px; --schatten:0 2px 10px rgba(58,50,38,.06);
  /* Bewegungs-Kurven fuer alle kleinen Uebergaenge: --aus fuer alles,
     was ausklingt (schnell rein, weich raus), --feder mit leichtem
     Ueberschwingen fuer kurze Bestaetigungen. Nur transform, opacity
     und Farbe, 120-450 ms - Klarheit vor Effekt; reduced-motion
     (unten) schaltet alles ab. */
  --aus:cubic-bezier(.22,.9,.28,1);
  --feder:cubic-bezier(.34,1.45,.4,1);
  /* Groessen wachsen mit der Bildschirmbreite, aber nur zwischen zwei
     festen Grenzen - so bleibt die Anzeige auf dem 5-Zoll-Handy noch
     lesbar und laeuft auf dem 13-Zoll-Tablet nicht auseinander. */
  --tap:52px;
  --rand:clamp(10px,2.4vw,18px);
  --luft:clamp(10px,1.8vw,18px);
}
/* Kleine Geraete und flache Querformate: Fingerziele etwas kompakter,
   damit auf einem Handy im Liegen ueberhaupt eine Liste sichtbar ist. */
@media(max-width:400px){:root{--tap:48px}}
@media(orientation:landscape) and (max-height:500px){:root{--tap:46px}}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{min-height:100%}
body{
  font-family:'Nunito Sans',system-ui,'Segoe UI',Roboto,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  /* Kneifen zum Vergroessern bleibt erlaubt (Lesbarkeit), der
     Doppeltipp-Zoom nicht - der verschiebt sonst beim Tippen die Liste. */
  touch-action:manipulation;
  min-height:100dvh;
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:10px}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ================= Kopfzeile ================= */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:clamp(7px,1.6vw,14px);
  padding:clamp(7px,1.4vw,10px) var(--rand);
  background:rgba(253,246,227,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand svg{height:clamp(28px,5.6vw,40px);width:auto;display:block}
.brand-word{
  font-family:'Baloo 2',ui-rounded,'SF Pro Rounded',sans-serif;font-weight:800;
  font-size:clamp(11px,2.2vw,14px);letter-spacing:-.3px;line-height:1;
}
.brand-word i{font-style:normal;color:var(--gruen)}
.brand-word b{font-weight:800;color:var(--clay)}
/* Die Zahl gehoert in die Mitte des Bildschirms, nicht an den Rand:
   sie ist die eine Angabe, die im Gruppenraum aus drei Metern
   Entfernung lesbar sein muss. Absolut gesetzt statt per Flex-Luecke -
   links steht die Wortmarke, rechts Uhr und Knoepfe, und die sind
   verschieden breit; mit Flex saesse die Zahl nur ungefaehr mittig.
   Ohne Mausereignisse, damit sie nichts darunter blockiert. */
.top-count{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:baseline;gap:8px;pointer-events:none;
  padding:9px clamp(16px,2.6vw,24px);border-radius:999px;background:var(--gruen-hell);
  border:1px solid rgba(46,158,107,.25);white-space:nowrap;
}
.top-count strong{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(26px,5.2vw,34px);color:var(--gruen-tief);line-height:1}
.top-count span{font-size:clamp(14px,2.8vw,17px);font-weight:700;color:var(--gruen-tief)}
/* Die Zahl federt kurz, wenn sie sich aendert - der Knoten bleibt
   bestehen, das JS startet die Animation per Reflow-Trick neu. */
#countDa.pop{animation:zahlPop .24s var(--feder)}
@keyframes zahlPop{50%{transform:scale(1.12)}}
/* Sehr schmale Geraete: dort ist in der Mitte kein Platz, die Zahl
   wandert zurueck in den Textfluss neben die Wortmarke. */
@media(max-width:520px){
  .top-count{position:static;transform:none;flex:none;padding:6px 14px}
  .top-count strong{font-size:21px}
  .top-count span{font-size:13px}
}
.top-spacer{flex:1}
.conn{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.conn .dot{width:10px;height:10px;border-radius:50%;background:var(--sonne);flex:none;transition:background .3s}
.conn .dot.ok{background:var(--gruen)}
.conn .dot.bad{background:var(--rot)}
#clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(14px,2.8vw,16px);color:var(--ink-2)}
/* Auf schmalen Geraeten zaehlt die Anwesenheit, nicht die Deko:
   Uhrzeit, Verbindungstext und Wortmarke weichen der Reihe nach. */
@media(max-width:600px){#connText{display:none}}
@media(max-width:480px){#clock{display:none}}
@media(max-width:360px){.brand-word{display:none}}
.icon-btn{
  width:var(--tap);height:var(--tap);flex:none;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--schatten);
  transition:transform .12s var(--aus);
}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:23px;height:23px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= Layout ================= */
.layout{
  display:grid;gap:var(--luft);
  padding:var(--luft) var(--rand) calc(var(--luft) + env(safe-area-inset-bottom));
  max-width:1500px;margin:0 auto;width:100%;
  /* minmax(0,1fr) statt der stillen auto-Spur: eine auto-Spur waechst
     mit dem min-content ihres Inhalts, und seit Suche und Filterchips
     in einer Zeile stehen, schob genau das die einspaltige Ansicht
     (Hochformat) breiter als den Bildschirm - die vierte Rasterspalte
     hing abgeschnitten hinterm rechten Rand. Die Breitbild-Abfrage
     unten macht es fuer ihre zweite Spalte laengst so. */
  grid-template-columns:minmax(0,1fr);
}
/* Ab 900 px nebeneinander (Tablet quer, grosse Tablets hoch), darunter
   umgeschaltet. Die Umschaltung haengt allein an dieser Medienabfrage -
   kein JavaScript setzt display, sonst bleibt beim Drehen die falsche
   Spalte stehen. Die Anwesenheit steht links und breit - sie ist die
   Hauptansicht des Tablets -, die Abholungen rechts als schmale
   Spalte. */
@media(min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) clamp(250px,20vw,330px);align-items:stretch}
}
@media(max-width:899.98px){
  .layout:not(.zeige-att) #paneAtt{display:none}
  .layout.zeige-att #panePickup{display:none}
}
/* Sanfter Ansichtswechsel auf schmalen Geraeten: das neu sichtbare
   Pane blendet kurz ein (nur transform/opacity). Der Keyframe laeuft
   von selbst an, wenn die zeige-att-Klasse das display umspringen
   laesst - kein JavaScript, und nichts haengt inhaltlich an der
   Bewegung. */
@media(max-width:899.98px){
  .pane{animation:paneAuf .22s var(--aus)}
}
@keyframes paneAuf{from{opacity:0;transform:translateY(8px)}}

/* ================= Tabs (Hochkant / schmal) ================= */
/* ================= Rufe vom Terminal ================= */
/* Farbnamen des TABLETS benutzen, nicht die der Verwaltung: hier heisst
   das Gruen --gruen, nicht --teal. Mit dem falschen Namen faellt
   var() auf nichts zurueck - der Knopf stand dann als weisse Schrift
   auf durchsichtigem Grund in einer weissen Karte und war unsichtbar,
   obwohl er anklickbar blieb. */
.ruf-strip{border:1.5px solid var(--clay);background:var(--clay-hell);border-radius:16px;
  padding:12px 14px;margin-bottom:14px}
.ruf-kopf{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clay-tief);margin-bottom:9px}
.ruf-liste{display:flex;flex-direction:column;gap:9px}
/* Untereinander statt nebeneinander: die Abholspalte ist je nach
   Tablet nur gut 300 Pixel breit, und ein Knopf mit fester Breite lief
   dort aus der Karte heraus - anklickbar blieb er, sichtbar nicht.
   Ueber die volle Breite ist er ausserdem das bessere Ziel fuer einen
   Finger. */
.ruf-z{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.ruf-txt{min-width:0}
.ruf-txt b{display:block;font-size:16px;font-weight:800;line-height:1.25}
.ruf-txt span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.ruf-txt .ruf-wann{font-size:12px;color:var(--ink-3);margin-top:3px}
.ruf-z button{width:100%;min-height:var(--tap);border:1.5px solid var(--gruen);
  background:var(--gruen);color:#fff;border-radius:11px;padding:12px 16px;
  font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.ruf-z button:hover{background:var(--gruen-tief);border-color:var(--gruen-tief)}
.ruf-z button:disabled{opacity:.55;cursor:default}

.tabs{
  display:flex;gap:8px;padding:5px;border-radius:16px;
  background:#F6EDD9;border:1px solid var(--line);
}
/* WICHTIG: Diese Regel muss NACH der Grundregel stehen. Eine Media
   Query erhoeht die Spezifitaet nicht - stuende das Ausblenden weiter
   oben im Layout-Abschnitt, wuerde das spaetere display:flex gewinnen
   und die Reiter waeren auf breiten Bildschirmen dauerhaft sichtbar.
   Genau das war der Fehler, der die Anwesenheitsliste im Querformat in
   die zweite Zeile geschoben hat: die Reiter belegten die erste
   Rasterzelle. */
@media(min-width:900px){
  .tabs{display:none}
}
.tabs button{
  flex:1;min-height:var(--tap);border-radius:12px;
  font-weight:800;font-size:clamp(15px,3.6vw,16.5px);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background-color .12s var(--aus),color .12s var(--aus);
}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--schatten)}
.tab-badge{
  min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:var(--clay);color:#fff;font-size:14px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.tab-badge:empty{display:none}

/* ================= Karten-Grundform ================= */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schatten)}
.panel-head{
  display:flex;align-items:center;gap:clamp(9px,1.8vw,12px);
  padding:clamp(12px,2.2vw,16px) clamp(12px,2.4vw,18px);border-bottom:1px solid var(--line-soft);
}
.panel-head>div{min-width:0}
.panel-head h2{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(18px,4vw,21px);letter-spacing:-.3px}
.panel-head .sub{font-size:clamp(12.5px,2.6vw,13.5px);color:var(--ink-2);margin-top:1px}
.panel-body{padding:clamp(10px,2vw,14px)}

/* ================= Abholungen ================= */
.pickup-bird{position:relative;flex:none;width:44px;height:40px}
.pickup-bird svg{width:100%;height:100%;display:block}
.pickup-bird .arcs path{opacity:.35}
.pickup-bird.alive .arcs path{animation:arcPulse 1.6s ease-in-out infinite}
.pickup-bird.alive .arcs path:nth-child(2){animation-delay:.2s}
.pickup-bird.alive .arcs path:nth-child(3){animation-delay:.4s}
@keyframes arcPulse{0%,100%{opacity:.25}35%{opacity:1}}

/* ================= Gerade gebracht ================= */
.bring-strip{
  margin:0 0 14px;padding:12px;border-radius:16px;
  background:var(--gruen-hell);border:1px solid rgba(46,158,107,.28);
}
.bring-kopf{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gruen-tief);
}
.bring-kopf button{
  margin-left:auto;min-height:38px;padding:0 13px;border-radius:999px;
  background:#fff;border:1px solid rgba(46,158,107,.35);
  font-size:13.5px;font-weight:800;color:var(--gruen-tief);letter-spacing:0;text-transform:none;
}
.bring-liste{display:flex;flex-wrap:wrap;gap:9px}
.bring-kind{
  display:flex;align-items:center;gap:10px;
  min-height:var(--tap);padding:6px 6px 6px 8px;border-radius:999px;
  background:#fff;border:1px solid rgba(46,158,107,.3);
}
/* Die Animation haengt an einer eigenen Klasse und NICHT an .bring-kind:
   sonst laeuft sie bei jedem Neuaufbau der Liste erneut - und die Liste
   wird alle vier Sekunden neu bewertet. Das war das Zucken. Jetzt zappelt
   nur, was gerade wirklich neu dazugekommen ist. */
.bring-kind.frisch{animation:bringIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes bringIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.bring-kind .avatar{width:36px;height:36px;font-size:14px}
.bring-kind .n{font-weight:800;font-size:clamp(14.5px,3.2vw,15.5px);line-height:1.15;overflow-wrap:anywhere}
.bring-kind .z{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.bring-kind .weg{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--ink-3);background:#F6F1E4;
}

.req-list{display:flex;flex-direction:column;gap:12px}
.req-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:15px 15px 15px 18px;position:relative;overflow:hidden;
}
.req-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--line)}
.req-card.pending{background:var(--sonne-hell);border-color:rgba(244,185,66,.55)}
.req-card.pending::before{background:var(--sonne)}
.req-card.accepted::before{background:var(--gruen)}
.req-card.denied::before,.req-card.cancelled::before{background:var(--rot)}
.req-card.fresh{animation:reqIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes reqIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.req-top{display:flex;align-items:flex-start;gap:clamp(9px,1.8vw,12px)}
.req-top>div{min-width:0}
.req-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(19px,4.6vw,22px);letter-spacing:-.3px;line-height:1.15;overflow-wrap:anywhere}
.req-meta{font-size:clamp(13px,2.9vw,14px);color:var(--ink-2);margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
.req-meta b{color:var(--ink);font-weight:700}
.req-chip{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:5px 11px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.req-timer{
  margin-left:auto;flex:none;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;color:var(--clay-tief);
}
.req-timer small{display:block;font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.req-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{
  min-height:var(--tap);border-radius:14px;padding:0 clamp(12px,2.8vw,18px);
  font-weight:800;font-size:clamp(15px,3.6vw,16.5px);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s var(--aus);
}
.btn:active{transform:scale(.96)}
.btn.gruen{flex:1.4 1 150px;background:var(--gruen);color:#fff;box-shadow:0 3px 0 rgba(30,122,82,.4)}
.btn.gruen:active{box-shadow:0 1px 0 rgba(30,122,82,.4)}
.btn.rot-outline{flex:1 1 110px;background:#fff;color:var(--rot);border:2px solid rgba(198,74,58,.45)}
.btn.confirming{background:var(--gruen-tief);animation:confirmPulse 1s ease-in-out infinite}
@keyframes confirmPulse{50%{filter:brightness(1.12)}}
.req-status{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-size:13.5px;font-weight:800;padding:4px 11px;border-radius:999px;
}
.req-status.accepted{background:var(--gruen-hell);color:var(--gruen-tief)}
.req-status.denied,.req-status.cancelled{background:var(--rot-hell);color:var(--rot)}
/* Von Hand eingetragen: eigene Farbe, damit auf einen Blick klar ist,
   dass hier keine Anfrage vom Terminal dahinterstand, sondern jemand
   aus dem Team selbst gehandelt hat. */
.req-status.hand-in{background:var(--sonne-hell);color:var(--clay-tief)}
.req-card.hand-in::before{background:var(--sonne)}
.req-cancel{
  margin-top:10px;min-height:44px;padding:0 14px;border-radius:12px;
  font-size:14.5px;font-weight:700;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);
}
/* ---------- Heute erledigt ----------
   Frueher trug jeder erledigte Vorgang dieselbe grosse Karte wie eine
   offene Anfrage: 15px Polster, 18px Name, Status als Pille. Bei
   dreissig Kindern schob das die eigentliche Arbeit - die offenen
   Anfragen - aus dem Bild. Erledigtes ist Nachschlagestoff, kein
   Handlungsauftrag: eine Zeile je Vorgang, Uhrzeit vorn, und nur die
   letzten fuenf sichtbar. Der Rest steht einen Tipp entfernt. */
.hist-kopf{
  display:flex;align-items:center;gap:10px;margin:18px 4px 8px;
  font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
.hist-kopf .zahl{font-size:12px;letter-spacing:0;color:var(--ink-3);text-transform:none}
.hist-mehr{
  margin-left:auto;min-height:34px;padding:0 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  font:inherit;font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none;cursor:pointer;
}
.hist-liste{display:flex;flex-direction:column;gap:1px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  /* Die Spalte misst sich selbst: auf dem Tablet stehen Abholungen und
     Anwesenheit nebeneinander, die Spalte ist dann schmal, waehrend das
     FENSTER breit ist - eine Media Query traefe hier nie zu. */
  container:verlauf / inline-size}
/* umbrechend statt quetschend: die Spalte ist auf dem Tablet schmal,
   und ohne Umbruch presste der Flex-Container den Namen auf null
   Breite - er stand dann buchstabenweise untereinander. Mit
   flex-wrap rutscht lieber der Statuspunkt in die zweite Zeile. */
.hist-zeile{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 11px;padding:9px 13px;
  border-bottom:1px solid var(--line);font-size:14px;
}
.hist-zeile:last-child{border-bottom:0}
.hist-zeile .hz-zeit{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2);
  white-space:nowrap;min-width:52px}
.hist-zeile .hz-name{font-weight:800;overflow-wrap:anywhere;min-width:110px;flex:1 1 auto}
.hist-zeile .hz-gruppe{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.hist-zeile .hz-was{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px}
.hz-was.accepted{background:var(--gruen-hell);color:var(--gruen-tief)}
.hz-was.denied,.hz-was.cancelled{background:var(--rot-hell);color:var(--rot)}
.hz-was.hand-in,.hz-was.hand-out{background:var(--sonne-hell);color:var(--clay-tief)}
.hist-zeile .hz-notiz{flex-basis:100%;font-size:12.5px;color:var(--ink-2);margin-top:-2px}
.hz-storno{
  min-height:32px;padding:0 11px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font:inherit;font-size:12px;font-weight:700;
  color:var(--ink-2);white-space:nowrap;cursor:pointer;
}
/* Wird es eng, faellt zuerst die Gruppe: sie steht im Kopf der
   Anwesenheitsliste ohnehin und ist der einzige Teil der Zeile, den
   niemand fuer die Uebergabe braucht. */
@container verlauf (max-width:470px){.hist-zeile .hz-gruppe{display:none}}
@container verlauf (max-width:330px){.hist-zeile .hz-was{display:none}}
.empty{
  text-align:center;padding:clamp(22px,5vw,34px) 18px;color:var(--ink-2);
}
.empty .big{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(17px,4vw,19px);color:var(--ink);margin-bottom:4px}
.empty p{font-size:clamp(13.5px,3vw,14.5px);line-height:1.55;text-wrap:balance}
/* Der Umbruch im Leertext ist auf breite Spalten gesetzt - schmal
   soll der Satz normal fliessen. */
@media(max-width:520px){.empty p br{display:none}}

/* ================= Anwesenheit ================= */
.att-tools{display:flex;flex-direction:column;gap:11px;padding:clamp(10px,2vw,14px) clamp(10px,2vw,14px) 4px}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--ink-3);fill:none;stroke-width:2.2;stroke-linecap:round}
#attSearch{
  width:100%;min-height:var(--tap);border-radius:14px;
  border:1px solid var(--line);background:#fff;
  padding:0 44px 0 44px;font-size:16.5px;  /* nie unter 16px: iOS zoomt sonst beim Tippen ins Feld */
}
#attSearch::placeholder{color:var(--ink-3)}
#attSearch:focus{outline:none;border-color:var(--gruen);background:#fff}
.search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:none;align-items:center;justify-content:center;font-size:20px;color:var(--ink-3)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:42px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-weight:700;font-size:14.5px;color:var(--ink-2);
  transition:background-color .16s var(--aus),color .16s var(--aus),border-color .16s var(--aus);
}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* Anwesenheit als nuechterne Zeilenliste - EIN Kind je Zeile, derselbe
   Stil wie die Personal-Liste der Verwaltung: Struktur durch Linien
   und Ausrichtung, Farbe nur, wo sie etwas bedeutet (gruen = da).
   div-Zeilen statt einer Tabelle, damit die Zeilen in der breiten
   Ansicht als Flex-Glieder die Resthoehe unter sich aufteilen koennen
   (siehe Hoehen-Kaskade unten). Die Zeile selbst ist das Tippziel und
   oeffnet wie bisher die Nachfrage in der Mitte; Klassen und
   data-kind sind Schnittstelle zum JS - nicht umbenennen. */
.att-flaeche{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.at-gz{display:flex;align-items:center;height:30px;padding:0 14px;background:#F7F0DD;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap}
.at-gz i{flex:none;width:9px;height:9px;border-radius:50%;margin-right:8px}
.at-gz small{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:0;text-transform:none;margin-left:8px}
/* Name und Status teilen sich die flexible Spalte, der Name wird
   notfalls mit Punkten gekuerzt - die Zeile bleibt so GARANTIERT
   einzeilig, sonst geht die 20-Zeilen-Rechnung der Hoehen-Kaskade
   nicht auf. */
.at-kind{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;
  gap:12px;align-items:center;min-height:44px;padding:0 14px;
  background:#fff;color:#30382e;
  border-bottom:1px solid var(--line);cursor:pointer;
  transition:background-color .12s var(--aus)}
.at-kind:last-child{border-bottom:0}
.at-kind:active{background:#fff}
.at-kind.busy{opacity:.55;pointer-events:none}
/* Der Zustand gehoert an den Namen, nicht an den rechten Rand: am
   rechten Rand lag zwischen "Ben Hartmann" und "da" die halbe
   Listenbreite, und wer die Liste ueberfliegt, musste fuer jede Zeile
   mit dem Auge ueber die leere Mitte springen. Nur der Name schrumpft
   (min-width:0 und Ellipse), Status und Post-Marke bleiben ganz. */
.at-haupt{display:flex;align-items:center;gap:10px;min-width:0}
.at-name{min-width:0;font-weight:800;font-size:15.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-kind.weg .at-name{color:#58614f}
.at-zeit{white-space:nowrap;color:#58614f;font-variant-numeric:tabular-nums;font-size:13px}
/* Explizite Groesse noetig: ohne sie erbt der Status die Browser-
   Vorgabe (16px) und stuende fett GROESSER im Bild als der Name
   (15.5px) - die Hierarchie Name > Status > Nebeninfo muss halten,
   seit die alte Grundgroesse der Tabelle (14.5px) beim Umbau auf
   div-Zeilen entfallen ist. */
.at-status{flex:none;white-space:nowrap;font-weight:700;font-size:13.5px;color:#687160}
.at-status i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#CFC4AD;margin-right:7px}
.at-kind.da .at-status{color:var(--gruen-tief)}
.at-kind.da .at-status i{background:var(--gruen)}
.at-aktion span{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
/* Austragen nimmt ein Kind aus der Liste und ist der Schritt, der im
   Zweifel weh tut - rot, damit er sich vom harmlosen Eintragen
   unterscheidet. Die Farbe warnt nur, sie bestaetigt nichts: der
   mittige Dialog bleibt davor. */
.at-aktion span.raus{color:var(--rot);border-color:rgba(198,74,58,.45);background:var(--rot-hell)}
/* Statuswechsel einer Zeile: kurzer Farbhauch in der Farbe des neuen
   Zustands, der Statuspunkt federt nach. Die Klassen halten genau
   einen Durchlauf (wechselFrisch im JS, Muster wie bringFrisch) -
   dauerhaft angeheftet liefen sie bei jedem Neuaufbau der Liste
   erneut, siehe die Lehre am Gerade-gebracht-Streifen. */
.at-kind.wechsel-da{animation:wechselDa .45s var(--aus)}
.at-kind.wechsel-weg{animation:wechselWeg .45s var(--aus)}
@keyframes wechselDa{from{background-color:var(--gruen-hell)}}
@keyframes wechselWeg{from{background-color:var(--clay-hell)}}
.at-kind.wechsel-da .at-status i,.at-kind.wechsel-weg .at-status i{animation:statusPop .3s var(--feder)}
@keyframes statusPop{from{transform:scale(.4)}}
/* Ganz schmal (Handy hoch): Bringzeit und Aktions-Etikett weichen -
   Name und Status bleiben immer. Eine Gruppenspalte gibt es nicht
   mehr, die getoenten Zwischenzeilen nennen die Gruppe ohnehin. */
@media(max-width:479.98px){.at-zeit{display:none}.at-aktion{display:none}}
/* Post-Marke in der Namenszelle: eine offene Mitteilung der Eltern
   soll auffallen, ohne dass jemand jedes Kind antippt. Zahl statt
   Punkt - "3 wartende Zettel" ist eine andere Lage als einer. Den
   Abstand setzt das gap der Hauptzelle, ein eigener Rand kaeme
   obendrauf. */
.at-post{
  display:inline-flex;align-items:center;gap:5px;flex:none;vertical-align:1px;
  padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--sonne-hell);color:var(--clay-tief);border:1px solid rgba(244,185,66,.6);
}
.at-post.still{background:var(--line-soft);color:var(--ink-3);border-color:var(--line)}
.avatar{
  width:clamp(40px,9vw,46px);height:clamp(40px,9vw,46px);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(15px,3.4vw,17px);color:#fff;
}
/* Suche und Filter teilen sich ab Tablet-Breite eine Zeile - die
   gewonnene Hoehe gehoert der Liste. Handys behalten die zwei Zeilen. */
@media(min-width:700px){
  .att-tools{flex-direction:row;align-items:center;gap:10px}
  .search-wrap{flex:1 1 240px;min-width:200px}
  .chips{flex:10 1 auto;min-width:0;padding-bottom:0}
}
/* ========== Hoehen-Kaskade: Anwesenheit als Hauptansicht ==========
   Ab 900 px scrollt die Seite nicht mehr als Ganzes: der body wird zur
   festen Spalte (Topbar + Rest), und die Anwesenheitszeilen verteilen
   die Resthoehe als Flex-Glieder unter sich. Ziel: 20 Kinder im
   Querformat OHNE Scrollen lesbar.

   Budget, warum das aufgeht: Topbar 56 + Layout-Polster 2x8 = 16 +
   Panelrahmen 2 + Werkzeugzeile 52 = 126 px fester Ueberbau;
   Gruppenzeilen clamp(16px, 2.4dvh, 26px). Bei 700 px sichtbarer
   Hoehe und 4 Gruppen bleiben (700 - 126 - 67) / 20 = 25,3 px je
   Kindzeile - ueber dem 25-px-Boden. Allgemein: H * (1 - 0,024 * g)
   >= 626, also ab H >= 692 px (4 Gruppen) bzw. 711 px (5 Gruppen)
   garantiert; darunter scrollt die Liste kontrolliert intern. Jede
   spaetere Verbreiterung von Topbar oder Werkzeugzeile frisst direkt
   Zeilenhoehe - deshalb sind beide hier auf feste Hoehen verzurrt.

   min-height:0 steht an JEDER Stufe der Kette (layout, pane, attList,
   att-flaeche): Flex- und Grid-Kinder haben min-height:auto und
   weigern sich sonst zu schrumpfen - eine einzige fehlende Stufe, und
   die Liste schiebt wieder aus dem Bild. dvh statt vh wie ueberall in
   dieser Datei (iOS-Browserleiste); niemals 100vh. Dieser Block muss
   NACH den Grundregeln stehen, die er ueberschreibt - eine Media
   Query erhoeht die Spezifitaet nicht (siehe Warnung bei den Tabs). */
@media(min-width:900px){
  body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  .topbar{flex:none;height:56px;padding-top:0;padding-bottom:0}
  .topbar .icon-btn{width:44px;height:44px}
  .top-count{padding:5px 14px}
  .top-count strong{font-size:24px}
  /* Offline-Warnung als Overlay statt Flex-Glied: sie darf keine
     Listenhoehe kosten, sonst kippt die 20-Zeilen-Rechnung genau
     dann, wenn das WLAN hakt. */
  #offline{position:fixed;top:56px;left:0;right:0;z-index:40}
  .layout{
    flex:1 1 auto;min-height:0;overflow:hidden;
    padding:8px var(--rand) calc(8px + env(safe-area-inset-bottom));
  }
  .pane{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  #panePickup .panel-head{flex:none}
  #panePickup .panel-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* Werkzeugzeile fest 52 px: Suche schmaler, Chips einzeilig - die
     gewonnene Hoehe gehoert den Listenzeilen. Die Schrift der Suche
     bleibt ueber 16 px (iOS-Zoom, siehe #attSearch oben). */
  .att-tools{flex:none;height:52px;flex-direction:row;align-items:center;gap:10px;padding:6px 10px}
  .att-tools .search-wrap{flex:0 1 240px;min-width:180px}
  #attSearch{min-height:40px}
  .att-tools .chips{padding-bottom:0}
  .att-tools .chip{min-height:34px}
  #attList{flex:1;min-height:0;padding:0;display:flex;flex-direction:column}
  .att-flaeche{flex:1;min-height:0;display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    border-radius:0;border-left:0;border-right:0;border-bottom:0}
  /* Der 25-px-Boden unterschreitet bewusst die 44-px-Empfehlung fuer
     Tippziele: die Zeile ist ueber die volle Listenbreite Ziel, und
     jeder Tipp fuehrt erst in den mittigen Bestaetigungsdialog - ein
     Fehlgriff kostet nur ein "Abbrechen" (siehe Kommentar am
     Dialog). */
  .at-kind{flex:1 1 0;min-height:25px;max-height:56px}
  .at-gz{flex:none;height:clamp(16px,2.4dvh,26px);font-size:10px}
}

/* ========== Alarm-Banner (nur schmale Ansicht) ==========
   Trifft eine Abholanfrage oder ein Ruf ein, waehrend nur die
   Anwesenheit im Bild ist, steht dieser Knopf im Fluss VOR der
   Werkzeugzeile und klebt beim Scrollen per sticky direkt unter der
   Topbar. Beides ist Absicht: unter 900 px scrollt die SEITE als
   Ganzes (die Hoehen-Kaskade oben greift erst ab 900 px) - ein
   absolut am Pane-Anfang verankerter Banner waere bei
   heruntergescrollter Liste (20+ Kinder hochkant) ausserhalb des
   Sichtfelds, genau wenn es darauf ankommt. Und im Fluss schiebt er
   Suche und Filterchips nach unten, statt sie zu verdecken - die
   Werkzeugzeile ist unter 900 px hoeher als jede feste Pixelmarke
   vertraegt (ein- bis zweizeilig, je nach Breite). Die Sichtbarkeit
   steuert allein das CSS: ab 900 px ist die Abholspalte ohnehin
   sichtbar (hier display:none), darunter erscheint er automatisch
   nur im Anwesenheits-Tab, weil #paneAtt sonst display:none traegt -
   kein Breakpoint-Duplikat im JS, drehsicher. Kein Schliessen-Knopf
   und kein Timeout: ein Alarm laesst sich erledigen, nicht wegtippen
   - der Banner verschwindet erst, wenn nichts Offenes mehr wartet. */
#alarmBanner{
  position:sticky;
  /* Klebekante = Hoehe der sticky Topbar, aus deren eigenen Groessen
     gerechnet (Tippziel var(--tap) + 2x Polster clamp(7px,1.4vw,10px)
     + 1px Linie) plus etwas Luft. So folgt die Kante den
     --tap-Abstufungen schmaler Geraete, ohne dass hier eine zweite
     Zahl gepflegt werden muss; z-index unter der Topbar (30), damit
     eine kleine Abweichung hinter ihr verschwindet statt davor. */
  top:calc(var(--tap) + clamp(14px,2.8vw,20px) + 5px);
  z-index:20;margin:10px 8px 0;
  display:flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:10px 14px;border-radius:14px;text-align:left;
  background:var(--sonne-hell);border:2px solid var(--clay);
  box-shadow:0 8px 24px rgba(58,50,38,.2);
  font-size:16px;font-weight:800;color:var(--ink);
  animation:alarmAuf .3s cubic-bezier(.32,.72,.28,1.1);
}
#alarmBanner.ruf{background:var(--clay-hell)}
#alarmBanner .a-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#alarmBanner .pfeil{margin-left:auto;flex:none;font-size:22px;line-height:1;color:var(--clay-tief)}
@keyframes alarmAuf{from{opacity:0;transform:translateY(-14px)}}
/* Weiches Ausblenden: Klasse "zu" faehrt den Banner hoch, das JS
   setzt danach hidden. */
#alarmBanner.zu{animation:none;opacity:0;transform:translateY(-8px);
  transition:opacity .18s ease-out,transform .18s ease-out}
@media(min-width:900px){#alarmBanner{display:none !important}}

/* ================= Bodensheets & Dialoge ================= */
.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(58,50,38,.4);
  display:none;align-items:flex-end;justify-content:center;
}
.scrim.open{display:flex;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
/* Nachfrage zur Anwesenheit: mittig statt am unteren Rand. Ein Blatt,
   das von unten hochfaehrt, sitzt genau dort, wo der Finger eben
   getippt hat - die Bestaetigung laege dann einen Wimpernschlag
   spaeter unter demselben Finger, und ein Fehlgriff waere mit
   derselben Bewegung besiegelt. In der Mitte muss man hinsehen. */
.scrim.mitte{align-items:center;padding:20px}
.dlg-mitte{
  width:min(460px,100%);background:var(--paper);border-radius:24px;
  padding:26px clamp(18px,4vw,28px);text-align:center;
  animation:dlgAuf .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes dlgAuf{from{transform:scale(.94);opacity:0}}
.dlg-avatar{
  width:74px;height:74px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:27px;color:#fff;
}
.dlg-mitte h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(21px,5vw,26px);margin-bottom:6px}
.dlg-mitte .sub{font-size:clamp(14px,3.2vw,16px);color:var(--ink-2);line-height:1.5;margin-bottom:22px}
.dlg-mitte .sheet-actions{margin-top:0}
.dlg-mitte .btn{min-height:60px;font-size:17px}
.btn.gruen{flex:1.3 1 140px;background:var(--gruen);color:#fff;box-shadow:0 3px 0 rgba(31,122,80,.45)}
/* ---------- Rufnummern zum Kind ---------- */
.dlg-mitte.breit{width:min(560px,100%);text-align:left;max-height:min(86dvh,760px);overflow:auto;-webkit-overflow-scrolling:touch}
.att-tel{
  display:block;width:100%;margin-top:14px;min-height:54px;
  background:none;border:1.5px dashed var(--line);border-radius:16px;
  font:inherit;font-size:16px;font-weight:800;color:var(--ink-2);cursor:pointer;
}
.att-tel:active{background:var(--line-soft)}
/* ---------- Elternpost ----------
   Zwei Richtungen in einem Blatt: was die Eltern geschrieben haben und
   was wir ihnen mitgeben. Getrennt durch Ueberschriften, nicht durch
   Reiter - im Gruppenraum wird das Blatt im Stehen gelesen, und ein
   Reiter versteckt immer die eine Haelfte, die gerade zaehlt. */
.ep-abschnitt{margin-bottom:20px}
.ep-abschnitt h4{
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.ep-liste{display:flex;flex-direction:column;gap:10px}
.ep-zettel{
  border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;
  position:relative;
}
.ep-zettel.offen{background:var(--sonne-hell);border-color:rgba(244,185,66,.6)}
.ep-text{font-size:15.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.ep-meta{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.ep-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ep-knopf{
  min-height:44px;padding:0 15px;border-radius:12px;background:#fff;
  border:1px solid var(--line);font:inherit;font-size:14px;font-weight:800;
  color:var(--ink-2);cursor:pointer;
}
.ep-knopf.gruen{background:var(--gruen);border-color:var(--gruen);color:#fff}
.ep-knopf:disabled{opacity:.5}
.ep-leer{font-size:14px;color:var(--ink-3);padding:10px 2px}
.ep-feld{
  width:100%;min-height:96px;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 13px;font:inherit;font-size:16px;line-height:1.45;background:#fff;
  resize:vertical;
}
.ep-feld:focus{outline:3px solid var(--gruen);outline-offset:1px;border-color:var(--gruen)}
.ep-vorschlaege{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ep-vorschlag{
  min-height:38px;padding:0 13px;border-radius:999px;background:var(--line-soft);
  border:1px solid var(--line);font:inherit;font-size:13.5px;font-weight:700;
  color:var(--ink-2);cursor:pointer;
}
.ep-zaehler{font-size:12.5px;color:var(--ink-3);margin-left:auto}
.ep-gesehen{color:var(--gruen-tief);font-weight:700}
.kt-liste{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.kt-karte{border:1.5px solid var(--line);border-radius:18px;padding:14px 15px;background:#fff}
.kt-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.kt-art{font-size:13px;font-weight:700;color:var(--ink-2);margin-top:1px}
.kt-nrn{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.kt-nr{
  display:inline-flex;align-items:center;min-height:52px;padding:0 18px;
  border-radius:14px;background:var(--gruen);color:#fff;text-decoration:none;
  font-size:19px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 0 rgba(31,122,80,.45);
}
.kt-nr:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(31,122,80,.45)}
.kt-fuss{font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.45}
/* ---------- Verlauf ----------
   Breiter als die uebrigen Dialoge und fast bildschirmhoch: die Liste
   aller Kinder eines Tages soll ohne Blaettern im Blatt lesbar sein.
   Kopf und Werkzeuge stehen fest, nur die Liste scrollt. */
.dlg-mitte.vl-dlg{
  width:min(860px,100%);height:min(92dvh,900px);text-align:left;
  display:flex;flex-direction:column;padding:18px clamp(14px,3vw,24px);
}
.vl-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none}
.vl-kopf h3{margin-bottom:0}
.vl-datum{font-size:clamp(14px,3.2vw,16px);font-weight:700;color:var(--ink-2)}
.dlg-mitte .btn.vl-zu{flex:none;min-height:48px;font-size:15px;padding:0 18px}
.vl-werkzeuge{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;flex:none}
.vl-tage{display:flex;gap:6px;align-items:center}
.vl-pfeil,.vl-heute{
  min-width:48px;min-height:48px;border-radius:12px;background:#fff;border:1px solid var(--line);
  font:inherit;font-size:22px;font-weight:800;color:var(--ink-2);cursor:pointer;
}
.vl-heute{font-size:15px;padding:0 14px}
.vl-pfeil:disabled,.vl-heute:disabled{opacity:.4}
#vlTag{
  min-height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;
  padding:0 10px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);
}
.vl-suche{flex:1 1 200px;min-width:0}
#vlSuche{
  width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;
  padding:0 14px 0 44px;font:inherit;font-size:16px;color:var(--ink);
}
.vl-stand{font-size:13px;color:var(--ink-3);margin:10px 2px 6px;flex:none;min-height:18px}
.vl-stand.fehler{color:var(--rot);font-weight:700}
.vl-liste{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:14px;background:#fff;
}
.vl-raster{display:grid;grid-template-columns:minmax(0,1fr) 92px 118px;align-items:center;gap:8px}
.vl-spalten{
  position:sticky;top:0;z-index:1;background:var(--line-soft);padding:8px 14px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
.vl-gruppe{
  padding:7px 14px;background:var(--paper);border-bottom:1px solid var(--line-soft);
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
}
.vl-zeile{
  width:100%;min-height:52px;padding:6px 14px;background:none;border:0;
  border-bottom:1px solid var(--line-soft);font:inherit;text-align:left;color:var(--ink);cursor:pointer;
}
.vl-zeile:active{background:var(--line-soft)}
.vl-zeile.offen{background:var(--sonne-hell)}
.vl-name{font-weight:800;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-name small{font-weight:600;color:var(--ink-3)}
.vl-zeit{font-variant-numeric:tabular-nums;font-weight:800;font-size:16px}
.vl-leer{color:var(--ink-3);font-weight:700}
.vl-hinweis{font-size:13px;font-weight:800;color:var(--ink-2)}
.vl-hinweis.da{color:var(--gruen-tief)}
.vl-hinweis.fehlt{color:var(--clay-tief)}
.vl-details{padding:4px 14px 12px 14px;background:var(--sonne-hell);border-bottom:1px solid var(--line)}
.vl-details ol{list-style:none;margin:0;padding:0}
.vl-details li{display:flex;gap:12px;padding:6px 0;border-top:1px dashed var(--line);font-size:14.5px}
.vl-details li:first-child{border-top:0}
.vl-details time{font-variant-numeric:tabular-nums;font-weight:800;min-width:48px}
.vl-details small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.vl-details p{font-size:14px;color:var(--ink-2);padding:6px 0}
@media(max-width:560px){
  .vl-raster{grid-template-columns:minmax(0,1fr) 70px 92px;gap:6px}
  .vl-spalten{font-size:10.5px;letter-spacing:.02em;padding:8px 12px}
  .vl-zeile,.vl-gruppe,.vl-details{padding-left:12px;padding-right:12px}
  .vl-zeit{font-size:15px}
}
.sheet{
  width:min(560px,100%);max-height:min(86dvh,760px);overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--paper);border-radius:24px 24px 0 0;
  padding:10px clamp(14px,3.5vw,20px) calc(24px + env(safe-area-inset-bottom));
  padding-left:max(clamp(14px,3.5vw,20px),env(safe-area-inset-left));
  padding-right:max(clamp(14px,3.5vw,20px),env(safe-area-inset-right));
  animation:sheetUp .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.5}}
.sheet-grip{width:44px;height:5px;border-radius:99px;background:var(--line);margin:6px auto 16px}
.sheet h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(19px,4.6vw,22px);margin-bottom:4px}
.sheet .sub{font-size:clamp(13.5px,3vw,14.5px);color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.reason-list{display:flex;flex-direction:column;gap:9px}
.reason-list button{
  min-height:56px;border-radius:14px;border:2px solid var(--line);background:#fff;
  padding:12px 16px;text-align:left;font-weight:700;font-size:16px;line-height:1.35;
}
.reason-list button.on{border-color:var(--clay);background:var(--clay-hell)}
.sheet .field{margin-top:14px}
.sheet label{display:block;font-size:13.5px;font-weight:800;color:var(--ink-2);margin-bottom:6px}
.sheet input[type=text]{
  width:100%;min-height:var(--tap);border-radius:14px;border:1px solid var(--line);
  background:#fff;padding:0 15px;font-size:16.5px;
}
.sheet-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn.ghost{flex:1 1 120px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.btn.rot{flex:1.3 1 140px;background:var(--rot);color:#fff;box-shadow:0 3px 0 rgba(150,50,38,.4)}
.btn.clay{flex:1.3 1 140px;background:var(--clay);color:#fff;box-shadow:0 3px 0 rgba(192,90,46,.45)}

/* Einstellungen */
.set-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:13px;min-height:60px;
  padding:10px 4px;border-bottom:1px solid var(--line-soft);
}
.set-row:last-child{border-bottom:none}
.set-row .grow{flex:1 1 190px;min-width:0}
.set-row .t{font-weight:800;font-size:16px}
.set-row .d{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.set-btn{
  flex:none;min-height:46px;padding:0 16px;border-radius:12px;
  font-weight:800;font-size:14.5px;background:var(--gruen);color:#fff;
}
.set-btn.aus{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.set-btn[disabled]{opacity:.5}

/* ================= Anmeldung ================= */
#login{
  position:fixed;inset:0;z-index:80;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,1vh,6px);
  text-align:center;
  overflow:auto;                        /* flaches Querformat: lieber scrollen als abschneiden */
  padding:max(clamp(12px,3vw,24px),env(safe-area-inset-top)) max(clamp(12px,3vw,24px),env(safe-area-inset-right))
          max(clamp(12px,3vw,24px),env(safe-area-inset-bottom)) max(clamp(12px,3vw,24px),env(safe-area-inset-left));
}
#login .bird-big svg{width:clamp(64px,14vh,120px);height:auto}
#login h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(15px,3.4vw,19px);letter-spacing:-.4px;margin-top:6px}
#login h1 i{font-style:normal;color:var(--gruen)}
#login h1 b{color:var(--clay)}
#login .l-sub{color:var(--ink-2);font-size:clamp(14px,3.2vw,15.5px);margin-bottom:clamp(10px,2.5vh,20px);max-width:34ch;line-height:1.45}
.pin-dots{display:flex;gap:14px;margin-bottom:8px;min-height:20px}
.pin-dots span{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-3)}
.pin-dots span.voll{background:var(--gruen);border-color:var(--gruen)}
.pin-fehler{min-height:22px;font-size:14.5px;font-weight:700;color:var(--rot)}
/* Tastenfeld haengt an Breite UND Hoehe - im Querformat ist die Hoehe knapp. */
.pinpad{display:grid;grid-template-columns:repeat(3,clamp(64px,min(22vw,13vh),86px));gap:clamp(8px,1.6vh,13px);margin-top:8px}
.pinpad button{
  height:clamp(54px,min(19vw,11vh),76px);border-radius:20px;background:var(--card);border:1px solid var(--line);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(22px,5vw,29px);box-shadow:var(--schatten);
}
.pinpad button:active{transform:scale(.94);background:var(--gruen-hell)}
.pinpad button.leise{background:transparent;border:none;box-shadow:none;font-size:clamp(16px,3.6vw,21px);color:var(--ink-2)}
/* Persoenliche Anmeldung (ADR-018): Namensauswahl vor der PIN, dazu ein
   ausdruecklicher Bestaetigen-Knopf statt des frueheren Auto-Sendens
   nach 700ms - bei 4-8-stelligen PINs (statt der frueher ueblichen 4)
   loeste das sonst zu frueh aus, siehe Befund von Deni. */
.namepick{display:flex;flex-direction:column;gap:9px;width:min(88vw,380px);max-height:44vh;overflow:auto;margin:4px 0 2px;padding:2px}
.namepick button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:54px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16.5px;color:var(--ink);
  box-shadow:var(--schatten);padding:0 18px;text-align:left;
}
.namepick button:active{transform:scale(.97);background:var(--gruen-hell)}
.namepick button .rolle{font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:12px;color:var(--ink-2)}
.namepick button.notfall{background:transparent;box-shadow:none;color:var(--ink-2);font-weight:700;font-size:14px;height:42px;justify-content:center}
.l-back{background:none;border:none;color:var(--ink-2);font-weight:700;font-size:14px;margin-bottom:2px;padding:6px 10px}
.l-back:active{color:var(--ink)}
.pin-ok{
  margin-top:12px;min-width:200px;height:52px;border-radius:16px;
  background:var(--gruen);color:#fff;border:none;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:17px;box-shadow:var(--schatten);
}
.pin-ok:disabled{opacity:.35}
.pin-ok:active:not(:disabled){transform:scale(.97)}
.who-badge{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Sehr flach (Handy im Liegen): Vogel und Untertitel weichen, sonst
   passt das Tastenfeld nicht mehr auf den Schirm. */
@media(orientation:landscape) and (max-height:460px){
  #login .bird-big,#login .l-sub{display:none}
  #login h1{font-size:14px;margin-top:0}
}
.login-schuettel{animation:schuettel .4s}
@keyframes schuettel{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}

/* ================= Snackbar & Banner ================= */
#snack{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  z-index:70;display:flex;align-items:center;gap:16px;
  background:var(--ink);color:var(--paper);border-radius:16px;
  padding:13px 18px;font-weight:700;font-size:15.5px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  max-width:min(92vw,520px);box-shadow:0 8px 30px rgba(58,50,38,.35);
}
#snack.zeig{opacity:1;transform:translateX(-50%);pointer-events:auto}
#snack button{color:var(--sonne);font-weight:800;font-size:15.5px;min-height:44px;padding:0 6px;flex:none}
#offline{
  position:sticky;top:0;z-index:40;display:none;align-items:center;justify-content:center;gap:9px;
  background:var(--sonne);color:#5C4708;font-weight:800;font-size:14.5px;padding:9px 14px;
}
#offline.zeig{display:flex}

@media(max-width:600px){input,textarea,select{font-size:16px!important}.chip{min-height:44px}.ep-knopf,.ep-vorschlag,.vl-pfeil,.vl-heute{min-height:44px}.dlg-mitte{padding:20px 16px}.top-count{padding-inline:9px}}
/* Ausschliesslich Demo: keine Installation, Anmeldung oder Geraeteeinstellungen. */
#btnSettings,#werAngemeldet{display:none!important}.demo-target{outline:3px solid #b35a26!important;outline-offset:3px;box-shadow:0 0 0 6px #ffdd9b88!important}
.scrim.mitte{padding:16px;overflow-y:auto}.scrim.mitte>.dlg-mitte{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;min-height:0}
@media(prefers-reduced-motion:no-preference){.scrim.open .dialog,.at-kind{animation:demoTabletEnter .22s ease-out}@keyframes demoTabletEnter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}}