/* =====================================================================
   DER ZWISCHENSTAND · GESTALT „BÜHNE" (zwischenstand-buehne.js)
   Die Welt des Sets aus dem Finale, abgedunkelt; darauf die Bauteile des
   Finales (Medaillon .sp-f-*, Karte .sp-f-fakt — spiel.css). Nur Rollen-
   farben, Maße in cqmin, bewegt werden transform und opacity. Liegt wie
   zwischenstand.css in keiner Ebene.
     .zwb-klein   bis vier Spieler: kein Feld, rechts die Geschichten
     .zwb-mittel  bis zwölf: das Feld in einer Spalte
     .zwb-gross   darüber: das Feld in zwei Spalten
   ===================================================================== */
.zwb { position: relative; overflow: hidden; }
/* Nur die eigenen Teile über die Kulisse heben — Zahnrad, Einstellungsblatt und Host-Krone hängen absolut in der Bühne (online.css) und dürfen nicht mitfließen. */
.zwb > .qn-kopf, .zwb > .zw-leib { position: relative; z-index: 1; }

/* Die Kulisse (Tobi 06.11.: „Hintergrund dunkler — man muss alles gut lesen können"): die Welt bleibt erkennbar, die Schrift steht auf Dunkel. */
/* Abgedunkelt durch einen Schleier, nicht per filter: ein Filter auf der ganzen, fahrenden Welt kostete beim Erscheinen gut 300 ms. */
.zwb > .qn-szene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g0) 55%, transparent), color-mix(in srgb, var(--g0) 25%, transparent) 55%, color-mix(in srgb, var(--g0) 45%, transparent)),
    rgba(0, 0, 0, .5);
}
.zwb .zw-titel, .zwb .zw-ober, .zwb-name, .zwb-plus, .zwb-fober, .zwb .sp-f-ab {
  text-shadow: 0 .2cqmin 1.4cqmin color-mix(in srgb, var(--g0) 85%, transparent);
}
.zwb-ober { white-space: nowrap; overflow: hidden; }

.zwb-haupt { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 2.6cqmin; min-height: 0; min-width: 0; }
.zwb-klein .zwb-haupt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* ---------- Die Spitze ---------- */
.zwb-spitze { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.4cqmin; min-height: 0; }
.zwb-vorn { display: grid; grid-template-columns: repeat(var(--vn, 1), minmax(0, 1fr)); align-items: center; gap: 2cqmin; min-height: 0; }
.zwb-vorn[data-vn="2"] { --vn: 2; }
.zwb-vorn[data-vn="3"] { --vn: 3; }
.zwb-fuehrer {
  display: grid; justify-items: center; align-content: center; row-gap: .6cqmin; min-width: 0; text-align: center;
  opacity: 0; transform: translateY(2cqmin) scale(.96);
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp, var(--k-ein));
}
.zw-s1 .zwb-fuehrer { opacity: 1; transform: none; transition-delay: calc(var(--v, 0) * 1ms); }
/* Einer vorn: Medaillon und Zahlen nebeneinander. */
.zwb-vorn[data-vn="1"] .zwb-fuehrer { grid-template-columns: auto minmax(0, 1fr); justify-items: start; column-gap: 3.4cqmin; text-align: left; }
.zwb-vorn[data-vn="1"] .zwb-fwer { justify-items: start; }
/* Der Führungswechsel: das Medaillon dreht weg, der Neue dreht herein. */
.zwb-fuehrer.dreht { transform: perspective(80cqmin) rotateY(80deg) scale(.94); opacity: .2; transition: transform calc(var(--d-mittel, .3s) * .9) ease-in, opacity calc(var(--d-mittel, .3s) * .9) ease-in; transition-delay: 0s; }
.zwb-fuehrer.neu { animation: zwb-herein calc(var(--d-lang) * 1.3) var(--k-schnapp, ease-out) both; }
@keyframes zwb-herein { from { transform: perspective(80cqmin) rotateY(-80deg) scale(.94); opacity: .2; } to { transform: none; opacity: 1; } }

.zwb-med.sp-f-platz { height: auto; display: grid; justify-items: center; align-content: center; }
.zwb-med .sp-f-figur { margin-bottom: 0; }
.zwb-fwer { display: grid; justify-items: center; row-gap: .5cqmin; min-width: 0; max-width: 100%; }
.zwb-fober { font: 800 max(9px, 2.1cqmin)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.zwb-fuehrer.neu .zwb-fober { color: var(--jetzt); }
.zwb-name { max-width: 100%; font: 800 calc(5.4cqmin * var(--zw-s, 1) * var(--vk, 1))/1.05 var(--f-display); color: var(--t0); white-space: nowrap; overflow: hidden; }
.zwb-pkt {
  font: 900 calc(11.5cqmin * var(--zw-s, 1) * var(--vk, 1))/.95 var(--f-display); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--acc2), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .3cqmin 1.2cqmin color-mix(in srgb, var(--g0) 80%, transparent));
}
.zwb-plus { font: 800 max(9px, 1.9cqmin)/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--t1); }
.zwb-vorn[data-vn="2"] .zwb-name { font-size: calc(4.4cqmin * var(--zw-s, 1) * var(--vk, 1)); }
.zwb-vorn[data-vn="2"] .zwb-pkt { font-size: calc(8cqmin * var(--zw-s, 1) * var(--vk, 1)); }
.zwb-vorn[data-vn="3"] .zwb-name { font-size: calc(3.6cqmin * var(--zw-s, 1) * var(--vk, 1)); }
.zwb-vorn[data-vn="3"] .zwb-pkt { font-size: calc(6.4cqmin * var(--zw-s, 1) * var(--vk, 1)); }
.zwb-vorn[data-vn="3"] .zwb-plus { font-size: max(9px, 1.6cqmin); letter-spacing: .08em; }

