/* =====================================================================
   DER ZWISCHENSTAND — Gestalt „Rennen" (zwischenstand.js).

   Nur Rollen: --acc die Bühne (Spitze, Spur), --acc2 die Tiefe (Rang,
   Rahmen), --jetzt was sich gerade ändert (Zuwachs der Runde, ▲, Fahne),
   --du das eigene Ich — genau einmal je Schirm. Kein --ok/--bad: Ein
   Platzverlust ist kein Fehler, er ist ein Rennverlauf.
   Maße in cqmin gegen die Bühnenhöhe, Schrift nie unter 9 px. Bewegt
   werden nur transform und opacity, mit den Tokens (--d-*, --k-*); unter
   reduzierter Bewegung stehen die Dauern auf 1 ms und alle Verzögerungen
   auf null — der Schirm zeigt sofort den Endzustand.

   Diese Datei liegt in KEINER Ebene (wie qn.css): spiel.css steht in
   @layer dokument und könnte hier nichts überstimmen.
   ===================================================================== */
.zw { --zgap: 1.1cqmin; --zw-s: 1; --k: 1; }
/* Der Fernseher wird aus drei Metern gelesen: die tragenden Größen eine Stufe größer. */
.zw.zw-oeffentlich { --zw-s: 1.12; }

/* Der Kopf ist der gemeinsame (qn.css) — auf der kleinen Bühne fielen die
   Runde und „weiter in" unter 9 px. Nur hier angehoben. */
.zw .qn-kopf-runde { font-size: max(9px, 2.1cqmin); }
.zw .qn-weiterwort { font-size: max(9px, 1.85cqmin); }
.zw .qn-marke { font-size: max(9.5px, 2.3cqmin); }

.zw-leib {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.5cqmin; padding: .2cqmin 3.4cqmin 1.3cqmin; min-height: 0; min-width: 0;
}

/* ---------- Die Schlagzeile: zwei Zustände in einer Zelle ---------- */
.zw-schlag { display: flex; align-items: center; gap: 3cqmin; min-width: 0; }
.zw-kopfzeilen { display: grid; row-gap: .5cqmin; min-width: 0; flex: 1 1 auto; }
.zw-ober, .zw-titel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.zw-ober > span, .zw-titel > span {
  grid-area: 1 / 1; min-width: 0;
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-ein);
}
.zw-ober {
  font-size: max(9px, calc(2.2cqmin * var(--zw-s))); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); line-height: 1.2;
}
.zw-titel {
  font-family: var(--f-display); font-weight: 800; font-size: calc(5.4cqmin * var(--zw-s)); line-height: 1.06;
  letter-spacing: -.02em; color: var(--t0);
}
.zw-titel > span { white-space: nowrap; }
.zw-titel > span.zwei { white-space: normal; }
.zw-ober .b, .zw-titel .b { opacity: 0; transform: translateY(55%); }
.zw-nach .zw-ober .a, .zw-nach .zw-titel .a { opacity: 0; transform: translateY(-55%); }
.zw-nach .zw-ober .b, .zw-nach .zw-titel .b { opacity: 1; transform: none; }
.zw-kopfzeilen { opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); }
.zw-s1 .zw-kopfzeilen { opacity: 1; }

/* „noch 3 Runden" — was aussteht, rechts neben der Schlagzeile. */
.zw-noch {
  flex: none; display: flex; align-items: baseline; gap: 1.1cqmin; padding: 1.1cqmin 2.4cqmin; border-radius: 2.2cqmin;
  background: color-mix(in srgb, var(--acc2) 15%, transparent);
  box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--acc2) 48%, transparent);
  opacity: 0; transform: translateX(3cqmin);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-s1 .zw-noch { opacity: 1; transform: none; }
.zw-noch span { font-size: max(9px, calc(2.2cqmin * var(--zw-s))); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t1); }
.zw-noch b { font-family: var(--f-display); font-weight: 900; font-size: calc(6.2cqmin * var(--zw-s)); line-height: .9; color: var(--t0); letter-spacing: -.02em; }
.zw-weiter .zw-noch b { display: inline-block; animation: qn-schnapp var(--d-lang) var(--k-schnapp) 1 both; }

/* ---------- Das Hauptfeld ---------- */
.zw-haupt { display: grid; grid-template-columns: minmax(0, 1fr) 30cqw; gap: 2.4cqmin; min-height: 0; min-width: 0; }
.zw-m-band .zw-haupt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.zw-feld { position: relative; display: flex; flex-direction: column; gap: var(--zgap); min-height: 0; min-width: 0; }

/* Die Bahn einer Person: Rang · Name · Strecke mit Figur · Zahlen. Die
   Höhe teilen sich alle Bahnen — das Feld füllt die Wand. */
.zw-zeile {
  --fgr: clamp(4.2cqmin, calc(54cqmin / var(--zeilen)), 17cqmin);
  --wer-b: 24cqmin;
  flex: none; height: calc((100% - (var(--zeilen) - 1) * var(--zgap)) / var(--zeilen));
  position: relative; display: grid; align-items: center;
  grid-template-columns: 6.4cqmin minmax(0, var(--wer-b)) minmax(0, 1fr) auto;
  column-gap: 2cqmin; padding: 0 2.4cqmin 0 1.2cqmin; border-radius: 2cqmin; min-height: 0;
  background: color-mix(in srgb, var(--g2) 82%, transparent);
  box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 7%, transparent);
  opacity: 0; transform: translateX(-3cqmin);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
  transition-delay: calc(var(--v, 0) * var(--k) * 1ms);
}
.zw-s1 .zw-zeile { opacity: 1; transform: none; }
.zw-m-gross .zw-zeile { --wer-b: 32cqmin; --fgr: clamp(10cqmin, calc(62cqmin / var(--zeilen)), 23cqmin); }
.zw-m-gross .zw-form i { width: max(7px, 2.4cqmin); height: max(7px, 2.4cqmin); border-radius: .6cqmin; }
.zw-m-gross .zw-form { gap: .9cqmin; }
.zw-spitze .zw-zeile { --wer-b: 19cqmin; --fgr: 11cqmin; }
/* Wer vorn liegt, trägt die Farbe der Bühne — erst NACH dem Tausch, vorher
   ist noch nicht entschieden, wer das ist. */
.zw-nach .zw-zeile.vorn {
  background: color-mix(in srgb, var(--acc) 13%, var(--g2));
  box-shadow: inset .6cqmin 0 0 var(--acc), inset 0 0 0 .18cqmin color-mix(in srgb, var(--acc) 38%, transparent);
}
.zw-zeile.du {
  background: color-mix(in srgb, var(--du) 11%, var(--g2));
  box-shadow: inset 0 0 0 .3cqmin var(--du);
}
.zw-nach .zw-zeile.vorn.du { box-shadow: inset .6cqmin 0 0 var(--acc), inset 0 0 0 .3cqmin var(--du); }
/* Wer überholt, leuchtet beim Vorbeiziehen kurz auf und fährt ÜBER den anderen. */
.zw-zeile.zieht, .zw-bzeile.zieht { z-index: 3; }
.zw-zeile.faellt, .zw-bzeile.faellt { z-index: 1; }
.zw-zeile.zieht::after, .zw-bzeile.zieht::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 .3cqmin var(--jetzt), 0 0 2.6cqmin color-mix(in srgb, var(--jetzt) 55%, transparent);
  opacity: 0; animation: zw-glueht calc(var(--d-xl) * 2.2) var(--k-ein) 1 both;
}
@keyframes zw-glueht { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* Der Rang: der alte kippt weg, der neue kommt — darunter der Sprung. */
.zw-rang { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; min-width: 0; }
.zw-rang > b {
  grid-area: 1 / 1; font-family: var(--f-display); font-weight: 900; line-height: 1; color: var(--t1);
  font-size: calc(clamp(3cqmin, calc(20cqmin / var(--zeilen)), 5.6cqmin) * var(--zw-s));
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-r-neu { opacity: 0; transform: translateY(60%) scale(.8); }
.zw-nach .zw-r-alt { opacity: 0; transform: translateY(-60%) scale(.8); }
.zw-nach .zw-r-neu { opacity: 1; transform: none; }
.zw-nach .vorn .zw-r-neu { color: var(--acc); }
.zw-sprung {
  grid-row: 2; font-style: normal; font-family: var(--f-mono); font-weight: 800; line-height: 1.1; white-space: nowrap;
  font-size: max(9px, calc(1.9cqmin * var(--zw-s))); color: var(--t2);
  opacity: 0; transform: scale(.5);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-sprung.hoch { color: var(--jetzt); }
.zw-nach .zw-sprung { opacity: 1; transform: none; transition-delay: calc(var(--d-xl) * .8); }

/* Name und Kurzzeile */
.zw-wer { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: .45cqmin; min-width: 0; }
.zw-name {
  font-family: var(--f-display); font-weight: 800; line-height: 1.08; color: var(--t0);
  font-size: calc(clamp(3.2cqmin, calc(26cqmin / var(--zeilen)), 6.4cqmin) * var(--zw-s));
  white-space: nowrap; min-width: 0;
}
.zw-name.zwei { white-space: normal; overflow-wrap: normal; word-break: normal; }
/* Letzter Ausweg: eine Zeile mit Ellipse — nie mitten im Wort gebrochen (Namen-Regel, qn.css). */
.zw-name.hart { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-unter { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; }
.zw-unter > * { grid-area: 1 / 1; }
.zw-form { display: flex; gap: .6cqmin; align-items: center; transition: opacity var(--d-mittel) var(--k-ein); }
.zw-form i {
  position: relative; flex: none; width: max(6px, 1.7cqmin); height: max(6px, 1.7cqmin); border-radius: .45cqmin;
  box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 28%, transparent);
}
.zw-form i::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--acc2);
  opacity: 0; transform: scale(.3);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
  transition-delay: calc(var(--v, 0) * var(--k) * 1ms);
}
.zw-lauf .zw-form i.f2::after { opacity: 1; transform: none; }
.zw-lauf .zw-form i.f1::after { opacity: .42; transform: none; }
.zw-form.zahl { font-family: var(--f-mono); font-size: max(9px, 2.2cqmin); color: var(--t1); }
.zw-tag {
  font-size: max(9px, calc(2.2cqmin * var(--zw-s))); font-weight: 700; line-height: 1.2; color: var(--t1); white-space: nowrap; min-width: 0;
  opacity: 0; transform: translateY(45%);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-tag b { font-family: var(--f-mono); color: var(--t0); font-weight: 800; }
.zw-tag i { font-style: normal; margin-right: .35em; }
.zw-tag.hoch { color: var(--jetzt); }
.zw-tag.vorn { color: var(--acc); }
.zw-tag.vorn b { color: var(--acc); }
.zw-tag.du { color: var(--t0); }
.zw-tag.du b { color: var(--du); }
.zw-tag.zwei { white-space: normal; }
.zw-moment .zw-tag { opacity: 1; transform: none; }
.zw-moment .zw-unter:has(.zw-tag) .zw-form { opacity: 0; }

/* ---------- Die Strecke ---------- */
.zw-bahn { position: relative; height: 100%; min-width: 0; }
.zw-spur, .zw-zuwachs {
  position: absolute; left: 0; top: 50%; height: max(3px, 1.1cqmin); width: calc(100% - var(--fgr) / 2);
  transform-origin: left center; border-radius: .6cqmin;
}
.zw-spur {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 12%, transparent), color-mix(in srgb, var(--acc) 58%, transparent));
  transform: translateY(-50%) scaleX(var(--pv));
}
/* Die Spur DIESER Runde: Sie wächst mit der Figur und bleibt stehen — man
   sieht nachher noch, wer in dieser Runde wie weit gefahren ist. */
