/**
 * NEPTUN DESIGN SYSTEM — KOMPONENTEN
 * Jede Komponente hier wird auf Homepage, Archiv, Produktseite,
 * Finder, Konfigurator und Anfrageprozess konsistent wiederverwendet.
 */

/* ---------- ABSCHNITTS-RASTER ----------
   Vertikaler Rhythmus der gesamten Website.

   Lag bis 09/2026 in 07-homepage.css. Diese Datei wird aber nur auf der
   Startseite geladen, während .section/.section__head auf fast jeder Seite
   verwendet werden — Anhänger- und Zubehörarchiv, Finder, Händler, Kontakt.
   Dort hatten die Abschnitte deshalb gar keine vertikalen Abstände.

   Die Abstände skalieren jetzt mit der Viewportbreite: 6,5 rem oben und unten
   sind auf einem großen Bildschirm angemessen, auf einem Telefon ergeben sie
   nur eine leere Bildschirmhälfte. clamp() hält oben und unten dabei immer
   exakt gleich — der Abschnitt bleibt in jeder Breite symmetrisch. */

.section { padding-block: clamp(2.75rem, 7vw, var(--space-4xl)); }
.section--tight { padding-block: clamp(2rem, 5vw, var(--space-3xl)); }
.section--on-muted { background: var(--neptun-surface-050); }

.section__head { max-width: 640px; margin-bottom: clamp(1.5rem, 4vw, var(--space-2xl)); }
/* Gleichmäßige Zeilenverteilung in Abschnittsüberschriften — verhindert das
   einzelne Wort auf der letzten Zeile. */
.section__head .type-section-lg,
.section__head h2 { text-wrap: balance; }
/* Die Kennzeile über einer Überschrift ordnet ein — sie ist keine
   Handlungsaufforderung. In Akzentfarbe stand auf der Startseite über jeder
   der neun Sektionen ein oranges Wort; die Farbe verlor dadurch ihre
   Bedeutung und die Seite bekam den Anschein einer Kampagnenseite.
   Jetzt neutral und leicht gesperrt: ordnet ein, ohne zu rufen. Orange
   bleibt Schaltflächen, aktiven Zuständen und Zählnummern vorbehalten. */
.section__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-s);
}
/* Die Regel für .section--on-dark ist entfallen: die Klasse wird nirgends
   mehr vergeben, die dunklen Abschnitte (Hero, Modellwelten) bringen ihre
   Farben selbst mit. */
.section__head p { color: var(--color-text-on-light-muted); margin-top: var(--space-m); font-size: var(--fs-body-l); }
.section__head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }

/* =========================================================================
   KAPITELMARKE

   Eine durchnummerierte Marke mit Haarlinie über jedem Hauptabschnitt.
   Sie ersetzt das frühere Schlagwort in Akzentfarbe: statt neunmal „wichtig"
   zu rufen, ordnet sie die Seite in eine Reihenfolge ein. Die Ziffer ist
   Orientierung, kein Schmuck — auf Automotive-Seiten übernimmt genau dieses
   Element die Führung durch lange Startseiten.

   Wiederverwendbar auf Startseite, Archiven und Produktseiten.
   ========================================================================= */
.kapitel {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neptun-steel-400);
}
.kapitel__nr {
  color: var(--neptun-orange);
  font-variant-numeric: tabular-nums;
}
/* Die Linie füllt den Rest der Zeile und endet an der Textspalte — sie
   markiert die Breite, in der der Abschnitt spielt. */
.kapitel::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}
.kapitel--auf-dunkel { color: var(--neptun-steel-300); }

/* =========================================================================
   PRODUKTBÜHNE

   Freigestellte Anhänger stehen sonst im Nichts. Die Bühne gibt ihnen eine
   Fläche und einen weichen Bodenschatten — beides aus CSS, ohne dass ein
   Bild retuschiert werden müsste. Das Seitenverhältnis kommt vom Container,
   nie vom Bild: dadurch springt beim Wechsel nichts.
   ========================================================================= */
