/* PhysEdPrep Web UI (Design A) – Schriften: Barlow Condensed, Inter Tight (SIL OFL 1.1) */
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-800-italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* PhysEdPrep Kopf (Design A) – gekapselt mit .ppwh, robust gegen Theme-/Elementor-Stile */
.ppwh,.ppwh *,.ppwh-menue,.ppwh-menue *{box-sizing:border-box}
.ppwh{position:sticky;top:0;z-index:9990;width:100%;background:rgba(252,249,244,.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:2px solid transparent;transition:border-color .25s ease,box-shadow .25s ease;font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#0C2345;-webkit-font-smoothing:antialiased}
.admin-bar .ppwh{top:32px}
@media (max-width:782px){.admin-bar .ppwh{top:46px}}
@media (max-width:600px){.admin-bar .ppwh{top:0}}
.ppwh.ist-gescrollt{border-bottom-color:#0C2345;box-shadow:0 6px 18px -14px rgba(12,35,69,.6)}
.ppwh__in{width:min(1280px,100% - 2*var(--ppwh-gutter,16px));margin:0 auto;height:var(--ppwh-h,64px);display:flex;align-items:center;gap:12px}
@media (min-width:768px){.ppwh__in{--ppwh-gutter:32px}}
@media (min-width:1100px){.ppwh__in{--ppwh-gutter:48px;--ppwh-h:76px}}
.ppwh a,.ppwh-menue a{color:#0C2345;text-decoration:none;box-shadow:none;background:none;border:0;margin:0;letter-spacing:0;text-transform:none;font-style:normal}
.ppwh__marke{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;padding:0;border-radius:8px}
.ppwh .ppl,.ppwh-menue .ppl{--ppl-s:25px}
@media (min-width:1100px){.ppwh .ppl{--ppl-s:30px}}
.ppwh__by{display:block;padding-left:9px;border-left:2px solid rgba(12,35,69,.18);font:700 11px/1.2 "Inter Tight",system-ui,sans-serif;letter-spacing:.01em;color:#46546E;text-transform:none;font-style:normal;white-space:nowrap}
@media (min-width:1100px){.ppwh__by{font-size:12px}}
.ppwh__nav{display:none;gap:2px;margin-left:auto}
.ppwh__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:999px;font:700 15px/1.1 "Inter Tight",system-ui,sans-serif;white-space:nowrap;transition:background-color .2s ease}
.ppwh__nav a[aria-current="page"]{background:#F2E8DD;box-shadow:inset 0 0 0 2px #0C2345}
@media (hover:hover){.ppwh__nav a:hover{background:#F2E8DD;color:#0C2345}}
.ppwh__aktionen{margin-left:auto;display:flex;align-items:center;gap:8px}
.ppwh__knopf{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px!important;border-radius:999px!important;border:2.5px solid #0C2345!important;background:#D9FF57!important;color:#0C2345!important;font:800 15px/1.1 "Inter Tight",system-ui,sans-serif!important;white-space:nowrap;box-shadow:0 4px 0 #0C2345!important;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}
@media (hover:hover){.ppwh__knopf:hover{transform:translateY(-2px);box-shadow:0 6px 0 #0C2345!important}}
.ppwh__knopf:active{transform:translateY(3px);box-shadow:0 1px 0 #0C2345!important}
.ppwh__knopf--gross{min-height:56px;font-size:17px!important;width:100%}
.ppwh__knopf--weiss{background:#fff!important}
.ppwh__ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppwh__menue{display:inline-grid!important;place-items:center;width:46px;height:46px;min-height:46px;margin:0;padding:0!important;border-radius:14px!important;border:2.5px solid #0C2345!important;background:#fff!important;color:#0C2345!important;cursor:pointer;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
.ppwh__menue .ppwh__ic{width:22px;height:22px}
.ppwh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ppwh a:focus-visible,.ppwh button:focus-visible,.ppwh-menue a:focus-visible,.ppwh-menue button:focus-visible{outline:3px solid #2953A6!important;outline-offset:3px}
@media (max-width:399px){.ppwh .ppl{--ppl-s:22px}.ppwh__by{font-size:10px;padding-left:7px}.ppwh__marke{gap:7px}.ppwh__knopf{padding:0 12px!important;font-size:14px!important}.ppwh__in{gap:8px}.ppwh__aktionen{gap:6px}}
@media (min-width:1240px){.ppwh__nav{display:flex}.ppwh__aktionen{margin-left:8px}.ppwh__menue{display:none!important}}
.ppwh-menue{position:fixed;inset:0;z-index:99999;background:#FCF9F4;display:flex;flex-direction:column;padding:12px 16px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;font-family:"Inter Tight",system-ui,sans-serif;color:#0C2345}
.ppwh-menue[hidden]{display:none!important}
.ppwh-menue__kopf{display:flex;align-items:center;justify-content:space-between;min-height:52px}
.ppwh-menue__nav{display:grid;gap:2px;margin-top:18px}
.ppwh-menue__nav a{display:block;font:italic 800 30px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;padding:10px 0;border-bottom:2px solid rgba(12,35,69,.14)!important}
.ppwh-menue__unten{margin-top:auto;display:grid;gap:14px;padding-top:28px}
@media (prefers-reduced-motion:no-preference){.ppwh-menue:not([hidden]){animation:ppwh-ein .25s ease}}
@keyframes ppwh-ein{from{opacity:0}to{opacity:1}}
/* Logo */
.ppl{--ppl-text:#0C2345;display:inline-grid;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-style:italic;font-weight:800;font-size:var(--ppl-s,30px);line-height:.8;letter-spacing:-.012em;text-transform:uppercase;color:var(--ppl-text);text-decoration:none;white-space:nowrap}
.ppl--hell{--ppl-text:#fff}
.ppl__z1{display:block}
.ppl__ed{color:#D9FF57}
.ppl--auf-hell .ppl__ed{color:#C4EE2E;-webkit-text-stroke:.012em #0C2345;paint-order:stroke fill}
.ppl__z2{display:flex;align-items:flex-end;justify-content:space-between;margin-top:.02em}
.ppl__pfeife{height:.66em!important;width:auto!important;max-width:none!important;margin:0 0 .02em -.04em;transform:rotate(-4deg);display:inline-block}
.ppl__prep{color:#FF6A3D}

/* PhysEdPrep: gemeinsame Bausteine für Design A und B (02.11.2026)
   - Logo „PHYSED PREP“ (Typo und Pfeife wie LESSON PREP)
   - iPhone-Rahmen mit Dynamic Island
   - englische App-Screens im neuen LessonPrep-App-Stil (Haupt-App und Tools, Revision 03)
   Alle Maße im Telefon laufen über --pt = 1/390 der Bildschirmbreite (Container-Query-Einheit cqw),
   damit ein Screen bei jeder Telefongröße exakt gleich aussieht. */

/* ---------- iPhone-Rahmen ---------- */
.phone{--pw:300px;position:relative;width:var(--pw);flex:none;padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.17);background:linear-gradient(145deg,#1B2B4D,#08132A 55%,#1A2846);box-shadow:inset 0 0 0 calc(var(--pw)*.006) #3A4C70,0 calc(var(--pw)*.09) calc(var(--pw)*.16) calc(var(--pw)*-.05) rgba(8,24,52,.55)}
.phone__screen{position:relative;aspect-ratio:390/844;border-radius:calc(var(--pw)*.138);overflow:hidden;background:#fff;container-type:inline-size;isolation:isolate}

/* ---------- App-Grundlagen ---------- */
.app{--pt:calc(100cqw/390);--a-tinte:#13246B;--a-text:#2B3B82;--a-grau:#5A6595;--a-linie:#D9DFF0;--a-flaeche:#F4F6FC;--a-lime:#DCFF52;--a-lime-hell:#F3FFCC;--a-lime-rand:#C9EE45;--a-navy:#0C2345;
  position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:var(--a-text);font-family:"Inter Tight",system-ui,-apple-system,sans-serif;font-size:calc(15*var(--pt));line-height:1.3;text-align:left;-webkit-font-smoothing:antialiased}
.app *{box-sizing:border-box}
.app .ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app h1,.app h2,.app h3,.app h4{font-family:"Inter Tight",system-ui,sans-serif;font-style:normal;text-transform:none;letter-spacing:-.02em;color:var(--a-tinte);margin:0;line-height:1.08}
.app__status{flex:none;height:calc(52*var(--pt));display:flex;align-items:center;justify-content:space-between;padding:calc(6*var(--pt)) calc(30*var(--pt)) 0 calc(36*var(--pt));font-weight:700;font-size:calc(16*var(--pt));color:#0B1530;letter-spacing:-.01em}
.app__status svg{height:calc(12*var(--pt));width:auto}
.app__insel{position:absolute;left:50%;top:calc(11*var(--pt));width:calc(122*var(--pt));height:calc(35*var(--pt));border-radius:99px;background:#050A17;transform:translateX(-50%);z-index:5}
.app__kopf{flex:none;height:calc(76*var(--pt));display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--pt));padding:0 calc(16*var(--pt))}
.app__kopf h1{font-size:calc(27*var(--pt));font-weight:800}
.app__kopf small{display:block;font-size:calc(14*var(--pt));font-weight:500;color:var(--a-grau);letter-spacing:0;margin-bottom:calc(3*var(--pt))}
.app__zurueck{display:flex;align-items:center;gap:calc(6*var(--pt));font-size:calc(19*var(--pt));font-weight:600;color:var(--a-tinte)}
.app__zurueck .ic{width:calc(22*var(--pt));height:calc(22*var(--pt));stroke-width:2.4}
.app__logo{flex:none;display:grid;place-items:center;width:calc(80*var(--pt));height:calc(46*var(--pt));border-radius:calc(9*var(--pt));background:var(--a-navy)}
.app__logo .ppl{--ppl-s:calc(17*var(--pt))}
.app__frei{flex:none;display:inline-flex;align-items:center;gap:calc(6*var(--pt));height:calc(36*var(--pt));padding:0 calc(12*var(--pt));border-radius:99px;background:var(--a-lime);border:calc(1.5*var(--pt)) solid var(--a-navy);color:var(--a-navy);font-weight:800;font-size:calc(14*var(--pt));box-shadow:0 calc(3*var(--pt)) 0 var(--a-navy)}
.app__frei .ic{width:calc(16*var(--pt));height:calc(16*var(--pt))}
.app__inhalt{flex:1;min-height:0;overflow:hidden;padding:0 calc(16*var(--pt)) calc(10*var(--pt));display:flex;flex-direction:column;gap:calc(11*var(--pt))}
.app__abschnitt{font-size:calc(19*var(--pt));font-weight:800;margin-top:calc(3*var(--pt))}
.app__nav{flex:none;height:calc(82*var(--pt));display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding:calc(8*var(--pt)) calc(8*var(--pt)) 0;border-top:calc(1*var(--pt)) solid var(--a-linie);background:#fff;position:relative}
.app__nav::after{content:"";position:absolute;left:50%;bottom:calc(8*var(--pt));width:calc(134*var(--pt));height:calc(5*var(--pt));border-radius:9px;background:#0B1530;transform:translateX(-50%)}
.app__nav span{display:grid;justify-items:center;gap:calc(3*var(--pt));font-size:calc(11.5*var(--pt));font-weight:500;color:var(--a-text)}
.app__nav i{display:grid;place-items:center;width:calc(56*var(--pt));height:calc(30*var(--pt));border-radius:99px}
.app__nav .ic{width:calc(23*var(--pt));height:calc(23*var(--pt))}
.app__nav .ist-aktiv{font-weight:800;color:var(--a-tinte)}
.app__nav .ist-aktiv i{background:var(--a-lime)}

/* Bausteine */
.a-suche{display:flex;align-items:center;gap:calc(10*var(--pt));height:calc(44*var(--pt));padding:0 calc(14*var(--pt));border:calc(1.5*var(--pt)) solid var(--a-linie);border-radius:99px;color:var(--a-grau);font-size:calc(14.5*var(--pt))}
.a-suche .ic{width:calc(19*var(--pt));height:calc(19*var(--pt));color:var(--a-tinte)}
.a-schalter{display:grid;grid-template-columns:1.25fr 1fr;padding:calc(4*var(--pt));border-radius:calc(14*var(--pt));background:var(--a-flaeche);border:calc(1*var(--pt)) solid var(--a-linie)}
.a-schalter span{display:grid;place-items:center;height:calc(36*var(--pt));border-radius:calc(10*var(--pt));font-size:calc(12.5*var(--pt));font-weight:700;color:var(--a-text);text-align:center;line-height:1.1}
.a-schalter .ist-aktiv{background:var(--a-lime);color:var(--a-navy);font-weight:800}
.a-karte{border:calc(1.5*var(--pt)) solid var(--a-linie);border-radius:calc(16*var(--pt));background:#fff}
.a-weiter{display:flex;align-items:center;gap:calc(12*var(--pt));padding:calc(8*var(--pt))}
.a-weiter__bild{position:relative;flex:none;width:calc(86*var(--pt));height:calc(58*var(--pt));border-radius:calc(10*var(--pt));overflow:hidden;background:#E5D1BE}
.a-weiter__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-weiter__bild img+img{inset:auto auto -6% 30%;width:auto;height:118%;object-fit:contain}
.a-weiter b{display:block;font-size:calc(16*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-weiter small{display:block;font-size:calc(12.5*var(--pt));color:var(--a-text)}
.a-weiter .ic{margin-left:auto;width:calc(20*var(--pt));height:calc(20*var(--pt));color:var(--a-tinte)}
.a-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:calc(9*var(--pt))}
.a-kachel{overflow:hidden;border:calc(1.5*var(--pt)) solid var(--a-linie);border-radius:calc(15*var(--pt));background:#fff}
.a-kachel__bild{position:relative;height:calc(74*var(--pt));overflow:hidden;background:#E5D1BE}
.a-kachel__bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-kachel__bild .a-fig{position:absolute;bottom:-4%;height:96%;width:auto;left:50%;transform:translateX(-50%)}
.a-kachel p{padding:calc(7*var(--pt)) calc(10*var(--pt)) calc(8*var(--pt));font-size:calc(13.5*var(--pt));font-weight:800;color:var(--a-tinte);line-height:1.15}
.a-kachel p small{display:block;font-weight:500;font-size:calc(11.5*var(--pt));color:var(--a-grau)}
.a-plan{display:flex;align-items:center;gap:calc(12*var(--pt));padding:calc(10*var(--pt)) calc(12*var(--pt));border-radius:calc(15*var(--pt));background:var(--a-lime-hell);border:calc(1.5*var(--pt)) solid var(--a-lime-rand)}
.a-plan__ic{display:grid;place-items:center;width:calc(40*var(--pt));height:calc(40*var(--pt));border-radius:calc(11*var(--pt));background:var(--a-navy);color:var(--a-lime)}
.a-plan__ic .ic{width:calc(21*var(--pt));height:calc(21*var(--pt))}
.a-plan b{display:block;font-size:calc(15*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-plan small{font-size:calc(12*var(--pt));color:var(--a-text)}
.a-plan>.ic{margin-left:auto;width:calc(20*var(--pt));height:calc(20*var(--pt));color:var(--a-tinte)}

/* Stunde */
.a-titel{display:flex;align-items:center;gap:calc(10*var(--pt))}
.a-titel img{flex:none;width:calc(58*var(--pt));height:calc(78*var(--pt));object-fit:contain;object-position:bottom}
.a-titel h2{font-size:calc(22*var(--pt));font-weight:800}
.a-titel p{margin-top:calc(4*var(--pt));display:flex;flex-wrap:wrap;align-items:center;gap:calc(4*var(--pt)) calc(10*var(--pt));font-size:calc(13.5*var(--pt));color:var(--a-text)}
.a-titel p span{display:inline-flex;align-items:center;gap:calc(4*var(--pt))}
.a-titel .ic{width:calc(15*var(--pt));height:calc(15*var(--pt))}
.a-ziel{display:flex;gap:calc(10*var(--pt));padding:calc(10*var(--pt)) calc(12*var(--pt));border-radius:calc(14*var(--pt));background:var(--a-lime-hell);border:calc(1.5*var(--pt)) solid var(--a-lime-rand)}
.a-ziel>.ic{width:calc(30*var(--pt));height:calc(30*var(--pt));color:var(--a-tinte);stroke-width:1.8}
.a-ziel b{display:block;font-size:calc(14.5*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-ziel p{font-size:calc(12.5*var(--pt));line-height:1.3}
.a-chips{display:flex;flex-wrap:wrap;gap:calc(5*var(--pt));margin-top:calc(6*var(--pt))}
.a-chip{display:inline-flex;align-items:center;gap:calc(4*var(--pt));height:calc(22*var(--pt));padding:0 calc(8*var(--pt));border-radius:99px;background:#fff;border:calc(1*var(--pt)) solid var(--a-linie);font-size:calc(11*var(--pt));font-weight:700;color:var(--a-tinte);white-space:nowrap}
.a-chip--navy{background:var(--a-navy);border-color:var(--a-navy);color:var(--a-lime)}
.a-material{display:flex;gap:calc(10*var(--pt));padding:calc(10*var(--pt)) calc(12*var(--pt))}
.a-material>.ic{width:calc(28*var(--pt));height:calc(28*var(--pt));color:var(--a-tinte);stroke-width:1.8}
.a-material b{display:block;font-size:calc(14.5*var(--pt));font-weight:800;color:var(--a-tinte);margin-bottom:calc(4*var(--pt))}
.a-material ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:auto auto;gap:calc(4*var(--pt)) calc(14*var(--pt))}
.a-material li{display:flex;align-items:center;gap:calc(6*var(--pt));font-size:calc(12.5*var(--pt))}
.a-box{flex:none;width:calc(15*var(--pt));height:calc(15*var(--pt));border:calc(1.6*var(--pt)) solid var(--a-tinte);border-radius:calc(4*var(--pt));display:grid;place-items:center}
.a-box.ist-an{background:var(--a-tinte);color:var(--a-lime)}
.a-box .ic{width:80%;height:80%;stroke-width:3.4}
.a-phasen{display:grid;gap:calc(6*var(--pt))}
.a-phase{border:calc(1.5*var(--pt)) solid var(--a-linie);border-radius:calc(13*var(--pt));background:#fff;overflow:hidden}
.a-phase__kopf{display:flex;align-items:center;gap:calc(9*var(--pt));min-height:calc(42*var(--pt));padding:calc(6*var(--pt)) calc(10*var(--pt))}
.a-nr{flex:none;display:grid;place-items:center;width:calc(26*var(--pt));height:calc(26*var(--pt));border-radius:50%;background:var(--a-lime);color:var(--a-navy);font-weight:800;font-size:calc(13.5*var(--pt))}
.a-phase__kopf b{font-size:calc(14*var(--pt));font-weight:800;color:var(--a-tinte);line-height:1.15}
.a-phase__kopf b small{display:block;font-size:calc(11.5*var(--pt));font-weight:600;color:var(--a-text)}
.a-min{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:calc(24*var(--pt));padding:0 calc(9*var(--pt));border-radius:99px;border:calc(1*var(--pt)) solid var(--a-linie);font-size:calc(11.5*var(--pt));font-weight:700;color:var(--a-tinte);white-space:nowrap}
.a-phase__kopf>.ic{width:calc(17*var(--pt));height:calc(17*var(--pt));color:var(--a-tinte)}
.a-phase__plan{margin:0 calc(8*var(--pt)) calc(8*var(--pt));border-radius:calc(10*var(--pt));overflow:hidden;background:#EEF2FA;border:calc(1*var(--pt)) solid var(--a-linie)}
.a-phase__plan img{display:block;width:100%;height:auto;aspect-ratio:1280/640;object-fit:cover;object-position:50% 30%}
.a-phase__plan p{display:flex;align-items:center;justify-content:center;gap:calc(6*var(--pt));height:calc(28*var(--pt));border-top:calc(1*var(--pt)) solid var(--a-linie);background:#fff;font-size:calc(11.5*var(--pt));font-weight:600;color:var(--a-tinte)}
.a-phase__plan .ic{width:calc(14*var(--pt));height:calc(14*var(--pt))}

/* Tools */
.a-tool{padding:calc(11*var(--pt)) calc(12*var(--pt));display:grid;gap:calc(9*var(--pt))}
.a-tool__kopf{display:flex;align-items:center;gap:calc(10*var(--pt))}
.a-tool__ic{flex:none;display:grid;place-items:center;width:calc(34*var(--pt));height:calc(34*var(--pt));border-radius:calc(10*var(--pt));background:var(--a-navy);color:var(--a-lime)}
.a-tool__ic .ic{width:calc(18*var(--pt));height:calc(18*var(--pt))}
.a-tool__kopf b{display:block;font-size:calc(15.5*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-tool__kopf small{display:block;font-size:calc(11.5*var(--pt));color:var(--a-text)}
.a-tool__kopf .a-chip{margin-left:auto}
.a-modi{display:grid;grid-template-columns:repeat(3,1fr);padding:calc(3*var(--pt));border-radius:calc(11*var(--pt));background:var(--a-flaeche);border:calc(1*var(--pt)) solid var(--a-linie)}
.a-modi span{display:grid;place-items:center;height:calc(28*var(--pt));border-radius:calc(8*var(--pt));font-size:calc(11*var(--pt));font-weight:700;white-space:nowrap}
.a-modi .ist-aktiv{background:var(--a-lime);color:var(--a-navy);font-weight:800}
.a-teams{display:grid;grid-template-columns:1fr 1fr;gap:calc(7*var(--pt))}
.a-team{display:grid;gap:calc(5*var(--pt));padding:calc(8*var(--pt)) calc(9*var(--pt));border-radius:calc(11*var(--pt));border:calc(1.5*var(--pt)) solid var(--a-linie);border-top:calc(4*var(--pt)) solid var(--team)}
.a-team b{display:flex;align-items:center;justify-content:space-between;font-size:calc(12.5*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-team b small{font-size:calc(10.5*var(--pt));font-weight:600;color:var(--a-grau)}
.a-avas{display:flex}
.a-ava{position:relative;flex:none;width:calc(24*var(--pt));height:calc(24*var(--pt));border-radius:50%;overflow:hidden;background:#EAF1FF;box-shadow:0 0 0 calc(2*var(--pt)) var(--team,#3E6CC0),0 0 0 calc(3.5*var(--pt)) #fff}
.a-ava+.a-ava{margin-left:calc(-5*var(--pt))}
.a-ava img{position:absolute;max-width:none;width:calc(var(--z)*100%);height:auto;left:calc(50% - var(--hx)*var(--z)*100%);top:calc(50% - var(--hy)*var(--z)*var(--r)*100%)}
.a-ava--plus{display:grid;place-items:center;background:var(--a-flaeche);font-size:calc(9.5*var(--pt));font-weight:800;color:var(--a-tinte)}
.a-knopf{display:flex;align-items:center;justify-content:center;gap:calc(7*var(--pt));height:calc(40*var(--pt));border-radius:calc(12*var(--pt));background:var(--a-lime);border:calc(1.5*var(--pt)) solid var(--a-lime-rand);font-weight:800;font-size:calc(14*var(--pt));color:var(--a-navy)}
.a-knopf .ic{width:calc(17*var(--pt));height:calc(17*var(--pt))}
.a-jetzt{display:flex;align-items:center;justify-content:space-between;padding:calc(9*var(--pt)) calc(11*var(--pt));border-radius:calc(12*var(--pt));background:var(--a-navy);color:#fff}
.a-jetzt small{display:block;font-size:calc(11*var(--pt));color:#B8C4E6;font-weight:600}
.a-jetzt b{display:block;font-size:calc(16*var(--pt));font-weight:800}
.a-jetzt strong{font-family:"Barlow Condensed",sans-serif;font-style:italic;font-weight:800;font-size:calc(38*var(--pt));line-height:1;color:var(--a-lime);font-variant-numeric:tabular-nums}
.a-phasenliste{display:grid;gap:calc(6*var(--pt))}
.a-ph{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(4*var(--pt)) calc(8*var(--pt))}
.a-ph i{width:calc(9*var(--pt));height:calc(9*var(--pt));border-radius:50%;background:var(--farbe)}
.a-ph span{font-size:calc(12.5*var(--pt));font-weight:700;color:var(--a-tinte)}
.a-ph em{font-style:normal;font-size:calc(12.5*var(--pt));font-weight:800;color:var(--a-tinte);font-variant-numeric:tabular-nums}
.a-ph u{grid-column:2/4;height:calc(5*var(--pt));border-radius:9px;background:var(--a-flaeche);overflow:hidden;text-decoration:none}
.a-ph u::before{content:"";display:block;height:100%;width:var(--w,100%);background:var(--farbe);border-radius:inherit}
.a-ph.ist-aktiv span{text-decoration:underline;text-decoration-thickness:calc(2*var(--pt));text-underline-offset:calc(3*var(--pt))}
.a-summe{display:flex;justify-content:space-between;font-size:calc(11.5*var(--pt));font-weight:700;color:var(--a-text)}
.app__unter{font-size:calc(14*var(--pt));color:var(--a-grau);margin-top:calc(3*var(--pt))}

/* Feinschliff nach der ersten Vorschau: Kopf wächst mit der zweizeiligen Startzeile, Stunden-Screen kompakter */
.app__kopf{height:auto;min-height:calc(76*var(--pt));padding-top:calc(2*var(--pt));padding-bottom:calc(8*var(--pt))}
.app--lesson .app__kopf{min-height:calc(60*var(--pt));padding-bottom:calc(4*var(--pt))}
.app--lesson .app__inhalt{gap:calc(8*var(--pt))}
.app--lesson .a-titel img{width:calc(48*var(--pt));height:calc(64*var(--pt))}
.app--lesson .a-titel h2{font-size:calc(21*var(--pt))}
.app--lesson .a-ziel{padding:calc(8*var(--pt)) calc(11*var(--pt))}
.app--lesson .a-ziel p{font-size:calc(12*var(--pt))}
.app--lesson .a-material{padding:calc(8*var(--pt)) calc(11*var(--pt))}
.app--lesson .app__abschnitt{font-size:calc(17.5*var(--pt));margin-top:0}
.app--lesson .a-phase__kopf{min-height:calc(38*var(--pt));padding:calc(5*var(--pt)) calc(10*var(--pt))}
.a-phase__plan img{aspect-ratio:1280/590;object-position:50% 40%}
.a-phase__plan p{height:calc(26*var(--pt))}


:root{
  --sand:#FCF9F4; --wand:#E5D1BE; --wand-hell:#F2E8DD; --ziegel:#D8BEA5;
  --navy:#0C2345; --navy-2:#16345F; --navy-tief:#081A35; --tinte-2:#46546E;
  --halle:#2953A6; --halle-hell:#3E6CC0; --boden:#5C80BD;
  --lime:#D9FF57; --lime-hell:#F1FFC4; --koralle:#FF6A3D; --lavendel:#C9B6E6; --lavendel-hell:#EFE8F8;
  --linie:rgba(12,35,69,.14);
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --r-s:14px; --r-m:22px; --r-l:30px;
  --ease:cubic-bezier(.22,.8,.24,1); --feder:cubic-bezier(.34,1.5,.64,1);
  --gutter:20px; --wrap:1280px; --kopf-h:64px;
}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1100px){:root{--gutter:48px;--kopf-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 18px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--sand);color:var(--navy);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:clip}
@media (min-width:1100px){body{font-size:17px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--halle);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:var(--lime);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Typografie */
h1,h2,h3{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:-.003em;line-height:.93;margin:0;text-wrap:balance}
h2{font-size:clamp(38px,4.6vw,64px)}
h3{font-size:clamp(28px,2.4vw,36px);line-height:.96}
mark{background:var(--lime);color:var(--navy);padding:0 .14em .02em .1em;border-radius:.1em;display:inline-block;transform:rotate(-1.6deg);box-shadow:.06em .07em 0 var(--navy)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--halle)}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--koralle)}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--tinte-2);max-width:42em}
.kopfzeile{display:grid;gap:14px;margin-bottom:clamp(28px,3.4vw,46px)}
.kopfzeile--mitte{justify-items:center;text-align:center}
.kopfzeile--mitte .lead{margin-inline:auto}
.abschnitt{position:relative;padding:clamp(64px,8vw,112px) 0}

/* Sticker, Knöpfe, Chips */
.sticker{display:inline-block;justify-self:start;background:var(--navy);color:var(--lime);font:italic 800 clamp(15px,1.25vw,18px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:9px 14px 8px;border-radius:10px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--koralle)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:56px;padding:0 24px;border-radius:999px;border:2.5px solid var(--navy);background:#fff;color:var(--navy);font:800 17px/1.1 var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--navy);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .2s;-webkit-tap-highlight-color:transparent;text-align:center}
.knopf .ic{width:20px;height:20px}
.knopf--lime{background:var(--lime)}
.knopf--navy{background:var(--navy);color:var(--lime)}
.knopf--klein{min-height:46px;padding:0 18px;font-size:15px;box-shadow:0 4px 0 var(--navy)}
@media (hover:hover){.knopf:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}.knopf--klein:hover{box-shadow:0 6px 0 var(--navy)}}
.knopf:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;min-height:44px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills li{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:99px;background:var(--wand-hell);border:1.5px solid var(--linie);font-weight:700;font-size:14.5px}
.haken{display:grid;gap:9px}
.haken li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.haken li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2345' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:inset 0 0 0 1.5px var(--navy)}
.stores{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stores a{display:block;border-radius:8px}
.stores img{height:44px;width:auto}

/* Szenen-Fenster, Figuren, Sprechblase */
.fenster{position:relative;overflow:hidden;border-radius:var(--r-l);border:2.5px solid var(--navy);background:var(--wand);box-shadow:0 8px 0 var(--navy)}
.fenster>img.szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.figur{position:absolute;width:auto;max-width:none;pointer-events:none;-webkit-user-select:none;user-select:none}
.blase{position:absolute;background:#fff;color:var(--navy);border:2.5px solid var(--navy);border-radius:18px;padding:9px 14px 8px;font:italic 800 clamp(17px,1.5vw,22px)/1 var(--display);text-transform:uppercase;white-space:nowrap;box-shadow:3px 4px 0 var(--navy);z-index:6}
.blase::after{content:"";position:absolute;left:22px;bottom:-11px;width:16px;height:16px;background:#fff;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) skew(8deg,8deg)}
.etikett{position:absolute;left:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:var(--halle);color:#fff;border:2px solid var(--navy);border-radius:10px;padding:7px 11px 6px;font:italic 800 18px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;box-shadow:2px 3px 0 var(--navy)}
.etikett b{color:var(--lime);font-weight:800}

/* ---------- Hero ---------- */
.held{position:relative;background:linear-gradient(180deg,#EDE0D1 0%,var(--wand) 62%,#E2CDB8 100%);overflow:hidden;isolation:isolate}
.held::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;z-index:-1;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 1H64M0 13H64M32 1v12M16 13v11M48 13v11' fill='none' stroke='%23C9A98B' stroke-width='2'/%3E%3C/svg%3E") 0 0/64px 24px repeat-x;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.held__raster{position:relative;z-index:2;display:grid;gap:30px;padding:30px 0 0}
.held__text{display:grid;gap:18px;align-content:start}
.held__titel{font-size:clamp(46px,5.2vw,76px);line-height:.9;color:var(--navy)}
.held__lead{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:#33415C;max-width:34em}
.held__knoepfe{display:flex;flex-wrap:wrap;gap:14px 14px}
.held__knoepfe .knopf{font-size:16px}
.held__hinweis{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;font-weight:600;color:#33415C;max-width:36em}
.held__hinweis .ic{color:var(--halle);margin-top:2px}
.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:2px solid var(--navy);border-radius:18px;box-shadow:0 4px 0 var(--navy);overflow:hidden}
.fakt{padding:11px 13px 10px;display:grid;gap:3px;align-content:start;border:0 solid var(--linie)}
.fakt:nth-child(odd){border-right-width:2px}
.fakt:nth-child(-n+2){border-bottom-width:2px}
.fakt b{font:italic 800 clamp(30px,2.6vw,38px)/.95 var(--display);color:var(--halle);display:flex;align-items:center;gap:6px}
.fakt b .ic{width:26px;height:26px;stroke-width:2.2}
.fakt span{font-size:13.5px;font-weight:700;line-height:1.25}
@media (min-width:640px){.fakten{grid-template-columns:repeat(4,minmax(0,1fr))}.fakt{border-width:0 2px 0 0!important}.fakt:last-child{border-right-width:0!important}}

.held__buehne{position:relative;height:clamp(440px,64vw,560px);margin-top:4px}
.held__fenster{position:absolute;left:0;right:0;top:0;bottom:70px}
.held__fenster .szene{object-position:60% 40%}
.held__phone{position:absolute;bottom:18px;z-index:3}
.held__phone--mitte{--pw:clamp(176px,46vw,262px);left:50%;transform:translateX(-50%);z-index:4}
.held__phone--links{--pw:clamp(118px,31vw,198px);left:1%;bottom:52px;transform:rotate(-4deg)}
.held__phone--rechts{--pw:clamp(118px,31vw,198px);right:1%;bottom:52px;transform:rotate(4deg)}
.held__figur--basket{height:clamp(150px,27vw,300px);left:-6%;bottom:-8px;z-index:5}
.held__figur--roll{height:clamp(84px,14vw,150px);right:9%;bottom:-6px;z-index:6}
/* Hero links: Badge, Stufenwahl (ruhig, ohne Dauerbewegung) */
.held__badge{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:34px;padding:7px 14px 6px;border-radius:999px;background:var(--navy);color:var(--lime);font:800 12.5px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.held__badge .ic{width:16px;height:16px}
.stufenwahl{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.stufenwahl legend{padding:0;margin-bottom:8px;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2)}
.stufenwahl__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:18px;background:#fff;border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy)}
.stufenwahl label{position:relative;display:grid;place-content:center;text-align:center;min-height:52px;padding:6px 8px;border-radius:13px;cursor:pointer;font-weight:800;font-size:14.5px;line-height:1.15;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}
.stufenwahl label small{display:block;font-weight:600;font-size:12.5px;color:var(--tinte-2);transition:color .2s ease}
.stufenwahl input{position:absolute;opacity:0;pointer-events:none}
@media (hover:hover){.stufenwahl label:hover{background:var(--wand-hell)}}
.stufenwahl label:active{background:var(--wand)}
.stufenwahl label:has(input:checked){background:var(--navy);color:var(--lime)}
.stufenwahl label:has(input:checked) small{color:#DCE3F2}
.stufenwahl label:has(input:focus-visible){outline:3px solid var(--halle);outline-offset:2px}
.stufenwahl__info{font-size:14.5px;font-weight:700;color:#33415C}
.stufenwahl__info b{color:var(--halle)}
.held:has(input[value="k5"]:checked) [data-band]:not([data-band="k5"]),.held:has(input[value="612"]:checked) [data-band]:not([data-band="612"]),.held:has(input[value="alle"]:checked) [data-band]:not([data-band="alle"]){display:none}
@media (max-width:419px){.stufenwahl label{font-size:13.5px;padding:6px 4px}.stufenwahl label small{font-size:11.5px}}
.held__boden{position:relative;z-index:1;margin-top:-50px;padding:72px 0 26px;background:linear-gradient(180deg,var(--halle-hell),var(--halle));border-top:4px solid var(--koralle)}
.held__boden::before{content:"";position:absolute;inset:0;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='720' cy='100' r='70'/%3E%3Cpath d='M720 0v200M0 40h1440'/%3E%3C/g%3E%3C/svg%3E") center/1440px 200px no-repeat;pointer-events:none}
.wege{position:relative;display:grid;gap:10px}
.wege__titel{display:inline-flex;align-items:center;justify-self:start;gap:8px;background:var(--navy);color:var(--lime);border-radius:999px;padding:9px 16px;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.wege__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.weg{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-radius:16px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 4px 0 var(--navy);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.weg .ic{width:24px;height:24px;color:var(--halle)}
.weg b{display:block;font-size:15px;line-height:1.15}
.weg small{display:block;font-size:12.5px;font-weight:600;color:var(--tinte-2)}
.weg--lime{background:var(--lime)}
@media (hover:hover){.weg:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--navy)}}
@media (min-width:900px){.wege{grid-template-columns:auto 1fr;align-items:center;gap:18px}.wege__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (min-width:1100px){
  .held__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:44px;padding-top:44px;align-items:start}
  .held__buehne{height:640px;margin-top:0}
  .held__fenster{bottom:86px}
  .held__phone--mitte{--pw:262px;bottom:6px}
  .held__phone--links{--pw:204px;left:0;bottom:70px}
  .held__phone--rechts{--pw:204px;right:0;bottom:70px}
  .held__figur--basket{height:300px;left:-92px;bottom:-22px}
  .held__figur--roll{height:150px;right:30px;bottom:-14px}
  .held__boden{margin-top:-96px;padding-top:110px}
}

/* ---------- Rollen ---------- */
.rollen{background:var(--sand)}
.rolle{display:grid;gap:22px;margin-bottom:clamp(36px,4.6vw,64px);align-items:center}
.rolle__buehne{position:relative;height:clamp(300px,58vw,430px)}
.rolle__buehne .fenster{position:absolute;inset:0 0 18px 0}
.rolle__buehne .szene{object-position:50% 70%}
.rolle__buehne .phone{position:absolute;right:16px;bottom:0;--pw:clamp(118px,26vw,176px);transform:rotate(5deg);z-index:4}
.rolle__text{display:grid;gap:14px;align-content:start}
.rolle__text h3{font-size:clamp(34px,3.4vw,50px)}
.zahlen{display:flex;flex-wrap:wrap;gap:8px}
.zahlen li{display:inline-flex;align-items:baseline;gap:6px;padding:6px 13px 5px;border-radius:12px;background:var(--wand-hell);border:1.5px solid var(--linie);font-weight:700;font-size:15px}
.zahlen b{font:italic 800 26px/1 var(--display);color:var(--halle)}
.marke-klein{display:inline-flex;align-items:center;gap:7px;justify-self:start;background:var(--koralle);color:var(--navy);border:2px solid var(--navy);border-radius:999px;padding:6px 13px;font-weight:800;font-size:14px}
.rolle__knoepfe{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:4px}
@media (min-width:980px){
  .rolle{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,4vw,60px)}
  .rolle--rechts .rolle__buehne{order:2}
  .rolle__buehne{height:440px}
}
.paar{display:grid;gap:22px}
@media (min-width:980px){.paar{grid-template-columns:1fr 1fr}}
.karte{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--r-l);border:2.5px solid var(--navy);background:#fff;box-shadow:0 8px 0 var(--navy)}
.karte__bild{position:relative;height:230px;overflow:hidden;border-bottom:2.5px solid var(--navy);background:var(--wand)}
.karte__bild .szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.karte__in{display:grid;gap:14px;align-content:start;padding:22px clamp(18px,2.4vw,30px) 26px}
.karte__in h3{font-size:clamp(30px,2.8vw,40px)}
.karte--lavendel{background:var(--lavendel-hell)}
.karte--navy{background:var(--navy);color:#fff}
.karte--navy h3{color:#fff}
.karte--navy .haken li{color:#fff}
.preisbox{display:grid;gap:4px;padding:14px 16px;border-radius:16px;background:#fff;border:2px solid var(--navy)}
.preisbox b{font:italic 800 40px/1 var(--display);color:var(--navy)}
.preisbox span{font-size:14.5px;font-weight:600;color:var(--tinte-2)}
.infobox{display:grid;gap:4px;padding:14px 16px;border-radius:16px;border:2px solid rgba(217,255,87,.45);background:rgba(255,255,255,.06)}
.infobox b{font:italic 800 28px/1 var(--display);color:var(--lime);text-transform:uppercase}
.infobox span{font-size:14.5px;color:#DCE3F2}

/* ---------- Beispielstunde ---------- */
.stunde{background:#fff;border-block:2.5px solid var(--navy)}
.reihe{display:grid;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.reihe__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-weight:700;color:var(--tinte-2)}
.reihe__kopf b{font:italic 800 24px/1 var(--display);text-transform:uppercase;color:var(--navy)}
.reihe ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:l}
.reihe li{position:relative;display:grid;gap:4px;padding:12px 14px;border-radius:16px;border:2px solid var(--linie);background:var(--sand)}
.reihe li small{font:800 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--halle)}
.reihe li b{font-size:15.5px;line-height:1.2}
.reihe li.ist-jetzt{background:var(--lime);border-color:var(--navy);box-shadow:0 4px 0 var(--navy)}
.reihe li.ist-jetzt small{color:var(--navy)}
.reihe li.ist-jetzt::after{content:"In the app now";position:absolute;right:10px;top:-11px;background:var(--navy);color:var(--lime);font:800 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:99px}
@media (min-width:900px){.reihe ol{grid-template-columns:repeat(6,minmax(0,1fr))}.reihe li:not(:last-child)::before{content:"";position:absolute;right:-10px;top:50%;width:10px;height:2.5px;background:var(--navy)}}
.stunde__raster{display:grid;gap:22px}
.plan{display:grid;gap:0;overflow:hidden;border-radius:var(--r-l);border:2.5px solid var(--navy);background:#EEF2FA;box-shadow:0 8px 0 var(--navy)}
.plan__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:14px 18px;background:var(--navy);color:#fff}
.plan__kopf b{font:italic 800 24px/1 var(--display);text-transform:uppercase}
.plan__kopf span{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--lime)}
.plan img{width:100%;height:auto;aspect-ratio:1280/720}
.plan figcaption{padding:12px 18px 14px;font-size:15px;font-weight:600;color:#33415C;border-top:2px solid var(--linie);background:#fff}
.minuten{display:grid;gap:12px;padding:18px;border-radius:var(--r-m);border:2px solid var(--navy);background:var(--sand)}
.minuten__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.minuten__kopf b{font:italic 800 24px/1 var(--display);text-transform:uppercase}
.minuten__kopf span{font-weight:800;color:var(--halle)}
.balken{display:flex;height:22px;border-radius:99px;overflow:hidden;border:2px solid var(--navy)}
.balken i{display:block;flex:var(--m) 0 0;background:var(--f)}
.balken i+i{border-left:2px solid var(--navy)}
.minuten ol{display:grid;gap:8px}
.minuten li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-weight:700;font-size:15px}
.minuten li i{width:14px;height:14px;border-radius:4px;background:var(--f);border:1.5px solid var(--navy)}
.minuten li small{display:block;font-weight:600;font-size:13.5px;color:var(--tinte-2)}
.minuten li em{font-style:normal;font:italic 800 20px/1 var(--display)}
.liste-karte{display:grid;gap:10px;padding:18px;border-radius:var(--r-m);border:2px solid var(--linie);background:#fff}
.liste-karte h3{font-size:24px;display:flex;align-items:center;gap:10px}
.liste-karte h3 .ic{width:26px;height:26px;color:var(--halle)}
.check li{display:flex;align-items:center;gap:10px;font-weight:600;padding:3px 0}
.check .box{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:2px solid var(--navy);background:var(--lime)}
.check .box .ic{width:14px;height:14px;stroke-width:3.4}
.sicher{display:grid;gap:6px;font-size:15px;color:#33415C}
.sicher li{display:flex;gap:8px}
.sicher .ic{color:var(--koralle);margin-top:3px}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.diff div{padding:12px 14px;border-radius:14px;border:2px solid var(--navy)}
.diff b{display:block;font:italic 800 20px/1 var(--display);text-transform:uppercase;margin-bottom:5px}
.diff p{font-size:14.5px;line-height:1.4}
.diff .leichter{background:var(--lime-hell)}
.diff .schwerer{background:#FFE3D8}
@media (min-width:1000px){.stunde__raster{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}.stunde__rechts{display:grid;gap:18px}}
.stunde__rechts{display:grid;gap:18px}
.banner{position:relative;margin-top:clamp(30px,4vw,52px);display:grid;gap:18px;align-items:center;padding:clamp(22px,3vw,34px);border-radius:var(--r-l);background:var(--navy);color:#fff;border:2.5px solid var(--navy);box-shadow:0 8px 0 var(--koralle);overflow:hidden}
.banner h3{font-size:clamp(28px,3vw,42px);color:#fff}
.banner p{font-size:17px;line-height:1.55;color:#DCE3F2;max-width:46em}
.banner strong{color:var(--lime)}
.banner .pill-free{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;padding:2px 10px;border-radius:99px;background:var(--lime);color:var(--navy);font-weight:800;font-size:.9em}
.banner .stores img{height:46px}
.banner__fig{display:none}
@media (min-width:1000px){.banner{grid-template-columns:minmax(0,1fr) auto;padding-right:220px}.banner__fig{display:block;position:absolute;right:26px;bottom:-12px;height:250px}}

/* ---------- Tools (Hallenboden) ---------- */
.tools{background:var(--halle);color:#fff;overflow:hidden;isolation:isolate}
.tools::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.28;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='1100' viewBox='0 0 1440 1100'%3E%3Cg fill='none' stroke='%23C9D8F5' stroke-width='4'%3E%3Ccircle cx='720' cy='550' r='170'/%3E%3Cpath d='M720 0v1100M0 60h1440M0 1040h1440M60 0v1100M1380 0v1100'/%3E%3Cpath d='M60 330h170a220 220 0 0 1 0 440H60M1380 330h-170a220 220 0 0 0 0 440h170'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.tools h2{color:#fff}
.tools h2 em{font-style:inherit;color:var(--lime)}
.tools .eyebrow{color:var(--lime)}
.tools .lead{color:#DCE3F2}
.werkzeuge{display:grid;gap:16px}
@media (min-width:760px){.werkzeuge{grid-template-columns:1fr 1fr}}
@media (min-width:1140px){.werkzeuge{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wz{display:grid;gap:12px;align-content:start;padding:20px;border-radius:24px;background:var(--navy-tief);border:2px solid rgba(201,216,245,.22);box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.wz--team{border-color:var(--lime)}
.wz__kopf{display:flex;align-items:center;gap:12px}
.wz__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(217,255,87,.12);color:var(--lime);flex:none}
.wz__ic .ic{width:22px;height:22px}
.wz h3{font-size:26px;color:#fff}
.wz__nr{margin-left:auto;font:italic 800 22px/1 var(--display);color:rgba(217,255,87,.6)}
.wz>p{font-size:15px;line-height:1.5;color:#C5D0E6}
.wz__demo{display:grid;gap:10px;padding:14px;border-radius:16px;background:#0F2A52;border:1.5px solid rgba(201,216,245,.16)}
.segmente{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:12px;background:rgba(255,255,255,.06)}
.segmente button{white-space:nowrap;min-height:40px;border:0;border-radius:9px;background:transparent;color:#DCE3F2;font-weight:700;font-size:13.5px;cursor:pointer}
.segmente button[aria-pressed="true"]{background:var(--lime);color:var(--navy);font-weight:800}
.teamraster{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.teamk{display:grid;gap:7px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-top:4px solid var(--team)}
.teamk b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 6px;font-size:14px}
.teamk b small{font-weight:600;color:#B7C3DD}
.avas{display:flex;min-height:30px}
.ava{position:relative;flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#EAF1FF;box-shadow:0 0 0 2px var(--team),0 0 0 4px #0F2A52;transition:opacity .3s ease,transform .35s var(--feder)}
.ava+.ava{margin-left:-6px}
.ava img{position:absolute;max-width:none;width:calc(var(--z)*100%);height:auto;left:calc(50% - var(--hx)*var(--z)*100%);top:calc(50% - var(--hy)*var(--z)*var(--r)*100%)}
.ava--plus{display:grid;place-items:center;background:#22406E;color:#fff;font-size:11px;font-weight:800}
.teams-zeile{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;color:#DCE3F2}
.teams-zeile b{color:var(--lime);font:italic 800 22px/1 var(--display)}
.mini-knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--lime);color:var(--navy);font-weight:800;font-size:14.5px;cursor:pointer}
.mini-knopf--rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.mini-knopf .ic{width:17px;height:17px}
.phasen{display:grid;gap:9px}
.phase{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}
.phase span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9FB0D2}
.phase b{font-size:15px}
.phase em{grid-row:1/3;grid-column:2;font:italic 800 26px/1 var(--display);font-style:italic;color:#fff;font-variant-numeric:tabular-nums}
.phase u{grid-column:1/3;height:7px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;text-decoration:none}
.phase u i{display:block;height:100%;width:var(--w,100%);background:var(--f);border-radius:inherit}
.phase.ist-aktiv b{color:var(--lime)}
.summe{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:#C5D0E6}
.kacheln4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.kacheln4 div{padding:9px 8px;border-radius:11px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1)}
.kacheln4 b{display:block;font:italic 800 26px/1 var(--display)}
.kacheln4 span{font-size:11.5px;font-weight:700;color:#B7C3DD}
.kacheln4--lime div{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.kacheln4--lime span{color:var(--navy)}
.pfeil-unten{display:grid;place-items:center;color:var(--lime)}
.stand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;gap:8px}
.stand small{display:block;font-size:13px;font-weight:800;color:#C5D0E6}
.stand strong{display:block;font:italic 800 64px/1 var(--display);font-variant-numeric:tabular-nums}
.stand .doppel{font:italic 800 46px/1 var(--display);color:var(--lime)}
.stand button{margin-top:6px;width:44px;height:44px;border-radius:12px;border:0;background:var(--lime);color:var(--navy);font-weight:800;font-size:22px;cursor:pointer}
.stand .rot button{background:var(--koralle)}
.stand__zeit{display:flex;justify-content:center;gap:10px;font-weight:700;font-size:14px;color:#DCE3F2}
.uhr{font:italic 800 76px/1 var(--display);color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.schnell{display:flex;gap:6px}
.schnell button{flex:1;min-height:44px;border-radius:10px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-weight:800;cursor:pointer}
.schnell button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.ring-zeile{display:flex;align-items:center;gap:16px}
.ring{position:relative;flex:none;width:104px;height:104px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11}
.ring .spur{stroke:rgba(255,255,255,.12)}
.ring .wert{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:var(--o,96)}
.ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:italic 800 30px/1 var(--display)}
.ring span small{font:700 11px/1.2 var(--sans);color:#B7C3DD;font-style:normal}
.legende{display:grid;gap:7px;font-size:14.5px;font-weight:700}
.legende li{display:flex;align-items:center;gap:8px}
.legende i{width:11px;height:11px;border-radius:3px;background:var(--f)}
.drucken{margin-top:18px;display:grid;gap:16px;align-items:center;padding:20px clamp(18px,2.6vw,30px);border-radius:24px;background:#fff;color:var(--navy);border:2.5px solid var(--navy);box-shadow:0 8px 0 var(--navy-tief)}
.drucken__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--lime)}
.drucken__ic .ic{width:26px;height:26px}
.drucken h3{font-size:clamp(26px,2.4vw,34px)}
.drucken p{color:var(--tinte-2)}
.drucken__karten{display:none}
@media (min-width:900px){.drucken{grid-template-columns:auto 1fr auto}.drucken__karten{display:flex}}
.drucken__karten span{position:relative;display:block;width:96px;height:124px;margin-left:-26px;border-radius:12px;border:2px solid var(--navy);background:#fff;box-shadow:0 4px 0 var(--navy);overflow:hidden}
.drucken__karten span:nth-child(1){transform:rotate(-7deg)}
.drucken__karten span:nth-child(3){transform:rotate(7deg)}
.drucken__karten b{position:absolute;left:0;right:0;top:0;padding:5px 6px;background:var(--navy);color:var(--lime);font:italic 800 13px/1 var(--display);text-transform:uppercase}
.drucken__karten img{position:absolute;bottom:2px;left:50%;height:88px;width:auto;transform:translateX(-50%)}

@media (max-width:419px){.segmente button{font-size:12px}.woche span{font-size:10.5px}}
/* ---------- Bento ---------- */
.bento{display:grid;gap:16px}
@media (min-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1140px){.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto)}.b-gross{grid-column:span 2;grid-row:span 2}.b-breit{grid-column:span 2}}
.b{position:relative;display:grid;gap:10px;align-content:start;padding:22px;border-radius:24px;border:2.5px solid var(--navy);background:#fff;box-shadow:0 6px 0 var(--navy);overflow:hidden;isolation:isolate}
.b>h3{font-size:clamp(26px,2.2vw,32px)}
.b>p{font-size:15.5px;line-height:1.5;color:#33415C;max-width:30em}
.b__zahl{font:italic 800 clamp(48px,4.4vw,66px)/.9 var(--display);color:var(--halle)}
.b--lime{background:var(--lime-hell)}
.b--lavendel{background:var(--lavendel-hell)}
.b--navy{background:var(--navy);color:#fff}
.b--navy>h3{color:#fff}
.b--navy>p{color:#DCE3F2}
.b-gross{min-height:520px;background:var(--wand)}
.b-gross .szene{position:absolute;inset:auto 0 0 0;width:100%;height:58%;object-fit:cover;object-position:50% 70%;z-index:-1;border-top:2.5px solid var(--navy)}
.b-gross .phone{position:absolute;right:24px;bottom:-150px;--pw:210px;transform:rotate(4deg)}
.b-gross .figur{left:16px;bottom:0;height:230px}
.filter{display:flex;flex-wrap:wrap;gap:7px}
.filter span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:99px;background:#fff;border:1.5px solid var(--navy);font-weight:700;font-size:13.5px}
.filter span.an{background:var(--lime)}
.filter .ic{width:15px;height:15px}
.b__bild{position:relative;height:150px;margin:6px -22px -22px;border-top:2.5px solid var(--navy);overflow:hidden}
.b__bild .szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b__bild .figur{bottom:-4px;left:50%;transform:translateX(-50%);height:140px}
.woche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.woche div{display:grid;gap:5px;align-content:start;min-height:96px;padding:7px 6px;border-radius:10px;background:var(--sand);border:1.5px solid var(--linie)}
.woche small{font-weight:800;font-size:12px;color:var(--tinte-2)}
.woche span{display:block;overflow-wrap:anywhere;padding:5px 6px;border-radius:7px;background:var(--lime);border:1.5px solid var(--navy);font-weight:800;font-size:11.5px;line-height:1.15}
.woche span.blau{background:#DCE6FA}
.symbole{display:flex;gap:10px}
.symbole span{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;border:2px solid var(--navy)}
.symbole .ic{width:26px;height:26px;color:var(--halle)}
.b--navy .stores img{height:42px}
@media (min-width:1140px){.b--navy.b-breit{grid-template-columns:auto 1fr;column-gap:18px}.b--navy.b-breit>.offline-ic{grid-row:span 3}}
.offline-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--lime);color:var(--navy)}
.offline-ic .ic{width:30px;height:30px}

/* ---------- Preise ---------- */
.preise{background:var(--wand-hell)}
.wahl{display:grid;gap:12px;justify-items:center;margin-bottom:12px}
.wahl fieldset{border:0;margin:0;padding:5px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;border-radius:20px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 4px 0 var(--navy);width:min(100%,640px)}
.wahl legend{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wahl label{position:relative;display:grid;place-items:center;text-align:center;min-height:52px;padding:6px 10px;border-radius:14px;cursor:pointer;font-weight:800;font-size:15px;line-height:1.15}
.wahl label small{display:block;font-weight:600;font-size:13px;color:var(--tinte-2)}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl label:has(input:checked){background:var(--navy);color:var(--lime)}
.wahl label:has(input:checked) small{color:#DCE3F2}
.wahl label:has(input:focus-visible){outline:3px solid var(--halle);outline-offset:2px}
.wahl--takt fieldset{width:min(100%,460px)}
.wahl--takt label{min-height:46px;font-size:14.5px}
.inklusive{text-align:center;font-weight:700;color:var(--tinte-2);margin:4px auto 26px;max-width:44em}
.tarife{display:grid;gap:18px;align-items:stretch}
@media (min-width:980px){.tarife{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tarif{position:relative;display:grid;gap:12px;align-content:start;padding:26px 22px 24px;border-radius:26px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 7px 0 var(--navy)}
.tarif--top{background:#fff;border-color:var(--navy);box-shadow:0 7px 0 var(--navy),0 0 0 4px var(--lime)}
.tarif__marke{position:absolute;top:-15px;left:22px;background:var(--lime);border:2px solid var(--navy);border-radius:99px;padding:5px 12px;font:800 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.tarif h3{font-size:clamp(26px,2.2vw,31px)}
.tarif__fuer{font-weight:700;color:var(--tinte-2);font-size:15px}
.tarif__preis{display:flex;align-items:baseline;gap:8px}
.tarif__preis b{font:italic 800 58px/.9 var(--display);color:var(--navy)}
.tarif__preis span{font-weight:700;color:var(--tinte-2)}
.tarif__unter{font-weight:700;color:var(--halle)}
.tarif__alt{font-size:14.5px;color:var(--tinte-2)}
.tarif__test{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:5px 11px;border-radius:99px;background:var(--lime-hell);border:1.5px solid var(--navy);font-weight:800;font-size:13.5px}
.tarif .haken{margin-top:4px;font-size:15px}
.tarif .knopf{margin-top:6px;width:100%}
.tarif--navy{background:var(--navy);color:#fff}
.tarif--navy h3{color:#fff}
.tarif--navy .tarif__fuer,.tarif--navy .tarif__alt{color:#C5D0E6}
.tarif--navy .tarif__preis b{color:var(--lime);font-size:44px}
.tarif--navy .tarif__preis span{color:#C5D0E6}
.tarif--navy .haken li{color:#fff}
.preise__klein{margin-top:22px;text-align:center;font-size:14px;color:var(--tinte-2)}
/* Umschalten ohne JavaScript über :has() */
.preise:has(input[value="monat"]:checked) [data-takt="jahr"]{display:none}
.preise:not(:has(input[value="monat"]:checked)) [data-takt="monat"]{display:none}
.preise:has(input[value="k5"]:checked) [data-stufe="612"]{display:none}
.preise:not(:has(input[value="k5"]:checked)) [data-stufe="k5"]{display:none}

/* ---------- Stimmen + FAQ ---------- */
.stimmen-faq{background:var(--sand)}
.stimmen{display:grid;gap:16px;margin-bottom:clamp(48px,6vw,84px)}
@media (min-width:900px){.stimmen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stimme{position:relative;display:grid;gap:14px;align-content:start;padding:24px 22px 20px;border-radius:24px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 6px 0 var(--navy)}
.stimme__muster{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:#FFE3D8;border:1.5px dashed var(--koralle);font:800 11.5px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#7A2A10}
.stimme blockquote{font-size:18px;line-height:1.5;font-weight:600}
.stimme figcaption{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14.5px;color:var(--tinte-2)}
.stimme figcaption .ic{color:var(--halle)}
.faq{display:grid;gap:28px}
@media (min-width:1000px){.faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.faq__links{position:relative;display:grid;gap:16px;align-content:start}
.faq__fig{position:relative;height:300px;margin-top:10px}
.faq__fig .figur{left:30px;bottom:0;height:290px}
.faq__fig .blase{left:min(190px,calc(100% - 136px));top:24px}
.fragen{display:grid;gap:10px}
.frage{border-radius:18px;background:#fff;border:2px solid var(--navy);overflow:hidden}
.frage summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;font-weight:800;font-size:16.5px;cursor:pointer;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary .nr{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);border:2px solid var(--navy);font-size:14px}
.frage summary .ic{margin-left:auto;transition:transform .25s var(--ease)}
.frage[open] summary .ic{transform:rotate(45deg)}
.frage p{padding:0 18px 18px 58px;color:#33415C;line-height:1.6}

/* ---------- Schluss + Fuß ---------- */
.schluss{position:relative;overflow:hidden;isolation:isolate;background:var(--wand);border-top:2.5px solid var(--navy)}
.schluss__szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 80%;z-index:-2}
.schluss::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(252,249,244,.92) 0%,rgba(252,249,244,.78) 45%,rgba(252,249,244,0) 72%)}
.schluss__in{display:grid;justify-items:center;text-align:center;gap:18px;padding:clamp(64px,8vw,104px) 0 clamp(250px,26vw,330px)}
.schluss h2{font-size:clamp(46px,6.4vw,92px);max-width:12em}
.schluss p{font-size:clamp(17px,1.4vw,20px);font-weight:600;color:#33415C;max-width:34em}
.schluss .stores{justify-content:center}
.schluss .stores img{height:50px}
.schluss__figuren .figur{bottom:0}
.schluss__f1{left:6%;height:clamp(170px,22vw,290px)}
.schluss__f2{right:7%;height:clamp(170px,22vw,290px)}
.schluss__f3{left:32%;height:clamp(140px,16vw,230px);display:none}
@media (min-width:900px){.schluss__f3{display:block}}
.fuss{background:var(--navy);color:#DCE3F2;padding:52px 0 calc(28px + env(safe-area-inset-bottom))}
.fuss__raster{display:grid;gap:28px}
@media (min-width:900px){.fuss__raster{grid-template-columns:1.3fr 1fr 1fr}}
.fuss .ppl{--ppl-s:34px}
.fuss__claim{margin-top:12px;max-width:26em;line-height:1.5}
.fuss h4{margin:0 0 10px;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.fuss ul{display:grid;gap:2px}
.fuss ul a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;font-weight:600}
@media (hover:hover){.fuss ul a:hover{text-decoration:underline}}
.fuss__unten{margin-top:30px;padding-top:20px;border-top:1.5px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}

/* Pause-Schalter (im Hero und in den Tools) */
.pause{position:relative;z-index:7;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;border:2px solid var(--navy);background:#fff;color:var(--navy);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 0 var(--navy)}
.pause .ic{width:17px;height:17px}
.pause--hell{justify-self:center;background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px}
.vertrauen li{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:999px;background:#fff;border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy);font-weight:700;font-size:14px;line-height:1.15}
.vertrauen b{font:italic 800 22px/1 var(--display);color:var(--halle)}
.vertrauen .ic{width:20px;height:20px;color:var(--halle)}

/* ---------- Bewegung ---------- */
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes aufsteigen{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wippen{0%,100%{rotate:0deg}50%{rotate:-2.5deg}}
.anim [data-zeigen]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.anim [data-zeigen].ist-da{opacity:1;transform:none}
/* Hero: nur ein einmaliges, ruhiges Einblenden (keine Endlos-Bewegung) */
@keyframes ruhig-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anim [data-held]{animation:ruhig-rein .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*60ms)}
.anim:not(.bewegung-aus) .schwebt{animation:schweben 5.5s ease-in-out infinite}
.anim:not(.bewegung-aus) .wippt{animation:wippen 4.5s ease-in-out infinite;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){
  /* ruhige Fassung: nur Deckkraft, nichts wandert */
  .anim [data-zeigen]{transform:none;transition:opacity .8s ease}
  .anim [data-held]{animation:einblenden .45s ease both;animation-delay:calc(var(--i,0)*60ms)}
  .anim .schwebt,.anim .wippt{animation:none!important}
  html{scroll-behavior:auto}
}
.bewegung-aus .schwebt,.bewegung-aus .wippt{animation:none!important}

/* ---------- Ergänzungen für die Live-Seiten (Unterseiten, Fuß, Banner) ---------- */
.ppw{margin:0}
.knopf--gross{min-height:64px;padding:0 28px;font-size:18px}
.mitte-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,40px)}
.eyebrow--hell{color:var(--lime)}
.karte__p{color:#DCE3F2}
.abschnitt--sand2{background:var(--wand-hell)}
.stores--gross img{height:52px}
.inklusive__beide{display:block;margin-top:4px}
.tarif .tarif__alt.textlink{display:flex;justify-content:center;font-size:14.5px;font-weight:700;color:var(--tinte-2);text-underline-offset:3px}
.preise__klein a{font-weight:700}

/* Banner mit direktem Knopf */
.banner__aktion{display:grid;gap:14px;justify-items:start}
@media (min-width:1000px){.banner__aktion{justify-items:end}}

/* Seitenkopf der Unterseiten */
.seitenkopf{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#EDE0D1 0%,var(--wand) 70%,#E2CDB8 100%);border-bottom:4px solid var(--koralle)}
.seitenkopf::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;z-index:-1;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 1H64M0 13H64M32 1v12M16 13v11M48 13v11' fill='none' stroke='%23C9A98B' stroke-width='2'/%3E%3C/svg%3E") 0 0/64px 24px repeat-x;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.seitenkopf__raster{display:grid;gap:30px;padding:34px 0 clamp(36px,5vw,64px)}
.seitenkopf__text{display:grid;gap:18px;align-content:start}
.seitenkopf__text--mitte{justify-items:center;text-align:center}
.seitenkopf__text--mitte .held__lead{margin-inline:auto}
.seitenkopf__text--mitte .held__badge{justify-self:center}
.seitenkopf__titel{font-size:clamp(44px,5vw,72px);line-height:.9;color:var(--navy)}
.seitenkopf__bild{position:relative;height:clamp(360px,92vw,520px)}
.seitenkopf__bild .fenster{position:absolute;inset:0 0 34px 0}
.seitenkopf__bild .szene{object-position:50% 65%}
.seitenkopf__phone{position:absolute;right:6%;bottom:0;--pw:clamp(168px,44vw,240px);z-index:3}
.seitenkopf__figur{left:2%;bottom:6px;height:62%;z-index:2}
@media (min-width:1100px){
  .seitenkopf__raster{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:48px;padding-top:48px;align-items:center}
  .seitenkopf__raster--eins{grid-template-columns:1fr}
  .seitenkopf__bild{height:540px}
}
.seitenkopf--kompakt .seitenkopf__raster{padding-bottom:clamp(30px,4vw,48px)}

/* App-Seite: Hero mit Fächer, Boden ohne Weiche */
.held--seite .held__boden--leer{padding:0;height:clamp(70px,8vw,120px)}
@media (min-width:1100px){.held--seite .held__boden--leer{height:120px}}

/* Gratis-Einheiten */
.einheiten{display:grid;gap:20px}
@media (min-width:760px){.einheiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1140px){.einheiten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.einheit{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--r-l);border:2.5px solid var(--navy);background:#fff;box-shadow:0 8px 0 var(--navy)}
.einheit__bild{position:relative;height:210px;overflow:hidden;border-bottom:2.5px solid var(--navy);background:var(--wand)}
.einheit__bild .szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.einheit__bild .figur{right:8%;bottom:-6px;height:92%}
.einheit__in{display:grid;gap:12px;align-content:start;padding:20px 20px 24px}
.einheit__in h3{font-size:clamp(28px,2.4vw,34px)}
.einheit__in p{color:#33415C}
.einheit__in .knopf{margin-top:6px;justify-self:start}
.einheit__meta{display:flex;flex-wrap:wrap;gap:8px}
.einheit__meta span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:99px;background:var(--wand-hell);border:1.5px solid var(--linie);font-weight:800;font-size:13.5px;color:var(--navy)}
.einheit__in .einheit__std{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:700;color:var(--tinte-2)}
.einheit__std .ic{color:var(--halle);margin-top:2px}

/* Schritte */
.schritte-abschnitt{background:#fff;border-block:2.5px solid var(--navy)}
.schritte{display:grid;gap:16px;counter-reset:s}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.schritte li{display:grid;gap:10px;align-content:start;padding:22px;border-radius:24px;background:var(--sand);border:2.5px solid var(--navy);box-shadow:0 6px 0 var(--navy)}
.schritte b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lime);border:2.5px solid var(--navy);font:italic 800 30px/1 var(--display)}
.schritte h3{font-size:clamp(26px,2.2vw,32px)}
.schritte p{color:#33415C}

/* Schullizenz */
.lizenz{background:var(--navy);color:#fff}
.lizenz h2{color:#fff}
.lizenz .eyebrow{color:var(--lime)}
.lizenz .lead{color:#DCE3F2}
.lizenz .haken li{color:#fff}
.lizenz .textlink{color:#fff}
.lizenz__raster{display:grid;gap:30px;align-items:center}
.lizenz__text{display:grid;gap:16px;align-content:start}
.lizenz__bild{position:relative;height:clamp(260px,60vw,420px)}
.lizenz__bild .fenster{position:absolute;inset:0;border-color:var(--lime);box-shadow:0 8px 0 var(--lime)}
.lizenz__bild .szene{object-position:50% 30%}
@media (min-width:1000px){.lizenz__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}

/* Kacheln „enthalten“ */
.kacheln-inkl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.kacheln-inkl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kacheln-inkl li{display:grid;gap:6px;padding:22px 18px;border-radius:22px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 6px 0 var(--navy)}
.kacheln-inkl b{font:italic 800 clamp(44px,4vw,60px)/.9 var(--display);color:var(--halle)}
.kacheln-inkl span{font-weight:700}

/* Vorteile (App-Seite) */
.vorteile{display:grid;gap:16px}
@media (min-width:760px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1140px){.vorteile{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vorteile li{display:grid;gap:8px;align-content:start;padding:22px;border-radius:24px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 6px 0 var(--navy)}
.vorteile b{font:italic 800 clamp(24px,2vw,30px)/1 var(--display);text-transform:uppercase}
.vorteile p{color:#33415C;font-size:15.5px}
.vorteile__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--lime);border:2px solid var(--navy)}
.vorteile__ic .ic{width:24px;height:24px}

/* Themen (K–5) */
.themen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:760px){.themen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1140px){.themen{grid-template-columns:repeat(6,minmax(0,1fr))}}
.themen li{display:grid;justify-items:center;gap:10px;padding:16px 12px 18px;border-radius:22px;background:#fff;border:2.5px solid var(--navy);box-shadow:0 5px 0 var(--navy);text-align:center}
.themen img{height:120px;width:auto}
.themen b{font:italic 800 21px/1.05 var(--display);text-transform:uppercase}

/* Fuß */
.fuss{background:var(--navy);color:#DCE3F2}
.fuss a{color:#DCE3F2;text-decoration:none}
@media (min-width:900px){.fuss__raster--4{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fuss__marke{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.fuss__marke .ppl{--ppl-s:34px}
.fuss__by{padding-left:12px;border-left:2px solid rgba(255,255,255,.25);font-weight:700;font-size:13px;color:#DCE3F2}
.fuss__h{margin:0 0 10px;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lime);font-style:normal}
.fuss__stores{margin-top:16px}
.fuss__stores img{height:40px}
.fuss ul a{min-height:40px;overflow-wrap:anywhere}

/* Schmale Handys (320 px): Tool-Karten dürfen nicht breiter als der Bildschirm werden */
.werkzeuge{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.werkzeuge{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1140px){.werkzeuge{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:379px){.segmente button{white-space:normal;font-size:11.5px;line-height:1.1;padding:0 3px}.wz{padding:16px}.wz__demo{padding:10px}.teamk{padding:8px}.ava{width:26px;height:26px}}
/* /shop/: Preisteil direkt unter dem Seitenkopf, ohne doppelte Überschrift */
.ppw--shop .preise .kopfzeile{display:none}
.ppw--shop .preise{padding-top:clamp(40px,5vw,64px)}
/* Optin-Inhalte (deutscher A/CH-Hinweis) auf den US-Seiten nicht zeigen */
.ppw .optn-conversion-contents{display:none!important}