/* Autonomy Systems - Seitenklassen.
   Ersetzt die Inline-Styles des Design-Tool-Exports 1:1; alle Werte unveraendert uebernommen. */

/* Muss vor allen display-Regeln stehen: Klassen wie .row oder .form-erfolg setzen
   display:flex und wuerden das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }

/* ===== Allgemeine Utilities (Werte aus dem Export) ===== */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.g4 { gap: var(--space-4); }
.g5 { gap: var(--space-5); }
.g6 { gap: var(--space-6); }
.maxw-320 { max-width: 320px; }
.maxw-460 { max-width: 460px; }
.maxw-480 { max-width: 480px; }
.maxw-520 { max-width: 520px; }
.maxw-540 { max-width: 540px; }
.maxw-560 { max-width: 560px; }
.maxw-600 { max-width: 600px; }
.maxw-620 { max-width: 620px; }
.maxw-700 { max-width: 700px; }
.maxw-820 { max-width: 820px; }
.maxw-900 { max-width: 900px; }
.m0 { margin: 0; }
.mt-auto { margin-top: auto; }
.row-verteilt { justify-content: space-between; }
html { scroll-behavior: smooth; }
/* Sprungmarken und Pos1 bewegen die ganze Seitenflaeche — genau die grossflaechige
   Bewegung, wegen der jemand reduced motion einstellt. Die Seite schaltet an allen
   anderen Stellen zurueck, hier fehlte es (ergaenzt in Etappe 6). Firefox macht das
   von sich aus, Chrome nicht. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.clip { position: relative; overflow: hidden; }
.pos-rel { position: relative; }
.align-start { align-items: start; }
/* Visuell verborgen, fuer Screenreader vorhanden — gleiche Technik wie beim
   Marken-Schriftzug unter 420px (.nav-brand-text), hier als wiederverwendbare Klasse. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
/* Sprungziel-Abstand: sticky Nav plus die mitlaufende CTA-Leiste, die beim Scrollen
   nach unten erscheint. Beide Hoehen misst cta-leiste.js zur Laufzeit; die Fallbacks
   entsprechen dem gemessenen Stand (Nav 68 px, Leiste 54 px). */
#rechner { scroll-margin-top: calc(var(--nav-h, 68px) + var(--leiste-h, 54px) + var(--space-3)); }

/* Logo-Punkteraster (Inline-SVG, Groessen wie im Export verwendet) */
.mark-14 { width: 14px; height: 14px; flex: none; }
.mark-18 { width: 18px; height: 18px; flex: none; }
.mark-24 { width: 24px; height: 24px; flex: none; }
.mark-26 { width: 26px; height: 26px; flex: none; }
.mark-120 { width: 120px; height: 120px; }
.mark-140 { width: 140px; height: 140px; }
.mark-220 { width: 220px; height: 220px; }

/* Kicker-Zeile: Logo-Punkt + Kicker */
.kicker-row { display: flex; gap: 10px; align-items: center; }

/* Deko-Wasserzeichen (Logo gross, hinter Inhalt) */
.deko { position: absolute; pointer-events: none; }
.deko-band { right: -20px; top: 50%; transform: translateY(-50%); opacity: .12; }
.deko-eck { right: -10px; top: -10px; opacity: .09; }
.deko-rechner { right: -14px; bottom: -14px; opacity: .1; }

/* ===== Navigation ===== */
.nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-brand-text { white-space: nowrap; }
/* Der Nav-CTA war im Export ein <button> (SPA ohne href) und damit von
   .nav-links a nicht betroffen. Als echter Link braucht er die Akzentfarbe zurueck. */
.nav-links a.btn-primary { color: var(--color-accent); }
.nav-links a.btn-primary:hover { color: var(--color-accent-300); }
/* Antippbare Telefonnummer im Kopf: nur mobil, an der Stelle, an der die
   Erstgespraech-Leiste (.nav-links .btn) sonst weicht — der Platz ist dort frei. */
