/* ==========================================================================
   Komponenten – Ingenieurbüro Zeller
   Portiert aus dem React-Design-System auf statisches Markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zeilenlänge innerhalb von Komponenten
   Fließtext wird in base.css auf Lesebreite begrenzt. In Karten, Tabellen
   und Bändern bestimmt der Container die Breite – dort muss die Begrenzung
   wieder aufgehoben werden, sonst endet der Text mitten im Kasten.
   -------------------------------------------------------------------------- */

.card p, .stufe p, .reading p, .referenz p, .cta-band p,
.site-footer p, .kontaktbox p, .beitrag-liste p {
  max-width: none;
}

/* Dasselbe gilt für Listen. base.css begrenzt ul und ol auf Lesebreite –
   in einer waagerechten Komponente wie dem Stufendiagramm führt das dazu,
   dass nur die halbe Fläche genutzt wird und Wörter zerbrechen. */
.stufendiagramm__liste, .mega__spalte ul, .weiche__liste, .referenz ul,
.site-footer ul, .primary-nav ul, .card ul, .card ol, .vergleich ul {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Kopfbereich
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Sticky ist ein positioniertes Element – das Großmenü darunter kann sich
     deshalb absolut daran ausrichten und über die volle Breite laufen. */
  background: rgba(252, 252, 251, .92);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: 14px;
}

/* Wort-Bild-Marke. Die Bildmarke ist optional – solange keine gewählt ist,
   steht die Wortmarke allein, ohne dass eine Lücke entsteht. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.brand:hover { color: inherit; }

.brand__mark { flex: none; width: 44px; height: 44px; display: block; }
.brand__mark img, .brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__mark img, .brand__mark svg { width: 100%; height: 100%; }

.brand__text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }

/* Der Markenname ist zweiteilig: „Baubiologie" mager, „Zeller" fett –
   wie im Logoentwurf. Als Text und nicht als Bild, damit er markierbar,
   vorlesbar und durchsuchbar bleibt. */
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.brand__name strong { font-weight: var(--weight-bold); color: inherit; }

.brand__claim {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.brand--invert .brand__name { color: var(--sand-50); }
.brand--invert .brand__claim { color: var(--forest-300); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: var(--type-label);
  color: var(--text-strong);
  cursor: pointer;
}

.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.primary-nav { display: flex; align-items: center; gap: var(--space-5); }
.primary-nav ul { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.primary-nav li { margin: 0; }
.primary-nav__punkt--mega { position: static; }

/* :not(.btn) ist hier zwingend: Ohne die Einschränkung überschreibt diese
   Regel die Textfarbe der Schaltflächen in der Leiste (höhere Spezifität
   als .btn--accent) – das Ergebnis wäre grauer Text auf blauem Grund mit
   einem Kontrast von etwa 1,6:1. */
.primary-nav a:not(.btn) {
  font: var(--type-body-sm);
  text-decoration: none;
  color: var(--text-body);
  padding-bottom: 3px;
  border-bottom: var(--border-width-strong) solid transparent;
  transition: var(--transition-control);
}
.primary-nav a:not(.btn):hover { color: var(--forest-700); }

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
  font-weight: var(--weight-semibold);
  color: var(--forest-700);
  border-bottom-color: var(--forest-600);
}

/* --------------------------------------------------------------------------
   Großmenü mit Zielgruppentrennung
   -------------------------------------------------------------------------- */

.primary-nav__ausloeser {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0 0 3px;
  font: var(--type-body-sm);
  color: var(--text-body);
  cursor: pointer;
  border-bottom: var(--border-width-strong) solid transparent;
  transition: var(--transition-control);
}
.primary-nav__ausloeser:hover { color: var(--forest-700); }

.primary-nav__punkt--mega.current-menu-item > .primary-nav__ausloeser {
  font-weight: var(--weight-semibold);
  color: var(--forest-700);
  border-bottom-color: var(--forest-600);
}

.primary-nav__pfeil {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.primary-nav__ausloeser[aria-expanded="true"] .primary-nav__pfeil {
  transform: translateY(1px) rotate(-135deg);
}
.primary-nav__ausloeser[aria-expanded="true"] { color: var(--forest-700); }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--stone-0);
  border-bottom: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
.mega[hidden] { display: none; }

.mega__inner {
  padding-block: var(--space-6) var(--space-10);
}

/* Der Kopf läuft als schmale Zeile über die volle Breite. Als linke Spalte
   hätte er den drei Linkspalten rund 90 px je Spalte genommen – dort
   brechen dann Wörter wie „Elektrosmog-Risiko-Check" dreifach um. */
.mega__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.mega__kopf .eyebrow { margin: 0; flex: none; }
.mega__intro { font: var(--type-body-sm); color: var(--text-muted); margin: 0; max-width: 72ch; }

.mega__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 260px);
  gap: var(--space-8);
}

