/* Lesehöhle — Webseite, Runde 3 (26.09.2026): „modern, zeitgemäß, ein kleiner Hingucker".
   Bricolage Grotesque für Überschriften, Plus Jakarta Sans für Text, Farben der App. Nichts von fremden Servern.
   Bewegung nur mit Maß und nur, wenn das Gerät sie erlaubt (prefers-reduced-motion). Alles funktioniert ohne Skript. */

/* ───────── Farben und Grundlagen ───────── */
:root{
 --grund:#FFF9F1;--papier:#FFFFFF;--tinte:#231812;--tinte2:#6F5B4E;--blass:#7D6A5B;--linie:#EFE4D6;--linie2:#F6EFE6;
 --fuchs:#F07A2E;--fuchsT:#C9560F;--fuchsH:#FFE9D9;--moos:#3E8A4F;--moosT:#2E6E3D;--moosH:#E2F1E2;--honig:#F5BF3C;--honigH:#FFF2CC;
 --nacht:#171B3A;--nacht2:#242B5E;--himmel:#4B7BD8;--himmelH:#E3ECFB;--beere:#D0507A;--beereT:#7A2E48;--beereH:#FBE3EC;--lila:#8266D6;--lilaH:#ECE6FB;
 --radius:28px;--schatten:0 24px 60px -28px rgba(35,24,18,.35);--schatten-klein:0 10px 30px -14px rgba(35,24,18,.25);
 --glas:rgba(255,255,255,.72);--glas-rand:rgba(255,255,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--tinte);background:var(--grund);-webkit-font-smoothing:antialiased;line-height:1.5;font-weight:500}
h1,h2,h3,.d{font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.025em;line-height:1.04;font-weight:800;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font-family:inherit}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--fuchs);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.huelle{max-width:1280px;margin:0 auto;padding:0 32px}
.huelle>*{min-width:0}

