/* =====================================================================
   INEOS Grenadier · "Ein Auto, zwei Welten"
   Studio-Look der B58-Produktmappe: tiefschwarzes Fotostudio, Lichtkegel
   von oben rechts, Nebel, nasser Boden. Der Bereich folgt dem Seitenthema:
   dunkel wie hier oben, hell als weißes Studio (Block "Hell-Modus" am Ende).
   Er nutzt ausschließlich eigene Tokens (--ix-*).
   Akzent: Rot für den Benziner B58, Eisblau für den Diesel B57.
   Animiert werden nur transform, opacity, clip-path und filter.
   ===================================================================== */
.ix{
  --ix-bg:#050506;
  --ix-white:#f4f5f7;
  --ix-fg:#f4f5f7;
  --ix-fg2:#c3c9d2;
  --ix-mut:#959ca7;
  --ix-line:rgba(255,255,255,.085);
  --ix-line2:rgba(255,255,255,.16);
  --ix-edge:rgba(255,255,255,.13);
  --ix-edge-hi:rgba(255,255,255,.30);
  --ix-hl:rgba(255,255,255,.20);
  --ix-ink:#0b0b0e;
  --ix-red:#ff3a3a;
  --ix-red-ink:#f6f7f9;
  --ix-red-soft:rgba(255,58,58,.14);
  --ix-ice:#80d2ff;
  --ix-ice-ink:#04121c;
  --ix-ice-soft:rgba(128,210,255,.14);
  --ix-ok:#3fdc86;
  --ix-warn:#ffb340;
  --ix-serie:#a3aab5;
  --ix-acc:var(--ix-red);
  --ix-acc-ink:var(--ix-red-ink);
  --ix-acc-soft:var(--ix-red-soft);
  --ix-font:"Archivo","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --ix-mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --ix-dots:"Doto","JetBrains Mono",ui-monospace,monospace;
  --ix-ease-out:cubic-bezier(.23,1,.32,1);
  --ix-ease-in-out:cubic-bezier(.77,0,.175,1);
  --ix-gut:clamp(16px,4vw,40px);
  --ix-r:20px;
  color-scheme:dark;
  position:relative;
  background:var(--ix-bg);
  color:var(--ix-fg);
  overflow-x:clip;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ix[data-model="b57"]{--ix-acc:var(--ix-ice);--ix-acc-ink:var(--ix-ice-ink);--ix-acc-soft:var(--ix-ice-soft)}
.sec.ix{padding:0}
.ix ::selection{background:var(--ix-acc-soft);color:var(--ix-white)}
.ix :focus-visible{outline:2px solid var(--ix-acc);outline-offset:3px;border-radius:8px}
.ix-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}
.ix[data-model="b58"] .ix-only-b57,.ix[data-model="b57"] .ix-only-b58{display:none}
.ix[data-model="b58"] .ix-model[data-for="b57"],.ix[data-model="b57"] .ix-model[data-for="b58"]{display:none}

/* ---------- Studio (Vergleichsteiler) ----------
   Zwei Welten liegen übereinander: unten Benziner, oben Diesel, per clip-path beschnitten.
   Ohne Skript steht der Teiler über --s in der Mitte; das Skript setzt clip-path und
   transform danach direkt an den Elementen. */
.ix-stage{
  --iw:clamp(560px,60vw,900px);   /* Bildbreite des Fahrzeugs */
  --crop:.12;                     /* unterer Bildanschnitt */
  --fs:clamp(34px,5.6vw,84px);    /* Claim */
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  background:#030304;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
@supports (height:100dvh){.ix-stage{--iw:clamp(560px,min(60vw,100dvh - 120px),900px)}}
.ix-stage.is-drag,.ix-stage.is-drag *{cursor:ew-resize}
.ix-world{position:absolute;inset:0;z-index:0}
.ix-w-d{z-index:1;clip-path:inset(0 calc(100% - var(--s)) 0 0)}
.ix-w-d{--bc:196,226,255;--lc:128,210,255}
.ix-w-p{--bc:255,247,240;--lc:255,44,40}
.ix-amb{position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 100%,rgba(var(--lc),.06),transparent 70%),
    radial-gradient(90% 70% at 50% 40%,rgba(var(--bc),.025),transparent 70%)}
.ix-w-d .ix-amb{background-color:#03060b}
.ix-w-p .ix-amb{background-color:#060404}
.ix-rig{position:absolute;left:50%;bottom:calc(var(--iw) * var(--crop) * -1);width:var(--iw);height:var(--iw);transform:translateX(-50%)}
.ix-car{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 52%,#000 56%,rgba(0,0,0,.55) 80%,transparent 100%);
  mask-image:radial-gradient(50% 50% at 50% 52%,#000 56%,rgba(0,0,0,.55) 80%,transparent 100%)}
.ix-car-p{filter:saturate(1.08) contrast(1.04)}
.ix-car-d.is-fallback{filter:grayscale(1) sepia(.55) hue-rotate(168deg) saturate(2.2) brightness(1.06) contrast(1.05)}
/* Lichtkegel: setzt den Strahl aus dem Foto über die Bildkante hinaus fort */
.ix-beam,.ix-src{position:absolute;pointer-events:none}
.ix-beam{left:103%;top:-13.5%;width:80%;height:122%;transform-origin:50% 0;transform:translateX(-50%) rotate(35.5deg);
  background:
    conic-gradient(from 168deg at 50% 0,transparent 0deg,rgba(var(--bc),.07) 5deg,rgba(var(--bc),.24) 12deg,rgba(var(--bc),.07) 19deg,transparent 24deg),
    conic-gradient(from 176deg at 50% 0,transparent 0deg,rgba(var(--bc),.16) 4deg,transparent 8deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 42%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 42%,transparent 90%);
  animation:ix-breathe 11s var(--ix-ease-in-out) infinite alternate}
.ix-src{left:103%;top:-13.5%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--bc),.16),rgba(var(--bc),.04) 45%,transparent);
  animation:ix-breathe 11s var(--ix-ease-in-out) infinite alternate}
@keyframes ix-breathe{from{opacity:.8}to{opacity:1}}
.ix-stage:not(.is-live) .ix-beam,.ix-stage:not(.is-live) .ix-src{animation-play-state:paused}
/* Nasser Boden ab Horizont (72,5 % der Bildhöhe), seitlich bis an die Ränder */
.ix-floor{position:absolute;left:0;right:0;bottom:0;height:calc(var(--iw) * (.275 - var(--crop)) + 2px);
  background:
    radial-gradient(30% 140% at 50% 0%,rgba(var(--lc),.14),transparent 70%),
    radial-gradient(60% 90% at 50% 0%,rgba(var(--bc),.05),transparent 80%),
    linear-gradient(180deg,rgba(var(--bc),.06) 0,rgba(var(--bc),.02) 22%,transparent 80%)}
.ix-floor::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(var(--bc),.025) 0 1px,transparent 1px 9px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.ix-fog{position:absolute;left:0;bottom:0;z-index:2;display:block;width:100%;max-width:none;height:calc(var(--iw) * .62);pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 32%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 32%,#000 86%,transparent)}
.ix-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,3,4,.5) 0,transparent 16%),
    radial-gradient(125% 95% at 50% 58%,transparent 55%,rgba(3,3,4,.6) 100%)}
/* Bühnenboden läuft in die Fläche darunter aus */
.ix-vig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--iw) * .13);background:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.75) 60%,#050506)}
.ix-div{position:absolute;top:0;bottom:0;left:var(--s);z-index:3;width:0;pointer-events:none;will-change:transform}
.ix-div::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;
  background:linear-gradient(180deg,transparent 0,rgba(244,245,247,.16) 22%,rgba(244,245,247,.78) 45%,rgba(244,245,247,.78) 86%,transparent 100%)}

