/* Vape24 Hero v2 (30.10.2026): vollbreiter 3D-Produktslider. Alle Regeln auf .hx begrenzt. */
.hx{
  --brand:#ff3d71; --brand-strong:#e62a5c; --ink:#14161d;
  --maxw:1280px; --gutter:32px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --fg:#fff; --fg-2:#d7e3f4; --track:#ffffff4d; --outline:#ffffff8c; --btn:#ffffff24; --btn-on:#ffffff3d;
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  height:clamp(560px,calc(100svh - var(--hx-head-h,196px)),800px);
  background:#07122a;color:var(--fg);touch-action:pan-y;line-height:1.5;
  transition:background-color .8s ease;
}
.hx,.hx *{box-sizing:border-box}
.hx a{color:inherit;text-decoration:none}
.hx button{font:inherit;color:inherit}
.hx img{display:block;max-width:100%}
.hx svg{width:18px;height:18px;flex:none}
.hx :focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.hx[data-theme="light"]{--fg:var(--ink);--fg-2:#4a3f3a;--track:#14161d26;--outline:#14161d59;--btn:#ffffffa6;--btn-on:#ffffffe6;background:#fbe3d3}
.hx-plates,.hx-scrim,.hx-word,.hx-layer,.hx-canvas,.hx-fb{position:absolute;inset:0;pointer-events:none}
.hx-plates{z-index:0;transform:scale(1.04);will-change:transform}
.hx-plate{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hx-plate.is-active{opacity:1}
.hx-plate img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 78%;transform:scale(1.07);transition:transform 2.4s var(--ease-out)}
.hx-plate.is-active img{transform:scale(1)}

/* Verlauf an der Textspalte ausgerichtet (Containerkante --cl) */
.hx-scrim{z-index:1;opacity:0;transition:opacity .8s ease;--cl:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
.hx-scrim.dark{background:linear-gradient(90deg,#030a1cd6 0,#030a1cb8 calc(var(--cl) + 300px),#030a1c66 calc(var(--cl) + 560px),transparent calc(var(--cl) + 780px)),linear-gradient(0deg,#030a1c99 0%,transparent 28%)}
.hx-scrim.light{background:linear-gradient(90deg,#fff3eae6 0,#fff3eac4 calc(var(--cl) + 300px),#fff3ea59 calc(var(--cl) + 560px),transparent calc(var(--cl) + 780px))}
.hx[data-theme="dark"] .hx-scrim.dark,.hx[data-theme="light"] .hx-scrim.light{opacity:1}

.hx-word{z-index:2;display:grid;place-items:center;will-change:transform}
.hx-word span{
  grid-area:1/1;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-weight:800;letter-spacing:-.06em;line-height:.78;
  font-size:var(--wfs,26vw);color:var(--wc);white-space:nowrap;mix-blend-mode:var(--wb,normal);
  transform:translate(var(--wx,7%),calc(var(--wy,-4%) + 6%));opacity:0;clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease-out),transform 1s var(--ease-out),opacity .4s ease;
}
.hx-word span.is-active{clip-path:inset(-12% -4% -12% -4%);transform:translate(var(--wx,7%),var(--wy,-4%));opacity:1;transition-delay:.18s,.18s,.18s}

.hx-layer{z-index:3;will-change:transform}
.hx-layer.front{z-index:5}
.hx-sprite{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:var(--ar,1);
  transform:translate(-50%,-50%) translate3d(var(--ex,0px),var(--ey,0px),0) scale(.86);opacity:0;
  transition:opacity .45s ease,transform 1s var(--ease-out);
}
.hx-sprite.is-active{transform:translate(-50%,-50%) scale(1);opacity:var(--o,1);transition-delay:calc(.22s + var(--i,0) * 70ms)}
.hx-sprite img{width:100%;height:100%;object-fit:contain;filter:blur(var(--b,0px));animation:hx-float var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate;will-change:transform}
@keyframes hx-float{from{transform:translateY(calc(var(--fa,10px) * -1)) rotate(calc(var(--r,0deg) - var(--fr,4deg)))}to{transform:translateY(var(--fa,10px)) rotate(calc(var(--r,0deg) + var(--fr,4deg)))}}

.hx-canvas{z-index:4;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.hx[data-gl="on"] .hx-canvas{opacity:1}
.hx-fb{z-index:4}
.hx-fb img{position:absolute;left:var(--px,62%);top:var(--py,90%);height:var(--ph,70%);width:auto;max-width:none;transform:translate(-50%,-100%);opacity:0;filter:drop-shadow(0 22px 28px #0006);transition:opacity .5s ease}
.hx-fb img.is-active{opacity:1}
.hx[data-gl="on"] .hx-fb{opacity:0;transition:opacity .4s ease}

.hx-ui{
  position:relative;z-index:6;height:100%;max-width:var(--maxw);margin:0 auto;padding:30px var(--gutter) 26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"h1 ." ". ." "panel nav" "legal nav";column-gap:32px;pointer-events:none;
}
.hx-ui > *{pointer-events:auto}
.hx-h1{grid-area:h1;margin:0;max-width:26ch;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-weight:700;font-size:clamp(1.25rem,.9rem + .9vw,1.75rem);line-height:1.18;letter-spacing:-.02em;color:var(--fg);text-wrap:balance;transition:color .6s ease}
.hx-h1 em{font-style:normal;color:var(--brand)}
.hx-panels{grid-area:panel;display:grid;align-self:end}
.hx-panel{grid-area:1/1;max-width:600px}
.hx-panel > *{transition:opacity .32s var(--ease-out),transform .5s var(--ease-out),filter .32s ease}
.hx-panel[aria-hidden="true"]{visibility:hidden;pointer-events:none;transition:visibility 0s linear .3s}
.hx-panel[aria-hidden="true"] > *{opacity:0;transform:translateY(-6px);filter:blur(3px);transition-duration:.2s;transition-delay:0s}
.hx-panel[aria-hidden="false"] > *{transition-delay:calc(.3s + var(--d,0) * 45ms)}
.hx-panel.enter > *{opacity:0;transform:translateY(14px);filter:blur(4px)}
.hx-chip{display:inline-flex;align-items:center;height:28px;margin:0 0 14px;padding:0 13px;border-radius:999px;background:var(--brand);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;--d:0}
.hx-name{margin:0;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-weight:800;font-size:clamp(2.1rem,1rem + 2.7vw,3.5rem);line-height:1.02;letter-spacing:-.035em;color:var(--fg);--d:1}
.hx-facts{margin:12px 0 0;max-width:46ch;font-size:17px;line-height:1.5;color:var(--fg-2);--d:2}
.hx-price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:12px;row-gap:2px;margin:16px 0 0;--d:3}
.hx-price b{font-size:clamp(1.75rem,1.2rem + 1vw,2.25rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--fg)}
.hx-price b small{font-size:.55em;font-weight:700;margin-right:5px;letter-spacing:0}
.hx-price span{font-size:13px;color:var(--fg-2)}
.hx-cta{display:inline-flex;align-items:center;gap:10px;height:54px;margin-top:22px;padding:0 26px;border-radius:999px;background:var(--brand);color:var(--ink);font-size:16px;font-weight:800;white-space:nowrap;box-shadow:0 12px 30px #ff3d7147;transition:transform .16s var(--ease-out),background-color .2s ease,opacity .32s var(--ease-out),filter .32s ease;--d:4}
.hx a.hx-cta{color:var(--ink)}
.hx-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hx-cta:hover{background:var(--brand-strong)}}
.hx-legal{grid-area:legal;margin:18px 0 0;font-size:12px;font-weight:600;color:var(--fg-2);transition:color .6s ease}

.hx-nav{grid-area:nav;align-self:end;display:flex;align-items:center;gap:18px;padding-bottom:4px}
.hx-tabs{display:flex;gap:22px}
.hx-tab{display:grid;gap:8px;min-width:108px;padding:11px 16px 12px;border:1.5px solid var(--outline);border-radius:16px;background:var(--btn);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;text-align:center;color:var(--fg-2);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:color .3s ease,background-color .3s ease,border-color .3s ease,transform .16s var(--ease-out)}
.hx-tab:active{transform:scale(.97)}
.hx .hx-tab{color:var(--fg-2)}
.hx .hx-tab[aria-selected="true"]{color:var(--fg);background:var(--btn-on);border-color:var(--fg)}
.hx-tab i{position:relative;display:block;height:3px;border-radius:3px;background:var(--track);overflow:hidden;transition:background-color .6s ease}
.hx-tab b{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.hx-tab[aria-selected="true"] b{transform:scaleX(var(--p,1))}
@media (hover:hover) and (pointer:fine){.hx .hx-tab:hover{color:var(--fg);background:var(--btn-on)}}
.hx-arrows{display:flex;gap:10px}
.hx-round{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--outline);background:var(--btn);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:transform .16s var(--ease-out),border-color .3s ease,background-color .3s ease,color .3s ease}
.hx-round svg{width:22px;height:22px;stroke-width:2.2}
.hx .hx-round{color:var(--fg)}
.hx-round:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hx-round:hover{border-color:var(--fg);background:var(--btn-on)}}
/* Ziehen ist möglich: Greifer-Cursor auf Mausgeräten */
@media (hover:hover) and (pointer:fine){.hx{cursor:grab}.hx:active{cursor:grabbing}.hx a,.hx button{cursor:pointer}}

@media (max-width:1023.98px){ .hx{--gutter:20px} }
@media (max-width:900px){
  .hx{height:clamp(620px,calc(100svh - var(--hx-head-h,104px)),860px)}
  .hx-plate img{object-position:50% 60%}
  .hx-sprite{left:var(--mx,var(--x));top:var(--my,var(--y));width:var(--ms,var(--s))}
  .hx-sprite img{filter:blur(var(--mb,var(--b,0px)))}
  .hx-sprite[data-mob="off"]{display:none}
  .hx-scrim.dark{background:linear-gradient(180deg,#030a1c8c 0%,transparent 22%,transparent 44%,#030a1cb3 64%,#030a1cf2 100%)}
  .hx-scrim.light{background:linear-gradient(180deg,#fff3eab3 0%,transparent 20%,transparent 46%,#fff3eacc 66%,#fff3eaf7 100%)}
  .hx-ui{padding:20px 20px 14px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"h1" "." "panel" "nav" "legal";column-gap:0}
  .hx-h1{font-size:clamp(1.3rem,1rem + 1.6vw,1.6rem);max-width:22ch}
  .hx-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:end;max-width:none}
  .hx-chip,.hx-name,.hx-facts{grid-column:1/-1}
  .hx-chip{justify-self:start;height:26px;margin-bottom:8px;font-size:11px}
  .hx-name{font-size:clamp(1.7rem,1.15rem + 2.8vw,2.4rem)}
  .hx-facts{margin-top:6px;font-size:15px;line-height:1.45}
  .hx-price{grid-column:1;flex-direction:column;align-items:flex-start;margin-top:12px}
  .hx-price b{font-size:1.65rem}
  .hx-price span{font-size:11.5px;line-height:1.35}
  .hx-cta{grid-column:2;justify-self:end;height:50px;margin-top:12px;padding:0 20px;font-size:15px}
  .hx-nav{margin-top:14px;gap:6px;padding-bottom:0}
  .hx-tabs{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hx-tab{min-width:0;justify-items:stretch;padding:10px 10px 11px;border-radius:14px;font-size:12px}
  .hx-tab i{justify-self:stretch}
  .hx-arrows{display:contents}
  .hx-round{position:absolute;top:var(--hx-mid,40%);margin-top:-24px;width:48px;height:48px}
  .hx-round[data-prev]{left:10px}
  .hx-round[data-next]{right:10px}
  .hx-legal{margin-top:8px;font-size:11px;text-align:center}
}
@media (max-width:359.98px){
  .hx-ui{padding:16px 14px 12px}
  .hx-facts{font-size:14.5px}
  .hx-tabs{gap:6px}
  .hx-tab{font-size:11px;letter-spacing:.04em;padding:9px 6px 10px}
}
@media (prefers-reduced-motion:reduce){
  .hx-plate img,.hx-plate.is-active img{transform:none;transition:none}
  .hx-word span,.hx-word span.is-active{transform:translate(var(--wx,7%),var(--wy,-4%));clip-path:none;transition:opacity .3s ease}
  .hx-sprite,.hx-sprite.is-active{transform:translate(-50%,-50%);transition:opacity .3s ease}
  .hx-sprite img{animation:none}
  .hx-panel > *,.hx-panel[aria-hidden="true"] > *,.hx-panel.enter > *{transform:none;filter:none}
}