/* Kontrollzentrum -- Umsetzung des Design-Handoffs "Variante 1a"
   (Seitennavigation + Bereichsseiten), Stand 05.08.2026.

   Grundidee des Entwurfs: Jede Kennzahl hat eine feste Adresse in der linken
   Leiste. "Mein Dashboard" ist der Morgen-Check und passt ohne Scrollen auf
   einen Blick. Karten werden ueber Rahmen abgegrenzt, **nicht** ueber Schatten.
   Keine Alarmfarben -- Rueckgaenge tragen ein Vorzeichen, kein Rot.

   Schrift: IBM Plex Sans, lokal eingebunden. Google Fonts scheidet aus -- das
   Dashboard laeuft auf dem Kundenserver ohne Internetzugriff, und in einer
   gepruefen Umgebung sollen keine Drittanbieter mitladen.

   Alle Sonderzeichen stehen als CSS-Escape (\2605 statt des Glyphs), damit die
   Datei ASCII-rein bleibt und kein Encoding-Unfall passieren kann. */

/* --- Schrift ------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/ibm-plex-sans-700.woff2") format("woff2");
}

/* --- Tokens (exakt aus dem Handoff) -------------------------------------- */
:root {
  /* Tinte / Topbar */
  --c-ink:         #14171a;
  --c-ink-hover:   #2b3037;
  --c-ink-border:  #3a4048;
  --c-on-ink:      #dfe3e7;
  --c-on-ink-dim:  #8a939c;

  /* Text */
  --c-text:        #14171a;
  --c-text-2:      #3a424a;
  --c-text-3:      #4b545d;
  --c-text-muted:  #6b747d;
  --c-label:       #8a939c;
  --c-placeholder: #9aa3ac;
  --c-icon:        #c3cad1;

  /* Akzent */
  --c-accent:        #b0821f;
  --c-accent-text:   #8f6a17;
  --c-accent-soft:   #fdf3dd;
  --c-accent-border: #e0c584;
  --c-note-bg:       #fdf7e8;
  --c-note-border:   #ecdcb4;
  --c-note-text:     #6a5312;

  /* Datenreihen und Status */
  --c-serie-vorjahr: #3b6fd4;
  --c-live:          #2f9e5f;

  /* Flaechen */
  --c-page:      #e7ebef;
  --c-app:       #eef1f4;
  --c-app-2:     #f1f4f7;
  --c-surface:   #ffffff;
  --c-sidebar:   #fbfcfd;
  --c-surface-2: #f6f8fa;
  --c-surface-3: #eef2f5;

  /* Linien */
  --c-line-card:   #e3e7eb;
  --c-line:        #dde3e8;
  --c-line-strong: #cdd4da;
  --c-line-row:    #f1f4f7;
  --c-line-grid:   #eaeef2;
  --c-line-input:  #d5dbe1;
  --c-line-soft:   #e6eaee;

  --sidebar-w: 214px;
  --font: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-app-2);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Zahlen laufen ueberall tabellarisch -- sonst springen Spalten und
   Vergleichswerte lassen sich nicht untereinander lesen. */
.num, .kpi-zahl, .kpi-kontext, td.num, th.num,
.tab-wert, .rang-wert, .mini-zahl { font-variant-numeric: tabular-nums; }

/* --- Topbar -------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 22px;
  background: var(--c-ink);
  border-bottom: 2px solid var(--c-accent);
  position: sticky; top: 0; z-index: 60;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { height: 20px; width: auto; display: block; }
.brand-divider { width: 1px; height: 20px; background: var(--c-ink-border); flex: none; }
.brand-mark { color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }

.status { display: flex; align-items: center; gap: 20px; }
.status-item { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.status-label {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-on-ink-dim); font-weight: 600;
}
.status-value { font-size: 12px; color: var(--c-on-ink); font-variant-numeric: tabular-nums; }

.live {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--c-on-ink);
  border: 1px solid var(--c-ink-border); border-radius: 999px; padding: 5px 11px;
}
.live-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--c-live); }
.live.stale .live-dot { background: var(--c-accent); }

.benutzer {
  font-size: 12px; color: var(--c-on-ink);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) { .benutzer { display: none; } }

.logout-link {
  font-size: 12px; color: var(--c-on-ink); background: transparent;
  border: 1px solid var(--c-ink-border); border-radius: 6px; padding: 6px 12px;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.logout-link:hover { border-color: #7c858e; }

/* --- App-Gerüst ---------------------------------------------------------- */
.app { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }

