/*
 * PSM-Recherche – Stylesheet
 *
 * Gestaltung im Corporate Design von koof.com: Dunkelblau #00376c als
 * Leitfarbe, Hellgrau #eeeeee als Fläche, sachliche Typografie ohne
 * Verzierung. Bewusst ausschließlich Systemschriften – so werden keine
 * Schriftdateien von fremden Servern nachgeladen, was auf einer Website
 * einer Rechtsanwaltskanzlei datenschutzrechtlich der saubere Weg ist.
 */

:root {
  --blau:        #00376c;
  --blau-dunkel: #002a52;
  --blau-tief:   #002748;
  --blau-hell:   #e7eef6;
  --blau-linie:  #b8cade;
  --grau:        #eeeeee;

  --grund:       #ffffff;
  --flaeche:     #f6f7f9;
  --text:        #1b222b;
  --gedaempft:   #59636f;
  --linie:       #d8dde3;
  --linie-zart:  #e9ecef;

  --warn:        #9a3016;
  --warn-flaeche:#fbeee9;
  --ok:          #1d6640;
  --ok-flaeche:  #e9f3ed;
  --hinweis:     #7a5b12;
  --hinweis-flaeche: #fbf3df;

  /* Kopfband und Schaltflächen tragen eigene Farbrollen, damit sie im
     dunklen Modus nicht mit hellem Blau auf Weiß enden. */
  --band-grund:  #00376c;
  --band-text:   #ffffff;
  --knopf-grund: #00376c;
  --knopf-text:  #ffffff;

  --radius: 3px;
  --spalte: 1240px;

  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blau:        #6ea8dc;
    --blau-dunkel: #8fc0ea;
    --blau-tief:   #0d1b2a;
    --blau-hell:   #14263a;
    --blau-linie:  #2a4359;
    --grau:        #1b2129;

    --grund:       #10151b;
    --flaeche:     #0c1016;
    --text:        #e6eaef;
    --gedaempft:   #9aa6b3;
    --linie:       #27303a;
    --linie-zart:  #1c242d;

    --warn:        #eb9a7d;
    --warn-flaeche:#2a1a14;
    --ok:          #7cc79c;
    --ok-flaeche:  #12241a;
    --hinweis:     #dcc07a;
    --hinweis-flaeche: #241f12;

    --band-grund:  #0d1b2a;
    --band-text:   #cfe0f0;
    --knopf-grund: #6ea8dc;
    --knopf-text:  #0b1219;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
}

.rahmen { max-width: var(--spalte); margin: 0 auto; padding: 0 1.25rem; }

/* ================= Kopfbereich ================= */

.kopfband {
  background: var(--band-grund);
  color: var(--band-text);
  font-size: .8rem;
  border-bottom: 1px solid var(--band-grund);
}
.kopfband .rahmen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem;
  min-height: 2.1rem;
}
.kopfband a { color: var(--band-text); text-decoration: none; opacity: .85; }
.kopfband a:hover { opacity: 1; text-decoration: underline; }
.kopfband .rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.sprachwahl { display: flex; gap: .3rem; align-items: center; }
.sprachwahl a { padding: .1rem .35rem; border-radius: 2px; }
.sprachwahl a.aktiv { background: rgba(255,255,255,.2); opacity: 1; font-weight: 600; }

.kopf {
  background: var(--grund);
  border-bottom: 3px solid var(--blau);
}
.kopf .rahmen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-block: 1.1rem;
}
.marke { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--text); }
.marke .wort {
  font-size: 1.6rem; font-weight: 700; letter-spacing: .16em;
  color: var(--blau); line-height: 1;
}
.marke .zusatz { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); }

/* Bildmarke: Die Höhe gibt das height-Attribut am Bild vor (per Konfiguration
   einstellbar) – so bleibt die Seite ohne Inline-Style und damit CSP-konform.
   Die Breite ergibt sich aus dem Seitenverhältnis. */
.marke.bild { align-items: center; gap: 0; }
.marke .logo { display: block; max-width: 100%; height: auto; }

