/* =====================================================================
   FS Automotive Engineering · Homepage · Design-System „Precision Noir“
   Material „Liquid Glass“ (iOS 26), Studio-Schwarz mit kühlem Stich,
   eine Akzentfarbe als Signal: Eisblau (dunkel) / Kobalt (hell).
   Dunkel ist der Standard, Hell über den Umschalter oder data-theme.

   Hilfsklassen für alle Module (Abschnitte, Signalweg, INEOS, Öl, Port)
   ---------------------------------------------------------------------
   .glass        Glasfläche: Blur + Sättigung, Glanzkante als Verlaufsrand
                 (belegt ::before), Schatten --sh-3, Radius --r-xl.
                 Stellschrauben: --g-bg (Füllung), --g-r (Radius), --g-sh (Schatten).
   .glass-thin   leichter (Chips, Callouts, schwebende Labels), Schatten --sh-2
   .glass-dense  dichter (Textflächen, Formulare), Füllung --glass2
   .glass-pill   Radius 999px
   .glass-lens   zusätzlich Linsen-Brechung per SVG-Displacement (#fs-refract im Sprite,
                 Karte aus glass.js); nur Chromium (.fx-refract + @supports), sonst sauberer Blur
   .card         Inhaltskarte: Glas dicht, Radius --r-lg, Innenabstand 24–32 px
   .seg          iOS-Segment mit gleitendem Glas-Thumb (Feder). Aktiv über
                 aria-pressed="true" oder aria-selected="true"; site.js baut den
                 Thumb automatisch, für später erzeugte Segmente window.FS.seg(el).
                 Größen .seg-sm .seg-lg, Icons .seg-ico, volle Breite .seg-fill
   .btn          Glas-Pille; .btn.primary (Glanz, Signal beim Hover), .btn.sm
   Tokens        --hair --hair2 (durchscheinende Haarlinien auf Glas; --line/--line2 bleiben deckend)
                 --edge --edge-hi --edge-lo --rim --sheen --fill --fill2
                 --thumb --thumb-rim --blur --sel --sig
                 --sh-1 --sh-2 --sh-3 (= --sh)  --r-sm --r --r-lg --r-xl --r-pill
                 --ease --ease-io --spring --dur
                 --map-0 … --map-5, --map-net (Kennfeld-Farbkarte nach Höhe, je Thema)
   .vh           nur für Screenreader sichtbar
   ===================================================================== */
