/* Basis-Tokens auch außerhalb der Block-Kontexte (WooCommerce, eigene Module) */
:root {
  /* Richtung „Morgenlicht" (Entscheidung 28.07.2026, docs/entscheidungen.md).
     Die Kontrastwerte hinter den Farben sind nachgemessen, nicht geschätzt —
     bin/pruefe_seiten.py misst sie nach jeder Änderung im Browser nach. */
  --tinte: #2B2119;          /* Haupttext, 14,9:1 auf Papier */
  --papier: #FFF8EF;         /* Creme statt Weiß — Weiß blendet bei hellem Licht */
  --flaeche: #FBEEDD;        /* abgesetzte Fläche */
  --moos: #2F5D42;           /* Aktionen, Weiß darauf 8,1:1 */
  --moos-tief: #234731;      /* Hover */
  --moos-flaeche: #D8E9DD;
  --apricot: #E8763A;        /* NUR Fläche. Als Schriftfarbe nur 2,8:1. */
  --apricot-hell: #FFD9A8;   /* Plaketten, dunkelbrauner Text darauf */
  --himmel: #C9DCE0;
  --grau: #574535;           /* Nebentext, 7,6:1 auf Papier */
  --fehler: #8A1F11;
  --ziel: 60px;
  --luecke: 16px;
  --radius: 22px;            /* die weiche Form ist das Kennzeichen der Richtung */
  --radius-knopf: 999px;
  --schatten: 0 6px 20px rgba(43, 33, 25, 0.08);
  --schatten-hoch: 0 18px 40px rgba(43, 33, 25, 0.14);
  --uebergang: 160ms ease;
  font-size: 20px;
}
html[data-textgroesse="125"] { font-size: 25px; }
html[data-textgroesse="150"] { font-size: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-variant-ligatures: no-common-ligatures;
  text-rendering: optimizeLegibility;
}

p, li { max-width: 68ch; }

/* Bilder: Seitenverhältnis bleibt erhalten.
   WordPress schreibt width und height als HTML-Attribute in jedes <img>. Wo das
   CSS nur die Breite setzt, bleibt die Attribut-Höhe stehen und das Bild wird
   gestaucht oder gestreckt — auf der Startseite waren es bis zu 157 %. Diese
   Regel fehlte im Theme komplett. Sie gilt bewusst für alle Bilder; Bausteine,
   die eine feste Höhe brauchen, setzen sie zusammen mit object-fit selbst. */
img, video { max-width: 100%; height: auto; }

/* Fokus: sichtbar auf hellen UND auf dunklen Flächen. Zweifarbig, weil ein
   einfarbiger Rahmen auf der dunklen Fußzeile verschwindet — der dunkle Rahmen
   trägt auf Creme, der helle Hof trägt auf Braun. */
:focus-visible {
  outline: 4px solid var(--tinte);
  outline-offset: 3px;
  box-shadow: 0 0 0 8px var(--apricot-hell);
  border-radius: 6px;
}

/* Klickziele */
button, .wp-element-button, .wp-block-button__link,
input[type="submit"], select, .ziel {
  min-height: var(--ziel);
  min-width: var(--ziel);
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
}
a { text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--apricot); }

/* Knöpfe: rund, moosgrün für die Hauptaktion, Umriss für alles Zweite. */
.wp-element-button, .wp-block-button__link, button.knopf-amber,
input[type="submit"] {
  background: var(--moos);
  color: #FFFFFF;
  font-weight: 700;
  border: 3px solid var(--moos);
  border-radius: var(--radius-knopf);
  text-decoration: none;
  transition: background var(--uebergang), transform var(--uebergang);
}
.wp-element-button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover {
  background: var(--moos-tief); border-color: var(--moos-tief); transform: translateY(-2px);
}
.knopf-ruhig {
  background: transparent;
  color: var(--tinte);
  border: 3px solid var(--tinte);
  border-radius: var(--radius-knopf);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.knopf-ruhig:hover { background: var(--flaeche); }

/* Zahlen und Preise.
   Maschinenschrift bleibt dort, wo Werte untereinander stehen und verglichen
   werden (Datenblatt). Preise tragen die Anzeigeschrift — in dieser Richtung
   sind sie ein Versprechen, keine Messgröße. */
.datenblatt td.wert, .mono {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.preis, .woocommerce div.product p.price, .woocommerce ul.products li.product .price {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.preis-gross { font-size: 1.85rem; font-weight: 600; }
.preis-zusatz { color: var(--grau); font-size: 0.9rem; }

/* Führerschein-Ampel */
.fuehrerschein-ampel {
  background: var(--moos-flaeche);
  color: #1E4630;
  border-left: 10px solid var(--moos);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-size: 1.2rem;
  max-width: none;
}
.fuehrerschein-ampel.negativ {
  background: var(--flaeche);
  color: var(--tinte);
  border-left-color: var(--grau);
}

/* Datenblatt-Tabelle */
.datenblatt { border-collapse: collapse; width: 100%; }
.datenblatt th, .datenblatt td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--flaeche);
  vertical-align: top;
}
.datenblatt th { font-weight: 700; width: 40%; }

/* Drei-Wege-Kontakt */
.kontakt-wege { display: grid; gap: var(--luecke); grid-template-columns: 1fr; }
@media (min-width: 720px) { .kontakt-wege { grid-template-columns: 1fr 1fr 1fr; } }
.kontakt-wege a {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  min-height: calc(var(--ziel) * 1.6);
  padding: 1rem 1.2rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--papier);
  text-decoration: none;
}
.kontakt-wege a strong { font-size: 1.2rem; }
.kontakt-wege a span { color: var(--grau); }

