/* ============================================================
   geoimpact · SEP Design-System  v1.1
   Ausgerichtet auf das kanonische SEP Design System:
   UI-Schrift Helvetica Neue (Plattform-Stack, kein Webfont),
   Datenschrift Spline Sans Mono. Markengrün #4A8F2E.
   Gerundete SEP-Radien · Hell/Dunkel (Navy) über Tokens.
   ============================================================ */

/* SEP verwendet die Plattform-Schrift Helvetica Neue (kein UI-Webfont).
   Nur die Datenschrift Spline Sans Mono wird als Webfont geladen. */
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/spline-sans-mono.woff2') format('woff2');
}

/* ---------- Design-Tokens ---------- */
:root{
  color-scheme:light dark;

  /* Flächen: Seite grün-getönt, Karte reinweiss (SEP bg-soft / bg). */
  --bg:#F7F9F7;
  --surface:#FFFFFF;
  --surface-2:#EEF3EE;
  --surface-3:#E4EDE6;
  /* Textrampe warm-grün (SEP ink / gray / gray-2). */
  --ink:#1A1F1A;
  --ink-2:#5A6E5D;
  --ink-3:#8A9890;
  --line:#E4EDE6;
  --line-strong:#C8D6CB;

  /* Markengrün offiziell (SEP sep-green / hover / soft). */
  --accent:#4A8F2E;
  --accent-hover:#3F7A27;
  --accent-soft:#EEF6E6;
  --accent-text:#3F7A27;   /* dunkleres Grün für lesbaren Text/Links */
  --on-accent:#FFFFFF;

  --ok:#4A8F2E;
  --warn:#B06F14;          /* dunkleres SEP-Orange für Text auf Hell */
  --warn-soft:#FDF1DD;
  --crit:#B3362B;          /* SEP kennt kein Fehler-Rot — App-Wert behalten */
  --crit-soft:#F7E6E3;

  --mark:#4A8F2E;          /* Datenmarken (Charts, Sparklines) */
  --mark-muted:#A9CF92;    /* De-Emphase-Linie in Sparklines   */
  --meter-track:#DCE8DD;

  /* SEP-Sekundärmarke + Data-Viz-Rampe */
  --sep-green-bright:#7AB84A;
  --sep-blue:#2A73C4;
  --sep-cyan:#3EC5D4;
  --sep-orange:#F0A830;
  --viz-1:#7AB84A; --viz-2:#3EC5D4; --viz-3:#2A73C4; --viz-4:#F0A830;

  --map-water:#C7DAE2;
  --map-contour:#D6DFD4;
  --map-contour-strong:#C2CEC0;
  --map-tint-a:#F1F4EF;
  --map-tint-b:#E8EDE5;

  --shadow-1:0 1px 2px rgba(24,34,32,.05);
  --shadow-2:0 4px 16px rgba(24,34,32,.09);
  --shadow-3:0 12px 32px rgba(24,34,32,.14);

  /* SEP-Radien: Steuerelemente knapp gerundet, Karten/Panels weicher. */
  --r-s:3px; --r-m:8px; --r-l:14px;
  --sans:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    /* Dunkelflächen aus SEP-Navy abgeleitet. */
    --bg:#0E1820;
    --surface:#122030;
    --surface-2:#182B3D;
    --surface-3:#1E3346;
    --ink:#E6EEF5;
    --ink-2:#8AA0B0;
    --ink-3:#6B8296;
    --line:#22344A;
    --line-strong:#2F455E;

    /* Auf Navy trägt SEP das hellere Grün (sep-green-bright). */
    --accent:#7AB84A;
    --accent-hover:#8CC75F;
    --accent-soft:#183A1F;
    --accent-text:#8FCE62;
    --on-accent:#0E1820;

    --ok:#7AB84A;
    --warn:#E0A44A;
    --warn-soft:#3A2E17;
    --crit:#CE6A57;
    --crit-soft:#331E1A;

    --mark:#7AB84A;
    --mark-muted:#3F5A3A;
    --meter-track:#1E3346;

    --sep-green-bright:#7AB84A;
    --sep-blue:#4A90D9;
    --sep-cyan:#3EC5D4;
    --sep-orange:#F0A830;
    --viz-1:#7AB84A; --viz-2:#3EC5D4; --viz-3:#4A90D9; --viz-4:#F0A830;

    --map-water:#1B2A31;
    --map-contour:#242E27;
    --map-contour-strong:#2F3B32;
    --map-tint-a:#131916;
    --map-tint-b:#161D18;

    --shadow-1:0 1px 2px rgba(0,0,0,.25);
    --shadow-2:0 4px 16px rgba(0,0,0,.35);
    --shadow-3:0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1820; --surface:#122030; --surface-2:#182B3D; --surface-3:#1E3346;
  --ink:#E6EEF5; --ink-2:#8AA0B0; --ink-3:#6B8296; --line:#22344A; --line-strong:#2F455E;
  --accent:#7AB84A; --accent-hover:#8CC75F; --accent-soft:#183A1F; --accent-text:#8FCE62; --on-accent:#0E1820;
  --ok:#7AB84A; --warn:#E0A44A; --warn-soft:#3A2E17; --crit:#CE6A57; --crit-soft:#331E1A;
  --mark:#7AB84A; --mark-muted:#3F5A3A; --meter-track:#1E3346;
  --sep-green-bright:#7AB84A; --sep-blue:#4A90D9; --sep-cyan:#3EC5D4; --sep-orange:#F0A830;
  --viz-1:#7AB84A; --viz-2:#3EC5D4; --viz-3:#4A90D9; --viz-4:#F0A830;
  --map-water:#1B2A31; --map-contour:#242E27; --map-contour-strong:#2F3B32; --map-tint-a:#131916; --map-tint-b:#161D18;
  --shadow-1:0 1px 2px rgba(0,0,0,.25); --shadow-2:0 4px 16px rgba(0,0,0,.35); --shadow-3:0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#F7F9F7; --surface:#FFFFFF; --surface-2:#EEF3EE; --surface-3:#E4EDE6;
  --ink:#1A1F1A; --ink-2:#5A6E5D; --ink-3:#8A9890; --line:#E4EDE6; --line-strong:#C8D6CB;
  --accent:#4A8F2E; --accent-hover:#3F7A27; --accent-soft:#EEF6E6; --accent-text:#3F7A27; --on-accent:#FFFFFF;
  --ok:#4A8F2E; --warn:#B06F14; --warn-soft:#FDF1DD; --crit:#B3362B; --crit-soft:#F7E6E3;
  --mark:#4A8F2E; --mark-muted:#A9CF92; --meter-track:#DCE8DD;
  --sep-green-bright:#7AB84A; --sep-blue:#2A73C4; --sep-cyan:#3EC5D4; --sep-orange:#F0A830;
  --viz-1:#7AB84A; --viz-2:#3EC5D4; --viz-3:#2A73C4; --viz-4:#F0A830;
  --map-water:#C7DAE2; --map-contour:#D6DFD4; --map-contour-strong:#C2CEC0; --map-tint-a:#F1F4EF; --map-tint-b:#E8EDE5;
  --shadow-1:0 1px 2px rgba(24,34,32,.05); --shadow-2:0 4px 16px rgba(24,34,32,.09); --shadow-3:0 12px 32px rgba(24,34,32,.14);
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:14px; line-height:1.5;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft); color:var(--ink)}
a{color:var(--accent-text); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
svg.i{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- App-Gerüst ---------- */
#app{
  display:grid; min-height:100vh;
  grid-template-columns:auto 1fr;
  grid-template-rows:56px 1fr auto;
  grid-template-areas:"top top" "side main" "foot foot";
}

/* ---------- Topbar ---------- */
.topbar{
  grid-area:top; position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px; min-width:212px}
.brand-logo{height:27px; width:auto; display:block; flex:none}
.brand-divider{width:1px; height:20px; background:var(--line-strong); flex:none}
.brand-sub{font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; line-height:1.2; font-weight:600}

.topbar-right{margin-left:auto; display:flex; align-items:center; gap:6px}
.lang{display:flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; margin-right:6px}
.lang button{font-size:11.5px; font-weight:500; padding:5px 9px; color:var(--ink-3); transition:background .15s,color .15s}
.lang button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); font-weight:700}
.lang button:hover{color:var(--ink)}

