*{box-sizing:border-box;margin:0;padding:0;}
:root{--red:#6E1423;--rd:#990000;--rl:#FFEEEE;--blk:#1A1A1A;--bg:#fff;--card:#fff;--bdr:#E0E0E0;--t1:#1A1A1A;--t2:#555;--t3:#999;--sf:#F5F5F5;--blue:#185FA5;--green:#2E7D32;--purple:#7C3AED;--orange:#D97706;--teal:#0D9488;--ampel-rot:#B3261E;--shadow-card:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);}
/* Ampelfarbe fuer die Karte "Chat-Zugang Jugend". Eigene Variable statt --red,
   weil das Vereinsrot (#6E1423) als 8px-Punkt auf dunklem Grund fast
   verschwindet - bei einer Ampel, deren einziger Zweck das Erkennen auf einen
   Blick ist, faellt das ins Gewicht. Gruen und Orange tragen in beiden Modi. */
.dark{--bg:#111;--card:#1e1e1e;--bdr:#2e2e2e;--t1:#f0f0f0;--t2:#aaa;--t3:#555;--sf:#252525;--rl:#2a0000;--ampel-rot:#F2645A;--shadow-card:0 1px 4px rgba(0,0,0,.4);}
body{font-family:system-ui,sans-serif;background:#888;display:flex;justify-content:center;min-height:100vh;padding:20px 0;}
.app{width:100%;max-width:520px;background:var(--bg);border:0.5px solid var(--bdr);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;position:relative;height:calc(100dvh - 40px);min-height:500px;}
/* Die Kopfzeile hat seit dem Handy-Umbau ZWEI Zeilen: oben Logo, Name und die
   Knoepfe, darunter die Rollen. Vorher standen Rollen und Knoepfe nebeneinander -
   bei drei Rollen wurde der erste Knopf abgeschnitten, ab fuenf Rollen alle vier.
   Und zwar stumm: .hdr hat overflow:hidden, es gibt keinen Hinweis und kein
   Scrollen. Betroffen waren Dunkelmodus, Handy-Meldungen und Abmelden - am Handy
   also nicht mehr erreichbar. Die Rollenzeile darf deshalb nie wieder in dieselbe
   Zeile wie .hdr-r. */
.hdr{background:var(--red);display:flex;flex-direction:column;flex-shrink:0;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top,0px);}
/* Die beiden Schraegstreifen (.hdr-top::before/::after) sind am 21.08.2026
   entfernt worden. Sie lagen genau unter den Kopfzeilen-Knoepfen: seit Paket 1
   sind die 40 px gross mit rgba(255,255,255,.14), Knopf und Streifen waren
   beide hell und verschmolzen zu einem hellen schraegen Klotz bis zum Rand.
   Entscheidung des Nutzers. Nicht wieder einbauen, ohne die Knopffarbe
   mitzuaendern. */
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px calc(13px + env(safe-area-inset-right,0px)) 8px calc(13px + env(safe-area-inset-left,0px));position:relative;overflow:hidden;}
.hdr-top>*{position:relative;z-index:1;}
/* min-width:0 an beiden Stellen: Ohne das ignoriert Flexbox das text-overflow
   und der Vereinsname bricht wieder auf zwei Zeilen um. */
.logo{display:flex;align-items:center;gap:8px;min-width:0;}
.logo>div{min-width:0;}
.lb{width:34px;height:34px;object-fit:contain;flex-shrink:0;}
.dark .ll{filter:invert(1);}
.hdr h1{font-size:17px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr p{font-size:14px;color:rgba(255,255,255,.75);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-r{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.ib{background:rgba(255,255,255,.14);border:none;border-radius:9px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;}
/* Rollenzeile: seitlich wischbar, damit auch sechs Rollen passen. Ohne Rollen
   faellt sie komplett weg - das erledigt :empty, es braucht kein display:none
   aus dem JavaScript. */
.hdr-rollen{display:flex;gap:5px;align-items:center;background:rgba(0,0,0,.16);padding:6px calc(13px + env(safe-area-inset-right,0px)) 6px calc(13px + env(safe-area-inset-left,0px));overflow-x:auto;scrollbar-width:none;}
.hdr-rollen:empty{display:none;}
.hdr-rollen::-webkit-scrollbar{display:none;}
.chip{font-size:14px;font-weight:700;padding:4px 8px;border-radius:5px;display:inline-block;white-space:nowrap;flex-shrink:0;}
.cAL{background:var(--purple);color:#fff;}.cJL{background:var(--teal);color:#fff;}.cT{background:var(--blk);color:#fff;}.cJR{background:var(--orange);color:#fff;}.cE{background:var(--blue);color:#fff;}.cJ{background:var(--green);color:#fff;}.cM{background:#6B7280;color:#fff;}
.nav-wrap{position:relative;flex-shrink:0;}
.nav{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--bdr);background:var(--card);overflow-x:auto;flex-shrink:0;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav-fade{position:absolute;top:0;bottom:1px;width:22px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2;}
.nav-fade-l{left:0;background:linear-gradient(to right,var(--card),transparent);}
.nav-fade-r{right:0;background:linear-gradient(to left,var(--card),transparent);}
.nav-fade.show{opacity:1;}
.nb{flex:1 1 auto;min-width:0;padding:8px 6px 6px;border:none;background:none;cursor:pointer;font-size:11px;color:var(--t2);display:flex;flex-direction:column;align-items:center;gap:1px;position:relative;}
.nb span{white-space:nowrap;}
.nb i{font-size:20px;padding:4px 8px;border-radius:14px;transition:background-color .2s;}
/* Reiter hinter "Mehr". Sie bleiben in der Leiste stehen - nur unsichtbar -,
   damit setNavBadge() und pushZielAnspringen() sie weiter ueber
   #anav .nb[data-nav-key] finden. Aufgeklappt bilden sie durch flex-wrap von
   selbst die zweite Zeile. */
.nb-versteckt{display:none;}
.nav.nav-auf .nb-versteckt{display:flex;background:var(--sf);}
/* Erzwingt den Zeilenumbruch VOR den aufgeklappten Reitern. Ohne ihn fliessen
   sie in die erste Zeile zurueck und schieben sie um - beim Oeffnen von "Mehr"
   sprang so ein Reiter aus der oberen Zeile heraus. */
.nav-break{flex-basis:100%;height:0;display:none;}
.nav.nav-auf .nav-break{display:block;}
.nb-badge{position:absolute;top:1px;right:calc(50% - 13px);width:7px;height:7px;border-radius:50%;background:var(--red);border:1px solid var(--card);}
.nb.active{color:var(--red);}
.nb.active i{background:var(--rl);}
.nb.active span{font-weight:700;}
.scr{display:none;flex:1;overflow-y:auto;min-height:0;}
.scr.active{display:block;animation:screenFadeIn .22s ease;}
@keyframes screenFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#ascreens{min-height:0;}
.sh{padding:11px 13px 6px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px;}
.sh h2{font-size:17px;font-weight:700;color:var(--t1);}
.abt{border:none;border-radius:6px;padding:8px 13px;min-height:44px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:3px;font-weight:600;}
.abt-red{background:var(--red);color:#fff;}
.abt-dark{background:var(--blk);color:#fff;}

/* LOGIN */
#ls{display:flex;flex-direction:column;align-items:center;padding:20px 16px;flex:1;overflow-y:auto;background-color:var(--bg);background-image:linear-gradient(30deg,rgba(110,20,35,.05) 12%,transparent 12.5%,transparent 87%,rgba(110,20,35,.05) 87.5%,rgba(110,20,35,.05)),linear-gradient(150deg,rgba(110,20,35,.05) 12%,transparent 12.5%,transparent 87%,rgba(110,20,35,.05) 87.5%,rgba(110,20,35,.05)),linear-gradient(30deg,rgba(110,20,35,.05) 12%,transparent 12.5%,transparent 87%,rgba(110,20,35,.05) 87.5%,rgba(110,20,35,.05)),linear-gradient(150deg,rgba(110,20,35,.05) 12%,transparent 12.5%,transparent 87%,rgba(110,20,35,.05) 87.5%,rgba(110,20,35,.05)),linear-gradient(60deg,rgba(110,20,35,.07) 25%,transparent 25.5%,transparent 75%,rgba(110,20,35,.07) 75%,rgba(110,20,35,.07)),linear-gradient(60deg,rgba(110,20,35,.07) 25%,transparent 25.5%,transparent 75%,rgba(110,20,35,.07) 75%,rgba(110,20,35,.07));background-size:44px 76px;background-position:0 0,0 0,22px 38px,22px 38px,0 0,22px 38px;}
/* Gleicher Innenabstand wie #ls. Stand vorher nur inline in index.html - dort
   kommt die Handy-Regel fuer den unteren Sicherheitsabstand nicht dagegen an. */
#warte{padding:20px 16px;}
.dark #ls{background-image:linear-gradient(30deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%,rgba(255,255,255,.04)),linear-gradient(150deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%,rgba(255,255,255,.04)),linear-gradient(30deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%,rgba(255,255,255,.04)),linear-gradient(150deg,rgba(255,255,255,.04) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.04) 87.5%,rgba(255,255,255,.04)),linear-gradient(60deg,rgba(255,255,255,.055) 25%,transparent 25.5%,transparent 75%,rgba(255,255,255,.055) 75%,rgba(255,255,255,.055)),linear-gradient(60deg,rgba(255,255,255,.055) 25%,transparent 25.5%,transparent 75%,rgba(255,255,255,.055) 75%,rgba(255,255,255,.055));}
.ll{width:88px;height:88px;object-fit:contain;margin-bottom:8px;}
.lt{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:2px;}
.ls2{font-size:14px;color:var(--t2);margin-bottom:14px;}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:100%;}
.db{border:0.5px solid var(--bdr);background:var(--card);border-radius:7px;padding:8px 4px;font-size:13px;font-weight:700;cursor:pointer;color:var(--t2);display:flex;flex-direction:column;align-items:center;gap:3px;}
.db-sub{font-size:12px;font-weight:400;color:var(--t3);margin-top:1px;}

/* ANMELDUNG */
.login-box{width:100%;max-width:300px;background:var(--card);border:0.5px solid var(--bdr);border-radius:9px;padding:14px 13px;box-shadow:var(--shadow-card);}
.login-label{display:block;font-size:13px;font-weight:700;color:var(--t2);margin-bottom:4px;}
.login-feld{width:100%;box-sizing:border-box;border:0.5px solid var(--bdr);border-radius:7px;background:var(--sf);color:var(--t1);font-family:inherit;font-size:16px;padding:9px 10px;margin-bottom:9px;}
.login-feld:focus{outline:2px solid var(--red);outline-offset:1px;}
.login-btn{width:100%;border:0;border-radius:7px;background:var(--red);color:#fff;font-family:inherit;font-size:15px;font-weight:700;padding:10px;cursor:pointer;}
.login-btn:disabled{opacity:.55;cursor:default;}
.login-btn-flach{background:none;color:var(--t3);font-weight:400;font-size:13px;padding:8px 0 0;text-decoration:underline;}
.login-info{font-size:12px;color:var(--t3);line-height:1.45;margin-top:8px;}
/* Zweite Zeile eines Geraets in der Push-Karte (Paket R). Eigene Klasse statt
   Inline-Stil, damit sie in Hell und Dunkel derselben Textfarbe folgt. */
.push-geraet-datum{font-size:12px;color:var(--t3);}
.push-geraet-knoepfe{display:flex;gap:5px;flex-shrink:0;}
.login-hinweis{font-size:13px;color:var(--t2);line-height:1.45;margin-top:9px;}
.login-hinweis:empty{margin-top:0;}
.login-hinweis.warn{color:var(--red);font-weight:600;}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;}

/* TRAINING */
.tdw{margin:5px 13px;border:0.5px solid var(--bdr);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-card);}
.tdh{background:var(--sf);padding:6px 11px;display:flex;justify-content:space-between;align-items:center;}
.tdh span{font-size:14px;font-weight:700;color:var(--t1);}
.tdh small{font-size:12px;color:var(--t2);}
.ts{padding:7px 11px;border-top:0.5px solid var(--bdr);display:flex;align-items:center;gap:5px;background:var(--card);}
.si{flex:1;}
.si h4{font-size:15px;font-weight:600;color:var(--t1);}
.si p{font-size:14px;color:var(--t2);}
.tog{border:none;border-radius:5px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;font-weight:700;white-space:nowrap;}
.tog.an{background:#E8F5E9;color:#2E7D32;}
.tog.ab{background:var(--rl);color:var(--rd);}
.tog.lk{background:var(--sf);color:var(--t3);cursor:default;}
.tog.dauer{background:#FFF7ED;color:#C2410C;border:0.5px dashed #C2410C;}
.mitt-card.wichtig{border:1px solid var(--red);background:linear-gradient(0deg,rgba(110,20,35,.04),rgba(110,20,35,.04)),var(--card);}
.poll-voters{margin-top:3px;font-size:12px;color:var(--t3);}
.poll-voters summary{cursor:pointer;user-select:none;}
.poll-voters-opt{padding:2px 0 0 8px;color:var(--t2);}
.poll-voters-opt b{color:var(--t1);font-weight:600;}
.locked-row{padding:7px 11px;border-top:0.5px solid var(--bdr);background:var(--sf);display:flex;align-items:center;gap:7px;opacity:.6;}
.locked-row i{font-size:17px;color:var(--t3);}
.locked-row-text h4{font-size:14px;color:var(--t2);font-weight:600;}
.locked-row-text p{font-size:12px;color:var(--t3);}
.att-box{margin:5px 13px;border:0.5px solid var(--bdr);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-card);}
.att-hdr{background:var(--blk);padding:6px 11px;display:flex;align-items:center;justify-content:space-between;}
.att-hdr span{font-size:13px;font-weight:600;color:#fff;}
.att-hdr button{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:5px;padding:2px 10px;min-height:44px;font-size:12px;cursor:pointer;}
.att-body{display:none;padding:5px 11px;}
.att-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:0.5px solid var(--bdr);}
.att-row:last-child{border-bottom:none;}
.att-name{font-size:14px;color:var(--t1);}
.att-status{font-size:12px;color:var(--t3);}
.att-chk{background:none;border:0.5px solid var(--bdr);border-radius:6px;width:36px;height:36px;cursor:pointer;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--t2);}
.att-chk.ok{background:#E8F5E9;border-color:#4CAF50;color:#2E7D32;}
/* Tippflaeche auf 44x44, ohne den Kasten optisch aufzublasen: 36 + 2x4 Rand. */
.att-chk::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.dauer-box{margin:4px 13px;border:0.5px solid var(--bdr);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-card);}
.dauer-hdr{background:var(--blk);padding:6px 11px;display:flex;align-items:center;justify-content:space-between;}
.dauer-hdr span{font-size:13px;font-weight:600;color:#fff;}
.dauer-hdr button{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:5px;padding:2px 10px;min-height:44px;font-size:12px;cursor:pointer;}
.dauer-body{display:none;padding:5px 11px;}
.dauer-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:0.5px solid var(--bdr);}
.dauer-row:last-child{border-bottom:none;}
.dauer-lbl{font-size:14px;color:var(--t1);}
.dauer-tog{border:none;border-radius:10px;padding:2px 9px;font-size:13px;cursor:pointer;font-weight:700;}
.dauer-tog.aktiv{background:#E8F5E9;color:#2E7D32;}
.dauer-tog.inaktiv{background:var(--rl);color:var(--rd);}
.dauer-kid-group{margin-bottom:6px;padding-bottom:4px;border-bottom:0.5px solid var(--bdr);}
.dauer-kid-group:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;}
.dauer-kid-name{font-size:13px;font-weight:700;color:var(--t1);margin-top:4px;}
.poll-box{margin:5px 13px;border:0.5px solid #7DD3FC;border-radius:9px;background:#E0F2FE;overflow:hidden;box-shadow:var(--shadow-card);}
.dark .poll-box{background:#0c2d3d;}
.poll-hdr{padding:7px 11px 4px;font-size:14px;font-weight:700;color:#0369A1;}
.dark .poll-hdr{color:#7DD3FC;}
.poll-body{padding:0 11px 9px;}
.poll-q{font-size:14px;color:var(--t2);margin-bottom:6px;}
.poll-opt{display:flex;align-items:center;gap:6px;margin-bottom:5px;cursor:pointer;}
.poll-opt input{accent-color:var(--red);width:13px;height:13px;}
.poll-opt-lbl{font-size:15px;color:var(--t1);flex-shrink:0;}
.poll-bar-w{flex:1;height:5px;background:rgba(255,255,255,.5);border-radius:3px;overflow:hidden;}
.dark .poll-bar-w{background:rgba(255,255,255,.1);}
.poll-bar{height:100%;background:var(--red);border-radius:3px;}
.poll-pct{font-size:13px;color:var(--t2);min-width:26px;text-align:right;}
.poll-sub-btn{margin-top:5px;background:var(--red);color:#fff;border:none;border-radius:6px;padding:4px 12px;font-size:13px;cursor:pointer;font-weight:700;}
.poll-sub-btn:disabled{background:var(--t3);}
.poll-tot{font-size:12px;color:var(--t3);margin-top:3px;}
.train-plan-box{margin:5px 13px;border:0.5px solid var(--bdr);border-radius:9px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-card);}
.tp-hdr{background:var(--blk);padding:7px 11px;display:flex;align-items:center;justify-content:space-between;}
.tp-hdr span{font-size:13px;font-weight:700;color:#fff;}
.tp-hdr small{font-size:12px;color:rgba(255,255,255,.5);}
.tp-warn-bar{background:#FFFBEB;border-bottom:0.5px solid var(--orange);padding:6px 11px;font-size:12px;color:#92400E;display:flex;align-items:center;gap:5px;}
.dark .tp-warn-bar{background:#2a1f00;color:#FCD34D;}
.tp-einheit{border-top:0.5px solid var(--bdr);padding:8px 11px;}
.tp-einheit.ausgefallen{opacity:.55;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(204,0,0,.03) 5px,rgba(204,0,0,.03) 10px);}
.tp-ein-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:5px;}
.tp-ein-name{font-size:14px;font-weight:700;color:var(--t1);}
.tp-ein-name.durchg{text-decoration:line-through;color:var(--t3);}
.tp-ein-time{font-size:12px;color:var(--t2);margin-top:1px;}
.tp-status-ok{font-size:12px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.tp-status-warn{font-size:12px;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.tp-status-aus{font-size:12px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.tp-trainer-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px;}
.tp-tav{display:flex;align-items:center;gap:4px;background:var(--sf);border-radius:12px;padding:2px 7px;}
.tp-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.tp-av1{background:linear-gradient(135deg,var(--red),var(--rd));}.tp-av2{background:linear-gradient(135deg,var(--blue),#0d3f70);}.tp-av3{background:linear-gradient(135deg,var(--green),#1b5e20);}
.tp-tav-name{font-size:12px;color:var(--t1);font-weight:600;}
.tp-tav-rm{background:none;border:none;color:var(--t3);cursor:pointer;font-size:15px;padding:0;}
.tp-kein{font-size:12px;color:var(--orange);display:flex;align-items:center;gap:4px;margin-bottom:5px;}
.tp-btns{display:flex;gap:5px;flex-wrap:wrap;}
.tp-btn{border:0.5px solid var(--bdr);background:var(--card);border-radius:6px;padding:4px 12px;min-height:44px;font-size:12px;cursor:pointer;color:var(--t2);display:flex;align-items:center;gap:3px;font-weight:600;}
.tp-btn.ein{background:#E8F5E9;border-color:#4CAF50;color:#2E7D32;}
.tp-btn.aus{background:var(--rl);border-color:var(--red);color:var(--red);}
.tp-btn.warn{border-color:var(--orange);color:var(--orange);}
.tp-btn.restore{border-color:var(--green);color:var(--green);}
.tp-notiz{font-size:12px;color:var(--orange);margin-top:3px;display:flex;align-items:center;gap:3px;font-style:italic;}
.brett-tabs{display:flex;gap:4px;padding:0 13px 7px;flex-wrap:wrap;}
.brtab{border:0.5px solid var(--bdr);background:var(--card);border-radius:14px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;color:var(--t2);font-weight:500;}
.brtab.active{background:var(--blk);color:#fff;}

.tcounter{margin:5px 13px;border:0.5px solid var(--bdr);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-card);}
.tc-hdr{background:var(--green);padding:7px 11px;}
.tc-hdr span{font-size:14px;font-weight:700;color:#fff;}
.tc-body{padding:9px 11px;}
.tc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.tc-stat{background:var(--sf);border-radius:7px;padding:8px;text-align:center;}
.tc-num{font-size:20px;font-weight:700;color:var(--t1);}
.tc-num.ok{color:var(--green);}.tc-num.bad{color:var(--red);}
.tc-lbl{font-size:12px;color:var(--t2);margin-top:1px;}
.tc-bar-w{height:6px;background:var(--bdr);border-radius:3px;overflow:hidden;margin-bottom:3px;}
.tc-bar{height:100%;background:var(--green);border-radius:3px;}
.tc-months{display:flex;gap:2px;flex-wrap:wrap;margin-top:5px;}
.tc-mo{font-size:12px;padding:2px 5px;border-radius:3px;font-weight:600;}
.tc-mo.ok{background:#E8F5E9;color:#2E7D32;}.tc-mo.bad{background:var(--rl);color:var(--rd);}.tc-mo.fut{background:var(--sf);color:var(--t3);}
.tc-mo.warn{background:#FEF3C7;color:#92400E;}
.tc-mo .tc-cnt{display:block;font-weight:400;font-size:12px;opacity:.85;text-align:center;}
.tj-sec{margin-top:8px;border-top:0.5px solid var(--bdr);padding-top:7px;}
.tj-hdr{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:6px;}
.bonus-row{margin-top:6px;font-size:13px;color:#0369A1;background:#E0F2FE;border-radius:6px;padding:5px 8px;}

/* MITTEILUNGEN */
.filter-tabs{display:flex;gap:4px;padding:0 13px 7px;flex-wrap:wrap;}
.ft{border:0.5px solid var(--bdr);background:var(--card);border-radius:14px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;color:var(--t2);font-weight:500;}
.ft.active{background:var(--red);color:#fff;border-color:var(--red);}
.mitt-card{margin:0 13px 8px;border:0.5px solid var(--bdr);border-radius:10px;background:var(--card);overflow:hidden;box-shadow:var(--shadow-card);}
.mitt-top{padding:10px 11px 0;}
.mitt-meta{display:flex;align-items:center;gap:5px;margin-bottom:5px;flex-wrap:wrap;}
.tag{font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px;}
.tag-w{background:var(--red);color:#fff;}.tag-t{background:var(--blk);color:#fff;}.tag-i{background:var(--sf);color:var(--t2);}
.grp-badge{font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px;}
.gb-all{background:var(--sf);color:var(--t2);}.gb-j{background:#DCFCE7;color:#166534;}.gb-m{background:#E0F2FE;color:#0369A1;}.gb-d{background:#FEF3C7;color:#92400E;}.gb-b{background:#F3E8FF;color:#6B21A8;}
.mitt-date{font-size:12px;color:var(--t3);margin-left:auto;}
.mitt-title{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:3px;}
.mitt-body-text{font-size:15px;color:var(--t2);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.mitt-bottom{padding:8px 11px;}
/* Bearbeiten/Löschen an der Mitteilungskarte (Paket L). Steht bei Mitgliedern
   unter der Reaktionsleiste, bei Leitung und Trainern allein im Fuß. */
.mitt-act{display:flex;gap:4px;}
.react-bar+.mitt-act{margin-top:6px;}
.react-bar{display:flex;gap:4px;flex-wrap:wrap;position:relative;}
.rb{border:0.5px solid var(--bdr);background:var(--card);border-radius:10px;padding:3px 8px;font-size:13px;cursor:pointer;color:var(--t2);position:relative;z-index:1;}
.rb::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:44px;transform:translate(-50%,-50%);}
.rb.active{background:var(--rl);border-color:var(--red);color:var(--red);}
/* width:max-content ist hier Pflicht. Ohne die Angabe holt sich das Feld seine
   Breite vom Elternelement - bei einer kurzen Chat-Nachricht ("Ok") ist das
   eine 43px schmale Sprechblase. Die zehn Emoji standen dann einzeln
   untereinander, der 268px hohe Streifen wurde oben abgeschnitten. */
.react-pop{position:absolute;bottom:calc(100% + 4px);left:0;background:var(--card);border:0.5px solid var(--bdr);border-radius:16px;padding:4px 6px;display:flex;gap:2px;flex-wrap:wrap;box-shadow:var(--shadow-card);z-index:30;width:max-content;max-width:min(240px,calc(100vw - 24px));}
/* Eigene Nachrichten sitzen am rechten Rand - dort muss das Feld nach links
   aufklappen, sonst schiebt es sich aus dem Bild. */
.bub.mine .react-pop{left:auto;right:0;}
/* Wird von reactPopAusrichten() gesetzt, wenn oben kein Platz mehr ist. */
.react-pop.unten{bottom:auto;top:calc(100% + 4px);}
.rp-e{border:none;background:transparent;font-size:17px;cursor:pointer;padding:2px 4px;border-radius:6px;}
.rp-e.active{background:var(--rl);}
.bub .react-bar{margin-top:3px;}
.bub .rb{font-size:12px;padding:1px 5px;background:rgba(255,255,255,.75);}
.mitt-poll{background:var(--sf);border-radius:7px;padding:8px;margin-top:7px;}
.mitt-poll-q{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:5px;}
/* Die ganze Zeile ist das Stimmfeld, nicht nur der 13px kleine Punkt:
   .mitt-poll-opt ist ein <label>, ein Tipp irgendwo darin waehlt die Option. */
.mitt-poll-opt{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-height:44px;cursor:pointer;}
.mitt-poll-opt input{accent-color:var(--red);width:22px;height:22px;flex-shrink:0;}
.mitt-poll-bar-w{flex:1;height:4px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.mitt-poll-bar{height:100%;background:var(--red);border-radius:2px;}
.mitt-poll-pct{font-size:13px;color:var(--t2);min-width:24px;text-align:right;}

/* KALENDER */
.cal-tabs{display:flex;gap:4px;padding:0 13px 6px;flex-wrap:wrap;}
.cgt{border:0.5px solid var(--bdr);background:var(--card);border-radius:14px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;color:var(--t2);font-weight:500;}
.cgt.active{background:var(--red);color:#fff;border-color:var(--red);}
.cal-nav{display:flex;align-items:center;gap:7px;padding:0 13px 5px;}
.cal-nav button{background:none;border:0.5px solid var(--bdr);border-radius:7px;width:44px;height:44px;cursor:pointer;color:var(--t1);font-size:17px;}
.cal-m{font-size:16px;font-weight:700;color:var(--t1);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:0 13px;}
.cdl{text-align:center;font-size:12px;color:var(--t3);padding:2px 0;font-weight:700;}
.cd{text-align:center;font-size:13px;padding:9px 0;border-radius:5px;color:var(--t1);position:relative;cursor:pointer;}
.cd.today{background:var(--red);color:#fff;font-weight:700;}
.cd.has-ev::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--red);}
.cd.today.has-ev::after{background:#fff;}
.cd.om{color:var(--t3);cursor:default;}
.cd.sel{box-shadow:0 0 0 2px var(--blue) inset;font-weight:700;}
.cd.ferien{background:#FFF3CD;color:#856404;}
.dark .cd.ferien{background:#3a2e00;color:#FFC107;}
.cal-leg{display:flex;gap:8px;padding:5px 13px;flex-wrap:wrap;}
.leg{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--t2);}
.legdot{width:7px;height:7px;border-radius:2px;}
.ev-list{padding:6px 13px;}
.ev-list h3{font-size:12px;font-weight:700;color:var(--t3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.ev-item{display:flex;gap:7px;padding:7px;border:0.5px solid var(--bdr);border-radius:8px;margin-bottom:5px;background:var(--card);align-items:flex-start;box-shadow:var(--shadow-card);}
.ev-dot{width:7px;height:7px;border-radius:50%;margin-top:3px;flex-shrink:0;}
.ev-dot.r{background:var(--red);}.ev-dot.f{background:#FFC107;}.ev-dot.b{background:#555;}
.ev-info h4{font-size:15px;font-weight:600;color:var(--t1);}
.ev-info p{font-size:14px;color:var(--t2);margin-top:1px;}
/* BRETT */
.brett-card{margin:0 13px 8px;border:0.5px solid var(--bdr);border-radius:10px;background:var(--card);padding:10px 11px;box-shadow:var(--shadow-card);}
.brett-auth{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
/* Der Grauton greift nur, wenn kein .avf-Ton gesetzt ist: bei einem Beitrag
   eines ausgetretenen Mitglieds, zu dem es keine Person mehr gibt. */
.brett-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#6B6B6B,#545454);}
.brett-name{font-size:15px;font-weight:700;color:var(--t1);}
.brett-time{font-size:12px;color:var(--t3);}
.brett-text{font-size:15px;color:var(--t2);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.brett-act{display:flex;gap:4px;margin-top:6px;}
.brett-btn{border:0.5px solid var(--bdr);background:var(--card);border-radius:5px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;color:var(--t2);}
.brett-btn.liked{border-color:var(--red);color:var(--red);}
.write-btn{background:var(--blk);color:#fff;border:none;border-radius:7px;padding:8px;min-height:44px;width:calc(100% - 26px);margin:2px 13px 8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:700;}

/* BRIEFE */
.brief-card{margin:0 13px 7px;border:0.5px solid var(--bdr);border-radius:9px;padding:9px;display:flex;gap:8px;background:var(--card);box-shadow:var(--shadow-card);}
.brief-icon{background:var(--rl);border-radius:7px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:17px;flex-shrink:0;}
.brief-info{flex:1;}
.brief-title{font-size:14px;font-weight:700;color:var(--t1);}
.brief-meta{font-size:12px;color:var(--t3);margin-top:2px;}
.brief-dl{background:var(--red);color:#fff;border:none;border-radius:6px;padding:4px 12px;min-height:44px;font-size:12px;cursor:pointer;margin-top:5px;display:inline-flex;align-items:center;gap:3px;}

/* CHAT */
.scr#s-chat.active{display:flex;flex-direction:column;}
.chat-msgs{padding:7px 11px;display:flex;flex-direction:column;gap:5px;flex:1;overflow-y:auto;min-height:220px;}
/* white-space:pre-wrap haelt Absaetze, die jemand eingetippt hat (Paket M).
   Ohne word-break sprengt ein einzelnes langes Wort die Blase. Vorbild ist
   .brett-antwort-text, das beides seit jeher hat. Unbedenklich, obwohl in .bub
   auch Kind-Elemente stecken: Der HTML-Text wird in renderChat() ohne Umbrueche
   zwischen den Tags zusammengesetzt, es gibt also keinen Leerraum, den
   pre-wrap sichtbar machen koennte. */
.bub{max-width:82%;padding:7px 9px;border-radius:10px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.bub.mine{background:var(--teal);color:#fff;align-self:flex-end;border-bottom-right-radius:2px;}
.bub.other{background:var(--sf);color:var(--t1);align-self:flex-start;border-bottom-left-radius:2px;}
/* Zurueckgenommen - sieht nur die Leitung. Blass und kursiv, damit sie im
   Verlauf sofort von einer normalen Nachricht zu unterscheiden ist. */
.bub.zurueck{opacity:.6;font-style:italic;border:0.5px dashed var(--bdr);}
/* Die Vorfassung einer geaenderten Nachricht - sieht nur die Leitung.
   Abgesetzt durch Linie und Schriftgroesse, damit sie sich nicht mit dem
   gueltigen Text verwechseln laesst. */
.bub-vorher{font-size:13px;opacity:.65;font-style:italic;margin-top:4px;padding-top:3px;border-top:0.5px solid currentColor;}
.bub .bn2{font-size:12px;font-weight:700;margin-bottom:1px;opacity:.7;}
.bub .bt{font-size:12px;opacity:.55;margin-top:2px;}
/* Verfasserfarben (farbenVerteilen() in js/app.js). Im Jugendchat traegt die
   Verfasserzeile sie, am Schwarzen Brett der Name und der Avatar-Kreis.
   Zwei Markierungsklassen entscheiden, WAS eingefaerbt wird:
     .cf  + .cfN  -> Schriftfarbe (Chat-Verfasserzeile, Brett-Name)
     .avf + .cfN  -> Hintergrund des Avatar-Kreises (weisse Initialen darauf)
   Der Avatar traegt bewusst KEIN .cf, sonst wuerde die Schriftregel die weissen
   Initialen einfaerben - weiss auf bunt waere dann bunt auf bunt.
   .cf hebt ausserdem im Chat die Abblendung auf: eine eingefaerbte
   Verfasserzeile soll klar lesbar sein, nicht auf .7 gedimmt.

   Zweiunddreissig Toene. Die Zahl kommt aus dem Verein: rund 25 aktive Kinder
   plus Jugendleitung, und kein Ton darf innerhalb eines Chats oder eines
   Bretts zweimal vergeben werden. Von Hand waeren 32 Toene Raterei, deshalb
   gerechnet: Farbtoene gleichmaessig ueber den OKLCH-Kreis verteilt (dort
   liegen sie fuers Auge gleich weit auseinander, anders als bei HSL, wo Gruen
   den halben Kreis frisst), Helligkeit reihum in drei Stufen, damit sich auch
   benachbarte Farbtoene nicht nur im Ton unterscheiden.

   Gemessen wurde jeder einzelne Ton:
     Schrift hell  auf var(--sf): mindestens 4.60:1
     Schrift dunkel auf var(--sf): mindestens 6.50:1
     weisse Initialen auf dem Avatar: mindestens 5.00:1
   Alle ueber WCAG AA (4.5:1). Der Avatar hat eigene Werte, weil weisse Schrift
   auf farbigem Grund andere Helligkeiten braucht als farbige Schrift auf
   hellem Grund - gleicher Farbton, andere Helligkeit. */
.bub .bn2.cf{opacity:1;}
.cf.cf0{color:#BC484F;}.cf.cf1{color:#A93929;}.cf.cf2{color:#8C370D;}.cf.cf3{color:#AE5703;}
.cf.cf4{color:#895414;}.cf.cf5{color:#6F4B05;}.cf.cf6{color:#896B19;}.cf.cf7{color:#6E5F00;}
.cf.cf8{color:#54550A;}.cf.cf9{color:#627708;}.cf.cf10{color:#406B0F;}.cf.cf11{color:#01600D;}
.cf.cf12{color:#0F8049;}.cf.cf13{color:#186C51;}.cf.cf14{color:#005B4D;}.cf.cf15{color:#0B7D76;}
.cf.cf16{color:#0B696D;}.cf.cf17{color:#005966;}.cf.cf18{color:#1E7893;}.cf.cf19{color:#1B6689;}
.cf.cf20{color:#0F5585;}.cf.cf21{color:#2C6FC5;}.cf.cf22{color:#3D5AB6;}.cf.cf23{color:#4646A5;}
.cf.cf24{color:#7460C3;}.cf.cf25{color:#744AAB;}.cf.cf26{color:#733791;}.cf.cf27{color:#9E51A6;}
.cf.cf28{color:#973D87;}.cf.cf29{color:#8E2A68;}.cf.cf30{color:#B74875;}.cf.cf31{color:#A83653;}
.dark .cf.cf0{color:#F98889;}.dark .cf.cf1{color:#FFB4A6;}.dark .cf.cf2{color:#F9A280;}.dark .cf.cf3{color:#F58F46;}
.dark .cf.cf4{color:#FCB976;}.dark .cf.cf5{color:#F0AB32;}.dark .cf.cf6{color:#D1A203;}.dark .cf.cf7{color:#DFC740;}
.dark .cf.cf8{color:#BCBE38;}.dark .cf.cf9{color:#98B439;}.dark .cf.cf10{color:#9DD76D;}.dark .cf.cf11{color:#73CB72;}
.dark .cf.cf12{color:#42BE79;}.dark .cf.cf13{color:#41DFAB;}.dark .cf.cf14{color:#19CEB2;}.dark .cf.cf15{color:#31BBB3;}
.dark .cf.cf16{color:#01DCE5;}.dark .cf.cf17{color:#2BC9E2;}.dark .cf.cf18{color:#28B7DF;}.dark .cf.cf19{color:#7ED0FD;}
.dark .cf.cf20{color:#75BEFB;}.dark .cf.cf21{color:#6DABFE;}.dark .cf.cf22{color:#B1C7FB;}.dark .cf.cf23{color:#ABB3FA;}
.dark .cf.cf24{color:#AB9CFD;}.dark .cf.cf25{color:#D3BCFB;}.dark .cf.cf26{color:#DBA2FC;}.dark .cf.cf27{color:#DC8CE4;}
.dark .cf.cf28{color:#FFACEC;}.dark .cf.cf29{color:#FD98D0;}.dark .cf.cf30{color:#F983AF;}.dark .cf.cf31{color:#FEB2BE;}
.avf.cf0{background:linear-gradient(135deg,#BD484F,#972431);}.avf.cf1{background:linear-gradient(135deg,#BC4B39,#972718);}.avf.cf2{background:linear-gradient(135deg,#B94F1D,#8B360B);}.avf.cf3{background:linear-gradient(135deg,#AF5804,#7D400F);}
.avf.cf4{background:linear-gradient(135deg,#9E6118,#744610);}.avf.cf5{background:linear-gradient(135deg,#966603,#6D4A03);}.avf.cf6{background:linear-gradient(135deg,#896B19,#664D00);}.avf.cf7{background:linear-gradient(135deg,#7E6F1A,#5D5000);}
.avf.cf8{background:linear-gradient(135deg,#73730B,#535408);}.avf.cf9{background:linear-gradient(135deg,#637808,#475701);}.avf.cf10{background:linear-gradient(135deg,#4C7C16,#345A07);}.avf.cf11{background:linear-gradient(135deg,#248029,#005F0B);}
.avf.cf12{background:linear-gradient(135deg,#0F804A,#055D34);}.avf.cf13{background:linear-gradient(135deg,#197E5E,#155B44);}.avf.cf14{background:linear-gradient(135deg,#1C7D6C,#005A4C);}.avf.cf15{background:linear-gradient(135deg,#0B7D77,#005954);}
.avf.cf16{background:linear-gradient(135deg,#037C81,#00585D);}.avf.cf17{background:linear-gradient(135deg,#0E7B8B,#005865);}.avf.cf18{background:linear-gradient(135deg,#1F7993,#01576C);}.avf.cf19{background:linear-gradient(135deg,#1D77A0,#005779);}
.avf.cf20{background:linear-gradient(135deg,#1974B3,#0D5484);}.avf.cf21{background:linear-gradient(135deg,#2C6FC5,#014FA2);}.avf.cf22{background:linear-gradient(135deg,#4B6AC8,#2F4AA4);}.avf.cf23{background:linear-gradient(135deg,#6165C8,#4544A4);}
.avf.cf24{background:linear-gradient(135deg,#7460C4,#563FA0);}.avf.cf25{background:linear-gradient(135deg,#845BBD,#653A99);}.avf.cf26{background:linear-gradient(135deg,#9256B3,#713590);}.avf.cf27{background:linear-gradient(135deg,#9E51A6,#7C3184);}
.avf.cf28{background:linear-gradient(135deg,#A84E97,#852C76);}.avf.cf29{background:linear-gradient(135deg,#B14A87,#8C2867);}.avf.cf30{background:linear-gradient(135deg,#B74876,#922556);}.avf.cf31{background:linear-gradient(135deg,#BB4763,#962445);}
.chat-meld,.chat-akt{background:none;border:none;color:inherit;opacity:.4;cursor:pointer;font-size:14px;padding:2px 4px;margin-left:2px;position:relative;z-index:1;}
.chat-meld::after,.chat-akt::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.chat-meld:hover,.chat-akt:hover{opacity:.9;}
/* Jugendrat und Jugendleitung im Jugendchat (19.09.2026). Das Schildchen steht
   in der Verfasserzeile hinter dem Namen. Dunklere Toene als .cJR/.cJL in der
   Kopfzeile: Dort ist die Schrift 14px fett, hier 11px - weiss auf dem hellen
   Orange (--orange) kaeme nur auf etwa 3:1, auf #B45309 auf rund 5:1. */
.chat-amt{display:inline-block;font-size:11px;font-weight:700;line-height:1.3;padding:0 5px;border-radius:4px;margin-left:4px;vertical-align:1px;color:#fff;}
.chat-amt-JR{background:#B45309;}
.chat-amt-JL{background:#0F766E;}
/* Erwaehnung im Text: fett. Wer selbst gerufen ist, sieht sie zusaetzlich
   hinterlegt - halbdurchsichtig, damit es auf der hellen und der dunklen
   Blase und in beiden Farbschemata traegt. */
.chat-erw{font-weight:700;}
.chat-erw-ich{background:rgba(217,119,6,.28);border-radius:4px;padding:0 2px;}
/* Vorschlagsleiste ueber der Eingabe, erscheint beim Tippen von "@". */
.chat-vorschlag{display:flex;gap:6px;flex-wrap:wrap;padding:6px 11px;background:var(--card);border-top:0.5px solid var(--bdr);flex-shrink:0;}
.chat-vorschlag-btn{font-size:14px;font-weight:700;min-height:36px;padding:4px 10px;border-radius:8px;border:0.5px solid var(--bdr);background:var(--sf);color:var(--t1);cursor:pointer;}
.chat-vorschlag-kurz{font-weight:400;color:var(--t2);margin-left:3px;}
.cin-row{display:flex;gap:5px;padding:7px 11px 9px;border-top:0.5px solid var(--bdr);background:var(--card);flex-shrink:0;align-items:flex-end;}
/* Seit Paket M ein textarea. resize:none, weil der Anfasser in der Ecke die
   Zeile sprengt - die Hoehe stellt chatEingabeHoehe() beim Tippen selbst ein.
   font-family muss stehen: Ein textarea erbt sie nicht, sonst stuende die
   Eingabe in Schreibmaschinenschrift. */
.cin{flex:1;border:0.5px solid var(--bdr);border-radius:16px;padding:6px 10px;min-height:44px;font-size:16px;color:var(--t1);background:var(--sf);outline:none;font-family:inherit;line-height:1.4;resize:none;overflow-y:auto;max-height:96px;}
.csend{background:var(--teal);color:#fff;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}

/* LERNBEREICH */
.cat-karate{margin:6px 13px;border-radius:12px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--red),var(--rd));box-shadow:0 3px 10px rgba(110,20,35,.35);position:relative;}
.cat-bc{margin:6px 13px;border-radius:12px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--teal),#0a6b61);box-shadow:0 3px 10px rgba(13,148,136,.3);position:relative;}
.cat-karate::before,.cat-bc::before{content:'';position:absolute;top:0;right:-14%;bottom:0;width:38%;background:rgba(255,255,255,.09);transform:skewX(-16deg);pointer-events:none;}
.cat-karate::after,.cat-bc::after{content:'';position:absolute;top:0;right:calc(38% + 10px);bottom:0;width:9px;background:rgba(255,255,255,.06);transform:skewX(-16deg);pointer-events:none;}
.cat-inner{padding:14px;display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.cat-inner i{font-size:32px;color:rgba(255,255,255,.9);}
.cat-text h3{font-size:17px;font-weight:700;color:#fff;}
.cat-text p{font-size:13px;color:rgba(255,255,255,.7);margin-top:2px;}
.subcat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 13px 10px;}
.subcat-tile{border:0.5px solid var(--bdr);border-radius:10px;padding:12px 8px;text-align:center;background:var(--card);cursor:pointer;box-shadow:var(--shadow-card);}
.subcat-tile i{font-size:22px;color:var(--red);margin-bottom:5px;display:block;}
.subcat-tile-name{font-size:14px;font-weight:700;color:var(--t1);}
.subcat-tile-count{font-size:12px;color:var(--t3);margin-top:2px;}
.breadcrumb{padding:2px 13px 8px;font-size:14px;color:var(--t2);display:flex;align-items:center;gap:4px;}
.breadcrumb span{cursor:pointer;color:var(--blue);}
.sec-lbl{font-size:13px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin:8px 13px 5px;}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 13px;}
.media-card{border:0.5px solid var(--bdr);border-radius:10px;overflow:hidden;background:var(--card);cursor:pointer;box-shadow:var(--shadow-card);}
.media-thumb{aspect-ratio:16/9;background:var(--sf);display:flex;align-items:center;justify-content:center;position:relative;color:var(--t3);}
.media-thumb i{font-size:26px;}
.play-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.12);}
.play-btn{width:30px;height:30px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;}
.media-dur{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;padding:1px 5px;border-radius:3px;}
.media-body{padding:7px;}
.media-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3;margin-bottom:2px;}
.media-meta{font-size:12px;color:var(--t3);}
.doc-item{display:flex;align-items:center;gap:8px;margin:0 13px 6px;padding:8px;border:0.5px solid var(--bdr);border-radius:8px;background:var(--card);box-shadow:var(--shadow-card);}
.doc-icon{width:32px;height:32px;border-radius:6px;background:var(--rl);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:17px;flex-shrink:0;}
.doc-body{flex:1;}
.doc-title{font-size:15px;font-weight:700;color:var(--t1);}
.doc-meta{font-size:13px;color:var(--t3);margin-top:1px;}
.doc-btn{background:var(--red);color:#fff;border:none;border-radius:5px;padding:4px 8px;font-size:12px;cursor:pointer;}
.upload-btn{background:var(--blk);color:#fff;border:none;border-radius:9px;padding:8px;min-height:44px;width:calc(100% - 26px);margin:2px 13px 8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:700;}

/* STATISTIK */
.stat-info{margin:4px 13px 8px;background:#E0F2FE;border:0.5px solid #7DD3FC;border-radius:9px;padding:7px 10px;font-size:13px;color:#075985;}
.stat-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 13px 10px;}
.ssc{background:var(--card);border:0.5px solid var(--bdr);border-radius:8px;padding:8px;text-align:center;box-shadow:var(--shadow-card);}
.ssc-num{font-size:18px;font-weight:700;}
.ssc-num.ok{color:var(--green);}.ssc-num.warn{color:var(--orange);}.ssc-num.bad{color:var(--red);}
.ssc-lbl{font-size:12px;color:var(--t2);margin-top:1px;}
.stat-kid{margin:0 13px 8px;border:0.5px solid var(--bdr);border-radius:10px;background:var(--card);overflow:hidden;box-shadow:var(--shadow-card);}
.stat-kid-hdr{padding:9px 11px;display:flex;align-items:center;justify-content:space-between;}
.stat-kid-name{font-size:15px;font-weight:700;color:var(--t1);}
.stat-pct{font-size:15px;font-weight:700;}
.stat-pct.ok{color:var(--green);}.stat-pct.warn{color:var(--orange);}.stat-pct.bad{color:var(--red);}
.stat-bw{height:6px;background:var(--bdr);border-radius:3px;overflow:hidden;margin:0 11px 6px;}
.stat-bf{height:100%;border-radius:3px;}
.stat-bf.ok{background:var(--green);}.stat-bf.warn{background:var(--orange);}.stat-bf.bad{background:var(--red);}
.stat-nums{display:flex;gap:12px;padding:0 11px 8px;font-size:14px;color:var(--t2);}
.stat-num.ok{color:var(--green);font-weight:700;}.stat-num.bad{color:var(--red);font-weight:700;}
.belt-progress{padding:0 11px 9px;}
.belt-progress-lbl{font-size:12px;color:var(--t3);margin-bottom:3px;}
.belt-progress-bw{height:5px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.belt-progress-bf{height:100%;border-radius:3px;background:var(--purple);}
.badge-row{display:flex;gap:5px;flex-wrap:wrap;padding:0 11px 9px;}
.badge{font-size:12px;font-weight:700;padding:2px 7px;border-radius:10px;background:#FEF3C7;color:#92400E;}
.dark .badge{background:#3d2f00;color:#FCD34D;}
.scoreboard{margin:0 13px 10px;border:0.5px solid var(--bdr);border-radius:10px;background:var(--card);overflow:hidden;box-shadow:var(--shadow-card);}
.scoreboard-hdr{background:var(--blk);color:#fff;padding:7px 11px;font-size:14px;font-weight:700;}
.scoreboard-row{display:flex;align-items:center;gap:7px;padding:6px 11px;border-top:0.5px solid var(--bdr);font-size:14px;}
.scoreboard-rank{font-weight:700;color:var(--t3);width:16px;}
.scoreboard-name{flex:1;color:var(--t1);font-weight:600;}
.scoreboard-pct{font-weight:700;color:var(--t1);}

/* KUY-GRAD */
.kid-row{margin:0 13px 7px;border:0.5px solid var(--bdr);border-radius:10px;padding:10px 11px;background:var(--card);box-shadow:var(--shadow-card);}
.kid-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.kid-name{font-size:15px;font-weight:700;color:var(--t1);}
.belt-disp{display:flex;align-items:center;gap:5px;}
.bdot{width:12px;height:12px;border-radius:50%;border:1px solid var(--bdr);}
.blbl{font-size:13px;font-weight:600;color:var(--t1);}
.kuy-sel{width:100%;border:0.5px solid var(--bdr);border-radius:7px;padding:6px 8px;min-height:44px;font-size:16px;color:var(--t1);background:var(--card);}
.unlock-hint{font-size:12px;margin-top:5px;display:flex;align-items:center;gap:3px;}

/* ADMIN */
.admin-sec{padding:0 13px;}
.admin-card{border:0.5px solid var(--bdr);border-radius:9px;margin-bottom:8px;background:var(--card);overflow:hidden;box-shadow:var(--shadow-card);}
.admin-hdr{background:var(--blk);padding:7px 11px;font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:space-between;}
.admin-hdr button{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:5px;padding:2px 11px;min-height:44px;font-size:13px;cursor:pointer;}
.grp-block{border-top:0.5px solid var(--bdr);}
.grp-block:first-child{border-top:none;}
.grp-hdr{padding:8px 11px;display:flex;align-items:center;justify-content:space-between;background:var(--sf);}
.grp-hdr b{font-size:13px;color:var(--t1);font-weight:600;}
.grp-hdr button{background:var(--card);border:0.5px solid var(--bdr);color:var(--t2);border-radius:4px;padding:2px 7px;font-size:12px;cursor:pointer;}
.grp-body{display:none;}
/* Karten im Admin-Panel einklappbar. Seit Paket U (16.08.2026) auch
   #s-kuygrade: die Jugendrat-Karte dort nutzt dieselbe Klasse
   admin-card/admin-hdr und hat seither denselben Einklapp-Mechanismus. */
#s-admin .admin-card>.admin-hdr,#s-kuygrade .admin-card>.admin-hdr{cursor:pointer;user-select:none;}
#s-admin .admin-card>.admin-body,#s-kuygrade .admin-card>.admin-body{display:none;}
#s-admin .admin-card.offen>.admin-body,#s-kuygrade .admin-card.offen>.admin-body{display:block;}
.admin-jump{display:flex;gap:6px;padding:6px 13px 2px;flex-wrap:wrap;}
.admin-jump button{font-size:13px;padding:5px 12px;min-height:44px;border-radius:14px;border:0.5px solid var(--bdr);background:var(--sf);color:var(--t2);cursor:pointer;}
.admin-block-hdr{font-size:13px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;margin:14px 13px 6px;}
.admin-block-hdr:first-child{margin-top:2px;}
.user-row{padding:9px 11px;border-top:0.5px solid var(--bdr);}
.user-name{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:5px;}
.role-chips{display:flex;gap:6px;flex-wrap:wrap;}
.rc{border:0.5px solid var(--bdr);border-radius:10px;padding:3px 12px;min-height:44px;font-size:12px;cursor:pointer;color:var(--t2);background:var(--card);}
.rc.rAL{background:var(--purple);color:#fff;border-color:var(--purple);}
.rc.rJL{background:var(--teal);color:#fff;border-color:var(--teal);}
.rc.rT{background:var(--red);color:#fff;border-color:var(--red);}
.rc.rJR{background:var(--orange);color:#fff;border-color:var(--orange);}
/* Eltern in derselben Farbe wie der Eltern-Chip im Kopf (.cE) - dieselbe Rolle,
   dieselbe Farbe, sonst sucht man den Zusammenhang. */
.rc.rEltern{background:var(--blue);color:#fff;border-color:var(--blue);}
/* Antworten am Schwarzen Brett: eingerueckt unter dem Beitrag, an dem sie haengen. */
.brett-antworten{margin:6px 0 0 14px;border-left:2px solid var(--bdr);padding-left:9px;}
.brett-antwort{padding:5px 0;}
.brett-antwort+.brett-antwort{border-top:0.5px solid var(--bdr);}
.brett-antwort-kopf{font-size:12px;color:var(--t3);margin-bottom:2px;}
.brett-antwort-text{font-size:14px;color:var(--t1);white-space:pre-wrap;word-break:break-word;}
.trainer-row{padding:9px 11px;border-top:0.5px solid var(--bdr);}
.trainer-name{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:5px;}
.tgc-wrap{display:flex;gap:5px;flex-wrap:wrap;}
.tgc{border:0.5px solid var(--bdr);border-radius:14px;padding:3px 9px;font-size:13px;cursor:pointer;color:var(--t2);background:var(--card);}
.tgc.active{background:var(--red);color:#fff;border-color:var(--red);}
.mitgl-row{padding:9px 11px;border-top:0.5px solid var(--bdr);}
.mitgl-name{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:5px;}
.mgc-wrap{display:flex;gap:6px;flex-wrap:wrap;}
.mgc{border:0.5px solid var(--bdr);border-radius:14px;padding:3px 12px;min-height:44px;font-size:13px;cursor:pointer;color:var(--t2);background:var(--card);}
.mgc.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.invite-box{padding:10px 11px;}
.invite-row{display:flex;gap:5px;margin-bottom:5px;}
.invite-row input,.invite-row select{flex:1;border:0.5px solid var(--bdr);border-radius:6px;padding:6px 8px;font-size:16px;color:var(--t1);background:var(--card);}
.invite-btn{background:var(--red);color:#fff;border:none;border-radius:6px;padding:6px 11px;font-size:13px;cursor:pointer;font-weight:700;white-space:nowrap;}

/* MODAL */
.mov{display:none;position:absolute;inset:0;background:rgba(0,0,0,.5);border-radius:16px;align-items:flex-end;z-index:50;}
.mov.open{display:flex;}
.modal{background:var(--card);border-radius:12px 12px 0 0;padding:14px;width:100%;max-height:80%;overflow-y:auto;}
.modal h3{font-size:16px;font-weight:700;margin-bottom:9px;color:var(--t1);}
.modal label{font-size:13px;color:var(--t2);display:block;margin-bottom:2px;margin-top:7px;}
.modal input,.modal select,.modal textarea{width:100%;border:0.5px solid var(--bdr);border-radius:6px;padding:6px 8px;min-height:44px;font-size:16px;color:var(--t1);background:var(--card);font-family:inherit;}
.modal textarea{height:55px;resize:none;}
/* Ankreuzfelder im Dialog: der Punkt selbst bleibt klein, die Zeile
   (das <label>) ist das Tippziel und traegt die 44px. */
.modal label:has(input[type=checkbox]){min-height:44px;}
.modal input[type=checkbox]{width:22px;height:22px;min-height:22px;flex-shrink:0;accent-color:var(--red);}
.mact{display:flex;gap:5px;margin-top:10px;}
.mc{flex:1;border:0.5px solid var(--bdr);background:var(--card);border-radius:6px;padding:7px;min-height:44px;cursor:pointer;font-size:14px;color:var(--t2);}
.mo{flex:2;background:var(--red);color:#fff;border:none;border-radius:6px;padding:7px;min-height:44px;cursor:pointer;font-size:14px;font-weight:700;}

/* Rechtstexte (Impressum, Datenschutz, Chat-Regeln) */
.legal-links{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;}
.legal-link{background:none;border:none;color:var(--t3);font-size:12px;text-decoration:underline;cursor:pointer;padding:12px 4px;min-height:44px;font-family:inherit;}
.legal-links span{font-size:12px;color:var(--t3);}
.legal-nav-btn{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:var(--sf);border:0.5px solid var(--bdr);border-radius:8px;padding:9px 11px;min-height:44px;font-size:14px;font-weight:600;color:var(--t1);cursor:pointer;margin-bottom:6px;font-family:inherit;}
.legal-nav-btn i{font-size:17px;color:var(--red);}
.legal-txt{font-size:14px;color:var(--t2);line-height:1.5;}
.legal-txt h4{font-size:14px;font-weight:700;color:var(--t1);margin:10px 0 3px;}
.legal-txt p{margin:0 0 6px;}
.legal-txt ul{margin:0 0 6px 15px;padding:0;}
.legal-txt li{margin-bottom:2px;}
.legal-txt table{width:100%;border-collapse:collapse;font-size:12px;margin:4px 0 8px;}
.legal-txt th,.legal-txt td{border:0.5px solid var(--bdr);padding:3px 4px;text-align:left;vertical-align:top;}
.legal-txt th{background:var(--sf);color:var(--t1);}
/* Aufklappbarer Teil der Chat-Regeln (30.08.2026). Der Kurztext steht offen
   da, die Einzelheiten stecken hier drin - 44px hohe Tippflaeche wie ueberall
   sonst in der App, damit sie sich auf dem Handy treffen laesst. */
.legal-txt details.regeln-mehr{border:0.5px solid var(--bdr);border-radius:8px;background:var(--sf);padding:0 9px;margin:11px 0 4px;}
.legal-txt details.regeln-mehr>summary{cursor:pointer;user-select:none;font-weight:700;color:var(--t1);min-height:44px;display:flex;align-items:center;list-style:none;}
.legal-txt details.regeln-mehr>summary::-webkit-details-marker{display:none;}
.legal-txt details.regeln-mehr>summary::before{content:"▸";margin-right:6px;transition:transform .15s;display:inline-block;}
.legal-txt details.regeln-mehr[open]>summary::before{transform:rotate(90deg);}
.legal-txt details.regeln-mehr>*:last-child{margin-bottom:9px;}

.entwurf-hinweis{background:var(--sf);border:0.5px dashed var(--orange);border-radius:8px;padding:7px 9px;font-size:12px;color:var(--t2);margin-bottom:9px;}

.toast{position:absolute;bottom:11px;left:50%;transform:translateX(-50%) translateY(40px);background:var(--blk);color:#fff;padding:7px 12px;border-radius:8px;font-size:13px;white-space:nowrap;opacity:0;transition:all .25s;z-index:60;display:flex;align-items:center;gap:5px;max-width:90%;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.ok{background:#2E7D32;}.toast.info{background:var(--blue);}.toast.err{background:var(--rd);}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* HANDY: randlos statt Attrappe ------------------------------------------------
   Am Monitor sitzt die App absichtlich als 520px breite Karte mit runden Ecken
   und duenner Linie auf grauem Grund - so sieht man beim Entwickeln gleich, wie
   sie auf einem Handy wirkt. Installiert man sie dann WIRKLICH auf einem Handy,
   bleibt genau dieser Rahmen stehen: 20px grauer Balken oben und unten, runde
   Ecken mitten im Bildschirm, App 40px kuerzer als der Bildschirm.
   Unterhalb von 560px faellt die Attrappe deshalb weg. Der Monitor-Blick bleibt
   unveraendert - die Regeln oben werden nicht angefasst, nur hier ueberschrieben.

   Dazu die Sicherheitsabstaende (env(safe-area-inset-*)): Bis jetzt hat der
   graue 20px-Balken die App zufaellig davor geschuetzt, unter Uhr und Akku-
   Anzeige zu rutschen. Faellt der Balken weg, muss der Abstand echt sein, sonst
   liegt die Kopfzeile unter der Statusleiste und der unterste Knopf unter dem
   Wischbalken. Auf Geraeten ohne Aussparung liefert env() 0px - kostet dort
   also nichts. Der Wert am oberen Rand steht bei .hdr, weil er zur roten Flaeche
   gehoert und nicht zum grauen Grund darum. */
@media (max-width:560px){
  body{background:var(--bg);padding:0;}
  /* Die Klasse .dark sitzt an #app, nicht am body - var(--bg) am body loest
     deshalb immer zu Weiss auf. Sichtbar wird das nur beim Ueberdehnen am
     Rand ("Gummiband") und waehrend die Tastatur aufgeht, dort aber als
     weisser Blitz. Kann ein Browser :has() nicht, bleibt es beim bisherigen
     Verhalten - kein Schaden. */
  body:has(#app.dark){background:#111;}
  .app{max-width:none;border:0;border-radius:0;height:100dvh;min-height:0;}
  .mov{border-radius:0;}
  .modal{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  .scr{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  #ls,#warte{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .toast{bottom:calc(11px + env(safe-area-inset-bottom,0px));}
}

@media print{
  body{background:#fff;padding:0;}
  .hdr,.nav-wrap,.toast,.mov{display:none !important;}
  .app{height:auto !important;max-width:100% !important;border:none !important;box-shadow:none !important;}
  #ascreens{overflow:visible !important;}
  .scr.active{overflow:visible !important;}
  #s-statistik .sh button{display:none !important;}
  .stat-kid,.scoreboard,.ssc{box-shadow:none !important;border:1px solid #ccc !important;break-inside:avoid;}
}