/* AUTOMATISCH ERZEUGT von tools/build-css.sh — nicht direkt bearbeiten.
   Quelle: assets/css/parts/*.css */

/* ===== 00-base.css ===== */
/* =========================================================================
   00-base — Grundlayer. Gehört Welle 0. Andere Agenten ändern diese Datei
   NICHT; sie legen eigene Teildateien unter assets/css/parts/ an.
   ========================================================================= */

/* --- Reset-Ergänzungen ------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;              /* Reveal-Effekte erzeugen sonst Seitwärtsscroll */
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg { max-width: 100%; height: auto; }

/* --- Layout-Container --------------------------------------------------- */

.mpu-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.mpu-container--narrow { max-width: 860px; }
.mpu-container--wide   { max-width: 1400px; }

/* Sektions-Grundabstand. Varianten setzen nur Hintergrund/Sonderfälle. */
.mpu-sec {
  padding-block: var(--wp--preset--spacing--60);
}

.mpu-sec--tight { padding-block: var(--wp--preset--spacing--40); }
.mpu-sec--dark  { background: var(--wp--preset--color--dark); }
.mpu-sec--soft  { background: var(--wp--preset--color--dark-soft); }
.mpu-sec--light {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--foreground);
}
.mpu-sec--light :is(h1, h2, h3, h4) { color: var(--wp--preset--color--foreground); }

/* --- Typografie-Feinheiten --------------------------------------------- */

/* Core-Layout nullt margin-block bei Einzelkindern in Gruppen; deshalb
   Doppel-Klassen-Selektor für ausreichende Spezifität (ss24-Stolperstein 13). */
.mpu-eyebrow.mpu-eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  /* Kein text-transform, kein letter-spacing: Versal-Labels mit gesperrter
     Schrift über jedem Abschnitt sind ein Erkennungsmerkmal generierter
     Seiten und tragen keine Information. Satzschreibung, kleiner, gedämpft. */
  /* accent, nicht primary: Die Eyebrow steht auf dunklem Grund. primary
     (#298263) erreicht dort nur 2,8:1, accent (#37AB83) 4,55:1. */
  color: var(--wp--preset--color--accent);
}

/* Auf hellen Flächen kehrt sich das um — dort trägt primary (4,50:1),
   accent nur 2,75:1. */
.mpu-sec--light .mpu-eyebrow.mpu-eyebrow,
.mpu-sec--light a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--primary);
}

.mpu-lead { font-size: var(--wp--preset--font-size--lg); }

/* --- Buttons ------------------------------------------------------------ */
/* Farbvarianten mit .mpu-btn prefixen, sonst kollidieren sie mit dem
   wp-block-button-Wrapper (ss24-Stolperstein 8). */

.wp-block-button.mpu-btn--outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--white);
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--white);
}

.wp-block-button.mpu-btn--outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark);
}

.wp-block-button__link:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}

/* --- Icons -------------------------------------------------------------- */

.mpu-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  stroke: currentColor;
  fill: none;
}

/* --- Reveal-Animation ---------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-d80  { transition-delay: 80ms; }
.reveal-d160 { transition-delay: 160ms; }
.reveal-d240 { transition-delay: 240ms; }

/* Ohne JS darf nichts unsichtbar bleiben — das ist genau der Fehler, den die
   alte Seite hatte (Hero blieb leer, weil JS verzögert wurde). */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Sprungmarke für Tastaturnutzer ------------------------------------- */

.mpu-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.mpu-skip-link:focus {
  left: 0;
}

/* Anker-Ziele nicht unter den Sticky-Header rutschen lassen. */
[id] { scroll-margin-top: 90px; }

/* ===== 01-schrift.css ===== */
/* =========================================================================
   01-schrift — metrisch angepasste Ersatzschrift

   Wozu das gut ist
   ----------------
   Montserrat wird mit font-display:swap geladen. Bis die Datei da ist,
   zeichnet der Browser in der Ersatzschrift. Montserrat ist aber deutlich
   breiter als jede Systemschrift, gemessen am 06.08.2026 an einem echten
   Textabschnitt dieser Seite:

     Gewicht 400   Montserrat / Arial = 1,1338
     Gewicht 700   Montserrat / Arial = 1,1090
     Gewicht 900   Montserrat / Arial = 1,1479

   Ein Text, der in Arial auf zwei Zeilen passt, braucht in Montserrat also
   schnell drei. Beim Wechsel springt die Seite. Auf der Startseite waren das
   0,0515 CLS, praktisch alles davon aus der H1 des Heros.

   Wie es gelöst ist
   -----------------
   Für jeden Schnitt gibt es eine Ersatzschrift, die auf die Systemschrift
   zeigt und über size-adjust auf exakt die Breite von Montserrat gestaucht
   wird. ascent-override und descent-override ziehen die Zeilenhöhe nach:
   Montserrat hat bei 1000 Einheiten pro Geviert einen Ascender von 968 und
   einen Descender von 251. Geteilt durch den jeweiligen size-adjust ergibt
   das die Werte unten.

   Ergebnis: Vor und nach dem Schriftwechsel belegt derselbe Text dieselbe
   Fläche. Der Umbruch bleibt stehen, die Seite springt nicht.

   Warum das bleiben sollte
   ------------------------
   Der Wert hält auch, wenn die Kundin die Texte im Editor ändert. Ohne diese
   Datei kostet jede längere Überschrift wieder CLS, ohne dass jemand merkt,
   warum.

   Mehrere local()-Angaben, weil die Systemschrift je nach Gerät anders heißt:
   Arial auf Windows, Helvetica auf Apple-Geräten, Roboto auf Android. Die
   erste vorhandene gewinnt. Ist keine da, greift die Regel nicht und der
   Browser nimmt den nächsten Eintrag aus der Schriftliste in theme.json.
   ========================================================================= */

@font-face {
  font-family: "Montserrat Ersatz";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 113.38%;
  ascent-override: 85.38%;
  descent-override: 22.14%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Ersatz";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 110.90%;
  ascent-override: 87.29%;
  descent-override: 22.63%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Ersatz";
  font-style: normal;
  font-weight: 900;
  /* Bewusst OHNE local("Arial Black"): Die Messung oben lieferte für Gewicht
     900 dieselbe Breite wie für 700, weil Arial keinen schwarzen Schnitt hat
     und der Browser auf Arial Bold zurückfällt. Genau darauf ist der
     size-adjust gerechnet. Mit Arial Black als erster Wahl war die Ersatz-
     schrift 14,8 % zu breit und der Sprung blieb, nur andersherum. */
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 114.79%;
  ascent-override: 84.33%;
  descent-override: 21.87%;
  line-gap-override: 0%;
}

/* ===== 10-nav.css ===== */
/* =========================================================================
   10-nav — Kopfbereich, Hauptnavigation, Fußbereich. Gehört Agent A.
   Andere Agenten schreiben hier nicht hinein.

   Merkposten:
   - Sticky gehört auf den Template-Part-Wrapper, nicht in den Part hinein
     (Vertrag Abschnitt 5, Falle 4). Das Template rendert den Part als
     <div class="wp-block-template-part">, deshalb :has() statt header{}.
   - Die Marken-Icons (facebook, instagram, …) sind Flächen-SVGs. Die Icon-
     Grundregel aus 00-base.css setzt fill:none/stroke:currentColor — das macht
     sie unsichtbar. Deshalb hier je eine Gegenregel mit eigener Klasse; die
     Grundklasse selbst wird nicht überschrieben, sonst meldet build-css.sh
     eine Klassen-Kollision.
   - Ohne JS bleibt das Menü bedienbar: html:not(.mpu-js) klappt es dauerhaft
     auf und nimmt dem Kopfbereich das Sticky.

     Warum nicht mehr `.no-js`: Diese Klasse steht im ausgelieferten HTML und
     wird erst von main.js entfernt — das Skript liegt deferred im Fußbereich.
     Auf einem Telefon hieß das: Der Browser zeichnet zuerst das vollständig
     aufgeklappte Menü, der Kopfbereich ist dadurch 525 px hoch, und rund
     anderthalb Sekunden später klappt es zu. Die ganze Seite sprang um diese
     525 px nach oben — allein das ergab einen CLS von 0,578 von insgesamt
     0,597, gemessen am 06.08.2026.

     `.mpu-js` wird stattdessen von einem winzigen Inline-Skript im <head>
     gesetzt (inc/performance.php), also noch vor dem ersten Zeichnen. Damit
     ist der zugeklappte Zustand von Anfang an der gezeichnete Zustand.

     Bewusst NICHT dieselbe Klasse für beide Zwecke: `.no-js` bleibt an
     main.js gebunden und schützt weiterhin den Reveal-Effekt in 00-base.css.
     Würde man auch den früh entfernen, bliebe bei einem Ausfall von main.js
     jeder .reveal-Block dauerhaft unsichtbar — genau der Fehler der alten
     Seite.
   - Farbrollen: `accent` für Text, Links und Icons auf dunklem Grund,
     `primary` nur als Fläche (Schaltfläche, Hover-Flächen). Alle Menüflächen
     liegen bewusst auf `dark`, nicht auf `dark-soft` — auf `dark-soft` fällt
     accent auf 3,83:1 und verfehlt AA.
   ========================================================================= */