/* ---------- Dahinter: die Jäger ---------- */
.zwb-jagd { display: grid; gap: 1cqmin; }
.zwb-jaeger {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 2cqmin;
  padding: .9cqmin 2.2cqmin .9cqmin 1.2cqmin; border-radius: 2cqmin;
  background: linear-gradient(100deg, color-mix(in srgb, var(--acc2) 16%, var(--g2)), color-mix(in srgb, var(--g2) 84%, transparent) 70%);
  box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 10%, transparent);
  opacity: 0; transform: translateX(-3cqmin);
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-ein);
}
.zw-s1 .zwb-jaeger { opacity: 1; transform: none; transition-delay: calc(var(--v, 0) * 1ms); }
.zwb-jaeger.dreht { transform: perspective(80cqmin) rotateX(80deg); opacity: .2; transition: transform calc(var(--d-mittel, .3s) * .9) ease-in, opacity calc(var(--d-mittel, .3s) * .9) ease-in; transition-delay: 0s; }
.zwb-jaeger.neu { animation: zwb-kippt calc(var(--d-lang) * 1.2) var(--k-schnapp, ease-out) both; }
@keyframes zwb-kippt { from { transform: perspective(80cqmin) rotateX(-80deg); opacity: .2; } to { transform: none; opacity: 1; } }
.zwb-jaeger .sp-f-medaille { font-size: calc(var(--fgr) * .2); }
.zwb-jwer { display: grid; gap: .3cqmin; min-width: 0; }
.zwb-jname { font: 800 calc(3.6cqmin * var(--zw-s, 1))/1.1 var(--f-display); color: var(--t0); white-space: nowrap; overflow: hidden; }
.zwb-jzeile { display: flex; align-items: baseline; gap: 1.2cqmin; min-width: 0; }
.zwb-jpkt { font: 800 calc(3.2cqmin * var(--zw-s, 1))/1 var(--f-mono); color: var(--t1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zwb-rueck { display: grid; justify-items: end; }
.zwb-rueck b { font: 900 calc(5cqmin * var(--zw-s, 1))/1 var(--f-display); color: var(--jetzt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zwb-rueck.gleich b { color: var(--acc); }
.zwb-rueck i { font: 800 max(9px, 1.7cqmin)/1.1 var(--f-display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--t1); }

/* Wer Plätze gutmacht: ein Balken in --jetzt an der Zeile, mit dem Tausch (kein Licht, kein Schein). Die Pfeile sind .zw-sprung des Rennens. */
.zw-nach .zwb-jaeger.zieht { box-shadow: inset .6cqmin 0 0 var(--jetzt), inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 10%, transparent); }
.zw-nach .zwb-z.zieht { box-shadow: inset .5cqmin 0 0 var(--jetzt); }

/* ---------- Rechts: das Feld und die Geschichten ---------- */
.zwb-seite { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.6cqmin; min-height: 0; min-width: 0; }
.zwb-klein .zwb-seite { grid-template-rows: minmax(0, 1fr); }
.zwb-feld {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1cqmin; min-height: 0; padding: 1.6cqmin 1.8cqmin; border-radius: 2.2cqmin;
  background: color-mix(in srgb, var(--g1) 74%, transparent); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 10%, transparent);
}
.zwb-liste {
  display: grid; grid-template-columns: repeat(var(--sp), minmax(0, 1fr)); grid-auto-flow: column;
  grid-template-rows: repeat(var(--zn), minmax(0, 6.4cqmin)); gap: .6cqmin 1.2cqmin; min-height: 0; align-content: start;
}
.zwb-gross .zwb-liste { grid-template-rows: repeat(var(--zn), minmax(0, 5.6cqmin)); }
.zwb-z {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 3.8cqmin 4.6cqmin minmax(0, 1fr) 4.4cqmin minmax(5.6cqmin, auto); align-items: center; column-gap: 1cqmin;
  padding: 0 1.2cqmin 0 .6cqmin; border-radius: 1.3cqmin; min-height: 0; background: color-mix(in srgb, var(--g2) 72%, transparent);
  opacity: 0; transform: translateX(2cqmin); transition: opacity var(--d-mittel, .3s) var(--k-ein), transform var(--d-mittel, .3s) var(--k-ein);
}
.zw-s1 .zwb-z { opacity: 1; transform: none; transition-delay: calc(var(--v, 0) * 1ms); }
.zwb-gross .zwb-z { grid-template-columns: 3.4cqmin 4cqmin minmax(0, 1fr) auto minmax(5cqmin, auto); column-gap: .8cqmin; }
.zwb-z.du { box-shadow: inset 0 0 0 .28cqmin var(--du); }
.zwb-z.mehr { grid-template-columns: 1fr; justify-items: center; background: transparent; box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 14%, transparent); }
.zwb-z.mehr b { font: 800 max(10px, 2.4cqmin)/1 var(--f-display); color: var(--t1); }
.zwb-r { font: 900 max(10px, 2.8cqmin)/1 var(--f-display); color: var(--t1); text-align: center; font-variant-numeric: tabular-nums; }
/* Die kleine Figur im Ring des Medaillons (.sp-f-ring), ohne seinen Schein. */
.zwb-av { display: block; width: 4.6cqmin; height: 4.6cqmin; --ring: color-mix(in srgb, var(--t0) 26%, transparent); }
.zwb-av .sp-f-ring { padding: 8%; box-shadow: 0 0 0 .22cqmin var(--ring); }
.zwb-gross .zwb-av { width: 4cqmin; height: 4cqmin; }
.zwb-av .qn-av { width: 100%; height: 100%; }
.zwb-zn { font: 800 max(9px, calc(2.8cqmin * var(--zw-s, 1)))/1.1 var(--f-display); color: var(--t0); white-space: nowrap; overflow: hidden; }
.zwb-gross .zwb-zn { font-size: max(9px, calc(2.5cqmin * var(--zw-s, 1))); }
.zwb-zs { text-align: center; }
.zwb-zp { font: 800 max(10px, calc(2.9cqmin * var(--zw-s, 1)))/1 var(--f-mono); color: var(--t0); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zwb-gross .zwb-zp { font-size: max(10px, calc(2.5cqmin * var(--zw-s, 1))); }

/* Die Karten füllen, was die Spalte übrig hat (keine Leerfläche unter ihnen), aber nie höher als 26 cqmin. */
.zwb-gesch { display: grid; grid-auto-rows: minmax(10cqmin, 1fr); gap: 1.2cqmin; min-height: 0; align-content: stretch; }
.zwb .zwb-fakt { max-height: 26cqmin; min-height: 0; align-self: stretch; }
.zwb .zwb-fakt .sp-f-fzahl { font-size: 7cqmin; }
.zwb .zwb-fakt .sp-f-fsatz { font-size: max(10px, 2.6cqmin); -webkit-line-clamp: 2; }
.zwb-gross .zwb-fakt .sp-f-fzahl { font-size: 6cqmin; }
.zwb-gross .zwb-fakt .sp-f-fsatz { font-size: max(10px, 2.3cqmin); }

@media (prefers-reduced-motion: reduce) {
  .zwb-fuehrer, .zwb-jaeger, .zwb-z { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .zwb-fuehrer.neu, .zwb-jaeger.neu, .springt { animation: none !important; }
}

/* Kleine Runde (bis vier): Die Spitze steht in der Mitte der Höhe, die Führung größer — keine Lücke zwischen „Vorn" und „Dahinter". */
.zwb-klein .zwb-vorn[data-vn="1"] .zwb-med { --fgr: calc(25cqmin * var(--vk, 1)) !important; }
.zwb-klein .zwb-vorn[data-vn="1"] .zwb-pkt { font-size: calc(13.5cqmin * var(--zw-s, 1) * var(--vk, 1)); }
.zwb-klein .zwb-vorn[data-vn="1"] .zwb-name { font-size: calc(6cqmin * var(--zw-s, 1) * var(--vk, 1)); }


/* ---------- Der Abend (bis sieben Spieler, höchstens sechs Runden): die Runden als Leiste ---------- */
.zwb-mit-abend .zwb-seite { grid-template-rows: auto auto minmax(0, 1fr); }
.zwb-mit-abend.zwb-klein .zwb-seite { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.zwb-abend {
  display: grid; gap: 1.4cqmin; padding: 1.8cqmin 2cqmin 2cqmin; border-radius: 2.2cqmin;
  background: color-mix(in srgb, var(--g1) 74%, transparent); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 10%, transparent);
}
.zwb-leiste { position: relative; display: grid; grid-template-columns: repeat(var(--rn), minmax(0, 1fr)); gap: 1cqmin; }
/* Die Linie hinter den Punkten: von der Mitte des ersten bis zur Mitte des letzten. */
.zwb-leiste::before { content: ""; position: absolute; top: 2.6cqmin; left: calc(50% / var(--rn)); right: calc(50% / var(--rn)); height: .4cqmin; border-radius: .2cqmin;
  background: color-mix(in srgb, var(--t0) 16%, transparent); }
.zwb-schritt {
  position: relative; display: grid; justify-items: center; align-content: start; row-gap: .7cqmin; text-align: center; min-width: 0;
  opacity: 0; transform: translateY(1cqmin); transition: opacity var(--d-mittel, .3s) var(--k-ein), transform var(--d-mittel, .3s) var(--k-ein);
}
.zw-s1 .zwb-schritt { opacity: 1; transform: none; transition-delay: calc(var(--v, 0) * 1ms); }
.zwb-punkt {
  display: grid; place-items: center; width: 5.2cqmin; height: 5.2cqmin; border-radius: 50%; font: 900 max(10px, 2.6cqmin)/1 var(--f-display); font-style: normal;
  color: var(--t1); background: var(--g2); box-shadow: 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 22%, transparent);
}
.zwb-schritt.gespielt .zwb-punkt { background: color-mix(in srgb, var(--acc) 34%, var(--g2)); color: var(--t0); box-shadow: 0 0 0 .3cqmin color-mix(in srgb, var(--acc) 60%, transparent); }
.zwb-schritt.eben .zwb-punkt { background: var(--acc); color: var(--auf-acc); box-shadow: 0 0 0 .45cqmin color-mix(in srgb, var(--acc) 45%, transparent); }
.zwb-schritt.naechste .zwb-punkt { background: var(--g1); color: var(--jetzt); box-shadow: 0 0 0 .4cqmin var(--jetzt); }
.zwb-rname {
  max-width: 100%; max-height: 2.3em; overflow: hidden; font: 800 max(10px, calc(2.6cqmin * var(--zw-s, 1)))/1.12 var(--f-display); color: var(--t1);
  text-wrap: balance; overflow-wrap: normal; hyphens: manual;
}
.zwb-schritt.eben .zwb-rname, .zwb-schritt.naechste .zwb-rname { color: var(--t0); }
.zwb-rwort { font: 800 max(9px, 1.6cqmin)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.zwb-schritt.naechste .zwb-rwort { color: var(--jetzt); }

/* Vor dem Tausch gelten die alten Plätze und Punkte — der Rückstand zur Spitze (gerechnet am Endstand) kommt erst mit ihm. */
.springt { animation: zwb-springt var(--d-lang) var(--k-schnapp, ease-out) both; }
@keyframes zwb-springt { from { transform: scale(1.5); } to { transform: none; } }
.zwb-ohne-seite .zwb-haupt { grid-template-columns: minmax(0, 1fr); }
.zwb-ohne-seite .zwb-seite { display: none; }

/* Die Jäger wachsen mit dem freien Platz (--jk aus zwischenstand-buehne.js, 0,72 … 1,8; online unter dem Pult auch kleiner). */
.zwb-jaeger { padding: calc(.9cqmin * var(--jk, 1)) calc(2.2cqmin * var(--jk, 1)) calc(.9cqmin * var(--jk, 1)) calc(1.2cqmin * var(--jk, 1)); column-gap: calc(2cqmin * var(--jk, 1)); border-radius: calc(2cqmin * var(--jk, 1)); }
.zwb-jaeger .zwb-med { --fgr: calc(9.6cqmin * var(--jk, 1)) !important; }
.zwb-jname { font-size: calc(3.6cqmin * var(--zw-s, 1) * var(--jk, 1)); }
.zwb-jpkt { font-size: calc(3.2cqmin * var(--zw-s, 1) * var(--jk, 1)); }
.zwb-rueck b { font-size: calc(5cqmin * var(--zw-s, 1) * var(--jk, 1)); }
.zwb-rueck i { font-size: max(9px, calc(1.7cqmin * var(--jk, 1))); }
.zwb-jzeile .zw-sprung { font-size: max(9px, calc(2cqmin * var(--jk, 1))); }
/* SYMMETRISCH (Tobi 06.11.: „unten soll es gleich weit unten sein"): Beide Spalten enden an derselben Linie. Links sitzt die Jagd
   unten (zwei Zeilen, keine leere dritte mehr), rechts füllen die Karten bis zum Rand — ohne Deckel. */
.zwb-spitze { grid-template-rows: minmax(0, 1fr) auto; }
.zwb .zwb-fakt { max-height: none; }
.zwb-klein .zwb-seite { grid-template-rows: auto minmax(0, 1fr); }
.zwb-klein:not(.zwb-mit-abend) .zwb-seite { grid-template-rows: minmax(0, 1fr); }

/* ---------------------------------------------------------------------
   DAS DUELL (zu zweit): die beiden gegeneinander, dazwischen Abstand und
   Tau (die Schiene des Sets); darunter Runde für Runde und die Geschichten.
   --------------------------------------------------------------------- */
.zwb-dhaupt { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.6cqmin; min-height: 0; min-width: 0; }
.zwb-dzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30cqmin) minmax(0, 1fr); align-items: center; gap: 2cqmin; min-height: 0; }
.zwb-dseite {
  display: grid; justify-items: center; align-content: center; row-gap: .6cqmin; min-width: 0; text-align: center;
  opacity: 0; transform: translateY(2cqmin) scale(.96); transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp, var(--k-ein));
}
.zwb-dseite.rechts { transition-delay: .12s; }
.zw-s1 .zwb-dseite { opacity: 1; transform: none; }
.zwb-dseite .zwb-name { margin-top: 1cqmin; }
.zwb-dmitte { display: grid; justify-items: center; align-content: center; row-gap: .8cqmin; min-width: 0; }
.zwb-dabstand { font: 900 calc(9cqmin * var(--zw-s, 1) * var(--vk, 1))/.95 var(--f-display); color: var(--jetzt); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 .2cqmin 1.4cqmin color-mix(in srgb, var(--g0) 85%, transparent); }
.zwb-dwort { font: 800 max(9px, 1.9cqmin)/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--t1); }
/* Das Tau: die Schiene des Sets, der Knoten steht auf der Seite des Führenden und wandert mit der Runde. */
.zwb-dtau { position: relative; display: block; width: 100%; height: 3.6cqmin; margin-top: 1.2cqmin; --qs-h: 3.6cqmin; }
.zwb-dtau .qs-grundband { top: 0; height: 3.6cqmin; --qs-h: 3.6cqmin; }
.zwb-dtau .qs-schiene { border-radius: 1cqmin; }
.zwb-tauglas { position: absolute; inset: 0; border-radius: 1cqmin; background: color-mix(in srgb, var(--acc) 30%, var(--g1)); }
.zwb-dknoten {
  position: absolute; top: 50%; left: calc(var(--von) * 100%); width: 4.6cqmin; height: 4.6cqmin; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--jetzt); box-shadow: 0 0 0 .6cqmin var(--g0);
  transition: left calc(var(--d-xl) * 1.5) cubic-bezier(.3, 0, .2, 1);
}
.zw-lauf .zwb-dknoten { left: calc(var(--nach) * 100%); }

