/* ==========================================================================
   MarketSystems — Design-System (Phase 0)
   Grundfläche: heller Paper/Ink-Ton (Owner-Entscheidung Runde 3, 02.07.2026 —
   bewusste Abweichung vom dunklen Kanon). DNA aus den Pre-Build-Drafts,
   fortgesetzt in verbesserter Form.
   Farbrollen: Gold = Marke/aktiv (Home dominant) · Blau = Sub-Brand
   Betriebssystem Optionen · Ink = Text · Dark nur als Kontrast-Panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften — lokal ausgeliefert (ersetzt den @import von fonts.googleapis.com)
   Grund: Der @import baute bei jedem Seitenaufruf eine Verbindung zu Google in
   den USA auf und uebertrug die Besucher-IP ohne Einwilligung. Zusaetzlich war
   er render-blockierend, weil erst das Google-Stylesheet und dann die Font-
   Dateien geladen werden mussten. Beides entfaellt mit lokalen Dateien.
   Roboto Serif ist eine Variable Font: eine Datei je Subset deckt die volle
   Gewichtsachse 400–760 ab. IBM Plex Mono liegt statisch je Schnitt vor.
   unicode-range bleibt erhalten — latin-ext laedt nur, wenn ein Zeichen es
   braucht. Quelle der Dateien: fonts.gstatic.com, geladen am 01.09.2026.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400 760;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400 760;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f5efe4;
  --paper-2: #fbf7ef;
  --cream: #fffdf8;
  --ink: #171510;
  /* Fliesstext-Grau: von #686057 (5,78:1) auf #5c554c (6,87:1) abgedunkelt.
     Grund: Roboto Serif traegt in kleinen Graden sehr feine Striche — bei
     5,8:1 wirkt 14–16px Text "ausgewaschen". Papierton bleibt erhalten. */
  --muted: #5c554c;
  --soft: #e6d9c6;
  --line: #d8c7ad;
  --gold: #c9921e;
  --gold-2: #e3b23f;
  --amber: #e16f27;
  --green: #2f6f57;
  --green-2: #3d8b6e;
  --green-ink: #1f4f3e;
  /* --------------------------------------------------------------------
     Text-Varianten der Akzentfarben (gemessen 03.08.2026, Runde 2)
     --------------------------------------------------------------------
     --gold (#c9921e) erreicht als SCHRIFT auf paper-2 nur 2,58:1 und als
     Flaeche unter weisser Schrift 2,71:1 — beides klar unter WCAG AA (4,5:1).
     Genau das ist der Grund, warum Eyebrows, Tags und Pfad-CTAs "fein und
     schlecht leserlich" wirken. Die Flaechen-/Rahmenrolle von --gold bleibt
     unveraendert (dort gilt kein Textkontrast), fuer Schrift greift --*-ink.
       --gold-ink  #8a6210: 5,12:1 auf paper-2 · 5,38:1 weiss darauf
       --amber-ink #a8480f: 5,46:1 auf paper-2
       --blue-ink  #245b7c: 6,87:1 auf paper-2
     -------------------------------------------------------------------- */
  --gold-ink: #8a6210;
  --amber-ink: #a8480f;
  --blue-ink: #245b7c;
  --accent-ink: var(--gold-ink);
  --blue: #2f6f97;
  --blue-2: #4f91bd;
  --blue-3: #245b7c;
  --blue-soft: rgba(47, 111, 151, .12);
  --blue-line: rgba(47, 111, 151, .32);
  --dark: #12120f;
  --dark-2: #1c1a14;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 26px 60px rgba(34, 26, 12, .14);
  --shadow-soft: 0 14px 34px rgba(34, 26, 12, .07);
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;
  --serif: "Roboto Serif", Georgia, serif;
  /* Seiten-Akzent: Standard Gold (Home/Marke). Subs überschreiben per body-Klasse. */
  --accent: var(--gold);
  --accent-2: var(--gold-2);
  --accent-soft: rgba(201, 146, 30, .12);
  --accent-line: rgba(201, 146, 30, .34);
}

