/*
 * Stadtplan-Schwerin.de / Stadtplan-Rostock.com - Rahmen der MV-Familie.
 *
 * Vorlagen: gastro-mv.de (Variablen, Schriften, Dunkelmodus) und stadtplan-mv.de (Kopf, Fuss).
 * Gestaltungsvertrag: DESIGN.md im Wurzelverzeichnis des Repos.
 *
 * Wird NACH style.css geladen und ueberschreibt Grundschrift und Farben seitenweit. Die
 * Innenteile der Seiten stehen vorerst weiter in style.css und ziehen nach und nach hierher
 * um. Kein Build-Schritt: diese Datei geht so, wie sie ist, auf den Server.
 *
 * Alle Farben nur als Variablen; der Dunkelmodus ueberschreibt dieselben Namen.
 */

/* ---------- Schriften (eigener Server, kein Google Fonts) ---------- */

/* Atkinson schreibt die Null mit Strich - bei Hausnummern, Postleitzahlen und Uhrzeiten
   unruhig. Ziffern deshalb aus Bricolage Grotesque, gleiche Datei wie die Ueberschriften. */
@font-face {
    font-family: 'SMV Ziffern';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Bricolage Grotesque Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Bricolage Grotesque Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Variablen ---------- */

:root {
    /* MV-Landesfarben (aus dem Landeslogo abgelesen; das Logo selbst wird nicht verwendet) */
    --mv-meer: #00639e;
    --mv-himmel: #17aadb;
    --mv-raps: #f2b700;
    --mv-wiese: #319f41;

    --grund: #faf8f4;
    --flaeche: #ffffff;
    --flaeche-2: #f2eee6;
    --linie: #e2dcd1;
    --text: #16232a;
    --text-2: #4d5c63;
    --marke: var(--mv-meer);
    --marke-zart: #e1eef6;
    --akzent: #b4501c;
    --akzent-hover: #9a4215;
    --auf-akzent: #ffffff;
    --akzent-zart: #fbeadd;
    --offen: #25703f;
    --offen-zart: #e1f0e6;
    --zu: #a3392a;
    --zu-zart: #f8e4e0;
    --band: #0b4a73;
    --fuss: #0d2a3d;
    --auf-band: #f2f7fa;
    --auf-band-2: #b7cfdf;
    --band-akzent: #f3a06e;
    --schatten: 0 1px 2px rgb(22 35 42 / 0.06), 0 6px 20px rgb(22 35 42 / 0.07);
    --buehne: #e3f0f7;

    --radius-s: 10px;
    --radius: 14px;
    --radius-l: 18px;
    --breite: 1248px;
    --rand: 20px;
    --kopf-hoehe: 64px;

    --schrift: 'SMV Ziffern', 'Atkinson Hyperlegible Next Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --schrift-titel: 'Bricolage Grotesque Variable', 'Atkinson Hyperlegible Next Variable', system-ui, sans-serif;

    color-scheme: light;
}

/* Dunkelmodus: folgt dem System, ohne Umschalter (Spec 2026-10-26). */
@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0e161b; --flaeche: #152028; --flaeche-2: #1c2a33; --linie: #2a3a44;
        --text: #ece9e2; --text-2: #a8b4b9; --marke: #7fc3e6; --marke-zart: #15324a;
        --akzent: #f0894a; --akzent-hover: #f5a06b; --auf-akzent: #1c0f07; --akzent-zart: #3a2519;
        --offen: #72c691; --offen-zart: #173021; --zu: #f08c7c; --zu-zart: #3a1e1a;
        --band: #0f3550; --fuss: #081620; --auf-band: #ecf3f7; --auf-band-2: #a5c1d3;
        --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25); --buehne: #10283a;
        color-scheme: dark;
    }
}

/* ---------- Grundlagen (ueberschreiben style.css) ---------- */

body {
    font-family: var(--schrift);
    background: var(--grund);
    color: var(--text);
    font-size: 17px;
    line-height: 1.55;
    /* Lange Adressen (Datenschutz, Quellen) brechen um, statt die Seite auf dem Handy
       waagerecht scrollbar zu machen - bei 17px reichte die Breite dafuer nicht mehr. */
    overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--schrift-titel); }
/* Im Dunkelmodus erben Ueberschriften und Links ohne eigene Regel sonst die style.css-Farben
   (#1a3a6b / #2c5aa0) - auf dunklem Grund unlesbar. Nur hier, nicht im Hellmodus: dort sind
   #1a3a6b und --text verschiedene Farben, und das helle Bild soll bleiben, wie es ist.
   Element-Selektoren: Klassenregeln aus style.css und mv.css gehen weiter vor. */
@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6 { color: var(--text); }
    a, a:hover { color: var(--marke); }
}
::selection { background: color-mix(in srgb, var(--mv-himmel) 35%, transparent); color: var(--text); }

/* Sprunglink: style.css schiebt ihn um feste 40px nach oben. Mit der groesseren Zeilenhoehe
   hier ragte er dann unten heraus - deshalb seitlich aus dem Bild statt nach oben. */
.skip-link { top: 1rem; left: -999rem; border-radius: var(--radius-s); background: var(--marke); color: var(--flaeche); }
.skip-link:focus { top: 1rem; left: 1rem; }

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.symbol { width: var(--groesse, 1.3em); height: var(--groesse, 1.3em); fill: currentColor; flex: none; display: block; }

/* Horizont: Himmel, Meer, Wiese, Raps - das Erkennungszeichen aus den MV-Farben */
.horizont {
    height: 4px;
    background: linear-gradient(90deg,
        var(--mv-himmel) 0 34%, var(--mv-meer) 34% 68%, var(--mv-wiese) 68% 88%, var(--mv-raps) 88% 100%);
}

/* ---------- Kopf ---------- */

.mv-kopf { position: relative; z-index: 30; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.mv-kopf-innen { display: flex; align-items: center; gap: 28px; min-height: var(--kopf-hoehe); }

.wortmarke { display: flex; align-items: center; gap: 9px; flex: none; color: var(--text); text-decoration: none; }
.wortmarke:hover { color: var(--text); text-decoration: none; }
.wortmarke-zeichen { width: 26px; height: 32px; flex: none; display: block; }
.wortmarke-text, .mv-fuss-marke {
    font-family: var(--schrift-titel); font-weight: 750; font-size: 22px; letter-spacing: -0.025em; line-height: 1; white-space: nowrap;
}
.wortmarke-text b, .mv-fuss-marke b { color: var(--marke); font-weight: 800; }

.mv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.mv-nav a {
    display: flex; align-items: center; min-height: var(--kopf-hoehe); padding: 0 11px; white-space: nowrap;
    color: var(--text-2); font-weight: 700; font-size: 16px; text-decoration: none;
}
.mv-nav a:hover { color: var(--text); text-decoration: none; }
.mv-nav a[aria-current='page'] { color: var(--text); box-shadow: inset 0 -3px 0 var(--marke); }

.mv-suche { position: relative; margin-left: auto; flex: 1 1 200px; max-width: 320px; min-width: 0; }
.mv-suchformular {
    display: flex; align-items: center; height: 44px; padding: 0 4px 0 14px;
    border: 1.5px solid var(--linie); border-radius: 12px; background: var(--grund);
}
.mv-suchformular:focus-within { border-color: var(--marke); }
.mv-suchfeld {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0;
    font: inherit; font-size: 15px; color: var(--text);
}
.mv-suchfeld::placeholder { color: var(--text-2); opacity: 1; }
/* Der Rahmen um das Formular zeigt den Fokus schon an; der Umriss von style.css kaeme doppelt. */
.mv-suchfeld:focus, .mv-suchfeld:focus-visible { outline: none; }
.mv-suchknopf {
    display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text-2); cursor: pointer;
}
.mv-suchknopf:hover { background: var(--flaeche-2); color: var(--text); }
.mv-suchknopf .symbol { --groesse: 22px; }