.buehne {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--stage-light);
  padding: clamp(var(--space-l), 4vw, var(--space-3xl));
}
.buehne--dunkel { background: var(--stage-dark); }

/* Bodenschatten als eigene Ebene unter dem Produkt. Bewusst sehr weich und
   breit — ein harter Schatten sieht nach freigestelltem Bild auf Fläche aus,
   ein weicher nach Licht im Raum. */
.buehne::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 12%;
  width: 62%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 48% 46% at 50% 50%, rgba(18, 18, 20, 0.20) 0%, rgba(18, 18, 20, 0) 100%);
  filter: blur(8px);
  pointer-events: none;
}
.buehne--dunkel::after { background: radial-gradient(ellipse 48% 46% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%); }

.buehne__bild {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================================================================
   SPEC-LEISTE

   Technische Werte direkt unter einem Produkt, durch Haarlinien getrennt.
   Katalogtypografie: kleine Bezeichnung, große Zahl, gleichbreite Ziffern,
   damit die Werte untereinander auf einer Linie stehen.
   ========================================================================= */
.spec-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
}
@media (max-width: 767px) {
  .spec-rail { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spec-rail__feld {
  padding: var(--space-m) var(--space-l);
  border-left: var(--line-hairline);
  min-width: 0;
}
.spec-rail__feld:first-child { border-left: none; padding-left: 0; }
@media (max-width: 767px) {
  .spec-rail__feld { border-left: none; border-top: var(--line-hairline); padding-inline: 0; }
  .spec-rail__feld:nth-child(-n+2) { border-top: none; }
}
.spec-rail__label {
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-light-muted);
  margin-bottom: var(--space-2xs);
}
.spec-rail__wert {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-data-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.spec-rail--auf-dunkel .spec-rail__feld { border-color: rgba(255, 255, 255, 0.14); }
.spec-rail--auf-dunkel .spec-rail__label { color: rgba(255, 255, 255, 0.55); }
.spec-rail--auf-dunkel .spec-rail__wert { color: #fff; }

/* ---------- BUTTONS ---------- */
/* Zwei Prioritätsstufen. Kein dritter "Ghost"-Button ohne Zweck. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-m);
  /* Minimale Rückmeldung beim Überfahren: ein Pixel Anhebung, beim Drücken
     zurück auf die Grundlinie. Bewusst so klein, dass es sich eher spürbar
     als sichtbar anfühlt. */
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-m);
  line-height: 1.3;
  text-align: center;
  /* Nie nowrap als Default: ein Button darf seinen Text bei Bedarf auf 2
     Zeilen umbrechen, statt über den Container hinauszulaufen. Kürzere
     Button-Texte (siehe UX-Copy-Regel) sollten das ohnehin selten nötig
     machen — das hier ist die Absicherung, falls doch mal ein längerer
     Text vorkommt. */
  white-space: normal;
  max-width: 100%;
  min-height: 44px; /* Mindest-Touch-Target */
  box-sizing: border-box;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn--primary {
  background: var(--neptun-orange);
  color: var(--neptun-graphite-950);
  border: 1px solid var(--neptun-orange);
}
.btn--primary:hover { background: var(--neptun-orange-hover); border-color: var(--neptun-orange-hover); color: var(--neptun-white); }
.btn--primary:active { background: var(--neptun-orange-active); }

.btn--secondary {
  background: transparent;
  color: var(--color-text-on-light);
  border: 1px solid var(--neptun-graphite-800);
}
.btn--secondary:hover { background: var(--neptun-graphite-950); color: var(--neptun-white); }

.btn--secondary.btn--on-dark {
  color: var(--color-text-on-dark);
  border-color: rgba(255,255,255,0.35);
}
.btn--secondary.btn--on-dark:hover { background: rgba(255,255,255,0.08); }

.btn--sm { padding: 0.625rem 1.25rem; font-size: var(--fs-body-s); min-height: 40px; }

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn:disabled:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- BADGES ---------- */
/* Nur für echten Status/Kennzeichnung, nicht dekorativ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* ---------- DATENBLOCK (Kennzahlen) ---------- */
/* Zentrales Muster: technische Werte als eigenständiges, wiederholbares Element */

.data-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.data-block__value {
  font-family: var(--font-data);
  font-size: var(--fs-data-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-text-on-light);
}
.data-block__value--lg { font-size: var(--fs-data-l); }
.data-block__label {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
  letter-spacing: 0.01em;
}

.data-row {
  display: flex;
  flex-wrap: wrap;
}
.data-row > .data-block {
  padding: var(--space-m) var(--space-l) var(--space-m) 0;
  border-right: var(--line-technical);
  margin-right: var(--space-l);
}
.data-row > .data-block:last-child { border-right: none; margin-right: 0; }

/* ---------- PRODUKTRASTER (geteilte Basis) ----------
   display:grid + Gap gehören hierher, NICHT in eine seiten-spezifische Datei
   (07-homepage.css / 08-archive.css) — sonst funktioniert das Raster nur auf
   der Seite, die diese eine Datei zufällig zusätzlich lädt. Mobile-first:
   Standard ist 1 Spalte, seiten-spezifische Dateien schalten ab hier gezielt
   auf 2/3 Spalten um. */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- .archive-results-grid — geteilte 2-Spalten-Variante ----------
   Für Kontexte mit weniger horizontalem Platz (Archiv-Sidebar) oder wo
   bewusst maximal 2 statt 3 Spalten gewünscht sind (Finder-Ergebnisse: große,
   komfortable Karten statt möglichst vieler). Liegt hier in der immer
   geladenen Basis, NICHT in einer seiten-spezifischen Datei — genau das war
   die Ursache des früheren Grid-Bugs im Archiv (Datei wurde auf der
   betroffenen Seite schlicht nicht geladen).
   - < 860px (Tablet Portrait, Mobile): 1 Spalte (Basis, mobile-first)
   - >= 860px (Tablet Landscape und Desktop): 2 Spalten, IMMER genau 2, nie
     mehr — minmax(0, 1fr) hat keine Mindestbreite, blockiert also nie den
     verfügbaren Platz. */
.archive-results-grid {
  gap: var(--space-l);
}
@media (min-width: 860px) {
  .archive-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* ---------- PRODUKTKARTE ---------- */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: border-color var(--duration-standard) var(--ease-standard),
              box-shadow var(--duration-standard) var(--ease-standard),
              transform var(--duration-standard) var(--ease-standard);
}
.product-card:hover {
  border-color: var(--neptun-graphite-500);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}
.product-card__media {
  /* Innenabstand als eigene Variable, damit die Breakpoints unten nur einen
     Wert überschreiben und das Bild-Layout selbst unverändert bleibt. */
  --product-card-media-pad: var(--space-l);
  /* 4:3 statt 3:2 — das Produkt bekommt spürbar mehr Fläche und die Karte
     bewegt sich weg von der Shop-Kachel hin zur Katalogseite. Die Werte
     darunter bleiben unverändert; nur das Verhältnis Bild zu Information
     verschiebt sich zugunsten des Anhängers. */
  aspect-ratio: 4 / 3;
  /* Dieselbe Lichtfläche wie auf der Produktseite statt gleichmäßigem Grau. */
  background: var(--stage-light);
  position: relative;
  overflow: hidden;
  padding: var(--product-card-media-pad);
}
/* Weicher Bodenschatten, damit freigestellte Anhänger auch in der Karte
   stehen statt zu schweben. */
.product-card__media::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 12%;
  width: 60%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 48% 46% at 50% 50%, rgba(18, 18, 20, 0.16) 0%, rgba(18, 18, 20, 0) 100%);
  filter: blur(6px);
  pointer-events: none;
}
.product-card__media img { position: relative; z-index: 1; }
.product-card__media-link { display: block; }
.product-card__media-placeholder { height: 100%; }
.product-card__title-link { color: inherit; }
.product-card__description {
  color: var(--color-text-on-light-muted);
  font-size: var(--fs-body-s);
}