/* Claim */
.ix-claim{position:relative;z-index:5;padding:clamp(40px,4vw,60px) var(--ix-gut) 0;text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.ix-h2{margin:0;font:860 var(--fs)/.86 var(--ix-font);font-stretch:125%;letter-spacing:-.012em;text-transform:uppercase;color:var(--ix-white);text-wrap:balance}
.ix-rule{display:block;width:56px;height:3px;margin:clamp(20px,2.4vw,30px) 0 clamp(14px,1.6vw,20px);border-radius:2px;background:var(--ix-acc)}
.ix-sub{display:flex;flex-direction:column;gap:6px;margin:0;font:640 clamp(10.5px,.95vw,13px)/1.3 var(--ix-font);font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-sub>span:last-child{color:var(--ix-mut);font-weight:520}
.ix-zone{flex:none;height:calc(var(--iw) * (.73 - var(--crop)) + 24px)}

/* Modell-Headlines, je in ihrer Welt beschnitten */
.ix-clip{position:absolute;inset:0;z-index:4;pointer-events:none}
.ix-clip-d{clip-path:inset(0 calc(100% - var(--s)) 0 0)}
.ix-clip-p{clip-path:inset(0 0 0 var(--s))}
.ix-side{position:absolute;bottom:calc(var(--iw) * .37);transform:translateY(50%);width:min(430px,calc(50% - var(--iw) * .25 - 36px - var(--ix-gut)));display:flex;flex-direction:column;gap:10px}
.ix-side-d{right:calc(50% + var(--iw) * .25 + 36px);text-align:left;align-items:flex-start;opacity:clamp(0,(var(--sv) - 30) / 20,1);--sc:var(--ix-ice)}
.ix-side-p{left:calc(50% + var(--iw) * .25 + 36px);text-align:right;align-items:flex-end;opacity:clamp(0,(70 - var(--sv)) / 20,1);--sc:var(--ix-red)}
.ix-side-h{display:flex;align-items:center;gap:.36em;margin:0;font:840 clamp(24px,3vw,46px)/1 var(--ix-font);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase;color:var(--ix-white)}
.ix-badge{display:inline-flex;align-items:center;height:1.12em;padding:0 .32em;border-radius:.2em;font:850 .62em/1 var(--ix-font);font-stretch:112%;letter-spacing:.02em}
.ix-badge-d{background:var(--ix-ice);color:var(--ix-ice-ink)}
.ix-badge-p{background:var(--ix-red);color:var(--ix-red-ink)}
.ix-side-sub{margin:0;font:500 11px/1.4 var(--ix-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-side-k{margin:8px 0 -2px;font:500 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-mut)}
.ix-side-fig{display:flex;align-items:baseline;gap:.3em;margin:0;font:800 clamp(22px,2.3vw,34px)/1 var(--ix-font);font-stretch:116%;color:var(--ix-white);white-space:nowrap}
.ix-side-fig>span:first-child{color:var(--ix-mut);font-weight:620;font-size:.72em}
.ix-side-fig i{font-style:normal;font-weight:700;font-stretch:100%;color:var(--sc);font-size:.62em;letter-spacing:-.02em;margin:0 .1em 0 0}
.ix-side-fig small{font-size:.5em;font-weight:700;color:var(--ix-fg2);letter-spacing:.02em}

/* Griff */
.ix-handle{position:absolute;z-index:6;left:var(--s);bottom:calc(var(--iw) * .40);width:58px;height:58px;margin:0 0 -29px -29px;border-radius:50%;
  display:grid;place-items:center;color:var(--ix-white);cursor:ew-resize;will-change:transform;
  background:rgba(12,12,15,.5);border:1px solid rgba(244,245,247,.42);
  backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 10px 30px -8px rgba(3,3,4,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.ix-handle svg{width:30px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s var(--ix-ease-out)}
.ix-stage.is-drag .ix-handle svg{transform:scale(1.1)}
.ix-handle:focus-visible{outline:2px solid var(--ix-white);outline-offset:4px;border-radius:50%}
.ix-hint{position:absolute;z-index:6;left:var(--s);bottom:calc(var(--iw) * .40 - 58px);transform:translateX(-50%);margin:0;pointer-events:none;
  font:500 10px/1 var(--ix-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,245,247,.62);white-space:nowrap;transition:opacity .3s var(--ix-ease-out)}
.ix-stage.is-used .ix-hint{opacity:0}
/* Mit Skript: Position nur noch über transform */
.ix-stage.is-js .ix-div,.ix-stage.is-js .ix-handle,.ix-stage.is-js .ix-hint{left:0}
@media (hover:hover) and (pointer:fine){
  .ix-handle:hover svg{transform:scale(1.1)}
}

/* ---------- Inhalt unter dem Studio ---------- */
.ix-body{position:relative;isolation:isolate;padding-bottom:clamp(88px,11vw,150px)}
/* Studio-Licht im Hintergrund: sehr weiche Lichtflächen, Farbtemperatur folgt dem Modell */
.ix-body::before,.ix-body::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .3s var(--ix-ease-out)}
.ix-body::before{background:radial-gradient(900px 620px at 86% 4%,rgba(255,236,228,.05),transparent 70%),radial-gradient(760px 540px at 8% 48%,rgba(255,236,228,.03),transparent 70%)}
.ix-body::after{opacity:0;background:radial-gradient(900px 620px at 86% 4%,rgba(200,230,255,.05),transparent 70%),radial-gradient(760px 540px at 8% 48%,rgba(200,230,255,.03),transparent 70%)}
.ix[data-model="b57"] .ix-body::before{opacity:0}
.ix[data-model="b57"] .ix-body::after{opacity:1}
.ix-wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--ix-gut)}

/* Umschalter Diesel | Benziner (klebt im Bereich unter der Navigation) */
.ix-switchbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);z-index:20;display:flex;justify-content:center;margin-top:-30px;padding-inline:var(--ix-gut);pointer-events:none}
.ix-switch{position:relative;pointer-events:auto;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:5px;border-radius:999px;max-width:100%;
  background:rgba(14,14,18,.72);border:1px solid var(--ix-edge);border-top-color:var(--ix-edge-hi);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--ix-hl),0 20px 44px -18px rgba(3,3,4,.95)}
.ix-sw-ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;transition:transform .3s var(--ix-ease-out)}
.ix-sw-ind i{position:absolute;inset:0;border-radius:inherit;transition:opacity .3s var(--ix-ease-out)}
.ix-sw-ind .is-d{background:var(--ix-ice)}
.ix-sw-ind .is-p{background:var(--ix-red);opacity:0}
.ix[data-model="b58"] .ix-sw-ind{transform:translateX(100%)}
.ix[data-model="b58"] .ix-sw-ind .is-p{opacity:1}
.ix[data-model="b58"] .ix-sw-ind .is-d{opacity:0}
.ix-switch button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px 0 16px;border:0;border-radius:999px;background:transparent;color:var(--ix-fg2);
  font:700 14.5px/1 var(--ix-font);font-stretch:112%;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ix-ease-out)}
.ix-switch button i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45}
.ix-switch button[data-ix-model="b57"][aria-pressed="true"]{color:var(--ix-ice-ink)}
.ix-switch button[data-ix-model="b58"][aria-pressed="true"]{color:var(--ix-red-ink)}
.ix-switch button[aria-pressed="true"] i{opacity:1}
.ix-switch button:active{transform:scale(.97)}
.ix-switch button:focus-visible{outline-offset:2px;border-radius:999px}
@media (hover:hover) and (pointer:fine){.ix-switch button[aria-pressed="false"]:hover{color:var(--ix-white)}}

/* Typografie */
.ix-lead{max-width:62ch;margin:clamp(56px,7vw,96px) auto 0;text-align:center;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ix-fg2);text-wrap:pretty}
.ix-k{display:flex;align-items:center;gap:12px;margin:0;font:600 11px/1.3 var(--ix-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ix-acc)}
.ix-k::before{content:"";flex:none;width:24px;height:2px;border-radius:2px;background:currentColor}
.ix-h3{margin:0;font:840 clamp(28px,3.6vw,52px)/.98 var(--ix-font);font-stretch:122%;letter-spacing:-.015em;text-transform:uppercase;color:var(--ix-white);text-wrap:balance}
.ix-h3-sm{font-size:clamp(24px,2.4vw,34px)}
.ix-p{margin:0;color:var(--ix-fg2);font-size:16px;line-height:1.6;max-width:64ch;text-wrap:pretty}
.ix-p-lg{font-size:clamp(17px,1.4vw,19px)}
.ix-blk{margin-top:clamp(80px,10vw,140px)}
.ix-bh{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,3.6vw,48px)}