/* Trefferliste der Live-Suche (map.js); Ein- und Ausblenden bleibt bei style.css/map.js. */
.mv-suche .search-results {
    top: calc(100% + 6px); background: var(--flaeche); color: var(--text);
    border: 1px solid var(--linie); border-radius: var(--radius-s); box-shadow: var(--schatten);
}
.mv-suche .search-results a { color: var(--marke); }

.mv-menueknopf {
    display: none; place-items: center; width: 48px; height: 48px; margin-left: auto; margin-right: -8px;
    border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer;
}
.mv-menueknopf:hover { background: var(--flaeche-2); }
.mv-menueknopf .symbol { --groesse: 28px; }

/* Eingeklapptes Menue bis einschliesslich 1180px (Ruling 9, Gesamtpruefung Task 7): darueber
   passen Wortmarke, sechs Menuepunkte und ein benutzbares Suchfeld in eine Zeile, darunter
   lief der Kopf ueber (bei 820px Seite 980px breit, Suchfeld 0px). Zeile 1 Wortmarke, Suche
   und Menueknopf, darunter das Menue. Auf- und Zuklappen schaltet public/js/map.js ueber
   die Klasse "active" am Menue. Eingeklappt wird NUR unter html.js (Inline-Skript im head
   von layouts/app.blade.php): ohne JavaScript koennte niemand das Menue oeffnen, dann
   steht es als umbrechende Linkzeile offen da und der Menueknopf bleibt verborgen. */
@media (max-width: 1180px) {
    .mv-kopf-innen { flex-wrap: wrap; gap: 10px 12px; padding-block: 8px 12px; }
    .mv-suche { min-width: 160px; }
    .mv-nav { order: 4; flex: 1 1 100%; }
    .mv-nav ul { flex-wrap: wrap; gap: 0 18px; }
    .mv-nav a { min-height: 44px; padding: 0; }

    html.js .mv-menueknopf { display: grid; flex: none; margin-left: 0; }
    html.js .mv-nav:not(.active) { display: none; }
    html.js .mv-nav ul { flex-direction: column; gap: 0; }
    html.js .mv-nav a { min-height: 52px; border-top: 1px solid var(--linie); color: var(--text); font-size: 18px; }
    html.js .mv-nav a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--marke); padding-left: 12px; }
}

/* Handy: schmalerer Seitenrand, Zeile 1 Wortmarke und Menueknopf, Zeile 2 die Suche ueber
   die ganze Breite. Steht NACH dem Kopf-Block und ueberschreibt ihn. */
@media (max-width: 819px) {
    :root { --rand: 16px; }
    .wortmarke { flex: 1 1 0; min-width: 0; }
    .wortmarke-text { font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
    .mv-suche { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
}

/* ---------- Fuss ---------- */

.mv-fuss { margin-top: 56px; background: var(--fuss); color: var(--auf-band); }
.mv-fuss a { color: var(--auf-band); text-decoration: none; }
.mv-fuss a:hover { color: var(--auf-band); text-decoration: underline; }
.mv-fuss-raster {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 40px; padding-block: 44px 28px;
}
@media (min-width: 1100px) {
    .mv-fuss-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 300px; }
    .mv-fuss-raster:not(:has(.mv-fuss-werbung)) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.mv-fuss h2 {
    margin: 0 0 8px; color: var(--auf-band-2); font-family: var(--schrift); font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.mv-fuss .mv-fuss-marke { margin-bottom: 12px; color: var(--auf-band); font-family: var(--schrift-titel); font-size: 21px; letter-spacing: -0.025em; text-transform: none; }
.mv-fuss .mv-fuss-marke b { color: var(--band-akzent); }
.mv-fuss-intro p { margin: 0; color: var(--auf-band-2); font-size: 15px; }
.mv-fuss ul { list-style: none; margin: 0; padding: 0; }
.mv-fuss li a { display: inline-block; padding: 6px 0; }
.mv-fuss-werbung { display: flex; flex-direction: column; gap: 6px; }
.mv-fuss-werbung iframe { display: block; max-width: 100%; border-radius: var(--radius-s); background: rgb(255 255 255 / 0.05); }
.mv-fuss .anzeige-hinweis { color: var(--auf-band-2); }

.mv-fuss-zeile { border-top: 1px solid rgb(255 255 255 / 0.12); }
.mv-fuss-zeile .huelle { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; padding-block: 14px 22px; color: var(--auf-band-2); font-size: 14px; }
.mv-fuss-zeile nav { display: flex; gap: 4px 20px; }
.mv-fuss-zeile nav a { color: var(--auf-band-2); padding: 8px 0; display: inline-block; }
.mv-fuss-zeile p { margin: 0; }
.mv-fuss-zeile p a { color: var(--auf-band-2); text-decoration: underline; }

/* ---------- Bausteine ---------- */

.brotkrumen { margin: 18px 0 14px; color: var(--text-2); font-size: 14px; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.brotkrumen li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--linie); }
.brotkrumen a { color: var(--text-2); }

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

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
    border-radius: 12px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf:hover { border-color: var(--marke); color: var(--text); text-decoration: none; }
.knopf--akzent { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf--akzent:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--auf-akzent); }

/* "Anzeige" ueber dem Werbebanner im Fuss - Regel aus DESIGN.md (Shopenia kennzeichnet selbst). */
.anzeige-hinweis { color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* ---------- Straßenseite (strassen/show.blade.php und strassen/partials/) ---------- */

/* Die Rubrikfarben kommen als --rubrik-farbe aus dem Stadtprofil und sind fuer hellen Grund
   gewaehlt. Im Dunkelmodus werden sie deshalb nur fuer Punkte und Randstriche benutzt, nie
   fuer Text. */

.titelkasten { margin-bottom: 18px; }
.titelkasten h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }

.titel-angaben { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 12px 0 0; }
.titel-angaben dt {
    color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.titel-angaben dd { margin: 0; font-weight: 700; }
.titel-angaben dd small { display: block; color: var(--text-2); font-weight: 400; font-size: 14px; }
.titel-angaben a { color: var(--marke); }

/* Ohne JavaScript schalten Schaltflaechen und Haken nichts um (rubriken.js) - die Leiste
   waere dann Bedienung ohne Wirkung. Die Kaesten stehen ohnehin alle sichtbar darunter.
   html.js setzt das Inline-Skript im head vor dem ersten Zeichnen. */
html:not(.js) .rubrikleiste { display: none; }

.rubrikleiste {
    display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
}
.rubrikleiste-titel { color: var(--text-2); font-size: 14px; }
.rubrikleiste-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.rubrik-chip, .rubrik-menue summary {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text);
    font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer;
}
.rubrik-chip[aria-pressed='true'] { background: var(--marke-zart); border-color: var(--marke); font-weight: 700; }
.rubrik-chip:hover, .rubrik-menue summary:hover { border-color: var(--marke); }
.rubrik-anzahl { color: var(--text-2); font-weight: 400; }
.rubrik-punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--rubrik-farbe, var(--text-2)); }

