/*
 * cmod — Gestaltung
 *
 * Leitidee: Das Board zeigt Belege, nicht Fortschritt.
 *
 * Vorbild ist der Laufzettel aus der Fertigung: Ein Werkstueck wandert durch
 * Stationen und bekommt an jeder einen Pruefstempel — oder eben nicht. Das
 * groesste Element einer Story ist deshalb nicht ihr Status, sondern ihr
 * Prueffeld. Ist es leer, ist es schraffiert entwertet, so wie man auf einem
 * Formular ein unausgefuelltes Feld durchstreicht.
 *
 * Zwei Schriften mit Bedeutung:
 *   Schreibmaschine  = steht so in der Datei, nachpruefbar
 *   Sans             = die Anwendung spricht
 *
 * Keine Fortschrittsbalken, keine Feier-Momente, keine Bewegung. Ein
 * Protokoll animiert nicht.
 */

:root {
  /* Sechs benannte Werte. Mehr braucht dieses System nicht. */
  --tinte: #171b21;      /* Text, Linien, Umrandungen */
  --papier: #e3e7ea;     /* Seitengrund. Kuehl, nicht cremefarben. */
  --blatt: #f8f9fa;      /* das Blatt, auf dem der Inhalt liegt */
  --beleg: #1d6b52;      /* der Beleg haelt — Gruenspan, keine Feierfarbe */
  --fehlt: #8a6410;      /* kein Beleg vorhanden — Ocker */
  --bruch: #8e2f24;      /* Lauf fehlgeschlagen — Ochsenblut */

  /* Abgeleitete Neutraltoene */
  --stift: #5a636e;      /* Nebentext */
  --linie: #c5cad0;      /* Trennlinien */

  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-beleg: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Die Schraffur ist das Zeichen fuer "hier fehlt der Beleg". Sie wird
     ueberall dort verwendet, wo etwas nicht gedeckt ist — und nur dort. */
  --schraffur: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    color-mix(in srgb, var(--fehlt) 20%, transparent) 6px 8px
  );
  /* Dieselbe Schraffur, leiser — fuer grosse Flaechen, auf denen Text steht. */
  --schraffur-leise: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--fehlt) 11%, transparent) 7px 9px
  );

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 1.5rem 1rem 4rem;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------- */
/* Das Blatt                                                              */
/* --------------------------------------------------------------------- */

.blatt {
  max-width: 62rem;
  margin: 0 auto;
  background: var(--blatt);
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(23 27 33 / 7%);
}

.blatt > * { padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* Anmeldung und Einladung haben genau eine Aufgabe. Ein breites Blatt
   liesse sie verloren wirken. */
.blatt--schmal { max-width: 38rem; }

/* Das Brett braucht Breite, sonst passen die Spalten nicht nebeneinander. */
.blatt--breit { max-width: 84rem; }

/* --------------------------------------------------------------------- */
/* Kopfzeile mit Navigation                                               */
/* --------------------------------------------------------------------- */

.leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  padding-block: .7rem;
  background: var(--tinte);
  color: var(--papier);
  border-radius: 2px 2px 0 0;
  font-size: .875rem;
}

.leiste a { color: inherit; }
.leiste button.zweitrangig { color: var(--papier); border-color: color-mix(in srgb, var(--papier) 45%, transparent); }
.leiste button.zweitrangig:hover { background: color-mix(in srgb, var(--papier) 15%, transparent); }
.leiste :focus-visible { outline-color: var(--papier); }

.leiste__marke {
  font-family: var(--schrift-beleg);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.leiste__rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.leiste__wer { color: color-mix(in srgb, var(--papier) 72%, var(--tinte)); }

/* --------------------------------------------------------------------- */
/* Ausbaustand — was noch nicht gebaut ist, steht oben und nicht im        */
/* Kleingedruckten.                                                       */
/* --------------------------------------------------------------------- */

.ausbaustand {
  background-color: color-mix(in srgb, var(--fehlt) 4%, var(--blatt));
  background-image: var(--schraffur-leise);
  border-bottom: 1px solid var(--linie);
  padding-block: .8rem;
  font-size: .875rem;
}

.ausbaustand__titel {
  font-family: var(--schrift-beleg);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fehlt);
  margin: 0 0 .15rem;
}

.ausbaustand p { margin: 0; max-width: 52ch; }

/* --------------------------------------------------------------------- */
/* Kopfband: Wo bin ich, was tue ich hier, was folgt daraus               */
/* --------------------------------------------------------------------- */

