/* Vape24 "Warum vape24?" v3 (30.10.2026): Plakat über die volle Breite. Rosa Fläche mit riesigem Logo, davor die Produkte vieler Marken,
   darunter schwarze Redaktionsfläche und weißes Marken-Laufband. Alles auf .wv begrenzt. */
.wv{
  --pink:#ff3d71; --pink-deep:#c71f55; --pink-hi:#ff8fab; --ink:#14161d; --paper:#fff; --fg-2:#c9cfdd;
  --ease:cubic-bezier(.2,.8,.2,1); --gate:0;
  margin-block:clamp(64px,7vw,100px) 0;scroll-margin-top:32px;overflow-x:clip;
  font-family:var(--font-sans,'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif);color:var(--paper);
}
.wv,.wv *{box-sizing:border-box}
:where(.wv) :where(a){color:inherit;text-decoration:none}
:where(.wv) :where(h2,h3,p,ul,ol){margin:0;padding:0}
:where(.wv) :where(ul,ol){list-style:none}
:where(.wv) :where(img){display:block;max-width:100%}
:where(.wv) :where(svg){flex:none}
.wv :focus-visible{outline:3px solid var(--paper);outline-offset:3px}

/* ============ Plakat ============ */
.wv-poster{position:relative;z-index:2;background:var(--pink);color:var(--ink);padding-top:clamp(22px,2.4vw,36px);padding-bottom:clamp(150px,19vw,290px)}
.wv .is-entering,.wv-logo.is-entering{--gate:1}
.wv-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wv-bub{position:absolute;bottom:-12%;left:var(--x);width:var(--s);aspect-ratio:1;border:2px solid #ffffff73;border-radius:50%;animation:wv-rise var(--d) linear var(--dl) infinite}
.wv-bub::after{content:"";position:absolute;left:18%;top:16%;width:22%;height:12%;border-radius:50%;background:#ffffff80;transform:rotate(-30deg)}
@keyframes wv-rise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}50%{transform:translate3d(18px,-300px,0)}100%{transform:translate3d(-10px,-640px,0);opacity:0}}
.wv-top{position:relative;z-index:4}
.wv-h2{display:inline-block;color:var(--ink);font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(20px,1.1rem + .9vw,30px);font-weight:800;letter-spacing:-.025em;line-height:1.1;transition:opacity .7s ease,transform .8s var(--ease);transition-delay:calc(var(--gate) * .1s)}
.wv-h2 b{color:var(--paper);font-weight:800}
.wv-h2::after{content:"";display:block;width:100%;height:3px;margin-top:8px;background:var(--ink);transform-origin:0 50%;transition:transform .9s var(--ease);transition-delay:calc(var(--gate) * .35s)}

/* Logo */
.wv-logo{position:relative;z-index:1;display:flex;justify-content:center;margin-top:clamp(10px,1.8vw,26px);font-size:min(25.4vw,348px);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.wv-mark{position:relative;display:inline-flex;align-items:baseline;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-weight:800;line-height:1;letter-spacing:-.04em;filter:drop-shadow(.022em .028em 0 var(--pink-deep))}
.wv-mask{display:inline-flex;overflow:hidden;padding:.06em .05em .24em;margin:-.06em -.05em -.24em}
.wv-word{display:inline-flex;color:var(--ink)}
.wv-word span{display:inline-block;transition:transform 1s var(--ease);transition-delay:calc((var(--i) * 70ms + 80ms) * var(--gate))}
.wv-num{display:inline-flex;margin-left:.015em;color:var(--paper)}
.wv-digit{display:block;width:.6em;height:1em;overflow:hidden}
.wv-strip{display:block;transform:translateY(calc(var(--end) * -1em));transition:transform var(--t,1.4s) cubic-bezier(.16,.84,.24,1) calc(.5s * var(--gate))}
.wv-strip i{display:block;height:1em;font-style:normal;line-height:1;text-align:center}
.is-pre .wv-word span{transform:translateY(118%);transition:none}
.is-pre .wv-strip{transform:translateY(0);transition:none}

/* Aufkleber */
.wv-sticker{position:absolute;z-index:5;right:clamp(14px,4vw,64px);top:clamp(50px,6vw,92px);width:clamp(84px,10.5vw,158px);aspect-ratio:1;rotate:12deg;transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--gate) * .9s),opacity .4s ease calc(var(--gate) * .9s)}
.wv-sticker svg{width:100%;height:100%;overflow:visible}
.wv-spinner{transform-box:view-box;transform-origin:50% 50%;animation:wv-spin 22s linear infinite}
.wv-sticker text{font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:19px;font-weight:800;letter-spacing:.14em;fill:#fff}
@keyframes wv-spin{to{transform:rotate(360deg)}}
.is-pre .wv-sticker{transform:scale(.85) rotate(-30deg);opacity:0;transition:none}

/* Produkte vor dem Logo */
.wv-cloud{position:absolute;z-index:3;left:50%;bottom:0;width:100%;max-width:1480px;height:0;translate:-50% 0;pointer-events:none}
.wv-p{--wpx:calc(var(--w) * min(1vw,14.8px));position:absolute;left:var(--x);bottom:var(--b);width:var(--wpx);aspect-ratio:1;margin-left:calc(var(--wpx) / -2);z-index:var(--z,3);
  transform:rotate(var(--r,0deg));translate:calc(var(--mx,0) * var(--par,1) * 18px) calc(var(--my,0) * var(--par,1) * 10px);
  transition:opacity .5s ease,transform .9s cubic-bezier(.16,1,.3,1),translate .5s var(--ease);
  transition-delay:calc((var(--i) * 70ms + 450ms) * var(--gate)),calc((var(--i) * 70ms + 450ms) * var(--gate)),0s}
.wv-p{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wv-pi{display:block;width:100%;height:100%;transition:transform .35s var(--ease)}
.wv-p:hover,.wv-p:focus-visible{z-index:6}
.wv-p:focus-visible{outline:none}
.wv-p:focus-visible .wv-pi{transform:translateY(-12px) scale(1.05)}
.wv-p:focus-visible .wv-pl{outline:3px solid var(--ink);outline-offset:3px}
.wv-p:active .wv-pi{transform:translateY(-4px) scale(.98)}
@media (hover:hover) and (pointer:fine){.wv-p:hover .wv-pi{transform:translateY(-12px) scale(1.05)}.wv-p:hover .wv-pl{background:var(--ink);color:var(--paper)}}
.wv-p img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px #7a0f3a66);animation:wv-bob var(--dur,6s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes wv-bob{from{transform:translateY(-5px) rotate(-1deg)}to{transform:translateY(6px) rotate(1deg)}}
.wv-pl{position:absolute;left:50%;top:100%;margin-top:-6%;translate:-50% 0;rotate:-3deg;padding:5px 9px 4px;background:var(--paper);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:2px 2px 0 var(--ink);transition:background-color .2s ease,color .2s ease}
.wv-p:nth-child(even) .wv-pl{rotate:2.5deg}
.wv .is-pre .wv-p{opacity:0;transform:translateY(80px) rotate(calc(var(--r,0deg) - 10deg)) scale(.9);transition:none}

.wv-wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(34px,4.6vw,70px);display:block;z-index:2}

/* ============ Schwarze Fläche ============ */
.wv-body{position:relative;z-index:1;background:var(--ink);padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(44px,5vw,76px)}
.wv-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5.4vw,96px);align-items:start}
.wv-statement{color:var(--paper);font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(2.5rem,1rem + 4.1vw,4.9rem);font-weight:800;line-height:.98;letter-spacing:-.04em}
.wv-ln{display:block;overflow:hidden;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.wv-ln span{display:inline-block;transition:transform 1s var(--ease);transition-delay:calc((var(--i) * 110ms + 100ms) * var(--gate))}
.wv-ln.pink{color:var(--pink)}
.is-pre .wv-ln span{transform:translateY(112%);transition:none}
.wv-intro{max-width:46ch;margin-top:clamp(20px,2.2vw,30px);color:var(--fg-2);font-size:clamp(16px,.9rem + .35vw,19px);line-height:1.65}
.wv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(24px,2.6vw,36px)}
.wv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;font-size:15px;font-weight:800;white-space:nowrap;border-radius:4px;transition:transform .16s var(--ease),background-color .2s ease,color .2s ease,box-shadow .2s ease}
.wv-btn svg{width:18px;height:18px}
.wv-btn:active{transform:translate(2px,2px)}
.wv-btn.main{background:var(--pink);color:var(--ink);box-shadow:4px 4px 0 var(--paper)}
.wv-btn.ghost{border:2px solid var(--paper);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.wv-btn.main:hover{box-shadow:6px 6px 0 var(--paper);transform:translate(-2px,-2px)}.wv-btn.ghost:hover{background:var(--paper);color:var(--ink)}}
.wv-finder{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;color:var(--pink-hi);font-size:15px;font-weight:800}
.wv-finder svg{width:18px;height:18px;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.wv-finder:hover svg{transform:translateX(6px)}.wv-finder:hover{text-decoration:underline;text-underline-offset:5px}}

