/* PIN-Felder sind bewusst KEINE type="password"-Felder: Chrome bietet
   dort ungefragt "Passwort speichern?" an und ignoriert autocomplete=off.
   Die Maskierung uebernimmt CSS - die Ziffern bleiben unsichtbar, der
   Passwortmanager sieht ein ganz normales Textfeld. */
input.maskiert{-webkit-text-security:disc;text-security:disc;font-family:var(--font-sans,inherit);letter-spacing:.18em}
:root{
  --paper:#EEF0E9; --paper-2:#E4E8DE; --card:#FFFFFF;
  --ink:#16241F; --ink-2:#55655E; --ink-3:#8D9A93; --line:#DCE2D6;
  --teal:#D26A10; --teal-deep:#9C4B08; --teal-soft:#FBE8D4;
  --amber:#E08A0B; --amber-soft:#FBEBCE;
  --berry:#C0384F; --berry-soft:#F7E2E5;
  --plum:#6A4C93; --sky:#2E7FA8; --moss:#4C8B3F;
  --r-lg:30px; --r-md:20px; --r-sm:13px;
  --shadow:0 1px 2px rgba(22,36,31,.05), 0 18px 40px -18px rgba(22,36,31,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Kiosk mit Touchscreen: der Mauszeiger hat hier nichts verloren.
   Statt ihn hart auszublenden traegt der Body die Klasse nur, solange
   keine Maus benutzt wird: erste echte Mausbewegung blendet den Zeiger
   ein, nach 8 s Mausruhe verschwindet er wieder. Touch am Kiosk loest
   keine Mausbewegung aus - dort bleibt der Zeiger unsichtbar. */
body.no-cursor,body.no-cursor *,body.no-cursor *::before,body.no-cursor *::after{cursor:none !important}
html,body{height:100%}
body{
  font-family:system-ui,"Segoe UI Variable Display","Segoe UI",Roboto,"Noto Sans","DejaVu Sans",sans-serif;
  background:var(--paper); color:var(--ink);
  overflow:hidden; user-select:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- Garderoben-Symbol ---------- */
.sym{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--sym-size);height:var(--sym-size);
  border-radius:29%;transform:rotate(var(--sym-tilt));
  border:2px solid #fff;
  box-shadow:0 4px 0 rgba(22,36,31,.13), 0 10px 22px -10px rgba(22,36,31,.5),
    inset 0 -6px 12px rgba(0,0,0,.10), inset 0 6px 12px rgba(255,255,255,.22);
}
.sym svg{width:60%;height:60%;fill:#fff;stroke:#fff;stroke-width:0;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.16))}
/* Sticker-Look wie in der Verwaltung - die Kinder erkennen ihr
   Symbol an der Tuer nur wieder, wenn es ueberall gleich aussieht. */
.sym.t1{background:linear-gradient(145deg,#3CBF85,#1B6B47)}
.sym.t2{background:linear-gradient(145deg,#F1975C,#C05A2E)}
.sym.t3{background:linear-gradient(145deg,#DB5A72,#A02540)}
.sym.t4{background:linear-gradient(145deg,#8A6BC0,#4E3579)}
.sym.t5{background:linear-gradient(145deg,#4D9FD0,#1F5C93)}
.sym.t6{background:linear-gradient(145deg,#6FAE5C,#3A6E2E)}

/* ---------- Rahmen ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;font-size:14px;color:var(--ink-2);
}
.topbar-spacer{width:1px}
.pm-brand{
  position:fixed;left:22px;bottom:20px;z-index:10;
  display:flex;align-items:center;gap:13px;pointer-events:none;
}
.pm-bird{height:66px;width:auto;flex:none;filter:drop-shadow(0 3px 6px rgba(22,36,31,.12))}
.pm-text{display:flex;flex-direction:column;gap:2px}
.pm-word{font-family:'Baloo 2',ui-rounded,'SF Pro Rounded','Nunito','Segoe UI',system-ui,sans-serif;
  font-weight:800;font-size:20px;letter-spacing:-.5px;line-height:1;display:flex}
.pm-word i{font-style:normal;color:#2E9E6B}
.pm-word b{font-weight:800;color:#E07A3F}
.pm-tag{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
@media (max-width:560px){ .pm-bird{height:42px} .pm-word{font-size:14px} }
.topbar-right{display:flex;align-items:center;gap:16px}
.conn{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.04em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}
.dot.ok{background:var(--teal)}
#clock{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px}

.screen{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:56px 24px 24px;text-align:center;
}
.screen.active{display:flex}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Ruhebildschirm ----------
   Bewusst ohne Dauer-Animationen. Das Terminal laeuft auf einem
   Raspberry Pi im Kiosk und zeigt diesen Bildschirm fast den ganzen
   Tag: endlos laufende CSS-Animationen (ziehende Wolken, schwebende
   Sonne, 40 querfliegende Symbole, Pulsringe) hielten GPU und CPU
   permanent wach - der Pi wurde heiss und stuerzte gelegentlich ab.
   Der Schmuck ist jetzt ein Standbild: einmal gezeichnet, kostet er
   nichts mehr. Kurze Rueckmeldungen auf Beruehrung (Knopfdruck,
   Toast) und der Lade-Kreisel bleiben - sie laufen nur Sekunden.
   Einzige bewusste Ausnahme: der Pulsring am Scan-Knopf, siehe
   Kommentar bei .scan .wave. */
.hills{position:absolute;left:-24px;right:-24px;bottom:-24px;height:26vh;min-height:110px;pointer-events:none;z-index:0}
.hills svg{width:100%;height:100%;display:block}
.cloud{
  position:absolute;top:14vh;left:63vw;width:120px;height:34px;border-radius:999px;
  background:rgba(255,255,255,.85);
  box-shadow:26px -15px 0 5px rgba(255,255,255,.85), 58px -4px 0 0 rgba(255,255,255,.85);
  pointer-events:none;z-index:0;
}
#idle > *:not(.hills):not(.cloud):not(.sun){position:relative;z-index:2}

/* Sanfte Abendsonne passend zum Orange-Akzent */
.sun{
  position:absolute;top:9vh;right:11vw;width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FBD9A8,#F2B25C 68%,#E89A38);
  box-shadow:0 0 0 16px rgba(242,178,92,.18), 0 0 0 34px rgba(242,178,92,.08), 0 0 60px rgba(226,140,50,.35);
  z-index:0;pointer-events:none;
}
.cloud.c2{top:24vh;left:12vw;transform:scale(.62);opacity:.65}
.greeting{font-size:clamp(15px,2.2vh,20px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
.big-clock{font-size:clamp(58px,13vh,120px);font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:.95;margin-top:6px}
.big-date{font-size:clamp(15px,2.4vh,21px);color:var(--ink-2);margin-top:6px;font-weight:500}

.scan{
  margin:clamp(20px,4.5vh,46px) 0 clamp(14px,2.6vh,26px);
  position:relative;width:clamp(120px,20vh,168px);height:clamp(120px,20vh,168px);
  display:flex;align-items:center;justify-content:center;
}
.scan .core{
  width:64%;height:64%;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 10px 26px -8px rgba(156,75,8,.7);
}
.scan .core svg{width:52%;height:52%}
/* Die EINZIGE Dauer-Animation der Seite: der Pulsring am Scan-Knopf.
   Er ist der Blickfang, der Eltern zum Lesegeraet fuehrt - der darf
   leben, und zwar deutlich sichtbar. Bewusst billig gehalten: nur
   transform und opacity (laeuft im Compositor, ohne Neuzeichnen) auf
   drei kleinen Ringen. Wer hier wieder Bildschirm-fuellende
   Animationen ergaenzt, holt die Hitzeprobleme des Pi zurueck. */
.scan .wave{
  position:absolute;inset:0;border-radius:50%;border:3.5px solid var(--teal);
  opacity:0;animation:wave 2.6s cubic-bezier(.2,.7,.4,1) infinite;
  will-change:transform,opacity;
}
.scan .wave:nth-of-type(2){animation-delay:.85s}
.scan .wave:nth-of-type(3){animation-delay:1.7s}
@keyframes wave{0%{transform:scale(.62);opacity:.75}100%{transform:scale(1.22);opacity:0}}
.idle-title{font-size:clamp(24px,4.6vh,38px);font-weight:800;letter-spacing:-.025em}
.idle-sub{font-size:clamp(15px,2.4vh,20px);color:var(--ink-2);margin-top:9px;max-width:560px;line-height:1.45}

/* ---------- Karten ---------- */
.card{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  width:min(720px,94vw);padding:clamp(22px,4vh,38px);text-align:left;
}
.card.center{text-align:center}
.child-head{display:flex;align-items:center;gap:20px}
.child-id{min-width:0;flex:1}
.child-name{font-size:clamp(28px,5.4vh,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.name-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.meta-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.meta-chips[hidden]{display:none}
.meta-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:clamp(13.5px,2vh,16px);font-weight:700;color:var(--ink-2);
}
.meta-chip.who{background:#E7F5ED;border-color:#BFE3CE;color:#1F7A50}
/* Gesundheitshinweis (Allergien). Warme Warnfarbe statt Rot: die Info soll
   auffallen, aber niemanden erschrecken - Eltern lesen sie taeglich. */
.meta-chip.health{background:#FCEBDD;border-color:#F0C9A6;color:#9A4A1B}
.meta-chip.health svg{width:17px;height:17px;flex:none}
.meta-chip.who .dot{
  width:9px;height:9px;border-radius:50%;background:#2E9E6B;flex:none;
  box-shadow:0 0 0 3px rgba(46,158,107,.22);
}
.meta-chip.who b{font-weight:800}
.last-bring{
  display:flex;align-items:center;gap:6px;margin-top:9px;
  font-size:clamp(12.5px,1.9vh,14.5px);font-weight:600;color:var(--ink-3);
}
.last-bring svg{width:14px;height:14px;flex:none;opacity:.75}
.last-bring[hidden]{display:none}
.badge{
  flex:none;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;background:var(--teal-soft);color:var(--teal-deep);
}
.badge.absent{background:var(--paper-2);color:var(--ink-2)}
.rule{height:1px;background:var(--line);margin:clamp(18px,3vh,28px) 0}
.question{
  font-size:clamp(13px,2vh,15.5px);font-weight:800;color:var(--ink-3);
  letter-spacing:.18em;text-indent:.02em;text-transform:uppercase;
  margin:2px 0 14px;
}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{
  border:0;border-radius:var(--r-md);cursor:pointer;
  min-height:clamp(76px,13vh,104px);padding:16px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font-weight:800;font-size:clamp(19px,3.1vh,25px);letter-spacing:-.015em;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn small{font-size:13px;font-weight:600;letter-spacing:.02em;opacity:.82}
.btn:active{transform:translateY(3px) scale(.995)}
.btn:disabled{opacity:.32;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
.btn.bring{
  background:linear-gradient(165deg,#3FB57E,#2E9E6B 55%,#1F7A50);color:#fff;
  box-shadow:0 6px 0 #145233, 0 14px 26px -14px rgba(31,122,80,.55), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn.bring:active{box-shadow:0 2px 0 #145233, inset 0 1px 0 rgba(255,255,255,.26)}
.btn.pickup{
  background:linear-gradient(165deg,#F0925A,#E07A3F 55%,#C05A2E);color:#fff;
  box-shadow:0 6px 0 #7A3A06, 0 14px 26px -14px rgba(156,75,8,.5), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn.pickup:active{box-shadow:0 2px 0 #7A3A06, inset 0 1px 0 rgba(255,255,255,.26)}
.btn .act-ico{width:27px;height:27px;flex:none;margin-bottom:2px}
.btn.bring small,.btn.pickup small{opacity:.92}
.btn.bring:disabled,.btn.pickup:disabled{
  background:var(--paper-2);color:var(--ink-3);box-shadow:0 4px 0 #CDD4C6;opacity:1;
}
.btn.quiet{background:var(--paper-2);color:var(--ink-2);box-shadow:0 4px 0 #CDD4C6;min-height:60px;font-size:17px}
.btn.quiet:active{box-shadow:0 1px 0 #CDD4C6}
.btn.quiet.cancel{background:#F9E7E4;color:#A03A2E;box-shadow:0 4px 0 #E9C4BE}
.btn.quiet.cancel:active{box-shadow:0 1px 0 #E9C4BE}
.btn.wide{grid-column:1/-1}

/* ---------- Ergebnis / Warten ---------- */
.mark{
  width:clamp(84px,15vh,116px);height:clamp(84px,15vh,116px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  background:var(--teal-soft);color:var(--teal-deep);
}
.mark svg{width:46%;height:46%}
.mark.warn{background:var(--amber-soft);color:#8A5504}
.mark.bad{background:var(--berry-soft);color:var(--berry)}
.result-title{font-size:clamp(26px,5vh,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.result-text{font-size:clamp(15px,2.5vh,20px);color:var(--ink-2);margin-top:12px;line-height:1.5;max-width:520px;margin-inline:auto}
.countdown{margin-top:20px;font-size:13px;color:var(--ink-3);letter-spacing:.06em}

.waitwrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.ring{position:relative;width:clamp(96px,17vh,132px);height:clamp(96px,17vh,132px)}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--amber-soft);stroke-width:9}
.ring .bar{fill:none;stroke:var(--amber);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:1 999;transition:stroke-dasharray .9s linear}
.ring .inner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,3.6vh,28px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.waitrow{display:flex;align-items:center;gap:16px;justify-content:center}
.spinner{
  width:64px;height:64px;border-radius:50%;
  border:7px solid var(--teal-soft);border-top-color:var(--teal);
  animation:spin .9s linear infinite;margin:0 auto 20px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Einstellungen ---------- */
.lang-bar{
  position:fixed;top:14px;left:16px;z-index:55;
  transition:top .18s ease;
  display:flex;flex-direction:row;gap:7px;
  /* Kein backdrop-filter: Hintergrund-Weichzeichnung ist auf dem Pi
     eine der teuersten GPU-Operationen ueberhaupt. Eine fast deckende
     Flaeche leistet dasselbe fuer umsonst. */
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:999px;padding:6px 8px;
  box-shadow:0 4px 14px rgba(34,48,43,.08);
}
body.getrennt .lang-bar{top:70px}
.lang-btn{
  width:38px;height:38px;border-radius:50%;border:2.5px solid transparent;
  padding:0;background:none;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,border-color .12s ease;
}
.lang-btn svg{width:100%;height:100%;border-radius:50%;display:block}
.lang-btn:active{transform:scale(.92)}
.lang-btn.sel{border-color:var(--teal);box-shadow:0 0 0 3px rgba(210,106,16,.25)}
.lang-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.sub-actions{
  grid-column:1/-1;
  display:flex;justify-content:center;align-items:stretch;gap:16px;
  margin-top:2px;
}
.btn.suba{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  flex:0 1 150px;min-width:128px;
  /* Annaehernd quadratisch statt 2:1-Querriegel - die Knoepfe wirkten
     in die Laenge gezogen. Die Breite braucht das laengste Wort
     ("Erzieherhinweise"), also waechst die Hoehe. */
  min-height:118px;padding:14px 12px;font-size:14.5px;font-weight:700;line-height:1.2;text-align:center;
  border:2px solid transparent;position:relative;
}
/* Roter Zaehler am Hinweise-Knopf: neue Erzieherhinweise auf einen Blick. */
.msg-badge{
  position:absolute;top:-8px;right:-8px;min-width:26px;height:26px;padding:0 7px;
  display:flex;align-items:center;justify-content:center;
  background:#D64545;color:#fff;border-radius:999px;border:2.5px solid var(--card,#fff);
  font-size:14px;font-weight:800;line-height:1;
}
.msg-badge[hidden]{display:none}
.btn.suba svg{width:30px;height:30px;flex:none}
.btn.suba.s-msg{background:#FDF0D0;color:#8A6206;border-color:#F1D695;box-shadow:0 4px 0 #E7C878}
.btn.suba.s-msg:active{box-shadow:0 1px 0 #E7C878;transform:translateY(3px)}
.btn.suba.s-dates{background:#DFF2E7;color:#1F7A50;border-color:#B6DFC8;box-shadow:0 4px 0 #9CCDB2}
.btn.suba.s-dates:active{box-shadow:0 1px 0 #9CCDB2;transform:translateY(3px)}
.btn.suba.s-meal{background:var(--teal-soft);color:var(--teal-deep);border-color:#F0CBA4;box-shadow:0 4px 0 #E5B98B}
.btn.suba.s-meal:active{box-shadow:0 1px 0 #E5B98B;transform:translateY(3px)}
.btn.suba.s-note{background:#E2EDF6;color:#2B5F86;border-color:#C2D8E8;box-shadow:0 4px 0 #A9C6DB}
.btn.suba.s-note:active{box-shadow:0 1px 0 #A9C6DB;transform:translateY(3px)}
/* Freitext fuer die Elternmitteilung: grosses Feld, gut lesbar,
   Bildschirmtastatur klappt darunter auf. */
#noteText{
  width:100%;min-height:120px;resize:none;border:2.5px solid #C2D8E8;border-radius:16px;
  background:#FFFFFF;color:var(--ink);padding:14px 16px;font:inherit;font-size:18px;line-height:1.5;
}
#noteText:focus{outline:3px solid #2B5F86;outline-offset:2px}
.note-hint{font-size:14.5px;color:var(--ink-soft);text-align:left;margin:10px 2px 16px}
/* Schnellauswahl: ein Tipp fuellt das Feld, tippen bleibt moeglich. */
.note-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.note-chip{
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  padding:11px 16px;border-radius:999px;border:2px solid #C2D8E8;
  background:#F2F8FC;color:#2B5F86;box-shadow:0 3px 0 #A9C6DB;
}
.note-chip:active{box-shadow:0 1px 0 #A9C6DB;transform:translateY(2px)}
.note-count{font-size:13.5px;color:var(--ink-soft);text-align:right;margin-top:6px}
#noteSend{width:100%;font-size:18px;padding:16px;background:#2B5F86;color:#fff;box-shadow:0 5px 0 #1E4560}
#noteSend:active{box-shadow:0 1px 0 #1E4560;transform:translateY(3px)}
body.kbd-open .note-card{transform:translateY(calc(-1 * min(190px,22vh)));transition:transform .18s ease}
@media (max-width:620px){ .sub-actions{flex-direction:column;align-items:stretch} .btn.suba{flex-direction:row;flex:none;min-height:56px} }
.panel-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;text-align:left}
.call-warn{
  background:var(--teal-soft);color:var(--teal-deep);border-radius:14px;
  padding:14px 16px;font-size:15.5px;line-height:1.55;text-align:left;margin-bottom:18px;
}
.dates-list{max-height:46vh;overflow-y:auto;text-align:left;margin:0 -4px 14px;padding:0 4px}
#speiseplan .card{max-height:calc(100dvh - 100px);display:flex;flex-direction:column}
.meal-weeks{display:flex;gap:12px;margin-bottom:12px}
.meal-weeks button{flex:1;min-height:48px;border:2px solid var(--line);border-radius:14px;background:var(--paper);font-weight:700}
.meal-weeks button[aria-pressed="true"]{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-deep)}
.meal-period{color:var(--ink-2);margin-bottom:12px}
.meal-list{overflow-y:auto;min-height:0;text-align:left;margin-bottom:14px;overscroll-behavior:contain}
.meal-day{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 8px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.meal-day.today{background:var(--teal-soft);border-radius:12px}
.meal-day h3{font-size:17px}.meal-day time{display:block;font-size:15px;color:var(--ink-2);margin-top:3px}
.meal-dish{font-size:20px;font-weight:800}.meal-detail{font-size:16px;line-height:1.4;margin-top:4px}.meal-detail b{font-weight:700;color:var(--ink-2)}
.meal-empty{color:var(--ink-2);font-size:17px;padding:8px 0}
@media(max-width:560px){.meal-day{grid-template-columns:90px minmax(0,1fr);gap:10px}.meal-dish{font-size:18px}}
/* Erzieherhinweise als Notizzettel - dasselbe Bild wie in der
   Verwaltung, nur groesser: das Tablet haengt am Eingang und wird
   im Stehen gelesen. Nur Anschauen, kein Loeschen. Die Zettel
   haengen auf einem warmen Brett statt kalt in der weissen Karte;
   die Pinnnadel im Kopf macht die Metapher komplett. */
.msg-kopf{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.msg-kopf .panel-title{margin-bottom:0}
.msg-kopf svg{width:27px;height:27px;flex:none;color:var(--teal);transform:rotate(14deg)}
.msg-brett{background:linear-gradient(180deg,#F7EDDA,#EFE0C0);border-radius:18px;
  border:1.5px solid #E4D2AC;box-shadow:inset 0 2px 12px rgba(22,36,31,.12);
  padding:4px 12px 12px;margin-bottom:14px}
.msg-brett .dates-list{margin:0;padding:0 4px}
.msg-brett .date-empty{padding:26px 10px;text-align:center;font-style:italic;color:#7A6A4C}
/* Der Transparenzsatz unter der Pinnwand: da, aber leise - er ist
   eine Auskunft, keine Warnung. */
.msg-fuss{margin:-6px 0 14px;text-align:center;font-size:15px;
  color:rgba(28,38,32,.55);line-height:1.4}
#msgList{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px 18px;padding:18px 6px 8px}
.tz{position:relative;min-height:150px;padding:26px 16px 12px;
  display:flex;flex-direction:column;gap:8px;border-radius:2px;
  background:var(--tz-p,#FEF6C7);transform:rotate(var(--tz-d,-1.2deg));
  box-shadow:0 8px 16px -6px rgba(22,36,31,.42),0 1px 2px rgba(22,36,31,.15)}
.tz:nth-child(4n+2){--tz-p:#DFF3E4;--tz-d:1.1deg}
.tz:nth-child(4n+3){--tz-p:#F8E3E6;--tz-d:-.6deg}
.tz:nth-child(4n+4){--tz-p:#DCEBFA;--tz-d:1.6deg}
.tz-tape{position:absolute;top:-9px;left:50%;width:76px;height:22px;
  transform:translateX(-50%) rotate(-2deg);background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tz-text{flex:1;font-family:'Segoe Print','Bradley Hand','Comic Sans MS','Baloo 2',cursive;
  font-size:17px;line-height:1.55;overflow-wrap:anywhere;color:#463B2B}
.tz-datum{font-size:12px;color:rgba(22,36,31,.55);text-align:right}
.date-row{display:flex;gap:20px;align-items:flex-start;padding:21px 2px;border-bottom:1.5px solid var(--line)}
.date-row:last-child{border-bottom:none}
/* Feste Breite statt min-width: sonst ist der Kasten mal breit, mal
   schmal und die Titel dahinter stehen auf verschiedenen Hoehen. 148px
   sind auf die laengste normale Zeile in 15px Schrift ausgelegt
   ("10:00 - 13:00" misst so rund 125px, plus Innenabstand). Das Terminal
   haengt im Eingangsbereich - da lesen auch Grosseltern ohne Brille. */
.date-chip{
  flex:none;width:148px;box-sizing:border-box;text-align:center;
  background:var(--teal-soft);color:var(--teal-deep);
  border-radius:15px;padding:13px 8px;line-height:1.3;overflow:hidden;
}
/* display:block, sonst laufen Tag und Uhrzeit in einer Zeile zusammen -
   dasselbe galt fuer Titel und Beschreibung darunter. */
.date-chip .dc-day{display:block;font-size:17px;font-weight:800;white-space:nowrap;letter-spacing:-.01em}
.date-chip .dc-time{
  display:block;font-size:15px;font-weight:700;opacity:.85;margin-top:5px;
  white-space:nowrap;
}
/* Der Kasten hat immer genau zwei Zeilen: Datum, darunter Uhrzeit.
   Mehrtaegiges steckt im Datum ("13.09. - 16.09."), nie in der Zeit. */
.date-main{min-width:0;flex:1}
.date-title{display:block;font-size:19px;font-weight:800;letter-spacing:-.012em;line-height:1.3}
.date-sub{display:block;font-size:15.5px;color:var(--ink-2);margin-top:10px;line-height:1.55}
.date-empty{color:var(--ink-2);font-size:15px;padding:18px 4px;text-align:center}
.btn.forgot{
  /* flex-direction ausdruecklich: die Basis-.btn stapelt in der Spalte,
     hier sollen Symbol und Text nebeneinander stehen. */
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;
  margin:34px auto 0;width:auto;min-height:68px;padding:0 32px 0 15px;
  background:linear-gradient(165deg,#E07B26,var(--teal) 55%,var(--teal-deep));
  color:#fff;border:0;border-radius:999px;text-align:left;
  box-shadow:0 6px 0 #7A3A06, 0 16px 32px -14px rgba(156,75,8,.55),
             inset 0 1px 0 rgba(255,255,255,.28);
  /* line-height:1 - sonst schiebt die Zeilenhoehe der Schrift den Text
     in der festen Hoehe nach unten aus der Mitte. */
  font-size:19.5px;font-weight:800;letter-spacing:-.005em;line-height:1;
}
.btn.forgot:active{box-shadow:0 2px 0 #7A3A06, inset 0 1px 0 rgba(255,255,255,.28);transform:translateY(4px)}
/* Symbol in einer eigenen Scheibe: gibt dem Fragezeichen Luft und dem
   Knopf einen Anker, statt es frei neben der Schrift schweben zu lassen. */
.btn.forgot .fbadge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.btn.forgot svg{width:22px;height:22px;flex:none;stroke-width:2.3}
.forgot-card{width:min(500px,94vw);text-align:center;padding:clamp(26px,4.5vh,40px)}
.forgot-icon{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;margin:0 auto 16px;
  background:var(--teal-soft);color:var(--teal-deep);
}
.forgot-icon svg{width:36px;height:36px}
.forgot-title{font-size:clamp(24px,4vh,31px);font-weight:800;letter-spacing:-.02em}
.forgot-lead{font-size:15.5px;color:var(--ink-2);line-height:1.55;margin:10px auto 20px;max-width:40ch}
.forgot-input{
  width:100%;border:2px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  color:var(--ink);font-size:25px;font-weight:700;letter-spacing:.08em;text-align:center;
  padding:16px 14px;font-variant-numeric:tabular-nums;text-transform:uppercase;
}
.forgot-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(210,106,16,.16)}
.forgot-input::placeholder{color:var(--ink-3);font-weight:500;letter-spacing:.04em}
.forgot-err{margin-top:10px;color:var(--berry);font-size:14.5px;font-weight:700}
.forgot-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.btn.forgot-go{
  width:100%;min-height:64px;font-size:19px;
  background:var(--teal);color:#fff;box-shadow:0 5px 0 var(--teal-deep);
}
.btn.forgot-go:active{box-shadow:0 1px 0 var(--teal-deep);transform:translateY(3px)}
.forgot-actions .btn.quiet{width:100%}
.forgot-hint{margin-top:16px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.gear{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--ink-3);
  box-shadow:0 2px 10px rgba(22,36,31,.12);
  display:flex;align-items:center;justify-content:center;
}
.gear svg{width:21px;height:21px}
/* Personalkarte: kompakt halten. Die Fachkraft steht hier zehn Sekunden,
   nicht zehn Minuten - Riesenflaechen kosten nur Blickweg. */
.staff-card{
  position:relative;overflow:hidden;
  width:min(430px,94vw);text-align:center;
  padding:clamp(22px,3.4vh,30px) clamp(20px,3.4vw,28px) clamp(18px,2.6vh,24px);
  display:flex;flex-direction:column;align-items:center;
}
.staff-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#3FB57E,#7CCB9F 45%,#F4B942);
}
.staff-card.out::before{background:linear-gradient(90deg,#F0925A,#E07A3F 45%,#F4B942)}
/* Die Uhrzeit traegt die Karte. Tabellenziffern, damit sie beim
   Weiterlaufen der Minute nicht springt. */
.staff-uhr{
  font-size:clamp(46px,8.4vh,62px);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:#1F7A50;margin-top:2px;
}
.staff-card.out .staff-uhr{color:var(--teal-deep)}
.staff-datum{
  font-size:clamp(12px,1.8vh,13.5px);font-weight:700;color:var(--ink-3);
  margin:5px 0 12px;
}
.staff-card h1{font-size:clamp(22px,3.3vh,27px);line-height:1.15;margin-bottom:0;letter-spacing:-.025em}
.staff-card.in h1{color:#1F7A50}
.staff-card.out h1{color:var(--teal-deep)}
.staff-name{font-family:'Baloo 2',ui-rounded,'SF Pro Rounded','Nunito','Segoe UI',system-ui,sans-serif;
  font-size:clamp(16px,2.4vh,19px);font-weight:700;color:var(--ink-2)}
/* Rollen-Kaestchen: die Bezeichnung kommt aus der Verwaltung und ist
   Freitext - deshalb ein neutrales, kompaktes Kaestchen statt Farben. */
.staff-role{
  display:inline-block;margin:7px auto 0;padding:5px 14px;border-radius:9px;
  background:var(--paper-2);border:1.5px solid #D9D2BE;
  font-size:clamp(12px,1.8vh,13.5px);font-weight:800;letter-spacing:.04em;
  color:var(--ink-2);max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.staff-role[hidden]{display:none}
.staff-line{
  display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  padding:8px 16px;border-radius:999px;background:var(--paper-2);
  border:1.5px solid #D9D2BE;
  font-size:clamp(13.5px,2vh,15px);font-weight:800;color:var(--ink);
}
.staff-line::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;background:#2E9E6B}
.staff-card.out .staff-line::before{background:var(--teal)}
.staff-line.big{
  margin-top:7px;background:#DFF2E7;color:#1F7A50;
  font-size:clamp(13.5px,2vh,15.5px);font-weight:800;
}
.staff-card.out .staff-line.big{background:var(--teal-soft);color:var(--teal-deep)}
.staff-line.big::before{background:#F4B942}

/* Alle drei Knoepfe teilen dieselbe Breite und eine ruhige Staffelung:
   Stempeln vorne, Kinderliste daneben, Schliessen zurueckhaltend.
   Das "flex:none" ist wichtig - .btn.suba bringt flex-basis:176px mit,
   und in dieser Spalte wird daraus eine Hoehe von 176 Pixeln. */
.staff-actions{display:flex;flex-direction:column;gap:9px;width:min(310px,100%);margin-top:18px}
/* Stempeln und Kinderliste sind zwei verschiedene Vorgaenge - und sie
   sind unterschiedlich teuer im Fehlerfall: ein Fehlgriff auf die
   Kinderliste kostet einen Tipp auf "Zurueck", ein Fehlgriff auf
   "Arbeit beenden" schreibt einen Zeitstempel, den nur ein erneutes
   Auflegen des Chips wieder geradebiegt. Deshalb hier eine echte
   Zaesur mit Beschriftung statt der neun Pixel, die sonst reichen. */
.staff-sep{
  /* Oben mehr Luft als unten: die Zaesur gehoert optisch zum Block
     darunter, nicht mittig zwischen beide. Gleicher Abstand auf beiden
     Seiten laesst sie schweben. */
  display:flex;align-items:center;gap:12px;margin:17px 2px 6px;
  font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);user-select:none;
}
.staff-sep::before,.staff-sep::after{
  content:'';flex:1;height:1.5px;border-radius:1px;
}
.staff-sep::before{background:linear-gradient(90deg,transparent,var(--line))}
.staff-sep::after{background:linear-gradient(90deg,var(--line),transparent)}
.staff-sep[hidden]{display:none}
/* Ausgelegt auf billige Panels: blasse Pastellflaechen und zarte Raender
   saufen dort ab, weil Kontrast und Blickwinkel mies sind. Deshalb kriegt
   hier jeder Knopf satte Flaeche, dunkle Schrift auf hellem Grund (oder
   weiss auf dunklem), 2.5px-Rand und einen Wurfschatten - die Rangfolge
   entsteht ueber Farbe, nicht ueber Blaesse. */
.staff-card .staff-actions .btn{
  flex:none;width:100%;margin:0;min-height:62px;padding:13px 18px;
  flex-direction:row;align-items:center;justify-content:center;gap:11px;
  font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15;border-radius:16px;
}
.staff-card #staffActionBtn{font-size:19px;min-height:66px}
.staff-card #staffKidsBtn{
  background:#DFF2E7;color:#0F5C36;border:2.5px solid #2E9E6B;
  box-shadow:0 4px 0 #9CCDB2;
}
.staff-card #staffKidsBtn:active{box-shadow:0 1px 0 #9CCDB2;transform:translateY(3px)}
.staff-card #staffKidsBtn svg{width:22px;height:22px;flex:none;stroke-width:2.4}
.staff-card #staffCloseBtn{
  margin-top:4px;min-height:54px;font-size:16px;font-weight:800;
  background:var(--paper-2);color:var(--ink);border:2.5px solid #C9C2AE;
  box-shadow:0 4px 0 #D6D0BE;
}
.staff-card #staffCloseBtn:active{box-shadow:0 1px 0 #D6D0BE;transform:translateY(3px)}
.staff-card .countdown{margin-top:9px}
#staffDone{overflow:auto}.staff-card{flex:none;margin:auto 0}
/* Formularbausteine (enroll-*) der Mitarbeiterverwaltung. Der Name stammt
   von der frueheren Schnellanlage "Kind anlegen & Chip koppeln", die am
   04.10.2026 entfernt wurde; die Klassen selbst werden weiter genutzt. */
.enroll-card{width:min(720px,100%);margin:auto 0;flex:none;padding:28px 32px}
.enroll-card h2{font-size:clamp(25px,3.5vh,32px);letter-spacing:-.03em;line-height:1.12;margin-bottom:9px}
.enroll-lead{color:var(--ink-2);font-size:16px;line-height:1.5;margin-bottom:23px}
.enroll-fields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 18px}
.enroll-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.enroll-field.full{grid-column:1/-1}
.enroll-field label{font-size:15px;font-weight:750;line-height:1.35}
.enroll-field input{width:100%;min-width:0;min-height:58px;padding:12px 16px;border:1.5px solid #BFCBC2;border-radius:14px;background:#F6F8F3;font-size:23px;outline:none;user-select:text}
.enroll-field input:focus{border-color:#2E9E6B;box-shadow:0 0 0 3px #2E9E6B20;background:#fff}
.enroll-field small{color:var(--ink-2);font-size:13px}
.enroll-actions{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap}
.enroll-actions .btn{flex:1;min-width:150px;min-height:57px;font-size:18px}
.enroll-error{color:#9A283C;background:#FBECEF;border-radius:12px;padding:12px 14px;margin-top:16px;line-height:1.45;font-size:15px}
.enroll-chip-mark{display:flex;align-items:center;justify-content:center;width:86px;height:86px;border-radius:24px;background:#DFF0E5;color:#1F704B;margin:0 auto 20px}
.enroll-chip-mark svg{width:46px;height:46px;stroke-width:1.8}
.enroll-countdown{font-size:14px;color:var(--ink-2);margin-top:17px;min-height:20px}
.enroll-card.center{text-align:center}
@media(max-width:520px){.enroll-card{padding:23px 20px}.enroll-fields{grid-template-columns:1fr;gap:16px}.enroll-lead{font-size:15px}.enroll-actions{gap:10px}}
/* Begrenzte Personalverwaltung nach dem Leitungs-Scan. */
.staff-card.lead-management{width:min(620px,100%);padding:22px 28px}
.staff-card.lead-management .staff-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px;margin-top:14px}
.staff-card.lead-management #staffActionBtn,.staff-card.lead-management #staffSep,.staff-card.lead-management #staffAdminBtn,.staff-card.lead-management #staffManageBtn,.staff-card.lead-management #staffCloseBtn{grid-column:1/-1}
.staff-card.lead-management .staff-actions .btn{min-height:54px;font-size:17px;padding:12px 16px}
.staff-card.lead-management .staff-sep{margin:7px 0 1px}
.staff-card.lead-management .staff-uhr{font-size:48px}
.staff-card.lead-management #staffCloseBtn{min-height:46px;padding:10px}
body.managing-staff .pm-brand{display:none}
@media(max-height:600px){body.managing-staff .kbd-row button{min-height:44px;font-size:18px}body.managing-staff #kbd{padding-top:8px;padding-bottom:8px}body.managing-staff .kbd-rows{gap:6px}}
@media(max-width:520px){.staff-card.lead-management{padding:20px}.staff-card.lead-management .staff-actions{grid-template-columns:1fr}.staff-card.lead-management .staff-actions .btn{font-size:16px}}
.staff-card #staffManageBtn{background:#163F31;color:#fff;border:1.5px solid #163F31;box-shadow:0 3px 0 #0D2B20}
.staff-card #staffManageBtn svg{width:23px;height:23px;flex:none}
#staffManage,#staffManageEdit,#staffManageCard{overflow:auto;justify-content:flex-start;padding-bottom:56px}
.manage-card{width:min(900px,100%);flex:none;margin:auto 0;padding:28px 32px;text-align:left}
.manage-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:25px}
.manage-head h2{font-size:clamp(25px,3.5vh,34px);letter-spacing:-.035em;line-height:1.2}
.manage-head p{font-size:14px;color:var(--ink-2);margin-top:7px}
.manage-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;color:#40735A;margin-bottom:8px}
.manage-head .btn{min-height:48px;font-size:15px;padding:12px 20px;flex:none}
.manage-tools{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px}.manage-tools .enroll-field{flex:1}.manage-tools .btn{min-height:58px;font-size:17px;padding:15px 22px}
.manage-tools input{font-size:18px}
.manage-filter{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:5px}
.manage-filter button{min-height:45px;border:0;border-radius:12px;padding:10px 22px;font:inherit;font-size:15px;font-weight:750;background:var(--paper);color:var(--ink-2)}
.manage-filter button[aria-pressed="true"]{background:#DDEDE1;color:#19573A}
.manage-row{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:17px 0}
.manage-avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:#E9EFE3;color:#456041;font-weight:800;font-size:18px}
.manage-person{flex:1;min-width:0}.manage-person strong{display:block;font-size:20px;overflow-wrap:anywhere}.manage-person small{display:block;color:var(--ink-2);font-size:14px;margin-top:5px}
.manage-row .btn{min-height:48px;font-size:15px;padding:12px 17px}
.manage-badge{font-size:12px;padding:7px 10px;border-radius:20px;background:#F0F4EA;color:#436041;white-space:nowrap}
.manage-foot{font-size:13px;color:var(--ink-2);margin-top:22px;line-height:1.5}
.manage-card select{min-height:58px;border:1.5px solid #BFCBC2;border-radius:14px;padding:12px;background:#F6F8F3;font:inherit;font-size:18px;width:100%}
.manage-status{display:flex;align-items:center;gap:13px;padding:18px;background:#F0F4EA;border-radius:14px;margin-top:22px}.manage-status input{width:26px;height:26px;accent-color:#28734F}.manage-status strong,.manage-status small{display:block}.manage-status small{font-size:13px;color:var(--ink-2);margin-top:5px}
.manage-card-area{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.manage-card-area p{font-size:14px;margin-top:8px;color:var(--ink-2)}.manage-card-area .enroll-actions{margin-top:15px}
.manage-card-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.manage-card-row code{font-size:14px;overflow-wrap:anywhere}.manage-card-row .btn{min-height:40px;font-size:13px}
body.kbd-open #staffManage,body.kbd-open #staffManageEdit{padding-bottom:calc(var(--enroll-kbd-height,330px) + 24px)}
body.kbd-open .manage-card{margin-top:0}
@media(max-width:600px){.manage-card{padding:23px 20px}.manage-head{align-items:flex-start}.manage-head .btn{padding:10px 12px}.manage-tools{align-items:stretch;flex-direction:column}.manage-badge{display:none}.manage-row{gap:10px}.manage-person strong{font-size:18px}.manage-avatar{width:38px;height:38px}}

#kbd{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(238,240,233,.98);border-top:2px solid var(--line);
  padding:12px 14px 14px;box-shadow:0 -14px 34px rgba(22,36,31,.18);
}
#kbd[hidden]{display:none}
.kbd-rows{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.kbd-rows[hidden]{display:none}
/* Zahlen-Pad: Telefon-Anordnung fuer PIN und Kopplungscode. Schmal und
   mittig, damit es wie ein Tastenfeld wirkt und nicht wie eine
   geschrumpfte Tastatur; Tasten deutlich groesser als beim Volltyp. */
.kbd-zahlen{max-width:340px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.kbd-zahlen[hidden]{display:none}
.kbd-zahlen .kbd-row button{max-width:none;min-height:62px;font-size:24px}
.kbd-zahlen .kbd-row .kbd-bs{max-width:none;flex:1}
.kbd-zahlen .kbd-row .kbd-done{max-width:none;flex:1;font-size:17px}
.kbd-row{display:flex;gap:8px;justify-content:center}
.kbd-row button{
  flex:1;max-width:84px;min-height:58px;
  font-size:21px;font-weight:800;color:var(--ink);
  border:2px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:0 3px 0 #CDD4C6;cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}
.kbd-row button:active{transform:translateY(3px);box-shadow:0 0 0 #CDD4C6}
.kbd-row .kbd-bs{max-width:120px;flex:1.5;background:var(--paper-2)}
.kbd-row .kbd-shift{max-width:120px;flex:1.5;background:var(--paper-2)}
.kbd-row .kbd-shift.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}
.kbd-row .kbd-space{flex:4;max-width:520px}
.kbd-row.kbd-bottom{justify-content:center}
.kbd-row .kbd-done{
  flex:1.6;max-width:180px;background:linear-gradient(165deg,#3FB57E,#2E9E6B 60%,#1F7A50);
  color:#fff;border-color:transparent;box-shadow:0 3px 0 #145233;
}
body.kbd-open .forgot-card{transform:translateY(calc(-1 * min(150px,16vh)));transition:transform .18s ease}
body.kbd-open .dev{bottom:auto;top:18px}
.dev{
  position:fixed;right:16px;bottom:72px;z-index:40;width:min(340px,92vw);
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);
  padding:18px 18px 16px;text-align:left;display:none;
}
.dev.open{display:block}
.dev h3{font-size:16px;font-weight:800;margin-bottom:10px}
.dev label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:10px 0 5px}
.dev input{
  width:100%;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);font-size:15px;padding:10px 11px;
}
.dev input:focus{outline:none;border-color:var(--teal)}
.dev-row{display:flex;gap:8px;margin-top:10px}
.dev-row button{
  flex:1;border:0;border-radius:10px;padding:11px;cursor:pointer;
  font-weight:700;font-size:14px;background:var(--paper-2);color:var(--ink-2);
}
.dev-row button.go{background:var(--teal);color:#fff}
.dev-hint{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.footnote{position:fixed;left:20px;bottom:20px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);opacity:.6;z-index:10}

/* ---------- Ruf ohne Chip (Eltern) ---------- */
.btn.forgot-call{
  width:100%;min-height:64px;font-size:18px;
  background:#FDF0D0;color:#8A6206;border:2px solid #F1D695;box-shadow:0 5px 0 #E7C878;
  flex-direction:row;gap:11px;
}
.btn.forgot-call:active{box-shadow:0 1px 0 #E7C878;transform:translateY(3px)}
.btn.forgot-call svg{width:23px;height:23px;flex:none;stroke-width:2.2}
.forgot-or{
  display:flex;align-items:center;gap:12px;margin:18px 0 4px;
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.forgot-or::before,.forgot-or::after{content:'';flex:1;height:1.5px;background:var(--line)}

/* ---------- Fachkraft: Anwesenheitsliste ----------
   Ausgelegt auf 40-50 Kinder: Suchfeld, Gruppenfilter und ein Raster
   statt einer langen Liste. Bei 4 Spalten passen rund 12 Kinder ins
   Bild, der Rest ist eine Daumenbewegung entfernt. */
.kids-card{width:min(1080px,96vw);padding:clamp(16px,2.6vh,26px) clamp(16px,3vw,28px)}
.kids-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.kids-title{font-size:clamp(20px,3.2vh,26px);font-weight:800;letter-spacing:-.02em}
.kids-who{
  display:inline-flex;align-items:center;gap:8px;background:#DFF2E7;color:#1F7A50;
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800;
}
.kids-who svg{width:16px;height:16px;flex:none;stroke-width:2.4;fill:none}
.kids-count{
  display:inline-flex;align-items:baseline;gap:6px;background:var(--paper-2);
  border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.kids-count b{font-size:17px;font-weight:800;color:var(--ink)}
.kids-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.kids-search{flex:1 1 280px;min-width:210px;position:relative}
.kids-search .mag{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;stroke:var(--ink-3);fill:none;stroke-width:2.2;pointer-events:none;
}
.kids-search input{
  width:100%;border:2px solid var(--line);border-radius:15px;background:var(--paper);
  color:var(--ink);padding:14px 46px 14px 46px;font-size:18px;font-weight:600;
}
.kids-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(210,106,16,.16)}
.kids-search input::placeholder{color:var(--ink-3);font-weight:500}
.kids-x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:50%;background:var(--paper-2);
  color:var(--ink-2);font-size:18px;font-weight:800;cursor:pointer;line-height:1;
}
.kids-x[hidden]{display:none}
.chipbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fchip{
  border:2px solid var(--line);background:#fff;border-radius:999px;
  padding:11px 17px;font-size:14.5px;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip:active{transform:translateY(2px)}
/* Flex statt Grid: ein Raster laesst die letzte, unvollstaendige Reihe
   links kleben. So sitzt sie mittig unter den vollen Reihen. */
.kids-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  max-height:44vh;overflow-y:auto;overscroll-behavior:contain;
  padding:4px;margin:0 -4px;
}
.kid{
  flex:1 1 232px;max-width:300px;
  display:flex;align-items:center;gap:12px;text-align:left;
  border:2px solid var(--line);border-radius:16px;background:#fff;
  padding:11px 13px;min-height:84px;cursor:pointer;
  box-shadow:0 3px 0 #E2E7DC;
  transition:transform .1s ease,box-shadow .1s ease;
}
.kid:active{transform:translateY(2px);box-shadow:0 1px 0 #E2E7DC}
.kid:focus-visible{outline:4px solid var(--ink);outline-offset:2px}
.kid.here{background:#F2FAF5;border-color:#BFE3CE;box-shadow:0 3px 0 #CFE7DA}
.kid.here:active{box-shadow:0 1px 0 #CFE7DA}
.kid-main{min-width:0;flex:1}
.kid-name{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere}
.kid-sub{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:3px}
.fsep{width:1.5px;align-self:stretch;background:var(--line);border-radius:1px;margin:2px 3px}
.kid.here .kid-sub{color:#1F7A50}
.kid-flag{flex:none;width:12px;height:12px;border-radius:50%;background:#D6DCD0}
.kid.here .kid-flag{background:#2E9E6B;box-shadow:0 0 0 4px rgba(46,158,107,.15)}
.kids-empty{grid-column:1/-1;text-align:center;color:var(--ink-2);font-size:16px;padding:36px 12px;line-height:1.5}
.kids-foot{display:flex;gap:12px;margin-top:14px}
.kids-foot .btn{flex:1;min-height:58px;font-size:17px}
body.kbd-open .kids-grid{max-height:20vh}
body.kbd-open .kids-card{transform:translateY(-4vh);transition:transform .18s ease}

/* Austragen wird bestaetigt, Eintragen nicht: ein versehentliches
   "ist da" faellt sofort auf und ist einen Tipp entfernt - ein
   versehentliches "ist weg" bedeutet, dass ein Kind in der Liste
   fehlt, waehrend es noch im Haus ist. */
.cc-choices{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cc-choices .btn{
  flex-direction:row;align-items:center;justify-content:flex-start;gap:15px;
  width:100%;min-height:82px;padding:14px 22px;text-align:left;border-radius:18px;
}
.cc-choices .btn svg{width:27px;height:27px;flex:none}
.cc-choices .btn span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-choices .btn b{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.cc-choices .btn small{font-size:13.5px;font-weight:600;opacity:.78;letter-spacing:0}
.btn.cc-in{background:#E4F6EA;color:#166B41;box-shadow:0 5px 0 #BFE3CE}
.btn.cc-in:active{box-shadow:0 1px 0 #BFE3CE;transform:translateY(3px)}
.btn.cc-out{background:var(--teal-soft);color:var(--teal-deep);box-shadow:0 5px 0 #E5B98B}
.btn.cc-out:active{box-shadow:0 1px 0 #E5B98B;transform:translateY(3px)}
/* Die Richtung, in der das Kind schon steht, bleibt anwaehlbar - falsch
   getippt wird oft genug -, tritt aber zurueck. */
.cc-choices .btn.schon{opacity:.5;box-shadow:none}
.cc-choices .btn.schon:active{transform:none}

.kid-confirm{width:min(560px,94vw);text-align:center}
.kid-confirm .cc-sym{display:flex;justify-content:center;margin-bottom:16px}
.kid-confirm h2{font-size:clamp(24px,4.2vh,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.kid-confirm .cc-sub{font-size:16px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.kid-confirm .cc-note{
  margin-top:18px;background:var(--teal-soft);color:var(--teal-deep);
  border-radius:14px;padding:13px 16px;font-size:14.5px;font-weight:600;line-height:1.5;
}
.kid-confirm .actions{margin-top:22px}
/* Quittung da: der Ring weicht dem gruenen Haken, damit auch aus drei
   Metern Entfernung klar ist, dass jemand unterwegs ist. */
.mark.ack-mark{margin:0 auto;background:var(--teal-soft);color:var(--teal-deep);
  width:clamp(96px,17vh,132px);height:clamp(96px,17vh,132px)}
.mark.ack-mark[hidden]{display:none}
/* Der Ruf-Knopf ist ein forgot-go mit Glocke davor. */
#noChipGo{flex-direction:row;gap:11px}
/* Glocken-Abzeichen: warmes Bernstein statt Orange - "hier passiert
   gleich etwas", nicht "hier ist etwas schiefgegangen". */
.forgot-icon.ring-icon{background:var(--amber-soft);color:#8A5504}
.forgot-icon.ring-icon svg{transform:rotate(-8deg);transform-origin:50% 15%}

.toast{
  position:fixed;left:50%;top:20px;z-index:70;
  transform:translate(-50%,-16px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;border-radius:999px;padding:13px 26px;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 14px 32px -14px rgba(22,36,31,.7);
  transition:opacity .18s ease,transform .18s ease;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.out{background:#9C4B08}

@media (max-width:760px){
  .kids-grid{max-height:40vh}
  .kid{flex:1 1 46%;max-width:none}
  .kids-title{width:100%;text-align:center}
}
@media (max-width:480px){
  .kid{flex:1 1 100%}
}

@media (max-height:620px){
  .screen{padding-top:46px}
  .scan{margin:14px 0 10px}
  .rule{margin:14px 0}
}
@media (max-width:620px){
  .actions{grid-template-columns:1fr}
  .btn.wide{grid-column:auto}
  .child-head{gap:14px}
  .badge{display:none}
}

.role-card{width:min(1050px,100%);padding:28px 32px;text-align:left}
#staffOverview{justify-content:flex-start;padding:70px 24px 65px;overflow:auto}
#staffOverview .role-card{margin:auto;padding:20px 26px}
.role-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.role-head h1{font-size:30px;margin:7px 0}.role-head p{color:var(--muted);font-size:15px;margin:0}
.role-badge{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:6px 12px;background:#e6eee3;color:#36533f;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.role-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:#43865b}
.role-facility{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#edf2e8;border-radius:13px;margin:12px 0;color:#36533f}
.role-facility label{font-size:14px;font-weight:800;white-space:nowrap}.role-facility select{font:inherit;font-weight:700;border:1px solid #b7c7ad;border-radius:9px;padding:10px 12px;min-height:46px;min-width:0;flex:1;background:white;color:#26392f}
[data-terminal-facility]{font-size:14px;font-weight:700;color:#587149;overflow-wrap:anywhere}.terminal-admin-bar>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.role-section{font-size:13px;font-weight:800;color:#6b766e;letter-spacing:.07em;text-transform:uppercase;margin:20px 0 10px}
.role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.role-tile{min-height:112px;border:1px solid #dde3d8;border-radius:16px;background:#fafbf7;padding:16px;text-align:left;color:#26392f;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.role-tile:hover{background:#eef3e9;border-color:#91ac8e}.role-tile strong{font-size:16px}.role-tile small{font-size:12px;line-height:1.4;color:#687669}.role-tile svg{width:23px;height:23px;margin-bottom:3px}
.role-tile.team{background:#36583f;color:white;border-color:#36583f}.role-tile.team small{color:#e1ebdd}
.role-grid.administration{grid-template-columns:repeat(5,minmax(0,1fr))}
#staffOverview .role-tile{min-height:90px;padding:11px 13px;gap:3px}
#staffOverview .role-tile strong{font-size:15px}#staffOverview .role-tile svg{width:19px;height:19px;margin-bottom:1px}
#staffOverview .role-section{margin:13px 0 8px}#staffOverview .role-head{margin-bottom:12px}
#staffOverview .role-foot{margin-top:13px;padding-top:7px}
.role-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;border-top:1px solid #e6e9df;padding-top:17px;font-size:12px;color:#727b70}.role-foot button{font:inherit;font-weight:700;color:#36583f;border:0;background:transparent;min-height:44px;cursor:pointer}
#terminalAdmin{padding:70px 12px 80px;flex-direction:column;gap:10px;align-items:stretch}
.terminal-admin-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 15px;background:white;border-radius:14px;flex-shrink:0}
.terminal-admin-bar .btn{min-height:44px;padding:10px 18px;font-size:15px}
.terminal-admin-content{position:relative;display:flex;flex:1;min-height:0;background:#faf9f5;border:1px solid #dde3d8;border-radius:16px;overflow:hidden}
#terminalAdminFrame{background:#faf9f5;flex:1;width:100%;min-height:0;border:0;opacity:0;visibility:hidden;transition:opacity .16s ease}
#terminalAdminFrame.ready{opacity:1;visibility:visible}
.terminal-admin-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#36583f;background:#faf9f5}
.terminal-admin-loading[hidden]{display:none}.terminal-admin-loading p{margin:0;color:#727b70;font-size:15px}
.terminal-admin-loading .btn{min-height:44px;font-size:16px}
@media(prefers-reduced-motion:reduce){#terminalAdminFrame{transition:none}}
@media(max-width:900px){.role-card{padding:20px}.role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.role-tile{min-height:102px}.role-head h1{font-size:25px}}
@media(max-width:900px){.role-grid.administration{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-head{align-items:flex-start}.role-foot{align-items:flex-start;flex-direction:column}}
/* Einheitliche Arbeitsflaeche fuer die Kartenverwaltung am Terminal. */
:root{--paper:#f4f5ef;--paper-2:#eaf0e7;--card:#fffef9;--ink:#203d32;--ink-2:#62736b;--ink-3:#819087;--line:#dce3da;--shadow:0 6px 24px #243d3009;--teal:#315d47;--teal-deep:#254835;--teal-soft:#e6eee4}
body{background:#f4f5ef;color:#203d32}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b47733;outline-offset:3px}
#terminalHeader{height:74px;position:absolute;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fffef9;border-bottom:1px solid #dce3da;text-align:left;gap:20px}
.terminal-layout-brand{display:flex;align-items:center;gap:12px}.terminal-layout-bird{display:flex;align-items:center}.terminal-layout-bird .pm-bird{height:37px;width:61px;filter:none}.terminal-layout-brand>strong{font-size:23px;letter-spacing:-.8px;font-weight:750;line-height:1.08}.terminal-layout-brand>strong>span{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;color:#7a887e;margin-top:5px;text-transform:uppercase}
.terminal-layout-header-right{display:flex;align-items:center;gap:24px}.terminal-layout-header-right .topbar-right{gap:20px}.terminal-layout-header-right .conn{font-size:11px;letter-spacing:0}.terminal-layout-header-right .dot.ok{background:#428568}.terminal-layout-header-right #clock{font-size:19px;letter-spacing:-.4px}
#terminalHeader .lang-bar{position:static;inset:auto;display:flex;gap:3px;padding:4px;background:#eef1e9;border:0;border-radius:10px;box-shadow:none;transform:none;margin:0}
#terminalHeader .lang-btn{height:32px;width:36px;min-height:32px;border-radius:7px;border:0;background:transparent;box-shadow:none;padding:7px;transform:none}
#terminalHeader .lang-btn.sel{background:white;box-shadow:0 1px 3px #173a2514}#terminalHeader .lang-btn svg{width:22px;height:22px;border-radius:50%;box-shadow:none}
.topbar,.pm-brand{display:none!important}
.screen{padding-top:94px}
#staffOverview{padding:96px 28px 22px;align-items:stretch;justify-content:flex-start;overflow:auto}
#staffOverview .role-card{width:100%;max-width:1510px;margin:0 auto;min-height:100%;padding:0;display:grid;grid-template-columns:244px minmax(0,1fr);background:none;box-shadow:none;border:0;border-radius:0;gap:32px;flex:1}
.terminal-layout-sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:26px 22px;background:#e8eee3;border:1px solid #dde5d6;border-radius:20px;text-align:left;min-width:0}
.terminal-layout-eyebrow{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:750;color:#738371;line-height:1.6}
.terminal-layout-location-icon{display:grid;place-items:center;width:54px;height:54px;background:#d7e3cd;border-radius:16px;color:#426541;margin:30px 0 20px}.terminal-layout-location-icon svg{width:29px;height:29px}
#staffOverview .role-facility{display:block;background:none;border:0;padding:0;margin:0}.role-facility label{display:block;margin:0 0 10px;font-size:13px;font-weight:600;color:#526a50}
#staffOverview .role-facility select{display:block;width:100%;min-height:50px;padding:11px 10px;background:#fffef9;border:1px solid #dfe5da;border-radius:10px;color:#294334;font-size:16px;font-weight:700}
#terminalFacilityCount{display:block;font-size:11px;color:#738371;margin-top:10px}#staffOverview #roleFacilityHint{font-size:12px;line-height:1.7;margin-top:24px;color:#738371}
.terminal-layout-sidebar-bottom{display:flex;flex-direction:column;gap:20px}.terminal-layout-person{display:flex;align-items:center;gap:11px;padding-bottom:19px;border-bottom:1px solid #d4decd}.terminal-layout-person>div{min-width:0}.terminal-layout-person strong{font-size:15px;font-weight:700;display:block}.terminal-layout-person #terminalAvatar{width:41px;height:41px;display:grid;place-items:center;flex:none;border-radius:50%;background:#fffef9;border:1px solid #d6dfcf;font-size:17px;color:#406049;font-weight:700}
#terminalRoleSlot .role-badge{padding:0;margin-top:4px;background:none;border:0;border-radius:0;font-size:10px;letter-spacing:.1em;color:#687e63;font-weight:650}#terminalRoleSlot .role-badge:before{display:none}
.terminal-layout-session-actions{display:flex;flex-direction:column;gap:8px}.terminal-layout-session-actions button{min-height:44px;width:100%;font-size:12px;padding:10px 8px;background:transparent;color:#536b51;border:1px solid #cedbc4;border-radius:10px;box-shadow:none;font-weight:650;cursor:pointer}
.terminal-layout-session-actions #roleLogout{background:#fffef9;color:#3a5741;font-size:13px;min-height:46px}.terminal-layout-session-actions button:hover{background:#dce6d4}
.terminal-layout-idle-note{color:#7a8876;font-size:10px;line-height:1.7}
.terminal-layout-workspace{min-width:0;padding:18px 0 4px;text-align:left}
#staffOverview .role-head{margin:0 0 28px;align-items:center;min-height:112px;gap:18px}#staffOverview .role-head h1{font-size:clamp(29px,2.5vw,40px);line-height:1.15;letter-spacing:-1.3px;font-weight:700;margin:7px 0 8px}#staffOverview .role-head p{font-size:15px;color:#788479;font-weight:400}.terminal-layout-date{font-size:11px;margin-top:13px;color:#879286}
.terminal-layout-quick{flex:none}.terminal-layout-quick button{min-height:48px;padding:12px 16px;border-radius:12px;background:#315d47;color:#fffef9;border:1px solid #315d47;font-size:12px;font-weight:650;box-shadow:none;cursor:pointer;white-space:nowrap}.terminal-layout-quick button:before{content:'+';font-size:18px;margin-right:9px;vertical-align:-1px}.terminal-layout-quick button:hover{background:#254b37}
#staffOverview .role-section{display:flex;align-items:center;gap:9px;margin:25px 0 12px;font-size:13px;font-weight:700;text-transform:none;letter-spacing:0;color:#405647}.terminal-layout-task-count{font-size:10px;line-height:20px;min-width:21px;text-align:center;background:#e5eadf;border-radius:6px;color:#839079;font-weight:650}
#staffOverview .role-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
#staffOverview .role-tile{position:relative;min-height:160px;display:flex;flex-direction:column;gap:6px;padding:19px 17px;border:1px solid #dfe5da;border-radius:15px;background:#fffef9;box-shadow:0 2px 4px #213d2903;color:#294334;text-align:left;transition:background .14s,border-color .14s,transform .14s}
#staffOverview .role-tile:hover{background:#f9fcf4;border-color:#adc4a0;transform:translateY(-2px)}#staffOverview .role-tile:active{transform:none;background:#e8f0e1}
#staffOverview .role-tile svg{display:block;width:35px;height:35px;padding:8px;border-radius:10px;background:#eef2e7;color:#54724a;margin:0 0 6px;stroke-width:1.7}
#staffOverview .role-tile strong{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.25px;padding-right:9px}#staffOverview .role-tile small{font-size:11px;font-weight:400;color:#63715f;line-height:1.5;max-width:180px}
.terminal-layout-tile-arrow{position:absolute;right:13px;top:14px;color:#b2bdaa;font-size:17px;font-weight:400}
#terminalAdmin{padding:92px 28px 22px;gap:14px}.terminal-admin-bar{padding:0 0 13px;background:none;border-radius:0;border-bottom:1px solid #dce3da}.terminal-admin-bar>div{text-align:center}.terminal-admin-bar strong{font-size:17px;font-weight:700}.terminal-admin-bar [data-terminal-facility]{font-size:11px;color:#758770;font-weight:500}.terminal-admin-bar .btn{border:1px solid #d9e2d2;background:#fffef9;border-radius:10px;color:#45603e;min-height:44px;font-size:12px;box-shadow:none;padding:10px 16px}.terminal-admin-content{border-color:#dce3da;border-radius:17px;background:#f4f5ef}.terminal-admin-loading,#terminalAdminFrame{background:#f4f5ef}.terminal-admin-loading strong{font-size:21px;font-weight:650;letter-spacing:-.5px}.terminal-admin-loading p{font-size:13px}
#staffManage,#staffManageEdit,#staffManageCard{padding-top:96px;padding-bottom:24px}.manage-card{background:#fffef9;border:1px solid #dce3da;border-radius:20px;box-shadow:0 4px 18px #213d2906;max-width:1060px;width:100%;padding:30px}.manage-head h2{font-weight:700;font-size:30px}.manage-head>div:last-child:not(:first-child){display:flex;gap:8px}.manage-kicker{color:#71836b;font-size:10px;letter-spacing:.13em}.manage-card .btn,.enroll-card .btn{box-shadow:none;border:1px solid #d6e0d0;border-radius:10px;min-height:46px;font-size:13px;transform:none}.manage-card .btn.quiet,.enroll-card .btn.quiet{background:#eff3e9;color:#4e684a}.manage-card .btn.bring,.enroll-card .btn.bring{background:#315d47;color:white;border-color:#315d47}.manage-card input,.manage-card select{font-size:15px;border-radius:10px;min-height:48px;background:#fffef9}.manage-person strong{font-size:17px;font-weight:650}.manage-person small{font-size:12px}.manage-row{padding:18px 0}.manage-badge{font-size:10px;background:#edf3e7}.manage-avatar{border-radius:12px;background:#e8f0df;color:#567049}.manage-filter button{border-radius:9px;font-size:12px;min-height:42px}.manage-foot{font-size:11px}
@media(min-width:1500px){#staffOverview{padding-left:44px;padding-right:44px}#staffOverview .role-card{gap:42px;grid-template-columns:260px minmax(0,1fr)}.terminal-layout-workspace{padding-top:27px}#staffOverview .role-tile{min-height:164px;padding:20px}#staffOverview .role-tile strong{font-size:17px}#staffOverview .role-tile small{font-size:12px}}
@media(max-width:1100px){#staffOverview .role-card{grid-template-columns:210px minmax(0,1fr);gap:22px}.terminal-layout-sidebar{padding:22px 16px}.terminal-layout-quick button{font-size:10px;padding:11px}.terminal-layout-quick button:before{margin-right:5px}#staffOverview .role-head h1{font-size:29px}#staffOverview .role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#staffOverview .role-grid.administration{grid-template-columns:repeat(3,minmax(0,1fr))}#staffOverview .role-tile{min-height:160px;padding:15px}.terminal-layout-workspace{padding-top:8px}}
@media(max-height:850px) and (min-width:1101px){#staffOverview{padding-top:89px;padding-bottom:15px}#staffOverview .role-head{min-height:84px;margin-bottom:14px}.terminal-layout-workspace{padding-top:8px}#staffOverview .role-head h1{font-size:30px}.terminal-layout-date{margin-top:7px}#staffOverview .role-tile{min-height:132px;padding:12px;gap:5px}#staffOverview .role-section{margin-top:18px}.terminal-layout-location-icon{margin-top:20px}.terminal-layout-sidebar{padding-top:22px;padding-bottom:20px}}
@media(max-width:760px){#terminalHeader{height:64px;padding:0 16px}.terminal-layout-header-right{gap:10px}.terminal-layout-header-right .conn{display:none}.terminal-layout-brand>strong{font-size:20px}.terminal-layout-bird .pm-bird{width:44px;height:29px}.terminal-layout-header-right .topbar-right{gap:0}#staffOverview{padding:80px 16px 16px}#staffOverview .role-card{display:flex;flex-direction:column;gap:20px}.terminal-layout-sidebar{padding:16px;display:block}.terminal-layout-sidebar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.terminal-layout-sidebar-top>.terminal-layout-eyebrow,.terminal-layout-location-icon,#roleFacilityHint,#terminalFacilityCount{display:none!important}.terminal-layout-location-slot{flex:1;min-width:140px}.terminal-layout-sidebar-bottom{margin-top:15px;gap:12px}.terminal-layout-person{border:0;padding:0}.terminal-layout-session-actions{flex-direction:row}.terminal-layout-session-actions #roleClock{flex:1}.terminal-layout-session-actions #roleLogout{max-width:130px}.terminal-layout-idle-note{display:none}.terminal-layout-workspace{padding:0}#staffOverview .role-head{margin-bottom:18px;min-height:100px;align-items:flex-start;flex-wrap:wrap}#staffOverview .role-head h1{font-size:29px}.terminal-layout-date{display:none}#staffOverview .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#staffOverview .role-grid.administration{grid-template-columns:repeat(2,minmax(0,1fr))}#terminalAdmin{padding:80px 12px 14px}.terminal-admin-bar .btn{font-size:11px;padding:9px}.terminal-admin-bar strong{font-size:14px}#staffManage,#staffManageEdit,#staffManageCard{padding:80px 14px 20px}.manage-card{padding:20px}.manage-head>div:last-child:not(:first-child){flex-wrap:wrap}.terminal-layout-brand>strong>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){#staffOverview .role-tile{transition:none}}
.terminal-layout-session-actions #roleLogout{box-shadow:none}
/* Die Kita-Karte folgt ihrem Inhalt statt der gesamten Bildschirmhoehe. */
.terminal-layout-sidebar{align-self:start;justify-content:flex-start;gap:24px;padding:22px 20px}
.terminal-layout-location-icon{width:44px;height:44px;border-radius:13px;margin:18px 0 16px}
.terminal-layout-location-icon svg{width:25px;height:25px}
#staffOverview #roleFacilityHint{margin-top:16px;margin-bottom:0}
.terminal-layout-sidebar-bottom{gap:14px}
.terminal-layout-person{padding-bottom:14px}
@media(max-width:760px){.terminal-layout-sidebar{align-self:stretch;padding:16px}}
.scan .core{background:#e8882f;box-shadow:0 10px 26px -8px #bb651d80}
.scan .wave{border-color:#e8882f}
.terminal-layout-carrier{margin:18px 0 20px;padding:14px 15px;border:1px solid #ccd9c2;border-radius:12px;background:#dfe8d6}
.terminal-layout-carrier>span{display:block;margin-bottom:5px;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#667d59}
.terminal-layout-carrier>strong{display:block;font-size:15px;font-weight:700;line-height:1.4;color:#335131;overflow-wrap:anywhere}
@media(max-width:760px){.terminal-layout-carrier{width:100%;margin:0 0 4px}}
@media(max-height:850px) and (min-width:1101px){#staffOverview .role-section{margin-top:14px}#staffOverview .role-head{margin-bottom:8px}.terminal-layout-date{display:none}}

/* Anmeldung steht bewusst zuerst: ein kurzer Impuls nur beim neuen Scan. */
.terminal-layout-login{padding:13px 14px;background:#fbe6d1;border:1px solid #ecc5a0;border-radius:15px;color:#543b27}
.terminal-layout-login-label{display:block;margin:0 0 9px;color:#86552e;font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;line-height:1.4}
.terminal-layout-login .terminal-layout-person{padding:0;border:0;gap:10px}
.terminal-layout-login .terminal-layout-person strong{color:#493727;font-size:15px;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.terminal-layout-login .terminal-layout-person #terminalAvatar{width:39px;height:39px;background:#edb77e;border:1px solid #dc9c5c;color:#653d1d;font-size:17px}
.terminal-layout-login #terminalRoleSlot .role-badge{color:#805633;letter-spacing:.07em;font-size:10px;line-height:1.4}
.terminal-layout-login.is-entering{animation:terminal-layout-login-enter .42s cubic-bezier(.2,.7,.25,1) both}
@keyframes terminal-layout-login-enter{from{opacity:.35;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.terminal-layout-person{border-bottom:0;padding-bottom:0}
.terminal-layout-sidebar-top .terminal-layout-carrier{margin-top:15px}

@media(max-height:850px) and (min-width:1101px){
  .terminal-layout-sidebar{padding:18px;gap:18px}
  .terminal-layout-login{padding:10px 12px}
  .terminal-layout-login-label{margin-bottom:7px}
  .terminal-layout-login .terminal-layout-person #terminalAvatar{width:36px;height:36px}
  .terminal-layout-sidebar-top .terminal-layout-carrier{margin:12px 0 14px;padding:11px 13px}
  #staffOverview #roleFacilityHint{margin-top:12px;font-size:11px;line-height:1.5}
  .terminal-layout-sidebar-bottom{gap:10px}
  .terminal-layout-idle-note{line-height:1.5}
}
@media(max-width:760px){.terminal-layout-login{flex:1 1 190px}.terminal-layout-sidebar-top .terminal-layout-carrier{margin:0 0 4px}}
@media(prefers-reduced-motion:reduce){.terminal-layout-login.is-entering{animation:none;transform:none}}

/* Personalkarte: zuerst die eigene Buchung, Verwaltung als zweite Aktion. */
#staffDone{padding:94px 24px 18px;overflow:auto}
#staffDone .staff-card{width:min(500px,100%);padding:24px 30px 20px;background:#fffef9;border:1px solid #dce3da;border-radius:20px;box-shadow:none}
#staffDone .staff-card::before,#staffDone .staff-card.out::before{height:3px;background:#315d47}
#staffDone .staff-uhr{margin-top:2px;color:#315d47;font-size:54px;font-weight:700;line-height:1;letter-spacing:-.04em}
#staffDone .staff-datum{margin:7px 0 12px;color:#718079;font-size:13px;font-weight:500;line-height:1.4}
#staffDone .staff-card h1{color:#203d32;font-size:27px;font-weight:700;line-height:1.22;letter-spacing:-.025em;overflow-wrap:anywhere}
#staffDone .staff-name{font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;color:#62736b}
#staffDone .staff-role{margin-top:7px;padding:5px 12px;background:#f0f3ec;border:1px solid #dce3da;border-radius:9px;font-size:12px;font-weight:650;line-height:1.3;letter-spacing:.025em;color:#52695b}
#staffDone .staff-line,#staffDone .staff-line.big{margin-top:9px;padding:8px 13px;border:1px solid #dce3da;border-radius:11px;background:#f4f6f0;color:#405f4c;font-size:14px;font-weight:600;line-height:1.3}
#staffDone .staff-line::before,#staffDone .staff-line.big::before{width:7px;height:7px;background:#5e866b}
#staffDone .staff-actions{display:flex;flex-direction:column;width:100%;max-width:360px;gap:8px;margin-top:17px}
#staffDone .staff-card .staff-actions .btn{min-height:50px;padding:12px 18px;border:1px solid #dce3da;border-radius:12px;font-size:16px;font-weight:650;line-height:1.25;box-shadow:none;transform:none}
#staffDone .staff-card #staffActionBtn{min-height:58px;background:#315d47;border-color:#315d47;color:#fffef9;font-size:18px;font-weight:700}
#staffDone .staff-card #staffActionBtn:hover{background:#254835;border-color:#254835}
#staffDone .staff-card #staffActionBtn:active{background:#203d32;border-color:#203d32;box-shadow:none;transform:none}
#staffDone .staff-clock-warning{margin:14px 0 0;padding:10px 13px;background:#fff5dc;border:1px solid #e8d7a6;border-radius:10px;color:#70551e;font-size:13px;line-height:1.45;text-align:left}
#staffDone .staff-card #staffAdminBtn{background:#f0f3ec;border-color:#cbd7c9;color:#294334;gap:10px}
#staffDone .staff-card #staffAdminBtn:hover{background:#e7ede1;border-color:#aabdac}
#staffDone #staffAdminBtn svg{width:21px;height:21px;flex:none;stroke-width:1.8}
#staffDone .staff-card #staffCloseBtn{min-height:44px;margin-top:0;background:#fffef9;border-color:#e3e8df;color:#617568;font-size:14px;font-weight:600;box-shadow:none;transform:none}
#staffDone .staff-card #staffCloseBtn:hover{background:#f4f5ef;border-color:#cbd7c9}
#staffDone .staff-sep{margin:4px 0 0;color:#718079;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.08em}
#staffDone .staff-sep::before,#staffDone .staff-sep::after{height:1px;background:#dce3da}
#staffDone .countdown{margin-top:10px;color:#718079;font-size:11px;line-height:1.4;letter-spacing:0}
@media(max-height:850px){
  #staffDone{padding-top:88px;padding-bottom:12px}
  #staffDone .staff-card{padding:20px 28px 16px}
  #staffDone .staff-uhr{font-size:46px}
  #staffDone .staff-datum{margin:5px 0 9px;font-size:12px}
  #staffDone .staff-card h1{font-size:25px}
  #staffDone .staff-line,#staffDone .staff-line.big{margin-top:7px;padding:7px 12px;font-size:13px}
  #staffDone .staff-actions{margin-top:13px;gap:7px}
  #staffDone .staff-card #staffActionBtn{min-height:54px}
  #staffDone .countdown{margin-top:8px}
}
@media(max-width:760px){#staffDone{padding-top:80px}#staffDone .staff-card{padding-left:20px;padding-right:20px}}

/* Demo-Steuerung nur in der eigenstaendigen Vorschau. */
.screen{overflow-y:auto;overscroll-behavior:contain}#noteEntry{justify-content:flex-start;padding-bottom:24px}#noteEntry .note-card{transform:none!important;flex-shrink:0}.demo-target{outline:4px solid #b35a26!important;outline-offset:4px;box-shadow:0 0 0 8px #ffdd9b99!important}.demo-dock{position:fixed;bottom:0;left:0;right:0;z-index:99999;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;background:#14301ff5;color:white;font:12px sans-serif;flex-wrap:wrap}
.demo-dock button{border:1px solid #ffffff45;border-radius:8px;background:#ffffff15;color:white;padding:8px 12px;cursor:pointer;font:inherit}.demo-dock button:focus-visible{outline:3px solid #f4b942}.demo-dock output{flex-basis:100%;text-align:center;font-size:11px}.demo-standalone .screen{bottom:var(--demo-dock-height,100px)}.demo-standalone.kbd-open .demo-dock{display:none}#settingsBtn{display:none!important}
@media(max-width:620px){.lang-btn{min-width:44px;min-height:44px}.terminal-layout-header-right{min-width:0}}
@media(max-width:340px){#clock,#connection{display:none}.terminal-layout-header-right{gap:4px}.terminal-layout-brand>strong{font-size:17px}}
/* Die Demo passt sich kleinen Browserfenstern an; die Kita-Oberflaeche bleibt unveraendert. */
@media(max-width:620px){
 .screen{padding:78px 12px 18px;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}
 .screen>div{flex-shrink:0}.card{width:100%;max-width:100%;padding:18px 16px;border-radius:20px}
 #idle{justify-content:center;padding-top:78px}.big-clock{font-size:clamp(62px,12vh,88px)}.greeting{font-size:14px}.big-date{font-size:16px}.scan{width:110px;height:110px;margin:22px 0 18px}
 #idle h1{font-size:27px}#idle p{font-size:16px}.sun{width:65px;height:65px}.cloud{transform:scale(.7)}
 .child-head{gap:10px;flex-wrap:wrap}.child-id{min-width:0}.child-name{font-size:25px}.child-head .sym{--sym-size:46px!important}.badge{font-size:11px;padding:7px 10px}.meta-chip{font-size:11px}.rule{margin:14px 0}.question{font-size:12px;letter-spacing:.08em}
 .actions{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.btn{min-height:80px;padding:12px 9px;font-size:19px}.btn small{font-size:12px;line-height:1.3}.sub-actions{flex-direction:column;gap:9px}
 .btn.suba{flex:none;flex-direction:row;min-width:0;min-height:48px;padding:10px;font-size:15px;gap:12px}.btn.suba svg{width:23px;height:23px}.btn.quiet{min-height:48px;font-size:16px}.countdown{margin-top:6px}
 .panel-title{font-size:22px;line-height:1.25}.note-hint{font-size:14px}.note-chip{min-height:44px;font-size:14px;padding:9px 12px}#noteText{font-size:16px;min-height:105px}.note-card{transform:none!important}
 body.kbd-open #noteEntry{padding-bottom:290px}#kbd{padding:8px 5px 12px}.kbd-rows{gap:5px}.kbd-row{gap:3px}.kbd-row button{min-width:0;min-height:44px;font-size:16px;border-width:1px;border-radius:6px}.kbd-row .kbd-done{font-size:14px}
 .lang-btn{width:40px;height:40px}.terminal-layout-header-right{gap:7px}#terminalHeader{padding:0 10px}.terminal-layout-brand>strong{font-size:18px}.terminal-layout-brand>strong>span{font-size:7px}.terminal-layout-bird .pm-bird{width:35px}
 .demo-dock{padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:5px}.demo-dock>strong{width:100%;text-align:center}.demo-dock button{min-height:44px;font-size:12px;padding:8px 10px}.demo-dock output{font-size:11px;line-height:1.35}
}