/* Niklas Hartweg – Über mich (ergänzt main.css und partner.css) */
body.about-page{background:var(--night)}
.amain{position:relative;z-index:2;background:var(--snow)}

/* ---------- Hero ---------- */
.a-hero{position:relative;min-height:100vh;min-height:100dvh;background:var(--navy);color:#fff;display:flex;align-items:center;overflow:hidden;padding:clamp(110px,14vh,150px) 0 clamp(70px,10vh,110px)}
.a-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 78% 40%,rgba(192,212,232,.22),transparent 70%),radial-gradient(50% 60% at 10% 100%,rgba(12,20,38,.5),transparent 70%)}
.ah-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center;width:100%}
.ah-txt{will-change:transform,opacity}
.ah-txt .eyebrow{color:var(--ice)}
.ah-title{margin:16px 0 0;font-size:clamp(64px,11vw,176px);display:grid;line-height:.84}
.ah-title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--ice)}
.ah-line{display:block;overflow:hidden;padding-bottom:.04em}
.ah-line>*{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ah-line:nth-child(2)>*{transition-delay:.1s}.ah-line:nth-child(3)>*{transition-delay:.2s}
.ready .ah-line>*{transform:none}
.ah-up{opacity:0;transform:translateY(16px);transition:opacity .8s .45s,transform .9s .45s cubic-bezier(.2,.8,.2,1)}
.ready .ah-up{opacity:1;transform:none}
.ah-lead{max-width:44ch;font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:#dfe8f4;margin:24px 0 28px}
.ah-facts{display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:1px solid var(--line-dark)}
.ah-facts div{padding:14px 26px 0 0;margin-right:26px;border-right:1px solid var(--line-dark)}
.ah-facts div:last-child{border-right:0}
.ah-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-on-dark)}
.ah-facts dd{margin:4px 0 0;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 108;font-size:clamp(17px,1.5vw,21px);text-transform:uppercase}
.ah-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 50px 90px -40px rgba(0,0,0,.6);transform:translate3d(0,var(--py,0px),0) rotate(1.5deg);
  clip-path:inset(100% 0 0 0 round 28px);transition:clip-path 1.3s .25s cubic-bezier(.7,0,.2,1)}
