/* ===== Übersicht der Fachbeiträge /wissen/ (Muster A von qm-praxiswerk.de, übernommen 14.10.2026): Kürzel .bl- =====
   Wird nur auf /wissen/ geladen (bau.py bindet quellen/wissen.css und wissen.js über SEITEN_DATEIEN ein).
   Oben die dunkle Fläche des Seitenkopfs mit Schnellsuche und Aufmacher, darunter die übrigen Grundlagen als
   Bildkarten, die ab 760 px in die Fläche ragen wie das Foto im Beitragskopf. Danach "Alle Fachbeiträge" als
   Verzeichnis: links der Kern des Titels, daneben die Erläuterung, rechts die Rubrik. Suche und Themenfilter stehen als
   schmale Leiste direkt über dem Verzeichnis; das Auswahlfeld öffnet sich erst auf Klick.
   Struktur von qm-praxiswerk.de, Werte von KI-Praxiswerk: Farb-Token aus kip.css, Radien 6px und 12px, Kurve --aus;
   die Fläche ist das dunkle Grau des Seitenkopfs (--ink), Petrol bleibt Akzent. Gedämpfte Schrift: #5B6170 wie in
   kip.css (Kontrast 6,1:1 auf Weiß). */

/* Was erst mit JavaScript erscheint, trägt hidden; das schlägt jede display-Regel dieser Seite */
.bl-kopf [hidden], .bl-grundlagen [hidden], .bl-alle [hidden] { display: none !important; }

/* ---------- Seitenkopf: geht ohne Kante in die Fläche der Grundlagen über (der Lichtschein endet vorher) ---------- */
.unterseite .bl-kopf { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.bl-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; margin-top: 2rem; }

/* Schnellsuche: sucht im Verzeichnis und springt dorthin */
.bl-schnell { display: flex; flex: 0 1 27rem; min-width: 0; gap: .5rem; }
.bl-schnell__feld { position: relative; flex: 1 1 auto; min-width: 0; }
.bl-lupe { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--stahl); pointer-events: none; }
.bl-schnell__eingabe { display: block; width: 100%; min-height: 2.75rem; margin: 0; padding: .5rem .9rem .5rem 2.75rem; border: 1px solid var(--weiss); border-radius: 6px; background: var(--weiss); color: var(--ink); font-family: inherit; font-size: 1rem; line-height: 1.4; -webkit-appearance: none; appearance: none; }
.bl-schnell__eingabe::placeholder { color: #5B6170; opacity: 1; }
.bl-schnell__eingabe::-webkit-search-decoration { -webkit-appearance: none; }
.bl-schnell__los { flex: none; min-height: 2.75rem; margin: 0; padding: .5rem 1.1rem; border: 1px solid var(--grau); border-radius: 6px; background: transparent; color: var(--weiss); font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .2s var(--aus), border-color .2s var(--aus); }
.bl-schnell__los:hover { border-color: var(--weiss); background: var(--petrol); }
.bl-schnell__pfeil { display: none; }

/* Sprung zum Verzeichnis */
.bl-sprung { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--weiss); font-weight: 500; text-decoration: none; }
.bl-sprung span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgba(255, 255, 255, .32); transition: text-decoration-color .25s var(--aus); }
.bl-sprung svg { flex: none; transition: transform .35s var(--aus); }
.bl-sprung:hover span { text-decoration-color: var(--weiss); }
.bl-sprung:hover svg { transform: translateY(3px); }

/* ---------- Überschriften der beiden Abschnitte ---------- */
.unterseite main .bl-h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.018em; color: var(--ink); }
.unterseite main .bl-buehne .bl-h2 { color: var(--weiss); padding-top: clamp(2.25rem, 4.5vw, 3.25rem); border-top: 1px solid rgba(255, 255, 255, .14); }