.rubrik-menue { position: relative; }
.rubrik-menue summary { list-style: none; border-style: dashed; }
.rubrik-menue summary::-webkit-details-marker { display: none; }
.rubrik-menue summary::after { content: '▾'; color: var(--text-2); }
.rubrik-menue[open] summary { border-color: var(--marke); }
.rubrik-menue-liste {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 260px; padding: 6px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); box-shadow: var(--schatten);
}
.rubrik-menue-titel {
    margin: 6px 8px 2px; color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.rubrik-zeile { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 8px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.rubrik-zeile:hover { background: var(--flaeche-2); }
.rubrik-zeile input { width: 18px; height: 18px; margin: 0; accent-color: var(--marke); }
.rubrik-zeile .rubrik-anzahl { margin-left: auto; }
.rubrik-zeile.ist-leer { color: var(--text-2); cursor: default; }
.rubrik-zeile.ist-leer:hover { background: none; }
.rubrik-menue [data-rubrik-alle] {
    width: 100%; min-height: 40px; margin-top: 4px; padding: 0 8px; border: 0; border-top: 1px solid var(--linie);
    background: none; color: var(--marke); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}

.baustellen-warnung {
    margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--linie); border-left: 4px solid var(--mv-raps);
    border-radius: var(--radius-s); background: var(--flaeche);
}
.baustellen-warnung p, .baustellen-warnung ul { margin: 0; }
.baustellen-warnung p + p, .baustellen-warnung ul + p { margin-top: 6px; }
.baustellen-warnung a { color: var(--marke); }

/* Atlas: Karte links, Spalte rechts. Die Karte streckt sich auf die Hoehe der rechten
   Spalte, mindestens aber clamp(480px, 40vw, 560px) - so hoch wie die Ortsseite von
   stadtplan-mv.de. #map liegt absolut im Container, damit Leaflet immer eine feste Groesse
   misst, auch wenn die Hoehe nur aus dem Raster kommt. */
.atlas { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.atlas--ohne-karte { grid-template-columns: minmax(0, 1fr); }
.atlas-titel { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.atlas-karte { align-self: stretch; display: flex; flex-direction: column; }
.atlas .map-container {
    flex: 1; height: auto; min-height: clamp(480px, 40vw, 560px);
    /* Eigener Stapelkontext: Leaflets Ebenen (z-index 400 bis 1000) bleiben in der Karte und
       legen sich nicht ueber das aufgeklappte Rubrik-Menue. */
    isolation: isolate;
    border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: none; background: var(--flaeche-2);
}
.atlas #map { position: absolute; inset: 0; width: auto; height: auto; }

.atlas-seite { display: flex; flex-direction: column; gap: 14px; }
.atlas-fakten { margin: 0; padding: 14px 18px; }
.atlas-fakten > div { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.atlas-fakten dt { color: var(--text-2); }
.atlas-fakten dd { margin: 0; text-align: right; }
.atlas-fakten a { color: var(--marke); font-weight: 700; }
.atlas-route { width: 100%; }

.atlas .map-external-links { margin: 0; padding: 0; background: none; border-radius: 0; text-align: left; }
.atlas .map-links-intro { margin: 0 0 8px; color: var(--text-2); font-size: 14px; }
.atlas .map-links-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.atlas .btn-map-link {
    justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--radius-s);
    background: var(--flaeche); color: var(--text); font-size: 15px;
}
.atlas .btn-map-link:hover { border-color: var(--marke); background: var(--flaeche); color: var(--text); }
.atlas-anzeige:empty { display: none; }

/* Shopenia-Karten: Platz reservieren, damit die Seite beim Nachladen nicht springt.
   Shopenias cards.css: .sc-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 14px }, Bild aspect-ratio 1 bis max. 260px. Die Spaltenzahl haengt also an der
   BREITE DES BLOCKS, nicht am Bildschirm: 2 Spalten ab 374px, 3 ab 568px, 4 ab 762px.
   Deshalb Container-Abfragen - die rechte Atlas-Spalte ist zwischen 760 und 1100px
   Bildschirmbreite schmaler (257-373px, einspaltig) als die Reihe auf dem Handy.

   Gemessen (Gesamtpruefung Task 7, 2026-10-26, "Stadtplan Schwerin", Blockbreite ->
   Endhoehe), Reservierung jeweils aufgerundet:
     seite (2 Karten): einspaltig 257px 892,5 / 291px+ 941,7 -> 950;
       zweispaltig 380px 413,6 / 399px 422,8 / 417px 432,1 / 441px 426,9 -> 440;
       493px 453,0 / 553px 464,0 / ab 593px 476,5 -> 480.
     reihe (4 Karten + Link): einspaltig 343px 1884,4 / 313px 1903,4 -> 1910;
       2 Spalten 383px 832,9 / 433px 866,0 -> 870; 493px 926,0 / 553px 967,0 -> 970;
       3 Spalten 593px 840,5 / 712px 903,0 / 753px 930,4 -> 940;
       4 Spalten in einer Zeile 763px 442,0 / 905px 460,6 / 945px 470,6 -> 480;
       985px 480,6 / 1145px 520,6 / 1208px 526,9 -> 530.
   Die Werte ausserhalb der Abfragen gelten nur, wo kein Container drumherum steht. */
.produkte { width: 100%; }
.produkte--seite { min-height: 440px; }
.produkte--reihe { min-height: 530px; }
.atlas-anzeige, .produktreihe { container: produkte / inline-size; }
@container produkte (width < 374px) {
    .produkte--seite { min-height: 950px; }
    .produkte--reihe { min-height: 1910px; }
}
@container produkte (374px <= width < 460px) {
    .produkte--seite { min-height: 440px; }
}
@container produkte (width >= 460px) {
    .produkte--seite { min-height: 480px; }
}
@container produkte (374px <= width < 480px) {
    .produkte--reihe { min-height: 870px; }
}
@container produkte (480px <= width < 568px) {
    .produkte--reihe { min-height: 970px; }
}
@container produkte (568px <= width < 762px) {
    .produkte--reihe { min-height: 940px; }
}
@container produkte (762px <= width < 1000px) {
    .produkte--reihe { min-height: 480px; }
}
@container produkte (width >= 1000px) {
    .produkte--reihe { min-height: 530px; }
}
.produkte-platzhalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; height: 100%; }
.produkte-platzhalter > div {
    display: grid; place-items: center; min-height: 200px; padding: 12px; text-align: center;
    border: 1px dashed var(--linie); border-radius: var(--radius-s); background: var(--flaeche-2); color: var(--text-2); font-size: 14px;
}
.produktreihe { margin-top: 28px; }
.produktreihe h2 { margin: 0 0 4px; }

.rubrik-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; }
.rubrik-kasten {
    padding: 16px 18px 10px; background: var(--flaeche); border: 1px solid var(--linie);
    border-top: 4px solid var(--rubrik-farbe, var(--linie)); border-radius: var(--radius);
}
.rubrik-kasten h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 20px; line-height: 1.25; color: var(--text); }
.rubrik-zeichen {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
    background: var(--rubrik-farbe, var(--text-2)); color: #ffffff;
}
.rubrik-zeichen .symbol { --groesse: 20px; }
.rubrik-liste { list-style: none; margin: 0; padding: 0; }
.rubrik-eintrag { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); }
.rubrik-liste:first-of-type .rubrik-eintrag:first-child { border-top: 0; }
.rubrik-eintrag-text { min-width: 0; }
.rubrik-eintrag-text a { color: var(--marke); font-weight: 700; }
.rubrik-eintrag-name { font-weight: 700; }
.rubrik-eintrag-text small { display: block; color: var(--text-2); font-size: 14px; }
.rubrik-lage { margin-left: auto; padding-left: 8px; color: var(--text-2); font-size: 14px; white-space: nowrap; }
.rubrik-mehr summary { padding: 8px 0; color: var(--marke); font-weight: 700; cursor: pointer; border-top: 1px solid var(--linie); }
.rubrik-mehr[open] summary { border-bottom: 0; }
/* "Alle in Schwerin auf gastro-mv.de": Abschluss des Kastens, im Stil von "+ 3 weitere". */
.rubrik-alle { margin: 0; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.rubrik-alle a { color: var(--marke); font-weight: 700; }

.rubrik-quellen { margin-top: 12px; color: var(--text-2); font-size: 14px; }
.rubrik-quellen .datenquelle { margin: 0 0 4px; }
.rubrik-quellen summary { display: inline-block; padding: 4px 0; color: var(--text-2); font-weight: 600; cursor: pointer; }
.rubrik-quellen summary:hover { color: var(--marke); }
.rubrik-quellen[open] summary { margin-bottom: 6px; }

.strassen-text, .strassen-liste { margin-top: 36px; }
.strassen-liste h2 { margin: 0 0 12px; }
.strassen-links { display: flex; flex-wrap: wrap; gap: 8px; }
.strassen-links a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
    border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--flaeche); color: var(--text); text-decoration: none;
}
.strassen-links a:hover { border-color: var(--marke); color: var(--text); text-decoration: none; }
.strassen-links .symbol { --groesse: 18px; color: var(--marke); }