/* Generischer "kein Ergebnis / kein Kontext" Zustand — verwendet von
   Anfrageprozess (ohne ?produkt=) UND Finder (ohne Einsatzzweck-Daten).
   Hier statt in einer seiten-spezifischen Datei, damit beide Seiten sie
   unabhängig voneinander bekommen. */
.request-fallback { max-width: 640px; margin-inline: auto; padding-block: var(--space-3xl); text-align: center; }
.request-fallback .section__head { margin-bottom: var(--space-xl); }
.request-fallback__ctas { display: flex; gap: var(--space-m); justify-content: center; flex-wrap: wrap; }
/* contain statt cover: Anhänger haben sehr unterschiedliche Seitenverhältnisse
   (16:9 Renderings neben 3:2 Fotos). cover würde je nach Bild unterschiedlich
   stark anschneiden; contain zeigt das Produkt immer vollständig und
   unverzerrt. Die einheitliche Kartenhöhe kommt weiterhin allein aus dem
   aspect-ratio des Containers, nicht aus dem Bild. */
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform var(--duration-slow) var(--ease-standard);
}
/* Der Hover-Zoom bleibt erhalten — er wächst in den Innenabstand hinein und
   wird vom overflow:hidden des Containers sauber begrenzt. */
.product-card:hover .product-card__media img { transform: scale(1.035); }