.mega__spaltentitel {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.mega__spalte ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega__spalte a {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-body);
  transition: var(--transition-control);
}
.mega__spalte a:hover { background: var(--surface-muted); color: var(--forest-800); }
.mega__spalte a[aria-current="page"] { background: var(--surface-muted); }

.mega__label {
  display: block;
  font: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.mega__text {
  display: block;
  font: var(--type-label);
  color: var(--text-muted);
  margin-top: 2px;
}

.mega__teaser {
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  align-self: start;
}
.mega__teaser .mega__spaltentitel { border-bottom: 0; padding-bottom: 0; color: var(--forest-700); }
.mega__teaser p { font: var(--type-label); color: var(--text-body); margin: 0 0 var(--space-4); max-width: none; }

@media (max-width: 1240px) {
  .mega__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__teaser { grid-column: span 2; }
}

/* Zielgruppen-Kennzeichnung im Seitenkopf */
.zielgruppe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.zielgruppe::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.zielgruppe--privat { background: var(--forest-100); color: var(--forest-800); }
.zielgruppe--unternehmen { background: var(--steel-50); color: var(--steel-700); }

/* Zwei-Wege-Weiche auf der Startseite */
.weiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.weiche__karte {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--rule-accent) solid var(--weiche-farbe, var(--forest-500));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.weiche__karte--privat { --weiche-farbe: var(--forest-500); }
.weiche__karte--unternehmen { --weiche-farbe: var(--steel-500); }
.weiche__karte h3 { font: var(--type-h2); margin-bottom: var(--space-3); }
.weiche__karte > p { font: var(--type-body); color: var(--text-body); }
.weiche__liste { list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.weiche__liste li { margin: 0; font: var(--type-body-sm); display: flex; gap: var(--space-2); }
.weiche__liste li::before { content: "·"; color: var(--weiche-farbe); font-weight: var(--weight-bold); }
.weiche__karte .btn-row { margin-top: auto; }

@media (max-width: 860px) {
  .weiche { grid-template-columns: minmax(0, 1fr); }
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--forest-100);
  color: var(--forest-800);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  margin-left: 6px;
}

/* Auf dem Telefon ist der Anruf die wichtigste Handlung. Der Knopf darf
   deshalb nicht im eingeklappten Menü verschwinden. Die Auswahl ist
   bewusst zweiteilig (.btn.header-call), weil die .btn-Regel weiter unten
   steht und bei gleicher Spezifität sonst gewinnt. */
.btn.header-call { display: none; }

/* Unter 560 px konkurrieren Wortmarke, Anruf und Menü um die Breite.
   Der Claim tritt zurück, die Wortmarke wird kleiner – beide sind auf dem
   Telefon weniger wert als zwei erreichbare Schaltflächen. */
@media (max-width: 560px) {
  .site-header__inner { gap: var(--space-3); }
  .brand__name { font-size: var(--text-md); }
  .brand__claim { display: none; }
  .btn.header-call { padding-inline: var(--space-3); }
  .nav-toggle span:not(.nav-toggle__bars) { display: none; }
}

@media (max-width: 1040px) {
  .btn.header-call { display: inline-flex; margin-left: auto; margin-right: var(--space-2); }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--stone-0);
    border-bottom: var(--border-width) solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--gutter-page) var(--space-6);
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: var(--border-width) solid var(--border-subtle); }
  .primary-nav a:not(.btn) { display: block; padding: var(--space-3) 0; border-bottom: 0; }
  .primary-nav .btn { margin-top: var(--space-4); justify-content: center; }

  /* Das Großmenü wird auf schmalen Viewports zur Ziehharmonika innerhalb
     des eingeklappten Menüs. Kein Überlagern, kein Hover. */
  .primary-nav__ausloeser {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
  }

  .mega {
    position: static;
    box-shadow: none;
    border-bottom: 0;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
  }
  .mega .wrap { padding-inline: var(--space-4); }
  .mega__inner { padding-block: var(--space-5); gap: var(--space-5); }
  .mega__kopf { display: none; }
  .mega__spalten { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* Ohne dieses Zurücksetzen gilt das span 2 aus der 1240er-Abfrage weiter
     und erzeugt eine zweite, implizite Spalte – die erste schrumpft dann
     auf Buchstabenbreite. */
  .mega__teaser { grid-column: auto; }
  .mega__spalte li { border-bottom: 0; }
  .mega__spalte a { padding: var(--space-2) 0; margin-inline: 0; }
  .mega__teaser { padding: var(--space-4); }
  .mega__teaser .btn { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
  min-height: 44px; /* Touch-Ziel */
}

.btn--primary { background: var(--action-primary); color: var(--sand-50); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--sand-50); }
.btn--primary:active { background: var(--action-primary-active); }