/* Sub-Brand Betriebssystem Optionen: Blau führt Struktur/Interaktion, Gold bleibt CTA/aktiv */
body.sub-bos {
  --accent: var(--blue);
  --accent-2: var(--blue-2);
  --accent-soft: var(--blue-soft);
  --accent-line: var(--blue-line);
  --accent-ink: var(--blue-ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(201, 146, 30, .12), transparent 28rem),
    linear-gradient(180deg, var(--paper) 0%, #efe4d4 100%);
  font-family: var(--serif);
  line-height: 1.58;
  font-size: 18px;
  /* Roboto Serif traegt eine opsz-Achse (8..144). Explizit aktiviert, damit
     kleine Grade dickere Striche und offenere Punzen bekommen — der direkte
     Hebel gegen "Schrift wirkt sehr fein". */
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }

/* --------------------------------------------------------------------------
   WORTINTEGRITAET — autoritative Regel (04.08.2026)
   --------------------------------------------------------------------------
   Display- und Entscheidungstext bricht niemals innerhalb eines gewoehnlichen
   Wortes: weder per automatischer Silbentrennung noch per Notumbruch. Passt
   eine Ueberschrift nicht in ihren Raum, wird das in dieser Reihenfolge
   geloest — Containerbreite, Spaltenaufteilung, Schriftgroesse, Laufweite,
   zuletzt kuerzere Formulierung. Ein Wort wird nicht geopfert, damit eine
   Overflow-Messung gruen meldet.

   Diese Regel ersetzt vollstaendig:
     - Runde 2: h1..h4 { hyphens:auto; overflow-wrap:break-word }
     - Runde 3: h1,h2 { hyphens:none; overflow-wrap:break-word } + drei
       Einzelfall-Ausnahmen (.hero .split h1 mobil, .markus-card h2, .trust b)
     - die spaetere Sammelregel .lead/.credentials-line/... { anywhere }
     - alle neun manuellen Soft-Hyphens im Markup
   Es darf keine spaetere Regel geben, die hier wieder Trennung einschaltet.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.lead, .trust b, .trust span, .btn, .credentials-line, .founder-formula,
.path-card h3, .shop-card h3, .tool-card h3, .widget-card strong,
.section-head p, .panel p, .state-card h4, .state-card p,
.legal-page p, .legal-page li, .legal-page dt, .legal-page dd,
.legal-address, .legal-address span, .legal-toc a {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Containerbreite. Vorher fix 1160px — auf 1920px blieben 380px tote Raender
   je Seite ("alles zu sehr zentriert"). Jetzt bis 1320px, Lesebreiten der
   reinen Textbloecke bleiben separat gedeckelt (.lead, .section-head p),
   damit breiter nicht zu langen Zeilen fuehrt. */
.wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
/* Displaymass statt Lesemass: 24ch skaliert mit der Schriftgroesse und ist
   damit unabhaengig vom schmaleren Absatzmass (.lead, .section-head p).
   Der frueher globale 820px-Deckel war der Grund, warum einspaltige
   Desktop-Heroes (Fahrschule, Markt, Shop) bei 1280/1440px nur ~62% der
   verfuegbaren Breite nutzten und kuenstlich drei- statt zweizeilig brachen.
   In Split-Heroes (index, betriebssystem, ueber-markus) begrenzt ohnehin die
   Rasterspalte — dort bleibt dieser Wert wirkungslos. */
h1 {
  max-width: 24ch;
  margin-bottom: 20px;
  font-size: clamp(50px, 7.6vw, 98px);
  line-height: .93;
  letter-spacing: -.01em;
  font-weight: 760;
}

/* H1 in einer .split-Halbspalte (Home-Hero): Display-Größe an die Spaltenbreite
   koppeln. Der Mobile-Wert ist so gewaehlt, dass das laengste Kompositum der
   Seite ("Entscheidungsfähigkeit", 22 Zeichen) bei 375px vollstaendig in eine
   Zeile passt — das ersetzt die frueher noetige Silbentrennung samt Soft-Hyphen. */
.hero .split h1 {
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.06;
}

/* H2 in Halbspalten (.split, .markus-card): eigene Display-Stufe unterhalb der
   Sektions-H2 — schafft eine saubere Hierarchie zur vollen Breite. Der
   Mobile-Wert traegt "Entscheidungsverantwortung" (26 Zeichen, laengstes
   Kompositum im Verbund) ohne Wortbruch. */
.split h2, .markus-card h2 { font-size: clamp(26px, 3.6vw, 46px); }

/* Die BOS-Gründerzeile enthält mit "Entscheidungsverantwortung" das längste
   untrennbare Wort im Verbund. Ihre Größe folgt deshalb der realen
   Kartenbreite statt der allgemeinen Halbspalten-Stufe. */
.sub-bos .markus-card h2 { font-size: clamp(20.5px, 2.5vw, 35.5px); }

/* Einspaltiger Text-Hero der Unterseiten (Fahrschule, Markt, Shop).
   Der Mobile-Floor traegt "MarketSystems." vollstaendig; nach oben nutzt die
   Ueberschrift die Desktopbreite. */
.hero-pad h1 { font-size: clamp(31px, 6.4vw, 84px); }

/* Utility-Hero (Impressum, Datenschutz, Kontakt): schmale Lesespalte, eigene
   Display-Stufe. Ersetzt die frueheren Inline-Styles auf diesen drei Seiten;
   der Mobile-Floor traegt "Datenschutzerklärung" (20 Zeichen) in der auf
   375px nur 327px breiten Spalte ohne Wortbruch. */
.hero-utility { min-height: 60vh; }
.hero-utility .wrap { max-width: 820px; }
.hero-utility h1 { font-size: clamp(28px, 5vw, 60px); }

/* Rechtsseiten: dokumentartige Lesefuehrung statt Marketing-Hero. */
.hero-utility.legal-page { min-height: 0; }
.hero-utility.legal-page .wrap { max-width: 920px; }
/* Untergrenze 28px -> 25px: "9. Empfaenger und Drittlanduebermittlungen" lief
   bei 375px um 6px ueber (353 statt 347). Reihenfolge der Kaskade eingehalten —
   Containerbreite und Spaltenaufteilung sind hier fix, also Schriftgroesse.
   Das Wort bleibt unangetastet, keine Trennung. */
.legal-page h2 { margin-top: 0; font-size: clamp(25px, 4vw, 42px); }
.legal-page h3 { margin-top: 30px; font-size: clamp(21px, 2.6vw, 28px); }
.legal-page p, .legal-page li, .legal-page dd { font-size: 16px; line-height: 1.65; }
.legal-page a { text-decoration: underline; text-underline-offset: 3px; }
.legal-lead { max-width: 68ch; }
.legal-toc { margin-top: 28px; padding: 22px; }
.legal-toc strong { display: block; margin-bottom: 10px; }
.legal-toc ol { columns: 2; column-gap: 34px; margin: 0; padding-left: 22px; }
.legal-toc li { break-inside: avoid; margin: 5px 0; }
.legal-stack { margin-top: 34px; }
/* scroll-margin-top: die Navigation ist position:sticky (siehe .nav) — ohne
   diesen Versatz verschwindet die angesprungene h2 unter der Leiste. */
.legal-section { padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.legal-section:first-child { border-top: 0; }
.legal-section > :last-child { margin-bottom: 0; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.legal-fact { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 248, .7); }
.legal-fact dt { margin-bottom: 6px; color: var(--gold-ink); font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.legal-fact dd { margin: 0; }
.legal-lines > span { display: block; }
.legal-address { font-style: normal; }
.legal-address span { display: block; }
.legal-note { padding-left: 16px; border-left: 3px solid var(--accent); }
.legal-meta { margin-top: 24px; color: var(--muted); font-size: 15px; }

@media (max-width: 760px) {
  .legal-toc ol { columns: 1; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-section { padding: 24px 0; }
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -.01em;
  font-weight: 760;
}

h3 { margin-bottom: 8px; font-size: 23px; line-height: 1.18; font-weight: 760; }
h4 { margin-bottom: 6px; font-size: 19px; line-height: 1.2; font-weight: 760; }
p { color: var(--muted); }

/* Lesemass des Hero-Absatzes. Wortintegritaet kommt aus der autoritativen
   Regel oben — hier bewusst keine eigenen hyphens/overflow-wrap-Werte. */
.lead {
  max-width: 700px;
  font-size: clamp(20px, 2.3vw, 29px);
  line-height: 1.36;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 38px; height: 3px; background: currentColor; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fffdf7;
  background: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tag-outline {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--accent-line);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 253, 248, .9);
  border-bottom: 1px solid rgba(23, 21, 16, .08);
  backdrop-filter: blur(18px);
}

.nav-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand { font-size: clamp(24px, 3vw, 34px); line-height: 1; font-weight: 760; }
.brand span { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #514a40;
  font-size: 15px;
  font-weight: 650;
}

.nav-links a { padding: 11px 8px; border-bottom: 2px solid transparent; transition: border-color .18s ease, color .18s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); border-color: var(--accent-line); }
.nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

/* CTA darf im gequetschten Flex-Layout (760–1100px) nicht wortintern brechen */
.nav-cta { flex-shrink: 0; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(23, 21, 16, .16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  /* <button> erbt Schrift nicht von selbst: das UA-Stylesheet setzt auf dem
     Element selbst 13,3px Arial und schlaegt damit die Vererbung. Ein
     <a class="btn"> stand deshalb auf 18px Roboto Serif, ein
     <button class="btn"> daneben auf 13,3px Arial. */
  font-family: inherit;
  font-size: inherit;
  font-weight: 760;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  color: #18140b;
  background: linear-gradient(135deg, #e7bd4f, #d9842a);
  box-shadow: 0 15px 32px rgba(201, 146, 30, .22);
}

.btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 18px 38px rgba(201, 146, 30, .3); }

.btn-quiet {
  color: var(--ink);
  border-color: rgba(201, 146, 30, .38);
  background: rgba(255, 255, 255, .62);
}

.btn-quiet:hover, .btn-quiet:focus-visible { border-color: rgba(201, 146, 30, .62); background: rgba(255, 255, 255, .85); }

.btn-dark { color: #fffdf7; background: var(--dark); border-color: var(--dark); }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--dark-2); }

/* Quiet-Button auf dunklen Offer-Panels (statt Inline-Style je Seite) */
.offer .btn-quiet { border-color: rgba(255, 253, 247, .3); color: #fffdf7; background: rgba(255, 255, 255, .06); }
.offer .btn-quiet:hover, .offer .btn-quiet:focus-visible { border-color: rgba(255, 253, 247, .55); background: rgba(255, 255, 255, .12); }

.btn-blue {
  color: #fffdf7;
  background: linear-gradient(135deg, var(--blue), var(--blue-3));
  border-color: rgba(79, 145, 189, .42);
  box-shadow: 0 15px 32px rgba(47, 111, 151, .22);
}

.btn-blue:hover, .btn-blue:focus-visible {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  box-shadow: 0 18px 38px rgba(47, 111, 151, .28);
}

.btn[disabled], .btn.is-disabled {
  color: var(--muted);
  background: rgba(255, 255, 255, .5);
  border-color: rgba(23, 21, 16, .14);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   Sektionen & Flächen
   -------------------------------------------------------------------------- */
section { padding: 92px 0; }
.light { background: var(--paper-2); }
.cream { background: var(--cream); }

.dark {
  color: #fffdf7;
  background:
    radial-gradient(circle at 82% 18%, rgba(227, 178, 63, .13), transparent 23rem),
    linear-gradient(145deg, var(--dark), var(--dark-2));
}

.dark .eyebrow { color: var(--gold-2); }
.dark p { color: rgba(255, 253, 247, .76); }

/* KORREKTUR 04.08.2026 (Runde 3): Ueberschrift und Fliesstext brauchen
   getrennte Breitenregeln. Vorher deckelte der .section-head-Container beide
   auf dieselbe (mehrfach ueberschriebene) Breite — dadurch wurde die H2
   kuenstlich schmal, obwohl rechts Platz war ("Fuer wen diese Fahrschule
   gebaut ist." brach unnoetig auf 2 Zeilen). Jetzt: Container ungedeckelt
   (H2 nutzt volle .wrap-Breite), nur der Absatz bleibt auf Lesemass. Konsolidiert
   aus vormals drei Stellen (Basisregel + zwei spaetere Ueberschreibungen). */
.section-head { margin-bottom: 36px; }
.section-head p { font-size: 20px; line-height: 1.52; max-width: 720px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 46px;
  align-items: center;
}

/* Home-Hero: eigene Spaltenaufteilung. Die frühere .95/1.05-Aufteilung liess
   der Textspalte bei 1040–1600px nur ~450–605px — "Entscheidungsfähigkeit"
   (23 Zeichen) passt darin bei keiner Displaygrösse ohne Wortbruch. Fix:
   Textspalte deutlich breiter, H1 moderat kleiner (siehe .hero .split h1),
   damit das Wort in jeder Breite ab 1041px auf einer Zeile bleibt.
   Nur >1040px: darunter kollabiert .split ohnehin auf 1fr (Regel bei
   max-width:1040px) — dort darf diese Regel wegen höherer Spezifität
   (.hero .split vs. .split) diese Kollabierung nicht verhindern. */
@media (min-width: 1041px) {
  .hero .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Panels / Karten-Basis */
.panel, .card {
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 12px 36px rgba(34, 26, 12, .06);
}

.panel { padding: 24px; }

/* Panel-Fließtext folgt der Karten-Textstufe (15px) — vereinheitlicht die
   bisher je Seite inline gesetzten 15.5px-Einzelwerte */
.panel p { font-size: 15px; line-height: 1.52; }

/* --------------------------------------------------------------------------
   Scroll-Reveal (Bewegung ist Beleg von Struktur — einmalig, ruhig)
   -------------------------------------------------------------------------- */
/* Reveal nur, wenn JS wirklich laeuft: main.js setzt als erstes html.js.
   Ohne dieses Gate blieben alle .reveal-on-scroll-Bloecke bei blockiertem
   oder fehlgeschlagenem Skript dauerhaft unsichtbar (opacity:0 ohne den
   is-visible-Setter). Ein <noscript><style>-Fallback scheidet aus, weil die
   CSP seit 01.09.2026 keine Inline-Styles mehr erlaubt. */
html.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

html.js .reveal-on-scroll.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Trust-Reihe (Hero)
   -------------------------------------------------------------------------- */
/* AUTORITATIVE Regel (konsolidiert 04.08.2026). Vorher fuenf Definitionen in
   vier Schichten mit Widerspruch: Basis 3 Spalten/max-width 760px, spaeter
   max-width:none, danach 2 Spalten/820px. Die @media(max-width:1040px)-Regel
   war dadurch wirkungslos (eine spaetere unbedingte Regel gewann). Effektiv
   galt: 2 Spalten ab 761px, 1 Spalte darunter — genau das steht jetzt hier,
   plus die Restreihen-Regel. Keine weiteren .trust-row-Regeln im File. */
.trust-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
  max-width: 820px;
}

/* Einzelne Restkarte nimmt die volle Breite statt halb leer zu stehen */
.trust-row > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .trust-row { grid-template-columns: 1fr; gap: 12px; }
}

.trust {
  padding: 22px;
  border: 1px solid rgba(216, 199, 173, .82);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .78);
  box-shadow: var(--shadow-soft);
}

/* Visueller Anker analog zur Eyebrow-Linie — verankert die Trust-Karten
   in derselben Formsprache wie die Sektionsköpfe */
.trust::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--accent);
  opacity: .8;
}

.trust b { display: block; color: var(--ink); font-size: 16px; line-height: 1.2; }
.trust span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.42; }

/* Nachweise und Profilverweise */
.proof-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; align-items: center; }

.proof-link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 18px;
  border: 1px solid rgba(201, 146, 30, .4);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .9);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(201, 146, 30, .54);
  text-underline-offset: 3px;
}
.proof-link:hover, .proof-link:focus-visible { border-color: var(--gold); }
.proof-link b { font-size: 16px; line-height: 1.2; }
.proof-link small { color: var(--muted); font-size: 15px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   Radar (Signature — technische Ink-Zeichnung auf Papier)
   -------------------------------------------------------------------------- */
.radar-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: stretch;
  gap: 16px;
  min-height: 520px;
  padding: 46px 22px 22px;
  border: 1px solid rgba(216, 199, 173, .9);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 42%),
    linear-gradient(rgba(23, 21, 16, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 21, 16, .03) 1px, transparent 1px),
    var(--cream);
  background-size: auto, 32px 32px, 32px 32px, auto;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.radar-stage::after {
  content: "Lagebild · Auftrag · Preis · Pfad";
  position: absolute;
  left: 22px;
  top: 16px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

.radar-core {
  position: relative;
  width: min(74vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(23, 21, 16, .22);
  background:
    radial-gradient(circle, rgba(23, 21, 16, .5) 0 3px, transparent 4px),
    radial-gradient(circle,
      transparent 0 22%, rgba(23, 21, 16, .16) 22.5% 23%,
      transparent 23.5% 44%, rgba(23, 21, 16, .16) 44.5% 45%,
      transparent 45.5% 66%, rgba(23, 21, 16, .16) 66.5% 67%,
      transparent 67.5% 88%, rgba(23, 21, 16, .2) 88.5% 89%, transparent 89.5%);
}

.radar-core::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 49%;
  height: 2px;
  margin-top: -1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-2), transparent);
  animation: radarSweep 9s linear infinite;
}