.zw-zuwachs {
  background: var(--jetzt);
  box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--jetzt) 55%, transparent);
  transform: translateY(-50%) translateX(calc(var(--pv) * 100%)) scaleX(.0001);
  transition: transform calc(var(--d-xl) * 1.3) var(--k-ein);
}
.zw-lauf .zw-zuwachs { transform: translateY(-50%) translateX(calc(var(--pv) * 100%)) scaleX(var(--dp)); }
/* Die Spitzenlinie am Ende der Strecke — mit dem Motiv des Sets. */
.zw-linie {
  position: absolute; right: 0; top: 14%; bottom: 14%; width: .6cqmin; border-radius: .3cqmin;
  background: color-mix(in srgb, var(--acc) 38%, transparent);
}
[data-motiv="karo"] .zw-linie {
  width: 1.6cqmin; border-radius: 0;
  background: repeating-conic-gradient(color-mix(in srgb, var(--t0) 72%, transparent) 0 25%, color-mix(in srgb, var(--g0) 70%, transparent) 0 50%) 0 0 / .8cqmin .8cqmin;
}
[data-motiv="tempo"] .zw-linie { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--acc) 60%, transparent) 0 .8cqmin, transparent .8cqmin 1.4cqmin); }
[data-motiv="raster"] .zw-linie { background: radial-gradient(circle, color-mix(in srgb, var(--t0) 55%, transparent) 0 .25cqmin, transparent .3cqmin) 0 0 / .6cqmin .9cqmin; }
/* Pixel (Gaming): eine Säule aus Klötzchen mit Fuge — die Ziellinie eines Levels. */
[data-motiv="pixel"] .zw-linie {
  width: 1.2cqmin; border-radius: 0;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--acc2) 85%, transparent) 0 .9cqmin, transparent .9cqmin 1.3cqmin);
}
/* Gaming (Motiv pixel): die Tafel als Highscore-Liste eines Automaten —
   Ränge und Punkte in Monoschrift mit hartem Schatten, eckige Zeilen, die
   Strecke als Pixelbalken, der Führende trägt statt der Fahne ein Extraleben
   (das Pixelherz der Uhr). */
[data-motiv="pixel"] .zw-zeile { border-radius: 0; }
[data-motiv="pixel"] .zw-rang > b { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.04em; }
[data-motiv="pixel"] .zw-pkt { text-shadow: .35cqmin .35cqmin 0 color-mix(in srgb, var(--acc2) 70%, transparent); }
[data-motiv="pixel"] .zw-spur, [data-motiv="pixel"] .zw-zuwachs { border-radius: 0; }
[data-motiv="pixel"] .zw-spur {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 62%, transparent) 0 1.1cqmin, transparent 1.1cqmin 1.5cqmin);
}
[data-motiv="pixel"] .zw-runde { border-radius: 0; }
[data-motiv="pixel"] .zw-fahne { background: var(--jetzt); width: calc(var(--fgr) * .42); height: calc(var(--fgr) * .36);
  clip-path: polygon(14.29% 0, 42.86% 0, 42.86% 16.67%, 57.14% 16.67%, 57.14% 0, 85.71% 0, 85.71% 16.67%, 100% 16.67%, 100% 50%,
    85.71% 50%, 85.71% 66.67%, 71.43% 66.67%, 71.43% 83.33%, 57.14% 83.33%, 57.14% 100%, 42.86% 100%, 42.86% 83.33%,
    28.57% 83.33%, 28.57% 66.67%, 14.29% 66.67%, 14.29% 50%, 0 50%, 0 16.67%, 14.29% 16.67%); }
[data-motiv="pixel"] .zw-fahne svg { display: none; }
/* Kino (Motiv filmstreifen): die Tafel als Stück Film. Hinter jeder Strecke
   liegt ein Filmstreifen mit Lochreihen (er steht still — die Strecke selbst
   wird skaliert, Löcher darin würden verzerrt), was schon gefahren ist, ist
   belichtet (Orange), der Zuwachs dieser Runde das helle Bild davor. Die
   Spitzenlinie ist das Bildfenster: zwei Kerben oben und unten. Wer führt,
   trägt statt der Fahne eine kleine Filmklappe. */
[data-motiv="filmstreifen"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(11px, 3.4cqmin); transform: translateY(-50%); border-radius: .5cqmin;
  background:
    linear-gradient(90deg, transparent 0 26%, color-mix(in srgb, var(--t0) 26%, transparent) 26% 74%, transparent 74%) 0 max(1.5px, .42cqmin) / max(6px, 1.9cqmin) max(1.5px, .5cqmin) repeat-x,
    linear-gradient(90deg, transparent 0 26%, color-mix(in srgb, var(--t0) 26%, transparent) 26% 74%, transparent 74%) 0 calc(100% - max(1.5px, .42cqmin)) / max(6px, 1.9cqmin) max(1.5px, .5cqmin) repeat-x,
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 10%, var(--g0)), var(--g0));
  box-shadow: inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 9%, transparent);
  opacity: .78;
}
[data-motiv="filmstreifen"] .zw-spur, [data-motiv="filmstreifen"] .zw-zuwachs { border-radius: .2cqmin; height: max(4px, 1.3cqmin); }
/* Die Tafel im Kleid des Sets, nicht der Marke (Prüfung: pinke Balken, violette Karte): „Jetzt" ist im
   Stand des Kinos das Orange des Projektors — hier gibt es kein Urteil, mit dem es sich beißen könnte.
   Was gefahren ist, ist belichteter Film (Petrol); der Zuwachs der Runde ist das frische, helle Bild
   davor (Orange nach Hell); die erste Geschichte trägt die Farbe der Leinwand. */
[data-motiv="filmstreifen"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); }
[data-motiv="filmstreifen"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--acc2) 26%, transparent), color-mix(in srgb, var(--acc2) 88%, transparent)); }
[data-motiv="filmstreifen"] .zw-zuwachs {
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--t0) 64%, var(--acc)));
  box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--acc) 55%, transparent);
}
/* data-rolle statt [style*=…] (Leistung, 2026-10-07) */
[data-motiv="filmstreifen"] .zw-g[data-rolle="jetzt"] { --fr: color-mix(in srgb, var(--t0) 78%, var(--acc)) !important; }
[data-motiv="filmstreifen"] .zw-linie {
  width: 1cqmin; border-radius: .2cqmin; top: 10%; bottom: 10%;
  background: linear-gradient(180deg, var(--acc2) 0 16%, color-mix(in srgb, var(--acc2) 30%, transparent) 16% 84%, var(--acc2) 84%);
}
[data-motiv="filmstreifen"] .zw-fahne {
  width: calc(var(--fgr) * .46); height: calc(var(--fgr) * .38); border-radius: .3cqmin;
  background:
    repeating-linear-gradient(-58deg, var(--t0) 0 calc(var(--fgr) * .07), var(--g0) calc(var(--fgr) * .07) calc(var(--fgr) * .14)) 0 0 / 100% 34% no-repeat,
    linear-gradient(180deg, transparent 0 34%, var(--acc) 34% 42%, color-mix(in srgb, var(--g0) 92%, var(--acc)) 42%);
  box-shadow: 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 40%, transparent);
}
[data-motiv="filmstreifen"] .zw-fahne svg { display: none; }
/* Musik (Motiv tasten): die Tafel als Mischpult. Jede Zeile ist ein Kanalzug, die Strecke seine Fader-Schiene
   (eine dunkle Rille mit Rastermarken darüber und darunter), was schon gefahren ist, leuchtet als Pegelkette aus
   LEDs in Lime, der Zuwachs dieser Runde als die LEDs davor in Lime-Weiß, am Ende der Kette sitzt die Kappe des
   Faders. (Prüfung 18.10.: der Zuwachs „+583" stand in Magenta bei 2,6 : 1, und ohne Kappe und Raster las sich die
   Kette als LED-Leiste, nicht als Fader.) Die LED-Fugen liegen als stehende Schicht ÜBER den Balken (die Balken
   werden skaliert — Fugen darin würden verzerrt). Die Spitzenlinie ist die oberste LED (Magenta, „Anschlag");
   wer führt, hat statt der Fahne seine Solo-Taste an. „Jetzt" ist hier Lime-Weiß, nicht das Pink der Marke. */
[data-motiv="tasten"] .zw { --jetzt: color-mix(in srgb, var(--acc) 48%, #fff); --auf-jetzt: var(--g0); }
[data-motiv="tasten"] .zw-zeile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 74%, transparent), color-mix(in srgb, var(--g1) 92%, transparent));
  box-shadow: inset 0 .18cqmin 0 color-mix(in srgb, var(--t0) 10%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--t0) 6%, transparent);
}
[data-motiv="tasten"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(18px, 5.4cqmin); transform: translateY(-50%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--t0) 46%, transparent) 0 max(1px, .16cqmin), transparent max(1px, .16cqmin)) 0 0 / 10% 22% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--t0) 46%, transparent) 0 max(1px, .16cqmin), transparent max(1px, .16cqmin)) 0 100% / 10% 22% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--t0) 24%, transparent) 0 max(1px, .12cqmin), transparent max(1px, .12cqmin)) 5% 0 / 10% 12% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--t0) 24%, transparent) 0 max(1px, .12cqmin), transparent max(1px, .12cqmin)) 5% 100% / 10% 12% repeat-x,
    linear-gradient(180deg, #000 0, var(--g0) 30%, color-mix(in srgb, var(--g1) 70%, var(--g0)) 100%) 0 50% / 100% 44% no-repeat;
}
[data-motiv="tasten"] .zw-spur, [data-motiv="tasten"] .zw-zuwachs { height: max(5px, 1.5cqmin); border-radius: .2cqmin; }
[data-motiv="tasten"] .zw-spur {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, var(--g0)), var(--acc));
  box-shadow: 0 0 1.2cqmin color-mix(in srgb, var(--acc) 40%, transparent);
}
[data-motiv="tasten"] .zw-zuwachs {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 62%, #fff), color-mix(in srgb, var(--acc) 30%, #fff));
  box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--acc) 60%, transparent);
}
/* Die Fugen der LEDs: eine stehende Schicht über den Balken, in der Farbe der Rille. */
[data-motiv="tasten"] .zw-bahn::after {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(6px, 1.7cqmin); transform: translateY(-50%); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 max(5px, 1.3cqmin), var(--g0) max(5px, 1.3cqmin) max(7px, 1.75cqmin));
}
[data-motiv="tasten"] .zw-linie {
  width: 1.2cqmin; border-radius: .3cqmin; top: 22%; bottom: 22%;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 34%, var(--acc2)), var(--acc2));
  box-shadow: 0 0 1.6cqmin color-mix(in srgb, var(--acc2) 70%, transparent);
}
/* Die Kappe des Faders am Ende der Kette, vor der Figur (sie fährt mit dem Schlitten): Rillen, der Strich in Lime. */
[data-motiv="tasten"] .zw-schlitten::before {
  content: ''; position: absolute; top: 50%; left: calc(var(--fgr) * -.5 - max(5px, 1.1cqmin)); width: max(9px, 2cqmin); height: max(24px, 6.6cqmin);
  transform: translate(-50%, -50%); border-radius: .45cqmin;
  background:
    linear-gradient(180deg, transparent 0 calc(50% - max(1px, .2cqmin)), var(--acc) calc(50% - max(1px, .2cqmin)) calc(50% + max(1px, .2cqmin)), transparent calc(50% + max(1px, .2cqmin))),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--t0) 30%, transparent) 0 max(1px, .14cqmin), transparent max(1px, .14cqmin) .75cqmin),
    linear-gradient(90deg, #3a3a42, #77777f 46%, #4a4a52 60%, #2a2a30);
  box-shadow: 0 .4cqmin 1cqmin rgba(0, 0, 0, .65), inset 0 0 0 max(1px, .12cqmin) rgba(0, 0, 0, .55);
}
[data-motiv="tasten"] .zw-fahne {
  width: calc(var(--fgr) * .34); height: calc(var(--fgr) * .3); border-radius: .5cqmin;
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, #fff 55%, var(--acc)), var(--acc) 52%, color-mix(in srgb, var(--acc) 70%, var(--g0)));
  box-shadow: 0 0 1.8cqmin var(--acc), 0 0 0 max(1px, .18cqmin) var(--g0);
}
[data-motiv="tasten"] .zw-fahne svg { display: none; }
[data-motiv="tasten"] .zw-rang > b { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.04em; }
/* Weltreise (Motiv luftpost): die Tafel als Flugkarte. Hinter jeder Strecke liegt die gestrichelte Route
   (sie steht still — die Strecke selbst wird skaliert, Striche darin würden verzerrt); was schon geflogen
   ist, ist Azur, der Zuwachs dieser Runde der Kondensstreifen davor (Koralle, nach vorn weiß), und hinter
   jeder Figur, die Punkte holt, zieht er als Schweif. Die Spitzenlinie ist eine Stecknadel (Nadel und
   korallener Kopf). Wer führt, trägt statt der Fahne einen kleinen Flieger. Die Figuren bleiben die
   Figuren der Runde — als Flieger verlöre man, wer wer ist. */
