:root{--ink:#121C33;--acc:#2D5BD7;--papier:#F5F7FC;--linie:#DDE3F0;--mitte:#55607A}
*{margin:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--ink);font:400 18px/1.55 'Hanken Grotesk',system-ui,sans-serif}
[hidden]{display:none!important}
img,video,svg{display:block;max-width:100%}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font:italic 400 1.12em/1 'Instrument Serif',serif;text-transform:none;color:var(--acc);letter-spacing:0}
h1{font-size:clamp(38px,9vw,68px)} h2{font-size:clamp(27px,6vw,42px);margin-bottom:20px} h3{font-size:clamp(23px,5vw,32px);margin-bottom:14px}
h4{font-size:17px;font-weight:600;line-height:1.3}
p+p{margin-top:14px}
.kicker{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
main{max-width:760px;margin:0 auto;padding:0 20px}
main>section{padding:44px 0;border-bottom:1px solid var(--linie)} main>section:last-child{border-bottom:0}
.zahlenreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.fakt b{display:block;font:900 clamp(24px,6vw,36px)/1.1 'Archivo',sans-serif;font-stretch:125%;color:var(--acc)} .fakt span{font-size:15px;color:var(--mitte);line-height:1.3;display:block;margin-top:4px}
.pains{list-style:none;padding:0;margin-bottom:24px} .pains li{padding:12px 0 12px 26px;position:relative;border-top:1px solid var(--linie)} .pains li:before{content:"→";position:absolute;left:0;color:var(--acc);font-weight:600}
.scouts img{width:100%;border-radius:14px;margin-bottom:24px;aspect-ratio:3/2;object-fit:cover}
.fortschritt{color:var(--mitte);margin-bottom:8px}
.skill{padding-top:36px}
.nr{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;font:900 20px/40px 'Archivo',sans-serif;text-align:center;margin-bottom:14px}
.videos{display:grid;gap:18px;margin-top:20px}
.video{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.video video{width:100%;aspect-ratio:1280/826;background:#0C1326}
.vkopf{display:flex;align-items:center;gap:10px;padding:12px 14px}
.vkopf h4{flex:1}
.zeit{font-size:14px;color:var(--mitte)}
.haken{width:24px;height:24px;border-radius:50%;background:var(--linie);color:#fff;font-size:14px;line-height:24px;text-align:center;flex:none}
.video.gesehen .haken{background:var(--acc)}
.kurve{color:var(--acc);margin-top:20px;width:100%;height:auto}
.kurve text{fill:var(--ink);font-family:'Hanken Grotesk',sans-serif}
.typen{padding-left:22px;margin:12px 0} .typen li{padding:4px 0}
.schluss{text-align:left}
.knopf{display:inline-block;margin-top:20px;background:var(--acc);color:#fff;font-weight:600;padding:14px 22px;border-radius:999px;text-decoration:none}
.sig{font:400 44px/1 'Reenie Beanie',cursive;color:var(--acc);transform:rotate(-4deg);margin-top:22px;width:max-content}
footer{max-width:760px;margin:0 auto;padding:20px 20px 40px;display:flex;gap:20px;font-size:14px} footer a{color:var(--mitte)}
.stufe1{background:#121C33;color:#fff;min-height:100vh;display:flex;flex-direction:column}
.stufe1 footer{width:100%} .stufe1 footer a{color:rgba(255,255,255,.7)}
.tor{flex:1;max-width:900px;width:100%;padding:32px 20px 24px}
.tor h1{font-size:clamp(30px,6.4vw,56px);margin-bottom:22px} .tor h1 em{color:#fff}
.tor video{width:100%;aspect-ratio:1280/676;border-radius:14px;background:#0C1326}
.torhin{margin-top:16px;font-size:16px;opacity:.85}
.knopf.gross{display:block;text-align:center;font-size:19px;padding:18px 24px;margin-top:18px}
.knopf:focus-visible,.ytstart:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--acc)}
.zurueck{display:inline-block;font-size:15px;color:var(--mitte);margin-bottom:18px}
.inhaltkopf{font-size:clamp(30px,6.4vw,50px);margin-bottom:22px}
.oben p{margin-top:8px}
blockquote{margin:18px 0;padding:16px 18px;background:#fff;border-left:4px solid var(--acc);border-radius:0 12px 12px 0;font-size:19px;line-height:1.4}
.ytstart{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;position:relative;width:100%;aspect-ratio:16/9;border:0;padding:14px;cursor:pointer;color:#fff;font:inherit;text-align:left;background:linear-gradient(145deg,#2D5BD7,#121C33)}
.spiel{position:absolute;top:36%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.95)}
.spiel:after{content:"";position:absolute;left:23px;top:17px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent var(--acc)}
.yvon{font-weight:600;position:relative} .yhin{font-size:13px;line-height:1.3;opacity:.9;position:relative}
.ytstart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ytstart:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,rgba(18,28,51,0),rgba(18,28,51,.88));z-index:0}
.ytstart .spiel{z-index:2}.ytstart .yvon,.ytstart .yhin{z-index:2}
.ytplayer{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0C1326}
.warum{padding:0 14px 14px;font-size:15px;color:var(--mitte);line-height:1.4}
.frame{background:var(--ink);color:#fff;border-radius:16px;padding:32px 22px!important;margin-top:32px;border:0!important}
.frame h2 em{color:#fff} .framelead{font-size:21px;line-height:1.35;font-weight:600}
.quellen{font-size:14px;color:var(--mitte)} .quellen h4{font-size:14px;margin-bottom:8px} .quellen ul{list-style:none;padding:0} .quellen li{padding:4px 0} .quellen a{color:inherit}
@media (min-width:700px){.videos{grid-template-columns:1fr 1fr}}
.einwilligung{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;margin:0 auto;background:#fff;color:var(--ink);border:1px solid var(--linie);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.4;box-shadow:0 8px 30px rgba(18,28,51,.25);z-index:20}
.einwilligung a{color:inherit}
.ewknoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ewknoepfe button{font:600 15px 'Hanken Grotesk',sans-serif;padding:11px;border-radius:999px;border:1.5px solid var(--acc);background:#fff;color:var(--acc);cursor:pointer}
.kunden{margin-top:30px;padding:0!important;border:0!important}
.kunden p{font-size:16px;font-weight:600;text-align:center}
.laufband{overflow:hidden;margin:16px -20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband .spur{display:flex;align-items:center;gap:44px;width:max-content;animation:lauf 55s linear infinite}
.laufband img{height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.92;flex:none}
@keyframes lauf{to{transform:translateX(calc(-50% - 22px))}}
@media (prefers-reduced-motion:reduce){.laufband .spur{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.laufband img[aria-hidden]{display:none}}