/* Runde für Runde */
.zwb-rfr {
  display: grid; gap: 1cqmin; padding: 1.6cqmin 2cqmin; border-radius: 2.2cqmin;
  background: color-mix(in srgb, var(--g1) 74%, transparent); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 10%, transparent);
  opacity: 0; transform: translateY(1.4cqmin); transition: opacity var(--d-lang) var(--k-ein) .25s, transform var(--d-lang) var(--k-ein) .25s;
}
.zw-s1 .zwb-rfr { opacity: 1; transform: none; }
.zwb-rgitter { display: grid; grid-template-columns: minmax(16cqmin, auto) repeat(var(--rn), minmax(0, 1fr)); column-gap: 1cqmin; }
.zwb-rsp { display: grid; grid-template-rows: 6.6cqmin 5.4cqmin 5.4cqmin; align-items: center; justify-items: center; border-radius: 1.4cqmin; min-width: 0; }
.zwb-rsp.wer { justify-items: start; }
.zwb-rsp.eben { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--acc) 45%, transparent); }
.zwb-rkopf { display: grid; justify-items: center; align-content: center; row-gap: .4cqmin; text-align: center; min-width: 0; max-width: 100%; padding: 0 .6cqmin; }
.zwb-rkopf .zwb-rname { max-height: 2.3em; }
.zwb-rkopf .zwb-rwort { font-style: normal; }
.zwb-rwer { display: flex; align-items: center; gap: 1.2cqmin; min-width: 0; max-width: 100%; }
.zwb-rwer b { font: 800 max(10px, calc(2.8cqmin * var(--zw-s, 1)))/1.1 var(--f-display); color: var(--t0); white-space: nowrap; overflow: hidden; }
.zwb-rz { font: 800 max(10px, calc(3.4cqmin * var(--zw-s, 1)))/1 var(--f-mono); color: var(--t1); font-variant-numeric: tabular-nums; }
.zwb-rz.sieg { color: var(--acc); }
.zwb-rz.offen { color: color-mix(in srgb, var(--t0) 30%, transparent); }
.zwb-rsp.offen .zwb-rname, .zwb-rsp.naechste .zwb-rname { color: var(--t1); }
.zwb-rsp.eben .zwb-rname { color: var(--t0); }