[data-motiv="luftpost"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(2px, .45cqmin); transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--t0) 36%, transparent) 0 1.4cqmin, transparent 1.4cqmin 2.4cqmin);
}
[data-motiv="luftpost"] .zw { --jetzt: var(--acc2); --auf-jetzt: var(--auf-acc2); }
[data-motiv="luftpost"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 20%, transparent), color-mix(in srgb, var(--acc) 86%, transparent)); }
[data-motiv="luftpost"] .zw-zuwachs {
  background: linear-gradient(90deg, var(--acc2), color-mix(in srgb, #fff 72%, var(--acc2)));
  box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--acc2) 50%, transparent);
}
[data-motiv="luftpost"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 70%, transparent)); height: 14%; top: 43%; }
[data-motiv="luftpost"] .zw-linie {
  width: .4cqmin; top: 30%; bottom: 10%; border-radius: 0 0 .3cqmin .3cqmin;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t0) 88%, transparent), color-mix(in srgb, var(--t0) 46%, var(--g3)));
}
[data-motiv="luftpost"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -1.3cqmin; width: 2.6cqmin; height: 2.6cqmin; margin-left: -1.3cqmin; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 70%, var(--acc2)) 0 12%, var(--acc2) 44%, color-mix(in srgb, var(--acc2) 70%, var(--g0)) 100%);
  box-shadow: 0 .3cqmin .6cqmin color-mix(in srgb, #000 45%, transparent);
}
[data-motiv="luftpost"] .zw-fahne {
  width: calc(var(--fgr) * .48); height: calc(var(--fgr) * .48); background: var(--t0);
  clip-path: polygon(100% 50%, 94% 56%, 62% 57%, 38% 98%, 30% 98%, 42% 57%, 16% 56%, 6% 68%, 0 68%, 5% 50%, 0 32%, 6% 32%, 16% 44%, 42% 43%, 30% 2%, 38% 2%, 62% 43%, 94% 44%);
}
[data-motiv="luftpost"] .zw-fahne svg { display: none; }
/* Anime (Motiv blueten): die Tafel als Weg über die Festwiese. Hinter jeder Strecke liegt ein Bambusrohr
   mit Knoten (es steht still — die Strecke selbst wird skaliert), was schon gefahren ist, ist ein rosa Band
   aus Blüten, der Zuwachs dieser Runde das helle Rosa davor. Die Spitzenlinie ist ein Bündel Fokuslinien wie
   im Manga. Wer führt, trägt statt der Fahne das Stirnband des Sets (Rosa mit einer kleinen weißen Blüte,
   ohne Schriftzeichen — wie der Buddy, quizbuddy/feld.js). „Jetzt" ist hier das Rosa der Bühne. */
[data-motiv="blueten"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(8px, 2.4cqmin); transform: translateY(-50%); border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12.6cqmin, color-mix(in srgb, var(--acc2) 34%, var(--g0)) 12.6cqmin 13cqmin, color-mix(in srgb, var(--acc2) 62%, #fff) 13cqmin 13.4cqmin, transparent 13.4cqmin 14cqmin),
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 46%, var(--g0)), color-mix(in srgb, var(--acc2) 24%, var(--g0)));
  opacity: .72;
}
[data-motiv="blueten"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); }
[data-motiv="blueten"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 18%, transparent), color-mix(in srgb, var(--acc) 66%, transparent)); }
[data-motiv="blueten"] .zw-zuwachs {
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, #fff 55%, var(--acc)));
  box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--acc) 55%, transparent);
}
[data-motiv="blueten"] .zw-g[data-rolle="jetzt"] { --fr: color-mix(in srgb, var(--t0) 70%, var(--acc)) !important; }
[data-motiv="blueten"] .zw-linie {
  width: 1.4cqmin; border-radius: 0; top: 8%; bottom: 8%;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--t0) 62%, transparent) 0 .22cqmin, transparent .22cqmin .8cqmin);
}
[data-motiv="blueten"] .zw-fahne {
  width: calc(var(--fgr) * .54); height: calc(var(--fgr) * .2); border-radius: 99px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 16%, color-mix(in srgb, var(--acc) 30%, #fff) 18% 26%, transparent 29%) center / calc(var(--fgr) * .2) 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 76%, #fff), var(--acc) 55%, color-mix(in srgb, var(--acc) 78%, var(--g0)));
  box-shadow: 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--g0) 50%, transparent);
}
[data-motiv="blueten"] .zw-fahne svg { display: none; }
/* Küche (Motiv fliesen): die Tafel als Pass. Jede Zeile ist ein Stück Stahltheke (kein umgefärbtes Rot), und jede
   Strecke ist ein BON: ein heller Streifen Thermopapier mit gerissener Zackenkante, der am Anfang von seiner Rolle
   kommt (Prüfbefund 18.10.: „Papierstreifen und Rolle nicht zu erkennen"). Papier und Rolle stehen still (die Strecke
   selbst wird skaliert, Zacken darin würden verzerrt). Was schon gefahren ist, steht darauf gedruckt (dunkle Tinte),
   der Zuwachs dieser Runde ist Basilikum. Die Spitzenlinie ist der Bonspieß aus Stahl mit einer Tomate obenauf; wer
   führt, trägt statt der Fahne die Kochmütze. „Jetzt" ist hier Basilikum. Variablen tragen das Motiv im Namen. */