/* --- Sticky-Kopf --------------------------------------------------------- */

header.wp-block-template-part,
.wp-block-template-part:has(> .mpu-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

.mpu-header {
  background: var(--wp--preset--color--dark);
  border-bottom: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-header__bar {
  position: relative;               /* Bezugsrahmen für das Ratgeber-Panel */
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding-block: var(--wp--preset--spacing--20);
}

/* Sprungziel: leeres, nicht fokussierbares Element am Ende des Kopfbereichs.
   Wandert die ID später auf <main>, fällt dieses Element ersatzlos weg. */
.mpu-skip-target {
  scroll-margin-top: 0;
}

/* --- Wortmarke ----------------------------------------------------------- */

.mpu-brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-inline-end: auto;
  text-decoration: none;
  line-height: 1.15;
}

.mpu-brand__name {
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 900;
  color: var(--wp--preset--color--white);
}

/* Auf sehr schmalen Geräten würde die Zeile umbrechen und die Kopfleiste
   zweizeilig machen — dort bleibt nur die Wortmarke stehen. */
.mpu-brand__sub {
  display: none;
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  /* Kein Versal + Sperrung: siehe .mpu-eyebrow in 00-base.css. */
  color: var(--wp--preset--color--muted-fg);
}

.mpu-brand:hover .mpu-brand__name,
.mpu-brand:focus-visible .mpu-brand__name {
  color: var(--wp--preset--color--accent);
}

/* --- Umschalter (mobil) -------------------------------------------------- */

.mpu-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--dark-soft);
  border-radius: 8px;
  background: transparent;
  color: var(--wp--preset--color--white);
  cursor: pointer;
}

.mpu-nav-toggle:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

.mpu-nav-toggle__icon--close { display: none; }

/* main.js setzt .mpu-nav-open auf <body>, solange das Menü offen ist. */
.mpu-nav-open .mpu-nav-toggle__icon--menu { display: none; }
.mpu-nav-open .mpu-nav-toggle__icon--close { display: block; }

/* --- Navigation: mobiler Grundzustand ------------------------------------ */

.mpu-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: var(--wp--preset--spacing--20) 1.25rem var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--dark);
  border-bottom: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-nav.is-open { display: block; }

.mpu-nav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-nav__link,
.mpu-nav__summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.8rem;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--white);
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.mpu-nav__item + .mpu-nav__item .mpu-nav__link,
.mpu-nav__item + .mpu-nav__item .mpu-nav__summary {
  border-top: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-nav__link:hover,
.mpu-nav__summary:hover {
  color: var(--wp--preset--color--accent);
}

/* --- Ratgeber-Untermenü (details/summary, funktioniert ohne JS) ---------- */

.mpu-nav__summary {
  justify-content: space-between;
  list-style: none;
}

.mpu-nav__summary::-webkit-details-marker { display: none; }
.mpu-nav__summary::marker { content: ""; }

.mpu-nav__chevron {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.mpu-nav__group[open] > .mpu-nav__summary .mpu-nav__chevron {
  transform: rotate(180deg);
}

.mpu-nav__sub {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.mpu-nav__sub-title {
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  /* Kein Versal + Sperrung: siehe .mpu-eyebrow in 00-base.css. */
  color: var(--wp--preset--color--accent);
}

.mpu-nav__sub-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-nav__sub-link {
  display: block;
  padding-block: 0.4rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
  text-decoration: none;
}

.mpu-nav__sub-link:hover {
  color: var(--wp--preset--color--white);
}

/* --- Termin-Schaltfläche ------------------------------------------------- */

.mpu-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;                      /* inline-flex frisst den Leerraum zwischen
                                       den beiden Textteilen */
  padding: 0.7rem 1.15rem;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mpu-header__cta:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark);
}

.mpu-header__cta-prefix { display: none; }

/* --- Ohne JavaScript ----------------------------------------------------- */

html:not(.mpu-js) .wp-block-template-part:has(> .mpu-header) { position: static; }
html:not(.mpu-js) .mpu-nav-toggle { display: none; }

html:not(.mpu-js) .mpu-header__bar { flex-wrap: wrap; }

html:not(.mpu-js) .mpu-nav {
  display: block;
  position: static;
  order: 3;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding-inline: 0;
  background: transparent;
  border-bottom: 0;
  border-top: 1px solid var(--wp--preset--color--dark-soft);
}

/* --- Desktop ------------------------------------------------------------- */

/* Sehr schmale Geräte: Wortmarke und Schaltfläche je eine Stufe kleiner,
   sonst läuft die Kopfleiste seitlich über. */
@media (max-width: 379px) {
  .mpu-brand__name { font-size: var(--wp--preset--font-size--base); }

  .mpu-header__cta {
    padding: 0.65rem 0.8rem;
    font-size: var(--wp--preset--font-size--xs);
  }
}

@media (min-width: 480px) {
  .mpu-brand__sub { display: block; }
}

@media (min-width: 640px) {
  .mpu-header__cta-prefix { display: inline; }
}

/* Neun Menüpunkte plus Wortmarke und Schaltfläche brauchen Platz. Mit der
   korrigierten Abstandsskala (spacing--20 = 1rem statt 0,44rem) passt die
   Zeile erst ab 1280px; darunter greift das Umschaltmenü. */
@media (min-width: 1280px) {

  .mpu-nav-toggle { display: none; }

  .mpu-header__bar { gap: var(--wp--preset--spacing--30); }

  html:not(.mpu-js) .mpu-header__bar { flex-wrap: nowrap; }

  .mpu-nav,
  html:not(.mpu-js) .mpu-nav {
    display: block;
    position: static;
    order: 0;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
  }

  .mpu-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
  }

  .mpu-nav__link,
  .mpu-nav__summary {
    padding: 0.5rem 0.3rem;
    font-size: var(--wp--preset--font-size--sm);
  }

  .mpu-nav__item + .mpu-nav__item .mpu-nav__link,
  .mpu-nav__item + .mpu-nav__item .mpu-nav__summary {
    border-top: 0;
  }

  /* Panel spannt sich über die volle Breite der Kopfleiste. Damit das greift,
     darf zwischen .mpu-header__bar und dem Panel nichts positioniert sein —
     .mpu-nav ist hier bewusst position:static. */
  .mpu-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--40) 1.25rem;
    background: var(--wp--preset--color--dark);
    border-top: 2px solid var(--wp--preset--color--accent);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 24px 48px color-mix(in srgb, var(--wp--preset--color--dark) 70%, transparent);
  }

  .mpu-nav__sub-link { padding-block: 0.3rem; }
}

/* =========================================================================
   Fußbereich
   ========================================================================= */

.mpu-footer {
  background: var(--wp--preset--color--dark);
  border-top: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-footer__inner {
  padding-block: var(--wp--preset--spacing--50);
}

.mpu-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-footer__claim {
  max-width: 34ch;
  margin: 0;
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 900;
  line-height: 1.25;
  color: var(--wp--preset--color--white);
}

/* --- Soziale Netzwerke --------------------------------------------------- */

.mpu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--wp--preset--color--dark-soft);
  border-radius: 50%;
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.mpu-social__link:hover {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

/* Gegenregel zur Strich-Vorgabe aus 00-base.css — Marken-SVGs sind Flächen. */
.mpu-social__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  stroke: none;
}

/* --- Spalten ------------------------------------------------------------- */

.mpu-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--40);
}

.mpu-footer__head {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--white);
}

.mpu-footer__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-footer__link {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
  text-decoration: none;
}

.mpu-footer__link:hover {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

.mpu-footer__person {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}

.mpu-footer__person strong { color: var(--wp--preset--color--white); }

.mpu-footer__contact {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}

.mpu-footer__icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--wp--preset--color--accent);
}

.mpu-footer__icon--solid {
  fill: currentColor;
  stroke: none;
}

/* --- Abschlusszeile ------------------------------------------------------ */

.mpu-footer__bottom {
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--dark-soft);
}

.mpu-footer__note {
  margin: 0;
  text-align: center;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted-fg);
}

@media (min-width: 640px) {
  .mpu-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .mpu-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mpu-footer__claim { font-size: var(--wp--preset--font-size--3-xl); }
}

/* ===== 20-hero.css ===== */
/* =========================================================================
   20-hero — Hero, Vertrauensleiste, Calendly-CTA. Gehört Agent B.
   Andere Agenten ändern diese Datei nicht.

   Grundsatz für den Hero: nichts, was den Titel oder das LCP-Bild von
   JavaScript abhängig macht. Genau daran ist die alte Seite gescheitert
   (H1 in einer display:none-Spalte, 0 x 0 px).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — core/cover
   ------------------------------------------------------------------------- */

