/* =========================================================================
   D2 - autohaus.rynex.de  (ergaenzt styles.css, ueberschreibt gezielt)
   G5 Navigation + G6 Hero (Karussell) + O10c (gefüllter Sekundär-Button).
   Farben/Fonts aus styles.css (:root). Nur D2-spezifische Regeln hier.
   ========================================================================= */

/* G5-Nav nutzt die Basis-Klassen (.site-nav/.primary-nav) 1:1 wie G1 -
   kein CTA, kein Claim, keine Dropdowns. Keine eigenen Groessen/Fonts. */

/* Button-Schrift auf D2 einen Tick leichter: Semi-Bold statt Bold (Inter ist
   Variable Font 400-700, 600 wird nativ gerendert). Nur D2 (.ah-body), D1 unberuehrt. */
.ah-body .button { font-weight: 600; }

/* --- O10c: gefuellte Sekundaer-Button-Variante (Dunkelblau gefuellt) ---
   Kein eigenes Objekt: die gefuellte Variante von O10.
   O1 = Primaer/Magenta, O10 = Sekundaer in Outline (.secondary/.secondary-dark)
   ODER gefuellt (.secondary-fill). Hover-Wert provisorisch (Vorgabe offen). */
.button.secondary-fill {
  background: var(--lead);
  color: var(--paper);
  border-color: transparent;
}
.button.secondary-fill:hover {
  background: #22305f; /* PROVISORISCH - abgedunkeltes #2c3f84 */
}

/* --- G6: Hero (Karussell) --- */
.ah-hero {
  position: relative;
  height: clamp(560px, 80vh, 900px);
  background: var(--dark-bg);
  overflow: hidden;
}

.ah-hero-bg { position: absolute; inset: 0; z-index: 0; }

.ah-slide-bg {
  position: absolute;
  inset: 0;
  background-color: var(--dark-bg); /* Fallback fuer Slide ohne Bild (Platzhalter) */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 700ms ease;
}
.ah-slide-bg.is-active { opacity: 1; }

.ah-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.ah-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
}

.ah-hero-text {
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

.ah-hero-eyebrow {
  color: var(--paper);
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}

.ah-hero-divider {
  width: 150px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.5rem;
}

/* Headline: alle Slides gestapelt, Crossfade. min-height traegt zwei Zeilen. */
.ah-hero-headline {
  position: relative;
  min-height: 2.2em;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.5rem, 1.4rem + 4.8vw, 4.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.ah-headline-slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.ah-headline-slide.is-active { opacity: 1; }
/* Jede Headline-Zeile bleibt einzeilig (zweizeilige Headline laut G6-Vorgabe);
   verhindert den Umbruch in eine dritte Zeile, der die feste Hero-Hoehe sprengte. */
.ah-headline-slide .line1 { display: block; white-space: nowrap; color: var(--paper); }
.ah-headline-slide .line2 { display: block; white-space: nowrap; color: var(--highlight); }

.ah-hero-body {
  color: var(--light-bg);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 1.5rem 0 1.75rem;
}

/* Buttons auf EINER Zeile (nicht gestapelt) -> von 260px-Mindestbreite abweichen
   (wie O1f/O1g), nicht umbrechen. */
.ah-hero-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.ah-hero-buttons .button {
  min-width: auto;
  white-space: nowrap;
}

.ah-hero-dots {
  display: flex;
  gap: 0.6rem;
}
.ah-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.ah-dot.is-active { background: var(--highlight); }

/* --- C12: Bereichs-Baustein (Vorher/Nachher) --- */
/* Hintergrund alterniert: erste Section nach G6 weiß, dann hellgrau (wie D1 nach G2). */
.ah-area { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; scroll-margin-top: 90px; }
.ah-area:nth-child(odd)  { background: var(--paper); }
.ah-area:nth-child(even) { background: var(--light-bg); }

/* Kopf: zwei Spalten, oben bündig. Links (40%) Eyebrow (Nummer + Label) + H2,
   rechts (60%) der Begleittext. */
.ah-area-head {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
  margin-bottom: 2.5rem;
}
.ah-area-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.8rem;
}
.ah-area-num {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--lead);
}
.ah-area-label {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lead);
}
.ah-area-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lead);
  margin: 0;
}
.ah-area-intro {
  align-self: end;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 0;
}

