/* ==========================================================================
   Fassungen · GridFlex Website

   Drei Entwuerfe unter einer Adresse. Gemeinsam bleiben Designsprache,
   Hero und Netzgrund; dieses Blatt enthaelt nur die Unterschiede:

     1. Fassungswechsel      der Umschalter unten in der Mitte
     2. Fassung 02           Leitstand und Szene
     3. Fassung 03           Eroeffnungssatz und Bildband
     4. Skins                was an gemeinsamen Bausteinen anders aussieht
     5. Bewegung             Zaehler, Parallaxe, einlaufende Ueberschriften

   Farben kommen ausschliesslich aus den Rollen in tokens.css.
   Dieses Blatt laedt nach seite.css und gewinnt damit bei gleicher Stufe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fassungswechsel

   Liegt unten in der Mitte, zwischen dem Cookie-Griff (links) und dem
   Fortschrittsring (rechts). Waehrend der Einwilligungsdialog offen ist,
   tritt er zurueck.
   -------------------------------------------------------------------------- */
.wechsel {
  position: fixed; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 32px);
  z-index: 85;
  display: grid; gap: 10px; justify-items: center;
  pointer-events: none;
  font-family: var(--f-mono, monospace);
  transition: opacity 260ms, visibility 260ms;
}
.wechsel > * { pointer-events: auto; }
body:has(.cookie:not([hidden])) .wechsel { opacity: 0; visibility: hidden; }

.wechsel__leiste {
  display: flex; align-items: center; gap: 4px;
  height: 42px; padding: 0 5px 0 14px;
  background: var(--bg); background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.8);
}
.wechsel__label {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2); margin-right: 8px;
}
.wechsel__schnell { display: flex; gap: 2px; }
.wechsel__kurz {
  display: inline-flex; align-items: baseline; gap: 7px;
  height: 30px; padding: 0 10px;
  border: 1px solid transparent;
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--text-2); text-decoration: none;
  transition: color 200ms, border-color 200ms, background-color 200ms;
}
.wechsel__kurz i { display: none; font-style: normal; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.wechsel__kurz:hover { color: var(--text); border-color: var(--border); border-color: color-mix(in oklab, var(--border) 80%, var(--text)); }
.wechsel__kurz.ist-aktiv {
  color: var(--text); border-color: var(--accent);
  background: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.wechsel__kurz.ist-aktiv i { display: inline; }

.wechsel__griff {
  width: 30px; height: 30px; margin-left: 4px;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; color: var(--text-2);
  cursor: pointer; transition: color 200ms, border-color 200ms, transform 320ms var(--kurve, ease);
}
.wechsel__griff:hover { color: var(--text); border-color: var(--border); }
.wechsel__griff .ikon { width: 15px; height: 15px; }
.wechsel__griff[aria-expanded="true"] { color: var(--accent); transform: rotate(45deg); }

.wechsel__panel {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 212px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 16px;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8);
  animation: wechselAuf 280ms var(--kurve, ease) both;
}
.wechsel__panel[hidden] { display: none; }
@keyframes wechselAuf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wechsel__panel { animation: none; } }

.wechsel__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.wechsel__zu { width: 24px; height: 24px; display: grid; place-items: center; background: none; border: 0; color: var(--text-2); cursor: pointer; }
.wechsel__zu:hover { color: var(--text); }
.wechsel__zu .ikon { width: 14px; height: 14px; }

.wechsel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wechsel__eintrag {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 12px 13px; text-decoration: none;
  border: 1px solid transparent; transition: background-color 200ms, border-color 200ms;
}
.wechsel__eintrag:hover { background: var(--surface); border-color: var(--border); }
.wechsel__eintrag.ist-aktiv { border-color: var(--accent); background: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.wechsel__nr { font-size: 15px; letter-spacing: -0.01em; color: var(--accent); padding-top: 1px; }
.wechsel__inhalt { display: grid; gap: 5px; }
.wechsel__inhalt b { font-family: var(--f-head, inherit); font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
.wechsel__inhalt span { font-family: var(--f-text, inherit); font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.wechsel__notiz {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.6; letter-spacing: 0.03em; color: var(--muted, var(--text-2));
}

@media (max-width: 760px) {
  /* ueber Cookie-Griff und Fortschrittsring, damit sich nichts ueberdeckt */
  .wechsel { bottom: 80px; }
  .wechsel__label { display: none; }
  .wechsel__leiste { height: 40px; padding: 0 4px 0 6px; }
  .wechsel__kurz { padding: 0 9px; }
  .wechsel__kurz.ist-aktiv i { display: none; }
}

/* --------------------------------------------------------------------------
   2. Fassung 02 · Leitstand

   Drei Kanaele in einem gemeinsamen Rahmen, direkt unter dem Hero. Die
   Flaechen sind bewusst nur halb deckend, damit der Netzgrund durchscheint.
   -------------------------------------------------------------------------- */
.leitstand__kopf {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
  padding-top: 22px; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 55%, transparent);
  margin-bottom: clamp(32px, 3.6vw, 54px);
}
.leitstand__status {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent);
}
.leitstand__puls {
  width: 7px; height: 7px; flex: none;
  background: var(--primary-light, var(--primary));
  animation: leitPuls 2.4s ease-out infinite;
}
@keyframes leitPuls {
  0% { box-shadow: 0 0 0 0 var(--primary); box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .leitstand__puls { animation: none; } }

.leitstand__rahmen { border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 26%, transparent); }
.leitstand__schiene {
  position: relative; display: flex; align-items: center; gap: 22px;
  padding: 11px 16px; border-bottom: 1px solid var(--text-inverse); border-bottom: 1px solid color-mix(in oklab, var(--text-inverse) 26%, transparent);
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 52%, transparent);
}
.leitstand__linie { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--text-inverse) 0 6px, transparent 6px 12px); background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--text-inverse) 34%, transparent) 0 6px, transparent 6px 12px); }

.leitstand__kanaele {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 22%, transparent);
}
/* Der Standort braucht die ganze Breite: die Zeichnung ist beschriftet */
.leitstand__kanaele .kanal:last-child { grid-column: 1 / -1; }
.leitstand__kanaele .kanal:last-child .kanal__buehne { aspect-ratio: 16 / 7.4; }
.kanal { position: relative; padding: 18px 18px 22px; background: var(--inverse); background: color-mix(in oklab, var(--inverse) 58%, transparent); }
.kanal__kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.kanal__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--accent-light); letter-spacing: 0.06em; }
.kanal__label { font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 66%, transparent); }
.kanal__buehne {
  position: relative; aspect-ratio: 16 / 10;
  border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 20%, transparent);
  background: color-mix(in oklab, var(--inverse) 70%, transparent);
  overflow: hidden;
}
.kanal__buehne .fx { position: absolute; inset: 0; }
.kanal__ecke { position: absolute; width: 9px; height: 9px; border: 1px solid var(--accent); opacity: 0.55; }
.kanal__ecke--lo { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.kanal__ecke--ro { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.kanal__titel { margin: 16px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-inverse); }
.kanal__notiz { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 70%, transparent); }

.leitstand__hinweis {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  padding: 14px 16px; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 26%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent);
}
.leitstand__hinweis .ikon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-light); }

@media (max-width: 760px) {
  .leitstand__kopf { grid-template-columns: 1fr; }
  .leitstand__kanaele { grid-template-columns: minmax(0, 1fr); }
  .leitstand__kanaele .kanal:last-child { grid-column: auto; }
  .leitstand__kanaele .kanal:last-child .kanal__buehne { aspect-ratio: 16 / 11; }
  .leitstand__schiene span:nth-child(n+4) { display: none; }
}

/* --------------------------------------------------------------------------
   2b. Fassung 02 · Szene der vier Bausteine

   Die Zeichnung bleibt stehen, die Schritte laufen daran vorbei. Den
   Wechsel des Bildes uebernimmt seite.js.
   -------------------------------------------------------------------------- */
.szene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 4.4vw, 76px); align-items: stretch; }
.szene__spalte { position: relative; }
.szene__buehne {
  position: sticky; top: calc(var(--kopf-h) + 40px);
  aspect-ratio: 4 / 3.2; max-height: 62vh;
  border: 1px solid var(--border); background: var(--surface); overflow: hidden;
}
.szene__buehne .fx { position: absolute; inset: 0; }
.szene__marke {
  position: absolute; right: 14px; top: 12px; z-index: 2; margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
}
.szene__marke b { font-size: 13px; font-weight: 400; color: var(--accent); }
.szene__punkte {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  list-style: none; margin: 0; padding: 0; display: flex; gap: 8px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--muted, var(--text-2));
}
.szene__punkte li { padding: 2px 6px; border: 1px solid transparent; transition: color 260ms, border-color 260ms; }
.szene__punkte li.ist-aktiv { color: var(--text); border-color: var(--accent); }

.szene__schritte { display: grid; gap: clamp(46px, 7vh, 96px); padding: clamp(8px, 4vh, 40px) 0 clamp(40px, 12vh, 120px); }
.szene__schritt {
  padding-top: 20px; border-top: 1px solid var(--border);
  opacity: 0.4; transition: opacity 420ms var(--kurve, ease), border-color 420ms;
}
.szene__schritt.ist-aktiv { opacity: 1; border-top-color: var(--accent); }
.szene__schrittkopf { display: flex; align-items: center; gap: 14px; }
.szene__schrittkopf h3 { margin: 0; font-size: clamp(21px, 2cqi, 28px); font-weight: 600; letter-spacing: -0.015em; }
.szene__ikon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text); }
.szene__ikon .ikon { width: 21px; height: 21px; }
.szene__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); }
.szene__text { margin: 18px 0 0; font-size: var(--fs-lead, 18px); line-height: 1.52; color: var(--text-2); max-width: 46ch; }
.szene__param { display: flex; flex-wrap: wrap; gap: 1px; margin: 22px 0 0; padding: 0; list-style: none; background: var(--border); border: 1px solid var(--border); }
.szene__param li { flex: 1 1 auto; background: var(--bg); padding: 10px 13px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.04em; color: var(--text-2); }
.szene__notiz { margin: 16px 0 0; padding-left: 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.szene__fuss { margin: clamp(24px, 3vw, 44px) 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-2); }