.btn--accent { background: var(--action-accent); color: var(--sand-50); }
.btn--accent:hover { background: var(--action-accent-hover); color: var(--sand-50); }

.btn--secondary {
  background: var(--stone-0);
  color: var(--forest-700);
  border-color: var(--border-default);
}
.btn--secondary:hover { border-color: var(--forest-500); color: var(--forest-800); }

.btn--ghost { background: transparent; color: var(--forest-700); padding-inline: var(--space-2); }
.btn--ghost:hover { color: var(--forest-900); }

.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-md); min-height: 52px; }
.btn--sm { padding: var(--space-2) var(--space-4); min-height: 38px; }

.btn[aria-disabled="true"], .btn:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.card--muted { background: var(--surface-muted); border-color: var(--forest-100); }
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-top: var(--rule-accent) solid var(--border-accent); }
.card > :last-child { margin-bottom: 0; }

.card__title { font: var(--type-h3); margin: 0 0 var(--space-2); }
.card__text { font: var(--type-body-sm); color: var(--text-body); margin: 0; }

/* --------------------------------------------------------------------------
   Abzeichen und Marken
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-label);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  background: var(--stone-100);
  color: var(--text-body);
}
.badge--forest { background: var(--forest-100); color: var(--forest-800); }
.badge--steel  { background: var(--steel-50); color: var(--steel-700); }

.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.badge--none    { background: var(--badge-none-bg);    color: var(--signal-none-text); }
.badge--weak    { background: var(--badge-weak-bg);    color: var(--signal-weak-text); }
.badge--strong  { background: var(--badge-strong-bg);  color: var(--signal-strong-text); }
.badge--extreme { background: var(--badge-extreme-bg); color: var(--signal-extreme-text); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   Messwert – die Kernkomponente der fachlichen Darstellung
   -------------------------------------------------------------------------- */

