/* Strandgut Bikes: Pop-up-Buch aus Pappe. Scroll-Fortschritt kommt als --p (0 bis 1) pro Szene aus main.js. */
@font-face{font-family:"Titan One";src:url("../fonts/titan-one-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans-latin-var.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --sand:#F4EBD8; --sand2:#E6D9BC; --kraft:#D9BF8C; --ink:#0F1B3D; --cobalt:#1F3DFF; --cobalt-d:#1630C9;
  --coral:#FF5A36; --turq:#00B8A9; --white:#fff;
  --display:"Titan One","Arial Rounded MT Bold",system-ui,sans-serif;
  --text:"Nunito Sans",system-ui,sans-serif;
  /* Stellschrauben für das Regler-Panel (Phase 6) */
  --hero-title:clamp(2.2rem,5.1vw,4.9rem);
  --hero-banner-w:min(45vw,660px);
  --hero-banner-top:19vh;
  --pad-x:clamp(16px,4vw,64px);
  --paper-shadow:0 14px 22px -6px rgba(15,27,61,.38),0 2px 0 rgba(15,27,61,.22);
  --p:0;
}
*{box-sizing:border-box}
section[id]{scroll-margin-top:72px}
html{scroll-padding-top:84px}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:400 clamp(1rem,1.15vw,1.15rem)/1.55 var(--text);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0 0 .5em;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2vw,1.8rem)}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--sand);padding:10px 14px;z-index:300}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;border-radius:6px}
.foot :focus-visible,.pinion :focus-visible,.bikes .tiers :focus-visible,.close :focus-visible{outline-color:var(--sand)}
::selection{background:var(--coral);color:var(--ink)}
html{scrollbar-color:var(--cobalt) var(--sand)}
/* kein Umbruch im Wort */
.nb{white-space:nowrap}
mark{background:var(--coral);color:var(--ink);padding:0 .16em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Papier: Karton mit Kante und weichem Schatten in mehreren Höhen */
.paper{background:var(--sand);box-shadow:var(--paper-shadow);position:relative}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.75)}
/* Stanzfigur: weißer Rand, dann Schatten */
.dc{filter:drop-shadow(0 16px 12px rgba(15,27,61,.45))}

/* Zuglaschen */
.pull{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.4rem);text-decoration:none;
  padding:.8em 1.3em .8em 1.4em;border-radius:14px 14px 14px 4px;border:0;cursor:pointer;color:var(--ink);
  box-shadow:0 10px 14px -6px rgba(15,27,61,.45),0 2px 0 rgba(15,27,61,.3);transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s}
.pull::after{content:"";width:0;height:0;border-left:.42em solid transparent;border-right:.42em solid transparent;border-top:.62em solid currentColor;transition:transform .25s}
.pull.coral{background:var(--coral)}
.pull.cobalt{background:var(--cobalt);color:#fff}
.pull:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 16px 18px -8px rgba(15,27,61,.5),0 2px 0 rgba(15,27,61,.3)}
.pull:hover::after{transform:translateY(4px)}
.pull:active{transform:translateY(2px)}
.tabs{display:flex;gap:14px;flex-wrap:wrap}