@media (max-width: 900px) {
  .szene { grid-template-columns: 1fr; }
  .szene__buehne { position: relative; top: 0; aspect-ratio: 16 / 10; max-height: none; }
  .szene__schritt { opacity: 1; }
  .szene__schritte { gap: 34px; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   3. Fassung 03 · Eroeffnungssatz

   Ein Satz ueber die volle Breite, Wort fuer Wort eingelaufen.
   -------------------------------------------------------------------------- */
.zitat { position: relative; padding: clamp(70px, 9vw, 150px) 0; border-bottom: 1px solid var(--border); }
.zitat__klein {
  margin: 0 0 clamp(26px, 3vw, 44px);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.zitat__satz {
  margin: 0; max-width: 30ch;
  font-family: var(--f-head, inherit);
  font-size: clamp(32px, 6.4cqi, 96px); font-weight: 560; line-height: 1.02; letter-spacing: -0.035em;
  font-variation-settings: "wdth" 112;
  text-wrap: balance;
}
.zitat__fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-top: clamp(34px, 4vw, 58px); padding-top: 18px; border-top: 1px solid var(--border);
}
.zitat__quelle { margin: 0; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.zitat__stichworte { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.zitat__stichworte li {
  padding: 6px 11px; border: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   3b. Fassung 03 · Bildband ueber die volle Breite

   Das Bild laeuft langsamer als der Text (data-parallax in seite.js).
   -------------------------------------------------------------------------- */
.grossbild {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: min(92vh, 860px);
  padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--border);
}
.grossbild__bildrahmen { position: absolute; inset: -8% 0; z-index: -1; }
.grossbild__bild {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.62);
  will-change: transform;
}
[data-modus="hell"] .grossbild__bild { filter: grayscale(1) contrast(1.05) brightness(0.78); }
.grossbild__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--inverse) 0%, var(--inverse) 42%, var(--inverse) 100%); background: linear-gradient(180deg, color-mix(in oklab, var(--inverse) 62%, transparent) 0%, color-mix(in oklab, var(--inverse) 30%, transparent) 42%, color-mix(in oklab, var(--inverse) 88%, transparent) 100%);
}
.grossbild__innen { position: relative; color: var(--text-inverse); }
.grossbild__klein {
  margin: 0 0 22px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 70%, transparent);
}
.grossbild__titel {
  margin: 0; max-width: 24ch;
  font-family: var(--f-head, inherit);
  font-size: clamp(34px, 5.6cqi, 84px); font-weight: 560; line-height: 1.0; letter-spacing: -0.035em;
  font-variation-settings: "wdth" 112;
  color: var(--text-inverse);
}
.grossbild__text {
  margin: 34px 0 0; max-width: 54ch;
  font-size: var(--fs-lead, 19px); line-height: 1.5;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 84%, transparent);
}
.grossbild__spalten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(34px, 4vw, 60px);
  background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 24%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-inverse) 24%, transparent);
}
.grossbild__spalte { padding: 18px 20px 20px; background: var(--inverse); background: color-mix(in oklab, var(--inverse) 72%, transparent); backdrop-filter: blur(3px); }
.grossbild__spalte span {
  display: block; margin-bottom: 10px;
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-light);
}
.grossbild__spalte p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 88%, transparent); }
.grossbild__nachweis {
  margin: 26px 0 0;
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 52%, transparent);
}
@media (max-width: 760px) {
  .grossbild { min-height: 0; }
  .grossbild__spalten { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. Skins

   Was an den gemeinsamen Bausteinen je Fassung anders aussieht. Die
   Designsprache bleibt: eckige Kaesten, Haarlinien, Monospace, kein Karo.
   Nur Rhythmus, Groesse und Gewichtung verschieben sich.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. Fassung 01 · Schaltplan

   Bleibt die Bezugsfassung. Eine Zutat kommt dazu: an jeder Abschnittsmarke
   laeuft ein kurzer Strich mit, sobald der Abschnitt ins Bild kommt.
   -------------------------------------------------------------------------- */
[data-fassung="1"] .sec__kopf,
[data-fassung="1"] .leitstand__kopf {
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0 2px;
  transition: background-size 760ms var(--kurve, ease);
}
[data-fassung="1"] .sec__kopf.ist-sichtbar,
[data-fassung="1"] .leitstand__kopf.ist-sichtbar { background-size: 64px 2px; }
@media (prefers-reduced-motion: reduce) {
  [data-fassung="1"] .sec__kopf { transition: none; }
}

/* --------------------------------------------------------------------------
   4b. Fassung 02 · Leitstand

   Dichter gesetzt, mehr Marken, die Kopfbaender der Unterseiten hoeher.
   -------------------------------------------------------------------------- */
[data-fassung="2"] .sec { padding: clamp(56px, 5.6vw, 88px) 0; }
[data-fassung="2"] .sec__kopf {
  padding-top: 20px; margin-bottom: clamp(32px, 3.4vw, 52px);
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 0; background-size: 56px 2px;
}
[data-fassung="2"] .seitenkopf__band { height: clamp(240px, 27vw, 380px); }
[data-fassung="2"] .seitenkopf__band--hoch { height: clamp(340px, 42vw, 580px); }
[data-fassung="2"] .seitenkopf__meta li { position: relative; padding-left: 22px; }
[data-fassung="2"] .seitenkopf__meta li::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px;
  margin-top: -2px; background: var(--accent);
}
[data-fassung="2"] .kennzahl__wert { font-size: clamp(42px, 5.2vw, 76px); }
[data-fassung="2"] .vorgehen__band { height: clamp(220px, 22vw, 300px); }
[data-fassung="3"] .vorgehen__band { height: clamp(150px, 14vw, 190px); }
[data-fassung="2"] .leistung { transition: background-color 260ms, transform 320ms var(--kurve, ease); }
[data-fassung="2"] .leistung:hover { transform: translateY(-3px); }
[data-fassung="2"] .merksatz { background: var(--surface); background: color-mix(in oklab, var(--surface) 70%, transparent); }

/* --------------------------------------------------------------------------
   4c. Fassung 03 · Editorial

   Groesser gesetzt, mehr Luft, das Zaehlwerk als schmales Band.
   -------------------------------------------------------------------------- */
[data-fassung="3"] .gf[data-design="1"] {
  --fs-display: clamp(42px, 6.2cqi, 96px);
  --fs-h2: clamp(33px, 4.5cqi, 70px);
  --fs-lead: clamp(18px, 1.5cqi, 23px);
}
/* Der Hero ist in jeder Fassung derselbe — auch in der Schriftgroesse.
   Die groessere Skala von Fassung 03 hoert davor auf. */
[data-fassung="3"] .hero {
  --fs-display: clamp(38px, 4.9cqi, 72px);
  --fs-lead: clamp(17px, 1.45cqi, 21px);
}

[data-fassung="3"] .sec { padding: clamp(78px, 8.4vw, 148px) 0; }
[data-fassung="3"] .sec__kopf {
  grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 32px);
  align-items: start; padding-top: 26px; border-top-width: 2px;
}
[data-fassung="3"] .sec__kopf .gf-h2 { max-width: 20ch; }
[data-fassung="3"] .sec__kopf .gf-text { max-width: 68ch; }

/* Zaehlwerk als schmales Band */
[data-fassung="3"] .uhr { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); }
[data-fassung="3"] .uhr__anzeige { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 34px; align-items: center; padding: 28px 26px 24px; }
[data-fassung="3"] .uhr__zahl { font-size: clamp(34px, 4.6vw, 62px); grid-row: span 2; }
[data-fassung="3"] .uhr__zeile { margin: 0; align-self: end; }
[data-fassung="3"] .uhr__offen { margin: 0; padding-top: 0; border-top: 0; align-self: start; }
[data-fassung="3"] .uhr__param { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1px; }
@media (max-width: 860px) {
  [data-fassung="3"] .uhr__anzeige { grid-template-columns: minmax(0, 1fr); }
  [data-fassung="3"] .uhr__zahl { grid-row: auto; }
  [data-fassung="3"] .uhr__param { grid-template-columns: 1fr 1fr; }
}

/* Leistungen zweispaltig und groesser */
[data-fassung="3"] .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-fassung="3"] .leistung__titel { font-size: clamp(21px, 1.9cqi, 27px); }
@media (max-width: 760px) { [data-fassung="3"] .leistungen { grid-template-columns: minmax(0, 1fr); } }

/* Bildbaender hoeher, Kopfband der Unterseiten schmaler */
[data-fassung="3"] .bildband__innen { padding-top: clamp(110px, 15vw, 240px); padding-bottom: clamp(110px, 15vw, 240px); }
[data-fassung="3"] .seitenkopf__band { height: clamp(170px, 17vw, 240px); }
[data-fassung="3"] .seitenkopf__band--hoch { height: clamp(240px, 26vw, 360px); }
[data-fassung="3"] .seitenkopf__titel { max-width: 17ch; }
[data-fassung="3"] .merksatz__satz { max-width: 24ch; font-size: clamp(32px, 5.2vw, 76px); }

