@font-face{font-family:"Bricolage Grotesque";src:url(schriften/bricolage-500.woff2?v=a79fdb52) format("woff2");font-weight:500 800;font-display:swap}@font-face{font-family:"Instrument Sans";src:url(schriften/instrument-400.woff2?v=2ee17598) format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:"JetBrains Mono";src:url(schriften/jetbrains-400.woff2?v=83c005d4) format("woff2");font-weight:400 700;font-display:swap}
:root{--f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--h-bg:#E7E9EC;--h-fg:#15181D;--h-muted:#626A75;--h-line:#CDD2D9;--h-acc:#3C78A8;--h-deep:#2A5A82;--h-soft:#D6E2EC;--h-on:#FFFFFF;--h-dot:rgba(42,90,130,.24);--h-card:#FFFFFF;--l-bg:#E7E9EC;--l-fg:#15181D;--l-muted:#626A75;--l-line:#CDD2D9;--l-acc:#3C78A8;--l-deep:#2A5A82;--l-soft:#D6E2EC;--l-on:#FFFFFF;--l-dot:rgba(42,90,130,.24);--l-card:#FFFFFF;--d-bg:#1B1E23;--d-fg:#EEF0F2;--d-muted:#9AA1AC;--d-line:#363B44;--d-acc:#6A9FC9;--d-deep:#8DB6D8;--d-soft:#1F3142;--d-on:#0D1620;--d-dot:rgba(106,159,201,.20);--d-card:#282C33;--wort:6.45;--thema:13.045}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--h-bg)}
.hp,.hp *{box-sizing:border-box}
.hp{--screen:100svh;--bar:60px;--pad:clamp(16px,3.6cqw,48px);--rand:rgba(20,20,24,.08);container:hp/inline-size;color:var(--h-fg);background:var(--h-bg);font-family:var(--f-body);color-scheme:light;position:relative;max-width:100%}
.hp>*{--gap:clamp(20px,3cqw,48px);--buehne:clamp(240px,27cqw,352px);--r:min(56cqw,1000px);--fs:calc(var(--r)/var(--wort))}
.hp[data-modus="dunkel"]{--h-bg:var(--d-bg);--h-fg:var(--d-fg);--h-muted:var(--d-muted);--h-line:var(--d-line);--h-acc:var(--d-acc);--h-deep:var(--d-deep);--h-soft:var(--d-soft);--h-on:var(--d-on);--h-dot:var(--d-dot);--h-card:var(--d-card);color-scheme:dark}
.hp[data-modus="dunkel"] :is(.reel,.vid){--h-bg:var(--l-bg);--h-fg:var(--l-fg);--h-muted:var(--l-muted);--h-line:var(--l-line);--h-acc:var(--l-acc);--h-deep:var(--l-deep);--h-soft:var(--l-soft);--h-on:var(--l-on);--h-dot:var(--l-dot);--h-card:var(--l-card);color:var(--h-fg);color-scheme:light}
body:has(.hp[data-modus="dunkel"]){background:var(--d-bg)}
.hp a{color:inherit;text-decoration:none}
.hp h1,.hp h2,.hp p{margin:0}
.hp [hidden]{display:none!important}
.hp .dotbg{background-image:radial-gradient(circle,var(--h-dot) .9px,transparent 1.3px);background-size:10px 10px}
.hp .fg{display:block}
.hp .fg img,.hp .fg svg{display:block;width:100%;height:auto}
.hp .sp{display:block;line-height:0}

/* Leiste */
.hp .bar{display:flex;align-items:center;gap:18px;padding:12px var(--pad);background:var(--h-bg);border-bottom:1px solid var(--h-line);position:relative;z-index:3}
.hp .brand{display:flex;align-items:center;gap:8px;font:800 21px var(--f-display);letter-spacing:-.03em;white-space:nowrap}
.hp .brand b,.hp .word b{color:var(--h-deep);font-weight:800}
.hp .f-nav{width:32px}
.hp .links{margin-left:auto;display:flex;gap:22px;font:600 14.5px var(--f-body);color:var(--h-muted);white-space:nowrap}
.hp .links a:hover,.hp .modus:hover{color:var(--h-fg)}
.hp .modus{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
.hp .rund{display:none;position:relative;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;background:var(--h-card);border:1.5px solid var(--h-line);color:var(--h-fg);flex:none}
.hp .rund::after{content:"";position:absolute;inset:-4px}
.hp .rund svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp .rund .sonne,.hp[data-modus="dunkel"] .rund .mond{display:none}
.hp[data-modus="dunkel"] .rund .sonne{display:block}

/* Knöpfe: Pille für alles Klickbare */
.hp .igbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px var(--f-body);background:var(--h-deep);color:var(--h-on)!important;border-radius:999px;padding:13px 20px;white-space:nowrap;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
.hp .igbtn:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--rand)}
.hp .igbtn:active{transform:scale(.98)}
.hp .igbtn.sm{font-size:14px;padding:9px 15px}
.hp .igbtn.hell{background:var(--h-on);color:var(--h-deep)!important}
.hp .igbtn svg,.hp .reel .ui svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.hp .ghost{display:inline-flex;align-items:center;font:600 15px var(--f-body);border:1.5px solid var(--h-line);border-radius:999px;padding:12px 18px;background:var(--h-card);transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.hp .ghost:hover{border-color:var(--h-deep);transform:translateY(-2px)}
.hp .ghost.handy{display:none}
.hp button:focus-visible,.hp a:focus-visible,.hp input:focus-visible{outline:2px solid var(--h-deep);outline-offset:2px}

/* Erster Bildschirm */
.hp .hero{display:grid;grid-template-columns:minmax(0,1fr) var(--buehne);gap:var(--gap);align-items:center;padding:clamp(30px,4.6cqw,64px) var(--pad);overflow:hidden}
.hp .mark{display:grid;gap:calc(var(--r)*.034);min-width:0;position:relative;z-index:1}
.hp .logo2{display:flex;align-items:center;gap:calc(var(--fs)*.17);flex-wrap:nowrap}
.hp .f-logo{flex:0 0 calc(var(--fs)*1.15)}
.hp .word{font:800 var(--fs)/.92 var(--f-display);letter-spacing:-.034em;white-space:nowrap}
.hp .tag2{font:700 calc(var(--r)/26.5)/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--h-deep);white-space:nowrap}
.hp .lead{font-size:calc(var(--r)/25);line-height:1.3;white-space:nowrap;letter-spacing:-.005em}
.hp .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.hp .stage{position:relative;display:grid;place-items:center;min-width:0}
.hp .rays{--strahl:min(216%,760px);position:absolute;left:50%;top:50%;width:var(--strahl);aspect-ratio:1;margin:calc(var(--strahl)/-2) 0 0 calc(var(--strahl)/-2);border-radius:50%;background:repeating-conic-gradient(from 4deg,var(--h-soft) 0deg 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 34%,transparent 70%);mask:radial-gradient(circle,#000 34%,transparent 70%);animation:hpDreh 90s linear infinite}
.hp .iphone{position:relative;width:min(322px,100%);aspect-ratio:9/19;border-radius:48px;padding:10px;background:linear-gradient(145deg,#5C5F66,#2B2D31 40%,#3D4046);box-shadow:inset 0 0 0 1.5px #75787F,0 34px 70px rgba(20,20,24,.3);transform:rotate(2.4deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hp .stage:hover .iphone{transform:rotate(0)}
.hp .isl2{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:14px;background:#000;z-index:4}

/* Das Reel: alle Maße relativ zur eigenen Breite, dadurch gleich im iPhone und am Handy */
.hp .reel{container:reel/inline-size;position:relative;display:block;height:100%;border-radius:38px;overflow:hidden;background-color:var(--h-bg)}
.hp .burst{position:absolute;left:50%;bottom:-34cqw;width:150cqw;aspect-ratio:1;margin-left:-75cqw;border-radius:50%;background:repeating-conic-gradient(from 4deg,var(--h-soft) 0deg 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 40%,transparent 68%);mask:radial-gradient(circle,#000 40%,transparent 68%)}
.hp .pbar{position:absolute;top:calc(14cqw + 2px);left:6cqw;right:6cqw;display:flex;gap:1.3cqw}
.hp .pbar i{flex:1;height:1cqw;min-height:3px;border-radius:3px;background:rgba(120,120,120,.25);overflow:hidden;display:block}
.hp .pbar b{display:block;height:100%;width:0;background:var(--h-fg)}
.hp .topic2{position:absolute;top:19cqw;right:6cqw;font:700 3.6cqw var(--f-mono);letter-spacing:.1em;color:var(--h-deep);text-transform:uppercase}
.hp .scene{position:absolute;left:7cqw;right:7cqw;top:25%;display:grid;gap:3.6cqw;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.hp .scene.on{opacity:1;transform:none}
.hp .scene .t{font:800 12.6cqw/1 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.hp .scene .t em{font-style:normal;color:var(--h-deep)}
.hp .scene .s{justify-self:start;font:700 4.2cqw/1.25 var(--f-body);background:var(--h-deep);color:var(--h-on);padding:1.8cqw 3cqw;border-radius:2.6cqw;max-width:100%}
.hp .cast{position:absolute;left:5cqw;right:6cqw;bottom:13cqw;display:flex;justify-content:space-between;align-items:flex-end}
.hp .c-l{width:54cqw}.hp .c-r{width:34cqw}
.hp .cast .m{display:none}
.hp .cast .m.on{display:block;animation:hpHop .5s cubic-bezier(.16,1,.3,1)}
.hp .ui{position:absolute;left:6cqw;right:6cqw;bottom:5cqw;display:flex;justify-content:space-between;align-items:center;font:600 3.8cqw var(--f-body);color:var(--h-muted)}
.hp .ui span{display:flex;gap:3cqw}
.hp .reel .ui svg{width:5.4cqw;height:5.4cqw;stroke:var(--h-fg)}
@keyframes hpHop{0%{transform:translateY(10px) scale(.94)}100%{transform:none}}
@keyframes hpDreh{to{transform:rotate(360deg)}}

/* Laufband: jedes Thema ist ein Sprung zur Auswahl */
.hp .band{background:var(--h-fg);overflow:hidden;position:relative;z-index:1}
.hp .spur{display:flex;width:max-content;animation:hpBand 204s linear infinite}
.hp .band:hover .spur,.hp .band:focus-within .spur{animation-play-state:paused}
.hp .gruppe{display:flex;align-items:center}
.hp .band button{font:800 clamp(24px,3.3cqw,40px)/1 var(--f-display);letter-spacing:-.025em;color:var(--h-bg);background:none;border:0;padding:15px 22px;cursor:pointer;white-space:nowrap;transition:color .15s}
.hp .band button:hover{color:var(--h-soft)}
.hp .band i{display:block;width:10px;height:10px;background:var(--h-acc);flex:none}
@keyframes hpBand{to{transform:translateX(-50%)}}

/* Themen und Videos */
.hp .themes{padding:clamp(34px,5cqw,68px) var(--pad);display:grid;gap:16px;scroll-margin-top:12px}
.hp .kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hp .themes h2{font:800 clamp(28px,3.7cqw,46px)/1.02 var(--f-display);letter-spacing:-.03em}
.hp .find{flex:0 1 380px;min-width:0}
.hp .find input{width:100%;font:500 16px var(--f-body);padding:13px 18px;border:1.5px solid var(--h-line);border-radius:999px;background:var(--h-card);color:var(--h-fg)}
.hp .find input::placeholder{color:var(--h-muted);opacity:1}
.hp .sub2{font:12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted);margin-top:8px}
.hp .vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),1fr));gap:12px}
.hp .vid{container:vid/inline-size;aspect-ratio:9/14.5;border-radius:18px;border:1px solid var(--h-line);background-color:#FFFFFF;position:relative;display:block;overflow:hidden;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.hp .vid:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 18px 34px var(--rand)}
.hp .vid:active{transform:scale(.98)}
.hp .vid .hook{position:absolute;left:9cqw;right:9cqw;top:10cqw;font:800 15cqw/1.02 var(--f-display);letter-spacing:-.025em}
.hp .vid em{font-style:normal;color:var(--h-deep)}
.hp .vid.ac{background-color:var(--h-deep);border-color:var(--h-deep);color:var(--h-on);background-image:none}
.hp .vid.ac em{color:var(--h-on);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.1em}
.hp .vid.weich{background-color:var(--h-soft);border-color:var(--h-soft)}
.hp .vid .pl{position:absolute;left:9cqw;bottom:6cqw;font:700 6cqw var(--f-mono);letter-spacing:.02em;white-space:nowrap;line-height:1}
.hp .vid .f{position:absolute;right:6cqw;bottom:19cqw;width:56cqw;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.hp .vid .f2{position:absolute;left:5cqw;bottom:19cqw;width:33cqw;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.hp .vid:hover .f,.hp .vid:hover .f2{transform:translateY(-4px) scale(1.06)}
.hp .vid .neu{position:absolute;top:0;right:0;font:700 5.6cqw var(--f-mono);letter-spacing:.08em;background:var(--h-fg);color:var(--h-bg);border-bottom-left-radius:10px;padding:1.6cqw 3.4cqw}
.hp .empty{font-size:16px;color:var(--h-muted)}

/* Abschluss */
.hp .follow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(34px,4.6cqw,60px) var(--pad) 0;background-color:var(--h-deep);color:var(--h-on);background-image:none;overflow:hidden}
.hp .f-text{display:grid;gap:22px;justify-items:start;padding-bottom:clamp(34px,4.6cqw,60px)}
.hp .follow h2{font:800 clamp(34px,5.4cqw,72px)/1 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.hp .f-bild{display:flex;align-items:flex-end;gap:14px;margin-bottom:8px}
.hp .f-gross{width:clamp(150px,19cqw,250px)}
.hp .f-mittel{width:clamp(96px,12cqw,160px)}
.hp footer{padding:18px var(--pad);display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--h-muted);padding-bottom:max(18px,env(safe-area-inset-bottom))}
.hp footer a:hover{color:var(--h-fg)}
.hp .stick{display:none}

/* Einblenden nur, wenn das Skript läuft */
.hp.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.hp.js .rv.in{opacity:1;transform:none}

/* Am Rechner: Leiste bleibt oben stehen, Knöpfe im ersten Bildschirm wachsen leicht mit */
@container hp (min-width:761px){
  .hp>*{--pad:max(clamp(16px,3.6cqw,48px),min(12.5cqw,(100cqw - var(--r) - var(--gap) - var(--buehne))/2))}
  .hp .bar{position:sticky;top:0;z-index:10}
  .hp .themes{scroll-margin-top:76px}
  .hp .hero{--r:min(45.36cqw,810px);--gap:clamp(16px,2.4cqw,40px);--frei:calc(100svh - var(--bar) - 1px - clamp(24px,3.3cqw,40px) - 30px - 12px);--b0:clamp(240px,27cqw,352px);--h0:min(322px,var(--b0));--w:max(200px,min(var(--h0),calc((var(--frei) - 40px)*9/19)));--buehne:calc(var(--b0) - var(--h0) + var(--w));--pad:max(clamp(16px,3.6cqw,48px),calc((100cqw - var(--r) - var(--gap) - var(--buehne))/2));padding-block:clamp(20px,calc((var(--frei) - var(--h0)*19/9)/2),clamp(30px,4.6cqw,64px))}
  .hp .iphone{width:var(--w)}
  .hp .cast{bottom:25cqw}
  .hp .mark{top:calc(var(--r)*-.03)}
  .hp .lead{margin-top:calc(var(--r)*-.01)}
  .hp .btnrow{flex-wrap:nowrap;gap:8px;margin-top:calc(4px - var(--r)*.008)}
  .hp .btnrow .igbtn,.hp .btnrow .ghost{font-size:clamp(11.34px,calc(var(--r)/50),14.58px);padding:.75em 1.2em}
  .hp .btnrow .igbtn{gap:.6em}
  .hp .btnrow .igbtn svg{width:1.2em;height:1.2em}
}

/* Handy und schmale Fenster */
@container hp (max-width:760px){
  .hp .bar{padding:10px 16px;min-height:var(--bar)}
  .hp .links,.hp .bar .igbtn{display:none}
  .hp .rund{display:grid}
  .hp .brand{font-size:21px}
  .hp .hero{display:flex;flex-direction:column;padding:0;gap:0;background-image:none}
  .hp .stage{order:-1;width:100%}
  .hp .rays,.hp .isl2{display:none}
  .hp .iphone{width:100%;height:calc(var(--screen) - var(--bar));min-height:520px;aspect-ratio:auto;border-radius:0;padding:0;background:none;box-shadow:none;transform:none!important}
  .hp .reel{border-radius:0;background-image:radial-gradient(circle,var(--h-dot) .9px,transparent 1.3px);background-size:10px 10px}
  .hp .pbar{top:4.5cqw}
  .hp .topic2{top:9cqw}
  .hp .ui{bottom:calc(2.5cqw + 76px)}
  .hp .scene{top:calc(21% - 16px)}
  .hp .scene .t{font-size:13.4cqw}
  .hp .scene .s{font-size:4.6cqw}
  .hp .c-l{width:52cqw}.hp .c-r{width:33cqw}
  .hp .cast{bottom:calc(9cqw + 98px)}
  .hp .mark{width:100%;padding:24px 16px 32px;gap:10px}
  .hp .logo2{gap:10px}
  .hp .f-logo{flex-basis:17cqw}
  .hp .word{font-size:min(13.6cqw,92px)}
  .hp .tag2{font-size:min(3cqw,15px);letter-spacing:.05em}
  .hp .lead{font-size:min(3.56cqw,22px);letter-spacing:-.012em}
  .hp .btnrow .igbtn{display:none}
  .hp .kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .hp .ghost.handy{display:inline-flex}
  .hp .themes h2{font-size:calc((100cqw - 2*var(--pad))/var(--thema));font-variation-settings:"opsz" 24;white-space:nowrap}
  .hp .find{flex:none;width:100%}
  .hp .vids{grid-template-columns:1fr 1fr}
  .hp .follow .igbtn{display:none}
  .hp .follow h2{font-size:min(7.4cqw,48px)}
  .hp .f-gross{width:26cqw}
  .hp .f-mittel{width:16cqw}
  .hp .stick{display:flex;position:sticky;bottom:0;z-index:6;padding:10px 16px max(14px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--h-bg) 72%,transparent)}
  .hp .stick .igbtn{flex:1;font-size:16px;padding:15px}
}
@media (max-height:720px){
  .hp .c-l{width:42cqw}.hp .c-r{width:27cqw}
}
@container hp (max-width:345px){
  .hp .lead{white-space:normal;text-wrap:balance;font-size:14px}
  .hp .btnrow .ghost{padding-inline:13px}
}
@media (prefers-reduced-motion:reduce){
  .hp .scene{transition:none}
  .hp .cast .m.on,.hp .rays{animation:none}
  .hp .spur{animation:none;width:100%;flex-wrap:wrap}
  .hp .gruppe{flex-wrap:wrap}
  .hp .gruppe[aria-hidden]{display:none}
  .hp .igbtn,.hp .vid,.hp .iphone{transition:none}
}

/* Impressum und Datenschutz */
body.recht{color:var(--h-fg);font:17px/1.6 var(--f-body)}
.recht .blatt{padding:32px max(16px,env(safe-area-inset-left)) 56px;max-width:880px;margin:0 auto}
.recht .zurueck{font:800 22px var(--f-display);letter-spacing:-.03em;color:var(--h-deep);text-decoration:none}
.recht h1{font:800 clamp(34px,6vw,52px)/1.05 var(--f-display);letter-spacing:-.03em;margin:26px 0 12px}
.recht h2{font:800 22px/1.2 var(--f-display);margin:30px 0 8px}
.recht p{margin:0}