.radar-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--accent-soft), transparent 70deg);
  animation: radarSweep 9s linear infinite;
  pointer-events: none;
}

@keyframes radarSweep { to { transform: rotate(360deg); } }

.radar-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 21, 16, .24);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 253, 248, .92);
  box-shadow: var(--shadow-soft);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.radar-node:hover, .radar-node:focus-visible { transform: translateY(-2px); outline: none; }
.radar-node.is-active { border-color: var(--accent); background: var(--cream); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft); color: var(--accent); font-weight: 600; }

/* Oberer Knoten sitzt auf dem Ringrand (nicht darüber) und bleibt frei
   vom Ecklabel der Stage (radar-stage::after, top:16px) */
.radar-node:nth-of-type(1) { left: 50%; top: 9%; transform: translateX(-50%); }
.radar-node:nth-of-type(2) { right: 2%; top: 40%; }
/* Unterer Knoten sitzt oberhalb des Readout-Panels, nicht dahinter */
.radar-node:nth-of-type(3) { left: 50%; bottom: 24%; transform: translateX(-50%); }
.radar-node:nth-of-type(4) { left: 2%; top: 40%; }

.radar-node:nth-of-type(1):hover, .radar-node:nth-of-type(1):focus-visible,
.radar-node:nth-of-type(3):hover, .radar-node:nth-of-type(3):focus-visible { transform: translateX(-50%) translateY(-2px); }

.radar-readout {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  padding: 14px 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .94);
  box-shadow: var(--shadow-soft);
}

.radar-readout b {
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radar-readout span { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; line-height: 1.42; }

/* --------------------------------------------------------------------------
   Route (Signature — Fahrschule Stillhalter: Prüfstrecke statt Radar)
   Gleiche technische Ink-Zeichnung-Ästhetik wie .radar-stage, andere Metapher:
   sechs Checkpoints (ein Modul je Checkpoint) entlang einer kurvigen Strecke
   statt eines Lagebild-Radars. Desktop-only — Mobile-Fallback ist die
   bestehende .path-grid-Kartenreihe (siehe @media max-width:760px unten).
   -------------------------------------------------------------------------- */
.route-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: 22px;
  min-height: 460px;
  padding: 22px;
  border: 1px solid rgba(216, 199, 173, .9);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(23, 21, 16, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 21, 16, .03) 1px, transparent 1px),
    var(--cream);
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: var(--shadow-soft);
}

.route-board { position: relative; min-height: 380px; }

.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.route-track {
  fill: none;
  stroke: rgba(23, 21, 16, .22);
  stroke-width: 2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
}

.route-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .5s ease;
}

.checkpoint {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(23, 21, 16, .24);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 253, 248, .94);
  box-shadow: var(--shadow-soft);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

.checkpoint:hover, .checkpoint:focus-visible { transform: translate(-50%, -50%) translateY(-2px); border-color: var(--accent-line); outline: none; }
.checkpoint.is-active {
  border-color: var(--accent);
  background: var(--cream);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 18px rgba(201, 146, 30, .16), var(--shadow-soft);
  color: var(--accent);
  font-weight: 700;
}

.route-preview {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .94);
  box-shadow: var(--shadow-soft);
}

.route-preview small {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.route-preview h4 { margin: 2px 0 0; font-size: 19px; line-height: 1.22; }

.route-preview-rows { display: grid; gap: 10px; margin-top: 4px; }
.route-preview-rows div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(216, 199, 173, .7); }
.route-preview-rows div:first-child { padding-top: 0; border-top: none; }
/* Der Readout-Span trägt den Fließtext des aktiven Moduls (data-radar-text) —
   Satzschrift wie im Radar-Readout, kein Uppercase-Label-Stil */
.route-preview-rows span { color: var(--ink); font-size: 15px; line-height: 1.5; }
.route-preview-rows b { color: var(--ink); font-size: 15px; line-height: 1.38; font-weight: 650; }

/* Mobile-Fallback-Kartenreihe ist auf Desktop verborgen — Route-Stage übernimmt dort die Darstellung. */
.path-grid.is-route-fallback { display: none; }

/* --------------------------------------------------------------------------
   Prozess-Karte (6 Schritte, Flip)
   -------------------------------------------------------------------------- */
.process-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 34px 30px 30px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(201, 146, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 146, 30, .045) 1px, transparent 1px),
    rgba(255, 253, 248, .82);
  background-size: 30px 30px;
  box-shadow: 0 34px 76px rgba(34, 26, 12, .13);
}

.process-map::after {
  content: "Lage → Auftrag → Rolle → Risiko → Pfad → Review";
  position: absolute;
  left: 30px;
  top: 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  pointer-events: none;
}

.process-step {
  position: relative;
  z-index: 1;
  min-height: 230px;
  perspective: 1000px;
  cursor: pointer;
}

.process-card-inner {
  position: relative;
  width: 100%;
  min-height: 230px;
  transition: transform .42s ease;
  transform-style: preserve-3d;
}

.process-step:hover .process-card-inner,
.process-step:focus-visible .process-card-inner,
.process-step:focus-within .process-card-inner,
.process-step.is-active .process-card-inner { transform: rotateY(180deg); }

.process-face {
  position: absolute;
  inset: 0;
  padding: 22px;
  border: 1px solid rgba(216, 199, 173, .9);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .88);
  backface-visibility: hidden;
  box-shadow: var(--shadow-soft);
}

.process-step::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -19px;
  z-index: 5;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 32px;
  line-height: 1;
  font-weight: 760;
  pointer-events: none;
}

.process-step:last-child::after { content: ""; }

.process-front small {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #191610;
  background: var(--gold-2);
  box-shadow: 0 0 0 6px var(--accent-soft);
  font-weight: 760;
}

.process-front h3 { min-height: 54px; font-size: 20px; }

.process-back {
  transform: rotateY(180deg);
  border-color: var(--accent-line);
  background:
    linear-gradient(var(--accent-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px),
    #fffdf8;
  background-size: 28px 28px;
}

.process-back b {
  display: block;
  margin-bottom: 12px;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.process-back p { color: var(--ink); font-size: 16px; line-height: 1.42; }
.process-face p { margin-bottom: 0; font-size: 15px; line-height: 1.48; }

/* --------------------------------------------------------------------------
   Zustandskarten (2 Zustände: ruhend/aktiv)
   -------------------------------------------------------------------------- */
.state-card {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(216, 199, 173, .86);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .74);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.state-card:hover, .state-card:focus-visible, .state-card.is-active {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 36px rgba(34, 26, 12, .12);
  outline: none;
}

.state-card small {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fffdf7;
  background: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
}

.state-card p { margin-bottom: 0; font-size: 15px; line-height: 1.42; }

/* --------------------------------------------------------------------------
   Pfadwahl-Karten (Home)
   -------------------------------------------------------------------------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(216, 199, 173, .9);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .86);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.path-card:hover, .path-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 24px 52px rgba(34, 26, 12, .13);
}

.path-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gold);
  opacity: .8;
}

.path-card.path-bos::before { background: var(--blue); }

.path-card .path-for {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.path-card.path-bos .path-for { color: var(--blue); }
.path-card h3 { font-size: clamp(24px, 2.6vw, 30px); }
.path-card p { flex: 1 1 auto; font-size: 16px; line-height: 1.5; }

.path-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(216, 199, 173, .7);
}

.path-meta .price-tag { font-size: 22px; font-weight: 760; color: var(--ink); }
.path-meta .price-tag small { display: block; color: var(--muted); font-size: 15px; font-weight: 500; }
.path-cta { color: var(--accent); font-weight: 760; }
.path-card.path-bos .path-cta { color: var(--blue); }

/* --------------------------------------------------------------------------
   Gegenpositionierung (ist / ist nicht)
   -------------------------------------------------------------------------- */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.counter-col { padding: 26px; border-radius: var(--radius-lg); }

.counter-col.is-yes {
  border: 1px solid rgba(47, 111, 87, .3);
  background: rgba(47, 111, 87, .05);
}

.counter-col.is-no {
  border: 1px solid rgba(216, 199, 173, .9);
  background: rgba(255, 253, 248, .7);
}

.counter-col b {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.counter-col.is-yes b { color: var(--green); }
.counter-col.is-no b { color: var(--muted); }
.counter-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.counter-col li {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.42;
}

.counter-col.is-yes li { background: rgba(255, 253, 248, .85); border: 1px solid rgba(47, 111, 87, .18); color: var(--ink); }
.counter-col.is-no li { background: rgba(255, 253, 248, .55); border: 1px solid rgba(216, 199, 173, .6); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(104, 96, 87, .5); text-decoration-thickness: 1px; }

/* Positive Zweitspalte ohne Durchstreichung — für "Andere Wege sind sinnvoller, wenn …" */
.counter-col.is-alt { border: 1px solid rgba(216, 199, 173, .9); background: rgba(255, 253, 248, .7); }
.counter-col.is-alt b { color: var(--accent); }
.counter-col.is-alt li { background: rgba(255, 253, 248, .8); border: 1px solid rgba(216, 199, 173, .7); color: var(--ink); }

/* Ausbildungslehre-Zeile (wiederkehrendes Markenelement) */
.doctrine-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.doctrine-line span { color: var(--ink); }
.doctrine-line span::after { content: "·"; margin-left: 14px; color: var(--accent-ink); }
.doctrine-line span:last-child::after { content: ""; margin: 0; }

/* --------------------------------------------------------------------------
   Problem-Karten
   -------------------------------------------------------------------------- */
.problem-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.problem-card {
  position: relative;
  min-height: 246px;
  padding: 24px;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 12px 36px rgba(34, 26, 12, .06);
  overflow: hidden;
}

.problem-card::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(201, 146, 30, .25);
  border-radius: 50%;
}

.problem-card em {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  border-radius: 50%;
  color: #191610;
  background: var(--gold-2);
  font-style: normal;
  font-weight: 760;
}

.problem-card p { margin-bottom: 0; font-size: 15px; line-height: 1.48; }

/* --------------------------------------------------------------------------
   Mannschaft (dunkle Kontrastsektion)
   -------------------------------------------------------------------------- */
.squad-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 26px;
  align-items: stretch;
}

.squad-visual {
  position: relative;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(227, 178, 63, .26);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 111, 151, .16), transparent 15rem),
    rgba(255, 255, 255, .045);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

.squad-visual img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; object-position: center; }

