/* =====================================================================
   FS Automotive Engineering · Abschnitte 2026 (sx-)
   Bereiche, Bauteilschutz, Software, VAG, BMW (Leistungen, Generationen), Preise, Über uns,
   Kontakt, Footer und Laufband. Wird nach allen anderen Stylesheets geladen und
   überschreibt site.css nur mit Bereichs-Präfix (#bereiche, #bauteilschutz, #software, …).
   Material und Tokens aus dem Design-System in site.css („Precision Noir“):
   --sheen --glass --glass2 --rim --edge* --hair --fill* --sh-* --r-* --spring.
   Animiert werden nur transform, scale, opacity, clip-path und filter.
   ===================================================================== */
:root{
  --sx-screen:rgba(3,5,8,.55);
  --sx-tick:rgba(214,226,255,.13);
  --sx-tile:linear-gradient(180deg,#101318 0%,#0a0c10 100%);
  --sx-amber:var(--j-amber,#ffb454);
}
:root[data-theme="light"]{
  --sx-screen:rgba(232,235,240,.75);
  --sx-tick:rgba(12,18,30,.13);
  --sx-tile:linear-gradient(180deg,#ffffff 0%,#eef0f3 100%);
  --sx-amber:var(--j-amber,#c96f00);
}

/* Glasflächen dieser Abschnitte: Glanz (--sheen) über Glas, Verlaufsrand (--rim) im ::after */
#vag .ecu-line,#vag .box,#vag .tree,#vag .points,#vag .big-fig,
#bmw .gen,#bmw .svc-g,#preise .mx-card,#preise .plist-card,#ueber .values li,
#kontakt .ci-group,#kontakt .loc,#bereiche .tile{
  position:relative;border:0;
  background:var(--sheen),var(--glass);
  box-shadow:var(--sh-2),inset 0 -1px 0 var(--edge-lo)}
#vag .ecu-line::after,#vag .box::after,#vag .tree::after,#vag .points::after,#vag .big-fig::after,
#bmw .gen::after,#bmw .svc-g::after,#preise .mx-card::after,#preise .plist-card::after,#ueber .values li::after,
#kontakt .ci-group::after,#kontakt .loc::after,#bereiche .tile::after{
  content:"";position:absolute;inset:0;z-index:4;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}

/* =====================================================================
   Laufband: Punktmatrix-Codes
   ===================================================================== */
.ticker{padding-block:20px;background:var(--bg)}
.ticker .tk{animation-duration:240s}
.ticker.is-off .tk{animation-play-state:paused}
.ticker .tk span{gap:30px;padding-right:30px;font:800 21px/1 var(--dots);letter-spacing:.03em;color:var(--fg2)}
.ticker .tk span::after{width:4px;height:4px;border-radius:1px;background:var(--line2)}
.ticker .tk .tk-g{gap:0;margin-right:30px;padding:0 11px;height:26px;border-radius:var(--r-pill);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ticker .tk .tk-g::after{display:none}
@media (hover:hover) and (pointer:fine){.ticker:hover .tk{animation-play-state:paused}}

/* =====================================================================
   Bereiche: Produkt-Kacheln
   ===================================================================== */
.bx-defs{position:absolute;width:0;height:0;overflow:hidden}
#bereiche .bento{gap:var(--gap)}
/* Raster 2026-10: Kacheln rund 30 % flacher, die Szene rund 40 % kleiner; --tp ist der Innenabstand */
#bereiche .tile{--tp:clamp(18px,1.9vw,26px);display:flex;flex-direction:column;gap:10px;min-height:clamp(330px,27vw,390px);padding:var(--tp);border-radius:var(--r-xl);
  background:var(--sheen),var(--sx-tile);transition:scale .32s var(--spring),box-shadow .3s var(--ease)}
#bereiche .tile::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.05),transparent 62%)}
:root[data-theme="light"] #bereiche .tile::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),transparent 62%)}
#bereiche .tile:active{scale:.97;transition-duration:.12s,.3s;transition-timing-function:var(--ease)}
#bereiche .tile:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.bx-tx{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;order:1;min-width:0}
#bereiche .tile h3{font:700 clamp(24px,2.2vw,32px)/1.02 var(--font);font-stretch:112%;letter-spacing:-.035em;color:var(--fg)}
#bereiche .t-p{font-size:var(--t-p);line-height:1.5;color:var(--fg2);max-width:42ch}
#bereiche .t-top{min-height:32px}
.bx-go{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--fg2);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--edge-hi);
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.bx-go .i{width:15px;height:15px;transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  #bereiche .tile:hover{box-shadow:var(--sh-3),inset 0 -1px 0 var(--edge-lo)}
  #bereiche .tile:hover .bx-go{background:var(--fg);color:var(--bg)}
  #bereiche .tile:hover .bx-go .i{transform:translateX(2px)}
}
#bereiche .tile .go{display:none}
.bx-art{position:relative;order:2;flex:1 1 auto;min-height:160px;margin:0 calc(var(--tp) * -1) calc(var(--tp) * -1);pointer-events:none}
.bx-cv,.bx-fb{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.bx-cv{opacity:0;transition:opacity .6s var(--ease)}
.bx-fb{transition:opacity .4s var(--ease);padding:8px 16px 0}
.bento.bx-wait .bx-fb{opacity:0}
.bento.bx-gl .bx-cv{opacity:1}
.bento.bx-gl .bx-fb{opacity:0}
/* jede Szene blendet ein, sobald sie steht (Aufbau Kachel für Kachel, sections.js) */
.bento .bx-t.bx-on .bx-cv{opacity:1}
.bento .bx-t.bx-on .bx-fb{opacity:0}
.bx-fbt{font:600 17px var(--mono);fill:#c9d1da;letter-spacing:.14em}
.bx-fbt2{font:500 10px var(--mono);fill:#7f8a96;letter-spacing:.18em}
/* Kennzahl als Glas-Plakette über der Szene */
.bx-spec{position:absolute;z-index:3;left:clamp(12px,1.5vw,18px);bottom:clamp(12px,1.5vw,18px);display:flex;align-items:center;gap:12px;max-width:min(300px,calc(100% - 24px));
  padding:9px 14px 9px 12px;border-radius:var(--r);
  background:var(--sheen),color-mix(in srgb,var(--glass) 75%,transparent);
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bx-spec>b{font-size:34px;line-height:.8;color:var(--fg)}
.bx-spec>span{font:500 12.5px/1.3 var(--font);color:var(--fg2);max-width:24ch}
/* INEOS: Studio-Foto, in beiden Themen dunkel */
#bereiche .bx-ix{--fg:#f4f5f7;--fg2:#c3c9d2;--mut:#9aa1ac;--hair:rgba(214,226,255,.12);--edge:rgba(214,226,255,.12);--edge-hi:rgba(255,255,255,.18);
  --rim:linear-gradient(158deg,rgba(255,255,255,.3),rgba(255,255,255,.07) 24%,rgba(255,255,255,.03) 56%,rgba(255,255,255,.1));
  --fill:rgba(126,138,162,.16);--glass:rgba(18,21,27,.5);--sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 44%);
  background:#050506;color:var(--fg)}
#bereiche .bx-ix::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.05),transparent 62%)}
#bereiche .bx-ix .t-p{max-width:30ch}
#bereiche .bx-ix .label{color:#9aa1ac}
.bx-photo{position:absolute;inset:0 0 0 auto;width:62%;margin:0;min-height:0;order:0}
.bx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  transition:scale .6s var(--ease)}
@media (hover:hover) and (pointer:fine){#bereiche .bx-ix:hover .bx-photo img{scale:1.03}}
.bx-spec2{gap:0;padding:9px 4px}
.bx-spec2>div{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:5px;row-gap:5px;padding:0 12px}
.bx-spec2>div+div{box-shadow:-1px 0 0 var(--hair)}
.bx-up{grid-column:1/-1;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bx-spec2 b{font-size:30px;line-height:.8;color:var(--fg)}
.bx-spec2 small{font:600 12px/1 var(--mono);color:var(--fg2);padding-bottom:1px}
.bx-cap{grid-column:1/-1;font:500 12px/1.2 var(--font);color:var(--fg2);white-space:nowrap}
@media (max-width:900px){
  #bereiche .tile{min-height:0}
  .bx-art{min-height:clamp(150px,40vw,200px)}
  .bx-photo{inset:auto 0 0 0;width:100%;height:64%;min-height:0}
  .bx-photo img{object-position:50% 70%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  #bereiche .bx-ix{min-height:clamp(390px,100vw,450px)}
  #bereiche .bx-ix .t-p{max-width:40ch}
}
@media (max-width:420px){
  .bx-spec{gap:10px;padding:8px 12px 8px 11px}
  .bx-spec>b{font-size:30px}
  .bx-spec2 b{font-size:27px}
  .bx-spec2>div{padding:0 10px}
}

/* =====================================================================
   Software: Kopf links (steht beim Scrollen), Ablauf als Zeitleiste rechts
   ===================================================================== */
#software .sw-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
#software .sw-grid>.sh{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);margin-bottom:0}
/* in der halben Spalte etwas kleiner, damit die Zeilen so brechen wie gesetzt (zwei Zeilen) */
@media (min-width:901px){#software .sw-grid .h,#bauteilschutz .sh .h{font-size:clamp(30px,3.4vw,50px)}}
#software .sw-flow{padding-top:6px}
#software .steps-l{margin-bottom:20px}
#software .steps{position:relative;view-timeline:--sxsteps block}
#software .steps::before,#software .steps::after{content:"";position:absolute;left:17.5px;top:18px;bottom:32px;width:1px;border-radius:1px}
#software .steps::before{background:var(--line2)}
#software .steps::after{background:linear-gradient(180deg,var(--acc),var(--acc-line));transform-origin:50% 0;transform:scaleY(1)}
@supports (animation-timeline:view()){
  #software .steps::after{animation:sx-grow linear both;animation-timeline:--sxsteps;animation-range:entry 60% cover 62%}
}
@keyframes sx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#software .steps li{position:relative;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:0 0 28px;border:0;view-timeline:--sxstep block}
#software .steps li:first-child{border:0}
#software .steps li:last-child{padding-bottom:0}
#software .sn{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  font:800 13px/1 var(--dots);letter-spacing:.02em;color:var(--fg);
  background:var(--sheen),var(--bg);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--edge-hi),var(--sh-1)}
#software .sn::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--acc);opacity:1}
@supports (animation-timeline:view()){
  #software .sn::after{opacity:0;animation:sx-on linear both;animation-timeline:--sxstep;animation-range:cover 28% cover 42%}
}
@keyframes sx-on{from{opacity:0}to{opacity:1}}
#software .steps h3{margin:7px 0 6px;font-size:clamp(19px,1.6vw,22px)}
#software .steps p{max-width:46ch;font-size:var(--t-p);line-height:1.55}
@media (max-width:900px){
  #software .sw-grid{grid-template-columns:minmax(0,1fr);gap:0}
  #software .sw-grid>.sh{position:static;margin-bottom:var(--sh-mb)}
  #software .sw-flow{padding-top:0}
}

/* =====================================================================
   Bauteilschutz (#bauteilschutz): Philosophie, Simulation, Schutzgrenzen
   Die nächste Seite nach dem Kennfeld. Desktop: Kopf und Beispiel-Kachel links,
   das Instrument rechts (steht beim Scrollen). Handy: Kopf, Instrument, Kachel.
   ===================================================================== */
#bauteilschutz .bs-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"head mon" "lim mon";grid-template-rows:auto 1fr;
  gap:clamp(28px,3vw,44px) clamp(28px,4vw,64px);align-items:start;position:relative;isolation:isolate}
#bauteilschutz .bs-grid::before{content:"";position:absolute;right:-4%;top:-6%;width:62%;height:72%;pointer-events:none;z-index:-1;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%)}
#bauteilschutz .sh{grid-area:head;margin:0}
#bauteilschutz .monitor{grid-area:mon}
#bauteilschutz .sg-tile{grid-area:lim}
@media (max-width:900px){
  #bauteilschutz .bs-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "mon" "lim";grid-template-rows:auto;gap:28px 0}
  #bauteilschutz .bs-grid::before{display:none}
}

/* Instrument (Glas, Glanzkante und Schatten aus site.css)
   Raster 2026-10: kompakt wie ein Kombiinstrument, damit Anzeige, Messkanäle und Szenarien auf einen
   Bildschirm passen. Ab 561 px links die Anzeige (Rundinstrument, Freigabe, Zustand), rechts die sechs
   Messkanäle, darunter die Szenarien. Handy: untereinander, das Rundinstrument links neben dem Zustand.
   --gz ist die Größe des Rundinstruments, --gzn dieselbe Zahl ohne Einheit (Ziffern in Bildschirm-Pixeln). */
#bauteilschutz .monitor{--gz:124px;--gzn:124;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "rel" "rows" "act" "note";
  align-content:start;gap:12px;top:calc(env(safe-area-inset-top,0px) + 84px);padding:16px 16px 14px;border-radius:var(--r-xl)}
#bauteilschutz .m-h{grid-area:h;justify-content:flex-start;gap:10px;min-height:24px}
.m-live{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
/* Simulations-Chip: pulsiert ganz dezent im Wechsel Weiß und Rot, damit auch Laien das Instrument als
   bedienbar erkennen. Weiß ist im hellen Thema ein weißer Chip. Bei reduzierter Bewegung steht er still
   (weißer Chip mit rotem Signalpunkt; .motion-reduce schaltet alle Animationen ab). */
#bauteilschutz .m-sim{--sim:var(--sig);--sim-bg:var(--fill);--sim-ring:var(--hair2);
  gap:7px;margin-left:auto;padding:0 10px 0 9px;color:var(--fg);background:var(--sim-bg);box-shadow:inset 0 0 0 1px var(--sim-ring);
  animation:m-sim 3.2s var(--ease-io) infinite}
:root[data-theme="light"] #bauteilschutz .m-sim{--sim:#d0101e;--sim-bg:#fff;--sim-ring:rgba(12,18,30,.14)}
#bauteilschutz .m-sim>i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--sim);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--sim) 22%,transparent)}
@keyframes m-sim{
  0%,100%{color:var(--fg);background-color:var(--sim-bg);box-shadow:inset 0 0 0 1px var(--sim-ring),0 0 0 0 transparent}
  50%{color:var(--sim);background-color:color-mix(in srgb,var(--sim) 10%,var(--sim-bg));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sim) 50%,transparent),0 0 14px -4px color-mix(in srgb,var(--sim) 45%,transparent)}
}
#bauteilschutz .m-p{grid-area:p;font-size:14.5px;line-height:1.5;max-width:64ch}
/* Anzeige: dunkles Display mit Rundinstrument, Freigabe und Zustand */
#bauteilschutz .m-rel{grid-area:rel;display:grid;grid-template-columns:var(--gz) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;align-items:start;gap:3px 16px;
  padding:10px 14px 10px 10px;border-radius:var(--r-lg);background:var(--sx-screen);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 3px rgba(0,0,0,.4)}