/* Formulare: persistente Labels, Fehler im Klartext */
label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  min-height: var(--ziel);
  border: 3px solid var(--tinte);
  border-radius: var(--radius-knopf);
  background: #FFFFFF;
  color: var(--tinte);
  width: 100%;
  /* min() statt einer festen Breite: 26 rem sind bei 150 % Schriftgröße 780 px
     und damit breiter als jedes Telefon. Das Feld darf nie über den Rand. */
  max-width: min(26rem, 100%);
}
.feld-fehler { color: var(--fehler); font-weight: 700; margin-top: 0.3rem; }
.feld-fehler::before { content: "Bitte prüfen: "; }

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--moos);
  color: #FFFFFF;
  border-radius: var(--radius-knopf);
  padding: 1rem 1.4rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Kopfzeile — hell, damit der Sonnenaufgang darunter nicht abgeschnitten wirkt. */
.site-kopf { background: var(--papier); color: var(--tinte); }
.site-kopf a { color: var(--tinte); }
.site-kopf .telefon {
  display: inline-flex; align-items: center; min-height: var(--ziel);
  padding: 0 1.5rem; border-radius: var(--radius-knopf);
  background: var(--moos); color: #FFFFFF;
  font-size: 1.15rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.site-kopf .telefon:hover { background: var(--moos-tief); }
.site-kopf .rueckruf { font-size: 0.9rem; color: var(--grau); }
.site-kopf .wp-block-navigation a {
  min-height: var(--ziel); display: inline-flex; align-items: center;
  padding: 0 1rem; border-radius: var(--radius-knopf); text-decoration: none; font-weight: 700;
}
.site-kopf .wp-block-navigation a:hover { background: var(--flaeche); }

/* Fußzeile — dunkel und oben abgerundet, wie der Abschluss eines Bogens. */
.site-fuss {
  background: var(--tinte); color: #F3E9DC;
  border-radius: 40px 40px 0 0;
}
.site-fuss a { color: #F3E9DC; min-height: 44px; display: inline-flex; align-items: center; }
.site-fuss strong { color: var(--apricot-hell); }
.site-fuss p, .site-fuss li { max-width: none; }

/* Modellfinder */
#modellfinder { min-height: 70vh; padding: 1rem 0; }
.finder-schritt { color: var(--grau); font-weight: 700; margin-bottom: 0.2rem; }
.finder-frage {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-size: 1.85rem;
  margin: 0 0 0.5rem;
}
.finder-frage:focus { outline: none; }
.finder-hinweis { color: var(--grau); margin-bottom: 1.5rem; }
.finder-antworten { display: grid; gap: var(--luecke); max-width: 40rem; }
.finder-antwort {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--flaeche);
  color: var(--tinte);
  border: 2px solid var(--tinte);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  min-height: calc(var(--ziel) * 1.2);
  transition: background var(--uebergang), transform 350ms ease;
}
.finder-antwort:hover { background: var(--amber); }
.finder-zurueck {
  margin-top: 2rem;
  background: transparent;
  border: none;
  color: var(--grau);
  text-decoration: underline;
  font-size: 1rem;
}
.finder-karte {
  border: 2px solid var(--tinte);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 1.5rem 0;
  max-width: 40rem;
  background: #FFFFFF;
}
.finder-karte h3 { font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif); margin: 0 0 0.5rem; }
.finder-karte .knopf-ruhig { display: inline-block; margin-top: 0.8rem; padding: 0.8rem 1.4rem; }
.finder-rueckruf-form { margin-top: 1rem; max-width: 40rem; }
.finder-rueckruf-form .feld-fehler[hidden] { display: none; }
.rueckruf-form-seite .feld-fehler[hidden] { display: none; }

