/* ============================================================
   stxrm808 — COCKPIT (Lucas Wahl, 14.10.2026: Richtung B)
   Digitales Kombiinstrument wie im Huracán STO / Audi Virtual Cockpit:
   schwarzes Display, dünne weiße Linien, Eckmarken, Wabenmuster,
   schräge Versalien, große Tacho-Ziffern, Rot nur als „rote Zone“
   auf Aktionen. Kein Chrom, kein Glanz.
   Liegt als letzte Schicht über allen Seiten-Stylesheets; daher
   gezielt !important dort, wo ältere Schichten sonst gewinnen.
   ============================================================ */

:root {
  --bg: #050505;
  --bg-card: #0a0a0a;
  --bg-surface: #0f0f0f;
  --text: #F2F2F2;
  --text-2: #A6A6A6;
  --text-3: #6b6b6b;
  --border: rgba(255, 255, 255, .12);
  --border-hot: rgba(255, 68, 0, .6);
  --amber: #FF4400;
  --cp-line: rgba(255, 255, 255, .14);
  --cp-white: #F2F2F2;
  --cp-red: #FF4400;
  --cp-skew: -9deg;
}

/* ── Display-Grund: Schwarz, Wabenmuster, Vignette ─────────── */
body {
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0, 0, 0, .7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08z M14 32.33v16.17' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E"),
    #050505 !important;
  counter-reset: cp-sektion;
}
.grain, .grain-overlay { opacity: .25 !important; }

/* ── Navigation: Kopfzeile im Display ───────────────────────── */
.nav.scrolled::before { background: rgba(5, 5, 5, .9); }
.nav.scrolled { border-bottom-color: var(--cp-line) !important; }
.nav__link { letter-spacing: .2em !important; font-size: 11px !important; }

/* ── Labels: Abschnittsnummer in Rot + Linie ────────────────── */
.section-tag, .home-gateway__eyebrow, .kit-catalog__eyebrow, .kit-hero__pair-eyebrow {
  font-size: 11px !important; letter-spacing: .28em !important; color: var(--text-2) !important; font-weight: 500 !important;
}
.section-tag { counter-increment: cp-sektion; display: flex !important; align-items: center; gap: 12px; }
.section-tag::before {
  content: counter(cp-sektion, decimal-leading-zero); color: var(--cp-red); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
}
.section-tag::after { content: ''; flex: 0 0 64px; height: 1px; background: var(--cp-line); }

/* ── Überschriften: Versalien, schräg, eng ──────────────────── */
/* Space Grotesk hat keine Kursive: Neigung per Transformation. GSAP übernimmt
   sie beim Einblenden (es liest die bestehende Matrix). */
.section-heading, .home-gateway__title, .home-playlist__heading, .catalog-hero h1, .kit-hero__name,
.kit-cta__heading, .featured-producer__slogan {
  text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: -0.035em !important;
  line-height: .98 !important; color: var(--cp-white) !important;
  display: inline-block; transform: skewX(var(--cp-skew)) !important; transform-origin: left bottom;
}
.section-heading em, .kit-hero__name em, .kit-cta__heading em { color: var(--cp-red) !important; }
.featured-producer__slogan em { color: var(--cp-red) !important; text-shadow: none !important; }
.featured-producer__slogan { line-height: 1 !important; }
.home-gateway__header, .home-release__head, .featured-producer__header { text-align: left !important; align-items: flex-start !important; }
.home-gateway__header .section-heading, .home-release__head .section-heading, #demos .section-heading {
  font-size: clamp(36px, 5vw, 72px) !important;
}
/* Segmentleiste unter großen Überschriften */
.home-gateway__header::after, .home-release__head::after, .featured-producer__header::after, .catalog-hero__inner::after {
  content: ''; display: block; width: 220px; height: 4px; margin-top: 22px;
  background: repeating-linear-gradient(90deg, var(--cp-white) 0 8px, transparent 8px 12px);
  -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent);
}

/* Fließtext ruhig und lesbar */
.home-gateway__desc, .kit-catalog__copy, .kit-catalog__copy p, .catalog-hero__lead, .section-sub,
.home-playlist__sub, .kit-hero__desc, .kit-hero__pair-meta, .fp-card__credits li {
  color: var(--text-2) !important; font-size: 15px !important; line-height: 1.6 !important;
}

/* ── Hero: Instrumententafel ────────────────────────────────── */
.video-scrub__headline {
  align-items: flex-start !important; justify-content: flex-end !important; text-align: left !important;
  padding: 0 max(24px, calc((100vw - 1200px) / 2 + 80px)) 15vh !important;
}
.video-scrub__headline::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 5, .85) 0%, rgba(5, 5, 5, .4) 42%, transparent 68%),
              linear-gradient(0deg, rgba(5, 5, 5, .8) 0%, transparent 40%);
}
.video-scrub__hl-text {
  font-size: clamp(54px, 8.4vw, 124px) !important; font-weight: 700 !important; letter-spacing: -0.045em !important;
  line-height: .92 !important; color: var(--cp-white) !important; text-shadow: none !important;
  transform: skewX(var(--cp-skew)) !important; transform-origin: left bottom;
}
.video-scrub__hl-text span { color: var(--cp-red) !important; text-shadow: none !important; }
.video-scrub__hl-tag {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 0 !important; padding: 0 !important; clip-path: none !important; text-shadow: none !important;
  display: flex !important; align-items: center; gap: 12px;
  font-size: 11px !important; letter-spacing: .28em !important; color: var(--text-2) !important; font-weight: 500 !important;
}
.video-scrub__hl-tag::before { content: ''; width: 40px; height: 2px; background: var(--cp-red); }
.video-scrub__hl-ctas { justify-content: flex-start !important; }