@media (max-width: 1023px) { .product-card__media { --product-card-media-pad: var(--space-m); } }
@media (max-width: 640px)  { .product-card__media { --product-card-media-pad: var(--space-s); } }

.product-card__body {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  flex: 1;
}
@media (max-width: 480px) {
  .product-card__body { padding: var(--space-m); }
}
.product-card__eyebrow {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
}
.product-card__title {
  /* Bewusst NICHT die Display-Schrift — Produktnamen sollen ruhig und wie ein
     hochwertiges Typenschild wirken, nicht wie eine Schlagzeile. */
  font-family: var(--font-body);
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}
.product-card__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: var(--line-technical);
}
/* Kompaktere Zahlengröße speziell in der Karte, damit Werte wie "3.500 kg"
   auch bei der minimalen Kartenbreite (280px) nicht umbrechen. */
.product-card__specs .data-block__value {
  font-size: var(--fs-data-s);
  white-space: nowrap;
}
/* Der berechnete Unterschied zum gerade betrachteten Modell. Bewusst als
   ruhige Zeile mit Akzentlinie statt als Badge: es ist eine Einordnung,
   keine Auszeichnung. */
.product-card__unterschied {
  align-self: flex-start;
  padding-left: var(--space-s);
  border-left: 2px solid var(--neptun-orange);
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  color: var(--color-text-on-light);
}

/* Artikelnummer direkt unter dem Modellnamen — im Verkaufsgespräch wird
   danach als Erstes gefragt. */
.product-card__sku {
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  color: var(--neptun-steel-400);
  margin-top: -2px;
}

/* Merkmalszeile: Innenmaß, Bremse, Kippbarkeit als kurze Stichworte.
   Bewusst keine Rahmen um jedes Wort — die Karte hat schon eine Kontur,
   Chips darin würden unruhig wirken. */
.product-card__merkmale {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 2px var(--space-s);
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
}
.product-card__merkmale li { display: flex; align-items: center; }
.product-card__merkmale li + li::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--neptun-steel-300);
  margin-right: var(--space-s);
}

.product-card__actions {
  margin-top: auto;
  display: flex;
  gap: var(--space-s);
  padding-top: var(--space-m);
}
.product-card__actions .btn { flex: 1; }

/* ---------- FORMULARE ---------- */

.form-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-m); }
.form-field__label { font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--color-text-on-light); }
.form-field__label .is-optional { color: var(--color-text-on-light-muted); font-weight: var(--fw-regular); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-s);
  background: var(--neptun-white);
  color: var(--color-text-on-light);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--neptun-steel-400); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { border-color: var(--neptun-orange); }
.form-field__error { font-size: var(--fs-caption); color: var(--neptun-error); }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--neptun-error); }