.reading {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-left: var(--rule-accent) solid var(--reading-color, var(--signal-none));
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
/* --reading-color faerbt die Linie, --reading-text den Text. Linien
   brauchen 3:1, Text 4,5:1 – deshalb zwei Werte statt einem. */
.reading--none    { --reading-color: var(--signal-none);    --reading-text: var(--signal-none-text); }
.reading--weak    { --reading-color: var(--signal-weak);    --reading-text: var(--signal-weak-text); }
.reading--strong  { --reading-color: var(--signal-strong);  --reading-text: var(--signal-strong-text); }
.reading--extreme { --reading-color: var(--signal-extreme); --reading-text: var(--signal-extreme-text); }

.reading__label {
  font: var(--type-label);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.reading__value {
  font: var(--type-data);
  color: var(--text-strong);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.reading__unit { font: var(--type-unit); color: var(--text-muted); }
.reading__note { font: var(--type-label); color: var(--reading-text, var(--reading-color)); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Angebotstreppe
   -------------------------------------------------------------------------- */

.treppe { display: grid; gap: var(--space-4); }

.stufe {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition-control);
}
.stufe:hover { border-color: var(--forest-300); box-shadow: var(--shadow-sm); }

.stufe--hervor {
  border-color: var(--forest-500);
  border-width: var(--border-width-strong);
  background: var(--surface-muted);
}

.stufe__nummer {
  font: var(--type-data);
  font-size: var(--text-2xl);
  color: var(--forest-300);
  text-align: center;
  line-height: 1;
}
.stufe__nummer span {
  display: block;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.stufe__titel { font: var(--type-h3); margin: 0 0 var(--space-2); }
.stufe__kurz { font: var(--type-body-sm); color: var(--text-body); margin: 0 0 var(--space-3); }

/* Die Leistungsgrenze steht bewusst gleichrangig neben dem Nutzen und wird
   nicht ausgeblendet – der Kurzcheck darf nie als „ausreichend" wirken. */
.stufe__grenze {
  display: flex;
  gap: var(--space-2);
  font: var(--type-label);
  color: var(--text-muted);
  border-left: var(--border-width-strong) solid var(--border-subtle);
  padding-left: var(--space-3);
  margin: 0;
}

.stufe__preis { text-align: right; min-width: 170px; }
.stufe__betrag {
  font: var(--type-data);
  font-size: var(--text-xl);
  color: var(--text-strong);
  display: block;
  margin-bottom: var(--space-3);
}
.stufe__betrag--frei { color: var(--forest-600); }
.stufe__hinweis { font: var(--type-label); color: var(--text-muted); display: block; margin-top: var(--space-2); }

@media (max-width: 860px) {
  .stufe { grid-template-columns: 56px minmax(0, 1fr); }
  .stufe__preis { grid-column: 2; text-align: left; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Stufendiagramm – die Treppe als aufsteigende Säulenfolge
   -------------------------------------------------------------------------- */

.stufendiagramm { margin-bottom: var(--space-10); }

.stufendiagramm__achse {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.stufendiagramm__liste {
  display: flex;
  align-items: flex-end;   /* gemeinsame Standlinie unten */
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Alle Säulen stehen auf einer Linie, ihre Höhe wächst mit der Stufe.
   So entsteht die Treppe von links unten nach rechts oben, ohne dass die
   Quelltextreihenfolge von der Sehreihenfolge abweicht. Die Grundhöhe
   stellt sicher, dass auch die unterste Säule ihren Inhalt trägt. */
.stufendiagramm__saeule {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.stufendiagramm__saeule > a {
  min-height: calc(132px + var(--i) * 34px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-sunken);
  text-decoration: none;
  color: var(--text-body);
  transition: var(--transition-control);
}
.stufendiagramm__saeule > a:hover {
  background: var(--surface-muted);
  border-color: var(--forest-300);
}

.stufendiagramm__nr {
  font: var(--type-data);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--forest-400);
}
.stufendiagramm__saeule .icon { color: var(--forest-600); }

.stufendiagramm__titel {
  font: var(--type-label);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  hyphens: auto;
}
.stufendiagramm__preis {
  margin-top: auto;
  font: var(--type-unit);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Die Zielstufe trägt Farbe und Text – nicht nur Farbe. */
.stufendiagramm__saeule--ziel > a {
  background: var(--surface-muted);
  border-color: var(--forest-500);
  border-width: var(--border-width-strong);
  border-bottom: 0;
}
.stufendiagramm__saeule--ziel .stufendiagramm__nr { color: var(--forest-600); }
.stufendiagramm__ziel {
  font: var(--type-eyebrow);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone-0);
  background: var(--forest-600);
  border-radius: var(--radius-xs);
  padding: 2px 5px;
  align-self: flex-start;
}

/* Unterhalb von 860 px trägt die ausführliche Liste allein – eine Treppe
   mit sieben Säulen ist auf dem Telefon nicht lesbar. */
@media (max-width: 860px) {
  .stufendiagramm { display: none; }
}

.stufe__icon { color: var(--forest-500); margin-top: var(--space-2); }
.stufe__titel .badge { vertical-align: middle; margin-left: var(--space-2); }

/* Die aktuell betrachtete Stufe wird markiert, damit Besucher sehen, wo sie
   stehen – und was darüber noch kommt. */
.stufe--hier { border-color: var(--forest-400); background: var(--surface-sunken); }
.stufe__hier {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-600);
  margin: 0 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   Vergleich Stufe 3 / Stufe 4
   -------------------------------------------------------------------------- */

.vergleich table { margin-bottom: 0; }
.vergleich th[scope="col"] { vertical-align: bottom; }
.vergleich__stufe {
  display: block;
  font: var(--type-label);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 2px;
}
.vergleich__merkmal {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
/* Die empfohlene Spalte wird hervorgehoben – zusätzlich zur Farbe trägt die
   Kopfzeile den Text „Vollanalyse", damit die Aussage nicht allein an der
   Einfärbung hängt. */
.vergleich__empfohlen { background: var(--surface-muted); }
thead .vergleich__empfohlen { color: var(--forest-800); }
.vergleich__hinweis { display: block; font: var(--type-label); color: var(--text-muted); margin-top: 2px; }

.vergleich__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Preistabelle und Preishinweis
   -------------------------------------------------------------------------- */

/* Tabellen werden auf schmalen Viewports waagerecht scrollbar statt die
   Spalten zu zerquetschen – „Zone 1 – bis 25 km" über vier Zeilen ist
   unlesbar. */
@media (max-width: 680px) {
  .card--flush { overflow-x: auto; }
  .card--flush table { min-width: 34rem; }
}

.preistabelle td:last-child,
.preistabelle th:last-child { text-align: right; white-space: nowrap; }
.preistabelle .betrag { font: var(--type-unit); font-size: var(--text-sm); color: var(--text-strong); }

/* Der Steuer- und Fahrtkostenhinweis. Er wird von den Preis-Shortcodes
   automatisch gesetzt, damit er nirgends vergessen werden kann. */
.preis-hinweis {
  font: var(--type-label);
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: var(--container-prose);
}

/* --------------------------------------------------------------------------
   Hinweisbox – fachliche und rechtliche Einordnungen
   -------------------------------------------------------------------------- */

.hinweis {
  border-left: var(--rule-accent) solid var(--forest-600);
  background: var(--surface-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-6);
  max-width: var(--container-prose);
}
.hinweis__titel {
  font: var(--type-label);
  font-weight: var(--weight-semibold);
  color: var(--forest-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: 0 0 var(--space-2);
}
.hinweis p { font: var(--type-body-sm); margin-bottom: var(--space-2); }
.hinweis > :last-child { margin-bottom: 0; }

.hinweis--warnung { border-left-color: var(--signal-strong); background: rgba(168,92,46,.07); }
.hinweis--warnung .hinweis__titel { color: var(--signal-strong); }

.hinweis--offen { border-left-color: var(--signal-weak); background: rgba(176,138,46,.09); }
.hinweis--offen .hinweis__titel { color: var(--signal-weak); }

/* --------------------------------------------------------------------------
   Referenzfall
   -------------------------------------------------------------------------- */

.referenz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.referenz__spalte { padding: var(--space-6); border-right: var(--border-width) solid var(--border-subtle); }
.referenz__spalte:last-child { border-right: 0; }
.referenz__spalte--loesung { background: var(--surface-muted); }

.referenz__rolle {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--space-3);
}
.referenz__text { font: var(--type-body-sm); color: var(--text-body); margin: 0; }
.referenz__text + .referenz__text { margin-top: var(--space-3); }
.referenz ul { margin: 0; padding-left: 1.2em; font: var(--type-body-sm); }

.referenz__fuss {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  padding: var(--space-4) var(--space-6);
  font: var(--type-label);
  color: var(--text-muted);
  background: var(--surface-sunken);
}

@media (max-width: 860px) {
  .referenz { grid-template-columns: minmax(0, 1fr); }
  .referenz__spalte { border-right: 0; border-bottom: var(--border-width) solid var(--border-subtle); }
}

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

.faq { max-width: var(--container-prose); }

.faq__item {
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.faq__item:first-child { border-top: var(--border-width) solid var(--border-subtle); }

.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: 0;
  padding: var(--space-5) 0;
  text-align: left;
  font: var(--type-h3);
  color: var(--text-strong);
  cursor: pointer;
}
.faq__frage:hover { color: var(--forest-700); }

.faq__icon {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--forest-600);
  top: 9px; left: 0; width: 20px; height: 2px;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__frage[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

.faq__antwort { padding: 0 0 var(--space-5); }
.faq__antwort p { font: var(--type-body-sm); }
.faq__antwort[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--stone-0);
  border-bottom: var(--border-width) solid var(--border-subtle);
  padding-block: var(--section-y);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.hero__title { font: var(--type-display); font-size: var(--text-5xl); margin: 0 0 var(--space-5); }
.hero__text { font-size: var(--text-lg); max-width: 46ch; margin-bottom: var(--space-8); }

.hero--schmal .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--schmal .hero__text { max-width: var(--container-prose); }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* Bildplatzhalter, solange kein freigegebenes Bildmaterial vorliegt. */
.bildplatz {
  display: grid;
  place-items: center;
  background: var(--sand-100);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-lg);
  aspect-ratio: var(--ratio, 4 / 3);
  font: var(--type-label);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-5);
}

/* --------------------------------------------------------------------------
   Handlungsaufforderung
   -------------------------------------------------------------------------- */

.cta-band { background: var(--surface-inverse); color: var(--forest-200); padding-block: var(--space-16); }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--sand-50); margin-bottom: var(--space-2); }
.cta-band p { color: var(--forest-200); margin: 0; }

/* --------------------------------------------------------------------------
   Kontaktbox
   -------------------------------------------------------------------------- */

.kontaktbox { display: flex; flex-direction: column; gap: var(--space-3); }
.kontaktbox__zeile {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font: var(--type-body-sm);
  color: var(--text-body);
}
.kontaktbox__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 68px;
  flex: none;
}
.kontaktbox__fuss {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--forest-200);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Schrittfolge
   -------------------------------------------------------------------------- */

.schritt__nummer {
  font: var(--type-data);
  font-size: var(--text-lg);
  color: var(--forest-300);
  display: block;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Fußbereich
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-inverse);
  border-top: var(--border-width) solid var(--forest-800);
  color: var(--forest-200);
  padding-block: var(--space-12);
}
.site-footer a { color: var(--forest-200); text-decoration: none; }
.site-footer a:hover { color: var(--sand-50); text-decoration: underline; text-underline-offset: 3px; }

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.site-footer__marke { flex: 0 0 30%; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__marke p { font: var(--type-body-sm); color: var(--forest-200); margin: 0; max-width: 42ch; }

.site-footer__spalten { flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-10); justify-content: flex-end; }
.site-footer__spalte { display: flex; flex-direction: column; gap: var(--space-2); min-width: 170px; }
.site-footer__spalte h2 {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-300);
  margin: 0 0 var(--space-2);
}
.site-footer__spalte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__spalte li { margin: 0; font: var(--type-body-sm); }

.site-footer__legal {
  margin-top: var(--space-12);
  border-top: var(--border-width) solid var(--forest-800);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  font: var(--type-label);
  color: var(--forest-300);
}
.site-footer__legal ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.site-footer__legal li { margin: 0; }

@media (max-width: 860px) {
  .site-footer__spalten { justify-content: flex-start; gap: var(--space-8); }
}

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

.breadcrumb { font: var(--type-label); color: var(--text-muted); padding-block: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.breadcrumb li + li::before { content: "›"; color: var(--stone-400); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest-700); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Beitragslisten
   -------------------------------------------------------------------------- */

.beitrag-liste { display: grid; gap: var(--space-6); }
.beitrag__meta { font: var(--type-label); color: var(--text-muted); margin-bottom: var(--space-2); }
.beitrag__titel { font: var(--type-h3); margin: 0 0 var(--space-2); }
.beitrag__titel a { text-decoration: none; color: var(--text-strong); }
.beitrag__titel a:hover { color: var(--forest-700); }

.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-10); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none; font: var(--type-body-sm);
}
.pagination .current { background: var(--forest-600); color: var(--sand-50); border-color: var(--forest-600); }


/* --------------------------------------------------------------------------
   Bildplatz mit Motivbeschreibung (Shotlist) und Selbst-Check
   -------------------------------------------------------------------------- */

.bildplatz {
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.bildplatz__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-600);
}
.bildplatz__motiv {
  font: var(--type-body-sm);
  color: var(--text-body);
  max-width: 46ch;
}
.bildplatz__format { font: var(--type-unit); color: var(--text-muted); }

.bildplatz-fertig { margin: 0 0 var(--space-6); }

.selbstcheck { margin-bottom: var(--space-6); }
.selbstcheck__rahmen {
  width: 100%;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--stone-0);
}
.selbstcheck__fallback {
  font: var(--type-label);
  color: var(--text-muted);
  margin-top: var(--space-3);
}