/* Export-Ziel-Umschalter in der Topbar (Cargo-Server | Download) */
.dest-toggle{display:flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; margin-left:4px}
.dest-toggle button{font-size:11.5px; font-weight:500; padding:5px 10px; color:var(--ink-3); transition:background .15s,color .15s; white-space:nowrap}
.dest-toggle button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-text); font-weight:700}
.dest-toggle button:hover{color:var(--ink)}

.icon-btn{
  position:relative; width:34px;height:34px; border-radius:var(--r-s);
  display:grid; place-items:center; color:var(--ink-2); transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink)}
.badge-dot{
  position:absolute; top:4px; right:3px; min-width:15px; height:15px; padding:0 4px;
  background:var(--crit); color:#fff;
  font-size:9.5px; font-weight:700; line-height:15px; text-align:center;
  border:2px solid var(--surface); box-sizing:content-box;
}
.avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft); color:var(--accent-text);
  font-size:11.5px; font-weight:700; display:grid; place-items:center; margin-left:4px;
  border:1px solid var(--line);
}

/* ---------- Sidebar ---------- */
.sidebar{
  grid-area:side; width:236px;
  position:sticky; top:56px; height:calc(100vh - 56px); align-self:start;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:14px 10px 10px;
  transition:width .18s ease; overflow:hidden;
}
.nav-group{margin-bottom:14px}
.nav-label{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:0 10px 6px; white-space:nowrap;
}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7.5px 10px; border-radius:var(--r-s); color:var(--ink-2);
  font-size:13.5px; font-weight:500; text-align:left; white-space:nowrap;
  transition:background .15s,color .15s;
}
/* SEP-Link-Idiom: Hover verdunkelt nur die Beschriftung (kein Flächen-Wash);
   der grüne Wash bleibt allein der aktiven Ansicht vorbehalten. */