/* ---------- FINDER-SCHRITT (echte Sequenz -> Nummerierung erlaubt) ---------- */
.finder-progress {
  display: flex;
  gap: var(--space-2xs);
}
.finder-progress__segment {
  height: 2px;
  flex: 1;
  background: var(--neptun-steel-200);
  border-radius: var(--radius-full);
}
.finder-progress__segment.is-complete,
.finder-progress__segment.is-active { background: var(--neptun-orange); }

/* ---------- ZUBEHÖR-AUSWAHLKARTE ---------- */

.accessory-card {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  /* Gleiche Höhe für alle Karten in einer Zeile: der Text darf umbrechen,
     ohne dass die Nachbarkarte mitwächst. */
  height: 100%;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-m);
  background: var(--neptun-white);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.accessory-card:hover {
  border-color: var(--neptun-steel-400);
  box-shadow: var(--shadow-s);
}
/* Ausgewählt: dezente orange Kontur statt kräftiger Flächenfärbung — die
   Auswahl soll erkennbar sein, ohne die Kartenreihe unruhig zu machen. */
.accessory-card.is-selected {
  border-color: var(--neptun-orange);
  box-shadow: inset 0 0 0 1px var(--neptun-orange);
  background: var(--neptun-orange-tint-10);
}
/* Die Tastaturbedienung hängt an der versteckten Checkbox — der sichtbare
   Fokus muss deshalb an der Karte erscheinen, nicht am unsichtbaren Feld. */
.accessory-card:focus-within { outline: 2px solid var(--neptun-orange); outline-offset: 2px; }

.accessory-card__check {
  width: 22px; height: 22px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--neptun-steel-300);
  flex: 0 0 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neptun-white);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
/* Das Häkchen wird per CSS gezeichnet, damit kein zusätzliches Markup
   oder Icon-Sprite nötig ist. */
.accessory-card__check::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid var(--neptun-white);
  border-bottom: 2px solid var(--neptun-white);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.accessory-card.is-selected .accessory-card__check { border-color: var(--neptun-orange); background: var(--neptun-orange); }
.accessory-card.is-selected .accessory-card__check::after { opacity: 1; }

.accessory-card__media-row { display: flex; gap: var(--space-m); align-items: center; flex: 1; min-width: 0; }
/* Einheitliche Bildfläche: Zubehörfotos kommen in sehr unterschiedlichen
   Formaten. `contain` statt `cover`, weil ein Beschnitt bei Kleinteilen wie
   Stützrädern oder Spanngurten das Produkt unkenntlich macht. */
.accessory-card__image {
  width: 64px; height: 64px;
  flex: 0 0 64px;
  border-radius: var(--radius-s);
  object-fit: contain;
  padding: 4px;
  background: var(--neptun-surface-100);
}
.accessory-card__content { min-width: 0; }
.accessory-card__title { display: block; font-size: var(--fs-body-m); font-weight: var(--fw-medium); line-height: 1.35; }
.accessory-card__sku {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  color: var(--neptun-steel-400);
  margin-top: 4px;
}

/* ---------- Admin-Only-Hinweis ----------
   Wird ausschließlich gerendert, wenn ein Administrator angemeldet ist
   (siehe neptun_admin_only_note() in functions.php) — für alle anderen
   Besucher erscheint nichts, nicht einmal ein leerer Container. Auffällig
   genug, um vom echten Seiteninhalt unterscheidbar zu sein, falls ein Admin
   die Seite durchklickt. */
.admin-only-note {
  border: 1.5px dashed var(--neptun-orange);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-l);
  margin-top: var(--space-l);
  color: var(--color-text-on-light-muted);
  font-size: var(--fs-caption);
  background: var(--neptun-orange-tint-10);
}
.admin-only-note strong { color: var(--neptun-orange-active); }