/* Kopf */
.top{position:fixed;left:0;right:0;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--pad-x);background:var(--sand);box-shadow:0 8px 14px -8px rgba(15,27,61,.5);}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:var(--sand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'><path d='M0 0H48V4C42 12 36 12 30 4S18 -4 12 4 4 10 0 4Z'/></svg>") repeat-x 0 0/48px 14px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'><path d='M0 0H48V4C42 12 36 12 30 4S18 -4 12 4 4 10 0 4Z'/></svg>") repeat-x 0 0/48px 14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cobalt);font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.6rem)}
.brand span{color:var(--ink)}
.top nav{display:flex;gap:clamp(12px,2.2vw,32px)}
.top nav a{font-weight:800;text-decoration:none;padding:6px 2px;background:linear-gradient(var(--coral),var(--coral)) 0 100%/0 4px no-repeat;transition:background-size .25s}
.top nav a:hover{background-size:100% 4px}

/* Pappkante: dunkler Streifen unter jeder Wellenkante, wie die Dicke der Pappe */
.wv::before,.beach::before,.bikes::before,.parts::before,.pinion::before,.letter::before,.faq::before,.card-form::before{filter:drop-shadow(0 -8px 0 rgba(15,27,61,.5)) drop-shadow(0 -18px 14px rgba(0,0,0,.3))}

/* Szenen */
.scene{position:relative;overflow-x:clip;--p:.8}
.scene[data-scene="sticky"]{height:230vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.copy{padding:clamp(22px,3vw,44px);border-radius:6px}
.copy p:last-child{margin-bottom:0}

/* Schichten: jeder Abschnitt bleibt unten stehen, der nächste schiebt sich darüber */
.layer{position:sticky;top:var(--stick,0px);transform-origin:50% 100%;transform:scale(calc(1 - var(--q,0) * .045));filter:brightness(calc(1 - var(--q,0) * .4)) saturate(calc(1 + var(--q,0) * .25))}
.dim{display:none}

/* 1 Cover */
.cover{background:var(--sand);z-index:1}
.cover .stage{background:var(--sand)}
.sun{position:absolute;right:clamp(4vw,13vw,260px);top:13vh;width:min(36vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(rgba(255,255,255,.35) 22%,transparent 24%) 0 0/16px 16px,var(--coral);
  box-shadow:0 0 0 6px #fff,0 18px 22px -6px rgba(15,27,61,.4);transform:translateY(calc((1 - var(--p)) * 22vh))}
.cloud{position:absolute;height:90px;width:260px;background:#fff;border-radius:60px;box-shadow:var(--paper-shadow)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:110px;height:110px;left:36px;top:-46px}.cloud::after{width:84px;height:84px;left:128px;top:-30px}
.c1{left:6vw;top:56vh;transform:translateX(calc(var(--p) * 14vw)) scale(.8)}
.c2{right:2vw;top:17vh;transform:translateX(calc(var(--p) * -20vw)) scale(1.1)}
.wv{position:absolute;left:-12vw;right:-12vw;bottom:0;--c:var(--cobalt);filter:drop-shadow(0 -7px 6px rgba(15,27,61,.35))}
.wv::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--c);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'><path d='M0 40V20C25 -4 55 -4 80 20S135 44 160 20S190 6 200 12V40Z'/></svg>") repeat-x 0 0/200px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'><path d='M0 40V20C25 -4 55 -4 80 20S135 44 160 20S190 6 200 12V40Z'/></svg>") repeat-x 0 0/200px 40px}
.wv::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.16) 24%,transparent 26%) 0 0/18px 18px,var(--c)}
.w1{--c:var(--turq);height:44vh;transform:translateX(calc(var(--p) * -7vw))}
.w2{height:36vh;transform:translateX(calc(var(--p) * 6vw));z-index:3}
.foam{position:absolute;left:-12vw;right:-12vw;bottom:calc(36vh - 14px);height:70px;z-index:3;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='70' viewBox='0 0 520 70'><circle cx='16' cy='36' r='16' fill='%2300B8A9' opacity='.55'/><circle cx='41' cy='39' r='21' fill='%2300B8A9' opacity='.55'/><circle cx='49' cy='15' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='67' cy='37' r='21' fill='%2300B8A9' opacity='.55'/><circle cx='76' cy='8' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='82' cy='39' r='10' fill='%2300B8A9' opacity='.55'/><circle cx='74' cy='23' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='103' cy='41' r='18' fill='%2300B8A9' opacity='.55'/><circle cx='126' cy='34' r='19' fill='%2300B8A9' opacity='.55'/><circle cx='149' cy='53' r='18' fill='%2300B8A9' opacity='.55'/><circle cx='164' cy='52' r='10' fill='%2300B8A9' opacity='.55'/><circle cx='161' cy='36' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='187' cy='39' r='21' fill='%2300B8A9' opacity='.55'/><circle cx='195' cy='10' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='210' cy='46' r='17' fill='%2300B8A9' opacity='.55'/><circle cx='230' cy='53' r='16' fill='%2300B8A9' opacity='.55'/><circle cx='250' cy='33' r='16' fill='%2300B8A9' opacity='.55'/><circle cx='257' cy='9' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='274' cy='45' r='20' fill='%2300B8A9' opacity='.55'/><circle cx='271' cy='19' r='5' fill='%2300B8A9' opacity='.55'/><circle cx='288' cy='51' r='9' fill='%2300B8A9' opacity='.55'/><circle cx='281' cy='37' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='312' cy='44' r='22' fill='%2300B8A9' opacity='.55'/><circle cx='302' cy='14' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='330' cy='47' r='12' fill='%2300B8A9' opacity='.55'/><circle cx='342' cy='38' r='9' fill='%2300B8A9' opacity='.55'/><circle cx='344' cy='24' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='362' cy='33' r='18' fill='%2300B8A9' opacity='.55'/><circle cx='360' cy='11' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='379' cy='43' r='13' fill='%2300B8A9' opacity='.55'/><circle cx='382' cy='22' r='3' fill='%2300B8A9' opacity='.55'/><circle cx='394' cy='46' r='11' fill='%2300B8A9' opacity='.55'/><circle cx='405' cy='52' r='9' fill='%2300B8A9' opacity='.55'/><circle cx='410' cy='40' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='424' cy='37' r='16' fill='%2300B8A9' opacity='.55'/><circle cx='418' cy='16' r='6' fill='%2300B8A9' opacity='.55'/><circle cx='438' cy='41' r='10' fill='%2300B8A9' opacity='.55'/><circle cx='434' cy='29' r='5' fill='%2300B8A9' opacity='.55'/><circle cx='462' cy='35' r='22' fill='%2300B8A9' opacity='.55'/><circle cx='452' cy='10' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='482' cy='34' r='15' fill='%2300B8A9' opacity='.55'/><circle cx='496' cy='52' r='10' fill='%2300B8A9' opacity='.55'/><circle cx='511' cy='39' r='12' fill='%2300B8A9' opacity='.55'/><circle cx='-9' cy='39' r='12' fill='%2300B8A9' opacity='.55'/><circle cx='520' cy='23' r='5' fill='%2300B8A9' opacity='.55'/><circle cx='9' cy='51' r='15' fill='%2300B8A9' opacity='.55'/><circle cx='9' cy='51' r='15' fill='%2300B8A9' opacity='.55'/><circle cx='5' cy='30' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='22' cy='34' r='9' fill='%2300B8A9' opacity='.55'/><circle cx='22' cy='34' r='9' fill='%2300B8A9' opacity='.55'/><circle cx='30' cy='20' r='4' fill='%2300B8A9' opacity='.55'/><circle cx='42' cy='38' r='18' fill='%2300B8A9' opacity='.55'/><circle cx='42' cy='38' r='18' fill='%2300B8A9' opacity='.55'/><circle cx='16' cy='31' r='16' fill='white'/><circle cx='41' cy='34' r='21' fill='white'/><circle cx='49' cy='10' r='4' fill='white'/><circle cx='67' cy='32' r='21' fill='white'/><circle cx='76' cy='3' r='4' fill='white'/><circle cx='82' cy='34' r='10' fill='white'/><circle cx='74' cy='18' r='3' fill='white'/><circle cx='103' cy='36' r='18' fill='white'/><circle cx='126' cy='29' r='19' fill='white'/><circle cx='149' cy='48' r='18' fill='white'/><circle cx='164' cy='47' r='10' fill='white'/><circle cx='161' cy='31' r='3' fill='white'/><circle cx='187' cy='34' r='21' fill='white'/><circle cx='195' cy='5' r='4' fill='white'/><circle cx='210' cy='41' r='17' fill='white'/><circle cx='230' cy='48' r='16' fill='white'/><circle cx='250' cy='28' r='16' fill='white'/><circle cx='257' cy='4' r='3' fill='white'/><circle cx='274' cy='40' r='20' fill='white'/><circle cx='271' cy='14' r='5' fill='white'/><circle cx='288' cy='46' r='9' fill='white'/><circle cx='281' cy='32' r='3' fill='white'/><circle cx='312' cy='39' r='22' fill='white'/><circle cx='302' cy='9' r='3' fill='white'/><circle cx='330' cy='42' r='12' fill='white'/><circle cx='342' cy='33' r='9' fill='white'/><circle cx='344' cy='19' r='3' fill='white'/><circle cx='362' cy='28' r='18' fill='white'/><circle cx='360' cy='6' r='3' fill='white'/><circle cx='379' cy='38' r='13' fill='white'/><circle cx='382' cy='17' r='3' fill='white'/><circle cx='394' cy='41' r='11' fill='white'/><circle cx='405' cy='47' r='9' fill='white'/><circle cx='410' cy='35' r='4' fill='white'/><circle cx='424' cy='32' r='16' fill='white'/><circle cx='418' cy='11' r='6' fill='white'/><circle cx='438' cy='36' r='10' fill='white'/><circle cx='434' cy='24' r='5' fill='white'/><circle cx='462' cy='30' r='22' fill='white'/><circle cx='452' cy='5' r='4' fill='white'/><circle cx='482' cy='29' r='15' fill='white'/><circle cx='496' cy='47' r='10' fill='white'/><circle cx='511' cy='34' r='12' fill='white'/><circle cx='-9' cy='34' r='12' fill='white'/><circle cx='520' cy='18' r='5' fill='white'/><circle cx='9' cy='46' r='15' fill='white'/><circle cx='9' cy='46' r='15' fill='white'/><circle cx='5' cy='25' r='4' fill='white'/><circle cx='22' cy='29' r='9' fill='white'/><circle cx='22' cy='29' r='9' fill='white'/><circle cx='30' cy='15' r='4' fill='white'/><circle cx='42' cy='33' r='18' fill='white'/><circle cx='42' cy='33' r='18' fill='white'/></svg>") repeat-x 0 100%/520px 70px;filter:drop-shadow(0 -4px 0 rgba(15,27,61,.2));transform:translateX(calc(var(--p) * -9vw))}
.w3{--c:var(--cobalt-d);height:21vh;transform:translateX(calc(var(--p) * -12vw));z-index:4}
.bike{position:absolute;right:1vw;bottom:15vh;width:min(54vw,820px);height:auto;z-index:2;
  transform:translate3d(0,calc(10vh - var(--p) * 27vh),0) rotate(calc(-4deg + var(--p) * 4deg));transform-origin:50% 100%}
.banner{position:absolute;left:var(--pad-x);top:var(--hero-banner-top);width:var(--hero-banner-w);z-index:6;padding:clamp(20px,2.4vw,40px);
  border-radius:6px;transform:rotate(-2deg) translateY(calc(var(--p) * -5vh))}
.banner h1{font-size:var(--hero-title);margin-bottom:.35em}
.banner p{font-size:clamp(1rem,1.3vw,1.25rem);font-weight:700;max-width:34ch}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;font-family:var(--display);border-radius:50%;z-index:7;background:var(--coral);color:var(--ink);
  box-shadow:0 0 0 5px #fff,0 14px 16px -6px rgba(15,27,61,.5)}
.s-weg{right:4vw;bottom:5vh;width:clamp(120px,13vw,190px);aspect-ratio:1;font-size:clamp(.95rem,1.35vw,1.35rem);line-height:1.05;transform:rotate(calc(10deg + var(--p) * 14deg))}

/* Laufband */
.ticker{position:relative;z-index:5;margin:-5vh 0 -3vh;background:var(--ink);color:var(--sand);transform:rotate(-1.4deg);padding:14px 0;overflow:hidden;box-shadow:var(--paper-shadow)}
.tick-in{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;animation:tick 38s linear infinite;font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.7rem)}
.tick-in span::after{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--coral);margin-left:2.4rem;vertical-align:.12em}
@keyframes tick{to{transform:translateX(-50%)}}