/* Handy: "In der Naehe:" und das Menue in der ersten Zeile, darunter die Schaltflaechen
   als eine waagerecht wischbare Reihe ohne Umbruch. Das Menue steht ausserhalb des
   Wischbereichs, sonst schnitte overflow-x seine Ausklappliste ab. Atlas und rechte Spalte
   loesen sich auf (display: contents), damit alles eine Spalte im .atlas-bereich bildet und
   der Anzeigenplatz per order hinter die Rubrik-Kaesten rutscht. */
@media (max-width: 759px) {
    .rubrikleiste-titel { flex: none; }
    .rubrik-menue { flex: none; margin-left: auto; }
    .rubrikleiste-chips {
        order: 3; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-block: -4px; padding-block: 4px;
    }
    .rubrikleiste-chips::-webkit-scrollbar { display: none; }
    .rubrik-menue-liste { left: auto; right: 0; }

    .atlas-bereich { display: flex; flex-direction: column; gap: 14px; }
    .atlas, .atlas-seite { display: contents; }
    .atlas .map-container { flex: none; height: 56vh; min-height: 300px; }
    .atlas-anzeige { order: 1; }
    .rubrik-raster { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
}

@media print {
    .horizont, .mv-kopf, .mv-fuss { display: none !important; }
    .rubrikleiste, .atlas-anzeige, .produktreihe { display: none !important; }
}

/* Rubrikpunkte auf der Karte (public/js/rubriken.js): L.divIcon, Farbe sitzt am inneren Span. */
.rubrik-punkt-karte { background: none; }
.rubrik-punkt-karte .rubrik-punkt-innen {
    display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%;
    background: var(--text-2); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.rubrik-kasten[hidden] { display: none; }

/* ---------- Faltplan (components/faltplan.blade.php, Plan 3) ---------- */

/* Die Farben als eigene Variablen am Plan: tests/Unit/FaltplanTest rechnet die Kontraste
   der Beschriftungen in beiden Modi nach (>= 4,5:1). Hell laut Spec Plan 3. */
.faltplan {
    --fp-papier: #fbf8f1; --fp-innen: #f6f2e8; --fp-teil: #ebe5d8; --fp-teil-hover: #d9cdb3;
    --fp-wasser: #9fcbe6; --fp-rahmen: #3d4d55; --fp-akzent: #b4501c; --fp-netz: #8a7f6a;
    --fp-schrift: #1d3d4c; --fp-see-schrift: #0d4a70; --fp-falz: #ffffff; --fp-falz-deckkraft: .85; --fp-falzschatten: #000000;
    --fp-kaestchen: #fbf8f1; --fp-land: #c9bfa8;
    margin: 0;
}
@media (prefers-color-scheme: dark) {
    .faltplan {
        --fp-papier: #141d23; --fp-innen: #18232a; --fp-teil: #26343c; --fp-teil-hover: #34474f;
        --fp-wasser: #1d4a66; --fp-rahmen: #a8b4b9; --fp-akzent: #f0894a; --fp-netz: #6f7f86;
        --fp-schrift: #ece9e2; --fp-see-schrift: #cfe8f7; --fp-falz: #000000; --fp-falz-deckkraft: .45; --fp-falzschatten: #ffffff;
        --fp-kaestchen: #141d23; --fp-land: #4a5a62;
    }
}
.faltplan svg { display: block; width: 100%; height: auto; font-family: var(--schrift); }
.faltplan--gross svg { height: min(calc(100vh - 110px), 760px); width: auto; max-width: 600px; }
.faltplan-papier { fill: var(--fp-papier); }
.faltplan-innen { fill: var(--fp-innen); }
.faltplan-wasser { fill: var(--fp-wasser); }
.faltplan-wasser--oben { pointer-events: none; }
.faltplan-teil { fill: var(--fp-teil); stroke: var(--fp-innen); stroke-width: 2.5; stroke-linejoin: round; transition: fill .15s; }
.faltplan a:hover .faltplan-teil:not(.ist-aktiv), .faltplan a:focus-visible .faltplan-teil:not(.ist-aktiv) { fill: var(--fp-teil-hover); }
.faltplan-teil.ist-aktiv { fill: var(--fp-akzent); }
.faltplan a:focus-visible { outline: none; }
.faltplan a:focus-visible .faltplan-teil { stroke: var(--fp-rahmen); stroke-width: 4; }
.faltplan-netz { stroke: var(--fp-netz); stroke-width: 1; stroke-dasharray: 3 5; opacity: .45; pointer-events: none; }
.faltplan-rahmen { fill: none; stroke: var(--fp-rahmen); stroke-width: 2.5; }
.faltplan-rand { font-size: 19px; font-weight: 700; fill: var(--fp-rahmen); text-anchor: middle; }
.faltplan-falz { stroke: var(--fp-falz); stroke-width: 3; opacity: var(--fp-falz-deckkraft); pointer-events: none; }
.faltplan-falzschatten { stroke: var(--fp-falzschatten); stroke-width: 2; opacity: .07; pointer-events: none; }
.faltplan-beschriftung, .faltplan-see {
    text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--fp-innen); stroke-linejoin: round;
}
.faltplan-beschriftung { font-size: 17px; font-weight: 700; fill: var(--fp-schrift); stroke-width: 4px; }
.faltplan-see { font-size: 20px; font-weight: 700; font-style: italic; letter-spacing: .5px; fill: var(--fp-see-schrift); stroke: var(--fp-wasser); stroke-width: 3px; }
.faltplan-uebersicht rect { fill: var(--fp-kaestchen); stroke: var(--fp-rahmen); stroke-width: 1.5; }
.faltplan-uebersicht path { fill: var(--fp-land); }
.faltplan-uebersicht circle { fill: var(--fp-akzent); stroke: var(--fp-kaestchen); stroke-width: 2.5; }
a.faltplan-uebersicht:hover rect, a.faltplan-uebersicht:focus-visible rect { stroke: var(--fp-akzent); stroke-width: 3; }
.faltplan-punkt { fill: var(--fp-akzent); stroke: var(--fp-innen); stroke-width: 4; }
.faltplan-mv { margin: 8px 0 0; font-size: 15px; }
.faltplan-vermerk { margin: 4px 0 0; font-size: 12px; color: var(--text-2); }
.faltplan--klein .faltplan-teil { stroke-width: 3; }
.faltplan--klein .faltplan-vermerk { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .faltplan-teil { transition: none; } }

/* ---------- Startseite (startseite.blade.php, Plan 3) ---------- */

.startseite .buehne {
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-block: 8px 24px;
}
.startseite .buehne--ohne-plan { grid-template-columns: 1fr; }
.startseite .buehne-text { min-width: 0; }
.startseite .buehne h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 10px; }
.startseite .buehne-lead { color: var(--text-2); font-size: 18px; line-height: 1.5; margin: 0 0 18px; max-width: 34em; }
.startseite .buehne-suche {
    display: flex; align-items: center; gap: 8px; background: var(--flaeche); border: 1.5px solid var(--linie);
    border-radius: 99px; padding: 5px 5px 5px 18px; margin-bottom: 16px; max-width: 34em;
}
.startseite .buehne-suche:focus-within { border-color: var(--marke); }
.startseite .buehne-suche input {
    flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); padding: 8px 0;
}
.startseite .buehne-suche input::placeholder { color: var(--text-2); opacity: 1; }
.startseite .buehne-suche input:focus, .startseite .buehne-suche input:focus-visible { outline: none; }
.startseite .buehne-suche button {
    border: 0; border-radius: 99px; background: var(--akzent); color: var(--auf-akzent, #fff); font: inherit;
    font-weight: 700; padding: 9px 20px; cursor: pointer;
}
.startseite .buehne-suche button:hover { background: var(--akzent-hover); }
.startseite .buehne-rubriken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.startseite .buehne-rubriken a {
    display: inline-flex; align-items: center; gap: 7px; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 99px; padding: 6px 13px; font-size: 15px; color: var(--text); text-decoration: none;
}
.startseite .buehne-rubriken a:hover { border-color: var(--rubrik-farbe); }
.startseite .buehne-rubriken i { width: 9px; height: 9px; border-radius: 50%; background: var(--rubrik-farbe); flex: none; }
.startseite .buehne-zahlen { display: flex; gap: 26px; margin: 20px 0 0; color: var(--text-2); font-size: 15px; }
.startseite .buehne-zahlen div { display: flex; flex-direction: column; }
.startseite .buehne-zahlen dt { order: 2; }
.startseite .buehne-zahlen dd { order: 1; margin: 0; font-family: var(--schrift-titel); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.startseite .buehne-plan { display: flex; justify-content: flex-end; }

.startseite .districts-section { margin-top: 8px; }
.startseite .district-grid, .stadtteiluebersicht .district-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.startseite .district-card, .stadtteiluebersicht .district-card {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; box-shadow: none;
}
.startseite .district-card:hover, .stadtteiluebersicht .district-card:hover { border-color: var(--marke); box-shadow: none; }
.startseite .district-card h3 { margin: 0; font-size: 17px; }
.startseite .district-card h3 a { color: var(--text); font-weight: 700; text-decoration: none; }
.startseite .district-card h3 a:hover { color: var(--marke); }
.startseite .district-card small, .stadtteiluebersicht .district-card small { display: block; color: var(--text-2); margin-top: 2px; }

@media (max-width: 900px) {
    .startseite .buehne { grid-template-columns: 1fr; gap: 24px; }
    .startseite .buehne-plan { justify-content: center; }
    .startseite .buehne-plan .faltplan { width: 100%; }
    .startseite .buehne-plan .faltplan--gross svg { width: 100%; max-width: none; height: auto; }
}

/* ---------- Stadtteilseite, Gemeindeseite und /stadtteile (gebiete/*.blade.php, Plan 3 Task 5) ---------- */

/* Titelkasten: links H1, Angaben und Sprungmarken, rechts der kleine Faltplan. */
/* Oben ausgerichtet und der Plan kleiner (Task 8): mittig stand die H1 bei 290px Planbreite
   ueber 130px Luft. */
.gebiet-titelkasten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; }
.gebiet-titelkasten.titelkasten--ohne-plan { grid-template-columns: minmax(0, 1fr); }
.gebiet-titel-text { min-width: 0; }
.gebiet-titel-plan { width: clamp(180px, 16vw, 210px); }
.titelkasten-lead { margin: 8px 0 0; color: var(--text-2); font-size: 18px; }

/* Sprungmarken: Seitenanker im Aussehen der Rubrik-Schaltflaechen. Anders als die
   Rubrikleiste der Strassenseite bleiben sie ohne JavaScript sichtbar - ein Anker braucht
   kein Skript. */
.gebiet-sprungleiste {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
}
.gebiet-sprung {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text);
    font-size: 15px; white-space: nowrap; text-decoration: none;
}
.gebiet-sprung:hover { border-color: var(--marke); color: var(--text); text-decoration: none; }