/* ---------- Fläche mit Aufmacher ---------- */
.bl-buehne { background: var(--ink); color: rgba(255, 255, 255, .82); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.bl-buehne :focus-visible { outline-color: var(--weiss); }
.bl-aufmacher { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.bl-aufmacher__bild { overflow: hidden; border-radius: 12px; background: var(--petrol-tief); }
.bl-aufmacher__bild img, .bl-karte__bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--aus); }
.bl-aufmacher:hover .bl-aufmacher__bild img { transform: scale(1.03); }
.bl-buehne .marke { color: var(--grau-lesen); }
.bl-buehne .marke::before { background: var(--grau); }
.unterseite main .bl-aufmacher__titel { margin-top: 1rem; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.18; letter-spacing: -.012em; font-weight: 400; color: var(--weiss); }
.bl-aufmacher__titel .bl-kern { display: block; }
.bl-aufmacher__titel .bl-erl { display: block; margin-top: .7rem; font-size: 1.15rem; line-height: 1.45; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, .88); }
.bl-aufmacher__anriss { max-width: 34rem; margin-top: 1.15rem; font-size: 1rem; line-height: 1.6; color: var(--grau-lesen); }
.bl-aufmacher__link { color: inherit; text-decoration: none; }
.bl-aufmacher__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.bl-aufmacher__link:focus-visible { outline: none; }
.bl-aufmacher__link:focus-visible::after { outline: 3px solid var(--weiss); outline-offset: 8px; }
.bl-aufmacher:hover .bl-kern { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- Die übrigen Grundlagen ---------- */
.bl-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.75rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2rem); padding-top: clamp(3.5rem, 7vw, 5rem); }
.bl-karte { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.bl-karte__bild { align-self: stretch; overflow: hidden; border-radius: 12px; background: var(--flaeche); }
.bl-karte:hover .bl-karte__bild img { transform: scale(1.03); }
.bl-karte__rubrik { margin-top: 1.3rem; }
.unterseite main .bl-karte__titel { margin-top: .65rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; font-weight: 500; color: var(--ink); }
.bl-karte__titel .bl-kern { display: block; }
.bl-karte__titel .bl-erl { display: block; margin-top: .45rem; font-size: 1rem; line-height: 1.55; font-weight: 400; color: var(--text); text-wrap: pretty; }
.bl-ganz { white-space: nowrap; }
.bl-karte__link { color: inherit; text-decoration: none; }
.bl-karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.bl-karte__link:focus-visible { outline: none; }
.bl-karte__link:focus-visible::after { outline: 3px solid var(--petrol); outline-offset: 8px; }
.bl-karte:hover .bl-kern { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---------- Alle Fachbeiträge ---------- */
.bl-alle { padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6.5rem); scroll-margin-top: 1rem; }
.bl-alle .bl-h2 { scroll-margin-top: 1rem; }

/* Filterleiste: Suche und Auswahlknopf in einer Zeile */
.bl-filter { margin-top: clamp(1.5rem, 3vw, 2rem); }
.bl-leiste { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.bl-suche { position: relative; flex: 1 1 18rem; max-width: 30rem; }
.bl-suche__eingabe { display: block; width: 100%; min-height: 3rem; margin: 0; padding: .65rem 1rem .65rem 2.75rem; border: 1px solid var(--stahl); border-radius: 6px; background: var(--weiss); color: var(--ink); font-family: inherit; font-size: 1rem; line-height: 1.4; -webkit-appearance: none; appearance: none; transition: border-color .2s var(--aus); }
.bl-suche__eingabe:hover { border-color: var(--ink); }
.bl-suche__eingabe:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-color: var(--petrol); }
.bl-suche__eingabe::placeholder { color: #5B6170; opacity: 1; }
.bl-suche__eingabe::-webkit-search-decoration { -webkit-appearance: none; }
.bl-wahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-wahl { position: relative; }
.bl-wahl__knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; margin: 0; padding: .5rem .9rem .5rem 1rem; border: 1px solid var(--stahl); border-radius: 6px; background: var(--weiss); color: var(--ink); font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .2s var(--aus), background-color .2s var(--aus); }
.bl-wahl__knopf:hover { border-color: var(--ink); background: var(--flaeche); }
.bl-wahl__knopf[aria-expanded="true"] { border-color: var(--petrol); background: var(--flaeche); }
.bl-wahl__knopf.bl-gewaehlt { border-color: var(--petrol); }
.bl-wahl__winkel { flex: none; color: var(--stahl); transition: transform .3s var(--aus); }
.bl-wahl__knopf[aria-expanded="true"] .bl-wahl__winkel { transform: rotate(180deg); }
.bl-wahl__anzahl { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .4rem; border-radius: 999px; background: var(--petrol); color: var(--weiss); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Auswahlfeld unter dem Knopf. Es trägt tabindex="-1": ein Klick auf Text, Zahl oder Innenfläche fokussiert das Feld
   selbst und nicht main, deshalb bleibt es offen */
.bl-wahl__feld { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 4; width: max-content; min-width: 17.5rem; max-width: min(24rem, calc(100vw - 2.5rem)); padding: .85rem .75rem .75rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--weiss); box-shadow: 0 1px 0 var(--linie), 0 30px 60px -40px rgba(14, 12, 25, .45); }
.bl-wahl__feld:focus { outline: none; }
.bl-wahl__feld.bl-rechts { left: auto; right: 0; }
.bl-offen-an { animation: bl-auf .18s var(--aus); }
@keyframes bl-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bl-wahl__gruppe { min-width: 0; margin: 0; padding: 0; border: 0; }
.bl-wahl__legende { padding: 0 .5rem .45rem; font-size: .875rem; font-weight: 500; line-height: 1.4; color: #5B6170; }
.bl-wahl__liste { display: grid; }
.bl-option { display: flex; align-items: center; gap: .7rem; min-height: 2.5rem; padding: .3rem .5rem; border-radius: 6px; color: var(--ink); font-size: .9375rem; line-height: 1.3; cursor: pointer; }
.bl-option:hover { background: var(--flaeche); }
.bl-option__feld { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--petrol); cursor: pointer; }
.bl-option__text { flex: 1 1 auto; }
.bl-option__zahl { padding-left: .75rem; font-size: .875rem; color: #5B6170; font-variant-numeric: tabular-nums; }
.bl-wahl__fertig { display: block; min-height: 2.5rem; margin: .55rem 0 0 auto; padding: .45rem 1rem; border: 0; border-radius: 6px; background: var(--petrol); color: var(--weiss); font-family: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background-color .2s var(--aus); }
.bl-wahl__fertig:hover { background: var(--petrol-tief); }

/* Gewählte Angaben als entfernbare Marken */
.bl-marken { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bl-weg { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.25rem; margin: 0; padding: .3rem .6rem .3rem .8rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--ink); font-family: inherit; font-size: .9375rem; line-height: 1.2; cursor: pointer; transition: border-color .2s var(--aus); }
.bl-weg:hover { border-color: var(--petrol); }
.bl-weg svg { flex: none; color: var(--petrol); }

/* Trefferzahl und Zurücksetzen über dem Verzeichnis; ohne JavaScript bleibt die Zeile leer und lässt keinen Abstand */
.bl-stand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; min-height: 2.75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.bl-stand:has(> .bl-stand__text:empty):has(> .bl-stand__zurueck[hidden]) { display: none; }
.bl-stand__text { font-size: 1rem; line-height: 1.5; color: var(--text); }
.bl-stand__text strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-stand__seite { color: #5B6170; }
.bl-stand__zurueck { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: .4rem 0; border: 0; background: none; color: var(--petrol); font-family: inherit; font-size: .95rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; }
.bl-stand__zurueck:hover { color: var(--ink); }

/* Verzeichnis wie bei qm-praxiswerk.de: kurzer Titel | kurze Erklärung | Rubrik (Einträge aus quellen/wissen_verzeichnis.json,
   damit jede Zeile dieselben drei Spalten füllt). */
.bl-verzeichnis { margin-top: .5rem; border-top: 1px solid var(--ink); }
/* Ohne JavaScript fehlen Filterleiste und Trefferzeile: Abstand zur Überschrift wie sonst über der Leiste */
.bl-alle .huelle:has(> .bl-filter[hidden]) > .bl-verzeichnis { margin-top: clamp(1.5rem, 3vw, 2rem); }
.bl-eintrag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: baseline; padding: 1.05rem 0 1.1rem; border-bottom: 1px solid var(--linie); }
.bl-eintrag__link { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: baseline; color: inherit; text-decoration: none; }
.bl-eintrag__link > .bl-kern:only-child { grid-column: 1 / -1; }
.bl-eintrag__link::after { content: ""; position: absolute; inset: 0; }
.bl-eintrag__link:focus-visible { outline: none; }
.bl-eintrag__link:focus-visible::after { outline: 3px solid var(--petrol); outline-offset: 2px; }
.bl-eintrag .bl-kern { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--ink); text-wrap: pretty; transition: color .2s var(--aus); }
.bl-eintrag .bl-erl { font-size: 1rem; line-height: 1.5; color: #5B6170; text-wrap: pretty; }
.bl-eintrag__rubrik { font-size: .875rem; line-height: 1.4; color: var(--stahl); -webkit-hyphens: auto; hyphens: auto; }
.bl-eintrag:hover .bl-kern { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bl-leer { max-width: 40rem; padding-top: 1.75rem; font-size: 1.0625rem; color: var(--ink); }

/* Seiten des Verzeichnisses (gleiche Adresse, Seite im Fragment) */
.bl-seiten { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 2.25rem; }
.bl-seiten__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-seiten__nr { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); color: var(--ink); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; transition: border-color .2s var(--aus); }
.bl-seiten__nr:hover { border-color: var(--petrol); }
.bl-seiten__nr[aria-current="page"] { border-color: var(--petrol); background: var(--petrol); color: var(--weiss); cursor: default; }
.bl-seiten__schritt { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .4rem .25rem; color: var(--petrol); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.bl-seiten__schritt:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.bl-seiten__schritt:not([href]) { color: #5B6170; cursor: default; }
.bl-seiten__schritt:not([href]):hover span { text-decoration: none; }

/* ---------- Breiten ---------- */
@media (max-width: 999px) {
  .bl-aufmacher { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; }
  .bl-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-eintrag { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; }
  .bl-eintrag__rubrik { order: -1; }
  .bl-eintrag__link { display: block; }
  .bl-eintrag .bl-kern, .bl-eintrag .bl-erl { display: block; }
  .bl-eintrag .bl-erl { margin-top: .2rem; }
}
@media (max-width: 759px) {
  .bl-schnell { flex-basis: 100%; }
  /* Schmal: Pfeil statt Wort, damit der Platzhalter ganz ins Feld passt; der Name des Knopfes bleibt "Suchen" */
  .bl-schnell__los { display: inline-grid; place-items: center; width: 2.75rem; padding: 0; }
  .bl-schnell__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .bl-schnell__pfeil { display: block; }
  .bl-aufmacher { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .bl-aufmacher__anriss { max-width: 40rem; }
  .bl-suche { flex-basis: 100%; max-width: none; }
  .bl-wahlen { flex: 1 1 100%; }
  .bl-wahl { flex: 1 1 auto; }
  .bl-wahl__knopf { position: relative; width: 100%; justify-content: flex-start; padding-left: .85rem; padding-right: .75rem; }
  .bl-wahl__winkel { margin-left: auto; }
  /* Zahl der gewählten Angaben an der Ecke, damit der Knopf seine Breite behält */
  .bl-wahl__anzahl { position: absolute; top: -.6rem; right: -.45rem; box-shadow: 0 0 0 2px var(--weiss); }
  /* Auswahlfeld spannt die ganze Leiste, statt am Knopf zu hängen */
  .bl-wahl { position: static; }
  .bl-wahl__feld, .bl-wahl__feld.bl-rechts { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  /* Grundlagen als kompakte Zeilen: kleines Bild links, Titel rechts */
  .bl-karten { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: clamp(2.5rem, 7vw, 3.5rem); }
  .bl-karte { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--linie); }
  .bl-karte:first-child { border-top: 1px solid var(--linie); }
  .bl-karte__bild { grid-column: 1; grid-row: 1 / span 2; align-self: start; border-radius: 6px; }
  .bl-karte__rubrik { grid-column: 2; margin-top: 0; }
  .unterseite main .bl-karte__titel { grid-column: 2; margin-top: .4rem; font-size: 1.0625rem; line-height: 1.35; }
  .bl-karte__titel .bl-erl { margin-top: .25rem; font-size: .9375rem; line-height: 1.5; }
  .bl-karte__link::after { border-radius: 0; }
  .bl-karte__link:focus-visible::after { outline-offset: 2px; }
  .bl-aufmacher__link:focus-visible::after { outline-offset: 4px; }
}

/* Steht die letzte Grundlagen-Karte allein in ihrer Reihe, liegt sie quer über die ganze Breite: Bild in Spaltenbreite
   links, Rubrik und Titel daneben. Hängt nicht an der Kartenzahl (zwei Spalten bis 999 px, drei ab 1000 px). */
@media (min-width: 760px) and (max-width: 999px) {
  .bl-karte:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(1.5rem, 2.5vw, 2rem); }
  .bl-karte:last-child:nth-child(odd) > .bl-karte__bild { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .bl-karte:last-child:nth-child(odd) > :not(.bl-karte__bild) { grid-column: 2 / -1; }
  .bl-karte:last-child:nth-child(odd) > .bl-karte__rubrik { margin-top: 0; }
}
@media (min-width: 1000px) {
  .bl-karte:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(1.5rem, 2.5vw, 2rem); }
  .bl-karte:last-child:nth-child(3n+1) > .bl-karte__bild { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .bl-karte:last-child:nth-child(3n+1) > :not(.bl-karte__bild) { grid-column: 2 / -1; }
  .bl-karte:last-child:nth-child(3n+1) > .bl-karte__rubrik { margin-top: 0; }
}

/* Anbindung wie bei qm-praxiswerk.de: Ab 760 px ragt die erste Kartenreihe in die dunkle Fläche, wie das Foto im
   Beitragskopf (.artikel-bild in komponenten.css, gleicher Versatz). So lesen sich Aufmacher und Karten als eine
   Sammlung unter "Grundlagen". Schmal bleibt es bei Zeilen mit kleinem Bild. */
@media (min-width: 760px) {
  .bl-buehne { padding-bottom: calc(clamp(3.5rem, 7vw, 5rem) + clamp(4.5rem, 9vw, 8rem)); }
  .bl-karten { position: relative; padding-top: 0; margin-top: clamp(-8rem, -9vw, -4.5rem); }
}

/* Seiten des Verzeichnisses schmal: Zurück und Weiter nur als Pfeil (der Name bleibt "Zurück" und "Weiter"), damit die
   Navigation eine Zeile bleibt. Bei mehr Seiten, als in die Zeile passen, brechen nur die Seitenzahlen um. */
@media (max-width: 599px) {
  .bl-seiten { display: grid; grid-template-columns: auto minmax(0, max-content) auto; justify-content: start; align-items: start; column-gap: .25rem; }
  .bl-seiten__schritt { justify-content: center; min-width: 2.75rem; padding: 0; }
  .bl-seiten__schritt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .bl-seiten__nr { min-width: 2.5rem; padding: 0 .4rem; }
}

/* Schmal (bis 374 px, auch 320 px und 400 % Zoom): Lupe im Kopffeld entfällt, der Pfeil daneben zeigt die Suche an;
   so bleibt der Platzhalter ganz lesbar. Die Schrift im Feld bleibt 16 px, sonst vergrößert iOS beim Antippen. */
@media (max-width: 374px) {
  .bl-schnell .bl-lupe { display: none; }
  .bl-schnell__eingabe { padding-left: .85rem; padding-right: .6rem; }
  .bl-schnell__eingabe::placeholder { font-size: .9375rem; }
}

/* Erzwungene Farben (Kontrastmodus): Die Petrolfläche der aktuellen Seite entfällt dort; ein kräftiger Rahmen und
   fette Ziffer zeigen sie weiter an */
@media (forced-colors: active) {
  .bl-seiten__nr[aria-current="page"] { border-width: 3px; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-aufmacher__bild img, .bl-karte__bild img, .bl-sprung svg, .bl-wahl__winkel { transition: none; }
  .bl-aufmacher:hover .bl-aufmacher__bild img, .bl-karte:hover .bl-karte__bild img { transform: none; }
  .bl-offen-an { animation: none; }
}
@media print {
  .bl-filter, .bl-stand, .bl-seiten, .bl-wege { display: none !important; }
  .bl-buehne { background: none !important; color: #000 !important; }
  .unterseite main .bl-buehne .bl-h2, .unterseite main .bl-aufmacher__titel { color: #000 !important; }
  /* Teile mit eigener heller Farbe (Erläuterung, Anriss, Rubrik) erben das Schwarz nicht */
  .bl-aufmacher__titel .bl-erl, .bl-aufmacher__anriss, .bl-buehne .marke { color: #000 !important; }
  .bl-buehne .marke::before { background: #000 !important; }
}