/* 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}
/* 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: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) ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
/* Reduced-Motion-Abschaltung am 25.08.2026 auf Wunsch von Romeo ENTFERNT:
   Die Bewegung dieser Site soll auf jedem Gerät laufen, auch wenn im
   Betriebssystem "Bewegung reduzieren" aktiv ist. Früher stand hier ein
   @media (prefers-reduced-motion: reduce)-Block. Bewusste Entscheidung —
   nicht "aus Versehen verloren", bitte nicht kommentarlos neu einbauen. */


/* === 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;
  /* Fluide Typo-Skala (18.08.2026): Eckwerte in rem, Steigung über vw.
     Obergrenze = der bisherige feste Desktop-Wert, am Desktop ändert sich nichts.
     Untergrenze greift ab 390px Fenster, dazwischen wird stufenlos interpoliert. */
  --fs-h1: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem);   /* 2,25 → 3,5rem  */
  --fs-h2: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);   /* 1,75 → 2,5rem  */
  --fs-h3: clamp(1.5rem, 1.314rem + .762vw, 2rem);       /* 1,5  → 2rem    */
  --fs-h4: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);    /* 1,25 → 1,5rem  */
  --fs-h5: clamp(1.125rem, 1.079rem + .19vw, 1.25rem);   /* 1,125→ 1,25rem */
  --fs-h6: clamp(1rem, .954rem + .19vw, 1.125rem);       /* 1    → 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;
}

/* ── 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. */


/* ============================================================
   Cookie-Consent-Banner (eingebunden über custom.js)
   ============================================================ */
.cookiebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 30px color-mix(in srgb, var(--c-black) 12%, transparent);
  padding: var(--sp-4) 0;
  animation: cookiebar-in .3s ease;
}
@keyframes cookiebar-in { from { transform: translateY(100%); } to { transform: none; } }
/* Reduced-Motion-Abschaltung am 25.08.2026 auf Wunsch von Romeo ENTFERNT:
   Die Bewegung dieser Site soll auf jedem Gerät laufen, auch wenn im
   Betriebssystem "Bewegung reduzieren" aktiv ist. Früher stand hier ein
   @media (prefers-reduced-motion: reduce)-Block. Bewusste Entscheidung —
   nicht "aus Versehen verloren", bitte nicht kommentarlos neu einbauen. */

.cookiebar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cookiebar__text {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--t-secondary);
}
.cookiebar__text a { color: var(--c-primary-dark); text-decoration: underline; }
.cookiebar__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.cookiebar__btn { white-space: nowrap; }
.cookiebar__btn--ghost {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--t-primary);
}
.cookiebar__btn--ghost:hover { background: var(--c-neutral-light); }

@media (max-width: 767px) {
  .cookiebar__actions { width: 100%; }
  .cookiebar__btn { flex: 1; }
}

/* ============================================================
   Rechtsseiten (Impressum / Datenschutz)
   ============================================================ */
.legal-sec { padding: var(--sp-8) 0; background: var(--c-white); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 { margin-bottom: var(--sp-6); }
/* 18.08.2026: freihändige 1,3rem/1,05rem raus — Rechtsseiten nutzen dieselbe Skala
   wie der Rest der Site (--fs-h4 deckt sich mit dem H2 im Bildnachweis-Abschnitt). */
.legal h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: var(--fs-h4); }
.legal h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); font-size: var(--fs-h5); }
.legal p { color: var(--t-secondary); line-height: var(--lh-body, 1.7); margin-bottom: var(--sp-4); }
.legal a { color: var(--c-primary-dark); text-decoration: underline; }
.legal ul { margin: 0 0 var(--sp-4) var(--sp-5); color: var(--t-secondary); line-height: var(--lh-body, 1.7); }
.legal li { margin-bottom: var(--sp-2); }
.legal strong { color: var(--t-primary); }
.legal__note {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border-left: 3px solid var(--c-primary);
  background: var(--c-neutral-light);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
}


/* ============================================================
   Scroll-Reveal — dezentes Fade-in + Hochgleiten beim Reinscrollen.
   Greift NUR unter html.dsjs (setzt ein Inline-Schnipsel im <head>
   vor dem ersten Paint). Ohne JS bleibt alles sichtbar.
   ============================================================ */
html.dsjs [data-animate], html.dsjs .reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--motion-slow, .55s) var(--ease-standard, ease),
              transform var(--motion-slow, .55s) var(--ease-standard, ease);
}
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, .5s) var(--ease-standard, ease),
              transform var(--motion-slow, .5s) var(--ease-standard, ease);
  transition-delay: var(--stagger-delay, 0ms);
}
html.dsjs [data-animate="stagger-children"].visible > *{ opacity: 1; transform: none; }
/* Reduced-Motion-Abschaltung am 25.08.2026 auf Wunsch von Romeo ENTFERNT:
   Die Bewegung dieser Site soll auf jedem Gerät laufen, auch wenn im
   Betriebssystem "Bewegung reduzieren" aktiv ist. Früher stand hier ein
   @media (prefers-reduced-motion: reduce)-Block. Bewusste Entscheidung —
   nicht "aus Versehen verloren", bitte nicht kommentarlos neu einbauen. */

/* ============================================================
   Audit-Fixes (2026-08): Sticky-Header + Breakpoint-Normalisierung
   ============================================================ */

