/* ============================================================
   STEPPENWOLF — LINE UP 2027 — Landingpage Stylesheet
   Basiert auf dem bestehenden Designsystem (steppenwolf-home.css /
   steppenwolf-model.css / style.css) — Variablen, Fonts und mehrere
   Klassen 1:1 übernommen (siehe _reference/design-system.css),
   ergänzt um neue Komponenten für Fullwidth-Produktbanner,
   Color-Swap und den Händler-CTA, die es im Bestand nicht gab.
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-BoldLC.ttf");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-SemiBoldLC.ttf");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-LC.ttf");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-MediumLC.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-Medium.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-DemiBold.ttf");
  font-weight: 600;
  font-display: swap;
}

/* ── :root Variablen (aus steppenwolf-home.css übernommen) ──── */
:root {
  /* Farbwerte auf das offizielle Born-in-Bavaria Design System ausgerichtet
     (Steppenwolf-„Born-in-Bavaria.-Design-System/colors_and_type.css) —
     gleiche --stw-*-Variablennamen (keine Umbenennung, kein Risiko für
     bestehende Verwendungen), aber die autoritativen Hex-Werte:
     --sw-off-white/--sw-black/--sw-signal/--sw-forest/--sw-stone. */
  --stw-paper: #EDE9E0;        /* = --sw-off-white */
  --stw-paper-2: color-mix(in srgb, var(--stw-paper) 90%, #000 10%);
  --stw-ink: #0F0F0D;          /* = --sw-black */
  --stw-muted: #6B6560;        /* = --sw-stone */
  --stw-line: rgba(15, 15, 13, 0.14);
  --stw-red: #C8102E;          /* Racing Red (Mike, 2026-07-08) — vorher #D81F22 Signal-Rot aus dem Design System */
  --stw-red-dark: #9C0C24;     /* dunklere Variante fuer Hover/aktive Zustaende, proportional aus --stw-red abgeleitet */
  --stw-steel: #d7dde0;
  --stw-forest: #2E4635;       /* = --sw-forest */
  --stw-dark: #0F0F0D;         /* = --sw-black */
  --stw-dark-2: #16160F;       /* = --sw-surface (raised panel on black) */
  --stw-dark-muted: #9A948C;   /* = --sw-muted (secondary text on dark) */
  --stw-line-dark: rgba(237, 233, 224, 0.14);        /* Hairline auf dunklem Grund, aus model-sheets-dark.html --line */
  --stw-line-dark-strong: rgba(237, 233, 224, 0.30); /* dito --line-strong */
  --stw-font-body: "BDOGrotesk-Regular", Arial, sans-serif;
  --stw-font-display: "Thunder", Arial, sans-serif;
  --stw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Inter Mono", monospace;
  --stw-sticky-offset: 88px;
  --stw-brand-reveal-target: var(--stw-ink);
}

/* ── Reset / Base ─────────────────────────────────────────────*/
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body {
  margin: 0;
  background: var(--stw-paper);
  color: var(--stw-ink);
  font-family: var(--stw-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--stw-font-display);
  font-weight: 600;
  margin: 0;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout utilities ─────────────────────────────────────────
   Quelle: steppenwolf-home.css ── */
.stw-container {
  width: min(100% - 40px, 1680px);
  margin: 0 auto;
}
.stw-section {
  position: relative;
  padding: clamp(84px, 12vw, 190px) 0;
  overflow: hidden;
}
.stw-section.is-tight { padding: clamp(56px, 8vw, 120px) 0; }
.stw-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stw-muted);
  margin-bottom: 14px;
}

/* ── Header/Nav ────────────────────────────────────────────── */
.stw-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(244, 242, 236, 0.0);
  transition: background 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.stw-header.is-scrolled {
  background: rgba(244, 242, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stw-line);
}
/* Gescrollt UND über einer dunklen Sektion (Hero/Banner): heller Cream-BG
   würde den weißen on-dark-Text unlesbar machen -> Header dann dunkel. */
.stw-header.is-scrolled.on-dark {
  background: rgba(17, 19, 18, 0.88);
  border-bottom: 1px solid rgba(244, 242, 236, 0.14);
}
.header-area-8__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--stw-sticky-offset);
}

/* Sprungziele der Header-/Footer-Anker.
   Der Header steht fix ueber dem Inhalt: ohne scroll-margin rastet die
   Sektion buendig am Viewport-Rand ein und ihre obersten ~88px — also genau
   Eyebrow und Ueberschrift — verschwinden dahinter. Wer aus dem Footer auf
   #haendler klickt, landete damit sichtbar "irgendwo mittendrin".
   Es gab die Regel bisher nur fuer .stw-productline und nur innerhalb einer
   Media Query; hier gilt sie fuer alle Anker und auf jeder Breite. */
