/* Gebaut aus html/css/ – NICHT von Hand ändern, bin/build ausführen. */

/* ===== 00-tokens.css ===== */
/* Design-Tokens – einzige Stelle für Farben, Schrift, Radius, Abstände.
   Corporate Design Auto-Service Wuppertal: Anthrazit + Werkstatt-Gelb (einzige Aktionsfarbe),
   Off-White, Weiß, Karte dunkel. Kein Rot/Grün (WhatsApp-Grün nur im Icon), keine Verläufe als Dekor,
   keine Schlagschatten auf Karten (Linien statt Schatten). Hell und Dunkel über dieselben Tokens. */
:root{
  /* Marke (themenunabhängig) */
  --anthrazit:#171A1D;
  --karte-dunkel:#262B2F;
  --gelb:#F5BA18;
  --gelb-hover:#E6AC0C;
  --gelb-ink:#171A1D;          /* Text auf Gelb */
  --offweiss:#F7F7F5;
  --weiss:#FFFFFF;
  --wa:#25D366;                /* nur im WhatsApp-Icon */

  /* Nacht: immer dunkel, nur für Schilder/Labels auf Fotos (Chips, KI-Label) */
  --nacht-rgb:18 20 22;
  --nacht-text:#F2F2EF;

  /* Bühne: Hero, Nachweis, Story, CTA-Band, Fuß, Seitenkopf. Folgt dem Theme (Inhaber 21.10.2026:
     „hell muss hell sein“). Hell = warmes Hallengrau, eine Stufe dunkler als --bg; Dunkel = Werkstatthalle. */
  --buehne:#EBEBE7;
  --buehne-2:#FFFFFF;
  --buehne-3:#E0E1DD;
  --buehne-text:#171A1D;
  --buehne-mute:#4F565C;
  --buehne-leise:#5F676E;
  --buehne-linie:rgba(23,26,29,.12);
  --buehne-linie-stark:rgba(23,26,29,.26);
  --buehne-rgb:235 235 231;
  --buehne-fg-rgb:23 26 29;
  --buehne-surface-rgb:255 255 255;
  --buehne-gelb-soft:#FBEFC8;
  --buehne-scheme:light;

  /* Theme hell (Standard) */
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --surface-2:#EEEEEA;
  --surface-3:#E4E5E1;
  --text:#171A1D;
  --text-mute:#535A60;
  --text-leise:#646C73;        /* 4,6:1 auf --surface-2, vorher 3,6:1 (AA verfehlt) */
  --linie:#E1E2DF;
  --feld-rand:#80878E;         /* Feldkontur, 3:1 auf Weiß und Off-White (WCAG 1.4.11) */
  --linie-stark:#C2C6C9;       /* Kontur der Nebentaste: etwas fester, damit sie auf Off-White als Taste lesbar bleibt */
  --gelb-soft:#FDF3D3;
  --fokus:#171A1D;
  --fg-rgb:23 26 29;
  --surface-rgb:255 255 255;
  --fehler:#B3261E;            /* nur Formularfehler-Text, kein Flächenrot */

  /* Schrift */
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  /* Skala: Fließtext 16–17 px · Lead 18–21 · H3 19–23 · H2 34–56 · H1 44–88. H2 bleibt deutlich unter H1,
     H3 deutlich über dem Lead, damit jede Stufe eine eigene Rolle hat (better-typography: wenige, klare Stufen). */
  --fs-0:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-1:clamp(1.125rem,1.06rem + .3vw,1.3125rem);      /* Lead */
  --fs-h3:clamp(1.1875rem,1.08rem + .45vw,1.4375rem);
  --fs-h2:clamp(2.125rem,1.55rem + 2.4vw,3.5rem);       /* Barlow Condensed, Versalien */
  --fs-h1:clamp(2.75rem,1.9rem + 4.4vw,5.5rem);
  --fs-eyebrow:.875rem;
  --fs-klein:.9rem;
  --lh:1.6;
  --lh-display:.96;        /* H1: schmale Versalien vertragen enge Zeilen */
  --lh-h2:1;
  --lh-h3:1.25;
  --track-display:.012em;  /* Versalien der Barlow leicht sperren, sonst kleben C/O/S optisch */
  --track-h3:-.012em;
  --mass:66ch;             /* Zeilenlänge Fließtext (60–75 Zeichen) */
  --mass-lead:54ch;

  /* Form */
  --r:14px;        /* Karten, Kästen */
  --r-klein:10px;  /* Tasten, Felder */
  --r-pill:999px;
  --linie-w:1px;

  /* Maße */
  --wrap:1180px;
  --wrap-breit:1440px;
  --gutter:16px;
  --kopf-h:64px;
  --leiste-h:72px;          /* feste Kontaktleiste mobil */
  --abschnitt:clamp(64px,4.5vw + 40px,128px);        /* Rhythmus zwischen Abschnitten: mobil 64, Desktop bis 128 */
  --abschnitt-kopf-abstand:clamp(32px,2.4vw + 20px,56px); /* Kopf (H2/Lead) → Inhalt, kleiner als --abschnitt */

  /* Bewegung */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dauer:.2s;             /* Hover, Farbe, Kontur */
  --dauer-druck:.12s;      /* Tastendruck */
  --dauer-lang:.5s;        /* Einblenden beim Scrollen */
  --reveal-weg:12px;       /* kleine Distanz: ruhig, nicht „fliegend“ */
}
:root[data-theme="dark"]{
  --buehne:#121416;
  --buehne-2:#1B1E21;
  --buehne-3:#262B2F;
  --buehne-text:#F2F2EF;
  --buehne-mute:#A9B0B6;
  --buehne-leise:#8A9197;
  --buehne-linie:rgba(255,255,255,.1);
  --buehne-linie-stark:rgba(255,255,255,.22);
  --buehne-rgb:18 20 22;
  --buehne-fg-rgb:242 242 239;
  --buehne-surface-rgb:27 30 33;
  --buehne-gelb-soft:rgba(245,186,24,.14);
  --buehne-scheme:dark;
  --bg:#121416;
  --surface:#1B1E21;
  --surface-2:#22262A;
  --surface-3:#2C3136;
  --text:#F2F2EF;
  --text-mute:#A9B0B6;
  --text-leise:#8C939A;        /* 4,6:1 auch auf --surface-3, vorher 4,35:1 auf --surface */
  --linie:#2C3136;
  --feld-rand:#737B82;
  --linie-stark:#434A51;
  --gelb-soft:rgba(245,186,24,.14);
  --fokus:#F2F2EF;
  --fg-rgb:242 242 239;
  --surface-rgb:27 30 33;
  --fehler:#F2A49E;
  color-scheme:dark;
}
@media (min-width:1024px){:root{--gutter:28px;--kopf-h:76px}}

/* ===== 05-basis.css ===== */
/* Schriften (lokal, OFL) */
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;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:"Manrope";src:url(/fonts/manrope-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;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:"Manrope";src:url(/fonts/manrope-latin-ext-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;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:"Manrope";src:url(/fonts/manrope-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;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:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

/* Basis – mobile first */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 12px);scroll-behavior:smooth}
@media (max-width:1023px){html{scroll-padding-bottom:calc(var(--leiste-h) + 12px + env(safe-area-inset-bottom,0px))}}  /* Fokus nie unter der Kontaktleiste (WCAG 2.4.11) */
html[data-motion="off"]{scroll-behavior:auto}
body{margin:0;font-family:var(--font);font-size:var(--fs-0);line-height:var(--lh);color:var(--text);background:var(--bg);padding-bottom:var(--leiste-h);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-skip-ink:auto;transition:text-decoration-color var(--dauer) ease}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--gelb);color:var(--gelb-ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--gelb);color:var(--gelb-ink);padding:12px 16px;z-index:200;border-radius:0 0 var(--r-klein) 0;font-weight:700}
.skip:focus{left:0}
.vorschau{background:var(--gelb);color:var(--gelb-ink);text-align:center;font-size:.85rem;font-weight:600;padding:6px 16px;position:relative;z-index:60}

/* Typografie */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;text-wrap:balance}
h1,.h1,h2,.h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--track-display);text-wrap:balance;font-kerning:normal}
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-display)}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:.42em}
h3,.h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--track-h3);line-height:var(--lh-h3)}
p{margin:0 0 1em;max-width:var(--mass);text-wrap:pretty}
.lead{font-size:var(--fs-1);line-height:1.5;color:var(--text-mute);max-width:var(--mass-lead);text-wrap:pretty}
h2+.lead,.h2+.lead{margin-top:-.1em}
/* Eyebrow (Kleintext vor der H2). Removal-Test 20.10.2026: vor fast jeder H2 wiederholt sie nur den Menüpunkt
   („Leistungen“, „Ablauf“, „Anfahrt“) und der gelbe Strich wurde zum Baukasten-Muster. Darum auf hellen Flächen nur
   noch leiser Kleintext ohne Strich, dicht an der H2 (ein Block). Der gelbe Strich bleibt auf der Bühne, wo er
   als Lichtakzent der Halle wirkt (Hero, Seitenkopf, Story). */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--fs-eyebrow);font-weight:600;line-height:1.3;color:var(--text-mute);margin:0 0 .7em;letter-spacing:.01em}
.buehne .eyebrow::before{content:"";flex:none;width:20px;height:2px;background:var(--gelb)}
.klein{font-size:var(--fs-klein);color:var(--text-mute)}
ul,ol{padding-left:1.2em}
:where(ul,ol):not([class]) > li+li{margin-top:.3em}  /* nur Fließtext-Listen; Leisten/Menüs mit Klasse bleiben unberührt */
strong,b{font-weight:700}

/* Raster */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-breit{max-width:var(--wrap-breit);margin:0 auto;padding:0 var(--gutter)}
.abschnitt{padding:var(--abschnitt) 0}
.abschnitt-kopf{max-width:760px;margin-bottom:var(--abschnitt-kopf-abstand)}
.abschnitt-kopf > :last-child{margin-bottom:0}
/* Zwei Abschnitte auf gleicher Fläche hintereinander: nicht doppelt Luft (vorher 2 × --abschnitt), sondern
   eine Abschnittshöhe plus etwas – der Flächenwechsel trennt sonst, hier trennt nur der Abstand. */
:is(.abschnitt,.faq):not(.flaeche,.buehne) + :is(.abschnitt,.faq):not(.flaeche,.buehne),
.abschnitt.flaeche + .abschnitt.flaeche{padding-top:calc(var(--abschnitt) * .4)}
.zwei{display:grid;gap:28px}
@media (min-width:900px){.zwei{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:start}}

/* Flächen: Bühne (immer dunkel) und Karten */
.buehne{background:var(--buehne);color:var(--buehne-text);--text:var(--buehne-text);--text-mute:var(--buehne-mute);--text-leise:var(--buehne-leise);--surface:var(--buehne-2);--surface-2:var(--buehne-3);--linie:var(--buehne-linie);--linie-stark:var(--buehne-linie-stark);--fokus:var(--buehne-text);--fg-rgb:var(--buehne-fg-rgb);--surface-rgb:var(--buehne-surface-rgb);--gelb-soft:var(--buehne-gelb-soft);color-scheme:var(--buehne-scheme)}
.flaeche{background:var(--surface-2)}
.karte{background:var(--surface);border:var(--linie-w) solid var(--linie);border-radius:var(--r);padding:clamp(22px,2.2vw + 8px,32px)}
.kasten{background:var(--surface-2);border-radius:var(--r);padding:clamp(22px,2.2vw + 8px,32px)}
.kasten h3:first-child,.karte h3:first-child{margin-top:0}
.kasten p:last-child,.karte p:last-child{margin-bottom:0}
.merk{background:var(--gelb-soft);border-left:4px solid var(--gelb);padding:18px 20px;border-radius:0 var(--r) var(--r) 0;max-width:72ch}
.merk p:last-child{margin:0}

/* Tasten: alle als Pille, flach. Genau EIN gefüllter Typ (Gelb, .btn-haupt) für die Handlung, sonst Kontur (.btn-zweit).
   Keine Verläufe, keine Schatten, kein Lichtring (Inhaber 19.10.2026: 3D-Taste wirkte billig). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;padding:.6em 1.45em;font-weight:700;font-size:1rem;line-height:1.15;letter-spacing:.005em;text-decoration:none;border-radius:var(--r-pill);border:var(--linie-w) solid transparent;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--dauer) ease,border-color var(--dauer) ease,color var(--dauer) ease,transform var(--dauer-druck) var(--ease-out)}
.btn .ic{flex:none}
.btn:active{transform:scale(.97)}
.btn-zweit{background:transparent;color:var(--text);border-color:var(--linie-stark)}
@media (hover:hover){.btn-zweit:hover{border-color:var(--text)}}
.btn-klein{min-height:44px;padding:.45em 1.1em;font-size:.95rem;white-space:nowrap}
.btn-rund{width:44px;height:44px;min-height:0;padding:0;border-radius:50%}
.btn:focus-visible{border-radius:var(--r-pill);outline-offset:4px}

/* Haupt-Taste: volle Werkstatt-Gelb-Fläche, dunkle Schrift; Hover dunkleres Gelb, Druck 1 px nach unten */
.btn-haupt{color:var(--gelb-ink);background:var(--gelb);border-color:var(--gelb)}
@media (hover:hover){.btn-haupt:hover{color:var(--gelb-ink);background:var(--gelb-hover);border-color:var(--gelb-hover)}}
.btn-haupt[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-haupt[disabled][aria-busy="true"],.btn-haupt[disabled].ist-ok{opacity:1;cursor:progress}  /* Senden läuft: Gelb bleibt voll */
.ic-wa{color:var(--wa)}
.textlink{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-weight:600;text-decoration:none;padding:6px 0;color:var(--text)}
.textlink:hover span{text-decoration:underline;text-decoration-color:var(--gelb);text-underline-offset:.2em}
.textlink .ic{flex:none}
.aktionen{display:flex;flex-direction:column;gap:10px;margin:26px 0 10px}
@media (min-width:560px){.aktionen{flex-direction:row;flex-wrap:wrap}}

/* Haken-Listen */
.haken{list-style:none;padding:0;margin:0;max-width:62ch}
.haken li{display:flex;gap:12px;align-items:flex-start}
.haken li+li{margin-top:.6em}
.haken-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--gelb);color:var(--gelb-ink)}
.haken-ic .ic{stroke-width:2.8}

/* Brotkrumen */
.krumen{display:flex;gap:10px;align-items:center;font-size:var(--fs-klein);color:var(--text-mute);padding:14px var(--gutter)}
.krumen a{text-decoration-color:var(--linie)}

/* FAQ: 36-faq.css · CTA-Band: 38-band.css */

/* Reveal: Elemente mit [data-reveal] blenden beim Scrollen ein (00-kern.js setzt .ist-sichtbar) */
/* Kurz und ruhig: 12 px, 0,5 s ease-out, Staffel 60 ms (emil-design-eng: kleine Distanz, kurze Staffel). */
[data-reveal]{opacity:0;transform:translateY(var(--reveal-weg));transition:opacity var(--dauer-lang) var(--ease-out),transform var(--dauer-lang) var(--ease-out)}
[data-reveal].ist-sichtbar{opacity:1;transform:none}
[data-reveal="2"]{transition-delay:.06s}[data-reveal="3"]{transition-delay:.12s}[data-reveal="4"]{transition-delay:.18s}
html[data-motion="off"] [data-reveal],html.ohne-js [data-reveal]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
@media print{[data-reveal]{opacity:1;transform:none}}

/* Bilder + AI-Label (1:1 wie innovate-systems.de .is-ki-label) */
.bild{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.bild img{width:100%;height:100%;object-fit:cover}
.ki-label{position:absolute;z-index:1;right:10px;bottom:10px;width:18px;height:18px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.18);color:rgba(255,255,255,.7);font-size:8px;line-height:1;font-weight:600;letter-spacing:.02em;pointer-events:none;font-family:system-ui,-apple-system,sans-serif}

/* Desktop: Kontaktleiste unten weg */
@media (min-width:1024px){body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}

/* Große Textgröße (200 %): Tasten dürfen umbrechen statt aus dem Bild zu laufen */
.btn{max-width:100%;overflow-wrap:anywhere}