.zwb-dgesch { display: grid; grid-template-columns: repeat(var(--gn), minmax(0, 1fr)); gap: 1.2cqmin; }

/* Die Seiten des Duells: Medaillon außen, Name und Zahl zur Mitte. */
.zwb-dseite { grid-template-columns: auto minmax(0, 1fr); column-gap: 2.4cqmin; justify-items: start; text-align: left; }
.zwb-dseite .zwb-fwer { justify-items: start; }
.zwb-dseite.rechts { grid-template-columns: minmax(0, 1fr) auto; justify-items: end; text-align: right; }
.zwb-dseite.rechts .zwb-med { order: 2; }
.zwb-dseite.rechts .zwb-fwer { justify-items: end; }
.zwb-dseite .zwb-name { margin-top: 0; }
.zwb-dseite .zwb-pkt { font-size: calc(10cqmin * var(--zw-s, 1) * var(--vk, 1)); }

/* Ohne Fuß: Kopf, Schlagzeile, dann die Bühne bis an den unteren Rand. */
.zwb .zw-leib { grid-template-rows: auto minmax(0, 1fr); padding-bottom: 2.4cqmin; }
/* Feld ohne Geschichte darunter: Es füllt die Spalte bis unten, die Zeilen teilen die Höhe. */
.zwb-ohne-gesch .zwb-seite { grid-template-rows: auto minmax(0, 1fr); }
.zwb-ohne-gesch:not(.zwb-mit-abend) .zwb-seite { grid-template-rows: minmax(0, 1fr); }
.zwb-ohne-gesch .zwb-liste { grid-template-rows: repeat(var(--zn), minmax(0, 1fr)); }
.zwb-ohne-gesch .zwb-z { max-height: none; }

