/* ============================================================
   FM CAR PERFORMANCE — Instrumentencluster bei Nacht
   Bewusst einthemig (dunkel): jede Farbe explizit gesetzt.
   ============================================================ */
:root{
  --asphalt:#0B0C0E;      /* Grund — blaustichiges Schwarz */
  --carbon:#141619;       /* erhabene Flächen */
  --carbon-2:#1B1E23;     /* Hover / tiefer gelegte Flächen */
  --line:#262A31;         /* Haarlinien, Raster */
  --chalk:#EEF1F4;        /* Primärtext */
  --smoke:#8B939D;        /* Sekundärtext */
  --redline:#FF2A14;      /* Akzent: Signalrot */
  --amber:#FFB020;        /* Schaltlicht Stufe 2 */
  --sector:#1BAA92;       /* Markenton — „grüner Sektor" */

  --shell:min(1280px,100% - 3rem);
  --r:2px;

  --f-disp:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --step:clamp(4.5rem,7vw,8rem);
}

/* Hero tachometer: keep the instrument fully visible on desktop and restore it
   on compact/mobile layouts without covering the headline or primary actions. */
@media (min-width:1081px){
  .hero .gauge{
    width:clamp(190px,18vw,238px);
    align-self:center;
    transform:translateY(10%);
  }
}
@media (max-width:1080px){
  .hero .hero-in{
    min-height:calc(100svh - 4.4rem);
    position:relative;
  }
  .hero .hero-in > div:first-child{position:relative;z-index:2}
  .hero .gauge{
    display:block;
    position:absolute;
    z-index:4;
    right:clamp(-1.2rem,-2vw,0rem);
    bottom:-.8rem;
    width:clamp(142px,40vw,182px);
    transform:none;
    opacity:.96;
    pointer-events:none;
  }
  .hero .gauge::before{inset:-17%;filter:blur(24px)}
}
@media (max-width:520px){
  .hero .gauge{
    right:-.7rem;
    bottom:-.35rem;
    width:clamp(136px,39vw,158px);
  }
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--asphalt);
  color:var(--chalk);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Millimeterpapier des Prüfstandsausdrucks, sehr leise */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(140% 100% at 50% 0%,#000 20%,rgba(0,0,0,.45) 70%,transparent 100%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--redline);outline-offset:3px}

.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:1}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--f-disp);
  font-weight:900;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
h2{font-size:clamp(2.6rem,6vw,5.25rem)}
h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:.95}
.ital{font-style:italic}

/* Deutsche Komposita sind lang: „Fahrzeugaufbereitung?“ ist als einzelnes
   Wort breiter als ein 360-px-Display. Ohne Bruchstelle zog es die
   Dokumentbreite auf 436 px, body{overflow-x:hidden} schnitt es dann ab.
   Überschriften dürfen deshalb notfalls im Wort umbrechen; lang="de"
   liefert die Trennstellen, sonst greift der harte Bruch. */
/* Lange deutsche Komposita: „Fahrzeugaufbereitung" passt in keine Spalte.
   Trennen ist erlaubt, weil die nachgebauten Zeilen des Schreibmaschinen-
   Moduls inzwischen selbst umbrechen dürfen (siehe .fx-t-in) — sonst hätte
   eine Trennung mitten im Wort die Zeile in die Nachbarspalte laufen lassen. */
h1,h2,h3,.sec-h,.sub-hero h1{overflow-wrap:break-word;hyphens:auto}
.hollow{
  color:transparent;
  -webkit-text-stroke:1.5px var(--redline);
  paint-order:stroke fill;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--smoke);
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--redline);flex:none;
}
.lede{
  color:var(--smoke);
  max-width:56ch;
  font-size:clamp(1.02rem,1rem + .25vw,1.2rem);
}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- Schaltlichtleiste = Scrollfortschritt ---------- */
.revbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;gap:2px;height:4px;
  background:#000;
  padding:0;
}
.revbar i{
  flex:1 1 0;min-width:0;background:#191C21;transition:background .18s linear,box-shadow .18s linear;
}
.revbar i.on{background:var(--sector);box-shadow:0 0 8px rgba(27,170,146,.8)}
.revbar i.on.a{background:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.8)}
.revbar i.on.r{background:var(--redline);box-shadow:0 0 10px rgba(255,42,20,.9)}
.revbar.shift i{background:var(--redline);box-shadow:0 0 16px rgba(255,42,20,1);animation:shiftflash .4s steps(2,end) 3 both}
.revbar.hot i{background:var(--redline);box-shadow:0 0 10px rgba(255,42,20,.75)}
@keyframes shiftflash{50%{opacity:.08}}

/* ---------- Kopfzeile ---------- */
.hdr{
  position:sticky;top:4px;z-index:50;
  background:rgba(11,12,14,.72);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:2rem;
  height:70px;
}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:24px;width:auto;filter:invert(1)}
.nav{display:flex;gap:1.9rem;margin-left:auto;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.nav a{position:relative;padding:.35rem 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--redline);transition:right .28s cubic-bezier(.4,0,.2,1)}
.nav a:hover{color:var(--chalk)}
.nav a:hover::after{right:0}
/* Aktuelle Seite: der Strich steht dauerhaft */
.nav a[aria-current="page"]{color:var(--chalk)}
.nav a[aria-current="page"]::after{right:0}
.hdr .btn{margin-left:0}
.burger{display:none;margin-left:auto;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .8rem}
.burger span{display:block;width:16px;height:8px;position:relative;flex:none}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--redline)}
.burger span::before{top:0}.burger span::after{bottom:0}
/* Zwischen 900 und 1180 px wird die Navigation enger gesetzt — mit den
   drei Leistungsseiten darin bräuchte sie sonst mehr Platz, als da ist. */
@media(max-width:1180px){.nav{gap:1.15rem;font-size:.7rem}}
@media(max-width:900px){.nav{display:none}.hdr-in{gap:.75rem}.burger{display:inline-flex}}
@media(max-width:560px){.hdr .btn-red span.tel-txt{display:none}}
.logo,.hdr .btn-red,.burger{flex:none}

/* Vollbild-Menü */
.mnav{
  position:fixed;inset:0;z-index:70;background:var(--asphalt);
  display:flex;flex-direction:column;justify-content:center;
  padding:5.5rem 1.5rem 2.5rem;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .42s cubic-bezier(.6,0,.2,1),visibility 0s linear .42s;
}
.mnav.open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.6,0,.2,1),visibility 0s}
.mnav a.ml{
  display:flex;align-items:baseline;gap:.9rem;padding:.75rem 0;border-bottom:1px solid var(--line);
  font-family:var(--f-disp);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.9rem,8.5vw,2.9rem);line-height:1;transition:color .2s;
}
.mnav a.ml:hover,.mnav a.ml:focus-visible{color:var(--redline)}
.mnav a.ml i{font-family:var(--f-mono);font-style:normal;font-weight:500;font-size:.66rem;color:var(--redline);letter-spacing:.14em;flex:none}
.mnav-foot{margin-top:2.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.mnav-x{position:absolute;top:1.05rem;right:1.2rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.92rem 1.5rem;border-radius:var(--r);
  border:1px solid transparent;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1),background .2s,border-color .2s,color .2s,box-shadow .2s;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-red{background:var(--redline);color:#fff;box-shadow:0 0 0 rgba(255,42,20,0)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(255,42,20,.65)}
.btn-ghost{border-color:var(--line);color:var(--chalk);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--smoke);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1rem;font-size:.68rem}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(620px,92svh,940px);display:flex;align-items:center;overflow:hidden;padding:6rem 0 4rem}
/* Der Porsche trägt den Hero. Die Bildebene bekommt exakt das Seitenverhältnis
   des Fotos — dann sitzt die weiche Kante auf jeder Fenstergröße richtig und es
   blitzt nie ein Rechteck aus dem Studiohintergrund auf. Rechts verankert, damit
   Heckflügel und Heck frei stehen und die Schrift links Platz behält. */
.hero-car{
  position:absolute;z-index:0;
  left:auto; right:-3%; top:50%;
  width:min(76%,1220px);
  aspect-ratio:2560/1242;
  background-image:var(--img-hero);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  filter:contrast(1.08) saturate(1.05) brightness(.95);
  mask-image:radial-gradient(84% 88% at 57% 50%,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.12) 82%,transparent 93%);
  -webkit-mask-image:radial-gradient(84% 88% at 57% 50%,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.12) 82%,transparent 93%);
  --car-ty:-47%;              /* Ruhelage — Module komponieren darauf auf */
  transform:translateY(var(--car-ty));
  animation:heroIn 1.6s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(var(--car-ty)) translateX(5%) scale(1.06)}
  to{opacity:1;transform:translateY(var(--car-ty)) translateX(0) scale(1)}
}

/* Zwischen 1081 und 1400 px ist die Textspalte breit, der Platz daneben aber
   knapp — der Wagen rückt etwas kleiner nach rechts, damit der Fließtext
   nicht auf der hellen Karosserie landet. */
@media(min-width:1081px) and (max-width:1400px){
  .hero-car{width:min(66%,1220px);right:-5%}
  .hero-scrim{
    background:
      linear-gradient(90deg,var(--asphalt) 0%,rgba(11,12,14,.96) 18%,rgba(11,12,14,.78) 30%,rgba(11,12,14,.4) 42%,rgba(11,12,14,.1) 54%,rgba(11,12,14,0) 64%),
      linear-gradient(180deg,rgba(11,12,14,.66) 0%,rgba(11,12,14,.1) 12%,rgba(11,12,14,0) 28%,rgba(11,12,14,0) 68%,rgba(11,12,14,.8) 95%,var(--asphalt) 100%);
  }
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Nur so viel Abdunklung wie die Schrift braucht — das Auto bleibt frei. */
    linear-gradient(90deg,var(--asphalt) 0%,rgba(11,12,14,.96) 13%,rgba(11,12,14,.8) 22%,rgba(11,12,14,.5) 31%,rgba(11,12,14,.22) 41%,rgba(11,12,14,.06) 52%,rgba(11,12,14,0) 62%),
    linear-gradient(180deg,rgba(11,12,14,.66) 0%,rgba(11,12,14,.1) 12%,rgba(11,12,14,0) 28%,rgba(11,12,14,0) 68%,rgba(11,12,14,.8) 95%,var(--asphalt) 100%);
}
/* Lichtstreifen — Bewegung im Standbild */
.streaks{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.streaks i{
  position:absolute;left:-40%;height:1px;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,42,20,.55),rgba(255,255,255,.75),transparent);
  opacity:0;
  animation:streak 7s linear infinite;
}
@keyframes streak{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:.9}
  55%{opacity:0}
  100%{transform:translateX(380%);opacity:0}
}
.hero-in{position:relative;z-index:3;width:var(--shell);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:center}

h1{
  font-size:clamp(2.9rem,8.6vw,7.3rem);
  line-height:.82;
  letter-spacing:-.028em;
  margin:0 0 1.6rem;
}
h1 > span{display:block}
.h1-sub{font-size:clamp(1rem,2.2vw,1.6rem);font-weight:700;letter-spacing:.02em;line-height:1.1;margin-top:1.1rem;color:var(--chalk)}
.hero .lede{margin:0 0 2.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.6rem}

.hero-meta{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);padding-top:1.1rem;max-width:640px}
.hero-meta > div{padding-right:2.2rem;margin-right:2.2rem;border-right:1px solid var(--line)}
.hero-meta > div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-meta dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.hero-meta dd{margin:.25rem 0 0;font-family:var(--f-disp);font-weight:800;font-size:1.1rem;letter-spacing:.01em;text-transform:uppercase}

/* Drehzahlmesser */
.gauge{width:clamp(200px,21vw,272px);flex:none;position:relative;align-self:end;transform:translateY(-6%)}
.gauge::before{content:"";position:absolute;z-index:0;inset:-26%;border-radius:50%;filter:blur(34px);background:radial-gradient(circle,rgba(11,12,14,.75) 32%,rgba(11,12,14,.4) 55%,transparent 74%)}
.gauge svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.gauge .g-num{font-family:var(--f-disp);font-weight:900;font-style:italic;font-size:52px;fill:var(--chalk)}
.gauge .g-lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:2.4px;fill:var(--smoke)}
.gauge .g-tick{font-family:var(--f-mono);font-size:11px;fill:#A7AEB7}
@media(max-width:1080px){.gauge{display:none}.hero-in{grid-template-columns:minmax(0,1fr)}}
/* Bis 1080 px liegt der Porsche formatfüllend HINTER dem Inhalt — als
   echtes Hintergrundbild der Hero-Section. Weil das Querformat des
   Studiofotos in einem hochkanten Fenster zu einem unkenntlichen
   Ausschnitt würde, kommt hier ein eigener Anschnitt zum Einsatz:
   das Heck mit Flügel, Endrohren und roter Felge. */
@media(max-width:1080px){
  /* Der Abstand zur Kopfzeile war auf dem Handy zu groß — der erste
     Bildschirm ist dort knapp und soll nicht mit Leerraum anfangen. */
  .hero{min-height:100svh;padding:2.2rem 0 2.2rem;align-items:flex-start}
  .hero-in{padding-bottom:0}
  .hero-car{
    left:0; right:0; top:0; bottom:0;
    width:auto; max-width:none; margin:0;
    aspect-ratio:auto;
    --car-ty:0%;
    animation:none; opacity:1;
    background-image:var(--img-hero-m);
    background-size:cover;
    background-position:58% 42%;
    filter:contrast(1.06) saturate(1.05) brightness(.96);
    mask-image:none; -webkit-mask-image:none;
  }
  /* Oben so dunkel, dass die Schrift sicher steht — unten bleibt das
     Fahrzeug frei und trägt die Fläche. */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(11,12,14,.96) 0%,
      rgba(11,12,14,.92) 24%,
      rgba(11,12,14,.8) 38%,
      rgba(11,12,14,.64) 50%,
      rgba(11,12,14,.32) 63%,
      rgba(11,12,14,.16) 76%,
      rgba(11,12,14,.45) 90%,
      var(--asphalt) 100%);
  }
  .hero-meta{row-gap:1.1rem}
  .hero-meta > div{padding-right:1.1rem;margin-right:1.1rem}
  .eyebrow{letter-spacing:.14em}
  .hero .lede{font-size:1.02rem}
}

/* ---------- Laufband ---------- */
.ticker{
  border-block:1px solid var(--line);
  background:var(--carbon);
  overflow:hidden;position:relative;z-index:1;
}
.ticker-track{display:flex;width:max-content;animation:roll 42s linear infinite}
.ticker-track span{
  font-family:var(--f-disp);font-weight:800;font-style:italic;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.85rem 0;display:flex;align-items:center;gap:1.6rem;
  color:var(--chalk);
}
.ticker-track span::after{content:"";width:5px;height:5px;background:var(--redline);transform:rotate(45deg);margin-inline:1.6rem}
@keyframes roll{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- Telemetrie-Streifen ---------- */
.telemetry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-top:0;background:var(--carbon)}
.telemetry > div{padding:2.1rem 1.6rem;border-right:1px solid var(--line);background:var(--carbon);display:flex;flex-direction:column;justify-content:flex-start}
.telemetry > div:last-child{border-right:0}
.telemetry .v{font-family:var(--f-disp);font-weight:900;font-style:italic;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.9;letter-spacing:-.02em}
.telemetry .v em{font-style:italic;color:var(--redline)}
.telemetry .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);margin-top:.6rem;overflow-wrap:anywhere}
@media(max-width:820px){
  .telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}
  .telemetry > div{padding:1.6rem 1.1rem}
  .telemetry > div:nth-child(2){border-right:0}
  .telemetry > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- Abschnitte ---------- */
.section{padding-block:var(--step);position:relative;z-index:1}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.5rem;align-items:end;margin-bottom:3.4rem}
@media(max-width:820px){.section-head{grid-template-columns:minmax(0,1fr);gap:1.4rem}}

/* ---------- Leistungen ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .95rem;border:1px solid var(--line);border-radius:var(--r);
  color:var(--smoke);transition:.2s;
}
.chip:hover{color:var(--chalk);border-color:var(--smoke)}
.chip[aria-pressed="true"]{background:var(--chalk);color:var(--asphalt);border-color:var(--chalk)}
.chip b{font-weight:400;opacity:.55;margin-left:.45rem}

.grid-serv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.grid-serv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid-serv{grid-template-columns:minmax(0,1fr)}}

.card{
  position:relative;background:var(--asphalt);padding:0;overflow:hidden;
  display:flex;flex-direction:column;min-height:330px;
  transition:background .3s;
}
.card.hide{display:none}
.card-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.92) brightness(.5) contrast(1.05);
  transform:scale(1.02);
  transition:filter .5s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.35) 0%,rgba(11,12,14,.72) 52%,rgba(11,12,14,.96) 100%);
  transition:background .4s;
}
.card:hover .card-img{filter:grayscale(.08) brightness(.72) contrast(1.02);transform:scale(1.08)}
.card-body{position:relative;z-index:2;margin-top:auto;padding:1.7rem 1.6rem 1.7rem}
.card h3{margin-bottom:.7rem;font-size:1.42rem}
.card p{margin:0;color:var(--smoke);font-size:.94rem;line-height:1.55}
.tag{
  position:absolute;top:1.15rem;left:1.6rem;z-index:2;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.3rem .6rem;border:1px solid currentColor;border-radius:var(--r);
}
.tag.perf{color:var(--redline)}
.tag.optik{color:var(--amber)}
.tag.service{color:var(--sector)}
.card .rule{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--redline);z-index:3;transition:width .45s cubic-bezier(.3,.9,.3,1)}
.card:hover .rule{width:100%}

/* ---------- Prüfstand ---------- */
.dyno-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;align-items:stretch}
@media(max-width:940px){.dyno-wrap{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--carbon);border:1px solid var(--line);padding:1.6rem;display:flex;flex-direction:column}
.panel-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.2rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke)}
.dyno-hint{display:none}
/* Auf dem Handy passt das Diagramm vollständig ins Bild — sonst stünden
   die Spitzenwerte rechts außerhalb des Sichtfelds. Weil das SVG dabei
   mitskaliert, werden die Beschriftungen in Nutzereinheiten vergrößert. */
