/* ==========================================================================
   Gian Zaniol — Variante v2. Bild-Hero mit Layer + Lenis Smooth Scroll.
   Ergaenzt site.css (nur der Hero unterscheidet sich vom Original).
   ========================================================================== */

/* ---- Lenis (Smooth Scroll) Basis ---- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ===================== HERO V2 (Bild + Layer) ===================== */
.hero-v2{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--topbar-h) + var(--gap-lg)) var(--pad-x) var(--gap-lg);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}

/* Bild-Ebene (wird per Parallax bewegt) */
.hero-v2-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-v2-img{
  position:absolute; left:0; top:-14%;
  width:100%; height:128%;
  object-fit:cover; object-position:center 38%;
  will-change:transform;
}

/* dunkler Ink-Overlay + Blutrot-Glow (der "Layer davor") */
.hero-v2-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(85% 65% at 80% 20%, color-mix(in srgb, var(--red) 20%, transparent), transparent 55%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 88%, transparent) 0%,
      color-mix(in srgb, var(--ink) 60%, transparent) 42%,
      color-mix(in srgb, var(--ink) 72%, transparent) 76%,
      color-mix(in srgb, var(--ink) 92%, transparent) 100%);
}
/* Papierkorn ueber allem, wie der Rest der Seite */
.hero-v2-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--grain); background-size:220px;
  mix-blend-mode:soft-light; opacity:0.45;
}

.hero-v2 .hero-inner{ position:relative; z-index:3; }

/* Registermarken hell und sichtbar (kein is-in noetig in v2) */
.hero-v2 .hero-marks{ position:absolute; inset:calc(var(--topbar-h) + 0.9rem) 0.9rem 0.9rem; z-index:3; pointer-events:none; }
.hero-v2 .hero-marks span{ opacity:1; border-color:color-mix(in srgb, var(--paper) 34%, transparent); }

/* ---- Text hell auf dunklem Grund ---- */
.hero-v2 .kicker{ color:color-mix(in srgb, var(--paper) 78%, var(--red)); }
.hero-v2 .kicker::before{ background:var(--red); }

.hero-v2 h1{
  font-size:clamp(2rem, 6.4vw, 4.9rem);
  line-height:1.0;
  color:var(--paper);
  -webkit-text-fill-color:var(--paper);
  text-shadow:0 2px 46px rgba(0,0,0,0.42);
}
.hero-v2 h1 .ln{ display:block; }
.hero-v2 h1 .accent-dot{ color:var(--red); -webkit-text-fill-color:var(--red); }

.hero-v2 .hero-sub{
  color:color-mix(in srgb, var(--paper) 92%, transparent);
  text-shadow:0 1px 22px rgba(0,0,0,0.45);
}

/* heller, invertierter Haupt-CTA */
.hero-v2 .btn{
  --bg:var(--paper); --fg:var(--ink);
  border-color:var(--paper);
}
.hero-v2 .btn:hover{ background:var(--red); border-color:var(--red); --fg:var(--paper); }

/* Champion-Siegel auf Glas */
.hero-v2 .seal{
  color:var(--paper);
  border-color:color-mix(in srgb, var(--paper) 42%, transparent);
  background:color-mix(in srgb, var(--ink) 32%, transparent);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.hero-v2 .seal b{ color:color-mix(in srgb, var(--paper) 82%, var(--red)); }
.hero-v2 .seal .star{ color:var(--red); }

/* Kein Parallax / kein Transform bei reduced-motion */
@media (prefers-reduced-motion:reduce){
  .hero-v2-img{ transform:none !important; }
}

@media (max-width:820px){
  .hero-v2-img{ object-position:center 32%; }
}