/* kw-bundle-quellen: css/style.css, css/custom.css */
/* Erzeugt von css-bundeln.py. Nicht von Hand bearbeiten —
   Änderungen gehören in die Quelldateien, dann erneut ausführen. */
/* ── css/style.css ── */
/* Baukasten-Container: erzeugt keine eigene Layout-Box */
.ws-block{display:contents}
[data-kw-bg][style*="url("] > .beschriftung{display:none}
/* Modifier: Überlappung oben (universell). Skala 2026-07-17 verdreifacht (User: alter groß-Wert
   = neues klein). Hintergrund wird automatisch transparent (Wurzel + äußeres <section>-Band),
   damit z.B. das Hero-Bild hinter der überlappenden Section sichtbar bleibt — innere Karten/
   Flächen behalten ihre eigenen Hintergründe. */
[data-m-ueberlappung="klein"]{margin-top:-96px;position:relative;z-index:1}
[data-m-ueberlappung="mittel"]{margin-top:-192px;position:relative;z-index:1}
[data-m-ueberlappung="gross"]{margin-top:-288px;position:relative;z-index:1}
[data-m-ueberlappung]{background:transparent !important}
[data-m-ueberlappung] > section{background:transparent !important}
@media(max-width:700px){[data-m-ueberlappung]{margin-top:0}}
/* Modifier: Breite (universell). full-bleed = randlos über volle Breite. Greift über die
   DS-Konvention .container{max-width:var(--container-max);padding-inline:var(--container-px)}:
   die beiden Custom-Properties werden auf der Wurzel gekippt und von .container (Wurzel ODER
   verschachtelt) geerbt — kein Section-Rewrite nötig, contained bleibt Default (kein Stempel). */
[data-m-breite="full-bleed"]{--container-max:none;--container-px:0px}
/* width:100%: in flex/grid-Eltern (z.B. Hero display:flex) ist .container ein Item und
   würde content-sized bleiben (Rest-Rand trotz max-width:none) — Block-Fall: no-op. */
[data-m-breite="full-bleed"] .container{width:100%}
/* Modifier: Höhe (code-gegatet, Pilot: Hero). Brücke data-m-hoehe → --m-heroh (vh-Stufe).
   Section-CSS nutzt calc(var(--m-heroh, 85) * 1vh - 68px); mittel(85)=Ist → ohne Stempel identisch. */
[data-m-hoehe="schmal"]{--m-heroh:60}
[data-m-hoehe="mittel"]{--m-heroh:85}
[data-m-hoehe="hoch"]{--m-heroh:100}
/* Modifier: Spalten (code-gegatet: Karten-Grids). Brücke data-m-spalten → --m-spalten;
   Section-CSS: grid-template-columns:repeat(var(--m-spalten, N), 1fr) — N=Ist=Default. */
[data-m-spalten="1"]{--m-spalten:1}
[data-m-spalten="2"]{--m-spalten:2}
[data-m-spalten="3"]{--m-spalten:3}
[data-m-spalten="4"]{--m-spalten:4}
[data-m-spalten="5"]{--m-spalten:5}
[data-m-spalten="6"]{--m-spalten:6}
/* Modifier: Ausrichtung (code-gegatet: Medium↔Content-Splits). Das Medium-Element konsumiert
   order:var(--m-ausr-media, 0): links=-1 (vor den Text), rechts=2 (dahinter). Default 0 =
   CSS-Initialwert → no-op. <960px stapeln die Splits → Original-Reihenfolge (Reset). */
[data-m-ausrichtung="links"]{--m-ausr-media:-1}
[data-m-ausrichtung="rechts"]{--m-ausr-media:2}
@media(max-width:960px){[data-m-ausrichtung]{--m-ausr-media:0}}
/* Modifier: Overlay-Nav (code-gegatet NAV). Legt die transparente Nav über den Hero DARUNTER.
   Die Nav nimmt keine eigene Höhe mehr ein (position:absolute), der Hero behält seine volle Höhe
   und scrollt darunter. hell/dunkel setzen nur die Schriftfarbe (--m-nav-fg); der Grund wird
   transparent (--m-nav-bg). „aus" wird nie gestempelt → Nav bleibt ihre solide Default-Leiste.
   Die Nav-Section MUSS --m-nav-bg (Grund) und --m-nav-fg (Text) in ihrem CSS konsumieren. */
[data-m-overlay="hell"],[data-m-overlay="dunkel"]{position:absolute;inset:0 auto auto 0;width:100%;z-index:20;--m-nav-bg:transparent}
[data-m-overlay="hell"]{--m-nav-fg:var(--c-white)}
[data-m-overlay="dunkel"]{--m-nav-fg:var(--t-primary)}

html.dsjs [data-animate],html.dsjs .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1))}html.dsjs [data-animate].visible,html.dsjs .reveal.visible{opacity:1;transform:none}html.dsjs [data-animate="stagger-children"]{opacity:1;transform:none;transition:none}html.dsjs [data-animate="stagger-children"]>*{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1));transition-delay:var(--stagger-delay,0ms)}html.dsjs [data-animate="stagger-children"].visible>*{opacity:1;transform:none}
/* ============================================================
   KUNDENWACHSTUM · DESIGN-SYSTEM (Baukasten)
   Token-basiert · rem-Typo · selbst-gehostete Fonts (DSGVO)
   ------------------------------------------------------------
   Kaskade beim Bau:  [Web-Guidelines :root des Kunden]  ⟶  gewinnt
                      ┌ diese Datei liefert Fallbacks + Aliase + Struktur
   D. h. alle Marken-Werte (Farbe/Font/Radius) kommen pro Kunde aus der
   Engine (?tokens=<domain>) und überschreiben die Fallbacks unten.
   Klassennamen bewusst wie gehabt (FLOW1), damit bestehende Sections passen.
   ============================================================ */

/* ── 00  FONTS · selbst gehostet (DSGVO-konform, kein Google-CDN) ──
   .woff2 als „Website-Dateien" hochladen → landen im Export unter fonts/.
   Pro Kunde mit eigener Schrift: dessen .woff2 hochladen + @font-face ergänzen. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/open-sans-400.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/open-sans-600.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/open-sans-700.woff2") format("woff2");}

/* ── 01  TOKENS ──
   Nur FALLBACKS + Aliase + strukturelle (nicht-Marken-)Skalen.
   Marken-Tokens (--c-*, --t-primary/-secondary, --font-*, --fw-*, --fs-*,
   --r-*, --bw-*, --sp-*) liefert die Engine pro Kunde und gewinnt. */
:root{
  /* Fallback-Marke (greift nur bei Kunden OHNE Web-Guidelines) */
  --c-primary:#1e76c2; --c-primary-mid:#144f81; --c-primary-dark:#0a2741;   /* FLOW1: Akzent · Mid=Hover · Dark=Pressed */
  --c-secondary:#0a1642; --c-secondary-mid:#070f2c; --c-secondary-dark:#030716; /* FLOW1: tragende Grundfarbe/Grundton (häufigste Fläche). Luminanz ist KUNDENABHÄNGIG — Text auf Rollen-Flächen NUR via --c-on-* */
  --c-tertiary:#5c6e94; --c-tertiary-mid:#3d4963; --c-tertiary-dark:#1f2531;  /* FLOW1: ruhige Zwischentöne */
  --c-neutral:#d1d2d5; --c-neutral-mid:#8b8c8e; --c-neutral-dark:#464647; --c-neutral-light:#f0f0f1; /* FLOW1 */
  --c-white:#ffffff; --c-black:#000000;
  --t-primary:var(--c-secondary); --t-secondary:var(--c-tertiary-mid); /* Text referenziert Rollen (FLOW1 Text: Secondary) */

  /* Semantische Aliase — zeigen die ROLLE (recolorn automatisch mit den Basis-Tokens) */
  --c-surface:        var(--c-white);                                   /* Standard-Seitengrund */
  --c-surface-subtle: var(--c-neutral-light);                           /* leicht abgesetzte Section / Feldgrund */
  --c-surface-muted:  var(--c-neutral);                               /* stärker abgesetzte Fläche */
  --c-field:          var(--c-white);                                   /* Formularfeld-Hintergrund */
  --c-border:         color-mix(in srgb, var(--t-primary) 12%, transparent); /* feine Linien */
  --c-fill:           var(--c-tertiary);                                /* kontrastierende Vollfläche */
  --t-muted:          var(--c-neutral-dark);                            /* früher --t-neutral */
  --t-tertiary:       var(--c-primary-dark);                            /* Alt-Alias, falls noch referenziert */

  /* Typo (rem/fluid; Kunde kann --fs-hN via Guidelines überschreiben) */
  --font: var(--font-body, "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  --fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --lh-heading:1.3 /* FLOW1 (~1.3; visuelle Abnahme offen) */;
  --lh-body: 1.6;

  /* Radius / Rahmen */
  --r-card:16px /* FLOW1 */; --r-sm:12px; --r-btn: 8px; --r-pill: 9999px;
  --bw: var(--bw-card, 2px);          /* generische Rahmenbreite (früher --border-w) */

  /* Spacing — EINE rem-Skala: die Engine liefert --sp-1..9 in rem
     (.25/.5/.75/1/1.5/2/3/4/6 rem = 4/8/12/16/24/32/48/64/96px).
     Semantische Abstands-Tokens = die ROLLE, IMMER gleich (das nutzt Claude bevorzugt): */
  --space-inline:      var(--sp-2, .5rem);   /* Icon↔Text, kleine Zeilen-Gaps */
  --space-stack:       var(--sp-4, 1rem);    /* Headline↔Paragraph, Standard-Vertikalabstand */
  --space-stack-lg:    var(--sp-5, 1.5rem);  /* M3: 24, vorher 32 */     /* Abstand zwischen Text-Gruppen */
  --space-card-pad:    var(--sp-4, 1rem);    /* M3: 16 — KOMPAKTE Karten (Icon+Titel, Preis, Akkordeon) */
  --space-card-pad-lg: var(--sp-6, 2rem);    /* M3-Erg. 2026-07-24: INHALTS-Karten (Text-Body/Zitat/vollbreit) — Inset folgt Flächen-Rolle */
  --space-card-pad-xl: var(--sp-7, 3rem);    /* M3-Erg. 2026-07-25: RIESEN-Karten (vollbreit/Solitär, nahtlose Panel-Hälften) */
  --space-field-gap:   var(--sp-4, 1rem);    /* M3: 16, vorher 24 */   /* Abstand zwischen Formularfeldern */
  --space-head-gap:    var(--sp-7, 3rem);    /* Section-Kopf → Inhalt (Head-Block → Grid/Cards/Liste) */
  --space-list-gap:    var(--sp-2, .5rem);   /* M3: 8, vorher 12 */   /* Listen-Rhythmus: Checklisten, Link-Listen, FAQ-Items */
  --space-card-gap:    var(--sp-4, 1rem);    /* M3: 16, vorher 12 */   /* Elemente im Card-Body untereinander (Titel/Text/Meta) */
  --space-seg-gap:     .25rem;               /* Segment-/Pill-Leisten: Tabs/Toggles/Filter in einer Pille */
  --section-py:        var(--sp-9, 6rem);    /* Section oben/unten — stuft an Breakpoints (s. u.) */

  /* FLOW1-Namen als Aliase auf die Skala (bestehende Regeln laufen weiter) */
  --sp-xxs:var(--sp-3,.75rem); --sp-xs:var(--sp-5,1.5rem); --sp-sm:var(--sp-6,2rem); --sp-md:var(--sp-7,3rem); --sp-lg:var(--sp-8,4rem); --sp-xl:var(--sp-9,6rem); --sp-xxl:8rem;
  --mg-xxs:var(--sp-2,.5rem); --mg-xs:var(--sp-3,.75rem); --mg-sm:var(--sp-4,1rem); --mg-md:var(--sp-5,1.5rem); --mg-lg:var(--sp-6,2rem); --mg-xl:var(--sp-7,3rem); --mg-xxl:var(--sp-8,4rem);
  --gap-btn:var(--sp-4,1rem); /* Button-Gap-Rolle (aktiv, vom .btn genutzt) */
  --gap-main:2.5rem /* DEPRECATED (M3 2026-07-24): 40 ist kein M3-Wert → --grid-gutter/--sp-* nutzen */; --gap-md:1.25rem /* DEPRECATED: 20 → Rolle je Kontext */; --gap-sm:var(--sp-2,.5rem); /* DEPRECATED: Dublette von --space-inline */

  /* Layout / Struktur */
  --container-max:1248px; --container-px:24px; --grid-gutter:24px; /* M3 2026-07-24: Gutter 24 KONSTANT (16 mobil), Rand 24 (16 mobil); Content bleibt 1200 = 1248 - 2x24 */
  --nav-h:72px;   /* Höhe der Navigation (statt Magic-Number wie calc(85vh - 68px)) */

  /* ══ M3-LÜCKENSCHLUSS (2026-07-24) — rein additiv; Details: design-system/M3-TOKEN-GAP.md ══ */
  --space-text-pair:   var(--sp-2, .5rem);   /* NEU: Text-Paar — Kicker↔Head, Titel↔Body (8) */
  --c-primary-container:      color-mix(in srgb, var(--c-primary) 12%, var(--c-white));
  --c-on-primary-container:   var(--c-primary-dark);
  --c-secondary-container:    color-mix(in srgb, var(--c-secondary) 10%, var(--c-white));
  --c-on-secondary-container: var(--c-secondary-dark);
  --c-tertiary-container:     color-mix(in srgb, var(--c-tertiary) 12%, var(--c-white));
  --c-on-tertiary-container:  var(--c-tertiary-dark);
  --c-outline:         color-mix(in srgb, var(--t-primary) 24%, transparent);
  --c-outline-variant: var(--c-border);
  --c-inverse-surface:      var(--c-secondary-dark);
  --c-inverse-on-surface:   var(--c-white);
  --c-inverse-on-surface-2: color-mix(in srgb, var(--c-white) 78%, transparent);
  --fs-quote: clamp(1.375rem, 1.2rem + .75vw, 1.75rem); /* T10 Display-Zitat 22->28 */
  --fs-title-lg: 1.25rem; --fs-title: 1.125rem; --fs-title-sm: 1rem;
  --fs-body-sm: .875rem; --fs-label: 1rem; --fs-label-sm: .875rem;
  --lh-title: 1.35; --lh-label: 1.4;
  --sp-20: 1.25rem; --sp-40: 2.5rem; --sp-56: 3.5rem; --sp-80: 5rem;
  --shadow-lg: 0 16px 48px color-mix(in srgb, var(--c-secondary) 16%, transparent);
  --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms;
  --ease-standard:   cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1);

}

/* ═══ Phase 0 (2026-07-17): FLOW1-Fundament — Basisleiter, Typo-Skala, Weights, Status, Schatten ═══
   Kontexte: Spacer --sp-* = Section/Block · Margin --mg-* = Text-Rhythmus · Gap --gap-* = Elemente.
   Einheiten: rem für Typo/Abstände; px nur für Border/Radius/Hairlines. Gewichte: nur 400/600/700. */
:root{
  /* Numerische Basisleiter (Spacer/Margin/Gap referenzieren diese) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  /* Typo-Skala: FLOW1-Eckwerte (Mobil 393 → Desktop 1440) fluid via clamp */
  --fs-h1:clamp(2rem, 1.63rem + 1.52vw, 3rem);       /* 32 → 48 */
  --fs-h2:clamp(1.75rem, 1.56rem + .76vw, 2.25rem);  /* 28 → 36 */
  --fs-h3:clamp(1.5rem, 1.41rem + .38vw, 1.75rem);   /* 24 → 28 */
  --fs-h4:clamp(1.25rem, 1.16rem + .38vw, 1.5rem);   /* 20 → 24 */
  --fs-h5:clamp(1.125rem, 1.08rem + .19vw, 1.25rem); /* 18 → 20 */
  --fs-h6:clamp(1rem, .95rem + .19vw, 1.125rem);     /* 16 → 18 */
  --fs-body:1rem;                                    /* 16 */
  --fw-regular:400; --fw-semibold:600; --fw-bold:700;

  /* Farb-Ergänzungen (FLOW1-abgeleitet, branding-sicher via color-mix) */
  --c-primary-light:color-mix(in srgb, var(--c-primary) 22%, var(--c-white)); /* Tints/Disabled */
  --c-on-primary:var(--c-white); --c-on-secondary:var(--c-white); --c-on-tertiary:var(--c-white); --c-on-fill:var(--c-white); /* DS-Default für FLOW1-Palette — der Guidelines-Import berechnet on-* pro Kunde per WCAG-Luminanz */
  --c-success:#2f7d4f; --c-success-bg:color-mix(in srgb, #2f7d4f 12%, var(--c-white));
  --c-error:#c0392b;   --c-error-bg:color-mix(in srgb, #c0392b 12%, var(--c-white));

  /* Schatten (dezent, zur 2px-Border-Ästhetik passend) */
  --shadow-sm:0 2px 8px color-mix(in srgb, var(--c-secondary) 8%, transparent);
  --shadow-md:0 8px 28px color-mix(in srgb, var(--c-secondary) 12%, transparent);
}

/* ── BREAKPOINTS (Desktop-First; @media = max-width) — an EINER Stelle dokumentiert ──
   Desktop ≥ 1025px → Basis-Styles (ohne Query), 12-Spalten-Grid
   Tablet ≤ 1024px → 8-Spalten-Grid
   Mobile   ≤  767px  → 4-Spalten-Grid
   In @media-Bedingungen sind CSS-Variablen technisch nicht nutzbar → feste px, hier zentral gepflegt. */
@media (max-width:1024px){ :root{ --section-py:var(--sp-8,4rem); } }  /* M3: Gutter bleibt 24 */
@media (max-width: 767px){ :root{ --section-py:var(--sp-7,3rem); --grid-gutter:16px; --container-px:16px; } }  /* M3 Compact */

/* Alt-Namen weiterhin gültig (keine Section muss angefasst werden) */
:root{ --border-w: var(--bw); --t-neutral: var(--t-muted); }

/* ── 02  RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:1rem; font-weight:400; line-height:var(--lh-body);
  color:var(--t-secondary, #2c3b3d);
  background:var(--c-surface);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit}

/* ── 03  CONTAINER + 12-SPALTEN-GRID ──
   Neu geteilt: mehrspaltige Layouts über .grid + .col-span-* (fluchtende Kanten
   über alle Sections). Erlaubte Zeilen-Summen = 12 (6/6, 7/5, 8/4, 4/4/4, 3/3/3/3, 6/2/2/2 …). */
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-px)}
/* 12/8/4-Grid · Desktop-First. Desktop = 12 Spuren; col-span-N = Breite in Spalten.
   Tablet ≤1023 = 8 Spuren, Mobile ≤767 = 4 Spuren; ohne explizite col-t-N/col-m-N
   klappt eine Spalte auf Mobile automatisch auf volle Breite. */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);align-items:start}
.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9}
.col-span-10{grid-column:span 10}.col-span-11{grid-column:span 11}.col-span-12{grid-column:span 12}
/* Versatz auf Spaltenlinie N (G6/G6b + Spalten-Luft-Muster: Text↔Text mit Leerspalte trennen).
   NACH den Spans definiert: grid-column-start übersteuert die span-Kurzform. */
.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}
.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}
.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}
.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}
/* Kombination col-start-N + col-span-M: die span-Kurzform legt den START fest und würde
   vom col-start überschrieben (Element fiele auf 1 Spalte) → Span wandert ins grid-column-END. */
[class*="col-start-"].col-span-1{grid-column-end:span 1}[class*="col-start-"].col-span-2{grid-column-end:span 2}
[class*="col-start-"].col-span-3{grid-column-end:span 3}[class*="col-start-"].col-span-4{grid-column-end:span 4}
[class*="col-start-"].col-span-5{grid-column-end:span 5}[class*="col-start-"].col-span-6{grid-column-end:span 6}
[class*="col-start-"].col-span-7{grid-column-end:span 7}[class*="col-start-"].col-span-8{grid-column-end:span 8}
[class*="col-start-"].col-span-9{grid-column-end:span 9}[class*="col-start-"].col-span-10{grid-column-end:span 10}
[class*="col-start-"].col-span-11{grid-column-end:span 11}[class*="col-start-"].col-span-12{grid-column-end:span 12}
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(8,1fr)}
  /* Desktop-Spannen >8 auf 8 begrenzen; sonst col-t-N (1..8) explizit */
  .col-span-9,.col-span-10,.col-span-11,.col-span-12{grid-column:span 8}
  /* Desktop-Startlinien gelten im 8er-Raster nicht → auto (Layouts restacken via col-t-*) */
  [class*="col-start-"]{grid-column-start:auto}
  .col-t-1{grid-column:span 1}.col-t-2{grid-column:span 2}.col-t-3{grid-column:span 3}.col-t-4{grid-column:span 4}
  .col-t-5{grid-column:span 5}.col-t-6{grid-column:span 6}.col-t-7{grid-column:span 7}.col-t-8{grid-column:span 8}
}
@media (max-width:767px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .grid>*{grid-column:1 / -1}                      /* Standard: volle Breite (gestapelt) */
  .col-m-1{grid-column:span 1}.col-m-2{grid-column:span 2}.col-m-3{grid-column:span 3}.col-m-4{grid-column:span 4}
}

/* ── 04  TYPOGRAFIE · rem + fluid (Kunde kann --fs-hN überschreiben) ── */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font-heading, var(--font));
  font-weight:var(--fw-heading, 700);
  line-height:var(--lh-heading);
  letter-spacing:-.01em;
  color:var(--t-primary, #003c41);
}
h1,.h1{font-size:var(--fs-h1, clamp(2rem, 1.5rem + 2.2vw, 2.75rem));margin-bottom:var(--space-text-pair, .5rem)}
h2,.h2{font-size:var(--fs-h2, clamp(1.6rem, 1.25rem + 1.7vw, 2.25rem));margin-bottom:var(--space-text-pair, .5rem)}
h3,.h3{font-size:var(--fs-h3, clamp(1.35rem, 1.15rem + .9vw, 1.75rem));margin-bottom:var(--space-text-pair, .5rem)}
h4,.h4{font-size:var(--fs-h4, 1.5rem);margin-bottom:var(--space-text-pair, .5rem)}
h5,.h5{font-size:var(--fs-h5, 1.25rem);margin-bottom:var(--space-text-pair, .5rem)}
h6,.h6{font-size:var(--fs-h6, 1.125rem);margin-bottom:var(--space-text-pair, .5rem)}
p{font-size:var(--fs-body, 1rem);line-height:var(--lh-body);margin-bottom:var(--space-stack, 1rem);max-width:65ch}
p:last-child{margin-bottom:0}
.preheadline{font-size:var(--fs-label, 1rem);line-height:1.25;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-text-pair, .5rem);display:block;color:var(--c-primary)} /* M3: Preheadline↔Headline = text-pair (8) */
.subheadline{font-size:var(--fs-title, 1.125rem);line-height:1.66;font-weight:400;margin-bottom:var(--space-stack, 1rem)}
.text-white,.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6,
.text-white p,.text-white .preheadline,.text-white .subheadline{color:var(--c-white)}
.text-white-muted{color:color-mix(in srgb, var(--c-white) 78%, transparent)}

/* ── 05  BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:var(--gap-btn);
  padding:.75rem 1.5rem;font-family:var(--font);font-size:var(--fs-label, 1rem);font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.05em;
  border-radius:var(--r-btn);border:var(--bw) solid transparent;cursor:pointer;white-space:normal;text-align:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}
.btn--primary:hover{background:var(--c-tertiary);border-color:var(--c-tertiary)}
.btn--primary:active{background:var(--c-primary-dark);border-color:var(--c-tertiary-dark)}
.btn--ghost{background:var(--c-white);border-color:var(--c-primary);color:var(--t-primary)}
.btn--ghost:hover{background:var(--c-secondary);border-color:var(--c-tertiary);color:var(--c-on-secondary)}
.btn--ghost:active{background:var(--c-neutral);border-color:var(--c-primary-dark)}
.btn--back{background:var(--c-secondary);border-color:var(--c-neutral);color:var(--t-primary)}
.btn--back:hover{background:var(--c-neutral);border-color:var(--c-neutral-dark)}
/* Kompakter Knopf: 14px statt 16px. Gilt fuer Knoepfe in Kopfleisten (NAV) und in Karten,
   wo ein 16px-Label neben kleinerer Umgebungstypo zu schwer wirkt. Ersetzt die bisherigen
   Inline-Styles und sektionseigenen font-size-Regeln — Groesse NUR ueber diese Variante. */
.btn--kompakt{font-size:var(--fs-body-sm)}
.cta-link{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--c-primary-dark);transition:color var(--motion-base)}
.cta-link:hover{color:var(--c-primary)}
.cta-link--light{color:var(--c-primary)}
.cta-link--light:hover{color:var(--c-white)}

/* ── 06  CARDS ── */
.card{background:var(--c-white);border:var(--bw) solid var(--c-secondary);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.card__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-secondary-dark)}
.card__img-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c-secondary-dark),var(--c-neutral-dark));display:flex;align-items:center;justify-content:center}
.card__img-placeholder svg{opacity:.3}
.card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1;gap:var(--mg-xs)}
.card__kicker{font-size:.875rem;font-weight:600;color:var(--c-primary-dark)}
.card__title{color:var(--t-primary);margin-bottom:0}
.card__text{color:var(--t-secondary);font-size:.9375rem;flex:1}

/* ── 07  FORM-FELDER (geteilt) ── */
.field{margin-bottom:var(--space-field-gap)}
.field label{display:block;font-size:var(--fs-label-sm, .875rem);color:var(--t-secondary);margin-bottom:var(--space-text-pair, .5rem);font-weight:600}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--c-border);border-radius:var(--r-btn);
  padding:.8125rem .9375rem;background:var(--c-field);color:var(--t-primary);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent)}

/* ── 08  UTILITIES ── */
.u-sr-only,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u-text-center{text-align:center}
.u-img-cover{width:100%;height:100%;object-fit:cover}
.img-bg-dark{background:linear-gradient(135deg,var(--c-secondary-dark) 0%,var(--c-neutral-dark) 100%)}

/* ============================================================
   SECTION-KOMPONENTEN  (Klassennamen unverändert; token-clean + rem)
   ============================================================ */



/* ── RESPONSIVE ── */
@media (max-width:1024px){
  /* M3: container-px-Override entfernt (konstant 24) */
}
@media (max-width:767px){
  /* M3: container-px-Override entfernt (16 steht im Token-Block oben) */
  
}

/* ── SCROLL-REVEAL (rein visuell; ohne JS bleibt alles sichtbar) ── */
/* NUR unter html.dsjs — diese Klasse setzt das Kopf-Schnipsel des Bau-Moduls und nimmt sie
   zurueck, wenn wb-reveal.js nicht laedt (Totmannschalter). Ohne diese Bedingung waere jeder
   .reveal-Inhalt auf einer Seite ohne JS DAUERHAFT unsichtbar.
   Neue Sections nutzen data-animate="fade|stagger-children", nicht .reveal. */
html.dsjs .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
html.dsjs .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.dsjs .reveal{opacity:1;transform:none;transition:none}}


/* ══════════════════════════════════════════════════════════════════════════
   Baustein .embed — Fremd-Einbettungen mit Zwei-Klick-Consent  ·  19.08.2026
   ZWECK: Sections speichern KEIN iframe-Element (validate-section.js verbietet
   aktive Inhalte), sondern nur die Ziel-URL in data-embed-src. Das iframe
   baut erst das DS-Skript nach dem Klick des Besuchers — ohne Klick geht kein
   Request an den Fremdanbieter (DSGVO by default). Ohne JS bleibt das Gate
   stehen (fail-closed), statt dass der Inhalt ungefragt lädt.
   Die Section gibt nur das aspect-ratio vor; Fläche, Gate und das eingesetzte
   iframe kommen von hier. Rein additiv — nichts oberhalb wurde angefasst.
   ══════════════════════════════════════════════════════════════════════════ */