/* ===== 10-kopf.css ===== */
/* Kopf: Leiste, Navigation, Dropdown, Sprache, Theme, Burger, Vollbild-Menü.
   Zustände (Klassen auf <body>, gesetzt von js/10-kopf.js):
     kopf-buehne = Leiste liegt über der dunklen Bühne am Seitenanfang → Bühnen-Tokens (dunkel in beiden Themes)
     kopf-oben   = ganz oben (Startseite): Hintergrund ausgeblendet, Leiste schwebt über dem Hero, ohne CTA
     kopf-weg    = Leiste nach oben gefahren
     menu-offen  = Vollbild-Menü offen, Seite gesperrt
   Der Wechsel dunkel ↔ hell passiert nur, solange die Leiste außer Sicht ist; sonst blendet das Skript kurz über.
   Animiert werden nur transform/opacity. Hintergrund + Haarlinie liegen in ::before (Deckkraft statt Farbe). */

.kopf{position:sticky;top:0;z-index:130;--kopf-h:64px;transition:transform .34s var(--ease-out)}
.kopf::before{content:"";position:absolute;inset:0;z-index:0;background:rgb(var(--surface-rgb) / .96);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:var(--linie-w) solid var(--linie);transition:opacity .24s ease;pointer-events:none}
body.kopf-weg .kopf{transform:translateY(-100%);transition-duration:.26s}
body.menu-offen .kopf{transform:none}
body.menu-offen{overflow:hidden}
@media (prefers-reduced-transparency:reduce){.kopf::before{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Bühnen-Aussehen: dieselben Tokens wie .buehne (05-basis), Hintergrund = Bühnenschwarz */
body.kopf-buehne:not(.menu-offen) .kopf{--text:var(--buehne-text);--text-mute:var(--buehne-mute);--text-leise:var(--buehne-leise);--surface:var(--buehne-2);--surface-2:var(--buehne-3);
  --linie:var(--buehne-linie);--linie-stark:var(--buehne-linie-stark);--fokus:var(--buehne-text);--fg-rgb:var(--buehne-fg-rgb);--surface-rgb:var(--buehne-surface-rgb);--gelb-soft:var(--buehne-gelb-soft);color-scheme:var(--buehne-scheme)}
body.kopf-buehne:not(.menu-offen) .kopf::before{background:rgb(var(--buehne-rgb) / .92)}
@media (prefers-reduced-transparency:reduce){body.kopf-buehne:not(.menu-offen) .kopf::before{background:var(--buehne)}}
/* Ganz oben auf der Startseite: Leiste liegt über dem Hero (negativer Rand zieht ihn darunter), ohne Fläche */
body.start .kopf{margin-bottom:calc(-1 * var(--kopf-h))}
body.kopf-oben:not(.menu-offen) .kopf::before{opacity:0}
body.menu-offen .kopf::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}

.kopf-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--kopf-h);color:var(--text)} /* min-height: bei 200 % Text darf die Leiste wachsen (Logo bricht um) */

/* Logo */
.logo{display:inline-flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:var(--text);min-height:44px;-webkit-tap-highlight-color:transparent}
.logo img{width:36px;height:36px;border-radius:9px;flex:none;outline:var(--linie-w) solid var(--linie-stark);outline-offset:-1px} /* Kante, damit die dunkle Kachel auf der Bühne nicht verschwindet */
.logo-text{display:flex;flex-direction:column;justify-content:center;line-height:1;min-width:0}
.logo-wort{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.32rem;letter-spacing:.01em;line-height:1;overflow-wrap:anywhere} /* bei 200 % Text umbrechen statt die Tasten aus dem Bild zu schieben */
.logo-ort{display:none;font-weight:700;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute);margin-top:4px;padding-left:.08em}

/* Bedienelemente rechts: Hilfen (Sprache, Theme) | Kontakt (Telefon, Termin) */
.kopf-tools{display:flex;align-items:center;gap:4px;flex-shrink:0}
.kopf-hilfen,.kopf-kontakt{display:flex;align-items:center;gap:2px}
.kopf-kontakt{display:none}

/* Runde Tasten: Theme, Burger */
.theme-btn,.burger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;text-decoration:none;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--dauer) ease,transform var(--dauer-druck) var(--ease-out)}
@media (hover:hover){.theme-btn:hover,.burger:hover{background:rgb(var(--fg-rgb) / .07)}}
.theme-btn:active,.burger:active{transform:scale(.94)}
.theme-btn .ic,.burger .ic{position:absolute;transition:opacity .2s var(--ease-out),transform .3s var(--ease-out)}
.theme-btn .ic-sonne{opacity:0;transform:rotate(-40deg) scale(.6)}
:root[data-theme="dark"] .theme-btn .ic-sonne{opacity:1;transform:none}
:root[data-theme="dark"] .theme-btn .ic-mond{opacity:0;transform:rotate(40deg) scale(.6)}
.burger .ic-x{opacity:0;transform:rotate(-90deg) scale(.7)}
.burger[aria-expanded="true"] .ic-menu{opacity:0;transform:rotate(90deg) scale(.7)}
.burger[aria-expanded="true"] .ic-x{opacity:1;transform:none}

/* Sprache DE | EN */
.sprache{display:inline-flex;align-items:center;gap:0;font-size:.78rem;font-weight:700;letter-spacing:.08em}
.sprache a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;padding:0 4px;text-decoration:none;color:var(--text-mute);position:relative;border-radius:6px;transition:color var(--dauer) ease}
@media (hover:hover){.sprache a:hover{color:var(--text)}}
.sprache a[aria-current="true"]{color:var(--text)}
.sprache a[aria-current="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:2px;border-radius:1px;background:var(--gelb)}
.sprache-trenner{width:1px;height:12px;background:var(--linie-stark)}
.kopf-sprache,.kopf-tel,.kopf-cta{display:none}

/* Navigation (nur Desktop) */
.kopf-nav{display:none}
.kopf-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.kopf-nav li{position:relative;display:flex;align-items:center;margin:0} /* margin:0 gegen li+li aus 05-basis (schob Werkstatt/Anfahrt 2,5 px tiefer) */
.kopf-nav>ul>li>a,.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;font-weight:600;font-size:.95rem;letter-spacing:-.003em;color:var(--text-mute);text-decoration:none;background:transparent;border:0;cursor:pointer;border-radius:var(--r-klein);position:relative;white-space:nowrap;transition:color var(--dauer) ease}
.kopf-nav>ul>li>a[aria-current="page"],.nav-drop-btn.ist-aktiv,.nav-drop.offen .nav-drop-btn{color:var(--text)}
.kopf-nav>ul>li>a::after,.nav-drop-btn::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:1px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.kopf-nav>ul>li>a[aria-current="page"]::after,.nav-drop-btn.ist-aktiv::after,.nav-drop.offen .nav-drop-btn::after{transform:scaleX(1)}
.nav-drop-btn::after{right:38px}
.nav-drop-ic{transition:transform .22s var(--ease-out),color var(--dauer) ease;color:var(--text-leise)}
.nav-drop.offen .nav-drop-ic{transform:rotate(180deg);color:var(--text)}
@media (hover:hover){
  .kopf-nav>ul>li>a:hover,.nav-drop:hover .nav-drop-btn{color:var(--text)}
  .kopf-nav>ul>li>a:hover::after,.nav-drop:hover .nav-drop-btn::after{transform:scaleX(1)}
  .nav-drop:not(.hover-aus):hover .nav-drop-ic{transform:rotate(180deg);color:var(--text)}
}

/* Dropdown Leistungen: Hover (Zeigegerät) UND Klick/Tastatur (.offen).
   Öffnet von der Taste aus (transform-origin oben Mitte = unter der Taste), 200 ms; schließt schneller und
   mit 80 ms Gnadenfrist, damit ein schräger Weg mit der Maus das Feld nicht zuklappt. */
.nav-drop-panel{position:absolute;top:100%;left:50%;width:min(620px,calc(100vw - 2 * var(--gutter)));padding-top:8px;transform:translateX(-50%);visibility:hidden;transition:visibility 0s linear .22s}
.nav-drop-box{background:var(--surface);border:var(--linie-w) solid var(--linie-stark);border-radius:var(--r);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:50% 0;transition:opacity .14s ease .08s,transform .14s var(--ease-out) .08s}
.nav-drop.offen .nav-drop-panel{visibility:visible;transition-delay:0s}
.nav-drop.offen .nav-drop-box{opacity:1;transform:none;transition:opacity .16s ease,transform .2s var(--ease-out)}
@media (hover:hover){
  .nav-drop:not(.hover-aus):hover .nav-drop-panel{visibility:visible;transition-delay:0s}
  .nav-drop:not(.hover-aus):hover .nav-drop-box{opacity:1;transform:none;transition:opacity .16s ease,transform .2s var(--ease-out)}
}
.nav-drop-item{display:flex;gap:14px;align-items:flex-start;padding:12px 14px 12px 12px;border-radius:var(--r-klein);text-decoration:none;color:var(--text);transition:background-color .15s ease}
.nav-drop-item:focus-visible{background:var(--surface-2);outline-offset:-2px}
.nav-drop-item[aria-current="page"]{background:var(--gelb-soft)}
.nav-drop-item-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:var(--linie-w) solid var(--linie-stark);color:var(--text);transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.nav-drop-item:focus-visible .nav-drop-item-ic,.nav-drop-item[aria-current="page"] .nav-drop-item-ic{background:var(--gelb);border-color:var(--gelb);color:var(--gelb-ink)}
@media (hover:hover){
  .nav-drop-item:hover{background:var(--surface-2)}
  .nav-drop-item:hover .nav-drop-item-ic{background:var(--gelb);border-color:var(--gelb);color:var(--gelb-ink)}
}
.nav-drop-item-txt{display:flex;flex-direction:column;gap:3px;line-height:1.35;padding-top:1px}
.nav-drop-item-txt strong{font-weight:700;font-size:.95rem;letter-spacing:-.005em}
.nav-drop-item-txt small{font-size:.82rem;color:var(--text-mute);text-wrap:pretty}

/* Vollbild-Menü (mobil): Fläche blendet ein, Zeilen folgen gestaffelt (20 ms, ab Zeile 5 gleichzeitig; alles < 400 ms) von unten. Schließen: nur kurzes Ausblenden. */
.menu{position:fixed;inset:0;z-index:1;background:var(--bg);color:var(--text);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .16s ease}
.menu.offen{opacity:1;transition:opacity .22s var(--ease-out)}
.menu[hidden]{display:none}
.menu-stufe{opacity:0;transform:translateY(12px);transition:opacity .12s ease,transform .12s ease}
.menu.offen .menu-stufe{--stufe-d:calc(30ms + min(var(--i, 0), 4) * 20ms);opacity:1;transform:none;transition:opacity .22s var(--ease-out) var(--stufe-d),transform .28s var(--ease-out) var(--stufe-d)}
.menu-in{padding:calc(var(--menu-oben, var(--kopf-h)) + 8px) var(--gutter) max(24px, env(safe-area-inset-bottom));max-width:640px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.menu-label{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);margin:0 0 2px;padding:0 2px} /* QA 18.10.2026: --text-leise nur 3,6:1 auf hellem Menügrund */
.menu-liste{list-style:none;margin:0;padding:0}
.menu-liste li{margin:0}
.menu-liste li+li .menu-zeile{border-top:var(--linie-w) solid var(--linie)}
.menu-liste-2{margin-top:10px;border-top:var(--linie-w) solid var(--linie-stark)}
.menu-zeile{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 2px;text-decoration:none;color:var(--text);-webkit-tap-highlight-color:transparent;transition:transform var(--dauer-druck) var(--ease-out)}
.menu-zeile:active{transform:scale(.985)}
.menu-liste-2 .menu-zeile{min-height:56px}
.menu-liste-2 .menu-txt strong{font-size:1.06rem}
.menu-zeile[aria-current="page"] .menu-txt strong{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:3px;text-underline-offset:.24em}
.menu-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:var(--linie-w) solid var(--linie-stark);color:var(--text)}
.menu-zeile[aria-current="page"] .menu-ic{background:var(--gelb);border-color:var(--gelb);color:var(--gelb-ink)}
.menu-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;line-height:1.25}
.menu-txt strong{font-weight:700;font-size:1.14rem;letter-spacing:-.012em}
.menu-txt small{font-size:.85rem;line-height:1.35;color:var(--text-mute);text-wrap:pretty}
.menu-pfeil{flex:none;color:var(--text-leise);transition:transform .2s var(--ease-out)}
.menu-zeile:active .menu-pfeil{transform:translateX(3px)}
.menu-fuss{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.menu-cta{width:100%}
.menu-kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:10px} /* bei großer Schrift untereinander */
.menu-kontakt-1{grid-template-columns:1fr}
.menu-kontakt .btn{min-height:50px;padding-inline:.8em;font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-unten{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-top:4px;padding-top:6px;border-top:var(--linie-w) solid var(--linie)}
.menu-sprache{margin-right:-6px}
.menu-sprache a{min-width:44px} /* QA 18.10.2026: Touch-Ziel im Menü 44 px breit (Kopfzeile bleibt kompakt) */
.menu-zeiten{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.85rem;color:var(--text-mute);font-variant-numeric:tabular-nums}
.menu-zeiten .ic{flex:none;color:var(--text-leise)}
@media (max-height:700px){.menu-zeile{min-height:52px;padding-block:6px}.menu-ic{width:40px;height:40px}.menu-fuss{padding-top:14px}} /* Beschreibungen bleiben: „Unfallschaden … über Partnerbetrieb“ muss stehen */

/* Desktop */
@media (min-width:1024px){
  .kopf{--kopf-h:68px}
  body.start.kopf-oben:not(.menu-offen) .kopf{--kopf-h:76px}
  .kopf-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
  .logo img{width:40px;height:40px;border-radius:10px}
  .logo-wort{font-size:1.45rem}
  .logo-ort{display:block}
  .kopf-nav{display:block;justify-self:center}
  .kopf-tools{justify-self:end;gap:0}
  .kopf-sprache{display:inline-flex}
  .kopf-kontakt{display:flex;gap:6px;margin-left:12px;padding-left:16px;position:relative}
  .kopf-kontakt::before{content:"";position:absolute;left:0;top:50%;height:24px;margin-top:-12px;width:1px;background:var(--linie-stark)}
  .kopf-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 6px;font-weight:700;font-size:.95rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--text);text-decoration:none;border-radius:var(--r-pill);white-space:nowrap}
  .kopf-tel .ic{flex:none;color:var(--text-mute);transition:color var(--dauer) ease}
  .kopf-tel span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em;transition:text-decoration-color var(--dauer) ease}
  .kopf-tel:hover span{text-decoration-color:var(--gelb)}
  .kopf-tel:hover .ic{color:var(--text)}
  .kopf-cta{display:inline-flex}
  /* Ganz oben auf der Startseite steht die Termin-Taste groß im Hero → im Kopf weg, Trennlinie mit ihr */
  body.kopf-oben:not(.menu-offen) .kopf-cta{display:none}
  .burger,.menu{display:none}
}
/* 1024–1439 px: Telefon als runde Icon-Taste (Nummer bleibt zugänglicher Name), CTA mit Kurztext,
   damit die Navigation exakt mittig bleibt */
@media (min-width:1024px) and (max-width:1439px){
  .kopf-cta-lang{display:none}
  .kopf-tel{width:44px;padding:0;justify-content:center;border-radius:50%}
  .kopf-tel .ic{color:var(--text)}
  .kopf-tel:hover{background:rgb(var(--fg-rgb) / .07)}
  .kopf-tel span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .kopf-kontakt{margin-left:8px;padding-left:12px}
}
@media (min-width:1024px) and (max-width:1199px){
  .kopf-in{gap:12px}
  .kopf-nav>ul>li>a,.nav-drop-btn{padding:0 12px}
  .kopf-nav>ul>li>a::after,.nav-drop-btn::after{left:12px;right:12px}
  .nav-drop-btn::after{right:34px}
  .kopf-sprache a{min-width:32px}
}
@media (min-width:1440px){.kopf-cta-kurz{display:none}.kopf-nav ul{gap:6px}}

