/**
 * NEPTUN DESIGN SYSTEM — PRODUKTDETAILSEITE (Phase 5)
 * Spacing-Rhythmus konsequent nach der websiteweiten QA-Vorgabe:
 * Headline->Untertext = m, Section-Head->Inhalt = 2xl, Text->CTA = l,
 * Karten/Elemente = l/xl je nach Kontext-Dichte.
 */

.product-breadcrumb {
  /* Sichtbar deaktiviert (Vorgabe: keine sichtbaren Breadcrumbs im Frontend
     aktuell gewünscht). Die zugehörigen BreadcrumbList-Strukturdaten
     (includes/seo.php, neptun_output_breadcrumb_schema) bleiben unabhängig
     davon bestehen — SEO-Struktur und sichtbare UI sind hier bewusst
     entkoppelt, damit ein späteres Wieder-Einschalten ein reiner
     CSS-Schalter ist, kein Rückbau. */
  display: none;
}
.product-breadcrumb a { color: inherit; }
.product-breadcrumb a:hover { color: var(--neptun-graphite-950); }
.product-breadcrumb__sep { color: var(--neptun-steel-300); }

.product-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding-block: var(--space-l) var(--space-2xl);
}
@media (max-width: 1023px) { .product-hero { grid-template-columns: 1fr; gap: var(--space-xl); } }

/*
 * Rasterfelder duerfen schrumpfen.
 *
 * Ohne diese Zeile gilt fuer Rasterfelder min-width: auto — die Spalte waechst
 * dann auf die Mindestbreite ihres Inhalts. Die Miniaturleiste der Galerie ist
 * auf schmalen Geraeten eine waagrecht scrollbare Reihe; ihre Mindestbreite ist
 * die Summe aller Miniaturen. Ergebnis war eine Produktseite, die auf dem
 * Telefon 1680 px breit wurde und sich seitlich schieben liess.
 *
 * min-width: 0 durchbricht das: die Spalte richtet sich nach dem Viewport, die
 * Miniaturleiste scrollt wie vorgesehen in sich selbst.
 */
.product-hero > * { min-width: 0; }

/* ---------- Galerie ---------- */
/* Die Containergröße ist bewusst allein über aspect-ratio + Innenabstand
   definiert und damit unabhängig vom jeweiligen Bild. Dadurch entsteht beim
   Wechsel zwischen Galeriebildern mit unterschiedlichem Seitenverhältnis
   kein Layout-Sprung. */
/* Das Hauptbild steht auf der Produktbühne: weiche Lichtfläche statt
   gleichmäßigem Grau, dazu ein Bodenschatten aus CSS. Freigestellte
   Anhänger — und das sind rund drei Viertel — stehen damit im Licht statt
   auf einer Fläche zu kleben. Der Verlauf kommt aus dem Token --stage-light;
   es gibt keine zweite Definition an anderer Stelle. */
.product-gallery__main {
  --product-gallery-pad: var(--space-xl);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  background: var(--stage-light);
  overflow: hidden;
  margin-bottom: var(--space-m);
  padding: var(--product-gallery-pad);
  cursor: zoom-in;
}
.product-gallery__main::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 11%;
  width: 58%; height: 8%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 48% 46% at 50% 50%, rgba(18, 18, 20, 0.18) 0%, rgba(18, 18, 20, 0) 100%);
  filter: blur(7px);
  pointer-events: none;
}
.product-gallery__main img { position: relative; z-index: 1; }
/* Hinweis auf die Großansicht. Erscheint erst bei Annäherung, damit er das
   Produktbild im Ruhezustand nicht überlagert. */
.product-gallery__zoom {
  position: absolute;
  right: var(--space-m); bottom: var(--space-m);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.82);
  color: #fff;
  font-size: var(--fs-caption);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.product-gallery__main:hover .product-gallery__zoom,
.product-gallery__main:focus-visible .product-gallery__zoom { opacity: 1; transform: translateY(0); }
.product-gallery__main:focus-visible { outline: 2px solid var(--neptun-orange); outline-offset: 3px; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery__main-placeholder { height: 100%; }
/* Auf schmalen Geräten läuft die Auswahlleiste waagrecht statt umzubrechen —
   sonst schiebt eine Reihe mit acht Bildern den Kaufbereich weit nach unten. */
.product-gallery__thumbs { display: flex; gap: var(--space-s); flex-wrap: wrap; }
@media (max-width: 767px) {
  .product-gallery__thumbs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2xs); -webkit-overflow-scrolling: touch;
  }
  .product-gallery__thumbs > * { flex: 0 0 22%; scroll-snap-align: start; }
}
.product-gallery__thumb {
  width: 76px; height: 76px;
  padding: 6px;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--neptun-surface-100);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery__thumb.is-active { border-color: var(--neptun-orange); }
