/* ===========================================================================
   style.css — MSB-Quellensuche
   ---------------------------------------------------------------------------
   Farbtoken, Knopfformen, Kopfleiste und Dunkelmodus sind aus dem
   Fristenrechner übernommen, der sie aus dem MSB-Quiz und dem
   Einarbeitungsplan-Konfigurator hat. Wer hier etwas am Aussehen ändert,
   sieht erst dort nach, ob es das schon gibt.
   =========================================================================== */

:root {
  /* Ohne color-scheme zeichnet der Browser Bildlaufleiste, Schreibcursor,
     Auswahlliste und die Grundfläche eines <button> weiter hell. */
  color-scheme: light;

  --navy:         #012F60;
  --navy-hell:    #1B4E8C;
  --navy-zart:    #E8F1FF;

  --blau:            #1C71FE;
  --blau-text:       #155FD6;
  --blau-flae:       #1766E8;
  --blau-flae-hover: #1459CC;

  --grund:        #F3F5F9;
  --weiss:        #FFFFFF;
  --linie:        #E2E8F0;
  --linie-stark:  #CBD5E1;
  --text:         #1B2636;
  --text-still:   #56677C;

  --gruen:        #1E7A4C;
  --gruen-flae:   #E9F6EE;
  --rot:          #B3261E;
  --rot-flae:     #FDECEA;
  --warn-text:    #8A5A00;
  --warn-flae:    #FFF6E0;

  --schatten-karte: 0 1px 2px rgba(15, 35, 65, .05), 0 1px 3px rgba(15, 35, 65, .04);

  --radius:       12px;
  --radius-klein: 8px;

  /* Eine Spalte für alles: Kopfleiste, Inhalt und Fußzeile rücken um
     denselben Betrag ein. */
  --spalte:       1000px;
  --rand:         24px;
  --einzug:       max(var(--rand), calc((100% - var(--spalte)) / 2 + var(--rand)));

  --schrift: "HamburgSans", "Segoe UI Variable Text", "Segoe UI", system-ui,
             -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "HamburgSans", "Segoe UI Variable Display", "Segoe UI",
             system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Muss vor allem anderen stehen: sonst gewinnt jedes spätere `display`
   gegen das hidden-Attribut. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  color: var(--navy);
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

/* Erklärtexte sollen keine Wortreste in der letzten Zeile lassen. */
p, li { text-wrap: pretty; }
/* Ein Satz je Zeile: Texte mit mehreren Sätzen stehen mit jedem Satz in einem
   eigenen Block (span.satz, in index.html und über satzBloecke() in app.js).
   pretty schützt nur die letzte Zeile des ganzen Absatzes, balance bricht
   jeden Satz für sich um, ohne Rest von ein, zwei Wörtern. */
span.satz { display: block; text-wrap: balance; }


/* ===== Kopfleiste ======================================================== */

.kopfleiste {
  display: flex; align-items: center; gap: 22px;
  padding: 10px var(--einzug);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20;
}

.marke-block {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 6px;
  border-radius: var(--radius-klein);
  cursor: pointer; font-family: var(--schrift); text-align: left;
  flex: none;
}
.marke-block:hover { background: var(--grund); }
.marke-block:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }

.marke-strich { width: 22px; height: 6px; border-radius: 3px; background: var(--blau); flex: none; }
.marke-stapel { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.marke-text { font-family: var(--schrift-titel); font-size: 17px; font-weight: 800; color: var(--navy); }
.marke-autor { font-size: 12px; color: var(--text-still); }

.reiter { display: flex; gap: 4px; flex: none; }

.reiter-knopf {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; font-family: var(--schrift); font-size: 14.5px;
  font-weight: 600; color: var(--text-still); cursor: pointer;
}
.reiter-knopf:hover { color: var(--navy); background: var(--grund); }
.reiter-knopf.aktiv { color: var(--blau-text); border-bottom-color: var(--blau); }
.reiter-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }

.kopf-einstellungen { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.thema-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--text-still); cursor: pointer;
}
.thema-knopf:hover { background: var(--grund); color: var(--navy); }
.thema-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.ico-thema { width: 17px; height: 17px; }
.ico-sonne { display: none; }


/* ===== Knöpfe und Felder ================================================= */

.knopf {
  font-family: var(--schrift); font-size: 15px; font-weight: 600;
  padding: 10px 20px; border-radius: var(--radius-klein);
  border: 1px solid transparent; cursor: pointer;
  background: var(--blau-flae); color: #fff;
}
.knopf:hover { background: var(--blau-flae-hover); }