/* Milchglas-Karten mit heller Kante */
.ix-glass{position:relative;border-radius:var(--ix-r);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 60%,rgba(255,255,255,.03));
  border:1px solid var(--ix-edge);border-top-color:var(--ix-edge-hi);
  box-shadow:inset 0 1px 0 var(--ix-hl),inset 0 -1px 0 rgba(255,255,255,.03),0 40px 80px -44px rgba(3,3,4,.95);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}

/* Modellwechsel */
.ix-model{animation:ix-in .3s var(--ix-ease-out)}
@keyframes ix-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Kennzeile */
.ix-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(48px,6vw,72px) 0 0;border-block:1px solid var(--ix-line)}
.ix-spec>div{min-width:0;padding:20px 22px 20px 0}
.ix-spec>div+div{padding-left:22px;border-left:1px solid var(--ix-line)}
.ix-spec dt{font:500 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-mut)}
.ix-spec dd{margin:8px 0 0;font:700 clamp(16px,1.4vw,19px)/1.25 var(--ix-font);font-stretch:110%;color:var(--ix-white)}
.ix-spec small{display:block;margin-top:6px;font:500 11.5px/1.45 var(--ix-mono);letter-spacing:.02em;color:var(--ix-mut)}

/* Leistung: Stufenkarten + Widgets */
.ix-perf{display:flex;flex-direction:column;gap:16px;min-width:0}
.ix-cards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;min-width:0}
.ix-card{display:flex;flex-direction:column;gap:12px;width:100%;margin:0;padding:18px 18px 16px;text-align:left;color:var(--ix-fg);font:inherit;cursor:pointer;container-type:inline-size;
  transition:transform .16s var(--ix-ease-out)}
.ix-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s var(--ix-ease-out);
  border:1.5px solid var(--ix-acc);background:linear-gradient(180deg,var(--ix-acc-soft),transparent 75%)}
.ix-card[aria-pressed="true"]::after{opacity:1}
.ix-card:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ix-card[aria-pressed="false"]:hover{border-color:rgba(255,255,255,.26)}}
.ix-card>*{position:relative;z-index:1}
.ix-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.ix-card-n{font:850 15px/1 var(--ix-font);font-stretch:120%;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ix-card[aria-pressed="true"] .ix-card-n{color:var(--ix-acc)}
.ix-tag{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:5px 9px;border:1px solid var(--ix-line2);border-radius:999px;font:600 10px/1.15 var(--ix-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ix-fg2);text-align:right}
.ix-tag.is-ok .ix-ck{color:var(--ix-ok)}
.ix-row{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.ix-from{font:640 clamp(16px,1.35vw,19px)/1 var(--ix-font);font-stretch:112%;color:var(--ix-mut)}
.ix-arr{font:700 15px/1 var(--ix-font);font-stretch:100%;letter-spacing:-.02em;color:var(--ix-acc);padding:0 .1em}
.ix-to{font:850 clamp(22px,2vw,28px)/1 var(--ix-font);font-stretch:118%;letter-spacing:-.01em;color:var(--ix-white)}
.ix-row small{margin-left:1px;font-size:.6em;font-weight:760;letter-spacing:.02em}
.ix-gain{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font:700 13.5px/1 var(--ix-mono);font-variant-numeric:tabular-nums;color:var(--ix-ok)}
.ix-gain small{font-size:.86em;font-weight:600}
.ix-ck{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ix-meta{padding-top:10px;border-top:1px solid var(--ix-line);font:500 11px/1.45 var(--ix-mono);letter-spacing:.02em;color:var(--ix-mut);white-space:normal}
@container (max-width:290px){
  .ix-from{font-size:15px}
  .ix-to{font-size:22px}
  .ix-arr{font-size:13px}
  .ix-gain{font-size:12.5px}
}

/* Widgets: Leistung, Drehmoment, Zuwachs */
.ix-wg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,30px)}
.ix-wg-hint{margin:0;font:500 11px/1.4 var(--ix-mono);letter-spacing:.06em;color:var(--ix-mut)}
.ix-lk-h{width:16px;height:10px;border-radius:2px;background:repeating-linear-gradient(135deg,var(--ix-acc) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ix-acc) 50%,transparent)}
.ix-wgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;min-width:0}
.ix-wg{display:flex;flex-direction:column;margin:0;padding:22px 22px 16px;min-width:0;overflow:hidden;isolation:isolate}
/* Studio-Licht von oben rechts auf der Karte */
.ix-wg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(110% 55% at 88% -12%,rgba(255,250,246,.075),transparent 62%)}
.ix-wg-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.ix-wg-k{font:600 11px/1.2 var(--ix-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-wg-st{font:850 11.5px/1 var(--ix-font);font-stretch:120%;letter-spacing:.1em;text-transform:uppercase;color:var(--ix-acc);white-space:nowrap}
.ix-wg-v{display:flex;align-items:baseline;gap:10px;margin:0}
.ix-wg-v b{font:850 clamp(54px,5vw,76px)/.86 var(--ix-dots);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ix-white)}
.ix-wg-v span{font:760 clamp(16px,1.4vw,19px)/1 var(--ix-font);font-stretch:112%;color:var(--ix-fg2)}
.ix-wg-v2{margin-top:10px}
.ix-wg-v2 b{font-size:clamp(36px,3.2vw,48px)}
.ix-wg-s{display:flex;flex-wrap:wrap;gap:2px 10px;min-height:2.9em;margin:12px 0 0;font:500 12px/1.45 var(--ix-mono);letter-spacing:.02em;color:var(--ix-mut);font-variant-numeric:tabular-nums}
.ix-wg-d{color:var(--ix-ok);font-weight:600}
.ix-wg-plot{position:relative;margin-top:auto;padding-top:14px;touch-action:pan-y;cursor:crosshair;border-radius:10px;outline-offset:4px}
.ix-wg-plot svg{display:block;width:100%;height:auto;overflow:visible}
.ix-wg-plot text{font-variant-numeric:tabular-nums}
.ix-wg-plot .w-dot{fill:rgba(244,245,247,.2)}
.ix-wg-plot .w-base{stroke:rgba(244,245,247,.16);stroke-width:1;shape-rendering:crispEdges}
.ix-wg-plot .w-band{fill:var(--ix-acc);opacity:.07}
.ix-wg-plot .w-band-e{stroke:var(--ix-acc);stroke-width:1;stroke-dasharray:2 3;opacity:.45;shape-rendering:crispEdges}
.ix-wg-plot .w-s0{stop-color:var(--ix-acc);stop-opacity:.24}
.ix-wg-plot .w-s1{stop-color:var(--ix-acc);stop-opacity:0}
.ix-wg-plot .w-hx{stroke:var(--ix-acc);stroke-width:1.1;opacity:.5}
.ix-wg-plot .w-serie{fill:none;stroke:var(--ix-serie);stroke-width:1.4;stroke-dasharray:3 4;stroke-linecap:round;opacity:.9}
.ix-wg-plot .w-stage{fill:none;stroke:var(--ix-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ix-wg-plot .w-pk-g{transition:opacity .2s var(--ix-ease-out)}
.ix-wg-plot .w-pk-h{fill:var(--ix-acc);opacity:.2}
.ix-wg-plot .w-pk{fill:var(--ix-white);stroke:var(--ix-acc);stroke-width:2.5}
.ix-wg-plot .w-pk-t{font:700 9.5px var(--ix-mono);letter-spacing:.16em;fill:var(--ix-white)}
.ix-wg-plot .w-tx{font:500 10.5px var(--ix-mono);fill:var(--ix-mut)}
.ix-wgs.is-x .w-pk-g{opacity:.25}
/* Einheitlicher Mess-Cursor (site.css .mc) in der Studio-Welt (dunkel; hell siehe Hell-Modus) */
.ix .mc{--fg:var(--ix-white);--fg2:var(--ix-fg2);--mut:var(--ix-mut);--bg:var(--ix-ink);--acc:var(--ix-acc);
  --edge:var(--ix-edge);--edge-hi:var(--ix-edge-hi);--glass2:rgba(14,14,18,.84);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 46%);
  --sh-2:0 1px 1px rgba(0,0,0,.35),0 12px 30px -12px rgba(0,0,0,.8);--mc-ln:rgba(244,245,247,.62)}
.ix .mc-d1{background:var(--ix-acc);box-shadow:0 0 0 2px var(--ix-ink),0 0 0 3.5px rgba(244,245,247,.5)}
.ix .mc-d2{background:var(--ix-serie);box-shadow:0 0 0 2px var(--ix-ink)}
.ix .mc-s .mc-up{color:var(--ix-ok)}
/* Zuwachs: Säulen je Drehzahl, darunter Serie grau und Zuwachs schraffiert */
.ix-gc{margin-top:auto;padding-top:18px}
.ix-gc svg{display:block;width:100%;height:auto;overflow:visible}
.ix-gc .c-col{stroke:var(--ix-acc);stroke-width:1;stroke-opacity:.5}
.ix-gc .c-col.is-on{fill:var(--ix-acc);stroke:none}
.ix-gc .w-hx{stroke:var(--ix-acc);stroke-width:1.1;opacity:.55}
.ix-gc .c-base{stroke:rgba(244,245,247,.16);stroke-width:1;shape-rendering:crispEdges}
.ix-gc .c-tx{font:500 10px var(--ix-mono);fill:var(--ix-mut);font-variant-numeric:tabular-nums}
.ix-gc-l{margin:8px 0 0;font:500 10.5px/1.3 var(--ix-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ix-mut)}
.ix-gb{display:flex;flex-direction:column;gap:18px;padding-top:22px}
.ix-gb-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 9px;font:500 11px/1.3 var(--ix-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-gb-n{letter-spacing:.02em;text-transform:none;color:var(--ix-white);font-variant-numeric:tabular-nums;white-space:nowrap}
.ix-gb-t{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.ix-gb-t i{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--ix-ease-in-out)}
.ix-gb-t .is-g{background:repeating-linear-gradient(135deg,var(--ix-acc) 0 2px,color-mix(in srgb,var(--ix-acc) 35%,transparent) 2px 5px)}
.ix-gb-t .is-s{background:#5d636c}
.ix-wgs.is-x .ix-gb-t i{transition-duration:.12s;transition-timing-function:var(--ix-ease-out)}
.ix-wg-dots{display:none;justify-content:center;gap:8px;margin-top:-2px}
.ix-wg-dots i{width:6px;height:6px;border-radius:50%;background:rgba(244,245,247,.25);transition:transform .2s var(--ix-ease-out),background .2s var(--ix-ease-out)}
.ix-wg-dots i.is-on{background:var(--ix-acc);transform:scale(1.25)}
.ix-chips{display:none;gap:3px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--ix-line)}
.ix-chips button{min-width:48px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ix-fg2);font:700 13px/1 var(--ix-mono);cursor:pointer;transition:transform .16s var(--ix-ease-out)}
.ix-chips button[aria-pressed="true"]{background:var(--ix-acc);color:var(--ix-acc-ink)}
.ix-chips button:active{transform:scale(.97)}
.ix-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;font:500 11.5px/1.4 var(--ix-mono);letter-spacing:.04em;color:var(--ix-fg2)}
.ix-legend>span{display:inline-flex;align-items:center;gap:8px}
.ix-lk-s,.ix-lk-d,.ix-lk-o,.ix-lk-t{display:inline-block;flex:none;width:20px}
.ix-lk-s{height:2px;border-radius:2px;background:var(--ix-acc)}
.ix-lk-d{height:0;border-top:2px dashed var(--ix-serie)}
.ix-note{margin:6px 0 0;font:500 11.5px/1.5 var(--ix-mono);letter-spacing:.02em;color:var(--ix-mut)}
.ix-tbl{border-top:1px solid var(--ix-line);padding-top:4px}
.ix-tbl summary,.ix-acc summary{list-style:none;cursor:pointer}
.ix-tbl summary::-webkit-details-marker,.ix-acc summary::-webkit-details-marker{display:none}
.ix-tbl summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 11.5px/1.4 var(--ix-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-tbl summary::before{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);transition:transform .2s var(--ix-ease-out)}
.ix-tbl[open] summary::before{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.ix-tbl summary:hover{color:var(--ix-white)}}
.ix-tbl-in{overflow-x:auto;margin-top:4px;padding-bottom:4px}
.ix-tbl-in table{width:100%;min-width:480px;border-collapse:collapse;font:500 12px/1.4 var(--ix-mono);font-variant-numeric:tabular-nums;color:var(--ix-fg2)}
.ix-tbl-in caption{text-align:left;padding-bottom:8px;color:var(--ix-mut);font-size:11px}
.ix-tbl-in th,.ix-tbl-in td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--ix-line);white-space:nowrap}
.ix-tbl-in th:first-child,.ix-tbl-in td:first-child{text-align:left;padding-left:0}
.ix-tbl-in thead th{color:var(--ix-mut);font-weight:500;font-size:10.5px;letter-spacing:.08em}
.ix-tbl-in tbody th{color:var(--ix-white);font-weight:600}
.ix-tbl-in .is-sel{color:var(--ix-acc)}