@media(max-width:680px){
  #dyno{min-width:0}
  .dy-ax{font-size:21px}
  /* Die Achsentitel würden in die Zahlen laufen und sagen nichts, was
     der Panelkopf und die Ableseleiste nicht schon sagen. */
  .dy-axt{display:none}
  .dy-flag{font-size:25px}
  .dy-dot{r:6}
  .dy-ring{r:12}
}
.dyno-scroll{overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#dyno{width:100%;height:auto;display:block}

/* Die Legende ist zugleich die Werteablesung. Auf dem Handy ist das
   Diagramm breiter als der Bildschirm und läuft seitlich — die
   Spitzenwerte stünden dort außerhalb des Sichtfelds. */
.dyno-legend{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:1.2rem;
  border:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;color:var(--smoke);
}
.dyno-legend b{
  display:flex;align-items:center;gap:.55rem;
  padding:.62rem .7rem;font-weight:400;
  border-left:1px solid var(--line);
}
.dyno-legend b:first-child{border-left:0}
.dyno-legend i{width:16px;height:3px;display:block;flex:none;border-radius:1px;background:var(--dl,var(--smoke))}
.dyno-legend span{white-space:nowrap}
.dyno-legend em{
  margin-left:auto;font-style:normal;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--dl,var(--chalk));
  white-space:nowrap;
}
.dl-s{--dl:#9AA2AC}
.dl-1{--dl:var(--amber)}
.dl-2{--dl:var(--redline)}
@media(max-width:680px){
  /* Untereinander: nebeneinander wäre der Wert nicht mehr lesbar. */
  .dyno-legend{grid-template-columns:minmax(0,1fr)}
  .dyno-legend b{border-left:0;border-top:1px solid var(--line);padding:.7rem .8rem;font-size:.74rem}
  .dyno-legend b:first-child{border-top:0}
  .dyno-legend em{font-size:1.02rem}
}

.stages{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.stage{background:var(--carbon);padding:1.6rem 1.5rem;position:relative;transition:background .25s}
.stage:hover{background:var(--carbon-2)}
/* Farbkante links — fährt beim Erscheinen von oben ein */
.stage::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--st-acc,var(--line));
  transform:scaleY(0);transform-origin:top;
  transition:transform .62s cubic-bezier(.16,.84,.3,1);
}
.stage.in::before{transform:scaleY(1)}
.stages .stage:nth-child(1){--st-acc:var(--amber)}
.stages .stage:nth-child(2){--st-acc:var(--redline)}
.stages .stage:nth-child(3){--st-acc:var(--sector)}
.stages .stage:nth-child(4){--st-acc:#3A424C}
.stages .stage:nth-child(2)::before{transition-delay:.09s}
.stages .stage:nth-child(3)::before{transition-delay:.18s}
.stages .stage:nth-child(4)::before{transition-delay:.27s}

.st-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.stage .st-k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;color:var(--smoke);text-transform:uppercase;padding-top:.2rem}
/* Leistungszuwachs aus der Beispielkurve — bewusst als solche beschriftet */
.st-g{text-align:right;line-height:1;flex:none}
.st-g b{
  font-family:var(--f-disp);font-weight:900;font-style:italic;
  font-size:clamp(1.75rem,4.6vw,2.3rem);line-height:.85;
  letter-spacing:-.025em;color:var(--g,var(--redline));
  font-variant-numeric:tabular-nums;
}
.st-g em{
  font-style:normal;font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.16em;color:var(--smoke);margin-left:.28rem;
}
.st-g i{
  display:block;font-style:normal;font-family:var(--f-mono);
  font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;
  color:#6B737C;margin-top:.28rem;
}
.stage h4{font-size:1.75rem;margin:.5rem 0 .55rem}
.stage p{margin:0;color:var(--smoke);font-size:.92rem;line-height:1.55}
.stage .bar{height:5px;background:#1B1F25;margin-top:1.15rem;position:relative;overflow:hidden;border-radius:1px}
.stage .bar span{
  position:absolute;inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--sector),var(--amber) 55%,var(--redline));
  transition:right 1.1s cubic-bezier(.2,.8,.3,1);
}
/* helle Vorderkante läuft dem Balken voraus */
.stage .bar span::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
}

/* Auf dem Handy tragen diese Karten die Sektion — entsprechend groß. */
@media(max-width:900px){
  .stage{padding:1.85rem 1.4rem}
  .stage h4{font-size:2.2rem;margin:.55rem 0 .6rem}
  .stage p{font-size:.96rem}
  .stage .bar{height:7px;margin-top:1.3rem}
  .st-g b{font-size:2.35rem}
  .stage::before{width:3px}
}
.note{margin-top:auto;padding-top:1.2rem;font-family:var(--f-mono);font-size:.72rem;line-height:1.6;color:var(--smoke);border-left:2px solid var(--amber);padding-left:.9rem}

/* ---------- Werkstatt ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.5rem;align-items:center}
@media(max-width:900px){.about{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
.about-img{position:relative;aspect-ratio:1/1;background-image:var(--img-ambiente);background-size:cover;background-position:center;border:1px solid var(--line)}
.about-img::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(11,12,14,.1),rgba(11,12,14,.65))}
.about-stamp{
  position:absolute;z-index:2;left:-1px;bottom:-1px;background:var(--asphalt);border:1px solid var(--line);
  padding:1rem 1.2rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);
}
.about-stamp b{display:block;font-family:var(--f-disp);font-size:1.35rem;letter-spacing:.01em;color:var(--chalk);font-weight:800;font-style:italic;margin-top:.3rem}
.quote{
  font-family:var(--f-disp);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.02;letter-spacing:-.01em;
  border-left:3px solid var(--redline);padding-left:1.3rem;margin:2rem 0 0;
}

/* ---------- Vorteile ---------- */
/* ---------- Vorteile: redaktioneller Doppelsatz auf Papier ----------
   Links die Ansage mit riesiger Sektor-Ziffer als Grafik, rechts die
   vier Prüfzeilen. Die Ziffer trägt die Fläche, die sonst leer bliebe. */
#vorteile .shell{position:relative}
.sheet{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.sheet-l{position:relative;padding-top:.4rem}
.sheet-big{
  position:absolute;z-index:0;left:-.055em;top:-.3em;
  font-family:var(--f-disp);font-weight:900;font-style:italic;
  font-size:clamp(9rem,17vw,15rem);line-height:.7;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--hair);
  pointer-events:none;user-select:none;
}
.sheet-l > .eyebrow,.sheet-l > h2,.sheet-l > .lede,.sheet-l > .sheet-stamp{position:relative;z-index:1}
.sheet-l .lede{margin-top:1.3rem;max-width:38ch}

/* Gedrucktes Foto: entfärbt, im Multiplikationsmodus auf das Papier
   gelegt und mit einem feinen Punktraster überzogen — es soll wirken,
   als wäre es mitgedruckt worden, nicht aufgeklebt. Beim Erscheinen
   zieht es von links auf. */
.sheet-img{
  position:relative;margin:2.2rem 0 0;
  aspect-ratio:4/3;
  border:1px solid var(--hair);
}
/* Der Beschnitt liegt auf einer eigenen Ebene — läge er auf der Figur,
   würde er die Bildunterschrift mit abschneiden. */
.sheet-img::before{
  content:"";position:absolute;inset:0;
  background-image:var(--img-service);
  background-size:cover;background-position:52% 46%;
  filter:grayscale(1) contrast(1.32) brightness(1.14);
  mix-blend-mode:multiply;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1) .2s;
}
.sheet-l.in .sheet-img::before{clip-path:inset(0 0 0 0)}
.sheet-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(232,230,225,.6) 33%,rgba(232,230,225,0) 36%);
  background-size:3px 3px;
}
.sheet-img figcaption{
  position:absolute;left:0;right:0;bottom:-1.5rem;
  font-family:var(--f-mono);font-size:.53rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
@media(prefers-reduced-motion:reduce){
  .sheet-img::before{clip-path:none}
}
@media(max-width:900px){
  .sheet{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .sheet-big{font-size:clamp(8rem,26vw,12rem);top:-.26em}
}
.perks{
  display:flex;flex-direction:column;
  background:none;border:0;border-top:1px solid var(--hair);
}
.perk{
  position:relative;background:none;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:0 clamp(1rem,2.6vw,2.4rem);
  align-items:start;
  padding:1.6rem 0 1.5rem;
  border-bottom:1px solid var(--hair);
}
.perk:hover{background:none}
.perk .n{
  font-family:var(--f-disp);font-weight:900;font-style:italic;
  font-size:clamp(2.3rem,4.6vw,3.2rem);line-height:.8;
  letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.3px var(--red-ink);
  transition:color .55s cubic-bezier(.16,.84,.3,1),-webkit-text-stroke-color .55s;
}
.perk h4{margin:0 0 .45rem;font-size:clamp(1.3rem,2.5vw,1.75rem)}
.perk p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.55;max-width:56ch}
.perk-t{
  align-self:center;text-align:right;white-space:nowrap;
  font-family:var(--f-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
/* Der rote Strich läuft Zeile für Zeile ein — das Blatt wird abgehakt. */
.perk::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--red-ink);transform:scaleX(0);transform-origin:left;
  transition:transform .82s cubic-bezier(.16,.84,.3,1);
}
.perks.in .perk::after{transform:scaleX(1)}
.perks.in .perk:nth-child(2)::after{transition-delay:.13s}
.perks.in .perk:nth-child(3)::after{transition-delay:.26s}
.perks.in .perk:nth-child(4)::after{transition-delay:.39s}
/* Die Ziffer läuft von Kontur auf Vollton */
.perks.in .perk .n{color:var(--red-ink);-webkit-text-stroke-color:transparent}
.perks.in .perk:nth-child(2) .n{transition-delay:.13s}
.perks.in .perk:nth-child(3) .n{transition-delay:.26s}
.perks.in .perk:nth-child(4) .n{transition-delay:.39s}

/* Firmenstempel — schlägt zum Schluss auf */
.sheet-stamp{
  display:inline-block;margin-top:3.2rem;
  padding:.62rem 1.05rem .58rem;
  border:2px solid var(--red-ink);border-radius:3px;
  background:var(--paper);
  color:var(--red-ink);
  font-family:var(--f-mono);text-align:center;line-height:1.25;
  transform:rotate(-7deg) scale(.72);opacity:0;
  transition:transform .72s cubic-bezier(.2,1.5,.42,1) .5s,opacity .42s ease .5s;
}
.sheet-stamp b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sheet-stamp span{display:block;font-size:.54rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-top:.16rem}
.sheet-l.in .sheet-stamp{transform:rotate(-7deg) scale(1);opacity:.92}

@media(max-width:720px){
  .perk{grid-template-columns:auto minmax(0,1fr)}
  .perk-t{grid-column:2;text-align:left;white-space:normal;margin-top:.65rem;align-self:start}
  .sheet-stamp{margin-top:1.6rem;transform:rotate(-4deg) scale(.72)}
  .sheet-l.in .sheet-stamp{transform:rotate(-4deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .perk::after{transform:scaleX(1)}
  .perk .n{color:var(--red-ink);-webkit-text-stroke-color:transparent}
  .sheet-stamp{opacity:.92;transform:rotate(-7deg) scale(1)}
}

/* ---------- Boxenstopp ---------- */
.pit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.pit{grid-template-columns:minmax(0,1fr)}}
.pit-step{background:var(--asphalt);padding:2.2rem 1.7rem;position:relative;overflow:hidden}
.pit-step .idx{
  font-family:var(--f-disp);font-weight:900;font-style:italic;
  font-size:clamp(4.6rem,7vw,6.4rem);line-height:.78;
  color:transparent;-webkit-text-stroke:1.6px var(--line);
}
.ps-k{
  font-family:var(--f-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fx-acc,var(--smoke));
  margin:1rem 0 .35rem;transition:color .34s;
}
.pit-step h4{font-size:1.5rem;margin:0 0 .6rem}
.pit-step p{margin:0;color:var(--smoke);font-size:.94rem}
.pit-step::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;background:var(--line)}
.pit-step:nth-child(1)::before{background:var(--sector)}
.pit-step:nth-child(2)::before{background:var(--amber)}
.pit-step:nth-child(3)::before{background:var(--redline)}

/* ---------- Stimmen ---------- */
/* Kundenstimmen — enger gesetzt als die übrigen Kapitel und mit mehr
   Gewicht auf dem Zitat selbst. */
#stimmen{padding-block:clamp(3.2rem,5.2vw,5.4rem)}
#stimmen .section-head{margin-bottom:2.4rem}
/* Keine Kästen: die Zitate stehen direkt auf dem Papier, nur durch
   Haarlinien getrennt. */
.voices{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  background:none;border:0;border-top:1px solid var(--hair,var(--line));
}
@media(max-width:880px){
  .voices{grid-template-columns:minmax(0,1fr)}
  .voice{border-left:0!important;border-top:1px solid var(--hair,var(--line));padding-inline:0!important}
  .voice:first-child{border-top:0}
}
.voice{
  position:relative;background:none;
  padding:1.9rem 1.7rem 1.5rem;
  border-left:1px solid var(--hair,var(--line));
  display:flex;flex-direction:column;gap:1rem;
  transition:background .28s cubic-bezier(.16,.84,.3,1);
}
.voice:first-child{border-left:0;padding-left:0}
.voice:last-child{padding-right:0}
.voice::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--redline);transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.16,.84,.3,1);
}
.voice:hover{background:rgba(255,255,255,.03)}
.voice:hover::before{transform:scaleX(1)}
.stars{display:flex;gap:4px;color:var(--amber);font-size:.82rem;letter-spacing:.1em}
.voice p{
  margin:0;font-size:1.04rem;line-height:1.55;color:var(--chalk);
  text-wrap:pretty;
}
.voice .who{
  margin-top:auto;padding-top:.4rem;
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--smoke);
}
.voice .who i{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);background:var(--carbon-2);
  font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:var(--chalk);
  transition:border-color .28s,color .28s;
}
.voice:hover .who i{border-color:var(--redline);color:var(--redline)}

/* ---------- Kontakt ---------- */
.contact{border:1px solid var(--line);background:var(--carbon);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media(max-width:880px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact-l{padding:clamp(2rem,4vw,3.4rem);border-right:1px solid var(--line)}
@media(max-width:880px){.contact-l{border-right:0;border-bottom:1px solid var(--line)}}
.contact-r{padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center;gap:1.8rem}
.contact h2{margin-bottom:1.2rem}
.crow{display:flex;gap:1rem;align-items:flex-start}
.crow .ic{width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--redline)}
.crow dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.crow dd{margin:.2rem 0 0;font-family:var(--f-disp);font-weight:800;font-size:1.28rem;letter-spacing:.005em;text-transform:uppercase}
.crow a:hover dd{color:var(--redline)}

/* ---------- FAQ ---------- */
.faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
@media(max-width:880px){.faq-cols{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
.faq-cols h3{margin-bottom:1.2rem;font-size:1.3rem;color:var(--smoke)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-family:var(--f-disp);font-weight:700;font-size:1.12rem;text-transform:uppercase;letter-spacing:.005em;line-height:1.2;
  transition:color .2s;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--redline)}
summary::after{
  content:"";position:absolute;right:.35rem;top:1.35rem;width:11px;height:11px;
  border-right:2px solid var(--redline);border-bottom:2px solid var(--redline);
  transform:rotate(45deg);transition:transform .25s;
}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 1.1rem;color:var(--smoke);font-size:.95rem;max-width:60ch}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line);padding-block:3rem 2.2rem;margin-top:var(--step);position:relative;z-index:1}
.foot-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot img{height:22px;width:auto;filter:invert(1);opacity:.85}
.foot-links{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.foot-links a:hover{color:var(--chalk)}
.foot-bot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.68rem;color:#5C636C;letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

/* ---------- schwebender Kontakt ---------- */
.float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:55;display:flex;flex-direction:column;gap:.6rem}
.float a{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.9);transition:transform .2s cubic-bezier(.3,1.4,.5,1);
}
.float a:hover{transform:scale(1.08)}
.float .wa{background:#25D366;color:#0B0C0E}
.float .tel{background:var(--redline);color:#fff}

/* ---------- Einblenden ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero-car{animation:none;opacity:1}
}
html{scroll-behavior:smooth;scroll-padding-top:90px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--redline);color:#fff;padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:.75rem}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- Tonale Bänder ---------- */
/* Die Seite atmet in Stufen: Asphalt (Grund) → Graphit (Daten) →
   Papier (Datenblatt). Ein Wechsel pro Kapitel, nie zwei nebeneinander. */
.band-graphite{
  background:var(--carbon);
  border-block:1px solid var(--line);
  position:relative;
}
.band-graphite::before{
  content:"";position:absolute;inset:0 0 auto 0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,42,20,.055),transparent);
}

