/**
 * NEPTUN DESIGN SYSTEM — CONTENTSEITEN (Phase 10)
 * Kontakt, Garantie, Über Neptun, Vertriebspartner.
 */

/* ---------- Seiten-Hero (ruhig, textbasiert) ----------
   Wie .section in 02-components.css: der Höchstwert entspricht exakt dem
   bisherigen festen Wert, auf dem Desktop ändert sich also nichts. Nur auf
   schmalen Bildschirmen schrumpft der Abstand mit, statt dort eine halbe
   Bildschirmhöhe leer zu lassen. */
.page-hero { padding-block: clamp(2rem, 5vw, var(--space-3xl)) clamp(1.5rem, 4vw, var(--space-2xl)); }
.page-hero__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); }
.page-hero__lede { color: var(--color-text-on-light-muted); font-size: var(--fs-body-l); max-width: 60ch; margin-top: var(--space-m); }

/* ---------- Inszenierter Hero (Über Neptun) — dunkel, größer ----------
   KORREKTUR (09/2026): Hier stand zusätzlich margin-bottom: var(--space-3xl).
   Der folgende weiße Abschnitt bringt seinen eigenen padding-block mit — beide
   Werte addierten sich, sodass oberhalb von „Produktvielfalt" rund 9 rem
   standen, unterhalb der Kacheln aber nur 4,5 rem. Der Abstand wird jetzt
   ausschließlich vom nachfolgenden Abschnitt bestimmt und ist dadurch oben
   und unten identisch — auf jeder Breite, weil derselbe clamp()-Wert greift. */
.page-hero--immersive {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  padding-block: clamp(2.75rem, 7vw, var(--space-4xl));
}
.page-hero--immersive .page-hero__lede { color: var(--neptun-steel-200); }
.page-hero--immersive h1 { color: #fff; }

/* ---------- Kontakt ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-3xl); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: var(--space-2xl); } }

.contact-card { border: var(--line-hairline); border-radius: var(--radius-l); padding: var(--space-xl); }
.contact-card__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-l); margin-bottom: var(--space-m); }
.contact-card__row { display: flex; gap: var(--space-m); padding: var(--space-s) 0; border-top: var(--line-hairline); font-size: var(--fs-body-s); }
.contact-card__row:first-of-type { border-top: none; }
.contact-card__row dt { color: var(--color-text-on-light-muted); flex: 0 0 100px; }
.contact-card__row dd { margin: 0; }
.contact-card__row a { color: var(--color-text-on-light); }
.contact-card__row a:hover { color: var(--neptun-orange-hover); }

.contact-map-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
  font-size: var(--fs-body-s);
}

.contact-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); margin-bottom: var(--space-2xl); }
@media (max-width: 640px) { .contact-choice-grid { grid-template-columns: 1fr; } }
.contact-choice-card { border: var(--line-hairline); border-radius: var(--radius-l); padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-m); }
.contact-choice-card__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-l); }
.contact-choice-card p { color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }
.contact-choice-card .btn { align-self: flex-start; margin-top: auto; }

.contact-form-wrap { border-top: var(--line-hairline); padding-top: var(--space-2xl); margin-top: var(--space-3xl); }

/* ---------- Garantie: Fakten-Leiste, Ablauf, Details ---------- */
.warranty-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); padding: var(--space-2xl) 0; border-top: var(--line-technical); border-bottom: var(--line-technical); margin-bottom: var(--space-3xl); }
@media (max-width: 767px) { .warranty-facts { grid-template-columns: 1fr; gap: var(--space-l); } }

/* .content-placeholder entfernt (Phase 12) — lief bisher öffentlich sichtbar
   als "fehlt noch"-Box. Ersetzt durch neptun_admin_only_note() (siehe
   functions.php) — Inhalte, die noch nicht vorliegen, werden entweder gar
   nicht gerendert oder neutral im Fließtext behandelt, nie als sichtbare
   Entwicklernotiz. */

/* ---------- Über Neptun: Bereiche/Vielfalt ---------- */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .category-grid { grid-template-columns: 1fr; } }
.category-tile { border: var(--line-hairline); border-radius: var(--radius-m); padding: var(--space-l); }
.category-tile__label { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-m); }
.category-tile__count { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin-top: var(--space-2xs); }

/* ---------- Vollflächige, dunkle Kontrastsektion (z. B. Konstruktion/
   Verzinkung auf "Über Neptun") — bewusst KEIN Card-Muster, sondern offene,
   asymmetrische Bild/Text-Komposition mit großer Typografie. */