/* ==========================================================================
   5. Bewegung

   Gilt in allen Fassungen. Nichts davon laeuft, wenn das Betriebssystem
   weniger Bewegung verlangt.
   ========================================================================== */

/* Kennzahlen laufen beim Eintreten hoch (seite.js) */
.kennzahl__wert, .zaehlt { font-variant-numeric: tabular-nums; }

/* Bilder mit Parallaxe */
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   5b. Saetze, die Wort fuer Wort einlaufen

   Die Huellen setzt seite.js (Zaesur-Saetze) oder die Vorlage selbst
   (Eroeffnungssatz in Fassung 03). Der Satz selbst laeuft dann nicht mehr
   als Block ein — sonst laegen zwei Bewegungen uebereinander.
   -------------------------------------------------------------------------- */
.wort {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.wort > i {
  display: inline-block; font-style: normal;
  transform: translateY(105%); opacity: 0;
  transition: transform 640ms var(--kurve, ease), opacity 420ms var(--kurve, ease);
  transition-delay: calc(var(--w, 0) * 26ms);
}
.ist-sichtbar .wort > i, .wort.ist-sichtbar > i { transform: none; opacity: 1; }
.ein .merksatz__satz[data-ein], .ein .zitat__satz[data-ein] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .wort > i { transform: none; opacity: 1; transition: none; }
}

/* Bilder, die langsamer laufen, brauchen Ueberhang an beiden Kanten */
.bildband__bild[data-parallax] { inset: -12% 0; height: 124%; }
.grossbild__bildrahmen { inset: -11% 0; }

/* --------------------------------------------------------------------------
   5c. Die Linie über jeder Abschnittsmarke zeichnet sich

   Gilt in allen Fassungen: Wo ein Abschnitt beginnt, wird die Haarlinie
   von links nach rechts gezogen statt einfach dazustehen. Der Rahmen bleibt
   als Rückfall stehen, falls JavaScript ausfällt — dann fehlt nur die
   Bewegung, nicht die Linie.
   -------------------------------------------------------------------------- */
.js .sec__kopf, .js .leitstand__kopf { position: relative; border-top-color: transparent; }
.js .sec__kopf::before, .js .leitstand__kopf::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: currentColor; opacity: 0.9;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1100ms var(--kurve, ease);
}
.js .sec--dunkel .sec__kopf::before, .js .leitstand__kopf::before { opacity: 0.55; }
.js .sec__kopf.ist-sichtbar::before, .js .leitstand__kopf.ist-sichtbar::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .sec__kopf::before, .js .leitstand__kopf::before { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   6. Fassung 04 · Einlinienschaltbild

   Der Plan läuft über die volle Breite. Auf schmalen Schirmen bleibt er
   in seiner Breite stehen und lässt sich seitlich schieben — gestaucht
   stießen die Beschriftungen ineinander.
   -------------------------------------------------------------------------- */
.einpolig__rolle { overflow-x: auto; overscroll-behavior-x: contain; margin: clamp(30px, 3.6vw, 54px) 0; }
.einpolig__band {
  position: relative; min-width: 760px; height: clamp(260px, 25vw, 360px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); background: color-mix(in oklab, var(--surface) 42%, transparent);
  overflow: hidden;
}
.einpolig__band .fx { position: absolute; inset: 0; }
.einpolig__ecke { position: absolute; width: 11px; height: 11px; border: 1px solid var(--accent); opacity: 0.6; z-index: 2; }
.einpolig__ecke--ro { right: var(--rand, 32px); top: 14px; border-left: 0; border-bottom: 0; }
.einpolig__ecke--lu { left: var(--rand, 32px); bottom: 14px; border-right: 0; border-top: 0; }

.einpolig__punkte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.einpolig__punkt { position: relative; background: var(--bg); padding: 20px 22px 24px; }
.einpolig__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.seite .einpolig__punkt h3 { margin: 10px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.seite .einpolig__punkt p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.seite .einpolig__hinweis {
  display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.einpolig__hinweis .ikon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent); }
@media (max-width: 960px) { .einpolig__punkte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .einpolig__punkte { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   7. Fassung 05 · Leistungen als große Liste

   Das Vorschaubild folgt dem Zeiger (seite.js). Ohne Zeiger — Tastatur,
   Handy — bleibt die Liste vollständig lesbar, die Bilder sind Beiwerk.
   -------------------------------------------------------------------------- */
.lliste { position: relative; }
.lliste__vorschau {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: clamp(200px, 21vw, 320px); aspect-ratio: 4 / 3;
  border: 1px solid var(--border); background: var(--surface);
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 260ms var(--kurve, ease);
}
.lliste.ist-aktiv .lliste__vorschau { opacity: 1; }
.lliste__vorschau img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 320ms;
  filter: grayscale(1) contrast(1.06) brightness(0.82);
}
[data-modus="hell"] .lliste__vorschau img { filter: grayscale(1) contrast(1.04); }
.lliste__vorschau img.ist-da { opacity: 1; }

.lliste__reihen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.lliste__reihe {
  display: grid; grid-template-columns: 74px minmax(0, 1.15fr) minmax(0, 1fr) 34px;
  gap: clamp(16px, 2.2vw, 36px); align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: padding-left 460ms var(--kurve, ease), background-color 300ms;
}
.lliste__reihe:hover, .lliste__reihe:focus-visible { padding-left: 16px; background: var(--surface); background: color-mix(in oklab, var(--surface) 40%, transparent); }
.lliste__marke { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.lliste__titel {
  font-family: var(--f-head, inherit); font-size: clamp(21px, 2.4cqi, 36px); font-weight: 560;
  line-height: 1.08; letter-spacing: -0.025em; font-variation-settings: "wdth" 112;
  transition: color 260ms;
}
.lliste__text { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.lliste__pfeil { justify-self: end; color: var(--text-2); transition: transform 360ms var(--kurve, ease), color 260ms; }
.lliste__pfeil .ikon { width: 20px; height: 20px; }
.lliste__reihe:hover .lliste__pfeil { transform: translateX(6px); color: var(--accent); }

/* Fassung 12: statt Vorschaubild ein leichtes Leuchten in der Akzentfarbe,
   das von links in die Zeile laeuft. Reines CSS, ohne Bild. */
[data-fassung="12"] .lliste__reihe { position: relative; isolation: isolate; }
[data-fassung="12"] .lliste__reihe::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 160% at 0% 50%, var(--accent), transparent 72%),
    linear-gradient(90deg, var(--accent), transparent 60%); background:
    radial-gradient(70% 160% at 0% 50%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%),
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%);
  opacity: 0; transition: opacity 360ms var(--kurve, ease);
}
[data-fassung="12"] .lliste__reihe::after {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 14px 1px var(--accent); box-shadow: 0 0 14px 1px color-mix(in oklab, var(--accent) 70%, transparent);
  transform: scaleY(0); transition: transform 360ms var(--kurve, ease);
}
[data-fassung="12"] .lliste__reihe:hover::before,
[data-fassung="12"] .lliste__reihe:focus-visible::before { opacity: 1; }
[data-fassung="12"] .lliste__reihe:hover::after,
[data-fassung="12"] .lliste__reihe:focus-visible::after { transform: scaleY(1); }
[data-fassung="12"] .lliste__reihe:hover .lliste__titel,
[data-fassung="12"] .lliste__reihe:focus-visible .lliste__titel { color: var(--accent-light, var(--accent)); }
[data-fassung="12"] .lliste__reihe:hover,
[data-fassung="12"] .lliste__reihe:focus-visible { background: none; }
@media (prefers-reduced-motion: reduce) {
  [data-fassung="12"] .lliste__reihe::before, [data-fassung="12"] .lliste__reihe::after { transition: none; }
}
.seite .lliste__hinweis { margin: 20px 0 0; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted, var(--text-2)); }

@media (max-width: 900px) {
  .lliste__vorschau { display: none; }
  .lliste__reihe { grid-template-columns: 56px minmax(0, 1fr) 24px; row-gap: 10px; }
  .lliste__text { grid-column: 2 / -1; }
}

/* --------------------------------------------------------------------------
   8. Fassung 05 · Die vier Bausteine laufen waagerecht vorbei

   Der Abschnitt ist hoch, der Ausschnitt bleibt stehen, die Reihe wandert
   (seite.js). Unter 900 px wird daraus eine Reihe zum Wischen.
   -------------------------------------------------------------------------- */
.film { position: relative; height: 240vh; }
.film__klebe {
  position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); min-height: 600px;
  display: grid; grid-template-rows: auto 1fr auto; align-content: center;
  gap: clamp(16px, 2.2vw, 30px); padding: clamp(22px, 3vw, 44px) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.film__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 60px); align-items: end; }
.film__fenster { overflow: hidden; align-self: center; }
.film__spur { display: flex; gap: 20px; padding: 0 var(--rand, 32px); will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); }
.film__karte {
  flex: 0 0 clamp(290px, 29vw, 430px); position: relative;
  border: 1px solid var(--border); background: var(--surface); background: color-mix(in oklab, var(--surface) 52%, transparent);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.film__buehne { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--border); overflow: hidden; }