/* Falle 2: Cover bringt padding:1em und min-height:430px mit. Beides wird
   hier explizit genullt, damit der Hero dieselben Sektionsabstände hat wie
   alle anderen Bänder. Selektor mit .wp-block-cover, um die Core-Regel
   sicher zu schlagen — unabhängig davon, in welcher Reihenfolge Core- und
   Theme-Stylesheet ausgeliefert werden. */
.wp-block-cover.mpu-hero {
  min-height: 0;
  padding: var(--wp--preset--spacing--60) 0;
  overflow: clip;
}

/* Falle 1: Der Overlay-Span trägt dimRatio 100 (+ has-background-dim-100).
   Ein Hintergrund auf dem Cover selbst wäre dahinter unsichtbar — die
   Lichtstimmung gehört deshalb auf den Overlay, nicht auf die Sektion. */
.mpu-hero > .wp-block-cover__background {
  /* Vorher lagen hier zwei radiale Lichtkegel. Sie waren reine Dekoration und
     zählen zum Muster „Aurora-/Glow-Blobs". Jetzt eine ruhige, leicht
     abgesetzte Fläche — der Hero lebt vom Foto und der Typografie. */
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--dark));
}

.mpu-hero > .wp-block-cover__inner-container {
  width: 100%;
  min-width: 0;
}

/* Falle 3: Sobald im Editor eine contentPosition gesetzt wird, zwingt Core
   den inner-container auf width:auto (zwei Klassen Spezifität). Gegenregel
   mit dreifacher Klasse plus min-width:0. */
.mpu-hero.has-custom-content-position.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.mpu-hero__grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  align-items: center;
}

@media (min-width: 62rem) {
  .mpu-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--wp--preset--spacing--50);
  }
}

.mpu-hero__body {
  min-width: 0;
}

/* Falle 5: Core nullt via :where(.is-layout-flow) > :first-child die
   margin-block des ersten Kindes. Doppel-Klassen-Selektor für die nötige
   Spezifität. */
.mpu-hero__eyebrow.mpu-hero__eyebrow {
  margin-block: 0 var(--wp--preset--spacing--20);
}

.mpu-hero__title.mpu-hero__title {
  margin-block: 0;
  font-size: var(--wp--preset--font-size--4-xl);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--wp--preset--color--white);
}

/* Auf schmalen Telefonen bräuchte die Zeile sonst fünf Zeilen Umbruch. */
@media (max-width: 26rem) {
  .mpu-hero__title.mpu-hero__title {
    font-size: var(--wp--preset--font-size--3-xl);
  }
}

@media (min-width: 62rem) {
  .mpu-hero__title.mpu-hero__title {
    font-size: var(--wp--preset--font-size--5-xl);
  }
}

.mpu-hero__lead.mpu-hero__lead {
  margin-block: var(--wp--preset--spacing--30) 0;
  max-width: 38rem;
  color: var(--wp--preset--color--muted-fg);
}

.mpu-hero__actions.mpu-hero__actions {
  margin-block: var(--wp--preset--spacing--40) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

.mpu-hero__note.mpu-hero__note {
  margin-block: var(--wp--preset--spacing--20) 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}

/* --- Zählerwerte ---------------------------------------------------------
   Live stehen diese vier Werte in je einer H1 mit dem Inhalt "+" — sechs H1
   auf einer Seite. Hier sind es Absätze; die einzige H1 ist der Hero-Titel. */

.mpu-hero__stats.mpu-hero__stats {
  margin-block: var(--wp--preset--spacing--50) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
  padding-block-start: var(--wp--preset--spacing--30);
  border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
}

@media (min-width: 48rem) {
  .mpu-hero__stats.mpu-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mpu-hero__stat {
  min-width: 0;
}

.mpu-hero__stat-value.mpu-hero__stat-value {
  margin: 0;
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 900;
  line-height: 1.1;
  color: var(--wp--preset--color--white);
}

.mpu-hero__stat-label.mpu-hero__stat-label {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
  color: var(--wp--preset--color--muted-fg);
}

/* --- Portraitfoto (LCP) -------------------------------------------------- */

.mpu-hero__figure {
  margin: 0;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.mpu-hero__img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--wp--preset--color--dark) 60%, transparent));
}

/* -------------------------------------------------------------------------
   Vertrauensleiste
   ------------------------------------------------------------------------- */

.mpu-trust {
  background: var(--wp--preset--color--primary);
}

.mpu-trust__title.mpu-trust__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  text-align: center;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--white);
}

.mpu-trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}

/* Weiße Kacheln: die Logos kommen fast alle mit weißem oder transparentem
   Hintergrund und dunkler Schrift — direkt auf Grün wären sie unlesbar. */
.mpu-trust__item.mpu-trust__item {
  margin: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--white);
  border-radius: 10px;
}

.mpu-trust__item img {
  display: block;
  width: auto;
  max-width: 10rem;
  max-height: 3.25rem;
  height: auto;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   Vorteile — Sprungziel #vorteile
   ------------------------------------------------------------------------- */

.mpu-vorteile__inner {
  text-align: center;
}

.mpu-vorteile__eyebrow.mpu-vorteile__eyebrow {
  margin-block: 0 var(--wp--preset--spacing--10);
}

.mpu-vorteile__title.mpu-vorteile__title {
  margin-block: 0;
  color: var(--wp--preset--color--white);
  text-wrap: balance;
}

.mpu-vorteile__grid {
  margin-block-start: var(--wp--preset--spacing--40);
  display: grid;
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  text-align: start;
}

/* Icon NEBEN dem Titel, nicht darüber. Acht gleichförmige Karten mit
   obenliegendem Symbol sind das meistkopierte Bauteil generierter Seiten;
   nebeneinander liest sich die Karte wie ein Eintrag, nicht wie eine Kachel
   aus dem Baukasten. Der Text läuft über beide Spalten, damit die Zeilen
   nicht auf halbe Kartenbreite schrumpfen. */
.mpu-vorteil {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--wp--preset--spacing--20);
  row-gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--30);
  min-width: 0;
  background: var(--wp--preset--color--dark-soft);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  border-radius: 12px;
}

.mpu-vorteil__icon.mpu-vorteil__icon {
  grid-column: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
  /* Reines primary wäre auf dark-soft zu dunkel (Kontrast 2,7:1); die
     Aufhellung bringt das Symbol auf über 6:1 und bleibt in der Markenfarbe. */
  color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--white));
}

.mpu-vorteil__glyph {
  width: 1.5rem;
  height: 1.5rem;
}

.mpu-vorteil__title.mpu-vorteil__title {
  grid-column: 2;
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--white);
}

.mpu-vorteil__text.mpu-vorteil__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  color: var(--wp--preset--color--muted-fg);
}

/* -------------------------------------------------------------------------
   Calendly-CTA — bewusst nur ein externer Link, kein Embed
   ------------------------------------------------------------------------- */

.mpu-cta {
  background: var(--wp--preset--color--dark);
}

.mpu-cta__inner {
  text-align: center;
}

.mpu-cta__eyebrow.mpu-cta__eyebrow {
  margin-block: 0 var(--wp--preset--spacing--10);
}

.mpu-cta__title.mpu-cta__title {
  margin-block: 0;
  color: var(--wp--preset--color--white);
  text-wrap: balance;
}

.mpu-cta__text.mpu-cta__text {
  margin-block: var(--wp--preset--spacing--30) 0;
  margin-inline: auto;
  max-width: 46rem;
  color: var(--wp--preset--color--muted-fg);
}

.mpu-cta__facts {
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.mpu-cta__fact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--white);
}

.mpu-cta__fact-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--primary);
}

.mpu-cta__actions.mpu-cta__actions {
  margin-block: var(--wp--preset--spacing--40) 0;
  justify-content: center;
}

.mpu-cta__meta.mpu-cta__meta {
  margin-block: var(--wp--preset--spacing--20) 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted-fg);
}

/* ===== 30-instep.css ===== */
/* =========================================================================
   30-instep — Ablauf-Strecke, INSTEP-A-Methode (Einleitung, sieben
   Schritte) und Resultat. Gehört Agent C. Alle Klassen tragen den Präfix
   mpu-ablauf…, mpu-instep… bzw. mpu-resultat…; Basisklassen aus 00-base
   werden hier nicht erneut definiert, nur verwendet.
   ========================================================================= */

/* --- Abstandsmaße der Strecke -------------------------------------------
   Untergrenzen per max(): die Spacing-Tokens liefern zurzeit die
   WordPress-Standardskala statt der Werte aus theme.json (Nachforderung im
   Bericht — spacing 50 kommt als 1.5rem statt 4rem an). Die Strecke bleibt
   so in beiden Fällen lesbar und wächst automatisch mit, sobald die Tokens
   stimmen.
   ------------------------------------------------------------------------- */

.mpu-ablauf,
.mpu-instep-intro,
.mpu-instep,
.mpu-resultat {
  --mpu-instep-gap: max(3rem, var(--wp--preset--spacing--50));
  --mpu-instep-pad: max(1.5rem, var(--wp--preset--spacing--40));
  --mpu-instep-flow: max(1rem, var(--wp--preset--spacing--30));
  --mpu-instep-flow-sm: max(0.75rem, var(--wp--preset--spacing--20));
}