.squad-visual figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 253, 247, .14);
  border-radius: var(--radius);
  background: rgba(18, 18, 15, .78);
  backdrop-filter: blur(14px);
}

.squad-visual figcaption b { display: block; color: var(--gold-2); font-size: 18px; line-height: 1.15; }
.squad-visual figcaption span { display: block; margin-top: 6px; color: rgba(255, 253, 247, .74); font-size: 15px; line-height: 1.42; }

.role-zones { display: grid; gap: 12px; }

.zone {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(227, 178, 63, .22);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(47, 111, 151, .10), transparent 42%),
    rgba(255, 255, 255, .055);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.zone:hover, .zone:focus-visible, .zone.is-active { border-color: rgba(227, 178, 63, .55); outline: none; }
.zone b { display: flex; justify-content: space-between; gap: 18px; color: var(--gold-2); }
.zone > span { display: block; color: rgba(255, 253, 247, .68); font-size: 15px; line-height: 1.42; }

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

.zone-metric {
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(255, 253, 247, .10);
  border-radius: var(--radius);
  color: rgba(255, 253, 247, .78);
  background: rgba(255, 255, 255, .035);
  font-size: 15px;
  line-height: 1.35;
}

.zone-metric small {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-2);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Widget-Karten (Reveal)
   -------------------------------------------------------------------------- */
.widget-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; align-items: stretch; }

.widget-intro {
  padding: 28px;
  border: 1px solid rgba(201, 146, 30, .26);
  border-radius: var(--radius);
  background: var(--dark);
  color: #fffdf7;
}

.widget-intro p { color: rgba(255, 253, 247, .72); }
.widget-intro .eyebrow { color: var(--gold-2); }

.widget-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: widget; }

/* Visueller Anker: Mono-Index je Werkzeugkarte (per CSS-Counter) — gleiche
   Ankerlogik wie Problem-Karten (Nummer) und State-Cards (Pill), gleiche Seite */
.widget-card::before {
  counter-increment: widget;
  content: counter(widget, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
}

.widget-card {
  position: relative;
  min-height: 196px;
  padding: 22px;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 12px 36px rgba(34, 26, 12, .06);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}

.widget-card:hover, .widget-card:focus-within { transform: translateY(-3px); border-color: rgba(201, 146, 30, .72); }
.widget-card strong { display: block; margin-bottom: 8px; font-size: 24px; line-height: 1.1; }
.widget-card p { margin-bottom: 0; font-size: 15px; line-height: 1.48; }

.widget-card .reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .22s ease, margin-top .22s ease;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.widget-card:hover .reveal, .widget-card:focus-within .reveal, .widget-card.is-active .reveal {
  max-height: 160px;
  opacity: 1;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Founder / Credentials
   -------------------------------------------------------------------------- */
.markus-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 32px;
  align-items: center;
}

/* Über-Markus-Hero: Praxisnachweise sind eine zusammenhängende Dienstleiste,
   keine Kennzahlkarten. Die Reihenfolge bleibt von 761px bis Desktop lesbar. */
.hero-about .markus-card { align-items: start; }
.service-record {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.service-record > li { padding-left: 16px; border-left: 3px solid var(--accent); }
.service-record b, .service-record span { display: block; }
.service-record b { color: var(--ink); font-size: 16px; line-height: 1.25; }
.service-record span { margin-top: 5px; color: var(--muted); font-size: 15px; line-height: 1.42; }

.provenexpert-proof {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(201, 146, 30, .4);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .9);
  box-shadow: var(--shadow-soft);
}
.provenexpert-award {
  display: block;
  width: min(230px, 70%);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.provenexpert-award:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.provenexpert-award img { display: block; width: 100%; height: auto; }
.provenexpert-score { display: grid; justify-items: center; gap: 4px; text-align: center; }
.provenexpert-score strong { color: var(--ink); font-size: 24px; line-height: 1.1; }
.provenexpert-score > span:last-child { color: var(--muted); font-size: 15px; }
.review-stars { color: var(--gold-ink); font-size: 26px; line-height: 1; letter-spacing: .08em; }
.provenexpert-actions { display: grid; width: 100%; gap: 10px; text-align: center; }
.home-provenexpert-wrap {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 24px;
}
.provenexpert-proof-home {
  grid-template-columns: 132px minmax(0, 1fr) minmax(260px, .72fr);
  align-items: center;
  justify-items: stretch;
}
.provenexpert-proof-home .provenexpert-award { width: 132px; }
.provenexpert-proof-home .provenexpert-score { justify-items: start; text-align: left; }
.provenexpert-proof-home .provenexpert-actions { min-width: 0; }
.testimonial-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}
.testimonial-action p { margin: 0; font-size: 15px; color: var(--muted); }

@media (max-width: 1040px) {
  .hero-about .service-record { grid-column: 1; grid-row: 2; }
  .hero-about .portrait-frame { grid-row: 3; }
}

@media (max-width: 760px) {
  .service-record { grid-template-columns: 1fr; gap: 14px; }
  .provenexpert-award { width: min(220px, 76%); }
  .home-provenexpert-wrap { padding: 0 16px; }
  .provenexpert-proof-home { grid-template-columns: 1fr; justify-items: center; }
  .provenexpert-proof-home .provenexpert-award { width: min(210px, 74%); }
  .provenexpert-proof-home .provenexpert-score { justify-items: center; text-align: center; }
  .testimonial-action { align-items: stretch; flex-direction: column; }
  .testimonial-action .btn { width: 100%; }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .provenexpert-proof-home { grid-template-columns: 120px minmax(0, 1fr); }
  .provenexpert-proof-home .provenexpert-award { width: 120px; }
  .provenexpert-proof-home .provenexpert-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portrait-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: var(--shadow);
  min-height: 430px;
}

.portrait-frame img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: 24% center; }
.portrait-frame-small { min-height: 360px; max-height: 420px; align-self: center; }
.portrait-frame-small img { min-height: 360px; object-position: 18% center; }

.credential-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }

.credential {
  position: relative;
  padding: 22px;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(255, 253, 248, .76));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.credential::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  opacity: .78;
}

.credential b { display: block; color: var(--gold); font-size: 18px; line-height: 1.2; }
.credential p { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }

.founder-formula {
  margin: 22px 0 0;
  padding: 20px 24px;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 253, 248, .8);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}

.credentials-line {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Angebot
   -------------------------------------------------------------------------- */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .4fr);
  gap: 22px;
  align-items: start;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(47, 111, 151, .26);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 86% 16%, rgba(47, 111, 151, .30), transparent 20rem),
    linear-gradient(135deg, #141915, #172331 58%, #14344a);
  color: #fffdf7;
  box-shadow: var(--shadow);
}

.offer p { color: rgba(255, 253, 247, .72); }
.offer .eyebrow { color: var(--gold-2); }

.offer-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }

.offer-list li {
  padding: 14px 16px;
  border: 1px solid rgba(227, 178, 63, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 253, 247, .78);
}

.price {
  margin-bottom: 16px;
  /* Folgt dem Seiten-Akzent: Gold-2 auf Gold-Seiten, Blau-2 im Sub-Brand BOS —
     ersetzt die Inline-Overrides je Seite */
  color: var(--accent-2);
  font-size: clamp(58px, 7vw, 92px);
  line-height: .95;
  font-weight: 760;
}

