/* ==========================================================================
   Projecta Pro – Cloud-Schicht 2026-10 (nur Darstellung)
   Einbinden als LETZTES Stylesheet, nach /css/modern-2026.css:
     <link rel="stylesheet" href="/css/projecta-cloud.css">
   - Kein Markup, keine Logik, keine neuen Klassen. Nur vorhandene Selektoren.
   - Hintergrund (--bg-body + html::before-Mesh) bleibt unveraendert.
   - Hell und Dunkel (HIG) mit eigenen Werten, keine Invertierung.
   Referenz-Entwurf: "Projecta Pro Cloud.dc.html", Abschnitt 6 (alte Zaehler-Startseite) entfernt:
   die Startseite baut zaehler.js seit 09.10.2026 neu (zaehler/docs/design_handoff_zaehlermodul).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --pc-gutter: clamp(16px, 2.4vw, 40px);
  --pc-max: 1760px;                 /* greift erst ab ca. 27" */
  --pc-r-card: 16px; --pc-r-ctl: 10px; --pc-r-item: 8px;
  --pc-ctl: 36px; --pc-seg: 30px; --pc-item: 34px; --pc-row: 52px;
  --pc-surface: #ffffff;
  --pc-surface-2: rgba(15,23,42,0.045);
  --pc-overlay: #ffffff;
  --pc-line: rgba(15,23,42,0.08);
  --pc-line-soft: rgba(15,23,42,0.06);
  --pc-line-2: rgba(15,23,42,0.16);
  --pc-sel: rgba(7,161,226,0.11);
  --pc-brand-text: #0a6fa8;
  --pc-primary: #0a7cbd; --pc-primary-hover: #0869a1; --pc-on-primary: #ffffff;
  --pc-hover: rgba(15,23,42,0.04); --pc-press: rgba(15,23,42,0.075);
  --pc-ring: 0 0 0 3px rgba(7,161,226,0.30);
  --pc-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 0 0 1px rgba(15,23,42,0.06);
  --pc-pop: 0 18px 44px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.06);
  --pc-scrim: rgba(15,23,42,0.22);
  --pc-seg-on: #ffffff; --pc-seg-shadow: 0 1px 2px rgba(15,23,42,0.12), 0 0 0 0.5px rgba(15,23,42,0.08);
  --pc-thead: rgba(248,250,252,0.9);
  --pc-disabled-bg: rgba(15,23,42,0.05); --pc-disabled-fg: rgba(15,23,42,0.38);
  --pc-ease: cubic-bezier(0.2, 0, 0, 1);
  --bg-card: var(--pc-surface); --surface: var(--pc-surface);
  --brand-text: var(--pc-brand-text); --ring: var(--pc-ring);
  --primary: var(--pc-primary); --primary-hover: var(--pc-primary-hover);
}
html.dark {
  --pc-surface: #1a1f2a; --pc-surface-2: rgba(255,255,255,0.06); --pc-overlay: #1f2532;
  --pc-line: rgba(255,255,255,0.08); --pc-line-soft: rgba(255,255,255,0.055); --pc-line-2: rgba(255,255,255,0.16);
  --pc-sel: rgba(44,181,240,0.16); --pc-brand-text: #6cc4ee;
  --pc-primary: #2cb5f0; --pc-primary-hover: #4fc2f3; --pc-on-primary: #04131b;
  --pc-hover: rgba(255,255,255,0.05); --pc-press: rgba(255,255,255,0.09);
  --pc-ring: 0 0 0 3px rgba(44,181,240,0.36);
  --pc-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  --pc-pop: 0 24px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  --pc-scrim: rgba(0,0,0,0.52);
  --pc-seg-on: rgba(255,255,255,0.16); --pc-seg-shadow: 0 1px 2px rgba(0,0,0,0.4);
  --pc-thead: #1f2532;
  --pc-disabled-bg: rgba(255,255,255,0.05); --pc-disabled-fg: rgba(255,255,255,0.34);
}
/* HIG (design_handoff_darkmode_hig): neutrales Schwarzgrau, Tiefe NUR ueber Helligkeitsstufen,
   keine Schatten/Kartenrahmen, Text als Weiss mit Deckkraft, entsaettigte Akzente. Kein Mesh (bleibt wie app.css). */