/* --- Sidebar ------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--c-sidebar);
  border-right: 1px solid var(--c-line);
  padding: 16px 0;
  display: flex; flex-direction: column; justify-content: space-between;
  position: sticky; top: 56px; align-self: flex-start;
  height: calc(100vh - 56px);
}
.nav-gruppe { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-placeholder); font-weight: 600; padding: 6px 18px 8px;
}
.nav-label + .nav-label, .nav-eintrag + .nav-label { padding-top: 18px; }

.nav-eintrag {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--c-text-2);
  background: transparent; border: 0; border-radius: 7px;
  padding: 9px 18px; margin: 0 8px; cursor: pointer; text-align: left;
}
.nav-eintrag:hover { background: var(--c-surface-3); }
.nav-eintrag.aktiv { background: var(--c-ink); color: #fff; font-weight: 600; }
.nav-eintrag.aktiv:hover { background: var(--c-ink); }
.nav-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nav-stern { color: var(--c-accent); font-size: 13px; }
.nav-eintrag.aktiv .nav-stern { color: var(--c-accent); }
.nav-zahl { font-size: 11px; color: var(--c-placeholder); font-variant-numeric: tabular-nums; }
.nav-eintrag.aktiv .nav-zahl { color: #8f979f; }

.sidebar-fuss {
  padding: 16px 18px 4px; border-top: 1px solid var(--c-line-soft);
  display: flex; flex-direction: column; gap: 5px; flex: none;
}
.sidebar-fuss .status-label { text-align: left; }
.quelle-wert {
  font-size: 11px; color: var(--c-text-muted); line-height: 1.4; word-break: break-all;
}
.sidebar-credit { font-size: 10.5px; color: var(--c-placeholder); margin-top: 6px; }
.sidebar-credit a { color: var(--c-accent-text); text-decoration: none; }
.sidebar-credit a:hover { text-decoration: underline; }

/* --- Inhaltsspalte ------------------------------------------------------- */
.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- Filterleiste -------------------------------------------------------- */
.filterbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 56px; z-index: 40;
}
.filter-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.filter-label {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-placeholder); font-weight: 600;
}

.chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-text);
  border: 1px solid var(--c-line-input); border-radius: 7px;
  padding: 7px 12px; background: var(--c-surface); cursor: pointer;
  position: relative;
}
.chip:hover { border-color: var(--c-line-strong); }
.chip-name { color: var(--c-text-muted); }
.chip-wert { font-weight: 500; }
.chip-caret { color: var(--c-placeholder); font-size: 10px; }
.chip.statisch { cursor: default; }
.chip.statisch:hover { border-color: var(--c-line-input); }

/* Der Zeitraum ist eine echte Auswahl -- ein natives select traegt Tastatur-
   und Screenreader-Verhalten mit, das ein nachgebautes Menue erst erfinden
   muesste. Optik ueber Rahmen und Caret, nicht ueber die Systemdarstellung. */