#tycoon, #tundra, #transterra, #avinox, #haendler,
#youtube, #wolfpack, #media, #mitmachen {
  scroll-margin-top: calc(var(--stw-sticky-offset) + 16px);
}
.header__logo img { height: 26px; width: auto; }
.header__logo .dark { display: none; }
.stw-header.on-dark .header__logo .light { display: none; }
.stw-header.on-dark .header__logo .dark { display: block; filter: invert(1) brightness(1.15); }
.main-menu ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.main-menu a {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.main-menu a:hover { opacity: 1; }
.main-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.25s ease;
}
.main-menu a:hover::after { right: 0; }
.stw-nav-preview { position: relative; }
.stw-nav-preview__thumb {
  position: absolute;
  top: 100%; left: 50%;
  margin-top: 18px;
  width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(244,242,236,0.16);
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.stw-nav-preview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stw-nav-preview:hover .stw-nav-preview__thumb,
.stw-nav-preview:focus-within .stw-nav-preview__thumb {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.stw-header.on-dark .main-menu a,
.stw-header.on-dark .stw-lang-current { color: var(--stw-paper); }

/* ── SPRACHUMSCHALTER (8 Sprachen, Dropdown) ─────────────────── */
.stw-lang-switcher { position: relative; }
.stw-lang-current {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px 1px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: inherit; opacity: 0.7; cursor: pointer;
  font-family: var(--stw-font-body);
}
.stw-lang-current:hover { opacity: 1; }
.stw-lang-current svg { opacity: 0.7; }
.stw-lang-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 148px;
  background: var(--stw-paper);
  border: 1px solid var(--stw-line);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
  padding: 6px;
  display: flex; flex-direction: column;
  z-index: 50;
}
.stw-lang-dropdown[hidden] { display: none; }
.stw-lang-dropdown a {
  display: block; padding: 7px 10px; border-radius: 5px;
  font-size: 13px; font-weight: 500;
  color: var(--stw-ink); opacity: 0.7;
}
.stw-lang-dropdown a:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.stw-lang-dropdown a.is-active { opacity: 1; font-weight: 700; }
/* Das Dropdown liegt strukturell in .main-menu und wurde dadurch von
   ".stw-header.on-dark .main-menu a" (heller Text) getroffen, obwohl
   sein eigenes Panel immer einen hellen Hintergrund hat -> weiss auf
   weiss. Gleiche Spezifitaet + spaeter im Stylesheet erzwingt Vorrang. */
.stw-header.on-dark .stw-lang-dropdown a { color: var(--stw-ink); }
.header__navicon { display: none; }
.stw-mobile-menu {
  background: none; border: 1px solid var(--stw-line);
  border-radius: 999px; padding: 9px 14px;
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  /* Ohne explizites color faerbt Safari <button>-Text systemblau. */
  color: var(--stw-ink);
  font-family: var(--stw-font-body);
  cursor: pointer;
}
.stw-header.on-dark .stw-mobile-menu {
  color: var(--stw-paper);
  border-color: var(--stw-line-dark);
}

/* ── MOBILE-PANEL ──────────────────────────────────────────── */
.stw-mobile-panel {
  position: fixed; inset: 0; z-index: 400;
  background: var(--stw-dark);
  display: flex; flex-direction: column;
  padding: 22px 28px 40px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.stw-mobile-panel[hidden] { display: none; }
.stw-mobile-panel.is-open { opacity: 1; transform: translateY(0); }
.stw-mobile-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: clamp(30px, 7vh, 60px);
}
.stw-mobile-panel__logo {
  height: 20px; width: auto;
  /* Das Wordmark-SVG ist dunkel gezeichnet — auf dem dunklen Panel
     invertieren, analog .stw-header.on-dark .header__logo .dark */
  filter: invert(1) brightness(1.15);
}
.stw-mobile-panel__close {
  background: none; border: 0; padding: 6px;
  color: var(--stw-paper); cursor: pointer;
  display: flex; align-items: center;
}
.stw-mobile-panel__nav { display: flex; flex-direction: column; }
.stw-mobile-panel__nav a {
  font-family: var(--stw-font-display);
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1.18;
  color: var(--stw-paper);
  padding: 10px 0;
  border-bottom: 1px solid var(--stw-line-dark);
}
.stw-mobile-panel__nav a:last-child { border-bottom: 0; }
.stw-mobile-panel__lang {
  margin-top: auto; padding-top: 30px;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  color: var(--stw-paper);
  border-top: 1px solid var(--stw-line-dark);
}
.stw-mobile-panel__lang-opt {
  font-size: 14px; font-weight: 500;
  color: var(--stw-paper); opacity: 0.55;
  padding: 4px 0;
}
.stw-mobile-panel__lang-opt.is-active { opacity: 1; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .stw-mobile-panel { transition: none; }
}

/* ── HERO ──────────────────────────────────────────────────── */
.stw-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--stw-dark);
}
.stw-hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.stw-hero__media video,
.stw-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.stw-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(17,19,18,0.92) 0%, rgba(17,19,18,0.28) 46%, rgba(17,19,18,0.55) 100%);
  z-index: 1;
}
.stw-hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 10% clamp(48px, 7vw, 96px);
}
.stw-hero__eyebrow {
  color: var(--stw-dark-muted);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.stw-hero__title {
  color: var(--stw-paper);
  font-size: clamp(64px, 13vw, 200px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* L+I in "LINE" wirken bei der negativen Laufweite oben optisch verklebt
   (anders als die restlichen Buchstabenpaare) — minimale Zusatzweite nur
   zwischen diesen beiden Buchstaben. */
.stw-kern-li { margin-right: 0.045em; }
/* Der Textblock unter der H1 uebernimmt die Anmutung des Eyebrows darueber
   ("STEPPENWOLF BICYCLES"): BDOGrotesk, 13px, Versalien, gesperrt.
   Beide Zeilen sind identisch gesetzt — gleiche Schrift, gleiche Farbe,
   keine Hervorhebung. */
.stw-hero__sub {
  color: var(--stw-dark-muted);
  font-family: var(--stw-font-body);
  font-size: 13px;
  /* 0.05em statt 0.12em: der laengste Satz misst gesperrt 1267px und passt
     damit auf einem 1440er Laptop (1152px Textbreite) nicht in eine Zeile.
     Bei 0.05em sind es 1144px — knapp einzeilig. Unter ~1450px Fensterbreite
     bricht er trotzdem um; dafuer ist der Satz schlicht zu lang. */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: min(100%, 1320px);
  margin-top: 10px;
  line-height: 1.65;
}
/* Jeder Satz eine eigene Zeile. */
.stw-hero__sub span { display: block; }
.stw-hero__sub span + span { margin-top: 6px; }
@media (max-width: 767px) {
  /* Mobil bricht der Text ohnehin um — Sperrung zuruecknehmen, sonst
     zerfaellt er, und etwas mehr Luft zwischen den Saetzen. */
  .stw-hero__sub { letter-spacing: 0.08em; line-height: 1.7; }
  .stw-hero__sub span + span { margin-top: 10px; }
}
.stw-hero__scroll {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--stw-dark-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0.85;
}
.stw-hero__scroll span::after {
  content: '';
  display: block;
  width: 1px; height: 34px;
  margin: 10px auto 0;
  background: linear-gradient(180deg, var(--stw-dark-muted), transparent);
  animation: stw-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes stw-scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── PRODUKTBANNER (neu — Fullwidth pro Radgruppe) ────────────*/
.stw-banner {
  position: relative;
  aspect-ratio: 1920 / 1080;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: var(--stw-dark);
  border-top: 1px solid rgba(244, 242, 236, 0.08);
}
.stw-banner__media {
  position: absolute; inset: 0; z-index: 0;
}
/* <picture> ist per Default inline und hat keine eigene Hoehe — ein Kind-<img>
   mit height:100% wuerde dagegen auf 0 kollabieren. Deshalb muss picture
   selbst die Box aufspannen. */
.stw-banner__media picture {
  display: block;
  position: absolute; inset: 0;
}
.stw-banner__media img,
.stw-banner__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.stw-banner__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(17,19,18,0.38) 0%, rgba(17,19,18,0.05) 35%, rgba(17,19,18,0.05) 65%, rgba(17,19,18,0.42) 100%);
}
.stw-banner__content {
  position: relative; z-index: 2;
  width: 100%;
  /* Die Baureihen-Bezeichnung soll auf ~17% der Bannerhoehe sitzen, nicht
     buendig unter dem Header kleben.
     padding-% bezieht sich auf die BREITE des Elternelements, nicht auf die
     Hoehe. Bei 16:9 ist die Hoehe 56.25% der Breite, also entsprechen
     17% der Hoehe rund 9.6% der Breite.
     max(): auf schmalen Fenstern faellt 9.6% unter die Headerhoehe — dann
     gewinnt der Header-Offset, sonst laege der Titel dahinter. */
  padding: max(calc(var(--stw-sticky-offset) + 20px), 9.6%) 10% clamp(40px, 6vw, 76px);
  display: flex;
  align-items: flex-start;
}
.stw-banner__index {
  font-family: var(--stw-font-display);
  font-size: 15px;
  color: var(--stw-dark-muted);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.stw-banner__title {
  color: var(--stw-paper);
  font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 700;
}
.stw-banner__claim {
  font-family: var(--stw-font-body);
  color: var(--stw-dark-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  max-width: 420px;
}
.stw-banner__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
.stw-chip {
  border: 1px solid rgba(244,242,236,0.28);
  color: var(--stw-paper);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.stw-chip:hover {
  background: rgba(244,242,236,0.12);
  border-color: rgba(244,242,236,0.5);
}
/* Visuell versteckt, aber für Screenreader und Suchmaschinen vorhanden.
   Gebraucht dort, wo ein Titel bereits fest im Bildmotiv steckt (Community-
   Banner auf der Startseite) — display:none oder visibility:hidden würden das
   Element auch aus dem Accessibility-Tree nehmen, deshalb der Clip-Trick. */
.stw-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.stw-banner--placeholder .stw-banner__media {
  background:
    radial-gradient(circle at 18% 20%, rgba(201,22,36,0.16), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(41,62,56,0.55), transparent 60%),
    linear-gradient(135deg, var(--stw-dark) 0%, var(--stw-dark-2) 60%, var(--stw-forest) 140%);
}
.stw-banner--placeholder .stw-banner__title { opacity: 0.94; }
.stw-badge-soon {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(244,242,236,0.35);
  color: var(--stw-paper);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.stw-badge-soon::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--stw-red);
}

/* ── PANEL-SWAP (Tundra/Transterra) ───────────────────────────
   Banner und Modellkarten teilen sich dieselbe Sektion. Klick auf
   .stw-swap-btn swipt das Banner nach links raus, die Modelle von
   rechts rein (JS: initPanelSwap in landingpage.js). Normales
   Scrollen zeigt die Modelle NICHT — sie sind nur über den Button
   erreichbar. Beide Panels bleiben technisch immer position:absolute,
   nur die Höhe von .stw-swap wird per GSAP zwischen Banner- und
   Modell-Höhe animiert (robuster als position relative/absolute
   mitten in der Animation umzuschalten). ── */
.stw-productline { position: relative; scroll-snap-align: start; }
.stw-swap {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1920 / 1080;
}
.stw-swap__panel--banner {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.stw-swap__panel--banner .stw-banner {
  min-height: 100%;
  border-top: 0;
}
.stw-swap__panel--models {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--stw-dark);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Signal-Kante links — die "eine Zierde", analog model-sheets-dark.html .sheet::before */
.stw-swap__panel--models::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--stw-red); pointer-events: none; z-index: 2;
}
.stw-swap-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--stw-red);
  border: 1px solid var(--stw-red);
  color: var(--stw-paper);
  font-family: var(--stw-font-body);
  font-size: 14px; font-weight: 600;
  padding: 15px 28px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.stw-swap-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--stw-red-dark);
  transform: translateX(-102%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.stw-swap-btn:hover {
  border-color: var(--stw-red-dark);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.stw-swap-btn:hover::before { transform: translateX(0); }
.stw-swap-btn svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  animation: stw-arrow-nudge 2.2s ease-in-out infinite;
}
.stw-swap-btn:hover svg { transform: translateX(3px); animation-play-state: paused; }
@keyframes stw-arrow-nudge {
  0%, 22%, 100% { transform: translateX(0); }
  11% { transform: translateX(4px); }
}
.stw-swap-back {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0;
  color: var(--stw-dark-muted);
  font-family: var(--stw-font-body);
  font-size: 13px; font-weight: 500;
  padding: 22px 0 0;
  margin: 0 auto;
  max-width: min(100% - 40px, 1680px);
  width: 100%;
  position: relative; z-index: 2;
}
.stw-swap-back:hover { color: var(--stw-paper); }
.stw-swap-back svg { transition: transform 0.25s ease; }
.stw-swap-back:hover svg { transform: translateX(-3px); }
.stw-placeholder-panel {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.stw-placeholder-panel .stw-badge-soon { margin-bottom: 22px; }
.stw-placeholder-panel__note { max-width: 480px; }
.stw-placeholder-panel--media {
  flex-direction: row;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  justify-content: flex-start;
}
.stw-placeholder-panel__media {
  position: relative;
  flex: 0 0 min(340px, 40%);
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stw-placeholder-panel__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.82;
  filter: grayscale(0.35);
}
.stw-placeholder-panel__media-label {
  position: absolute; bottom: 0; left: 0;
  background: var(--stw-ink); color: var(--stw-paper);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px;
}
.stw-placeholder-panel__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) {
  .stw-placeholder-panel--media { flex-direction: column; align-items: flex-start; }
  .stw-placeholder-panel__media { flex-basis: auto; width: 100%; height: 200px; }
}

/* ── MODELL-GRID (unter jedem Banner) ─────────────────────────
   .stw-model-card Basis aus steppenwolf-home.css übernommen,
   um Farb-Swatches + Spec-Toggle erweitert. ── */
.stw-model-section {
  background: var(--stw-dark);
  color: var(--stw-paper);
  padding: clamp(56px, 7vw, 104px) 0;
  position: relative;
  overflow: hidden;
}
/* riesiges Kopf-Wasserzeichen, ins untere rechte Eck blutend — analog
   model-sheets-dark.html .sheet::after (dort 0.06 Opazitaet auf A4-Papier;
   hier 0.05 fuer den groesseren Web-Viewport, gleiche Grundidee). */
.stw-model-section::after {
  content: ""; position: absolute; right: -7vw; bottom: 0;
  width: min(76vw, 1060px); height: min(44vw, 616px);
  background: var(--stw-paper); opacity: .05; pointer-events: none;
  -webkit-mask: url("../steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
  mask: url("../steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
}
.stw-model-section > .stw-container { position: relative; z-index: 1; }
.stw-model-section-title {
  font-size: clamp(26px, 2.6vw, 38px);
  margin-bottom: 8px;
  color: var(--stw-paper);
}
.stw-model-section-note {
  color: var(--stw-dark-muted);
  font-size: 14px;
  margin-bottom: 36px;
  max-width: 640px;
}
.stw-model-section-footnote {
  color: var(--stw-dark-muted);
  font-size: 12px;
  margin-top: 32px;
}
.stw-model-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.stw-model-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--stw-line-dark);
  background: var(--stw-dark-2);
  border-radius: 8px; /* Card-Radius laut Design System DESIGN.md §6 */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stw-model-card:hover {
  transform: translateY(-4px);
  border-color: var(--stw-line-dark-strong);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}
.stw-model-card__media {
  position: relative;
  height: 210px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--stw-paper); /* helle Buehne fuer Produktfotos mit weissem Studio-Grund */
  border-radius: 6px;
}
.stw-model-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.stw-model-card:hover .stw-model-card__media img { transform: scale(1.04); }
.stw-model-card__badge {
  position: absolute; top: 0; left: 0;
  background: var(--stw-red); color: var(--stw-paper);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px;
}

/* Award-Flag — klickbares Testsiegel in der Bildecke, öffnet Lightbox.
   Eigene Selektoren nötig, da .stw-model-card__media img (oben) sonst
   auch dieses Badge auf 100%/contain/multiply zwingen würde. */
.stw-model-card__media .stw-award-flag {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 54px; aspect-ratio: 496 / 567; height: auto;
  padding: 0; border: none; border-radius: 5px;
  cursor: pointer; line-height: 0;
  box-shadow: 0 3px 10px rgba(15,15,13,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.stw-model-card__media .stw-award-flag:hover,
.stw-model-card__media .stw-award-flag:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 5px 14px rgba(15,15,13,0.45);
}
.stw-model-card__media .stw-award-flag img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  border-radius: 5px;
  transition: none;
}
.stw-model-card:hover .stw-model-card__media .stw-award-flag img { transform: none; }
.stw-model-card h3 {
  font-size: clamp(22px, 2vw, 30px);
  margin-bottom: 6px;
  color: var(--stw-paper);
}
.stw-model-card__price {
  font-size: 14px;
  color: var(--stw-dark-muted);
  margin-bottom: 16px;
}
.stw-model-card__desc {
  color: var(--stw-dark-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Color swap swatches */
.stw-swatches {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.stw-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid var(--stw-line-dark);
  outline-offset: 2px;
  cursor: pointer;
  padding: 0;
  transition: outline-color 0.2s ease, transform 0.2s ease;
}
.stw-swatch:hover { outline-color: var(--stw-line-dark-strong); transform: scale(1.12); }
.stw-swatch.is-active { border-color: var(--stw-red); }
.stw-swatch-label {
  font-size: 12px; color: var(--stw-dark-muted);
  margin-left: 4px;
}
.stw-swatch-note {
  font-size: 12px;
  color: var(--stw-dark-muted);
  font-style: italic;
}

/* Spec-Table nach Born-in-Bavaria Design System (SpecTable.jsx, DESIGN.md §6):
   monospace Werte, Hairline-Row-Divider, Label/Value-Paare — keine Boxen,
   kein 2-Spalten-Karten-Grid. Immer offen (kein Akkordeon mehr) —
   analog model-sheets-dark.html, wo die Spec-Tabelle nie interaktiv ist. */
.stw-spec-grid {
  margin-top: 16px;
}
.stw-spec-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--stw-line-dark);
  font-size: 14px;
  line-height: 1.35;
  transition: background 0.2s ease;
}
.stw-spec-item:hover { background: rgba(237,233,224,0.04); }
.stw-spec-item strong {
  color: var(--stw-dark-muted);
  font-weight: 400;
  font-size: 13px;
  flex-shrink: 0;
}
/* Schrift bewusst BDO Grotesk wie im Rest der Seite. Bis 16.08. lief hier
   --stw-font-mono (JetBrains Mono): der Monospace-Look wirkte neben Thunder
   und BDO Grotesk technisch-altbacken und brach den Premium-Eindruck genau
   an der Stelle, an der Interessenten in die Modelle einsteigen (bemängelt
   von Klara und Jens). Zahlen bleiben durch font-variant-numeric trotzdem
   sauber untereinander — das war der ursprüngliche Grund für den Monospace. */
.stw-spec-value {
  font-family: var(--stw-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: right;
  color: var(--stw-paper);
}
/* Fußnote unter einem Spec-Wert (z.B. "* Verfügbar ab Mai 2027" bei den
   Transterra-Easy-Rahmengrößen). flex-basis:100% zwingt sie in eine eigene
   Zeile unter den Wert; flex-wrap nur auf der Zeile mit Fußnote, damit die
   uebrigen Spec-Zeilen ihr Umbruchverhalten behalten.
   Bewusst ein Geschwister-Element, KEIN Kind von .stw-spec-value: applyLang()
   setzt textContent auf [data-i18n] — verschachtelt wuerde die Fußnote beim
   ersten Sprachwechsel geloescht. */
.stw-spec-item--note { flex-wrap: wrap; }
.stw-spec-note {
  flex-basis: 100%;
  text-align: right;
  font-size: 11px;
  line-height: 1.3;
  color: var(--stw-dark-muted);
  margin-top: 4px;
}
.stw-model-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  margin-top: 14px;
  color: var(--stw-paper);
  border-bottom: 1px solid var(--stw-red);
  padding-bottom: 2px;
  align-self: flex-start;
}
.stw-arrow { display: inline-block; transition: transform 0.25s ease; }
.stw-btn:hover .stw-arrow,
.stw-model-card__link:hover .stw-arrow { transform: translateX(3px); }

/* ── CTA: Händler finden ──────────────────────────────────────*/
.stw-cta-dealer {
  background: var(--stw-paper-2);
  color: var(--stw-ink);
  text-align: left;
  padding: clamp(60px, 8vw, 110px) 0;
}
.stw-cta-dealer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
}
.stw-cta-dealer__col {
  padding-right: clamp(0px, 3vw, 40px);
}
.stw-cta-dealer__col:first-child {
  border-right: 1px solid var(--stw-line);
}
.stw-cta-dealer__eyebrow {
  font-family: var(--stw-font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stw-muted);
  margin-bottom: 14px;
}
.stw-cta-dealer__title {
  color: var(--stw-ink);
  font-size: clamp(26px, 2.8vw, 44px);
  margin-bottom: 16px;
}
.stw-cta-dealer p {
  font-family: var(--stw-font-body);
  color: var(--stw-muted);
  max-width: 460px;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.5;
}
.stw-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--stw-red);
  color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  padding: 16px 30px;
  border: 1px solid var(--stw-red);
  transition: background 0.25s ease, color 0.25s ease;
}
.stw-btn:hover { background: transparent; color: var(--stw-paper); }
.stw-cta-dealer .stw-btn { border-radius: 8px; }
.stw-btn--ghost {
  background: transparent;
  color: var(--stw-paper);
  border-color: rgba(244,242,236,0.4);
}
.stw-btn--ghost:hover { background: var(--stw-paper); color: var(--stw-ink); }
.stw-btn--dark {
  background: var(--stw-ink);
  border-color: var(--stw-ink);
  color: var(--stw-paper);
}
.stw-btn--dark:hover { background: transparent; color: var(--stw-ink); }