/* ===== 15-sequenz.css ===== */
/* Sequenz: Auto als Bildsequenz auf <canvas> (docs/SEQUENZ.md §5). .seq-box = Auto-Box (1200:520), .seq-layer = Frame,
   per --seq-l/-t/-w/-h aus dem Manifest-„rahmen“ so gelegt, dass die Auto-Box deckungsgleich mit .seq-box ist.
   Sichtbarkeit: Standard Standbild (.seq-still); das Startbild (.seq-start, LCP, nur Hero-Desktop) blendet css/20-hero.css
   ein; .seq-live (vom Lader nach dem ersten gezeichneten Frame) zeigt den Canvas. Ohne JS, bei Bewegung aus, .ist-still und
   prefers-reduced-motion immer das Standbild. Nur Tokens, keine festen Farben.
   Teile/Videos (Manifest rahmen.aspekt): sequenz() setzt aspect-ratio inline (überschreibt 1200/520) und --seq-aspekt.
   Schleifen (data-seq-schleife) spielt der Lader selbst ab; Sichtbarkeit wie oben (Standbild bis zum ersten Frame). */
.seq-box{position:relative;aspect-ratio:1200/520;overflow:visible}
.seq-layer{position:absolute;left:var(--seq-l,0%);top:var(--seq-t,0%);width:var(--seq-w,100%);height:var(--seq-h,100%);pointer-events:none}
.seq-layer>*{position:absolute;inset:0;width:100%;height:100%;margin:0}
.seq-still,.seq-start{display:block}
.seq-still img,.seq-start img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.seq-canvas{display:block}

/* Standard: Standbild sichtbar, Startbild und Canvas aus */
.seq-start,.seq-canvas{display:none}

/* Live: Canvas zeichnet, Bilder aus */
.seq-box.seq-live .seq-canvas{display:block}
.seq-box.seq-live .seq-still,.seq-box.seq-live .seq-start{display:none}

/* Immer Standbild: ohne JS, Bewegung aus, still gesetzt, reduzierte Bewegung */
html.ohne-js .seq-box .seq-still,
html[data-motion="off"] .seq-box .seq-still,
.ist-still .seq-box .seq-still{display:block}
html.ohne-js .seq-box .seq-start,html.ohne-js .seq-box .seq-canvas,
html[data-motion="off"] .seq-box .seq-start,html[data-motion="off"] .seq-box .seq-canvas,
.ist-still .seq-box .seq-start,.ist-still .seq-box .seq-canvas{display:none}
@media (prefers-reduced-motion:reduce){
  .seq-box .seq-still{display:block}
  .seq-box .seq-start,.seq-box .seq-canvas{display:none}
}

/* Fehler (Start-Frame nicht ladbar): immer Standbild, nie Start-Frame/Canvas */
.seq-box.seq-fehler .seq-still{display:block}
.seq-box.seq-fehler .seq-start,.seq-box.seq-fehler .seq-canvas{display:none}

/* ===== 20-hero.css ===== */
/* Hero der Startseite: Werkstatthalle als Bühne. Text links, rechts groß ein V8-Motor im Licht (Bildsequenz „motor“,
   docs/SEQUENZ.md), der sich beim Weiterscrollen in seine Einzelteile zerlegt. KEIN Pinning, keine Scroll-Strecke: die Seite
   scrollt ungebremst, der Motor läuft nur nebenher (Inhaber 19.10.2026: Animationen dürfen keine Barriere sein).
     .hero         Desktop: 100 svh, Text links (mind. 27rem) + Bühne rechts. Mobil: fließend, Standbild randlos unter dem Text.
     .hero-buehne  Size-Container (cqw/cqh) von knapp unter dem Kopf bis zur Hero-Unterkante; Unterkante und linker Rand
                   per Maske weich, damit zerlegte Teile nicht hart abreißen und den Text nicht anschneiden.
     .hero-motor   Box im Manifest-Seitenverhältnis (--motor-aspekt), so hoch wie die Bühne; driftet beim Scrollen langsamer als
                   die Seite (Parallaxe; transform setzt js/20-hero.js direkt auf die Box). Licht (.hero-licht) hängt an
                   der Box und wandert mit: nur ein warmer Lichtfleck am Boden und eine feine Bodenlinie, die den Motor erden.
                   Box-Koordinaten des zusammengebauten Motors (Frame 0): x 17–87 %, y 12–74 %, Mitte x ≈ 52 %.
   Keine Custom Property pro Frame auf .hero (würde den ganzen Teilbaum neu berechnen). Ohne JS / mobil / bei ASW.still() = Standbild (halb zerlegt).
   Eingang: H1-Wörter steigen einmalig aus einer Maske (.hw), danach geht das Licht an – nur CSS, nur transform/opacity,
   gesperrt bei reduzierter Bewegung und data-motion=off (setzt das Kopf-Skript vor dem ersten Rendern).
   Bühne in beiden Themes dunkel (.buehne). Farben ausschließlich über Tokens. */

.hero-huelle{position:relative;background:var(--buehne)}
.hero{position:relative;display:flex;flex-direction:column;padding-top:calc(var(--kopf-h) + 20px);padding-bottom:0;overflow:hidden}
.hero-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-content:start;width:100%}

/* Text */
.hero-text{position:relative;z-index:3;grid-row:1;align-self:center}
.hero .eyebrow{margin-bottom:1.1em}
.hero-h1{font-size:clamp(3.25rem,1.9rem + 5vw,6.75rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;line-height:calc(var(--lh-display) - .04);letter-spacing:var(--track-display);margin:0 0 .3em;max-width:11ch;text-wrap:wrap}
.hero-h1-ort{display:block;font-size:.4em;line-height:1.1;letter-spacing:.03em;color:var(--text-mute);margin-top:.5em;max-width:none}
.hero-lead{max-width:44ch;margin-bottom:0;text-wrap:pretty}
.hero-aktionen{margin:26px 0 0}

/* Dritte Ebene: WhatsApp als Textlink, daneben die Öffnungszeiten – leise, ohne Rahmen, ohne Haken */
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin:14px 0 0;font-size:var(--fs-klein);color:var(--text-mute)}
.hero-meta:empty{display:none}
.hero-wa{color:var(--text-mute);min-height:44px}
@media (hover:hover){.hero-wa:hover{color:var(--text)}}
.hero-zeiten{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-variant-numeric:tabular-nums}
.hero-zeiten .ic{flex:none;color:var(--text-leise);stroke-width:1.8}

/* Masken-Eingang der H1: jedes Wort in einer eigenen Maske (Polster oben/unten, damit Umlaute und Punkte nicht abgeschnitten
   werden). max-width: lange Wörter (200 % Textgröße, 320 px) brechen/trennen innerhalb der Maske statt abgeschnitten zu werden. Endzustand ist der Normalzustand – die Animation läuft nur, wenn Bewegung erlaubt ist. */
.hero-h1 .hw{display:inline-block;max-width:100%;overflow:hidden;vertical-align:top;padding:.12em .02em .06em;margin:-.12em -.02em -.06em}
.hero-h1 .hw > span{display:inline-block;max-width:100%}

/* Bühne (mobil: Standbild unter dem Text) */
.hero-buehne{position:relative;grid-row:2;display:grid;justify-items:center;align-items:center;isolation:isolate;margin:18px calc(-1 * var(--gutter)) 0}
.hero-partikel{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:none}

/* Motor: Box im Manifest-Seitenverhältnis, driftet beim Scrollen nach unten (Parallaxe) */
.hero-motor{--motor-aspekt:1.1045;position:relative;z-index:1;width:min(100%,560px);margin:0}
.hero-motor .hero-motor-seq{position:relative;z-index:1;width:100%;user-select:none;-webkit-user-drag:none}  /* Seitenverhältnis inline aus sequenz() */

/* Licht der Bühne, an der Motor-Box ausgerichtet (Bodenhöhe 75 %, Mitte 52 %). Bewusst nur eine Ebene: kein Strahl/Kegel,
   kein Lampenkörper – der Lichtfleck erdet den Motor, die Bodenlinie gibt der Halle einen Boden. */
.hero-licht{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Boden: warmer Lichtfleck unter dem Motor + feine Bodenlinie, die zu den Seiten ausläuft */
.hero-licht::after{content:"";position:absolute;left:-40%;right:-24%;top:64%;height:22%;
  background:
    linear-gradient(90deg, transparent, var(--buehne-linie) 26%, var(--buehne-linie-stark) 56%, var(--buehne-linie) 80%, transparent) 0 50% / 100% 1px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--gelb) 15%, transparent), color-mix(in srgb, var(--gelb) 5%, transparent) 60%, transparent) 56% 50% / 58% 100% no-repeat}

/* Desktop: Text links, Bühne rechts von knapp unter dem Kopf bis zur Hero-Unterkante; normaler Fluss, kein sticky */
@media (min-width:900px){
  .hero{height:100svh;min-height:560px}
  .hero-in{grid-template-columns:minmax(min(27rem,100%),1fr) minmax(0,1.6fr);grid-template-rows:1fr;column-gap:clamp(24px,3.5vw,56px);align-content:stretch}
  .hero-text{grid-column:1;grid-row:1;padding-bottom:clamp(40px,7svh,80px)}
  .hero-buehne{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);margin:-12px 0 0;padding:0;container-type:size;min-height:0;justify-items:end;align-items:center}
  /* Unterkante und linker Rand weich: der driftende Motor läuft am Hero-Rand aus, Teile laufen vor dem Text aus */
  .hero-buehne{-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent),linear-gradient(90deg,transparent,#000 9%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,#000 84%,transparent),linear-gradient(90deg,transparent,#000 9%);mask-composite:intersect}
  /* So hoch wie die Bühne (Breite = Höhe × Aspekt), höchstens 10 % breiter als die Spalte – der leere Rand links der Box
     darf in den Spaltenabstand ragen, der Motor selbst steht frei. Rechts bündig zur Inhaltskante. */
  .hero-motor{width:min(110cqw,(100cqh - 4px) * var(--motor-aspekt));justify-self:unsafe end}
}
/* Flache Desktop-Fenster (z. B. 1366 × 768): kleinere Überschrift, engere Abstände */
@media (min-width:900px) and (max-height:820px){
  .hero-h1{font-size:clamp(2.9rem,1rem + 4.2vw,5.4rem)}
  .hero .eyebrow{margin-bottom:.8em}
  .hero-lead{font-size:var(--fs-0)}
  .hero-aktionen{margin-top:22px}
  .hero-text{padding-bottom:36px}
}
@media (min-width:900px) and (max-height:700px){
  .hero{padding-top:calc(var(--kopf-h) + 12px)}
  .hero-h1{font-size:clamp(2.4rem,.8rem + 3.4vw,4rem)}
  .hero-lead{font-size:.95rem}
  .hero-aktionen{margin-top:16px}
  .hero-meta{margin-top:8px}
  .hero-text{padding-bottom:24px}
}
@media (min-width:600px) and (max-width:899px){
  .hero-h1{max-width:14ch}
  .hero-motor{width:min(100%,600px)}
}

/* Eingang, einmalig: Wörter der H1 steigen gestaffelt aus ihrer Maske (≈ 1 s gesamt), danach geht das Licht an. */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .hero-h1 .hw > span{animation:hero-wort .64s var(--ease-out) both;animation-delay:calc(60ms + var(--i) * 45ms)}
  html:not([data-motion="off"]) .hero-licht{animation:hero-licht-an .9s var(--ease-out) .45s both}
}
@keyframes hero-wort{from{transform:translate3d(0,108%,0)}}
@keyframes hero-licht-an{from{opacity:0}}

/* Desktop mit Bewegung: Staub-Canvas an; bis der Lader das erste Frame gezeichnet hat (.seq-live), zeigt die Box das
   Start-Frame (zusammengebauter Motor, LCP, eager + Preload) statt des Standbilds – kein Sprung vom halb zerlegten Motor. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html:not(.ohne-js):not([data-motion="off"]) .hero-huelle:not(.ist-still) .hero-partikel{display:block}
  html:not(.ohne-js):not([data-motion="off"]) .hero-huelle:not(.ist-still) .hero-motor-seq:not(.seq-live):not(.seq-fehler) .seq-still{display:none}
  html:not(.ohne-js):not([data-motion="off"]) .hero-huelle:not(.ist-still) .hero-motor-seq:not(.seq-live):not(.seq-fehler) .seq-start{display:block}
}

/* Mobil ist immer Standbild: Hero fließend ohne Mindesthöhe */
@media (max-width:899px){
  .hero,html.ohne-js .hero,html[data-motion="off"] .hero,.ist-still .hero{min-height:0}
}
/* Standbild (Frame 76, halb zerlegt): Ölwanne hängt tiefer – Boden mitnehmen */
.ist-still .hero-licht::after,html.ohne-js .hero-licht::after{top:76%}
@media (max-width:899px){.hero{padding-bottom:12px}}

/* ===== 25-story.css ===== */
/* Problem-Story (inc/start/story.php). Ein Werkstattfoto je Schritt (diagnose → inspektion → tuev → werkstatt).
   Seit 20.10.2026 editorial statt Kartenstapel: keine Kartenflächen, jeder Schritt beginnt mit Ziffer + Haarlinie,
   der aktive Schritt wird über Typo/Linie gezeigt (Ziffer gelb, Linie füllt sich), nicht über eine Box.
   Drei Fassungen, alle im selben DOM:
   - Standard (ohne JS / reduzierte Bewegung / Schalter aus / mobil < 900 px): je Schritt das Foto (.story-statisch).
   - Showcase (.story--live, von js/25-story.js, nur ≥ 900 px): Sticky-Bühne rechts, vier Fotos übereinander;
     das neue Foto wischt per WAAPI-clip-path über das alte (vorwärts von unten, zurück von oben), das alte bleibt
     darunter stehen, bis der Wisch fertig ist. Chips blenden danach ein.
   - Kurzfassung (.story-kurz): 4er-Raster, Ziffer + Icon über Haarlinie, ohne Kacheln.
   Nur Tokens. Innerhalb .buehne sind --surface/--text/--linie bereits dunkel. Kein Rot/Grün, flach, keine Schatten.
   Animiert werden nur transform, opacity, clip-path. */

.story{padding:var(--abschnitt) 0;overflow:clip;
}
.story-lang[hidden],.story-kurz[hidden]{display:none !important}

/* Kopf mit Umschalter */
.story-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:clamp(32px,4vw,64px)}
.story-kopf-text{max-width:760px}
.story-kopf-text h2{text-wrap:balance}
.story-kopf-text .lead{margin-bottom:0;max-width:44ch}
.story-schalter{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}
.story-hinweis{margin:0;color:var(--text-mute)}
/* Umschalter als ruhige Textaktion, nicht als zweite Taste neben den echten CTAs */
.story-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;margin:0;border:0;background:none;cursor:pointer;
  font:600 var(--fs-0)/1.2 var(--font);color:var(--text);white-space:nowrap;border-radius:var(--r-klein)}
.story-btn span{text-decoration:underline;text-decoration-color:var(--linie-stark);text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color var(--dauer) ease}
.story-btn .ic{flex:none;color:var(--gelb);transition:transform var(--dauer) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .story-btn:hover span{text-decoration-color:var(--gelb)}
  .story-btn:hover .ic{transform:translateX(2px)}
}
html.ohne-js .story-schalter{display:none}

/* ===== Schritte ===== */
.story-schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,7vw,72px)}
.story-schritt{margin:0}
.story-karte{display:grid;gap:clamp(18px,3vw,24px)}
.story-karte-text{min-width:0;max-width:34rem}

/* Ziffer + Haarlinie: trennt die Schritte, zeigt im Showcase den aktiven */
.story-nr{display:flex;align-items:center;gap:14px;margin:0 0 clamp(14px,1.6vw,20px);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.story-nr-z{color:var(--gelb);min-width:2ch}
.story-nr-linie{position:relative;flex:1;height:1px;background:var(--linie)}
.story-nr-linie::after{content:"";position:absolute;inset:0;background:var(--gelb);transform:scaleX(0);transform-origin:left center}

.story-h3{margin:0 0 .45em;font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);line-height:1.2;letter-spacing:-.015em;font-weight:700;text-wrap:pretty}
.story-satz{margin:0 0 1em;color:var(--text-mute);font-size:var(--fs-1);line-height:1.55;max-width:38ch;text-wrap:pretty}
.story-satz:last-child{margin-bottom:0}