.kopf .titel {
  margin-left: auto; text-align: right; font-size: .92rem; color: var(--gedaempft);
  max-width: 24rem;
}

/* ================= Navigation ================= */

.hauptnav { background: var(--grund); border-bottom: 1px solid var(--linie); }
.hauptnav .rahmen { display: flex; flex-wrap: wrap; gap: 0; }
.hauptnav a {
  padding: .7rem .95rem;
  font-size: .9rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.hauptnav a:hover { background: var(--blau-hell); }
.hauptnav a.aktiv { border-bottom-color: var(--blau); color: var(--blau); font-weight: 600; }
.hauptnav a.aktiv:hover { background: var(--blau-hell); }
.hauptnav .trenner { width: 1px; background: var(--linie); margin: .55rem .5rem; }

/* ================= Inhalt ================= */

main { padding-block: 1.5rem 3.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}
.karte.schmal { max-width: 34rem; }
.karte + .karte { margin-top: 0; }

h1 { font-size: 1.55rem; font-weight: 600; margin: 0 0 .35rem; line-height: 1.2; color: var(--blau); }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .7rem; color: var(--text);
     padding-bottom: .4rem; border-bottom: 1px solid var(--linie); }
h3 { font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
     color: var(--gedaempft); margin: 1.1rem 0 .35rem; }
h3:first-child { margin-top: 0; }

p { margin: 0 0 .6rem; }
p:last-child { margin-bottom: 0; }
.einleitung { color: var(--gedaempft); max-width: 62ch; }
.klein { font-size: .84rem; color: var(--gedaempft); }
.gedaempft { color: var(--gedaempft); }
.mono { font-family: var(--schrift-mono); font-size: .88em; }
.stark { font-weight: 600; }
.rechts { text-align: right; }
.mehr { color: var(--gedaempft); font-size: .82em; }

a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }

/* ================= Formulare ================= */

.suchform { display: grid; gap: .9rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); align-items: end; }
.feld { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.feld.weit { grid-column: 1 / -1; }
.feld.halb { grid-column: 1 / -1; }
/* Zwei Spalten breit erst, wenn das Raster überhaupt zwei Spalten hat –
   sonst erzwingt der Bereich eine implizite zweite Spalte und die Seite
   läuft auf dem Telefon seitlich über. */
@media (min-width: 620px) {
  .feld.halb { grid-column: span 2; }
}
.feld.schalter { grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.feld.schalter label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text); text-transform: none; letter-spacing: 0; }

label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gedaempft);
        overflow-wrap: anywhere; }

input[type="search"], input[type="text"], input[type="password"], select {
  width: 100%; padding: .5rem .65rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--grund); color: var(--text);
  font: inherit; font-size: .94rem;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 1px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--blau); }

.knopfzeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
button, .knopf {
  padding: .55rem 1.4rem; border: 1px solid var(--knopf-grund); border-radius: var(--radius);
  background: var(--knopf-grund); color: var(--knopf-text); font: inherit; font-size: .94rem; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: var(--knopf-text); }
button.leise, .knopf.leise { background: transparent; color: var(--blau); }
button.leise:hover, .knopf.leise:hover { background: var(--blau-hell); color: var(--blau-dunkel); }
.textlink { font-size: .88rem; color: var(--gedaempft); text-decoration: underline; }
button.textlink {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .88rem; font-weight: 400;
  color: var(--gedaempft); text-decoration: underline; cursor: pointer;
}
button.textlink:hover { background: none; color: var(--blau); }

/* ================= Werkzeugleiste ================= */

.werkzeuge {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .6rem 0 .9rem; border-bottom: 1px solid var(--linie-zart); margin-bottom: .9rem;
}
.werkzeuge .anzahl { font-weight: 600; }
.werkzeuge .schub { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
details.klappe { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 1rem; }
details.klappe > summary {
  cursor: pointer; padding: .55rem .8rem; font-size: .88rem; font-weight: 600;
  color: var(--blau); background: var(--blau-hell); list-style: none;
}
details.klappe > summary::-webkit-details-marker { display: none; }
details.klappe > summary::before { content: "▸ "; }
details.klappe[open] > summary::before { content: "▾ "; }
details.klappe .inhalt { padding: .9rem .8rem; }
.spaltenwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .9rem; margin-bottom: .8rem; }
.spaltenwahl label { display: flex; align-items: center; gap: .4rem; font-size: .86rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }

