/*
 * Buchmacher: Kopf mit Rennen und Wettstand, die Quotentafel mit der Rennbahn (schmal Spuren, auf dem Schreibtisch ein
 * Oval mit dem Vier-Phasen-Innenfeld), der Wettschalter aus den Bahnen mit ihren Jetons und dem Abreißzettel,
 * darunter Ticker und Rangliste im Pult.
 * Anzeigeleiste, Brettrand, Abzeichen, Tafel und die Wand mit Lampe und Tresen dahinter (`TISCHE.apparat`) stehen
 * als Rahmen des Spielfelds in css/arena.css.
 *
 * Eine Bahn ist eine Zeile über die ganze Breite ihrer Spalte; gesetzt wird an ihren drei Jetons, jeder mindestens 44
 * Pixel in beide Richtungen. Nie nur ein Farbton: Favorit und Sieger tragen ein Wort, die Bahn der eigenen Wette eine
 * Kreidekante und einen zweiten Ring um den Nummernkasten, der gesperrte Schein eine gestrichelte Kante, ein Verlust ein
 * Minus, ein Kredit Wort, Minus und gestrichelte Kante. Jede Regel auf der gemeinsamen Fläche hängt an
 * [data-ar-spiel='buchmacher'] oder an den Klassen ar-bu.
 */

.ar-spielfeld[data-ar-spiel='buchmacher'] {
  --ar-brettbreite: min(36rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

@supports (width: 1cqw) {
  .ar-spielfeld[data-ar-spiel='buchmacher'] {
    --ar-brettbreite: min(36rem, 100cqw);
  }
}

/* Im flachen Querformat steht die Anzeigeleiste links neben dem Brett und braucht ihre 15rem, sonst stünden die Namen
   der Plaketten Buchstabe für Buchstabe untereinander. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='buchmacher'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='buchmacher'] {
      --ar-brettbreite: min(30rem, 100cqw);
    }
  }
}

/*
 * Auf dem Schreibtisch nimmt das Brett die ganze Bühne (--ar-feld), so breit wie der Kopf des Hauses: Die Anzeigeleiste
 * steht darüber, und das Oval wird so breit, wie die Bühne neben dem Pult hergibt. Gelesen wird --ar-feld nur hier auf dem Spielfeld, denn
 * cqw löst sich erst dort auf, wo die Variable gebraucht wird. Schmal und im flachen Querformat gelten die Regeln darüber.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='buchmacher'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/* Außen um das Raster: Nach seiner Breite fragen Oval und Pult des Schreibtischs, denn ein Raster kann nicht nach seiner
   eigenen fragen. */
.ar-bu-mass {
  container: ar-bu-mass / inline-size;
}

/*
 * Die Bahnen messen das Brett und nicht die Bühne: Im flachen Querformat ist die Bühne breiter als 30rem, das Brett
 * daneben aber nicht.
 *
 * DIE FÜNF STALLFARBEN. Jedes Pferd des Rennens trägt seine eigene und dazu seine Startnummer; die Farbe steht nie
 * allein, denn in diesem Haus trägt keine Farbe eine Auskunft für sich. Gesetzt werden sie am Läufer, an der Bahnzeile
 * und an den drei Tafeln des Innenfelds, gelesen über --ar-bu-pferdfarbe.
 *
 * ZWEI DAVON SIND NACHGERECHNET. Marineblau hält gegen den Belag des Ovals (--ar-noir-3) nur 1,3 : 1 — der Körper trägt
 * deshalb in grafik.js eine Kreidekontur, und ohne sie wäre das vierte Pferd auf der Bahn nicht zu finden. Kreideweiß
 * liegt dicht an --ar-kreide; dort trägt die Kontur nichts mehr, dafür steht der helle Körper allein gegen den dunklen
 * Belag.
 *
 * SIE STEHEN IN EINER EIGENEN REGEL, denn die Aufdeckung der Schlussrechnung steht in der Tafel des Rahmens und damit
 * außerhalb des Bretts. Zwei Tabellen wären zwei Wahrheiten über dieselben fünf Ställe.
 */
.ar-bu,
.ar-bu__aufdeckung {
  --ar-bu-pferd-1: #d4af37;
  --ar-bu-pferd-2: #9e2a2b;
  --ar-bu-pferd-3: #2d6a4f;
  --ar-bu-pferd-4: #1d3557;
  --ar-bu-pferd-5: #f4efe6;
  /*
   * JE STALLFARBE EINE TINTE, und die ist nachgerechnet und nicht gewählt. Die Startnummer steht auf der Farbe ihres
   * Pferds; in Tusche hielt sie auf Dunkelrot 2,64 : 1, auf Smaragd 3,08 und auf Marineblau 1,59 — drei von fünf Ziffern
   * waren nicht zu lesen. Mit dieser Tabelle hält die schlechteste 5,28 : 1: Gold und Kreideweiß tragen Tusche (9,35 und
   * 17,17), die drei dunklen Kreide (6,16, 5,28 und 10,22).
   */
  --ar-bu-tinte-1: var(--ar-noir);
  --ar-bu-tinte-2: var(--ar-kreide);
  --ar-bu-tinte-3: var(--ar-kreide);
  --ar-bu-tinte-4: var(--ar-kreide);
  --ar-bu-tinte-5: var(--ar-noir);
}

.ar-bu {
  position: relative;
  display: grid;
  gap: 0.5rem;
  container-type: inline-size;
}

/*
 * DER BLITZ DER ZIELKAMERA: ein Einzelbild Licht über dem ganzen Brett, hart an und hart aus. Wann er kommt, entscheidet
 * brett.js — nur zu einem echten Zielfoto, nur durch blitzErlaubt() (WCAG 2.3.1) und nicht, wer wenig Bewegung bestellt
 * hat. Der Riegel steht dort und nicht hier, weil er auch den Zeitstempel des Hauses sparen muss; hier stünde er zweimal.
 */
.ar-bu[data-ar-bu-blitz]::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--ar-kreide);
  opacity: 0.5;
  pointer-events: none;
}

/*
 * DER WETTSCHALTER: die Bahnen und der Schein, ein Block. Sie standen an zwei Enden des Bretts — die Bahnen im
 * Innenfeld des Ovals, der Schein in einer Spalte daneben —, und wer setzen wollte, wählte oben das Pferd und unten den
 * Betrag. Jetzt liegt beides zusammen, und der Stempel steht darunter.
 */
.ar-bu__schalter {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.ar-bu__schalter > [data-ar-bu-teil]:empty {
  display: none;
}

/*
 * Ticker und Rangliste stehen im Pult. Ein Teil ohne Inhalt, etwa der Ticker vor dem ersten Rennen, soll darin keine
 * Fuge aufreißen. Das Oval steht nur auf dem Schreibtisch da; auf dem Telefon zeichnet es nichts und misst null.
 */
.ar-bu__pult {
  display: grid;
  gap: 0.5rem;
}

.ar-bu__pult > [data-ar-bu-teil]:empty,
.ar-bu__oval {
  display: none;
}

/* ------------------------------------------------------------ Kopf */

.ar-bu__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem 0.8rem;
}