.feature-band {
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  padding-block: clamp(2.5rem, 6vw, var(--space-3xl));
}
.feature-band__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
@media (max-width: 900px) { .feature-band__layout { grid-template-columns: 1fr; gap: var(--space-xl); } }
.feature-band__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-m); }
.feature-band h2 { color: #fff; margin-bottom: var(--space-l); }
.feature-band p { color: var(--neptun-steel-200); max-width: 52ch; margin-bottom: var(--space-l); }
/* background ergänzt: Auf der Startseite sitzt in diesem Rahmen eine
   16:9-Grafik mit Text, die mit object-fit:contain vollständig sichtbar
   bleiben muss. Dabei entstehen oben und unten schmale freie Streifen — ohne
   eigene Flächenfarbe wären die durchsichtig und der Rahmen bekäme eine
   sichtbare Kante. Die Farbe entspricht dem Sektionshintergrund, für die
   cover-Variante auf „Über Neptun" ändert sich dadurch nichts (das Bild
   deckt die Fläche dort vollständig ab). Abmessungen, Radius und Rahmen
   bleiben unverändert. */
.feature-band__visual { aspect-ratio: 4/3; border-radius: var(--radius-l); border: var(--line-hairline-dark); overflow: hidden; background: var(--neptun-graphite-950); }
@media (min-width: 901px) { .feature-band__layout--reverse .feature-band__visual { order: 2; } }
/* ---------- Dandler-Trust-Block (wiederverwendbar, aber bewusst zurückhaltend
   eingesetzt — siehe Rollentrennung Neptun/Dandler) ---------- */
@media (max-width: 900px) { }

/* Dezenter Dandler-Hinweis (z. B. am Ende von "Über Neptun") — bewusst
   klein und ruhig, keine zweite Marke, kein eigener Contentblock.
   WICHTIG: eigener margin-block statt Section-Wrapper, damit der Abstand
   zur vorherigen Section UND zum Footer stimmt, auch wenn kein <section>
   drumherum liegt (behobener Footer-Spacing-Bug aus dem QA-Fund). */
.dandler-mention {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  margin-block: var(--space-2xl);
  border-top: var(--line-hairline);
  font-size: var(--fs-body-s);
  color: var(--color-text-on-light-muted);
}
.dandler-mention a { color: var(--color-text-on-light); font-weight: var(--fw-medium); }

/* ---------- Garantie: Verzinkungs-Erklärschritte ---------- */
.zinc-explainer { display: flex; flex-direction: column; gap: var(--space-m); counter-reset: zstep; }
.zinc-explainer li { display: flex; gap: var(--space-m); align-items: baseline; font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }
.zinc-explainer li::before { counter-increment: zstep; content: counter(zstep); font-family: var(--font-data); color: var(--neptun-orange); flex: 0 0 1.25rem; }

.care-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 640px) { .care-list { grid-template-columns: 1fr; } }
.care-item { display: flex; gap: var(--space-s); padding: var(--space-m); border: var(--line-hairline); border-radius: var(--radius-m); font-size: var(--fs-body-s); }
.care-item__mark { color: var(--neptun-orange); flex: 0 0 auto; }

.source-note { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin-top: var(--space-l); }
.source-note a { color: inherit; text-decoration: underline; }

/* ---------- Händler-Finder ---------- */
.dealer-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-2xl); align-items: start; }
@media (max-width: 1023px) { .dealer-layout { grid-template-columns: 1fr; } }

/* Karte: hell und ruhig, Orange ausschließlich für Händlerstandorte und die
   aktive Auswahl. Die Karte unterstützt die Liste, sie konkurriert nicht
   mit ihr um Aufmerksamkeit. */
.dealer-map-wrap {
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--neptun-white);
  /* Der Innenabstand sitzt hier und NICHT auf .dealer-map__stage: die
     Kurzinfo wird in Prozent der Stage positioniert, ein Innenabstand dort
     würde diese Prozentwerte gegenüber dem SVG verschieben. */
  padding: var(--space-l);
}

