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


/* ═══════════════════════════════════════════════════════════════════════
   ANFRAGE-STRECKE · eigene Seite, gleiche Tokens wie der Referenz-Frame
   Eine Frage je Bildschirm. Der erste Schritt ist auf der Startseite passiert —
   hier geht es ohne Wiederholung weiter, deshalb startet der Balken nicht bei 0.
   ═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   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}
html{scroll-behavior:smooth;scroll-padding-top:100px}
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}
h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--heading)}
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-bold);line-height:var(--lh-heading)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);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);
  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 befuellter Slot: Rahmen und Beschriftung weg, das Bild fuellt den Platz.
   Diese drei Regeln fehlten hier — die Startseite hatte sie, die Anfrage-Strecke nicht.
   Folge: ein eingesetztes Logo behielt den gestrichelten Rahmen UND hatte keine
   Hoehenbegrenzung (ein quadratisches Logo lief aus dem Kopfbalken heraus). */
.ph{position:relative;overflow:hidden}
.ph--img{background:transparent;border:0}
.ph--img>svg,.ph--img>span{display:none}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Logos und Siegel werden EINGEPASST, nie beschnitten. */
.ph--contain>img{object-fit:contain}
/* 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;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), damit sich die
   Anfrage-Strecke genauso anfuehlt wie die Seite. */
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,var(--shine),transparent);
  transform: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{left:130%}}
@keyframes btnShineLoop{0%{left:-130%}20%{left:130%}100%{left:130%}}
@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}
.btn--ghost{--_bg:transparent;--_fg:var(--btn-ghost-fg);--_bd:var(--control-line);--_bgh:var(--accent-soft)}
.btn--accent{--_bg:var(--accent);--_fg:var(--accent-fg);--_bd:var(--accent);--_bgh:var(--accent-bgh)}
.btn--block{width:100%}

body{background:var(--bg-alt);min-height:100vh;display:flex;flex-direction:column}
/* Kopf bewusst ohne Navigation: wer in der Strecke ist, soll nicht abspringen */
.fn-head{background:var(--bg-accent);padding:var(--space-5) var(--gutter);text-align:center}
.fn-head .ph{width:var(--logo-w,150px);height:var(--logo-h,44px);aspect-ratio:auto;margin-inline:auto;background:transparent;
  border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7)}
.fn-main{flex:1;width:100%;max-width:640px;margin-inline:auto;
  padding:clamp(24px,5vw,44px) var(--gutter) 84px}

/* Frage als Sprechblase neben einem Gesicht: eine Person fragt, kein Formular */
.ask{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.ask-who{flex:0 0 auto;width:96px;text-align:center}
.ask-ava{width:76px;height:76px;margin-inline:auto;border-radius:50%;overflow:hidden;background:var(--fill)}
.ask-ava .ph{height:100%;aspect-ratio:auto;border-radius:50%;border:0}
.ask-ava .ph span{display:none}
.ask-name{margin-top:var(--space-2);font-size:11.5px;font-weight:var(--fw-bold);color:var(--heading);line-height:1.25}
.ask-role{font-size:11px;color:var(--text-muted);line-height:1.25}
.bubble{position:relative;flex:1;background:var(--bg);border:var(--border-w) solid var(--border);
  border-radius:var(--radius);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);
  color:var(--heading);line-height:1.3}
.bubble::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-right:9px solid var(--border)}
.bubble::after{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-right:8px solid var(--bg)}

/* Antwortkarten: gleich groß, damit keine Option wichtiger wirkt als die andere */
.fn-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap-card)}
/* Enger Innenabstand, aber eine MINDESTHOEHE (Nutzer-Vorgabe 2026-08-27):
   Grosszuegiges Polster laesst die Kachel wachsen, sobald die Beschriftung umbricht -
   aus einer Reihe gleich hoher Karten werden dann unterschiedlich hohe. Umgekehrt
   fallen Kacheln mit einzeiliger Beschriftung ohne Polster in sich zusammen.
   Deshalb: knapper Abstand zwischen Zeichnung und Text, knappes Polster - und eine
   Mindesthoehe, die den einzeiligen Fall auf dasselbe Mass hebt wie den zweizeiligen.
   Die Hoehe kommt damit aus EINER Angabe statt aus dem zufaelligen Textumbruch. */