/* --- Ablauf: vier Etappen ------------------------------------------------
   Zwei Spalten wie live: Etappen links, Textblock rechts. Im DOM steht der
   Textblock zuerst, damit die H2 vor den H3 gelesen wird; die Spalten
   werden nur visuell getauscht.
   ------------------------------------------------------------------------- */

.mpu-ablauf__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mpu-instep-gap);
  align-items: start;
}

.mpu-ablauf__intro {
  grid-column: 2;
  position: sticky;
  top: 7rem;
}

.mpu-ablauf__intro.mpu-ablauf__intro > * {
  margin-block: 0;
}

.mpu-ablauf__title.mpu-ablauf__title {
  margin-block: 0 var(--mpu-instep-flow-sm);
  text-wrap: balance;
}

.mpu-ablauf__lead.mpu-ablauf__lead {
  margin-block: 0;
  color: var(--wp--preset--color--white);
  font-weight: 700;
}

.mpu-ablauf__list {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: var(--mpu-instep-flow);
}

.mpu-ablauf__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--mpu-instep-flow);
  row-gap: 0.25rem;
  padding: var(--mpu-instep-pad);
  border: 1px solid var(--wp--preset--color--dark-soft);
  border-radius: 12px;
  background: var(--wp--preset--color--dark-soft);
}

.mpu-ablauf__num.mpu-ablauf__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.mpu-ablauf__step-title.mpu-ablauf__step-title {
  grid-column: 2;
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  text-wrap: balance;
}

/* muted-fg ist für den Seitengrund `dark` gedacht; auf der helleren Karte
   (`dark-soft`) erreicht es nur 4,33:1 und verfehlt AA für Fließtext knapp.
   Eine Spur Weiß dazu bringt 5,35:1. Siehe Befund im Bericht — sobald es
   dafür ein eigenes Token gibt, ersetzt es diese Mischung. */
.mpu-ablauf__text.mpu-ablauf__text {
  grid-column: 2;
  margin: 0;
  color: color-mix(in srgb, var(--wp--preset--color--muted-fg) 80%, var(--wp--preset--color--white));
}

/* --- Einleitung --------------------------------------------------------- */

.mpu-instep-intro {
  padding-block-end: var(--mpu-instep-flow);
  text-align: center;
}

.mpu-instep-intro__inner {
  max-width: 46rem;
  margin-inline: auto;
}

.mpu-instep-intro__title.mpu-instep-intro__title {
  margin-block: 0 var(--mpu-instep-flow-sm);
}

.mpu-instep-intro__lead.mpu-instep-intro__lead {
  margin-block: 0;
  color: var(--wp--preset--color--muted-fg);
}

/* --- Schritte: Raster --------------------------------------------------- */

.mpu-instep {
  /* Überlappung Kachel ↔ Karte und der Textabstand dahinter hängen
     voneinander ab. Deshalb als eigene Variablen: Wer die Überlappung
     ändert, verschiebt den Text automatisch mit — der Text kann nie unter
     die Kachel rutschen. */
  --mpu-instep-overlap: 3rem;
  --mpu-instep-inset: 2rem;

  padding-block-start: var(--mpu-instep-flow);
}

.mpu-instep__steps {
  display: grid;
  gap: var(--mpu-instep-gap);
}

.mpu-instep__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

/* Verbindungslinie zwischen zwei Schritten — sitzt in der Lücke, damit sie
   nicht hinter den weißen Karten hervorblitzt. */
.mpu-instep__step + .mpu-instep__step::before {
  content: "";
  position: absolute;
  top: calc(var(--mpu-instep-gap) * -1);
  left: 50%;
  width: 2px;
  height: var(--mpu-instep-gap);
  margin-inline-start: -1px;
  /* accent, nicht primary: die Linie liegt auf dem dunklen Seitengrund. */
  background: var(--wp--preset--color--accent);
}

/* --- Schritte: Kachel mit Icon und Schlagwort ---------------------------- */

.mpu-instep__tile {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mpu-instep-flow-sm);
  min-height: 14rem;
  padding: var(--mpu-instep-pad);
  border: 2px solid var(--wp--preset--color--white);
  border-radius: 12px;
  /* Vorher ein linearer Verlauf. Die Kachel kommt siebenmal vor und
     erzeugte damit allein sieben Verlaufselemente. Flächig wirkt sie
     ruhiger und trägt die weiße Schrift genauso. */
  background: var(--wp--preset--color--primary);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--wp--preset--color--dark) 45%, transparent);
  text-align: center;
}

.mpu-instep__icon {
  width: 3rem;
  height: 3rem;
  color: var(--wp--preset--color--white);
  stroke-width: 1.5;
}

.mpu-instep__keyword.mpu-instep__keyword {
  margin: 0;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* --- Schritte: Textkarte ------------------------------------------------- */

.mpu-instep__card {
  position: relative;
  z-index: 1;
  grid-row: 1;
  padding: var(--mpu-instep-pad);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--foreground);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--wp--preset--color--dark) 30%, transparent);
}

/* Core nullt bei blockGap 0 die Abstände der Kinder — Doppelklasse sorgt für
   die nötige Spezifität (Vertrag Abschnitt 5, Punkt 5). */
.mpu-instep__card.mpu-instep__card > * {
  margin-block: 0;
}

.mpu-instep__card.mpu-instep__card > * + * {
  margin-block-start: var(--mpu-instep-flow-sm);
}

.mpu-instep__title.mpu-instep__title {
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--2-xl);
  text-wrap: balance;
}

.mpu-instep__intro {
  font-weight: 700;
}

.mpu-instep__list {
  padding: 0;
  list-style: none;
}

.mpu-instep__list li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.mpu-instep__list li + li {
  margin-block-start: var(--wp--preset--spacing--10);
}

.mpu-instep__list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.mpu-instep__outcome {
  color: color-mix(in srgb, var(--wp--preset--color--foreground) 75%, transparent);
}

/* --- Schritte: Seitenwechsel -------------------------------------------- */

.mpu-instep__step--start > .mpu-instep__tile { grid-column: 1; }

.mpu-instep__step--start > .mpu-instep__card {
  grid-column: 2;
  margin-inline-start: calc(var(--mpu-instep-overlap) * -1);
  padding-inline-start: calc(var(--mpu-instep-overlap) + var(--mpu-instep-inset));
}

.mpu-instep__step--end > .mpu-instep__tile { grid-column: 2; }

.mpu-instep__step--end > .mpu-instep__card {
  grid-column: 1;
  margin-inline-end: calc(var(--mpu-instep-overlap) * -1);
  padding-inline-end: calc(var(--mpu-instep-overlap) + var(--mpu-instep-inset));
}

/* --- Resultat ------------------------------------------------------------ */

.mpu-resultat__panel {
  padding: var(--mpu-instep-gap) var(--mpu-instep-pad);
  border: 2px solid var(--wp--preset--color--white);
  border-radius: 16px;
  /* Vorher ein linearer Verlauf. Die Kachel kommt siebenmal vor und
     erzeugte damit allein sieben Verlaufselemente. Flächig wirkt sie
     ruhiger und trägt die weiße Schrift genauso. */
  background: var(--wp--preset--color--primary);
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--wp--preset--color--dark) 45%, transparent);
  text-align: center;
}

.mpu-resultat__panel.mpu-resultat__panel > * {
  margin-block: 0;
}

.mpu-resultat__panel.mpu-resultat__panel > * + * {
  margin-block-start: var(--mpu-instep-flow);
}

.mpu-resultat__icon {
  width: 3rem;
  height: 3rem;
  color: var(--wp--preset--color--white);
  stroke-width: 1.5;
}

.mpu-resultat__title.mpu-resultat__title {
  color: var(--wp--preset--color--white);
}

.mpu-resultat__list {
  display: inline-block;
  max-width: 44rem;
  padding: 0;
  color: var(--wp--preset--color--white);
  list-style: none;
  text-align: start;
}

.mpu-resultat__list li {
  position: relative;
  padding-inline-start: 2rem;
  font-weight: 700;
}

.mpu-resultat__list li + li {
  margin-block-start: var(--wp--preset--spacing--10);
}

.mpu-resultat__list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--wp--preset--color--white);
}

/* Farbvariante mit .wp-block-button prefixen (Vertrag Abschnitt 5, Punkt 6). */
.wp-block-button.mpu-resultat__cta .wp-block-button__link {
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--white);
}

.wp-block-button.mpu-resultat__cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--dark-soft);
}

/* Volles Weiß statt abgeschwächt: 82 % Deckkraft ergaben auf der grünen
   Fläche nur 3,7:1 — zu wenig für 14px-Text. Die Zeile tritt jetzt allein
   über die Schriftgröße zurück. */
.mpu-resultat__note {
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm);
}

/* --- Schmale Viewports --------------------------------------------------- */