/* ================= Tabellen ================= */

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
table.liste { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--grund); }
table.liste th, table.liste td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
table.liste thead th {
  background: var(--grau); color: var(--text);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--linie); white-space: nowrap;
}
table.liste tbody tr:hover { background: var(--blau-hell); }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.liste td.datum { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ================= Definitionslisten ================= */

dl.daten { display: grid; gap: .7rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; }
dl.daten > div { min-width: 0; }
dl.daten dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); }
dl.daten dd { margin: .12rem 0 0; }

ul.schlicht { margin: .2rem 0; padding-left: 1.1rem; }
ul.schlicht li { margin-bottom: .22rem; }
ul.blank { list-style: none; margin: 0; padding: 0; }
ul.blank li { padding: .28rem 0; border-bottom: 1px solid var(--linie-zart); }
ul.blank li:last-child { border-bottom: 0; }

/* ================= Marken und Zustände ================= */

.marke-chip {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 2px; vertical-align: middle; margin-left: .3rem;
  border: 1px solid transparent; white-space: nowrap;
}
.chip-warn   { background: var(--warn-flaeche);   color: var(--warn);   border-color: var(--warn); }
.chip-ok     { background: var(--ok-flaeche);     color: var(--ok);     border-color: var(--ok); }
.chip-info   { background: var(--blau-hell);      color: var(--blau);   border-color: var(--blau-linie); }
.chip-hinweis{ background: var(--hinweis-flaeche);color: var(--hinweis);border-color: var(--hinweis); }

.warn { color: var(--warn); }
.hinweisbox {
  background: var(--hinweis-flaeche); border-left: 3px solid var(--hinweis);
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
}
.warnbox {
  background: var(--warn-flaeche); border-left: 3px solid var(--warn);
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
}
.infobox {
  background: var(--blau-hell); border-left: 3px solid var(--blau);
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
}

/* ================= Kacheln (Startseite) ================= */

.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.kachel {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem 1.15rem;
  background: var(--grund); border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
}
.kachel:hover { background: var(--blau-hell); border-color: var(--blau-linie); border-left-color: var(--blau); }
.kachel .kopfzeile { font-size: 1.02rem; font-weight: 600; color: var(--blau); }
.kachel .text { font-size: .87rem; color: var(--gedaempft); }