/* Papierband — das eine helle Kapitel: gedrucktes Datenblatt aus der Box */
.band-paper{
  --ink:#0E1013;
  --ink-soft:#5A6068;
  --paper:#E8E6E1;
  --paper-2:#DFDCD5;
  --hair:#C7C3BA;
  --red-ink:#CF1B08;
  background:var(--paper);
  color:var(--ink);
  border-top:2px solid var(--redline);
  border-bottom:1px solid var(--ink);
}
.band-paper .eyebrow{color:var(--ink-soft)}
.band-paper .eyebrow::before{background:var(--red-ink)}
.band-paper h2,.band-paper h3,.band-paper h4{color:var(--ink)}
.band-paper .lede{color:var(--ink-soft)}
.band-paper .perks{background:var(--hair);border-color:var(--hair)}
.band-paper .perk{background:var(--paper)}
.band-paper .perk:hover{background:var(--paper-2)}
.band-paper .perk p{color:var(--ink-soft)}
.band-paper .perk .n{color:var(--red-ink)}
/* Auf dem Papier: Zitate, Sterne und Fragen umfärben */
.band-paper .voice p{color:var(--ink)}
.band-paper .voice .who{color:var(--ink-soft)}
.band-paper .voice .who i{border-color:var(--hair);background:var(--paper-2);color:var(--ink)}
.band-paper .voice:hover{background:rgba(14,16,19,.035)}
.band-paper .voice::before{background:var(--red-ink)}
.band-paper .voice:hover .who i{border-color:var(--red-ink);color:var(--red-ink)}
.band-paper .stars{color:#B8790A}
.band-paper details{border-bottom-color:var(--hair)}
.band-paper summary{color:var(--ink)}
.band-paper summary:hover{color:var(--red-ink)}
.band-paper summary::after{border-color:var(--red-ink)}
.band-paper details p{color:var(--ink-soft)}
.faq-cols .faq-h{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.1rem;
}
.faq-cols .faq-h-a{color:var(--red-ink,var(--redline))}
.faq-cols .faq-h-b{color:#0F7D6B}

/* Kopfzeile des Datenblatts */
.sheet-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--hair);padding-bottom:.7rem;margin-bottom:2.6rem;
}
.sheet-meta b{font-weight:500;color:var(--ink)}

/* ============================================================
   Unterseiten — Brotkrumen, Artikelsatz, Querverweise
   ============================================================ */
.crumb{
  width:var(--shell);margin:0 auto;padding:1.4rem 0 0;
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);
}
.crumb a{color:var(--smoke);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--chalk);border-bottom-color:var(--redline)}
.crumb span[aria-current]{color:var(--chalk)}
.crumb i{font-style:normal;margin:0 .5rem;color:#454C56}

.sub-hero{padding-block:clamp(2.6rem,5vw,4.4rem) clamp(2rem,4vw,3.2rem)}
.sub-hero h1{
  font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:.88;
  max-width:18ch;margin:0 0 1.4rem;
}
.sub-hero .lede{max-width:62ch;font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}
.sub-hero .cta-row{margin:2.2rem 0 0}

/* Artikelsatz: eine lesbare Spalte, Zwischenüberschriften mit Luft */
.prose{max-width:72ch}
.prose h2{
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  margin:3.2rem 0 1rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.15rem,1.9vw,1.4rem);margin:2rem 0 .7rem;color:var(--chalk)}
.prose p{margin:0 0 1.05rem;color:var(--smoke);line-height:1.68}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--chalk);font-weight:600}
.prose ul{margin:.2rem 0 1.2rem;padding:0;list-style:none}
.prose li{
  position:relative;padding-left:1.5rem;margin:0 0 .6rem;
  color:var(--smoke);line-height:1.6;
}
.prose li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--redline);transform:rotate(45deg);
}
.prose .note{margin:1.6rem 0 0}

/* Zweispaltig ab Tablet: Text links, Randspalte rechts */
.sub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.sub-grid{grid-template-columns:minmax(0,1fr)}}
.aside-card{
  position:sticky;top:96px;
  background:var(--carbon);border:1px solid var(--line);
  padding:1.5rem 1.4rem;
}
@media(max-width:900px){.aside-card{position:static}}
.aside-card h3{font-size:1.3rem;margin:0 0 .7rem}
.aside-card p{margin:0 0 1.2rem;color:var(--smoke);font-size:.94rem;line-height:1.55}
.aside-card .btn{width:100%;justify-content:center;margin-bottom:.55rem}
.aside-card .btn:last-child{margin-bottom:0}
.aside-k{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);
  padding-top:1.2rem;margin-top:1.2rem;border-top:1px solid var(--line);
}
.aside-k b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.15rem;
  letter-spacing:.01em;color:var(--chalk);margin-top:.25rem}

/* Querverweis-Kacheln zwischen den Seiten */
.xlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.xlinks{grid-template-columns:minmax(0,1fr)}}
.xlink{
  position:relative;display:block;background:var(--asphalt);
  padding:1.7rem 1.5rem 1.6rem;
  transition:background .28s cubic-bezier(.16,.84,.3,1);
}
.xlink:hover{background:var(--carbon)}
.xlink::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--redline);transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.16,.84,.3,1);
}
.xlink:hover::before{transform:scaleX(1)}
.xlink .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--redline)}
.xlink h3{font-size:1.5rem;margin:.6rem 0 .5rem}
.xlink p{margin:0;color:var(--smoke);font-size:.93rem;line-height:1.55}
.xlink .go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);
}
.xlink:hover .go{color:var(--redline)}
.band-paper .xlink{background:var(--paper)}
.band-paper .xlink:hover{background:var(--paper-2)}
.band-paper .xlinks{background:var(--hair);border-color:var(--hair)}
.band-paper .xlink p{color:var(--ink-soft)}
.band-paper .xlink .k{color:var(--red-ink)}
.band-paper .xlink .go{color:var(--ink)}
.band-paper .xlink::before{background:var(--red-ink)}

/* Andockpunkte für die Grafiken der Unterseiten. Die Module setzen ihre
   eigene Höhe; hier steht nur der gemeinsame Rahmen. */
.pv{position:relative;margin:1.9rem 0 2.2rem}
.pv:empty{display:none}

/* ===== FX: launch ===== */
/* ============================================================
   FX/LAUNCH — Startsequenz & Hero-Kinematik
   A) Startampel-Overlay   B) Hero-Einzug bei „Lichter aus"
   C) Drehzahlmesser       D) Hero-Abgang
   Vorzustände hängen ausschließlich an html.fx-armed:
   fehlt die Klasse (kein JS, reduzierte Bewegung), steht alles
   sofort in der Ruhelage.
   ============================================================ */

/* ---------- Scroll-Sperre, ohne Layout-Shift ----------
   overflow auf dem body: die Weitergabe an den Viewport sperrt das
   Dokument; die Breite der verschwundenen Bildlaufleiste wird als
   Innenabstand zurückgegeben, damit nichts springt. */
html.fx-lock body{overflow:hidden;padding-right:var(--fx-sbw,0px)}

/* ============================================================
   A) STARTAMPEL
   ============================================================ */