.kopfband { padding-block: 1.75rem 1.25rem; border-bottom: 1px solid var(--linie); }

.kopfband__ort {
  font-family: var(--schrift-beleg);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stift);
  margin: 0 0 .5rem;
}

.kopfband__ort a { color: inherit; }

.kopfband h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  line-height: 1.2;
  font-weight: 620;
  letter-spacing: -.015em;
  max-width: 26ch;
}

.kopfband__folge {
  margin: .6rem 0 0;
  color: var(--stift);
  max-width: 58ch;
}

/* --------------------------------------------------------------------- */
/* Abschnitte                                                             */
/* --------------------------------------------------------------------- */

.abschnitt { padding-block: 1.75rem; border-bottom: 1px solid var(--linie); }
.abschnitt:last-child { border-bottom: 0; }

.abschnitt > h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -.005em;
}

.abschnitt__hinweis { margin: 0 0 1.25rem; color: var(--stift); max-width: 58ch; }

h3 { font-size: .95rem; font-weight: 620; margin: 1.5rem 0 .4rem; }

p { max-width: 62ch; }

a { color: var(--tinte); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------- */
/* Erklaerkasten: Was passiert — und was ausdruecklich nicht              */
/* --------------------------------------------------------------------- */

.erklaerung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: 3px;
  margin: 1.25rem 0;
  background: var(--papier);
}

.erklaerung > div { padding: .9rem 1.1rem; }
.erklaerung > div + div { border-top: 1px solid var(--linie); }

@media (min-width: 46rem) {
  .erklaerung > div + div { border-top: 0; border-left: 1px solid var(--linie); }
}

.erklaerung h3 {
  margin: 0 0 .35rem;
  font-family: var(--schrift-beleg);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stift);
}

.erklaerung p { margin: 0; font-size: .925rem; }
.erklaerung ul { margin: 0; padding-left: 1.1rem; font-size: .925rem; }
.erklaerung li + li { margin-top: .3rem; }

/* --------------------------------------------------------------------- */
/* Das Prueffeld — das Erkennungsmerkmal dieses Boards                     */
/* --------------------------------------------------------------------- */

.prueffeld {
  font-family: var(--schrift-beleg);
  font-size: .78rem;
  line-height: 1.4;
  border: 1.5px solid var(--stift);
  border-radius: 2px;
  padding: .5rem .65rem;
  min-width: 12.5rem;
  /* Das Feld hat eine feste, kompakte Groesse — es ist ein Stempelfeld,
     kein Balken. Sonst wuerde es sich auf einer breiten Seite ausdehnen
     und dabei seinen Charakter verlieren. */
  width: max-content;
  max-width: 100%;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.prueffeld__urteil {
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .72rem;
}

.prueffeld__zeile { color: var(--stift); }

/* Der Beleg haelt: ruhig, satt, ohne Ausrufezeichen. */
.prueffeld--gehalten {
  border-color: var(--beleg);
  color: var(--beleg);
  background: color-mix(in srgb, var(--beleg) 7%, transparent);
}
.prueffeld--gehalten .prueffeld__zeile { color: color-mix(in srgb, var(--beleg) 75%, var(--tinte)); }

/* Der Lauf ist rot. */
.prueffeld--gebrochen {
  border-color: var(--bruch);
  color: var(--bruch);
  background: color-mix(in srgb, var(--bruch) 6%, transparent);
}
.prueffeld--gebrochen .prueffeld__zeile { color: color-mix(in srgb, var(--bruch) 75%, var(--tinte)); }

/* Kein Beleg: das Feld ist leer und wird entwertet. */
.prueffeld--leer {
  border-style: dashed;
  border-color: var(--fehlt);
  color: var(--fehlt);
  background-image: var(--schraffur);
}
.prueffeld--leer .prueffeld__zeile { color: color-mix(in srgb, var(--fehlt) 80%, var(--tinte)); }

/* --------------------------------------------------------------------- */
/* Laufzettel — eine Story                                                */
/* --------------------------------------------------------------------- */

.laufzettel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.laufzettel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--linie);
  border-radius: 3px;
  background: var(--blatt);
}

@media (max-width: 44rem) {
  .laufzettel { grid-template-columns: 1fr; }
}

.laufzettel--auffaellig { border-color: var(--fehlt); border-left-color: var(--fehlt); }
.laufzettel--gehalten { border-left-color: var(--beleg); }

.laufzettel__kopf { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }

.laufzettel__nummer {
  font-family: var(--schrift-beleg);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
}