/* =====================================================================
   KACHELN (statt einer großen Karte) und DER AUFTRITT (Tobi 06.11.: „das muss alles deutlich besser animiert werden … eine
   wirklich schöne Animation mit Wow-Effekt"). Ohne Licht, ohne Schein — die Wirkung kommt aus der Bewegung:
     Kamera     die Welt des Sets fährt langsam heran (die ganzen neun Sekunden)
     Führung    der Ring zeichnet sich einmal herum, die Figur springt hinein, die Zahl landet mit einem Schlag
     Jäger      federn von links herein, ihr Rückstand landet im Tausch
     Feld       steht erst in der alten Reihenfolge und sortiert sich im Tausch um (FLIP, zwischenstand-buehne.js)
     Abend      die Linie läuft bis zur gerade gespielten Runde, deren Punkt springt auf
     Kacheln    klappen eine nach der anderen auf
     Schlagzeile  „So stand es" weicht, die neue wischt von links herein
   ===================================================================== */
@property --zwb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Kacheln */
.zwb-gesch { grid-template-columns: repeat(var(--gk, 1), minmax(0, 1fr)); }
.zwb .zwb-kachel {
  grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6cqmin; row-gap: .3cqmin; padding: 1cqmin 1.8cqmin 1cqmin 1.4cqmin; border-radius: 1.8cqmin;
  min-height: 0; max-height: none; align-content: center;
  opacity: 0; transform: perspective(60cqmin) rotateX(-70deg) translateY(1.5cqmin); transform-origin: 50% 0;
  transition: opacity var(--d-mittel, .3s) var(--k-ein), transform calc(var(--d-lang) * 1.2) cubic-bezier(.34, 1.4, .64, 1);
}
.zwb .zwb-kachel.da { opacity: 1; transform: none; }
.zwb .zwb-kachel .sp-f-fzahl { font-size: 5cqmin; min-width: 6cqmin; }
.zwb .zwb-kachel .sp-f-fmarke { font-size: max(9px, 1.6cqmin); gap: .6cqmin; }
.zwb .zwb-kachel .sp-f-fmarke i { width: 2cqmin; height: 2cqmin; }
.zwb .zwb-kachel .sp-f-fsatz { font-size: max(10px, 2.1cqmin); -webkit-line-clamp: 2; }
.zwb .zwb-kachel .sp-f-fwm { width: 11cqmin; height: 11cqmin; right: -1.6cqmin; }
.zwb-gross .zwb-kachel .sp-f-fzahl, .zwb-duell .zwb-kachel .sp-f-fzahl { font-size: 4.6cqmin; }
.zwb-gesch { grid-auto-rows: minmax(0, 1fr); }
.zwb-dgesch { grid-template-columns: repeat(var(--gn), minmax(0, 1fr)); }