:root{
  color-scheme:dark;
  /* Flächen: Schwarz mit kühlem Stich, vier Graphitstufen */
  --bg:#05070a;--bg2:#090b0f;--surface:#0e1116;--surface2:#13161c;--surface3:#1a1e25;
  /* Haarlinien: kühles Weiß mit 9 und 15 % Deckkraft (--hair*, für Glas) und als deckende Entsprechung auf --bg (--line*, auch von WebGL-Modulen gelesen) */
  --line:#171a1f;--line2:#22262c;--hair:rgba(214,226,255,.09);--hair2:rgba(214,226,255,.15);
  /* Text: 17,9 / 10,5 / 5,6 : 1 auf --bg (AA); --faint nur für Dekor */
  --fg:#eef2f7;--fg2:#b4bcc8;--mut:#808896;--faint:#5d6471;
  --acc:#80d2ff;--acc-hover:#a6e0ff;--acc-soft:rgba(128,210,255,.12);--acc-line:rgba(128,210,255,.42);--acc-fg:#04121c;--acc-glow:rgba(128,210,255,.3);
  --sig:#ff3b30; /* der eine Nothing-Signalpunkt */
  /* Farbkarte für Kennfelder (Hero 3D/2D/Tabelle): Indigo, Azur, Smaragd, Limette, Bernstein, Koralle; leicht entsättigt */
  --map-0:#3b45c2;--map-1:#3583c6;--map-2:#2b9c80;--map-3:#97bd5e;--map-4:#e6b454;--map-5:#e0654f;--map-net:rgba(5,8,14,.55);
  --ok:#4ade80;--warn:#fb923c;--warn-soft:rgba(251,146,60,.12);
  --sel:rgba(128,210,255,.3);
  /* Liquid Glass */
  --glass:rgba(18,21,27,.56);--glass2:rgba(12,14,19,.82);--glass-line:rgba(214,226,255,.1);--hl:rgba(255,255,255,.08);
  --edge:rgba(214,226,255,.1);--edge-hi:rgba(255,255,255,.16);--edge-lo:rgba(0,0,0,.42);
  --rim:linear-gradient(158deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 24%,rgba(255,255,255,.03) 56%,rgba(255,255,255,.13));
  --sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 44%);
  --fill:rgba(126,138,162,.13);--fill2:rgba(126,138,162,.22);
  --thumb:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.1));
  --thumb-rim:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 52%,rgba(255,255,255,.16));
  --thumb-sh:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.35));
  --btn-sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 54%);
  --blur:blur(24px) saturate(1.6);
  --studio:rgba(150,182,224,.075);
  --dot:rgba(210,225,245,.06);--hatch:rgba(210,225,245,.09);
  /* Schattenstufen */
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 1px 1px rgba(0,0,0,.35),0 12px 30px -12px rgba(0,0,0,.75);
  --sh-3:0 1px 1px rgba(0,0,0,.4),0 30px 80px -30px rgba(0,0,0,.92);
  --sh:var(--sh-3);
  --gl-lo:#0b0e12;--gl-hi:#9fb4ca;
  --metal-1:#262c35;--metal-2:#5b6775;
  --chrome:linear-gradient(176deg,#ffffff 0%,#c4cfdb 30%,#6d7a89 52%,#e8eef5 66%,#8592a1 100%);
  --font:"Archivo","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --dots:"Doto","JetBrains Mono",ui-monospace,monospace;
  /* Bewegung nach Emil Kowalski: kräftiges ease-out für UI, ease-in-out auf der Fläche, nie ease-in.
     --spring: Feder mit 2 % Überschwingen (gedämpft wie Steifigkeit 170 / Dämpfung 26), für Thumbs */
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --spring:linear(0,.0536,.1771,.3282,.4803,.618,.734,.8263,.8959,.9459,.9797,1.0009,1.013,1.0185,1.0199,1.0187,1.0162,1.0132,1.0102,1.0075,1.0052,1.0034,1.002,1.001,1);
  --dur:.3s;
  /* Formen: Pille für Knöpfe und Umschalter, Karten 18/22 px, Felder 14 px (Raster 2026-10: vorher 24/28) */
  --r-sm:10px;--r:14px;--r-lg:18px;--r-xl:22px;--r-pill:999px;
  --wrap:1240px;--gut:clamp(16px,4vw,40px);
  /* Raster 2026-10 „kompakt und klarer“: eine Skala für Abstände und Schrift, Basis 4 px.
     Ziel: jedes interaktive Modul (Kopf, Grafik, Bedienung, Anzeigen) passt auf einen Bildschirm.
     Hero und Intro behalten ihre eigenen Maße (siehe .hero-copy .lead, .hud). */
  --sec-y:clamp(64px,7.2vw,112px);       /* Abschnitt oben und unten (vorher 96–168) */
  --sh-gap:14px;                         /* Kopf: Kicker, Headline, Lead (vorher 24) */
  --sh-mb:clamp(28px,3.2vw,44px);        /* Kopf bis Inhalt (vorher 48–80) */
  --gap:12px;                            /* Raster zwischen Karten (vorher 16) */
  --pad:clamp(16px,1.7vw,22px);          /* Innenabstand Karten und Instrumente (vorher 22–32) */
  --t-h2:clamp(30px,4vw,56px);           /* Abschnitts-Headline (vorher 34–72) */
  --t-h3:clamp(18px,1.5vw,21px);         /* Zwischenüberschrift (vorher 20–26) */
  --t-lead:clamp(16px,1.12vw,17.5px);    /* Einleitung (vorher 17–20) */
  --t-p:15px;                            /* Fließtext in Karten und Modulen */
  --t-sm:13px;                           /* Hinweise, Bildunterschriften */
  --t-micro:11px;                        /* Mono-Labels in Versalien, Achsen (nie unter 10 px) */
}
:root[data-theme="light"]{
  color-scheme:light;
  /* Papierweiß wie eine Konstruktionszeichnung, gleiche Hierarchie */
  --bg:#f3f4f6;--bg2:#eceef1;--surface:#fbfbfc;--surface2:#f6f7f9;--surface3:#e9ebef;
  --line:#dee0e3;--line2:#d0d2d6;--hair:rgba(12,18,30,.09);--hair2:rgba(12,18,30,.15);
  --fg:#0b0d11;--fg2:#383d46;--mut:#5b606a;--faint:#868b95;
  --acc:#0062e6;--acc-hover:#0052c2;--acc-soft:rgba(0,98,230,.08);--acc-line:rgba(0,98,230,.36);--acc-fg:#f8fbff;--acc-glow:rgba(0,98,230,.2);
  --sig:#e5221a;
  --map-0:#3d49c0;--map-1:#3884c6;--map-2:#2c9b7e;--map-3:#90b658;--map-4:#dba948;--map-5:#d5604b;--map-net:rgba(16,22,36,.45);
  --ok:#15803d;--warn:#b45309;--warn-soft:#fff7ed;
  --sel:rgba(0,98,230,.18);
  --glass:rgba(252,253,255,.6);--glass2:rgba(250,251,253,.86);--glass-line:rgba(12,18,30,.08);--hl:rgba(255,255,255,.9);
  --edge:rgba(12,18,30,.08);--edge-hi:rgba(255,255,255,.95);--edge-lo:rgba(12,18,30,.05);
  --rim:linear-gradient(158deg,rgba(255,255,255,1),rgba(255,255,255,.55) 28%,rgba(12,18,30,.06) 60%,rgba(12,18,30,.1));
  --sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 48%);
  --fill:rgba(118,126,142,.11);--fill2:rgba(118,126,142,.18);
  --thumb:linear-gradient(180deg,#fff,#fbfcfd);
  --thumb-rim:linear-gradient(180deg,#fff,rgba(12,18,30,.12));
  --thumb-sh:drop-shadow(0 1px 1px rgba(10,14,24,.1)) drop-shadow(0 4px 10px rgba(10,14,24,.1));
  --btn-sheen:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 54%);
  --studio:rgba(255,255,255,.85);
  --dot:rgba(16,18,22,.08);--hatch:rgba(16,18,22,.1);
  --sh-1:0 1px 2px rgba(10,14,24,.08);
  --sh-2:0 1px 2px rgba(10,14,24,.06),0 12px 26px -12px rgba(10,14,24,.22);
  --sh-3:0 1px 2px rgba(10,14,24,.05),0 30px 64px -30px rgba(10,14,24,.3);
  --gl-lo:#a3adba;--gl-hi:#f7f9fb;
  --metal-1:#b9c1cb;--metal-2:#f2f4f7;
  --chrome:linear-gradient(176deg,#3a414b 0%,#8a96a4 34%,#1b1f25 54%,#6b7684 70%,#2a2f37 100%);
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;caret-color:var(--acc);scrollbar-color:var(--line2) var(--bg);accent-color:var(--acc)}
a{text-underline-offset:3px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:"ss01";-webkit-tap-highlight-color:transparent}
img,svg,canvas{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--sel);color:var(--fg)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 16px;background:var(--fg);color:var(--bg);border-radius:12px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* ---------- Liquid Glass ---------- */
.glass{position:relative;border-radius:var(--g-r,var(--r-xl));
  background:var(--sheen),var(--g-bg,var(--glass));
  box-shadow:var(--g-sh,var(--sh-3)),inset 0 -1px 0 var(--edge-lo);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
/* Glanzkante: Verlaufsrand, oben links hell, unten rechts ein zweiter, schwächerer Reflex */
.glass::before,.card::before,.monitor::before,.lv::before,.ci::before,.ct-form::before,.hours::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass-thin{--g-bg:color-mix(in srgb,var(--glass) 70%,transparent);--g-sh:var(--sh-2)}
.glass-dense{--g-bg:var(--glass2)}
.glass-pill{--g-r:var(--r-pill)}
/* Linsen-Brechung (nur Chromium mit feinem Zeiger): erst Blur und Sättigung, dann #fs-refract.
   glass.js zeichnet die Verschiebungskarte passend zur Kapsel (konvexe Fase, Lupe zum Rand)
   und spreizt R, G und B minimal (Dispersion). Ohne Karte bleibt der Filter neutral. */
.fx-refract .glass-lens{will-change:backdrop-filter}
@supports (backdrop-filter:url(#fs-refract)){
  .fx-refract .glass-lens{backdrop-filter:blur(14px) saturate(1.8) url(#fs-refract)}
}

/* ---------- Typografie ---------- */
.display{font:720 clamp(40px,6.7vw,96px)/.92 var(--font);font-stretch:100%;letter-spacing:-.04em;margin:0;text-wrap:balance;overflow-wrap:break-word}
@media (min-width:760px){.display{font-stretch:112%;letter-spacing:-.045em}}
.h{font:690 var(--t-h2)/.98 var(--font);font-stretch:108%;letter-spacing:-.035em;margin:0;text-wrap:balance}
@media (min-width:1100px){.h{letter-spacing:-.04em}}
.h.xl{font-size:clamp(52px,11vw,160px);line-height:.9;font-stretch:112%;letter-spacing:-.045em}
.h3,h3{font:640 var(--t-h3)/1.2 var(--font);font-stretch:104%;letter-spacing:-.015em;margin:0;text-wrap:balance}
.lead{font-size:var(--t-lead);line-height:1.58;color:var(--fg2);max-width:62ch;margin:0;text-wrap:pretty;letter-spacing:-.003em}
/* Hero: Maße wie freigegeben */
.hero-copy .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:60ch;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
.kicker{font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.label{font:500 var(--t-micro)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.dots{font-family:var(--dots);font-weight:850;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:.9}
.mono{font-family:var(--mono)}
.chrome{background:var(--chrome);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Knöpfe ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:var(--r-pill);
  font:600 15px/1 var(--font);font-stretch:104%;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  color:var(--fg);background:var(--sheen),var(--glass);
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-1);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  transition:transform .32s var(--spring),background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn:active{transform:scale(.97);transition-duration:.12s,.2s,.2s,.2s;transition-timing-function:var(--ease)}
.btn .i{transition:transform .2s var(--ease)}
.btn.primary{color:var(--bg);background:var(--btn-sheen) var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.35),0 10px 26px -12px rgba(0,0,0,.65)}
:root[data-theme="light"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4),0 1px 2px rgba(10,14,24,.2),0 10px 24px -12px rgba(10,14,24,.45)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:inset 0 0 0 1px var(--hair2),inset 0 1px 0 var(--edge-hi),var(--sh-2)}
  .btn.primary:hover{background-color:var(--acc);color:var(--acc-fg)}
  .btn.primary:hover .i{transform:translateX(3px)}
}
.btn.sm{min-height:40px;padding:0 16px;font-size:13.5px}
.ibtn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--fg2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.ibtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.ibtn:hover{background:var(--fill);color:var(--fg)}}
.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--acc);text-decoration:none;font-weight:600;font-size:15px}
.lnk .i{transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.lnk:hover .i{transform:translateX(3px)}}

/* ---------- Segment-Umschalter (iOS 26) ----------
   Der Thumb ist ein Glasstück, das per clip-path von Segment zu Segment gleitet (Feder).
   site.js setzt --tl/--tr (Abstand links/rechts) und die Klasse .has-thumb. */
.seg{position:relative;display:inline-flex;gap:0;padding:3px;border-radius:var(--r-pill);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);max-width:100%;overflow-x:auto;scrollbar-width:none;isolation:isolate}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;flex:none;min-height:34px;padding:0 15px;border:0;border-radius:var(--r-pill);background:none;color:var(--mut);font:600 13px/1 var(--font);font-stretch:104%;cursor:pointer;white-space:nowrap;user-select:none;
  transition:color .2s var(--ease),transform .32s var(--spring)}