.film__buehne .fx { position: absolute; inset: 0; }
.film__nr {
  position: absolute; right: 12px; top: 10px; z-index: 2;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent);
}
.film__inhalt { padding: 18px 20px 22px; }
.seite .film__titel { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.film__titel .ikon { width: 20px; height: 20px; color: var(--primary); flex: none; }
.seite .film__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.film__param { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; margin: 16px 0 0; padding: 0; background: var(--border); border: 1px solid var(--border); }
.film__param li { flex: 1 1 auto; background: var(--bg); padding: 8px 11px; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-2); }
.film__karte--schluss { display: grid; align-content: center; justify-items: start; gap: 20px; padding: 28px; }
.seite .film__schlusstext { margin: 0; font-size: clamp(19px, 1.8cqi, 25px); font-weight: 560; line-height: 1.22; letter-spacing: -0.02em; color: var(--text); }
.film__balken { height: 2px; background: var(--border); background: color-mix(in oklab, var(--border) 90%, transparent); }
.film__balken span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 120ms linear; }

@media (max-width: 900px) {
  .film { height: auto; }
  .film__klebe { position: static; height: auto; min-height: 0; padding: clamp(48px, 7vw, 80px) 0; }
  .film__kopf { grid-template-columns: minmax(0, 1fr); }
  .film__fenster { overflow-x: auto; overscroll-behavior-x: contain; }
  .film__spur { transform: none; }
  .film__karte { flex-basis: 78vw; }
  .film__balken { display: none; }
}

/* --------------------------------------------------------------------------
   9. Registerleiste (Fassung 04 und 05)

   Links am Rand, aus den Abschnittsmarken der Seite gebaut (seite.js).
   Erscheint erst, wenn daneben Platz ist.
   -------------------------------------------------------------------------- */
.register {
  position: fixed; left: clamp(10px, 1.1vw, 20px); top: 50%; z-index: 70;
  transform: translateY(-50%);
  display: none; gap: 1px;
  padding: 10px 11px;
  background: var(--bg); background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  font-family: var(--f-mono, monospace);
  transition: border-color 260ms, background-color 260ms;
}
.register:hover { background: var(--bg); background: color-mix(in oklab, var(--bg) 94%, transparent); border-color: var(--border); }
.register[hidden] { display: none; }
@media (min-width: 1520px) {
  [data-fassung="4"] .register, [data-fassung="5"] .register { display: grid; }
  /* Was ueber die volle Breite laeuft, macht der Leiste Platz:
     der Stromlauf, die Bausteinreihe und die Bildunterschrift am Kopfband. */
  [data-fassung="4"] .einpolig__band .fx { left: 92px; }
  [data-fassung="5"] .film__spur { padding-left: 104px; }
  [data-fassung="4"] .seitenkopf__legende,
  [data-fassung="5"] .seitenkopf__legende { left: calc(var(--rand, 32px) + 70px); }
}
.register__punkt {
  display: flex; align-items: center; gap: 0;
  padding: 3px 0; background: none; border: 0; cursor: pointer;
  color: var(--text-2); text-align: left;
}
.register__strich { display: block; width: 14px; height: 1px; flex: none; background: currentColor; transition: width 340ms var(--kurve, ease), background-color 300ms; }
.register__text {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width 380ms var(--kurve, ease), opacity 240ms, padding-left 380ms var(--kurve, ease);
}
.register:hover .register__text, .register__punkt:focus-visible .register__text { max-width: 220px; opacity: 1; padding-left: 10px; }
.register__punkt:hover { color: var(--text); }
.register__punkt.ist-aktiv { color: var(--accent); }
.register__punkt.ist-aktiv .register__strich { width: 28px; }
@media (prefers-reduced-motion: reduce) { .register__text { transition: none; } }

/* --------------------------------------------------------------------------
   10. Skins der beiden neuen Fassungen
   -------------------------------------------------------------------------- */
/* Fassung 04 erbt die mitlaufende Linie von Fassung 01 */
[data-fassung="4"] .sec__kopf {
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0 2px;
  transition: background-size 760ms var(--kurve, ease);
}
[data-fassung="4"] .sec__kopf.ist-sichtbar { background-size: 64px 2px; }
[data-fassung="4"] .seitenkopf__band { height: clamp(220px, 24vw, 340px); }
[data-fassung="4"] .leistung { transition: background-color 260ms, transform 320ms var(--kurve, ease); }
[data-fassung="4"] .leistung:hover { transform: translateY(-3px); }

/* Fassung 05 setzt die Marken größer und die Bänder höher */
[data-fassung="5"] .sec__kopf { padding-top: 24px; }
[data-fassung="5"] .sec__eyebrow { font-size: 11.5px; letter-spacing: 0.16em; }
[data-fassung="5"] .seitenkopf__band { height: clamp(260px, 30vw, 440px); }
[data-fassung="5"] .vorgehen__band { height: clamp(200px, 20vw, 280px); }
[data-fassung="5"] .seitenkopf__band--hoch { height: clamp(340px, 42vw, 600px); }

/* Sprungziele der Registerleiste: auch Abschnitte ohne id sollen unter der
   Kopfzeile landen, nicht darunter verschwinden. */
[data-abschnitt-label] { scroll-margin-top: calc(var(--kopf-h) + 20px); }

/* Weniger Bewegung: der Lauf wird zur Reihe zum Wischen */
@media (prefers-reduced-motion: reduce) {
  .film { height: auto; }
  .film__klebe { position: static; height: auto; min-height: 0; }
  .film__fenster { overflow-x: auto; }
  .film__spur { transform: none; }
  .film__balken { display: none; }
}

/* Der Hinweis unter dem Lauf sagt, was gerade gilt */
.seite .film__hinweis { margin: 14px 0 0; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.film__hinweis--schmal { display: none; }
@media (max-width: 900px) {
  .film__hinweis--breit { display: none; }
  .film__hinweis--schmal { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .film__hinweis--breit { display: none; }
  .film__hinweis--schmal { display: inline; }
}

/* Auf schmalen Schirmen steht der Stromlauf in seiner Breite und wird
   geschoben — das muss man sehen können. */
.einpolig__schieben { display: none; }
@media (max-width: 960px) {
  .seite .einpolig__schieben {
    display: flex; align-items: center; gap: 8px; margin: -14px 0 22px;
    font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
  }
  .einpolig__schieben .ikon { width: 15px; height: 15px; }
}

/* 

   11. Fassung 06 · Lastgang

   Gebaut auf 01 und 05. Die Haltung: Die Seite steigt und faellt wie ein
   Lastgang — dichte, technische Strecken laufen auf dunkle Spitzen zu und
   fallen danach wieder ab. Alles hier unten gehoert allein zu Fassung 06,
   entweder ueber [data-fassung="6"] oder ueber Klassen, die nur in ihren
   beiden eigenen Bausteinen vorkommen (.auftakt, .takt, .lastgang).
   ========================================================================== */

/* --------------------------------------------------------------------------
   11a. Auftakt · die Leitung zum Netzverknuepfungspunkt

   Kein Schmuck: Die Linie ist die Aussage des Abschnitts. Sie kommt von
   ausserhalb des Bildes, laeuft durch und endet am Anschluss. Der Impuls
   darauf steht still, sobald das Betriebssystem weniger Bewegung verlangt.
   -------------------------------------------------------------------------- */
.auftakt {
  position: relative; z-index: 1; overflow: hidden;
  padding: clamp(54px, 6.6vw, 100px) 0 0;
  border-bottom: 1px solid var(--text-inverse); border-bottom: 1px solid color-mix(in oklab, var(--text-inverse) 14%, transparent);
}

.auftakt__leitung { position: relative; height: 58px; margin-bottom: clamp(28px, 3.4vw, 50px); }
.auftakt__draht {
  position: absolute; left: calc(-50vw - var(--rand, 32px)); right: 22px; top: 18px;
  height: 3px; overflow: hidden;
  background-image: repeating-linear-gradient(90deg,
    var(--text-inverse) 0 9px, transparent 9px 17px); background-image: repeating-linear-gradient(90deg,
    color-mix(in oklab, var(--text-inverse) 40%, transparent) 0 9px, transparent 9px 17px);
  background-size: 100% 1px; background-position: 0 1px; background-repeat: repeat-x;
}
.auftakt__impuls {
  position: absolute; left: 0; top: 0; width: 130px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-light));
  animation: auftaktImpuls 5.6s linear infinite;
}
@keyframes auftaktImpuls {
  from { transform: translateX(-150px); }
  to   { transform: translateX(2800px); }
}
.auftakt__knoten {
  position: absolute; right: 0; top: 13px; width: 13px; height: 13px;
  border: 1px solid var(--accent-light); background: var(--inverse);
}
.auftakt__knoten::after { content: ""; position: absolute; inset: 3px; background: var(--accent-light); }
.auftakt__knotenlabel {
  position: absolute; right: 0; top: 36px;
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 58%, transparent);
}

.auftakt__klein {
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-light);
}
.auftakt__satz {
  margin: 0; max-width: 21ch;
  font-family: var(--f-head, inherit);
  font-size: clamp(31px, 6cqi, 88px); font-weight: 560; line-height: 1.0; letter-spacing: -0.035em;
  font-variation-settings: "wdth" 112;
  color: var(--text-inverse); text-wrap: balance;
}
/* Der Satz laeuft Wort fuer Wort ein, deshalb faellt der Einlauf als Block weg */
.ein .auftakt__satz[data-ein] { opacity: 1; transform: none; transition: none; }

.auftakt__fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 18px clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 3.8vw, 56px); padding-top: 20px;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 20%, transparent);
}
.auftakt__marken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.auftakt__marken li {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 12px;
  border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 24%, transparent);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 78%, transparent);
}
.auftakt__markennr { color: var(--accent-light); }
.seite .auftakt__notiz {
  margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.55;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 66%, transparent);
}

