/* =====================================================================
   Sportlano Review — ein Werkzeug, kein Dashboard.

   Umgesetzt nach dem Design-Handoff „UX-Konzept Crawler-Backend",
   Abschnitt 8 (Issue #26). Der Maßstab ist nicht Aussehen, sondern
   Sekunden je Feldentscheidung: bei 725 offenen Feldern kostet jede
   zusätzliche Sekunde zwölf Minuten Arbeitszeit, jeder zusätzliche Klick
   mehrere Stunden. Daraus folgt alles hier:

   - Dichte vor Weissraum. 30 Queue-Zeilen ohne Scrollen, Zeilenhöhe 26 px.
   - Farbe ist Signal, nicht Schmuck. Es gibt 8 Belegstatus × 3 Prüfstatus
     × 3 Konfidenzstufen — als Farbenspiel unlesbar. Deshalb: Belegstatus
     als TEXT, Prüfstatus und Konfidenz als GLYPHEN, und genau zwei
     Signalfarben (Achtung, Sperre) plus eine Aktionsfarbe.
   - Keine externen Ressourcen. Der Server hat keinen öffentlichen Zugang;
     eine CDN-Schrift wäre auf ihm eine leere Zeile. Drei Systemstapel.
   - Keine `transition`, keine `animation` im Entscheidungsfluss. Eine
     Bewegung, die man 725-mal sieht, ist 725-mal Wartezeit.
   ===================================================================== */

:root {
  /* Flächen */
  --flaeche:        #ffffff;
  --flaeche-gedaempft: #fcfcfd;
  --leiste:         #fbfbfc;
  --leiste-fuss:    #f6f7f8;
  --marke-inaktiv:  #f2f3f4;

  /* Linien */
  --linie-stark:    #d8dbdd;
  --linie:          #e7e9ea;
  --linie-schwach:  #eff1f1;
  --linie-zeile:    #f1f2f3;

  /* Text */
  --text:           #1d2224;
  --text-2:         #3c4447;
  --text-leise:     #5b6467;
  --text-sehr-leise:#98a1a4;

  /* Aktion und Signale */
  --tastenrand:     #c8cccf;
  --aktion:         #0a6b7d;
  --aktion-text:    #08596a;
  --aktion-flaeche: #e6f1f4;
  --achtung:        #8a5a12;
  --achtung-text:   #6d4710;
  --achtung-flaeche:#f9f1e2;
  --sperre:         #8c2f22;
  --sperre-text:    #7a2a1e;
  --sperre-flaeche: #f8e6e3;
  --erfuellt:       #2c6b45;

  /* Drei Stapel, drei Aufgaben. Die Serifenschrift trägt die Prosa:
     Zitate bis 1.090 Zeichen und Begründungen bis 1.305 Zeichen sind
     Fliesstext, kein Etikett. */
  --serife: Charter, "Bitstream Charter", Georgia, serif;
  --sans:   system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:   ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche:        #1d2124;
    --flaeche-gedaempft: #1a1e21;
    --leiste:         #191d20;
    --leiste-fuss:    #191d20;
    --marke-inaktiv:  #22272a;

    --linie-stark:    #333a3d;
    --linie:          #272c2f;
    --linie-schwach:  #2c3235;
    --linie-zeile:    #2c3235;

    --text:           #e2e6e7;
    --text-2:         #c9cfd1;
    --text-leise:     #98a1a4;
    --text-sehr-leise:#788184;

    --tastenrand:     #4b5457;
    --aktion:         #57b6c9;
    --aktion-text:    #bfe6ee;
    --aktion-flaeche: #17353c;
    --achtung:        #d8b674;
    --achtung-text:   #d8b674;
    --achtung-flaeche:#332b18;
    --sperre:         #e39383;
    --sperre-text:    #e39383;
    --sperre-flaeche: #33201c;
    --erfuellt:       #7fb894;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--flaeche); color: var(--text);
  font: 400 14px/1.5 var(--sans);
}

