/* Jarvis – Gestaltung. Dunkel zuerst, helles Thema über [data-theme="light"]. */
:root {
  color-scheme: dark;
  --bg: #070b11;
  --bg-verlauf: radial-gradient(1200px 700px at 78% -10%, rgba(64, 196, 255, 0.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(124, 92, 255, 0.08), transparent 60%), #070b11;
  --flaeche: #0e141c;
  --flaeche-2: #121a24;
  --flaeche-3: #18222e;
  --glas: rgba(18, 26, 36, 0.72);
  --linie: rgba(150, 175, 205, 0.10);
  --linie-2: rgba(150, 175, 205, 0.18);
  --text: #e9eff7;
  --text-2: #a3b3c6;
  --text-3: #6d7d91;
  --akzent: #5cdcff;
  --akzent-2: #8b9dff;
  --akzent-weich: rgba(92, 220, 255, 0.12);
  --akzent-glut: 0 0 0 1px rgba(92, 220, 255, 0.35), 0 0 24px rgba(92, 220, 255, 0.18);
  --gut: #3ecf8e;
  --warn: #f2b544;
  --ernst: #ff8a4c;
  --kritisch: #ff5d6c;
  --gut-weich: rgba(62, 207, 142, 0.12);
  --warn-weich: rgba(242, 181, 68, 0.13);
  --kritisch-weich: rgba(255, 93, 108, 0.13);
  --serie-1: #3987e5; /* PV */
  --serie-2: #d95926; /* WP */
  --serie-3: #199e70; /* sonstige */
  --wa: #25d366;
  --mail: #8b9dff;
  --bitrix: #2fc6f6;
  --system: #f2b544;
  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 40px rgba(0, 0, 0, 0.35);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --schrift-anzeige: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --leiste: 232px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --bg-verlauf: radial-gradient(1100px 600px at 80% -10%, rgba(40, 150, 220, 0.10), transparent 60%), #f3f5f8;
  --flaeche: #ffffff;
  --flaeche-2: #f7f9fb;
  --flaeche-3: #eef2f6;
  --glas: rgba(255, 255, 255, 0.8);
  --linie: rgba(20, 40, 70, 0.09);
  --linie-2: rgba(20, 40, 70, 0.16);
  --text: #0d1622;
  --text-2: #4a5a6e;
  --text-3: #7a889a;
  --akzent: #0a8fc2;
  --akzent-2: #4f5fd8;
  --akzent-weich: rgba(10, 143, 194, 0.10);
  --akzent-glut: 0 0 0 1px rgba(10, 143, 194, 0.35);
  --gut: #16955f;
  --warn: #b7770b;
  --ernst: #c6541c;
  --kritisch: #d23347;
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --schatten: 0 1px 2px rgba(15, 30, 50, 0.06), 0 8px 28px rgba(15, 30, 50, 0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.5 var(--schrift);
  color: var(--text);
  background: var(--bg-verlauf);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(92, 220, 255, 0.28); }
.zahl { font-variant-numeric: tabular-nums; }
.gedimmt { color: var(--text-3); }
.zweit { color: var(--text-2); }
[hidden] { display: none !important; }

/* Rahmen ------------------------------------------------------------------ */
.rahmen { display: grid; grid-template-columns: var(--leiste) 1fr; height: 100vh; }
.leiste {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px; border-right: 1px solid var(--linie);
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.6), rgba(7, 11, 17, 0.2));
  -webkit-app-region: drag;
}
:root[data-theme="light"] .leiste { background: rgba(255, 255, 255, 0.55); }
.marke { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
.marke-kern { width: 30px; height: 30px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 50%, #e8fbff 0 12%, var(--akzent) 30%, rgba(92, 220, 255, 0.15) 62%, transparent 70%); box-shadow: 0 0 18px rgba(92, 220, 255, 0.55); }
.marke-kern::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(92, 220, 255, 0.45); }
.marke-name { font: 600 17px/1 var(--schrift-anzeige); letter-spacing: 0.22em; }
.marke-unter { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.04em; margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 2px; -webkit-app-region: no-drag; }
.nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text-2); cursor: pointer; text-align: left; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav button:hover { background: var(--flaeche-2); color: var(--text); }
.nav button[aria-current="page"] { background: var(--akzent-weich); color: var(--text); box-shadow: inset 2px 0 0 var(--akzent); }
.nav svg { width: 18px; height: 18px; flex: none; opacity: 0.9; }
.nav .zaehler { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--flaeche-3); color: var(--text-2); font-size: 11px; line-height: 18px; text-align: center; }
.nav .zaehler.wichtig { background: var(--kritisch); color: #fff; }
.leiste-fuss { margin-top: auto; display: grid; gap: 8px; -webkit-app-region: no-drag; }
.quellen-mini { display: grid; gap: 5px; padding: 10px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 12px; }
.quelle-zeile { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.quelle-zeile span:last-child { margin-left: auto; color: var(--text-3); font-size: 11px; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.punkt.ok { background: var(--gut); box-shadow: 0 0 8px rgba(62, 207, 142, 0.6); }
.punkt.fehler { background: var(--kritisch); box-shadow: 0 0 8px rgba(255, 93, 108, 0.6); }
.punkt.aus { background: var(--warn); }
.punkt.wartet { background: var(--text-3); animation: pulsieren 1.4s infinite; }
@keyframes pulsieren { 50% { opacity: 0.35; } }

.haupt { display: grid; grid-template-rows: auto 1fr; min-width: 0; height: 100vh; }
.kopf {
  display: flex; align-items: center; gap: 14px; padding: 14px 26px;
  border-bottom: 1px solid var(--linie); -webkit-app-region: drag; min-height: 64px;
}
.kopf h1 { margin: 0; font: 600 19px/1.2 var(--schrift-anzeige); letter-spacing: -0.01em; }
.kopf .unter { color: var(--text-3); font-size: 12.5px; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; -webkit-app-region: no-drag; }
.suche-feld {
  display: flex; align-items: center; gap: 8px; width: 340px; padding: 8px 12px;
  border: 1px solid var(--linie-2); border-radius: 11px; background: var(--flaeche); color: var(--text-3); cursor: text;
}
.suche-feld kbd, kbd { font: 11px var(--mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linie-2); color: var(--text-3); margin-left: auto; }
.inhalt { overflow: auto; padding: 24px 26px 60px; scroll-behavior: smooth; }
.inhalt.voll { padding: 0; overflow: hidden; }

/* Bausteine --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linie-2);
  background: var(--flaeche-2); color: var(--text); cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.knopf:hover { background: var(--flaeche-3); border-color: var(--linie-2); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf.primaer { background: linear-gradient(180deg, #6fe3ff, #34c4ef); color: #04121a; border-color: transparent; box-shadow: 0 6px 20px rgba(52, 196, 239, 0.25); }
:root[data-theme="light"] .knopf.primaer { background: linear-gradient(180deg, #13a3d6, #0a86b6); color: #fff; }
.knopf.primaer:hover { filter: brightness(1.06); }
.knopf.gefahr { color: var(--kritisch); }
.knopf.klein { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.knopf.symbol { padding: 7px; width: 34px; height: 34px; }
.knopf svg { width: 16px; height: 16px; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); min-width: 0;
}
.karte-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.karte-kopf h2 { margin: 0; font: 600 14px/1.3 var(--schrift-anzeige); letter-spacing: 0.01em; }
.karte-kopf .unter { color: var(--text-3); font-size: 12px; }
.karte-kopf .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.karte-rumpf { padding: 14px 18px 18px; }

.raster { display: grid; gap: 16px; }
.raster.zwei { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .raster.zwei, .raster.drei { grid-template-columns: minmax(0, 1fr); } }

.kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1400px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel {
  position: relative; overflow: hidden; padding: 14px 16px 13px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); cursor: default;
}
.kachel.klickbar { cursor: pointer; }
.kachel.klickbar:hover { border-color: var(--linie-2); }
.kachel .label { color: var(--text-2); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kachel .wert { font: 600 30px/1.1 var(--schrift-anzeige); letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kachel .fuss { color: var(--text-3); font-size: 11.5px; margin-top: 4px; min-height: 17px; }
.kachel.alarm .wert { color: var(--kritisch); }
.kachel.gut .wert { color: var(--gut); }
.kachel::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--akzent-weich), transparent 70%); pointer-events: none; }

.marke-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--flaeche-3); color: var(--text-2); white-space: nowrap; }
.marke-chip.gut { background: var(--gut-weich); color: var(--gut); }
.marke-chip.warn { background: var(--warn-weich); color: var(--warn); }
.marke-chip.kritisch { background: var(--kritisch-weich); color: var(--kritisch); }
.marke-chip.akzent { background: var(--akzent-weich); color: var(--akzent); }
.quellen-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.quellen-icon svg { width: 15px; height: 15px; }
.quellen-icon.whatsapp { background: rgba(37, 211, 102, 0.14); color: var(--wa); }
.quellen-icon.mail { background: rgba(139, 157, 255, 0.14); color: var(--mail); }
.quellen-icon.bitrix { background: rgba(47, 198, 246, 0.14); color: var(--bitrix); }
.quellen-icon.system { background: rgba(242, 181, 68, 0.14); color: var(--system); }

.leer { padding: 28px; text-align: center; color: var(--text-3); }
.leer strong { display: block; color: var(--text-2); margin-bottom: 4px; font-weight: 600; }

/* Zentrale ---------------------------------------------------------------- */
.held {
  position: relative; display: grid; grid-template-columns: 188px 1fr auto; gap: 26px; align-items: center;
  padding: 22px 26px; border-radius: 20px; margin-bottom: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(92, 220, 255, 0.08), rgba(139, 157, 255, 0.05) 50%, transparent), var(--flaeche);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.held::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at 20% 50%, #000 0%, transparent 60%); opacity: 0.5; pointer-events: none; }
.held canvas { width: 188px; height: 188px; cursor: pointer; }
.held .gruss { font: 600 28px/1.15 var(--schrift-anzeige); letter-spacing: -0.02em; margin: 0 0 6px; }
.held .lagetext { color: var(--text-2); font-size: 15px; max-width: 72ch; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.held .aktionen { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.held .uhr { text-align: right; align-self: start; }
.held .uhr .zeit { font: 300 44px/1 var(--schrift-anzeige); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.held .uhr .datum { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }
.frage-zeile { display: flex; gap: 8px; margin-top: 14px; max-width: 720px; }
.frage-zeile input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linie-2); background: var(--flaeche-2); outline: none; }
.frage-zeile input:focus { border-color: var(--akzent); box-shadow: var(--akzent-glut); }

.liste { display: flex; flex-direction: column; }
.zeile {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 11px 18px; border-top: 1px solid var(--linie); cursor: pointer; transition: background 0.12s;
}
.zeile:first-child { border-top: 0; }
.zeile:hover { background: var(--flaeche-2); }
.zeile .titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .text { color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zeile .meta { color: var(--text-3); font-size: 11.5px; text-align: right; white-space: nowrap; display: grid; gap: 4px; justify-items: end; }
.zeile.ungelesen .titel::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); margin-right: 7px; vertical-align: 2px; box-shadow: 0 0 8px var(--akzent); }
.prio-3 { box-shadow: inset 3px 0 0 var(--kritisch); }
.prio-2 { box-shadow: inset 3px 0 0 var(--warn); }

.briefing-kopf { display: flex; align-items: center; gap: 10px; }
.briefing h3 { font: 600 17px/1.3 var(--schrift-anzeige); margin: 0 0 8px; }
.briefing p { margin: 0 0 12px; color: var(--text-2); }
.briefing .kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
.briefing .kz { padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.briefing .kz .w { font: 600 18px/1.2 var(--schrift-anzeige); font-variant-numeric: tabular-nums; }
.briefing .kz .l { font-size: 11.5px; color: var(--text-3); }
.briefing .kz.gut .w { color: var(--gut); }
.briefing .kz.schlecht .w { color: var(--kritisch); }
.prio-liste { display: grid; gap: 8px; margin: 10px 0 14px; }
.prio-punkt { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.prio-punkt .nr { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--flaeche-3); }
.prio-punkt.hoch .nr { background: var(--kritisch-weich); color: var(--kritisch); }
.prio-punkt.mittel .nr { background: var(--warn-weich); color: var(--warn); }
.prio-punkt b { display: block; margin-bottom: 2px; }
.prio-punkt span { color: var(--text-2); font-size: 13px; }

.diagramm { position: relative; }
.diagramm svg { display: block; width: 100%; overflow: visible; }
.diagramm .achse text { fill: var(--text-3); font-size: 10.5px; }
.diagramm .gitter line { stroke: var(--linie); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tipp {
  position: fixed; z-index: 90; pointer-events: none; padding: 9px 11px; border-radius: 10px; min-width: 150px;
  background: var(--glas); backdrop-filter: blur(14px); border: 1px solid var(--linie-2); box-shadow: var(--schatten); font-size: 12.5px;
}
.tipp .tt { font-weight: 600; margin-bottom: 4px; }
.tipp .tz { display: flex; align-items: center; gap: 7px; color: var(--text-2); }
.tipp .tz b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

.agenten-streifen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.agent-mini { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); cursor: pointer; }
.agent-mini:hover { border-color: var(--linie-2); }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 700 14px/1 var(--schrift-anzeige); color: #06121a; flex: none; }
.agent-mini .n { font-weight: 600; font-size: 13px; }
.agent-mini .z { color: var(--text-3); font-size: 11.5px; }

/* Posteingang ------------------------------------------------------------- */
.postfach { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: 100%; }
.postfach-liste { border-right: 1px solid var(--linie); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.filter input { flex: 1 1 100%; padding: 8px 11px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); outline: none; margin-top: 4px; }
.filter input:focus { border-color: var(--akzent); }
.reiter { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie-2); background: transparent; color: var(--text-2); cursor: pointer; font-size: 12.5px; }
.reiter[aria-pressed="true"] { background: var(--akzent-weich); border-color: rgba(92, 220, 255, 0.4); color: var(--text); }
.postfach-eintraege { overflow: auto; }
.postfach-eintraege .zeile[aria-selected="true"] { background: var(--akzent-weich); }
.postfach-detail { overflow: auto; min-width: 0; }
.detail-kopf { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--linie); background: var(--glas); backdrop-filter: blur(16px); }
.detail-kopf h2 { margin: 0; font: 600 17px/1.3 var(--schrift-anzeige); }
.detail-kopf .unter { color: var(--text-3); font-size: 12.5px; }
.detail-rumpf { padding: 20px 24px 40px; display: grid; gap: 16px; max-width: 980px; }
.ki-kasten { padding: 13px 15px; border-radius: 12px; background: linear-gradient(135deg, var(--akzent-weich), transparent); border: 1px solid rgba(92, 220, 255, 0.22); }
.ki-kasten .k { display: flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); font-weight: 600; margin-bottom: 5px; }
.mail-text { white-space: pre-wrap; word-wrap: break-word; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; line-height: 1.6; }
.chatverlauf { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); }
.blase { max-width: 76%; padding: 8px 12px 6px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.blase .z { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 3px; text-align: right; }
.blase.kontakt { align-self: flex-start; background: var(--flaeche-3); border-bottom-left-radius: 4px; }
.blase.wir { align-self: flex-end; background: rgba(37, 211, 102, 0.14); border-bottom-right-radius: 4px; }
.blase .von { display: block; font-size: 11px; font-weight: 600; color: var(--wa); margin-bottom: 2px; }
.tagtrenner { align-self: center; font-size: 11px; color: var(--text-3); padding: 2px 10px; border-radius: 999px; background: var(--flaeche-2); margin: 6px 0; }
.antwort-kasten { display: grid; gap: 8px; }
.antwort-kasten textarea { width: 100%; min-height: 120px; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linie-2); background: var(--flaeche); outline: none; line-height: 1.5; }
.antwort-kasten textarea:focus { border-color: var(--akzent); box-shadow: var(--akzent-glut); }
.antwort-kasten .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Tabellen ---------------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 11.5px; padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; position: sticky; top: 0; background: var(--flaeche); cursor: pointer; user-select: none; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle tbody tr { cursor: pointer; transition: background 0.12s; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle tbody tr.pause td { color: var(--text-3); }
.index-balken { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.index-balken .b { flex: 1; height: 6px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.index-balken .b i { display: block; height: 100%; border-radius: 3px; }
.index-balken b { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

/* Seitenpanel ------------------------------------------------------------- */
.panel-hinter { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 60; animation: einblenden 0.15s; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 61; background: var(--flaeche); border-left: 1px solid var(--linie-2); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35); display: grid; grid-template-rows: auto 1fr; animation: hereinschieben 0.2s ease-out; }
.panel-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linie); }
.panel-kopf h2 { margin: 0; font: 600 18px/1.25 var(--schrift-anzeige); }
.panel-rumpf { overflow: auto; padding: 18px 20px 40px; display: grid; gap: 14px; align-content: start; }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wert-feld { padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.wert-feld .l { font-size: 11px; color: var(--text-3); }
.wert-feld .w { font: 600 17px/1.3 var(--schrift-anzeige); font-variant-numeric: tabular-nums; }
@keyframes hereinschieben { from { transform: translateX(30px); opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }

/* Agenten ---------------------------------------------------------------- */
.agenten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.agent-karte { display: grid; gap: 12px; padding: 18px; }
.agent-karte .k { display: flex; gap: 12px; align-items: center; }
.agent-karte .avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
.agent-karte h3 { margin: 0; font: 600 16px/1.2 var(--schrift-anzeige); }
.agent-karte .rolle { color: var(--text-3); font-size: 12.5px; }
.agent-karte .zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-liste { display: grid; gap: 2px; }
.mini-liste div { display: flex; gap: 8px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--linie); cursor: pointer; }
.mini-liste div:hover { color: var(--akzent); }
.mini-liste span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-liste span:last-child { color: var(--text-3); }

/* Karte (Leaflet) --------------------------------------------------------- */
.karten-bereich { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: 100%; }
#landkarte { height: 100%; background: #0b1017; }
:root[data-theme="light"] #landkarte { background: #e9eef3; }
.karten-seite { border-left: 1px solid var(--linie); overflow: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }
.leaflet-container { font: 12.5px var(--schrift); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); border: 1px solid var(--linie-2); }
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-control-zoom a { background: var(--flaeche) !important; color: var(--text) !important; border-color: var(--linie-2) !important; }
.leaflet-control-attribution { background: rgba(0, 0, 0, 0.35) !important; color: var(--text-3) !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }

/* Jarvis-Gespräch --------------------------------------------------------- */
.gespraech { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.gespraech-verlauf { overflow: auto; padding: 28px max(26px, calc(50% - 420px)) 20px; display: flex; flex-direction: column; gap: 18px; }
.gespraech-start { display: grid; justify-items: center; gap: 10px; text-align: center; margin: auto 0; padding: 20px; }
.gespraech-start canvas { width: 220px; height: 220px; cursor: pointer; }
.gespraech-start h2 { margin: 6px 0 0; font: 600 24px/1.2 var(--schrift-anzeige); }
.vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin-top: 10px; }
.vorschlag { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); cursor: pointer; font-size: 13px; }
.vorschlag:hover { border-color: var(--akzent); color: var(--text); }
.nachricht { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.nachricht .wer { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.nachricht.nutzer .wer { background: var(--flaeche-3); color: var(--text-2); }
.nachricht.jarvis .wer { background: radial-gradient(circle, #e8fbff 0 10%, var(--akzent) 35%, rgba(92, 220, 255, 0.1) 70%); box-shadow: 0 0 14px rgba(92, 220, 255, 0.35); }
.nachricht .inhalt-text { line-height: 1.62; font-size: 14.5px; min-width: 0; }
.nachricht.nutzer .inhalt-text { color: var(--text-2); }
.inhalt-text p { margin: 0 0 10px; }
.inhalt-text p:last-child { margin-bottom: 0; }
.inhalt-text ul, .inhalt-text ol { margin: 0 0 10px; padding-left: 20px; }
.inhalt-text li { margin: 3px 0; }
.inhalt-text strong { color: var(--text); }
.inhalt-text code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--flaeche-3); }
.inhalt-text h3, .inhalt-text h4 { margin: 12px 0 6px; font-size: 14.5px; }
.inhalt-text table { border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.inhalt-text th, .inhalt-text td { border-bottom: 1px solid var(--linie); padding: 5px 10px; text-align: left; }
.schritte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.schritt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); padding: 3px 9px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.schritt.laeuft::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--akzent); border-right-color: transparent; animation: drehen 0.8s linear infinite; }
.schritt.fertig::before { content: "✓"; color: var(--gut); font-weight: 700; }
.schritt.fehler::before { content: "!"; color: var(--kritisch); font-weight: 700; }
@keyframes drehen { to { transform: rotate(360deg); } }
.denkt { display: inline-flex; gap: 4px; padding: 6px 0; }
.denkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); animation: huepfen 1.2s infinite; }
.denkt i:nth-child(2) { animation-delay: 0.15s; }
.denkt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes huepfen { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.eingabe-leiste { padding: 14px max(26px, calc(50% - 420px)) 22px; border-top: 1px solid var(--linie); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.12)); }
.eingabe-box { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--linie-2); background: var(--flaeche); box-shadow: var(--schatten); }
.eingabe-box:focus-within { border-color: rgba(92, 220, 255, 0.55); box-shadow: var(--akzent-glut); }
.eingabe-box textarea { border: 0; outline: none; background: transparent; resize: none; max-height: 180px; min-height: 24px; padding: 7px 0; line-height: 1.45; }
.mikro { position: relative; }
.mikro.hoert { background: var(--kritisch) !important; color: #fff; border-color: transparent !important; box-shadow: 0 0 0 6px rgba(255, 93, 108, 0.18); }
.eingabe-hinweis { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.eingabe-hinweis label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

/* Entwurfskarte ----------------------------------------------------------- */
.entwurf { border: 1px solid rgba(92, 220, 255, 0.3); border-radius: 14px; background: linear-gradient(180deg, var(--akzent-weich), transparent 60%), var(--flaeche); padding: 14px 16px; display: grid; gap: 10px; margin-top: 10px; }
.entwurf .k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.entwurf .k b { font-weight: 600; }
.entwurf textarea, .entwurf input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie-2); background: var(--flaeche-2); outline: none; resize: vertical; line-height: 1.5; }
.entwurf textarea { min-height: 90px; }
.entwurf .knoepfe { display: flex; gap: 8px; align-items: center; }
.entwurf.gesendet { border-color: rgba(62, 207, 142, 0.4); background: var(--gut-weich); }
.entwurf.verworfen { opacity: 0.55; }
.entwurf .fehlertext { color: var(--kritisch); font-size: 12.5px; }