/* Getriebe / Motor */
.ix-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.ix-split-t{display:flex;flex-direction:column;gap:18px;min-width:0}
.ix-list{list-style:none;margin:10px 0 0;padding:0}
.ix-list li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--ix-line);color:var(--ix-fg2);font-size:15.5px;line-height:1.5}
.ix-list li:last-child{border-bottom:1px solid var(--ix-line)}
.ix-list li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:7px;border:solid var(--ix-ok);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.ix-list b{color:var(--ix-white);font-weight:650}
.ix-shift{margin:0;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:14px;min-width:0}
.ix-fig-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ix-lab{font:600 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-fg2)}
.ix-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--ix-line2);border-radius:999px;font:500 10px/1 var(--ix-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ix-mut);white-space:nowrap}
.ix-shift-svg{display:block;width:100%;height:auto;overflow:visible}
.ix-shift-svg .s-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.ix-shift-svg .s-ax{stroke:rgba(255,255,255,.22);stroke-width:1}
.ix-shift-svg .s-tx{font:500 11px var(--ix-mono);fill:var(--ix-mut);letter-spacing:.06em}
.ix-shift-svg .s-g{font:700 11px var(--ix-mono);fill:var(--ix-fg2)}
.ix-shift-svg .s-serie{fill:none;stroke:var(--ix-serie);stroke-width:1.5;stroke-dasharray:5 5}
.ix-shift-svg .s-fs{fill:none;stroke:var(--ix-acc);stroke-width:2.2;stroke-linejoin:round}
.ix-shift-svg .s-up{fill:var(--ix-acc);stroke:var(--ix-ink);stroke-width:2}
.ix-shift-svg .s-ref{stroke-width:1;stroke-dasharray:2 4}
.ix-shift-svg .s-ref.is-serie{stroke:var(--ix-serie)}
.ix-shift-svg .s-ref.is-fs{stroke:var(--ix-acc)}
.ix-shift-svg .s-br{fill:none;stroke:var(--ix-white);stroke-width:1.4}
.ix-shift-svg .s-call{font:700 12px var(--ix-mono);fill:var(--ix-white);font-variant-numeric:tabular-nums}
.ix-tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:6px 0 0}
.ix-tech>div{padding:14px 0;border-top:1px solid var(--ix-line);min-width:0}
.ix-tech dt{font:500 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-mut)}
.ix-tech dd{margin:6px 0 0;font:700 17px/1.3 var(--ix-font);font-stretch:108%;color:var(--ix-white)}
.ix-engine{position:relative;margin:0;display:grid;place-items:center;min-width:0}
/* Studio-Spot von oben auf den freigestellten Motor */
.ix-engine::before{content:"";position:absolute;left:50%;top:-6%;width:86%;height:112%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 42% at 50% 30%,rgba(255,247,240,.07),transparent 72%),radial-gradient(42% 10% at 50% 92%,rgba(255,247,240,.06),transparent 75%)}
.ix-eng-img{position:relative;display:block;width:min(100%,560px);height:auto;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 70%,transparent 100%)}
.ix-badge-lg{position:absolute;top:6%;right:4%;font-size:clamp(26px,3vw,40px)}