/* --------------------------------------------------------------------------
   Person – wer bei Ihnen misst
   Die Seite soll fachlich wirken, aber nicht unterkühlt. Ein Gesicht, ein
   Satz in der Ich-Form und nachpruefbare Qualifikationen tragen mehr
   Vertrauen als jede Formulierung im Fliesstext.
   -------------------------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.person__bild figure, .person__bild .bildplatz { margin: 0; }
.person__text > p { max-width: 62ch; }

.person__zitat {
  font: var(--type-h3);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--text-strong);
  border-left: var(--rule-accent) solid var(--border-accent);
  padding-left: var(--space-5);
  margin: 0 0 var(--space-6);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .person { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .person__bild { max-width: 300px; }
}

/* Echter Messbefund neben den Beispielwerten */
.befund-echt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: var(--border-width) solid var(--forest-100);
}
.befund-echt h3 { margin-bottom: var(--space-3); }
.befund-echt figure { margin: 0; }

@media (max-width: 860px) {
  .befund-echt { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Termine: Vorträge und Messtage
   -------------------------------------------------------------------------- */

.termine { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); max-width: none; }

.termin {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: var(--transition-control);
}
.termin:hover { border-color: var(--forest-300); box-shadow: var(--shadow-sm); }

/* Das Datum als Kalenderblatt – schneller erfassbar als eine Textzeile. */
.termin__datum {
  text-align: center;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  line-height: 1.1;
}
.termin__tag { display: block; font: var(--type-data); font-size: var(--text-2xl); color: var(--forest-700); }
.termin__monat {
  display: block;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-600);
  margin-top: 2px;
}
.termin__jahr { display: block; font: var(--type-unit); color: var(--text-muted); margin-top: 2px; }