/* Knöpfe — immer mindestens 44 px hoch */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:800;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.dunkel{background:var(--tinte);color:#fff;box-shadow:0 12px 28px -12px rgba(35,24,18,.55)}
.btn.fuchs{background:linear-gradient(135deg,#FF9A57,var(--fuchs) 60%,#E5671C);color:#fff;box-shadow:0 14px 32px -10px rgba(240,122,46,.6)}
.btn.hell{background:#fff;color:var(--tinte);border:1.5px solid var(--linie);box-shadow:0 6px 16px -10px rgba(35,24,18,.25)}
.btn.glas{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.klein{min-height:44px;padding:9px 16px;font-size:14px}
.btn.rot{background:var(--beereH);color:var(--beereT)}
.btn.rund{width:44px;height:44px;padding:0;border-radius:50%}
.btn.breit{width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsT)}
.eyebrow:before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor;opacity:.7}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;white-space:nowrap;line-height:1.2}
.chip.g{background:var(--moosH);color:var(--moosT)} .chip.o{background:var(--honigH);color:#7A5200} .chip.b{background:var(--beereH);color:var(--beereT)} .chip.n{background:var(--linie2);color:var(--tinte2)} .chip.h{background:var(--himmelH);color:#264C8F}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo img{width:42px;height:42px;border-radius:13px;box-shadow:0 6px 16px -4px rgba(23,27,58,.35)}
.phone{border-radius:44px;padding:9px;background:#15110E;box-shadow:0 40px 80px -24px rgba(23,27,58,.55),inset 0 0 0 2px #3a302a}
.phone img{width:100%;height:auto;border-radius:36px;aspect-ratio:414/900;object-fit:cover}
.glaskarte{background:var(--glas);border:1px solid var(--glas-rand);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--schatten-klein)}

/* ───────── Bewegung mit Maß ───────── */
/* Einblenden beim Scrollen: nur, wenn das Skript läuft (html.js) — ohne Skript ist alles sofort da. */
.js .auf{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .auf.sichtbar{opacity:1;transform:none}
.js .auf.v2{transition-delay:.12s}.js .auf.v3{transition-delay:.24s}.js .auf.v4{transition-delay:.36s}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(var(--dreh,0deg))}50%{transform:translateY(-14px) rotate(var(--dreh,0deg))}}
@keyframes gluehen{0%,100%{opacity:0;transform:translate(0,0) scale(.5)}40%{opacity:1}60%{opacity:.9;transform:translate(6px,-18px) scale(1)}}
@keyframes hoeren{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes lesen{0%,4%{background:transparent;color:inherit}7%{background:var(--honigH);color:var(--tinte)}12%,62%{background:var(--moosH);color:var(--moosT)}70%,100%{background:transparent;color:inherit}}
@keyframes blinzeln{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes wippen{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.schwebt{animation:schweben 7s ease-in-out infinite}
.schwebt.s2{animation-duration:8.5s;animation-delay:-2s}.schwebt.s3{animation-duration:9.5s;animation-delay:-4s}
.gluehen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gluehen i{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 12px 4px rgba(255,222,120,.7);animation:gluehen 6s ease-in-out infinite;opacity:0}
.hoerbalken{display:inline-flex;gap:3px;align-items:center;height:18px}
.hoerbalken i{width:3px;height:18px;border-radius:3px;background:currentColor;transform-origin:center;animation:hoeren 1.1s ease-in-out infinite}
.hoerbalken i:nth-child(2){animation-delay:.15s}.hoerbalken i:nth-child(3){animation-delay:.3s}.hoerbalken i:nth-child(4){animation-delay:.45s}.hoerbalken i:nth-child(5){animation-delay:.6s}
.vorlesen{display:flex;flex-wrap:wrap;gap:8px 10px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.01em}
.vorlesen span{padding:2px 12px;border-radius:14px;animation:lesen 9s ease-in-out infinite;animation-delay:calc(var(--n) * .75s + .6s)}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .auf{opacity:1;transform:none}
 .vorlesen span{background:var(--moosH);color:var(--moosT)}
 .gluehen i{opacity:.8}
 .hoerbalken i{transform:scaleY(.6)}
}

/* ───────── Startseite ───────── */
.kopf{position:relative;z-index:20;padding:14px 0;transition:background .3s,box-shadow .3s}
.skript .kopf{position:sticky;top:0}
.kopf .zeile{display:flex;align-items:center;gap:26px}
.kopf nav{display:flex;gap:4px;font-weight:700;font-size:15px}
.kopf nav a{padding:10px 14px;border-radius:999px;color:rgba(255,255,255,.82);transition:background .2s,color .2s}
.kopf nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.kopf .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.kopf .logo{color:#fff}
.kopf.hell{background:rgba(255,249,241,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
.kopf.hell .logo{color:var(--tinte)}
.kopf.hell nav a{color:var(--tinte2)}
.kopf.hell nav a:hover{background:var(--fuchsH);color:var(--fuchsT)}
.kopf.hell .btn.glas{background:#fff;color:var(--tinte);border-color:var(--linie)}
.buehne-hoehle{position:relative;background:var(--nacht) url(/bilder/hoehle-4.jpg) center 35%/cover no-repeat;color:#fff;margin-top:-76px;padding-top:76px;border-radius:0 0 56px 56px;overflow:hidden;isolation:isolate}
.buehne-hoehle:before{content:"";position:absolute;inset:0;z-index:-1;background:
 linear-gradient(90deg,rgba(23,27,58,.94) 0%,rgba(23,27,58,.82) 38%,rgba(23,27,58,.35) 70%,rgba(23,27,58,.25) 100%),
 linear-gradient(180deg,rgba(23,27,58,.55),transparent 30%,transparent 70%,rgba(23,27,58,.75))}
.buehne-hoehle:after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;background:linear-gradient(180deg,transparent,rgba(23,27,58,.6))}
.held{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:56px 0 96px;position:relative}
.held>*{min-width:0}
.held .pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:999px;padding:7px 16px 7px 8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.92)}
.held .pill b{background:var(--honig);color:var(--nacht);border-radius:999px;padding:4px 10px;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.held h1{font-size:clamp(46px,6.6vw,96px);margin:26px 0 22px;line-height:.96;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.held h1 .u{color:var(--honig);position:relative;white-space:nowrap}
.held h1 .u:after{content:"";position:absolute;left:2px;right:2px;bottom:.04em;height:.14em;border-radius:99px;background:linear-gradient(90deg,var(--fuchs),var(--honig));opacity:.9;z-index:-1}
.held p.lead{font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.84);font-weight:600;max-width:560px;line-height:1.55}
.laeden{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.laden{display:flex;align-items:center;gap:12px;background:#fff;color:var(--tinte);border-radius:18px;padding:10px 20px 10px 14px;min-height:56px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transition:transform .18s}
.laden:hover{transform:translateY(-2px)}
.laden small{display:block;font-size:11px;color:var(--tinte2);font-weight:700;line-height:1.2;letter-spacing:.02em}
.laden b{font-size:18px;font-weight:800;line-height:1.15;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.laden svg{width:28px;height:28px;color:var(--tinte)}
.beweis{display:flex;gap:10px 22px;margin-top:30px;color:rgba(255,255,255,.8);font-weight:700;font-size:14px;flex-wrap:wrap}
.beweis span{display:flex;gap:8px;align-items:center}
.beweis svg{color:var(--honig);width:18px;height:18px}
.buehne{position:relative;height:660px;perspective:1200px}
.buehne .phone{position:absolute;will-change:transform}
.buehne .p1{left:2%;top:130px;width:36%;--dreh:-8deg;z-index:1}
.buehne .p2{left:31%;top:10px;width:40%;--dreh:0deg;z-index:3}
.buehne .p3{right:0;top:150px;width:35%;--dreh:7deg;z-index:2}
.buehne .schein{position:absolute;left:20%;top:20%;width:60%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,191,60,.45),transparent);filter:blur(30px);z-index:0}
.toast{position:absolute;z-index:5;border-radius:20px;padding:12px 18px 12px 12px;display:flex;gap:12px;align-items:center;font-weight:700;font-size:14px;line-height:1.3;color:var(--tinte);background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 50px -16px rgba(0,0,0,.45)}
.toast .kreis{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none}
.toast small{display:block;color:var(--tinte2);font-weight:600;font-size:12px}
.toast .hoerbalken{color:var(--moos)}

.zahlenband{margin-top:-36px;position:relative;z-index:2}
.zahlenband .karte{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--linie);border-radius:26px;box-shadow:var(--schatten);overflow:hidden}
.zahlenband .z{padding:24px 26px;display:flex;gap:16px;align-items:center;border-left:1px solid var(--linie)}
.zahlenband .z:first-child{border-left:0}
.zahlenband .z .ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none}
.zahlenband .z b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:30px;font-weight:800;display:block;letter-spacing:-.03em;line-height:1}
.zahlenband .z small{font-size:13px;color:var(--tinte2);font-weight:700;display:block;margin-top:5px}

.abschnitt{padding:96px 0 40px}
.abschnitt .kopfzeile{max-width:720px}
.abschnitt h2{font-size:clamp(34px,4.4vw,58px);margin:14px 0 14px}
.abschnitt .lead{font-size:clamp(16px,1.3vw,19px);color:var(--tinte2);font-weight:600;max-width:640px}
.abschnitt.mitte .kopfzeile{margin:0 auto;text-align:center}
.abschnitt.mitte .lead{margin:0 auto}
.abschnitt.mitte .eyebrow:before{display:none}

/* So geht's — drei Schritte + Wort-für-Wort */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:28px;position:relative;box-shadow:var(--schatten-klein)}
.schritt .nr{position:absolute;right:22px;top:18px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:56px;font-weight:800;color:var(--linie);line-height:1;letter-spacing:-.05em}
.schritt .ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px}
.schritt .ic svg{width:26px;height:26px}
.schritt h3{font-size:22px;margin-bottom:8px}
.schritt p{font-size:15px;color:var(--tinte2);font-weight:600}
.leseprobe{margin-top:22px;background:linear-gradient(160deg,#FFFDF8,#FFF3E4);border:1px solid var(--linie);border-radius:var(--radius);padding:34px 40px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;box-shadow:var(--schatten-klein);position:relative;overflow:hidden}
.leseprobe:before{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,191,60,.35),transparent)}
.leseprobe .lo{position:relative}
.leseprobe .zeile1{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--moosT);display:flex;gap:10px;align-items:center;margin-bottom:14px}
.leseprobe .legende{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:13px;font-weight:700;color:var(--tinte2)}
.leseprobe .legende i{display:inline-block;width:14px;height:14px;border-radius:5px;vertical-align:-2px;margin-right:6px}
.leseprobe .fuchs{width:150px;height:150px;border-radius:40px;background:#fff url(/bilder/klein/app-symbol-320.jpg) center/cover;box-shadow:var(--schatten);position:relative;animation:wippen 6s ease-in-out infinite;flex:none}
.leseprobe .fuchs .blase{position:absolute;left:-30px;top:-26px;background:#fff;border:1px solid var(--linie);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:var(--schatten-klein)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:18px;margin-top:44px}
.kachel{background:#fff;border-radius:var(--radius);border:1px solid var(--linie);padding:28px;position:relative;overflow:hidden;box-shadow:var(--schatten-klein);transition:transform .25s ease,box-shadow .25s ease}
.kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.kachel h3{font-size:26px}
.kachel p{font-size:15px;color:var(--tinte2);font-weight:600;margin-top:8px}
.kachel .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.kachel .ic svg{width:24px;height:24px}
.kachel .glas{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:14px 18px}
.kachel.bild{padding:0;border:0;background-size:cover;background-position:center;min-height:300px}
.kachel.gross{grid-column:span 7;grid-row:span 2;background:linear-gradient(160deg,#FFF6E8,#FFE3C8)}
.kachel.gross .phone{position:absolute;right:36px;top:34px;width:240px;--dreh:4deg}
.kachel.gross p{max-width:300px}
.kachel.abc{grid-column:span 5;grid-row:span 2;background-image:url(/bilder/mittel/fach-abc.jpg)}
.kachel.vier{grid-column:span 4}
.kachel.nacht{background:radial-gradient(120% 120% at 100% 0%,#2A3270,var(--nacht) 60%);color:#fff;border:0}
.kachel.nacht p{color:rgba(255,255,255,.75)}
.kachel.nacht h3{color:#fff}
.kachel.schreiben{background-image:url(/bilder/mittel/fach-schreiben.jpg)}
.kachel .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.kachel .tags span{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:var(--linie2);color:var(--tinte2)}

/* Fächer-Medaillons */
.medaillons{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;margin-top:40px}
.medaillon{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-weight:800;font-size:14px}
.medaillon .rund{width:100%;aspect-ratio:1;border-radius:50%;padding:5px;background:#fff;box-shadow:var(--schatten-klein);border:3px solid var(--f,var(--fuchs));transition:transform .25s}
.medaillon:hover .rund{transform:translateY(-4px) scale(1.03)}
.medaillon .rund img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.medaillon span{display:block}

/* Für Eltern */
.eltern{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-top:44px}
.eltern .liste{display:grid;gap:14px}
.eltern .punkt{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--linie);border-radius:22px;padding:18px 20px;box-shadow:var(--schatten-klein)}
.eltern .punkt .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.eltern .punkt b{display:block;font-size:16px;margin-bottom:2px}
.eltern .punkt p{font-size:14px;color:var(--tinte2);font-weight:600}
.eltern .szene{position:relative;height:560px}
.eltern .szene .hintergrund{position:absolute;inset:30px 20px 30px 60px;border-radius:44px;background:url(/bilder/klein/hoehle-tag-4.jpg) center/cover;box-shadow:var(--schatten)}
.eltern .szene .phone{position:absolute;left:0;top:0;width:250px;--dreh:-5deg}
.eltern .szene .karte{position:absolute;right:0;bottom:50px;width:250px;background:#fff;border-radius:22px;padding:16px 18px;box-shadow:var(--schatten);font-size:14px;font-weight:700}
.eltern .szene .karte small{display:block;color:var(--tinte2);font-weight:600;font-size:12px;margin-top:4px}
.eltern .szene .karte .zeile{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.eltern .szene .karte .zeile:last-child{margin:0}
.eltern .szene .karte .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}

/* Für Schulen */
.schulband{margin-top:96px;background:radial-gradient(120% 140% at 100% 0%,#2C3478,var(--nacht) 55%);border-radius:48px;padding:72px 72px 0;color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:end;overflow:hidden;position:relative}
.schulband>*{min-width:0}
.schulband .text{padding-bottom:72px}
.schulband .eyebrow{color:var(--honig)}
.schulband h2{color:#fff;font-size:clamp(34px,4vw,56px);margin:14px 0 14px}
.schulband .lead{color:rgba(255,255,255,.78);font-size:18px;font-weight:600}
.schulband ul{list-style:none;display:grid;gap:16px;margin:30px 0 34px}
.schulband li{display:flex;gap:14px;font-size:15px;font-weight:600;color:rgba(255,255,255,.78)}
.schulband li b{color:#fff;display:block;font-size:16px}
.schulband li .ic{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex:none;color:var(--honig)}
.schulband .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.browser{border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -10px 90px -20px rgba(0,0,0,.6);overflow:hidden;margin-right:-72px;transform:translateY(1px)}
.browser .leiste{height:40px;background:#F3EEE8;display:flex;align-items:center;gap:8px;padding:0 16px}
.browser .leiste i{width:11px;height:11px;border-radius:50%;background:#E0D6CB}
.browser .leiste i:nth-child(1){background:#F7B0A4}.browser .leiste i:nth-child(2){background:#F6D98A}.browser .leiste i:nth-child(3){background:#A6DBA6}
.browser .leiste span{margin-left:14px;background:#fff;border-radius:8px;padding:3px 14px;font-size:12px;font-weight:700;color:var(--tinte2)}

/* Schluss */
.schluss{margin:96px 0 40px;background:linear-gradient(160deg,#FFF3E4,#FFE6CF);border:1px solid var(--linie);border-radius:48px;padding:64px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;position:relative;overflow:hidden}
.schluss:before{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,191,60,.45),transparent)}
.schluss>*{position:relative;min-width:0}
.schluss img{width:150px;height:150px;border-radius:44px;box-shadow:var(--schatten)}
.schluss h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:10px}
.schluss p{font-size:17px;color:var(--tinte2);font-weight:600}
.schluss .laeden{margin:0;flex-direction:column}
.schluss .laden{box-shadow:var(--schatten-klein)}
.fuss{padding:30px 0 60px;color:var(--tinte2);font-weight:600;font-size:14px;display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}
.fuss .r{margin-left:auto;display:flex;gap:6px 22px;flex-wrap:wrap}
.fuss a:hover{color:var(--fuchsT)}

/* ───────── Anmelden / Einladung ───────── */
.geteilt{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;min-height:100dvh}
.geteilt>*{min-width:0}
.geteilt .bildseite{margin:16px;border-radius:40px;background:var(--nacht) url(/bilder/hoehle-4.jpg) center 30%/cover;position:relative;overflow:hidden;min-height:520px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:36px}
.geteilt .bildseite:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,27,58,.9),rgba(23,27,58,.15) 55%,rgba(23,27,58,.35));z-index:0}
.geteilt .bildseite>*{position:relative;z-index:2}
.geteilt .bildseite .logo{color:#fff}
.geteilt .bildseite .zitat{max-width:min(480px,64%)}
.geteilt .bildseite .zitat h2{font-size:clamp(28px,2.8vw,40px);color:#fff;margin-bottom:14px}
.geteilt .bildseite .zitat p{color:rgba(255,255,255,.8);font-size:16px;font-weight:600}
.geteilt .bildseite .punkte{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.geteilt .bildseite .punkte span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px 8px 10px;font-size:13px;font-weight:700}
.geteilt .bildseite .punkte svg{color:var(--honig);width:16px;height:16px}
.geteilt .bildseite .vorschau{position:absolute;right:-30px;top:48px;width:min(250px,32%);--dreh:6deg;z-index:1}
.formular{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(24px,6vw,96px);max-width:680px;width:100%}
.formular .karte{background:#fff;border:1px solid var(--linie);border-radius:32px;padding:40px;box-shadow:var(--schatten)}
.formular .logo{margin-bottom:34px}
.formular .logo img{width:48px;height:48px;border-radius:15px}
.formular h1{font-size:clamp(32px,3.4vw,44px);margin:12px 0 8px}
.formular .unter{color:var(--tinte2);font-weight:600;font-size:16px;margin-bottom:28px}
.formular .zeile{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:16px;flex-wrap:wrap}
.formular .hilfe{font-weight:600;color:var(--tinte2);font-size:14px;max-width:300px}
.formular .sicher{display:flex;gap:12px;align-items:center;margin-top:22px;padding:14px 16px;border-radius:18px;background:var(--grund);border:1px solid var(--linie);font-weight:600;color:var(--tinte2);font-size:13px}
.formular .sicher svg{color:var(--moos)}
.formular .rollen{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
label.feld{display:block;margin-bottom:16px;font-weight:800;font-size:14px;color:var(--tinte)}
label.feld .tipp,legend .tipp{font-weight:600;color:var(--blass);font-size:12px;margin-left:6px}
input,select,textarea{display:block;width:100%;margin-top:8px;background:#fff;border:1.5px solid #E5D9CA;border-radius:16px;padding:14px 16px;min-height:50px;font:600 15px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--tinte);transition:border-color .18s,box-shadow .18s}
input::placeholder,textarea::placeholder{color:#B7A798;font-weight:500}
input:focus,select:focus,textarea:focus{border-color:var(--fuchs);box-shadow:0 0 0 4px var(--fuchsH);outline:0}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F5B4E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--moos);display:inline-block}
input[type=date]{min-height:50px}
textarea{min-height:130px;resize:vertical;line-height:1.5}
.feldgruppe{position:relative}
.feldgruppe svg.i{position:absolute;left:16px;bottom:15px;color:var(--blass);pointer-events:none}
.feldgruppe input{padding-left:46px}
.fehler{display:flex;gap:10px;align-items:flex-start;background:var(--beereH);color:var(--beereT);border-radius:16px;padding:12px 16px;font-weight:700;font-size:14px;margin-bottom:18px;border:1px solid rgba(208,80,122,.25)}
.fehler svg{flex:none;margin-top:1px}
.gut{background:var(--moosH);color:#24592F;border-radius:20px;padding:16px 18px;font-weight:700;font-size:14px;margin-bottom:20px;border:1px solid rgba(62,138,79,.25)}
.gut .kopierfeld input{word-break:break-all;overflow:hidden;text-overflow:ellipsis}
.kopierfeld{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kopierfeld input{margin:0;flex:1;min-width:200px;background:#fff}
.staerke{height:6px;border-radius:99px;background:var(--linie);margin-top:10px;overflow:hidden}
.staerke i{display:block;height:100%;width:0;border-radius:99px;background:var(--moos);transition:width .3s,background .3s}

/* ───────── App-Rahmen (hinter der Anmeldung) ───────── */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;min-height:100dvh}
.app>*{min-width:0}
.seite{background:#fff;border-right:1px solid var(--linie);padding:20px 16px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto}
.seite .logo{margin:4px 8px 22px;font-size:20px}
.seite .logo img{width:36px;height:36px;border-radius:11px}
.seite .gruppe{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blass);margin:16px 12px 6px}
.seite .p{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:44px;border-radius:14px;font-weight:700;font-size:15px;color:var(--tinte2);transition:background .18s,color .18s}
.seite .p:hover{background:var(--grund);color:var(--tinte)}
.seite .p.an{background:var(--fuchsH);color:var(--fuchsT)}
.seite .klasse{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:44px;border-radius:14px;font-weight:700;font-size:14px;color:var(--tinte2)}
.seite .klasse:hover{background:var(--grund)}
.seite .klasse.an{background:var(--grund);color:var(--tinte)}
.seite .klasse i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,#FF9A57,var(--fuchs))}
.seite .klasse.an i{background:linear-gradient(135deg,#5B8FE8,var(--himmel))}
.seite .wer{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;border:1px solid var(--linie);background:var(--grund)}
.seite .wer .av{width:38px;height:38px;border-radius:50%;background:#fff url(/bilder/klein/wort-eule.png) center/cover;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie)}
.seite .wer b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.seite .wer small{font-size:12px;color:var(--tinte2);font-weight:600}
.seite .wer form{margin-left:auto}
.seite .wer button{background:none;border:0;color:var(--blass);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
.seite .wer button:hover{background:#fff;color:var(--beere)}
.seite .app-hinweis{margin-top:14px;padding:14px;border-radius:18px;background:linear-gradient(160deg,#FFF3E4,#FFE6CF);font-size:13px;font-weight:700;display:flex;gap:10px;align-items:center;color:var(--tinte)}
.seite .app-hinweis img{width:34px;height:34px;border-radius:10px}
.seite .app-hinweis small{display:block;font-weight:600;color:var(--tinte2);font-size:12px}
.haupt{padding:28px 36px 72px;min-width:0;background:var(--grund)}
.haupt>*{min-width:0}
.pfad{font-weight:700;color:var(--blass);font-size:14px;margin-bottom:22px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pfad b{color:var(--tinte)}
.pfad svg{width:14px;height:14px;color:var(--linie)}
.titel{display:flex;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.titel h1{font-size:clamp(30px,3.4vw,42px)}
.titel .unter{font-size:15px;font-weight:600;color:var(--tinte2);margin-top:8px}
.titel .r{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--linie);border-radius:24px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--schatten-klein);display:flex;flex-direction:column;gap:10px}
.kpi:before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--kpi,var(--fuchsH));opacity:.55}
.kpi>*{position:relative}
.kpi small{font-size:13px;font-weight:700;color:var(--tinte2);display:flex;gap:10px;align-items:center}
.kpi small .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--kpi,var(--fuchsH));color:var(--kpiT,var(--fuchsT))}
.kpi small .ic svg{width:18px;height:18px}
.kpi b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:36px;font-weight:800;display:block;letter-spacing:-.03em;line-height:1.05}
.kpi b span{font-size:20px;color:var(--blass);font-weight:700}
.kpi .funken{position:absolute;right:16px;bottom:14px;width:90px;height:34px}
.kpi .funken polyline{fill:none;stroke:var(--kpiT,var(--fuchs));stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kpi .funken path{fill:var(--kpiT,var(--fuchs));opacity:.12}
.kpi .tendenz{position:absolute;right:16px;top:16px}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.zwei>*{min-width:0}
.tafel{background:#fff;border:1px solid var(--linie);border-radius:26px;overflow:hidden;box-shadow:var(--schatten-klein)}
.tafel .kopf{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--linie);flex-wrap:wrap;position:static;background:none;box-shadow:none}
.tafel .kopf h3{font-size:19px}
.tafel .kopf .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.leer{padding:44px 24px;text-align:center;color:var(--tinte2);font-weight:600;display:grid;gap:10px;justify-items:center}
.leer img{width:84px;height:84px;border-radius:26px;box-shadow:var(--schatten-klein)}
.leer b{color:var(--tinte);font-size:17px}
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blass);text-align:left;padding:12px 12px;white-space:nowrap}
th:first-child,td:first-child{padding-left:20px}th:last-child,td:last-child{padding-right:16px}
td{padding:13px 12px;border-top:1px solid var(--linie2);font-size:14px;font-weight:600;color:var(--tinte2);vertical-align:middle}
tbody tr:hover td{background:#FFFCF7}
.kind{display:flex;align-items:center;gap:12px;color:var(--tinte);font-weight:800;font-size:15px;min-width:180px}
.kind>div{min-width:0}.kind .name{white-space:nowrap}
.kind .av{width:40px;height:40px;border-radius:50%;background:#FFF4E4 center/cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie);flex:none}
.kind .av.eckig{border-radius:13px}
.kind small{display:block;font-size:12px;color:var(--blass);font-weight:600}
.faecher{display:flex;gap:6px}
.faecher span{width:30px;height:8px;border-radius:99px;background:#F1E9DE;overflow:hidden}
.faecher span i{display:block;height:100%;border-radius:99px}
.ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.ring span{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--tinte)}
.box{background:#fff;border:1px solid var(--linie);border-radius:26px;padding:22px;margin-bottom:18px;box-shadow:var(--schatten-klein)}
.box h3{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.box h3 .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.box h3 .ic svg{width:18px;height:18px}
.box p{font-size:14px;color:var(--tinte2);font-weight:600}
.box .nr{width:30px;height:30px;border-radius:10px;background:var(--tinte);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;flex:none}
.ha{display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;background:var(--grund);margin-bottom:10px;border:1px solid var(--linie2)}
.ha img{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:none}
.ha b{display:block;font-size:15px;line-height:1.2;color:var(--tinte)}
.ha small{font-size:12px;font-weight:600;color:var(--tinte2)}
.ha .bal{height:6px;border-radius:99px;background:#EDE3D6;margin-top:8px;overflow:hidden}
.ha .bal i{display:block;height:100%;background:linear-gradient(90deg,#5DAA6E,var(--moos));border-radius:99px}
.ha .zahl{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:16px;font-weight:800;white-space:nowrap}
.hinweis{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--beereH);font-size:14px;font-weight:600;color:var(--beereT);margin-bottom:8px}
.hinweis b{color:inherit}
.hinweis.b{background:var(--himmelH);color:#264C8F}
.balken{height:8px;border-radius:99px;background:#F1E9DE;overflow:hidden;display:block;width:100%}
.balken i{display:block;height:100%;background:linear-gradient(90deg,#5DAA6E,var(--moos));border-radius:99px}
.klassenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.klassenkarte{background:#fff;border:1px solid var(--linie);border-radius:26px;overflow:hidden;box-shadow:var(--schatten-klein);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.klassenkarte:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.klassenkarte .bild{height:120px;background:center/cover;position:relative}
.klassenkarte .bild:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(23,27,58,.45))}
.klassenkarte .bild b{position:absolute;left:14px;bottom:12px;z-index:1;background:#fff;color:var(--tinte);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:22px;border-radius:14px;padding:5px 12px;box-shadow:var(--schatten-klein)}
.klassenkarte .text{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.klassenkarte .lehrer{font-weight:800;font-size:16px;color:var(--tinte);display:flex;align-items:center;gap:8px}
.klassenkarte .lehrer .av{width:26px;height:26px;border-radius:50%;background:var(--honigH) url(/bilder/klein/wort-eule.png) center/cover;flex:none}
.klassenkarte .stand{font-size:13px;font-weight:600;color:var(--tinte2)}
.klassenkarte form{display:flex;gap:8px;margin-top:6px}
.klassenkarte form select{margin:0;padding:8px 36px 8px 12px;font-size:13px;min-height:44px}
.lehrerliste{display:grid;gap:6px}
.lehrerliste .l{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--grund);font-weight:700;font-size:14px}
.lehrerliste .l .av{width:30px;height:30px;border-radius:50%;background:#fff url(/bilder/klein/wort-eule.png) center/cover;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie)}
.lehrerliste .l span.chip{margin-left:auto}
.faecherwahl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.faecherwahl label{position:relative;border-radius:20px;overflow:hidden;border:2px solid var(--linie);background:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.faecherwahl label:hover{transform:translateY(-2px)}
.faecherwahl img{width:100%;aspect-ratio:16/10;object-fit:cover}
.faecherwahl span{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;min-height:44px}
.faecherwahl span:after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--linie)}
.faecherwahl input{position:absolute;opacity:0;width:1px;height:1px}
.faecherwahl label:has(input:checked){border-color:var(--moos);box-shadow:0 0 0 4px var(--moosH)}
.faecherwahl label:has(input:checked) span:after{background:var(--moos) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/12px no-repeat;border-color:var(--moos)}
.faecherwahl label:has(input:focus-visible){outline:3px solid var(--fuchs);outline-offset:2px}
.reihe{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.reihe label.feld{flex:1;min-width:150px}
.rundenwahl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rundenwahl label{position:relative}
.rundenwahl input{position:absolute;opacity:0;width:1px;height:1px}
.rundenwahl span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:2px solid var(--linie);background:#fff;font-weight:800;cursor:pointer}
.rundenwahl label:has(input:checked) span{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.rundenwahl label:has(input:focus-visible) span{outline:3px solid var(--fuchs);outline-offset:2px}
.vorschau-phone{max-width:240px;margin:8px auto 0}
.willkommen{background:#fff;border:1px solid var(--linie);border-radius:32px;padding:48px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;box-shadow:var(--schatten);max-width:820px}
.willkommen img{width:120px;height:120px;border-radius:36px;box-shadow:var(--schatten)}
.willkommen h1{font-size:36px;margin-bottom:10px}
.willkommen p{color:var(--tinte2);font-weight:600;font-size:16px}
.willkommen .schritteklein{display:grid;gap:10px;margin-top:20px}
.willkommen .schritteklein div{display:flex;gap:12px;align-items:center;font-weight:700;font-size:14px}
.willkommen .schritteklein .nr{width:30px;height:30px;border-radius:10px;background:var(--fuchsH);color:var(--fuchsT);display:grid;place-items:center;font-weight:800;flex:none}
.oben-leiste{display:none}

/* ───────── Elternbrief (Bildschirm und Druck) ───────── */
.brief{max-width:800px;margin:20px auto 60px;display:grid;gap:20px;padding:0 16px}
.brief .blatt{background:#fff;border:1px solid var(--linie);border-radius:28px;padding:40px 44px;box-shadow:var(--schatten-klein);page-break-after:always;break-after:page;position:relative}
.brief .blatt .oben{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.brief h2{font-size:30px;margin:6px 0 10px}
.brief .blatt>p{font-weight:600;color:var(--tinte2)}
.brief ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.brief ol li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--tinte2);counter-increment:s}
.brief ol li:before{content:counter(s);width:28px;height:28px;border-radius:9px;background:var(--fuchsH);color:var(--fuchsT);display:grid;place-items:center;font-weight:800;flex:none;font-size:13px}
.brief .codekarte{margin:22px 0 16px;display:inline-flex;flex-direction:column;gap:4px;border:2px dashed var(--fuchs);border-radius:22px;padding:16px 26px;background:var(--fuchsH)}
.brief .codekarte small{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fuchsT)}
.brief .code{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:44px;font-weight:800;letter-spacing:.08em;color:var(--fuchsT);line-height:1.1}
.brief .klein{font-size:13px;color:var(--tinte2);font-weight:600;margin-top:12px}
.brief-leiste{position:sticky;top:0;z-index:10;background:rgba(255,249,241,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.brief-leiste .huelle{display:flex;gap:10px;align-items:center;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brief-leiste .hinweistext{color:var(--tinte2);font-weight:600;font-size:14px}
@media print{body{background:#fff}.nicht-drucken{display:none!important}.brief{margin:0;padding:0;gap:0;max-width:none}.brief .blatt{border:0;box-shadow:none;border-radius:0;padding:10mm 0}.brief .codekarte{background:#fff}}

/* ───────── Fehler / Datenschutz ───────── */
.fehlerseite{min-height:100vh;display:grid;place-items:center;padding:40px 20px;position:relative;overflow:hidden}
.fehlerseite .karte{background:#fff;border:1px solid var(--linie);border-radius:36px;padding:48px;max-width:560px;width:100%;text-align:center;box-shadow:var(--schatten);position:relative}
.fehlerseite img{width:128px;height:128px;border-radius:40px;margin:0 auto 22px;box-shadow:var(--schatten)}
.fehlerseite h1{font-size:clamp(30px,4vw,44px);margin:10px 0 12px}
.fehlerseite p{font-size:17px;color:var(--tinte2);font-weight:600;margin-bottom:26px}
.fehlerseite .code{display:inline-block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsT);background:var(--fuchsH);border-radius:999px;padding:6px 14px}
.fehlerseite .knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.text-seite{max-width:860px;margin:0 auto;padding:0 24px 80px}
.text-seite .kopfzeile{padding:56px 0 30px}
.text-seite h1{font-size:clamp(34px,4.6vw,56px);margin:12px 0 14px}
.text-seite .lead{font-size:18px;color:var(--tinte2);font-weight:600;max-width:640px}
.text-seite .karten{display:grid;gap:16px}
.text-seite .karte{background:#fff;border:1px solid var(--linie);border-radius:26px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:18px;box-shadow:var(--schatten-klein)}
.text-seite .karte .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none}
.text-seite .karte h3{font-size:20px;margin-bottom:8px}
.text-seite .karte p{font-size:15px;color:var(--tinte2);font-weight:600;line-height:1.6}
.text-seite .karte a,.text-seite .nachwort a{color:var(--fuchsT);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.text-seite .nachwort{margin-top:26px;font-weight:600;color:var(--tinte2);font-size:15px}
.text-seite .kurz{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.text-seite .kurz span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linie);border-radius:999px;padding:8px 14px 8px 10px;font-size:13px;font-weight:700;color:var(--tinte2)}
.text-seite .kurz svg{color:var(--moos);width:16px;height:16px}
.kopf.dunkel-text .logo{color:var(--tinte)}
.kopf.dunkel-text nav a{color:var(--tinte2)}
.kopf.dunkel-text .btn.glas{background:#fff;color:var(--tinte);border-color:var(--linie)}

/* ───────── Schmale Bildschirme ───────── */
@media (max-width:1180px){
 .kpis{grid-template-columns:repeat(2,1fr)}.zwei{grid-template-columns:1fr!important}.browser{margin-right:0}
 .medaillons{grid-template-columns:repeat(4,1fr)}
 .schulband{grid-template-columns:1fr;padding:56px 40px 0}.schulband .text{padding-bottom:0}.browser{margin-top:36px}
 .app{grid-template-columns:232px 1fr}
}
@media (max-width:980px){
 .held{grid-template-columns:1fr;padding:28px 0 80px;gap:28px}
 .buehne{height:520px;max-width:520px;width:100%;margin:0 auto}
 .kopf nav{display:none}
 .zahlenband .karte{grid-template-columns:repeat(2,1fr)}.zahlenband .z:nth-child(3){border-left:0}.zahlenband .z:nth-child(n+3){border-top:1px solid var(--linie)}
 .schritte{grid-template-columns:1fr}
 .leseprobe{grid-template-columns:1fr;padding:28px}.leseprobe .fuchs{justify-self:end;width:110px;height:110px;border-radius:30px}
 .bento{grid-template-columns:1fr 1fr}.kachel.gross,.kachel.abc,.kachel.vier{grid-column:span 2;grid-row:auto}
 .kachel.gross .phone{position:relative;right:auto;top:auto;width:190px;margin:22px auto -120px;--dreh:0deg}
 .eltern{grid-template-columns:1fr}.eltern .szene{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.eltern .szene .hintergrund{display:none}.eltern .szene .phone,.eltern .szene .karte{position:static;width:auto}
 .schluss{grid-template-columns:1fr;text-align:center;padding:44px 28px;justify-items:center}.schluss .laeden{flex-direction:row;justify-content:center}
 .geteilt{grid-template-columns:1fr}.geteilt .bildseite{min-height:0;margin:12px 12px 0;padding:24px;border-radius:28px}.geteilt .bildseite .vorschau{display:none}.geteilt .bildseite .zitat h2{font-size:26px}.geteilt .bildseite .punkte{display:none}
 .formular{padding:28px 16px 48px;max-width:none}.formular .karte{padding:28px 22px}.formular .logo{display:none}
 .app{grid-template-columns:1fr}
 .seite{position:sticky;top:0;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;z-index:20;border-right:0;border-bottom:1px solid var(--linie)}
 .seite .logo{margin:0 8px 0 0;font-size:18px}.seite .logo img{width:32px;height:32px}
 .seite .gruppe,.seite .app-hinweis{display:none}
 .seite .navi{order:3;flex-basis:100%;display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px;scrollbar-width:none}.seite .navi::-webkit-scrollbar{display:none}
 .seite .p,.seite .klasse{white-space:nowrap;padding:8px 12px;font-size:14px;flex:none;border:1px solid var(--linie)}
 .seite .p.an,.seite .klasse.an{border-color:transparent}
 .seite .wer{margin-left:auto;padding:4px;border:0;background:none;gap:6px}.seite .wer b,.seite .wer small{display:none}
 .haupt{padding:20px 16px 56px}
 .schulband{padding:40px 22px 0;border-radius:32px;margin-top:64px}
 .abschnitt{padding:64px 0 24px}
 .huelle{padding:0 16px}
 .faecherwahl{grid-template-columns:repeat(2,1fr)}
 .willkommen{grid-template-columns:1fr;padding:28px;justify-items:center;text-align:center}.willkommen .schritteklein div{text-align:left}
 .brief .blatt{padding:26px 22px}
 .text-seite .karte{grid-template-columns:1fr}
 .buehne-hoehle{border-radius:0 0 36px 36px}
}
@media (max-width:720px){
 /* Tabellen werden zu Karten — nichts scrollt waagerecht */
 table,tbody,tr,td{display:block}thead{display:none}
 tr{padding:12px 16px;border-top:1px solid var(--linie2);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
 tbody tr:hover td{background:none}
 td{padding:0;border:0;display:flex;align-items:center;gap:8px}
 td:first-child{flex-basis:100%}
 td[data-l]:before{content:attr(data-l);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blass)}
 td.aktion{margin-left:auto}
 .kind .name{white-space:normal}
 .kpis{gap:10px}.kpi{padding:14px 16px;border-radius:20px}.kpi b{font-size:28px}.kpi .funken{width:64px;height:26px;right:12px;bottom:12px}
 .titel h1{font-size:30px}
 .medaillons{gap:10px}.medaillon{font-size:12px}
 .vorlesen{font-size:24px;gap:6px}
}
@media (max-width:460px){
 .kopf .r .versteckt-klein{display:none}
 .held h1{font-size:44px}
 .buehne{height:420px}
 .laeden{width:100%}.laden{flex:1;min-width:150px}
 .zahlenband .z{padding:16px 14px;gap:10px}.zahlenband .z b{font-size:24px}.zahlenband .z .ic{width:38px;height:38px}
 .kachel{padding:22px}.kachel h3{font-size:22px}.kachel.gross .phone{width:180px}
 .kachel.bild{min-height:260px}
 .schluss img{width:110px;height:110px;border-radius:32px}
 .schluss .laeden{flex-direction:column;width:100%}
 .medaillons{grid-template-columns:repeat(4,1fr)}
 .kpis{grid-template-columns:1fr 1fr}
 .brief .code{font-size:32px}
 .leseprobe .fuchs{display:none}
 .fehlerseite .karte{padding:32px 22px}
 .eltern .szene{grid-template-columns:1fr}.eltern .szene .phone{max-width:220px;margin:0 auto}
}

/* ── 26.09.2026: Freigaben-Zähler, Aktualisieren, Bearbeiten-Klappen, DNS-Liste ── */
.navi .zahl{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--fuchs);color:#fff;font-size:12px;font-weight:800;display:inline-grid;place-items:center}
details.bearbeiten{margin-top:8px}
details.bearbeiten summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--linie);background:#fff;font-size:14px;font-weight:700}
details.bearbeiten summary::-webkit-details-marker{display:none}
details.bearbeiten[open] summary{background:var(--grund)}
details.bearbeiten .inhalt{margin-top:10px;padding:14px;border:1px solid var(--linie);border-radius:16px;background:var(--grund);display:grid;gap:10px;min-width:260px;text-align:left}
details.bearbeiten .reihe{display:flex;gap:8px;flex-wrap:wrap}
.dnsliste{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.dnsliste li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:var(--grund);font-size:14px}
.dnsliste li small{color:var(--tinte2);word-break:break-all;text-align:right}
.freigabe{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--linie)}
.freigabe .was{flex:1;min-width:220px}
.freigabe .was b{display:block}
.freigabe .was small{color:var(--tinte2)}
.freigabe form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.freigabe select{min-height:44px;border-radius:12px;border:1px solid var(--linie);padding:0 10px;font:inherit;max-width:200px}
/* Bearbeiten-Klappe rechtsbündig wie die Knöpfe darüber (26.09.2026, vom Inhaber: „muss weiter nach rechts") */
td details.bearbeiten{text-align:right}
td details.bearbeiten .inhalt{margin-left:auto;max-width:380px}
.anmelden-als{display:flex;justify-content:flex-end;margin-top:8px}
/* Vertretung: unübersehbar, solange die Verwaltung als jemand anderes angemeldet ist */
.vertretung{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-bottom:18px;border-radius:16px;background:var(--beereH);color:var(--beereT);font-weight:700}
.vertretung form{margin-left:auto}
.liste-klein{display:grid;gap:2px;padding:6px 10px 12px}
.liste-klein a,.liste-klein div{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px;border-radius:12px;font-size:14px}
.liste-klein a:hover{background:var(--grund)}
.liste-klein small{color:var(--tinte2);white-space:nowrap}
/* Seitenleiste nie quer scrollen (26.09.2026, am Bildschirm des Inhabers: Querbalken unter „Frau Mustermann") */
.seite{overflow-x:hidden}
.seite .wer > div{min-width:0}
/* Zugang anlegen: Link oder Startpasswort */
fieldset.weg{border:0;padding:0;margin:4px 0 12px;display:grid;gap:8px}
fieldset.weg legend{font-size:14px;font-weight:700;margin-bottom:6px}
.wahl{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--linie);border-radius:14px;background:#fff;cursor:pointer}
.wahl input{margin-top:4px;width:18px;height:18px;accent-color:var(--fuchs)}
.wahl b{display:block;font-size:14px}.wahl small{color:var(--tinte2);font-size:13px}
.wahl:has(input:checked){border-color:var(--fuchs);background:var(--fuchsH)}
.zugang-anlegen .kopierfeld input{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.pflicht{padding:14px 16px;border-radius:16px;background:var(--honigH);color:#7A5200;font-weight:700;margin-bottom:18px}
/* Lehrkräfte nach Klassen (26.09.2026) */
.suche-leiste{display:flex;gap:10px;align-items:center}.suche-leiste .feld{flex:1}
.stufe-marke{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--fuchs);color:#fff;font-weight:800;margin-right:10px;font-size:15px}
.klassen-marke{display:inline-grid;place-items:center;min-width:48px;height:40px;padding:0 10px;border-radius:12px;background:var(--fuchsH);color:var(--fuchsT);font-weight:800;font-size:16px}
.klassen-marke:hover{background:var(--fuchs);color:#fff}
.klein-auswahl{min-height:44px;border-radius:12px;border:1px solid var(--linie);padding:0 10px;font:inherit;max-width:200px}
/* Hausaufgabe: Kinder ankreuzen (26.09.2026) */
.kinderwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.kinderwahl label{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--linie);border-radius:12px;background:#fff;cursor:pointer;font-size:14px;font-weight:700}
.kinderwahl input{width:18px;height:18px;accent-color:var(--fuchs)}
.kinderwahl label:has(input:checked){border-color:var(--fuchs);background:var(--fuchsH)}
.kinderwahl small{color:var(--tinte2);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Hausaufgabe ansehen (26.09.2026) */
.ha-legende{margin:0 0 16px;color:var(--tinte2);font-size:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ha-legende .pk{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px}
.pk.sauber{background:var(--moos)}.pk.wackel{background:#E8912D}
.ha-kind{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:16px 18px;margin-bottom:14px;scroll-margin-top:20px}
.ha-kind.hervor{box-shadow:0 0 0 3px var(--moosH)}
.ha-kind .kopf{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.ha-kind .stand{display:flex;gap:6px;flex-wrap:wrap}
.ha-kind .rumpf{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media (max-width:900px){.ha-kind .rumpf{grid-template-columns:1fr}}
.buchstaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.buchstaben figure{margin:0;background:var(--grund);border-radius:14px;padding:6px;text-align:center}
.buchstaben svg{width:100%;aspect-ratio:1;display:block}
.buchstaben .vorlage{fill:none;stroke:#EADCC8;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.buchstaben .spur{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.buchstaben .sauber .spur{stroke:var(--moos)}.buchstaben .wackel .spur{stroke:#E8912D}
.buchstaben figcaption{font-size:12px;font-weight:800;color:var(--tinte2);margin-top:2px}
.runden{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.runden li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--grund);border-radius:12px;font-size:14px}
.runden li small{margin-left:auto;color:var(--tinte2)}
.leise{color:var(--tinte2);font-size:14px}
.bewertung fieldset{border:0;padding:0;margin:0 0 10px;display:flex;gap:6px;flex-wrap:wrap}
.bewertung legend{font-size:14px;font-weight:700;margin-bottom:6px}
.urteil{cursor:pointer;position:relative}.urteil input{position:absolute;opacity:0;left:0;top:0;width:1px;height:1px;margin:0}   /* verankert — sonst lagen sie rechts außerhalb der Seite */
.urteil span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linie);background:#fff;font-weight:800;font-size:14px}
.urteil input:checked + span{color:#fff}
.u-super input:checked + span{background:var(--moos);border-color:var(--moos)}
.u-gut input:checked + span{background:#4B7BD8;border-color:#4B7BD8}
.u-ueben input:checked + span{background:#E8912D;border-color:#E8912D}
.urteil input:focus-visible + span{outline:3px solid var(--fuchsH)}
.bewertung textarea{width:100%;border:1px solid var(--linie);border-radius:12px;padding:10px;font:inherit;resize:vertical}
.notizen{display:grid;gap:8px}
.notizen a{display:block;padding:10px 12px;border-radius:12px;background:var(--grund);font-size:14px}
.notizen a small{display:block;color:var(--tinte2)}

/* Kinderseite (26.09.2026): Name in der Klassenliste führt zum Kind */
a.name{color:inherit;text-decoration:none;border-bottom:2px solid var(--linie)}a.name:hover{color:var(--fuchsT);border-color:var(--fuchs)}
.kind.gross .av{width:64px;height:64px}
.kindnotiz{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--grund);border:1px solid var(--linie2);margin-bottom:10px;font-size:14px;font-weight:600;line-height:1.4}
/* Hausaufgaben-Übersicht (26.09.2026): fertige gruppiert, mit einem Klick beurteilen */
.ha-gruppe{border-top:1px solid var(--linie);padding:6px 0}
.ha-gruppe-kopf{display:flex;gap:10px;align-items:center;padding:10px 18px;flex-wrap:wrap}
.ha-gruppe-kopf img{border-radius:10px;object-fit:cover}
.ha-gruppe-kopf b{flex:1 1 180px;font-size:16px}
.ha-zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--linie2)}
.ha-zeile .kind{flex:1 1 200px;min-width:0}
.ha-zahlen{display:flex;gap:6px;flex-wrap:wrap}
.urteilknoepfe{display:flex;gap:6px;flex-wrap:wrap}
.urteilknoepfe .btn{border:1px solid var(--linie)}
.u-super{background:#FFF3C4;color:#7A5200}.u-super:hover{background:#FFE58A}
.u-gut{background:var(--moosH);color:var(--moosT)}.u-gut:hover{filter:brightness(.95)}
.u-ueben{background:#fff;color:var(--tinte2)}.u-ueben:hover{background:var(--grund)}
/* Dashboard: laufende Hausaufgaben in der schmalen Spalte — Text zuerst, Knöpfe darunter (vorher Wort für Wort umgebrochen) */
.box .ha{flex-wrap:wrap}
.box .ha>div[style*="flex:1"]{flex:1 1 150px!important}