/* ── Instagram-Feed (Platzhalter, siehe HANDOFF) ──────────────── */
.stw-instagram {
  background: var(--stw-paper);
  padding: clamp(60px, 8vw, 100px) 0;
}
.stw-instagram__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.stw-instagram__eyebrow {
  font-family: var(--stw-font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stw-muted);
  margin-bottom: 10px;
}
.stw-instagram__title {
  font-family: var(--stw-font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  color: var(--stw-ink);
}
.stw-instagram__link {
  font-family: var(--stw-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--stw-ink);
  border-bottom: 1px solid var(--stw-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.stw-instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.stw-instagram__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stw-paper-2);
}
.stw-instagram__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.stw-instagram__tile:hover img { transform: scale(1.06); }
.stw-instagram__icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,15,13,0.32);
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.stw-instagram__tile:hover .stw-instagram__icon { opacity: 1; }
.stw-instagram__note {
  margin-top: 14px;
  font-family: var(--stw-font-body);
  font-size: 12px;
  color: var(--stw-muted);
  text-align: right;
}

/* ── Brand reveal (Editorial-Textblöcke, aus steppenwolf-home.css)*/
.stw-brand-reveal { position: relative; }
.stw-brand-reveal .stw-reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  color: color-mix(in srgb, var(--stw-muted) 30%, transparent);
  will-change: opacity, transform, filter, color;
}