/* Ablauf */
.ix-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.ix-step{display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px;min-width:0}
.ix-sn{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--ix-mono);letter-spacing:.12em;color:var(--ix-acc)}
.ix-sn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--ix-acc),transparent);opacity:.5}
.ix-step b{font:820 clamp(19px,1.7vw,23px)/1.12 var(--ix-font);font-stretch:116%;text-transform:uppercase;letter-spacing:.005em;color:var(--ix-white)}
.ix-step p{margin:0;color:var(--ix-fg2);font-size:15.5px;line-height:1.55}

/* Bauteilschutz + Ölservice */
.ix-two{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:16px;align-items:stretch}
.ix-guard,.ix-oil{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.6vw,32px);min-width:0}
.ix-table{width:100%;border-collapse:collapse;margin-top:4px;font-variant-numeric:tabular-nums}
.ix-table thead th{padding:0 0 10px;font:500 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-mut);text-align:left}
.ix-table thead th:last-child{text-align:right}
.ix-table tbody th,.ix-table tbody td{padding:12px 0;border-top:1px solid var(--ix-line);vertical-align:baseline}
.ix-table tbody th{font:500 15px/1.35 var(--ix-font);color:var(--ix-fg2);text-align:left;padding-right:12px}
.ix-table tbody th small{display:block;margin-top:3px;font:500 11px/1.3 var(--ix-mono);color:var(--ix-mut)}
.ix-table tbody td{font:600 15px/1.35 var(--ix-mono);color:var(--ix-white);text-align:right;white-space:nowrap}
.ix-table .ix-grp th{padding:20px 0 8px;border-top:0;font:600 10.5px/1.3 var(--ix-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ix-white)}
.ix-table tbody:first-of-type .ix-grp th{padding-top:6px}
.ix-grp i{display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;vertical-align:1px}
.ix-grp.is-ok i{background:var(--ix-ok)}
.ix-grp.is-warn i{background:var(--ix-warn)}
.ix-ruler{position:relative;height:58px;margin:6px 4px 0}
.ix-rl{position:absolute;left:0;right:0;top:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.08))}
.ix-rm{position:absolute;top:22px;left:calc(var(--x) * 1%);transform:translate(-50%,-50%)}
.ix-rm.is-oil{width:10px;height:10px;margin-top:1px;border-radius:50%;background:var(--ix-acc);box-shadow:0 0 0 3px #111114}
.ix-rm.is-tcu{width:3px;height:26px;margin-top:1px;border-radius:2px;background:var(--ix-white)}
.ix-rt{position:absolute;top:44px;left:calc(var(--x) * 1%);transform:translateX(-50%);font:500 10.5px/1 var(--ix-mono);color:var(--ix-mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.ix-rt[style*="--x:0"]{transform:none}
.ix-rt[style*="--x:100"]{transform:translateX(-100%)}
.ix-rlg{font-size:11px}
.ix-lk-o{width:10px;height:10px;border-radius:50%;background:var(--ix-acc)}
.ix-lk-t{width:3px;height:14px;border-radius:2px;background:var(--ix-white)}
.ix-oil-l{margin:4px 0 0}
.ix-oil-l>div{padding:13px 0;border-top:1px solid var(--ix-line)}
.ix-oil-l dt{font:700 15.5px/1.35 var(--ix-font);font-stretch:106%;color:var(--ix-white)}
.ix-oil-l dd{margin:6px 0 0;color:var(--ix-fg2);font-size:14.5px;line-height:1.55}
.ix-oil-f{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--ix-line);font:600 12px/1.4 var(--ix-mono);letter-spacing:.06em;color:var(--ix-acc)}

/* Applikation (gemeinsam) */
.ix-app{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,80px);align-items:center}
.ix-app-img{position:relative;margin:0;min-width:0;display:flex;justify-content:center}
.ix-app-img img{position:relative;display:block;width:min(100%,460px);height:auto;
  -webkit-mask-image:radial-gradient(52% 50% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(52% 50% at 50% 52%,#000 62%,transparent 100%)}
.ix-app-t{display:flex;flex-direction:column;gap:18px;min-width:0}
.ix-princ{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ix-princ li{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:16px;min-width:0}
.ix-princ b{font:780 16px/1.25 var(--ix-font);font-stretch:110%;color:var(--ix-white)}
.ix-princ b::before{content:"";display:block;width:18px;height:2px;margin-bottom:14px;border-radius:2px;background:var(--ix-acc)}
.ix-princ span{color:var(--ix-fg2);font-size:14.5px;line-height:1.55}

/* FAQ */
.ix-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.ix-faq .ix-bh{margin:0}
.ix-acc details{border-top:1px solid var(--ix-line)}
.ix-acc details:last-child{border-bottom:1px solid var(--ix-line)}
.ix-acc summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:20px 0;font:680 clamp(17px,1.5vw,20px)/1.35 var(--ix-font);font-stretch:104%;color:var(--ix-white);border-radius:8px}
.ix-acc summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--ix-line2);transition:transform .25s var(--ix-ease-out)}
.ix-acc summary i::before,.ix-acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;border-radius:2px;background:currentColor}
.ix-acc summary i::after{transform:rotate(90deg)}
.ix-acc details[open] summary i{transform:rotate(45deg);border-color:var(--ix-acc);color:var(--ix-acc)}
@media (hover:hover) and (pointer:fine){.ix-acc summary:hover>span{color:var(--ix-acc)}}
.ix-acc details>p{margin:0;padding:0 56px 24px 0;color:var(--ix-fg2);font-size:16px;line-height:1.6;animation:ix-ans .25s var(--ix-ease-out)}
@keyframes ix-ans{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Abschluss */
.ix-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(80px,10vw,140px);padding:clamp(24px,3.6vw,44px)}
.ix-cta-t{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1 1 380px}
.ix-btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px 0 28px;border-radius:999px;background:var(--ix-acc);color:var(--ix-acc-ink);
  font:760 15.5px/1 var(--ix-font);font-stretch:110%;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ix-ease-out),filter .2s var(--ix-ease-out)}
.ix-btn:active{transform:scale(.97)}
.ix-btn-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ix-ease-out)}
@media (hover:hover) and (pointer:fine){
  .ix-btn:hover{filter:brightness(1.08)}
  .ix-btn:hover .ix-btn-i{transform:translateX(3px)}
}