.wv-reasons{counter-reset:r;border-top:2px solid var(--paper)}
.wv-reason{display:grid;grid-template-columns:clamp(52px,5vw,76px) minmax(0,1fr);gap:0 clamp(8px,1.4vw,20px);padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid #ffffff3d;transition:opacity .8s ease,transform .9s var(--ease),translate .35s var(--ease);transition-delay:calc((var(--i) * 110ms + 250ms) * var(--gate)),calc((var(--i) * 110ms + 250ms) * var(--gate)),0s}
.wv-reason::before{counter-increment:r;content:"0" counter(r);font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(1.7rem,1.2rem + 1.2vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--pink)}
.wv-reason h3{color:var(--paper);font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(1.15rem,1rem + .5vw,1.5rem);font-weight:800;line-height:1.2;letter-spacing:-.025em}
.wv-reason p{margin-top:8px;max-width:52ch;color:var(--fg-2);font-size:15px;line-height:1.65}
@media (hover:hover) and (pointer:fine){.wv-reason:hover{translate:10px 0}}
.is-pre .wv-reason{opacity:0;transform:translateY(30px);transition:none}

.wv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(44px,5vw,76px);border-top:2px solid var(--paper)}
.wv-stats li{padding:clamp(18px,2vw,28px) clamp(12px,2vw,28px) 0 0;transition:opacity .8s ease,transform .9s var(--ease);transition-delay:calc((var(--i) * 110ms + 200ms) * var(--gate))}
.wv-stats li + li{padding-left:clamp(12px,2vw,28px);border-left:1px solid #ffffff3d}
.wv-stats b{display:block;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(2.6rem,1.4rem + 4.2vw,6rem);font-weight:800;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--paper)}
.wv-stats li:nth-child(2) b{color:var(--pink)}
.wv-stats span{display:block;margin-top:10px;font-size:clamp(13px,.8rem + .2vw,16px);font-weight:700;color:var(--fg-2)}
.is-pre .wv-stats li{opacity:0;transform:translateY(24px);transition:none}
.wv-intro,.wv-actions,.wv-finder{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:calc(.45s * var(--gate))}
.is-pre :is(.wv-intro,.wv-actions,.wv-finder){opacity:0;transform:translateY(20px);transition:none}
.is-pre .wv-h2{opacity:0;transform:translateY(14px);transition:none}
.is-pre .wv-h2::after{transform:scaleX(0);transition:none}