@media (max-width: 860px) {
  .mpu-ablauf__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mpu-instep-flow);
  }

  .mpu-ablauf__intro {
    grid-column: 1;
    position: static;
  }

  .mpu-ablauf__list {
    grid-column: 1;
    grid-row: auto;
  }

  .mpu-ablauf__step {
    padding: var(--mpu-instep-flow);
  }

  .mpu-instep {
    --mpu-instep-overlap: 2rem;
    --mpu-instep-inset: 1.5rem;
  }

  .mpu-instep__step {
    grid-template-columns: minmax(0, 1fr);
  }

  .mpu-instep__step--start > .mpu-instep__tile,
  .mpu-instep__step--end > .mpu-instep__tile {
    grid-row: 1;
    grid-column: 1;
    min-height: 10rem;
    margin-block-end: calc(var(--mpu-instep-overlap) * -1);
  }

  .mpu-instep__step--start > .mpu-instep__card,
  .mpu-instep__step--end > .mpu-instep__card {
    grid-row: 2;
    grid-column: 1;
    margin-inline: 0;
    padding: var(--mpu-instep-pad);
    padding-block-start: calc(var(--mpu-instep-overlap) + var(--mpu-instep-inset));
  }

  .mpu-instep__keyword.mpu-instep__keyword {
    font-size: var(--wp--preset--font-size--xl);
  }

  .mpu-resultat__panel {
    padding: var(--mpu-instep-pad);
  }
}

/* Unter ~560px frisst die Nummernspalte zu viel Breite — Nummer über den
   Titel statt daneben. */
@media (max-width: 560px) {
  .mpu-ablauf__step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }

  .mpu-ablauf__num.mpu-ablauf__num,
  .mpu-ablauf__step-title.mpu-ablauf__step-title,
  .mpu-ablauf__text.mpu-ablauf__text {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ===== 40-social.css ===== */
/* =========================================================================
   40-social — Über mich, Kundenstimmen, YouTube-Aufruf, FAQ (Agent D).
   Nur Klassen mit dem Präfix mpu-about / mpu-testimonial(s) / mpu-youtube /
   mpu-faq. Basisklassen aus 00-base.css (mpu-sec, mpu-container,
   mpu-eyebrow, mpu-icon, reveal) werden hier NICHT neu definiert.
   Farben und Größen ausschließlich als Token.
   ========================================================================= */

/* -------------------------------------------------------------- Über mich */

.mpu-about__cols {
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}

/* Core bricht wp-block-columns unterhalb 782px selbst um; darüber soll die
   Textspalte breiter sein als das Bild. Core setzt flex-basis über
   `.wp-block-columns .wp-block-column` (0,2,0) — deshalb Doppel-Klasse
   statt !important. */
@media (min-width: 782px) {
  .mpu-about__cols .mpu-about__media.mpu-about__media {
    flex-basis: 42%;
    flex-grow: 0;
  }

  .mpu-about__cols .mpu-about__body.mpu-about__body {
    flex-basis: 58%;
    flex-grow: 0;
  }
}

.mpu-about__figure {
  margin: 0;
}

.mpu-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Einzelkind-Absätze in Gruppen bekommen von Core margin-block:0 —
   deshalb Doppel-Klassen-Selektor (Vertrag Abschnitt 5, Falle 5). */
.mpu-about__lead.mpu-about__lead {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  color: var(--wp--preset--color--white);
}

.mpu-about__body h2 {
  margin: 0 0 var(--wp--preset--spacing--20);
}

.mpu-about__body p {
  margin-block: 0 var(--wp--preset--spacing--20);
}

.mpu-about__creds {
  margin: var(--wp--preset--spacing--30) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

.mpu-about__cred {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}

.mpu-about__cred-icon {
  margin-top: 0.15rem;
  color: var(--wp--preset--color--accent);
}

.mpu-about__cred-text strong {
  color: var(--wp--preset--color--white);
}

.mpu-about__note.mpu-about__note {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
}

.mpu-about__actions {
  margin-block: 0;
}

/* ----------------------------------------------------------- Kundenstimmen */

.mpu-testimonials__head {
  max-width: 46rem;
  margin-bottom: var(--wp--preset--spacing--40);
}

.mpu-testimonials__intro.mpu-testimonials__intro {
  margin: var(--wp--preset--spacing--20) 0 0;
  font-size: var(--wp--preset--font-size--lg);
}

/* Einhängepunkt für das ProvenExpert-Widget. Agent M (Welle 2) ersetzt den
   Inhalt; Rahmen und Abstand bleiben, damit die Seite beim Nachladen nicht
   springt. */
.mpu-testimonials__widget {
  margin-bottom: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--30);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 12px;
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mpu-testimonials__widget-note {
  margin: 0;
  max-width: 44rem;
  font-size: var(--wp--preset--font-size--sm);
}

.mpu-testimonials__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .mpu-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .mpu-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

.mpu-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--foreground);
}

.mpu-testimonial__stars {
  margin: 0;
  display: flex;
  gap: 0.25rem;
  color: var(--wp--preset--color--primary);
}

/* Die Basisklasse mpu-icon (00-base.css) liefert stroke:currentColor und
   fill:none — für gefüllte Sterne hier gezielt umkehren. */
.mpu-testimonial__star {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  stroke: none;
}

.mpu-testimonial__quote {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mpu-testimonial__quote p {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
}

.mpu-testimonial__name {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
}

.mpu-testimonials__hint.mpu-testimonials__hint {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: var(--wp--preset--font-size--xs);
}

/* --------------------------------------------------------- YouTube-Aufruf */

.mpu-youtube {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.mpu-youtube__body {
  max-width: 46rem;
}

.mpu-youtube__title.mpu-youtube__title {
  margin: 0 0 var(--wp--preset--spacing--20);
}

.mpu-youtube__text.mpu-youtube__text {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--white);
}

.mpu-youtube__actions {
  margin: 0 0 var(--wp--preset--spacing--20);
}

.mpu-youtube__link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.75rem;
  border-radius: 8px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark);
  font-weight: 700;
  text-decoration: none;
}

.mpu-youtube__link:hover,
.mpu-youtube__link:focus-visible {
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--white);
}

.mpu-youtube__icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
  stroke: none;
}

.mpu-youtube__note.mpu-youtube__note {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------- FAQ */

.mpu-faq__head {
  max-width: 46rem;
  margin-bottom: var(--wp--preset--spacing--40);
}

.mpu-faq__intro.mpu-faq__intro {
  margin: var(--wp--preset--spacing--20) 0 0;
  font-size: var(--wp--preset--font-size--lg);
}

/* Zweispaltiges Raster ab Tablet. Die Elemente fließen zeilenweise, jede
   Antwort bleibt vollständig in ihrer Zelle — anders als bei CSS-columns,
   wo ein aufgeklapptes <details> über den Spaltenumbruch reißen würde. */
.mpu-faq__list {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 782px) {
  .mpu-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--40);
  }
}

/* Rahmen, Radius und Innenabstand kommen aus theme.json
   (styles.blocks["core/details"]) — hier nur Hintergrund und Verhalten. */
.mpu-faq__item {
  background: var(--wp--preset--color--dark-soft);
  transition: border-color .2s ease;
}

.mpu-faq__item[open] {
  border-color: var(--wp--preset--color--accent);
}

.mpu-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--white);
}

.mpu-faq__item > summary::-webkit-details-marker { display: none; }

/* Marker als reines CSS-Dreieck: kein zusätzliches Markup in <summary>,
   das die Blockvalidierung von core/details brechen würde. */
.mpu-faq__item > summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform .2s ease;
  color: var(--wp--preset--color--accent);
}

.mpu-faq__item[open] > summary::after {
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.mpu-faq__item:hover {
  border-color: var(--wp--preset--color--accent);
}

/* Antworttext bewusst in Weiß statt muted-fg: muted-fg (#9CA3AF) auf
   dark-soft (#26413E) erreicht nur 4,33:1 und verfehlt WCAG AA (4,5:1)
   knapp. Weiß auf dark-soft liegt bei 11:1. */
.mpu-faq__item p,
.mpu-faq__item li {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.65;
  color: var(--wp--preset--color--white);
}

.mpu-faq__item p {
  margin-block: 0 var(--wp--preset--spacing--20);
}

.mpu-faq__item p:last-child { margin-bottom: 0; }

.mpu-faq__item ul,
.mpu-faq__item ol {
  margin: 0 0 var(--wp--preset--spacing--20);
  padding-left: 1.25rem;
}

.mpu-faq__item li { margin-bottom: 0.4rem; }

.mpu-faq__item strong { color: var(--wp--preset--color--white); }

/* Muss NACH den p/ul-Regeln stehen, sonst nullt deren margin-block den
   Abstand zwischen Frage und Antwort wieder weg. */
.mpu-faq__item > summary + * {
  margin-top: var(--wp--preset--spacing--20);
}

.mpu-faq__outro.mpu-faq__outro {
  margin: var(--wp--preset--spacing--40) 0 0;
  font-size: var(--wp--preset--font-size--base);
}

@media (prefers-reduced-motion: reduce) {
  .mpu-faq__item,
  .mpu-faq__item > summary::after { transition: none; }
}

/* ===== 50-content.css ===== */
/* =========================================================================
   50-content — Unterseiten: Kopf mit Brotkrumen, Lesebereich, verwandte
   Themen, Abschluss-CTA. Gehört Agent E.

   Doppelte Klassenselektoren (.mpu-x.mpu-x) stehen überall dort, wo Core
   eigene Layoutregeln in den <head> schreibt: blockGap ist im Theme 0, und
   `:where(.is-layout-flow) > *` bzw. `.wp-container-… > * + *` nullen sonst
   jeden Außenabstand (Vertrag Abschnitt 5, Punkt 5).
   ========================================================================= */

/* --- Kopfbereich der Unterseite ----------------------------------------- */

.mpu-sub-hero {
  padding-block-start: var(--wp--preset--spacing--50);
  padding-block-end: var(--wp--preset--spacing--30);
}

/* Keine eigene max-width: Core setzt auf Kinder eines constrained-Layouts
   `margin-inline: auto !important`. Eine engere Breite würde die H1 gegenüber
   dem Fließtext einrücken statt sie linksbündig zu halten. Der Umbruch kommt
   stattdessen über text-wrap: balance. */
.mpu-sub-hero__title.mpu-sub-hero__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--4-xl);
  line-height: 1.15;
  text-wrap: balance;
}

