/* NORDIX — Reparatur gegen Neukauf
   Ersetzt seit dem 19.08.2026 den Kennzahlen-Block unter der Galerie
   (5 Fälle / 2.900 € / 1 Bauteil).

   WARUM DER ALTE BLOCK WEG IST
   Die 2.900 € stammten aus Runde 17 und waren MEINE Schätzung — im Protokoll
   ausdrücklich mit „von Björn zu bestätigen" vermerkt. Bestätigt wurden sie
   nie, das „ca." verschwand unterwegs, und der Wert wanderte von 2.400 auf
   2.900. Eine harte Geldangabe ohne Grundlage ist genau die Sorte Aussage,
   die § 5 UWG meint. Jetzt steht dort nur noch, was aus Rechnungen belegbar
   ist.

   WARUM DER BALKEN DREI FELDER HAT UND NICHT ZWEI
   Zuerst zeigte er nur das Ersatzteil gegen den Neupreis — 8 € gegen 650 €,
   ein sehr starkes Bild. Es reißt aber eine Lücke auf: Wer 8 € liest und
   188 € bezahlt hat, rechnet die Differenz selbst aus, und er rechnet sie
   nicht wohlwollend. Deshalb steht die Arbeitszeit als zweites Feld daneben.
   Die helle Kante markiert, wo die Rechnung endet; alles rechts davon ist
   das, was NICHT ausgegeben wurde.

   Die Beträge sind Björns tatsächlich berechnete Summen, nicht Hochrechnungen:
   jeder Balken addiert sich sichtbar auf die echte Rechnung. */

.analogie{
  margin-top:34px;border:1px solid var(--line);padding:clamp(22px,3.4vw,34px);
  background:linear-gradient(180deg,rgba(253,166,7,.05),transparent 55%);
}
.analogie .asatz{
  font-family:var(--font-display);font-size:clamp(23px,3.2vw,38px);font-weight:500;
  line-height:1.08;text-transform:uppercase;max-width:22ch;letter-spacing:-.005em;
}
.analogie .asatz span{color:var(--orange)}
.analogie p{margin-top:18px;color:var(--ink-2);max-width:58ch;line-height:1.8}

.vergleich{margin-top:34px}
.vpos{border-top:1px solid var(--line);padding:26px 0}
.vpos:last-of-type{border-bottom:1px solid var(--line)}
.vkopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:15px}
.vtitel{font-family:var(--font-display);font-size:21px;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em}
.vrest{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.vrest b{color:var(--orange);font-weight:400}

.vspur{position:relative;height:34px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.vgrund{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 6px,transparent 6px 12px)}
/* Die dunkle Kante rechts hält das Teilefeld lesbar, auch wenn es nur wenige
   Pixel breit ist. Beim LAN-Anschluss sind es 8 von 650 € — ohne die Kante
   verschmilzt der Vollton mit der gleichfarbigen Schraffur daneben. */
.vteil{position:absolute;left:0;top:0;bottom:0;background:var(--orange);
  min-width:3px;box-shadow:1px 0 0 var(--bg)}
.varbeit{position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(135deg,rgba(253,166,7,.62) 0 5px,rgba(253,166,7,.24) 5px 10px)}
.vkante{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--ink)}

.vleg{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;
  font-size:11px;letter-spacing:.02em;color:var(--ink-2);line-height:1.6}
.vleg i{display:inline-block;width:11px;height:11px;margin-right:7px;
  vertical-align:-1px;border:1px solid var(--line-2)}
.vleg .f1{background:var(--orange);border-color:var(--orange)}
.vleg .f2{background:repeating-linear-gradient(135deg,rgba(253,166,7,.62) 0 4px,rgba(253,166,7,.24) 4px 8px)}
.vleg .f3{background:var(--panel)}
.vleg b{color:var(--ink);font-weight:400}

.vsumme{display:flex;justify-content:space-between;gap:16px;margin-top:11px;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.vsumme .vli{color:var(--orange)}
.vsumme .vre{color:var(--ink-2);text-align:right}
.vsumme b{display:block;font-family:var(--font-display);font-size:25px;letter-spacing:0;
  text-transform:none;font-weight:600;line-height:1.1;margin-bottom:3px}
.vsumme .vre b{color:var(--ink)}


.arbeitszeit{margin-top:30px;border-left:2px solid var(--orange);padding:2px 0 2px 18px}
.arbeitszeit h3{font-size:17px;letter-spacing:.01em;margin-bottom:10px}
.arbeitszeit p{color:var(--ink-2);line-height:1.85;max-width:62ch}

/* Kein eigener Strich mehr: Darüber stehen die Aufklapper, die ihre eigene
   obere Linie mitbringen — zwei Striche übereinander sähen nach Versehen aus. */
.vhinweis{margin-top:10px;font-size:12px;color:var(--ink-3);
  line-height:1.85;max-width:72ch}
.vhinweis b{color:var(--ink-2);font-weight:400}
.vquelle{margin-top:14px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);
  line-height:1.8;max-width:72ch}