/* ---------- Responsiv ---------- */
@media (max-width:1099px){
  .ix-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ix-chips{display:inline-flex}
  .ix-wg-hint{display:none}
  /* Widgets als wischbare Reihe im eigenen Container */
  .ix-wgs{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--ix-gut) * -1);padding:4px var(--ix-gut) 10px;scroll-padding-inline:var(--ix-gut)}
  .ix-wgs::-webkit-scrollbar{display:none}
  .ix-wg{flex:0 0 min(400px,46%);scroll-snap-align:start}
  .ix-wg-dots{display:flex}
}
@media (max-width:900px){
  .ix-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ix-spec>div:nth-child(3){padding-left:0;border-left:0}
  .ix-spec>div:nth-child(n+3){border-top:1px solid var(--ix-line)}
  .ix-split,.ix-app,.ix-faq,.ix-two{grid-template-columns:minmax(0,1fr)}
  .ix-steps{grid-template-columns:minmax(0,1fr)}
  .ix-app-img{order:2}
}
/* Schmal: Modell-Headlines stehen über dem Dach statt neben dem Fahrzeug */
@media (max-width:900px){
  .ix-stage{--iw:min(92vw,720px)}
  .ix-claim{padding-top:44px;padding-bottom:124px}
  .ix-side{bottom:calc(var(--iw) * (.73 - var(--crop)) + 6px);transform:none;width:calc(50% - var(--ix-gut) - 8px);height:112px;justify-content:flex-start;gap:7px}
  .ix-side-d{left:var(--ix-gut);right:auto}
  .ix-side-p{right:var(--ix-gut);left:auto}
  .ix-side-h{font-size:clamp(17px,4.9vw,26px);gap:.3em}
  .ix-side-sub{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
  .ix-side-k{display:none}
  .ix-side-fig{font-size:clamp(17px,5vw,24px)}
}
@media (max-width:700px){
  .ix-stage{--iw:min(150vw,660px);--fs:calc((100vw - 2 * var(--ix-gut)) / 10.5)}
  .ix-sub{font-size:10px;letter-spacing:.14em}
  .ix-handle{width:52px;height:52px;margin:0 0 -26px -26px}
  .ix-hint{bottom:calc(var(--iw) * .40 - 50px)}
  .ix-cards{grid-template-columns:minmax(0,1fr)}
  .ix-wg{flex-basis:84%;padding:20px 18px 14px}
  .ix-switch button{min-height:44px;padding:0 15px 0 13px;font-size:14px}
  .ix-princ{grid-template-columns:minmax(0,1fr)}
  .ix-tech{grid-template-columns:minmax(0,1fr)}
  .ix-acc details>p{padding-right:0}
}
@media (max-width:420px){
  .ix-side-sub{font-size:8.6px;letter-spacing:.04em}
  .ix-switch button{padding:0 12px 0 11px;gap:7px;font-size:13.5px}
  .ix-spec>div{padding-right:12px}
  .ix-spec>div+div{padding-left:12px}
}

/* Reduzierte Bewegung: keine Positionsbewegung, Deckkraft darf bleiben */
.motion-reduce .ix-beam,.motion-reduce .ix-src{animation:none}
.motion-reduce .ix-model{animation:ix-fade .3s var(--ix-ease-out)}
.motion-reduce .ix-acc details>p{animation:none}
.motion-reduce .ix-sw-ind,.motion-reduce .ix-card,.motion-reduce .ix-btn,.motion-reduce .ix-btn-i,.motion-reduce .ix-chips button,.motion-reduce .ix-switch button,.motion-reduce .ix-acc summary i,.motion-reduce .ix-tbl summary::before,.motion-reduce .ix-handle svg,.motion-reduce .ix-gb-t i,.motion-reduce .ix-wg-dots i{transition:none}
.motion-reduce .ix-card:active,.motion-reduce .ix-btn:active,.motion-reduce .ix-chips button:active,.motion-reduce .ix-switch button:active{transform:none}
@keyframes ix-fade{from{opacity:.4}to{opacity:1}}
@media (forced-colors:active){
  .ix-div::before{background:CanvasText}
  .ix-handle{border-color:CanvasText}
  .ix-card[aria-pressed="true"]{outline:2px solid Highlight}
  .ix-sw-ind{display:none}
  .ix-switch button[aria-pressed="true"]{outline:2px solid Highlight}
}

/* Kacheln je Motor: Steuergerät (MD1-CP032 / MG1CS024) und Oil Pressure Fix
   Die Oil-Pressure-Fix-Kachel ist ein Link ins Kapitel Öldruck; beim Überfahren öffnet xlink.js eine Vorschau. */
.ix-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.ix-tile{display:flex;flex-direction:column;gap:22px;min-width:0;padding:clamp(24px,3vw,36px);color:inherit;text-decoration:none}
.ix-tile-t{display:flex;flex-direction:column;gap:12px}
.ix-tile-t>*{display:block;margin:0}
.ix-tile-t>.ix-k{display:flex}
.ix-tile-tags{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:0;list-style:none}
.ix-tile-tags li{display:inline-flex;align-items:center;gap:.35em;height:26px;padding:0 10px;border:1px solid var(--ix-line2);border-radius:999px;font:500 10.5px/1 var(--ix-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ix-fg2);white-space:nowrap}
/* Status: kein Unlock, alles am Fahrzeug */
.ix-tile-tags .ix-tag-ok{gap:.6em;color:var(--ix-ok);border-color:color-mix(in srgb,var(--ix-ok) 42%,transparent);background:color-mix(in srgb,var(--ix-ok) 9%,transparent)}
.ix-tile-tags .ix-tag-ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--ix-ok) 22%,transparent)}
/* Steuergerät: Platine als Punktraster (Nothing), Rechner in der Mitte, Pins oben und unten */
.ix-ecu{position:relative;height:128px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle,var(--ix-dot,rgba(255,255,255,.17)) 1px,transparent 1.4px) 50% 50%/11px 11px;
  -webkit-mask-image:radial-gradient(75% 90% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(75% 90% at 50% 50%,#000 45%,transparent 100%)}
.ix-ecu-chip{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:min(46%,190px);height:62px;transform:translate(-50%,-50%);
  border:1px solid var(--ix-acc);border-radius:10px;background:var(--ix-bg);box-shadow:0 0 0 5px var(--ix-acc-soft),0 0 34px -6px var(--ix-acc)}
.ix-ecu-chip::before,.ix-ecu-chip::after{content:"";position:absolute;left:10px;right:10px;height:9px;
  background:repeating-linear-gradient(90deg,var(--ix-fg2) 0 2px,transparent 2px 9px);opacity:.55}
.ix-ecu-chip::before{top:-11px}
.ix-ecu-chip::after{bottom:-11px}
.ix-ecu-chip b{font:850 19px/1 var(--ix-font);font-stretch:122%;letter-spacing:.04em;color:var(--ix-white)}
.ix-ecu-chip small{font:600 10px/1 var(--ix-mono);letter-spacing:.2em;color:var(--ix-acc)}
/* Oil Pressure Fix: Solldruck Serie gegen Fix, schematisch */
.ix-opf{display:block;width:100%;max-width:400px;height:auto;overflow:visible}
.ix-opf .o-ax{fill:none;stroke:var(--ix-line2);stroke-width:1}
.ix-opf .o-ar{fill:var(--ix-acc-soft)}
.ix-opf .o-cap{fill:none;stroke:var(--ix-fg2);stroke-opacity:.6;stroke-width:1;stroke-dasharray:1 3}
.ix-opf .o-s{fill:none;stroke:var(--ix-mut);stroke-width:1.6;stroke-dasharray:4 5}
.ix-opf .o-f{fill:none;stroke:var(--ix-acc);stroke-width:2.6;stroke-linecap:round}
.ix-opf text{font:500 10px var(--ix-mono);letter-spacing:.06em;fill:var(--ix-mut)}
.ix-opf .o-tf{font-weight:700;fill:var(--ix-acc)}
.ix-tile-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font:600 12px/1 var(--ix-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ix-acc)}
.ix-tile-go .ix-btn-i{width:16px;height:16px;transition:transform .32s var(--ix-ease-out)}
.ix-tile-link{cursor:pointer;transition:transform .32s var(--ix-ease-out),border-color .2s var(--ix-ease-out)}
@media (hover:hover) and (pointer:fine){
  .ix-tile-link:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24)}
  .ix-tile-link:hover .ix-tile-go .ix-btn-i{transform:translateX(4px)}
}
.ix-tile-link:active{transform:scale(.985)}
.ix-tile-link:focus-visible{outline:2px solid var(--ix-acc);outline-offset:4px}
/* Rücksprung aus dem Kapitel Öldruck: kurzer Lichtring */
.ix-tile.is-ping{animation:ix-ping 2.4s var(--ix-ease-out)}
@keyframes ix-ping{0%,12%{outline:2px solid var(--ix-acc);outline-offset:10px}60%{outline:2px solid var(--ix-acc);outline-offset:3px}100%{outline:2px solid transparent;outline-offset:3px}}
@media (max-width:900px){.ix-tiles{grid-template-columns:minmax(0,1fr)}}
.motion-reduce .ix-tile-link,.motion-reduce .ix-tile-go .ix-btn-i{transition:none}
.motion-reduce .ix-tile-link:hover,.motion-reduce .ix-tile-link:active{transform:none}

/* Nur im Hell-Modus sichtbar: Freistellung und Code-Landschaft */
.ix-cut,.ix-land,.ix-code{display:none}

