.formular-raster {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;}
.fachkarte {height:440px;max-width:100%;margin:16px 0;}
.tabelle-scroll {max-width:100%;overflow-x:auto;}
.fachformular {padding:20px;}
@media (max-width:900px) {
  /* Frueher stand hier ``max-height:180px`` mit Eigenlauf – der Versuch,
     vierzig umgebrochene Menuepunkte auf einem kleinen Bildschirm zu
     baendigen. Seit das Menue dort auf vier Schnellwege eingedampft ist
     (siehe ``navigation.html``), braucht es weder Hoehenbegrenzung noch
     zweiten Rollbereich. */
  .huelle > .inhalt {min-height:0;flex:1;}
}
.karte input,.karte select,.karte textarea {max-width:100%;}
/* =========================================================================
   Innenstadt-Monitoring – Designsystem

   Haltung: ruhige Flaechen, wenig Linien, viel Weissraum, genau ein
   Akzentton. Alles Farbige in der Oberflaeche gehoert den Daten
   (Branchenfarben), nicht der Dekoration.
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* Flaechen */
    --fl-basis: #f5f5f7;
    --fl-karte: #ffffff;
    --fl-erhoben: #ffffff;
    --fl-gedimmt: #fafafa;
    --fl-nav: rgba(255, 255, 255, 0.72);

    /* Schrift */
    --txt: #1d1d1f;
    --txt-2: #6e6e73;
    --txt-3: #66666b;

    /* Linien */
    --linie: rgba(0, 0, 0, 0.09);
    --linie-stark: rgba(0, 0, 0, 0.16);

    /* Akzent und Signale */
    --akzent: #0071e3;
    --akzent-weich: rgba(0, 113, 227, 0.1);
    --gruen: #1a8a4a;
    --gruen-weich: rgba(26, 138, 74, 0.12);
    --orange: #b96700;
    --orange-weich: rgba(185, 103, 0, 0.12);
    --rot: #d0021b;
    --rot-weich: rgba(208, 2, 27, 0.1);

    /* Form */
    --r-s: 8px;
    --r-m: 12px;
    --r-l: 18px;
    --r-xl: 24px;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
    --schatten-2: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    --schatten-3: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

    --nav-breite: 244px;
    --zeit: 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.sprungmarke { position:fixed; left:12px; top:-80px; z-index:9999; padding:10px 14px;
  background:var(--fl-karte); color:var(--txt); border:2px solid var(--akzent); border-radius:8px; }
.sprungmarke:focus { top:12px; }
.karten-beschriftung { font-size:10.5px; font-weight:600; color:var(--txt);
  text-shadow:0 0 3px var(--fl-karte),0 0 3px var(--fl-karte);
  white-space:nowrap; transform:translate(12px,-8px); }

@media (prefers-color-scheme: dark) {
    :root {
        --fl-basis: #000000;
        --fl-karte: #1c1c1e;
        --fl-erhoben: #2c2c2e;
        --fl-gedimmt: #161618;
        --fl-nav: rgba(28, 28, 30, 0.76);
        --txt: #f5f5f7;
        --txt-2: #a1a1a6;
        --txt-3: #8e8e93;
        --linie: rgba(255, 255, 255, 0.1);
        --linie-stark: rgba(255, 255, 255, 0.2);
        --akzent: #0a84ff;
        --akzent-weich: rgba(10, 132, 255, 0.18);
        --gruen: #30d158;
        --gruen-weich: rgba(48, 209, 88, 0.16);
        --orange: #ff9f0a;
        --orange-weich: rgba(255, 159, 10, 0.16);
        --rot: #ff453a;
        --rot-weich: rgba(255, 69, 58, 0.16);
        --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --schatten-2: 0 4px 16px rgba(0, 0, 0, 0.5);
        --schatten-3: 0 12px 40px rgba(0, 0, 0, 0.6);
    }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
        "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--txt);
    background: var(--fl-basis);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "liga", "tnum" 0;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.22;
}
h1 { font-size: 27px; letter-spacing: -0.026em; }
h2 { font-size: 19px; }
h3 { font-size: 15.5px; }
h4 { font-size: 13.5px; }

p { margin: 0 0 0.7em; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--akzent-weich); }

:focus-visible {
    outline: 2.5px solid var(--akzent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------- Layout */

.huelle { display: flex; min-height: 100vh; }

.nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nav-breite);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 12px 12px;
    background: var(--fl-nav);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-right: 1px solid var(--linie);
    z-index: 50;
    /* Nicht mehr die ganze Leiste rollt, sondern nur die Gruppenliste
       (``.nav__baum``). Marke oben und Konto unten bleiben dadurch stehen –
       vorher wanderte der Abmeldeknopf aus dem Bild, sobald die Liste laenger
       war als der Bildschirm hoch. */
    overflow: hidden;
}

.nav__baum {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Der Rollbalken soll die Eintraege nicht anschneiden. */
    margin-right: -6px;
    padding-right: 6px;
}

/* Wortmarke und Kontozeile sind Verweise und waeren sonst akzentblau mit
   Unterstreichung beim Ueberfahren. Frueher stand das als ``style``-Attribut
   in der Vorlage – hier steht es einmal statt zweimal. */
.nav a.nav__marke { color: var(--txt); text-decoration: none; }
.nav a.nav__marke:hover .nav__titel { text-decoration: underline; }
.nav__marke {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 14px;
    flex: none;
}
.nav__marke-text { min-width: 0; }
.nav__logo {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #0a84ff, #0055c8);
    color: #fff; font-size: 15px; font-weight: 700;
    flex: none;
}
.nav__titel { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.nav__ort { font-size: 11.5px; color: var(--txt-3); }

/* Menuegruppen als ``<details>``: aufklappbar ohne JavaScript, mit Tastatur
   bedienbar, fuer Screenreader ein bekanntes Muster. Der Dreiecksmarker der
   Browser wird ersetzt – er sitzt links und in wechselnder Groesse, der
   eigene Pfeil sitzt rechts und dreht sich. */
.nav__gruppe { margin-bottom: 2px; }
.nav__gruppe-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--txt-3);
    cursor: pointer;
    border-radius: var(--r-s);
    list-style: none;
    user-select: none;
    transition: color var(--zeit), background var(--zeit);
}
.nav__gruppe-titel::-webkit-details-marker { display: none; }
.nav__gruppe-titel::marker { content: ""; }
.nav__gruppe-titel:hover { color: var(--txt); background: rgba(120, 120, 128, 0.1); }
.nav__gruppe-titel > span { min-width: 0; overflow-wrap: anywhere; }
.nav__pfeil {
    margin-left: auto;
    flex: none;
    opacity: 0.7;
    transition: transform var(--zeit);
}
.nav__gruppe[open] > .nav__gruppe-titel .nav__pfeil { transform: rotate(90deg); }
/* Eine zugeklappte Gruppe, in der die aktuelle Seite steckt, kann es nicht
   geben – der Server klappt sie auf. Der Punkt macht sie trotzdem kenntlich,
   falls jemand sie von Hand zuklappt. */