.product-gallery__thumb:focus-visible {
  outline: 2px solid var(--neptun-orange);
  outline-offset: 2px;
}

/* Nur der Innenabstand des Hauptbildes wird responsiv reduziert. Die
   Thumbnail-Größe bleibt bewusst bei 76px — das ist auf Mobile ein
   komfortables Touch-Target und deutlich über den empfohlenen 44px. */
@media (max-width: 1023px) { .product-gallery__main { --product-gallery-pad: var(--space-l); } }
@media (max-width: 640px)  { .product-gallery__main { --product-gallery-pad: var(--space-m); } }

/* ---------- Kopfbereich rechts: Name, Eckdaten, CTA ---------- */
.product-summary__eyebrow { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); margin-bottom: var(--space-xs); }
.product-summary__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-m);
  letter-spacing: -0.01em;
  color: var(--color-text-on-light);
  margin-bottom: var(--space-m);
}
.product-summary__lead {
  font-size: var(--fs-body-l);
  color: var(--color-text-on-light-muted);
  margin-bottom: var(--space-s);
  max-width: 46ch;
}
.product-summary__sku { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin-bottom: var(--space-l); }

/* ---------- Eckdaten ----------
   Ein Datenblatt, kein Kachelraster: feine Trennlinien zwischen den Feldern,
   sonst nichts. Die Werte in der Datenschrift mit gleichbreiten Ziffern,
   damit die Spalte optisch ausgerichtet bleibt. Die Bezeichnung steht
   ÜBER dem Wert und klein — gelesen wird die Zahl. */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--space-l);
  border-top: var(--line-technical);
  border-left: var(--line-hairline);
}
@media (max-width: 479px) { .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.eckdaten__feld {
  padding: var(--space-m);
  border-right: var(--line-hairline);
  border-bottom: var(--line-hairline);
  min-width: 0;
}
.eckdaten__label {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2xs);
}
.eckdaten__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;
  /* Das Innenmaß ist der längste Wert und darf umbrechen, statt die Spalte
     zu sprengen. */
  overflow-wrap: anywhere;
}

/* ---------- Zubehörhinweis im Kopfbereich ---------- */
.zubehoer-hinweis {
  display: flex; align-items: center; gap: var(--space-m);
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-100);
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.zubehoer-hinweis:hover { border-color: var(--neptun-orange); background: var(--neptun-white); }
.zubehoer-hinweis:hover .zubehoer-hinweis__arrow { transform: translateX(3px); }

/* Die Vorschaubilder überlappen leicht — das liest sich als „hier gibt es
   mehrere Teile" und braucht weniger Platz als vier Kacheln nebeneinander. */
.zubehoer-hinweis__bilder { display: flex; flex: 0 0 auto; }
.zubehoer-hinweis__bilder img {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--neptun-white);
  background: var(--neptun-white);
  object-fit: contain;
  padding: 3px;
}
.zubehoer-hinweis__bilder img + img { margin-left: -14px; }

.zubehoer-hinweis__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zubehoer-hinweis__text strong { font-size: var(--fs-body-s); font-weight: var(--fw-semibold); }
.zubehoer-hinweis__text span { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.zubehoer-hinweis__arrow {
  margin-left: auto;
  color: var(--neptun-orange);
  font-family: var(--font-data);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.product-summary__ctas { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-l); }
.product-summary__ctas .btn { width: 100%; }
.product-summary__trust { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }

/* ---------- Sektionen (Übersicht, Technische Daten, Ausstattung) ----------
   Ein einziger Wert bestimmt den vertikalen Rhythmus der ganzen Seite.
   Weil er oben und unten wirkt, ergibt sich zwischen zwei Abschnitten das
   Doppelte: rund 88 px auf dem Desktop und rund 52 px auf dem Handy.
   Vorher standen hier feste 48 px, die auf schmalen Geräten zu 96 px
   Leerraum zwischen den Abschnitten führten. */
:root { --section-space: clamp(1.625rem, 3.2vw, 2.75rem); }

.product-section { padding-block: var(--section-space); border-top: var(--line-hairline); }
/* Der erste Abschnitt schließt direkt an den Hero an — dort trennt bereits
   der Wechsel der Bildfläche, eine zusätzliche Linie wäre Rauschen. */
.product-section:first-of-type { border-top: none; padding-top: 0; }
.product-section__title { margin-bottom: var(--space-l); }
.product-section__intro { color: var(--color-text-on-light-muted); margin-bottom: var(--space-l); }
.product-section__inline-link { color: var(--neptun-orange-hover); font-weight: var(--fw-medium); }

.product-summary__description { color: var(--color-text-on-light-muted); margin-bottom: var(--space-l); }

.spec-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-2xl); }
@media (max-width: 767px) { .spec-table { grid-template-columns: 1fr; } }
.spec-table__row {
  display: flex; justify-content: space-between; gap: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: var(--line-hairline);
  font-size: var(--fs-body-s);
}
.spec-table__label { color: var(--color-text-on-light-muted); }
.spec-table__value { font-family: var(--font-data); font-weight: var(--fw-medium); text-align: right; }