.dealer-map__stage { position: relative; }
.dealer-map { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- Bundesländer ----
   Vorher: fast weiße Fläche mit weißer Trennlinie — die Grenzen waren dadurch
   praktisch unsichtbar und Österreich wirkte wie ein einziger Block. Jetzt
   eine erkennbare, aber zurückhaltende Linie in Stahlgrau auf hellem Grund.
   Der weiche Schlagschatten liegt auf der Gruppe, greift also nur an der
   Außenkontur des Landes und hebt die Silhouette ab, ohne die inneren
   Grenzen zu verdunkeln. */
.dealer-map__states {
  /* Sehr weicher Schatten auf der GRUPPE: greift nur an der Außenkontur des
     Landes, die inneren Grenzen bleiben davon unberührt. Hebt die Silhouette
     minimal vom Weiß ab, ohne die Karte schwer wirken zu lassen. */
  filter: drop-shadow(0 1px 3px rgba(18, 18, 20, 0.07));
}

/* Alle Bundesländer gleich hell. Die Fläche trägt keine Information — die
   Information sind die Händler, und dafür ist ausschließlich Orange
   reserviert. Erkennbarkeit entsteht über die feine Grenzlinie, nicht über
   unterschiedliche Grautöne. */
.dealer-map__state {
  fill: #FCFCFB;
  stroke: var(--neptun-steel-200);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

/* Anklickbar sind nur Bundesländer, in denen es tatsächlich Händler gibt.
   Sichtbar wird das erst beim Überfahren — vorher soll nichts ablenken. */
.dealer-map__state[data-has-dealers] { cursor: pointer; }
.dealer-map__state[data-has-dealers]:hover { fill: var(--neptun-surface-100); }

/* Aktive Filterauswahl bewusst in Grau, nicht in Orange: Orange bleibt
   ausschließlich den Händlerstandorten vorbehalten. */
.dealer-map__state.is-selected { fill: var(--neptun-surface-100); stroke: var(--neptun-steel-400); }
.dealer-map__state.is-dimmed { opacity: 0.45; }

/* ---- Händler-Pins ---- */
.dealer-map__pin {
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.dealer-map__pin-shape {
  fill: var(--neptun-orange);
  stroke: var(--neptun-white);
  stroke-width: 1.6;
  /* KORREKTUR: transform-box gehört auf dasselbe Element wie transform-origin.
     Ohne die Angabe gilt in SVG der Standard view-box — „center bottom" wäre
     also die Mitte des unteren Kartenrands, und der Pin sprang beim Überfahren
     quer über die Karte. Mit fill-box bezieht sich der Ursprung auf den Pin
     selbst, er wächst also exakt aus seiner Spitze. */
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform var(--duration-fast) var(--ease-standard), fill var(--duration-fast) var(--ease-standard);
}
.dealer-map__pin-dot { fill: var(--neptun-white); pointer-events: none; }

/* Schmaler Bodenschatten unter der Pin-Spitze — lässt den Marker auf der
   Fläche aufsitzen statt darüber zu schweben. Rein dekorativ, liegt unter
   dem Pin und nimmt keine Klicks entgegen. */
.dealer-map__pin-ground { fill: rgba(18, 18, 20, 0.16); pointer-events: none; }

.dealer-map__pin:hover .dealer-map__pin-shape,
.dealer-map__pin.is-active .dealer-map__pin-shape {
  transform: scale(1.18);
  fill: var(--neptun-orange-hover);
}
.dealer-map__pin:focus-visible { outline: none; }
.dealer-map__pin:focus-visible .dealer-map__pin-shape {
  stroke: var(--neptun-graphite-950);
  stroke-width: 2.4;
  transform: scale(1.18);
}
.dealer-map__pin.is-hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .dealer-map__pin-shape { transition: none; }
}

/* ---- Kurzinfo ---- */
.dealer-map__tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 30px));
  z-index: 2;
  min-width: 160px;
  max-width: 240px;
  padding: var(--space-s) var(--space-m);
  background: var(--neptun-graphite-900);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  pointer-events: none;
}
.dealer-map__tooltip.is-flipped { transform: translate(-85%, calc(-100% - 30px)); }
.dealer-map__tooltip-name { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-body-s); }
.dealer-map__tooltip-address { display: block; font-size: var(--fs-caption); color: var(--neptun-steel-300); margin-top: 2px; }

/* ---- Suche und Liste ---- */
.dealer-search { margin-bottom: var(--space-m); }
.dealer-search input, .dealer-search select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  margin-bottom: var(--space-s);
}
.dealer-search input:focus-visible, .dealer-search select:focus-visible { border-color: var(--neptun-orange); outline: none; }

.dealer-count { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin: 0 0 var(--space-m); }

.dealer-list { display: flex; flex-direction: column; gap: var(--space-m); max-height: 620px; overflow-y: auto; }
.dealer-card {
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.dealer-card:hover, .dealer-card.is-active { border-color: var(--neptun-orange); background: var(--neptun-orange-tint-10); }
.dealer-card:focus-visible { outline: 2px solid var(--neptun-orange); outline-offset: 2px; }
.dealer-card__name { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-m); margin-bottom: 2px; }
.dealer-card__address { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin-bottom: var(--space-s); }
.dealer-card__contact-person { font-size: var(--fs-caption); margin-bottom: var(--space-s); }
.dealer-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-s); font-size: var(--fs-caption); }
.dealer-card__meta a { color: var(--neptun-orange-hover); }
.dealer-card__hours,
.dealer-card__services { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin-top: var(--space-xs); }

/* Auf schmalen Bildschirmen zuerst die Liste — dort steht die Information,
   die Karte ist Orientierung. Die Liste bekommt dann die volle Höhe. */
@media (max-width: 1023px) {
  .dealer-layout { display: flex; flex-direction: column; }
  .dealer-panel { order: -1; }
  .dealer-list { max-height: none; }
  .dealer-map-wrap { padding: var(--space-m); }
}

/* ============================================================ HÄNDLER WERDEN
   Abschnitt am Ende von /vertriebspartner/. Richtet sich an Fachbetriebe,
   nicht an Endkunden — deshalb optisch abgesetzt, aber ohne Lautstärke. */

.haendler-werden__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  background: var(--neptun-surface-050);
  border: var(--line-hairline);
  border-left: 3px solid var(--neptun-orange);
  border-radius: var(--radius-l);
}

.haendler-werden__text {
  margin: var(--space-s) 0 0;
  color: var(--color-text-on-light-muted);
  max-width: 56ch;
}

.haendler-werden__aktion { display: flex; flex-direction: column; gap: var(--space-xs); }
.haendler-werden__aktion .btn { text-align: center; }

@media (max-width: 860px) {
  .haendler-werden__inner { grid-template-columns: 1fr; gap: var(--space-l); padding: var(--space-l); }
}