:root[data-theme="light"] #bauteilschutz .m-rel{box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 3px rgba(10,14,24,.07)}
#bauteilschutz .m-rel-c{display:contents}
.m-gauge{grid-column:1;grid-row:1/-1;width:var(--gz,164px);height:var(--gz,164px);display:block;color:var(--fg2);overflow:visible}
/* Skala: Haarlinien; große Teilstriche etwas kräftiger, Ziffern 10 px auf dem Bildschirm */
.m-ring{fill:none;stroke:var(--sx-tick);stroke-width:calc(240px / var(--gzn,164) * .9)}
.m-t{stroke:var(--sx-tick);stroke-width:calc(240px / var(--gzn,164) * 1.1);stroke-linecap:butt}
.m-tm{stroke:color-mix(in srgb,var(--line2) 60%,var(--sx-tick))}
.m-tM{stroke:var(--line2);stroke-width:calc(240px / var(--gzn,164) * 1.5)}
.m-o{stroke:currentColor;stroke-width:calc(240px / var(--gzn,164) * 1.1);stroke-linecap:butt;opacity:0;transition:opacity .25s var(--ease)}
.m-oM{stroke-width:calc(240px / var(--gzn,164) * 1.5)}
.m-o.is-on{opacity:1}
.m-num{font:500 calc(240px / var(--gzn,164) * 10) var(--mono);fill:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:.02em}
#bauteilschutz .m-rel[data-state="ok"] .m-gauge{color:var(--acc)}
#bauteilschutz .m-rel[data-state="red"] .m-gauge{color:var(--warn)}
#bauteilschutz .m-rel-c>.label{grid-column:2;grid-row:2;margin:0}
#bauteilschutz #mRel{grid-column:1;grid-row:1/-1;place-self:center;font-size:calc(var(--gz) * .16);line-height:1;letter-spacing:.02em;color:var(--fg);white-space:nowrap}
#bauteilschutz .m-state{grid-column:2;grid-row:3;justify-self:start;text-align:left;max-width:none;font:600 16px/1.25 var(--font);font-stretch:104%;color:var(--fg)}
.m-at{grid-column:2;grid-row:4;margin-top:1px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--mut);transition:opacity .25s var(--ease)}
#bauteilschutz .m-rel[data-state="ok"] #mRel{color:var(--acc)}
#bauteilschutz .m-rel[data-state="ok"] .m-at,#bauteilschutz .m-rel[data-state="red"] .m-at{opacity:0}
#bauteilschutz .m-rel[data-state="red"]{background:var(--sx-screen);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent),inset 0 1px 3px rgba(0,0,0,.4)}
#bauteilschutz .m-rel[data-state="red"] #mRel,#bauteilschutz .m-rel[data-state="red"] .m-state{color:var(--warn)}
/* Messkanäle: feine LED-Segmente (2 px Strich, 1 px Luft), Füllung per clip-path, Schwelle als Haarlinie */
#bauteilschutz .m-rows{grid-area:rows;align-self:center}
#bauteilschutz .mrow{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;padding:8px 0 9px;border-bottom:1px solid var(--hair)}
#bauteilschutz .mrow:first-child{padding-top:2px}
#bauteilschutz .mrow:last-child{border-bottom:0;padding-bottom:2px}
#bauteilschutz .ml{font-size:13.5px;line-height:1.25;color:var(--fg2);min-width:0}
#bauteilschutz .mv{display:flex;align-items:baseline;gap:5px;font:500 10.5px/1 var(--mono);color:var(--mut)}
#bauteilschutz .mv b{min-width:3ch;text-align:right;font:850 17px/1 var(--dots);letter-spacing:.02em;color:var(--fg)}
#bauteilschutz .mb{height:3px;margin-top:1px;border-radius:0;background:repeating-linear-gradient(90deg,var(--sx-tick) 0 2px,transparent 2px 3px)}
#bauteilschutz .mf{inset:0;width:100%;border-radius:0;color:var(--fg2);background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 3px);
  transform:none;clip-path:inset(0 calc(100% - var(--v,0) * 100%) 0 0);transition:clip-path .16s linear}