.price small { display: block; margin-top: 8px; color: rgba(255, 253, 247, .58); font-size: 16px; font-weight: 500; }
.offer-actions {
  display: grid;
  gap: 12px;
  align-content: start;
  align-self: start;
  padding: 26px;
  border: 1px solid rgba(255, 253, 247, .16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
}
.contact-note { margin: 6px 0 0; color: rgba(255, 253, 247, .58); font-size: 15px; line-height: 1.42; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.faq details {
  padding: 0;
  border: 1px solid rgba(216, 199, 173, .88);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 12px 36px rgba(34, 26, 12, .06);
  transition: border-color .18s ease;
}

.faq details[open] { border-color: var(--accent-line); }

.faq summary {
  position: relative;
  cursor: pointer;
  padding: 19px 48px 19px 22px;
  font-weight: 760;
  list-style: none;
  border-radius: var(--radius);
  transition: background .18s ease;
}

.faq summary::-webkit-details-marker { display: none; }

/* Zustandsindikator: + kippt bei geöffnetem Eintrag zu × — Bewegung nur als
   Beleg des Zustandswechsels, statische Endlage */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transition: transform .2s ease;
}

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { background: rgba(23, 21, 16, .03); }
.faq summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.faq details p { padding: 0 22px 20px; margin: 0; font-size: 15px; line-height: 1.5; }

/* ENTFERNT 04.08.2026: Komponente .compliance-frame vollstaendig ausgebaut.
   Die sechs generischen "Wichtiger Hinweis"-Kaesten sind aus dem Markup
   entfernt (Owner-Entscheidung); die kurze Orientierung steht zentral im
   Footer. Die Komponente war zudem selbst dreifach definiert (Basisregel,
   max-width:720px, spaeter max-width:760px) — ein Beispiel genau der
   Reparaturschichten, die diese Runde aufloest. */

/* --------------------------------------------------------------------------
   Status-Karten (Shop, ehrliche Zustände)
   -------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-soon { color: var(--green); background: rgba(47, 111, 87, .1); border: 1px solid rgba(47, 111, 87, .3); }
.status-pill.is-wip { color: var(--amber); background: rgba(225, 111, 39, .09); border: 1px solid rgba(225, 111, 39, .3); }

/* Platzhalter-Flächen (Asset-SOP: beschriftet, korrekte Proportion) */
.asset-placeholder {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 2px dashed rgba(104, 96, 87, .45);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, rgba(216, 199, 173, .18) 0 14px, transparent 14px 28px), rgba(255, 253, 248, .6);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 15px;
  text-align: center;
  padding: 24px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { padding: 46px 0 38px; color: rgba(255, 253, 247, .62); background: #11100d; font-size: 15px; }
.footer a:hover, .footer a:focus-visible { color: #fffdf7; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px;
  align-items: start;
}

.footer-brand strong { color: #fffdf7; font-size: 18px; font-weight: 760; }
.footer-brand strong span { color: var(--gold-2); }
.footer-brand p { margin: 10px 0 0; color: rgba(255, 253, 247, .55); font-size: 15px; line-height: 1.55; max-width: 460px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.footer-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 253, 247, .12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: rgba(255, 253, 247, .5); font-size: 15px; }

/* --------------------------------------------------------------------------
   Reduced Motion — vollständige statische Darstellung, kein Feature-Entfall
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll { opacity: 1; transform: none; }
  .signature-visual img { transform: none !important; }
  .radar-core::before, .radar-core::after { animation: none; opacity: .35; }
  .process-step { min-height: auto; perspective: none; }
  .process-card-inner { min-height: auto; transform: none !important; transform-style: flat; }
  .process-face { position: static; backface-visibility: visible; }
  .process-back { transform: none; margin-top: 10px; }
  .widget-card .reveal { max-height: none; opacity: 1; margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   Mobile-Overflow-Schutz
   Grid-Kinder haben per Spec ein implizites min-width:auto — das bemisst sich
   am Min-Content jedes Kindes. Ein einzelnes langes Wort (Headline, Credential-
   Zeile) kann so die Spalte sprengen, selbst wenn grid-template-columns:1fr
   greift. min-width:0 erlaubt das Schrumpfen unter den Content, overflow-wrap:
   anywhere sorgt dafür, dass auch die Min-Content-Breite selbst kleiner wird.
   -------------------------------------------------------------------------- */
.split > *, .markus-card > *, .credential-grid > *, .path-grid > *, .counter-grid > *,
.fit-grid > *, .hero-grid > *, .cockpit > *, .tool-grid > *, .offer > *, .widget-grid > *,
.trust-row > *, .problem-board > *, .process-map > *, .widget-board > *, .faq-grid > *,
.zone-grid > *, .levels-grid > *, .module-grid > *, .squad-layout > *, .image-readout > *,
.sequence-grid > *, .footer-grid > * {
  min-width: 0;
}

/* ENTFERNT 04.08.2026: .lead/.credentials-line/.founder-formula/.btn trugen
   hier overflow-wrap:anywhere. Diese Regel stand NACH der .lead-Basisregel und
   hat deren Wortschutz bei gleicher Spezifitaet ausgehebelt — sie war die
   Ursache fuer trennstrichlose Brueche im Hero-Absatz. Wortintegritaet regelt
   jetzt ausschliesslich der autoritative Block am Dateianfang. Der
   Min-Content-Schutz der Rasterkinder bleibt durch min-width:0 oben erhalten. */

html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-grid, .split, .squad-layout, .widget-grid, .markus-card, .counter-grid { grid-template-columns: 1fr; }
  .process-step:nth-child(3)::after, .process-step:last-child::after { content: ""; }
  .path-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1160px); }
  body { font-size: 17px; }
  section { padding: 64px 0; }
  h1 { font-size: clamp(42px, 14.5vw, 70px); }
  /* 8.4vw statt 10.5vw: lange Komposita ("Marktentscheidungen.") müssen ohne
     wortinternen Notumbruch in die Zeile passen — Hyphenation ist auf
     Display-Größen nicht verlässlich */
  h2 { font-size: clamp(30px, 8.4vw, 44px); }
  /* Split kollabiert auf eine Spalte. Kurze Split-Heroes behalten hier ihre
     mobile Display-Stufe; die längere Home-H1 wird separat an ihre tatsächlich
     verfügbare Breite angepasst. */
  .hero .split h1 { font-size: clamp(36px, 10.4vw, 52px); }
  .hero-home .split h1 { font-size: clamp(25.5px, 6.8vw, 31px); }

  .nav-inner { min-height: 66px; }
  .nav-toggle { display: grid; place-items: center; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(255, 253, 248, .98);
    border-bottom: 1px solid rgba(23, 21, 16, .1);
    box-shadow: 0 24px 40px rgba(34, 26, 12, .12);
  }

  .nav.is-open .nav-links { display: flex; }
  .nav-cta { display: none; }

  /* .trust-row hier bewusst entfernt — siehe autoritative Regel oben. */
  .problem-board, .process-map, .widget-board, .credential-grid, .faq-grid, .zone-grid { grid-template-columns: 1fr; }

  .process-map::before, .process-map::after { display: none; }
  .process-card-inner, .process-step { min-height: 220px; }
  .process-step:not(:last-child) { margin-bottom: 18px; }
  .process-step::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -34px; transform: translateX(-50%); font-size: 28px; }
  .process-step:last-child::after { content: ""; }

  .radar-readout { position: static; margin: 14px 18px 18px; }
  /* Readout liegt mobil im Fluss unter dem Radar — unterer Knoten rückt auf den Kreisrand */
  .radar-node:nth-of-type(3) { bottom: 38%; }
  .squad-visual, .squad-visual img { min-height: 320px; }
  .path-card { min-height: auto; }

  /* Route (Fahrschule Stillhalter): kein 3D/SVG-Interaktionselement auf Mobile —
     strikt flache Kartenreihe statt verkleinerter Interaktion (Owner-Vorgabe). Route-Stage wird
     ausgeblendet, die bestehende .path-grid-Kartenreihe (Mobile-Fallback-Rolle)
     bleibt der einzige sichtbare Lernpfad-Block unterhalb dieser Breite. */
  .route-stage { display: none; }
  .path-grid.is-route-fallback { display: grid; }

  .hero-actions .btn, .offer-actions .btn { width: 100%; }
}

/* Signature-Visual: atmosphärisches Übergangsbild zwischen Hero und Content (alle vier Produktseiten).
   Caption-Muster analog .squad-visual figcaption — verankert das Bild sichtbar in der Seitenlogik,
   statt als kontextloses Bilderband zu wirken. */
.signature-visual {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px;
  box-sizing: content-box;
}
.signature-visual .signature-visual-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(227, 178, 63, .26);
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .18);
}
.signature-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: .96;
}

/* Reveal-Settle: Das Bild setzt sich beim ersten Sichtbarwerden minimal ab
   (1.04 → 1.0) — einmalig, an den Scroll-Reveal-Zustand gekoppelt, mit
   definierter statischer Endlage. Kein Loop, kein Parallax. */
html.js .signature-visual.reveal-on-scroll img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
html.js .signature-visual.is-visible img { transform: scale(1); }

.signature-visual figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 253, 247, .14);
  border-radius: var(--radius);
  background: rgba(18, 18, 15, .78);
  backdrop-filter: blur(14px);
  line-height: 1.3;
}
.signature-visual figcaption b { display: block; color: var(--gold-2); font-size: 16px; }
.signature-visual figcaption span { display: block; margin-top: 4px; color: rgba(255, 253, 247, .74); font-size: 15px; }

/* Mobile-Anpassung des Signature-Visuals. Muss NACH den Komponenten-Regeln
   stehen: gleiche Spezifität — stünde der Block davor (wie früher im
   760px-Sammelblock), gewännen die späteren Basisregeln und die Mobile-
   Anpassung wäre wirkungslos. */
@media (max-width: 760px) {
  .signature-visual { padding: 0 16px; }
  /* max-width zwingend zusammen mit min-height: aspect-ratio leitet sonst die
     Breite aus der Mindesthoehe ab (is-cropped-tall: 180px * 2752/960 = 516px)
     und der Frame wird breiter als der Viewport. Die Mindesthoehe bleibt, die
     Breite folgt jetzt dem Container. */
  .signature-visual .signature-visual-frame { min-height: 180px; max-width: 100%; }
  .signature-visual figcaption { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; }
  .signature-visual figcaption span { display: none; }
}

/* BOS besitzt mehrere lange Fachkomposita. Unter 480px wird die Sektions-H2
   so skaliert, dass vollständige Wörter sichtbar bleiben, ohne Notumbruch
   oder Clipping durch den globalen Overflow-Schutz. */
@media (max-width: 480px) {
  /* Untergrenze auf das rechnerische Minimum gesetzt (Range.getClientRects()
     bei 320px durchgemessen), nicht pauschal abgesenkt: "Optionsentscheidungen."
     passt ab 24px, ein Punkt darunter als Sicherheitsabstand zur Kante. */
  .sub-bos .section-head h2 { font-size: clamp(24px, 6.7vw, 29.5px); }
  /* "Entscheidungsfähigkeit" passt ab 25px (Original war 25,5px). */
  .hero-home .split h1 { font-size: clamp(25px, 6.8vw, 31px); }
}

/* Sehr kleine Viewports (iPhone SE und schmaler). Die Rechtsseiten tragen mit
   "Datenschutzerklaerung", "Drittlanduebermittlungen" und der 34 Zeichen langen
   Behoerden-E-Mail die laengsten unteilbaren Tokens des Projekts. Untergrenzen
   sind das gemessene Minimum: begrenzend ist bei den H2 durchgehend Abschnitt
   9 "Empfänger und Drittlandübermittlungen" (passt ab 24px). Reine
   Groessenanpassung, Wortintegritaet bleibt unangetastet. */
@media (max-width: 359px) {
  .hero-utility h1 { font-size: clamp(27px, 5vw, 60px); }
  .legal-page h2 { font-size: clamp(24px, 4vw, 42px); }
  .legal-address { font-size: 15px; }
}

/* Wiederverwendbare Sektions-Utilities (statt Inline-Style-Duplikate je Seite) */
.hero-pad { padding: 76px 0 66px; }
.section-compact { padding: 56px 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }

/* Kompakte State-Card-Reihe (Ausbildungslehre Home, Modul-Fallback Fahrschule) */
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.state-grid > * { min-width: 0; }

/* Vertikaler Panel-Stapel (Risikoarchitektur BOS, FA-Kompakt-Spalte) */
.stack { display: grid; gap: 12px; }

/* Tag-Label als Panel-Anker: einheitlicher Abstand statt Inline-Margin je Tag */
.panel .tag { margin-bottom: 12px; }

/* Markierte Textauswahl im Markenton */
::selection { background: rgba(201, 146, 30, .26); color: var(--ink); }

/* --- Veredelung 03.08.2026: Lesebreiten und Founder-Proof --- */

/* Founder-Proof (freigegebener Coaching-Claim, 04_CLAIM_HYGIENE 2.7):
   inhaltlich der staerkste Satz des Blocks, deshalb sichtbar abgesetzt
   statt als Fliesstext zwischen Formel und Credentials. */