/* Ja/Nein-Angaben (derzeit: Kippbarkeit). Das Häkchen trägt keine eigene
   Information — die Aussage steht im Wort daneben und bleibt ohne Farbe
   und ohne Zeichen lesbar. */
.spec-flag { display: inline-flex; align-items: baseline; gap: 0.4em; }
.spec-flag--yes { color: var(--neptun-success); }
.spec-flag--no { color: var(--color-text-on-light-muted); }

/* =========================================================================
   PRODUKTVORTEILE — kompakte Kernaussagen der Baureihe
   ========================================================================= */
.product-section__lead {
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--color-text-on-light);
  max-width: 68ch;
  margin-bottom: var(--space-l);
}


/* Die Regeln der entfallenen Kurzvorteile (.highlight*) sind mit dem
   Abschnitt entfernt worden. Ihre Inhalte stehen jetzt einmal im
   Detailbereich, nicht mehr zusätzlich als Kartenraster. */

/* =========================================================================
   DER ANHÄNGER IM DETAIL — Merkmale links und rechts der Herstellergrafik
   ========================================================================= */
/* Zwei Spalten statt drei: die Zeichnung bekommt die Hälfte der Breite und
   bleibt beim Lesen stehen, die nummerierten Punkte laufen daneben durch.
   Vorher standen die Texte in zwei schmalen Streifen links und rechts einer
   kleinen Grafik — dieselbe Anordnung wie beim Hersteller und mit demselben
   Nachteil: nichts davon hatte genug Raum. */
.detail-section__head { margin-bottom: var(--space-xl); }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: start;
}
/* Auf schmalen Geräten zuerst die Zeichnung, danach die Punkte — die
   Reihenfolge, in der man sie tatsächlich ansieht. */
@media (max-width: 1023px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-grafik { position: static; order: -1; }
}

.detail-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
/* Ohne Zeichnung nimmt die Liste die volle Breite ein und läuft zweispaltig —
   sonst entstünde eine sehr lange, sehr schmale Spalte.
   Bewusst NICHT über display:contents gelöst: das entfernt in mehreren
   Screenreadern die Listensemantik, die Punkte wären dann keine Aufzählung
   mehr. Das Raster sitzt deshalb auf der Liste selbst. */
.detail-layout--ohne-bild { grid-template-columns: 1fr; }
.detail-layout--ohne-bild .detail-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
}
.detail-layout--ohne-bild .detail-feature:nth-child(-n+2) { border-top: none; padding-top: 0; }
@media (max-width: 767px) {
  .detail-layout--ohne-bild .detail-liste { grid-template-columns: 1fr; }
  .detail-layout--ohne-bild .detail-feature:nth-child(2) { border-top: var(--line-hairline); padding-top: var(--space-l); }
}

.detail-feature {
  position: relative;
  padding: var(--space-l) 0 var(--space-l) 3.25rem;
  border-top: var(--line-hairline);
}
.detail-feature:first-child { border-top: none; padding-top: 0; }
.detail-layout--ohne-bild .detail-feature:nth-child(2) { border-top: none; padding-top: 0; }

/* Die Nummer verweist auf die Zeichnung. Als Ziffer in der Datenschrift statt
   im orangen Kreis: sie zählt, sie ruft nicht. */
