/**
 * NEPTUN — STARTSEITE v2 (stärkere Dramaturgie)
 * Ergänzt 07-homepage.css, ersetzt nichts. Neue Bausteine: horizontaler
 * Modell-Scroller, Reveal-on-Scroll, animierte Kennzahlen, Sticky-Finder-CTA.
 * Bewegung ausschließlich dort, wo sie Orientierung/Aufmerksamkeit lenkt —
 * kein Effekt ohne Zweck. prefers-reduced-motion wird respektiert.
 */

/* ---------- Reveal-on-Scroll ----------
   Startzustand nur, wenn JS läuft (Klasse wird per JS gesetzt) — ohne JS
   oder bei reduced-motion ist der Inhalt sofort sichtbar, nie verborgen. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Gestaffeltes Erscheinen innerhalb eines Rasters.
   Bewusst an .reveal gekoppelt: nur Raster INNERHALB eines Reveal-Abschnitts
   starten unsichtbar. Läge ein Raster außerhalb, blieben seine Kacheln sonst
   dauerhaft unsichtbar, weil niemand is-visible setzen würde.
   Der Index kommt aus homepage.js, die Verzögerung bleibt klein — 60 ms je
   Kachel und gedeckelt, damit die letzte nicht spürbar hinterherhinkt. */
/* Bewegt wird über die eigenständige Eigenschaft translate, NICHT über
   transform: die Karten benutzen transform bereits für ihren Hover-Effekt,
   und diese Regel hier ist spezifischer — sie würde den Hover sonst
   überschreiben. translate und transform wirken unabhängig voneinander. */
.reveal [data-stagger] > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.5s var(--ease-standard), translate 0.5s var(--ease-standard);
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}
.reveal.is-visible [data-stagger] > * {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal [data-stagger] > *,
  .reveal.is-visible [data-stagger] > * { opacity: 1; translate: none; transition: none; transition-delay: 0s; }
}

/* ---------- Hero v2 — größer, mit Scroll-Cue ---------- */
.hero--v2 { padding-block: clamp(3rem, 8vw, var(--space-4xl)); }
.hero--v2 .hero__lede { font-size: var(--fs-body-l); }
.hero__scroll-cue {
  display: flex; align-items: center; gap: var(--space-xs);
  /* Wächst mit dem Platz mit: auf dem Telefon drückte der feste Wert den
     Hinweis unnötig weit von den Schaltflächen weg. */
  margin-top: clamp(var(--space-xl), 5vw, var(--space-3xl));
  font-family: var(--font-data); font-size: var(--fs-caption);
  color: var(--neptun-steel-400);
}
.hero__scroll-cue::after {
  content: "";
  width: 1px; height: 28px;
  background: linear-gradient(var(--neptun-orange), transparent);
}

/* Kennzahlen animiert hochzählen lassen (Wert per data-count-to, JS füllt) */
.data-block__value[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---------- Modellwelten — horizontaler Scroller ---------- */
/* Höchstwert = bisheriger fester Wert, Desktop bleibt unverändert. */
.model-worlds { background: var(--neptun-graphite-950); color: var(--color-text-on-dark); padding-block: clamp(2.75rem, 7vw, var(--space-4xl)); }
.model-worlds .section__head p { color: var(--neptun-steel-300); }
.model-scroller {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-m);
  margin: 0 calc(-1 * var(--content-padding-inline));
  padding-inline: var(--content-padding-inline);
  scrollbar-width: thin;
  scrollbar-color: var(--neptun-graphite-600) transparent;
}
.model-scroller::-webkit-scrollbar { height: 6px; }
.model-scroller::-webkit-scrollbar-thumb { background: var(--neptun-graphite-600); border-radius: var(--radius-full); }

/* Die Karte ist ein Link auf die gefilterte Anhängerübersicht. Als <a> statt
   <div>: die gesamte Fläche ist damit klickbar, per Tastatur erreichbar und
   für Screenreader als Link angekündigt — ohne eine Zeile JavaScript. */
.model-world-card {
  display: block;
  flex: 0 0 auto;
  width: min(320px, 78vw);
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.model-world-card:hover,
.model-world-card:focus-visible { border-color: var(--neptun-orange); transform: translateY(-4px); color: inherit; }

/* Sichtbarer Fokusrahmen für die Tastaturbedienung. */
.model-world-card:focus-visible {
  outline: 2px solid var(--neptun-orange);
  outline-offset: 3px;
}

/* Bilder nicht als Ziehobjekt anbieten — beim seitlichen Wischen im Carousel
   würde sonst das Bild „mitgenommen" statt gescrollt. */
.model-world-card__media img { -webkit-user-drag: none; user-select: none; }

/* Handlungsaufforderung, damit die Klickbarkeit sofort erkennbar ist.
   Standardmäßig zurückgenommen, beim Überfahren in Akzentfarbe. */
.model-world-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  color: var(--neptun-steel-300);
  transition: color var(--duration-fast) var(--ease-standard);
}
.model-world-card:hover .model-world-card__cta,
.model-world-card:focus-visible .model-world-card__cta { color: var(--neptun-orange); }