[data-motiv="fliesen"] .zw { --jetzt: var(--acc2); --auf-jetzt: var(--auf-acc2); --zw-ku-stahl: color-mix(in srgb, var(--t0) 52%, #6f7680); --zw-ku-papier: #f7f2e8; --zw-ku-tinte: #2a251f; }
[data-motiv="fliesen"] .zw-zeile, [data-motiv="fliesen"] .zw-bzeile, [data-motiv="fliesen"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #8a9099 30%, #17140f) 0, color-mix(in srgb, #8a9099 16%, #100e0b) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 16%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, #fff 7%, transparent);
}
[data-motiv="fliesen"] .zw-bahn::before {
  content: ''; position: absolute; left: 1.2cqmin; right: calc(var(--fgr) / 2); top: 50%; height: max(10px, 3cqmin); transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--zw-ku-tinte) 12%, transparent) 0 .8cqmin, transparent .8cqmin 1.5cqmin) 0 18% / 100% max(1px, .14cqmin) no-repeat,
    linear-gradient(180deg, color-mix(in srgb, #fff 40%, var(--zw-ku-papier)), var(--zw-ku-papier) 55%, color-mix(in srgb, var(--zw-ku-papier) 88%, #b9a98c));
  box-shadow: inset 0 max(1px, .3cqmin) 0 color-mix(in srgb, var(--acc) 80%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .55cqmin), 97.5% 100%, 95% calc(100% - .55cqmin), 92.5% 100%, 90% calc(100% - .55cqmin), 87.5% 100%, 85% calc(100% - .55cqmin), 82.5% 100%, 80% calc(100% - .55cqmin), 77.5% 100%, 75% calc(100% - .55cqmin), 72.5% 100%, 70% calc(100% - .55cqmin), 67.5% 100%, 65% calc(100% - .55cqmin), 62.5% 100%, 60% calc(100% - .55cqmin), 57.5% 100%, 55% calc(100% - .55cqmin), 52.5% 100%, 50% calc(100% - .55cqmin), 47.5% 100%, 45% calc(100% - .55cqmin), 42.5% 100%, 40% calc(100% - .55cqmin), 37.5% 100%, 35% calc(100% - .55cqmin), 32.5% 100%, 30% calc(100% - .55cqmin), 27.5% 100%, 25% calc(100% - .55cqmin), 22.5% 100%, 20% calc(100% - .55cqmin), 17.5% 100%, 15% calc(100% - .55cqmin), 12.5% 100%, 10% calc(100% - .55cqmin), 7.5% 100%, 5% calc(100% - .55cqmin), 2.5% 100%, 0 calc(100% - .55cqmin));
  filter: drop-shadow(0 .4cqmin .7cqmin color-mix(in srgb, #000 60%, transparent));
}
/* Die Rolle am Anfang: ein Zylinder Thermopapier auf seinem Stahlstift, von dem der Bon abläuft. */
[data-motiv="fliesen"] .zw-bahn::after {
  content: ''; position: absolute; left: -.6cqmin; top: 50%; width: max(9px, 2.6cqmin); height: max(14px, 4.4cqmin); transform: translateY(-50%); border-radius: .8cqmin;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--zw-ku-stahl) 40%, #000) 0 .45cqmin, transparent .55cqmin) 50% 50% / 100% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--zw-ku-papier) 70%, #8f8270) 0, #fff 34%, var(--zw-ku-papier) 58%, color-mix(in srgb, var(--zw-ku-papier) 72%, #7d705e) 100%);
  box-shadow: 0 .3cqmin .8cqmin color-mix(in srgb, #000 60%, transparent), inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, #7d705e 60%, transparent);
}
[data-motiv="fliesen"] .zw-spur, [data-motiv="fliesen"] .zw-zuwachs { left: 1.2cqmin; width: calc(100% - var(--fgr) / 2 - 1.2cqmin); height: max(4px, 1.15cqmin); border-radius: .1cqmin; }
[data-motiv="fliesen"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--zw-ku-tinte) 55%, transparent), var(--zw-ku-tinte)); box-shadow: none; }
[data-motiv="fliesen"] .zw-zuwachs {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc2) 82%, #1a2a08), var(--acc2));
  box-shadow: 0 0 1cqmin color-mix(in srgb, var(--acc2) 45%, transparent);
}
[data-motiv="fliesen"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc2) 55%, transparent)); }
[data-motiv="fliesen"] .zw-linie {
  width: .5cqmin; top: 24%; bottom: 8%; border-radius: 0 0 .3cqmin .3cqmin;
  background: linear-gradient(90deg, color-mix(in srgb, #fff 70%, var(--zw-ku-stahl)), color-mix(in srgb, var(--zw-ku-stahl) 50%, #000));
}
[data-motiv="fliesen"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -1.4cqmin; width: 2.6cqmin; height: 2.4cqmin; margin-left: -1.3cqmin; border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 60%, var(--acc)) 0 12%, var(--acc) 46%, color-mix(in srgb, var(--acc) 64%, #3a0702) 100%);
  box-shadow: 0 .3cqmin .6cqmin color-mix(in srgb, #000 45%, transparent);
}
[data-motiv="fliesen"] .zw-linie::after {
  content: ''; position: absolute; left: 50%; top: -1.9cqmin; width: 1.4cqmin; height: .8cqmin; margin-left: -.7cqmin; border-radius: 50% 50% 0 0;
  background: var(--acc2);
}
[data-motiv="fliesen"] .zw-fahne {
  width: calc(var(--fgr) * .5); height: calc(var(--fgr) * .44);
  background:
    radial-gradient(circle at 28% 44%, #fff 0 24%, transparent 25%),
    radial-gradient(circle at 50% 30%, #fff 0 30%, transparent 31%),
    radial-gradient(circle at 72% 44%, #fff 0 24%, transparent 25%),
    linear-gradient(180deg, transparent 0 56%, #f3eee4 56% 76%, var(--acc) 76% 82%, #e7e0d2 82% 96%, transparent 96%) 50% 0 / 76% 100% no-repeat;
}
[data-motiv="fliesen"] .zw-fahne svg { display: none; }
/* Sagenwelt (Motiv schuppen): die Tafel als Sagenkarte. Jede Zeile ist dunkles Leder, jede Strecke ein Streifen
   Pergament mit dem Weg der Reise: gestrichelt, so weit er noch vor allen liegt (steht still — die Strecke selbst wird
   skaliert, Striche darin würden verzerrt). Was gereist ist, zieht sich als Linie in Purpur-Tinte darüber, der Zuwachs
   dieser Runde leuchtet in Smaragd. Die Spitzenlinie ist der Drachenberg — ein dunkler Gipfel, auf dem die Glut des
   Drachen leuchtet; wer führt, trägt statt der Fahne eine Laterne. „Jetzt" ist hier Smaragd, nicht das Pink der Marke
   (IDEE §2.5, Prüfstelle: Zwischenstand neben Purpur). Variablen tragen das Motiv im Namen. */
[data-motiv="schuppen"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-sw-pergament: #e9dbb6; --zw-sw-tinte: color-mix(in srgb, var(--acc2) 72%, #1a0c1c); }
[data-motiv="schuppen"] .zw-zeile, [data-motiv="schuppen"] .zw-bzeile, [data-motiv="schuppen"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #3a2418 44%, var(--g1)) 0, color-mix(in srgb, #24150c 38%, var(--g0)) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 10%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc2) 24%, transparent);
}
[data-motiv="schuppen"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(10px, 3cqmin); transform: translateY(-50%); border-radius: .3cqmin;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--zw-sw-tinte) 42%, transparent) 0 1.2cqmin, transparent 1.2cqmin 2cqmin) 0 50% / 100% max(1px, .3cqmin) no-repeat,
    radial-gradient(120% 160% at 50% 50%, transparent 55%, color-mix(in srgb, #8a6a3a 30%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, #fff 30%, var(--zw-sw-pergament)), var(--zw-sw-pergament) 50%, color-mix(in srgb, var(--zw-sw-pergament) 86%, #a88a58));
  box-shadow: 0 .3cqmin .7cqmin color-mix(in srgb, #000 55%, transparent);
}
[data-motiv="schuppen"] .zw-spur, [data-motiv="schuppen"] .zw-zuwachs { height: max(3px, .9cqmin); border-radius: 99px; }
[data-motiv="schuppen"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--zw-sw-tinte) 60%, transparent), var(--zw-sw-tinte)); box-shadow: none; }
[data-motiv="schuppen"] .zw-zuwachs {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #03402c), var(--acc));
  box-shadow: 0 0 1cqmin color-mix(in srgb, var(--acc) 55%, transparent), 0 0 0 max(1px, .14cqmin) color-mix(in srgb, #03402c 60%, transparent);
}
[data-motiv="schuppen"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 55%, transparent)); }
/* Der Drachenberg: ein dunkler Stab bis zum Gipfel, oben der Berg in Purpur, darüber die Glut. */
/* Etwa doppelt so groß wie zuerst (Prüfbefund 18.10.: „kleine Dreiecke"): ein Berg mit zwei Gipfeln, der Fuß in der Mitte
   der Zeile, darüber die Glut. */
[data-motiv="schuppen"] .zw-linie {
  width: .45cqmin; top: 56%; bottom: 8%; border-radius: 0 0 .3cqmin .3cqmin;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 50%, #1a0c1c), color-mix(in srgb, var(--acc2) 30%, #000));
}
[data-motiv="schuppen"] .zw-linie::before {
  /* Der Berg steht LINKS der Linie (sein rechter Fuß an ihr) — mittig stand er über den Punkten (Probe 18.10.: „317" halb verdeckt). */
  content: ''; position: absolute; left: 50%; top: -5.2cqmin; width: 9cqmin; height: 5.4cqmin; margin-left: -8.4cqmin;
  background:
    linear-gradient(118deg, transparent 52%, color-mix(in srgb, #000 30%, transparent) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 66%, #3a1f42), color-mix(in srgb, var(--acc2) 30%, #0c060e));
  clip-path: polygon(0 100%, 20% 50%, 32% 62%, 52% 0, 68% 38%, 78% 28%, 100% 100%);
}
[data-motiv="schuppen"] .zw-linie::after {
  content: ''; position: absolute; left: 50%; top: -8cqmin; width: 5.6cqmin; height: 5.6cqmin; margin-left: -6.6cqmin; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 70%, #fff) 0 18%, color-mix(in srgb, var(--acc) 40%, transparent) 50%, transparent);
}
/* Die Laterne des Führenden: Bügel, Dach, Glas mit grünem Licht, Fuß — aus dunklem Eisen. */
/* Die Laterne: doppelt so groß wie zuerst und mit eigenem Schein, damit man den Führenden an ihr erkennt. */
[data-motiv="schuppen"] .zw-fahne {
  width: calc(var(--fgr) * .58); height: calc(var(--fgr) * .88);
  filter: drop-shadow(0 0 .9cqmin color-mix(in srgb, var(--acc) 85%, transparent)) drop-shadow(0 .2cqmin .3cqmin rgba(0, 0, 0, .6));
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--acc) 82%, #fff) 0 30%, color-mix(in srgb, var(--acc) 50%, transparent) 62%, transparent) 50% 64% / 76% 50% no-repeat,
    linear-gradient(90deg, #26252a 0 14%, transparent 14% 86%, #26252a 86%) 50% 66% / 70% 52% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 0 40%, #26252a 44% 64%, transparent 68%) 50% 0 / 44% 26% no-repeat,
    linear-gradient(180deg, transparent 22%, #26252a 22% 32%, transparent 32% 90%, #26252a 90%) 50% 0 / 82% 100% no-repeat;
}
[data-motiv="schuppen"] .zw-fahne svg { display: none; }
/* Online: der eigene Abstand als Strich — bis zum Vordermann, zurück zum Hintermann. */
.zw-luecke {
  position: absolute; top: 50%; left: calc(var(--fgr) / 2); right: calc(var(--fgr) / 2); height: max(2px, .5cqmin);
  transform-origin: left center; transform: translate(calc(var(--a) * 100%), -50%) scaleX(calc(var(--b) - var(--a)));
  background: repeating-linear-gradient(90deg, var(--du) 0 1.2cqmin, transparent 1.2cqmin 2cqmin);
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.zw-moment .zw-luecke { opacity: .95; }

.zw-schlitten {
  position: absolute; top: 0; bottom: 0; left: calc(var(--fgr) / 2); right: calc(var(--fgr) / 2); z-index: 2; pointer-events: none;
  transform: translateX(calc(var(--pv) * 100%));
  transition: transform calc(var(--d-xl) * 1.3) var(--k-ein);
}
.zw-lauf .zw-schlitten { transform: translateX(calc(var(--pn) * 100%)); }
.zw-figur { position: absolute; left: 0; top: 50%; width: var(--fgr); height: var(--fgr); transform: translate(-50%, -50%); }
.zw-figur .qn-av { width: 100%; height: 100%; }
/* Der Fahrtwind hinter jeder Figur, die in dieser Runde Punkte holt. */
.zw-schweif {
  position: absolute; right: 58%; top: 34%; height: 32%; width: calc(var(--fgr) * 1.3); border-radius: 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--jetzt) 60%, transparent));
  opacity: 0; transform-origin: right center;
}
.zw-lauf .gewinnt .zw-schweif { animation: zw-schweif calc(var(--d-xl) * 1.5) var(--k-ein) 1 both; }
@keyframes zw-schweif { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.3); } }
/* Die Fahne der Führung: Sie fliegt beim Wechsel davon und landet beim Neuen. */
.zw-fahne {
  position: absolute; left: 58%; bottom: 58%; width: calc(var(--fgr) * .52); height: calc(var(--fgr) * .52); z-index: 3;
  color: var(--jetzt); filter: drop-shadow(0 .3cqmin .6cqmin color-mix(in srgb, var(--g0) 70%, transparent));
  opacity: 0; transform: translateY(-50%) rotate(-14deg);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-fahne svg { display: block; width: 100%; height: 100%; }
.zw-s1 .zw-fahne.alt { opacity: 1; transform: none; }
.zw-nach .zw-fahne.alt:not(.neu) { opacity: 0; transform: translate(50%, -140%) rotate(34deg); }
.zw-nach .zw-fahne.neu { opacity: 1; transform: none; transition-delay: var(--d-lang); }

/* Die Zahlen: der Zuwachs über dem Stand. */
.zw-zahlen { display: grid; justify-items: end; align-content: center; min-width: 10cqmin; }
.zw-plus {
  font-family: var(--f-mono); font-weight: 700; line-height: 1.12; color: var(--jetzt); white-space: nowrap;
  font-size: max(9px, calc(clamp(2.2cqmin, calc(14cqmin / var(--zeilen)), 3.6cqmin) * var(--zw-s)));
  opacity: 0; transform: translateY(60%) scale(.7);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-plus.null { color: var(--t2); }
.zw-lauf .zw-plus { opacity: 1; transform: none; }
.zw-pkt {
  font-family: var(--f-mono); font-weight: 800; line-height: 1; color: var(--t0); white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  font-size: calc(clamp(3.4cqmin, calc(30cqmin / var(--zeilen)), 8cqmin) * var(--zw-s));
}
.zw-nach .vorn .zw-pkt { color: var(--acc); }

/* ---------- Die Seite: erst die Runde in Zahlen, dann die Geschichten ---------- */
.zw-seite { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
.zw-seite > * { grid-area: 1 / 1; min-height: 0; min-width: 0; }
.zw-geschichten { display: flex; flex-direction: column; gap: 1.6cqmin; }

.zw-runde {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center;
  grid-template-areas: "kopf" "zahl" "wort" "felder" "fakten"; row-gap: 1.2cqmin;
  padding: 2.4cqmin; border-radius: 2.4cqmin;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 17%, var(--g2)), color-mix(in srgb, var(--g2) 88%, transparent) 75%);
  box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--acc) 34%, transparent);
  opacity: 0; transform: translateY(2cqmin);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-ein);
}
.zw-s1 .zw-runde { opacity: 1; transform: none; }
.zw-moment:not(.zw-ohne-g) .zw-runde { opacity: 0; transform: translateX(-5cqmin) scale(.95); }
.zw-rk-kopf { grid-area: kopf; display: flex; align-items: center; gap: 1.2cqmin; min-width: 0;
  font-family: var(--f-display); font-weight: 800; font-size: calc(3.2cqmin * var(--zw-s)); line-height: 1.1; color: var(--t0); }
.zw-rk-glyph {
  flex: none; width: 5cqmin; height: 5cqmin; border-radius: 1.4cqmin; display: grid; place-items: center; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 24%, var(--g2)); box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--acc) 70%, transparent);
}
.zw-rk-glyph svg { display: block; width: 62%; height: 62%; }
.zw-rk-zahl { grid-area: zahl; font-family: var(--f-display); font-weight: 900; font-size: calc(11cqmin * var(--zw-s)); line-height: .95;
  letter-spacing: -.02em; color: var(--jetzt); white-space: nowrap; max-width: 100%; }