.laufzettel__titel { font-weight: 620; font-size: 1.02rem; }
.laufzettel__titel a { text-decoration: none; }
.laufzettel__titel a:hover { text-decoration: underline; }

.laufzettel__daten {
  margin: .35rem 0 0;
  font-size: .875rem;
  color: var(--stift);
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
}

.laufzettel__daten .wert { font-family: var(--schrift-beleg); color: var(--tinte); }
.laufzettel__daten > span + span::before {
  content: "·";
  margin-right: .5rem;
  color: var(--linie);
}

/* Der Satz, der stoert. Bewusst ein Satz und kein Abzeichen — ueber einen
   Satz liest man nicht so leicht hinweg. */
.laufzettel__warnung {
  margin: .7rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--fehlt);
  background: color-mix(in srgb, var(--fehlt) 8%, transparent);
  font-size: .9rem;
  max-width: 60ch;
}

/* --------------------------------------------------------------------- */
/* Legende der Beweisstaende                                              */
/* --------------------------------------------------------------------- */

.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

@media (min-width: 52rem) {
  .legende { grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; }
}

.legende li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }

/* Auf dem Handy bleibt neben dem Feld zu wenig Platz fuer den Satz. */
@media (max-width: 34rem) {
  .legende li { grid-template-columns: 1fr; gap: .35rem; }
  .mitgliederliste .rolle { margin-left: 0; }
}
.legende p { margin: 0; font-size: .9rem; }
.legende .prueffeld { min-width: 11rem; }

/* --------------------------------------------------------------------- */
/* Datenblatt — Angaben aus der Datei                                     */
/* --------------------------------------------------------------------- */

.datenblatt { margin: 0; border-top: 1px solid var(--linie); }

.datenblatt > div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: .5rem 1.5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linie);
}

@media (max-width: 40rem) {
  .datenblatt > div { grid-template-columns: 1fr; gap: .1rem; padding: .6rem 0; }
}

.datenblatt dt { color: var(--stift); font-size: .9rem; }
.datenblatt dd { margin: 0; font-family: var(--schrift-beleg); font-size: .9rem; overflow-wrap: anywhere; }
.datenblatt dd.text { font-family: var(--schrift-text); }

/* --------------------------------------------------------------------- */
/* Akzeptanzkriterien                                                     */
/* --------------------------------------------------------------------- */

.kriterien { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.kriterium { border: 1px solid var(--linie); border-radius: 3px; padding: .85rem 1rem; }

.kriterium__kopf { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; margin-bottom: .5rem; }
.kriterium__nummer { font-family: var(--schrift-beleg); font-weight: 700; font-size: .8rem; letter-spacing: .06em; }
.kriterium__titel { font-weight: 600; font-size: .95rem; }

.kriterium dl { margin: 0; display: grid; grid-template-columns: 5.5rem 1fr; gap: .3rem .9rem; }
.kriterium dt {
  font-family: var(--schrift-beleg);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stift);
  padding-top: .15rem;
}
.kriterium dd { margin: 0; font-size: .95rem; }

@media (max-width: 34rem) {
  .kriterium dl { grid-template-columns: 1fr; gap: 0; }
  .kriterium dd { margin-bottom: .5rem; }
}

/* --------------------------------------------------------------------- */
/* Formulare                                                              */
/* --------------------------------------------------------------------- */

.formular { max-width: 34rem; margin: 1.25rem 0 0; }
.formular--breit { max-width: 42rem; }

.feld { margin-bottom: 1.1rem; }
.feld > label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.feld__hilfe { margin: 0 0 .4rem; font-size: .875rem; color: var(--stift); max-width: 52ch; }

input[type="text"], input[type="email"], input[type="password"] {
  font: inherit;
  width: 100%;
  padding: .5rem .6rem;
  background: #fff;
  color: var(--tinte);
  border: 1px solid var(--stift);
  border-radius: 3px;
}

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: 3px;
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--blatt);
  cursor: pointer;
}