/* 2 Strand */
.beach{background:var(--sand);z-index:3;margin-top:-6vh}
.beach::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--sand);z-index:2;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'><path d='M0 40V22C20 -2 60 -2 80 22S140 46 160 20V40Z'/></svg>") repeat-x 0 0/160px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'><path d='M0 40V22C20 -2 60 -2 80 22S140 46 160 20V40Z'/></svg>") repeat-x 0 0/160px 40px}
.beach .stage{background:radial-gradient(rgba(15,27,61,.1) 22%,transparent 24%) 0 0/20px 20px,var(--sand2)}
.note{position:absolute;left:var(--pad-x);top:18vh;width:min(44vw,620px);padding:clamp(22px,2.6vw,40px);border-radius:6px;z-index:3;transform:rotate(-1.6deg) translateY(calc((1 - min(var(--p) * 4,1)) * 30vh))}
.it{position:absolute;height:auto;z-index:2;--e:clamp(0,(var(--p) - var(--d)) * 3,1);
  transform:translate3d(calc((1 - var(--e)) * var(--dx)),calc((1 - var(--e)) * var(--dy)),0) rotate(calc(var(--r) + (1 - var(--e)) * var(--rs)))}
.i-akku{left:4vw;bottom:5vh;width:min(30vw,430px);--d:.05;--dx:-60vw;--dy:20vh;--r:-8deg;--rs:-50deg}
.i-display{right:5vw;top:13vh;width:min(18vw,260px);--d:.12;--dx:50vw;--dy:-30vh;--r:7deg;--rs:40deg}
.i-bremse{right:3vw;bottom:8vh;width:min(20vw,290px);--d:.2;--dx:60vw;--dy:20vh;--r:-5deg;--rs:60deg}
.i-motor{left:33vw;bottom:6vh;width:min(19vw,270px);--d:.28;--dx:0;--dy:60vh;--r:6deg;--rs:90deg}
.i-riemen{left:52vw;bottom:9vh;width:min(24vw,340px);--d:.36;--dx:30vw;--dy:50vh;--r:-4deg;--rs:-70deg}
.i-lader{left:55vw;top:12vh;width:min(18vw,260px);--d:.44;--dx:-20vw;--dy:-50vh;--r:9deg;--rs:-40deg}
.s-flut{left:51vw;top:33vh;width:clamp(96px,10vw,150px);aspect-ratio:1;background:var(--turq);font-size:clamp(.9rem,1.2vw,1.2rem);line-height:1.05;transform:rotate(calc(-10deg - var(--p) * 10deg))}

