:root{
  --bg:#f7f7f8; --panel:#fff; --line:#e6e6ea; --ink:#1a1a1f; --muted:#666;
  --accent:#2d5fb8; --accent-soft:#e7eefc; --warn:#b8541a; --warn-soft:#fbe9dd; --ok:#1f7a3a; --bad:#b21f1f;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.08);
  /* Etappe F (2026-06-11): zentrale Radien als Variablen für ein einheitlicheres,
     etwas weicheres Mac-Erscheinungsbild. --radius = Standard-Container (Cards/Modals),
     --radius-sm = Buttons/Felder/Chips. Vorher waren 6/8/10/12px verstreut. */
  --radius:12px;
  --radius-sm:7px;
  /* zusätzliche semantische Flächen-/Zustandsfarben.
     Vorher waren diese als feste Hex-Werte über die ganze Datei verstreut; als
     Variablen lassen sie sich im Dark-Mode-Block (s.u.) zentral umschalten.
     Die Werte sind 1:1 die bisherigen Hellmodus-Farben → Hellmodus unverändert. */
  --panel-2:#fafbfc;      /* leicht abgesetzte Panel-Fläche (Modal-Footer, Map-Header-th) */
  --hover:#f0f2f6;        /* Hover auf neutralen Buttons */
  --hover-row:#f3f4f7;    /* Hover auf Listen-/Baum-Zeilen + th-Hintergrund */
  --chip:#eef0f5;         /* Pills, Badges, kbd, Steps, Überlaufmenü-Hover */
  --highlight:#fff1c2;    /* aktive/ausgewählte Zeile (gelb) */
  --highlight-soft:#fff7d6;/* Vorschau-Header-Zeile */
  --field:#fff;           /* Eingabefelder + Karten-Listenelemente Hintergrund */
  --map-bg:#fbfbfd;       /* Karten-Wrapper-Hintergrund */
  --danger-border:#f0caca;/* Rahmen Danger-Button */
  --tooltip-bg:rgba(20,20,30,.92); /* Karten-Tooltip + Toast-Hintergrund */
  --focus-ink:#1a1a1f;    /* Fokus-/Auswahl-Konturen auf Karte + Swatch-Selektion */
  /* Task D-2 (Runde 31, 2026-08-04): dezenter Akzent für den Tooltip-Hinweis
     "Feingliederung verfügbar" (Sub-GDE-Anbau), passend zu --accent, aber
     eigenständig, damit er nicht mit Auswahl-/Fokusfarben kollidiert. */
  --farbe-subgde-akzent:#8a6d3b;
}

/* ---- Etappe F (2026-06-11): Dark Mode ----
   Folgt der macOS-Systemeinstellung (prefers-color-scheme). Es werden NUR die
   UI-Chrome-Variablen umdefiniert; Parteifarben, Choroplethen-Skalen und die
   bewusst gefärbten Karten-Füllungen (matched/unmatched) bleiben unverändert,
   weil sie eigene Bedeutung tragen. color-scheme:dark sorgt dafür, dass auch
   native Form-Controls/Scrollbars dunkel rendern. */
/* Dunkler Variablensatz. Ausgelöst über die Klasse html.is-dark, die app.js setzt
   (themeInit/applyTheme). app.js entscheidet, wann dunkel gilt: Schalterstellung
   'dark', oder 'auto' + System dunkel. Der manuelle Schalter ist nötig, weil die
   macOS-WKWebView prefers-color-scheme nicht zuverlässig an die Seite durchreicht;
   die JS-Variante (matchMedia) funktioniert dagegen verlässlich. */
html.is-dark{
  color-scheme:dark;
  --bg:#1c1c1f; --panel:#26262b; --line:#3a3a42; --ink:#e8e8ec; --muted:#9a9aa3;
  --accent:#5b8def; --accent-soft:#2a3550; --warn:#e0883f; --warn-soft:#3a2e21; --ok:#4fb56e; --bad:#e2615f;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4);
  --panel-2:#2c2c32; --hover:#32323a; --hover-row:#30303a; --chip:#33333c;
  --highlight:#5a4d1a; --highlight-soft:#4a431f; --field:#2c2c33; --map-bg:#202024;
  --danger-border:#6a3434; --tooltip-bg:rgba(0,0,0,.9); --focus-ink:#e8e8ec;
}
/* Feste semantische Tints, die im Dunkeln zu grell wären → gedämpfte Varianten.
   Eine gemeinsame Klasse .is-dark wird von app.js am <html> gesetzt, sobald entweder
   das System dunkel ist (und nicht manuell auf Hell gestellt) ODER der Schalter auf
   Dunkel steht. So müssen die Tint-Overrides nur EINMAL geschrieben werden. */