/* Takt am Fuss des Auftakts: dieselben Begriffe wie das Laufband in 01 und
   04, hier aber Teil des Abschnitts statt eigener Baustein. */
.takt {
  margin-top: clamp(38px, 4.6vw, 70px); padding: 14px 0; overflow: hidden;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.takt__spur { display: flex; width: max-content; animation: taktLauf 74s linear infinite; }
.takt__reihe { display: flex; list-style: none; margin: 0; padding: 0; }
.takt__reihe li {
  display: flex; align-items: center; gap: 24px; padding-right: 24px;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 46%, transparent); white-space: nowrap;
}
.takt__reihe li::after {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--accent-light); opacity: 0.6; transform: rotate(45deg);
}
@keyframes taktLauf { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .auftakt__leitung { height: 52px; }
  .auftakt__knotenlabel { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .auftakt__impuls { animation: none; opacity: 0; }
  .takt__spur { animation: none; }
}

/* --------------------------------------------------------------------------
   11b. Der Lastgang · das Band bleibt oben, die Schritte laufen darunter

   Umgekehrt zur Szene in Fassung 02: dort steht die Zeichnung links und der
   Text zieht rechts vorbei. Hier klebt das Band unter der Kopfzeile und die
   Schritte wandern darunter hindurch.

   Gesteuert von derselben Mechanik (seite.js, [data-szene]). Die Buehne
   traegt deshalb zusaetzlich .szene__buehne — die Masse von dort werden
   hier zurueckgenommen.
   -------------------------------------------------------------------------- */
.lastgang {
  --band-h: clamp(190px, 27vh, 320px);
  --leiste-h: 36px;
  position: relative; z-index: 1;
  padding: clamp(54px, 6.2vw, 96px) 0 clamp(42px, 5vw, 78px);
  border-bottom: 1px solid var(--text-inverse); border-bottom: 1px solid color-mix(in oklab, var(--text-inverse) 14%, transparent);
}
/* Ohne JavaScript traegt die Haarlinie am Kopf keine Farbe aus dem Hellmodus */
.lastgang .sec__kopf { border-top-color: var(--text-inverse); border-top-color: color-mix(in oklab, var(--text-inverse) 40%, transparent); }

.lastgang__klebe {
  position: sticky; top: var(--kopf-h); z-index: 3;
  margin-top: clamp(24px, 2.8vw, 42px); background: var(--inverse);
}
.lastgang__leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--leiste-h); padding: 0 var(--rand, 32px);
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent);
}
.lastgang .lastgang__band {
  /* relative, nicht static: .szene__buehne .fx haengt mit inset:0 daran.
     Static wuerde die Zeichnung an den ganzen Abschnitt haengen.
     Das top aus .szene__buehne muss dabei mit zurueckgenommen werden,
     sonst rutscht das Band um die Kopfzeilenhoehe nach unten. */
  position: relative; top: auto; aspect-ratio: auto; max-height: none;
  height: var(--band-h);
  border: 0;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 14%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent);
  background: var(--inverse);
  overflow: hidden;
}

.lastgang__marke {
  margin: 0; display: flex; align-items: baseline; gap: 11px; min-width: 0;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent);
}
.lastgang__marke b { font-size: 14px; font-weight: 400; color: var(--accent-light); }

.lastgang__punkte {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: none;
  font-family: var(--f-mono, monospace); font-size: 10.5px;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 40%, transparent);
}
.lastgang__punkte li { padding: 3px 7px; border: 1px solid transparent; transition: color 300ms, border-color 300ms; }
.lastgang__punkte li.ist-aktiv { color: var(--text-inverse); border-color: var(--accent-light); }

/* Fortschritt ohne eigene Zeile JavaScript: welcher Schritt aktiv ist,
   steht bereits als Klasse im Markup — :has() liest sie aus. */
.lastgang__fortschritt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px;
  background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 12%, transparent);
}
.lastgang__fortschritt i {
  display: block; width: 25%; height: 100%; background: var(--accent-light);
  transition: transform 560ms var(--kurve, ease);
}
.lastgang:has(.lastgang__schritt:nth-of-type(2).ist-aktiv) .lastgang__fortschritt i { transform: translateX(100%); }
.lastgang:has(.lastgang__schritt:nth-of-type(3).ist-aktiv) .lastgang__fortschritt i { transform: translateX(200%); }
.lastgang:has(.lastgang__schritt:nth-of-type(4).ist-aktiv) .lastgang__fortschritt i { transform: translateX(300%); }

/* seite.js schaltet um, sobald ein Schritt das schmale Band in der Bildmitte
   beruehrt — gemessen an seiner Oberkante. Deshalb zwei Ebenen: der Schritt
   gibt die Strecke vor, die Huelle darin bleibt unter dem Band stehen,
   solange sein Schritt laeuft. Sonst waere der Titel schon wieder unter dem
   Band verschwunden, waehrend seine Zeichnung noch lief. */
.lastgang__schritte { display: grid; padding-top: clamp(24px, 5vh, 60px); }
.lastgang__schritt {
  min-height: 66vh;
  transition: opacity 460ms var(--kurve, ease);
}
.lastgang__halt {
  position: sticky;
  top: calc(var(--kopf-h) + var(--leiste-h) + var(--band-h) + 5vh);
  max-width: 56ch; padding-top: 18px;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent);
  transition: border-top-color 460ms;
}
.lastgang__schritt.ist-aktiv .lastgang__halt { border-top-color: var(--accent-light); }
/* Nur mit JavaScript darf gedimmt werden — sonst bliebe alles unlesbar */
.js .lastgang__schritt { opacity: 0.3; }
.js .lastgang__schritt.ist-aktiv { opacity: 1; }
/* Die Schritte wechseln die Seite: der Blick wandert mit der Kurve */
@media (min-width: 1000px) {
  .lastgang__schritt:nth-of-type(even) .lastgang__halt { margin-left: auto; }
}

.seite .lastgang__nr {
  margin: 0 0 13px;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.1em;
  color: var(--accent-light);
}
.seite .lastgang__titel {
  margin: 0; font-family: var(--f-head, inherit);
  font-size: clamp(26px, 3.2cqi, 46px); font-weight: 560; line-height: 1.05; letter-spacing: -0.03em;
  font-variation-settings: "wdth" 112; color: var(--text-inverse);
}
.seite .lastgang__text {
  margin: 17px 0 0; font-size: var(--fs-lead, 18px); line-height: 1.5;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 76%, transparent);
}
.lastgang__param {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 22px 0 0; padding: 0; list-style: none;
  background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent);
}
.lastgang__param li {
  flex: 1 1 auto; background: var(--inverse); padding: 10px 13px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 66%, transparent);
}
.seite .lastgang__hinweis {
  display: flex; gap: 11px; align-items: flex-start;
  margin: clamp(20px, 2.6vw, 38px) 0 0; padding-top: 18px;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent);
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 60%, transparent);
}
.lastgang__hinweis .ikon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-light); }

@media (max-width: 900px) {
  .lastgang__klebe { position: static; }
  .lastgang .lastgang__band { height: clamp(200px, 48vw, 300px); }
  .lastgang__schritte { padding-top: clamp(30px, 5vh, 52px); }
  .lastgang__schritt { min-height: 0; margin-bottom: clamp(34px, 6vh, 60px); }
  .lastgang__halt { position: static; max-width: none; }
  .js .lastgang__schritt { opacity: 1; }
  .lastgang__fortschritt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lastgang__schritt { opacity: 1; }
  .lastgang__fortschritt i { transition: none; }
}

/* --------------------------------------------------------------------------
   11c. Skin der Fassung 06

   Die Abschnittsmarke laedt sich auf: erst zieht die Haarlinie (gemeinsam,
   Abschnitt 5c), dann laeuft der Akzentbalken darunter bis an den rechten
   Rand. Das ist der Takt der Fassung, an jeder Marke derselbe.

   Die Displayskala bleibt unangetastet — sonst waere der Hero nicht mehr
   in jeder Fassung derselbe. Groesser werden nur die Abschnittstitel.
   -------------------------------------------------------------------------- */
[data-fassung="6"] .gf[data-design="1"] { --fs-h2: clamp(32px, 4.3cqi, 66px); }

[data-fassung="6"] .sec__kopf {
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0 3px;
  transition: background-size 1200ms var(--kurve, ease) 280ms;
}
[data-fassung="6"] .sec__kopf.ist-sichtbar { background-size: 100% 3px; }
[data-fassung="6"] .sec--dunkel .sec__kopf { background-image: linear-gradient(90deg, var(--accent-light), var(--accent-light)); }
@media (prefers-reduced-motion: reduce) {
  [data-fassung="6"] .sec__kopf { transition: none; }
}

[data-fassung="6"] .sec { padding: clamp(58px, 5.8vw, 92px) 0; }
[data-fassung="6"] .sec__eyebrow { font-size: 11.5px; letter-spacing: 0.16em; }

/* Die Zaesur wird in 06 zur Spitze: dunkles Band ueber die volle Breite */
[data-fassung="6"] .merksatz {
  background: var(--inverse); color: var(--text-inverse);
  padding: clamp(76px, 9vw, 148px) 0;
  border-bottom-color: var(--text-inverse); border-bottom-color: color-mix(in oklab, var(--text-inverse) 14%, transparent);
}
[data-fassung="6"] .merksatz__klein { color: var(--accent-light); }
[data-fassung="6"] .merksatz__satz { max-width: 22ch; font-size: clamp(34px, 5.6vw, 84px); color: var(--text-inverse); }
[data-fassung="6"] .merksatz__quelle { color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 72%, transparent); }