.founder-proof {
  margin: 22px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  font-size: 18px;
  line-height: 1.5;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Squad-Visual im Hochformat (Trading-Mannschaft)
   --------------------------------------------------------------------------
   Die Basisregel .squad-visual img (Z. 1004) setzt object-fit:cover +
   min-height:500px. Das ist fuer ein breites Foto richtig, beschneidet aber
   eine texttragende Infografik im Hochformat seitlich (gemessen: 7,8 % der
   Bildflaeche bei 1440 px). Dieser Modifier haengt sich an dieselbe Stelle,
   muss deshalb NACH der Basisregel stehen — gleiche Spezifitaet, spaetere
   Deklaration gewinnt. Contain ist hier unsichtbar, weil die Sektion .dark
   denselben dunklen Grund traegt wie die Grafik.
   -------------------------------------------------------------------------- */
.squad-visual.is-contain img {
  object-fit: contain;
  height: auto;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Proof-Wall — Teilnehmerstimmen als echter HTML-Text
   --------------------------------------------------------------------------
   Dreischichtig nach Gestaltungsvorgabe:
     Beweis      = die Zitate als selektierbarer, vorlesbarer, indexierbarer Text
     Atmosphaere = markeneigenes Motiv als .proof-wall-bg, rein dekorativ
     Einordnung  = Herkunfts- und Hinweiszeile unter der Sektion
   Kein Carousel, kein Auto-Slider, keine animierten Zaehler.
   -------------------------------------------------------------------------- */
/* Original-Testimonial-Wallpaper. Traegt Rasterschrift, ist deshalb NICHT die
   barrierefreie Quelle — die Karten darunter sind es. Volle Breite, voller
   Kontrast: es soll als Beleg wirken, nicht als Deko. */
.testimonial-wall {
  margin: 34px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--dark);
  box-shadow: var(--shadow);
}
.testimonial-wall img {
  display: block;
  width: 100%;
  height: auto;
}

.proof-wall-stage {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}

/* Dekoratives Markenmotiv. Liegt hinter dem Text, traegt selbst keine
   Information — deshalb alt="" und aria-hidden im Markup. */
.proof-wall-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  pointer-events: none;
}

.proof-wall-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.quote-card {
  margin: 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.quote-card blockquote {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.52;
  color: var(--ink);
}

.quote-card figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--soft);
  font-size: 15px;
  color: var(--muted);
}

/* Musterzeile: die Synthese ueber alle Stimmen, deshalb abgesetzt. */
.proof-pattern {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: 17px;
  line-height: 1.5;
  max-width: 72ch;
}

/* Herkunfts- und Compliance-Hinweis. Bewusst klein und randstaendig —
   04_CLAIM_HYGIENE A.4: Compliance-Frame gehoert nicht in den Hero,
   aber sehr wohl an die Sektion, auf die er sich bezieht. */
.proof-note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 80ch;
}

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

@media (max-width: 760px) {
  .proof-wall-stage { padding: 18px; }
  .proof-wall-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Kein Hintergrundbild auf Mobile — weder Lesbarkeit noch Ladezeit
     sollen dafuer zahlen . */
  .proof-wall-bg { display: none; }
}

/* ==========================================================================
   VEREDELUNG RUNDE 2 — 03.08.2026
   Grundlage: Screenshot-Durchgang (9 Seiten x 360/768/1280/1920) plus
   gemessener DOM-Audit (Kontrast, Schriftgrade, Zeilenumbrueche, Overlaps,
   Touch-Targets, Grid-Restreihen). Jede Regel unten steht fuer einen
   belegten Befund, nicht fuer Geschmack. Der Block steht bewusst am
   Dateiende: gleiche Spezifitaet, spaetere Deklaration gewinnt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Kontrast: Akzentfarbe als Schrift
   Befund: Gold #c9921e als Textfarbe 2,58–2,89:1 (AA verlangt 4,5:1).
   Betroffen: Eyebrow, Tag, Status-Pill, Pfad-CTA, Credential, Radar-Readout,
   Route-Preview, Verb-Karte, Counter-Spalte, Marken-Wortmarke.
   Fix: --*-ink fuer Schrift, --accent bleibt Flaeche/Rahmen.
   -------------------------------------------------------------------------- */
.eyebrow { color: var(--accent-ink); }
.brand span { color: var(--gold-ink); }

.tag { background: var(--accent-ink); }
.tag-outline { color: var(--ink); background: transparent; border-color: var(--accent-line); }

.state-card small { background: var(--accent-ink); }
.path-card .path-for { color: var(--gold-ink); }
.path-card.path-bos .path-for { color: var(--blue-ink); }
.path-cta { color: var(--gold-ink); }
.path-card.path-bos .path-cta { color: var(--blue-ink); }
.credential b { color: var(--gold-ink); }
.counter-col.is-alt b { color: var(--accent-ink); }
.radar-readout b { color: var(--accent-ink); }
.radar-node.is-active { color: var(--accent-ink); }
.route-preview small { color: var(--accent-ink); }
.checkpoint.is-active { color: var(--accent-ink); }
.radar-stage::after, .process-map::after { color: var(--accent-ink); opacity: 1; }