.nav-tel { display: none; }
@media (max-width: 840px) {
  .nav { padding-inline: var(--space-5); }
  .nav-links { gap: var(--space-4); }
  .nav-links .btn { display: none; }
  .nav-links .btn.nav-tel { display: inline-flex; }
}
/* Unter 420px reicht die Breite nicht fuer Wortmarke plus drei Links:
   Schriftzug weicht optisch, bleibt aber im Accessibility-Baum — sonst haette
   der Marken-Link dort keinen Namen (das Punkteraster ist aria-hidden). */
@media (max-width: 420px) {
  .nav-brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }
}

/* ===== Hero ===== */
.cover { width: 100%; height: 100%; object-fit: cover; }
.section-hero { padding-bottom: var(--space-8); }
.pb-7 { padding-bottom: var(--space-7); }

/* Kennzahlenzeile: ersetzt Zahlenband und die drei alten Tags. Ruhig gesetzt,
   keine Flaeche, keine Karte — der Trenner sitzt als Pseudo-Element im Abstand. */
.kennzahlen { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin-bottom: 0; padding: 0; list-style: none; font-size: 14px; color: var(--color-text-muted); }
/* Der Trenner haengt am Vorgaenger, nicht am Nachfolger — sonst stuende er beim
   Umbruch verwaist vor der neuen Zeile. */
.kennzahlen li:not(:last-child)::after { content: "·"; margin-inline: calc(var(--space-6) / 2); color: var(--color-text-faint); }
.kennzahl-wert { font-family: var(--font-display); font-weight: 500; color: var(--color-text); }
/* Die Zeile braucht 534 px am Stueck. Sobald die linke Hero-Spalte darunter faellt
   (Fenster unter rund 1155 px), stapelt sie statt zu brechen: zwei saubere Zustaende
   statt eines Umbruchs mit haengendem Trenner. */
@media (max-width: 1160px) {
  .kennzahlen { flex-direction: column; gap: var(--space-2); }
  .kennzahlen li:not(:last-child)::after { content: none; }
}

/* Lebendes Punkteraster (Signature-Element). Proportionen wie im Logo:
   Punktabstand rund 46 % des Punktdurchmessers. Steuerung in assets/js/hero.js. */
.hero-raster-feld { display: flex; justify-content: center; }
.hero-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12%; width: min(100%, 340px); aspect-ratio: 1; }
.raster-punkt { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--color-neutral-700); }
.raster-punkt::before { content: ""; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle, rgba(182, 242, 75, .30), transparent 65%); opacity: 0; transition: opacity 900ms ease; }
.raster-punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-accent); opacity: 0; transition: opacity 900ms ease; }
.raster-punkt.an::before, .raster-punkt.an::after { opacity: 1; }
@media (max-width: 900px) {
  .hero-raster { width: min(62%, 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .raster-punkt::before, .raster-punkt::after { transition: none; }
}

/* ===== Stoerer (das eine gesaettigte Feld der Seite) ===== */
.stoerer-inner { position: relative; padding-block: var(--space-10); }
.stoerer .kicker { color: var(--color-band-text); }
.stoerer .lead { color: var(--color-band-text); }
.stoerer-geltung { font-size: var(--text-sm); color: var(--color-band-label); }
.stoerer-eckdaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-7); margin-bottom: 0; padding: 0; list-style: none; }
.stoerer-eckdaten li { padding-top: var(--space-3); border-top: 1px solid var(--color-band-edge); font-family: var(--font-display); font-size: var(--text-h4); font-weight: 500; letter-spacing: var(--tracking-heading); color: var(--color-band-text); }
@media (max-width: 700px) {
  .stoerer-inner { padding-block: var(--space-9); }
  .stoerer-eckdaten { grid-template-columns: 1fr; }
}

/* ===== Mitlaufende CTA-Leiste ===== */
/* Deckkraft und Blur gleich der Nav (design-system.css), damit auf Desktop keine
   Stufe zwischen den beiden uebereinanderliegenden Balken entsteht. */
.cta-leiste { position: fixed; left: 0; right: 0; top: var(--nav-h, 68px); z-index: 45; background: rgba(11, 12, 16, .86); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--color-divider); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }
.cta-leiste-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: 9px; }
/* Enge Zeile, damit der Text auf schmalen Geraeten zweizeilig umbrechen darf,
   ohne die Leiste aufzublasen. */