/* Die bisherigen Abschnitte als Kaesten. Die Klassen stammen aus style.css (weisser Grund,
   feste Schatten) und werden hier fuer beide Modi neu gesetzt. */
:is(.gebietsseite, .stadtteiluebersicht) :is(.district-content, .related-section, .standorte-section, .bebauungsplan-abschnitt) {
    margin-top: 18px; padding: 20px 22px; background: var(--flaeche); color: var(--text);
    border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: none;
}
.gebietsseite .atlas-bereich + .district-content, .gebietsseite .gebiet-kopfbild + .district-content { margin-top: 22px; }
:is(.gebietsseite, .stadtteiluebersicht) :is(.related-section, .standorte-section, .bebauungsplan-abschnitt) h2 {
    margin: 0 0 12px; font-size: 22px; line-height: 1.25; color: var(--text);
}
.gebietsseite .district-content .user-content > :last-child { margin-bottom: 0; }
.gebietsseite .gebiet-uebergeordnet { margin: 0 0 10px; }
:is(.gebietsseite, .stadtteiluebersicht) :is(.district-content, .standorte-section, .bebauungsplan-abschnitt) a { color: var(--marke); }
:is(.gebietsseite, .stadtteiluebersicht) :is(.standorte-art, .standorte-adresse, .datenquelle, .baustellen-quelle, .bebauungsplan-hinweis, .bebauungsplan-angaben) { color: var(--text-2); }
.gebietsseite .standorte-eintrag { border-bottom-color: var(--linie); }
.gebietsseite .datenquelle, .gebietsseite .baustellen-quelle { font-size: 14px; }
.gebietsseite .bebauungsplan-karte { border-left-color: var(--marke); cursor: default; }
.gebietsseite .bebauungsplan-karte--verfahren { border-left-color: var(--akzent); }
.gebietsseite .gebiet-kopfbild { margin: 0 0 18px; }
.gebietsseite .gebiet-kopfbild img { border-radius: var(--radius); }
.gebietsseite .gebiet-kopfbild figcaption { color: var(--text-2); font-size: 14px; }

/* Strassen- und Ortsteillisten in Spalten statt der Zwei-Spalten-Kacheln aus style.css. */
:is(.gebietsseite, .stadtteiluebersicht) .related-streets {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px;
}
:is(.gebietsseite, .stadtteiluebersicht) .related-street-link {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--radius-s);
    background: none; color: var(--text); text-decoration: none;
}
:is(.gebietsseite, .stadtteiluebersicht) .related-street-link:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; }
:is(.gebietsseite, .stadtteiluebersicht) .related-street-link svg { color: var(--marke); }

/* /stadtteile: die ganze Kachel ist der Link (Kachelaussehen siehe Startseite oben). */
.stadtteiluebersicht .district-grid { margin-top: 0; align-items: start; }
.stadtteiluebersicht a.district-card { display: block; color: var(--text); text-decoration: none; overflow: hidden; }
.stadtteiluebersicht a.district-card h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.stadtteiluebersicht a.district-card:hover h2 { color: var(--marke); }
.stadtteiluebersicht a.district-card:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.stadtteiluebersicht .district-card-bild { width: calc(100% + 28px); height: 140px; margin: -12px -14px 10px; }

@media (max-width: 759px) {
    .gebiet-titelkasten { grid-template-columns: minmax(0, 1fr); }
    .gebiet-titel-plan { width: 100%; max-width: 340px; justify-self: center; }
    .gebiet-sprungleiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
    .gebiet-sprungleiste::-webkit-scrollbar { display: none; }
}

/* ---------- Listen- und Kartenseiten (Baustellen, B-Plaene, Rubriken, /karte; Plan 3 Task 6) ---------- */
/* Vorbild gastro-mv.de: Filter-Schaltflaechen mit Zahl, Legende, links die Liste als Karten mit
   Symbol, Name, Zusatzzeile, Statuspunkt und Ortungsknopf, rechts die Map mit runden Ecken.
   Die alten Klassen (.karte-mit-filter, .kartenfilter, .baustelle-karte, .bebauungsplan-karte,
   data-baustelle, data-bebauungsplan) bleiben als Haken fuer baustellen.js, bebauungsplaene.js
   und karte-ebenen.js; hier wird nur ueberschrieben, was style.css fuer sie setzt. */

.listenseite-kopf { margin-bottom: 16px; }
.listenseite-kopf h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.listenseite-kopf > :not(h1) { margin-top: 10px; }
.listenseite-kopf .baustein-text > :last-child { margin-bottom: 0; }

/* Ohne JavaScript koennen Filter, Umschalter und Ortungsknopf nichts tun - dann bleiben sie weg
   und die ganze Liste steht da. */
html:not(.js) :is(.listenfilter, .ansichtschalter, .orten-knopf) { display: none !important; }

.listenfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.listenfilter-knopf {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text);
    font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.listenfilter-knopf:hover { border-color: var(--marke); }
.listenfilter-zahl { font-weight: 400; font-size: 14px; opacity: 0.8; }
.listenfilter-knopf[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--grund); }

.listenleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.listenlegende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; color: var(--text-2); font-size: 15px; }
.listenlegende .baustellen-zaehler-wert { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 700; }
.listenlegende .baustellen-stand { color: var(--text-2); font-size: 14px; }
.listenseite-kopf .listenlegende { margin-top: 12px; }