.fx-launch{
  position:fixed;inset:0;z-index:200;
  overflow:hidden;
  background:var(--asphalt);
  /* Notausstieg ohne JS: die Schicht verschwindet nach 2,6 s in jedem Fall */
  animation:fx-launch-deadman 1ms linear 2600ms forwards;
}
@keyframes fx-launch-deadman{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Zwei Hälften — der Abgang ist ein Abriss, kein Weichblenden */
.fx-launch-half{
  position:absolute;left:0;right:0;height:50.4%;
  will-change:transform;
  transition:transform .42s cubic-bezier(.7,0,.84,0);
}
.fx-launch-half--t{top:0;background:radial-gradient(130% 160% at 50% 100%,#12151A 0%,var(--asphalt) 66%)}
.fx-launch-half--b{bottom:0;background:radial-gradient(130% 160% at 50% 0%,#12151A 0%,var(--asphalt) 66%)}

/* Abrisskante — glüht erst im Moment des Aufreißens */
.fx-launch-half::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:var(--redline);
  box-shadow:0 0 26px 3px rgba(255,42,20,.55);
  opacity:0;transition:opacity .1s linear;
}
.fx-launch-half--t::after{bottom:0}
.fx-launch-half--b::after{top:0}

.fx-launch.is-out .fx-launch-half::after{opacity:1}
.fx-launch.is-out .fx-launch-half--t{transform:translate3d(0,-100.6%,0)}
.fx-launch.is-out .fx-launch-half--b{transform:translate3d(0,100.6%,0)}

/* Bühne mit Träger, fünf Säulen, Beschriftung */
.fx-launch-stage{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,28px);
  transition:opacity .09s linear;
}
.fx-launch.is-out .fx-launch-stage{opacity:0}

.fx-launch-rig{
  position:relative;
  display:flex;align-items:flex-start;
  gap:clamp(9px,1.8vw,22px);
  padding-top:20px;
  max-width:100%;
}
.fx-launch-rig::before{
  content:"";position:absolute;top:0;left:-7%;right:-7%;height:3px;
  background:linear-gradient(90deg,transparent,#2B3038 16%,#2B3038 84%,transparent);
}

.fx-lamp{
  position:relative;
  display:flex;flex-direction:column;
  gap:clamp(5px,.8vw,9px);
  padding:clamp(6px,.9vw,10px);
  background:#0F1115;
  border:1px solid #23272E;
  border-radius:3px;
}
/* Aufhängung am Träger */
.fx-lamp::before{
  content:"";position:absolute;left:50%;top:-20px;
  width:2px;height:20px;background:#23272E;transform:translateX(-50%);
}
.fx-lamp i{
  position:relative;display:block;
  width:clamp(21px,3.6vw,42px);aspect-ratio:1;
  border-radius:50%;
  background:#15181C;
  box-shadow:inset 0 0 0 1px var(--line);
}
/* Leuchtfläche als eigene Schicht: gezündet wird nur über opacity */
.fx-lamp i::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FF7A66 0%,var(--redline) 44%,#A81409 100%);
  box-shadow:0 0 16px 1px rgba(255,42,20,.6),0 0 46px 9px rgba(255,42,20,.2);
  opacity:0;transition:opacity .08s linear;
}
.fx-lamp.on i::after{opacity:1}
/* Alle gleichzeitig aus */
.fx-launch.is-dark .fx-lamp i::after{opacity:0;transition:opacity .07s linear}

.fx-launch-cap{
  margin:0;
  font-family:var(--f-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:#3F454E;
}

/* Reduzierte Bewegung: die Ampel wird gar nicht erst gezeigt */
@media(prefers-reduced-motion:reduce){
  .fx-launch{display:none}
}

/* ============================================================
   B) HERO-EINZUG — ausgelöst mit html.fx-go im Moment „Lichter aus"
   ============================================================ */

/* Neutralisierung der bestehenden Keyframe-Animation heroIn.
   Ruhelage exakt wie im Original (Endbild von heroIn):
   translateY(-47%) scale(1). Der senkrechte Anteil steht in
   --car-ty (aus dem Grund-Stylesheet), weil das schmale Fenster ihn auf -50% ändert —
   ohne die Variable würde die Bildebene aus der Mitte rutschen. */
.hero-car{
  animation:none;opacity:1;
  transform:translateY(var(--car-ty)) scale(1);
}

/* --- Vorzustände (nur solange scharf gemacht) --- */
html.fx-armed .hero-car{opacity:0;will-change:opacity,transform}
html.fx-armed .hero h1 > span{opacity:0;will-change:opacity,transform}
html.fx-armed .hero .eyebrow,
html.fx-armed .hero .lede,
html.fx-armed .hero .cta-row,
html.fx-armed .hero .hero-meta,
html.fx-armed .hero .gauge{opacity:0;will-change:opacity,transform}

/* --- Einzug --- */
html.fx-armed.fx-go .hero-car{
  animation:fx-car-in 1.02s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes fx-car-in{
  from{opacity:0;transform:translateY(var(--car-ty)) translate3d(4.5%,0,0) scale(1.16)}
  58%{opacity:1}
  to{opacity:1;transform:translateY(var(--car-ty)) translate3d(0,0,0) scale(1)}
}

/* Drei Zeilen schlagen von links ein: Versatz + Scherung, 90 ms Versatz.
   Die Kontur von .hollow bleibt unangetastet — nur transform/opacity. */
html.fx-armed.fx-go .hero h1 > span{
  animation:fx-line-in .58s cubic-bezier(.16,.84,.3,1) both;
}
html.fx-armed.fx-go .hero h1 > span:nth-child(2){animation-delay:.09s}
html.fx-armed.fx-go .hero h1 > span:nth-child(3){animation-delay:.18s}
@keyframes fx-line-in{
  from{opacity:0;transform:translate3d(-15%,0,0) skewX(11deg)}
  52%{opacity:1}
  to{opacity:1;transform:translate3d(0,0,0) skewX(0deg)}
}

/* Der ruhige Rest — gestaffelt, deutlich zurückhaltender */
html.fx-armed.fx-go .hero .eyebrow  {animation:fx-calm-in .52s cubic-bezier(.16,.84,.3,1) .20s both}
html.fx-armed.fx-go .hero .lede     {animation:fx-calm-in .52s cubic-bezier(.16,.84,.3,1) .28s both}
html.fx-armed.fx-go .hero .cta-row  {animation:fx-calm-in .52s cubic-bezier(.16,.84,.3,1) .36s both}
html.fx-armed.fx-go .hero .hero-meta{animation:fx-calm-in .52s cubic-bezier(.16,.84,.3,1) .44s both}
@keyframes fx-calm-in{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

/* Der Messer sitzt bereits auf translateY(-6%) — die Ruhelage muss
   erhalten bleiben, sonst springt er am Ende des Einzugs. */
html.fx-armed.fx-go .hero .gauge{animation:fx-gauge-in .5s cubic-bezier(.16,.84,.3,1) .06s both}
@keyframes fx-gauge-in{
  from{opacity:0;transform:translateY(-6%) scale(.93)}
  to{opacity:1;transform:translateY(-6%) scale(1)}
}

/* ============================================================
   C) DREHZAHLMESSER — Zeigerzittern in der roten Zone
   Der Drehpunkt liegt in der Mitte des viewBox (= Nabe).
   ============================================================ */
.gauge svg line{transform-box:view-box;transform-origin:50% 50%}

/* ============================================================
   D) HERO-ABGANG — will-change nur, solange der Hero im Bild ist
   ============================================================ */
.hero.fx-hero-live .hero-car,
.hero.fx-hero-live h1,
.hero.fx-hero-live .lede{will-change:transform}


/* ===== FX: type ===== */
/* ============================================================
   FX/TYPE — Kinetische Typografie
   Zeilensplitter + Einzug (B), Decal-Wischer (C), Augenbraue (D).
   Alles einmalige CSS-Animationen auf transform/opacity —
   das Modul hängt sich NICHT in FX.on ein, pro Frame passiert nichts.

   Zustandsklassen (vom Skript gesetzt, Modul-Namensraum "fx-ty-"):
     .fx-ty-arm  Vorzustand  — Zeile liegt unter der Maske
     .fx-ty-on   läuft       — Animationen aktiv, will-change gesetzt
     .fx-ty-set  fertig      — Endzustand, will-change wieder weg
   ============================================================ */

/* ------------------------------------------------------------
   0) Kaskade: .rv des bestehenden Skripts wird für Container mit
   Überschriften stillgelegt — sonst fährt der Container während
   Wischer und Einzug noch. Die übrigen Kinder solcher Container
   bekommen dafür .fx-ty-rise (unten), damit der Rhythmus bleibt.
   ------------------------------------------------------------ */
.rv.fx-ty-host{opacity:1;transform:none;transition:none}

/* ------------------------------------------------------------
   A) Zeilenmaske
   Der Rahmen bekommt Luft (padding) und zieht sie per negativem
   Rand wieder ab: identische Position, identische Höhe, aber
   Platz für Unterlängen, Akzente, Kursiv-Überhänge und Kontur.
   Flex-Spalte, weil Ränder von Flex-Kindern nicht kollabieren —
   nur so bleibt die Gesamthöhe exakt n × Zeilenhöhe.
   ------------------------------------------------------------ */
.fx-t{display:flex;flex-direction:column}
.fx-t-line{
  display:block;overflow:hidden;
  padding:.16em .14em .22em;
  margin:-.16em -.14em -.22em;
}
/* Die Maske darf nur oben und unten schneiden. Ein Wort, das in die Spalte
   nicht mehr passt (auf dem Handy: „deine Transformation?“), ragt im
   Original sichtbar aus dem Textblock — overflow:hidden schnitte dort
   Buchstaben ab. clip-path lässt die Waagerechte offen und ändert weder
   Layout noch Dokumentbreite. Ohne Unterstützung bleibt overflow:hidden. */
@supports (clip-path:polygon(0 0,0 0,0 0)){
  .fx-t-line{overflow:visible;clip-path:polygon(-200% 0,300% 0,300% 100%,-200% 100%)}
}
.fx-t-box{display:inline-block;position:relative;vertical-align:top}
.fx-t-in{display:block;white-space:nowrap;transform-origin:100% 50%}

/* Ein einzelnes Wort kann breiter sein als die Spalte — auf dem Handy etwa
   „Fahrzeugaufbereitung?“. Mit nowrap ragte es aus dem Textblock und zog die
   Dokumentbreite auf 436 px; body{overflow-x:hidden} schnitt es dann ab. Auf
   schmalen Displays darf die Zeile deshalb brechen. Weil jede Box ohnehin
   genau eine natürlich umbrochene Zeile trägt, greift das nur im Notfall.
   lang="de" liefert die Trennstellen, getrennt wird also mit Bindestrich. */
.fx-t-box{max-width:100%}
.fx-t-in{white-space:normal;overflow-wrap:break-word;hyphens:auto}

/* ------------------------------------------------------------
   B) Der Einzug — Zeile kommt von unten aus der Maske,
   Scherung -4° um das rechte Ende (das linke hängt tiefer und
   zieht nach), 70 ms Versatz je Zeile, harter Abfang.
   ------------------------------------------------------------ */
.fx-t.fx-ty-arm .fx-t-in{transform:translateY(130%) skewY(-4deg)}

/* +140 ms: die Zeile steigt hinter dem Balken auf und ist noch am
   Abfangen, wenn er sie freilegt — der Wischer zieht die Schrift mit. */
.fx-t.fx-ty-on .fx-t-in{
  will-change:transform;
  animation:fx-t-rise 560ms cubic-bezier(.16,.84,.3,1) both;
  animation-delay:calc(var(--fx-d,0ms) + var(--i,0) * 70ms + 140ms);
}
@keyframes fx-t-rise{
  from{transform:translateY(130%) skewY(-4deg)}
  to  {transform:none}
}

/* ------------------------------------------------------------
   C) Das Decal — roter Balken wischt waagerecht durch den
   Textbereich: 250 ms nach rechts ein, dann 270 ms rechts raus.
   Der Balken deckt die Zeile ab; weil die Schrift dahinter schon
   aufsteigt, erscheint sie in seiner Spur. Ein Wisch, 520 ms.
   ------------------------------------------------------------ */
.fx-t-bar{
  position:absolute;left:-.06em;right:-.08em;top:-.18em;bottom:-.26em;
  background:var(--redline);
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}
.band-paper .fx-t-bar{background:var(--red-ink)}

.fx-t.fx-ty-on .fx-t-bar{
  will-change:transform;
  animation:fx-t-decal 520ms linear both;
  animation-delay:calc(var(--fx-d,0ms) + var(--i,0) * 70ms);
}
@keyframes fx-t-decal{
  0%     {transform:scaleX(0);transform-origin:0% 50%;animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  48%    {transform:scaleX(1);transform-origin:0% 50%}
  52%    {transform:scaleX(1);transform-origin:100% 50%;animation-timing-function:cubic-bezier(.7,0,.84,0)}
  100%   {transform:scaleX(0);transform-origin:100% 50%}
}

/* ------------------------------------------------------------
   D) Die Augenbraue — erst wächst der rote Strich auf seine
   Breite, dann läuft der Text zeichenweise auf: Zeitnahme-Ausdruck.
   ~380 ms gesamt.
   ------------------------------------------------------------ */
.fx-eb-t{display:inline-block;min-width:0}
.fx-eb-c{display:inline-block}
.fx-eb::before{transform-origin:0 50%}

.fx-eb.fx-ty-arm::before{transform:scaleX(0)}
.fx-eb.fx-ty-arm .fx-eb-c{opacity:0}

.fx-eb.fx-ty-on::before{animation:fx-eb-rule 170ms cubic-bezier(.16,.84,.3,1) both}
.fx-eb.fx-ty-on .fx-eb-c{
  animation:fx-eb-char 110ms cubic-bezier(.16,.84,.3,1) both;
  animation-delay:calc(110ms + var(--i,0) * var(--fx-cs,14ms));
}
@keyframes fx-eb-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fx-eb-char{
  from{opacity:0;transform:translateY(.55em)}
  to  {opacity:1;transform:none}
}

/* ------------------------------------------------------------
   Ersatz für die stillgelegte .rv-Fahrt: die übrigen Kinder eines
   Überschriften-Containers steigen nach dem Wischer gestaffelt auf.
   Fokus hebt die Verdeckung sofort auf — Tastatur geht vor.
   ------------------------------------------------------------ */
.fx-ty-rise{opacity:0;transform:translateY(20px)}
.fx-ty-rise.fx-ty-on{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,.84,.3,1) var(--fx-rd,0ms),
             transform .6s cubic-bezier(.16,.84,.3,1) var(--fx-rd,0ms);
}
/* Notausstieg (Hintergrund-Tab, Fokus): Endzustand ohne Überblendung —
   im unsichtbaren Tab steht die Zeitachse, eine Transition liefe nie an. */
.fx-ty-rise.fx-ty-set,
.fx-ty-rise:focus-within{opacity:1;transform:none;transition:none}

/* ------------------------------------------------------------
   Reduzierte Bewegung: das Skript greift dann gar nicht erst ein.
   Diese Regeln sind die Rettungsleine, falls die Einstellung erst
   nach dem Aufteilen umgestellt wird — Endzustand sofort, lesbar.
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .fx-t.fx-ty-arm .fx-t-in,
  .fx-t.fx-ty-on  .fx-t-in{animation:none;transform:none}
  .fx-t-bar{display:none}
  .fx-eb.fx-ty-arm::before,
  .fx-eb.fx-ty-on::before{animation:none;transform:none}
  .fx-eb.fx-ty-arm .fx-eb-c,
  .fx-eb.fx-ty-on  .fx-eb-c{animation:none;opacity:1;transform:none}
  .fx-ty-rise{opacity:1;transform:none}
}


/* ===== FX: velocity ===== */
/* ============================================================
   FX · velocity — Geschwindigkeitssystem
   A) Geschwindigkeitsstreifen (Canvas)   B) Rausch der roten Zone
   C) Laufband am FX-Tick                 D) Kopfzeile auf Abruf
   Schichtung: Inhalt 1 · Streifen 45 · Vignette 46 · .hdr 50
               .float 55 · .revbar 60 · Rotglut 61 · .mnav 70
   ============================================================ */

/* ---------- A) Streifenleinwand ---------- */
.fx-vel-streaks{
  position:fixed;inset:0;z-index:45;
  display:block;width:100%;height:100%;
  pointer-events:none;
  contain:layout paint;
}

/* ---------- B) Rote Zone: Randvignette ---------- */
/* Zwei Verläufe: innen die Glut (--redline), außen ein tiefes Bremsrot.
   Das tiefe Rot trägt den Effekt auch auf dem hellen Papierband. */
.fx-vel-vig{
  position:fixed;inset:0;z-index:46;
  pointer-events:none;opacity:0;
  background:
    radial-gradient(118% 94% at 50% 50%,rgba(255,42,20,0) 44%,rgba(255,42,20,.20) 78%,rgba(255,42,20,.44) 100%),
    radial-gradient(142% 112% at 50% 50%,rgba(0,0,0,0) 52%,rgba(96,10,3,.34) 86%,rgba(96,10,3,.58) 100%);
  transition:opacity .16s cubic-bezier(.7,0,.84,0);
}
/* Auf dem Datenblatt schlägt die Glut in Druckrot um — sonst frisst das Papier sie auf. */
:root.fx-vel-paper .fx-vel-vig{
  background:
    radial-gradient(118% 94% at 50% 50%,rgba(207,27,8,0) 44%,rgba(207,27,8,.24) 78%,rgba(207,27,8,.52) 100%),
    radial-gradient(142% 112% at 50% 50%,rgba(0,0,0,0) 52%,rgba(72,8,2,.22) 86%,rgba(72,8,2,.44) 100%);
}
:root.fx-vel-red .fx-vel-vig{
  opacity:1;
  transition:opacity .13s cubic-bezier(.16,.84,.3,1);
}

/* ---------- B) Rote Zone: Glut über der Schaltlichtleiste ---------- */
/* Eigene Schicht direkt über .revbar (z 60). Das bestehende Skript
   behält die Leiste vollständig — hier wird nur überdeckt. */
.fx-vel-revglow{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:61;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#FF2A14 0%,#FF6A4A 46%,#FF2A14 100%);
  box-shadow:0 0 14px rgba(255,42,20,.85),0 0 3px rgba(255,42,20,.9);
  transition:opacity .16s cubic-bezier(.7,0,.84,0);
}
:root.fx-vel-red .fx-vel-revglow{
  opacity:1;
  transition:opacity .11s cubic-bezier(.16,.84,.3,1);
}

/* ---------- C) Laufband ---------- */
/* Ergänzt .ticker-track: die feste CSS-Animation `roll` wird abgeschaltet,
   der Vorschub kommt aus dem FX-Tick (transform). `will-change` setzt das
   Skript nur, solange das Band im Bild ist — nicht dauerhaft per CSS. */
.ticker .ticker-track{animation:none}

/* ---------- D) Kopfzeile ---------- */
/* Sie bleibt beim Scrollen stehen. Die frühere Wegfahr-Bewegung ist
   entfernt: Telefonnummer und Menü sollen jederzeit greifbar sein. */
.hdr,.hdr.fx-vel-up{transform:none}

/* ---------- Bewegung reduziert ---------- */
/* Endzustand: keine Streifen, keine Glut, Kopfzeile steht, Band steht.
   Zuletzt notiert, damit die Quellreihenfolge entscheidet. */
@media(prefers-reduced-motion:reduce){
  .fx-vel-streaks,.fx-vel-vig,.fx-vel-revglow{display:none}
  .hdr,.hdr.fx-vel-up{transform:none;transition:none}
  .ticker .ticker-track{will-change:auto}
}


/* ===== FX: cards ===== */
/* ============================================================
   FX/cards — Leistungsraster
   A) Einzug als Welle, B) Hover mit Wischer + Neigung,
   C) FLIP beim Filtern, D) dieselbe Welle für die Vorteile.
   Alle Zustände hängen an Klassen, die das Skript setzt —
   ohne JS bleibt die Seite exakt wie vorher.
   ============================================================ */

/* Wischerfarben. Auf dem Papierband Druckrot statt Signalrot,
   und kein weißes Licht — Weiß ist auf Papier unsichtbar. */
:root{
  --fx-cd-wipe-a:rgba(255,42,20,.44);
  --fx-cd-wipe-b:rgba(255,255,255,.5);
}
.band-paper{
  --fx-cd-wipe-a:rgba(207,27,8,.26);
  --fx-cd-wipe-b:rgba(207,27,8,.09);
}

/* Exit-Karten brauchen einen Bezugsrahmen */
#grid{position:relative}

/* ------------------------------------------------------------
   A) Einzug — die Karten kippen gestaffelt herein.
   Der Container übernimmt die Bewegung, seine eigene .rv-Fahrt
   wird dafür stillgelegt: eine Bewegung pro Moment.
   ------------------------------------------------------------ */
#grid.fx-cd-armed{
  opacity:1;transform:none;transition:none;
  perspective:1200px;perspective-origin:50% 18%;
}
#grid.fx-cd-armed .card{
  opacity:0;
  transform:translate3d(0,34px,0) rotateX(-13deg);
  transform-origin:50% 0%;
  will-change:transform,opacity;
  transition:
    opacity   .42s cubic-bezier(.16,.84,.3,1),
    transform .6s  cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--fx-cd-d,0ms);
}
#grid.fx-cd-go .card{opacity:1;transform:none}

/* Der fertige Container trägt seinen Endzustand selbst und hängt
   nicht mehr am .in des bestehenden Skripts — armiert wird nur,
   was hinterher garantiert wieder sichtbar ist. */
#grid.fx-cd-ready,
.perks.fx-cd-ready{opacity:1;transform:none}

/* Solange die Kinder unsichtbar sind, darf die Fugenfarbe des
   Rasters nicht als geschlossene Fläche stehenbleiben — sonst
   liegt vor dem Einzug ein grauer Block auf dem Asphalt (und auf
   dem Papierband ein grauer Block auf dem Papier). Der Rahmen
   bleibt, die Fugen kommen mit den Karten. */
@media(prefers-reduced-motion:no-preference){
  #grid.fx-cd-armed,
  .perks.fx-cd-armed{background-color:transparent}
  #grid.fx-cd-ready,
  .perks.fx-cd-ready{transition:background-color .4s linear}
}

/* ------------------------------------------------------------
   B) Hover — nur wo es echten Hover gibt.
   ------------------------------------------------------------ */

@keyframes fx-cd-wipe{
  0%  {opacity:0;transform:translate3d(0,0,0) skewX(-14deg)}
  12% {opacity:1}
  88% {opacity:1}
  100%{opacity:0;transform:translate3d(var(--fx-cd-run,330%),0,0) skewX(-14deg)}
}

@media(hover:hover) and (pointer:fine){
  /* Der Diagonalwisch. Nutzt .card::before, das noch frei war.
     left + Laufweite sind so gewählt, dass das Band durch die Schräge
     hindurch links komplett draußen startet und rechts komplett austritt. */
  .card::before{
    content:"";position:absolute;z-index:3;
    top:-30%;bottom:-30%;left:-72%;width:50%;
    --fx-cd-run:400%;
    pointer-events:none;opacity:0;
    background:linear-gradient(90deg,
      rgba(255,42,20,0) 0%,
      var(--fx-cd-wipe-a) 44%,
      var(--fx-cd-wipe-b) 53%,
      var(--fx-cd-wipe-a) 62%,
      rgba(255,42,20,0) 100%);
    transform:translate3d(0,0,0) skewX(-14deg);
  }
  .card:hover::before{animation:fx-cd-wipe .56s cubic-bezier(.2,.78,.32,1) both}

  /* Bild: die Werte stehen schon im Stylesheet — hier nur schärfer getaktet */
  .card-img{
    transition:
      filter    .34s cubic-bezier(.16,.84,.3,1),
      transform .52s cubic-bezier(.16,.84,.3,1);
  }

  /* Titel schiebt an, Etikett kippt um */
  .card h3{transition:transform .26s cubic-bezier(.16,.84,.3,1)}
  .card:hover h3{transform:translate3d(5px,0,0)}
  .tag{
    transition:
      transform .28s cubic-bezier(.16,.84,.3,1),
      background-color .22s linear,
      color .22s linear;
  }
  .card:hover .tag{transform:translate3d(0,-3px,0)}
  .card:hover .tag.perf{background:var(--redline);color:#fff}
  .card:hover .tag.optik{background:var(--amber);color:var(--asphalt)}
  .card:hover .tag.service{background:var(--sector);color:var(--asphalt)}

  /* Die geneigte Karte liegt über ihren Nachbarn */
  .card.fx-cd-hot{z-index:5}
  /* Abgabe an die Nachbarkarte: kurz ausschwingen statt flachschlagen */
  .card.fx-cd-settle{transition:transform .18s cubic-bezier(.7,0,.84,0)}

}

/* Der Wisch auf den Vorteilszeilen ist entfallen: die Sektion ist jetzt
   ein Datenblatt, dessen rote Linie unter jeder Zeile einläuft. Ein
   overflow:hidden würde die genau abschneiden. */
.perk{position:relative}

/* ------------------------------------------------------------
   C) Filter — FLIP. Die Klassen setzt das Skript in zwei Zügen:
   erst der Ausgangszustand, dann (nach einem Umbruch) das Ziel.
   ------------------------------------------------------------ */

/* Verschiebung */
.card.fx-cd-flip{transition:none;will-change:transform;z-index:2}
.card.fx-cd-flip-run{transition:transform .42s cubic-bezier(.16,.84,.3,1)}

/* Einzug neuer Karten */
.card.fx-cd-enter{
  opacity:0;transform:translate3d(0,-16px,0) scale(.965);
  transition:none;will-change:transform,opacity;
}
.card.fx-cd-enter-run{
  opacity:1;transform:none;
  transition:
    opacity   .3s  cubic-bezier(.16,.84,.3,1),
    transform .38s cubic-bezier(.16,.84,.3,1);
}

/* Abgang: aus dem Fluss genommen, damit das neue Raster sofort sitzt.
   Steht nach .card.hide im Stylesheet und gewinnt deshalb. */
.card.fx-cd-out{
  display:flex;position:absolute;z-index:1;
  pointer-events:none;margin:0;min-height:0;
  transition:none;will-change:transform,opacity;
}
.card.fx-cd-out-run{
  opacity:0;transform:translate3d(0,20px,0) scale(.94);
  transition:
    opacity   .22s cubic-bezier(.7,0,.84,0),
    transform .26s cubic-bezier(.7,0,.84,0);
}

/* Der gedrückte Chip quittiert mit einem Balken, der durchläuft */
.chip{position:relative}
.chip::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--redline);transform:scaleX(0);opacity:0;
  pointer-events:none;
}
.chip.fx-cd-hit::after{animation:fx-cd-bar .34s cubic-bezier(.16,.84,.3,1) both}
@keyframes fx-cd-bar{
  0%  {opacity:1;transform:scaleX(0);transform-origin:0 50%}
  54% {opacity:1;transform:scaleX(1);transform-origin:0 50%}
  55% {opacity:1;transform:scaleX(1);transform-origin:100% 50%}
  100%{opacity:1;transform:scaleX(0);transform-origin:100% 50%}
}

/* ------------------------------------------------------------
   D) Vorteilskarten — dieselbe Welle, deutlich ruhiger.
   ------------------------------------------------------------ */
.perks.fx-cd-armed{
  opacity:1;transform:none;transition:none;
  perspective:1000px;perspective-origin:50% 0%;
}
.perks.fx-cd-armed .perk{
  opacity:0;
  transform:translate3d(0,20px,0) rotateX(-7deg);
  transform-origin:50% 0%;
  will-change:transform,opacity;
  transition:
    opacity   .36s cubic-bezier(.16,.84,.3,1),
    transform .52s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--fx-cd-d,0ms);
}
.perks.fx-cd-go .perk{opacity:1;transform:none}

/* ------------------------------------------------------------
   Bewegung reduziert: Endzustand, sofort, ohne Ausnahme.
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  #grid.fx-cd-armed,
  .perks.fx-cd-armed{perspective:none}
  #grid.fx-cd-armed .card,
  .perks.fx-cd-armed .perk{
    opacity:1;transform:none;transition:none;will-change:auto;
  }
  .card::before{display:none}
  .chip.fx-cd-hit::after{animation:none;opacity:0}
  .card.fx-cd-enter,
  .card.fx-cd-enter-run{opacity:1;transform:none;transition:none}
  .card.fx-cd-flip,
  .card.fx-cd-flip-run{transform:none;transition:none}
  .card.fx-cd-out{display:none}
}


/* ===== FX: sweep ===== */
/* ============================================================
   Wisch beim Scrollen — bisher lag der Diagonalwisch der Karten
   hinter einer Hover-Abfrage und war auf dem Handy gar nicht zu
   sehen. Das Wischband gibt es jetzt überall, ausgelöst wird es
   beim Erscheinen der Karte; auf Zeigergeräten zusätzlich beim
   Überfahren (das regelt weiterhin das cards-Modul).
   ============================================================ */
.card::before{
  content:"";position:absolute;z-index:3;
  top:-30%;bottom:-30%;left:-72%;width:50%;
  --fx-cd-run:400%;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,
    rgba(255,42,20,0) 0%,
    var(--fx-cd-wipe-a,rgba(255,42,20,.44)) 44%,
    var(--fx-cd-wipe-b,rgba(255,255,255,.5)) 53%,
    var(--fx-cd-wipe-a,rgba(255,42,20,.44)) 62%,
    rgba(255,42,20,0) 100%);
  transform:translate3d(0,0,0) skewX(-14deg);
}
.card.fx-sw::before{
  animation:fx-cd-wipe .74s cubic-bezier(.2,.78,.32,1) both;
}