button:hover { background: #000; }

button.zweitrangig { background: transparent; color: var(--tinte); }
button.zweitrangig:hover { background: color-mix(in srgb, var(--tinte) 8%, transparent); }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.knopfzeile p { margin: 0; font-size: .875rem; color: var(--stift); }

/* --------------------------------------------------------------------- */
/* Meldungen                                                              */
/* --------------------------------------------------------------------- */

.meldung {
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  border: 1px solid var(--bruch);
  border-left: 5px solid var(--bruch);
  border-radius: 3px;
  background: color-mix(in srgb, var(--bruch) 6%, transparent);
  max-width: 60ch;
}

.meldung--hinweis {
  border-color: var(--stift);
  border-left-color: var(--tinte);
  background: var(--papier);
}

.meldung p { margin: 0; }
.meldung__was { font-weight: 620; }
.meldung__tun { margin-top: .3rem; font-size: .925rem; }

/* --------------------------------------------------------------------- */
/* Sonstiges                                                              */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Bilder                                                                  */
/*                                                                         */
/* Sie stehen bei der Anmeldung, der Einladung und in leeren Zustaenden.   */
/* Auf dem Board nicht: Dort wuerde ein Bild mit dem Prueffeld um          */
/* Aufmerksamkeit ringen, und das Prueffeld muss gewinnen.                 */
/* --------------------------------------------------------------------- */

.blatt > .titelbild {
  display: block;
  padding-inline: 0;
  width: 100%;
  height: clamp(150px, 24vw, 260px);
  object-fit: cover;
  object-position: center 55%;
  border-bottom: 1px solid var(--linie);
}

.leerstelle {
  border: 1px dashed var(--stift);
  border-radius: 3px;
  padding: 1.25rem;
  color: var(--stift);
  max-width: 56ch;
}
.leerstelle p { margin: 0 0 .4rem; }
.leerstelle p:last-child { margin-bottom: 0; }

.leerstelle--mit-bild {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.25rem;
  align-items: center;
  max-width: 46rem;
  padding: 1rem;
}

.leerstelle__bild {
  width: 8.5rem;
  height: 8.5rem;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--linie);
}

@media (max-width: 34rem) {
  .leerstelle--mit-bild { grid-template-columns: 1fr; gap: .9rem; }
  .leerstelle__bild { width: 100%; height: 9rem; }
}

.schluesselfeld {
  font-family: var(--schrift-beleg);
  font-size: .82rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: .8rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: .75rem 0;
}

.schritte { counter-reset: schritt; list-style: none; margin: 1rem 0 0; padding: 0; }
.schritte > li { counter-increment: schritt; position: relative; padding-left: 2.4rem; margin-bottom: 1.25rem; }
.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  font-family: var(--schrift-beleg);
  font-size: .8rem;
  font-weight: 700;
  border: 1.5px solid var(--tinte);
  border-radius: 50%;
}
.schritte h3 { margin: 0 0 .25rem; }
.schritte p { margin: 0 0 .4rem; }

/* --------------------------------------------------------------------- */
/* Ausbauliste — was gebaut ist und was nicht                              */
/* --------------------------------------------------------------------- */

.ausbauliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.ausbauliste > li {
  border: 1px solid var(--linie);
  border-left: 5px solid var(--linie);
  border-radius: 3px;
  padding: .85rem 1rem;
}

.ausbauliste__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  align-items: baseline;
  margin: 0;
}

.ausbauliste__nummer {
  font-family: var(--schrift-beleg);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stift);
}

.ausbauliste__stand {
  font-family: var(--schrift-beleg);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .05rem .4rem;
}

.ausbauliste__stand--fertig { color: var(--beleg); }
.ausbauliste__stand--naechstes { color: var(--tinte); }
.ausbauliste__stand--offen { color: var(--stift); border-style: dashed; }

.ausbauliste > li:has(.ausbauliste__stand--fertig) { border-left-color: var(--beleg); }
.ausbauliste > li:has(.ausbauliste__stand--naechstes) { border-left-color: var(--tinte); }

.ausbauliste h3 { margin: .5rem 0 .3rem; }
.ausbauliste p:last-child { margin: 0; font-size: .95rem; }

.mitgliederliste { list-style: none; margin: 0; padding: 0; }
.mitgliederliste li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linie);
}
.mitgliederliste li:first-child { border-top: 1px solid var(--linie); }
.mitgliederliste .adresse { font-family: var(--schrift-beleg); font-size: .875rem; color: var(--stift); }
.mitgliederliste .rolle { margin-left: auto; font-size: .8rem; color: var(--stift); }

.stoerliste { margin: 0; padding-left: 1.15rem; }
.stoerliste li { margin-bottom: .4rem; }
.stoerliste code { font-family: var(--schrift-beleg); font-size: .875rem; }

.fliesstext { white-space: pre-wrap; margin: 0; max-width: 62ch; }

.nachsatz { margin-top: 1rem; margin-bottom: 0; }

/* Ein Weg, der selten gebraucht wird, aber vorhanden sein muss. */
details.beiseite { margin: 1rem 0; max-width: 42rem; }
details.beiseite > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--stift);
  padding: .3rem 0;
}
details.beiseite[open] > summary { margin-bottom: .5rem; }
details.beiseite .formular { margin-top: 0; }