html.dark[data-dark-variant="hig"] {
  --pc-surface: var(--elev-raised); --pc-surface-2: var(--elev-raised-2); --pc-overlay: var(--elev-overlay);
  --pc-line: rgba(255,255,255,0.07); --pc-line-soft: var(--hig-div); --pc-line-2: var(--hig-ctl);
  --pc-sel: rgba(79,176,220,0.14); --pc-brand-text: #7cc2e3;
  --pc-primary: #2f7fae; --pc-primary-hover: #3a8cbc; --pc-on-primary: #ffffff;
  --pc-hover: var(--hig-row-hover); --pc-press: var(--hig-row-sel);
  --pc-ring: 0 0 0 3px rgba(79,176,220,0.30);
  --pc-shadow: none; --pc-pop: none; --pc-scrim: rgba(0,0,0,0.55);
  --pc-seg-on: #3a3a3c; --pc-seg-shadow: none;
  --pc-thead: var(--elev-raised-2);
  --pc-disabled-bg: rgba(255,255,255,0.04); --pc-disabled-fg: rgba(255,255,255,0.32);
}
html.dark[data-dark-variant="hig"] .nav-rail,
html.dark[data-dark-variant="hig"] .nav-panel { border-right: 0; }
html.dark[data-dark-variant="hig"] .main-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.dark[data-dark-variant="hig"] .btn,
html.dark[data-dark-variant="hig"] .zh-btn.ghost,
html.dark[data-dark-variant="hig"] .form-input,
html.dark[data-dark-variant="hig"] .zh-input,
html.dark[data-dark-variant="hig"] .zh-select,
html.dark[data-dark-variant="hig"] .zh-search,
html.dark[data-dark-variant="hig"] .zh-big input { border-color: var(--hig-ctl); }
html.dark[data-dark-variant="hig"] .zh-seg { border-color: transparent; }
@media (pointer: coarse) {
  :root { --pc-ctl: 44px; --pc-seg: 38px; --pc-item: 44px; --pc-row: 56px; }
}

/* ---------- 2. Arbeitsflaeche: Breite nutzen ----------------------------- */
.main-content {
  padding: var(--pc-gutter) var(--pc-gutter) calc(48px + env(safe-area-inset-bottom));
  container-type: inline-size;
}
.main-content > .page.active { max-width: var(--pc-max); margin-inline: auto; }
/* Seitenwurzeln, die sich bisher selbst auf 1200–1520 px begrenzt haben */
.zh-root { max-width: none; }
.stats-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.dash-row-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--pc-gutter); }

/* ---------- 3. Shell: Rail, Seitenliste, Kopfzeile ----------------------- */
.nav-rail { border-right: 1px solid var(--pc-line); }
.rail-brand { border-radius: 11px; }
.rail-btn { border-radius: 12px; transition: color .15s, background .15s; }
.rail-btn .rail-ico { border-radius: 9px; transition: background .15s; }
.rail-btn.active { color: var(--pc-brand-text); }
.rail-btn.active .rail-label { font-weight: 600; }
.rail-indicator { background: var(--pc-sel); border-radius: 9px; }
@media (hover: hover) { .rail-btn:hover { background: var(--pc-hover); color: var(--text); } }
.rail-btn:active { background: var(--pc-press); }