/* Während der Wisch läuft, kommt das Bild kurz zu Farbe — danach
   bleibt es auf Geräten ohne Hover etwas heller stehen, sonst wäre
   das Raster dort dauerhaft grau. */
.card .card-img{
  transition:filter .5s cubic-bezier(.16,.84,.3,1),transform .7s cubic-bezier(.16,.84,.3,1);
}
.card.fx-sw .card-img{
  filter:grayscale(.05) brightness(.78) contrast(1.02);
  transform:scale(1.05);
}
@media(hover:none){
  .card.fx-lit .card-img{filter:grayscale(.45) brightness(.62) contrast(1.03)}
  .card.fx-lit .tag{opacity:1}
}

/* Das Etikett zündet mit */
.card .tag{transition:background .3s,color .3s,transform .3s}
.card.fx-sw .tag.perf{background:var(--redline);color:#fff;transform:translate3d(0,-3px,0)}
.card.fx-sw .tag.optik{background:var(--amber);color:var(--asphalt);transform:translate3d(0,-3px,0)}
.card.fx-sw .tag.service{background:var(--sector);color:var(--asphalt);transform:translate3d(0,-3px,0)}

/* Die rote Grundlinie fährt beim Wisch mit ein */
.card.fx-sw .rule{width:100%}

@media(prefers-reduced-motion:reduce){
  .card::before{display:none}
  .card.fx-sw .card-img{filter:grayscale(.92) brightness(.5) contrast(1.05);transform:none}
}


/* ===== FX: data ===== */
/* ============================================================
   MODUL „data" — Messwerte & Diagramme
   Leistungsdiagramm mit Schreibkopf, mechanisches Zählwerk,
   Stufenbalken mit Vorderkante, Sterne.
   Alles neue Namen mit fx-. Bestehende Selektoren nur dort
   ergänzt, wo im Manifest dokumentiert.
   ============================================================ */

/* ---------- A) Leistungsdiagramm ---------- */

/* Achsen, Raster, Beschriftung: leise vorweg einblenden.
   Verzögerung setzt das Skript je Element (einmalig, inline). */
#dyno .fx-ax{opacity:0;transition:opacity .34s cubic-bezier(.16,.84,.3,1)}
#dyno .fx-ax.fx-in{opacity:1}

/* Rote Zone — eigener Zielwert, weil das Rechteck opacity .09 trägt */
#dyno .fx-zone{opacity:0;transition:opacity .42s cubic-bezier(.16,.84,.3,1)}
#dyno .fx-zone.fx-in{opacity:.09}
#dyno .fx-zone.fx-hot{animation:fx-zone-hot .58s cubic-bezier(.2,.8,.3,1) 1}
@keyframes fx-zone-hot{
  0%{opacity:.09}
  15%{opacity:.44}
  100%{opacity:.09}
}

/* Nachleuchten hinter dem Schreibkopf — Deckkraft kommt aus dem Tick */
#dyno .fx-trail{opacity:0;pointer-events:none}

/* Schreibkopf: weißer Kern in farbigem Hof, kein Filter */
#dyno .fx-head{opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.7,0,.84,0)}
#dyno .fx-head.fx-on{opacity:1;will-change:transform;transition:opacity .12s linear}

/* Endpunkte rasten ein, wenn ihre Kurve steht */
#dyno .fx-dot{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
#dyno .fx-dot.fx-in{animation:fx-dot-in .34s cubic-bezier(.16,.84,.3,1) both}
@keyframes fx-dot-in{
  0%{opacity:0;transform:scale(.15)}
  58%{opacity:1;transform:scale(1.55)}
  100%{opacity:1;transform:scale(1)}
}

/* Spitzenwert springt ein, kurzes Überschwingen */
#dyno .fx-peak{opacity:0;transform-box:fill-box;transform-origin:0% 62%}
#dyno .fx-peak.fx-in{animation:fx-peak-in .44s cubic-bezier(.16,.84,.3,1) both}
@keyframes fx-peak-in{
  0%{opacity:0;transform:translateX(-7px) scale(.7)}
  52%{opacity:1;transform:translateX(0) scale(1.16)}
  74%{transform:scale(.965)}
  100%{opacity:1;transform:none}
}

/* ---------- B) Telemetrie — mechanisches Zählwerk ---------- */

/* Der Geisttext hält Breite, Grundlinie und Zeilenkasten exakt wie zuvor;
   die Ziffernwalzen liegen absolut darüber. Kein Layout-Shift, keine
   Sprünge in der Breite. */
.fx-odo{
  --fx-odo-h:1.22em;
  position:relative;display:inline-block;vertical-align:baseline;
  font-variant-numeric:tabular-nums;
}
.fx-odo-ghost{visibility:hidden}
.fx-odo-cols{
  position:absolute;left:0;right:0;top:50%;
  height:var(--fx-odo-h);
  transform:translateY(-50%);
  display:flex;pointer-events:none;
}
/* Senkrecht maskieren, waagerecht Luft lassen — die Ziffern sind kursiv und
   ragen seitlich über ihre Spalte hinaus. Negative Längen sind in inset()
   unzulässig (die ganze Regel verfällt dann), darum Innenabstand plus
   negativer Außenabstand: overflow schneidet am Innenrand, also nur oben
   und unten, während die Schräglage seitlich Platz behält. */
.fx-odo-d{
  flex:1 1 0;min-width:0;
  padding-inline:.45em;margin-inline:-.45em;
  overflow:hidden;
}
.fx-odo-s{flex:0 0 auto;line-height:var(--fx-odo-h)}
.fx-odo-r{display:block;transform:translate3d(0,0,0)}
.fx-odo-r b{
  display:block;height:var(--fx-odo-h);line-height:var(--fx-odo-h);
  font-weight:inherit;font-style:inherit;text-align:center;
}
.fx-odo.fx-go .fx-odo-r{
  will-change:transform;
  animation:fx-odo-roll var(--fx-odo-t,700ms) linear var(--fx-odo-d,0ms) both;
}
.fx-odo.fx-done .fx-odo-r{
  transform:translate3d(0,calc(var(--fx-odo-h) * var(--fx-odo-i) * -1),0);
}
/* Walze läuft an, überrollt die Endlage um Haaresbreite, fällt zurück */
@keyframes fx-odo-roll{
  0%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.3,.02,.28,1)}
  87%{transform:translate3d(0,calc(var(--fx-odo-h) * var(--fx-odo-i) * -1 - .075em),0);animation-timing-function:cubic-bezier(.5,0,.2,1)}
  100%{transform:translate3d(0,calc(var(--fx-odo-h) * var(--fx-odo-i) * -1),0)}
}

/* ---------- C) Stufenbalken ---------- */

/* Die Führung gilt erst ab .fx-barred — die Klasse setzt das Skript.
   Läuft das Modul nicht, bleibt das Grundverhalten (inline `right`)
   unangetastet und die Balken füllen sich wie zuvor. */
.stage .bar.fx-barred{--fx-bar:0;--fx-bar-p:0%}
.stage .bar.fx-barred span{
  right:0 !important;                 /* das Grundskript setzt `right` inline */
  transform-origin:0 50%;
  transform:scaleX(var(--fx-bar,0));
  backface-visibility:hidden;
}
.stage .bar.fx-barred.fx-go span{
  will-change:transform;
  animation:fx-bar-fill .76s linear both;
}
/* anreißen, überschwingen, kurz stehen, hart einrasten */
@keyframes fx-bar-fill{
  0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.14,.74,.28,1)}
  64%{transform:scaleX(calc(var(--fx-bar) * 1.045));animation-timing-function:linear}
  76%{transform:scaleX(calc(var(--fx-bar) * 1.045));animation-timing-function:cubic-bezier(.55,0,.15,1)}
  100%{transform:scaleX(var(--fx-bar))}
}
/* helle Vorderkante: liegt links des Balkens, wandert mit ihrer rechten
   Flanke über die Prozentmarke — Prozent = Breite des Balkens, ohne Messung */
.stage .bar .fx-bar-edge{
  position:absolute;top:0;bottom:0;right:100%;width:100%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 78%,
    rgba(255,255,255,.14) 90%,
    rgba(255,255,255,.55) 97%,
    #fff 100%);
  opacity:0;pointer-events:none;
  transform:translate3d(0,0,0);
}
.stage .bar.fx-go .fx-bar-edge{
  will-change:transform,opacity;
  animation:fx-bar-edge .76s linear both;
}
@keyframes fx-bar-edge{
  0%{opacity:0;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.1,.8,.24,1)}
  8%{opacity:1}
  56%{transform:translate3d(calc(var(--fx-bar-p) * 1.06),0,0);animation-timing-function:linear}
  76%{transform:translate3d(calc(var(--fx-bar-p) * 1.06),0,0);opacity:1;animation-timing-function:cubic-bezier(.55,0,.15,1)}
  100%{transform:translate3d(var(--fx-bar-p),0,0);opacity:0}
}

/* ---------- D) Sterne ---------- */

.stars .fx-star{display:block;font-style:normal;transform-origin:50% 62%}
.stars.fx-arm .fx-star{opacity:0}
.stars.fx-go .fx-star{animation:fx-star-in .26s cubic-bezier(.16,.84,.3,1) both}
@keyframes fx-star-in{
  0%{opacity:0;transform:scale(.35) translateY(2px)}
  62%{opacity:1;transform:scale(1.16) translateY(0)}
  100%{opacity:1;transform:none}
}

/* ---------- Bewegung reduziert: nur Endzustände ---------- */
@media(prefers-reduced-motion:reduce){
  #dyno .fx-ax{opacity:1}
  #dyno .fx-zone,#dyno .fx-zone.fx-in{opacity:.09}
  #dyno .fx-dot,#dyno .fx-peak{opacity:1}
  #dyno .fx-head,#dyno .fx-trail{display:none}
  .fx-odo-r{transform:translate3d(0,calc(var(--fx-odo-h) * var(--fx-odo-i) * -1),0)}
  .stars.fx-arm .fx-star{opacity:1}
}


/* ===== FX: raceline ===== */
/* ============================================================
   Ideallinie — die Rennlinie zieht sich beim Scrollen durch drei
   Scheitelpunkte. Jeder Scheitel gehört zu einem der drei Schritte
   und zündet, wenn die Linie ihn erreicht. Nichts Illustratives,
   nur Streckenführung.
   ============================================================ */
.fx-rl{
  position:relative;
  margin:0 0 1.9rem;
  padding:1.4rem 0 .2rem;
  border-top:1px solid var(--line);
  pointer-events:none;
  contain:layout paint;
}
.fx-rl-svg{display:block;width:100%;height:auto;overflow:visible}

/* Streckenränder — sehr leise, sie geben der Linie nur Kontext */
.fx-rl-edge{
  fill:none;stroke:#22262D;stroke-width:1.4;
  stroke-linecap:round;
}
/* Die ungefahrene Linie */
.fx-rl-base{
  fill:none;stroke:#2B3038;stroke-width:2;
  stroke-linecap:round;stroke-dasharray:2 7;
}
/* Die gefahrene Linie */
.fx-rl-live{
  fill:none;stroke:var(--redline);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.fx-rl-glow{
  fill:none;stroke:var(--redline);stroke-width:9;
  stroke-linecap:round;opacity:.16;filter:blur(5px);
}
/* Der Kopf der Linie */
.fx-rl-head{fill:#fff;opacity:0}
.fx-rl-halo{fill:var(--redline);opacity:0}

/* Scheitelpunkte */
.fx-rl-tick{stroke:#2E343C;stroke-width:1.6;stroke-linecap:round}
.fx-rl-dot{fill:#14171B;stroke:#3A424C;stroke-width:1.6;transition:none}
.fx-rl-hit{fill:var(--c);opacity:0}
.fx-rl-ring{fill:none;stroke:var(--c);stroke-width:1.6;opacity:0}
.fx-rl-lbl{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:2.4px;fill:var(--smoke);
}

.fx-rl-a1{--c:var(--sector)}
.fx-rl-a2{--c:var(--amber)}
.fx-rl-a3{--c:var(--redline)}

/* Kopfzeile über der Strecke */
.fx-rl-hd{
  position:absolute;left:0;right:0;top:-.1rem;
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--f-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);
}
.fx-rl-hd b{font-weight:700;color:var(--chalk)}

/* Das SVG skaliert mit der Breite: Angaben in Nutzereinheiten schrumpfen
   auf schmalen Displays mit. Beschriftung und Strichstärken darum dort
   deutlich größer setzen, sonst sind sie unter 7 px. */
@media(max-width:900px){
  .fx-rl-lbl{font-size:22px;letter-spacing:4px}
  .fx-rl-live{stroke-width:5}
  .fx-rl-glow{stroke-width:13}
  .fx-rl-base{stroke-width:3;stroke-dasharray:3 10}
  .fx-rl-edge{stroke-width:2}
  .fx-rl-tick{stroke-width:2.4}
  .fx-rl-dot{r:8;stroke-width:2.4}
  .fx-rl-head{r:6.5}
  .fx-rl-halo{r:16}
}
@media(max-width:560px){
  .fx-rl{padding-top:1.9rem;overflow:hidden}
  /* Über die Ränder hinaus, damit die Kurve Höhe bekommt — sonst bleibt
     von der Streckenführung nur ein flaches Zittern übrig. */
  .fx-rl-svg{width:128%;margin-inline:-14%}
  .fx-rl-lbl{font-size:26px;letter-spacing:4px}
  .fx-rl-live{stroke-width:7}
  .fx-rl-glow{stroke-width:18}
  .fx-rl-hd{font-size:.54rem;letter-spacing:.16em}
}

/* ---------- Die drei Schrittkarten ziehen mit ---------- */
.fx-rl-on .pit-step:nth-child(1){--fx-acc:var(--sector)}
.fx-rl-on .pit-step:nth-child(2){--fx-acc:var(--amber)}
.fx-rl-on .pit-step:nth-child(3){--fx-acc:var(--redline)}

.fx-rl-on .pit-step::before{
  background:var(--fx-acc);
  transform-origin:left;
  transform:scaleX(var(--fx-lit,0));
  transition:box-shadow .34s cubic-bezier(.16,.84,.3,1);
}
.fx-rl-on .pit-step.fx-live::before{box-shadow:0 0 14px -1px var(--fx-acc)}

.fx-rl-on .pit-step::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fx-acc) 7%,transparent),transparent 62%);
  opacity:0;transition:opacity .38s cubic-bezier(.16,.84,.3,1);
}
.fx-rl-on .pit-step.fx-live::after{opacity:1}