/* Rückruf-Formulare: Das Themenfeld steht vor der Nummer und ist Pflicht.
   Zwischen den Feldern muss deutlich Luft sein — bei 150 % Schriftgröße
   rutschen enge Formulare sonst zu einem einzigen Block zusammen. */
.finder-rueckruf-form label, .rueckruf-form-seite label { margin-top: 1.2rem; }
.finder-rueckruf-form label:first-of-type,
.rueckruf-form-seite label:first-of-type { margin-top: 0; }
.finder-rueckruf-form select, .rueckruf-form-seite select,
.finder-rueckruf-form input, .rueckruf-form-seite input { width: 100%; max-width: min(30rem, 100%); }
.finder-rueckruf-form button, .rueckruf-form-seite button { margin-top: 1.4rem; }
.finder-rueckruf-form h4 { font-size: 1.3rem; margin: 0 0 1rem; }

/* Hinweis, dass ein KI-Assistent antwortet. Er steht bewusst ruhig und nicht
   als Warnung: Für diese Zielgruppe ist die Erreichbarkeit rund um die Uhr
   ein Vorteil — überrascht werden will trotzdem niemand. */
.ki-hinweis {
  background: var(--moos-flaeche); color: #1E4630;
  border-radius: var(--radius); padding: 1.1rem 1.4rem;
  margin: 1.4rem 0; max-width: 68ch; font-size: 0.97rem;
}

/* Kostenrechner */
#kostenrechner { max-width: 40rem; }
#kostenrechner fieldset { border: 2px solid var(--flaeche); border-radius: var(--radius); padding: 1.2rem; margin: 0 0 1.5rem; }
#kostenrechner legend { font-weight: 700; padding: 0 0.5rem; }
.rechner-ergebnis { border: 2px solid var(--tinte); border-radius: var(--radius); padding: 1.4rem; background: #FFFFFF; }
.rechner-ergebnis table { width: 100%; border-collapse: collapse; }
.rechner-ergebnis td, .rechner-ergebnis th { padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--flaeche); text-align: left; }
.rechner-ergebnis td.wert { text-align: right; }
.rechner-quelle { color: var(--grau); font-size: 0.9rem; margin-top: 1rem; }

/* Produktdetailseite (WooCommerce klassisch) */

/* WooCommerce stellt die Galerie mit `float:left` und die Kaufspalte mit
   `float:right` nebeneinander. Alles, was danach im selben Container folgt,
   landet ohne `clear` in der Lücke zwischen beiden Floats — auf dem Rechner
   sind das rund 48 px. Die Überschrift „Über dieses Fahrzeug" stand dadurch
   senkrecht, ein Wort je Zeile, und der Fließtext lief darunter aus der Spalte.
   Auf dem Telefon fiel es nicht auf, weil dort nichts nebeneinander steht —
   deshalb hat es der Seitenprüfer (360/390/1280) nie gemeldet. */
.pdp-abschnitt { clear: both; max-width: 46rem; margin: 2rem 0; }
.pdp-abschnitt h2 { font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif); font-size: 1.45rem; }
.single-product div.product .price {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  color: var(--tinte);
}
.single-product div.product .fuehrerschein-ampel { margin: 1rem 0; }
.beratung-neben-kauf { display: inline-block; margin-left: var(--luecke); padding: 0.6rem 1.4rem; }
.single-product form.cart .single_add_to_cart_button {
  background: var(--amber);
  color: var(--tinte);
  border: 2px solid var(--tinte);
  font-weight: 700;
  font-size: 1rem;
  min-height: var(--ziel);
}
.woocommerce ul.products li.product {
  background: #FFFFFF; border-radius: var(--radius); padding: 1rem;
  box-shadow: var(--schatten); transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.woocommerce ul.products li.product a img { border-radius: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-size: 1.2rem;
  color: var(--tinte);
}
.woocommerce ul.products li.product .price {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  font-size: 1.2rem;
}
.woocommerce ul.products li.product .button {
  background: var(--moos);
  color: #FFFFFF;
  border: 3px solid var(--moos);
  border-radius: var(--radius-knopf);
  min-height: var(--ziel);
  display: inline-flex;
  align-items: center;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--moos-tief); border-color: var(--moos-tief);
}

/* Schriftgrößen-Regler */
.textgroesse-regler { display: flex; gap: 4px; }
.textgroesse-regler button {
  min-width: var(--ziel);
  min-height: var(--ziel);
  padding: 0;
  background: transparent;
  color: var(--tinte);
  border: 3px solid var(--tinte);
  border-radius: var(--radius-knopf);
  font-weight: 700;
}
.textgroesse-regler button[aria-pressed="true"] {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}