/* Bild-Paar nebeneinander - Fokus rechts: linkes Bild 60% seiner
   bisherigen Groesse (50% -> 30%), rechtes waechst auf 70%. */
.ah-area-images {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  align-items: center;
}
.ah-area-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 588 / 441;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Trennlinie zwischen Bild-Paar und Drei-Spalten-Block - Gold (wie Figma). */
.ah-area-rule {
  border: 0;
  height: 1px;
  background: var(--gold);
  margin: 0 0 2.5rem;
}

/* Drei Spalten: Zitat | Heute | Danach */
.ah-area-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  margin-bottom: 2.5rem;
}
.ah-area-quote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}
.ah-area-quote p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.ah-area-quote footer {
  font-style: italic;
  font-size: 0.9rem;
  color: #5b636b;
}
.ah-area-list h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lead);
  margin: 0 0 1rem;
}
.ah-area-list ul { list-style: none; margin: 0; padding: 0; }
.ah-area-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
  color: var(--ink);
}
/* Heute: neutraler Strich-Marker */
.ah-area-today li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  background: #9aa1a8;
}
/* Danach: Cyan-Punkt */
.ah-area-after li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--highlight);
}

.ah-area-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center; /* einzelner CTA zentriert, wie C13 */
}

/* --- C13: Bandbreite (Kachel-Raster auf Bildhintergrund) --- */
/* Vollflaechiges dunkles Bild + Overlay 20%; Inhalt zentriert darueber.
   Nimmt sich aus der Hell/Grau-Alternierung der C12-Sektionen heraus. */
.ah-band {
  position: relative;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0;
  scroll-margin-top: 90px;
  background-color: var(--dark-bg);
  background-size: cover;
  background-position: center;
}
.ah-band-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.ah-band-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Kopf: identischer Aufbau wie C12 (.ah-area-head) - zwei Spalten 40/60,
   links Eyebrow + H2, rechts Begleittext unten buendig. Linksbuendig (nicht
   zentriert wie der Rest der Sektion). Schriftgroessen wie C12. */
.ah-band-head {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
  margin-bottom: 3rem;
  text-align: left;
}
.ah-band-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--highlight);
  margin: 0 0 0.8rem;
}
.ah-band-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
}
.ah-band-intro {
  align-self: end;
  color: var(--light-bg);
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 0;
}

/* Dreispaltiges Kachel-Raster (Kachelzahl unbegrenzt), weiss, Rahmen +
   Radius 16px, rein informativ. */
.ah-band-grid {
  display: grid;
  /* Spaltenweise Fluss: je 4 zusammengehörige Kacheln stehen übereinander in
     einer Spalte. Spaltenzahl unbegrenzt (füllt sich automatisch auf). */
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
  text-align: left;
}
.ah-band-tile {
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.08); /* Rahmenfarbe provisorisch - exakter Figma-Wert offen */
  border-radius: 16px;
  padding: 1.75rem;
}
/* Hervorgehobene Kachel: sehr schmale Cyan-Umrandung + Cyan-Glow. Optional
   per tile-Flag `glow: true` in autohaus.js. */
.ah-band-tile.is-glow {
  border: 1px solid var(--highlight);
  box-shadow:
    0 0 0 1px var(--highlight),
    0 0 20px rgba(0, 232, 255, 0.55),
    0 0 40px rgba(0, 232, 255, 0.3);
}
/* Kopfzeile der Kachel: Titel links, O3-Badge rechts, an der ersten Zeile
   ausgerichtet (bleibt oben rechts, auch wenn der Titel umbricht). */
.ah-band-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.ah-band-tile-badge {
  flex: 0 0 auto;
  margin-bottom: 0; /* .badge-Basismarge im Kopf nicht noetig */
}
.ah-band-tile-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lead);
  margin: 0 0 0.6rem;
}
.ah-band-tile-text {
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

.ah-band-closing {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 700;
  color: var(--paper);
  margin: 0 auto 2.25rem;
  max-width: 40ch;
}
.ah-band-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* --- C14: Kundenbeispiel (Story mit Kennzahlen) --- */
/* Weiss. Kopf (Eyebrow dunkelblau + H2) -> Zweispalter: links 3 Absaetze +
   Foto darunter, rechts 4 Kennzahlen. Gold-Trennlinie NUR zwischen den
   Kennzahlen (kein senkrechter Trennstrich -> nicht C3). Buttons wie C12. */
.ah-case {
  background: var(--paper);
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
  scroll-margin-top: 90px;
}
.ah-case-head { margin-bottom: 2.5rem; }
.ah-case-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lead);
  margin: 0 0 0.8rem;
}
.ah-case-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lead);
  margin: 0;
}