.status-pill.is-wip { color: var(--amber-ink); background: rgba(168, 72, 15, .08); border-color: rgba(168, 72, 15, .34); }
.status-pill.is-soon { color: #275c49; background: rgba(39, 92, 73, .09); border-color: rgba(39, 92, 73, .32); }

/* Auf dunklem Grund gilt das Gegenteil: dort ist --gold-2 die lesbare Variante
   (8,1:1). Der Compliance-Rahmen im Offer-Panel erbte bisher --muted (#5c554c)
   fuer sein Label — das ergab 2,57:1 dunkelbraun auf dunkelblau, praktisch
   unlesbar. Belegt im Screenshot fahrschule-stillhalter@1280. */
.dark .eyebrow, .offer .eyebrow, .widget-intro .eyebrow { color: var(--gold-2); }
.dark .tag, .offer .tag { background: var(--gold-ink); color: #fffdf7; }
.dark .tag-outline, .offer .tag-outline { color: var(--gold-2); background: transparent; border-color: rgba(227, 178, 63, .5); }

/* --------------------------------------------------------------------------
   2 · Schriftgrade: die 12px-Flut
   Befund: 47 verschiedene Selektoren rendern Text mit 12px, einer mit 11px.
   Mono-Labels in Versalien sind bei 12px auf Papier der schlechteste Fall.
   Fix: Mono-/Label-Stufe auf 13px, Karten-Fliesstext von 15px auf 16px,
   Meta-/Fusszeilen von 13/14px auf 14/15px.
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 15px; letter-spacing: .085em; }
.tag, .status-pill { font-size: 15px; padding: 7px 12px; }
.status-pill { padding: 7px 13px; }
.state-card small { font-size: 15px; padding: 7px 11px; }
.path-card .path-for { font-size: 15px; }
.radar-stage::after, .process-map::after, .radar-readout b, .route-preview small,
.counter-col b, .doctrine-line, .zone-metric small,
.widget-card::before, .process-back b { font-size: 15px; }

.panel p, .problem-card p, .state-card p, .process-face p, .faq details p,
.widget-card p, .widget-card .reveal, .radar-readout span, .route-preview-rows span,
.route-preview-rows b { font-size: 16px; }

.trust b { font-size: 17px; }
.trust span { font-size: 15px; }
.zone > span { font-size: 15px; }
.zone-metric { font-size: 15px; }
.credentials-line { font-size: 15px; }
.path-meta .price-tag small { font-size: 15px; }
.quote-card figcaption, .proof-note { font-size: 15px; }
.signature-visual figcaption span, .squad-visual figcaption span { font-size: 15px; }
.contact-note { font-size: 15px; color: rgba(255, 253, 247, .72); }
.price small { font-size: 17px; color: rgba(255, 253, 247, .74); }
.offer-list li { font-size: 17px; color: rgba(255, 253, 247, .86); }
.footer { font-size: 15px; color: rgba(255, 253, 247, .72); }
.footer-brand p { font-size: 15px; color: rgba(255, 253, 247, .66); }
.footer-note { font-size: 15px; color: rgba(255, 253, 247, .62); }
.zone-metric small { letter-spacing: .06em; }
/* Die Pendants fuer Seitenkomponenten (.artifact-step, .level-card, .module-card,
   .image-readout, .verb-card, .fa-grid, .tool-card, .shop-card, .cockpit-radar)
   stehen in den jeweiligen Seiten-Stylesheets — die laden nach base.css und
   wuerden eine Korrektur an dieser Stelle wieder ueberschreiben. */

/* ENTFERNT 04.08.2026: Dieser Block schaltete fuer .trust b, .credentials-line,
   .founder-formula, .btn, .widget-card strong und die Kartenueberschriften
   wieder hyphens:auto + break-word ein und ueberschrieb damit die autoritative
   Wortintegritaets-Regel am Dateianfang. Alle genannten Selektoren sind dort
   jetzt enthalten. */

/* Versal gesetzte Mono-Labels duerfen nie wortintern brechen — dort gibt es
   keine Silbentrennung, der Bruch liest sich als Fehler. */
.tag, .status-pill, .eyebrow, .path-for, .zone-metric small, .module-card b,
.verb-card b, .artifact-step .num, .route-preview small, .radar-readout b {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   4 · Navigation: Overflow im Bereich 761 bis 1100px (Red-Team RT01, 06.09.2026:
   bei 1024px Laptopbreite lief die Linkzeile ueber, bis 1100px reichte auch eine
   kompakte Linkzeile nicht). Der Burger übernimmt bis 1100px. Link-Innenmaß und Touch-Ziel stehen
   autoritativ an der Basiskomponente.
   -------------------------------------------------------------------------- */
.footer-links a { padding: 5px 0; }
.footer-note a { padding: 4px 0; }
.footer-links { gap: 4px 24px; }

@media (max-width: 1100px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 18px;
    background: rgba(255, 253, 248, .98);
    border-bottom: 1px solid rgba(23, 21, 16, .1);
    box-shadow: 0 24px 40px rgba(34, 26, 12, .12);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { border-bottom: 1px solid rgba(216, 199, 173, .5); font-size: 17px; }
  .nav-cta { display: none; }
}

/* Red-Team RT01 (06.09.2026): zwischen 1101 und 1280px stand die volle
   Linkzeile plus CTA nicht in der Breite (Links brachen zweizeilig, CTA lief
   ueber den Rand). Kompakte Desktop-Stufe oberhalb des Burgers. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .nav-inner { gap: 14px; }
  .brand { font-size: 24px; }
  .nav-links { gap: 6px; font-size: 13.5px; }
  .nav-links a { padding: 11px 2px; white-space: nowrap; }
  .nav-cta { min-height: 44px; padding: 10px 10px; font-size: 14px; }
}

/* Mittlere Desktopstufe: bis etwa 1600px brachen die langen Linktexte
   ("Fahrschule Stillhalter", "Betriebssystem Optionen") zweizeilig um. */
@media (min-width: 1281px) and (max-width: 1600px) {
  .nav-inner { gap: 18px; }
  .brand { font-size: 28px; }
  .nav-links { gap: 12px; font-size: 14px; }
  .nav-links a { padding: 11px 4px; white-space: nowrap; }
  .nav-cta { padding: 11px 16px; font-size: 14px; }
}

/* Prozess-Karte: Drei Desktopspalten und 26px Spalt stehen an der
   Basiskomponente; hier folgen nur die Karten-Details. */
.process-step, .process-card-inner { min-height: 210px; }
.process-step::after { right: -22px; font-size: 26px; }
.process-step:nth-child(3n)::after, .process-step:last-child::after { content: ""; }
.process-front h3 { min-height: 0; margin-bottom: 10px; font-size: 21px; }
.process-front small { margin-bottom: 14px; }
.process-face { padding: 24px; }

/* --------------------------------------------------------------------------
   6 · Lagebild-Radar (Home): Kreis sprengte die Buehne
   Befund: .radar-core scrollWidth 408 > .radar-stage clientWidth 378 (1280)
   bzw. 288 > 264 (360). Der Kreis wurde beschnitten, die Knoten lagen auf dem
   Ring statt daneben, der untere Knoten stand im Readout.
   Fix: eigener .radar-board (Markup index.html), Readout im Fluss darunter,
   Knoten auf einer definierten Bahn ausserhalb des Kreises.
   -------------------------------------------------------------------------- */
.radar-board { position: relative; display: grid; place-items: center; min-height: 300px; }

.radar-core { width: min(56%, 260px); }

.radar-node {
  min-width: 96px;
  min-height: 46px;
  font-size: 15px;
  padding: 9px 12px;
}

.radar-node:nth-of-type(1) { left: 50%; top: 0; bottom: auto; transform: translateX(-50%); }
.radar-node:nth-of-type(2) { right: 0; left: auto; top: 50%; transform: translateY(-50%); }
.radar-node:nth-of-type(3) { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); }
.radar-node:nth-of-type(4) { left: 0; right: auto; top: 50%; transform: translateY(-50%); }

.radar-node:nth-of-type(1):hover, .radar-node:nth-of-type(1):focus-visible,
.radar-node:nth-of-type(3):hover, .radar-node:nth-of-type(3):focus-visible { transform: translateX(-50%) translateY(-2px); }
.radar-node:nth-of-type(2):hover, .radar-node:nth-of-type(2):focus-visible,
.radar-node:nth-of-type(4):hover, .radar-node:nth-of-type(4):focus-visible { transform: translateY(-50%) translateY(-2px); }

.radar-readout { position: static; margin: 0; padding: 16px 20px; }

/* --------------------------------------------------------------------------
   7 · Restreihen in Rastern
   Befund: sieben Elemente in einem auto-fit-Raster ergaben 5+2 (Ausbildungs-
   lehre Home), 3+1 in Zweispaltern (FAQ, Werkzeuge, Sequenz) und 4+3
   (Artefakt-Kette bei 768). Eine angebrochene Reihe liest sich als Fehler.
   Fix: Flex mit zentrierter Restreihe bzw. volle Breite fuer das letzte Feld.
   -------------------------------------------------------------------------- */
.state-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.state-grid > * { flex: 0 1 calc(25% - 10.5px); min-width: 230px; }

.faq-grid > details:last-child:nth-child(odd),
.widget-board > .widget-card:last-child:nth-child(odd),
.sequence-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   8 · Ueberlagerungen und Leerflaechen
   Befund a: .problem-card::after (Deko-Kreis 72px) lag im Fliesstext der
   Karten 01 und 02 (betriebssystem-optionen@1280). Ersatzlos gestrichen —
   die Ziffer im .em-Kreis ist bereits der Anker der Karte.
   Befund b: .offer-actions, .route-preview und .widget-card wurden auf
   Zeilenhoehe gestreckt und standen dann zu ~40 % leer.
   -------------------------------------------------------------------------- */
.problem-card::after { display: none; }
.problem-card { min-height: 0; }
.problem-card em { margin-bottom: 20px; }

.route-preview { align-self: start; }
.widget-card { min-height: 0; padding: 24px; }
.widget-card p, .widget-card .reveal { max-width: 62ch; }

/* --------------------------------------------------------------------------
   9 · Trefferflaechen und Bedienelemente
   Befund: .footer-note a 25x15px, .footer-links a 120x22px,
   .cockpit-radar .radar-node 41x37px, .checkpoint 42x42px — alle unter 44px.
   -------------------------------------------------------------------------- */
.checkpoint { width: 46px; height: 46px; font-size: 15px; }

/* --------------------------------------------------------------------------
   10 · Karten-Innenmasse
   Befund: die Zellen der Rollen-Karten (.zone-metric) fassten 12px-Versal-
   Label plus 13px-Wert in 72px Hoehe — das Label "PREISSCHILD" stand dabei
   fast randbuendig.
   -------------------------------------------------------------------------- */
.zone-metric { min-height: 82px; padding: 12px 13px; }
.zone { padding: 22px; }
.zone-grid { gap: 10px; }
.trust { padding: 24px 22px; }
.panel { padding: 26px; }
.state-card { padding: 20px; }
.credential { padding: 24px; }

/* --------------------------------------------------------------------------
   11 · Breiten und Lesemasse
   Der Container ist von 1160px auf 1320px gewachsen. Damit "breiter" nicht
   in "zu lange Zeilen" umschlaegt, bleiben die reinen Textbloecke gedeckelt.
   .section-head/.section-head p/.lead sind jetzt an ihrer Basisregel
   konsolidiert (Runde 3) statt hier ein drittes Mal ueberschrieben zu werden. */
.faq details p { max-width: 78ch; }
.counter-col li { font-size: 17px; }
/* --------------------------------------------------------------------------
   12 · Responsive-Nachfuehrung der Runde-2-Regeln
   Die Bloecke oben stehen hinter den Original-Media-Queries und wuerden sie
   sonst ueberschreiben. Hier werden die Schmalbreiten neu gesetzt.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .process-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-bos .problem-card h3 { font-size: 21.5px; }
  .process-step:nth-child(3n)::after { content: "→"; }
  .process-step:nth-child(2n)::after, .process-step:last-child::after { content: ""; }
  .state-grid > * { flex: 0 1 calc(33.333% - 9.34px); }
  .offer { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1320px); }
  .process-map { grid-template-columns: 1fr; gap: 18px; padding: 26px 20px; }
  .process-step::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); font-size: 26px; }
  .process-step:nth-child(3n)::after, .process-step:nth-child(2n)::after { content: "↓"; }
  .process-step:last-child::after { content: ""; }
  .process-step:not(:last-child) { margin-bottom: 18px; }
  .state-grid > * { flex: 1 1 100%; min-width: 0; }
  .radar-stage { min-height: 460px; padding: 30px 14px 14px; }
  .radar-board { min-height: 250px; }
  /* Kreis und Knoten duerfen sich auf 360px nicht beruehren: Board ~304px,
     Knoten 78px je Seite -> Kreis darf hoechstens 140px breit sein. */
  .radar-core { width: min(42%, 132px); }
  .radar-node { min-width: 78px; min-height: 44px; padding: 8px 9px; font-size: 15px; letter-spacing: .03em; }
  .eyebrow { font-size: 15px; }
  .offer-list li, .counter-col li, .contact-note { font-size: 16px; }
  .price small { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   12b · Ausbildungslehre (Home): Schritt-Pfad statt loser Kartenreihe
   Bühne im process-map-Look (gleicher Rasterhintergrund/Rahmen wie das
   Sechs-Schritte-Modul auf Betriebssystem Optionen) für Wiedererkennung.
   Nummerierte Kreis-Marker + Pfeil-Konnektoren zwischen den Karten machen
   die Schrittfolge als Pfad lesbar, statt als unverbundene Kartenreihe.
   Nur unter #ansatz (Home) — .state-card/.state-grid laufen unveraendert
   auf drei weiteren Seiten ohne Pfad-Bedeutung.
   -------------------------------------------------------------------------- */
#ansatz .path-stage {
  padding: 34px 30px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(201, 146, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 146, 30, .045) 1px, transparent 1px),
    rgba(255, 253, 248, .82);
  background-size: 30px 30px;
  box-shadow: 0 34px 76px rgba(34, 26, 12, .13);
}

#ansatz .state-card { position: relative; padding-top: 22px; }

#ansatz .state-step {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--gold-2);
  color: #191610;
  font-family: var(--mono);
  font-weight: 760;
  font-size: 15px;
  box-shadow: 0 0 0 6px var(--accent-soft);
  transition: background .22s ease, box-shadow .22s ease;
}

#ansatz .state-card small {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  background: none;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#ansatz .state-card.is-active .state-step { background: var(--gold); box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 2px var(--gold); }

/* Pfeil-Konnektor: Standard 4 Karten/Reihe (>1040px) — Reihenenden (jede
   vierte Karte) und die letzte Karte bleiben ohne Pfeil. */
#ansatz .state-card::after {
  content: "→";
  position: absolute;
  top: 30px;
  right: -19px;
  z-index: 1;
  color: var(--gold);
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
  pointer-events: none;
}

#ansatz .state-card:nth-child(4n)::after, #ansatz .state-card:last-child::after { content: ""; }

@media (max-width: 1040px) {
  /* .state-grid wechselt hier auf 3 Karten/Reihe (Regel 12/Runde-2) —
     Reihenenden verschieben sich entsprechend. */
  #ansatz .state-card:nth-child(4n)::after { content: "→"; }
  #ansatz .state-card:nth-child(3n)::after, #ansatz .state-card:last-child::after { content: ""; }
}

@media (max-width: 760px) {
  /* .state-grid wechselt hier auf eine Karte/Reihe — Pfeil zeigt nach unten. */
  #ansatz .path-stage { padding: 26px 20px; }
  #ansatz .state-card::after {
    content: "↓";
    top: auto;
    right: auto;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
  }
  #ansatz .state-card:nth-child(3n)::after, #ansatz .state-card:nth-child(4n)::after { content: "↓"; }
  #ansatz .state-card:last-child::after { content: ""; }
  #ansatz .state-grid { gap: 30px 14px; }
}

/* --------------------------------------------------------------------------
   13 · Inline-Farben abgeloest
   Befund: Textlinks im Fliesstext trugen style="color:var(--gold)" — auf
   Cremegrund 2,71:1. Zugleich blockieren Inline-Styles eine spaetere CSP.
   Ersetzt durch Klassen mit den geprueften Ink-Stufen.
   -------------------------------------------------------------------------- */
.link-accent, .link-bos { font-weight: 760; border-bottom: 1px solid currentColor; }
.link-accent { color: var(--gold-ink); }
.link-bos { color: var(--blue-ink); }
.link-accent:hover, .link-accent:focus-visible,
.link-bos:hover, .link-bos:focus-visible { color: var(--ink); }
.dark .link-bos, .offer .link-bos { color: var(--blue-2); }
/* .counter-col.is-alt ist ein HELLER Kasten — blue-2 ergaebe dort 3,38:1.
   Korrektur eines Fehlers aus dieser Runde, gemessen im Nachlauf-Audit. */