/* ---------------------------------------------------------------- Beratungsassistent
   Erscheint nur, wenn ein Dienst eingetragen ist (siehe functions.php).
   Ziele mindestens 60 px, Kontraste wie im übrigen Auftritt, keine Animation. */
.nur-fuer-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.berater-knopf {
  position: fixed; right: var(--luecke); bottom: var(--luecke); z-index: 60;
  min-height: var(--ziel); padding: 0 1.6rem;
  background: var(--tinte); color: var(--papier);
  border: 3px solid var(--tinte); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
.berater-knopf:hover { background: var(--moos); border-color: var(--moos); }
.berater-fenster {
  position: fixed; right: var(--luecke); bottom: calc(var(--ziel) + var(--luecke) * 2);
  z-index: 61; width: min(28rem, calc(100vw - var(--luecke) * 2));
  max-height: min(32rem, 70vh); display: flex; flex-direction: column;
  background: var(--papier); border: 3px solid var(--tinte); border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(18, 52, 59, 0.25);
}
.berater-fenster[hidden] { display: none; }
.berater-kopf { padding: var(--luecke); border-bottom: 2px solid var(--flaeche); }
.berater-hinweis { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--grau); }
.berater-schliessen {
  position: absolute; top: 8px; right: 8px; min-height: 44px; min-width: 44px;
  background: transparent; border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; color: var(--tinte); cursor: pointer;
}
.berater-schliessen:hover { border-color: var(--tinte); }
.berater-verlauf { flex: 1; overflow-y: auto; padding: var(--luecke); }
.berater-nachricht { margin-bottom: var(--luecke); padding: 0.7rem 0.9rem; border-radius: var(--radius); }
.berater-nachricht p { margin: 0 0 0.5rem; }
.berater-nachricht p:last-child { margin-bottom: 0; }
.berater-bot { background: var(--flaeche); }
.berater-mensch { background: var(--moos-flaeche); }
.berater-formular { display: flex; gap: 8px; padding: var(--luecke); border-top: 2px solid var(--flaeche); }
.berater-feld {
  flex: 1; min-height: var(--ziel); padding: 0 0.8rem;
  border: 3px solid var(--tinte); border-radius: var(--radius); font: inherit;
}
.berater-senden {
  min-height: var(--ziel); padding: 0 1.2rem; background: var(--amber);
  border: 3px solid var(--tinte); border-radius: var(--radius);
  font: inherit; font-weight: 700; color: var(--tinte); cursor: pointer;
}
.berater-senden[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 480px) {
  .berater-fenster { left: var(--luecke); right: var(--luecke); width: auto; }
}