.seg button::after{content:"";position:absolute;inset:-4px 0}
.seg button:active{transform:scale(.96);transition-duration:.2s,.12s}
.seg button:focus-visible{outline-offset:-1px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--fg)}
@media (hover:hover) and (pointer:fine){.seg button:hover{color:var(--fg)}}
/* ohne Skript: Auswahl als ruhige Fläche */
.seg:not(.has-thumb) button[aria-pressed="true"],.seg:not(.has-thumb) button[aria-selected="true"]{background:var(--thumb);box-shadow:inset 0 0 0 1px var(--edge),var(--sh-1)}
.seg-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;pointer-events:none;filter:var(--thumb-sh);transform-origin:var(--tc,50%) 50%;transition:transform .32s var(--spring)}
.seg-thumb i,.seg-thumb b{position:absolute;inset:0;border-radius:var(--r-pill);transition:clip-path var(--dur) var(--spring)}
.seg-thumb i{background:var(--thumb-rim);clip-path:inset(var(--tt,0px) var(--tr,100%) var(--tb,0px) var(--tl,0) round var(--r-pill))}
.seg-thumb b{background:var(--thumb);clip-path:inset(calc(var(--tt,0px) + 1px) calc(var(--tr,100%) + 1px) calc(var(--tb,0px) + 1px) calc(var(--tl,0px) + 1px) round var(--r-pill))}
.seg-thumb.off{opacity:0}
.seg.is-press .seg-thumb{transform:scale(1.04)}
.seg-sm button{min-height:30px;padding:0 11px;font:600 11.5px/1 var(--mono);letter-spacing:.06em}
.seg-lg button{min-height:42px;padding:0 20px;font-size:14px}
.seg-ico button{display:inline-grid;place-items:center;padding:0;width:36px}
.seg-ico .i{width:16px;height:16px}
.seg-fill{display:flex;width:100%}
.seg-fill button{flex:1 1 0;padding-inline:8px}
@media (pointer:coarse){.seg button{min-height:38px}.seg-sm button{min-height:36px}.seg-ico button{width:40px}}

/* Passermarken (Messfenster-Ecken) */
.brk{position:relative}
.brk::before{content:"";position:absolute;inset:0;pointer-events:none;--c:var(--acc-line);background:
  linear-gradient(var(--c),var(--c)) 0 0/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px 18px no-repeat}

/* ---------- Navigation: schwebende Glas-Kapsel (Liquid Glass 2.0) ----------
   Schichten von unten nach oben:
   1 Backdrop: Blur und Sättigung, in Chromium zusätzlich die Linsen-Brechung (.glass-lens)
   2 Tönung mit Glanzverlauf oben; verdichtet sich, sobald die Seite scrollt
   3 Innenlicht oben, innerer Schatten unten
   4 Lens-Rand: dunkler Innensaum unter dem hellen Verlaufsrand (::before aus .glass), Glanzkante oben
   5 .nav-fx: Schimmer und Glanzlinie folgen dem Zeiger (glass.js, gefedert, nur feiner Zeiger,
     nicht bei reduzierter Bewegung)
   Lesbarkeit: Tönung über Blur dunkel 52 %, verdichtet 72 %; hell 60 % bzw. 80 % (Links --fg2 ≥ 6 : 1). */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gut) 0;pointer-events:none}
.nav-in{pointer-events:auto;max-width:1160px;margin-inline:auto;height:60px;display:flex;align-items:center;gap:10px;padding:0 8px 0 20px;isolation:isolate;--g-r:var(--r-pill);--g-sh:var(--sh-2);
  --nv-bg:rgba(14,16,21,.52);--nv-top:rgba(255,255,255,.075);--nv-hi:rgba(255,255,255,.17);--nv-lo:rgba(0,0,0,.5);--nv-saum:rgba(0,0,0,.3);
  --nv-in-hi:rgba(255,255,255,.065);--nv-in-lo:rgba(0,0,0,.42);--nv-sheen:rgba(255,255,255,.085);--nv-glint:rgba(255,255,255,.95);
  background:linear-gradient(180deg,var(--nv-top),rgba(255,255,255,0) 58%),var(--nv-bg);
  box-shadow:inset 0 1px 0 var(--nv-hi),inset 0 -1px 0 var(--nv-lo),inset 0 0 0 2px var(--nv-saum),inset 0 12px 16px -12px var(--nv-in-hi),inset 0 -14px 18px -14px var(--nv-in-lo),var(--g-sh);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
.nav.scrolled .nav-in{--nv-bg:rgba(12,14,19,.72);--g-sh:var(--sh-3)}
:root[data-theme="light"] .nav-in{--nv-bg:rgba(252,253,255,.6);--nv-top:rgba(255,255,255,.7);--nv-hi:#fff;--nv-lo:rgba(12,18,30,.09);--nv-saum:rgba(12,18,30,.05);
  --nv-in-hi:rgba(255,255,255,.55);--nv-in-lo:rgba(12,18,30,.07);--nv-sheen:rgba(255,255,255,.75);--nv-glint:#fff}
:root[data-theme="light"] .nav.scrolled .nav-in{--nv-bg:rgba(250,251,253,.8)}
/* Glanz am Zeiger: breiter Schimmer auf der Fläche, Glanzlinie nur auf dem Rand (Ringmaske); bewegt per transform */
.nav-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .28s var(--ease)}
.nav-in.is-lit .nav-fx{opacity:1}
.nav-sheen,.nav-glint b{position:absolute;top:0;bottom:0;left:0;will-change:transform}
.nav-sheen{width:320px;margin-left:-160px;background:radial-gradient(50% 100% at 50% 0,var(--nv-sheen),rgba(255,255,255,0))}
.nav-glint{position:absolute;inset:0;border-radius:inherit;padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nav-glint b{width:220px;margin-left:-110px;background:radial-gradient(50% 75% at 50% 0,var(--nv-glint),rgba(255,255,255,0)),radial-gradient(34% 50% at 50% 100%,color-mix(in srgb,var(--nv-glint) 40%,transparent),rgba(255,255,255,0))}
@media (hover:none),(pointer:coarse){.nav-fx{display:none}}
.motion-reduce .nav-fx{display:none}
/* Fortschrittslinie: Haarlinie auf der Unterkante der Kapsel */
.progress{position:absolute;left:30px;right:30px;bottom:0;height:1.5px;pointer-events:none;overflow:hidden;border-radius:2px}
.progress i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--fg);min-width:0;flex:0 1 auto;border-radius:12px}
/* Original-Logo des Kunden als Maske: färbt sich mit currentColor in beiden Themen */
.logo-mark,.logo-word,.logo-full{display:block;flex:none;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-mark{width:22px;height:28px;-webkit-mask-image:url(logo-mark.png?v=b0bf986b);mask-image:url(logo-mark.png?v=b0bf986b)}
.logo-word{height:7.5px;aspect-ratio:1204/29;-webkit-mask-image:url(logo-word.png?v=3249b49c);mask-image:url(logo-word.png?v=3249b49c)}
.logo-full{width:min(360px,100%);aspect-ratio:1204/253;-webkit-mask-image:url(logo-full.png?v=6a9b9243);mask-image:url(logo-full.png?v=6a9b9243)}
/* Schriftzug in der Kapsel: volle Größe 311 × 7,5 px, schrumpft bei Platzmangel im Seitenverhältnis */
.brand .logo-word{opacity:.92;flex:0 1 auto;width:311px;min-width:0;height:auto}
.links{position:relative;display:flex;align-items:center;gap:0;margin-inline:auto;isolation:isolate}
.links a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:40px;padding:0 13px;white-space:nowrap;border-radius:var(--r-pill);font:500 14px/1 var(--font);color:var(--fg2);text-decoration:none;transition:color .2s var(--ease)}
.links a.on{color:var(--fg)}
@media (hover:hover) and (pointer:fine){.links a:hover{color:var(--fg)}}
.links .seg-thumb{top:10px;bottom:10px;left:0}
.tools{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.links+.tools{margin-left:0}
.menu{display:none}
/* Bis 1240 px wandern die Links ins Menü: so bleibt neben dem Wappen immer Platz für den Schriftzug */
@media (max-width:1240px){
  .menu{display:inline-grid}
  .links+.tools{margin-left:auto}
  .links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:var(--r-lg);
    /* in der Glas-Kapsel greift kein zweiter Backdrop-Blur (Backdrop-Root), daher dicht */
    background:var(--sheen),var(--bg2);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-3);margin:0;
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:50% 0;transition:opacity .2s var(--ease),transform .3s var(--spring),visibility .2s}
  .nav.open .links{opacity:1;visibility:visible;transform:none}
  .links a{min-height:50px;padding:0 18px;font-size:17px;border-radius:16px}
  .links a.on{background:var(--fill)}
  .links .seg-thumb{display:none}
}
@media (max-width:900px){.cta-nav{display:none}}
/* Handy: die Kapsel verwandelt sich nach dem ersten Scrollen (.nav.is-compact, site.js).
   Oben trägt sie Wappen und Schriftzug, Sprache und Erscheinungsbild liegen im Menü (.lx-set).
   Danach tritt der Schriftzug ins Wappen zurück (Deckkraft, Weichzeichnung, kurzer Weg nach links), und beide
   Umschalter gleiten vom Menüknopf her in die Kapsel (Feder, gestaffelt). Zurück am Seitenanfang kehrt sich das um.
   Nichts schwebt über dem Inhalt; die Kapsel ist fixiert, der Seiteninhalt verschiebt sich nicht.
   Der Schriftzug hat eine feste, aus der Kapselbreite berechnete Breite (Container-Einheiten): Er wird nie
   gestaucht, wenn die Umschalter Platz brauchen, sondern liegt unsichtbar unter ihnen. */