.ar-bu__rennen,
.ar-bu__gesetzt {
  margin: 0;
}

.ar-bu__gesetzt[data-ar-bu-still] {
  visibility: hidden;
}

/*
 * DER KOPF HÄLT SEINE HÖHE ÜBER DEN STARTSCHUSS. „Wetten offen“ und „Das Rennen läuft“ sind verschieden lang, und auf dem
 * Telefon brach die Zeile einmal um und einmal nicht; mit den Marken, die beim Start aus dem Kopf fielen, rückte die
 * Tafel um zehn Pixel, auch wenn sie ganz im Bild stand. Die Lage hat deshalb immer ihre eigene Zeile unter Rennen und
 * Distanz, und die Marken bleiben während des Rennens unsichtbar stehen (brett.js). Das Rennen fängt dabei bei null an
 * und wächst: So stehen die Marken daneben, solange beide in eine Zeile passen, statt dass seine volle Länge sie
 * darunter schiebt.
 */
.ar-bu__rennen {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  min-width: min(100%, 13rem);
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ar-bu__lage {
  flex-basis: 100%;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

/*
 * DIE DISTANZ STEHT ALS PLAKETTE: im Kopf neben „Rennen 1 von 5“ und auf dem Wettschein neben seinem Titel. Sie ist die
 * eine Zahl, die vor dem Setzen etwas über das Rennen sagt — auf 1.400 Metern kommt ein Außenseiter öfter durch als auf
 * 2.800 —, und stand sie im Fließtext, las sie niemand. Der Grand Prix trägt die Kante im Funken und nicht in Kreide:
 * Er ist das letzte und längste Rennen, und die Farbe ist dort die zweite Auskunft neben dem Wort, nie die einzige.
 *
 * KEINE VERSALIEN: Aus „1.400 m“ würde „1.400 M“, und ein großes M ist ein Mega und kein Meter.
 */
.ar-bu__distanz {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 2px solid var(--ar-kreide);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  hyphens: none;
}

/* Im Wettschein-Block steht die Rennnummer in Versalien, die Distanz daneben nicht — aus demselben Grund. */
.ar-bu__buch-distanz {
  text-transform: none;
  letter-spacing: 0;
}

.ar-bu__distanz[data-ar-bu-art='grand_prix'] {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
}

.ar-bu__wer-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Gesetzt heißt Haken und durchgezogene Kreidekante, offen ein leerer Kasten und eine gestrichelte: nie nur ein Farbton. */
.ar-bu__wer {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.2rem;
  border: 2px dashed var(--ar-kante-griff);
}

.ar-bu__wer[data-ar-bu-gesetzt] {
  border-style: solid;
  border-color: var(--ar-kreide);
}

.ar-bu__wer-marke,
.ar-bu__wer-zeichen {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* ------------------------------------------------------------ Rennbahn */

/*
 * DIE QUOTENTAFEL: die Schiefertafel eines Buchmachers. Ein schwarzer Grund, ein Rahmen aus Blech, darüber „Siegwette“
 * und „Quote“ in Kreide und ein Kreidestrich, der nicht ganz gerade ist — was ein Mensch an eine Tafel schreibt, ist
 * es nie.
 *
 * SIE BESCHRIFTET DIE SPALTE, DIE OHNEHIN DASTEHT, und stellt keine zweite auf. Eine eigene Tafel neben den Bahnen
 * wäre dieselbe Zahl ein zweites Mal, und zwei Wahrheiten über eine Quote sind eine zu viel. Die Kreide steckt im Ton
 * und nicht in der Schrift: Was tickt, bleibt in der Mono (css/arena.css), und eine Quote tickt.
 */
.ar-bu__tafel {
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem 0.5rem;
  border: 3px solid var(--ar-noir-3);
  background: var(--ar-noir);
}

/*
 * DER TEIL DES AUTOMATEN wirft seinen Schatten hart auf die Wand (`TISCHE.apparat`): der Totalisator auf dem Telefon, das
 * Oval auf dem Schreibtisch. Welcher es ist, setzt brett.js (`data-ar-apparat`).
 */
.ar-bu__tafel[data-ar-apparat],
.ar-bu__oval[data-ar-apparat] {
  box-shadow: var(--ar-ku-schlag);
}

.ar-bu__tafel-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.5rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-bu__tafel-strich {
  display: block;
  width: 100%;
  height: 0.3rem;
  margin-bottom: 0.15rem;
}

.ar-bu__bahnen {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-bu__bahn {
  min-width: 0;
}

/*
 * Schmal steht die Spur unter Nummer, Pferd und Quote; ab 30,5rem daneben — bei 30 wären die drei Jetons neben dem
 * Pferd bis 484 Pixel schmaler als 44. Die Bahn selbst ist kein Knopf und trägt die Zierkante; was man anfasst, sind
 * ihre Jetons. Die Breite des Pferds steht hier und nicht am Läufer, denn auch die
 * Jetons rechnen mit ihr: Sie lassen es am Start frei.
 */
.ar-bu__wahl {
  --ar-bu-pferdbreite: 1.75rem;
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas:
    'nummer pferd quote'
    'spur spur spur';
  align-items: center;
  gap: 0.2rem 0.5rem;
  min-height: 44px;
  padding: 0.3rem 0.45rem 0.35rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
}

@container (min-width: 30.5rem) {
  .ar-bu__wahl {
    grid-template-columns: 1.75rem 10.5rem minmax(0, 1fr) 3rem;
    grid-template-areas: 'nummer pferd spur quote';
  }
}

.ar-bu__bahn[data-ar-bu-gewaehlt] > .ar-bu__wahl {
  border-color: var(--ar-kreide);
  background: var(--ar-noir-3);
}

.ar-bu__bahn[data-ar-bu-sieger] > .ar-bu__wahl {
  border-color: var(--ar-funke);
}

/*
 * DIE STARTNUMMER IST DIE STALLFARBE, mit der Tinte, die darauf lesbar ist. Sie trug die Farbe zuerst nur als Ring im
 * Kasten, damit die Zahl in Tusche bleiben konnte — und Marineblau hält gegen Noir 1,25 : 1: Der Ring des vierten Pferds
 * war nicht zu sehen. Als Fläche mit eigener Tinte hält jede Ziffer mindestens 5,28 : 1, und die Kreidekante um den
 * Kasten trägt ihn gegen den Grund der Zeile.
 */
.ar-bu__nummer {
  grid-area: nummer;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-bu-pferdfarbe, var(--ar-noir));
  color: var(--ar-bu-pferdtinte, var(--ar-kreide));
  font-family: var(--ar-schrift-plakat);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Die gewählte Bahn behält ihre Farbe und bekommt einen zweiten Kreidering; umgekehrt nähme die Marke ihre Farbe. */
.ar-bu__bahn[data-ar-bu-gewaehlt] .ar-bu__nummer {
  outline: 2px solid var(--ar-kreide);
  outline-offset: 2px;
}

.ar-bu__pferd {
  grid-area: pferd;
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

/* Ein Name bricht an seinen Leerzeichen und nur im Notfall im Wort: Der längste misst rund neun Rem. */
.ar-bu__name {
  color: var(--ar-kreide);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.ar-bu__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

.ar-bu__zustand {
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  line-height: 1.2;
}

/* Schmal fließen die Marken hinter dem Zustandsbericht mit; auf dem Totalisator bekommen sie eine eigene Spalte. */
.ar-bu__marken {
  display: contents;
}

.ar-bu__marke {
  padding: 0 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide);
  font-size: 0.68rem;
  line-height: 1.4;
  white-space: nowrap;
}

.ar-bu__marke[data-ar-bu-marke='favorit'] {
  border-color: var(--ar-funke);
}

.ar-bu__marke[data-ar-bu-marke='sieger'] {
  border-color: var(--ar-noir);
  background: var(--ar-funke);
  color: var(--ar-noir);
}

.ar-bu__marke[data-ar-bu-marke='tipp'] {
  border-color: var(--ar-kreide);
  background: var(--ar-kreide);
  color: var(--ar-noir);
}

.ar-bu__einsatz {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--ar-kreide);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ar-bu__einsatz-marke {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

/* Angeschrieben wie an einer Tafel: die Zahl über einem Kreidestrich. Die Schrift bleibt die Mono — eine Quote tickt. */
.ar-bu__quote {
  grid-area: quote;
  display: grid;
  justify-items: end;
  padding-bottom: 0.1rem;
  border-bottom: 2px solid var(--ar-kreide-2);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

.ar-bu__quote-wort {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift);
  font-size: 0.6rem;
  line-height: 1.4;
}

/*
 * Die Spur: so viele Felder, wie das Markup bringt, jedes sechste etwas höher wie ein Meterstein, rechts die Ziellinie.
 * Das Pferd steht absolut darauf und läuft über --ar-bu-anteil, den Anteil der Längen am Ziel.
 *
 * ES SPRANG EINMAL, UND ZWAR WEIL ES JEDEN TAKT NEU GEBAUT WURDE. Jetzt schreibt das Brett nur noch den Anteil, und
 * daraus wird ein Übergang über die Dauer eines Takts (--ar-bu-takt, vom Server). Steht die Spur frisch da, trägt sie
 * kurz data-ar-bu-sprung: Ein Pferd, das nach dem Zielfoto aus der Null heranliefe, liefe das Rennen rückwärts.
 */
.ar-bu__spur {
  grid-area: spur;
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: 1px;
  height: 2.2rem;
  border-right: 4px double var(--ar-kreide);
}

.ar-bu__feld {
  display: block;
  height: 0.4rem;
  background: var(--ar-noir-3);
}

.ar-bu__feld:nth-child(6n) {
  height: 0.7rem;
}

.ar-bu__feld[data-ar-bu-gelaufen] {
  background: var(--ar-kreide-2);
}

.ar-bu__laeufer {
  position: absolute;
  bottom: 0.1rem;
  left: calc((100% - var(--ar-bu-pferdbreite)) * var(--ar-bu-anteil, 0));
  width: var(--ar-bu-pferdbreite);
  height: var(--ar-bu-pferdbreite);
  transition: left var(--ar-bu-takt, 850ms) linear;
}

.ar-bu__bahnen[data-ar-bu-sprung] .ar-bu__laeufer {
  transition: none;
}

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

.ar-bu__laeufer-bild {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * DIE STAUBWOLKE HINTER EINEM LÄUFER: vier harte Bilder, aufgeworfen bis verweht. Welches davon steht, schreibt das
 * Brett aus dem Bruchteil des laufenden Takts und damit aus der Serverzeit (brett.js). Ohne Merkmal ist kein Staub da:
 * vor dem Start, im Ziel und unter einem Pferd, das gerade aussetzt.
 *
 * SIE WÄCHST VOM HUF WEG UND NICHT AUS IHRER MITTE — deshalb der Ursprung in der unteren Ecke am Pferd. Sie trägt keine
 * Auskunft; wer wenig Bewegung bestellt hat, sieht sie gar nicht.
 */
.ar-bu__staub {
  position: absolute;
  right: 58%;
  bottom: 0;
  width: 1.5rem;
  height: 0.9rem;
  opacity: 0;
  transform-origin: 100% 100%;
  pointer-events: none;
}

.ar-bu__staub[data-ar-bu-staub='0'] { opacity: 0.5; scale: 0.5; }
.ar-bu__staub[data-ar-bu-staub='1'] { opacity: 0.4; scale: 0.75; }
.ar-bu__staub[data-ar-bu-staub='2'] { opacity: 0.26; scale: 1; }
.ar-bu__staub[data-ar-bu-staub='3'] { opacity: 0.14; scale: 1.3; }

.ar-bu__staub-bild {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ar-bu__staub {
    display: none;
  }
}

/* Das Ereignis liegt auf dem Pferd und bleibt in der Höhe der Spur: Darüber stünde es auf Name und Zustandsbericht. */
.ar-bu__ereignis-bild {
  position: absolute;
  bottom: 35%;
  left: 20%;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
}

/*
 * DIE JETONS EINER BAHN: drei Einsätze, jeder ein Knopf mit der Summe groß und ihrer Bezeichnung klein dahinter („50
 * (Halb)“); ein Tipp ist die Wette (brett.js, `jetons()`). Reicht die Breite für eine lange Summe nicht, bricht die
 * Bezeichnung darunter um, und der Jeton bleibt 44 Pixel hoch.
 *
 * SCHMAL UND AUF DEM TABLET LIEGEN SIE AUF DER SPUR. Solange gesetzt wird, läuft dort nichts; das Pferd am Start bleibt
 * links daneben zu sehen, und die Bahn wächst nur um den Unterschied zwischen Spur und Knopf. Ist nichts zu setzen —
 * nach der eigenen Wette, zwischen zwei Rennen, im Rennen —, stehen sie still und unsichtbar da: Sie halten die Zeile,
 * die Spur darunter bleibt frei, und keine Bahn springt beim Startschuss um ihre Höhe.
 */
.ar-bu__setzen {
  grid-area: spur;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  margin-inline-start: calc(var(--ar-bu-pferdbreite) + 0.4rem);
}

.ar-bu__setzen[data-ar-bu-still] {
  visibility: hidden;
}

.ar-bu__jeton {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.2rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.2rem 0.25rem;
  font-size: 0.85rem;
  line-height: 1.15;
}

.ar-bu__jeton-zahl {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ar-bu__jeton-wort {
  font-size: 0.72rem;
}

/* Still heißt: gestrichelt und gedämpft, ohne Zahl — wo die Jetons eine eigene Zeile haben, stehen sie so da. */
.ar-bu__setzen[data-ar-bu-still] .ar-bu__jeton {
  border: 2px dashed var(--ar-kante-griff);
  color: var(--ar-kreide-2);
}

/* ------------------------------------------------------------ Ticker */

.ar-bu__ticker {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
  container: ar-bu-ticker / inline-size;
}

.ar-bu__zeilen {
  display: grid;
  align-content: end;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Im Rennen hält der Ticker mindestens die Höhe von drei Zeilen, damit der Schein darunter nicht bei jedem Takt ruckt.
   Eine lange Zeile bricht um: Sie endete mit Auslassung, und auf 320 Pixeln stand vom Namen des Pferds nur der Anfang. */
.ar-bu__ticker[data-ar-bu-laeuft] .ar-bu__zeilen {
  min-height: calc(3 * 1.3 * 0.82rem + 0.2rem);
}

/*
 * Die längste Zeile („Takt 12: Peitsche für Schwarzer Montag.“) misst in der Systemschrift unter Windows 229 Pixel. In
 * der Spalte des Schreibtischs bleiben dem Ticker 217, und dort bricht sie um: Die Rangliste darunter sprang mitten im
 * Rennen um 17 Pixel. Unter 14,5rem hält der Ticker deshalb zwei Zeilen je Ereignis frei. Auf 320 Pixeln bleiben ihm 239,
 * dort reichen drei.
 */
@container ar-bu-ticker (max-width: 14.5rem) {
  .ar-bu__ticker[data-ar-bu-laeuft] .ar-bu__zeilen {
    min-height: calc(6 * 1.3 * 0.82rem + 0.2rem);
  }
}

.ar-bu__zeile-ticker {
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
  line-height: 1.3;
}

.ar-bu__zeile-ticker:last-child {
  color: var(--ar-kreide);
}

.ar-bu__ticker:not([data-ar-bu-laeuft]) .ar-bu__zeile-ticker:first-child {
  color: var(--ar-kreide);
  font-size: 0.9rem;
  font-weight: 600;
}

.ar-bu__saldo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Gewinn mit Kreidekante, Verlust gestrichelt und blass; das Vorzeichen sagt es ein zweites Mal. */
.ar-bu__saldo-teil {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.4rem;
  border: 2px solid var(--ar-kante-griff);
  color: var(--ar-kreide);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ar-bu__saldo-teil[data-ar-bu-saldo='plus'] {
  border-color: var(--ar-kreide);
}

.ar-bu__saldo-teil[data-ar-bu-saldo='minus'] {
  border-style: dashed;
  color: var(--ar-kreide-2);
}

.ar-bu__saldo-marke {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------ Wettschein */

/*
 * DER WETTSCHEIN IST EIN ABREISSZETTEL AUS EINEM BLOCK. Oben die Zacken der Abrisskante statt einer Kante, darunter der
 * Kopf als Abriss und unter ihm die Perforation — eine Lochreihe und kein Verlauf: `dotted` IST die Reihe.
 *
 * Die Zacken tragen den Ton des Zettels: Ist er gesperrt, wird die ganze Kante grau, samt seiner Kante. Ein Rand, der
 * grau wird, und eine Abrisskante, die kreideweiß bleibt, wären zwei Zettel übereinander.
 */
.ar-bu__schein {
  --ar-bu-papier: var(--ar-kreide);
  display: grid;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem 0.6rem;
  border: 2px solid var(--ar-bu-papier);
  border-top: none;
  background: var(--ar-noir-2);
}

.ar-bu__schein[data-ar-bu-gesperrt] {
  --ar-bu-papier: var(--ar-kante-griff);
  border-style: dashed;
  border-top: none;
}

.ar-bu__abriss {
  display: block;
  width: calc(100% + 1.2rem);
  height: 0.4rem;
  margin: -0.45rem -0.6rem 0;
}

.ar-bu__schein-kopf,
.ar-bu__satz,
.ar-bu__gewinn,
.ar-bu__stempel {
  margin: 0;
  hyphens: none;
}

.ar-bu__schein-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.1rem 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px dotted var(--ar-kreide-2);
}

.ar-bu__schein-titel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Der Aufdruck der Annahmestelle: dasselbe Eisen, das der Stempel trägt, nur blass und mitgedruckt. */
.ar-bu__schein-eisen {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.75;
}

.ar-bu__chips {
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.ar-bu__satz {
  color: var(--ar-kreide);
  font-size: 0.88rem;
}

/* Was die gesetzte Wette bei einem Treffer auszahlt, unter dem Stempel. */
.ar-bu__gewinn {
  color: var(--ar-funke);
  font-size: 0.88rem;
  font-weight: 700;
}

/*
 * Gesetzt steht als Stempel auf dem Schein, gekippt und in Kreide, damit er nicht wie ein Knopf aussieht. Der doppelte
 * Rand steht als harter Schatten ohne Radius und nicht als `outline`: Der Zettel nimmt den Fokus, wenn die Wette
 * ankommt und die Jetons an der Bahn still werden, und dann gehört die outline dem Fokusring und nicht der Zierde.
 */
.ar-bu__stempel {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 2px solid var(--ar-kreide);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  rotate: -2deg;
  box-shadow: 0 0 0 2px var(--ar-noir-2), 0 0 0 3px var(--ar-kreide);
}

.ar-bu__stempel-eisen {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.ar-bu__jeton[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: -3px;
}

/* ------------------------------------------------------------ Rangliste */

/*
 * Knapp, weil sie schmal unter dem Schein steht: ein Kopf und die Farben nebeneinander, die umbrechen, wenn die Zeile
 * voll ist. Auf 375 Pixeln sind das bei zwei Farben eine Reihe und bei vier meist zwei, samt Fuge rund 60 und 85 Pixel.
 */
.ar-bu__rangliste {
  display: grid;
  gap: 0.2rem;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-bu__rangliste-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  line-height: 1.4;
}

.ar-bu__rangliste-titel {
  color: var(--ar-kreide);
}

.ar-bu__rangliste-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-bu__rang {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.ar-bu__rang-teil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.3rem;
  min-width: 0;
}

.ar-bu__rang-platz {
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ar-bu__rang-marke {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------------ Wettschein-Block */

/*
 * JE GELAUFENEM RENNEN EINE ZEILE, IM PULT UNTER DER RANGLISTE. `letztes` trägt nur das Rennen, das gerade läuft;
 * nach dem nächsten Startschuss war weg, worauf man gesetzt hatte — samt Pferdenamen, die je Rennen neu gezogen
 * werden. Eine Wette, die man hinterher nicht mehr nachlesen kann, ist am Buchmacher die eine fehlende Auskunft.
 *
 * WER GETROFFEN HAT, TRÄGT EINE SENFKANTE UND EIN PLUS — nie nur den Farbton.
 *
 * ER STAND IM SCHALTER, unter dem Schein, und damit in der Spalte, die auf dem Schreibtisch die Höhe des Bretts
 * bestimmt: Je gelaufenem Rennen kommt eine Zeile und je Spieler ein Posten dazu. Seit über dem Automaten die Lampe
 * hängt (`--ar-apparat-rand`), stand das Brett zu viert auf 1440 × 900 schon im ersten Rennen bei 826 bis 832 Pixeln
 * auf einer Bühne von 811 und wurde eingepasst (dev/dev.ps1 bretter). Unter dem Oval nimmt er die Höhe, die das Oval
 * über seinem Mindestmaß hergibt.
 */
.ar-bu__buch {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

.ar-bu__buch-titel {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-bu__buch-leer {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-bu__buch-liste,
.ar-bu__buch-posten-liste {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-bu__buch-rennen {
  display: grid;
  gap: 0.15rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-bu__buch-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  margin: 0;
  font-size: 0.72rem;
}

.ar-bu__buch-nr {
  color: var(--ar-kreide-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ar-bu__buch-sieger {
  color: var(--ar-kreide);
  overflow-wrap: anywhere;
}

.ar-bu__buch-quote {
  margin-left: auto;
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-bu__buch-posten {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.ar-bu__buch-marke {
  width: 0.9rem;
  height: 0.9rem;
}

.ar-bu__buch-name {
  color: var(--ar-kreide-2);
  overflow-wrap: anywhere;
}

.ar-bu__buch-pferd {
  grid-column: 2 / 4;
  grid-row: 2;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.ar-bu__buch-posten[data-ar-bu-treffer] .ar-bu__buch-pferd {
  color: var(--ar-funke);
}

.ar-bu__buch-einsatz,
.ar-bu__buch-saldo {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-bu__buch-einsatz {
  grid-column: 3;
  color: var(--ar-kreide-2);
}

.ar-bu__buch-saldo {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--ar-kreide);
  font-weight: 700;
  text-align: right;
}

.ar-bu__buch-saldo[data-ar-bu-saldo='gewinn'] {
  color: var(--ar-gruen);
}

.ar-bu__buch-saldo[data-ar-bu-saldo='verlust'] {
  color: var(--ar-rot);
}

.ar-bu__rang-name,
.ar-bu__rang-chips {
  color: var(--ar-kreide);
  font-size: 0.9rem;
  line-height: 1.2;
  hyphens: none;
}

.ar-bu__rang-name {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Die Zahl trägt die Plakatschrift, der Name daneben nicht: In der Rangliste zählt der Betrag. */
.ar-bu__rang-chips {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
}

.ar-bu__rang-du {
  padding: 0 0.35rem;
  border: 1px solid currentColor;
  color: var(--ar-kreide);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Kredit ist Schuld: das Wort, ein Minus und eine gestrichelte Kante in Rot, das hier Signal ist und keine Schrift. */
.ar-bu__rang-kredit {
  padding: 0 0.3rem;
  border: 2px dashed var(--ar-rot);
  color: var(--ar-kreide);
  font-size: 0.7rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Gegangen heißt wie auf der Plakette grau und durchgestrichen; die Marke wird über ihre Farbtokens grau. */
.ar-bu__rang[data-ar-weg] {
  --ar-rot: var(--ar-kante-griff);
  --ar-blau: var(--ar-kante-griff);
  --ar-gelb: var(--ar-kante-griff);
  --ar-gruen: var(--ar-kante-griff);
}

.ar-bu__rang[data-ar-weg] .ar-bu__rang-name {
  color: var(--ar-kreide-2);
  text-decoration: line-through;
}

.ar-bu__rang[data-ar-weg] .ar-bu__rang-chips {
  color: var(--ar-kreide-2);
}

/* ------------------------------------------------------------ Schreibtisch: die Ovalbahn */

/*
 * AUF DEM SCHREIBTISCH LÄUFT DAS FELD ÜBER EIN OVAL, wie auf einem Pferderennautomaten. Ab 38rem am Maßcontainer
 * .ar-bu-mass, die nur ein Brett auf dem Schreibtisch erreicht (schmal höchstens 36rem, ohne Rand 35,4), steht das Oval
 * für sich, und der Wettschalter steht darunter oder daneben.
 *
 * DER TOTALISATOR LAG EINMAL IM INNENFELD DES OVALS, und die Zelle war so hoch, wie seine fünf Zeilen es verlangten. Das
 * hatte drei Folgen: Der Eckradius der Bahn hing an der Bande, weil gerade Kanten gebraucht wurden; über den Zeilen
 * stand ein Kopfband von 5,5rem allein für das Wappen; und die Bahnwahl lag am einen Ende des Bretts, der Betrag am
 * anderen. Alle drei sind mit dem Umzug gefallen: Das Oval ist eine Rennbahn, das Innenfeld sagt in vier Phasen, was
 * gerade gilt, und Bahnen und Schein sind ein Schalter.
 *
 * DIE BAHN LIEF HIER ÜBER DIE GANZE BREITE, fünf Balken von links nach rechts, und auf 1440 Pixeln sah das aus wie fünf
 * Fortschrittsbalken eines Downloads. Auf dem Telefon bleibt es dabei: Dort trägt eine Spur je Pferd das Rennen, und ein
 * Oval auf 375 Pixeln hätte Kurven, in denen man kein Pferd mehr erkennt.
 */
@container ar-bu-mass (min-width: 38rem) {
  .ar-bu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'kopf'
      'bahn'
      'schalter'
      'pult';
    gap: 0.75rem;
  }

  .ar-bu > [data-ar-bu-teil='kopf'] {
    grid-area: kopf;
  }

  /*
   * Das Oval bekommt seine Höhe jetzt selbst: Sie hing am Totalisator darin, und ohne ihn wäre die Zelle so hoch wie
   * nichts. Sechzehn Rem sind die Untergrenze, unter der die Bande (6,75rem bei fünf Pferden) kein Innenfeld mehr
   * übrig lässt; nach oben deckelt die Fensterhöhe, damit auf einem flachen Schreibtisch Schalter und Pult im Bild
   * bleiben.
   */
  /* Das Oval steht in einem Gehäuse aus Schwarz mit einer Kante aus Messing: Es ist der Automat auf dem Tresen. */
  .ar-bu > .ar-bu__oval {
    position: relative;
    display: block;
    grid-area: bahn;
    align-self: stretch;
    min-height: clamp(16rem, 38dvh, 26rem);
    border: 3px solid var(--ar-ku-messing);
    background: var(--ar-noir);
  }

  .ar-bu > .ar-bu__schalter {
    grid-area: schalter;
  }

  /* Ticker und Rangliste sind ein Pult und keine zwei Zettel: gleich hoch, gleich hoch abgesetzt, mit einer Kante darüber. */
  .ar-bu > .ar-bu__pult {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-area: pult;
    align-items: stretch;
    gap: 0.6rem 0.75rem;
    padding-top: 0.6rem;
    border-top: 2px solid var(--ar-kante);
  }

  .ar-bu__pult:has(> [data-ar-bu-teil='ticker']:empty) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ar-bu > .ar-bu__pult > .ar-bu__buch {
    grid-column: 1 / -1;
  }

  /*
   * DER WETTSCHALTER: jede Bahn eine Zeile aus Nummer, Name über Zustandsbericht, den Marken und der Quote. Die Spur
   * fällt weg, denn das Rennen läuft im Oval; was hier steht, ist die Wette und nicht der Lauf.
   *
   * DIE JETONS BEKOMMEN HIER EINE EIGENE ZEILE, denn eine Spur, auf der sie liegen könnten, gibt es nicht. Still bleiben
   * sie gedämpft stehen, statt zu verschwinden: Die Zeile hielte sonst leer ihren Platz, und ohne sie schrumpfte der
   * Schalter beim Startschuss um fünf Zeilen — und mit ihm das Oval daneben, das seine Höhe mit ihm teilt.
   *
   * FUGE UND ABSTAND SIND HIER KNAPPER ALS SCHMAL, und das ist gemessen: Zu viert läuft das Rennen mit fünf Pferden, und
   * der Schalter ist die höchste Spalte des Bretts. Seit die Leiste des Hauses auch über dem Spielfeld ihre 73 Pixel
   * hat, lässt die Bühne auf 1440 × 900 dem Brett 811; mit 0,3rem Fuge und 0,3rem Abstand stand es bei 822, wurde
   * eingepasst, und die Jetons fielen auf 43 Pixel (dev/dev.ps1 bretter).
   */
  .ar-bu__bahnen {
    gap: 0.2rem;
  }

  .ar-bu__wahl {
    grid-template-columns: 2rem minmax(7rem, 1fr) auto 3.25rem;
    grid-template-areas:
      'nummer name marken quote'
      'nummer zustand marken quote'
      '. setzen setzen setzen';
    column-gap: 0.75rem;
    row-gap: 0;
    padding-block: 0.25rem;
  }

  .ar-bu__setzen {
    grid-area: setzen;
    margin: 0.15rem 0 0;
  }

  .ar-bu__setzen[data-ar-bu-still] {
    visibility: visible;
  }

  .ar-bu__pferd,
  .ar-bu__zeile {
    display: contents;
  }

  .ar-bu__name {
    grid-area: name;
    align-self: end;
  }

  .ar-bu__zustand {
    grid-area: zustand;
    align-self: start;
  }

  .ar-bu__marken {
    display: flex;
    grid-area: marken;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.2rem 0.35rem;
  }

  .ar-bu__nummer {
    width: 2rem;
    height: 2rem;
  }

  .ar-bu__spur {
    display: none;
  }

  .ar-bu__rangliste-reihe {
    display: grid;
  }
}

/*
 * ZWEI SPALTEN AB 58rem: links fünfundsechzig Hundertstel Rennbahn, rechts fünfunddreißig Wettschalter, darunter das
 * Pult. Die Schwelle liegt dort, weil ein Brett auf dem kleinsten Schreibtisch (1024 Pixel) rund 59rem misst; darunter
 * gibt es nur Tablets, und deren Container bleibt bei 35,4rem.
 *
 * Ein Mindestmaß von 20rem hält den Schalter lesbar: Die Bahnzeile braucht 2 + 7 + 3,25rem plus Fugen, und darunter
 * stehen ihre drei Jetons nebeneinander. Wird der Schalter höher als das Oval, wächst die Zelle, und das Oval wächst
 * mit — es steht auf align-self: stretch.
 */
@container ar-bu-mass (min-width: 38rem) {
  /*
   * DAS PULT STEHT UNTER DER RENNBAHN UND NICHT UNTER BEIDEN SPALTEN. Der Schalter ist mit fünf Pferden höher als das
   * Oval, und darunter stand das Pult als eigene Zeile über die ganze Breite: zu viert rund hundertdreißig Pixel, die das
   * Brett auf 1440 × 900 über die Bühne hoben, während links unter dem Oval Platz frei war.
   */
  .ar-bu {
    grid-template-columns: minmax(0, 65fr) minmax(20rem, 35fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'kopf  kopf'
      'bahn  schalter'
      'pult  schalter';
    column-gap: 1rem;
  }
}

/*
 * EIN PFERD AUF DEM OVAL: sein Kopf, darauf die Nummer seiner Bahn, und im Takt eines Ereignisses Peitsche oder Panne. Es
 * springt von Takt zu Takt wie auf der Spur; unten und links läuft es nach links, und dort ist sein Bild gespiegelt. Die
 * eigene Wette trägt eine gestrichelte Kreidekante, der Sieger eine Senfkante: nie nur ein Farbton.
 */
.ar-bu__gleis {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Beide Lagen liegen über dem Gleis und nehmen keinen Tipp an: Darunter stehen die Knöpfe des Totalisators. */
.ar-bu__rennerlage,
.ar-bu__innenfeld {
  position: absolute;
  pointer-events: none;
}

.ar-bu__rennerlage {
  inset: 0;
}

/*
 * DIE STELLUNG KOMMT AUS DEM BROWSER, NICHT AUS EINEM ÜBERGANG. Hier stand ein Übergang auf left und top über die Dauer
 * eines Takts, und der lief die Sehne zwischen zwei Stationen statt den Bogen: In einer Kurve schnitt er die Ecke ab.
 * Das Brett rechnet jetzt in jedem Bild den Bruchteilstakt und setzt translate; ein Übergang darauf wäre eine zweite
 * Bewegung über derselben. Die Mitte des Pferds sitzt auf dem Punkt, deshalb das zweite translate.
 */
.ar-bu__renner {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.1rem;
  height: 2.1rem;
  margin: -1.05rem 0 0 -1.05rem;
}

/*
 * Der Umriss braucht keine Kante: Er ist in Kreide gezeichnet und steht damit selbst gegen den Belag. Sie stand hier
 * einmal, weil an dieser Stelle ein Pferdekopf mit eigenem Grund lag — mit ihr sah er aus wie ein Stein auf der Bahn,
 * ohne sie wie ein Fleck.
 */
.ar-bu__renner-bild {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.ar-bu__renner[data-ar-bu-links] .ar-bu__renner-bild {
  scale: -1 1;
}

/* Unten und links läuft das Feld nach links; dort liegt der Staub auf der anderen Seite des Hufs. */
.ar-bu__renner[data-ar-bu-links] .ar-bu__staub {
  right: auto;
  left: 58%;
  transform-origin: 0 100%;
}

.ar-bu__renner[data-ar-bu-tipp] .ar-bu__renner-bild {
  outline: 2px dashed var(--ar-kreide);
  outline-offset: 1px;
}

.ar-bu__renner[data-ar-bu-sieger] .ar-bu__renner-bild {
  outline: 3px solid var(--ar-funke);
  outline-offset: 1px;
}

/* Die Startnummer steht in der Stallfarbe ihres Pferds, mit Tuschzahl darauf: Wer die Farbe nicht unterscheidet, liest die Zahl. */
.ar-bu__renner-nummer {
  position: absolute;
  top: -0.45rem;
  left: -0.45rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--ar-noir);
  background: var(--ar-bu-pferdfarbe, var(--ar-kreide));
  color: var(--ar-bu-pferdtinte, var(--ar-noir));
  font-family: var(--ar-schrift-plakat);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-bu__renner-ereignis-bild {
  position: absolute;
  right: -0.55rem;
  bottom: 55%;
  width: 1.2rem;
  height: 1.2rem;
}

/* ------------------------------------------------------------ Innenfeld */

/*
 * DAS INNENFELD HAT VIER PHASEN, und immer steht genau eine darin: der Tipp des Hauses vor dem Rennen, das Ereignis
 * eines Takts für anderthalb Sekunden, das Zielfoto im Kranz und danach das blanke Wappen. Alle vier stehen mittig, auf
 * deckendem Noir mit Kreidekante, und alle vier tragen die Stallfarbe ihres Pferds — als Zeichen und nie als einzige
 * Auskunft: Daneben steht immer die Startnummer.
 *
 * HIER LAG EINMAL DER TOTALISATOR, und über ihm ein Kopfband von 5,5rem allein für ein Wappen als Wasserzeichen. Beides
 * ist mit dem Umzug der Bahnwahl in den Wettschalter gefallen; die Mitte der Bahn ist die größte freie Fläche des
 * Bretts, und eine Fläche, auf die neunzig Sekunden lang alle schauen, soll etwas sagen.
 */
/*
 * DAS INNENFELD IST SO GROSS WIE DAS OVAL ES LÄSST, UND SEIN INHALT RICHTET SICH DANACH. Seit die Bahn flacher ist,
 * damit jeder Start auf seinem Stück Bahn liegt, misst das Innenfeld auf einem Schreibtisch von 1024 Pixeln kaum 130
 * Pixel Höhe. Bilder und Zahl des Kastens nehmen deshalb ihr Maß an der Höhe des Felds (`cqh`); unter 9,5rem fällt das
 * kleine Wappen über dem Tipp weg. Die Größe setzt das Brett als Stil, das Feld ist damit ein Kasten mit fester Höhe.
 */
.ar-bu__innenfeld {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  container: ar-bu-innenfeld / size;
}

.ar-bu__tipp,
.ar-bu__ereignisfeld,
.ar-bu__sieger,
.ar-bu__wappen {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: min(86%, 21rem);
  max-height: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir);
  text-align: center;
}

/* Das Ereignisbild ist eine Szene im Breitformat, das Siegerpferd ein Kopf im Quadrat — zwei Zuschnitte, ein Kasten. */
.ar-bu__ereignisfeld-bild {
  display: block;
  width: min(100%, 76cqh);
  height: auto;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--ar-kreide-2);
  object-fit: cover;
}

/* Der Kranz liegt um den Kopf des Siegers, nicht darüber: ein Bau aus zwei Ebenen, die Nummer als dritte. */
.ar-bu__sieger-bau {
  position: relative;
  display: grid;
  place-items: center;
  width: min(6.5rem, 58cqh);
  height: min(5.6rem, 50cqh);
}

.ar-bu__sieger-kranz {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ar-bu__sieger-bild {
  display: block;
  width: min(3.6rem, 32cqh);
  height: min(3.6rem, 32cqh);
  object-fit: contain;
}

.ar-bu__sieger-nummer,
.ar-bu__ereignisfeld-nummer,
.ar-bu__tipp-zahl {
  display: grid;
  place-items: center;
  border: 1px solid var(--ar-noir);
  background: var(--ar-bu-pferdfarbe, var(--ar-kreide));
  color: var(--ar-bu-pferdtinte, var(--ar-noir));
  font-family: var(--ar-schrift-plakat);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-bu__sieger-nummer {
  position: absolute;
  right: 0.4rem;
  bottom: 0;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.85rem;
}

.ar-bu__ereignisfeld-nummer {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.35rem;
  font-size: 0.78rem;
  vertical-align: -0.2rem;
}

/* Der Tipp des Hauses: das Wappen klein darüber, die Startnummer groß, darunter Name und Quote. */
.ar-bu__tipp-wappen {
  display: block;
  width: min(2.4rem, 16cqh);
  height: min(2.4rem, 16cqh);
  object-fit: contain;
}

@container ar-bu-innenfeld (max-height: 9.5rem) {
  .ar-bu__tipp-wappen {
    display: none;
  }
}

.ar-bu__tipp-nummer {
  margin: 0;
}

.ar-bu__tipp-zahl {
  width: min(2.6rem, 20cqh);
  height: min(2.6rem, 20cqh);
  font-size: min(1.5rem, 12cqh);
}

.ar-bu__tipp-quote {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.ar-bu__ereignisfeld-wort,
.ar-bu__sieger-marke,
.ar-bu__tipp-marke {
  margin: 0;
  color: var(--ar-funke);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
}

.ar-bu__tipp-marke {
  font-size: 0.92rem;
}

.ar-bu__ereignisfeld-name,
.ar-bu__sieger-name,
.ar-bu__tipp-name {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Eine Panne ist keine Peitsche: Die Kante sagt es in der Form, nicht nur im Bild. */
.ar-bu__ereignisfeld[data-ar-bu-ereignis='panne'] {
  border-style: dashed;
  border-color: var(--ar-kante-griff);
}

.ar-bu__sieger {
  border-color: var(--ar-funke);
}

/* Nach dem letzten Rennen steht nur noch das Wappen da, und es füllt den Kasten allein. */
.ar-bu__wappen-bild {
  display: block;
  width: min(5rem, 60cqh);
  height: min(5rem, 60cqh);
  object-fit: contain;
}

/* ------------------------------------------------------------ Zielfoto */

/*
 * Das Abzeichen des Rahmens stünde mitten auf dem Brett und damit auf der Ziellinie. Das Brett misst deshalb beim
 * Zielfoto aus, wo es hin soll (brett.js, `abzeichenAnlegen()`), und das Abzeichen nimmt 92 Prozent dieses Felds
 * (--ar-bu-abzeichen-feld), höchstens die 22rem des Rahmens. Um 8 Grad gekippt ist es 1,079 Breiten breit und 0,773
 * hoch; so ragt keine Ecke seitlich über das Feld hinaus.
 *
 * AUF DEM SCHREIBTISCH ÜBER DEM TICKER. Er steht im Pult neben oder unter dem Oval, nie darin, und das Abzeichen bleibt
 * mit 15rem klein: Es meldet das Zielfoto, und die Pferde im Oval bleiben zu sehen. Die Mitte sitzt 0,39 Breiten unter
 * der Oberkante des Tickers (--ar-bu-abzeichen-oben), und keine Ecke ragt nach oben über ihn hinaus.
 *
 * SCHMAL ÜBER DEN BAHNEN, mit seiner Mitte auf ihrer (--ar-bu-abzeichen-mitte-y) und im Feld links vor den Pferden auf
 * der Linie: Ziellinie und Fotofinish bleiben frei.
 *
 * NACH UNTEN REICHT ES 0,7765 BREITEN VON SEINER OBERKANTE, UND SO VIEL BRETT MUSS DA SEIN (--ar-bu-abzeichen-hoehe). Wer
 * zuschaut, hat unter dem Ticker nur die Rangliste; dort wird das Abzeichen kleiner, statt über die Unterkante des
 * Bretts zu ragen.
 */
.ar-spielfeld[data-ar-spiel='buchmacher'] .ar-abzeichen {
  --ar-bu-abzeichen-breite: min(0.92 * var(--ar-bu-abzeichen-feld, 22rem), var(--ar-bu-abzeichen-deckel, 22rem), var(--ar-bu-abzeichen-hoehe, 22rem) / 0.7765);
  top: var(--ar-bu-abzeichen-mitte-y, calc(var(--ar-bu-abzeichen-oben, 0px) + 0.39 * var(--ar-bu-abzeichen-breite)));
  left: var(--ar-bu-abzeichen-mitte, 50%);
  width: var(--ar-bu-abzeichen-breite);
}

@media (min-width: 64rem) and (min-height: 30.0625rem) {
  .ar-spielfeld[data-ar-spiel='buchmacher'] .ar-abzeichen {
    --ar-bu-abzeichen-deckel: 15rem;
  }
}

/* Die Schrift des Rahmens wächst mit dem Brett; in der Spalte des Schreibtischs ragte sie sonst über das Abzeichen. */
.ar-spielfeld[data-ar-spiel='buchmacher'] .ar-abzeichen__wort {
  font-size: min(3rem, calc(var(--ar-einheit) * 0.43), 0.115 * var(--ar-bu-abzeichen-breite), 0.58 * var(--ar-bu-abzeichen-breite) / var(--ar-wortbreite, 1));
}

/* ------------------------------------------------------------ Aufdeckung in der Tafel */

/*
 * Die aufgedeckten Wetten des letzten Rennens stehen über der Schlussrechnung, in der Tafel des Rahmens und damit
 * außerhalb des Bretts. Sie sind keine zweite Rennbahn: eine Zeile je Pferd, ohne Spur und ohne Läufer, so breit wie
 * die Tafel es zulässt. Die Stallfarben dafür stehen oben in einer eigenen Regel.
 */
.ar-bu__aufdeckung {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  text-align: left;
}

.ar-bu__aufdeckung-kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  line-height: 1.4;
}

.ar-bu__aufdeckung-reihe {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flex und kein Raster: Nummernkasten und Quote tragen aus der Bahn ein grid-area, und hier gibt es diese Bereiche nicht. */
.ar-bu__aufdeckung-pferd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  padding: 0.25rem 0.4rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

/* Wie auf der Bahn: Der Sieger trägt die Funkenkante, und daneben steht sein Wort. */
.ar-bu__aufdeckung-pferd[data-ar-bu-sieger] {
  border-color: var(--ar-funke);
}

.ar-bu__aufdeckung-name {
  flex: 1 1 6rem;
  min-width: 0;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.ar-bu__aufdeckung-pferd .ar-bu__quote {
  flex: none;
  font-size: 1rem;
}

.ar-bu__aufdeckung-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}

/* ------------------------------------------------------------ Farben im SVG */

.ar-g-bu-grau { fill: var(--ar-kreide-2); }
.ar-g-bu-dunkel { fill: var(--ar-noir-3); }
/*
 * Der Körper eines Rennpferds trägt seine Stallfarbe und darum eine Kreidekontur. Die Kontur ist kein Zierrat:
 * Marineblau hält gegen den Belag der Bahn rund 1,3 : 1 und stünde ohne sie nicht da; auf Kreideweiß fällt sie mit dem
 * Körper zusammen, und dann trägt der helle Körper allein. Ohne gesetzte Farbe bleibt es bei Kreide — so sieht ein
 * Pferd in Bildkarte und Banner aus, wo es kein Rennen und keine Bahn gibt.
 */
.ar-g-bu-stall { fill: var(--ar-bu-pferdfarbe, var(--ar-kreide)); stroke: var(--ar-kreide); stroke-width: 3; stroke-linejoin: miter; }
.ar-g-bu-kranz { fill: none; stroke: var(--ar-funke); stroke-width: 5; stroke-linecap: square; }
.ar-g-bu-blatt { fill: var(--ar-funke); }
.ar-g-bu-bahn { fill: var(--ar-noir-2); }
.ar-g-bu-zaun { fill: none; stroke: var(--ar-kreide-2); stroke-width: 6; }
.ar-g-bu-regen { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }
.ar-g-bu-riss { fill: none; stroke: var(--ar-noir); stroke-width: 4; stroke-linejoin: miter; }
/*
 * Staub, Aufdruck, Abrisskante und der Strich der Quotentafel: alles Kreide-2 (8,80 : 1 auf Noir). Die Abrisskante
 * liest --ar-bu-papier und geht mit dem Zettel grau, auf dem sie sitzt; ein <use> erbt eine Custom Property.
 */
.ar-g-bu-staub { fill: var(--ar-kreide-2); }
.ar-g-bu-aufdruck { fill: var(--ar-kreide-2); }
.ar-g-bu-abriss { fill: none; stroke: var(--ar-bu-papier, var(--ar-kreide-2)); stroke-width: 1.5; }
.ar-g-bu-kreidestrich { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }

/*
 * Die Ovalbahn: Belag in Noir-3, das Innenfeld in Noir, die Spurlinien gestrichelt in der Zierkante, die Schienen in
 * Kreide-2 (8,80 : 1 gegen Noir) und alle 200 Meter ein Pfosten an der Innenschiene. Die Ziellinie ist kariert, die
 * Startlinie weiß: zwei Linien quer über die Bahn, die man nie verwechselt, auch ohne Farbe — die eine trägt ein Muster,
 * die andere steht vor den Boxen.
 *
 * DIE STARTBOXEN SIND NOIR MIT KREIDEKANTE, und ihre Nummer steht in Kreide (14,9 : 1): dieselbe Zahl, die das Pferd auf
 * dem Kopf trägt. Die Tribüne steht unter der Zielgeraden in den Tönen der Bahn und wird nie heller als sie — sie ist
 * Kulisse und keine Auskunft.
 */
.ar-g-bu-belag { fill: var(--ar-noir-3); }
.ar-g-bu-innenfeld { fill: var(--ar-noir); }
.ar-g-bu-spurlinie { fill: none; stroke: var(--ar-kante-griff); stroke-width: 1; stroke-dasharray: 6 6; }
.ar-g-bu-schiene { fill: none; stroke: var(--ar-kreide-2); stroke-width: 3; }
.ar-g-bu-pfosten { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }
.ar-g-bu-ziel { fill: var(--ar-noir); }
.ar-g-bu-zielkaro { fill: var(--ar-kreide); }
.ar-g-bu-start { fill: none; stroke: var(--ar-kreide); stroke-width: 3; }
.ar-g-bu-box { fill: var(--ar-noir); stroke: var(--ar-kreide-2); stroke-width: 1.5; }
.ar-g-bu-boxnummer {
  fill: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  dominant-baseline: central;
}
.ar-g-bu-tribuene { fill: var(--ar-noir-3); stroke: var(--ar-kreide-2); stroke-width: 1.5; stroke-linejoin: miter; }
.ar-g-bu-rang { fill: var(--ar-noir-2); stroke: var(--ar-kreide-2); stroke-width: 1.5; }
.ar-g-bu-tribuene-linie { fill: none; stroke: var(--ar-kreide-2); stroke-width: 1; }