/* 3 Bikes */
.bikes{background:var(--cobalt);padding:clamp(70px,12vh,140px) var(--pad-x) clamp(60px,9vh,120px);z-index:4;color:var(--ink)}
.bikes::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--cobalt);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='40' viewBox='0 0 180 40'><path d='M0 40V24C25 -2 65 -2 90 24S155 46 180 20V40Z'/></svg>") repeat-x 0 0/180px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='40' viewBox='0 0 180 40'><path d='M0 40V24C25 -2 65 -2 90 24S155 46 180 20V40Z'/></svg>") repeat-x 0 0/180px 40px}
.bikes::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 24%,transparent 26%) 0 0/20px 20px;pointer-events:none}
.bikes-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:center}
.bikes .copy{transform:rotate(-1deg) translateX(calc((1 - var(--p)) * -3vw))}
.bikes .copy .pull{margin-top:.6em}
.vfold{--k:clamp(0,calc((var(--p) - .16) / .3),1);position:relative;height:min(62vh,560px);perspective:1100px;perspective-origin:50% 40%;transform-style:preserve-3d;transform:translateX(calc((1 - var(--k)) * -25%))}
.vfold .pl,.vfold .pr{position:absolute;top:2%;bottom:0;width:50.3%;box-shadow:0 20px 30px -10px rgba(15,27,61,.55)}
.vfold .pl{left:0;transform-origin:100% 50%;transform:translateZ(2px) rotateY(calc(180deg - var(--k) * 164deg));transform-style:preserve-3d}
.vfold .pr{right:0;transform-origin:0 50%;transform:rotateY(calc(var(--k) * -16deg))}
.vfold .pr,.vfold .in{background-color:var(--sand);background-image:radial-gradient(rgba(15,27,61,.1) 22%,transparent 24%);background-size:18px 18px}
.vfold .in{background-color:var(--sand2)}
.vfold .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vfold .in::before,.vfold .pr::before{content:"";position:absolute;left:0;right:0;top:calc(60% - 29px);height:30px;background:var(--turq);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'><path d='M0 30V16C15 -2 40 -2 60 16S105 34 120 14V30Z'/></svg>") repeat-x 0 0/120px 30px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'><path d='M0 30V16C15 -2 40 -2 60 16S105 34 120 14V30Z'/></svg>") repeat-x 0 0/120px 30px}
.vfold .in::after,.vfold .pr::after{content:"";position:absolute;left:0;right:0;top:60%;bottom:0;background:radial-gradient(rgba(255,255,255,.2) 24%,transparent 26%) 0 0/16px 16px,var(--turq)}
/* Titelseite der geschlossenen Karte */
.vfold .out{transform:rotateY(180deg);background:radial-gradient(rgba(255,255,255,.28) 24%,transparent 26%) 0 0/18px 18px,var(--coral);display:grid;place-items:center;color:var(--ink)}
.vfold .out svg{width:46%;height:auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}
.sea-strip{display:none}
/* Das Bike ist in der Mitte geteilt: jede Hälfte liegt in ihrer Kartenseite und klappt mit auf. */
.half{position:absolute;z-index:3;top:0;bottom:0;left:0;width:198.8%;pointer-events:none;clip-path:inset(-100% 49.8% -100% -100%);--b:clamp(0,calc((var(--k) - .12) / .88),1)}
.vfold .pr .half{left:-98.8%;clip-path:inset(-100% -100% -100% 50.2%)}
.half img{position:absolute;left:-6%;bottom:10%;width:112%;height:auto;max-width:none;transform:scale(var(--b));transform-origin:50% 100%}
.tiers{position:relative;z-index:1;margin-top:clamp(40px,7vh,90px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.tiers h3{grid-column:1/-1;color:var(--sand);margin:0}
.tier{border-radius:12px 12px 6px 6px;box-shadow:var(--paper-shadow);transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.tier summary{font-family:var(--display);font-size:clamp(1.05rem,1.45vw,1.4rem);list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tier summary::-webkit-details-marker{display:none}
.tier summary::after{content:"";flex:none;border-left:.42em solid transparent;border-right:.42em solid transparent;border-top:.62em solid currentColor;transition:transform .3s}
.tier[open] summary::after{transform:rotate(180deg)}
.tier p{margin:0;padding:0 20px 20px}
.tier:hover{transform:translateY(-4px) rotate(-.6deg)}
.t1{background:var(--sand);margin-top:0}.t2{background:var(--turq);margin-top:22px}.t3{background:var(--coral);margin-top:8px}.t4{background:var(--sand2);margin-top:30px}
.tiers-note{grid-column:1/-1;color:var(--sand);font-weight:700;margin:6px 0 0}

/* 4 Teile */
.parts{background:var(--sand);padding:clamp(80px,13vh,150px) var(--pad-x) clamp(60px,9vh,120px);z-index:5}
.parts::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--sand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 150 40'><path d='M0 40V22C18 -2 55 -2 75 22S130 46 150 18V40Z'/></svg>") repeat-x 0 0/150px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 150 40'><path d='M0 40V22C18 -2 55 -2 75 22S130 46 150 18V40Z'/></svg>") repeat-x 0 0/150px 40px}
.parts-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:start}
.parts .copy{background:#fff;transform:rotate(.8deg) translateY(calc((1 - var(--p)) * 5vh))}
.parts .copy .tabs{margin-top:1.2em}
.s-gefahr{position:relative;justify-self:center;margin-top:3vh;width:clamp(210px,21vw,300px);aspect-ratio:1;border-radius:14px;font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.3;padding:24px 24px 24px;transform:rotate(calc(5deg - var(--p) * 10deg));background:var(--coral);font-family:var(--text);font-weight:800;box-shadow:0 0 0 5px #fff,0 14px 18px -6px rgba(15,27,61,.5)}
.s-gefahr svg{display:block;width:clamp(44px,4.2vw,64px);height:auto;margin-bottom:.5em}
.boxes{margin-top:clamp(40px,8vh,100px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(24px,4vh,48px) clamp(16px,2.4vw,36px);align-items:end}
.box{--iw:clamp(150px,18vw,280px);--ar:1.5;--ih:calc(var(--iw) / var(--ar));position:relative;margin-top:calc(var(--ih) * .62);background:var(--kraft);border-radius:4px 4px 8px 8px;
  padding:calc(var(--ih) * .42 + 22px) 18px 18px;box-shadow:var(--paper-shadow);transition:transform .35s cubic-bezier(.2,.9,.2,1);
  background-image:linear-gradient(rgba(15,27,61,.14),rgba(15,27,61,.14)) 0 26px/100% 3px no-repeat}
.box img{position:absolute;left:50%;top:calc(var(--ih) * -.6);width:var(--iw);height:auto;max-width:92%;transform:translateX(-50%) rotate(var(--rot,-4deg)) translateY(calc((1 - var(--p)) * 30px));transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.box .front{position:relative;background:var(--sand);border:3px solid var(--ink);padding:12px 14px;transform:rotate(-1.2deg)}
.box h3{font-size:clamp(1.1rem,1.5vw,1.5rem);margin:0 0 .25em}
.box p{margin:0;font-size:.95rem;line-height:1.35;overflow-wrap:break-word;hyphens:auto}
.box:hover{transform:translateY(-8px) rotate(-.8deg)}
.box:hover img{transform:translateX(-50%) rotate(calc(var(--rot,-4deg) * -1)) translateY(-14px) scale(1.05)}
.b-z20{grid-column:1/4;--rot:-5deg;--iw:clamp(180px,22vw,330px);--ar:1}
.b-x35{grid-column:4/7;--rot:6deg;--iw:clamp(160px,18vw,280px);--ar:1.25}
.b-gates{grid-column:1/3;--rot:-7deg;--iw:clamp(150px,18vw,270px);--ar:1.5}
.b-shimano{grid-column:3/5;--rot:4deg;--iw:clamp(130px,14vw,210px);--ar:1.09}
.b-akku{grid-column:5/7;--rot:-3deg;--iw:clamp(160px,19vw,290px);--ar:1.5}

/* 5 Pinion */
.pinion,.close{--paper-shadow:0 16px 24px -6px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.4)}
.pinion{background:var(--ink);color:var(--sand);padding:clamp(90px,15vh,170px) var(--pad-x);z-index:6}
.gears{position:absolute;left:0;right:0;bottom:0;top:-39px;overflow:hidden;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='40' viewBox='0 0 170 40'><path d='M0 40V20C22 -2 62 -2 85 22S148 46 170 18V40Z'/></svg>") repeat-x 0 0/170px 40px,linear-gradient(#000,#000) 0 39px/100% calc(100% - 39px) no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='40' viewBox='0 0 170 40'><path d='M0 40V20C22 -2 62 -2 85 22S148 46 170 18V40Z'/></svg>") repeat-x 0 0/170px 40px,linear-gradient(#000,#000) 0 39px/100% calc(100% - 39px) no-repeat}
.pinion::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='40' viewBox='0 0 170 40'><path d='M0 40V20C22 -2 62 -2 85 22S148 46 170 18V40Z'/></svg>") repeat-x 0 0/170px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='40' viewBox='0 0 170 40'><path d='M0 40V20C22 -2 62 -2 85 22S148 46 170 18V40Z'/></svg>") repeat-x 0 0/170px 40px}
.gear{position:absolute;fill:var(--cobalt);filter:drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.g1{width:min(62vw,820px);right:-14vw;top:-10vh;transform:rotate(calc(var(--p) * 200deg));fill:var(--cobalt)}
.g2{width:min(34vw,460px);left:-8vw;bottom:-12vh;transform:rotate(calc(var(--p) * -330deg));fill:var(--turq)}
.pin-wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1280px;margin:0 auto}
.pin-img{width:100%;height:auto;transform:rotate(calc(-8deg + var(--p) * 10deg))}
.pinion .copy{background:var(--sand);color:var(--ink);transform:rotate(1deg)}
.pinion .copy .pull{margin-top:.5em}

/* 6 Brief */
.letter{background:var(--sand2);padding:clamp(90px,14vh,160px) var(--pad-x);z-index:7;
  background-image:radial-gradient(rgba(15,27,61,.08) 22%,transparent 24%);background-size:18px 18px}
.letter::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--sand2);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='40' viewBox='0 0 140 40'><path d='M0 40V22C18 -2 52 -2 70 22S122 46 140 20V40Z'/></svg>") repeat-x 0 0/140px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='40' viewBox='0 0 140 40'><path d='M0 40V22C18 -2 52 -2 70 22S122 46 140 20V40Z'/></svg>") repeat-x 0 0/140px 40px}
.sheet{max-width:860px;margin:0 auto;background:#fff;padding:clamp(28px,4vw,64px);transform:rotate(calc(2.4deg - var(--p) * 4deg)) translateY(calc((1 - var(--p)) * 6vh));
  background-image:linear-gradient(rgba(15,27,61,.1),rgba(15,27,61,.1)) 0 33%/100% 2px no-repeat,linear-gradient(rgba(15,27,61,.1),rgba(15,27,61,.1)) 0 66%/100% 2px no-repeat}
.sheet h2{font-size:clamp(2.1rem,4.4vw,4rem)}
.sheet p{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.5;font-weight:700;max-width:none}
.tape{position:absolute;width:120px;height:34px;background:rgba(255,90,54,.7);box-shadow:0 2px 4px rgba(15,27,61,.25);z-index:2}
.t-a{left:-30px;top:-10px;transform:rotate(-38deg)}.t-b{right:-30px;bottom:-8px;transform:rotate(-32deg)}

/* 7 Fragen */
.faq{background:var(--turq);padding:clamp(90px,14vh,160px) var(--pad-x);z-index:8;
  background-image:radial-gradient(rgba(255,255,255,.18) 24%,transparent 26%);background-size:20px 20px}
.faq::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--turq);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='40' viewBox='0 0 190 40'><path d='M0 40V24C28 -2 66 -2 95 24S160 46 190 20V40Z'/></svg>") repeat-x 0 0/190px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='40' viewBox='0 0 190 40'><path d='M0 40V24C28 -2 66 -2 95 24S160 46 190 20V40Z'/></svg>") repeat-x 0 0/190px 40px}
.faq h2{max-width:1080px;margin:0 auto .8em}
.flaps{max-width:1080px;margin:0 auto;display:grid;gap:14px}
.flap{background:var(--sand);border-radius:8px;box-shadow:var(--paper-shadow);transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.flap:nth-child(odd){transform:rotate(-.5deg)}.flap:nth-child(even){transform:rotate(.45deg);margin-left:clamp(0px,3vw,40px)}
.flap summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--display);font-size:clamp(1.05rem,1.55vw,1.5rem);display:flex;justify-content:space-between;gap:20px;align-items:center}
.flap summary::-webkit-details-marker{display:none}
.flap summary::after{content:"";flex:none;border-left:.45em solid transparent;border-right:.45em solid transparent;border-top:.65em solid var(--coral);transition:transform .35s}
.flap[open] summary::after{transform:rotate(180deg)}
.flap[open]{background:var(--sand2);transform:rotate(0)}
.ans{margin:0 clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px);padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,32px);background:radial-gradient(rgba(15,27,61,.07) 22%,transparent 24%) 0 0/16px 16px,#FBF6EA;color:var(--ink);border-radius:6px;box-shadow:0 10px 14px -8px rgba(15,27,61,.45),inset 0 2px 0 rgba(255,255,255,.9);transform-origin:top;transform:rotate(-.35deg)}
.flap[open] .ans{animation:flap .45s cubic-bezier(.2,.9,.2,1)}
@keyframes flap{from{transform:perspective(700px) rotateX(-70deg) rotate(-.35deg);opacity:0}to{transform:rotate(-.35deg);opacity:1}}
.ans p{margin:0;max-width:72ch;font-weight:600;font-size:clamp(1rem,1.2vw,1.15rem)}