.fx-rl-on .pit-step .idx{transition:-webkit-text-stroke-color .34s cubic-bezier(.16,.84,.3,1)}
.fx-rl-on .pit-step.fx-live .idx{-webkit-text-stroke-color:var(--fx-acc)}

@media(prefers-reduced-motion:reduce){
  .fx-rl-head,.fx-rl-halo{opacity:0}
  .fx-rl-on .pit-step::before{transform:scaleX(1)}
}


/* ===== FX: ambient ===== */
/* ============================================================
   Ambientelicht — das Innenraumfoto liegt dunkel und wird beim
   Heranscrollen eingeschaltet. Zwei Zuckungen, dann brennt der
   Streifen durch, danach driftet die Farbe langsam wie bei einer
   echten Ambientebeleuchtung.
   Alles läuft über opacity/transform, das Foto liegt zweimal
   übereinander (aus/an) — kein Filter im Dauertakt.
   ============================================================ */

/* Der Grund des Bildes wird von unseren Schichten übernommen. */
.about-img.fx-amb-ready{ background-image:none; }

.fx-amb{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

/* Aus-Zustand: dasselbe Foto, entfärbt und heruntergedunkelt.
   Der Filter steht fest, er wird nie animiert. */
.fx-amb-off,
.fx-amb-on{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.fx-amb-on{ background-image:var(--img-ambiente); }
/* Liegt ein echtes Foto mit ausgeschaltetem Licht vor, nimmt der Build
   --img-ambiente-off auf und setzt --amb-off-filter auf none. Ohne das
   Foto wird der Aus-Zustand aus dem An-Foto simuliert. */
.fx-amb-off{
  background-image:var(--img-ambiente-off, var(--img-ambiente));
  filter:var(--amb-off-filter, grayscale(.88) brightness(.32) contrast(1.22));
}
.fx-amb-on{
  opacity:0;
  filter:saturate(1.18) contrast(1.04);
  will-change:opacity;
}

/* Lichtschein des Streifens — legt sich additiv über das Foto. */
.fx-amb-glow{
  position:absolute; inset:-10%;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(64% 30% at 26% 62%, rgba(190,80,255,.55), transparent 72%),
    radial-gradient(58% 26% at 78% 44%, rgba(120,90,255,.45), transparent 74%);
  will-change:opacity;
}

/* Zündfunke: läuft einmal der Länge des Streifens nach. */
.fx-amb-spark{
  position:absolute; left:-30%; top:52%; width:26%; height:3px;
  opacity:0;
  transform:translate3d(0,0,0) rotate(-9deg);
  transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),rgba(214,120,255,.85),transparent);
  box-shadow:0 0 18px 4px rgba(200,110,255,.6);
  will-change:transform,opacity;
}

/* Schaltzustand oben links — kleines Bedienteil, rein visuell. */
.fx-amb-badge{
  position:absolute; z-index:3; top:1rem; left:1rem;
  display:flex; align-items:center; gap:.55rem;
  padding:.42rem .7rem;
  background:rgba(11,12,14,.72);
  border:1px solid var(--line);
  font-family:var(--f-mono); font-size:.58rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--smoke);
  backdrop-filter:blur(6px);
}
.fx-amb-badge i{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:#2A2F37;
  transition:background .25s ease, box-shadow .25s ease;
}
.fx-amb-badge b{
  font-weight:700; color:#5C636C;
  transition:color .25s ease;
}
.fx-amb-badge.on i{ background:var(--sector); box-shadow:0 0 8px rgba(27,170,146,.9); }
.fx-amb-badge.on b{ color:var(--chalk); }

/* Ist das Licht an, darf der dunkle Verlauf darüber zurücktreten. */
.about-img.fx-amb-lit::after{ opacity:.62; transition:opacity 1.1s ease; }
.about-img::after{ transition:opacity .6s ease; }

@media(prefers-reduced-motion:reduce){
  .fx-amb-on{ opacity:1 }
  .fx-amb-glow{ opacity:.5 }
  .fx-amb-spark{ display:none }
}


/* ===== FX: atmos ===== */
/* ============================================================
   ATMOS — Atmosphäre & Mikrointeraktionen
   A Bremsscheiben-Zeiger · B magnetische Knöpfe · C Sternenhimmel
   D Sektions-Trigger · E Feinschliff (Nav, Stimmen, Float, Menü)
   Alle neuen Klassen mit fx- Präfix. Ergänzt bestehende Selektoren,
   definiert keinen bestehenden Baustein neu.
   ============================================================ */

/* ---------- A) Zeiger: feiner Ring wie eine Bremsscheibe ----------
   Ergänzung, kein Ersatz: der Systemzeiger bleibt sichtbar.
   Wird nur bei echtem Hover und ohne prefers-reduced-motion angelegt. */
.fx-cur{
  position:fixed;top:0;left:0;z-index:200;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  pointer-events:none;
  opacity:0;
  /* Grundton dunkles Band; das Papierband kippt ihn auf Druckschwarz */
  --fx-cc:rgba(238,241,244,.80);
  color:var(--fx-cc);
  transition:opacity .22s linear,color .18s linear;
}
.fx-cur.fx-on{opacity:1;will-change:transform}
.fx-cur.fx-hot{--fx-cc:var(--redline)}
/* will-change nur, solange der Ring wirklich läuft */
.fx-cur.fx-on .fx-cur-in{will-change:transform}
/* Papierband: Rot = --red-ink, Neutral = Druckschwarz.
   Der Zeiger liegt fixiert außerhalb von .band-paper, darum die Literale. */
