/**
 * NEPTUN DESIGN SYSTEM — HOMEPAGE (Phase 3)
 * Nutzt ausschließlich Tokens/Komponenten aus 00–04. Keine neuen Farben,
 * keine neuen Radien — nur Layout für die homepage-spezifischen Abschnitte.
 */

/* Die Grundbausteine .section / .section__head liegen seit 09/2026 in
   02-components.css. Grund: diese Datei wird ausschließlich auf der
   Startseite geladen, die Klassen werden aber auf nahezu jeder Seite
   verwendet (Anhänger- und Zubehörarchiv, Finder, Händler, Kontakt …).
   Dort hatten die Abschnitte dadurch überhaupt keine vertikalen Abstände. */

/* ---------- HERO ---------- */
.hero {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  padding-block: var(--space-3xl) var(--space-4xl);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  /* Etwas mehr Raum für das Produkt als vorher (0.92fr): der Anhänger darf
     wirken, bleibt aber schmaler als der Textblock. align-items: center legt
     Textblock und Produkt auf dieselbe optische Mittelachse. */
  grid-template-columns: 1fr 1.04fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
}
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-2xl); } }

.hero__eyebrow { font-size: var(--fs-body-s); color: var(--neptun-steel-300); margin-bottom: var(--space-m); max-width: 52ch; }
/* text-wrap: balance verteilt die Zeilen der Überschrift gleichmäßig, statt
   ein einzelnes Wort allein auf die letzte Zeile zu setzen. Browser ohne
   Unterstützung brechen wie bisher um — kein Nachteil. */
.hero h1 { color: #fff; margin-bottom: var(--space-l); text-wrap: balance; }
.hero__lede { color: var(--neptun-steel-200); font-size: var(--fs-body-l); margin-bottom: var(--space-xl); max-width: 46ch; text-wrap: pretty; }
.hero__ctas { display: flex; gap: var(--space-m); flex-wrap: wrap; align-items: center; }

/* ---------- HERO-PRODUKTBILD ----------
   Neu aufgebaut (09/2026), damit im Backend jedes beliebige Anhängerbild
   gewählt werden kann, ohne dass danach CSS angepasst werden muss.

   Was vorher das Problem war:
   - object-fit: cover auf einem festen Seitenverhältnis 4:3,4 — jedes Bild
     mit anderem Format wurde beschnitten, bei freigestellten Anhängern
     fehlten dadurch Deichsel oder Räder.
   - clip-path + overflow: hidden auf demselben Element, das auch den
     Orange-Schein trug. Der Schein wurde am Rand hart abgeschnitten und sah
     dadurch aus wie ein rechteckiger Bildhintergrund.

   Jetzt:
   - object-fit: contain, das Bild wird also vollständig gezeigt, nie
     verzerrt und nie beschnitten.
   - Der Container gibt nur noch den PLATZ vor (Seitenverhältnis mit
     Höhenbegrenzung), nicht mehr den Ausschnitt.
   - Schein und Bodenschatten sind eigene, nicht beschnittene Ebenen und
     laufen weich ins Schwarz des Heros aus — keine sichtbare Kante mehr. */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  /* Die Bühne gibt den Platz vor, nie das Bild. Ein leicht queres Verhältnis
     passt zu Produktfotografie von Anhängern und lässt hochformatigen Bildern
     trotzdem genug Höhe. Die Begrenzungen verhindern, dass ein Bild den Hero
     aufbläht oder zusammenfallen lässt. */
  aspect-ratio: 4 / 3;
  min-height: 300px;
  max-height: 56vh;
  /* Sicherheitsabstand ringsum: der Anhänger stößt nie an eine Kante,
     unabhängig vom Bildformat. */
  padding: clamp(var(--space-s), 2.2vw, var(--space-xl));
}
@media (max-width: 1023px) {
  .hero__visual { aspect-ratio: 16 / 10; max-height: 44vh; min-height: 240px; }
}
@media (max-width: 600px) {
  .hero__visual { aspect-ratio: 4 / 3; max-height: none; min-height: 200px; }
}

.hero__picture { display: contents; }

/* Das Bild füllt den Container so weit aus, wie es vollständig hineinpasst.
   width/height auf 100 % zusammen mit object-fit: contain ist hier der
   entscheidende Punkt: ein kleines Produktfoto wird dadurch hochskaliert und
   wirkt genauso groß wie ein großes. Mit max-width/max-height und width:auto
   (vorher) wäre ein 400-px-Bild winzig geblieben — die Darstellung hinge dann
   doch wieder am konkreten Bild. */
.hero__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  /* Plastik ohne Kasten. Bewusst zurückhaltend, damit freigestellte Fotos
     nicht wie aufgeklebt wirken. */
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.5));
}

