/* ══════════════════════════════════════════════════════════════════════════════
   Projecta Pro · Modernisierungs-Schicht „Cloud“ (30.09.2026)
   Wird als LETZTES Stylesheet geladen (nach allen Seiten-CSS), aendert keine Logik,
   kein Markup und nicht den Hintergrund (html::before-Mesh bleibt unveraendert).
   Arbeitet ausschliesslich ueber vorhandene Tokens + Komponenten-Klassen.
   Aufbau:  1 Tokens  2 Layout/Flaeche  3 Kopfzeile/Navigation  4 Karten  5 Controls
            6 Tabellen  7 Dialoge/Menues  8 Zustaende  9 Responsive  10 Bewegung
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Raster: 4er-Schritte */
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 20px; --m-6: 24px; --m-8: 32px; --m-10: 40px;
  /* Seitenrand waechst mit dem Fenster: 16 (iPhone) … 40 (grosser Monitor) */
  --m-gutter: clamp(16px, 2.2vw, 40px);
  --m-section-gap: clamp(16px, 1.6vw, 28px);
  --m-content-max: 2200px;           /* greift erst auf 27"+/Ultrawide */
  --m-read-max: 72ch;                /* nur fuer Fliesstext */
  /* Radien: Karte 16 · Panel 14 · Control 10 · Menue-Eintrag 8 · Chip 999 */
  --radius-lg: 16px; --radius: 14px; --radius-sm: 10px;
  --m-r-ctl: 10px; --m-r-item: 8px;
  /* Controls */
  --m-ctl-h: 38px; --m-ctl-h-sm: 30px; --m-touch: 44px;
  /* Typo-Skala */
  --m-fs-xs: 11.5px; --m-fs-sm: 12.5px; --m-fs: 14px; --m-fs-md: 15px; --m-fs-lg: 17px;
  --m-fs-xl: 22px; --m-fs-2xl: clamp(24px, 1.6vw + 12px, 32px);
  /* Light: ruhige, fast deckende Flaechen ueber dem Mesh, Haarlinien statt Glas */
  --bg-card: rgba(255,255,255,0.88);
  --bg-card-hover: rgba(255,255,255,0.96);
  --surface: rgba(255,255,255,0.88);
  --bg-header: rgba(246,248,251,0.80);
  --border: rgba(15,23,42,0.09);
  --border-light: rgba(15,23,42,0.06);
  --border-glass: rgba(15,23,42,0.08);
  --border-strong: rgba(15,23,42,0.16);
  --m-edge: 0 0 0 1px rgba(15,23,42,0.06);
  --card-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 1px 1px rgba(15,23,42,0.02);
  --shadow-md: 0 6px 20px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05);
  --pop-shadow: 0 16px 40px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.06);
  --shadow: var(--card-shadow); --shadow-sm: var(--card-shadow); --shadow-lg: var(--pop-shadow);
  --m-row-hover: rgba(15,23,42,0.03);
  --m-row-sel: rgba(7,161,226,0.08);
  --m-thead: rgba(248,250,252,0.96);
  --m-disabled-bg: rgba(15,23,42,0.04);
  --m-disabled-fg: rgba(15,23,42,0.38);
  --ring: 0 0 0 3px rgba(7,161,226,0.28);
  --glass-blur: blur(18px);
  --transition: 0.18s cubic-bezier(0.2, 0, 0, 1);
}
/* Dunkel (Standard, blaugrau): eigene Stufen, keine Invertierung */
html.dark {
  --bg-body: #0b0f18;
  --bg-card: rgba(22,28,40,0.86);
  --bg-card-hover: rgba(30,37,51,0.92);
  --surface: rgba(22,28,40,0.86);
  --surface-solid: #161c28;
  --bg-modal: #171e2b; --bg-modal-solid: #171e2b;
  --bg-header: rgba(11,15,24,0.76);
  --border: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.055);
  --border-glass: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.15);
  --m-edge: 0 0 0 1px rgba(255,255,255,0.06);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.38);
  --pop-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --m-row-hover: rgba(255,255,255,0.035);
  --m-row-sel: rgba(44,181,240,0.12);
  --m-thead: rgba(19,25,36,0.98);
  --m-disabled-bg: rgba(255,255,255,0.04);
  --m-disabled-fg: rgba(255,255,255,0.34);
  --ring: 0 0 0 3px rgba(44,181,240,0.32);
}
/* Dunkel „HIG“: Stufen bleiben, aber Karten bekommen eine kaum sichtbare Kante,
   damit Flaechen auf #121212 nicht verschwimmen (Kontrast Raised/Base allein ~1.15:1). */