/* 8 Formular */
.card-form{background:var(--sand);padding:clamp(90px,14vh,160px) var(--pad-x);z-index:9}
.card-form::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--sand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 150 40'><path d='M0 40V22C18 -2 55 -2 75 22S130 46 150 18V40Z'/></svg>") repeat-x 0 0/150px 40px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 150 40'><path d='M0 40V22C18 -2 55 -2 75 22S130 46 150 18V40Z'/></svg>") repeat-x 0 0/150px 40px}
.postcard{max-width:1120px;margin:0 auto;background:#fff;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);padding:clamp(24px,4vw,56px);border-radius:6px;
  transform:rotate(calc(-1.6deg + var(--p) * 2.4deg)) translateY(calc((1 - var(--p)) * 6vh))}
.postcard::after{content:"";position:absolute;left:calc(40% - 14px);top:5%;bottom:5%;width:0;border-left:3px dashed rgba(15,27,61,.25)}
.stamp{position:absolute;right:clamp(16px,3vw,40px);top:clamp(-70px,-5vw,-40px);width:clamp(84px,9vw,130px);aspect-ratio:1;background:var(--cobalt);color:var(--sand);display:grid;place-items:center;padding:14px;transform:rotate(6deg);z-index:2;
  box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(15,27,61,.2),0 12px 16px -6px rgba(15,27,61,.45);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H2.36 a3.2 3.2 0 0 0 6.4 0 H11.11 H13.47 a3.2 3.2 0 0 0 6.4 0 H22.22 H24.58 a3.2 3.2 0 0 0 6.4 0 H33.33 H35.69 a3.2 3.2 0 0 0 6.4 0 H44.44 H46.80 a3.2 3.2 0 0 0 6.4 0 H55.56 H57.91 a3.2 3.2 0 0 0 6.4 0 H66.67 H69.02 a3.2 3.2 0 0 0 6.4 0 H77.78 H80.13 a3.2 3.2 0 0 0 6.4 0 H88.89 H91.24 a3.2 3.2 0 0 0 6.4 0 H100.00 V2.36 a3.2 3.2 0 0 0 0 6.4 V11.11 V13.47 a3.2 3.2 0 0 0 0 6.4 V22.22 V24.58 a3.2 3.2 0 0 0 0 6.4 V33.33 V35.69 a3.2 3.2 0 0 0 0 6.4 V44.44 V46.80 a3.2 3.2 0 0 0 0 6.4 V55.56 V57.91 a3.2 3.2 0 0 0 0 6.4 V66.67 V69.02 a3.2 3.2 0 0 0 0 6.4 V77.78 V80.13 a3.2 3.2 0 0 0 0 6.4 V88.89 V91.24 a3.2 3.2 0 0 0 0 6.4 V100.00 H97.64 a3.2 3.2 0 0 0 -6.4 0 H88.89 H86.53 a3.2 3.2 0 0 0 -6.4 0 H77.78 H75.42 a3.2 3.2 0 0 0 -6.4 0 H66.67 H64.31 a3.2 3.2 0 0 0 -6.4 0 H55.56 H53.20 a3.2 3.2 0 0 0 -6.4 0 H44.44 H42.09 a3.2 3.2 0 0 0 -6.4 0 H33.33 H30.98 a3.2 3.2 0 0 0 -6.4 0 H22.22 H19.87 a3.2 3.2 0 0 0 -6.4 0 H11.11 H8.76 a3.2 3.2 0 0 0 -6.4 0 H0.00 V97.64 a3.2 3.2 0 0 0 0 -6.4 V88.89 V86.53 a3.2 3.2 0 0 0 0 -6.4 V77.78 V75.42 a3.2 3.2 0 0 0 0 -6.4 V66.67 V64.31 a3.2 3.2 0 0 0 0 -6.4 V55.56 V53.20 a3.2 3.2 0 0 0 0 -6.4 V44.44 V42.09 a3.2 3.2 0 0 0 0 -6.4 V33.33 V30.98 a3.2 3.2 0 0 0 0 -6.4 V22.22 V19.87 a3.2 3.2 0 0 0 0 -6.4 V11.11 V8.76 a3.2 3.2 0 0 0 0 -6.4 V0.00 Z'/></svg>") center/100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0 H2.36 a3.2 3.2 0 0 0 6.4 0 H11.11 H13.47 a3.2 3.2 0 0 0 6.4 0 H22.22 H24.58 a3.2 3.2 0 0 0 6.4 0 H33.33 H35.69 a3.2 3.2 0 0 0 6.4 0 H44.44 H46.80 a3.2 3.2 0 0 0 6.4 0 H55.56 H57.91 a3.2 3.2 0 0 0 6.4 0 H66.67 H69.02 a3.2 3.2 0 0 0 6.4 0 H77.78 H80.13 a3.2 3.2 0 0 0 6.4 0 H88.89 H91.24 a3.2 3.2 0 0 0 6.4 0 H100.00 V2.36 a3.2 3.2 0 0 0 0 6.4 V11.11 V13.47 a3.2 3.2 0 0 0 0 6.4 V22.22 V24.58 a3.2 3.2 0 0 0 0 6.4 V33.33 V35.69 a3.2 3.2 0 0 0 0 6.4 V44.44 V46.80 a3.2 3.2 0 0 0 0 6.4 V55.56 V57.91 a3.2 3.2 0 0 0 0 6.4 V66.67 V69.02 a3.2 3.2 0 0 0 0 6.4 V77.78 V80.13 a3.2 3.2 0 0 0 0 6.4 V88.89 V91.24 a3.2 3.2 0 0 0 0 6.4 V100.00 H97.64 a3.2 3.2 0 0 0 -6.4 0 H88.89 H86.53 a3.2 3.2 0 0 0 -6.4 0 H77.78 H75.42 a3.2 3.2 0 0 0 -6.4 0 H66.67 H64.31 a3.2 3.2 0 0 0 -6.4 0 H55.56 H53.20 a3.2 3.2 0 0 0 -6.4 0 H44.44 H42.09 a3.2 3.2 0 0 0 -6.4 0 H33.33 H30.98 a3.2 3.2 0 0 0 -6.4 0 H22.22 H19.87 a3.2 3.2 0 0 0 -6.4 0 H11.11 H8.76 a3.2 3.2 0 0 0 -6.4 0 H0.00 V97.64 a3.2 3.2 0 0 0 0 -6.4 V88.89 V86.53 a3.2 3.2 0 0 0 0 -6.4 V77.78 V75.42 a3.2 3.2 0 0 0 0 -6.4 V66.67 V64.31 a3.2 3.2 0 0 0 0 -6.4 V55.56 V53.20 a3.2 3.2 0 0 0 0 -6.4 V44.44 V42.09 a3.2 3.2 0 0 0 0 -6.4 V33.33 V30.98 a3.2 3.2 0 0 0 0 -6.4 V22.22 V19.87 a3.2 3.2 0 0 0 0 -6.4 V11.11 V8.76 a3.2 3.2 0 0 0 0 -6.4 V0.00 Z'/></svg>") center/100% 100% no-repeat}
.pc-left{position:relative;min-height:260px}
.pc-left .pm{position:absolute;left:0;bottom:0;width:min(100%,380px);height:auto;transform:rotate(-5deg)}
.pc-right{display:grid;gap:14px;position:relative;z-index:1}
.pc-right label{display:grid;gap:6px;font-weight:800;font-size:.98rem}
.pc-right input,.pc-right select,.pc-right textarea{font:400 1rem var(--text);color:var(--ink);background:var(--sand);border:0;border-bottom:3px solid var(--ink);border-radius:0;padding:12px 12px;width:100%}
.pc-right input:focus,.pc-right select:focus,.pc-right textarea:focus{outline:none;border-bottom-color:var(--coral);background:#fff;box-shadow:0 6px 0 -3px var(--coral)}
.pc-right .err{color:#B3270A;font-weight:700;min-height:0}
.pc-right [aria-invalid="true"]{border-bottom-color:#B3270A}
.hint{font-size:.9rem;margin:0}
.hint a{text-underline-offset:3px}
.pc-right button{justify-self:start}
.ok{background:var(--turq);padding:14px 18px;border-radius:8px;font-weight:800;margin:0}

/* 9 Abschluss */
.close{background:var(--ink);z-index:10}
.close .stage{background:radial-gradient(rgba(244,235,216,.1) 22%,transparent 24%) 0 0/22px 22px,var(--ink);display:grid;place-items:center}
.cover-l,.cover-r{position:absolute;top:0;bottom:0;width:52%;background:radial-gradient(rgba(255,255,255,.16) 24%,transparent 26%) 0 0/20px 20px,var(--cobalt);box-shadow:0 0 40px rgba(0,0,0,.55);z-index:1}
.cover-l{left:0;transform:translateX(calc(-100% + var(--p) * 100%))}.cover-r{right:0;transform:translateX(calc(100% - var(--p) * 100%))}
.spine{position:relative;z-index:2;width:min(88vw,760px);padding:clamp(26px,4vw,56px);text-align:center;border-radius:6px;transform:rotate(-1.2deg) scale(calc(.9 + var(--p) * .1))}
.spine h2{font-size:clamp(2rem,4.4vw,4rem)}.spine p{margin:0 auto 1.4em;font-weight:700}
.close-logo{position:absolute;left:50%;top:9vh;width:clamp(90px,10vw,150px);aspect-ratio:1;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;padding:18px;z-index:3;transform:translateX(-50%) rotate(calc(-14deg + var(--p) * 28deg));box-shadow:0 0 0 6px #fff,0 16px 20px -6px rgba(0,0,0,.5)}
.foot{background:var(--ink);color:var(--sand);padding:clamp(28px,5vw,60px) var(--pad-x);position:relative;z-index:11}
.foot-in{display:grid;gap:14px;max-width:1280px;margin:0 auto}
.fl{font-family:var(--display);font-size:1.6rem;margin:0}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}.foot a{text-underline-offset:4px;font-weight:700}
.mark{font-size:.88rem;opacity:.85;max-width:70ch;margin:0}

/* Menü nur auf dem Handy */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-family:var(--display);padding:8px 14px;background:var(--cobalt);color:#fff;border-radius:12px 12px 12px 3px;box-shadow:0 8px 12px -6px rgba(15,27,61,.5)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:46px;display:grid;background:var(--sand);padding:8px;border-radius:8px;box-shadow:var(--paper-shadow);min-width:160px}
.menu nav a{padding:12px 14px;font-weight:800;text-decoration:none}
.soon{display:inline-block;margin-left:10px;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--sand);font:800 .8rem var(--text);vertical-align:middle}
.todo{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--coral);color:var(--ink);font:800 .75rem var(--text)}
.testnote{font-size:.85rem;opacity:.85;max-width:70ch;margin:0}

/* Möwen: oberste Ebene, kurze Durchflüge (höchstens 5 Sekunden, nie mehr als eine zugleich). */
.gulls{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.gull{position:absolute;left:0;top:0;width:clamp(96px,10vw,160px);opacity:0}
.gull.go{will-change:transform,opacity;filter:drop-shadow(0 12px 8px rgba(15,27,61,.4));animation:fly-ltr var(--dur,5s) linear forwards}
.gull.rtl.go{animation-name:fly-rtl}
.gull img{display:block;width:100%;height:auto;transform-origin:50% 60%}
.gull.go img{animation:wing 1.1s ease-in-out infinite alternate}
.gx2,.gx4{width:clamp(120px,12vw,190px)}
.gx1{--y:9vh}.gx2{--y:9vh}.gx3{--y:9vh}.gx4{--y:9vh}.gx5{--y:9vh}
@keyframes fly-ltr{0%{opacity:0;transform:translate3d(-12vw,var(--y),0) rotate(-6deg)}8%{opacity:1}30%{transform:translate3d(22vw,calc(var(--y) - 1.5vh),0) rotate(-3deg)}60%{transform:translate3d(55vw,calc(var(--y) + 1.5vh),0) rotate(3deg)}90%{opacity:1}100%{opacity:0;transform:translate3d(112vw,var(--y),0) rotate(-5deg)}}
@keyframes fly-rtl{0%{opacity:0;transform:translate3d(112vw,var(--y),0) rotate(6deg) scaleX(-1)}8%{opacity:1}30%{transform:translate3d(88vw,calc(var(--y) - 1.5vh),0) rotate(3deg) scaleX(-1)}60%{transform:translate3d(52vw,calc(var(--y) + 1.5vh),0) rotate(-3deg) scaleX(-1)}90%{opacity:1}100%{opacity:0;transform:translate3d(-12vw,var(--y),0) rotate(5deg) scaleX(-1)}}
@keyframes wing{from{transform:scaleY(1) rotate(0deg)}to{transform:scaleY(.86) rotate(-3deg)}}

/* Handy */
@media (max-width:900px){
  :root{--hero-banner-w:calc(100vw - 2 * var(--pad-x));--hero-banner-top:8vh;--hero-title:clamp(1.9rem,8.2vw,3rem)}
  .top nav{display:none}
  .menu{display:block}
  .gx2,.gx4{display:none}.gull{width:84px}.gx1{--y:66vh}
  .scene[data-scene="sticky"]{height:160vh}
  .banner{padding:18px}
  .banner p{max-width:none;font-size:.95rem;line-height:1.4;margin-bottom:.8em}
  .banner .tabs{gap:10px}.banner .pull{padding:.65em 1.1em;font-size:1rem}
  .bike{width:100vw;right:0;bottom:19vh;transform:translate3d(0,calc(3vh - var(--p) * 8vh),0) rotate(calc(-4deg + var(--p) * 4deg))}
  .w1{height:30vh}.w2{height:24vh}.w3{height:12vh}.foam{bottom:calc(24vh - 14px)}
  .banner{transform:rotate(-1.2deg) translateY(calc(var(--p) * -3vh))}
  .s-weg{right:3vw;bottom:3vh;width:100px}
  .note{width:calc(100vw - 2 * var(--pad-x));top:12vh}
  .note{top:9vh}
  .i-akku{width:50vw;left:2vw;top:auto;bottom:calc(16px + 29vw + 14px)}.i-display{width:30vw;right:4vw;top:auto;bottom:calc(16px + 29vw + 22px)}
  .i-motor{width:28vw;left:3vw;top:auto;bottom:16px}.i-riemen{width:37vw;left:33vw;top:auto;bottom:22px}.i-bremse{width:25vw;right:3vw;top:auto;bottom:14px}.i-lader{display:none}
  .s-flut{left:6vw;top:48vh;width:92px}
  .bikes-grid,.parts-head,.pin-wrap,.postcard{grid-template-columns:1fr}
  .vfold{height:46vh}.tiers{grid-template-columns:1fr}
  .tier{margin-top:0 !important}
  .boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-z20,.b-x35,.b-gates,.b-shimano,.b-akku{grid-column:auto;margin-bottom:0;--iw:clamp(120px,36vw,190px)}.b-z20{grid-column:1/-1;--iw:clamp(180px,52vw,260px)}
  .s-gefahr{width:100%;aspect-ratio:auto;border-radius:14px}
  .postcard::after{display:none}
  .pc-left{min-height:0}.pc-left .pm{position:static;width:62%;margin-top:14px}
  .stamp{top:-22px}
  .t-a{left:-14px;top:-16px;width:84px;height:26px}.t-b{right:-14px;bottom:-14px;width:84px;height:26px}
  .box p{font-size:.85rem;hyphens:none;overflow-wrap:normal}
  .soon{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene[data-scene="sticky"]{height:auto}.stage{position:relative}
  .layer{position:relative;top:auto;transform:none;filter:none}.dim{display:none}
  .tick-in{animation:none}
  .gulls{display:none}
  .gull img{animation:none}
  .flap[open] .ans{animation:none}
  *{transition:none !important}
}