#bauteilschutz .mt{top:-4px;bottom:-4px;width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--fg);opacity:.6}
#bauteilschutz .mrow.lim .mf{color:var(--warn);background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 3px)}
#bauteilschutz .mrow.lim .mv b,#bauteilschutz .mrow.lim .ml{color:var(--warn)}
#bauteilschutz .mrow.lim .mt{background:var(--warn);opacity:1}
/* Szenarien als Kontrollfelder: Handy Symbol über Text, ab 561 px Symbol neben Text */
#bauteilschutz .m-act{grid-area:act;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#bauteilschutz .chip-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:7px;min-height:60px;padding:9px 10px 10px 11px;border-radius:var(--r);
  background:var(--sheen),var(--fill);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--edge-hi);
  color:var(--fg);font:600 12.5px/1.22 var(--font);text-align:left;overflow-wrap:anywhere;hyphens:manual;
  transition:box-shadow .2s var(--ease),background-color .2s var(--ease),transform .32s var(--spring)}
#bauteilschutz .chip-btn:active{transform:scale(.97);transition-duration:.12s}
#bauteilschutz .chip-btn>span{text-wrap:balance}
.m-ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--fg2)}
#bauteilschutz .chip-btn.is-run{background:var(--sheen),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line),inset 0 1px 0 var(--edge-hi)}
#bauteilschutz .chip-btn.is-run .m-ic{color:var(--acc)}
@media (hover:hover) and (pointer:fine){#bauteilschutz .chip-btn:hover{box-shadow:inset 0 0 0 1px var(--hair2),inset 0 1px 0 var(--edge-hi);color:var(--fg)}}
#bauteilschutz .m-note{grid-area:note;font-size:12.5px;line-height:1.45}
@media (min-width:561px){
  #bauteilschutz .monitor{--gz:160px;--gzn:160;grid-template-columns:minmax(0,calc(var(--gz) + 24px)) minmax(0,1fr);grid-template-areas:"h h" "p p" "rel rows" "act act" "note note";
    gap:14px 20px;padding:var(--pad) var(--pad) calc(var(--pad) - 4px)}
  #bauteilschutz .m-rel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;justify-items:center;align-content:center;text-align:center;gap:3px;padding:12px 10px 14px}
  .m-gauge{grid-row:1}
  #bauteilschutz #mRel{grid-row:1}
  #bauteilschutz .m-rel-c>.label{grid-column:1;grid-row:2;margin-top:6px}
  #bauteilschutz .m-state{grid-column:1;grid-row:3;justify-self:center;text-align:center;font-size:15px}
  .m-at{grid-column:1;grid-row:4}
  #bauteilschutz .chip-btn{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:48px;padding:8px 12px;font-size:13px}
}
@media (max-width:900px){
  #bauteilschutz .monitor{position:relative;top:0}
}
@media (max-width:360px){
  #bauteilschutz .monitor{--gz:112px;--gzn:112;padding:14px 12px 12px}
  #bauteilschutz .m-state{font-size:15px}
  #bauteilschutz .chip-btn{padding-inline:9px;font-size:12px}
}