.knopf-mini {
  font-family: var(--schrift); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: transparent;
  color: var(--navy); cursor: pointer;
}
.knopf-mini:hover { background: var(--grund); }

.knopf:focus-visible, .knopf-mini:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 2px;
}

select, input[type="date"], input[type="number"] {
  font-family: var(--schrift); font-size: 15px;
  padding: 9px 11px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark);
  background: var(--weiss); color: var(--text);
  min-width: 0;
}


/* ===== Grundgerüst ======================================================= */

.mitte {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px var(--einzug) 60px;
}

.ansicht { display: flex; flex-direction: column; gap: 18px; }

.tafel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.tafel-titel { font-size: 17px; margin-bottom: 14px; }

.tafel-fuss {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tafel-fuss .knopf-mini { margin-left: auto; }

.held { padding: 8px 2px 0; }
.held h1 { font-size: 29px; margin-bottom: 10px; }
.held-text { max-width: 64ch; margin: 0; color: var(--text-still); }

.augenmarke {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blau-text);
  margin-bottom: 5px;
}

.leermeldung { margin: 0; color: var(--text-still); }



/* ===========================================================================
   Ab hier nur die Quellensuche
   =========================================================================== */

:root {
  --treffer:      #D3E3FF;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;
}

a { color: var(--blau-text); }
a.knopf, a.knopf-mini, a.reiter-knopf { text-decoration: none; display: inline-block; }
a.marke-block { text-decoration: none; }
a.knopf:hover { color: #fff; }
.reiter-knopf { display: inline-block; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Volle Textfarbe statt geerbt: in den blassen Treffertexten kam die
   Markierung sonst nur auf 4,46 : 1. */
mark {
  background: var(--treffer); color: var(--text);
  border-radius: 3px; padding: 0 1px;
  box-shadow: inset 0 -2px 0 var(--blau);
}


/* ===== Suchfeld ========================================================== */

.such-tafel { display: flex; flex-direction: column; gap: 14px; }

.suchzeile { display: flex; gap: 10px; }
.suchzeile input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--schrift); font-size: 17px;
  padding: 11px 14px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark);
  background: var(--weiss); color: var(--text);
}
.suchzeile input:focus-visible { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--navy-zart); }

.filter { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--schrift); font-size: 13px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: transparent; color: var(--text-still);
}
.chip:hover { background: var(--grund); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy-zart); border-color: var(--blau); color: var(--blau-text); }
.chip:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.such-tipp { margin: 0; font-size: 13px; color: var(--text-still); }

.beispiele { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.beispiele-titel { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-still); margin-right: 4px; }

.lade-hinweis { margin: 0; font-size: 14px; color: var(--text-still); }


/* ===== Treffer =========================================================== */

.treffer { display: flex; flex-direction: column; gap: 14px; }
.treffer-info { margin: 0; font-size: 14px; color: var(--text-still); }

.direkt {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--navy-zart); border: 1px solid var(--blau);
  border-radius: var(--radius); padding: 16px 20px; text-decoration: none; color: var(--text);
}
.direkt:hover { border-color: var(--blau-flae-hover); }
.direkt-marke { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blau-text); }
.direkt strong { font-family: var(--schrift-titel); font-size: 17px; color: var(--navy); }

/* Begriff aus dem MSB-Quiz über den Treffern, ruhiger als PID-Karte und Fundstelle */
.begriff-karte { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; }
.begriff-name { font-family: var(--schrift-titel); font-size: 17px; color: var(--navy); }
.begriff-kurz { margin: 0; font-size: 14.5px; text-wrap: pretty; }
.begriff-link { align-self: flex-start; margin-top: 4px; font-size: 14px; font-weight: 600; }

.quelle-gruppe { padding: 0; overflow: hidden; }
.quelle-kopf {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 14px 20px 10px; border-bottom: 1px solid var(--linie);
}
.quelle-kopf h2 { font-size: 16px; }
.quelle-kopf .quelle-titel { font-size: 13.5px; color: var(--text-still); }
.quelle-kopf .anzahl { margin-left: auto; font-size: 13px; color: var(--text-still); white-space: nowrap; }

.art-marke {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  border: 1px solid var(--linie-stark); color: var(--text-still);
}
.art-marke.voll { border-color: var(--blau); color: var(--blau-text); }