.chip-select {
  appearance: none; -webkit-appearance: none;
  font-size: 13px; font-weight: 500; color: var(--c-text);
  border: 1px solid var(--c-line-input); border-radius: 7px;
  padding: 7px 30px 7px 12px; background: var(--c-surface); cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa3ac' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.chip-select:hover { border-color: var(--c-line-strong); }

.filter-zeitraum {
  font-size: 12px; color: var(--c-label);
  font-variant-numeric: tabular-nums; padding-left: 4px;
}

.knopf {
  font-size: 13px; font-weight: 500; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-line-input);
  border-radius: 7px; padding: 8px 14px; cursor: pointer;
}
.knopf:hover { border-color: var(--c-line-strong); }
.knopf.an {
  background: var(--c-accent-soft); border-color: var(--c-accent-border);
  color: var(--c-note-text); font-weight: 600;
}
.knopf.primaer {
  color: #fff; background: var(--c-ink); border-color: var(--c-ink);
}
.knopf.primaer:hover { background: var(--c-ink-hover); border-color: var(--c-ink-hover); }
.knopf.sekundaer {
  background: var(--c-surface-2); border-color: var(--c-line);
  color: var(--c-accent-text); font-weight: 500;
}
.knopf.sekundaer:hover { background: var(--c-surface-3); }
.knopf:focus-visible, .chip:focus-visible, .chip-select:focus-visible,
.nav-eintrag:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* --- Hinweisband (Verwalten-Modus) --------------------------------------- */
.hinweisband {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px; background: var(--c-note-bg);
  border-bottom: 1px solid var(--c-note-border);
  font-size: 13px; color: var(--c-note-text);
}
.hinweisband b { font-weight: 600; }
.hinweisband .knopf { margin-left: auto; padding: 5px 10px; font-size: 12px; }

/* --- Bereichsinhalt ------------------------------------------------------ */
.bereich { padding: 22px 24px 34px; display: flex; flex-direction: column; gap: 22px; }
.bereich-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bereich-kopf h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.bereich-kontext { font-size: 12px; color: var(--c-label); text-align: right; }

/* Zwei getrennte Bloecke -- genau wie im Entwurf, und aus einem harten Grund:
   Kennzahlkarten sind alle gleich hoch, grosse Karten nicht. Wirft man beide
   in dasselbe Raster, bestimmt die hoechste Karte die Zeilenhoehe und unter
   den kurzen bleibt Leerraum stehen. Das war der Zustand, den der Kunde am
   05.08.2026 gemeldet hat.

   Block 1: Kennzahlen im festen Vierspalter (gleiche Hoehe, keine Luecken).
   Block 2: grosse Karten in echten Textspalten. `columns` fuellt von oben nach
   unten und balanciert die Spaltenhoehen selbst -- damit rutscht eine flache
   Karte unter eine hohe, statt eine Luecke offen zu lassen. Ein Grid kann das
   nicht; Masonry-Grid ist noch nicht verlaesslich verfuegbar. Preis: die
   Lesereihenfolge ist spaltenweise. Fuer nebeneinanderstehende Auswertungen
   ohne Reihenfolgebezug ist das in Ordnung. */
.kpi-zeile {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: start;
}
.karten-block { columns: 2; column-gap: 16px; }
/* In Spalten fliessen nur Blockelemente sauber -- die Karte selbst darf hier
   kein Flexcontainer sein, sonst greift break-inside nicht. Die Abstaende im
   Inneren tragen ohnehin die Kindelemente ueber margin-top. */
.karten-block > .karte {
  display: block; break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 16px;
}
/* Sehr breite Tabellen bekommen die volle Breite -- sechs Spalten in einer
   halben Bildschirmbreite sind nicht mehr lesbar. */
.karten-block > .karte.voll { column-span: all; }
.kpi-zeile:empty, .karten-block:empty { display: none; }