/* Schutzgrenzen-Kachel aus dem INEOS-Kapitel, hier und bei BMW als Beispiel (Markup und Werte wie dort).
   Die Stile kommen unverändert aus ineos.css (.ix-guard .ix-glass .ix-k .ix-h3 .ix-p .ix-table); außerhalb
   von .ix zeigen die --ix-*-Tokens auf das Seitenthema, der Akzent folgt der Umgebung. */
.sg-tile{--ix-white:var(--fg);--ix-fg:var(--fg);--ix-fg2:var(--fg2);--ix-mut:var(--mut);--ix-line:var(--hair);--ix-line2:var(--hair2);
  --ix-edge:var(--edge);--ix-edge-hi:var(--edge-hi);--ix-hl:var(--hl);--ix-ink:var(--bg);--ix-acc:var(--acc);--ix-ok:var(--ok);--ix-warn:var(--warn);
  --ix-font:var(--font);--ix-mono:var(--mono);--ix-r:var(--r-xl);--ix-sh:var(--sh-3)}
/* Raster 2026-10: außerhalb des INEOS-Kapitels kompakter (das Kapitel selbst bleibt unverändert) */
.sg-tile.ix-guard{gap:12px;padding:var(--pad)}
.sg-tile .ix-h3-sm{font-size:clamp(20px,1.8vw,26px)}
.sg-tile .ix-p{font-size:var(--t-p);line-height:1.55}
.sg-tile .ix-table tbody th,.sg-tile .ix-table tbody td{padding:9px 0;font-size:14.5px}
.sg-tile .ix-table .ix-grp th{padding:14px 0 6px}
/* breit (BMW): Text links, Tabelle rechts */
@media (min-width:901px){
  .sg-wide{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;align-items:start;gap:12px clamp(32px,4.5vw,72px);padding:clamp(20px,2.2vw,30px)}
  .sg-wide>.ix-k,.sg-wide>.ix-h3,.sg-wide>.ix-p{grid-column:1}
  .sg-wide>.ix-table{grid-column:2;grid-row:1/-1;margin-top:0}
}
#bmw .sg-tile{margin-bottom:clamp(28px,3.4vw,44px)}

/* =====================================================================
   Tabs (VAG, Preise): iOS-Segment aus dem Design-System, nicht gestreckt
   ===================================================================== */
#vag .tabs>.seg,#preise .tabs>.seg{align-self:flex-start}
@media (max-width:480px){
  #vag .tabs>.seg button{padding:0 10px;font-size:13px}
}
/* Preise schmal: vier lange Reiter als 2 × 2-Raster, Auswahl als Glasfläche ohne Gleiten */
@media (max-width:640px){
  #preise .tabs>.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch;gap:3px;padding:3px;border-radius:20px;overflow:visible}
  #preise .tabs>.seg .seg-thumb{display:none}
  #preise .tabs>.seg button{min-height:44px;padding:0 10px;border-radius:17px;white-space:normal;line-height:1.15}
  #preise .tabs>.seg button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--thumb);box-shadow:inset 0 0 0 1px var(--edge),var(--sh-1);opacity:0;transition:opacity .2s var(--ease)}
  #preise .tabs>.seg button[aria-selected="true"]::before{opacity:1}
}

/* =====================================================================
   VAG
   ===================================================================== */