@media (max-width:640px){
  .nav-in{padding-left:16px;gap:6px;container-type:inline-size}
  .brand{gap:10px}
  /* Breite = Inhalt der Kapsel − Wappen 22 − Abstand 10 − Lücke 6 − Menüknopf 44 */
  .brand .logo-word{flex:none;width:min(311px,calc(100cqw - 82px));transform-origin:0 50%;
    transition:opacity .3s var(--ease) .08s,transform .55s var(--spring) .04s,filter .32s var(--ease) .06s,visibility 0s}
  .nav.is-compact .brand .logo-word{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-12px) scale(.96);filter:blur(4px);
    transition:opacity .16s var(--ease),transform .36s var(--ease),filter .2s var(--ease),visibility 0s linear .36s}
  .tools{gap:4px}
  .tools>.seg{opacity:0;visibility:hidden;transform:translateX(14px) scale(.9);transform-origin:100% 50%;filter:blur(6px);
    transition:opacity .14s var(--ease),transform .3s var(--ease),filter .18s var(--ease),visibility 0s linear .3s}
  .nav.is-compact .tools>.seg{opacity:1;visibility:visible;transform:none;filter:none;
    transition:opacity .26s var(--ease) var(--qd,0s),transform .6s var(--spring) var(--qd,0s),filter .34s var(--ease) var(--qd,0s),visibility 0s}
  /* vom Menüknopf aus: erst das Erscheinungsbild, dann die Sprache */
  .nav.is-compact .tools>#langSeg{--qd:.05s}
}
@media (max-width:359px){.tools>.seg-sm button{padding:0 9px}.tools>.seg-ico button{width:36px}}
@media (max-width:480px){.progress{left:22px;right:22px}}