@media (max-width: 1600px) {
  .kpi-zeile { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .kpi-zeile { grid-template-columns: repeat(2, 1fr); }
  .karten-block { columns: 1; }
}

/* --- Karte (Basis) ------------------------------------------------------- */
.karte {
  background: var(--c-surface);
  border: 1px solid var(--c-line-card);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  position: relative;
}
/* Favoriten tragen die Goldkante links -- die einzige Farbmarkierung im
   Layout. */
.karte.favorit { border-left: 3px solid var(--c-accent); }
.karte.gross { padding: 18px 20px 14px; gap: 0; }

.karte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.karte-herkunft {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-placeholder); font-weight: 600; line-height: 1.4;
}
.karte-titelblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.karte-titel { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.karte-werkzeuge { display: flex; align-items: center; gap: 6px; flex: none; }

/* Groesser als im Entwurf (dort 12px): die Knoepfe sind Bedienelemente, keine
   Beschriftung. Bei 12px trifft man Stern und Ziehgriff kaum, und im
   Verwalten-Modus klickt man sie staendig. */
.icon-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-icon); font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
}
.icon-knopf:hover { color: var(--c-text-muted); background: var(--c-surface-2); }
.icon-knopf.an { color: var(--c-accent); }
.icon-knopf.an:hover { color: var(--c-accent-text); }
.icon-knopf:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.icon-knopf.griff { cursor: grab; font-size: 19px; }
.icon-knopf.griff:active { cursor: grabbing; }
/* Im Verwalten-Modus sind Griff und Auge die Werkzeuge -- deutlicher zeigen,
   damit sie nicht wie Zierrat wirken. */
body.verwalten .icon-knopf.griff,
body.verwalten .icon-knopf[data-auge] {
  color: var(--c-text-muted); background: var(--c-surface-2);
  border: 1px solid var(--c-line);
}
body.verwalten .icon-knopf.griff:hover,
body.verwalten .icon-knopf[data-auge]:hover {
  color: var(--c-accent-text); border-color: var(--c-accent-border);
  background: var(--c-accent-soft);
}
.karte-werkzeuge { gap: 4px; }
@media (max-width: 900px) {
  /* Fingergroesse: 36px ist die Untergrenze, die sich sicher treffen laesst. */
  .icon-knopf { width: 36px; height: 36px; font-size: 19px; }
  .icon-knopf.griff { font-size: 21px; }
}

/* --- KPI-Karte ----------------------------------------------------------- */
.kpi-name { font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.kpi-zahl {
  font-size: 31px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.kpi-kontext { font-size: 12px; color: var(--c-text-muted); }
/* Kein Rot, kein Gruen: die Richtung steht im Pfeil und im Vorzeichen. */
.kpi-kontext .pfeil { font-weight: 600; }

.karte.kompakt .kpi-zahl { font-size: 29px; }

/* --- Diagramm ------------------------------------------------------------ */
.karte-diagramm { margin-top: 14px; }
.karte-diagramm svg { width: 100%; height: 250px; display: block; overflow: visible; }
.karte-diagramm .grid { stroke: var(--c-line-grid); stroke-width: 1; }
.karte-diagramm .achse { fill: var(--c-placeholder); font-size: 11px; }
.karte-diagramm .linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.karte-diagramm .saeule { }
.karte-diagramm .grundlinie { stroke: var(--c-line-card); stroke-width: 1; }

.legende { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legende-eintrag {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--c-text-2); font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.legende-punkt { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legende-eintrag b { font-weight: 600; }
.legende-eintrag.aus { opacity: 0.4; }

/* --- Tabelle ------------------------------------------------------------- */
.tab-werkzeuge {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; flex-wrap: wrap;
}
.tab-suche {
  font-size: 13px; border: 1px solid var(--c-line-input); border-radius: 7px;
  padding: 7px 11px; width: 190px; background: var(--c-surface); color: var(--c-text);
}
.tab-suche::placeholder { color: var(--c-placeholder); }
.tab-suche:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -1px; border-color: var(--c-accent); }
.sortier-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--c-text-2);
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 7px; padding: 6px 10px; cursor: pointer;
}
.sortier-chip:hover { background: var(--c-surface-3); }
.tab-anzahl { font-size: 12px; color: var(--c-label); margin-left: auto; }

.karte-tabelle { margin-top: 10px; overflow-x: auto; }
.karte-tabelle th {
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-placeholder); text-align: left;
  border-bottom: 1px solid var(--c-line-card); padding: 0 0 7px;
  white-space: nowrap;
}
.karte-tabelle td {
  font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--c-line-row);
  color: var(--c-text-2);
}
.karte-tabelle th.num, .karte-tabelle td.num { text-align: right; }
.karte-tabelle th + th, .karte-tabelle td + td { padding-left: 14px; }
.karte-tabelle th.sortierbar { cursor: pointer; user-select: none; }
.karte-tabelle th.sortierbar:hover { color: var(--c-text-muted); }
.karte-tabelle th.sortiert { color: var(--c-accent-text); }
.karte-tabelle td.wert { font-weight: 500; color: var(--c-text); }
.karte-tabelle td.null { color: var(--c-placeholder); }
.karte-tabelle tbody tr:last-child td { border-bottom: 0; }
.karte-tabelle tfoot td {
  font-weight: 600; color: var(--c-text);
  border-top: 1px solid var(--c-line-strong); border-bottom: 0; padding-top: 9px;
}
.tab-zusatz { font-size: 11px; color: var(--c-label); margin-left: 6px; }
.mehr-knopf { margin-top: 12px; align-self: flex-start; }