.counter-col.is-alt .link-bos { color: var(--blue-ink); }
strong.ink { color: var(--ink); }
.shop-price.is-bos { color: var(--blue-ink); }

/* --------------------------------------------------------------------------
   14 · <figure> als Rahmenelement
   Befund: .signature-visual-frame ist auf index/fahrschule/markt ein <figure>,
   auf betriebssystem/ueber-markus ein <div>. Der Browser-Default des figure
   (margin: 1em 40px) machte das Signature-Bild dort 80px schmaler und
   verschob es vertikal — dieselbe Komponente, zwei Groessen.
   -------------------------------------------------------------------------- */
.signature-visual-frame, .signature-visual > figure { margin: 0; }

/* --------------------------------------------------------------------------
   15 · Trust-Reihe und Doktrin-Zeile
   Befund a: drei feste Spalten in einer Hero-Halbspalte ergaben 165–186px je
   Karte. "Entscheidungsfähigkeit" braucht bei 17px rund 200px — der Browser
   brach das Wort. Jetzt umbruchfaehiges Raster ab 210px Kartenbreite,
   zusaetzlich weiche Trennstellen im Markup als dictionary-unabhaengige
   Absicherung (Chromium hyphenisiert nur mit installiertem de-Woerterbuch).
   Befund b: die Trennpunkte der Doktrin-Zeile waren echte Zeichen und blieben
   beim Umbruch als "ENTSCHEIDUNG ·" am Zeilenende haengen. Ein Rahmen kann
   nicht umbrechen.
   -------------------------------------------------------------------------- */
/* .trust-row-Regeln von hier nach oben in die autoritative Basisregel
   verschoben (Konsolidierung 04.08.2026) — Begruendung dort. */

.doctrine-line { gap: 8px 0; }
.doctrine-line span { padding-right: 15px; margin-right: 15px; border-right: 1px solid var(--accent-line); }
.doctrine-line span::after { content: none; }
.doctrine-line span:last-child { padding-right: 0; margin-right: 0; border-right: none; }

/* --------------------------------------------------------------------------
   16 · Status-Pills und Preis-Panel auf dunklem Grund
   Befund (visuelle Pruefung Offer-Panel, betriebssystem-optionen@1280): die
   Pill "Checkout oeffnet mit dem Shop-Start" stand in Dunkelgruen auf
   Dunkelblau — rund 2:1. Der DOM-Audit hatte das nicht gemeldet, weil das
   Panel seinen Grund per Verlauf traegt und die Messung dort auf Weiss
   zurueckfaellt. Auf hellem Grund gilt weiter die dunkle Stufe.
   Zweitens: die Aktionsspalte stand zu rund 40 % leer. Als gerahmtes
   Preis-Panel traegt dieselbe Flaeche eine Aussage statt einer Luecke.
   -------------------------------------------------------------------------- */
.dark .status-pill.is-soon, .offer .status-pill.is-soon {
  color: #7fd0ab;
  background: rgba(127, 208, 171, .12);
  border-color: rgba(127, 208, 171, .38);
}

.dark .status-pill.is-wip, .offer .status-pill.is-wip {
  color: #f0a06a;
  background: rgba(240, 160, 106, .12);
  border-color: rgba(240, 160, 106, .38);
}

.offer-actions .price { margin-top: 0; }

@media (max-width: 760px) {
  .offer-actions { padding: 20px; }
}

/* --------------------------------------------------------------------------
   17 · Pruefstrecke: Checkpoints lagen nicht auf der Strecke
   Befund (Screenshot fahrschule-stillhalter@1280): Checkpoint 02 stand 8,5 und
   Checkpoint 06 rund 20 Prozentpunkte neben dem zugehoerigen Segmentende des
   SVG-Pfades. Zusaetzlich lief der Pfad als geschlossene Schlaufe von 06
   zurueck nach 01 — eine Lernstrecke hat einen Anfang und ein Ende, kein
   Rundkurs. Beides im Markup korrigiert (Pfaddaten und --x/--y).
   Hier nur die Buehnenhoehe: die Vorschau haengt seit align-self:start an
   ihrem Inhalt, die alten 460px liessen den unteren Drittel leer stehen.
   -------------------------------------------------------------------------- */
.route-stage { min-height: 400px; }
.route-board { min-height: 340px; }

/* --------------------------------------------------------------------------
   18 · Trefferflaechen, zweiter Durchgang
   Nach Runde 1 lagen noch fuenf echte Ziele unter 44px. Nicht gewertet sind
   Inline-Textlinks im Fliesstext (a.link-bos / a.link-accent) — WCAG 2.5.8
   nimmt Links im Satzfluss ausdruecklich aus, ein groesseres Ziel wuerde dort
   den Zeilenabstand sprengen.
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a { padding: 10px 7px; margin: 0 -7px; }
.footer-note a { display: inline-block; padding: 10px 9px; margin: 0 -9px; }

/* --------------------------------------------------------------------------
   19 · Bildausschnitt der Signature-Visuals
   --------------------------------------------------------------------------
   Diese Klassen definieren den ausgespielten Bildausschnitt der drei
   Signature-Bilder. Die Rohdateien sind im Seitenverhaeltnis groesser als der
   gestalterisch genutzte Ausschnitt; die Bereiche ausserhalb werden nicht
   ausgespielt. Owner-Entscheidung 04.08.2026: Inhalte ausserhalb des
   gerenderten Ausschnitts sind kein Frontendbefund. Massgeblich ist allein
   das gerenderte Ergebnis bei 375/430/768/1108/1280/1440px.

     is-cropped-bottom  betriebssystem-signature-cockpit.webp,
                        markt-signature-terminal.webp   (2752x1336)
     is-cropped-tall    fahrschule-signature-path.webp  (2752x960,
                        Panoramaschnitt auf den bebilderten Bereich)
   -------------------------------------------------------------------------- */
.signature-visual-frame.is-cropped-bottom { aspect-ratio: 2752 / 1336; }
.signature-visual-frame.is-cropped-tall { aspect-ratio: 2752 / 960; }

.signature-visual-frame.is-cropped-bottom img,
.signature-visual-frame.is-cropped-tall img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   HAERTUNG 01.09.2026 — CSP ohne 'unsafe-inline', Fokus, Skip-Link
   Grundlage: Abnahme-Durchgang ueber alle neun Seiten. Der Block steht
   bewusst am Dateiende: gleiche Spezifitaet, spaetere Deklaration gewinnt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20 · Inline-Styles abgeloest (CSP-Schritt "style-src 'self'")
   Alle 50 style=""-Attribute des Markups sind in Klassen ueberfuehrt.
   Werte 1:1 uebernommen — dieser Schritt aendert keine Optik, er entfernt
   die letzte Abhaengigkeit von 'unsafe-inline' in der Content-Security-
   Policy (_headers). Reine Abstands-Offsets als dokumentierte u-Utilities,
   alles mit Komponentencharakter als benannte Klasse.
   -------------------------------------------------------------------------- */
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-26 { margin-top: 26px; }
.u-mt-28 { margin-top: 28px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-44 { margin-top: 44px; }
.u-mt-52 { margin-top: 52px; }
.u-mt-56 { margin-top: 56px; }

/* Kompakter Fusszeilen-Modus der Utility-Seiten (Impressum, Datenschutz,
   Kontakt): nur die Notiz-Zeile, ohne Trennlinie und Grid darueber. */
.footer-note.is-bare { border: 0; margin: 0; padding: 0; }

/* Panel mit Text links und Aktions-Button rechts (Shop, Ueber-Markus, Kontakt) */
.panel-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.panel-cta h4 { margin-bottom: 4px; }
.panel-cta p { margin: 0; font-size: 15px; }

/* Nebeneinanderstehende Buttons ausserhalb des Hero (ersetzt Inline-Flex) */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kontakt-Panel: Absatzstufen des Support-Kastens */
.panel-contact p { margin: 0 0 10px; font-size: 15.5px; }
.panel-contact p:last-child { margin: 0; font-size: 15px; }

/* Brueckensatz zwischen Sektionen (Fahrschule -> Betriebssystem) */
.bridge-line { font-size: 18px; }

/* Home: Credential-Reihe unter dem Founder-Split nimmt die volle Rasterbreite.
   Nur als Direktkind — die BOS-Seite traegt ihr Credential-Grid verschachtelt
   in der Textspalte und bleibt unberuehrt. */
.markus-card > .credential-grid { grid-column: 1 / -1; }

/* Pruefstrecken-Checkpoints (Fahrschule): Positionsdaten aus dem Markup
   hierher ueberfuehrt. nth-of-type zaehlt nur die <button>-Geschwister —
   das <svg> davor ist ein anderer Elementtyp. Reihenfolge = Modulfolge. */
.route-board .checkpoint:nth-of-type(1) { --x: 8%;    --y: 18%; }
.route-board .checkpoint:nth-of-type(2) { --x: 48%;   --y: 21%; }
.route-board .checkpoint:nth-of-type(3) { --x: 90%;   --y: 15%; }
.route-board .checkpoint:nth-of-type(4) { --x: 68%;   --y: 63%; }
.route-board .checkpoint:nth-of-type(5) { --x: 35%;   --y: 80%; }
.route-board .checkpoint:nth-of-type(6) { --x: 9.7%;  --y: 51.5%; }

/* --------------------------------------------------------------------------
   21 · Sichtbarer Tastatur-Fokus fuer alle interaktiven Karten und Knoten
   Befund: .radar-node/.checkpoint/.state-card/.zone setzten bei
   :focus-visible outline:none — der Hover-Ersatz (Anheben, Randfarbe) ist
   fuer Tastaturnutzer zu schwach bzw. bei den Radar-Knoten unsichtbar.
   Gleiche Spezifitaet wie die Ursprungsregeln, spaetere Deklaration gewinnt.
   -------------------------------------------------------------------------- */
.radar-node:focus-visible,
.checkpoint:focus-visible,
.state-card:focus-visible,
.zone:focus-visible,
.process-step:focus-visible,
.widget-card:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* Auf dunklem Grund braucht der Ring die helle Stufe. */
.dark .zone:focus-visible,
.cockpit-radar .radar-node:focus-visible {
  outline-color: var(--gold-2);
}

/* --------------------------------------------------------------------------
   22 · Skip-Link (WCAG 2.4.1 — Bloecke ueberspringen)
   Erstes fokussierbares Element jeder Seite; sichtbar nur bei Fokus.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 13px 20px;
  border-radius: 0 0 var(--radius) 0;
  background: var(--ink);
  color: #fffdf7;
  font-weight: 760;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--gold-2);
  outline-offset: -2px;
}