.nav__gruppe[data-aktiv]:not([open]) > .nav__gruppe-titel { color: var(--akzent); }
.nav__gruppe-inhalt { display: flex; flex-direction: column; gap: 2px; }

.nav a.nav__eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-s);
    color: var(--txt);
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--zeit);
}
.nav__text { min-width: 0; overflow-wrap: anywhere; }
/* Untereintraege: eingerueckt bis unter die Schrift des Elterneintrags,
   kleineres Symbol, kleinere Schrift. Vorher stand dieselbe Einrueckung
   zehnmal als ``style``-Attribut in der Vorlage. */
.nav a.nav__eintrag--unter {
    padding-left: 26px;
    font-size: 12.5px;
    color: var(--txt-2);
}
.nav a.nav__eintrag--unter .nav__symbol { width: 15px; opacity: 0.7; }
.nav a.nav__eintrag--unter.aktiv { color: #fff; }
.nav a.nav__eintrag--unter.aktiv .nav__symbol { opacity: 1; }

/* Schnellzugriff statt Menuebaum auf kleinen Bildschirmen – siehe die
   Begruendung in navigation.html. */
.nav__schnell { display: none; }
.nav a.nav__eintrag:hover { background: rgba(120, 120, 128, 0.12); text-decoration: none; }
.nav a.nav__eintrag.aktiv { background: var(--akzent); color: #fff; font-weight: 550; }
.nav a.nav__eintrag.aktiv .nav__zahl { background: rgba(255,255,255,0.25); color: #fff; }
.nav__symbol { width: 17px; flex: none; opacity: 0.85; }
.nav__zahl {
    margin-left: auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 20px;
    background: rgba(120, 120, 128, 0.16);
    color: var(--txt-2);
}
.nav__fuss { flex: none; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linie); }
.nav__avatar {
    width: 27px; height: 27px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--akzent-weich); color: var(--akzent);
    font-size: 11.5px; font-weight: 650;
}

.inhalt {
    flex: 1;
    margin-left: var(--nav-breite);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kopf {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 32px;
    background: var(--fl-nav);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--linie);
}
.kopf__text { min-width: 0; overflow-wrap: anywhere; }
.kopf__unter { font-size: 12.5px; color: var(--txt-2); margin-top: 1px; }
.kopf__aktionen { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.rumpf { padding: 26px 32px 60px; max-width: 1500px; width: 100%; }
.rumpf--weit { max-width: none; }
.rumpf--randlos { padding: 0; flex: 1; display: flex; }

@media (max-width: 900px) {
    .huelle { flex-direction: column; }
    .nav {
        position: static; width: auto; inset: auto;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 4px 6px; padding: 10px 14px;
        border-right: none; border-bottom: 1px solid var(--linie);
        overflow: visible;
    }
    .nav__marke { padding: 0 10px 0 2px; }
    /* Der Menuebaum entfaellt hier vollstaendig. Die Verwaltungsoberflaeche
       ist unter 900 px ohnehin nicht bedienbar – dafuer gibt es den
       Vor-Ort-Modus –, und vierzig umgebrochene Menuepunkte haben davon noch
       nie eine bedienbar gemacht. Ueber »Module« ist jeder Bereich einen
       Fingertipp entfernt. */
    .nav__baum, .nav__zahl { display: none; }
    .nav__schnell { display: flex; flex-wrap: wrap; gap: 4px; }
    .nav__fuss { margin: 0 0 0 auto; padding: 0; border: none; }
    /* Hier sitzt der Ausloeser oben in der Zeile – das Blatt klappt deshalb
       nach unten auf und richtet sich am rechten Rand aus. Der Knopf zeigt nur
       das Kuerzel: Name und Kommune stehen mit Text 23 px ueber den Rand
       hinaus, und die Kommune steht ohnehin schon in der Marke daneben. */
    .kontomenue__text { display: none; }
    .kontomenue__blatt {
        top: calc(100% + 6px); bottom: auto;
        left: auto; right: 0; width: min(260px, calc(100vw - 32px));
    }
    .inhalt { margin-left: 0; }
    .kopf { flex-wrap: wrap; }
    .kopf__text { flex: 1 1 200px; }
    .kopf, .rumpf { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------- Flaechen */

.karte {
    background: var(--fl-karte);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    box-shadow: var(--schatten-1);
}
.karte--flach { box-shadow: none; }
.karte__kopf {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--linie);
}
.karte__kopf h2, .karte__kopf h3 { margin: 0; }
/* ``.rechts`` schiebt eine Randnotiz an das rechte Ende einer Kopfzeile. Die
   Regel galt bisher nur in ``.karte__kopf``; in Dialogen fehlte sie, und die
   von app.js eingehängte Anzeige „Automatisches Speichern aktiv“ landete
   deshalb direkt hinter der Überschrift und überlappte sie. Beide Kopfzeilen
   sind Flex-Container, also wirkt dieselbe Regel. */
.karte__kopf .rechts,
.dialog__kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.karte__rumpf { padding: 20px; }
.karte__rumpf--eng { padding: 12px 20px; }

.raster { display: grid; gap: 18px; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* Vital Score: neutrales Maß statt einer pauschal grünen Browserampel. */
.vitalscore meter { width: 100%; height: 14px; accent-color: var(--akzent); }
.vitalscore meter::-webkit-meter-bar { background: var(--fl-gedimmt); border: 1px solid var(--linie); border-radius: var(--r-s); }
.vitalscore meter::-webkit-meter-optimum-value { background: var(--akzent); border-radius: var(--r-s); }
.vitalscore meter::-moz-meter-bar { background: var(--akzent); border-radius: var(--r-s); }
.vitalscore .karte__kopf { flex-wrap: wrap; }
.vitalscore details { overflow-wrap: anywhere; }
.vitalscore summary { cursor: pointer; min-height: 40px; }
.vitalscore__teile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .vitalscore__teile { grid-template-columns: 1fr; } }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.raster--detail { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); align-items: start; }
@media (max-width: 1100px) { .raster--detail { grid-template-columns: 1fr; } }

.stapel { display: flex; flex-direction: column; gap: 18px; }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.karte__kopf h2, .karte__rumpf { overflow-wrap: anywhere; min-width: 0; }
.aktionen .knopf, .karte__rumpf > .knopf { white-space: normal; text-align: center; overflow-wrap: anywhere; }
.reihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reihe--eng { gap: 6px; }
.schieber { margin-left: auto; }

/* ------------------------------------------------------------- Kennzahlen */

.kpi {
    background: var(--fl-karte);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    padding: 16px 18px;
    box-shadow: var(--schatten-1);
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.kpi__titel {
    font-size: 11.5px; font-weight: 550; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--txt-3);
}
.kpi__wert {
    font-size: 30px; font-weight: 600; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi__wert small { font-size: 15px; font-weight: 500; color: var(--txt-2); letter-spacing: 0; }
.kpi__fuss { font-size: 12px; color: var(--txt-2); }
.kpi--gruen .kpi__wert { color: var(--gruen); }
.kpi--orange .kpi__wert { color: var(--orange); }
.kpi--rot .kpi__wert { color: var(--rot); }

.balken { height: 5px; border-radius: 3px; background: rgba(120,120,128,0.18); overflow: hidden; margin-top: 7px; }
.balken > i { display: block; height: 100%; border-radius: 3px; background: var(--akzent); }
.balken--gruen > i { background: var(--gruen); }
.balken--orange > i { background: var(--orange); }
.balken--rot > i { background: var(--rot); }

/* ---------------------------------------------------------- Bedienelemente */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 15px;
    font: inherit; font-size: 13.5px; font-weight: 550;
    border-radius: 980px; border: 1px solid transparent;
    background: rgba(120, 120, 128, 0.14);
    color: var(--txt);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--zeit), transform var(--zeit), opacity var(--zeit);
    text-decoration: none;
}
.knopf:hover { background: rgba(120, 120, 128, 0.22); text-decoration: none; }
.knopf:active { transform: scale(0.975); }
.knopf--primaer { background: var(--akzent); color: #fff; }
.knopf--primaer:hover { background: color-mix(in srgb, var(--akzent) 88%, #000); }
.knopf--klar { background: transparent; border-color: var(--linie-stark); }
.knopf--klar:hover { background: rgba(120, 120, 128, 0.1); }
.knopf--gefahr { background: var(--rot-weich); color: var(--rot); }
.knopf--gefahr:hover { background: color-mix(in srgb, var(--rot) 22%, transparent); }
.knopf--klein { padding: 4px 11px; font-size: 12.5px; }
.knopf--breit { width: 100%; }
.knopf[disabled] { opacity: 0.45; pointer-events: none; }

.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld > label, .beschriftung {
    font-size: 12px; font-weight: 550; color: var(--txt-2); letter-spacing: 0.005em;
}
.feld__hinweis { font-size: 11.5px; color: var(--txt-3); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
    font: inherit; font-size: 13.5px;
    width: 100%;
    padding: 8px 11px;
    color: var(--txt);
    background: var(--fl-erhoben);
    border: 1px solid var(--linie-stark);
    border-radius: var(--r-s);
    transition: border-color var(--zeit), box-shadow var(--zeit);
    appearance: none;
}
@media (prefers-color-scheme: dark) {
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="date"], input[type="search"], input[type="tel"], input[type="url"],
    select, textarea { background: rgba(255,255,255,0.05); }
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3.5px var(--akzent-weich);
}
textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238e8e93' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 30px;
}
input::placeholder, textarea::placeholder { color: var(--txt-3); }

.suche { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.suche input { padding-left: 32px; border-radius: 980px; }
.suche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--txt-3); }

.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.schalter input { appearance: none; margin: 0; width: 38px; height: 22px; border-radius: 22px;
    background: rgba(120,120,128,0.3); position: relative; cursor: pointer; transition: background var(--zeit); flex: none; }
.schalter input::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform var(--zeit);
}
.schalter input:checked { background: var(--gruen); }
.schalter input:checked::after { transform: translateX(16px); }