/* ── Footer ────────────────────────────────────────────────── */
/* Sticky Footer auf den Unterseiten (Kontakt, Legal).
   Deren Inhalt ist oft kuerzer als der Viewport — ohne das hier haengt der
   Footer mitten auf der Seite und darunter klafft Hintergrund.
   Bewusst nur .stw-sub: die Startseite hat Panels mit position:absolute,
   ein Flex-Body koennte dort das Layout verschieben. */
body.stw-sub { display: flex; flex-direction: column; min-height: 100dvh; }
body.stw-sub .stw-footer { margin-top: auto; }

.stw-footer {
  background: var(--stw-ink);
  color: var(--stw-paper);
  padding: 64px 0 28px;
}
.stw-footer-grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(150px, 0.22fr));
  gap: 34px;
}
.stw-footer-grid img { height: 22px; margin-bottom: 14px; filter: invert(1) brightness(2); }
.stw-copy { color: rgba(244,242,236,0.55); font-size: 13px; }
.stw-footer h3 {
  font-family: var(--stw-font-body);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(244,242,236,0.5);
  margin-bottom: 14px;
}
.stw-footer-list { display: flex; flex-direction: column; gap: 10px; }
.stw-footer-list a { font-size: 14px; color: rgba(244,242,236,0.82); }
.stw-footer-list a:hover { color: var(--stw-paper); }
.stw-copyright {
  border-top: 1px solid rgba(244,242,236,0.12);
  margin-top: 44px; padding-top: 22px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(244,242,236,0.45);
}

/* ── Utility: fade-anim initial state (gesetzt via JS, hier nur
   sichergestellt dass Elemente vor JS-Boot nicht springen) ──── */
.fade-anim { will-change: opacity, transform; }

/* ── Scroll-Performance auf Mobilgeräten ──────────────────────
   Auf der Startseite tragen 34 Elemente .fade-anim. `will-change` legt für
   jedes davon dauerhaft eine eigene Compositor-Ebene an — und da die
   GSAP-Animationen den Hint nie zurücksetzen (kein clearProps), bleiben
   sie das ganze Seitenleben bestehen. Auf dem Desktop verkraftet die GPU
   das, auf dem Handy ist es messbar: das Scrollen hakelt (Meldung Mike,
   16.08.).

   Der Hint ist hier ohnehin verzichtbar: Browser optimieren reine
   opacity/transform-Animationen auch ohne ihn zuverlässig. Was er bringt,
   ist Vorbereitungszeit für den ersten Frame — was er kostet, ist
   GPU-Speicher pro Element, dauerhaft. Auf schwacher Hardware ist der
   Tausch schlecht.

   Gleiches gilt für den Header-Blur: `backdrop-filter` auf einem fixierten
   Element zwingt den Browser, bei jedem Scroll-Frame den Bereich dahinter
   neu zu filtern. Mobil deshalb ohne Blur und stattdessen mit etwas
   deckenderem Hintergrund — optisch kaum zu unterscheiden, aber ein
   Bruchteil der Arbeit. */
@media (max-width: 900px) {
  .fade-anim,
  .stw-brand-reveal .stw-reveal-line { will-change: auto; }
  .stw-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(244, 242, 236, 0.97);
  }
}

/* ── Reduced Motion ────────────────────────────────────────────
   Dekorative Loops (Scroll-Cue, Arrow-Nudge, Bild-Zoom) abschalten
   und Smooth-Scroll deaktivieren. Die GSAP-Timelines (fade-anim,
   brand-reveal) werden zusätzlich in landingpage.js per
   matchMedia-Check kurzgeschlossen (siehe initFadeAnim/
   initBrandReveal) — hier nur der reine CSS-Teil, den GSAP nicht
   erreicht (Inline-Styles von GSAP sind kein CSS-Transition/
   -Animation und werden von dieser Regel nicht berührt). ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stw-hero__scroll span::after,
  .stw-swap-btn svg {
    animation: none !important;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .main-menu { display: none; }
  .header__navicon { display: block; }
}
@media (max-width: 767px) {
  .stw-container { width: min(100% - 28px, 1680px); }
  .stw-section { padding: 64px 0; }
  .stw-hero__title { font-size: clamp(48px, 16vw, 96px); }

  /* Produktbanner auf Mobile: fuellt den Schirm bis zur Unterkante,
     der Header bleibt darueber frei stehen.

     Vorher 74vh (geraetehoehenabhaengig), danach 9:16 (bildtreu, aber
     693px hoch bei 844px Screen -> unten lugte die naechste Sektion hervor).
     Jetzt: 100dvh minus Headerhoehe. dvh statt vh, weil Safari die
     Adressleiste ein- und ausblendet und vh dort die GROESSTE Hoehe meint.

     aspect-ratio MUSS auf auto: zusammen mit einer festen height wuerde
     der Browser die BREITE aus dem Verhaeltnis ableiten -> Horizontal-Overflow.

     .stw-banner und .stw-swap brauchen dieselbe Hoehe: initSwap() misst
     banner.offsetHeight gegen die Hoehe von .stw-swap zurueck. */
  .stw-banner {
    aspect-ratio: auto;
    height: calc(100dvh - var(--stw-sticky-offset));
    min-height: 0;
  }
  .stw-swap {
    aspect-ratio: auto;
    height: calc(100dvh - var(--stw-sticky-offset));
  }
  /* Ohne scroll-margin rastet die Sektion am Viewport-Rand ein und der
     fixe Header verdeckt ihre oberen 88px. */
  .stw-productline { scroll-margin-top: var(--stw-sticky-offset); }
  /* Der Textblock sitzt oben; unten bleibt das Motiv frei.
     Seitenabstand knapper als die 10% vom Desktop, sonst bricht die Headline.
     padding-top: Header (88px) PLUS Luft — sonst klebt die Baureihen-
     Bezeichnung direkt unter der Headerkante. */
  /* Der Banner beginnt UNTER dem Header — der Header-Offset steckt bereits
     in der Bannerhoehe. Die Bezeichnung sitzt auf ~17% der Bannerhoehe,
     analog Desktop. Hier direkt gegen dvh gerechnet, weil die Hoehe auf
     Mobile nicht mehr an die Breite gekoppelt ist (kein aspect-ratio). */
  .stw-banner__content {
    padding-left: 0; padding-right: 0;
    padding-top: calc((100dvh - var(--stw-sticky-offset)) * 0.17);
  }
  .stw-banner__title { font-size: clamp(34px, 11vw, 52px); }

  /* Chips: kleiner und gefuellt. Auf dem Foto (heller Wald, Gegenlicht)
     war weisse Schrift auf transparentem Grund kaum lesbar — der Rahmen
     allein traegt nicht. Deshalb deckender dunkler Fill statt Kontur. */
  .stw-banner__meta { flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .stw-chip {
    font-size: 11px;
    padding: 5px 11px;
    background: rgba(15, 15, 13, 0.82);
    border-color: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .stw-chip:hover {
    background: rgba(15, 15, 13, 0.9);
    border-color: transparent;
  }
  .stw-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .stw-copyright { flex-direction: column; gap: 8px; }
  .stw-model-row { grid-template-columns: 1fr; }
  .stw-cta-dealer__grid { grid-template-columns: 1fr; gap: 44px; }
  .stw-cta-dealer__col:first-child { border-right: 0; border-bottom: 1px solid var(--stw-line); padding-bottom: 44px; }
  .stw-cta-dealer__col { padding-right: 0; }
  .stw-instagram__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   AWARD-LIGHTBOX — vergrößerte Ansicht für Testsiegel (siehe
   .stw-award-flag). Ein globales Element für alle Trigger.
   ============================================================ */
.stw-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.stw-lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.3s ease;
}
.stw-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,15,13,0.88);
  border: none; padding: 0;
}
.stw-lightbox__inner {
  position: relative; z-index: 1;
  max-width: min(90vw, 460px);
  transform: scale(0.94);
  transition: transform 0.3s ease;
}
.stw-lightbox.is-open .stw-lightbox__inner { transform: scale(1); }
.stw-lightbox__img {
  display: block;
  width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.stw-lightbox__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,15,13,0.75);
  border: none; border-radius: 50%;
  color: var(--stw-paper); cursor: pointer;
  transition: background 0.2s ease;
}
.stw-lightbox__close:hover { background: var(--stw-red); }
@media (prefers-reduced-motion: reduce) {
  .stw-lightbox, .stw-lightbox__inner { transition: none; }
}

/* ============================================================
   FAQ — GEO-Sektion. <details>/<summary>, kein JS.
   ============================================================ */
.stw-faq {
  background: var(--stw-paper);
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid var(--stw-line);
}
.stw-faq__head { margin-bottom: clamp(32px, 4vw, 54px); }
.stw-faq__eyebrow {
  font-family: var(--stw-font-body);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stw-muted); margin-bottom: 10px;
}
.stw-faq__title {
  font-family: var(--stw-font-display);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02; color: var(--stw-ink);
}
.stw-faq__list { max-width: 860px; border-top: 1px solid var(--stw-line); }
.stw-faq__item { border-bottom: 1px solid var(--stw-line); }
.stw-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--stw-font-body); font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.35;
  color: var(--stw-ink);
  transition: color .2s ease;
}
.stw-faq__q::-webkit-details-marker { display: none; }
.stw-faq__q:hover { color: var(--stw-red); }
.stw-faq__q::after {
  content: ''; flex: 0 0 12px; width: 12px; height: 12px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .25s ease;
}
.stw-faq__item[open] > .stw-faq__q::after { transform: rotate(-135deg) translateY(-3px); }
.stw-faq__a { padding: 0 0 24px; max-width: 720px; }
.stw-faq__a p {
  font-size: 15px; line-height: 1.65; color: var(--stw-muted);
}
@media (prefers-reduced-motion: reduce) {
  .stw-faq__q, .stw-faq__q::after { transition: none; }
}


