/* Johan Tessmer · Rot heißt Dienst
   Richtung „Stimmabdruck“: Referenz und Probe als Stimmspuren, Rot nur als Signal. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Farben aus den Covern und dem Umschlag-Satz */
  --grund: #1A2129;
  --kopf: #12171D;
  --flaeche: #232B36;
  --text: #F4F5F6;
  --lese: #D5DBE1;
  --zweit: #C9D1D9;
  --grau: #AEB6BF;
  --rot: #D7262E;
  --rot-text: #F0565C;
  --papier: #EBE7DC;
  --papier-tinte: #1A2129;
  --papier-leise: #4B535C;
  --papier-rot: #B01E25;

  --schrift: "Archivo", "Arial Narrow", sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;

  /* Regler für Phase 6 */
  --rand: 20px;
  --spalte: 680px;
  --titel-groesse: min(6rem, calc((100vw - 2 * var(--rand)) * .165));
  --titel-zeile: .84;
  --abstand-abschnitt: clamp(4.5rem, 12vw, 8rem);
  --abstand-oben: 18px;
  --cover-breite: 30vw;
  --cover-spalte: clamp(260px, 26vw, 400px);
  --cover-oben: 0px;
  --spur-hoehe: 36px;
  --abtast-dauer: 1.8s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--lese);
  font: 400 1.0625rem/1.55 var(--schrift);
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
picture { display: block; }
p { margin: 0 0 1em; }
a { color: var(--text); text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--text); }
::selection { background: var(--rot); color: #fff; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 1px; }
html { scrollbar-color: var(--flaeche) var(--kopf); }

.sprung { position: absolute; left: var(--rand); top: -60px; background: var(--text); color: var(--grund); padding: 10px 14px; z-index: 20; font-weight: 700; }
.sprung:focus { top: 10px; }

/* Messbeschriftung: nur für Messwerte, Zeitstempel und Spuren */
.mass {
  font: 500 .6875rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}
.mass-rot { color: var(--rot-text); }

/* Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--rand);
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease-out;
}
.kopf.ist-gescrollt { border-bottom-color: var(--flaeche); }
.kopf-name { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.kopf-name span { font-weight: 700; font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; font-size: .8125rem; }
.kopf-name img { border-radius: 4px; }
.kopf-nav { display: flex; gap: 18px; }
.kopf-nav a { font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); text-decoration: none; padding: 8px 0; }
.kopf-nav a:hover { color: var(--text); }

/* Erster Bildschirm */
/* Handy und Tablet: Titel in einer Zeile, darunter Einzeiler links und das ganze Cover rechts */
.aufmacher {
  position: relative;
  padding: var(--abstand-oben) 0 40px;
  display: grid;
  grid-template-columns: var(--rand) minmax(0, 1fr) 16px var(--cover-breite) var(--rand);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas:
    "spur spur spur spur spur"
    ". titel titel titel ."
    ". zeile . cover ."
    ". ordnung . cover ."
    "wege wege wege wege wege";
  overflow-x: clip;
}
.vergleich { grid-area: spur; margin: 0 var(--rand); position: relative; }
.spurzeile { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 2px 0; position: relative; }
.spur { width: 100%; height: var(--spur-hoehe); overflow: visible; }
.spur rect { fill: var(--text); shape-rendering: geometricPrecision; }
.spur rect.abw { fill: var(--text); transition: fill .5s ease-out, transform .5s cubic-bezier(.16, 1, .3, 1); transform-box: fill-box; transform-origin: center; }
.spur.ist-abgespielt rect.abw { fill: var(--rot); transform: scaleY(1.55); }
.spur-probe { clip-path: inset(0 0 0 0); }
.js .spur-probe:not(.ist-abgespielt) { clip-path: inset(0 100% 0 0); }
.js .spur-probe.laeuft { animation: abspielen var(--abtast-dauer) cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes abspielen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.abtaster {
  position: absolute; top: -6px; bottom: -6px; left: 78px; width: 1px;
  background: var(--text); opacity: 0; pointer-events: none;
}
.js .laeuft ~ .abtaster { animation: abtasten var(--abtast-dauer) cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes abtasten {
  0% { opacity: .9; left: 78px; }
  92% { opacity: .9; }
  100% { opacity: 0; left: 100%; }
}
/* Beschriftung der Abweichung: Lage setzt main.js aus der Mitte der roten Balken (--abw-x) */
.abweichung {
  position: absolute; left: var(--abw-x, 70%); top: calc(var(--spur-hoehe) * 2 + 8px);
  padding-top: 12px; white-space: nowrap; transform: translateX(-50%);
}
.abweichung::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 10px; background: var(--rot); }
.js .abweichung { opacity: 0; transition: opacity .5s ease-out; }
.js .vergleich.ist-fertig .abweichung { opacity: 1; }
/* Ab Desktop führt die rote Leitlinie von der Abweichung zum Amazon-Knopf */
.zeiger { display: none; }
@media (min-width: 1024px) {
  .zeiger { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
  .zeiger path { fill: none; stroke: var(--rot); stroke-width: 1; opacity: 0; transition: opacity .6s ease-out .2s; }
  .vergleich.ist-fertig ~ .zeiger path { opacity: 1; }
}

.aufmacher-text { display: contents; }
.titel {
  grid-area: titel;
  margin: 0;
  padding-top: 42px;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--titel-groesse);
  line-height: var(--titel-zeile);
  font-weight: 900;
  font-stretch: 75%;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.einzeiler { grid-area: zeile; margin: 16px 0 0; color: var(--lese); font-size: 1rem; line-height: 1.5; }
.einordnung { grid-area: ordnung; margin: 8px 0 0; color: var(--grau); font-size: .875rem; line-height: 1.45; }

.aufmacher-cover { grid-area: cover; align-self: start; margin-top: calc(20px + var(--cover-oben)); }
.aufmacher-cover img { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--flaeche); }

.wege { grid-area: wege; padding: 22px var(--rand) 0; position: relative; z-index: 2; }
.knopf {
  display: block; text-align: center;
  background: var(--rot); color: #fff; text-decoration: none;
  font-weight: 700; font-stretch: 87.5%; font-size: 1.125rem; letter-spacing: .01em;
  padding: 18px 20px; border-radius: 2px;
  transition: background-color .2s ease-out, transform .2s ease-out;
}
.knopf:hover { background: #C21F27; }
.knopf:active { transform: translateY(1px); }
.knopf-schmal { display: inline-block; margin-top: 12px; }
.ku { text-align: center; font-size: .875rem; color: var(--grau); margin: 8px 0 14px; }

/* Anmeldung: helle Fläche als Polaritätswechsel */
.anmeldung { background: var(--papier); color: var(--papier-tinte); border-radius: 2px; padding: 16px 14px 12px; }
.nl-frage { display: block; font: 500 .6875rem/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--papier-tinte); margin-bottom: 10px; }
.nl-label { display: block; font-weight: 700; font-stretch: 87.5%; margin-bottom: 8px; color: var(--papier-tinte); }
.nl-zeile { display: flex; min-height: 52px; }
.nl-zeile input {
  flex: 1; min-width: 0;
  border: 1px solid #C9C2B2; border-right: 0; border-radius: 2px 0 0 2px;
  background: #fff; color: var(--papier-tinte);
  font: 400 1rem/1.2 var(--schrift); padding: 0 14px;
  caret-color: var(--papier-rot);
}
.nl-zeile input::placeholder { color: #6B7078; }
.nl-zeile input:focus-visible { outline: 2px solid var(--papier-tinte); outline-offset: -2px; }
.nl-zeile input[aria-invalid="true"] { border-color: var(--papier-rot); }
.nl-zeile button {
  flex: none; border: 0; border-radius: 0 2px 2px 0;
  background: var(--papier-tinte); color: var(--text);
  font: 700 1rem/1 var(--schrift); font-stretch: 87.5%; padding: 0 18px; cursor: pointer;
  transition: background-color .2s ease-out;
}
.nl-zeile button:hover { background: #2C3642; }
.nl-zeile button:disabled { opacity: .7; cursor: progress; }
.nl-fehler { margin: 8px 0 0; font-size: .875rem; color: var(--papier-rot); min-height: 0; }
.nl-fehler:empty { display: none; }
.nl-hinweis { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--papier-leise); }
.nl-hinweis a { color: var(--papier-tinte); text-decoration-color: var(--papier-rot); }
.nl-danke { font-weight: 700; font-stretch: 87.5%; font-size: 1.0625rem; color: var(--papier-tinte); }
.nl-danke p { margin: 0; }
.nl-danke:focus { outline: none; }
.anmeldung.ist-gesendet form { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Abschnitte */
.spalte { max-width: var(--spalte); margin: 0 auto; padding: 0 var(--rand); }
section { position: relative; }
.ueberschrift {
  margin: 0 0 24px;
  color: var(--text);
  font-size: clamp(2.25rem, 10vw, 3.75rem);
  line-height: .92;
  font-weight: 900; font-stretch: 75%;
  text-transform: uppercase; letter-spacing: -.005em;
  text-wrap: balance;
}
.ueberschrift-gross { font-size: clamp(2.75rem, 13vw, 5.5rem); }

.fall { padding: var(--abstand-abschnitt) 0; border-top: 1px solid var(--flaeche); }
.zitat { margin: 0 0 8px; }
.zitat p {
  color: var(--text);
  font-size: clamp(1.5rem, 6.4vw, 2.25rem); line-height: 1.3;
  font-weight: 700; font-stretch: 87.5%;
  text-wrap: balance;
}
.messung { margin: 40px 0 48px; padding: 0 var(--rand); position: relative; }
.spur-mess { height: 40px; }
.spur-mess rect, .spur-fuss rect { fill: var(--grau); opacity: .4; }
/* Drei Messpunkte in drei gleichen Spalten, Leitlinie von der Spur zur Beschriftung */
.messpunkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.messpunkte li { position: relative; padding-top: 30px; text-align: center; }
.messpunkte li::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 34px; background: var(--grau); }
.messpunkte li.messpunkt-rot::before { background: var(--rot); }
.messpunkte li::after { content: ""; position: absolute; left: 50%; top: -14px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--grau); }
.messpunkte li.messpunkt-rot::after { background: var(--rot); }
.messpunkte .mass { display: block; margin-bottom: 4px; }
.messpunkte strong { display: block; color: var(--text); font-weight: 700; font-stretch: 87.5%; font-size: 1.0625rem; line-height: 1.15; }
.js .messpunkte li { opacity: 0; transition: opacity .6s ease-out; }
.js .messpunkte li:nth-child(2) { transition-delay: .15s; }
.js .messpunkte li:nth-child(3) { transition-delay: .3s; }
.js .messung.ist-sichtbar .messpunkte li { opacity: 1; }

.klappentext p { max-width: 65ch; }
.klappentext-start { color: var(--text); font-weight: 700; font-stretch: 87.5%; font-size: 1.1875rem; }

.ermittlerin { background: var(--kopf); padding: var(--abstand-abschnitt) 0; }
.dienst {
  margin: 36px 0 0;
  color: var(--text);
  font-size: clamp(1.75rem, 8vw, 3rem); line-height: 1.02;
  font-weight: 900; font-stretch: 75%; text-transform: uppercase;
  text-wrap: balance;
}
.dienst em { font-style: normal; color: var(--rot-text); }

/* Reihe als Zeitleiste mit Jetzt-Marker */
.reihe { padding: var(--abstand-abschnitt) 0; }
/* Zeitleiste: Datum sitzt als Messwert am Punkt auf der Achse, darunter Cover und Text */
.zeitleiste { list-style: none; margin: 40px auto 0; padding: 0 var(--rand); max-width: 1120px; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: calc(var(--rand) + 5px); top: 8px; bottom: 8px; width: 1px; background: var(--grau); opacity: .4; }
.band { position: relative; display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "status status" "cover text"; column-gap: 18px; padding: 0 0 44px 30px; }
.band:last-child { padding-bottom: 0; }
.zeit-punkt { position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--grund); border: 1px solid var(--grau); }
.band.ist-jetzt .zeit-punkt { background: var(--rot); border-color: var(--rot); outline: 1px solid var(--rot); outline-offset: 3px; }
.band-status { grid-area: status; display: block; margin: 0 0 14px; line-height: 15px; }
.band picture { grid-area: cover; }
.band-text { grid-area: text; }
.band picture img { width: 96px; height: auto; box-shadow: 0 0 0 1px var(--flaeche); }
.band.ist-jetzt .band-status { color: var(--rot-text); }
.band h3 { margin: 0 0 8px; color: var(--text); font-weight: 700; font-stretch: 87.5%; font-size: 1.25rem; line-height: 1.15; }
.band p { font-size: .9375rem; color: var(--lese); margin-bottom: 14px; }
.knopf-zweit {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--grau); color: var(--text);
  font-weight: 700; font-stretch: 87.5%; font-size: .9375rem;
  padding: 11px 16px; border-radius: 2px;
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
.knopf-zweit:hover { border-color: var(--text); background: var(--flaeche); }
.band.ist-jetzt .knopf-zweit { background: var(--rot); border-color: var(--rot); color: #fff; }
.band.ist-jetzt .knopf-zweit:hover { background: #C21F27; }
.reihe-ende { margin-top: 44px; }
.link-pfeil { font-weight: 700; font-stretch: 87.5%; }
.link-pfeil::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }

/* Newsletter als helles Protokollblatt */
.newsletter { padding: 0 var(--rand) var(--abstand-abschnitt); }
.blatt { background: var(--papier); color: var(--papier-tinte); max-width: 760px; margin: 0 auto; padding: 34px 22px 26px; border-radius: 2px; position: relative; }
.blatt .ueberschrift { color: var(--papier-tinte); }
.blatt p { color: #2B333C; }
.blatt .haeufigkeit { font-weight: 700; font-stretch: 87.5%; color: var(--papier-tinte); }
.blatt .anmeldung { padding: 4px 0 0; background: transparent; }

.methode { padding: var(--abstand-abschnitt) 0; border-top: 1px solid var(--flaeche); }
.methode p { font-size: 1.1875rem; color: var(--lese); max-width: 52ch; }

.autor { padding: var(--abstand-abschnitt) var(--rand); background: var(--kopf); display: grid; gap: 28px; justify-items: start; }
.signet img { width: 150px; height: auto; border-radius: 50%; }
.autorname { margin: 0 0 14px; color: var(--text); font-weight: 700; font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; font-size: 1.5rem; }
.autor-text p { max-width: 52ch; }
.claim { color: var(--text); font-weight: 700; font-stretch: 87.5%; }
/* Social-Media-Profile: einfache Links, nichts wird eingebettet */
.folgen { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--flaeche); }
.autor-text .folgen-titel { margin: 0 0 10px; font: 400 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.folgen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.folgen-liste a { display: inline-flex; align-items: baseline; gap: 8px; padding: 11px 14px; border: 1px solid var(--flaeche); border-radius: 2px; text-decoration: none; font-weight: 700; font-stretch: 87.5%; transition: border-color .2s ease-out; }
.folgen-liste a:hover { border-color: var(--rot); }
.folgen-name { font: 400 .8125rem/1 var(--mono); color: var(--grau); }

.fragen { padding: var(--abstand-abschnitt) 0; }
details { border-top: 1px solid var(--flaeche); }
details:last-of-type { border-bottom: 1px solid var(--flaeche); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; color: var(--text); font-weight: 700; font-stretch: 87.5%; font-size: 1.0625rem; line-height: 1.3;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--grau), var(--grau)) center / 14px 1.5px no-repeat, linear-gradient(var(--grau), var(--grau)) center / 1.5px 14px no-repeat;
  transition: transform .25s ease-out;
}
details[open] summary::after { transform: rotate(45deg); }
summary:hover::after { background-color: transparent; }
details p { margin: 0 0 20px; max-width: 62ch; }

.fuss { background: var(--kopf); padding: 0 0 36px; }
.spur-fuss { height: 28px; width: 100%; }
.spur-fuss rect { fill: var(--flaeche); }
.fuss-inhalt { padding: 28px var(--rand) 0; font-size: .9375rem; color: var(--grau); max-width: 1120px; margin: 0 auto; }
.fuss-inhalt p { margin: 0 0 6px; }
.fuss-inhalt a { color: var(--zweit); }
.fuss-links { margin-top: 14px !important; }

/* Ab Tablet */
@media (min-width: 720px) {
  :root { --rand: 40px; --cover-breite: 30vw; --spur-hoehe: 46px; }
  .einzeiler, .einordnung { max-width: 30ch; }
  .band { grid-template-columns: 140px 1fr; gap: 28px; padding-left: 40px; }
  .band picture img { width: 140px; }
}

/* Desktop: Spuren über die volle Breite, Titel links, Cover und Wege rechts */
@media (min-width: 1024px) {
  :root {
    --rand: 56px;
    --titel-groesse: clamp(6rem, 9.4vw, 10rem);
    --spur-hoehe: 52px;
    --abstand-oben: 32px;
  }
  body { font-size: 1.125rem; }
  .aufmacher {
    grid-template-columns: minmax(0, 1fr) var(--cover-spalte);
    grid-template-areas: "spur spur" "text cover" "wege cover";
    grid-template-rows: auto auto 1fr;
    column-gap: 72px; padding-right: var(--rand); max-width: 1600px; margin: 0 auto;
  }
  .vergleich { grid-area: spur; }
  .spurzeile { grid-template-columns: 96px 1fr; }
  .abtaster { left: 104px; }
  @keyframes abtasten { 0% { opacity: .9; left: 104px; } 92% { opacity: .9; } 100% { opacity: 0; left: 100%; } }
  .aufmacher-text { display: block; grid-area: text; padding: 44px var(--rand) 0; position: relative; z-index: 2; }
  .titel { padding-top: 0; }
  .einzeiler { max-width: 40ch; font-size: 1.25rem; margin-top: 22px; }
  .einordnung { max-width: 40ch; font-size: 1rem; }
  .aufmacher-cover { grid-area: cover; position: relative; right: auto; top: auto; width: 100%; margin-top: calc(44px + var(--cover-oben)); }
  .aufmacher-cover img { width: 100%; }
  .wege { grid-area: wege; padding: 28px 0 0 var(--rand); max-width: calc(560px + var(--rand)); }
  .ku { text-align: left; }
  .messpunkte strong { font-size: 1.375rem; }

  /* Abschnitte im Zweispalter, damit am Desktop nichts verloren in der Mitte steht */
  .fall {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px;
    grid-template-areas: "kopf text" "mess text";
    align-items: start; max-width: 1340px; margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand);
  }
  .fall > .spalte { grid-area: kopf; padding: 0; max-width: none; margin: 0; }
  .fall > .klappentext { grid-area: text; }
  .fall > .messung { grid-area: mess; padding: 0; margin: 48px 0 0; }
  .ermittlerin .spalte, .methode .spalte, .fragen .spalte {
    max-width: 1340px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; align-items: start;
  }
  .ermittlerin .ueberschrift { grid-column: 1; }
  .ermittlerin .spalte > p:not(.dienst) { grid-column: 1; }
  .ermittlerin .dienst { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: clamp(3rem, 5vw, 5rem); align-self: center; }
  .methode .ueberschrift { grid-column: 1; margin: 0; }
  .methode .spalte > p { grid-column: 2; align-self: end; font-size: 1.375rem; }
  .fragen .ueberschrift { grid-column: 1; position: sticky; top: 96px; }
  .fragen details { grid-column: 2; }
  .reihe > .spalte, .reihe-ende { max-width: 1340px; }
  .zeitleiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 34px; }
  .zeitleiste::before { left: var(--rand); right: var(--rand); top: 5px; bottom: auto; width: auto; height: 1px; }
  .band { grid-template-columns: 1fr; grid-template-areas: "status" "cover" "text"; padding: 0; row-gap: 18px; }
  .zeit-punkt { top: -34px; left: 0; }
  .band-status { margin: -36px 0 0 22px; }
  .band picture img { width: 100%; max-width: 220px; }
  .autor { grid-template-columns: 220px minmax(0, 620px); justify-content: center; align-items: center; gap: 56px; }
  .signet img { width: 220px; }
  .blatt { padding: 48px 48px 36px; }
}