@media (prefers-reduced-motion: reduce) {
  .model-world-card { transition: border-color var(--duration-fast) var(--ease-standard); }
  .model-world-card:hover, .model-world-card:focus-visible { transform: none; }
}
/* 3:2 statt vorher 4:3 — das ist das Format, in dem die Serienaufnahmen
   geliefert wurden (1536×1024 bzw. 1506×1045). Bei 4:3 hätte object-fit:cover
   seitlich 3,7–5,6 % abgeschnitten, und genau dort sitzt auf jedem Motiv die
   Anhängerkupplung: sie wäre auf allen Karten angeschnitten gewesen. Mit 3:2
   fällt bei den 1536×1024-Bildern gar nichts weg, bei den 1506×1045-Bildern
   nur ~2 % leerer Studiohintergrund oben und unten.
   Das feste Seitenverhältnis reserviert den Platz vor dem Laden des Bildes —
   deshalb entsteht kein Layout-Shift. Die Bildfläche wird dadurch nicht
   höher, sondern etwas flacher; Kartenbreite und alles Übrige bleiben. */
.model-world-card__media { aspect-ratio: 3/2; overflow: hidden; }
.model-world-card__body { padding: var(--space-l); }
.model-world-card__eyebrow { font-family: var(--font-data); font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--neptun-steel-400); margin-bottom: var(--space-xs); }
.model-world-card__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-l); margin-bottom: var(--space-xs); }
.model-world-card__count { font-size: var(--fs-caption); color: var(--neptun-steel-300); }

.model-scroller-hint { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-l); font-size: var(--fs-caption); color: var(--neptun-steel-400); }
@media (min-width: 900px) { .model-scroller-hint { display: none; } }

/* ---------- Einsatzzweck-Cards ----------
   Die frühere Variante --v2 legte einen dunklen Verlauf über das Bild und
   setzte den Text darauf. Das kostete Bildfläche, machte den Text vom
   jeweiligen Motiv abhängig und wirkte je nach Aufnahme unterschiedlich
   kontrastreich. Die Kachel trennt jetzt Bild und Text sauber; die
   zugehörigen Regeln stehen vollständig in 07-homepage.css. */

/* ---------- PRODUKTMOMENT ----------
   Der eine stark inszenierte Abschnitt der Startseite: Modell auf dunkler
   Bühne, daneben die Einordnung, darunter die echten Werte. Volle Breite,
   damit die Bühne wirken kann; der Lesetext bleibt in einer ruhigen Spalte. */
.produktmoment {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  padding-block: clamp(2.75rem, 7vw, var(--space-4xl));
}
.produktmoment__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  margin-bottom: clamp(var(--space-xl), 4vw, var(--space-2xl));
}
@media (max-width: 899px) {
  .produktmoment__grid { grid-template-columns: 1fr; }
  /* Auf schmalen Geräten steht das Produkt oben — es ist die Aussage. */
  .produktmoment__buehne { order: -1; }
}

.produktmoment__lede {
  color: var(--neptun-steel-200);
  font-size: var(--fs-body-l);
  max-width: 44ch;
  margin-block: var(--space-m) var(--space-xl);
}
.produktmoment__modell {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--space-m);
  border-left: 2px solid var(--neptun-orange);
  margin-bottom: var(--space-xl);
}
.produktmoment__serie {
  font-family: var(--font-data); font-size: var(--fs-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--neptun-steel-400);
}
.produktmoment__name { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); color: #fff; }
.produktmoment__sku { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }

.produktmoment .buehne {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
}
@media (max-width: 599px) { .produktmoment .buehne { aspect-ratio: 4 / 3; } }

/* ---------- Sticky Finder-Einstieg (nach dem Hero) ---------- */
.sticky-finder-cta {
  position: fixed;
  right: var(--space-l);
  bottom: var(--space-l);
  z-index: var(--z-header);
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.sticky-finder-cta.is-visible { display: block; opacity: 1; transform: translateY(0); }
.sticky-finder-cta .btn { box-shadow: var(--shadow-l); }
@media (prefers-reduced-motion: reduce) { .sticky-finder-cta { transition: none; } }

/* ---------- Große Bild/Text-Komposition (z. B. Zubehör-Teaser, dunkel) ---------- */