.cta-leiste-text { font-size: var(--text-sm); line-height: 1.3; color: var(--color-text-muted); }
.cta-leiste .btn { flex: none; }
.cta-leiste-anruf { display: none; }
.cta-leiste[data-sichtbar="false"] { opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
/* Gleiche Grenze wie im Design-System (.split/.grid-* klappen bei 900 px um). Bis
   Etappe 7 war das zusaetzlich die Grenze, an der die Referenz-Badge verschwand, damit
   beide nicht unten rechts uebereinanderlagen; die Badge gibt es nicht mehr, die
   Grenze bleibt aus dem urspruenglichen Grund. */
@media (max-width: 900px) {
  .cta-leiste { top: auto; bottom: 0; box-shadow: 0 -1px 0 var(--color-divider); }
  .cta-leiste[data-sichtbar="false"] { transform: translateY(8px); }
  /* Zweigleisig statt Text + ein Knopf: unten fixiert ist kein Platz fuer die
     Ankuendigung, und wer abends liest, soll Anrufen genauso griffbereit haben wie
     Termin vereinbaren (Roadmap 7.6.9). Ersetzt auch die alte 520-px-Regel fuer
     .cta-leiste-lang — der ganze Text faellt hier weg, nicht nur der lange Teil. */
  .cta-leiste-text { display: none; }
  .cta-leiste-inner { padding-block: var(--space-3); }
  /* Anrufen bleibt bei seiner Wortbreite, Termin vereinbaren nimmt den Rest — beide
     gleich breit ("Termin vereinbaren →" ist deutlich laenger als "Anrufen") liesse
     den langen Knopf zweizeilig umbrechen. */
  .cta-leiste-aktionen { display: flex; width: 100%; gap: var(--space-3); }
  .cta-leiste-aktionen .btn { flex: none; }
  .cta-leiste-aktionen .btn:last-child { flex: 1; }
  .cta-leiste-anruf { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-leiste, .cta-leiste[data-sichtbar="false"] { transform: none; transition: opacity 180ms ease, visibility 180ms; }
}

/* ===== Leistungs-Kacheln ===== */
.kopf-verteilt { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: end; justify-content: space-between; margin-top: var(--space-4); }
.preis-schalter { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--color-divider); border-radius: 8px; }
.schalter-tab { cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); }
.schalter-tab[aria-pressed="true"] { border-color: var(--color-accent); background: rgba(182, 242, 75, .10); color: var(--color-accent); }

.kachel { display: grid; grid-template-columns: 1fr; min-height: 300px; cursor: pointer; }
.kachel-seite { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-2); transition: opacity 140ms ease; }
.kachel-vorn { opacity: 1; pointer-events: auto; }
.kachel-hinten { opacity: 0; pointer-events: none; }
.kachel.offen .kachel-vorn { opacity: 0; pointer-events: none; }
.kachel.offen .kachel-hinten { opacity: 1; pointer-events: auto; }
.kachel-fuss { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.kachel-preis { font-family: var(--font-display); font-size: 26px; color: var(--color-accent); margin-top: 2px; }
.kachel-laufend { margin-top: 2px; }
.kachel-mehr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--color-accent); white-space: nowrap; flex: none; }
.kachel-zurueck { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; }
.kachel-hinten-fuss { margin-top: auto; padding-top: var(--space-4); }
.rule-s4 { margin: var(--space-4) 0; }
.rule-s5 { margin: var(--space-5) 0; }

.paket-karte { min-height: 300px; display: flex; flex-direction: column; }
.paket-preis { font-family: var(--font-display); font-size: 34px; color: var(--color-accent); margin-top: 2px; }

.karte-verteilt { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-7); justify-content: space-between; align-items: start; }
.karte-verteilt-mitte { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; justify-content: space-between; }
.minw-280 { min-width: 280px; }