/* Befehlsleiste & Meldungen -------------------------------------------------- */
.befehl-hinter { position: fixed; inset: 0; z-index: 80; background: rgba(3, 6, 10, 0.55); backdrop-filter: blur(3px); display: grid; justify-items: center; align-items: start; padding-top: 14vh; animation: einblenden 0.12s; }
.befehl { width: min(680px, 92vw); border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; }
.befehl input { width: 100%; padding: 18px 20px; border: 0; outline: none; background: transparent; font-size: 17px; }
.befehl .treffer { border-top: 1px solid var(--linie); max-height: 360px; overflow: auto; }
.befehl .treffer div { padding: 10px 20px; cursor: pointer; display: flex; gap: 10px; align-items: center; color: var(--text-2); }
.befehl .treffer div[aria-selected="true"] { background: var(--akzent-weich); color: var(--text); }
.meldungen { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: grid; gap: 8px; }
.meldung { padding: 11px 14px; border-radius: 12px; background: var(--glas); backdrop-filter: blur(16px); border: 1px solid var(--linie-2); box-shadow: var(--schatten); max-width: 380px; animation: hereinschieben 0.2s; font-size: 13px; }
.meldung.fehler { border-color: rgba(255, 93, 108, 0.5); }
.meldung.gut { border-color: rgba(62, 207, 142, 0.5); }
.dialog-hinter { position: fixed; inset: 0; z-index: 85; background: rgba(3, 6, 10, 0.55); display: grid; place-items: center; animation: einblenden 0.12s; }
.dialog { width: min(520px, 92vw); padding: 22px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); display: grid; gap: 14px; }
.dialog h3 { margin: 0; font: 600 17px/1.3 var(--schrift-anzeige); }
.dialog .vorschau { white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); max-height: 260px; overflow: auto; font-size: 13.5px; }
.dialog .knoepfe { display: flex; justify-content: flex-end; gap: 8px; }