/* ============ Marken-Laufband (weiß) ============ */
.wv-brands{position:relative;z-index:1;background:var(--paper);color:var(--ink);padding:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px);transition:opacity .8s ease;transition-delay:calc(var(--gate) * .2s)}
.wv-bt{display:block;margin-bottom:clamp(14px,1.8vw,24px);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#5f6677}
.wv-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wv-track{display:flex;width:max-content;animation:wv-marquee 60s linear infinite}
.wv-set{display:flex;align-items:center}
.wv-set li{display:flex;align-items:center}
.wv-set li::after{content:"";width:9px;height:9px;margin-inline:clamp(26px,3.2vw,50px);background:var(--pink);rotate:45deg;flex:none}
.wv-brands:hover .wv-track,.wv-brands:focus-within .wv-track{animation-play-state:paused}
@keyframes wv-marquee{to{transform:translateX(-50%)}}
.wv-b{display:grid;place-items:center;height:64px;transition:transform .25s var(--ease)}
.wv-b img{max-width:170px;max-height:42px;width:auto;height:auto;object-fit:contain}
.wv-b.inv img{filter:invert(1)}
@media (hover:hover) and (pointer:fine){.wv-b:hover{transform:translateY(-4px) scale(1.06)}}
.wv-brands.is-pre{opacity:0;transition:none}

/* ============ Tablet / Mobil ============ */
@media (max-width:900px){
  .wv-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .wv-poster{padding-bottom:clamp(150px,46vw,260px)}
}
@media (max-width:700px){
  .wv-p{--wpx:calc(var(--w) * var(--k,1.5) * 1vw);left:var(--xm,var(--x))}
  .wv-p.hide-s{display:none}
  .wv-sticker{right:12px;top:14px;width:76px}
  .wv-stats b{font-size:clamp(1.8rem,8.2vw,3rem);white-space:nowrap}
  .wv-stats li{padding-inline:0 8px}
  .wv-stats li + li{padding-left:10px}
  .wv-stats span{font-size:12px;line-height:1.3}
  .wv-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .wv-btn{width:100%}
  .wv-pl{font-size:9px;padding:4px 6px 3px}
  .wv-b img{max-width:130px;max-height:34px}
  .wv-b{height:54px}
}
@media (max-width:359.98px){
  .wv-stats span{font-size:11px}
  .wv-btn{padding-inline:14px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .wv *,.wv *::before,.wv *::after{animation:none!important;transition:none!important}
  .wv-track{width:auto;flex-wrap:wrap}
  .wv-set{flex-wrap:wrap;row-gap:10px}
  .wv-set[aria-hidden="true"]{display:none}
  .wv-marquee{-webkit-mask-image:none;mask-image:none}
  .wv-bub{display:none}
}