/* ---------- Hero: Kennfeld wie in der Applikationssoftware ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;padding-top:calc(env(safe-area-inset-top,0px) + clamp(116px,10.5vw,148px));padding-bottom:clamp(40px,5vw,72px)}
/* Studio: Punktmatrix wie bei Nothing, weich ausgeblendet; dazu der sanfte Lichtkegel hinter dem Kennfeld */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 68% 64%,#000 10%,transparent 72%);mask-image:radial-gradient(70% 60% at 68% 64%,#000 10%,transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(42% 52% at 70% 56%,var(--studio),transparent 74%)}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head head" "copy stage" "hud stage";grid-template-rows:auto auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:start}
/* nur so breit wie der Text: die nach oben gezogene Bühne (Ansichten-Tabs) bleibt anklickbar */
.hero-head{grid-area:head;position:relative;z-index:2;justify-self:start;max-width:100%}
.hero-k{color:var(--fg2);margin-bottom:clamp(20px,2vw,28px)}
.sig{width:7px;height:7px;flex:none;border-radius:50%;background:var(--sig)}
.hero-h .l1,.hero-h .l2{display:block}
.hero-h .l2{color:var(--mut)}
.hero-copy{grid-area:copy;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-top:clamp(20px,2.2vw,36px);max-width:440px}
.hero-copy .lead{color:var(--fg2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
/* Bühne läuft rechts bis an den Fensterrand; oben die Ansichten-Tabs wie in der Software */
.hero-stage{grid-area:stage;position:relative;z-index:1;display:flex;flex-direction:column;margin-top:clamp(-150px,-8vw,-24px);margin-right:calc(-1 * (clamp(0px,(100vw - var(--wrap)) / 2,240px) + var(--gut)))}
.hv-bar{position:relative;z-index:3;display:flex;justify-content:flex-end;padding-right:max(4%,var(--gut))}
.hv-area{position:relative;height:clamp(400px,40vw,620px);container-type:inline-size}
.hv{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .24s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.hv.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hv:focus-visible{outline-offset:-2px;border-radius:var(--r-lg)}
/* Leinwand der 3D-Bühne (WebGPU, Rückfall WebGL2): hero.css */
/* Ersatzzeichnung (gleiche Projektion): erscheint nur, wenn WebGL fehlt oder auf sich warten lässt */
.hero-still{position:absolute;left:4%;top:4%;display:block;width:92%;height:92%;max-width:none;opacity:0;animation:still-in .6s var(--ease) 1.2s both;transition:opacity .3s var(--ease)}
@keyframes still-in{to{opacity:1}}
.hero.is-gl .hero-still{animation:none;opacity:0}
.hero.nogl .hero-still{animation:none;opacity:1}
.hero-still path{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hs-f{fill:none;stroke:var(--hair2);stroke-width:1}
.hs-d{fill:none;stroke:var(--hair);stroke-width:1;stroke-dasharray:3 4}
.hero-still [class^="hs-q"]{stroke:var(--map-net);stroke-width:.7}
.hs-q0{fill:var(--map-0)}.hs-q2{fill:var(--map-1)}.hs-q4{fill:var(--map-2)}.hs-q6{fill:var(--map-3)}.hs-q8{fill:var(--map-4)}.hs-q10{fill:var(--map-5)}
.hs-q1{fill:color-mix(in oklab,var(--map-0),var(--map-1))}.hs-q3{fill:color-mix(in oklab,var(--map-1),var(--map-2))}.hs-q5{fill:color-mix(in oklab,var(--map-2),var(--map-3))}
.hs-q7{fill:color-mix(in oklab,var(--map-3),var(--map-4))}.hs-q9{fill:color-mix(in oklab,var(--map-4),var(--map-5))}
.hs-op{fill:var(--fg)}
/* Achsen: Ticks und schräg mitlaufende Titel, Monospace */
.hero-labels{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease) .5s}
.hero.is-gl .hero-labels{opacity:1}
.hl{position:absolute;left:0;top:0;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums;will-change:transform;transition:opacity .2s var(--ease)}
.hl-ax{font-size:10.5px;color:var(--fg2);letter-spacing:.05em}
.hl.is-hid{opacity:0}
/* Mess-Cursor-Hosts (3D und 2D): Finger tasten waagrecht ab, senkrechtes Scrollen bleibt frei */
.hv-3d.is-on,.hv-2d.is-on{touch-action:pan-y pinch-zoom;cursor:crosshair}
/* 2D: Kurvenschar */
.hv-2d{padding:8px max(2%,8px) 0}
.hv-c2{position:relative;width:100%;height:100%}
.hv-svg{display:block;overflow:visible}
.hv-g{stroke:var(--hair2);stroke-width:1;stroke-dasharray:3 4}
.hv-fr{fill:none;stroke:var(--hair2);stroke-width:1}
.hv-tk{font:500 10px var(--mono);fill:var(--mut);font-variant-numeric:tabular-nums}
.hv-ax{font:500 10.5px var(--mono);fill:var(--fg2);letter-spacing:.04em}
.hv-c{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hv-op line{stroke:var(--fg);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.hv-op circle{fill:var(--fg);stroke:var(--bg);stroke-width:2}
/* Tabelle: Text-Ansicht als Heatmap mit tabellarischen Ziffern */
.hv-tab{display:flex;align-items:center;justify-content:center;overflow:auto;padding:4px max(2%,8px);scrollbar-width:thin}
.hv-t{border-collapse:separate;border-spacing:1px;margin:auto;font:500 10.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg2)}
.hv-cap{caption-side:top;text-align:left;padding:0 0 10px;font:500 10px/1.4 var(--mono);letter-spacing:.04em;color:var(--mut)}
.hv-t th{padding:5px 6px;font-weight:500;color:var(--mut);text-align:right;white-space:nowrap}
.hv-t thead th{padding-bottom:7px}
.hv-t tbody th{padding-right:9px}
.hv-t td{min-width:38px;padding:6px 6px;border-radius:3px;text-align:right;white-space:nowrap;transition:background-color .2s var(--ease)}
.hv-t td.is-op{box-shadow:inset 0 0 0 1.5px var(--fg),0 0 0 1px var(--bg)}
@container (max-width:640px){.hv-o{display:none}.hv-t td{min-width:34px;padding:5px 4px}}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* HUD als Liquid-Glass-Widget unter dem Text, die Achsen des Kennfelds bleiben frei */
.hud{grid-area:hud;align-self:start;justify-self:start;z-index:2;width:min(400px,100%);margin:28px 0 0;
  display:flex;flex-direction:column;gap:16px;padding:18px 18px 16px;--g-r:24px}
.hud .label{font-size:10.5px;letter-spacing:.13em}
.hud-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.readout>div{min-width:0;padding-top:12px;border-top:1px solid var(--hair)}
.readout dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readout dd{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.readout b{font-family:var(--dots);font-weight:850;font-size:clamp(28px,2.5vw,34px);line-height:.86;letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.readout small{font:500 10.5px/1 var(--mono);color:var(--mut);white-space:nowrap}
.hud-note{font-size:12.5px;line-height:1.45;color:var(--mut)}
/* Auftritt: die Headline steigt präzise aus ihrer Grundlinie, der Rest folgt ruhig */
.hero-h .l1,.hero-h .l2{animation:h-in .95s var(--ease) both}
.hero-h .l2{animation-delay:.09s}
.hero-copy,.hud{animation:h-fade .8s var(--ease) .32s both}
@keyframes h-in{from{clip-path:inset(0 0 100% 0);transform:translateY(.34em)}to{clip-path:inset(-10% -2% -22% -2%);transform:none}}
@keyframes h-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero.settled .hero-h .l1,.hero.settled .hero-h .l2,.hero.settled .hero-copy,.hero.settled .hud{animation:none}
/* Schmale Desktops: Widget unter den Text, die Bühne läuft über beide Zeilen */
@media (max-width:1100px) and (min-width:901px){
  .hud{justify-self:stretch;width:auto;max-width:440px}
}
@media (max-width:900px){
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 108px)}
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "copy" "hud"}
  .hero-stage{margin:8px calc(-1 * var(--gut)) 0}
  .hv-bar{justify-content:center;padding:0 var(--gut)}
  .hv-area{height:clamp(270px,80vw,480px)}
  .hero-copy{max-width:560px;padding-top:8px;gap:24px}
  .hud{grid-area:hud;align-self:auto;justify-self:stretch;width:auto;margin:28px 0 0}
  .hero::before{-webkit-mask-image:radial-gradient(90% 40% at 50% 46%,#000 10%,transparent 72%);mask-image:radial-gradient(90% 40% at 50% 46%,#000 10%,transparent 72%)}
  .hero::after{background:radial-gradient(70% 30% at 50% 44%,var(--studio),transparent 74%)}
}
@media (max-width:560px){
  .hl{font-size:9px}
  .hl-ax{font-size:9.5px}
  .hero-k{font-size:10px;letter-spacing:.09em;gap:9px}
  .hud{padding:16px 16px 14px}
  .readout{gap:10px}
  .readout b{font-size:27px}
  .ctas .btn{flex:1 1 auto}
}
.motion-reduce .hero:not(.is-gl) .hero-still{opacity:1}
/* Laufband */
.ticker{position:relative;border-block:1px solid var(--line);padding-block:16px}
/* rechts endet die Ausblendung kurz vor dem Pause-Knopf */
.tk-vp{overflow:hidden;--tk-m:linear-gradient(90deg,transparent,#000 10%,#000 calc(100% - var(--gut) - 132px),transparent calc(100% - var(--gut) - 46px));-webkit-mask-image:var(--tk-m);mask-image:var(--tk-m)}
.motion-reduce .tk-vp{--tk-m:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tk{display:flex;width:max-content;animation:tk 60s linear infinite}
.ticker.is-paused .tk{animation-play-state:paused}
/* Pause-Knopf (WCAG 2.2.2): kleine Glaslinse am ausgeblendeten rechten Rand, Ziel 44 px */
.tk-btn{position:absolute;z-index:2;top:50%;right:var(--gut);display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--fg2);
  background:var(--sheen),var(--glass);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-1);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
  transition:color .2s var(--ease),box-shadow .2s var(--ease),transform .32s var(--spring)}
.tk-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.tk-btn .i{grid-area:1/1;width:14px;height:14px;stroke-width:2;transition:opacity .16s var(--ease),transform .2s var(--ease)}
.tk-btn .tk-ir{opacity:0;transform:scale(.6)}
.tk-btn[aria-pressed="true"]{color:var(--fg)}
.tk-btn[aria-pressed="true"] .tk-ip{opacity:0;transform:scale(.6)}
.tk-btn[aria-pressed="true"] .tk-ir{opacity:1;transform:none}
.tk-btn:active{transform:scale(.92);transition-duration:.2s,.2s,.12s}
@media (hover:hover) and (pointer:fine){.tk-btn:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair2),inset 0 1px 0 var(--edge-hi),var(--sh-2)}}
.motion-reduce .tk-btn{display:none}
.tk span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--mut);white-space:nowrap}
.tk span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line2)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- Sektionen ---------- */
.sec{position:relative;padding-block:var(--sec-y)}
.sec-alt{background:var(--bg2);border-block:1px solid var(--line)}
.sh{display:flex;flex-direction:column;gap:var(--sh-gap);margin-bottom:var(--sh-mb);max-width:860px}
.sh .kicker{margin:0}
.sh.center{align-items:center;text-align:center;margin-inline:auto}
.sh.center .kicker{justify-content:center}

/* Inhaltskarte (Glas, dicht) */
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:var(--pad);border-radius:var(--r-lg);min-width:0;
  background:var(--sheen),var(--glass2);box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{position:relative;grid-column:span 6;display:flex;flex-direction:column;gap:14px;padding:28px 28px 0;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);color:inherit;text-decoration:none;overflow:hidden;isolation:isolate;min-width:0;box-shadow:inset 0 1px 0 var(--hl);transition:border-color .3s var(--ease),transform .4s var(--ease)}
.tile.w7{grid-column:span 7}.tile.w5{grid-column:span 5}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),var(--acc-soft),transparent 65%)}
.tile:active{transform:scale(.99)}
.tile:focus-visible{border-color:var(--acc-line)}
/* Illustrationen ruhen; sie erklären sich erst, wenn man auf die Kachel zeigt */
.tile .pist,.tile .a-spray,.tile .a-pulse,.tile .gears rect.on{animation-play-state:paused}
.tile:focus-visible .pist,.tile:focus-visible .a-spray,.tile:focus-visible .a-pulse,.tile:focus-visible .gears rect.on{animation-play-state:running}
@media (hover:hover) and (pointer:fine){
  .tile:hover{border-color:var(--acc-line)}
  .tile:hover::before{opacity:1}
  .tile:hover .pist,.tile:hover .a-spray,.tile:hover .a-pulse,.tile:hover .gears rect.on{animation-play-state:running}
}
.tile h3{font-size:clamp(26px,2.8vw,38px);font-stretch:110%;letter-spacing:-.03em}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.t-top .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{color:var(--faint);transition:transform .2s var(--ease),color .2s ease}
@media (hover:hover) and (pointer:fine){.tile:hover .go{color:var(--acc);transform:translateX(3px)}}
.t-p{color:var(--fg2);max-width:46ch}
.art{margin-top:auto;padding-block:18px 0;display:flex;justify-content:center}
.art svg{width:100%;max-height:220px;overflow:visible}
@media (max-width:900px){.tile,.tile.w7,.tile.w5{grid-column:1/-1}}