a { color: var(--aktion-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Fokus muss sichtbar sein. `outline:none` gibt es hier nicht — wer ohne
   Maus arbeitet, verliert sonst die Stelle. */
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 1px; }

h1, h2, h3 { margin: 0; font: 600 13px/1.2 var(--sans); }

.mono  { font-family: var(--mono); }
.leise { color: var(--text-leise); }
.serife { font-family: var(--serife); }
.zahl  { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Kopf */
/* 40 px, und die Kennzahlen stehen als Textzeile darin. Keine Kacheln:
   vier Zahlen in vier Kästen kosten 120 px Höhe und sagen nichts, was
   eine Zeile nicht sagt. */
header {
  flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; gap: 26px;
  padding: 0 16px;
  background: var(--leiste); border-bottom: 1px solid var(--linie-stark);
}
header .wortmarke { font: 600 13px/1 var(--sans); white-space: nowrap; }
header nav { display: flex; gap: 18px; height: 40px; align-items: center; }
header nav a { font: 500 13px/1 var(--sans); color: var(--text-leise);
               text-decoration: none; height: 40px; display: flex;
               align-items: center; }
/* Die aktive Ansicht ist ohne Farbe erkennbar: Unterstrich plus Gewicht. */
header nav a.aktiv { color: var(--aktion-text); font-weight: 600;
                     box-shadow: inset 0 -2px 0 var(--aktion); }
header .kennzahlen {
  margin-left: auto; display: flex; gap: 16px; align-items: center;
  font: 500 12px/1 var(--mono); color: var(--text-leise);
}
header .kennzahlen input {
  font: 400 12px/1 var(--mono); width: 96px; padding: 4px 6px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 2px;
}

/* ---------------------------------------------------------------- Rumpf */
main { flex: 1 1 auto; min-height: 0; overflow: auto; }
main.gepolstert { padding: 14px 16px 20px; }

/* ---------------------------------------------------------------- Fuss */
/* Dauerhaft sichtbar, einzeilig. Die Tastenhinweise sind der Ersatz für
   ein Handbuch, das niemand liest. */
footer.tastenfuss {
  flex: 0 0 auto;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 7px 16px;
  border-top: 1px solid var(--linie-stark); background: var(--leiste-fuss);
  font: 400 12px/1 var(--sans); color: var(--text-leise);
}
footer.tastenfuss .merksatz { margin-left: auto; font-family: var(--mono); }
footer.tastenfuss span.paar { display: flex; gap: 6px; align-items: center; }

kbd {
  font: 500 11px/1 var(--mono);
  border: 1px solid var(--tastenrand); border-bottom-width: 2px;
  border-radius: 3px; padding: 3px 5px;
  background: var(--leiste); color: var(--text);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Marken */
.marke {
  display: inline-block; padding: 2px 7px; border-radius: 2px;
  font: 500 12px/1.4 var(--mono); white-space: nowrap;
  background: var(--flaeche); color: var(--text-2);
  border: 1px solid var(--linie-stark);
}
.marke.aktiv { background: var(--aktion); color: #ffffff; border-color: var(--aktion); }
.marke.leer  { background: var(--marke-inaktiv); border-color: var(--linie); }
/* Genau zwei Belegstatus tragen Farbe. */
.marke.sperre  { color: var(--sperre-text);  background: var(--sperre-flaeche);
                 border-color: var(--sperre); }
.marke.achtung { color: var(--achtung-text); background: var(--achtung-flaeche);
                 border-color: var(--achtung); }

/* Belegstatus als Text — nicht als Farbe, nicht als Übersetzung. */
.belegstatus { font: 400 11px/1 var(--mono); color: var(--text-2); }
.belegstatus.sperre  { color: var(--sperre-text);  font-weight: 500; }
.belegstatus.achtung { color: var(--achtung-text); font-weight: 500; }
/* Dieselben zwei Signalfarben an einer gewöhnlichen Zelle — der
   Anbieter-Graph zeigt „2/3 gelesen" und eine robots-Sperre als Zahl. */
td.achtung { color: var(--achtung-text); font-weight: 500; }
td.sperre  { color: var(--sperre-text);  font-weight: 500; }
/* Glyphen tragen nie Farbe. Der Klartext steht im aria-label. */
.glyphe { font: 400 12px/1 var(--mono); color: var(--text-leise);
          letter-spacing: .5px; }

/* ---------------------------------------------------------------- Tabellen */
table.dicht { width: 100%; table-layout: fixed; border-collapse: collapse;
              font: 400 13px/1.3 var(--sans); }
table.dicht thead th {
  text-align: left; font: 500 10px/1.5 var(--mono); letter-spacing: .05em;
  color: var(--text-leise); background: var(--leiste);
  padding: 5px 8px; border-bottom: 1px solid var(--linie-stark);
  position: sticky; top: 0; z-index: 2;
}
table.dicht tbody tr { height: 26px; border-bottom: 1px solid var(--linie-zeile); }
table.dicht td { padding: 0 8px; overflow: hidden; }
table.dicht.sehr-dicht tbody tr { height: 24px; }
table.dicht tbody tr:hover { background: var(--flaeche-gedaempft); }
table.dicht tbody tr.gewaehlt { background: var(--aktion-flaeche);
                                box-shadow: inset 3px 0 0 var(--aktion); }
table.dicht td.wert { font: 500 12px/1 var(--mono); }
table.dicht td.schl { font: 400 12px/1 var(--mono); color: var(--text-2); }
table.dicht td.meta { font: 400 11px/1 var(--mono); color: var(--text-leise); }
table.dicht a { color: inherit; }
table.dicht tbody tr td a.oeffnen { color: var(--aktion-text); font-weight: 500; }

/* ---------------------------------------------------------------- Filterleiste */
.filterleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--linie-stark); background: var(--leiste-fuss);
}
.filterleiste .rubrik {
  font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--text-leise);
}
.filterleiste .trenner { width: 1px; height: 20px; background: var(--linie-stark);
                         margin: 0 4px; }
/* `width:auto` ist hier keine Feinheit: die Formularfelder erben sonst die
   volle Breite aus der Grundregel weiter unten, jedes bricht in eine eigene
   Zeile, und aus einer 38-px-Leiste werden 221 px. Das sind sieben
   Queue-Zeilen, die nicht mehr sichtbar sind. */
.filterleiste select,
.filterleiste input,
.filterleiste button { width: auto; }
.filterleiste select {
  font: 400 12px/1 var(--mono); padding: 4px 6px; border-radius: 2px;
  background: var(--flaeche); color: var(--text-2);
  border: 1px solid var(--linie-stark); max-width: 240px;
}
.filterleiste .rechts { margin-left: auto; display: flex; gap: 6px;
                        align-items: center; font: 400 12px/1 var(--sans);
                        color: var(--text-leise); }

/* ---------------------------------------------------------------- Beleg-Panel */
.panel { display: grid; grid-template-columns: minmax(0, 1fr) 424px;
         min-height: 100%; }
.panel > .links  { border-right: 1px solid var(--linie); min-width: 0; }
.panel > .rechts { display: flex; flex-direction: column; min-width: 0; }

.fallkopf {
  display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px;
  border-bottom: 1px solid var(--linie-stark); background: var(--leiste);
}
.fallkopf .schluessel { font: 600 13px/1 var(--mono); color: var(--aktion-text); }
.fallkopf .serie { margin-left: auto; display: flex; align-items: center; gap: 10px;
                   font: 400 12px/1 var(--mono); color: var(--text-leise); }

.zustandsstreifen {
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linie); background: var(--flaeche-gedaempft);
}
.zustandsstreifen .block { display: flex; flex-direction: column; gap: 5px; }
.zustandsstreifen .kopf {
  font: 500 10px/1.5 var(--mono); letter-spacing: .05em; color: var(--text-leise);
}
.zustandsstreifen .grosswert { font: 600 26px/1.1 var(--mono); margin-top: 2px;
                               max-width: 460px; overflow-wrap: anywhere; }