/* ---------- Lichtstimmung hinter dem Produkt ----------
   URSACHE DES BRAUNEN KASTENS (gefunden 09/2026 durch Untersuchung der
   ausgelieferten Seite, nicht der Quelldateien):

   Das Element war 155 % breit mit aspect-ratio: 1, also rund 1290 px im
   Quadrat — der Hero ist aber nur etwa 950 px hoch. Der Verlauf war zwar an
   der EIGENEN Elementkante transparent, an der Stelle jedoch, an der
   `.hero { overflow: hidden }` ihn abschnitt, lag er noch bei etwa 0,016
   Alpha. Diese Restfläche wurde waagrecht hart abgeschnitten und war exakt
   der sichtbare braune Kasten. „closest-side" allein half nicht, weil das
   Element schlicht größer war als der Bereich, in dem es gezeichnet werden
   durfte.

   LÖSUNG, die das strukturell ausschließt:
   1. Das Element ist nur noch geringfügig größer als die Bühne (inset: -10%)
      und liegt damit VOLLSTÄNDIG innerhalb des Heros. Es wird nirgends
      beschnitten.
   2. Die Ellipsenradien sind mit 44 % / 40 % kleiner als die halbe
      Elementbreite bzw. -höhe (je 50 %). Dadurch ist ein Rand von rund
      60 px waagrecht und 74 px senkrecht garantiert vollständig
      transparent — selbst ein unerwarteter Beschnitt könnte dort nichts
      mehr sichtbar machen.
   Der Weichzeichner bleibt deutlich unter diesem transparenten Rand. */
.hero__visual-glow {
  position: absolute;
  z-index: 0;
  inset: -10%;
  background: radial-gradient(ellipse 44% 40% at 50% 50%,
      rgba(255, 238, 220, 0.055) 0%,
      rgba(246, 147, 30, 0.048) 28%,
      rgba(246, 147, 30, 0.020) 56%,
      rgba(246, 147, 30, 0.006) 78%,
      rgba(246, 147, 30, 0) 100%);
  filter: blur(18px);
  pointer-events: none;
}

/* Sehr weiche Aufstandsfläche — gibt dem Anhänger Halt, statt ihn schweben zu
   lassen. Radien ebenfalls unter 50 %, damit der Elementrand transparent ist. */
.hero__visual-ground {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4%;
  width: 78%;
  height: 20%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 46% 44% at 50% 50%,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(10px);
  pointer-events: none;
}

/* Sehr leichte Bewegung beim Scrollen. Der Wert kommt aus homepage.js und
   ist auf wenige Pixel begrenzt; ohne JavaScript oder bei reduzierter
   Bewegung bleibt das Bild schlicht stehen. */
