/* =====================================================================
   DHS OS V15 — Visuelle Grundformen II (nvx-*)
   Wetter-Glyphen, MiniMetric, SignalLane + Nex-Home-Tagesüberblick.
   Nutzt die globalen :root-Tokens aus app.css. Nur transform/opacity
   animiert (GPU), kein schwerer Blur. reduced-motion schaltet ab.
   ===================================================================== */

/* ── Ton-Skala (geteilt von Metric + Lane) ───────────────────────── */
.nvx-ton-lime   { --nvx-ton: var(--lime); }
.nvx-ton-ok     { --nvx-ton: var(--ok, #7FC46B); }
.nvx-ton-warn   { --nvx-ton: var(--warn, #E6C84A); }
.nvx-ton-danger { --nvx-ton: var(--danger, #E0726A); }
.nvx-ton-info   { --nvx-ton: var(--info, #7FB3FF); }
.nvx-ton-neutral{ --nvx-ton: var(--muted, #9AA39A); }

/* ── Wetter-Glyph ─────────────────────────────────────────────────
   currentColor trägt die Grundlinie; einzelne Teile setzen eigene Töne. */
.nvx-wg { display: block; color: var(--muted); }
.nvx-wg-wolke { stroke: var(--muted-2, #828B82); }
.nvx-wg-sonne { stroke: #F2C14E; }
.nvx-wg-sonne circle { fill: rgba(242, 193, 78, .16); }
.nvx-wg-nebel { stroke: var(--muted-2, #828B82); opacity: .8; }
.nvx-wg-regen .nvx-wg-tropfen { stroke: #7FB3FF; }
.nvx-wg-schnee .nvx-wg-flocke { stroke: #cfe3ff; fill: #cfe3ff; }
.nvx-wg-blitz { stroke: #F2C14E; fill: rgba(242, 193, 78, .18); }

/* Sonnenstrahlen: sehr langsame Drehung — Präsenz, kein Blinken. */
.nvx-wg-strahlen { transform-box: fill-box; transform-origin: center;
  animation: nvx-drehen 26s linear infinite; }
.nvx-wg-sonne-klein .nvx-wg-strahlen { animation-duration: 30s; }
@keyframes nvx-drehen { to { transform: rotate(360deg); } }

/* Regen fällt, versetzt. */
.nvx-wg-tropfen { animation: nvx-fallen 1.5s var(--nex-ease, ease) infinite; }
.nvx-wg-schnee .nvx-wg-flocke { animation: nvx-fallen 2.6s ease-in-out infinite; }
.nvx-wg-t0 { animation-delay: 0s; }
.nvx-wg-t1 { animation-delay: .5s; }
.nvx-wg-t2 { animation-delay: 1s; }
@keyframes nvx-fallen {
  0% { opacity: 0; transform: translateY(-2px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(3px); }
}
.nvx-wg-blitz { animation: nvx-blitzen 3.5s steps(1) infinite; }
@keyframes nvx-blitzen { 0%,92%,100% { opacity: .5; } 94%,98% { opacity: 1; } }

/* ── MiniMetric ───────────────────────────────────────────────────
   Symbol + große Zahl + Label. Zahl in Ton, Label ruhig. */
/* §16/§17 dunkel ≠ schwarz: transluzente Fläche als Ebene auf der Oberfläche,
   Hairline statt harter Border — kein separater schwarzer Kasten. */
.nvx-metric { display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .05); border-radius: 14px;
  transition: border-color var(--nex-fast, .14s) var(--nex-ease, ease),
    background var(--nex-fast, .14s) var(--nex-ease, ease),
    transform var(--nex-fast, .14s) var(--nex-ease, ease); min-width: 0; }
.nvx-metric:hover { border-color: color-mix(in srgb, var(--nvx-ton) 32%, transparent);
  background: rgba(255, 255, 255, .035); transform: translateY(-1px); }
.nvx-metric-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--nvx-ton);
  background: color-mix(in srgb, var(--nvx-ton) 12%, transparent); }
.nvx-metric-icon svg { width: 18px; height: 18px; }
.nvx-metric-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.nvx-metric-wert { font-family: var(--display, inherit); font-size: 22px;
  font-weight: 600; letter-spacing: .01em; color: var(--nvx-ton); }
.nvx-ton-neutral .nvx-metric-wert { color: var(--ink, #F5EFE6); }
.nvx-metric-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #9AA39A); margin-top: 1px; }
.nvx-metric-sub { font-size: 11.5px; color: var(--muted-2, #828B82); margin-top: 2px; }

/* ── SignalLane ───────────────────────────────────────────────────
   Eine Linie, Knoten, echte Uhrzeiten. */
.nvx-lane { list-style: none; margin: 0; padding: 0; position: relative; }
.nvx-lane::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg,
    var(--line, rgba(255,255,255,.10)), transparent); }
.nvx-lane-zeile { position: relative; display: flex; align-items: baseline; gap: 9px;
  padding: 6px 0 6px 20px; }
.nvx-lane-knoten { position: absolute; left: 1px; top: 10px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg, #0A0D0B);
  border: 2px solid var(--nvx-ton); }
.nvx-lane-uhr { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--muted-2, #828B82); min-width: 38px; }
.nvx-lane-icon { color: var(--nvx-ton); display: inline-flex; }
.nvx-lane-icon svg { width: 15px; height: 15px; }
.nvx-lane-text { font-size: 13.5px; color: var(--ink, #F5EFE6); line-height: 1.4; }

/* ── Nex-Home Tagesüberblick (Presence-Klasse, freigegeben) ───────
   Zwischen Kopf und Conversation: Wetter + echte Kennzahlen + Finanz-Rail.
   Keine Kartenwand — ein ruhiger, dichter Überblick. */
.marc-home-ueberblick { display: flex; flex-direction: column; gap: 14px;
  margin: 4px 0 6px; }
.mhu-oben { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: stretch; }
.mhu-wetter { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: radial-gradient(130% 90px at 18% 0%, rgba(184,232,52,.055), transparent 70%),
    rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .05); border-radius: 14px; }
.mhu-wetter-temp { font-family: var(--display, inherit); font-size: 26px; font-weight: 600;
  color: var(--ink, #F5EFE6); line-height: 1; }
.mhu-wetter-meta { display: flex; flex-direction: column; gap: 2px; }
.mhu-wetter-cond { font-size: 12.5px; color: var(--muted, #9AA39A); }
.mhu-wetter-regen { font-size: 11.5px; color: #7FB3FF; }
.mhu-wetter-ort { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2, #828B82); }
.mhu-metriken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mhu-rail-titel, .mhu-block-titel { font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2, #828B82); margin: 0 0 8px; }

@media (max-width: 560px) {
  .mhu-oben { grid-template-columns: 1fr; }
  .mhu-metriken { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .nvx-metric { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }
}

/* ── EntityBadge ──────────────────────────────────────────────────── */
.nvx-ebadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; color: var(--ink, #F5EFE6);
  background: color-mix(in srgb, var(--nvx-ton) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nvx-ton) 26%, transparent); }
.nvx-ebadge-icon { color: var(--nvx-ton); display: inline-flex; }
.nvx-ebadge-icon svg { width: 13px; height: 13px; }

/* ── RelationMap (Node-Graph light) ──────────────────────────────────
   3×3-Raster: Zentrum + bis zu 4 Arme. SVG-Linien nur zu echten Knoten. */
.nvx-rmap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto; align-items: center; justify-items: center;
  gap: 12px 16px; padding: 8px; }
.nvx-rmap-linien { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nvx-rmap-linie { stroke: var(--line-lime, rgba(184,232,52,.28)); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.nvx-rmap > *:not(.nvx-rmap-linien) { z-index: 1; }
.nvx-rmap-c-top { grid-column: 2; grid-row: 1; }
.nvx-rmap-c-left { grid-column: 1; grid-row: 2; }
.nvx-rmap-zentrum { grid-column: 2; grid-row: 2; }
.nvx-rmap-c-right { grid-column: 3; grid-row: 2; }
.nvx-rmap-c-bottom { grid-column: 2; grid-row: 3; }
.nvx-rmap-zentrum { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 18px; border-radius: 14px; background: var(--bg-elev, #182019);
  border: 1px solid var(--line-lime, rgba(184,232,52,.30)); min-width: 104px;
  text-align: center; box-shadow: 0 0 0 4px rgba(184,232,52,.05); }
.nvx-rmap-zlabel { font-weight: 600; font-size: 14px; color: var(--ink, #F5EFE6); line-height: 1.2; }
.nvx-rmap-zsub { font-size: 11px; color: var(--muted, #9AA39A); }
.nvx-rmap-knoten { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 12px; background: var(--bg-card, #131A14);
  border: 1px solid var(--line, rgba(255,255,255,.08)); min-width: 78px;
  transition: border-color var(--nex-fast, .14s) var(--nex-ease, ease); }
.nvx-rmap-knoten:hover { border-color: color-mix(in srgb, var(--nvx-ton) 45%, transparent); }
.nvx-rmap-kicon { color: var(--nvx-ton); } .nvx-rmap-kicon svg { width: 17px; height: 17px; }
.nvx-rmap-kwert { font-family: var(--display, inherit); font-size: 17px; font-weight: 600; color: var(--nvx-ton); }
.nvx-ton-neutral .nvx-rmap-kwert { color: var(--ink, #F5EFE6); }
.nvx-rmap-klabel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9AA39A); }
.nvx-rmap-leer { display: block; min-height: 1px; }

@media (max-width: 560px) {
  .nvx-rmap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 8px 8px 8px 16px; }
  .nvx-rmap-linien { display: none; }
  .nvx-rmap::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px;
    width: 1px; background: var(--line, rgba(255,255,255,.10)); }
  .nvx-rmap-leer { display: none; }
  .nvx-rmap-knoten { flex-direction: row; gap: 9px; min-width: 0; padding: 7px 11px; }
  .nvx-rmap-klabel { letter-spacing: .04em; }
}

/* Kunden-Detail: Zusammenhänge-Band. */
.kd-rmap { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }

/* Leads: Pipeline-Übersicht (nutzt C.vz.FlowFunnel). */
.lead-pipeline { margin: 4px 0 16px; padding: 14px 16px; background: var(--bg-card, #131A14);
  border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 14px; }
.lead-pipeline-verloren { margin: 8px 0 0; }

/* ── Kalender „Heute" — Tages-Timeline (§44-47) ─────────────────────── */
.kal-tl { position: relative; }
.kal-tl-ganz { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kal-tl-ganz-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(184, 232, 52, .08); border: 1px solid rgba(184, 232, 52, .22); color: var(--ink, #F5EFE6); }
.kal-tl-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.kal-tl-liste::before { content: ""; position: absolute; left: 62px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line, rgba(255,255,255,.10)); }
.kal-tl-zeile { position: relative; display: grid; grid-template-columns: 50px 1fr auto;
  gap: 12px; align-items: center; padding: 9px 0; }
.kal-tl-zeit { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted, #9AA39A); text-align: right; }
.kal-tl-zeile::before { content: ""; position: absolute; left: 58px; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bg, #0A0D0B); border: 2px solid var(--lime, #B8E834);
  transform: translateY(-50%); }
.kal-tl-block { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; min-width: 0; }
.kal-tl-titel { font-size: 14.5px; color: var(--ink, #F5EFE6); font-weight: 500; line-height: 1.25; }
.kal-tl-ort { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted, #9AA39A); }
.kal-tl-ort svg { width: 13px; height: 13px; flex: 0 0 auto; }
.kal-tl-wetter { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #9AA39A); }
.kal-tl-temp { font-size: 13px; color: var(--ink, #F5EFE6); font-variant-numeric: tabular-nums; }
.kal-tl-jetzt { position: relative; height: 20px; display: flex; align-items: center; }
.kal-tl-jetzt::before { content: ""; position: absolute; left: 62px; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--danger, #E0726A), transparent 80%); }
.kal-tl-jetzt::after { content: ""; position: absolute; left: 58px; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: var(--danger, #E0726A); transform: translateY(-50%); }
.kal-tl-jetzt-label { position: absolute; left: 74px; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--danger, #E0726A); background: var(--bg, #0A0D0B); padding: 0 6px; }

/* ── Kalender V15.2 — View-Switcher (Segmented) + Monatsgrid ────────── */
.kal-kopf-oben { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kal-nav { display: flex; align-items: center; gap: 8px; }
.kal-periode { font-size: 14px; font-weight: 600; color: var(--ink, #F5EFE6); margin-left: 6px; }
/* Touch-Target: >=44px Hit-Area (WCAG/Apple) — die Grafik bleibt kompakt. */
.kal-pfeil, .kal-heute-btn { min-height: 44px; border: 0; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: var(--ink, #F5EFE6); transition: background .14s ease, transform .12s ease; }
.kal-pfeil { min-width: 44px; font-size: 18px; }
.kal-heute-btn { padding: 0 14px; font-size: 13px; font-weight: 600; }
.kal-pfeil:hover, .kal-heute-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
/* Segmented control */
.kal-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-top: 14px; border-radius: 13px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.kal-tab { border: 0; background: transparent; color: var(--muted, #9AA39A); padding: 8px 16px;
  border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s var(--nex-ease, ease), color .14s ease; }
.kal-tab:hover:not(.kal-tab-aktiv) { color: var(--ink, #F5EFE6); }
.kal-tab-aktiv { color: var(--ink, #F5EFE6);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 6px rgba(0,0,0,.3); }

.kal-monat { margin-top: 16px; }
.kal-monat-kopf { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.kal-monat-kopf span { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2, #828B82); padding-left: 4px; }
.kal-monat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-mtag { min-height: 96px; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 6px 7px; border-radius: 11px; cursor: pointer; border: 0;
  background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: background .14s ease, box-shadow .14s ease; }
.kal-mtag:hover { background: rgba(255,255,255,.05); }
.kal-mtag-fremd { opacity: .38; }
.kal-mtag-heute { box-shadow: inset 0 0 0 1px rgba(184,232,52,.5), 0 0 0 3px rgba(184,232,52,.06); }
.kal-mtag-num { font-size: 13px; font-weight: 600; color: var(--ink, #F5EFE6); }
.kal-mtag-heute .kal-mtag-num { color: var(--lime, #B8E834); }
.kal-mtag-evs { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.kal-mtag-ev { font-size: 10.5px; line-height: 1.35; color: var(--ink, #F5EFE6); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 1px 5px; border-radius: 5px;
  background: rgba(184,232,52,.14); }
.kal-mtag-ev.ganz { background: rgba(127,179,255,.16); }
.kal-mtag-mehr { font-size: 10px; color: var(--muted-2, #828B82); }
.kal-spalte-kopf { border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left; }
.kal-spalte-kopf:hover { color: var(--lime, #B8E834); }

/* Mobile (§41/§68): Monat kompakt — Punkte statt Text, Tag-Tap → Tagesagenda. */
@media (max-width: 560px) {
  .kal-monat-grid { gap: 3px; }
  .kal-mtag { min-height: 50px; padding: 4px 4px 5px; gap: 2px; align-items: flex-start; }
  .kal-mtag-num { font-size: 12px; }
  .kal-mtag-evs { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .kal-mtag-ev { font-size: 0; padding: 0; width: 5px; height: 5px; border-radius: 50%; }
  .kal-mtag-mehr { font-size: 9px; }
  .kal-monat-kopf span { font-size: 9px; text-align: center; padding-left: 0; }
  .kal-periode { font-size: 12.5px; }
  .kal-kopf-oben { gap: 8px; }
  .kal-tabs { width: 100%; justify-content: space-between; }
  .kal-tab { padding: 8px 10px; flex: 1; text-align: center; }
  /* Kleinerer Gap holt den 7-Spalten-Tagzellen die letzten Pixel auf >=44px Breite. */
  .kal-monat-grid, .kal-monat-kopf { gap: 3px; }
}

/* ── Mail-Inbox (§A1) ──────────────────────────────────────────────── */
.mail-tabs.kal-tabs { margin-top: 0; }
.mi-kopf { display: flex; gap: 12px; align-items: baseline; margin: 4px 0 10px; }
.mi-anzahl { font-size: 13px; color: var(--muted, #9AA39A); }
.mi-ungelesen { font-size: 12px; color: var(--lime, #B8E834); font-weight: 600; }
.mi-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mi-zeile { border: 1px solid var(--line-soft, rgba(255,255,255,.07)); border-radius: 12px; transition: background .14s var(--nex-ease, ease), border-color .14s ease; }
.mi-zeile:hover { background: rgba(255,255,255,.025); }
.mi-auf { background: rgba(255,255,255,.03); }
.mi-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 12px 14px; }
.mi-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.mi-unread .mi-dot { background: var(--lime, #B8E834); box-shadow: 0 0 6px rgba(184,232,52,.5); }
.mi-avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 15px; font-weight: 600; color: var(--ink, #F5EFE6);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); flex: 0 0 auto; }
.mi-mitte { min-width: 0; }
.mi-oben { display: flex; align-items: center; gap: 8px; }
.mi-von { font-size: 13.5px; color: var(--muted, #9AA39A); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-unread .mi-von { color: var(--ink, #F5EFE6); font-weight: 700; }
.mi-kunde { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--lime, #B8E834);
  background: rgba(184,232,52,.1); border: 1px solid rgba(184,232,52,.24); border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }
.mi-kunde svg { width: 12px; height: 12px; }
.mi-betreff { font-size: 14px; color: var(--ink, #F5EFE6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mi-unread .mi-betreff { font-weight: 600; }
.mi-preview { font-size: 12.5px; color: var(--muted-2, #828B82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mi-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.mi-zeit { font-size: 12px; color: var(--muted-2, #828B82); font-variant-numeric: tabular-nums; }
.mi-answered { color: var(--ok, #7FC46B); display: inline-flex; }
.mi-answered svg { width: 14px; height: 14px; }
.mi-body { padding: 0 14px 14px 64px; }
.mi-body-text { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--ink, #F5EFE6);
  background: rgba(255,255,255,.02); border-radius: 12px; padding: 13px 15px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  max-height: 300px; overflow: auto; margin: 0; }
.mi-body-load { color: var(--muted, #9AA39A); font-size: 13px; }
.mi-body-actions { margin-top: 10px; }
.mi-state { display: flex; align-items: center; gap: 10px; color: var(--muted, #9AA39A); padding: 28px 4px; }
.mi-state-orb { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 40% 38%, var(--lime, #B8E834), #6fa316 70%, transparent);
  animation: vo-atem 1.6s ease-in-out infinite; }
.mi-leer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 52px 20px;
  color: var(--muted, #9AA39A); text-align: center; }
.mi-leer-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  color: var(--muted-2, #828B82); background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.mi-leer-icon svg { width: 24px; height: 24px; }
@media (max-width: 560px) {
  .mi-row { gap: 9px; padding: 11px 6px; }
  .mi-betreff { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
  .mi-avatar { width: 34px; height: 34px; }
  .mi-preview { display: none; }
  .mi-body { padding-left: 6px; }
  .mail-tabs.kal-tabs { width: 100%; }
  .mail-tabs .kal-tab { flex: 1; text-align: center; }
}

/* ── „Über Nacht" (Morgenblick §5-8) ───────────────────────────────── */
.un { margin-bottom: 18px; padding: 16px 18px; border-radius: 16px;
  background: radial-gradient(160% 90px at 12% 0%, rgba(184,232,52,.06), transparent 70%), rgba(255,255,255,.018);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.un-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.un-orb { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; position: relative;
  background: radial-gradient(circle at 38% 32%, #1b4020 0%, #0c1a0e 58%, #05100a 100%);
  box-shadow: 0 0 0 1px rgba(184,232,52,.28), inset 0 2px 5px rgba(230,255,190,.1), 0 0 24px rgba(184,232,52,.16); }
.un-orb::after { content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #eaffb0, var(--lime, #B8E834) 45%, transparent); }
.un-kopf-text { min-width: 0; }
.un-titel { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink, #F5EFE6); }
.un-satz { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #9AA39A); }
.un-empf { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: rgba(184,232,52,.06); box-shadow: inset 0 0 0 1px rgba(184,232,52,.2); }
.un-empf-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime, #B8E834); font-weight: 700; flex: 0 0 auto; }
.un-empf-text { font-size: 13.5px; color: var(--ink, #F5EFE6); line-height: 1.45; }
@media (max-width: 560px) { .un { padding: 14px; } .un-orb { width: 34px; height: 34px; } .un-orb::after { inset: 11px; } }

/* ── Systeme & Integrationen — Node-Graph (§12/§13) ────────────────── */
.sysg-sec { display: flex; justify-content: center; }
.sysg { position: relative; width: 100%; max-width: 620px; height: 360px; margin: 8px auto; }
.sysg-linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sysg-linie { stroke: var(--nvx-ton, rgba(255,255,255,.12)); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .5; }
.sysg > *:not(.sysg-linien) { z-index: 1; }
.sysg-zentrum { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 22px; border-radius: 16px;
  background: var(--bg-elev, #182019); box-shadow: inset 0 0 0 1px rgba(184,232,52,.3), 0 0 0 5px rgba(184,232,52,.05); text-align: center; }
.sysg-z-orb { width: 26px; height: 26px; border-radius: 50%; position: relative; margin-bottom: 2px;
  background: radial-gradient(circle at 38% 32%, #1b4020, #0c1a0e 60%, #05100a);
  box-shadow: 0 0 0 1px rgba(184,232,52,.3), 0 0 18px rgba(184,232,52,.2); }
.sysg-z-orb::after { content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #eaffb0, var(--lime, #B8E834) 45%, transparent); }
.sysg-zentrum b { font-size: 14px; color: var(--ink, #F5EFE6); font-weight: 700; }
.sysg-zentrum i { font-size: 11px; color: var(--muted, #9AA39A); font-style: normal; letter-spacing: .05em; }
.sysg-knoten { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 9px 12px; border-radius: 12px; background: var(--bg-card, #131A14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-width: 100px; }
.sysg-k-icon { color: var(--nvx-ton, var(--muted, #9AA39A)); } .sysg-k-icon svg { width: 18px; height: 18px; }
.sysg-k-label { font-size: 11.5px; color: var(--ink, #F5EFE6); white-space: nowrap; }
.sysg-k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nvx-ton, var(--muted, #9AA39A));
  box-shadow: 0 0 6px color-mix(in srgb, var(--nvx-ton) 60%, transparent); }
@media (max-width: 620px) {
  .sysg { height: auto; max-width: none; display: flex; flex-direction: column; gap: 10px; padding-left: 16px; }
  .sysg-linien { display: none; }
  .sysg::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 1px; background: var(--line, rgba(255,255,255,.10)); }
  .sysg-zentrum { position: static; transform: none; flex-direction: row; gap: 10px; align-self: flex-start; }
  .sysg-knoten { position: static !important; left: auto !important; top: auto !important; transform: none;
    flex-direction: row; gap: 10px; min-width: 0; align-self: flex-start; }
}

/* ── Integrationszentrale — klare Hauptspur, Technik bei Bedarf ──────
   Die alte Ansicht zeigte dieselben fünf Systeme zuerst als Rail und
   direkt danach erneut als Detailzeilen. Diese eine Spur trägt Name,
   Zustand und Messung; Variablennamen erscheinen nur bei Handlungsbedarf. */
.int-overview { margin-top: 8px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.08)); }
.int-overview .int-zeile {
  grid-template-columns: minmax(160px,.8fr) auto minmax(260px,1.5fr);
  gap: 8px 18px; align-items: center; min-height: 62px; padding: 13px 2px;
  border-color: var(--line-soft, rgba(255,255,255,.08));
}
.int-overview .int-titel { font-size: 14px; letter-spacing: -.01em; }
.int-overview .int-mess { grid-column: auto; line-height: 1.45; text-wrap: pretty; }
.int-overview .int-vars { grid-column: 1/-1; margin-top: -3px; padding: 8px 10px;
  border-left: 2px solid var(--warn, #e6c84a); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--warn, #e6c84a) 7%, transparent); opacity: .86; }

.int-tech-details { margin: 18px 0 0; border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: 18px; background: color-mix(in srgb, var(--bg-card, #131a14) 76%, transparent);
  overflow: clip; }
.int-tech-details > summary { display: flex; align-items: center; gap: 12px; min-height: 70px;
  padding: 14px 18px; cursor: pointer; list-style: none; transition: background .22s ease, color .22s ease; }
.int-tech-details > summary::-webkit-details-marker { display: none; }
.int-tech-details > summary:hover { background: rgba(255,255,255,.025); }
.int-tech-details > summary:focus-visible { outline: 2px solid var(--lime, #b8e834); outline-offset: -3px; }
.int-tech-details > summary::after { content: "+"; margin-left: auto; color: var(--muted, #9aa39a);
  font: 500 24px/1 var(--mono, monospace); transition: transform .22s ease; }
.int-tech-details[open] > summary::after { transform: rotate(45deg); }
.int-tech-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px; color: var(--lime, #b8e834); background: rgba(184,232,52,.07);
  box-shadow: inset 0 0 0 1px rgba(184,232,52,.18); }
.int-tech-icon svg { width: 18px; height: 18px; }
.int-tech-details summary span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.int-tech-details summary strong { font-size: 14px; }
.int-tech-details summary small { color: var(--muted, #9aa39a); line-height: 1.35; }
.int-tech-body { display: grid; gap: 14px; padding: 0 14px 16px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.08)); }
.int-tech-body > .sec { margin: 14px 0 0; }

@media (max-width: 720px) {
  .int-overview .int-zeile { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 14px 0; }
  .int-overview .int-mess { grid-column: 1/-1; }
  .int-tech-details > summary { padding: 13px 14px; }
  .int-tech-details summary small { font-size: 11px; }
  .int-tech-body { padding: 0 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .int-tech-details > summary, .int-tech-details > summary::after { transition: none; }
}

/* ── Finance-Hero (§E1) — MRR/Offen/Überfällig/Bezahlt auf einen Blick ── */
.fin-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 620px) { .fin-hero { grid-template-columns: repeat(2, 1fr); } }

/* ── Timeline (Spur/Historie/Ereignisse §F) ────────────────────────── */
.nvx-tl-gruppe { margin-bottom: 16px; }
.nvx-tl-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2, #828B82);
  margin: 0 0 6px; font-weight: 600; }

/* ── WorkFlow (Work Surface §C) — vertikaler Node-Flow + Signalpfad ── */
.nvx-wf { position: relative; display: flex; flex-direction: column; }
.nvx-wf-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 6px 0; align-items: start; }
.nvx-wf-step::before { content: ""; position: absolute; left: 15px; top: -6px; height: 22px; width: 2px;
  background: var(--line, rgba(255,255,255,.12)); }
.nvx-wf-step:first-child::before { display: none; }
/* Erreichte Segmente (nach success/running) leuchten lime. */
.nvx-wf-success::before, .nvx-wf-running::before { background: linear-gradient(180deg, rgba(184,232,52,.5), rgba(184,232,52,.5)); }
.nvx-wf-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-card, #131A14);
  box-shadow: inset 0 0 0 1.5px var(--line-strong, rgba(255,255,255,.18)); color: var(--muted-2, #828B82); }
.nvx-wf-node svg { width: 16px; height: 16px; }
.nvx-wf-node::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nvx-wf-success .nvx-wf-node, .nvx-wf-failed .nvx-wf-node, .nvx-wf-blocked .nvx-wf-node { }
.nvx-wf-success .nvx-wf-node::after, .nvx-wf-failed .nvx-wf-node::after, .nvx-wf-blocked .nvx-wf-node::after { display: none; }
.nvx-wf-success .nvx-wf-node { box-shadow: inset 0 0 0 1.5px var(--ok, #7FC46B); color: var(--ok, #7FC46B);
  background: color-mix(in srgb, var(--ok, #7FC46B) 12%, var(--bg-card, #131A14)); }
.nvx-wf-blocked .nvx-wf-node { box-shadow: inset 0 0 0 1.5px var(--warn, #E6C84A); color: var(--warn, #E6C84A); }
.nvx-wf-failed .nvx-wf-node { box-shadow: inset 0 0 0 1.5px var(--danger, #E0726A); color: var(--danger, #E0726A); }
.nvx-wf-running .nvx-wf-node { box-shadow: inset 0 0 0 1.5px var(--lime, #B8E834), 0 0 12px rgba(184,232,52,.4);
  color: var(--lime, #B8E834); animation: nvx-wf-pulse 1.4s ease-in-out infinite; }
@keyframes nvx-wf-pulse { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 8px rgba(184,232,52,.3); }
  50% { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 16px rgba(184,232,52,.55); } }
.nvx-wf-skipped .nvx-wf-node { opacity: .5; }
.nvx-wf-body { display: flex; flex-direction: column; gap: 1px; padding-top: 5px; min-width: 0; }
.nvx-wf-label { font-size: 13.5px; color: var(--ink, #F5EFE6); line-height: 1.3; }
.nvx-wf-skipped .nvx-wf-label, .nvx-wf-pending .nvx-wf-label { color: var(--muted, #9AA39A); }
.nvx-wf-ergebnis { font-size: 12px; color: var(--muted-2, #828B82); line-height: 1.4; }

/* ── Entscheidungen — Status-Lane (§6) ─────────────────────────────── */
.entsch-rail { display: flex; align-items: center; margin: 10px 0 12px; }
.entsch-rail-step { display: flex; align-items: center; gap: 7px; color: var(--muted-2, #828B82); }
.entsch-rail-step:not(:last-child)::after { content: ""; flex: 1; min-width: 22px; height: 1.5px;
  background: var(--line, rgba(255,255,255,.12)); margin: 0 8px; }
.entsch-rail-step:not(:last-child) { flex: 1; }
.entsch-rail-step.reached { color: var(--ink, #F5EFE6); }
.entsch-rail-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bg-card, #131A14); box-shadow: inset 0 0 0 1.5px var(--line-strong, rgba(255,255,255,.18)); }
.entsch-rail-step.reached .entsch-rail-dot { background: var(--lime, #B8E834); box-shadow: inset 0 0 0 1.5px var(--lime, #B8E834); }
.entsch-rail-step.current .entsch-rail-dot { box-shadow: inset 0 0 0 1.5px var(--lime, #B8E834), 0 0 0 3px rgba(184,232,52,.2); }
.entsch-rail-lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }

/* ── reduced-motion: Pflicht (§55) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .mi-state-orb, .nvx-wf-running .nvx-wf-node { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .nvx-wg-strahlen, .nvx-wg-tropfen, .nvx-wg-schnee .nvx-wg-flocke, .nvx-wg-blitz { animation: none; }
  .nvx-wg-blitz { opacity: 1; }
  .nvx-metric { transition: none; }
}

.ziel-bar{margin:7px 0}