.zustandsstreifen .grosswert.kein-wert { color: var(--sperre-text); font-size: 19px; }
.zustandsstreifen .grosswert.lang { font-size: 15px; line-height: 1.4; }

.belegteil { padding: 14px 20px 20px; }
.belegteil .ueberschrift { display: flex; align-items: baseline; gap: 10px;
                           margin-bottom: 9px; }
.belegteil .ueberschrift .zusatz { font: 400 12px/1.4 var(--mono);
                                   color: var(--text-leise); }

.belegkarte { border: 1px solid var(--linie-stark); background: var(--flaeche);
              margin-bottom: 9px; }
.belegkarte.spitze { border-left: 3px solid var(--aktion); }
.belegkarte .karten-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie-schwach); background: var(--leiste);
}
.belegkarte .behauptet { font: 600 17px/1 var(--mono); overflow-wrap: anywhere; }
.belegkarte .rang { font: 400 11px/1.4 var(--mono); color: var(--text-leise); }
.belegkarte .uebernehmen { margin-left: auto; }
.belegkarte .karten-koerper { padding: 11px 14px; }
/* Das Zitat ist Fliesstext, kein Etikett: 1.090 Zeichen im Höchstfall. */
.belegkarte .zitat { margin: 0; font: 400 15px/1.6 var(--serife); color: var(--text); }
.belegkarte .quelle {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font: 400 11px/1.5 var(--mono); color: var(--text-leise);
}
.belegkarte .quelle a { color: var(--aktion-text); }