/* Einstellungen ---------------------------------------------------------- */
.formular { display: grid; gap: 12px; max-width: 560px; }
.formular label { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.formular input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linie-2); background: var(--flaeche-2); outline: none; }
.formular input:focus { border-color: var(--akzent); }
.formular .zwei { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.verbindungen { display: grid; gap: 8px; }
.verbindung { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.verbindung span:nth-child(3) { margin-left: auto; color: var(--text-3); font-size: 12px; max-width: 60%; text-align: right; }
.protokoll { font: 12px/1.6 var(--mono); color: var(--text-2); max-height: 360px; overflow: auto; }
.protokoll div { display: grid; grid-template-columns: 130px 90px 1fr; gap: 8px; border-top: 1px solid var(--linie); padding: 3px 0; }

.scroll-duenn::-webkit-scrollbar, .inhalt::-webkit-scrollbar, .postfach-eintraege::-webkit-scrollbar, .postfach-detail::-webkit-scrollbar, .gespraech-verlauf::-webkit-scrollbar, .panel-rumpf::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--linie-2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.vk-zeile { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; }
.vk-zeile .marke-chip { justify-content: center; }
.vk-zeile .n { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-zeile .d { color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-zeile:hover .n { color: var(--akzent); }

/* Dunkle Karte: OSM-Kacheln invertiert und entsättigt, damit sie zur Oberfläche passen. */
:root:not([data-theme="light"]) .kacheln-osm { filter: invert(1) hue-rotate(185deg) brightness(0.82) contrast(0.92) saturate(0.35); }
:root[data-theme="light"] .kacheln-osm { filter: saturate(0.55) contrast(0.95); }

/* Anmeldung ---------------------------------------------------------------- */
body.anmelde-seite { display: grid; place-items: center; min-height: 100vh; overflow: auto; padding: 24px 16px; }
.anmelde-karte { width: min(400px, 100%); display: grid; justify-items: center; gap: 8px; padding: 30px 28px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); text-align: center; }
.anmelde-karte canvas { width: 150px; height: 150px; }
.anmelde-karte h1 { margin: 0; font: 600 22px/1 var(--schrift-anzeige); letter-spacing: 0.3em; }
.anmelde-karte p { margin: 0 0 8px; font-size: 13px; }
.anmelde-karte form { display: grid; gap: 12px; width: 100%; text-align: left; }
.anmelde-karte label { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.anmelde-karte input { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--linie-2); background: var(--flaeche-2); outline: none; }
.anmelde-karte input:focus { border-color: var(--akzent); box-shadow: var(--akzent-glut); }
.anmelde-karte .knopf { width: 100%; padding: 11px; }
.fehlertext { color: var(--kritisch); font-size: 12.5px; min-height: 0; }

.nur-mobil { display: none !important; }
.nav .kurz { display: none; }
.detail-aktionen { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
/* Schmale Fenster (Handy) --------------------------------------------------------- */
@media (max-width: 820px) {
  :root { --leiste: 0px; }
  .rahmen { grid-template-columns: 1fr; }
  .leiste { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; flex-direction: row; padding: 6px; border-right: 0; border-top: 1px solid var(--linie); background: var(--glas); backdrop-filter: blur(16px); }
  .marke, .leiste-fuss { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav button { flex-direction: column; gap: 2px; font-size: 10px; padding: 6px 4px; width: auto; }
  .nav button[aria-current="page"] { box-shadow: none; }
  .nav .zaehler { position: absolute; margin: -4px 0 0 14px; }
  .nav button { position: relative; }
  .kopf { padding: 10px 16px; }
  .suche-feld { width: auto; }
  .suche-feld kbd { display: none; }
  .inhalt { padding: 16px 16px 90px; }
  .inhalt.voll { padding-bottom: 64px; }
  .held { grid-template-columns: 1fr; padding: 18px; }
  .held canvas { width: 120px; height: 120px; justify-self: center; }
  .held .uhr { display: none; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postfach { grid-template-columns: 1fr; }
  .postfach-detail { display: none; }
  .postfach.detail-offen .postfach-liste { display: none; }
  .postfach.detail-offen .postfach-detail { display: block; }
  .karten-bereich { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .karten-seite { max-height: 40vh; border-left: 0; border-top: 1px solid var(--linie); }
  .agenten-streifen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werte { grid-template-columns: repeat(2, 1fr); }
  .nur-mobil { display: inline-flex !important; }
  .nav .lang { display: none; }
  .nav .kurz { display: inline; }
  .nav button { flex: 1 1 0; min-width: 0; font-size: 9.5px; }
  .suche-text, .suche-feld kbd { display: none; }
  .suche-feld { padding: 9px; }
  .detail-aktionen { margin-left: 0; width: 100%; }
  .kopf h1 { font-size: 17px; }
  .detail-kopf { flex-wrap: wrap; padding: 12px 16px; }
  .detail-rumpf { padding: 16px; }
}