@media(max-width:620px){
  .vkopf{flex-direction:column;gap:6px}
}

/* ══════════════════════════════════════════════════════════════════════
   BEWEGUNG — Variante B, „Das Paket" (Björns Wahl, 19.08.2026)

   Zwei Teile mit verschiedener Aufgabe:

   1. Der AUFBAU läuft genau einmal. Die Felder wachsen von links nach
      rechts, zuerst das Ersatzteil, 0,2 s später die Arbeitszeit — dadurch
      liest man sie als zwei Posten statt als einen Block. Er wiederholt
      sich bewusst NICHT: Ein Balken, der alle paar Sekunden wieder auf
      Null fällt, stellt die Zahl daneben jedes Mal neu in Frage.

   2. Das PAKET läuft endlos. Es ist dieselbe Bewegung wie auf den
      Leiterbahnen, und es sorgt dafür, dass der Abschnitt nie ganz still
      steht — das war Björns Vorgabe.

   Der Auslöser ist `.in`. Diese Klasse setzt der Beobachter, der unten in
   final/index.html ohnehin schon `.sec > .body > *` beim Hereinscrollen
   markiert. `.vergleich` IST so ein Kind — es braucht deshalb keinen
   eigenen Beobachter und keine Zeile neues JavaScript für den Start.

   Wofür es doch einen zweiten Beobachter gibt: `data-sichtbar`. Er hält
   das Paket an, solange der Abschnitt nicht im Bild ist. Dieselbe Regel
   wie bei den Leiterbahnen (leiter.css, Zeile 84) — eine Endlosschleife,
   die niemand sieht, kostet nur Strom.
   ══════════════════════════════════════════════════════════════════════ */

.vergleich .vteil,
.vergleich .varbeit{transform:scaleX(0);transform-origin:left center}
.vergleich .vkante{opacity:0}

.vergleich.in .vteil  {animation:v-fuell .62s cubic-bezier(.2,.7,.3,1) forwards}
.vergleich.in .varbeit{animation:v-fuell .72s cubic-bezier(.2,.7,.3,1) .20s forwards}
@keyframes v-fuell{to{transform:scaleX(1)}}

/* Die Kante blendet nicht ein, sie schaltet — wie ein Lötauge. Kurz heller
   als der Endzustand, dann steht sie. Danach übernimmt v-blitz. */
.vergleich.in .vkante{
  animation:v-kante .5s ease-out .78s forwards,
            v-blitz var(--takt,5.2s) linear var(--tref,2.5s) infinite;
}
@keyframes v-kante{
  0%  {opacity:0;   box-shadow:none}
  30% {opacity:1;   box-shadow:0 0 10px 2px rgba(253,166,7,.75)}
  60% {opacity:.85; box-shadow:0 0 3px 0 rgba(253,166,7,.25)}
  100%{opacity:1;   box-shadow:none}
}

/* Das laufende Signal. Als Pseudoelement, damit es keinen Knoten im
   Dokument braucht und von Sprachausgaben nicht gefunden wird. */
.vergleich .vspur::after{
  content:"";position:absolute;inset:0;pointer-events:none;width:22%;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.20) 46%,
    rgba(255,255,255,.34) 50%,rgba(255,255,255,.20) 54%,transparent 100%);
  transform:translateX(-140%);opacity:0;
}
.vergleich.in .vspur::after{
  animation:v-paket var(--takt,5.2s) linear var(--erst,1.1s) infinite;
}
@keyframes v-paket{
  0%  {transform:translateX(-140%);opacity:0}
  6%  {opacity:1}
  70% {opacity:1}
  78% {transform:translateX(560%);opacity:0}
  100%{transform:translateX(560%);opacity:0}
}

/* Der Blitz sitzt genau dort, wo das Paket die Kante überquert. Der
   Zeitpunkt steht als `--tref` an jeder Kante und ist beim Bauen aus ihrer
   Position gerechnet: Das Paket legt zwischen 6 % und 78 % der Laufzeit
   die volle Breite zurück, der Rest ist Dreisatz. Dieselbe Idee wie die
   Lötaugen in leiter.js, nur auf einer geraden Bahn. */
@keyframes v-blitz{
  0%  {box-shadow:none}
  3%  {box-shadow:0 0 12px 3px rgba(253,166,7,.85)}
  14% {box-shadow:none}
  100%{box-shadow:none}
}

/* Außer Sicht steht das Paket still. Die Liste hinter
   `animation-play-state` ist stellungsgenau: Der Aufbau (erste Animation)
   läuft weiter, nur die Endlosschleife (zweite) hält an. */
.vergleich:not([data-sichtbar]) .vspur::after{animation-play-state:paused}
.vergleich:not([data-sichtbar]).in .vkante{animation-play-state:running,paused}

@media(prefers-reduced-motion:reduce){
  .vergleich .vteil,.vergleich .varbeit{transform:none}
  .vergleich .vkante{opacity:1}
  .vergleich.in .vteil,.vergleich.in .varbeit,
  .vergleich.in .vkante,.vergleich.in .vspur::after{animation:none}
}