/* Randspur: eine feine Stimmspur am linken Rand verbindet alle Abschnitte, je Abschnitt ein Messpunkt */
main { position: relative; }
.randspur { position: absolute; left: 0; width: var(--rand); top: 0; height: 0; pointer-events: none; z-index: 1; }
.randspur-linie { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.randspur-linie rect { fill: var(--grau); opacity: .4; }
.knoten { position: absolute; left: calc(var(--rand) / 2 - 3.5px); height: 7px; }
.knoten::before { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--grau); }
.knoten::after { content: ""; position: absolute; left: 7px; top: 3px; height: 1px; width: var(--leiter, 0px); background: var(--grau); transform-origin: left; }
.js .knoten::before { transform: scale(0); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.js .knoten::after { transform: scaleX(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1) .15s; }
.js .knoten.ist-sichtbar::before { transform: none; }
.js .knoten.ist-sichtbar::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .knoten::before, .js .knoten::after { transform: none; transition: none; }
  .zeiger path { transition: none; }
  .js .spur-probe:not(.ist-abgespielt) { clip-path: inset(0 0 0 0); }
  .js .laeuft ~ .abtaster, .js .spur-probe.laeuft { animation: none; }
  .js .abweichung, .js .messpunkte li { opacity: 1; transition: none; }
  .spur rect.abw { transition: none; }
}