/* ============================================================
   HAENDLERSUCHE (CTA-Section)
   Daten kommen live von der Hauptsite ueber php/haendler-proxy.php.
   ============================================================ */
/* Sieht aus wie .stw-btn--dark und verhält sich auch so — es ist nur technisch
   ein <button> statt eines <a>, weil er ein Panel aufklappt statt zu
   navigieren. Vorher hatte er eigene Werte (Display-Schrift, Versalien,
   14/22px Padding, 8px Radius fehlte) und stach dadurch neben allen anderen
   Schaltflächen heraus. Bei Änderungen an .stw-btn hier mitziehen. */
.stw-dealer-toggle {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--stw-ink);
  color: var(--stw-paper);
  font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  padding: 16px 30px;
  border: 1px solid var(--stw-ink);
  border-radius: 8px;
  transition: background 0.25s ease, color 0.25s ease;
}
.stw-dealer-toggle:hover { background: transparent; color: var(--stw-ink); }
.stw-dealer-toggle:focus-visible { outline: 2px solid var(--stw-forest); outline-offset: 3px; }
/* Plus -> Minus, analog zum FAQ */
.stw-dealer-toggle__icon { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
.stw-dealer-toggle__icon::before,
.stw-dealer-toggle__icon::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.stw-dealer-toggle__icon::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
.stw-dealer-toggle__icon::after  { left: 5px; top: 0; width: 1.5px; height: 12px; }
.stw-dealer-toggle[aria-expanded="true"] .stw-dealer-toggle__icon::after { transform: scaleY(0); opacity: 0; }

/* Panel: volle Breite ueber beide Grid-Spalten.
   Aufklappen ueber grid-template-rows 0fr -> 1fr — animiert bis zur
   natuerlichen Hoehe, ohne die max-height-Schaetzerei. */
.stw-dealer-panel {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease, margin-top .32s ease;
  margin-top: 0;
}
.stw-dealer-panel__inner { overflow: hidden; min-height: 0; }
.stw-dealer-panel.is-open {
  grid-template-rows: 1fr;
  margin-top: clamp(32px, 4vw, 56px);
}
.stw-dealer-panel.is-open .stw-dealer-panel__inner {
  border-top: 1px solid var(--stw-line);
  padding-top: clamp(24px, 3vw, 36px);
}
@media (prefers-reduced-motion: reduce) {
  .stw-dealer-panel { transition: none; }
  .stw-dealer-toggle,
  .stw-dealer-toggle__icon::before,
  .stw-dealer-toggle__icon::after { transition: none; }
}
.stw-dealer-search { margin-top: 0; margin-bottom: 28px; }
.stw-dealer-search__row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.stw-dealer-search input[type="text"],
.stw-dealer-search select {
  border: 1px solid var(--stw-line); background: #fff; color: var(--stw-ink);
  font-family: var(--stw-font-body); font-size: 15px; padding: 14px 16px;
}
.stw-dealer-search input[type="text"] { flex: 1 1 190px; min-width: 0; }
.stw-dealer-search select {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.stw-dealer-search .stw-btn { flex: 0 0 auto; }
.stw-dealer-search__row > .stw-dealer-search__geo { margin-top: 0; align-self: center; margin-left: 4px; }
.stw-dealer-search__geo {
  margin-top: 10px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--stw-font-body); font-size: 13px; color: var(--stw-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.stw-dealer-search__geo:hover { color: var(--stw-ink); }

/* Panel-Layout: Trefferliste links, Karte rechts */
.stw-dealer-layout { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) {
  .stw-dealer-layout { grid-template-columns: 2fr 3fr; align-items: start; }
}
.stw-dealer-map {
  min-height: 320px; height: 100%; background: var(--stw-paper);
  border: 1px solid var(--stw-line);
}
.stw-dealer-map:empty { display: none; }
@media (min-width: 900px) {
  .stw-dealer-map { min-height: 420px; position: sticky; top: 100px; }
}
/* Leaflet an das Designsystem angleichen */
.stw-dealer-map .leaflet-container { font-family: var(--stw-font-body); background: var(--stw-paper); }
.stw-dealer-map .leaflet-popup-content-wrapper,
.stw-dealer-map .leaflet-popup-tip { border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.stw-dealer-map .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.stw-dealer-map .leaflet-popup-content strong { display: block; margin-bottom: 3px; font-size: 14px; }
.stw-dealer-map .leaflet-popup-content a { color: var(--stw-forest); }
.stw-dealer-map .leaflet-bar a { border-radius: 0; color: var(--stw-ink); }
.stw-dealer-map .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75); }

.stw-dealer-results { margin-top: 0; }
.stw-dealer-card { cursor: pointer; transition: background .15s ease; }
.stw-dealer-card:hover { background: rgba(15,15,13,.03); }
.stw-dealer-card.is-active { background: rgba(46,70,53,.07); }
.stw-dealer-results__head {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stw-muted); margin-bottom: 10px;
}
.stw-dealer-results__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--stw-line);
}

.stw-dealer-card {
  border-bottom: 1px solid var(--stw-line); padding: 14px 0;
  display: flex; gap: 14px; align-items: baseline;
}
.stw-dealer-card__dist {
  flex: 0 0 62px; font-family: var(--stw-font-display); font-size: 15px;
  color: var(--stw-forest); letter-spacing: .02em;
}
.stw-dealer-card__body { flex: 1 1 auto; min-width: 0; }
.stw-dealer-card__name { font-weight: 600; font-size: 15px; margin: 0 0 3px; }
.stw-dealer-card__meta { font-size: 13px; color: var(--stw-muted); margin: 0; line-height: 1.5; }
.stw-dealer-card__links { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 12px; }
.stw-dealer-card__links a { font-size: 13px; color: var(--stw-ink); text-underline-offset: 3px; }
.stw-dealer-msg { font-size: 14px; color: var(--stw-muted); padding: 10px 0; }
.stw-dealer-msg--error { color: var(--stw-red); }
.stw-dealer-fallback { margin-top: 12px; font-size: 13px; }
.stw-dealer-fallback a { color: var(--stw-muted); text-underline-offset: 3px; }
.stw-dealer-fallback a:hover { color: var(--stw-ink); }

@media (max-width: 600px) {
  .stw-dealer-search__row { flex-direction: column; }
  .stw-dealer-search select, .stw-dealer-search .stw-btn { width: 100%; }

  /* Das PLZ-Feld MUSS hier mit zurueckgesetzt werden. Global steht darauf
     `flex: 1 1 190px` — sinnvoll in der Zeile nebeneinander, wo die 190px
     die Mindestbreite sind. Sobald der Container auf column dreht, bezieht
     sich flex-basis aber auf die HOEHE, und flex-grow:1 zieht das Feld auf
     die gesamte Resthoehe des Panels. Ergebnis war ein mehrere hundert
     Pixel hohes Eingabefeld (Screenshot Mike, 16.08.). */
  .stw-dealer-search input[type="text"] { flex: 0 0 auto; width: 100%; }

  /* Touch-Ziele: 44px ist die Mindestgroesse, unter der Treffsicherheit
     spuerbar abfaellt (Apple HIG / WCAG 2.5.5). Der Standort-Link war als
     13px-Textlink darunter kaum zu treffen. */
  .stw-dealer-search input[type="text"],
  .stw-dealer-search select,
  .stw-dealer-search .stw-btn { min-height: 48px; }
  .stw-dealer-search__geo {
    display: block; width: 100%;
    min-height: 44px; margin-top: 4px;
    font-size: 14px;
  }
  .stw-dealer-card { flex-direction: column; gap: 4px; }
  .stw-dealer-card__dist { flex-basis: auto; }
}

/* Sichtbarer, markeneigener Fokus statt des blauen Browser-Rings — der
   erschien im Screenshot als blaue Balken ober- und unterhalb des Feldes.
   :focus-visible statt :focus, damit Mausklicks keinen Ring hinterlassen,
   Tastatur- und Screenreader-Bedienung aber weiterhin sieht, wo sie ist. */
.stw-dealer-search input[type="text"]:focus-visible,
.stw-dealer-search select:focus-visible {
  outline: 2px solid var(--stw-red);
  outline-offset: 1px;
  border-color: var(--stw-red);
}


/* ============================================================
   COOKIE-BANNER -- Consent Mode v2 (partials/head.php + footer.php)
   Kategorien/Services (Bezeichner von Mike, 1:1 mit GTM zu spiegeln):
   necessary (immer an) | analytics: google_analytics, facebook_pixel
   | marketing: google_ads, rapidmail. Neuer Dienst? Checkbox hier +
   consent.service_<id>-i18n-Key + STW_CONSENT_SCHEMA in head.php.
   ============================================================ */
/* Badge, kein Vollbild-Bleed: sitzt komplett oberhalb der Karte, Unterkante
   des Bildes genau auf der Rahmenoberkante (transform translateY -100%,
   nicht -50% -- das Bild darf nicht in die Box hineinragen).
   .stw-cookiebanner ist position:fixed -- reicht als containing block.
   Bildhintergrund ist bereits transparent (PNG-Alpha, keine Fuellfarbe) --
   box-shadow wuerde trotzdem als rechteckiger "Schleier" um die komplette
   Bildbox erscheinen, weil box-shadow der Element-Box folgt, nicht dem
   Alphakanal. filter:drop-shadow() folgt der sichtbaren Silhouette (Bike),
   deshalb hier statt box-shadow. border-radius entfaellt aus demselben
   Grund -- es gibt kein sichtbares Rechteck mehr, das man runden koennte. */