/* Mini-Zeilen Service (immer vollständig; Haken im Showcase scroll-gebunden) */
.story-checks{list-style:none;margin:0 0 1.1em;padding:0;display:grid;gap:10px}
.story-checks li{display:flex;gap:12px;align-items:center;margin:0;color:var(--text)}
.story-check-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--gelb);border:1.5px solid var(--gelb);color:var(--gelb-ink)}
.story-check-ic .ic{stroke-width:3;width:12px;height:12px}
.story--live .story-checks li:not(.ist-fertig) .story-check-ic{background:transparent;border-color:var(--linie-stark);color:transparent}
.story--live .story-checks li:not(.ist-fertig){color:var(--text-mute)}
.story--live .story-check-ic{transition:background-color .3s ease,border-color .3s ease,color .2s ease}
.story--live .story-checks li{transition:color .3s ease}

/* Vertiefung je Schritt (einklappbar) – leise Textaktion */
.story-mehr{margin-top:2px}
.story-mehr summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-weight:600;font-size:.95rem;color:var(--text-mute);border-radius:var(--r-klein)}
.story-mehr summary::-webkit-details-marker{display:none}
.story-mehr summary .ic{flex:none;transition:transform var(--dauer) var(--ease-out)}
.story-mehr[open] summary .ic{transform:rotate(180deg)}
.story-mehr[open] summary{color:var(--text)}
@media (hover:hover) and (pointer:fine){.story-mehr summary:hover{color:var(--text)}}
.story-mehr p{margin:0 0 4px;padding-left:26px;color:var(--text-mute);max-width:46ch;text-wrap:pretty}

/* ===== Foto (Bühne und statisch): bild()-Figur füllt .story-foto, Ausschnitt über --pos (inline je Schritt) ===== */
.story-foto{position:relative;border-radius:var(--r-klein);overflow:hidden;background:var(--buehne-2)}
.story-foto .story-foto-bild{position:absolute;inset:0;border-radius:inherit;background:var(--buehne-2)}
.story-foto .story-foto-bild picture{height:100%}
.story-foto .story-foto-bild img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:var(--pos,50% 50%)}

/* Chips: unten links, klein und ruhig – Zustand, nicht Dekoration */
.story-chips{position:absolute;z-index:2;left:clamp(10px,1.4vw,16px);bottom:clamp(10px,1.4vw,16px);right:44px;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.story-chip{margin:0;display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 10px 6px 8px;border-radius:var(--r-klein);
  background:rgb(var(--nacht-rgb) / .82);color:var(--nacht-text);font:600 12.5px/1.2 var(--font);letter-spacing:.005em}
.story-chip .ic{flex:none;color:var(--gelb);width:13px;height:13px}
.story-chip-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--gelb)}
.story-chip-ic .ic{stroke-width:3;color:var(--gelb)}

/* Statische Fotos (Standard-DOM) */
.story-statisch{margin:0}
.story-statisch .story-foto{aspect-ratio:4/3}

/* CTA unter der Geschichte */
.story-cta{padding-top:clamp(40px,5vw,56px)}
.story-cta .aktionen{margin:0}
.story-cta--kurz{padding-top:clamp(32px,4vw,48px)}

/* ===== Kurzfassung: 4er-Raster ohne Kacheln ===== */
.story-raster{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.story-raster li{margin:0;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:var(--linie-w) solid var(--linie)}
.story-raster-kopf{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.story-raster-nr{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:.06em;color:var(--gelb);font-variant-numeric:tabular-nums}
.story-raster-ic{display:inline-flex;color:var(--text-mute)}
.story-raster-h{margin:0;font-size:1.15rem;line-height:1.3;text-wrap:balance}
.story-raster p{margin:0;color:var(--text-mute);text-wrap:pretty}
@media (min-width:640px){.story-raster{grid-template-columns:1fr 1fr;gap:40px 32px}}
@media (min-width:1024px){.story-raster{grid-template-columns:repeat(4,1fr);gap:32px}}

/* Desktop ohne Showcase (reduzierte Bewegung ≥ 900 px): Text links, Foto rechts, ohne Kasten */
@media (min-width:900px){
  .story-karte{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,4vw,64px)}
  .story-statisch{order:2}
}
@media (max-width:899px){
  .story-chip{font-size:12px}
}

/* ===== Showcase (.story--live, nur ≥ 900 px) ===== */
.story-buehne{display:none}
.story--live .story-statisch{display:none}
.story--live .story-karte{grid-template-columns:1fr}
@media (min-width:900px){
  .story--live .story-lang{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
  .story--live .story-text{grid-column:1;grid-row:1}
  .story--live .story-buehne{display:block;grid-column:2;grid-row:1;position:sticky;top:calc(var(--kopf-h) + 16px);
    height:calc(100svh - var(--kopf-h) - 32px);min-height:420px;max-height:860px;z-index:2;margin:0;
    background:var(--buehne-2);border-radius:var(--r);overflow:hidden;
    user-select:none;-webkit-user-select:none;contain:layout paint}
  .story--live .story-schritte{gap:0}
  .story--live .story-schritt{min-height:var(--schritt-h,50svh);display:flex;align-items:center;padding:12px 0}
  .story--live .story-schritt--1{--schritt-h:46svh}
  .story--live .story-schritt--2{--schritt-h:46svh}
  .story--live .story-schritt--3{--schritt-h:56svh}
  .story--live .story-schritt--4{--schritt-h:44svh}
  .story--live .story-karte{width:100%}
  .story--live .story-cta{padding-top:clamp(16px,2vw,28px)}

  /* Aktiver Schritt: Ziffer gelb, Linie füllt sich; die anderen treten zurück (bleiben AA-lesbar) */
  .story--live .story-nr-z{color:var(--text-leise);transition:color .3s ease}
  .story--live .story-h3{color:var(--text-mute);transition:color .3s ease}
  .story--live .story-nr-linie::after{transition:transform .6s var(--ease-out),opacity .3s ease}
  .story--live .story-schritt.ist-aktiv .story-nr-z{color:var(--gelb)}
  .story--live .story-schritt.ist-aktiv .story-h3{color:var(--text)}
  .story--live .story-schritt.ist-aktiv .story-nr-linie::after{transform:scaleX(1)}
  .story--live .story-schritt.ist-fertig .story-nr-linie::after{transform:scaleX(1);opacity:.35}
}

/* Stand-Anzeige oben links: Ziffer + vier Striche, klein auf dunkler Platte */
.story-stand{position:absolute;z-index:3;left:clamp(10px,1.4vw,16px);top:clamp(10px,1.4vw,16px);display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-klein);background:rgb(var(--nacht-rgb) / .82);pointer-events:none}
.story-stand-nr{font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1;letter-spacing:.06em;color:var(--gelb);font-variant-numeric:tabular-nums}
.story-stand-balken{display:flex;gap:4px}
.story-stand-balken i{display:block;width:14px;height:2px;border-radius:1px;background:var(--buehne-linie);transition:background-color .3s ease}
.story-stand-balken i.ist-aktiv{background:var(--gelb)}
.story-stand-balken i.ist-fertig{background:var(--buehne-mute)}

/* Fotos auf der Bühne: übereinander, Sichtbarkeit und Wisch steuert js/25-story.js (WAAPI auf clip-path des NEUEN
   Fotos, vorwärts von unten, rückwärts von oben). .ist-aktiv liegt oben, .ist-unten bleibt darunter stehen, bis der
   Wisch fertig ist (.ist-halb = unterbrochener Wisch, eingefroren zwischen beiden). Ohne JS-Wisch (ASW.still()) wechselt
   das Foto sofort. Das Bild im aktiven Foto setzt sich leicht (scale 1.04 → 1). */
.story-buehne .story-foto{position:absolute;inset:0;border-radius:inherit;z-index:1;opacity:0;visibility:hidden}
.story-buehne .story-foto.ist-unten{opacity:1;visibility:visible}
.story-buehne .story-foto.ist-halb{z-index:2}
.story-buehne .story-foto.ist-aktiv{z-index:3;opacity:1;visibility:visible}
.story-buehne .story-foto img{transform:scale(1.04)}
.story-buehne .story-foto.ist-aktiv img{transform:none;transition:transform 1s var(--ease-out)}
.story-buehne .story-chip{opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.story-buehne .story-foto.ist-aktiv .story-chip{opacity:1;transform:none;transition:opacity .35s var(--ease-out) .5s,transform .35s var(--ease-out) .5s}
.story-buehne .story-foto.ist-aktiv .story-chip + .story-chip{transition-delay:.58s}
.story-buehne .story-chip{font-size:13px;padding:7px 11px 7px 9px}

/* ===== 30-start.css ===== */
/* Startseiten-Abschnitte liegen je in eigener Datei: 31-nachweis, 32-leistungen, 33-ablauf, 34-werkstatt, 35-anfahrt,
   36-faq, 38-band. Flächen wechseln: Nachweis/Ablauf/Anfahrt auf .flaeche, Leistungen/Werkstatt auf --bg. */

/* ===== 31-nachweis.css ===== */
/* Nachweis (direkt unter dem Hero, Teil der dunklen Bühne): vier Zusagen als Haarlinien-Raster, keine Icon-Kacheln.
   Aussage groß (Manrope), Erklärung klein. Bündig mit dem Hero (.wrap-breit). */
.nachweis{padding:clamp(8px,2vw,24px) 0}
.nachweis-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--linie-w) solid var(--linie)}
.nachweis-liste li{margin:0;min-width:0;hyphens:auto;overflow-wrap:break-word;display:flex;flex-direction:column;gap:8px;padding:22px 16px 22px 0;border-bottom:var(--linie-w) solid var(--linie)}
.nachweis-liste li:nth-child(2n){padding-inline:16px 0;border-inline-start:var(--linie-w) solid var(--linie)}
.nachweis-satz{font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.nachweis-erkl{font-size:var(--fs-klein);line-height:1.5;color:var(--text-mute);text-wrap:pretty;max-width:30ch}
@media (max-width:379px){
  .nachweis-liste{grid-template-columns:1fr}
  .nachweis-liste li,.nachweis-liste li:nth-child(2n){padding:18px 0;border-inline-start:0}
}
@media (min-width:1024px){
  .nachweis-liste{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:var(--linie-w) solid var(--linie)}
  .nachweis-liste li,.nachweis-liste li:nth-child(2n){padding:28px 24px 30px;border-bottom:0;border-inline-start:var(--linie-w) solid var(--linie)}
  .nachweis-liste li:first-child{padding-inline-start:0;border-inline-start:0}
  .nachweis-liste li:last-child{padding-inline-end:0}
}

/* ===== 32-leistungen.css ===== */
/* Leistungen: Tafel mit großen Zeilen (kein Kartenraster), ab 960 px Foto-Fenster rechts.
   Zeile = Link-Fläche. Fenster wechselt per :has() auf Hover (nur feiner Zeiger) und Fokus; Standard zeigt Inspektion. */
.leist{display:grid;grid-template-columns:minmax(0,1fr)}
.leist-kopf{margin-bottom:clamp(20px,2.4vw,36px)}

/* Liste: Zeilen mit Trennlinie, keine Kästen */
.leist-liste{list-style:none;margin:0;padding:0;border-top:var(--linie-w) solid var(--linie-stark)}
.lzeile{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) 44px;column-gap:16px;align-items:start;
  margin:0;padding:22px 0;border-bottom:var(--linie-w) solid var(--linie)}
.lzeile::before{content:"";position:absolute;inset-block:-1px;inset-inline-start:-12px;width:3px;background:var(--gelb);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--dauer) var(--ease-out)}
.lzeile-ic{display:flex;padding-top:.2em;color:var(--text-mute);transition:color var(--dauer)}
.lzeile-inhalt{display:flex;flex-direction:column;gap:6px;min-width:0}
.lzeile-titel{margin:0;min-width:0;hyphens:auto;overflow-wrap:break-word;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.lzeile-titel a{color:var(--text);text-decoration:none}
.lzeile-titel a::after{content:"";position:absolute;inset:0}   /* ganze Zeile klickbar */
.lzeile-titel a:focus-visible{outline:none}
.lzeile:focus-within{outline:2px solid var(--fokus);outline-offset:4px;border-radius:var(--r-klein)}
.lzeile-text{margin:0;hyphens:auto;overflow-wrap:break-word;color:var(--text-mute);max-width:46ch;text-wrap:pretty}
.lzeile-pfeil{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:var(--linie-w) solid var(--linie-stark);
  color:var(--text);transition:background-color var(--dauer),border-color var(--dauer),color var(--dauer),transform var(--dauer-druck) var(--ease-out)}
.lzeile-pfeil .ic{transition:transform var(--dauer) var(--ease-out)}

/* Partner-Zeile: abgesetzt, Hinweis als eigene Zeile direkt unter dem Titel */
.lzeile-partner{margin-top:14px;border-top:var(--linie-w) solid var(--linie-stark)}
.lzeile-hinweis{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--gelb-soft);color:var(--text);font-size:var(--fs-klein);font-weight:600;line-height:1.4}

/* Aktive Zeile (Fokus immer, Hover nur mit feinem Zeiger) */
.lzeile:focus-within::before{transform:scaleY(1)}
.lzeile:focus-within .lzeile-ic{color:var(--text)}
.lzeile:focus-within .lzeile-pfeil{background:var(--gelb);border-color:var(--gelb);color:var(--gelb-ink)}
.lzeile:focus-within .lzeile-pfeil .ic{transform:translateX(2px)}
@media (hover:hover) and (pointer:fine){
  .lzeile:hover::before{transform:scaleY(1)}
  .lzeile:hover .lzeile-ic{color:var(--text)}
  .lzeile:hover .lzeile-pfeil{background:var(--gelb);border-color:var(--gelb);color:var(--gelb-ink)}
  .lzeile:hover .lzeile-pfeil .ic{transform:translateX(2px)}
}
.lzeile:active .lzeile-pfeil{transform:scale(.96)}

/* Foto-Fenster: erst ab 960 px; mobil/Touch schmal tragen die Zeilen allein (Fotos kamen in der Story schon groß) */
.leist-fenster{display:none}
@media (min-width:960px){
  .leist{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,5vw,80px)}
  .leist-kopf{grid-column:1;grid-row:1}
  .leist-liste{grid-column:1;grid-row:2;align-self:start}
  .lzeile::before{inset-inline-start:0}
  .lzeile{padding:26px 8px 26px 20px;grid-template-columns:28px minmax(0,1fr) 48px;column-gap:20px}
  .lzeile-pfeil{width:48px;height:48px}
  .lzeile:focus-within{outline-offset:2px}
  .leist-fenster{display:block;position:relative;grid-column:2;grid-row:1 / span 2;align-self:stretch;min-height:520px;
    border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
  .leist-foto{position:absolute;inset:0;opacity:0;transform:scale(1.03);
    transition:opacity .35s var(--ease-out),transform .6s var(--ease-out)}
  .leist-foto .bild{position:absolute;inset:0;border-radius:0}
  .leist-foto .bild picture,.leist-foto .bild img{width:100%;height:100%}
  .leist-foto .bild img{aspect-ratio:auto;object-fit:cover;object-position:60% 50%}
  .leist-foto[data-k="inspektion"]{opacity:1;transform:none}

  /* Wechsel: andere Zeile aktiv → Inspektion weg, passendes Foto da */
  .leist:has(.lzeile:not([data-k="inspektion"]):focus-within) .leist-foto[data-k="inspektion"]{opacity:0;transform:scale(1.03)}
  .leist:has(.lzeile[data-k="tuev"]:focus-within) .leist-foto[data-k="tuev"],
  .leist:has(.lzeile[data-k="diagnose"]:focus-within) .leist-foto[data-k="diagnose"],
  .leist:has(.lzeile[data-k="unfall"]:focus-within) .leist-foto[data-k="unfall"]{opacity:1;transform:none}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .leist:has(.lzeile:not([data-k="inspektion"]):hover) .leist-foto[data-k="inspektion"]{opacity:0;transform:scale(1.03)}
  .leist:has(.lzeile[data-k="tuev"]:hover) .leist-foto[data-k="tuev"],
  .leist:has(.lzeile[data-k="diagnose"]:hover) .leist-foto[data-k="diagnose"],
  .leist:has(.lzeile[data-k="unfall"]:hover) .leist-foto[data-k="unfall"]{opacity:1;transform:none}
}

