/*
 * Der Zünder: das Bündel mit der brennenden Lunte, der steigende Multiplikator, die Einsatzknöpfe und die Liste, wer
 * noch im Feuer steht. Anzeigeleiste, Brettrand, Abzeichen, Tafel und die Wand mit Lampe und Tresen dahinter
 * (`TISCHE.apparat`) stehen als Rahmen des Spielfelds in css/arena.css; hier steht nur, was diesem Brett gehört.
 *
 * NIE NUR EIN FARBTON. Wer noch im Feuer steht, trägt einen vollen Rahmen UND das Wort „Im Feuer"; wer draußen ist,
 * einen gestrichelten Rahmen UND seinen Multiplikator; wer geplatzt ist, einen roten Rahmen UND das Wort
 * „Geplatzt!". Jede Tippfläche misst mindestens 44 Pixel — in beide Richtungen.
 */

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

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

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='zuender'] {
    --ar-brettbreite: min(28rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/* Auf dem Schreibtisch nimmt das Bündel die volle Bühne — keine Rem-Deckelung mehr, das Zweispalten-Cockpit unten
   begrenzt den Graphen von selbst auf einen sinnvollen Anteil. */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='zuender'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Das Blech des Bündels hält gegen den Filz 1,8 : 1 und ist damit Fläche und keine Auskunft; was etwas sagt, ist die
 * Kreidekante darauf und die Lunte in Senf.
 */
:root {
  --ar-zd-filz: #1a1410;
  --ar-zd-holz: #4a3324;
}

.ar-zd {
  display: grid;
  gap: 0.6rem;
  width: 100%;
}

@media (min-width: 30rem) {
  .ar-zd {
    gap: 0.85rem;
  }
}

/* ------------------------------------------------------------------ Bündel & Multiplikator */

.ar-zd__mitte {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

/* Der Funke sitzt fortan nur noch auf dem stehenden Bild der Lehrkarten und wandert dort nicht mehr. */
.ar-g-zd-funke {
  fill: var(--ar-funke);
}

.ar-g-zd-stab {
  fill: var(--ar-zd-holz);
  stroke: var(--ar-kreide-2);
  stroke-width: 2;
}

.ar-g-zd-schnur {
  fill: var(--ar-noir);
  opacity: 0.7;
}

.ar-g-zd-lunte {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ar-g-zd-filz {
  fill: var(--ar-zd-filz);
}

.ar-g-zd-chip {
  fill: var(--ar-funke);
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-zd-haken {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * DER MULTIPLIKATOR IST DIE GRÖSSTE SCHRIFT DES BRETTS. Er wächst kontinuierlich, solange die Lunte brennt — kein
 * Übergang darauf, denn ein `transition` auf einer Zahl, die zehnmal in der Sekunde neu geschrieben wird, wäre nur
 * verwischte Ziffern.
 */
.ar-zd__mult {
  margin: 0;
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: max(2.4rem, min(4.6rem, calc(var(--ar-einheit) * 0.86)));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  hyphens: none;
}

/*
 * DAS ZÄHLWERK: Der Multiplikator steht hinter einer Messingblende auf Schwarz, so breit wie der Schreiber darunter, und
 * beide werfen ihren Schatten auf die Wand. Die Blende kostet eine Handbreit Höhe, und die zählt der Graph mit.
 */
.ar-zd__multfeld {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 3px solid var(--ar-ku-messing);
  background: var(--ar-noir);
  box-shadow: inset 0 0 0 1px var(--ar-noir-3), var(--ar-ku-schlag);
}

/*
 * DIE KASSENBESTÄTIGUNG NACH DEM EIGENEN ABSPRUNG: „+140 Chips", steigt über dem Multiplikator auf und verschwindet.
 *
 * Sie liegt absolut über ihm und kostet damit keine Zeile: Das Brett rechnet seine Höhe gegen `--ar-reserve`, und eine
 * Zeile, die nur alle paar Sekunden etwas trägt, schöbe den Graphen den ganzen Abend lang nach unten.
 *
 * SIE STEIGT IN ACHT BILDERN UND BLENDET NICHT (`steps`). Übergänge laufen in diesem Haus linear und höchstens 120 ms;
 * was länger darf, ist ein Bildertakt — dieselbe Ausnahme wie beim Konfetti des Turnierpodiums.
 */
.ar-zd__kasse {
  position: absolute;
  inset-inline: 0;
  top: 0;
  margin: 0;
  color: var(--ar-gruen);
  font-family: var(--ar-schrift-mono);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
  hyphens: none;
}

.ar-zd__kasse[data-ar-zd-auf] {
  animation: ar-zd-kasse 1100ms steps(8) forwards;
}

@keyframes ar-zd-kasse {
  from {
    translate: 0 0;
    opacity: 1;
  }

  to {
    translate: 0 -3rem;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-zd__kasse[data-ar-zd-auf] {
    animation: none;
  }
}

.ar-zd__mult[data-ar-zd-geplatzt] {
  color: var(--ar-rot);
}

/*
 * Die Zahl steht still, weil der Server seit zweieinhalb Sekunden schweigt. Sie fällt dafür auf den Kreideton
 * zurück — der Funke gehört der brennenden Lunte, und was hier steht, ist gerade kein bestätigter Stand. Gesagt wird
 * es trotzdem im Wort darüber („Leitung schweigt") und im Satz für den Screenreader: nie nur die Farbe.
 */
.ar-zd__mult[data-ar-zd-kalt] {
  color: var(--ar-kreide-2);
}

.ar-zd__mult-marke {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/*
 * DER KOPF ÜBER DEM BÜNDEL: die wievielte von fünf Zündungen läuft. Er stand nirgends, und damit fehlte die eine
 * Angabe, an der sich ablesen ließ, ob noch etwas kommt — die Historie darunter zeigt Ergebnisse, keine Nummer.
 */
.ar-zd__zuendung {
  margin: 0;
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Signalstreifen */

/*
 * WO DIE LETZTEN ZÜNDUNGEN GERISSEN SIND, in einer Zeile über dem Graphen. Die Zeile hat immer dieselbe Mindesthöhe, mit
 * Marken wie mit dem leisen Satz davor: Sonst rückte der Graph um eine Zeile nach unten, sobald die erste Zündung durch
 * ist. Umbrechen darf sie nur, wenn ein hoher Wert („100,00x“) einmal nicht mehr daneben passt.
 */
.ar-zd__signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-zd__signal-titel,
.ar-zd__signal-leer {
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
}

.ar-zd__signal-titel {
  margin-inline-end: 0.15rem;
}

/*
 * NIEDRIG IST EIN HARTER RAHMEN, HOCH IST GEFÜLLT — die Form trägt den Unterschied, die Farbe nur zusätzlich. Beide Marken
 * sind gleich groß gebaut (der Rahmen ist bei beiden da), damit keine beim Wechsel die Reihe verschiebt.
 */
.ar-zd__signal-marke {
  padding: 0.1rem 0.4rem;
  border: 2px solid var(--ar-kreide-2);
  background: transparent;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  hyphens: none;
}

.ar-zd__signal-marke[data-ar-zd-signal='hoch'] {
  border-color: var(--ar-funke);
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-weight: 700;
}

/* ------------------------------------------------------------------ Der Graph: die brennende Zündschnur */

/*
 * MILLIMETERPAPIER STATT STARREM BILD. Die Kurve ist eine echte Messreihe (Zeit gegen Multiplikator, logarithmisch
 * gestaucht) — kein Übergang auf der Linie selbst, sie wird bei jedem Bild aus den gesammelten Punkten neu gezeichnet,
 * genau wie die Zahl daneben. Nur der Funke an der Spitze bekäme einen weichen Nachlauf, würde er nicht selbst Teil
 * der harten Linie sein.
 */
.ar-zd__graph {
  width: 100%;
  aspect-ratio: 300 / 120;
  border: 3px solid var(--ar-zd-holz);
  box-shadow: var(--ar-ku-schlag);
  background-color: var(--ar-noir);
  background-image: linear-gradient(var(--ar-kante) 1px, transparent 1px), linear-gradient(90deg, var(--ar-kante) 1px, transparent 1px);
  background-size: 12.5% 16.66%;
  background-position: center;
  opacity: 0.96;
}

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

.ar-zd__graph-linie {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ar-zd__graph-flaeche {
  fill: color-mix(in srgb, var(--ar-funke) 18%, transparent);
  stroke: none;
}

.ar-zd__graph-spitze {
  fill: var(--ar-funke);
  stroke: var(--ar-noir);
  stroke-width: 1.5;
}

/*
 * DER KNALL STEHT MITTEN IN DER ZÜNDSCHNUR — auf dem Telefon. Dort steht der Multiplikator im oberen Drittel des
 * Schirms, der Daumen und das Abzeichen unten, und nach dem Knall stand der Wert, um den es ging, am oberen Rand und
 * weit weg von beiden. Während der Haltezeit nach einer Explosion liegt er deshalb rot und in der Größe der Zahl über
 * dem Millimeterpapier, in der Mitte der Bühne; der Graph ist in diesem Augenblick ohnehin leer.
 *
 * ER LIEGT DARÜBER UND NICHT IM FLUSS: Kein Kasten wächst, nichts rückt. Und er ist der eine rote Wert: Die Zahl
 * darüber steht so lange in Kreide still, wie der Stempel steht — zweimal dieselbe rote Zahl untereinander wäre keine
 * Mitte mehr. Auf dem Schreibtisch steht die Zahl groß über einem Graphen, der die ganze Spalte füllt, und bleibt, wie
 * sie war; dort läge der Stempel außerdem unter dem Abzeichen des Rahmens.
 */
.ar-zd__knall {
  display: none;
}

@media (max-width: 47.99rem) {
  .ar-zd__graph {
    position: relative;
  }

  .ar-zd__knall:not([hidden]) {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--ar-rot);
    font-family: var(--ar-schrift-mono);
    font-weight: 700;
    font-size: max(2.4rem, min(4.6rem, calc(var(--ar-einheit) * 0.86)));
    font-variant-numeric: tabular-nums;
    line-height: 1;
    hyphens: none;
    pointer-events: none;
  }

  .ar-zd__mitte:has(.ar-zd__knall:not([hidden])) .ar-zd__mult {
    color: var(--ar-kreide-2);
  }
}

/* ------------------------------------------------------------------ Einsatz */

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

.ar-zd__einsatz-frei {
  display: grid;
  gap: 0.5rem;
}

.ar-zd__ziel-feld {
  font-size: 0.85rem;
}

.ar-zd__knopf {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.45rem 0.4rem;
  text-align: center;
}

.ar-zd__knopf-wort {
  font-size: 0.95rem;
}

/* Die Zeile trägt beim Absprung den Gewinn, und der wird im Takt des Multiplikators neu geschrieben: gleich breite
   Ziffern, sonst wandert die Zeile bei jeder Stelle. */
.ar-zd__knopf-zeile {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-zd__knopf[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

.ar-zd__knopf[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

/*
 * Der Absprung-Knopf ist der lauteste des Bretts: Sein Klick entscheidet über den ganzen Einsatz. Er hat zwei Zeilen —
 * das Wort groß und in Versalien, darunter kleiner und in normaler Schreibweise, was er jetzt sichert. Seine Größe
 * ändert sich mit der Zahl nicht: Beide Zeilen stehen fest, und er füllt seine Spalte, gleich wie viele Stellen der
 * Gewinn hat.
 */
.ar-zd__absprung {
  min-width: min(14rem, 100%);
  min-height: 4.25rem;
  border-color: var(--ar-funke);
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ar-zd__absprung .ar-zd__knopf-wort {
  font-size: 1.3rem;
}

.ar-zd__absprung .ar-zd__knopf-zeile {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/*
 * DER ABSPRUNG KLEBT AM BODEN (`.ar-dock`, css/arena.css), solange die Lunte brennt und die eigene Farbe im Feuer steht.
 * Dort liegt der Daumen, und dort muss er bleiben können, während die Augen oben an der Zahl hängen.
 *
 * DAFÜR STEHT DAS FACH, SOLANGE ES BRENNT, AM ENDE DER SPALTE. Direkt unter dem Bündel stand der Knopf mitten auf dem
 * Schirm; ein klebender Kasten hält aber nur am unteren Rand, was sonst darunter verschwände — nach oben rollt er
 * mit hinaus, und wer die Feuerliste oder das Zündungsbuch ansah, hatte den Absprung über dem Rand. Am Ende der
 * Spalte bleibt er beim Rollen am unteren Rand stehen und steht ganz unten wieder an seinem Platz. Die Reihenfolge im
 * Dokument bleibt, wie sie ist: Der Absprung ist das Erste, was die Tastatur nach dem Bündel erreicht, und genau das
 * soll er sein.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  .ar-zd > .ar-zd__einsatz[data-ar-zd-brennt] {
    order: 1;
  }
}

.ar-zd__wartet {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/*
 * Die übernommene Absage. Sie steht IM Brett und nicht als Toast darüber: Ein verspäteter Einsatz ist kein
 * Systemfehler, sondern der Lauf der Lunte — und die Auskunft wird genau dort gebraucht, wo gleich wieder gesetzt
 * wird. Samtrote Kante, Kreide darauf; Rot auf Schwarz ist in diesem Haus ein Signal und kein Lesetext.
 */
.ar-zd__absage {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--ar-rot);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font-size: 0.82rem;
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Zündungsbuch */

/*
 * Rechts unter der Feuerliste, wo vorher Leerraum stand: je gelaufener Zündung eine Zeile, jüngste oben. Sie kommt
 * aus dem Zustand des Servers, also liest jeder am Tisch dieselben Zahlen — auch wer neu geladen hat.
 */
.ar-zd__buch {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

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

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

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

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

.ar-zd__buch-kopf {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
}

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

/* Der Crashwert ist die Zahl, wegen der man ins Buch sieht: gleich breite Ziffern, kein Trennstrich. */
.ar-zd__buch-crash {
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

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

.ar-zd__buch-marke {
  width: 0.9rem;
  height: 0.9rem;
  align-self: center;
}

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

/* Einsatz und „raus bei" teilen sich eine Spalte, damit der Saldo rechts immer an derselben Kante steht. */
.ar-zd__buch-einsatz,
.ar-zd__buch-was,
.ar-zd__buch-saldo {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

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

.ar-zd__buch-was {
  grid-column: 2 / 4;
  grid-row: 2;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
}

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

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

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

/* Wer gesprengt wurde, trägt die Kante dazu — nicht nur die Farbe der Zahl. */
.ar-zd__buch-posten[data-ar-zd-stand='explodiert'] .ar-zd__buch-was {
  color: var(--ar-rot);
}

/* ------------------------------------------------------------------ Feuer-Liste */

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

.ar-zd__platz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

/* Wer noch im Feuer steht, trägt eine Senfkante UND den Schriftzug „Im Feuer" im Status. */
.ar-zd__platz[data-ar-zd-stand='drin'] {
  border-color: var(--ar-funke);
}

.ar-zd__platz[data-ar-zd-stand='draussen'] {
  border-style: dashed;
  opacity: 0.85;
}

.ar-zd__platz[data-ar-zd-stand='explodiert'] {
  border-color: var(--ar-rot);
}

.ar-zd__marke {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

.ar-zd__name {
  flex: 1;
  overflow-wrap: anywhere;
}

.ar-zd__status {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 0.05rem;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ar-zd__status-gewinn {
  font-size: 0.75rem;
  opacity: 0.85;
}

.ar-zd__platz[data-ar-zd-stand='drin'] .ar-zd__status {
  color: var(--ar-funke);
}

.ar-zd__platz[data-ar-zd-stand='explodiert'] .ar-zd__status {
  color: var(--ar-rot);
}

/* ------------------------------------------------------------------ Befund */

.ar-zd__befund {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Abrechnung */

.ar-zd__feuer--abrechnung {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.ar-zd__feuer--abrechnung .ar-zd__platz[data-ar-zd-stand='drin'] {
  border-color: var(--ar-kante);
}

/* ------------------------------------------------------------------ Bildkarten */

.ar-g-zd-chip {
  fill: var(--ar-funke);
}

/* ------------------------------------------------------------------ Schreibtisch */

/*
 * Links der Graph über die volle Höhe (rund 70% der Bühne), rechts das Cockpit: Einsatz oben, wer im Feuer steht
 * darunter, ganz unten das Zündungsbuch. Auf einem schmalen Fenster bleibt alles in einer Spalte (Grundregel oben).
 *
 * DIE DRITTE ZEILE FÜLLT, WAS ÜBRIG IST. Unter der Feuerliste stand auf 1600 × 1000 toter Raum — die rechte Spalte
 * endete nach zwei kurzen Kästen, und daneben lief der Graph über die volle Höhe weiter. Jetzt steht dort das Buch,
 * und `minmax(0, 1fr)` in der dritten Zeile nimmt genau den Rest.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  .ar-zd {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'mitte einsatz'
      'mitte feuer'
      'mitte buch'
      'befund befund';
    align-content: start;
    gap: 0.75rem 1.5rem;
  }

  .ar-zd > .ar-zd__mitte {
    grid-area: mitte;
    align-content: center;
  }

  .ar-zd > .ar-zd__feuer {
    grid-area: feuer;
    align-content: start;
  }

  .ar-zd > .ar-zd__einsatz {
    grid-area: einsatz;
    align-content: start;
  }

  .ar-zd > .ar-zd__buch {
    grid-area: buch;
  }

  .ar-zd > .ar-zd__befund {
    grid-area: befund;
  }
}