.fn-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--bg);border:var(--border-w-2) solid var(--border);border-radius:var(--radius);
  padding:var(--space-3);min-height:140px;cursor:pointer;font:inherit;color:var(--heading);
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  text-align:center;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.fn-opt:hover{border-color:var(--brand);transform:translateY(-2px)}
.fn-opt:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.fn-opt .tile-svg{width:64px;height:64px}
/* Die Auswahl-Motive sind Illustrationen, keine Linienzeichnungen: sie holen ihre
   Toene aus der Illustrations-Skala (--illu-*), nicht aus --fill/--border. Aus
   Linien-Token gebaut fielen sie auf der Kachel auf 1,0:1 zusammen — die hellste
   Flaeche war exakt die Kachelfarbe. Ein Design-System setzt --illu-1…4 in
   apply_tokens.py; ohne Angabe greifen die Voreinstellungen aus :root. */
.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-2)}
.tile-svg .ac{fill:var(--illu-4)}
/* Am Telefon sind die Kacheln schmaler, die Beschriftung bricht haeufiger um -
   die Mindesthoehe darf dort niedriger liegen, sonst wird die Auswahl unnoetig lang. */
@media (max-width:520px){.fn-opt{min-height:126px}}
@media (max-width:380px){.fn-opts{grid-template-columns:minmax(0,1fr)}}

/* Felder-Schritt: gleiche Bauweise wie im Frame (Beschriftung im Feld) */
.fn-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.fn-fields>.field--wide,.fn-fields>.btn,.fn-fields>.consent,.fn-fields>.form-trust{grid-column:1/-1}
@media (max-width:420px){.fn-fields{grid-template-columns:minmax(0,1fr)}}
.field{position:relative}
.field input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);
  border:var(--border-w-2) solid var(--border-strong);border-radius:var(--radius);padding:19px 12px 6px}
.field input: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)}
.field input:focus~label,.field input:not(:placeholder-shown)~label{top:6px;font-size:11.5px;color:var(--text-secondary)}
    /* Ein Freitextfeld gehoert nicht in jede Strecke, aber wo eines steht, muss es
       aussehen wie die Zeilen darueber. Ohne diese drei Regeln faellt ein <textarea>
       auf die Browser-Vorgabe zurueck - rund 145px breit in einer Karte ueber die
       volle Spalte, mit einer Beschriftung, die rechts heraushaengt. Genau so ist es
       am 03.09.2026 ausgeliefert worden, weil oben nur `input` steht. */
    .field textarea{width:100%;box-sizing:border-box;display:block;resize:vertical;
      min-height:88px;font:inherit}
    .field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
    .field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{top:6px;font-size:11.5px;color:var(--text-secondary)}
.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 input{margin-top:3px;flex:0 0 auto;width:18px;height:18px}
.consent a{text-decoration:underline;text-underline-offset:2px}
.form-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;text-align:center;
  gap:var(--space-2) var(--space-4);font-size:var(--fs-eyebrow);color:var(--text-secondary)}
.form-trust li{display:inline-flex;align-items:center;gap:6px}
.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}
.btn .arr{width:17px;height:17px;flex:0 0 auto}

/* Hinweis + Zurück */
.fn-hint{margin-top:var(--space-6);text-align:center;font-size:var(--fs-small);color:var(--text-muted)}
.fn-hint svg{width:20px;height:20px;margin-inline:auto;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:4px}
/* Zurueck fest am unteren Bildschirmrand: es ist der Ausweg, nicht das Ziel — es soll
   erreichbar sein, ohne im Lesefluss der Frage zu stehen. Eigene Flaeche, damit es
   ueber Karten hinweg lesbar bleibt; bewusst schwach gefaerbt. Nur „Zurueck" —
   wohin es geht, sieht man beim Klick, ein langes Label lenkt ab. */