/* Kamera: die Welt fährt heran */
.zwb > .qn-szene { transform-origin: 50% 60%; animation: zwb-kamera calc(var(--k, 1) * 9.5s) cubic-bezier(.15, .55, .25, 1) both; }
@keyframes zwb-kamera { from { transform: scale(1.14) translateY(1.4%); } to { transform: scale(1.02); } }

/* Führung: Ring zeichnet sich, Figur springt hinein, Name und Zahl kommen nach */
.zwb-fuehrer .zwb-med .sp-f-figur::after {
  content: ""; position: absolute; inset: -.5cqmin; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -90deg, var(--ring) var(--zwb-a), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .8cqmin), #000 calc(100% - .7cqmin));
          mask: radial-gradient(farthest-side, transparent calc(100% - .8cqmin), #000 calc(100% - .7cqmin));
}
.zw-s1 .zwb-fuehrer .zwb-med .sp-f-figur::after { animation: zwb-ring calc(var(--d-xl) * 1.6) cubic-bezier(.6, 0, .2, 1) .15s both; }
@keyframes zwb-ring { from { --zwb-a: 0deg; } to { --zwb-a: 360deg; } }
.zwb-fuehrer .sp-f-ring > * { transform: scale(.2) rotate(-20deg); opacity: 0; transition: transform calc(var(--d-lang) * 1.4) cubic-bezier(.34, 1.7, .64, 1) .35s, opacity var(--d-mittel, .3s) var(--k-ein) .35s; }
.zw-s1 .zwb-fuehrer .sp-f-ring > * { transform: none; opacity: 1; }
.zwb-fuehrer .zwb-fwer > * { opacity: 0; transform: translateX(-4cqmin); transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) cubic-bezier(.22, 1.2, .36, 1); }
.zw-s1 .zwb-fuehrer .zwb-fwer > * { opacity: 1; transform: none; }
.zw-s1 .zwb-fuehrer .zwb-fwer > :nth-child(1) { transition-delay: .45s; }
.zw-s1 .zwb-fuehrer .zwb-fwer > :nth-child(2) { transition-delay: .55s; }
.zw-s1 .zwb-fuehrer .zwb-fwer > :nth-child(3) { transition-delay: .65s; }
.zw-s1 .zwb-fuehrer .zwb-fwer > :nth-child(4) { transition-delay: .75s; }
/* Die Zahl landet */
.landet { animation: zwb-landet calc(var(--d-lang) * 1.1) cubic-bezier(.34, 1.6, .64, 1) both; }
@keyframes zwb-landet { 0% { transform: scale(1.22); } 100% { transform: none; } }
.zwb-pkt, .zwb-dabstand, .zwb-rueck b { display: inline-block; transform-origin: 0 70%; }
.zwb-vorn:not([data-vn="1"]) .zwb-pkt, .zwb-dabstand, .zwb-rueck b, .zwb-dseite.rechts .zwb-pkt { transform-origin: 50% 70%; }

