/* propdata – eckig, ruhig, Navy/Hellblau. Schriftgrößen über Stufen. */
:root {
    --navy: #16325c;
    --navy-2: #1f4a85;
    --blau: #2f6fd6;
    --hellblau: #e8f1fd;
    --hellblau-2: #d4e5fb;
    --linie: #d9dee6;
    --linie-2: #c3cad5;
    --grund: #f3f5f8;
    --flaeche: #ffffff;
    --text: #1d2633;
    --text-2: #5b6778;
    --text-3: #8a95a5;
    --gruen: #1f8a4c;
    --gruen-h: #e5f5ec;
    --rot: #c0392b;
    --rot-h: #fbe9e7;
    --gelb: #b7791f;
    --gelb-h: #fdf3e1;
    --fs-xs: 11px;
    --fs-s: 12.5px;
    --fs-m: 13.5px;
    --fs-l: 15px;
    --fs-xl: 18px;
    --fs-xxl: 24px;
    --fs-kpi: 22px;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html, body { height: 100%; margin: 0; }
body { font: var(--fs-m)/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text); background: var(--grund); }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: none; color: var(--navy-2); }
i[data-icon] { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
i[data-icon] svg { width: 100%; height: 100%; }

/* Rahmen: Kopf – scrollender Inhalt – Fuß */
.shell { display: flex; flex-direction: column; height: 100vh; }
.kopf { flex: none; display: flex; align-items: center; gap: 28px; height: 52px; padding: 0 20px;
    background: linear-gradient(100deg, #12294d 0%, #1b3f73 60%, #23508f 100%); color: #fff; }
.marke { display: flex; align-items: center; gap: 9px; color: #fff; font-size: var(--fs-l); font-weight: 600; letter-spacing: .3px; }
.marke:hover { color: #fff; }
.marke__zeichen { width: 18px; height: 18px; background:
    linear-gradient(#7fb3ff, #7fb3ff) 0 100% / 4px 9px no-repeat,
    linear-gradient(#fff, #fff) 7px 100% / 4px 14px no-repeat,
    linear-gradient(#7fb3ff, #7fb3ff) 14px 100% / 4px 18px no-repeat; }
.hauptnav { display: flex; height: 100%; }
.hauptnav a { display: flex; align-items: center; gap: 7px; padding: 0 16px; color: #c9d8ef; border-bottom: 3px solid transparent; font-size: var(--fs-m); }
.hauptnav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.hauptnav a.ist-aktiv { color: #fff; border-bottom-color: #7fb3ff; background: rgba(255,255,255,.08); }
.kopf__rechts > * { display: inline-flex; align-items: center; gap: 6px; }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: var(--fs-s); color: #c9d8ef; }
.hauptnav { flex: 1; min-width: 0; }
.hauptnav .nav--rechts { margin-left: auto; }
.kopf__link { color: #c9d8ef; }
.kopf__link:hover { color: #fff; }
.worker-status { padding: 2px 8px; border: 1px solid rgba(255,255,255,.25); }
.worker-status.ist-an { color: #9be7b8; border-color: #4caf7a; }
.worker-status.ist-aus { color: #ffb4a8; border-color: #e0715f; }
.inhalt { flex: 1 1 auto; overflow: auto; padding: 18px 20px 24px; }
.fuss { flex: none; display: flex; justify-content: space-between; gap: 20px; padding: 7px 20px; font-size: var(--fs-xs); color: var(--text-3);
    background: var(--flaeche); border-top: 1px solid var(--linie); }

/* Seitenkopf und Abschnitte */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.seitenkopf h1 { margin: 0; font-size: var(--fs-xxl); font-weight: 400; color: var(--navy); }
.seitenkopf p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-s); }
.abschnitt { background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 16px; }
.abschnitt__kopf { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--hellblau); border-top: 3px solid var(--blau);
    border-bottom: 1px solid var(--hellblau-2); font-size: var(--fs-l); color: var(--navy); }
.abschnitt__kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: var(--fs-s); }
.abschnitt__inhalt { padding: 14px; }
.abschnitt__inhalt--eng { padding: 0; }
.raster { display: grid; gap: 16px; }
.raster--2 { grid-template-columns: 1fr 1fr; }
.raster--3-1 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1200px) { .raster--2, .raster--3-1 { grid-template-columns: 1fr; } }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--linie-2); background: #fff;
    color: var(--text); font: inherit; font-size: var(--fs-s); cursor: pointer; white-space: nowrap; }
.knopf:hover { border-color: var(--blau); color: var(--navy-2); }
.knopf--primaer { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.knopf--primaer:hover { background: var(--navy); color: #fff; }
.knopf--gefahr { color: var(--rot); }
.knopf--gefahr:hover { border-color: var(--rot); color: var(--rot); }
.knopf--klein { height: 26px; padding: 0 8px; }
.knopf--breit { width: 100%; justify-content: center; height: 36px; }
.knopf--nur-icon { padding: 0 7px; }
.knopf[disabled] { opacity: .5; pointer-events: none; }

/* Felder */
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.feld__label { font-size: var(--fs-s); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.feld__hilfe { font-size: var(--fs-xs); color: var(--text-3); }
.input { height: 32px; padding: 0 9px; border: 1px solid var(--linie-2); background: #fff; font: inherit; font-size: var(--fs-m); color: var(--text); width: 100%; }
.input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px var(--hellblau-2); }
textarea.input { height: auto; padding: 7px 9px; }
.zeile { display: flex; gap: 10px; align-items: flex-end; }
.zeile > * { flex: 1; }
.von-bis { display: flex; gap: 6px; align-items: center; }
.von-bis .input { width: 50%; }
.von-bis span { color: var(--text-3); }

/* Segment-Knöpfe und Chips (immer mit Icon) */
.segment { display: inline-flex; border: 1px solid var(--linie-2); background: #fff; }
.segment button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-right: 1px solid var(--linie);
    background: none; font: inherit; font-size: var(--fs-s); color: var(--text-2); cursor: pointer; }
.segment button:last-child { border-right: 0; }
.segment button:hover { color: var(--navy-2); background: var(--grund); }
.segment button.ist-an { background: var(--hellblau); color: var(--navy); box-shadow: inset 0 -2px 0 var(--blau); }
.segment--breit { display: flex; }
.segment--breit button { flex: 1; justify-content: center; padding: 0 6px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--linie-2); background: #fff;
    font: inherit; font-size: var(--fs-s); color: var(--text-2); cursor: pointer; }
.chip:hover { border-color: var(--blau); }
.chip.ist-an { background: var(--hellblau); border-color: var(--blau); color: var(--navy); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; font-size: var(--fs-s); border: 1px solid var(--linie-2); color: var(--text-2);
    background: #fff; white-space: nowrap; line-height: 1.5; }
.badge--gruen { color: var(--gruen); border-color: #9fd6b5; background: var(--gruen-h); }
.badge--rot { color: var(--rot); border-color: #efb3aa; background: var(--rot-h); }
.badge--gelb { color: var(--gelb); border-color: #ecd09a; background: var(--gelb-h); }
.badge--blau { color: var(--navy-2); border-color: var(--hellblau-2); background: var(--hellblau); }

/* Schalter */
.schalter { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-m); user-select: none; }
.schalter input { display: none; }
.schalter__bahn { width: 36px; height: 20px; background: var(--linie-2); position: relative; transition: background .15s; flex: none; }
.schalter__bahn::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; transition: left .15s; }
.schalter input:checked + .schalter__bahn { background: var(--gruen); }
.schalter input:checked + .schalter__bahn::after { left: 18px; }

/* Slider mit −/+ */
.regler { display: flex; align-items: center; gap: 8px; }
.regler .input { width: 80px; flex: none; text-align: right; }
.regler input[type=range] { flex: 1; accent-color: var(--blau); }
.regler .knopf { width: 30px; justify-content: center; padding: 0; flex: none; }

/* Info-Icon inline */
.info { display: inline-flex; width: 14px; height: 14px; color: var(--blau); cursor: help; vertical-align: -2px; }

/* Eigene Aufklapp-Auswahl */
.auswahl { position: relative; }
.auswahl__feld { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 28px 3px 8px; border: 1px solid var(--linie-2); background: #fff;
    cursor: pointer; flex-wrap: wrap; position: relative; font-size: var(--fs-m); }
.auswahl__feld::after { content: ""; position: absolute; right: 10px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top-color: var(--text-2); border-bottom: 0; }
.auswahl.ist-offen .auswahl__feld { border-color: var(--blau); box-shadow: 0 0 0 2px var(--hellblau-2); }
.auswahl__platzhalter { color: var(--text-3); }
.auswahl__tag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--hellblau); color: var(--navy); font-size: var(--fs-s); border: 1px solid var(--hellblau-2); }
.auswahl__tag b { font-weight: 400; cursor: pointer; color: var(--text-2); }
.auswahl__liste { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 2px); background: #fff; border: 1px solid var(--linie-2);
    box-shadow: 0 6px 18px rgba(16, 37, 70, .15); display: none; }
.auswahl.ist-offen .auswahl__liste { display: block; }
.auswahl__suche { padding: 6px; border-bottom: 1px solid var(--linie); }
.auswahl__suche input { width: 100%; height: 28px; border: 1px solid var(--linie-2); padding: 0 7px; font: inherit; font-size: var(--fs-s); }
.auswahl__optionen { max-height: 260px; overflow: auto; }
.auswahl__option { padding: 6px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-s); }
.auswahl__option:hover { background: var(--grund); }
.auswahl__option.ist-an { background: var(--hellblau); color: var(--navy); }
.auswahl__option small { color: var(--text-3); }

/* Karten (Cards) */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.karte { background: #fff; border: 1px solid var(--linie); border-top: 3px solid var(--navy-2); display: flex; flex-direction: column; cursor: pointer; }
.karte:hover { border-color: var(--linie-2); border-top-color: var(--blau); box-shadow: 0 3px 12px rgba(16, 37, 70, .08); }
.karte.ist-pausiert { border-top-color: var(--linie-2); }
.karte__kopf { padding: 11px 14px 6px; display: flex; gap: 10px; align-items: flex-start; }
.karte__titel { font-size: var(--fs-l); color: var(--navy); }
.karte__sub { font-size: var(--fs-s); color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.karte__kopf .badge { margin-left: auto; }
.karte__chips { padding: 2px 14px 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.karte__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); margin-top: auto; }
@supports (grid-template-rows: subgrid) {
    .karten .karte[data-id] { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .karten .karte--neu { grid-row: span 4; }
}
.karte__zahlen div { padding: 8px 14px; border-right: 1px solid var(--linie); }
.karte__zahlen div:last-child { border-right: 0; }
.karte__zahlen b { display: block; font-size: var(--fs-xl); font-weight: 400; color: var(--navy); }
.karte__zahlen span { font-size: var(--fs-xs); color: var(--text-3); }
.karte__fuss { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--linie); background: #fafbfc; font-size: var(--fs-s); color: var(--text-2); }
.karte__fuss .rechts { margin-left: auto; display: flex; gap: 6px; }
.karte--neu { border: 2px dashed var(--linie-2); background: #f1f3f6; align-items: center; justify-content: center; min-height: 190px; color: var(--text-2); gap: 8px; }
.karte--neu:hover { border-color: var(--blau); color: var(--navy-2); box-shadow: none; }
.karte--neu i[data-icon] { width: 28px; height: 28px; }

/* Kennzahl-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--linie); background: #fff; }
.kachel { padding: 11px 14px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 0 -1px -1px 0; }
.kachel__label { font-size: var(--fs-xs); color: var(--text-2); text-transform: none; display: flex; align-items: center; gap: 5px; }
.kachel__wert { font-size: var(--fs-kpi); color: var(--navy); font-weight: 400; line-height: 1.25; white-space: nowrap; }
.kachel__sub { font-size: var(--fs-xs); color: var(--text-3); }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.tabelle th { text-align: left; font-weight: 600; color: var(--text-2); padding: 7px 10px; border-bottom: 2px solid var(--linie-2); background: #fafbfc; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: #f6f9fe; }
.tabelle tr.ist-gewaehlt td { background: var(--hellblau); }
.tabelle .r { text-align: right; white-space: nowrap; }
.tabelle .c { text-align: center; }
.tabelle th.sortierbar { cursor: pointer; }
.tabelle th.sortierbar:hover { color: var(--navy-2); }
.tabelle th.ist-sortiert { color: var(--navy); }
.tabelle tr.summe td { font-weight: 700; border-bottom: 3px double var(--text); padding-bottom: 8px; }
.tabelle tr.summe + tr td, .tabelle tbody tr.summe:last-child td { }
.tabelle-wrap { overflow: auto; }
.gedimmt { color: var(--text-3); }
.leerzustand { padding: 26px; text-align: center; color: var(--text-3); }

/* Balken (Füllgrad) */
.balken { height: 8px; background: var(--grund); border: 1px solid var(--linie); position: relative; min-width: 120px; }
.balken span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blau); }
.balken.gut span { background: var(--gruen); }
.balken.mittel span { background: #d9a43a; }
.balken.schwach span { background: var(--rot); }

/* Diagramm (eckig) */
.diagramm { width: 100%; height: 190px; display: block; }
.diagramm text { font-size: 10px; fill: var(--text-3); }

/* Auswertung: Filter links, Inhalt rechts */
.auswertung { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.filter { background: #fff; border: 1px solid var(--linie); position: sticky; top: 0; }
.filter__inhalt { padding: 12px 14px; }
.filter .feld { margin-bottom: 11px; }
.filter__fuss { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--linie); background: #fafbfc; }
.karte-map { height: 430px; border-top: 1px solid var(--linie); }
.kartenbereich { --listenbreite: 420px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--listenbreite); height: clamp(430px, 65vh, 680px); overflow: hidden; transition: grid-template-columns .2s ease; }
.kartenbereich > .karte-map { height: 100%; min-width: 0; }
.kartenliste-slot { overflow: hidden; border-left: 1px solid var(--linie); background: #fff; }
.kartenliste { width: var(--listenbreite); height: 100%; display: flex; flex-direction: column; background: #fff; transform: translateX(0); transition: transform .2s ease, visibility .2s; }
.kartenliste > .abschnitt__kopf { flex: none; padding: 8px 10px; gap: 6px; }
.kartenliste-pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.kartenliste-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#kartenListe { table-layout: fixed; width: 100%; font-size: var(--fs-s); }
#kartenListe th, #kartenListe td { padding: 7px 6px; }
#kartenListe th:first-child { width: auto; }
#kartenListe th:nth-child(2) { width: 89px; }
#kartenListe th:nth-child(3) { width: 70px; }
#kartenListe th:last-child { width: 35px; }
#kartenListe thead th { background: #fff; z-index: 2; }
#kartenListe .liste-sf th { position: sticky; padding: 3px 4px; background: #fff; border-bottom: 1px solid var(--linie-2); font-weight: 400; }
#kartenListe .sfeld { min-width: 0; width: 100%; background: #fff; }
#kartenListe td { vertical-align: top; }
#kartenListe td:not(:first-child) { white-space: nowrap; }
#kartenListe td:first-child { overflow-wrap: anywhere; }
#kartenListe .gedimmt { font-size: var(--fs-xs); margin-top: 3px; }
.kartenliste-wahl { appearance: none; border: 0; padding: 0; background: none; color: var(--navy); font: inherit; text-align: left; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kartenliste-wahl:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
#kartenListe .kartenliste-bild { float: left; width: 58px; height: 42px; margin: 0 8px 4px 0; object-fit: cover; }
#kartenListe tr.ist-ausgewaehlt td { background: var(--hellblau); border-bottom-color: #9cc3f2; }
#kartenListe tr.ist-ausgewaehlt td:first-child { box-shadow: inset 3px 0 var(--blau); }
#kartenListe td:last-child .knopf { padding: 4px; }
#kartenListeFuss { flex: none; background: #fff; padding: 7px 8px; gap: 5px; font-size: var(--fs-xs); }
.kartenbereich.ist-eingeklappt { grid-template-columns: minmax(0, 1fr) 32px; }
.kartenbereich.ist-eingeklappt .kartenliste { transform: translateX(100%); visibility: hidden; }
.kartenliste-auf { position: absolute; top: 8px; right: 0; z-index: 700; width: 32px; padding: 8px 5px; display: flex; flex-direction: column; gap: 7px; }
.kartenliste-auf[hidden] { display: none; }
@media (max-width: 1300px) { .kartenbereich { --listenbreite: 360px; } }
@media (max-width: 1000px) { .auswertung { grid-template-columns: minmax(0, 1fr) !important; } .kartenbereich { --listenbreite: 340px; } }
@media (max-width: 620px) { .kartenbereich { --listenbreite: min(340px, 82vw); height: 540px; grid-template-columns: minmax(0, 1fr); } .kartenliste-slot { position: absolute; right: 0; top: 0; bottom: 0; z-index: 650; box-shadow: -3px 0 12px rgba(16,37,70,.15); } .kartenbereich.ist-eingeklappt { grid-template-columns: minmax(0, 1fr); } .kartenbereich.ist-eingeklappt .kartenliste-slot { width: 0; border: 0; } }
@media (prefers-reduced-motion: reduce) { .kartenbereich, .kartenliste { transition: none; } }
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.legende { display: flex; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: 4px; }
.legende i.punkt { width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.blaettern { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--linie); font-size: var(--fs-s); color: var(--text-2); }
.blaettern .rechts { margin-left: auto; display: flex; gap: 6px; }

/* Modal */
.modal-grund { position: fixed; inset: 0; background: rgba(13, 27, 48, .45); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; }
.modal { background: #fff; width: 640px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.modal--gross { width: 1100px; }
.modal--mittel { width: 860px; }
.modal--klein { width: 440px; }
.modal__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff;
    background: linear-gradient(100deg, #12294d 0%, #1b3f73 55%, #2a5ba3 100%); }
.modal__titel { font-size: var(--fs-xl); font-weight: 400; margin: 0; }
.modal__untertitel { font-size: var(--fs-s); color: #c9d8ef; }
.fenster__zu { margin-left: auto; background: none; border: 0; color: #fff; width: 26px; height: 26px; cursor: pointer; padding: 3px; opacity: .85; }
.fenster__zu:hover { opacity: 1; }
.modal__reiter { display: flex; gap: 0; border-bottom: 1px solid var(--linie); background: #fafbfc; padding: 0 10px; }
.modal__reiter button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 9px 13px; font: inherit; font-size: var(--fs-s);
    color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; }
.modal__reiter button.ist-an { color: var(--navy); border-bottom-color: var(--blau); }
.modal__inhalt { padding: 16px; overflow: auto; flex: 1; }
.modal__fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linie); background: #fafbfc; }
.modal__fuss .links { margin-right: auto; display: flex; gap: 8px; }
.reiter-seite { display: none; }
.reiter-seite.ist-an { display: block; }

/* Merkmalsliste */
.merkmale { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 24px; }
.merkmal { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); }
.merkmal span:first-child { color: var(--text-2); }
.merkmal span:last-child { text-align: right; }
.text-block { white-space: pre-wrap; font-size: var(--fs-s); line-height: 1.55; margin-bottom: 14px; }
.text-block h4 { margin: 0 0 4px; font-size: var(--fs-m); color: var(--navy); font-weight: 600; }
pre.roh { font-size: 11px; background: #f6f8fa; border: 1px solid var(--linie); padding: 10px; max-height: 480px; overflow: auto; }
.objektbild { width: 100%; max-height: 260px; object-fit: cover; display: block; border: 1px solid var(--linie); }
.protokoll { font: 12px/1.5 Consolas, "Cascadia Mono", monospace; background: #0f1a2b; color: #d5deea; padding: 10px 12px; max-height: 60vh; overflow: auto; }
.modal--protokoll { width: min(1280px, calc(100vw - 32px)); height: min(780px, 85vh); }
.modal--protokoll .modal__kopf, .modal--protokoll .modal__fuss { flex-shrink: 0; }
.modal--protokoll .modal__titel { display: flex; align-items: center; gap: 8px; }
.modal--protokoll .modal__inhalt { display: flex; min-height: 0; overflow: hidden; }
.modal--protokoll .protokoll { flex: 1; min-width: 0; min-height: 0; max-height: none; font-size: 13px; line-height: 1.6; }
.protokoll__zeile { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: start; gap: 12px; padding: 5px 0; border-bottom: 1px solid #203047; }
.protokoll__zeit { color: #9aabc2; white-space: nowrap; }
.protokoll__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.protokoll__zeile--warnung .protokoll__text { color: #f4c76b; }
.protokoll__zeile--fehler .protokoll__text { color: #ff8f7f; }
@media (max-width: 620px) { .protokoll__zeile { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; } .modal--protokoll .modal__inhalt { padding: 10px; } }

/* Hinweise und Toasts */
.hinweis { padding: 9px 12px; border: 1px solid var(--hellblau-2); background: var(--hellblau); color: var(--navy); font-size: var(--fs-s); margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.hinweis--fehler { background: var(--rot-h); border-color: #efb3aa; color: var(--rot); }
.hinweis--ok { background: var(--gruen-h); border-color: #9fd6b5; color: var(--gruen); }
.toasts { position: fixed; right: 18px; bottom: 44px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--gruen); padding: 10px 14px; min-width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: var(--fs-s); }
.toast b { display: block; font-size: var(--fs-m); color: var(--navy); font-weight: 600; margin-bottom: 1px; }
.toast--fehler { border-left-color: var(--rot); }
.toast--info { border-left-color: var(--blau); }

.token-anzeige { font: 13px Consolas, monospace; background: #f6f8fa; border: 1px solid var(--linie-2); padding: 10px; word-break: break-all; user-select: all; }
.code { font: 12px Consolas, monospace; background: #f6f8fa; padding: 1px 5px; border: 1px solid var(--linie); }
.punkt-status { width: 8px; height: 8px; display: inline-block; background: var(--text-3); }
.punkt-status.gruen { background: var(--gruen); }
.punkt-status.rot { background: var(--rot); }
.punkt-status.blau { background: var(--blau); animation: blinken 1.2s infinite; }
@keyframes blinken { 50% { opacity: .3; } }

/* Anmeldung */
body.leer { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #0f2240, #1f4a85); }
.anmeldung__karte { width: 360px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.anmeldung__kopf { display: flex; align-items: center; gap: 10px; padding: 16px 20px; color: #fff; font-size: var(--fs-xl);
    background: linear-gradient(100deg, #12294d 0%, #1b3f73 55%, #2a5ba3 100%); }
.anmeldung__inhalt { padding: 20px; }

/* ---- Ergänzungen: Quellen (zweiteilig), Diagramme, Vorschaubilder, Anmeldung ---- */
.zweiteilig { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.zweiteilig__links { position: sticky; top: 0; }
.quellenliste__eintrag { padding: 11px 14px; border-bottom: 1px solid var(--linie); cursor: pointer; border-left: 3px solid transparent; }
.quellenliste__eintrag:hover { background: #f6f9fe; }
.quellenliste__eintrag.ist-gewaehlt { background: var(--hellblau); border-left-color: var(--blau); }
.quellenliste__eintrag.ist-geplant .quellenliste__name { color: var(--text-2); }
.quellenliste__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quellenliste__name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-l); color: var(--navy); }
.quellenliste__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.quellenliste__zahlen { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
.quellenliste__zahlen b { font-weight: 600; color: var(--navy); }
.reiterleiste { display: flex; border-bottom: 1px solid var(--linie); background: #fafbfc; padding: 0 10px; }
.reiterleiste button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 9px 13px; font: inherit; font-size: var(--fs-s); color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; }
.reiterleiste button.ist-an { color: var(--navy); border-bottom-color: var(--blau); }
.einstellungen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.einrueck { padding-left: 45px; }
.verteilung { border-top: 1px solid var(--linie); padding: 8px 14px 4px; }
.verteilung__kopf { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); color: var(--navy); }
.verteilung__kopf > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.dia { width: 100%; }
.dia__svg { display: block; overflow: visible; }
.dia text { font-size: 10px; fill: var(--text-3); }
.dia text.dia__marke { font-size: 10px; fill: var(--navy); font-weight: 600; }
.dia text.dia__label { font-size: 11px; fill: var(--text); }
.dia text.dia__wert { font-size: 10.5px; fill: var(--text-2); }
.dia text.dia__achse { font-size: 10.5px; fill: var(--text-2); }
.dia text.dia__klein { font-size: 9.5px; fill: var(--text-2); }
.dia circle[data-id] { cursor: pointer; }
.legende { flex-wrap: wrap; }
.spark { display: block; }
.zelle-spark { padding-top: 3px !important; padding-bottom: 3px !important; }
.mengenbalken { display: inline-block; height: 8px; background: var(--hellblau-2); vertical-align: middle; margin-right: 4px; }
.zelle-bild { width: 66px; padding: 4px 6px !important; }
.thumb { width: 58px; height: 42px; object-fit: cover; display: block; border: 1px solid var(--linie); background: var(--grund); }
.thumb--leer { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.bildvorschau { position: fixed; z-index: 2500; width: 480px; height: 360px; background: #fff; border: 1px solid var(--linie-2); box-shadow: 0 14px 40px rgba(16,37,70,.28); pointer-events: none; padding: 4px; }
.bildvorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anmeldung__trenner { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-xs); margin: 16px 0 12px; }
.anmeldung__trenner::before, .anmeldung__trenner::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
#passkeyMsg:empty { display: none; }
.sortpfeil { font-size: 10px; }
@media (max-width: 1200px) { .zweiteilig { grid-template-columns: 1fr; } .einstellungen { grid-template-columns: 1fr; } }

.auswertung { grid-template-columns: 320px minmax(0, 1fr); }
.zweiteilig { grid-template-columns: 340px minmax(0, 1fr); }
.segment button { white-space: nowrap; }
.popover { position: fixed; z-index: 2600; width: 580px; background: #fff; border: 1px solid var(--linie-2); border-top: 3px solid var(--blau);
    box-shadow: 0 16px 44px rgba(16, 37, 70, .26); pointer-events: none; }
.popover__kopf { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: var(--hellblau); color: var(--navy); font-size: var(--fs-l); border-bottom: 1px solid var(--hellblau-2); }
.popover__n { margin-left: auto; font-size: var(--fs-s); color: var(--text-2); }
.popover__inhalt { padding: 10px 14px 12px; }
.popover__werte { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linie); margin-top: 8px; }
.popover__wert { padding: 7px 9px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 0 -1px -1px 0; display: flex; flex-direction: column; }
.popover__wert span { font-size: var(--fs-xs); color: var(--text-2); }
.popover__wert b { font-size: var(--fs-l); font-weight: 400; color: var(--navy); white-space: nowrap; }
.popover__wert small { font-size: var(--fs-xs); color: var(--text-3); }
.popover__hinweis { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.zelle-spark { cursor: zoom-in; }

.stapel { display: flex; flex-direction: column; line-height: 1.3; }
.stapel b { font-weight: 600; color: var(--navy); white-space: nowrap; }
.stapel span { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.stapel .einheit { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.kbalken { position: relative; height: 6px; background: var(--grund); border: 1px solid var(--linie); margin-top: 4px; min-width: 90px; }
.kbalken span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blau); }
.kbalken.gruen span { background: var(--gruen); }
.kbalken.gelb span { background: #d9a43a; }
.kbalken i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--navy); }
.abwbalken { position: relative; height: 8px; background: var(--grund); border: 1px solid var(--linie); min-width: 110px; margin-top: 3px; }
.abwbalken span { position: absolute; top: 0; bottom: 0; }
.abwbalken.plus span { background: #e0603f; }
.abwbalken.minus span { background: #2b8a6a; }
.abwbalken i { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--navy); }
td small.plus { color: #c0392b; font-size: var(--fs-xs); }
td small.minus { color: #1f8a4c; font-size: var(--fs-xs); }
#gruppen td { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
#gruppen tr.summe td { border-bottom: 3px double var(--text); }

.dia__brush { fill: rgba(47,111,214,.18); stroke: var(--blau); stroke-width: 1; pointer-events: none; }
#histLegende .knopf { margin-left: 6px; }

.kartenlegende { padding: 6px 14px; border-bottom: 1px solid var(--linie); background: #fafbfc; min-height: 30px; font-size: var(--fs-xs); }
.kartenlegende[hidden] { display: none; }
.teilmarkt-uebersicht { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.teilmarkt-karte { border: 1px solid var(--linie); border-top: 3px solid var(--teilmarkt-farbe,var(--blau)); padding: 10px 12px; background: #fff; cursor: pointer; }
.teilmarkt-karte:hover { background: #f6f9fe; }
.teilmarkt-titel { display: flex; align-items: flex-start; gap: 7px; appearance: none; border: 0; padding: 0; background: none; color: var(--navy); text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.teilmarkt-meta, .teilmarkt-hinweis { font-size: var(--fs-s); color: var(--text-2); line-height: 1.5; }
.teilmarkt-meta { margin-top: 5px; }
.teilmarkt-hinweis { margin: 0 0 12px; }
.teilmarkt-balken { min-width: 0; margin-top: 5px; }
.teilmarkt-bahn { height: 6px; position: relative; margin: 12px 3px 8px; background: #e2e8f1; }
.teilmarkt-spanne { position: absolute; height: 6px; background: var(--teilmarkt-farbe,#2f6fd6); }
.teilmarkt-spanne::before,.teilmarkt-spanne::after { content: ''; position: absolute; height: 12px; width: 2px; top: -3px; background: var(--teilmarkt-farbe,#2f6fd6); }
.teilmarkt-spanne::before { left: 0; } .teilmarkt-spanne::after { right: 0; }
.teilmarkt-median { position: absolute; top: -5px; width: 3px; height: 16px; margin-left: -1px; background: #102f56; box-shadow: 0 0 0 1px #fff; }
.teilmarkt-werte { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; font-size: 10px; color: #66758b; }
.teilmarkt-werte span:nth-child(2) { text-align: center; } .teilmarkt-werte span:last-child { text-align: right; }
.teilmarkt-werte b { display: block; color: #16325c; font-size: 13px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.teilmarkt-label { font-family: inherit; }
.teilmarkt-label > div { height: 116px; padding: 7px 9px; background: #fff; border: 1px solid #a9b9ce; border-top: 3px solid var(--teilmarkt-farbe,#2f6fd6); box-shadow: 0 2px 9px #16325c30; }
.teilmarkt-label__kopf { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #16325c; font-size: 12px; line-height: 16px; }
.teilmarkt-label__kopf span { font-size: 10px; color: #66758b; white-space: nowrap; }
.teilmarkt-label__ort { color: #66758b; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 15px; }
.teilmarkt-label__einheit { text-align: center; color: #66758b; font-size: 9px; margin-top: 3px; line-height: 12px; white-space: nowrap; }
.teilmarkt-nummer span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fff; color: #fff; font-weight: 700; box-shadow: 0 1px 6px #16325c50; }
.teilmarkt-tooltip { width: 240px; white-space: normal; }
.kartenzahl { color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 14px; text-shadow: 0 0 2px #000; pointer-events: none; }

/* Karte: Werkzeugleiste, Flächen, Beschriftungen */
.rasterregler { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rasterregler[hidden] { display: none; }
.rasterregler input { width: 160px; accent-color: var(--blau); cursor: pointer; }
.rasterregler span { font-size: var(--fs-xs); color: var(--text-3); }
.rasterregler output { min-width: 20px; color: var(--navy); font-weight: 600; }
.seitenkopf h1 { display:flex; align-items:center; gap:10px; }
.proxy-scroll { overflow:auto; height: min(62vh, 720px); padding:0; }
#proxyGrid { width:100%; }
#proxyGrid thead th { position:sticky; top:0; z-index:2; white-space:nowrap; height:34px; }
#proxyGrid thead tr.proxy-filter th { top:34px; padding:3px 4px; height:30px; background:#fff; cursor:default; }
#proxyGrid .sfeld { background:#fff; min-width:80px; }
#proxyGrid td { max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#proxyGrid tr[data-source-row] { cursor:pointer; }
#proxyGrid tr[data-source-row]:hover td { background:var(--hellblau); }
#proxyGrid tr[data-source-row]:focus-visible { outline:2px solid var(--blau); outline-offset:-2px; }
.proxy-error { color:var(--rot, #a52b30); margin-top:12px; }
#profilBereich > .abschnitt__kopf { flex-wrap:wrap; gap:8px; }
.profil-scroll { max-height:520px; overflow:auto; }
#profilGrid { width:100%; }
#profilGrid thead th { position:sticky; top:0; z-index:2; height:34px; white-space:nowrap; }
#profilGrid thead .profil-filter th { top:34px; padding:3px 4px; height:30px; background:#fff; cursor:default; }
#profilGrid .sfeld { background:#fff; min-width:85px; }
#profilGrid td { white-space:nowrap; }
#profilGrid tr[data-profil]:hover td { background:var(--hellblau); }
#profilGrid tr[data-profil]:focus-visible { outline:2px solid var(--blau); outline-offset:-2px; }
#profilFooter { padding:8px 12px; border-top:1px solid var(--linie); background:#fff; }
.proxy-laender__leiste { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.proxy-laender__leiste [data-country-count] { margin-left:auto; font-size:var(--fs-s); }
.proxy-laender__liste { max-height:370px; overflow:auto; border:1px solid var(--linie); padding:0 10px 6px; }
.proxy-kontinent h4 { margin:0 -10px; padding:8px 10px; background:var(--hellblau); border-bottom:1px solid var(--linie); color:var(--navy); font-size:var(--fs-m); font-weight:500; position:sticky; top:0; z-index:1; }
.proxy-kontinent h4 label { display:flex; align-items:center; gap:9px; cursor:pointer; }
.proxy-kontinent h4 small { margin-left:auto; font-weight:400; color:var(--text-3); }
.proxy-kontinent h4 input { margin:0; width:16px; height:16px; accent-color:var(--blau); }
.proxy-kontinent__laender { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.proxy-kontinent[hidden] { display:none; }
.proxy-flag { width:22px; height:16px; object-fit:cover; border:1px solid var(--linie); flex:none; vertical-align:middle; }
.proxy-land { display:flex; align-items:center; gap:9px; padding:8px 2px; border-bottom:1px solid var(--linie); cursor:pointer; min-width:0; }
.proxy-land[hidden] { display:none; }
.proxy-land input { accent-color:var(--blau); width:16px; height:16px; flex:none; margin:0; }
.proxy-land span { overflow-wrap:anywhere; }
.proxy-land small { color:var(--text-3); margin-left:auto; }
.proxy-land:hover { background:var(--hellblau); }
.proxy-laender__fehler { color:var(--rot, #a52b30); padding:0 16px 12px; flex:none; }
.proxy-laender__fehler:empty { display:none; }
@media (max-width:520px) { .proxy-kontinent__laender { grid-template-columns:1fr; } }
.proxy-bereich .blaettern { min-height:34px; padding:8px 12px; background:#fff; border-top:1px solid var(--linie); }
.proxy-bereich .abschnitt__kopf { flex-wrap:wrap; }
.inhalt:has(.proxy-bereich) { display:flex; flex-direction:column; overflow:hidden; }
.inhalt:has(.proxy-bereich) > .seitenkopf, #proxySummary, #proxyHinweis { flex:none; }
.proxy-bereich { display:flex; flex-direction:column; flex:1; min-height:150px; margin-bottom:0; }
.proxy-bereich .abschnitt__kopf, .proxy-bereich .blaettern { flex:none; }
.proxy-bereich .proxy-scroll { flex:1; min-height:0; height:auto; }
.proxy-bereich .segment { flex-wrap:wrap; }
.kartenleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 14px; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); background: #fff; }
.kartenkopf, .kartenfarbe { flex-wrap: wrap; }
.kartenfarbe { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kartenfarbe .segment { max-width: 100%; flex-wrap: wrap; }
.kartenleiste .rechts { margin-left: auto; font-size: var(--fs-xs); }
.schalter--klein { font-size: var(--fs-s); gap: 6px; }
.kartenlabel { text-align: center; font-size: 11px; line-height: 1.25; color: #16325c; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; }
.kartenlabel b { display: block; font-size: 12px; }
.kartenlabel--klein { font-size: 10px; color: #3a4a60; font-weight: 600; }
/* Angebotsliste: eigener Scrollbereich, Spaltenfilter */
.liste-scroll { max-height: 640px; overflow: auto; }
#liste thead tr.liste-sf th { padding: 3px 4px; background: #f3f5f8; border-bottom: 1px solid var(--linie-2); font-weight: 400; z-index: 1; }
.sfeld { display: block; width: 100%; min-width: 46px; height: 22px; padding: 0 5px; border: 1px solid var(--linie-2); background: #fff; font: inherit; font-size: var(--fs-xs); color: var(--text); }
.sfeld:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px var(--hellblau-2); }
.sfeld--zahl { text-align: right; }
.sfeld.ist-aktiv { border-color: var(--blau); background: var(--hellblau-2); }
select.sfeld { padding: 0 2px; }

/* Karten-Popover für Einzelangebote */
.popover--punkt { width: 520px; pointer-events: none; }
.popover--punkt .popover__kopf { font-size: var(--fs-m); }
.ppunkt__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ppunkt { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.ppunkt__bild { width: 180px; height: 128px; object-fit: cover; display: block; background: #eef1f5; border: 1px solid var(--linie); }
.ppunkt__bild--leer { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.ppunkt__bild--leer svg { width: 34px; height: 34px; }
.ppunkt__ort { font-size: var(--fs-s); color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.ppunkt__typ { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.ppunkt__preis { font-size: 22px; color: var(--navy); margin-top: 8px; }
.ppunkt__sqm { font-size: var(--fs-m); color: var(--text); margin-top: 2px; }
.ppunkt__sqm .plus { color: #c0392b; font-size: var(--fs-s); margin-left: 4px; }
.ppunkt__sqm .minus { color: #1a7f4b; font-size: var(--fs-s); margin-left: 4px; }
.lagebalken { margin-top: 10px; }
.lagebalken__kopf { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: 5px; }
.lagebalken__kopf b { font-weight: 400; color: var(--navy); }
.lagebalken__bahn { position: relative; height: 12px; background: #f1f3f6; }
.lagebalken__bahn i { position: absolute; top: 0; height: 100%; }
.lagebalken__bahn .b80 { background: #c9d9f2; }
.lagebalken__bahn .b50 { background: #2f6fd6; opacity: .55; }
.lagebalken__bahn .med { width: 2px; margin-left: -1px; background: #16325c; }
.lagebalken__bahn .pkt { width: 12px; height: 12px; margin-left: -6px; background: #d9a43a; border: 2px solid #fff; box-shadow: 0 0 0 1px #8a6a1e; transform: rotate(45deg) scale(.85); }
.lagebalken__achse { position: relative; height: 14px; font-size: 10px; color: var(--text-3); }
.lagebalken__achse span { position: absolute; transform: translateX(-50%); white-space: nowrap; top: 2px; }
/* Anmeldung: Formularfalle für Bots (unsichtbar) */
.falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Zugang und Sicherheit */
.modal-abschnitt { display: flex; align-items: center; gap: 7px; font-size: var(--fs-l); font-weight: 400; color: var(--navy); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.modal-abschnitt .gedimmt { font-size: var(--fs-s); }
details.regeln { margin-top: 10px; font-size: var(--fs-s); color: var(--text-2); }
details.regeln summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
details.regeln ul { margin: 6px 0 0 18px; padding: 0; }

/* Quellen-Übersicht: Datenmengen grafisch */
.qg { border: 1px solid var(--linie); background: #fff; padding: 0 0 12px; min-width: 0; }
.qg > *:not(.qg__kopf) { margin-left: 14px; margin-right: 14px; }
.qg__kopf { display: flex; align-items: center; gap: 7px; padding: 8px 14px; margin-bottom: 10px; background: var(--hellblau); border-top: 3px solid var(--blau); color: var(--navy); font-size: var(--fs-m); }
.qg__kopf .gedimmt { margin-left: auto; font-size: var(--fs-xs); }
.qg__svg { display: block; }
.qg__t { font-size: 10px; fill: #6b7787; }
.qg__stapel { display: flex; height: 22px; background: #f1f3f6; }
.qg__stapel span { display: block; height: 100%; border-right: 1px solid #fff; }
.qg__stapel span.ist-hervor { box-shadow: inset 0 0 0 2px var(--navy); }
.qg__teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 14px; margin-top: 10px; font-size: var(--fs-s); }
.qg__teile div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; overflow-wrap: anywhere; column-gap: 6px; align-items: center; }
.qg__teile small { grid-column: 2 / 4; color: var(--text-3); font-size: var(--fs-xs); }
.qg__teile b { font-weight: 400; color: var(--navy); }
.qg__teile .ist-hervor span { font-weight: 600; color: var(--navy); }
.qg__balken { display: grid; gap: 6px; }
.qg__zeile { display: grid; grid-template-columns: 150px 1fr 54px 70px; gap: 8px; align-items: center; font-size: var(--fs-s); }
.qg__zeile b { font-weight: 400; color: var(--navy); text-align: right; }
.qg__zeile small { color: var(--text-3); font-size: var(--fs-xs); }
.qg__bahn { position: relative; height: 14px; background: #f1f3f6; }
.qg__bahn i { position: absolute; left: 0; top: 0; height: 100%; background: var(--hellblau-2, #c9d9f2); }
.qg__bahn i.aktiv { background: var(--navy); height: 6px; top: 4px; }
.quellgrafik { gap: 14px; }
/* Objekt-Modal: Dubletten */
.dubletten { margin-top: 14px; border: 1px solid var(--linie); border-top: 3px solid var(--blau); }
.dubletten__kopf { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--hellblau); color: var(--navy); font-size: var(--fs-s); }
.dubletten__kopf .gedimmt { margin-left: auto; font-size: var(--fs-xs); }
.dubletten__zeile { padding: 6px 10px; border-top: 1px solid var(--linie); font-size: var(--fs-s); }
.dubletten__zeile.ist-aktuell { background: #f7f9fc; }
.dubletten__grund { font-size: var(--fs-xs); margin-top: 2px; }
.modal--proxykarte { width: min(1320px,calc(100vw - 32px)); height: min(820px,90vh); }
.modal--proxykarte .modal__inhalt { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 9px; padding: 12px; }
.modal--proxykarte .modal__kopf,.modal--proxykarte .modal__fuss { flex-shrink: 0; }
.proxy-map-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.proxy-map-toolbar label { display: flex; align-items: center; gap: 7px; }
.proxy-map-toolbar .input { width: 170px; }
.proxy-map-info,.proxy-map-note { font-size: var(--fs-s); color: var(--text-2); }
.proxy-map { flex: 1; min-height: 180px; border: 1px solid var(--linie); }
.proxy-map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-s); }
.proxy-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.proxy-map-legend i { width: 11px; height: 11px; border-radius: 50%; }
.schnittstellen-bereich { display: flex; flex-direction: column; height: clamp(320px,calc(100vh - 420px),640px); }
.schnittstellen-scroll { overflow: auto; flex: 1; min-height: 0; }
#zugangGrid th { background: #fff; }
#zugangGrid .liste-sf th { padding: 3px 4px; font-weight: 400; background: #fff; }
#zugangGrid .sfeld { background: #fff; }
.zugang-rechte { min-width: 210px; max-width: 340px; white-space: normal; font-size: var(--fs-s); }
.zugang-scope-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zugang-error { color: var(--rot); font-size: var(--fs-s); }
.invest-settings { display: grid; grid-template-columns: repeat(4,minmax(160px,1fr)); gap: 14px 20px; }
.invest-settings .feld { margin: 0; font-size: var(--fs-s); }
.invest-slider { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-s); }
.invest-slider span { display: flex; justify-content: space-between; gap: 8px; }
.invest-slider output { color: var(--navy); font-weight: 600; white-space: nowrap; }
.invest-slider input { width: 100%; accent-color: var(--blau); }
.invest-zinszeile { padding: 10px 16px; border-top: 1px solid var(--linie); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-s); }
.invest-summary { padding: 10px 0; font-size: var(--fs-s); color: var(--text-2); }
#inhalt:has(#investGrid) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#inhalt:has(#investGrid) > :not(.investment-bereich) { flex-shrink: 0; }
.investment-bereich { display: flex; flex-direction: column; min-height: 220px; flex: 1; margin-bottom: 10px; }
.investment-scroll { overflow: auto; flex: 1; min-height: 0; }
#investGrid th { background: #fff; }
#investGrid thead tr:first-child th { min-width: 125px; white-space: normal; }
#investGrid .liste-sf th { padding: 3px 4px; font-weight: 400; background: #fff; }
#investGrid .sfeld { background: #fff; }
#investGrid td { vertical-align: top; }
#investGrid td small { display: block; margin-top: 3px; color: var(--text-3); font-size: var(--fs-xs); white-space: normal; }
#investGrid th:first-child,#investGrid td:first-child { position: sticky; left: 0; min-width: 260px; max-width: 300px; background: #fff; border-right: 1px solid var(--linie); z-index: 1; }
#investGrid thead th:first-child { z-index: 6; }
.invest-object { display: flex; gap: 7px; max-width: 290px; white-space: normal; }
.invest-object img { width: 48px; height: 34px; object-fit: cover; flex-shrink: 0; }
.invest-object b { font-weight: 500; }
.invest-num { text-align: right; font-variant-numeric: tabular-nums; }
.invest-positive { color: #167044; }
.invest-negative { color: #b83232; }
.invest-note { display: block; white-space: normal; min-width: 240px; max-width: 360px; max-height: 74px; overflow: hidden; font-size: var(--fs-xs); }
.invest-detail-grid,.invest-correction-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.invest-detail-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.invest-detail-table th,.invest-detail-table td { padding: 6px 8px; border-bottom: 1px solid var(--linie); }
.invest-detail-table th { font-weight: 400; text-align: left; }
.invest-detail-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invest-warnings { margin-top: 14px; padding: 8px 12px; background: #fff7e6; font-size: var(--fs-s); }
.invest-warnings p { margin: 4px 0; }
.modal--investment { height: min(880px,90vh); width: min(1240px,calc(100vw - 30px)); }
.modal--investment .modal__kopf,.modal--investment .modal__reiter,.modal--investment .modal__fuss { flex-shrink: 0; }
.modal--investment .modal__inhalt { overflow: auto; min-height: 0; }
.modal--investment .modal__reiter { overflow-x: auto; }
.modal--investment .modal__reiter button { flex-shrink: 0; white-space: nowrap; }
.modal--investment h4 { display: flex; align-items: center; gap: 7px; }
@media(max-width:1000px) { .invest-settings { grid-template-columns: repeat(2,minmax(0,1fr)); } .kopf { gap: 10px; padding: 0 10px; } .hauptnav { overflow-x: auto; } .hauptnav a { flex-shrink: 0; padding: 0 10px; } .kopf__rechts { gap: 8px; flex-shrink: 0; } .kopf__rechts .worker-status { display: none; } .hauptnav .nav--rechts { margin-left: 0; } }
@media(max-width:1000px), (max-height:750px) { #inhalt:has(#investGrid) { display: block; overflow: auto; } .investment-bereich { height: 65vh; } }
@media(max-width:650px) { .invest-settings,.invest-detail-grid,.invest-correction-grid { grid-template-columns: 1fr; } .marke { font-size: 0; gap: 0; } .seitenkopf { flex-wrap: wrap; } }
@media (max-width: 650px) { .zugang-scope-grid { grid-template-columns: 1fr; } }