/* --- Rang- und Balkenlisten ---------------------------------------------- */
.liste { list-style: none; margin: 12px 0 0; padding: 0; }
.liste-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--c-line-row);
  font-size: 13px;
}
.liste-zeile:last-child { border-bottom: 0; }
.rang-nr { font-size: 14px; color: var(--c-placeholder); font-variant-numeric: tabular-nums; min-width: 14px; }
.rang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-2); }
.rang-wert { font-weight: 600; color: var(--c-text); }
.rang-anteil {
  width: 46px; text-align: right; color: var(--c-text-muted);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.liste-zeile.mit-anteil { grid-template-columns: auto minmax(0, 1fr) auto 46px; }
.liste-zeile.mit-delta { grid-template-columns: auto minmax(0, 1fr) auto 46px 62px; }
/* Wie ueberall im Kontrollzentrum: die Richtung steht im Pfeil, nicht in der
   Farbe. Eine Ampel in einer achtzeiligen Liste wird zum Blinkbild. */
.rang-delta {
  width: 62px; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--c-text-muted);
}
.rang-delta .pfeil { color: var(--c-placeholder); margin-right: 2px; }
.welt-verloren {
  margin: 10px 0 0; font-size: 12px; color: var(--c-text-muted);
  border-top: 1px solid var(--c-line-row); padding-top: 8px; cursor: help;
}