/* ---------- Elegantes Medien-Platzhalter-System ----------
   Ersetzt sämtliche sichtbaren "Bild folgt"/"Bildwelt folgt"-Texte. Statt
   einer Entwicklernotiz: ein zurückhaltendes technisches Muster (feines
   Diagonal-Liniengitter) mit vier Eckmarkierungen im Kamerasucher-Stil —
   passt zur Automotive-/Technik-Anmutung, sieht nie "unfertig" aus und
   braucht keinerlei externe Icon-Bibliothek. Erscheint NUR, wenn wirklich
   kein Bild hinterlegt ist; sobald ein echtes Bild gepflegt wird, wird
   dieses Element gar nicht erst gerendert (siehe Templates). */
.media-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: var(--neptun-surface-100);
  background-image: repeating-linear-gradient(
    135deg,
    var(--neptun-surface-050) 0px,
    var(--neptun-surface-050) 1px,
    transparent 1px,
    transparent 14px
  );
  overflow: hidden;
}
.media-placeholder::before,
.media-placeholder::after,
.media-placeholder__corner::before,
.media-placeholder__corner::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neptun-steel-300);
}
.media-placeholder::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.media-placeholder::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.media-placeholder__corner::before { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.media-placeholder__corner::after { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.media-placeholder--dark {
  background-color: var(--neptun-graphite-900);
  background-image: repeating-linear-gradient(
    135deg,
    var(--neptun-graphite-800) 0px,
    var(--neptun-graphite-800) 1px,
    transparent 1px,
    transparent 14px
  );
}
.media-placeholder--dark::before,
.media-placeholder--dark::after,
.media-placeholder--dark .media-placeholder__corner::before,
.media-placeholder--dark .media-placeholder__corner::after {
  border-color: var(--neptun-graphite-600);
}

/* ---------- CTA-TEASER-LEISTE (z. B. Finder-Teaser, "Welcher Neptun passt")
   Verwendet auf mehreren Seiten (Homepage, Über Neptun, ...) — deshalb in
   der geteilten Basis, nicht in einer seiten-spezifischen Datei. */
.cta-teaser-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--neptun-surface-050);
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  padding: var(--space-2xl);
}
@media (max-width: 900px) { .cta-teaser-band { grid-template-columns: 1fr; } }
.cta-teaser-band h2 { margin-bottom: var(--space-m); }
.cta-teaser-band > div > p { margin-bottom: var(--space-l); }
/* Einfache Variante ohne linke Textspalte, nur Headline+CTA rechtsbündig
   (z. B. "Welcher Neptun passt zu Ihnen?") */
.cta-teaser-band--simple { grid-template-columns: 1fr auto; }
@media (max-width: 600px) { .cta-teaser-band--simple { grid-template-columns: 1fr; } }

/* ---------- Info-Popover an Produktmerkmalen ----------
   Kleines „i" neben einer Merkmalsbezeichnung (z. B. „Klappbare Deichsel ⓘ").
   Erscheint im Archivfilter und in der Datentabelle der Produktseite, deshalb
   hier bei den Komponenten und nicht in einer seiten-spezifischen Datei.
   Bedienung siehe main.js: Hover/Fokus am Desktop, Tap auf Touchgeräten. */
.merkmal-info {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.35em;
}
.merkmal-info__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border: 1px solid var(--neptun-steel-300);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-on-light-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.merkmal-info__trigger:hover,
.merkmal-info.is-open .merkmal-info__trigger {
  border-color: var(--neptun-orange);
  color: var(--neptun-orange);
}
.merkmal-info__trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--neptun-orange);
}

.merkmal-info__popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 260px;
  max-width: min(260px, calc(100vw - 24px));
  padding: var(--space-s);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-white);
  box-shadow: var(--shadow-m);
  text-align: left;
  white-space: normal;
  cursor: auto;
}
.merkmal-info__popover[hidden] { display: none; }

/* Kleiner Zeiger zum Icon. Zwei übereinanderliegende Dreiecke ergeben die
   Hairline-Kante, ohne dass ein zweites Element ins Markup muss. */
.merkmal-info__popover::before,
.merkmal-info__popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}
.merkmal-info__popover::before { border-top-color: var(--neptun-steel-200); }
.merkmal-info__popover::after  { border-top-color: var(--neptun-white); margin-top: -1px; }