/* ---------------------------------------------------------------- Einwilligung
   Beide Knöpfe gleich groß und gleich auffällig: Wer ablehnen möchte, soll den
   Knopf genauso schnell finden wie den zum Zustimmen. */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: var(--luecke);
  background: var(--papier); border-top: 4px solid var(--tinte);
  box-shadow: 0 -4px 24px rgba(18, 52, 59, 0.2);
}
.einwilligung h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.einwilligung p { margin: 0 0 var(--luecke); max-width: 60ch; }
.einwilligung-knoepfe { display: flex; gap: var(--luecke); flex-wrap: wrap; }
.einwilligung-knoepfe button {
  flex: 1 1 14rem; min-height: var(--ziel); padding: 0 1.4rem;
  border: 3px solid var(--tinte); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
.einwilligung-knoepfe .knopf-ruhig { background: var(--papier); color: var(--tinte); }
.einwilligung-knoepfe .knopf { background: var(--amber); color: var(--tinte); }

/* Bei sichtbarem Einwilligungsbanner rücken die schwebenden Bedienelemente nach
   oben. Ein Knopf, der hinter dem Banner liegt, ist nicht bedienbar — das fiel
   erst im Browsertest auf, nicht beim Lesen des Quelltexts. */
body.einwilligung-offen .berater-knopf {
  bottom: calc(var(--einwilligung-hoehe, 12rem) + var(--luecke));
}
body.einwilligung-offen .berater-fenster {
  bottom: calc(var(--einwilligung-hoehe, 12rem) + var(--ziel) + var(--luecke) * 2);
}

/* ============================================================================
   Startseite „Morgenlicht"

   Der Sonnenaufgang ist nur ein Farbverlauf und eine Hügellinie — kein Bild.
   Das spart Ladezeit und bleibt bei jeder Schriftgröße heil, auch wenn der
   Regler auf 150 % steht.
   ========================================================================= */

.morgen {
  position: relative; overflow: hidden;
  padding: 2.5rem 0 4.5rem;
  background:
    radial-gradient(120% 90% at 78% 8%, #FFD9A8 0%, rgba(255,217,168,0) 62%),
    radial-gradient(90% 70% at 12% 0%, #FFE9CF 0%, rgba(255,233,207,0) 70%),
    linear-gradient(180deg, var(--papier) 0%, var(--papier) 60%, var(--flaeche) 100%);
}
/* Der Horizont: eine sehr flache Kuppel in Papierfarbe. */
.morgen::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 120px;
  background: var(--papier);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.morgen-innen {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.morgen h1 {
  font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.05; margin: 0 0 1.2rem;
  text-wrap: balance;
}
.morgen .unter { font-size: 1.15rem; color: var(--grau); max-width: 36ch; margin: 0 0 2rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.morgen-bild {
  position: relative;
  border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%;
  overflow: hidden; background: #FFFFFF; box-shadow: 0 24px 60px rgba(43,33,25,.16);
}
/* Festes Format, damit die geschwungene Form ruhig steht. „contain" statt
   „cover": die Fahrzeugfotos sind auf Weiß freigestellt und dürfen an keiner
   Kante beschnitten werden — abgeschnittene Räder sehen aus wie ein Fehler. */
.morgen-bild img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: contain; background: #FFFFFF;
}
.notiz-blase {
  position: absolute; left: 0.4rem; bottom: 1.4rem;
  background: var(--apricot-hell); color: #3A1D08;
  border-radius: var(--radius-knopf); padding: 0.7rem 1.3rem;
  font-weight: 700; font-size: 0.92rem; box-shadow: 0 10px 24px rgba(43,33,25,.2);
}

/* Vertrauens-Anker unter den Hero-Knöpfen. Keine Verweise, nur Zusagen —
   deshalb greift die 60-px-Zielregel hier nicht. Die Häkchen sind Pseudo-
   Elemente, damit Vorleser nur den Text lesen und kein „Häkchen"-Zeichen. */
.hero-anker {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.6rem; padding: 0; margin: 1.6rem 0 0;
}
.hero-anker li {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 0.95rem; max-width: none;
}
.hero-anker li::before {
  content: "✓"; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--moos); color: #FFFFFF;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 800;
}

/* ---------- Zusage-Band ---------- */
.zusage {
  background: var(--moos); color: #FFFFFF; border-radius: 32px;
  padding: 2.2rem 2.5rem; margin: 0 0 3.5rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center;
}
.zusage .sonne {
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFE0A6, var(--apricot));
  display: grid; place-items: center; font-size: 2rem; color: #3A1D08;
}
.zusage h2 { font-size: 1.5rem; margin: 0 0 0.4rem; color: #FFFFFF; }
.zusage p { margin: 0; max-width: 62ch; }
.knopf-creme {
  background: var(--papier); color: var(--tinte);
  border: 3px solid var(--papier); border-radius: var(--radius-knopf);
  min-height: var(--ziel); padding: 0 1.5rem; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.knopf-creme:hover { background: #FFFFFF; border-color: #FFFFFF; }

/* ---------- Zwei Produktwelten ---------- */
.welten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-bottom: 3.5rem; }
.welt {
  display: block; text-decoration: none; border-radius: 28px; overflow: hidden;
  background: var(--flaeche); min-height: var(--ziel);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.welt:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
/* Beide Kacheln gleich hoch, ohne die Fotos zu verzerren oder zu beschneiden.
   Die Fahrzeuge haben sehr unterschiedliche Formate (offenes Mobil hochkant,
   Kabinenroller quer) — ohne festes Verhältnis stehen die Textblöcke versetzt. */
.welt img {
  width: 100%; background: #FFFFFF; display: block;
  aspect-ratio: 4 / 3; object-fit: contain;
}
.welt-text { padding: 1.6rem 1.8rem 1.9rem; }
.welt h2 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.welt p { margin: 0 0 1rem; color: var(--grau); max-width: none; }
.plakette-ab {
  display: inline-block; background: var(--apricot-hell); color: #3A1D08;
  border-radius: var(--radius-knopf); padding: 0.4rem 1rem; font-weight: 700; font-size: 0.9rem;
}

/* ---------- Fahrzeugkarten ---------- */
.zeile-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.zeile-kopf h2 { font-size: 1.7rem; margin: 0; }
.zeile-kopf a { margin-left: auto; color: var(--moos); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 3.5rem; }
.karte {
  background: #FFFFFF; border-radius: 26px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
/* 4:3 wie die übrigen Fahrzeugbilder. Quadratisch wirkte auf dem Telefon, wo
   die Karten volle Breite haben, wie ein sehr hoher weißer Kasten mit einem
   kleinen Roller darin. */
.karte > img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: contain; background: #FFFFFF;
}
.karte-text { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.karte h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.karte p { color: var(--grau); font-size: 0.97rem; margin: 0 0 1rem; max-width: none; }
.marker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.marker span {
  background: var(--flaeche); border-radius: var(--radius-knopf);
  padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 700;
}
.marker .frei { background: var(--moos-flaeche); color: #1E4630; }
.karte .preis {
  margin-top: auto;
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800; font-size: 1.45rem; margin-bottom: 0.9rem;
}
.karte .preis small { display: block; font-family: inherit; font-weight: 400; font-size: 0.7rem; color: var(--grau); }

/* ---------- Ablauf in vier Schritten ----------
   Nachfolger der drei Versprechen. Der Himmelston bleibt der eine kühle
   Kontrapunkt der Seite; die Nummern machen aus losen Zusagen einen Weg. */
.ablauf { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 3.5rem; }
@media (min-width: 640px)  { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.schritt { background: var(--himmel); border-radius: 26px; padding: 1.7rem; }
.schritt-nr {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--moos); color: #FFFFFF;
  display: grid; place-items: center; margin-bottom: 0.9rem;
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800; font-size: 1.15rem;
}
.schritt h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.schritt p { margin: 0; color: #1E3438; font-size: 0.97rem; max-width: none; }

/* Offene Stellen in Entwurfstexten. Auffällig mit Absicht: Eine Lücke im
   Impressum, die wie normaler Text aussieht, findet niemand mehr. */
.entwurf-warnung {
  background: #FFE9C7; border: 3px solid var(--fehler); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin: 0 0 2rem;
}
.entwurf-warnung p { margin: 0; color: #4A1B10; max-width: 68ch; }
mark.pruefen {
  background: #FFE9C7; color: #4A1B10;
  border-bottom: 3px solid var(--fehler); padding: 0.1rem 0.3rem;
}

/* ---------- Vertrauensabschnitt ----------
   Beantwortet die Fragen, an denen der Kauf sonst scheitert. Er liegt auf
   abgesetzter Fläche, damit er beim Überfliegen nicht als weiterer Werbeblock
   gelesen wird. */
.vertrauen {
  background: var(--flaeche); border-radius: 32px;
  padding: 2.4rem 2.6rem; margin: 0 0 3.5rem;
}
.vertrauen > h2 { font-size: 1.8rem; margin: 0 0 0.8rem; }
.vertrauen-vorspann { font-size: 1.08rem; margin: 0 0 2rem; }
.vertrauen-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; }
.vertrauen-punkt h3 { font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--moos); }
.vertrauen-punkt p { margin: 0; color: var(--grau); font-size: 0.97rem; }
.vertrauen .knopfreihe { margin-top: 1.8rem; }

/* ---------- Abschnitt für Angehörige ----------
   Die zweite Entscheider-Stufe (Kinder 45–60) bekommt eine eigene Fläche.
   Apricot ist laut Tokenset NUR Fläche — hier trägt sie mit dunkelbraunem
   Text (11,6:1, nachgerechnet). Der Lichtschein oben rechts ist derselbe
   Morgenlicht-Verlauf wie im Sonnenaufgang, nur leiser. */
.angehoerige {
  background:
    radial-gradient(90% 80% at 88% 0%, #FFE9CF 0%, rgba(255,233,207,0) 55%),
    var(--apricot-hell);
  color: #3A1D08;
  border-radius: 32px;
  padding: 2.4rem 2.6rem; margin: 0 0 3.5rem;
}
.angehoerige .ueberzeile {
  font-family: "IBM Plex Mono", Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; font-size: 0.82rem; margin: 0 0 0.6rem;
}
.angehoerige h2 { font-size: 1.8rem; margin: 0 0 0.8rem; }
.angehoerige-vorspann { font-size: 1.08rem; margin: 0 0 2rem; }
.angehoerige-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2.4rem; }
.angehoerige-punkt h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.angehoerige-punkt p { margin: 0; font-size: 0.97rem; }
.angehoerige .knopfreihe { margin-top: 1.8rem; }
.angehoerige .knopf-ruhig { border-color: #3A1D08; color: #3A1D08; }
.angehoerige .knopf-ruhig:hover { background: var(--papier); }

/* ---------- Ratgeber-Anrisse ---------- */
.lesestoff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 3.5rem; }
.lese {
  display: flex; gap: 1.2rem; align-items: center; text-decoration: none;
  background: var(--flaeche); border-radius: 22px; padding: 1.2rem 1.5rem; min-height: var(--ziel);
  transition: background var(--uebergang);
}
.lese:hover { background: #F6E2CA; }
.lese .kreis {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--moos); color: #FFFFFF; display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: 1.05rem;
}
.lese b {
  display: block;
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800; font-size: 1.05rem;
}
.lese span { color: var(--grau); font-size: 0.92rem; }

@media (max-width: 900px) {
  .morgen-innen, .welten, .karten, .lesestoff,
  .vertrauen-liste, .angehoerige-liste { grid-template-columns: 1fr; }
  .zusage { grid-template-columns: 1fr; }
  .zeile-kopf a { margin-left: 0; flex-basis: 100%; }
  .vertrauen, .angehoerige { padding: 1.8rem 1.4rem; }
}

/* Kopfzeile rechts: Telefon als voller Knopf, darunter der Rückruf-Verweis,
   daneben der Schriftgrößen-Regler. */
.kopf-rechts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kopf-telefon { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.site-kopf .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-weight: 800; text-decoration: none;
}

/* Die Plakette liegt AUSSERHALB der Bildhülle: Die weiche Blasenform braucht
   overflow:hidden, sonst ragt das Bild aus der Rundung — und dann würde die
   Plakette mit abgeschnitten. */
.morgen-bild-huelle { position: relative; }
.morgen-bild-huelle .notiz-blase { left: -0.8rem; bottom: 1.2rem; z-index: 2; }

/* ---------------------------------------------------------------- Schaufenster
   Tritt an die Stelle des Kaufformulars, solange die Kasse nicht eingerichtet
   ist (inc/schaufenster.php). Bewusst als abgesetzte Fläche und nicht als
   Warnhinweis: Telefonisch bestellen ist bei dieser Kundschaft der Normalfall,
   keine Notlösung. */
.schaufenster-kauf {
  clear: both;
  background: var(--moos-flaeche);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin: 1.4rem 0;
  max-width: 34rem;
}
.schaufenster-kauf h2 {
  font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: #1E4630;
}
.schaufenster-kauf p { color: #1E4630; margin: 0 0 1rem; }
.schaufenster-kauf .knopfreihe { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.schaufenster-ausfuehrungen { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.schaufenster-ausfuehrungen caption {
  text-align: left; font-weight: 700; color: #1E4630; padding-bottom: 0.3rem;
}
.schaufenster-ausfuehrungen th, .schaufenster-ausfuehrungen td {
  text-align: left; vertical-align: top; padding: 0.35rem 0;
  color: #1E4630; font-size: 0.95rem;
}
.schaufenster-ausfuehrungen th { font-weight: 700; padding-right: 1rem; white-space: nowrap; }
.schaufenster-kauf .schaufenster-hinweis {
  font-size: 0.9rem; margin: 1rem 0 0;
}
/* Auf der Produktseite steht der Block in der Kaufspalte (float:right). Die
   Beratungs-Schaltfläche daneben hatte dort einen linken Außenabstand für die
   Position neben dem Kaufknopf — den gibt es hier nicht mehr. */
.schaufenster-kauf .beratung-neben-kauf { margin-left: 0; }

/* ---------------------------------------------------------------- Zielgrößen
   Nachgezogen nach der Messung mit bin/pruefe_seiten.py. Jedes dieser Ziele war
   zwischen 31 und 44 px hoch — unter der Hausregel von 60 px. Bei einer
   Zielgruppe mit zittrigen Händen ist das kein Schönheitsfehler. */
.site-kopf .rueckruf,
.zeile-kopf a,
.knopf-ruhig,
.woocommerce .woocommerce-product-gallery__trigger {
  min-height: var(--ziel);
  display: inline-flex;
  align-items: center;
}
.knopf-ruhig { padding: 0 1.5rem; }
.woocommerce .woocommerce-product-gallery__trigger {
  justify-content: center; min-width: var(--ziel);
  background: var(--papier); border-radius: 50%; text-decoration: none;
}

/* Rahmen der Startseiten-Abschnitte. Der Sonnenaufgang läuft bewusst über die
   volle Breite, alles darunter steht im Satzspiegel. */
.startseite-inhalt {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
}

/* Sicherung gegen waagerechte Rollbewegung bei 150 % Schriftgröße:
   Knöpfe in engen Rasterzellen dürfen umbrechen statt auszubrechen. */
.woocommerce ul.products li.product .button,
.wp-element-button, .knopf-ruhig, .knopf-creme {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
.woocommerce div.product div.images { overflow: hidden; }

/* ---------------------------------------------------------------- 150 %-Schrift
   Alles hier ist Folge der Messung bei eingestellter Schriftgröße 150 %
   (bin/pruefe_seiten.py). Ein Auftritt, der nur bei 100 % hält, ist für die
   Zielgruppe wertlos — der Regler ist ja für sie da. */

/* Deutsche Komposita sind lang. „Versicherungskennzeichen" misst bei 30 px
   Grundschrift mehr als ein Telefon breit ist, und ein Wort bricht nicht von
   selbst um. Silbentrennung erlauben statt die Seite aufschieben zu lassen. */
body { hyphens: auto; }
h1, h2, h3, h4, .lese b, .karte h3, .welt h2 { overflow-wrap: break-word; hyphens: auto; }

/* Außenabstände in Pixel, nicht in rem: Sie sollen den Satzspiegel begrenzen,
   nicht mit der Schriftgröße mitwachsen — sonst frisst der Rand den Inhalt. */
.startseite-inhalt { padding: 0 clamp(16px, 4vw, 24px); }
.lese { flex-wrap: wrap; }
.lese > span:last-child { min-width: 0; flex: 1 1 12rem; }

/* Bildergalerie ohne Schieber: erstes Bild groß, die übrigen als Reihe darunter.
   Ein Schieber, den man wischen muss, ist für diese Kundschaft schlechter als
   eine ruhige Übersicht — und er braucht JavaScript, das hier sonst nichts tut. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
  transform: none !important;
  width: auto !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child {
  grid-column: 1 / -1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img { border-radius: 14px; }
.woocommerce div.product div.images .flex-control-thumbs { display: none; }

/* Flexslider setzt Breite und Float direkt am Element — ohne !important
   bleiben die Bilder nebeneinander stehen und die Seite lässt sich schieben. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  width: auto !important;
  float: none !important;
  display: block !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%; height: auto;
}

/* Eingabefelder rechnen ihre Breite ohne border-box aus: 100 % Breite plus
   Innenabstand plus 3 px Rahmen ergeben 432 px in einem 390 px breiten Fenster.
   Das war die Ursache der waagerechten Rollbewegung auf Beratung und Kostenrechner. */
/* Global, nicht nur für Formularfelder: Ohne border-box addiert der Browser
   Innenabstand und Rahmen ZUR angegebenen Breite. Eine Zelle mit width:390px
   und 1 rem Innenabstand ist dann 410 px breit — und die Seite lässt sich
   waagerecht schieben. Genau daran hingen die letzten Beanstandungen auf der
   Produktseite, im Kostenrechner und auf der Beratungsseite. */
*, *::before, *::after { box-sizing: border-box; }

/* Variantenauswahl (Farbe, Akku) — WooCommerce setzt sie als zweispaltige
   Tabelle. Auf dem Telefon passt daneben keine Auswahlliste mit Text wie
   „60V/30Ah (90 km Reichweite)"; die Zelle lief über. Deshalb untereinander:
   Beschriftung oben, Auswahl darunter, volle Breite. Für die Zielgruppe ist
   das ohnehin die bessere Anordnung. */
/* Ohne den .woocommerce-Vorfahren geschrieben: Block-Themes hängen die Klasse
   nicht zuverlässig um die Produktseite, die Regeln griffen sonst nicht. */
table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td {
  display: block; width: 100%; max-width: 100%; text-align: left;
}
table.variations th { padding: 0 0 0.3rem; font-weight: 700; }
table.variations td { padding: 0 0 1rem; }
table.variations select {
  width: 100%; max-width: 100%; min-height: var(--ziel);
}
form.cart .reset_variations {
  display: inline-flex; align-items: center; min-height: var(--ziel);
}

/* WooCommerce setzt Innenabstände über den längeren Selektor
   `.woocommerce div.product form.cart table.variations th` — der schlägt einen
   kurzen. Deshalb hier noch einmal mit derselben Spezifität. */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td,
body table.variations th,
body table.variations td {
  display: block; width: 100%; max-width: 100%;
  padding-left: 0; padding-right: 0; text-align: left;
}
body table.variations th { padding: 0 0 0.3rem; }
body table.variations td { padding: 0 0 1rem; }

/* WooCommerce gibt der Auswahlliste zusätzlich zu width:100 % noch 1 em
   Außenabstand rechts. 100 % + 13 px sind mehr als das Fenster — das war die
   letzte Ursache der waagerechten Rollbewegung auf der Produktseite. */
.woocommerce div.product form.cart .variations select,
body table.variations select {
  margin-right: 0;
  margin-left: 0;
}

/* Warenliste als echtes Raster statt WooCommerce-Spaltenklassen.
   `columns-4` rechnet mit festen Prozentbreiten und Floats; bei 150 %
   Schriftgröße passt der Produktname nicht mehr in die Spalte und schiebt die
   Seite auf. Ein Raster mit Mindestbreite ordnet sich von selbst um. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1.6rem;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; min-width: 0;
}

/* Brotkrumen tragen den vollen Produktnamen. Bei großer Schrift muss er
   umbrechen dürfen — sonst schiebt eine einzige Zeile die Seite auf. */
.woocommerce .woocommerce-breadcrumb {
  overflow-wrap: anywhere; hyphens: auto; max-width: 100%;
}