/* Zweispalter: Story links (breiter), Kennzahlen rechts. */
.ah-case-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}
.ah-case-story p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.ah-case-photo {
  width: 100%;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-top: 1.4rem;
}

/* Vier Kennzahlen, gestapelt. Gold-Trennlinie nur ZWISCHEN benachbarten
   Kennzahlen (drei Linien), nicht ueber der ersten. */
.ah-case-stats { display: flex; flex-direction: column; }
.ah-case-stat + .ah-case-stat {
  border-top: 1px solid var(--gold);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.ah-case-stat-value {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--lead);
  margin: 0 0 0.5rem;
}
.ah-case-stat-label {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.ah-case-stat-star {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.1em;
}
.ah-case-note {
  margin: 1.75rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.7;
}

.ah-case-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3rem;
  justify-content: center; /* einzelner CTA zentriert, wie C13 */
}

/* === C15 Whitepaper + Checkliste (Gated-Content-Teaser mit Formular) ===
   Dunkler Zweispalter: links Angebot, rechts C15-eigenes Formular. */
.ah-wp {
  background: var(--lead); /* Dunkelblau (C15-Vorgabe) */
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0;
  scroll-margin-top: 90px;
}
.ah-wp-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr; /* Formular schmaler als das Angebot */
  column-gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: stretch; /* Formular streckt sich auf die Hoehe der linken Spalte */
}

/* Linke Spalte: Angebot */
.ah-wp-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--highlight);
  margin: 0 0 0.8rem;
}
.ah-wp-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 1.2rem;
}
.ah-wp-intro {
  color: var(--light-bg);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
/* Nutzen-Liste inline, normale Aufzaehlung mit Cyan-Punkt (wie C12 "Danach"). */
.ah-wp-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.ah-wp-benefits li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--light-bg);
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.ah-wp-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--highlight);
}
/* Cover-Vorschau: aufgefaechertes Whitepaper-Mockup. */
.ah-wp-covers {
  margin-top: 0.5rem;
}
.ah-wp-covers img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* Rechte Spalte: C15-eigenes Formular, heller Rahmen auf Dunkel. */
.ah-wp-form {
  display: grid;
  gap: 1.1rem;
  align-content: space-between; /* Felder ueber die volle Hoehe verteilen -> laenger */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.ah-wp-field { display: grid; gap: 0.4rem; }
.ah-wp-label {
  color: var(--light-bg);
  font-size: 0.9rem;
  font-weight: 600;
}
.ah-wp-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.ah-wp-field input:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 1px;
}
.ah-wp-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  color: var(--light-bg);
  font-size: 0.85rem;
  line-height: 1.45;
}
.ah-wp-check input { margin-top: 0.2rem; }
/* Button + Statusmeldung als eine Grid-Zelle: verhindert, dass das
   space-between des Formular-Grids den Status vom Button wegdrueckt. */
.ah-wp-submit-wrap { margin-top: 0.5rem; display: grid; gap: 0.25rem; }
.ah-wp-submit { margin-top: 0; }
/* Verhaltensoption "Disabled bis gueltig" (Zustand des Buttons, kein neues Objekt):
   bis das Formular gueltig ist 45% Deckkraft, nicht klickbar (autohaus.js schaltet
   frei). Gilt fuer C15 (ah-wp-submit) und C17 (ah-news-submit) - beide O10 Outline
   (secondary-dark) auf dunkelblauem Grund - sowie C19 (ah-cform-submit). */
.ah-wp-submit:disabled,
.ah-news-submit:disabled,
.ah-cform-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inline-Statusmeldung unter dem Whitepaper-Button. Erfolg UND Fehler = Cyan
   (--highlight, gleich wie Eyebrow): Magenta (--accent) ist auf dem dunklen
   Grund unlesbar. autohaus.js blendet sie ein. */
.ah-wp-status {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--highlight);
}
.ah-wp-status.is-error { color: var(--highlight); }