.embed{position:relative;overflow:hidden;aspect-ratio:16/9;
  border-radius:var(--r-card,1rem);
  background:var(--c-surface-subtle,var(--c-neutral-light,#f6f7f9))}
.embed__gate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:var(--space-stack,var(--sp-4,1rem));
  padding:var(--space-card-pad-lg,var(--sp-6,2rem))}
.embed__text{max-width:52ch;margin:0;
  color:var(--t-secondary,var(--c-tertiary-mid,currentColor));
  font-size:var(--fs-body-sm,.875rem)}
.embed>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}


/* === Marken-Tokens aus den Web-Guidelines === */
:root{
  /* Marken-Farben */
  --c-primary: #023a51;
  --c-primary-mid: #023144;
  --c-primary-dark: #012736;
  --c-secondary: #121411;
  --c-secondary-mid: #0c0e0c;
  --c-secondary-dark: #060706;
  --c-tertiary: #10688e;
  --c-tertiary-mid: #0e5777;
  --c-tertiary-dark: #0b455f;
  --c-neutral: #efefef;
  --c-neutral-mid: #cccccc;
  --c-neutral-dark: #494949;
  --c-neutral-light: #fdfdfd;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-on-primary: var(--c-white);
  --c-on-secondary: var(--c-white);
  --c-on-tertiary: var(--c-white);
  --c-on-fill: var(--c-white);
  --c-accent-1: #023a51;
  --c-accent-2: #023a51;
  --c-accent-3: #023a51;
  --c-accent-4: #023a51;
  --c-accent-5: #023a51;
  --t-primary: #060706;
  --t-secondary: #121411;
  --t-negativ: #ffffff;
  --t-positiv: #121411;

  /* M3-Rollen (pro Kunde, WCAG-geprüft): Container-Paare + Inverse */
  --c-primary-container: #e1e7ea;
  --c-on-primary-container: var(--c-primary-dark);
  --c-secondary-container: #e7e8e7;
  --c-on-secondary-container: var(--c-secondary-dark);
  --c-tertiary-container: #e2edf1;
  --c-on-tertiary-container: var(--c-tertiary-dark);
  --c-inverse-surface: #060706;
  --c-inverse-on-surface: var(--c-white);
  --c-inverse-on-surface-2: color-mix(in srgb, var(--c-white) 78%, transparent);

  /* Typografie */
  --font-heading: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
  --fw-heading: 700;
  --fw-body: 400;
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h6: 1.25rem;

  /* Radien & Rahmen */
  --r-card: 8px;
  --r-btn: 4px;
  --r-pill: 9999px;
  --bw-card: 2px;
  --bw-btn: 1px;

  /* Spacing-Skala (universell, 8px-Basis) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
}

/* ── css/custom.css ── */
/* custom.css — Manuelle Anpassungen für diese Website.
   Diese Datei wird bei einem erneuten Export/Deploy NIE überschrieben.
   Alle Handkorrekturen NUR hier eintragen (nicht in style.css oder den Seiten-HTMLs).
   Allgemeingültige Verbesserungen zusätzlich in die Section-Bibliothek zurückspielen,
   damit künftige Projekte sie automatisch bekommen. */

/* ── Schrift Outfit, SELBST GEHOSTET ─────────────────────────────────────────
   Eine Datei, keine externe Anfrage. Das ist der Punkt: bei dynamisch von
   Google geladenen Schriften geht die IP-Adresse JEDES Besuchers an Google —
   das LG München I hat das am 20.01.2022 (3 O 17493/20) für rechtswidrig
   erklärt, 100 EUR Schadensersatz nach Art. 82 DSGVO, rechtskräftig. Liegt die
   Schrift lokal, entfällt die Einwilligung vollständig: kein Banner, keine
   Abwägung, kein Restrisiko.

   VORHER stand hier ein Notnagel, der die drei Schnitte von adrico.de holte —
   also von der ALTEN Kundenseite. Das lief, machte die neue Seite aber von der
   alten abhängig und verlagerte das Datenschutz-Problem nur.

   WARUM VARIABLE FONT: gemessen am 03.09.2026 — 32.228 Byte in EINER Datei
   gegen 42.244 Byte in DREI (14.084 + 14.096 + 14.064). Kleiner und eine
   Anfrage statt drei, und die eine Datei deckt 400/600/700 gemeinsam ab.
   Deshalb font-weight: 100 900 statt drei getrennter Regeln.

   Quelle: fonts.gstatic.com, latin-Subset, Outfit v15. Lizenz OFL — Selbst-
   Hosten ist ausdrücklich erlaubt.

   WARUM ZWEI FAMILIENNAMEN: der Marken-Token heißt seit der Korrektur in den
   Web-Guidelines "Outfit"; die alte WordPress-Installation registrierte sie als
   "Outfit Custom". Beide deklariert, damit ein Re-Import der Guidelines die
   Schrift nicht abschaltet. Dieselbe Datei, der Browser lädt sie einmal.

   WARUM ../ UND DIE DATEI IM WURZELVERZEICHNIS: genau dort legt der Datei-Kanal
   des Baukastens hochgeladene Kunden-Dateien ab (app.js:4758 — Original-
   Dateinamen ins ZIP-Wurzelverzeichnis). Der Handgriff liegt bewusst auf dem
   Pfad, den die künftige Automatik nehmen wird: @font-face aus der Token-Engine,
   Datei über den bestehenden Kanal. Dann fällt dieser Block hier weg. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../outfit-latin-vf.woff2") format("woff2")}
@font-face{font-family:"Outfit Custom";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../outfit-latin-vf.woff2") format("woff2")}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN-DURCHGANG 03.09.2026 — Rückmeldungen aus der Betapage-Abnahme
   Referenz für alle Layout-Fragen: die Live-Seite https://adrico.de/

   WARUM STEHT VOR FAST JEDEM SELEKTOR EIN "body":
   Diese Datei liegt im <head>. Das CSS der Sections steht INLINE im <body> und
   kommt damit in der Kaskade SPÄTER. Bei gleicher Spezifität gewinnt die Section.
   Das eine Element im Selektor ("body") hebt die Regel um genau den nötigen Hauch
   an — kein !important, und die Section-Regel bleibt lesbar die Grundlage.

   ALLGEMEINGÜLTIG (gehört in die Bibliothek zurück, nicht nur hierher):
     · LAB-IG-003, LAB-FAQ-015: harte Radien statt --r-card (Punkt 1)
     · LAB-CO-021, LAB-KO-017:  Bildflächen ohne jeden Radius (Punkt 1)
     · LAB-FAQ-015: geschlossene Akkordeon-Zeilen ohne Kante (Punkt 2)
     · LAB-KO-017 + LAB-MP-003: dialog auf position:relative (Punkt 4) — der
       Klassiker, der die Seite an den Anfang springen lässt
     · Design_System .cta-link: Pfeil-Link ohne Unterstreichung (Punkt 5)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · RADIEN: EIN TOKEN PRO ROLLE ────────────────────────────────────────────
   Haus-Regel (scripts/check-section.js, "token/harter-radius"):
   Cards/Bildflächen = --r-card · kleine Medien = --r-sm · Knöpfe = --r-btn ·
   Pillen = --r-pill. Feste px-Werte sind ein Verstoß.

   Der Kunde setzt über die Web-Guidelines drei der vier Radien und skaliert die
   Design-System-Werte dabei durchgängig auf die Hälfte:
       --r-card 16px → 8px      --r-btn 8px → 4px      --r-pill 9999px
   --r-sm ("kleine Medien") hat im Guidelines-Satz KEIN Feld und blieb deshalb
   auf dem DS-Default 12px stehen — größer als der Karten-Radius, also genau
   verkehrt. Hier zieht er nach (DS-Verhältnis 12:16 gewahrt → 6px).
   NACHZUG FÜRS DESIGN-SYSTEM: --r-sm aus --r-card ableiten, statt einen festen
   Default zu setzen (analog zu DESIGN-SYSTEM-BACKLOG.md). */
:root{ --r-sm: calc(var(--r-card, 8px) * .75); }

/* 1a · Bildflächen ohne jeden Radius → Bildfläche ist eine Card-Rolle.
   LAB-CO-021 (.cobp__ph, das hochkante Bild links) war der gemeldete Fall;
   dieselbe Lücke hat der Bild-Slot im Dialog von LAB-KO-017. */
body .sec-294 .cobp__ph,
body .sec-297 .modal__ph{ border-radius: var(--r-card, 8px); }

/* 1a-ii · LAB-CO-021 (.cobp__ph) — Randfarbe an die Card-Rolle angeglichen
   (Auftrag Romeo 08.09.2026): vorher --c-border (kaum sichtbare 12%-Linie),
   jetzt derselbe Rahmen wie bei .card (LAB-CRD-010, Block 118, direkt darunter). */
body .sec-294 .cobp__ph{ border-color: var(--c-secondary); }

/* 1b · LAB-IG-003 — harte 16px, also der DOPPELTE Kartenradius.
   Die Section begründet das mit „das Token ist zweimal als :root definiert
   (8px/16px)". Das ist keine Doppeldefinition, sondern die normale Kaskade:
   style.css bringt erst den DS-Block (16px) und DANACH den Kundenblock (8px) —
   der hintere gewinnt. --r-card liefert also verlässlich 8px.
   Die Aufteilung der Zustände bleibt wie gebaut: gestapelt runden alle Kacheln,
   im Desktop-Streifen nur die beiden Außenkanten. */
body .sec-125 .imgacc__panel{ border-radius: var(--r-card, 8px); }
@media (min-width: 1025px){
  body .sec-125 .imgacc__panel{ border-radius: 0; }
  body .sec-125 .imgacc__panel:first-child{ border-radius: var(--r-card, 8px) 0 0 var(--r-card, 8px); }
  body .sec-125 .imgacc__panel:last-child{ border-radius: 0 var(--r-card, 8px) var(--r-card, 8px) 0; }
}
/* Die milchige Textfläche im offenen Panel sitzt auf dem Bild — kleines Medium. */
body .sec-125 .imgacc__panel.active .imgacc__content{ border-radius: var(--r-sm, 6px); }

/* 1c · LAB-FAQ-015 — 12px an den Akkordeon-Zeilen, 14px an der CTA-Leiste. */
body .sec-145 .bfaq__list .accordion-item,
body .sec-145 .bfaq__cta{ border-radius: var(--r-card, 8px); }

/* 1d · LAB-KO-017 — der Reiter-Stapel des Floating-Menüs hatte gar keinen Radius.
   Hier ist die Live-Seite NICHT die Referenz: dort sind die Reiter bei 3-facher
   Vergrößerung nachgemessen völlig eckig. Maßgeblich ist der Token-Vertrag.
   Nur die beiden LINKEN Ecken werden rund. Rechts sitzt der Stapel bündig am
   Bildschirmrand — ein Radius dort würde eine sichtbare Lücke aufreißen.
   Gerundet wird der STAPEL, nicht der einzelne Knopf: die beiden Reiter sind
   über border-block-start:0 zu einem Block zusammengezogen, die Naht zwischen
   ihnen bleibt gerade. Dieselbe Logik wie die Außenkanten der Panel-Reihe in
   LAB-IG-003. Deshalb --r-card (Fläche) und nicht --r-btn: die Rundung gehört
   der angedockten Fläche, nicht den Schaltflächen darin — und 4px wären an
   einem 170px hohen Reiter ohnehin nicht zu sehen.
   Logische Ecken-Namen, damit der Stapel auch in RTL an der richtigen Seite
   rundet (dort dockt inset-inline-end:0 links an).

   NACHGEZOGEN 03.09.2026 (A2-11): Die Leiste hat mit dem Mobil-Umschalter ein
   drittes Kind bekommen, und der steht als LETZTES in .flm. Damit hätte
   :last-child den Umschalter getroffen statt den Kontakt-Reiter, und der
   Stapel wäre unten wieder eckig geworden. „of S" zählt nur die Reiter und ist
   dadurch unabhängig davon, wo der Umschalter im Markup steht — und bliebe auch
   bei einem dritten Reiter richtig. */
body .sec-297 .flm__knopf:nth-child(1 of .flm__knopf){ border-start-start-radius: var(--r-card, 8px); }
body .sec-297 .flm__knopf:nth-last-child(1 of .flm__knopf){ border-end-start-radius: var(--r-card, 8px); }

/* ── 2 · LAB-FAQ-015: geschlossene Fragen sichtbar machen ───────────────────────
   Die Zeilen sind var(--c-white) auf var(--c-neutral-light). Bei diesem Kunden
   ist neutral-light #fdfdfd — praktisch dasselbe Weiß. Die Karten waren nicht
   „zu schwach abgesetzt", sie waren unsichtbar; erst der Schatten des offenen
   Zustands zeichnete eine Zeile.
   Deshalb: Kante in der Border-Rolle für BEIDE Zustände (die trägt die
   Abgrenzung) + ein flacher Schatten geschlossen, der offene hebt eine Stufe
   höher. So bleibt der Zustandswechsel lesbar, ohne den Stil zu wechseln. */
body .sec-145 .bfaq__list .accordion-item{
  border: var(--bw-btn, 1px) solid var(--c-border, rgba(0,0,0,.12));
  box-shadow: var(--shadow-sm);
}
body .sec-145 .bfaq__list .accordion-item:has(details[open]){
  box-shadow: var(--shadow-md);
  border-color: var(--c-outline, rgba(0,0,0,.24));
}

/* ── 4 · LAB-KO-017 + LAB-MP-003: Popup springt an den Seitenanfang ─────────────
   URSACHE (am 03.09.2026 im Versuch nachgestellt und gemessen):
   Beide Sections überschreiben am <dialog> position:fixed des Browsers mit
   position:relative — laut Kommentar als „Bezug für den Schließen-Knopf".
   Ein Element in der Top-Layer bekommt als umgebenden Block den VIEWPORT-Rahmen
   am DOKUMENTANFANG. Mit position:relative liegt der Dialog deshalb ganz oben im
   Dokument; showModal() setzt den Fokus hinein, und der Browser scrollt den
   Fokus sichtbar — also an den Seitenanfang.
       Messung, gleicher Dialog, 4000px hohe Testseite, Scrollstand 1500:
         position:relative        → scrollY 1500 → 0     (Sprung)
         position:fixed; inset:0  → scrollY 1500 → 1500  (bleibt)
       Kasten in beiden Fällen identisch: 640×305 an derselben Stelle.
   position:fixed ist ebenfalls ein Positions-Bezug — der Schließen-Knopf braucht
   nichts anderes. margin:auto der Section bleibt stehen und zentriert weiter,
   inset:0 stellt nur den Browser-Default wieder her, auf den sich die
   Vollbild-Regel unter 767px ausdrücklich beruft. */
body .sec-297 .modal,
body .sec-289 .modal{ position: fixed; inset: 0; }

/* ── 5a · Pfeil-Links (.cta-link) bekommen ihre Unterstreichung ─────────────────
   Live-Vorbild (adrico.de, Elementor-Klasse .btn-ci7):
       border-bottom:1px solid …;  padding: 0 14px 4px 0
   Die Linie läuft unter Text UND Pfeil und endet ein Stück rechts davon.
   Genau so hier, nur in Tokens: Rahmenbreite --bw-btn, Luft --sp-1, Überhang
   --sp-3 (12px ≈ die 14px des Vorbilds). currentColor statt fester Farbe —
   dann geht die Linie beim Hover mit der Schrift mit.
   Gilt für ALLE Pfeil-Links im Projekt: LAB-CRD-010 (drei Karten) und
   LAB-EP-008 (Kontaktseite). Versalien und Pfeil-Icon bleiben unberührt.
   (NICHT betroffen: .fmm__zurueck in LAB-KO-017 — ein Zurück-Knopf mit
   Links-Pfeil im Dialog, kein CTA.)

   align-self: Der Link ist inline-flex, steht in LAB-CRD-010 aber als Kind
   eines Spalten-Flex (.card__body) — dort streckt ihn der Default über die ganze
   Kartenbreite, und die neue Linie lief bis zur Kartenkante. Mit flex-start ist
   die Linie so lang wie ihr Inhalt, wie im Vorbild. LAB-EP-008 setzt genau das
   an seinem .ep__cta schon von Hand; hier gilt es für alle.

   ÜBERHOLT AM 04.09.2026 — der Überhang ist WEG, siehe C3 am Dateiende.
   Begründung dort: das Vorbild hat kein Pfeil-Icon, wir haben eines. Live endet
   die Linie 14 px hinter dem TEXT, bei uns lief sie 12 px hinter dem PFEIL
   weiter und stand dort als loser Stummel. Der Rest dieses Blocks gilt weiter. */
.cta-link{
  border-bottom: var(--bw-btn, 1px) solid currentColor;
  padding-bottom: var(--sp-1, .25rem);
  align-self: flex-start;
}

/* ── 5b · LAB-CRD-010 greift in den Hero (Startseite, Fahrzeugfinanzierung) ─────
   Live-Vorbild: die drei Karten schieben sich über die Unterkante des Heros,
   der Bildausschnitt bleibt zwischen und neben ihnen sichtbar.

   GETROFFEN WIRD NUR DIE ERSTE KARTEN-REIHE HINTER DEM HERO — über die Stellung
   im Dokument, nicht über eine Seiten-Liste:
       Hero  +  Floating-Menü (hat keine Höhe im Fluss)  +  Karten
   Auf der Startseite steht LAB-CRD-010 zweimal; die zweite Reihe weiter unten
   bleibt unangetastet. Die Karriere-Seite hat dieselbe Folge und bekommt die
   Überlappung deshalb mit — gleiche Bauteile, gleiches Bild. Soll sie dort
   flach bleiben, muss die Seite ein eigenes Kennzeichen bekommen.

   WIE: Die Section wird um die Überlappung nach oben gezogen und verliert ihr
   oberes Polster. Ihre helle Fläche kommt dann NICHT mehr aus dem Hintergrund
   der Section (der würde den Hero mit abdecken), sondern aus einem Pseudo-
   Element, das erst an der Hero-Kante beginnt. Die Karten selbst stehen mit
   z-index über dem Hero — sonst gewinnt dessen position:relative das Malen.

   NACHGEZOGEN 03.09.2026 (Abnahme-Punkt 9): „etwa die Hälfte des Card-Bildes soll
   in der Hero Section liegen". Vorher war die Überlappung eine feste Abstands-Stufe
   (--sp-8 = 64px) und damit nur knapp ein Drittel des 214 px hohen Kartenbildes.
   Eine größere feste Stufe wäre wieder geraten — deshalb wird die Bildhöhe jetzt
   GERECHNET, aus genau den Werten, mit denen das Layout sie selbst erzeugt:

       Kartenbild = (Containerbreite − beide Ränder − Rinnen) / Spalten  ·  9/16

   .kart118__grid ist ein eigenes repeat(N, 1fr) mit --grid-gutter im .container,
   das Bild ist .card__img-placeholder mit aspect-ratio 16/9. Damit stimmt die
   halbe Bildhöhe auf jeder Breite von selbst, ohne Media-Query-Pflege — nur die
   Spaltenzahl wechselt an den Breakpoints der Section (3 · 2 · 1).
   Rechnerisch 216 px gegen gemessene 214 px: die Differenz ist der Kartenrahmen,
   1 % — für „etwa die Hälfte" belanglos.

   MOBIL IST GEDECKELT: einspaltig ist das Kartenbild ~263 px hoch, die halbe Höhe
   würde vom Hero (85vh − Navhöhe) mehr wegnehmen als dort für H1, Subline und zwei
   Knöpfe bleibt. --sp-9 (96px) ist die Grenze — immer noch dreimal so viel wie
   vorher, aber der Hero bleibt bedienbar.

   DER MODIFIER „SPALTEN" MUSS MITGELESEN WERDEN — sonst stimmt die Rechnung auf
   genau einer Seite nicht. LAB-CRD-010 ist pro Instanz auf 1–6 Spalten stellbar
   (data-m-spalten, das Design_System macht daraus --m-spalten). Auf der
   Karriere-Seite steht die Kartenreihe hinter dem Hero auf ZWEI Spalten, die
   Karten sind dort 588 px breit und ihr Bild 329 px hoch — mit „3 Spalten"
   gerechnet wären das statt der halben nur 32 % gewesen (gemessen).
   Startseite und Fahrzeugfinanzierung tragen an der ERSTEN Reihe keinen Modifier
   (3 Spalten), ihre zweiten Reihen (4 bzw. 2 Spalten) stehen nicht hinter dem
   Hero und sind ohnehin nicht betroffen.

   WARUM DIE FORMEL NICHT MEHR AUF :root STEHT: Eine Custom Property wird dort
   aufgelöst, wo sie DEKLARIERT ist. Auf :root deklariert, hätte
   --kart-bildhoehe für immer die 3 von :root eingesetzt — ein --kart-spalten,
   das die Section weiter unten setzt, käme zu spät. Deshalb steht die Formel
   jetzt auf denselben Elementen, die auch die Spaltenzahl tragen.

   UND WARUM DER HERO SEINE EIGENE ZEILE BRAUCHT: Er kann den Modifier seines
   Geschwisters nicht sehen — CSS erbt nach unten, nicht seitwärts. :has() holt
   ihn: „Hero, auf den Floating-Menü und Kartenreihe mit diesem Modifier folgen".
   So bekommen Karten und Hero garantiert dieselbe Zahl; liefen sie auseinander,
   würde der Hero-Text unter die Karten rutschen. */
body [data-sec="LAB-HERO-015"],
body [data-sec="LAB-CRD-010"] .kart118{
  --kart-spalten: 3;
  --kart-bildhoehe: calc(
      (min(var(--container-max, 1248px), 100vw) - 2 * var(--container-px, 24px)
       - (var(--kart-spalten) - 1) * var(--grid-gutter, 24px))
      / var(--kart-spalten) * 9 / 16);
  --kart-ueberlappung: calc(var(--kart-bildhoehe) / 2);
}
@media (min-width: 1025px){
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="1"]{ --kart-spalten: 1; }
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="2"]{ --kart-spalten: 2; }
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"]{ --kart-spalten: 4; }
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="5"]{ --kart-spalten: 5; }
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="6"]{ --kart-spalten: 6; }
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="1"]){ --kart-spalten: 1; }
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="2"]){ --kart-spalten: 2; }
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"]){ --kart-spalten: 4; }
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="5"]){ --kart-spalten: 5; }
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="6"]){ --kart-spalten: 6; }
}
/* Unter 1025 px stapelt die Section selbst (2 bzw. 1 Spalte) und ignoriert den
   Modifier — die Rechnung zieht mit. */
@media (max-width: 1024px){
  body [data-sec="LAB-HERO-015"],
  body [data-sec="LAB-CRD-010"] .kart118{ --kart-spalten: 2; }
}
@media (max-width: 767px){
  body [data-sec="LAB-HERO-015"],
  body [data-sec="LAB-CRD-010"] .kart118{
    --kart-spalten: 1;
    --kart-ueberlappung: min(calc(var(--kart-bildhoehe) / 2), var(--sp-9, 6rem));
  }
}

/* SMART-BEREICH, 04.09.2026: hier steht zwischen Hero und Karten KEIN
   Floating-Menü — smart.adrico.de/ hat kein LAB-KO-017. Die Folge ist deshalb
   nur zwei Glieder lang. Beide Selektoren stehen bewusst an DERSELBEN Regel:
   die Werte der Überlappung gibt es damit weiter nur einmal. Diese Datei ist
   die Projekt-custom.css und weicht an dieser Stelle von der auf adrico.de ab
   (dort gibt es die kurze Folge nicht). */
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118,
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .kart118{
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--kart-ueberlappung));
  padding-top: 0;
  background: transparent;
}
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118::before,
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .kart118::before{
  content: ''; position: absolute; z-index: -1;
  inset: var(--kart-ueberlappung) 0 0 0;
  background: var(--c-neutral-light);
}
/* HIER STAND EINE display:none-REGEL — 03.09.2026 bei der Content-Übertragung
   entfernt, weil ihr Ziel weg ist.

   Sie hat den Section-Kopf der ersten Kartenreihe stillgelegt (Selektor:
   „.kart118 > .container > div:first-child"), weil der Kopf bauartbedingt ÜBER
   den Karten sitzt und mit ihnen in den Hero gewandert wäre — und weil auf der
   Live-Seite über diesen Karten keine Überschrift steht.

   Bei der Content-Übertragung ist der Kopf jetzt auch im HTML weg (Startseite,
   Fahrzeugfinanzierung, Karriere — dieselbe Begründung, nur eine Ebene tiefer:
   kein Blindtext, der irgendwann doch sichtbar wird, und kein leerer Marker-
   Schlüssel im Editor). Damit war „div:first-child" das KARTEN-RASTER selbst
   und die ganze Reihe unsichtbar.

   SOLL DORT WIEDER EINE ÜBERSCHRIFT STEHEN: Kopf im Seiten-HTML anlegen (die
   drei Seiten haben ihn nicht mehr) — die Überlappung steckt in der Regel
   darüber und muss dann ebenfalls fallen. */
/* Der Hero stellt seinen Text nach: unten ist jetzt die Überlappung im Weg, der
   Block rückt in die Mitte der FREIEN Fläche (Vorbild: Live-Seite, Text auf
   halber Höhe). Nur der Hero, hinter dem die Karten greifen — die anderen 19
   Seiten behalten den Text an der Unterkante.

   Das Polster ist Überlappung PLUS eine Abstands-Stufe (03.09.2026, Punkt 9):
   mit der jetzt doppelt so tiefen Überlappung stieß die Unterkante des
   Knopf-Paars sonst direkt an die Oberkante der Karten. --sp-6 ist die Luft,
   die dazwischen bleiben soll.

   ══ AM 04.09.2026 BEIDES ZURÜCKGENOMMEN — Auftrag Punkt 5, siehe C6 ══
   „Wenn eine nachfolgende Section in den Hero hineinragt, darf dadurch der
   Hero-Content nicht nach oben geschoben werden." Genau das tat das Polster:
   es rechnete die Überlappung aus der Mitte heraus, der Textblock stand auf
   Seiten MIT Karten woanders als auf Seiten ohne. Gemessen bei 1440×900
   (Startseite): 150 px über / 290 px unter dem Block — nicht mittig.
   Die Live-Seite mittet im VOLLEN Hero-Kasten und ignoriert die Überlappung
   (gemessen: 285/285 auf derselben Seite, die die Karten ebenfalls überlappen).
   Das Mitten gilt jetzt für alle Hero-Seiten (C6), nicht mehr nur für die drei
   mit Karten — deshalb ist auch die :has()-Bedingung hier weg. */

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN-DURCHGANG 2 — Rückmeldungen aus der zweiten Betapage-Abnahme, 03.09.2026
   Punkte A2-1 … A2-10 in der Nummerierung der Abnahme-Liste. Referenz für alle
   Layout-Fragen bleibt die Live-Seite https://adrico.de/.

   Das „body" vor fast jedem Selektor hat denselben Grund wie oben: diese Datei
   liegt im <head>, das Section-CSS steht inline im <body> und käme sonst später
   in der Kaskade.

   ALLGEMEINGÜLTIG (gehört in die Bibliothek zurück, nicht nur hierher):
     · LAB-CO-022, LAB-PC-016: Karten mit Rahmen, aber ohne Radius (A2-7/A2-8)
     · LAB-FAQ-015: Akkordeon öffnet/schließt hart, ohne Übergang (A2-6)
     · LAB-MP-003: Bulletpoints ohne den Haus-Kreis aus LAB-CO-010 (A2-10)
     · LAB-EP-008: Kontaktzeilen und Icons eine Stufe zu klein (A2-4)
     · LAB-CF-004: Formular fest auf Spalte 3–10 eingerückt (A2-5)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── A2-1 · LAB-NAV-022: Negativ-Logo statt Wortmarke ───────────────────────────
   Im HTML ersetzt: <span class="nvg__wortmarke">Firmenname</span> → <img> mit dem
   Negativ-Logo des Kunden (adrico-logo-negativ.webp, 250×61, weiße Schrift auf
   transparent — gebaut für genau diesen dunklen Markenblock). Der Link selbst war
   schon der Startseiten-Link und bleibt es (href + aria-label unverändert), er
   trägt jetzt zusätzlich data-nav="start" wie es die Bibliotheks-Konvention für
   Logo-Links vorsieht.

   MASS: Die Höhe führt, die Breite folgt dem Seitenverhältnis (4,1:1). Der dunkle
   Block ist 17rem breit und gibt nach beiden Polstern rund 208 px Innenraum frei;
   36 px Höhe ergeben 147 px Breite — satt in der 72-px-Leiste, ohne die Kante zu
   berühren. Unter 1025 px schrumpft der Block auf 12rem (144 px Innenraum),
   deshalb dort 30 px Höhe (123 px Breite). max-inline-size ist der Notnagel,
   falls jemand später ein Logo mit anderem Verhältnis einsetzt. */