.fx-cur.fx-paper{--fx-cc:rgba(14,16,19,.72)}
.fx-cur.fx-paper.fx-hot{--fx-cc:#CF1B08}

.fx-cur-in{position:absolute;inset:0}
.fx-cur-in > i{position:absolute;display:block}

/* Scheibenaußenring */
.fx-cur-ring{
  inset:0;border:1.5px solid currentColor;border-radius:50%;
  transition:opacity .18s linear;
}
/* Belüftungsschlitze — statisch gezeichnet, gedreht wird nur per transform */
.fx-cur-vents{
  inset:4px;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,currentColor 0deg 1deg,transparent 1deg 30deg);
  -webkit-mask-image:radial-gradient(circle,transparent 44%,#000 49%,#000 76%,transparent 80%);
  mask-image:radial-gradient(circle,transparent 44%,#000 49%,#000 76%,transparent 80%);
  transition:opacity .18s linear;
}
/* Nabe */
.fx-cur-dot{
  left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:currentColor;
  transition:opacity .18s linear;
}
/* Über Text wird der Ring schmal — Schlitze und Nabe treten ab */
.fx-cur.fx-txt .fx-cur-vents,
.fx-cur.fx-txt .fx-cur-dot{opacity:0}

/* ---------- B) Magnetische Knöpfe ----------
   .fx-pull trägt den Versatz (JS-getrieben), .fx-mag den roten Wischer. */
/* overflow:hidden hält den geparkten Wischer in der Knopffläche;
   der eigene Fokusrahmen und der Schlagschatten bleiben davon unberührt. */
/* position:relative mit Nullspezifität — sonst überschreibt diese Regel das
   position:absolute von .mnav-x (gleiche Spezifität, später im Stylesheet)
   und der Schließen-Knopf fällt in den Menüfluss. */
:where(.btn,.chip){position:relative}
.btn,.chip{isolation:isolate;overflow:hidden}
.btn::before,.chip::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--redline);pointer-events:none;
  transform:translate3d(var(--fx-tx,-101%),var(--fx-ty,0%),0);
  transition:transform .38s cubic-bezier(.16,.84,.3,1);
}
.btn.fx-mag::before,.chip.fx-mag::before,
.btn:focus-visible::before,.chip:focus-visible::before{transform:translate3d(0,0,0)}
/* Auf rotem Grund wischt kein zweites Rot, sondern ein Decal-Glanz */
.btn-red::before{background:linear-gradient(100deg,rgba(255,255,255,.28),rgba(255,255,255,.05))}
.btn-ghost.fx-mag,.btn-ghost:focus-visible{border-color:var(--redline);background:rgba(255,255,255,.02);color:#fff}
/* Der aktive Filterknopf ist hell gefüllt — dort darf weder Wischer noch
   weiße Schrift greifen, sonst steht Weiß auf --chalk. */
.chip:not([aria-pressed="true"]).fx-mag{color:#fff;border-color:var(--redline)}
.chip[aria-pressed="true"]::before{content:none}
/* Papierband: rote Flächen in Druckrot */
.band-paper .btn::before,.band-paper .chip::before{background:var(--red-ink)}
.band-paper .btn-red::before{background:linear-gradient(100deg,rgba(255,255,255,.3),rgba(255,255,255,.06))}
.band-paper .btn-ghost.fx-mag,
.band-paper .chip:not([aria-pressed="true"]).fx-mag{border-color:var(--red-ink)}

/* Versatz und Anhebung kommen aus dem FX-Tick; transform darf hier
   nicht zusätzlich per transition nachlaufen. */
.btn.fx-pull,.chip.fx-pull{
  transform:translate3d(var(--fx-mx,0px),var(--fx-my,0px),0);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  will-change:transform;
}

/* ---------- C) Sternenhimmel über dem Ambientelicht-Foto ---------- */
.about-img{isolation:isolate}
.fx-stars{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}

/* ---------- D) Sektionswechsel: Zeitnahme-Trigger ----------
   Wächst aus der linken Kante über die Breite und zieht rechts ab.
   Nur scaleX/opacity — kein Überstand, kein horizontales Scrollen. */
.fx-sweep{position:relative}  /* .section ist bereits relativ — nur Absicherung */
.fx-sweep::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  pointer-events:none;opacity:0;
  transform:scaleX(0);transform-origin:0% 50%;
  background:linear-gradient(90deg,transparent,var(--redline) 16%,#fff 50%,var(--redline) 84%,transparent);
}
/* Papierband trägt oben bereits eine rote Kante — Linie darunter, dunkler Kern */
.band-paper.fx-sweep::after{
  top:4px;
  background:linear-gradient(90deg,transparent,var(--red-ink) 16%,#3B0A02 50%,var(--red-ink) 84%,transparent);
}
.fx-sweep.fx-run::after{animation:fx-trigger 760ms both}
@keyframes fx-trigger{
  0%  {opacity:0;transform:scaleX(0);transform-origin:0% 50%;animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  7%  {opacity:1}
  48% {opacity:1;transform:scaleX(1);transform-origin:0% 50%;animation-timing-function:linear}
  50% {opacity:1;transform:scaleX(1);transform-origin:100% 50%;animation-timing-function:cubic-bezier(.7,0,.84,0)}
  100%{opacity:0;transform:scaleX(0);transform-origin:100% 50%}
}

/* ---------- E1) Navigation: Unterstrich aus der Bewegungsrichtung ----------
   Ersetzt die right-Transition durch scaleX mit gesetztem Ursprung. */
.nav a::after{
  right:0;
  transform:scaleX(0);
  transform-origin:var(--fx-uo,0%) 50%;
  transition:transform .3s cubic-bezier(.16,.84,.3,1);
}
.nav a:hover::after,.nav a:focus-visible::after{right:0;transform:scaleX(1)}

/* ---------- E2) Stimmen: kurzes Anheben beim Erscheinen ---------- */
.voice.fx-voice{
  transform:translateY(18px);
  transition:transform .56s cubic-bezier(.16,.84,.3,1),border-color .25s;
}
.voice.fx-voice.fx-in{transform:none}
.voice.fx-voice:hover{transition-duration:.22s,.25s}

/* ---------- E3) Schwebende Kontaktknöpfe: ruhiger Puls ---------- */
.float a{position:relative}
.float a::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid currentColor;pointer-events:none;
  opacity:0;transform:scale(1);
  animation:fx-ping 3.6s cubic-bezier(.16,.84,.3,1) infinite;
}
.float .wa::after{border-color:#25D366}
.float .tel::after{border-color:var(--redline);animation-delay:.55s}
@keyframes fx-ping{
  0%  {opacity:0;transform:scale(1)}
  5%  {opacity:.7}
  32% {opacity:0;transform:scale(1.55)}
  100%{opacity:0;transform:scale(1.55)}
}
/* Bei schnellem Scrollen aussetzen — Endzustand ist unsichtbar.
   Eigener Klassenname, damit sich das Tempo-Signal nicht mit dem eines
   anderen Moduls überlagert. */
html.fx-atmos-fast .float a::after{animation:none}

/* ---------- E4) Vollbildmenü: gestaffelter Einzug ----------
   Hängt sich an das bestehende .open, ersetzt keine Logik. */
.mnav a.ml,.mnav .mnav-foot{
  opacity:0;transform:translateY(26px);
  transition:transform .52s cubic-bezier(.16,.84,.3,1),opacity .34s linear,color .2s;
}
.mnav.open a.ml,.mnav.open .mnav-foot{opacity:1;transform:none}
.mnav.open a.ml:nth-of-type(1){transition-delay:.10s,.10s,0s}
.mnav.open a.ml:nth-of-type(2){transition-delay:.16s,.16s,0s}
.mnav.open a.ml:nth-of-type(3){transition-delay:.22s,.22s,0s}
.mnav.open a.ml:nth-of-type(4){transition-delay:.28s,.28s,0s}
.mnav.open a.ml:nth-of-type(5){transition-delay:.34s,.34s,0s}
.mnav.open .mnav-foot{transition-delay:.42s,.42s,0s}

/* ---------- Bewegung reduziert: Endzustand sofort ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-cur{display:none}
  .mnav a.ml,.mnav .mnav-foot{opacity:1;transform:none;transition-delay:0s !important}
  .voice.fx-voice{transform:none}
  .fx-sweep::after{display:none}
  .float a::after{display:none}
  .btn::before,.chip::before{transition:none}
  .nav a::after{transform:scaleX(0)}
  .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
}


/* ===== FX: pv-pop ===== */
/* ============================================================
   Unterseite „Pop & Bang" — drei erklärende Grafiken.
   1 zuendung  Längsschnitt: Brennraum, Auslassventil, Krümmer,
               Endrohr. Zwei Takte: Serie und Pop & Bang.
   2 faktoren  Drei Vergleichszeilen, dämpfende Seite gegen laute.
   3 stufen    Drei Druckverläufe: dezent, mittig, kräftig.

   Die Andockpunkte bekommen ihre Höhe HIER, vor dem Skript. Ein
   nachträglich wachsender Kasten würde den Text nach unten
   schieben — deshalb steht das Seitenverhältnis fest und das SVG
   liegt absolut darin. Alle Klassen tragen den Modulpräfix
   fx-pv-, alle Farben kommen aus den Marken-Variablen.
   ============================================================ */
.pv[data-pv="zuendung"],
.pv[data-pv="faktoren"],
.pv[data-pv="stufen"]{
  display:block;position:relative;width:100%;
  box-sizing:border-box;
  margin:1.7rem 0 2rem;
  overflow:hidden;
  contain:layout paint;
  pointer-events:none;
}
/* Die viewBox trägt beidseitig 14 Einheiten Rand (-14 … 734, Breite 748).
   Das Seitenverhältnis zieht exakt mit — jede Abweichung ergäbe unter
   preserveAspectRatio="xMidYMid meet" Letterboxing. */
.pv[data-pv="zuendung"]{aspect-ratio:748/300}
.pv[data-pv="faktoren"]{aspect-ratio:748/272}
.pv[data-pv="stufen"]  {aspect-ratio:748/300}

.fx-pv-svg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:block;overflow:hidden;
}

/* ---------- gemeinsame Grundelemente ---------- */
.fx-pv-t{
  font-family:var(--f-mono);font-size:13.5px;font-weight:500;
  letter-spacing:1.7px;fill:var(--smoke);
}
.fx-pv-t.b{font-weight:700;fill:var(--chalk)}
.fx-pv-t.hot{fill:var(--redline)}
.fx-pv-t.dim{fill:var(--smoke);opacity:.62}

.fx-pv-hair{stroke:var(--line);stroke-width:1.2}
.fx-pv-lead{stroke:#3A424C;stroke-width:1.2}
.fx-pv-ax{stroke:#3A424C;stroke-width:1.6;stroke-linecap:round}
.fx-pv-tick{stroke:#39404A;stroke-width:1.4;stroke-linecap:round}
.fx-pv-arrow{fill:#4C555F}

/* ============================================================
   1 · ZÜNDUNG — Längsschnitt
   ============================================================ */
.fx-pv-chip{fill:var(--redline)}
.fx-pv-blk{fill:#101215;stroke:#2E343C;stroke-width:1.4}
.fx-pv-wall{stroke:#2E343C;stroke-width:3;stroke-linecap:round}
.fx-pv-bore{stroke:#0B0C0E;stroke-width:3}
.fx-pv-port{fill:none;stroke:#0B0C0E;stroke-width:14;stroke-linecap:round}

.fx-pv-pis rect{fill:#1B1E23;stroke:#454D57;stroke-width:1.4}
.fx-pv-pis line{stroke:#333A43;stroke-width:1.2}
.fx-pv-vlv rect{fill:#3A424C}
.fx-pv-vlv path{fill:#24282F;stroke:#4C555F;stroke-width:1.3}
.fx-pv-inj{fill:#2E343C;stroke:#454D57;stroke-width:1.2}
.fx-pv-spray line{stroke:var(--amber);stroke-width:1.8;stroke-linecap:round}

.fx-pv-pipeo{fill:none;stroke:#2A2F37;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.fx-pv-pipei{fill:none;stroke:#0E1013;stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.fx-pv-tipo{stroke:#2A2F37;stroke-width:32}
.fx-pv-tipi{stroke:#0E1013;stroke-width:26}
.fx-pv-face{fill:#0B0C0E;stroke:#4C555F;stroke-width:1.4}

/* Nachglühen: der Strang bleibt hinter der Flamme heiß */
.fx-pv-hot{fill:none;stroke:var(--amber);stroke-width:16;stroke-linecap:round;opacity:0}
/* Flammfront */
.fx-pv-flg{fill:none;stroke:var(--amber);stroke-width:21;stroke-linecap:round;opacity:0}
.fx-pv-flc{fill:none;stroke:var(--redline);stroke-width:12;stroke-linecap:round;opacity:0}
.fx-pv-fh{opacity:0}
.fx-pv-fh1{fill:var(--amber);opacity:.5}
.fx-pv-fh2{fill:#fff}
/* Druckwelle am Endrohr */
.fx-pv-ring{opacity:0}
.fx-pv-ring ellipse{fill:none;stroke:var(--redline);stroke-width:2;vector-effect:non-scaling-stroke}

/* Gradskala für den Zündzeitpunkt */
.fx-pv-ot{stroke:var(--chalk);stroke-width:1.8;stroke-linecap:round}
.fx-pv-nd path,.fx-pv-nd rect{fill:var(--sector)}
.fx-pv-nd.late path,.fx-pv-nd.late rect{fill:var(--redline)}

.fx-pv-led{fill:#1B1E23;stroke:#39404A;stroke-width:1.4}
.fx-pv-led.on{fill:var(--redline);stroke:var(--redline)}
.fx-pv-capB{opacity:0}

/* ============================================================
   2 · FAKTOREN — Vergleichsbalken
   ============================================================ */
.fx-pv-rail{fill:#15181C}
.fx-pv-bl rect{fill:var(--sector)}
.fx-pv-br rect{fill:var(--redline)}
.fx-pv-tipL{fill:color-mix(in srgb,var(--sector) 42%,#fff)}
.fx-pv-tipR{fill:color-mix(in srgb,var(--redline) 42%,#fff)}
.fx-pv-row{opacity:0}
.fx-pv-hd{opacity:0}

/* ============================================================
   3 · STUFEN — Druckverlauf
   ============================================================ */
.fx-pv-base{stroke:#22262D;stroke-width:1.2;stroke-dasharray:2 6}
.fx-pv-trace{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-pv-s1 .fx-pv-trace{stroke:var(--sector)}
.fx-pv-s2 .fx-pv-trace{stroke:var(--amber)}
.fx-pv-s3 .fx-pv-trace{stroke:var(--redline)}
.fx-pv-s1 .fx-pv-pen{fill:var(--sector)}
.fx-pv-s2 .fx-pv-pen{fill:var(--amber)}
.fx-pv-s3 .fx-pv-pen{fill:var(--redline)}
.fx-pv-pen{opacity:0}
.fx-pv-lane{opacity:0}

/* ============================================================
   Schmale Displays: das SVG skaliert mit der Spaltenbreite, also
   schrumpfen Beschriftung und Strichstärken mit. Beide deshalb in
   Nutzereinheiten stufenweise größer setzen — sonst stünden sie
   auf 360 px unter 7 px. Auf 360 px trägt die letzte Stufe 21
   Nutzereinheiten × 312/748 ≈ 8,8 px, auf 320 px noch 7,6 px.

   Die Beschriftung sitzt bei x = 0 und x = 720, also auf den Kanten
   des ZEICHENFELDS. Die viewBox reicht beidseitig 14 Einheiten
   darüber hinaus (-14 … 734); dieser Rand hält die Randglyphen vom
   overflow:hidden des Kastens frei — auf 390 px rund 6 px je Seite.
   Wer die viewBox ändert, muss das Seitenverhältnis oben mitziehen.
   ============================================================ */
@media(max-width:640px){
  .fx-pv-t{font-size:15px;letter-spacing:1.8px}
}
@media(max-width:520px){
  .fx-pv-t{font-size:17px;letter-spacing:2px}
  .fx-pv-hair,.fx-pv-lead{stroke-width:1.8}
  .fx-pv-trace{stroke-width:3}
  .fx-pv-base{stroke-width:1.6;stroke-dasharray:3 8}
}
@media(max-width:440px){
  .fx-pv-t{font-size:21px;letter-spacing:2.2px}
  .fx-pv-hair,.fx-pv-lead{stroke-width:2.2}
  .fx-pv-ax{stroke-width:2.2}
  .fx-pv-tick{stroke-width:2}
  .fx-pv-trace{stroke-width:3.8}
  .fx-pv-wall{stroke-width:4}
  .fx-pv-blk,.fx-pv-pis rect,.fx-pv-vlv path,.fx-pv-face{stroke-width:2}
}


/* ===== FX: pv-reifen ===== */
/* ============================================================
   FX „pv-reifen" — die drei Grafiken der Unterseite Reifenwechsel

   1  radreifen   Radwechsel gegen Reifenwechsel
   2  ablauf-rad  Ablauf des Radwechsels in der Werkstatt
   3  profil      Profiltiefe bis zum gesetzlichen Mindestmaß

   Die Andockpunkte bekommen ihre Höhe HIER, bevor das Skript läuft.
   Der gebaute Inhalt liegt absolut darin (inset:0), trägt also nichts
   zur Höhe bei — der Kasten kann den Text nicht nachträglich
   nach unten schieben.

   Farben ausschließlich aus den Marken-Variablen. Rot ist auf dieser
   Seite für genau eine Aussage reserviert: das gesetzliche Mindestmaß
   von 1,6 mm. Der Werkstattablauf läuft in Türkis, die Warnstufe
   (Nacharbeit, mehr Aufwand) in Bernstein.
   ============================================================ */

/* ---------- Andockpunkte ---------- */
.pv[data-pv="radreifen"],
.pv[data-pv="ablauf-rad"],
.pv[data-pv="profil"]{
  display:block;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  contain:layout paint;          /* schneidet ab und kapselt das Layout */
  pointer-events:none;           /* aria-hidden: nichts davon ist anfassbar */
}
.pv[data-pv="radreifen"]{aspect-ratio:100/58;min-height:300px}
.pv[data-pv="ablauf-rad"]{min-height:232px}
.pv[data-pv="profil"]{aspect-ratio:100/63;min-height:310px}

@media(max-width:640px){
  .pv[data-pv="ablauf-rad"]{min-height:398px}
  .pv[data-pv="profil"]{aspect-ratio:auto;min-height:352px}
}
@media(max-width:520px){
  /* Gestapelt hängt die Höhe an der Schrift, nicht an der Breite —
     ein Seitenverhältnis würde den Kasten hier absurd hoch machen. */
  .pv[data-pv="radreifen"]{aspect-ratio:auto;min-height:560px}
}

/* ---------- gemeinsamer Rahmen ---------- */
.fx-rv{
  position:absolute;inset:0;
  display:grid;overflow:hidden;
  padding:.95rem 0 1rem;
}
.fx-rv-hd{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.57rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);
  line-height:1.25;
}
.fx-rv-hd b{font-weight:700;letter-spacing:.14em;color:var(--chalk)}
.fx-rv-hd i{font-style:normal;margin-left:auto;color:#4A525C;letter-spacing:.18em}
@media(max-width:520px){
  .fx-rv-hd{font-size:.54rem;letter-spacing:.16em}
  .fx-rv-hd i{display:none}
}


/* ============================================================
   1 · RADREIFEN — links wandert das ganze Rad, rechts nur der Reifen
   ============================================================ */
.fx-rd{grid-template-rows:auto minmax(0,1fr)}
.fx-rd-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);       /* Haarlinie zwischen den Feldern */
  margin-top:.7rem;min-height:0;
}
@media(max-width:520px){
  .fx-rd-row{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}
}
.fx-rd-p{
  position:relative;background:var(--asphalt);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  gap:.45rem;padding:.75rem .8rem .6rem;min-height:0;
}
.fx-rd-p.a{--acc:var(--sector)}
.fx-rd-p.b{--acc:var(--amber)}
.fx-rd-p::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc);opacity:.6;
}
.fx-rd-t{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk);
}
.fx-rd-t::before{
  content:"";width:6px;height:6px;flex:none;
  background:var(--acc);transform:rotate(45deg);
}
.fx-rd-st{position:relative;min-height:0}
.fx-rd-svg{display:block;width:100%;height:100%}
.fx-rd-c{
  font-family:var(--f-mono);font-size:.53rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.6;
  color:var(--smoke);
}
.fx-rd-c b{display:block;font-weight:700;color:var(--chalk);margin-bottom:.2rem}

/* Nabe und Bremsscheibe — bleiben in beiden Feldern stehen */
.fx-rd-disc2{fill:#101317;stroke:#242830;stroke-width:1.2}
.fx-rd-disc{fill:none;stroke:#22262D;stroke-width:9}
.fx-rd-hubf{fill:#1B1E23;stroke:#333941;stroke-width:1.5}
.fx-rd-stud{fill:#454C56}
.fx-rd-hubc{fill:#0B0C0E;stroke:#333941;stroke-width:1.4}

/* Reifen */
.fx-rd-tread{fill:none;stroke:#232830;stroke-width:20}
.fx-rd-blk{stroke:#0E1013;stroke-width:3.4}
.fx-rd-edge{fill:none;stroke:#3A424C;stroke-width:1.3}

/* Felge */
.fx-rd-rimo{fill:#14171B;stroke:#454C56;stroke-width:1.6}
.fx-rd-spoke{stroke:#23272E;stroke-width:7.5;stroke-linecap:round}
.fx-rd-bolt{fill:#0B0C0E;stroke:#333941;stroke-width:1}
.fx-rd-cap{fill:#1B1E23;stroke:#454C56;stroke-width:1.4}

/* Geisterkontur am alten Platz, Markierung am Bauteil, das bleibt */
.fx-rd-ghost{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-dasharray:5 6;opacity:0}
.fx-rd-seat{fill:none;stroke:var(--acc);stroke-width:2;opacity:0}

.fx-rd-tag{
  font-family:var(--f-mono);font-size:12px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;
  fill:var(--smoke);text-anchor:middle;opacity:0;
}
.fx-rd-tag.mv{fill:var(--acc)}
@media(max-width:520px){
  .fx-rd-tag{font-size:13px;letter-spacing:1.6px}
  .fx-rd-c{font-size:.55rem}
}


/* ============================================================
   2 · ABLAUF-RAD — waagerechte Stationskette mit Fortschrittslinie
   Unter 640 px kippt sie in die Senkrechte: sechs Stationen auf
   360 px nebeneinander wären nicht mehr lesbar.
   ============================================================ */
.fx-ab{grid-template-rows:auto minmax(0,1fr)}
.fx-ab-stage{position:relative;margin-top:.7rem;min-height:0}

.fx-ab-rail{
  position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;
  background:var(--line);
}
.fx-ab-live{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sector) 0 75%,var(--amber) 75%);
  clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0);
}
/* Zwischen „Drehmoment" und „nach 50 km" liegen gefahrene Kilometer —
   dieser Abschnitt der Linie ist deshalb gestrichelt. Die Lücken werden
   mit dem Grund übermalt, der Grund muss also stimmen: die Grafik steht
   auf dem Graphitband, nicht auf Asphalt. Sonst liegen dort dunklere
   Balken auf der Linie statt Lücken. */
.fx-ab{--fx-rv-bg:var(--asphalt)}
.band-graphite .fx-ab{--fx-rv-bg:var(--carbon)}
.band-paper .fx-ab{--fx-rv-bg:var(--paper)}
.fx-ab-gap{
  position:absolute;left:75%;right:8.3333%;top:-1px;bottom:-1px;
  background:repeating-linear-gradient(90deg,var(--fx-rv-bg) 0 5px,transparent 5px 11px);
}
/* Der Kopf sitzt im Nullpunkt der Schiene und wird von dort
   verschoben — die Länge misst das Skript einmal, nie im Frame. */
.fx-ab-head{
  position:absolute;left:0;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--chalk);opacity:0;
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--sector) 55%,transparent);
}

.fx-ab-s{
  position:absolute;top:0;bottom:0;width:33.3333%;
  left:calc(var(--i) * 16.6667% - 8.3333%);
  --acc:var(--sector);
}
.fx-ab-s[data-i="5"]{--acc:var(--amber)}

.fx-ab-dot{
  position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--asphalt);border:1.5px solid #39404A;
  transform:scale(calc(1 + .22 * var(--l,0)));
}
.fx-ab-dot::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--acc);opacity:var(--l,0);
}

.fx-ab-lb{
  position:absolute;left:0;right:0;
  transform:translate(var(--sx,0px),calc((1 - var(--l,0)) * 5px));
  opacity:calc(.24 + .76 * var(--l,0));
  text-align:center;
}
.fx-ab-s[data-side="up"] .fx-ab-lb{bottom:calc(50% + 15px)}
.fx-ab-s[data-side="dn"] .fx-ab-lb{top:calc(50% + 15px)}
.fx-ab-s[data-i="0"] .fx-ab-lb{--sx:25%;text-align:left}
.fx-ab-s[data-i="5"] .fx-ab-lb{--sx:-25%;text-align:right}

.fx-ab-lb em{
  display:block;font-style:normal;
  font-family:var(--f-mono);font-size:.52rem;font-weight:700;
  letter-spacing:.2em;color:var(--acc);
}
.fx-ab-lb b{
  display:block;margin:.15rem 0 .18rem;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--chalk);
}
.fx-ab-lb span{
  display:block;
  font-family:var(--f-mono);font-size:.5rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.55;
  color:var(--smoke);
}

/* ---- senkrechte Leiter ---- */
@media(max-width:640px){
  /* Die Schiene muss dieselbe Strecke abbilden wie in der Waagerechten:
     0 bis 100 % der Bühne. Die Marken sitzen bei (i+0,5)/6, und der Kopf
     fährt p · Schienenlänge — ein Einzug oben und unten würde beides
     gegeneinander verschieben und den Kopf an den Punkten vorbeiführen. */
  .fx-ab-rail{
    left:13px;right:auto;width:2px;
    top:0;bottom:0;height:auto;
  }
  .fx-ab-live{
    background:linear-gradient(180deg,var(--sector) 0 75%,var(--amber) 75%);
    clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);
  }
  .fx-ab-gap{
    left:-1px;right:-1px;top:75%;bottom:8.3333%;
    background:repeating-linear-gradient(180deg,var(--fx-rv-bg) 0 5px,transparent 5px 11px);
  }
  .fx-ab-s{
    left:0;right:0;width:auto;bottom:auto;
    top:calc(var(--i) * 16.6667%);height:16.6667%;
  }
  .fx-ab-head{left:14px;top:0}
  .fx-ab-dot{left:14px;top:50%}
  .fx-ab-lb{
    top:50%;bottom:auto;left:34px;right:0;
    transform:translate(0,calc(-50% + (1 - var(--l,0)) * 5px));
    text-align:left;
  }
  .fx-ab-s[data-i="0"] .fx-ab-lb,
  .fx-ab-s[data-i="5"] .fx-ab-lb{--sx:0px;text-align:left}
  .fx-ab-lb em{display:inline;margin-right:.6rem}
  .fx-ab-lb b{display:inline;font-size:.62rem}
  .fx-ab-lb span{margin-top:.2rem;font-size:.52rem}
}


/* ============================================================
   3 · PROFIL — Querschnitt, Messkeil, Anzeige 8,0 → 1,6 mm
   ============================================================ */
.fx-pf{grid-template-rows:auto minmax(0,1fr) auto}
.fx-pf-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:.8rem;flex-wrap:wrap;
}
.fx-pf-k{
  font-family:var(--f-mono);font-size:.57rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);
}
.fx-pf-k b{display:block;margin-top:.2rem;font-weight:700;letter-spacing:.14em;color:var(--chalk)}
.fx-pf-val{
  display:flex;align-items:baseline;gap:.4rem;
  font-family:var(--f-mono);line-height:1;
}
.fx-pf-val b{
  font-size:clamp(1.55rem,1rem + 2.4vw,2.3rem);font-weight:700;
  letter-spacing:.01em;color:var(--chalk);
  font-variant-numeric:tabular-nums;
  transition:color .3s cubic-bezier(.16,.84,.3,1);
}
.fx-pf-val i{
  font-style:normal;font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);
}
.fx-pf-val u{
  text-decoration:none;font-size:.5rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--redline);
  margin-left:.15rem;padding:.24rem .35rem .2rem;
  border:1px solid var(--redline);
  opacity:0;transition:opacity .3s cubic-bezier(.16,.84,.3,1);
}
.fx-pf.fx-lock .fx-pf-val b{color:var(--redline)}
.fx-pf.fx-lock .fx-pf-val u{opacity:1}

.fx-pf-st{position:relative;min-height:0;margin:.55rem 0 .5rem}
.fx-pf-svg{display:block;width:100%;height:100%}

.fx-pf-lg{
  display:flex;flex-direction:column;gap:.22rem;
  font-family:var(--f-mono);font-size:.5rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.5;
  color:var(--smoke);
}
.fx-pf-lg span{display:flex;align-items:flex-start;gap:.45rem}
.fx-pf-lg i{
  width:7px;height:7px;flex:none;margin-top:.28em;
  background:var(--sw);opacity:.75;
}
.fx-pf-lg .r{--sw:var(--redline)}
.fx-pf-lg .a{--sw:var(--amber)}

/* Zeichnung */
.fx-pf-ax{stroke:#2E343C;stroke-width:1.3}
.fx-pf-tick{stroke:#39404A;stroke-width:1.3}
.fx-pf-carc{fill:#131619;stroke:#2A2E35;stroke-width:1.2}
.fx-pf-ply{stroke:#20242A;stroke-width:1}
.fx-pf-zone{fill:var(--redline);opacity:.14}
.fx-pf-rec{fill:var(--amber);opacity:.05}
.fx-pf-recl{stroke:var(--amber);stroke-width:1;stroke-dasharray:4 5;opacity:.3}
.fx-pf-start{stroke:#454C56;stroke-width:1.2;stroke-dasharray:6 6;opacity:.55}
.fx-pf-twib{fill:#272B32}
.fx-pf-twit{stroke:var(--redline);stroke-width:1.4;opacity:.8}
.fx-pf-block{fill:#1D2126;stroke:#333941;stroke-width:1.2}
.fx-pf-top{stroke:#4C545E;stroke-width:1.8}
.fx-pf-sipe{stroke:#131619;stroke-width:2}
.fx-pf-min{
  stroke:var(--redline);stroke-width:1.5;stroke-dasharray:7 6;opacity:.7;
  transition:opacity .34s cubic-bezier(.16,.84,.3,1),stroke-width .34s cubic-bezier(.16,.84,.3,1);
}
.fx-pf.fx-lock .fx-pf-min{opacity:1;stroke-width:2.2;stroke-dasharray:none}
.fx-pf-pin{fill:#8B939D}
.fx-pf-plate{fill:#22262B;stroke:#4C545E;stroke-width:1.4}
.fx-pf-shaft{fill:#1B1E23;stroke:#3A424C;stroke-width:1.2}
.fx-pf-sc{stroke:#5A626C;stroke-width:1.2}
.fx-pf-lbl,.fx-pf-lbl0{
  font-family:var(--f-mono);font-size:15px;font-weight:600;
  letter-spacing:1.4px;text-anchor:end;
}
.fx-pf-lbl{fill:var(--redline)}
.fx-pf-lbl0{fill:#6B737D}
.fx-pf-twi{
  font-family:var(--f-mono);font-size:13px;font-weight:600;
  letter-spacing:1.8px;fill:#6B737D;text-anchor:middle;
}
@media(max-width:640px){
  .fx-pf-lbl,.fx-pf-lbl0{font-size:19px;letter-spacing:1.8px}
  .fx-pf-twi{font-size:17px;letter-spacing:2.2px}
  .fx-pf-lg{font-size:.52rem}
}


/* ============================================================
   Heller Grund — der Abschnitt „Profiltiefe, DOT und Schäden" liegt
   auf dem Papierband. Kreide auf Papier ist unsichtbar: die Anzeige
   8,0 → 1,6 mm stand dort mit einem Kontrast von 1,1 : 1, also gar
   nicht. Zeichnung und Werkzeug bleiben dunkel — auf einem Datenblatt
   ist das gedruckte Tusche —, aber jede Beschriftung und jeder Akzent
   wechselt auf die lokale Papierpalette.
   ============================================================ */
.band-paper .pv[data-pv="radreifen"],
.band-paper .pv[data-pv="ablauf-rad"],
.band-paper .pv[data-pv="profil"]{border-color:var(--hair)}

.band-paper .fx-rv-hd{color:var(--ink-soft)}
.band-paper .fx-rv-hd b{color:var(--ink)}

.band-paper .fx-pf-k{color:var(--ink-soft)}
.band-paper .fx-pf-k b{color:var(--ink)}
.band-paper .fx-pf-val b{color:var(--ink)}
.band-paper .fx-pf-val i{color:var(--ink-soft)}
.band-paper .fx-pf-val u{color:var(--red-ink);border-color:var(--red-ink)}
.band-paper .fx-pf.fx-lock .fx-pf-val b{color:var(--red-ink)}
.band-paper .fx-pf-lg{color:var(--ink-soft)}

/* Bernstein auf Papier: #FFB020 verschwindet dort. Die Seite hat für
   diesen Fall längst einen Ton (.band-paper .stars) — kein neuer. */
.band-paper .fx-pf-lg .r{--sw:var(--red-ink)}
.band-paper .fx-pf-lg .a{--sw:#B8790A}
.band-paper .fx-pf-lg i{opacity:1}

.band-paper .fx-pf-lbl{fill:var(--red-ink)}
.band-paper .fx-pf-lbl0,
.band-paper .fx-pf-twi{fill:var(--ink-soft)}
.band-paper .fx-pf-min{stroke:var(--red-ink)}
.band-paper .fx-pf-twit{stroke:var(--red-ink)}
.band-paper .fx-pf-zone{fill:var(--red-ink);opacity:.16}
.band-paper .fx-pf-rec{fill:#B8790A;opacity:.12}
.band-paper .fx-pf-recl{stroke:#B8790A;opacity:.6}
.band-paper .fx-pf-start{stroke:var(--ink-soft);opacity:.7}
.band-paper .fx-pf-pin{fill:var(--ink-soft)}


/* ============================================================
   Ohne Bewegung: der Endzustand steht sofort, nichts läuft.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .fx-pf-val b,.fx-pf-val u,.fx-pf-min{transition:none}
}


/* ===== FX: pv-auf ===== */
/* ============================================================
   MODUL „pv-auf" — Grafiken der Unterseite Fahrzeugaufbereitung
   1 waesche-vs     zwei Lackfelder: Wäsche gegen Aufbereitung
   2 ablauf-auf     der Ablauf außen, fünf Stationen
   3 lackschichten  Querschnitt: Kratzer, Politur, Versiegelung
   Farben nur aus den Marken-Variablen, Beschriftung in --f-mono.
   ============================================================ */

/* Die Andockpunkte reservieren ihre Höhe, BEVOR das Skript läuft.
   `display:block` hebt dafür das vorgelagerte `.pv:empty{display:none}`
   auf — ein nachträglich wachsender Kasten schöbe den Text nach unten. */
.pv[data-pv="waesche-vs"],
.pv[data-pv="ablauf-auf"],
.pv[data-pv="lackschichten"]{
  display:block;
  pointer-events:none;
  contain:layout paint;
}
/* 1244, nicht 1200: die viewBox trägt links und rechts je 22 Einheiten
   Rand (viewBox="-22 0 1244 …"), damit Randglyphen und Haarlinien nicht
   am `contain:paint` des Kastens anstoßen. Auf einem 390-px-Display
   (Kasten 342 px) sind das 342·22/1244 ≈ 6 px Luft je Seite.
   Das Verhältnis MUSS die volle Breite 1244 nennen — mit 1200 ergäbe
   `xMidYMid meet` Letterboxing. */
.pv[data-pv="waesche-vs"]   {aspect-ratio:1244/624}
.pv[data-pv="ablauf-auf"]   {aspect-ratio:1244/648}
.pv[data-pv="lackschichten"]{aspect-ratio:1244/724}

/* ------------------------------------------------------------
   Gemeinsame Maße. Das SVG skaliert mit der Bandbreite, seine
   Nutzereinheiten schrumpfen also mit: dieselbe Angabe ist am
   Rechner (Band ~1230 px) viermal so groß wie auf dem Handy
   (Band ~312 px). Beschriftung und Haarlinien hängen darum an
   vier Stufen — die Grafiken selbst rechnen nie mit Pixeln.
   Auf jeder Stufe bleibt die Schrift zwischen 8 und 20 px.
   Sperrung in em, damit sie automatisch mitwächst.
   ------------------------------------------------------------ */
.fx-au{
  display:block;width:100%;height:auto;
  fill:var(--smoke);          /* Grundfarbe der Beschriftung, vererbt */
  --fs-k:15px;   /* Kopfzeile        */
  --fs-n:20px;   /* Station, Schicht */
  --fs-c:14px;   /* Nebenzeile       */
  --sw:1.2px;    /* Haarlinie        */
}
@media(max-width:899px){
  .fx-au{--fs-k:19px;--fs-n:25px;--fs-c:17px;--sw:1.6px}
}
@media(max-width:719px){
  .fx-au{--fs-k:25px;--fs-n:33px;--fs-c:23px;--sw:2.2px}
}
@media(max-width:519px){
  .fx-au{--fs-k:34px;--fs-n:44px;--fs-c:32px;--sw:3.1px}
}

/* Keine Farbe an dieser Stelle: `.fx-au text` wöge schwerer als die
   Klassen darunter und zöge alle Beschriftungen auf denselben Ton. */
.fx-au text{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.fx-au-k{font-size:var(--fs-k);letter-spacing:.2em;fill:var(--chalk)}
.fx-au-n{font-size:var(--fs-n);letter-spacing:.13em}
.fx-au-c{font-size:var(--fs-c);letter-spacing:.15em}
.fx-au-hr{stroke:var(--line);stroke-width:var(--sw)}

/* ============================================================
   1) waesche-vs — links Wäsche, rechts Aufbereitung
   Beide Felder starten gleich: stumpf, voller Waschkratzer.
   Rechts wandert ein Lichtstreifen über die Fläche; hinter ihm
   sind die Kratzer weg und die Spiegelung zieht sich zusammen.
   ============================================================ */
.fx-auw-fr{fill:none;stroke:var(--line);stroke-width:var(--sw)}
/* Swirls: feine Bögen um den Lichtpunkt, kein Rauschen */
.fx-auw-sw path{
  fill:none;stroke:#E4EBF3;
  stroke-width:calc(var(--sw) * .9);stroke-linecap:round;
}
/* Der Lichtstreifen: weicher Hof mit harter Vorderkante, damit man
   sieht, wo der Lack gerade durchgearbeitet wird. */
.fx-auw-bar{opacity:0}
.fx-auw-edge{fill:var(--chalk);opacity:.55}
#fx-auw-gbar stop{stop-color:#FFFFFF}
.fx-auw-cap{fill:var(--sector)}

/* ============================================================
   2) ablauf-auf — fünf Stationen, eine nach der anderen
   Die Schiene füllt sich rot, jede Station hakt sich ab.
   Türkis = die drei reinigenden Stufen, Bernstein = Politur
   (sie trägt ab), Rot = Versiegelung als Abschluss.
   ============================================================ */
.fx-aup-s{--c:var(--sector)}
.fx-aup-a{--c:var(--amber)}
.fx-aup-r{--c:var(--redline)}

.fx-aup-rail{stroke:#2B3038;stroke-width:calc(var(--sw) * 1.5);stroke-dasharray:2 7;stroke-linecap:round}
.fx-aup-live{stroke:var(--redline);stroke-width:calc(var(--sw) * 2);stroke-linecap:round}
/* Der Kopf der Schiene wächst auf schmalen Displays mit; das Attribut
   r="6" bleibt als Rückfall, falls der Browser `r` nicht als CSS kennt. */
.fx-aup-head{fill:#FFFFFF;opacity:0;r:6px}
@media(max-width:719px){.fx-aup-head{r:8px}}
@media(max-width:519px){.fx-aup-head{r:10px}}
.fx-aup-sep{stroke:var(--line);stroke-width:var(--sw);opacity:.55}

/* Marke: der Ring bleibt dunkel, Farbe kommt über Zweitring und Haken.
   Die Gruppe wächst auf schmalen Displays mit, sonst fiele der Haken
   dort auf zwei Pixel zusammen. Skaliert wird um die eigene Mitte —
   alle Teile der Marke liegen symmetrisch um sie herum. */
.fx-aup-mk{transform-box:fill-box;transform-origin:50% 50%}
@media(max-width:719px){.fx-aup-mk{transform:scale(1.24)}}
@media(max-width:519px){.fx-aup-mk{transform:scale(1.5)}}
.fx-aup-ring{fill:#101316;stroke:#3A414B;stroke-width:calc(var(--sw) * 1.4)}
.fx-aup-lit{fill:none;stroke:var(--c);stroke-width:calc(var(--sw) * 1.6);opacity:0}
.fx-aup-chk{
  fill:none;stroke:var(--c);stroke-width:calc(var(--sw) * 2.1);
  stroke-linecap:round;stroke-linejoin:round;
}
.fx-aup-flash{
  fill:none;stroke:var(--c);stroke-width:calc(var(--sw) * 1.2);opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;
}

.fx-aup-t{fill:var(--smoke);transition:fill .34s cubic-bezier(.16,.84,.3,1)}
.fx-aup-i{fill:#4B535E;transition:fill .34s cubic-bezier(.16,.84,.3,1)}
.fx-aup-row.fx-au-on .fx-aup-t{fill:var(--chalk)}
.fx-aup-row.fx-au-on .fx-aup-i{fill:var(--c)}

/* ============================================================
   3) lackschichten — Querschnitt von unten nach oben
   Blech, Grundierung, Basislack, Klarlack. Erst werden die
   Kratzer sichtbar, dann trägt die Politur sie ab (der Abtrag
   blitzt bernsteinfarben auf), zuletzt legt sich die
   Versiegelung als dünne Schicht darüber.
   ============================================================ */
.fx-aul-blech{fill:#22262C}
.fx-aul-grund{fill:#2E343B}
.fx-aul-basis{fill:#15181C}
.fx-aul-sep{stroke:#3A414B;stroke-width:var(--sw);opacity:.6}
.fx-aul-tick{stroke:#2E343C;stroke-width:var(--sw)}
.fx-aul-lead{fill:none;stroke:#2E343C;stroke-width:var(--sw)}

/* Kratzer sind im Schnitt Kerben, keine Striche */
.fx-aul-nick{
  fill:none;stroke:#C8D2DC;stroke-width:calc(var(--sw) * .9);
  stroke-linejoin:round;stroke-linecap:round;opacity:0;
}
/* Was die Politur wegnimmt: erst Luft, darüber kurz der Abtrag */
.fx-aul-cut{fill:var(--asphalt)}
.fx-aul-lit{fill:var(--amber);opacity:0}
.fx-aul-top{fill:var(--chalk);opacity:.82}
.fx-aul-seal{fill:var(--sector);opacity:.3}
.fx-aul-sealtop{fill:var(--sector)}
.fx-aul-bar{opacity:0}
#fx-aul-gpol stop{stop-color:var(--amber)}
#fx-aul-gseal stop{stop-color:var(--sector)}

/* Zustandszeile über dem Block — Farbe folgt dem Abschnitt */
.fx-aul-am .fx-aul-ph{fill:var(--amber)}
.fx-aul-se .fx-aul-ph{fill:var(--sector)}
.fx-aul-val{fill:var(--chalk)}

/* ---------- Bewegung reduziert: nur der Endzustand ----------
   Den Endzustand setzt das Skript selbst (es zeichnet sofort mit
   Fortschritt 1); hier fallen nur die Übergänge weg. */
@media(prefers-reduced-motion:reduce){
  .fx-aup-t,.fx-aup-i{transition:none}
  .fx-auw-bar,.fx-aul-bar,.fx-aup-head,.fx-aup-flash{display:none}
}



/* ---- Bildquellen ---- */
:root{
  --img-logo: url("/img/logo.webp");
  --img-hero: url("/img/hero.webp");
  --img-hero-m: url("/img/hero-m.webp");
  --img-aufbereitung: url("/img/aufbereitung.webp");
  --img-ambiente: url("/img/ambiente.webp");
  --img-leistung: url("/img/leistung.webp");
  --img-folierung: url("/img/folierung.webp");
  --img-service: url("/img/service.webp");
  --img-umbau: url("/img/umbau.webp");
  --img-lack: url("/img/lack.webp");
  --img-diagnose: url("/img/diagnose.webp");
  --img-toenung: url("/img/toenung.webp");
  --img-ambiente-off: url("/img/ambiente-off.webp");
  --amb-off-filter: none;
}

/* Final responsive placement for the hero tachometer. */
@media (min-width:1081px){
  .hero > .gauge{
    display:block;
    position:absolute;
    z-index:4;
    right:clamp(1.4rem,3vw,3.2rem);
    bottom:clamp(1rem,3vh,2.5rem);
    width:clamp(190px,18vw,238px);
    transform:none;
  }
}
@media (max-width:1080px){
  .hero .hero-in > div:first-child{position:relative;z-index:2}
  .hero > .gauge{
    --g-size:clamp(142px,40vw,182px);
    display:block;
    position:absolute;
    z-index:4;
    left:calc(100vw - var(--g-size) - clamp(.7rem,3vw,1.5rem));
    right:auto;
    bottom:clamp(4.5rem,10vh,6rem);
    width:var(--g-size);
    transform:none;
    opacity:.96;
    pointer-events:none;
  }
  .hero .gauge::before{inset:-17%;filter:blur(24px)}
}
@media (max-width:520px){
  .hero > .gauge{
    --g-size:clamp(136px,39vw,158px);
    left:calc(100vw - var(--g-size) - .65rem);
    right:auto;
    bottom:5rem;
    width:var(--g-size);
  }
}