.zw-rk-wort { grid-area: wort; font-size: max(9px, calc(2.1cqmin * var(--zw-s))); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t1); }
.zw-rk-felder { grid-area: felder; display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqmin; margin-top: .6cqmin; }
.zw-rk-felder i { position: relative; width: 3.4cqmin; height: 3.4cqmin; border-radius: .8cqmin; box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 22%, transparent); }
.zw-rk-felder i::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--acc2);
  opacity: 0; transform: scale(.3);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
  transition-delay: calc(var(--v, 0) * var(--k) * 1ms);
}
.zw-rk-felder i.sp::after { background: var(--t2); }
.zw-lauf .zw-rk-felder i.s1::after { opacity: .3; transform: none; }
.zw-lauf .zw-rk-felder i.s2::after { opacity: .52; transform: none; }
.zw-lauf .zw-rk-felder i.s3::after { opacity: .76; transform: none; }
.zw-lauf .zw-rk-felder i.s4::after, .zw-lauf .zw-rk-felder i.sp::after { opacity: 1; transform: none; }
.zw-lauf .zw-rk-felder i.sp::after { opacity: .45; }
.zw-rk-fakten { grid-area: fakten; font-size: max(9px, calc(2.3cqmin * var(--zw-s))); font-weight: 600; color: var(--t1); }
/* Im Band-Modus ist der Platz flach: Zahl links, der Rest daneben. */
.zw-m-band .zw-runde {
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kopf kopf" "zahl wort" "zahl felder" "zahl fakten";
  justify-items: start; text-align: left; column-gap: 3cqmin; row-gap: .8cqmin; padding: 2cqmin 2.6cqmin;
}
.zw-m-band .zw-rk-zahl { font-size: calc(9cqmin * var(--zw-s)); align-self: center; }
.zw-m-band .zw-rk-felder { justify-content: flex-start; margin-top: 0; }
.zw-m-band .zw-rk-felder i { width: 2.6cqmin; height: 2.6cqmin; }

/* Der eigene Abstand in hohen Bahnen: jede Richtung eine Zeile. */
.zw-zweizeilig .zw-zeile .zw-tag.du .teil { display: block; }
.zw-zweizeilig .zw-zeile .zw-tag.du .trenn { display: none; }

/* ---------- Die Geschichten ---------- */
.zw-g {
  --gfig: 13cqmin;
  position: relative; flex: 1 1 0; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
  align-content: center; column-gap: 2cqmin; row-gap: .7cqmin;
  padding: 1.8cqmin 2.4cqmin; border-radius: 2.4cqmin;
  background: linear-gradient(155deg, color-mix(in srgb, var(--fr) 22%, var(--g2)), color-mix(in srgb, var(--g2) 90%, transparent) 72%);
  box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--fr) 40%, transparent);
  opacity: 0; transform: translateX(5cqmin) scale(.96);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.zw-g.da { opacity: 1; transform: none; }
/* Das Zeichen der Geschichte noch einmal groß und leise im Hintergrund. */
.zw-g-wm {
  position: absolute; right: -3cqmin; top: 50%; width: 24cqmin; height: 24cqmin; pointer-events: none;
  color: var(--fr); opacity: .09; transform: translateY(-50%) rotate(-12deg);
}
.zw-g-wm svg { display: block; width: 100%; height: 100%; }
.zw-g > :not(.zw-g-wm) { position: relative; }
.zw-m-band .zw-g { --gfig: 10cqmin; }
.zw-g-figur { grid-row: 1 / 3; align-self: center; width: var(--gfig); height: var(--gfig); display: grid; place-items: center; color: var(--fr); }
.zw-g-figur .qn-av { width: 100%; height: 100%; }
.zw-g-figur.zeichen svg { display: block; width: 72%; height: 72%; }
.zw-g-zahl {
  align-self: end; min-width: 0; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; line-height: .95; letter-spacing: -.02em; color: var(--fr);
  font-size: calc(7cqmin * var(--zw-s));
}
.zw-g-marke {
  align-self: start; display: flex; align-items: center; gap: .7cqmin; min-width: 0;
  font-size: max(9px, calc(2cqmin * var(--zw-s))); font-weight: 800; letter-spacing: .1em; line-height: 1.15; text-transform: uppercase; color: var(--t1);
}
.zw-g-marke i { flex: none; width: 2.4cqmin; height: 2.4cqmin; color: var(--fr); }
.zw-g-marke i svg { display: block; width: 100%; height: 100%; }
.zw-g-satz {
  grid-column: 1 / -1; margin-top: .6cqmin;
  font-size: max(9px, calc(2.7cqmin * var(--zw-s))); line-height: 1.28; font-weight: 600; color: var(--t0);
}

/* ---------- Viele Spieler: die Spitze links, das ganze Feld im Band ---------- */
.zw-links, .zw-rechts { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; row-gap: 1cqmin; }
.zw-links { grid-template-rows: auto minmax(0, 1.35fr) minmax(0, 1fr); }
.zw-rechts { grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; }
.zw-links > .zw-seite { margin-top: .6cqmin; }
.zw-ab { font-size: max(9px, calc(2cqmin * var(--zw-s))); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); line-height: 1.2; }
/* Die Spitze schneidet ab: Wer herausfällt, fährt nach unten hinaus. */
.zw-spitze { overflow: hidden; }
.zw-bandhalter { position: relative; min-height: 0; }
.zw-bandhalter .qn-laufband:not(.rollt) > .qn-lauf { justify-content: flex-start; }
.zw-band .qn-lauf > .zw-bzeile { height: var(--bz-h, 6.4cqmin); }
.zw-bzeile, .zw-angeheftet {
  --bav: 5cqmin;
  position: relative; display: grid; align-items: center;
  grid-template-columns: 5cqmin var(--bav) minmax(0, 1fr) auto auto minmax(8cqmin, auto);
  column-gap: 1.4cqmin; padding: 0 1.8cqmin 0 .8cqmin; border-radius: 1.6cqmin;
  background: color-mix(in srgb, var(--g2) 86%, transparent);
  box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 7%, transparent);
  opacity: 0; transform: translateX(3cqmin);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
  transition-delay: calc(var(--v, 0) * var(--k) * 1ms);
}
.zw-s1 .zw-bzeile { opacity: 1; transform: none; }
.zw-band-passt .zw-bzeile { --bav: min(7cqmin, calc(var(--bz-h, 6.4cqmin) * .72)); }
.zw-bzeile .zw-rang > b, .zw-angeheftet .zw-rang > b { font-size: max(9px, calc(2.9cqmin * var(--zw-s))); }
.zw-bav { display: block; width: var(--bav); height: var(--bav); }
.zw-bav .qn-av { width: 100%; height: 100%; }
.zw-bzeile .zw-name, .zw-angeheftet .zw-name { font-size: max(9px, calc(3.2cqmin * var(--zw-s))); }
.zw-bzeile .zw-sprung, .zw-angeheftet .zw-sprung { grid-row: auto; font-size: max(9px, calc(2.1cqmin * var(--zw-s))); }
.zw-bzeile .zw-plus, .zw-angeheftet .zw-plus { font-size: max(9px, calc(2.4cqmin * var(--zw-s))); }
.zw-bzeile .zw-pkt, .zw-angeheftet .zw-pkt { font-size: max(10px, calc(3.4cqmin * var(--zw-s))); }
.zw-bzeile.du, .zw-angeheftet {
  background: color-mix(in srgb, var(--du) 12%, var(--g2));
  box-shadow: inset 0 0 0 .28cqmin var(--du);
}
.zw-nach .zw-bzeile.vorn { box-shadow: inset .5cqmin 0 0 var(--acc), inset 0 0 0 .18cqmin color-mix(in srgb, var(--acc) 30%, transparent); }
.zw-nach .zw-bzeile.vorn.du { box-shadow: inset .5cqmin 0 0 var(--acc), inset 0 0 0 .28cqmin var(--du); }
.zw-bzeile .zw-tag, .zw-angeheftet .zw-tag { font-size: max(9px, 2cqmin); }
/* Die eigene Zeile unter dem Band — nur online, nur wenn es rollen muss. */
.zw-angeheftet { height: 7.4cqmin; margin-top: .4cqmin; }
.zw-nach .zw-angeheftet .zw-r-neu { color: var(--du); }
/* Das Band fährt EINMAL hinunter und bleibt unten stehen. */
.zw-band.zw-einmal.rollt > .qn-lauf { animation: zw-laufband var(--zw-lb-dauer, 4s) cubic-bezier(.45, 0, .55, 1) 1 both; }
@keyframes zw-laufband {
  0%, 10% { transform: translateY(0); }
  100% { transform: translateY(calc(var(--lb-weg, 0px) * -1)); }
}