/* =====================================================================
   Hell-Modus (Seitenthema "light")
   Weißes Fotostudio: Hohlkehle ohne Horizontkante, das Fahrzeug freigestellt
   mit Kontaktschatten und Spiegelung auf glänzendem Boden, weißer Lichtkegel,
   heller Dunst. Diesel kühl, Benziner warm getönt. Flächen Weiß und Hellgrau,
   Karten als weißes Liquid Glass (Haarlinie, Glanzkante oben, langer weicher
   Schatten). Wo im Dunkeln Schwarz liegt, liegt eine sehr leise Code-Landschaft
   (Punktraster und Kennfeld-Auszüge, ineos.js). Akzente vertieft für AA:
   Eisblau #0a6aa1 (5,4 : 1 auf #f5f5f7), Rot #d0101e (5,1 : 1), Weiß darauf ≥ 5,5 : 1.
   ===================================================================== */
:root[data-theme="light"] .ix{
  --ix-bg:#f5f5f7;
  --ix-white:#1d1d1f;              /* stärkste Schrift (im Dunkeln Weiß) */
  --ix-fg:#1d1d1f;
  --ix-fg2:#424245;                /* 9,2 : 1 auf #f5f5f7 */
  --ix-mut:#66666b;                /* 5,2 : 1 auf #f5f5f7, 4,9 : 1 auf der Studiowand */
  --ix-line:rgba(29,29,31,.09);
  --ix-line2:rgba(29,29,31,.15);
  --ix-edge:rgba(29,29,31,.075);
  --ix-edge-hi:rgba(255,255,255,.95);
  --ix-hl:rgba(255,255,255,.95);
  --ix-ink:#fff;
  --ix-red:#d0101e;
  --ix-red-ink:#fff;
  --ix-red-soft:rgba(208,16,30,.075);
  --ix-ice:#0a6aa1;
  --ix-ice-ink:#fff;
  --ix-ice-soft:rgba(10,106,161,.075);
  --ix-ok:#15803d;
  --ix-warn:#b45309;
  --ix-serie:#86868b;              /* Grafik 3,3 : 1 */
  --ix-dot:rgba(29,29,31,.16);
  --ix-sh:0 1px 2px rgba(20,24,32,.045),0 2px 6px -2px rgba(20,24,32,.05),0 34px 64px -38px rgba(20,24,32,.3);
  color-scheme:light;
  border-bottom-color:rgba(29,29,31,.07);
}
:root[data-theme="light"] .ix ::selection{background:color-mix(in srgb,var(--ix-acc) 18%,transparent);color:var(--ix-white)}

/* ---------- Studio ---------- */
:root[data-theme="light"] .ix-stage{background:#eef0f3}
/* Wand oben (wt), Mitte (wm), Horizont (wh), Boden vorn (fl); Licht weiß, Leuchtenfarbe je Welt */
:root[data-theme="light"] .ix-w-d{--bc:255,255,255;--lc:10,132,200;--wt:#d9e1ea;--wm:#e8edf3;--wh:#f7f9fb;--fl:#edf1f5}
:root[data-theme="light"] .ix-w-p{--bc:255,255,255;--lc:226,20,32;--wt:#e6e0dc;--wm:#f0ebe8;--wh:#fbf9f7;--fl:#f3efec}
:root[data-theme="light"] .ix-w-d .ix-amb,:root[data-theme="light"] .ix-w-p .ix-amb{background-color:transparent;
  background-image:linear-gradient(0deg,var(--wh) 0,var(--wh) calc(var(--iw) * (.275 - var(--crop))),var(--wm) calc(var(--iw) * .64),var(--wt) 100%)}
/* Boden: glänzend, Lichtinsel unter dem Fahrzeug, zum Betrachter minimal dunkler */
:root[data-theme="light"] .ix-floor{
  background:
    radial-gradient(34% 120% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(60% 90% at 50% 0%,rgba(var(--lc),.035),transparent 80%),
    linear-gradient(180deg,var(--wh) 0,var(--fl) 100%)}
:root[data-theme="light"] .ix-floor::before{display:none}
/* Lichtkegel: weißes Licht auf heller Wand, Quelle als weiche Blüte */
:root[data-theme="light"] .ix-beam{
  background:
    conic-gradient(from 168deg at 50% 0,transparent 0deg,rgba(255,255,255,.3) 5deg,rgba(255,255,255,.82) 12deg,rgba(255,255,255,.3) 19deg,transparent 24deg),
    conic-gradient(from 176deg at 50% 0,transparent 0deg,rgba(255,255,255,.6) 4deg,transparent 8deg)}
:root[data-theme="light"] .ix-src{background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.35) 45%,rgba(255,255,255,0))}
:root[data-theme="light"] .ix-fog{mix-blend-mode:normal}
/* Punktraster der Code-Landschaft auch in der Hohlkehle: nur in den äußeren Ecken, nie am Fahrzeug */
:root[data-theme="light"] .ix-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle,rgba(29,29,31,.13) 0 .8px,transparent 1.15px) 50% 0/16px 16px;
  -webkit-mask-image:radial-gradient(64% 78% at 50% 62%,transparent 52%,rgba(0,0,0,.55) 82%,#000 100%);
  mask-image:radial-gradient(64% 78% at 50% 62%,transparent 52%,rgba(0,0,0,.55) 82%,#000 100%)}
/* Freistellung statt Studiofoto; Lage und Größe wie im Foto (Ausschnitt 787 × 810 aus 1600 × 1600) */
:root[data-theme="light"] .ix-car{display:none}
:root[data-theme="light"] .ix-cut{display:block;position:absolute;left:25.375%;top:26.875%;width:49.1875%;height:auto;max-width:none;
  -webkit-box-reflect:below calc(var(--iw) * -.0068) linear-gradient(transparent 74%,rgba(0,0,0,.2));
  transition:opacity .45s var(--ix-ease-out)}
:root[data-theme="light"] .ix-stage.is-js .ix-cut:not(.is-ok){opacity:0}
:root[data-theme="light"] .ix-cut-d.is-fallback{filter:grayscale(1) sepia(.55) hue-rotate(168deg) saturate(2.2) brightness(1.06) contrast(1.05)}
/* Kontaktschatten unter den Rädern und dem Unterboden (Lagen in Prozent der Bildfläche) */
:root[data-theme="light"] .ix-rig::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(6.6% 1.2% at 31.4% 77.1%,rgba(12,14,18,.72),rgba(12,14,18,0)),
    radial-gradient(4.6% 1.1% at 69.9% 77.1%,rgba(12,14,18,.72),rgba(12,14,18,0)),
    radial-gradient(3.2% .9% at 63.6% 73.6%,rgba(12,14,18,.42),rgba(12,14,18,0)),
    radial-gradient(27% 2.4% at 50.5% 76.3%,rgba(12,14,18,.36),rgba(12,14,18,0)),
    radial-gradient(42% 6% at 50% 77%,rgba(12,14,18,.12),rgba(12,14,18,0))}
/* Farbiger Schein der Rückleuchten auf dem Boden */
:root[data-theme="light"] .ix-rig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(2.8% 6% at 29.3% 82.5%,rgba(var(--lc),.18),rgba(var(--lc),0)),
    radial-gradient(2.8% 6% at 70.5% 82.5%,rgba(var(--lc),.18),rgba(var(--lc),0))}
/* Anschluss an den Abschnitt darüber, Kehlschatten in den Ecken, Auslauf in die Fläche darunter */
:root[data-theme="light"] .ix-vig{
  background:
    linear-gradient(180deg,var(--bg2,#eceef1) 0,color-mix(in srgb,var(--bg2,#eceef1) 0%,transparent) 15%),
    radial-gradient(125% 95% at 50% 58%,transparent 58%,rgba(96,104,118,.11) 100%)}
/* Auslauf erst unterhalb der Räder, damit die Aufstandsfläche klar bleibt */
:root[data-theme="light"] .ix-vig::after{background:linear-gradient(180deg,rgba(245,245,247,0) 0,rgba(245,245,247,0) 34%,rgba(245,245,247,.82) 76%,#f5f5f7)}
/* Teiler als Differenz: dunkel auf der hellen Wand, hell auf dem schwarzen Fahrzeug */
:root[data-theme="light"] .ix-div{mix-blend-mode:difference}
:root[data-theme="light"] .ix-div::before{background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.16) 22%,rgba(255,255,255,.74) 45%,rgba(255,255,255,.74) 86%,transparent 100%)}
:root[data-theme="light"] .ix-handle{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(20,24,32,.08),0 12px 30px -10px rgba(20,24,32,.32),inset 0 1px 0 #fff}
/* Der Hinweis steht auf dem schwarzen Fahrzeug: helle Schrift wie im Dunkeln */
:root[data-theme="light"] .ix-hint{color:rgba(255,255,255,.8)}

/* ---------- Inhalt ---------- */
/* Modell-Licht als zarte Tönung auf Hellgrau */
:root[data-theme="light"] .ix-body::before{background:radial-gradient(900px 620px at 86% 4%,rgba(255,226,214,.32),transparent 70%),radial-gradient(760px 540px at 8% 48%,rgba(255,232,222,.2),transparent 70%)}
:root[data-theme="light"] .ix-body::after{background:radial-gradient(900px 620px at 86% 4%,rgba(204,228,250,.42),transparent 70%),radial-gradient(760px 540px at 8% 48%,rgba(210,232,252,.26),transparent 70%)}
/* Code-Landschaft 1: Punktraster wie eine Nothing-Matrix, scrollt mit dem Inhalt, kräftiger an den Rändern */
:root[data-theme="light"] .ix-land{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(29,29,31,.15) 0 .8px,transparent 1.15px) 50% 0/16px 16px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.08) 76%,rgba(0,0,0,.4) 91%,#000 100%),linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 360px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.08) 76%,rgba(0,0,0,.4) 91%,#000 100%),linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 360px),transparent 100%);
  mask-composite:intersect}
/* Code-Landschaft 2: Kennfeld-Auszüge, stehen im Viewport (sticky) und driften sehr langsam auf und ab.
   steps(): ein Pixel alle 0,4 s, der Compositor rechnet die Glasflächen darüber nur dann neu.
   Reduzierte Bewegung: keine Drift und kein Stehen im Viewport, die Kachel scrollt mit dem Inhalt. */
:root[data-theme="light"] .ix-code{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.ix-code i{position:sticky;top:0;display:block;height:1100px;height:100lvh;overflow:hidden;opacity:.055;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 12%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.6) 88%,#000 100%),linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 90px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 12%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.6) 88%,#000 100%),linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 90px),transparent 100%);
  mask-composite:intersect}
.ix-code i::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 240px);background:var(--ix-code,none) 0 0/1200px 900px;
  animation:ix-drift 96s steps(240) infinite alternate;animation-play-state:paused}