/* Die grosse Liste aus 05, eine Stufe schaerfer */
[data-fassung="6"] .lliste__reihen { border-top-width: 2px; }
[data-fassung="6"] .lliste__titel { font-size: clamp(23px, 2.9cqi, 44px); }
[data-fassung="6"] .lliste__reihe:hover,
[data-fassung="6"] .lliste__reihe:focus-visible { padding-left: 26px; }
[data-fassung="6"] .lliste__vorschau { width: clamp(220px, 24vw, 360px); }

/* Karten und Baender wie in 05, Kennzahlen wie in 02 */
[data-fassung="6"] .leistung { transition: background-color 260ms, transform 320ms var(--kurve, ease); }
[data-fassung="6"] .leistung:hover { transform: translateY(-3px); }
[data-fassung="6"] .kennzahl__wert { font-size: clamp(44px, 5.4vw, 80px); }
[data-fassung="6"] .seitenkopf__band { height: clamp(250px, 29vw, 420px); }
[data-fassung="6"] .seitenkopf__band--hoch { height: clamp(330px, 40vw, 580px); }
[data-fassung="6"] .vorgehen__band { height: clamp(210px, 21vw, 300px); }

/* Registerleiste wie in 04 und 05, mit denselben Ausweichungen */
@media (min-width: 1520px) {
  [data-fassung="6"] .register { display: grid; }
  [data-fassung="6"] .film__spur { padding-left: 104px; }
  [data-fassung="6"] .seitenkopf__legende { left: calc(var(--rand, 32px) + 70px); }
}
=======
/* --------------------------------------------------------------------------
   11. Fassung 07 · Entwurf einer anderen Marke

   Farben kommen aus tokens.css ([data-fassung="7"]), das Zeichen aus
   _includes/logo/sprite-gfg.njk. Hier steht nur, was die Form angeht.
   -------------------------------------------------------------------------- */
[data-fassung="7"] .kopf__marke .logo { width: 196px; }
[data-fassung="7"] .fuss__marke .logo { width: 228px; }
@media (max-width: 860px) { [data-fassung="7"] .kopf__marke .logo { width: 166px; } }

/* ==========================================================================
   12. Fassung 08 · die Marke bis in die Kleinteile

   Aufbau aus den besten Stuecken der uebrigen Fassungen; hier steht, was
   darueber hinaus nur in 08 gilt. Drei Dinge:

     a) der Pfeil aus dem Zeichen als wiederkehrende Marke
     b) Karten, die sich unter dem Zeiger leicht neigen
     c) der Lesefortschritt als Strich unter der Kopfzeile

   Farben kommen aus tokens.css ([data-skin="8"] erbt den Satz der Marke
   ueber dieselbe Regel wie 07).
   ========================================================================== */

/* --------------------------------------------------------------------------
   a) Der Pfeil als Marke

   Eine Maske, keine Grafik: so nimmt der Pfeil die Farbe der Stelle an, an
   der er steht — Akzent im Fliesstext, Markenfarbe auf dunklem Grund.
   -------------------------------------------------------------------------- */
[data-skin="8"] {
  --pfeil: url("/assets/img/logo/pfeil-gfg.svg");
}