/* === C16 Über Rynex (Kurzprofil mit Checkliste) ===
   Kompakter DREISPALTER, weiss, KEIN Bild, KEINE Button-Reihe.
   Spalte 1 Titel (Eyebrow dunkelblau + H2), Spalte 2 Fließtext im Blocksatz,
   Spalte 3 Cyan-Punkt-Liste + zwei unauffaellige Absprungpunkte (KEINE Buttons).
   Siehe content-bausteine.md C16. */
.ah-ueber {
  background: var(--paper);
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
  scroll-margin-top: 90px;
}
.ah-ueber-grid {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr; /* Titel | Fließtext | Bullets+Absprung */
  column-gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

/* Spalte 1: Titel (Eyebrow + H2) */
.ah-ueber-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lead);
  margin: 0 0 0.8rem;
}
.ah-ueber-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent); /* H2 Magenta (C16-Vorgabe: H2 = Magenta) */
  margin: 0;
}

/* Spalte 2: Fließtext im Blocksatz (hyphens gegen grosse Wortabstaende). */
.ah-ueber-text {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  margin: 0 0 1.1rem;
}
.ah-ueber-text:last-child { margin-bottom: 0; }

/* Spalte 3: Cyan-Punkt-Checkliste (Muster wie C12 "Danach"/C15 Nutzen-Liste). */
.ah-ueber-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.ah-ueber-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.ah-ueber-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--highlight);
}

/* Zwei unauffaellige Absprungpunkte: klein, gedaempft, KEINE Buttons.
   Pfeil-Affordanz per ::after. Hover hebt dezent nach Dunkelblau. */
.ah-ueber-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ah-ueber-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5b636b; /* gedaempftes Grau (wie Zitat-Quelle C12), bewusst zurueckhaltend */
  text-decoration: none;
  width: fit-content;
  transition: color 150ms ease;
}
.ah-ueber-link::after { content: " \2192"; } /* -> */
.ah-ueber-link:hover { color: var(--lead); }

/* === C17 Newsletter-Streifen (Dunkelblau, horizontales Formular) ===
   Vollflaechiger Dunkelblau-Block, nimmt sich aus der Hell/Grau-Alternierung heraus.
   Kopf (Eyebrow weiss + H2 weiss) + horizontales Formular in hellem Rahmen:
   4 Felder in einer Reihe + Consent + Whitepaper-Toggle + O10-Outline-Button.
   Siehe content-bausteine.md C17. */
.ah-news {
  background: var(--lead); /* Dunkelblau, aus der Alternierung ausgenommen */
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
  scroll-margin-top: 90px;
}
.ah-news-head { margin-bottom: 2rem; }
.ah-news-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--paper);
  margin: 0 0 0.8rem;
}
.ah-news-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}

/* Formular: heller Rahmen auf Dunkelblau. */
.ah-news-form {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
/* Vier Felder nebeneinander. */
.ah-news-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}
.ah-news-field { display: grid; gap: 0.4rem; }
.ah-news-label {
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 600;
}
.ah-news-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.ah-news-field input:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 1px;
}
.ah-news-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  color: var(--paper);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.ah-news-check input { margin-top: 0.2rem; }

/* Button + Statusmeldung als eine Einheit (analog C15). */
.ah-news-submit-wrap { display: grid; gap: 0.25rem; }
/* Inline-Statusmeldung unter dem Newsletter-Button: Erfolg UND Fehler = Cyan
   (--highlight), da Magenta auf dunklem Grund unlesbar. autohaus.js blendet sie ein. */
.ah-news-status {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--highlight);
}
.ah-news-status.is-error { color: var(--highlight); }

/* === C18 Ansprechpartner (Personen-Karten mit Kontaktdaten) ===
   Oberer Teil der geteilten "kontakt"-Sektion. Hellgrau. Kopf + zwei umrahmte
   Karten (Daten links, rundes Foto rechts) + "direkt per Mail"-Zeile.
   Siehe content-bausteine.md C18. */