.fn-back{position:fixed;z-index:60;left:var(--gutter);bottom:var(--space-4);
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-small);color:var(--text-secondary);
  /* Als reiner Text, nicht als Flaeche: ein zweiter Knopf neben den Antwortkarten
     wuerde um dieselbe Aufmerksamkeit konkurrieren. Der Textschatten haelt ihn
     lesbar, falls beim Scrollen eine Karte darunter durchlaeuft. */
  text-shadow:0 1px 2px var(--bg-alt), 0 0 6px var(--bg-alt)}
.fn-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fn-back:hover{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.fn-back:hover{color:var(--heading)}

/* Fortschritt steht direkt unter dem Hinweis, nicht fixiert am Rand: er gehoert zur
   Frage, die gerade offen ist — als Leiste am Bildschirmrand liest er sich wie Teil
   der Seite statt wie Teil des Schrittes. */
.fn-progress{margin-top:var(--space-4)}
/* Die Spur des Ladebalkens muss auf JEDEM Untergrund sichtbar sein — ein heller
   Ton auf hellgrauer Flaeche verschwindet (Nutzer-Vorgabe 2026-08-18). */
.fn-bar{height:10px;border-radius:var(--radius-pill);background:var(--fn-bar-track,var(--border-strong));overflow:hidden}
.fn-bar span{display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:var(--accent);transition:width .35s var(--ease)}
.fn-pct{margin-top:6px;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);
  color:var(--text-secondary);text-align:center}
@media (prefers-reduced-motion:reduce){.fn-bar span{transition:none}}


/* ════════════════════════════════════════════════════════════════════════════
   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)}
.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)}

/* ── Anfrage-Strecke · Nachtraege ────────────────────────────────────────────
   Diese Seite bringt eigene Bauteile mit (Sprechblase, Antwortkarte,
   Fortschritt). Sie bekommen die Haut derselben Bauteile des Styleguides. */
/* Kopf der Strecke: dunkel wie im Wireframe, das Zeichen auf weisser Platte. */
.fn-head{background:var(--bg-accent)}
.fn-head>.logo-plate{display:inline-flex}
/* Antwortkarte = Auswahl-Kachel des Systems: weisses Rechteck, EINE Linie
   (1px, --control-line 3,10:1), Radius 4px. Der Frame zeichnet sie 2px; die
   2px sind in dieser Marke den ZEICHEN vorbehalten, nicht den Kanten. */
.fn-opt{border:var(--border-w) solid var(--control-line);background:var(--bg)}
.fn-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.fn-opt.is-sel{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:inset 0 0 0 var(--border-w) var(--accent)}
.fn-opt:focus-visible,.btn:focus-visible,.fn-back:focus-visible{
  outline:var(--border-w-2) solid var(--focus);outline-offset:var(--space-1)}
/* Sprechblase: weisse Karte mit der Linie der Marke - sie steht bereits so da,
   nachzuziehen ist nur das Gewicht (nie schwerer als die H2). */
.bubble{font-weight:var(--fw-heading)}
/* Felder: alle fuenf Zustaende aus dem Styleguide. */
.field input,.field textarea{border:var(--border-w) solid var(--control-line)}
.field input:focus,.field textarea:focus{outline:var(--border-w-2) solid var(--focus);
  outline-offset:var(--space-1);border-color:var(--accent);box-shadow:none}
.field input:not(:placeholder-shown),.field textarea:not(:placeholder-shown){
  border-color:var(--accent)}
.field input:disabled,.field textarea:disabled{background:var(--fill);
  color:var(--text-muted);border-color:var(--border);cursor:not-allowed}
.field input:disabled~label,.field textarea:disabled~label{color:var(--text-muted)}
/* Fehler: Kante UND Meldung, Farbe nie als einziges Signal. Die Hooks des
   Frames (.ist-fehler / .form-fehler) tragen hier die Optik des Systems; den
   Meldungstext setzt die Formular-Logik, nicht die Haut. */
.field input:user-invalid,.field textarea:user-invalid,.ist-fehler{
  border-color:var(--negativ);box-shadow:0 0 0 var(--border-w) var(--negativ)}