/* Stufenkarten (Raster 2026-10): Stufe und Hardware in einer Zeile, darunter Balken und Text */
#vag .ladder{gap:var(--gap);align-items:stretch}
#vag .lv{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t hw" "bar bar" "p p";align-content:start;align-items:baseline;overflow:hidden;isolation:isolate;gap:10px 12px;padding:var(--pad);border-radius:var(--r-xl)}
#vag .lv-h{display:contents}
.lv-hw{grid-area:hw;justify-self:end;font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);text-align:right}
.lv-num{position:absolute;right:12px;bottom:-4px;z-index:-1;font-size:84px;line-height:.9;color:var(--fg);opacity:.06}
#vag .lv-bar{grid-area:bar;display:flex;gap:4px;margin:0}
#vag .lv-bar i{flex:1;height:4px;border-radius:1px;background:var(--fill2)}
#vag .lv-bar[style*="--n:1"] i:nth-child(-n+1),#vag .lv-bar[style*="--n:2"] i:nth-child(-n+2),#vag .lv-bar[style*="--n:3"] i{background:var(--acc)}
#vag .lv h3{grid-area:t;font:700 clamp(21px,1.9vw,26px)/1 var(--font);font-stretch:112%;letter-spacing:-.03em;margin:0}
#vag .lv p{grid-area:p;font-size:var(--t-p);line-height:1.55}
@media (min-width:901px){
  #vag .lv:nth-child(1){margin-top:28px}
  #vag .lv:nth-child(2){margin-top:14px}
}
#vag .ecu-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:var(--gap);padding:10px 14px 10px 20px;border-radius:var(--r-lg)}
.ecu-chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px}
.ecu-chain li{display:flex;align-items:center;font:850 16px/1 var(--dots);letter-spacing:.03em;color:var(--fg2)}
.ecu-chain li+li::before{content:"";width:18px;height:1px;margin:0 9px;background:var(--line2)}
.ecu-chain li:last-child{color:var(--acc)}
#vag .ecu-line .lnk{margin-left:auto;min-height:44px}
#vag .split{align-items:start}
#vag .split-t>p{font-size:16px;line-height:1.6}
#vag .box{gap:8px;padding:16px 18px 16px 22px;border-radius:var(--r-lg)}
#vag .box::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--acc)}
#vag .box .label{color:var(--acc)}
#vag .tree{margin:0;padding:16px 18px 14px;border-radius:var(--r-xl);background-image:var(--sheen);background-size:auto}
#vag .tree::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
#vag .tree{background:var(--sheen),var(--glass)}
.tree-gen{position:relative;display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.tree-gen span{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hair);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--mut)}
.tree-gen span.on{box-shadow:inset 0 0 0 1px var(--acc-line);color:var(--acc);background:var(--acc-soft)}
#vag .tree svg{position:relative}
#vag .tr-l{fill:none;stroke:var(--line2);stroke-width:1.4}
#vag .tr-n{fill:url(#vgNode);stroke:var(--acc-line);stroke-width:1}
.vg-s0{stop-color:var(--surface3)}.vg-s1{stop-color:var(--surface)}
#vag .tr-e{fill:var(--surface2);stroke:var(--line2)}
#vag .tr-t{font:700 17px var(--font);font-stretch:110%;fill:var(--fg)}
#vag .tr-s{font:500 10px var(--mono);letter-spacing:.12em;fill:var(--mut)}
#vag .tr-h{fill:var(--acc-soft);stroke:var(--acc-line);stroke-width:1}
#vag .tr-d{fill:var(--acc)}
#vag .tr-c{font:850 18px var(--dots);letter-spacing:.04em;fill:var(--fg)}
#vag .points{border-radius:var(--r-xl);padding:2px 18px}
#vag .points li{align-items:flex-start;gap:14px;padding:14px 0;border-top:0;border-bottom:1px solid var(--hair)}
#vag .points li:first-child{border-top:0}
#vag .points li:last-child{border-bottom:0}
.pt-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line);color:var(--acc)}
.pt-ic .i{width:16px;height:16px;margin:0;stroke-width:2}
#vag .points div{padding-top:5px}
#vag .points b{font:650 16px/1.3 var(--font)}
#vag .big-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,28px);padding:var(--pad);border-radius:var(--r-xl)}
.hvo-mx{position:relative;width:clamp(96px,10vw,128px);aspect-ratio:1}
.hvo-mx::before,.hvo-mx::after{content:"";position:absolute;left:0;right:0}
.hvo-mx::after{top:10%;bottom:0;background:radial-gradient(circle closest-side,var(--acc) 0 58%,transparent 66%) 0 0/10% 11.1111%}
.hvo-mx::before{top:0;height:10%;background:radial-gradient(circle closest-side,var(--line2) 0 58%,transparent 66%) 0 0/10% 100%}
#vp4:not([hidden]) .hvo-mx::after{animation:sx-fill .9s var(--ease-io) both}
@keyframes sx-fill{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.hvo-mx i{display:none}
.hvo-t{display:flex;flex-direction:column;gap:12px;min-width:0}
#vag .big-fig b{font-size:clamp(48px,4.4vw,68px);line-height:.8;color:var(--acc);white-space:nowrap}
.hvo-c{color:var(--fg2);max-width:30ch;font-size:15px;line-height:1.45}
#vag .fact{border-top:1px solid var(--hair)}
@media (max-width:900px){#vag .ecu-line .lnk{margin-left:0}}
@media (max-width:560px){
  #vag .big-fig{grid-template-columns:auto minmax(0,1fr)}
  .hvo-mx{width:92px}
  /* Kennzeile: Label und Link oben, die Steuergeräte-Kette darunter in einer Zeile */
  #vag .ecu-line{gap:4px 12px;padding:6px 8px 12px 16px}
  #vag .ecu-line>.label{flex:1}
  #vag .ecu-line .lnk{order:1;margin-left:auto}
  #vag .ecu-chain{order:2;flex-basis:100%}
  .ecu-chain li{font-size:14px}
  .ecu-chain li+li::before{width:10px;margin:0 6px}
}

/* =====================================================================
   BMW: Generationen als Zeitleiste, Leistungen als Glasgruppen
   ===================================================================== */
#bmw .gens{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-top:34px;margin-bottom:clamp(28px,3.4vw,44px)}
#bmw .gens::before{top:6px;height:1px;background:linear-gradient(90deg,var(--line2),var(--line2) 60%,var(--acc-line))}
#bmw .gen{gap:12px;padding:var(--pad);border-radius:var(--r-xl);min-width:0}
#bmw .g-dot{top:-34px;left:22px;width:13px;height:13px;background:var(--bg2);border:1.5px solid var(--line2);box-shadow:0 0 0 4px var(--bg2)}
#bmw .g-dot::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:14px;margin-left:-.5px;background:var(--line2)}
#bmw .gen[data-gen="b"] .g-dot{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 4px var(--bg2),0 0 0 5px var(--acc-line)}
#bmw .gen[data-gen="b"] .g-dot::after{background:var(--acc-line)}
.g-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
#bmw .g-l{font-size:clamp(60px,6vw,88px);line-height:.78;color:var(--fg)}
#bmw .gen[data-gen="b"] .g-l{color:var(--acc)}
#bmw .g-hd .label{padding-bottom:4px}
#bmw .g-eng li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;max-width:none;padding:10px 0;border-bottom:0;border-top:1px solid var(--hair)}
#bmw .g-eng b{font:700 18px/1 var(--font);font-stretch:110%}
.g-cyl{justify-self:end;display:block;width:calc(var(--c) * 9px);height:6px;background:radial-gradient(circle closest-side,var(--fg2) 0 82%,transparent 100%) 0 50%/9px 6px repeat-x;opacity:.75}
#bmw .g-ecu{padding-top:10px;border-top:1px solid var(--hair)}
#bmw .bmw-grid{margin-bottom:clamp(28px,3.4vw,44px)}
#bmw .svc{gap:var(--gap)}
#bmw .svc-g{padding:var(--pad) var(--pad) 4px;border-radius:var(--r-xl)}
.svc-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px}
#bmw .svc-g .svc-n{font:850 15px/1 var(--dots);color:var(--mut)}
#bmw .svc-g ul{margin:0}
#bmw .svc-g li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:14px;padding:13px 0;border-bottom:0;border-top:1px solid var(--hair)}
#bmw .svc-g li:first-child{border-top:1px solid var(--hair)}
#bmw .svc-g .svc-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--acc);font-size:0;
  background:var(--sheen),var(--fill);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--edge-hi)}