.ah-contact {
  background: var(--light-bg);
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
  scroll-margin-top: 90px;
}
.ah-contact-head { margin-bottom: 2.5rem; }
.ah-contact-eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lead);
  margin: 0 0 0.8rem;
}
.ah-contact-heading {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
}
/* H2-Farbe je nach Gestaltungsbedarf (Default dunkelblau). */
.ah-contact-heading--dunkelblau { color: var(--lead); }
.ah-contact-heading--magenta    { color: var(--accent); }
.ah-contact-heading--dunkelgrau { color: var(--ink); }
.ah-contact-intro {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0;
}
/* Zwei Karten nebeneinander. */
.ah-contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.ah-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.ah-contact-name {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lead);
  margin: 0 0 0.2rem;
}
.ah-contact-role { color: var(--ink); margin: 0 0 1rem; }
.ah-contact-phone {
  font-weight: 700;
  color: var(--lead);
  margin: 0 0 0.3rem;
}
.ah-contact-phone a { color: inherit; text-decoration: none; }
.ah-contact-mail { margin: 0; }
.ah-contact-mail a { color: var(--lead); text-decoration: underline; }
.ah-contact-mail a:hover { color: var(--accent); }
/* Rundes Foto: <img> bei echtem Foto, <span> als Fallback. */
.ah-contact-photo {
  flex: none;
  width: clamp(90px, 8vw, 130px);
  height: clamp(90px, 8vw, 130px);
  border-radius: 50%;
  background: var(--light-bg);
  object-fit: cover; /* echtes Foto (img) formatfuellend im runden Rahmen */
}
/* Zentrierte "direkt per Mail"-Zeile, dezenter Magenta-Akzent. */
.ah-contact-mailline {
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.ah-contact-mailline a { color: var(--accent); text-decoration: underline; }
.ah-contact-mailline a:hover { color: var(--accent-dark); }

/* === C19 Kontaktformular (Nachricht mit Textarea) ===
   Sieht aus wie G3: nutzt die globalen G3-Klassen (.contact-section/.contact-info/
   .contact-form/.form-*) aus styles.css - daher hier KEINE eigenen Regeln noetig.
   Nur der O1-Submit traegt zusaetzlich .ah-cform-submit (Hook fuer "Disabled bis
   gueltig", Regel bei den uebrigen D2-Formularen). */

/* --- Mobile (grob; feiner Feinschliff spaeter) --- */
@media (max-width: 900px) {
  .ah-ueber-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .ah-news-fields { grid-template-columns: 1fr; }
  .ah-contact-cards { grid-template-columns: 1fr; }
  .ah-area-head { grid-template-columns: 1fr; align-items: start; }
  .ah-area-images { grid-template-columns: 1fr; }
  .ah-area-cols { grid-template-columns: 1fr; }
  .ah-band-head { grid-template-columns: 1fr; }
  .ah-band-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .ah-case-body { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .ah-wp-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }

  .ah-nav .primary-nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--dark-bg);
    padding: 0.5rem 0 1rem;
    display: none;
  }
  .ah-nav .primary-nav.is-open { display: flex; }
  .ah-nav .primary-nav > li { width: 100%; }
  .ah-nav .primary-nav > li > a {
    display: block;
    padding: 0.95rem clamp(1.2rem, 0.6rem + 1.5vw, 2rem);
  }

  .ah-hero { height: auto; min-height: 78vh; }
  .ah-hero .container { padding-top: 3rem; padding-bottom: 3rem; }
}

