/* Baukasten-Container: erzeugt keine eigene Layout-Box */
.ws-block{display:contents}
/* 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)}

/* ============================================================
   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:nowrap;
  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) ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}


/* === Marken-Tokens aus den Web-Guidelines === */
:root{
  /* Marken-Farben */
  --c-primary: #4f7571;
  --c-primary-mid: #4f7571;
  --c-primary-dark: #33514d;
  --c-primary-soft: #6b9995;
  --c-secondary: #a2675b;
  --c-secondary-mid: #7e5147;
  --c-secondary-dark: #5a3a33;
  --c-tertiary: #d0bdb3;
  --c-tertiary-mid: #a7988e;
  --c-tertiary-dark: #7d7269;
  --c-neutral: #e8e2de;
  --c-neutral-mid: #aca5a1;
  --c-neutral-dark: #6f6863;
  --c-neutral-light: #f6f2f0;
  --c-white: #ffffff;
  --c-black: #1c2120;
  --c-on-primary: var(--c-white);
  --c-on-secondary: var(--c-white);
  --c-on-tertiary: var(--c-black);
  --c-on-fill: var(--c-black);
  --c-accent-1: #ffc31a;
  --c-accent-2: #ffc31a;
  --c-accent-3: #ffc31a;
  --c-accent-4: #ffc31a;
  --c-accent-5: #ffc31a;
  --t-primary: #2c3937;
  --t-secondary: #3f4a48;
  --t-negativ: #ffffff;
  --t-positiv: #2c3937;

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

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

  /* Radien & Rahmen */
  --r-card: 16px;
  --r-btn: 50px;
  --r-pill: 9999px;
  --bw-card: 2px;
  --bw-btn: 0px;

  /* 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;
}