.kennzahlen { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kennzahl { padding: .8rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kennzahl .wert { font-size: 1.5rem; font-weight: 700; color: var(--blau); font-variant-numeric: tabular-nums; }
.kennzahl .bez { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft);
                 overflow-wrap: anywhere; hyphens: auto; }

/* ================= Suche in der Liste ================= */

.seitensuche {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .8rem; padding: .55rem .7rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.seitensuche .feld-leise { font-size: .78rem; font-weight: 600; letter-spacing: .04em;
                           text-transform: uppercase; color: var(--gedaempft); }
.seitensuche-feld { flex: 1 1 14rem; min-width: 0; }
.seitensuche-stand { margin-left: auto; }

/* Der Fund selbst und der gerade angesprungene Fund. */
mark.suchtreffer {
  background: var(--hinweis-flaeche); color: inherit;
  padding: 0 .1em; border-radius: 2px;
}
mark.suchtreffer-aktiv {
  background: var(--blau); color: #fff; font-weight: 600;
  outline: 2px solid var(--blau); outline-offset: 1px;
}

/* ================= Blättern ================= */

.blaettern { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; align-items: center; }
.blaettern a, .blaettern .aktuell, .blaettern .luecke {
  padding: .35rem .7rem; border-radius: var(--radius); font-size: .88rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.blaettern a { border: 1px solid var(--linie); color: var(--text); background: var(--grund); }
.blaettern a:hover { background: var(--blau-hell); border-color: var(--blau-linie); }
.blaettern .aktuell { background: var(--knopf-grund); color: var(--knopf-text); font-weight: 600; }
.blaettern .luecke { color: var(--gedaempft); }

/* ================= Fortschritt ================= */

/* <progress> statt eines Balkens mit Inline-Breite: So kommt die
   Inhaltsrichtlinie ohne 'unsafe-inline' für Stile aus. */
progress.fortschritt {
  width: 100%; height: .6rem; border: 0; border-radius: 99px;
  background: var(--grau); overflow: hidden; display: block;
  appearance: none; -webkit-appearance: none;
}
progress.fortschritt::-webkit-progress-bar { background: var(--grau); border-radius: 99px; }
progress.fortschritt::-webkit-progress-value { background: var(--blau); border-radius: 99px; }
progress.fortschritt::-moz-progress-bar { background: var(--blau); border-radius: 99px; }

/* ================= Hilfsklassen ================= */

.abstand-oben-xs    { margin-top: .5rem; }
.abstand-oben-s     { margin-top: 1rem; }
.abstand-oben-m     { margin-top: 1.4rem; }
.abstand-oben-gross { padding-top: 2rem; }
.ohne-abstand       { margin: 0; }
.chip-blank         { margin-left: 0; }

.kopfleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.kopfleiste .schub { margin-left: auto; }

.feld-leise {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text);
  display: inline-flex; align-items: center; gap: .4rem;
}
.schmale-auswahl { width: auto; display: inline-block; }

pre { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
      padding: .8rem; overflow-x: auto; font-family: var(--schrift-mono); font-size: .82rem; margin: .5rem 0; }
code { font-family: var(--schrift-mono); font-size: .88em; }

/* ================= Fußbereich ================= */

.fuss { border-top: 1px solid var(--linie); background: var(--grund); padding-block: 1.5rem 2rem; }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.fuss .spalte { flex: 1 1 260px; }
.fuss p { font-size: .84rem; color: var(--gedaempft); margin-bottom: .3rem; }
.fuss a { color: var(--blau); }
.fuss .rechtlich { font-size: .8rem; }

/* ================= Druck ================= */

/* ================= Nur für den Ausdruck ================= */

/* Die Deckangaben stehen im Markup jeder Seite, sind am Bildschirm aber
   überflüssig – dort trägt die Kopfleiste den Datenstand und die Suchmaske
   die Kriterien. Erst auf Papier fehlt dieser Zusammenhang. */
.nur-druck { display: none; }

@media print {
  /* Nur die Ränder werden vorgegeben. Papierformat und Ausrichtung bleiben
     bewusst offen: Wer eine breite Trefferliste im Querformat drucken will,
     soll das im Druckdialog wählen können. */
  @page { margin: 16mm 14mm 15mm; }

  :root {
    --grund: #fff; --flaeche: #fff; --text: #000; --gedaempft: #333;
    --linie: #888; --linie-zart: #bbb;
  }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 10pt; line-height: 1.42; }

  /* Bedienelemente tragen auf Papier nichts bei. */
  .kopfband, .hauptnav, .suchform, .werkzeuge, .blaettern,
  details.klappe, button, input, select, textarea,
  .knopfzeile, .textlink, .knopf, .sprachwahl, .rueckweg,
  .formularhilfe, .seitensuche { display: none !important; }

  /* Eine Hervorhebung aus der Bildschirmsuche gehört nicht auf das Papier. */
  mark.suchtreffer, mark.suchtreffer-aktiv {
    background: none !important; color: #000 !important; outline: 0 !important;
    font-weight: inherit !important; padding: 0 !important;
  }

  .nur-druck { display: block; }

  .rahmen { max-width: none; padding: 0; }
  main.rahmen { padding-top: 0; }

  /* ---- Briefkopf ---- */
  .kopf { border-bottom: 1.5pt solid #00376c; padding: 0; }
  .kopf .rahmen { padding-block: 0 6pt; align-items: flex-end; }
  .marke .logo { max-width: 46mm; }
  .marke .wort { font-size: 15pt; color: #00376c; }
  .kopf .titel { font-size: 9pt; color: #333; }

  /* ---- Deckangaben des Ausdrucks ---- */
  .druckkopf { margin: 10pt 0 12pt; break-inside: avoid; break-after: avoid; }
  .druckkopf-titel {
    font-size: 13pt; font-weight: 700; color: #00376c;
    margin: 0 0 6pt; padding: 0; border: 0;
  }
  dl.druckdaten {
    display: block; margin: 0; padding: 6pt 0;
    border-top: .5pt solid #888; border-bottom: .5pt solid #888;
    font-size: 8.5pt; line-height: 1.45; color: #000;
  }
  dl.druckdaten > div { display: flex; gap: 8pt; break-inside: avoid; }
  dl.druckdaten > div + div { margin-top: 2pt; }
  dl.druckdaten dt {
    flex: 0 0 26mm; margin: 0; font-weight: 400; color: #333;
    text-transform: uppercase; letter-spacing: .04em; font-size: 7.5pt; padding-top: .5pt;
  }
  dl.druckdaten dd { margin: 0; flex: 1 1 auto; min-width: 0; }
  dl.druckdaten .adresse { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 7.5pt; word-break: break-all; }
  dl.druckdaten strong { font-weight: 700; }

  /* Die Überschrift steht bereits in den Deckangaben; im Inhalt würde sie sich
     unmittelbar darunter wiederholen. */
  .druckkopf.mit-titel ~ .karte h1 { display: none; }

  /* ---- Fließtext ---- */
  .karte { border: 0; padding: 0; margin: 0 0 10pt; background: none; box-shadow: none; }
  h1 { font-size: 12.5pt; }
  h2 { font-size: 11pt; }
  h3 { font-size: 10pt; }
  h1, h2, h3, h4, .druckkopf-titel { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .einleitung, .klein { font-size: 8.5pt; color: #333; }
  a { color: #000; text-decoration: none; }

  /* Kennzahlenkacheln: enger gesetzt, und die Beschriftung bricht nur noch an
     Silbengrenzen – am Bildschirm darf sie notfalls mitten im Wort umbrechen,
     auf Papier sieht das nach einem Fehler aus. */
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(32mm, 1fr)); gap: 4pt; }
  .kennzahl { padding: 4pt 5pt; background: none; border: .5pt solid #888; }
  .kennzahl .wert { font-size: 12pt; }
  /* Versalien und Sperrung kosten Breite. In der schmalen Kachel passt
     "Pflanzenstärkungsmittel" nur in gemischter Schreibung auf eine Zeile.
     break-word statt anywhere: Ein langes Wort bricht erst, wenn es sonst
     nicht passt – es wird nicht schon bei der Spaltenberechnung zerlegt. */
  .kennzahl .bez {
    font-size: 7pt; text-transform: none; letter-spacing: 0;
    overflow-wrap: break-word; hyphens: auto;
  }
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(60mm, 1fr)); gap: 6pt; }
  .kachel { padding: 5pt 6pt; border: .5pt solid #888; }

  /* Spalten, die nur weiterführende Verweise enthalten, tragen auf Papier
     nichts bei und kosten Breite. */
  .verweis { display: none !important; }

  /* ---- Datenblätter ---- */
  dl.daten > div { break-inside: avoid; }
  .abschnitt, .kachel, .befund { break-inside: avoid; }

  /* ---- Tabellen ---- */
  .tabellenrahmen { overflow: visible !important; border: 0; border-radius: 0; }
  table.liste { font-size: 8.5pt; width: 100%; }
  /* Die Kopfzeile wird auf jeder Folgeseite wiederholt – sonst lässt sich ab
     Seite zwei nicht mehr erkennen, welche Spalte was enthält. */
  table.liste thead { display: table-header-group; }
  table.liste tfoot { display: table-footer-group; }
  table.liste tr { break-inside: avoid; page-break-inside: avoid; }
  table.liste th, table.liste td { padding: 3pt 4pt; overflow-wrap: anywhere; }
  /* Kennungen wie 010000-00/01-001 dürfen nicht mitten im Zeichen umbrechen –
     eine zerrissene Zulassungsnummer ist auf einem Ausdruck unbrauchbar. */
  table.liste td.mono, table.liste td.datum { white-space: nowrap; overflow-wrap: normal; }
  table.liste thead th {
    background: none !important; color: #000; border-bottom: 1pt solid #000;
    font-size: 7.5pt; letter-spacing: .04em;
    /* Am Bildschirm bleiben die Spaltenköpfe einzeilig, weil die Tabelle
       waagerecht scrollen kann. Auf Papier gibt es kein Scrollen: Hier müssen
       sie umbrechen dürfen, sonst wird die Tabelle breiter als das Blatt. */
    white-space: normal;
  }
  table.liste td { border-bottom: .5pt solid #bbb; }
  table.liste tbody tr:hover { background: none; }

  /* Kennzeichnungen müssen auch dann lesbar sein, wenn der Browser
     Hintergrundgrafiken weglässt – das ist seine Voreinstellung. */
  .marke-chip {
    background: none !important; color: #000 !important;
    border: .5pt solid #666 !important; font-size: 7pt; padding: 0 2pt;
  }
  .warnbox, .infobox, .merke {
    background: none !important; border: .5pt solid #888; padding: 5pt 6pt;
    break-inside: avoid;
  }
  .fortschritt { display: none; }

  /* ---- Fußzeile ---- */
  /* Alle Spalten bleiben stehen: Datenstand, Quelle und Rechtshinweis sind
     genau die Angaben, die einen Ausdruck belastbar machen. */
  .fuss {
    border-top: .5pt solid #888; margin-top: 12pt; padding-top: 6pt;
    background: none; font-size: 7.5pt; color: #333;
  }
  .fuss .rahmen { display: block; }
  .fuss .spalte { display: block; margin: 0 0 2pt; }
  .fuss .spalte p { margin: 0; display: inline; }
  .fuss .spalte p + p::before { content: " · "; }
  .fuss a { color: #000; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }

  /* Auf dem Telefon würde die Navigation über sechs Zeilen laufen und den
     Inhalt nach unten drücken. Stattdessen ein waagerecht scrollbarer
     Streifen – der Überlauf bleibt im Streifen und erreicht die Seite nicht. */
  .hauptnav .rahmen {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .hauptnav a { flex: 0 0 auto; }
  .hauptnav .trenner { flex: 0 0 1px; }

  .kopf .titel { margin-left: 0; text-align: left; width: 100%; }
  .karte { padding: 1rem; }
  h1 { font-size: 1.3rem; }
  .hauptnav a { padding: .6rem .7rem; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Strukturabweichungen, die noch niemand zur Kenntnis genommen hat */
.liste tr.neu > td { background: var(--hinweis-flaeche); font-weight: 500; }

/* ---------------------------------------------------------------
   Sortierbare Spaltenköpfe

   Der Verweis füllt die ganze Zelle, damit die Schaltfläche so groß
   ist wie die Überschrift und sich auch auf einem Telefon treffen
   lässt. Der Pfeil ist Text und wird deshalb mitgedruckt.
   --------------------------------------------------------------- */
table.liste thead th a.sortlink {
  display: block;
  margin: -0.45rem -0.6rem;
  padding: 0.45rem 0.6rem;
  color: inherit;
  text-decoration: none;
  white-space: inherit;
}
table.liste thead th a.sortlink:hover,
table.liste thead th a.sortlink:focus-visible {
  text-decoration: underline;
  background: var(--marke-flaeche, rgba(0, 55, 108, 0.08));
}
table.liste thead th a.sortaktiv { font-weight: 700; }
.sortpfeil { margin-left: 0.35em; font-size: 0.85em; }

@media print {
  /* Im Ausdruck ist der Verweis wirkungslos – der Pfeil bleibt, er
     hält fest, wonach die ausgedruckte Liste geordnet war. */
  table.liste thead th a.sortlink { margin: 0; padding: 0; text-decoration: none; }
}