/* 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{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}
}