/* --- Mobile-Feinschliff (Phones) --- */
@media (max-width: 560px) {
  /* Hero-Headline bleibt zweizeilig (nowrap-Zeilen lt. G6-Vorgabe), skaliert aber
     kleiner, damit sie nicht ueber den Viewport laeuft. */
  .ah-hero-headline { font-size: clamp(1.7rem, 7.2vw, 2.4rem); }

  /* Hero-Buttons stapeln statt nebeneinander -> kein horizontaler Overflow. */
  .ah-hero-buttons { flex-wrap: wrap; }
  .ah-hero-buttons .button { width: 100%; white-space: normal; }

  /* Karussell-Dots: sichtbarer Punkt bleibt 11px, Hit-Area >=44px. */
  .ah-hero-dots { gap: 0.25rem; }
  .ah-dot {
    width: 44px;
    height: 44px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ah-dot.is-active { background: transparent; }
  .ah-dot::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color 200ms ease;
  }
  .ah-dot.is-active::before { background: var(--highlight); }

  /* Ansprechpartner-Karten: Foto ueber den Text statt gequetscht daneben. */
  .ah-contact-card { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Toggle-Switch fuer Opt-ins (C15 Newsletter, C17/C19 Whitepaper+Newsletter) +
   Verschmelzung C16 "Über Rynex" mit C18 "Ansprechpartner".
   ========================================================================= */

/* --- Toggle-Switch (ersetzt Opt-in-Checkbox optisch) ---
   Greift in .ah-wp-check (C15, Grid) und .form-checkbox (C19, Flex): beide
   werden zu Flex, die native Checkbox wird versteckt, .ah-toggle-switch rendert. */
.ah-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}
.ah-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.ah-toggle-switch {
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.ah-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}
.ah-toggle input:checked ~ .ah-toggle-switch {
  background: var(--highlight);
  border-color: var(--highlight);
}
.ah-toggle input:checked ~ .ah-toggle-switch::after {
  transform: translate(18px, -50%);
}
.ah-toggle input:focus-visible ~ .ah-toggle-switch {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* --- C16+C18 verschmolzen: Ansprechpartner-Block unter dem Kurzprofil ---
   Gleiche Section (weiss), Abtrennung durch Abstand + Gold-Trennlinie. */
.ah-ueber-contact {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--gold);
}

/* === C20 Statusabschnitt (T7 Statusseiten: Danke / Abbestellt) ===================
   Dunkler, zentrierter Block zwischen Nav (G5) und Footer (G4). Zustand
   (success/farewell) steuert Icon- und Akzentfarbe.
   Der Block fuellt bei jeder Aufloesung die volle Hoehe zwischen Nav und Footer:
   Body = Flex-Spalte ueber min-height 100vh, main waechst, .ah-status fuellt main. */
.ah-status-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.ah-status-body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.ah-status {
  flex: 1 0 auto;
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 2rem + 5vw, 7rem) 0;
}

/* T7-Vollbild-Hintergrund (optional): ein fixes Bild hinter der GANZEN Statusseite
   (Nav, Inhalt, Footer). Aktiv, wenn die Seite im Front-matter `bgImage` setzt
   (Body bekommt .ah-status-body--image). Fixe Bild- + Overlay-Ebene liegen hinter
   dem Seiteninhalt (z-index < 0); Nav, C20-Block und Footer werden transparent,
   damit das Bild durchscheint. Ohne `bgImage` bleibt der dunkle C20-Block. */
.ah-fullbg,
.ah-fullbg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.ah-fullbg {
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.ah-fullbg-overlay {
  background: rgba(20, 24, 28, 0.62);
  z-index: -1;
}
.ah-status-body--image .ah-nav,
.ah-status-body--image .ah-status,
.ah-status-body--image .site-footer {
  background: transparent;
}
.ah-status-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ah-status-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 1.5rem;
}
.ah-status-icon svg { display: block; width: 100%; height: 100%; }
.ah-status--success .ah-status-icon { color: var(--highlight); }
.ah-status--farewell .ah-status-icon { color: var(--accent); }
.ah-status--error .ah-status-icon { color: var(--accent); }
.ah-status-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.ah-status--success .ah-status-eyebrow { color: var(--highlight); }
.ah-status--farewell .ah-status-eyebrow { color: var(--accent); }
.ah-status--error .ah-status-eyebrow { color: var(--accent); }
.ah-status-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 1.25rem;
}
.ah-status-text {
  color: var(--light-bg);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 1rem;
}
.ah-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}
/* Wenn ein Primaer-CTA (O1) ueber den Sekundaer-Buttons steht (z. B. Whitepaper-
   Download auf der Danke-Seite): CTA sitzt direkt unter dem Text, die Sekundaer-
   Buttons ruecken deutlich tiefer. */
.ah-status-buttons--secondary {
  margin-top: 3.5rem;
}

/* Newsletter-Abmeldeformular in der zentrierten C20-Karte: schmales, linksbuendiges
   E-Mail-Feld + zentrierter O1-Button. Feld-Grundstile kommen aus styles.css
   (.form-group), die auf dunklem Grund bereits hell/transparent sind. */
.ah-unsub-form {
  width: 100%;
  max-width: 420px;
  margin: 1.75rem auto 0;
  text-align: left;
}
.ah-unsub-form .form-submit {
  justify-content: center;
  margin-top: 1.25rem;
}
.ah-unsub-form .form-status {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  text-align: center;
}
/* Fehlermeldung (Cyan, wie C15/C17) - Magenta waere auf dunklem Grund unlesbar. */
.ah-unsub-form .form-status.is-error { color: var(--highlight); }
.ah-unsub-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}