/* FS Automotive Engineering · Querverweise (xlink.js)
   .xl-chip  Verweis-Pille im Kapitel Öldruck (zu den INEOS-Kacheln)
   .xl-peek  Vorschau-Kachel beim Überfahren: Liquid Glass wie die Navigation, Auftritt federnd aus der Zeigerrichtung.
             Nur opacity und transform animiert (kein filter: der würde den Backdrop-Blur aufheben). */

.xl-chip{display:inline-flex;align-self:flex-start;justify-self:start;width:fit-content;max-width:100%;align-items:center;gap:10px;min-height:44px;margin-top:6px;padding:0 16px 0 14px;border-radius:var(--r-pill);
  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 13.5px/1.25 var(--font);text-decoration:none;text-wrap:balance;
  transition:box-shadow .2s var(--ease),transform .32s var(--spring)}
.xl-chip .i{flex:none;width:16px;height:16px;color:var(--acc);transition:transform .32s var(--spring)}
.xl-dot{flex:none;width:9px;height:9px;border-radius:50%;background:linear-gradient(90deg,#80d2ff 50%,#ff3a3a 50%);box-shadow:0 0 0 3px var(--acc-soft)}
@media (hover:hover) and (pointer:fine){
  .xl-chip:hover{box-shadow:inset 0 0 0 1px var(--acc-line),inset 0 1px 0 var(--edge-hi)}
  .xl-chip:hover .i{transform:translateX(3px)}
}
.xl-chip:active{transform:scale(.97)}
.xl-chip:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.xl-peek{position:fixed;z-index:90;left:0;top:0;display:flex;flex-direction:column;gap:7px;width:292px;padding:14px 14px 12px;border-radius:var(--r-lg);
  color:var(--fg);text-decoration:none;
  background:var(--sheen),color-mix(in srgb,var(--bg2) 92%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 0 0 1px var(--edge),var(--sh-3);
  opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;
  transition:opacity .18s var(--ease),transform .46s var(--spring)}
.xl-peek.is-below{transform:translateY(-10px) scale(.94)}
.xl-peek.is-on{opacity:1;transform:none;pointer-events:auto}
.motion-reduce .xl-peek{transform:none;transition:opacity .15s linear}

.pk-k{font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.pk-h{font:780 16px/1.22 var(--font);font-stretch:112%;letter-spacing:-.005em;color:var(--fg);text-wrap:balance}
.pk-p{font:400 13px/1.5 var(--font);color:var(--fg2);text-wrap:pretty}
.pk-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--hair);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.pk-go .i{width:14px;height:14px;transition:transform .32s var(--spring)}
.xl-peek:hover .pk-go .i{transform:translateX(3px)}

/* Mini-Stribeck-Kurve: der Arbeitspunkt atmet zwischen Serie (Ring) und Fix */
.pk-vis{display:block;width:100%;height:auto;margin:2px 0;padding:8px 8px 4px;border-radius:var(--r);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);overflow:visible}
/* Raster: Dekaden-Teilung als Haarlinien, Teilstriche an den Achsen */
.pk-ax{fill:none;stroke:var(--hair2);stroke-width:1}
.pk-gr{fill:none;stroke:var(--hair);stroke-width:.75;stroke-dasharray:1.5 2.5}
.pk-tk{fill:none;stroke:var(--mut);stroke-width:.75}
.pk-c{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round}
.pk-ring{fill:none;stroke:var(--fg2);stroke-width:1.3;stroke-dasharray:2.4 2.6}
.pk-pt{fill:var(--acc);filter:drop-shadow(0 0 5px var(--acc-glow))}
.pk-vis text{font:500 9.5px var(--mono);fill:var(--mut)}
.xl-peek.is-on .pk-pt{animation:pk-breathe 2.4s var(--ease-io) infinite alternate}
@keyframes pk-breathe{from{transform:translate(-40px,11px)}to{transform:none}}
.motion-reduce .pk-pt{animation:none}

/* INEOS-Vorschau: technische Profilzeichnung des Grenadier (Bild des Inhabers) als Kopfbild.
   Hell: das Weiß der Zeichnung verschwindet per multiply im Glas. Dunkel: invertiert als Blaupause,
   das entstehende Schwarz verschwindet per screen. Motor-Badges wie im Kapitel. */
.pk-img{display:block;height:100px;margin:-2px 0 4px}
.pk-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
:root:not([data-theme="light"]) .pk-img img{filter:invert(1) hue-rotate(180deg) brightness(.94);mix-blend-mode:screen}
.pk-badges{display:flex;gap:6px}
.pk-badges i{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font:850 11px/1 var(--font);font-style:normal;font-stretch:112%;letter-spacing:.02em}
.pk-b57{background:#80d2ff;color:#04121c}
.pk-b58{background:#ff3a3a;color:#fff}

/* Hell: wie das INEOS-Kapitel im hellen Thema, Akzente vertieft für AA */
:root[data-theme="light"] .xl-dot{background:linear-gradient(90deg,#0a6aa1 50%,#d0101e 50%)}
:root[data-theme="light"] .pk-b57{background:#0a6aa1;color:#fff}
:root[data-theme="light"] .pk-b58{background:#d0101e;color:#fff}