/* Statuspunkte in denselben Farben wie die Flaechen auf der Karte. EINE Quelle je Farbe:
   baustellen.js liest --status-laufend/--status-geplant (hier), bebauungsplaene.js liest
   --color-primary/--color-accent (style.css) - beide per getComputedStyle(). */
.statuspunkt { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--text-2); vertical-align: 0.05em; margin-right: 4px; }
:root { --status-laufend: #dc3545; --status-geplant: #a86000; }
.statuspunkt--laufend { background: var(--status-laufend); }
.statuspunkt--geplant { background: var(--status-geplant); }
.statuspunkt--in_kraft { background: var(--color-primary, #2c5aa0); }
.statuspunkt--verfahren { background: var(--color-accent, #a86000); }
@media (prefers-color-scheme: dark) {
    /* Auf dunklem Grund ein heller Ring, damit Blau und Braun nicht im Grund versinken. */
    .statuspunkt { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.55); }
}

/* Umschalter "Liste | Karte": nur auf dem Handy und nur mit JavaScript. */
.ansichtschalter { display: none; }
.ansichtschalter button {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ansichtschalter button[aria-pressed='true'] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgb(22 35 42 / 0.12); }
.ansichtschalter .symbol { --groesse: 20px; }

/* Liste und Map im Inhaltsraster (1248px) statt randlos wie bisher. */
.listenkarte-buehne { margin: 0 0 28px; padding: 0; background: none; border: 0; }
.listenkarte-buehne .karte-buehne-innen { max-width: var(--breite); padding-inline: var(--rand); }
.listenkarte-buehne .karte-buehne-titel,
.listenkarte .kartenfilter-kopf {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.listenkarte, .listenkarte-standorte {
    --karte-hoehe: clamp(460px, calc(100vh - 230px), 640px);
    --kartenfilter-breite: clamp(300px, 32vw, 400px);
}
.listenkarte { gap: 16px; }
.listenkarte .kartenfilter-huelle { height: auto; background: none; border: 0; border-radius: 0; overflow: visible; }
.listenkarte .kartenfilter-koerper { height: var(--karte-hoehe); padding: 0; }
.listenkarte .kartenfilter-inhalt, .listenkarte-standorte > .listenspalte {
    padding: 0 8px 0 0; scrollbar-width: thin; scrollbar-color: var(--linie) transparent; mask-image: none;
}
.listenkarte .kartenfilter-inhalt::-webkit-scrollbar-track { background: transparent; }
.listenkarte .kartenfilter-inhalt::-webkit-scrollbar-thumb { background: var(--linie); }

/* Die Map: runde Ecken, eigener Stapelkontext (Leaflet-Ebenen bleiben in der Karte). */
:is(.listenkarte, .listenkarte-standorte, .listenseite, .kartenseite-buehne) .map-container {
    isolation: isolate; border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: none; background: var(--flaeche-2);
}

/* Listenkarte (gastro-mv: .kachel-zeile + Knopf "Auf der Karte zeigen") */
.listeneintrag {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    margin: 0 0 10px; padding: 11px 8px 11px 11px;
    background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius);
}
.listeneintrag:hover { border-color: var(--marke); }
.listeneintrag[hidden] { display: none; }
.listeneintrag-symbol {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--rubrik-farbe, var(--marke)) 13%, var(--flaeche));
    color: var(--rubrik-farbe, var(--marke));
}
.listeneintrag-symbol .symbol { --groesse: 26px; }
@media (prefers-color-scheme: dark) {
    .listeneintrag-symbol {
        background: color-mix(in srgb, var(--rubrik-farbe, var(--marke)) 30%, var(--flaeche));
        color: color-mix(in srgb, var(--rubrik-farbe, var(--marke)) 35%, var(--text));
    }
}
.listeneintrag-text { min-width: 0; }
.listeneintrag h3, .listeneintrag-name {
    display: block; margin: 0 0 2px; font-family: var(--schrift-titel); font-size: 17px; font-weight: 650; line-height: 1.25; color: var(--text);
}
a.listeneintrag-name { color: var(--text); text-decoration: none; }
a.listeneintrag-name:hover { color: var(--marke); text-decoration: underline; }
.listeneintrag p { margin: 2px 0; font-size: 14px; color: var(--text-2); }
.listeneintrag a { color: var(--marke); }
.listeneintrag :is(.standorte-art, .standorte-adresse) { display: block; color: var(--text-2); font-size: 14px; }
.listeneintrag .baustelle-text { color: var(--text-2); }
.listeneintrag .baustelle-marke, .listeneintrag .baustelle-dauer { color: var(--text-2); font-weight: 700; }
.listeneintrag .baustelle-zeitraum { color: var(--text); }
/* style.css gibt Baustellen und Plaenen einen Statusbalken links; hier traegt der Punkt den Status. */
.listeneintrag:is(.baustelle-karte, .bebauungsplan-karte) { border-left-width: 1px; border-left-color: var(--linie); }
.listeneintrag:is(.baustelle-karte, .bebauungsplan-karte):hover { border-color: var(--marke); }
.listeneintrag.bebauungsplan-karte--hervorgehoben {
    background: var(--marke-zart); outline: 2px solid var(--marke); outline-offset: -2px; border-color: var(--marke);
}
.orten-knopf {
    display: grid; place-items: center; align-self: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: transparent; color: var(--marke); cursor: pointer;
}
.orten-knopf:hover { background: var(--marke-zart); }
.orten-knopf .symbol { --groesse: 22px; }

/* Gruppen- und Stadtteilzeilen in der Liste der B-Plaene */
.listenkarte .bebauungsplan-gruppe { margin: 6px 0 8px; font-size: 18px; color: var(--text); }
.listenkarte .listengruppe + .listengruppe .bebauungsplan-gruppe { margin-top: 22px; }
.listenkarte .bebauungsplan-stadtteil { margin: 14px 0 6px; font-size: 14px; color: var(--text-2); }
.listenkarte .bebauungsplan-stadtteil a { color: var(--text-2); }
.listengruppe[hidden] { display: none; }
.listenkarte :is(.bebauungsplan-angaben, .bebauungsplan-hinweis, .bebauungsplan-lage) { color: var(--text-2); }
.listenkarte .bebauungsplan-titel { font-size: 16px; }

/* Parken und Heiraten: dieselbe Aufteilung. Im HTML steht die Map vorn (bisherige Reihenfolge),
   das Raster stellt die Liste links daneben. */
.listenkarte-standorte {
    display: grid; grid-template-columns: var(--kartenfilter-breite) minmax(0, 1fr); grid-template-areas: 'liste karte';
    gap: 16px; align-items: start; margin: 0 0 22px;
}
.listenkarte-standorte > .karte-flaeche { grid-area: karte; display: flex; flex-direction: column; height: var(--karte-hoehe); margin: 0; }
.listenkarte-standorte > .karte-flaeche h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.listenkarte-standorte .karte-flaeche .map-container { flex: 1; height: auto; min-height: 0; }
.listenkarte-standorte #parkenKarte { position: absolute; inset: 0; width: auto; height: auto; }
.listenkarte-standorte > .listenspalte { grid-area: liste; height: var(--karte-hoehe); overflow-y: auto; overscroll-behavior: contain; }
.listenspalte .standorte-uebersicht { margin: 0; }
.listenspalte .standorte-uebersicht + .standorte-uebersicht { margin-top: 22px; }
.listenspalte .standorte-uebersicht[hidden] { display: none; }
.listenspalte .standorte-uebersicht > h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }

/* Gruppen nach Stadtteil: ohne weissen Kasten aus style.css, die Karten tragen sich selbst. */
.listenseite .standorte-section { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--text); }
.listenseite .standorte-section + .standorte-section { margin-top: 12px; }
.listenseite .standorte-section h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.listenseite .standorte-section > h2 { margin: 0 0 10px; font-size: 18px; color: var(--text); }
ul.listenkarten { list-style: none; margin: 0; padding: 0; }
ul.listenkarten > .listeneintrag:last-child { border-bottom: 1px solid var(--linie); }