.kasten { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; }
.kasten input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--akzent); margin: 0; }

/* -------------------------------------------------------------- Tabellen */

.tabelle-huelle { overflow-x: auto; border-radius: var(--r-l); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabelle th {
    text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--txt-3);
    padding: 9px 14px; border-bottom: 1px solid var(--linie);
    white-space: nowrap; position: sticky; top: 0; background: var(--fl-karte); z-index: 1;
}
table.tabelle th a { color: inherit; }
table.tabelle td { padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.tabelle tbody tr { transition: background var(--zeit); }
table.tabelle tbody tr:hover { background: rgba(120, 120, 128, 0.06); }
table.tabelle tbody tr:last-child td { border-bottom: none; }
table.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.tabelle .schmal { width: 1%; white-space: nowrap; }

/* --------------------------------------------------------------- Marken */

.marke {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 980px;
    font-size: 11.5px; font-weight: 550; white-space: nowrap;
    background: rgba(120, 120, 128, 0.14); color: var(--txt-2);
}
.marke--gruen { background: var(--gruen-weich); color: var(--gruen); }
.marke--orange { background: var(--orange-weich); color: var(--orange); }
.marke--rot { background: var(--rot-weich); color: var(--rot); }
.marke--blau { background: var(--akzent-weich); color: var(--akzent); }
.marke__punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.branche {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; white-space: nowrap;
}
.branche__punkt {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
/* Im Dunkelmodus braucht der Punkt einen hellen Ring – sonst verschwindet
   die fast schwarze Leerstandsfarbe #2F2F2F vollständig im Hintergrund. */
@media (prefers-color-scheme: dark) {
    .branche__punkt { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.38); }
}

.farbchip {
    display: inline-block; width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--linie-stark); flex: none;
}

/* -------------------------------------------------------------- Meldungen */

