/*
 * Das Typometer: Kopf, Zählwerk, darunter die Schnellwahl der Quote oder die LED-Reihe der zehn Schläge, die Schienen
 * samt eingebautem Schwellenregler, darunter das kompakte Steuer-Cockpit und der Bestätigen-Knopf im Daumendock — alles
 * in einer Spalte auf dem Schreibtisch links. Rechts daneben Rangliste und Coupbuch. Auf dem Telefon steht alles
 * untereinander, in derselben Reihenfolge.
 *
 * NIE NUR EIN FARBTON. Ob eine Schiene „unter" oder „über" deckt, steht in DREI Dingen zugleich: in der Seite, auf
 * der die Trefferzone liegt, im Wort im Fuß der Schiene und im `aria-label`. Ob eine Nadel getroffen hat, steht in
 * ihrer Kontur (durchgezogen gegen gestrichelt) und im Ton, nicht nur in Grün gegen Rot.
 *
 * DIE EIGENE SCHIENE IST GRÖSSER UND STEHT ZUERST — die Hero-Hierarchie aus der Spielidee: 56 Pixel hoch, die der
 * anderen 24, alle auf derselben Achse von 0,00 bis 99,99, damit ein Blick reicht, um zu sehen, wer im Feld liegt.
 * Sie trägt zugleich den Schwellenregler mit seinem Messingknauf — sie IST das Bedienelement, kein zweiter Regler daneben.
 */

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

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

@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='typometer'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Messing für die Setzerlehre und ihre Werkzeuge, Blech für den Kasten darum. Das Messing hält 5,1 : 1 auf dem Blech
 * und 4,3 : 1 auf dem Graphit des Tresens — über den 3 : 1, die WCAG 1.4.11 für ein Bedienelement verlangt, das kein
 * Text ist.
 *
 * DIE TREFFERZONE IST SMARAGDGRÜN, DER REST GEDÄMPFTES WEINROT — echte Flächenfarbe und nicht mehr nur ein blasser
 * Deckungston über neutralem Blech: Auf einen Blick liegt offen, welche Hälfte der Schiene gewinnt. Beide halten
 * gegen Blech und Graphit über 3 : 1, denn die Zone selbst trägt keinen Text, sondern grenzt eine Fläche ab, die die
 * Messgrenze (Kontur) und der Fuß der Schiene (Wort) ohnehin schon benennen.
 */
:root {
  --ar-ty-blech: #1e1e22;
  --ar-ty-graphit: #141416;
  --ar-ty-messing: #b8973a;
  /* Die Trefferzone ist die Auskunft der Schiene und hebt sich mit 3,5:1 von der Niete ab (WCAG 1.4.11); bei 0,4 waren es 1,8. */
  --ar-ty-treffer: rgb(38 184 107 / 0.78);
  --ar-ty-treffer-kante: rgb(52 211 124 / 0.75);
  --ar-ty-niete: rgb(220 53 69 / 0.25);
  /* Die Höhe der eigenen Schiene. Der Knauf des Reglers rechnet mit ihr in Pixeln statt in Prozent, damit er in Chrome und Firefox gleich hoch steht. */
  --ar-ty-schiene-hoehe: 56px;
  /*
   * Die zwei Pfeile im Knauf des Schwellenreglers, als SVG in einem Data-URI: Am Regler-Knauf gibt es kein Kindelement,
   * das ein Symbol tragen könnte, und ein Data-URI liest keine Custom Property — das Tiefschwarz ist deshalb der Wert
   * von --ar-noir, ausgeschrieben. Die Spitzen zeigen nach außen, die Lücke dazwischen liegt auf der Schwelle.
   */
  --ar-ty-pfeile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='%230b0b0d' d='M6 0 0 5l6 5zM10 0l6 5-6 5z'/%3E%3C/svg%3E");
}

.ar-ty-mass {
  container: ar-ty-mass / inline-size;
}

.ar-ty {
  display: grid;
  gap: 0.6rem;
}

.ar-ty [data-ar-ty-teil]:empty {
  display: none;
}