.hero__visual { --hero-parallax: 0px; }
.hero__img { transform: translate3d(0, var(--hero-parallax), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero__img { transform: none; will-change: auto; }
}

/* ---------- TRUST-LEISTE ---------- */
.trust-bar {
  border-top: var(--line-hairline-dark);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
}
@media (max-width: 767px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
.trust-bar .data-block__value { color: #fff; }
.trust-bar .data-block__label { color: var(--neptun-steel-300); }

/* ---------- EINSATZZWECK-CARDS ---------- */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
}
@media (max-width: 1023px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .usecase-grid { grid-template-columns: 1fr; } }

/* Die Kachel trägt jetzt ein echtes Produktbild. Bildfläche und Textfläche
   sind getrennt, damit unterschiedlich hohe Beschreibungen die Bildhöhe
   nicht verändern und die Reihe optisch ruhig bleibt. */
.usecase-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  background: var(--neptun-white);
  transition: border-color var(--duration-standard) var(--ease-standard),
              box-shadow var(--duration-standard) var(--ease-standard),
              transform var(--duration-standard) var(--ease-standard);
}
.usecase-card:hover { border-color: var(--neptun-graphite-500); box-shadow: var(--shadow-m); transform: translateY(-2px); }

.usecase-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--neptun-surface-100);
  overflow: hidden;
}
.usecase-card__media img {
  width: 100%; height: 100%;
  /* Produktaufnahmen sind fast durchgehend freigestellt — beschneiden würde
     Deichsel oder Heck abschneiden. */
  object-fit: contain;
  padding: var(--space-s);
  display: block;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.usecase-card:hover .usecase-card__media img { transform: scale(1.03); }

.usecase-card__body {
  display: flex; flex-direction: column; gap: var(--space-xs);
  flex: 1;
  padding: var(--space-l);
}
.usecase-card__label { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-l); }
.usecase-card__text {
  font-size: var(--fs-body-s);
  color: var(--color-text-on-light-muted);
  line-height: 1.5;
}
.usecase-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-s);
  margin-top: auto;
  padding-top: var(--space-m);
}
.usecase-card__count { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.usecase-card__arrow {
  color: var(--neptun-orange); font-family: var(--font-data);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.usecase-card:hover .usecase-card__arrow { transform: translateX(3px); }

/* Die Zubehörkachel hat kein Produktbild — sie bekommt stattdessen die
   volle Höhe für den Text, damit im Raster keine Lücke entsteht. */
.usecase-card--zubehoer .usecase-card__body { justify-content: center; }

/* ---------- FINDER-EINSTIEG ----------
   Dunkler Abschnitt: Text links, die drei Schritte rechts als nummerierte
   Liste mit feinen Trennlinien. Die großen Ziffern übernehmen die Führung.

   Der Abschnitt liegt bewusst NACH den beiden dunklen Bereichen in der
   Seitenmitte und vor dem hellen Sortiment — er schließt den dunklen Teil
   ab, statt einen dritten isolierten Block zu bilden. */
.finder-sektion {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
}
.finder-sektion .type-section-lg { color: #fff; }
.finder-sektion .finder-einstieg__lede { color: var(--neptun-steel-200); }
.finder-sektion .finder-schritt { border-color: rgba(255, 255, 255, 0.14); }
.finder-sektion .finder-schritt__titel { color: #fff; }
.finder-sektion .finder-schritt__text { color: var(--neptun-steel-300); }
.finder-sektion .finder-schritt__nr { color: var(--neptun-steel-400); }

.finder-einstieg {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: center;
}
@media (max-width: 899px) { .finder-einstieg { grid-template-columns: 1fr; gap: var(--space-xl); } }

.finder-einstieg__lede {
  font-size: var(--fs-body-l);
  color: var(--color-text-on-light-muted);
  max-width: 46ch;
  margin-block: var(--space-m) var(--space-xl);
}

.finder-schritte { list-style: none; margin: 0; padding: 0; }
.finder-schritt {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-l);
  align-items: baseline;
  padding-block: var(--space-l);
  border-top: var(--line-hairline);
}
.finder-schritt:first-child { border-top: none; padding-top: 0; }
.finder-schritt__nr {
  grid-row: span 2;
  font-family: var(--font-data);
  font-size: var(--fs-data-l);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--neptun-steel-300);
  font-variant-numeric: tabular-nums;
}
.finder-schritt__titel { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); }
.finder-schritt__text { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }

/* ---------- PRODUKTGRID (Homepage) ----------
   Spalten-Logik (1 -> 2 -> 3) liegt jetzt in der geteilten .product-grid-Basis
   (02-components.css), damit sie auch auf Seiten ohne 07-homepage.css greift
   (z. B. "Ähnliche Modelle" auf der Produktdetailseite). Hier nichts mehr
   zu überschreiben. */

/* .data-quality-note entfernt (Phase 12) — alle bisherigen Verwendungen
   laufen jetzt über neptun_admin_only_note() / .admin-only-note in
   02-components.css: unsichtbar für normale Besucher, nur für
   Administratoren sichtbar. Keine Entwicklerhinweise mehr im öffentlichen
   Frontend. */

/* ---------- WARUM NEPTUN ---------- */
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
@media (max-width: 900px) { .reasons-grid { grid-template-columns: 1fr; } }
.reason { padding-top: var(--space-l); border-top: var(--line-technical); }
.reason__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-l); margin-bottom: var(--space-xs); }
.reason__text { color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }

/* ---------- ZUBEHÖR-TEASER ---------- */
.accessory-teaser {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 900px) { .accessory-teaser { grid-template-columns: 1fr; } }
.accessory-teaser__visual { aspect-ratio: 1 / 1; border-radius: var(--radius-l); overflow: hidden; }
.accessory-teaser h2 { margin-bottom: var(--space-m); }
.accessory-teaser p { margin-bottom: var(--space-l); }

/* ---------- DANDLER-PARTNERBLOCK ---------- */
@media (max-width: 900px) { }
/* Liste -> CTA-Button: eigener, klar sichtbarer Absatz statt direkt
   anschließend (war vorher nur 12px inline, wirkte angeklebt). */
.partner-block__facts .btn { align-self: flex-start; margin-top: var(--space-l); }

/* ---------- FINAL CTA ---------- */
.final-cta {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-l);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}
.final-cta h2 { color: #fff; margin-bottom: var(--space-m); }
.final-cta p { color: var(--neptun-steel-300); }
.final-cta__actions { display: flex; gap: var(--space-m); flex-wrap: wrap; }