html.dark[data-dark-variant="hig"] {
  --m-edge: 0 0 0 1px rgba(255,255,255,0.055);
  --m-row-hover: var(--hig-row-hover);
  --m-row-sel: var(--hig-row-sel);
  --m-thead: var(--elev-raised-2);
  --m-disabled-bg: rgba(255,255,255,0.04);
  --m-disabled-fg: rgba(255,255,255,0.32);
  --border-strong: rgba(255,255,255,0.11);
  --pop-shadow: 0 24px 56px rgba(0,0,0,0.55);
  --shadow-lg: var(--pop-shadow);
  --ring: 0 0 0 3px rgba(79,176,220,0.30);
}

/* ── 2 · Layout & Arbeitsflaeche ────────────────────────────────────────────── */
.main-content {
  padding: var(--m-gutter);
  padding-bottom: calc(var(--m-gutter) + 40px + env(safe-area-inset-bottom));
  scroll-padding-top: var(--m-4);
}
/* width:100% noetig: Vorgaenge/Rechnungseingang machen .main-content zur Flex-Spalte,
   dort hebt margin-inline:auto das Strecken auf und die Seite fiel auf Breite 0 (01.10.2026). */
.main-content > .page.active {
  width: 100%;
  max-width: var(--m-content-max);
  margin-inline: auto;
  min-width: 0;
}
.page img, .page video, .page canvas { max-width: 100%; }
/* Kuenstlich schmale Seitencontainer auf Desktop breiter ziehen (Lesbarkeit bleibt ueber Grids) */
.beg-page, .pro-page, .qm, html .srvm, .bpc-panel-inner {
  max-width: min(100%, 1680px);
}
.beg-page, .pro-page { padding: var(--m-6) 0 var(--m-10); }
html .srvm { padding: 0; }
html .srvm-kopf { margin-bottom: var(--m-2); }
html .srvm-kopf h2 { font-size: var(--m-fs-xl); font-weight: 700; letter-spacing: -0.02em; }
html .srvm-kacheln { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--m-4); margin: var(--m-4) 0 var(--m-section-gap); }
html .srvm-kachel {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--m-4) var(--m-5);
  background: var(--bg-card); box-shadow: var(--card-shadow);
  border-left-width: 1px; position: relative; overflow: hidden;
}
html .srvm-kachel::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #8e8e93; }
html .srvm-kachel.ok { border-left-color: var(--border); } html .srvm-kachel.ok::before { background: var(--green-dot, #30d158); }
html .srvm-kachel.warn { border-left-color: var(--border); } html .srvm-kachel.warn::before { background: #ff9f0a; }
html .srvm-kachel.krit { border-left-color: var(--border); } html .srvm-kachel.krit::before { background: #ff453a; }
html .srvm-kachel h4 { font-size: var(--m-fs-sm); font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
html .srvm-gross { font-size: 26px; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
html .srvm-klein { margin-top: 4px; line-height: 1.45; color: var(--text-3); }
html .srvm-diagramme { gap: var(--m-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
html .srvm-zwei { gap: var(--m-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
html .srvm-diagramm { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--m-4); background: var(--bg-card); box-shadow: var(--card-shadow); }
html .srvm-diagramm h4 { font-size: var(--m-fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--m-2); }
html .srvm td, html .srvm th { padding: 8px 10px; }
html .srvm-warn { border-radius: var(--m-r-ctl); padding: 10px 14px; font-weight: 500; }

/* Seitentitel innerhalb von Seiten */
.page h2:not(.modal h2) { letter-spacing: -0.02em; }
.dash-greeting { margin-bottom: var(--m-section-gap); }
.dash-greeting-text { font-size: var(--m-fs-2xl); letter-spacing: -0.025em; }
.dash-section-title { font-size: var(--m-fs); color: var(--text-2); margin: var(--m-8) 0 var(--m-3) 0; }

/* Grids: fluide statt feste Spaltenzahl, damit breite Monitore genutzt werden */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--m-4); margin-bottom: var(--m-section-gap); }
.dash-row-1, .dash-row-2, .dash-row-3, .dash-grid { gap: var(--m-4); }
html .ma-kpis, .weg-kpis { gap: var(--m-3); }

/* ── 3 · Kopfzeile & Navigation ─────────────────────────────────────────────── */
.main-header {
  padding-inline: var(--m-gutter);
  border-bottom-color: var(--border-light);
  gap: var(--m-3);
}
.main-header h2 { font-size: var(--m-fs-lg); font-weight: 650; letter-spacing: -0.018em; }
.page-area { font-size: var(--m-fs-xs); font-weight: 500; letter-spacing: 0.01em; }
.hdr-btn { border-radius: var(--m-r-ctl); transition: background var(--transition), color var(--transition); }
.hdr-btn:active { background: var(--press); transform: scale(0.96); }
.hdr-search { border-radius: var(--m-r-ctl); height: 36px; }
.hdr-profile { transition: border-color var(--transition), background var(--transition); }
.main-header .status-dots { background: var(--surface-2); }

.nav-rail { border-right-color: var(--border-light); }
.rail-btn { border-radius: var(--m-r-ctl); }
.rail-btn:active .rail-ico { background: var(--press); }
.rail-ico { border-radius: 10px; }
.nav-panel { border-right-color: var(--border-light); }
.nav-item { border-radius: var(--m-r-item); letter-spacing: -0.005em; }
.nav-item:active { background: var(--press); }
.nav-section-title { font-size: var(--m-fs-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
#navSearchInput { border-radius: var(--m-r-ctl); }
.sidebar-footer { border-top-color: var(--border-light); }

/* ── 4 · Karten & Panels ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.card + .card { margin-top: var(--m-section-gap); }
.card-header { padding: var(--m-4) var(--m-6); min-height: 56px; gap: var(--m-3); flex-wrap: wrap; border-bottom-color: var(--border-light); }
.card-header h3 { font-size: var(--m-fs-md); font-weight: 650; letter-spacing: -0.012em; }
.card-body { padding: var(--m-5) var(--m-6); }

/* Stat-/Dashboard-Karten: Glanzkanten, Farbwolken und Schwebe-Effekt entfernt – ruhige Flaeche */
.stat-card, .dash-card, html .ma-stat {
  background: var(--bg-card);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  outline: none; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
html.dark .stat-card, html.dark .dash-card, html.dark body .ma-stat { background: var(--bg-card); outline: none; box-shadow: var(--card-shadow); }
.stat-card::before, .stat-card::after, .dash-card::before, html .ma-stat::before, html .ma-stat::after { display: none; }
.stat-card:hover, .dash-card:hover, html .ma-stat:hover,
html.dark .stat-card:hover, html.dark .dash-card:hover, html.dark body .ma-stat:hover {
  transform: none; background: var(--bg-card-hover); border-color: var(--border-strong); box-shadow: var(--shadow-md); outline: none;
}
.stat-card { padding: var(--m-5) var(--m-6); }
.stat-card .stat-icon, html .ma-stat-icon { box-shadow: none; width: 36px; height: 36px; border-radius: 10px; margin-bottom: var(--m-3); }
.stat-card:hover .stat-icon { transform: none; box-shadow: none; }
.stat-card .stat-icon svg { width: 18px; height: 18px; }
.stat-card .label, html .ma-stat-label { font-size: var(--m-fs-xs); letter-spacing: 0.04em; color: var(--text-3); }
.stat-card .value, html .ma-stat-value { font-size: clamp(26px, 1.2vw + 14px, 34px); font-weight: 700; letter-spacing: -0.03em; }
.dash-card { padding: var(--m-5) var(--m-6); }
.dash-card-title { font-size: var(--m-fs-sm); color: var(--text-2); margin-bottom: var(--m-4); }
.dash-progress-track { height: 8px; box-shadow: none; }
.dash-progress-fill::after { display: none; }
html .ma-kpi, html .ma-ocard { border-color: var(--border); box-shadow: var(--card-shadow); }
html .ma-ocard-exp { box-shadow: 0 0 0 3px var(--brand-ring), var(--card-shadow); }
/* HIG-Dunkel: Flaechen nur ueber Helligkeit, plus Haarkante */
html.dark[data-dark-variant="hig"] .card,
html.dark[data-dark-variant="hig"] .dash-card,
html.dark[data-dark-variant="hig"] .stat-card,
html.dark[data-dark-variant="hig"] .ma-stat,
html.dark[data-dark-variant="hig"] .srvm-kachel,
html.dark[data-dark-variant="hig"] .srvm-diagramm {
  background: var(--elev-raised); border-color: transparent; box-shadow: var(--m-edge);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.dark[data-dark-variant="hig"] .dash-card:hover,
html.dark[data-dark-variant="hig"] .stat-card:hover,
html.dark[data-dark-variant="hig"] .ma-stat:hover { background: var(--elev-raised-2); box-shadow: var(--m-edge); border-color: transparent; }

/* ── 5 · Controls ───────────────────────────────────────────────────────────── */
/* Buttons: Primaer = gefuellt, Sekundaer = Flaeche mit Haarlinie, Ghost = nur Text */
.btn {
  min-height: var(--m-ctl-h); padding: 0 var(--m-4); gap: 7px;
  border-radius: var(--m-r-ctl); border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text);
  font-size: var(--m-fs); font-weight: 550; letter-spacing: -0.005em;
  box-shadow: 0 1px 1px rgba(15,23,42,0.03);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform 0.1s;
}
html.dark .btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); box-shadow: none; }
html.dark[data-dark-variant="hig"] .btn { background: var(--elev-overlay); border-color: transparent; }
.btn:hover { background: var(--surface-solid); border-color: var(--border-strong); filter: brightness(0.985); }
html.dark .btn:hover { background: rgba(255,255,255,0.10); filter: none; }
html.dark[data-dark-variant="hig"] .btn:hover { background: var(--elev-overlay-2); }
.btn:active { transform: scale(0.98); filter: brightness(0.96); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary, html.dark .btn-primary, html.dark[data-dark-variant="hig"] .btn-primary {
  background: var(--primary); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(10,124,189,0.22);
}
.btn-primary:hover, html.dark .btn-primary:hover, html.dark[data-dark-variant="hig"] .btn-primary:hover { background: var(--primary-hover); border-color: transparent; color: #fff; filter: none; }
.btn-primary:active { filter: brightness(0.94); }
.btn-danger { color: var(--red-text); }
.btn-danger:hover, html.dark .btn-danger:hover { background: var(--red-tint); border-color: color-mix(in srgb, var(--red-text) 40%, transparent); color: var(--red-text); }
.btn-ghost, html.dark .btn-ghost, html.dark[data-dark-variant="hig"] .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover, html.dark .btn-ghost:hover, html.dark[data-dark-variant="hig"] .btn-ghost:hover { background: var(--press); color: var(--text); }
.btn-sm { min-height: var(--m-ctl-h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--m-r-item); }
.btn-icon { width: var(--m-ctl-h); height: var(--m-ctl-h); min-height: var(--m-ctl-h); padding: 0; }
.btn-sm.btn-icon { width: var(--m-ctl-h-sm); height: var(--m-ctl-h-sm); min-height: var(--m-ctl-h-sm); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"],
html.dark .btn:disabled, html.dark .btn[disabled] {
  opacity: 1; background: var(--m-disabled-bg); border-color: transparent; color: var(--m-disabled-fg);
  box-shadow: none; cursor: not-allowed; transform: none; filter: none;
}
.btn-primary:disabled, .btn-primary[disabled] { background: color-mix(in srgb, var(--primary) 38%, transparent); color: rgba(255,255,255,0.8); }
.btn.is-loading { color: transparent !important; position: relative; }
.btn.is-loading::before { position: absolute; inset: 0; margin: auto; color: var(--text-2); }
.btn-primary.is-loading::before { color: #fff; }

/* Eingaben, Selects, Textareas */
.form-group { margin-bottom: var(--m-4); }
.form-label { font-size: 13px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; letter-spacing: -0.003em; }
.form-hint { font-size: var(--m-fs-sm); color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.form-input, .form-select {
  min-height: var(--m-ctl-h); padding: 8px 12px; border-radius: var(--m-r-ctl);
  border: 1px solid var(--border-strong); background-color: var(--surface-solid); color: var(--text);
  font-size: var(--m-fs); line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
html.dark .form-input, html.dark .form-select { background-color: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.11); }
html.dark[data-dark-variant="hig"] .form-input, html.dark[data-dark-variant="hig"] .form-select { background-color: var(--elev-raised-2); border-color: var(--hig-ctl); }
textarea.form-input { min-height: 88px; line-height: 1.5; resize: vertical; }
.form-input:hover, .form-select:hover { border-color: color-mix(in srgb, var(--text) 26%, transparent); }
.form-input:focus, .form-select:focus,
html.dark .form-input:focus, html.dark .form-select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.form-input:disabled, .form-select:disabled, .form-input[readonly] {
  background-color: var(--m-disabled-bg); color: var(--text-3); border-color: var(--border); cursor: not-allowed;
}
.form-input[readonly] { cursor: default; }
.form-input:user-invalid, .form-input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.form-row { gap: var(--m-3); flex-wrap: wrap; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* Autocomplete / Dropdowns */
.ac-dropdown {
  background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--pop-shadow); padding: 4px; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ac-item { border-radius: var(--m-r-item); border-bottom: none; padding: 9px 12px; }
.ac-item:hover, .ac-item.active { background: var(--brand-tint); }

/* Reiter (Segmented Control) – bestehende Familien vereinheitlicht */
html .beg-tabs, html .pro-tabs, html .etvpb-tabs, html .ma-tab-bar, html .vd-tabs, html .sett-sub-nav { border-radius: 11px; padding: 3px; }
html .beg-tab, html .pro-tab, html .etvpb-tab, html .ma-tab, html .vd-tab, html .sett-sub-tab,
html .bpc-tab, html .clr-tab, html .vz-tabs button { border-radius: 8px; font-weight: 550; }
html .beg-tab:focus-visible, html .pro-tab:focus-visible, html .etvpb-tab:focus-visible, html .ma-tab:focus-visible,
html .vd-tab:focus-visible, html .sett-sub-tab:focus-visible, html .bpc-tab:focus-visible, html .clr-tab:focus-visible { outline: none; box-shadow: var(--ring); }
html .ma-pill { border-radius: 999px; min-height: 30px; transition: background var(--transition), color var(--transition), border-color var(--transition); }

/* Badges & Pill */
.badge { font-variant-numeric: tabular-nums; }
.selected-pill { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 22%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pstat { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── 6 · Tabellen ───────────────────────────────────────────────────────────── */
.data-table { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--m-thead);
  font-size: var(--m-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--text-3);
  text-transform: none; padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: left;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--m-row-hover); }
.data-table tr.selected td, .data-table tr.active td, .data-table tr[aria-selected="true"] td { background: var(--m-row-sel); }
.data-table .cell-nr { color: var(--brand-text); }
/* Breite Datentabellen: horizontal scrollen nur innerhalb ihrer Karte */
.card-body:has(> .data-table), .card-body:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 7 · Dialoge, Menues, Toasts ────────────────────────────────────────────── */
.overlay, .app-dlg-overlay { background: var(--scrim); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); padding: var(--m-6); }
.modal {
  max-width: calc(100vw - 48px); max-height: min(88vh, 960px);
  border-radius: 18px; border: 1px solid var(--border);
  box-shadow: var(--pop-shadow); overscroll-behavior: contain;
}
html.dark[data-dark-variant="hig"] .modal { border-color: transparent; background: var(--elev-overlay); }
.modal-header { padding: var(--m-5) var(--m-6); border-bottom-color: var(--border-light); gap: var(--m-3); position: sticky; top: 0; z-index: 3; background: inherit; }
.modal-header h3 { font-size: var(--m-fs-lg); font-weight: 650; }
.modal-body { padding: var(--m-5) var(--m-6) var(--m-6); }
.modal-footer { padding: var(--m-4) var(--m-6); border-top-color: var(--border-light); gap: var(--m-2); flex-wrap: wrap; position: sticky; bottom: 0; background: inherit; }
.modal-close { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-2); font-size: 16px; }
.modal-close:hover { background: var(--press); color: var(--text); }
.modal-close:focus-visible { outline: none; box-shadow: var(--ring); }
.app-dlg { border-radius: 18px; border-color: var(--border); padding: var(--m-6); gap: var(--m-4); }
html.dark[data-dark-variant="hig"] .app-dlg { border-color: transparent; }
.app-dlg-titel { font-size: var(--m-fs-lg); font-weight: 650; }

.profile-menu, #navSearchResults { border-color: var(--border); border-radius: 14px; }
.profile-menu-item { border-radius: var(--m-r-item); }
.toast { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--pop-shadow); font-size: var(--m-fs); font-weight: 500; }

/* ── 8 · Zustaende ──────────────────────────────────────────────────────────── */
.empty-state { padding: clamp(40px, 6vw, 72px) var(--m-6); max-width: 560px; margin-inline: auto; }
.empty-state svg { width: 40px; height: 40px; opacity: 0.35; margin-bottom: var(--m-4); }
.empty-state h4 { font-size: var(--m-fs-md); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: var(--m-fs); color: var(--text-3); line-height: 1.5; text-wrap: pretty; }
.empty-state .btn { margin-top: var(--m-4); }
.dash-loader-bar { height: 3px; }
a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible:not(input):not(textarea) { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.main-content { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; }

/* ── 9 · Responsive ─────────────────────────────────────────────────────────── */
/* Grosse Monitore: mehr Luft zwischen den Spalten, keine gestreckten Zahlen */
@media (min-width: 1800px) {
  :root { --m-section-gap: 28px; }
  .stats-grid, .dash-row-1, .dash-row-2, .dash-row-3, .dash-grid { gap: var(--m-5); }
  .stat-card { padding: var(--m-6); }
  .stat-card .value { font-size: 34px; }
}
/* Laptop / kleines Desktop-Fenster */
@media (max-width: 1280px) {
  .dash-row-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
/* iPad hoch + quer, schmale Desktop-Fenster */
@media (max-width: 1024px) {
  .main-content { padding: var(--m-5); padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--m-3); }
  .dash-row-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .dash-card { padding: var(--m-4) var(--m-5); border-radius: var(--radius-lg); }
  .stat-card .value { font-size: 28px; }
  .modal { width: min(560px, calc(100vw - 48px)); max-width: calc(100vw - 48px); }
  .card-header { padding: var(--m-4) var(--m-5); }
  .card-body { padding: var(--m-4) var(--m-5); }
}
/* Touch (iPad / iPhone): 44-pt-Ziele, 16 px in Feldern gegen iOS-Zoom, kein Hover-Kleben */
@media (pointer: coarse) {
  :root { --m-ctl-h: 44px; --m-ctl-h-sm: 36px; }
  .btn { min-height: var(--m-ctl-h); }
  .btn-sm { min-height: var(--m-ctl-h-sm); }
  .form-input, .form-select { min-height: var(--m-touch); font-size: 16px; }
  .hdr-btn { width: 42px; height: 42px; }
  /* Suchfeld im Kopf ist auch ein .hdr-btn: auf Touch (iPad quer ab 1184 px) nur die Lupe, sonst quetschte
     die 42-px-Breite „Alles durchsuchen Strg K" auf zwei Zeilen über die Nachbarknöpfe (04.10.2026) */
  .hdr-search { width: 42px; padding: 0; justify-content: center; border: 0; background: transparent; margin-right: 0; }
  .hdr-search .hdr-search-text, .hdr-search .hdr-kbd { display: none; }
  .modal-close { width: 40px; height: 40px; }
  .data-table td { height: 48px; }
  .ac-item, .profile-menu-item, .nav-sr-item { min-height: 44px; }
}
@media (hover: none) {
  .btn:hover, .card:hover, .stat-card:hover, .dash-card:hover { filter: none; box-shadow: var(--card-shadow); }
  .data-table tr:hover td { background: transparent; }
}
/* iPhone und kleine Displays */
@media (max-width: 767px) {
  :root { --m-gutter: 16px; --m-section-gap: 16px; }
  html, body { overflow-x: hidden; }
  .main-content { padding: var(--m-4); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .main-content > .page.active > * { max-width: 100%; }
  .main-header { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: var(--m-4); border-radius: 14px; }
  .stat-card .value { font-size: 24px; }
  .dash-row-2, .dash-row-3, .dash-grid-2, .dash-grid-3, .dash-grid-4 { grid-template-columns: 1fr; }
  .card { border-radius: 14px; }
  .card + .card { margin-top: var(--m-4); }
  .card-header { padding: 14px var(--m-4); min-height: 0; }
  .card-body { padding: 14px var(--m-4); }
  .form-row { flex-direction: column; align-items: stretch; }
  html .srvm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html .srvm-kachel { padding: var(--m-3) var(--m-4); }
  html .srvm-gross { font-size: 21px; }
  /* Dialoge als Bottom-Sheet mit Griff-Abstand und Safe-Area */
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    width: 100% !important; max-width: 100% !important; margin: 0;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)));
    border-radius: 20px 20px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheetIn 0.24s cubic-bezier(0.2, 0, 0, 1);
  }
  .modal-header { padding: 18px var(--m-4) 14px; }
  .modal-body { padding: var(--m-4); }
  .modal-footer { padding: 12px var(--m-4) max(12px, env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex: 1 1 0; }
  .app-dlg { padding: 20px var(--m-4) max(var(--m-4), env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  /* Aktionsleisten in Dialogen: volle Breite, Primaer rechts/unten */
  .modal .btn, .app-dlg-btns .btn { min-height: 46px; }
  .toast { left: 16px; right: 16px; transform: translateY(120px); bottom: max(16px, env(safe-area-inset-bottom)); text-align: center; }
  .toast.show { transform: translateY(0); }
}
@media (max-width: 399px) {
  .stats-grid, html .srvm-kacheln { gap: 8px; }
  .stat-card .value, html .srvm-gross { font-size: 20px; }
}

/* ── 9b · Server-Monitor: Diagramme (js/srvm-diagramme.js) ─────────────────── */
:root {
  --srvd-c1: #0a7cbd; --srvd-c2: #d97706; --srvd-c3: #16a34a; --srvd-c4: #7c3aed; --srvd-c5: #dc2626; --srvd-c6: #0891b2;
  --srvd-warn: #d97706; --srvd-krit: #dc2626;
  --srvd-gitter: rgba(15,23,42,0.07); --srvd-flaeche: 0.10;
  --srvd-tip: #ffffff; --srvd-tip-schatten: 0 12px 32px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.06);
  --srvd-h: 200px;
}
html.dark {
  --srvd-c1: #2cb5f0; --srvd-c2: #fbbf24; --srvd-c3: #4ade80; --srvd-c4: #a78bfa; --srvd-c5: #f87171; --srvd-c6: #22d3ee;
  --srvd-warn: #fbbf24; --srvd-krit: #f87171;
  --srvd-gitter: rgba(255,255,255,0.07); --srvd-flaeche: 0.14;
  --srvd-tip: #1e2636; --srvd-tip-schatten: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
html.dark[data-dark-variant="hig"] {
  --srvd-c1: #4fb0dc; --srvd-c2: #d4a23f; --srvd-c3: #4c9e70; --srvd-c4: #7d72c4; --srvd-c5: #cf6070; --srvd-c6: #5bb8c4;
  --srvd-warn: #d4a23f; --srvd-krit: #cf6070;
  --srvd-tip: var(--elev-overlay-2);
}
html .srvm-diagramm.srvd-karte { padding: var(--m-4) var(--m-5) var(--m-3); display: flex; flex-direction: column; gap: var(--m-3); min-width: 0; }
html .srvm-diagramm.srvd-karte > h4 { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: var(--m-fs-md); font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
html .srvm-diagramm.srvd-karte > h4 .srvm-klein { font-size: var(--m-fs-sm); font-weight: 500; color: var(--text-3); }
.srvd { display: flex; flex-direction: column; gap: var(--m-3); min-width: 0; }
.srvd-legende { display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-5); min-height: 44px; }
.srvd-leg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srvd-leg-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.srvd-leg-name i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.srvd-leg-wert { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.2; }
.srvd-leg-wert small { font-size: 12.5px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.srvd.srvd-viele .srvd-leg-wert { font-size: 16px; }   /* ab 4 Reihen, Klasse aus srvm-diagramme.js (vorher :has, SDLC #S3-1) */
/* Legende als Filter (mehrere Reihen) */
.srvd-waehlbar .srvd-legende { gap: 4px; margin: 0 -8px; }
button.srvd-leg {
  appearance: none; border: none; background: transparent; font: inherit; color: inherit; text-align: left;
  padding: 6px 8px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), opacity var(--transition);
}
button.srvd-leg:hover { background: var(--hover); }
button.srvd-leg:active { background: var(--press); }
button.srvd-leg:focus-visible { outline: none; box-shadow: var(--ring); }
button.srvd-leg.aus { opacity: 0.45; }
button.srvd-leg.aus .srvd-leg-name i { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--text-3); }
button.srvd-leg.aus .srvd-leg-wert { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--text-3); }
.srvd-alle {
  align-self: center; margin-left: auto; height: 28px; padding: 0 10px; border: none; border-radius: 8px;
  background: var(--surface-2); color: var(--brand-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.srvd-alle:hover { background: var(--press); }
.srvd-alle[hidden] { display: none; }
.srvd-linie, .srvd-kreuz-punkt { transition: opacity 0.25s; }
.srvd-weg { opacity: 0 !important; }
.srvd-tip-zeile[hidden] { display: none; }
@media (pointer: coarse) { button.srvd-leg { min-height: 44px; } .srvd-alle { height: 36px; } }
.srvd-feld { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--m-2); }
.srvd-plot { position: relative; height: var(--srvd-h); touch-action: pan-y; cursor: crosshair; }
.srvd-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.srvd-gitter line { stroke: var(--srvd-gitter); stroke-width: 1; vector-effect: non-scaling-stroke; }
.srvd-flaeche { opacity: 1; fill-opacity: var(--srvd-flaeche); stroke: none; }
.srvd-linie { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.srvd-y { position: relative; height: var(--srvd-h); }
.srvd-y span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srvd-x { display: flex; justify-content: space-between; padding-right: 48px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srvd-leer .srvd-feld, .srvd-leer .srvd-x { opacity: 0.35; }
/* Live: jüngster Messpunkt pulsiert */
.srvd-puls { display: none; position: absolute; right: 0; width: 0; height: 0; }
.srvd-puls::before, .srvd-puls::after { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.srvd-puls::after { box-shadow: 0 0 0 2px var(--bg-card); }
.srvd-puls::before { animation: srvdPuls 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
@keyframes srvdPuls { from { transform: scale(1); opacity: 0.45; } to { transform: scale(3.6); opacity: 0; } }
/* Fadenkreuz + Tooltip */
.srvd-kreuz { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.srvd-zeigt .srvd-kreuz { opacity: 1; }
.srvd-kreuz-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--text) 35%, transparent); }
.srvd-kreuz-punkt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-card); }
.srvd-tip { position: absolute; top: 4px; min-width: 148px; padding: 8px 10px; border-radius: 10px; background: var(--srvd-tip); box-shadow: var(--srvd-tip-schatten); display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.srvd-tip-zeit { font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srvd-tip-zeile { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.srvd-tip-zeile i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.srvd-tip-name { flex: 1; color: var(--text-2); white-space: nowrap; }
.srvd-tip-zeile b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srvd-live .srvd-leg-wert { transition: color 0.3s; }
/* Balken (Anteil der Zeit) */
.srvd-balken { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 3px; }
.srvd-balken.srvd-balken-fest { display: block; overflow: hidden; }   /* Live-Balken an festen Zeitplaetzen (srvm-diagramme.js _balkenFest) */
.srvd-balken-fest .srvd-bgruppe { position: absolute; top: 0; bottom: 0; }
.srvd-bgruppe { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 1px; transition: opacity 0.15s; }
.srvd-bgruppe i { flex: 1; min-width: 0; border-radius: 2px 2px 1px 1px; opacity: 0.8; transition: height 0.5s cubic-bezier(0.2, 0, 0, 1); }
.srvd-bgruppe.an i { opacity: 1; }
.srvd-bgruppe.aus { opacity: 0.4; }
.srvd-balken .srvd-bgruppe:last-child i { opacity: 1; }
/* Kacheln als Kompakt-Liste (3d): eine Karte, zwei Spalten, Zeilen mit Haarlinie */
html .srvm-kacheln.srvd-liste {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--srvd-zeilen, 5), auto);
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--m-8); row-gap: 0;
  padding: var(--m-1) var(--m-5); margin: var(--m-4) 0 var(--m-section-gap);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
}
html.dark[data-dark-variant="hig"] .srvm-kacheln.srvd-liste { background: var(--elev-raised); border-color: transparent; box-shadow: var(--m-edge); }
html .srvd-liste .srvm-kachel, html.dark[data-dark-variant="hig"] .srvd-liste .srvm-kachel {
  display: grid; grid-template-columns: 14px minmax(0, 1.4fr) minmax(56px, 1fr) minmax(92px, auto);
  grid-template-areas: "punkt name balken wert" "punkt info balken wert";
  align-items: center; column-gap: var(--m-3); row-gap: 1px;
  padding: 12px 0; margin: 0; min-height: 60px;
  background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; opacity: 1;
  border-top: 1px solid var(--border-light);
}
html .srvd-liste .srvm-kachel:first-child,
html .srvd-liste .srvm-kachel.srvd-spaltenkopf { border-top: none; }
html .srvd-liste .srvm-kachel::before {
  grid-area: punkt; position: static; width: 7px; height: 7px; border-radius: 50%; align-self: center; background: var(--green-dot, #30d158);
}
html .srvd-liste .srvm-kachel.warn::before { background: var(--srvd-warn); }
html .srvd-liste .srvm-kachel.krit::before { background: var(--srvd-krit); }
html .srvd-liste .srvm-kachel.grau::before { background: var(--text-3); }
html .srvd-liste .srvm-kachel h4 { grid-area: name; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .srvd-liste .srvm-klein { grid-area: info; margin: 0; font-size: 12px; line-height: 1.35; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .srvd-liste .srvm-gross { grid-area: wert; text-align: right; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
html .srvd-liste .srvm-gross small { font-size: 12.5px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.srvd-kbalken { grid-area: balken; height: 6px; border-radius: 3px; background: var(--srvd-gitter); overflow: hidden; }
.srvd-kbalken i { display: block; height: 100%; width: 100%; clip-path: inset(0 100% 0 0 round 3px); border-radius: 3px; background: var(--srvd-c1); }   /* Fuellstand per clip-path aus srvm-diagramme.js (kein Layout je Bild) */
.srvd-kbalken.srvd-ohne { visibility: hidden; }
.srvm-kachel.warn .srvd-kbalken i { background: var(--srvd-warn); }
.srvm-kachel.krit .srvd-kbalken i { background: var(--srvd-krit); }
.srvm-kachel.grau .srvd-kbalken i { background: var(--text-3); }
html .srvd-liste .srvm-kachel:last-child .srvd-kbalken:not(.srvd-ohne) i { background: var(--green-dot, #30d158); }
@media (max-width: 900px) {
  html .srvm-kacheln.srvd-liste { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); padding: var(--m-1) var(--m-4); }
  html .srvd-liste .srvm-kachel.srvd-spaltenkopf { border-top: 1px solid var(--border-light); }
}
@media (max-width: 480px) {
  html .srvd-liste .srvm-kachel { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "punkt name wert" "punkt info wert" "punkt balken balken"; row-gap: 4px; }
  .srvd-kbalken { margin-top: 4px; }
}
/* Zeitraum als Segmented Control mit gleitender Markierung */
html .srvm-spannen.srvd-seg { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; margin: 0 0 var(--m-4); border-radius: 11px; background: var(--surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.srvd-seg-marke { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 8px; background: var(--surface-solid); box-shadow: 0 1px 2px rgba(15,23,42,0.1), 0 0 0 1px var(--border); transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), width 0.35s cubic-bezier(0.2, 0, 0, 1); pointer-events: none; }
html.dark .srvd-seg-marke { background: rgba(255,255,255,0.12); box-shadow: none; }
html .srvd-seg .btn, html.dark .srvd-seg .btn, html.dark[data-dark-variant="hig"] .srvd-seg .btn {
  position: relative; background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); font-weight: 500; min-width: 64px; filter: none;
}
html .srvd-seg .btn:hover { color: var(--text); background: transparent; }
html .srvd-seg .btn-primary, html.dark .srvd-seg .btn-primary, html.dark[data-dark-variant="hig"] .srvd-seg .btn-primary { background: transparent; color: var(--text); font-weight: 600; }
/* Laufwerksbalken */
html .srvm-balken { height: 6px; border-radius: 3px; background: var(--srvd-gitter); min-width: 80px; }
html .srvm-balken > div { border-radius: 3px; transition: width 0.8s cubic-bezier(0.2, 0, 0, 1); }
@media (max-width: 767px) {
  :root { --srvd-h: 170px; }
  .srvd-feld { grid-template-columns: minmax(0, 1fr) 32px; }
  .srvd-x { padding-right: 40px; }
  .srvd-leg-wert { font-size: 16px; }
  html .srvm-spannen.srvd-seg { display: flex; width: 100%; }
  html .srvd-seg .btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .srvd-balken { gap: 2px; }
}

/* ── 10 · Bewegung ──────────────────────────────────────────────────────────── */
.dash-animate { animation-duration: 0.32s; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.985) translateY(4px); } }