/* Rubrikseiten ohne Map (/kitas, /schulen): Stadtteil-Kaesten im Raster. */
.listenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; margin: 8px 0 0; }
.listenraster > h2, .listenraster > .baustelle-leer { grid-column: 1 / -1; margin: 0; }
.listenseite .listenraster > .standorte-section {
    padding: 14px 16px 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.listenseite .listenraster > .standorte-section + .standorte-section { margin-top: 0; }
.listenraster .listeneintrag { grid-template-columns: 40px minmax(0, 1fr); margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--linie); border-radius: 0; background: none; }
.listenraster ul.listenkarten > .listeneintrag:last-child { border-bottom: 0; }
.listenraster .listeneintrag:first-child { border-top: 0; }
.listenraster .listeneintrag-symbol { width: 40px; height: 40px; }
.listenraster .listeneintrag-symbol .symbol { --groesse: 22px; }

/* Uebrige Bloecke der Seiten im Farbschema (style.css setzt Weiss und feste Grautoene). */
.listenseite :is(.baustelle-leer, .baustellen-quelle, .datenquelle, .standort-hinweis) { color: var(--text-2); }
.listenseite .standort-hinweis a, .listenseite .datenquelle a { color: var(--marke); }
.listenseite :is(.datenquelle, .baustellen-quelle) { font-size: 14px; }
.listenseite .instructions-box { background: var(--flaeche); border-color: var(--linie); border-radius: var(--radius); color: var(--text); }
.listenseite .instructions-box a { color: var(--marke); }
.listenseite .map-section { margin: 0 0 22px; }
.listenseite .map-section > h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text-2); }
.listenseite .vergleich-behaelter { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.listenseite .vergleich-tabelle :is(th, td) { border-bottom-color: var(--linie); }
.listenseite .vergleich-tabelle thead th { color: var(--text-2); }
.listenseite .vergleich-tabelle a { color: var(--marke); }
.listenseite-fuss .baustellen-archiv summary { color: var(--marke); font-weight: 700; cursor: pointer; }
.listenseite-fuss .seiten-text { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: none; }

/* /karte: Filterspalte und Ablauf wie bisher, Aussehen der MV-Familie. Die Buehne bleibt breit
   (die Karte ist dort das Werkzeug), verliert aber das graue Band. */
.kartenseite-buehne { background: none; border: 0; padding-top: 0; }
.kartenseite-buehne .karte-buehne-titel { font-size: 16px; font-weight: 600; color: var(--text-2); }
.kartenseite-buehne .kartenfilter-huelle { background: var(--flaeche); border-color: var(--linie); border-radius: var(--radius-l); }
.kartenseite-buehne .kartenfilter-kopf { border-bottom-color: var(--linie); }
.kartenseite-buehne .kartenfilter-titel { color: var(--text); font-family: var(--schrift-titel); font-weight: 700; }
.kartenseite-buehne :is(.kartenfilter-anzahl-gesamt, .kartenfilter-pfeil, .kartenfilter-treffer) { color: var(--text-2); }
.kartenseite-buehne .kartenfilter-suche { min-height: 40px; background: var(--grund); color: var(--text); border: 1.5px solid var(--linie); border-radius: 10px; }
.kartenseite-buehne .kartenfilter-suche::placeholder { color: var(--text-2); opacity: 1; }
.kartenseite-buehne .kartenfilter-suche:focus-visible { border-color: var(--marke); outline-color: var(--marke); }
.kartenseite-buehne .kartenfilter-zuruecksetzen { color: var(--marke); }
.kartenseite-buehne .kartenfilter-zuruecksetzen:disabled { color: var(--text-2); }
.kartenseite-buehne .kartenfilter-ebene-titel { background: var(--flaeche); color: var(--text-2); }
.kartenseite-buehne .kartenfilter-eintrag:hover { background: var(--flaeche-2); }
.kartenseite-buehne .kartenfilter-name { color: var(--text); }
.kartenseite-buehne .kartenfilter-name:hover, .kartenseite-buehne .kartenfilter-name:focus-visible { color: var(--marke); }
.kartenseite-buehne .kartenfilter-name--ohne-karte { color: var(--text-2); }
.kartenseite-buehne .kartenfilter-kaestchen { accent-color: var(--marke); }
.kartenseite-buehne .kartenfilter-seite { color: var(--text-2); }
.kartenseite-buehne .kartenfilter-seite:hover, .kartenseite-buehne .kartenfilter-seite:focus-visible { background: var(--marke); color: var(--flaeche); }
.kartenseite-buehne .kartenfilter-inhalt { scrollbar-color: var(--linie) transparent; }

/* Handy (bis 900px wie .karte-mit-filter in style.css): Liste und Map untereinander; mit
   JavaScript nur eine von beiden, gewaehlt mit dem Umschalter. Die verborgene Haelfte bleibt
   im Layout gemessen (visibility statt display:none), damit Leaflet die richtige Groesse
   kennt; position:absolute nimmt sie aus dem Fluss, die Hoehe ist begrenzt, damit eine lange
   verborgene Liste die Seite nicht verlaengert. */
@media (max-width: 900px) {
    html.js .ansichtschalter { display: flex; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--flaeche-2); }

    .listenkarte, .listenkarte-standorte { --karte-hoehe: clamp(360px, calc(100vh - 220px), 560px); }
    .listenkarte .kartenfilter-koerper { height: auto; }
    .listenkarte .kartenfilter-inhalt { max-height: none; overflow: visible; padding: 0; }
    .listenkarte-standorte { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    .listenkarte-standorte > :is(.karte-flaeche, .listenspalte) { grid-area: auto; }
    .listenkarte-standorte > .listenspalte { height: auto; overflow: visible; padding: 0; }

    [data-listenkarte][data-ansicht] { position: relative; }
    [data-listenkarte][data-ansicht='liste'] > [data-listenkarte-teil='karte'],
    [data-listenkarte][data-ansicht='karte'] > [data-listenkarte-teil='liste'] {
        position: absolute; top: 0; left: 0; right: 0; max-height: var(--karte-hoehe); overflow: hidden;
        visibility: hidden; pointer-events: none;
    }
}

@media print {
    .listenfilter, .ansichtschalter, .orten-knopf { display: none !important; }
}

/* ---------- Verzeichnis, Detail-, Rechts-, Such- und Fehlerseiten (Plan 3 Task 7) ---------- */
/* Alle im Kasten-Stil der Strassenseite: Brotkrumen, Titelkasten, Abschnitte als Kaesten. Die
   alten Klassen aus style.css (page-header, alphabet-nav, street-list-item, legal-content,
   instructions-box ...) werden auf diesen Seiten nicht mehr benutzt. */

.kastenseite { padding-bottom: 28px; }
.kastenabschnitt { margin-top: 18px; }
.kastenabschnitt > h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; color: var(--text); }
.kastenabschnitt > :last-child { margin-bottom: 0; }
.kastenseite .titelkasten > p:not(.titelkasten-lead):not(.titelkasten-hinweis) { margin: 12px 0 0; }
.kastenseite .titelkasten a, .kastenseite .kastenabschnitt a:not(.knopf) { color: var(--marke); }
.titelkasten-hinweis { margin: 12px 0 0; color: var(--text-2); font-size: 15px; }
.kasten-nachsatz { margin: 12px 0 0; color: var(--text-2); font-size: 15px; }

/* Buchstaben als Schaltflaechen. Leere Buchstaben bleiben als ausgegraute Kaesten stehen. */
.buchstaben { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.buchstabe {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--flaeche); color: var(--marke);
    font-weight: 700; text-decoration: none;
}
a.buchstabe:hover { border-color: var(--marke); text-decoration: none; }
a.buchstabe.ist-aktiv, a.buchstabe.ist-aktiv:hover { background: var(--text); border-color: var(--text); color: var(--grund); }
.buchstabe.ist-leer { background: var(--flaeche-2); color: var(--text-2); opacity: 0.55; }