/* SVG-Illustrationen */
.a-plate{fill:var(--surface2);stroke:var(--line2)}
.a-line{fill:none;stroke:var(--line2);stroke-width:1.2}
.a-tick{fill:none;stroke:var(--faint);stroke-width:1.4}
.a-chip{fill:var(--surface3);stroke:var(--fg2);stroke-width:1.2}
.a-trace{fill:none;stroke:var(--faint);stroke-width:1.2;stroke-linejoin:round}
.a-pulse{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:16 400;stroke-dashoffset:416;animation:pulse 3.4s linear infinite}
.a-pulse.p2{animation-delay:-1.2s}.a-pulse.p3{animation-delay:-2.3s;animation-duration:2.6s}
@keyframes pulse{to{stroke-dashoffset:0}}
.a-tx{font:600 13px var(--mono);fill:var(--fg);letter-spacing:.08em}
.a-tx2{font:500 10px var(--mono);fill:var(--mut);letter-spacing:.1em}
.a-head{fill:var(--surface3);stroke:var(--line2)}
.a-liner{fill:var(--bg2);stroke:var(--line2);stroke-width:1.2}
.pist{fill:var(--surface3);stroke:var(--fg2);stroke-width:1.2;animation:pist .9s cubic-bezier(.45,0,.55,1) infinite alternate}
.e6 .pist{animation-name:pist6}
@keyframes pist{to{transform:translateY(80px)}}
@keyframes pist6{to{transform:translateY(82px)}}
.a-spray{fill:var(--acc);opacity:0;animation:fire 3.6s linear infinite}
@keyframes fire{0%{opacity:.95}12%{opacity:0}100%{opacity:0}}
/* R4, Zündfolge 1-3-4-2 */
.e4 .c2 .pist,.e4 .c3 .pist{animation-delay:-.9s}
.e4 .c3 .a-spray{animation-delay:-2.7s}.e4 .c4 .a-spray{animation-delay:-1.8s}.e4 .c2 .a-spray{animation-delay:-.9s}
/* R6, Zündfolge 1-5-3-6-2-4 */
.e6 .k2 .pist,.e6 .k5 .pist{animation-delay:-1.2s}
.e6 .k3 .pist,.e6 .k4 .pist{animation-delay:-.6s}
.e6 .k5 .a-spray{animation-delay:-3s}.e6 .k3 .a-spray{animation-delay:-2.4s}.e6 .k6 .a-spray{animation-delay:-1.8s}.e6 .k2 .a-spray{animation-delay:-1.2s}.e6 .k4 .a-spray{animation-delay:-.6s}
.gears rect{fill:var(--surface2);stroke:var(--line2);stroke-width:1.2}
.gears rect.on{fill:var(--acc);stroke:none;opacity:0;animation:gear 8s linear infinite}
.gears .gb:nth-child(2) .on{animation-delay:1s}.gears .gb:nth-child(3) .on{animation-delay:2s}.gears .gb:nth-child(4) .on{animation-delay:3s}
.gears .gb:nth-child(5) .on{animation-delay:4s}.gears .gb:nth-child(6) .on{animation-delay:5s}.gears .gb:nth-child(7) .on{animation-delay:6s}.gears .gb:nth-child(8) .on{animation-delay:7s}
@keyframes gear{0%,11%{opacity:.85}13.5%,100%{opacity:0}}
.gears text{font:500 11px var(--mono);fill:var(--mut);text-anchor:middle}

/* Software */
.sw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.steps-l{margin-bottom:8px}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:28px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.sn{font:500 12px/1.9 var(--mono);color:var(--acc);letter-spacing:.08em}
.steps h3{margin-bottom:8px}
.steps p{color:var(--fg2)}
/* Panels im Glasmaterial: .monitor .lv .ci .ct-form .hours (Glanzkante über ::before, siehe .glass) */
.monitor{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px;padding:var(--pad);border-radius:var(--r-xl);
  background:var(--sheen),var(--glass2);box-shadow:var(--sh-3),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.m-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.m-p{font-size:14.5px;color:var(--fg2)}
.m-rel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 16px;padding:18px;border-radius:var(--r);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.m-rel .label{grid-column:1/-1}
.m-rel b{font-size:clamp(40px,4.4vw,58px);color:var(--fg);white-space:nowrap}
.m-state{font:500 12px/1.4 var(--mono);color:var(--mut);text-align:right;justify-self:end;max-width:24ch}
.m-rel[data-state="ok"] b{color:var(--acc)}
.m-rel[data-state="red"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 50%,transparent);background:var(--warn-soft)}
.m-rel[data-state="red"] b,.m-rel[data-state="red"] .m-state{color:var(--warn)}
.m-rows{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--hair)}
.mrow:last-child{border-bottom:0}
.ml{font-size:14px;color:var(--fg2);min-width:0}
.mv{font:500 12.5px/1.6 var(--mono);color:var(--mut);white-space:nowrap}
.mv b{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.mb{grid-column:1/-1;position:relative;height:4px;border-radius:4px;background:var(--fill2)}
.mf{position:absolute;inset:0 auto 0 0;width:100%;border-radius:4px;background:var(--fg2);transform-origin:0 50%;transform:scaleX(var(--v,0));transition:transform .15s linear,background-color .3s}
.mt{position:absolute;top:-4px;bottom:-4px;left:calc(var(--t) * 100%);width:1.5px;background:var(--mut)}
.mrow.lim .mf{background:var(--warn)}
.mrow.lim .mv b,.mrow.lim .ml{color:var(--warn)}
.m-act{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{position:relative;min-height:36px;padding:0 15px;border-radius:var(--r-pill);border:0;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg2);font:500 13px/1 var(--font);cursor:pointer;transition:box-shadow .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.chip-btn::after{content:"";position:absolute;inset:-4px 0}
.chip-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.chip-btn:hover{box-shadow:inset 0 0 0 1px var(--acc-line);color:var(--fg)}}
.m-note{font-size:12.5px;color:var(--mut)}
@media (max-width:900px){.sw-grid{grid-template-columns:minmax(0,1fr)}.monitor{position:relative;top:0}}

/* Tabs */
.tabs{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.tp{animation:tpin .22s var(--ease)}
@keyframes tpin{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lv{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:var(--r-lg);min-width:0;
  background:var(--sheen),var(--glass);box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.lv h3{font-size:clamp(24px,2.4vw,32px);font-stretch:110%;letter-spacing:-.03em}
.lv p{color:var(--fg2)}
.lv-bar{display:flex;gap:4px;margin-bottom:6px}
.lv-bar i{flex:1;height:4px;border-radius:4px;background:var(--fill2)}
.lv-bar[style*="--n:1"] i:nth-child(-n+1),.lv-bar[style*="--n:2"] i:nth-child(-n+2),.lv-bar[style*="--n:3"] i{background:var(--acc)}
.ecu-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px;padding:18px 0;border-block:1px solid var(--line)}
.codes{font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--fg)}
.ecu-line .lnk{margin-left:auto}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.split-t{display:flex;flex-direction:column;gap:16px}
.split-t>p{color:var(--fg2);font-size:17px}
.box{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r);border:1px solid var(--acc-line);background:var(--acc-soft)}
.box p:last-child{color:var(--fg)}
.tree{margin:0;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:20px 20px}
.tree svg{display:block;width:100%;height:auto}
.tr-l{fill:none;stroke:var(--line2);stroke-width:1.3}
.tr-n{fill:var(--surface3);stroke:var(--acc-line)}
.tr-e{fill:var(--surface);stroke:var(--line2)}
.tr-t{font:700 15px var(--font);fill:var(--fg)}
.tr-s{font:500 10px var(--mono);letter-spacing:.1em;fill:var(--mut)}
.tr-c{font:600 13px var(--mono);letter-spacing:.06em;fill:var(--fg)}
.tr-d{fill:var(--acc)}
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.points li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.points li:first-child{border-top:1px solid var(--line)}
.points .i{color:var(--acc);margin-top:3px}
.points div{display:flex;flex-direction:column;gap:4px}
.points span{color:var(--fg2)}
.fact{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--fg)}
.big-fig{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(80% 90% at 20% 0%,var(--acc-soft),transparent 70%),var(--surface)}
.big-fig b{font-size:clamp(72px,10vw,132px);color:var(--acc)}
.big-fig span:last-child{color:var(--fg2);max-width:30ch}
@media (max-width:900px){.ladder{grid-template-columns:minmax(0,1fr)}.split{grid-template-columns:minmax(0,1fr)}.ecu-line .lnk{margin-left:0}}