.stw-cookiebanner__top {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  /* Quellbild hat oben ca. 50px Leerraum ueber dem Bike (400x267) --
     object-fit crop schneidet den weg, object-position:bottom haelt
     das Bike selbst unbeschnitten und schiebt es an die Rahmenkante. */
  aspect-ratio: 400 / 227;
  object-fit: cover;
  object-position: center bottom;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 10px rgba(15, 15, 13, 0.35));
  z-index: 2;
}
.stw-cookiebanner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 600;
  max-width: 440px;
  margin: 0 auto 0 0;
  background: var(--stw-paper);
  border: 1px solid var(--stw-line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 15, 13, 0.18);
  padding: 22px 24px;
  font-family: var(--stw-font-body);
  color: var(--stw-ink);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  pointer-events: none;
}
.stw-cookiebanner[data-state="visible"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.stw-cookiebanner__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--stw-muted);
  margin: 0 0 16px;
}
.stw-cookiebanner__text a {
  color: var(--stw-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.stw-cookiebanner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stw-cookiebanner__actions .stw-btn {
  flex: 1 1 auto;
  justify-content: center;
  font-size: 12.5px;
  padding: 11px 14px;
  white-space: nowrap;
}
/* .stw-btn--ghost ist fuer helle Schrift auf dunklem Hero-Hintergrund gedacht
   (siehe globale Regel); der Banner sitzt aber auf --stw-paper (hell) --
   eigene Kontrastregel nur hier, globale Definition bleibt unangetastet. */
.stw-cookiebanner .stw-btn--ghost {
  color: var(--stw-ink);
  border-color: var(--stw-line);
}
.stw-cookiebanner .stw-btn--ghost:hover {
  background: var(--stw-ink);
  color: var(--stw-paper);
}
.stw-cookiebanner__settings {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--stw-line);
  display: grid;
  gap: 12px;
}
.stw-cookiebanner__settings[hidden] { display: none; }
.stw-cookiebanner__cat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.stw-cookiebanner__cat input { margin-top: 3px; flex: none; }
.stw-cookiebanner__cat strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: .02em;
}
.stw-cookiebanner__cat small {
  display: block;
  color: var(--stw-muted);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 2px;
}
.stw-cookiebanner__category {
  display: grid;
  gap: 8px;
}
.stw-cookiebanner__category-head { margin: 0; }
.stw-cookiebanner__category-head strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: .02em;
}
.stw-cookiebanner__category-head small {
  display: block;
  color: var(--stw-muted);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 2px;
}
.stw-cookiebanner__service {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding-left: 4px;
  cursor: pointer;
}
.stw-cookiebanner__service input { flex: none; }
/* Reopen-Trigger: Icon von Mike (grafik About header/cookie-banner.png),
   rund mit Schatten -- muss auf jedem Hero-Hintergrund lesbar bleiben. */
.stw-consent-reopen {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 590;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stw-paper);
  border: 1px solid var(--stw-line);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(15, 15, 13, 0.16);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.stw-consent-reopen img { width: 24px; height: 24px; display: block; }
.stw-consent-reopen:hover { opacity: 1; transform: translateY(-2px); }
.stw-cookiebanner[data-state="visible"] ~ .stw-consent-reopen { display: none; }
@media (max-width: 640px) {
  .stw-cookiebanner { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px; }
  .stw-cookiebanner__top { width: 110px; }
  .stw-consent-reopen { left: 12px; bottom: 12px; }
}

/* ============================================================
   EVENTS -- Uebersicht (events.php) + Detailseite (event-template.php).
   Eigene Komponenten im bestehenden Designsystem (--stw-paper/--stw-ink/
   --stw-red/--stw-forest, Thunder/BDOGrotesk, .stw-eyebrow/.stw-btn) --
   bewusst NICHT die Website-Blog-CSS uebernommen, damit der Lineup-2027-
   Look erhalten bleibt.
   ============================================================ */
/* .stw-events-hero (heller Textblock) wurde am 16.08. durch den Video-Hero
   ersetzt — events.php nutzt jetzt .stw-support-hero.stw-hero-video, dieselbe
   Bühne wie community.php. Die Regeln sind entfernt statt auskommentiert:
   sie standen sonst als toter Code herum und hätten beim nächsten Lesen den
   Eindruck erweckt, es gäbe zwei konkurrierende Hero-Varianten. */

.stw-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  padding: 20px 0 100px;
}
.stw-event-card {
  display: block;
  background: #fff;
  border: 1px solid var(--stw-line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stw-event-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,15,13,.08); }
.stw-event-card__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.stw-event-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.stw-ai-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(15,15,13,.72); backdrop-filter: blur(2px);
  padding: 5px 9px; border-radius: 999px; font-weight: 600;
}
.stw-ai-badge--hero { left: auto; right: clamp(20px,4vw,60px); bottom: clamp(24px,4vw,48px); font-size: 11px; }
.stw-event-card:hover .stw-event-card__image img { transform: scale(1.04); }
.stw-event-card__body { padding: 22px 24px 26px; }
.stw-event-tag {
  display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stw-forest); background: rgba(46,70,53,.08); padding: 5px 10px; border-radius: 999px;
  margin-bottom: 14px;
}
.stw-event-date { display: block; font-family: var(--stw-font-display); font-size: 16px; color: var(--stw-red); margin-bottom: 3px; }
.stw-event-card__title { font-size: clamp(22px, 2vw, 28px); margin: 0 0 6px; }
.stw-event-location { display: block; font-size: 13px; color: var(--stw-muted); margin-bottom: 12px; }
.stw-event-card__desc { font-size: 14px; line-height: 1.55; color: var(--stw-muted); margin-bottom: 18px; }
.stw-event-card__cta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--stw-ink); }
.stw-event-card__cta svg { transition: transform .2s ease; }
.stw-event-card:hover .stw-event-card__cta svg { transform: translateX(4px); }
.stw-event-card.is-placeholder {
  background: transparent; border: 1px dashed var(--stw-line);
  display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-height: 200px;
}
.stw-event-card.is-placeholder p { color: var(--stw-muted); font-size: 14px; text-align: center; margin: 0; }

/* ── Detailseite ──────────────────────────────────────────────*/
.stw-event-hero { position: relative; height: clamp(320px, 45vw, 520px); overflow: hidden; margin-top: var(--stw-sticky-offset); }
.stw-event-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stw-event-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,13,0) 40%, rgba(15,15,13,.75) 100%);
}
.stw-event-hero__label { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px,4vw,48px) clamp(20px,4vw,60px); }
.stw-event-hero__title { color: #fff; font-size: clamp(40px, 6vw, 72px); margin: 6px 0 0; }

.stw-event-detail-head { padding: 48px 0 20px; background: var(--stw-paper); }
.stw-event-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--stw-muted); margin-bottom: 22px; }
.stw-event-back-link:hover { color: var(--stw-ink); }
.stw-event-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 32px; }
.stw-event-info-box { border-top: 2px solid var(--stw-ink); padding-top: 12px; }
.stw-event-info-box__label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stw-muted); margin-bottom: 6px; }
.stw-event-info-box__value { display: block; font-family: var(--stw-font-display); font-size: 21px; margin-bottom: 4px; }
.stw-event-info-box__sub { display: block; font-size: 12.5px; color: var(--stw-muted); }

.stw-event-body-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 6vw, 90px); }
.stw-event-body-text p { margin-bottom: 18px; font-size: 16px; line-height: 1.65; color: var(--stw-ink); }
.stw-event-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.stw-event-cta-row .stw-btn.is-ghost {
  background: transparent; color: var(--stw-ink); border: 1px solid var(--stw-line);
}
.stw-event-cta-row .stw-btn.is-ghost:hover { background: var(--stw-ink); color: #fff; border-color: var(--stw-ink); }
.stw-event-sidebar { border-left: 1px solid var(--stw-line); padding-left: clamp(24px, 3vw, 40px); }
.stw-event-sidebar h4 { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }
.stw-event-highlights { list-style: none; margin: 0 0 34px; padding: 0; }
.stw-event-highlights li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--stw-ink); }
.stw-event-highlights li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  background: var(--stw-red); border-radius: 50%;
}
.stw-event-sidebar__block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--stw-line); }
.stw-event-sidebar__block p { font-size: 14px; line-height: 1.6; color: var(--stw-muted); }
.stw-event-sidebar__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--stw-ink); margin-top: 12px; }