.field input:user-invalid~label,.field textarea:user-invalid~label{color:var(--negativ)}
.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);
  background:color-mix(in srgb,var(--negativ) 8%,transparent);color:var(--negativ);
  font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.consent input[type=checkbox]{accent-color:var(--accent)}
/* Fortschritt: Spur in der Linie der Marke, Fuellung im Akzent, Radius 4px -
   diese Marke hat keine Pille. */
.fn-bar{background:var(--fn-bar-track);border-radius:var(--radius)}
.fn-bar span{border-radius:var(--radius);background:var(--accent)}
/* Platzhalter-Flaechen wie im Styleguide schraffiert. Das runde Portraet
   behaelt seine Form - das ist die Form eines Bildes, nicht eines Bauteils. */
.ph{background:repeating-linear-gradient(135deg,var(--bg-alt) 0 14px,var(--fill) 14px 28px)}
.ask-ava .ph{background:var(--fill)}

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

/* Logo-Rot als Signal (Pascal 07.10.2026), wie auf der Startseite */
:root{--signal:#A52B2C}
section:not(.zone-brand):not(.cta-band) p.eyebrow.eyebrow,main p.eyebrow.eyebrow{background:var(--signal);border-color:var(--signal);color:#fff}

/* Illustrationen der Strecke: gleiche Groesse wie im Hero. */
.fn-opt .tile-svg{width:88px;height:88px}
.fn-opt .tile-svg[viewBox='0 0 160 100']{width:150px;max-width:100%;height:auto}
@media (max-width:600px){.fn-opt .tile-svg{width:70px;height:70px}}
.fn-main{padding-bottom:calc(var(--space-6) + 48px)}
/* Strecke mit allen Fragen des Konfigurators (08.10.2026): Farbfelder, Torbilder,
   Mehrfachauswahl, Masse als Auswahlliste - aus vorhandenen Bauteilen. */
.fn-opts--viele{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.fn-opts--viele{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* volle Zeilen: bei ungerader Zahl im Zweierraster nimmt die letzte Kachel die ganze Zeile */
.fn-opts:not(.fn-opts--viele)>.fn-opt:last-child:nth-child(odd){grid-column:1/-1}
.fn-opt .fn-farbe{display:block;width:64px;height:44px;border-radius:var(--radius);border:1px solid var(--control-line)}
.fn-opt .fn-bild{display:block;width:100%;max-width:200px;height:auto;border-radius:var(--radius);border:1px solid var(--control-line)}
.fn-opt--mehr{position:relative;min-height:96px}
.fn-opt--mehr .fn-haken{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius);border:var(--border-w-2) solid var(--border-strong);background:var(--bg)}
.fn-opt--mehr .fn-haken svg{width:18px;height:18px;fill:none;stroke:transparent;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fn-opt--mehr.is-sel{border-color:var(--brand);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.fn-opt--mehr.is-sel .fn-haken{background:var(--brand);border-color:var(--brand)}
.fn-opt--mehr.is-sel .fn-haken svg{stroke:#fff}
.fn-notiz{margin:var(--space-3) 0;font-size:var(--fs-small);color:var(--text-muted);text-align:center}
.fn-masse{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.fn-masse{grid-template-columns:minmax(0,1fr)}}
.fn-masse>.fn-notiz,.fn-masse>.btn{grid-column:1/-1}
.fn-mass{display:flex;flex-direction:column;gap:var(--space-2)}
.fn-mass-bild{display:flex;justify-content:center;padding:var(--space-2) 0}
.fn-mass-bild img{display:block;width:100%;max-width:240px;height:auto}
.fn-opt .fn-bild--konf{width:100%;max-width:220px;height:auto;border:0;border-radius:var(--radius);background:#fff}
.fn-opt .fn-farbe--bild{width:100%;max-width:160px;height:64px;background-size:cover;background-position:center}
.zub-bild img{display:block;width:72px;height:56px;object-fit:contain}
.zub--eins .zub-bild img{width:96px;height:72px}
@media (max-width:600px){.fn-mass{display:grid;grid-template-columns:44% minmax(0,1fr);align-items:center}.fn-mass-bild .tile-svg{max-width:none}}
.field--sel select{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);appearance:none;border:var(--border-w) solid var(--control-line);border-radius:var(--radius);padding:22px 36px 6px 12px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field--sel select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
.field--sel label{top:6px;font-size:11.5px;color:var(--text-secondary)}

/* ── Konfigurator-Strecke (Pascal 08.10.2026: "Formular deutlich ansprechender, UX/UI fuer
   maximale Conversion") ── Karte links, mitlaufende Zusammenfassung rechts; am Handy die
   Zusammenfassung als kompakte Leiste UNTER der Karte. Nur Token der Haut. */
.konf-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);text-align:left}
.konf-tel{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.konf-tel-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.85);flex:none}
.konf-tel-ava img{width:100%;height:100%;object-fit:cover;display:block}
.konf-tel-txt{display:flex;flex-direction:column;line-height:1.2}
.konf-tel-txt span{font-size:12px;opacity:.9}
.konf-tel-txt b{font-size:17px;letter-spacing:.01em}
.konf-tel-txt small{font-size:10px;color:#fff}
.ph--ki-neben::after{content:none!important}
.ask-ki{margin:2px 0 0;font-size:10px;color:var(--text-muted);text-align:center}
/* "Jetzt anrufen" steht auch am Handy ueber der Nummer (Pascal 08.10.2026: "CTA fehlt ueber der Telefonnummer") */
.konf-main{max-width:1120px}
.konf{display:grid;gap:var(--space-5);align-items:start}
@media (min-width:960px){.konf{grid-template-columns:minmax(0,1fr) 320px}}
.konf-karte{background:var(--bg);border:var(--border-w) solid var(--border);border-radius:var(--radius);
  padding:clamp(18px,3vw,36px);box-shadow:0 1px 2px color-mix(in srgb,var(--bg-dark) 5%,transparent),0 24px 56px -28px color-mix(in srgb,var(--bg-dark) 22%,transparent)}
.konf-status{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-small)}
.konf-zurueck{display:inline-flex;align-items:center;gap:4px;color:var(--text-secondary);text-decoration:none;min-height:44px}
.konf-zurueck svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.konf-zurueck:hover{color:var(--brand)}
.konf-schritt{font-weight:var(--fw-semibold);color:var(--heading)}
.konf-pct{font-weight:var(--fw-semibold);color:var(--text-secondary);min-width:3.5em;text-align:right}
.konf-bar{margin:var(--space-2) 0 var(--space-5);height:8px}
.konf-bar span{transition:width .35s var(--ease,ease)}
.konf-karte .ask{margin-bottom:var(--space-5)}
.konf-hint{margin-top:var(--space-5)}
.fn-back{display:none}
.fn-opt{transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.fn-opt.is-sel{border-color:var(--brand);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.fn-opt .fn-unter{display:block;font-size:var(--fs-small);font-weight:400;color:var(--text-secondary);line-height:1.35;text-align:center}
.fn-opt>span{text-align:center;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal}
/* Zusammenfassung */
.konf-seite{display:grid;gap:var(--space-4)}
@media (min-width:960px){.konf-seite{position:sticky;top:var(--space-5)}}
.konf-sum{background:var(--bg);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:var(--space-5)}
.konf-sum-titel{font-family:var(--font-display);font-weight:var(--fw-heading);font-size:var(--fs-h3);color:var(--heading);margin:0}
.konf-sum-bild:not(:empty){display:flex;justify-content:center;margin:var(--space-3) 0}
.konf-sum-bild .tile-svg{width:180px;height:auto}
.konf-sum-liste{margin:var(--space-3) 0 0;display:grid;gap:0}
.konf-sum-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);padding:10px 0;border-top:1px solid var(--border)}
.konf-sum-zeile dt{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);grid-column:1}
.konf-sum-zeile dd{margin:0;font-weight:var(--fw-semibold);color:var(--text);grid-column:1}
.konf-sum-aendern{grid-column:2;grid-row:1/span 2;align-self:center;background:none;border:0;padding:6px 4px;
  font:inherit;font-size:var(--fs-small);color:var(--brand);text-decoration:underline;cursor:pointer}
.konf-sum-leer{color:var(--text-muted);font-size:var(--fs-small);padding-top:var(--space-2)}
.konf-trust{list-style:none;margin:0;padding:0 var(--space-2);display:grid;gap:var(--space-3)}
.konf-trust li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--text-secondary)}
.konf-trust li b{color:var(--heading)}
.konf-trust svg,.konf-kontakt .form-trust svg{box-sizing:content-box;flex:none;width:12px;height:12px;padding:4px;border-radius:var(--radius);background:var(--brand);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:959px){.konf-sum-bild{display:none!important}.konf-sum{padding:var(--space-4)}}
/* Kontakt gegliedert */
.konf-kontakt .konf-gruppe{grid-column:1/-1;margin:var(--space-2) 0 0;font-weight:var(--fw-semibold);color:var(--heading)}
.konf-kontakt .konf-gruppe small{font-weight:400;color:var(--text-muted);margin-left:6px}
.konf-senden{min-height:56px;font-size:calc(var(--fs-body) * 1.05)}
/* Ladeanimation, zweite Fassung (08.10.2026) */
.konf-rechnen{display:grid;justify-items:center;gap:var(--space-5);padding:var(--space-5) 0 var(--space-3)}
.konf-r-bild{position:relative;width:min(100%,280px);overflow:hidden;border-radius:var(--radius)}
.konf-r-bild .tile-svg{display:block;width:100%;height:auto}
.konf-r-licht{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-100%);animation:konf-licht 1.6s ease-in-out infinite}
@keyframes konf-licht{to{transform:translateX(100%)}}
.konf-rechnen.ist-fertig .konf-r-licht{animation:none;opacity:0}
.konf-r-bar{width:min(100%,420px);height:8px;border-radius:var(--radius);background:var(--fn-bar-track,var(--border));overflow:hidden}
.konf-r-bar span{display:block;width:0;height:100%;background:var(--brand);border-radius:inherit;transition:width 3.2s linear}
/* Jede Zeile fuer sich zentriert (Pascal 08.10.2026: "die Punkte alle jeweils zentrieren") */
.konf-rechnen ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);width:100%}
.konf-rechnen li{display:flex;align-items:center;justify-content:center;text-align:center;gap:var(--space-3);color:var(--text-muted);opacity:.55;transform:translateY(4px);
  transition:opacity .3s,transform .3s,color .3s}