/* Header-Section komplett sticky — Topbar + Menü bleiben beim Scrollen oben.
   .sec-028 ist direktes Kind von <body>. z-index unter Offcanvas (500)/Cookiebar (1000). */
.sec-028 { position: sticky; top: 0; z-index: 100; }

/* Breakpoints normalisieren (Vorgabe: nur 1024/767; 960/700 sind Altlasten in style.css).
   Regeln hier zusätzlich am korrekten Breakpoint — alte engere Regeln werden Teilmenge. */
@media (max-width: 1024px) { [data-m-ausrichtung] { --m-ausr-media: 0; } }
@media (max-width: 767px)  { [data-m-ueberlappung] { margin-top: 0; } }

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

/* ============================================================
   Bildplatz befüllt → Platzhalter-Beschriftung ausblenden.
   Fläche (data-kw-bg) und Beschriftung (.beschriftung) sind getrennte
   Elemente. Bewusst NUR auf .beschriftung gemünzt: Eine Bildfläche mit
   Textkind ist nicht automatisch eine mit Platzhalter — bei projektgast
   sitzen echte Überschriften und Fließtexte in befüllten Flächen.
   ============================================================ */
[data-kw-bg][style*="url("] > .beschriftung { display: none; }

/* ============================================================
   Eingesetzte Icons: Größe erzwingen.

   Der Editor ergänzt beim Einsetzen eines SVG KEINE width/height.
   Die mitgelieferten Icons tragen width="20" height="20"; ein
   hochgeladenes SVG bringt oft nur einen viewBox mit — und füllt
   dann seinen Träger randlos aus (gemessen: 42×42 statt 20×20 in
   einem 42er-Kasten, das Icon sprengt die abgerundete Fläche).

   Erste Regel: nie größer als der Träger.
   Zweite Regel: SVGs ohne eigenes Maß bekommen die Hausgröße 20px.
   Bewusst OHNE !important und mit niedriger Spezifität — Abschnitte,
   die ihre Icon-Größe selbst setzen, behalten Vorrang.
   ============================================================ */
[data-kw-icon="1"] svg { max-width: 100%; max-height: 100%; }
[data-kw-icon="1"] svg:not([width]) { width: 20px; height: 20px; }


/* ── kw-zustand 1.0 — erzeugt von kw-zustand-css.py ──────────────────────
   Icon-Farben für Hover und Aktiv, gesetzt im Website-Editor.
   Nicht von Hand ändern: Skript erneut laufen lassen.
   ───────────────────────────────────────────────────────────────────── */

/* Der Träger blendet seinen Hintergrund über; das Symbol soll mitgehen. */
svg[data-kw-ih] [data-kwh], svg[data-kw-ia] [data-kwa] {
  transition: fill .18s ease, stroke .18s ease;
}
/* Reduced-Motion-Abschaltung am 25.08.2026 auf Wunsch von Romeo ENTFERNT:
   Die Bewegung dieser Site soll auf jedem Gerät laufen, auch wenn im
   Betriebssystem "Bewegung reduzieren" aktiv ist. Früher stand hier ein
   @media (prefers-reduced-motion: reduce)-Block. Bewusste Entscheidung —
   nicht "aus Versehen verloren", bitte nicht kommentarlos neu einbauen. */

/* !important, weil die Normalfarbe als Inline-Style an der Fläche steht — */
/* ohne das käme sie nie gegen ihre eigene Angabe an.                      */

/* Hover */
*:hover > svg[data-kw-ih="1"] [data-kwh*="f"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="f"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="f"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="f"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="f"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="f"] {
  fill: var(--kwh) !important;
}
*:hover > svg[data-kw-ih="1"] [data-kwh*="s"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="s"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="s"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="s"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="s"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="s"] {
  stroke: var(--kwh) !important;
}

/* Aktiv — Marken dieser Site: .hd1__link--active, .mnav__link--active, .is-active, .is-done, .aktiv.
   Hier braucht es KEINE Tiefen-Kette: Anders als ":hover", das jeder
   Vorfahr bis body mitträgt, passt eine Zustands-Klasse nur auf das
   Element, das sie wirklich hat. Ein Nachfahren-Selektor genügt —
   das spart rund 12 KB gegenüber der ausgeschriebenen Kette. */
.hd1__link--active svg[data-kw-ia] [data-kwa*="f"],
.mnav__link--active svg[data-kw-ia] [data-kwa*="f"],
.is-active svg[data-kw-ia] [data-kwa*="f"],
.is-done svg[data-kw-ia] [data-kwa*="f"],
.aktiv svg[data-kw-ia] [data-kwa*="f"] {
  fill: var(--kwa) !important;
}
.hd1__link--active svg[data-kw-ia] [data-kwa*="s"],
.mnav__link--active svg[data-kw-ia] [data-kwa*="s"],
.is-active svg[data-kw-ia] [data-kwa*="s"],
.is-done svg[data-kw-ia] [data-kwa*="s"],
.aktiv svg[data-kw-ia] [data-kwa*="s"] {
  stroke: var(--kwa) !important;
}


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

/* kw-kontrast v1 */
/* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text).
   Erzeugt von barrierefreiheit.py. Markenfarben bleiben unangetastet —
   korrigiert wird die Schriftfarbe auf der jeweiligen Fläche. */
/* /kw-kontrast */