/* ===== Bausteine-Reiterleiste (Startseite, WAI-ARIA-Tabs-Muster) =====
   Ersetzt den 6er-Kachelblock. Panels liegen wie bei .kachel-seite uebereinander
   (grid-area 1/1) und blenden per Opazitaet — derselbe 140-ms-Crossfade wie beim
   Kachel-Flip, damit der Reiterwechsel visuell dazu passt. Steuerung in
   assets/js/bausteine-tabs.js. */
.bausteine { display: flex; flex-direction: column; gap: var(--space-5); }
.bausteine-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-divider); }
.bausteine-tab { display: flex; align-items: baseline; gap: 8px; padding: var(--space-3) var(--space-4); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; text-align: left; transition: color 120ms ease, border-color 120ms ease; }
.bausteine-tab-index { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .1em; color: var(--color-text-faint); transition: color 120ms ease; }
.bausteine-tab:hover { color: var(--color-text); }
.bausteine-tab[aria-selected="true"] { color: var(--color-text); border-color: var(--color-accent); }
.bausteine-tab[aria-selected="true"] .bausteine-tab-index { color: var(--color-accent); }

.bausteine-panels { position: relative; display: grid; grid-template-columns: 1fr; min-height: 220px; padding: var(--space-6) var(--space-6) var(--space-7); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.bausteine-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-2); opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.bausteine-panel.aktiv { opacity: 1; pointer-events: auto; }
@media (max-width: 700px) {
  .bausteine-panels { padding: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .bausteine-panel { transition: none; }
}

/* ===== Branchen-Schnellwahl (Sektion "Was das bringt") =====
   Vier gleichrangige Presets, keine Tabs — es wird kein Panel gewechselt, nur die
   Reglerwerte unten uebernommen. Knopfgruppe mit aria-pressed wie der Preis-Umschalter,
   aber als zweizeilige Chips. min-height haelt die einzeilige Steuerkanzlei-Kachel auf
   derselben Hoehe wie die anderen drei. Steuerung in assets/js/rechner.js. */
.branchen { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.branchen-btn { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: none; font: inherit; text-align: left; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.branchen-btn:hover { background: rgba(236, 238, 242, .06); }
.branchen-btn-titel { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text); }
.branchen-btn-sub { font-size: 12px; color: var(--color-text-faint); }
.branchen-btn[aria-pressed="true"] { border-color: var(--color-accent); background: rgba(182, 242, 75, .10); }
.branchen-btn[aria-pressed="true"] .branchen-btn-titel { color: var(--color-accent); }
/* Die Akzentwaesche hebt den Grund auf #1C2316; faint kaeme dort bei 12 px nur auf
   4,27:1. Lighthouse sieht den Zustand nie, weil er erst durch einen Klick entsteht. */
.branchen-btn[aria-pressed="true"] .branchen-btn-sub { color: var(--color-text-muted); }
@media (max-width: 700px) {
  .branchen-btn { flex: 1 1 calc(50% - var(--space-3)); }
}

/* ===== Rechner ===== */
input[type="range"] { accent-color: #B6F24B; width: 100%; height: 22px; background: transparent; cursor: pointer; border: none; padding: 0; }
.rechner-felder { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-5); }
.feld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.input-zahl { width: 90px; text-align: right; }
.rechner-jahr { font-family: var(--font-display); font-size: 58px; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-accent); margin-top: 4px; }
.stat-26 { font-size: 26px; }

/* ===== Ablauf: scroll-getriebene Timeline =====
   Spur-Default ist top:0/bottom:0 (volle Hoehe von .zeitstrahl-wrap) — ohne JavaScript
   oder bis assets/js/ablauf.js geladen hat, steht die Spur damit trotzdem sichtbar da,
   nur ohne animierten Fortschritt. Sobald ablauf.js zusaetzlich top/height inline setzt,
   gewinnen diese praeziseren Werte gegen das gestylte bottom (CSS-Ueberbestimmungsregel
   fuer absolut positionierte Elemente). Die praezise Messung ist noetig, weil der
   Markerabstand vom Zeilenumbruch der Beschreibungstexte abhaengt und damit nicht
   vorhersagbar ist — gleiches Prinzip wie die gemessenen Hoehen in cta-leiste.js. Die
   Fuellung ist ein normales Blockkind der Spur, kein eigenes position:absolute: sie
   waechst von oben in die Spurfarbe hinein, der Rest der Spur bleibt darunter sichtbar. */
.zeitstrahl-wrap { position: relative; }
.zeitstrahl-spur { position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--color-divider); }
.zeitstrahl-fuellung { width: 100%; height: 0; background: var(--color-accent); transition: height 500ms ease; }
.zeitstrahl { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-8); }
.zeitstrahl-schritt { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-5); align-items: start; }
.zeitstrahl-marker { justify-self: center; margin-top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-divider); transition: background-color 300ms ease, border-color 300ms ease; }
.zeitstrahl-schritt.erreicht .zeitstrahl-marker { background: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 700px) {
  .zeitstrahl { gap: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  .zeitstrahl-fuellung, .zeitstrahl-marker { transition: none; }
}

/* ===== Einordnung: Erwartung/Realitaet-Vergleich =====
   Ersetzt den Zwei-Karten-Block. Default-Zustand (ohne .js-scroll-anim) ist voll
   sichtbar und durchgestrichen — lauffaehig ohne JavaScript. Erst assets/js/einordnung.js
   setzt .js-scroll-anim (nur wenn IntersectionObserver da ist und kein reduced-motion
   gilt) und blendet die Zeilen dadurch zunaechst aus, um sie versetzt wieder einzublenden
   (60 ms Schritt, 180 ms Dauer). Die Durchstreichung zeichnet sich danach von links nach
   rechts (scaleX, transform-origin left) — die einzige Bewegung, die etwas erzaehlt. */
.vergleich-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.vergleich-liste { margin: 0; padding: 0; list-style: none; }
.vergleich-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.vergleich-erwartung { position: relative; display: inline-block; justify-self: start; text-decoration: none; color: var(--color-text-faint); font-size: var(--text-sm); }
.vergleich-erwartung::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; }
.vergleich-real { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-sm); color: var(--color-neutral-200); }
.vergleich-real::before { content: "→"; color: var(--color-accent); flex: none; }
@media (max-width: 700px) {
  .vergleich-kopf { display: none; }
  .vergleich-zeile { grid-template-columns: 1fr; gap: var(--space-2); }
}
.js-scroll-anim .vergleich-zeile { opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; transition-delay: calc(var(--i, 0) * 60ms); }
.js-scroll-anim .vergleich-zeile.sichtbar { opacity: 1; transform: translateY(0); }
.js-scroll-anim .vergleich-erwartung::after { transform: scaleX(0); transition: transform 360ms ease; transition-delay: calc(var(--i, 0) * 60ms + 160ms); }
.js-scroll-anim .vergleich-zeile.sichtbar .vergleich-erwartung::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js-scroll-anim .vergleich-zeile, .js-scroll-anim .vergleich-erwartung::after { transition: none; }
}