.treffer-liste { list-style: none; margin: 0; padding: 0; }
.treffer-liste li + li { border-top: 1px solid var(--linie); }
.treffer-zeile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 20px; text-decoration: none; color: var(--text);
}
.treffer-zeile:hover { background: var(--grund); }
.treffer-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.treffer-ort { font-weight: 700; color: var(--navy); font-size: 15px; }
/* „S. 226“ bleibt zusammen: sonst stand die Zahl allein in der letzten Zeile. */
.treffer-ort .seite { font-weight: 400; color: var(--text-still); font-size: 13px; margin-left: 6px; white-space: nowrap; }
.treffer-text { font-size: 14px; color: var(--text-still); max-width: 90ch; }
.treffer-mehr { padding: 10px 20px 14px; border-top: 1px solid var(--linie); }
/* Kurze Zeilen ohne Satztrennung brechen ausgewogen um: Quellentitel,
   Fundorte, die Zeilen im Verzeichnis und in der PID-Liste, Quellenzeile und
   Kapitel in der Leseansicht, die Punkte der Hilfe, dazu der Knopf „Alle …
   Treffer in … zeigen“. Am Handy stand sonst ein Wort allein in der letzten
   Zeile (Optik-Prüfung 19.10.2026). Der zitierte Wortlaut in .treffer-text
   und das Inhaltsverzeichnis mit den Überschriften der Originale bleiben,
   wie sie sind. */
.quelle-kopf .quelle-titel, .treffer-ort, .treffer-mehr .knopf-mini,
.verz-kurz, .verz-titel, .pid-zeile-fall,
.lese-quelle, .seite-kapitel, .hilfe li { text-wrap: balance; }


/* ===== Lesen ============================================================= */

.zurueck { font-size: 14px; font-weight: 600; text-decoration: none; align-self: flex-start; }
.zurueck:hover { text-decoration: underline; }

.lese-kopf h1, .seiten-tafel h1, #ansicht-inhalt h1 { font-size: 24px; margin-bottom: 6px; }
.lese-quelle { margin: 0; font-size: 14px; color: var(--text-still); }
.nebenstelle { display: inline-block; margin-top: 4px; color: var(--text); }