details.selbstauskunft { border: 1px dashed var(--stift); border-radius: 3px; padding: .7rem 1rem; }
details.selbstauskunft summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
details.selbstauskunft .fliesstext { margin-top: .6rem; font-family: var(--schrift-beleg); font-size: .85rem; }

.fusszeile { padding-block: 1.25rem; color: var(--stift); font-size: .8rem; }
.fusszeile p { margin: 0; }

/* Ein Protokoll animiert nicht. Falls doch je etwas dazukommt, gilt: */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------- */
/* Sitzungsbereich                                                        */
/*                                                                        */
/* Einklappbar und bewusst nicht der Mittelpunkt der Seite. Darin laeuft  */
/* eine echte, bedienbare Sitzung — kein Abbild davon.                    */
/* --------------------------------------------------------------------- */

.sitzung { border: 1px solid var(--linie); border-radius: 3px; margin: 1rem 0; }

.sitzung > summary {
  cursor: pointer;
  padding: .6rem .9rem;
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
}

.sitzung__zustand {
  margin-left: auto;
  font-family: var(--schrift-beleg);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--stift);
}
.sitzung__zustand--gut { color: var(--beleg); }
.sitzung__zustand--fehlt { color: var(--fehlt); }

.terminal {
  background: var(--tinte);
  border-top: 1px solid var(--linie);
  padding: .5rem;
  height: 26rem;
}

@media (max-width: 44rem) {
  .terminal { height: 20rem; }
}

/* Der Auftragstext. Lesbar, auswaehlbar, unveraenderlich. */
.auftragstext {
  width: 100%;
  font-family: var(--schrift-beleg);
  font-size: .82rem;
  line-height: 1.5;
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: .8rem 1rem;
  resize: vertical;
}

/* --------------------------------------------------------------------- */
/* Das Brett                                                              */
/*                                                                        */
/* Spalten entsprechend der Stationen. Erst dadurch wird sichtbar, wo     */
/* sich etwas staut — eine Liste zeigt das nicht.                        */
/* --------------------------------------------------------------------- */

.brett {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13.5rem, 1fr);
  gap: .9rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  margin: 0;
  list-style: none;
  align-items: start;
}

/* Die Karten einer Spalte in einer eigenen Liste. Ohne diese Verschachtelung
   staende ein <li> direkt in einem <li> — der Browser raeumt das anders auf,
   als man denkt, und das Brett bricht auseinander. */
.spalte__karten { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.spalte { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.spalte__kopf { margin: 0; }

.spalte__kopf {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linie);
}

.spalte__name {
  font-family: var(--schrift-beleg);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.spalte__zahl { margin-left: auto; font-family: var(--schrift-beleg); font-size: .8rem; color: var(--stift); }

/* Eine Spalte, in der etwas ungedeckt liegt, traegt es im Kopf. */
.spalte--auffaellig .spalte__kopf { border-bottom-color: var(--fehlt); }
.spalte--auffaellig .spalte__zahl { color: var(--fehlt); }

.spalte__leer {
  font-size: .85rem;
  color: var(--stift);
  font-style: italic;
  padding: .5rem 0;
}

.spalte .laufzettel { grid-template-columns: 1fr; gap: .7rem; padding: .8rem .9rem; }
.spalte .prueffeld { min-width: 0; width: 100%; font-size: .74rem; }
.spalte .laufzettel__titel { font-size: .95rem; }
.spalte .laufzettel__daten { font-size: .8rem; }
.spalte .laufzettel__warnung { font-size: .85rem; }

@media (max-width: 52rem) {
  .brett { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* --------------------------------------------------------------------- */
/* Zeitstrahl der Story-Datei                                             */
/* --------------------------------------------------------------------- */

.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--linie); }

.zeitstrahl > li { position: relative; padding: 0 0 .9rem .3rem; }
.zeitstrahl > li:last-child { padding-bottom: 0; }

.zeitstrahl > li::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: .45rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--linie);
}
.zeitstrahl > li:first-child::before { background: var(--tinte); }

.zeitstrahl__kopf { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.zeitstrahl__abdruck { font-family: var(--schrift-beleg); font-size: .78rem; color: var(--stift); }
.zeitstrahl__autor { font-weight: 600; font-size: .88rem; }
.zeitstrahl__wann { font-family: var(--schrift-beleg); font-size: .76rem; color: var(--stift); margin-left: auto; }
.zeitstrahl__betreff { margin: .1rem 0 0; font-size: .9rem; }