@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-800-normal.woff2) format("woff2")}

:root{--bg:#121A33;--card:#1D2850;--yellow:#FFD21F;--text:#FFFFFF;--muted:#B5BFE6;--ink:#121A33;--line:#6F7BA8;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-weight:500;line-height:1.4}
a{color:var(--yellow)}a:hover{color:#fff}
img{max-width:100%}
h1,h2{text-wrap:balance}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:18px max(16px,5%)}
.logo{font-weight:800;font-size:26px;color:var(--yellow);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.top nav a{color:#fff;font-weight:700;font-size:18px;text-decoration:none;padding:10px 0}
.top nav a[aria-current]{color:var(--yellow)}
.top nav a:hover{color:var(--yellow)}
.top nav a.btn-small{color:var(--ink);background:var(--yellow);font-weight:800;padding:10px 22px;border-radius:999px}
.top nav a.btn-small:hover{background:#fff;color:var(--ink)}
.btn{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;font-size:20px;text-decoration:none;padding:14px 28px;border:2px solid var(--yellow);border-radius:999px;font-family:inherit;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}.btn-dark:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-ghost{background:rgba(18,26,51,.55);color:#fff;border-color:#fff}.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{background:transparent;color:#fff;border-color:#fff}.btn-outline:hover{background:#fff;color:var(--ink)}
.yellow .btn-outline{color:var(--ink);border-color:var(--ink)}.yellow .btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-small{font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.wrap{max-width:1180px;margin:0 auto;padding:40px max(16px,5%)}
.wrap-wide{max-width:1320px;margin:0 auto;padding:12px max(16px,3%) 0}
.h2{margin:0 0 24px;font-size:clamp(28px,4vw,40px);font-weight:800}
.lead{font-size:clamp(20px,2.4vw,26px);max-width:760px;margin:0}
.tag,.tag-dark{align-self:flex-start;display:inline-block;font-weight:800;font-size:20px;padding:6px 18px;border-radius:999px}
.tag{background:var(--yellow);color:var(--ink)}.tag-dark{background:var(--ink);color:#fff}

/* Karussell */
.stage{position:relative;min-height:clamp(560px,50vw,620px);border-radius:26px;overflow:hidden;background:var(--card);isolation:isolate}
.stage:focus-visible{outline:3px solid #fff;outline-offset:4px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:16px;padding:clamp(24px,5vw,64px) clamp(20px,5vw,72px) 96px;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide .copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.slide h2{margin:0;font-size:clamp(38px,5.4vw,76px);line-height:1.02;font-weight:800}
.slide p{margin:0;font-size:clamp(18px,2vw,24px);max-width:520px}
.slide .art{position:relative;z-index:2;align-self:end;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1.5vw,20px);transform-origin:50% 100%;min-width:0}
.slide .art img{height:min(78%,440px);width:auto;max-width:48%;object-fit:contain}
.s-team{background:radial-gradient(120% 120% at 80% 100%,#2B3A78 0%,#1D2850 55%,#161F40 100%)}
.s-post{background:var(--yellow);color:var(--ink)}
.s-post .art img{height:min(80%,420px)}
.s-ki{background:radial-gradient(100% 120% at 75% 100%,#2D4B9A 0%,#1D2850 60%)}
.s-ki .art img{height:min(62%,340px)}
.s-support{background:radial-gradient(120% 120% at 70% 100%,#4A3E7A 0%,#1D2850 55%,#141C3A 100%)}
.s-fall{background:radial-gradient(120% 120% at 80% 100%,#1B2C6B 0%,#161F40 70%)}
.art-frame{align-items:center}
.slide .art img.frame{width:100%;max-width:100%;height:auto;border-radius:18px;border:6px solid var(--yellow);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.slide.is-active .art{animation:zoomArt 9s ease-out both}
.slide.is-active .copy>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.slide.is-active .copy>*:nth-child(2){animation-delay:.1s}.slide.is-active .copy>*:nth-child(3){animation-delay:.2s}.slide.is-active .copy>*:nth-child(4){animation-delay:.3s}
.slide.is-active .pop{animation:pop .8s cubic-bezier(.2,.9,.3,1.25) both}
.slide.is-active .p2{animation-delay:.15s}.slide.is-active .p3{animation-delay:.3s}
@keyframes zoomArt{from{transform:scale(.92)}to{transform:scale(1.14)}}
@keyframes pop{from{transform:translateY(40px) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.controls{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,48px)}
.dots{display:flex;gap:10px}
.dot{width:14px;height:14px;padding:0;border-radius:50%;border:2px solid #fff;background:rgba(18,26,51,.7);cursor:pointer}
.dot[aria-current="true"]{background:var(--yellow);border-color:#fff;transform:scale(1.3)}
.arrows{display:flex;gap:10px;align-items:center}
.ctl{min-width:48px;height:48px;padding:0 16px;border-radius:999px;border:2px solid #fff;background:rgba(18,26,51,.72);color:#fff;font:800 20px Poppins,system-ui,sans-serif;cursor:pointer}
.ctl:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
#pause{font-size:15px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:var(--card);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px;font-size:20px;min-width:0}
.cards-team .card{align-items:flex-start}
.portrait{align-self:center;width:auto;margin-bottom:8px}
.card-title{font-size:30px;font-weight:800;color:var(--yellow)}
.card-big{font-size:40px;font-weight:800;color:var(--yellow)}
.card-soon{border:3px dashed var(--line);background:transparent}
.yellow{background:var(--yellow);color:var(--ink)}
.yellow h2{margin:0;font-size:clamp(30px,4.4vw,44px);line-height:1.1}
.split{display:flex;flex-wrap:wrap;gap:36px;align-items:center;padding-top:48px;padding-bottom:48px}
.thumb{flex:1 1 320px;min-width:0;max-width:520px;border-radius:16px;border:6px solid var(--ink)}
.stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start;flex:1 1 300px;min-width:0}
.h1-case{margin:0;font-size:clamp(34px,5.5vw,64px);line-height:1.05;font-weight:800}
.h1-post{margin:0;font-size:clamp(36px,6vw,68px);line-height:1.03;font-weight:800}
.video{position:relative;width:100%}
.video img{width:100%;display:block;border-radius:18px;border:6px solid var(--yellow)}
.video .btn{position:absolute;left:24px;bottom:24px}
.sources{background:#fff;color:var(--ink);border-radius:18px;padding:26px;width:100%}
.sources h2{font-size:32px;margin:0 0 10px}.sources p{margin:0;font-size:20px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:8px solid var(--yellow);margin-bottom:36px}
.pagehead h1{margin:0 0 24px;font-size:clamp(44px,7vw,72px);line-height:1;font-weight:800;color:var(--yellow)}
.duo{display:flex;align-items:flex-end;gap:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.case{text-decoration:none;background:var(--card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.case img{width:100%;display:block}
.case-no{padding:20px 22px 6px;font-size:20px;font-weight:800;color:var(--yellow)}
.case-title{padding:0 22px 24px;font-size:28px;line-height:1.15;font-weight:800;color:#fff}
.case.soon{justify-content:flex-end;min-height:300px;border:4px dashed var(--line);background:var(--card)}
.postsplit,.support-hero{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;padding-bottom:0}
.postsplit form,.support-hero .stack{padding-bottom:56px}
.duo-line{flex:1 1 300px;min-width:0;border-bottom:8px solid var(--yellow);justify-content:center}
.duo-line img{max-width:46%;height:auto!important;max-height:400px}
.row{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.row input{flex:1 1 200px;min-width:0;width:100%;font-size:20px;padding:14px 20px;border:0;border-radius:999px;font-family:inherit}
.amounts{display:flex;flex-wrap:wrap;gap:12px}
.msg{margin:0;font-size:20px;font-weight:700;color:var(--yellow)}
small{font-size:16px;font-weight:700;color:var(--muted)}
.cta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cta-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:18px;padding:26px;text-decoration:none;color:#fff;font-size:18px;border:3px solid transparent;transition:transform .15s,border-color .15s}
.cta-card:hover{transform:translateY(-3px);border-color:var(--yellow);color:#fff}
.cta-big{font-size:28px;font-weight:800;color:var(--yellow)}
.cta-main{background:var(--yellow);color:var(--ink)}.cta-main .cta-big{color:var(--ink)}.cta-main:hover{color:var(--ink);border-color:#fff}
.foot{padding:24px max(16px,5%);display:flex;flex-wrap:wrap;gap:24px;font-size:16px;font-weight:700}
.foot a{padding:12px 0}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:820px){
  .slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-bottom:84px}
  .slide .art{align-self:stretch}
  .slide .art img{height:min(100%,230px);max-width:46%}
  .s-ki .art img{height:min(100%,190px)}
  .stage{min-height:620px}
}
@media (max-width:600px){
  .top nav{gap:4px 16px}.top nav a{font-size:16px}
  .btn{font-size:18px;padding:12px 22px}
  .card-big{font-size:34px}
  .video .btn{left:12px;bottom:12px;font-size:16px;padding:10px 18px}
  .duo img:not(.portrait){height:auto!important;max-height:210px}
  #pause{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .slide{transition:none}
}

/* ===== Animation & Held-Bühne (v4) ===== */
:root{--bad:#FF4D5E;--good:#3DDC84}
.hero{padding-top:8px}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(8px,2vw,24px) 0}
.hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start;min-width:0}
.hero-copy h1{margin:0;font-size:clamp(44px,7vw,92px);line-height:1;font-weight:800;text-wrap:balance}
.term{margin:0;font:700 clamp(18px,2vw,24px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--good);min-height:1.4em;text-shadow:0 0 14px rgba(61,220,132,.45)}
[data-mode="bad"] .term{color:var(--bad);text-shadow:0 0 14px rgba(255,77,94,.45)}
.hero:has(#hstage[data-mode="good"]) .term{color:var(--good);text-shadow:0 0 14px rgba(61,220,132,.45)}
.caret{display:inline-block;width:.6ch;height:1.05em;margin-left:3px;vertical-align:-.15em;background:currentColor;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mode{display:inline-flex;padding:5px;background:var(--card);border-radius:999px;gap:4px;border:2px solid #2d3b78}
.mbtn{font:800 17px Poppins,system-ui,sans-serif;color:#fff;background:transparent;border:0;border-radius:999px;padding:11px 22px;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.mbtn:hover{transform:translateY(-1px)}
.mbtn[aria-pressed="true"]#m-bad{background:var(--bad);color:#fff}
.mbtn[aria-pressed="true"]#m-good{background:var(--good);color:var(--ink)}
.pulse{position:relative;display:inline-flex;align-items:center;gap:10px}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:3px solid var(--yellow);opacity:0;animation:ring 2.6s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(.94);opacity:.9}70%,100%{transform:scale(1.14);opacity:0}}
.bell{transform-origin:50% 8%;animation:bell 4s ease-in-out infinite}
@keyframes bell{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(16deg)}78%{transform:rotate(-14deg)}82%{transform:rotate(10deg)}86%{transform:rotate(-6deg)}90%{transform:rotate(0)}}
/* Glitch-Überschrift */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--bad);animation:g1 7s infinite}
.glitch::after{color:#4DD2FF;animation:g2 7s infinite}
@keyframes g1{0%,93%,100%{opacity:0;transform:none}94%{opacity:.9;transform:translate(-5px,2px);clip-path:inset(10% 0 55% 0)}96%{opacity:.9;transform:translate(4px,-2px);clip-path:inset(60% 0 8% 0)}98%{opacity:0}}
@keyframes g2{0%,93%,100%{opacity:0;transform:none}95%{opacity:.9;transform:translate(5px,-2px);clip-path:inset(40% 0 30% 0)}97%{opacity:.9;transform:translate(-4px,2px);clip-path:inset(5% 0 70% 0)}99%{opacity:0}}

/* Bühne */
.hero-right{min-width:0;display:flex;flex-direction:column;gap:14px}
.hero-stage{--glow:var(--bad);--px:0px;--bx:0px;--by:0px;--rx:0deg;--ry:0deg;position:relative;height:clamp(420px,44vw,580px);border-radius:28px;overflow:hidden;isolation:isolate;background:radial-gradient(90% 80% at 50% 105%,color-mix(in srgb,var(--glow) 38%,#1D2850) 0%,#182250 48%,#121A33 100%);border:3px solid color-mix(in srgb,var(--glow) 55%,#1D2850);box-shadow:0 0 50px color-mix(in srgb,var(--glow) 28%,transparent);transition:border-color .5s,box-shadow .5s}
.hero-stage[data-mode="good"]{--glow:var(--good)}
.grid-bg{position:absolute;left:-10%;right:-10%;bottom:0;height:55%;z-index:0;transform:translate(var(--bx),var(--by)) perspective(300px) rotateX(58deg);transform-origin:50% 100%;background-image:linear-gradient(color-mix(in srgb,var(--glow) 55%,transparent) 2px,transparent 2px),linear-gradient(90deg,color-mix(in srgb,var(--glow) 55%,transparent) 2px,transparent 2px);background-size:46px 46px;opacity:.5;animation:gridmove 2.4s linear infinite;mask-image:linear-gradient(to top,#000 20%,transparent)}
@keyframes gridmove{to{background-position:0 46px}}
.rain{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.rain span{position:absolute;top:-30%;white-space:pre;font:700 14px/1.15 ui-monospace,Menlo,Consolas,monospace;color:var(--glow);opacity:.26;animation:fall linear infinite;transform:translate(var(--bx),0)}
@keyframes fall{to{top:105%}}
.char{position:absolute;left:0;right:0;bottom:7%;height:80%;z-index:2;display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:end center;background:none;border:0;padding:0;cursor:pointer;transform:translateX(var(--px)) perspective(800px) rotateY(var(--ry)) rotateX(var(--rx));transition:transform .25s ease-out;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.char:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:16px}
.pose{grid-area:1/1;height:100%;width:auto;max-width:92%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .16s;transform-origin:50% 100%;filter:drop-shadow(0 8px 0 rgba(0,0,0,.18))}
.pose.on{opacity:1;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.03)}}
.char.swap{animation:squash .55s cubic-bezier(.3,.9,.4,1.3)}
@keyframes squash{0%{transform:translateX(var(--px)) scale(1,1)}18%{transform:translateX(var(--px)) scale(1.12,.84)}50%{transform:translateX(var(--px)) scale(.93,1.1) translateY(-3%)}78%{transform:translateX(var(--px)) scale(1.03,.97)}100%{transform:translateX(var(--px)) scale(1,1)}}
.shadow{position:absolute;left:50%;bottom:4.5%;width:46%;height:18px;margin-left:-23%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:1;animation:shadow 3.2s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}
.bubble{position:absolute;z-index:4;top:7%;right:6%;max-width:52%;background:#fff;color:var(--ink);font-weight:800;font-size:clamp(16px,1.7vw,22px);line-height:1.2;padding:14px 20px;border-radius:20px 20px 4px 20px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.bubble.hop{animation:hop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes hop{from{transform:scale(.4) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.hero-stage.glitching{animation:glitchstage .6s steps(2) 1}
@keyframes glitchstage{0%{filter:none}15%{filter:hue-rotate(90deg) saturate(2);transform:translateX(-6px)}30%{filter:none;transform:translateX(5px)}45%{filter:invert(.15) hue-rotate(-60deg);transform:none}60%{filter:none;transform:translateX(-3px)}100%{filter:none;transform:none}}
.moods{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.mood{width:62px;height:62px;padding:6px;border-radius:50%;background:var(--card);border:3px solid #2d3b78;cursor:pointer;display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s;animation:bobsm 3s ease-in-out infinite}
.mood:nth-child(2n){animation-delay:-.7s}.mood:nth-child(3n){animation-delay:-1.4s}
.mood[hidden]{display:none}
.mood img{width:100%;height:100%;object-fit:contain}
.mood:hover{transform:scale(1.22) rotate(-6deg);border-color:var(--yellow)}
.mood.boing{animation:boing .5s ease-out}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(8deg)}60%{transform:scale(.9) rotate(-4deg)}100%{transform:scale(1)}}
@keyframes bobsm{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Laufband */
.marquee{overflow:hidden;background:var(--yellow);color:var(--ink);font-weight:800;font-size:clamp(16px,1.8vw,22px);padding:12px 0;margin:clamp(12px,2vw,28px) 0;transform:rotate(-1.2deg);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.marquee .track{display:flex;gap:32px;width:max-content;animation:marq 38s linear infinite;white-space:nowrap}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* Einblenden */
.js .reveal{opacity:0;transform:translateY(38px) scale(.96)}
.js .reveal.in{opacity:1;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.9,.3,1.18) var(--d,0s)}
.js .reveal.in.done{transition:transform .14s ease-out,opacity .2s}
.h2.reveal{position:relative;display:inline-block}
.h2.reveal::after{content:"";position:absolute;left:0;bottom:-8px;height:6px;width:100%;background:var(--yellow);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.3,1) .35s}
.h2.reveal.in::after{transform:scaleX(.42)}
.aktuell .h2{margin-bottom:34px}
.lead-team{margin-bottom:24px}
#team .lead{margin:6px 0 30px}

/* Teamkarten */
.tcard{position:relative;align-items:center;text-align:center;overflow:visible;cursor:pointer;border:3px solid transparent;transition:border-color .2s,box-shadow .2s}
.tcard:hover,.tcard:focus-visible,.tcard.tap{border-color:var(--yellow);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.tcard.tc-good:hover,.tcard.tc-good:focus-visible,.tcard.tc-good.tap{border-color:var(--good)}
.tcard .card-title{margin-top:6px}
.tfig{position:relative;width:100%;height:210px;margin-top:6px;animation:bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.tfig img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);transition:opacity .15s;filter:drop-shadow(0 6px 0 rgba(0,0,0,.2))}
.tfig .f2{opacity:0}
.tcard:hover .f1,.tcard:focus-visible .f1,.tcard.tap .f1{opacity:0}
.tcard:hover .f2,.tcard:focus-visible .f2,.tcard.tap .f2{opacity:1;animation:wavepop .55s cubic-bezier(.3,.9,.4,1.4)}
@keyframes wavepop{0%{transform:translateX(-50%) scale(.9,1.1)}40%{transform:translateX(-50%) scale(1.08,.92)}100%{transform:translateX(-50%) scale(1,1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tbubble{position:absolute;z-index:3;top:-14px;right:-8px;max-width:78%;background:#fff;color:var(--ink);font-weight:800;font-size:16px;line-height:1.2;padding:9px 14px;border-radius:14px 14px 3px 14px;box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transform:scale(.4) translateY(10px);transform-origin:100% 100%;transition:opacity .15s,transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.tcard:hover .tbubble,.tcard:focus-visible .tbubble,.tcard.tap .tbubble{opacity:1;transform:none}

/* gelbes Band */
.thumbwrap{position:relative;flex:1 1 320px;min-width:0;max-width:520px}
.thumbwrap .thumb{display:block;width:100%;max-width:none;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.6deg)}}
.sticker{position:absolute;top:-18px;right:-14px;background:var(--bad);color:#fff;font-weight:800;font-size:22px;padding:12px 18px;border-radius:50%;border:4px solid var(--ink);animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(8deg) scale(1.12)}}

/* Karussell-Ergänzungen */
.art-four{gap:clamp(0px,.6vw,10px)}
.slide .art-four img{max-width:25%;height:min(76%,420px)}
.slide.is-active .art-four .p4{animation-delay:.45s}
.s-post .art img{height:min(84%,440px)}
.s-support .art img{height:min(78%,430px)}
.slide.is-active .pop{animation:pop .8s cubic-bezier(.2,.9,.3,1.25) both,bobsm 3.4s ease-in-out .9s infinite}
.slide.is-active .p2{animation-delay:.15s,1.1s}.slide.is-active .p3{animation-delay:.3s,1.3s}.slide.is-active .p4{animation-delay:.45s,1.5s}

/* CTA-Karten */
.cta-card{transition:transform .2s cubic-bezier(.3,1.5,.5,1),border-color .15s}
.cta-card:hover{transform:translateY(-6px) rotate(-.8deg)}
.cta-main{position:relative;overflow:hidden}
.cta-main::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

/* laufende KI */
.walker{position:fixed;left:0;right:0;bottom:0;height:0;z-index:50;pointer-events:none}
.walker[hidden]{display:none}
.wtrack{position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.wimg{position:absolute;left:0;bottom:4px;height:72px;width:auto;will-change:transform;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}

/* andere Seiten: Figuren-Reihe */
.bobs img{animation:bob 3.4s ease-in-out infinite}
.bobs img:nth-child(2){animation-delay:-.8s}.bobs img:nth-child(3){animation-delay:-1.6s}.bobs img:nth-child(4){animation-delay:-2.4s}
.duo-line img{max-width:24%}
.pagehead .duo img{height:190px!important;width:auto}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-stage{height:clamp(380px,92vw,520px)}
  .bubble{max-width:58%}
}
@media (max-width:600px){
  .mood{width:52px;height:52px}
  .wimg{height:56px}
  .tfig{height:180px}
  .pagehead .duo img{height:130px!important}
  .slide .art-four img{max-width:24%}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .walker{display:none}
  .marquee{transform:none}.marquee .track{animation:none;flex-wrap:wrap;width:auto;white-space:normal;justify-content:center;gap:12px 24px}
  .caret,.rain{display:none}
}

.cards-team .tcard{align-items:center}
.tcard{padding:22px 18px}
.tcard .card-title{font-size:24px;line-height:1.1;white-space:nowrap}
.tcard>span:last-child{font-size:18px}

/* ===== Coming-soon: vorgebaut, ausgegraut, inaktiv ===== */
.is-soon{filter:grayscale(1);opacity:.5;cursor:not-allowed;user-select:none}
.is-soon,.is-soon *{pointer-events:none}
.is-soon:hover{transform:none!important}
a.is-soon,span.btn.is-soon{pointer-events:none}
.is-soon .btn,.btn.is-soon{background:#3a4678;border-color:#3a4678;color:#cfd6f2}
.btn.btn-outline.is-soon{background:transparent;border-color:#6F7BA8;color:#cfd6f2}
.btn.btn-dark.is-soon{background:#3a4678;border-color:#3a4678;color:#cfd6f2}
.cta-main.is-soon{background:#3a4678;color:#fff}
.cta-main.is-soon::after,.is-soon.pulse::after{display:none}
.is-soon input{background:#3a4678;color:#cfd6f2}
.badge-soon{display:inline-block;vertical-align:middle;margin-left:6px;font:800 12px/1 Poppins,system-ui,sans-serif;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:#6F7BA8;color:#121A33}
.soonnote{margin:0;font-size:18px;font-weight:700;color:var(--muted)}
.soonnote .badge-soon{margin:0 8px 0 0;filter:none}
.pay-row{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.pay{flex:1 1 150px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card);border:3px dashed var(--line);border-radius:16px;padding:16px 18px;font-weight:800;font-size:18px}
.nbadge{font:800 10px/1 Poppins,system-ui,sans-serif;font-style:normal;letter-spacing:.05em;text-transform:uppercase;vertical-align:super;margin-left:3px;padding:3px 6px;border-radius:999px;background:#6F7BA8;color:#121A33}
.top nav a[aria-current] .nbadge{background:#6F7BA8}
.cta-card.is-soon .badge-soon{filter:none}

/* ===== v6: ruhigere Farben, Abo-Hauptknopf, Blinzeln/Winken statt Schweben ===== */
:root{--bg:#0F1530;--card:#18214A;--yellow:#E8BF55;--ink:#10162E;--muted:#AEB9E0;--line:#6C78A6;--neu:#6D9BEA;--good:#58BB8B;--bad:#D8606A}
body{background:var(--bg)}
a{color:var(--yellow)}
.tag{background:var(--yellow);color:var(--ink)}
.top nav a.btn-small{background:var(--yellow)}

/* Hauptknopf Abo */
.btn-sub{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-size:clamp(20px,2.2vw,24px);padding:18px 36px;box-shadow:0 10px 28px rgba(232,191,85,.22)}
.btn-sub:hover{background:#F3D27A;border-color:#F3D27A;color:var(--ink);box-shadow:0 14px 34px rgba(232,191,85,.32)}
.btn-sub .subico{flex:none}
.top nav a.btn-small.btn-sub{padding:10px 22px;font-size:18px;box-shadow:none}
.btn-xl{font-size:clamp(22px,2.6vw,28px);padding:22px 44px}
.btn-sub-s{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-sub-s:hover{background:#F3D27A;border-color:#F3D27A}
.cta-block{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-micro{margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--muted)}
.cta-micro .bell{color:var(--yellow);flex:none}
.textlink{font-weight:700;font-size:18px;color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.25);padding:4px 0}
.textlink:hover{color:var(--yellow);border-color:var(--yellow)}
.pulse::after{display:none}
.bell{transform-origin:50% 8%;animation:bell 6s ease-in-out infinite}
.hero .btn-sub::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--yellow);opacity:0;animation:ring 5s ease-out infinite;pointer-events:none}
.hero .btn-sub{position:relative}

/* Hero */
.hero-in{grid-template-columns:1.02fr .98fr}
.hero-copy{gap:22px}
.hero-copy h1{font-size:clamp(44px,6.6vw,88px)}
.term{color:var(--glowc,var(--neu));text-shadow:none}
.mode{padding:4px;gap:2px;border-color:#27346b}
.mbtn{font-size:16px;padding:10px 18px;color:#cfd6f2}
.mbtn[aria-pressed="true"]{color:#fff}
.mbtn[aria-pressed="true"][data-mode="neutral"]{background:#4C74C4}
.mbtn[aria-pressed="true"][data-mode="good"]{background:#3F9870}
.mbtn[aria-pressed="true"][data-mode="evil"]{background:#B4505A}

.hero-stage{--glow:var(--neu);box-shadow:0 0 36px color-mix(in srgb,var(--glow) 16%,transparent);border-color:color-mix(in srgb,var(--glow) 38%,#18214A)}
.hero-stage[data-mode="good"]{--glow:var(--good)}
.hero-stage[data-mode="evil"]{--glow:var(--bad)}
.hero-stage{background:radial-gradient(90% 80% at 50% 108%,color-mix(in srgb,var(--glow) 26%,#18214A) 0%,#16204A 50%,#10173A 100%)}
.grid-bg{opacity:.3;animation:none}
.rain span{opacity:.14}
.pose{filter:drop-shadow(0 6px 0 rgba(0,0,0,.14))}
.pose.on{animation:none}
.shadow{animation:none;opacity:.8}
.bubble{background:#F4F1E8}
.moods{gap:10px}
.mood{animation:none!important;background:#16204A;border-color:#27346b}
.mood:hover{transform:scale(1.14);border-color:var(--yellow)}
.hero:has(#hstage[data-mode="good"]) .term{--glowc:var(--good)}
.hero:has(#hstage[data-mode="evil"]) .term{--glowc:var(--bad)}
/* Glitch nur bei der bösen KI */
.glitch::before,.glitch::after{animation:none}
html[data-mode="evil"] .glitch::before{color:var(--bad);animation:g1 8s infinite}
html[data-mode="evil"] .glitch::after{color:#7FA6E8;animation:g2 8s infinite}
.hero-stage.glitching{animation:glitchstage .5s steps(2) 1}
@keyframes glitchstage{0%{filter:none}20%{filter:saturate(1.5);transform:translateX(-4px)}40%{filter:none;transform:translateX(3px)}60%{filter:saturate(1.3);transform:translateX(-2px)}100%{filter:none;transform:none}}

/* Laufband ruhig */
.marquee{background:transparent;color:var(--muted);border-top:1px solid #27346b;border-bottom:1px solid #27346b;transform:none;box-shadow:none;font-size:15px;letter-spacing:.12em;padding:14px 0;margin:clamp(16px,2.4vw,32px) 0}
.marquee .track{animation-duration:55s}

/* Karussell ruhiger */
.stage{background:var(--card)}
.s-post{background:radial-gradient(120% 120% at 75% 100%,#4B3F76 0%,#1B2250 60%);color:#fff}
.s-team{background:radial-gradient(120% 120% at 80% 100%,#27366F 0%,#18214A 55%,#131B3F 100%)}
.s-support{background:radial-gradient(120% 120% at 70% 100%,#3E3869 0%,#18214A 55%,#121A3A 100%)}
.s-fall{background:radial-gradient(120% 120% at 80% 100%,#1B2A62 0%,#141C42 70%)}
.slide .tag-dark{background:var(--yellow);color:var(--ink)}
.slide.is-active .pop{animation:pop .8s cubic-bezier(.2,.9,.3,1.25) both}
.slide.is-active .p2{animation-delay:.12s}.slide.is-active .p3{animation-delay:.24s}.slide.is-active .p4{animation-delay:.36s}.slide.is-active .p5{animation-delay:.48s}
.slide.is-active .art{animation:zoomArt 9s ease-out both}
.slide .art-four img{max-width:19.5%;height:min(70%,400px)}
.s-post .art img{height:min(84%,440px)}
.dot[aria-current="true"]{background:var(--yellow)}

/* Teamkarten: kein Schweben, Blinzeln & Winken */
.cards-team{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:18px}
.tcard{padding:20px 14px;gap:6px}
.tcard .card-title{font-size:23px}
.tcard>span:last-child{font-size:17px;line-height:1.3}
.tfig{animation:none;height:200px}
.tfig img{filter:drop-shadow(0 5px 0 rgba(0,0,0,.16))}
.tcard:hover,.tcard:focus-visible,.tcard.tap{border-color:var(--yellow)}
.tcard.tc-good:hover,.tcard.tc-good:focus-visible,.tcard.tc-good.tap{border-color:var(--good)}
.tcard.tc-evil:hover,.tcard.tc-evil:focus-visible,.tcard.tc-evil.tap{border-color:var(--bad)}
.tcard.waving .f1{opacity:0}
.tcard.waving .f2{opacity:1}
.tfig .f2,.tfig .f1{transition:opacity .22s ease}
.tcard:hover .f2,.tcard:focus-visible .f2,.tcard.tap .f2{animation:none}
.tbubble{transform-origin:100% 100%}

/* Figurenreihen */
.bobs img,.crew img{animation:none}
.crew{display:flex;align-items:flex-end;gap:clamp(4px,1.2vw,16px)}
.crew img{width:auto;max-width:19%;object-fit:contain}
.duo-line{gap:clamp(2px,.6vw,10px)}
.duo-line img{max-width:19.5%}
.pagehead .duo{flex:1 1 380px;justify-content:flex-end}
.pagehead .duo img{height:170px!important;max-width:19%}
.crew-sm{justify-content:center}

/* neuester Fall als Karte statt Gelb-Block */
.latest{padding-top:8px;padding-bottom:8px}
.latest-card{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;background:var(--card);border-radius:24px;padding:clamp(18px,3vw,36px);border:1px solid #27346b}
.latest-card .stack{flex:1 1 280px}
.latest-card h2{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.1;font-weight:800}
.thumbwrap .thumb{animation:none;border:4px solid #0F1530;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.sticker{background:var(--bad);border-color:var(--bg);animation:none;transform:rotate(-8deg)}
.btn-outline{border-color:#8A96C4}
.yellow{background:var(--card);color:#fff}

/* Abo-Panel */
.sub-panel{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1E2A5C 0%,#18214A 100%);border:1px solid #2E3C7A;border-radius:28px;padding:clamp(24px,4vw,52px)}
.sp-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;flex:1 1 320px}
.sp-copy h2{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.04;font-weight:800}
.sp-copy p{margin:0;font-size:clamp(18px,2vw,22px);max-width:520px}
.sp-copy .cta-micro{font-size:16px}
.crew-sm{flex:1 1 300px}
.later{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.later-title{font-weight:700;color:var(--muted);font-size:16px}
.later-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--card);font-weight:700;font-size:15px}
.later-chip .badge-soon{margin:0;font-style:normal}
.cta-card.is-soon{opacity:.45}
.cta-main{background:var(--yellow)}

/* Fall-Seite */
.subline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.video .playbtn{left:24px;bottom:24px}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;display:block;border:4px solid var(--yellow)}

/* Dein Urteil (vorbereitet, inaktiv) */
.urteil{display:flex;flex-direction:column;gap:18px;background:var(--card);border-radius:24px;padding:clamp(20px,3vw,40px);border:1px dashed var(--line)}
.urteil h2{margin:0;font-size:clamp(28px,4vw,44px);font-weight:800}
.urteil-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rate{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rate-card{background:#121A3C;border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rate-fig{height:110px;display:flex;align-items:flex-end}
.rate-fig img{height:100%;width:auto}
.rate-name{font-weight:800;font-size:18px}
.rate-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.rbtn{font:700 14px Poppins,system-ui,sans-serif;padding:8px 12px;border-radius:999px;border:2px solid #4A5890;background:transparent;color:#fff}

/* gedämpfte Statusfarben für "bald" */
.badge-soon{background:#7C88B8;color:#10162E}
.nbadge{background:#7C88B8}

/* Mobile Abo-Leiste */
.subbar{display:none}
@media (max-width:700px){
  .subbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,#0F1530 70%,rgba(15,21,48,0));transform:translateY(110%);transition:transform .35s ease}
  .subbar.show{transform:none}
  .subbar .btn{width:100%;font-size:19px;padding:15px 20px}
  .walker{bottom:70px}
  .top nav a.btn-small.btn-sub{display:none}
  body{padding-bottom:0}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .slide .art-four img{max-width:19%}
  .cards-team{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .subbar{transition:none}
  .hero .btn-sub::after{display:none}
}

/* ===== Böse KI: ferngesteuert, blinde Befehle, Glitches ===== */
.strings{position:absolute;inset:0 0 40% 0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s}
.strings svg{width:100%;height:100%;overflow:visible}
.strings path{fill:none;stroke:var(--bad);stroke-width:.45;stroke-dasharray:1.6 1.4;vector-effect:non-scaling-stroke;stroke-width:1.5px;opacity:.7;animation:strand 1.6s linear infinite}
@keyframes strand{to{stroke-dashoffset:-6}}
.hero-stage[data-mode="evil"] .strings{opacity:1}
.ctrlchip{position:absolute;z-index:4;left:16px;top:16px;display:none;align-items:center;gap:8px;font:800 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:#F3C7CB;background:rgba(216,96,106,.16);border:1px solid rgba(216,96,106,.55);padding:8px 12px;border-radius:999px}
.ctrlchip i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:blink 1.2s steps(1) infinite}
.hero-stage[data-mode="evil"] .ctrlchip{display:inline-flex}
.hero-stage[data-mode="evil"] .bubble{background:#2A1B2E;color:#FFD9DC;border:1px solid rgba(216,96,106,.6);font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
/* zwei kurze Glitches pro Durchlauf */
.hero-stage[data-mode="evil"] .pose.on{animation:glitchy 6.5s infinite}
@keyframes glitchy{
 0%,38%,100%{transform:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.14));opacity:1}
 39%{transform:translateX(-8px) skewX(-5deg);filter:drop-shadow(6px 0 0 rgba(95,168,255,.8)) drop-shadow(-6px 0 0 rgba(255,92,108,.8));opacity:.85}
 40%{transform:translateX(7px) skewX(3deg);filter:drop-shadow(-5px 0 0 rgba(95,168,255,.8)) drop-shadow(5px 0 0 rgba(255,92,108,.8));opacity:.7}
 41%{transform:translateX(-3px);filter:drop-shadow(3px 0 0 rgba(95,168,255,.6));opacity:1}
 42%{transform:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.14))}
 74%{transform:translateX(6px) skewX(4deg);filter:hue-rotate(35deg) drop-shadow(-5px 0 0 rgba(95,168,255,.7));opacity:.8}
 75%{transform:translateX(-5px);filter:drop-shadow(4px 0 0 rgba(255,92,108,.7));opacity:1}
 76%{transform:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.14))}}
.tcard.tc-evil .tfig{animation:glitchcard 7s infinite}
@keyframes glitchcard{0%,60%,100%{transform:none;filter:none}61%{transform:translateX(-4px) skewX(-3deg);filter:drop-shadow(3px 0 0 rgba(95,168,255,.8)) drop-shadow(-3px 0 0 rgba(255,92,108,.8))}62%{transform:translateX(3px)}63%{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.hero-stage[data-mode="evil"] .pose.on,.tcard.tc-evil .tfig,.strings path,.ctrlchip i{animation:none}}
.cards-team{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
.btn-xl{white-space:nowrap;font-size:clamp(20px,2.1vw,24px);padding:20px 34px}
@media (max-width:700px){.btn-xl{white-space:normal;padding:18px 24px}}
@media (max-width:600px){
  .hero .tag{font-size:14px;padding:6px 14px}
  .ctrlchip{font-size:10px;padding:6px 9px;left:10px;top:10px}
  .hero-stage .bubble{top:15%;right:4%;max-width:60%;font-size:15px}
}

.case-hook{padding:0 22px 24px;margin-top:-12px;font-size:17px;line-height:1.4;color:var(--muted);font-weight:500}
.case.soon .case-title{font-size:25px;padding-bottom:20px}
.case.soon .case-hook{margin-top:0}
/* Videofabrik-Angleichung: gleiche Schrift (Poppins Bold Italic) und Markenfarben wie Studio */
@font-face{font-family:"Poppins";font-style:italic;font-weight:700 800;font-display:swap;src:url(fonts/poppins-bolditalic.woff2) format("woff2")}
:root{--bg:#120C2E;--card:#1D1650;--yellow:#FFD23A;--blue-brand:#8FE6FF;--ink:#120C2E}
.case.hook{border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 8px 0 #0A0620;transition:transform .2s}
.case.hook:hover{transform:translateY(-4px)}
.case-img{position:relative;display:block}
.case-img img{width:100%;display:block}
.chip{position:absolute;top:12px;font-weight:800;font-size:14px;padding:5px 12px;border-radius:99px;letter-spacing:.04em}
.chip-new{left:12px;background:#ff4b4b;color:#fff}.chip-soon{left:12px;background:var(--yellow);color:var(--ink)}
.chip-dur{right:12px;background:rgba(10,6,32,.85);color:#fff}
.case-body{display:flex;flex-direction:column;gap:8px;padding:18px 22px 22px}
.case.hook .case-no{padding:0;font-size:15px;letter-spacing:.08em;color:var(--yellow)}
.case.hook .case-title{padding:0;font-style:italic;font-weight:800;font-size:27px;line-height:1.12;color:#fff}
.case.hook .case-hook{padding:0;margin:0;font-size:16px;line-height:1.4;color:var(--muted);font-weight:500}
.case-cta{margin-top:6px;align-self:flex-start;background:var(--yellow);color:var(--ink);font-weight:800;border-radius:99px;padding:10px 20px;font-size:16px}
.case.soon.hook{border:0;min-height:0;justify-content:flex-start}
.case.soon.hook .case-img img{filter:grayscale(.6) brightness(.8)}
.case.soon.hook .case-cta{background:transparent;color:var(--muted);border:2px solid var(--line)}
.case.soon.hook .case-title{font-size:25px}
.case-img .chip{top:auto;bottom:12px}
.crew img{max-width:none}
/* Regel-Proportionen: Erwachsener 1,60 m = --ch, KI-Modell 0,72 m = 45 % davon */
.crew{--ch:170px}
.crew-sm{--ch:150px}
.duo-line{--ch:clamp(150px,21vw,300px)}
.crew img.hu,.pagehead .duo img.hu,.duo-line img.hu{height:var(--ch)!important;width:auto!important;max-width:none!important;max-height:none!important}
.crew img.kis,.pagehead .duo img.kis,.duo-line img.kis{height:calc(var(--ch)*.45)!important;width:auto!important;max-width:none!important;max-height:none!important}
@media (max-width:700px){.crew{--ch:120px}.pagehead .duo{justify-content:center}}
.h1-hook{font-style:italic}
/* Plaketten NICHT mehr auf dem Bild: in der Meta-Zeile unter dem Bild */
.case-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.case-meta .chip{position:static;font-size:13px;padding:4px 11px}
.case-meta .chip-dur{background:#2a2266;color:#fff}
.case-img .chip{display:none}
/* Kein Zoom mehr, mehr Leben: ruhiges Atmen am Boden, kleiner Freudenhüpfer, Reaktion beim Drüberfahren */
.slide.is-active .art{animation:none!important}
.art-four{--ch:clamp(150px,22vw,300px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,22px);overflow:visible}
.slide .art-four img.hu,.slide .art-four img.kis{max-width:none!important}
.slide .art-four img.hu{height:var(--ch)!important;width:auto!important}
.slide .art-four img.kis{height:calc(var(--ch)*.45)!important;width:auto!important}
img.idle{transform-origin:50% 100%;animation:breath 5.2s ease-in-out infinite}
img.idle:nth-child(2n){animation-duration:6.1s;animation-delay:-1.7s}
img.idle:nth-child(3n){animation-duration:4.7s;animation-delay:-3.1s}
@keyframes breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.006,1.014)}}
img.idle.hop-s{animation:hops .7s cubic-bezier(.3,.7,.4,1) 1,breath 5.2s ease-in-out .7s infinite}
@keyframes hops{0%{transform:scale(1,1)}18%{transform:scale(1.07,.9)}45%{transform:translateY(-14px) scale(.95,1.08)}72%{transform:scale(1.05,.94)}100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){img.idle,img.idle.hop-s{animation:none}}
.art-four{padding:0 clamp(12px,3vw,40px)}
/* Laufband = echter, sichtbarer Abo-Banner (gelb, klickbar, kein Schräglauf) */
a.marquee{display:block;text-decoration:none;background:var(--yellow);color:var(--ink);border:0;transform:none;box-shadow:0 6px 0 #0A0620;font-size:clamp(16px,1.9vw,22px);font-weight:800;letter-spacing:.04em;padding:14px 0}
a.marquee .track{animation-duration:42s;gap:36px}
a.marquee:hover{background:#ffe27a}

/* ===== GLOBALE GRÖSSENREGEL: Erwachsener 1,60 m, KI-Modell 0,72 m (= 45 %), überall gleich ===== */
.tfig{--ch:236px;height:var(--ch)}
.tfig img[src*="ki_front"],.tfig img[src*="ki_wave"]{height:calc(var(--ch)*.45)}
.tfig img[src*="pa_"],.tfig img[src*="be_"]{height:var(--ch)}
@media (max-width:700px){.tfig{--ch:190px}}

/* ===== Hintergrund = echte 3D-Welt aus dem Film, Gaußscher Weichzeichner ===== */
.slide{isolation:isolate;overflow:hidden;padding-bottom:116px}
.slide::before{content:"";position:absolute;inset:-48px;z-index:-2;background:var(--bgimg,none) center/cover no-repeat;filter:blur(15px) brightness(.6) saturate(1.2)}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,12,46,.92) 0%,rgba(18,12,46,.62) 52%,rgba(18,12,46,.28) 100%),radial-gradient(90% 80% at 75% 55%,rgba(18,12,46,0) 40%,rgba(18,12,46,.55) 100%)}
.s-fall{--bgimg:url(assets/bg_server.webp)}
.s-team{--bgimg:url(assets/bg_office.webp)}
.s-post{--bgimg:url(assets/bg_library.webp)}
.s-ki{--bgimg:url(assets/bg_serverdesk.webp)}
.s-support{--bgimg:url(assets/bg_sandbox.webp)}
.slide h2{font-size:clamp(32px,4.4vw,58px);line-height:1.06}
.s-fall .art{align-items:center}
.slide .art{padding-bottom:6px}
/* Karten bekommen ebenfalls Tiefe: weichgezeichnete Filmwelt als Hintergrund */
.tcard{position:relative;isolation:isolate;overflow:hidden;background:#18214A}
.tcard::before{content:"";position:absolute;inset:-30px;z-index:-2;background:url(assets/bg_office.webp) center/cover;filter:blur(12px) brightness(.55) saturate(1.2)}
.tcard.tc-good::before{background-image:url(assets/bg_library.webp)}
.tcard.tc-evil::before{background-image:url(assets/bg_server.webp);filter:blur(12px) brightness(.5) saturate(1.3) hue-rotate(-30deg)}
.tcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,46,.35),rgba(18,12,46,.8))}
.tcard .tbubble{z-index:3}
.case.hook .case-body{background:linear-gradient(180deg,#1D1650,#161040)}
.sub-panel,.urteil{position:relative;isolation:isolate;overflow:hidden}
.sub-panel::before{content:"";position:absolute;inset:-30px;z-index:-2;background:url(assets/bg_sandbox.webp) center/cover;filter:blur(14px) brightness(.5) saturate(1.2)}
.sub-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,12,46,.88),rgba(18,12,46,.5))}

/* ===== Qualitätsdurchgang: Lesbarkeit, Umbruch, Kontrast ===== */
:root{--muted:#D5DBF6;--line:#8590C4}
h1,h2,h3,.case-title,.card-title,.slide h2{text-wrap:balance}
p,.lead,.case-hook,.card p,small{text-wrap:pretty}
.cta-micro{font-size:17px;font-weight:600;color:#E6EBFF;text-wrap:balance}
.cta-micro .bell{color:var(--yellow)}
.slide p{color:#F1F4FF;font-weight:500}
.tcard>span:last-child,.case.hook .case-hook{color:#DDE3FA}
small,.urteil small{color:#C3CBEE}
.nbadge,.badge-soon,.chip-dur{font-weight:800}

/* Läufer: eigene schmale Leiste oben, verdeckt nie Inhalt */
.walker{top:0;bottom:auto;left:0;right:0;height:38px;background:rgba(18,12,46,.94);border-bottom:1px solid #2a2266;backdrop-filter:blur(6px);z-index:80}
.wtrack{top:auto;bottom:0;height:4px}
.wimg{bottom:4px;height:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
body:has(.walker:not([hidden])){padding-top:38px}
@media (max-width:700px){.walker{display:none}body:has(.walker){padding-top:0}}
/* Hintergrundwelt sichtbarer: weniger Abdunklung, Bild stärker */
.slide::before{filter:blur(13px) brightness(.9) saturate(1.25)}
.slide::after{background:linear-gradient(90deg,rgba(18,12,46,.82) 0%,rgba(18,12,46,.5) 50%,rgba(18,12,46,.12) 100%),radial-gradient(90% 80% at 75% 55%,rgba(18,12,46,0) 55%,rgba(18,12,46,.45) 100%)}
.chip-new,.sticker{background:#C81E3A!important;color:#fff!important}
.badge-soon{font-size:13px}

/* ===== Experten-Pass „Heute" ===== */
.mode-q{margin:18px 0 8px;font-weight:800;font-size:clamp(17px,2vw,22px);color:#fff;letter-spacing:.01em}
.mode{padding:6px;gap:4px;border-color:#5a6aa8;background:#1D1650}
.mbtn{font-size:clamp(16px,1.8vw,20px);padding:12px 22px;font-weight:700}
.hero h1,h1.glitch{text-wrap:balance}
.wrap,.wrap-wide{max-width:1240px}
a.marquee.band{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);overflow:visible;padding:10px 16px;min-height:76px}
a.marquee.band .bandwalk{height:84px;width:auto;margin-top:-34px;filter:drop-shadow(0 6px 0 rgba(10,6,32,.35))}
a.marquee.band .bandtxt{font-weight:800;font-size:clamp(16px,2.2vw,26px);letter-spacing:.03em}
a.marquee.band .bandgo{background:var(--ink);color:var(--yellow);padding:10px 18px;border-radius:999px;font-size:clamp(14px,1.6vw,18px);white-space:nowrap}
@media(max-width:600px){a.marquee.band{flex-wrap:wrap;gap:6px}a.marquee.band .bandwalk{height:64px;margin-top:-26px}}
.badge,.badge-soon,.chip{font-size:14px!important}
.mbtn{white-space:nowrap}
@media(max-width:600px){.mbtn{padding:11px 14px;font-size:15px}.mode{width:100%;justify-content:space-between}.mbtn{flex:1;text-align:center}h1.glitch{font-size:clamp(34px,10.5vw,52px)}}
.hero h1.glitch{font-size:clamp(38px,5.2vw,68px)}
.case.hook{display:flex;flex-direction:column}
.case.hook .case-body{flex:1;background:inherit}
.case.hook.soon .case-body{background:#1D1650}

/* ===== Layout-Fixes Unterseiten ===== */
.cards:not(.cards-team){grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.cards:not(.cards-team){grid-template-columns:1fr}}
.video{display:flex;flex-direction:column;gap:14px;position:relative}
.video .playbtn{position:static;align-self:flex-start;font-size:clamp(17px,2vw,22px);padding:16px 28px}
.postsplit form,.support-hero .stack{flex:1 1 420px;max-width:540px}
.postsplit .duo-line,.support-hero .duo-line{flex:1 1 360px;max-width:520px;margin-left:auto}
.support-hero h1{font-size:clamp(34px,4.6vw,60px);max-width:14ch}
/* Dein Urteil: Teaser statt Grau-Block */
.urteil.is-soon{filter:none;opacity:1;border:2px dashed #8590C4;background:linear-gradient(160deg,#1D1650,#2a1f6b)}
.urteil.is-soon h2,.urteil.is-soon .tag{color:#fff;filter:none}
.urteil.is-soon .urteil-head .tag{background:var(--yellow);color:var(--ink)}
.urteil.is-soon img{filter:none}
.urteil.is-soon .btn,.urteil.is-soon button{opacity:.75}
.urteil.is-soon p{color:var(--muted)}

/* ===== Gamification & UX (Gutachten 2) ===== */
.btn{transition:transform .12s,box-shadow .12s,background .15s}
.btn:active{transform:translateY(2px) scale(.98)!important}
.hero .btn-sub::after{animation:ring 5s ease-out 3}
.btn-sub:hover .bell{animation:bellshake .6s}
@keyframes bellshake{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
.textlink-btn{background:none;border:0;color:var(--muted);font:600 15px/1.3 inherit;font-family:inherit;text-decoration:underline;cursor:pointer;padding:12px 0;min-height:44px;text-align:left}
.textlink-btn:hover{color:#fff}
.is-sub .subbar,.is-sub #alreadysub{display:none!important}
.nav-team{white-space:nowrap}
.dot{position:relative}.dot::before{content:"";position:absolute;inset:-15px}
.textlink{display:inline-flex;align-items:center;min-height:44px}
.top nav a{min-height:44px;display:inline-flex;align-items:center}

/* Toast, Konfetti */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:var(--yellow);color:var(--ink);font-weight:800;padding:12px 22px;border-radius:999px;box-shadow:0 8px 0 #0A0620;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95}

/* Sticky-Leiste mit Schließen */
.subbar{display:none}
.bar-x{position:absolute;right:6px;top:-18px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#120C2E;color:#fff;font-size:22px;line-height:1;cursor:pointer}
@media(max-width:700px){
  .subbar{display:block;position:fixed}
  .subbar .btn{width:calc(100% - 0px)}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* Fallakte */
.akte-sec{padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(32px,5vw,72px)}
.akte-lead{color:var(--muted);font-size:clamp(17px,2vw,20px);margin:6px 0 22px}
.akte-card{background:linear-gradient(160deg,#1D1650,#251B66);border:2px solid #3b3a86;border-radius:24px;padding:clamp(18px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.akte-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;justify-content:space-between}
.stamps{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:14px;flex:1 1 560px}
.stamp{position:relative;border:3px dashed #5a6aa8;border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:2px;color:#cfd6f2;font-weight:800;font-size:clamp(16px,1.6vw,19px);min-height:110px;transition:transform .2s,border-color .2s,background .2s}
.stamp b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3a4678;color:#fff;font-size:15px;margin-bottom:4px}
.stamp small{font-weight:500;font-size:14px;color:#b5bde3;line-height:1.3}
.stamp.got{border-style:solid;border-color:var(--yellow);background:rgba(255,210,58,.12);color:#fff}
.stamp.got b{background:var(--yellow);color:var(--ink)}
.stamp.got::after{content:"GEFUNDEN";position:absolute;right:10px;top:10px;transform:rotate(8deg);border:3px solid #C81E3A;color:#ff6b7f;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:800;letter-spacing:.06em}
.stamp.pop{animation:stamppop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamppop{0%{transform:scale(1.18) rotate(-3deg)}100%{transform:none}}
.akte-n{font-weight:800;font-size:clamp(22px,3vw,34px);color:var(--yellow);margin:0}
.quiz{display:flex;flex-direction:column;gap:14px;background:rgba(10,6,32,.45);border-radius:18px;padding:clamp(16px,2.4vw,28px)}
.quiz-q{margin:0;font-weight:800;font-size:clamp(19px,2.2vw,26px);line-height:1.25;text-wrap:balance}
.quiz-a{display:grid;gap:10px}
.qopt{font:600 clamp(16px,1.8vw,19px)/1.3 inherit;font-family:inherit;text-align:left;padding:14px 18px;min-height:52px;border-radius:14px;border:2px solid #5a6aa8;background:#1D1650;color:#fff;cursor:pointer;transition:transform .12s,background .15s,border-color .15s}
.qopt:hover:not(:disabled){background:#2a2275;border-color:var(--blue-brand)}
.qopt:active:not(:disabled){transform:scale(.98)}
.qopt.right{border-color:#3DDC84;background:rgba(61,220,132,.18)}
.qopt.wrong{border-color:#FF4D5E;background:rgba(255,77,94,.18)}
.quiz-aha{margin:0;min-height:1.4em;color:var(--blue-brand);font-weight:600;font-size:clamp(16px,1.7vw,19px)}
.quiz-end{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.quiz-end[hidden]{display:none}
.quiz-rank{flex:1 1 100%;margin:0;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--yellow)}
.akte-keep{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:15px;min-height:44px}
.akte-keep input{width:22px;height:22px;accent-color:var(--yellow)}
.akte-keep small{color:#b5bde3}
@media(max-width:700px){.stamps{grid-template-columns:1fr}.stamp{min-height:0}}

/* ===== Mobiler Hero: Bühne vor Umschalter, kompakter Header ===== */
@media(max-width:700px){
  .hero-in{display:flex;flex-direction:column;gap:14px}
  .hero-copy{display:contents}
  .hero .tag{order:1;align-self:flex-start}
  .hero h1{order:2}
  .hero .term{display:none}
  .cta-block{order:3}
  .hero-right{order:4;width:100%}
  .mode-q{order:5;margin:6px 0 0}
  .mode{order:6}
  .top nav a:not(.btn-sub):not([data-k="faelle"]):not([data-k="akte"]){display:none}
  .top nav a.btn-small.btn-sub{display:inline-flex}
  .top{padding-top:10px;padding-bottom:10px}
  .nav-team{display:none}
}
@media(max-width:600px){#pause{display:inline-flex!important}.stage{padding-bottom:64px}}
@media(max-width:700px){.toast{bottom:calc(92px + env(safe-area-inset-bottom))}}
.quiz-aha:empty{display:none}
@media(max-width:700px){.cta-block .textlink{display:none}.textlink-btn{font-size:14px;padding:6px 0;min-height:36px}.cta-block{gap:6px}.cta-micro{font-size:15px}}

/* ===== Finde die 3 Schwachstellen ===== */
.hunt{margin:clamp(28px,4vw,56px) 0;display:flex;flex-direction:column;gap:12px}
.hunt-h{margin:0;font-size:clamp(26px,3.4vw,40px)}
.hunt-lead{margin:0;color:var(--muted);font-size:clamp(16px,1.8vw,19px)}
.hunt-pic{position:relative;border:4px solid var(--yellow);border-radius:18px;overflow:hidden;cursor:crosshair;line-height:0}
.hunt-pic img{width:100%;height:auto;display:block}
.hot{position:absolute;background:transparent;border:0;border-radius:12px;cursor:pointer;padding:0;transition:background .2s,box-shadow .2s}
.hot:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.hot:hover{background:rgba(255,210,58,.08)}
.hot.found{background:rgba(255,210,58,.18);box-shadow:inset 0 0 0 4px var(--yellow),0 0 24px rgba(255,210,58,.6)}
.hot.found::after{content:"✓";position:absolute;right:-6px;top:-6px;width:32px;height:32px;line-height:32px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:800;font-size:20px;text-align:center}
.hunt-pic.miss{animation:miss .25s}
@keyframes miss{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hunt-count{margin:0;font-weight:800;font-size:clamp(18px,2vw,22px)}
.hunt-count b{color:var(--yellow)}
.hunt-msg{font-weight:600;color:var(--blue-brand);margin-left:8px}
.hunt-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hunt-end[hidden]{display:none}
.hunt-stamp{display:inline-block;border:4px solid #C81E3A;color:#ff6b7f;font-weight:800;font-size:clamp(24px,3.4vw,40px);padding:4px 16px;border-radius:10px;transform:rotate(-5deg);letter-spacing:.04em}

/* Footer-Schalter, Animationen aus */
.motion-btn{background:none;border:0;color:var(--yellow);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:12px 0;min-height:44px}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important}

/* Fäden durchtrennen (nur Böse KI) */
.hero-stage[data-mode="evil"] .strings path{pointer-events:stroke;cursor:pointer;stroke-width:5px}
.strings path.cut{opacity:0;transition:opacity .3s}

/* Scroll-Auftritt per CSS (progressive Verbesserung) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .case.hook,.cards .card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
}

/* ===== v13: weniger Überlagerung im Hero ===== */
.strings{inset:0;z-index:1}
.hero-stage[data-mode="evil"] .bubble{top:3%;right:3%;max-width:38%}
.hero-stage[data-mode="evil"] .ctrlchip{left:16px;top:auto;bottom:16px}
.toast{bottom:auto;top:calc(96px + env(safe-area-inset-top));transform:translate(-50%,-24px)}
.toast.on{transform:translate(-50%,0)}
@media(max-width:700px){
  .toast{top:auto;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,24px)}
  .toast.on{transform:translate(-50%,0)}
  .hero-stage[data-mode="evil"] .bubble{top:3%;right:3%;max-width:56%}
  .hero-stage[data-mode="evil"] .ctrlchip{bottom:10px;left:10px}
}

/* ===== v13: Team-Gruppenbild (Duo + KI) ===== */
.duo-group{--dh:clamp(190px,32vw,340px);position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2vw,28px);height:calc(var(--dh) + 24px);margin:6px auto 34px;padding-bottom:6px}
.duo-spot{position:absolute;left:50%;bottom:0;width:min(760px,96%);height:46%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(255,209,51,.28),rgba(255,209,51,0) 68%);border-radius:50%;pointer-events:none}
.dg{position:relative;display:block;width:auto;max-width:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18));transform-origin:50% 100%;animation:dgbob 3.4s ease-in-out infinite}
.dg-pa,.dg-be{height:var(--dh)}
.dg-ki{height:calc(var(--dh) * .45);animation-delay:-1.1s}
.dg-be{animation-delay:-2.2s}
@keyframes dgbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html[data-motion="off"] .dg{animation:none}
@media (prefers-reduced-motion:reduce){.dg{animation:none}}
@media(max-width:700px){.duo-group{--dh:clamp(170px,50vw,230px);margin-bottom:26px}}

/* ===== v13: Pinnwand für die Fälle ===== */
.pinboard{border:clamp(18px,3.4vw,40px) solid transparent;border-image:url(assets/pinnwand.webp) 118 fill / clamp(18px,3.4vw,40px) stretch;padding:clamp(6px,1.6vw,20px) clamp(4px,1.2vw,16px) 8px;margin-top:10px;filter:drop-shadow(0 10px 0 rgba(0,0,0,.28))}
.pinboard .grid{margin:0}
.pinboard .case.hook{overflow:visible;position:relative;box-shadow:0 6px 0 rgba(0,0,0,.35),0 14px 18px rgba(0,0,0,.25);transition:transform .25s}
.pinboard .case-img{border-radius:22px 22px 0 0;overflow:hidden}
.pinboard .case-body{border-radius:0 0 22px 22px}
.pinboard .case.hook:nth-child(1){transform:rotate(-1.2deg)}
.pinboard .case.hook:nth-child(2){transform:rotate(.9deg)}
.pinboard .case.hook:nth-child(3){transform:rotate(-.7deg)}
.pinboard .case.hook:hover{transform:rotate(0) translateY(-4px)}
.pinboard .case.hook::before{content:"";position:absolute;z-index:3;top:-11px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a9a 0 14%,#E23B3B 15% 62%,#9B1C1C 63%);border:2px solid #1a1030;box-shadow:0 5px 0 rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.pinboard .case.hook{transition:none}}
@media(max-width:700px){.pinboard{padding-left:2px;padding-right:2px}.pinboard .case.hook:nth-child(n){transform:none}}

/* ===== v13: Requisiten-Sprites ===== */
.bell-img{width:20px;height:auto;vertical-align:-4px;margin-right:2px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.akte-card{position:relative}
.akte-lupe{position:absolute;top:-34px;right:clamp(14px,4vw,44px);width:clamp(54px,7vw,84px);height:auto;transform:rotate(14deg);transform-origin:50% 90%;animation:lupewob 5s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));pointer-events:none}
@keyframes lupewob{0%,100%{transform:rotate(14deg)}50%{transform:rotate(4deg) translateX(-6px)}}
.post-env{display:block;width:clamp(64px,8vw,92px);height:auto;margin-bottom:12px;transform:rotate(-6deg);filter:drop-shadow(0 5px 0 rgba(0,0,0,.25))}
html[data-motion="off"] .akte-lupe{animation:none}
@media (prefers-reduced-motion:reduce){.akte-lupe{animation:none}}
.postsplit,.support-hero{column-gap:clamp(36px,6vw,84px)}
.akte-lupe{top:-44px}

/* ===== v14: Abo-Knopf-Sprite, Dieb im Fuß ===== */
.abo-btn{display:inline-block;margin-bottom:10px;transition:transform .12s}
.abo-btn img{display:block;width:clamp(120px,14vw,170px);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.3));animation:aboPulse 2.8s ease-in-out infinite}
.abo-btn:hover img{animation:none;transform:translateY(3px)}
.abo-btn:active img{transform:translateY(7px) scale(.98)}
@keyframes aboPulse{0%,86%,100%{transform:translateY(0)}92%{transform:translateY(5px)}}
.foot{position:relative;margin-top:36px}
.dieb{position:absolute;right:max(16px,5%);top:-92px;height:92px;padding:0;border:0;background:none;cursor:pointer;opacity:0;pointer-events:none}
.dieb img{display:block;height:92px;width:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.28))}
.dieb .d2{display:none}
.dieb.show{opacity:1;pointer-events:auto}
.dieb.go{animation:diebWalk 14s linear forwards}
@keyframes diebWalk{0%{transform:translateX(0) translateY(0)}2%{transform:translateX(-30px) translateY(-4px)}4%{transform:translateX(-60px) translateY(0)}100%{transform:translateX(calc(-100vw + 220px)) translateY(0)}}
.dieb.caught .d1{display:none}.dieb.caught .d2{display:block}
.dieb.caught{animation:none!important}
.dieb.gone{opacity:0;transition:opacity .6s;pointer-events:none}
html[data-motion="off"] .dieb.go,html[data-motion="off"] .abo-btn img{animation:none}
@media (prefers-reduced-motion:reduce){.dieb.go,.abo-btn img{animation:none}}
@media(max-width:700px){.dieb{top:-70px;height:70px}.dieb img{height:70px}.abo-btn img{width:110px}}
/* ===== v14: Team-Folie – Figuren dürfen den Text nicht überdecken ===== */
.art-four{--ch:clamp(105px,11.5vw,200px);padding:0}
@media(max-width:760px){.art-four{--ch:clamp(120px,30vw,190px)}}
/* v15 Stempel-Sprites statt Text */
.stamp.got::after{content:"";border:0;padding:0;border-radius:0;width:78px;height:78px;right:8px;top:8px;transform:rotate(-8deg);background:center/contain no-repeat;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:stampdrop .5s cubic-bezier(.2,1.5,.4,1) both}
.stamp[data-s="boese"].got::after{background-image:url(assets/stempel_lupe.webp)}
.stamp[data-s="team"].got::after{background-image:url(assets/stempel_finger.webp)}
.stamp[data-s="quiz"].got::after{background-image:url(assets/stempel_ok.webp)}
.stamp.got{padding-right:96px}
@keyframes stampdrop{0%{transform:scale(2.2) rotate(14deg);opacity:0}70%{opacity:1}100%{transform:rotate(-8deg) scale(1)}}
html[data-motion="off"] .stamp.got::after{animation:none}
@media(prefers-reduced-motion:reduce){.stamp.got::after{animation:none}}
/* v15b Ben ca. 5 % kleiner als Paula */
.dg-be{height:calc(var(--dh)*.95)}
.slide .art-four .p5 img.hu,.slide .art-four img.hu.p5{height:calc(var(--ch)*.95)!important}
/* v16 Logo-Marke + Sidekick */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mark{width:44px;height:44px;flex:none;transition:transform .25s}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
@media(max-width:560px){.logo{font-size:20px;gap:8px}.logo-mark{width:36px;height:36px}}
.sk-row{display:flex;align-items:flex-end;gap:clamp(12px,2vw,24px)}
.sk{position:relative;flex:none;width:clamp(78px,9vw,112px);aspect-ratio:238/360;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk-img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);transition:opacity .15s;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.sk-b{opacity:0}
.sk.wave .sk-a{opacity:0}.sk.wave .sk-b{opacity:1}
.sk:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:12px}
.sk:hover{animation:skhop .5s}
@keyframes skhop{40%{transform:translateY(-8px)}}
.sk-bubble{position:relative;margin:0 0 18px;background:#fff;color:#161235;font-weight:700;font-size:clamp(15px,1.6vw,18px);line-height:1.35;padding:12px 16px;border-radius:16px;max-width:46ch}
.sk-bubble::before{content:"";position:absolute;left:-9px;bottom:16px;border:9px solid transparent;border-right-color:#fff;border-left:0}
html[data-motion="off"] .sk:hover,html[data-motion="off"] .sk{animation:none}
@media(prefers-reduced-motion:reduce){.sk:hover{animation:none}}
/* v19 Wunschthema */
.wunsch-sec{padding-block:clamp(36px,6vw,72px)}
.wunsch-lead{max-width:62ch;font-size:clamp(16px,1.6vw,19px);color:#cfd6f2;margin:0 0 22px}
.wunsch-form{background:linear-gradient(160deg,#1D1650,#251B66);border:2px solid #3b3a86;border-radius:24px;padding:clamp(18px,3vw,32px);max-width:760px;display:flex;flex-direction:column;gap:10px}
.wf-l{font-weight:800;font-size:16px}.wf-l small{font-weight:500;color:#b5bde3}
.wunsch-form textarea,.wunsch-form input[type=text]{width:100%;box-sizing:border-box;background:#120F3A;color:#fff;border:2px solid #4a58a0;border-radius:14px;padding:12px 14px;font:inherit;font-size:17px;resize:vertical}
.wunsch-form textarea:focus,.wunsch-form input[type=text]:focus{outline:3px solid var(--yellow);outline-offset:2px;border-color:var(--yellow)}
.wf-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}.wf-col{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}
.wf-btn{flex:0 0 auto}
.wf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wf-msg{min-height:1.4em;margin:2px 0 0;font-weight:700}.wf-msg.ok{color:#7be29a}.wf-msg.err{color:#ff9aa8}
.wf-priv{font-size:14px;color:#b5bde3;margin:0;line-height:1.45}.wf-priv a{color:var(--yellow)}
/* v20 Flip-Karten (Paper-Mario-Drehung) */
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(14px,2vw,22px);margin-top:26px}
.flip{position:relative;height:clamp(210px,24vw,250px);perspective:1100px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:22px}
.flip:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
.flip-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.45,.5,1)}
.flip.on .flip-in{transform:rotateY(180deg)}
.flip.hop{animation:fliphop .7s cubic-bezier(.3,1.2,.5,1)}
@keyframes fliphop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-18px) scale(1.07)}100%{transform:translateY(0) scale(1)}}
.flip:hover:not(.on) .flip-in{transform:rotateY(-9deg) translateY(-4px)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.28),0 18px 30px rgba(0,0,0,.25)}
.flip-f{background:linear-gradient(160deg,#241C6B,#2B2180);border:3px solid #4a58a0}
.flip-f img{height:clamp(84px,10vw,108px);width:auto;max-width:70%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(0,0,0,.28))}
.flip-f b,.flip-b b{font-size:clamp(22px,2.4vw,27px);line-height:1.15;font-weight:800}
.flip-f i{font-style:normal;font-size:16px;font-weight:700;color:var(--yellow);opacity:.9}
.flip-b{transform:rotateY(180deg);background:var(--yellow);color:#161235;border:3px solid #161235}
.flip-b span{font-size:clamp(18px,2vw,21px);line-height:1.3;font-weight:600}
.flip-go{margin-top:2px;background:#161235;color:var(--yellow);font-weight:800;font-size:17px;padding:8px 18px;border-radius:999px;text-decoration:none}
.flip-go:focus-visible{outline:3px solid #161235;outline-offset:3px}
.soon-hero{padding-block:clamp(28px,5vw,56px)}
.soon-hero .lead{font-size:clamp(19px,2vw,24px)}
.soon-note{font-size:clamp(18px,1.8vw,21px);font-weight:700;margin:0 0 16px}
.more-sec{padding-block:clamp(28px,5vw,56px)}
@media (prefers-reduced-motion:reduce){.flip-in{transition:none}.flip-f,.flip-b{backface-visibility:visible;transition:opacity .2s}.flip-b{transform:none;opacity:0}.flip.on .flip-in{transform:none}.flip.on .flip-b{opacity:1}.flip.on .flip-f{opacity:0}.flip.hop{animation:none}}
html[data-motion="off"] .flip-in{transition:none}html[data-motion="off"] .flip.hop{animation:none}
/* größere Mindestschrift */
.wf-priv,.wf-l small,.akte-keep small,.soonnote,.badge-soon{font-size:max(15px,1em)}
.wf-priv{font-size:16px}
@media(min-width:900px){.flips:has(.flip:nth-child(6)){grid-template-columns:repeat(3,1fr)}}
.soon-hero .tag{margin-bottom:14px}.soon-hero .h1-post{margin:16px 0 12px}
/* v21 Sidekick: mehr Bewegung + Chat */
@keyframes skbob{0%,100%{transform:translateX(-50%) translateY(0) scale(1,1)}50%{transform:translateX(-50%) translateY(-6px) scale(1.02,.99)}}
@keyframes skaura{0%,100%{filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)) drop-shadow(0 0 4px rgba(190,120,255,.25))}50%{filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)) drop-shadow(0 0 16px rgba(190,120,255,.85))}}
@keyframes skwa{0%,78%,100%{opacity:1}80%,90%{opacity:0}92%{opacity:1}}
@keyframes skwb{0%,78%,100%{opacity:0}80%,90%{opacity:1}92%{opacity:0}}
@keyframes skhop{0%{transform:translateX(-50%) scale(1,1)}25%{transform:translateX(-50%) translateY(0) scale(1.12,.84)}55%{transform:translateX(-50%) translateY(-26px) scale(.9,1.12)}80%{transform:translateX(-50%) translateY(0) scale(1.08,.9)}100%{transform:translateX(-50%) scale(1,1)}}
.sk-img{animation:skbob 3.4s ease-in-out infinite,skaura 4.2s ease-in-out infinite;transform-origin:50% 100%}
.sk-b{animation-delay:-.6s}
.sk:not(.wave) .sk-a{animation:skbob 3.4s ease-in-out infinite,skaura 4.2s ease-in-out infinite,skwa 11s linear infinite}
.sk:not(.wave) .sk-b{animation:skbob 3.4s ease-in-out infinite,skaura 4.2s ease-in-out infinite,skwb 11s linear infinite}
.sk.hopping .sk-img{animation:skhop .6s cubic-bezier(.3,1.4,.5,1)}
/* schwebender Sidekick */
.skfab{position:fixed;right:clamp(10px,2vw,24px);bottom:clamp(86px,9vw,28px);z-index:70;width:clamp(74px,8vw,104px);aspect-ratio:238/360;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:skenter 1.1s cubic-bezier(.3,1.5,.5,1) .8s both}
@keyframes skenter{0%{transform:translateX(-140%) rotate(-12deg)}100%{transform:none}}
.skfab .sk-img{pointer-events:none}
.skfab:hover .sk-img,.skfab:focus-visible .sk-img{animation:skhop .6s cubic-bezier(.3,1.4,.5,1)}
.skfab:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:14px}
.skfab.mute{display:none}
.skfab-tip{position:fixed;right:clamp(96px,11vw,140px);bottom:clamp(120px,11vw,70px);z-index:70;background:#fff;color:#161235;font-weight:800;font-size:17px;padding:10px 14px;border-radius:16px;max-width:210px;line-height:1.25;box-shadow:0 8px 20px rgba(0,0,0,.35);animation:tipin .4s cubic-bezier(.3,1.5,.5,1) both}
.skfab-tip::before{content:"";position:absolute;right:-9px;bottom:14px;border:9px solid transparent;border-left-color:#fff;border-right:0}
@keyframes tipin{0%{opacity:0;transform:translateX(-12px) scale(.9)}100%{opacity:1;transform:none}}
.skfab-tip[hidden]{display:none}
.skchat{position:fixed;right:clamp(10px,2vw,24px);bottom:clamp(86px,9vw,28px);z-index:90;width:min(400px,calc(100vw - 20px));height:min(560px,calc(100dvh - 110px));display:flex;flex-direction:column;background:#17114a;border:3px solid #3b3a86;border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.55);overflow:hidden;animation:chatin .35s cubic-bezier(.3,1.4,.5,1) both;transform-origin:100% 100%}
@keyframes chatin{0%{opacity:0;transform:scale(.7) translateY(30px)}100%{opacity:1;transform:none}}
.skchat[hidden]{display:none}
.skc-h{display:flex;align-items:center;gap:12px;background:var(--yellow);color:#161235;padding:10px 14px}
.skc-h img{height:52px;width:auto;animation:skbob2 2.4s ease-in-out infinite}
@keyframes skbob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
.skc-h b{font-size:20px;flex:1}.skc-h button{background:#161235;color:var(--yellow);border:0;border-radius:50%;width:40px;height:40px;font-size:22px;font-weight:800;cursor:pointer}
.skc-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.skc-m{max-width:88%;padding:11px 14px;border-radius:16px;font-size:17px;line-height:1.35;animation:tipin .3s both}
.skc-m.bot{background:#fff;color:#161235;align-self:flex-start;border-bottom-left-radius:4px}
.skc-m.me{background:var(--yellow);color:#161235;align-self:flex-end;border-bottom-right-radius:4px;font-weight:700}
.skc-m a{color:#4a2fb0;font-weight:800}
.skc-dots{display:inline-flex;gap:5px}.skc-dots i{width:9px;height:9px;border-radius:50%;background:#7b72c9;animation:dotp 1s infinite}.skc-dots i:nth-child(2){animation-delay:.15s}.skc-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
.skc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.skc-chips button{background:#2B2180;color:#fff;border:2px solid #4a58a0;border-radius:999px;padding:9px 14px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.skc-chips button:hover,.skc-chips button:focus-visible{border-color:var(--yellow);outline:none}
.skc-f{display:flex;gap:8px;padding:10px 14px 6px;border-top:2px solid #2d2870}
.skc-f input{flex:1;min-width:0;background:#120F3A;color:#fff;border:2px solid #4a58a0;border-radius:14px;padding:11px 14px;font:inherit;font-size:17px}
.skc-f input:focus{outline:3px solid var(--yellow);outline-offset:1px}
.skc-f button{background:var(--yellow);color:#161235;border:0;border-radius:14px;padding:0 18px;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.skc-p{margin:0;padding:0 14px 10px;font-size:15px;color:#b5bde3}
@media(max-width:560px){.skchat{left:6px;right:6px;width:auto;bottom:6px;height:calc(100dvh - 24px);border-radius:18px}}
html[data-motion="off"] .sk-img,html[data-motion="off"] .skfab,html[data-motion="off"] .skc-h img,html[data-motion="off"] .skc-m,html[data-motion="off"] .skchat{animation:none!important}
@media(prefers-reduced-motion:reduce){.sk-img,.skfab,.skc-h img,.skc-m,.skchat,.skfab-tip{animation:none!important}}

.skc-chips[hidden]{display:none}