/* BMW */
.gens{list-style:none;margin:0 0 clamp(48px,6vw,72px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.gens::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,var(--line2),var(--acc-line),var(--line2))}
.gen{position:relative;display:flex;flex-direction:column;gap:14px;padding:32px 24px 0 0;min-width:0}
.g-dot{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--acc);box-shadow:0 0 0 4px var(--bg2)}
.g-l{font-size:clamp(64px,8vw,104px);color:var(--fg)}
.g-eng{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.g-eng li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);max-width:260px}
.g-eng b{font:650 20px/1 var(--font);font-stretch:110%;letter-spacing:-.01em}
.g-eng span{font:500 11px/1 var(--mono);color:var(--mut);letter-spacing:.1em}
.g-ecu{font:500 12px/1.4 var(--mono);color:var(--acc);letter-spacing:.04em}
.bmw-grid{display:block;margin-bottom:clamp(48px,6vw,80px)}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
@media (max-width:760px){.svc{grid-template-columns:minmax(0,1fr);gap:40px}}
.svc-g ul{list-style:none;margin:12px 0 0;padding:0}
.svc-g li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.svc-g li:first-child{border-top:1px solid var(--line)}
.svc-g b{font:640 18px/1.25 var(--font);font-stretch:104%}
.svc-g span{color:var(--fg2);font-size:15px}
@media (max-width:900px){.bmw-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.gens{grid-template-columns:minmax(0,1fr);gap:8px}.gens::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--line2),var(--acc-line),var(--line2))}.gen{padding:0 0 24px 32px}.g-l{font-size:56px}}