.ar-ty__spiel,
.ar-ty__info {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

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

.ar-ty__kopf {
  display: grid;
  gap: 0.3rem;
}

.ar-ty__runde,
.ar-ty__gesetzt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ty__schlag,
.ar-ty__lage {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-weight: 400;
}

/*
 * AUF DEM TELEFON STEHT DIE LAGE IN JEDER PHASE IN EINER EIGENEN ZEILE. Mit dem Anpfiff kommt „Schlag 1 von 10“ in die
 * Kopfzeile, und dann trugen drei Teile nicht mehr in einer: Auf 320 und 360 Pixeln — auf Englisch schon auf 375 — brach
 * sie um, und die Schienen rückten genau dann eine Zeile tiefer, wenn die Nadel zu laufen begann.
 */
@container ar-ty-mass (max-width: 26rem) {
  .ar-ty__runde > .ar-ty__lage {
    flex-basis: 100%;
  }
}

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

.ar-ty__wer {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.2rem;
  border: 2px dashed var(--ar-kante-griff);
}

.ar-ty__wer[data-ar-ty-fertig] {
  border-style: solid;
  border-color: var(--ar-kreide);
}

/* Im Coup hält die Zeile der Marken nur ihren Platz (brett.js, `kopf()`), damit die Schienen beim Anpfiff stehen bleiben. */
.ar-ty__gesetzt[data-ar-ty-still] {
  visibility: hidden;
}

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

/* ------------------------------------------------------------ Bühne: Zählwerk, Pips und Schienen */

/*
 * DAS GEHÄUSE DES TYPOMETERS: Blech mit einem Rahmen aus Messing um Zählwerk und Schienen, und es wirft seinen Schatten
 * hart auf die Wand (`TISCHE.apparat`). Es ist der Platz der Bühne und bleibt stehen, wenn sie darin neu gezeichnet wird.
 */
.ar-ty__apparat {
  padding: 0.6rem;
  border: 3px solid var(--ar-ty-messing);
  background: var(--ar-ty-blech);
  box-shadow: var(--ar-ku-schlag);
}

.ar-ty__buehne {
  display: grid;
  gap: 0.6rem;
}

.ar-ty__anzeige {
  display: grid;
  gap: 0.4rem;
}

/*
 * Das Zählwerk: eine Ziffernanzeige wie am Setzerpult, in Monospace, damit die Ziffern beim Wechsel nicht wandern.
 * Hält es an (der zehnte Schlag), bekommt es eine hellere Kante — dieselbe Auskunft wie der Satz im Kopf, nur am
 * Zählwerk selbst, wo der Blick ohnehin liegt.
 */
.ar-ty__zaehlwerk {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-ty-graphit);
  color: var(--ar-ty-messing);
  font-family: var(--ar-schrift-mono);
  font-size: clamp(1.8rem, 8cqw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.ar-ty__zaehlwerk[data-ar-ty-haelt='true'] {
  border-color: var(--ar-kreide);
}

/*
 * DER SCHNELLPLATZ ÜBER DEN SCHIENEN, so hoch wie ein Knopf: beim Justieren die Schnellwahl, sonst die LED-Reihe
 * (brett.js, `zaehlwerk()`). Er behält seine Höhe in beiden Fällen, damit die eigene Schiene beim Anpfiff nicht springt.
 */
.ar-ty__schnellplatz {
  display: grid;
  align-content: center;
  min-height: 2.75rem;
}

/* Das Wort vorn, drei gleich breite Tasten dahinter; die Faktoren in der Mono wie im Fuß der Schiene. */
.ar-ty__schnell {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.4rem;
}

.ar-ty__schnell-wort {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

/* Ohne Innenabstand in der Höhe sind die Tasten genau so hoch wie der Platz, den die LED-Reihe im Coup behält. */
.ar-ty__quote-taste {
  min-width: 0;
  padding-block: 0;
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
}

/*
 * DIE LED-REIHE: ein Schlag je Lampe, in einer Zeile über die Breite der Schienen — zehn Spalten teilen sich die
 * Breite und brechen nie um. Mit eigener Justierung trägt jede gefallene Lampe Treffer oder Niete, und zwar in der
 * Form und nicht nur im Ton, wie die Nadel: Ein Treffer brennt voll, mit Kreidekante; eine Niete bleibt hohl, mit
 * gestrichelter roter Kante; was noch kommt, ist ein dunkler Rahmen. Ohne eigene Justierung brennt, was gefallen ist.
 */
.ar-ty__pips {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ty__pip {
  height: 1rem;
  border: 1px solid var(--ar-kante-griff);
}

.ar-ty__pip[data-ar-ty-pip='gefallen'] {
  border-color: var(--ar-kreide);
  background: var(--ar-kreide-2);
}

.ar-ty__pip[data-ar-ty-pip='treffer'] {
  border: 2px solid var(--ar-kreide);
  background: var(--ar-gruen);
}

.ar-ty__pip[data-ar-ty-pip='niete'] {
  border: 2px dashed var(--ar-rot);
}

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

.ar-ty__schiene {
  display: grid;
  gap: 0.2rem;
}

.ar-ty__schiene-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

/*
 * Die Kopfzeile der eigenen Schiene ist so hoch wie die Schwellenzahl, die beim Justieren darin steht, auch im Coup,
 * wo dort nur der Saldo in Lesegröße steht: Sonst rückte die Schiene beim Anpfiff um den Unterschied hinauf.
 */
.ar-ty__schiene[data-ar-ty-meins] .ar-ty__schiene-kopf {
  min-height: 1.75rem;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ty__schiene-marke {
  display: block;
  width: 1rem;
  height: 1rem;
}

.ar-ty__schiene-du {
  color: var(--ar-kreide-2);
  font-weight: 400;
}

/* Die Vorschau während der Kaskade: rechts an der Schiene, springt bei jedem Einschlag mit — siehe schiene() in brett.js. */
.ar-ty__schiene-saldo {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ar-ty__schiene-saldo[data-ar-ty-saldo='plus'] { color: var(--ar-gruen); }
.ar-ty__schiene-saldo[data-ar-ty-saldo='minus'] { color: var(--ar-rot); }
.ar-ty__schiene-saldo[data-ar-ty-saldo='null'] { color: var(--ar-kreide-2); }

/*
 * Der Balken selbst: 0,00 links, 99,99 rechts, immer dieselbe Achse über alle vier Schienen — nur so liest man mit
 * einem Blick, wer im Feld liegt. Die eigene ist 56 Pixel hoch (die Hero-Zeile, groß genug für den eingebauten
 * Regler), die der anderen 24.
 */
.ar-ty__schiene-balken {
  position: relative;
  height: 24px;
  border: 2px solid var(--ar-kante-griff);
}

.ar-ty__schiene[data-ar-ty-meins] .ar-ty__schiene-balken {
  height: var(--ar-ty-schiene-hoehe);
  border-color: var(--ar-kreide);
}

/* Solange keine Justierung sichtbar ist (fremde Schiene vor dem Anpfiff), bleibt der Grund neutrales Blech. */
.ar-ty__schienegrund {
  position: absolute;
  inset: 0;
  background: var(--ar-ty-blech);
}

/* Sobald eine Justierung sichtbar ist, trägt der Grund die Niete-Fläche — die Trefferzone legt sich darüber. */
.ar-ty__schiene-balken[data-ar-ty-justiert='true'] .ar-ty__schienegrund {
  background: var(--ar-ty-niete);
}

.ar-ty__zone-treffer {
  position: absolute;
  inset-block: 0;
  left: calc(var(--ar-ty-von) * 1%);
  width: calc(var(--ar-ty-breite) * 1%);
  background: var(--ar-ty-treffer);
  border-inline: 1px solid var(--ar-ty-treffer-kante);
}

/* Die Messgrenze: ein durchgezogener Messingstrich, quer über die volle Höhe der Schiene. */
.ar-ty__grenze {
  position: absolute;
  inset-block: 0;
  left: calc(var(--ar-ty-schwelle) * 1% - 1px);
  width: 2px;
  background: var(--ar-ty-messing);
}

/*
 * Die Nadel: der zuletzt gefallene Wert. Ein Treffer steht durchgezogen und in Kreide, eine Niete gestrichelt und
 * gedämpft — zwei Konturen, nicht nur zwei Töne. Sie erscheint hart, ohne Bewegung: Ein Übergang, der eine Position
 * nachzöge, die sich bei jedem Schlag neu setzt, würde nicht glätten, er würde verschmieren (CLAUDE.md, Abschnitt 7).
 */
.ar-ty__nadel {
  position: absolute;
  inset-block: -4px;
  left: calc(var(--ar-ty-wurf) * 1% - 1px);
  width: 2px;
  background: var(--ar-kreide);
  z-index: 1;
}

.ar-ty__nadel[data-ar-ty-treffer='false'] {
  background: none;
  border-inline-start: 2px dashed var(--ar-kreide-2);
}

/*
 * DER EINGEBAUTE SCHWELLENREGLER: ein `<input type="range">` über der ganzen Schienenfläche, mit unsichtbarer Spur und
 * sichtbarem Knauf — Messing, Tiefschwarz gerahmt, zwei Pfeile darin. Die Schiene ist der Regler, kein zweiter daneben.
 *
 * DER KNAUF STEHT AUF DER ACHSE, NICHT NEBEN IHR. Ein Regler, der genau so breit ist wie die Schiene, führt die Mitte
 * seines Knaufs nur von einer halben Knaufbreite bis zur anderen: Bei 1,00 säße sie auf einer Schiene von 320 Pixeln dreizehn Pixel neben der Trefferzone,
 * die dort beginnt, und ein sichtbarer Knauf, der die Grenze nicht trifft, sagt dem Daumen etwas Falsches. Der Regler
 * ist deshalb um eine Knaufbreite breiter und steht um eine halbe nach links; die Spanne des Schwellenwerts
 * (`--ar-ty-min`, `--ar-ty-max`, aus der Sicht) legt die Mitte des Knaufs genau auf die Stelle, an der die Messgrenze
 * gezeichnet wird. Das Überstehen ist unsichtbar bis auf den Knauf selbst und liegt im Rand des Bretts; bei 28 Pixeln
 * sind es auf 375 px neun Pixel und damit weniger als Brettluft und Kante zusammen.
 *
 * Getastet wird auf der ganzen Schiene, nicht nur auf dem Knauf: Sie ist 52 Pixel hoch, und ein Druck irgendwo auf
 * der Spur holt den Knauf dorthin.
 */
.ar-ty__schiene-regler {
  --ar-ty-knauf: 1.75rem;
  position: absolute;
  inset-block: 0;
  left: calc(var(--ar-ty-min) * 1% - var(--ar-ty-knauf) / 2);
  z-index: 2;
  width: calc((var(--ar-ty-max) - var(--ar-ty-min)) * 1% + var(--ar-ty-knauf));
  height: 100%;
  margin: 0;
  background: none;
  cursor: ew-resize;
  appearance: none;
}

.ar-ty__schiene-regler:focus-visible {
  outline: 2px solid var(--ar-kreide);
  outline-offset: -2px;
}

.ar-ty__schiene-regler::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: none;
}

.ar-ty__schiene-regler::-moz-range-track {
  width: 100%;
  height: 100%;
  background: none;
}

.ar-ty__schiene-regler::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--ar-ty-knauf);
  height: calc(var(--ar-ty-schiene-hoehe) - 4px);
  border: 2px solid var(--ar-noir);
  border-radius: 0;
  background: var(--ar-ty-pfeile) center / 1rem 0.625rem no-repeat var(--ar-ty-messing);
  cursor: ew-resize;
  appearance: none;
}

.ar-ty__schiene-regler::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--ar-ty-knauf);
  height: calc(var(--ar-ty-schiene-hoehe) - 4px);
  border: 2px solid var(--ar-noir);
  border-radius: 0;
  background: var(--ar-ty-pfeile) center / 1rem 0.625rem no-repeat var(--ar-ty-messing);
  cursor: ew-resize;
}

/*
 * Die Zahl, auf die der Knauf zeigt, in der Zeile über der eigenen Schiene: Beim Ziehen deckt der Daumen die Schiene
 * ab, diese Zeile bleibt frei. Messing wie der Knauf, damit beides als ein Paar gelesen wird; die Pfeile sind dieselben
 * Dreiecke wie im Knauf.
 */
.ar-ty__schiene-wert {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
  color: var(--ar-ty-messing);
  font-family: var(--ar-schrift-mono);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ar-ty__schiene-fuss {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
}

.ar-ty__schiene[data-ar-ty-meins] .ar-ty__schiene-fuss {
  color: var(--ar-kreide);
}

/* ------------------------------------------------------------ Bedienpult */

.ar-ty__pult {
  display: grid;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 2px solid var(--ar-kante-griff);
}

.ar-ty__pult[data-ar-ty-gesperrt] {
  gap: 0.3rem;
}

.ar-ty__chips {
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ty__hebel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.ar-ty__hebel-taste {
  min-height: 44px;
}

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

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

.ar-ty__werte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.ar-ty__wert {
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}

/* Die Rechnung zum gewählten Einsatz: fett, damit die Summe nicht neben der Taste untergeht, an der sie hängt. */
.ar-ty__gesamt {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ar-ty__satz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
}

/* Der Träger des Docks steht als Raster, damit der Knopf die ganze Breite nimmt und nicht nur die seines Worts. */
.ar-ty__dock {
  display: grid;
}

.ar-ty__besiegeln {
  min-height: 44px;
}

.ar-ty__stempel {
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

/* ------------------------------------------------------------ Zwischenbilanz */

.ar-ty__bilanz {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--ar-kante-griff);
}

.ar-ty__bilanz-kopf {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ty__bilanz-titel {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

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

.ar-ty__saldo-teil {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
}

.ar-ty__saldo-marke {
  display: block;
  width: 1rem;
  height: 1rem;
}

.ar-ty__saldo-teil[data-ar-ty-saldo='plus'] { color: var(--ar-gruen); }
.ar-ty__saldo-teil[data-ar-ty-saldo='minus'] { color: var(--ar-rot); }
.ar-ty__saldo-teil[data-ar-ty-saldo='null'] { color: var(--ar-kreide-2); }

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

.ar-ty__rangliste {
  display: grid;
  gap: 0.3rem;
}

.ar-ty__rangliste-kopf {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ty__rangliste-titel {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

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

.ar-ty__rang-teil {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--ar-kante);
}

.ar-ty__rang[data-ar-weg] .ar-ty__rang-teil {
  opacity: 0.6;
}

.ar-ty__rang-platz {
  min-width: 1.4rem;
  color: var(--ar-kreide-2);
}

.ar-ty__rang-marke {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.ar-ty__rang-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ar-kreide);
}

.ar-ty__rang-du {
  color: var(--ar-kreide-2);
}

.ar-ty__rang-chips {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ar-ty__rang-kredit {
  color: var(--ar-rot);
  font-size: 0.8rem;
}

/* ------------------------------------------------------------ Coupbuch */

.ar-ty__buch {
  display: grid;
  gap: 0.4rem;
}

.ar-ty__buch-titel {
  margin: 0;
  color: var(--ar-kreide);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

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

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

.ar-ty__buch-kopf {
  margin: 0 0 0.15rem;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-ty__buch-posten {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.ar-ty__buch-marke {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
}

.ar-ty__buch-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ar-kreide);
}

.ar-ty__buch-treffer {
  color: var(--ar-kreide-2);
}

.ar-ty__buch-saldo {
  min-width: 3rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ar-ty__buch-saldo[data-ar-ty-saldo='gewinn'] { color: var(--ar-gruen); }
.ar-ty__buch-saldo[data-ar-ty-saldo='verlust'] { color: var(--ar-rot); }
.ar-ty__buch-saldo[data-ar-ty-saldo='null'] { color: var(--ar-kreide-2); }

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

.ar-ty__aufdeckung {
  display: grid;
  gap: 0.4rem;
  margin-block-end: 0.8rem;
}

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

/* ------------------------------------------------------------ Die Bildkarten (grafik.js) */

.ar-g-ty-hebelkasten { fill: var(--ar-ty-blech); stroke: var(--ar-kante-griff); stroke-width: 3; }
.ar-g-ty-hebelnabe { fill: var(--ar-noir); stroke: var(--ar-ty-messing); stroke-width: 3; }
.ar-g-ty-hebelarm { fill: var(--ar-ty-messing); }
.ar-g-ty-lineal { fill: var(--ar-ty-blech); stroke: var(--ar-ty-messing); stroke-width: 2; }
.ar-g-ty-kerbe { fill: none; stroke: var(--ar-ty-messing); stroke-width: 2; }
.ar-g-ty-punkt { fill: var(--ar-funke); }
.ar-g-ty-schiene { fill: var(--ar-ty-blech); stroke: var(--ar-kante-griff); stroke-width: 2; }
.ar-g-ty-schienefeld { fill: var(--ar-ty-treffer); }
.ar-g-ty-grenze { fill: var(--ar-ty-messing); }
.ar-g-ty-filz { fill: var(--ar-ty-graphit); }
.ar-g-ty-balken { fill: var(--ar-ty-messing); stroke: var(--ar-noir); stroke-width: 2; }
.ar-g-ty-blatt { fill: var(--ar-kreide); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-ty-zeile { fill: none; stroke: var(--ar-noir); stroke-width: 4; stroke-linecap: square; }
.ar-g-ty-strich { fill: none; stroke: var(--ar-noir); stroke-width: 2; }
.ar-g-ty-kasse { fill: var(--ar-ty-blech); stroke: var(--ar-ty-messing); stroke-width: 3; }
.ar-g-ty-kassekante { fill: none; stroke: var(--ar-ty-messing); stroke-width: 2; }

/* ------------------------------------------------------------ Schreibtisch: zwei Spalten */

@media (min-width: 50rem) {
  .ar-ty {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }

  .ar-ty__kopf {
    grid-column: 1 / -1;
  }
}