body .sec-291 .nvg__logo{
  display: block;
  block-size: 2.25rem;
  inline-size: auto;
  max-inline-size: 100%;
}
@media (max-width: 1024px){
  body .sec-291 .nvg__logo{ block-size: 1.875rem; }
}

/* ── A2-2 · LAB-TM-008: Trustpilot-Bootstrap statt Bibliotheks-iframe ───────────
   Warum die Einbettung im HTML getauscht wurde, steht dort im Kommentar. Hier nur
   die Hülle: Das Trustpilot-Skript ersetzt den INHALT von .trustpilot-widget durch
   sein eigenes iframe. Bis dahin (und wenn das Skript blockiert ist) stehen der
   Ladehinweis und der Link aufs Profil mittig in der Fläche — deshalb wird die
   Hülle selbst zum Zentrier-Flex, nicht der Hinweis allein.
   155px ist die Höhe, die auch live gesetzt ist; die 10rem der Section bleiben als
   Mindesthöhe darunter stehen, damit die Fläche vor dem Laden nicht kollabiert. */
body .sec-292 .kst__embed{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-2, .5rem);
}
body .sec-292 .kst__embed > iframe{ min-height: 155px; }
body .sec-292 .kst__profil{
  font-size: var(--fs-body-sm, .875rem);
  color: var(--c-primary-dark, #253746);
}

/* ── A2-3 · LAB-EP-005: Struktur 1:1 von der Live-Seite ────────────────────────
   ZWEITE FASSUNG (03.09.2026, nach Rückmeldung): Der erste Anlauf hat nur die
   Spaltenzahl umgestellt und das Schachbrett per order zurechtgerückt — bei 28
   Bibliotheks-Kacheln in einer VIER-Spalten-Folge war das nötig, aber es blieb
   ein Kunstgriff. Jetzt trägt die Struktur selbst, was sie tragen soll.

   AUSGEMESSEN AN https://adrico.de/ueber-uns/ (Elementor-Spalten, drei Reihen
   à 393 px bei y=2001 / 2394 / 2787):

       BILD  ·  2024  ·  BILD
       2023  ·  BILD  ·  2022
       BILD  ·  2021  ·  BILD

   Das sind NEUN Kacheln — fünf Bilder, vier Jahre, strikt abwechselnd, Bild am
   Anfang und am Ende. Und alle vier Text-Kacheln sind JAHRES-Kacheln; die
   Wert-Kacheln der Bibliothek ("Qualität", "Teamgeist", …) kommen live nicht vor.

   IM HTML UMGESETZT, NICHT IM CSS (ueber-uns.html, siehe CHANGES.txt):
   Von 28 Kacheln bleiben genau diese neun in genau dieser Folge —
     bg-1 · span-1/p-1 · bg-2 · span-3/p-3 · bg-3 · span-5/p-5 · bg-4 ·
     span-7/p-7 · bg-5
   und ihre Klasse ist von col-span-3 auf col-span-4 gezogen. Damit ist die
   Section ECHT dreispaltig und alterniert von sich aus — die 28 order-Regeln
   und der grid-column-Override von vorhin sind ersatzlos entfallen.
   (Genau der Fall, den der alte Kommentar vorhergesagt hat: "bei wenigen
   Kacheln in strikter Folge stimmt das Schachbrett ohne jede Regel.")

   ZWEISPALTIG BRAUCHT ES DOCH VIER ZEILEN. Unter 1025 px stapelt die Section
   auf zwei Spalten (col-t-4 bzw. col-m-2) und bringt dafür eigene order-Regeln
   mit — die sind aber für die alte 28er-Folge gerechnet und ergeben mit der
   neuen Neuner-Folge zweimal dieselbe Reihe (B T / T B / T B / B T). Für ein
   Schachbrett in ZWEI Spalten muss jede zweite Reihe kippen, also die Paare
   (3,4) und (7,8) — die Section tauscht stattdessen (5,6) und lässt (7,8)
   stehen. Vier Werte richtigstellen genügt:
       Section:  1 2 4 3 6 5 7 8 9
       richtig:  1 2 4 3 5 6 8 7 9
   Ergebnis B T / T B / B T / T B / B — durchgehend versetzt.

   DIE MEDIA QUERY IST PFLICHT, nicht Kosmetik: order-Werte sind absolut, und
   der Default ist 0. Ohne die Klammer stünden diese vier Kacheln mit 5/6/8/7
   HINTER allen anderen (die auf 0 bleiben) — dreispaltig kam dabei
   B T B / T B B / T T B heraus, also genau der Bruch, der hier weg sollte.
   Beim ersten Schreiben vergessen und am Bild aufgefallen. */
@media (max-width: 1024px){
  body .sec-239 .grid > :nth-child(5){ order: 5; }
  body .sec-239 .grid > :nth-child(6){ order: 6; }
  body .sec-239 .grid > :nth-child(7){ order: 8; }
  body .sec-239 .grid > :nth-child(8){ order: 7; }
}

/* ── A2-4 · LAB-EP-008: Kontaktzeilen auf Fließtextgröße ────────────────────────
   Gemeldet: „Schrift und Icons zu klein". Die Zeilen standen auf --fs-body-sm
   (14px) — das ist die Größe für Bildunterschriften, nicht für eine Rufnummer,
   die jemand ablesen und antippen soll. Jetzt --fs-body (16px), dieselbe Stufe,
   die der Pfeil-Link darunter über --fs-label schon hat. Die Positionszeile
   (.ep__role) bleibt bewusst klein: sie ist das leise Label unter dem Namen.

   ICONS PROPORTIONAL: 16px Schrift × 1,5 Zeilenhöhe = 24px Zeilenkasten. 22px
   Icon füllt den aus, ohne ihn zu sprengen (vorher 16px in einem 21px-Kasten).
   Mit größeren Icons braucht die Zeile mehr Luft zum Text und zur Nachbarzeile —
   beides eine Stufe hoch, von --sp-2 auf --sp-3.

   PFEIL: 16px statt 13px — das ist genau das Maß des Pfeils in LAB-CRD-010, dem
   anderen .cta-link im Projekt. EIN Pfeil-Stil auf der ganzen Seite: Größe hier,
   Unterstreichung und align-self schon oben in Punkt 5a. */
body .sec-281 .ep__contact{ gap: var(--sp-3, .75rem); }
body .sec-281 .ep__contact a{
  font-size: var(--fs-body, 1rem);
  gap: var(--sp-3, .75rem);
}
body .sec-281 .ep__ico{ inline-size: 1.375rem; block-size: 1.375rem; }
body .sec-281 .ep__pfeil{ inline-size: 1rem; block-size: 1rem; }

/* ── A2-5 · LAB-CF-004: Formular über die ganze Grid-Breite ─────────────────────
   Die Section setzt ihr Feld-Paket fest auf col-start-3 + col-span-8, also
   Spalte 3–10 von 12 — begründet mit „Lesebreite für ein Formular". Auf der
   Live-Seite läuft das Kontaktformular über die volle Content-Breite, und dort
   steht es (wie hier) unter einem vollbreiten Ansprechpartner-Raster; eingerückt
   bricht es die Fluchtlinie zur Section darüber.
   1 / -1 setzt Start UND Ende und überstimmt damit beides — col-start-3 und die
   span-Kurzform. Unter 1025 px war das Paket über col-t-8 ohnehin schon vollbreit,
   unter 768 px über die .grid>*-Regel des Design_System: responsiv ändert sich
   also nichts, nur der Desktop rückt aus. */
body .sec-283 .kf{ grid-column: 1 / -1; }

/* ── A2-6 · LAB-FAQ-015: Akkordeon weich auf- und zuschieben ────────────────────
   Vorher sprang der Inhalt hart ein und aus: <details> hat von sich aus keinen
   Übergang, und das Design_System bringt für .accordion-content keinen mit
   (in css/style.css steht zu „accordion" keine einzige Regel).

   OHNE JS UND OHNE HTML-EINGRIFF geht das nur über ::details-content — das
   Pseudo-Element um den Nicht-summary-Inhalt. Zwei Zutaten braucht es:
     · interpolate-size: allow-keywords — sonst ist block-size:auto nicht
       animierbar und der Übergang fällt still aus. Bewusst NUR auf .bfaq__list
       gesetzt, nicht auf :root: die Eigenschaft erbt und würde sonst jede
       Höhen-Animation der ganzen Seite umschalten.
     · content-visibility mit allow-discrete — der Browser blendet den Inhalt beim
       Schließen sonst sofort aus, und man sähe eine leere Fläche zusammenfahren
       statt den Text. So ist AUCH das Schließen animiert, nicht nur das Öffnen.

   DAUER: --motion-base (250ms) — dasselbe Token, mit dem sich schon das
   Plus-Icon dreht. Panel und Icon laufen damit synchron, und für drei Zeilen
   Antwort ist das zügig statt zäh. Kein Bounce, kein Overshoot: --ease-standard
   ist die Haus-Kurve.

   @supports ist die Rückfallebene: Browser ohne ::details-content bekommen die
   Regel nicht zu sehen und verhalten sich wie bisher (sofort offen/zu) — nichts
   bricht, es fehlt nur die Animation. */
@supports selector(::details-content){
  body .sec-145 .bfaq__list{ interpolate-size: allow-keywords; }
  body .sec-145 .bfaq__list details::details-content{
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)),
                content-visibility var(--motion-base, 250ms) allow-discrete;
  }
  body .sec-145 .bfaq__list details[open]::details-content{ block-size: auto; }
  @media (prefers-reduced-motion: reduce){
    body .sec-145 .bfaq__list details::details-content{ transition: none; }
  }
}
/* Die Zeile selbst zieht mit: Kante und Schatten aus Punkt 2 kippten bisher
   hart um, während der Inhalt schon lief. Gleiche Dauer, gleiche Kurve. */
body .sec-145 .bfaq__list .accordion-item{
  transition: box-shadow var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)),
              border-color var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1));
}

/* ── A2-7 + A2-8 · LAB-CO-022 und LAB-PC-016: Karten ohne Radius ────────────────
   Beide Sections geben ihren Kästen einen Rahmen (--bw-card) und einen
   Karten-Grund, aber KEINEN border-radius — sie stehen damit als einzige Karten
   im Projekt auf 0, neben LAB-CRD-010, LAB-EP-008 und LAB-IG-003, die alle auf
   --r-card sitzen. Ein Kasten mit Rahmen und Polster ist eine Card-Rolle, also
   gilt für ihn der Card-Radius. Kein neuer Wert, nur das vorhandene Token.
   (In der Bibliothek ist das am 03.09.2026 in LAB-CO-022 v3 und LAB-PC-016 v2
   nachgezogen worden — dieser Export ist älter und hat es noch nicht. Beim
   nächsten Export darf dieser Block als Erster wieder raus.) */
body .sec-295 .uspb__box,
body .sec-293 .pctr__karte{ border-radius: var(--r-card, 8px); }

/* ── A2-10 · LAB-MP-003: Bulletpoints auf den Haus-Standard ─────────────────────
   Referenz ist LAB-CO-021 (.cobp__check) — und die wiederum zitiert den
   Bulletpoint-Standard aus LAB-CO-010 (.split__check): 22px-Kreis, Füllung
   color-mix mit 12 % Primary, 12px-Haken in Primary-Dark. LAB-MP-003 hatte
   stattdessen einen nackten 1,25rem-Haken in Primary, ohne Kreis — dieselbe
   Rolle, anderer Stil, also ein Fundstück und keine Vielfalt.

   Die Werte stehen hier bewusst NEBEN dem Selektor von LAB-CO-021 in EINER
   Regel: so ist im Code sichtbar, dass beide dasselbe Bauteil sind, und ein
   späterer Zug am Standard trifft zwangsläufig beide. .cobp__check bringt seine
   eigene, identische Fassung aus der Section mit — die Wiederholung hier
   schadet nicht und hält die Absicht fest.
   50 % statt --r-pill ist der Wortlaut des Standards; auf einem Quadrat ergibt
   beides denselben Kreis.
   Das mitgelieferte SVG (viewBox 0 0 20 20) bleibt, es wird nur auf die
   Standard-Größe gestellt — Haken-Form ist Haken-Form. */