.svc-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-t{display:flex;flex-direction:column;gap:5px;min-width:0;padding-top:2px}
#bmw .svc-g b{font:650 16.5px/1.25 var(--font);font-stretch:104%}
/* Verweis auf die Simulation Einlasskanal (öffnet die Detail-Kachel, sims.js) */
#bmw .svc-sim{position:relative;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:32px;margin-top:2px;
  font:600 13.5px/1 var(--font);color:var(--acc);text-decoration:none}
#bmw .svc-sim::after{content:"";position:absolute;inset:-6px -6px}
#bmw .svc-sim .i{width:11px;height:11px;fill:currentColor;stroke:currentColor;stroke-width:1.4;transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){#bmw .svc-sim:hover .i{transform:translateX(2px)}}
#bmw .svc-g .svc-t span{color:var(--fg2);font-size:var(--t-p);line-height:1.5}
@media (max-width:900px){
  #bmw .gens{grid-template-columns:minmax(0,1fr);gap:10px;padding:0 0 0 28px}
  #bmw .gens::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--line2),var(--line2) 60%,var(--acc-line))}
  #bmw .gen{padding:14px 16px 12px;gap:10px}
  #bmw .g-dot{top:22px;left:-28px}
  #bmw .g-dot::after{left:13px;top:50%;width:16px;height:1px;margin:-.5px 0 0}
  #bmw .g-l{font-size:52px}
}

/* =====================================================================
   Preise: Kennfeld als Heatmap, Listen als Glaskarten
   ===================================================================== */
#preise .mx-card{padding:8px;border-radius:var(--r-xl)}
.mx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:12px 14px 14px}
.mx-read{position:relative;display:grid;min-height:22px;margin:0}
.mx-read>span{grid-area:1/1;align-self:center;transition:opacity .2s var(--ease)}
.mx-k{font:500 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.mx-v{font:600 14px/1.2 var(--mono);letter-spacing:.02em;color:var(--fg);opacity:0;white-space:nowrap}
.mx-read.on .mx-k{opacity:0}
.mx-read.on .mx-v{opacity:1}
.mx-lg{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.mx-lg i{display:block;width:128px;height:8px;border-radius:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 4%,var(--fill)) 0 12.5%,color-mix(in srgb,var(--acc) 8%,var(--fill)) 12.5% 25%,
    color-mix(in srgb,var(--acc) 12%,var(--fill)) 25% 37.5%,color-mix(in srgb,var(--acc) 16%,var(--fill)) 37.5% 50%,
    color-mix(in srgb,var(--acc) 20%,var(--fill)) 50% 62.5%,color-mix(in srgb,var(--acc) 24%,var(--fill)) 62.5% 75%,
    color-mix(in srgb,var(--acc) 28%,var(--fill)) 75% 87.5%,color-mix(in srgb,var(--acc) 32%,var(--fill)) 87.5% 100%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 2px),transparent calc(12.5% - 2px) 12.5%);mask:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 2px),transparent calc(12.5% - 2px) 12.5%)}
#preise .tblwrap{overflow:visible;border:0;border-radius:0;background:none}
#preise .matrix{min-width:0;border-collapse:separate;border-spacing:4px;table-layout:fixed}
#preise .matrix th,#preise .matrix td{position:relative;border:0;border-radius:14px;transition:background-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
#preise .matrix thead th{padding:10px 16px 12px;background:none;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;color:var(--mut);vertical-align:bottom}
#preise .matrix thead th:first-child{width:24%}
.cyl{display:block;margin:8px 0 0 auto;width:calc(var(--c) * 7px);height:5px;background:radial-gradient(circle closest-side,currentColor 0 80%,transparent 100%) 0 50%/7px 5px repeat-x;opacity:.7}
#preise .matrix tbody th{padding:16px 14px;background:none;font:700 18px/1 var(--font);font-stretch:110%;letter-spacing:-.01em;color:var(--fg)}
#preise .matrix td{padding:18px 14px 21px;text-align:right;font:650 19px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--fg);
  background:color-mix(in srgb,var(--acc) calc(4% + var(--i,0) * 28%),var(--fill))}