.merkmal-info__titel {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
  color: var(--color-text-on-light);
}
.merkmal-info__text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular, 400);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--color-text-on-light-muted);
  text-align: left;
}
.merkmal-info__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--neptun-surface-100);
}

/* Touchgeräte: etwas größere Trefferfläche, ohne die Zeile aufzublähen. */
@media (hover: none) {
  .merkmal-info__trigger { width: 18px; height: 18px; font-size: 11px; }
}

/* ---------- Button mit vorangestelltem Icon ----------
   Nur für Fälle, in denen das Icon die Handlung präzisiert (Download eines
   PDFs). Das Icon ist eine CSS-Maske, damit es die Textfarbe des Buttons
   erbt und im Hover-Zustand automatisch mitwechselt. */
.btn--mit-icon { gap: var(--space-xs); }
.btn__icon {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  background-color: currentColor;
}
.btn__icon--pdf {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Umgeklappte Variante: erscheint unter dem Icon, wenn darüber der
   mitlaufende Kopfbereich im Weg wäre. Der Zeiger wandert mit nach oben. */
.merkmal-info__popover--unten {
  bottom: auto;
  top: calc(100% + 10px);
}
.merkmal-info__popover--unten::before,
.merkmal-info__popover--unten::after {
  top: auto;
  bottom: 100%;
}
.merkmal-info__popover--unten::before {
  border-top-color: transparent;
  border-bottom-color: var(--neptun-steel-200);
}
.merkmal-info__popover--unten::after {
  border-top-color: transparent;
  border-bottom-color: var(--neptun-white);
  margin-top: 0;
  margin-bottom: -1px;
}

/* Trefferfläche des Info-Knopfs.

   Der Kreis bleibt optisch 15 px klein — er soll die Merkmalzeile nicht
   dominieren. Mit dem Finger war er auf dem Telefon aber kaum zu treffen
   (empfohlen sind mindestens 24 px, angenehm sind 44 px).

   Ein Pseudo-Element vergrössert die Trefferfläche auf 44 x 44 px, ohne die
   Darstellung zu verändern und ohne den Zeilenumbruch zu beeinflussen. */
.merkmal-info__trigger { position: relative; }
.merkmal-info__trigger::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- Hinweis „Beispielbild" unter Zubehörabbildungen ----
   Die 274 Zubehörartikel zeigen freigestellte Symbolbilder, keine eigenen
   Fotos. Der Hinweis soll auffallen, ohne die Karte zu beherrschen: kein
   Kasten, keine Signalfarbe, nur eine schmale Zeile mit Symbol. Die
   Handlung — anfragen — sitzt als Link im Satz und trägt als Einziges die
   Hausfarbe. */
.beispielbild-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-text-on-light-muted);
  /* Bricht auf schmalen Karten sauber um, statt die Karte zu verbreitern. */
  text-wrap: pretty;
}
.beispielbild-hinweis__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  /* Auf die erste Textzeile ausgerichtet, nicht auf die Mitte des Absatzes:
     bei zweizeiligem Umbruch stünde es sonst schief zwischen den Zeilen. */
  margin-top: 0.125em;
  opacity: 0.75;
}
.beispielbild-hinweis a {
  color: var(--neptun-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.beispielbild-hinweis a:hover { color: var(--neptun-graphite-950); }

/* In der Karte grenzt der Hinweis oben an das Bild — deshalb dort etwas
   Luft nach unten zur Rubrikzeile, aber keine nach oben. */
.beispielbild-hinweis--karte {
  margin-bottom: calc(var(--space-xs) * -0.25);
}

/* Auf der Produktseite steht er unter der Galerie und braucht Abstand nach
   oben; die Galerie selbst bleibt unverändert. */
.beispielbild-hinweis--detail {
  margin-top: var(--space-m);
}

/* Über der Zubehörliste des Konfigurators: etwas Abstand nach unten zur
   ersten Zeile, sonst identisch zu den anderen beiden Stellen. */
.beispielbild-hinweis--liste {
  margin: calc(var(--space-s) * -1) 0 var(--space-m);
}