@media (max-width: 47.9375rem) {
  .mpu-sub-hero__title.mpu-sub-hero__title {
    font-size: var(--wp--preset--font-size--3-xl);
  }
}

/* --- Brotkrumen --------------------------------------------------------- */

.mpu-breadcrumb {
  margin-block-end: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
}

.mpu-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wp--preset--color--muted-fg);
}

/* Trenner als ::before am jeweils folgenden Element — kein zusätzliches
   Markup und für Screenreader unsichtbar. */
.mpu-breadcrumb__item + .mpu-breadcrumb__item::before {
  content: "›";
  color: var(--wp--preset--color--border);
  opacity: 0.7;
}

.mpu-breadcrumb__item[aria-current="page"] {
  color: var(--wp--preset--color--white);
}

.mpu-breadcrumb__link {
  color: var(--wp--preset--color--muted-fg);
  text-decoration: none;
}

.mpu-breadcrumb__link:hover,
.mpu-breadcrumb__link:focus-visible {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}

/* --- Lesebereich -------------------------------------------------------- */

/* Ratgeberseiten sind Langtext, keine Verkaufsstrecke. Dunkler Grund plus
   graue Schrift trägt einen Hero, aber keine 1.500 Wörter: Der Artikelbereich
   steht deshalb auf heller Fläche mit dunklem Text. Kopf, Seitenkopf und die
   Abschlussblöcke bleiben dunkelgrün — sie fassen den Lesebereich ein und
   halten die Markenklammer. */

.mpu-article:not(.mpu-article--dunkel) {
  padding-block: var(--wp--preset--spacing--60);
  background: var(--mpu-lese-grund);
  color: var(--mpu-lese-text);
}

/* Warmes Papierweiß statt reinem Grau — weniger Blendung als #FFF, und der
   leichte Grünstich bindet den Lesebereich an die Marke. */
.mpu-article:not(.mpu-article--dunkel) {
  --mpu-lese-grund: #F7F8F7;
  --mpu-lese-text: #24312E;
  --mpu-lese-gedaempft: #5A6B66;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content {
  /* Zeilenlänge: 40rem ≈ 65 Zeichen. 46rem waren rund 75 — für Fließtext
     schon an der oberen Grenze, ab der das Auge die nächste Zeile sucht. */
  max-width: 40rem;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.75;
  color: var(--mpu-lese-text);
  /* Ziffern in Anschriften und Preisen laufen sonst unruhig. */
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Ein einziger Maßstab --------------------------------------------------
   Vorher standen im Fließtext sechs Größen (14/16/18/20/22/30) und drei
   Gewichte nebeneinander — das liest sich wie verschiedene Schriften, obwohl
   durchgehend Montserrat läuft. Jetzt: eine Textgröße für Absätze UND Listen,
   Links erben die Größe, Überschriften in genau drei klar getrennten Stufen.  */

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content :is(p, li, td, th, blockquote) {
  font-size: var(--wp--preset--font-size--lg);
}

/* :not(.wp-block-button__link) ist zwingend: Ohne die Ausnahme faerbt diese
   Regel auch den Text von Schaltflaechen im Inhaltsbereich gruen — und die
   haben bereits einen gruenen Grund. Ergebnis war Gruen auf Gruen, Kontrast
   1:1, die Beschriftung unsichtbar (auf /kurse/ live aufgefallen). */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content a:not(.wp-block-button__link) {
  font-size: inherit;
  color: var(--wp--preset--color--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content a:not(.wp-block-button__link):hover,
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content a:not(.wp-block-button__link):focus-visible {
  text-decoration-thickness: 2px;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content > :is(h2, h3, h4) + * {
  margin-block-start: var(--wp--preset--spacing--20);
}

/* Mehr Luft ÜBER einer Überschrift als darunter — sie gehört optisch zum
   folgenden Abschnitt, nicht zum vorhergehenden. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content > * + :is(h2, h3, h4) {
  margin-block-start: var(--wp--preset--spacing--60);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content :is(h2, h3, h4) {
  color: var(--mpu-lese-text);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* 900 ist die Schauschrift der Startseite. Im Fließtext wirkt sie laut und
   drängt sich vor den Text — hier reicht 700 durchgehend. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content h2 {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  padding-block-end: 0.5rem;
  border-block-end: 2px solid var(--wp--preset--color--primary);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content h3 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.35;
}

/* H4 trug vorher eine eigene Farbe und war dadurch eine vierte Stimme.
   Jetzt nur noch über Gewicht und Größe abgesetzt. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mpu-lese-gedaempft);
}

/* Einstiegsabsatz größer — gibt dem Text einen Anfang statt eines Anfangs
   mitten in gleichförmigen Blöcken. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content > p:first-child {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--mpu-lese-text);
}

/* Adressblöcke auf /begutachtungsstellen/ bestehen aus sehr vielen <br>.
   Als abgesetzte Karte lesbar statt als Bleiwüste. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content p:has(br) {
  line-height: 1.55;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-inline-start: 3px solid var(--wp--preset--color--primary);
  background: #EEF1EF;
  border-radius: 0 6px 6px 0;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content ul,
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content ol {
  padding-inline-start: 1.35em;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content li + li {
  margin-block-start: var(--wp--preset--spacing--10);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content li::marker {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content strong {
  color: var(--mpu-lese-text);
  font-weight: 700;
}

/* --- Verwandte Themen --------------------------------------------------- */

.mpu-related {
  border-block-start: 1px solid var(--wp--preset--color--dark-soft);
}

/* Auf dieselbe Lesebreite wie der Artikel, damit Überschrift und Karten bündig
   unter dem Fließtext beginnen. Der Wert kommt aus theme.json (contentSize)
   und wird hier nicht zweitgeschrieben. */
.mpu-related__inner {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.mpu-related__eyebrow.mpu-related__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  /* Kein Versal + Sperrung: siehe .mpu-eyebrow in 00-base.css. */
  color: var(--wp--preset--color--accent);
}

.mpu-related__title.mpu-related__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--3-xl);
}

.mpu-related__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpu-related__card {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
  padding: var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--dark-soft);
  border-radius: 12px;
  background: var(--wp--preset--color--dark-soft);
  color: var(--wp--preset--color--white);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.mpu-related__card:hover,
.mpu-related__card:focus-visible {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}

.mpu-related__card-title {
  flex: 1;
  font-weight: 700;
  line-height: 1.35;
}

.mpu-related__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
  .mpu-related__card { transition: none; }
  .mpu-related__card:hover,
  .mpu-related__card:focus-visible { transform: none; }
}

/* --- Abschluss-CTA ------------------------------------------------------ */

.mpu-subcta__title.mpu-subcta__title {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--3-xl);
  text-wrap: balance;
}

.mpu-subcta__text.mpu-subcta__text {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--lg);
}

.mpu-subcta__actions.mpu-subcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

/* --- Platzhalter im Editor ---------------------------------------------- */
/* Auf der Website ersetzt inc/related.php diese Gruppen komplett; sichtbar
   sind sie nur im Block-Editor. Dort sollen sie erkennbar Platzhalter sein. */

.mpu-slot__hint.mpu-slot__hint {
  margin: 0;
  padding: var(--wp--preset--spacing--20);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}


/* Ratgeberinhalt enthält rohe Adressen und Telefonnummern ohne Umbruchpunkt
   (Calendly-Links stehen teils als Fließtext in Überschriften). Ohne diese
   Regel schiebt sich die Seite ab 360 px seitwärts — auf 9 von 23 Seiten
   gemessen. hyphens bleibt aus, sonst trennt der Browser Fachbegriffe. */