.lese-leiste { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.lese-leiste select { flex: 1 1 320px; max-width: 100%; }
.lese-blaettern { display: flex; gap: 8px; }
.knopf-mini[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.lesetext { padding: 24px 28px; }
.lesetext p { margin: 0 0 12px; max-width: 78ch; }
.lesetext p:last-child { margin-bottom: 0; }

.tabelle {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  margin: 4px 0 16px; padding: 12px 14px;
  background: var(--grund); border-radius: var(--radius-klein);
  overflow-x: auto; white-space: pre; color: var(--text);
}

.seitenmarke {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--text-still);
  margin: 10px 0 12px;
}
.seitenmarke::after { content: ""; flex: 1; border-top: 1px dashed var(--linie-stark); }
.lesetext > .seitenmarke:first-child { margin-top: 0; }

.unterabschnitte { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.lese-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.link-meldung { font-size: 13px; color: var(--text-still); }


/* ===== Seite eines Verbandsdokuments ===================================== */

.seite-fund { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; margin-top: 16px; }
.seite-zahl { font-family: var(--schrift-titel); font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.seite-kapitel { font-size: 15.5px; color: var(--text); }
.seite-woerter { margin: 12px 0 0; font-size: 14px; color: var(--text-still); }
.seite-hinweis { margin: 14px 0 0; font-size: 14px; color: var(--text-still); }
.knopf-rechts { margin-left: auto; }
.tafel-fuss .knopf-mini.knopf-rechts { margin-left: 0; }


/* ===== Inhalt und Verzeichnis ============================================ */

.inhalt-liste { list-style: none; margin: 16px 0 0; padding: 0; columns: 2 340px; column-gap: 28px; }
.inhalt-liste li { break-inside: avoid; padding: 3px 0; font-size: 14.5px; }
.inhalt-liste a { text-decoration: none; }
.inhalt-liste a:hover { text-decoration: underline; }
.inhalt-liste .nr { display: inline-block; min-width: 4.2em; color: var(--text-still); font-variant-numeric: tabular-nums; }
.inhalt-liste .tief { padding-left: 1.2em; }

.verzeichnis-liste { display: flex; flex-direction: column; gap: 18px; }
.verz-gruppe h2 { font-size: 17px; margin-bottom: 4px; }
.verz-gruppe .verz-hinweis { margin: 0 0 10px; font-size: 13.5px; color: var(--text-still); }
.verz-zeilen { list-style: none; margin: 0; padding: 0; }
.verz-zeilen li + li { border-top: 1px solid var(--linie); }
.verz-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px;
  padding: 10px 2px; text-decoration: none; color: var(--text);
}
.verz-zeile:hover .verz-kurz { text-decoration: underline; }
.verz-kurz { font-weight: 700; color: var(--navy); }
.verz-titel { grid-column: 1; font-size: 13.5px; color: var(--text-still); }
.verz-zeile .art-marke { grid-row: 1 / span 2; grid-column: 2; align-self: center; }


/* ===== Fußzeile ========================================================== */

.fusszeile {
  margin: 0 var(--einzug);
  padding: 16px 0 32px;
  font-size: 13px; color: var(--text-still);
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 4px;
}
/* Link zur Überblicksseite, setzt nur das Bauskript der öffentlichen Fassung */
.fusszeile a { color: inherit; text-underline-offset: 2px; }
.fusszeile a:hover { color: var(--blau-text); }


/* ===== Hilfe am Suchfeld ================================================= */

.hilfe-knopf {
  flex: none; width: 46px; cursor: pointer;
  border-radius: var(--radius-klein); border: 1px solid var(--linie-stark);
  background: transparent; color: var(--navy);
  font-family: var(--schrift-titel); font-size: 18px; font-weight: 700;
}
.hilfe-knopf:hover { background: var(--grund); }
.hilfe-knopf[aria-expanded="true"] { background: var(--navy-zart); border-color: var(--blau); color: var(--blau-text); }
.hilfe-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.hilfe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
  padding-top: 14px; border-top: 1px solid var(--linie);
}
.hilfe h2 { font-size: 14.5px; margin-bottom: 6px; }
.hilfe ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.hilfe li { font-size: 13.5px; }
.hilfe code { font-family: var(--mono); font-size: 12.5px; }


/* ===== PIDs ============================================================== */

/* Karte im Blau der Fundstelle, in der Suche und unter #pid/<Nummer> */
.pid-karte { background: var(--navy-zart); border-color: var(--blau); }
.pid-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pid-marke {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blau-text);
}
.pid-nummer {
  font-family: var(--schrift-titel); font-size: 26px; font-weight: 700; line-height: 1.1;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.pid-nachricht { font-size: 14px; color: var(--text-still); }
.pid-fall { font-size: 18px; margin: 6px 0 4px; }
.pid-wege { margin: 0; font-size: 14.5px; }
.pid-bezug {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px; margin: 14px 0 0; font-size: 14.5px;
}
.pid-bezug dt { font-weight: 700; color: var(--navy); }
.pid-bezug dd { margin: 0; }
.pid-link { font-weight: 700; font-variant-numeric: tabular-nums; }
.pid-still { color: var(--text-still); }
.pid-hinweis { margin: 12px 0 0; font-size: 13.5px; color: var(--text-still); }
.pid-fuss {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie-stark);
}

