/* ============================================================
   GEPRO V3 - Produktseite (Premium-Stil)
   Canvas Frame-by-Frame Scrollytelling (x2) + Carousel + Bento.
   ============================================================ */

/* ---------- Canvas-Scrollytelling (gepinnte Buehne) ---------- */
.cscroll { position: relative; background: #06070A; height: 360vh; }
.cscroll--short { height: 280vh; }
.cscroll--blueprint { background: #070C18; }
.cscroll__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cscroll__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cscroll__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(6,7,10,.5) 100%), linear-gradient(180deg, rgba(6,7,10,.5) 0%, transparent 26%, transparent 60%, rgba(6,7,10,.88) 100%); }

/* Kinetische Ghost-Woerter (Fade in/out per Scroll, JS-gesteuert) */
.cscroll__ghost { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.cghost { position: absolute; font-size: clamp(4rem, 1rem + 16vw, 17rem); font-weight: 700; letter-spacing: -.04em; color: #fff; opacity: 0; white-space: nowrap; will-change: opacity, transform; }

/* Text-Meilensteine */
.cscroll__caps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cscroll__cap { position: absolute; left: 0; right: 0; bottom: 15vh; text-align: center; padding-inline: var(--gutter); opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cscroll__cap.is-on { opacity: 1; transform: none; }
.cscroll__cap .eyebrow { color: var(--on-dark-2); display: block; margin-bottom: .8rem; }
.cscroll__cap h2, .cscroll__cap h1 { color: #fff; font-size: clamp(2.2rem, 1.3rem + 4vw, 5.2rem); letter-spacing: var(--tr-tighter); max-width: 18ch; margin-inline: auto; line-height: 1.04; }
.cscroll__cap p { color: var(--on-dark-2); font-size: var(--fs-lg); max-width: 48ch; margin: 1.2rem auto 0; }
.cscroll__cap .cta { display: flex; gap: .9rem; justify-content: center; margin-top: 2rem; pointer-events: auto; flex-wrap: wrap; }

/* Fortschritts-Indikator */
.cscroll__progress { position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 4; width: 140px; height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; overflow: hidden; }
.cscroll__progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }

/* ---------- Feature-Bento (dunkel) ---------- */
.feat-tile { position: relative; overflow: hidden; border-radius: var(--r-tile-lg); min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; grid-column: span 3; box-shadow: var(--shadow-card); }
.feat-tile.is-wide { grid-column: span 6; min-height: 540px; }
.feat-tile.is-third { grid-column: span 2; }
.feat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease); }
.feat-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,7,10,.05) 0%, rgba(6,7,10,.3) 48%, rgba(6,7,10,.88) 100%); }
a.feat-tile:hover img { transform: scale(1.05); }
.feat-tile__body { padding: clamp(2rem,1.4rem + 2vw,3rem); }
.feat-tile__body .eyebrow { color: var(--on-dark-2); }
.feat-tile__body h3 { color: #fff; font-size: clamp(1.5rem,1.1rem + 1.4vw,2.2rem); letter-spacing: var(--tr-tight); margin-top: .35rem; }
.feat-tile__body p { color: var(--on-dark-2); margin-top: .6rem; max-width: 38ch; }

/* ---------- Spec-Stat-Reihe ---------- */
.specstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,1rem + 1.5vw,2.4rem); }
.specstat { display: flex; flex-direction: column; gap: 1.3rem; padding: clamp(1.9rem,1.3rem + 1.6vw,2.8rem); background: #fff; border-radius: var(--r-tile); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.specstat:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hov); }
.specstat__ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--blue-50); color: var(--blue-600); flex: 0 0 auto; }
.specstat__ico svg { width: 26px; height: 26px; }
.specstat__val { font-size: clamp(2.3rem,1.7rem + 1.5vw,3.1rem); font-weight: 700; letter-spacing: var(--tr-tighter); line-height: 1.02; color: var(--text); }
.specstat__val .u { font-size: .44em; color: var(--blue-600); font-weight: 600; margin-left: .15em; letter-spacing: 0; vertical-align: baseline; }
.specstat__lbl { font-size: 1rem; color: var(--text-2); }

/* ---------- Feature-Split (Bild + Text) ---------- */
.fsplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,1.5rem + 4vw,6rem); align-items: center; }
.fsplit--rev .fsplit__media { order: 2; }
.fsplit__media { border-radius: var(--r-tile-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; }
.fsplit__media img, .fsplit__media video { width: 100%; height: 100%; object-fit: cover; }
.fsplit h2 { letter-spacing: var(--tr-tighter); }
.fsplit .lead { margin-top: 1.2rem; }
.fsplit .cta { display: flex; gap: .9rem; margin-top: 2rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .cscroll { height: auto; }
  .cscroll__stage { position: relative; height: 82svh; }
  .cscroll__cap { position: static; opacity: 1; transform: none; margin-top: 2rem; }
  .cscroll__caps { position: static; }
  .cghost { display: none; }
}
@media (max-width: 1024px) {
  .feat-tile, .feat-tile.is-wide, .feat-tile.is-third { grid-column: span 2; }
}
@media (max-width: 900px) {
  .specstats { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .fsplit { grid-template-columns: 1fr; }
  .fsplit--rev .fsplit__media { order: 0; }
  .feat-tile { min-height: 400px; }
}
@media (max-width: 600px) {
  .feat-tile, .feat-tile.is-wide, .feat-tile.is-third { grid-column: span 1; }
  .specstats { grid-template-columns: 1fr 1fr; }
}