/* Abschnittsmarke: aus dem gedrehten Quadrat wird der Pfeil */
[data-skin="8"] .gf[data-design="1"] .gf-eyebrow::before {
  content: ""; width: 11px; height: 11px; border: 0; transform: none; flex: none;
  background: var(--accent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
[data-skin="8"] .gf[data-design="1"] .on-dark .gf-eyebrow::before { background: var(--accent-light); }

/* Weiterfuehrende Links, Kartenfuesse, Listenpfeile */
[data-skin="8"] .sec__mehr .ikon,
[data-skin="8"] .leistung__fuss .ikon,
[data-skin="8"] .lliste__pfeil .ikon,
[data-skin="8"] .film__titel .ikon-pfeil {
  background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
[data-skin="8"] .sec__mehr .ikon path,
[data-skin="8"] .leistung__fuss .ikon path,
[data-skin="8"] .lliste__pfeil .ikon path { display: none; }

/* Aufzaehlungen: der kleine Kasten wird zum Pfeil */
[data-skin="8"] .systeme__param li::before,
[data-skin="8"] .szene__param li::before,
[data-skin="8"] .schnitt__punkte li::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--accent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
[data-skin="8"] .szene__param li,
[data-skin="8"] .schnitt__punkte li { display: flex; gap: 9px; align-items: baseline; }
[data-skin="8"] .schnitt__punkte li::before { background: var(--accent-light); }

/* Der Haken in den Listen bleibt ein Haken — er bedeutet "ist dabei".
   Nur die offenen Kaestchen werden zum Pfeil: sie zeigen nach vorn. */
[data-skin="8"] .abschluss__kasten,
[data-skin="8"] .stufe__kasten {
  border: 0; width: 11px; height: 11px;
  background: var(--accent); background: color-mix(in oklab, var(--accent) 55%, transparent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   b) Karten neigen sich unter dem Zeiger

   seite.js legt auf dem Element unter dem Zeiger --mnx und --mny ab (von
   -0.5 bis 0.5). Nur dort, nicht auf allen Karten gleichzeitig.
   -------------------------------------------------------------------------- */
[data-skin="8"] .perspektive,
[data-skin="8"] .fall,
[data-skin="8"] .leistung,
[data-skin="8"] .kanal,
[data-skin="8"] .finanz__modul,
[data-skin="8"] .einpolig__punkt {
  transform: perspective(900px) rotateX(calc(var(--mny, 0) * -2.4deg)) rotateY(calc(var(--mnx, 0) * 3deg));
  transform-style: preserve-3d;
  transition: transform 520ms var(--kurve, ease), background-color 300ms;
}
[data-skin="8"] .leistung:hover { transform: perspective(900px) rotateX(calc(var(--mny, 0) * -2.4deg)) rotateY(calc(var(--mnx, 0) * 3deg)) translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  [data-skin="8"] .perspektive,
  [data-skin="8"] .fall,
  [data-skin="8"] .leistung,
  [data-skin="8"] .kanal,
  [data-skin="8"] .finanz__modul,
  [data-skin="8"] .einpolig__punkt { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   c) Lesefortschritt unter der Kopfzeile

   seite.js schreibt --gelesen (0 bis 1) an das Wurzelelement; der Ring unten
   rechts rechnet denselben Wert aus.
   -------------------------------------------------------------------------- */
[data-skin="8"] .kopf { position: sticky; }
[data-skin="8"] .kopf::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: calc(var(--gelesen, 0) * 100%);
  background: linear-gradient(90deg, var(--accent), var(--accent)); background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 40%, transparent), var(--accent));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Der Strich an der Abschnittsmarke bekommt eine Spitze

   Die Linie zeichnet sich wie in 01; am Ende steht der Pfeil der Marke.
   -------------------------------------------------------------------------- */
[data-skin="8"] .sec__kopf,
[data-skin="8"] .leitstand__kopf { position: relative; }
[data-skin="8"] .sec__kopf::after {
  content: ""; position: absolute; left: 0; top: -6px; width: 12px; height: 12px;
  background: var(--accent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
  opacity: 0; transform: translateX(0);
  transition: transform 900ms var(--kurve, ease), opacity 400ms;
}
[data-skin="8"] .sec__kopf.ist-sichtbar::after { opacity: 1; transform: translateX(58px); }
@media (prefers-reduced-motion: reduce) {
  [data-skin="8"] .sec__kopf::after { transition: none; opacity: 1; transform: translateX(58px); }
}

/* --------------------------------------------------------------------------
   Uebernahmen aus den anderen Fassungen

   Das Zaehlwerk steht wie in 03 als schmales Band, die Registerleiste wie in
   04 und 05, und die Baender der Unterseiten etwas hoeher wie in 02.
   -------------------------------------------------------------------------- */
[data-skin="8"] .uhr { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); }
[data-skin="8"] .uhr__anzeige { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 34px; align-items: center; padding: 28px 26px 24px; }
[data-skin="8"] .uhr__zahl { font-size: clamp(34px, 4.6vw, 62px); grid-row: span 2; }
[data-skin="8"] .uhr__zeile { margin: 0; align-self: end; }
[data-skin="8"] .uhr__offen { margin: 0; padding-top: 0; border-top: 0; align-self: start; }
[data-skin="8"] .uhr__param { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1px; }
@media (max-width: 860px) {
  [data-skin="8"] .uhr__anzeige { grid-template-columns: minmax(0, 1fr); }
  [data-skin="8"] .uhr__zahl { grid-row: auto; }
  [data-skin="8"] .uhr__param { grid-template-columns: 1fr 1fr; }
}

[data-skin="8"] .seitenkopf__band { height: clamp(240px, 27vw, 380px); }
[data-skin="8"] .seitenkopf__band--hoch { height: clamp(340px, 42vw, 580px); }
[data-skin="8"] .seitenkopf__meta li { position: relative; padding-left: 24px; }
[data-skin="8"] .seitenkopf__meta li::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4px;
  background: var(--accent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
[data-skin="8"] .vorgehen__band { height: clamp(200px, 20vw, 280px); }

@media (min-width: 1520px) {
  [data-skin="8"] .register { display: grid; }
  [data-skin="8"] .einpolig__band .fx { left: 92px; }
  [data-skin="8"] .seitenkopf__legende { left: calc(var(--rand, 32px) + 70px); }
}

/* Die Wortmarke ist flacher als die bisherige */
[data-skin="8"] .kopf__marke .logo { width: 196px; }
[data-skin="8"] .fuss__marke .logo { width: 228px; }
@media (max-width: 860px) { [data-skin="8"] .kopf__marke .logo { width: 166px; } }

/* --------------------------------------------------------------------------
   Fassung 08 · Nacharbeiten aus dem Durchsehen

   Der Hero-Text stand zu eng, die Zeile unten links passte nicht, und im
   Leitstand bleibt nur die Zeichnung des Standorts (Auswahl in fassungen.js).
   -------------------------------------------------------------------------- */
[data-skin="8"] .hero__titel { line-height: 1.1; }
[data-skin="8"] .hero__lead { line-height: 1.62; }
[data-skin="8"] .hero__legende { display: none; }

/* Mit einem Kanal traegt die Zeichnung die ganze Breite */
[data-skin="8"] .leitstand__kanaele { grid-template-columns: minmax(0, 1fr); }
[data-skin="8"] .leitstand__kanaele .kanal:last-child .kanal__buehne { aspect-ratio: 16 / 6.8; }

/* ==========================================================================
   13. Fassung 09 · dieselbe Seite, eine Stufe ruhiger

   Aufbau, Inhalte und Aussehen kommen von Fassung 08 (data-skin="8"). Hier
   steht nur, was weniger wird. Die Regel dahinter: pro Stelle eine Aussage,
   nicht vier. Was wegfaellt, steht anderswo auf der Seite ohnehin — die
   Leistungsseite fuehrt die Punkte im Detail.
   ========================================================================== */

/* Die vier Bausteine: Nummer, Name, ein Satz. Die Parameterleisten und die
   Randnotiz darunter waren das, was den Abschnitt ueberladen hat. */
[data-dichte="ruhig"] .szene__param,
[data-dichte="ruhig"] .szene__notiz { display: none; }
[data-dichte="ruhig"] .szene__text { margin-top: 16px; max-width: 42ch; }

/* Perspektiven: Ueberschrift und Satz reichen, die Stichpunkte darunter
   wiederholen, was der Satz schon sagt. */
[data-dichte="ruhig"] .perspektive__details { display: none; }

/* Leistungsliste: nur die Namen. Das Bild beim Ueberfahren erklaert genug,
   der Abschnitt dahinter steht ausfuehrlich auf der Leistungsseite. */
[data-dichte="ruhig"] .lliste__text { display: none; }
[data-dichte="ruhig"] .lliste__reihe { grid-template-columns: 74px minmax(0, 1fr) 34px; }

/* Vorgehen: acht Phasen mit je einer Ergebniszeile sind acht Zeilen zu viel */
[data-dichte="ruhig"] .phase__ergebnis { display: none; }
[data-dichte="ruhig"] .phase { padding-bottom: 6px; }

/* Etwas mehr Luft zwischen den Abschnitten, damit die Ruhe auch im
   Rhythmus ankommt und nicht nur im Textumfang */
[data-dichte="ruhig"] .sec { padding: clamp(88px, 9.2vw, 152px) 0; }
[data-dichte="ruhig"] .sec__kopf { margin-bottom: clamp(54px, 5.6vw, 88px); }

/* Mit neun Fassungen wird die Leiste auf kleinen Schirmen knapp */
@media (max-width: 480px) {
  .wechsel__leiste { padding: 0 3px; }
  .wechsel__schnell { gap: 0; }
  .wechsel__kurz { padding: 0 6px; font-size: 11px; }
  .wechsel__griff { margin-left: 2px; }
}

/* --------------------------------------------------------------------------
   Fassung 09 · Kästen abbauen

   Die Designsprache bleibt: Haarlinien, Registermarken, Monospace, eckige
   Formen. Was geht, ist das Ineinander — ein Rahmen um ein Raster um eine
   Zelle um ein Feld. Aus Kästen werden Trennlinien, aus Rahmen wird Weißraum.
   Eine Kante pro Sache, nicht vier.
   -------------------------------------------------------------------------- */

/* Leitstand: der äußere Rahmen und die Marken-Schiene fallen weg, die
   Zeichnung steht für sich. Bleibt: eine Kante um die Zeichnung. */
[data-dichte="ruhig"] .leitstand__rahmen { border: 0; }
[data-dichte="ruhig"] .leitstand__schiene { display: none; }
[data-dichte="ruhig"] .leitstand__kanaele { background: none; gap: 0; }
[data-dichte="ruhig"] .kanal { background: none; padding: 0; }
[data-dichte="ruhig"] .kanal__kopf { margin-bottom: 18px; }
[data-dichte="ruhig"] .leitstand__hinweis { border-top: 0; padding: 18px 0 0; }

/* Perspektiven: statt Raster mit Rahmen drei Abschnitte mit Trennlinie */
[data-dichte="ruhig"] .perspektiven { background: none; border: 0; gap: 0; }
[data-dichte="ruhig"] .perspektive { background: none; padding: 26px 0; border-top: 1px solid var(--border); }
[data-dichte="ruhig"] .perspektive:first-child { border-top: 0; padding-top: 0; }
[data-dichte="ruhig"] .perspektive__ikon { border: 0; width: 28px; height: 28px; color: var(--accent); justify-content: flex-start; }
[data-dichte="ruhig"] .perspektive:hover .perspektive__ikon { background: none; color: var(--accent); }
[data-dichte="ruhig"] .perspektive::after { display: none; }
[data-dichte="ruhig"] .position__bild { border: 0; }

/* Die vier Bausteine: Symbol ohne Kasten */
[data-dichte="ruhig"] .szene__ikon { border: 0; width: 26px; height: 26px; color: var(--accent); }

/* Stromlauf: die vier Anmerkungen als Spalten mit Oberkante, ohne Raster */
[data-dichte="ruhig"] .einpolig__punkte { background: none; border: 0; gap: clamp(20px, 2.6vw, 44px); }
[data-dichte="ruhig"] .einpolig__punkt { background: none; padding: 18px 0 0; border-top: 1px solid var(--border); }
[data-dichte="ruhig"] .einpolig__ecke { display: none; }

/* Dach: Bild ohne Rahmen, Schritte mit Trennlinie */
[data-dichte="ruhig"] .dach__bild { border: 0; }
[data-dichte="ruhig"] .dach__bild figcaption { border-top: 0; padding: 11px 0 0; }
[data-dichte="ruhig"] .dach__punkte { background: none; border: 0; gap: 0; }
[data-dichte="ruhig"] .dach__punkt { background: none; padding: 22px 0; border-top: 1px solid var(--border); }
[data-dichte="ruhig"] .dach__punkt:first-child { border-top: 0; padding-top: 0; }
[data-dichte="ruhig"] .dach__hinweis { background: none; padding: 18px 0 0 16px; border-top: 1px solid var(--border); }

/* Zählwerk: Anzeige ohne Rahmen, Annahmen als Spalten mit Oberkante */
[data-dichte="ruhig"] .uhr__anzeige { border: 0; padding: 0; }
[data-dichte="ruhig"] .uhr__marke { position: static; padding: 0; margin-bottom: 14px; display: block; background: none; }
[data-dichte="ruhig"] .uhr__param { background: none; border: 0; gap: clamp(18px, 2.4vw, 40px); margin-top: 34px; }
[data-dichte="ruhig"] .uhr__feld { background: none; padding: 16px 0 0; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent); }

/* Schnittstelle: Aufzählung ohne Raster */
[data-dichte="ruhig"] .schnitt__punkte { background: none; border: 0; gap: 0; }
[data-dichte="ruhig"] .schnitt__punkte li { background: none; padding: 14px 0; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent); }
[data-dichte="ruhig"] .schnitt__punkte li:first-child { border-top: 0; }

/* Finanzierung: Module als Liste */
[data-dichte="ruhig"] .finanz__module { background: none; border: 0; gap: 0; }
[data-dichte="ruhig"] .finanz__modul { background: none; padding: 22px 0; border-top: 1px solid var(--border); }
[data-dichte="ruhig"] .finanz__modul:first-child { border-top: 0; padding-top: 0; }

/* Erstgespräch: Karte ohne Rahmen, Themen ohne Chips */
/* Kasten abbauen heisst auch: die Flaeche weg. Ohne background:none blieb
   sie stehen, und der Text klebte an ihrer Kante — als einzige Stelle in
   dieser Dichte, ueberall sonst raeumt die Regel die Flaeche mit ab. */
[data-dichte="ruhig"] .abschluss__karte { border: 0; background: none; padding: 26px 0 0; border-top: 1px solid var(--border); }
[data-dichte="ruhig"] .abschluss__themen li { border: 0; padding: 0; }
[data-dichte="ruhig"] .abschluss__themen { gap: 12px 34px; }

/* Kopfzeilen der Unterseiten: Angaben ohne Chips.
   Ohne Rahmen faellt die Polsterung des Chips weg — das Pfeilchen aus
   [data-skin="8"] stand aber weiter auf dessen Platz (9 px von links,
   9 px breit) und endete damit genau dort, wo der Text beginnt. Hier
   rueckt es an den Anfang, die Luft dahinter ist dieselbe wie im Chip. */
[data-dichte="ruhig"] .seitenkopf__meta li { border: 0; padding: 0 0 0 15px; }
[data-dichte="ruhig"] .seitenkopf__meta li::before { left: 0; }
[data-dichte="ruhig"] .seitenkopf__meta { gap: 8px 26px; }

/* Datenblatt und Stufen: eine Kante genügt */
[data-dichte="ruhig"] .blatt__buehne { background: none; }
[data-dichte="ruhig"] .stufe__buehne { background: none; }

/* Zwei Reste: die Registermarken am Kanal und die Chips unter dem Satz */
[data-dichte="ruhig"] .kanal__ecke { display: none; }
[data-dichte="ruhig"] .zitat__stichworte li { border: 0; padding: 0; }
[data-dichte="ruhig"] .zitat__stichworte { gap: 12px 34px; }


/* ==========================================================================
   14. Fassungen 08 und 09 · die helle Ansicht

   Vorher war die helle Ansicht ein durchgehendes Fastweiss, in das drei
   schwarze Baender geschnitten waren — das Weiss zu grell, die Baender ein
   Bruch mitten im Lesen. Hier wird daraus eine Reihe aus vier warmen Stufen:

     bg       Grundton
     bg-alt   jeder zweite Abschnitt, damit der Wechsel vom Ton kommt
     Band     die frueher schwarzen Abschnitte, jetzt der dunkelste Grund
     Fuss     eine Stufe darunter, als Schlusston

   Nichts davon beruehrt die dunkle Ansicht: der ganze Block haengt an
   [data-modus="hell"]. Inhalte und Aufbau bleiben, wie sie sind.
   ========================================================================== */

/* Der Wechsel: jeder zweite Abschnitt traegt den zweiten Ton. Die Baender
   sind ausgenommen, sie haben ihren eigenen Grund (siehe unten). */
[data-skin="8"][data-modus="hell"] .seite__inhalt > :nth-child(even):not(.sec--dunkel) {
  background: var(--bg-alt);
}

/* Die frueher dunklen Abschnitte. Statt jede Regel darin einzeln zu
   uebersteuern, werden hier die beiden Rollen umdefiniert, auf denen sie
   alle aufbauen: --inverse ist der Grund, --text-inverse die Schrift
   darauf. Damit stimmen Rahmen, Felder, Trennlinien und Schaltflaechen
   ohne weiteres Zutun. */
[data-skin="8"][data-modus="hell"] .sec--dunkel {
  --inverse: #DFD7C6;
  --text-inverse: #1B1915;
  --border: #C9BFA9;
  /* Das helle Blau traegt auf dem Band zu wenig: 4,1:1. Das dunkle hat 5,9:1. */
  --accent-light: var(--primary-dark);
}

/* Die Fusszeile ist der Schlusston, eine Stufe unter dem Band. Nebenbei wird
   damit die Wortmarke dort wieder sichtbar: sie steht in der hellen Ansicht
   in Schwarzblau und ging auf dem schwarzen Grund unter. */
[data-skin="8"][data-modus="hell"] .fuss {
  --inverse: #D8CFBC;
  --text-inverse: #1B1915;
  --accent-light: var(--primary-dark);
}

/* Auf hellem Grund fuehrt das Weiss beim Ueberfahren zu heller Schrift auf
   heller Flaeche. Die Schaltflaeche geht stattdessen ins Markenblau. */
[data-skin="8"][data-modus="hell"] .on-dark .gf-btn--primaer:hover,
[data-skin="8"][data-modus="hell"] .on-dark .gf-btn--primaer.ist-hover {
  --btn-bg: var(--primary);
  --btn-rand: var(--primary);
  --btn-fg: var(--surface-elevated);
}

/* Die Zeichnungen. Ihr Tagesstil ist fuer eine weisse Seite gerechnet: eine
   Umrisslinie dicht am Rahmenton, Koerper fast weiss. Auf warmem Grund
   verschwindet beides. Hier bekommen drei Rollen eigene Werte — die Linie
   traegt wieder, die Koerper bleiben hell, die Grundflaechen bekommen Tiefe.
   Gilt nur in der hellen Ansicht; nachts bleibt alles, wie es war. */
[data-skin="8"][data-modus="hell"] {
  --fx-linie: #857C68;
  --fx-flaeche: #FBF7EF;
  --fx-hell: #D5E0E5;
  --fx-tief: #2C3A40;
  --fx-licht-hell: 1;
}

/* --------------------------------------------------------------------------
   Fassung 09 · noch eine Stufe ruhiger

   Die Startseite ist auf zehn Abschnitte gekuerzt (src/_data/fassungen.js).
   Was hier dazukommt, betrifft die Dichte innerhalb der Abschnitte: eine
   Aussage pro Stelle, und die Zeile darf kurz sein. Die Designsprache bleibt
   unangetastet — Haarlinie, Registermarke, Monospace, eckige Form und das
   kleine Pfeilchen aus dem Zeichen stehen weiter da, wo sie standen.
   -------------------------------------------------------------------------- */

/* Vorgehen auf der Startseite: Nummer und Name. Was in jeder Phase geschieht,
   steht ausfuehrlich auf der Seite "Vorgehen" — zweimal braucht es das nicht.
   Betrifft nur die Startseite, die Unterseite baut auf .stufe statt .phase. */
[data-dichte="ruhig"] .phase__text { display: none; }
[data-dichte="ruhig"] .phase { padding-bottom: 2px; }

/* Einleitungen kurz halten: eine schmale Spalte liest sich ruhiger als eine
   breite, auch wenn derselbe Satz darin steht. */
[data-dichte="ruhig"] .sec__kopf > .gf-text { max-width: 46ch; }
[data-dichte="ruhig"] .sec__kopf { align-items: start; }

/* Die Randnotiz unter dem Dachabschnitt wiederholt den Absatz darueber */
[data-dichte="ruhig"] .dach__hinweis { display: none; }

/* Zwischen den Abschnitten reicht die Luft; die Trennlinie darf weg, solange der
   Tonwechsel sie uebernimmt — also nur in der hellen Ansicht. Nachts ist die
   Haarlinie die einzige Grenze und muss stehen bleiben. */
[data-dichte="ruhig"][data-modus="hell"] .sec { border-bottom: 0; }

/* ==========================================================================
   12. Hero, der von alleine laeuft (Fassungen 10 und 11)

   Die Montage haengt hier nicht mehr am Scrollweg, sondern spielt beim
   Laden einmal ab (data-fx-steuerung "eintritt" in start/hero.njk). Damit
   verliert die lange Klebestrecke ihre Aufgabe: Der Abschnitt ist nur noch
   einen Bildschirm hoch, danach beginnt der Inhalt.
   ========================================================================== */
[data-heroauto] .hero { height: auto; }
[data-heroauto] .hero__klebe { position: relative; height: 100vh; }

/* --------------------------------------------------------------------------
   12b. Die acht Leistungen als Sprungziele im Zeichen

   Gezeichnet werden die Knoten weiter auf der Leinwand. Anklickbar macht
   sie dieser Ring: eine Flaeche je Knoten, die der Effekt an die Stelle
   setzt (--kx/--ky, hero-gfg.js). Das ist mit Tastatur und Vorlesesoftware
   bedienbar — Treffererkennung auf der Leinwand waere es nicht.

   Der Ring spannt denselben Kasten auf wie die Buehne, deshalb gelten die
   Koordinaten des Effekts hier unveraendert.
   -------------------------------------------------------------------------- */
.hero__ring {
  position: absolute; inset: 0; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
  /* visibility, nicht nur opacity: Ein durchsichtiger Verweis bleibt sonst
     im Tabulator-Lauf — acht unsichtbare Sprungziele am Seitenanfang. */
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--kurve, ease), visibility 0s linear 420ms;
}
.hero__ring.ist-da { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Die Flaeche deckt genau das Wort — Lage und Groesse misst der Effekt an
   der gezeichneten Beschriftung (hero-gfg.js). Sichtbar wird das Ueberfahren
   am Wort selbst: es waechst. Ein Rahmen drumherum waere lauter als noetig. */
.hero__ringpunkt {
  position: absolute; left: 0; top: 0;
  width: var(--kw, 0px); height: var(--kh, 0px);
  transform: translate(var(--kx, -9999px), var(--ky, -9999px));
}
.hero__ringpunkt a {
  display: block; width: 100%; height: 100%;
  pointer-events: auto; cursor: pointer;
}
/* Mit der Tastatur fehlt der Zeiger — hier braucht es eine sichtbare Marke.
   Das Wort waechst dabei genauso, dafuer sorgt :focus-visible im Effekt. */
.hero__ringpunkt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Ohne Skript bleibt der Ring aus: die Flaechen laegen sonst uebereinander
   in der Ecke. Die Leistungen stehen dann im Menue und im Themenband. */
html:not(.js) .hero__ring { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__ring { transition: none; }
}

/* --------------------------------------------------------------------------
   15. Dichte "mittel" (Fassung 12)

   Der volle Umfang der Fassung 10 — aber ohne die Schlagwortkästchen, die
   unter den Textblöcken stehen. Der Kunde dazu: Kästen sind in Ordnung, die
   kleinen Chip-Reihen darunter sind zu viel.

   Es wird nur ausgeblendet, nicht umgebaut: alles andere bleibt, wie es in
   der 10 steht. Die ruhige Dichte der Fassungen 09 und 11 bleibt davon
   unberührt, die nimmt weiterhin deutlich mehr weg.
   -------------------------------------------------------------------------- */

/* Die drei Perspektiven (Technik, Wirtschaft, Organisation) */
[data-dichte="mittel"] .perspektive__details { display: none; }

/* Die vier Bausteine — dieselbe Reihe, dieselbe Wirkung */
[data-dichte="mittel"] .szene__param { display: none; }
[data-dichte="mittel"] .szene__text { margin-bottom: 0; }