#preise .matrix td small{font:500 12px/1 var(--mono);color:var(--fg2);letter-spacing:0}
#preise .matrix td::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:2px;border-radius:2px;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--i,0));opacity:.85}
#preise .matrix td.na{text-align:center;color:var(--faint);font-weight:400;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hatch) 6px 7px)}
#preise .matrix td.na::after{display:none}
#preise .matrix th.hx,#preise .matrix th.hy{box-shadow:none;color:var(--acc)}
#preise .matrix td.hx,#preise .matrix td.hy{box-shadow:inset 0 0 0 9999px color-mix(in srgb,var(--fg) 6%,transparent)}
#preise .matrix td.hx.hy{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 9999px color-mix(in srgb,var(--acc) 10%,transparent);color:var(--fg)}
#preise .matrix td.hx.hy small{color:var(--fg)}
#preise .tbl-note{margin-top:14px;font-size:var(--t-sm)}
#preise .plist-card{max-width:820px;padding:4px var(--pad) 6px;border-radius:var(--r-xl)}
#preise .plist-h{margin:0;padding:14px 0 10px}
#preise .plist{max-width:none}
#preise .plist li{align-items:center;gap:14px;min-height:54px;padding:12px 0;border-top:1px solid var(--hair);border-bottom:0}
#preise .plist li:first-child{border-top:1px solid var(--hair)}
#preise .plist span{font:620 clamp(16px,1.3vw,18px)/1.3 var(--font);font-stretch:104%}
#preise .plist i{border-bottom:1px dotted var(--line2);transform:none;align-self:center;margin-top:6px}
#preise .plist b{font:650 19px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--fg)}
#preise .plist b small{font:500 12.5px/1 var(--mono);color:var(--fg2);letter-spacing:0}
#preise .plist b.req{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
#preise .plist-2{gap:var(--gap)}
#preise .plist-2 .plist-card{max-width:none}
#preise .pr-cta{margin-top:28px}
@media (max-width:640px){
  #preise .mx-card{padding:6px;border-radius:var(--r-lg)}
  .mx-bar{padding:10px 10px 12px}
  .mx-lg i{width:96px}
  #preise .matrix{border-spacing:3px}
  #preise .matrix th,#preise .matrix td{border-radius:10px}
  #preise .matrix thead th{padding:8px 6px 10px;font-size:9.5px;letter-spacing:.06em;text-align:right}
  #preise .matrix thead th:first-child{width:22%;text-align:left}
  .cyl{width:calc(var(--c) * 5px);height:4px;background-size:5px 4px}
  #preise .matrix tbody th{padding:16px 6px;font-size:14px}
  #preise .matrix td{padding:17px 6px 19px;font-size:15px}
  #preise .matrix td small{font-size:10px}
  #preise .matrix td::after{left:7px;right:7px;bottom:7px}
  #preise .plist-card{padding:4px 18px 6px}
  #preise .plist li{flex-wrap:wrap;gap:6px 12px}
  #preise .plist i{display:none}
  #preise .plist span{flex:1 1 100%}
  #preise .plist b{margin-left:0}
}

/* =====================================================================
   Über uns: Zahlen-Komposition
   ===================================================================== */
#ueber .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px)}
#ueber .about-l{gap:clamp(28px,3.4vw,44px)}
#ueber .stats{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0;margin:0;padding:0;border:0}
#ueber .stats li{display:flex;flex-direction:column;gap:10px;padding:18px 0 20px;border-top:1px solid var(--line2);min-width:0}
#ueber .st-a{grid-row:1/span 2;padding-right:24px!important;border-right:1px solid var(--line2)}
#ueber .st-b,#ueber .st-c{padding-left:24px!important}
.st-i{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--acc)}
#ueber .stats b{display:block;color:var(--fg);letter-spacing:0;white-space:nowrap}
#ueber .st-a b{font-size:clamp(104px,11vw,164px);line-height:.76;margin-top:auto}
#ueber .st-b b,#ueber .st-c b{font-size:clamp(44px,4.4vw,64px);line-height:.8}
#ueber .stats b i{font-style:normal;color:var(--acc);margin-left:.04em}
#ueber .stats .st-l{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
#ueber .about-r{gap:16px}
#ueber .values{gap:var(--gap);margin-top:8px}
#ueber .values li{gap:6px;padding:16px 16px 18px;border-top:0;border-radius:var(--r-lg)}
#ueber .values .v-n{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--acc);margin-bottom:6px}
#ueber .values b{font:650 16px/1.3 var(--font)}
#ueber .values .v-p{color:var(--fg2);font-size:var(--t-p);line-height:1.5}
@media (max-width:900px){#ueber .about{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  #ueber .st-a b{font-size:clamp(96px,30vw,124px)}
  #ueber .st-b b,#ueber .st-c b{font-size:clamp(38px,11vw,48px)}
  #ueber .st-a{padding-right:16px!important}
  #ueber .st-b,#ueber .st-c{padding-left:16px!important}
}

/* =====================================================================
   Kontakt: iOS-Gruppen, Live-Status, Karte, Formular
   ===================================================================== */