.termin__titel { font: var(--type-h3); margin: 0 0 var(--space-2); }
.termin__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font: var(--type-body-sm);
  color: var(--text-body);
  margin: 0 0 var(--space-2);
}
.termin__fakten span { display: inline-flex; align-items: center; gap: var(--space-2); }
.termin__fakten span + span::before { content: "·"; color: var(--stone-400); margin-right: var(--space-2); }
.termin__ort { font: var(--type-label); color: var(--text-muted); margin: 0 0 var(--space-2); }
.termin__text p { font: var(--type-body-sm); margin: 0; }

.termin__aktion { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.termin__plaetze { font: var(--type-label); color: var(--forest-600); margin: 0; white-space: nowrap; }
.termin__plaetze--leer { color: var(--signal-strong-text); }

@media (max-width: 760px) {
  .termin { grid-template-columns: 64px minmax(0, 1fr); }
  .termin__aktion { grid-column: 2; align-items: flex-start; text-align: left; }
}


/* --------------------------------------------------------------------------
   Plugin „Zeller Lead-Magnet"
   Das Plugin bezieht seine Farben aus den Theme-Tokens und kapselt alles
   unter .zlm – es gibt also keine Kollisionen. Eine Stelle muss das Theme
   dennoch nachbessern: Das Plugin färbt den Text der mittleren
   Bewertungsstufe mit --signal-weak. Als Flächenfarbe ist das richtig,
   als Textfarbe erreicht der Wert nur 2,87:1 und fällt damit unter die
   4,5:1 der WCAG-Stufe AA.

   Die doppelte Klasse erhöht die Spezifität, damit die Korrektur unabhängig
   von der Ladereihenfolge der Stylesheets greift und ein Plugin-Update sie
   nicht aushebelt. Punkte und Flächen behalten die kräftige Signalfarbe.
   -------------------------------------------------------------------------- */

.zlm.zlm { --zlm-warn: var(--signal-weak-text, #856822); }
.zlm.zlm .zlm-b-warn .zlm-icon { background: var(--signal-weak); }

/* --------------------------------------------------------------------------
   Pakete der Stufe 4 als Karten
   Die Angebotstreppe fordert „Festpreis plus drei Häkchen-Nutzen statt
   Preise individuell". Karten tragen das besser als eine Tabellenzeile –
   und sie funktionieren auf dem Telefon ohne Querscrollen.
   -------------------------------------------------------------------------- */

.pakete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

.paket {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--rule-accent) solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.paket__titel { font: var(--type-h3); margin: 0 0 var(--space-3); hyphens: auto; }
.paket__preis { margin: 0 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.paket__preis .betrag { font: var(--type-data); font-size: var(--text-xl); color: var(--text-strong); }
.paket__festpreis {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.paket__umfang { font: var(--type-body-sm); color: var(--text-body); margin: 0 0 var(--space-1); }
.paket__dauer { font: var(--type-label); color: var(--text-muted); margin: 0 0 var(--space-4); }

.paket__nutzen {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle);
  padding-top: var(--space-4);
}
.paket__nutzen li {
  position: relative;
  padding-left: 22px;
  margin: 0;
  font: var(--type-label);
  color: var(--text-body);
}
/* Das Häkchen ist gezeichnet, nicht getippt – so bleibt es in jeder
   Schriftgröße gleich und wird vom Screenreader nicht vorgelesen. */
.paket__nutzen li::before {
  content: "";
  position: absolute;
  left: 2px; top: 4px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--forest-600);
  border-bottom: 2px solid var(--forest-600);
  transform: rotate(-45deg);
}
.paket .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1100px) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pakete { grid-template-columns: minmax(0, 1fr); } }

.zone__gesamt { display: block; font: var(--type-label); color: var(--text-muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Gegenüberstellung Breitband / Spektralanalyse
   -------------------------------------------------------------------------- */

.gegenueber {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.gegenueber__spalte {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.gegenueber__spalte--plus { background: var(--surface-muted); border-color: var(--forest-200); }
.gegenueber__kopf {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.gegenueber__spalte--plus .gegenueber__kopf { color: var(--forest-700); border-bottom-color: var(--forest-200); }

.gegenueber__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: none; }
.gegenueber__liste li { position: relative; padding-left: 24px; margin: 0; font: var(--type-body-sm); }
/* Links ein neutraler Punkt, rechts ein Pluszeichen – die Bedeutung hängt
   nicht an der Farbe, sondern an der Form und an den Überschriften. */
.gegenueber__liste--basis li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--stone-400);
}
.gegenueber__liste--plus li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--forest-600), var(--forest-600)) center/11px 2px no-repeat,
    linear-gradient(var(--forest-600), var(--forest-600)) center/2px 11px no-repeat;
}