/* ===== Grosse Karte (Schluss-CTA) ===== */
.karte-gross { padding: var(--space-9) var(--space-8); }
/* .fade-220 entfallen mit der Referenz-Badge (Etappe 7) — einziger Verwender. */

/* Preistabelle auf leistungen.html: die Spalte "Einmalig" traegt seit Etappe 8 Spannen
   ("1.900–4.500 €") statt des Wortes "Festpreis". In der schmalen Spalte brach die
   Angabe sonst mitten im Preis um — erst das Euro-Zeichen in die naechste Zeile, nach
   dem geschuetzten Leerzeichen dann am Halbgeviertstrich. Beides liest sich wie zwei
   Zahlen.

   Nur oberhalb der Umbruchgrenze: bei 360 px braucht die Tabelle mit nowrap 350 px,
   die Karte gibt aber nur 288 px her — sie liefe ueber. Dort bleibt der Umbruch am
   Halbgeviertstrich; das geschuetzte Leerzeichen vor dem Euro haelt wenigstens die
   Waehrung an der Zahl. Eine quer scrollbare Tabelle waere die Alternative gewesen und
   ist fuer eine Zielgruppe, die abends am Handy liest, die schlechtere. */
@media (min-width: 901px) {
  .table td:nth-child(2) { white-space: nowrap; }
}