/* ---------- Der Fuß: der Abend als Streifen, das Nächste, das Recht ---------- */
.zw-fuss { display: flex; align-items: center; gap: 2cqmin; min-width: 0; opacity: 0; transition: opacity var(--d-lang) var(--k-ein); }
.zw-s1 .zw-fuss { opacity: 1; }
.zw-chips { display: flex; gap: .6cqmin; flex: none; }
.zw-chip {
  width: 3.2cqmin; height: 3.2cqmin; border-radius: .9cqmin; display: grid; place-items: center; flex: none;
  color: var(--t2); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 16%, transparent);
}
.zw-chip svg { display: block; width: 62%; height: 62%; }
/* Ein Chip mit Ziffer statt Zeichen — die Runden eines Stils (spiel.js rundenListe, stile.js). */
.zw-chip .zw-chipzahl { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: max(9px, 2.2cqmin); line-height: 1; }
.zw-chip.gespielt { background: color-mix(in srgb, var(--acc2) 32%, var(--g2)); color: var(--t1); box-shadow: none; }
.zw-chip.eben { background: var(--acc); color: var(--auf-acc); box-shadow: none; }
.zw-chip.naechste { color: var(--t0); box-shadow: inset 0 0 0 .3cqmin var(--jetzt); }
.zw-weiter .zw-chip.naechste { animation: qn-puls 1.6s ease-in-out infinite; }
.zw-naechst { font-size: max(9px, calc(2.2cqmin * var(--zw-s))); color: var(--t1); white-space: nowrap; flex: none; }
.zw-naechst i { font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jetzt); }
.zw-naechst b { color: var(--t0); font-weight: 800; }
.zw-recht { margin-left: auto; white-space: nowrap; flex: none; }
.zw-fuss.knapp .zw-naechst i { display: none; }
.zw-fuss.eng { flex-wrap: wrap; row-gap: .5cqmin; }
.zw-fuss.eng .zw-recht { flex-basis: 100%; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .zw *, .zw *::after { transition-delay: 0s !important; }
  .zw-schweif { display: none; }
  .zw-weiter .zw-chip.naechste, .zw-weiter .zw-noch b { animation: none; }
  /* Wie beim Finale: Wer keine Bewegung will, bekommt die Liste zum Ziehen. */
  .zw-band.zw-einmal.rollt > .qn-lauf { animation: none; }
}

/* Weltall (Motiv sternlinie): die Tafel als großer Schirm der Bodenkontrolle. Jede Zeile ist ein Streifen Nachthimmel, jede
   Strecke eine Flugbahn von der Erde (links ein kleiner blauer Rand) zum Mond: gestrichelt in Silber, so weit sie noch vor
   allen liegt (steht still — die Strecke selbst wird skaliert, Striche darin würden verzerrt). Was geflogen ist, zieht sich
   als Spur in Rost darüber, der Zuwachs dieser Runde leuchtet in Sternensilber. Die Spitzenlinie trägt den MOND — groß, eine
   silberne Sichel mit Schein; wer führt, fliegt als Kapsel mit kurzem Triebwerksstrahl. „Jetzt" ist hier Sternensilber,
   nicht das Pink der Marke (IDEE §2.5: Balken silbern, Spur in Rost). Variablen tragen das Motiv im Namen. */
[data-motiv="sternlinie"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-wa-bahn: color-mix(in srgb, var(--acc) 42%, transparent); }
[data-motiv="sternlinie"] .zw-zeile, [data-motiv="sternlinie"] .zw-bzeile, [data-motiv="sternlinie"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #16243a 60%, var(--g1)) 0, color-mix(in srgb, #0b1320 60%, var(--g0)) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 8%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc) 18%, transparent);
}
[data-motiv="sternlinie"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(10px, 3cqmin); transform: translateY(-50%); border-radius: 99px;
  background:
    radial-gradient(circle at 0 50%, #6fb6ff 0 .9cqmin, #2a6cb4 1cqmin, transparent 1.3cqmin) 0 0 / 2cqmin 100% no-repeat,
    repeating-linear-gradient(90deg, var(--zw-wa-bahn) 0 1.2cqmin, transparent 1.2cqmin 2cqmin) 0 50% / 100% max(1px, .3cqmin) no-repeat,
    radial-gradient(circle, color-mix(in srgb, #fff 70%, transparent) 0 .1cqmin, transparent .16cqmin) 0 0 / 3.3cqmin 1.7cqmin,
    linear-gradient(180deg, #0b1320, #05080c);
  box-shadow: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--acc) 22%, transparent);
}
[data-motiv="sternlinie"] .zw-spur, [data-motiv="sternlinie"] .zw-zuwachs { height: max(3px, .9cqmin); border-radius: 99px; }
[data-motiv="sternlinie"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--acc2) 50%, transparent), var(--acc2)); box-shadow: none; }
[data-motiv="sternlinie"] .zw-zuwachs { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #5a6878), var(--acc)); box-shadow: 0 0 1cqmin color-mix(in srgb, var(--acc) 55%, transparent); }
[data-motiv="sternlinie"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc2) 60%, transparent)); }
/* Der Mond an der Spitzenlinie: ein schmaler Mast bis zur Mitte der Zeile, darüber die große silberne Sichel mit Schein
   (sie steht LINKS der Linie, damit sie die Punkte nicht verdeckt — Lehre aus Sagenwelt). */