/* Jäger federn herein */
.zwb-jaeger { transform: translateX(-8cqmin); transition: opacity var(--d-lang) var(--k-ein), transform calc(var(--d-lang) * 1.3) cubic-bezier(.34, 1.45, .64, 1); }
.zw-s1 .zwb-jaeger:not(.dreht):not(.neu) { transition-delay: calc(500ms + var(--v, 0) * 1ms); }

/* Feld-Zeilen fallen von rechts ein */
.zwb-z { transform: translateX(5cqmin); transition: opacity var(--d-mittel, .3s) var(--k-ein), transform var(--d-lang) cubic-bezier(.22, 1.2, .36, 1); }
.zw-s1 .zwb-z { transition-delay: calc(700ms + var(--v, 0) * .6ms); }

/* Der Abend: die Linie läuft bis zur gerade gespielten Runde */
.zwb-leiste::after {
  content: ""; position: absolute; top: 2.6cqmin; left: calc(50% / var(--rn)); height: .4cqmin; border-radius: .2cqmin;
  width: calc((100% - 100% / var(--rn)) * var(--fort) / max(1, var(--rn) - 1)); background: var(--acc);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--d-xl) * 1.2) cubic-bezier(.6, 0, .2, 1) .6s;
}
.zw-s1 .zwb-leiste::after { transform: none; }
.zwb-punkt { position: relative; z-index: 1; }
.zwb-schritt.eben .zwb-punkt { animation: zwb-auf calc(var(--d-lang) * 1.2) cubic-bezier(.34, 1.8, .64, 1) 1.4s both; }
@keyframes zwb-auf { from { transform: scale(.4); } to { transform: none; } }

/* Schlagzeile: die neue wischt herein */
.zwb .zw-titel > span.b { clip-path: inset(-.3em 100% -.3em -.3em); opacity: 1; transform: none; transition: clip-path calc(var(--d-lang) * 1.4) cubic-bezier(.7, 0, .2, 1); }
.zwb.zw-nach .zw-titel > span.b { clip-path: inset(-.3em -2% -.3em -.3em); }
.zwb .zw-titel > span.a { transition: opacity var(--d-mittel, .3s) var(--k-ein), transform var(--d-mittel, .3s) var(--k-ein); }
.zwb.zw-nach .zw-titel > span.a { opacity: 0; transform: translateY(-1cqmin); }