.detail-feature__nr {
  position: absolute; left: 0; top: var(--space-l);
  font-family: var(--font-data);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--neptun-steel-400);
  font-variant-numeric: tabular-nums;
}
.detail-feature:first-child .detail-feature__nr,
.detail-layout--ohne-bild .detail-feature:nth-child(2) .detail-feature__nr { top: 0; }
.detail-feature__nr::after {
  content: '';
  display: block;
  width: 1.25rem; height: 1px;
  margin-top: var(--space-xs);
  background: var(--neptun-orange);
}
.detail-feature__title { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); margin-bottom: var(--space-xs); }
.detail-feature__text  { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); line-height: 1.65; max-width: 58ch; }

.detail-grafik {
  margin: 0;
  position: sticky;
  top: var(--sticky-offset);
  background: var(--neptun-surface-050);
  border-radius: var(--radius-l);
  padding: clamp(var(--space-m), 2vw, var(--space-xl));
}
.detail-grafik img { width: 100%; height: auto; display: block; }
.detail-grafik__hint {
  margin-top: var(--space-m);
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
  text-align: center;
}
.detail-section__quelle {
  margin-top: var(--space-xl);
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
}

/* Der frühere Abschnitt „Weitere Produktbilder" ist entfallen: die
   Aufnahmen sind vollständig über die Galerie im Kopfbereich
   erreichbar. Die zugehörigen Regeln (.bildstrecke*) wurden mit
   entfernt, damit kein ungenutztes CSS zurückbleibt. */

/* =========================================================================
   LIGHTBOX — ohne Fremdbibliothek, ein Element je Seite
   ========================================================================= */
/* Ein Autorenregel-`display` schlägt das `display:none`, das der Browser dem
   hidden-Attribut gibt. Ohne diese Zeile stünde das Overlay dauerhaft offen. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-s);
  padding: clamp(var(--space-m), 4vw, var(--space-2xl));
  background: rgba(10, 10, 12, 0.92);
}
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
.lightbox__figure img {
  max-width: 100%; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
  background: var(--neptun-surface-100);
}
.lightbox__close, .lightbox__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.75rem; line-height: 1;
  cursor: pointer;
}
.lightbox__close { position: absolute; top: var(--space-l); right: var(--space-l); font-size: 1.5rem; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--neptun-orange); outline-offset: 2px; }

@media (max-width: 599px) {
  .lightbox__nav { width: 38px; height: 38px; }
}

/* =========================================================================
   ABSCHLUSS-CTA
   ========================================================================= */
/* Ein einziger dunkler Block, auf jeder Anhängerseite dieselbe Komponente.
   Die Werte stehen bewusst hier und nicht im Template, damit es keine
   zweite, abweichende Ausprägung geben kann. */
/* Fläche und Radius kommen aus den Tokens statt als feste Werte: --radius-l
   ist mit 14px genau der gewünschte Bereich, --neptun-graphite-900 (#17171A)
   der bereits im System vorhandene dunkle Ton. Ein eigener Hexwert hier hätte
   eine zweite, minimal abweichende Dunkelfläche neben Hero und Modellwelten
   erzeugt. */
.anfrage-cta {
  margin-block: var(--section-space);
  padding: clamp(var(--space-xl), 3.5vw, var(--space-2xl));
  border-radius: var(--radius-l);
  background: var(--neptun-graphite-900);
  color: var(--neptun-white);
}
.anfrage-cta__inner {
  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;
}
@media (max-width: 899px) { .anfrage-cta__inner { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* Was in die Anfrage übernommen wird, sichtbar statt behauptet. */
.anfrage-cta__zusammenfassung {
  display: flex; align-items: center; gap: var(--space-l);
  padding: var(--space-m);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.04);
}
.anfrage-cta__bild {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: var(--radius-s);
  background: var(--neptun-white);
  display: grid; place-items: center;
  overflow: hidden;
}
.anfrage-cta__bild img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.anfrage-cta__daten { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anfrage-cta__label {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.anfrage-cta__modell { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); }
.anfrage-cta__sku { font-family: var(--font-data); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.6); }

.anfrage-cta__title { font-size: var(--fs-display-m); font-weight: var(--fw-semibold); margin-bottom: var(--space-s); }
.anfrage-cta__text  { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-body-s); max-width: 56ch; margin-bottom: var(--space-l); }
@media (max-width: 900px) { }

/* ---------- Zubehör-Konfigurator ---------- */
.configurator {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 1023px) { .configurator { grid-template-columns: 1fr; } }

.configurator__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
@media (max-width: 640px) { .configurator__list { grid-template-columns: 1fr; } }

