/* Schriften liegen lokal, nicht bei Google: sonst geht die IP jedes Besuchers
   dorthin, bevor er zustimmen kann (LG Muenchen I, 3 O 17493/20). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/roboto-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/roboto-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/roboto-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/roboto-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/roboto-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/roboto-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/roboto-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/roboto-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* Schriften liegen auf dem eigenen Server. Vorher kamen sie von Google -
   die IP jedes Besuchers ging damit dorthin, BEVOR er zustimmen konnte,
   obwohl der Einwilligungskasten genau danach fragte (LG München I,
   3 O 17493/20). Selbst gehostet entfällt beides: die Übertragung und
   die Einwilligung. Gefunden 28.08.2026. */
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/enriqueta-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/enriqueta-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/enriqueta-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/enriqueta-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schriften/enriqueta-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(schriften/enriqueta-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/enriqueta-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(schriften/enriqueta-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════
   REFERENZ-FRAME · Landingpage-Struktur · NEUTRAL
   Verbindlich: Struktur, Maße, Verhalten. Austauschbar: nur :root.
   Zielhöhen: Hero ≤ 0,7 VH · Band 0,2–0,3 VH · Leistungen ≤ 0,9 VH
   ═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   Alles von hier bis zum Ende des :root-Blocks ist css/tokens.css,
   WOERTLICH uebernommen. EINZIGE Wertequelle fuer das Aussehen -
   nirgends sonst in dieser Datei steht ein Hex-, px- oder
   Schriftwert, der nicht aus einer dieser Rollen kommt.
   ════════════════════════════════════════════════════════════════ */
/* ============================================================
   KNOPP GARAGEN · Design Tokens — EINZIGE Wertequelle.
   Kein Hex, kein px, kein Font-Name ausserhalb dieser Datei.

   Herkunft der Werte (gemessen, nicht geschaetzt):
   · #1A67A2  Logo-SVG, fill der Wortmarke "GARAGEN" + Kontur-Stroke
   · #A52B2C  Logo-SVG, fill der Namensplatte  (NICHT im System, s. design-system.md)
   · #1A67A2  Stilrichtungs-Bild, Farbfeld rechts (ueber 6 Messpunkte identisch)
   · #565C68  Stilrichtungs-Bild, Sektionaltor — Herkunft der kuehlen Grau-Leiter
   · #D5D1D0 / #9A9CA6  Stilrichtungs-Bild, helle Flaechen / Mittelgrau
   Kundenvorgabe: "blau hellgrau weiss".
   Rollennamen folgen token-vertrag.css — was dort nicht steht, liest das Wireframe nicht.
   ============================================================ */
:root{

  /* ---------- Marke und Akzent ----------
     Das Logo teilt die Rollen selbst zu: Navy ist die Farbe GESETZTER SCHRIFT
     (die Wortmarke + die Kontur), die Platte ist die Farbe von FLAECHEN, die
     weisse Schrift tragen. Genau so laeuft es hier weiter:
     Navy = Ueberschriften + tiefste Flaeche · Stahlblau = Arbeitsflaeche. */
  --brand:#1A67A2;              /* Knopp-Navy · exakt aus dem Logo */
  --brand-dark:#15517F;         /* Navy Tief · Hover/Druckzustand */
  --brand-2:#1A67A2;            /* interaktiver Ton: Links, Haken, Nav-Unterstrich */
  --brand-soft:#E7F1F9;         /* heller State, klein — nie als grosse Flaeche */
  --accent:#1A67A2;             /* Stahlblau · die Farbe aus der Stilrichtung */
  --accent-soft:#E7F1F9;        /* Stahlblau Hell */
  --accent-fg:#FFFFFF;          /* 7,03:1 auf Stahlblau */
  --accent-bgh:#15517F;         /* Stahlblau Tief · Hover (9,33:1 mit Weiss) */
  --accent-ink:var(--accent);   /* EIN Blau — kein zweiter Blauton fuer Text */
  --eyebrow-color:var(--accent-ink);
  --eyebrow-dash-color:var(--eyebrow-color);

  /* Typenschild: die eine Eigenart des Zeichens. Der Name steht im Logo in einer
     Platte, nicht frei. Eyebrow und Marker sind deshalb Platten, kein Strich. */
  --marker-bg:var(--accent);
  --marker-fg:#FFFFFF;
  --marker-line:transparent;
  --rule-color:var(--accent);

  /* ---------- Flaechen und Zonen (immer diese vier) ---------- */
  --bg:#FFFFFF;                 /* 1 · Weiss — Standardflaeche */
  --bg-alt:#F4F5F6;             /* 2 · Hallengrau — leicht abgesetzt, kuehl, kein Pastell */
  --surface:var(--bg-alt);
  --bg-accent:#1A67A2;          /* 3 · Stahlblau — klar abgesetzte Kontrastflaeche */
  --bg-dark:#0E324E;            /* 4 · Knopp-Navy — Footer, eigenes Token */
  --fill:#F9FAFA;               /* Kartengrau · HELLER als --bg-alt */
  --hero-bg:var(--bg);
  --veil:rgba(255,255,255,.12);
  --veil-strong:rgba(255,255,255,.26);
  --bg-brand:var(--bg-accent);
  --cta-band-bg:var(--accent);

  /* ---------- Text ---------- */
  --text:#2B3140;               /* Torgrau · 12,99:1 auf Weiss */
  --text-secondary:#4F5768;     /* 7,25:1 auf Weiss */
  --text-muted:#5E6778;         /* 5,70:1 auf Weiss — bewusst kein echtes Grau-in-Grau */
  --heading:#1B3466;            /* Ueberschriften: tiefes Dunkelblau - #15517F wirkte tuerkis (Pascal 08.10.2026) */
  --on-accent:#FFFFFF;
  --on-accent-soft:rgba(255,255,255,.88);   /* >=4,5:1 auf Knopp-Blau #1A67A2 (07.10.2026) */
  --on-dark:var(--on-accent);
  --on-dark-soft:var(--on-accent-soft);

  /* ---------- Linien und Rahmen ---------- */
  --border:#E2E4E6;
  --border-strong:#C8CCCE;
  --control-line:#8A93A3;       /* Bedienlinie · 3,10:1 auf Weiss */
  --border-w:1px;               /* DIE Linie der Marke — Karten, Panels, Felder, Trenner */
  --border-w-2:2px;             /* nur fuer Zeichen (Marker, Haken, Fortschritt), nie fuer Kanten */

  /* ---------- Schrift ----------
     Archivo: breite, flankensteife Grotesk mit rechteckigen Punzen — dieselbe
     Geometrie wie die Logo-Lettern (das O in KNOPP ist ein Rechteck mit 28 %
     Eckenradius, kein Kreis). Roboto: die Schrift der Stilrichtung, Messung am Bild.  */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Roboto","Helvetica Neue",Arial,sans-serif;
  --font-btn:var(--font-sans);

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* Gewichts-Kette ABSTEIGEND: 700 >= 600 >= 600. Gemessen am Logo:
     KNOPP traegt 21,6 % Strichstaerke, GARAGEN 18,5 % — oben schwerer, unten leichter. */
  --fw-display:700;
  --fw-h2:600;
  --fw-h3:600;
  --fw-heading:var(--fw-h2);
  --fw-btn:700;                 /* der Knopf ist handfest wie die Wortmarke */
  --heading-style:normal;
  --btn-style:normal;
  --eyebrow-style:normal;

  --fs-display:clamp(34px,5vw,46px);
  --fs-h2:clamp(26px,3.6vw,34px);
  --fs-h3:clamp(19px,2.2vw,23px);
  --fs-lead:clamp(18px,2.3vw,21px);
  --fs-body:17px;
  --fs-small:14.5px;
  --fs-eyebrow:13px;
  --fs-btn:16px;
  --fs-btn-mobil:clamp(16px,4.2vw,18px);
  --fs-stat:clamp(32px,4.4vw,48px);
  --ls-eyebrow:.08em;           /* gemessen: Buchstabenabstand der Wortmarke 7–16 % */
  --ls-heading:0em;             /* das Logo ist breit und offen gesetzt — nicht zusammenziehen */
  --ls-klein:.06em;
  --lh-tight:1.12;
  --lh-heading:1.18;
  --lh-lead:1.55;
  --lh-body:1.65;

  /* ---------- Form und Radius ----------
     EIN Radius fuer alles. Gemessen: die Logo-Platte hat 3,8 Einheiten Eckenradius
     bei 30,7 Einheiten Hoehe; das O der Wortmarke ist derselbe Rundungstyp.
     Keine Pille — in diesem Zeichen gibt es keine Kapsel, nur das weiche Rechteck. */
  --slant-h:0px;                /* gerade Kante. Eine Garage hat ein FLACHDACH. */
  --radius:0px;  /* Pascal 14.10.2026: eckiger, hochwertiger (vorher 4px) */
  --radius-pill:var(--radius);
  --radius-btn:var(--radius);
  --radius-icon:var(--radius);
  --radius-card:var(--radius);
  --radius-sm:var(--radius);
  --btn-pad:15px 28px;

  /* ---------- Icons und Illustration ---------- */
  --ico-ton:var(--accent);
  --ico-tone:var(--ico-ton);    /* Schreibvariante — beide Namen aufgeloest */
  --ico-grund:var(--bg);
  --ico-1:color-mix(in srgb,var(--ico-ton)  6%,var(--ico-grund));
  --ico-2:color-mix(in srgb,var(--ico-ton) 13%,var(--ico-grund));
  --ico-3:color-mix(in srgb,var(--ico-ton) 22%,var(--ico-grund));
  --ico-4:color-mix(in srgb,var(--ico-ton) 33%,var(--ico-grund));
  --ico-5:color-mix(in srgb,var(--ico-ton) 46%,var(--ico-grund));
  --ico-6:color-mix(in srgb,var(--ico-ton) 61%,var(--ico-grund));
  --ico-7:color-mix(in srgb,var(--ico-ton) 78%,var(--ico-grund));
  --ico-akzent:var(--brand);
  --icon-stroke:2;
  --illu-1:var(--fill);
  --illu-2:var(--border);
  --illu-3:var(--border-strong);
  --illu-4:var(--accent);

  /* ---------- Abstand und Raster ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px; --space-10:120px;
  --container:1200px;
  --measure:64ch;
  --gutter:24px;
  --section-y:clamp(44px,4.4vw,68px);
  --section-y-sm:clamp(30px,3vw,44px);
  --gap-card:clamp(16px,2vw,28px);
  --gap-split:clamp(32px,4.5vw,64px);
  --grid-gap:clamp(20px,2.6vw,32px);

  /* ---------- Schatten und Bewegung ---------- */
  --shine:rgba(255,255,255,.34);
  --shine-hell:rgba(0,0,0,.055);
  --shine-loop:6.5s;
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(26,103,162,.08);
  --shadow-md:0 18px 40px -24px rgba(26,103,162,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.2s;
  --dur-slow:.42s;

  /* ---------- Formular ----------
     Direktes Zitat der Stilrichtung: Schrift steht dort auf einem vollflaechigen
     Blaufeld neben dem Foto, nie auf dem Foto. */
  --focus:var(--accent);
  --form-bg:var(--bg-accent);
  --form-fg:var(--on-accent);
  --form-fg-soft:var(--on-accent-soft);
  --form-heading:var(--on-accent);
  --form-line:var(--veil);
  --form-line-strong:var(--veil-strong);
  --form-fill:var(--fill);
  --form-sel-bg:var(--bg);
  --form-sel-soft:var(--accent-soft);
  --form-illu-line:var(--illu-3);
  --form-illu-fein:var(--illu-1);
  --form-illu-flaeche:var(--illu-2);
  --form-cta-bg:var(--on-accent);
  --form-cta-fg:var(--btn-on-accent-fg);
  --form-cta-bgh:#FFFFFF;
  --form-positive:var(--positive-on-dark);
  --form-tile-fg:var(--ink-h);
  --form-tile-line-w:var(--border-w);
  --form-heading-weight:var(--fw-heading);
  --form-frage:var(--form-heading);

  /* ---------- Kopf und Fuss ----------
     Der Kopf ist WEISS, nicht blau: das Zeichen traegt eine rote Platte, und Rot
     auf Blau traegt nicht. Das Zeichen bekommt immer einen hellen Grund. */
  --header-bg:var(--bg);
  --header-fg:var(--heading);
  --header-fg-soft:var(--text-muted);
  --header-line:var(--border);
  --header-line-rest:transparent;
  --header-top-bg:transparent;
  --header-cta-bg:var(--accent);
  --header-cta-fg:var(--accent-fg);
  --header-ph-line:var(--border-strong);
  --header-h:96px;
  --logo-w:96px;
  --logo-h:56px;                /* so bleibt "GARAGEN" im Zeichen >= Eyebrow-Groesse */
  --logo-h-lg:62px;

  /* ---------- Zier: bewusst auf Null ----------
     Das Typenschild IST die Zier dieser Marke. Ein Strich vor dem Eyebrow und
     eine Linie unter der Ueberschrift waeren daneben ein zweites und drittes
     Zeichen fuer dieselbe Sache. */
  --eyebrow-dash-w:0px;
  --header-top-h:0px;
  --rule-w:0px;
  --rule-len:0px;
  --rule-inset:0px;
  --rule-gap:0px;

  /* ---------- Weitere Rollen aus dem Vertrag ---------- */
  --hk-accent-fg:#FFFFFF;
  --hk-accent-ink:var(--accent-ink);
  --hk-text-muted:var(--text-muted);
  /* Kein Gruen. Das Material gibt kein Gruen her; der Haken ist Stahlblau,
     auf dunklem Grund weiss. Eine Marke, ein Ton. */
  --positive:var(--accent);
  --positive-on-dark:var(--on-accent);
  --positive-chip:var(--positive);
  --ink:var(--text);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-muted);
  --ink-h:var(--heading);
  --hero-marker-fg:var(--marker-fg);
  --hero-marker-line:var(--marker-line);
  --hero-cta-bg:var(--accent);
  --hero-cta-fg:var(--accent-fg);
  --hero-cta-bd:var(--accent);
  --hero-cta-bgh:var(--accent-bgh);
  --h1-320:28px;
  --h1-mobil:clamp(30px,8.4vw,38px);
  --h1-768:36px;
  --h1-900:38px;
  --h1-1200:46px;
  --head-mb:clamp(18px,2.4vw,34px);
  --hero-fg:var(--text);
  --hero-heading:var(--heading);
  --hero-fg-soft:var(--text-secondary);
  --btn-ghost-fg:var(--brand);
  --btn-on-accent-fg:var(--brand);
  --cta-band-fg:var(--accent-fg);

  /* Zeichenfarbe des Logos. KEINE Systemrolle — sie steht nur im SVG selbst.
     Die rote Platte ist bewusst nicht in die Palette gezogen worden
     (Begruendung in design-system.md, Abschnitt Charakter). */
  --logo-rot:#A52B2C;
}
*{box-sizing:border-box;min-width:0}
/* ── SEITENHUELLE ─────────────────────────────────────────────────────
   Der Fuss sitzt IMMER unten, auch wenn die Seite kuerzer ist als der
   Schirm. Ohne das steht unter dem Footer ein weisser Streifen -- real
   gesehen am 01.09.2026 auf der Danke-Seite von sr-hausbau-ohg.
   Warum an der HUELLE und nicht als min-height an der Sektion: eine
   Sektionsregel hilft nur, wenn jemand die richtige Sektion nimmt. Die
   Danke-Seite dort war mit .hero gebaut, nicht mit .meldung-sec -- die
   Vorlage existierte und griff trotzdem nicht. Hier greift sie immer.
   html traegt zusaetzlich die Footer-Farbe: das ist die Flaeche, die beim
   Ueberscrollen (Gummiband auf iOS/macOS) sichtbar wird. Weiss dort ist
   derselbe Fehler, nur eine Handbewegung spaeter.
   svh statt vh: vh rechnet am Handy die eingeblendete Adressleiste mit. */
html{scroll-behavior:smooth;scroll-padding-top:100px;background:var(--bg-dark)}
body{min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0}
/* Kein Wort darf die Seite breiter machen als den Schirm: Fachwoerter wie
   "Baustelleneinrichtung" passen bei 320 px sonst nicht in die Zeile und erzeugen
   waagerechten Ueberlauf (real gemessen). */
h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--heading);letter-spacing:var(--ls-heading);overflow-wrap:anywhere;
  hyphens:manual;-webkit-hyphens:manual}
/* Automatische Silbentrennung NUR dort, wo die Spalte wirklich eng wird
   (Nutzer-Vorgabe 2026-08-31). Auf breiten Schirmen zerlegte sie Ueberschriften
   an sprachlich korrekten, aber optisch stoerenden Stellen ("Ma-lerbetrieb") -
   in der groessten Schrift der Seite faellt jeder Trennstrich auf und kostet
   Lesbarkeit. Unter 600 px bleibt sie an, weil dort echte Ueberlaeufe gemessen
   wurden; die Grenzwerte verhindern die haesslichen Faelle: mindestens 10
   Zeichen Wortlaenge, mindestens 5 davor und 4 danach. */
@media (max-width:600px){
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;
    hyphenate-limit-chars:10 5 4;
    -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4}
}
h1{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);font-weight:var(--fw-heading);line-height:var(--lh-heading)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-heading);line-height:var(--lh-heading)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:62ch}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.ph{background:var(--fill);border:var(--border-w-2) dashed var(--border-strong);border-radius:var(--radius);
  --text-muted:var(--ink-3);--text-secondary:var(--ink-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);width:100%}
.ph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5}
.ph span{font-size:12.5px;text-align:center;padding-inline:8px}
/* EIN gefuellter Knopf je Marke: Stahlblau. Der Frame hatte hier die
   Markenfarbe; bei Knopp ist Navy die Farbe GESETZTER SCHRIFT, nicht
   die einer Knopfflaeche (Styleguide, Abschnitt Buttons). */
.btn{--_bg:var(--accent);--_fg:var(--accent-fg);--_bd:var(--accent);--_bgh:var(--accent-bgh);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:var(--font-display);font-size:var(--fs-btn);font-weight:var(--fw-semibold);line-height:1.15;
  max-width:100%;text-align:center;hyphens:none;white-space:nowrap;padding:14px 26px;border-radius:var(--radius-btn);
  cursor:pointer;background:var(--_bg);color:var(--_fg);border:var(--border-w-2) solid var(--_bd);
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* Glanz-Streifen (1:1 aus dem Design-System uebernommen). Liegt ueber der Flaeche,
   faengt keine Klicks ab und schaltet sich bei reduzierter Bewegung selbst ab. */
/* Handlungs-Knoepfe am Handy: volle Breite und groessere Flaeche. Ein 26-px-Knopf
   mitten in einer 390-px-Spalte wird am Daumen weder gesehen noch sicher getroffen —
   der wichtigste Knopf der Seite darf nicht der kleinste sein. Ausgenommen sind nur
   Knoepfe, die konstruktionsbedingt schmal sein MUESSEN: die Symbol-Knoepfe der
   Kopfzeile, der Schliessen-Knopf im Menue, Chips/Filter und Knoepfe in einer
   Zeile mit Text (--btn-inline). */
@media (max-width:600px){
  .btn:not(.header-cta-ico):not(.header-burger):not(.mnav-close):not(.btn--inline):not(.btn--symbol){
    width:100%;padding:17px 22px;font-size:var(--fs-btn-mobil);white-space:normal}
}
/* Der Wisch folgt der FLAECHE des Knopfes, nicht seiner Schrift.
   --shine haengt an currentColor: auf einem dunklen Knopf ist das Weiss und
   sieht richtig aus -- auf einem WEISSEN Knopf ist currentColor die Markenfarbe,
   und dann laeuft ein farbiger Streifen ueber den Knopf. Nutzer-Vorgabe
   2026-09-01: dort gehoert ein neutrales Hellgrau hin. Helle Knopf-Varianten
   setzen --shine deshalb selbst um; wer eine neue helle Variante baut, tut
   dasselbe. */
.btn--ghost,.btn--weiss,.btn--hell,.btn--invers{
  --shine:color-mix(in srgb,var(--text-muted) 16%,transparent)}
.btn::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,var(--shine),transparent);
  transform:translateX(-236%) skewX(-20deg);pointer-events:none;
  animation:btnShineLoop var(--shine-loop) ease-in-out 1.5s infinite}
.btn:hover::after{animation:btnShine 1.1s ease}
@keyframes btnShine{to{transform:translateX(236%) skewX(-20deg)}}
@keyframes btnShineLoop{0%{transform:translateX(-236%) skewX(-20deg)}20%{transform:translateX(236%) skewX(-20deg)}100%{transform:translateX(236%) skewX(-20deg)}}
@media(prefers-reduced-motion:reduce){.btn::after{display:none;animation:none}}
.btn:hover{background:var(--_bgh);border-color:var(--_bgh);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Der Ghost-Knopf ist durchsichtig - sein Rand ist die EINZIGE Grenze, die
   ihn als Knopf zu erkennen gibt. Mit --border-strong lag der bei 1,40:1
   (gefordert 3:1 fuer Bedienelemente, gemessen 31.08.2026). */
.btn--ghost{--_bg:transparent;--_fg:var(--btn-ghost-fg);--_bd:var(--control-line);--_bgh:var(--fill)}
.btn--accent{--_bg:var(--accent);--_fg:var(--accent-fg);--_bd:var(--accent);--_bgh:var(--accent-bgh)}
.btn--block{width:100%}

/* ── ZONEN- UND INSEL-REGEL ──────────────────────────────────────────────────
   In einer dunklen Zone duerfen die gedaempften Textrollen nicht aus der hellen
   Grundpalette kommen — sonst steht Grau auf Dunkelblau. Statt jede Stelle
   einzeln zu faerben, wird die Palette FUER DIE ZONE umgebogen; alles darin
   stimmt dadurch automatisch, auch spaeter ergaenzte Bauteile.
   Eine helle Insel INNERHALB einer dunklen Zone (weisse Karte, Bewertungs-Pille)
   biegt sie mit .insel-hell wieder zurueck. Ohne das entsteht der Klassiker:
   weisse Schrift auf weissem Feld. */
.zone-dark{--text:var(--on-accent);--text-secondary:var(--on-accent-soft);
  --text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);--border:var(--veil-strong);
  --positive:var(--positive-on-dark);--accent-ink:var(--on-accent)}
.insel-hell{--text:var(--ink);--text-secondary:var(--ink-2);
  --text-muted:var(--ink-3);--heading:var(--ink-h);color:var(--ink)}
/* Pfeil im Absende-Knopf: er sagt „es geht weiter", nicht „hier endet etwas".
   Gehört in JEDEN Formular-Knopf — ohne ihn wirkt der Knopf wie ein Abschluss. */
/* Grundgroesse fuer Symbole in Knoepfen. Ohne sie zieht sich ein SVG ohne
   Groessenangabe auf die volle Knopfbreite auf, sobald der Knopf breiter wird
   als sein Text (am Handy sind die Knoepfe randfuellend) — der Knopf war real
   241 statt 57 px hoch. Steht bewusst FRUEH: spaetere, gleich spezifische
   Regeln (.btn-call svg, .btn .arr) sollen sie weiterhin ueberschreiben. */
.btn>svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn .arr{width:17px;height:17px;flex:0 0 auto}

/* ── HEADER ── sticky, mobil Logo groß + Icon-Button */

/* ══ Meta-Leiste ══════════════════════════════════════════════════════════
Schmale Zeile UEBER der Kopfzeile fuer Telefon, E-Mail und einen Nebenpunkt
(oft Karriere). Sinn: ein eigenes Geschaeftsziel sichtbar halten, ohne einen
der begrenzten Hauptnavigationsplaetze zu verbrauchen.
Sie ist NICHT sticky - sie scrollt weg, die Kopfzeile bleibt. Am Handy
entfaellt sie ganz: dort tragen Telefon-Symbol und Menue dieselben Wege, und
zwei gestapelte Leisten fressen den ersten Bildschirm.
Standard ist unsichtbar (Hoehe 0), damit bestehende Projekte sich nicht
aendern - erst --meta-h schaltet sie ein. */
.meta-leiste{display:none}
.meta-inner{display:flex;align-items:center;justify-content:flex-end;
gap:var(--space-5);min-height:var(--meta-h,36px);font-size:var(--fs-small)}
.meta-leiste a{display:inline-flex;align-items:center;gap:6px;color:var(--meta-fg,var(--text-secondary))}
.meta-leiste a:hover{color:var(--meta-fg-hover,var(--accent-ink))}
.meta-leiste svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.meta-leiste svg.f{fill:currentColor;stroke:none}
/* Zwei Gruppen statt einer: links die Nebenpunkte, rechts die Erreichbarkeit.
   Ohne den Modifikator bleibt die Leiste rechtsbuendig wie bisher - deshalb
   rueckwaertskompatibel. Umbruch erlaubt: zwischen 940 und rund 1050 px wird
   die Zeile sonst breiter als der Container. */
.meta-inner--geteilt{justify-content:space-between;flex-wrap:wrap;row-gap:2px}
.meta-gruppe{display:flex;align-items:center;gap:var(--space-5);min-width:0}

/* ══ Fusszeile mit sechs Bloecken ═════════════════════════════════════════
Die dreispaltige Standard-Fusszeile reicht nicht, sobald die Fusszeile das
Rueckgrat der internen Verlinkung ist (alle Leistungen, alle Orte, die
kaufnahen Ratgeber). Dann ist sie kein Abschluss mehr, sondern eine Karte
der Website.
WICHTIG - der Modifikator steht bewusst als `.footer-top.footer-top--sechs`
(zwei Klassen): die Basisregeln von .footer-top stehen weiter unten in
Medienabfragen. Bei gleicher Spezifitaet gewinnt die spaetere Regel, ein
einfaches .footer-top--sechs wuerde also verlieren. */
.footer-top.footer-top--sechs{grid-template-columns:minmax(0,1fr)}
/* opacity .85, nicht .72 (gemessen 31.08.2026). Die Gruppenzeile lag auf der
   markenblauen Fusszeile bei 3,88:1 - gefordert sind 4,5:1. Gefunden hat das
   NICHT die Token-Rechnung, sondern Lighthouse am gerenderten Baum: opacity
   dimmt eine Farbe, ohne dass sich der Farbwert im Stylesheet aendert, und
   genau deshalb steht dieser Fall in der NICHT-GEPRUEFT-Liste von kontrast.py.
   Der leisere Ton bleibt erhalten, er ist nur nicht mehr zu leise:
   Gojek 4,79:1 auf #0058ac, Frame 6,27:1 auf #2b3033. */
.footer-gruppe{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-small);
font-weight:var(--fw-bold);color:var(--footer-fg,inherit);opacity:.85}
.footer-gruppe:first-of-type{margin-top:0}
.footer-kontakt{list-style:none;margin:var(--space-4) 0 0;padding:0;
display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-small)}
.footer-kontakt li{display:flex;align-items:flex-start;gap:10px}
.footer-kontakt svg{width:17px;height:17px;margin-top:2px;flex:0 0 auto;
stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-kontakt svg.f{fill:currentColor;stroke:none}
.footer-vertrauen{list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-small)}
/* Steht seit dem 31.08.2026 unter der Marke statt in einer eigenen Spalte. Der
   Abstand nach oben ist dabei keine Kosmetik, sondern der Grund, warum es
   funktioniert: ohne ihn liest sich "Meisterbetrieb der Innung" als weitere
   Kontaktzeile unter Anschrift und Telefonnummer. Die Linie trennt die Aussage
   ueber den BETRIEB von den Angaben, wie man ihn erreicht. */
.footer-brand .footer-vertrauen{margin-top:var(--space-4);padding-top:var(--space-4);
border-top:1px solid rgba(255,255,255,.16)}
/* Der Cookie-Punkt ist ein Knopf (er oeffnet den Dialog, es gibt keine Seite
dahinter), muss aber wie die Rechtslinks daneben aussehen. */
.footer-legal .cc-oeffnen{padding:0;border:0;background:none;cursor:pointer;
font:inherit;color:inherit;text-decoration:inherit}
.footer-legal .cc-oeffnen:hover{text-decoration:underline}

@media (min-width:600px){
  .footer-top.footer-top--sechs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .footer-top.footer-top--sechs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-top--sechs .footer-brand{grid-column:auto}
}

/* Ein Fusszeilen-Block, der viel mehr Links traegt als seine Nachbarn (etwa
alle Ortsseiten), bekommt eine eigene Zeile ueber die volle Breite und laesst
seine Listen in mehrere Textspalten laufen. Als normale Spalte waere er ein
Vielfaches hoeher als die anderen und wuerde die Fusszeile aufreissen. */
.footer-col--breit{grid-column:1/-1}
/* Die Listen der Fusszeile sind Flexboxen - und auf einer Flexbox wirkt
`columns` NICHT. Fuer den breiten Block wird die Liste deshalb wieder zu
einem normalen Block, der Abstand kommt statt aus `gap` aus `margin`.
Doppelte Klasse, damit die Regel unabhaengig von der Reihenfolge gewinnt. */
.footer-col.footer-col--breit ul{display:block;columns:2;column-gap:var(--space-5)}
.footer-col.footer-col--breit li{break-inside:avoid;margin-bottom:var(--space-3)}
@media (min-width:900px){.footer-col.footer-col--breit ul{columns:3}}
@media (min-width:1280px){.footer-col.footer-col--breit ul{columns:4}}
@media (min-width:1280px){
  /* Marke etwas breiter, weil dort Anschrift und Oeffnungszeiten stehen. */
  /* Hoechstens VIER Spalten (Vorgabe Teil 3, 31.08.2026). Es waren fuenf:
     Marke, Leistungen, Ratgeber, Unternehmen, Vertrauen. Vertrauen war
     keine eigene Rubrik, sondern zwei Zeilen ueber Innung und Bewertungen -
     die gehoeren unter die Marke, weil sie ueber den BETRIEB sprechen und
     nicht ueber einen Bereich der Website. */
  .footer-top.footer-top--sechs{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}
}
@media (min-width:940px){
  .meta-leiste{display:block;background:var(--meta-bg,var(--bg-alt));
  border-bottom:1px solid var(--meta-line,var(--border))}
}


/* Ein Navigationspunkt darf NIE mitten im Wort umbrechen. Bei sechs Punkten
plus Telefon und Knopf wird die Zeile ab etwa 1400 px eng, und "Über uns"
stand zweizeilig neben einzeiligen Nachbarn - das liest sich wie ein Fehler.
Statt Punkte zu streichen: Umbruch verbieten und den Abstand zwischen 940 und
1280 px verkleinern. Reicht das nicht, ist die Zahl der Punkte das Problem,
nicht der Abstand. */
.site-nav>a,.site-nav .nav-auf{white-space:nowrap}
.phone__label,.phone__num{white-space:nowrap}
@media (min-width:940px) and (max-width:1319px){
  .site-nav{gap:var(--space-4)}
  .header-inner{gap:var(--space-4)}
}
/* Telefon und Knopf gehoeren auf EINE Zeile. Bricht der rechte Block um, steht
der Knopf unter der Nummer, der Kopf wird von 77 auf 123 px hoch und sieht aus
wie ein Ladefehler - genau so gemessen am 08.09.2026 bei IBUK bis hinauf zu
1219 px, also auf jedem normalen Laptop. `nowrap` verbietet den Umbruch; den
Platz dafuer holt die Regel darunter. */
.site-header .header-right{flex-wrap:nowrap}
/* Zwei Klassen tief, mit Absicht: die allgemeine Knopfpaar-Regel
   `div:has(> .btn + .btn){flex-wrap:wrap}` trifft den Kopf mit, weil dort
   Knopf, Burger und Anruf-Symbol alle `.btn` heissen - und schlaegt ein
   einfaches `.header-right` per Spezifitaet (0,1,1 gegen 0,1,0). Genau
   daran ist der erste Anlauf am 08.09.2026 still gescheitert: die Regel
   stand da, der Kopf brach trotzdem um. */
/* Zwischen Burger-Grenze und bequemer Breite wird es eng: Logo, Menue, Telefon
und Knopf wollen zusammen mehr Platz, als da ist. Statt den Knopf umbrechen zu
lassen (er ist das Ziel der Seite) oder das Menue zu opfern, schrumpft hier das
Beiwerk - die Vorzeile ueber der Nummer und ein paar Pixel Innenabstand. Die
Nummer selbst bleibt lesbar: sie ist bei vielen Betrieben der eigentliche
Kanal, nicht das Formular. */
@media (min-width:940px) and (max-width:1219px){
  .site-nav{gap:var(--space-3)}
  .header-right{gap:var(--space-3)}
  .header-inner{gap:var(--space-3)}
  .site-header .btn:not(.header-burger):not(.header-cta-ico){
    padding-left:var(--space-3);padding-right:var(--space-3)}
  /* Gemessen fehlen hier bis zu 106 px. Geholt werden sie beim Beiwerk, nicht
     bei der Nummer: die Vorzeile ("Beratung") faellt weg, die Nummer wird eine
     Spur kleiner, das Logo schmaler. Die Nummer BLEIBT stehen - sie durch das
     Anruf-Symbol zu ersetzen war der erste Versuch und der falsche: bei vielen
     Betrieben ist das Telefon der eigentliche Kanal, und wer am Laptop sitzt,
     waehlt keine Nummer, die er nicht sieht. */
  .site-header{--logo-w:175px}
  /* Unter 1180 px reicht der Platz auch mit kleinerem Logo und engeren
     Abstaenden nicht: der Knopf legte sich gemessen ueber die Nummer. Also
     tritt hier der Anruf-Knopf an die Stelle der Nummer - 46 statt 159 px,
     genau die fehlenden 113. Zwei Klassen tief, weil die Grundregel
     `.header-cta-ico{display:none}` WEITER UNTEN im Frame steht und bei
     gleicher Spezifitaet gewinnt: daran ist der erste Versuch gescheitert,
     der Knopf blieb unsichtbar und der Kopf hatte gar kein Telefon mehr. */
  .site-header .header-right .phone{display:none}
  .site-header .header-cta-ico{display:inline-flex}
}

/* Die Vergleichstabelle war fuer Telefone nie fertig. Sie blieb bis 320 px
dreispaltig; die Wertspalten sind dort rund 95 px breit, und lange Woerter
stossen ueber die Spaltenkante - gemessen scrollWidth 110 gegen clientWidth 95,
und zwar schon mit dem Lorem des Frames.
Der naheliegende Griff waere `overflow-wrap:anywhere` gewesen. Der behandelt
aber das Symptom: Die Frage ist nicht, wie man das Wort bricht, sondern ob drei
Spalten auf einem Telefon ueberhaupt noch eine Tabelle sein sollen. Sie sollen
nicht. Jede Zelle traegt dafuer laengst `data-h` mit ihrer Spaltenueberschrift -
die Stapelung war vorgesehen und nur nie gebaut.
Ab 600 px (derselbe Umbruchpunkt, an dem der Frame die Tabelle ohnehin
umstellt) wird jede Zeile ein Block, die Kopfzeile faellt weg, und die
Spaltenueberschrift steht als Vorzeile in der Zelle. Damit hat jede Zelle die
volle Breite, das Trennproblem entfaellt ersatzlos, und die eigene Spalte
bleibt als eingefaerbtes Feld erkennbar. */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);color:var(--header-fg);
  /* Eine weisse Kopfzeile auf weissem Grund braucht eine sichtbare Kante, sonst
     schwimmt sie. Als Token, damit dunkle Kopfzeilen sie weglassen koennen. */
  border-bottom:1px solid var(--header-line-rest,transparent);
  transition:background var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
/* Die Kante liegt IM Header (nicht davor), damit sie beim Sticky-Verhalten und
   beim mobilen Wegfahren mitgeht. Bei Hoehe 0 ohne jede Wirkung. */
.site-header::before{content:"";display:block;height:var(--header-top-h);
  background:var(--header-top-bg)}
/* Mobil: Kopfzeile weicht beim Abwärtsscrollen und kommt beim Aufwärtsscrollen zurück.
   Auf kleinen Schirmen ist Höhe knapp — wer liest, braucht die Navigation nicht;
   wer zurückscrollt, sucht sie. Auf Desktop bleibt sie immer stehen. */
/* Die Kopfzeile bleibt auf jedem Schirm dauerhaft stehen (Nutzer-Vorgabe
   2026-08-28). Bis dahin wich sie mobil beim Abwaertsscrollen weg — die
   Begruendung war knappe Hoehe. Der Nutzer will die Navigation jederzeit
   erreichbar; das Wegblenden uebernimmt jetzt allein die untere Leiste. */
/* Scroll-Zustand MUSS aus dem Token kommen: ein fester rgba-Wert bleibt beim
   Umfaerben grau stehen, waehrend der Rest der Kopfzeile die Markenfarbe traegt.
   Erst Vollton als Rueckfall, dann dieselbe Farbe mit Transparenz. */
.site-header.is-scrolled{background:var(--header-bg);
  background:color-mix(in srgb, var(--header-bg) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--header-line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:76px;padding-block:12px}
.brand .ph{width:var(--logo-w);height:var(--logo-h);aspect-ratio:auto;border-color:var(--header-ph-line);color:var(--header-fg-soft);background:transparent}
.site-nav{display:none;gap:var(--space-6);align-items:center}
/* Nur die DIREKTEN Kinder sind Navigationspunkte. Ohne das ">" trifft die Regel
   auch jeden Link im Klappfeld — dort zog sie dem Knopf Schriftfarbe (74 % Weiss)
   und Innenabstand (6 statt 14 px) weg. */
.site-nav>a{position:relative;font-weight:var(--fw-medium);color:var(--header-fg-soft);font-size:16px;padding-block:6px}
.site-nav>a:hover{color:var(--header-fg)}
.site-nav>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.site-nav>a:hover::after{transform:scaleX(1)}
@media (min-width:940px){.site-nav{display:flex}}
/* ── Unterebenen der Navigation ───────────────────────────────────────────────
   Der Frame plant DREI Ebenen ein (Nutzer-Vorgabe 2026-08-28): Hauptpunkt →
   Unterpunkt → Unter-Unterpunkt. Am Schirm liegen die beiden unteren Ebenen als
   Spalten nebeneinander in EINEM Klappfeld: die Spaltenueberschrift ist die
   zweite Ebene, die Links darunter die dritte. Bewusst KEIN Flyout, das beim
   Zeigen seitlich aufklappt — dessen Trefferflaeche ist schmal, es kippt an der
   Fensterkante und mit der Tastatur ist es kaum zu bedienen.
   Das Feld haengt am Header (position:sticky ist ein Bezugsrahmen fuer absolute
   Kinder). Es darf erst hier absolut liegen, seit die Kopfzeile nicht mehr
   wegfaehrt — ein transformierter Vorfahre haette es mitgenommen. */
.nav-punkt{position:static;display:flex;align-items:center}
.nav-auf{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;
  cursor:pointer;font:inherit;font-size:16px;font-weight:var(--fw-medium);color:var(--header-fg-soft);
  position:relative}
.nav-auf svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur) var(--ease)}
.nav-auf:hover,.nav-punkt.ist-auf .nav-auf{color:var(--header-fg)}
.nav-punkt.ist-auf .nav-auf svg{transform:rotate(180deg)}
.nav-auf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav-auf:hover::after,.nav-punkt.ist-auf .nav-auf::after{transform:scaleX(1)}
.nav-auf:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Helle Insel unter einer dunklen Kopfzeile: die Schrift kommt ueber --ink* zurueck. */
/* Das Klappfeld wirft seinen Schatten NUR nach unten (Nutzer-Vorgabe
   01.09.2026: "ich will nicht dass das Submenue einen Schatten auf die
   Menuezeile wirft"). Vorher war es --shadow-md, ein Schatten in alle
   Richtungen: sein Weichzeichner lief 12 px nach oben ueber die Leistenkante
   und dunkelte die Leiste ab (gemessen am Frame: Helligkeit faellt zur Kante
   von 30,0 auf 28,1).

   Warum nicht ueber z-index geloest, wie zuerst naheliegend: Das Klappfeld
   liegt IM Header, und sein Bezugspunkt ist genau dieser - `left:0;right:0`
   spannt es nur deshalb ueber die volle Fensterbreite. Gibt man der Leiste
   eine eigene Ebene darueber, muss sie dafuer positioniert werden, und das
   Klappfeld verliert seinen Anker: es waere nur noch so breit wie der
   Inhaltsbereich. Der Schatten ist die Ursache, nicht die Reihenfolge. */
.nav-drop{position:absolute;left:0;right:0;top:100%;z-index:55;
  background:var(--bg);color:var(--ink);box-shadow:0 14px 18px -8px rgba(0,0,0,.28);
  --text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--heading:var(--ink-h);
  border-radius:0 0 var(--radius) var(--radius)}
.nav-drop[hidden]{display:none}
/* Feste Spaltenzahl statt auto-fit: auto-fit legt auf einem breiten Schirm einen
   fuenften, leeren Track an — dann sitzt die Aktionsspalte nicht mehr am rechten
   Rand, sondern irgendwo in der Mitte. Zahl per --nav-spalten steuerbar. */
.nav-drop-inner{display:grid;grid-template-columns:repeat(var(--nav-spalten,4),minmax(0,1fr));
  gap:var(--space-5) var(--gap-card);padding-block:var(--space-5)}
.nav-drop--schmal{left:auto;right:auto;width:min(280px,90vw)}
.nav-drop--schmal .nav-drop-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--space-5)}
.nav-spalte{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
/* :not(.btn) ist Pflicht — sonst zieht die Linkregel dem Knopf im Klappfeld Schrift,
   Groesse und Innenabstand weg (real passiert: 3px statt 14px hoch). */
.nav-spalte a:not(.btn){color:var(--ink-2);font-size:var(--fs-small);line-height:1.35;padding-block:3px}
.nav-spalte a:not(.btn):hover{color:var(--ink-h);text-decoration:underline;text-underline-offset:3px}
/* Das Klappfeld liegt IM Header — dort gilt .site-header .btn und macht jeden Knopf
   weiss (richtig auf der dunklen Kopfzeile, unsichtbar auf der hellen Flaeche des
   Feldes). Hier deshalb zurueck auf die normale Akzent-Rolle. */
.site-header .nav-drop .btn{--_bg:var(--accent);--_fg:var(--accent-fg);
  --_bd:var(--accent);--_bgh:var(--accent-bgh)}
.nav-kat{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body);
  color:var(--ink-h)!important;margin-bottom:2px}
.nav-hinweis{font-size:var(--fs-small);color:var(--ink-2);line-height:1.45;margin:0 0 var(--space-3)}
.nav-spalte--aktion{justify-content:flex-start}
/* Der Knopf fuellt seine Spalte und darf umbrechen. Mit `align-self:flex-start`
   behielt er seine Inhaltsbreite - und weil `.btn` nicht umbricht und ueberstehendes
   abschneidet, verlor eine laengere Beschriftung lautlos ihren Anfang (gemessen
   28.08.2026: 306 px Text in einem 267 px breiten Knopf, das "K" von "Kostenlose"
   war weg). Eine Handlungsaufforderung im Menue ist immer unterschiedlich lang;
   die Breite der Spalte ist der einzige feste Wert. */
.nav-spalte--aktion .btn{align-self:stretch;white-space:normal;text-align:center}
@media (prefers-reduced-motion:reduce){.nav-auf svg,.nav-auf::after{transition:none}}
.header-right{display:flex;align-items:center;gap:var(--space-4)}
.phone{display:inline-flex;flex-direction:column;line-height:1.15;color:var(--header-fg)}
/* Ueber der Nummer steht IMMER die Handlungsaufforderung "Jetzt anrufen", nie wer
   abnimmt ("Geschaeftsfuehrung", "Ihr Ansprechpartner") - Nutzer-Vorgabe 2026-10-02. */
.phone__label{font-size:12px;color:var(--header-fg-soft)}
.phone__num{font-size:19px;font-weight:var(--fw-semibold)}
.site-header .btn{--_bg:var(--header-cta-bg);--_fg:var(--header-cta-fg);
  --_bd:var(--header-cta-bg);--_bgh:var(--header-cta-bg)}
.header-cta-ico{display:none;width:46px;height:46px;padding:0}
/* Menü-Button bleibt Umriss, Telefon bleibt gefüllt: die wichtigere Aktion ist die
   gefüllte — auf dem Handy ist das der Anruf, nicht das Menü. */
.header-burger{display:none;width:46px;height:46px;padding:0;
  --_bg:transparent;--_fg:var(--header-fg);--_bd:var(--header-line);--_bgh:transparent}
.header-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.header-cta-ico svg{width:22px;height:22px;fill:currentColor}
@media (max-width:939px){.header-right .phone,.header-right .btn:not(.header-cta-ico):not(.header-burger){display:none}
  .header-cta-ico,.header-burger{display:inline-flex}
  /* Telefon links, Menü rechts: der Daumen erreicht die äußere rechte Ecke am
     leichtesten — dort gehört das Menü hin, das man häufiger antippt und wieder
     schließt. Der Anruf ist die seltenere, bewusstere Aktion. */
  .header-cta-ico{order:1} .header-burger{order:2}}
/* Vollbild-Menü: deckt den ganzen Schirm ab, damit die Navigation eine eigene Ebene
   ist und nicht als Anhängsel der Kopfzeile gelesen wird. Eigener Schließen-Knopf,
   weil der Menü-Knopf darunter verschwindet. */
/* Das Menue liegt BEWUSST ausserhalb von <header>: der Header bekommt beim Scrollen
   ein transform, und ein transformierter Vorfahre macht aus position:fixed faktisch
   position:absolute — das Vollbild-Menue wuerde mit dem Header aus dem Bild geschoben. */
.mnav:focus{outline:none}
.mnav{position:fixed;inset:0;z-index:70;background:var(--bg-accent);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav[hidden]{display:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:76px;padding:12px var(--gutter);border-bottom:1px solid rgba(255,255,255,.14)}
.mnav-top .ph{width:var(--logo-w);height:40px;aspect-ratio:auto;background:transparent;
  border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7)}
.mnav-close{width:46px;height:46px;padding:0;flex:0 0 auto;
  --_bg:transparent;--_fg:var(--on-accent);--_bd:rgba(255,255,255,.45);--_bgh:rgba(255,255,255,.12)}
.mnav-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mnav-list{list-style:none;margin:0;padding:var(--space-5) var(--gutter);flex:1;
  display:flex;flex-direction:column;gap:var(--space-2)}
.mnav-list a{display:block;padding:var(--space-3) 0;color:var(--on-accent);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);
  border-bottom:1px solid rgba(255,255,255,.12)}
/* Untermenue: die Unterpunkte stehen NICHT von Anfang an in der Liste, sondern
   klappen erst beim Antippen des Oberpunkts auf. Bei sechs Leistungen waere die
   flache Liste sonst laenger als der Bildschirm und der Besucher scrollt an
   Kontakt/Karriere vorbei, ohne sie je zu sehen.
   Der Oberpunkt ist bewusst ein KNOPF (kein Link mit kleinem Pfeil daneben):
   ein Tap darf nicht je nach getroffenem Pixel mal navigieren und mal aufklappen.
   Die Uebersichtsseite selbst ist der erste Eintrag im aufgeklappten Block. */
.mnav-list .mnav-auf{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);width:100%;padding:var(--space-3) 0;text-align:left;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;
  color:var(--on-accent);font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-h3);line-height:1.2}
.mnav-list .mnav-auf svg{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur) var(--ease)}
.mnav-list .mnav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav-sub{list-style:none;margin:0;padding:var(--space-2) 0 var(--space-3) var(--space-4)}
.mnav-sub[hidden]{display:none}
.mnav-sub a{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-medium);
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mnav-sub li:last-child a{border-bottom:0}
/* Handlungs-Knopf GANZ OBEN im Menue, nicht erst am Fuss: sobald das Menue
   mehr als eine Bildschirmhoehe hat, sieht ihn dort niemand mehr. Die
   Linkregel der Liste (Anzeigeschrift, fette Groesse, Trennlinie) wuerde ihn
   sonst uebernehmen - deshalb setzt die Regel die betroffenen Eigenschaften
   ausdruecklich zurueck; die doppelte Klasse gewinnt gegen `.mnav-list a`. */
.mnav-cta{margin-bottom:var(--space-4)}
.mnav-list .mnav-cta .btn{display:flex;width:100%;padding:15px 20px;border-bottom:0;
  font-family:var(--font-sans);font-size:var(--fs-btn-mobil);font-weight:var(--fw-semibold);
  --_bg:var(--on-accent);--_fg:var(--btn-on-accent-fg);--_bd:var(--on-accent);--_bgh:#fff;
  color:var(--btn-on-accent-fg)}
/* Dritte Ebene (Nutzer-Vorgabe 2026-08-28): dieselbe Aufklapp-Mechanik wie die
   zweite — ein Knopf mit aria-controls, das Skript ist generisch. Sie steht eine
   Stufe weiter eingerueckt und eine Spur kleiner; MEHR Unterschied waere falsch,
   sonst liest sie sich wie Kleingedrucktes statt wie Navigation. */
.mnav-list .mnav-auf2{font-family:var(--font-sans);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mnav-list .mnav-auf2 svg{width:17px;height:17px}
.mnav-sub2{padding:2px 0 var(--space-3) var(--space-4)}
.mnav-sub2 a{font-size:var(--fs-small);padding:9px 0;color:var(--on-accent-soft)}
.mnav-sub2 a:hover{color:var(--on-accent)}
/* Ein Unterpunkt MIT dritter Ebene traegt die Trennlinie am Knopf, nicht am <li> —
   sonst stehen zwei Linien uebereinander, sobald die Ebene aufgeklappt ist. */
.mnav-sub li:last-child .mnav-auf2{border-bottom:0}
@media (prefers-reduced-motion:reduce){.mnav-list .mnav-auf svg{transition:none}}
.mnav-foot{padding:var(--space-5) var(--gutter);display:flex;flex-direction:column;gap:var(--space-3);
  border-top:1px solid rgba(255,255,255,.14)}
.mnav-foot .btn{--_bg:var(--on-accent);--_fg:var(--btn-on-accent-fg);--_bd:var(--on-accent);--_bgh:#fff}
.mnav-foot .tel{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  color:var(--on-accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3)}
.mnav-foot .tel svg{width:19px;height:19px;fill:currentColor}
/* Hintergrund darf nicht mitscrollen, solange das Menü offen ist */
body.nav-open{overflow:hidden}
@media (min-width:940px){.mnav{display:none}}

/* ── 1 HERO ── links Beweis + Anruf, rechts zweistufiges Formular. Ziel ≤ 0,7 VH */
.hero{padding-block:var(--section-y);background:var(--hero-bg);color:var(--hero-fg)}
.hero :is(h1,.hero-h){color:var(--hero-heading)}
.hero .lead{color:var(--hero-fg)}
.hero .usp li b{color:var(--hero-heading)}
/* Auf einem dunklen Hero muessen Marker-Kreise und Anruf-Knopf umgestellt werden —
   der Akzent der Marke ist dort oft dieselbe Farbe wie der Grund. */
.hero .usp-ico{border-color:var(--hero-marker-line);background:var(--hero-marker-bg,var(--marker-bg))}
.hero .usp-ico svg{stroke:var(--hero-marker-fg)}
.hero .btn-call{--_bg:var(--hero-cta-bg);--_fg:var(--hero-cta-fg);
  --_bd:var(--hero-cta-bd);--_bgh:var(--hero-cta-bgh)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
 /* Harte Regel: eine H1 laeuft nie ueber mehr als DREI Zeilen. Vier Zeilen lesen sich
   als Absatz, nicht als Aussage — und schieben alles Wichtige unter die Falz.
   Deshalb Groesse UND Zeilenbreite gemeinsam gewaehlt und nachgemessen. */
.hero :is(h1,.hero-h){margin-bottom:var(--space-3);max-width:23ch}
/* Die Groesse folgt der VERFUEGBAREN SPALTE, nicht dem Viewport: bei 900px klappt das
   Raster auf zwei Spalten um, die Textspalte wird dadurch schmaler als bei 768px. Eine
   einzige clamp()-Kurve kann das nicht abbilden — sie waere entweder bei 900 zu gross
   (vier Zeilen) oder auf dem grossen Schirm zu klein. Deshalb Stufen, jede nachgemessen. */
@media (max-width:359px){.hero :is(h1,.hero-h){font-size:var(--h1-320)}}
@media (min-width:768px){.hero :is(h1,.hero-h){font-size:var(--h1-768)}}
@media (min-width:900px){.hero :is(h1,.hero-h){font-size:var(--h1-900);max-width:26ch}}
@media (min-width:1200px){.hero :is(h1,.hero-h){font-size:var(--h1-1200);max-width:24ch}}
@media (max-width:768px){.hero :is(h1,.hero-h){max-width:none}}
 /* Im Hero steht der Vorspann neben dem Formular und traegt mehr Inhalt als sonst —
   deshalb eine Stufe kleiner als der allgemeine Lead, damit er nicht mit der H1 konkurriert. */
.hero .lead{font-size:clamp(16px,1.55vw,17.5px);margin-bottom:var(--space-4);max-width:62ch}
/* Auf dem Handy zwei Punkt groesser: dort steht der Vorspann allein unter der H1 und
   traegt die ganze Erklaerung — am Schirm konkurriert er mit dem Formular daneben. */
@media (max-width:767px){.hero .lead{font-size:17px}}
/* Bewertungs-Pill — einzeilig halten, nie umbrechen lassen */
.rating{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--bg);
  border:var(--border-w) solid var(--border);border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4);max-width:100%}
/* Quellenmarke der Bewertung: das echte Google-G in Originalfarben. Fremdmarken
   werden NICHT umgefaerbt — sonst wirkt die Bewertung wie Eigenlob (siehe Sterne). */
/* Variante ohne Pille: die Bewertung steht direkt auf der Flaeche. Dann faellt auch
   der Insel-Reset weg — die Schrift muss der SEKTION folgen, nicht mehr einer weissen
   Karte. Deshalb wird .insel-hell bei dieser Variante NICHT mitgesetzt. */
.rating--nackt{background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  margin-bottom:var(--space-4);gap:var(--space-3)}
.rating .src{width:19px;height:19px;flex:0 0 auto;display:inline-flex;align-items:center}
.rating .src svg{width:19px;height:19px;display:block}
.rating .src:empty{border-radius:50%;background:var(--border-strong)}
/* Fremdmarken-Optik: Bewertungssterne bleiben Google-Gold, auch wenn die Marke
   umgefaerbt wird. Eine Google-Bewertung in Hausfarbe wirkt wie Eigenlob und
   verliert genau die Fremd-Autoritaet, wegen der sie da steht. */
.rating .stars{display:inline-flex;gap:2px;color:#fbbc04}
.rating .stars svg{width:14px;height:14px;fill:currentColor}
.rating b{font-size:var(--fs-body);color:var(--heading)}
.rating span.t{font-size:var(--fs-small);color:var(--text-secondary);white-space:nowrap}
.usp{list-style:none;padding:0;margin:0 0 var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.usp li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);line-height:1.45}
/* Am Schirm zwei Punkt groesser — dort steht mehr Raum zur Verfuegung und die Zeile
   soll neben dem Formular nicht verschwinden. Mobil bleibt es bei der kleinen Stufe. */
@media (min-width:768px){.usp li{font-size:16.5px}}
.usp b{color:var(--heading)}
.usp-ico{flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius);
  background:var(--marker-bg);border:var(--border-w) solid var(--marker-line);
  display:inline-flex;align-items:center;justify-content:center}
.usp-ico svg{width:15px;height:15px;stroke:var(--marker-fg);fill:none;stroke-width:var(--icon-stroke)}
.btn-call{gap:var(--space-4);padding:12px 24px;text-align:left}
.btn-call svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.btn-call .cols{display:flex;flex-direction:column;gap:2px;min-width:0}
.btn-call .top{font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-klein);text-transform:uppercase;opacity:.9}
.btn-call .num{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-display);line-height:1.05}
/* Die Zeile unter dem Haupt-Knopf traegt eine ZUSICHERUNG, keine Information:
   kostenlos, unverbindlich, keine Verpflichtung, Daten bleiben hier. An dieser
   Stelle zoegert jemand kurz vor dem Klick - dort gehoert die letzte Sorge
   ausgeraeumt, nicht die Anschrift wiederholt (Nutzer-Vorgabe 2026-08-27). */
.hero-note{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--hero-fg-soft)}
/* Knopf mit Untertext (Pascal 02.10.2026): Untertext mittig unter dem Knopf, an ihm
   ausgerichtet, nie breiter als der Knopf (width:0 + min-width:100% nimmt ihm jeden
   Einfluss auf die Breite). Der Text selbst bleibt kurz genug fuer EINE Zeile. */
.btn-mit-note{display:inline-flex;flex-direction:column;align-items:stretch;max-width:100%}
.btn-mit-note>.btn{justify-content:center}
.btn-mit-note>.hero-note{width:0;min-width:100%;text-align:center}
@media (max-width:767px){.btn-mit-note{display:flex}}
/* USP-Punkte einzeilig, am Handy derselbe Text wie am Desktop (Pascal 02.10.2026): der
   ganze Punkt ist hoechstens 38 Zeichen lang (Tor in seite_pruefen.py); nowrap ist nur Sicherung. */
@media (max-width:767px){
  .usp li>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* Mittige Oberzeile ohne Strich (Nutzer-Vorgabe 2026-10-02, steht auch in den Design-
   Standards §0). Der Strich fuehrt das Auge an eine linke Kante - mittig gibt es keine.
   sec-head ist ab 900 px mittig, darunter linksbuendig (dort bleibt der Strich); --center
   immer mittig; Koepfe in Textspalten neben einem Bild bleiben links. */
.sec-head--center>.eyebrow::before{display:none}
@media (min-width:900px){
  .sec-head:not(.sec-head--row)>.eyebrow::before{display:none}
  .proof-body .sec-head>.eyebrow::before,.beleg-text .sec-head>.eyebrow::before{display:block}
}
/* FAQ mittig, ohne Personenkarte links (Pascal 02.10.2026: "FAQ zentriert, links das Feld
   ganz weg" - auch im neutralen Wireframe). Eine Spalte, 800 px wie die mittigen Koepfe. */
.faq-grid{display:block;max-width:800px;margin-inline:auto}
.faq-grid>aside{display:none}
.faq-grid .col-head{text-align:center;margin-bottom:var(--head-mb,var(--space-6))}
.faq-grid .col-head .eyebrow::before{display:none}
/* Mittiger Kopf heisst: JEDES Kind mittig - auch die H2 mit Breitengrenze und Strich-Einzug
   der linksbuendigen Variante (Pascal 02.10.2026: "Ueberschrift nicht mittig - Fehler, der
   nicht vorkommen darf"). Geprueft mit scripts/zeilen_pruefen.py (Mitte). */
.faq-grid .col-head :is(h1,h2,p):not(.eyebrow){margin-inline:auto;padding-left:0}
.faq-grid .col-head :is(h1,h2)::before,.faq-grid .col-head :is(h1,h2)::after{display:none}
/* Stichpunkte: ZWEI je Zeile bleiben, der TEXT ist kurz (~2 Woerter, <= 20 Zeichen) und
   bricht nie um - Pascal 02.10.2026. Gemessen mit scripts/zeilen_pruefen.py. */
/* Pinselstrich unter einem Wort der H1 - "eine Abwechslung in der Ueberschrift" (Pascal
   02.10.2026). Gefuellte Form (duenn - kraeftig - duenn), Farbe = Schrift der H1, nah an den
   Unterlaengen ohne sie zu beruehren (-.16em). Mit Strich braucht die H1 Zeilenhoehe 1.24.
   Nur EIN Wort/Wortpaar, das Versprechen der Seite. */
.schwung{position:relative;display:inline-block;white-space:nowrap}
.schwung svg{position:absolute;left:-1%;bottom:-.16em;width:102%;height:.26em;overflow:visible;pointer-events:none}
.schwung path{fill:currentColor;opacity:.9}
:is(h1,.hero-h):has(.schwung){line-height:1.24}
/* H1 hoechstens DREI Zeilen, auf jeder Breite (Pascal 02.10.2026) - Text kuerzen, nicht Schrift
   verkleinern. scripts/zeilen_pruefen.py misst es. */
/* Kopfzeilen-Telefon mit Gesicht (Pascal 02.10.2026): EIN Inhaber = ein rundes Bild; zwei =
   beide ueberlappend (.phone__ava+.phone__ava), der Erstgenannte als --oben. */
.phone.phone--ava{flex-direction:row;align-items:center;gap:10px}
.phone__avas{display:flex;flex:0 0 auto}
.phone__ava{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;position:relative;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.phone__ava.ph{display:block;padding:0;aspect-ratio:1/1}
.phone__avas .phone__ava+.phone__ava{margin-left:-12px}
.phone__avas .phone__ava--oben{z-index:2}
.phone__txt{display:flex;flex-direction:column;line-height:1.15}
/* Individuelle Hintergrund-Zeichnung im Hero (Pascal 02.10.2026, S&R): je Kunde eine eigene
   technische Strichzeichnung zum Gewerk, erzeugt mit scripts/hero_zeichnung.py, weisse Linien,
   6 % Deckkraft, linksbuendig am Boden; am Handy hinter dem Textteil. Ohne Variable: nichts. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;z-index:-1;left:-2%;bottom:-3%;width:min(1400px,110vw);
  aspect-ratio:16/9;background:var(--hero-zeichnung,none) center/contain no-repeat;opacity:.06;pointer-events:none}
@media (max-width:899px){.hero::after{top:70px;bottom:auto;left:-6%;width:160vw;opacity:.07}}
/* 25 · BILDCOLLAGE + TEXT (02.10.2026) */
.collage-sec{padding-block:var(--section-y)}
.collage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.collage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.collage-bilder{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.collage-bilder .collage-gross{grid-column:1/-1}
.collage-bilder .ph{border-radius:var(--radius)}
.collage-text h2{margin-bottom:var(--space-4)}
.collage-text>p:not(.eyebrow){color:var(--text-secondary);margin:0 0 var(--space-5)}
.punkt-liste{list-style:none;margin:0 0 var(--space-6);padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.punkt-liste li{display:flex;align-items:center;gap:var(--space-3);white-space:nowrap}
.punkt-liste li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.knopf-reihe .btn svg{width:18px;height:18px}
/* 26 · ZWEI KARTEN (02.10.2026) */
.wahl-sec{padding-block:var(--section-y)}
.wahl-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media (min-width:760px){.wahl-karten{grid-template-columns:1fr 1fr}}
.wahl-karte{background:var(--surface,var(--bg));border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.wahl-karte>.ph{border-radius:0}
.wahl-karte-body{padding:var(--space-5) var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.wahl-karte-body h3{font-size:var(--fs-h3);margin:0}
.wahl-karte-body p{color:var(--text-secondary);margin:0}
.wahl-karte-body .wahl-notiz{font-style:italic;font-size:var(--fs-small);color:var(--text-muted);margin-top:var(--space-2)}
/* Hero-Rhythmus (Pascal 02.10.2026: "Abstaende wirken verschoben"). Naehe ordnet:
   Ueberschrift + Text sind EINE Gruppe (16), zwischen den Gruppen Text / Beweis /
   Handlung doppelt so viel (32), Untertext klebt am Knopf (8). Am Handy 12 / 24 / 8. */
.hero-grid>div>h1{margin:0 0 var(--space-4)}
.hero-grid>div>.lead{margin:0}
.hero-grid>div>.lead+*{margin-top:var(--space-6)}
.hero-grid>div>.rating-reihe,.hero-grid>div>.rating{margin-bottom:0}
.hero-grid>div>.rating-reihe+.usp,.hero-grid>div>.rating+.usp{margin-top:var(--space-4)}
.hero-grid>div>.usp{margin-bottom:var(--space-6)}
.btn-mit-note>.hero-note{margin-top:var(--space-2)}
@media (max-width:767px){
  .hero-grid>div>h1{margin-bottom:var(--space-3)}
  .hero-grid>div>.lead+*{margin-top:var(--space-5)}
  .hero-grid>div>.usp{margin-bottom:var(--space-5)}
}

/* ── FORMULAR ── Schritt 1 = Auswahl (Micro-Yes), Schritt 2 = Kontaktdaten */
/* Die Formular-Ueberschrift ist eine h2 (sonst springt die Gliederung h1->h3),
   traegt aber die Groesse einer h3. */
/* Die Frage ist der Einstieg in den Trichter — sie darf nicht wie eine Beschriftung
   aussehen (Nutzer-Vorgabe 2026-08-27: mittig, kraeftiger, minimal groesser). */
.hero-form-titel{font-size:calc(var(--fs-h3) * 1.08);font-weight:var(--fw-semibold);
  text-align:center}
/* Unterseiten tragen im Hero statt des Formulars ein Motiv: der Anfrage-Knopf führt
   dort auf die Anfrage-Strecke. Gleiche Spalte, gleiche Proportion. */
.hero-bild{border-radius:var(--radius);overflow:hidden}
.hero-bild .ph{border-radius:var(--radius)}
.hero-form{background:var(--form-bg);border-radius:var(--radius);
  color:var(--form-fg);
  --text:var(--form-fg);--text-secondary:var(--form-fg-soft);--text-muted:var(--form-fg-soft);
  --heading:var(--form-heading);--border:var(--form-line);--border-strong:var(--form-line-strong);
  /* Fuellung einer BOX innerhalb einer Sektion. Kippt mit der Zone, damit eine
     Box sich nie in ihrer eigenen Sektionsfarbe aufloest. */
  --surface:var(--bg-alt);
  --fill:var(--form-fill);--bg:var(--form-sel-bg);--accent-soft:var(--form-sel-soft);
  --positive:var(--form-positive);
  box-shadow:var(--shadow-md);padding:var(--space-5)}
/* Etwas größer als eine normale H3: sie muss auf einen Blick sagen, wofür das
   Formular da ist — sie ist die einzige Erklärung im Kasten. */
.hero-form h3{font-size:clamp(20px,2.3vw,23px);margin-bottom:var(--space-3);text-align:center;
  color:var(--form-heading);font-weight:var(--form-heading-weight)}
/* Helle Inseln im dunklen Formularkasten: Auswahlkacheln, Eingabefelder und die
   Auswahl-Zeile tragen eine helle Flaeche. Ihre Schrift kommt deshalb aus der
   unveraenderlichen Kopie (--ink*) zurueck — ohne das steht Weiss auf Weiss.
   Dasselbe Muster wie .insel-hell, nur ohne Klasse im Markup. */
.hero-form .opt-tile,.hero-form .field input,.hero-form .field textarea,.hero-form .chosen{
  --text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--heading:var(--ink-h)}
.hero-form .field input,.hero-form .field textarea,.hero-form .chosen{color:var(--ink)}
/* Die Feld-Beschriftung gehoert zur ZONE des Formularkastens, nicht zur
   hellen Grundpalette. Mit --ink-3 stand sie auf einem dunklen Kasten bei
   1,17:1 (gemessen 2026-08-28, blauer Kasten). --form-fg-soft kippt mit. */
/* Die schwebende Beschriftung sitzt IM Eingabefeld - ihre Farbe richtet sich
deshalb nach dem Grund des FELDES, nicht nach dem des Formulars. Beides zu
verwechseln ist teuer: Steht ein blaues Formular ueber weissen Feldern und die
Beschriftung erbt die weisse Schrift des Formulars, ist sie weiss auf weiss
(gemessen 1,16:1) - der Kontrastpruefer sieht das nicht, weil er die Schrift
gegen die Sektionsflaeche prueft, nicht gegen das Feld.
Standard ist die dunkle Feldschrift. Nur wenn ein Projekt WIRKLICH dunkle
Felder hat, setzt es --form-label-fg. */
.hero-form .field label{color:var(--form-label-fg,var(--ink-3))}
.hero-form .field input:focus~label,.hero-form .field input:not(:placeholder-shown)~label,
.hero-form .field textarea:focus~label,.hero-form .field textarea:not(:placeholder-shown)~label{
  color:var(--ink-2)}
.hero-form .btn--accent{--_bg:var(--form-cta-bg);--_fg:var(--form-cta-fg);
  --_bd:var(--form-cta-bg);--_bgh:var(--form-cta-bgh)}
.hero-form form{display:flex;flex-direction:column;gap:var(--space-3)}
.fstep-label{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--form-frage);
  margin-bottom:var(--space-3);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.fstep-label span{font-weight:var(--fw-medium);color:var(--text-muted);font-size:var(--fs-eyebrow);white-space:nowrap}
/* 2×2 bleibt 2×2 — auf JEDER Breite. Nie auf eine Spalte stapeln.
   grid-auto-rows:1fr erzwingt gleich große Kacheln: unterschiedlich hohe Auswahlfelder
   lesen sich wie unterschiedlich wichtige Optionen. */
.opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:var(--space-2)}
/* Folgt auf die Kachelreihe noch ein Eingabefeld (z. B. die PLZ), braucht es den
   Abstand einer eigenen Zeile. Ohne ihn klebt das Feld an der letzten Kachel und
   sitzt buendig auf der unteren Innenkante des Formularkastens — gemessen 0 px
   Luft nach oben, 0 px bis zur Polsterkante; es liest sich dann, als haenge es
   aus dem Kasten heraus (Nutzer-Meldung 2026-08-30). Der Frame kannte diese
   Kombination bisher nicht: dort endet Schritt 1 mit den Kacheln. */
.opt-grid+.field,.opt-grid+.chosen{margin-top:var(--space-3)}
/* Auswahlfelder liegen in einem weissen Formularkasten. Waeren sie selbst weiss,
   waere nur der Rahmen der Hinweis, dass man klicken kann — deshalb der Grauton.
   Der ausgewaehlte Zustand hebt sich dann nach OBEN ab (heller + Markenrahmen). */
.opt-tile{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);background:var(--form-fill);
  /* Eigene Insel: in einem dunklen Formularkasten ist die Kachel oft hell —
     dann muessen Schrift UND Zeichnung darin auf die helle Flaeche umschalten. */
  color:var(--form-tile-fg);
  --illu-3:var(--form-illu-line);--illu-1:var(--form-illu-fein);--illu-2:var(--form-illu-flaeche);
  border:var(--form-tile-line-w) solid var(--border-strong);border-radius:var(--radius);padding:var(--space-2);
  cursor:pointer;font:inherit;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.opt-tile:hover{background:var(--accent-soft);border-color:var(--brand);transform:translateY(-1px)}
.opt-tile.is-sel{border-color:var(--brand);background:var(--bg);box-shadow:inset 0 0 0 1px var(--brand)}
/* Weiter-Knopf: im HERO-Formular nicht mehr verwendet — dort uebernimmt die
   Schritt-Anzeige (.steps) den Hinweis „es geht weiter", und die Auswahl schaltet
   selbst um. In mehrstufigen Formularen OHNE Schritt-Anzeige bleibt er Pflicht,
   sonst weiss niemand, dass ueberhaupt etwas folgt. Deshalb bleibt die Regel hier. */
.opt-next{margin-top:var(--space-3)}

/* Schritt-Anzeige als Punktkette: zeigt, dass es kurz ist und wo man steht.
   Sie ersetzt den „Weiter"-Knopf dort, wo die Auswahl selbst weiterschaltet —
   ohne sie fehlt sonst jeder Hinweis, dass ueberhaupt etwas folgt. */
.steps{display:flex;align-items:center;justify-content:center;gap:0;list-style:none;
  margin:var(--space-4) 0 var(--space-3);padding:0}
/* Die Kette wird NICHT auf die volle Breite gezogen: als kompakte Gruppe liest sie
   sich als „drei kurze Schritte", auseinandergezogen als langer Weg. */
.steps li{display:flex;align-items:center;flex:0 0 auto}
.steps b{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);line-height:1;
  background:transparent;color:var(--form-fg-soft);
  border:var(--border-w-2) solid var(--form-line-strong)}
.steps li::after{content:"";width:clamp(28px,7vw,52px);height:2px;
  background:var(--form-line-strong);flex:0 0 auto}
.steps li:last-child::after{display:none}
.steps li.is-on b{background:var(--form-cta-bg);color:var(--form-cta-fg);border-color:var(--form-cta-bg)}
.steps li.is-done b{background:var(--form-line-strong);color:var(--form-fg);border-color:transparent}
.opt-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tile-svg{width:92px;height:92px}
.tile-svg .l{fill:var(--illu-1)} .tile-svg .m{fill:var(--illu-2)} .tile-svg .d{fill:var(--illu-3)}
.tile-svg .sh{fill:var(--illu-shadow,var(--illu-2))} .tile-svg .ac{fill:var(--illu-4)}
/* Zweites Icon-Vokabular: filigrane Linienzeichnung statt gefuellter Bloecke.
   .flw = weisse Fuellung, .ln = kraeftige Kontur, .ln2 = feinere Innenlinien.
   Ein Design-System entscheidet ueber die --illu-*-Token, welche Sprache passt. */
.tile-svg .flw{fill:var(--illu-2)}
/* Drittes Vokabular: Architektur-Grundriss. Drei Strichstaerken in fester Hierarchie —
   Aussenwand > Innenwand > Moeblierung. Weniger Moebel ist hier mehr: bei 92px wird
   jedes zusaetzliche Detail zu Rauschen und die Raumzahl unlesbar. */
.tile-svg .wand{fill:none;stroke:var(--illu-3);stroke-width:5;stroke-linejoin:round}
.tile-svg .innen{fill:none;stroke:var(--illu-3);stroke-width:3.6;stroke-linecap:round}
.tile-svg .moe{fill:none;stroke:var(--illu-1);stroke-width:3;stroke-linejoin:round}
.tile-svg .fein{fill:none;stroke:var(--illu-1);stroke-width:2.2;stroke-linecap:round;opacity:.9}
.tile-svg .ln{fill:none;stroke:var(--illu-3);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tile-svg .ln2{fill:none;stroke:var(--illu-1);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.opt-tile span{font-size:var(--fs-body);font-weight:var(--fw-semibold);text-align:center;line-height:1.25}
/* Beschriftung liegt IM Feld und wandert beim Tippen nach oben. Spart gegenüber
   einer eigenen Label-Zeile ~20px je Feld und bleibt — anders als ein reiner
   Platzhalter — auch nach der Eingabe sichtbar. */
.field{position:relative}
/* Formularfelder tragen einen EINFACHEN Rand (--border-w). Ein 2px-Rahmen macht aus
   einem Eingabefeld optisch einen Button und laesst das Formular schwer wirken. */
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--text);
  background:var(--bg);border:var(--border-w) solid var(--border-strong);
  border-radius:var(--radius);padding:19px 12px 6px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--accent-soft)}
.field label{position:absolute;left:14px;top:14px;font-size:16px;color:var(--text-muted);
  pointer-events:none;transition:top .15s var(--ease),font-size .15s var(--ease)}
/* placeholder=" " ist Pflicht — :not(:placeholder-shown) erkennt sonst keine Eingabe */
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{
  top:6px;font-size:11.5px;color:var(--text-secondary)}
.chosen{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-small);color:var(--text);
  background:var(--fill);border:var(--border-w) solid var(--border);border-radius:var(--radius);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
.chosen b{font-weight:var(--fw-semibold)}
.chosen button{font:inherit;font-size:var(--fs-small);color:var(--brand);background:none;border:0;
  cursor:pointer;text-decoration:underline;margin-left:auto;padding:0}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;
  font-size:var(--fs-small);line-height:1.4;color:var(--text-secondary)}
.consent a{text-decoration:underline;text-underline-offset:2px}
label.consent input[type="checkbox"]{margin-top:3px;flex:0 0 auto;width:18px;height:18px;max-width:18px}
.form-note{font-size:var(--fs-small);color:var(--text-secondary);text-align:center;margin:0}
/* Siegel UNTER dem Formular — nie darüber. Bleiben auf JEDER Breite vierspaltig:
   als Reihe liest man sie als eine Aussage („geprüft"), zweizeilig als vier Einzelteile. */
.siegel{display:grid;
  /* Spaltenzahl steuerbar: wer nur drei echte Siegel hat, zeigt drei — ein leerer
     vierter Platz neben drei Logos sieht nach Fehler aus, nicht nach Reserve. */
  grid-template-columns:repeat(var(--siegel-cols,4),minmax(0,1fr));gap:var(--space-2);background:var(--bg);
  border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--space-4);margin-top:var(--space-3)}
.siegel div{min-width:0;text-align:center;font-size:11.5px;line-height:1.25;color:var(--text-muted);
  border:var(--border-w-2) dashed var(--border-strong);border-radius:var(--radius);
  padding:8px 2px;overflow-wrap:anywhere}
/* Ein Siegel-Feld nimmt ein ECHTES Logo auf: Rahmen und Beschriftung fallen weg,
   das Logo wird EINGEPASST und nie beschnitten (ein angeschnittenes Fremdsiegel ist
   ein Fehler, kein Zuschnitt). Die Deckelung der Hoehe haelt die Reihenhoehe stabil,
   egal wie unterschiedlich die Seitenverhaeltnisse der Logos sind. */
.siegel div.has-img{border:0;padding:0;display:flex;align-items:center;justify-content:center}
.siegel div.has-img img{max-width:100%;max-height:52px;width:auto;height:auto;
  object-fit:contain;display:block}
@media (max-width:480px){
  .siegel{gap:5px;padding:var(--space-3)}
  .siegel div{font-size:9.5px;padding:7px 1px}
  .siegel div.has-img{padding:2px}
  .siegel div.has-img img{max-height:38px}
}

/* ── Waagerechte Streifen scrollen HART ── (der Kommentar hing frueher am
   Bildband, das am 2026-08-28 aus dem Frame entfernt wurde; die Regel gilt
   weiter fuer alle uebrigen Streifen.)
   scroll-behavior wird von html geerbt (dort steht smooth fuer die Sprungmarken).
   Ein Streifen, dessen scrollLeft ein Skript weiterschiebt, startet dadurch in
   JEDEM Frame eine eigene weiche Bewegung; die Bewegungen ueberlagern sich und
   der Ruecksprung am Ende sieht aus, als wandere die ganze Seite zur Seite.
   Die Pfeilknoepfe bleiben weich: sie uebergeben behavior:'smooth' im Aufruf.
   overscroll-behavior-x haelt den Wisch im Streifen. */
.lz-row,.ill-grid,.tiles,.ref-grid,.reihe--slider{
  scroll-behavior:auto;overscroll-behavior-x:contain}

/* ── TEXT MIT BELEG-LISTE ── zweite Moeglichkeit fuer die Stelle unter dem Hero
   (dort steht im Frame der Bild-Text-Block, Bauteil 4):
   sie erklaert in zwei Absaetzen und belegt in zwei Spalten. Die Liste fuellt sich
   SPALTENWEISE (1-3 links, 4-6 rechts) — zeilenweise gelesen waere die Reihenfolge
   sonst durcheinander. */
.beleg-sec{padding-block:var(--section-y)}
.beleg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:start}
@media (min-width:900px){.beleg-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* Das Bild bleibt FLACH und waechst nicht mit der Textspalte mit (align-items:start).
   Ein Bild, das sich an die Texthoehe anpasst, wird bei viel Text quadratisch —
   und ein quadratisches Landschaftsbild wirkt wie ein Ausschnitt, nicht wie eine Ansicht. */
.beleg-bild{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.beleg-bild img{width:100%;height:100%;object-fit:cover;display:block}
.beleg-text p{max-width:60ch}
.beleg-text p + p{margin-top:var(--space-4)}
.belege{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3) var(--gap-card);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){
  .belege{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,auto);grid-auto-flow:column}
}
.belege li{display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--fs-body);line-height:1.35}
.belege .beleg-ico{flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius);
  background:var(--marker-bg);border:var(--border-w) solid var(--marker-line);
  display:inline-flex;align-items:center;justify-content:center}
.belege .beleg-ico svg{width:15px;height:15px;stroke:var(--marker-fg);fill:none;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .rev-track{animation:none}
  .site-header,.cta-bar{transition:none}
}

/* ── 3 LEISTUNGEN ── Slider mit Peek: nächste Karte IMMER angeschnitten sichtbar */
.lz-sec{background:var(--bg-alt);padding-block:var(--section-y);--surface:var(--bg)}
/* Variante des Kopf-Bauteils für Sektionen mit Bedienelementen: gleiche Typo und
   derselbe --head-mb, aber linksbündig und in EINER Zeile mit den Pfeilen. */
/* Doppelte Klasse, weil dieser Block im Stylesheet VOR .sec-head steht — sonst
   gewinnen dessen text-align:center und max-width. */
.sec-head.sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-6);text-align:left;max-width:none;margin-inline:0}
.sec-head--row>div{min-width:0;max-width:60ch}
/* Mobil rutschen Kopf und Bedienelemente auseinander: Überschrift oben, Pfeile UNTER
   den Slider. Über dem Slider würden sie die Karten aus dem ersten Bildschirm drücken.
   display:contents hebt den Kopf-Container auf, damit beide Kinder frei sortierbar sind. */
@media (max-width:899px){
  .sec-head.sec-head--row{display:contents}
  .lz-sec>.wrap,.ref-sec>.wrap{display:flex;flex-direction:column}
  /* .lz-nav IST ein div — deshalb muss die Pfeil-Regel spezifischer sein als
     .sec-head--row>div, sonst gewinnt dort order:1 und die Pfeile bleiben oben. */
  .sec-head--row>div:not(.lz-nav){order:1;margin-bottom:var(--head-mb);max-width:none}
  .lz-row,.ref-grid{order:2}
  /* Alles, was UNTER dem Raster steht, braucht hier eine Reihenfolge: der
     Wrap ist mobil eine Flexbox, und ein Kind ohne order landet bei 0 - also
     VOR dem Raster. Ein Hinweis unter den Karten sprang dadurch nach oben. */
  .sec-note{order:3}
  .sec-cta{order:4}
  .sec-head--row>.lz-nav[hidden]{display:none !important}
  .sec-head--row>.btn{order:4;margin-top:var(--space-5);align-self:stretch}
}
.sec-head--row .btn{flex:0 0 auto}
.lz-nav{display:flex;gap:var(--space-3);flex:0 0 auto}
/* Die Blaetter-Pfeile sind normale Knoepfe (.btn.btn--accent, Nutzer-Vorgabe
   2026-08-28) — sie erben Fuellung, Rundung, Hover, Fokus und den Glanz. Hier bleibt
   nur die Groesse: quadratisch, weil sie nur ein Symbol tragen. */
.lz-nav .btn{width:46px;height:46px;padding:0;flex:0 0 auto}
.lz-nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Pfeile NUR am Schirm: auf dem Handy wird gewischt, die Knoepfe kosten dort nur Hoehe
   und sind winzige Tippziele. Die angeschnittene naechste Karte ist die Einladung.
   Diese Regel steht bewusst NACH .lz-nav{display:flex} — sie stand vorher davor, in
   einer frueheren Media Query, und wurde von der spaeteren Basisregel geschlagen
   (gleiche Spezifitaet, spaeter gewinnt). Die Pfeile waren dadurch mobil doch sichtbar. */
@media (max-width:899px){ .lz-nav{display:none} }
.lz-row{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.lz-row::-webkit-scrollbar{display:none}
/* 29% Kartenbreite = 3 volle + angeschnittene vierte. Der Peek ist die Wisch-Einladung. */
/* Flaeche statt Rahmen (Nutzer-Vorgabe 2026-08-28): die Karte traegt hellgrau und
   KEINE Umrandung. --surface folgt der Zone — helle Sektion ⇒ graue Karte, graue
   Sektion ⇒ weisse Karte —, damit sich die Karte nie im Sektionsgrund aufloest. */
.lz-card{flex:0 0 clamp(240px,29%,340px);scroll-snap-align:start;background:var(--surface);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column}
/* KEINE Trennlinie zwischen Bild und Inhalt (Nutzer-Vorgabe 2026-08-27): die
   Bildkante trennt bereits. Eine zusaetzliche 1-px-Linie liegt als heller Strich
   auf dem Foto und wirkt wie ein Rest, besonders wenn der Inhaltsblock darunter
   dunkel ist. Gilt fuer jede Karte, die Bild oben und Inhalt darunter stapelt. */
.lz-card .ph{border:0;border-radius:0;aspect-ratio:2/1}
.lz-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.lz-body p{color:var(--text-secondary);font-size:var(--fs-small);flex:1}
.lz-body .btn{margin-top:var(--space-2)}

/* ── 4 SPLIT ── Bild + Textpanel als EIN Block, gleiche Höhe, keine Lücke dazwischen */
.split-sec{padding-block:var(--section-y)}
/* Umgekehrte Fassung: die SEKTION traegt das Hellgrau, die Karte darin ist weiss.
   Sinnvoll direkt unter dem Hero — die Karte hebt sich dann vom Grund ab, statt
   im weissen Seitenhintergrund zu verschwinden. */
.split-sec--invers{background:var(--bg-alt);--surface:var(--bg)}
.split-sec--invers .split-body{background:var(--bg)}
.split-sec--invers .split{box-shadow:var(--shadow-sm)}
.split{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  border-radius:var(--radius);overflow:hidden}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Medienspalte: füllt die Höhe des Textpanels, kein eigenes Seitenverhältnis */
.split-media{position:relative;min-height:300px}
/* KEINE Trennlinie zwischen Bild und Inhalt (Nutzer-Vorgabe 2026-08-31): der
   Wechsel von Motiv zu Textflaeche ist selbst schon die Kante. Eine zusaetzliche
   Linie zerlegt den Block optisch in zwei Kacheln, statt ihn als eine Einheit
   lesen zu lassen - dieselbe Entscheidung, die .lz-card und .ref schon tragen. */
.split-media .ph{height:100%;aspect-ratio:auto;border-radius:0;border:0}
/* Namenszeile IM Bild unten links — Verlauf, damit sie auf jedem Foto lesbar bleibt */
/* Namenszug IM Bild unten links. Der Verlauf traegt bis zu ZWEI Zeilen (Name +
   Rolle) - er ist deshalb am Fuss dicht und blendet nach oben weich aus; die
   Werte sind an hellen Motiven gemessen (siehe bauteile.md, .ref--foto). */
.split-name{position:absolute;left:0;right:0;bottom:0;padding:var(--space-7) var(--space-5) var(--space-4);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  background:linear-gradient(to top,rgba(0,0,0,.90) 0,rgba(0,0,0,.76) 30%,rgba(0,0,0,.52) 62%,rgba(0,0,0,.20) 85%,rgba(0,0,0,0) 100%)}
/* Zweite Zeile des Namenszugs: die Rolle. Sie gehoert zum Namen und steht
   deshalb IN ihm, nicht als eigener Absatz darunter - sonst liest sie sich
   wie Fliesstext und der Name verliert seine Ueberschrift-Wirkung. */
.split-name span{display:block;margin-top:var(--space-1);font-family:var(--font-sans);
  font-weight:var(--fw-medium);font-size:var(--fs-small);line-height:1.35;color:rgba(255,255,255,.9)}
.split-body{background:var(--surface);padding:clamp(24px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
/* In dunklen Zonen kommt die Vorzeile aus der Auf-Akzent-Rolle; auf dem Akzentband
   dagegen aus der Akzent-Schriftfarbe — dort IST der Akzent ja die Flaeche. */
.fact-sec .eyebrow,.vid-sec .eyebrow,.medien-sec .eyebrow{color:var(--on-accent-soft)}
.cta-band .eyebrow{color:var(--cta-band-fg);opacity:.86}
.eyebrow{font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-ink)}

.split-body h2{max-width:20ch}
.split-body p{color:var(--text-secondary);max-width:56ch}
.split-claim{color:var(--heading);font-weight:var(--fw-semibold)}
/* Häkchenliste: zwei Spalten, bricht unter 560px auf eine */
.check-grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-5)}
/* Mobil NICHT starr einspaltig: auto-fit legt zwei Punkte nebeneinander, sobald sie
   nebeneinander passen, und stapelt erst wenn nicht. Bei kurzen Punkten spart das die
   halbe Höhe — bei langen passiert automatisch nichts. */
@media (max-width:560px){.check-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/* Alle Aufzählungen im Frame teilen DREI Werte: --fs-small, Zeilenhöhe 1.45 und
   26px Markerfläche. Eine Aufzählung ist Nebentext, kein Fließtext — und wenn drei
   Listen drei Zeilenhöhen haben, wirkt die Seite unruhig, ohne dass man sagen kann warum. */
.check-grid li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);line-height:1.45}
.check-ico{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius);
  background:var(--marker-bg);border:var(--border-w) solid var(--marker-line);
  display:inline-flex;align-items:center;justify-content:center}
.check-ico svg{width:14px;height:14px;stroke:var(--marker-fg);fill:none;stroke-width:calc(var(--icon-stroke) * 1.2);stroke-linecap:round;stroke-linejoin:round}
.split-body .btn{align-self:flex-start;margin-top:var(--space-2)}
/* Knopf mit Untertext: die HUELLE ruecken, nicht nur den Knopf - sonst laeuft sie ueber die
   ganze Spaltenbreite und der Untertext steht mittig zur Spalte statt zum Knopf (Pascal 08.10.2026). */
:is(.split-body,.proof-body,.geo2-body)>.btn-mit-note{align-self:flex-start;margin-top:var(--space-2)}
:is(.split-body,.proof-body,.geo2-body) .btn-mit-note>.btn{align-self:stretch;margin-top:0}
.split-body .btn svg{width:19px;height:19px;fill:currentColor}

/* ── Ein PAAR: zwei Split-Karten NEBENEINANDER ──
   Zwei Menschen, zwei Standorte, zwei Angebote gehoeren nebeneinander, nicht
   untereinander: zwei gleich gebaute Karten uebereinander lesen sich als
   Wiederholung, nebeneinander als EIN Satz. In der halb so breiten Spalte
   stapelt die Karte Bild ueber Text - der Zwei-Spalter waere dort zwei schmale
   Streifen. Kein neues Markup: nur ein Wrapper um zwei .split-Karten. */
.split-paar{--split-ar:3/2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media (min-width:900px){
  .split-paar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-paar .split{grid-template-columns:minmax(0,1fr)}
}
/* Das Bild bringt hier sein eigenes Seitenverhaeltnis mit, statt die Hoehe des
   Textpanels zu fuellen. Und zwischen Bild und Text steht KEINE Linie - die
   Bildkante trennt bereits (bauteile.md: „Zwischen Bild und Inhalt gehoert
   keine Trennlinie"). */
.split-paar .split-media{min-height:0;height:auto}
.split-paar .split-media .ph{height:auto}
.split-paar .split-body{justify-content:flex-start}
/* Gestapelt (unter 900px) darf die Karte nicht die volle Breite nehmen: ein
   Portrait ueber 700 px Breite ist kein Portrait mehr, sondern ein Banner -
   und zwei davon untereinander machen die Sektion doppelt so hoch wie noetig.
   Der Frame loest das sonst mit einer festen Bildhoehe (.split-media 200px);
   die schneidet hier aber quer durchs Gesicht. Deshalb die Karte begrenzen,
   nicht das Bild. Kein eigener Umbruchpunkt - dieselben 900px wie ueberall. */
@media (max-width:899px){.split-paar .split{max-width:480px;margin-inline:auto}}

/* ── 5 KENNZAHLEN ── dunkles Band: links Zusage + Direktkontakt, rechts 2×2 Zahlen ── */
.fact-sec{background:var(--bg-accent);--surface:var(--bg);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y)}
.fact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact-sec h2{color:var(--on-accent);max-width:18ch;margin-bottom:var(--space-4)}
.fact-sec .lead-alt{color:var(--on-accent-soft);line-height:var(--lh-lead);max-width:52ch}
/* Direktkontakt-Karte — eigene Fläche statt hohlem Rahmen: auf Dunkel liest sich
   ein reiner Umriss wie „deaktiviert". Reihenfolge = Conversion-Reihenfolge:
   Verfügbarkeit → Aktion → Angst-Abbau → schwächere Alternativen. */
.contact-card{margin-top:var(--space-5);max-width:460px;
  background:var(--veil);border:var(--border-w) solid var(--veil-strong);
  border-radius:var(--radius);padding:var(--space-5)}
/* Fließtext statt Flex-Zeile: als Flex-Container zerfiel die Zeile mobil in zwei
   Blöcke nebeneinander, der Punkt stand mittig zwischen beiden. Als Text mit
   Inline-Marker bricht sie normal um. */
.cc-status{display:block;font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--on-accent);margin-bottom:var(--space-4);line-height:1.45}
.cc-status .when{font-weight:var(--fw-medium);color:var(--on-accent-soft)}
.cc-status .dot{display:inline-block;vertical-align:middle;
  margin-right:var(--space-2);position:relative;top:-1px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--positive);flex:0 0 auto}
/* Die Nummer IST der Button — auf dunklem Grund ist hell-auf-dunkel der stärkste
   Kontrast, gleiche Optik wie der Header-CTA. Label über der Nummer nennt den Nutzen. */
.cc-call{--_bg:var(--on-accent);--_fg:var(--btn-on-accent-fg);--_bd:var(--on-accent);--_bgh:#fff;
  width:100%;justify-content:flex-start;gap:var(--space-4);padding:13px 20px;text-align:left}
.cc-call svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.cc-call .cols{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Keine Abschwaechung: Die Knopfschrift ist bereits das Marken-Blau, und
   78 Prozent Deckkraft hellten sie auf 4,33:1 auf - unter den 4,5:1, die
   Kleinschrift braucht. Die geringere Schriftgroesse traegt die
   Hierarchie allein. */
.cc-call .top{font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-klein);text-transform:uppercase;}  /* .72 ergab auf Weiss 4,44:1 - knapp unter 4,5. Bei .78 sind es 5,2:1, sichtbar ist der Unterschied nicht. */
.cc-call .num{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-display);line-height:1.1}
/* Zweitwege bewusst leiser: sie sollen erreichbar sein, nicht mit dem Anruf konkurrieren */
.cc-alt{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
  margin-top:var(--space-4)}
.cc-alt a{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-small);color:var(--on-accent-soft);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.cc-alt a:hover{color:var(--on-accent);text-decoration-color:currentColor}
.cc-alt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
/* Zahlenkarten: immer 2×2 — vier Zahlen untereinander wirken wie eine Liste, nicht wie Beweis */
.fact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
.fact-card{background:var(--surface);
  /* Helle Insel in der dunklen Zone: Palette zurueck, sonst steht die Kennzahl
     weiss auf weiss (genau dieser Fehler ist real passiert). */
  --text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--heading:var(--ink-h);border-radius:var(--radius);padding:var(--space-6) var(--space-4);
  text-align:center;display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);min-height:180px}
.fact-num{font-family:var(--font-display);font-weight:var(--fw-display);color:var(--heading);
  font-size:clamp(30px,4.4vw,44px);line-height:1.05;hyphens:none}
.fact-txt{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.4}

/* ── 6 SIEGELBAND ── fremde Logos, die Vertrauen leihen. Ruhige Zone, kein CTA. ── */
.seal-sec{background:var(--bg-alt);padding-block:var(--section-y-sm);--surface:var(--bg)}
.seal-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--gap-card) var(--gap-split)}
/* Normalisierung über die HÖHE, nie über die Breite: sonst wird eine breite Wortmarke
   optisch riesig neben einem quadratischen Siegel. Breite läuft frei mit. */
.seal{display:flex;align-items:center;justify-content:center;
  height:clamp(62px,7vw,92px);flex:0 0 auto;max-width:100%}
.seal img{height:100%;width:auto;max-width:100%;object-fit:contain}
/* Platzhalter simuliert die spätere Bildbox in typischen Logo-Formaten */
.seal .ph{height:100%;width:auto;aspect-ratio:var(--r,3/2);border-radius:var(--radius);background:transparent}
.seal .ph svg{width:20px;height:20px}
.seal .ph span{font-size:11px}
@media (max-width:560px){
  .seal-row{gap:22px 28px}
  .seal{height:56px}
}

/* ── 7 LEISTUNGS-KACHELN ── Alternative zum Slider (Sektion 3): zeigt ALLE Leistungen
   gleichzeitig. Slider bei >6 Leistungen, Raster bei 3–6 — nie beides auf einer Seite. */
.tiles-sec{padding-block:var(--section-y)}
/* EIN Kopf-Bauteil für ALLE Sektionen: Vorzeile → H2 → optionaler Einleitungstext,
   überall gleiche Größen und derselbe Abstand zum Inhalt (--head-mb). */
.sec-head{text-align:center;max-width:680px;margin:0 auto var(--head-mb)}
/* Leiser Hinweis UNTER dem Inhalt einer Sektion - gleiche Spalte wie der
   Sektionskopf, kleiner und ruhiger als der Einleitungstext. */
.sec-note{max-width:680px;margin:var(--space-5) auto 0;text-align:center;
  font-size:var(--fs-small);color:var(--text-secondary);line-height:var(--lh-lead)}
.sec-note a{color:var(--accent-ink);text-decoration:underline}
/* Zwei Hinweiszeilen hintereinander (Aussage + Verweise) sollen als EIN Block
   lesen, nicht als zwei Absaetze mit vollem Sektionsabstand dazwischen. */
.sec-note+.sec-note{margin-top:var(--space-3)}
/* Der Handlungsknopf UNTER dem Inhalt. Im Sektionskopf steht er VOR dem Beweis -
   auf einer Belegseite ist das zu frueh und schiebt sich zwischen Text und Bilder. */
.sec-cta{margin-top:var(--space-5);text-align:center}
/* Ueberschriften-Strich (Design-System-Merkmal, per Token an/aus).
   Die Zuordnung haengt an der TATSAECHLICHEN Ausrichtung, nicht an einer geratenen Breite:
     zentriert     -> kurzer Strich UNTER der Ueberschrift
     linksbuendig  -> senkrechter Strich NEBEN der Ueberschrift
   Gemessen gilt im Frame: .sec-head ist bis 899px LINKSBUENDIG und erst ab 900px zentriert
   (Regel weiter unten im Stylesheet), .sec-head--row ist IMMER linksbuendig,
   .sec-head--center IMMER zentriert. Wer diese Breiten aendert, aendert beide Bloecke.
   Nur die Ueberschrift ruecht ein, Vorzeile und Text bleiben an der Textkante. */
.sec-head :is(h1,h2){position:relative}
.sec-head :is(h1,h2)::after{content:"";display:block;width:var(--rule-len);height:var(--rule-w);
  background:var(--rule-color);margin:var(--rule-gap) auto 0}
.sec-head--center :is(h1,h2)::after{margin-inline:auto}
/* --- linksbuendig: senkrechter Strich statt Unterstrich --- */
@media (max-width:899px){
  .sec-head:not(.sec-head--center) :is(h1,h2){padding-left:var(--rule-inset)}
  .sec-head:not(.sec-head--center) :is(h1,h2)::after{display:none}
  .sec-head:not(.sec-head--center) :is(h1,h2)::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;
    width:var(--rule-w);background:var(--rule-color)}
}
/* --row steht auch auf Desktop links (display:flex + text-align:left) */
.sec-head.sec-head--row :is(h1,h2){padding-left:var(--rule-inset)}
.sec-head.sec-head--row :is(h1,h2)::after{display:none}
.sec-head.sec-head--row :is(h1,h2)::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;
  width:var(--rule-w);background:var(--rule-color)}
/* Die Hero-Ueberschrift ist ebenfalls linksbuendig und traegt denselben senkrechten Strich. */
.hero :is(h1,.hero-h){position:relative;padding-left:var(--rule-inset)}
.hero :is(h1,.hero-h)::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;
  width:var(--rule-w);background:var(--rule-color)}
/* Eine Sektion, die ihre Flaeche selbst mitbringt (fact-/vid-/geo-/cgrid-/cmp-sec, cta-band),
   laesst sich damit auf die ZWEITE Farbflaeche der Marke umstellen — ohne ihre Textrollen
   anzufassen. Standard ist --bg-brand gleich --bg-accent, der Frame bleibt also unveraendert. */
section.auf-rot,.cta-band.auf-rot{background:var(--bg-brand)}
/* Gegenstueck: eine Sektion, die von Haus aus die graue Flaeche traegt, auf Weiss stellen —
   fuer Marken ohne graue Sektionsflaeche. Die Boxen darin wechseln dabei mit auf Grau. */
section.auf-weiss{background:var(--bg);--surface:var(--bg-alt)}
/* Mobil linksbündig: eine zentrierte Überschrift zwingt das Auge bei jeder Zeile
   zu einem neuen Startpunkt. Auf schmalen Spalten kostet das Lesegeschwindigkeit,
   deshalb ist linksbündig hier der Standard — zentriert nur, wo es wirklich trägt. */
@media (max-width:899px){
  .sec-head{text-align:left;max-width:none;margin-inline:0}
  .sec-head p{margin-inline:0}
}
/* Ausnahme mit Ansage: ist der INHALT der Sektion zentriert (Logo-Reihe, Bewertungs-
   Plakette), bleibt auch die Überschrift zentriert. Eine linksbündige Überschrift über
   mittigem Inhalt wirkt wie ein Fehler — die Achse muss durchlaufen. */
.sec-head.sec-head--center{text-align:center;max-width:680px;margin-inline:auto}
.sec-head .eyebrow{margin-bottom:var(--space-2)}
.sec-head p{margin-top:var(--space-2);color:var(--text-secondary)}
/* Kopf innerhalb einer Spalte (Zwei-Spalter): gleiche Bauteile, nur linksbündig */
.col-head{margin-bottom:var(--space-4)}
.col-head .eyebrow{margin-bottom:var(--space-2)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
/* Mobil ein Streifen, der rechts aus dem Container ausbricht: zwei Karten ganz,
   die dritte angeschnitten am Bildschirmrand. Links bleibt der normale Seitenrand —
   sonst klebt die erste Karte an der Kante und die Sektion verliert ihre Achse.
   negativer Außenabstand + gleich großer Innenabstand links = Ausbruch nur nach rechts. */

/* ── 23 ILLUSTRATIONS-KARTEN ── Leistungen mit Zeichnung statt Foto: erklärt schneller,
   wenn das Motiv schwer fotografierbar ist. Unterschied zu Sektion 7 (Foto-Kacheln):
   dort führt das Bild, hier der Begriff — deshalb Zeichnung klein, Titel groß. */
.ill-sec{background:var(--bg-alt);padding-block:var(--section-y);--surface:var(--bg)}
.ill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
/* Die Spaltenzahl ist per --spalten steuerbar: die letzte Reihe MUSS aufgehen.
   Eine angebrochene Reihe (4+2) liest sich als Fehler, nicht als Gestaltung. */
@media (min-width:1000px){.ill-grid{grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr))}}
/* Flaeche statt Rahmen (Nutzer-Vorgabe 2026-08-31): die Karte ist weiss, die
   Sektion darunter traegt --bg-alt. Dieser Helligkeitsunterschied grenzt die
   Karte bereits ab; der Rahmen legte eine zweite Kante auf dieselbe Stelle und
   liess das Raster wie ein Formular aussehen. Dieselbe Entscheidung wie bei
   .lz-card und .ref. Wichtig: Diese Karte braucht die abgesetzte Sektions-
   flaeche - auf weissem Grund verschwindet sie ohne Rahmen. */
/* ── Formularkasten im Hero: WEISS mit Kante statt dunkel ───────────────────
   (Nutzer-Vorgabe 2026-08-31, gleiche Entscheidung wie auf der Startseite der
   Gojek-Haut.) Der Frame setzt den Kasten sonst dunkel (--form-bg:--bg-accent).
   Getauscht werden ausschliesslich die --form-*-Token - keine Regel, kein neuer
   Farbton: genau dafuer traegt der Kasten seine Palette selbst.

   Der Hero ist weiss, der Kasten jetzt auch. Er braucht deshalb eine Kante,
   weil eine weisse Flaeche auf weissem Grund sonst nur ueber den Schatten
   erkennbar waere - und der traegt bei hellen Bildschirmen nicht.

   Die Auswahlkacheln waren HELLE INSELN im dunklen Kasten. Auf weissem Grund
   waeren weisse Kacheln unsichtbar: sie bekommen die Fuellung --fill und eine
   1-px-Kante, ausgewaehlt heben sie sich nach oben ab (weiss + Rahmen).

   Gemessen gegen #ffffff: Text 9,85:1 · Ueberschrift 13,35:1 · Sekundaertext
   5,24:1 · Kachelschrift auf #f7f8f8 12,55:1 · Knopfschrift auf #3f4448 9,85:1. */
:root{
  --form-bg:var(--bg); --form-fg:var(--ink); --form-fg-soft:var(--ink-2);
  --form-heading:var(--ink-h); --form-line:var(--border); --form-line-strong:var(--border-strong);
  --form-fill:var(--fill); --form-sel-bg:var(--bg); --form-sel-soft:var(--accent-soft);
  --form-tile-fg:var(--ink-h); --form-tile-line-w:var(--border-w);
  /* Der Akzent liegt jetzt nicht mehr zu nah am Kasten: Knopf und aktiver
     Schritt tragen wieder die dunkle Flaeche mit heller Schrift. */
  --form-cta-bg:var(--accent); --form-cta-fg:var(--accent-fg); --form-cta-bgh:var(--accent-bgh);
  --form-positive:var(--positive);
  /* Die Frage ist der staerkste Text der Zone - auf Weiss ist das die dunkle
     Schrift, nicht die Ueberschriftfarbe, die sonst mit der H2 konkurriert. */
  --form-frage:var(--ink);
}
/* Ohne Kante verschwindet der weisse Kasten im weissen Hero. */
.hero-form{border:var(--border-w) solid var(--form-line)}

.ill-card{background:var(--bg);border-radius:var(--radius);
  padding:var(--space-5) var(--space-4);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ill-pic{width:100%;max-width:130px}
.ill-ico{width:100%;height:auto;display:block}
.ill-card h3{font-size:var(--fs-body)}
.ill-card p{font-size:var(--fs-small);line-height:1.5;color:var(--text-secondary)}
/* Textlink statt Button: vier Buttons nebeneinander konkurrieren mit dem Haupt-CTA
   der Seite — hier soll weitergelesen, nicht abgeschlossen werden. */
.ill-more{margin-top:auto;display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--accent-ink)}
.ill-more:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* Mobil derselbe Full-Bleed-Streifen wie bei den Foto-Kacheln: zwei ganz, dritte
   am Bildschirmrand angeschnitten, links normaler Seitenrand. */
@media (max-width:768px){
  .ill-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:4px;
    scroll-padding-left:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ill-grid::-webkit-scrollbar{display:none}
  /* Breiter als die Foto-Kacheln: hier tragen Zeichnung UND Text die Karte, zwei
     schmale Spalten lassen fuer beides zu wenig. Eine ganze Karte plus gut die
     Haelfte der naechsten — die angeschnittene Karte bleibt die Wisch-Einladung. */
  .ill-grid>.ill-card{flex:0 0 64%;scroll-snap-align:start}
}
@media (max-width:768px){
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:4px;
    scroll-padding-left:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tiles::-webkit-scrollbar{display:none}
  /* zwei volle Karten + ~30px Anschnitt der dritten */
  .tiles>.tile{flex:0 0 calc((100% - var(--gap-card) - 30px) / 2);scroll-snap-align:start}
}
@media (min-width:900px){.tiles{grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr))}}
/* Alternative zum Wischstreifen: auf dem Handy stehen die Kacheln untereinander.
   Sinnvoll, sobald die Beschriftungen lang sind — im schmalen Streifen bricht ein
   Wort wie "Baustelleneinrichtung" sonst unschoen um. */
@media (max-width:899px){
  /* ZWEI Spalten statt einer (Nutzer-Vorgabe 2026-08-19): untereinander wird die
     Liste zu lang. Lange Beschriftungen ("Baustelleneinrichtung") duerfen dafuer
     trennen — Silbentrennung ist hier erwuenscht, kein Fehler. */
  .tiles--gestapelt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--gap-card);overflow:visible;padding:0;margin:0;scroll-snap-type:none}
  .tiles--gestapelt>.tile{flex:none;width:auto}
  .tiles--gestapelt .tile-label{padding:var(--space-3) var(--space-2);font-size:var(--fs-small);
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .tiles--gestapelt .tile--cta .tile-label{font-size:var(--fs-body)}
}
@media (max-width:360px){
  .tiles--gestapelt{grid-template-columns:minmax(0,1fr)}
}
/* Ganze Kachel ist der Link — ein kleiner Textlink darunter verschenkt Klickfläche */
.tile{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  background:var(--accent);transition:transform var(--dur) var(--ease)}
.tile:hover{transform:translateY(-3px)}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tile-img{position:relative;overflow:hidden;aspect-ratio:3/2}
.tile-img .ph{height:100%;aspect-ratio:auto;border-radius:0;border:0}
/* Beschriftungsbalken trägt die Akzentfläche → Text MUSS die On-Accent-Rolle nutzen */
.tile-label{padding:var(--space-4) var(--space-3);text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  color:var(--accent-fg);line-height:1.25;overflow-wrap:anywhere;hyphens:auto;
  hyphenate-limit-chars:10 5 4;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4}

/* ── 8 BILDSTREIFEN ── randlos über die volle Breite, bewusst OHNE Text und CTA:
   Atempause zwischen zwei Argument-Sektionen. Kein .wrap, keine Rundung, keine Lücke. */
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
@media (min-width:760px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Unter 760px bleiben 3 gleiche Spalten zu schmale Scheiben → drittes Bild über
   beide Spalten legen statt es zu quetschen oder abzuschneiden. */
@media (max-width:759px){.strip>*:nth-child(3){grid-column:span 2}}
.strip>*{height:clamp(180px,20vw,320px)}
.strip .ph{height:100%;aspect-ratio:auto;border-radius:0}

/* ── 9 VIDEO-SPLIT ── dunkel: links 4 Gründe als Umriss-Karten, rechts das Video.
   Karten bleiben rahmen-transparent, damit das Video die einzige Fläche im Block ist. */
.vid-sec,.medien-sec{background:var(--bg-accent);--surface:var(--bg);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y)}
.vid-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.icards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
.icard{border:var(--border-w) solid var(--veil-strong);border-radius:var(--radius);
  padding:var(--space-5) var(--space-4);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.icard-ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
/* currentColor statt --on-accent: Das Bauteil entstand in der farbigen
Sektion und trug deren weissen Vordergrund fest verdrahtet. Auf heller Flaeche
stand das Symbol dadurch weiss auf weiss (gemessen 1:1). Auf der Farbflaeche
liefert currentColor dasselbe Weiss wie vorher, weil die Sektion ihre
Schriftfarbe ohnehin auf --on-accent setzt. */
.icard-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:calc(var(--icon-stroke) * .65)}
/* --heading/--text-secondary statt --on-accent: Jede Farbflaeche biegt diese
Token ohnehin auf ihre eigenen Werte um. Ein Bauteil nennt WOFUER es die Farbe
braucht, nicht WELCHE es haben will - sonst ist es an genau eine Flaeche
gebunden und anderswo unlesbar. */
.icard h3{color:var(--heading);font-size:var(--fs-body)}
.icard p{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.45}
.video,.medium{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.video .ph,.medium .ph{height:100%;aspect-ratio:auto;border-radius:0}
/* Play-Fläche ist ein echter Button, kein Deko-Dreieck — sonst weiß niemand, dass es klickt */
.video-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border:0;padding:0;
  /* Glasknopf: rund, durchscheinend, mit Weichzeichner dahinter — er liegt auf dem
     Bild und soll es nicht zudecken. Der Rand haelt ihn auch auf hellen Motiven sichtbar. */
  border-radius:50%;background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease)}
.video-play:hover{transform:scale(1.06);background:rgba(255,255,255,.28)}
.video-play:focus-visible{outline:3px solid var(--on-accent);outline-offset:3px}
.video-play svg{width:26px;height:26px;fill:#fff;margin-left:3px}

/* ── 10 BELEG/INFOGRAFIK ── fremde Studie als Argument. Quelle ist PFLICHT,
   sonst ist die Grafik Behauptung statt Beleg. Überschrift über beide Spalten. */
.proof-sec{padding-block:var(--section-y)}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proof-fig{margin:0}
.proof-fig figcaption{margin-top:var(--space-3);font-size:var(--fs-small);
  font-style:italic;color:var(--text-muted);word-break:break-word}
.proof-body{display:flex;flex-direction:column;gap:var(--space-4)}
.proof-body p{color:var(--text-secondary)}
.proof-body .claim{color:var(--heading);font-weight:var(--fw-semibold)}
.proof-body .btn{align-self:flex-start}
.proof-body .btn svg{width:20px;height:20px;fill:currentColor}

/* ── 11 BILD + TEXT ── ruhige Erklärstrecke: Bild mit Bildunterschrift, daneben Fließtext.
   Bildunterschrift trägt eine eigene Aussage, wiederholt nie den Alt-Text. */
.mt-sec{padding-block:var(--section-y)}
.mt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split);align-items:center}
@media (min-width:900px){.mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-fig{margin:0}
.mt-fig .ph{border-radius:var(--radius)}
/* Zwei Personen nebeneinander: derselbe Slot, nur geteilt. Die Beschriftung liegt AUF
   dem Bild (gleiches Muster wie .split-name), damit unter den Bildern keine zweite
   Textebene entsteht — bei zwei Bildern nebeneinander lesen sich Bildunterschriften
   sonst wie eine Tabelle. */
.mt-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.mt-person{position:relative;margin:0}
.mt-person .ph{border-radius:var(--radius)}
.mt-person figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--space-5) var(--space-3) var(--space-3);text-align:left;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-small);
  line-height:1.25;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0))}
.mt-person figcaption span{display:block;font-family:var(--font-sans);
  font-weight:var(--fw-regular);opacity:.86}
/* Linksbuendig, nicht zentriert (Nutzer-Vorgabe 31.08.2026): die Unterschrift
   gehoert zum Bild und beginnt an dessen linker Kante - zentriert steht sie in
   keiner Flucht, weder mit dem Bild noch mit dem Text daneben. Die Unterschrift
   der Beleg-Sektion (.proof-fig figcaption) steht ohnehin schon links. */
.mt-fig figcaption{margin-top:var(--space-3);text-align:left;
  font-size:var(--fs-small);font-style:italic;color:var(--text-muted)}
.mt-body{display:flex;flex-direction:column;gap:var(--space-4)}
.mt-body p{color:var(--text-secondary)}
.mt-body .claim{color:var(--heading);font-weight:var(--fw-semibold)}
/* Nummer hier bewusst als Textlink: dieser Block ist Erklärung, nicht Abschluss —
   der Button-CTA steht in Sektion 5. Zwei gleich starke CTAs teilen die Aufmerksamkeit. */
.mt-call{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.mt-call .cc-status{margin:0;color:var(--text-secondary)}
.mt-call a{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--accent-ink);
  font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);white-space:nowrap}
.mt-call a:hover{color:var(--brand)}
.mt-call svg{width:20px;height:20px;flex:0 0 auto}

/* ── 12 EINSATZGEBIET-BAND ── schmales dunkles Band, randlos. Beantwortet die
   „kommt ihr überhaupt zu mir?"-Frage im Vorbeiscrollen und setzt Ortsnamen als Text. */
.geo-sec{background:var(--bg-accent);--surface:var(--bg);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y-sm)}
.geo-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5) var(--gap-split)}
.geo-label{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
.geo-ico{width:56px;height:56px;flex:0 0 auto;border-radius:var(--radius);
  background:var(--veil);display:inline-flex;align-items:center;justify-content:center}
.geo-ico svg{width:24px;height:24px;stroke:var(--on-accent);fill:none;stroke-width:1.5}
.geo-label /* .top ERBT seine Farbe, statt eine zu setzen. Das Bauteil sitzt mal in einem
   weissen Knopf auf blauer Flaeche, mal direkt auf dem Blau - und jede feste
   Farbe ist in einem der beiden Faelle falsch. Erst stand hier
   --on-accent-soft (weiss auf weissem Knopf, 4,33:1), dann eine Ausnahme fuer
   den Knopf (dunkel auf Blau, 1,07:1). Beide Male war der Fehler derselbe:
   eine Farbe zu NENNEN, wo man sie erben lassen muss. Die Deckkraft macht die
   Unterzeile leiser, ohne die Farbe festzulegen. */
/* Ohne Abschwaechung: 82 Prozent Deckkraft hellten die blaue Knopfschrift
   auf 4,33:1 auf. Kleinere Schrift reicht als Hierarchie. */
.top{font-size:var(--fs-small);color:inherit;line-height:1.3}
.geo-label .name{font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-h3);letter-spacing:.04em;text-transform:uppercase;color:var(--on-accent);line-height:1.2}
/* Orte als Liste, nicht als Fließtext: jeder Ort ist ein eigener Beleg fürs Einsatzgebiet */
.geo-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--space-2) var(--gap-card);flex:1 1 320px}
.geo-list li{display:inline-flex;align-items:center;gap:var(--space-2);
  font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--on-accent);white-space:nowrap}
.geo-list li::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--on-accent-soft);flex:0 0 auto}
.geo-list a:hover{text-decoration:underline;text-underline-offset:3px}


/* ── ABLAUF ── drei Schritte, damit vor der Anfrage klar ist, was danach passiert.
   Genau drei: zwei wirken beliebig, vier lesen sich als Aufwand. Die Nummer traegt
   die Marker-Rollen, die Verbindungslinie laeuft nur am Schirm zwischen den Karten. */
/* ── PROSA ── Fließtext-Seiten (Impressum, Datenschutz, Widerruf). Eine Spalte,
   lesbare Zeilenlänge, sonst nichts Eigenes: dieselben Schriftgrößen, Abstände
   und Farben wie überall. Jede Website braucht solche Seiten - deshalb gehört
   der Baustein in den Frame und nicht als Einzelfall in eine Kundenkopie. */
.prosa-sec{padding-block:var(--section-y)}
.prosa{max-width:62ch;margin-inline:auto}
.prosa h1{margin-bottom:var(--space-4)}
.prosa h2{font-size:var(--fs-h3);margin-top:var(--space-6);margin-bottom:var(--space-2)}
.prosa h3{font-size:var(--fs-body);font-weight:var(--fw-semibold);
  margin-top:var(--space-4);margin-bottom:var(--space-1)}
.prosa p,.prosa li{color:var(--text-secondary);margin-bottom:var(--space-3)}
.prosa ul{padding-left:1.2em;list-style:disc}
.prosa li{margin-bottom:var(--space-1)}
.prosa a{color:var(--accent-ink);text-decoration:underline}
.prosa .prosa-hinweis{border-left:var(--border-w-2) solid var(--accent);
  padding:var(--space-3) var(--space-4);background:var(--surface);
  border-radius:var(--radius);color:var(--text)}
.ablauf-sec{padding-block:var(--section-y);background:var(--bg-alt);--surface:var(--bg)}
.ablauf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media (min-width:820px){.ablauf-grid{grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr))}}
/* Vier Karten stehen nebeneinander, sobald Platz ist - darunter zwei mal zwei.
   Drei Spalten bei vier Karten lassen eine Waise in der zweiten Zeile stehen; das
   liest sich als Fehler, nicht als Absicht (Nutzer-Vorgabe 27.08.2026: bei sowas
   alle vier nebeneinander oder als Schieber). Ab fuenf Karten greift der Schieber. */
@media (min-width:820px) and (max-width:1099.98px){
  .ablauf-grid[data-anzahl="4"],.ill-grid[data-anzahl="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .ablauf-grid[data-anzahl="4"],.ill-grid[data-anzahl="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Flaeche statt Rahmen (Nutzer-Vorgabe 2026-08-28) — --surface, damit die Karte mit
   der Zone kippt und sich nie im Sektionsgrund aufloest. */
.ablauf-schritt{position:relative;background:var(--surface);
  border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.ablauf-nr{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:var(--radius);background:var(--marker-bg);
  border:var(--border-w) solid var(--marker-line);color:var(--marker-fg);
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-display);line-height:1}
.ablauf-nr--jahr{width:auto;min-width:44px;padding-inline:10px;font-size:var(--fs-body);
  letter-spacing:.02em}
.ablauf-schritt h3{font-size:var(--fs-h3)}
.ablauf-schritt p{color:var(--text-secondary)}
/* Mobil kompakt: Nummer neben die Überschrift statt darüber, flachere Karten und
   eine durchgehende Linie zwischen den Schritten — untereinander gestapelte Karten
   mit Nummer obendrauf brauchen sonst fast einen ganzen Bildschirm. */
@media (max-width:819px){
  .ablauf-grid{gap:var(--space-3)}
  .ablauf-schritt{padding:var(--space-4);gap:var(--space-2);
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    column-gap:var(--space-3);row-gap:var(--space-2)}
  .ablauf-nr{width:34px;height:34px;font-size:var(--fs-body);grid-row:1}
  .ablauf-schritt h3{font-size:var(--fs-body);margin:0}
  .ablauf-schritt p{grid-column:2;font-size:var(--fs-small);margin:0}
}

/* ── Reihe wird zum Slider, sobald sie zu lang wird ─────────────────────────
   Nutzer-Vorgabe 2026-08-27: Ab mehr als vier Elementen steht die Reihe am Schirm
   nicht mehr in zwei Zeilen, sondern laeuft in EINER Zeile mit je einem Pfeil links
   und rechts. Grund: eine zweite Zeile aus vier weiteren Karten macht die Sektion
   doppelt so hoch und der Zusammenhang der Schritte reisst am Zeilenende ab.
   Am Telefon bleibt es beim Untereinander - dort ist Scrollen die natuerliche Geste
   und ein waagerechter Slider mit acht Karten waere schlechter zu bedienen.

   Angeschaltet wird das ueber `data-slider-ab="4"` an der Reihe; das Skript setzt
   `ist-slider`, sobald mehr Kinder da sind UND der Schirm breit genug ist. */
@media (min-width:820px){
  .reihe-huelle{position:relative}
  .ablauf-grid.ist-slider{display:flex;gap:var(--gap-card);overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-block:2px}
  .ablauf-grid.ist-slider::-webkit-scrollbar{display:none}
  .ablauf-grid.ist-slider>.ablauf-schritt{
    flex:0 0 calc((100% - 3*var(--gap-card)) / 4);scroll-snap-align:start}
  /* Die Pfeile sind KNOEPFE und tragen deshalb die Knopf-Klassen selbst
     (.btn.btn--accent.btn--symbol, gesetzt im Skript) - gefuellt wie jeder andere
     Knopf, ohne Rand (Nutzer-Vorgabe 2026-08-28). Hier bleibt nur, was die Position
     und die quadratische Form betrifft.
     Der Platz dafuer kommt aus dem Innenabstand der Huelle, nicht aus einem negativen
     Versatz: so haben die Pfeile IMMER denselben Abstand zum Inhalt und legen sich
     nie ueber eine Karte - auch nicht, wenn das Fenster schmaler wird. */
  .reihe-huelle.hat-pfeile{padding-inline:calc(48px + var(--space-5))}
  .reihe-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:48px;height:48px;padding:0}
  .reihe-pfeil svg{width:20px;height:20px;stroke:currentColor;fill:none;
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .reihe-pfeil--links{left:0}
  .reihe-pfeil--rechts{right:0}
  /* Ab der Breite, ab der es NEBEN dem Inhaltsrahmen ueberhaupt Platz gibt, nutzt
     der Inhalt die volle Rahmenbreite und die Pfeile ruecken hinaus (Nutzer-Vorgabe
     2026-08-30). Gemessen: der Rahmen ist 1200 px breit, daneben bleiben bei 1440 px
     je 120 px frei, bei 1200 px und darunter nichts. Die Schwelle 1330 px ist genau
     der Punkt, ab dem ein 48-px-Pfeil samt Abstand hinauspasst
     ((100vw - 1200) / 2 >= 48 + var(--space-3)).
     Darunter bleibt es beim Innenabstand: Ein Pfeil ausserhalb waere dort
     ausserhalb des Bildschirms. */
  @media (min-width:1330px){
    .reihe-huelle.hat-pfeile{padding-inline:0}
    .reihe-pfeil--links{left:calc(-48px - var(--space-3))}
    .reihe-pfeil--rechts{right:calc(-48px - var(--space-3))}
  }
  .reihe-pfeil[hidden]{display:none}
}
@media (max-width:819px){ .reihe-pfeil{display:none} }

/* Verbindung zwischen den Karten — nur wenn sie nebeneinander stehen */
@media (min-width:820px){
  .ablauf-schritt::after{content:"";position:absolute;top:calc(var(--space-5) + 22px);
    left:100%;width:var(--gap-card);height:2px;background:var(--border-strong)}
  .ablauf-schritt:last-child::after{display:none}
  /* Im Slider stehen ALLE Karten in einer Zeile - dort verbindet die Linie
     durchgehend, und die Ausnahme fuer das Zeilenende faellt weg. */
  .ablauf-grid.ist-slider>.ablauf-schritt::after{display:block}
  .ablauf-grid.ist-slider>.ablauf-schritt:last-child::after{display:none}
}

/* ── 13 FAQ ── natives <details>: Antworten stehen ohne JS im DOM, also lesbar für
   Google (FAQ-Snippet) und für Screenreader. Kein Accordion-Skript nötig. */
.faq-sec{padding-block:var(--section-y)}
/* Inhalt + mitlaufende Seitenspalte — ZWEITES dokumentiertes Spaltenmuster neben dem
   1:1-Zwei-Spalter: eine Fragenliste braucht mehr Breite als eine Personenkarte.
   Nur hier erlaubt, damit nicht jede Sektion ihr eigenes Verhältnis erfindet. */
/* (frueher 5fr/7fr mit Personenkarte links - seit 02.10.2026 eine mittige Spalte, siehe oben) */
.faq-grid{display:block;max-width:800px;margin-inline:auto}
/* WICHTIG: die Spalte muss volle Höhe behalten (kein align-items:start), sonst hat
   das klebende Element keinen Weg zum Wandern. Sticky sitzt auf der KARTE, nicht
   auf der Spalte — die Spalte ist nur der Laufweg. */
@media (min-width:900px){.pcard{position:sticky;top:100px}}
/* Bewusst KOMPAKT (Foto neben dem Namen, nicht darüber): eine hohe Karte hat im
   Sticky kaum Weg — sie war fast so hoch wie die Fragenliste und stand damit still. */
.pcard{background:var(--surface);
  border-radius:var(--radius);padding:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-3)}
.pcard-head{display:flex;align-items:center;gap:var(--space-4)}
.pcard-photo{flex:0 0 auto;width:76px}
.pcard-photo .ph{border-radius:var(--radius)}
.pcard-head h3{font-size:var(--fs-body)}
.pcard-role{font-size:var(--fs-small);color:var(--text-secondary);margin-top:2px}
.pcard-text{font-size:var(--fs-small);color:var(--text-secondary);line-height:1.5}
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
/* Die FAQ-Zeile ist ein BEDIENelement — man muss sehen, wo man tippen kann. Sie trug
   dafuer frueher einen Rahmen; der ist auf Nutzer-Vorgabe 2026-08-28 raus („hier keine
   Umrandungen"), die Zeile wird jetzt allein von ihrer FLAECHE getragen. Damit haengt
   die Lesbarkeit am Flaechenkontrast: --surface muss sich vom Sektionsgrund abheben.
   Liegen beide zu nah beieinander (ein System mit #f7f7f7 auf Weiss = 1,05:1), loest
   sich die Zeile auf und uebrig bleibt loser Text — dann in DIESEM System einen
   kraeftigeren --surface-Ton waehlen, KEINEN Rahmen zurueckholen.
   Der geoeffnete Zustand wird vom gedrehten Pfeil und dem sichtbaren Text getragen,
   nicht mehr von einer Rahmenfarbe. */
.faq{background:var(--surface);
  border-radius:var(--radius);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  font-family:var(--font-display);font-weight:var(--fw-heading);font-size:var(--fs-body);
  color:var(--heading);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.faq summary svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--heading);fill:none;
  stroke-width:2;transition:transform var(--dur) var(--ease)}
.faq[open] summary svg{transform:rotate(180deg)}
/* Aufklappen per CSS-TRANSITION, ohne eine einzige Hoehe zu rechnen.
   Die Huelle ist ein Raster mit EINER Zeile: 0fr = keine Hoehe, 1fr = die Hoehe des
   Inhalts. Zwischen diesen beiden Werten kann der Browser selbst ueberblenden - wir
   muessen `scrollHeight` nie lesen.
   Warum das wichtig ist: die vorige Fassung animierte die Hoehe per Skript und las
   dafuer `scrollHeight` direkt nach dem Setzen von `open`. Dieses Lesen erzwingt
   mitten im Bild ein Zwischen-Layout, und die Bewegung startete sichtbar abgehackt.
   Jetzt setzt das Skript nur noch eine Klasse; die Bewegung gehoert dem Browser. */
/* overflow:hidden gehoert an die HUELLE, nicht nur an den Inhalt: bei 0fr ist die
   Rasterzeile zwar 0 hoch, das Innenpolster der Antwort steht aber weiter darunter -
   zugeklappt blieben dadurch 16 px sichtbar (gemessen 2026-08-27) und die Bewegung
   begann nicht bei null. */
.faq-huelle{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;
  transition:grid-template-rows var(--dur-lang,.28s) var(--ease)}
.faq.ist-offen .faq-huelle{grid-template-rows:minmax(0,1fr)}
/* min-height:0 ist bei Rasterzellen noetig, sonst weigert sich die Zelle zu schrumpfen. */
.faq-a{padding:0 var(--space-5) var(--space-4);color:var(--text-secondary);max-width:70ch;overflow:hidden;min-height:0}

/* ── ZEITSTRAHL ── Linie in der Mitte, Karten abwechselnd ───────────────────
   Die Ereignisse sind echte Karten - dieselben Werte wie .blog-card und
   .stelle-card: --surface als Flaeche, --radius, --space-4 Innenrand, h3 auf
   --fs-h3, Fliesstext auf --fs-small in --text-secondary, die Jahreszahl wie
   .blog-thema als Kleinschrift in --accent-ink. Eine Karte, die anders
   aussieht als die Karten daneben, liest sich als anderes Bauteil.

   Der Text steht IMMER linksbuendig, auch in der linken Spalte. Rechtsbuendiger
   Fliesstext zwingt das Auge, jede Zeile neu zu suchen - der Zugewinn an
   Symmetrie kostet mehr, als er bringt. Die Abwechslung macht die Spalte, nicht
   die Ausrichtung.

   Die Linie besteht aus ZWEI Elementen: einer grauen Schiene ueber die volle
   Hoehe und einer farbigen Fuellung darueber. Ein Verlauf koennte das nicht -
   ein Verlauf hat keine Position, nur Farben.

   Auf dem Handy steht die Linie links und alle Karten rechts davon. Bei
   abwechselnden Seiten muesste das Auge auf jeder Stufe die Spalte wechseln -
   auf 375 px sind das zwoelf Spruenge fuer sechs Punkte. */
.zeit-sec{padding-block:var(--section-y)}
.zeit{list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative}

/* Schiene und Fuellung als PSEUDO-Elemente, kein <span> in der Liste: dort
   duerfen nur <li> stehen, und als erstes Kind haette es nth-child verschoben. */
.zeit::before,.zeit::after{content:"";position:absolute;left:11px;width:2px;
  border-radius:1px}
/* Die Linie beginnt am ERSTEN Punkt und endet am LETZTEN - nicht an den
   Kanten der Liste. Ein Strich davor und danach behauptet einen Zeitraum, den
   die Seite nicht zeigt (Nutzer-Vorgabe 2026-09-01).
   Oben ist das statisch: --space-4 (Abstand des Punktes von oben) + 11px
   (halber Punkt) + --border-w-2 - box-sizing ist content-box, der Rand zaehlt
   also mit. Unten setzt das Skript --zeit-unten auf den Abstand von der
   Listenunterkante zur Mitte des letzten Punktes; ohne Skript bleibt 0 und die
   Linie laeuft wie bisher durch, statt zu verschwinden. */
.zeit::before{top:calc(var(--space-4) + 11px + var(--border-w-2));
  bottom:var(--zeit-unten,0px);background:var(--border-strong)}
/* KEIN transition auf der Hoehe. Die Fuellung wird jetzt bei jedem Bild neu
   gesetzt und laeuft mit dem Scrollen mit - ein Uebergang von 280 ms wuerde ihr
   dabei staendig hinterherlaufen und traege wirken. Ein Uebergang lohnt nur,
   wenn ein Wert SPRINGT; hier springt nichts mehr. */
.zeit::after{top:calc(var(--space-4) + 11px + var(--border-w-2));height:var(--fortschritt,0px);background:var(--accent)}

.zeit-punkt{position:relative;padding-left:var(--space-6);
  padding-bottom:var(--space-6)}
.zeit-punkt:last-child{padding-bottom:0}
/* Der Punkt traegt den Grund der Sektion, damit die Schiene nicht durch ihn
   hindurchscheint. */
.zeit-punkt::before{content:"";position:absolute;left:0;top:var(--space-4);
  width:22px;height:22px;border-radius:50%;z-index:1;
  background:var(--bg);border:var(--border-w-2) solid var(--border-strong);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.zeit-punkt.ist-erreicht::before{border-color:var(--accent);background:var(--accent)}

.zeit-karte{background:var(--surface);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;text-align:left}
.zeit-bild .ph{border-radius:0}
.zeit-body{padding:var(--space-4) var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-2)}
.zeit-meta{margin:0;font-size:var(--fs-eyebrow)}
.zeit-jahr{font-family:var(--font-sans);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-klein);text-transform:uppercase;color:var(--accent-ink)}
.zeit-karte h3{margin:0;font-size:var(--fs-h3)}
/* :not(.zeit-meta) ist noetig: .zeit-karte p hat eine hoehere Spezifitaet als
   .zeit-meta und hat die Jahreszahl auf --fs-small gezogen - gemessen 14,5 px
   statt 13. Zwei Regeln, von denen die spezifischere zufaellig die allgemeinere
   ist, sind ein Fehler, der nur im Browser auffaellt. */
.zeit-karte p:not(.zeit-meta){margin:0;color:var(--text-secondary);
  font-size:var(--fs-small)}

@media (min-width:860px){
  /* Zwei Spalten: die Linie wandert in die Mitte, die Karten stehen abwechselnd
     links und rechts. Die mittlere Spalte ist der Streifen, in dem Linie, Punkt
     und der kurze Steg zur Karte liegen. */
  .zeit::before,.zeit::after{left:50%;transform:translateX(-50%)}
  .zeit-punkt{padding-left:0;display:grid;
    grid-template-columns:1fr var(--space-7) 1fr;align-items:start}
  .zeit-punkt::before{left:50%;transform:translateX(-50%);top:var(--space-4)}
  .zeit-punkt>.zeit-karte{grid-column:1}
  .zeit-punkt:nth-of-type(even)>.zeit-karte{grid-column:3}
  /* Der Steg verbindet Karte und Punkt. Ohne ihn schwebt die Karte neben der
     Linie, seit sie eine eigene Flaeche hat - vorher lief der Text optisch in
     die Linie hinein und stellte die Verbindung selbst her. */
  .zeit-punkt::after{content:"";position:absolute;top:calc(var(--space-4) + 10px);
    width:calc((var(--space-7) - 22px) / 2);height:2px;
    background:var(--border-strong)}
  .zeit-punkt::after{right:calc(50% + 11px)}
  .zeit-punkt:nth-of-type(even)::after{right:auto;left:calc(50% + 11px)}
  .zeit-punkt.ist-erreicht::after{background:var(--accent)}
}

/* ── BLOG ── Beitragskarten: Bild, Thema, Datum, Titel, Knopf ───────────────
   Reihenfolge auf der Karte ist nicht Geschmack. Das Bild holt den Blick, dann
   kommt die EINORDNUNG (Thema und Datum) und erst danach der Titel. Wer den
   Titel zuerst liest und dann feststellt, dass der Beitrag von 2019 ist oder
   ein anderes Thema behandelt, hat umsonst gelesen - und genau dieses Gefuehl
   kostet den zweiten Klick.

   Das Datum steht als <time datetime="..."> da, nicht als Text. Nur so ist es
   maschinell lesbar; "12. Mai" allein ist fuer eine Suchmaschine eine
   Zeichenkette. Ein Ratgeber ohne erkennbares Datum wirkt ausserdem alt, auch
   wenn er neu ist.

   Der Knopf steht unten auf gemeinsamer Linie - .blog-card h3 traegt flex:1,
   dieselbe Regel wie bei .ill-card p und .stelle-anf. Ohne sie haengt der Knopf
   an der laengsten Ueberschrift und die Reihe sieht verrutscht aus. */
.blog-sec{padding-block:var(--section-y)}
.blog-grid{display:grid;gap:var(--gap-card);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .blog-grid{grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr))}
}
.blog-card{display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--radius);overflow:hidden}
.blog-body{padding:var(--space-4) var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);flex:1}
/* Thema und Datum in EINER Zeile, das Datum rechts. Untereinander waeren es
   zwei Zeilen Kleinschrift ueber dem Titel - das liest sich wie ein Vorspann
   und nimmt der Ueberschrift den Auftritt. */
.blog-meta{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);font-size:var(--fs-eyebrow);margin:0}
.blog-thema{font-weight:var(--fw-semibold);letter-spacing:var(--ls-klein);
  text-transform:uppercase;color:var(--accent-ink)}
.blog-datum{color:var(--text-muted);white-space:nowrap}
.blog-card h3{margin:0;font-size:var(--fs-h3);flex:1}
.blog-card .btn{margin-top:var(--space-1)}

/* ── STELLEN ── Karten mit Anforderungen, Bewerbung im Dialog ───────────────
   Anders als eine Leistungskarte traegt sie KEINEN Werbetext, sondern die
   Anforderungen im Klartext. Das ist Absicht: wer sie liest und sich trotzdem
   meldet, hat sich schon selbst gepruefte - und wer sie nicht erfuellt, bewirbt
   sich gar nicht erst. Beides spart dem Betrieb Gespraeche. Ein Absatz
   Fliesstext ueber "spannende Aufgaben in einem dynamischen Team" leistet das
   nicht.

   Die Anforderungsliste traegt flex:1, damit die Knoepfe aller Karten auf einer
   Linie stehen - dieselbe Regel wie bei .ill-card p. Ohne sie haengt der Knopf
   an der laengsten Liste und die Reihe sieht aus wie verrutscht. */
.stelle-sec{padding-block:var(--section-y)}
.stelle-grid{display:grid;gap:var(--gap-card);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .stelle-grid{grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr))}
}
.stelle-card{display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--radius);overflow:hidden}
.stelle-body{padding:var(--space-4) var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.stelle-body h3{margin:0}
.stelle-anf-titel{margin:0;font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--heading)}
.stelle-anf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-2);font-size:var(--fs-small);color:var(--text-secondary);flex:1}
.stelle-anf li{display:flex;gap:var(--space-2);align-items:flex-start}
.stelle-anf svg{width:16px;height:16px;flex:0 0 auto;margin-top:4px;fill:none;
  stroke:var(--positive);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Die Zeile unter dem Knopf nennt den Aufwand, nicht den Nutzen. "In unter
   60 Sekunden" beantwortet die Frage, die jemanden vom Klicken abhaelt: wie
   lange haelt mich das jetzt auf. */
.stelle-tat{margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.stelle-note{margin:0;text-align:center;font-size:var(--fs-small);color:var(--text-muted)}

/* Der Bewerbungsdialog. Er zeigt dasselbe Formular wie der Hero - gleiche
   Kacheln, gleiche Schrittanzeige - nur je Stelle mit anderen Fragen. Das ist
   kein Zufall, sondern der Grund fuer .hero-form im Dialog: wer die Strecke auf
   der Startseite einmal gesehen hat, erkennt sie hier wieder und muss nicht
   ueberlegen, was von ihm erwartet wird.

   Als echtes <dialog>, nicht als eigener Overlay-Nachbau: Escape, Fokusfalle
   und das Aussperren der Seite dahinter bringt der Browser mit. Jeder
   Eigenbau davon vergisst mindestens einen der drei Punkte. */
.stelle-dlg{width:min(520px,calc(100vw - 2 * var(--gutter)));max-height:min(90svh,780px);
  border:0;padding:0;border-radius:var(--radius);background:transparent;overflow:visible}
/* Der Hintergrund wird weichgezeichnet, nicht nur abgedunkelt (Nutzer-Vorgabe
   31.08.2026). Reines Abdunkeln laesst die Seite dahinter lesbar - das Auge
   springt weiter zwischen Formular und Text darunter. Unscharf ist sie als
   Flaeche noch da, aber nicht mehr als Inhalt, und der Blick bleibt im Kasten.
   Die Abdunklung faellt deshalb schwaecher aus: beides zusammen auf voller
   Staerke waere eine schwarze Wand.
   -webkit- ist kein Altlast-Vorsatz, sondern in Safari bis heute die einzige
   Schreibweise, die greift. Ohne sie bleibt der Hintergrund dort scharf - der
   Kasten steht dann auf dem vollen Seiteninhalt. */
.stelle-dlg::backdrop{background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stelle-dlg .hero-form{box-shadow:none;max-height:min(90svh,780px);overflow-y:auto;
  padding-top:var(--space-4)}
/* Mittig (Nutzer-Vorgabe 31.08.2026) - und der Freiraum fuer das Kreuz steht
   auf BEIDEN Seiten. Nur rechts freizuhalten waere die naheliegende Loesung,
   verschoebe die Mitte des Textes aber um genau diesen Betrag nach links: der
   Titel stuende dann sichtbar neben der Mitte der Schrittanzeige darunter. */
.stelle-dlg-kopf{position:relative;text-align:center;
  padding-inline:calc(var(--space-5) + var(--space-3))}
.stelle-dlg-kopf h2{font-size:clamp(19px,2.2vw,22px);margin:0 0 var(--space-1)}
.stelle-dlg-kopf .eyebrow{margin:0 0 var(--space-1)}
.stelle-dlg-zu{position:absolute;top:calc(var(--space-2) * -1);right:calc(var(--space-2) * -1);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--text-secondary);
  cursor:pointer;transition:background var(--dur) var(--ease)}
.stelle-dlg-zu:hover{background:var(--fill)}
.stelle-dlg-zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.stelle-dlg .steps{margin-block:var(--space-4)}
/* Zurueck als Text, nicht als Flaeche: ein zweiter Knopf neben den Antwortkarten
   sieht aus wie eine dritte Antwort. */
.stelle-zurueck{display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-4);border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:var(--fs-small);color:var(--text-secondary)}
.stelle-zurueck:hover{color:var(--heading)}
/* Ohne diese Zeile bleibt der Zurueck-Knopf auf Schritt 1 SICHTBAR: Das
   Skript setzt `hidden`, aber `display:inline-flex` oben schlaegt die
   Browser-Regel `[hidden]{display:none}` - gleiche Klasse von Fehler wie
   `display:flex` auf einem geschlossenen <dialog>. Gemessen am 08.09.2026
   auf /karriere/: der Knopf stand im Popup, bevor es etwas zurueckzugehen
   gab, und ein Klick darauf tat nichts. */
.stelle-zurueck[hidden]{display:none}
.stelle-zurueck svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── 14 CTA-BAND ── schmales Akzentband zwischen zwei Sektionen. Ein Ziel, ein Weg. ── */
/* Wer den Grund setzt, setzt auch die AKZENT-Schrift. Bis 03.09.2026 fehlte hier
   --accent-ink: das Band schrieb --heading auf Weiss um, aber nicht die Rolle, an
   der .hl, .subhead, Pflicht-Sterne und Textknoepfe haengen. Ein .hl stand deshalb
   auf einem Marken-Band in der Akzentfarbe auf der Akzentfarbe - bei HSE rot auf
   Navy, 2,52:1. Der Fehler war unsichtbar, solange kein .hl im Band stand. */
.cta-band{background:var(--cta-band-bg);color:var(--cta-band-fg);padding-block:var(--section-y-sm);
  --text:var(--accent-fg);--text-secondary:var(--accent-fg);--text-muted:var(--accent-fg);
  --heading:var(--accent-fg);--accent-ink:var(--accent-fg)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-5) var(--gap-split)}
.cta-band h2{color:var(--cta-band-fg)}
.cta-band p{color:var(--cta-band-fg);opacity:.86;margin-top:var(--space-2);max-width:60ch}
/* Auf farbiger Fläche ist Weiß der stärkste Button — Akzent auf Akzent verschwindet */
.cta-call{--_bg:#fff;--_fg:var(--ink-h);--_bd:#fff;--text:var(--ink);--heading:var(--ink-h);--_bgh:var(--bg-alt);
  gap:var(--space-3);flex:0 0 auto}
.cta-call .ico{width:34px;height:34px;border-radius:50%;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cta-call .ico svg{width:17px;height:17px;fill:#fff}
.cta-call .num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3)}
/* Zweite Rolle auf dem Band: ein normaler Knopf, wenn die Handlung KEIN Anruf ist
   (Stellen ansehen, Katalog laden, Termin buchen). .cta-call bleibt dem Telefon
   vorbehalten — dessen grosse Ziffern-Typo laesst jeden anderen Text wie eine
   Ueberschrift aussehen, nicht wie einen Knopf. */
.cta-btn{--_bg:#fff;--_fg:var(--ink-h);--_bd:#fff;--_bgh:var(--bg-alt);
  --text:var(--ink);--heading:var(--ink-h);flex:0 0 auto}

/* Abschluss-CTA: dasselbe Band, aber direkt auf der Fusszeile. Es ist die
   letzte Flaeche vor dem Seitenende und faengt die ab, die durchgescrollt haben,
   ohne sich zu entscheiden.

   Der Ton MUSS sich von der Fusszeile unterscheiden. Zwei dunkle Flaechen
   direkt uebereinander verschmelzen zu einer - dann liest sich der CTA als
   Kopfzeile der Fusszeile und nicht mehr als Angebot, und der Knopf steht
   scheinbar mitten im Kleingedruckten. Deshalb traegt er den Akzentton und die
   Fusszeile bleibt der tiefste: eine erkennbare Stufe nach unten statt einer
   durchgehenden dunklen Wand. Wer den Akzent hier auf --bg-dark setzt, hebt die
   Trennung auf - die Abnahme meldet das.

   Kein Abstand nach unten und keine Rundung: das Band SOLL die Fusszeile
   beruehren. Es gehoert zum Abschluss, es steht nicht davor. */
.cta-band--fuss{background:var(--accent);--cta-band-bg:var(--accent)}
.cta-band--fuss + .site-footer{margin-top:0}

/* ── 15 KONTAKT-SPLIT ── Bild + Formular als ein Block, gleiche Bauweise wie Sektion 4 ── */
.kontakt-sec{padding-block:var(--section-y)}
.kontakt{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  border-radius:var(--radius);overflow:hidden}
@media (min-width:900px){.kontakt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kontakt-media{min-height:260px}
.kontakt-media .ph{height:100%;aspect-ratio:auto;border-radius:0;border:0}
.kontakt-sec{padding-block:var(--section-y-sm)}
.kontakt-body{background:var(--surface);padding:clamp(20px,2.6vw,34px);
  display:flex;flex-direction:column;gap:var(--space-3)}
.kontakt-body>p{color:var(--text-secondary)}
/* Verfügbarkeits-Punkt gehört auf die Nummer-Zeile, nicht darunter: er sagt etwas
   ÜBER die Nummer und wirkt als eigene Zeile wie eine zweite Aussage. */
.kontakt-tel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);color:var(--text)}
.kontakt-tel a{color:var(--accent-ink);font-weight:var(--fw-bold);font-size:var(--fs-h3);
  font-family:var(--font-display)}
.k-when{font-size:var(--fs-small);color:var(--text-secondary)}
.kontakt-tel a:hover{color:var(--brand)}
/* Formular-Raster: volle Zeile / ZWEI Felder nebeneinander / volle Zeile.
   Vorher spannte `.kform>.field` ALLE Felder über beide Spalten — dadurch stand
   das Formular als vier gestapelte Zeilen da und war unnötig hoch. */
.kform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
/* Datenschutz-Einwilligung ist PFLICHT in jedem Formular — nie weglassen,
   auch nicht im Entwurf. Sie gehört über den Absende-Button, nicht darunter. */
.kform>.field--wide,.kform>.btn,.kform>.consent,.kform>.form-trust{grid-column:1/-1}
/* Vertrauens-Zeile: Antwortzeit, Verbindlichkeit, Datenumgang. Im Hero-Formular
   entfaellt sie (die Aussage steht dort unter dem Haupt-Knopf, siehe .hero-note);
   im Kontakt-Formular bleibt sie Pflicht — ohne sie raet der Nutzer, was nach dem
   Klick passiert, und genau dort bricht er ab. */
.form-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;text-align:center;
  gap:4px var(--space-4);font-size:var(--fs-eyebrow);color:var(--text-secondary)}
.form-trust li{display:inline-flex;align-items:center;gap:6px}
.hero-form .form-trust{margin-top:var(--space-1)}
.form-trust svg{width:13px;height:13px;flex:0 0 auto;stroke:var(--positive);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Kurzfelder bleiben auch auf dem Handy nebeneinander — erst unter 380px stapeln.
   Jedes gestapelte Feld kostet ~63px, das summiert sich auf dem Handy zu Scrollweg. */
@media (max-width:379px){.kform{grid-template-columns:minmax(0,1fr)}}
/* Mobil: Überschrift und erstes Feld müssen GEMEINSAM ins Bild passen — sonst tippt
   man in Felder, ohne zu wissen wofür. Dafür Bild kleiner, Abstände enger, Felder flacher. */
@media (max-width:600px){
  .kform{gap:10px}
  /* Beschreibungssatz entfaellt mobil: Ueberschrift und Telefonzeile sagen bereits,
     wofuer das Formular da ist — der Satz kostet nur Scrollweg vor dem ersten Feld. */
  .kontakt-body>p:not(.kontakt-tel){display:none}
  .kontakt-body .col-head{margin-bottom:0}
  .kontakt-body .col-head .eyebrow{margin-bottom:var(--space-1)}
  /* height statt min-height: der Platzhalter trägt ein INLINE aspect-ratio, das jede
     Stylesheet-Regel schlägt. Erst eine feste Höhe am Container macht height:100%
     im Bild auflösbar — sonst rechnet es sein Seitenverhältnis aus und wird doppelt hoch. */
  .kontakt-media{height:132px;min-height:0}
  .split-media{height:200px;min-height:0}
  .geo2-map{height:200px;min-height:0}
  /* rows="3" setzt eine Eigenhöhe — die muss überschrieben werden, nicht nur min-height */
  .kform textarea{height:58px;min-height:0}
  .kontakt-body{padding:var(--space-4);gap:var(--space-3)}
  .kontakt-body .col-head{margin-bottom:0}
  .field input,.field textarea{padding:13px 12px 4px}
  .field label{top:11px}
  .field input:focus~label,.field input:not(:placeholder-shown)~label,
  .field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{top:3px}
}
.kform textarea{min-height:76px;resize:vertical}

/* ── 16 MERKMAL-RASTER ── dunkel, viele Kurzaussagen auf einmal. Kein Kasten je Punkt:
   16 Rahmen ergäben ein Gitter aus Kästen statt einer lesbaren Liste. */
.cgrid-sec{background:var(--bg-accent);--surface:var(--bg);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y)}
/* Diese beiden Sektionen sind eigenständige INHALTS-Sektionen — die Liste ist hier
   der Inhalt, nicht Beiwerk in einem Textblock. Deshalb die größere Textstufe und
   mobil eine Spalte; die kleine Stufe bleibt den Listen INNERHALB von Textblöcken
   (.check-grid) vorbehalten. Obergrenzen: 12 Punkte im vierspaltigen Raster (16),
   9 in der dreispaltigen Liste (17). Darüber wird nur noch überflogen. */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card) var(--gap-split)}
@media (min-width:560px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cgrid{grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr))}}
.citem{display:flex;align-items:flex-start;gap:var(--space-3);
  font-size:var(--fs-body);line-height:1.45;color:var(--on-accent-soft)}
.citem strong{color:var(--on-accent);font-weight:var(--fw-semibold)}
/* Kreis-Umriss statt gefüllter Fläche: 16 gefüllte Marker würden die Fläche zerhacken */
.citem-ico{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-pill);
  border:var(--border-w) solid rgba(255,255,255,.45);
  display:inline-flex;align-items:center;justify-content:center;
  /* (30 - 17·1.5)/2 ≈ -0.75 → Kreis sitzt mittig zur ersten Textzeile */
  margin-top:-1px}
.citem-ico svg{width:14px;height:14px;stroke:var(--on-accent);fill:none;stroke-width:var(--icon-stroke);
  stroke-linecap:round;stroke-linejoin:round}

/* ── 17 MERKMAL-LISTE mit Icons ── hell, dreispaltig, ein zentrierter Abschluss-Button ── */
.feat-sec{background:var(--bg-alt);padding-block:var(--section-y);--surface:var(--bg)}
.feat{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card) var(--gap-split)}
@media (min-width:560px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fitem{display:flex;align-items:center;gap:var(--space-4);
  font-size:var(--fs-body);line-height:1.45;color:var(--text)}
.fitem-ico{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.fitem-ico svg{width:100%;height:100%;stroke:var(--accent);fill:none;stroke-width:calc(var(--icon-stroke) * .6)}
/* Ein einziger Abschluss-Button, mittig unter der Liste — nicht je Punkt einer */
.feat-cta{display:flex;justify-content:center;margin-top:var(--head-mb)}

/* ── 18 REFERENZEN ── gleiche Kartensprache wie Sektion 3/7 (heller Grund, Rahmen,
   Text UNTER dem Bild). Eigen sind nur zwei Dinge: die Bildergalerie oben und die
   Faktenzeile — ein Projekt zeigt sich selten in einem Foto, und ohne Ort/Umfang/Jahr
   ist eine Referenz Dekoration statt Beleg. */
.ref-sec{padding-block:var(--section-y)}
/* Unter 600px NICHT stapeln, sondern wischen: drei gestapelte Karten sind zwei
   Bildschirme hoch, nebeneinander bleibt der Vergleich zwischen Projekten möglich.
   Die angeschnittene nächste Karte ist die Wisch-Einladung. */
.ref-grid{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.ref-grid::-webkit-scrollbar{display:none}
.ref-grid>.ref{flex:0 0 78%;scroll-snap-align:start}
/* Ausbruch NUR im Streifen-Zustand: ab 600px wird daraus ein Raster, dort wuerde
   der negative Aussenabstand die rechte Spalte an die Bildschirmkante schieben. */
@media (max-width:599px){.ref-grid{margin-inline:calc(var(--gutter) * -1);
  padding-left:var(--gutter);padding-right:var(--gutter);scroll-padding-left:var(--gutter)}}
@media (min-width:600px){
  .ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .ref-grid>.ref{flex:none}
}
/* Spaltenzahl je Seite steuerbar: die Startseite zeigt drei Auszuege, eine
   Referenzseite mit vier Objekten braeuchte sonst 3 + 1 - eine Waise in der
   zweiten Zeile liest sich als Fehler. Nur ab 1000px, darunter bleibt es beim
   Zweispalter bzw. beim Wischen. */
@media (min-width:1000px){.ref-grid{grid-template-columns:repeat(var(--ref-spalten,3),minmax(0,1fr))}}
/* Flaeche statt Rahmen (Nutzer-Vorgabe 2026-08-31). Die Karte nimmt jetzt
   --surface und folgt damit dem Zonen-System: auf weisser Sektion wird sie
   hellgrau, auf grauer Sektion weiss. Vorher war sie fest weiss und brauchte
   deshalb auf weissem Grund einen Rahmen, um ueberhaupt sichtbar zu sein.
   .ref--foto setzt background:transparent und bleibt davon unberuehrt. */
.ref{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--radius);overflow:hidden}
 /* Nur bei TASTATUR-Fokus umranden. Mit :focus-within bekam die ganze Karte nach
   jedem Mausklick auf die Pfeile einen Rahmen — das sieht aus wie ein Fehler. */
.ref:has(:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
/* Galerie: alle Bilder übereinander, nur das aktive sichtbar */
.slides{position:relative;aspect-ratio:16/9}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease)}
.slide[data-on="1"]{opacity:1}
.slide .ph{height:100%;aspect-ratio:auto;border:0;border-radius:0}
/* Dunkler Verlauf am unteren Bildrand: trägt Zähler und Pfeile auf JEDEM Foto —
   ohne ihn wäre weißer Text auf hellen Bildern unlesbar. */
.slides::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;
  pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
/* Bedienung nur im Bild: Zähler links, beide Pfeile zusammen rechts */
.ref-nav{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);pointer-events:none}
.ref-count{pointer-events:none;font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ref-arrows{display:flex;gap:var(--space-2)}
.ref-nav button{pointer-events:auto;width:44px;height:44px;padding:0;cursor:pointer;
  border:0;border-radius:var(--radius-icon);background:rgba(255,255,255,.92);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease)}
.ref-nav button:hover{background:#fff}
.ref-nav button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ref-nav svg{width:14px;height:14px;stroke:var(--heading);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.ref-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.ref-tag{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent-ink)}
.ref-body h3{font-size:var(--fs-body)}
/* Fakten als EINE punktgetrennte Zeile statt Tabelle: spart die halbe Kartenhöhe */
.ref-facts{margin:0;margin-top:auto;padding-top:var(--space-3);
  border-top:var(--border-w) solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);
  font-size:var(--fs-small);color:var(--text-secondary)}
.ref-facts span{display:inline-flex;align-items:center;gap:var(--space-3)}
.ref-facts span+span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;flex:0 0 auto}
.ref-facts b{color:var(--heading);font-weight:var(--fw-semibold)}
/* ── Ausfuehrung „Foto" ── Liegen zu einem Projekt nur Bild, Art und Ort vor, ist der
   Kartenkoerper mit Rahmen und Polster die Verpackung fuer ein Datenblatt, das es
   nicht gibt - genau das liest sich als leere Karte, und die naheliegende Reaktion
   („mehr Text auf die Karte") waere erfunden. Dann traegt das FOTO die Kachel: die
   Beschriftung liegt auf seiner Unterkante, auf dem Verlauf, den `.slides` ohnehin
   dafuer mitbringt, und der Status wird zum gefuellten Bestaetigungs-Chip.
   Kein neues Markup noetig - nur die Klasse `ref--foto` am <article>. */
.ref--foto{border:0;background:transparent}
.ref--foto .slides{aspect-ratio:var(--ref-foto-ar,4/3)}
/* Der Verlauf traegt jetzt zwei Zeilen Text statt eines Zaehlers - er muss hoeher
   und am Fuss dichter sein, sonst haengt die Beschriftung bei hellen Motiven
   (Innenraum, Schnee, Himmel) in der Luft. */
.ref--foto .slides::after{height:60%;background:linear-gradient(to top,
  rgba(0,0,0,.88) 0,rgba(0,0,0,.60) 32%,rgba(0,0,0,.16) 70%,rgba(0,0,0,0) 100%)}
.ref--foto .ref-body{position:absolute;left:0;right:0;bottom:0;z-index:3;
  flex:none;gap:var(--space-2);align-items:flex-start;color:#fff;--heading:#fff}
.ref--foto .ref-body :is(h2,h3){color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* Gefuellte Flaeche statt farbiger Schrift: auf einem Foto ist ein Wort in
   Akzentfarbe nur ein Wort, ein Chip ist ein Stempel. --positive-chip ist genau
   dafuer da („uebernommen / erfuellt") und traegt IMMER weisse Schrift. */
.ref--foto .ref-tag{align-self:flex-start;color:var(--ink-h);background:#fff;
  padding:3px var(--space-2);border-radius:var(--radius)}
/* Karten sind bewusst NICHT verlinkt — die Referenz wirkt hier, nicht auf einer
   Unterseite. Einziger Weg in die Tiefe ist der Button im Sektionskopf. */

/* ── 19 KARTE & KONTAKTDATEN ── Überschrift steht IM Panel (wie Sektion 15), nicht
   als eigene Kopfzeile darüber: ein Block mit zwei Spalten braucht keinen dritten
   Baustein über sich, sonst zerfällt die Sektion optisch in zwei Teile.
   Gleiches Bauprinzip wie Sektion 4 und 15: zwei
   Spalten in EINEM Block, bündig, gleiche Höhe, ein Radius außen. Die Karte trägt
   die Standort-Frage, die Daten daneben beantworten „wie erreiche ich euch". */
.geo2-sec{padding-block:var(--section-y)}
/* Kein Rahmen um den Block (Nutzer-Vorgabe 2026-08-31): Karte und Anschrift
   tragen bereits eigene Flaechen, die sich vom Seitengrund absetzen. Der Rahmen
   legte eine dritte Kante darum und liess den Block wie ein eingebettetes
   Fenster wirken statt wie Teil der Seite. Die Rundung bleibt - sie fasst die
   beiden Flaechen zusammen, ohne sie einzurahmen. */
.geo2{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  border-radius:var(--radius);overflow:hidden}
@media (min-width:900px){.geo2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.geo2-map{min-height:300px;position:relative}
.geo2-map .ph{height:100%;aspect-ratio:auto;border:0;border-radius:0}
/* Eingebettete Karte (Google Maps o. ae.): fuellt denselben Platz wie der Bild-Slot,
   traegt aber kein Seitenverhaeltnis mit sich — deshalb Hoehe ueber die Spalte. */
.geo2-karte{position:relative;min-height:320px;height:100%;border-radius:var(--radius);overflow:hidden}
.geo2-karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:899px){.geo2-karte{min-height:260px}}
.geo2-body{background:var(--surface);padding:clamp(24px,3.4vw,44px);
  display:flex;flex-direction:column;gap:var(--space-4)}
/* Adresse als <address>: semantisch korrekt und ohne Kursiv-Default */
.geo2-adr{font-style:normal;line-height:var(--lh-lead);color:var(--text)}
/* Kontaktwege als Zeilen mit Icon — gleiche Icon-Größe wie überall im Frame */
.geo2-ways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.geo2-ways li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-body)}
.geo2-ways svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-ink)}
.geo2-ways a{font-weight:var(--fw-semibold);color:var(--heading)}
.geo2-ways a:hover{color:var(--accent-ink)}
/* Öffnungszeiten als <dl>: Tag und Zeit gehören zusammen, zwei Spalten statt Tabelle */
.geo2-hours{margin:0;padding-top:var(--space-4);border-top:var(--border-w) solid var(--border-strong);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);font-size:var(--fs-small)}
.geo2-hours dt{color:var(--text-secondary)}
.geo2-hours dd{margin:0;color:var(--heading);font-weight:var(--fw-semibold);text-align:right}
/* Ortsliste unter den Kontaktdaten: die Orte des Einzugsgebiets als echte interne
   Links. Ankertext ist eines der staerksten internen Signale — reiner Text verschenkt es. */
.geo2-orte{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--text-secondary);line-height:1.9}
.geo2-orte a{color:var(--heading);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.geo2-orte a:hover{color:var(--accent-ink)}
.geo2-body .btn{align-self:flex-start;margin-top:var(--space-2)}

/* ── FUSSZEILE ── einziger Ort mit --bg-dark: der tiefste Ton markiert das Seitenende.
   Keine neue Bildsprache — gleiche Tokens, gleiche Abstände wie alle Sektionen. */
.site-footer{background:var(--bg-dark);color:var(--on-dark-soft);--text:var(--on-dark);--text-secondary:var(--on-dark-soft);--text-muted:var(--on-dark-soft);--heading:var(--on-dark);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-split) var(--gap-card)}
/* Schon ab 380px zweispaltig: vier gestapelte Linklisten sind auf dem Handy ein
   endloser Block, nebeneinander bleibt die Fußzeile überschaubar. */
@media (min-width:380px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Marke + Beschreibung bekommen mobil eine EIGENE volle Zeile: als halbe Spalte
   bricht der Beschreibungstext auf fünf Zeilen und drückt die Links nach unten.
   Erst darunter verteilen sich die Linklisten auf zwei Spalten. */
@media (max-width:959px){.footer-brand{grid-column:1/-1}}
@media (min-width:960px){.footer-top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
/* Vier Spalten neben der Marke (Nutzer-Vorgabe 31.08.2026). Erst ab 1200px:
   darunter waeren fuenf Spalten im 1200er-Container je unter 200px breit, und
   die Linkbeschriftungen brechen dann um. Bis dahin bleiben es drei.
   Die Marke schrumpft von 1.5fr auf 1.4fr - sie traegt Anschrift und Zeiten
   und darf nicht so schmal werden wie eine Linkspalte. */
@media (min-width:1200px){/* Hoechstens VIER Spalten (Vorgabe Teil 3). Es waren fuenf: Marke plus vier
   Rubriken - und die vierte war gar keine Rubrik, sondern Telefon, E-Mail
   und Anschrift. Die gehoeren unter die Marke: sie sagen, WER da ist, nicht
   wohin die Website fuehrt. */
  .footer-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.footer-brand .ph{width:var(--logo-w);height:var(--logo-h);aspect-ratio:auto;background:transparent;
  border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.6)}
.footer-brand p{margin-top:var(--space-4);font-size:var(--fs-small);line-height:1.6;max-width:42ch}
.footer-col h2{color:var(--on-accent);font-size:var(--fs-small);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;margin-bottom:var(--space-4)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col a{font-size:var(--fs-small);color:var(--on-accent-soft)}
.footer-col a:hover{color:var(--on-accent);text-decoration:underline;text-underline-offset:3px}
.footer-col li{display:flex;align-items:center;gap:var(--space-3)}
/* Fusszeilen-Icons: color allein reicht NICHT — ein SVG ohne fill/stroke im Markup
   faellt auf SCHWARZ zurueck und ist auf dunklem Grund unsichtbar (real passiert,
   gemessen 1,2:1). Deshalb wird die Zeichenfarbe hier explizit gesetzt:
   Strich-Icons (Umschlag, Kartenpin) ueber stroke, Flaechen-Icons ueber .f. */
.footer-col svg{width:18px;height:18px;flex:0 0 auto;color:var(--on-accent);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* .f markiert ein FLAECHEN-Icon (geschlossene Silhouette, z. B. Telefonhoerer):
   es wird gefuellt statt gestrichelt — als Kontur ergaebe die Silhouette eine
   doppelte Linie. Die Klasse wurde im Markup benutzt, aber nie deklariert. */
svg.f{fill:currentColor;stroke:none}
/* Abschlusszeile: Recht und Urheberrecht, klar getrennt vom Inhalt darüber */
.footer-bottom{margin-top:var(--section-y-sm);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-3) var(--gap-card);font-size:var(--fs-small)}
/* Mobil mittig: links/rechts verteilt zerfällt die Abschlusszeile beim Umbruch in
   zwei versetzte Blöcke — zentriert bleibt sie eine ruhige Schlusszeile. */
@media (max-width:600px){
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center}
  .footer-legal{justify-content:center}
}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin:0;padding:0;list-style:none}
.footer-legal a:hover{color:var(--on-accent);text-decoration:underline;text-underline-offset:3px}

/* ── 20 VERGLEICHSTABELLE ── beantwortet „warum ihr und nicht die anderen".
   Echte <table>, weil es echte Tabellendaten sind (Kriterium × Anbieter). */
.cmp-sec{background:var(--bg-accent);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);padding-block:var(--section-y)}
.cmp-sec .sec-head h2{color:var(--on-accent)}
.cmp-wrap{max-width:900px;margin-inline:auto}
.cmp{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.cmp th,.cmp td{padding:var(--space-4);text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.14)}
.cmp thead th{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--on-accent-soft);padding-block:var(--space-3)}
.cmp tbody th{font-weight:var(--fw-semibold);color:var(--on-accent);width:38%}
.cmp td{color:var(--on-accent-soft)}
/* Die eigene Spalte bekommt eine eigene Fläche — sonst liest sich der Vergleich
   als neutrale Liste statt als Argument. Sie ist die einzige helle Zone hier. */
.cmp .col-us{background:var(--veil);color:var(--on-accent)}
.cmp thead .col-us{color:var(--on-accent);border-radius:var(--radius) var(--radius) 0 0}
.cmp tbody tr:last-child .col-us{border-radius:0 0 var(--radius) var(--radius)}
/* min-width:0 ist Pflicht, sonst schrumpft ein inline-flex nie unter seinen Inhalt
   und schiebt bei 320px die ganze Tabelle über den Rand. */
.cmp-mark{display:inline-flex;align-items:center;gap:var(--space-3);min-width:0;
  overflow-wrap:anywhere}
.cmp-mark svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp .col-us .cmp-mark svg{color:var(--positive)}
.cmp-cta{display:flex;justify-content:center;margin-top:var(--head-mb)}
/* Mobil BLEIBT es eine Tabelle — als Blöcke aufgelöst verliert man den direkten
   Zeilenvergleich, der der ganze Zweck ist. Stattdessen: engere Polster, kleinere
   Schrift, schmale erste Spalte. Werte umbrechen, statt zu scrollen. */
@media (max-width:600px){
  .cmp{font-size:var(--fs-small);table-layout:fixed}
  .cmp th,.cmp td{padding:var(--space-3) var(--space-2);vertical-align:top}
  .cmp thead th{font-size:10.5px;letter-spacing:var(--ls-klein);padding-block:var(--space-2);overflow-wrap:anywhere;hyphens:auto}
  .cmp tbody th{width:38%;font-size:var(--fs-small);hyphens:auto}
  /* Die Werte umbrechen - aber mit Trennstrich statt mitten im Wort. Ohne
     `hyphens` greift allein `overflow-wrap:anywhere` und schneidet hart
     (Vergleichsa | bschluessen); in einer 110-px-Spalte trifft das bei
     deutschen Woertern fast jede Zeile. */
  /* max-width haelt den Wert IN seiner Zelle. `min-width:0` allein reicht bei einem
     inline-flex-Kasten nicht: er behaelt seine Inhaltsbreite und schiebt bei einem
     langen Wort die ganze Seite waagerecht (gemessen 28.08.2026 bei 320 px: 115 px
     Wert in einer 95 px breiten Zelle, Seite 10 px zu breit). Erst mit der Grenze
     greifen Trennstrich und Umbruch darunter ueberhaupt. */
  .cmp-mark{align-items:flex-start;gap:var(--space-2);hyphens:auto;overflow-wrap:break-word;max-width:100%}
  .cmp-mark svg{margin-top:2px;width:14px;height:14px}
}
/* ── AKTIONSLEISTE MOBIL ── liegt fest am unteren Rand: auf dem Handy ist die
   Kopfzeile beim Scrollen weit weg, und der CTA darf nie außer Sicht geraten. */
.cta-bar{display:none}
@media (max-width:939px){
  /* Schwebende Karte statt randbündiger Leiste: mit Abstand zu allen Kanten liest
     sie sich als eigenes Element über dem Inhalt, nicht als abgeschnittene Seite.
     Erscheint erst beim Scrollen (.is-on) — ganz oben steht der Hero-CTA schon da. */
  .cta-bar{position:fixed;z-index:60;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);
    display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:var(--border-w) solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    /* Nicht display, sondern Sichtbarkeit + Verschiebung: display lässt sich nicht
       animieren und die Leiste würde springen. Ruhig von unten hereinfahren. */
    opacity:0;transform:translateY(calc(100% + var(--space-3)));pointer-events:none;
    transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  .cta-bar.is-on{opacity:1;transform:none;pointer-events:auto}
  /* Etwas kleiner als ein Sektions-Button: sie begleitet, sie führt nicht */
  .cta-bar .btn{font-size:var(--fs-small);padding:11px 18px}
  /* Die Zeile UNTER dem Button nimmt das Risiko: Aufwand und Verbindlichkeit.
     Genau dort wird gezögert — nicht vor dem Button, sondern beim Antippen.
     Der Text steht in EINEM <span> neben dem Punkt: lose Teile in diesem
     Flex-Container werden Spalten und verrutschen beim Umbruch (IBUK 2026-09-15). */
  .cta-bar-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
    font-size:var(--fs-eyebrow);color:var(--text-secondary);text-align:center;line-height:1.35}
  .cta-bar-note strong{color:var(--positive);font-weight:var(--fw-semibold)}
  .cta-bar-note .dot{width:7px;height:7px;box-shadow:none}
  /* Platz schaffen, damit die Leiste die Fußzeile nicht überdeckt - IN der Fußzeile, nicht
     am body: dort stand der Platz weiss unter dem dunklen Fuss (Pascal 07.10.2026). */
  .site-footer::after{content:"";display:block;height:132px} /* Leiste ist 106-126 px hoch */
}

/* ── 21 PREIS-GEGENUEBERSTELLUNG ── zweites Vergleichs-Muster neben der Tabelle (20):
   die Tabelle vergleicht MERKMALE, diese Karten vergleichen ZWEI SZENARIEN mit
   Betrag und Posten. Nie beide auf derselben Seite — sie beantworten dieselbe Frage. */
.duo-sec{padding-block:var(--section-y)}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card);align-items:stretch}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--gap-card) var(--space-5)}}
.duo-card{position:relative;border-radius:var(--radius);padding:clamp(20px,2.6vw,32px);
  display:flex;flex-direction:column;gap:var(--space-3)}
/* Flaeche statt Rahmen (Nutzer-Vorgabe 2026-08-31), wie .ref und .ill-card.
   --surface folgt der Zone: weisse Sektion -> hellgraue Karte, graue Sektion
   -> weisse Karte. Die Zielvariante --hi bleibt dunkel, der Kontrast zwischen
   den beiden Karten ist der Sinn der Sektion. */
.duo-card--plain{background:var(--surface)}
/* Die Zielvariante traegt die dunkle Flaeche — der Vergleich soll fuehren, nicht neutral sein */
.duo-card--hi{background:var(--bg-accent);color:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--text-muted:var(--on-accent-soft);--heading:var(--on-accent);--positive:var(--positive-on-dark);--accent-ink:var(--on-accent);margin-top:var(--space-5)}
@media (min-width:900px){.duo-card--hi{margin-top:0}}
.duo-card--hi h3{color:var(--on-accent)}
.duo-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.duo-card--hi .duo-eyebrow{color:var(--on-accent-soft)}
.duo-num{font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(40px,6vw,68px);line-height:1;color:var(--heading)}
.duo-card--hi .duo-num{color:var(--on-accent)}
.duo-text{font-size:var(--fs-small);line-height:1.5;color:var(--text-secondary)}
.duo-card--hi .duo-text{color:var(--on-accent-soft)}
/* Posten als <dl>: Bezeichnung links, Betrag rechts — beide Karten gleich aufgebaut,
   damit die Zeilen zwischen den Karten auf einer Hoehe liegen */
.duo-list{margin:var(--space-2) 0 0;padding-top:var(--space-4);
  border-top:var(--border-w) solid var(--border);
  display:grid;grid-template-columns:1fr auto;gap:var(--space-3) var(--space-4);font-size:var(--fs-small)}
.duo-card--hi .duo-list{border-top-color:rgba(255,255,255,.2)}
.duo-list dt{color:var(--text-secondary)}
.duo-card--hi .duo-list dt{color:var(--on-accent-soft)}
.duo-list dd{margin:0;text-align:right;color:var(--heading);font-weight:var(--fw-semibold)}
.duo-card--hi .duo-list dd{color:var(--positive)}
/* Marke sitzt auf der Kante der Zielkarte und benennt, was sie auszeichnet */
.duo-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--positive-chip);color:#fff;border-radius:var(--radius);
  padding:5px 14px;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);white-space:nowrap}
/* Pfeil nur auf Desktop: mobil stehen die Karten untereinander, dort fuehrt die Reihenfolge */
.duo-arrow{display:none}
@media (min-width:900px){.duo-arrow{display:flex;align-items:center;justify-content:center}
  .duo-arrow svg{width:34px;height:34px;stroke:var(--text-muted);fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}}
.duo-note{margin-top:var(--space-5);text-align:center;font-size:var(--fs-small);color:var(--text-muted)}

/* ── 24 BILD-SLIDES ── ein Streifen, der dauerhaft und gleichmaessig durchlaeuft
   (Nutzer-Vorgabe 2026-08-28). Mechanik 1:1 wie der Bewertungsstreifen: CSS treibt
   an (laeuft im Compositor, bleibt auch auf einem schwachen Telefon fluessig), das
   Skript uebernimmt nur das Wischen am Handy.
   Am Telefon ist der Streifen bewusst KEIN Scroll-Container: ein waagerechter
   Scroll-Container, der sich staendig selbst bewegt, kapert die Wischgeste — beim
   kleinsten Schraegzug scrollt der Streifen statt der Seite. touch-action:pan-y
   laesst dem Fenster die senkrechte Geste, die waagerechte wertet das Skript aus.
   Der Abstand steckt im MARGIN des Bildes, nicht in gap: die Liste liegt doppelt im
   DOM und die Animation laeuft auf -50% — mit gap fehlt einer Periode ein halber
   Abstand, und genau der ist der sichtbare Sprung bei jedem Durchlauf. */
.bslide-sec{padding-block:0;background:var(--bg-alt);--surface:var(--bg)}
/* Nahtloser Bildteppich (Nutzer-Vorgabe 2026-08-28): kein Abstand zwischen den
   Bildern, keine Rundung, kein Abstand vor und nach der Sektion, kein Text — die
   Sektion IST der Streifen. Auch die weiche Ausblendung an den Kanten ist raus:
   sie liess die Bilder am Rand verblassen und widerspricht dem durchgehenden
   Streifen. */
.bslide-row{overflow:hidden}
.bslide-track{display:flex;width:max-content;animation:bslideMove 95s linear infinite}
/* Ohne Abstand ist eine Periode exakt N x Bildbreite — -50% trifft sie auf den
   Pixel. (Mit gap ODER margin waere hier die halbe Luecke zu verrechnen, siehe
   Bewertungsstreifen.) */
/* Die gestrichelte Platzhalter-Kante BLEIBT: ohne sie verschmelzen die gleich
   hellen Platzhalter zu einer Flaeche und man sieht im Wireframe nicht mehr,
   wo ein Bild aufhoert. Nur die Rundung ist weg. */
.bslide-track>.ph{width:max(26vw,300px);margin-right:0;border-radius:0;flex:0 0 auto}
/* Beim Zeigen anhalten: wer ein Bild ansehen will, soll es nicht verfolgen muessen.
   NUR mit echtem Zeiger (hover:hover + pointer:fine): am Telefon bleibt der
   :hover-Zustand nach einem Tippen haften — der Streifen stand dort nach jedem
   Wischen still (gemessen 2026-08-28, animation-play-state blieb paused). */
@media (hover:hover) and (pointer:fine){
  .bslide-row:hover .bslide-track{animation-play-state:paused}
}
.bslide-row:focus-within .bslide-track{animation-play-state:paused}
@keyframes bslideMove{to{transform:translateX(-50%)}}
@media (max-width:899px){
  .bslide-row{touch-action:pan-y}
  .bslide-track{will-change:transform;animation:bslideMove var(--lauf-dauer,95s) linear infinite}
  .bslide-row.ist-gezogen .bslide-track{animation:none}
  .bslide-track>.ph{width:78vw;margin-right:0}
}
@media (prefers-reduced-motion:reduce){.bslide-track{animation:none}}

/* ── 22 BEWERTUNGEN ── bewusst im Google-Look: fremde Autorität wirkt nur, wenn die
   Quelle sofort erkennbar ist. Das G und das Sternen-Gold sind Fremdmarken-Farben und
   werden NICHT auf die Kundenpalette umgefärbt — umgefärbt sähe es nach Eigenlob aus. */
.rev-sec{padding-block:var(--section-y)}
/* EINE Zeile, dafür breiter — auch mobil. Zweizeilig liest sich die Plakette wie
   zwei getrennte Aussagen statt wie eine Bewertung. */
.rev-badge{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:var(--space-3);flex-wrap:nowrap;
  white-space:nowrap;max-width:100%;
  background:var(--bg);border:var(--border-w) solid var(--border);border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-5);box-shadow:var(--shadow-sm);margin-inline:auto}
.rev-badge .sep{width:1px;height:18px;background:var(--border);flex:0 0 auto}
@media (max-width:520px){
  .rev-badge{gap:var(--space-2);padding:10px var(--space-3);font-size:var(--fs-eyebrow)}
  .rev-badge .g{width:18px;height:18px}
  .rev-badge b{font-size:var(--fs-body)}
  .rev-badge .stars svg{width:12px;height:12px}
  .rev-badge .stars{gap:1px}
}
.rev-badge .g{width:22px;height:22px;flex:0 0 auto}
.rev-badge>b{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--heading)}
.rev-badge-sub{font-size:var(--fs-small);color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis}
.rev-badge-sub b{color:var(--heading)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:#fbbc04}
.rev-head{text-align:center;margin:var(--space-5) auto var(--head-mb);max-width:680px}
.rev-head .hl{color:var(--accent-ink)}
/* Wischbar auf jeder Breite: Bewertungen liest man selten alle — die angeschnittene
   nächste Karte zeigt, dass es mehr gibt, ohne die Sektion hoch zu machen. */
/* Läuft gleichmäßig durch: Bewertungen liest man im Vorbeigehen,
   nicht als Liste. Der Streifen ist doppelt befüllt, damit -50% nahtlos schließt. */
/* Weiche Kanten links und rechts: der Streifen soll aus der Fläche kommen und in
   sie zurücklaufen, statt an einer harten Kante abgeschnitten zu wirken.
   mask-image blendet den Inhalt selbst aus — funktioniert auf jedem Hintergrund,
   anders als ein aufgelegter Farbverlauf, der die Sektionsfarbe kennen müsste. */
.rev-row{overflow:hidden;
  /* Die Kante wird in PIXELN geblendet, nicht in Prozent: 7 % sind am Telefon 24 px
     (zu wenig, um etwas zu blenden) und am Schirm 80 px - bei einer 400 px breiten
     Karte also gerade ein Fuenftel. Die angeschnittene Karte blieb dadurch klar
     lesbar und las sich wie ein Darstellungsfehler statt wie ein Laufband.
     Jetzt blendet rund die halbe Kartenbreite. */
  --rev-fade:clamp(40px,12vw,190px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rev-fade),#000 calc(100% - var(--rev-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--rev-fade),#000 calc(100% - var(--rev-fade)),transparent 100%)}
/* Der Abstand steckt im MARGIN der Karte, nicht in gap — sonst springt der Streifen.
   Grund (gemessen 2026-08-27): die Liste liegt doppelt im DOM, die Animation laeuft auf
   translateX(-50%). Mit gap ist der Track 2N Karten + (2N-1) Abstaende breit; die Haelfte
   davon ist N Karten + (N-0,5) Abstaende — also einen HALBEN Abstand zu wenig fuer eine
   volle Periode. Genau dieser halbe Abstand ist der sichtbare Sprung bei jedem Durchlauf.
   Mit margin-right an der Karte ist eine Periode exakt N x (Karte + Abstand) und -50%
   trifft sie auf den Pixel. */
.rev-track{display:flex;width:max-content;
  animation:revMove 70s linear infinite}
.rev-track>.rev-card{margin-right:var(--gap-card)}
@media (max-width:899px){
  /* Bis an den Bildschirmrand: der Streifen soll aus dem Bild heraus- und wieder
     hineinlaufen. Innerhalb der Textspalte brach er 24 px vor dem Rand ab - eine
     Kante mitten in der Flaeche wirkt wie ein Darstellungsfehler. `overflow:hidden`
     ist gesetzt, es entsteht also kein Seitenueberlauf. */
  .rev-row{touch-action:pan-y;margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter)}
  .rev-track{will-change:transform;
    animation:revMove var(--lauf-dauer,70s) linear infinite}
  .rev-row.ist-gezogen .rev-track{animation:none}
  /* KEIN Endabstand an der letzten Karte: der Streifen laeuft endlos um, es gibt
     also keine letzte Karte. Ein Zusatzabstand machte die zweite Haelfte breiter als
     die erste und erzeugte genau den Sprung, den die Verdopplung verhindern soll.
     Der Endabstand gilt fuer Slider mit Anfang und Ende, nicht fuer Laufbaender. */
}
@keyframes revMove{to{transform:translateX(-50%)}}
.rev-card{position:relative;flex:0 0 78vw;max-width:340px;
  background:var(--bg);border:var(--border-w) solid var(--border);border-radius:var(--radius);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
@media (min-width:700px){.rev-card{flex:0 0 42vw;max-width:380px}}
@media (min-width:1100px){.rev-card{flex:0 0 30vw;max-width:400px}}
.rev-top{display:flex;align-items:center;gap:var(--space-3);padding-right:28px}
.rev-ava{width:42px;height:42px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--fill)}
.rev-ava .ph{height:100%;aspect-ratio:auto;border-radius:50%;border:0}
.rev-ava .ph span{display:none}
.rev-name{font-weight:var(--fw-bold);color:var(--heading);font-size:var(--fs-small)}
.rev-meta{font-size:var(--fs-eyebrow);color:var(--text-muted)}
.rev-card>.g{position:absolute;top:var(--space-4);right:var(--space-4);width:18px;height:18px}
.rev-text{font-size:var(--fs-small);line-height:1.55;color:var(--text)}

/* ── MOBILE VERDICHTUNG ── Sektionen, die auf dem Handy über einen Bildschirm laufen,
   werden hier gezielt gekürzt. Grundsatz: Bilder deckeln, Polster halbieren, Zahlen
   kleiner — NICHT Inhalte streichen. Gemessen, nicht geschätzt (Ziel: je ≤ 1 Screen). */
@media (max-width:600px){
  /* Bilder in Zwei-Spaltern deckeln — 4:3 ergibt sonst 265px allein fürs Motiv */
  .proof-fig .ph,.mt-fig>.ph{height:190px;aspect-ratio:auto}
  /* Die Personen-Bilder bleiben hochkant, sonst werden zwei nebeneinander zu Briefmarken */
  .mt-duo{gap:var(--space-2)}
  /* Hero: Auswahlkacheln und Formularpolster sind die größten Posten */
  .tile-svg{width:74px;height:74px}
  .hero-form{padding:14px}
  .opt-tile{padding:var(--space-2)}
  .hero .lead{margin-bottom:var(--space-3)}
  .usp{gap:6px;margin-bottom:var(--space-3)}
  /* Kennzahlen: vier Karten × Mindesthöhe sind zwei Reihen */
  .fact-card{min-height:104px;padding:var(--space-4) var(--space-3)}
  .fact-num{font-size:clamp(26px,7vw,34px)}
  /* FAQ: sieben Fragen × Polster summieren sich am stärksten */
  .faq summary{padding:var(--space-4)}
  .faq-a{padding:0 var(--space-4) var(--space-4)}
  .pcard{padding:var(--space-3)}
  /* Gegenüberstellung: die großen Beträge tragen die Höhe */
  .duo-card{padding:18px;gap:var(--space-2)}
  .duo-num{font-size:34px}
  .duo-list{padding-top:var(--space-3);gap:var(--space-2) var(--space-3)}
  /* Karte & Kontaktdaten */
  .geo2-body{padding:var(--space-4);gap:var(--space-3)}
  .geo2-hours{padding-top:var(--space-3)}
  .split-body{padding:var(--space-5) var(--space-4)}
}
@media (max-width:768px){
  :root{--gutter:18px}
  .hero-form{padding:18px}
  /* Bis an den Bildschirmrand: der Streifen bricht rechts aus dem Container aus,
     links bleibt der normale Seitenrand. Sonst endet die angeschnittene Karte 18px
     vor der Kante und sieht aus wie abgeschnitten statt wie weitergehend. */
  .lz-row{margin-inline:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);scroll-padding-left:var(--gutter)}
  /* Mobil bewusst EINE breite Karte + Anschnitt: bei zwei schmalen Karten bleibt
     vom Bild nichts uebrig, das den Unterschied zwischen den Leistungen zeigt. */
  .lz-card{flex:0 0 82%}
  .fact-card{min-height:140px;padding:var(--space-5) var(--space-3)}
  .icard{padding:var(--space-4) var(--space-3)}
  .video-play{width:62px;height:62px}
  .contact-card{padding:var(--space-4)}
}

/* Ein Slot mit echtem Bild: der Platzhalter-Rahmen (und damit die geprüfte
   Proportion) bleibt, das Bild fuellt ihn randlos. Beim Einsetzen bekommt der
   Slot die Klasse .ph--img, damit Symbol und Beschriftung verschwinden. */
.ph{position:relative;overflow:hidden}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Logos und Siegel werden GEZEIGT, nicht formatfuellend beschnitten - sie tragen
   Schrift bis an den Rand. Muss NACH .ph>img stehen (16.09.2026). */
.seal .ph>img{position:static;width:auto;height:100%;max-width:100%;object-fit:contain}
/* Kachel- und Kartenraster landen bei fluiden Spalten auf Bruchteil-Pixeln. Auf einem
   2x-Schirm blendet die erste/letzte Geraetezeile dann mit dem, was HINTER dem Bild
   liegt — sichtbar als heller Haarstrich an der Oberkante. Der Slot bekommt deshalb
   den Traeger-Ton als Grund statt Transparenz; ein Subpixel-Rest verschwindet damit
   in der eigenen Flaeche statt in der Sektionsfarbe. */
.ph--img{background:var(--fill);border:0}
/* KI-Kennzeichnung an jedem Foto: senkrecht am rechten Bildrand, von unten
   nach oben gelesen. Transparenz gehört zur Sache — wer bearbeitete oder
   erzeugte Bilder zeigt, sagt es dazu, und zwar am Bild selbst und nicht in
   einer Fußnote, die niemand sucht. Bewusst klein und zurückhaltend: Der
   Hinweis soll auffindbar sein, nicht das Motiv überlagern. */
.ph{container-type:inline-size}
.ph--img::after{content:none}
/* Ab dieser Breite ist der Slot bei üblichen Seitenverhältnissen hoch genug,
   dass der ganze Satz hineinpasst. Darunter bliebe nur ein abgeschnittenes
   Fragment stehen — schlechter als gar kein Hinweis. */
@container (min-width: 330px){
.ph--img::after{content:"Mit Liebe und KI bearbeitet oder erstellt";
  position:absolute;right:3px;bottom:7px;writing-mode:vertical-rl;
  transform:rotate(180deg);font-size:9px;line-height:1;letter-spacing:.02em;
  color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.55);
  pointer-events:none;user-select:none;max-height:calc(100% - 14px);
  overflow:hidden;white-space:nowrap}}
/* Logos, Siegel und Auszeichnungen werden eingepasst, nicht bearbeitet —
   dort wäre der Hinweis schlicht falsch. */
/* Echte Fotos tragen den KI-Hinweis NICHT - er waere dort eine Falschangabe.
   Die Klasse wird nur gesetzt, wo ein Bild nachweislich vom Kunden stammt. */
.ph--echt::after{content:none!important}
.ph--contain::after,.siegel .ph--img::after{content:none}

.tile .ph--img,.tile-img{background:var(--brand)}
/* Fotos fuellen den Slot randlos (cover). LOGOS und SIEGEL duerfen dagegen NIE
   beschnitten werden — ein angeschnittenes Fremdlogo ist ein Fehler, kein Zuschnitt.
   Solche Slots bekommen zusaetzlich .ph--contain: das Bild wird eingepasst und
   behaelt Luft zum Rand. Gilt fuer Siegel, Wortmarken, Kammer-/Verbandslogos,
   Partner- und Zahlungslogos. */
.ph--contain>img{object-fit:contain;padding:var(--space-2)}
/* Logo-Slots: das Logo steht auf der Flaeche der Kopf-/Fusszeile, nicht in einem
   hellen Kasten. Ohne diese Regel legt .ph--img eine --fill-Flaeche dahinter und
   das eingepasste Logo bekommt einen sichtbaren Rahmen. */
.brand .ph--img,.mnav-top .ph--img,.footer-brand .ph--img{background:transparent;border:0}
.brand .ph--contain>img,.mnav-top .ph--contain>img,.footer-brand .ph--contain>img{padding:0}
/* Im Siegelband bestimmt die Bandhoehe die Groesse — dort keine zusaetzliche
   Einrueckung, sonst schrumpft das Logo zweimal. */
.seal .ph--contain>img{padding:0}
.ph--img>svg,.ph--img>span{display:none}

/* ALLE Knoepfe tragen denselben Radius — auch mehrzeilige (Nutzer-Vorgabe
   2026-08-27: "alles einheitlich aus einem Guss"). Das loest die Regel vom
   2026-08-18 ab, nach der ein umbrechender Knopf auf den normalen Radius wechselte:
   Auf dem Handy brachen einzelne Beschriftungen um und andere nicht — auf einer
   Seite standen dadurch runde und eckige Knoepfe nebeneinander (gemessen bei 390px:
   Radius 999 und 3 gemischt). Eine Sichel an einem einzelnen Knopf faellt weniger
   auf als zwei verschiedene Knopfformen in derselben Ansicht.
   Der richtige Hebel gegen Sicheln ist die KURZE Beschriftung, nicht der Radius —
   siehe references/bauteile.md, "Knopf-Beschriftungen brechen nicht um".
   Auswahlkacheln (.opt-tile) sind keine Knoepfe in diesem Sinne und tragen
   weiterhin den Systemradius. */

/* Sehr flache Bildformate ergeben auf schmalen Schirmen kein Motiv mehr: 2:1 wird
   auf 350px Breite zu einem 175px-Streifen, in dem nichts mehr erkennbar ist.
   Deshalb mobil auf ein hoeheres Format anheben. Die Slots tragen ihr Format als
   INLINE-Attribut — nur mit !important zu ueberstimmen. Ausgenommen sind Slots,
   die ihre Hoehe ohnehin vom Container bekommen. */
@media (max-width:700px){
  .ph[style*="2/1"]{aspect-ratio:3/2 !important}
  .ph[style*="16/9"]{aspect-ratio:4/3 !important}
  .beleg-bild .ph{aspect-ratio:16/9 !important}
  .split-media .ph,.slides .ph,.strip .ph{aspect-ratio:auto !important}
  /* Ausnahme von der Ausnahme: im Paar bekommt das Bild seine Hoehe NICHT vom
     Container (der hat hier keine), sondern aus dem Seitenverhaeltnis. Ohne
     diese Zeile faellt das Portrait am Telefon auf null Hoehe zusammen. */
  .split-paar .split-media .ph{aspect-ratio:var(--split-ar) !important}
  /* Das Kartenbild neben den Kontaktdaten war mit 2,7:1 der flachste Rest.
     WICHTIG: Wer dem Bild hier ein Seitenverhaeltnis + height:auto gibt, MUSS dem
     Container die feste Hoehe wieder nehmen — sonst ist das Bild hoeher als seine
     Box, laeuft heraus und legt sich ueber die Ueberschrift darunter (real passiert). */
  .kontakt-media{height:auto !important;min-height:0}
  .kontakt-media .ph{aspect-ratio:16/9 !important;height:auto !important}
}

/* Die Vorzeile IST ein <p> und stand damit unter Container-Regeln wie .sec-head p
   oder .split-body p — deren Sekundaerfarbe hat die Akzentfarbe geschluckt. Das faellt
   nur auf, wenn der Akzent sich vom Grau unterscheidet (bei HTS: Orange). Deshalb hier
   ganz am Ende und mit Typ+Klasse, damit sie sich gegen alle Container durchsetzt. */
p.eyebrow,.eyebrow{color:var(--eyebrow-color)}
/* Sektionen mit eigener Farbflaeche fuehren die Vorzeilen-Rolle mit: ohne das steht die
   Akzent-Schriftfarbe (dunkel) auf dunkler Flaeche (gemessen 1,4:1). */
section.zone-dunkel,section.zone-brand,section.auf-rot,.cta-band,
.fact-sec,.vid-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.mnav,.site-footer{--eyebrow-color:var(--on-accent)}
/* Auf dunklem Grund kippt der Fokusrahmen mit: der Markenton steht dort auf
   sich selbst und waere unsichtbar (Gojek gemessen 1,00:1 auf --bg-dark).
   Das Hero-Formular und die Kopfzeile gehoeren dazu - beide tragen eine
   dunkle Flaeche, ohne eine der Sektionsklassen zu sein. */
section.zone-dunkel,section.zone-brand,section.auf-rot,.cta-band,
.fact-sec,.vid-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.mnav,.site-footer,
.site-header,.hero-form,.fn-head{--focus:var(--on-accent)}
/* Der Strich erscheint nur, wenn das System eine Breite vorgibt (Standard 0). */
/* Der Abstand haengt an der Strichbreite: ohne Strich KEIN Abstand. Ein fester gap
   liesse die Vorzeile sonst um 8px einruecken, obwohl nichts davorsteht — real
   gemessen 2026-08-27 auf allen Breiten. Bei einem breiteren Strich deckelt
   --space-2 den Abstand nach oben. */
.eyebrow{display:inline-flex;align-items:center;
  gap:min(var(--space-2),var(--eyebrow-dash-w))}
.eyebrow::before{content:"";width:var(--eyebrow-dash-w);height:2px;flex:0 0 auto;
  background:var(--eyebrow-dash-color)}
.fact-sec p.eyebrow,.vid-sec p.eyebrow,.medien-sec p.eyebrow{color:var(--on-accent-soft);--eyebrow-dash-color:var(--on-accent-soft)}
.cta-band p.eyebrow{color:var(--cta-band-fg);opacity:.86;--eyebrow-dash-color:var(--cta-band-fg)}

/* ── REIHE ALS SLIDER ── Wenn mehr Karten zusammengehoeren, als in eine Reihe passen,
   wird die Reihe zum Slider statt in eine angebrochene zweite Zeile zu rutschen.
   Gleiche Karten, gleiche Abstaende — nur horizontal scrollbar mit Pfeilen.
   Auf dem Handy ist es ohnehin ein Wisch-Streifen; die Pfeile erscheinen erst,
   wenn nebeneinander Platz waere. */
.reihe--slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);gap:var(--gap-card);
  margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none}
.reihe--slider::-webkit-scrollbar{display:none}
.reihe--slider>*{flex:0 0 calc((100% - var(--gap-card)) / 2);scroll-snap-align:start;min-width:0}
@media (min-width:820px){
  .reihe--slider{margin-inline:0;padding-inline:0}
  .reihe--slider>*{flex:0 0 calc((100% - var(--gap-card) * (var(--sichtbar,3) - 1)) / var(--sichtbar,3))}
}

/* ── TEXTSEITE ── Impressum, Datenschutz, Danke, 404: kein Raster, keine Karten,
   nur lesbarer Fliesstext. Zeilenlaenge begrenzt, weil eine Rechtsseite ueber die
   volle Containerbreite unlesbar wird. */
.text-sec{padding-block:var(--section-y)}
.text-sec .wrap{max-width:min(var(--container),74ch)}
.text-sec h2{margin-top:var(--space-7)}
.text-sec h2:first-of-type{margin-top:0}
.text-sec h3{font-size:var(--fs-h3);margin-top:var(--space-5)}
.text-sec p,.text-sec ul,.text-sec address{margin-top:var(--space-3);color:var(--text-secondary)}
.text-sec address{font-style:normal}
.text-sec ul{padding-left:1.2em}
.text-sec li{margin-top:var(--space-2)}
.text-sec a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.text-sec .lead{color:var(--text);margin-top:var(--space-4)}

/* ── TEAM ── Vier und mehr Personen brauchen eine eigene Flaeche: im
   mt-Layout waeren die Portraets bei vier Spalten briefmarkengross. */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-card)}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.team-grid{grid-template-columns:minmax(0,1fr)}}
.team-karte{margin:0}
.team-karte .ph{border-radius:var(--radius)}
.team-karte figcaption{margin-top:var(--space-3);font-family:var(--font-display);
  font-weight:var(--fw-semibold);color:var(--heading)}
.team-karte figcaption span{display:block;font-family:var(--font-sans);
  font-weight:var(--fw-regular);font-size:var(--fs-small);color:var(--text-secondary);
  margin-top:2px}

/* ── STELLEN-POPUP ── Die Stellenbeschreibung gehoert nicht als Dauer-Sektion auf
   die Seite: der Besucher waehlt EINE Stelle und liest nur diese. Der
   Bewerbungsbogen erscheint erst nach dem Klick auf "Jetzt bewerben" — davor
   sieht er nur Text, danach nur das Formular. */
.jm[hidden]{display:none}
.jm{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;
  padding:var(--space-5);overflow-y:auto}
.jm-back{position:fixed;inset:0;background:rgba(0,0,0,.55)}
.jm-box{position:relative;z-index:1;width:min(680px,100%);margin-block:auto;
  background:var(--bg);border-radius:var(--radius);padding:clamp(20px,3vw,36px);
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.jm-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;cursor:pointer;
  background:var(--fill);border-radius:var(--radius);color:var(--text);font-size:22px;line-height:1}
.jm-x:hover{background:var(--accent-soft)}
.jm h2{margin-bottom:var(--space-3)}
.jm h3{font-size:var(--fs-h3);margin-top:var(--space-5);margin-bottom:var(--space-2)}
.jm p{color:var(--text-secondary);margin-top:var(--space-2)}
.jm ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.jm li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--text-secondary)}
.jm li svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-ink);margin-top:2px}
.jm .btn{margin-top:var(--space-5)}
.jm-schritt{font-size:13px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-klein);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 6px}
.jm-zurueck{background:none;border:0;padding:0;margin:0 0 10px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:3px}
.jm-form[hidden],.jm-stelle[hidden]{display:none !important}
.jm-form{display:grid;gap:var(--space-3)}
.jm-form label{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--heading)}
.jm-form input,.jm-form textarea{width:100%;padding:12px 14px;border-radius:var(--radius);
  border:var(--border-w) solid var(--border);background:var(--fill);color:var(--text);
  font:inherit}
.jm-form input[type=file]{padding:10px;background:var(--bg)}
.jm-form textarea{min-height:110px;resize:vertical}
.jm-hinweis{font-size:var(--fs-small);color:var(--text-muted)}
@media (max-width:520px){.jm{padding:var(--space-3)}}

/* ── EINWILLIGUNG ── Kompaktes Fenster beim ersten Besuch; danach jederzeit ueber
   den Fusszeilen-Link „Cookie-Einstellungen" erreichbar, auch zum Widerrufen.
   Bewusst schmal und knapp: die Pflichtangaben stehen in den Aufklappern. */
.ck{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow-y:auto}.ck[hidden]{display:none}

.ck-back{position:fixed;inset:0;background:rgba(0,0,0,.55)}
.ck-box{position:relative;z-index:1;width:min(430px,100%);margin-block:auto;background:var(--bg);
  border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;
  font-size:14px;line-height:1.5}
.ck-text{overflow-y:auto;padding:20px 20px 0}
.ck-box h2{font-size:19px;margin:0 0 8px}
.ck-box p{color:var(--text-secondary);font-size:14px;margin-top:6px}
.ck-liste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ck-liste li{background:var(--surface);border-radius:var(--radius);padding:10px 12px}
.ck-zeile{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.ck-zeile input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.ck-zeile input:disabled{opacity:.55}
.ck-zeile b{display:block;color:var(--heading);font-family:var(--font-display);font-size:15px}
.ck-zeile span{display:block;font-size:13px;color:var(--text-secondary)}
/* „Details" sitzt rechts in der Kopfzeile der Kategorie statt darunter — das
   spart je Kategorie eine Zeile und macht das Fenster flacher. */
.ck-liste li{position:relative;padding-right:76px}
.ck-liste li:has(details[open]){padding-right:12px}
.ck-liste details{margin-top:0}
.ck-liste summary{position:absolute;top:10px;right:12px}
.ck-liste details[open] summary{position:static;display:block;text-align:right;margin-top:6px}
.ck-liste summary,.ck-meta summary{cursor:pointer;font-size:13px;font-weight:var(--fw-semibold);
  color:var(--accent-ink);list-style:none}
.ck-liste summary::-webkit-details-marker,.ck-meta summary::-webkit-details-marker{display:none}
.ck-liste summary::before,.ck-meta summary::before{content:"+ ";font-weight:var(--fw-bold)}
.ck-liste details[open] summary::before,.ck-meta details[open] summary::before{content:"– "}
.ck-liste details p,.ck-meta p{font-size:13px;margin-top:6px}
.ck-meta{margin-top:12px}
/* Ohne Trennlinie ueber den Knoepfen (Nutzer-Vorgabe 31.08.2026): der Fuss liegt
   ohnehin auf eigener Flaeche und scrollt nicht mit - die Linie war eine zweite
   Ansage derselben Trennung. */
.ck-fuss-block{padding:12px 20px 16px;background:var(--bg)}
.ck-akt{display:flex;gap:8px}
.ck-akt .btn{flex:1 1 0;min-height:42px;padding:10px 12px;font-size:15px;white-space:nowrap}
.ck-akt--zweit{margin-top:8px}
.ck-fuss{margin-top:10px;font-size:12px;color:var(--text-muted);text-align:center}

/* ── FARBWECHSEL DER SEKTIONEN ──────────────────────────────────────────────
   Zwei gleichfarbige Sektionen hintereinander verschmelzen zu einer langen
   Fläche — die Seite verliert ihren Takt und wirkt länger als sie ist. Deshalb
   bekommt jede Sektion beim Zusammenstellen eine Zone zugewiesen; nie zweimal
   dieselbe hintereinander. Reihenfolge im Regelfall: hell · grau · hell · grau,
   mit höchstens zwei dunklen Sektionen als Betonung (Anfang/Mitte, nie zwei
   nebeneinander). Diese Klassen ueberschreiben die Standardfarbe der Sektion. */
/* Eine helle Zone muss die Schrift MITNEHMEN, nicht nur den Hintergrund.
   Am 2026-09-01 stand deshalb auf einer Kundenseite weisse Schrift auf weisser
   Flaeche: .cgrid-sec bringt eine dunkle Flaeche UND setzt color/--text/--heading
   auf --on-accent; section.zone-hell setzte nur den Hintergrund zurueck. Die
   Sektion war unlesbar und ist so live gegangen.
   zone-dunkel und zone-brand machen es seit jeher richtig -- sie flippen die
   Textrollen mit. Die Gegenrichtung fehlte. --*-basis haelt die Werte der hellen
   Grundflaeche fest; sie werden am :root berechnet und aendern sich in einer
   Sektion nicht mit. */
/* Die Basiswerte der hellen Grundflaeche - bewusst als var() und NICHT als
   fester Farbwert: Ein Skin ersetzt nur die Rollen am :root. Ein zweiter Hexwert
   daneben liefe auseinander (real passiert: der Skin setzte --text:#43494A, mein
   erster Versuch hielt --text-basis auf dem Frame-Grau #3f4448).
   Sie werden AM :root berechnet und bleiben deshalb hell, auch wenn eine Sektion
   --text spaeter auf Weiss stellt. */
:root{--text-basis:var(--text);--heading-basis:var(--heading);
  --text-secondary-basis:var(--text-secondary);--text-muted-basis:var(--text-muted)}
section.zone-hell,section.zone-grau{
  color:var(--text-basis);--text:var(--text-basis);--heading:var(--heading-basis);
  --text-secondary:var(--text-secondary-basis);--text-muted:var(--text-muted-basis)}
section.zone-hell{background:var(--bg);--surface:var(--bg-alt)}

/* Auf hellen Flaechen wischt der weisse Schimmer unsichtbar. Dort das neutrale
   Hellgrau - ausdruecklich KEIN Marken-Ton: ein farbiger Wisch auf einem hellen
   Knopf sieht aus wie ein Fehler im Verlauf, nicht wie Politur. */
.btn--ghost,.btn--hell,.zone-hell .btn--sek,.btn--weiss{--shine:var(--shine-hell)}

/* Eine Stelle, an der noch eine Angabe des Betriebs fehlt. Sie MARKIERT nur -
   sie schreibt nichts. Was fehlt, steht in der Liste im Werkzeug, nicht auf der
   Seite: eine Seite, die ihre eigenen Luecken kommentiert, blamiert den Kunden
   (Nutzer-Vorgabe 2026-09-01). Der Name ist bewusst nicht 'ist-offen' - die
   Klasse gehoert im Frame schon dem aufgeklappten FAQ-Eintrag. */
.fehlt-noch{background:#fff8d6;box-shadow:0 0 0 2px #fff8d6;border-radius:var(--radius)}
/* Ein LEERER Merker markiert nichts - er zeichnet nur einen gelben Balken, den
   niemand deuten kann (Karriereseite IBUK, Nutzer 2026-09-15: "das darf nicht
   sein"). Das Tor in seite_pruefen.py meldet ihn zusaetzlich als Fehler. */
.fehlt-noch:empty{display:none!important}
@media print{ .fehlt-noch{background:none;box-shadow:none} }

.kontrast-schalter{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kontrast-schalter[aria-pressed="true"]::after{content:" \2713"}

/* ── Sektions-Uebergang ────────────────────────────────────────────────────
   Die Sektion mit der Schraege wird um die Kantenhoehe NACH OBEN gezogen und
   legt sich UEBER ihren Vorgaenger; der Ausschnitt zeigt dessen Farbe. Das
   zusaetzliche Innenpolster gleicht den Zug aus, damit der Inhalt nicht
   wandert.

   Ohne den negativen Rand entstuende zwischen den Sektionen eine LUECKE, durch
   die der Seitenhintergrund scheint - genau der Fehler aus Auftrag #9001, wo
   die Schraegen-Token zwar definiert, aber nie angewandt waren.

   Gewaehlt sind die Akzentsektionen UND ihre Nachfolger: dadurch bekommt jede
   Akzentflaeche eine Schraege oben UND unten. Bei --slant-h:0 ist jede Zeile
   ein Nullwert und das Polygon ein Rechteck - die gerade Kante kostet nichts. */
/* ── SCHRAEGEN: die dunkle Sektion malt sie SELBST, nach aussen ─────────────
   Nutzer-Vorgabe 01.09.2026: "die schraegen sollen immer von der dunklen
   sektion in beide richtungen nach aussen gehen".

   Vorher entstand die untere Kante als Nebenwirkung: die FOLGESEKTION schnitt
   ihre eigene obere Ecke weg, und was darunter lag, wurde zur Unterkante der
   dunklen Flaeche. Damit entschied der Nachbar ueber die Kante - ist er kein
   `section`/`footer`, fehlt die Schraege unten ganz (Nutzer-Befund am gruenen
   Band: "unten fehlt die schraege links"), und weil beide dieselbe Ecke
   schnitten, liefen die Kanten parallel statt gespiegelt: die Flaeche
   verschiebt sich, der Inhalt sitzt nicht mehr senkrecht mittig.

   Jetzt traegt die dunkle Sektion zwei eigene Keile in ihrer eigenen Farbe -
   einen ueber und einen unter ihrer Box, gespiegelt. Der Inhalt bleibt davon
   unberuehrt, weil die Keile ausserhalb liegen; es kann keine Luecke zum
   Nachbarn geben, weil niemand mehr auf ihn angewiesen ist, und keine zur
   eigenen Sektion, weil der Keil 1px in sie hineingreift; und Nachbarn brauchen
   ueberhaupt keine Regel mehr. Bei --slant-h:0 sind beide Keile 0 hoch. */
:is(.fact-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.cta-band){
  --slant:min(var(--slant-h),var(--slant-max,999px));
  position:relative;
}
/* Die beiden Keile. `background:inherit` nimmt die Flaeche der Sektion selbst -
   kein zweiter Ort, an dem eine Farbe gepflegt werden muesste. Sie liegen
   ausserhalb der Box und deshalb unter dem Inhalt der Nachbarn; `z-index:0`
   plus `isolation` waere hier zu viel, ein negativer Rand reicht. */
:is(.fact-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.cta-band)::before,
:is(.fact-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.cta-band)::after{
  content:"";position:absolute;left:0;right:0;
  /* +1px: der Keil GREIFT IN SEINE EIGENE SEKTION HINEIN. Buendig gesetzt
     ('bottom:100%') rundet der Browser die beiden Rechtecke unabhaengig
     voneinander - bei krummer Layout-Hoehe oder einem Bildschirm mit 1.25x
     landet die Unterkante des Keils auf 1234, die Oberkante der Sektion auf
     1235, und dazwischen blitzt eine Geraetepixel-Zeile Seitenhintergrund
     durch: der Haarriss vom 02.09.2026. Die eine ueberlappende Zeile liegt in
     der Farbe der Sektion auf der Sektion und ist damit unsichtbar. */
  height:calc(var(--slant) + 1px);
  background:inherit;pointer-events:none}
/* oben: der Keil waechst nach LINKS-oben aus der Sektion heraus */
:is(.fact-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.cta-band)::before{
  bottom:calc(100% - 1px);clip-path:polygon(0 100%,100% 0,100% 100%)}
/* Unten der GESPIEGELTE Keil: dick links, wo der obere dick rechts ist. Damit
     laufen beide Kanten PARALLEL und die Sektion liest sich als schraeges Band.
     Bis 2026-09-02 zeigten beide in dieselbe Richtung - der Kommentar behauptete
     schon "gespiegelt", der Code tat es nicht. Das Ergebnis war ein Keil, der auf
     einer Seite doppelt so dick wirkte (Nutzer-Befund an #9019). */
:is(.fact-sec,.medien-sec,.geo-sec,.cgrid-sec,.cmp-sec,.cta-band)::after{
  top:calc(100% - 1px);clip-path:polygon(0 0,100% 0,0 100%)}
@media (max-width:600px){
  /* Am Handy frisst eine hohe Schraege den halben Bildschirm - gedeckelt ueber
     eine ZWEITE Variable. '--slant-h:min(var(--slant-h),18px)' waere ein
     Zyklus: eine Custom Property, die sich selbst liest, ist ungueltig. */
  :root{ --slant-max:18px }
}
/* --fill kippt mit, genau wie --surface. Ohne das loest sich in einer grauen
   Sektion jede Flaeche auf, die --fill traegt: Bildplaetze, Hover-Flaechen,
   der Grund unter Icons. Auf der Kundenpalette sind --fill und --bg-alt sogar
   BITGLEICH (#f8f8f8, gemessen 1,00:1) - der Bildplatz war dort nur noch an
   seiner gestrichelten Kante zu erkennen. Dieselbe Begruendung wie oben: eine
   Box darf sich nie in ihrer eigenen Sektionsfarbe aufloesen. */
section.zone-grau{background:var(--bg-alt);--surface:var(--bg);--fill:var(--bg)}
section.zone-brand{background:var(--bg-brand);color:var(--on-accent);--heading:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--surface:var(--bg-brand)}
/* Icons auf der Markenflaeche: der Akzent ist hier der Hintergrund, ein
   Icon in --accent waere unsichtbar. Alle Icon-Huellen des Frames auf
   weiss, Strich wie Flaeche. (Nutzer-Vorgabe 2026-08-30) */
section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico,.ill-ico,.ablauf-nr,.icard svg,.fact-num) svg,section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico) svg *{stroke:var(--on-accent)}
section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico) svg .f,section.zone-brand svg.f{fill:var(--on-accent);stroke:none}
section.zone-dunkel,section.zone-brand{background:var(--bg-accent);color:var(--on-accent);--surface:var(--bg);
  --text:var(--on-accent);--text-secondary:var(--on-accent-soft);
  --text-muted:var(--on-accent-soft);--heading:var(--on-accent);
  --positive:var(--positive-on-dark);--accent-ink:var(--on-accent);
  --border:var(--veil-strong)}
/* Helle Karten in einer dunklen Zone holen sich die Grundpalette zurueck */
section.zone-brand{background:var(--bg-brand);color:var(--on-accent);--heading:var(--on-accent);--text:var(--on-accent);--text-secondary:var(--on-accent-soft);--surface:var(--bg-brand)}
/* Icons auf der Markenflaeche: der Akzent ist hier der Hintergrund, ein
   Icon in --accent waere unsichtbar. Alle Icon-Huellen des Frames auf
   weiss, Strich wie Flaeche. (Nutzer-Vorgabe 2026-08-30) */
section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico,.ill-ico,.ablauf-nr,.icard svg,.fact-num) svg,section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico) svg *{stroke:var(--on-accent)}
section.zone-brand :is(.fitem-ico,.usp-ico,.beleg-ico,.check-ico) svg .f,section.zone-brand svg.f{fill:var(--on-accent);stroke:none}
section.zone-brand .fact-card,section.zone-brand .pcard,section.zone-brand .ph,
section.zone-brand .split-body,section.zone-brand .faq,
section.zone-brand .kontakt-body,section.zone-brand .geo2-body{--text:var(--ink);--text-secondary:var(--ink-2);
  --text-muted:var(--ink-3);--heading:var(--ink-h);color:var(--ink)}
section.zone-dunkel .fact-card,section.zone-dunkel .pcard,section.zone-dunkel .ph,
section.zone-dunkel .split-body,section.zone-dunkel .faq,
section.zone-dunkel .kontakt-body,section.zone-dunkel .geo2-body{--text:var(--ink);--text-secondary:var(--ink-2);
  --text-muted:var(--ink-3);--heading:var(--ink-h)}

/* Bild- und Kartenspalten am Schirm: Hoehe folgt der Textspalte statt einem festen
   Wert — sonst bestimmt ein Bild die Sektionshoehe, das gar nicht der Inhalt ist. */
@media (min-width:900px){
  .kontakt-media{min-height:0;align-self:stretch}
  .geo2-map{min-height:0;height:auto}
  .geo2-map .ph{aspect-ratio:2/1}
}

/* Aktions-Kachel: schliesst ein Leistungs-Raster ab, statt eine leere Stelle zu lassen.
   Volle Akzentflaeche, kein Bild — sie ist der Knopf, nicht die siebte Leistung. */
.tile--cta{background:var(--accent);color:var(--accent-fg);display:flex;
  align-items:center;justify-content:center;text-align:center;min-height:100%}
.tile--cta .tile-label{background:none;color:var(--accent-fg);font-size:var(--fs-h3);
  display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.tile--cta:hover{background:var(--accent-bgh)}
.tile--cta svg{width:20px;height:20px;flex:0 0 auto}
/* ── FORMULAR-FEHLER ── Sichtbare Rueckmeldung, wenn der Server die Einsendung
   zurueckweist. Ohne sie landet der Besucher wortlos wieder am Formular und
   haelt seine Anfrage faelschlich fuer abgeschickt. */
/* Das beanstandete Feld wird MIT benannt - der Kasten allein zwingt zum Suchen.
   Farbe ist nie das einzige Signal (Rot-Gruen-Schwaeche): dazu die kraeftigere
   Kante und aria-invalid fuer die Sprachausgabe. */
.ist-fehler{border-color:var(--negativ,#b3261e) !important;
  box-shadow:0 0 0 var(--border-w) var(--negativ,#b3261e)}
.form-fehler ul{margin:.4em 0 0;padding-left:1.15em}
.form-fehler li{margin:0 0 .15em}
.form-fehler{margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);
  border-radius:var(--radius);border:var(--border-w) solid var(--negativ,#b3261e);
  background:color-mix(in srgb, var(--negativ,#b3261e) 8%, transparent);
  color:var(--negativ,#b3261e);font-size:var(--fs-small);font-weight:var(--fw-semibold)}


/* ── Bilder fuellen die Flaeche ihres Platzhalters ────────────────────────────
   Ein Platzhalter zeigt Format und Groesse, in denen das echte Bild spaeter
   steht. Damit das haelt, muss das Bild die Flaeche fuellen statt sie zu
   veraendern - sonst springt das Layout in dem Moment, in dem der Kunde seine
   Fotos liefert, und die Seite ist eine andere als die abgenommene.
   Fotos: cover (Ausschnitt statt Verzerrung). Logos und Siegel: contain, sie
   duerfen nicht beschnitten werden. (Nutzer-Vorgabe 2026-08-30) */
:is(.medium,.beleg-bild,.proof-fig,.mt-fig,.mt-person,.pcard-photo,.team-karte,.rev-ava,.hero-bild,.kontakt-media,.geo2-map,.split-media,.tile,.tile-img,.strip,.slide,.video,.lz-card)>img{width:100%;height:100%;object-fit:cover;display:block}
:is(.brand,.footer-brand,.mnav-top,.seal,.siegel)>img{width:100%;height:100%;object-fit:contain;display:block}

/* ── Streifen: Desktop zeigt alles, gewischt wird nur mobil ─────────────────
   Die Karten-Streifen des Frames waren auf JEDER Breite Schieber - drei volle
   Karten, eine angeschnittene, Pfeile daneben. Am Desktop ist das ein
   unnoetiger Schritt: der Platz reicht, und was man wischen muss, sieht man
   nicht. Ab 900px werden sie deshalb zu Rastern, die Pfeile verschwinden mit
   ihnen. Unter 900px bleibt alles wie es war: eine breite Karte mit Anschnitt,
   die zum Wischen einlaedt. (Nutzer-Vorgabe 2026-08-30)

   Die letzte Reihe MUSS aufgehen - eine angebrochene liest sich als Fehler,
   nicht als Gestaltung. Deshalb folgt die Spaltenzahl der Kartenzahl, gesetzt
   ueber --spalten am Streifen selbst (Nutzer-Vorgabe 2026-08-31):

       3 Karten -> 3 Spalten, 1 Reihe        6 Karten -> 3 Spalten, 2 Reihen
       4 Karten -> 4 Spalten, 1 Reihe        8 Karten -> 4 Spalten, 2 Reihen
       9 Karten -> 3 Spalten, 3 Reihen      12 Karten -> 4 Spalten, 3 Reihen

   Geht die Zahl nicht auf (5, 7, 10, 11), fuellt eine CTA-Kachel den Rest auf -
   siehe .lz-card--cta. Sie ist eine Moeglichkeit, keine Vorgabe: wer stattdessen
   eine Leistung ergaenzt oder weglaesst, erreicht dasselbe.

   Ohne --spalten bleibt auto-fit als Rueckfall: dann entscheidet die Breite,
   und das ist besser als eine falsche feste Zahl. */
@media (min-width:900px){
  /* .ablauf-grid.ist-slider gehoert NICHT hierher: Die Klasse setzt das Skript
     gerade dann, wenn die Reihe zu lang fuer ein Raster ist. Als Raster mit
     --spalten:6 und minmax(240px) lief sie 280 px aus dem Bild (07.10.2026). */
  .lz-row,.ill-grid,.tiles{
    display:grid;grid-template-columns:repeat(var(--spalten,auto-fit),minmax(240px,1fr));
    gap:var(--gap-card);overflow:visible;scroll-snap-type:none;
    margin-inline:0;padding-inline:0}
  .lz-row>*,.ill-grid>*,.tiles>*{
    flex:none;width:auto;scroll-snap-align:none}
  .lz-nav{display:none !important}
}

/* ── Untermenue statt Mega-Menue ────────────────────────────────────────────
   Der Leistungen-Punkt spannte ein Feld ueber die volle Breite und zeigte alle
   Gruppen nebeneinander. Jetzt ein schmales Menue wie die anderen Punkte:
   erste Ebene sind die Gruppen, die zweite oeffnet daneben, sobald man auf
   einer Gruppe steht. (Nutzer-Vorgabe 2026-08-30)

   `:focus-within` steht gleichberechtigt neben `:hover` - sonst ist die zweite
   Ebene mit der Tastatur nicht erreichbar. Unter 900px greift das eigene
   Mobilmenue (.mnav); dort gilt nichts hiervon, deshalb steht alles in der
   Media-Query. */
.nav-zweig{position:relative}
.nav-zweig>.nav-kat{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.nav-zweig>.nav-kat::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);opacity:.5}
.nav-sub{display:none}
@media (min-width:900px){
  /* BUENDIG an das Klappfeld, ohne Spalt (Nutzer-Vorgabe 2026-08-31).
     Vorher lag das Untermenue 24 px daneben und war ueber eine unsichtbare
     Bruecke erreichbar - ab 1200 px war die Bruecke aber abgeschaltet
     (content:none), sodass der Zeiger den Spalt nicht mehr queren konnte und
     das Untermenue zuklappte, bevor man es erreichte. Ohne Spalt braucht es
     keine Bruecke: die beiden Felder beruehren sich.
     top richtet die erste Zeile des Untermenues auf die Kategorie aus, zu der
     es gehoert - vorher stand es 23 px darueber und wirkte losgeloest. */
  /* position:relative MUSS hier stehen, nicht ausserhalb der Abfrage: die Regel
     weiter oben rechnete zu 'static' - gemessen 31.08.2026. Dadurch bezog sich
     left:100% auf das ganze Klappfeld statt auf die Gruppe, und das Untermenue
     sass 24 px daneben. Genau dieser Spalt liess es zuklappen, bevor der Zeiger
     drueben war. */
  /* position:relative MUSS hier stehen, nicht ausserhalb der Abfrage: die Regel
     weiter oben rechnete zu 'static' (gemessen 31.08.2026), und dann bezog sich
     left auf das ganze Klappfeld statt auf die Gruppe. */
  .nav-zweig{position:relative}
  /* Der Versatz ist genau der INNENRAND des Klappfelds: .nav-zweig endet an der
     Textkante (553), das sichtbare Feld erst 24 px weiter (577) - das ist --space-5, nicht
     --space-4. Ohne den
     Versatz liegt das Untermenue auf dem Feld und schneidet die Pfeile ab -
     genau so sah es am 31.08.2026 aus. Die Bruecke darunter macht den Streifen
     ueberquerbar; ohne sie klappt das Feld zu, bevor der Zeiger drueben ist. */
  /* left:100%, nicht mehr 100% + --space-5: der Innenrand steckt jetzt in den
     ZEILEN, nicht mehr im Feld. Damit endet .nav-zweig an der Feldkante selbst,
     und der Ausgleich von vorher waere ein Loch von 24 px. */
  /* Das eine Pixel ist kein Feinschliff: .nav-drop traegt border-top:1px, das
     Untermenue nicht. Ohne den Ausgleich sitzt es genau um diese Linie zu tief,
     und weil beide Felder sich beruehren, sieht man den Versatz an der Naht.
     (Nutzer-Vorgabe 31.08.2026) */
  .nav-sub{position:absolute;left:100%;top:calc(var(--space-3) * -1 - 1px);
    /* UNTER dem Klappfeld (Nutzer-Vorgabe 31.08.2026). -1, nicht 54:
       .nav-sub liegt IM Klappfeld, und das macht mit z-index:55 einen eigenen
       Stapelkontext auf. Jeder positive Wert darin bleibt ueber der Flaeche des
       Klappfelds - nur ein negativer schiebt das Untermenue dahinter.
       Es bleibt trotzdem ueber dem Seiteninhalt: der ganze Teilbaum wird als
       Ganzes auf Ebene 55 gezeichnet.
       Nebenwirkung, die hier erwuenscht ist: seit der Schatten in alle
       Richtungen faellt, legte sein linker Saum eine Naht auf das Klappfeld.
       Hinter dem Klappfeld faellt genau dieser Teil weg. */
    z-index:-1;min-width:250px;flex-direction:column;gap:var(--space-2);
    background:var(--bg);border-radius:0 var(--radius) var(--radius) 0;
    box-shadow:var(--shadow-md);
    padding:var(--space-4) var(--space-5)}
  .nav-zweig:hover>.nav-sub,.nav-zweig:focus-within>.nav-sub{display:flex}
  /* ── Optik des dritten Menues ──────────────────────────────────────────
     Zwei weisse Felder nebeneinander sagen dem Besucher nicht, WELCHER Punkt
     gerade geoeffnet ist. Die offene Gruppe bekommt deshalb eine Flaeche, die
     bis an die Feldkante reicht - dort beginnt das Untermenue, beide lesen sich
     als ein zusammenhaengender Weg statt als zwei Kaesten. */
  /* Der Innenrand wandert vom FELD in die ZEILEN (Nutzer-Vorgabe 31.08.2026).
     Vorher trug .nav-drop-inner den Rand, die Zeile lag darin und ihre graue
     Flaeche hoerte 24 px vor der Kante auf - sie sah aus wie ein eingelegter
     Knopf, nicht wie eine markierte Zeile. Jetzt ist die ganze Zeile die
     Trefferflaeche, von Kante zu Kante, und der Abstand ist ihr Innenrand.
     Auch der Abstand ZWISCHEN den Zeilen faellt weg: die Zeilen stossen
     aneinander, getrennt nur durch ihren eigenen Innenrand. Eine Luecke
     zwischen zwei Zeilen ist eine Flaeche, auf der ein Klick nichts tut. */
  .nav-drop--schmal .nav-drop-inner{padding-inline:0}
  .nav-drop--schmal .nav-spalte{gap:0}
  .nav-drop--schmal .nav-spalte>a:not(.btn),
  .nav-drop--schmal .nav-zweig>.nav-kat{
    padding:var(--space-3) var(--space-5);margin:0;border-radius:0}
  .nav-drop--schmal .nav-spalte>a:not(.btn):hover{background:var(--fill);
    color:var(--ink-h);text-decoration:none}
  .nav-zweig>.nav-kat{
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
  .nav-zweig:hover>.nav-kat,.nav-zweig:focus-within>.nav-kat{
    color:var(--ink-h);background:var(--fill)}
  /* Der Pfeil rueckt beim Oeffnen ein Stueck mit: eine kleine Bewegung, die die
     Richtung bestaetigt, in die sich das Untermenue oeffnet. */
  .nav-zweig>.nav-kat::after{transition:transform var(--dur) var(--ease)}
  .nav-zweig:hover>.nav-kat::after,.nav-zweig:focus-within>.nav-kat::after{
    transform:rotate(-45deg) translate(2px,2px)}
  /* Schatten nach ALLEN Seiten gleich, ohne Versatz (Nutzer-Vorgabe 31.08.2026).
     Vorher fiel er nach rechts und unten - das las sich wie Licht von oben links
     und liess das Menue gekippt wirken. Ohne Versatz liegt es flach auf: ein
     Blatt UEBER der Seite, nicht eines, das an ihr lehnt.
     Kurz und kraeftig bleibt er: 12 px Weichzeichnung bei .34 Deckkraft, minus
     2 px Ausbreitung. Das ergibt rundum rund 4 px sichtbaren Saum - genug, um
     die Kante zu tragen, zu wenig fuer einen Hof auf dem Inhalt darunter.
     Deckkraft und Weichzeichnung sind zwei verschiedene Hebel: die eine macht
     die Kante sichtbar, die andere macht sie unscharf.
     Preis der Symmetrie, bewusst in Kauf genommen: der Saum des Untermenues
     faellt jetzt auch nach LINKS, also auf das Klappfeld, an dem es buendig
     anliegt. Zwischen zwei hellen Flaechen ist das eine feine Naht - der Preis
     dafuer, dass das Menue nicht mehr gekippt wirkt. */
  .nav-sub{box-shadow:0 0 12px -2px rgba(0,0,0,.34)}
  /* Der Schatten faellt rundum gleich - aber NICHT auf das Klappfeld, an dem
     das Untermenue buendig anliegt (Nutzer-Vorgabe 31.08.2026).

     z-index:-1 allein reicht dafuer nicht, und das ist die Stelle, an der man
     sich irrt: ein Kind mit negativem z-index wird zwar UNTER den Inhalt des
     Klappfelds gemalt, aber UEBER dessen Hintergrund (CSS 2.1 Anhang E,
     Malreihenfolge Punkt 2 nach Punkt 1). Der Schatten lag also weiterhin auf
     der weissen Flaeche - nur die Textzeilen darueber blieben frei.

     clip-path schneidet ihn an der eigenen linken Kante ab. Die anderen drei
     Seiten bekommen 24 px Luft, damit der Schatten dort vollstaendig bleibt.
     Der Inhalt des Untermenues liegt innerhalb der Box und wird nicht beruehrt. */
  .nav-sub{clip-path:inset(-24px -24px -24px 0)}
  /* Der Schatten geht NUR nach unten (Nutzer-Vorgabe 01.09.2026: "ich will
   nicht, dass das Submenue einen Schatten auf die Menuezeile wirft"). Ein
   Schatten mit Versatz 0 laeuft mit seinem Weichzeichner 12 px nach OBEN ueber
   die Leistenkante und dunkelt die Kopfzeile ab - auf einer weissen Leiste gut
   sichtbar, am dunklen Frame gemessen als Helligkeitsabfall von 30,0 auf 28,1.
   Diese Regel steht NACH der Grundregel und ist damit die massgebliche; beide
   tragen denselben Wert, damit sie nicht auseinanderlaufen. */
.nav-drop{box-shadow:0 14px 18px -8px rgba(0,0,0,.28)}
  /* Die dritte Ebene traegt KEINE Flaeche mehr (Nutzer-Vorgabe 31.08.2026).
     Zwei graue Felder nebeneinander - eines fuer die offene Gruppe, eines fuer
     den Eintrag darin - sagen nicht mehr, sondern weniger: man sieht nicht, was
     Weg und was Ziel ist. Die Flaeche bleibt der zweiten Ebene vorbehalten,
     die dritte antwortet mit Schrift. Die Trefferflaeche bleibt trotzdem die
     ganze Zeile: der Innenabstand steht weiter, nur ohne sichtbaren Grund. */
  .nav-sub>a{padding:var(--space-2) 0;
    transition:color var(--dur) var(--ease)}
  .nav-sub>a:hover{color:var(--ink-h);text-decoration:underline;
    text-underline-offset:3px}
  /* Die Brueckenflaeche ist entfallen: sie ueberspannte den Streifen zwischen
     Gruppe und Untermenue. Diesen Streifen gibt es nicht mehr - die Zeile reicht
     jetzt bis an die Kante, an der das Untermenue beginnt. Eine Bruecke ueber
     null Pixel ist eine unsichtbare Flaeche, die spaeter niemand mehr erklaeren
     kann.
     Es bleibt bei .nav-sub{border-left:0} weiter unten: die beiden Felder
     beruehren sich, eine Kante dazwischen waere ein Strich mitten im Weg. */

}

/* ── Kachel-Icons: Strich proportional zur Groesse ──────────────────────────
   .icard-ico zeigt ein 24er-Motiv auf 44px. Mit stroke-width 1,3 ergibt das ein
   Verhaeltnis von 34:1 - die kleineren Icons des Frames liegen bei 21:1
   (.fitem-ico: 26px, Strich 1,2). Optisch wirkt der grosse Strich dadurch
   fadenscheinig, nicht kraeftiger. Auf 2,1 gesetzt entspricht das Verhaeltnis
   dem der kleinen Icons. Runde Enden und Ecken fehlten ganz; sie sind der
   Unterschied zwischen einem gezeichneten und einem technischen Icon.
   (Nutzer-Vorgabe 2026-08-30) */
.icard-ico svg{stroke-width:calc(var(--icon-stroke) * 1.05);
  stroke-linecap:round;stroke-linejoin:round}

/* ── Bild neben einer Kachelspalte ──────────────────────────────────────────
   16:9 neben zwei Kachelreihen ist zwangslaeufig niedriger als die Spalte
   daneben - rechts blieb ein Drittel der Hoehe leer. 4:3 ist ein echtes
   Fotoformat, ein Drittel hoeher und bleibt damit das, was der Platzhalter
   verspricht: die Groesse, in der das Foto spaeter steht. */
.vid-grid .medium{aspect-ratio:4/3}

/* Sektionskopf in der Textspalte: neben dem Bild, nicht zentriert darueber
   (Nutzer-Vorgabe 2026-08-30). Kontextregel statt neuer Klasse. */
.proof-body .sec-head,.beleg-text .sec-head{text-align:left;max-width:none;margin:0 0 var(--space-4)}

/* ── Menue: Kante zur Kopfzeile, Untermenue ohne Spalt ──────────────────────
   Das Klappfeld beginnt an der Unterkante der Kopfzeile (top:100%), aber deren
   border-bottom ist standardmaessig transparent - ohne sichtbare Trennung
   verschwimmt das Feld mit der Navigationszeile. Es traegt deshalb eine eigene
   obere Kante.

   Das Untermenue der zweiten Ebene haengt jetzt direkt am Klappfeld (left:100%)
   statt mit Abstand daneben. Damit ist auch die Brueckenflaeche hinfaellig, die
   den Spalt ueberbrueckt hat - ohne Spalt kein Zeiger, der ihn verliert.
   (Nutzer-Vorgabe 2026-08-30) */
/* top:100% bezieht sich bei position:absolute auf die PADDING-Box des
   Containing Block - der border-bottom der Kopfzeile (1px) liegt ausserhalb
   davon. Das Klappfeld sass deshalb genau eine Linie zu hoch und ragte in die
   Navigationszeile hinein. Der Ausgleich ist exakt diese Border-Breite. */
.nav-drop{top:calc(100% + 1px);border-top:1px solid var(--border)}
@media (min-width:900px){
  /* Der Zweig endet am Innenrand des Klappfelds, nicht an dessen Aussenkante -
     .nav-drop-inner traegt padding-inline:var(--space-5). Mit left:100% begann
     das Untermenue deshalb um genau diesen Betrag ZU FRUEH und schob sich ueber
     die rechte Kante des Klappfelds. Der Ausgleich ist kein Abstand, sondern
     die Breite des Innenrands: so schliesst das Untermenue buendig an. */
  /* Die Kante bleibt, der Versatz entfaellt: border-left:0 ergibt nur dann
     Sinn, wenn das Feld die Nachbarkante tatsaechlich beruehrt. */
  /* Nur die Kante, KEIN eigener Versatz mehr: eine abweichende Position hier
     hiesse, dass die Bruecke unten nicht mehr passt. Genau daran ist es vorher
     gescheitert - groesserer Abstand plus abgeschaltete Bruecke. */
  /* Keine Kante mehr an der dritten Ebene (Nutzer-Vorgabe 31.08.2026): sie
     zeichnete eine Linie um ein Feld, das keine eigene Flaeche mehr hat, und
     rahmte damit etwas ein, was gar nicht mehr als Kasten gemeint ist. Die
     Trennung zum Klappfeld leistet der Schatten. */
}

/* ── Bildunterschrift zaehlt nicht zur Bildhoehe ────────────────────────────
   In einem zweispaltigen Grid mit align-items:center wird die ganze <figure>
   zentriert - also Bild PLUS Unterschrift. Das Bild rutscht dadurch um die
   halbe Zeilenhoehe der Unterschrift nach oben und steht sichtbar hoeher als
   der Text daneben. Die Unterschrift gehoert unter das Bild, aber nicht in
   seine Hoehe: absolut positioniert bestimmt allein das Bild, wo die Mitte
   liegt. Nur am Desktop - mobil stehen Bild und Text ohnehin untereinander,
   dort muss die Unterschrift Platz im Fluss behalten.
   (Nutzer-Vorgabe 2026-08-30) */
@media (min-width:900px){
  .proof-fig,.mt-fig{position:relative}
  .proof-fig>figcaption,.mt-fig>figcaption{position:absolute;top:100%;left:0;right:0;
    margin-top:var(--space-3)}
}

/* ── CTA-BAND: eine Zeile, ein Ziel (Nutzer-Vorgabe 31.08.2026) ─────────────
   Drei Zusagen, die ab hier die CSS haelt und nicht mehr die Textlaenge:
   1. Der Knopf rutscht NIE in eine zweite Zeile.
   2. Die Ueberschrift bleibt EINZEILIG.
   3. Der Vorspann darf ein bis drei Zeilen hoch werden, aber nie breiter als
      der Platz, der neben dem Knopf uebrig ist.
   Bisher hing alles drei an der Copy: .cta-inner durfte umbrechen, also ist der
   Knopf bei laengerem Text unter den Text gerutscht; die h2 brach frei um; und
   das max-width:60ch des Vorspanns war breiter, als die Spalte je wird - es hat
   also nie etwas begrenzt.
   Nur ab 900px, denn erst dort stehen Text und Knopf nebeneinander. Darunter
   stapelt das Band bewusst, und eine einzeilige Ueberschrift ist auf einem
   Telefon ohnehin nicht zu halten. */
@media (min-width:900px){
  /* Kein Umbruch auf dieser Achse. min-width:0 erlaubt dem Textblock ueberhaupt
     erst zu schrumpfen - ohne ihn ist die Mindestbreite eines Flex-Kindes sein
     laengstes Wort, und genau daran schiebt der Knopf sich sonst weg. */
  .cta-inner{flex-wrap:nowrap}
  .cta-inner>div{flex:1 1 auto;min-width:0}
  .cta-inner>.btn{flex:0 0 auto}
  /* Einzeilig, abgesichert statt kurz getextet. Wird die Ueberschrift zu lang,
     kuerzt sie SICHTBAR mit Auslassungspunkten, statt die Zeile zu sprengen -
     ein lautes Signal an die Copy. Der Hebel bleibt die kurze Ueberschrift,
     die Auslassung ist nur der Alarm. */
  .cta-band h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Ein bis drei Zeilen. Die Breite begrenzt die Spalte selbst (siehe oben),
     deshalb faellt das wirkungslose 60ch weg. */
  .cta-band p{max-width:none;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
}

/* ── Meldungsseiten (404, Auffangseite, Danke) ─────────────────────────────
   Muster aus hts-bau. Diese Seiten haben genau eine Aussage und einen Weg
   zurueck - ein Hero mit Formular waere hier Ballast. Der Block steht mittig:
   senkrecht ueber min-height + Flex, waagerecht ueber max-width und
   text-align. 70svh statt 70vh, weil vh auf dem Handy die eingeblendete
   Adressleiste mitrechnet und der Block dann unter den Rand rutscht. */
.meldung-sec{padding-block:var(--section-y);min-height:70svh;
  display:flex;align-items:center}
.meldung-sec>.wrap{width:100%}
.meldung{max-width:52ch;margin:0 auto;text-align:center}
.meldung h1{margin:0 0 var(--space-3)}
.meldung-text{font-size:var(--fs-lead);color:var(--text-secondary);
  margin:0 auto var(--space-6);max-width:44ch}
.meldung-tat{margin:0 0 var(--space-5)}
/* Unter dem Knopf steht nichts mehr (Nutzer-Vorgabe 31.08.2026). Der Block
   hatte darunter eine Trennlinie, eine Linkliste und die Nummer - und damit
   drei weitere Angebote genau an der Stelle, an der der Besucher gerade EINE
   Entscheidung treffen soll. Was wirklich erklaert werden muss, steht jetzt
   als .meldung-hinweis UEBER dem Knopf, wo es gelesen wird. */
.meldung-hinweis{font-size:var(--fs-small);color:var(--text-secondary);
  max-width:52ch;margin:calc(var(--space-5) * -1) auto var(--space-6)}

/* ── KONTAKT-SEKTION ── Formular links, Kontaktwege rechts ──────────────────
   Zwei Drittel Formular, ein Drittel Seitenspalte. Die Aufteilung ist kein
   Geschmack: Das Formular ist die Handlung, die Spalte daneben faengt die
   Besucher ab, die lieber anrufen oder schreiben - und das sind bei
   Handwerksbetrieben nicht wenige.

   Die Seitenspalte traegt bewusst NUR drei Links. Mehr, und sie wird zur
   zweiten Navigation, die vom Formular wegzieht. Die beiden Knoepfe darunter
   sind gross und tragen die vollstaendige Adresse bzw. Nummer im Text - nicht
   "Schreiben Sie uns", sondern die Adresse selbst. Wer anrufen will, will sie
   sehen, nicht erst klicken. */
.kform-sec{padding-block:var(--section-y)}
.kform-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media (min-width:900px){
  /* 2fr/1fr statt fester Breiten: die Spalte darf schmaler werden, das
     Formular nie - Eingabefelder unter etwa 280 px sind unbenutzbar. */
  .kform-grid{grid-template-columns:2fr minmax(260px,1fr);gap:var(--gap-split);
    align-items:stretch}
  /* Beide Spalten enden auf gleicher Hoehe. Nicht Kosmetik: bei align-items:start
     hoerte die rechte Spalte irgendwo mitten im Formular auf, und die Sektion
     sah aus, als fehle unten rechts etwas. Ausgeglichen wird ueber das Bild -
     es ist das einzige Element der Spalte ohne feste Aussage zur Hoehe. */
  .kform-bild{flex:1 1 auto;min-height:180px}
  .kform-bild .ph{height:100%;aspect-ratio:auto}
}
.kform-box{background:var(--surface);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,32px)}
/* Ueberschrift ueber dem Formular: ohne sie beginnt die linke Spalte mit einem
   leeren Feld, und der Besucher muss aus dem Beschriftungstext erschliessen,
   was er hier gerade tut. */
.kform-titel{margin:0 0 var(--space-4);font-size:var(--fs-h3)}
.kform-seite{display:flex;flex-direction:column;gap:var(--space-4)}
.kform-bild .ph{border-radius:var(--radius);aspect-ratio:4/3}
/* Die drei Links: Listenform, damit sie als Gruppe lesbar sind und nicht als
   Fliesstext mit Verweisen. */
.kform-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-2)}
.kform-links a{display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--heading);
  padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.kform-links li:last-child a{border-bottom:0}
.kform-links a:hover{color:var(--accent-ink)}
.kform-links svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-ink)}
/* Die beiden Wege sind gleichrangig - und zwar sichtbar: gleiche Farbe, gleiche
   Form, gleiche Hoehe. Vorher war einer gefuellt und einer nur umrandet, und
   damit war die Rangfolge doch wieder entschieden: der gefuellte gewinnt. Wer
   lieber schreibt als anruft, soll das nicht als zweite Wahl angeboten bekommen.
   Die Kleinzeile ueber dem Wert ist weg: "Rufen Sie an" ueber einer
   Telefonnummer sagt nichts, was das Symbol und die Nummer nicht schon sagen -
   sie machte die Flaechen nur hoch und unruhig. */
.kform-wege{display:flex;flex-direction:column;gap:var(--space-3)}
.kform-weg{display:flex;align-items:center;gap:var(--space-3);text-align:left;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-btn);
  background:var(--accent);color:var(--accent-fg);
  transition:background var(--dur) var(--ease)}
.kform-weg:hover{background:var(--accent-bgh)}
.kform-weg svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.kform-weg .wert{font-family:var(--font-display);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);line-height:1.2;overflow-wrap:anywhere;min-width:0}

/* Die achte Kachel ist KEINE Leistung, sondern eine Handlungsaufforderung.
   Ganzflaechig hellgrau statt Bild plus weisser Flaeche - so ist auf einen Blick
   erkennbar, dass sie nicht in die Reihe der sieben gehoert, ohne dass sie
   herausschreit. */
.lz-card--cta{background:var(--bg-alt);justify-content:center}
/* Mittig in beide Richtungen. Der Absatz muss dafuer sein flex:1 aus .lz-body p
   verlieren - es war dazu da, in den anderen Kacheln den Knopf nach UNTEN auf
   eine gemeinsame Linie zu druecken. Genau das verhindert hier das Zentrieren:
   der Text schoebe den Knopf an den Rand, und die Kachel saehe wieder aus wie
   die sieben daneben, nur ohne Bild. */
.lz-card--cta .lz-body{justify-content:center;align-items:center;
  text-align:center;gap:var(--space-3)}
.lz-card--cta .lz-body p{flex:0 0 auto}
.lz-card--cta .lz-body .btn{margin-top:var(--space-2);width:100%}

/* ══ EINWILLIGUNG ══ Das CSS des Dialogs stand hier bereits (Ausgabe des
   Generators) - ich hatte es beim Einbau des Bausteins ein ZWEITES Mal
   eingefuegt. Identische Regeln, also unsichtbar; genau deshalb gefaehrlich:
   eine spaetere Korrektur an einer der beiden Fassungen erreicht die andere
   nie. Die Dublette ist entfernt, die vorhandene Fassung weiter oben gilt.
   Markup und Skript des Bausteins stehen am Ende des <body>. ══ */
/* ══ KONTRAST-SCHALTER ══ Baustein aus _agentur/bausteine/kontrast-schalter.html ══ */
/* Höherer Kontrast auf Wunsch. Die Marke bleibt im Normalzustand exakt so, wie
   sie im Logo steht — wer mehr Kontrast braucht, schaltet ihn im Fuß der Seite
   ein. Umgebogen werden nur die drei Rollen, an denen Marke und Schrift
   aufeinandertreffen; Flächen ohne Text bleiben unberührt. */
/* Werte auf DIESE Palette gerechnet, nicht aus dem Baustein uebernommen: die
   dortigen Toene gehoeren zu einer orangen Marke. Gemessen mit
   werkzeuge/kontrast.py --hoch gegen alle Untergruende, auf denen die Rolle
   vorkommt.
   --accent-fg bleibt Weiss: der Akzent ist hier ein mittleres Grau, gegen das
   KEIN dunkler Ton 7:1 erreicht - Weiss liegt mit 5,87:1 am hoechsten. Einen
   Wert zu setzen, der weder die Marke trifft noch die Schwelle erreicht, waere
   das schlechteste Ergebnis (Vorgabe 2.3). */
:root[data-kontrast="hoch"]{
  /* Die Werte kommen aus den --hk-Rollen, damit JEDE Marke ihren eigenen
     Hochkontrast-Satz mitbringen kann. Die Standardwerte unten im :root sind die
     hier gemessenen des neutralen Frames (7,06:1 bzw. 7,09:1 statt 5,29:1 und
     4,79:1) - eine Marke, die nichts setzt, verliert also nichts. */
  --accent-fg:var(--hk-accent-fg);
  --on-accent:var(--hk-accent-fg);
  --accent-ink:var(--hk-accent-ink);
  --eyebrow-color:var(--hk-accent-ink);
  --text-muted:var(--hk-text-muted);
}
.kontrast-schalter{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kontrast-schalter[aria-pressed="true"]::after{content:" \2713"}
/* Ueberschrift und Vorspann stehen UEBER dem hellgrauen Kasten, nicht darin und
   nicht mittig ueber der ganzen Sektion (Nutzer-Vorgabe 31.08.2026). Der Kasten
   ist das Formular; was ihn ankuendigt, gehoert davor und linksbuendig auf seine
   Kante - eine zentrierte Ueberschrift ueber zwei ungleich breiten Spalten sitzt
   ueber keiner von beiden. */
.kform-spalte{display:flex;flex-direction:column}
.kform-spalte .kform-box{flex:1}
.kform-sec .kform-titel{margin:var(--space-1) 0 var(--space-2);font-size:var(--fs-h2)}
.kform-lead{margin:0 0 var(--space-5);color:var(--text-secondary);max-width:60ch}

/* ── Knopf-Reihen: nie zwei verschieden hohe Knoepfe nebeneinander ──────────
   Nutzer-Vorgabe 01.09.2026: "mach nie zwei unterschiedlich hohe buttons
   nebeneinander, das sieht immer doof aus". Gemessen an der Vermietungs-Seite:
   48 px neben 67 px, weil der Telefon-Knopf zwei Zeilen traegt und der andere
   eine. Ausgerichtet wird im CONTAINER: `align-items:stretch` gibt beiden die
   Hoehe der Zeile, ohne dass der zweizeilige Knopf seine Bauart aufgibt.
   `:has()` trifft auch Reihen ohne eigene Klasse - davon gibt es die meisten.
   Ein Browser ohne :has() zeigt den bisherigen Zustand: harmlose Richtung. */
/* `.header-right` ist ausgenommen: dort stehen Knopf, Burger und
   Anruf-Symbol nebeneinander und sehen fuer `:has()` aus wie eine
   Knopfreihe - sind aber die Kopfzeile, die NIE umbrechen darf. Chrome
   rechnet die Spezifitaet von `:has()` aus dem ganzen Argument, deshalb
   schlaegt diese Regel selbst `.site-header .header-right`; ausschliessen
   ist der ehrlichere Weg als immer laengere Selektoren. */
div:has(> .btn + .btn):not(.header-right), p:has(> .btn + .btn),
div:has(> .btn + .btn-call):not(.header-right){
  display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-3)}
/* KEIN height:auto. Es sollte fixe Hoehen loesen, damit beide Knoepfe die
   Zeilenhoehe annehmen - hat aber auch die ABSICHTLICH quadratischen
   Icon-Knoepfe der mobilen Kopfzeile plattgemacht: aus 46x46 wurden 46x26
   (gemessen 01.09.2026). `align-items:stretch` allein genuegt: es dehnt nur
   Kinder OHNE eigene Hoehe, ein Icon-Knopf behaelt seine. */

/* ══ SCHNELLZUGRIFF ══ feste Leiste am rechten Rand ══════════════════════════
   Drei bis vier Wege, den Betrieb zu erreichen, die IMMER sichtbar bleiben -
   egal wie weit jemand gescrollt hat. Der Knopf zeigt zunaechst nur sein
   Symbol; beim Ueberfahren faehrt die Beschriftung aus. Das kostet in Ruhe
   fast keine Flaeche und ist im Bedarfsfall trotzdem beschriftet.

   Farbe: die Marke. EINE Ausnahme - WhatsApp traegt sein eigenes Gruen. Ein
   WhatsApp-Knopf in Markenfarbe wird nicht als WhatsApp erkannt; das Gruen ist
   hier keine Design-Entscheidung, sondern die Beschriftung.

   Symbole als INLINE-SVG, nicht als Icon-Schrift: laedt die Schrift nicht,
   steht sonst das blosse Wort da ("phone", "calendar_month") - genau so
   gesehen auf einer Seite, die dieses Bauteil mit einer Icon-Schrift baute.

   Am Telefon ausgeblendet: dort deckt die feste Handlungsleiste unten
   dieselben Wege ab, und zwei Schwebeleisten uebereinander sind eine zu viel. */
.schnellzugriff{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:var(--space-2);
  /* Ohne das dehnt der Spaltenfluss ALLE Knoepfe auf die Breite des
     breitesten - faehrt einer seine Beschriftung aus, werden die uebrigen
     stillschweigend mitgezogen und stehen leer und zu breit da. */
  align-items:flex-end}
.sz-knopf{display:flex;align-items:center;gap:0;
  background:var(--bg-accent);color:var(--on-accent);
  padding:12px 14px;border-radius:var(--radius) 0 0 var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,.18);text-decoration:none;
  transition:background var(--dur) var(--ease),gap var(--dur) var(--ease)}
.sz-knopf:hover,.sz-knopf:focus-visible{background:var(--accent);color:var(--on-accent);gap:10px}
.sz-knopf:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sz-knopf svg{width:22px;height:22px;flex:0 0 auto;order:2}
/* Die Beschriftung faehrt aus der Breite aus - `max-width` laesst sich
   weich schalten, `display` nicht. */
.sz-text{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:var(--fs-small);font-weight:var(--fw-semibold);
  transition:max-width var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.sz-knopf:hover .sz-text,.sz-knopf:focus-visible .sz-text{max-width:220px;opacity:1}
/* WhatsApp: eigenes Gruen, auch beim Ueberfahren. */
.sz-knopf--wa{background:#25d366;color:#fff}
.sz-knopf--wa:hover,.sz-knopf--wa:focus-visible{background:#128c7e;color:#fff}
@media (max-width:900px){.schnellzugriff{display:none}}
@media (prefers-reduced-motion:reduce){.sz-knopf,.sz-text{transition:none}}

/* ── Eingabefelder malen ihre eigene helle Flaeche ───────────────────────────
   …also setzen sie auch ihre Textfarben selbst. Ohne das erben sie im dunklen
   Formular die Zonenfarbe Weiss und schreiben Weiss auf Weiss: die
   Beschriftung verschwindet, sobald man ins Feld klickt (gemeldet 2026-09-01).
   Die zweite Regel MUSS mit - die Fokus-Regel des Bauteils setzt
   `--text-secondary` und ist spezifischer als eine schlichte `.field label`. */
.field input,.field textarea{color:var(--ink)}
.field label{color:var(--ink-3)}
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{color:var(--ink-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}

/* ── Blaetter-Pfeile mobil aus (Nutzer-Vorgabe 01.09.2026) ──────────────────
   Auf dem Telefon ist die Reihe ohnehin ein Wisch-Streifen: der Finger
   blaettert direkt, die Pfeile verdecken dabei nur die Karten. Am Schirm
   bleiben sie - dort gibt es keine Wischgeste. Die bestehende Regel "Pfeile
   nur, wenn es etwas zu blaettern gibt" bleibt daneben gueltig: sie
   entscheidet ueber das OB, diese ueber das WO. */
@media (max-width:700px){
  .reihe-pfeil{display:none !important}
  /* Die Pfeile UEBER der Sektion (Kartenreihe im Sektionskopf) gehoeren
     dazu - dort blaettert der Finger genauso. Sie sitzen nicht an der Reihe,
     sondern in `.lz-nav` im Kopf, deshalb eine eigene Zeile. */
  .lz-nav{display:none !important}
}


/* ════════════════════════════════════════════════════════════════════════════
   KNOPP GARAGEN · MARKEN-SCHICHT ueber dem Referenz-Frame
   Nur das, was der reine Token-Tausch nicht erreicht. Jede Regel hier ist eine
   BAUTEIL-Regel aus styleguide.html, uebersetzt auf die Klassennamen dieses
   Wireframes. Alle Werte kommen aus dem :root-Block oben in dieser Datei.
   KEINE Regel hier aendert Anordnung, Reihenfolge, Sektionshoehe, Abstand oder
   Textgroesse - das ist Sache des Wireframes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · WAS DAS WIREFRAME ENTSCHIEDEN HAT ──────────────────────────────────
   Hell-Dunkel ist keine Farbfrage, sondern Rhythmus - und der gehoert dem
   Wireframe. Es hat einen DUNKLEN Kopf ueber einer hellen Seite gesetzt, acht
   dunkle Sektionen dazwischen und einen HELLEN Formularkasten im hellen Hero.
   Das System hatte an zwei dieser Stellen etwas anderes vorgeschlagen (weisser
   Kopf, Formular auf der Stahlblau-Flaeche); hier gewinnt das Wireframe in der
   Stufe, das System in der Farbe. Nachgetragen in design-system.md.
   Die Logo-Regel bleibt dabei unangetastet: das Zeichen traegt eine rote Platte
   und steht deshalb auf jeder farbigen Flaeche auf einer weissen (.logo-plate) -
   im Kopf, im Menue, im Fuss. Genau dafuer gibt es diese Rolle. */
:root{
  /* Kopf DUNKEL wie im Wireframe - Stahlblau, die Kontrastflaeche der Marke. */
  --header-bg:var(--bg-accent);
  --header-fg:var(--on-accent);
  --header-fg-soft:var(--on-accent-soft);
  --header-line:var(--veil-strong);
  --header-line-rest:var(--veil-strong);   /* die Leiste ist IMMER abgesetzt */
  --header-cta-bg:var(--on-accent);
  --header-cta-fg:var(--btn-on-accent-fg);
  --header-ph-line:var(--veil-strong);

  /* Karte = WEISS mit Linie (Styleguide, Abschnitt "Cards & Panels"). Der Frame
     faerbt seine Karten ueber diese Rolle; die Linie kommt unten dazu. */
  --surface:var(--bg);
  /* Die Linie der WEISSEN Karte. Sie muss gegen die KARTE stehen, nicht gegen
     die Seite - deshalb eine am :root berechnete Kopie, die in dunklen Zonen
     nicht auf den Schleier umspringt. Gleiches Muster wie --text-basis. */
  --border-basis:var(--border);

  /* Fehler-Signal. Der Styleguide zeichnet das beanstandete Feld mit --brand
     (Knopp-Navy, 14,09:1); der Frame braucht dafuer eine eigene Rolle. Rot
     kommt NICHT dazu: das Material gibt nur das Logo-Rot her, und das ist in
     Schritt 1 bewusst beim Zeichen geblieben. Damit der Fehler trotzdem die
     lauteste Stufe bleibt, traegt er Kante UND Ring UND Meldungskasten, und
     "ausgefuellt" liegt eine Stufe darunter im Stahlblau (s. Abschnitt 6).
     Farbe ist hier ohnehin nicht das einzige Signal - die Meldung benennt das
     Feld, aria-invalid sagt es der Sprachausgabe. */
  --negativ:var(--brand);

  /* Spur des Fortschrittsbalkens (Anfrage-Strecke). */
  --fn-bar-track:var(--border-strong);
}

/* ── 1 · SCHRIFT ────────────────────────────────────────────────────────────
   Knopf: der Frame setzt ihn in der Anzeigeschrift, das System in der
   Textschrift (--font-btn = Roboto) mit --fw-btn 700 - handfest wie die
   Wortmarke. Laufweite wie alle kleinen Versalien-Beschriftungen. */
.btn{font-family:var(--font-btn);font-weight:var(--fw-btn);letter-spacing:var(--ls-klein)}
/* Fokus wie im Styleguide: 2px in --focus, 4px Abstand - nie ohne Ersatz. */
.btn:focus-visible,.opt-tile:focus-visible,.nav-auf:focus-visible,.tile:focus-visible,
.ref:has(:focus-visible),.ref-nav button:focus-visible,.faq summary:focus-visible{
  outline:var(--border-w-2) solid var(--focus);outline-offset:var(--space-1)}
/* Gewichts-Kette: nach unten nie schwerer. Zwei Stellen setzen die
   Anzeigeschrift in H3-Groesse auf 700 und waeren damit schwerer als jede H2. */
.split-name,.bubble{font-weight:var(--fw-heading)}

/* ── 2 · TYPENSCHILD ────────────────────────────────────────────────────────
   Die Eigenart des Zeichens: der Name steht im Logo nicht frei, sondern IN
   einer Platte. Die Vorzeile dieser Marke ist deshalb kein Text mit Strich
   davor, sondern ein kleines Schild. --eyebrow-dash-w bleibt auf 0 - ein
   zweites Zeichen fuer dieselbe Sache waere ein Buffet.
   p.eyebrow steht im Frame als Typ+Klasse, damit es sich gegen Container-
   Regeln durchsetzt; diese Regel braucht dieselbe Spezifitaet. */
p.eyebrow,.eyebrow{
  background:var(--marker-bg);color:var(--marker-fg);
  border:var(--border-w) solid var(--marker-line);border-radius:var(--radius);
  padding:var(--space-2) var(--space-3);
  /* In einer Flex-Spalte (.split-body) wuerde das Schild sonst auf volle
     Breite gezogen. In Block-Koepfen (.sec-head, text-align:center) bleibt die
     Zeile davon unberuehrt und das Schild steht weiter mittig. */
  align-self:flex-start;width:max-content;max-width:100%}
/* Auf farbigen Flaechen kehrt das Schild um: weisse Platte, Zonenfarbe als
   Schrift - wie das Logo, nur andersherum. Dieselbe Spezifitaet wie die
   Zonenregeln des Frames, damit sie greift. */
section.zone-dunkel,section.zone-brand,.cta-band,.fact-sec,.vid-sec,.medien-sec,
.geo-sec,.cgrid-sec,.cmp-sec,.mnav,.site-header,.site-footer{
  --marker-bg:var(--on-accent);--marker-fg:var(--bg-accent)}
.site-footer{--marker-fg:var(--bg-dark)}
.fact-sec p.eyebrow,.vid-sec p.eyebrow,.medien-sec p.eyebrow,.cta-band p.eyebrow{
  color:var(--marker-fg);opacity:1}
/* Das eine Marken-Wort in der H1: der Frame legt einen Schwung darunter. Er
   bekommt den Akzent der Marke, das Wort selbst bleibt in der Ueberschriften-
   farbe - EIN Zeichen je Stelle. */
.schwung path{fill:var(--accent);opacity:1}

/* ── 3 · KARTEN UND PANELS ──────────────────────────────────────────────────
   Styleguide: die Karte ist WEISS mit einer 1-px-Linie in --border, Radius 4px,
   ohne Schatten. Ein Bauteil behaelt seine Bauart, wenn die Flaeche darunter
   wechselt: auf dunklem Grund wechselt die FARBE der Linie - gegen die KARTE,
   nicht gegen die Seite -, nicht ihre Existenz. */
.fact-card,.lz-card,.ill-card,.stelle-card,.blog-card,.duo-card--plain,
.pcard,.faq,.wahl-karte,.rev-card,.jm-box,.ck-box{
  border:var(--border-w) solid var(--border-basis)}
/* Eine helle Zone darf die Karte nicht in ihrer eigenen Flaeche aufloesen -
   sie tut es auch nicht, weil die Linie sie traegt. */
section.zone-hell{--surface:var(--bg)}
/* DUNKLE Karten (das Wireframe hat sie dunkel gesetzt, also bleiben sie dunkel):
   dieselbe 1-px-Linie, nur im Ton, der gegen die KARTE steht. */
.duo-card--hi,.contact-card,.icard{
  border:var(--border-w) solid var(--veil-strong)}
/* Die Kontakt-Karte ist eine AUFGEHELLTE Flaeche auf der Kontrastflaeche
   (Schleier). Der weiche Vordergrund kommt darauf nur noch auf 3,87:1 -
   gemessen. Auf dieser einen, helleren Flaeche traegt der Nebentext deshalb
   volles Weiss: 5,04:1. Wer eine Flaeche setzt, setzt auch ihren Text. */
.contact-card{--on-accent-soft:var(--on-accent);--text-secondary:var(--on-accent);
  --text-muted:var(--on-accent)}
/* Grosse Panels, die BUENDIG an einem Bild sitzen, tragen eine Flaeche statt
   einer Linie: der Frame hat die Trennlinie zwischen Bild und Inhalt
   ausdruecklich abgewaehlt - eine Kante nur am Textteil zerlegte den Block in
   zwei Kacheln. Sie stehen auf der weissen Grundflaeche und brauchen deshalb
   die zweite Zone (Hallengrau), nicht das hellere Kartengrau; sonst waere der
   Absatz, den das Wireframe hier gebaut hat, nicht mehr zu sehen.
   (.split-body regelt der Frame selbst: graue Sektion, weisse Karte.) */
.kontakt-body,.geo2-body{background:var(--bg-alt)}
/* Plaketten und Schrittzahlen tragen den Radius der Marke. Dieses Zeichen kennt
   nur das weiche Rechteck, keine Kapsel - deshalb steht --radius-pill ohnehin
   auf --radius; die beiden festen Kreise hier folgen nach. Runde Portraets
   bleiben rund: das ist die Form eines Bildes, nicht die eines Bauteils. */
.steps b,.cta-call .ico,.ablauf-nr{border-radius:var(--radius)}

/* ── 4 · TEXT AUF BILD ──────────────────────────────────────────────────────
   EINE Technik fuer diese Marke: SOLIDE PLATTE auf dem Bild - klein als
   Beschriftung, gross als Kopf, immer dasselbe Prinzip. Kein Scrim, kein
   Milchglas, kein Verlauf. Begruendung aus dem Material: in der Stilrichtung
   steht die Schrift auf einem vollflaechigen Farbfeld NEBEN dem Foto, nie IM
   Foto. Dunkle Schrift auf weisser Platte: 12,99:1.
   Die Verlaeufe des Frames entfallen damit ersatzlos - sie waren der Trichter
   fuer weisse Schrift, und weisse Schrift steht hier nicht mehr auf dem Foto.
   Das Polster nach oben gehoerte zur Ausblendung des Verlaufs, nicht zur
   Platte; es folgt deshalb der Platte. Lage, Breite und Schriftgroessen bleiben
   die des Wireframes. */
.split-name{background:var(--bg);color:var(--heading);text-shadow:none;
  padding:var(--space-3) var(--space-5)}
/* Pascal 07.10.2026: die Platte lief ueber die ganze Bildbreite und bildete mit der
   weissen Textflaeche daneben ein weisses L. Jetzt ein kompaktes Schild unten links
   IM Bild - Platte bleibt (System), Bogen ist weg. */
.split-name{left:var(--space-4);right:auto;bottom:var(--space-4);max-width:calc(100% - 2*var(--space-4));
  padding:var(--space-2) var(--space-4);border-radius:var(--radius);font-size:clamp(16px,1.6vw,19px);
  box-shadow:0 8px 24px -10px rgba(14,50,78,.35)}
.split-name span{color:var(--text-secondary)}
.mt-person figcaption{background:var(--bg);color:var(--heading);
  padding:var(--space-3)}
.mt-person figcaption span{color:var(--text-secondary);opacity:1}
.slides::after,.ref--foto .slides::after{display:none}
/* Der Zaehler im Bild bekommt seine eigene kleine Platte - dieselbe wie die
   Bild-Beschriftung des Styleguides. */
.ref-count{background:var(--bg);color:var(--heading);text-shadow:none;
  padding:2px var(--space-2);border-radius:var(--radius)}
/* Die Beschriftung der Foto-Kachel: dieselbe Platte, gross. */
.ref--foto .ref-body{background:var(--bg);color:var(--ink);--heading:var(--ink-h);
  padding:var(--space-4)}
.ref--foto .ref-body :is(h2,h3){color:var(--ink-h);text-shadow:none}
/* Auf der weissen Platte ist ein weisses Etikett unsichtbar - dort steht das
   Typenschild der Marke. */
.ref--foto .ref-tag{background:var(--marker-bg);color:var(--marker-fg)}
/* Bildplatz: dieselbe Schraffur wie im Styleguide. Die gestrichelte Kante des
   Frames bleibt - sie sagt "hier fehlt noch ein Foto", und genau das stimmt.
   Die Regel ist bewusst niedrig spezifiziert: Logo-, Siegel- und Portraet-Slots
   setzen ihre Flaeche selbst und bleiben unberuehrt. */
.ph{background:repeating-linear-gradient(135deg,var(--bg-alt) 0 14px,var(--fill) 14px 28px)}

/* ── 5 · KOPFZEILE ──────────────────────────────────────────────────────────
   Dunkle Leiste. Der Frame ist dafuer gebaut und holt seine Farben aus den
   --header-*-Rollen; nachzuziehen bleibt der Unterstrich der Navigation -
   Stahlblau auf Stahlblau waere unsichtbar - und das Zeichen auf seiner Platte. */
.site-header .site-nav>a::after,.site-header .nav-auf::after{background:var(--on-accent)}
/* Das Zeichen traegt Rot und braucht hellen Grund: auf jeder farbigen Flaeche
   steht es auf einer weissen Platte. Hoehe und Lage bleiben die des Frames. */
.brand,.mnav-top>.logo-plate,.footer-brand>.logo-plate{display:inline-flex}
.logo-plate{align-items:center;justify-content:center;background:var(--bg);
  border-radius:var(--radius);padding:var(--space-2) var(--space-3)}
/* Das Zeichen steht ueberall auf --logo-h = 56px: darunter faellt "GARAGEN"
   im Logo unter die Eyebrow-Groesse (gemessen in Schritt 1). In der Leiste
   haelt die Platte deshalb ihr Polster knapp - die Hoehe der Kopfzeile ist
   Sache des Wireframes, nicht des Systems. */
.site-header .logo-plate,.mnav-top .logo-plate{padding:var(--space-1) var(--space-3)}
.logo{height:var(--logo-h);width:auto;max-width:100%;display:block}
/* Schatten beim Scrollen - solide Marke, kein Glas. */
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}

/* ── 6 · FORMULAR ───────────────────────────────────────────────────────────
   Der Kasten ist HELL (Entscheidung des Wireframes, s. Abschnitt 0). Alles
   darin folgt den Zustaenden des Styleguides: Ruhe, Fokus, ausgefuellt, Fehler
   mit Meldung, deaktiviert.
   Ein Feld wird ueber den TON seiner Linie deutlich (--control-line, 3,10:1),
   nicht ueber mehr Dicke: alle Kanten im System tragen 1px. */
.field input,.field textarea,.field select,.chosen{
  border:var(--border-w) solid var(--control-line)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:var(--border-w-2) solid var(--focus);outline-offset:var(--space-1);
  border-color:var(--accent);box-shadow:none}
/* ausgefuellt: die Kante traegt den Arbeitston der Marke. Der Styleguide kennt
   vier Zustaende (Ruhe, Fokus, Fehler, Gesperrt) - der fuenfte fehlte und ist
   hier ergaenzt, nachgetragen in design-system.md. Er darf NICHT dieselbe Kante
   bekommen wie der Fehler, sonst hat der Fehler keine Steigerung mehr:
   Ruhe grau 3,10:1 - ausgefuellt Stahlblau 7,03:1 - Fehler Navy 14,09:1 mit
   Ring und Meldung. */
.field input:not(:placeholder-shown),.field textarea:not(:placeholder-shown){
  border-color:var(--accent)}
/* deaktiviert */
.field input:disabled,.field textarea:disabled,.field select:disabled{
  background:var(--fill);color:var(--text-muted);border-color:var(--border-basis);
  cursor:not-allowed}
.field input:disabled~label,.field textarea:disabled~label{color:var(--text-muted)}
/* Fehler: Kante UND Meldung. Farbe ist nie das einzige Signal. */
.ist-fehler{border-color:var(--negativ) !important;
  box-shadow:0 0 0 var(--border-w) var(--negativ)}
.form-fehler{border-radius:var(--radius)}
/* Auswahl-Kachel: dasselbe weiche Rechteck, nie eine Pille. Gleiche Linienbreite
   in allen Zustaenden, damit beim Auswaehlen nichts springt. */
.opt-tile{border-color:var(--control-line)}
.opt-tile:hover{border-color:var(--accent);background:var(--form-sel-soft)}
.opt-tile.is-sel{border-color:var(--accent);background:var(--form-sel-soft);
  box-shadow:inset 0 0 0 var(--border-w) var(--accent);font-weight:var(--fw-semibold)}
/* Einwilligungs-Haken traegt die Marke wie jedes andere Bedienelement. */
.consent input[type=checkbox],.ck-zeile input[type=checkbox]{accent-color:var(--accent)}

/* ── 7 · ZEICHEN UND LINIEN ─────────────────────────────────────────────────
   Der Haken ist Stahlblau, auf dunklem Grund weiss. Kein Gruen: das Material
   gibt keines her. Beides haengt an --positive und kommt damit von selbst;
   nachzuziehen bleibt nur, was der Frame fest auf eine Icon-Farbe setzt. */
.geo2-ways svg,.ref-tag,.blog-thema{color:var(--accent-ink)}
/* Der Wisch ueber dem Knopf ist LICHT: auf hellen Knoepfen ein neutrales
   Hellgrau, nie ein Marken-Ton. Die hellen Varianten des Frames setzen das
   selbst; diese drei tragen eine weisse Flaeche, ohne eine davon zu sein. */
.cc-call,.cta-call,.cta-btn,.site-header .btn:not(.header-burger),
.mnav-foot .btn,.mnav-list .mnav-cta .btn{--shine:var(--shine-hell)}

/* Hero wie S&R (Pascal 07.10.2026): Pinselstrich sichtbar in Akzentfarbe, KI-Zeichnung im Hintergrund */
.schwung>svg{display:block}
.schwung path{fill:var(--accent);opacity:1}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;z-index:-1;left:-2%;bottom:-3%;width:min(1400px,110vw);aspect-ratio:16/9;background:var(--hero-zeichnung-farbe,currentColor);-webkit-mask:var(--hero-zeichnung,linear-gradient(transparent,transparent)) center/contain no-repeat;mask:var(--hero-zeichnung,linear-gradient(transparent,transparent)) center/contain no-repeat;opacity:.035;pointer-events:none}
@media (max-width:899px){.hero::after{top:70px;bottom:auto;left:-6%;width:160vw;opacity:.04}}
/* ── Hero-Formular einladender (Pascal 07.10.2026, Elektro Pi: "laedt noch nicht genug ein") ──
   Vorher: weisser Kasten mit 1-px-Linie, graue Kacheln - las sich wie ein
   deaktiviertes Formular. Jetzt ein Objekt mit zwei Zonen (Color-Blocking):
   ROTER Kopf mit weissem Titel und Schritten (der Blick landet hier zuerst),
   darunter weisser Koerper mit weissen Kacheln, feiner Rand, Rot bei Hover/Wahl
   (Pascal-Vorgabe 02.10.: Kacheln weiss mit Rand statt hellgrau). Kasten hebt
   sich mit weichem Schatten statt Linie von der Seite ab. */
.hero .hero-form{border:0;overflow:hidden;padding-top:0;
  /* 07.10.2026 Pascal "Schatten schoener": drei weiche Lagen statt einer harten
     Kante unten - Kontakt, Umgebung, weiter Halo; rundum statt nur nach unten. */
  box-shadow:0 1px 2px color-mix(in srgb,var(--bg-dark) 5%,transparent),0 8px 24px -6px color-mix(in srgb,var(--bg-dark) 9%,transparent),0 24px 64px -12px color-mix(in srgb,var(--bg-dark) 13%,transparent)}
.hero .hero-form>.hero-form-titel{margin:0 calc(-1*var(--space-5));padding:var(--space-5) var(--space-5) var(--space-3);
  background:var(--accent);color:var(--on-accent)}
.hero .hero-form>.steps{margin:0 calc(-1*var(--space-5)) var(--space-4);padding:0 var(--space-5) var(--space-5);
  background:var(--accent)}
.hero .hero-form>.steps b{background:transparent;color:var(--on-accent);border-color:color-mix(in srgb,var(--on-accent) 60%,transparent)}
.hero .hero-form>.steps li.is-on b{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.hero .hero-form>.steps li::after{background:color-mix(in srgb,var(--on-accent) 45%,transparent)}
.hero .opt-tile{background:var(--form-bg);border:1px solid var(--line-hell,var(--border));
  box-shadow:0 1px 2px color-mix(in srgb,var(--bg-dark) 6%,transparent)}
.hero .opt-tile:hover{background:var(--form-bg);border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--accent) 45%,transparent)}
.hero .opt-tile.is-sel{background:var(--form-bg);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hero{--hero-zeichnung:url(../img/hero-zeichnung.svg)}

/* ── Oberzeile: kleines Schild (Pascal 07.10.2026) ──────────────────────────
   Das Typenschild bleibt - aber klein: als 13-px-Platte mit 8x12-Polster
   hatte es Form und Gewicht eines Knopfs. Jetzt 11 px, knappes Polster, die
   Ueberschrift darunter fuehrt wieder. */
p.eyebrow,.eyebrow{padding:3px 8px;font-size:11px;letter-spacing:.12em;line-height:1.35;
  margin-bottom:var(--space-2)}

/* ── Logo ohne weisse Box (Pascal 07.10.2026, Versuch - "wenn doof, zurueck") ──
   Statt das Zeichen auf eine weisse Platte zu stellen, kippen seine BLAUEN
   Teile (Schriftzug GARAGEN, Umrandung der roten Platte) auf dunklem Grund
   auf Weiss. Die rote Platte mit KNOPP bleibt rot - sie traegt sich auf
   Stahlblau und Navy selbst. */
.site-header,.mnav-top,.site-footer{--logo-ink:var(--on-accent)}
.site-header .logo-plate,.mnav-top .logo-plate,.site-footer .logo-plate{background:transparent;padding:0}

/* Siegel/Icon im Siegelfeld steht NACKT (Pascal 07.10.2026): sobald ein Feld ein Bild
   traegt, faellt seine Box weg - per :has, also auch dann, wenn beim Einsetzen die
   Klasse has-img vergessen wurde (mehrfach passiert). Stehengebliebener Text wird
   ausgeblendet; pruefe.py meldet ihn zusaetzlich, damit er auch im Quelltext verschwindet. */
.siegel>div:has(img,svg,picture){border:0;padding:0;background:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;font-size:0;color:transparent}
.siegel>div:has(img,svg,picture)>:is(img,svg,picture){max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}

@media (max-width:600px){
  /* Mobil wie rohrreinigung-niemann.de (Pascal 07.10.2026): KEINE Bloecke mehr -
     die Stapelung machte aus fuenf Zeilen fuenf Bildschirme und nahm den direkten
     Zeilenvergleich. Stattdessen eine weisse Tabellenkarte auf der Farbflaeche,
     drei Spalten, die eigene Spalte hell in der Markenfarbe getoent, Haken in
     Markenfarbe, beim Wettbewerb ein graues Kreuz im Kreis. */
  .cmp{table-layout:fixed;font-size:13px;background:var(--bg,#fff);border-radius:var(--radius);
    overflow:hidden;border-collapse:separate;border-spacing:0;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
  .cmp th,.cmp td{padding:10px 8px;vertical-align:middle;border-bottom:1px solid var(--border,#e6e6e6);
    color:var(--ink,#2b2f33);line-height:1.3;hyphens:auto;overflow-wrap:break-word}
  .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
  .cmp thead th{font-size:11px;letter-spacing:.06em;color:var(--ink-3,#6b7177);padding-block:12px}
  .cmp thead th:not(:first-child){text-align:center;font-size:13px;letter-spacing:0;text-transform:none;
    font-weight:var(--fw-bold)}
  .cmp tbody th{width:36%;font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-h,#2b2f33)}
  .cmp .col-us,.cmp thead .col-us,.cmp tbody tr:last-child .col-us{border-radius:0;
    background:var(--accent-soft);color:var(--accent)}
  .cmp thead .col-us{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
  .cmp td{text-align:left}
  .cmp td:not(.col-us){color:var(--ink-3,#6b7177)}
  .cmp-mark{align-items:center;gap:6px;max-width:100%}
  .cmp .col-us .cmp-mark{font-weight:var(--fw-semibold)}
  .cmp .col-us .cmp-mark svg{color:var(--accent);width:15px;height:15px;stroke-width:3}
  .cmp td:not(.col-us) .cmp-mark svg{width:16px;height:16px;padding:3px;border-radius:50%;
    background:var(--ink-3,#9aa0a6);color:#fff;stroke-width:3.2;box-sizing:border-box}
}

/* ── Kopf-Rhythmus (Pascal 07.10.2026: "Abstaende Oberueberschrift nicht einheitlich")
   Ueberall gleich: Oberzeile -> Ueberschrift 8 px, Ueberschrift -> Text 16 px.
   Vorher 0/4/8/12/16/24 bzw. 8/16 px, weil einige Bauteile ihre Kinder per
   Flex-gap stapeln (das addiert sich zum Margin) und andere eigene Margins
   setzen. Doppelte Klasse = genug Gewicht gegen die Einzelregeln der Bauteile.
   Pruefung: scripts/kopf_rhythmus.py. */
.eyebrow.eyebrow{margin-top:0;margin-bottom:var(--space-2)}
.eyebrow.eyebrow+:is(h1,h2,h3){margin-top:0;margin-bottom:0}
.eyebrow.eyebrow+:is(h1,h2,h3)+:is(p,ul,ol):not(.eyebrow){margin-top:var(--space-4)}
/* Bauteile mit gap: der gap ist schon da, der Margin gleicht nur aus */
:is(.split-body,.mt-body)>.eyebrow.eyebrow{margin-bottom:calc(var(--space-2) - var(--space-4))}
:is(.split-body,.mt-body)>.eyebrow.eyebrow+:is(h1,h2,h3)+:is(p,ul,ol){margin-top:0}
/* Kontakt-Spalte setzte am Handy 4 px - gleiche Regel, mehr Gewicht */
.col-head .eyebrow.eyebrow,.kontakt-body .col-head .eyebrow.eyebrow{margin-bottom:var(--space-2)}

/* ── Hero-Formular: Schritt-Namen, flacher Kopf, Fuss mit Siegeln (Pascal 07.10.2026) ──
   (2) Unter jedem Schrittkreis ein Wort: der Besucher sieht vorher, was kommt.
   (3) Kopf flacher - die Kacheln (die eigentliche Handlung) ruecken nach oben.
   (4+5) Das Formular endet in einem eigenen Fuss: eine Sicherheits-Zeile und die
   Siegel, OHNE Luecke als Teil desselben Objekts statt als zweiter Kasten darunter. */
.hero .hero-form>.hero-form-titel{padding-top:var(--space-4);padding-bottom:var(--space-1)}
.hero .hero-form>.steps{padding-bottom:calc(var(--space-3) + 18px);margin-bottom:var(--space-4)}
.hero .hero-form>.steps li{position:relative}
.hero .hero-form>.steps li>span{position:absolute;top:calc(100% + 4px);left:0;width:var(--step-d,30px);
  display:flex;justify-content:center;white-space:nowrap;font-size:11px;line-height:1.2;letter-spacing:.02em;
  color:var(--on-accent);opacity:.94}
.hero .hero-form>.steps li.is-on>span{opacity:1;font-weight:var(--fw-semibold)}
.hero .hero-form{padding-bottom:0}
.hero .hero-form>.form-fuss{margin:var(--space-4) calc(-1*var(--space-5)) 0;padding:var(--space-3) var(--space-5) var(--space-4);
  background:transparent;border-top:1px solid var(--border)} /* weiss statt grau (Pascal 07.10.): ein ruhiges Objekt */
.form-sicher{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:0 0 var(--space-3);
  font-size:var(--fs-small);color:var(--text-secondary)}
.form-sicher svg{width:15px;height:15px;flex:0 0 auto;color:var(--text-muted)}
.hero .form-fuss>.siegel{margin:0;padding:0;border:0;background:none;box-shadow:none}

/* ── Mobil: Telefon mit Gesicht + Nummer, wenn das Logo Platz laesst (Pascal 07.10.2026) ──
   Kompakte Logos (z. B. Knopp) lassen am Handy genug Raum fuer die volle Telefon-Angabe.
   Das Skript unten setzt .tel-voll nur, wenn Logo, Nummer und Menue ohne Ueberlappung
   nebeneinander passen; sonst bleibt es beim Telefon-Symbol. */
@media (max-width:939px){
  .site-header.tel-voll .header-right .phone{display:inline-flex;flex-direction:row;align-items:center;gap:8px}
  .site-header.tel-voll .header-cta-ico{display:none}
  .site-header.tel-voll .phone__ava{width:36px;height:36px}
  .site-header.tel-voll .phone__label{font-size:11px}
  .site-header.tel-voll .phone__num{font-size:16px}
}

/* ── Logo-Rot als Signal, vereinzelt (Pascal 07.10.2026) ─────────────────────
   Das Rot der Knopp-Platte (#A52B2C) holt das Logo in die Seite, aber nur an den
   Stellen, wo der Blick ohnehin landet: der Pinselstrich unter dem Versprechen der
   H1 und die drei Vorteils-Marken im Hero. Alles Handlungs-relevante (Knoepfe,
   Ueberschriften, Formular) bleibt Blau - so bleibt das Rot ein Akzent und wird
   keine zweite Markenfarbe. Weiss auf dem Rot: 6,6:1. */
:root{--signal:#A52B2C}
.schwung path{fill:var(--signal)}
.hero .usp-ico{background:var(--signal);border-color:var(--signal)}
.hero .usp-ico svg{stroke:#fff}
/* In mehreren Sektionen (Pascal 07.10.2026: "in mehreren Sektionen etwas rot"): die kleinen
   Marken, nie Flaechen, nie Knoepfe - Haken in Listen, Schrittnummern im Ablauf, Pfeil am
   Weiterlesen. Nur auf hellem Grund: Rot auf Blau flimmert. */
section:not(.zone-brand):not(.fact-sec):not(.cmp-sec):not(.cta-band):not(.vid-sec):not(.medien-sec):not(.geo-sec):not(.cgrid-sec) .check-ico{
  background:var(--signal);border-color:var(--signal)}
section:not(.zone-brand):not(.fact-sec):not(.cmp-sec):not(.cta-band):not(.vid-sec):not(.medien-sec):not(.geo-sec):not(.cgrid-sec) .check-ico svg{stroke:#fff}
.ablauf-sec .ablauf-nr{background:var(--signal);border-color:var(--signal);color:#fff}
/* Oberzeilen-Schild: wo es blau war, jetzt Logo-Rot (Pascal 07.10.2026). Auf blauen
   Flaechen bleibt es das weisse Schild mit blauer Schrift. */
section:not(.zone-brand):not(.fact-sec):not(.cmp-sec):not(.cta-band):not(.vid-sec):not(.medien-sec):not(.geo-sec):not(.cgrid-sec) p.eyebrow.eyebrow{
  background:var(--signal);border-color:var(--signal);color:#fff}
.ill-more .pfeil{color:var(--signal);font-size:1.25em;font-weight:700;line-height:1}


/* Hero-Titel der Varianten B/C, wenn sie WEITER UNTEN in der Liste stehen: eine Seite hat
   genau eine H1 - die Varianten tragen deshalb <h2 class="hero-h"> im Aussehen der H1. */
.hero-h{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-tight)}
/* ── HERO-VARIANTEN (Pascal 07.10.2026) ──────────────────────────────────────
   Drei Versionen desselben ersten Bildschirms - eine je Seite waehlen:
   A  .hero              Text links, Formular rechts (Standard, Lead-Seiten)
   B  .hero.hero--bild   Text links, Bild rechts (Unterseiten, Marken-/Imageseiten)
   C  .hero.hero--buehne Grosses Hintergrundbild oder -video, darauf eine weisse Karte
                         mit Ueberschrift, drei Stichpunkten, Knopf und Siegeln.
   Seitenpaare zum Vergleich erzeugt scripts/hero_varianten.py. */
.hero--bild .hero-bild{border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px color-mix(in srgb,var(--bg-dark) 5%,transparent),0 24px 64px -12px color-mix(in srgb,var(--bg-dark) 16%,transparent)}
.hero--bild .hero-bild .ph,.hero--bild .hero-bild>img{display:flex;width:100%;height:auto;aspect-ratio:4/5;border-radius:0}
.hero--bild .hero-bild>img{object-fit:cover;display:block}
@media (max-width:899px){.hero--bild .hero-bild .ph,.hero--bild .hero-bild>img{aspect-ratio:4/3}}

.hero.hero--buehne{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:min(80vh,760px);padding-block:clamp(48px,7vw,110px);background:var(--bg-dark)}
.hero--buehne::after{display:none}
.hero-buehne-bg{position:absolute;inset:0;z-index:-1}
.hero-buehne-bg>.ph,.hero-buehne-bg>img,.hero-buehne-bg>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;border-radius:0;aspect-ratio:auto}
/* Echtes Foto/Video: links leicht abdunkeln, damit die Karte sich abhebt - Markendunkel, nie Schwarz */
.hero-buehne-bg:has(>img,>video)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg-dark) 50%,transparent) 0,color-mix(in srgb,var(--bg-dark) 10%,transparent) 70%)}
.hero--buehne>.wrap{width:100%}
.hero-karte{background:var(--bg);border-radius:var(--radius);padding:clamp(24px,3vw,40px);max-width:580px;
  box-shadow:0 2px 6px color-mix(in srgb,var(--bg-dark) 8%,transparent),0 30px 70px -24px color-mix(in srgb,var(--bg-dark) 40%,transparent)}
.hero .hero-karte :is(h1,.hero-h){margin:0 0 var(--space-4);max-width:none;font-size:clamp(28px,3.2vw,44px)}
.hero-karte .usp{margin:0 0 var(--space-5);gap:var(--space-3)}
.hero-karte .usp li{font-size:var(--fs-body)}
.hero-karte .btn-mit-note{margin:0}
.hero-karte .siegel{margin:var(--space-5) 0 0;padding:var(--space-4) 0 0;border:0;border-top:1px solid var(--border);
  border-radius:0;background:none;box-shadow:none}
@media (max-width:899px){
  .hero.hero--buehne{display:block;min-height:0;padding:0 0 var(--space-6);background:var(--bg)}
  .hero-buehne-bg{position:relative;inset:auto;height:260px}
  .hero--buehne>.wrap{margin-top:-72px;position:relative}
  .hero-karte{max-width:none}
}
.hero-buehne-bg>.ph{padding-left:min(50%,640px)} /* Hinweis neben der Karte, nicht dahinter */
@media (max-width:899px){
  .hero-buehne-bg>.ph{padding-left:0}
  .hero-karte{padding:var(--space-5) var(--space-4)}
  .hero-karte .usp li{font-size:15px}
}

/* Variante B: Bild nicht so hoch (Pascal 07.10.2026) - quadratisch statt 4:5 - und ein
   rundes Siegel, das ueber die untere rechte Bildecke ragt (Pruefsiegel, Partner-
   Auszeichnung). Echtes Siegel: <img> in .hero-siegel, der Platzhalter-Rahmen faellt weg. */
.hero--bild .hero-bild{overflow:visible;position:relative;box-shadow:none}
.hero--bild .hero-bild>.ph,.hero--bild .hero-bild>img{aspect-ratio:1/1;border-radius:var(--radius);
  box-shadow:0 1px 2px color-mix(in srgb,var(--bg-dark) 5%,transparent),0 24px 64px -12px color-mix(in srgb,var(--bg-dark) 16%,transparent)}
.hero-siegel{position:absolute;right:-28px;bottom:-28px;width:132px;aspect-ratio:1/1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff 0,#eef1f4 45%,#cfd6dd 100%);
  border:2px dashed var(--border-strong);color:var(--text-muted);font-size:12px;
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--bg-dark) 35%,transparent)}
.hero-siegel:has(img){background:none;border:0}
.hero-siegel>img{width:100%;height:100%;object-fit:contain;border-radius:50%}
@media (max-width:899px){
  .hero--bild .hero-bild>.ph,.hero--bild .hero-bild>img{aspect-ratio:4/3}
  .hero-siegel{width:92px;right:12px;bottom:-22px;font-size:11px}
}

/* Kleine KI-Portraets: Hinweis als Text neben dem Bild statt im Bild (Pascal 08.10.2026). */
.ph--ki-neben::after,.ph--kopf::after{content:none!important}
.fg-ki{font-size:11px;color:var(--text-muted)}
/* Hero-Bild: die GANZE Garage zeigen (Pascal 08.10.2026) - Querformat statt Quadrat. */
.hero--bild .hero-bild>.ph{aspect-ratio:3/2!important}
/* Zwei Siegel nebeneinander an der Bildecke (Pascal 08.10.2026) */
/* ...und leicht uebereinander (Pascal 08.10.2026): das zweite liegt ein Viertel unter dem ersten. */
.hero-siegel{z-index:2}
.hero-siegel+.hero-siegel{right:71px;z-index:1}
@media (max-width:899px){.hero-siegel+.hero-siegel{right:81px}}
/* ── Zeiger aufs Formular (Pascal 07.10.2026 bei Elektro PI, 08.10.2026 in den Frame geholt) ──
   Im freien Seitenrand neben dem Formular: eine kurze, schraeg "hingeschriebene" Zeile, darunter
   ein gezeichneter Pfeil, der von aussen auf die erste Frage zeigt. Nur, wenn der Rand frei ist
   (ab 1420 px); auf schmaleren Schirmen laege er auf dem Formular. Markup:
   <div class="form-zeiger" aria-hidden="true"><span>Text</span><svg>…</svg></div>
   als Geschwister VOR der Formularkarte in einem position:relative-Eltern. */
.form-zeiger{display:none}
@media (min-width:1420px){
  .form-zeiger{display:block;position:absolute;left:100%;top:92px;width:170px;margin-left:-64px;
    color:var(--signal,var(--accent));pointer-events:none;z-index:3}
  .form-zeiger span{display:block;margin-left:70px;font-size:16px;line-height:1.2;font-weight:var(--fw-semibold);
    font-style:italic;letter-spacing:.01em;transform:rotate(9deg);transform-origin:left top;white-space:normal;width:118px;text-align:center}
  .form-zeiger svg{display:block;width:120px;height:auto;margin:14px 0 0 0}
}
.fg-buehne{position:relative;width:100%;max-width:1180px}
.fg-buehne .form-zeiger{top:120px}
/* Neben der 1180er-Karte ist der Rand erst ab 1560 px frei (sonst liegt der Zeiger auf den Seitenknoepfen) */
@media (max-width:1559px){.fg-buehne .form-zeiger{display:none!important}}
/* Stahl gegen Beton auf einen Blick (Pascal 08.10.2026). Weisse Buehne auf der Akzentflaeche,
   die Stahl-Spalte hervorgehoben (Rahmen, Empfehlung), Beton blass. */
.sv-sec .sec-head{max-width:760px}
.sv{margin-top:var(--space-5);background:var(--bg);color:var(--text);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);--heading:var(--ink-h);--text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3)}
.sv-kopf,.sv-zeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1fr)}
.sv-held{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-4);text-align:center}
/* Plakette, Garage und Name in gleichen Abstaenden; die Beton-Spalte haelt den Platz der
   Plakette frei, damit beide Garagen auf einer Linie stehen. */
.sv-held .sv-bild{display:block;width:min(100%,150px)}
.sv-held .sv-bild .tile-svg{display:block;width:100%}
.sv-badge--leer{visibility:hidden}
.sv-held b{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--heading)}
.sv-held .tile-svg{height:auto}
.sv-held--stahl{position:relative;background:var(--accent-soft)}
.sv-held--beton .tile-svg{opacity:.8}
.sv-held--beton b{color:var(--text-secondary)}
.sv-badge{white-space:nowrap;padding:4px 10px;border-radius:var(--radius);
  background:var(--signal,var(--brand));color:#fff;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.sv-zeile{border-top:1px solid var(--border)}
.sv-frage{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-5);font-weight:var(--fw-semibold);color:var(--heading)}
.sv-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--radius);background:var(--brand);color:#fff}
.sv-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.sv-zelle{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-5);line-height:1.3}
/* Die Tabelle muss am Desktop in einen Schirm passen (Audit: max. 1 Viewporthoehe) */
.sv-sec{padding-block:var(--space-7,56px)}
.sv-sec .sv-bar{margin-top:5px;height:6px}
.sv-zelle b{display:block;font-size:calc(var(--fs-body) * 1.08)}
.sv-zelle--stahl{background:var(--accent-soft)}
.sv-zelle--stahl b{color:var(--heading)}
.sv-zelle--beton{color:var(--text-secondary)}
.sv-zelle--beton b{color:var(--text-secondary)}
.sv-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%}
.sv-mark svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.sv-mark--ja{background:#2E7D4F}
.sv-mark--nein{background:#6E7581}
.sv-bar{display:block;width:100%;max-width:220px;height:8px;margin-top:8px;border-radius:var(--radius);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.sv-bar span{display:block;height:100%;border-radius:inherit;background:#2E7D4F}
.sv-bar--beton span{background:#9AA0A8}
.sv-fuss{margin:0;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);text-align:center;font-size:var(--fs-small);color:var(--text-secondary)}
/* Handy: Kopf mit zwei kleinen Garagen, jede Zeile eine Karte - Frage oben, beide Werte nebeneinander */
@media (max-width:760px){
  .sv-kopf{grid-template-columns:1fr 1fr}
  .sv-kopf .sv-leer{display:none}
  .sv{overflow:visible}
  .sv-kopf{position:sticky;top:var(--header-h,64px);z-index:2;background:var(--bg);box-shadow:0 1px 0 var(--border);
    border-radius:var(--radius) var(--radius) 0 0}
  .sv-held{padding:var(--space-3) var(--space-2) var(--space-2);gap:6px}
  .sv-held b{font-size:14px;line-height:1.25}
  .sv-held .sv-bild{width:84px}
  .sv-badge{font-size:9.5px;padding:3px 7px}
  .sv-zeile{grid-template-columns:1fr 1fr}
  .sv-frage{grid-column:1/-1;justify-content:center;gap:8px;padding:var(--space-3) var(--space-3) 4px;font-size:12px;
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
  .sv-ico{width:22px;height:22px;background:none;color:var(--brand)}.sv-ico svg{width:18px;height:18px}
  .sv-zelle{align-items:flex-start;gap:8px;padding:6px var(--space-3) var(--space-3);font-size:13.5px;line-height:1.3}
  .sv-zelle b{font-size:15px}
  .sv-zelle--stahl{background:var(--accent-soft)}
  .sv-mark{width:20px;height:20px;margin-top:1px}.sv-mark svg{width:12px;height:12px}
  .sv-zeile{background:linear-gradient(90deg,var(--accent-soft) 50%,transparent 50%)}
  .sv-frage{background:var(--bg)}
}
/* Abschluss (Pascal 08.10.2026): Bild rechts so hoch, dass die rechte Spalte mit der linken
   abschliesst - die spaetere Haut-Regel ".kform-bild{flex:0 0 auto}" hob das auf. Und der Name
   steht als dasselbe Schild auf dem Bild wie in den anderen Bild-Text-Sektionen (.split-name). */
@media (min-width:900px){
  .kform-grid{align-items:stretch}
  .kform-seite{height:100%}
  .kform-bild{flex:1 1 auto!important;min-height:220px}
  .kform-bild .mt-person,.kform-bild .mt-person .ph{height:100%}
  .kform-bild .mt-person .ph{aspect-ratio:auto!important}
}
.kform-bild .mt-person figcaption{left:16px;right:auto;bottom:16px;width:auto;max-width:calc(100% - 32px);
  padding:8px 16px;background:var(--bg);background-image:none;color:var(--heading);border-radius:var(--radius);
  font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.35;text-shadow:none;
  box-shadow:0 8px 24px -10px rgba(14,50,78,.35)}
.kform-bild .mt-person figcaption span{display:block;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:400;color:var(--text-secondary)}
/* Grosses Formular als zweite Sektion (Pascal 08.10.2026), conversion-optimiert.
   Desktop: links Kopf + Vorteile + Mensch, rechts die Karte (gleich hoch begonnen).
   Handy: Kopf, KARTE, dann Vorteile - das Formular steht vor der Begruendung.
   Nur Token des Frames; die Karte ist die .hero-form der Haut. */
.formular-sec{padding-block:var(--section-y)}
.fg{display:grid;gap:var(--space-4);justify-items:center}
/* Nur die Ueberschrift ueber dem Formular, dichter dran (Pascal 08.10.2026) */
.fg-kopf h2{margin-top:0}
.fg-kopf{text-align:center;max-width:720px;margin-inline:auto;margin-bottom:0!important}
.formular-sec .fg{gap:var(--space-3)}
.fg-kopf .fg-lead{margin-inline:auto}
.fg-karte{width:100%;max-width:1180px}
@media (min-width:900px){.fg-karte .opt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fg-kopf h2{margin-top:var(--space-3)}
.fg-lead{margin-top:var(--space-4);color:var(--text-secondary);max-width:46ch}
.fg-karte{padding:clamp(20px,3vw,36px)}
.fg-status{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--heading)}
.fg-schritt{letter-spacing:.01em}
/* Dauer als Plakette (Pascal 08.10.2026: "unter 2 Minuten und schoener machen") */
.fg-status .fg-dauer{display:inline-flex!important;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--heading)!important;font-weight:var(--fw-semibold)!important;font-size:var(--fs-small)}
.fg-status .fg-dauer svg{padding:5px!important;border-radius:50%!important;width:14px!important;height:14px!important}
.fg-dauer{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-weight:400}
.fg-dauer svg,.fg-sicher svg{box-sizing:content-box;width:14px;height:14px;padding:4px;flex:none;border-radius:var(--radius);background:var(--brand);color:#fff;fill:none;stroke:#fff;stroke-width:2}
.fg-bar{height:6px;margin:var(--space-3) 0 var(--space-5);border-radius:var(--radius);background:var(--fn-bar-track,var(--border))}
.fg-bar span{display:block;width:11%;height:100%;border-radius:inherit;background:var(--brand)}
.fg-frage{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--heading);margin:0 0 var(--space-4)}
.fg-karte .opt-grid{grid-auto-rows:1fr}
@media (min-width:600px) and (max-width:899px){.fg-karte .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fg-karte .opt-tile{min-height:0;padding:var(--space-5) var(--space-3) var(--space-4);justify-content:flex-start}
.fg-karte .opt-tile .tile-svg{width:160px;max-width:100%;height:auto;aspect-ratio:auto}
.fg-karte .opt-tile span{font-size:calc(var(--fs-body) * 1.06)}
.fg-karte .opt-tile .opt-unter{display:block;text-wrap:balance;font-size:var(--fs-small);font-weight:400;color:var(--text-secondary);text-align:center;line-height:1.35}
.fg-karte .opt-tile:hover{box-shadow:0 10px 24px -14px color-mix(in srgb,var(--brand) 55%,transparent)}
.fg-sicher{display:flex;align-items:center;justify-content:center;gap:8px;margin:var(--space-4) 0 0;
  font-size:var(--fs-small);color:var(--text-muted);text-align:center}
.fg-vorteile{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.fg-vorteile li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-body);color:var(--text)}
.fg-vorteile b{color:var(--heading)}
.fg-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;
  border-radius:var(--radius);background:var(--signal,var(--brand));color:#fff}
.fg-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.fg-person{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);padding:var(--space-4);
  border-radius:var(--radius);background:var(--bg);border:var(--border-w) solid var(--border);text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.fg-person:hover{border-color:var(--brand);box-shadow:0 10px 24px -16px color-mix(in srgb,var(--brand) 60%,transparent)}
.fg-ava{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;padding:0;aspect-ratio:1/1}
.fg-ptxt{display:flex;flex-direction:column;line-height:1.3}
.fg-plabel{font-size:var(--fs-small);color:var(--text-secondary)}
.fg-pnum{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--heading)}
.fg-pzeit{font-size:var(--fs-small);color:var(--text-muted)}
/* Kacheln der Garagentypen: Name plus eine kurze Zeile (Mass oder Einsatz). */
.tile-label small{display:block;margin-top:2px;font-weight:400;font-size:var(--fs-small);color:inherit;opacity:.9;line-height:1.35}
/* Knopfreihe unter einem Kartenraster: Knopf + Textlink, mittig. */
.sec-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--space-4) var(--space-5)}
.sec-cta>.btn-mit-note{margin:0}
/* Bewertungen: Initiale statt Foto (Profilbilder liegen nicht vor) und der
   Hinweis zur Echtheit (UWG). */
.rev-ini{display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);
  font-size:var(--fs-eyebrow);color:var(--heading);letter-spacing:.02em}
.rev-echt{max-width:680px;margin:var(--space-5) auto 0;text-align:center;font-size:var(--fs-eyebrow);color:var(--text-muted)}
.rev-sec .sec-cta{margin-top:var(--space-5)}
/* Social-Profile als Symbole im Fuss (Pascal 07.10.2026). */
.footer-social{display:flex;gap:12px;list-style:none;margin:20px 0 0;padding:0}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--on-accent) 12%,transparent);color:var(--on-accent);transition:background .15s}
.footer-social a:hover{background:var(--accent)}
.footer-social svg{width:20px;height:20px}
/* Rechtstexte: eine ruhige Spalte. */
.recht-sec{padding-block:calc(var(--section-y) * .8) var(--section-y)}
.recht{max-width:760px}
.recht h1{margin-bottom:var(--space-3)}
.recht .lead{margin-bottom:var(--space-6);color:var(--text-secondary)}
.recht h2{font-size:var(--fs-h3);margin:var(--space-6) 0 var(--space-3)}
.recht p{margin:0 0 var(--space-3);color:var(--text-secondary)}
/* Ablauf: drei Schritte sichtbar, mobil eine Karte mit Anschnitt der naechsten. */
@media (min-width:820px){
  .ablauf-grid.ist-slider[data-slider-ab="3"]>.ablauf-schritt{flex:0 0 calc((100% - 2*var(--gap-card)) / 3)}
}
@media (max-width:819px){
  .ablauf-grid[data-slider-ab="3"]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;gap:var(--gap-card);margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);scroll-padding-left:var(--gutter);padding-bottom:4px}
  .ablauf-grid[data-slider-ab="3"]::-webkit-scrollbar{display:none}
  .ablauf-grid[data-slider-ab="3"]>.ablauf-schritt{flex:0 0 82%;scroll-snap-align:start}
}
/* Links in Fliesstext auf Farbflaechen bleiben lesbar (weiss, unterstrichen). */
.fact-sec .lead-alt a,.cmp-sec .sec-head a{color:var(--on-accent);text-decoration:underline}
/* Formular: Auswahlfelder im Feld-Bauteil. */
/* Tippziele mindestens 44 x 44 px. */
.mnav-list a,.mnav-auf{min-height:44px}
@media (max-width:899px){.header-burger,.header-cta-ico{min-width:44px;min-height:44px}}
.phone__num{white-space:nowrap}
/* Fuss: unter 960 px belegt die Marke zwei Spalten; die letzte Spalte fuellt
   dann ihre Zeile, sonst bleibt eine halbe Zeile leer (raster_pruefen). */
@media (min-width:380px) and (max-width:959px){.footer-top>.footer-col:last-child{grid-column:1/-1}}
/* Abschluss: Personenkarte so hoch wie ihr Bild, die Links schliessen direkt an. */
.kform-bild{flex:0 0 auto;min-height:0}
/* Bewertungen (Pascal 08.10.2026: "verbessere diese Sektion in Bezug auf Conversion, UX und UI").
   Die Zahl ist der Held: 4,9 steht gross auf der Markenflaeche links, direkt daneben die Stimmen,
   und der Knopf sitzt UNTER dem Beweis in derselben Spalte - wer die Note gelesen hat, ist einen
   Daumen vom Angebot entfernt. Am Handy: Note, Stimmen, Knopf untereinander. */
.rv2{display:grid;gap:var(--space-5);grid-template-areas:"note" "stimmen"}
@media (min-width:1000px){.rv2{grid-template-columns:minmax(300px,360px) minmax(0,1fr);column-gap:var(--space-6);row-gap:var(--space-4);
  grid-template-areas:"note stimmen";align-items:start}}
.rv2-note{grid-area:note}.rv2-stimmen{grid-area:stimmen}.rv2-cta{grid-area:cta}
.rv2-cta .btn-mit-note{width:100%}.rv2-cta .btn{width:100%;justify-content:center}
.rv2-note{background:var(--brand);color:#fff;border-radius:var(--radius);padding:var(--space-5);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.rv2-note .rv2-eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-bold);opacity:.9}
.rv2-note h2{color:#fff;margin:0;font-size:var(--fs-h3);line-height:1.25}
.rv2-score{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}
.rv2-zahl{font-family:var(--font-display);font-weight:var(--fw-heading);font-size:clamp(3rem,6vw,4.25rem);line-height:1;color:#fff}
.rv2-score .stars{display:flex;gap:3px}
.rv2-score .stars svg{width:22px;height:22px;fill:#F6B921}
.rv2-g{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);color:#fff}
.rv2-g .g{width:18px;height:18px;background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
.rv2-g a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rv2-stimmen{min-width:0;display:flex;flex-direction:column;justify-content:center}
/* Schritt-Slider statt Laufband: Karten stehen still und ganz lesbar, alle 6 s rueckt eine nach
   (erst, wenn die Sektion zu sehen ist), Wischen, Pfeile und Punkte. Die angeschnittene
   naechste Karte am Rand zeigt: es gibt mehr. */
.rv2-band{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px 2px 10px;outline:none}
.rv2-band::-webkit-scrollbar{display:none}
.rv2-band:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);border-radius:var(--radius)}
.rv2-band>.rev-card{scroll-snap-align:start;margin:0}
@media (max-width:999px){.rv2-band{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}
.rv2-steuer{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.rv2-punkte{display:flex;gap:8px}
.rv2-punkt{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--border-strong);cursor:pointer;
  transition:width .25s,background .25s}
.rv2-punkt.ist-an{width:26px;border-radius:999px;background:var(--brand)}
.rv2-pfeil{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;cursor:pointer;
  border-radius:50%;border:var(--border-w) solid var(--border);background:var(--bg);color:var(--brand);transition:background .15s,color .15s}
.rv2-pfeil:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.rv2-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:999px){.rv2-steuer{justify-content:center}}
/* Initiale weiss auf Markenfarbe statt grau auf grau (Pascal: weisse Schrift auf Farbflaechen). */
.rv2 .rev-ava.rev-ini{background:var(--brand);color:#fff}
.rv2 .rev-card{flex:0 0 84%;max-width:none}
@media (min-width:700px){.rv2 .rev-card{flex:0 0 calc((100% - var(--gap-card)) / 2.15)}}
.rv2-echt{margin:var(--space-3) 0 0;font-size:var(--fs-eyebrow);color:var(--text-muted);text-align:left}
@media (max-width:999px){.rv2-echt{text-align:center}}
/* Neben der Notenflaeche nur eine schmale Blende: die breite Blende des Vollbreiten-Laufbands
   frass hier die erste Karte zur Haelfte weg. */

/* Neben der Notenflaeche ist die Stimmen-Spalte bis 1280 px schmal: dort eine Karte plus Anschnitt,
   sonst brechen die Zitate auf 5-6 Zeilen um (zeilen_pruefen). */
@media (min-width:1000px) and (max-width:1279px){.rv2 .rev-card{flex:0 0 78%}}
/* Ausklappen (Pascal 08.10.2026): Auszug, darunter "Weiterlesen" - voller Wortlaut aus dem
   Google-Profil (bewertungen.json "voll"). Karten oben buendig, die aufgeklappte waechst nach unten. */
.rv2-band{align-items:flex-start}
.rev-voll{font-size:var(--fs-small);line-height:1.55;color:var(--text);white-space:pre-line;margin:0}
.rv2-mehr{align-self:flex-start;margin-top:-4px;padding:6px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.rv2-echt{margin:var(--space-2) 0 0}
/* ── Bewertungen buendig (Pascal 14.10.2026) ──────────────────────────────────────────────
   Zugeklappt sind die Karten genau so hoch wie die Notenflaeche und beginnen an derselben
   Oberkante; Hinweis, Pfeile und Punkte stehen mittig unter der GANZEN Sektion, nicht unter
   der Stimmen-Spalte. Aufgeklappt waechst nur die eine Karte - die Note bleibt stehen. */
@media (min-width:1000px){.rv2{align-items:stretch}}
.rv2-stimmen{justify-content:flex-start}
.rv2-band{flex:1 1 auto;align-items:stretch;padding-top:0;padding-bottom:0}
.rv2-band>.rev-card{display:flex;flex-direction:column}
.rv2-band .rv2-mehr{margin-top:auto}
.rv2.ist-auf{align-items:start}
.rv2.ist-auf .rv2-band{align-items:flex-start}
.rv2.ist-auf .rev-card,.rv2.ist-auf .rv2-note{min-height:var(--rv2-h,0)}
.rv2-fuss{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:var(--space-4);text-align:center}
.rv2-fuss .rv2-echt{margin:0;text-align:center}
.rv2-fuss .rv2-steuer{margin:0;justify-content:center}
/* Sterne folgen dem Wert (inc/bewertungen.php liefert den Anteil, 4,9 -> 98 %) */
.stars--wert{position:relative;display:inline-flex}
.stars--wert>.stars-grund,.stars--wert>.stars-voll{display:inline-flex;gap:inherit}
.stars--wert>.stars-grund svg{fill:#D9DDE2!important}
.stars--wert>.stars-voll{position:absolute;left:0;top:0;bottom:0;width:var(--anteil,100%);overflow:hidden;white-space:nowrap}
/* Helle Sektion -> graue Karte, graue Sektion -> weisse Karte (Pascal 08.10.2026: "das Feld
   muesste grau sein auf einer weissen Sektion"). Die Haut setzte jede Karte weiss
   (--surface:var(--bg)); auf weissen Sektionen loesten sich Split-Text, Ausfuehrungs- und
   Referenzkarten dadurch auf. Graue Sektionen setzen --surface weiterhin selbst auf Weiss.
   Tor: scripts/karten_flaeche_pruefen.py */
:root{--surface:var(--bg-alt)}
section.zone-hell{--surface:var(--bg-alt)}

/* ── Ausstattung nach Wunsch (Pascal 14.10.2026) ────────────────────────────────
   Zeigt, DASS die Garage individuell wird - kein zweiter Konfigurator (der steht oben im
   Formular). Oben dieselbe Garage in vier Ausfuehrungen (unsere Zeichnung), darunter je
   Bereich der sichtbare Beleg: Torarten, Farbfelder, Putzflaechen, Extras. */
.bk-sec{background:var(--bg-alt);padding-block:var(--section-y)}
.bk-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.bk-variante{margin:0;background:linear-gradient(180deg,#EEF3F8 0%,#F7F9FB 64%,#E6EAEE 64%,#EDF0F3 100%);
  border-radius:var(--radius);padding:var(--space-4) var(--space-3) var(--space-3);text-align:center}
.bk-variante figcaption{margin-top:6px;font-size:13px;line-height:1.35;color:var(--text-muted)}
.bk-svg{display:block;width:100%;height:auto}
.bk-svg .bk-putz{fill:var(--bk-putz,#F6F6F4)}
.bk-svg .bk-putz-s{fill:color-mix(in srgb,var(--bk-putz,#F6F6F4) 80%,#3A4350)}
.bk-svg .bk-tor{fill:var(--bk-tor,#383E42)}
.bk-svg .bk-dach{fill:#6A7078}
.bk-svg .bk-x,.bk-svg .bk-sicke{display:none}
.bk-svg .bk-x--antrieb{stroke:var(--brand)}
.bk-garage[data-tor="m"] .bk-sicke--m,.bk-garage[data-tor="l"] .bk-sicke--l,.bk-garage[data-tor="s"] .bk-sicke--s{display:inline}
.bk-garage[data-dach="gruen"] .bk-x--gruen,
.bk-garage.x-tuer-v .bk-x--tuer-v,.bk-garage.x-tuer-h .bk-x--tuer-h,.bk-garage.x-fenster-v .bk-x--fenster-v,
.bk-garage.x-fenster-h .bk-x--fenster-h,.bk-garage.x-lueftung .bk-x--lueftung,
.bk-garage.x-rinne .bk-x--rinne,.bk-garage.x-antrieb .bk-x--antrieb{display:inline}

.bk-karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.bk-karte{background:var(--bg);border-radius:var(--radius);padding:var(--space-5)}
.bk-karte h3{margin:var(--space-4) 0 6px;font-size:var(--fs-h3)}
.bk-karte p{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--text)}
.bk-beleg{min-height:58px;display:flex;align-items:center}
.bk-tore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.bk-tore img{display:block;width:100%;height:52px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
/* Farbfelder in festen Reihen: 16 Torfarben = 2 x 8, 8 Putze = 1 x 8 */
.bk-farben{display:grid;gap:8px;width:100%}
.bk-punkte{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;width:100%;max-width:260px}
.bk-punkt{display:block;aspect-ratio:1;border-radius:50%;background:var(--f);background-size:cover;background-position:center;
  border:1px solid rgba(0,0,0,.14)}
.bk-punkte--ex{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bk-ex{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--radius);background:var(--accent-soft)}
.bk-ex svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bk-wand{display:block;width:100%;max-width:230px;height:auto}
.bk-sec .sec-cta{margin-top:var(--space-6)}

@media (max-width:1100px){.bk-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .bk-reihe,.bk-karten{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .bk-reihe{margin-top:var(--space-5)}
  .bk-variante{padding:var(--space-3) var(--space-2) var(--space-2)}
  .bk-variante figcaption{font-size:12px}
  .bk-karte{padding:var(--space-4)}
  .bk-karte h3{margin-top:var(--space-3)}
}
@media (max-width:560px){
  .bk-karten{grid-template-columns:1fr}
}

/* ── Ablauf: jeder Schritt mit Bild oder Grafik (Pascal 14.10.2026) ─────────────────
   Vorher Textkarten mit Nummer - "sehr textlastig, visuell nichts aussagend", bei jedem
   Kunden. Jetzt traegt jeder Schritt ein Bild (echtes Foto oder eigene Grafik), darauf die
   Nummer; darunter wer es macht, Titel, EIN Satz. Kein Schieber mehr: ein Ablauf, dessen
   Schritte man erst wegblaettern muss, ist keiner. Am Handy Zeilen: Bild links, Text rechts. */
.ablauf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);margin:0;padding:0;list-style:none}
.ablauf-grid[data-anzahl="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ablauf-grid[data-anzahl="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Ab 1100 px stehen bis zu sechs Schritte in EINER Reihe - liest sich als Zeitstrahl und haelt
   die Sektion unter einer Bildschirmhoehe (zwei Reihen mit 4:3-Bildern waren 1,4 Bildschirme). */
@media (min-width:1100px){
  .ablauf-grid[data-anzahl="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ablauf-grid[data-anzahl="6"]{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
  .ablauf-grid[data-anzahl="5"] .ablauf-text,.ablauf-grid[data-anzahl="6"] .ablauf-text{padding:var(--space-3) var(--space-4) var(--space-4)}
  .ablauf-grid[data-anzahl="5"] .ablauf-text h3,.ablauf-grid[data-anzahl="6"] .ablauf-text h3{font-size:var(--fs-body);line-height:1.3}
}
.ablauf-schritt{position:relative;display:flex;flex-direction:column;gap:0;padding:0;background:var(--surface);border-radius:var(--radius)}
.ablauf-schritt::after{content:none!important}
.ablauf-bild{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-alt)}
.ablauf-bild>.ph,.ablauf-bild>svg,.ablauf-bild>img{display:block;width:100%;height:100%;border-radius:0;border:0}
.ablauf-bild>.ph{aspect-ratio:auto!important}
.ablauf-bild>.ph img{width:100%;height:100%;object-fit:cover}
.ablauf-bild .ablauf-nr{position:absolute;top:12px;left:12px;z-index:2;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ablauf-text{display:flex;flex-direction:column;gap:6px;padding:var(--space-4) var(--space-5) var(--space-5)}
.ablauf-wer{align-self:flex-start;margin:0;padding:3px 9px;border-radius:var(--radius);background:var(--accent-soft);
  color:var(--heading);font-size:12.5px;font-weight:var(--fw-semibold);line-height:1.4}
.ablauf-text h3{margin:0;font-size:var(--fs-h3)}
.ablauf-text p:not(.ablauf-wer){margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--text-secondary)}
@media (min-width:820px) and (max-width:1099.98px){.ablauf-grid[data-anzahl="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:819px){
  .ablauf-grid,.ablauf-grid[data-anzahl]{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .ablauf-schritt{display:flex;flex-direction:row;align-items:stretch;padding:0}
  .ablauf-bild{flex:0 0 112px;aspect-ratio:auto;min-height:104px;border-radius:var(--radius) 0 0 var(--radius)}
  .ablauf-bild .ablauf-nr{top:8px;left:8px;width:30px;height:30px;font-size:var(--fs-body)}
  .ablauf-text{justify-content:center;padding:var(--space-3) var(--space-4);gap:4px}
  .ablauf-text h3{font-size:var(--fs-body)}
  .ablauf-wer{font-size:11.5px;padding:2px 8px}
  /* Faden zwischen den Schritten, damit es als Folge gelesen wird */
  .ablauf-schritt:not(:last-child)::before{content:"";position:absolute;left:55px;top:100%;width:2px;height:var(--space-3);background:var(--border-strong)}
}
/* Blaetter-Pfeil rutschte beim Hover weg (Pascal 14.10.2026): er war mit transform:translateY(-50%)
   mittig gesetzt, .btn:hover ueberschrieb das mit translateY(-1px) - der Knopf sprang 24 px nach unten,
   unter dem Mauszeiger weg. Mitte jetzt ueber top, transform bleibt frei. */
.reihe-pfeil,.reihe-pfeil:hover{top:calc(50% - 24px)!important;transform:none!important}

/* ── Hochwertiger, weniger verspielt (Pascal 14.10.2026: "eckiger, Pfeile laenger") ─────────
   Ecken: --radius ist in der Haut auf 0 gesetzt. Rund bleibt nur, wo die Rundung Inhalt ist:
   Personenbilder, Siegel, Farbfelder, Aufzaehlungspunkte. Bedienelemente werden eckig.
   Pfeil auf Knoepfen: lang und duenn statt kurzer Haken - ruhiger, architektonischer. */
.rv2-pfeil,.cta-call .ico{border-radius:0}
.rv2-punkt,.rv2-punkt.ist-an{border-radius:0}
.rv2-punkt{height:4px;width:18px}
.rv2-punkt.ist-an{width:34px}
.btn .arr{width:30px;height:20px;flex:0 0 auto;margin-left:2px;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ── Familie garagen (14.10.2026): Sektionen der Typseiten. Nur Token der Haut; Kopf, Karten-
   flaeche, Abstaende und Knopf wie die Startseite (Einpass-Inventur: split-sec, wahl-sec, ill-sec). */

/* Hero-Schritt 1 mit drei Antworten: eine Zeile statt 2 + 1 */
.opt-grid.opt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){.opt-grid.opt-grid--3 .opt-tile span{font-size:14px}}

/* Masse: Zeichnung + Chips je Achse. Weisse Sektion -> graue Karten (flaechen.css). */
.ms-sec{padding-block:var(--section-y)}
.ms-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card);margin-top:var(--space-6)}
@media (min-width:900px){.ms-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.ms-karte{margin:0;background:var(--surface);border-radius:var(--radius);padding:clamp(20px,2.4vw,32px)}
.ms-bild{display:flex;flex-direction:column;gap:var(--space-4)}
.ms-bild figcaption{font-size:var(--fs-small);line-height:1.55;color:var(--text-secondary)}
.ms-bild figcaption b{display:block;margin-bottom:4px;font-family:var(--font-display);font-size:var(--fs-h3);color:var(--heading)}
.ms-tabelle{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
.ms-liste{margin:0;display:grid;gap:var(--space-5)}
.ms-zeile dt{margin:0 0 var(--space-2);font-size:var(--fs-eyebrow,12px);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary)}
.ms-zeile dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ms-chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:var(--radius);background:var(--bg);
  color:var(--heading);font-family:var(--font-display);font-weight:var(--fw-heading);font-size:calc(var(--fs-body) * 1.05);
  box-shadow:inset 0 0 0 1px var(--border)}
@media (max-width:520px){.ms-zeile dd{gap:6px}.ms-chip{min-height:36px;padding:4px 9px;font-size:var(--fs-body)}}
.ms-hinweis{margin:0;font-size:var(--fs-small);color:var(--text-muted)}
.ms-sec .sec-cta{margin-top:var(--space-6)}

/* Zeichnung "Tueren auf" - Farben aus der Zone, keine festen Hexwerte am Strich */
.tt{display:block;width:100%;max-width:440px;height:auto;margin-inline:auto}
.tt-boden{fill:var(--bg)}
.tt-wand{fill:none;stroke:var(--heading);stroke-width:6;stroke-linejoin:miter}
.tt-tor{fill:none;stroke:var(--heading);stroke-width:6}
.tt-trenn{stroke:var(--heading);stroke-width:3;stroke-dasharray:8 6;opacity:.55}
.tt-platz{fill:var(--accent-soft)}
.tt-auto{fill:var(--brand)}
.tt-glas{fill:#fff;opacity:.55}
.tt-tuer{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round}
.tt-bogen{fill:none;stroke:var(--text-secondary);stroke-width:1.5;stroke-dasharray:3 4}
.tt-mass{fill:none;stroke:var(--text-secondary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tt-txt{fill:var(--heading);font-family:var(--font-sans);font-size:15px;font-weight:600}
.tt-klein{font-size:12.5px;font-weight:500;fill:var(--text-secondary)}

/* Kosten: Garagen-Zeichnungen in den ill-Karten mittig, gleiche Hoehe */
.kosten-sec .ill-card{text-align:left}
.kosten-sec .ill-pic{max-width:150px;height:96px;display:flex;align-items:flex-end}
.kosten-sec .ill-pic .tile-svg{width:100%;height:auto;max-height:96px}
.kosten-sec .sec-cta{margin-top:var(--space-6)}

/* Bauweise: Kopf auf der Akzentflaeche */
.bau-sec .sec-head{margin-bottom:var(--space-6)}
.bau-sec .sec-head p a{color:var(--on-accent);text-decoration:underline;text-underline-offset:3px}
.bau-sec .citem-ico svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero .hero-form .opt-tile .tile-svg{width:100%;max-width:118px;height:auto}
/* Grundrisse: Zeichnung in voller Kartenbreite */
.gr-sec .ill-pic{max-width:none;width:100%}
.gr-sec .ill-pic .tt{max-width:none}
.gr-sec .sec-cta{margin-top:var(--space-6)}
/* Karten-Sektion auf heller Flaeche (14.10.2026, /konfigurator/): Karten werden grau, nie weiss auf weiss */
.ill-sec.zone-hell{background:var(--bg);--surface:var(--bg-alt)}
.ill-sec.zone-hell .ill-card{background:var(--bg-alt)}
.ill-sec.zone-hell .ill-pic .ph--contain{background:var(--bg);background-image:none}
/* Karte erst nach Klick (Kontakt, 14.10.2026): Google Maps laedt erst mit Zustimmung, die Zustimmung
   merkt sich der Browser (localStorage "knopp-karte"), Widerruf in der Datenschutzerklaerung. */
.karte-halt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);text-align:center;padding:var(--space-5);background:var(--bg-alt);color:#fff;overflow:hidden;isolation:isolate}
.karte-halt::before{content:"";position:absolute;inset:-6%;z-index:-2;background-image:var(--halt-bild,none);background-size:cover;background-position:center;filter:blur(18px) saturate(.85);transform:scale(1.12)}
.karte-halt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(10,20,30,.48),rgba(10,20,30,.62))}
.karte-halt p{max-width:40ch;margin:0;font-size:var(--fs-small);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.karte-halt p a{color:#fff;text-decoration:underline}
.karte-halt .btn{white-space:normal}