.mpu-content,
.mpu-content :is(p, li, h1, h2, h3, h4, td, th, a) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* --- Absenderzeile über dem Ratgebertext -------------------------------- */

.mpu-autor {
  max-width: 40rem;
  margin: 0 auto var(--wp--preset--spacing--40);
}

.mpu-autor__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  background: #FFFFFF;
  border: 1px solid #E2E7E4;
  border-inline-start: 3px solid var(--wp--preset--color--primary);
  border-radius: 0 8px 8px 0;
}

/* Steht bereit, falls ein echtes Kopfbild nachgeliefert wird — siehe
   Hinweis in patterns/autor-box.php.
.mpu-autor__bild {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: 50% 20%;
}
*/

.mpu-autor__siegel {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #E4EDE8;
  color: var(--wp--preset--color--primary);
}

.mpu-autor__siegel .mpu-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mpu-autor__text > * { margin: 0; }

.mpu-autor__zeile {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.4;
  color: #24312E;
}

.mpu-autor__label {
  font-size: var(--wp--preset--font-size--sm);
  color: #5A6B66;
}

.mpu-autor__rolle {
  margin-block-start: 0.15rem;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.45;
  color: #5A6B66;
}

@media (max-width: 30rem) {
  .mpu-autor__inner { align-items: flex-start; }
}

/* --- Artikel als abgesetzte Fläche --------------------------------------
   Der Text stand vorher frei im Weißraum ohne erkennbare Begrenzung. Eine
   ruhige Karte auf leicht getöntem Grund gibt ihm einen Rahmen, ohne dass
   der Lesefluss durch Linien zerschnitten wird. */

.mpu-article:not(.mpu-article--dunkel) {
  background: #EDF1EF;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  background: #FBFCFB;
  border: 1px solid #E2E7E4;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(30 53 49 / 4%), 0 8px 24px rgb(30 53 49 / 5%);
  /* Die Karte trägt jetzt den Innenabstand, die Zeilenlänge bleibt gleich. */
  max-width: calc(40rem + 2 * var(--wp--preset--spacing--40));
}

@media (max-width: 47.9375rem) {
  .mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content {
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
    border-inline: 0;
    border-radius: 0;
  }
}

/* --- Begutachtungsstellen ------------------------------------------------
   261 Adressen standen in zehn Sammelabsätzen mit bis zu 169 Zeilenumbrüchen.
   Jetzt ein Absatz je Stelle; das Raster hält die Seite kurz genug, dass man
   den PLZ-Bereich noch überblickt. */

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stellen {
  display: grid;
  /* 19rem statt 17: Die immer gleiche Einleitungszeile „Begutachtungsstelle
     für Fahreignung der/des" passt damit auf eine Zeile statt auf zwei. */
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--20);
  margin-block-start: var(--wp--preset--spacing--30);
}

/* Die Karte kommt aus der p:has(br)-Regel weiter oben. Hier nur, was der
   Rasterkontext ändert: gleiche Höhe, etwas engere Innenabstände. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle {
  margin: 0;
  padding: var(--wp--preset--spacing--20);
  /* Kleiner als der Fließtext: Adressen werden gescannt, nicht gelesen. Der
     Trägername bleibt auf Basisgröße und trägt die Karte. */
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.55;
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle strong {
  display: inline-block;
  margin-block-end: 0.15rem;
}

/* Die einleitende Zeile „Begutachtungsstelle für Fahreignung der/des" wieder-
   holt sich 261-mal. Sie muss lesbar bleiben, darf aber nicht dominieren. */
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle {
  color: var(--mpu-lese-gedaempft);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle strong,
.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle a {
  color: var(--mpu-lese-text);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle strong {
  font-size: var(--wp--preset--font-size--base);
}

.mpu-article:not(.mpu-article--dunkel) .mpu-content.mpu-content .mpu-stelle a {
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
}

/* ===== 60-kurse.css ===== */
/* =========================================================================
   60-kurse — Produktseite /kurse/ und die Rechtstexte. Gehört Agent K.

   Zwei Eigenheiten des Umfelds, die fast jede Regel hier erklären:

   1. blockGap steht im Theme auf 0. Core schreibt dazu
      `:where(.is-layout-flow) > * { margin-block: 0 }` in den <head>. Der
      Selektor hat die Spezifität 0 — ein einfacher Klassenselektor genügt
      also, um Abstände zurückzuholen. Wo Core zusätzlich eigene Regeln für
      erste/letzte Kinder setzt, steht die Klasse hier doppelt im Selektor,
      wie in Vertrag Abschnitt 5, Punkt 5 beschrieben.

   2. Der Seiteninhalt läuft durch core/post-content mit 46 rem Lesebreite.
      Das Kartenraster trägt deshalb align="wide" und bekommt seine Breite von
      Core; hier steht nur, wie es sich intern aufteilt.

   Farben ausschließlich als Token. Auf den dunklen Kartenflächen (dark-soft)
   trägt weißer Text 11,0:1 und accent 4,5:1 — primary läge dort bei 2,3:1 und
   ist deshalb ausschließlich für helle Flächen reserviert.
   ========================================================================= */

/* --- Einleitung --------------------------------------------------------- */

/* Die H2 ist das erste Kind des Lesebereichs; 50-content.css setzt Abstände
   erst zwischen Geschwistern, unter der H1 aus core/post-title bliebe sonst
   kein Luftraum. */
.mpu-kurse__title.mpu-kurse__title {
  margin-block-start: var(--wp--preset--spacing--20);
  text-wrap: balance;
}

.mpu-kurse__lead.mpu-kurse__lead {
  color: var(--wp--preset--color--white);
}

/* --- Kartenraster ------------------------------------------------------- */
/* auto-fit statt fester Spaltenzahl: die Karten stapeln dort, wo sie zu schmal
   würden, und nicht an einem geratenen Haltepunkt. */

.mpu-kurse__grid {
  display: grid;
  /* min() nötig: minmax(19rem, …) erzwingt 304 px Spurbreite, bei 320 px
     Viewport stehen nach den Innenabständen aber nur 280 px zur Verfügung —
     die Karte schob die Seite sonst seitwärts (gemessen 344/320). */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--30);
}

/* --- Produktkarte ------------------------------------------------------- */
/* Der Innenabstand läuft über flex-gap, nicht über Geschwister-Margins. Ein
   Selektor `.mpu-produkt > * + *` hätte die Spezifität 0-1-0 und wäre von
   jeder Einzelregel darunter (.mpu-produkt__titel.mpu-produkt__titel, 0-2-0)
   wieder ausgehebelt worden — genau das ist beim ersten Anlauf passiert.
   gap kennt diesen Konflikt nicht. */

.mpu-produkt {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
  padding: var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--dark-soft);
  border-radius: 16px;
  background: var(--wp--preset--color--dark-soft);
  color: var(--wp--preset--color--white);
}

.mpu-produkt__media.mpu-produkt__media {
  margin: 0;
}

.mpu-produkt__media img {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: var(--wp--preset--color--white);
}

/* Die Kennzeile trägt zusätzlich die Basisklasse aus 00-base.css und damit
   0,75rem Unterrand — hier übernimmt das der flex-gap der Karte. */
.mpu-produkt__eyebrow.mpu-produkt__eyebrow {
  margin: 0;
}

.mpu-produkt__title.mpu-produkt__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: 1.25;
  text-wrap: balance;
}

.mpu-produkt__text.mpu-produkt__text {
  margin: 0;
  line-height: 1.65;
}

.mpu-produkt__punkte.mpu-produkt__punkte {
  margin: 0;
  padding-inline-start: 1.35em;
}

.mpu-produkt__punkte li + li {
  margin-block-start: var(--wp--preset--spacing--10);
}

.mpu-produkt__punkte li::marker {
  color: var(--wp--preset--color--accent);
}

.mpu-produkt__quelle.mpu-produkt__quelle {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  color: var(--wp--preset--color--muted-fg);
}

/* Preisblock ans untere Kartenende: die beiden Karten sind unterschiedlich
   lang, Preis und Schaltfläche sollen trotzdem auf einer Linie liegen. */
.mpu-produkt__preisblock.mpu-produkt__preisblock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin-block-start: auto;
  padding-block-start: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--wp--preset--color--dark);
}

.mpu-produkt__preis.mpu-produkt__preis {
  margin: 0;
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 900;
  line-height: 1.1;
  color: var(--wp--preset--color--accent);
}

.mpu-produkt__preis-zusatz.mpu-produkt__preis-zusatz {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}

.mpu-produkt__hinweis.mpu-produkt__hinweis {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.55;
}

.mpu-produkt__actions.mpu-produkt__actions {
  margin: 0;
}

/* Die Schaltfläche führt auf die Akademie-Subdomain und ist der einzige
   Ausgang der Karte — deshalb über die volle Kartenbreite. Die Breite muss am
   flex-Kind (.wp-block-button) hängen; ein width:100% nur am <a> darin bliebe
   wirkungslos, weil der Wrapper selbst nach Inhalt schrumpft. */
.mpu-produkt__actions .wp-block-button {
  flex: 1 1 100%;
}