/* Preise */
.tblwrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.matrix{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.matrix th,.matrix td{padding:22px 20px;text-align:right;border-bottom:1px solid var(--line);border-left:1px solid var(--line);transition:background-color .2s,box-shadow .2s}
.matrix tr>*:first-child{border-left:0;text-align:left}
.matrix tbody tr:last-child>*{border-bottom:0}
.matrix thead th{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);background:var(--surface2);padding-block:14px}
.matrix tbody th{font:650 18px/1 var(--font);font-stretch:110%;letter-spacing:-.01em;color:var(--fg)}
.matrix td{font:600 17px/1 var(--mono);color:var(--fg);background:color-mix(in srgb,var(--acc) calc(var(--i,0) * 22%),transparent)}
.matrix td.na{color:var(--faint);font-weight:400;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hatch) 6px 7px)}
.matrix .hx,.matrix .hy{box-shadow:inset 0 0 0 9999px var(--acc-soft)}
.matrix td.hx.hy{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 9999px var(--acc-soft)}
.tbl-note{margin-top:16px;font-size:13.5px;color:var(--mut)}
.plist{list-style:none;margin:0;padding:0;max-width:760px}
.plist li{display:flex;align-items:baseline;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.plist li:first-child{border-top:1px solid var(--line)}
.plist span{font:620 clamp(17px,1.6vw,20px)/1.3 var(--font);font-stretch:104%;min-width:0}
.plist i{flex:1;min-width:24px;border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.plist b{font:600 17px/1 var(--mono);white-space:nowrap}
.plist-h{margin-bottom:14px}
.plist-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.pr-cta{margin-top:48px}
@media (max-width:760px){.plist-2{grid-template-columns:minmax(0,1fr)}}

/* Über uns */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.about-l{display:flex;flex-direction:column;gap:48px}
.about-r{display:flex;flex-direction:column;gap:24px}
.about-r>p:not(.lead){color:var(--fg2)}
/* Kennzahlen (früher im Hero, jetzt in Über uns) */
.stats{list-style:none;margin:8px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stats li{display:flex;flex-direction:column;gap:12px;min-width:0}
.stats b{font-size:clamp(36px,4.2vw,54px);color:var(--fg)}
.stats span{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.values{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.values li{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:1px solid var(--line)}
.values b{font:640 17px/1.3 var(--font)}
.values span{color:var(--fg2);font-size:15px}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.values{grid-template-columns:minmax(0,1fr)}}

/* Kontakt */
.ct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:start}
.ct-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.ci{position:relative;display:flex;align-items:center;gap:16px;padding:18px 18px 18px 20px;border-radius:var(--r-lg);min-width:0;
  background:var(--sheen),var(--glass);box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.ci-i{color:var(--acc)}
.ci-b{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ci-v{font:600 16px/1.35 var(--font);color:var(--fg);text-decoration:none;overflow-wrap:anywhere;user-select:all}
@media (hover:hover) and (pointer:fine){a.ci-v:hover{color:var(--acc)}}
.copy{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:var(--r-pill);border:0;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg2);font:500 12.5px/1 var(--font);cursor:pointer;text-decoration:none;flex:none;transition:box-shadow .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.copy::after{content:"";position:absolute;inset:-4px 0}
.copy:active{transform:scale(.96)}
.copy .i{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){.copy:hover{box-shadow:inset 0 0 0 1px var(--acc-line);color:var(--fg)}}
.copy.done{color:var(--ok);box-shadow:inset 0 0 0 1px currentColor}
.hours{position:relative;padding:18px 20px;border-radius:var(--r-lg);background:var(--sheen),var(--glass);box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.hours-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hours-h .i{color:var(--acc)}
.status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--mono);color:var(--mut);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.status.open{color:var(--ok)}
.status.open::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.hours dl{margin:0}
.hours dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-size:15px}
.hours dt{color:var(--fg2)}
.hours dd{margin:0;font:500 14px/1.6 var(--mono);color:var(--fg)}
.hours dl div.today dt{color:var(--fg);font-weight:600}
.hours dl div.today dt::after{content:" ·";color:var(--acc)}
.loc{height:150px;border-radius:var(--r);background-color:var(--surface);border:1px solid var(--line);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:14px 14px;overflow:hidden}
.loc-pin{position:absolute;left:58%;top:46%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px var(--acc-soft)}
.loc-pin i{position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--acc-line)}
.loc-pin::before,.loc-pin::after{content:"";position:absolute;background:var(--acc-line)}
.loc-pin::before{left:7px;top:-400px;bottom:-400px;width:1px;opacity:.5}
.loc-pin::after{top:7px;left:-900px;right:-900px;height:1px;opacity:.5}
.loc-c{position:absolute;left:14px;bottom:12px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--fg2)}
.loc-n{position:absolute;right:14px;top:12px;font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--mut)}
.ct-form{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.2vw,26px);border-radius:var(--r-xl);min-width:0;
  background:var(--sheen),var(--glass2);box-shadow:var(--sh-3),inset 0 -1px 0 var(--edge-lo);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.f-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Formularfelder im iOS-Stil: gefüllte Flächen, Haarlinie, Fokus als Signalring */
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f>span{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.f input,.f select,.f textarea{width:100%;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:0;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg);font:400 16px/1.4 var(--font);
  transition:box-shadow .2s var(--ease),background-color .2s var(--ease)}
.f textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.f select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 22px) 21px,calc(100% - 17px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f select option{background:var(--surface);color:var(--fg)}
.f input::placeholder,.f textarea::placeholder{color:var(--mut);opacity:.8}
@media (hover:hover) and (pointer:fine){.f input:hover,.f select:hover,.f textarea:hover{box-shadow:inset 0 0 0 1px var(--hair2)}}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;background-color:var(--surface);box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 4px var(--acc-soft)}
.f.err input,.f.err select,.f.err textarea{box-shadow:inset 0 0 0 1.5px var(--warn)}
.consent.err span{color:var(--warn)}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form button[disabled]{opacity:.6;cursor:progress}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--fg2);cursor:pointer}
.consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--acc)}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.f-msg{font-size:14px;color:var(--fg2);flex:1;min-width:200px}
.f-msg.ok{color:var(--ok)}.f-msg.warn{color:var(--warn)}
@media (max-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.f-row2{grid-template-columns:minmax(0,1fr)}.ci{flex-wrap:wrap}.ci .copy{margin-left:34px}}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:56px calc(48px + env(safe-area-inset-bottom,0px))}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--fg)}
.foot .logo-full{width:min(420px,100%)}
.foot-links{display:flex;gap:20px}
.foot-links a{color:var(--fg2);text-decoration:none;font-size:14px;transition:color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{color:var(--fg)}}
.foot-disc,.foot-c{font-size:12.5px;color:var(--mut);max-width:80ch}
.foot-c{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
@media (max-width:640px){.foot-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- Typo-Inszenierung (site.js schaltet scharf, nur bei voller Bewegung) ----------
   Ruhezustand ist immer der Endzustand: ohne Skript oder mit .motion-reduce steht alles sofort. */
.h .tl{display:block}
.h .tl-i{display:inline-block;vertical-align:top}
.tx-arm .tl-i{clip-path:inset(0 0 100% 0);transform:translateY(.34em)}
.tx-in .tl-i{animation:h-in .95s var(--ease) calc(var(--i,0) * .09s) both}
/* Breitenachse: die Zeile verdichtet sich wie unter Last (Archivo wdth 125 → 108 %) */
.tx-in.tx-wide{animation:tx-wide 1.4s var(--ease) both}
@keyframes tx-wide{from{font-stretch:125%;letter-spacing:-.03em}}
.rv-arm{opacity:0;translate:0 22px}
.rv-in{animation:rv-in .9s var(--ease) var(--d,0s) both}
@keyframes rv-in{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}

/* Fortschrittslinie direkt an die Scrollposition gekoppelt, wo der Browser es kann */
@supports (animation-timeline:scroll()){
  .progress i{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- Schalter „Bewegung reduzieren“ (Menüblatt und Footer) ---------- */
.msw{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0;border:0;background:none;color:var(--fg2);font:500 14px/1.25 var(--font);text-align:left;cursor:pointer;border-radius:12px}
.msw-t{position:relative;flex:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--fill2);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.msw-t i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#f4f6f9;box-shadow:0 1px 2px rgba(0,0,0,.3),0 3px 8px -2px rgba(0,0,0,.35);transition:transform .32s var(--spring)}
.msw[aria-checked="true"] .msw-t{background:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.msw[aria-checked="true"] .msw-t i{transform:translateX(18px)}
.msw:active .msw-t i{scale:1.06}
@media (hover:hover) and (pointer:fine){.msw:hover{color:var(--fg)}.msw:hover .msw-t{box-shadow:inset 0 0 0 1px var(--hair2)}}
.links-x{display:none}
@media (max-width:1240px){
  .links-x{display:block;margin:6px 0 2px;padding:6px 18px 0;border-top:1px solid var(--hair)}
  .links-x .msw{display:flex;width:100%;justify-content:space-between;min-height:50px;font-size:15px}
}
.lx-set{display:none}
@media (max-width:640px){.lx-set{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 4px}.lx-set:empty{display:none}}
.foot-msw{order:-1;flex:1 1 100%;justify-content:flex-start;font-size:13.5px}

/* ---------- Mess-Cursor (site.js FS.probe) ----------
   Haarlinien und Punkt im Host, Tooltip als Liquid-Glass-Pille, verankert am Punkt. */
.mc{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .14s var(--ease);--mc-ln:color-mix(in srgb,var(--fg) 58%,transparent)}
.mc.is-on{opacity:1}
.mc-x,.mc-y{position:absolute;left:0;top:0;display:block}
.mc-x{width:1px;margin-left:-.5px;background:repeating-linear-gradient(180deg,var(--mc-ln) 0 3px,transparent 3px 6px)}
.mc-y{height:1px;margin-top:-.5px;background:repeating-linear-gradient(90deg,var(--mc-ln) 0 3px,transparent 3px 6px)}
.mc.no-lines .mc-x,.mc.no-lines .mc-y{display:none}
.mc-d{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%}
.mc-d1{background:var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--acc)}
.mc-d2{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg2)}
.mc-tip{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:5px;min-width:132px;padding:10px 13px 11px;border-radius:14px;white-space:nowrap;
  background:var(--sheen),color-mix(in srgb,var(--glass2) 94%,transparent);
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-2);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.mc.is-anchor .mc-tip{inset:auto;position-area:top right;margin:0 0 12px 12px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}
.mc.no-tip .mc-tip{display:none}
.mc-k{font:500 10px/1.3 var(--mono);letter-spacing:.06em;color:var(--mut);font-variant-numeric:tabular-nums}
.mc-v{display:flex;align-items:baseline;gap:7px}
.mc-v b{font:850 24px/.9 var(--dots);letter-spacing:.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.mc-v small{font:500 11px/1 var(--mono);color:var(--fg2)}
.mc-s{font:500 11px/1.35 var(--mono);color:var(--mut);font-variant-numeric:tabular-nums}
.mc-s .mc-up{font-weight:600;color:var(--acc)}
.mc-s .mc-n{color:var(--fg2)}
.mc-s[hidden]{display:none}

/* ---------- View Transitions (nur volle Bewegung, site.js) ---------- */
/* Studiolicht an: der neue Zustand öffnet sich als Kreis ab dem Schalter (Clip-Animation per Skript) */
:root.vt-theme::view-transition-old(root),:root.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-theme::view-transition-new(root){z-index:2}
/* Sprache: eine weiche Überblendung der ganzen Seite */
:root.vt-lang::view-transition-old(root),:root.vt-lang::view-transition-new(root){animation-duration:.26s;animation-timing-function:var(--ease)}
/* Hero-Ansichten: nur die Bühne verwandelt sich, der Rest steht */
:root.vt-hv .hv-area{view-transition-name:fs-hv}
:root.vt-hv .hv{transition:none}
:root.vt-hv::view-transition-old(root),:root.vt-hv::view-transition-new(root){animation:none}
:root.vt-hv::view-transition-group(fs-hv){animation-duration:.42s;animation-timing-function:var(--ease)}
:root.vt-hv::view-transition-old(fs-hv){animation:vt-hv-out .3s var(--ease) both}
:root.vt-hv::view-transition-new(fs-hv){animation:vt-hv-in .42s var(--ease) both}
@keyframes vt-hv-out{to{opacity:0;transform:scale(1.025);filter:blur(6px)}}
@keyframes vt-hv-in{from{opacity:0;transform:scale(.975);filter:blur(8px)}}

/* ---------- Weniger Bewegung: Klasse .motion-reduce am Root ----------
   Gesetzt aus der Systemeinstellung oder dem Schalter (Menü, Footer). Keine Positionsbewegung,
   Farb- und Deckkraftwechsel bleiben. */
:root.motion-reduce{scroll-behavior:auto}
.motion-reduce *,.motion-reduce *::before,.motion-reduce *::after{animation:none!important;transition-property:color,background-color,border-color,opacity,box-shadow!important}
.motion-reduce .a-spray,.motion-reduce .gears rect.on{opacity:0}
.motion-reduce .seg-thumb i,.motion-reduce .seg-thumb b{transition:none}

/* ---------- Rendern erst in der Nähe des Viewports (weiter unten liegende Abschnitte) ---------- */
#vag,#bmw,#preise,#ueber,#kontakt,.foot{content-visibility:auto}
/* Schätzwerte (gemessen bei 1440 bzw. 375 px Breite); „auto“ merkt sich danach die echte Höhe */
#vag{contain-intrinsic-size:auto 780px}
#bmw{contain-intrinsic-size:auto 1680px}
#preise{contain-intrinsic-size:auto 1050px}
#ueber{contain-intrinsic-size:auto 720px}
#kontakt{contain-intrinsic-size:auto 1070px}
.foot{contain-intrinsic-size:auto 720px}
@media (max-width:760px){
  #vag{contain-intrinsic-size:auto 910px}
  #bmw{contain-intrinsic-size:auto 2520px}
  #preise{contain-intrinsic-size:auto 920px}
  #ueber{contain-intrinsic-size:auto 1320px}
  #kontakt{contain-intrinsic-size:auto 1760px}
  .foot{contain-intrinsic-size:auto 720px}
}
@media (forced-colors:active){
  .seg-thumb{display:none}
  .seg button[aria-pressed="true"],.seg button[aria-selected="true"]{outline:2px solid Highlight}
  .glass::before,.card::before,.monitor::before,.lv::before,.ci::before,.ct-form::before,.hours::before{display:none}
}