/* Partner-Tafel im Fenster: Bühne (dunkel in beiden Themes), kein Foto – Karosserie/Lack zeigen wir nicht als eigene Arbeit */
.leist-partner{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(28px,3vw,44px)}
.leist-partner-ic{display:flex;color:var(--gelb);margin-bottom:auto}
.leist-partner-titel{margin:0;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.leist-partner-text{margin:0;color:var(--text-mute);max-width:30ch}

/* Bewegung aus: Wechsel sofort, keine Skalierung */
html[data-motion="off"] .leist-foto,html[data-motion="off"] .lzeile::before,html[data-motion="off"] .lzeile-pfeil .ic{transition:none}
html[data-motion="off"] .leist-foto{transform:none!important}
@media (prefers-reduced-motion:reduce){
  .leist-foto,.lzeile::before,.lzeile-pfeil .ic{transition:none}
  .leist-foto{transform:none!important}
}

/* ===== 33-ablauf.css ===== */
/* Ablauf: Zeitachse statt Ziffern (Story darüber zählt schon 01–04).
   Mobil: linke Schiene, je Schritt ein Abschnitt. Desktop: eine Linie über vier Spalten.
   Grundzustand = Endzustand (Linie voll, Punkte gelb). Nur mit Bewegung und Browser-Unterstützung
   füllt sich die Linie nebenher beim Scrollen (scroll-driven CSS, kein Pinning, nur transform/opacity). */
.ablauf-liste{list-style:none;margin:0;padding:0;display:grid;position:relative;max-width:760px}
.ablauf-liste li{position:relative;margin:0;display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:20px;padding-bottom:36px}
.ablauf-liste li:last-child{padding-bottom:0}
.ablauf-liste li > *{grid-column:2}

/* Punkt: flaches Quadrat, Rand in Linienfarbe, gelbe Füllung als eigene Ebene */
.ablauf-punkt{grid-column:1 !important;grid-row:1;align-self:start;justify-self:center;position:relative;z-index:1;width:14px;height:14px;margin-top:3px;border:2px solid var(--linie-stark);background:var(--surface-2)}
.ablauf-punkt::after{content:"";position:absolute;inset:-2px;background:var(--gelb)}

/* Schiene mobil: Grundlinie (::after) und gelbe Füllung (::before) vom Punkt bis zum nächsten Punkt */
.ablauf-liste li::before,.ablauf-liste li::after{content:"";position:absolute;left:7px;top:17px;bottom:-3px;width:2px}
.ablauf-liste li::after{background:var(--linie-stark)}
.ablauf-liste li::before{z-index:1;background:var(--gelb);transform-origin:top}
.ablauf-liste li:last-child::before,.ablauf-liste li:last-child::after{display:none}

.ablauf-wann{margin:0;grid-row:1;font-size:.8125rem;line-height:1.5;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)}
.ablauf-titel{margin:6px 0 6px;text-wrap:balance}
.ablauf-text{margin:0;color:var(--text-mute);max-width:34ch;text-wrap:pretty}

@media (min-width:900px){
  .ablauf-liste{--spalt:clamp(28px,3.4vw,48px);max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--spalt)}
  .ablauf-liste li{display:block;padding:0}
  .ablauf-liste li::before,.ablauf-liste li::after{display:none}
  .ablauf-punkt{display:block;justify-self:start;margin:0 0 22px}
  /* Linie von Mitte Punkt 1 bis Mitte Punkt 4: Spalte 4 beginnt bei 75 % + ¾ Spalt */
  .ablauf-liste::before,.ablauf-liste::after{content:"";position:absolute;top:6px;height:2px;left:7px;right:calc(25% - var(--spalt) * .75 - 7px)}
  .ablauf-liste::before{background:var(--linie-stark)}
  .ablauf-liste::after{background:var(--gelb);transform-origin:left;z-index:0}
  .ablauf-titel{margin:8px 0 8px}
  .ablauf-text{max-width:30ch}
}

/* Füllen beim Scrollen – nur wenn Bewegung erlaubt ist (ASW.still() == false) und JS läuft */
@keyframes ablauf-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ablauf-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ablauf-punkt{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Mobil: jeder Schritt hat eine eigene Zeitachse; Ankerlinie bei 60 % Höhe */
    html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li{view-timeline:--asw-schritt block;view-timeline-inset:0% 40%}
    html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li::before{animation:ablauf-y linear both;animation-timeline:--asw-schritt;animation-range:entry 0% entry 100%}
    html:not(.ohne-js):not([data-motion="off"]) .ablauf-punkt::after{animation:ablauf-punkt linear both;animation-timeline:--asw-schritt;animation-range:entry 0% entry 12%}
  }
}
@media (min-width:900px){
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      /* Desktop: eine Zeitachse für die ganze Liste, Punkte färben sich, wenn die Linie sie erreicht */
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste{view-timeline:--asw-ablauf block;view-timeline-inset:0% 30%}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li{view-timeline:none}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste::after{animation:ablauf-x linear both;animation-timeline:--asw-ablauf;animation-range:cover 5% cover 35%}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-punkt::after{animation-timeline:--asw-ablauf;animation-range:cover 2% cover 5%}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li:nth-child(2) .ablauf-punkt::after{animation-range:cover 12% cover 15%}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li:nth-child(3) .ablauf-punkt::after{animation-range:cover 22% cover 25%}
      html:not(.ohne-js):not([data-motion="off"]) .ablauf-liste li:nth-child(4) .ablauf-punkt::after{animation-range:cover 32% cover 35%}
    }
  }
}

/* ===== 34-werkstatt.css ===== */
/* Werkstatt / Vertrauen (inc/start/werkstatt.php)
   Mobil: Kopf → Foto randlos → Zusagen → Ansprechpartner. Ab 900 px: Text links, Foto rechts bis an den Fensterrand
   über die volle Höhe. Das Foto öffnet sich beim Einblenden von unten nach oben (Rolltor, clip-path); bei ASW.still(),
   ohne JS und bei reduzierter Bewegung steht es sofort offen. Flach: Linien statt Schatten, Gelb nur als Akzentlinie. */
.werkstatt{overflow-x:clip}
.werkstatt-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}
.werkstatt-kopf h2{text-wrap:balance}
.werkstatt-kopf .lead{margin-bottom:0}

/* Foto: mobil randlos (Inhalt läuft bis an den Rand, Text bleibt im Satzspiegel) */
.werkstatt .werkstatt-foto{margin-inline:calc(-1 * var(--gutter));border-radius:0}
.werkstatt .werkstatt-foto img{aspect-ratio:4/3;object-position:58% 40%}

/* Rolltor-Reveal: nur clip-path + transform; überschreibt das Standard-Einblenden von [data-reveal] */
.werkstatt-foto[data-reveal]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);
  transition:clip-path 1.1s var(--ease-out)}
.werkstatt-foto[data-reveal] img{transform:scale(1.08);transform-origin:50% 100%;transition:transform 1.4s var(--ease-out)}
.werkstatt-foto[data-reveal].ist-sichtbar{clip-path:inset(0 0 0 0)}
.werkstatt-foto[data-reveal].ist-sichtbar img{transform:none}
html[data-motion="off"] .werkstatt-foto[data-reveal],html.ohne-js .werkstatt-foto[data-reveal]{clip-path:none;transition:none}
html[data-motion="off"] .werkstatt-foto[data-reveal] img,html.ohne-js .werkstatt-foto[data-reveal] img{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .werkstatt-foto[data-reveal]{clip-path:none;transition:none}
  .werkstatt-foto[data-reveal] img{transform:none;transition:none}
}

/* Drei Zusagen: Begriff fett, Erklärung leise; getrennt durch Abstand und eine Haarlinie */
.werkstatt-zusagen{list-style:none;margin:0;padding:0;display:grid}
.werkstatt-zusagen li{display:grid;gap:4px;padding:18px 0;border-top:var(--linie-w) solid var(--linie)}
.werkstatt-zusagen li:last-child{border-bottom:var(--linie-w) solid var(--linie)}
.werkstatt-zusagen strong{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.werkstatt-zusagen span{color:var(--text-mute);max-width:52ch}

/* Ansprechpartner: Typografie statt Platzhalter-Foto, gelbe Akzentlinie wie beim Eyebrow */
.werkstatt-kontakt{margin-top:clamp(32px,4vw,44px);padding-inline-start:20px;border-inline-start:3px solid var(--gelb)}
.werkstatt-kontakt p{margin:0}
.werkstatt-kontakt-label{font-size:var(--fs-klein);font-weight:600;color:var(--text-mute)}
.werkstatt-kontakt .werkstatt-kontakt-name{overflow-wrap:anywhere;margin-top:6px;font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem);font-weight:700;line-height:1.2;
  letter-spacing:-.015em;overflow-wrap:break-word;text-wrap:balance}
.werkstatt-kontakt .werkstatt-kontakt-rolle{margin-top:2px;color:var(--text-mute)}
.werkstatt-kontakt-tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;font-weight:700;font-size:1.1rem;
  color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}
.werkstatt-kontakt-tel span{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.3em}
.werkstatt-kontakt-tel:hover span{text-decoration-thickness:3px}

@media (min-width:900px){
  .werkstatt-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,6vw,96px);row-gap:clamp(32px,4vw,48px)}
  .werkstatt-kopf{grid-column:1;grid-row:1}
  .werkstatt-rest{grid-column:1;grid-row:2}
  /* Foto über volle Höhe, rechts bis an den Fensterrand (Rest des Satzspiegels + Gutter) */
  .werkstatt .werkstatt-foto{grid-column:2;grid-row:1 / span 2;align-self:stretch;
    margin-inline:0 calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)));
    border-start-start-radius:var(--r);border-end-start-radius:var(--r)}
  .werkstatt .werkstatt-foto picture{height:100%}
  .werkstatt .werkstatt-foto img{height:100%;min-height:560px;aspect-ratio:auto;object-position:62% 50%}
}

/* ===== 35-anfahrt.css ===== */
/* Anfahrt: links „wann“ (Kopf + Öffnungszeiten), rechts „wo“ (Lageskizze + Adresse). Flach, Linien statt Schatten. */
.anfahrt-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,56px)}
@media (min-width:960px){.anfahrt-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,96px);align-items:start}}
.anfahrt-weiter{margin:0;color:var(--text-mute);max-width:52ch;text-wrap:pretty}
.anfahrt-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:1rem;font-weight:700;letter-spacing:0}
.anfahrt-h .ic{color:var(--text-mute)}

/* Öffnungszeiten: Zeiten als Zahlen in Barlow, Tage in Manrope, heute mit gelber Akzentlinie */
.anfahrt-zeiten{margin-top:clamp(32px,4vw,48px)}
.zeiten{border-collapse:collapse;width:100%;max-width:460px}
.zeiten th,.zeiten td{padding:14px 0;border-top:var(--linie-w) solid var(--linie);text-align:start;vertical-align:baseline}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:var(--linie-w) solid var(--linie)}
.zeiten th{position:relative;font-weight:600;padding-inline-end:16px;width:1%}
@media (min-width:400px){.zeiten th{white-space:nowrap}}
@media (max-width:399px){.zeiten-uhr{display:block;margin:2px 0 0}}
.zeiten td{text-align:end}
.zeiten .zeiten-zahl{white-space:nowrap}
.zeiten-zahl{font-family:var(--font-display);font-weight:700;font-size:min(clamp(1.9rem,1.5rem + 1.4vw,2.6rem),11vw);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.zeiten-uhr{margin-inline-start:.4em;font-size:var(--fs-klein);color:var(--text-mute)}
.zeiten .ist-zu td{color:var(--text-mute)}
.zeiten .ist-zu th{color:var(--text-mute);font-weight:500}
.zeiten .ist-heute th::before{content:"";position:absolute;inset-inline-start:-14px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--gelb)}
.zeiten-heute{display:inline-block;margin-inline-start:10px;padding:2px 9px;border-radius:var(--r-pill);background:var(--gelb);color:var(--gelb-ink);font-size:.75rem;font-weight:700;line-height:1.4;vertical-align:.1em}
@media (max-width:599px){.zeiten .ist-heute th::before{display:none}}

/* Wo: eine flache Fläche, oben Skizze, unten Adresse */
.anfahrt-wo{background:var(--surface);border:var(--linie-w) solid var(--linie);border-radius:var(--r);overflow:hidden}
.anfahrt-karte{margin:0;padding:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 10px;border-bottom:var(--linie-w) solid var(--linie)}
.anfahrt-karte svg{display:block;width:100%;height:auto}
.anfahrt-karte figcaption{margin-top:6px;font-size:.8125rem;color:var(--text-mute)}
.anfahrt-karte text{font-family:var(--font);font-size:25px;font-weight:600;fill:var(--text-mute);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
@media (min-width:600px){.anfahrt-karte text{font-size:18px}}
.k-fluss{fill:none;stroke:var(--linie-stark);stroke-width:7;stroke-linecap:round}
.anfahrt-karte .k-fluss-name{font-style:italic;font-weight:500}
.k-rand path{fill:none;stroke:var(--text-leise);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anfahrt-karte .k-rand text{font-weight:500}
.k-ort circle{fill:var(--surface);stroke:var(--text-mute);stroke-width:2.5}
.k-wir-ring{fill:none;stroke:var(--gelb);stroke-width:2.5}
.k-wir-punkt{fill:var(--gelb);stroke:var(--text);stroke-width:2.5}
.anfahrt-karte .k-wir-name{font-weight:800;fill:var(--text)}

.anfahrt-adresse{padding:clamp(20px,2.6vw,32px)}
.anfahrt-adresse address{display:flex;flex-direction:column;font-style:normal;margin-top:8px}
.anfahrt-marke{font-size:var(--fs-klein);color:var(--text-mute)}
.anfahrt-strasse,.anfahrt-ort{font-size:var(--fs-h3);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.anfahrt-route{margin:20px 0 0}
.anfahrt-route .btn{text-decoration:none}
.anfahrt-kontakt{display:flex;flex-wrap:wrap;gap:4px 28px;margin:16px 0 0;padding:0;list-style:none}
.anfahrt-kontakt a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.anfahrt-kontakt a .ic{flex:none;color:var(--text-mute)}
.anfahrt-kontakt a span:last-child{text-decoration:underline;text-decoration-color:var(--linie-stark);text-decoration-thickness:from-font;text-underline-offset:.25em}
.anfahrt-kontakt a:hover span:last-child{text-decoration-color:var(--gelb)}

/* ===== 36-faq.css ===== */
/* FAQ: Kopf links (Überschrift, kurze Zeile, Kontaktweg), Liste rechts. Mobil untereinander. */
.faq{padding-block:var(--abschnitt)}
.faq-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.faq-kopf .h2{margin:0}
.faq-zeile{margin:16px 0 0;color:var(--text-mute);max-width:34ch;text-wrap:pretty}
.faq-kontakt{display:flex;flex-wrap:wrap;column-gap:24px;margin-top:10px}
.faq-kontakt .textlink{min-height:44px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.faq-kontakt .faq-tel span{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.25em}
@media (min-width:900px){
  .faq-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
}
.faq-item{min-width:0;border-top:var(--linie-w) solid var(--linie)}
.faq-item:last-child{border-bottom:var(--linie-w) solid var(--linie)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-weight:700;font-size:1.0625rem;line-height:1.4;min-height:64px;padding:18px 0;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-frage{text-wrap:pretty;min-width:0;overflow-wrap:break-word;hyphens:auto}
.faq-ic{flex:none;color:var(--text-mute);transition:transform var(--dauer) var(--ease-out),color var(--dauer)}
.faq-item[open] .faq-ic{transform:rotate(45deg);color:var(--text)}
@media (hover:hover) and (pointer:fine){.faq-item summary:hover .faq-ic{color:var(--text)}}
.faq-antwort{padding:0 44px 22px 0;hyphens:auto;overflow-wrap:break-word;color:var(--text-mute);max-width:68ch}
.faq-antwort p{margin:0}
.faq-antwort p + p{margin-top:.8em}
.faq-antwort a{color:var(--text);text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.2em}
/* Aufklappen: Höhe springt sofort (keine Layout-Animation), die Antwort blendet kurz von oben ein. */
.faq-item[open] .faq-antwort{animation:faq-ein .26s var(--ease-out)}
@keyframes faq-ein{from{opacity:0;transform:translateY(-4px)}}
html[data-motion="off"] .faq-item[open] .faq-antwort{animation:none}
@media (prefers-reduced-motion:reduce){.faq-item[open] .faq-antwort{animation:none}}
html[data-motion="off"] .faq-ic{transition:none}
@media (prefers-reduced-motion:reduce){.faq-ic{transition:none}}

/* ===== 38-band.css ===== */
/* CTA-Band: Abschluss der Seite auf der Bühne. Große Zeile, Zeiten, Tasten – alles links auf ruhigem Grund.
   Foto „banner“ (Werkstatt, Mechaniker von hinten) bleibt rechts als Raum; AI-Label unten rechts. */
.band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,8vw + 24px,160px);border-bottom:var(--linie-w) solid var(--buehne-linie)}
.band > .band-foto{position:absolute;inset:0;z-index:-1;margin:0;border-radius:0;background:none}
.band > .band-foto picture{height:100%}
.band > .band-foto img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:62% 55%}
.band > .band-foto::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--buehne) 84%,transparent)}
@media (min-width:900px){
  .band > .band-foto::after{background:linear-gradient(90deg,var(--buehne) 0%,var(--buehne) 34%,color-mix(in srgb,var(--buehne) 70%,transparent) 58%,color-mix(in srgb,var(--buehne) 35%,transparent) 100%)}
}
.band-in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.band-text{margin:0;max-width:14ch;hyphens:auto;overflow-wrap:break-word;font-size:clamp(2.7rem,1.9rem + 3.9vw,4.75rem);line-height:.94;letter-spacing:-.005em}
.band-zeiten{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:var(--buehne-mute);font-size:var(--fs-0);font-variant-numeric:tabular-nums}
.band-zeiten .ic{flex:none;color:var(--gelb)}
.band-aktionen{margin-top:clamp(28px,3vw,40px)}
.band .aktionen{margin:0 0 10px}
@media (min-width:900px){.band-in{max-width:var(--wrap)}.band-text{max-width:17ch}}