/* Grid-Kinder haben von sich aus min-width:auto und schrumpfen nicht unter die
   Mindestbreite ihres Inhalts. Die Preistabelle brauchte bis Etappe 7 nur 281 px und
   passte damit auch bei 360 px in die Spalte; mit den Preisspannen sind daraus 315 px
   geworden, die Karte wuchs auf 367 px und sprengte den 320-px-Container — die ganze
   Seite scrollte quer. Betrifft nur diese eine Karte, deshalb keine Regel auf .split. */
.karte-tabelle { min-width: 0; }
/* Unter rund 340 px reicht auch das nicht mehr: die Tabelle braucht 315 px, die Karte
   gibt dann keine 280 mehr her. Statt die Seite quer scrollen zu lassen, scrollt der
   Bereich um die Tabelle. Oberhalb greift die Regel nicht sichtbar — ohne Ueberlauf
   zeigt der Browser keine Leiste. */
.tabelle-scroll { overflow-x: auto; }

/* ===== Team ===== */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.karte-foto { padding: 0; overflow: hidden; }
.foto-portrait { border-radius: 0; aspect-ratio: 4 / 5; margin: 0; }
.karte-foto-text { padding: var(--space-5) var(--space-5) var(--space-6); }
.team-rolle { margin-top: 6px; }
.row-g8 { gap: var(--space-8); }

/* ===== Footer ===== */
.fuss { background: var(--color-bg-alt); border-top: 1px solid var(--color-divider); margin-top: var(--space-9); }
.fuss-inner { padding-block: var(--space-9); display: flex; flex-wrap: wrap; gap: var(--space-9); justify-content: space-between; }
.fuss-marke { max-width: 320px; display: flex; flex-direction: column; gap: var(--space-4); }
.fuss-spalte { display: flex; flex-direction: column; gap: var(--space-3); }
.fuss-wortmarke { font-size: 15px; }

/* Die Referenz-Badge (fix unten rechts, vier rotierende Eintraege) ist in Etappe 7
   ersatzlos entfallen — Entscheid Janis 2026-08-16, Roadmap 7.6.2: unbelegte
   Referenzen, einer davon wortgleich mit einem Preset-Knopf des Rechners. Mit ihr
   entfallen assets/js/stimmen.js und die Regeln .ref-badge*. */

/* ===== Kontakt ===== */
.kontakt-gross { font-family: var(--font-display); font-size: 20px; }
.karte-form { padding: var(--space-7); }
.form-stapel { display: flex; flex-direction: column; gap: var(--space-5); }
.form-erfolg { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-6); }
.form-hinweis { margin: 0; color: var(--color-accent-300); }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Rechtsseiten ===== */
.prosa { max-width: 760px; }
/* "Datenschutzerklaerung" ist als H1 bei 36 px 366 px breit und passt unter 400 px in
   keine Zeile — die Seite bekam dadurch als einzige einen horizontalen Scroll (26 px
   bei 360 px Fensterbreite). hyphens trennt sauber, weil <html lang="de"> gesetzt ist;
   overflow-wrap faengt Browser ohne deutsches Trennwoerterbuch ab. Gefunden in
   Etappe 6, Bestand seit dem Erstbau der Rechtsseiten. */
.prosa h1 { hyphens: auto; overflow-wrap: break-word; }
.prosa h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); margin-top: var(--space-8); }
.prosa h3 { font-size: var(--text-h4); margin-top: var(--space-6); }
.prosa p, .prosa li { color: var(--color-text-muted); }
.prosa ul { padding-left: 20px; }
/* Fliesstext-Links brauchen ein zweites Merkmal neben der Farbe:
   Akzent gegen Fliesstextgrau erreicht nur 1,93:1, gefordert sind 3:1.
   Gleicher Grund bei Kleintext (.small) — dort steht genau ein Inline-Link, der
   Datenschutz-Hinweis am Kontaktformular. Seit dem helleren --color-text-faint
   (Etappe 6) kommt er auf 2,84:1 gegen den Umgebungstext und war damit nur noch
   ueber die Farbe erkennbar. */
.prosa p a, .prosa li a, .small a { text-decoration: underline; }