.ready .ah-photo{clip-path:inset(0 0 0 0 round 28px)}
.ah-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform 1.8s .25s cubic-bezier(.2,.8,.2,1)}
.ready .ah-photo img{transform:scale(1)}
.ah-photo figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#fff;background:rgba(12,20,38,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px}
.ah-down{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);width:52px;height:52px;margin-left:-26px;border-radius:50%;display:grid;place-items:center;background:var(--ice);color:var(--navy);animation:bob 2.2s ease-in-out infinite}
.ah-down svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Werdegang ---------- */
.a-path{position:relative;background:#f4f1ea;color:#2c2a28;padding:clamp(90px,11vw,150px) 0 clamp(80px,10vw,140px);overflow:hidden}
.a-path::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(rgba(60,50,40,.06) 1px,transparent 1.2px),radial-gradient(rgba(60,50,40,.04) 1px,transparent 1.2px);background-size:7px 7px,11px 13px;background-position:0 0,3px 5px}
.ap-head{position:relative;max-width:760px;margin:0 auto;text-align:center;display:grid;justify-items:center;gap:14px;opacity:0;transform:translateY(30px);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.ap-head.in{opacity:1;transform:none}
.ap-head .eyebrow{color:#5c5650}
.ap-title{font-size:clamp(44px,7vw,108px);color:#2c2a28}
.ap-title em,.am-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px currentColor}
.ap-lead{margin:0;max-width:52ch;color:#6b655e;font-size:clamp(15px,1.2vw,17px);line-height:1.6}
.tl2{position:relative;margin-top:clamp(50px,7vw,90px)}
.tl2-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(44,42,40,.12);border-radius:2px}
.tl2-line i{position:absolute;inset:0;background:#2c2a28;transform-origin:top;transform:scaleY(0);border-radius:2px}
.tl2-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,6vw,90px)}
.st2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.st2-dot{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#f4f1ea;box-shadow:inset 0 0 0 2px rgba(44,42,40,.35);transition:background .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.9,.3,1.6);z-index:1}
.st2.pass .st2-dot{background:#2c2a28;box-shadow:inset 0 0 0 2px #2c2a28,0 0 0 6px rgba(44,42,40,.08);transform:scale(1.1)}
.st2-txt{justify-self:end;text-align:right;max-width:470px;opacity:0;transform:translateX(-40px);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.st2 .pol{justify-self:start}
.st2.r .st2-txt{order:2;justify-self:start;text-align:left;transform:translateX(40px)}
.st2.r .pol{order:1;justify-self:end}
.st2.in .st2-txt{opacity:1;transform:none}
.st2-y{display:block;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(48px,6vw,92px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px #2c2a28;transition:color .5s}
.st2.pass .st2-y{color:#2c2a28}
.st2-p{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a837a}
.st2 h3{margin:10px 0 8px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 110;font-size:clamp(24px,2.3vw,34px);line-height:1;color:#2c2a28}
.st2 p{margin:0;color:#5f5952;font-size:clamp(15px,1.1vw,16.5px);line-height:1.6}
.st2-link{display:inline-flex;gap:8px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#2c2a28;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
/* Polaroids */
.pol{position:relative;margin:0;width:min(100%,340px);background:#fff;padding:12px 12px 44px;border-radius:4px;box-shadow:0 1px 2px rgba(30,24,18,.12),0 18px 34px -16px rgba(30,24,18,.35);
  transform:rotate(calc(var(--tilt,0deg) * 3)) translateY(50px) scale(.94);opacity:0;transition:transform 1.1s cubic-bezier(.2,.9,.3,1.2),opacity .7s}
.st2.in .pol{opacity:1;transform:rotate(var(--tilt,0deg))}
.st2.in .pol:hover{transform:rotate(0) scale(1.03)}
.pol::before{content:"";position:absolute;left:50%;top:-10px;width:86px;height:22px;margin-left:-43px;background:rgba(192,212,232,.55);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pol img,.pol-ph{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:2px}
.pol figcaption{position:absolute;left:14px;right:14px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b655e;text-align:center}
.pol-ph{display:grid;place-items:center;align-content:center;gap:6px;background:repeating-linear-gradient(-45deg,#f6f3ed 0 10px,#f1ede5 10px 20px);box-shadow:inset 0 0 0 1px rgba(44,42,40,.08)}
.pol-ph svg{width:58%;height:auto;overflow:visible}
.pol-ph path{fill:none;stroke:#6b655e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .35s cubic-bezier(.6,0,.2,1)}
.st2.in .pol-ph path{stroke-dashoffset:0}
.pol-ph span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9a938a}

/* ---------- Motto ---------- */
.a-motto{background:var(--night);color:#fff;padding:clamp(90px,12vw,170px) 0;text-align:center}
.am-q{margin:0 auto;max-width:18ch;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 112;font-size:clamp(36px,6vw,92px);line-height:.95;text-wrap:balance}
.am-q span{display:inline-block;opacity:.12;transform:translateY(.25em);transition:opacity .6s calc(var(--w)*.07s),transform .8s calc(var(--w)*.07s) cubic-bezier(.2,.8,.2,1),color .6s}
.am-q.in span{opacity:1;transform:none}
.am-q.in span:nth-last-child(-n+2){color:var(--ice)}

/* ---------- Abseits der Loipe ---------- */
.a-more{background:var(--navy);color:#fff;padding:clamp(90px,11vw,150px) 0}
.am-head{display:grid;gap:14px;max-width:760px;opacity:0;transform:translateY(30px);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.am-head.in{opacity:1;transform:none}
.am-head .eyebrow{color:var(--ice)}
.am-title{font-size:clamp(44px,7vw,108px)}
.am-title em{color:transparent;-webkit-text-stroke:1.5px var(--ice)}
.am-lead{margin:0;max-width:52ch;color:#dbe5f2;font-size:clamp(15px,1.2vw,17.5px);line-height:1.6}
.bento{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.bx{position:relative;border-radius:24px;overflow:hidden;background:rgba(12,20,38,.35);box-shadow:inset 0 0 0 1px var(--line-dark);display:flex;flex-direction:column;
  opacity:0;transform:translateY(50px);transition:opacity .8s calc(var(--d,0)*.08s),transform 1s calc(var(--d,0)*.08s) cubic-bezier(.2,.9,.3,1.1),box-shadow .4s}
.bx.in{opacity:1;transform:none}
.bx:hover{box-shadow:inset 0 0 0 1px rgba(192,212,232,.5)}
.bx-move{grid-column:span 7;grid-row:span 2;--d:0}
.bx-music{grid-column:span 5;grid-row:span 2;--d:1}
.bx-motor{grid-column:span 5;--d:2}
.bx-diy{grid-column:span 4;--d:3}
.bx-cam{grid-column:span 3;--d:4}
.bx-fam{grid-column:span 12;flex-direction:row;--d:5}
.bx-media{position:relative;overflow:hidden;flex:1;min-height:260px}
.bx-media img,.bx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.swap2 img.alt{opacity:0}
.bx:hover .swap2 img:not(.alt),.swap2.flip img:not(.alt){opacity:0;transform:scale(1.05)}
.bx:hover .swap2 img.alt,.swap2.flip img.alt{opacity:1}
.bx-media::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(12,20,38,.6),transparent);pointer-events:none}
.bx-music .still{transition:opacity .5s}
.bx-music.playing .still{opacity:0}
.bx-txt{position:relative;padding:20px 22px 24px;display:grid;gap:6px}
.bx-txt small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.bx-txt h3{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 110;font-size:clamp(22px,2vw,30px);line-height:1}
.bx-txt p{margin:4px 0 0;color:#dbe5f2;font-size:15px;line-height:1.55}
.bx-art{position:relative;height:150px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(192,212,232,.12),transparent)}
.bx-art svg{width:70%;max-height:120px;overflow:visible}
.bx-art path,.bx-art circle:not(.car){fill:none;stroke:var(--ice);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .3s cubic-bezier(.6,0,.2,1)}
.bx.in .bx-art path,.bx.in .bx-art circle:not(.car){stroke-dashoffset:0}
.bx-motor .track{stroke:rgba(192,212,232,.25);stroke-width:14}
.bx-motor .track-dash{stroke:#fff;stroke-width:1.6;stroke-dasharray:.02 .02}
.bx.in.bx-motor .track-dash{stroke-dashoffset:0;animation:dashRun 6s linear infinite}
@keyframes dashRun{to{stroke-dashoffset:-1}}
.bx-motor .car{fill:#fff;offset-path:path("M40 170 C 40 60, 140 40, 200 90 S 330 170, 360 70");offset-distance:0%;animation:lap 4.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lap{to{offset-distance:100%}}
.bx-motor .flag{position:absolute;right:16px;top:16px;width:44px;height:28px;border-radius:3px;background:conic-gradient(#fff 25%,var(--night) 0 50%,#fff 0 75%,var(--night) 0) 0 0/11px 11px;opacity:.85;transform-origin:left center;animation:flag 1.6s ease-in-out infinite}
@keyframes flag{50%{transform:skewY(-6deg) scaleX(.94)}}
.bx-fam .bx-media{flex:1.3;min-height:220px}
.bx-fam .bx-txt{flex:1;align-content:center}
.bx-media.ph{display:grid;place-items:center;background:repeating-linear-gradient(-45deg,rgba(192,212,232,.06) 0 12px,transparent 12px 24px)}
.bx-media.ph::after{display:none}
.ph-in{display:grid;justify-items:center;gap:8px}
.ph-in svg{width:200px;overflow:visible}
.ph-in path{fill:none;stroke:var(--ice);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .3s cubic-bezier(.6,0,.2,1)}
.bx.in .ph-in path{stroke-dashoffset:0}
.ph-in span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-on-dark)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .ah-grid{grid-template-columns:1fr}
  .ah-photo{max-width:420px;width:100%;justify-self:center;aspect-ratio:4/4.4;order:-1}
  .a-hero{padding-top:100px}
  .tl2-line{left:9px}
  .st2{grid-template-columns:1fr;gap:22px;padding-left:40px}
  .st2-dot{left:9px;top:28px}
  .st2-txt,.st2.r .st2-txt{order:1;justify-self:start;text-align:left;transform:translateY(30px)}
  .st2 .pol,.st2.r .pol{order:2;justify-self:start;width:min(100%,320px)}
  .bx-move,.bx-music{grid-column:span 12;grid-row:auto}
  .bx-motor,.bx-diy,.bx-cam{grid-column:span 12}
  .bx-fam{flex-direction:column}
  .bx-media{min-height:240px}
}
@media (min-width:901px) and (max-width:1100px){ .bx-motor{grid-column:span 6} .bx-diy{grid-column:span 6} .bx-cam{grid-column:span 12} }
@media (prefers-reduced-motion:reduce){
  .ah-line>*,.ah-up,.ah-photo,.ah-photo img,.ap-head,.st2-txt,.pol,.am-head,.bx,.am-q span{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .bx-motor .car,.bx-motor .flag,.ah-down{animation:none}
}
/* Korrekturen */
.ah-title{font-size:clamp(46px,6.8vw,112px)}
.ap-title em{-webkit-text-stroke:1.5px #2c2a28}
.am-title em{-webkit-text-stroke:1.5px var(--ice)}
@media (max-width:900px){ .ah-title{font-size:12.4vw} .ap-head{text-align:left;justify-items:start} }

/* Runde 2: Fotos in den Karten */
.bx-motor,.bx-diy,.bx-cam{min-height:0}
.bx-motor .bx-media,.bx-cam .bx-media{min-height:220px}
.bx-motor .bx-media img{object-position:50% 30%}
.bx-motor .flag{z-index:2}
.bx-fam .bx-media{min-height:300px}

/* ===== Runde 3: Hero neu, Surf auf Klick, Spotify ===== */
.ah-stage{position:relative;justify-self:center;width:min(100%,460px);padding:6% 0}
.ah-ring{position:absolute;inset:-4% -10%;border-radius:50%;border:1.5px dashed rgba(192,212,232,.28);animation:ringSpin 60s linear infinite;pointer-events:none}
.ah-ring::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(192,212,232,.14)}
.ah-stage .ah-photo{transform:translate3d(0,var(--py,0px),0) rotate(-2deg)}
.ah-tags{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.ah-tags li{position:absolute;left:var(--tx);top:var(--ty);white-space:nowrap;font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 108;font-size:clamp(13px,1.1vw,16px);letter-spacing:.02em;
  padding:9px 15px;border-radius:999px;background:var(--ice);color:var(--navy);box-shadow:0 16px 30px -16px rgba(0,0,0,.6);
  transform:translate(var(--mx,0px),var(--my,0px)) rotate(var(--r)) scale(0);transition:transform .7s calc(.7s + var(--d)*.12s) cubic-bezier(.2,1.4,.4,1)}
.ah-tags li:nth-child(2n){background:#fff}
.ah-tags li:nth-child(3){background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ice),0 16px 30px -16px rgba(0,0,0,.6)}
.ready .ah-tags li{transform:translate(var(--mx,0px),var(--my,0px)) rotate(var(--r)) scale(1);transition:transform .9s cubic-bezier(.2,.9,.3,1)}
.ready .ah-tags li{animation:tagFloat 5s ease-in-out calc(var(--d)*.6s) infinite}
@keyframes tagFloat{50%{translate:0 -7px}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
/* Surf */
.surf-media .surf-still,.surf-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.surf-media video{opacity:0}
.surf-media.on video{opacity:1}.surf-media.on .surf-still{opacity:0}
.play-btn{all:unset;cursor:pointer;position:absolute;left:18px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy);font:600 14px var(--body);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.play-btn:hover{transform:scale(1.05)}
.play-btn:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.play-btn svg{width:30px;height:30px;padding:8px;border-radius:50%;background:var(--navy);fill:#fff;box-sizing:border-box}
.play-btn .i-pause{display:none}
.surf-media.on .play-btn .i-play{display:none}.surf-media.on .play-btn .i-pause{display:block}
.surf-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);opacity:0;transition:opacity .3s}
/* Spotify */
.sp{display:grid;gap:8px;margin:6px 0 4px}
.sp-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:#121212;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.2,.9,.3,1.4),background .3s}
.sp-btn:hover{transform:translateY(-2px);background:#1a1a1a}
.sp-btn:focus-visible{outline:2px solid #1ed760;outline-offset:3px}
.sp-ico{flex:none;width:42px;height:42px;border-radius:50%;background:#1ed760;display:grid;place-items:center}
.sp-ico svg{width:20px;height:20px;fill:#000;margin-left:2px}
.sp-t{display:grid;gap:2px;flex:1}
.sp-t small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b3b3b3}
.sp-t b{font-size:16px;font-weight:600}
.sp-eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.sp-eq i{width:3px;background:#1ed760;border-radius:2px;height:30%;animation:eq 1s ease-in-out infinite}
.sp-eq i:nth-child(2){animation-delay:.2s}.sp-eq i:nth-child(3){animation-delay:.4s}.sp-eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{50%{height:100%}}
.sp-frame{border:0;border-radius:12px;width:100%;height:152px;background:#121212}
.sp-open{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);text-decoration:none;border-bottom:1px solid rgba(192,212,232,.4)}
@media (max-width:900px){ .ah-stage{width:min(78%,360px);margin-top:10px} .ah-tags li{font-size:12px;padding:7px 12px} }
@media (prefers-reduced-motion:reduce){ .ah-tags li{transform:rotate(var(--r))!important;animation:none!important} .ah-ring{animation:none} }
@media (max-width:900px){ .ah-stage{order:-1;justify-self:center} .ah-stage .ah-photo{max-width:none} }

/* ===== Runde 4: Skate, Golf, DIY-Foto, Kindervideo ===== */
.bx-skate{grid-column:span 4;--d:2}
.bx-golf{grid-column:span 4;--d:3}
.bx-motor{grid-column:span 4;--d:4}
.bx-diy{grid-column:span 6;--d:5}
.bx-cam{grid-column:span 6;--d:6}
.bx-skate .bx-media,.bx-golf .bx-media,.bx-diy .bx-media{min-height:240px}
.golf-media video{object-position:30% 72%}
.pol .pol-vid,.pol .pol-alt{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:2px}
.pol .pol-alt{display:none}
@media (prefers-reduced-motion:reduce){ .pol .pol-vid{display:none} .pol .pol-alt{display:block} }
@media (max-width:900px){ .bx-skate,.bx-golf,.bx-motor,.bx-diy,.bx-cam{grid-column:span 12} }
@media (min-width:901px) and (max-width:1100px){ .bx-skate,.bx-golf{grid-column:span 6} .bx-motor{grid-column:span 12} .bx-diy,.bx-cam{grid-column:span 6} }

/* ===== Runde 5: Hero-Karussell, Polaroid-Notizen ===== */
.ah-car{position:relative;justify-self:center;width:min(100%,440px);display:grid;gap:14px}
.ahc-frame{position:relative;margin:0;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--night);cursor:pointer;
  box-shadow:0 60px 100px -50px rgba(0,0,0,.7);transform:translate3d(0,var(--py,0px),0);clip-path:inset(100% 0 0 0 round 28px);transition:clip-path 1.3s .25s cubic-bezier(.7,0,.2,1)}
.ready .ahc-frame{clip-path:inset(0 0 0 0 round 28px)}
.ahc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 4.6s linear}
.ahc-frame img.on{opacity:1;transform:scale(1);z-index:2}
.ahc-frame img.was{opacity:0;z-index:1;transition:opacity 1.1s ease}
.ahc-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:3;background:linear-gradient(0deg,rgba(12,20,38,.55),transparent);pointer-events:none}
.ahc-count{position:absolute;left:18px;bottom:16px;z-index:4;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#dbe5f2}
.ahc-count b{color:#fff;font-weight:500}
.ahc-bar{height:2px;background:rgba(192,212,232,.2);border-radius:2px;overflow:hidden}
.ahc-bar i{display:block;height:100%;background:var(--ice);transform-origin:left;transform:scaleX(0)}
.ah-facts div{border-right:0}
/* Polaroid-Notizen beim Hovern */
.pol.has-note{cursor:help}
.pol-note{position:absolute;left:50%;bottom:calc(100% - 26px);width:min(300px,86vw);transform:translate(-50%,10px) rotate(calc(var(--tilt,0deg) * -1));z-index:5;
  background:#2c2a28;color:#f4f1ea;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.45;text-align:left;opacity:0;pointer-events:none;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.55);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.3)}
.pol-note small{display:block;margin-bottom:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#cfc8bd}
.pol.has-note::after{content:"i";position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:#2c2a28;color:#f4f1ea;display:grid;place-items:center;font:600 13px var(--body);box-shadow:0 0 0 3px #f4f1ea}
.pol.has-note:hover .pol-note,.pol.has-note:focus-visible .pol-note,.pol.has-note.tap .pol-note{opacity:1;transform:translate(-50%,0) rotate(calc(var(--tilt,0deg) * -1))}
.sp-host{border-radius:12px;overflow:hidden;background:#121212;min-height:80px}
.sp-btn.loading .sp-ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){ .ah-car{width:min(78%,360px);order:-1} }

/* Karussell ohne Stocken: Überblendung über dem stehenden Vorgängerbild, langsamer Zoom */
.ahc-frame img{opacity:0;transform:scale(1.06);transition:none}
.ahc-frame img.on{opacity:1;transform:scale(1);transition:opacity 1.2s ease,transform 5.5s cubic-bezier(.25,.6,.3,1)}
.ahc-frame img.was{opacity:0}
/* Familie & Hund: Gesicht und Hund beide im Bild */
.bx-fam .bx-media{min-height:420px}
@media (max-width:900px){ .bx-fam .bx-media{min-height:360px} }

/* Polaroid-Stapel (mehrere Bilder pro Station) */
.pol-stack{position:relative;width:100%;aspect-ratio:4/3.4;border-radius:2px;overflow:hidden;cursor:pointer;background:#ece8e0}
.pol-stack .ps-it{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 3.4s ease}
.pol-stack .ps-it.on{opacity:1;transform:none}
.ps-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:5px;z-index:2}
.ps-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ps-dots i.on{background:#fff;width:16px;border-radius:4px}
.pol:has(.pol-stack)::before{z-index:3}
/* Polaroids ohne Beschriftung */
.pol figcaption{display:none}

/* Titel «Bewegung.» nicht abschneiden */
.ah-title{font-size:clamp(44px,6.1vw,100px)}
.ah-line{padding-right:.12em;margin-right:-.12em}
@media (max-width:900px){ .ah-title{font-size:11.5vw} }
/* Notiz auf dem Simrig-Bild */
.img-note{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(12,20,38,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.bx:hover .swap2 .img-note,.swap2.flip .img-note{opacity:1;transform:none}

/* ===== Handy-QA: Polaroids nie über dem Text ===== */
@media (max-width:900px){ .st2 .pol{margin-top:6px} .st2.r .pol{margin-top:30px} }

/* ===== Handy: Kacheln reagieren nicht auf Scrollen oder Antippen ===== */
@media (hover:none){
  .bx:hover{box-shadow:none}
  .bx .swap2 img:not(.alt),.bx:hover .swap2 img:not(.alt),.swap2.flip img:not(.alt){opacity:1!important;transform:none!important}
  .bx .swap2 img.alt,.bx:hover .swap2 img.alt,.swap2.flip img.alt{opacity:0!important}
  .bx-music .still,.bx-music.playing .still,.bx-golf .still,.bx-golf.playing .still{opacity:1!important}
  .bx{-webkit-tap-highlight-color:transparent}
}
@media (hover:none){ .bx .img-note{opacity:0!important} }