body .sec-289 .mpk__haken,
body .sec-294 .cobp__check{
  inline-size: 22px; block-size: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-primary, #253746) 12%, transparent);
  color: var(--c-primary-dark, #1b2731);
}
body .sec-289 .mpk__haken{ margin-top: 1px; }
body .sec-289 .mpk__haken svg{ inline-size: 12px; block-size: 12px; }

/* ── A2-Z1 · GEFUNDEN BEIM ABSCHLUSS-CHECK: --t-negativ ist weiß ────────────────
   Nicht aus der Abnahme-Liste, aber ein echter Fehler auf zwei Seiten — und einer,
   den man nur sieht, wenn man hinsieht, weil nichts kaputt AUSSIEHT, sondern etwas
   FEHLT.

   Die Web-Guidelines des Kunden liefern --t-negativ: #ffffff. Das Token ist die
   Negativ-/Fehler-Rolle, und genau zwei Stellen im Export beziehen sie:
     · LAB-CF-004 (Kontaktseite): .kf__pflicht — die Sternchen an „Vorname *",
       „E-Mail *", „Betreff *", „Ihre Nachricht *" und in der Zeile „Felder mit
       einem * sind Pflichtfelder". Weiß auf Weiß: JEDER Pflichthinweis des
       Kontaktformulars war unsichtbar.
     · LAB-CB-007 (Halal-Finanzierung): .hinw__signal — das Signalfeld der
       Hinweisbox rechnet color-mix(--t-negativ 88%, #000) und wurde damit zu einem
       hellen Grau mit weißem Ausrufezeichen darin, also ebenfalls unlesbar.

   Statt an zwei Stellen zu flicken, wird die ROLLE richtiggestellt: --c-error
   (#c0392b) ist der Fehler-Ton, den das Design_System selbst mitbringt (style.css,
   :root) — kein neuer Wert, nur der, der für diese Rolle vorgesehen ist.

   ECHTE URSACHE, GEHÖRT NICHT HIERHER: In den Web-Guidelines (Zoho CRM, SG_Colors)
   steht bei diesem Kunden Weiß im Negativ-Feld. Solange das so bleibt, bringt jeder
   neue Export den Fehler wieder mit. Bitte dort korrigieren; dann kann dieser Block
   ersatzlos weg. */
:root{ --t-negativ: var(--c-error, #c0392b); }

/* ── A2-Z2 · LETZTER RADIUS-AUSREISSER: LAB-CB-007 Hinweisbox ───────────────────
   Beim Abschluss-Check habe ich alle Section-Regeln nach „Rahmen in der
   Card-Rolle (--bw-card), aber kein border-radius" durchsucht. Es gab genau
   fünf Treffer im ganzen Projekt: .cobp__ph und .modal__ph (Punkt 1a oben),
   .uspb__box und .pctr__karte (A2-7/A2-8) — und diese hier, die letzte.
   Damit ist die Liste leer; kein Kasten mit Rahmen steht mehr auf 0.

   overflow MUSS mit: Das rote Signalfeld sitzt bündig in der linken Boxkante.
   Ohne Beschnitt würde seine eckige Ecke über die neue Rundung hinausragen —
   dann wäre der Radius nur an drei Ecken zu sehen. Beschnitt an der Box ist
   hier gefahrlos, die Section hat weder Schatten noch überstehende Elemente.
   (NICHT geändert: .mkz__zahl in LAB-CT-004. Das sieht der Suchlauf als
   Rahmen-Element, es ist aber nur eine Trennlinie OBEN über einer Kennzahl,
   ohne Fläche — eine Linie rundet man nicht.) */
body .sec-296 .hinw__box{
  border-radius: var(--r-card, 8px);
  overflow: hidden;
}

/* ══ CONTENT-ÜBERTRAGUNG LIVE → BETAPAGE (03.09.2026) ═══════════════════════
   Nur drei Nachzüge, alle rein typografisch. Grund: die Live-Seite setzt die
   H1 auf den meisten Unterseiten NICHT in den Hero, sondern in den ersten
   Inhaltsabschnitt. Diese Heading-Ordnung wurde übernommen (Auftrag: „semantische
   Heading-Struktur der Live-Seite übernehmen") — die Hero-Typografie hing aber
   am Tag h1 und die CTA-Typografie am Tag h2. Die Regeln unten hängen sie an
   die Klasse, damit die Optik unverändert bleibt.

   1) Hero-Titel ohne h1: der Aufmacher ist jetzt <div class="hero-e__titel">.
      Werte 1:1 aus `.sec-180 .hero-e h1` (Bau-CSS im Seiten-HTML) übernommen. */
.sec-180 .hero-e .hero-e__titel{
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -1.5px;
  font-weight: 700; color: var(--c-white, #fff);
  margin: 0 0 var(--space-stack-lg, 1.5rem); text-wrap: balance;
}

/* 2) CTA-Band: die Überschrift ist auf der Live-Seite eine h3, nicht h2.
      Sie trägt jetzt <h3 class="h2"> — die Größe kommt über die Klasse, der
      Abstand muss hier nachgezogen werden (das Bau-CSS adressiert nur h2). */
.sec-286 .pcta__text h3{ margin-bottom: var(--space-stack, 1rem); }

/* 3) FAQ-Antworten der Live-Seite bestehen aus mehreren Absätzen und teils
      aus Listen. Beides steht jetzt im Antwort-Container. Ohne diese beiden
      Regeln würden die Absätze in Fließtextgröße (statt --fs-body-sm) stehen
      und die Listenpunkte hätten keine Marker (das DS setzt ul{list-style:none}). */
.sec-145 .accordion-content_spacer p{ font-size: inherit; line-height: inherit; }
.sec-145 .accordion-content_spacer p:last-child{ margin-bottom: 0; }
.sec-145 .accordion-content_spacer ul{
  list-style: disc; padding-left: 1.25rem; margin: 0 0 var(--space-stack, 1rem);
}
.sec-145 .accordion-content_spacer ul:last-child{ margin-bottom: 0; }
.sec-145 .accordion-content_spacer li + li{ margin-top: .35rem; }

/* ── A2-11 · LAB-KO-017 mobil: Reiter-Stapel → runder Knopf mit Aufklapp ───────
   AUFTRAG: „schau dir die Screenshots an, wir machen es genauso wie auf der
   Live-Seite." Der Grund dahinter war der Befund aus dem Abschluss-Check —
   der fixe Reiter-Stapel liegt mobil 40 px breit über dem rechten Rand und
   verdeckt auf allen 21 Seiten die letzten ~24 px Inhalt (u. a. das letzte Wort
   der Hero-Subline). Auf adrico.de ist das gelöst, und zwar so:

     zugeklappt   ein runder Knopf unten rechts, dunkel, weißes „i"
     aufgeklappt  der Knopf wird zum „×", darüber erscheinen die beiden
                  beschrifteten Zeilen „Angebot" und „Kontakt"
     Zeile tippen öffnet dasselbe Vollbild-Panel wie bisher

   Der runde Knopf deckt nur seine eigene Ecke ab statt eines Streifens über die
   ganze Höhe — damit ist der Befund erledigt, ohne dem Seiteninhalt eine Rinne
   wegzunehmen (die Alternative hätte das Layout aller 21 Seiten verschoben).

   AB 768 px BLEIBT ALLES WIE GEBAUT: senkrechter Reiter-Stapel, mittig am
   rechten Rand. Nur der Umschalter ist dort ausgeblendet. Die Umstellung
   betrifft ausschließlich den Bereich, in dem sie gemeldet wurde.

   EINE BEWUSSTE ABWEICHUNG von den Screenshots: Live hängt an jeder Zeile
   rechts noch ein weißer Punkt in einem Ring — ein Ornament des
   WordPress-Plugins, das die Trefferfläche des Knopfes daneben ein zweites Mal
   andeutet. Nachgebaut wäre er ein Kreis ohne Bedeutung; Icons mit Bedeutung
   hätte ich erfinden müssen (die Section hat keine Icons je Zeile). Die Zeilen
   sind deshalb Pillen in den Marken-Tokens. Wenn die Punkte ausdrücklich
   gewünscht sind, kommen sie als ::after je Zeile dazu — eine Regel.

   Die Zustandshaltung ist data-offen an .flm, gesetzt vom Klick-Zweig der
   Section (dort dokumentiert). Ohne JS bleibt die Leiste zu und man sieht nur
   den Knopf — kein toter Inhalt, nichts kaputt. */
body .sec-297 .flm__fab{ display: none; }

@media (max-width: 767px){
  /* Aus der Mitte des rechten Randes in die untere rechte Ecke. safe-area für
     iPhones mit Home-Indikator — sonst sitzt der Knopf auf der Systemleiste. */
  body .sec-297 .flm{
    inset-block-start: auto;
    inset-block-end: calc(var(--sp-5, 1.5rem) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--sp-4, 1rem);
    transform: none;
    align-items: flex-end;
    gap: var(--sp-3, .75rem);
  }

  /* Die Reiter werden waagerechte Pillen: writing-mode und die 180°-Drehung der
     Beschriftung zurücknehmen, Rahmen gegen Fläche tauschen. Der Radius aus
     Punkt 1d (nur linke Ecken) wird hier von --r-pill überschrieben — rund ist
     rundum, die Pille dockt an keiner Kante mehr an. */
  body .sec-297 .flm__knopf{
    display: flex; align-items: center;
    padding: var(--sp-3, .75rem) var(--sp-5, 1.5rem);
    border: 0;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-secondary, #121411);
    color: var(--c-white, #fff);
    box-shadow: var(--shadow-md);
    transition: opacity var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)),
                transform var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)),
                visibility var(--motion-base, 250ms);
  }
  /* Punkt 1d rundet oben-links und unten-links des STAPELS mit --r-card. Seine
     Selektoren tragen ein :nth-child() und sind damit spezifischer als die
     Pillen-Regel darüber — gemessen blieben dadurch „8px 9999px 9999px" bzw.
     „9999px 9999px 9999px 8px" stehen, also je eine eckige Ecke pro Pille.
     Hier gleiche Spezifität, aber später in der Datei: rundum rund. */
  body .sec-297 .flm__knopf:nth-child(1 of .flm__knopf),
  body .sec-297 .flm__knopf:nth-last-child(1 of .flm__knopf){ border-radius: var(--r-pill, 9999px); }
  body .sec-297 .flm__knopf--voll{ background: var(--c-primary, #253746); }
  body .sec-297 .flm__knopf:hover{ background: var(--c-primary-dark, #1b2731); }
  body .sec-297 .flm__label{
    writing-mode: horizontal-tb; transform: none;
    white-space: nowrap;
  }

  /* Zugeklappt ist der Ausgangszustand — auch OHNE data-offen, damit die Zeilen
     beim Laden nicht kurz aufblitzen, bevor das Skript läuft.
     visibility statt display, damit der Übergang etwas zu animieren hat;
     pointer-events, damit die unsichtbaren Zeilen keine Tipps abfangen. */
  body .sec-297 .flm:not([data-offen="ja"]) .flm__knopf{
    opacity: 0; visibility: hidden;
    transform: translateY(var(--sp-2, .5rem));
    pointer-events: none;
  }

  /* Der Umschalter. 3,5 rem = 56 px, also bequem über der 44-px-Grenze für
     Tippziele — er ist mobil der einzige Weg in die beiden Panels. */
  body .sec-297 .flm__fab{
    display: flex; align-items: center; justify-content: center;
    inline-size: 3.5rem; block-size: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-primary, #253746);
    color: var(--c-white, #fff);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1));
  }
  body .sec-297 .flm__fab:hover{ background: var(--c-primary-dark, #1b2731); }
  body .sec-297 .flm__fab:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 3px; }
  body .sec-297 .flm__fab svg{ inline-size: 1.5rem; block-size: 1.5rem; display: block; }
  /* „i" zugeklappt, „×" aufgeklappt — zwei Träger, einer ist immer aus. */
  body .sec-297 .flm__fab-auf,
  body .sec-297 .flm__fab-zu{ display: flex; }
  body .sec-297 .flm__fab-zu{ display: none; }
  body .sec-297 .flm[data-offen="ja"] .flm__fab-auf{ display: none; }
  body .sec-297 .flm[data-offen="ja"] .flm__fab-zu{ display: flex; }
}

/* 4) Kontaktseite, Formular-Abschnitt (LAB-CF-004): Die Live-Seite stellt dem
      Formular eine Preheadline + H2 voran. Die Section bringt dafür keinen Slot
      mit — der Kopf wurde im HTML ergänzt und sitzt in derselben Rasterspalte
      wie das Formular (3–11), damit die Kanten fluchten. */
.sec-283 .kf__kopf{ margin-bottom: var(--space-head-gap, 3rem); }
.sec-283 .kf__kopf h2{ margin-bottom: 0; }

/* 5) Rechtstexte (LAB-ART-003): Die Live-Seite nutzt in der Datenschutz-
      erklärung zwei Aufzählungen. Das DS setzt ul{list-style:none} — hier die
      Marker zurückholen, damit die Listen als Listen lesbar bleiben. */
.sec-071 .lfp__liste{
  list-style: disc; padding-left: 1.25rem; margin: 0 0 var(--space-stack, 1rem);
  max-width: 65ch;
}
.sec-071 .lfp__liste li + li{ margin-top: .35rem; }

/* ══ 6) BILD-MIGRATION VON DER LIVE-SEITE (03.09.2026) ═══════════════════════
      Alle Bilder kommen jetzt als Originaldateien aus img/ (Abzug von
      https://adrico.de/, keine Neukomprimierung). Die drei Regeln hier räumen
      auf, was die Section-Vorgaben für ECHTE Dateien nicht vorgesehen hatten.
      Höhere Spezifität über den vorangestellten `body`, weil die Section-
      <style>-Blöcke im Dokument NACH dieser Datei stehen.

   6a) Partner-Laufband (LAB-CT-004, nur partner.html): Der Logo-Platz der
       Section ist 11rem × 5rem (176 × 80 px). Die Partnerlogos der Live-Seite
       sind Originale in 130 × 50 px — object-fit:contain hätte sie auf 176 px
       Breite hochgezogen, also 1,35× und auf einem 2×-Display 2,7×. Bei
       Wortmarken mit dünnen Strichen sieht man das sofort. Deshalb auf
       Originalmaß gedeckelt; der Platz in der Reihe bleibt gleich, das Logo
       steht darin zentriert. Auf den übrigen Seiten liegen im selben Laufband
       die Fahrzeugmarken (200 × 200) — die werden VERKLEINERT und brauchen die
       Deckelung nicht, deshalb die eigene Klasse statt einer globalen Regel. */
body .sec-285 .mkz__logo.mkz__logo--nativ{
  inline-size: 8.125rem;   /* 130 px — das Originalmaß, fest statt auto:      */
  block-size:  3.125rem;   /*  50 px   auto liess das lazy geladene Bild im   */
  object-fit: contain;     /*          Laufband auf 0 x 0 zusammenfallen.     */
}
/*  Ein einziges Logo ist live verlinkt (Weser Assekuranz Kontor). Der Link
    wird zum Flex-Kind der Gruppe und muss sich verhalten wie ein Logo, sonst
    schrumpft er im Laufband. Er sitzt an Position 1 — die :nth-child(3n+…)-
    Breitenstaffel der Section zählt dadurch unverändert weiter. */
body .sec-285 .marquee-group > a{ display: flex; align-items: center; flex-shrink: 0; }

/* 6b) Fußleiste, Bankenlogos (LAB-FOOT-017): gleiche Rechnung. Die Originale
       sind 120 × 40 px, die Section stellt 3,5rem (56 px) Höhe bereit — 1,4×.
       Auf Originalhöhe gedeckelt. Die Leiste behält ihre Höhe, weil die
       Rasterzeile sie vorgibt, nicht das Bild. (Unter 768 px setzt die Section
       ohnehin schon 2,5rem = Originalmaß.) */
body .sec-288 .ftr__logo{
  block-size: auto;  max-block-size: 2.5rem;       /*  40 px */
  max-inline-size: 7.5rem;                          /* 120 px */
}

/* 6) LAB-CO-022 ohne USP-Boxen: Auf der Anschlussfinanzierung führt die
      Live-Seite an dieser Stelle keine Boxen — die rechte Spalte ist deshalb
      im HTML weg. Ohne diese Regel bliebe der Textblock auf sieben Spalten
      stehen und rechts ein leeres Fünftel. :only-child trifft genau den Fall
      „keine Boxen" und lässt die anderen 14 Seiten unberührt. */
.sec-295 .grid > .uspb__text:only-child{ grid-column: 1 / -1; }

/* 6c) Kontaktseite, Regionskarten (LAB-EP-008): Die Bildfläche der Karte ist
       16/9 (.card__img-placeholder). Die fünf Regionskarten der Live-Seite sind
       quadratisch (300 × 300, mit Transparenz) — mit background-size:cover wären
       oben und unten je 22 % der Landkarte weggeschnitten gewesen, bei „Nord"
       genau der Teil, der die Region erkennbar macht. Deshalb hier contain: die
       Karte steht vollständig, mittig, auf ruhigem Grund — so wie live.
       Mit !important, damit auch ein späterer Bild-Upload über den Editor
       (der schreibt immer cover ins style-Attribut) den Zuschnitt nicht
       zurückholt. */
body .sec-281 .ep__media{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: var(--c-neutral-light, #f6f7f9);
}

/* 6d) HERO-BILDER WAREN UNSICHTBAR (LAB-HERO-015) — Bibliotheksfehler.
       Die Section legt ihre Editor-Bildfläche als .hero-e__bg mit z-index:-1 an
       ("nur ergänzt, nichts Bestehendes geändert" steht im Section-Kommentar).
       Bestehen geblieben ist aber der DECKENDE Marken-Verlauf auf .hero-e
       selbst: `linear-gradient(135deg, var(--c-primary), var(--c-secondary))`.
       .hero-e ist kein eigener Stapelkontext (position:relative, z-index:auto),
       also malt das -1-Kind HINTER den Hintergrund des Elternteils — und der
       ist blickdicht. Ergebnis: das Hero-Bild wurde geladen, war aber auf
       keiner der 19 Hero-Seiten je zu sehen. Vor der Bild-Migration ist das
       niemandem aufgefallen, weil dort ohnehin nur ein Platzhalter lag.

       Hier wird deshalb NUR die zweite, deckende Verlaufsebene abgeräumt,
       sobald die Fläche wirklich ein Bild trägt. Der Abdunkler der Section
       (erste Ebene, 78/30/5 % von unten) bleibt Zeichen für Zeichen erhalten —
       er ist es, der die weiße Headline über hellen Motiven lesbar hält.
       Ohne Bild (Platzhalter-Zustand, neue Seite) greift die Regel nicht und
       der Marken-Verlauf steht wie gehabt.

       GEHÖRT IN DIE BIBLIOTHEK ZURÜCK (section-zurueckspielen, LAB-HERO-015):
       dort denselben :has()-Fall aufnehmen, sonst bringt jeder neue Export und
       jede weitere Kundenseite denselben unsichtbaren Hero mit.

       NACHTRAG 07.09.2026 — DER EDITOR HEBELT DIESE REGEL AUS.
       Setzt jemand das Hero-Bild über den Website-Editor ein, schreibt kw-api
       das Bild NICHT mehr als inline-background auf die Fläche, sondern legt
       ein Kind-Element `.kw-ki-leinwand` an (dort steht das background-image,
       samt Zuschnitt) und setzt die Fläche selbst auf `style="overflow:hidden"`.
       Damit passte `[style*="background-image"]` nicht mehr, der blickdichte
       Marken-Verlauf kam zurück — und das eingesetzte Bild war wieder
       unsichtbar. Auf der Live-Betapage war der Hero der Startseite deshalb
       fast schwarz, obwohl die Datei geladen wurde (gemessen: index-hero.webp
       171 KB, ausgeliefert, Leinwand 1464x500 mit cover — nur eben hinter einem
       deckenden Verlauf).
       Der zweite Selektor deckt genau diese Form ab. Beide Fälle stehen
       bewusst nebeneinander statt über eine lockerere Bedingung: `:has(>
       .hero-e__bg[data-kw-bild])` würde auch im Platzhalter-Zustand greifen und
       den Marken-Verlauf dort abräumen, wo er hingehört. */
body [data-sec="LAB-HERO-015"] .hero-e:has(> .hero-e__bg[style*="background-image"]),
body [data-sec="LAB-HERO-015"] .hero-e:has(> .hero-e__bg .kw-ki-leinwand[style*="background-image"]){
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--c-secondary-dark) 78%, transparent) 0%,
      color-mix(in srgb, var(--c-secondary-dark) 30%, transparent) 42%,
      color-mix(in srgb, var(--c-secondary-dark) 5%, transparent) 68%);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION — Live-Proportionen, dritte Ebene, Chevrons, sticky
   Referenz: https://adrico.de/ · gemessen am 1440er-Screenshot (1,6-fach
   vergrößert und zurückgerechnet):
       Gesamthöhe Kopf ~130px · Topbar ~45px · Navigationszeile ~85px
       schwarzer Logo-Block endet bei x≈428 · Logo ~250×61, über BEIDE Zeilen
       zentriert und damit sichtbar in die Topbar hineinragend
       Menüpunkte ~17px, links nach dem Block beginnend, Suche rechts außen

   WARUM LAB-TOP-002 TROTZDEM EINE EIGENE SECTION BLEIBT:
   Louis hat erlaubt, die Topbar in die Navigation zu ziehen, falls die Trennung
   im Weg steht. Sie steht nicht im Weg. Das Einzige, was zwei Sections nicht
   können, ist ein Logo-Block über beide Zeilen — und genau das löst ein
   negatives margin-top am Block: er wächst nach oben über die Topbar, deren
   .tpb__platz diese Breite ohnehin freihält. Ein Umbau von 21 Seiten plus neuer
   Section-Fassung wäre also Aufwand ohne Gegenwert; die Bibliothek behält ihre
   saubere Trennung Topbar/Navigation.
   ══════════════════════════════════════════════════════════════════════════════ */

/* N1 · Maße auf die Live-Werte */
body .sec-291 .nvg{ --nav-h: 84px; --sec-markenblock: 19.5rem; }
body .sec-290 .tpb{ --sec-markenblock: 19.5rem; }

/* N2 · Der Logo-Block spannt über Topbar UND Navigationszeile.
   --kopf-topbar ist die Höhe, um die er nach oben wächst; sie muss zur
   min-height der Topbar passen (2.75rem = 44px) — beide Werte gehören zusammen,
   deshalb steht der Bezug hier und nicht als Zahl im Block. */
body .sec-291 .nvg{ --kopf-topbar: 2.75rem; }
body .sec-291 .nvg__marke{
  margin-block-start: calc(-1 * var(--kopf-topbar));
  padding-inline-start: calc(50vw - 50% + var(--sp-5, 1.5rem));
  padding-inline-end: var(--sp-5, 1.5rem);
  justify-content: flex-start;
}
/* Das Logo in Naturgröße (250×61) statt der bisherigen 36px-Höhe — so groß wie
   live. Es sitzt mittig in den 128px aus Topbar + Leiste. */
body .sec-291 img.nvg__logo{ block-size: 61px; inline-size: auto; max-inline-size: 100%; }

/* N3 · Menü beginnt LINKS nach dem Block (live), Suche bleibt rechts außen.
   Vorher schob margin-inline-start:auto das ganze Panel nach rechts. */
body .sec-291 .nvg__panel{ margin-inline-start: var(--sp-7, 3rem); }
body .sec-291 .nvg__werkzeuge{ margin-inline-start: auto; }
/* Menüpunkte größer (live ~17px; --fs-body ist die Token-Stufe darunter) */
body .sec-291 .nvg__link{ font-size: var(--fs-body, 1rem); }

/* N4 · Chevron an Menüpunkten MIT Untermenü.
   Der Bau liefert die Vorlage-Pfeile nicht mit: im Markup stehen 0 .nvg__pfeil
   (nachgezählt), obwohl die Section-CSS Regeln dafür hat — injiziereNav() klont
   nur den Link. Statt 21 Seiten anzufassen, zeichnet CSS den Pfeil: :has() findet
   die Items mit Untermenü, ::after ist der Winkel, gedreht beim Aufklappen. */
body .sec-291 .nvg__item:has(> .nvg__sub) > .nvg__link::after{
  content: ''; inline-size: .42em; block-size: .42em; margin-inline-start: .5em;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease);
}
body .sec-291 .nvg__item:has(> .nvg__sub):hover > .nvg__link::after,
body .sec-291 .nvg__item:has(> .nvg__sub):focus-within > .nvg__link::after{
  transform: translateY(.1em) rotate(225deg);
}

/* N5 · DRITTE EBENE ERST BEI HOVER.
   Der Bau legt die dritte Ebene FLACH in dasselbe Panel und stempelt sie nur:
   die Elternzeile trägt data-nav-gruppe="1", die Enkel data-nav-tiefe="3"
   (gemessen: 1 Elternzeile, 4 Enkel). Verschachtelte data-nav="sub" werden laut
   Haus-Regel nicht befüllt — die flache Struktur ist also Absicht und bleibt.

   Sichtbar werden die Enkel deshalb per :has(), nicht per Umbau:
     · Zeiger auf der Elternzeile      → Enkel einblenden
     · Zeiger auf einem Enkel          → Enkel bleiben
   Beides zusammen ergibt eine durchgehende Hover-Fläche ohne Lücke, weil die
   Enkel direkt unter der Elternzeile liegen. Tastatur deckt :focus-within ab. */
/* Die Hülle .nvg__gruppe umfasst Elternzeile UND Enkel — ein :hover, das über
   beide Bereiche durchgeht. Ohne sie riss der Zeigerweg ab: verlässt der Zeiger
   die Elternzeile, verliert sie :hover, die Enkel verschwinden im selben Moment
   — und weil sie verschwinden, können sie den Zeiger nicht auffangen. Gemessen
   und deshalb eingehüllt (Skript über alle 21 Seiten). */
body .sec-291 .nvg__gruppe{ display: flex; flex-direction: column; }
body .sec-291 .nvg__enkel{ display: none; flex-direction: column; }
body .sec-291 .nvg__gruppe:hover > .nvg__enkel,
body .sec-291 .nvg__gruppe:focus-within > .nvg__enkel{ display: flex; }

/* Chevron an der Elternzeile der dritten Ebene — sie zeigt nach unten, weil die
   Enkel darunter aufgehen und nicht seitlich. */
body .sec-291 .nvg__sublink[data-nav-gruppe="1"]{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, .75rem); }
body .sec-291 .nvg__sublink[data-nav-gruppe="1"]::after{
  content: ''; inline-size: .42em; block-size: .42em; flex: 0 0 auto;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease);
}
body .sec-291 .nvg__gruppe:hover > .nvg__sublink[data-nav-gruppe="1"]::after,
body .sec-291 .nvg__gruppe:focus-within > .nvg__sublink[data-nav-gruppe="1"]::after{
  transform: translateY(.1em) rotate(225deg);
}

/* N6 · Der ganze Kopf bleibt beim Scrollen stehen, nicht nur die Leiste.
   Die Section-CSS lässt die Topbar bewusst wegscrollen; Louis will beide.
   Kein Layout-Sprung, weil sticky den Platz im Fluss behält — im Gegensatz zu
   fixed. Die Topbar klebt bei 0, die Leiste darunter bei ihrer Höhe.
   z-index: die Leiste liegt über der Topbar, damit ihr aufgeklapptes Untermenü
   nicht unter der Topbar der nächsten Seite hängt; beide über dem Inhalt und
   unter dem Floating-Menü (z-index 90 in LAB-KO-017) — nein, DARÜBER, sonst
   deckt der Reiter das Menü zu: 500/510 wie es die Section-CSS selbst vorsieht.

   KORRIGIERT 03.09.2026 — vorher stand sticky auf .tpb und .nvg selbst, und es
   WIRKTE NICHT. Ein sticky Element klebt nur innerhalb seines Elternkastens;
   .nvg sitzt in .sec-291, und der ist genau so hoch wie die Leiste (85px
   gemessen). Damit war der Weg, den es kleben durfte, null Pixel lang: beim
   Scrollen auf 2000 stand der Kopf bei top −1956.
   Die Regel gehört eine Ebene höher, auf .sec-290/.sec-291. Deren Elternkasten
   ist der KÖRPER (7249px), weil .ws-block display:contents trägt und selbst
   keinen Kasten bildet — dort ist Weg genug.
   Gefunden erst beim echten Scroll-Test; die berechnete Eigenschaft sagte die
   ganze Zeit „sticky", nur bewegt hat sich nichts. */
body .sec-290{ position: sticky; top: 0; z-index: 500; }
body .sec-291{ position: sticky; top: 2.75rem; z-index: 510; }

@media (max-width: 1024px){
  /* Gestapelt gibt es keinen Block, in den das Logo hineinragen könnte. */
  body .sec-291 .nvg{ --sec-markenblock: 14rem; }
  body .sec-290 .tpb{ --sec-markenblock: 14rem; }
  body .sec-291 .nvg__marke{ margin-block-start: calc(-1 * var(--kopf-topbar)); }
  body .sec-291 img.nvg__logo{ block-size: 46px; }
  body .sec-291 .nvg__panel{ margin-inline-start: 0; }
  /* Mobil klappt die dritte Ebene auf — dort ist Hover kein Bedienweg. */
  body .sec-291 .nvg__enkel{ display: flex; }   /* mobil aufgeklappt — Hover ist dort kein Bedienweg */
  body .sec-291 .nvg__sublink[data-nav-gruppe="1"]::after{ display: none; }
}
@media (max-width: 767px){
  body .sec-291 .nvg__marke{ margin-block-start: 0; }   /* Topbar ist mobil zentriert, kein Block */
  body .sec-291 img.nvg__logo{ block-size: 40px; }
  body .sec-290 .tpb{ position: static; }               /* nur die Leiste klebt, sonst frisst der Kopf den Schirm */
  body .sec-291 .nvg{ top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER (LAB-FOOT-017) — gegen die Live-Werte gestellt
   Beide Seiten vermessen (1440, Live-Kopie lokal ausgeliefert und im iframe
   gemessen — die Live-Seite hat keine externen Stylesheets, 28 Inline-Blöcke,
   deshalb rendert eine Kopie vollständig):

                        LIVE            vorher (unser)
     Headline           35px / 600      40px / 700
     Headline-Breite    727px, 2 Zeilen 996px, 1 Zeile
     Spaltentitel       ohne Versalien  14px / 700 / uppercase / ls 1,12px
     Partner-Logos      grayscale(1)    filter: none
   ══════════════════════════════════════════════════════════════════════════════ */

/* F1 · Headline: kleiner und bewusst zweizeilig — über die BREITE, nicht per <br>.
   35px liegt zwischen den Token-Stufen (--fs-h2 = 32, --fs-h1 = 40); genommen wird
   die Stufe darunter, weil ein fester Zwischenwert die Marken-Skala aushebeln
   würde. 45rem ≈ 720px, das Maß, bei dem live die zweite Zeile beginnt. */
body .sec-288 .ftr__zuruf h2{
  font-size: var(--fs-h2, 2rem);
  font-weight: var(--fw-semibold, 600);
  /* 40rem statt 45: bei genau 45rem (720px) passte der Satz auf EINE Zeile — die
     natürliche Textbreite ist bei 32px exakt 720px (gemessen). 40rem erzwingt die
     zweite Zeile, text-wrap:balance teilt sie gleichmäßig statt ein Wort
     überhängen zu lassen. Kein <br>, wie gefordert. */
  max-inline-size: 40rem;
  margin-inline: auto;
  text-wrap: balance;
}

/* F2 · Spaltentitel ohne Versalien.
   Die Hierarchie zu den Links darunter trägt jetzt die GRÖSSE (16 gegen 14) und
   das Gewicht (600 gegen 400) — vorher trug sie Versalien plus Sperrung, was den
   Titel wie ein Etikett aussehen ließ statt wie eine Überschrift. */
body .sec-288 .ftr__spaltentitel{
  font-size: var(--fs-body, 1rem);
  font-weight: var(--fw-semibold, 600);
  text-transform: none;
  letter-spacing: 0;
}

/* F3 · Firmenname zweizeilig wie live. Nur der Name im Marken-Block, nicht die
   Spaltentitel — deshalb der engere Selektor. */
body .sec-288 .ftr__marke .ftr__spaltentitel{
  display: block;          /* der Firmenname ist ein <span> — inline ignoriert jede Breite */
  max-inline-size: 12rem;
}

/* F4 · FÜNF gleich breite Spalten in EINER Zeile — wie live.
   Vorher: Marken-Block col-span-4 (384px) und vier Link-Spalten col-span-2
   (je 180px). Ungleich, und die 180px klebten mit 24px Rinne aneinander.

   MEIN ERSTER VERSUCH WAR FALSCH: Ich hatte den Marken-Block in eine eigene
   Zeile gelegt und vier Spalten daruntergestellt. Das macht aus fünf Spalten
   vier plus eine Zeile — nicht gewollt. Louis hat es am Bild gesehen.

   Fünf gleiche Spalten sind im 12er-Raster nicht darstellbar (12/5 = 2,4), also
   bekommt DIESES Gitter fünf gleiche Spuren. Das ist keine Sonder-Proportion,
   sondern eine gleichmäßige Reihe — genau der Fall, den scripts/check-section.js
   in seiner Grid-Regel ausdrücklich erlaubt ("gleichmäßige Reihen, z.B.
   repeat(3, 1fr)"). Die Section-Kanten verschieben sich dadurch nicht: das
   Gitter liegt INNERHALB des Containers, seine Außenkanten bleiben die des
   Containers. Rinne unverändert --grid-gutter.
   Ergebnis bei 1440: 5 × 220px statt 384 + 4 × 180. */
body .sec-288 .ftr__menue{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
body .sec-288 .ftr__menue > *{ grid-column: span 1; }

/* F5 · Partner-Logos: schwarz, im Hover die Originalfarben.  (03.09.2026)
   EIN Asset, kein zweiter Satz Dateien — die Live-Seite macht es genauso, dort
   mit grayscale(1) (nachgemessen). brightness(0) faerbt jeden sichtbaren Pixel
   schwarz und laesst den Alphakanal unberuehrt: keine Verzerrung, kein
   Qualitaetsverlust, Proportionen unveraendert (object-fit: contain steht in der
   Section). Der Untergrund der Leiste ist --c-neutral-light (#fdfdfd), schwarz
   steht dort also mit vollem Kontrast.

   VORHER war die Kette blau, UND der Hover war kaputt. Es gab drei Regeln, die
   mittlere blendete alle Logos ab, solange der Zeiger irgendwo in der Leiste
   stand:
       body .sec-288 .ftr__logos:hover img.ftr__logo   -> (0,4,2)
       body .sec-288 img.ftr__logo:hover               -> (0,3,2)
   Die Geschwister-Regel ist spezifischer und gewinnt trotz spaeterer
   Quellreihenfolge — filter:none kam nie an. Mit erzwungenem :hover per CDP
   nachgemessen: das behoverte Logo trug denselben Wert wie sein Nachbar
   (brightness .62 / saturate 2.2), also nie seine Originalfarben.
   Deshalb ist die Geschwister-Regel ERSATZLOS weg. Sie wird nicht mehr
   gebraucht: schwarz IST der zurueckgenommene Zustand, und das eine Logo, das
   Farbe bekommt, hebt sich davon deutlicher ab als vorher vom Blau.
   Wer hier wieder eine Leisten-Regel ergaenzt, macht den Hover erneut kaputt —
   dann muss sie :not(:hover) tragen.

   Kein :focus-visible: die Logos sind reine <img> ohne Link (nachgesehen), es
   gibt also nichts zu fokussieren. Werden sie spaeter verlinkt, gehoert hier
   ein :focus-visible-Zweig dazu, der denselben Filter wie :hover setzt. */
body .sec-288 img.ftr__logo{
  filter: brightness(0);
  transition: filter var(--motion-base, 250ms) var(--ease-standard, ease);
}
body .sec-288 img.ftr__logo:hover{ filter: none; }
/* Hauspflicht: die Abschaltung wiederholen, sonst uebersteuert die Regel oben
   die System-Einstellung. Der Farbwechsel bleibt, nur ohne Uebergang. */
@media (prefers-reduced-motion: reduce){
  body .sec-288 img.ftr__logo{ transition: none; }
}

@media (max-width: 1024px){
  /* Tablet: fünf Spalten wären zu schmal — drei, dann bricht die zweite Reihe um. */
  body .sec-288 .ftr__menue{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .sec-288 .ftr__zuruf h2{ max-inline-size: 32rem; }
}
@media (max-width: 767px){
  /* Telefon: eine Spalte, alles untereinander. Fünf Spuren wären hier 90px breit. */
  body .sec-288 .ftr__menue{ grid-template-columns: minmax(0, 1fr); }
  body .sec-288 .ftr__marke .ftr__spaltentitel{ max-inline-size: none; }
  body .sec-288 .ftr__zuruf h2{ max-inline-size: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   VIER PUNKTE AUS DER ZWEITEN ABNAHME-RUNDE
   Jeder Ausgangswert vor der Änderung gemessen (1440, iframe).
   ══════════════════════════════════════════════════════════════════════════════ */

/* P1 · LAB-CRD-010: die zwei Reihen auf fahrzeugfinanzierung als EIN Raster.
   Gemessen: senkrechter Abstand zwischen den Karten-Rastern 192px, waagerechte
   Rinne 24px — also achtmal so groß. Die 192 sind 96 padding-bottom der ersten
   plus 96 padding-top der zweiten Section (--section-py).
   Getroffen wird nur ein DIREKT aufeinanderfolgendes Paar, über die Stellung im
   Dokument — nicht über eine Seiten-Liste. Die zweite Reihe hat keinen eigenen
   Kopf (nachgeprüft), es steht also nichts zwischen den Karten.
   Ergebnis: 24px, so groß wie die Rinne — die beiden Reihen lesen sich als ein
   zusammenhängendes Kartengitter. */
body [data-sec="LAB-CRD-010"]:has(+ [data-sec="LAB-CRD-010"]) .kart118{ padding-block-end: 0; }
body [data-sec="LAB-CRD-010"] + [data-sec="LAB-CRD-010"] .kart118{ padding-block-start: var(--grid-gutter, 24px); }

/* P2 · LAB-CTA-007: Buttons nebeneinander — über das SPALTENVERHÄLTNIS.
   Gemessen: Textspalte col-span-6 = 588px, die zwei Buttons brauchen zusammen
   376 + 296 = 672px. Sie sind also nicht zu groß, die Spalte ist zu schmal —
   deshalb sind sie umgebrochen. Genau wie gefordert wird nicht am Button
   gedreht, sondern am Verhältnis: Text auf acht Spalten (792px), Bild auf drei
   (282px statt 384px). Spalte 9 bleibt als Luft dazwischen.
   Der Button-Container ist bereits flex mit wrap — bei 792px stehen die beiden
   von selbst in einer Zeile, und auf schmalen Breiten brechen sie weiter um. */
@media (min-width: 1025px){
  body .sec-286 .pcta__text{ grid-column: span 8; }
  /* Bildspalte auf 9–12: 384px breit (statt 282) und nur noch EINE Rinne Abstand
     zum Text (24px statt 126). Vorher lag Spalte 9 als Luft dazwischen — das war
     der „viel zu viele Raum" zwischen den Blöcken. 8 + 4 = 12, die Reihe geht
     glatt auf: 792 + 24 + 384 = 1200. Die zwei Buttons (672) passen weiter. */
  body .sec-286 [class*="pcta__portrae"]{ grid-column: 9 / span 4; }

  /* Bild höher als breit und insgesamt größer: 3/4 statt 4/5 ergibt bei 384px
     Breite 512px Höhe (vorher 282 × 353).
     WARUM DAS DEN RAUM OBEN LÖST: Das Bild hängt an der Unterkante
     (align-self: end) und ragt um --sec-ueberstand (64px) unten aus dem Band —
     das bleibt so. Seine Oberkante folgt daraus rückwärts aus der Höhe. Mit 512
     statt 353 wandert sie 159px nach oben: gemessene 196px Luft über dem Bild
     werden zu 37. Mehr Höhe (2/3 = 576) würde oben aus dem Band herausstehen,
     und herausschauen soll es nur unten.
     Und der Kopf: bei 50% 50% schnitt cover oben an. 50% 15% rückt den Ausschnitt
     nach oben, das Gesicht steht vollständig. */
  body .sec-286 .pcta__bild{ aspect-ratio: 3 / 4; }
}
/* Der Bildausschnitt gilt in ALLEN Breiten — gestapelt schnitt der Kopf genauso
   an. Und er braucht !important: die Bildfläche trägt background-position INLINE
   im style-Attribut (so schreibt der Bau/Editor jedes Bild), und inline schlägt
   jeden Selektor. Ohne das blieb die Regel wirkungslos — gemessen 50% 50%.
   Dieselbe Lage wie bei den Regionskarten in Punkt 6c. */
body .sec-286 .pcta__bild{ background-position: 50% 15% !important; }
/* Nur ab 1025px: gestapelt ist das Bild volle Breite, und 3/4 wären dort über
   1100px hoch. Unter 1025px bleibt die Section bei ihrem eigenen Verhältnis. */

/* Headline wie live auf h3-Maß. Semantisch ist sie BEREITS ein <h3> — die
   Section liefert <h3 class="h2">, also h3-Struktur mit h2-Optik. Es gibt hier
   also keine SEO-Frage zu entscheiden: an der Dokument-Gliederung ändert sich
   nichts, nur die Größe geht von 32px (--fs-h2) auf das h3-Maß. */
body .sec-286 .pcta__text h3.h2{ font-size: var(--fs-h3, 1.75rem); }
/* Die Klammer ist Pflicht, nicht Kosmetik: unter 1025px hat das Raster 8 Spalten
   (mobil 4). "10 / span 3" zeigt dort ins Leere — gemessen fiel die Bildspalte
   auf 48px zusammen. Unter 1025px greifen weiter die col-t-*-Klassen der
   Section, die dort ohnehin einspaltig stapeln. */

/* P3 · LAB-FAQ-015: Animation deutlich weicher.
   Der Mechanismus (::details-content + interpolate-size + content-visibility)
   stimmt und bleibt. Zu hart waren die WERTE: 250ms mit --ease-standard.
   Jetzt --motion-slow (400ms) und --ease-emphasized (die Haus-Kurve mit dem
   langen, weichen Auslauf) — für Öffnen UND Schließen gleich, damit sich beide
   Richtungen gleich anfühlen. Dazu blendet der Inhalt mit auf, sonst steht der
   Text hart in der wachsenden Fläche.
   Nicht länger als 400ms: darüber wirkt ein Akkordeon zäh statt weich. */
@supports selector(::details-content){
  body .sec-145 .bfaq__list details::details-content{
    transition: block-size var(--motion-slow, 400ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1)),
                content-visibility var(--motion-slow, 400ms) allow-discrete;
  }
  /* KEINE Opacity-Einblendung: im Versuch blieb der Inhalt auf opacity 0 stehen
     (programmatisch geoeffnet, nach 700ms noch 0). Ein Fade, der nicht anlaeuft,
     macht den Antworttext unsichtbar — das Risiko ist groesser als der Gewinn.
     Die Hoehen-Animation bewegt den Text ohnehin natuerlich mit; genau das war
     die Anforderung. Weicher wird es hier ueber Dauer und Kurve, nicht ueber
     einen zweiten Effekt. */
}

/* P4 · LAB-EP-008: Regionskarten großzügiger, Bundesland-Listen raus.
   Gemessen: Bildfläche 380 × 214 (aspect-ratio 16/9) bei quadratischen
   Kartenbildern (300 × 300). Mit dem bereits gesetzten contain (Punkt 6c) wird
   nichts abgeschnitten — die Karte stand aber klein zwischen breiten Leerrändern
   links und rechts. Ein Kasten näher am Quadrat gibt demselben Bild mehr Fläche:
   der Kasten wird quadratisch, dann deckt das Bild ihn mit contain exakt.
   Kartenbreite bleibt unverändert (384px, feste Spalte).

   RAND STATT POLSTER — und das ist keine Geschmacksfrage: mit padding füllt das
   Bild nur den Inhaltskasten, absolut positionierte Kinder beziehen sich aber auf
   den POLSTERKASTEN. Die Standort-Punkte aus P5 lägen dann um das Polster
   verschoben. Mit margin schrumpft der Kasten selbst, das Bild deckt ihn genau,
   und Prozente sind exakt Prozente des Bildes. Die Luft zum Kartenrand ist
   dieselbe. */
body .sec-281 .ep__media{
  aspect-ratio: 1 / 1;
  margin: var(--sp-5, 1.5rem);
  /* inline-size: auto ist PFLICHT, nicht Kosmetik: die Bildfläche erbt
     width:100% (.card__img-placeholder im Design_System). 100% rechnet gegen die
     Kartenbreite OHNE Rand — mit margin lief das Bild dadurch 22px rechts aus der
     Karte und wurde von deren overflow:hidden abgeschnitten (gemessen: links 26px
     Luft, rechts −22px). Mit auto füllt der Block den Rest NACH dem Rand. */
  inline-size: auto;
  position: relative;          /* Bezug für die Punkte aus P5 */
}
/* Die Bundesland-Aufzählung entfällt — sie nahm dem Bild die Höhe.
   BEWUSST nur ausgeblendet, nicht aus dem HTML entfernt: die Zeile trägt den
   Editor-Schlüssel b281-p-1. Löschen hieße Schlüssel aus dem Kontobuch nehmen
   und website.json nachziehen; ausblenden lässt ihn unangetastet. Soll dort
   später wieder etwas stehen, genügt es, diese Regel zu löschen. */
body .sec-281 .ep__role{ display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   P5 · LAB-EP-008: Standort-Punkte auf den Regionskarten
   Positionen aus der Live-Seite, nicht geschätzt. adrico.de/kontakt/ nutzt
   Elementors Hotspot-Widget. Ausgelesen habe ich nicht das Markup — die
   Positionsregeln liegen dort in 31 Repeater-Klassen verstreut, und ein
   Textfenster um das Bild greift Nachbar-Widgets mit ab (erster Versuch gab
   „sued" acht Punkte, fünf davon von „ost") — sondern den GERENDERTEN DOM je
   Widget: Bild darin, Mittelpunkte der Punkte, in Prozent des Bezugsrahmens.
   Der ist live 290 × 290, also quadratisch wie unsere Karten.
       Nord 4 · Ost 6 · Süd 2 · NRW 1 · Mitte 3  =  16 Punkte
   Sie stehen im HTML mit --x/--y im style-Attribut und tragen data-kw-frei="1"
   (Deko-Opt-out) plus aria-hidden — reine Positions-Marken ohne Inhalt, deshalb
   KEIN Editor-Schlüssel und keine Änderung am Kontobuch (geprüft: 180 Schlüssel
   vor und nach dem Einsetzen).
   Der Bau erzeugt sie nicht; nach einem neuen Export sind sie weg. Nachzug.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-281 .ep__spot{
  position: absolute;
  left: var(--x); top: var(--y);      /* der Kasten IST das Bild (s. P4) */
  inline-size: 14px; block-size: 14px;
  margin: -7px 0 0 -7px;              /* vom Eckpunkt auf den Mittelpunkt */
  border-radius: var(--r-pill, 9999px);
  background: var(--c-primary, #023a51);
  box-shadow: 0 0 0 3px var(--c-white, #fff), var(--shadow-sm);
  pointer-events: none;               /* Markierung, kein Bedienelement */
}
@media (max-width: 767px){
  /* Gestapelt ist die Karte größer — die Punkte dürfen mitwachsen. */
  body .sec-281 .ep__spot{ inline-size: 18px; block-size: 18px; margin: -9px 0 0 -9px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   P6 · LAB-CTA-012: Preheadline + H2 über der Card statt darin
   Die Section hatte ZWEI Überschriften-Paare in .pkt__text: preheadline + h2
   und darunter preheadline + h3. Heraus kommt nur das erste — das zweite ist
   die Überschrift der Card selbst und bleibt drin, so wie live.
   Die H2 bleibt eine H2, sie wandert nur strukturell nach oben; die
   Editor-Schlüssel wandern unverändert mit (geprüft: 232 bzw. 263 Schlüssel
   vor und nach dem Umbau identisch, h2-Anzahl gleich).
   HTML-Änderung auf partner.html und absatzfinanzierung.html — der Bau erzeugt
   sie nicht, nach einem neuen Export steht der Kopf wieder in der Card.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-287 .pkt__kopf{
  /* Der Abstand muss auf das BILD zielen, nicht auf die Kartenkante: das Bild
     bricht nach oben aus der Karte aus (--sec-ausbruch), stand also deutlich
     höher als die Karte und rückte der Headline auf 15 px auf die Unterkante.
     Um genau den Ausbruch verlängert, sitzt die Rollen-Distanz wieder dort, wo
     sie hingehört — an der obersten sichtbaren Kante des Inhalts.
     Die Ränder fallen mit dem margin-top der Karte zusammen (größerer gewinnt),
     darum steht hier die Summe und nicht die Differenz.
     Ab Tablet ist --sec-ausbruch 0 und der Wert fällt von selbst zurück.

     NACHGEZOGEN 03.09.2026 (zweite Rückmeldung „da muss aber mehr abstand
     sein"): eine Stufe mehr. Vermessen war der senkrechte Abstand da schon
     gleich groß wie live — Text-Unterkante → Bild-Oberkante 65 px bei uns UND
     65 px auf adrico.de/partner/. Die Enge kommt nicht von der Höhe, sondern
     davon, dass die Überschrift bei uns 50 px ÜBER die linke Bildkante läuft
     (Text bis 595, Bild ab 544), ihr Ende also direkt über der Bildecke sitzt;
     live endet der Text 65 px VOR dem Bild. Solange die Überschrift breiter
     bleibt als der Raum links des Bildes, hilft nur mehr Höhe. */
  margin-block-end: calc(var(--space-head-gap, 3rem) + var(--sec-ausbruch, 0rem) + var(--sp-6, 2rem));
  max-inline-size: 46rem;                          /* Lesebreite wie der Fließtext der Section */
}
body .sec-287 .pkt__kopf h2{ margin-block-end: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   B5 · LAB-CB-007 (Halal-Finanzierung): Hinweisbox greift in den Hero
   Derselbe Mechanismus wie bei LAB-HERO-015 + LAB-KO-017 + LAB-CRD-010:
   die Section wird um die Überlappung nach oben gezogen, ihr Kopfpolster fällt
   weg (sonst reicht der Zug nur bis unter die Hero-Kante), und ein ::before
   malt den Grund erst AB der Hero-Unterkante wieder — sonst läge ein weißer
   Balken über dem Hero-Bild.

   DAS MASS KOMMT VON LIVE, nicht aus dem Gefühl. Gemessen an
   adrico.de/halal-finanzierung/ (Elementor zieht die Section per margin-top):
       1440 px → −100 px   (60 % der Boxhöhe)
       1024 px → −40 px
        768 px → −40 px
        500 px → −50 px
   Übersetzt in die Abstands-Skala: --sp-9 (96 px) und --sp-7 (48 px). Beide
   liegen ≤ 8 px neben dem Live-Wert und sind Tokens statt Einzelzahlen.

   WARUM KEINE „HALBE BOXHÖHE" WIE BEI DEN KARTEN: Dort ist die Bildhöhe aus der
   Rasterformel berechenbar. Hier gibt teils das Signalfeld (clamp(5rem,11vw,9rem)),
   teils der Textblock die Höhe vor — gemessen 148 px bei 1440, aber 132 px bei
   1024, wo der Inhalt höher ist als das Feld. Eine Formel hätte einen der beiden
   Fälle geraten; der Live-Wert ist belegt.
   ══════════════════════════════════════════════════════════════════════════════ */
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{
  --hinw-ueberlappung: var(--sp-9, 6rem);
  position: relative; z-index: 1;
  margin-block-start: calc(-1 * var(--hinw-ueberlappung));
  padding-block-start: 0;
  background: transparent;
}
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw::before{
  content: ''; position: absolute; z-index: -1;
  inset: var(--hinw-ueberlappung) 0 0 0;
  background: var(--c-white, #fff);
}
@media (max-width: 1024px){
  body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{
    --hinw-ueberlappung: var(--sp-7, 3rem);
  }
}
/* Der Hero stellt seinen Text nach — wortgleich zur Karten-Kombination: unten ist
   jetzt die Box im Weg, der Textblock rückt in die Mitte der freien Fläche.

   ══ AM 04.09.2026 ZURÜCKGENOMMEN — gleicher Grund wie bei Block 5b, siehe C6 ══
   Der Auftrag „Overlap darf den Headline-Stack nicht verschieben" gilt für JEDE
   überlappende Kombination, nicht nur für die Kartenreihe. Diese hier ist die
   zweite im Projekt (Halal-Finanzierung, Hinweisbox LAB-CB-007) und trug
   dasselbe Ausgleichspolster. Gemessen bei 834×1112 vor der Änderung: 146 px
   über / 226 px unter dem Textblock. Jetzt mittet er im vollen Hero-Kasten
   (C6), die Hinweisbox positioniert sich unverändert selbst über ihr negatives
   margin-top und ihre Pseudo-Fläche. Rest zwischen Textunterkante und
   Boxoberkante nachgemessen: 32 px bei 390 px, mehr auf allen größeren Breiten.
   align-items:center steht jetzt in C6 für alle .sec-180-Heros. */
/* Die Tablet-Variante dieses Polsters stand hier (--sp-7 + --sp-6 = 80 px) und
   ist aus demselben Grund weg. Sie war der Grund, warum die Halal-Seite beim
   ersten Abschluss-Check als einzige noch 146/226 zeigte, obwohl der
   Desktop-Wert schon draußen war. */

/* ══════════════════════════════════════════════════════════════════════════════
   B6 · Halal-Finanzierung: zeitverzögertes Hinweis-Popup
   Live-Vorbild: Elementor-Popup 3669 mit
       "triggers": { "page_load": "yes", "page_load_delay": 3 }
   → drei Sekunden nach dem Laden, Inhalt wortgleich zur Hinweisbox. Die
   Hinweisbox im Seitenfluss bleibt, wie beauftragt.

   DER INHALT IST EIN KLON von .hinw__box, kein zweiter Text (JS im Seiten-HTML).
   Deshalb braucht dieser Block fast kein eigenes Aussehen: Signalfeld,
   Typografie, Rahmen und Radius kommen unverändert aus dem Section-CSS von
   LAB-CB-007. Das Dialog liefert nur Hülle, Backdrop und Schließer.
   Es steht INNERHALB .sec-296 — außerhalb bekäme der Klon keinen Stil ab, weil
   das Section-CSS nach Haus-Regel auf „.sec-296 …" gescoped ist.

   position:fixed + inset:0 IST DER SCROLL-VERTRAG, nicht Kosmetik.
   Das Reset gibt dem <dialog> position:relative; damit liegt der Kasten am
   Dokumentanfang, showModal() zieht den Fokus hinein und der Browser scrollt
   ihn ins Bild — gemessen an einer Nachbau-Seite: scrollY 1500 → 0. Mit
   fixed/inset bleibt die Seite stehen. Dieselbe Regel steht oben schon für
   LAB-KO-017 und LAB-MP-003.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-296 .hinwpop{
  position: fixed; inset: 0;
  margin: auto;                                    /* zentriert im Sichtfeld */
  /* 44rem, nicht 40: bei 40rem blieben dem Titel neben Signalfeld und Schließer
     nur 376 px und „Wichtige Info zur Halal Finanzierung" brach auf zwei Zeilen
     (gemessen). Mit 44rem und dem knapperen Polster unten passt er in eine. */
  inline-size: min(44rem, calc(100vw - 2 * var(--container-px, 24px)));
  max-block-size: calc(100vh - 2 * var(--sp-7, 3rem));
  padding: 0; border: 0;
  background: transparent;                         /* die Box bringt ihre Fläche mit */
  color: var(--t-primary, #253746);
  overflow: visible;                               /* der Schließer darf aufliegen */
}
body .sec-296 .hinwpop::backdrop{
  background: color-mix(in srgb, var(--c-secondary-dark, #030716) 62%, transparent);
}
/* Der Klon füllt die Hülle. Kein eigener Rahmen, kein eigener Radius — beides
   steht schon in der Section-Regel und in A2-Z2 weiter oben. */
body .sec-296 .hinwpop .hinw__box{ inline-size: 100%; }
/* Der Text darf nicht unter den Schließer laufen: Polster rechts um Knopfbreite
   plus eine Stufe. */
body .sec-296 .hinwpop .hinw__inhalt{
  padding-inline-end: calc(2.5rem + var(--sp-5, 1.5rem) + var(--sp-3, .75rem));
}
body .sec-296 .hinwpop__zu{
  position: absolute; z-index: 1;
  inset-block-start: var(--sp-5, 1.5rem); inset-inline-end: var(--sp-5, 1.5rem);
  display: flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: var(--bw-btn, 1px) solid var(--c-primary, #253746);
  border-radius: var(--r-pill, 999px);
  background: var(--c-white, #fff); color: var(--c-primary, #253746);
  cursor: pointer;
}
body .sec-296 .hinwpop__zu:hover{ background: var(--c-primary, #253746); color: var(--c-white, #fff); }
body .sec-296 .hinwpop__zu:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 2px; }
body .sec-296 .hinwpop__zu svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; }

/* Einblenden statt Aufschlagen. @starting-style greift nur dort, wo der Browser
   es kennt; sonst erscheint das Popup schlicht ohne Übergang — nie unsichtbar. */
@media (prefers-reduced-motion: no-preference){
  body .sec-296 .hinwpop[open]{
    opacity: 1; translate: 0 0;
    transition: opacity var(--motion-base, 250ms) var(--ease-standard, ease),
                translate var(--motion-base, 250ms) var(--ease-standard, ease);
  }
  @starting-style{
    body .sec-296 .hinwpop[open]{ opacity: 0; translate: 0 var(--sp-5, 1.5rem); }
  }
}
@media (max-width: 767px){
  /* Hochkant sitzt das Signalfeld als Band über dem Text (Section-Regel) — der
     Schließer rückt entsprechend enger an die Ecke. */
  body .sec-296 .hinwpop__zu{ inset-block-start: var(--sp-3, .75rem); inset-inline-end: var(--sp-3, .75rem); }
  body .sec-296 .hinwpop .hinw__inhalt{ padding-inline-end: var(--space-card-pad, 1rem); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   B7 · SPRUNGZIELE: 128 Verweise gingen ins Leere
   Befund vom 03.09.2026, gemessen. Drei Anker trugen zusammen 128 Verweise:
       #cf                113×   kontakt.html
       #ansprechpartner    14×   kontakt.html
       #stellenangebote     1×   karriere.html
   Alle drei sassen auf <section class="ws-block">, und das Design_System setzt
   .ws-block{display:contents}. Ein solches Element hat KEINEN Kasten — der
   Browser hat kein Sprungziel. Gemessen: getBoundingClientRect() 0×0, und
   location.hash='cf' liess scrollY auf 0 stehen. Die Knöpfe scrollten nicht
   ungenau, sie taten gar nichts. Heil waren nur #main (auf <main>) und
   #angebot (auf .sec-303).
   Die id sitzt jetzt je Anker auf dem inneren Section-Element (HTML-Änderung
   in kontakt.html und karriere.html). Die 128 Links sind unverändert.

   HIER STEHT NUR DER VERSATZ — und zwar EINMAL auf html statt als
   scroll-margin-top an jedem Ziel: so gilt er auch für jeden künftigen Anker,
   und er kann nicht an einem boxlosen Element hängen bleiben (dort wäre
   scroll-margin-top ohnehin wirkungslos gewesen).
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Höhe des klebenden Kopfes: Topbar + Leiste, an allen vier Breiten gemessen
     (1440/834/390/320) — durchgängig 129px. Ändert sich eine der beiden Höhen
     (N1-Block weiter oben: --nav-h und --kopf-topbar), muss dieser Wert mit.
     Absichtlich NICHT über --nav-h gerechnet: die Variable steht auf .sec-291
     und ist auf html nicht sichtbar. */
  /* 08.09.2026 · AUF 0. Genau der Fall aus dem Satz darüber ist eingetreten:
     Topbar (.sec-290) und Navigation (.sec-291) sind seit dem Umbau vom
     07.09. auf allen fünf Dokumenten weg (nachgezählt: 0 Vorkommen), die
     Brotkrumen-Leiste klebt nicht. Der Versatz war damit blind mitgelaufen —
     aufgefallen am neuen Weiter-Pfeil des Händler-Heros, dessen Ziel 153px
     zu tief landete (129 + 24). Die 24px Luft aus --sp-5 bleiben, damit ein
     Sprungziel nicht an der Oberkante klebt. Kommt je wieder ein klebender
     Kopf, gehört seine Höhe hier hinein — deshalb bleibt die Variable. */
  --kopf-klebend: 0px;
}
html{ scroll-padding-top: calc(var(--kopf-klebend) + var(--sp-5, 1.5rem)); }

/* ══════════════════════════════════════════════════════════════════════════════
   B9 · LAB-CRD-010: Knopf-Beschriftung so groß wie der Kartentext
   Auftrag: „die button labels so klein wie der fließtext in den karten damit
   sie nicht umbrechen". Gemessen war der Knopf 16 px (--fs-label), der
   Kartentext 15 px — und in der VIERSPALTIGEN Reihe brachen alle vier um.

   NICHT nur auf der Startseite, sondern an jeder LAB-CRD-010: dieselbe
   Komponente soll überall gleich aussehen (deine Abnahme-Regel). Die
   vierspaltige Reihe steht auch auf der Fahrzeugfinanzierung.

   .9375rem ist KEIN Token, sondern der Wert, den .card__text im
   Design_System hart trägt (dort steht font-size:.9375rem ohne Variable).
   Damit ist dieser Wert an das DS gekoppelt, ohne dass eine Variable die
   Kopplung sichtbar macht — gehört in den DS-Nachzug: der Kartentext braucht
   ein Token, dann kann hier var(--…) stehen.

   WAS DAS NICHT LÖST, gemessen und ehrlich: „Zur Transporterfinanzierung"
   passt in eine Viertel-Karte auf KEINER Größe einzeilig. Nötige Breite bei
   1440 (verfügbar 278 px):
       16px/.05em → 321   15px/.05em → 303   15px/.02em → 291   15px/normal → 282
   Selbst ohne Buchstabenabstand fehlen 4 px, bei 1180 (261 px) 21 px. Dasselbe
   gilt für „Zur Wohnmobilfinanzierung" unter 1440. Da hilft nur ein kürzerer
   Text — das ist eine Inhaltsentscheidung, keine CSS-Frage.
   Buchstabenabstand und Versalien bleiben wie im Design_System (Auftrag vom
   Vormittag: „Uppercase-Schreibweise darf bestehen bleiben").
   ══════════════════════════════════════════════════════════════════════════════ */
/* NACHGEZOGEN 04.09.2026 · volle Beschriftungen, dafür KEINE VERSALIEN mehr.
   Vorgabe: die Knöpfe müssen „Auto Finanzierung", „Transporter Finanzierung",
   „Wohnmobil Finanzierung", „LKW Finanzierung" tragen; die Schrift soll so
   klein werden, dass das hineinpasst.

   DIE GRÖSSE ALLEIN SCHAFFT ES NICHT. Breite des längsten Textes
   („Transporter Finanzierung") gegen den freien Platz je Karte
   (230 px bei 1440 · 213 px bei 1180 · 174 px bei 1025):

       Versalien + .05em        16→288  15→272  14→256  13→240  12→224  11→209
       Versalien, ohne Abstand  16→269  15→254  14→239  13→225  12→210  11→195
       normal, ohne Abstand     16→219  15→207  14→196  13→184  12→173

   Mit Versalien bräuchte es 12 px (1440) bzw. 11 px (1180) — unter der
   a11y-Untergrenze von 14 px, die scripts/check-section.js anschlägt — und bei
   1025 passt selbst 11 px nicht. OHNE Versalien und Buchstabenabstand reichen
   14 px mit Luft. Genau deshalb hat die Live-Seite mit denselben Texten kein
   Problem: dort tragen diese Knöpfe text-transform:none und
   letter-spacing:normal, „Zur Transporterfinanzierung" ist live nur 228 px
   breit. Die Versalien waren die Ursache, nicht die Textlänge.

   Der Unterstrich und der Pfeil bleiben — die Knopf-Signatur ändert sich nicht,
   nur die Schreibweise. Betrifft bewusst NUR LAB-CRD-010; alle anderen
   .cta-link im Projekt behalten die Versalien des Design_System.

   --fs-body-sm (.875rem) ist zugleich ein TOKEN statt des harten .9375rem,
   das .card__text im Design_System trägt (siehe DS-Nachzug oben).

   ══ DIESER BLOCK IST AM 04.09.2026 ERSETZT WORDEN — C2/C3 am Dateiende ══
   Was davon bleibt, gilt jetzt PROJEKTWEIT statt nur für LAB-CRD-010: keine
   Versalien, kein Buchstabenabstand. Was fällt: die Verkleinerung auf 14 px und
   das 12-px-Band von 1025–1112 px. Beides war Symptombehandlung. Die Ursache
   war die vierspaltige Reihe, die zwischen 1025 und 1200 px nur 174–195 px pro
   Karte frei lässt — die ist jetzt in C2 an der Wurzel behoben (dort stapelt
   die Reihe schon unter 1200 px auf zwei Spalten). Danach trägt die Schrift
   wieder ihre DS-Größe von 16 px, gemessen auf allen Karten aller Breiten.
   Die Rechen-Tabellen oben bleiben stehen: sie belegen, warum die Versalien
   die Ursache waren, und das gilt weiter. */

/* ══════════════════════════════════════════════════════════════════════════════
   B14 · Rückmeldung der Kontaktformulare (kw-formulare.js → kw-mail.php)
   Das Design_System hat für Formular-Rückmeldungen keinen Baustein; die
   Meldung wird vom Skript erzeugt und hier eingekleidet. Drei Zustände über
   data-art, damit ein Zustand nie „mitschwingt".
   Farben aus den Rollen-Tokens: --t-positiv für Erfolg, --t-negativ für
   Fehler. Beide werden weiter oben in dieser Datei repariert, falls die
   Guidelines Weiß liefern.
   ══════════════════════════════════════════════════════════════════════════════ */
body .kwmail__meldung{
  margin-block: var(--space-stack, 1rem) 0;
  padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
  border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12));
  border-radius: var(--r-card, 8px);
  font-size: var(--fs-body-sm, .875rem);
  line-height: var(--lh-body, 1.6);
  background: var(--c-surface-subtle, #f6f7f9);
  color: var(--t-primary, #253746);
}
body .kwmail__meldung[data-art="erfolg"]{
  border-color: var(--t-positiv, #1f7a4d);
  background: color-mix(in srgb, var(--t-positiv, #1f7a4d) 8%, var(--c-white, #fff));
}
body .kwmail__meldung[data-art="fehler"]{
  border-color: var(--t-negativ, #c0392b);
  background: color-mix(in srgb, var(--t-negativ, #c0392b) 8%, var(--c-white, #fff));
}
body .kwmail__meldung[data-art="laeuft"]{ color: var(--t-secondary, #5a636b); }
/* Der Absende-Knopf während des Versands: sichtbar gesperrt, nicht nur inaktiv. */
body form button[type="submit"][aria-busy="true"],
body button[type="submit"][aria-busy="true"]{
  opacity: .65;
  cursor: progress;
}

/* ══════════════════════════════════════════════════════════════════════════════
   B15 · LAB-IG-003: Arrow-Buttons auf Weiß, Text nicht mehr abgeschnitten
   Die Section ist ein Bild-Akkordeon; der Inhalt des offenen Panels liegt auf
   einer dunklen, milchigen Fläche.

   1) KONTRAST. Der Knopf erbte die Farbe des Design_System
      (--c-primary-dark, gemessen rgb(1,39,54)) — dunkles Marineblau auf
      dunklem Grund. Alles am Knopf hängt an currentColor: die Schrift, und
      über die .cta-link-Regel weiter oben in dieser Datei auch der
      Unterstrich. Ein einziges color: genügt daher für Text UND Linie.
      Hover bleibt weiß (auf dunklem Grund gibt es kein „dunkler"), die
      Rückmeldung übernimmt der Unterstrich, der auf zwei Pixel wächst.
      Fokus bekommt einen weißen Ring mit Abstand — die Standard-Outline des
      Browsers ist auf dieser Fläche kaum zu sehen.

      ANMERKUNG: In DIESER Section hat der Knopf gar kein Pfeil-Icon — das
      Markup ist <a class="cta-link">Zur Finanzierung</a>, ohne SVG (geprüft
      auf allen 12 Seiten). In LAB-CRD-010 trägt derselbe Baustein eines.
      Dieselbe Komponente sieht also an zwei Stellen unterschiedlich aus. Hier
      wird nur weiß gefärbt; das Icon nachzurüsten wäre eine Design-Änderung
      und wartet auf Louis.

   2) ABGESCHNITTENER TEXT. Ursache war kein overflow am Container, sondern
      eine Klemmung am Absatz selbst: display:-webkit-box mit
      -webkit-line-clamp:1. Gemessen 31 px sichtbar gegen 54 px Inhalt — dem
      Text fehlte genau eine Zeile, auf ALLEN Breiten (1440/834/390).
      Die Section macht das absichtlich („das offene Panel trägt genau zwei
      Zeilen"), damit der Text den Bildausschnitt nicht zudeckt. Auftrag ist
      aber, dass der ganze Text lesbar bleibt — also Klemmung raus. Der
      Inhaltsblock ist am unteren Panelrand verankert und wächst nach oben,
      die feste Zeilenhöhe (480 px Desktop) schneidet dabei nichts ab.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-125 .cta-link{ color: var(--c-white, #fff); }
body .sec-125 .cta-link:hover,
body .sec-125 .cta-link:focus-visible{
  color: var(--c-white, #fff);
  border-bottom-width: 2px;
}
body .sec-125 .cta-link:focus-visible{
  outline: 2px solid var(--c-white, #fff);
  outline-offset: 3px;
}
body .sec-125 .imgacc__more p{
  display: block;              /* -webkit-box war die Klemme */
  -webkit-line-clamp: none;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════════════
   B16 · LAB-PC-016: senkrechte Abstände in den Boxen ausbalanciert
   Gemessen war die Ordnung genau verkehrt: Zahl → Preheadline 0 px,
   Preheadline → Headline 32 px. Dabei gehört die Preheadline zur HEADLINE
   (sie ist deren Vorzeile) und nicht zur Zahl — der große Abstand muss also
   oben liegen, nicht unten.

   Neu: Zahl → Preheadline --sp-4 (16 px), Preheadline → Headline 8 px.
   Die 8 px sind kein neuer Wert, sondern --space-text-pair aus dem
   Design_System: der Abstand, den .preheadline ohnehin nach unten trägt. Es
   fällt nur das zusätzliche margin-top der Überschrift weg
   (--space-stack-lg, 24 px), das die Gruppe auseinandergezogen hat.

   Auf die KARTEN eingegrenzt, nicht auf die Section: der Section-Kopf hat
   dieselbe .preheadline und soll seinen Abstand behalten.
   Gilt damit für alle 9 Boxen gleich, ohne Sonderfall je Box.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-293 .pctr__karte .preheadline{ margin-block-start: var(--sp-4, 1rem); }
body .sec-293 .pctr__karte .pctr__titel{ margin-block-start: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   B17 · LAB-CRD-010: Pfeil-Icon proportional zur Schrift
   Das SVG trägt width/height="16" als Attribut — eine feste Größe, die bei
   14 px Schrift zu groß wirkt. In em gebunden wächst und schrumpft es mit der
   Beschriftung, auch im schmalen Desktop-Band, wo die Schrift auf 12 px geht.
   Nur LAB-CRD-010, wie beauftragt — Pfeile in anderen Komponenten bleiben.

   AM 04.09.2026 AUF ALLE PFEIL-LINKS AUSGEWEITET (Auftrag: „Arrow Icon
   proportional", projektweit). Der Selektor hat den Section-Filter verloren;
   getroffen werden dieselben Komponenten wie von C3 — LAB-CRD-010 (16er-SVG)
   und LAB-EP-008 (13er-SVG), die vorher unterschiedlich groß waren.
   ══════════════════════════════════════════════════════════════════════════════ */
body .cta-link svg{
  inline-size: 1em;
  block-size: 1em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN-DURCHGANG 4 — Rückmeldungen vom 04.09.2026, nachmittags (C1 … C6)
   Referenz bleibt die Live-Seite https://adrico.de/. Alle Zahlen in diesem
   Abschnitt sind mit Playwright am gerenderten Ergebnis GEMESSEN, live gegen
   Betapage, nicht aus dem Quelltext gelesen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   C1 · LAB-FAQ-015: Akkordeon noch langsamer und weicher
   Auftrag: „Opening etwas langsamer, Closing ebenfalls, weiches hochwertiges
   Easing, kein abruptes Umspringen der Höhe."

   Stand bisher (P3): 400 ms mit --ease-emphasized cubic-bezier(.3,0,0,1).
   Diese Kurve steigt sofort steil an — der Großteil des Wegs ist nach einem
   Drittel der Zeit zurückgelegt, das Auge sieht einen Sprung mit Nachlauf.
   Länger machen allein hilft dagegen nicht: mit derselben Kurve wird nur der
   Nachlauf zäher, der Sprung bleibt.

   Deshalb ZWEI Änderungen, die zusammengehören:
     · Dauer 560 ms statt 400 (Faktor 1,4). Das ist die Stufe, ab der ein
       dreizeiliger Antworttext als Bewegung lesbar wird; oberhalb von ~600 ms
       fängt ein Akkordeon an, den Klick nicht mehr zu quittieren.
     · Kurve cubic-bezier(.22, .61, .36, 1) — ein echtes Ease-Out ohne
       Überschwingen: der erste Kontrollpunkt liegt tief genug für einen
       ruhigen Antritt, der zweite zieht das Ende lang aus. Kein Bounce
       (beide y-Werte bleiben ≤ 1), also kein Zurückfedern der Kante.

   GILT FÜR BEIDE RICHTUNGEN, weil sie an derselben transition hängen: das
   Aufgehen ist block-size 0 → auto, das Zugehen dieselbe Eigenschaft zurück.
   content-visibility läuft mit allow-discrete synchron, damit der TEXT beim
   Schließen mitfährt statt vorher zu verschwinden (sonst fährt eine leere
   Fläche zusammen — das war vor A2-6 der Fehler).

   Die Zeile selbst (Kante + Schatten aus Punkt 2) bekommt dieselbe Dauer und
   Kurve, sonst kippt der Rahmen fertig um, während der Inhalt noch läuft.
   Desktop und Mobil teilen die Regel — die Section wechselt responsiv nur die
   Breite, nicht den Mechanismus.
   ══════════════════════════════════════════════════════════════════════════════ */
@supports selector(::details-content){
  body .sec-145 .bfaq__list details::details-content{
    transition: block-size 560ms cubic-bezier(.22, .61, .36, 1),
                content-visibility 560ms allow-discrete;
  }
}
body .sec-145 .bfaq__list .accordion-item{
  transition: box-shadow 560ms cubic-bezier(.22, .61, .36, 1),
              border-color 560ms cubic-bezier(.22, .61, .36, 1);
}
/* Hauspflicht: Abschaltung wiederholen, sonst übersteuern die Regeln oben die
   Systemeinstellung. Das Aufklappen bleibt, nur ohne Übergang. */
@media (prefers-reduced-motion: reduce){
  body .sec-145 .bfaq__list details::details-content,
  body .sec-145 .bfaq__list .accordion-item{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   C2 · LAB-CRD-010: die vierspaltige Reihe stapelt schon unter 1200 px
   DAS IST DIE URSACHE, DIE B13 NUR ÜBERSCHMINKT HAT. Die Section stapelt von
   sich aus erst unter 1025 px auf zwei Spalten. Dazwischen — 1025 bis knapp
   1200 px — bleiben vier Karten stehen, und dann ist im Kartenkörper nur noch
   das frei (gemessen, Inhaltsbreite ohne Polster):

       1440 px → 230    1180 px → 213    1112 px → 196    1025 px → 174

   „Transporter Finanzierung" braucht in DS-Größe 16 px genau 201 px. Ab 1200 px
   passt das; darunter passte es auf keiner lesbaren Schriftgröße, weshalb B13
   erst auf 14 und im Band 1025–1112 sogar auf 12 px heruntergegangen ist — 12 px
   liegt unter der a11y-Untergrenze, die scripts/check-section.js anschlägt.

   Ein Viertel-Raster, in das die eigene Beschriftung nicht passt, ist kein
   Schriftproblem. Die Reihe stapelt deshalb schon unter 1200 px auf zwei
   Spalten — genau die Grenze, ab der die vier Karten wieder tragen. Unter
   1025 px greift danach unverändert die Section selbst (dieselben zwei
   Spalten), unter 768 px eine.

   NUR die vierspaltige Reihe: der Modifier steht im Selektor. Es gibt im
   ganzen Projekt genau EINE Instanz mit data-m-spalten="4" (zweite Kartenreihe
   der Startseite, geprüft über alle 22 Seiten). Die zwei- und dreispaltigen
   Reihen haben in demselben Fensterband 275–424 px frei und bleiben unberührt.

   OHNE FOLGEN FÜR DIE HERO-ÜBERLAPPUNG: die Rechnung in Block 5b liest
   --kart-spalten, um die halbe Bildhöhe zu treffen. Die betroffene Reihe steht
   nicht hinter einem Hero (sie ist die ZWEITE der Startseite), die Formel wird
   für sie nie ausgewertet.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1199px){
  body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"] .kart118__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   C3 · PFEIL-LINKS (.cta-link) — Schreibweise, Größe, Linienlänge, Pfeil-Icon
   EINE Regel für das ganze Projekt. Getroffen sind alle 77 Pfeil-Links auf
   allen 22 Seiten (gezählt): LAB-CRD-010 (16×), LAB-EP-008 (5×),
   LAB-IG-003 (56×).

   1) KEINE VERSALIEN MEHR. Das Design_System setzt .cta-link auf
      text-transform:uppercase + letter-spacing:.05em. Die Live-Seite setzt an
      denselben Knöpfen text-transform:none und letter-spacing:normal
      (gemessen an .elementor-button-link: 16px/400/none/normal). Beides hier
      also zurückgenommen — aber NUR am Pfeil-Stil.
      NORMALE KNÖPFE BLEIBEN VERSAL: .btn erzwingt seine Versalien in
      css/style.css unabhängig davon, und diese Regel greift sie nicht an.
      Der Fehler steckt im Design_System, nicht im Projekt — er steht als
      Punkt 2 im DESIGN-SYSTEM-BACKLOG (".btn erzwingt Versalien") und ist dort
      am 04.09.2026 um den Beleg für .cta-link ergänzt worden.

   2) GRÖSSE: wieder --fs-label (16 px), die DS-Größe — und exakt die Größe der
      Live-Seite. B13 hatte auf 14 px verkleinert, weil die vierspaltige Reihe
      überlief; diese Ursache ist mit C2 weg. Nachgemessen auf allen Karten
      aller Instanzen bei 1440 · 1280 · 1180 · 1112 · 1025 · 834 · 390 px:
      längster Text „Transporter Finanzierung" 206 px gegen 222 px freien
      Platz im engsten Fall. Kein Umbruch, kein Überlauf.
      Die Zeile steht hier ausdrücklich, obwohl sie den DS-Wert wiederholt:
      ohne sie hätte ein späterer Blick keinen Anhalt, dass 16 px ein
      GEPRÜFTER Wert ist und nicht bloß der übrig gebliebene Default.

   3) LINIENLÄNGE: der Überhang hinter dem Inhalt fällt (war --sp-3, 12 px,
      siehe Block 5a). Das Vorbild hat 14 px Überhang, aber KEIN Pfeil-Icon —
      dort endet die Linie also hinter dem Text. Bei uns endete sie hinter dem
      Pfeil und stand als loser Stummel im Raum. Ohne Überhang bilden Text,
      Linie und Pfeil eine Einheit, und die Linie endet auf jeder Karte an
      derselben Stelle relativ zum Pfeil.
      Dass die Linie mit dem Text unterschiedlich LANG ist, bleibt: sie
      unterstreicht ihn. Das ist im Vorbild genauso (gemessen: 177 · 192 · 210 ·
      235 px auf einer Seite) und die Bauart eines unterstrichenen Links.

   4) PFEIL-ICON, WO KEINES IM MARKUP STEHT. LAB-CRD-010 und LAB-EP-008 tragen
      ein SVG im HTML (Linie + Spitze, 16 bzw. 13 px). LAB-IG-003 trägt keines:
      dort ist der Link <a class="cta-link" data-kw="…">Zur Finanzierung</a>,
      ohne Kind. Es ist also nie eines „verloren gegangen" — es hat dort nie
      eines gegeben, und das Design_System liefert für .cta-link keinen Pfeil.

      Ergänzt wird er als ::after mit derselben Zeichnung wie die vorhandenen
      SVGs (line 5,12→19,12 plus polyline 12,5 19,12 12,19, Strichstärke 2).
      Als MASKE, nicht als Bild: die Fläche ist currentColor, damit folgt der
      Pfeil der Schriftfarbe — auf Weiß in LAB-IG-003 genauso wie im Hover.
      Ein data:-URI, kein Dateizugriff (pruefe-website.mjs lässt data: in
      css/custom.css ausdrücklich zu, eine Bilddatei-Quelle nicht).

      WARUM CSS UND NICHT HTML: der Schlüssel data-kw sitzt in LAB-IG-003 auf
      dem <a> selbst, der Editor schreibt also dessen Textinhalt. Ein <span>
      mit SVG darin wäre beim ersten Editor-Speichern weg. Als Pseudo-Element
      liegt der Pfeil außerhalb der Reichweite des Editors — richtig so, ein
      Pfeil ist Dekoration und keine redaktionelle Fläche.

      :not(:has(svg)) schließt genau die beiden Komponenten aus, die schon
      einen Pfeil haben — sonst stünden dort zwei. Browser ohne :has() sind
      hier kein Thema: die Datei baut an sieben weiteren Stellen darauf.
   ══════════════════════════════════════════════════════════════════════════════ */
body .cta-link{
  font-size: var(--fs-label, 1rem);
  text-transform: none;
  letter-spacing: normal;
  padding-inline-end: 0;
}
body .cta-link:not(:has(svg))::after{
  content: '';
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ══════════════════════════════════════════════════════════════════════════════
   C4 · LAB-IG-003: Luft zwischen Fließtext und Pfeil-Link
   Gemessen im offenen Panel: Abstand Absatz → Link = 0 px. Der Absatz trägt
   margin:0 (Section-CSS), der Link keinen Rand nach oben — die Unterlänge des
   Textes stieß direkt an die Oberkante des Knopfes.

   Die Luft sitzt am ABSATZ, nicht am Link. Zwei Gründe:
     · Der Absatz ist ein Block, sein margin-bottom schiebt zuverlässig. Der
       Link ist inline-flex; ein margin-top an ihm wirkt über die Zeilenbox und
       verschiebt zugleich die Unterstreichungslinie mit.
     · Panels ohne Absatz (falls je eines dazukommt) bekommen so gar keinen
       Abstand statt eines Abstands ins Leere.

   --sp-4 (16 px) ist die Stufe über dem Titel→Text-Abstand des Panels
   (--sp-2, 8 px) — die Gruppe „Titel + Text" bleibt damit als Einheit lesbar,
   und der Knopf setzt sich sichtbar davon ab, ohne eine Lücke zu reißen. Eine
   Regel für alle Panels der Section, kein Wert je Panel.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-125 .imgacc__more p{ margin-block-end: var(--sp-4, 1rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   C5 · LAB-FOOT-017: die Bankenlogos kommen aus dem Partner-Satz
   KEINE CSS-ÄNDERUNG — der Hover-Effekt aus F5 (schwarz → Originalfarbe) bleibt
   unverändert. Getauscht sind die DATEIEN im HTML aller 22 Seiten:

       santander-logo.webp   → partner-santander.webp
       postbank-logo.webp    → partner-postbank.webp
       bank11-logo.webp      → partner-bank11.webp
       targo-bank-logo.webp  → partner-targo-bank.webp
       dsl-bank-logo.webp    → partner-dsl-bank.webp
       carcredit-logo.webp   → partner-carcredit-de.webp

   WARUM: der alte Satz ist NICHT der Originalfarben-Satz. Es sind die
   blau eingefärbten Varianten der alten WordPress-Installation (nachgesehen:
   santander-logo.webp zeigt die Flamme blau statt rot). Mit brightness(0) sehen
   beide Sätze gleich aus — im Hover kam deshalb nicht die Markenfarbe zurück,
   sondern das Blau. Der Partner-Satz aus dem Laufband der Partnerseite
   (LAB-CT-004, .mkz__logo) trägt die echten Originalfarben.

   KEINE DUPLIKATE: es werden genau die Dateien verwendet, die für das Laufband
   schon im Projekt liegen (img/partner-*.webp) — keine neue Datei, kein
   Nachschärfen, keine zweite Größe. Die Maßangaben im HTML gehen von 120×40 auf
   die echten 130×50 der Partner-Dateien; object-fit:contain der Section
   erhält die Proportionen, die Leiste rechnet weiter mit ihrer Spaltenbreite.
   Reihenfolge unverändert — sie ist die der Live-Fußleiste (Santander,
   Postbank, Bank11, Targo, DSL, carcredit), und die alt-Texte bleiben an ihrem
   Platz, damit kein Marker-Schlüssel und keine Bildbeschreibung wandert.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   C6 · LAB-HERO-015: Höhe, Overlay, Typografie, Overlap
   Alle vier Punkte an derselben Section — und sie hängen zusammen, deshalb ein
   Block. Gemessen wurde paarweise live gegen Betapage auf denselben Seiten und
   Breiten (Startseite, Karriere, Partner, Vorteile, Auto-Finanzierung).

   ── 1 · HÖHE ────────────────────────────────────────────────────────────────
   Die Live-Seite hat FESTE Hero-Höhen, wir eine vh-Rechnung
   (85vh − --nav-h). Deshalb stimmt der Vergleich nur auf einem Fenster:

       Fenster        live    Betapage (vorher)
       1280×800       823        608
       1440×900       823        693
       1512×982       823        763
        834×1112      650        873   ← 223 px zu hoch
        390×844       540        ~657

   Auf großen Monitoren läuft die vh-Rechnung immer weiter davon (bei 1440 px
   Fensterhöhe wären es ~1150 px), auf Tablet-Hochkant ist sie schon jetzt
   deutlich über dem Vorbild. Genau das war die Rückmeldung.

   DIE VH-RECHNUNG BLEIBT, SIE BEKOMMT NUR EINEN DECKEL — den Live-Wert:
       ≥1025 px → 823 px (51.4375rem) · 768–1024 → 650 px · ≤767 → 540 px
   min() nimmt, was kleiner ist. Der Hero wird damit NIE höher als live und auf
   keinem Fenster höher als vorher — er wächst nirgends. Wo die vh-Rechnung
   schon unter dem Deckel liegt (1280×800: 608 px), bleibt sie unangetastet;
   ein Aufziehen auf 823 px hätte den Hero dort über die Fensterhöhe geschoben,
   und „höher machen" war nicht der Auftrag.

   ── 2 · OVERLAY ────────────────────────────────────────────────────────────
   Live liegt über JEDEM Hero-Bild dieselbe Fläche: background-color #000 mit
   opacity 0.5 auf dem ::before der Section — flach, ohne Verlauf, auf allen
   geprüften Seiten und Breiten identisch (Start, Karriere, Partner, Vorteile,
   Auto; 390 · 768 · 834 · 1025 · 1440 px). Es gibt live also KEINE
   seitenweise unterschiedliche Stärke, die zu berücksichtigen wäre.

   Wir hatten stattdessen einen Verlauf von unten (70 % → transparent bei 55 %).
   Der ist oben durchsichtig — und genau dort steht die Headline. Deshalb wirkte
   der Hero-Text schwächer als live, obwohl die Schrift schwerer ist (siehe 3).

   Getauscht wird die Fläche am ::after von .hero-e__bg. Das ist die richtige
   Ebene: .hero-e__bg liegt über dem Grund der Section und unter dem Inhalt,
   ein Pseudo-Element darauf kann keinen Knopf abdecken und nimmt keinen Klick
   (es hat kein eigenes pointer-events-Ziel im Inhaltsfluss). 50 % Schwarz
   nimmt dem Bild die Hälfte der Helligkeit und lässt Motiv und Farbe stehen —
   nachgesehen an allen Hero-Bildern.
   --c-black über color-mix statt hartem rgba(): Haus-Regel, und ein dunkles
   Theme kann den Ton damit mitziehen.

   ── 3 · TYPOGRAFIE ─────────────────────────────────────────────────────────
   Erst die Ursache, dann die Werte — die Frage war ausdrücklich, warum live
   kräftiger WIRKT.

   NICHT die Ursache: Schrift, Datei, Weight-Achse. Nachgewiesen. Live lädt
   Outfit v11 als drei statische Schnitte (400/600/700), wir Outfit v15 als
   eine Variable Font (100–900). Die Achse arbeitet — Textbreite derselben
   Zeichenfolge in 40 px:

       Weight   400      600      700
       live     467,2    477,9    486,6
       wir      467,0    477,7    486,4

   Abweichung < 0,5 px, also dieselbe Zeichnung. Kein Fallback (der System-Font
   liegt bei 471,4 / 504,4 und wäre sofort sichtbar), kein falscher Schnitt.
   Der Fehler wäre hier auch teuer gewesen — deshalb gemessen und nicht geraten.

   DIE URSACHE ist zweigeteilt: das fehlende Overlay (Punkt 2) und drei Werte,
   die von live abweichen. Unsere Headline ist SCHWERER als live (700 gegen
   600); kräftiger wirkte live trotzdem, weil ihre Zeilen weit stehen und die
   Buchstaben nicht zusammengezogen sind:

       Headline      live 40px/66.4px (1.66)/normal/600
                     wir  40px/43.2px (1.08)/-1.5px/700
       Unterzeile    live 16px/19.2px/600/#fff
                     wir  18px/29.9px/400/#fff bei 85 %

   Angeglichen wird auf die Live-Werte, auch dort, wo das unsere Schrift
   LEICHTER macht (Headline 700 → 600). Das war die Vorgabe: „die tatsächlichen
   Schriftwerte möglichst exakt angleichen", nicht pauschal aufdicken. Der
   sichtbare Gewinn kommt aus dem Overlay und aus dem Zeilenabstand.
   Die Unterzeile auf 600 ist der zweite große Unterschied — sie steht live
   halbfett und deckungsgleich weiß, bei uns mager und auf 85 % abgesenkt.
   Schriftgröße --fs-h1 (40 px) bleibt, sie stimmt schon.
   Der Knopf bleibt unberührt: er ist ein normaler .btn und behält seine
   Versalien (siehe C3, Punkt 1).

   ── 4 · OVERLAP VERSCHIEBT DEN HERO-INHALT NICHT MEHR ──────────────────────
   Vorher mittete der Textblock zwar (align-items:center), bekam aber ein
   padding-bottom in Höhe der Überlappung — damit stand er auf Seiten MIT
   Karten höher als auf Seiten ohne. Gemessen Startseite 1440×900: 150 px über
   dem Block, 290 px darunter.

   Jetzt: Mitte im VOLLEN Hero-Kasten, ohne Ausgleichspolster — genau wie live,
   das auf derselben Seite 285/285 zeigt, obwohl die Karten dort ebenso
   überlappen. Die überlappende Section positioniert sich unverändert selbst
   (negatives margin-top plus Pseudo-Fläche ab der Hero-Kante, Block 5b); sie
   greift nicht mehr in die Mitte-Rechnung ein. Der Abstand des FOLGENDEN
   Inhalts bleibt dadurch unangetastet.
   align-items:center gilt jetzt für ALLE Hero-Seiten, nicht mehr nur für die
   drei mit Kartenreihe — auch das ist der Live-Zustand (dort mittet jeder Hero:
   275/275 · 285/285 · 308/308 · 318/318 gemessen).
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── WARUM .sec-180 UND NICHT [data-sec="LAB-HERO-015"] ─────────────────────────
   Aufgefallen beim Abschluss-Check über alle 22 Seiten: angebot/index.html
   trägt ebenfalls data-sec="LAB-HERO-015", ist aber ein ANDERER Bau. Dort steht
   .sec-301 mit eigenem CSS — 72vh statt 85vh, align-items:flex-end,
   padding-block, eigener Verlauf, .hero-e__sub und .hero-e__innen statt
   .hero-e__body und .hero-e__inner. Diese Seite gehört zur parallel laufenden
   Formular-Arbeit.
   Mit dem data-sec-Selektor hätten die Regeln hier sie mitgezogen und dabei
   verschlimmert: nachgemessen 693 px statt der dort gewollten Höhe (mein
   Vorgabewert 85 hätte den 72er ersetzt) und der Textblock aus der Unterkante
   in die Mitte gerückt. Deshalb hängen alle Hero-Regeln dieses Blocks am
   BAU .sec-180 — den 20 Seiten, um die es geht. Die Sibling-Regeln in Block 5b
   brauchen weiterhin data-sec, sie beschreiben die REIHENFOLGE der Sections.
   ────────────────────────────────────────────────────────────────────────────── */
/* Die Höhe steht als Variable auf :root, weil sie ZWEIMAL gebraucht wird — hier
   für min-height und weiter unten als Deckel für die Überlappung. Zwei Kopien
   derselben Rechnung wären sonst zwangsläufig irgendwann auseinandergelaufen.
   Auf :root und nicht auf der Section, weil die Überlappung an einem ANDEREN
   Element gerechnet wird (.kart118) und vh-Einheiten überall gleich auflösen.
   EINE ANNAHME STECKT DARIN: --m-heroh ist der Instanz-Modifier für die
   Hero-Höhe, und keine der 22 Seiten setzt ihn (geprüft: kein data-m-heroh im
   Projekt), alle laufen auf dem Vorgabewert 85. Setzt jemand ihn an einer
   Instanz, stimmt --hero-hoehe für dessen Überlappungs-Deckel nicht mehr —
   dann gehört die Rechnung zurück auf die Section und der Deckel dazu. */
:root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 51.4375rem); }
@media (max-width: 1024px){
  :root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 40.625rem); }
}
@media (max-width: 767px){
  :root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 33.75rem); }
}
body .sec-180 .hero-e{
  min-height: var(--hero-hoehe);
  align-items: center;
}
body .sec-180 .hero-e .hero-e__inner{
  padding-bottom: 0;
}
/* SMART-BEREICH, 04.09.2026: dieser Hero hat KEINEN Knopf — auf adrico.de folgt
   nach dem Fließtext .hero-e__actions, hier nicht. Damit blieb die
   margin-bottom des Absatzes (--sp-6 = 32px) als letztes Element stehen; sie
   fällt aus dem Kasten des Textblocks heraus, zählt aber zur Höhe des
   Flex-Kindes. Gemessen bei 1440x900: 252px über / 284px unter dem Block —
   genau die 32px daneben. Mit dieser Regel: 268/268.
   Bewusst über :last-child und nicht am Absatz: sobald jemand doch einen Knopf
   ergänzt, greift sie von selbst wieder auf ihn und nicht mehr auf den Text. */
body .sec-180 .hero-e .hero-e__inner > :last-child{
  margin-bottom: 0;
}
body .sec-180 .hero-e .hero-e__bg[style*="background-image"]::after{
  background: color-mix(in srgb, var(--c-black, #000) 50%, transparent);
}
/* BEIDE AUFMACHER-VARIANTEN. Auf der Startseite und der Karriere-Seite ist der
   Hero-Titel ein <h1>, auf den 17 anderen Hero-Seiten ein
   <div class="hero-e__titel"> — die H1 steht dort im ersten Inhaltsabschnitt,
   so wie live (Begründung im Block „CONTENT-ÜBERTRAGUNG", Punkt 1). Die
   Typografie hängt deshalb an beiden Stellen. Gemessen und aufgefallen ist das
   erst im Nachgang: mit nur h1 im Selektor blieben 17 Seiten auf 1.08/-1.5px
   stehen, sichtbar an der Titelhöhe von 86 px statt 133 px. */
body .sec-180 .hero-e h1,
body .sec-180 .hero-e .hero-e__titel{
  font-weight: 600;
  line-height: 1.66;
  letter-spacing: normal;
}
/* Auf dem Telefon geht live auf 32 px herunter (gemessen 390×844: 32px/53.12px,
   ab 768 px durchgehend 40px/66.4px). Bei uns ist --fs-h1 ein FESTER Wert
   (2.5rem = 40px, die zweite :root-Deklaration in style.css überschreibt die
   clamp-Variante der ersten) und stand deshalb auch mobil auf 40 px.
   Das ist nicht nur Kosmetik: mit dem neuen Zeilenabstand von 1.66 wurde der
   Titel der Halal-Seite mobil 332 px hoch und der ganze Textblock 518 px — in
   einem 540 px hohen Hero war für die überlappende Hinweisbox danach kein Platz
   mehr (gemessen: sie deckte den Knopf um 37 px ab). Mit dem Live-Wert sind es
   266 px, und der Rest stimmt wieder. Live-Wert und Platzproblem zeigen in
   dieselbe Richtung — deshalb hier und nicht als Sonderregel für eine Seite. */
@media (max-width: 767px){
  body .sec-180 .hero-e h1,
  body .sec-180 .hero-e .hero-e__titel{ font-size: 2rem; }
}
body .sec-180 .hero-e .hero-e__body{
  font-size: var(--fs-label, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white, #fff);
}

/* ── 5 · DIE ÜBERLAPPUNG BEKOMMT EINEN DECKEL AUS DER HERO-HÖHE ─────────────────
   Das Mitten hat einen alten Fehler sichtbar gemacht, den das Ausgleichspolster
   verdeckt hatte: die Überlappung war NUR an die Bildhöhe gekoppelt, nie an die
   HÖHE DES HEROS. Auf niedrigen Fenstern biss sie deshalb in den Textblock.
   Gemessen an der Karriere-Seite (dort ist die Kartenreihe zweispaltig, das
   Bild 329 px hoch und die halbe Höhe 164 px) — Rest zwischen Knopf-Unterkante
   und Kartenoberkante, negativ heißt „Knopf verdeckt":

       1920×1080 →  107     1512×982 →   77     1440×900 →   42
       1280×800  →    0     1366×768 →  −14     1440×760 →  −17
       1100×700  →  −22     1280×720 →  −34     1025×650 →  −33

   Ab etwa 800 px Fensterhöhe kippt es. Das ist keine exotische Größe, das ist
   das gewöhnliche Notebook.

   DER DECKEL: die freie Fläche unter dem mittigen Textblock ist
   (Hero-Höhe − Inhaltshöhe) / 2. Die Inhaltshöhe steht nicht in CSS zur
   Verfügung, also kommt sie aus der Messung: über alle Hero-Seiten und Breiten
   war der Textblock höchstens 312 px hoch (Werte 211 · 219 · 237 · 270 · 277 ·
   281 · 304 · 312). 22rem (352 px) liegt mit 40 px Sicherheit darüber, --sp-5
   (24 px) ist die Luft, die zwischen Knopf und Kartenkante bleiben soll.

   max(0px, …) ist Pflicht: auf sehr niedrigen Fenstern wird der Term negativ,
   und eine negative Überlappung würde die Section nach UNTEN schieben — dann
   klaffte eine Lücke im Hero-Bild.

   WAS DAS FÜR DIE ABNAHME VOM 03.09. BEDEUTET („etwa die Hälfte des
   Card-Bildes soll im Hero liegen"): die halbe Bildhöhe bleibt der Sollwert und
   wird auf großen Fenstern voll erreicht (ab 1080 px Fensterhöhe trägt sie).
   Darunter greift der Deckel — dort war die halbe Bildhöhe nie darstellbar,
   ohne den Hero-Text zu verdecken. Nur der Vollständigkeit halber, weil es die
   Frage beantwortet, ob wir hier über oder unter dem Vorbild liegen: die
   Live-Seite überlappt mit FESTEN Werten und viel flacher — 80 px auf der
   Startseite, 100 px auf Karriere und Halal, auf dem Telefon gar nicht
   (Karriere hat dort +60 px Abstand). Unsere halbe Bildhöhe liegt also
   durchweg ÜBER dem Vorbild; der Deckel bringt sie näher heran, nicht weiter
   weg. Soll ganz auf die Live-Werte umgestellt werden, ist das eine Entscheidung
   für Louis — sie würde die Vorgabe vom 03.09. zurücknehmen.

   Gilt für BEIDE überlappenden Kombinationen: Kartenreihe (LAB-CRD-010) und
   Hinweisbox (LAB-CB-007). Letztere lag bei 1025×650 mit 5 px Rest ebenfalls
   an der Kippkante.
   ────────────────────────────────────────────────────────────────────────────── */
/* Zweiter Selektor: smart-Bereich ohne Floating-Menü, s. Begründung in Block 5b. */
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118,
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .kart118{
  --kart-ueberlappung: min(
      calc(var(--kart-bildhoehe) / 2),
      max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem))));
}
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{
  --hinw-ueberlappung: min(
      var(--sp-9, 6rem),
      max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem))));
}
@media (max-width: 1024px){
  body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{
    --hinw-ueberlappung: min(
        var(--sp-7, 3rem),
        max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem))));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   C7 · Die vier Stellenangebotsseiten (LAB-CO-021 als Textträger)
   Neu am 04.09.2026: gebietsmanager-automobilfinanzierung.html,
   junior-gebietsmanager-automobilfinanzierung.html,
   assistenz-automobilfinanzierung-in-teilzeit.html,
   vertriebsprofi-mit-call-center-erfahrung.html.

   AUFGEBAUT AUS BESTEHENDEN BAUTEILEN, kein neuer Section-Typ: Topbar,
   Navigation, Hero, Floating-Menü und Fußleiste sind wörtlich von
   karriere.html übernommen (Pflicht — pruefe-website.mjs verlangt, dass die
   gnav-/gfoot-Schlüssel auf allen Seiten deckungsgleich sind), der Textteil
   steckt in drei LAB-CO-021-Instanzen mit wechselnder Bildseite.
   Ein LAB-CTA-007 braucht es nicht: das Band „Starten Sie Ihren Weg zu Ihrem
   Traumfahrzeug" steckt bereits in LAB-FOOT-017 — genau wie auf der
   Live-Stellenseite.

   VIER NACHZÜGE, weil LAB-CO-021 für seinen Ursprungszweck gebaut ist (EINE
   Liste mit betitelten Punkten, EIN Absatz, EINE Überschrift):

   1) .cobp__punkt — eine Aufzählungszeile OHNE Untertitel. Die Section kennt
      nur .cobp__itemtitel (18 px, fett, Headline-Schrift) plus
      .cobp__itemtext darunter. Für „Akquise neuer Händlerpartner und Kunden"
      wäre 18 px fett viel zu laut, und ein Untertitel existiert nicht.
      Die Werte sind 1:1 die von .sec-295 .uspb__list li aus LAB-CO-022 —
      dort ist genau diese Zeilenform schon gelöst, und zwei verschiedene
      Aufzählungsbilder im Haus wären ein Fehler.
   2) Zweiter Absatz und zweite Überschrift brauchen Abstände. Die Section
      setzt .cobp__intro auf margin:0 und h2 auf „unten 1rem" — bei zwei
      Absätzen klebten sie aneinander, bei zwei Überschriften („Dein
      Aufgabengebiet" / „Dein Profil") hing die zweite direkt an der Liste
      darüber. --space-head-gap ist derselbe Abstand, den Section-Köpfe im
      Haus tragen.
   3) Die Kontaktzeilen der Ansprechpartnerin sind LINKS (tel:, mailto:,
      LinkedIn) und sollen wie Text aussehen, nicht wie Knöpfe — Unterstreichung
      erst beim Überfahren. Die Zeilenhöhe der Liste wird dort enger: vier
      Kontaktangaben sind eine Gruppe, keine vier Argumente.
   4) QUERFORMAT — UND ZWAR NUR AUF DEN VIER STELLENSEITEN.
      Zwei Runden gebraucht, deshalb hier ausführlich, damit es nicht ein
      drittes Mal passiert:
        · Erster Versuch: aspect-ratio am nackten .sec-294 .cobp__ph. Das war
          falsch, weil es die SECTION ändert — LAB-CO-021 ist im ganzen
          Projekt hochkant, und die Karriere-Seite hat dieselbe Bildfläche
          ungefragt mitbekommen.
        · Zweiter Schritt: Regel ersatzlos entfernt, Section wieder unangetastet.
        · Jetzt: der Modifier .sec-294--quer, den AUSSCHLIESSLICH die vier
          Stellenseiten an ihren beiden Bildblöcken tragen. Die Klasse steht im
          Seiten-HTML, nicht in der Section — jede andere LAB-CO-021-Instanz im
          Projekt bleibt hochkant, heute und bei jeder künftigen.
      DAS MASS KOMMT VON LIVE, nicht aus dem Gefühl: adrico.de zeigt beide
      Bilder (adrico-was-wir-bieten-3.webp und karriere-ap-c1.webp, je 600×338)
      im Verhältnis 1.78 — gemessen 387×218 und 397×224 —, also in ihrem
      Naturformat 16/9 und unbeschnitten. Ein Wert für alle Breiten, weil live
      dort ebenfalls nicht umschaltet.
      Die Regel muss die drei Section-Regeln überstimmen (3/4 · 16/10 unter
      1025 px · 3/2 unter 768 px). Alle drei haben Spezifität (0,2,0) und
      stehen als Section-CSS INLINE IM BODY, also nach dieser Datei. Mit dem
      führenden body kommt diese Regel auf (0,2,1) und gewinnt unabhängig von
      der Quellreihenfolge — ohne !important.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-294--quer .cobp__ph{ aspect-ratio: 16 / 9; }
body .sec-294 .cobp__punkt{
  font-size: var(--fs-body, 1rem);
  line-height: 1.65;
  color: var(--t-secondary, #5a636b);
}
body .sec-294 .cobp__text .cobp__intro + .cobp__intro{
  margin-block-start: var(--space-stack, 1rem);
}
/* 2c) Der Einleitungsblock der Stellenseiten hat KEIN Bild (auf Zuruf am
       04.09.2026 entfernt — es war dasselbe Motiv wie im Hero, nur anders
       beschnitten). Ohne Bildhälfte bliebe im 6/6-Split die halbe Zeile leer,
       deshalb acht Spalten. Die Lesebreite deckelt 65ch — derselbe Wert, den
       .sec-295 .uspb__text p in LAB-CO-022 trägt; ein 792 px breiter
       Textblock läse sich sonst wie eine Tabelle. Die anderen
       CO-021-Instanzen stehen in 6-Spalten-Spalten (588 px) und liegen damit
       ohnehin unter dem Deckel — die Regel ändert dort nichts. */
body .sec-294 .cobp__text--breit .cobp__intro{ max-inline-size: 65ch; }
body .sec-294 .cobp__text .cobp__list + h2{
  margin-block-start: var(--space-head-gap, 3rem);
}
/* 2b) Die Zeile mit den ZWEI Listen („Dein Aufgabengebiet" | „Dein Profil")
       nutzt denselben Bau, aber zwei Textspalten statt Bild + Text. Der
       Section-Default align-items:center ist dort falsch: die Listen sind
       unterschiedlich lang (6 gegen 7 Punkte), zentriert stünden ihre
       Überschriften auf verschiedenen Höhen. Oben ausgerichtet fluchten sie.
       Auf der Live-Seite stehen diese beiden Listen genauso nebeneinander. */
body .sec-294 .cobp__grid--listen{ align-items: start; }
@media (max-width: 1024px){
  /* Gestapelt braucht die zweite Liste Luft zur ersten — im 6/6-Split trägt
     das die Rinne, gestapelt gibt es keine. */
  body .sec-294 .cobp__grid--listen > .cobp__text + .cobp__text{
    margin-block-start: var(--space-head-gap, 3rem);
  }
}
body .sec-294 .cobp__list--kontakt{
  gap: var(--space-stack, 1rem);
}
/* 3b) Der Bewerbungs-CTA ist ein PFEIL-LINK, kein Knopf — so steht er auf der
       Live-Seite (gemessen: 16px/400, border-bottom 1px, transparenter Grund,
       20 px Abstand zur letzten Kontaktzeile). Groesse, Schreibweise, Linie
       und Pfeil kommen aus C3; der Pfeil als ::after-Maske, weil im Markup
       kein SVG steht.
       Nur der Abstand muss nachgezogen werden: .cobp__knopf traegt --sp-7
       (48 px) bzw. --sp-6 (32 px) mobil — die Masse eines vollflaechigen
       Knopfes, der Luft braucht. Ein Pfeil-Link gehoert naeher an seine Liste.
       --sp-5 (24 px) ist die Token-Stufe an den 20 px des Vorbilds.
       Eigene Klasse und nicht .sec-294--quer, obwohl beide nur auf den
       Stellenseiten stehen: das eine ist ein Bildformat, das andere ein
       Knopf-Abstand. Zusammengelegt waere beim naechsten Griff unklar, welche
       Haelfte gemeint ist.
       Der Knopf im HERO bleibt ein .btn — dort haben alle 20 Hero-Seiten des
       Projekts einen vollflaechigen Primaer-Knopf, und die Live-Stellenseite
       hat im Hero ueberhaupt keinen. */
body .sec-294 .cobp__knopf--pfeil{
  margin-block-start: var(--sp-5, 1.5rem);
}
body .sec-294 .cobp__list--kontakt a.cobp__punkt{
  color: var(--t-secondary, #5a636b);
  text-decoration: none;
  border-bottom: var(--bw-btn, 1px) solid transparent;
  transition: color var(--motion-base, 250ms) var(--ease-standard, ease),
              border-color var(--motion-base, 250ms) var(--ease-standard, ease);
}
body .sec-294 .cobp__list--kontakt a.cobp__punkt:hover,
body .sec-294 .cobp__list--kontakt a.cobp__punkt:focus-visible{
  color: var(--c-primary-dark, #1b2731);
  border-bottom-color: currentColor;
}
@media (prefers-reduced-motion: reduce){
  body .sec-294 .cobp__list--kontakt a.cobp__punkt{ transition: none; }
}

/* kw-rich v1 */
/* ── 1. Felder, die Blockelemente erlauben (div, li, td) ─────────────────── */
[data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit); letter-spacing:-.005em;
}
[data-kw] p{ margin:0 0 var(--sp-3, .75rem); }
[data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; }
/* Das Design-System setzt global ul,ol{list-style:none} — hier wieder aktivieren */
[data-kw] ul{ list-style:disc outside; }
[data-kw] ol{ list-style:decimal outside; }
[data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); }
[data-kw] li:last-child{ margin-bottom:0; }
[data-kw] li::marker{ color:var(--c-primary, currentColor); }
[data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; }

/* ── 2. Felder, die KEINE Blockelemente erlauben (p, span) ───────────────── */
/* span-Elemente sind überall zulässig; display:block macht daraus Zeilen.    */
.kw-h{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit);
}
.kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-li{
  display:block; position:relative;
  padding-left:1.35em; margin:0 0 var(--sp-2, .5rem);
}
/* Punkt aus ::before statt list-style — unabhängig von Browser und Reset */
.kw-li::before{
  content:"\2022"; position:absolute; left:.35em; top:0;
  color:var(--c-primary, currentColor); font-weight:700; line-height:inherit;
}
.kw-list-num{ counter-reset:kwli; }
.kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; }
.kw-list-num > .kw-li::before{
  content:counter(kwli) "."; left:0;
  font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums;
}

/* ── 3. Im Editor: leere Punkte müssen anklickbar bleiben ────────────────── */
/* Ein leeres span mit display:block wäre 0 Pixel hoch — der Schreibzeiger
   wäre unsichtbar. Beim Speichern werden leere Punkte ohnehin entfernt.      */
.kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; }

/* ── 4. Ränder: erstes Element oben, letztes unten ohne Abstand ──────────── */
[data-kw] > *:first-child{ margin-top:0; }
[data-kw] > *:last-child{ margin-bottom:0; }
[data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); }
/* /kw-rich */

/* ══════════════════════════════════════════════════════════════════════════════
   C8 · Korrektur AM kw-rich-Block darüber (M7 aus dem Prüfbericht)
   Der Block kommt aus rich-text-css.py und macht Aufzählungen in Editor-Feldern
   überhaupt erst formatierbar — er bleibt, wie das Skript ihn schreibt, damit
   ein erneuter Lauf ihn sauber ersetzen kann.

   EINE ZEILE DARIN PASST HIER NICHT: `[data-kw] strong{font-weight:600}`.
   Sie stammt aus Projekten, in denen der Fließtext auf 400 steht und 600 die
   Hervorhebung IST. Hier ist das anders — die Hero-Unterzeile trägt seit C6
   selbst 600 (Live-Wert). Ein <strong> darin wäre dann gleich schwer wie seine
   Umgebung, die Hervorhebung also weg. Betrifft 27 Stellen, unter anderem die
   Hero-Unterzeilen von Anschlussfinanzierung, Autokredit und Halal sowie die
   Zwischentitel der Datenschutzerklärung.

   700 statt 600, und über die Spezifität statt über die Reihenfolge: `body`
   davor bringt (0,1,2) gegen die (0,1,1) des Blocks. Das ist der Punkt — ein
   erneuter Lauf von rich-text-css.py hängt seinen Block ans DATEIENDE, also
   HINTER diese Zeile. Über Quellreihenfolge gewonnen wäre die Korrektur beim
   nächsten Lauf wieder weg; über Spezifität hält sie.
   ══════════════════════════════════════════════════════════════════════════════ */
body [data-kw] strong,
body [data-kw] b{ font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════════
   C9 · Trefferflächen auf 24 px (M10 aus dem Prüfbericht, WCAG 2.5.8)
   Selbst gemessen bei 390 und 500 px, nicht aus dem Bericht übernommen — und
   dabei kam eine Gruppe dazu und eine fiel weg:

     22× <a> in der Fußleiste       18 px hoch  → betroffen (stand im Bericht)
      1× Datenschutz-Checkbox       20 × 20     → betroffen (stand im Bericht)
      2× .tpb__weg in der Topbar    22 px hoch  → betroffen, NICHT im Bericht
     16× .mpk__punkt auf der Karte  20 × 20     → NICHT betroffen, s. u.

   DIE KARTENPUNKTE BLEIBEN, WIE SIE SIND. WCAG 2.5.8 hat eine
   Abstands-Ausnahme: unterdimensionierte Ziele sind zulässig, wenn ein
   24-px-Kreis um jedes Ziel keinen anderen schneidet. Gemessen ist der
   kleinste Abstand zwischen zwei Punkten 40 px — die Ausnahme greift also.
   Sie zu vergrößern hätte die Deutschlandkarte unschärfer gemacht: die Punkte
   markieren Standorte, ihre Position IST die Information.

   WIE: min-block-size statt Polster. Die Fußzeilen-Verweise stehen als
   display:inline mitten im Textfluss (Adresse, Menüspalten) — an einem
   inline-Element vergrößert padding die Zeilenbox NICHT, die Reihen würden
   sich optisch überlappen und die Trefferfläche bliebe trotzdem klein.
   inline-flex macht daraus einen eigenen Kasten, der die Zeile mitwachsen
   lässt, und align-items hält den Text auf seiner Grundlinie-Optik.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-288 a,
body .sec-290 .tpb__weg{
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
/* Die Checkbox ist ein ersetztes Element — hier zählt die eigene Größe. */
body input[type="checkbox"]{
  inline-size: 24px;
  block-size: 24px;
  flex-shrink: 0;
}
/* LAB-CF-004 braucht zwei eigene Zeilen — beim Nachmessen aufgefallen, die
   allgemeinen Regeln oben griffen dort nicht:
     · Die Zustimmungs-Checkbox trägt im Section-CSS width/height 1.25rem
       (= 20 px) mit Spezifität (0,2,1). Die Regel darüber hat (0,1,1) und
       verliert. Mit .sec-283 davor sind es (0,3,1).
     · Der Verweis „Datenschutzerklärung" steht als display:inline im
       Zustimmungstext und ist damit 18 px hoch. Er ist kein Fußzeilen-Link,
       fiel also nicht unter die Regel oben. align-items:baseline statt center:
       er sitzt mitten in einem Satz und muss auf der Grundlinie bleiben. */
body .sec-283 .kf__zustimmung input[type="checkbox"]{
  inline-size: 24px;
  block-size: 24px;
}
body .sec-283 .kf__zustimmung a{
  display: inline-flex;
  align-items: baseline;
  min-block-size: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   N4 · LAB-NAV-022: sichtbarer Aktiv-Zustand für die laufende Seite
   Ergänzt am 04.09.2026 beim Bau von /finanzierung/.

   BEFUND: Die Navigation setzt auf allen Seiten korrekt aria-current="page" —
   auf /haendler/ am Punkt „Für Händler", auf /finanzierung/ an „Finanzierung
   berechnen". Im Section-CSS gibt es dafür aber KEINE Regel: der Zustand war
   bisher nur für Screenreader vorhanden und sehend nicht erkennbar.

   WARUM HIER UND NICHT IN DER SECTION: Topbar, Navigation und Footer müssen auf
   allen Seiten WÖRTLICH gleich sein (49 globale Marker-Schlüssel,
   pruefe-website.mjs bricht bei Abweichung ab). Eine Regel im <style> einer
   einzelnen Seite wäre entweder auf dieser Seite allein — oder sie müsste in
   jede Seite kopiert werden. Hier steht sie einmal und gilt für alle vier.

   KEIN font-weight: Der Punkt liegt in einer waagerechten Leiste. Von 600 auf
   700 würde er breiter und die ganze Leiste rückte je Seite anders — deshalb
   Farbe plus Unterstreichung, beides ohne Einfluss auf die Breite.
   Die Unterstreichung, nicht die Farbe allein, trägt die Information: Hover
   färbt ebenfalls in --c-primary, und zwei Zustände dürfen nicht gleich aussehen.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-291 .nvg__link[aria-current="page"]{
  color: var(--c-primary, #023a51);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   N5 · /finanzierung/: das Überlappungsmaß Hero ↔ USP-Leiste
   Ergänzt am 04.09.2026.

   Die USP-Leiste (Block 308) schiebt sich über den Fuß des Heros (Block 307).
   Dafür braucht der Hero unten GENAU SO VIEL zusätzliches Polster, wie die
   Leiste nach oben rückt — zwei Zahlen, die immer zusammen wandern müssen.
   Deshalb stehen sie EINMAL hier und nicht zweimal in den beiden <style>-Blöcken
   der Seite. Dasselbe Muster wie --hero-hoehe weiter oben, und aus demselben
   Grund: eine Zahl, zwei Verwendungsstellen.

   152 statt der 150 der Liniarwood-Vorlage: 150 liegt nicht auf dem 4er-Raster
   des Hauses (scripts/check-section.js schlägt darauf an), 152 = 8 × 19 schon.
   Optisch nicht unterscheidbar.

   Beide Sections referenzieren die Variable MIT Fallback (152px) — sie bleiben
   also auch ohne diese Datei richtig gebaut.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{ --finanz-usp-versatz: 152px; }

/* ══════════════════════════════════════════════════════════════════════════════
   N6 · <picture> layoutneutral machen — Voraussetzung für die AVIF-Auslieferung
   Ergänzt am 07.09.2026. Baugleich mit C13 in adrico.de/css/custom.css.

   WARUM DAS NÖTIG IST
   Ein AVIF-Zwilling lässt sich bei einem echten <img> nur über <picture>
   ausliefern — `srcset` kennt kein zweites Format. Damit kommt eine zusätzliche
   Hülle zwischen Eltern-Element und Bild. Auf DIESER Site betrifft das genau
   die vier Partnerlogos im Fußleisten-Raster, und dort bricht die Hülle zwei
   Dinge (bei adrico.de nachgemessen, hier baugleich):

     1. `.grid>*` des Design_System — die Logos tragen ihre Spaltenklasse
        `col-span-2` SELBST. Wird das Bild eingewickelt, ist plötzlich die Hülle
        das Rasterkind und die Spaltenangabe wirkt nicht mehr.
     2. `[data-animate="stagger-children"]>*` — dieselben Bilder.

   `display:contents` löst 1 vollständig: die Hülle erzeugt keinen Kasten, das
   Bild ist wieder direktes Rasterkind. Es ist genau dafür gemacht.

   Punkt 2 löst es NICHT, sondern erzeugt ihn: ein Element ohne Kasten kann
   nicht verschoben oder ausgeblendet werden, die Einblend-Animation griffe ins
   Leere. Deshalb die dritte Regel — sie reicht dieselbe Animation ans Bild
   durch. `--stagger-delay` setzt `wb-reveal.js` auf `wrap.children`, also auf
   die Hülle; benutzerdefinierte Eigenschaften erben, das Bild bekommt seine
   Verzögerung von dort.

   KEIN LAUFBAND AUF DIESER SITE. Bei adrico.de mussten die Laufband-Logos
   (.sec-285) ungewickelt bleiben, weil die Section ihre Breiten über
   `:nth-child` steuert und eine Hülle die Zählung strukturell bricht. Hier
   stehen die Logos im Fußleisten-Raster, nicht im Laufband — der Sonderfall
   entfällt.

   GEHÖRT INS DESIGN_SYSTEM, NICHT HIERHER. `kw-api.php` wickelt seit 1.7.0
   JEDES im Editor getauschte Bild in <picture> (Version auf dieser Site:
   2.11.0), und `style.css` des Design_System enthält keine einzige
   `picture`-Regel. Ohne diesen Nachzug bricht auf jeder angebundenen
   Kundenseite das Raster, sobald jemand ein Bild in einem `.grid` tauscht.
   Steht im DESIGN-SYSTEM-BACKLOG.
   ══════════════════════════════════════════════════════════════════════════════ */
body picture{ display: contents; }

/* DIE FALLE HINTER display:contents — bei adrico.de am 04.09.2026 gemessen.
   `display:contents` löst die Hülle auf, und dann werden ALLE ihre Kinder zu
   Rasterkindern — auch `<source>`. Chrome gibt `<source>` `display:inline`
   (nicht `none`, wie man erwartet); im Raster wird daraus ein Kind, das eine
   Zelle belegt, obwohl es 0 × 0 groß ist. Dort stieg die Fußleiste dadurch von
   152 px auf 264 px, weil vier Quellen vier Zellen wegnahmen.
   Die Formatauswahl von <picture> läuft im HTML, nicht im CSS — `display:none`
   nimmt der Quelle also nur das Rasterkind, nicht ihre Aufgabe. */
body picture > source{ display: none; }

html.dsjs [data-animate="stagger-children"] > picture > img{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
              transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
  transition-delay: var(--stagger-delay,0ms);
}
html.dsjs [data-animate="stagger-children"].visible > picture > img{
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Zwei Kacheln nebeneinander auf dem Handy — ENTFALLEN am 10.09.2026

   Der Block stellte LAB-CRD-010 unter 768px auf zwei Spalten und passte
   Polster, Schriftgroessen und eine Textkuerzung auf drei Zeilen an eine
   Kartenbreite von rund 160px an. Er war fuer eine Kartenreihe der Startseite
   gedacht, die dort nicht mehr existiert: `sec-118` kommt auf keiner Seite des
   Bestands mehr vor ausser auf /haendler/ — und dort sind es INHALTSKARTEN,
   die untereinander stehen sollen.

   Der Selektor `body .sec-118 …` galt sitzweit und hatte durch das
   vorangestellte `body` hoehere Spezifitaet als die Ein-Spalten-Regel der
   Section selbst. Deshalb gewann er, obwohl die Section-Regel spaeter steht:
   drei Karten wurden zu zwei nebeneinander plus einer allein darunter.
   Gemessen bei 390px Fensterbreite: 171px je Karte statt 358px.

   Ohne den Block greift wieder `@media (max-width: 767px){ … 1fr }` aus der
   Section — drei Karten untereinander, ungekuerzter Text.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Die Karten sind hier die letzte Section vor dem Fuß, nicht eine von acht —
   das Polster einer Inhaltsseite ist unten zu viel. */
body .sec-118.kart118{ padding-block-end: var(--sp-7, 3rem); }

/* ── EINE VARIABLE FÜR BILDHÖHE UND ÜBERLAPPUNG ─────────────────────────────
   Der Deckel der Überlappung in Block 5 rechnet mit der VOLLEN Hero-Höhe
   (85vh, in der Formel fest verdrahtet). Auf der Startseite ist der Hero
   seit dem 07.09. flacher (Block N9) — die zwei Rechnungen liefen damit
   auseinander, und auf flachen Bildschirmen war die Weiche 66 bis 134px zu
   hoch (gemessen 1280x720 und 1440x800).

   Statt eine zweite Zahl daneben zu stellen, hängen Bildhöhe UND Überlappung
   hier an DERSELBEN Variablen. Damit ist die Kante des Hero per Konstruktion
   die halbe Bildhöhe — egal, welchen Wert die Höhe annimmt.

   Die Höhe selbst kommt aus vh: „auf einen Blick sichtbar" hängt an der
   Bildschirmhöhe, nicht an der Breite. Das Kartenbild ist ein
   background-image mit `cover`, ein festes Maß schneidet also nichts ab und
   verzerrt nichts — es wählt nur einen anderen Ausschnitt.
   `aspect-ratio: 16/9` der Section wird dabei still übergangen (Breite 100%
   plus feste Höhe schlägt das Seitenverhältnis) — deshalb steht hier keine
   Rücknahme. */
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .kart118{
  --weiche-bildhoehe: clamp(140px, 26vh, 300px);
  --kart-ueberlappung: calc(var(--weiche-bildhoehe) / 2);
}
body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .card__img-placeholder{
  block-size: var(--weiche-bildhoehe);
}
@media (max-width: 767px){
  body [data-sec="LAB-HERO-015"] + [data-sec="LAB-CRD-010"] .kart118{
    --weiche-bildhoehe: clamp(90px, 14vh, 130px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   N8 · (entfallen am 07.09.2026)
   Hier stand eine Instanz-Regel, die LAB-FOOT-015 straffer machte. Nach Louis'
   Korrektur ist der Fuß wieder LAB-FOOT-017 in reduzierter Fassung; ihre
   Selektoren (.sec-230) treffen nichts mehr. Die Nummer bleibt als Lücke
   stehen, damit N9 und alles Spätere nicht verrutscht.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   N9 · --nav-h neu verankern und die Hero-Höhe der Startseite senken
   Ergänzt am 07.09.2026 (Umbau QR-Einstieg).

   1. --nav-h STAND AUF DER NAVIGATION — und die ist weg.
   Die Variable war in Block N1 an `.sec-291 .nvg` gesetzt (84px). Mit dem
   Entfernen der Menüleiste war sie projektweit UNDEFINIERT, und damit war
   `--hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), …)` als
   ganzer Ausdruck ungültig: eine calc()-Rechnung mit einer leeren Variablen
   fällt aus, und `min-height: var(--hero-hoehe)` greift nicht mehr. Die Heros
   standen danach nur noch so hoch wie ihr Inhalt — es sah zufällig plausibel
   aus, war aber keine gerechnete Höhe mehr. Aufgefallen beim Zurückrollen des
   Startseiten-Heros.
   Der Wert ist jetzt die Höhe der schmalen Kopfleiste (2.75rem = 44px, gemessen
   45px mit ihrer Trennlinie) und steht am :root, nicht an einer Section — die
   Rechnung darf nicht wieder von einem Bauteil abhängen, das entfallen kann.

   2. DIE STARTSEITE BEKOMMT EINEN FLACHEREN HERO.
   Auftrag Louis: „du solltest nur die Höhe der Hero Section etwas reduzieren."
   85vh sind auf einem 900px-Fenster 720px — zusammen mit den überlappenden
   Karten reicht das nicht für „auf einen Blick". 58vh sind auf 900px 478px — gemessen der Wert, bei dem die zweite Kartenreihe noch in den Bildschirm passt (bei 62vh fehlten 18px).
   Der Selektor trifft AUSSCHLIESSLICH den Hero, hinter dem die Kartenleiste
   folgt, also die Startseite: /haendler/ hat denselben Hero, dort steht danach
   aber LAB-CO-021, und dort soll die Höhe bleiben.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{ --nav-h: 2.9375rem; }
/* 07.09.2026, zweite Fassung: die Höhe hing zuerst an der schmalen Kopfleiste
   (2.75rem). Die ist entfallen, jetzt trägt die Brotkrumen-Leiste sie —
   gemessen 47px auf allen fünf Dokumenten, also 2.9375rem. Der Wert steht
   weiter am :root und nicht an einer Section, damit --hero-hoehe nicht wieder
   von einem Bauteil abhängt, das entfallen kann. */

body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-CRD-010"]) .hero-e{
  min-height: min(calc(58 * 1vh - var(--nav-h)), 32rem);
}
@media (max-width: 1024px){
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-CRD-010"]) .hero-e{
    min-height: min(calc(58 * 1vh - var(--nav-h)), 26rem);
  }
}
@media (max-width: 767px){
  body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-CRD-010"]) .hero-e{
    min-height: min(calc(46 * 1vh - var(--nav-h)), 20rem);
  }
}
/* Ohne :has() (alte Safari-Fassungen) bleibt die Höhe aus Block 5b stehen —
   nur höher, nichts kaputt. Kein Nachbau nötig. */

/* ══════════════════════════════════════════════════════════════════════════════
   N10 · Der leuchtende Hauptknopf — Fassung 9 aus entwuerfe/knopf-neun.html
   Ergänzt am 07.09.2026. Louis hat aus neun Entwürfen den „wandernden Verlauf"
   gewählt: Petrol und Tertiär-Blau schieben sich langsam durch die Fläche, dazu
   eine feine helle Oberkante. Nichts blitzt, nichts springt.

   WARUM EINE EIGENE KLASSE UND NICHT .btn--primary ÜBERSCHRIEBEN
   .btn--primary steht auf dieser Site an vielen Stellen — im Anmelde-Dialog,
   in den Preiskarten des Portals, in den Inhaltsabschnitten. Ein dauerhaft
   bewegter Verlauf auf JEDEM davon wäre Lärm, und auf hellem Grund ergibt der
   Schein keinen Sinn. .btn--leucht wird deshalb dort gesetzt, wo ein Knopf der
   Hauptweg der Seite ist: in den Heros.

   DER ZWEITE KNOPF BLEIBT WIE AUF DER STARTSEITE (weiße Kontur, .btn--ghost) —
   Louis' Vorgabe. Die Rangfolge kommt damit aus dem Kontrast: bewegte Fläche
   gegen ruhige Kontur.

   TOKEN: --c-primary, --c-primary-dark und --c-tertiary. Keine neue Farbe.
   BEWEGUNG: 9 Sekunden für einen Hin- und Rückweg, ease-in-out. Bei
   prefers-reduced-motion steht der Verlauf still (Position 50 %) — das
   Leuchten bleibt, die Bewegung entfällt.
   ══════════════════════════════════════════════════════════════════════════════ */
body .btn--leucht{
  position: relative;
  color: var(--c-white, #fff);
  background: linear-gradient(100deg,
    var(--c-primary-dark, #012736) 0%,
    var(--c-primary, #023a51) 34%,
    var(--c-tertiary, #10688e) 52%,
    var(--c-primary, #023a51) 70%,
    var(--c-primary-dark, #012736) 100%);
  background-size: 300% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 12px 40px -14px color-mix(in srgb, var(--c-tertiary, #10688e) 55%, transparent);
  animation: kw-verlauf-wandern 9s var(--ease-standard, ease-in-out) infinite;
}
body .btn--leucht:hover{
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 16px 52px -12px color-mix(in srgb, var(--c-tertiary, #10688e) 75%, transparent);
}
@keyframes kw-verlauf-wandern{
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  body .btn--leucht{ animation: none; background-position: 50% 50%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   N11 · Brotkrumen ÜBER dem Bild — Variante für Seiten mit Vollbild-Hero
   Ergänzt am 07.09.2026. Auftrag Louis für /haendler/: „weiße schrift und
   einfach auf das hero bild oben drauf ohne hintergrund."

   WIE ES GEHT, OHNE DEN FLUSS ZU BRECHEN
   Die Leiste bleibt im Dokumentfluss an ihrem Platz, verliert aber Grund und
   Linie und wird mit einer negativen Marge über den Hero gezogen. Der Hero
   bekommt dieselbe Höhe oben als Polster zurück, damit sein Inhalt nicht unter
   die Leiste rutscht. Absolut positionieren wäre schlechter: dann müsste jede
   Seite mit dieser Variante ihre Höhe kennen.

   WARUM ALS VARIANTE UND NICHT ÜBERALL
   Im Portal soll die Leiste bleiben, wie sie ist (Louis ausdrücklich) — dort
   beginnt die Seite mit Weiß, eine weiße Schrift wäre unsichtbar. Die Variante
   hängt deshalb an einer Klasse und trägt zusätzlich data-m-auf-bild="1" am
   Block, damit sie im Baukasten-Sinn ein Modifier ist und nicht eine
   Sonderregel für eine Adresse.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-312 .brot--auf-bild{
  position: relative; z-index: 3;
  background: transparent;
  border-block-end: 0;
  margin-block-end: calc(-1 * var(--nav-h));
}
body .sec-312 .brot--auf-bild .brot__liste a{ color: rgba(255, 255, 255, .72); }
body .sec-312 .brot--auf-bild .brot__liste a:hover{ color: var(--c-white, #fff); }
body .sec-312 .brot--auf-bild .brot__liste [aria-current="page"]{ color: var(--c-white, #fff); }
body .sec-312 .brot--auf-bild .brot__liste li + li::before{ color: rgba(255, 255, 255, .5); opacity: 1; }
/* Der Hero holt sich die Höhe der Leiste als Polster zurück — sonst stünde
   seine Preheadline unter der Brotkrumenzeile. */
/* Der Hero holt sich die Höhe der Leiste als Polster zurück — sonst stünde
   sein erster Text unter der Brotkrumenzeile. Der Selektor nennt die Heros, die
   es betrifft, statt „das nächste Geschwister": am 07.09.2026 hieß der Hero der
   Händlerseite erst LAB-HERO-015, dann LAB-HERO-313, und auf /finanzierung/
   heißt er LAB-HERO-307. Eine Regel pro Section-Code ist hier ehrlicher als
   eine, die stillschweigend nicht mehr greift. */
body .sec-312:has(.brot--auf-bild) + [data-sec="LAB-HERO-313"] .hoch__kopf{
  padding-block-start: calc(clamp(2rem, 9vh, 5rem) + var(--nav-h));
}
body .sec-312:has(.brot--auf-bild) + [data-sec="LAB-HERO-307"] .rfh{
  padding-block-start: var(--nav-h);
}
body .sec-312:has(.brot--auf-bild) + [data-sec="LAB-HERO-015"] .hero-e{
  padding-block-start: var(--nav-h);
}

/* ══════════════════════════════════════════════════════════════════════════════
   N12 · Luft zwischen dem Abschluss-Banner und der Fußleiste
   Ergänzt am 07.09.2026. Auftrag Louis für /haendler/: „mehr weißraum zwischen
   footerleiste und dem banner damit das bild nicht an der footerleiste klebt."

   GEMESSEN WAR ES 0px: LAB-CTA-007 endet mit dem Bild an seiner Unterkante,
   und der Fuß ist seit heute nur noch die dunkle Rechtsleiste — der weiße
   Markenteil, der vorher dazwischen lag, ist entfallen. Das Bild stieß deshalb
   direkt an den dunklen Streifen.

   DER SELEKTOR TRIFFT GENAU DIESEN FALL und keine Adresse: „ein
   Abschluss-Banner unmittelbar vor der Fußleiste". Auf /haendler/ ist das so,
   auf den anderen Seiten steht dort etwas anderes. Kommt der Fall auf einer
   weiteren Seite vor, greift die Regel von selbst mit.
   ══════════════════════════════════════════════════════════════════════════════ */
/* DREI IRRWEGE, alle durch Messung erledigt — und der dritte ist der
   lehrreiche:
   1. Mein erster Selektor hieß .cta007 — die Section heißt innen .pcta. Traf
      nichts, Abstand blieb 0px.
   2. Polster AUF .pcta half auch nicht: das Porträt ragt absichtlich unter das
      dunkle Band hinaus (margin-bottom: -160px), seine Unterkante hängt damit
      an der Unterkante der Section — gemessen beide bei 3681px, obwohl .pcta
      64px Polster hatte.
   3. `:has(+ [data-sec="LAB-FOOT-017"])` KANN NIE GREIFEN: der Fuß steht
      außerhalb von <main>, der CTA-Block ist das LETZTE Kind von <main> und
      hat gar kein nächstes Geschwister (im Browser nachgesehen:
      nextElementSibling ist null). Der Zustand, den ich treffen will, heißt
      also nicht „vor dem Fuß", sondern „letzter Abschnitt der Seite".
   Die Luft kommt UNTER die Section, an die Blockwurzel — dort ist der Grund
   die weiße Seite, also echter Weißraum. */
body main > [data-sec="LAB-CTA-007"]:last-child > div{
  padding-block-end: clamp(var(--sp-7, 3rem), 8vh, var(--sp-9, 6rem));
  background: var(--c-surface, #fff);
}

/* ══════════════════════════════════════════════════════════════════════════════
   N13 · Der weiße Kontur-Knopf für dunkle Flächen
   Ergänzt am 07.09.2026. Louis: „behalte den weißen outline button der
   startseite für den sekundären button."

   WARUM NICHT .btn--ghost DES DESIGN_SYSTEM
   Der ist ein weiß GEFÜLLTER Knopf mit Petrol-Rahmen (nachgesehen in
   style.css: `background:var(--c-white); border-color:var(--c-primary);
   color:var(--t-primary)`). Auf dem dunklen Hero wirkt er wie ein zweiter
   Hauptknopf und nimmt dem leuchtenden die Rangfolge — gemessen an der
   Startseite: zwei weiße Flächen nebeneinander.
   Der Knopf aus dem Entwurf ist das Gegenteil: transparent, weiße Kontur,
   weiße Schrift. Er ordnet sich unter, ohne zu verschwinden.

   NUR AUF DUNKLEM GRUND EINSETZEN. Auf Weiß wäre weiße Schrift unsichtbar —
   deshalb eine eigene Klasse und keine Änderung an .btn--ghost, der auf hellen
   Abschnitten weiter seinen Zweck hat.
   ══════════════════════════════════════════════════════════════════════════════ */
body .btn--kontur{
  background: transparent;
  color: var(--c-white, #fff);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease),
              box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease);
}
body .btn--kontur:hover{
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

/* ══════════════════════════════════════════════════════════════════════════════
   N14 · /haendler/: Weiter-Pfeil im Hero und „Zum Händlerportal" in der Leiste
   Ergänzt am 08.09.2026. Auftrag Louis, zwei Wünsche an derselben Seite.

   1) DER PFEIL. „Mittig unten auf dem Hero, Anker zur nächsten Section — man
      sieht durch den hohen Hero nicht, dass darunter noch was kommt. Soll zum
      minimalistischen Stil passen und nicht zu viel Fokus vom primären Button
      ziehen."
      Deshalb: ein 44-px-Kreis (Trefferfläche nach WCAG 2.5.8), transparent, mit
      derselben weißen Kontur wie .btn--kontur (N13) — aber SCHWÄCHER (.45 statt
      .55), damit er in der Rangfolge UNTER dem Einloggen-Knopf steht und weit
      unter dem leuchtenden Hauptknopf. Keine Bewegung: der Hauptknopf trägt
      schon den wandernden Verlauf (N10), ein zweites bewegtes Element im selben
      Blick würde genau den Fokus abziehen, den Louis nicht will.
      NUR AB 768px: auf dem Handy ist der Hero ein kompakter Block (siehe den
      767px-Block in der Section), der Inhalt folgt direkt — dort gibt es nichts
      anzukündigen. Der Kasten .hoch ist position:relative mit overflow:hidden,
      der Pfeil sitzt absolut an seiner Unterkante; unter den Knöpfen liegen
      dort mindestens 132px Polster (.hoch__zone), er kollidiert also nicht.

   2) DER LINK. „Oben rechts ein weißer Textlink ‚Zum Händlerportal' in der
      Breadcrumb-Leiste." Gebaut wie der Ausloggen-Link im Portal (.brot__reihe,
      Link rechts an der Rasterkante) — zwei Leisten, eine Bauart. Weiß mit .85,
      im Hover voll weiß und unterstrichen, wie die Brotkrumen selbst in N11.
      NOWRAP, MIT ABSICHT: N11 zieht die Leiste um genau --nav-h (47px) über den
      Hero. Bricht die Reihe in zwei Zeilen, ragt die obere Zeile ÜBER den Hero
      hinaus auf den weißen Seitengrund — weiße Schrift auf Weiß, unsichtbar.
      Deshalb darf die Reihe nicht umbrechen; auf schmalen Handys wird statt-
      dessen die Schrift eine Stufe kleiner (gemessen bei 390 und 360px).
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-313 .hoch__weiter{ display: none; }
@media (min-width: 768px){
  body .sec-313 .hoch__weiter{
    position: absolute;
    inset-block-end: clamp(1.25rem, 3.5vh, 2.25rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.75rem; block-size: 2.75rem;
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
    transition: background var(--motion-fast, 150ms) var(--ease-standard, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease),
                color var(--motion-fast, 150ms) var(--ease-standard, ease);
  }
  body .sec-313 .hoch__weiter:hover{
    color: var(--c-white, #fff);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
  }
  body .sec-313 .hoch__weiter:focus-visible{
    outline: 2px solid var(--c-white, #fff);
    outline-offset: 3px;
  }
  body .sec-313 .hoch__weiter svg{ display: block; }
}

body .sec-312 .brot--auf-bild .brot__reihe{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4, 1rem);
  flex-wrap: nowrap;
}
body .sec-312 .brot--auf-bild .brot__reihe .brot__liste{ flex-wrap: nowrap; min-inline-size: 0; }
body .sec-312 .brot--auf-bild .brot__portal{
  flex: none;
  /* Bleibt rechts, auch wenn er auf dem Handy in eine zweite Zeile rutscht —
     space-between allein setzt ein einzelnes Kind links an (gemessen bei 320px). */
  margin-inline-start: auto;
  padding-block: var(--sp-3, .75rem);
  font-size: var(--fs-body-sm, .875rem);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
body .sec-312 .brot--auf-bild .brot__portal:hover{ color: var(--c-white, #fff); text-decoration: underline; }
body .sec-312 .brot--auf-bild .brot__portal:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 2px; }
@media (max-width: 420px){
  body .sec-312 .brot--auf-bild .brot__reihe{ gap: var(--sp-2, .5rem); }
  body .sec-312 .brot--auf-bild .brot__reihe .brot__liste,
  body .sec-312 .brot--auf-bild .brot__portal{ font-size: .8125rem; }
}
/* AUF DEM HANDY LIEGT DIE LEISTE ABSOLUT ÜBER DEM BILDBAND. Gemessen am
   08.09.2026: bei 360px und 320px passt „smart Finanzierung / Für Händler" plus
   „Zum Händlerportal" nicht mehr in eine Zeile (333px nötig, 328px da), die
   Reihe wird 66px hoch — N11 zieht sie aber nur um --nav-h (47px) über den
   Hero. Die oberen 19px stünden auf dem weißen Seitengrund: weiße Schrift auf
   Weiß. Deshalb hier ein anderer Mechanismus als in N11: unter 768px nimmt die
   Leiste keinen Platz im Fluss ein und liegt an der Oberkante ihres Blocks
   (.sec-312 wird dafür der Bezug). Der Hero beginnt dann direkt darunter mit
   seinem Bildband (auf dem Handy steht das Bild im Fluss ganz oben, 4:3 bzw.
   16:9), und die Leiste liegt IMMER auf dem Bild — egal ob ein- oder zweizeilig.
   N11 war absichtlich nicht absolut („jede Seite müsste ihre Höhe kennen"); das
   gilt weiter für den Desktop, wo die Reihe einzeilig ist (gemessen 46px bei
   1440/1024/834). Hier ist die Höhe egal, weil darunter das Bild liegt. */
@media (max-width: 767px){
  body .sec-312:has(.brot--auf-bild .brot__reihe){ position: relative; }
  body .sec-312 .brot--auf-bild:has(.brot__reihe){
    position: absolute; inset-block-start: 0; inset-inline: 0;
    margin-block-end: 0;
  }
  body .sec-312 .brot--auf-bild .brot__reihe{ flex-wrap: wrap; row-gap: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   N15 · LAB-FAQ-019 auf /haendler/: drei runde Kontaktwege statt der Status-Pille
   Ergänzt am 08.09.2026. Auftrag Louis: FAQ und Abschluss-Banner zu EINER
   Section zusammenlegen — „das ‚jetzt erreichbar' entfernen wir und fügen
   stattdessen 3 runde Formen ein mit je einem Icon (Telefon, Mail, Website),
   wo die Kontaktdaten von ADRiCO verlinkt werden."

   DIE FARBEN SIND DIE DER SECTION SELBST: die Bibliotheksvorlage färbt ihre
   Status-Pille und die Plus-Knöpfe mit color-mix(--c-primary 10 %) auf
   --c-primary-dark und dreht das beim Öffnen auf --c-primary / Weiß. Die drei
   Kreise übernehmen genau dieses Paar — Ruhe- und Hover-Zustand — statt eine
   neue Farbe einzuführen. 44 px Durchmesser: Trefferfläche nach WCAG 2.5.8,
   dieselbe Größe wie der Weiter-Pfeil im Hero (N14).

   Die Vorlage bleibt unangetastet (Grundsatz Romeo 14.08.: Kundenspezifisches
   entsteht auf der Site oder in custom.css, nie als Kopie in der Bibliothek).
   Der Markup-Träger .fq131__kontakte sitzt dort, wo vorher .fq131__status stand.
   ══════════════════════════════════════════════════════════════════════════════ */
body .sec-225 .fq131__kontakte{
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-3, .75rem);
  margin-block-end: var(--sp-4, 1rem);
}
body .sec-225 .fq131__kontakt{
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-primary, #023a51) 10%, transparent);
  color: var(--c-primary-dark, #012736);
  transition: background var(--motion-base, 200ms) var(--ease-standard, ease),
              color var(--motion-base, 200ms) var(--ease-standard, ease);
}
body .sec-225 .fq131__kontakt:hover{ background: var(--c-primary, #023a51); color: var(--c-white, #fff); }
body .sec-225 .fq131__kontakt:focus-visible{ outline: 2px solid var(--c-primary, #023a51); outline-offset: 3px; }
body .sec-225 .fq131__kontakt svg{ inline-size: 1.25rem; block-size: 1.25rem; display: block; }

/* OHNE TRÄGER SEIT 08.09.2026 — nicht gelöscht, nur benannt: die Regeln für
   .sec-145 (LAB-FAQ-015: Blöcke 1c, 2, A2-6 und die Absatz-Regeln um Zeile 637)
   und .sec-286 (LAB-CTA-007: P2, N12) treffen auf keiner der fünf Seiten mehr
   etwas. /haendler/ war die einzige Seite mit diesen beiden Sections. Wer eine
   davon wieder einsetzt, findet die Regeln vor; wer aufräumt, weiß, was weg kann. */


/* kw-landmark v1 */
.kw-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1.25rem;background:#000;color:#fff;font:inherit;text-decoration:underline;border-radius:0 0 .25rem 0}.kw-skip:focus{left:0}

/* ══════════════════════════════════════════════════════════════════════════════
   Hero auf dem Handy: Text AUF dem Bild, Knoepfe darunter
   Ergaenzt am 10.09.2026. Gilt fuer LAB-HERO-313 auf allen Seiten dieser Site.

   VORHER: Das Bildband lag oben, der gesamte Text darunter auf dunklem Grund.
   JETZT: H1 an der Oberkante des Bandes, Logo und H2 an seiner Unterkante, die
   Bildmitte bleibt frei. Die Knoepfe stehen unter dem Band.

   ZWEI FEHLER WERDEN DABEI MITBEHOBEN:

   1. `position: static` am Bildband. Absolut positionierte Nachkommen des
      Bandes verlieren damit ihren Bezugsrahmen und richten sich an `.hoch`
      aus — also an der GANZEN Hero statt am Band. Betroffen waren der
      Abdunkler `::after` (lag ueber H1, H2 und dem zweiten Knopf, der dadurch
      nicht anklickbar war) und die KI-Leinwand auf /haendler/ (397x719 statt
      397x300, das Bild deckte die ganze Hero ab und verdeckte den Text).
      `relative` nimmt nichts aus dem Fluss und stellt den Bezugsrahmen her.
      Der erste Knopf war nur deshalb bedienbar, weil er `position: relative`
      traegt und darum ueber dem Abdunkler malt.

   2. Die Bandhoehe kommt aus dem INHALT, nicht aus einer Dehnung. Eine
      `1fr`-Zeile mit Bildschirm-Mindesthoehe war hier schon einmal gebaut und
      hinterliess auf hohen Fenstern zweimal rund 300px Schwarz zwischen den
      Elementen. Stattdessen bestimmt die Fuge in der Bandmitte (`--hoch-fuge`)
      den freien Raum, und das Band deckt exakt die vier Textzeilen ab.
      Dadurch bleibt das Band bei etwa 4:3 — das Verhaeltnis, bei dem die
      Fahrzeugreihe der Startseite vollstaendig im Bild bleibt. Hoehere Baender
      beschneiden ein 16:9-Motiv waagerecht und schneiden Fahrzeuge weg.

   WARUM `display: contents`: H1 und Logo stecken zusammen in `.hoch__kopf`,
   H2 und die Knoepfe zusammen in `.hoch__zone`. Fuer diese Aufteilung muessen
   beide Gruppen aufgeloest werden, ohne das Markup zu aendern — die vier
   Elemente werden dadurch direkte Rasterkinder von `.hoch` und einzeln
   platzierbar. Das seitliche Polster der aufgeloesten `.container` wird an den
   Elementen selbst nachgezogen.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  body .sec-313 .hoch{
    --hoch-fuge: 34vw;          /* freie Bildmitte zwischen H1 und der Unterkante */
    --hoch-pol: 1rem;           /* seitliches Polster der aufgeloesten .container */
    grid-template-rows: auto auto auto auto;   /* H1 · Fuge · Logo · H2 ; Knoepfe folgen */
    align-content: start;
  }

  /* Gruppen aufloesen, damit die vier Elemente einzeln platzierbar sind. */
  body .sec-313 .hoch__kopf,
  body .sec-313 .hoch__kopfzeile,
  body .sec-313 .hoch__zone,
  body .sec-313 .hoch__zone > .container{ display: contents; }

  /* Das Bildband deckt die vier Textzeilen ab und folgt ihrer Hoehe. */
  body .sec-313 .hoch__bild{
    position: relative;         /* Bezugsrahmen fuer ::after und die KI-Leinwand */
    grid-row: 1 / 5; grid-column: 1;
    aspect-ratio: auto;
    align-self: stretch;
    /* Das Band ist jetzt positioniert und wuerde damit UEBER den statischen
       Textelementen malen (positionierte Elemente kommen in der Malreihenfolge
       nach dem normalen Fluss, unabhaengig von der DOM-Reihenfolge). Deshalb
       eine ausdrueckliche Stapelung: Band 0, Text 1. Ein negativer Wert wie auf
       dem Desktop ist hier nicht moeglich, weil `.hoch` keinen eigenen
       Stapelkontext aufspannt. */
    z-index: 0;
    background-position: center 50%;
  }

  /* Abdunkler: oben und unten dunkel, damit beide Textgruppen lesbar sind;
     die Mitte bleibt frei, dort ist das Motiv zu sehen. */
  body .sec-313 .hoch__bild::after{
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 72%, transparent) 0%,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 30%, transparent) 22%,
        transparent 42%),
      /* Die untere Gruppe (Logo + H2) beginnt bei rund 61 % der Bandhoehe, also
         39 % ueber der Unterkante. Der Abdunkler muss dort schon traegen: das
         Logo-Vorwort steht mit 60 % weisser Deckkraft auf einem hellen
         Hallenboden und war sonst nicht zu lesen. */
      linear-gradient(to top,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 92%, transparent) 0%,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 78%, transparent) 22%,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 45%, transparent) 40%,
        color-mix(in srgb, var(--c-secondary-dark, #060706) 15%, transparent) 52%,
        transparent 64%);
  }

  /* Die leere Dehnfuge des alten Aufbaus traegt jetzt die freie Bildmitte. */
  body .sec-313 .hoch > div:not([class]){
    grid-row: 2; grid-column: 1;
    block-size: var(--hoch-fuge);
  }

  body .sec-313 .hoch__kopfzeile h1{
    grid-row: 1; grid-column: 1; align-self: start;
    position: relative; z-index: 1;
    padding-inline: var(--hoch-pol);
    padding-block-start: var(--sp-5, 1.5rem);
    margin: 0;
  }
  body .sec-313 .hoch__angebot{
    grid-row: 3; grid-column: 1; align-self: end;
    position: relative; z-index: 1;
    padding-inline: var(--hoch-pol);
    margin: 0 0 var(--sp-2, .5rem);
    text-align: start;
  }
  body .sec-313 .hoch__zone > .container > h2{
    grid-row: 4; grid-column: 1; align-self: end;
    position: relative; z-index: 1;
    padding-inline: var(--hoch-pol);
    padding-block-end: var(--sp-4, 1rem);
    margin: 0;
  }

  /* Unter dem Band, auf dunklem Grund — damit immer sichtbar. */
  body .sec-313 .hoch__wege{
    grid-row: 5; grid-column: 1;
    padding-inline: var(--hoch-pol);
    padding-block: var(--sp-5, 1.5rem) var(--sp-6, 2rem);
  }
  body .sec-313 .hoch__weiter{ grid-row: 6; grid-column: 1; padding-inline: var(--hoch-pol); }
  /* Wo eine Brotkrume ueber dem Bild liegt (Unterseiten), beginnt die H1
     tiefer: die Brotkrume belegt die obersten 46px, die H1 stand mit ihrem
     Polster von 24px genau darin. Auf der Startseite gibt es keine Brotkrume,
     dort bleibt das kleinere Polster — jeder Pixel mehr geht vom Motiv ab. */
  body:has(.sec-312) .sec-313 .hoch__kopfzeile h1{
    padding-block-start: calc(var(--sp-5, 1.5rem) + 3rem);
  }

}

/* ══════════════════════════════════════════════════════════════════════════════
   Anmelde-Dialog auf dem Handy scrollbar machen
   Ergaenzt am 10.09.2026.

   BEFUND: Der Dialog ist auf dem Handy genau fensterhoch (`block-size: 100dvh`),
   sein Inhalt `.auth__grid` aber 1080px — gemessen bei 390x844. Die Regel
   `.sec-305 .auth{ overflow: hidden }` schneidet die letzten 236px ab, und weil
   zusaetzlich `html` waehrend des offenen Dialogs auf `overflow: hidden` steht,
   laesst sich gar nichts scrollen. Das Formular ist unten unerreichbar.

   Warum `overflow: hidden` dort ueberhaupt steht: auf dem Desktop liegt das
   Bild der zweispaltigen Flaeche an der Dialogkante und wird von der Rundung
   beschnitten. Das bleibt so — die Korrektur gilt nur unter 768px, wo das
   Raster einspaltig stapelt und dadurch hoeher wird als das Fenster.

   `overscroll-behavior: contain` verhindert, dass die Bewegung am Ende des
   Dialogs auf die Seite dahinter ueberspringt.

   Der Schliessknopf wuerde als absolut positioniertes Kind mit dem Inhalt
   wegscrollen — nach 236px waere er ausserhalb des Fensters und der Dialog nur
   noch mit der Zurueck-Taste zu verlassen. Im festen Dialog bezieht sich
   `position: fixed` auf das Fenster, der Knopf bleibt damit stehen.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  body .sec-305 .auth{
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Letztes Feld nicht an der Unterkante kleben; beruecksichtigt die
     Bedienleiste am unteren Rand aktueller Telefone. */
  body .sec-305 .auth .auth__grid{
    padding-block-end: calc(var(--sp-5, 1.5rem) + env(safe-area-inset-bottom, 0px));
  }
  body .sec-305 .auth .modal-close{ position: fixed; }
}

/* kw-kontrast v2 */
/* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text).
   Erzeugt von barrierefreiheit.py für den Kunden: smart-adrico.
   Die eigenen Markenvariablen bleiben unangetastet; die Regeln unten
   sind ausschließlich für smart-adrico vereinbart. Steht hier ein anderer
   Kunde, ist der Block falsch und gehört gelöscht. */
/* /kw-kontrast */