.nav-panel { border-right: 1px solid var(--pc-line); }
.sidebar.panel-open .nav-panel { box-shadow: var(--pc-pop); }
body.nav-pinned .nav-panel { box-shadow: none; }
.nav-panel-head { padding: 18px 16px 14px; border-bottom: 1px solid var(--pc-line); }
#navPanelTitle { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.panel-area-icon { border-radius: 8px; background: var(--pc-sel); color: var(--pc-brand-text); }
.panel-icon-btn { border-radius: 9px; }
.panel-icon-btn[aria-pressed="true"] { background: var(--pc-sel); color: var(--pc-brand-text); }
.nav-search input {
  height: var(--pc-ctl); border-radius: var(--pc-r-ctl); border: 1px solid transparent;
  background: var(--pc-surface-2); font-size: 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.nav-search input:focus { border-color: var(--brand); box-shadow: var(--pc-ring); background: var(--pc-surface); outline: none; }
.sidebar-nav { padding: 10px 10px 24px; }
.nav-section + .nav-section { margin-top: 14px; }
.nav-section-title { padding: 6px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.nav-item {
  min-height: var(--pc-item); border-radius: var(--pc-r-item); font-size: 14px; font-weight: 450;
  transition: background .12s, color .12s;
}
.nav-item svg { opacity: .8; }
@media (hover: hover) { .nav-item:hover { background: var(--pc-hover); } }
.nav-item:active { background: var(--pc-press); }
.nav-item.active, .nav-item.active:hover { background: var(--pc-sel); color: var(--pc-brand-text); font-weight: 600; }
.nav-item.active svg { opacity: 1; }
/* „Für Benutzer ausgeblendet“: ruhiger statt 40 % Deckkraft (Inline-Stil bleibt Quelle) */
.nav-item[title="Für Benutzer ausgeblendet"] { opacity: .6 !important; }

.main-header {
  height: 64px; gap: 10px; padding-inline: clamp(12px, 2.4vw, 36px);
  border-bottom: 1px solid var(--pc-line);
}
.page-area { font-size: 12px; font-weight: 500; color: var(--text-3); }
#pageTitle { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.hdr-btn { width: var(--pc-ctl); height: var(--pc-ctl); border-radius: var(--pc-r-ctl); color: var(--text-2); transition: background .12s, color .12s; }
@media (hover: hover) { .hdr-btn:hover { background: var(--pc-hover); color: var(--text); } }
.hdr-btn:active { background: var(--pc-press); }
@media (pointer: fine) {
  .hdr-search { width: clamp(200px, 24vw, 340px); border: 1px solid var(--pc-line); background: var(--pc-surface); }
}
.hdr-profile .avatar { background: var(--pc-sel); color: var(--pc-brand-text); font-weight: 650; }
.rail-btn:focus-visible, .nav-item:focus-visible, .hdr-btn:focus-visible, .hdr-profile:focus-visible { outline: none; box-shadow: var(--pc-ring); }

/* ---------- 4. Karten & Flaechen ----------------------------------------- */
.card, .dash-card, .stat-card, .zh-card, .zh-tile, .zh-ocard, .zh-olist, .zh-wgrp, .zh-titlecard {
  background: var(--pc-surface); border-radius: var(--pc-r-card); box-shadow: var(--pc-shadow); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (hover: hover) {
  .dash-card:hover, .stat-card:hover, .zh-tile:hover { box-shadow: var(--pc-shadow), 0 0 0 1px var(--pc-line-2); transform: none; }
}

/* ---------- 5. Controls -------------------------------------------------- */
.btn {
  min-height: var(--pc-ctl); border-radius: var(--pc-r-ctl); font-weight: 500;
  border: 1px solid var(--pc-line); background: var(--pc-surface); color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .1s;
}
@media (hover: hover) { .btn:hover { border-color: var(--pc-line-2); background: var(--pc-surface); filter: none; } }
.btn:active { transform: scale(0.98); background: var(--pc-press); }
.btn-primary, .zh-btn:not(.ghost), .login-btn:not(#loginBackBtn) {
  background: var(--pc-primary); color: var(--pc-on-primary); border-color: transparent; font-weight: 600;
}
@media (hover: hover) {
  .btn-primary:hover, .zh-btn:not(.ghost):hover, .login-btn:not(#loginBackBtn):hover { background: var(--pc-primary-hover); }
}
.btn:focus-visible, .zh-btn:focus-visible, .login-btn:focus-visible { outline: none; box-shadow: var(--pc-ring); }
.btn:disabled, .btn[disabled], .zh-btn:disabled, .login-btn:disabled {
  background: var(--pc-disabled-bg); color: var(--pc-disabled-fg); border-color: transparent; cursor: not-allowed; transform: none; opacity: 1;
}
.zh-btn { height: var(--pc-ctl); border-radius: var(--pc-r-ctl); }
.zh-btn.ghost { background: var(--pc-surface); color: var(--text-2); border-color: var(--pc-line); font-weight: 500; }
@media (hover: hover) { .zh-btn.ghost:hover { color: var(--text); border-color: var(--pc-line-2); background: var(--pc-surface); } }

.form-input, .form-select, .zh-input, .zh-select, .zh-search, .login-input, select.form-input, textarea.form-input {
  min-height: var(--pc-ctl); border-radius: var(--pc-r-ctl); border: 1px solid var(--pc-line);
  background-color: var(--pc-surface); color: var(--text); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:hover, .zh-input:hover, .zh-select:hover, .zh-search:hover { border-color: var(--pc-line-2); }
.form-input:focus, .form-select:focus, .zh-input:focus, .zh-select:focus, .zh-search:focus, .login-input:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--pc-ring);
}
.form-input:disabled, .zh-input:disabled, .zh-select:disabled { background-color: var(--pc-disabled-bg); color: var(--pc-disabled-fg); cursor: not-allowed; }
.form-input::placeholder, .zh-input::placeholder, .zh-search::placeholder { color: var(--text-3); }

/* Segmente (Meine/Alle u. a.) */
.zh-seg { padding: 3px; border-radius: 11px; background: var(--pc-surface-2); border: 1px solid var(--pc-line); }
.zh-seg button { height: var(--pc-seg); min-width: 64px; padding: 0 14px; border-radius: 8px; font-weight: 600; color: var(--text-2); }
.zh-seg button.on { background: var(--pc-seg-on); color: var(--text); box-shadow: var(--pc-seg-shadow); }
.zh-seg button:focus-visible { outline: none; box-shadow: var(--pc-ring); }

/* ---------- 7. Tabellen -------------------------------------------------- */
.table-wrap, .table-container { border-radius: var(--pc-r-card); box-shadow: var(--pc-shadow); background: var(--pc-surface); overflow: auto; }
table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--pc-thead);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--pc-line);
}
table tbody td { border-bottom: 1px solid var(--pc-line-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) { table tbody tr:hover td { background: var(--pc-hover); } }
table tbody tr.selected td, table tbody tr[aria-selected="true"] td { background: var(--pc-sel); }

/* ---------- 8. Dialoge, Menues ------------------------------------------- */
.modal-overlay { background: var(--pc-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal { border-radius: 18px; background: var(--pc-overlay); border: 0; box-shadow: var(--pc-pop); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--pc-line); }
.modal-header h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.modal-footer { padding: 16px 24px 20px; gap: 8px; border-top: 0; }
.profile-menu, #navSearchResults, .dropdown-menu {
  background: var(--pc-overlay); border-radius: 14px; border: 0; box-shadow: var(--pc-pop); padding: 4px;
}
.profile-menu-item { min-height: var(--pc-item); border-radius: var(--pc-r-item); }
@media (hover: hover) { .profile-menu-item:hover { background: var(--pc-hover); } }
.profile-menu-logout { color: var(--red-text, #d0302a); }
.profile-menu-divider { background: var(--pc-line); margin: 4px 6px; }

/* ---------- 9. Zustaende ------------------------------------------------- */
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
[aria-busy="true"] { cursor: progress; }
.empty-state, .zh-empty { color: var(--text-3); }

/* ---------- 10. Responsive ---------------------------------------------- */
/* iPad quer / schmale Desktop-Fenster: Seitenliste schwebt ueber dem Inhalt */
@media (max-width: 1279px) {
  .main-header { height: 60px; }
}
/* iPad hoch */
@media (max-width: 1023px) {
  .hdr-search-text, .hdr-kbd { display: none; }
  .hdr-search { width: var(--pc-ctl); padding: 0; justify-content: center; border: 0; background: transparent; }
  #headerUserName { display: none; }
}
/* iPhone */
@media (max-width: 699px) {
  .main-header { height: 56px; padding-inline: max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  #pageTitle { font-size: 17px; }
  .status-dots { display: none; }
  .main-content { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
  /* Dialoge als Bottom-Sheet */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: none; max-height: calc(100dvh - 24px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .profile-menu { border-radius: 20px; }
  .nav-panel { border-radius: 0 20px 20px 0; }
}

/* ---------- 11. Bewegung ------------------------------------------------- */
/* Bewusst KEINE prefers-reduced-motion-Regeln in der ganzen App: jede RDP-Sitzung auf .240 meldet
   „reduce“, dort stand sonst jede Animation still (Mike 13.10.2026, ProjectaPro/CLAUDE.md). */