@media (max-width: 900px) {
  .stw-event-body-grid { grid-template-columns: 1fr; }
  .stw-event-sidebar { border-left: 0; border-top: 1px solid var(--stw-line); padding-left: 0; padding-top: 28px; margin-top: 8px; }
}
@media (max-width: 640px) {
  .stw-events-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   ORBIT-BUTTON — B2B SUPPORT PORTAL
   Einstieg ins Zammad-Ticketsystem, rechts unten im Hero.
   Markup und Masse 1:1 aus der Hauptseite (steppenwolf-home.css),
   damit Landingpage und Website denselben Einstieg zeigen.
   Ziel ist hier die externe Portal-URL, nicht das lokale b2b/.
   ══════════════════════════════════════════════ */
.stw-orbit-btn {
  position: absolute;
  bottom: 52px;
  right: clamp(24px, 4vw, 72px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  text-decoration: none;
  /* immer hell — der Hero-Shade darunter ist dunkel */
  color: rgba(255, 255, 255, 0.92);
  /* Das Hero-Video wird unten rechts stellenweise sehr hell (Staub),
     deshalb ein weicher Schatten als Lesbarkeitsreserve. */
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
  transition: color 0.25s ease;
}
.stw-orbit-btn:hover,
.stw-orbit-btn:focus-visible {
  color: var(--stw-red);
}

/* Rotierender Textring */
.stw-orbit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: stw-orbit-spin 12s linear infinite;
  will-change: transform;
}
.stw-orbit-ring text {
  font-family: inherit;
  /* Auf einen Durchlauf abgestimmt: fuellt den Umfang, ohne zu ueberlaufen.
     Achtung: das ist keine Pixelgroesse, sondern SVG-Nutzereinheiten der
     viewBox. Der Ring skaliert ueber width/height ohnehin mit dem Button —
     dieser Wert darf in den Media Queries deshalb NICHT mitverkleinert
     werden, sonst schrumpft der Text doppelt und fuellt den Kreis nicht. */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  fill: currentColor;
  text-transform: uppercase;
}

/* Wolfskopf mittig */
.stw-orbit-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  pointer-events: none;
}
.stw-orbit-icon svg { width: 100%; height: 100%; }

@keyframes stw-orbit-spin {
  to { transform: rotate(360deg); }
}
.stw-orbit-btn:hover .stw-orbit-ring {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .stw-orbit-ring { animation: none; }
}

/* Nur die Box schrumpft — der Ringtext skaliert ueber die viewBox mit. */
@media (max-width: 1200px) {
  .stw-orbit-btn { width: 76px; height: 76px; bottom: 40px; }
  .stw-orbit-icon { width: 30px; height: 30px; }
}
@media (max-width: 768px) {
  /* Auf Mobil sitzt mittig der Scroll-Cue — Button hoeher setzen,
     damit sich beide nicht ins Gehege kommen. */
  .stw-orbit-btn { width: 62px; height: 62px; bottom: 84px; right: 20px; }
  .stw-orbit-icon { width: 24px; height: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   COMMUNITY — #YOUTUBE / #WOLFPACK / #MEDIA
   Datenquelle: /data/*.json, gepflegt ueber /admin/
   ══════════════════════════════════════════════════════════════════ */

.stw-community-jump {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 34px 0 6px;
}
.stw-community-jump a {
  font-family: var(--stw-font-display);
  font-size: 13px; letter-spacing: .08em;
  color: var(--stw-ink);
  border: 1px solid var(--stw-line);
  padding: 8px 16px; border-radius: 999px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.stw-community-jump a:hover {
  background: var(--stw-ink); border-color: var(--stw-ink); color: var(--stw-paper);
}

.stw-community-section { padding: clamp(56px, 7vw, 96px) 0; }
.stw-community-section--alt { background: rgba(15,15,13,.03); }

.stw-community-head { margin-bottom: clamp(28px, 4vw, 44px); }
.stw-community-head h2 {
  font-family: var(--stw-font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.stw-community-head p { color: var(--stw-muted); max-width: 60ch; }

.stw-community-empty {
  color: var(--stw-muted); font-style: italic;
  padding: 28px 0; border-top: 1px solid var(--stw-line);
}
.stw-community-more { display: flex; justify-content: center; margin-top: 36px; }

/* ── #YOUTUBE ─────────────────────────────────────────────────────
   Vier Karten pro Reihe. Kein Embed, nur Vorschaubild + Link:
   so setzt YouTube keine Cookies und die Sektion braucht kein Consent. */
.stw-yt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.stw-yt-card { display: block; color: inherit; }
.stw-yt-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 4px;
  background: var(--stw-dark);
}
.stw-yt-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
.stw-yt-card__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.stw-yt-play-bg { fill: rgba(15,15,13,.72); transition: fill .3s ease; }
.stw-yt-card:hover .stw-yt-card__media img { transform: scale(1.06); filter: brightness(.82); }
.stw-yt-card:hover .stw-yt-card__play { transform: scale(1.12); }
.stw-yt-card:hover .stw-yt-play-bg { fill: var(--stw-red); }

.stw-yt-card__body { display: block; padding: 14px 2px 0; }
.stw-yt-card__title {
  display: block; font-weight: 600; line-height: 1.35;
  /* zwei Zeilen, danach Ellipse — sonst reissen lange Titel das Raster auf */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.stw-yt-card__author {
  display: block; margin-top: 5px;
  font-size: 13px; color: var(--stw-muted);
}

/* ── #WOLFPACK ────────────────────────────────────────────────────
   Sechs Portraits pro Reihe. */
.stw-pack-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.stw-pack-card { text-align: center; }
.stw-pack-card__portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--stw-dark-2, #1d201e);
  margin-bottom: 14px;
}
.stw-pack-card__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.stw-pack-card:hover .stw-pack-card__portrait img { transform: scale(1.05); }
.stw-pack-card__initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--stw-font-display); font-size: 34px;
  color: var(--stw-paper); opacity: .5;
}
.stw-pack-card__name {
  font-family: var(--stw-font-display);
  font-size: 17px; margin-bottom: 6px;
}
.stw-pack-card__text {
  font-size: 13px; line-height: 1.5; color: var(--stw-muted);
  margin-bottom: 10px;
}
.stw-pack-card__link {
  font-size: 13px; color: var(--stw-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color .2s ease;
}
.stw-pack-card__link:hover { color: var(--stw-red); }

/* ── #MEDIA ───────────────────────────────────────────────────────
   Drei Beitraege pro Reihe: Bild, Quelle, Titel, Auszug. */
.stw-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.stw-media-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--stw-line);
  color: inherit; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stw-media-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,15,13,.09); }
.stw-media-card__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.stw-media-card__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.stw-media-card:hover .stw-media-card__image img { transform: scale(1.04); }
.stw-media-card__body { display: block; padding: 20px 22px 24px; }
.stw-media-card__source {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stw-red); margin-bottom: 8px;
}
.stw-media-card__title {
  display: block; font-family: var(--stw-font-display);
  font-size: 19px; line-height: 1.3; margin-bottom: 8px;
}
.stw-media-card__excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px; line-height: 1.55; color: var(--stw-muted);
  margin-bottom: 14px;
}
.stw-media-card__cta { display: block; font-size: 13px; font-weight: 600; }

/* ── Einreichungsformular ─────────────────────────────────────────*/
.stw-community-submit { max-width: 760px; }
.stw-community-submit .stw-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.stw-community-submit .stw-form-field { margin-bottom: 18px; }
.stw-community-submit label { display: block; font-size: 14px; margin-bottom: 7px; }
.stw-community-submit input[type=text],
.stw-community-submit input[type=email],
.stw-community-submit input[type=url],
.stw-community-submit select,
.stw-community-submit textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--stw-line); background: #fff;
  font-family: var(--stw-font-body); font-size: 15px;
  border-radius: 3px;
}
.stw-community-submit input:focus,
.stw-community-submit select:focus,
.stw-community-submit textarea:focus {
  outline: none; border-color: var(--stw-ink);
}
.stw-community-submit .stw-form-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; font-size: 13px; line-height: 1.5;
}
.stw-community-submit .stw-form-check input { margin-top: 3px; flex-shrink: 0; }
.stw-community-submit .stw-form-check label { margin: 0; font-size: 13px; }
/* Honeypot: unsichtbar, aber nicht display:none (manche Bots ignorieren das) */
.stw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Responsive ───────────────────────────────────────────────────*/
@media (max-width: 1200px) {
  .stw-pack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .stw-yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stw-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .stw-yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stw-pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stw-media-grid { grid-template-columns: 1fr; }
  .stw-community-submit .stw-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  .stw-yt-grid { grid-template-columns: 1fr; }
  .stw-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zahnrad zum Redaktions-Backend im Footer — bewusst zurueckhaltend:
   Besucher sollen es nicht als Navigationsziel wahrnehmen. */
.stw-admin-cog {
  display: inline-flex; align-items: center;
  margin-left: auto;
  opacity: .35;
  transition: opacity .2s ease, transform .3s ease;
}
.stw-admin-cog:hover { opacity: .9; transform: rotate(60deg); }

/* Rolle unter dem Namen im Wolfpack */
.stw-pack-card__role {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stw-red); margin: -2px 0 8px;
}

/* Archiv „Back in the days" — aufklappbar unter YouTube und Media.
   <details> statt JS: funktioniert ohne Skript und ist von Haus aus
   tastaturbedienbar. */
.stw-archive { margin-top: 40px; border-top: 1px solid var(--stw-line); }
.stw-archive > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 2px;
  font-family: var(--stw-font-display);
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stw-muted);
  transition: color .2s ease;
}
.stw-archive > summary::-webkit-details-marker { display: none; }
.stw-archive > summary::after {
  content: "+"; margin-left: 4px; font-size: 18px; line-height: 1;
  transition: transform .25s ease;
}
.stw-archive[open] > summary::after { content: "–"; }
.stw-archive > summary:hover { color: var(--stw-ink); }
.stw-archive__count {
  font-family: var(--stw-font-body); font-size: 11px;
  border: 1px solid var(--stw-line); border-radius: 999px;
  padding: 2px 9px; line-height: 1.5;
}
.stw-archive__grid { padding: 6px 0 26px; }
/* Archiv-Inhalte dezenter als die aktuellen Beitraege */
.stw-archive__grid .stw-yt-card,
.stw-archive__grid .stw-media-card { opacity: .78; transition: opacity .2s ease; }
.stw-archive__grid .stw-yt-card:hover,
.stw-archive__grid .stw-media-card:hover { opacity: 1; }