.ix-code.is-live i::before{animation-play-state:running}
@keyframes ix-drift{to{transform:translate3d(0,-240px,0)}}
/* Schmal: kaum Rand neben dem Inhalt, die Kennfelder treten weiter zurück */
@media (max-width:1099px){
  .ix-code i{opacity:.042;
    -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.4) 93%,#000 100%),linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 90px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.4) 93%,#000 100%),linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 90px),transparent 100%)}
}
.motion-reduce .ix-code i{position:absolute;inset:0;height:auto}
.motion-reduce .ix-code i::before{height:100%;animation:none}

/* Liquid Glass in Weiß: fast deckend, Haarlinie, Glanzkante oben, langer weicher Schatten */
:root[data-theme="light"] .ix-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82) 60%,rgba(255,255,255,.88));
  border-color:var(--ix-edge);border-top-color:rgba(29,29,31,.04);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(29,29,31,.025),var(--ix-sh);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
:root[data-theme="light"] .ix-wg::before{background:radial-gradient(110% 55% at 88% -12%,color-mix(in srgb,var(--ix-acc) 7%,transparent),transparent 62%)}
:root[data-theme="light"] .ix-switch{background:rgba(255,255,255,.74);border-color:rgba(29,29,31,.08);border-top-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(20,24,32,.06),0 18px 40px -18px rgba(20,24,32,.38)}
:root[data-theme="light"] .ix-chips{background:rgba(255,255,255,.72);border-color:rgba(29,29,31,.08)}
@media (hover:hover) and (pointer:fine){
  :root[data-theme="light"] .ix-card[aria-pressed="false"]:hover,:root[data-theme="light"] .ix-tile-link:hover{border-color:rgba(29,29,31,.16)}
}
/* Diagramme */
:root[data-theme="light"] .ix-wg-plot .w-dot{fill:rgba(29,29,31,.24)}
:root[data-theme="light"] .ix-wg-plot .w-base,:root[data-theme="light"] .ix-gc .c-base{stroke:rgba(29,29,31,.16)}
:root[data-theme="light"] .ix-wg-plot .w-s0{stop-opacity:.16}
:root[data-theme="light"] .ix-wg-plot .w-pk{fill:#fff}
:root[data-theme="light"] .ix-wg-plot .w-pk-h{opacity:.16}
:root[data-theme="light"] .ix-gb-t{background:rgba(29,29,31,.06)}
:root[data-theme="light"] .ix-gb-t .is-s{background:#a1a1a6}
:root[data-theme="light"] .ix-wg-dots i{background:rgba(29,29,31,.2)}
:root[data-theme="light"] .ix-wg-dots i.is-on{background:var(--ix-acc)}
:root[data-theme="light"] .ix-shift-svg .s-grid{stroke:rgba(29,29,31,.07)}
:root[data-theme="light"] .ix-shift-svg .s-ax{stroke:rgba(29,29,31,.24)}
/* Mess-Cursor als weiße Glaspille */
:root[data-theme="light"] .ix .mc{--edge:rgba(29,29,31,.08);--edge-hi:#fff;--glass2:rgba(255,255,255,.88);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 46%);
  --sh-2:0 1px 2px rgba(20,24,32,.06),0 12px 26px -12px rgba(20,24,32,.24);--mc-ln:rgba(29,29,31,.45)}
:root[data-theme="light"] .ix .mc-d1{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(29,29,31,.28)}
/* Ölservice-Lineal */
:root[data-theme="light"] .ix-rl{background:linear-gradient(90deg,rgba(29,29,31,.26),rgba(29,29,31,.08))}
:root[data-theme="light"] .ix-rm.is-oil{box-shadow:0 0 0 3px #fff}
/* Steuergerät: helle Platine, Rechner als weiße Kachel mit Akzentrand */
:root[data-theme="light"] .ix-ecu-chip{background:#fff;box-shadow:0 0 0 5px var(--ix-acc-soft),0 16px 30px -14px color-mix(in srgb,var(--ix-acc) 55%,transparent)}
/* Motor: silberner Block auf Hellgrau braucht einen Sockel aus Schatten */
:root[data-theme="light"] .ix-engine::before{
  background:radial-gradient(46% 40% at 50% 46%,rgba(29,29,31,.075),transparent 74%),radial-gradient(36% 6% at 50% 91%,rgba(29,29,31,.22),transparent 76%)}
:root[data-theme="light"] .ix-eng-img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 26px 30px rgba(20,24,32,.16)) drop-shadow(0 2px 3px rgba(20,24,32,.12))}
/* Frontfoto: bewusst als dunkle Schaukarte, das Studio des Fotos bleibt schwarz */
:root[data-theme="light"] .ix-app-img img{border-radius:28px;background:#050506;-webkit-mask-image:none;mask-image:none;
  box-shadow:0 1px 2px rgba(20,24,32,.1),0 44px 80px -42px rgba(20,24,32,.55)}
:root[data-theme="light"] .ix-app-img::after{content:"";position:absolute;inset:0;width:min(100%,460px);margin-inline:auto;border-radius:28px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
@media (forced-colors:active){
  :root[data-theme="light"] .ix-div{mix-blend-mode:normal}
  :root[data-theme="light"] .ix-land,:root[data-theme="light"] .ix-code,:root[data-theme="light"] .ix-stage::before{display:none}
}