.nav-item:hover{color:var(--accent-text)}
.nav-item[aria-current="page"]{background:var(--accent-soft); color:var(--accent-text); font-weight:700}
.nav-item .count{
  margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  background:var(--surface-2); padding:1px 7px;
}
.nav-item[aria-current="page"] .count{background:transparent; color:var(--accent-text)}
.nav-item .count.alert{background:var(--crit); color:#fff; font-weight:500}

.sidebar-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.brand-attrib{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 8px 2px; text-decoration:none;
  border-top:1px solid var(--line); margin-top:3px;
}
.brand-attrib:hover{text-decoration:none}
.brand-attrib .eyebrow{font-size:8px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.brand-attrib img{height:16px; width:auto; display:block}
.src-line{color:var(--ink-2); text-decoration:none}
.src-line:hover{color:var(--ink); text-decoration:underline}
.version-card{
  border:1px solid var(--line); border-radius:var(--r-m); padding:10px 12px;
  display:flex; flex-direction:column; gap:5px; background:var(--bg);
}
.version-line{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--ink-2); white-space:nowrap}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.version-card a{font-size:11.5px}
.collapse-btn{
  display:flex; align-items:center; gap:10px; padding:7.5px 10px; border-radius:var(--r-s);
  color:var(--ink-3); font-size:12.5px; white-space:nowrap; transition:background .15s,color .15s;
}
.collapse-btn:hover{background:var(--surface-2); color:var(--ink)}

/* eingeklappter Zustand */
#app.rail .sidebar{width:62px; padding:14px 12px 10px}
#app.rail .nav-label{visibility:hidden; height:0; padding:0}
#app.rail .nav-item{justify-content:center; padding:9px 0}
#app.rail .nav-item span, #app.rail .nav-item .count,
#app.rail .version-card, #app.rail .collapse-btn span, #app.rail .brand-attrib{display:none}
#app.rail .collapse-btn{justify-content:center}
#app.rail .collapse-btn svg{transform:rotate(180deg)}

/* ---------- Hauptbereich ---------- */
.main{grid-area:main; padding:22px 24px 32px; min-width:0}
.view{max-width:1240px; margin:0 auto}
.view[hidden]{display:none}

.page-head{display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.page-head h1{font-size:24px; font-weight:700; letter-spacing:-.015em; margin:0; line-height:1.15; text-wrap:balance}
.page-sub{color:var(--ink-2); font-size:13px; margin:3px 0 0}
.page-actions{margin-left:auto; display:flex; gap:8px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7.5px 14px; border-radius:var(--r-s);
  font-size:13px; font-weight:600; line-height:1.2;
  border:1px solid transparent; transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink-3); background:var(--surface-2)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-danger{background:var(--crit); color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-sm{padding:5px 10px; font-size:12px}

/* ---------- KPI-Kacheln ---------- */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:14px 16px 12px; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.kpi-label{font-size:12px; color:var(--ink-2); font-weight:500}
.kpi-value{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.kpi-meta{display:flex; align-items:center; gap:8px; margin-top:2px; min-height:20px}
.delta{display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700}
.delta.up{color:var(--accent-text)}
.delta.down{color:var(--crit)}
.delta svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kpi-note{font-size:11.5px; color:var(--ink-3)}
.spark{margin-left:auto; flex:none}

/* ---------- Kartenpanel ---------- */
.map-grid{display:grid; grid-template-columns:1fr 296px; gap:12px; margin-bottom:14px; align-items:stretch}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; min-width:0;
}
.panel-head{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.panel-title{font-size:13.5px; font-weight:700; margin:0}
.panel-head .tools{margin-left:auto; display:flex; gap:2px}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  font-size:12px; font-weight:600; padding:4.5px 11px;
  border:1px solid var(--line-strong); color:var(--ink-2);
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{color:var(--ink); border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}

.map-stage{position:relative; height:440px; background:var(--map-tint-a)}
.map-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

.map-label{
  position:absolute; transform:translate(-50%,-50%);
  font-size:11px; color:var(--ink-3); letter-spacing:.02em; pointer-events:none;
  display:flex; align-items:center; gap:5px; text-shadow:0 0 6px var(--bg);
}
.map-label i{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}

.cluster{
  position:absolute; transform:translate(-50%,-50%);
  min-width:34px; height:34px; padding:0 6px; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  display:grid; place-items:center;
  border:2.5px solid var(--surface); box-shadow:var(--shadow-2);
  transition:transform .15s;
}
.cluster:hover{transform:translate(-50%,-50%) scale(1.09)}
.cluster.md{min-width:28px;height:28px;font-size:10.5px}

.pin{
  position:absolute; transform:translate(-50%,-100%);
  color:var(--accent); filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.pin svg{width:30px;height:30px;display:block}

.map-card{
  position:absolute; width:238px; transform:translate(16px,-40%);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-3); padding:12px 13px; font-size:12px;
}
.map-card h4{margin:0 0 1px; font-size:13px; font-weight:700}
.map-card .sub{color:var(--ink-2); margin:0 0 8px}
.map-card .row{display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid var(--line)}
.map-card .row dt{color:var(--ink-3); margin:0}
.map-card .row dd{margin:0; font-weight:600; text-align:right}
.map-card .btn{margin-top:9px; width:100%; justify-content:center}

.zoom-ctrl{
  position:absolute; top:12px; right:12px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--shadow-1); overflow:hidden;
}
.zoom-ctrl button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2)}
.zoom-ctrl button:hover{background:var(--surface-2);color:var(--ink)}
.zoom-ctrl button + button{border-top:1px solid var(--line)}

.legend{
  position:absolute; left:12px; bottom:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); padding:9px 12px; font-size:11.5px;
}
.legend b{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.legend .lrow{display:flex; align-items:center; gap:7px; padding:1.5px 0; color:var(--ink-2)}
.legend .swatch{width:9px;height:9px;border-radius:50%;flex:none}

.map-meta{
  position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:12px;
  font-size:10.5px; color:var(--ink-3);
}
.scalebar{display:flex; align-items:center; gap:5px; font-family:var(--mono)}
.scalebar i{display:block; width:52px; height:4px; border:1px solid var(--ink-3); border-top:0}

/* ---------- Modul-Leiste ---------- */
.module{
  display:flex; align-items:center; gap:11px; padding:11px 14px; width:100%;
  border-bottom:1px solid var(--line); text-align:left;
  transition:background .15s;
}
.module:hover{background:var(--surface-2)}
.module:last-of-type{border-bottom:0}
.module .mi{
  width:34px;height:34px;border-radius:var(--r-s);flex:none;
  background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center;
}
.module[data-active="true"] .mi{background:var(--accent-soft); color:var(--accent-text)}
.module h4{margin:0; font-size:12.5px; font-weight:600; line-height:1.3}
.module .nums{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:1px}
.module .nums b{color:var(--accent-text); font-weight:500}
.module .chev{margin-left:auto; color:var(--ink-3)}
.add-module{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px; font-size:12.5px; font-weight:600; color:var(--ink-2); width:100%;
}
.add-module:hover{background:var(--surface-2); color:var(--ink)}

/* ---------- Tabelle ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:13px; min-width:720px}
table.data th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.data td{padding:10.5px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tbody tr{transition:background .12s; cursor:pointer}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
td.num, th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px}
.addr{font-weight:600}
.addr small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px}
.mut{color:var(--ink-2)}
td.time{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap}

.meter{display:flex; align-items:center; gap:9px; min-width:130px}
.meter .track{flex:1; height:5px; background:var(--meter-track); overflow:hidden}
.meter .fill{height:100%; background:var(--mark)}
.meter .val{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); width:24px; text-align:right}

.status{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:3px 9px; white-space:nowrap;
}
.status i{width:5px;height:5px;border-radius:50%;background:currentColor}
.status.new{background:var(--accent-soft); color:var(--accent-text)}
.status.contacted{background:var(--surface-2); color:var(--ink-2)}
.status.qualified{background:var(--accent); color:var(--on-accent)}
.status.pending{background:var(--warn-soft); color:var(--warn)}

.table-foot{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  font-size:12px; color:var(--ink-3); border-top:1px solid var(--line);
}
.table-foot .pages{margin-left:auto; display:flex; gap:4px}
.pg{
  min-width:26px; height:26px; border-radius:var(--r-s); display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
}
.pg:hover{background:var(--surface-2)}
.pg[aria-current="true"]{background:var(--ink); color:var(--surface)}

/* ---------- Statusleiste (Footer) ---------- */
.statusbar{
  grid-area:foot; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:9px 20px; background:var(--surface); border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.statusbar a{color:var(--ink-3)}
.statusbar a:hover{color:var(--ink); text-decoration:none}
.statusbar .sep{color:var(--line-strong)}
.sysstate{display:flex; align-items:center; gap:6px; color:var(--ink-2)}
.statusbar .right{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.sms-tag{
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:2.5px 7px; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:5px;
}
.sms-tag i{width:8px;height:8px;flex:none;background:var(--crit);display:inline-block;
  clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}

/* ---------- Hilfe-Popover ---------- */
.help-pop{
  position:fixed; top:62px; right:14px; width:318px; z-index:80;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-3); padding:16px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.help-pop.open{opacity:1; transform:none; pointer-events:auto}
.help-pop h3{margin:0 0 2px; font-size:15px; font-weight:700}
.help-pop .hp-sub{font-size:12px; color:var(--ink-2); margin:0 0 12px}
.help-close{position:absolute; top:10px; right:10px}
.hp-link{
  display:flex; align-items:center; gap:10px; padding:8px 9px; margin:0 -9px;
  border-radius:var(--r-s); font-size:13px; font-weight:500; color:var(--ink); width:calc(100% + 18px);
  text-align:left; transition:background .15s;
}
.hp-link:hover{background:var(--surface-2); text-decoration:none}
.hp-link svg{color:var(--ink-3)}
.hp-contact{
  margin-top:12px; padding:12px; border-radius:var(--r-m);
  background:var(--surface-2); font-size:12.5px;
}
.hp-contact b{display:block; font-size:12.5px; margin-bottom:2px}
.hp-contact p{margin:0 0 8px; color:var(--ink-2); font-size:11.5px}
.hp-contact .cline{display:flex; align-items:center; gap:8px; padding:2.5px 0; font-weight:600}
.hp-contact .cline svg{color:var(--ink-3); width:14px; height:14px}
.hp-foot{margin-top:11px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--ink-3)}
.hp-foot a{color:var(--ink-3)}
.hp-foot a:hover{color:var(--ink-2)}

/* ---------- Toast ---------- */
.toast-host{position:fixed; bottom:52px; right:16px; z-index:90; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.toast{
  display:flex; align-items:center; gap:9px; max-width:340px;
  background:var(--ink); color:var(--surface);
  border-radius:var(--r-m); padding:10px 14px; font-size:12.5px; font-weight:500;
  box-shadow:var(--shadow-3);
  animation:toast-in .22s ease;
}
.toast svg{color:var(--accent); width:15px; height:15px; stroke-width:2}
:root[data-theme="dark"] .toast svg, .toast svg{stroke:currentColor}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.toast.out{opacity:0; transition:opacity .25s}

/* ---------- Leerzustand ---------- */
.empty{
  border:1px dashed var(--line-strong); border-radius:var(--r-l);
  padding:64px 24px; text-align:center; background:var(--surface);
}
.empty .eicon{
  width:46px;height:46px;margin:0 auto 14px;
  background:var(--surface-2); color:var(--ink-3); display:grid; place-items:center;
}
.empty h2{margin:0 0 4px; font-size:16px; font-weight:700}
.empty p{margin:0 auto 18px; color:var(--ink-2); font-size:13px; max-width:40ch}

/* ---------- Styleguide ---------- */
.sg section{margin-bottom:34px}
.sg h2{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px}
.sg .sg-sub{color:var(--ink-2); font-size:13px; margin:0 0 16px; max-width:68ch}
.sg-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; box-shadow:var(--shadow-1)}

.principles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.principle{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:16px}
.principle b{display:block; font-size:13.5px; margin-bottom:4px}
.principle p{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.55}

.sw-group{margin-bottom:14px}
.sw-group:last-child{margin-bottom:0}
.sw-title{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.sw-row{display:flex; gap:10px; flex-wrap:wrap}
.sw{width:132px}
.sw .box{height:52px; border-radius:var(--r-s); border:1px solid var(--line); margin-bottom:6px}
.sw .name{font-size:11.5px; font-weight:600}
.sw .hex{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}

.type-row{display:flex; align-items:baseline; gap:18px; padding:12px 0; border-bottom:1px solid var(--line)}
.type-row:last-child{border-bottom:0}
.type-spec{width:190px; flex:none; font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.t-display{font-size:28px; font-weight:700; letter-spacing:-.02em}
.t-h1{font-size:24px; font-weight:700; letter-spacing:-.015em}
.t-h2{font-size:17px; font-weight:700}
.t-body{font-size:14px}
.t-caption{font-size:12px; color:var(--ink-2)}
.t-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.t-mono{font-family:var(--mono); font-size:12.5px}

.comp-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.comp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:16px; box-shadow:var(--shadow-1)}
.comp h3{margin:0 0 12px; font-size:12.5px; font-weight:700}
.comp .rowset{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.comp + .comp{margin:0}
.field{display:flex; flex-direction:column; gap:5px; max-width:320px}
.field label{font-size:12px; font-weight:600}
.field input, .field select{
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:7.5px 11px; outline:none; transition:border-color .15s;
}
.field input:focus, .field select:focus{border-color:var(--accent)}
.field .hint{font-size:11.5px; color:var(--ink-3)}
.field.invalid input{border-color:var(--crit)}
.field.invalid .hint{color:var(--crit)}

.toggle{position:relative; width:36px; height:20px; background:var(--line-strong); transition:background .15s; flex:none}
.toggle::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:15px; height:15px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;
}
.toggle[aria-checked="true"]{background:var(--accent)}
.toggle[aria-checked="true"]::after{transform:translateX(16px)}

.sg-note{
  display:flex; gap:10px; align-items:flex-start;
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 var(--r-s) var(--r-s) 0; padding:11px 14px; font-size:12.5px; color:var(--ink);
}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .map-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .principles{grid-template-columns:repeat(2,1fr)}
  .comp-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .map-card{display:none}
}
@media (max-width:820px){
  #app{grid-template-columns:1fr; grid-template-areas:"top" "main" "foot"}
  .sidebar{display:none}
  .brand{min-width:0}
  .brand-sub, .brand-divider{display:none}
  .kpi-row{grid-template-columns:1fr}
  .page-actions{margin-left:0}
  .lang{display:none}
}