.mpu-produkt__actions .wp-block-button__link {
  display: block;
  text-align: center;
}

.mpu-kurse__fussnote.mpu-kurse__fussnote {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted-fg);
}

/* --- Rechtstexte (Datenschutzerklärung) --------------------------------- */
/* Ohne eigene Regeln. Der Text besteht nach dem Umbau ausschließlich aus
   core/heading, core/paragraph und core/list im Lesebereich — den stylt
   50-content.css bereits vollständig, einschließlich der Umbruchregel für die
   langen Dienste-URLs (dort begründet mit Prüfpunkt 1, Fund B5). Eine zweite
   Fassung derselben Regeln hier hätte nur eine Kollisionswarnung erzeugt. */

/* ===== 70-consent-a11y.css ===== */
/* =========================================================================
   70-consent-a11y — Einwilligungs-Platzhalter und Barrierefreiheits-Grundlage.
   Gehört Agent M (Welle 2). Andere Agenten schreiben hier nicht hinein.

   Diese Datei steht bewusst am Ende der Reihenfolge: Zwei Regeln hier
   überschreiben absichtlich Vorgaben aus 00-base.css, ohne die dortige Datei
   anzufassen (Vertrag Abschnitt 2). Beide sind unten einzeln begründet.

   Kontrastwerte in den Kommentaren sind gegen die *heute ausgelieferte*
   Palette nachgerechnet (dark #1E3531 · dark-soft #26413E · primary #298263 ·
   accent #3CBA8E · muted-fg #A0A6B2 · surface #FAFAFA). Ältere Berichte im
   Projekt tragen Zahlen einer früheren Palette — nicht von dort übernehmen.
   ========================================================================= */

/* =========================================================================
   1 — Fokusanzeige
   =========================================================================

   00-base.css setzt einen 3 px starken Ring in `primary`. Gemessen im echten
   Seitenkontext ergibt das:

       primary auf dark        2,78:1   unter dem Soll von 3:1 (WCAG 1.4.11)
       primary auf dark-soft   2,34:1   unter dem Soll
       primary auf primary     1,00:1   Sprungmarke „Zum Inhalt springen“ —
                                        der Ring war dort unsichtbar

   Die Seite hat helle *und* dunkle Flächen, und die Palette enthält keine
   einzelne Farbe, die auf beiden 3:1 erreicht (accent hält auf dark 5,35:1,
   auf weiß nur 2,44:1; weiß hält auf dark 13,05:1, auf surface 1,04:1).
   Deshalb ein zweifarbiger Ring: ein dunkler Kern direkt am Element und ein
   weißer Ring darüber. Auf hellem Grund trägt der dunkle Anteil (13,05:1
   gegen weiß), auf dunklem Grund der weiße (13,05:1 gegen dark). Die beiden
   Ringe liegen aneinander und tragen zusätzlich gegeneinander.

   Geometrie: box-shadow zeichnet 0–6 px um das Element, das Outline liegt mit
   2 px Versatz und 2 px Stärke darüber (2–4 px). Ergebnis von innen nach
   außen: dunkel · weiß · dunkel. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--wp--preset--color--dark);
}

/* Der Umriss-Button trägt seine Kontur selbst als inset-Schatten (00-base.css,
   höhere Spezifität). Dort greift der Ring aus box-shadow nicht — das ist in
   Ordnung, die Fläche liegt immer auf dunklem Grund, wo das weiße Outline
   allein 13,05:1 hält. Hier nur der Vollständigkeit halber festgehalten. */

/* Fokus im Aufklappmenü: Das Panel liegt über dem Seiteninhalt, der Ring darf
   nicht vom nächsten Eintrag beschnitten werden. */
.mpu-consent__btn:focus-visible {
  outline-offset: 3px;
}

/* =========================================================================
   2 — Reveal und Tastaturfokus
   =========================================================================

   `.reveal` startet mit opacity:0. Springt der Fokus per Tabulator in einen
   Abschnitt, der noch nicht eingeblendet ist, scrollt der Browser ihn zwar
   ins Bild und der IntersectionObserver blendet ihn ein — aber erst über eine
   halbe Sekunde Übergang. In dieser Zeit steht der Fokus auf etwas nahezu
   Unsichtbarem. Gemessen: nach 750 ms Wartezeit war keine der 33 Stationen
   der Startseite mehr unsichtbar, währenddessen schon.

   Diese Regel nimmt das Zeitfenster heraus: Sobald der Fokus im Abschnitt
   steht, ist er sofort und vollständig da. `.reveal` ist keine `.mpu-`-Klasse,
   die Kollisionsprüfung von build-css.sh schlägt hier also nicht an; die
   Vorgabe in 00-base.css bleibt unverändert bestehen. */

.reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

/* =========================================================================
   3 — Platzhalter für einwilligungspflichtige Einbindungen
   =========================================================================

   Aufbau (erzeugt von inc/consent.php). Die Klassennamen der beiden
   Pattern-Elemente stehen hier ohne führenden Punkt, weil die Prüfung in
   build-css.sh auch Kommentare durchsucht und sie sonst als Überschneidung
   mit 40-social.css meldet:

     div[data-mpu-embed]           ← Container aus dem Pattern (Agent D),
       .mpu-consent                  Klasse mpu-testimonials__widget
         .mpu-consent__platzhalter ← einziges Kind, damit die Flex-Zentrierung
           p                           des Containers unangetastet bleibt
           p.mpu-consent__aktion  > button
           p.mpu-consent__recht
         .mpu-consent__ziel        ← Zielelement des fremden Skripts
         p.mpu-consent__status     ← role="status", Meldung nach dem Laden
         script[type="text/plain"] ← gesperrte Hülle, nie ausgeführt
*/

.mpu-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  width: 100%;
}

.mpu-consent__platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  max-width: 44rem;
}

/* Ohne JavaScript ist eine Schaltfläche, die nichts tun kann, schlechter als
   keine. Der Erklärtext mit dem Link auf das ProvenExpert-Profil steht
   darüber und trägt den Abschnitt allein. Erst wenn das Skript den Container
   als bedienbar markiert (`is-bereit`), erscheint die Schaltfläche. */
.mpu-consent__aktion {
  display: none;
  margin: 0;
}

/* Der Hinweis, was beim Laden passiert, gehört zur Schaltfläche und
   verschwindet mit ihr — ohne Schaltfläche beschreibt er einen Vorgang, den
   niemand auslösen kann.
   muted-fg auf dark 5,34:1, auf dark-soft 4,50:1 — hält AA auf beiden
   Sektionsflächen, auf denen der Platzhalter vorkommen kann. */
.mpu-consent__recht {
  display: none;
  margin: 0;
  max-width: 44rem;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.5;
  color: var(--wp--preset--color--muted-fg);
  text-wrap: pretty;
}

.mpu-consent.is-bereit .mpu-consent__aktion,
.mpu-consent.is-bereit .mpu-consent__recht {
  display: block;
}

.mpu-consent__btn {
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

/* weiß auf primary 4,70:1 · weiß auf dark 13,05:1 — beide Zustände halten AA. */
.mpu-consent__btn:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark);
}

.mpu-consent__ziel {
  width: 100%;
}

.mpu-consent__ziel:empty {
  display: none;
}

/* Die Meldung ist nur für Screenreader gedacht (role="status"): Wer sieht,
   erkennt am erschienenen Siegel selbst, dass geladen wurde — eine zweite
   Zeile darunter wäre nur Rauschen. `display:none` scheidet aus, dann läse
   sie niemand vor; deshalb der Zuschnitt auf ein Pixel. */
.mpu-consent__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ist die Einbindung geladen, verschwindet der Platzhalter. `:has()` deckt
   zusätzlich den Weg ab, bei dem Complianz die Skript-Hülle selbst entsperrt
   und unser Skript gar nicht beteiligt ist. */
.mpu-consent.is-geladen .mpu-consent__platzhalter,
.mpu-consent:has(.mpu-consent__ziel > *) .mpu-consent__platzhalter {
  display: none;
}

/* Sobald das Widget steht, ist der gestrichelte Rahmen des Containers nur
   noch Rauschen um eine fremde, selbst gerahmte Fläche. Angesprochen über das
   data-Attribut statt über die Klasse mpu-testimonials__widget: Sie gehört
   40-social.css, und ein zweiter Fundort ließe build-css.sh zu Recht eine
   Überschneidung melden. */
[data-mpu-embed]:has(.mpu-consent.is-geladen) {
  border-color: transparent;
  padding: 0;
}

/* =========================================================================
   4 — Bewegungsarme Darstellung
   =========================================================================

   Die Grundregel steht in 00-base.css und wurde nachgemessen: bei
   `prefers-reduced-motion: reduce` sind alle 31 Reveal-Elemente der
   Startseite sofort sichtbar (opacity 1, transform none, Übergangsdauer 0 s).
   Hier nur die eigenen Übergänge dieser Datei nachziehen. */

@media (prefers-reduced-motion: reduce) {
  .mpu-consent,
  .mpu-consent * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}