/* Strassen (und Suchtreffer) in Spalten; die Spaltenzahl folgt der Breite. */
.strassenspalten { list-style: none; margin: 0; padding: 0; column-width: 15rem; column-gap: 28px; }
.strassenspalten li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--linie); }
.strassenspalten a { font-weight: 700; }
.strassenspalten small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.35; }

/* Suchfeld im Titelkasten (Suche, 404): wie das der Startseite, rund mit Knopf. */
.kastensuche { margin-top: 16px; }
.kastensuche .search-form {
    display: flex; align-items: center; gap: 8px; max-width: 34em; padding: 5px 5px 5px 18px;
    background: var(--grund); border: 1.5px solid var(--linie); border-radius: 99px;
}
.kastensuche .search-form:focus-within { border-color: var(--marke); }
.kastensuche .search-input {
    flex: 1; min-width: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit;
}
.kastensuche .search-input::placeholder { color: var(--text-2); opacity: 1; }
.kastensuche .search-input:focus, .kastensuche .search-input:focus-visible { outline: none; }
.kastensuche .search-button {
    border: 0; border-radius: 99px; background: var(--akzent); color: var(--auf-akzent); font: inherit; font-weight: 700;
    padding: 9px 20px; cursor: pointer;
}
.kastensuche .search-button:hover { background: var(--akzent-hover); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.fehler-faltplan .faltplan { max-width: 340px; }

/* Rechtsseiten: ein Kasten, die Textspalte hoechstens 72 Zeichen breit. */
.rechtskasten { padding: 26px clamp(18px, 4vw, 40px); }
.rechtstext { max-width: 72ch; }
.rechtstext h1 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.rechtstext h2 { margin: 28px 0 10px; font-size: 22px; line-height: 1.25; color: var(--text); }
.rechtstext h3 { margin: 20px 0 8px; font-size: 18px; color: var(--text); }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 14px; }
.rechtstext a { color: var(--marke); }
.rechtstext .user-content > :last-child { margin-bottom: 0; }

/* Standort-Detailseite: Steckbrief und Kontakt im Titelkasten, in beiden Modi. style.css setzt
   dort Weiss und feste Schatten. */
.detailseite .standort-steckbrief {
    margin-top: 16px; background: var(--grund); box-shadow: none; border: 1px solid var(--linie); border-radius: var(--radius);
}
.detailseite .standort-angaben dt { color: var(--text-2); }
.detailseite .standort-angaben dd { color: var(--text); }
.detailseite .standort-angaben a { color: var(--marke); }
.detailseite .standort-angabe-zusatz { color: var(--text-2); }
.detailseite .standort-kontakt { background: var(--flaeche-2); border-left-color: var(--linie); }
.detailseite .standort-kontakt h2 { color: var(--text); font-size: 18px; }
.detailseite .standort-kontakt a { color: var(--marke); }
.detailseite .standort-kontakt a:hover { background: var(--marke-zart); }
.detailseite .standort-kontakt svg { color: var(--marke); }
.detailseite .standort-hinweis { color: var(--text-2); }
.detailseite .standort-hinweis a { color: var(--marke); }
.detailseite .instructions-box.hinweis-geschlossen {
    margin: 14px 0 0; background: var(--akzent-zart); border: 1px solid var(--akzent); border-radius: var(--radius-s);
    color: var(--text); font-weight: 700;
}
.detailseite .street-content { margin-top: 18px; }
.detailseite .atlas { margin-top: 18px; }
.detailseite .datenquelle, .kastenseite .datenquelle { margin: 14px 0 0; color: var(--text-2); font-size: 14px; }
.detailseite .datenquelle a { color: var(--marke); }
.detailseite .user-content > :last-child, .kastenseite .seiten-text .user-content > :last-child { margin-bottom: 0; }
@media (max-width: 759px) {
    .detailseite .atlas { grid-template-columns: minmax(0, 1fr); }
}

/* /stadtplaene: der Produktblock bleibt, bekommt aber Grund und Farben der Kaesten (style.css
   setzt Weiss und feste Grautoene). Die Produktbilder behalten ihren weissen Grund. */
.stadtplanseite .products-section {
    margin-top: 18px; padding: 20px 22px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.stadtplanseite .products-kopf h2 { color: var(--text); }
.stadtplanseite .produkt-kennzeichnung, .stadtplanseite .products-intro p { color: var(--text-2); }
.stadtplanseite .product-card { background: var(--flaeche-2); border: 1px solid var(--linie); box-shadow: none; color: var(--text); }
.stadtplanseite .product-title a { color: var(--text); }
.stadtplanseite .product-price { color: var(--akzent); }
.stadtplanseite .price-tax-info { color: var(--text-2); }
.stadtplanseite .intro-text { max-width: 72ch; margin: 0; color: var(--text); font-size: 18px; }
.stadtplanseite .btn-secondary { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.stadtplanseite .btn-secondary:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--auf-akzent); }

/* ---------- Fokus, Dunkelmodus-Reste (Plan 3 Task 8) ---------- */

/* Fokusumriss: bisher aus style.css in --color-accent (#a86000) - auf dem dunklen Grund nur
   knapp 4:1 und in keiner der Familienfarben. Jetzt die Markenfarbe, hell #00639e (6,4:1 auf
   Weiss), dunkel #7fc3e6 (9:1 auf --grund). Der Mausklick zeigt keinen Umriss mehr, nur die
   Tastatur. Die Klassenregeln aus style.css behalten Breite und Abstand, nur die Farbe
   kommt von hier. */
:root { --fokus: var(--marke); }
/* Nur Elementnamen im :is(), damit die Spezifitaet (0,1,1) wie in style.css bleibt und
   Klassenregeln wie .mv-suchfeld:focus-visible { outline: none } weiter vorgehen. */
:is(a, button, input, select, textarea, summary):focus { outline: none; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
:is(.kartenfilter-kopf, .kartenfilter-suche, .nach-oben, a.district-card):focus-visible,
.skip-link:focus { outline-color: var(--fokus); }

/* Die Wortmarke ist ein Link und erbte aus style.css "transition: all 0.3s" - beim Umschalten
   auf dunkel lief "Stadtplan-" eine Drittelsekunde dunkel auf dunkel (Task 4). */
.wortmarke, .wortmarke-text { transition: none; }

/* Weisser Kasten der Startseite ("Sie moechten ... besuchen?") und die Panel-Texte auf
   Startseite, /stadtteile und /karte: style.css setzt Weiss und #333. */
.intro-section { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: none; }
.intro-text { color: var(--text); }
/* Auf der Startseite klebte der Kasten ohne Abstand unter dem Kachelraster. */
.startseite .intro-section:not(.seiten-text) { margin-top: 22px; }

/* Datenvermerke ueberall in der Zweitfarbe; style.css setzt #666 (3,2:1 auf dunkel). */
.datenquelle { color: var(--text-2); }
.datenquelle a { color: var(--marke); }

/* Kopf der Ergebnisliste auf /baustellen und /bebauungsplaene: fuer Vorleser da, optisch
   verborgen - trotzdem in Familienfarben statt #1a3a6b und #666. */
.listenkarte .kartenfilter-titel { color: var(--text); }
.listenkarte .kartenfilter-anzahl-gesamt { color: var(--text-2); }

/* /stadtplaene: Preis in --akzent auf --flaeche-2 waren 4,42:1; die dunklere Stufe hat 5,7:1,
   im Dunkelmodus ist --akzent-hover die hellere. */
.stadtplanseite .product-price { color: var(--akzent-hover); }

/* Rubrikpunkte (Startseite, Strassenseite, Stadtteilseite): die Profilfarben sind fuer hellen
   Grund gewaehlt; Baustellen #6b5000 und B-Plaene #555b1c versinken im dunklen Chip. Wie bei
   den Statuspunkten ein heller Ring. Die Punkte sind Schmuck neben dem Text. */
@media (prefers-color-scheme: dark) {
    .rubrik-punkt, .startseite .buehne-rubriken i { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.55); }
}