#kontakt .ct-info{gap:var(--gap)}
#kontakt .ci-group{border-radius:var(--r-xl);padding:4px 0}
#kontakt .ci{gap:14px;padding:14px 16px;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#kontakt .ci::before{content:none}
#kontakt .ci+.ci::after{content:"";position:absolute;top:0;left:70px;right:0;height:1px;background:var(--hair)}
.ci-w{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:var(--acc);background:var(--acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent)}
.ci-w .i{width:19px;height:19px}
#kontakt .ci-v{font:600 16px/1.35 var(--font)}
#kontakt .copy{gap:7px;min-height:44px;min-width:44px;padding:0 16px;font:600 13px/1 var(--font)}
#kontakt .hours{padding:16px 18px 6px;border-radius:var(--r-xl)}
#kontakt .hours-h{flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
#kontakt .status{order:3;margin-left:auto;gap:8px;height:28px;padding:0 11px 0 10px;border-radius:var(--r-pill);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);font:600 11.5px/1 var(--mono);letter-spacing:.02em}
#kontakt .status.open{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 32%,transparent)}
#kontakt .status.open::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.hr-next{order:4;flex-basis:100%;text-align:right;font:500 11px/1.3 var(--mono);color:var(--mut);margin-top:-2px}
.hr-day{margin:0 0 6px}
.hr-trk{position:relative;height:10px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sx-tick) 0 1px,transparent 1px calc(100% / 24)) 0 0/100% 100%,var(--fill)}
.hr-win{position:absolute;top:0;bottom:0;left:calc(var(--a,0) * 100%);width:calc((var(--b,0) - var(--a,0)) * 100%);border-radius:3px;background:color-mix(in srgb,var(--acc) 28%,transparent);box-shadow:inset 0 0 0 1px var(--acc-line)}
.hr-day.is-open .hr-win{background:color-mix(in srgb,var(--ok) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent)}
.hr-day.is-closed .hr-win{display:none}
.hr-now{position:absolute;top:-4px;bottom:-4px;left:calc(var(--n,0) * 100%);width:2px;margin-left:-1px;border-radius:1px;background:var(--fg)}
.hr-now::before{content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--fg)}
.hr-ax{display:flex;justify-content:space-between;margin-top:8px;font:500 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--faint)}
#kontakt .hours dl div{position:relative;align-items:center;min-height:44px;padding:8px 0}
#kontakt .hours dl div.today dt::after{content:none}
#kontakt .hours dl div.today::before{content:"";position:absolute;left:-12px;top:13px;bottom:13px;width:2px;border-radius:2px;background:var(--acc)}
#kontakt .hours dl div.today dd{color:var(--fg)}
#kontakt .loc{height:150px;border-radius:var(--r-xl);background-image:var(--sheen);overflow:hidden;isolation:isolate}
#kontakt .loc.brk::before{inset:12px;z-index:3}
.loc-map{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.loc-topo{fill:none;stroke:var(--line2);stroke-width:1;opacity:.9}
.loc-road{fill:none;stroke:var(--fg2);stroke-width:2;stroke-linecap:round;opacity:.22}
.loc-road.thin{stroke-width:1.2;opacity:.16}
.loc-ring{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;z-index:1;box-shadow:inset 0 0 0 1px var(--acc-line);
  -webkit-mask:repeating-conic-gradient(#000 0 2deg,transparent 2deg 10deg);mask:repeating-conic-gradient(#000 0 2deg,transparent 2deg 10deg)}
#kontakt .loc-pin{left:50%;top:50%;z-index:2}
#kontakt .loc-pin::before,#kontakt .loc-pin::after{opacity:.35}
#kontakt .loc-c{z-index:2;left:18px;bottom:16px;font:800 14px/1 var(--dots);letter-spacing:.04em;color:var(--fg)}
#kontakt .loc-n{z-index:2;right:18px;top:16px}
/* Formular: Felder aus dem Design-System, dazu iOS-Häkchen und Fehlerzustand */
#kontakt .ct-form{gap:14px;border-radius:var(--r-xl)}
#kontakt .f textarea{min-height:120px;line-height:1.5}
#kontakt .f.err>span{color:var(--warn)}
#kontakt .f.err input,#kontakt .f.err select,#kontakt .f.err textarea{box-shadow:inset 0 0 0 1.5px var(--warn),0 0 0 4px var(--warn-soft)}
#kontakt .consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;min-height:44px;padding:4px 2px;font-size:13.5px;line-height:1.5}
#kontakt .consent input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:24px;height:24px;margin:0;border-radius:8px;cursor:pointer;
  background:var(--fill);box-shadow:inset 0 0 0 1.5px var(--hair2);transition:background-color .16s var(--ease),box-shadow .16s var(--ease)}
#kontakt .consent input::after{content:"";width:11px;height:6px;margin-top:-3px;border:solid var(--acc-fg);border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);transition:transform .2s var(--spring)}
#kontakt .consent input:checked{background:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc)}
#kontakt .consent input:checked::after{transform:rotate(-45deg) scale(1)}
#kontakt .consent input:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
#kontakt .consent.err input{box-shadow:inset 0 0 0 1.5px var(--warn),0 0 0 4px var(--warn-soft)}
#kontakt .f-foot{gap:14px 18px;margin-top:4px}
#kontakt .f-foot .btn{min-height:50px;padding:0 24px}
@media (max-width:560px){
  #kontakt .ci{flex-wrap:nowrap;padding:12px 12px 12px 14px}
  #kontakt .ci .copy{margin-left:0;padding:0;width:44px;justify-content:center}
  #kontakt .ci .copy span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #kontakt .ci-v{font-size:15px}
  #kontakt .ci+.ci::after{left:66px}
  #kontakt .f-foot .btn{width:100%}
}

/* =====================================================================
   Footer: großes Logo, ruhige Komposition
   ===================================================================== */
.foot{padding-block:clamp(48px,6vw,84px) calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.foot .foot-in{display:flex;flex-direction:column;align-items:stretch;gap:clamp(32px,4.4vw,56px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:28px 40px;align-items:start}
.foot-claim{font:700 clamp(22px,2.2vw,30px)/1.04 var(--font);font-stretch:110%;letter-spacing:-.03em;color:var(--fg)}
.foot-adr{font-style:normal;font-size:15px;line-height:1.65;color:var(--fg2)}
.foot-adr a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);text-decoration:none;overflow-wrap:anywhere;line-height:1.35}
@media (hover:hover) and (pointer:fine){.foot-adr a:hover{color:var(--acc)}}
.foot .foot-links{flex-direction:column;align-items:flex-start;gap:0}
.foot .foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--fg2)}
.foot .foot-links .foot-top-l{color:var(--mut)}
.foot .foot-brand{display:block;color:var(--fg)}
.foot .foot-brand .logo-full{width:100%;opacity:.94}
.foot-bot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;padding-top:22px;border-top:1px solid var(--line)}
.foot .foot-disc{max-width:72ch}
@media (max-width:760px){
  .foot-top{grid-template-columns:minmax(0,1fr) auto}
  .foot-claim{grid-column:1/-1}
}
@media (max-width:420px){.foot-top{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   Weniger Bewegung, erzwungene Farben
   ===================================================================== */
.motion-reduce .ticker .tk{animation:none}
.motion-reduce .bx-cv,.motion-reduce .bx-fb,.motion-reduce .m-o,.motion-reduce .mx-read>span,.motion-reduce #bauteilschutz .mf{transition:none}
.motion-reduce #vp4:not([hidden]) .hvo-mx::after{animation:none}
.motion-reduce #bereiche .tile:active{scale:1}
.motion-reduce #bereiche .bx-photo img{scale:none!important}
.motion-reduce #bereiche .tile .bx-go .i{transform:none!important}
.motion-reduce #bauteilschutz .chip-btn:active{transform:none}
@media (forced-colors:active){
  #vag .ecu-line::after,#vag .box::after,#vag .tree::after,#vag .points::after,#vag .big-fig::after,
  #bmw .gen::after,#bmw .svc-g::after,#preise .mx-card::after,#preise .plist-card::after,#ueber .values li::after,
  #kontakt .ci-group::after,#kontakt .loc::after,#bereiche .tile::after{display:none}
  #bereiche .tile,#bmw .gen,#bmw .svc-g,#preise .mx-card,#preise .plist-card{border:1px solid CanvasText}
  .m-o.is-on{stroke:Highlight}
}