/* ===== 40-seite.css ===== */
/* Unterseiten (Leistungsseiten, Termin, Recht). Gestaltung 20.10.2026:
   Seitenkopf als Bühne mit Foto bis an den Rand und Fakten-Leiste; danach Abschnitte auf Linien statt Karten
   (Einstieg 5/7 wie FAQ, Umfang als Zeilenliste, Ablauf als Zeitleiste, Preis-Zusage groß, Weitere als Zeilen).
   Flach: keine Schatten, keine Verläufe. Gelb nur als Akzentlinie, Haken, Aktion. */

/* ---------- Seitenkopf (Bühne) ---------- */
.seitenkopf{position:relative;border-bottom:4px solid var(--gelb);overflow-x:clip}
.seitenkopf-in{display:grid;grid-template-columns:minmax(0,1fr)}
.seitenkopf-text{min-width:0}
.seitenkopf-text{padding:clamp(20px,2.4vw,32px) 0 clamp(36px,4vw,64px)}
.seitenkopf .krumen{padding:0;margin:0 0 clamp(28px,3.4vw,52px);max-width:none;flex-wrap:wrap}
.seitenkopf .krumen a{color:var(--text-mute);display:inline-flex;align-items:center;min-height:44px}
.seitenkopf .krumen a:hover{color:var(--text)}
.seitenkopf h1{font-size:var(--fs-h1);line-height:var(--lh-display,.96);letter-spacing:var(--track-display,.012em);margin:0 0 .4em;max-width:16ch;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.seitenkopf .lead{max-width:48ch;color:var(--text-mute)}
.seitenkopf .aktionen{margin:28px 0 6px}
.seitenkopf .textlink{color:var(--text);min-height:44px}

/* Foto: mobil randlos unter dem Text, ab 1024 px rechte Hälfte bis an den Viewport-Rand */
.seitenkopf-bild{margin:0 calc(-1 * var(--gutter))}
.seitenkopf-bild .bild{border-radius:0;aspect-ratio:4/3;background:var(--buehne-2)}
.seitenkopf-bild .bild picture{display:block;height:100%}
.seitenkopf-bild .bild img{object-position:62% 50%}
@media (min-width:640px) and (max-width:1023px){.seitenkopf-bild .bild{aspect-ratio:16/9}}
@media (min-width:1024px){
  .seitenkopf.mit-bild .seitenkopf-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px)}
  .seitenkopf.mit-bild .seitenkopf-text{align-self:center;padding-block:clamp(24px,2.6vw,40px) clamp(48px,5vw,88px)}
  .seitenkopf.mit-bild h1{font-size:min(var(--fs-h1),4.75rem)}
  .seitenkopf-bild{margin:0 calc((min(100vw,var(--wrap)) - 100vw) / 2 - var(--gutter)) 0 0;min-height:clamp(480px,46vw,640px);position:relative}
  .seitenkopf-bild .bild{position:absolute;inset:0;aspect-ratio:auto}
  .seitenkopf-bild .bild picture{display:block;height:100%}
}

/* Fakten-Leiste am Fuß der Bühne: drei Spalten auf einer Linie, keine Karte */
.fakten{list-style:none;margin:0;padding:0;display:grid;border-top:var(--linie-w) solid var(--linie)}
.fakten li{display:grid;align-content:start;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:18px 0;margin:0;border-bottom:var(--linie-w) solid var(--linie)}
.fakten li:last-child{border-bottom:0}
.fakten-ic{grid-row:1/3;color:var(--gelb);padding-top:2px}
.fakten-label{font-size:var(--fs-klein);color:var(--text-mute);line-height:1.35}
.fakten-wert{font-weight:700;line-height:1.35;text-wrap:pretty}
@media (min-width:760px){
  .fakten{grid-template-columns:repeat(var(--fakten,3),minmax(0,1fr))}
  .fakten li{border-bottom:0;padding:24px clamp(16px,2vw,32px) 28px}
  .fakten li:first-child{padding-left:0}
  .fakten li+li{border-left:var(--linie-w) solid var(--linie)}
}

/* H1: Wörter steigen einmal beim Laden aus einer Maske (masked-reveal, nur transform). Der Text steht vollständig im HTML.
   Reduzierte Bewegung / Schalter aus: sofort Endzustand. Maske mit Polster, damit Umlaut-Punkte nicht abgeschnitten werden. */
.mw{display:inline-block;max-width:100%;overflow:hidden;vertical-align:top;padding:.12em .02em .06em;margin:-.12em -.02em -.06em}
.mw-i{display:inline-block;max-width:100%;animation:mw-hoch .64s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
@keyframes mw-hoch{from{transform:translate3d(0,108%,0)}}
/* Foto öffnet sich einmal von links (clip-path), kein Dauereffekt */
@media (min-width:1024px){.seitenkopf-bild .bild{animation:sk-bild .8s var(--ease-out) .15s both}}
@keyframes sk-bild{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
html[data-motion="off"] .mw-i,html[data-motion="off"] .seitenkopf-bild .bild{animation:none}
@media (prefers-reduced-motion:reduce){.mw-i,.seitenkopf-bild .bild{animation:none}}

/* ---------- Einstieg: H2 links, Text rechts (Raster 5/7 wie FAQ) ---------- */
.einstieg-text h2{margin-top:0;max-width:18ch}
.einstieg-text p{max-width:var(--mass,66ch)}
.einstieg-text p:last-child{margin-bottom:0}
.einstieg-satz .einstieg-text h2 + p{font-size:var(--fs-1);color:var(--text);line-height:1.55;text-wrap:pretty}
.einstieg-satz .einstieg-text p{color:var(--text-mute)}
@media (min-width:900px){
  .einstieg-satz .einstieg-text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,104px);align-items:start}
  .einstieg-satz .einstieg-text h2{grid-column:1;grid-row:1 / span 6;margin:0}
  .einstieg-satz .einstieg-text p{grid-column:2}
}
.einstieg-bild .bild{aspect-ratio:3/2}
@media (min-width:900px){.einstieg-in{align-items:center}}
/* Einstieg mit Teile-Schleife (Render, kein AI-Label): ruhige dunkle Bühne in beiden Themes, Linie statt Schatten. */
.einstieg-teil{position:relative;aspect-ratio:4/3;background:var(--buehne-2);border:var(--linie-w) solid var(--linie);border-radius:var(--r);overflow:hidden}
:root[data-theme="dark"] .einstieg-teil{border-color:var(--linie-stark)}
.einstieg-teil::before{content:"";position:absolute;left:clamp(20px,2.4vw,30px);top:0;width:40px;height:4px;background:var(--gelb);border-radius:0 0 2px 2px;z-index:1}
.einstieg-teil-in{position:absolute;inset:clamp(22px,7%,48px);container-type:size;display:grid;place-items:center}
.einstieg-teil .teil-seq{aspect-ratio:var(--seq-aspekt,1);width:min(100cqw,calc(100cqh * var(--seq-aspekt,1)));height:auto;overflow:visible}
.einstieg-teil .seq-layer{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,#000 93%,transparent);mask-composite:intersect}
@media (min-width:900px){.einstieg-teil{aspect-ratio:3/2}}

/* ---------- Umfang: dabei als Zeilenliste, nicht enthalten als ruhige Randspalte ---------- */
.umfang{border-top:var(--linie-w) solid var(--linie)}
.umfang-in{display:grid;gap:clamp(40px,4vw,56px)}
.umfang h3{font-size:var(--fs-0);font-weight:700;letter-spacing:0;margin:0 0 4px;color:var(--text-mute)}
.umfang-liste{max-width:none}
.umfang-liste li{padding:14px 0;border-bottom:var(--linie-w) solid var(--linie);line-height:1.5}
.umfang-liste li+li{margin-top:0}
.umfang-liste .haken-ic{margin-top:1px}
.umfang-nicht{padding-top:0}
.nicht{list-style:none;padding:0;margin:0;max-width:62ch}
.nicht li{display:flex;gap:12px;align-items:flex-start;color:var(--text-mute);padding:14px 0;border-bottom:var(--linie-w) solid var(--linie);margin:0;line-height:1.5}
.nicht-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;border:var(--linie-w) solid var(--linie-stark);color:var(--text-leise)}
.nicht-ic .ic{stroke-width:2.4}
@media (min-width:900px){
  .umfang-in:not(.ohne-nicht){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,104px);align-items:start}
  .umfang-liste{columns:1}
}

/* ---------- Ablauf als Zeitleiste: durchgehende Linie, gelbes Stück je Schritt, große Nummer ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:0}
.schritt{position:relative;margin:0;padding:24px 0 32px;border-top:var(--linie-w) solid var(--linie-stark)}
.schritt::before{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--gelb);transform-origin:left center}
.schritt-nr{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,1.9rem + 1.6vw,3.5rem);line-height:1;letter-spacing:.01em;color:var(--text);margin:0 0 14px;font-variant-numeric:tabular-nums}
.schritt h3{margin-bottom:.4em}
.schritt p{margin-bottom:0;color:var(--text-mute);text-wrap:pretty}
.schritt-dauer{display:flex;align-items:flex-start;gap:8px;margin-top:14px !important;font-size:var(--fs-klein);font-weight:600;color:var(--text) !important;line-height:1.4}
.schritt-dauer .ic{flex:none;color:var(--text-mute);margin-top:1px}
@media (min-width:640px){.schritte{grid-template-columns:repeat(2,minmax(0,1fr))}.schritt{padding-right:clamp(20px,3vw,40px)}}
@media (min-width:1000px){.schritte{grid-template-columns:repeat(var(--schritte,3),minmax(0,1fr))}.schritte:has(> :nth-child(4)){--schritte:4}.schritt{padding-bottom:0}}
/* Gelbes Stück läuft beim Einblenden einmal aus (nur transform) */
.schritt[data-reveal]::before{transform:scaleX(0);transition:transform .7s var(--ease-out) .25s}
.schritt[data-reveal].ist-sichtbar::before{transform:none}
html.ohne-js .schritt::before,html[data-motion="off"] .schritt::before{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.schritt[data-reveal]::before{transform:none;transition:none}}

/* ---------- Preis: Zusage groß, Beispiel rechts auf einer Linie ---------- */
.preis-in{display:grid;gap:clamp(36px,4vw,56px)}
.preis h2{margin-bottom:.55em}
.preis-zusage p{color:var(--text-mute);max-width:52ch}
.preis-zusage p strong:first-child{display:block;font-size:clamp(1.375rem,1.1rem + 1.1vw,2rem);line-height:1.22;letter-spacing:-.015em;color:var(--text);margin-bottom:.6em;max-width:22ch;text-wrap:balance}
.preis-zusage .merk{background:none;border:0;padding:0;border-radius:0;max-width:none}
.beispiel{position:relative;border-top:var(--linie-w) solid var(--linie-stark);padding-top:24px}
.beispiel::before{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--gelb)}
.beispiel-marke{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);margin:0 0 12px}
.beispiel h3{margin-top:0}
.beispiel p{text-wrap:pretty}
.preis-zusage .klein{margin:18px 0 0;padding-top:14px;border-top:var(--linie-w) solid var(--linie);font-size:var(--fs-klein)}
.beispiel .klein{margin:18px 0 0;padding-top:14px;border-top:var(--linie-w) solid var(--linie)}
@media (min-width:900px){.preis-in:not(.ohne-beispiel){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,104px);align-items:start}.beispiel{margin-top:clamp(8px,1.4vw,20px)}}

/* ---------- Weitere Leistungen: Zeilen auf Linien statt Icon-Kacheln ---------- */
.weitere{border-top:var(--linie-w) solid var(--linie)}
.weitere h2{margin-bottom:clamp(24px,2.8vw,40px)}
.weitere-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));column-gap:clamp(24px,3vw,48px)}
.weitere-liste li{margin:0}
.weiter{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-content:start;height:100%;padding:22px 0 24px;border-top:var(--linie-w) solid var(--linie-stark);text-decoration:none;color:var(--text)}
.weiter::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:3px;background:var(--gelb);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out)}
.weiter-ic{grid-row:1;color:var(--text-mute);padding-top:2px}
.weiter-titel{grid-column:2;margin:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0}
.weiter-hinweis,.weiter-text{grid-column:2}
.weiter-hinweis{justify-self:start;font-size:.8125rem;font-weight:600;color:var(--text);background:var(--gelb-soft);border-radius:var(--r-pill);padding:2px 10px}
.weiter-text{color:var(--text-mute)}
@media (hover:hover) and (pointer:fine){
  .weiter:hover::before{transform:none}
  .weiter:hover .weiter-ic{color:var(--text)}
}
.weiter:focus-visible::before{transform:none}
html[data-motion="off"] .weiter::before{transition:none}

/* ---------- Allgemeine Inhaltsabschnitte der Unterseiten ---------- */
.abschnitt-knapp{padding-top:0} /* QA 18.10.2026: Abschnitt mit nur einem Merk-Kasten direkt an den vorigen anschließen */
.abschnitt + .abschnitt.flaeche,.abschnitt.flaeche + .abschnitt{padding-top:var(--abschnitt)}
.abschnitt-kopf .lead{margin-bottom:0}
.liste-zahlen{padding-left:1.4em}
.liste-zahlen li{padding-left:.3em}
.liste-zahlen li::marker{font-family:var(--font-display);font-weight:700;font-size:1.15em}