/* Bildquelle auf Media-Karten — klein, aber lesbar (Pflichtangabe bei
   fremdem Bildmaterial). */
.stw-media-card__image { position: relative; }
.stw-media-card__credit {
  position: absolute; right: 0; bottom: 0;
  background: rgba(15,15,13,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: 10px; letter-spacing: .02em;
  padding: 3px 8px; border-top-left-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   B2B SUPPORT — Ticketformular im Seitenlayout (b2bsupport.php).
   Nutzt bewusst dieselben Feld-Styles wie das Community-Formular,
   damit beide Formulare gleich aussehen und sich gleich anfuehlen.
   ══════════════════════════════════════════════════════════════════ */
.stw-support { max-width: 1100px; }
.stw-support__legend {
  font-family: var(--stw-font-display);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stw-muted);
  padding-bottom: 10px; margin: 38px 0 20px;
  border-bottom: 1px solid var(--stw-line);
}
.stw-support__legend:first-of-type { margin-top: 0; }

.stw-support .stw-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.stw-support .stw-form-row--three { grid-template-columns: repeat(3, 1fr); }
.stw-support .stw-form-field { margin-bottom: 18px; }
.stw-support label { display: block; font-size: 14px; margin-bottom: 7px; }
.stw-support .req { color: var(--stw-red); }
.stw-field-help { font-size: 13px; color: var(--stw-muted); margin: 0 0 8px; }

.stw-support input[type=text],
.stw-support input[type=email],
.stw-support input[type=tel],
.stw-support input[type=number],
.stw-support select,
.stw-support textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--stw-line); background: #fff;
  font-family: var(--stw-font-body); font-size: 15px; color: var(--stw-ink);
  border-radius: 3px;
}
.stw-support input:focus,
.stw-support select:focus,
.stw-support textarea:focus {
  outline: none; border-color: var(--stw-ink);
}
.stw-support textarea { resize: vertical; }

.stw-support input[type=file] {
  width: 100%; font-family: var(--stw-font-body); font-size: 14px;
  padding: 12px 14px; background: #fff;
  border: 1px dashed var(--stw-line); border-radius: 3px;
}
.stw-support__files { list-style: none; padding: 0; margin: 10px 0 0; }
.stw-support__files li {
  font-size: 13px; color: var(--stw-muted);
  padding: 5px 0; border-bottom: 1px solid var(--stw-line);
}

.stw-support .stw-form-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0 24px; font-size: 13px; line-height: 1.5;
}
.stw-support .stw-form-check input { margin-top: 3px; flex-shrink: 0; }
.stw-support .stw-form-check label { margin: 0; font-size: 13px; }

.stw-support .stw-form-msg { margin-top: 16px; font-size: 14px; display: none; }
.stw-support .stw-form-msg.is-ok      { color: var(--stw-forest); display: block; }
.stw-support .stw-form-msg.is-err     { color: var(--stw-red); display: block; }
.stw-support .stw-form-msg.is-pending { color: var(--stw-muted); display: block; }
.stw-support button[disabled] { opacity: .55; cursor: default; }

@media (max-width: 767px) {
  .stw-support .stw-form-row,
  .stw-support .stw-form-row--three { grid-template-columns: 1fr; gap: 0; }
}

/* Formular + Bildspalte nebeneinander */
.stw-support__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.stw-support__main { min-width: 0; }
.stw-support__aside .stw-support__legend { margin-top: 0; }

.stw-support__shot { margin: 0 0 26px; }
/* Die drei Produktbilder sind echte PNG-Freisteller mit Alpha-Kanal.
   Frueher lag hier ein `mix-blend-mode: multiply`-Trick, der das Weiss der
   JPGs in den Seitenhintergrund einrechnete. Der war doppelt fragil:
   Blending wirkt nur innerhalb des eigenen Stacking-Contexts, und sobald ein
   Elternteil animiert wird (opacity/transform/will-change promoten das
   Element auf eine eigene Compositor-Ebene), setzt der Blend aus — waehrend
   des Scroll-Reveals kam das Weiss zurueck. Mit echtem Alpha entfaellt das
   Problem ersatzlos: die Bilder liegen auf jedem Untergrund richtig.
   Also NICHT wieder mix-blend-mode einfuehren. */
.stw-support__shot img {
  width: 100%; height: auto;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.3,1),
              filter .55s cubic-bezier(.2,.7,.3,1);
}
/* Hover: Bild kommt leicht entgegen und gewinnt an Tiefe, die Bildunterschrift
   wechselt auf Textfarbe. Kein Schatten/Rahmen — das wuerde den
   Freisteller-Eindruck zerstoeren, den multiply gerade erzeugt. */
.stw-support__shot:hover img {
  transform: scale(1.06) translateY(-4px);
  filter: contrast(1.06) saturate(1.08);
}
.stw-support__shot figcaption {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stw-muted); margin-top: 6px;
  transition: color .35s ease;
}
.stw-support__shot:hover figcaption { color: var(--stw-ink); }

/* ── Scroll-Reveal für Unterseiten ────────────────────────────────────────
   Die Startseite macht ihre Reveals mit GSAP ScrollTrigger (.fade-anim).
   Unterseiten laden den GSAP-Stack bewusst NICHT (siehe partials/scripts.php),
   brauchen aber trotzdem ein Einschweben. Deshalb hier eine schlanke Variante
   auf IntersectionObserver-Basis: gleiche Anmutung, ~15 Zeilen JS, kein Vendor.

   Sichtbarkeit ist an `.stw-js` gekoppelt (setzt das Snippet selbst). Ohne
   JavaScript greift die Startregel nie und der Inhalt steht normal da —
   ein verstecktes Element, das mangels JS nie eingeblendet wird, wäre der
   schlimmste Fall. */
.stw-js .stw-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1),
              transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--stw-reveal-delay, 0s);
  will-change: opacity, transform;
}
.stw-js .stw-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Nach dem Einblenden aufräumen: will-change dauerhaft stehen zu lassen,
   kostet unnötig Compositor-Speicher. */
.stw-js .stw-reveal.is-done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .stw-js .stw-reveal { opacity: 1; transform: none; transition: none; }
  .stw-support__shot img,
  .stw-support__shot figcaption { transition: none; }
  .stw-support__shot:hover img { transform: none; filter: none; }
}

@media (max-width: 900px) {
  .stw-support__layout { grid-template-columns: 1fr; }
  .stw-support__aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .stw-support__aside .stw-support__legend { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .stw-support__aside { grid-template-columns: 1fr 1fr; }
}

/* Wolfskopf als Wasserzeichen unten rechts — identisch zum Haendler-Bereich
   (/b2b/). Die Maske faerbt eine Flaeche in --stw-ink ein, statt ein Bild zu
   laden: so bleibt die Farbe an das Theme gekoppelt. */
.stw-support-section {
  position: relative;
  overflow: hidden;
}
.stw-support-section::after {
  content: ""; position: absolute; right: -9vw; bottom: 0;
  width: min(92vw, 1200px); height: min(53vw, 697px);
  background: var(--stw-ink); opacity: .045; pointer-events: none;
  -webkit-mask: url("../steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
  mask: url("../steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
}
/* Inhalt ueber dem Wasserzeichen halten */
.stw-support-section > .stw-container { position: relative; z-index: 1; }

/* Hero der B2B-Support-Seite: Bild vollflaechig, Text in Weiss darauf. */
.stw-support-hero {
  position: relative;
  min-height: min(58vh, 520px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--stw-dark);
}
.stw-support-hero__media { position: absolute; inset: 0; z-index: 0; }
.stw-support-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  display: block;
}
/* Verlauf von unten: haelt die Schrift lesbar, ohne das Bild zuzukleistern. */
.stw-support-hero__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(17,19,18,.78) 0%, rgba(17,19,18,.34) 42%, rgba(17,19,18,.10) 100%);
}
.stw-support-hero__content {
  position: relative; z-index: 2;
  padding-top: clamp(48px, 7vw, 90px);
  padding-bottom: clamp(38px, 5vw, 70px);
}
.stw-support-hero__content .stw-eyebrow { color: rgba(244,242,236,.72); }
.stw-support-hero__content h1 {
  color: var(--stw-paper);
  font-size: clamp(40px, 5vw, 64px);
  margin: 10px 0 16px;
}
.stw-support-hero__intro {
  color: rgba(244,242,236,.82);
  font-size: 16px; line-height: 1.55; max-width: 560px;
}

/* KI-Kennzeichnung im Hero und Intro-Text teilen sich die untere Kante.
   Auf schmalen Displays kollidieren sie: das Badge (.stw-ai-badge--hero)
   sitzt bei bottom:24px und ist rund 22px hoch, reicht also bis 46px —
   der Intro-Text endet mit padding-bottom:38px aber darunter. Ergebnis:
   das Label liegt auf der letzten Textzeile.
   Auf dem Desktop passiert das nicht, weil beide clamp()-Werte dort weit
   auseinanderlaufen und der Text nur 560px breit ist, das Badge aber ganz
   rechts sitzt. Nur mobil nachziehen, damit das Label frei steht — eine
   überdeckte Kennzeichnung wäre nach EU AI Act Art. 50 keine. */
@media (max-width: 767px) {
  .stw-support-hero__content { padding-bottom: 78px; }
}

/* Video im Hero (Community) — gleiche Buehne wie das Bild-Hero */
.stw-support-hero__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.stw-hero-video { min-height: min(62vh, 560px); }