/* Duell: die beiden kommen von ihren Seiten */
.zwb-dseite.links { transform: translateX(-10cqmin); }
.zwb-dseite.rechts { transform: translateX(10cqmin); }
.zw-s1 .zwb-dseite { transform: none; }
.zwb-dseite { transition: opacity var(--d-lang) var(--k-ein), transform calc(var(--d-lang) * 1.4) cubic-bezier(.34, 1.35, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .zwb > .qn-szene, .zwb-fuehrer .zwb-med .sp-f-figur::after, .landet, .zwb-schritt.eben .zwb-punkt { animation: none !important; }
  .zwb-fuehrer .zwb-med .sp-f-figur::after { --zwb-a: 360deg; }
  .zwb-kachel, .zwb-jaeger, .zwb-z, .zwb-dseite, .zwb-schritt, .zwb-abend, .zwb-feld, .zwb-fuehrer .sp-f-ring > *, .zwb-fuehrer .zwb-fwer > *, .zwb-leiste::after, .zwb .zw-titel > span { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Kleine Medaillons (drei vorn, Jäger): Die Medaille behält eine lesbare Größe. */
.zwb-vorn .zwb-med .sp-f-medaille, .zwb-dseite .zwb-med .sp-f-medaille { width: max(32%, 4.4cqmin); height: max(32%, 4.4cqmin); font-size: max(calc(var(--fgr) * .17), 2.5cqmin); }

/* Hohe Feld-Zeilen: alles wächst mit (--zk aus zwischenstand-buehne.js). */
.zwb-liste .zwb-zn { font-size: max(9px, calc(2.8cqmin * var(--zw-s, 1) * var(--zk, 1))); }
.zwb-liste .zwb-zp { font-size: max(10px, calc(2.9cqmin * var(--zw-s, 1) * var(--zk, 1))); }
.zwb-liste .zwb-r { font-size: max(10px, calc(2.8cqmin * var(--zk, 1))); }
.zwb-liste .zwb-av { width: calc(4.6cqmin * var(--zk, 1)); height: calc(4.6cqmin * var(--zk, 1)); }
.zwb-liste .zwb-z { grid-template-columns: calc(3.8cqmin * var(--zk, 1)) calc(4.6cqmin * var(--zk, 1)) minmax(0, 1fr) calc(4.4cqmin * var(--zk, 1)) minmax(5.6cqmin, auto); }
.zwb-gross .zwb-liste .zwb-z { grid-template-columns: 3.4cqmin 4cqmin minmax(0, 1fr) auto minmax(5cqmin, auto); }
.zwb-gross .zwb-liste .zwb-av { width: 4cqmin; height: 4cqmin; }
.zwb-liste .zwb-z.mehr { grid-template-columns: 1fr; }

/* DIE WELT OHNE LICHT (Regel: keine Hintergrundlichter — Schein, Kegel, Kreise, Flocken): Im Zwischenstand steht nur das Bild der
   Welt; ihr Leben (Kegel, Schein, Staub, Nebel — finale-leben.js) und die Schichten der Szene (Funken, Kegel, Kerzen — qn.js) laufen
   hier nicht. Das spart dazu Rechenzeit, während die Bühne hereinkommt. */
.zwb > .qn-szene > :not(.fk):not(.qsz-schleier):not(.qsz-bild) { display: none; }
.zwb > .qn-szene .fk .fl { display: none; }

/* Die Karten kommen mit ihrem Inhalt herein — kein leerer Kasten, in den erst später etwas fällt. */
.zwb-abend, .zwb-feld, .zwb-rfr, .zwb-jagd > .sp-f-ab { opacity: 0; transform: translateY(2cqmin); transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) cubic-bezier(.22, 1.2, .36, 1); }
.zw-s1 .zwb-abend { opacity: 1; transform: none; transition-delay: .25s; }
.zw-s1 .zwb-jagd > .sp-f-ab { opacity: 1; transform: none; transition-delay: .45s; }
.zw-s1 .zwb-feld { opacity: 1; transform: none; transition-delay: .55s; }
.zw-s1 .zwb-z { transition-delay: calc(650ms + var(--v, 0) * .5ms); }

/* Prüfbefunde (06.11.) */
.zwb-med .sp-f-medaille { z-index: 1; }   /* über dem Zeichenring */
.zwb-pkt { max-width: 100%; }   /* einpassbar: sonst wäre das Element so breit wie sein Text */
.zwb-jpkt { min-width: 0; overflow: hidden; }
.zw-nach .zwb-z.zieht.du { box-shadow: inset .5cqmin 0 0 var(--jetzt), inset 0 0 0 .28cqmin var(--du); }
.zwb-gross .zwb-liste .zwb-zn { font-size: max(9px, calc(2.5cqmin * var(--zw-s, 1) * var(--zk, 1))); }
.zwb-gross .zwb-liste .zwb-zp { font-size: max(10px, calc(2.5cqmin * var(--zw-s, 1) * var(--zk, 1))); }
.zwb-gross .zwb-liste .zwb-r { font-size: max(10px, calc(2.5cqmin * var(--zk, 1))); }
.zwb-gross .zwb-liste .zwb-z { grid-template-columns: calc(3.8cqmin * var(--zk, 1)) calc(4cqmin * var(--zk, 1)) minmax(0, 1fr) auto minmax(5cqmin, auto); }
.zwb-gross .zwb-liste .zwb-av { width: calc(4cqmin * var(--zk, 1)); height: calc(4cqmin * var(--zk, 1)); }
.zwb-gross .zwb-liste .zwb-z.mehr { grid-template-columns: 1fr; }

/* Jäger rechts: das Plus der Runde (statt des Rückstands). Ohne Punkte leise. */
.zwb-jplus.null b { color: var(--t2, var(--t1)); }
.zwb-gesch > .zwb-breit { grid-column: 1 / -1; }