/* Lange deutsche Wörter (Kostenvoranschlag, Hauptuntersuchung) bei 200 % Text auf 320 px: schmal trennen statt überlaufen, breit kein Trennen im Fließtext */
@media (max-width:639px){.seitenkopf,.einstieg,.umfang,.ablauf,.preis,.weitere,.abschnitt-knapp{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}

/* ===== 50-formular.css ===== */
/* Terminformular (/termin-anfragen/) und Danke-Seite. Nur Tokens, keine festen Farben, keine Schatten.
   Aufbau wie ein Buchungsablauf: 01 Anliegen (Chips) → 02 Auto → 03 Wunschtermin → 04 Kontakt, rechts die Seitenspalte.
   Zustände ohne Rot (Inhaber): Fehler = Anthrazit-Rand + gelber Markierungsbalken + „!“-Zeichen + Text.
   Floating Labels: Markup Feld → Label, Feld hat placeholder=" ". Felder 56 px, Schrift ≥ 16 px (kein iOS-Zoom). */

/* Raster: Formular links (max 640), Seitenspalte rechts sticky; mobil untereinander */
.termin-raster,.danke-raster{display:grid;gap:40px}
@media (min-width:1024px){
  .termin-raster,.danke-raster{grid-template-columns:minmax(0,640px) minmax(280px,380px);gap:clamp(40px,5vw,88px);align-items:start;justify-content:space-between}
  .termin-seite{position:sticky;top:calc(var(--kopf-h) + 24px);display:grid;gap:16px}
}
.termin-seite h2{font-family:var(--font);text-transform:none;letter-spacing:-.01em;font-size:var(--fs-h3);line-height:1.3;margin:0 0 .4em}
.termin-seite p{max-width:none}
.termin-tel{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:4px 0 14px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem);line-height:1;letter-spacing:.01em;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}
.termin-tel .ic{flex:none;width:28px;height:28px;color:var(--text)}
@media (hover:hover){.termin-tel:hover span{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:3px;text-underline-offset:.12em}}
.termin-wa{width:100%;margin:0 0 22px}
.termin-info{display:grid;gap:16px;margin:0;padding-top:20px;border-top:var(--linie-w) solid var(--linie-stark);font-size:var(--fs-klein);color:var(--text-mute)}
.termin-info div{display:grid;gap:4px}
.termin-info dt{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
.termin-info dt .ic{flex:none;width:18px;height:18px}
.termin-info dd{margin:0 0 0 26px;overflow-wrap:anywhere}

/* Zusammenfassung „Ihre Anfrage“: nur Desktop mit JS (JS entfernt hidden), aktualisiert sich beim Ausfüllen */
.termin-auswahl{display:none;padding:22px 24px;border:var(--linie-w) solid var(--linie-stark);border-radius:var(--r)}
@media (min-width:1024px){.termin-auswahl:not([hidden]){display:block}}
.termin-seite .termin-auswahl-h{font-size:var(--fs-klein);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);margin:0 0 12px}
.termin-auswahl dl{display:grid;gap:10px;margin:0}
.termin-auswahl dl div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;align-items:baseline}
.termin-auswahl dt{font-size:var(--fs-klein);color:var(--text-mute)}
.termin-auswahl dd{margin:0;font-weight:700;color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.termin-auswahl dd.ist-leer{font-weight:500;color:var(--text-leise)}
.termin-auswahl dd[data-zeigt="art"]:not(.ist-leer){display:flex;align-items:center;gap:8px}
.termin-auswahl dd[data-zeigt="art"]:not(.ist-leer)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gelb)}

/* Formular-Grundgerüst: Schritte durch Linie und Nummer getrennt */
.formular{max-width:640px;min-width:0}
.f-schritt{position:relative;display:flow-root;border:0;padding:0;margin:0 0 36px;min-width:0}
.f-schritt + .f-schritt{padding-top:32px;border-top:var(--linie-w) solid var(--linie)}
.f-kopf{float:left;width:100%;display:flex;align-items:flex-start;gap:14px;margin:0 0 20px;padding:0}
.f-kopf + *{clear:both}
.f-nr{flex:none;font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1;letter-spacing:.02em;color:var(--text-leise);padding-top:1px;font-variant-numeric:tabular-nums}
.f-nr::after{content:"";display:block;width:100%;height:3px;margin-top:6px;border-radius:2px;background:var(--gelb)}
.f-titel{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.55rem,1.3rem + .9vw,1.95rem);line-height:1.05;color:var(--text);text-wrap:balance;min-width:0;overflow-wrap:break-word;hyphens:auto}
.f-titel .pflicht{font-family:var(--font);font-weight:600;font-size:1rem;color:var(--text-mute);vertical-align:top}
.hilfe{margin:10px 0 0;font-size:var(--fs-klein);line-height:1.5;color:var(--text-mute);max-width:none}
.hilfe-partner,.hilfe-zeiten{display:flex;gap:10px;align-items:flex-start}
.hilfe-partner .ic,.hilfe-zeiten .ic{flex:none;margin-top:1px;color:var(--text)}
.hilfe-partner{margin:14px 0 22px}

/* 01 Anliegen: flache Chips (Radio). Gewählt = Anthrazit-Fläche (im Dunkel hell) mit gelbem Haken-Punkt */
.f-kacheln{display:flex;flex-wrap:wrap;gap:10px}
.f-kachel{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;max-width:100%;padding:8px 18px 8px 10px;background:var(--surface);border:var(--linie-w) solid var(--feld-rand);border-radius:var(--r-pill);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--dauer),background-color var(--dauer),color var(--dauer),transform .16s var(--ease-out)}
@media (hover:hover){.f-kachel:hover{border-color:var(--text)}}
.f-kachel:active{transform:scale(.97)}
.f-kachel input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.f-kachel-ic{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--text);transition:background-color var(--dauer),color var(--dauer)}
.f-kachel-ic > .ic{width:18px;height:18px;transition:opacity var(--dauer),transform var(--dauer) var(--ease-out)}
.f-kachel-haken{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--gelb);color:var(--gelb-ink);opacity:0;transform:scale(.6);transition:opacity var(--dauer),transform var(--dauer) var(--ease-out)}
.f-kachel-haken .ic{stroke-width:2.8}
.f-kachel-text{min-width:0;font-weight:600;font-size:.95rem;line-height:1.25;color:var(--text);transition:color var(--dauer)}
.f-kachel.ist-gewaehlt,.f-kachel:has(input:checked){background:var(--text);border-color:var(--text)}
.f-kachel.ist-gewaehlt .f-kachel-text,.f-kachel:has(input:checked) .f-kachel-text{color:var(--bg)}
.f-kachel.ist-gewaehlt .f-kachel-ic > .ic,.f-kachel:has(input:checked) .f-kachel-ic > .ic{opacity:0;transform:scale(.6)}
.f-kachel.ist-gewaehlt .f-kachel-haken,.f-kachel:has(input:checked) .f-kachel-haken{opacity:1;transform:none}
.f-kachel.hat-fokus,.f-kachel:has(input:focus-visible){outline:2px solid var(--fokus);outline-offset:3px}

/* 03 Wunschtermin: Schnellauswahl (nur mit JS), schreibt in das Textfeld */
.f-zeiten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.f-zeiten[hidden]{display:none}
.f-zeit{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;font:inherit;font-size:.95rem;font-weight:600;color:var(--text);background:transparent;border:var(--linie-w) solid var(--feld-rand);border-radius:var(--r-pill);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--dauer),background-color var(--dauer),color var(--dauer),transform .16s var(--ease-out)}
.f-zeit .ic{display:none;flex:none;width:14px;height:14px;stroke-width:2.8}
@media (hover:hover){.f-zeit:hover{border-color:var(--text)}}
.f-zeit:active{transform:scale(.97)}
.f-zeit:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.f-zeit[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.f-zeit[aria-pressed="true"] .ic{display:block;color:var(--gelb)}

/* Felder mit Floating Label */
.reihe{display:grid;gap:14px;margin:0 0 14px}
@media (min-width:480px){.reihe{grid-template-columns:1fr 1fr}.reihe-auto{grid-template-columns:3fr 2fr}}
.f-schritt > .reihe:last-of-type{margin-bottom:0}
.feld{position:relative;margin:0 0 14px;min-width:0}
.f-schritt > .feld:last-child,.reihe > .feld{margin:0}
.feld > input:not([type="checkbox"]),.feld > textarea{display:block;width:100%;height:auto;min-height:3.5em;margin:0;padding:1.5em 1em .5em;font:inherit;font-size:max(16px,1rem);line-height:1.4;color:var(--text);background:var(--surface);border:var(--linie-w) solid var(--feld-rand);border-radius:var(--r-klein);appearance:none;-webkit-appearance:none;transition:border-color var(--dauer)}
.feld > textarea{min-height:7.5em;padding-top:1.875em;resize:vertical}
@media (hover:hover){.feld > :is(input,textarea):hover{border-color:var(--text)}}
.feld > :is(input,textarea):focus{outline:2px solid var(--fokus);outline-offset:2px;border-color:var(--text)}
.feld > :is(input,textarea):focus:not(:focus-visible){outline-color:transparent}
.feld > :is(input,textarea)::placeholder{color:transparent}
.feld > :is(input,textarea) + label{position:absolute;left:calc(1em + 1px);top:1.0625em;max-width:calc(100% - 2em - 2px);margin:0;pointer-events:none;font-size:max(16px,1rem);line-height:1.35;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left top;transition:transform var(--dauer) var(--ease),color var(--dauer)}
.feld > :focus + label,.feld > :not(:placeholder-shown) + label,.feld > :-webkit-autofill + label{transform:translateY(-.7em) scale(.76);font-weight:600;max-width:calc((100% - 2em - 2px) / .76)}
.feld > :focus + label{color:var(--text)}
.pflicht{color:inherit}

/* Fehler ohne Rot: Rand Anthrazit (im Dunkel hell), gelber Markierungsbalken links am Schritt/Feld, „!“ im gelben Kreis + Text */
.feld-fehler{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:var(--fs-klein);font-weight:600;line-height:1.45;color:var(--text);max-width:none}
.feld-fehler::before,.formular-meldung::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:-1px;border-radius:50%;background:var(--gelb);color:var(--gelb-ink);font-size:.8rem;font-weight:800;line-height:1}
.feld-fehler[hidden]{display:none}
.feld.ist-fehler > :is(input,textarea),.feld > :is(input,textarea)[aria-invalid="true"]{border-color:var(--text);border-width:2px;padding-left:calc(1em - 1px)}
.feld.ist-fehler > :is(input,textarea) + label{color:var(--text)}
.feld.ist-fehler::before,.f-schritt.ist-fehler::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--gelb)}
.f-schritt.ist-fehler::before{top:52px}
.f-schritt + .f-schritt.ist-fehler::before{top:84px}
.f-schritt.ist-fehler .f-kachel{border-color:var(--text)}
@media (min-width:1024px){.feld.ist-fehler::before,.f-schritt.ist-fehler::before{left:-18px}}
.formular-meldung{display:flex;gap:12px;align-items:flex-start;margin:0 0 28px;padding:14px 18px;background:var(--gelb-soft);border-left:4px solid var(--gelb);border-radius:0 var(--r-klein) var(--r-klein) 0;color:var(--text);font-weight:600;font-size:.95rem;line-height:1.5}
.formular-meldung[hidden]{display:none}
.formular-meldung a{white-space:nowrap;color:var(--text)}
.formular-meldung:focus{outline:2px solid var(--fokus);outline-offset:3px}

/* Abschluss: Datenschutz-Häkchen + Absenden als eigener Block */
.formular-abschluss{padding:24px;background:var(--surface-2);border-radius:var(--r)}
@media (max-width:479px){.formular-abschluss{padding:20px 16px}}
.feld-check{margin:0 0 20px}
.feld-check.ist-fehler::before{left:-12px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:var(--fs-klein);line-height:1.55;color:var(--text-mute)}
.check > span{min-width:0;overflow-wrap:break-word;hyphens:auto}
.check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--text);cursor:pointer}
.check a{color:var(--text)}
.feld-check.ist-fehler .check input{outline:2px solid var(--text);outline-offset:2px}
.feld-check .feld-fehler{margin-left:36px}

/* Honigtopf: außerhalb des Bildes, nicht per Tab erreichbar */
.hp{position:absolute;left:-5000px;top:0;width:1px;height:1px;overflow:hidden}

/* Absenden: Laden = Drehring statt Kalender, Erfolg = Haken (kurz vor der Weiterleitung) */
.formular-fuss{display:grid;gap:12px}
.formular-senden{width:100%}
@media (min-width:560px){.formular-senden{width:auto;min-width:280px;justify-self:start}}
.formular-senden[disabled]{cursor:progress}
.formular-senden[aria-busy="true"] > .ic,.formular-senden.ist-ok > .ic{display:none}
.formular-senden[aria-busy="true"]::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:f-dreh .7s linear infinite}
.formular-senden.ist-ok::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes f-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.formular-senden[aria-busy="true"]::before{animation:none}}
html[data-motion="off"] .formular-senden[aria-busy="true"]::before{animation:none}
.formular-fuss .hilfe{margin:0}

/* Danke-Seite: großer Haken im gelben Kreis über der H1 */
.seite-danke h1::before{content:"";display:block;width:76px;height:76px;margin:0 0 24px;border-radius:50%;background:var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171A1D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/40px no-repeat}
.danke-haupt h2{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);margin-bottom:.6em}
.danke-eile{margin:34px 0}
.danke-eile h3{margin-top:0}
.danke-eile .termin-tel{margin:4px 0 8px}
.danke-eile .klein{margin:0}
.danke-links{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.danke-links .textlink .ic{color:var(--text-mute)}
.danke-name{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1;text-transform:uppercase;margin:0 0 4px}
.danke-person .klein{margin-bottom:14px}
.danke-person .termin-info{margin-top:18px}

/* ===== 60-recht.css ===== */
/* Rechtsseiten (Impressum, Datenschutz) und 404 – nutzen nur Tokens aus 00-tokens.css */

/* Kopf: hell/dunkel nach Theme (keine Bühne), Eyebrow + H1 + Pill-Umschalter */
.recht-kopf{padding:clamp(40px,5vw,72px) 0 clamp(24px,3vw,40px);border-bottom:var(--linie-w) solid var(--linie)}
.recht-kopf-in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.recht-kopf-in > div{min-width:0}
.recht-kopf h1{font-size:clamp(2rem,1.2rem + 3.4vw,4rem);margin:0;hyphens:auto;overflow-wrap:anywhere}
.recht-tabs{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:4px;padding:4px;border:var(--linie-w) solid var(--linie);border-radius:var(--r-pill);background:var(--surface);justify-self:start}
.recht-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--text-mute);transition:background-color var(--dauer),color var(--dauer)}
.recht-tab:hover{color:var(--text);background:var(--surface-2)}
.recht-tab.ist-aktiv{background:var(--gelb);color:var(--gelb-ink)}
.recht-tab.ist-aktiv:hover{background:var(--gelb-hover)}
@media (min-width:768px){.recht-kopf-in{grid-template-columns:minmax(0,1fr) auto;align-items:end}}

/* Inhalt: Text max. 72ch, h2 ruhig in Manrope (keine Versalien) */
.recht-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:clamp(28px,3vw,48px) var(--gutter) var(--abschnitt)}
.recht{max-width:72ch;min-width:0;overflow-wrap:break-word}
@media (max-width:639px){.recht{hyphens:auto;-webkit-hyphens:auto}}
.recht h2{font-family:var(--font);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.3;margin:2.2em 0 .6em;text-wrap:balance}
.recht h2:first-child,.recht-notiz + h2{margin-top:0}
.recht p,.recht li{color:var(--text-mute);max-width:none}
.recht p strong,.recht li strong{color:var(--text)}
.recht a{color:var(--text)}
.recht ul{padding-left:1.2em;margin:0 0 1em}
.recht-notiz{font-size:var(--fs-klein);font-weight:600;color:var(--text);background:var(--gelb-soft);border-left:4px solid var(--gelb);padding:10px 14px;border-radius:0 var(--r-klein) var(--r-klein) 0;margin-bottom:2em}
.recht-stand{margin:3em 0 0;padding-top:1.2em;border-top:var(--linie-w) solid var(--linie);font-size:var(--fs-klein);color:var(--text-leise)}

/* Inhaltsverzeichnis mobil: <details> über dem Text */
.recht-toc{display:none}
.recht-toc-m{min-width:0;hyphens:auto;overflow-wrap:break-word;border:var(--linie-w) solid var(--linie);border-radius:var(--r);background:var(--surface)}
.recht-toc-m summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:0 18px;font-weight:700;cursor:pointer;list-style:none}
.recht-toc-m summary::-webkit-details-marker{display:none}
.recht-toc-ic{flex:none;color:var(--text-mute);transition:transform var(--dauer) var(--ease)}
.recht-toc-m[open] .recht-toc-ic{transform:rotate(45deg)}
.recht-toc-m ol{list-style:none;margin:0;padding:0 18px 10px}
.recht-toc-m li{margin:0}
.recht-toc-m a{display:flex;align-items:center;min-height:44px;padding:10px 0;border-top:var(--linie-w) solid var(--linie);font-size:.95rem;line-height:1.4;color:var(--text-mute);text-decoration:none}
.recht-toc-m a:hover{color:var(--text)}