/* Zähler als große Tacho-Ziffer */
.video-scrub__counter {
  right: max(24px, calc((100vw - 1200px) / 2 + 80px)) !important; bottom: 15vh !important; align-items: flex-end !important;
}
.video-scrub__counter-num {
  font-size: clamp(64px, 9vw, 140px) !important; font-weight: 700 !important; color: var(--cp-white) !important;
  letter-spacing: -0.06em !important; line-height: .85 !important;
  display: inline-block; transform: skewX(var(--cp-skew)) !important; transform-origin: left bottom;
}
.video-scrub__counter-pct { color: var(--cp-red) !important; font-size: 22px !important; font-weight: 700 !important; }
@media (max-width: 767px) {
  /* Am Handy steht die Ziffer klein über der Leiste, damit sie die Headline nicht stört */
  .video-scrub__counter { bottom: 18px !important; right: 18px !important; }
  .video-scrub__counter-num { font-size: 44px !important; }
  .video-scrub__counter-pct { font-size: 15px !important; }
}

/* Fortschritt als segmentierte Drehzahlleiste, rot im oberen Bereich */
.video-scrub__progress {
  top: auto !important; bottom: 0 !important; height: 6px !important; box-shadow: none !important;
  background: repeating-linear-gradient(90deg, var(--cp-white) 0 10px, transparent 10px 14px) !important;
}
.video-scrub__progress.is-hot {
  background: repeating-linear-gradient(90deg, var(--cp-red) 0 10px, transparent 10px 14px) !important;
}

/* ── Buttons: abgeschrägt, Rot nur für die Aktion ───────────── */
.btn { letter-spacing: .2em !important; font-weight: 600 !important; }
.btn--primary, .btn--fire, .btn--nav { background: var(--cp-red) !important; color: #fff !important; }
.btn--primary:hover, .btn--fire:hover, .btn--nav:hover { background: #ff5218 !important; }
.btn--ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, .35) !important; color: var(--cp-white) !important; }
.btn--ghost:hover { border-color: var(--cp-red) !important; color: var(--cp-red) !important; }
.kit-hero__pair-link, .bundles-teaser__cta, .kit-hero__pair .btn {
  background: transparent !important; border: 1px solid rgba(255, 255, 255, .35) !important; color: var(--cp-white) !important;
  border-radius: 0 !important; box-shadow: none !important;
}

/* ── Karten: Displayfelder mit Eckmarken ────────────────────── */
.home-gateway__card, .kit-catalog__card, .kit-hero__pair {
  border: 1px solid var(--cp-line) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;
  background:
    linear-gradient(var(--cp-white), var(--cp-white)) top left / 16px 1px no-repeat,
    linear-gradient(var(--cp-white), var(--cp-white)) top left / 1px 16px no-repeat,
    linear-gradient(var(--cp-white), var(--cp-white)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--cp-white), var(--cp-white)) bottom right / 1px 16px no-repeat,
    linear-gradient(180deg, #0c0c0c, #070707) !important;
}
.home-gateway__card:hover, .kit-catalog__card:hover, .kit-hero__pair:hover {
  border-color: var(--border-hot) !important; box-shadow: inset 3px 0 0 var(--cp-red) !important; transform: none !important;
}
.home-gateway__visual, .kit-catalog__media { border-radius: 0 !important; }
.fp-card__kit-badge, .kit-catalog__badge, .kit-hero__badge, .kit-catalog__tags span, .kit-hero__tags span {
  border-radius: 0 !important; background: transparent !important; border: 1px solid var(--cp-line) !important;
  color: var(--text-2) !important; letter-spacing: .18em !important;
}
.kit-catalog__price, .kit-hero__price {
  font-weight: 700 !important; font-size: 34px !important; color: var(--cp-white) !important;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em !important;
  display: inline-block; transform: skewX(var(--cp-skew)) !important; transform-origin: left bottom;
}

/* ── Footer: Instrumentenleiste ─────────────────────────────── */
.footer { background: #050505 !important; border-top: 1px solid var(--cp-line) !important; }
.footer__nav-col { border-left: 1px solid var(--cp-line); padding-left: 20px; }
.footer__nav-col strong { color: var(--cp-white) !important; letter-spacing: .28em !important; font-size: 11px !important; }
.footer__nav-col a, .footer__soon, .footer__copy { color: #8c8c8c !important; }
.footer__nav-col a:hover { color: var(--cp-red) !important; }
.footer__tagline { color: var(--text-2) !important; }

@media (prefers-reduced-motion: reduce) {
  .video-scrub__progress { transition: none !important; }
}