@media (max-width: 760px) { .gegenueber { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Ablauf als Schrittfolge
   Vier Schritte mit Nummer, Zeichen und Verbindungslinie. Die Linie läuft
   hinter den Marken durch und macht die Abfolge auf einen Blick sichtbar –
   als Überschriftenliste war nicht erkennbar, dass es eine Reihenfolge ist.
   -------------------------------------------------------------------------- */

.ablauf {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(var(--schritte, 4), minmax(0, 1fr));
  gap: var(--space-6);
  position: relative;
}

/* Die Verbindungslinie sitzt auf Höhe der Marken. */
.ablauf::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--forest-100);
  z-index: 0;
}

.ablauf__schritt { margin: 0; position: relative; z-index: 1; }

.ablauf__marke {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-page);
  padding-right: var(--space-3);
  margin-bottom: var(--space-4);
}
.ablauf__nr {
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  border: var(--border-width-strong) solid var(--forest-200);
  font: var(--type-data);
  font-size: var(--text-lg);
  color: var(--forest-700);
}
.ablauf__icon { color: var(--forest-500); flex: none; }

.ablauf__titel { font: var(--type-h3); margin: 0 0 var(--space-1); }
.ablauf__dauer {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.ablauf__text { font: var(--type-body-sm); color: var(--text-body); margin: 0; max-width: none; }

@media (max-width: 1040px) {
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .ablauf::before { display: none; }
}
@media (max-width: 620px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .ablauf__marke { margin-bottom: var(--space-3); }
  .ablauf__nr { width: 44px; height: 44px; font-size: var(--text-md); }
}

/* Auf getönten Flächen muss die Marke den Hintergrund der Sektion tragen,
   sonst entsteht ein weißer Kasten auf farbigem Grund. */
.section--sunken .ablauf__marke { background: var(--surface-sunken); }
.section--muted .ablauf__marke { background: var(--surface-muted); }

/* Tabellen aus dem Blockeditor (figure.wp-block-table) waren von der
   Scroll-Regel für .card--flush nicht erfasst und haben auf schmalen
   Viewports die ganze Seite waagerecht verschoben. */
@media (max-width: 680px) {
  .entry-content .wp-block-table { overflow-x: auto; }
  .entry-content .wp-block-table table { min-width: 34rem; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Messverfahren als Karten
   Statt eines Icons trägt jede Karte ihre Messgröße in Monospace. Das ist
   fachlich die beste Kennzeichnung und vermeidet Blitz- und Wellensymbole.
   -------------------------------------------------------------------------- */

.verfahren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.verfahren__karte {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.verfahren__karte--hervor { background: var(--surface-muted); border-color: var(--forest-200); }

.verfahren__einheit {
  display: inline-block;
  font: var(--type-data);
  font-size: var(--text-md);
  color: var(--forest-700);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  margin: 0 0 var(--space-3);
}
.verfahren__karte--hervor .verfahren__einheit { background: var(--stone-0); }
.verfahren__titel { font: var(--type-h3); margin: 0 0 var(--space-2); hyphens: auto; }
.verfahren__text { font: var(--type-body-sm); color: var(--text-body); margin: 0; max-width: none; }

@media (max-width: 1040px) { .verfahren { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .verfahren { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Leistungsgruppen
   -------------------------------------------------------------------------- */

.gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.gruppe {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--rule-accent) solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.gruppe__icon { color: var(--forest-600); margin-bottom: var(--space-3); }
.gruppe__titel { font: var(--type-h3); margin: 0 0 var(--space-2); }
.gruppe__text { font: var(--type-body-sm); color: var(--text-muted); margin: 0 0 var(--space-4); max-width: none; }

.liste-haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: none; }
.liste-haken li { position: relative; padding-left: 22px; margin: 0; font: var(--type-body-sm); color: var(--text-body); }
.liste-haken li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--forest-600);
  border-bottom: 2px solid var(--forest-600);
  transform: rotate(-45deg);
}

@media (max-width: 960px) { .gruppen { grid-template-columns: minmax(0, 1fr); } }

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

.stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

.stimme {
  margin: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.stimme__zitat { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.stimme__zitat p { font: var(--type-body); color: var(--text-strong); max-width: none; }
.stimme__zitat p::before { content: "\201E"; }
.stimme__zitat p::after { content: "\201C"; }

.stimme__quelle {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.stimme__person { color: var(--forest-700); }
.stimme__quelle span + span::before { content: "·"; margin-right: var(--space-2); color: var(--stone-400); }

@media (max-width: 860px) { .stimmen { grid-template-columns: minmax(0, 1fr); } }

/* Ohne Porträt nimmt der Personenblock die volle Breite. */
.person--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.person--ohne-bild .person__text > p { max-width: var(--container-prose); }

/* --------------------------------------------------------------------------
   Ampel-Legende und Preisanker im Hero
   -------------------------------------------------------------------------- */

/* Die Stufe darf nie allein an der Farbe hängen (WCAG 1.4.1). Deshalb steht
   unter jedem Befundraster die Legende als Text. */
.ampel-legende {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.ampel-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font: var(--type-label);
  color: var(--text-body);
}
.ampel-legende__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--stufe-farbe); flex: none; }
.ampel-legende__eintrag--none    { --stufe-farbe: var(--signal-none); }
.ampel-legende__eintrag--weak    { --stufe-farbe: var(--signal-weak); }
.ampel-legende__eintrag--strong  { --stufe-farbe: var(--signal-strong); }
.ampel-legende__eintrag--extreme { --stufe-farbe: var(--signal-extreme); }

.hero__preis {
  font: var(--type-label);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  max-width: 46ch;
}