.meldungen { position: fixed; top: 16px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.meldung {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 15px;
    background: var(--fl-erhoben);
    border: 1px solid var(--linie);
    border-radius: var(--r-m);
    box-shadow: var(--schatten-3);
    font-size: 13.5px;
    animation: einblenden 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.meldung--erfolg { border-left: 3px solid var(--gruen); }
.meldung--fehler { border-left: 3px solid var(--rot); }
.meldung--warnung { border-left: 3px solid var(--orange); }
.meldung button { margin-left: auto; background: none; border: none; color: var(--txt-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }

.hinweis {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 13px 16px; border-radius: var(--r-m);
    background: var(--akzent-weich); color: var(--txt);
    font-size: 13.5px; line-height: 1.5;
}
.hinweis--warnung { background: var(--orange-weich); }
.hinweis--fehler { background: var(--rot-weich); }
.hinweis--gruen { background: var(--gruen-weich); }
.hinweis svg { flex: none; margin-top: 1px; }

.leer {
    padding: 52px 24px; text-align: center; color: var(--txt-2);
}
.leer h3 { margin-bottom: 5px; color: var(--txt); }
.leer p { font-size: 13.5px; max-width: 420px; margin: 0 auto 14px; }

/* --------------------------------------------------------- Definitionen */

.dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0; font-size: 13.5px; }
.dl > dt {
    padding: 8px 0; color: var(--txt-2); border-bottom: 1px solid var(--linie);
    font-size: 12.5px;
}
.dl > dd {
    padding: 8px 0; margin: 0; border-bottom: 1px solid var(--linie);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: none; }

/* ------------------------------------------------------------- Zeitstrahl */

.strahl { position: relative; padding-left: 24px; }
.strahl::before {
    content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 2px; background: var(--linie);
}
.strahl__punkt {
    position: relative; padding: 0 0 20px;
}
.strahl__punkt::before {
    content: ""; position: absolute; left: -22px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--fl-karte); border: 2.5px solid var(--txt-3);
}
.strahl__punkt--laufend::before { border-color: var(--akzent); background: var(--akzent); }
.strahl__punkt:last-child { padding-bottom: 0; }
.strahl__zeit { font-size: 11.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Bilder */

.ablage {
    border: 2px dashed var(--linie-stark);
    border-radius: var(--r-l);
    padding: 30px 20px;
    text-align: center;
    color: var(--txt-2);
    transition: all var(--zeit);
    cursor: pointer;
    background: var(--fl-gedimmt);
}
.ablage:hover { border-color: var(--akzent); color: var(--akzent); }
.ablage.zieht {
    border-color: var(--akzent); background: var(--akzent-weich); color: var(--akzent);
    transform: scale(1.008);
}
.ablage__titel { font-weight: 550; font-size: 14px; color: inherit; }
.ablage__unter { font-size: 12.5px; margin-top: 3px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.bild {
    position: relative; border-radius: var(--r-m); overflow: hidden;
    background: var(--fl-gedimmt); border: 1px solid var(--linie);
    aspect-ratio: 4 / 3; cursor: grab;
    transition: transform var(--zeit), box-shadow var(--zeit);
}
.bild:hover { box-shadow: var(--schatten-2); }
.bild.zieht-gerade { opacity: 0.4; }
.bild.ziel { outline: 2.5px solid var(--akzent); outline-offset: 1px; }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild--haupt { outline: 2.5px solid var(--akzent); outline-offset: -2.5px; }
.bild__leiste {
    position: absolute; inset: auto 0 0 0;
    display: flex; gap: 5px; align-items: center;
    padding: 22px 8px 7px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    opacity: 0; transition: opacity var(--zeit);
}
.bild:hover .bild__leiste, .bild:focus-within .bild__leiste { opacity: 1; }
.bild__knopf {
    border: none; border-radius: 6px; cursor: pointer;
    background: rgba(255, 255, 255, 0.9); color: #1d1d1f;
    font-size: 11px; font-weight: 600; padding: 3px 8px;
    display: inline-flex; align-items: center; gap: 4px;
}
.bild__knopf:hover { background: #fff; }
.bild__knopf--gefahr { background: rgba(255, 69, 58, 0.92); color: #fff; }
.bild__stern {
    position: absolute; top: 7px; left: 7px;
    background: var(--akzent); color: #fff;
    font-size: 10.5px; font-weight: 650;
    padding: 2px 8px; border-radius: 980px;
}
.bild__info {
    position: absolute; top: 7px; right: 7px;
    background: rgba(0,0,0,0.55); color: #fff;
    font-size: 10px; padding: 2px 6px; border-radius: 5px;
    opacity: 0; transition: opacity var(--zeit);
}
.bild:hover .bild__info { opacity: 1; }

.hauptfoto {
    width: 100%; border-radius: var(--r-l); overflow: hidden;
    background: var(--fl-gedimmt); border: 1px solid var(--linie);
    aspect-ratio: 4 / 3;
}
.hauptfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hauptfoto--leer { display: grid; place-items: center; color: var(--txt-3); font-size: 13px; }

.fortschritt { height: 3px; background: rgba(120,120,128,0.2); border-radius: 3px; overflow: hidden; }
.fortschritt > i { display: block; height: 100%; background: var(--akzent); width: 0; transition: width 0.2s linear; }

/* ------------------------------------------------------------------ Karte */

.karten-layout { display: flex; width: 100%; min-height: calc(100vh - 61px); }
.karten-seite {
    width: 296px; flex: none; overflow-y: auto;
    border-right: 1px solid var(--linie); background: var(--fl-karte);
    padding: 18px;
}
#leaflet { flex: 1; min-height: 400px; z-index: 1; }
@media (max-width: 900px) {
    .karten-layout { flex-direction: column; min-height: 0; }
    .karten-seite { width: auto; border-right: none; border-bottom: 1px solid var(--linie); max-height: 260px; }
    #leaflet { height: 65vh; }
}

.legende { display: flex; flex-direction: column; gap: 1px; }
.legende__zeile {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 7px; cursor: pointer;
    font-size: 12.5px; transition: background var(--zeit); user-select: none;
}
.legende__zeile:hover { background: rgba(120,120,128,0.1); }
.legende__zeile.aus { opacity: 0.35; }
.legende__zahl { margin-left: auto; color: var(--txt-3); font-variant-numeric: tabular-nums; font-size: 11.5px; }

.leaflet-popup-content-wrapper {
    border-radius: var(--r-m); box-shadow: var(--schatten-3);
    background: var(--fl-erhoben); color: var(--txt);
}
.leaflet-popup-tip { background: var(--fl-erhoben); }
.leaflet-popup-content { margin: 0; width: 250px !important; }
.leaflet-container { font: inherit; background: var(--fl-gedimmt); }
.kartenquelle-status {
    max-width: 290px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--warnung, #b35c00) 45%, var(--linie));
    border-radius: var(--r-k, 8px);
    background: color-mix(in srgb, var(--fl-erhoben) 94%, #fff3cd);
    color: var(--txt);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
    font-size: 12px;
    line-height: 1.35;
}
.kartenquelle-status[hidden] { display: none; }
.leaflet-bar a { background: var(--fl-erhoben); color: var(--txt); border-bottom-color: var(--linie); }
.leaflet-bar a:hover { background: var(--fl-gedimmt); }

.pop__bild { width: 100%; height: 124px; object-fit: cover; display: block; }
.pop__rumpf { padding: 11px 13px 13px; }
.pop__name { font-weight: 600; font-size: 14px; margin-bottom: 1px; }
.pop__adresse { font-size: 12px; color: var(--txt-2); margin-bottom: 8px; }
.pop__zeile { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 4px; }

/* Kartenpunkt. Belegt = Kreis, Leerstand = Raute – die Form trägt die
   Aussage mit, damit sie auch ohne Farbwahrnehmung ankommt. */
.punkt {
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.12s ease;
}
.punkt--leer {
    border-radius: 2px;
    transform: rotate(45deg);
    border-width: 2.2px;
}
.leaflet-marker-icon:hover .punkt { transform: scale(1.35); }
.leaflet-marker-icon:hover .punkt--leer { transform: rotate(45deg) scale(1.35); }

/* ----------------------------------------------------------------- Chart */

.verlauf { width: 100%; height: 180px; display: block; }
.saeulen { display: flex; align-items: flex-end; gap: 4px; height: 130px; }
.saeule { flex: 1; border-radius: 4px 4px 0 0; min-height: 3px; position: relative; transition: opacity var(--zeit); }
.saeule:hover { opacity: 0.75; }

.streifen { display: flex; height: 10px; border-radius: 980px; overflow: hidden; }
.streifen > span { display: block; height: 100%; }

/* ------------------------------------------------------------- Sonstiges */

.reiter { display: flex; gap: 2px; padding: 3px; background: rgba(120,120,128,0.12); border-radius: 10px; }
.reiter a {
    padding: 5px 13px; border-radius: 8px; font-size: 13px; font-weight: 500;
    color: var(--txt-2); text-decoration: none; transition: all var(--zeit);
}
.reiter a:hover { color: var(--txt); text-decoration: none; }
.reiter a.aktiv { background: var(--fl-karte); color: var(--txt); box-shadow: var(--schatten-1); font-weight: 550; }

details.falter { border-top: 1px solid var(--linie); }
details.falter > summary {
    padding: 11px 0; cursor: pointer; font-size: 13.5px; font-weight: 550;
    list-style: none; display: flex; align-items: center; gap: 8px;
}
details.falter > summary::-webkit-details-marker { display: none; }
details.falter > summary::before {
    content: "›"; font-size: 17px; color: var(--txt-3); transition: transform var(--zeit);
    display: inline-block; width: 12px;
}
details.falter[open] > summary::before { transform: rotate(90deg); }
details.falter > div { padding-bottom: 16px; }

.dialog {
    position: fixed; inset: 0; z-index: 300;
    display: none; place-items: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    padding: 20px;
}
.dialog.offen { display: grid; }
.dialog__kasten {
    background: var(--fl-erhoben); border-radius: var(--r-xl);
    box-shadow: var(--schatten-3); width: min(620px, 100%);
    max-height: 88vh; overflow-y: auto;
    animation: hoch 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.dialog__kasten--breit { width: min(920px, 100%); }
@keyframes hoch { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.dialog__kopf { padding: 18px 22px 0; display: flex; align-items: center; }
.dialog__rumpf { padding: 16px 22px; }
.dialog__fuss { padding: 12px 22px 20px; display: flex; gap: 8px; justify-content: flex-end; }

.lupe { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.9); display: none; place-items: center; padding: 24px; }
.lupe.offen { display: grid; }
.lupe img { max-width: 100%; max-height: 92vh; border-radius: var(--r-m); }

.trenner { height: 1px; background: var(--linie); border: none; margin: 18px 0; }

.klein { font-size: 12.5px; color: var(--txt-2); }
.mini { font-size: 11.5px; color: var(--txt-3); }
.zahlen { font-variant-numeric: tabular-nums; }
.gedimmt { color: var(--txt-3); }
.stark { font-weight: 600; }
.nowrap { white-space: nowrap; }
.rechtsbuendig { text-align: right; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.nur-lesen { pointer-events: none; opacity: 0.55; }

@media print {
    .nav, .kopf__aktionen, .knopf, .meldungen { display: none !important; }
    .inhalt { margin: 0; }
    body { background: #fff; }
    .karte { box-shadow: none; break-inside: avoid; }
}

/* ------------------------------------------------------------ Symbolwahl */

.symwahl {
    border: 1px solid var(--linie-stark);
    border-radius: var(--r-s);
    background: var(--fl-erhoben);
    overflow: hidden;
}
@media (prefers-color-scheme: dark) { .symwahl { background: rgba(255,255,255,0.05); } }

.symwahl__kopf { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; }
.symwahl__aktuell {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    background: var(--akzent-weich); color: var(--akzent);
}

.symwahl__raster {
    display: none;
    border-top: 1px solid var(--linie);
    padding: 8px 10px 12px;
    max-height: 232px; overflow-y: auto;
}
.symwahl.offen .symwahl__raster { display: block; }

.symwahl__gruppe {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--txt-3);
    padding: 10px 0 5px;
}
.symwahl__zeile { display: flex; flex-wrap: wrap; gap: 4px; }

.symwahl__knopf {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid transparent; border-radius: 8px;
    background: rgba(120, 120, 128, 0.1);
    color: var(--txt); cursor: pointer;
    transition: background var(--zeit), transform var(--zeit);
}
.symwahl__knopf:hover { background: rgba(120, 120, 128, 0.22); }
.symwahl__knopf:active { transform: scale(0.94); }
.symwahl__knopf.gewaehlt {
    background: var(--akzent); color: #fff; border-color: var(--akzent);
}
.symwahl__knopf--breit { width: auto; padding: 0 11px; }
.symwahl__knopf--breit .mini { color: inherit; }

/* Farbiger Punkt mit Symbol – Listen, Kopfzeilen, Legende */
.sympunkt {
    display: inline-grid; place-items: center; flex: none;
    border-radius: 50%; color: #fff;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: dark) {
    .sympunkt { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
}
.sympunkt--leer { border-radius: 5px; }

/* Kartenpunkt mit Symbol: gleiche Sprache wie .punkt, nur größer */
.punkt--symbol {
    display: grid; place-items: center; color: #fff;
    border-width: 2px;
}
/* Ohne das fängt die Markerfüllung den Klick ab und das Popup öffnet nicht.
   Leaflet hört auf dem umgebenden .leaflet-marker-icon; alles darin muss
   deshalb durchlässig sein. Der Hover-Effekt kommt vom Elternteil und
   funktioniert weiter. */
.leaflet-marker-icon .punkt, .leaflet-marker-icon .punkt > svg {
    pointer-events: none;
}
.punkt--symbol.punkt--leer > svg { transform: rotate(-45deg); }

/* Legende: zeigt Farbpunkt oder Symbolpunkt, je nach Kartenmodus */
.legende__symbol { display: none; }
.legende--symbole .legende__symbol { display: inline-grid; }
.legende--symbole .branche__punkt { display: none; }

/* ------------------------------------------------ Veranstaltungskalender */
.kalender { overflow: hidden; user-select: none; }
.kalender__kopf, .kalender__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender__kopf { border-bottom: 1px solid var(--linie); background: var(--fl-gedimmt); }
.kalender__kopf > div { padding: 9px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--txt-2); }
.kalender__tag { min-height: 126px; padding: 7px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--fl-karte); cursor: pointer; overflow: hidden; transition: background var(--zeit), box-shadow var(--zeit); }
.kalender__tag:nth-child(7n) { border-right: none; }
.kalender__tag:hover { background: var(--akzent-weich); }
.kalender__tag--fremd { background: var(--fl-gedimmt); color: var(--txt-3); }
.kalender__tag--heute .kalender__nummer { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border-radius: 13px; background: var(--akzent); color: #fff; }
.kalender__tag--auswahl { background: var(--akzent-weich); box-shadow: inset 0 0 0 2px var(--akzent); }
.kalender__nummer { font-size: 12px; font-weight: 600; }
.kalender__events { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.kalender__event { display: block; padding: 3px 6px; border-radius: 5px; background: var(--akzent-weich); color: var(--akzent); font-size: 11px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender__event--bestaetigt { background: var(--gruen-weich); color: var(--gruen); }
.kalender__event--abgesagt { background: var(--rot-weich); color: var(--rot); text-decoration: line-through; }
.kalender__event--abgeschlossen { background: rgba(120,120,128,.12); color: var(--txt-2); }
.feld--breit { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .kalender__tag { min-height: 82px; padding: 4px; }
  .kalender__event { font-size: 9.5px; padding: 2px 3px; }
}


/* --- Kontomenü im Fuß der Navigation --------------------------------------
   Ersetzt den früheren Block aus Kommunenwechsler, Kontozeile und
   Abmeldeknopf: rund 200 px, die auf jeder Seite standen, für zwei Wege, die
   man selten geht. Dauerhaft sichtbar ist nur noch eine Zeile mit Name und
   Kommune; Wechseln, Konto und Abmelden liegen im Blatt darüber. Die
   gewonnene Höhe geht an den Menübaum.

   Das Blatt klappt nach **oben** auf, weil der Auslöser ganz unten sitzt.
   ``.nav`` hat ``overflow:hidden`` – das Blatt bleibt deshalb innerhalb der
   Leistenbreite und darf nicht höher werden als die Leiste. */
.kontomenue { position: relative; }
.kontomenue__knopf {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-s);
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--zeit);
}
.kontomenue__knopf::-webkit-details-marker { display: none; }
.kontomenue__knopf::marker { content: ""; }
.kontomenue__knopf:hover { background: rgba(120, 120, 128, 0.12); }
.kontomenue[open] > .kontomenue__knopf { background: rgba(120, 120, 128, 0.14); }
.kontomenue__text { min-width: 0; display: flex; flex-direction: column; }
/* Beide Zeilen kürzen statt umbrechen: Ein langer Kontoname wie
   „Administration Innenstadtmonitoring“ machte die Zeile sonst dreizeilig –
   der ganze Fuß wäre wieder so hoch wie vorher. Der volle Name steht im
   ``title`` des Knopfes. */
.kontomenue__name {
  font-size: 12.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kontomenue__ort {
  font-size: 11px; color: var(--txt-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kontomenue__pfeil { margin-left: auto; flex: none; opacity: 0.7; transition: transform var(--zeit); }
.kontomenue[open] .kontomenue__pfeil { transform: rotate(180deg); }

.kontomenue__blatt {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--fl-karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  box-shadow: var(--schatten-3);
  z-index: 60;
}
.kontomenue__titel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt-3); padding: 4px 8px 4px;
}
.kontomenue__eintrag {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--txt); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; text-decoration: none;
}
a.kontomenue__eintrag:hover, button.kontomenue__eintrag:hover {
  background: rgba(120, 120, 128, 0.12); text-decoration: none;
}
.kontomenue__eintrag svg { flex: none; opacity: 0.8; }
/* Im Blatt wird gekuerzt, nicht umgebrochen: Ein langer Kommunenname neben
   dem Zusatz „anmelden“ machte die Zeile sonst zweizeilig und die Liste
   unruhig. Der volle Name steht im ``title`` des Knopfes. */
.kontomenue__eintrag .nav__text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal;
}
.kontomenue__hinweis { flex: none; }
.kontomenue__eintrag--aktiv {
  background: rgba(120, 120, 128, 0.14); font-weight: 550; cursor: default;
}
.kontomenue__eintrag--aktiv svg:last-child { margin-left: auto; color: var(--gruen); opacity: 1; }
.kontomenue__hinweis { margin-left: auto; font-size: 10.5px; color: var(--txt-3); }
.kontomenue__linie { height: 1px; background: var(--linie); margin: 5px 4px; }

/* --- Dashboards -----------------------------------------------------------
   Diagramme werden serverseitig als SVG gezeichnet; hier steht nur, was
   drumherum gehört. Alle Farben kommen aus den vorhandenen Variablen, damit
   Hell- und Dunkelmodus ohne Sonderregeln funktionieren. */

.diagramm__achse {
    display: flex; gap: 2px; font-size: 10.5px; color: var(--txt-3);
    padding-top: 4px; overflow: hidden;
}
.diagramm__legende {
    display: flex; align-items: center; gap: 14px; padding-top: 8px;
    font-size: 11.5px; color: var(--txt-2); flex-wrap: wrap;
}
.diagramm__legende i {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    margin-right: 6px; vertical-align: -1px;
}

/* Waagerechte Balkenliste – für Ranglisten, wo die Beschriftung lang ist */
.balkenliste { display: flex; flex-direction: column; gap: 7px; }
.balkenliste__zeile { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.balkenliste__name {
    flex: 0 0 32%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.balkenliste__spur {
    flex: 1; height: 9px; border-radius: 5px;
    background: rgba(120, 120, 128, 0.16); overflow: hidden;
}
.balkenliste__balken { display: block; height: 100%; border-radius: 5px; }
.balkenliste__wert { flex: 0 0 68px; text-align: right; color: var(--txt-2); }

/* Gestapelter Anteilsbalken – Branchenmix auf einen Blick */
.stapelbalken {
    display: flex; width: 100%; border-radius: 5px; overflow: hidden;
    background: rgba(120, 120, 128, 0.16);
}
.stapelbalken > span { display: block; height: 100%; }

/* Heatmap Wochentag × Stunde */
.heatmap { display: flex; flex-direction: column; gap: 3px; }
.heatmap__kopf, .heatmap__zeile { display: flex; gap: 3px; align-items: center; }
.heatmap__kopf { font-size: 10px; color: var(--txt-3); }
.heatmap__ecke, .heatmap__tag {
    flex: 0 0 30px; font-size: 11px; color: var(--txt-3); text-align: right;
    padding-right: 4px;
}
.heatmap__kopf > span:not(.heatmap__ecke) { flex: 1; text-align: center; }
.heatmap__zelle {
    flex: 1; height: 17px; border-radius: 2px; background: var(--akzent);
}
.heatmap__skala {
    display: inline-block; width: 90px; height: 9px; border-radius: 5px;
    background: linear-gradient(to right,
        rgba(120,120,128,0.10), var(--akzent));
}

/* Trichter – von „steht leer“ bis „wird bearbeitet“ */
.trichter { display: flex; flex-direction: column; gap: 8px; }
.trichter__stufe { display: flex; align-items: center; gap: 12px; }
.trichter__spur {
    flex: 1; position: relative; height: 30px; border-radius: var(--r-s);
    background: rgba(120, 120, 128, 0.14); overflow: hidden;
}
.trichter__fuellung {
    position: absolute; inset: 0 auto 0 0; background: var(--akzent);
    opacity: 0.22;
}
.trichter__text {
    position: relative; display: flex; align-items: center; height: 100%;
    padding-left: 12px; font-size: 13px;
}
.trichter__wert { flex: 0 0 84px; text-align: right; font-weight: 600; }
.trichter__wert em { display: block; font-style: normal; font-weight: 400; }

/* Trendangabe neben einer Kennzahl */
.trend { font-size: 12.5px; font-weight: 600; }
.trend--gut { color: var(--gruen); }
.trend--schlecht { color: var(--rot); }
.trend--neutral { color: var(--txt-3); }

/* Kachelgitter der Bereichsübersicht */
.blattkachel {
    display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
    background: var(--fl-karte); border: 1px solid var(--linie);
    border-radius: var(--r-l); box-shadow: var(--schatten-1);
    color: inherit; text-decoration: none;
}
.blattkachel:hover { border-color: var(--akzent); text-decoration: none; }
.blattkachel__kopf { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.blattkachel__fragen { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--txt-2); }
.blattkachel__fragen li { margin-bottom: 2px; }
.blattkachel--gesperrt { opacity: 0.55; }

/* ------------------------------------------------------ Modulübersicht

   Dichter als ``.blattkachel``: Dort stehen sechs Blätter mit je vier Fragen,
   hier rund vierzig Module mit je einem Satz. Eine Kachel ist deshalb eine
   Zeile hoch und lebt vom Symbol links, nicht von der Fläche. */

.modulgruppe { display: flex; flex-direction: column; gap: 12px; }
.modulgruppe__kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.modulgruppe__kopf h2 { font-size: 17px; }

.modulraster {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.modulkachel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    background: var(--fl-karte);
    border: 1px solid var(--linie);
    border-radius: var(--r-m);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--zeit), box-shadow var(--zeit), transform var(--zeit);
}
a.modulkachel:hover {
    border-color: var(--akzent);
    box-shadow: var(--schatten-2);
    text-decoration: none;
}
a.modulkachel:active { transform: scale(0.995); }
.modulkachel__symbol {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--akzent-weich); color: var(--akzent);
}
.modulkachel__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modulkachel__titel { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.modulkachel__kurz { font-size: 12.5px; color: var(--txt-2); line-height: 1.45; overflow-wrap: anywhere; }
.modulkachel__unter { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.modulkachel__marke {
    font-size: 11px; color: var(--txt-3);
    padding: 1px 8px; border-radius: 999px;
    background: rgba(120, 120, 128, 0.14);
}
.modulkachel--gesperrt { opacity: 0.6; }
.modulkachel--gesperrt .modulkachel__symbol { background: rgba(120, 120, 128, 0.16); color: var(--txt-3); }

/* ``[hidden]`` verliert sonst gegen das ``display:flex`` der Kachel – genau
   die Falle, die schon einmal beim Vor-Ort-Modus zugeschnappt ist. */
.modulkachel[hidden], .modulgruppe[hidden], #modul-ohne-treffer[hidden] { display: none !important; }

/* Das Suchfeld ist das vorhandene ``.suche`` aus der Objektliste, nur mit
   der Tastenmarke rechts. Kein eigenes Feld: Ein zweites Suchfeld, das ein
   bisschen anders aussieht als das erste, ist genau die Art Unordnung, die
   dieser Umbau beseitigen soll.

   Die Marke braucht ``.suche input`` als Grundlage – die allgemeine Regel
   für ``input[type=search]`` ist spezifischer als eine bloße Klasse und
   gewänne sonst gegen jede eigene Polsterung. */
.suche--taste input { padding-right: 32px; }
.suche__taste {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-family: inherit; font-size: 11px; line-height: 17px; color: var(--txt-3);
    padding: 0 5px; border: 1px solid var(--linie-stark); border-radius: 5px;
    pointer-events: none; transition: opacity var(--zeit);
}
.suche--taste input:focus ~ .suche__taste { opacity: 0; }

.modulgesperrt > .modulgesperrt__kopf { cursor: pointer; list-style: none; }
.modulgesperrt > .modulgesperrt__kopf::-webkit-details-marker { display: none; }
.modulgesperrt:not([open]) > .modulgesperrt__kopf { border-bottom: none; }

/* Reiterleiste zwischen den Dashboards */
.blattreiter { display: flex; gap: 6px; flex-wrap: wrap; }
.blattreiter a {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border-radius: 999px; border: 1px solid var(--linie); font-size: 13px;
    color: var(--txt-2); text-decoration: none; background: var(--fl-karte);
}
.blattreiter a:hover { border-color: var(--akzent); text-decoration: none; }
.blattreiter a.aktiv {
    background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 550;
}

/* ------------------------------------------------ Klassifikationsbaum
   Kategorien sind aufklappbare Knoten, die tatsächlich auswählbaren
   Branchen die Blätter. Die Einrückung kommt aus --taxonomie-tiefe und
   funktioniert deshalb auch für weitere, heute noch unbekannte Ebenen. */
.taxonomie { border-top: 1px solid var(--linie); }
.taxonomie__kopf { flex-wrap: wrap; gap: 8px; }
.taxonomie__spalten {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 86px 72px minmax(280px, auto);
    gap: 10px; align-items: center;
    padding: 8px 14px;
    color: var(--txt-3); background: var(--fl-gedimmt);
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; border-bottom: 1px solid var(--linie);
}
.taxonomie__spalten span:nth-child(2),
.taxonomie__spalten span:nth-child(3) { text-align: center; }
.taxonomie__spalten span:last-child { text-align: right; }
.taxonomie__knoten { margin: 0; }
.taxonomie__knoten > summary { list-style: none; }
.taxonomie__knoten > summary::-webkit-details-marker { display: none; }
.taxonomie__zeile,
.taxonomie__blatt {
    min-height: 54px;
    display: grid;
    grid-template-columns: 16px 30px minmax(180px, 1fr) auto 64px minmax(280px, auto);
    gap: 10px; align-items: center;
    padding: 8px 14px 8px calc(14px + var(--taxonomie-tiefe, 0) * 26px);
    border-bottom: 1px solid var(--linie);
}
.taxonomie__zeile {
    cursor: pointer; user-select: none;
    background: var(--fl-karte);
    transition: background var(--zeit);
}
.taxonomie__zeile:hover { background: var(--akzent-weich); }
.taxonomie__knoten[open] > .taxonomie__zeile {
    background: var(--fl-gedimmt);
}
.taxonomie__knoten[style*="--taxonomie-tiefe:0"] > .taxonomie__zeile .taxonomie__bezeichnung strong {
    font-size: 14px;
}
.taxonomie__pfeil {
    width: 9px; height: 9px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg); transform-origin: center;
    color: var(--txt-3); transition: transform var(--zeit);
}
.taxonomie__knoten[open] > .taxonomie__zeile > .taxonomie__pfeil {
    transform: rotate(45deg);
}
.taxonomie__bezeichnung { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.taxonomie__bezeichnung strong { overflow-wrap: anywhere; }
.taxonomie__aktionen {
    display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap;
}
.taxonomie__aktionen .knopf { white-space: nowrap; }
.taxonomie__nutzungen {
    justify-self: center; min-width: 30px; padding: 3px 7px;
    border-radius: 999px; text-align: center;
    background: rgba(120,120,128,.12); color: var(--txt-2);
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.taxonomie__blatt {
    position: relative; background: color-mix(in srgb, var(--fl-karte) 94%, var(--akzent) 6%);
}
.taxonomie__linie {
    align-self: stretch; width: 10px; min-height: 22px;
    margin-top: -8px; border-left: 1px solid var(--linie-stark);
    border-bottom: 1px solid var(--linie-stark);
}
.taxonomie__knoten--inaktiv > .taxonomie__zeile,
.taxonomie__blatt--inaktiv { opacity: .62; }
.taxonomie__leer {
    min-height: 48px; display: flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px calc(60px + var(--taxonomie-tiefe, 0) * 26px);
    border-bottom: 1px solid var(--linie); color: var(--txt-3); font-size: 12.5px;
}

@media (max-width: 1180px) {
    .taxonomie__spalten { display: none; }
    .taxonomie__zeile,
    .taxonomie__blatt {
        grid-template-columns: 16px 30px minmax(150px, 1fr) auto 50px;
    }
    .taxonomie__aktionen {
        grid-column: 3 / -1; justify-content: flex-start;
    }
    .taxonomie__blatt > .knopf:last-child { grid-column: 3 / -1; justify-self: start; }
}
@media (max-width: 760px) {
    .taxonomie__zeile,
    .taxonomie__blatt {
        grid-template-columns: 14px 28px minmax(120px, 1fr) auto;
        padding-left: calc(8px + var(--taxonomie-tiefe, 0) * 16px);
        gap: 7px;
    }
    .taxonomie__nutzungen { grid-column: 3; justify-self: start; }
    .taxonomie__aktionen { grid-column: 3 / -1; }
    .taxonomie__blatt > .marke { grid-column: 3; justify-self: start; }
}

@media print {
    .nav, .blattreiter, .kopf__aktionen { display: none !important; }
    .karte { break-inside: avoid; }
}

/* =========================================================================
   Stadtausstattung – Zustandsnoten
   Die Sternewahl ist bewusst gross: Sie wird im Stehen, mit dem Daumen und
   oft mit Handschuh bedient. 44 px ist das kleinste Ziel, das dabei noch
   zuverlaessig getroffen wird.
   ========================================================================= */

.sterne { display: inline-flex; gap: 2px; }
.sterne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne label {
    width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
    border-radius: var(--r-m); color: var(--txt-3); transition: color var(--zeit), background var(--zeit);
}
.sterne label:hover { background: rgba(120, 120, 128, 0.12); }
.sterne input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: -2px; }
.sterne.gewaehlt-1 label:nth-of-type(-n+1),
.sterne.gewaehlt-2 label:nth-of-type(-n+2),
.sterne.gewaehlt-3 label:nth-of-type(-n+3),
.sterne.gewaehlt-4 label:nth-of-type(-n+4),
.sterne.gewaehlt-5 label:nth-of-type(-n+5) { color: var(--orange); }
.sterne svg { width: 30px; height: 30px; }
.sterne__anker { font-size: 12.5px; color: var(--txt-2); min-height: 18px; }

/* Note als Chip. Die Farbe folgt der Skala und nicht dem Geschmack:
   1 und 2 sind Handlungsbedarf, 3 ist Beobachtung, 4 und 5 sind in Ordnung. */
.note {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border-radius: 980px; font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.note--1, .note--2 { background: var(--rot-weich); color: var(--rot); }
.note--3 { background: var(--orange-weich); color: var(--orange); }
.note--4, .note--5 { background: var(--gruen-weich); color: var(--gruen); }
.note--offen { background: rgba(120, 120, 128, 0.14); color: var(--txt-2); }

.zustandsreihe { display: grid; gap: 8px; }
.zustandsreihe__zeile { display: grid; grid-template-columns: 92px 1fr 46px; gap: 10px; align-items: center; }
.zustandsreihe__balken { height: 10px; border-radius: 980px; background: rgba(120,120,128,0.16); overflow: hidden; }
.zustandsreihe__balken > i { display: block; height: 100%; border-radius: 980px; }

/* Dateifeld hinter einem eigenen Knopf. Der Systemknopf eines nackten
   <input type="file"> laesst sich nicht beschriften – er heisst je nach
   Geraet und Sprache „Choose Files“ und verraet nicht, dass dahinter die
   Kamera steckt. Das Feld bleibt fuer Tastatur und Screenreader erreichbar,
   weil das Label es anspricht; nur sichtbar ist es nicht. */
.feld__datei {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.feld__datei:focus-visible + label,
label:has(+ .feld__datei:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }


/* Ein Element mit ``hidden`` muss verschwinden – auch dann, wenn seine eigene
   Klasse eine Anzeigeart setzt. `.knopf` bringt `display:inline-flex` mit und
   gewinnt sonst gegen die Vorgabe des Browsers; ein „hidden“ gesetzter Knopf
   blieb dadurch sichtbar. Aufgefallen am Knopf „Weiter im Umkreis suchen“ im
   Vor-Ort-Modus, betrifft aber jede Stelle mit hidden. */
[hidden] { display: none !important; }