[data-motiv="sternlinie"] .zw-linie { width: .4cqmin; top: 56%; bottom: 8%; border-radius: 0 0 .3cqmin .3cqmin; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 60%, transparent), transparent); }
[data-motiv="sternlinie"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -6.8cqmin; width: 5.6cqmin; height: 5.6cqmin; margin-left: -13cqmin; border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #f4f7fa, color-mix(in srgb, var(--acc) 90%, #fff) 40%, color-mix(in srgb, var(--acc) 60%, #4a5562) 100%);
  -webkit-mask: radial-gradient(circle at 76% 28%, transparent 0 2.35cqmin, #000 2.45cqmin); mask: radial-gradient(circle at 76% 28%, transparent 0 2.35cqmin, #000 2.45cqmin);
  filter: drop-shadow(0 0 1.2cqmin color-mix(in srgb, var(--acc) 60%, transparent));
}
/* Der Führende zieht eine kleine Flamme hinter sich her (Triebwerksstrahl, nach links — weg von der Zahl; Prüfbefund: der
   weiße Keil stieß an „+14" und las sich wie eine Fahne). */
[data-motiv="sternlinie"] .zw-fahne {
  width: calc(var(--fgr) * .56); height: calc(var(--fgr) * .3); translate: calc(var(--fgr) * -1.1) calc(var(--fgr) * .3);
  background: radial-gradient(80% 60% at 100% 50%, #fff6e0 0, color-mix(in srgb, var(--acc2) 55%, #ffd2a0) 30%, var(--acc2) 62%, transparent 76%);
  clip-path: polygon(0 50%, 100% 6%, 100% 94%);
  filter: drop-shadow(0 0 .8cqmin color-mix(in srgb, var(--acc2) 70%, transparent));
}
[data-motiv="sternlinie"] .zw-fahne svg { display: none; }
/* ERFINDER-BLOCK · Erfinder (Motiv blaupause): die Tafel als ROHRPOST der Weltausstellung. Jede Bahn ist eine
   Glasröhre auf Messingschellen; was gefahren ist, steht als Luftstrom in Blaupausenblau in ihr, der Zuwachs dieser
   Runde leuchtet hell. Das Ziel ist der TRICHTER der Empfangsstation — ein Messingtrichter oben auf seinem Rohr; wer
   führt, trägt statt der Fahne eine kleine glühende Birne in ihrer Fassung (Glühfaden-Licht, keine Fläche). „Jetzt" ist
   hier Blaupausenblau, nicht das Pink der Marke (IDEE §2.7). Variablen tragen das Motiv im Namen. */
[data-motiv="blaupause"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-ef-glas: color-mix(in srgb, var(--acc) 18%, transparent); --zw-ef-messing: #b8913f; }
[data-motiv="blaupause"] .zw-zeile, [data-motiv="blaupause"] .zw-bzeile, [data-motiv="blaupause"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #2a2018 40%, var(--g1)) 0, color-mix(in srgb, #1a140e 34%, var(--g0)) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 9%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc) 22%, transparent);
}
/* Die Glasröhre: oben eine Lichtkante, unten ein Schatten, alle 12 cqmin eine Messingschelle. */
[data-motiv="blaupause"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(11px, 3.2cqmin); transform: translateY(-50%); border-radius: 99px;
  background:
    linear-gradient(90deg, transparent 0 11cqmin, var(--zw-ef-messing) 11cqmin 11.8cqmin, transparent 11.8cqmin) 0 0 / 12cqmin 100% repeat-x,
    linear-gradient(180deg, color-mix(in srgb, #fff 34%, transparent) 0 12%, var(--zw-ef-glas) 12% 70%, color-mix(in srgb, #000 30%, transparent) 100%);
  box-shadow: inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, #fff 30%, transparent), 0 .3cqmin .7cqmin color-mix(in srgb, #000 50%, transparent);
}
[data-motiv="blaupause"] .zw-spur, [data-motiv="blaupause"] .zw-zuwachs { height: max(4px, 1.2cqmin); border-radius: 99px; }
[data-motiv="blaupause"] .zw-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 40%, transparent), var(--acc)); box-shadow: none; }
[data-motiv="blaupause"] .zw-zuwachs {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, #fff), #f4f8ff);
  box-shadow: 0 0 1cqmin color-mix(in srgb, var(--acc) 60%, transparent), 0 0 0 max(1px, .14cqmin) color-mix(in srgb, #0b1a33 50%, transparent);
}
[data-motiv="blaupause"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 50%, transparent)); }
/* Der Trichter der Empfangsstation: ein Rohr bis oben, darauf der Messingtrichter. */
[data-motiv="blaupause"] .zw-linie {
  width: .7cqmin; top: 26%; bottom: 8%; border-radius: 0 0 .3cqmin .3cqmin;
  background: linear-gradient(90deg, #6e5220, #e6c77a 50%, #6e5220);
}
[data-motiv="blaupause"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -3.6cqmin; width: 6cqmin; height: 3.8cqmin; margin-left: -3cqmin;
  background: linear-gradient(90deg, #6e5220, #f0d48a 45%, #8a6a2a);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}
[data-motiv="blaupause"] .zw-linie::after {
  content: ''; position: absolute; left: 50%; top: -4.4cqmin; width: 6.6cqmin; height: 1.2cqmin; margin-left: -3.3cqmin; border-radius: 50%;
  background: radial-gradient(closest-side, #2a1c08, #6e5220 70%, #b8913f);
}
/* Die Birne des Führenden: Fassung aus Messing, das Glas glüht im Glühfaden-Licht. */
[data-motiv="blaupause"] .zw-fahne {
  width: calc(var(--fgr) * .28); height: calc(var(--fgr) * .44);
  background:
    radial-gradient(closest-side, #fffef4 0 18%, color-mix(in srgb, var(--acc2) 80%, #fff) 40%, color-mix(in srgb, var(--acc2) 30%, transparent) 70%, transparent) 50% 70% / 100% 70% no-repeat,
    linear-gradient(180deg, transparent 0 4%, #b8913f 4% 26%, transparent 26%) 50% 0 / 40% 100% no-repeat;
  filter: drop-shadow(0 0 .8cqmin color-mix(in srgb, var(--acc2) 60%, transparent));
}
[data-motiv="blaupause"] .zw-fahne svg { display: none; }

/* GESCHICHTE-BLOCK · Geschichte (Motiv maeander): die Tafel als BILDTEPPICH. Jede Zeile ist ein Streifen dunkles Tuch, jede
   Strecke ein Band ungebleichtes Leinen, auf das gestickt wird wie auf den Teppich von Bayeux (nur der Stil, keine Szenen):
   Was geschafft ist, steht als dichter Wollfaden in Siegelrot darauf, der Zuwachs dieser Runde in Sepia. An der Spitzenlinie
   hängt das tragende Ding der Welt groß: ein ROTES SIEGEL mit Ring und eingedrücktem Lorbeer; wer führt, trägt einen kleinen
   goldenen Lorbeerkranz. „Jetzt" ist hier Sepia, nicht das Pink der Marke (IDEE §2.7: Balken in Sepia, Spur in Siegelrot).
   Variablen tragen das Motiv im Namen. */
[data-motiv="maeander"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-ge-leinen: #d9c9a3; }
[data-motiv="maeander"] .zw-zeile, [data-motiv="maeander"] .zw-bzeile, [data-motiv="maeander"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #3a2614 60%, var(--g1)) 0, color-mix(in srgb, #24170b 60%, var(--g0)) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 6%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc) 22%, transparent);
}
/* Das Leinen: ein Band mit Webstruktur, oben und unten eine gestickte Kante (Steppstich in Sepia). */
[data-motiv="maeander"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(12px, 3.4cqmin); transform: translateY(-50%); border-radius: .3cqmin;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #3a2614) 0 .8cqmin, transparent .8cqmin 1.3cqmin) 0 .3cqmin / 100% max(1px, .2cqmin) no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #3a2614) 0 .8cqmin, transparent .8cqmin 1.3cqmin) 0 calc(100% - .3cqmin) / 100% max(1px, .2cqmin) no-repeat,
    repeating-linear-gradient(0deg, color-mix(in srgb, #000 7%, transparent) 0 .12cqmin, transparent .12cqmin .34cqmin),
    repeating-linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 0 .12cqmin, transparent .12cqmin .34cqmin),
    var(--zw-ge-leinen);
  box-shadow: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, #6e4b2a 50%, transparent), 0 .2cqmin .5cqmin color-mix(in srgb, #000 40%, transparent);
}
/* Der Wollfaden: dichte, schräge Stiche (Plattstich) — Siegelrot für das Geschaffte, Sepia für den Zuwachs dieser Runde. */
[data-motiv="maeander"] .zw-spur, [data-motiv="maeander"] .zw-zuwachs { height: max(6px, 1.7cqmin); border-radius: .2cqmin; }
[data-motiv="maeander"] .zw-spur {
  background: repeating-linear-gradient(60deg, color-mix(in srgb, var(--acc2) 70%, #ffd7d0) 0 .18cqmin, var(--acc2) .18cqmin .5cqmin, color-mix(in srgb, var(--acc2) 70%, #2a0508) .5cqmin .62cqmin);
  box-shadow: 0 .1cqmin .2cqmin color-mix(in srgb, #000 40%, transparent);
}
[data-motiv="maeander"] .zw-zuwachs {
  background: repeating-linear-gradient(60deg, color-mix(in srgb, var(--acc) 60%, #fff3d6) 0 .18cqmin, var(--acc) .18cqmin .5cqmin, color-mix(in srgb, var(--acc) 60%, #2a1a0c) .5cqmin .62cqmin);
  box-shadow: 0 0 .8cqmin color-mix(in srgb, var(--acc) 50%, transparent);
}
[data-motiv="maeander"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc2) 50%, transparent)); }
/* Das Siegel an der Spitzenlinie: ein schmales Band hinunter bis zur Mitte der Zeile, darüber groß das rote Siegel mit Ring und
   eingedrücktem Lorbeer (es steht LINKS der Linie, damit es die Punkte nicht verdeckt — Lehre aus Sagenwelt und Weltall). */
[data-motiv="maeander"] .zw-linie { width: .5cqmin; top: 56%; bottom: 8%; border-radius: 0 0 .3cqmin .3cqmin; background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 70%, transparent), transparent); }
[data-motiv="maeander"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -8.4cqmin; width: 8cqmin; height: 7.8cqmin; margin-left: -9cqmin;
  border-radius: 46% 54% 50% 48% / 52% 46% 54% 48%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M14 36Q17 18 36 8M66 36Q63 18 44 8' fill='none' stroke='%235a1219' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%237d1f27' stroke='%235a1219' stroke-width='.7'%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(15 34) rotate(-70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(65 34) rotate(70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(17 28) rotate(-58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63 28) rotate(58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(20 22.5) rotate(-46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(60 22.5) rotate(46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(24 17.5) rotate(-34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(56 17.5) rotate(34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(28.6 13.4) rotate(-22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(51.4 13.4) rotate(22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(33.6 10.4) rotate(-10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(46.4 10.4) rotate(10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(16.4 31) rotate(-20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63.6 31) rotate(20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(19 25.4) rotate(-8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(61 25.4) rotate(8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(22.4 20) rotate(4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(57.6 20) rotate(-4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(26.6 15.6) rotate(16)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(53.4 15.6) rotate(-16)'/%3E%3C/g%3E%3C/svg%3E") 50% 54% / 70% auto no-repeat,
    radial-gradient(circle at 50% 50%, transparent 0 56%, color-mix(in srgb, var(--acc2) 52%, #2a0508) 58% 62%, transparent 64%),
    radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--acc2) 60%, #ffd7d0), var(--acc2) 48%, color-mix(in srgb, var(--acc2) 62%, #2a0508) 100%);
  filter: drop-shadow(0 .4cqmin .6cqmin color-mix(in srgb, #000 55%, transparent));
}
/* Der Lorbeerkranz des Führenden: Gold, ein kleiner Schein. */
[data-motiv="maeander"] .zw-fahne {
  width: calc(var(--fgr) * .96); height: calc(var(--fgr) * .48);
  background: linear-gradient(180deg, #fbe9b0, #d9a944 55%, #9c6f1c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M14 36Q17 18 36 8M66 36Q63 18 44 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%23000' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(15 34) rotate(-70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(65 34) rotate(70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(17 28) rotate(-58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63 28) rotate(58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(20 22.5) rotate(-46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(60 22.5) rotate(46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(24 17.5) rotate(-34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(56 17.5) rotate(34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(28.6 13.4) rotate(-22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(51.4 13.4) rotate(22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(33.6 10.4) rotate(-10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(46.4 10.4) rotate(10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(16.4 31) rotate(-20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63.6 31) rotate(20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(19 25.4) rotate(-8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(61 25.4) rotate(8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(22.4 20) rotate(4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(57.6 20) rotate(-4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(26.6 15.6) rotate(16)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(53.4 15.6) rotate(-16)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M14 36Q17 18 36 8M66 36Q63 18 44 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%23000' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(15 34) rotate(-70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(65 34) rotate(70)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(17 28) rotate(-58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63 28) rotate(58)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(20 22.5) rotate(-46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(60 22.5) rotate(46)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(24 17.5) rotate(-34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(56 17.5) rotate(34)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(28.6 13.4) rotate(-22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(51.4 13.4) rotate(22)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(33.6 10.4) rotate(-10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(46.4 10.4) rotate(10)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(16.4 31) rotate(-20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(63.6 31) rotate(20)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(19 25.4) rotate(-8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(61 25.4) rotate(8)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(22.4 20) rotate(4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(57.6 20) rotate(-4)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(26.6 15.6) rotate(16)'/%3E%3Cpath d='M0 0C2.3-3 2.3-7.4 0-10.6C-2.3-7.4-2.3-3 0 0Z' transform='translate(53.4 15.6) rotate(-16)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 .6cqmin color-mix(in srgb, var(--acc) 70%, transparent)) drop-shadow(0 .2cqmin .3cqmin rgba(0, 0, 0, .6));
}
[data-motiv="maeander"] .zw-fahne svg { display: none; }
/* Geschichte: Im Zwischenstand läuft unten die Fußzeile („Als Nächstes: …", die Runden) — dort endet der Mäander-Fries; er
   bleibt nur oben (Prüfbefund 18.10.: die Schrift hatte im Fries 2,1 : 1). */
[data-motiv="maeander"] .qn-buehne:has(.zw-fuss)::after {
  -webkit-mask: var(--maeander-kachel) 0 .9cqmin / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x;
          mask: var(--maeander-kachel) 0 .9cqmin / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x;
}

/* TIERWELT-BLOCK · Tierwelt (Motiv faehrte): die Tafel als FÄHRTEN ZUM WASSERLOCH. Jede Zeile ist ein Streifen dunkle Erde,
   jede Strecke ein Pfad aus hellem, festgetretenem Sand, in dem die Abdrücke der anderen Tiere liegen (sie stehen still, das
   Muster wird nicht gestreckt). Was geschafft ist, liegt als Spur in Flamingo darauf, der Zuwachs dieser Runde in Ocker. Am Ende
   jeder Strecke liegt das tragende Ding der Welt groß: das WASSERLOCH, ein Teich mit rosa Widerschein und Schilf — alle
   Fährten führen dorthin; wer führt, trägt eine Flamingofeder. „Jetzt" ist hier Ocker, nicht das Pink der Marke (IDEE §2.5:
   Marken-Pink neben Flamingo wirkt wie eine Farbe — die Kino-Ausnahme). Variablen tragen das Motiv im Namen. */
[data-motiv="faehrte"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-tw-sand: #e2c48c; }
[data-motiv="faehrte"] .zw-zeile, [data-motiv="faehrte"] .zw-bzeile, [data-motiv="faehrte"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, #3a2614 62%, var(--g1)) 0, color-mix(in srgb, #20150b 62%, var(--g0)) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 6%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc) 22%, transparent);
}
/* Der Pfad: heller Sand mit feinem Korn, darin blasse Abdrücke in zwei versetzten Reihen. */
[data-motiv="faehrte"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(12px, 3.4cqmin); transform: translateY(-50%); border-radius: 1.4cqmin;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cg fill='%236b4520' fill-opacity='.55'%3E%3Cellipse cx='5' cy='8.7' rx='2.1' ry='1.75'/%3E%3Ccircle cx='2.6' cy='6.1' r='.9'/%3E%3Ccircle cx='4.15' cy='5.05' r='.9'/%3E%3Ccircle cx='5.85' cy='5.05' r='.9'/%3E%3Ccircle cx='7.4' cy='6.1' r='.9'/%3E%3Cellipse cx='17' cy='5.7' rx='2.1' ry='1.75'/%3E%3Ccircle cx='14.6' cy='3.1' r='.9'/%3E%3Ccircle cx='16.15' cy='2.05' r='.9'/%3E%3Ccircle cx='17.85' cy='2.05' r='.9'/%3E%3Ccircle cx='19.4' cy='3.1' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 50% / max(16px, 4.4cqmin) max(8px, 2.2cqmin) repeat-x,
    radial-gradient(circle, color-mix(in srgb, #fff 26%, transparent) 0 .1cqmin, transparent .14cqmin) 0 0 / .9cqmin .9cqmin,
    linear-gradient(180deg, #f0d9a8 0, var(--zw-tw-sand) 50%, #cfa76c 100%);
  box-shadow: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, #6b4520 50%, transparent), 0 .2cqmin .5cqmin color-mix(in srgb, #000 40%, transparent);
  opacity: .92;
}
/* Die Spur: Flamingo für das Geschaffte, Ocker (mit Hof) für den Zuwachs dieser Runde. */
[data-motiv="faehrte"] .zw-spur, [data-motiv="faehrte"] .zw-zuwachs { height: max(6px, 1.7cqmin); border-radius: 99px; }
[data-motiv="faehrte"] .zw-spur {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 64%, #fff) 0, var(--acc2) 46%, color-mix(in srgb, var(--acc2) 72%, #5a1426) 100%);
  box-shadow: 0 .1cqmin .2cqmin color-mix(in srgb, #000 40%, transparent);
}
[data-motiv="faehrte"] .zw-zuwachs {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 60%, #fff3d6) 0, var(--acc) 50%, color-mix(in srgb, var(--acc) 70%, #2a1a0c) 100%);
  box-shadow: 0 0 .8cqmin color-mix(in srgb, var(--acc) 50%, transparent);
}
[data-motiv="faehrte"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc2) 50%, transparent)); }
/* Das Wasserloch am Ende der Strecke: Die Linie ist das Schilf am Ufer, daran groß der Teich — er liegt LINKS der Linie, damit
   er die Punkte nicht verdeckt (Lehre aus Sagenwelt und Weltall), und so tief, dass die Figur am Ziel mit den Füßen darin steht:
   Er ist breiter als sie und bleibt an beiden Seiten sichtbar. */
[data-motiv="faehrte"] .zw-linie { width: .4cqmin; top: 50%; bottom: 10%; border-radius: 0 0 .3cqmin .3cqmin; background: linear-gradient(180deg, color-mix(in srgb, #5c6a2c 80%, transparent), transparent); }
[data-motiv="faehrte"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -2.6cqmin; width: 13cqmin; height: 6.5cqmin; margin-left: -13.4cqmin;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f9b3c0'/%3E%3Cstop offset='.55' stop-color='%23c0607a'/%3E%3Cstop offset='1' stop-color='%23502a40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='42' cy='29' rx='36' ry='10.5' fill='%233a2614'/%3E%3Cellipse cx='42' cy='28' rx='32' ry='8.4' fill='url(%23w)'/%3E%3Cpath d='M26 26.4h20M50 30h12' stroke='%23fff' stroke-opacity='.6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M9 30V12M12.6 30V7M16.2 30V13' stroke='%235c6a2c' stroke-width='1.7' stroke-linecap='round'/%3E%3Cellipse cx='12.6' cy='8' rx='1.5' ry='3.4' fill='%236b4520'/%3E%3Cpath d='M70 30V17M73.4 30V20' stroke='%235c6a2c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .3cqmin .5cqmin color-mix(in srgb, #000 50%, transparent));
}
/* Die Flamingofeder des Führenden: Flamingo, ein kleiner Schein. */
[data-motiv="faehrte"] .zw-fahne {
  width: calc(var(--fgr) * .74); height: calc(var(--fgr) * .74);
  background: linear-gradient(200deg, #ffd6de, var(--acc2) 52%, color-mix(in srgb, var(--acc2) 70%, #5a1426));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 37C11 27 16 17 25 9C29 5.4 34 3.6 36.4 3.8C36.8 7.6 34.2 13 30 17.6C24 24.6 15.6 31 7 37Z'/%3E%3Cpath d='M3.6 39.4L9 34' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 37C11 27 16 17 25 9C29 5.4 34 3.6 36.4 3.8C36.8 7.6 34.2 13 30 17.6C24 24.6 15.6 31 7 37Z'/%3E%3Cpath d='M3.6 39.4L9 34' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 .6cqmin color-mix(in srgb, var(--acc2) 60%, transparent)) drop-shadow(0 .2cqmin .3cqmin rgba(0, 0, 0, .6));
}
[data-motiv="faehrte"] .zw-fahne svg { display: none; }
/* Unten läuft die Fußzeile („Als Nächstes: …") — dort endet die Fährte am Rand; sie bleibt nur oben (Lehre aus Geschichte:
   Schrift im Fries hatte 2,1 : 1). */
[data-motiv="faehrte"] .qn-buehne:has(.zw-fuss)::after {
  -webkit-mask: var(--faehrte-kachel) 0 .9cqmin / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x;
          mask: var(--faehrte-kachel) 0 .9cqmin / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x;
}

/* FUSSBALL-BLOCK · Fußball (Motiv rasen): die Tafel als SPIELFELD. Jede Zeile ist ein Streifen Rasen — hell und dunkel im Wechsel
   wie die Mähstreifen —, jede Strecke liegt zwischen zwei Kreidelinien. Was geschafft ist, liegt als Spur in Nachtblau mit
   Kreidekante darauf, der Zuwachs dieser Runde als heller Balken in Rasengrün (mit Hof; der Rasen darunter ist dunkel genug, dass
   er heraussticht). Am Ende jeder Strecke steht das tragende Ding der Welt groß: das TOR — Pfosten, Latte und Netz an der
   Torlinie; wer führt, führt den Ball. „Jetzt" ist hier Rasengrün, nicht das Pink der Marke (IDEE §2.7: Balken Rasengrün, Spur
   Nachtblau — wie bei Kino an der Tafel umgestellt). Variablen tragen das Motiv im Namen. */
[data-motiv="rasen"] .zw { --jetzt: var(--acc); --auf-jetzt: var(--auf-acc); --zw-fb-kreide: #f2f7ee; }
[data-motiv="rasen"] .zw-zeile, [data-motiv="rasen"] .zw-bzeile, [data-motiv="rasen"] .zw-angeheftet {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 26%, #06180b) 0, color-mix(in srgb, var(--acc) 18%, #041208) 100%);
  box-shadow: inset 0 .2cqmin 0 color-mix(in srgb, #fff 6%, transparent), inset 0 0 0 .16cqmin color-mix(in srgb, var(--acc) 22%, transparent);
}
[data-motiv="rasen"] .zw-zeile:nth-child(even), [data-motiv="rasen"] .zw-bzeile:nth-child(even) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 34%, #08200e) 0, color-mix(in srgb, var(--acc) 24%, #05160a) 100%);
}
/* Die Strecke: ein dunkler Streifen Rasen zwischen zwei Kreidelinien. */
[data-motiv="rasen"] .zw-bahn::before {
  content: ''; position: absolute; left: 0; right: calc(var(--fgr) / 2); top: 50%; height: max(12px, 3.4cqmin); transform: translateY(-50%); border-radius: .3cqmin;
  background:
    linear-gradient(var(--zw-fb-kreide), var(--zw-fb-kreide)) 0 0 / 100% max(1px, .2cqmin) no-repeat,
    linear-gradient(var(--zw-fb-kreide), var(--zw-fb-kreide)) 0 100% / 100% max(1px, .2cqmin) no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 30%, #04140a) 0 4cqmin, color-mix(in srgb, var(--acc) 20%, #020e06) 4cqmin 8cqmin);
  opacity: .92;
}
[data-motiv="rasen"] .zw-spur, [data-motiv="rasen"] .zw-zuwachs { height: max(6px, 1.7cqmin); border-radius: 99px; }
[data-motiv="rasen"] .zw-spur {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 56%, #fff) 0, var(--acc2) 46%, color-mix(in srgb, var(--acc2) 70%, #0b1430) 100%);
  box-shadow: 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--zw-fb-kreide) 70%, transparent), 0 .1cqmin .2cqmin color-mix(in srgb, #000 40%, transparent);
}
[data-motiv="rasen"] .zw-zuwachs {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 50%, #f2fff0) 0, var(--acc) 50%, color-mix(in srgb, var(--acc) 70%, #03200a) 100%);
  box-shadow: 0 0 .8cqmin color-mix(in srgb, var(--acc) 55%, transparent), 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--zw-fb-kreide) 50%, transparent);
}
[data-motiv="rasen"] .zw-schweif { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 50%, transparent)); }
/* Das Tor am Ende der Strecke: Die Linie ist die Torlinie aus Kreide, daran groß das Tor von vorn — Pfosten, Latte, Netz. Es steht
   LINKS der Linie (es verdeckt die Punkte nicht — Lehre aus Sagenwelt und Weltall) und so tief, dass die Figur am Ziel davor steht. */
[data-motiv="rasen"] .zw-linie { width: .4cqmin; top: 46%; bottom: 8%; border-radius: 0; background: var(--zw-fb-kreide); opacity: .9; }
[data-motiv="rasen"] .zw-linie::before {
  content: ''; position: absolute; left: 50%; top: -4.4cqmin; width: 11cqmin; height: 6.4cqmin; margin-left: -10.6cqmin;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 46'%3E%3Cg stroke='%23f2f7ee' stroke-opacity='.34' stroke-width='.7'%3E%3Cpath d='M20 10v32M26 10v32M32 10v32M38 10v32M44 10v32M50 10v32M56 10v32M62 10v32M14 15h52M14 20h52M14 25h52M14 30h52M14 35h52'/%3E%3C/g%3E%3Cpath d='M14 10h52v32H14z' fill='none' stroke='%23f2f7ee' stroke-opacity='.4' stroke-width='.8'/%3E%3Cpath d='M8 6l6 4M72 6l-6 4M8 44l6-2M72 44l-6-2' stroke='%23f2f7ee' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M8 44V6h64v38' fill='none' stroke='%23f2f7ee' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M2 44.6h76' stroke='%23f2f7ee' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .3cqmin .5cqmin color-mix(in srgb, #000 50%, transparent));
}
/* Der Ball des Führenden (weiß mit schwarzen Feldern — kein Rollenton, der Ball ist ein Ding der Welt). */
[data-motiv="rasen"] .zw-fahne { width: calc(var(--fgr) * .7); height: calc(var(--fgr) * .7); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23fbfcfa' stroke='%23161a17' stroke-width='1.6'/%3E%3Cpath d='M20 13l6.7 4.9-2.6 7.9h-8.2l-2.6-7.9z' fill='%23161a17'/%3E%3Cpath d='M20 13V5.6M26.7 17.9l7-2.3M24.1 25.8l4.3 6M15.9 25.8l-4.3 6M13.3 17.9l-7-2.3' stroke='%23161a17' stroke-width='1.4'/%3E%3Cpath d='M16.2 2.6L20 5.6l3.8-3zM37.6 13.6l-3.9 2 .3 4.6 3.9.6zM31.8 34.4l-3.4-2.6-4.4 1.2-.2 4.3zM8.2 34.4l3.4-2.6 4.4 1.2.2 4.3zM2.4 13.6l3.9 2-.3 4.6-3.9.6z' fill='%23161a17'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .2cqmin .3cqmin rgba(0, 0, 0, .6)); }
[data-motiv="rasen"] .zw-fahne svg { display: none; }
/* Unten läuft die Fußzeile („Als Nächstes: …") — dort endet der Rasen am Rand; er bleibt nur oben (Lehre aus Geschichte: Schrift im
   Fries hatte 2,1 : 1). */
[data-motiv="rasen"] .qn-buehne:has(.zw-fuss)::after {
  background:
    radial-gradient(circle at 0 0, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 0 0 / 6cqmin 6cqmin no-repeat,
    radial-gradient(circle at 100% 0, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 100% 0 / 6cqmin 6cqmin no-repeat,
    linear-gradient(var(--rasen-kreide), var(--rasen-kreide)) 0 2.2cqmin / 100% max(1px, .26cqmin) no-repeat,
    var(--rasen-streifen) 0 0 / 100% 2.2cqmin no-repeat;
}