/* Balkenliste (Umsatz je Kundengruppe) */
.balken-zeile { padding: 8px 0; border-bottom: 1px solid var(--c-line-row); }
.balken-zeile:last-child { border-bottom: 0; }
.balken-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.balken-name { font-size: 13px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-wert { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.balken-schiene {
  height: 6px; border-radius: 99px; background: var(--c-line-row);
  margin-top: 6px; overflow: hidden;
}
.balken-fuell { height: 100%; background: var(--c-accent); border-radius: 99px; }

/* --- Weltkarte ----------------------------------------------------------- */
.karte-welt { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(200px, 1fr); gap: 18px; }
@media (max-width: 1100px) { .karte-welt { grid-template-columns: 1fr; } }
.welt-flaeche svg {
  width: 100%; height: auto; display: block;
  background: var(--c-surface-2); border: 1px solid var(--c-line-card); border-radius: 8px;
}
.welt-flaeche .land { stroke: var(--c-surface); stroke-width: 0.4; }
.welt-flaeche .land.aktiv { cursor: help; }
.welt-flaeche .land.aktiv:hover { stroke: var(--c-text); stroke-width: 1.1; }
.welt-flaeche .land-punkt { stroke: var(--c-surface); stroke-width: 1.4; cursor: help; }
.welt-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px;
  margin-top: 9px; font-size: 11px; color: var(--c-label);
}
.welt-stufe { display: inline-flex; align-items: center; gap: 5px; }
.welt-swatch { width: 13px; height: 9px; border-radius: 2px; border: 1px solid rgb(0 0 0 / 0.1); }

/* --- Erklaerung (Tooltip hinter dem i) ----------------------------------- */
/* Kein title-Attribut: der native Tooltip braucht sekundenlanges Hovern,
   verschwindet beim kleinsten Ruckler und erscheint auf Touch nie. */
.info-wrap { position: relative; display: inline-flex; }
.info-box {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: max-content; max-width: min(300px, 76vw);
  padding: 10px 12px;
  background: var(--c-ink); color: #f2f4f6;
  border-radius: 8px;
  font-size: 12px; line-height: 1.5; font-weight: 400;
  text-align: left; text-transform: none; letter-spacing: 0;
  box-shadow: 0 8px 24px rgb(20 23 26 / 0.22);
}
.info-box[hidden] { display: none; }
.info-box::before {
  content: ""; position: absolute; bottom: 100%; right: 6px;
  border: 6px solid transparent; border-bottom-color: var(--c-ink);
}

/* --- Zustaende ----------------------------------------------------------- */
.karte.laedt .kpi-zahl { color: var(--c-placeholder); }
.karte.aktualisiert .kpi-zahl, .karte.aktualisiert .karte-tabelle,
.karte.aktualisiert .liste, .karte.aktualisiert .karte-diagramm {
  opacity: 0.45; transition: opacity 0.25s ease;
}
.karte-fehler { font-size: 12.5px; color: var(--c-note-text); background: var(--c-note-bg);
  border: 1px solid var(--c-note-border); border-radius: 7px; padding: 8px 10px; margin-top: 8px; }
.leer { color: var(--c-placeholder); font-size: 13px; padding: 10px 0; }

/* Verwalten-Modus: ausgeblendete Kacheln bleiben sichtbar, aber zurueckgenommen
   -- man muss sehen, was man ausgeblendet hat, um es zurueckholen zu koennen. */
.karte.versteckt { opacity: 0.45; border-style: dashed; }
body:not(.verwalten) .karte.versteckt { display: none; }
body:not(.verwalten) .nur-verwalten { display: none; }
.karte.zieht { opacity: 0.35; }
.karte.ziel { outline: 2px dashed var(--c-accent); outline-offset: 2px; }

/* --- Mobil (< 900px): untere Leiste statt Sidebar ------------------------ */
@media (max-width: 900px) {
  body { background: var(--c-app); font-size: 14px; }

  .topbar {
    height: auto; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 12px 18px 12px;
  }
  .topbar .status { justify-content: space-between; gap: 10px; }
  .status-item { display: none; }
  .brand-sub { display: none; }

  .app { display: block; min-height: 0; }
  .sidebar { display: none; }

  .filterbar {
    top: 0; position: static;
    padding: 10px 14px; gap: 8px;
    flex-direction: column; align-items: stretch;
  }
  /* Filter als horizontal scrollbare Chipreihe -- auf 402px passen sie nicht
     nebeneinander, und Umbruch kostet zu viel Hoehe. */
  .filter-links {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .filter-links::-webkit-scrollbar { display: none; }
  .filter-links > * { flex: none; }
  .filter-label, .filter-zeitraum { display: none; }
  .filter-rechts { justify-content: flex-start; }

  /* Das Hinweisband nimmt auf 402px sonst ein Viertel des Bildschirms. */
  .hinweisband { padding: 9px 14px; font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .hinweisband > span:not(:first-child) { display: none; }
  .hinweisband .knopf { margin-left: auto; }

  .bereich { padding: 16px 14px 20px; gap: 12px; }
  .bereich-kopf h2 { font-size: 17px; }
  .bereich-kontext { font-size: 11.5px; }

  .kpi-zeile { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .karten-block { columns: 1; }
  .karten-block > .karte { margin-bottom: 12px; }
  /* Die erste Kachel eines Bereichs ist die Leitzahl und bekommt volle
     Breite -- so wie im Entwurf. */
  .kpi-zeile > .karte.leitzahl { grid-column: 1 / -1; }

  .karte { border-radius: 12px; padding: 13px 14px; }
  .karte.gross { padding: 14px 16px 12px; }
  .kpi-zahl { font-size: 21px; }
  .karte.leitzahl .kpi-zahl { font-size: 30px; }
  .kpi-name { font-size: 12.5px; color: var(--c-text-muted); font-weight: 400; }
  .karte.leitzahl .kpi-name { font-size: 13.5px; color: var(--c-text-2); font-weight: 600; }
  .kpi-kontext { font-size: 11.5px; color: var(--c-label); }
  .karte-herkunft { display: none; }
  .karte.leitzahl .karte-herkunft { display: block; }

  .karte-diagramm svg { height: 118px; }
  .karte-welt { grid-template-columns: 1fr; gap: 12px; }

  /* Tabellen werden zu Zeilenlisten: Spalten nebeneinander passen nicht,
     Querscrollen liest niemand. Name plus Zusatz links, Betrag rechts. */
  .karte-tabelle { display: none; }
  .zeilenliste { display: block; margin-top: 10px; }
  .zeilen-eintrag {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--c-line-row);
  }
  .zeilen-eintrag:last-child { border-bottom: 0; }
  /* Muss schrumpfen duerfen, sonst schiebt ein langer Kundenname den Betrag
     aus der Zeile und beide ueberlappen. */
  .zeilen-text { min-width: 0; flex: 1 1 auto; }
  .zeilen-name { font-size: 13px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zeilen-zusatz { font-size: 11.5px; color: var(--c-label); }
  .zeilen-wert { font-size: 13.5px; font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
  .zeilenliste .summe { border-top: 1px solid var(--c-line-strong); border-bottom: 0; }
  .zeilenliste .summe .zeilen-name,
  .zeilenliste .summe .zeilen-wert { font-weight: 600; color: var(--c-text); }
  .tab-suche { width: 100%; }
  .mehr-knopf { width: 100%; min-height: 44px; text-align: center; border-radius: 9px; font-size: 13.5px; }

  .mobil-leiste {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: sticky; bottom: 0; z-index: 50;
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--c-line);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 22px));
  }
  .mobil-ziel {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 44px; justify-content: center;
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
  }
  .mobil-icon { font-size: 15px; line-height: 1; color: var(--c-placeholder); }
  .mobil-label { font-size: 10.5px; color: var(--c-text-muted); }
  .mobil-ziel.aktiv .mobil-icon { color: var(--c-accent); }
  .mobil-ziel.aktiv .mobil-label { color: var(--c-text); font-weight: 600; }

  .bereich { padding-bottom: 12px; }
}

/* Auf dem Desktop hat die untere Leiste nichts zu suchen. */
@media (min-width: 901px) { .mobil-leiste { display: none; } .zeilenliste { display: none; } }

/* --- Login (eigene Seite) ------------------------------------------------ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--c-page);
}
.login-karte {
  background: var(--c-surface); border: 1px solid var(--c-line-card);
  border-radius: 12px; padding: 32px; width: 100%; max-width: 380px;
}
.login-karte h1 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.login-karte p { margin: 0 0 20px; font-size: 13px; color: var(--c-text-muted); }
.login-feld { display: block; margin-bottom: 14px; }
.login-feld span {
  display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-placeholder); font-weight: 600; margin-bottom: 5px;
}
.login-feld input {
  width: 100%; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--c-line-input); border-radius: 7px; color: var(--c-text);
}
.login-feld input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.login-karte .knopf { width: 100%; justify-content: center; margin-top: 6px; }
.login-fehler {
  font-size: 12.5px; color: var(--c-note-text); background: var(--c-note-bg);
  border: 1px solid var(--c-note-border); border-radius: 7px;
  padding: 8px 10px; margin-bottom: 14px;
}

@media print {
  .topbar, .sidebar, .filterbar, .hinweisband, .mobil-leiste,
  .karte-werkzeuge, .tab-werkzeuge, .mehr-knopf { display: none !important; }
  .app { display: block; }
  .karte { break-inside: avoid; }
}