/* Ab fünf Belegen: einzeilige Reihen, damit acht ohne Scrollen erreichbar
   bleiben. Höchstwert im Bestand ist 8. */
.belegzeile {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; border: 1px solid var(--linie); border-top: 0;
  font: 400 12px/1.4 var(--mono);
}
.belegzeile:first-of-type { border-top: 1px solid var(--linie); }
.belegzeile .zwert { font-weight: 500; flex: 1 1 auto; min-width: 0;
                     white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; }
.belegzeile .zk { flex: 0 0 130px; color: var(--text-leise); }
.belegzeile .zb { flex: 0 0 132px; color: var(--text-leise); }
.belegzeile .zz { flex: 0 0 96px; color: var(--text-leise); text-align: right; }

/* Langer Feldwert: eigener Block, begrenzte Höhe, kein waagerechter Lauf. */
.langwert {
  font: 400 13px/1.65 var(--mono); max-height: 132px; overflow: auto;
  padding: 10px 12px; border: 1px solid var(--linie);
  background: var(--flaeche-gedaempft);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.autoritaetshinweis {
  display: flex; gap: 10px; margin-top: 14px; padding: 9px 11px;
  border: 1px solid var(--linie); background: var(--flaeche-gedaempft);
}
.autoritaetshinweis .rubrik { font: 500 11px/1.5 var(--mono);
                              color: var(--text-leise); white-space: nowrap; }
.autoritaetshinweis p { margin: 0; font: 400 13px/1.45 var(--serife);
                        color: var(--text-2); }

/* ---------------------------------------------------------------- Rechte Spalte */
.abschnitt { padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.abschnitt.gedaempft { background: var(--flaeche-gedaempft); }
.abschnitt.unten { margin-top: auto; border-bottom: 0;
                   border-top: 1px solid var(--linie); }
/* Der Block „Warum liegt der Fall hier?" ist tragend, nicht dekorativ:
   Median 251, Maximum 1.305 Zeichen. Er wird nicht gekürzt. */
.begruendung { margin: 6px 0 0; font: 400 14px/1.6 var(--serife); color: var(--text); }
.zeichenzahl { margin-top: 8px; font: 400 11px/1.5 var(--mono); color: var(--text-leise); }

/* ---------------------------------------------------------------- Entscheidung */
.entscheidungen { display: flex; flex-direction: column; gap: 9px; }
button.wahl, .wahl {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; text-align: left; cursor: pointer;
  font: 500 13px/1.3 var(--sans);
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 0;
}
button.wahl:hover { border-color: var(--aktion); }
button.wahl.haupt { background: var(--aktion-flaeche); border-color: var(--aktion); }
button.wahl .nachsatz { margin-left: auto; font: 400 11px/1.3 var(--mono);
                        color: var(--text-leise); }
button.wahl.haupt .nachsatz { color: var(--aktion-text); }
.sonderfeld { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sonderfeld button.wahl { font: 400 12px/1.3 var(--mono); padding: 7px 9px; }
.unterscheidung { margin: 2px 0 0; font: 400 12px/1.5 var(--serife);
                  color: var(--text-leise); }

.erhebung { display: flex; flex-direction: column; gap: 6px;
            padding: 9px 10px; border: 1px solid var(--linie);
            background: var(--flaeche-gedaempft); }
input[type=text], input[type=search], input[type=date],
input[type=password], textarea, select {
  font: 400 13px/1.4 var(--sans); width: 100%; padding: 5px 8px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 2px;
}
input.mono, textarea.mono { font-family: var(--mono); font-size: 12px; }
textarea { min-height: 54px; resize: vertical; }
/* `block`, damit das Feld darunter steht und nicht daneben: sonst rutscht
   ein Eingabefeld ohne `width:100%` neben seine Beschriftung. */
label.feldname { display: block; font: 500 11px/1.5 var(--mono);
                 letter-spacing: .04em; color: var(--text-leise); }

button {
  font: 500 12px/1.3 var(--sans); padding: 5px 10px; cursor: pointer;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 2px;
}
button:hover { border-color: var(--aktion); }
button.voll { width: 100%; padding: 9px; background: var(--aktion); color: #ffffff;
              border-color: var(--aktion); font-weight: 600; font-size: 13px; }
button.klein { font-size: 11px; padding: 3px 7px; }
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.verlauf { margin-top: 5px; font: 400 12px/1.6 var(--mono); color: var(--text-2); }
.verlauf .widerrufen { color: var(--text-sehr-leise); text-decoration: line-through; }
.merksatz-klein { margin: 6px 0 0; font: 400 12px/1.45 var(--serife);
                  color: var(--text-leise); }

/* ---------------------------------------------------------------- Hinweisfelder */
.hinweis { padding: 9px 11px; border: 1px solid var(--linie);
           background: var(--flaeche-gedaempft); font-size: 13px; }
.hinweis.achtung { border-color: var(--achtung); background: var(--achtung-flaeche);
                   color: var(--achtung-text); }
.hinweis.sperre  { border-color: var(--sperre);  background: var(--sperre-flaeche);
                   color: var(--sperre-text); }
.hinweis.erfuellt { border-color: var(--erfuellt); color: var(--erfuellt); }
.hinweis p { margin: 4px 0 0; font: 400 13px/1.5 var(--serife); }

/* Bedingung, die einen Übergang hält: linke Signalkante, ein Satz, ein
   Sprungziel. Kein ausgegrauter Knopf — nirgends. */
.bedingung { padding: 9px 12px; border: 1px solid var(--linie);
             border-left: 3px solid var(--sperre); margin-bottom: 7px;
             background: var(--flaeche); }
.bedingung .titel { font: 600 13px/1.3 var(--sans); }
.bedingung p { margin: 4px 0 0; font: 400 13px/1.5 var(--serife); color: var(--text-2); }
.bedingung .ziel { font: 500 12px/1 var(--sans); }

/* ---------------------------------------------------------------- Kette */
.kette { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
         font: 400 11px/1 var(--mono); }
.kette .glied { padding: 3px 7px; border: 1px solid var(--linie);
                background: var(--marke-inaktiv); color: var(--text-leise); }
.kette .glied.erreicht { background: var(--flaeche); color: var(--text-2);
                         border-color: var(--linie-stark); }
.kette .glied.jetzt { background: var(--aktion); color: #ffffff;
                      border-color: var(--aktion); font-weight: 500; }
.kette .glied.gesperrt { background: var(--sperre-flaeche); color: var(--sperre-text);
                         border-color: var(--sperre); }

/* ---------------------------------------------------------------- Spalten */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 0;
        min-height: 100%; }
.zwei > .links { border-right: 1px solid var(--linie); min-width: 0; }
.drei { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 400px;
        min-height: 100%; }
.drei > div { border-right: 1px solid var(--linie); min-width: 0; }
.drei > div:last-child { border-right: 0; }
.wizard { display: grid; grid-template-columns: 266px minmax(0, 1fr) 404px;
          min-height: 100%; }
.wizard > div { border-right: 1px solid var(--linie); min-width: 0; }
.wizard > div:last-child { border-right: 0; }
.facetten { flex: 0 0 296px; border-right: 1px solid var(--linie); }

/* ---------------------------------------------------------------- Snapshot */
/* Fremdinhalt. Als Text mit Zeilennummern, niemals als Auszeichnung,
   niemals in einem Rahmen. A184 enthält eingeschleustes JavaScript, das ein
   Administratorkonto anlegen soll. */
table.snapshot { width: 100%; border-collapse: collapse;
                 font: 400 12px/1.7 var(--mono); }
table.snapshot td.nr {
  width: 62px; padding: 0 10px 0 0; text-align: right;
  color: var(--text-sehr-leise); vertical-align: top;
  user-select: none; border-right: 1px solid var(--linie);
}
table.snapshot td.zeileninhalt { padding: 0 0 0 10px; white-space: pre-wrap;
                                 overflow-wrap: anywhere; }
table.snapshot tr.fundzeile td.zeileninhalt { background: var(--achtung-flaeche); }

/* ---------------------------------------------------------------- Überlagerung */
/* Erlaubt AUSSERHALB des Entscheidungsflusses: Tastenübersicht, Snapshot,
   Rücknahmeliste. Im Fluss selbst gibt es kein Modal. Ohne JavaScript ist
   jede davon eine eigene Seite — deshalb hier keine `dialog`-Abhängigkeit. */
.ueberlagerung { padding: 18px 20px; max-width: 900px; }
.ueberlagerung h1 { font: 400 19px/1.2 var(--serife); margin-bottom: 4px; }

/* ---------------------------------------------------------------- 1024 px */
/* Brauchbar ab 1024 px, gestaltet für 1440. Keine mobile Fassung: die
   Arbeit findet an einem Schreibtisch statt. */
@media (max-width: 1180px) {
  .panel, .zwei { grid-template-columns: minmax(0, 1fr); }
  .panel > .links, .zwei > .links { border-right: 0;
                                    border-bottom: 1px solid var(--linie); }
  .drei, .wizard { grid-template-columns: minmax(0, 1fr); }
  .drei > div, .wizard > div { border-right: 0;
                               border-bottom: 1px solid var(--linie); }
  /* Zwei Spalten tragen bei 1024 px nichts bei und kosten Breite. */
  table.dicht .weg-bei-schmal { display: none; }
  /* Und die Nebenkennzahlen im Kopf: sie brechen sonst um und sprengen die
     40-px-Leiste. Die Zahl der jeweiligen Ansicht bleibt stehen. */
  header .kennzahlen span:not(:first-child) { display: none; }
  header { gap: 16px; }
}