/* Ab 1024 px: zweispaltig, Inhaltsverzeichnis links sticky, aktiver Abschnitt gelb markiert */
@media (min-width:1024px){
  .recht-toc-m{display:none}
  .recht-wrap{grid-template-columns:240px minmax(0,72ch);gap:clamp(40px,5vw,80px);align-items:start}
  .recht-toc{display:block;position:sticky;top:calc(var(--kopf-h) + 24px);max-height:calc(100vh - var(--kopf-h) - 48px);overflow-y:auto;scrollbar-width:thin}
  .recht-toc-titel{margin:0 0 12px 16px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)} /* QA 18.10.2026: --text-leise hatte 3,6:1 auf hellem Grund */
  .recht-toc ol{list-style:none;margin:0;padding:0;border-left:var(--linie-w) solid var(--linie)}
  .recht-toc li{margin:0}
  .recht-toc a{display:flex;align-items:center;min-height:44px;margin-left:-1px;padding:6px 0 6px 16px;border-left:2px solid transparent;font-size:.9rem;line-height:1.4;color:var(--text-mute);text-decoration:none;transition:color var(--dauer),border-color var(--dauer)}
  .recht-toc a:hover{color:var(--text)}
  .recht-toc a.ist-aktiv{color:var(--text);border-left-color:var(--gelb);font-weight:600}
}

/* 404: große Zahl in Barlow Condensed mit Werkzeug-Kreis, dann Text, Aktionen, Zeilenliste */
.nf{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;padding:clamp(48px,6vw,96px) var(--gutter) var(--abschnitt)}
.nf-kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.nf-kopf > *{min-width:0}
.nf-zahl{display:flex;align-items:center;margin:0;font-family:var(--font-display);font-weight:700;font-size:min(clamp(6rem,3rem + 16vw,14rem),40vw);line-height:.9;letter-spacing:-.02em;color:var(--text);user-select:none}
.nf-zahl span{display:block}
.nf-ic{display:grid;place-items:center;width:.6em;height:.6em;margin:0 .05em;border-radius:50%;background:var(--gelb);color:var(--gelb-ink)}
.nf-ic .ic{width:52%;height:52%;stroke-width:1.6}
.nf-text h1{font-size:clamp(2.2rem,1.6rem + 3vw,3.8rem)}
.nf-text .lead{max-width:48ch}
.nf-text .aktionen{margin-bottom:0}
.nf-h2{margin:clamp(40px,5vw,64px) 0 16px;font-family:var(--font);font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:.02em;text-transform:none;color:var(--text-mute)}
.nf-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));column-gap:clamp(24px,3vw,48px)}
.nf-liste li{margin:0}
/* Zeilen auf Linien wie „Weitere Leistungen“: keine Kachelfläche, kein Rahmen; Gelb nur als Linie bei Hover/Fokus */
.nf-zeile{position:relative;display:flex;gap:14px;align-items:flex-start;height:100%;min-height:44px;padding:20px 0 22px;border-top:var(--linie-w) solid var(--linie-stark);text-decoration:none;color:var(--text)}
.nf-zeile::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:3px;background:var(--gelb);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out)}
.nf-zeile:hover::before,.nf-zeile:focus-visible::before{transform:none}
html[data-motion="off"] .nf-zeile::before{transition:none}
.nf-zeile > .ic{flex:none;color:var(--text-mute);margin-top:1px}
.nf-zeile:hover > .ic{color:var(--text)}
.nf-zeile-text{display:grid;gap:4px;min-width:0}
.nf-zeile-text strong{font-weight:700;line-height:1.3;hyphens:auto;overflow-wrap:break-word}
.nf-zeile-text span{font-size:var(--fs-klein);color:var(--text-mute);line-height:1.45}
.nf-sprache{margin:28px 0 0}
@media (min-width:1024px){
  .nf-kopf{grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,6vw,96px)}
}

/* ===== 70-fuss.css ===== */
/* Fuß: immer dunkle Bühne (Tokens sind in .buehne bereits umgebogen). Linien statt Schatten.
   Hierarchie: Telefonnummer groß (Barlow, Zahl) → Adresse/Zeiten/Mail → Linklisten → Rechtszeile.
   Mobil klappen die beiden Linklisten als <details> zu (70-fuss.js setzt open je Breite). */
.fuss{padding:clamp(56px,7vw,104px) 0 clamp(20px,2.4vw,32px);margin-top:0}
.fuss-raster{display:grid;gap:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,72px)}
.fuss-kontakt,.fuss-nav,.fuss-sp{min-width:0}

/* Marke */
.fuss-logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--text)} /* QA 18.10.2026: 44-px-Ziel */
.fuss-logo img{width:40px;height:40px;flex:none}
.fuss-logo span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.45rem;line-height:.9;letter-spacing:.01em;display:flex;flex-direction:column}
.fuss-logo small{font-size:.72em;color:var(--text-mute);letter-spacing:.06em} /* Ortszeile grau wie im Kopf (.logo-ort), Gelb bleibt Aktionsfarbe */
.fuss-claim{margin:14px 0 0;color:var(--text-mute);max-width:34ch;text-wrap:pretty}

/* Kleine Beschriftung über jedem Wert (Versalien klein, gesperrt) */
.fuss-label{display:block;margin:0 0 8px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise)}

/* Telefon: die eine große Zahl im Fuß */
/* Deckel 10.5vw: auch bei 320 px und 200 % Text passt eine 16-stellige Nummer („+49 202 24791305“) ohne Überlauf */
.fuss-tel{margin:clamp(36px,4.5vw,56px) 0 0;max-width:none;min-width:0}
.fuss-tel a{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:min(clamp(2.6rem,1.9rem + 3.4vw,4.75rem),10.5vw);line-height:1;max-width:100%;letter-spacing:-.005em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:.14em;transition:text-decoration-color var(--dauer) ease}
.fuss-tel a:hover,.fuss-tel a:focus-visible{text-decoration-color:var(--gelb)}

/* Adresse, Zeiten, Schreiben: drei ruhige Fakten, mobil gestapelt */
.fuss-fakten{display:grid;gap:28px;margin:clamp(32px,4vw,48px) 0 0;padding-top:clamp(28px,3vw,36px);border-top:var(--linie-w) solid var(--buehne-linie)}
.fuss-fakten dd{margin:0;color:var(--text);font-size:1.0625rem;line-height:1.5;overflow-wrap:anywhere}
.fuss-fakten address{font-style:normal}
.fuss-schreiben{display:flex;flex-direction:column;align-items:flex-start}
.fuss-schreiben>a:first-child{display:inline-block;padding:9px 0;margin:-9px 0 4px;color:var(--text);text-decoration:underline;text-decoration-color:var(--linie-stark);text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-color var(--dauer) ease}
.fuss-schreiben>a:first-child:hover{text-decoration-color:var(--gelb)}
.fuss-mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-mute);font-size:var(--fs-klein);font-weight:600;text-decoration:none;transition:color var(--dauer) ease}
.fuss-mehr .ic{flex:none;width:16px;height:16px}
.fuss-mehr:hover{color:var(--text)}
.fuss-mehr:hover span:first-of-type{text-decoration:underline;text-decoration-color:var(--gelb);text-underline-offset:.2em}
.fuss-wa .ic{width:18px;height:18px;color:var(--wa)}

/* Linklisten: Überschrift klein gesperrt. Mobil als <summary> klickbar (Plus dreht zu X) */
.fuss-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:16px 0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);cursor:pointer;list-style:none;min-height:52px}
.fuss-h::-webkit-details-marker{display:none}
.fuss-ic{flex:none;color:var(--text-mute);transition:transform .2s var(--ease-out)}
.fuss-sp[open] .fuss-ic{transform:rotate(45deg);color:var(--text)}
details.fuss-sp{border-top:var(--linie-w) solid var(--buehne-linie)}
details.fuss-sp:last-child{border-bottom:var(--linie-w) solid var(--buehne-linie)}
.fuss-liste{list-style:none;margin:0;padding:0 0 18px}
.fuss-liste li{margin:0}
/* QA 18.10.2026: Touch-Ziele ≥ 44 px – Zeilenhöhe statt Abstand zwischen den Listenpunkten */
.fuss-liste a{display:inline-flex;align-items:center;min-height:44px;padding:.5em 0;color:var(--text-mute);text-decoration:none;font-weight:400;line-height:1.4;transition:color var(--dauer) ease}
.fuss-liste a:hover{color:var(--text)}
.fuss-liste a[aria-current="page"]{color:var(--text);text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.35em}

/* Unterste Zeile: links Copyright + Recht, rechts Sprache, Animationen, Signatur */
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;padding-top:clamp(16px,2vw,22px);border-top:var(--linie-w) solid var(--buehne-linie);font-size:.85rem;color:var(--text-mute)}
.fuss-unten p{margin:0;max-width:none}
.fuss-recht,.fuss-sprachen,.fuss-schalter{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px}
.fuss-unten a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-mute);text-decoration:none;padding:0;transition:color var(--dauer) ease} /* QA 18.10.2026: 44-px-Ziel */
.fuss-unten a:hover{color:var(--text)}
.fuss-unten a[aria-current]{color:var(--text);font-weight:600}
.fuss-sprachen a[aria-current]{text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:.3em}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0;margin:0;font:inherit;font-size:.85rem;color:var(--text-mute);cursor:pointer;transition:color var(--dauer) ease}
.motion-toggle::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background-color var(--dauer) ease,border-color var(--dauer) ease}
.motion-toggle[aria-pressed="true"]::before{background:var(--gelb);border-color:var(--gelb)}
.motion-toggle:hover{color:var(--text)}
.fuss-vezoza{font-size:.78rem;color:var(--text-leise)}
.fuss-unten .fuss-vezoza{color:var(--text-leise)}
.fuss-unten .fuss-vezoza:hover{color:var(--text-mute)}

@media (max-width:767px){
  .fuss-unten{flex-direction:column;align-items:flex-start}
  .fuss-schalter{flex-direction:column;align-items:flex-start}
}
@media (min-width:640px){
  .fuss-fakten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media (min-width:768px){
  .fuss-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  details.fuss-sp,details.fuss-sp:last-child{border:0}
  .fuss-h{pointer-events:none;padding:0 0 12px;min-height:0;color:var(--text-leise)}
  .fuss-ic{display:none}
  .fuss-liste{padding:0}
  .fuss-unten{justify-content:space-between}
  .fuss-schalter{margin-left:auto}
}
@media (min-width:1024px){
  /* Desktop: Marke | Listen oben, darunter Telefon und die drei Fakten über die volle Breite */
  .fuss-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"marke nav" "tel tel" "fakten fakten";column-gap:clamp(48px,6vw,112px);row-gap:0;align-items:start}
  .fuss-kontakt{display:contents}
  .fuss-marke{grid-area:marke}
  .fuss-nav{grid-area:nav}
  .fuss-tel{grid-area:tel;margin-top:clamp(48px,5vw,72px)}
  .fuss-fakten{grid-area:fakten;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
  /* Platz für den Nach-oben-Knopf unten rechts */
  .fuss-unten{padding-right:72px}
}

/* Feste Kontaktleiste (nur < 1024 px). body hat mobil bereits padding-bottom:var(--leiste-h).
   Verschwindet, solange ein Eingabefeld den Fokus hat (Bildschirmtastatur), per .leiste-weg am body (70-fuss.js).
   Rechts hält sie 44 + 8 px für den Nach-oben-Knopf frei. Tasten teilen sich die Breite (flex-basis 0, min-width 0),
   nichts ragt über den Rand. Jede Taste ist ein eigener Container: passt die Beschriftung nicht (schmal, 200 % Text),
   bleibt nur das Icon sichtbar, die Beschriftung bleibt als zugänglicher Name (sr-only). Schwellen in em = Bedarf
   aus Icon (1.25em) + Abstand (.4em) + Beschriftung, wachsen also mit der Schriftgröße mit. */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;height:calc(var(--leiste-h) + env(safe-area-inset-bottom,0px));padding:10px calc(max(var(--gutter),env(safe-area-inset-right,0px)) + 52px) calc(10px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));container:leiste/inline-size;border-top:var(--linie-w) solid var(--buehne-linie);transition:transform .24s var(--ease-out)}
body.leiste-weg .leiste{transform:translateY(100%);transition:transform .16s ease-in-out}
.leiste-btn{flex:1 1 0;min-width:0;min-height:0;height:100%;padding:0 .3em;font-size:.95rem;gap:.4em;container:taste/inline-size;transition:background-color var(--dauer) ease,border-color var(--dauer) ease,transform .12s var(--ease-out)}
.leiste-btn:active{transform:scale(.97)}
.leiste-btn .ic{width:1.25em;height:1.25em}
.leiste-btn>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.menu-offen .leiste{display:none}
@media (max-width:359px){.leiste{gap:6px}.leiste-btn{font-size:.85rem;padding:0 .2em}}
/* Schmale Leiste: WhatsApp als quadratische Icon-Taste (das Logo ist eindeutig), Anrufen/Termin behalten ihr Wort */
@container leiste (max-width:30em){.leiste-wa{flex:0 0 52px}}
@container taste (max-width:5.75em){
  .leiste-btn>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .leiste-btn .ic{width:min(1.25em,24px);height:min(1.25em,24px)}
}
@container taste (max-width:6.75em){
  .leiste-wa>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .leiste-wa .ic{width:min(1.25em,24px);height:min(1.25em,24px)}
}
@media (min-width:1024px){.leiste{display:none}}

/* Nach oben (70-fuss.js erzeugt den Knopf): Anthrazit-Scheibe wie die Kontaktleiste, in beiden Themes gleich;
   dünner gelber Ring = Lesefortschritt (--p 0–100). Rein: 240 ms ease-out, raus: 160 ms (schneller als rein).
   Mobil (< 1024 px) sitzt er IN der Kontaktleiste rechts (die Leiste hält dafür 44 + 8 px frei) und verdeckt
   so keinen Inhalt am rechten Rand (FAQ-Plus, Route-Taste). Desktop: frei unten rechts. */
.nach-oben{position:fixed;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:calc((var(--leiste-h) - 44px) / 2 + env(safe-area-inset-bottom,0px));z-index:51;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--buehne-text);background:rgb(var(--buehne-rgb)/.9);border:var(--linie-w) solid var(--buehne-linie-stark);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transition:opacity .16s ease,transform .16s ease-in-out,visibility 0s .16s}
.nach-oben.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),visibility 0s}
.nach-oben-ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);fill:none;stroke-width:2}
.nach-oben-ring circle{stroke:transparent}
.nach-oben-ring .nach-oben-fill{stroke:var(--gelb);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0))}
.nach-oben-pfeil{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.nach-oben:focus-visible{outline:2px solid var(--gelb);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.nach-oben:hover .nach-oben-pfeil{transform:translateY(-2px)}}
.nach-oben.is-on:active{transform:scale(.94);transition-duration:.1s}
body.menu-offen .nach-oben{opacity:0;visibility:hidden}
/* Leiste weg (Tastatur offen): Knopf ebenfalls ausblenden, er säße sonst mitten im Formular */
body.leiste-weg .nach-oben{opacity:0;visibility:hidden}
@media (min-width:1024px){
  .nach-oben{z-index:45;width:48px;height:48px;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px))}
  body.leiste-weg .nach-oben.is-on{opacity:1;visibility:visible}
}
@media (prefers-reduced-motion:reduce){.nach-oben,.nach-oben.is-on,.nach-oben.is-on:active{transform:none}.leiste,body.leiste-weg .leiste{transition:none}}
html[data-motion="off"] .nach-oben,html[data-motion="off"] .nach-oben.is-on,html[data-motion="off"] .nach-oben.is-on:active{transform:none}

/* ===== 80-bilder.css ===== */
/* Bilder (Bildwelt): Theme-Fassung wählt 80-bilder.js über srcset; hier nur Maße und Zuschnitt.
   Dateien: /img/<name>-{hell|dunkel}-{mobil|w1200|w1600}.{avif|webp}, Querformat 3:2, mobil 4:5. */
.bild picture,.bild img{display:block}
.bild img{aspect-ratio:3/2;object-position:62% 50%}
@media (max-width:767px){.bild img{aspect-ratio:4/5}}