/* Die Zusammenfassung bleibt beim Blättern durch die Zubehörliste stehen.
   Weil sie im Grid der Sektion liegt, endet das Mitlaufen automatisch am
   Ende des Zubehörbereichs — sie schiebt sich nie über CTA oder Footer.
   Die Obergrenze der Höhe verhindert, dass eine lange Auswahl über den
   Bildschirm hinauswächst; dann scrollt die Liste in sich. */
.configurator__summary {
  position: sticky; top: var(--sticky-offset);
  max-height: calc(100vh - var(--header-height) - var(--admin-bar-height) - var(--space-2xl));
  overflow-y: auto;
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  background: var(--neptun-white);
  padding: var(--space-l);
}
.configurator__summary-title { font-family: var(--font-body); font-weight: var(--fw-semibold); margin-bottom: var(--space-m); }
.configurator__summary-product {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: var(--space-m); margin-bottom: var(--space-m);
  border-bottom: var(--line-hairline);
}
.configurator__summary-label { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.configurator__summary-value { font-size: var(--fs-body-s); font-weight: var(--fw-medium); }

/* Gleiche Falle wie bei der Lightbox: display der Autorenregel würde das
   hidden-Attribut aushebeln. */
.configurator__summary-list[hidden] { display: none; }
.configurator__summary-list {
  list-style: none; margin: 0 0 var(--space-l); padding: 0;
  display: flex; flex-direction: column; gap: var(--space-s);
}
.configurator__summary-item {
  display: flex; flex-direction: column; gap: 1px;
  font-size: var(--fs-body-s);
  padding-left: var(--space-m);
  border-left: 2px solid var(--neptun-orange);
}
.configurator__summary-sku { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }

.configurator__summary-count { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); margin-bottom: var(--space-l); }
.configurator__summary .btn { width: 100%; }

/* Auf Tablet und Mobil steht die Zusammenfassung unter der Liste und darf
   nicht mitlaufen — sie hätte dort keinen Platz, an dem sie stehen bleiben
   könnte, und würde nur Inhalt verdecken. */
@media (max-width: 1023px) {
  .configurator__summary { position: static; max-height: none; overflow: visible; }
}

/* ---------- Ähnliche Modelle ---------- */
/* Keine Trennlinie: darüber steht der dunkle CTA-Block, der bereits klar
   abgrenzt. */
.similar-models { padding-block: var(--section-space) var(--space-3xl); }

/* ---------- Sticky Mobile-CTA ---------- */
.product-sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  background: var(--neptun-white);
  border-top: var(--line-hairline);
  padding: var(--space-s) var(--space-m);
  padding-bottom: max(var(--space-s), env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(18,18,20,0.08);
}
.product-sticky-cta .btn { width: 100%; }
@media (max-width: 1023px) { .product-sticky-cta { display: block; } }
/* Platz am Seitenende reservieren, damit die Sticky-CTA nichts verdeckt. */
@media (max-width: 1023px) { .single-product-page { padding-bottom: 76px; } }

/* ============================================================ HÄNDLERBLÖCKE
   Ersatzteilzeichnungen und passende Ersatzteile auf der Anhängerseite.
   Diese Abschnitte sieht nur, wer angemeldet ist — sie werden für Gäste
   gar nicht gerendert (siehe single-product.php). Die abgesetzte Fläche
   macht auf den ersten Blick klar, dass hier interne Angaben stehen. */

.haendler-block {
  background: var(--neptun-surface-050);
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  padding: var(--space-l);
}

.haendler-block__marke {
  display: inline-block;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neptun-graphite-900);
  background: var(--neptun-orange-tint-24);
  border-radius: var(--radius-s);
  padding: 0.15rem 0.5rem;
  margin-bottom: var(--space-s);
}

.haendler-block__text {
  color: var(--color-text-on-light-muted);
  margin: 0 0 var(--space-m);
}
.haendler-block__text a { color: var(--color-accent-hover); }

.haendler-doks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }

.haendler-dok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  background: var(--neptun-white);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}

.haendler-dok__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.haendler-dok__titel { font-weight: var(--fw-medium); color: var(--color-text-on-light); overflow-wrap: anywhere; }
.haendler-dok__meta { font-size: var(--fs-caption); color: var(--neptun-steel-400); }

.haendler-dok__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.haendler-dok__aktionen .btn { padding: 0.45rem 0.9rem; font-size: var(--fs-caption); }

@media (max-width: 600px) {
  .haendler-block { padding: var(--space-m); }
  .haendler-dok { flex-direction: column; align-items: stretch; }
  .haendler-dok__aktionen .btn { flex: 1 1 auto; text-align: center; }
}