.konf-rechnen li.ist-fertig{opacity:1;transform:none;color:var(--text)}
.konf-rh{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--border-strong);transition:background .25s,border-color .25s,transform .25s}
.konf-rh svg{width:15px;height:15px;fill:none;stroke:transparent;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.konf-rechnen li.ist-fertig .konf-rh{background:var(--brand);border-color:var(--brand);transform:scale(1.06)}
.konf-rechnen li.ist-fertig .konf-rh svg{stroke:#fff}
.konf-r-fertig{display:flex;align-items:center;justify-content:center;text-align:center;max-width:100%;gap:10px;margin:0;font-family:var(--font-display);font-weight:var(--fw-heading);
  font-size:var(--fs-h3);color:var(--heading);opacity:0;transform:scale(.96);transition:opacity .35s,transform .35s}
.konf-r-fertig svg{flex:none;width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:50%;background:var(--brand);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.konf-rechnen.ist-fertig .konf-r-fertig{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.konf-r-licht{display:none}.konf-r-bar span{transition:none}}
/* Kontaktschritt: Zusammenfassung zum Aufklappen */
.konf-recap{border:var(--border-w) solid var(--border);border-radius:var(--radius);background:var(--accent-soft);margin-bottom:var(--space-5)}
.konf-recap summary{display:grid;grid-template-columns:72px minmax(0,1fr) 20px;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);cursor:pointer;list-style:none}
.konf-recap summary::-webkit-details-marker{display:none}
.konf-recap-bild .tile-svg{display:block;width:72px;height:auto}
.konf-recap-txt{display:flex;flex-direction:column;line-height:1.3}
.konf-recap-txt b{color:var(--heading)}
.konf-recap-txt small{font-size:var(--fs-small);color:var(--text-secondary)}
.konf-recap-pfeil{width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .2s;justify-self:center}
.konf-recap[open] .konf-recap-pfeil{transform:rotate(-135deg)}
.konf-recap ul{list-style:none;margin:0;padding:0 var(--space-4) var(--space-3);display:grid;gap:4px}
.konf-recap li{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-small);padding:6px 0;border-top:1px solid color-mix(in srgb,var(--brand) 18%,transparent)}
.konf-recap li span{color:var(--text-muted)}
.konf-recap li b{color:var(--text);font-weight:var(--fw-semibold);text-align:right}
/* Felder: sofort bestaetigt / Fehler sichtbar */
.konf-kontakt .field.ist-ok input,.konf-kontakt .field.ist-ok textarea{border-color:#2E7D4F}
.konf-kontakt .field.ist-ok::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:11px;margin-top:-8px;
  border-right:2.4px solid #2E7D4F;border-bottom:2.4px solid #2E7D4F;transform:rotate(45deg)}
.konf-kontakt .field.ist-fehler input{border-color:#B3261E;box-shadow:0 0 0 3px color-mix(in srgb,#B3261E 14%,transparent)}
.konf-kontakt .consent.ist-fehler{color:#B3261E}
.konf-mensch{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);color:var(--text-secondary);line-height:1.4}
.konf-mensch b{color:var(--heading)}
.konf-mensch small{display:block;font-size:10px;color:var(--text-muted)}
.konf-mensch-ava{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden}
.konf-mensch-ava img{width:100%;height:100%;object-fit:cover;display:block}
/* Handy: im Kontaktschritt ersetzt die Zusammenfassung oben die lange Seitenliste */
@media (max-width:959px){.konf-main.ist-kontakt .konf-sum,.konf-main.ist-rechnen .konf-sum{display:none}}
/* Handy: Frage kompakt, damit die Antworten ueber der Falz stehen */
@media (max-width:600px){.konf-karte .ask{gap:var(--space-3);margin-bottom:var(--space-4)}.konf-karte .ask-who{width:64px}.konf-karte .ask-ava{width:52px;height:52px}.konf-karte .ask-name{font-size:11px}.konf-karte .ask-role,.konf-karte .ask-ki{font-size:9.5px}.konf-karte .bubble{font-size:18px;line-height:1.3;padding:12px 14px}.konf-kontakt .konf-gruppe small{display:block;margin:2px 0 0}.konf-senden{font-size:15px;letter-spacing:.02em;padding-inline:14px}.zub{grid-template-columns:60px minmax(0,1fr) 26px}.zub-bild .tile-svg{width:60px}}

/* Zubehoer-Schritt (Pascal 08.10.2026: "UX und UI von diesem Step verbessern"): Zeilen mit
   Zeichnung, Name, Nutzen und Haken; Knopf zaehlt mit; "weiss ich nicht" als Textlink. */
.zub-liste{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.zub-liste{grid-template-columns:repeat(2,minmax(0,1fr))}.zub-liste>.zub:last-child:nth-child(odd){grid-column:1/-1}}
.zub{display:grid;grid-template-columns:72px minmax(0,1fr) 28px;align-items:center;gap:var(--space-3);text-align:left;
  padding:var(--space-3);background:var(--bg);border:var(--border-w-2) solid var(--border);border-radius:var(--radius);
  font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.zub:hover{border-color:var(--brand)}
.zub:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.zub.is-sel{border-color:var(--brand);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.zub-bild .tile-svg{width:72px;height:auto;display:block}
.zub-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.zub-txt b{color:var(--heading);font-weight:var(--fw-semibold);line-height:1.3;hyphens:none}
.zub-txt small{font-size:var(--fs-small);color:var(--text-secondary);line-height:1.35}
.zub-haken{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  border:var(--border-w-2) solid var(--border-strong);background:var(--bg);transition:background .15s,border-color .15s}
.zub-haken svg{width:16px;height:16px;fill:none;stroke:transparent;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.zub.is-sel .zub-haken{background:var(--brand);border-color:var(--brand)}
.zub.is-sel .zub-haken svg{stroke:#fff}
.zub-offen{display:block;margin:var(--space-3) auto 0;background:none;border:0;padding:8px;font:inherit;font-size:var(--fs-small);
  color:var(--text-secondary);text-decoration:underline;cursor:pointer}
.zub-offen:hover{color:var(--brand)}

/* Ansprechpartner-Gesicht der Strecke ohne KI-Hinweis (Pascal 08.10.2026, wie Kopfzeile) */
.ph--kopf::after{content:none!important}

/* ── Mobil auf Abschluss (Pascal 14.10.2026) ──────────────────────────────────────
   Farben als kompaktes Raster statt Kacheln (Torfarbe war 3.000 px lang), eine Frage je Farbe. */
.fn-swatches{display:grid;grid-template-columns:repeat(var(--sp,4),minmax(0,1fr));gap:10px}
.fn-sw{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 10px;background:var(--bg);
  border:var(--border-w) solid var(--control-line);border-radius:var(--radius);cursor:pointer;font:inherit;color:var(--text);text-align:center;
  transition:border-color .15s,background .15s,box-shadow .15s}
.fn-sw-farbe{display:block;width:100%;max-width:64px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.fn-sw b{font-size:12.5px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--heading);hyphens:manual;-webkit-hyphens:manual;max-width:100%}
.fn-sw small{font-size:11px;line-height:1.2;color:var(--text-muted);margin-top:-4px}
.fn-sw:hover{border-color:var(--brand)}
.fn-sw.is-sel{border-color:var(--brand);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.fn-sw:focus-visible{outline:3px solid var(--focus,var(--brand));outline-offset:2px}
@media (min-width:700px){.fn-swatches{grid-template-columns:repeat(calc(var(--sp,4) * 2),minmax(0,1fr))}.fn-swatches[style*="--sp:2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.konf-senden-note{margin:var(--space-2) 0 0;text-align:center;font-size:13px;color:var(--text-muted);grid-column:1/-1}
@media (max-width:959px){
  /* Am Handy keine Auswahl-Liste unter jeder Frage: sie schob die Vertrauenspunkte weg; Zurueck reicht zum Aendern */
  .konf-sum{display:none}
  /* Weiter-Knopf bleibt sichtbar, auch wenn die Liste lang ist (Zubehoer, Masse) */
  #zweiter,#mweiter{position:sticky;bottom:12px;z-index:5;box-shadow:0 6px 18px rgba(20,30,50,.18)}
  /* PLZ und Ort in einer Zeile */
  .konf-kontakt{grid-template-columns:7fr 13fr!important}
  .konf-kontakt>*{grid-column:1/-1}
  .konf-kontakt>.field:has(#p){grid-column:1}
  .konf-kontakt>.field:has(#o){grid-column:2}
}
/* Auswahl am Handy als Zeilen statt 2er-Kacheln (Pascal 14.10.2026: "Texte gehen ueber mehrere
   Zeilen, unuebersichtlich"). Bild links, Name und eine kurze Zeile rechts - volle Breite fuer den Text. */
.fn-opt .fn-txt{display:flex;flex-direction:column;align-items:center;gap:4px}
@media (max-width:600px){
  .fn-opts,.fn-opts--viele{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px}
  .fn-opts:not(.fn-opts--viele)>.fn-opt:last-child:nth-child(odd){grid-column:auto}
  .fn-opt{flex-direction:row;justify-content:flex-start;min-height:0;padding:10px 14px;gap:14px;text-align:left}
  .fn-opt:hover{transform:none}
  .fn-opt .tile-svg,.fn-opt .tile-svg[viewBox='0 0 160 100']{flex:none;width:76px;height:auto;max-height:52px}
  .fn-sw b{font-size:11.5px}
  .fn-opt .fn-bild--konf{flex:none;width:84px}
  .fn-opt>.fn-txt{align-items:flex-start;text-align:left;gap:2px}
  .fn-opt .fn-titel{font-size:16px;line-height:1.25}
  .fn-opt .fn-unter{text-align:left;font-size:13.5px}
}

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