html.is-dark .preview tr.is-data-start{background:#1f3a2a}
html.is-dark .map-table tr.assigned-party td{background:#22311f}
html.is-dark .map-table tr.assigned-meta td{background:#1f2a3a}
html.is-dark .notice.info{background:#1f2c44;border-color:#33486e;color:#bcd1f5}
html.is-dark .notice.warn{background:#3a2c1a;border-color:#6a4f2c;color:#f0cfa0}
html.is-dark .notice.ok{background:#1f3326;border-color:#356046;color:#bfe3cb}
html.is-dark .notice.bad{background:#3a1d1d;border-color:#6e3636;color:#f3c4c4}
html.is-dark .match-table tr.ok td{background:#1d2f24}
html.is-dark .match-table tr.miss td{background:#3a261f}
html.is-dark .match-table tr.extra td{background:#2c2540}
html.is-dark .region,html.is-dark .region path{stroke:#202024}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--field);padding:6px 12px;border-radius:var(--radius-sm);color:var(--ink)}
button:hover{background:var(--hover)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover{background:#264e98}
button.ghost{border-color:transparent;background:transparent}
button.danger{background:var(--field);color:var(--bad);border-color:var(--danger-border)}
button:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=number],select,textarea{font:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 8px;background:var(--field);color:var(--ink)}
input[type=color]{width:36px;height:28px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--field);cursor:pointer}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{font-weight:600;background:var(--hover-row);position:sticky;top:0;z-index:1}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.layout{display:grid;grid-template-columns:1fr;height:100vh}
/* Sidebar als Overlay */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:30;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transform:translateX(-280px);transition:transform .22s ease;box-shadow:none}
.sidebar.open{transform:translateX(0);box-shadow:3px 0 20px rgba(0,0,0,.18)}
/* Overlay-Backdrop */
#sidebar-backdrop{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.25);display:none}
#sidebar-backdrop.show{display:block}
/* Toggle-Button oben links */
#sidebar-toggle{position:fixed;left:10px;top:10px;z-index:31;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.1)}
/* Etappe F: Theme-Schalter oben rechts, gleiche Optik wie der Sidebar-Toggle */
/* R62: Eckknöpfe oben rechts — Rückgängig/Wiederherstellen links vom
   Hell/Dunkel-Schalter. Etwas kleiner als dieser, weil sie sekundär sind. */
.eckknopf{position:fixed;top:12px;z-index:31;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.1);color:var(--ink)}
.eckknopf:disabled{opacity:.3;cursor:default}
#undo-toggle{right:88px}
#redo-toggle{right:54px}
#theme-toggle{position:fixed;right:10px;top:10px;z-index:31;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.sidebar h1{font-size:14px;margin:0;padding:14px 16px;border-bottom:1px solid var(--line);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.sidebar .actions{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.sidebar .list{flex:1;overflow:auto;padding:6px 0}
.ds-item{padding:10px 14px;border-left:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.ds-item:hover{background:var(--hover-row)}
.ds-item.active{background:var(--accent-soft);border-left-color:var(--accent)}
.ds-item .t{font-weight:600}
.gran-badge{font-weight:600;font-size:10px;line-height:1;letter-spacing:.3px;padding:2px 5px;border-radius:4px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line)}
/* T-8 (Runde 14): FUS-Badge (Fusions-Datensatz) farblich abgesetzt statt im
 * normalen Accent-Ton, damit „aus mehreren Landes-DS zusammengesetzt" auf
 * einen Blick auffällt. */
.gran-badge--fus{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
/* Baumstruktur Sidebar */
.tree-gebiet{padding:8px 12px 8px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);user-select:none}
.tree-gebiet:hover{background:var(--hover-row);color:var(--ink)}
.tree-typ{padding:6px 12px 6px 22px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);user-select:none}
.tree-typ:hover{background:var(--hover-row)}
.tree-ds{padding:8px 14px 8px 32px;border-left:3px solid transparent}
.tree-gran{padding:3px 12px 3px 30px;font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sidebar-union-btn{margin-left:auto;padding:1px 6px;font-size:10px;font-weight:600;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--muted);cursor:pointer;line-height:1.4;text-transform:none;letter-spacing:0}
.sidebar-union-btn:hover{background:var(--hover-row);color:var(--ink)}
.sidebar-union-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tree-icon{font-size:10px;width:12px;flex-shrink:0;color:var(--muted)}
.ds-item .s{color:var(--muted);font-size:12px}
.fav-star{border:none;background:none;padding:0 2px;font-size:13px;color:var(--muted);line-height:1;flex-shrink:0}
.fav-star:hover{background:none;color:#e6a800}
.fav-star--on{color:#e6a800}
.fav-section{border-bottom:2px solid var(--line)}
.sidebar .footer{padding:8px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
/* ── R61 (2026-09-01), Michaels Punkt 4: Kopfbereich niedriger ─────────────
 * Gemessenes Budget über der Karte VORHER rund 255 px, davon allein 72 px in
 * den drei 24-px-Abständen und 64 px in der Toolbar-Karte. Alle Werte hier
 * sind Abstände und Schriftgrößen — an der Struktur ändert sich nichts, damit
 * kein Tab, der dieselben Klassen benutzt, überraschend anders aussieht. */
.main{overflow:auto;padding:14px 24px;display:flex;flex-direction:column;gap:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar h2{margin:0;font-size:17px;line-height:1.25}
/* 24.09.2026: Die Eckknöpfe (☰ links, ↶ ↷ 🌗 rechts) liegen position:fixed über
 * dem Inhalt. Die Kopfzeilen (DS-Kopf .topbar, Cockpit-Kopf .ck-kopf) halten
 * deshalb links und rechts Abstand, statt unter die Knöpfe zu rutschen:
 * links ☰ bis 44 px, rechts ↶ ab 116 px vom Fensterrand, abzüglich des
 * 24-px-Innenabstands von .main, plus 8 px Luft. */
.main > .topbar{padding-left:0;padding-right:100px;min-height:34px}
/* R95: Kein Umbruch im DS-Kopf. Mit flex-wrap brach die Knopfzeile (Union, ⏮◀▶⏭)
 * nach der max-content-Breite der Ebenenkette um und lag über der Tab-Leiste —
 * bevor die Kürzung (ellipsis) greifen konnte. Jetzt schrumpft links, rechts bleibt fest. */
.main > .topbar{flex-wrap:nowrap}
.main > .topbar > .row{flex:none}
.ck-kopf{padding-left:0;padding-right:100px;min-height:34px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:4px}
.tabs button{border:none;background:none;padding:5px 11px;font-size:13px;border-bottom:2px solid transparent;border-radius:0;color:var(--muted)}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
/* Schlanke Variante der .card für reine Bedienzeilen (Ergebnispräsentation:
 * Stimme · Ansicht · Wurzel · Bericht). Statt 18 px Innenabstand rundum nur
 * noch 6/12 — die Zeile trägt keinen Inhalt, nur Knöpfe. */
.card.toolbar-slim{padding:6px 12px}
/* A1/F1: deaktivierter Tab (z.B. „Sitze" ohne Sitzkonfiguration) ist aria-disabled,
   nicht disabled — daher hier eigenes Greyout. Klick bleibt möglich (zeigt Hinweis). */
.tabs button.tab-disabled{opacity:.5;cursor:not-allowed}
/* (Frühere globale Optionszeile entfernt — Union-/Hamburg-Schalter sitzen jetzt
   in den jeweiligen Tab-Toolbars. Regel bleibt für etwaige Altnutzung erhalten.) */
.option-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 2px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;vertical-align:middle;flex-shrink:0;box-sizing:border-box;border:1px solid rgba(0,0,0,.15)}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Überlauf-Menü in der Datensatz-Kopfzeile (kompakte Button-Reihe) */
.overflow-menu{position:relative;display:inline-block}
.overflow-menu>summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px;font-weight:700;line-height:1;user-select:none}
.overflow-menu>summary::-webkit-details-marker{display:none}
.overflow-menu>summary:hover{background:var(--chip)}
.overflow-menu[open]>summary{background:var(--chip)}
.overflow-menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:40;display:flex;flex-direction:column;gap:4px;min-width:200px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.overflow-menu-list button{text-align:left;width:100%}
.empty{padding:48px;text-align:center;color:var(--muted)}
.empty h3{margin:0 0 8px;color:var(--ink)}
/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(20,20,30,.45);display:none;align-items:center;justify-content:center;z-index:130} /* R277: über #progress-overlay (120), sonst wartet ein Dialog unsichtbar (Mannheim-Steckbrief) */
.modal-back.open{display:flex}
.modal{background:var(--panel);border-radius:12px;width:min(960px,92vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden}
.modal header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal header h3{margin:0;font-size:16px}
.modal .body{padding:18px;overflow:auto;flex:1}
.modal footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--panel-2)}
.karte-popup-overlay{position:fixed;inset:0;background:rgba(20,20,30,.55);display:flex;align-items:center;justify-content:center;z-index:60}
.karte-popup{background:var(--panel);border-radius:12px;width:min(1200px,97vw);max-height:97vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.32);overflow:hidden}
.karte-popup-header{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}
.karte-popup-header h3{margin:0;font-size:15px}
.karte-popup-body{padding:16px;overflow:auto;flex:1}
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.step{padding:3px 8px;border-radius:999px;background:var(--chip)}
.step.active{background:var(--accent);color:#fff}
.preview{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.preview table th, .preview table td{font-size:12px;padding:4px 6px;white-space:nowrap}
.preview tr.is-header{background:var(--highlight-soft)}
.preview tr.is-data-start{background:#e8f6ec}
.map-table th{background:var(--panel-2);text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.map-table td.col-name{font-weight:600;white-space:nowrap}
.map-table select{font-size:12px;padding:3px 4px}
.map-table .partycol{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.map-table tr.assigned-party td{background:#f6f9f3}
.map-table tr.assigned-meta td{background:#f4f7fc}
.badge{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--chip);color:var(--muted)}
.badge.assigned{background:#dcecd6;color:#2a5d24}
.badge-ok{background:#d4edda;color:#155724}
.badge-warn{background:#fff3cd;color:#856404}
.badge-err{background:#f8d7da;color:#721c24}
.pruef-table{font-size:13px;width:100%;border-collapse:collapse}
.pruef-table th{background:var(--panel-2);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:5px 8px}
.pruef-table td{padding:5px 8px;border-bottom:1px solid var(--border)}
.pruef-table tr:last-child td{border-bottom:none}
.help{font-size:12px;color:var(--muted);margin-top:4px}
.palette{display:flex;flex-wrap:wrap;gap:4px}
.swatch{width:24px;height:24px;border-radius:4px;border:2px solid transparent;cursor:pointer}
.swatch.sel{border-color:var(--focus-ink);transform:scale(1.05)}
details > summary{cursor:pointer;font-weight:500;color:var(--muted)}
details[open] > summary{color:var(--ink)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--tooltip-bg);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

/* ---- V7: Fortschritts-/Lade-Overlay ---- */
#progress-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(20,20,30,.35)}
#progress-overlay.active{display:flex}
#progress-overlay .progress-box{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:20px 24px;min-width:240px;max-width:80vw;text-align:center}
#progress-overlay .progress-spinner{width:28px;height:28px;margin:0 auto 12px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:progress-spin .8s linear infinite}
#progress-overlay .progress-label{font-size:13px;color:var(--ink);margin-bottom:12px}
#progress-overlay .progress-bar{height:8px;border-radius:6px;background:var(--accent-soft);overflow:hidden;position:relative}
#progress-overlay .progress-bar-fill{height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .15s ease}
/* R72 (08.09.2026, Michaels Befund "eine Fortschrittsanzeige laeuft nicht"):
   Die Animation lief ueber margin-left — eine LAYOUT-Eigenschaft, die der
   Hauptthread berechnet. Genau waehrend des langen Bauens steht der aber
   still, und der Balken fror ein: sichtbar, aber bewegungslos, also genau
   dann nutzlos, wenn er gebraucht wird. transform laeuft im Compositor und
   bewegt sich weiter, auch wenn JavaScript blockiert. Gleiches Bild. */
#progress-overlay .progress-bar.indeterminate .progress-bar-fill{width:40%;will-change:transform;animation:progress-indet 1.1s ease-in-out infinite}
@keyframes progress-spin{to{transform:rotate(360deg)}}
@keyframes progress-indet{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){
  #progress-overlay .progress-spinner{animation-duration:1.6s}
  #progress-overlay .progress-bar.indeterminate .progress-bar-fill{animation:none;width:100%;opacity:.6}
}
.kbd{font-family:ui-monospace,monospace;background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:12px}
/* A6: Tastatur-Kürzel-Übersicht im Hilfe-Dialog */
.shortcut-table{border-collapse:collapse;font-size:13px;margin-top:2px}
.shortcut-table td{padding:4px 10px 4px 0;vertical-align:top}
.shortcut-table kbd{font-family:ui-monospace,monospace;background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:12px;white-space:nowrap}

/* ---- V8: Barrierefreiheit ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Sichtbarer Fokusring für tastaturnavigierte Kartenregionen */
.map-wrap svg .region:focus-visible,
.map-wrap svg .region:focus{outline:none}
.map-wrap svg .region.kbd-focus{stroke:var(--ink) !important;stroke-width:2.2px !important;paint-order:stroke}
.map-wrap svg:focus{outline:2px solid var(--accent);outline-offset:2px}
.contrast-warn{color:var(--warn);font-size:11px;margin-left:6px}
.notice{padding:10px 12px;border-radius:8px;border:1px solid;font-size:13px}
.notice.info{background:#eef4fd;border-color:#cfdcf3;color:#1c3a7a}
.notice.warn{background:#fdf3e8;border-color:#f1d6b4;color:#7a4a1c}
.notice.ok{background:#eaf6ed;border-color:#bfdfc7;color:#22532e}
.notice.bad{background:#fbeaea;border-color:#f1c0c0;color:#8a1f1f}
/* Karte */
.map-wrap{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--map-bg)}
.map-wrap svg{display:block;width:100%;height:auto;max-height:70vh}
/* R67 B-4: es gibt genau ZWEI Grenzbreiten in der Karte, beide aus den
   Grundeinstellungen und beide in Bildschirmpunkten (non-scaling-stroke):
     dünn  = --grenze-basis-breite   (die Ebene selbst)
     fett  = --aggr-outline-width    (die nächsthöhere Ebene, s. unten)
   Vorher standen hier und an drei weiteren Stellen vier verschiedene feste
   Zahlen (0,35 / 0,4 / 0,9 / 1,2) für dieselbe dünne Linie — daher wirkten die
   Grenzen von Karte zu Karte ungleich (Michaels Befund 04.09.).
   `selected` und `kbd-focus` bleiben Ausnahmen: sie markieren einen ZUSTAND,
   keine Ebene, und dürfen sich absichtlich abheben. */
.region,.region path{stroke:#fff;stroke-width:var(--grenze-basis-breite, 0.4);cursor:pointer;transition:opacity .12s;fill-opacity:1 !important}
.region.matched,.region.matched path{fill:#9ec5ee !important}
.region.unmatched,.region.unmatched path{fill:#f3c1a4 !important}
/* Schraffur für Regionen ohne Stimmdaten – fill via SVG-Pattern (JS setzt fill="url(#wt-nodata-hatch)") */
.region.choropleth-nodata{opacity:1}
.region.hover{opacity:.7}
.region.selected,.region.selected path{stroke:#1a1a1f !important;stroke-width:1.2 !important}
/* P4 Stufe C2: Wahlkreis-aus-Gemeinden — n:m-Städte (Hamburg, Berlin, ...)
   fallen auf die amtliche WKR-Geometrie zurück (data-wkr-fallback, gesetzt in
   generiere_karte.js::baueWkrAusGemeinden). Normale Einfärbung bleibt
   unverändert, nur der Rand wird dezent gestrichelt — "dezent markieren"
   statt auffälliger Schraffurfläche (Michaels Entscheidung, 2026-07-02). */
.region[data-wkr-fallback="1"]{stroke-dasharray:2.5 1.5;stroke-width:var(--grenze-basis-breite, 0.4);stroke:#666}
/* Aggregations-Außenkontur (R66/R67). KEINE Filter (drop-shadow auf <g> rendert
   WKWebView/Tauri nicht; CSS-filter überschreibt zudem filter="url(…)"-Attribute).
   Stattdessen: je Gruppe eine .aggr-outline-layer mit Geometrie-Klonen, die nur
   einen Strich tragen, MASKIERT auf das Gebiet außerhalb der Gruppe (R66) und
   gesammelt in einer .aggr-outline-overlay, die als letztes Kind des SVG
   gezeichnet wird (R67 B-2 — vorher lag sie in der Gruppe und wurde von den
   Füllungen der NACHBARGRUPPE zugemalt).

   Breite: R66 verdoppelte sie, weil die Maske die innere Hälfte wegschneidet.
   Mit der Überlagerung ist das falsch — zwei benachbarte Gruppen legen ihre
   Außenhälften aneinander und ergäben die doppelte Linie. Deshalb wieder die
   einfache Breite: zwischen zwei Gruppen genau der eingestellte Wert, am
   Kartenrand die Hälfte (Michaels Entscheidung 04.09.).

   `vector-effect: non-scaling-stroke` ist Pflicht: der Klon-Loop entfernt id,
   data-id und class, damit weder doppelte IDs noch Hover-Regeln greifen — und
   entfernt damit genau die Haken, an denen der gapfix-Block der Regionen
   hängt. Ohne diese Zeile stünde die Breite in viewBox-Einheiten und wäre auf
   jeder Karte eine andere (Michaels Befund 04.09.).

   HINWEIS: die festen Farben hier sind nur der FALLBACK. Für gefärbte Regionen
   setzt choropleth.js (_colorRegion/_applyAggrOutline) je Region eine adaptive
   Konturfarbe INLINE mit !important auf den Ghost-Klon. */
.aggr-outline-overlay{pointer-events:none}
.aggr-outline-overlay .aggr-outline-layer,
.aggr-outline-overlay .aggr-outline-layer *{
  fill:none !important;
  stroke:var(--aggr-outline-hell, #14141a) !important;
  stroke-width:var(--aggr-outline-width, var(--grenze-basis-breite, 0.4)) !important;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* R69 C-2 (07.09.2026): die Kontur der GEZEIGTEN Ebene ist dünn wie ihre
   eigenen Regionsstriche; fett ist ausschließlich, was DARÜBER liegt. Beim
   Aggregieren gibt es für die gezeigte Ebene keinen Regionsstrich mehr (die
   Binnengrenzen sind zugemalt) — ihre Außengrenze kommt aus dieser Schicht
   und muss deshalb dieselbe Stärke tragen wie eine gewöhnliche Ebenengrenze. */
.aggr-outline-overlay .aggr-outline-layer.aggr-outline-duenn,
.aggr-outline-overlay .aggr-outline-layer.aggr-outline-duenn *{
  stroke-width:var(--grenze-basis-breite, 0.4) !important;
}
html.is-dark .aggr-outline-overlay{--aggr-outline-hell:var(--aggr-outline-dunkel, #f2f2f5)}
.zoom-controls{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.92);border-radius:8px;padding:4px;border:1px solid var(--line);z-index:4;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.zoom-controls button{width:30px;height:30px;padding:0;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.map-wrap{user-select:none}
.map-wrap.panning{cursor:grabbing}
/* Bericht-Vorschau (Tauri-Ausgaberoutine): Overlay + Panel + iframe-Preview */
.report-preview-back{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:24px}
.report-preview-panel{background:var(--panel);border-radius:12px;width:min(900px,94vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.32);overflow:hidden}
.report-preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.report-preview-x{border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--fg);padding:2px 6px;border-radius:6px}
.report-preview-x:hover{background:var(--chip)}
.report-preview-frame{flex:1;width:100%;min-height:50vh;border:0;background:#6b7177}
/* B7: Blätter-Navigation über der Vorschau (◀ Seite x/y ▶). */
.report-preview-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.report-preview-nav button{border:1px solid var(--line);background:var(--color-background,#fff);color:var(--fg);width:30px;height:26px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1}
.report-preview-nav button:disabled{opacity:.4;cursor:default}
.report-preview-nav button:not(:disabled):hover{background:var(--chip)}
.report-preview-pagelbl{font-size:12px;color:var(--muted);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.report-preview-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
/* ── Schritt 4: Anordnen-Editor (Palette + A4-Canvas, Drag&Drop) ── */
.report-editor-back{position:fixed;inset:0;z-index:62;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:24px}
.report-editor-panel{background:var(--panel);border-radius:12px;width:min(1040px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.32);overflow:hidden}
.report-editor-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.report-editor-x{border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--fg);padding:2px 6px;border-radius:6px}
.report-editor-x:hover{background:var(--chip)}
.report-editor-body{flex:1;display:flex;min-height:0;overflow:hidden}
.report-editor-palette{width:230px;flex:0 0 230px;border-right:1px solid var(--line);padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.report-editor-pal-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.report-editor-tips{display:flex;flex-direction:column;gap:6px}
.report-editor-tip{display:flex;align-items:flex-start;gap:6px;font-size:11px;line-height:1.4;background:var(--chip);border-radius:6px;padding:6px 8px}
.report-editor-tip-txt{flex:1}
.report-editor-tip-btn{flex:0 0 auto;font-size:10px;padding:2px 7px;border:1px solid var(--line);border-radius:5px;background:var(--panel);cursor:pointer;white-space:nowrap}
.report-editor-tip-btn:hover{border-color:var(--accent,#2A7F7F)}
/* A4-Canvas: hellgrauer Arbeitsbereich, das „Blatt" in A4-Proportion zentriert. */
.report-editor-canvas-wrap{flex:1;min-width:0;overflow-y:auto;background:repeating-linear-gradient(135deg,rgba(0,0,0,.015) 0 8px,transparent 8px 16px),var(--chip);padding:18px;display:flex;justify-content:center}
.report-editor-canvas{width:100%;max-width:520px;background:#fff;color:#1a1a1a;box-shadow:0 1px 8px rgba(0,0,0,.18);border-radius:3px;padding:16px;min-height:calc(520px*1.414/1)}
.report-editor-group{font:700 13px Georgia,serif;color:#2A5B7F;border-bottom:2px solid #2A5B7F;padding-bottom:4px;margin:14px 0 8px}
.report-editor-group:first-child{margin-top:0}
.report-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.report-editor-tile{grid-column:span 1;border:1px solid #d8d8d8;border-radius:7px;background:#fafafa;padding:8px 10px;cursor:grab;display:flex;flex-direction:column;gap:5px;transition:box-shadow .12s,border-color .12s}
.report-editor-tile.is-full{grid-column:1 / -1}
.report-editor-tile:hover{border-color:#b9b9b9;box-shadow:0 1px 6px rgba(0,0,0,.1)}
.report-editor-tile.dragging{opacity:.45;cursor:grabbing}
.report-editor-tile.drop-target{border-color:#2A7F7F;box-shadow:0 0 0 2px rgba(42,127,127,.25)}
.report-editor-tile-top{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:#777}
.report-editor-tile-type{font-weight:600}
.report-editor-tile-grip{color:#bbb;font-size:13px;line-height:1}
.report-editor-tile-title{font-size:12.5px;font-weight:600;color:#222;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.report-editor-tile-acts{display:flex;gap:4px;margin-top:auto;padding-top:2px}
.report-editor-tile-acts button{width:24px;height:22px;padding:0;line-height:1;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;font-size:11px}
.report-editor-tile-acts button:hover{border-color:#888}
.report-editor-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.report-editor-legend{margin-top:auto}
.map-tooltip{position:absolute;pointer-events:none;background:var(--tooltip-bg);color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;transform:translate(10px,-100%);white-space:nowrap;display:none;z-index:5}
/* Task D-2 (Runde 31, 2026-08-04): Gemeinden mit Sub-GDE-Anbau (feinere
   Untergliederung verfügbar) — dezenter Rahmen/Akzent, additiv zu .map-tooltip. */
.map-tooltip--subgde{border:1px solid var(--farbe-subgde-akzent);box-shadow:0 0 0 2px color-mix(in srgb, var(--farbe-subgde-akzent) 25%, transparent)}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}
.legend .sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #ddd;vertical-align:middle;margin-right:4px}
/* Karten-Legende als sauberes mehrspaltiges Raster: gleich große Farbrechtecke,
   linksbündig untereinander; Einträge füllen 2–3 Spalten je nach Platz. Ersetzt
   die frühere umschaltbare „Hamburg"-Legende (Bildschirm immer klassisch). */
.map-legend{margin-top:10px;font-size:12px;color:var(--muted)}
.map-legend .legend-title,.map-legend .legend-party-head{font-weight:600;font-size:13px;color:var(--text,inherit);margin-bottom:6px}
.map-legend .legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 18px;align-items:center}
.map-legend .legend-item{display:flex;align-items:center;gap:7px;min-width:0}
.map-legend .legend-item .sw{flex:0 0 auto;width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(0,0,0,.06)}
.map-legend .legend-item .legend-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
/* Mehrheits-Legende: zwei Farbfelder (absolut/relativ) je Eintrag */
.map-legend .legend-item .sw+.sw{margin-left:-3px}
/* A5: schmale Statusspalte mit Symbol (✓/−/+) als zweite Codierung neben der Farbe */
.match-table .status-col{width:1.6em;text-align:center;font-weight:600;padding-left:4px;padding-right:4px}
.match-table tr.ok td.status-col{color:#22532e}
.match-table tr.miss td.status-col{color:#9a3412}
.match-table tr.extra td.status-col{color:#5b21b6}
.match-table tr.ok td{background:#f3faf5}
.match-table tr.miss td{background:#fdf1ea}
.match-table tr.extra td{background:#f7f3ff}
.match-table tr.selected td{background:var(--highlight) !important;font-weight:600}
.match-table tr.clickable{cursor:pointer}
.match-table tr.clickable:hover td{background:var(--accent-soft)}
.match-table td.id{font-family:ui-monospace,monospace;font-size:12px}
.map-list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.map-list-item:hover{background:var(--bg)}
.gebiet-list{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.gebiet-row{padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;gap:8px}
.gebiet-row:last-child{border-bottom:none}
.gebiet-row:hover{background:var(--accent-soft)}
.gebiet-row.active{background:var(--highlight);font-weight:600}
.gebiet-row .gid{color:var(--muted);font-family:ui-monospace,monospace;font-size:11px}

/* Wahl-Dashboard-Matrix (Wahlgebiet × Granularität) */
.wahl-dashboard-matrix{border-collapse:collapse;width:100%;font-size:13px}
.wahl-dashboard-matrix th{white-space:nowrap;text-align:center;background:var(--panel-2,var(--panel))}
.wahl-dashboard-matrix .wahl-dashboard-gebiet{font-weight:600;white-space:nowrap;position:sticky;left:0;background:var(--panel)}
.wahl-dashboard-luecke{text-align:center;color:var(--muted);opacity:.5}
.wahl-dashboard-zelle{text-align:center}
.wahl-dashboard-link{font-size:12px;padding:3px 8px;margin:1px}
.wahl-dashboard-link.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Drag-&-Drop-Import-Overlay (V6) */
#drop-overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(45,95,184,.12);backdrop-filter:blur(1px)}
#drop-overlay.active{display:flex}
#drop-overlay .drop-overlay-inner{pointer-events:none;background:var(--panel);border:2px dashed var(--accent);
  border-radius:16px;padding:36px 48px;text-align:center;color:var(--accent);font-weight:600;font-size:16px;
  box-shadow:0 8px 30px rgba(20,20,30,.18)}
#drop-overlay .drop-overlay-icon{font-size:40px;line-height:1;margin-bottom:10px}
#drop-overlay .drop-overlay-hint{margin-top:6px;font-size:12px;font-weight:400;color:var(--muted)}
/* ── Psephos-Cockpit (Block C, 23.09.2026) ─────────────────────────────────
   Form nach dem Entwurf Block 0 (Streifen, E-18). Nur CSS-Variablen; die
   Typfarben sind eigene Variablen, damit sie im Dunkelmodus nachgezogen werden. */
:root{ --ck-btw:#2d5fb8; --ck-ew:#6a4bc4; --ck-ltw:#1f7a3a; --ck-sts:#b8541a; --ck-kw:#8a6d3b; --ck-and:#6f7a86; --ck-vk:#b21f1f; }
html.is-dark{ --ck-btw:#5b8def; --ck-ew:#9a82ea; --ck-ltw:#4fb56e; --ck-sts:#e0883f; --ck-kw:#c39a5a; --ck-and:#98a2ad; --ck-vk:#e2615f; }
.ck-t-btw{--ck-typ:var(--ck-btw)} .ck-t-ew{--ck-typ:var(--ck-ew)} .ck-t-ltw{--ck-typ:var(--ck-ltw)} .ck-t-sts{--ck-typ:var(--ck-sts)}
.ck-t-kw{--ck-typ:var(--ck-kw)} .ck-t-and{--ck-typ:var(--ck-and)} .ck-t-vk{--ck-typ:var(--ck-vk)}
.ck-cockpit{display:flex;flex-direction:column;gap:12px;max-width:1180px;width:100%;margin:0 auto}
.ck-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ck-kopf h1{font-size:18px;margin:0;font-weight:650}
.ck-spacer{flex:1}
.ck-schalter{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.ck-suche{position:relative;width:260px;max-width:100%}
.ck-suche input{width:100%}
.ck-vorschlaege{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);max-height:340px;overflow:auto}
.ck-vorschlag,.ck-leer{padding:6px 10px;display:flex;gap:6px;align-items:center;cursor:pointer}
.ck-vorschlag:hover,.ck-vorschlag.aktiv{background:var(--hover)}
/* Streifen */
.ck-streifen{display:flex;align-items:stretch;padding:0;overflow:hidden}
.ck-pfeil{border:0;border-radius:0;background:transparent;font-size:20px;padding:0 14px;color:var(--muted)}
.ck-pfeil:hover{color:var(--ink);background:var(--hover)}
.ck-spur{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ck-band{display:flex;gap:4px;padding:10px 0 8px;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
.ck-jahr{flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;padding:6px 0;color:var(--muted)}
.ck-jahr:hover{background:var(--hover)}
.ck-zahl{font-variant-numeric:tabular-nums;font-size:15px;transition:font-size .3s,color .3s}
.ck-jahr.dek .ck-zahl{font-weight:600}
.ck-jahr.an .ck-zahl{font-size:22px;font-weight:700;color:var(--accent)}
.ck-punkte{display:flex;gap:3px;height:8px;align-items:center}
.ck-pkt{width:7px;height:7px;border-radius:50%;background:var(--ck-typ)}
.ck-luecke{flex:0 0 14px;align-self:center;height:1px;border-top:1px dashed var(--line);margin-bottom:14px}
/* Kacheln */
.ck-jahr-kopf{display:flex;align-items:baseline;gap:10px;margin:2px 2px -2px}
.ck-jahr-kopf h2{margin:0;font-size:16px}
.ck-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
.ck-kachel{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px 10px 14px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.ck-kachel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ck-typ)}
.ck-kachel:hover{transform:translateY(-1px);box-shadow:var(--shadow);background:var(--panel)}
.ck-kachel.an{border-color:var(--ck-typ);box-shadow:0 0 0 1px var(--ck-typ),var(--shadow)}
.ck-z1{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ck-typ{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:4px;color:#fff;background:var(--ck-typ)}
.ck-titel{font-weight:650;font-size:14px;line-height:1.25}
.ck-klein{font-size:12px;color:var(--muted)}
.ck-badges{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.ck-minibalken{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--chip)}
.ck-minibalken span{display:block;height:100%}
.ck-fehlt{color:var(--warn);font-size:11px}
/* Fokus */
.ck-fokus{padding:0;overflow:hidden}
.ck-fokus-kopf{display:flex;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.ck-band-typ{width:5px;border-radius:3px;background:var(--ck-typ)}
.ck-fokus-kopf h2{margin:0;font-size:19px}
.ck-krume{font-size:12px;color:var(--muted)}
.ck-krume a{color:var(--accent);text-decoration:none}
.ck-raum{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:10px 16px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ck-raum button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:7px 12px;min-width:0}
.ck-raum .ck-raum-nach{align-items:flex-end;text-align:right;justify-self:end}
.ck-raum button[disabled]{opacity:.45;cursor:default}
.ck-r1{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.ck-r2{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ck-raum-mitte{font-size:12px;text-align:center}
.ck-raum-mitte b{color:var(--ink)}
.ck-fokus-leib{display:grid;grid-template-columns:230px 1fr;gap:18px;padding:16px}
.ck-karten{display:flex;flex-direction:column;gap:10px;align-items:center}
.ck-minikarte{width:220px;height:220px;display:flex;align-items:center;justify-content:center;background:var(--map-bg);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ck-minikarte svg{width:100%;height:100%}
.ck-raster .ck-kz rect{fill:var(--chip);stroke:var(--panel);stroke-width:2}
.ck-raster .ck-kz text{font-size:10px;font-weight:600;fill:var(--muted);pointer-events:none}
.ck-raster .ck-kz circle{fill:var(--accent)}
.ck-raster .ck-kz.gedeckt rect{fill:var(--accent-soft)} .ck-raster .ck-kz.gedeckt text{fill:var(--accent)}
.ck-raster .ck-kz.haupt rect{fill:var(--accent);opacity:.55} .ck-raster .ck-kz.haupt text{fill:#fff}
.ck-raster .ck-kz.fokus rect{fill:var(--accent)} .ck-raster .ck-kz.fokus text,.ck-raster .ck-kz.fokus circle{fill:#fff}
.ck-raster .ck-kz.klick{cursor:pointer}
.ck-zahlen{display:flex;flex-direction:column;gap:12px;min-width:0}
.ck-granwahl button{padding:3px 9px;font-size:12px}
.ck-granwahl button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:600}
.ck-kennzahlen{display:flex;gap:18px;flex-wrap:wrap}
.ck-kennzahlen div{display:flex;flex-direction:column}
.ck-kennzahlen b{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.ck-kennzahlen span{font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.ck-balken{display:flex;flex-direction:column;gap:5px}
.ck-zeile{display:grid;grid-template-columns:120px 1fr 52px;gap:8px;align-items:center;font-size:13px}
.ck-spur2{height:12px;background:var(--chip);border-radius:3px;overflow:hidden}
.ck-spur2 span{display:block;height:100%;border-radius:3px}
.ck-pz{text-align:right;font-variant-numeric:tabular-nums}
.ck-datei{font-size:12px;color:var(--muted);background:var(--chip);padding:3px 6px;border-radius:4px;word-break:break-all}
.ck-teil{border-top:1px solid var(--line)}
.ck-teil-kopf{width:100%;text-align:left;border:0;border-radius:0;padding:10px 16px;background:transparent;font-weight:600}
.ck-teil-kopf:hover{background:var(--hover)}
.ck-teil-inhalt{padding:4px 16px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ck-landgr{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;background:var(--panel-2)}
.ck-land{border:0;background:transparent;padding:0;font-weight:600;cursor:pointer}
.ck-land:hover,.ck-land.an{color:var(--accent);background:transparent}
.ck-land.aus{color:var(--muted);cursor:default;font-weight:500}
.ck-staedte{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ck-stadt{font-size:12px;padding:2px 8px;border-radius:999px}
.ck-stadt.an{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.ck-dup{color:var(--warn);font-weight:700}
.ck-straenge{display:flex;flex-direction:column;gap:8px}
.ck-strang{padding:10px 14px}
.ck-strang summary{cursor:pointer;font-weight:600}
.ck-strang ul{margin:8px 0 0;padding-left:20px;font-size:13px}
.ck-tasten{font-size:12px}
@media (max-width:760px){ .ck-fokus-leib{grid-template-columns:1fr} .ck-raum{grid-template-columns:1fr 1fr} .ck-raum-mitte{display:none} .ck-suche{width:100%} }
@media (prefers-reduced-motion:reduce){ .ck-band,.ck-kachel,.ck-zahl{transition:none} }

/* Psephos-Cockpit Block D (23.09.2026): Rückweg-Knopf im DS-Kopf, Seitenleiste */
.ck-heim{border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);width:28px;height:28px;padding:0;margin-right:8px;font-size:15px;line-height:1;vertical-align:3px}
.ck-heim:hover{background:var(--hover);color:var(--accent)}
.sl-cockpit .t{font-size:14px}
.sl-suche{padding:8px 12px 4px}
.sl-suche input{width:100%}
.sl-treffer .t{display:flex;align-items:center;gap:4px;font-weight:500}
.sl-kopf{cursor:default;margin-top:6px}
.sl-kopf:hover{background:transparent;color:var(--muted)}

/* Psephos-Cockpit H (23.09.2026): Union, Werkzeuge, Papierkorb */
.ck-union{white-space:nowrap}
.ck-dateizeile{align-items:center;gap:6px;margin-top:6px}
.ck-loeschen{border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);padding:2px 7px;font-size:13px;line-height:1.3;color:var(--muted)}
.ck-loeschen:hover{color:#b21f1f;border-color:#b21f1f}
.ck-sammelloeschen{border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);padding:3px 9px;font-size:13px;color:var(--muted);white-space:nowrap}
.ck-sammelloeschen:hover{color:#b21f1f;border-color:#b21f1f}
.ck-werkzeuge{position:relative;display:inline-block}
.ck-werkzeuge>summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);padding:4px 10px;user-select:none}
.ck-werkzeuge>summary::-webkit-details-marker{display:none}
.ck-werkzeuge[open]>summary{background:var(--hover)}
.ck-werkzeuge-menue{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:190px;display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.ck-werkzeuge-menue button{text-align:left;border:none;background:transparent;padding:6px 8px;border-radius:4px}
.ck-werkzeuge-menue button:hover{background:var(--hover)}

/* R90 · Prüfampel im Cockpit */
.ck-ampel{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;flex:none;border:1px solid rgba(0,0,0,.15)}
.ck-ampel.klick{cursor:pointer;width:12px;height:12px}
.ck-ampel.klick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ck-ampel-gruen{background:#2e9e4f}
.ck-ampel-gelb{background:#e5b300}
.ck-ampel-rot{background:#d43c32}
.ck-ampel-grau{background:transparent;border:1.5px dashed var(--muted,#999)}
.ck-ampel-gr{display:inline-flex;align-items:center;gap:6px}
.ck-ampel-veraltet{box-shadow:0 0 0 2px var(--bg,#fff),0 0 0 3.5px var(--muted,#999);opacity:.55}
.ck-ampel-knopf.veraltet{border-color:#e5b300}
.ck-lauf-balken{height:8px;border-radius:4px;background:var(--line,#ddd);overflow:hidden}
.ck-lauf-balken>span{display:block;height:100%;background:var(--accent,#2e6fd4);transition:width .2s}
.ck-entbehrlich{font-size:11px;font-weight:600;color:var(--muted,#777);border:1px dashed var(--line);border-radius:4px;padding:1px 5px;white-space:nowrap}
.ck-entbehrlich.klein{border:0;padding:0}
.ck-gerda{display:inline-block;font-size:9px;font-weight:700;line-height:12px;min-width:12px;text-align:center;color:#fff;background:#8a6d00;border-radius:3px;margin-left:3px;vertical-align:middle;cursor:help} /* R155 GERDA-Ersatzquelle */
.ck-befunde{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ck-bef-rot b{color:#d43c32}.ck-bef-gelb b{color:#b08800}
.ck-bsp{font-size:11px;margin-top:2px;word-break:break-all}
/* R91/F-1 · schwebender Tooltip (ersetzt title in WKWebView) */
.ui-tip{position:fixed;z-index:10000;display:none;pointer-events:none;max-width:420px;white-space:pre-line;background:var(--tooltip-bg,#222);color:#fff;padding:6px 9px;border-radius:6px;font-size:12px;line-height:1.4;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ck-befunde{margin:0;padding-left:18px}.ck-befunde li{margin:4px 0}
.ck-bef-rot b{color:#d43c32}.ck-bef-gelb b{color:#a07d00}
.ck-bsp{font-size:11px;margin-top:2px}
/* R91/T-6 · Teilsicht-Krume */
.teilsicht-leiste{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.teilsicht-leiste .linkish{background:none;border:none;padding:0;color:var(--accent);cursor:pointer;font:inherit}
/* R94 · simulierte Teil-DS (Teilsicht ohne eigene Datei) */
.ck-stadt.teilsicht,.ck-land.teilsicht{border-style:dashed}
.ck-ts{color:var(--muted);font-size:11px}
/* R94 · DS-Kopf: Ebenenkette einzeilig, kürzt mit „…" statt in die Tabs zu laufen */
.ds-kopf-info{display:flex;align-items:baseline;min-width:0;max-width:100%;white-space:nowrap}
.ds-kopf-ebenen{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.ds-kopf-zahlen{flex:none}

/* R96: nur für den Bruchteil eines Frames gesetzt (maps/choropleth.js) —
   zwingt WebKit, non-scaling-stroke nach der ersten echten Größe neu zu rechnen. */
svg.ps-nss-refresh path, svg.ps-nss-refresh g{vector-effect:none !important}

/* R238: Teildatensätze als eigene Karte unter den Kacheln; Werkstatt; Statuszeile */
.ck-teil.card{padding:0;margin:10px 0;border-top:0}
.ck-werkstatt .ck-kopf h1{margin:0 8px}
.ck-staedte-status{font-size:12px;padding:6px 2px}

/* ── R254 · Übersicht der Stadtanhänge (views/staedte_uebersicht.js) ───────── */
:root{ --su-gebaut:#2d5fb8; --su-abgeleitet:#8a6bbf; --su-datensatz:#0f7c74; --su-teildatensatz:#5fb3a8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --su-gebaut:#5b8def; --su-abgeleitet:#a98be0; --su-datensatz:#2bb3a6; --su-teildatensatz:#8fd6cc; } }
:root[data-theme="dark"]{ --su-gebaut:#5b8def; --su-abgeleitet:#a98be0; --su-datensatz:#2bb3a6; --su-teildatensatz:#8fd6cc; }
/* R280: Stadtstaaten */
.su-sw.su-art-datensatz{background:var(--su-datensatz)} .su-sw.su-art-teildatensatz{background:var(--su-teildatensatz)}
.su-art-datensatz-f{fill:var(--su-datensatz)} .su-art-teildatensatz-f{fill:var(--su-teildatensatz)}
.su-kachel.su-art-datensatz{border-top-color:var(--su-datensatz)} .su-kachel.su-art-teildatensatz{border-top-color:var(--su-teildatensatz)}
.su-art-datensatz .su-art-etikett{background:var(--su-datensatz)} .su-art-teildatensatz .su-art-etikett{background:var(--su-teildatensatz);color:#0b3b37}
.su{display:flex;flex-direction:column;gap:12px}
.su-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.su-kopf h2{margin:0;font-size:20px}
.su-lauf{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.su-lauf-kopf{display:flex;justify-content:space-between;gap:12px}
.su-lauf-text{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-balken{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.su-balken.klein{height:5px;margin-top:4px}
.su-balken-fuell{height:100%;background:var(--accent);transition:width .2s ease}
.su-zahlen{display:flex;gap:10px;flex-wrap:wrap}
.su-zahl{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;min-width:110px}
.su-zahl b{font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.su-zahl span{font-size:12px;color:var(--muted)}
.su-zahl.su-ton-ok b{color:var(--ok)} .su-zahl.su-ton-warn b{color:var(--warn)} .su-zahl.su-ton-bad b{color:var(--bad)}
.su-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.su-legende span{display:inline-flex;align-items:center;gap:5px}
.su-leg-trenn{margin-left:6px}
.su-sw{display:inline-block;width:11px;height:11px;border-radius:50%}
.su-sw.su-art-gebaut{background:var(--su-gebaut)} .su-sw.su-art-abgeleitet{background:var(--su-abgeleitet)}
.su-ring{display:inline-block;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--muted);flex-shrink:0}
.su-ring.su-z-wbz{border-color:var(--ok)} .su-ring.su-z-gemischt{border-color:var(--warn)} .su-ring.su-z-keine{border-color:var(--bad)}
.su-raster{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.1fr);gap:12px;align-items:start}
@media (max-width:900px){.su-raster{grid-template-columns:1fr}}
.su-karte-box{padding:8px}
.su-karte{width:100%;height:auto;max-height:78vh;display:block}
.su-k-kreis{fill:none;stroke:var(--line);stroke-width:.6}
.su-k-land{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linejoin:round}
.su-punkt{cursor:pointer;outline:none}
.su-punkt .su-ring-k{fill:var(--panel);stroke:var(--muted);stroke-width:3}
.su-punkt.su-z-wbz .su-ring-k{stroke:var(--ok)} .su-punkt.su-z-gemischt .su-ring-k{stroke:var(--warn)} .su-punkt.su-z-keine .su-ring-k{stroke:var(--bad)}
.su-art-gebaut-f{fill:var(--su-gebaut)} .su-art-abgeleitet-f{fill:var(--su-abgeleitet)}
.su-punkt:hover .su-ring-k,.su-punkt:focus .su-ring-k{stroke-width:5}
.su-liste{padding:6px 0;max-height:78vh;overflow:auto}
.su-liste-kopf{padding:4px 12px 8px;font-size:12px}
.su-liste .su-aktiv{font-weight:700;color:var(--ink)}
.su-liste ul{list-style:none;margin:0;padding:0}
.su-zeile{display:grid;grid-template-columns:minmax(140px,1.4fr) 1fr 36px 52px 40px;gap:10px;align-items:center;padding:6px 12px;cursor:pointer;border-top:1px solid var(--line)}
.su-zeile:hover,.su-zeile:focus{background:var(--accent-soft);outline:none}
.su-zeile-name{display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-zeile-zahl{text-align:right;font-variant-numeric:tabular-nums}
.su-warn{color:var(--warn);font-size:12px;text-align:right}
.su-stapel{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line)}
.su-stapel i{display:block;height:100%}
.su-ton-ok{background:var(--ok)} .su-ton-warn{background:var(--warn)} .su-ton-bad{background:var(--bad)}
.su-ton-ok-t{color:var(--ok);font-weight:700} .su-ton-bad-t{color:var(--bad);font-weight:700}
.su-kartenleiste{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px}
.su-chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2px 9px}
.su-hinweis{font-size:12px;margin:0}
.su-gruppe h3{margin:6px 0 8px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.su-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.su-kachel{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--su-abgeleitet);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;cursor:default;user-select:none;outline:none}
.su-kachel.su-art-gebaut{border-top-color:var(--su-gebaut)}
.su-kachel:hover,.su-kachel:focus{box-shadow:0 0 0 2px var(--accent-soft);border-color:var(--accent)}
.su-kachel.su-fehler{border-top-color:var(--bad)}
.su-k-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.su-k-titel{font-weight:700;font-size:15px}
.su-art-etikett{font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:4px;color:#fff;background:var(--su-abgeleitet)}
.su-art-gebaut .su-art-etikett{background:var(--su-gebaut)}
.su-k-quelle{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-wbz-text{font-size:13px}
.su-jahrwarn{color:var(--warn);font-size:12px}
.su-traegt{font-size:12px;background:var(--warn-soft);color:var(--ink);border-radius:5px;padding:3px 7px}
.su-z-keine .su-traegt{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.su-zeilen{list-style:none;margin:0;padding:0;font-size:12px;display:flex;flex-direction:column;gap:3px}
.su-zeilen li{line-height:1.35}
.su-sym{display:inline-block;width:16px;text-align:center;font-weight:700}
.su-g-angezeigt .su-sym{color:var(--ok)} .su-g-teildeckung .su-sym{color:var(--warn)}
.su-g-nicht_gebunden .su-sym,.su-g-leer .su-sym,.su-g-dropdown_95 .su-sym,.su-g-ohne_einheiten .su-sym{color:var(--bad)}
.su-g-ebene_fehlt{color:var(--muted)}
.su-grund{margin-left:16px;color:var(--muted);font-size:11px}
.su-ebenen-ds{font-size:11px;border-top:1px dashed var(--line);padding-top:5px;margin-top:auto}
/* R255: Arbeitsplatz in der Übersicht */
.su-aktion{font-size:11px;padding:1px 7px;margin-left:4px}
.su-k-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px dashed var(--line);padding-top:5px}
.su-k-fuss .su-ebenen-ds{border-top:none;padding-top:0;margin-top:0}
.su-kand{font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:4px;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);margin-left:auto}
.su-kand-schalter{font-size:12px}

/* R257: baubare Anhänge — gestrichelt, grau, noch kein Anhang */
.su-sw.su-art-baubar{background:transparent;border:2px dashed var(--muted)}
.su-kachel.su-baubar{background:var(--panel-2);border:1px dashed var(--muted);border-top:4px dashed var(--muted)}
.su-kachel.su-baubar.su-bau-bereit{border-top-color:var(--accent)}
.su-kachel.su-baubar.su-bau-nicht_bestaetigt{opacity:.75}
.su-kachel.su-baubar .su-art-etikett{border-style:dashed}
.su-punkt .su-ring-baubar{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:3 3}
.su-baubar-zahl{font-size:12px;color:var(--muted);text-align:right;border:1px dashed var(--muted);border-radius:4px;padding:0 4px}
.su-zahl.su-ton-baubar b{color:var(--muted)}
.su-kachel.su-baubar.su-bau-gliederung_jung{opacity:.75}

/* R258: Städte ohne Anhang (Wahlbezirke liegen) — violett, Raute */
:root{--su-material:#7a4fb3;--su-material-soft:rgba(122,79,179,.14)}
@media (prefers-color-scheme: dark){:root{--su-material:#b48ae6;--su-material-soft:rgba(180,138,230,.16)}}
.su-sw.su-art-material{background:var(--su-material);border-radius:2px;transform:rotate(45deg)}
.su-punkt.su-material .su-material-f{fill:var(--su-material);fill-opacity:.85;stroke:var(--panel,#fff);stroke-width:1.2}
.su-punkt.su-material:hover .su-material-f,.su-punkt.su-material:focus .su-material-f{fill-opacity:1;stroke:var(--text,#000)}
.su-zahl.su-ton-material b{color:var(--su-material)}
.su-listen{display:flex;flex-direction:column;gap:10px;min-width:0}
.su-material-liste .su-liste-kopf{color:var(--su-material)}
.su-material-werk{border-left:4px solid var(--su-material);display:flex;flex-direction:column;gap:6px;margin:8px 0}
.su-material-werk h3{margin:0}
.su-kachel.su-material-k{border-top-color:var(--su-material)}
.su-material-bericht{border-top:1px dashed var(--line);padding-top:6px}
.su-jung{font-size:11px}
/* R259: Bedarf je Stadt ohne Anhang */
.su-bedarf{font-size:12px}
.su-bedarf-k{font-size:11px;font-weight:600}
.su-ton-warn-t{color:var(--warn)}

/* R266: offene Städte nach Bedarf — gefüllt = ohne WBZ-Karte baubar, hohl = WBZ-Karte nötig */
:root{--su-mat-ohne:#1f9e6e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--su-mat-ohne:#4cc996}}
:root[data-theme="dark"]{--su-mat-ohne:#4cc996}
.su-punkt.su-material .su-material-f.su-mat-ohne{fill:var(--su-mat-ohne)}
.su-punkt.su-material .su-material-f.su-mat-teils{fill:var(--su-mat-ohne);fill-opacity:.4;stroke:var(--su-mat-ohne);stroke-width:1.6}
.su-punkt.su-material .su-material-f.su-mat-noetig{fill:var(--panel,#fff);fill-opacity:1;stroke:var(--su-material);stroke-width:2}
.su-sw.su-art-material.su-mat-ohne{background:var(--su-mat-ohne)}
.su-sw.su-art-material.su-mat-teils{background:color-mix(in srgb,var(--su-mat-ohne) 40%,transparent);border:1.5px solid var(--su-mat-ohne)}
.su-sw.su-art-material.su-mat-noetig{background:transparent;border:2px solid var(--su-material)}
/* R266: Löschen */
.su-loeschen{color:var(--bad)}
.su-loeschen:hover:not([disabled]){border-color:var(--bad)}
/* R276: Stadtstaaten in der Übersicht der Stadtanhänge */
.su-stadtstaaten .su-stst{padding:6px 10px;border-top:1px solid var(--line)}
.su-stadtstaaten .su-stst-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.su-stadtstaaten .su-chip{cursor:pointer;font-size:.85em}

/* ── Handbuch (views/hilfe.js, 14.11.2026) ─────────────────────────── */
.hl-back{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center}
.hl-fenster{width:min(1040px,94vw);height:min(760px,90vh);background:var(--panel);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.hl-kopf{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.hl-spacer{flex:1}
.hl-rumpf{flex:1;display:flex;min-height:0}
.hl-nav{width:210px;flex:none;border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow:auto;background:var(--panel-2)}
.hl-nav button{text-align:left;border:0;background:transparent;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);font:inherit}
.hl-nav button:hover{background:var(--hover)}
.hl-nav button.an{background:var(--accent-soft);color:var(--accent);font-weight:600}
.hl-inhalt{flex:1;overflow:auto;padding:18px 28px 40px;line-height:1.55;font-size:14px;max-width:none}
.hl-inhalt h1{font-size:20px;margin:0 0 12px}
.hl-inhalt h2{font-size:15px;margin:22px 0 6px}
.hl-inhalt table{border-collapse:collapse;margin:8px 0;width:100%}
.hl-inhalt th,.hl-inhalt td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.hl-inhalt th{background:var(--hover-row)}
.hl-inhalt pre{background:var(--chip);padding:10px;border-radius:var(--radius-sm);font-size:12px;overflow:auto}
.hl-inhalt kbd{background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:12px}
.hl-inhalt a[data-seite]{color:var(--accent);cursor:pointer;text-decoration:underline}
.hl-menu{font-weight:600;white-space:nowrap}
.hl-tipp{margin-top:18px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm)}
.hl-glossar dt{font-weight:650;margin-top:12px}
.hl-glossar dd{margin:2px 0 0 0;color:var(--ink)}
.hl-frage{width:18px;height:18px;padding:0;border-radius:50%;font-size:11px;line-height:16px;border:1px solid var(--line);background:var(--chip);color:var(--muted);cursor:pointer;vertical-align:middle}
.hl-frage:hover{color:var(--accent);border-color:var(--accent)}
.hl-inhalt h3{font-size:14px;margin:16px 0 4px}

/* ── R348: Gebietskarte (kompaktes Popup auf der Karte) ─────────────────── */
:root{ --gk-breite:300px }
.gebiet-karte{position:absolute;z-index:4;width:var(--gk-breite);max-height:62%;display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.18);font-size:12px;transition:left .18s ease,top .18s ease;overflow:hidden}
.gebiet-karte.gk-leiste{width:auto;max-height:45%}
.gebiet-karte .gk-kopf{display:flex;align-items:center;gap:6px;padding:7px 8px 6px 11px;cursor:grab;border-bottom:1px solid var(--line);user-select:none}
.gebiet-karte .gk-kopf:active{cursor:grabbing}
.gebiet-karte .gk-titel{flex:1;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gebiet-karte .gk-x{border:0;background:none;padding:0 4px;font-size:13px;line-height:1;cursor:pointer;color:var(--muted,inherit)}
.gebiet-karte .gk-leib{padding:7px 11px 9px;overflow:auto;display:flex;flex-direction:column;gap:7px}
.gebiet-karte.gk-zu .gk-leib{display:none}
.gebiet-karte.gk-zu .gk-kopf{border-bottom:0}
.gebiet-karte .gk-unter{font-size:11px;line-height:1.35}
.gebiet-karte .gk-balken{display:flex;flex-direction:column;gap:3px}
.gebiet-karte .gk-zeile{display:grid;grid-template-columns:minmax(60px,92px) 1fr 44px;gap:6px;align-items:center}
.gebiet-karte .gk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gebiet-karte .gk-spur{height:9px;background:color-mix(in srgb,var(--line) 55%,transparent);border-radius:2px;overflow:hidden}
.gebiet-karte .gk-bar{display:block;height:100%;border-radius:2px}
.gebiet-karte .gk-pct{text-align:right;font-variant-numeric:tabular-nums}
.gebiet-karte .gk-fuss{display:flex;justify-content:flex-end;gap:6px}
.gebiet-karte .gk-fuss button{font-size:11px;padding:3px 8px}
.map-tooltip{z-index:6}
.map-wrap svg .gk-aktiv, .map-wrap svg .gk-aktiv path{stroke:var(--ink) !important;stroke-width:2.4px !important;paint-order:stroke}
@media (prefers-reduced-motion:reduce){ .gebiet-karte{transition:none} }

/* ── R348: Breitenklassen (html[data-breite]) ─────────────────────────────
 * kompakt < 1300 px · normal 1300–1900 (MacBook) · weit > 1900 (iMac) */
.dash-links{width:580px;max-width:52%;flex-shrink:0}
html[data-breite="kompakt"] .dash-links{width:440px;max-width:46%}
html[data-breite="weit"] .dash-links{width:clamp(580px,26vw,720px);max-width:40%}
/* Karte nutzt die sichtbare Höhe statt fester 70 vh */
.map-wrap svg{max-height:calc(100vh - 230px)}
html[data-breite="kompakt"] .map-wrap svg{max-height:calc(100vh - 200px)}
html[data-breite="weit"] .map-wrap svg{max-height:calc(100vh - 210px)}
html[data-breite="weit"] .gebiet-karte{--gk-breite:330px;font-size:12.5px}
html[data-breite="kompakt"] .gebiet-karte{--gk-breite:260px}

/* Kartenvollbild (Taste F) */
.map-wrap.karten-vollbild{position:fixed !important;inset:0;z-index:90;border-radius:0;border:0;display:flex;align-items:center;justify-content:center}
.map-wrap.karten-vollbild svg{width:100%;height:100%;max-height:100vh}
.map-wrap.karten-vollbild::after{content:"F oder Esc: Vollbild beenden";position:absolute;right:12px;bottom:10px;font-size:11px;opacity:.55;pointer-events:none}

/* R348: Mehrfachkarten und Cockpit je Breitenklasse */
.nb-karte{height:calc(100vh - 250px);min-height:380px}
.kk-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--kk-min,200px),1fr));gap:10px}
html[data-breite="kompakt"] .kk-gitter{--kk-min:180px}
html[data-breite="weit"] .kk-gitter{--kk-min:240px;gap:12px}
html[data-breite="weit"] .ck-cockpit{max-width:1640px}
html[data-breite="weit"] .ck-fokus-leib{grid-template-columns:280px 1fr}
html[data-breite="weit"] .ck-kacheln{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* WEB-R1 · Webfassung (nur lesen): Bedienelemente, die schreiben, ausblenden. */
body.psephos-web .nur-desktop { display: none !important; }