.pid-filter { display: flex; flex-direction: column; gap: 12px; }
.pid-filter input {
  font-family: var(--schrift); font-size: 16px;
  padding: 10px 14px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: var(--weiss); color: var(--text);
}
.pid-filter input:focus-visible { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--navy-zart); }
.pid-filter-zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.pid-liste { display: flex; flex-direction: column; gap: 14px; }
.pid-zeile {
  display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto;
  gap: 2px 16px; align-items: baseline;
  padding: 10px 20px; text-decoration: none; color: var(--text);
}
.pid-zeile:hover { background: var(--grund); }
.pid-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.pid-nr { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pid-zeile-fall { font-size: 14.5px; }
/* balance steht vor white-space: Beide setzen text-wrap-mode, am breiten
   Fenster gilt nowrap, am Handy (white-space: normal) bricht balance aus. */
.pid-zeile-weg { font-size: 13.5px; color: var(--text-still); text-wrap: balance; white-space: nowrap; }


/* ===========================================================================
   DUNKELMODUS (wie im MSB-Quiz und im Fristenrechner)
   =========================================================================== */

@media screen {
  :root[data-thema="dunkel"] {
    color-scheme: dark;
    --weiss:        #161D27;
    --grund:        #1F2733;
    --text:         #E7EBF1;
    --text-still:   #A7B2C0;
    --linie:        #2C3644;
    --linie-stark:  #435064;
    --navy:         #A9C8F5;
    --navy-hell:    #8AB8FF;
    --navy-zart:    #1B2A44;
    --blau:            #4D94FF;
    --blau-text:       #8AB8FF;
    --blau-flae-hover: #2A77F0;
    --treffer:      #23406E;
    --schatten-karte: none;
  }
  :root[data-thema="dunkel"],
  :root[data-thema="dunkel"] body { background: #0F141B; }
  :root[data-thema="dunkel"] .ico-sonne { display: block; }
  :root[data-thema="dunkel"] .ico-mond  { display: none; }
}


/* ===== Schmale Fenster =================================================== */

@media (max-width: 860px) {
  :root { --rand: 16px; }
  .kopfleiste { gap: 12px; flex-wrap: wrap; }
  .marke-autor { display: none; }
}

@media (max-width: 620px) {
  /* Zeile 1: Logo, Name und Design-Knopf rechts. Zeile 2: die Reiter über
     die volle Breite, wie im Quiz. In einer Zeile (flex-wrap: nowrap) wurde
     die Seite bei 390 px 116 px breiter als das Fenster, der dritte Reiter
     und der Design-Knopf lagen draußen (Optik-Prüfung 19.10.2026). Das
     Umbrechen kommt aus der Regel für 860 px, die Reiter rücken mit order
     hinter den Design-Knopf. */
  .kopfleiste { gap: 6px 12px; }
  .reiter { order: 3; width: 100%; gap: 0; }
  .reiter-knopf { flex: 1; text-align: center; padding: 8px 8px; font-size: 14px; }
  .marke-strich { display: none; }
  .marke-text { font-size: 15.5px; }
  .held h1 { font-size: 24px; }
  .lese-kopf h1, .seiten-tafel h1, #ansicht-inhalt h1 { font-size: 20px; }
  .suchzeile { flex-direction: column; }
  .lesetext { padding: 18px 16px; }
  .quelle-kopf, .treffer-zeile, .treffer-mehr { padding-left: 16px; padding-right: 16px; }
  .quelle-kopf .anzahl { margin-left: 0; }
  .tafel { padding: 18px 16px; }
  /* Suchfeld allein in der ersten Zeile, Hilfe und Suchen darunter */
  .suchzeile { flex-direction: row; flex-wrap: wrap; }
  .suchzeile input { flex: 1 1 100%; }
  .suchzeile .knopf { flex: 1 1 auto; }
  .hilfe { grid-template-columns: 1fr; }
  .pid-zeile { grid-template-columns: 4.2em minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
  .pid-zeile-weg { grid-column: 2; white-space: normal; }
  .pid-bezug { grid-template-columns: 1fr; gap: 2px; }
  .pid-bezug dd { margin-bottom: 8px; }
}

/* Unter 360 px reicht die erste Zeile für Logo, Name und Design-Knopf nur
   noch mit engerem Abstand und kleinerem Namen, sonst rutscht der Knopf in
   eine eigene Zeile. Das Logo schrumpft in der Regel am Dateiende. */
@media (max-width: 359px) {
  .kopfleiste { column-gap: 6px; }
  .marke-text { font-size: 14px; }
}


/* ===== Bewegung: wer sie abbestellt hat, bekommt keine =================== */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


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

/* Gedruckt wird der gelesene Abschnitt, ohne Bedienelemente. */
@media print {
  .reiter, .kopf-einstellungen, .lese-leiste, .lese-fuss, .zurueck,
  #ansicht-suche, .tafel-fuss { display: none !important; }
  .kopfleiste { position: static; border-bottom: 1px solid #999; }
  html, body { background: #fff; }
  .tafel { border-color: #999; }
  .tabelle { white-space: pre-wrap; background: none; border: 1px solid #ccc; }
  mark { background: none; box-shadow: none; font-weight: 700; }
}

/* ==========================================================================
 * Zurück zur Startseite (nur öffentliche Fassung)
 * Das Bauskript setzt das Logo der Musterstadt Netze vor den Markenblock,
 * wie im MSB-Quiz. Die Regeln stehen hier, damit sie mit den anderen
 * gepflegt werden; lokal gibt es das Element nicht.
 * ========================================================================== */

.zur-startseite {
  display: flex; align-items: center; flex: none;
  padding: 3px 6px; margin-left: -6px; border-radius: 6px;
  color: var(--navy); text-decoration: none;
}
.zur-startseite:hover { background: var(--grund); }
.zur-startseite:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.zur-startseite svg { display: block; width: 127.5px; height: 30px; }

@media (max-width: 860px) {
  .zur-startseite svg { width: 110.5px; height: 26px; }
}
@media (max-width: 359px) {
  .zur-startseite svg { width: 93.5px; height: 22px; }
}
@media print { .zur-startseite { display: none !important; } }