:root {
    --sidebar-w: 312px;
    --header-h: 64px;
    /* Brand color */
    --brand: #07a1e2;
    --brand-light: #2cb5f0;
    --brand-dark: #0689c2;
    --brand-bg: rgba(7,161,226,0.08);
    --brand-ring: rgba(7,161,226,0.35);
    /* Semantic colors */
    --blue: #07a1e2;
    --blue-light: #2cb5f0;
    --blue-bg: rgba(7,161,226,0.08);
    --green: #22c55e;
    --green-bg: #f0fdf4;
    --red: #ef4444;
    --red-bg: #fef2f2;
    --orange: #f97316;
    --orange-bg: #fff7ed;
    --violet: #7c3aed;
    --violet-bg: #f5f3ff;
    --accent: #007aff;
    /* Gray scale — Light Mode */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --bg-main: #f1f5f9;
    /* Surfaces — Light (soft frosted) */
    --bg-body: #f1f5f9;
    --bg-card: rgba(255,255,255,0.82);
    --bg-card-hover: rgba(255,255,255,0.94);
    --bg-input: rgba(255,255,255,0.9);
    --bg-sidebar: #ffffff;
    --bg-header: rgba(241,245,249,0.78);
    --bg-modal: #ffffff;
    --bg-modal-solid: #ffffff;
    /* Borders — Light */
    --border: rgba(15,23,42,0.08);
    --border-light: rgba(15,23,42,0.06);
    --border-glass: rgba(15,23,42,0.08);
    --border-strong: rgba(15,23,42,0.15);
    /* Text — Light (Kontrast >= 4.5:1, Redesign "Mein Tag" 24.09.2026) */
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    /* Redesign-Tokens (Handoff "Modernisierte Mein Tag Ansicht", 24.09.2026).
       Light und Dark haben je eigene Werte, keine Invertierung. */
    --surface: rgba(255,255,255,0.82);
    --surface-solid: #ffffff;
    --surface-2: rgba(15,23,42,0.045);
    --hover: rgba(15,23,42,0.035);
    --press: rgba(15,23,42,0.07);
    --text-2: #475569;
    --text-3: #64748b;
    --brand-text: #0a74b0;
    --brand-tint: rgba(7,161,226,0.10);
    --primary: #0a7cbd;
    --primary-hover: #0869a1;
    --ring: 0 0 0 3px rgba(7,161,226,0.35);
    --red-text: #d0302a;    --red-tint: rgba(239,68,68,0.09);   --red-dot: #ef4444;
    --orange-text: #b45309; --orange-tint: rgba(245,158,11,0.13);
    --green-text: #15803d;  --green-tint: rgba(34,197,94,0.12); --green-dot: #22c55e;
    --teal-text: #0f766e;   --teal-tint: rgba(20,184,166,0.12);
    --card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.02);
    --pop-shadow: 0 18px 40px rgba(15,23,42,0.14), 0 2px 8px rgba(15,23,42,0.06);
    --scrim: rgba(15,23,42,0.18);
    /* Radii: Karten 16, Controls 10, Menueeintraege 8, Chips 7 */
    --radius: 14px;
    --radius-lg: 16px;
    --radius-sm: 10px;
    /* Shadows — Light (ruhig, Redesign 24.09.2026) */
    --shadow-sm: var(--card-shadow);
    --shadow: var(--card-shadow);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
    --shadow-lg: var(--pop-shadow);
    /* Glass */
    --glass-blur: blur(24px);
    --glass-blur-heavy: blur(40px);
    /* Font */
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', 'Cascadia Mono',
                 Menlo, Consolas, 'Liberation Mono', monospace;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
    /* Semantic status */
    --clr-ok-bg: rgba(34,197,94,0.1); --clr-ok-text: #16a34a;
    --clr-err-bg: rgba(239,68,68,0.08); --clr-err-text: #dc2626; --clr-err-text2: #7f1d1d; --clr-err-border: rgba(239,68,68,0.2); --clr-err-row: rgba(239,68,68,0.06);
    --clr-warn-bg: rgba(245,158,11,0.1); --clr-warn-border: rgba(245,158,11,0.2); --clr-warn-text: #b45309;
    --clr-info-bg: rgba(7,161,226,0.08); --clr-info-border: rgba(7,161,226,0.2); --clr-info-text: #0689c2;
    --clr-row-diff: rgba(239,68,68,0.05);
    /* Controls */
    --ctrl-bg: rgba(241,245,249,0.6);
    --ctrl-border: rgba(148,163,184,0.3);
    --ctrl-focus-ring: rgba(7,161,226,0.35);
    --ctrl-radius: 8px;
    --ctrl-padding: 8px 10px;
    /* Badges */
    --badge-draft-bg: rgba(148,163,184,0.12);
    --badge-draft-text: #64748b;
    --badge-draft-border: rgba(148,163,184,0.25);
    --badge-final-bg: rgba(34,197,94,0.1);
    --badge-final-text: #16a34a;
    --badge-final-border: rgba(34,197,94,0.25);
    --badge-contract-bg: rgba(7,161,226,0.1);
    --badge-contract-text: #0689c2;
    --badge-contract-border: rgba(7,161,226,0.25);
    /* Labels */
    --label-size: 11px;
    --label-weight: 500;
    --label-spacing: 0.06em;
    --label-color: var(--text-muted);
    /* Transition */
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.dark {
    color-scheme: dark;
    --brand: #2cb5f0;
    --brand-light: #5ec8f5;
    --brand-dark: #07a1e2;
    --brand-bg: rgba(7,161,226,0.12);
    --brand-ring: rgba(44,181,240,0.4);
    --blue: #2cb5f0;
    --blue-light: #5ec8f5;
    --blue-bg: rgba(7,161,226,0.12);
    --green: #4ade80;
    --green-bg: rgba(34,197,94,0.12);
    --red: #f87171;
    --red-bg: rgba(239,68,68,0.12);
    --orange: #fb923c;
    --orange-bg: rgba(249,115,22,0.12);
    --violet: #a78bfa;
    --violet-bg: rgba(139,92,246,0.16);
    --accent: #0a84ff;
    --gray-50: #0b0f19;
    --gray-100: #111827;
    --gray-200: #1e293b;
    --gray-300: #334155;
    --gray-400: #94a3b8;
    --gray-500: #cbd5e1;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --bg-main: #0f1420;
    --bg-body: #0b0f19;
    --bg-card: rgba(20,27,41,0.74);
    --bg-card-hover: rgba(30,39,56,0.82);
    --bg-input: rgba(255,255,255,0.05);
    --bg-sidebar: #0a0f18;
    --bg-header: rgba(11,15,25,0.72);
    --bg-modal: #151c2b;
    --bg-modal-solid: #151c2b;
    --border: rgba(255,255,255,0.075);
    --border-light: rgba(255,255,255,0.06);
    --border-glass: rgba(255,255,255,0.075);
    --border-strong: rgba(255,255,255,0.14);
    --text: #f1f5f9;
    --text-secondary: #b9c3d2;
    --text-muted: #8e9aac;
    --surface: rgba(20,27,41,0.74);
    --surface-solid: #151c2b;
    --surface-2: rgba(255,255,255,0.05);
    --hover: rgba(255,255,255,0.04);
    --press: rgba(255,255,255,0.08);
    --text-2: #b9c3d2;
    --text-3: #8e9aac;
    --brand-text: #5ec8f5;
    --brand-tint: rgba(44,181,240,0.13);
    --primary: #1690cf;
    --primary-hover: #22a3e4;
    --ring: 0 0 0 3px rgba(44,181,240,0.4);
    --red-text: #ff7a70;    --red-tint: rgba(248,113,113,0.13); --red-dot: #ff5a4f;
    --orange-text: #fbbf24; --orange-tint: rgba(245,158,11,0.14);
    --green-text: #5ee08a;  --green-tint: rgba(74,222,128,0.12); --green-dot: #34d36b;
    --teal-text: #4fd8c4;   --teal-tint: rgba(45,212,191,0.12);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.25);
    --pop-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
    --scrim: rgba(0,0,0,0.45);
    --shadow-sm: var(--card-shadow);
    --shadow: var(--card-shadow);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: var(--pop-shadow);
    --clr-ok-bg: rgba(34,197,94,0.12); --clr-ok-text: #4ade80;
    --clr-err-bg: rgba(239,68,68,0.1); --clr-err-text: #f87171; --clr-err-text2: #fca5a5; --clr-err-border: rgba(239,68,68,0.2); --clr-err-row: rgba(239,68,68,0.08);
    --clr-warn-bg: rgba(245,158,11,0.12); --clr-warn-border: rgba(245,158,11,0.2); --clr-warn-text: #fbbf24;
    --clr-info-bg: rgba(44,181,240,0.1); --clr-info-border: rgba(44,181,240,0.2); --clr-info-text: #5ec8f5;
    --clr-row-diff: rgba(239,68,68,0.06);
    /* Controls — Dark */
    --ctrl-bg: rgba(30,34,53,0.8);
    --ctrl-border: rgba(255,255,255,0.12);
    --ctrl-focus-ring: rgba(44,181,240,0.4);
    /* Badges — Dark */
    --badge-draft-bg: rgba(148,163,184,0.1);
    --badge-draft-text: #94a3b8;
    --badge-draft-border: rgba(148,163,184,0.2);
    --badge-final-bg: rgba(74,222,128,0.12);
    --badge-final-text: #4ade80;
    --badge-final-border: rgba(74,222,128,0.2);
    --badge-contract-bg: rgba(44,181,240,0.12);
    --badge-contract-text: #5ec8f5;
    --badge-contract-border: rgba(44,181,240,0.2);
  }
  /* Inter font loaded via <link> in <head> for non-blocking delivery */
  * { margin:0; padding:0; box-sizing:border-box; }
  /* Number-Input Spinner ausblenden wenn Suffix vorhanden */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:var(--font); background:var(--bg-body); color:var(--text);
    height:100vh; height:100dvh; display:flex; overflow:hidden;
    transition:background var(--transition), color var(--transition);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'cv02','cv03','cv04','cv11';
  }
  /* Ambient light mesh — Light mode: colorful gradient that shows through glass */
  html::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 900px 600px at 15% 8%, rgba(7,161,226,0.14), transparent 55%),
      radial-gradient(ellipse 700px 500px at 78% 12%, rgba(139,92,246,0.10), transparent 55%),
      radial-gradient(ellipse 800px 600px at 85% 75%, rgba(34,197,94,0.08), transparent 55%),
      radial-gradient(ellipse 600px 500px at 25% 80%, rgba(245,158,11,0.07), transparent 55%);
  }
  /* Ambient glow — Dark mode: richer, deeper glows */
  html.dark::before {
    background:
      radial-gradient(ellipse 900px 600px at 12% 8%, rgba(7,161,226,0.22), transparent 55%),
      radial-gradient(ellipse 700px 500px at 75% 10%, rgba(139,92,246,0.12), transparent 55%),
      radial-gradient(ellipse 800px 600px at 88% 72%, rgba(34,197,94,0.08), transparent 55%),
      radial-gradient(ellipse 600px 500px at 20% 82%, rgba(245,158,11,0.06), transparent 55%);
  }
  ::-webkit-scrollbar { width:7px; height:7px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
  ::-webkit-scrollbar-thumb:hover { background:var(--gray-400); background-clip:padding-box; }

  /* Glass utility */
  .glass {
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass);
  }
  .glass-heavy {
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
  }

  /* === Navigation: Icon-Rail + Seiten-Panel (Redesign 22.09.2026) ===
     Zwei Ebenen, eine Markierung: die Rail traegt die zehn Bereiche, das Panel
     die Seiten des gewaehlten Bereichs. Das Panel liegt als Overlay ueber dem
     Inhalt und schliesst bei Auswahl oder Klick daneben; angeheftet schiebt es
     den Inhalt (margin-left) statt ihn zu ueberdecken.
     Masse/Farben aus dem Design-Handoff "Navigationsleiste" (Bundle 22.09.2026). */
  :root {
    --rail-w: 84px;
    --panel-w: 272px;
    --sidebar-w: 84px;
    --nav-rail-bg: #ffffff;
    --nav-panel-bg: #ffffff;
    --nav-border: var(--border);
    --nav-hover: var(--press);
    --nav-tint: var(--brand-tint);
    --nav-tint-fg: var(--brand-text);
    --nav-group: #64748b;
    --nav-star: #e0a72b;
    --nav-indicator: var(--primary);
    --nav-shadow: 26px 0 50px rgba(15,23,42,0.16);
    --nav-drawer-shadow: 26px 0 54px rgba(15,23,42,0.22);
  }
  html.dark {
    --nav-rail-bg: #0a0f18;
    --nav-panel-bg: #111a27;
    --nav-group: #8e9aac;
    --nav-star: #ffc94d;
    --nav-indicator: var(--primary);
    --nav-shadow: 26px 0 50px rgba(0,0,0,0.5);
    --nav-drawer-shadow: 26px 0 54px rgba(0,0,0,0.55);
  }
  /* === Dunkel „HIG“ (28.09.2026, design_handoff_darkmode_hig) ================================
     Dritte Stufe des Erscheinungsbilds (toggleDarkMode, beschluesse.js). Neutrales Schwarzgrau
     ohne Blaustich, Tiefe NUR ueber Helligkeitsstufen: keine Schatten, keine Kartenrahmen (nur
     der Fokus-Ring). Text als Weiss mit Deckkraft, nie unter .50 fuer lesbaren Text (WCAG AA).
     Akzent-/Statusfarben ~18 % entsaettigt. Gilt app-weit, weil alles an denselben Tokens haengt. */
  /* Seiten mit eigenem Dunkel-Token-Satz fuer App-Tokens (html.dark #pageEtv …) stehen mit in der Liste,
     sonst schlaegt ihr Scope den globalen HIG-Wert (29.09.2026, gefunden per Regel-Scan). */
  html.dark[data-dark-variant="hig"],
  html.dark[data-dark-variant="hig"] #pageEtv,
  html.dark[data-dark-variant="hig"] #pageEtv #etvPhaseEdit {
    --elev-base: #121212;
    --elev-raised: #1d1d1f;
    --elev-raised-2: #222224;
    --elev-overlay: #29292b;
    --elev-overlay-2: #323234;
    --paper-bg: #0b0b0b;
    --toast-bg: #2c2c2e;
    --hig-ctl: rgba(255,255,255,0.09);
    --hig-div: rgba(255,255,255,0.035);
    --hig-row-hover: rgba(255,255,255,0.045);
    --hig-row-sel: rgba(255,255,255,0.075);
    --gray-50: #121212; --gray-100: #1d1d1f; --gray-200: #29292b; --gray-300: #3a3a3c; --gray-400: #8e8e93;
    --bg-main: #121212;
    --bg-body: #121212;
    --bg-card: #1d1d1f;
    --bg-card-hover: #222224;
    --bg-input: #1d1d1f;
    --bg-sidebar: #1d1d1f;
    --bg-header: #121212;
    --bg-modal: #29292b;
    --bg-modal-solid: #29292b;
    --border: rgba(255,255,255,0.035);
    --border-light: rgba(255,255,255,0.035);
    --border-glass: transparent;
    --border-strong: rgba(255,255,255,0.09);
    --text: rgba(255,255,255,0.95);
    --text-secondary: rgba(255,255,255,0.65);
    --text-muted: rgba(255,255,255,0.5);
    --text-2: rgba(255,255,255,0.65);
    --text-3: rgba(255,255,255,0.5);
    --surface: #1d1d1f;
    --surface-solid: #29292b;
    --surface-2: #222224;
    --hover: rgba(255,255,255,0.045);
    --press: rgba(255,255,255,0.075);
    --brand: #4fb0dc; --brand-light: #7cc2e3; --brand-dark: #3f9cc6;
    --brand-bg: rgba(79,176,220,0.14); --brand-tint: rgba(79,176,220,0.14); --brand-text: #7cc2e3;
    --brand-ring: rgba(79,176,220,0.18);
    --blue: #4fb0dc; --blue-light: #7cc2e3; --blue-bg: rgba(79,176,220,0.14);
    --primary: #2f7fae; --primary-hover: #3a8cbc;
    --accent: #4fb0dc;
    --ring: 0 0 0 3px rgba(79,176,220,0.18);
    --ctrl-bg: #1d1d1f; --ctrl-border: rgba(255,255,255,0.09); --ctrl-focus-ring: rgba(79,176,220,0.18);
    --orange: #d4a23f; --orange-bg: rgba(212,162,63,0.15); --orange-text: #e3bd78; --orange-tint: rgba(212,162,63,0.15);
    --green: #4c9e70; --green-bg: rgba(76,158,112,0.12); --green-text: #8acca5; --green-tint: rgba(76,158,112,0.12); --green-dot: #4c9e70;
    --red: #cf6070; --red-bg: rgba(207,96,112,0.09); --red-text: #ee9ba6; --red-tint: rgba(207,96,112,0.09); --red-dot: #cf6070;
    --violet: #7d72c4; --violet-bg: rgba(125,114,196,0.11);
    --clr-ok-bg: rgba(76,158,112,0.12); --clr-ok-text: #8acca5;
    --clr-err-bg: rgba(207,96,112,0.09); --clr-err-text: #ee9ba6; --clr-err-text2: #ee9ba6; --clr-err-border: rgba(207,96,112,0.3); --clr-err-row: rgba(207,96,112,0.06);
    --clr-warn-bg: rgba(212,162,63,0.14); --clr-warn-border: rgba(212,162,63,0.3); --clr-warn-text: #e3bd78;
    --clr-info-bg: rgba(79,176,220,0.1); --clr-info-border: rgba(79,176,220,0.2); --clr-info-text: #7cc2e3;
    --card-shadow: none; --pop-shadow: none;
    --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
    --nav-rail-bg: #1d1d1f; --nav-panel-bg: #29292b; --nav-border: transparent;
    --nav-group: rgba(255,255,255,0.5); --nav-star: #d4a23f;
    --nav-shadow: none; --nav-drawer-shadow: none;
    --scrim: rgba(0,0,0,0.55);
    --violet-text: #b8b0e4; --hig-grau: #8e8e93; --hig-grau-flaeche: rgba(255,255,255,0.06);
    --hig-warn-rand: rgba(212,162,63,0.6); --hig-warn-flaeche: rgba(212,162,63,0.06); --hig-hell: rgba(255,255,255,0.95); --hig-placeholder: rgba(255,255,255,0.3);
    /* Nachtrag 29.09.2026 (Regel-Scan): restliche Slate-Toene der Dunkel-Tokens */
    --gray-500: rgba(255,255,255,0.65); --gray-600: rgba(255,255,255,0.65); --gray-700: rgba(255,255,255,0.8); --gray-800: rgba(255,255,255,0.9); --gray-900: rgba(255,255,255,0.95);
    --badge-draft-bg: rgba(255,255,255,0.06); --badge-draft-text: #8e8e93; --badge-draft-border: rgba(255,255,255,0.09);
  }
  html.dark[data-dark-variant="hig"]::before { background:none; }
  /* Karten mit fest eingebautem Dunkel-Glas (Startseite u.a.): Fläche Raised, kein Glanz/Schatten/Rahmen */
  html.dark[data-dark-variant="hig"] .card,
  html.dark[data-dark-variant="hig"] .dash-card,
  html.dark[data-dark-variant="hig"] .stat-card { background:var(--elev-raised); border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  html.dark[data-dark-variant="hig"] .stat-card { outline:none; }
  html.dark[data-dark-variant="hig"] .stat-card::before,
  html.dark[data-dark-variant="hig"] .stat-card::after,
  html.dark[data-dark-variant="hig"] .dash-card::before { display:none; }
  html.dark[data-dark-variant="hig"] .dash-card:hover,
  html.dark[data-dark-variant="hig"] .stat-card:hover { background:var(--elev-raised-2); box-shadow:none; transform:none; }
  /* Seiten mit eigenen Dunkel-Tokens (Regel-Scan 29.09.2026: alle html.dark-Regeln mit Navy/Slate,
     die HIG nicht ueberschreibt). Nur Umlenkung auf HIG-Tokens, Akzente wie im Token-Block. */
  html.dark[data-dark-variant="hig"] #pageEtv #etvPhaseEdit { background:var(--elev-base); }
  html.dark[data-dark-variant="hig"] #pageEtv #etvPhaseEdit .etvpb-list { background:var(--elev-raised-2); }
  html.dark[data-dark-variant="hig"] #pageRueckschreiben {
    --rsb-chip-fl:var(--hig-grau-flaeche); --rsb-ki-fl:var(--violet-bg); --rsb-segment:var(--hig-grau-flaeche);
    --rsb-segment-an:var(--elev-overlay); --rsb-tisch:var(--elev-base);
    --rsb-schatten:none; --rsb-blatt-schatten:none;
  }
  html.dark[data-dark-variant="hig"] :is(#pageAusgangsrechnungen, #pageVertrieb),
  html.dark[data-dark-variant="hig"] #arModalOverlay .box {
    --ar-card:var(--elev-raised); --ar-input:var(--elev-raised-2);
    --ar-bd:var(--hig-ctl); --ar-bd-lt:var(--hig-div);
    --ar-t:var(--text); --ar-t2:var(--text-2); --ar-t3:var(--text-3); --ar-t4:var(--text-3);
    --ar-brand:var(--brand); --ar-brand-dark:var(--brand-text); --ar-brand-bg:var(--brand-tint); --ar-brand-ink:var(--brand-text); --ar-brand-ring:var(--brand-ring);
    --ar-amber:var(--orange); --ar-amber-bg:var(--orange-tint); --ar-amber-ink:var(--orange-text);
    --ar-red:var(--red); --ar-red-bg:var(--red-tint); --ar-red-ink:var(--red-text);
    --ar-green:var(--green); --ar-green-bg:var(--green-tint);
    --ar-panel:var(--brand-tint); --ar-panel-muted:var(--brand-text); --ar-panel-text:var(--text);
    --ar-ring:none; --ar-ring-2:none;
  }
  html.dark[data-dark-variant="hig"] #pageArchiv,
  html.dark[data-dark-variant="hig"] #pageObjektuebersicht {
    --ar-head:var(--elev-raised-2); --ar-paper:var(--paper-bg);
    --ar-violet-t:var(--violet-text); --ar-violet-f:var(--violet-bg);
    --ar-gray-t:var(--text-2); --ar-gray-f:var(--hig-grau-flaeche); --ar-gray-k:var(--hig-ctl);
    --ob-elev:var(--elev-raised); --ob-seg-on:var(--elev-overlay);
    --t-violet:var(--violet-text); --t-violet-bg:var(--violet-bg);
    --t-gray:var(--text-2); --t-gray-bg:var(--hig-grau-flaeche);
  }
  html.dark[data-dark-variant="hig"] #spOverlay {
    --sp-glas:rgba(41,41,43,.9); --sp-glas-dicht:rgba(41,41,43,.94);
    --sp-web:var(--violet-text); --sp-web-leise:var(--violet-bg);
  }
  html.dark[data-dark-variant="hig"] :is(#pageAdressen, #adrDetailOverlay, .adr-copy-overlay, #adrToast) { --adr-mie:var(--violet-text); --adr-oth:var(--text-2); }
  html.dark[data-dark-variant="hig"] :is(#pageZaehler, #zhLightbox) {
    --zh-text:var(--text); --zh-text2:var(--text-2); --zh-text3:var(--text-3);
    --zh-t-garten:var(--hig-grau); --zh-t-sonst:var(--hig-grau);
  }
  html.dark[data-dark-variant="hig"] .sich { --sich-unbekannt:var(--hig-grau); }
  html.dark[data-dark-variant="hig"] .etv-bv { --ki:var(--violet-text); --ki-bg:var(--violet-bg); --ki-ring:rgba(125,114,196,0.3); }
  html.dark[data-dark-variant="hig"] .mt-mod-etv,
  html.dark[data-dark-variant="hig"] .mt-mod-buch,
  html.dark[data-dark-variant="hig"] .afw-man-badge { background:var(--violet-bg); color:var(--violet-text); }
  html.dark[data-dark-variant="hig"] select option,
  html.dark[data-dark-variant="hig"] select optgroup { background-color:var(--elev-overlay); color:var(--text); }
  html.dark[data-dark-variant="hig"] .tk-modal { background:var(--elev-overlay); border-color:transparent; }
  .sidebar {
    width:var(--sidebar-w); height:100vh; height:100dvh; position:fixed; left:0; top:0;
    display:flex; flex-direction:row; z-index:100; color:var(--text);
  }
  /* Rail: 88px inklusive Polster und Rechtsrand (border-box) */
  .nav-rail {
    box-sizing:border-box; width:var(--rail-w); flex-shrink:0; position:relative; z-index:4;
    background:var(--nav-rail-bg); border-right:1px solid var(--nav-border);
    padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center;
  }
  /* Logo: einfarbig Primary, kein Verlauf, kein Glow (Redesign 24.09.2026) */
  .rail-brand {
    width:36px; height:36px; border-radius:10px; flex-shrink:0; margin-bottom:12px; cursor:pointer;
    background:var(--primary); color:#fff;
    font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  /* Eigener Scrollbereich: ohne ihn schneidet die Rail die letzten Bereiche ab.
     position:relative, weil der Aktiv-Indikator daran gemessen wird. */
  .rail-scroll {
    position:relative; flex:1; min-height:0; width:100%; overflow-y:auto; scrollbar-width:none;
    display:flex; flex-direction:column; gap:1px;
  }
  .rail-scroll::-webkit-scrollbar { width:0; height:0; }
  /* Genau EIN Indikator pro Rail, innerhalb des Scrollbereichs (left:0, sonst
     schneidet overflow-y:auto ihn weg). Die Transition kommt erst mit .ready,
     damit der Balken beim Laden nicht von oben hereinfliegt. */
  .rail-indicator {
    position:absolute; left:0; top:0; width:3px; height:24px; border-radius:0 3px 3px 0;
    background:var(--nav-indicator); opacity:0; pointer-events:none;
  }
  .rail-indicator.ready { transition:transform 0.38s cubic-bezier(0.34,1.32,0.36,1), opacity 0.2s; }
  .rail-btn {
    position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:6px 2px 7px; border:none; border-radius:10px; background:transparent; cursor:pointer;
    font-family:inherit; color:var(--text-3); transition:color 0.15s;
  }
  .rail-btn:hover { color:var(--text); }
  .rail-btn.active { color:var(--nav-tint-fg); }
  .rail-ico {
    display:flex; align-items:center; justify-content:center; width:40px; height:30px;
    border-radius:9px; background:transparent; transition:background 0.2s;
  }
  .rail-btn:hover .rail-ico { background:var(--hover); }
  .rail-btn.active .rail-ico { background:var(--nav-tint); }
  .rail-btn svg, .nav-rail .nav-item svg { width:19px; height:19px; stroke-width:1.8; }
  .rail-label {
    font-size:10.5px; font-weight:600; line-height:1.15; letter-spacing:-0.01em;
    width:100%; text-align:center; hyphens:auto; overflow-wrap:anywhere;
  }
  /* Rand in Rail-Farbe: trennt die Zahl optisch vom Symbol darunter */
  .rail-badge {
    position:absolute; top:2px; right:10px; min-width:16px; height:16px; box-sizing:border-box;
    border-radius:99px; padding:0 3px; background:var(--red-dot); color:#fff;
    font-size:10px; font-weight:700; line-height:12px; text-align:center;
    border:2px solid var(--nav-rail-bg); display:none;
  }
  /* Einstellungen sitzt fest unten, ausserhalb des Scrollbereichs */
  .rail-gear {
    flex-shrink:0; width:100%; margin-top:4px; padding:7px 2px;
    border-top:1px solid var(--nav-border); border-radius:0;
  }
  .rail-gear .rail-ico { height:30px; border-radius:9px; }
  .rail-gear .rail-label { white-space:nowrap; hyphens:none; overflow-wrap:normal; letter-spacing:-0.02em; }
  /* Zahnrad nutzt .nav-item fuer den Active-State von navigateTo, braucht aber Rail-Optik */
  .nav-rail .nav-item {
    display:flex; flex-direction:column; align-items:center; gap:4px; width:100%;
    box-shadow:none; padding:7px 2px; font-size:10.5px; font-weight:600;
    color:var(--text-3); background:transparent; min-height:0;
  }
  .nav-rail .nav-item:hover { background:transparent; color:var(--text); }
  .nav-rail .nav-item.active { background:transparent; color:var(--nav-tint-fg); box-shadow:none; font-weight:600; }
  .nav-rail .nav-item.active .rail-ico { background:var(--nav-tint); }

  /* Panel: Overlay ueber dem Inhalt, Scrim faengt den Klick daneben */
  .nav-scrim { position:fixed; left:var(--rail-w); top:0; right:0; bottom:0; z-index:2; pointer-events:none; background:transparent; transition:background 0.2s; }
  .sidebar.panel-open:not(.panel-pinned) .nav-scrim { pointer-events:auto; background:var(--scrim); }
  .nav-panel {
    position:absolute; left:var(--rail-w); top:0; bottom:0; width:var(--panel-w); z-index:3;
    display:flex; flex-direction:column; background:var(--nav-panel-bg);
    border-right:1px solid var(--nav-border); box-shadow:var(--nav-shadow);
    transform:translateX(-104%); opacity:0; pointer-events:none;
    transition:transform 0.24s cubic-bezier(0.2,0,0,1), opacity 0.2s;
  }
  .sidebar.panel-open .nav-panel { transform:translateX(0); opacity:1; pointer-events:auto; }
  body.nav-pinned .main { margin-left:calc(var(--rail-w) + var(--panel-w)); }
  .main { transition:margin-left 0.24s cubic-bezier(0.2,0,0,1); }

  .nav-panel-head { padding:18px 16px 12px; flex-shrink:0; }
  .panel-head-row { display:flex; align-items:center; gap:10px; padding:0 0 12px; }
  .panel-area-icon {
    display:flex; align-items:center; justify-content:center; width:30px; height:30px;
    border-radius:8px; background:var(--brand-tint); color:var(--brand-text); flex-shrink:0;
  }
  .panel-area-icon svg { width:17px; height:17px; stroke-width:1.8; }
  #navPanelTitle { flex:1; min-width:0; font-size:17px; font-weight:600; letter-spacing:-0.015em; }
  .panel-icon-btn {
    display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
    border:none; border-radius:8px; background:transparent; color:var(--text-3);
    cursor:pointer; transition:background 0.15s, color 0.15s;
  }
  .panel-icon-btn svg { width:16px; height:16px; }
  .panel-icon-btn:hover { background:var(--press); color:var(--text); }
  .panel-icon-btn.on { background:var(--brand-tint); color:var(--brand-text); }
  .panel-tool-row { display:flex; align-items:center; gap:6px; }
  .panel-icon-btn.big { width:36px; height:36px; border-radius:9px; }
  .nav-search { position:relative; flex:1; min-width:0; }
  #navSearchInput {
    width:100%; height:36px; box-sizing:border-box; border:1px solid var(--border); border-radius:9px;
    padding:0 12px 0 33px; font-size:13.5px; outline:none;
    background:var(--surface-2); color:var(--text); font-family:inherit;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  #navSearchInput:focus { border-color:var(--brand-text); box-shadow:var(--ring); }
  .nav-search > svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-3); pointer-events:none; }
  #navSearchResults {
    position:absolute; top:42px; left:0; right:0; background:var(--surface-solid); border:1px solid var(--border-strong);
    border-radius:12px; box-shadow:var(--pop-shadow); z-index:120; overflow:hidden; display:none; padding:4px;
  }
  #navSearchResults.show { display:block; }
  .nav-sr-item { padding:0 10px; min-height:36px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text); }
  .nav-sr-item:hover, .nav-sr-item.hot { background:var(--brand-tint); color:var(--brand-text); }
  .nav-sr-item .nav-sr-area { margin-left:auto; font-size:12px; color:var(--text-3); }
  .nav-sr-empty { padding:10px 12px; color:var(--text-muted); font-size:12px; }
  .nav-arrange-hint { font-size:11px; line-height:1.5; color:var(--text-muted); padding:4px 11px 8px; display:none; }
  .sidebar.nav-arrange .nav-arrange-hint { display:block; }

  /* Bereiche: nur der aktive ist sichtbar */
  .sidebar-nav { flex:1; min-height:0; padding:0 10px 12px; overflow-y:auto; }
  .nav-area { display:none; }
  .nav-area.active { display:block; }
  .sub-badge { background:var(--red-dot); color:#fff; border-radius:99px; font-size:9px; font-weight:700; padding:1px 6px; }
  .nav-section-title .sub-badge { display:none; }
  .nav-section.collapsed .nav-section-title .sub-badge:not(:empty) { display:inline-block !important; }
  .nav-section { margin-bottom:2px; }
  .nav-section-title {
    font-size:12px; font-weight:600; letter-spacing:0;
    color:var(--text-3); padding:14px 10px 6px; user-select:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .nav-section-title:hover { color:var(--text); }
  .nav-section-title::after { content:''; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-135deg); transition:transform 0.2s; }
  .nav-section.collapsed .nav-section-title::after { transform:rotate(45deg); }
  /* Gruppentitel "Angeheftet" / "Weitere Seiten": reine Beschriftung, nicht klappbar */
  .nav-section-title.plain { cursor:default; }
  .nav-section-title.plain::after { display:none; }
  .nav-section-title.plain:hover { color:var(--text-3); }
  .nav-section.collapsed .nav-item { display:none; }
  .nav-section.collapsed .nav-item.active { display:flex; opacity:0.7; }
  .nav-item {
    display:flex; align-items:center; gap:10px; min-height:36px; padding:7px 10px;
    border-radius:8px; cursor:pointer; font-size:14px; font-weight:400;
    color:var(--text); transition:background 0.15s, color 0.15s; border:none; background:none;
    width:100%; text-align:left; font-family:inherit;
  }
  .nav-item:hover { background:var(--press); color:var(--text); }
  .nav-item:focus-visible, .rail-btn:focus-visible { outline:none; box-shadow:var(--ring); }
  .nav-item.active { background:var(--brand-tint); color:var(--brand-text); box-shadow:none; font-weight:600; }
  .nav-item svg { width:17px; height:17px; flex-shrink:0; }
  /* Seitenliste ohne Icons: nur Beschriftung (Redesign 24.09.2026). Stern/Griff liegen in <span>. */
  .sidebar-nav .nav-item > svg { display:none; }
  .nav-item .badge {
    margin-left:auto; min-width:20px; height:20px; font-size:11px; font-weight:700; padding:0 6px;
    line-height:20px; text-align:center; border-radius:10px; background:var(--surface-2); color:var(--text-3);
  }
  .nav-item.active .badge { background:var(--surface-2); color:inherit; }
  /* Stern und Griff gibt es nur im Sortiermodus; sonst rueckt der Text auf 11px Polster */
  .nav-star, .nav-grip { display:none; align-items:center; justify-content:center; flex-shrink:0; }
  .nav-star svg { width:13px; height:13px; fill:none; }
  .nav-item.is-fav .nav-star svg { fill:currentColor; }
  .nav-grip svg { width:13px; height:13px; }
  .sidebar.nav-arrange .nav-item { padding-left:0; cursor:grab; }
  .sidebar.nav-arrange .nav-star { display:flex; width:24px; color:var(--text-muted); }
  .sidebar.nav-arrange .nav-grip { display:flex; width:22px; padding-right:5px; margin-left:auto; color:var(--text-muted); }
  .nav-item.is-fav .nav-star { color:var(--nav-star); }
  .nav-item.nav-dragging { opacity:0.45; }
  /* Unterpunkt einer Seite (eigene Adresse, aber kein eigenes data-page) */
  .sidebar-nav .nav-item.nav-sub { padding-left:24px; font-size:13.5px; font-weight:400; color:var(--text-2); }
  .sidebar.nav-arrange .nav-item.nav-sub { padding-left:24px; }
  .sidebar-nav .nav-item.nav-sub svg { width:15px; height:15px; opacity:0.75; }
  .sidebar-footer {
    padding:12px 16px; border-top:1px solid var(--border);
    font-size:11.5px; color:var(--text-3);
  }
  .sidebar-footer .version { font-weight:600; }

  /* === Status dots in sidebar === */
  .status-dots { display:flex; gap:6px; align-items:center; }
  .status-dots .dot { width:6px; height:6px; border-radius:50%; background:var(--text-3); transition:background var(--transition); cursor:default; }
  .status-dots .dot.online { background:var(--green-dot); }
  .status-dots .dot.offline { background:var(--red-dot); }
  /* In der Kopfzeile als kleine Pill */
  .main-header .status-dots { gap:5px; padding:5px 9px; border-radius:99px; background:var(--surface-2); }

  /* === Main === */
  .main { margin-left:var(--sidebar-w); flex:1; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:1; transition:margin-left 0.2s ease; }
  /* Kopfzeile (Redesign 24.09.2026): halbtransparent mit Blur, Icon-Knoepfe ohne Rahmen */
  .main-header {
    height:var(--header-h); background:var(--bg-header);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; padding:0 28px; gap:12px;
    position:sticky; top:0; z-index:50;
    transition:background var(--transition);
  }
  .main-header h2 { font-size:17px; font-weight:600; letter-spacing:-0.015em; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
  .hdr-btn {
    background:transparent; border:none; cursor:pointer; flex-shrink:0;
    color:var(--text-2); width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; transition:background 0.15s, color 0.15s;
  }
  .hdr-btn:hover { background:var(--press); color:var(--text); }
  .hdr-btn:focus-visible, .hdr-profile:focus-visible { outline:none; box-shadow:var(--ring); }
  .hdr-btn svg { width:19px; height:19px; }
  /* Suche: am Desktop ein Feld "Alles durchsuchen" mit Kuerzel, sonst nur die Lupe */
  .hdr-search-text, .hdr-kbd { display:none; }
  .hdr-kbd { font-family:inherit; font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px; border:1px solid var(--border); color:var(--text-3); }
  /* Hell/Dunkel: Sonne im Dunkelmodus, Mond im Hellmodus (#darkModeIcon bleibt fuer toggleDarkMode) */
  .theme-ico-sun { display:none; }
  html.dark .theme-ico-sun { display:block; }
  html.dark .theme-ico-moon { display:none; }
  .hdr-profile {
    display:flex; align-items:center; gap:8px; height:36px; padding:0 4px; margin-left:4px;
    border-radius:99px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--text); cursor:pointer; font-family:inherit; transition:border-color 0.15s;
  }
  .hdr-profile:hover { border-color:var(--border-strong); }
  #headerUserName { display:none; font-size:13px; font-weight:500; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
  .avatar {
    width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--brand-tint); color:var(--brand-text);
    font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; letter-spacing:0;
  }
  .avatar-lg { width:38px; height:38px; font-size:13px; }
  .profile-dropdown { position:relative; }
  /* Popover: solide Flaeche, starke Kante, Radius 14 */
  .profile-menu {
    display:none; position:absolute; top:calc(100% + 10px); right:0; width:280px;
    background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:14px;
    box-shadow:var(--pop-shadow); z-index:100; padding:6px;
    animation:popIn 0.16s ease-out;
  }
  @keyframes popIn { from { opacity:0; transform:translateY(-4px); } }
  @keyframes sheetIn { from { transform:translateY(100%); } }
  .profile-menu.show { display:block; }
  .profile-menu-user { display:flex; align-items:center; gap:12px; padding:10px 10px 12px; }
  .profile-menu-name { font-size:14.5px; font-weight:600; }
  .profile-menu-sub { font-size:12.5px; color:var(--text-3); }
  .profile-menu-label { font-size:12px; font-weight:600; color:var(--text-3); padding:6px 10px; }
  .profile-menu-select { padding:0 6px 8px; }
  .profile-menu-select .form-input { height:36px; font-size:13.5px; background-color:var(--surface-2); }
  .profile-menu-item {
    display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; font-size:14px;
    color:var(--text); cursor:pointer; border:none; background:none; font-family:inherit;
    width:100%; text-align:left; transition:background 0.15s; border-radius:8px;
  }
  .profile-menu-item svg { display:none; }
  .profile-menu-item:hover { background:var(--press); color:var(--text); }
  .profile-menu-logout { color:var(--red-text); }
  .profile-menu-logout:hover { background:var(--red-tint); color:var(--red-text); }
  .profile-menu-divider { height:1px; background:var(--border); margin:0 4px 6px; }
  /* Nur am Telefon: Erscheinungsbild im Menue und Kopf des Bottom-Sheets */
  .profile-menu-theme, .sheet-grip, .sheet-head { display:none; }
  .profile-menu-theme { justify-content:space-between; }
  .profile-menu-theme-val { font-size:13.5px; color:var(--text-3); }
  .profile-menu-theme-val::after { content:'Hell'; }
  html.dark .profile-menu-theme-val::after { content:'Dunkel'; }
  .main-content { flex:1; padding:28px; padding-bottom:60px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* Master-Detail back button: hidden on desktop, shown on mobile via media query */
  .md-back-btn { display:none; }

  /* === Page sections (toggled) === */
  .page { display:none; }
  .page.active { display:block; }
  /* FIBU-Seite: Vollbild — globale Sidebar, Header, Banner ausblenden */
  body[data-seite="fibu"]:not(#_) > #mainSidebar,
  body[data-seite="fibu"]:not(#_) > .sidebar-backdrop { display:none !important; }
  body[data-seite="fibu"] .main:not(#_) { margin-left:0 !important; }
  body[data-seite="fibu"] .main:not(#_) > .main-header,
  body[data-seite="fibu"] .main:not(#_) > #aiQuoteBanner,
  body[data-seite="fibu"] .main:not(#_) > #bpRetryBanner { display:none !important; }
  body[data-seite="fibu"] .main-content:not(#_) {
    padding:0 !important; overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
  }
  #pageFibu.active {
    display:flex !important; flex-direction:column;
    flex:1; min-height:0; overflow:hidden;
  }

  /* Absence Gantt Grid-Linien */
  :root {
    --abs-grid-line: rgba(0,0,0,0.08);
    --abs-grid-line-v: rgba(0,0,0,0.05);
  }
  html.dark {
    --abs-grid-line: rgba(255,255,255,0.08);
    --abs-grid-line-v: rgba(255,255,255,0.04);
  }

  /* Absence Kalender: füllt gesamten Viewport */
  body[data-seite="absence"] .main-content:has(#pageAbsence.abs-calendar-mode) {
    padding:10px 16px 6px !important; overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
  }
  #pageAbsence.active.abs-calendar-mode {
    display:flex !important; flex-direction:column !important;
    flex:1 1 0 !important; overflow:hidden !important;
  }

  /* === Cards === */
  .card {
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); transition:all var(--transition);
  }
  .card-header {
    padding:18px 24px; border-bottom:1px solid var(--border-light);
    display:flex; align-items:center; justify-content:space-between;
  }
  .card-header h3 { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
  .card-body { padding:22px 24px; }

  /* ============================================================
     DASHBOARD — Liquid Glass Design System
     Inspired by Apple's Liquid Glass: layered translucency,
     specular edge highlights, depth through blur, living color.
     ============================================================ */

  /* --- Dashboard greeting --- */
  .dash-greeting {
    margin-bottom:28px;
  }
  .dash-greeting-text {
    font-size:28px; font-weight:700; letter-spacing:-0.03em; color:var(--text);
    line-height:1.2;
  }
  .dash-greeting-sub {
    font-size:14px; color:var(--text-muted); margin-top:4px; font-weight:450;
  }

  /* --- Stat cards — Liquid Glass --- */
  .stats-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:32px;
  }
  .stat-card {
    position:relative; overflow:hidden; cursor:pointer;
    /* Multi-layer glass */
    background:
      linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    /* Specular edge — top+left brighter like light catching glass */
    border:1px solid transparent;
    border-image:linear-gradient(
      135deg,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.3) 40%,
      rgba(255,255,255,0.1) 100%
    ) 1;
    border-radius:20px;
    /* border-image breaks border-radius, use outline trick */
    border:none;
    outline:1px solid rgba(255,255,255,0.35);
    outline-offset:-1px;
    padding:24px; box-shadow:
      0 1px 1px rgba(0,0,0,0.02),
      0 4px 12px rgba(0,0,0,0.06),
      0 12px 32px rgba(0,0,0,0.04),
      inset 0 1px 0 rgba(255,255,255,0.5);
    transition:all 0.45s cubic-bezier(0.2, 0, 0, 1);
  }
  html.dark .stat-card {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    outline-color:rgba(255,255,255,0.1);
    box-shadow:
      0 1px 1px rgba(0,0,0,0.1),
      0 4px 12px rgba(0,0,0,0.25),
      0 12px 32px rgba(0,0,0,0.15),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  /* Inner specular highlight — top edge glow */
  .stat-card::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 70%, transparent);
    pointer-events:none;
  }
  html.dark .stat-card::before {
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 70%, transparent);
  }
  /* Ambient color glow behind card */
  .stat-card::after {
    content:''; position:absolute; bottom:-20px; right:-20px; width:100px; height:100px;
    background:radial-gradient(circle, var(--stat-accent, var(--brand)), transparent 70%);
    opacity:0.08; pointer-events:none; transition:opacity 0.4s;
    border-radius:50%; filter:blur(20px);
  }
  html.dark .stat-card::after { opacity:0.12; }
  .stat-card:hover {
    transform:translateY(-3px);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.03),
      0 8px 20px rgba(0,0,0,0.08),
      0 20px 48px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.6);
    outline-color:rgba(255,255,255,0.5);
  }
  html.dark .stat-card:hover {
    box-shadow:
      0 2px 4px rgba(0,0,0,0.15),
      0 8px 20px rgba(0,0,0,0.35),
      0 20px 48px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.12);
    outline-color:rgba(255,255,255,0.18);
  }
  .stat-card:hover::after { opacity:0.14; }
  html.dark .stat-card:hover::after { opacity:0.2; }
  .stat-card .stat-icon {
    width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--stat-accent, var(--brand)) 12%, transparent);
    color:var(--stat-accent, var(--brand)); margin-bottom:16px;
    transition:all 0.35s ease;
    box-shadow:0 2px 8px color-mix(in srgb, var(--stat-accent, var(--brand)) 15%, transparent);
  }
  .stat-card:hover .stat-icon { transform:scale(1.06); box-shadow:0 4px 12px color-mix(in srgb, var(--stat-accent, var(--brand)) 25%, transparent); }
  .stat-card .stat-icon svg { width:22px; height:22px; }
  .stat-card .label { font-size:11px; font-weight:600; color:var(--stat-accent, var(--text-muted)); text-transform:uppercase; letter-spacing:0.06em; }
  .stat-card .value { font-size:36px; font-weight:800; margin-top:4px; color:var(--text); letter-spacing:-0.04em; line-height:1.1; font-variant-numeric:tabular-nums; }
  .stat-card .sub { font-size:12px; color:var(--text-muted); margin-top:6px; font-weight:450; }

  /* --- Dashboard content sections --- */
  .dash-section-title {
    font-size:14px; font-weight:600; color:var(--text-secondary);
    letter-spacing:-0.01em; margin:36px 0 14px 2px;
  }
  #pageDashboard .dash-section-title:first-child { margin-top:4px; }
  /* Dashboard row layouts — content-aware */
  .dash-row-1, .dash-row-2, .dash-row-3 { display:grid; gap:16px; }
  .dash-row-1 { grid-template-columns:1fr; }
  .dash-row-2 { grid-template-columns:repeat(2, 1fr); }
  .dash-row-3 { grid-template-columns:repeat(3, 1fr); }
  /* Legacy compat */
  .dash-grid { display:grid; gap:16px; }
  .dash-grid-2 { grid-template-columns:repeat(2, 1fr); }
  .dash-grid-3 { grid-template-columns:repeat(3, 1fr); }
  .dash-grid-4 { grid-template-columns:repeat(4, 1fr); }

  /* --- Dashboard cards — Glass panels --- */
  .dash-card {
    position:relative;
    background:linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 100%);
    backdrop-filter:blur(32px) saturate(1.6);
    -webkit-backdrop-filter:blur(32px) saturate(1.6);
    border:none; outline:1px solid rgba(255,255,255,0.3);
    outline-offset:-1px;
    border-radius:20px; padding:22px 24px;
    box-shadow:
      0 2px 8px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.05),
      inset 0 1px 0 rgba(255,255,255,0.4);
    transition:all 0.35s cubic-bezier(0.2, 0, 0, 1);
  }
  html.dark .dash-card {
    background:linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
    outline-color:rgba(255,255,255,0.08);
    box-shadow:
      0 2px 8px rgba(0,0,0,0.2),
      0 8px 24px rgba(0,0,0,0.15),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
  /* Specular top highlight */
  .dash-card::before {
    content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.5) 60%, transparent);
    pointer-events:none;
  }
  html.dark .dash-card::before {
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 60%, transparent);
  }
  .dash-card:hover {
    transform:translateY(-2px);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.06),
      0 12px 32px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.5);
    outline-color:rgba(255,255,255,0.45);
  }
  html.dark .dash-card:hover {
    box-shadow:
      0 4px 12px rgba(0,0,0,0.3),
      0 12px 32px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.1);
    outline-color:rgba(255,255,255,0.14);
  }
  .dash-card-title {
    font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
  }
  .dash-card-title .dash-card-icon {
    width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0;
  }
  .dash-muted { color:var(--text-muted); font-size:13px; }
  .dash-stat { text-align:center; min-width:0; flex:1; }
  .dash-stat-value { font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
  .dash-stat-label { font-size:11px; color:var(--text-muted); margin-top:4px; font-weight:500; white-space:nowrap; }
  .dash-stat-row { display:flex; justify-content:space-around; gap:4px; flex-wrap:wrap; }

  /* --- Glass progress bars --- */
  .dash-progress-track {
    height:10px; border-radius:6px; overflow:hidden; position:relative;
    background:rgba(0,0,0,0.06);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  }
  html.dark .dash-progress-track {
    background:rgba(255,255,255,0.08);
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
  }
  .dash-progress-fill {
    height:100%; border-radius:6px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative; overflow:hidden;
  }
  /* Glass shine on progress bar */
  .dash-progress-fill::after {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
    border-radius:inherit;
  }

  /* --- Loader --- */
  .dash-loader { padding:60px 0; text-align:center; }
  .dash-loader-bar {
    width:140px; height:4px; margin:0 auto; border-radius:3px;
    background:rgba(0,0,0,0.06); overflow:hidden; position:relative;
  }
  html.dark .dash-loader-bar { background:rgba(255,255,255,0.08); }
  .dash-loader-bar::after {
    content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
    background:linear-gradient(90deg, transparent, var(--brand), transparent);
    border-radius:3px; animation:dashLoad 1.2s ease-in-out infinite;
  }
  @keyframes dashLoad { 0%{left:-40%} 100%{left:100%} }

  /* --- Entrance animation (nur auf sichtbaren Seiten) --- */
  @keyframes dashCardIn {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
  }
  .dash-animate { animation:dashCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .page:not(.active) .dash-animate { animation:none; }

  /* --- Large screen optimization (4K / 32") --- */
  @media (min-width:1800px) {
    .dash-greeting-text { font-size:32px; }
    .stats-grid { gap:20px; }
    .stat-card { padding:28px; }
    .stat-card .value { font-size:40px; }
    .stat-card .stat-icon { width:48px; height:48px; border-radius:16px; }
    .stat-card .stat-icon svg { width:24px; height:24px; }
    .dash-grid { gap:20px; }
    .dash-card { padding:26px 28px; }
    .dash-stat-value { font-size:32px; }
  }
  /* --- Ultra-wide: volle Breite nutzen --- */
  @media (min-width:2200px) {
    .dash-greeting-text { font-size:36px; }
    .dash-stat-value { font-size:36px; }
    .dash-card { padding:28px 32px; }
    .stats-grid { gap:24px; }
    .dash-grid { gap:24px; }
  }

  /* ═══════════════════════════════════════════════════════════════
     DIGITALER EINGANG — Split-Pane Layout (Apple Mail Style)
     3 Spalten: Objekt-Liste | Detail | PDF-Viewer
   ═══════════════════════════════════════════════════════════════ */
  /* Posteingang: randlos, füllt gesamten main-content */
  #pagePosteingang {
    position:relative; overflow:hidden;
    height:calc(100% + 28px + 60px); /* kompensiere main-content padding */
    margin:-28px; margin-bottom:-60px;
  }
  @media (max-width:768px) {
    #pagePosteingang { margin:-14px; margin-bottom:-60px; height:calc(100% + 14px + 60px); }
  }
  /* ── Layout Container ── */
  .pe-layout {
    display:flex; height:100%; overflow:hidden;
  }

  /* ── Spalte 1: Objekt-Liste ── */
  .pe-list-col {
    width:280px; flex-shrink:0;
    display:flex; flex-direction:column;
    border-right:1px solid var(--border-light);
    background:var(--bg-body);
    overflow:hidden;
  }
  .pe-list-header {
    padding:14px 14px 10px; flex-shrink:0;
    border-bottom:1px solid var(--border-light);
  }
  .pe-search-wrap {
    position:relative; margin-bottom:10px;
  }
  .pe-search-icon {
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); pointer-events:none;
  }
  .pe-search {
    width:100%; padding:8px 12px 8px 34px; border-radius:10px;
    border:1px solid var(--border-glass); background:var(--bg-card);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    font-size:13px; font-family:var(--font); color:var(--text);
    transition:all 0.2s; outline:none;
  }
  .pe-search::placeholder { color:var(--text-muted); }
  .pe-search:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
  .pe-quick-filters {
    display:flex; gap:0; margin-bottom:10px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; padding:3px; position:relative;
    overflow:hidden;
  }
  .pe-pill {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:6px 4px; border-radius:8px; font-size:11px; font-weight:600;
    border:none; background:transparent;
    color:var(--text-muted); cursor:pointer;
    transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
    font-family:var(--font); white-space:nowrap; position:relative; z-index:1;
  }
  .pe-pill:hover { color:var(--text); }
  .pe-pill.active {
    color:var(--brand); background:var(--bg-card-hover);
    box-shadow:0 1px 4px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.04);
  }
  html.dark .pe-pill.active {
    background:rgba(255,255,255,0.08);
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
  }
  .pe-pill-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .pe-list-actions {
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  }
  .pe-list-stats { font-size:11px; color:var(--text-muted); flex:1; }
  .pe-refresh-btn { padding:5px 8px !important; }
  .pe-list-scroll {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .pe-empty-state {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 20px; color:var(--text-muted); text-align:center;
  }
  .pe-empty-state svg { opacity:0.3; margin-bottom:8px; }
  .pe-empty-state p { font-size:13px; }
  .pe-list-done {
    flex-shrink:0; border-top:1px solid var(--border-light);
  }
  .pe-done-toggle {
    display:flex; align-items:center; gap:6px; padding:10px 14px;
    font-size:12px; font-weight:600; color:var(--text-muted);
    cursor:pointer; user-select:none; transition:background 0.15s;
  }
  .pe-done-toggle:hover { background:var(--bg-card-hover); }
  .pe-done-toggle svg { transition:transform 0.2s; flex-shrink:0; }
  .pe-done-toggle--match {
    color:var(--brand); background:var(--brand-bg);
  }
  .pe-done-toggle--match:hover { background:var(--brand-bg); filter:brightness(0.97); }
  .pe-done-hint {
    margin:8px 14px; padding:8px 12px;
    background:var(--brand-bg); color:var(--brand);
    border:1px solid var(--brand); border-radius:6px;
    font-size:12px; font-weight:600;
    display:flex; align-items:center;
  }

  /* ── Objekt-Zeile (wird von JS gerendert) ── */
  .pe-obj-row {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; cursor:pointer;
    border-bottom:1px solid var(--border-light);
    transition:background 0.15s, border-color 0.15s;
    position:relative;
  }
  .pe-obj-row:hover { background:var(--bg-card-hover); }
  .pe-obj-row.selected {
    background:var(--brand-bg);
    box-shadow:inset 3px 0 0 var(--brand);
  }
  .pe-obj-indicator {
    width:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .pe-obj-dot {
    width:8px; height:8px; border-radius:50%;
  }
  .pe-obj-dot.red { background:var(--red); }
  .pe-obj-dot.green { background:var(--green); }
  .pe-obj-dot.blue { background:var(--brand); }
  .pe-obj-dot.gray { background:var(--gray-300); }
  .pe-obj-count {
    min-width:20px; height:20px; border-radius:10px;
    background:linear-gradient(135deg, #ff453a, #e03e34); color:white;
    font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
    padding:0 5px; box-shadow:0 1px 4px rgba(255,69,58,0.3);
    animation:pePulse 2s ease-in-out infinite;
  }
  @keyframes pePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,69,58,0.4);} 50%{box-shadow:0 0 0 5px rgba(255,69,58,0);} }
  .pe-obj-info { flex:1; min-width:0; }
  .pe-obj-name {
    font-size:13px; font-weight:600; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:-0.01em;
  }
  .pe-obj-meta {
    font-size:11px; color:var(--text-muted); margin-top:1px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pe-obj-preview {
    font-size:11px; color:var(--text-secondary); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pe-obj-match {
    font-size:11px; color:var(--brand); margin-top:2px; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pe-obj-right { flex-shrink:0; text-align:right; }
  .pe-obj-time { font-size:10px; color:var(--text-muted); display:block; }
  .pe-obj-online {
    width:7px; height:7px; border-radius:50%; background:#30d158;
    display:inline-block; box-shadow:0 0 4px rgba(48,209,88,0.5);
    margin-top:4px;
  }

  /* ── Spalte 2: Detail ── */
  .pe-detail-col {
    flex:1; min-width:0;
    display:flex; flex-direction:column;
    overflow:hidden; background:var(--bg-body);
  }
  .pe-detail-empty {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    color:var(--text-muted);
  }
  .pe-detail-header {
    padding:16px 20px; flex-shrink:0;
    border-bottom:1px solid var(--border-light);
    display:flex; align-items:center; gap:12px;
  }
  .pe-back-btn {
    display:none; width:32px; height:32px; border-radius:8px; border:none;
    background:transparent; color:var(--text-muted); cursor:pointer;
    align-items:center; justify-content:center; flex-shrink:0;
    transition:all 0.15s;
  }
  .pe-back-btn:hover { background:var(--bg-card-hover); color:var(--text); }
  .pe-detail-title { flex:1; min-width:0; }
  .pe-detail-title h3 {
    font-size:17px; font-weight:700; letter-spacing:-0.02em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;
  }
  .pe-detail-title .pe-detail-sub {
    font-size:12px; color:var(--text-muted); margin-top:2px;
  }
  .pe-detail-badges { display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; }

  /* ── Segmented Control (iOS-style) ── */
  .pe-segmented {
    display:flex; margin:12px 20px; padding:3px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; position:relative; flex-shrink:0;
  }
  .pe-seg {
    flex:1; padding:8px 8px; font-size:12px; font-weight:600;
    border-radius:8px; border:none; background:transparent;
    cursor:pointer; position:relative; z-index:1;
    color:var(--text-muted); font-family:var(--font);
    transition:color 0.2s; text-align:center; white-space:nowrap;
  }
  .pe-seg:hover { color:var(--text); }
  .pe-seg.active { color:var(--text); }
  .pe-seg-badge {
    font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px;
    margin-left:3px; vertical-align:1px;
  }
  .pe-seg-badge.red { background:var(--red-bg); color:var(--red); }
  .pe-seg-badge.green { background:var(--green-bg); color:var(--green); }
  .pe-seg-badge.muted { background:var(--gray-100); color:var(--text-muted); }
  .pe-seg-slider {
    position:absolute; height:calc(100% - 6px); border-radius:8px;
    background:var(--bg-card-hover); box-shadow:var(--shadow-sm);
    transition:left 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s;
    top:3px; z-index:0;
  }

  /* ── Detail Body ── */
  .pe-detail-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px 20px;
  }

  /* ── Reply Bar (Sticky) ── */
  .pe-reply-bar {
    flex-shrink:0; padding:10px 16px;
    background:var(--bg-card); backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border-top:1px solid var(--border);
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  .pe-reply-context {
    font-size:11px; color:var(--text-muted); margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
  }
  .pe-reply-input { display:flex; gap:8px; align-items:flex-end; }
  .pe-reply-input textarea {
    flex:1; padding:8px 12px; border:1px solid var(--border);
    border-radius:10px; font-size:13px; font-family:var(--font);
    background:var(--bg-input); color:var(--text); resize:none;
    min-height:36px; max-height:120px; outline:none;
    transition:border-color 0.2s;
  }
  .pe-reply-input textarea:focus { border-color:var(--brand); }
  .pe-reply-actions { display:flex; gap:4px; flex-shrink:0; }
  .pe-reply-send { min-height:36px; }
  /* Textprüfung: der Wrapper übernimmt das flex:1 des Textfeldes (js/bp-textpruefung.js) */
  .pe-reply-input .bpt-box { flex:1; min-width:0; }
  .pe-reply-input .bpt-box textarea { width:100%; }

  /* ── Schreibhilfe im Posteingang (js/bp-textpruefung.js) ──
     .bpt-hl liegt deckungsgleich ÜBER dem Textfeld, hat unsichtbaren Text und markiert die
     Stellen, an denen die korrigierte Fassung abweicht. Schrift/Polster/Rahmen kopiert
     bptEinrichten() per getComputedStyle vom Feld — hier bewusst KEINE Schriftangaben. */
  .bpt-box { display:flex; flex-direction:column; min-width:0; }
  .bpt-wrap { position:relative; }
  .bpt-wrap > textarea { display:block; position:relative; }
  .bpt-hl {
    position:absolute; inset:0; overflow:hidden; pointer-events:none;
    white-space:pre-wrap; overflow-wrap:break-word; word-break:normal;
    color:transparent; -webkit-text-fill-color:transparent;
    background:transparent; border-radius:inherit;
  }
  .bpt-m {
    background:rgba(249,115,22,0.20); background:color-mix(in srgb, var(--orange) 20%, transparent);
    box-shadow:inset 0 -2px 0 var(--orange);
    color:transparent; -webkit-text-fill-color:transparent; border-radius:2px;
  }
  /* Blaue Chat-Sprechblase („Bearbeiten"): normale Tönung wäre unsichtbar */
  .pe-message-admin .bpt-m { background:rgba(255,255,255,0.30); box-shadow:inset 0 -2px 0 #ffd08a; }

  /* Statuszeile über dem Feld — nimmt nur Platz, wenn sie etwas zu sagen hat */
  .bpt-bar { display:none; }
  .bpt-bar.an {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-bottom:4px; font-size:11px; color:var(--text-secondary);
  }
  .bpt-bar-txt { font-weight:600; }
  .bpt-bar-txt + .bpt-bar-txt::before { content:'·'; margin-right:8px; opacity:0.55; font-weight:400; }
  .bpt-bar-txt.hinweis { font-weight:500; color:var(--text-muted); }
  .bpt-bar-btn {
    border:1px solid var(--brand); background:var(--brand); color:#fff;
    border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600;
    cursor:pointer; font-family:inherit; line-height:1.6;
  }
  .bpt-bar-btn:hover { filter:brightness(1.08); }
  .bpt-bar-btn.still { background:none; color:var(--brand); }
  .pe-message-admin .bpt-bar.an { color:rgba(255,255,255,0.85); }
  .pe-message-admin .bpt-bar-btn { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); color:#fff; }

  /* Schreibhilfe-Karte unter dem Feld: die fertige Fassung, Änderungen hervorgehoben */
  .bpt-panel { display:none; }
  .bpt-panel.an {
    display:block; margin-top:6px; padding:10px 12px 12px;
    background:var(--bg-card); border:1px solid var(--border);
    border-left:3px solid var(--brand); border-radius:12px;
  }
  .bpt-panel-kopf { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .bpt-panel-titel {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--brand);
  }
  .bpt-chips { display:flex; gap:4px; flex-wrap:wrap; }
  .bpt-chip {
    border:1px solid var(--border); background:var(--bg-input); color:var(--text-secondary);
    border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600;
    cursor:pointer; font-family:inherit; line-height:1.6;
  }
  .bpt-chip.aktiv { background:var(--brand); border-color:var(--brand); color:#fff; }
  .bpt-panel-x {
    margin-left:auto; border:none; background:none; color:var(--text-muted);
    width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    font-family:inherit;
  }
  .bpt-panel-x:hover { color:var(--text); background:var(--bg-card-hover, rgba(0,0,0,0.05)); }
  .bpt-panel-text {
    font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap;
    word-break:break-word;
  }
  .bpt-panel-text .bpt-neu {
    background:rgba(28,160,90,0.16); background:color-mix(in srgb, var(--green, #1CA05A) 18%, transparent);
    color:inherit; border-radius:3px; padding:0 1px; font-weight:600;
    box-shadow:inset 0 -2px 0 var(--green, #1CA05A);
  }
  .bpt-panel-warte { font-size:12px; color:var(--text-muted); padding:4px 0; }
  /* Zur-Frage-Hinweis: das Modell hat Frage + Antwort gelesen und meint, die Antwort trifft
     die Frage nicht. Bernstein, damit er sich von den grünen Korrektur-Stellen abhebt. */
  .bpt-panel-frage {
    margin-top:8px; padding:7px 10px; border-radius:8px;
    background:rgba(224,147,28,0.12); background:color-mix(in srgb, var(--orange) 13%, transparent);
    border:1px solid rgba(224,147,28,0.35);
    font-size:12px; line-height:1.5; color:var(--text);
  }
  .bpt-panel-frage::before { content:'Zur Frage: '; font-weight:700; color:var(--orange); }
  .bpt-bar-txt.frage { color:var(--orange); font-weight:600; }
  .bpt-panel-fuss { display:flex; justify-content:flex-end; margin-top:10px; }
  /* In der blauen Sprechblase bleibt die Karte hell lesbar (eigener heller Kasten) */
  .pe-message-admin .bpt-panel.an { background:var(--bg-modal-solid, #fff); color:var(--text); }

  /* Sende-Dialog „Vor dem Senden korrigieren?" */
  .bpt-dlg-overlay {
    position:fixed; inset:0; z-index:12100; display:flex;
    align-items:center; justify-content:center; background:rgba(0,0,0,0.32);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .bpt-dlg {
    background:var(--bg-modal-solid, var(--bg-card)); border:1px solid var(--border);
    border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,0.22);
    width:min(640px, 92vw); max-height:80vh; display:flex; flex-direction:column;
    padding:18px 20px;
  }
  .bpt-dlg-kopf { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
  .bpt-dlg-sub { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
  .bpt-dlg .bpt-panel-text {
    overflow-y:auto; border:1px solid var(--border-light, var(--border));
    border-radius:10px; padding:10px 12px; background:var(--bg-input);
  }
  .bpt-dlg-fuss { display:flex; gap:10px; margin-top:14px; align-items:center; }
  .bpt-dlg-spalt { flex:1; }

  /* ── Spalte 3: PDF ── */
  .pe-pdf-col {
    width:0; flex-shrink:0; overflow:hidden;
    transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
    border-left:1px solid var(--border);
    display:flex; flex-direction:column; background:var(--bg-body);
  }
  .pe-pdf-col.open { width:520px; }
  /* Resize-Handle am linken Rand */
  .pe-pdf-resize {
    position:absolute; left:-3px; top:0; bottom:0; width:6px;
    cursor:col-resize; z-index:5;
    transition:background 0.15s;
  }
  .pe-pdf-resize:hover, .pe-pdf-resize.active {
    background:var(--brand); opacity:0.4;
  }
  .pe-pdf-col { position:relative; }
  .pe-pdf-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; border-bottom:1px solid var(--border);
    flex-shrink:0;
    background:var(--bg-card); backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
  }
  .pe-pdf-title {
    font-size:13px; font-weight:600; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; flex:1;
  }
  .pe-pdf-area { flex:1; overflow-y:auto; padding:12px; }
  .pe-pdf-area canvas { cursor:zoom-in; transition:opacity 0.15s; }
  .pe-pdf-area canvas:hover { opacity:0.92; }
  /* Fullscreen PDF Overlay */
  .pe-pdf-fullscreen {
    position:fixed; inset:0; z-index:9000;
    background:rgba(0,0,0,0.9);
    display:flex; flex-direction:column;
    animation:peFsIn 0.2s ease-out;
  }
  @keyframes peFsIn { from { opacity:0; } to { opacity:1; } }
  .pe-pdf-fs-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 24px; flex-shrink:0;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .pe-pdf-fs-title { color:rgba(255,255,255,0.7); font-size:13px; font-weight:500; }
  .pe-pdf-fs-close {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:none;
    color:white; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
  }
  .pe-pdf-fs-close:hover { background:rgba(255,255,255,0.25); }
  .pe-pdf-fs-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 0 40px;
  }
  .pe-pdf-fs-body canvas {
    display:block; margin:0 auto 4px; max-width:95vw;
    box-shadow:0 4px 24px rgba(0,0,0,0.5);
    border-radius:2px;
  }

  /* ── Badges (wiederverwendbar) ── */
  .pe-badge {
    font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; color:white;
    display:inline-block; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.12);
  }
  .pe-badge-green { background:linear-gradient(135deg, #30d158, #28b84d); }
  .pe-badge-red { background:linear-gradient(135deg, #ff453a, #e03e34); }
  .pe-badge-blue { background:linear-gradient(135deg, #0a84ff, #0070e0); }
  .pe-badge-orange { background:linear-gradient(135deg, #ff9f0a, #e08f09); }
  .pe-badge-yellow { background:linear-gradient(135deg, #ffd60a, #e6c009); color:#1a1d23; }
  .pe-badge-muted { background:var(--border); color:var(--text-muted); box-shadow:none; }

  /* ── Chat Messages ── */
  /* ── iMessage iOS 26 Style Bubbles ── */
  .pe-message {
    position:relative; max-width:65%; padding:10px 16px;
    font-size:15px; line-height:22px; letter-spacing:-0.3px;
    font-family:var(--font); border-radius:20px; border:none;
    word-wrap:break-word; margin-bottom:2px; box-shadow:none;
  }
  .pe-message-admin {
    margin-left:auto; margin-right:0;
    background:#0b93f6; color:#fff;
    border-radius:20px 20px 4px 20px;
  }
  .pe-message-pruefer {
    margin-right:auto; margin-left:0;
    background:#e5e5ea; color:#000;
    border-radius:20px 20px 20px 4px;
  }
  html.dark .pe-message-admin { background:#0a84ff; }
  html.dark .pe-message-pruefer { background:#38383a; color:#f5f5f7; }
  /* Tail (letztes Message einer Gruppe) */
  .pe-message-admin.pe-msg-tail::before {
    content:''; position:absolute; bottom:0; right:-7px;
    width:20px; height:20px; background:#0b93f6;
    border-bottom-left-radius:16px 14px;
  }
  .pe-message-admin.pe-msg-tail::after {
    content:''; position:absolute; bottom:0; right:-20px;
    width:20px; height:20px; background:var(--bg-body);
    border-bottom-left-radius:10px;
  }
  html.dark .pe-message-admin.pe-msg-tail::before { background:#0a84ff; }
  .pe-message-pruefer.pe-msg-tail::before {
    content:''; position:absolute; bottom:0; left:-7px;
    width:20px; height:20px; background:#e5e5ea;
    border-bottom-right-radius:16px 14px;
  }
  .pe-message-pruefer.pe-msg-tail::after {
    content:''; position:absolute; bottom:0; left:-20px;
    width:20px; height:20px; background:var(--bg-body);
    border-bottom-right-radius:10px;
  }
  html.dark .pe-message-pruefer.pe-msg-tail::before { background:#38383a; }
  /* Ohne Tail → rund */
  .pe-message:not(.pe-msg-tail) { border-radius:20px; }
  /* Abstand bei Sender-Wechsel */
  .pe-msg-gap { margin-top:12px; }
  /* Sender-Name */
  .pe-msg-sender { font-size:12px; font-weight:500; color:var(--text-muted); margin-bottom:2px; margin-left:4px; }
  .pe-msg-sender-right { text-align:right; margin-right:24px; margin-left:0; }
  /* Meta */
  .pe-message-meta { font-size:11px; margin-top:3px; letter-spacing:0; font-weight:400; }
  .pe-message-admin .pe-message-meta { color:rgba(255,255,255,0.55); }
  .pe-message-pruefer .pe-message-meta { color:rgba(0,0,0,0.35); }
  html.dark .pe-message-pruefer .pe-message-meta { color:rgba(255,255,255,0.4); }
  /* Links */
  .pe-message-admin a { color:#fff; text-decoration:underline; }
  .pe-message-pruefer a { color:var(--brand); }
  /* Nachricht-Menü: Rechtsklick bzw. langer Druck auf eine Sprechblase.
     Bewusst KEIN Hover-Einblenden mehr — das liess den Verlauf bei jeder
     Mausbewegung nach unten rutschen (siehe _peMsgMenuOpen in bptracking.js). */
  #peMsgMenu {
    position:fixed; z-index:11000; min-width:140px; padding:4px;
    display:flex; flex-direction:column;
    background:var(--bg-modal-solid, var(--bg-card)); border:0.5px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow-lg);
  }
  #peMsgMenu button {
    border:none; background:none; cursor:pointer; text-align:left;
    padding:7px 12px; border-radius:7px; font-size:13px;
    font-family:var(--font); color:var(--text);
  }
  #peMsgMenu button:hover { background:var(--bg-card-hover); }
  #peMsgMenu button.danger { color:var(--red); }

  /* Stichwortsuche im Rückfragen-Reiter */
  .pe-fragen-suche {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
    padding:6px 10px; border:1px solid var(--border); border-radius:10px;
    background:var(--bg-input); color:var(--text-muted);
  }
  .pe-fragen-suche input {
    flex:1; min-width:0; border:none; background:none; outline:none;
    font-size:12px; font-family:var(--font); color:var(--text);
  }
  .pe-fragen-suche-zahl { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
  .pe-fragen-suche-tipp { font-size:10px; color:var(--text-muted); white-space:nowrap; }
  @media(max-width:700px){ .pe-fragen-suche-tipp { display:none; } }

  /* ── Question Card ── */
  .pe-question {
    margin-bottom:12px; border-radius:14px; overflow:hidden;
    border:1px solid var(--border);
    background:linear-gradient(160deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transition:border-color 0.2s;
  }
  html.dark .pe-question { background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); }
  .pe-question.pe-open { border-color:rgba(255,69,58,0.3); }
  .pe-question-header {
    padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px;
    background:rgba(0,0,0,0.015);
  }
  html.dark .pe-question-header { background:rgba(255,255,255,0.02); }
  .pe-question.pe-open .pe-question-header { background:rgba(255,69,58,0.03); }

  /* ── Person Cards ── */
  .pe-person-card {
    padding:12px 14px; border-radius:12px; margin-bottom:6px;
    background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
    border:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    transition:all 0.15s;
  }
  html.dark .pe-person-card { background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); }
  .pe-person-card:hover { background:rgba(0,0,0,0.02); }
  html.dark .pe-person-card:hover { background:rgba(255,255,255,0.04); }
  .pe-person-avatar {
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:white; flex-shrink:0;
    background:linear-gradient(135deg, var(--accent), #5856d6);
  }
  .pe-person-avatar.approved { background:linear-gradient(135deg, #30d158, #28b84d); }
  .pe-person-avatar.sent { background:linear-gradient(135deg, #0a84ff, #0070e0); }
  .pe-person-avatar.viewed { background:linear-gradient(135deg, #5ac8fa, #32ade6); }
  .pe-avatar-wrap { position:relative; flex-shrink:0; }
  .pe-online-dot {
    position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
    background:#30d158; border:2px solid var(--bg-card);
  }

  /* ── Icon Buttons ── */
  .pe-icon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--text-muted); cursor:pointer;
    transition:all 0.15s; flex-shrink:0;
  }
  .pe-icon-btn:hover { background:var(--bg-card-hover); color:var(--text); border-color:var(--accent); }
  .pe-icon-btn:active { transform:scale(0.92); }
  .pe-icon-btn.danger:hover { color:#ff453a; border-color:#ff453a; }

  /* ── Beleg Button ── */
  .pe-beleg-btn {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px;
    background:var(--accent); color:white; border:none; cursor:pointer;
    transition:all 0.2s; text-decoration:none;
  }
  .pe-beleg-btn:hover { filter:brightness(1.1); }
  .pe-beleg-btn svg { flex-shrink:0; }

  /* ── Facilioo Icon ── */
  .pe-facilioo-icon {
    display:inline-flex; align-items:center; gap:3px; vertical-align:middle;
    text-decoration:none; padding:2px 6px; border-radius:6px;
    background:rgba(10,132,255,0.08); transition:background 0.2s;
  }
  .pe-facilioo-icon:hover { background:rgba(10,132,255,0.15); }

  /* ── Timeline Dot ── */
  .pe-timeline-dot {
    width:12px; height:12px; border-radius:50%; flex-shrink:0;
    position:absolute; left:-22px; top:4px;
    border:2px solid var(--bg-body); box-shadow:0 1px 3px rgba(0,0,0,0.1);
  }

  /* ── Danger Zone ── */
  .pe-danger-zone {
    margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,69,58,0.15);
  }

  /* ═══ RESPONSIVE: iPad (768–1024px) ═══ */
  @media (min-width:769px) and (max-width:1024px) {
    .pe-list-col { width:260px; }
    .pe-pdf-col.open {
      position:absolute; right:0; top:0; bottom:0;
      width:55%; z-index:10;
      box-shadow:-8px 0 32px rgba(0,0,0,0.12);
    }
    .pe-detail-body { padding:14px 16px; }
    .pe-segmented { margin:10px 16px; }
  }

  /* ═══ RESPONSIVE: iPhone (< 768px) ═══ */
  @media (max-width:768px) {
    .pe-layout { position:relative; }
    .pe-list-col { width:100%; border-right:none; }
    .pe-detail-col {
      position:absolute; inset:0;
      transform:translateX(100%);
      transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
      z-index:2;
    }
    .pe-layout.detail-open .pe-detail-col { transform:translateX(0); }
    .pe-back-btn { display:inline-flex; }
    .pe-pdf-col {
      position:absolute; inset:0; width:100% !important;
      transform:translateX(100%);
      transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
      z-index:3;
    }
    .pe-pdf-col.open { transform:translateX(0); width:100% !important; }
    .pe-search { font-size:16px !important; padding:10px 12px 10px 36px; }
    .pe-obj-row { min-height:56px; }
    .pe-seg { padding:10px 6px; font-size:11px; min-height:40px; }
    .pe-detail-header { padding:12px 14px; }
    .pe-detail-body { padding:12px 14px; }
    .pe-reply-input textarea { font-size:16px !important; }
  }

  /* ═══ RESPONSIVE: Small phones (< 400px) ═══ */
  @media (max-width:400px) {
    .pe-list-header { padding:10px 10px 8px; }
    .pe-obj-row { padding:10px 10px; gap:8px; }
    .pe-seg { padding:8px 4px; font-size:10px; }
  }

  /* ═══ RESPONSIVE: Desktop 1080p (1024–1800px) ═══ */
  @media (min-width:1024px) and (max-width:1800px) {
    .pe-list-col { width:300px; }
    .pe-list-header { padding:16px 16px 12px; }
    .pe-search { padding:9px 12px 9px 36px; font-size:13px; }
    .pe-obj-row { padding:14px 16px; }
    .pe-obj-name { font-size:14px; }
    .pe-obj-meta { font-size:11px; }
    .pe-obj-preview { font-size:11px; }
    .pe-detail-header { padding:18px 24px; }
    .pe-detail-title h3 { font-size:18px; }
    .pe-detail-title .pe-detail-sub { font-size:12px; }
    .pe-segmented { margin:14px 24px; padding:3px; }
    .pe-seg { padding:9px 14px; font-size:12px; }
    .pe-detail-body { padding:18px 24px; max-width:none; }
    .pe-message { max-width:75%; }
    .pe-question { margin-bottom:14px; border-radius:14px; }
    .pe-question-header { padding:14px 18px; }
    .pe-person-card { padding:14px 18px; gap:14px; border-radius:14px; }
    .pe-person-avatar { width:40px; height:40px; font-size:14px; }
    .pe-icon-btn { width:32px; height:32px; }
    .pe-badge { padding:4px 12px; font-size:10px; }
    .pe-reply-bar { padding:12px 24px; }
    .pe-reply-input textarea { font-size:14px; padding:10px 14px; min-height:40px; }
    .pe-reply-send { min-height:40px; padding:8px 18px !important; font-size:13px !important; }
    .pe-pdf-col.open { width:520px; }
    .pe-pdf-area { padding:16px; }
  }

  /* ═══ RESPONSIVE: Large displays (> 1800px) ═══ */
  @media (min-width:1800px) {
    /* ── Liste: etwas breiter ── */
    .pe-list-col { width:340px; }
    .pe-list-header { padding:18px 18px 12px; }
    .pe-search { padding:11px 14px 11px 40px; font-size:14px; border-radius:12px; }
    .pe-search-icon { width:18px; height:18px; left:12px; }
    .pe-quick-filters { margin-bottom:12px; border-radius:11px; padding:3px; }
    .pe-pill { padding:7px 6px; font-size:12px; }
    .pe-obj-row { padding:14px 18px; gap:12px; }
    .pe-obj-name { font-size:15px; }
    .pe-obj-meta { font-size:12px; }
    .pe-obj-preview { font-size:12px; }
    .pe-done-toggle { padding:12px 18px; font-size:13px; }

    /* ── Detail ── */
    .pe-detail-header { padding:22px 36px; gap:16px; }
    .pe-detail-title h3 { font-size:22px; letter-spacing:-0.02em; }
    .pe-detail-title .pe-detail-sub { font-size:13px; margin-top:3px; }
    .pe-detail-badges .pe-badge { padding:5px 14px; font-size:11px; }

    /* Tabs als Underline-Tabs (besser bei großer Breite) */
    .pe-segmented {
      margin:0; padding:0 36px; border-radius:0; border:none;
      border-bottom:1px solid var(--border-light); background:transparent;
    }
    .pe-seg { padding:12px 22px; font-size:13px; border-radius:0; position:relative; }
    .pe-seg:hover { background:rgba(0,0,0,0.02); }
    .pe-seg.active { background:transparent; color:var(--accent); font-weight:700; }
    .pe-seg.active::after {
      content:''; position:absolute; bottom:-1px; left:8px; right:8px;
      height:2.5px; background:var(--accent); border-radius:2px 2px 0 0;
    }
    .pe-seg-badge { font-size:10px; padding:2px 7px; }
    .pe-seg-slider { display:none; }

    .pe-detail-body { padding:24px 36px; }

    /* ── Chat ── */
    .pe-message { font-size:15px; padding:12px 18px; max-width:60%; }
    .pe-message-meta { font-size:11px; }
    .pe-question { margin-bottom:16px; border-radius:16px; }
    .pe-question-header { padding:16px 20px; }

    /* ── Personen ── */
    .pe-person-card { padding:16px 22px; gap:16px; border-radius:14px; margin-bottom:10px; }
    .pe-person-avatar { width:44px; height:44px; font-size:15px; }
    .pe-icon-btn { width:34px; height:34px; border-radius:9px; }
    .pe-badge { padding:4px 12px; font-size:11px; }
    .pe-beleg-btn { font-size:12px; padding:6px 14px; }

    /* ── Reply-Bar ── */
    .pe-reply-bar { padding:14px 36px; }
    .pe-reply-context { font-size:12px; }
    .pe-reply-input textarea { font-size:14px; padding:11px 16px; min-height:42px; border-radius:12px; }
    .pe-reply-send { min-height:42px; padding:10px 22px !important; font-size:13px !important; border-radius:10px !important; }

    /* ── PDF ── */
    .pe-pdf-col.open { width:620px; }
    .pe-pdf-title { font-size:14px; }

    /* ── Sonstiges ── */
    .pe-danger-zone { margin-top:24px; padding-top:16px; }
    .pe-empty-state { padding:60px 24px; }
    .pe-empty-state svg { width:52px; height:52px; }
    .pe-empty-state p { font-size:15px; }
  }

  /* ═══ RESPONSIVE: Ultra-wide (> 2560px) ═══ */
  @media (min-width:2560px) {
    .pe-list-col { width:380px; }
    .pe-detail-header { padding:24px 44px; }
    .pe-segmented { padding:0 44px; }
    .pe-detail-body { padding:28px 44px; }
    .pe-reply-bar { padding:16px 44px; }
    .pe-pdf-col.open { width:720px; }
  }

  /* === WEG Overview — Liquid Glass === */
  .weg-toolbar {
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    padding:14px 18px; margin-bottom:16px;
    background:linear-gradient(160deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.15) 100%);
    backdrop-filter:blur(28px) saturate(1.5);
    -webkit-backdrop-filter:blur(28px) saturate(1.5);
    border:none; outline:1px solid rgba(255,255,255,0.25); outline-offset:-1px;
    border-radius:16px;
    box-shadow:0 2px 8px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  html.dark .weg-toolbar {
    background:linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
    outline-color:rgba(255,255,255,0.07);
    box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .weg-kpis {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px;
  }
  .weg-kpi {
    padding:16px 18px; border-radius:16px; text-align:center;
    background:linear-gradient(160deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 100%);
    backdrop-filter:blur(28px) saturate(1.5);
    -webkit-backdrop-filter:blur(28px) saturate(1.5);
    border:none; outline:1px solid rgba(255,255,255,0.25); outline-offset:-1px;
    box-shadow:0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35);
    transition:all 0.3s cubic-bezier(0.2,0,0,1);
  }
  html.dark .weg-kpi {
    background:linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    outline-color:rgba(255,255,255,0.06);
    box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .weg-kpi:hover { transform:translateY(-2px); }
  .weg-kpi-val { font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
  .weg-kpi-label { font-size:11px; color:var(--text-muted); margin-top:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }


  /* Responsive WEG — Tablet */
  @media (max-width:1024px) {
    .weg-toolbar { flex-wrap:wrap; }
    .weg-toolbar select { min-width:100px; font-size:12px; }
  }
  /* Responsive WEG — iPhone */
  @media (max-width:768px) {
    .weg-kpis { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .weg-kpi { padding:10px 12px; border-radius:12px; }
    .weg-kpi-val { font-size:20px; }
    .weg-kpi-label { font-size:9px; }
    .weg-toolbar {
      padding:10px 12px; gap:6px; border-radius:12px;
      flex-direction:column; align-items:stretch;
    }
    .weg-toolbar > div[style*="margin-left:auto"] { margin-left:0 !important; justify-content:space-between; }
    .weg-toolbar input, .weg-toolbar select { width:100% !important; min-width:0 !important; max-width:none !important; font-size:13px; }
    /* Tabelle nutzt bestehende .data-table Mobile-Styles (weiter unten) */
  }
  /* Sehr kleine Bildschirme */
  @media (max-width:400px) {
    .weg-kpis { grid-template-columns:repeat(2, 1fr); gap:6px; }
    .weg-kpi { padding:8px 10px; }
    .weg-kpi-val { font-size:18px; }
  }
  @media (min-width:1800px) {
    .weg-kpi-val { font-size:34px; }
  }

  /* Porto-Optimierung: seit 03.10.2026 in css/porto.css */

  /* === PDF unterschreiben Page ===
     Paket B/C (27.09.2026): tote Regeln der alten Tabellenansicht entfernt (.ps-info-*, .ps-card*,
     .ps-table*, .ps-signer-dot*, .ps-file-pill, .ps-date-*, .ps-title-link, .ps-action-done) und
     die Knöpfe auf Tokens gebracht, damit Hell/Dunkel ohne html.dark-Doppel auskommt. */
  .ps-card-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; }
  .ps-btn-outline { display:inline-flex; align-items:center; gap:6px; height:40px; background:var(--bg-card); border:1px solid var(--border-strong); color:var(--text); border-radius:11px; padding:0 16px; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.15s, border-color 0.15s; font-family:inherit; }
  .ps-btn-outline:hover { background:var(--bg-card-hover); }
  .ps-btn-primary-page { display:inline-flex; align-items:center; gap:6px; height:40px; background:var(--primary); color:#fff; border:none; border-radius:11px; padding:0 18px; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.15s; font-family:inherit; }
  .ps-btn-primary-page:hover { background:var(--primary-hover); }
  .ps-badge-done { display:inline-flex; align-items:center; gap:4px; background:#DCFCE7; color:#14532D; border:1px solid #86EFAC; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
  .ps-badge-draft { display:inline-flex; align-items:center; gap:4px; background:#FEF9C3; color:#713F12; border:1px solid #FDE047; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
  .ps-badge-active { display:inline-flex; align-items:center; gap:4px; background:#DBEAFE; color:#1E3A8A; border:1px solid #93C5FD; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
  .ps-badge-cancelled { display:inline-flex; align-items:center; gap:4px; background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
  .ps-action-start { background:var(--primary); color:#fff; border:none; border-radius:6px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
  .ps-action-start:hover { background:var(--primary-hover); }
  .ps-action-delete { background:none; border:none; color:var(--red-text); font-size:13px; cursor:pointer; margin-left:12px; font-family:inherit; padding:4px; }
  .ps-action-delete:hover { text-decoration:underline; }
  .ps-action-resend { background:none; border:1px solid var(--border-strong); color:var(--text); border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; transition:all 0.15s; font-family:inherit; margin-right:8px; }
  .ps-action-resend:hover { border-color:var(--brand-text); color:var(--brand-text); }
  .ps-signer-count { font-size:11px; color:var(--text-muted); margin-top:2px; }
  /* Dark mode for Protokoll page */
  html.dark #bpRetryBanner { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.2); }
  html.dark #bpRetryBanner span { color:#FCA5A5; }
  html.dark .ps-badge-done { background:rgba(34,197,94,0.15); color:#4ADE80; border-color:rgba(34,197,94,0.3); }
  html.dark .ps-badge-draft { background:rgba(234,179,8,0.15); color:#FACC15; border-color:rgba(234,179,8,0.3); }
  html.dark .ps-badge-active { background:rgba(59,130,246,0.15); color:#60A5FA; border-color:rgba(59,130,246,0.3); }
  html.dark .ps-badge-cancelled { background:rgba(239,68,68,0.15); color:#F87171; border-color:rgba(239,68,68,0.3); }


/* ── PDF-signieren Redesign (2026-06-30) ───────────────────────────── */
@keyframes psFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes psExpand { from { opacity:.4; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.ps-toolbar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.ps-toolbar-actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ps-page-title { font-size:23px; font-weight:800; letter-spacing:-0.03em; margin:0 0 4px; color:var(--text); }
.ps-select {
  height:40px; padding:0 32px 0 13px; font:inherit; font-size:13px; font-weight:600;
  color:var(--text-secondary,#475569); background:var(--bg-card,#fff);
  border:1px solid var(--border,#e5e7eb); border-radius:11px; cursor:pointer; outline:none;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center;
}
.ps-select.active { color:var(--text,#0f172a); border-color:var(--brand,#07a1e2); }
.ps-search { display:flex; align-items:center; gap:8px; height:40px; width:210px; padding:0 12px;
  background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:11px; color:var(--text-muted,#94a3b8); }
.ps-search:focus-within { border-color:var(--brand,#07a1e2); }
.ps-search input { border:none; background:transparent; outline:none; font:inherit; font-size:13px; color:var(--text,#0f172a); width:100%; }
/* Tastatur-Fokus sichtbar (Paket B/C 27.09.2026); :focus-within am Suchfeld, weil das Eingabefeld
   selbst randlos in der Hülle sitzt. */
.ps-select:focus-visible, .ps-chip:focus-visible, .ps-btn-outline:focus-visible, .ps-btn-primary-page:focus-visible,
.ps-btn-ghost:focus-visible, .ps-btn-danger:focus-visible, .ps-chev:focus-visible, .ps-done-toggle:focus-visible,
.ps-doc-main:focus-visible { outline:none; box-shadow:var(--ring); }
.ps-search:has(input:focus-visible) { box-shadow:var(--ring); }
.ps-search input::-webkit-search-cancel-button { cursor:pointer; }
/* „+ Neues Dokument": Auswahlmenü */
.ps-newdoc-menu { position:absolute; right:0; top:100%; margin-top:4px; background:var(--surface-solid); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--pop-shadow); min-width:220px; z-index:100; overflow:hidden; }
.ps-newdoc-head { padding:8px 16px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.ps-newdoc-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; border:none; background:transparent;
  font:inherit; font-size:14px; color:var(--text); text-align:left; cursor:pointer; white-space:nowrap; }
.ps-newdoc-item:hover, .ps-newdoc-item:focus-visible { background:var(--hover); outline:none; }
.ps-newdoc-item:focus-visible { box-shadow:inset 3px 0 0 var(--brand); }

.ps-chips { display:flex; gap:9px; margin-bottom:16px; flex-wrap:wrap; }
.ps-chip { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:99px; cursor:pointer; color:var(--text-secondary,#475569);
  background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb); transition:box-shadow .2s,border-color .2s; }
.ps-chip .ps-chip-dot { width:8px; height:8px; border-radius:50%; }
.ps-chip .ps-chip-count { font-weight:700; opacity:.6; }
.ps-chip.active { color:var(--text,#0f172a); border-color:transparent; box-shadow:0 0 0 1.5px var(--brand,#07a1e2); }

.ps-colhead { display:flex; align-items:center; gap:18px; padding:0 22px 11px; font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted,#94a3b8); }
.ps-colhead .c-status { width:172px; flex-shrink:0; }
.ps-colhead .c-signers { width:124px; flex-shrink:0; }
.ps-colhead .c-date { width:104px; flex-shrink:0; text-align:right; }
.ps-colhead .c-actions { width:190px; flex-shrink:0; text-align:right; }
.ps-colhead .c-chev { width:18px; flex-shrink:0; }

.ps-list { display:flex; flex-direction:column; gap:10px; }
.ps-doc { position:relative; background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb);
  border-radius:16px; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08)); overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s; animation:psFadeUp .35s both; }
.ps-doc:hover { transform:translateY(-2px); box-shadow:var(--shadow-md,0 12px 28px rgba(0,0,0,.14)); border-color:var(--brand,#07a1e2); }
.ps-doc-accent { position:absolute; left:0; top:0; bottom:0; width:4px; }
.ps-doc-main { display:flex; align-items:center; gap:18px; padding:16px 22px 16px 26px; cursor:pointer; }
.ps-doc-head { display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap; }
/* Typ-Abzeichen: getönte Fläche + farbige Schrift statt 9px Weiß auf Farbe (Kontrast, 27.09.2026) */
.ps-type-badge { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:5px; }
.ps-type-protokoll { color:var(--brand-text); background:var(--brand-tint); }
.ps-type-sepa-transfer { color:var(--violet); background:var(--violet-bg); }
.ps-type-verwaltervertrag { color:var(--teal-text); background:var(--teal-tint); }
.ps-type-allgemein { color:var(--text-secondary); background:var(--surface-2); }
.ps-doc-title { font-size:14.5px; font-weight:650; letter-spacing:-.01em; color:var(--text,#0f172a); overflow-wrap:anywhere; }
/* Status-Abzeichen in der Karte (vorher Inline-Stile) */
.ps-badge-changes, .ps-badge-followup, .ps-badge-versand { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:99px; white-space:nowrap; border:1px solid transparent; }
.ps-badge-changes { color:var(--orange-text); background:var(--orange-tint); border-color:var(--orange); }
.ps-badge-followup { color:var(--red-text); background:var(--red-tint); border-color:var(--red); }
.ps-badge-versand { margin-left:6px; }
.ps-badge-versand-ok { color:var(--green-text); background:var(--green-tint); }
.ps-badge-versand-offen { color:var(--clr-warn-text); background:var(--clr-warn-bg); border-color:var(--clr-warn-border); }
.ps-badge-versand.klickbar { cursor:pointer; }
/* Unterzeichner-Status für Avatare und Chips: getönt statt Weiß auf Grün/Blau (Kontrast) */
.ps-st-signed { color:var(--green-text); background:var(--green-tint); }
.ps-st-invited { color:var(--brand-text); background:var(--brand-tint); }
.ps-st-pending { color:var(--text-muted); background:var(--surface-2); }
.ps-st-no-signature { color:var(--clr-warn-text); background:var(--clr-warn-bg); }
.ps-doc-addr { font-size:12.5px; color:var(--text-secondary,#475569); margin-bottom:9px; }
.ps-doc-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ps-meta-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted,#94a3b8);
  background:var(--bg-input,#f8fafc); border:1px solid var(--border,#e5e7eb); padding:3px 8px; border-radius:7px; max-width:300px; }
.ps-meta-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-doc-col-doc { flex:1; min-width:0; }
.ps-doc-status { width:172px; flex-shrink:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.ps-doc-signers { width:124px; flex-shrink:0; }
.ps-avatars { display:flex; gap:5px; margin-bottom:6px; }
.ps-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; box-shadow:0 0 0 2px var(--bg-card,#fff); } /* Farbe: .ps-st-* */
.ps-doc-date { width:104px; flex-shrink:0; text-align:right; }
.ps-doc-date .d-main { font-size:12.5px; font-weight:600; color:var(--text,#0f172a); }
.ps-doc-date .d-rel { font-size:11px; color:var(--text-muted,#94a3b8); margin-top:2px; }
.ps-doc-actions { width:190px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.ps-chev { width:18px; flex-shrink:0; color:var(--text-muted,#94a3b8); transition:transform .3s;
  padding:0; border:none; background:transparent; font:inherit; cursor:pointer; display:flex; border-radius:8px; }
.ps-chev.open { transform:rotate(180deg); }

.ps-expand { padding:6px 26px 22px; border-top:1px solid var(--border,#e5e7eb); animation:psExpand .25s both; }
.ps-expand-head { display:flex; align-items:center; gap:14px; margin:16px 0 14px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted,#94a3b8); }
.ps-expand-head .line { flex:1; height:1px; background:var(--border,#e5e7eb); }
.ps-signer-row { display:flex; align-items:center; gap:13px; background:var(--bg-input,#f8fafc);
  border:1px solid var(--border,#e5e7eb); border-radius:13px; padding:11px 15px; margin-bottom:8px; }
.ps-signer-row .s-text { flex:1; min-width:0; }
.ps-signer-row .s-name { font-size:13.5px; font-weight:650; color:var(--text,#0f172a); }
.ps-signer-row .s-sub { font-size:11.5px; color:var(--text-muted,#94a3b8); margin-top:1px; overflow-wrap:anywhere; }
.ps-signer-chip { font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px; flex-shrink:0; }
.ps-link-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11.5px; font-weight:600;
  color:var(--text-secondary,#475569); background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb);
  padding:5px 11px; border-radius:9px; cursor:pointer; flex-shrink:0; }
.ps-link-btn:hover { color:var(--brand,#07a1e2); border-color:var(--brand,#07a1e2); }
.ps-expand-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

.ps-done-toggle { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none;
  cursor:pointer; font:inherit; color:var(--text,#0f172a); padding:6px 4px; text-align:left; margin-top:26px; }
.ps-done-toggle .t-chev { display:flex; color:var(--text-muted,#94a3b8); transition:transform .3s; }
.ps-done-toggle .t-chev.open { transform:rotate(90deg); }

.ps-confirm-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(2,6,16,.55); backdrop-filter:blur(4px); animation:psExpand .18s both; }
.ps-confirm { width:460px; max-width:100%; background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; }
.ps-confirm-body { padding:26px 28px 22px; }
.ps-confirm-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ps-confirm-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 28px; border-top:1px solid var(--border,#e5e7eb); }
.ps-btn-danger { font:inherit; font-size:13px; font-weight:700; color:#fff; background:var(--red,#dc2626); border:none;
  padding:10px 22px; border-radius:11px; cursor:pointer; }
.ps-btn-ghost { font:inherit; font-size:13px; font-weight:600; color:var(--text-secondary,#475569);
  background:var(--bg-input,#f8fafc); border:1px solid var(--border,#e5e7eb); padding:10px 20px; border-radius:11px; cursor:pointer; }
.ps-action-changes { background:none; border:1px solid var(--orange,#f59e0b); color:var(--orange,#d97706); border-radius:6px;
  padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ps-action-changes:hover { background:var(--orange-bg,#fff7ed); }

/* ── PDF-signieren: Responsive (iPad/Tablet/Telefon, 2026-07-16) ─────
   Die Karten-Zeile braucht ~750px feste Spalten; mit sichtbarer Sidebar bleibt auf dem iPad
   dafür kein Platz. Unter 1200px wird die Zeile deshalb zur gestapelten Karte. */
@media (max-width:1440px) {
  .ps-doc-main { gap:12px; padding:14px 16px 14px 20px; }
  .ps-colhead { gap:12px; padding:0 16px 10px; }
  .ps-colhead .c-status, .ps-doc-status { width:148px; }
  .ps-colhead .c-signers, .ps-doc-signers { width:110px; }
  .ps-colhead .c-date, .ps-doc-date { width:84px; }
  .ps-colhead .c-actions, .ps-doc-actions { width:150px; }
}
@media (max-width:1200px) {
  .ps-colhead { display:none; }
  .ps-doc-main { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; align-items:start; }
  .ps-doc-col-doc { grid-column:1; grid-row:1; }
  .ps-doc-addr { margin-bottom:7px; }
  .ps-chev { grid-column:2; grid-row:1; width:40px; height:40px; margin:-8px -8px 0 8px;
    display:flex; align-items:center; justify-content:center; border-radius:10px; }
  .ps-doc-status { grid-column:1 / -1; grid-row:2; width:auto;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
  .ps-doc-signers { grid-column:1; grid-row:3; width:auto;
    display:flex; align-items:center; gap:10px; margin-top:12px; }
  .ps-doc-signers .ps-avatars { margin-bottom:0; }
  .ps-doc-signers .ps-signer-count { margin-top:0; }
  .ps-doc-date { grid-column:2; grid-row:3; width:auto; margin-top:12px; align-self:center; }
  .ps-doc-actions { grid-column:1 / -1; grid-row:4; width:auto;
    flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center;
    gap:8px; margin-top:12px; }
  .ps-action-delete { margin-left:0; }
  .ps-action-resend { margin-right:0; }
  .ps-expand { padding:4px 20px 18px; }
  /* Toolbar: Filter + Suche in eigener Zeile unter dem Titel, Suche wächst */
  .ps-toolbar-actions { margin-left:0; width:100%; justify-content:flex-start; }
  .ps-search { flex:1 1 180px; width:auto; min-width:150px; }
}
/* ── Vermerk-Dialog („Vermerk ohne Unterschrift") ────────────────────────────
   Gleiche Anatomie wie die Nachbardialoge des Moduls: Kopfzeile, scrollbarer
   Rumpf, Fußzeile mit der Hauptaktion rechts. Farben und Staffel aus den
   globalen Tokens, damit Hell und Dunkel automatisch mitgehen. */
/* ⚠ Über die Overlay-ID adressiert, NICHT als reine Klasse: die Basisregel `.modal { width:480px }`
   steht weiter unten in dieser Datei, hat dieselbe Spezifität und würde als spätere Regel gewinnen.
   Die Nachbardialoge des Moduls setzen ihre Breite deshalb inline; hier reicht die ID. */
#psVermerkOverlay .ps-vm-modal { width:min(94vw,760px); max-height:92vh; display:flex; flex-direction:column; }
.ps-vm-head { padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:12px; }
.ps-vm-head h3 { margin:0; font-size:16px; font-weight:700; flex:1; }
.ps-vm-step { font-size:11.5px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.ps-vm-body { padding:18px 22px; overflow-y:auto; }
.ps-vm-lead { margin:0 0 16px; font-size:13.5px; line-height:1.55; color:var(--text-secondary,#475569); }
.ps-vm-foot { padding:13px 22px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.ps-vm-foot .sp { flex:1; }
/* Auswahl: eine Zeile pro Person bzw. pro Grund, Zusatzzeile erklärt die Herkunft */
.ps-vm-pick { display:flex; flex-direction:column; gap:8px; }
.ps-vm-pick button { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-height:44px; text-align:left; padding:9px 14px; }
.ps-vm-pick .nm { font-size:13.5px; font-weight:650; }
.ps-vm-pick .hint { font-size:11.5px; font-weight:400; color:var(--text-muted); }
/* Seiten-Vorschau in Schritt 3: das echte Protokoll mit dem Kästchen darauf. Der Rahmen ist ein
   Ausschnitt-Fenster, das auf den Unterschriftenblock scrollt — die ganze A4-Seite in Dialogbreite
   macht den Block zu klein, um eine Position zu beurteilen. Das Blatt innen trägt die Maße der
   gerenderten Seite und ist die Bezugsgröße fürs Ziehen. */
.ps-vm-seite { border:1px solid var(--border); border-radius:var(--radius-sm,10px);
  overflow:auto; max-height:min(52vh,430px); background:#fff; overscroll-behavior:contain; }
.ps-vm-blatt { position:relative; }
.ps-vm-seite canvas { width:100%; display:block; }
/* Das Kästchen IST das Unterschriftsfeld und damit so hoch wie eines: gedruckt wird nur ein Satz
   nahe der Unterkante. Deshalb Fläche und Rahmen zurückhaltend (das Feld ist Werkzeug, nicht
   Ergebnis) und der Satz einzeilig linksbündig an genau der Höhe, die das PDF setzt. Den Abstand
   zur Unterkante rechnet _psVermerkSeiteRendern maßstabsgetreu aus der Anhebung im PDF aus, die
   Linie im Dokument selbst ist der Bezugspunkt. */
.ps-vm-kasten { position:absolute; border:1px dashed var(--brand,#07a1e2);
  background:rgba(7,161,226,0.07); cursor:grab; touch-action:none;
  display:flex; align-items:flex-end; justify-content:flex-start;
  font-size:11px; font-weight:600; line-height:1.15; white-space:nowrap;
  color:var(--brand,#07a1e2); }
.ps-vm-kasten:active { cursor:grabbing; }
.ps-vm-hint { margin:10px 0 0; font-size:11.5px; color:var(--text-muted); }
/* Vorhandene Vermerke werden im Dialog selbst verwaltet (ändern/entfernen), statt auf eine andere
   Stelle zu verweisen. Warn-Tokens, weil ein Vermerk ein Ausnahmezustand des Vorgangs ist. */
.ps-vm-sub { font-size:11.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 8px; }
.ps-vm-liste { display:flex; flex-direction:column; gap:8px; }
.ps-vm-eintrag { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--clr-warn-bg); border:1px solid var(--clr-warn-border); border-radius:12px;
  padding:10px 14px; }
.ps-vm-eintrag-txt { flex:1; min-width:190px; display:flex; flex-direction:column; gap:1px; }
.ps-vm-eintrag .nm { font-size:13.5px; font-weight:650; color:var(--clr-warn-text); }
.ps-vm-eintrag .satz { font-size:11.5px; color:var(--clr-warn-text); opacity:0.85; }
.ps-vm-fix { font-size:11.5px; color:var(--clr-warn-text); opacity:0.8; }

/* Modul-Modals: den globalen iPad-Deckel (.modal max-width:480px bei ≤1024px) aufheben —
   Detail-, Erstell- und SEPA-Dialoge sind auf Tablet-Breite ausgelegt. Der Vermerk-Dialog
   zeigt in Schritt 3 eine PDF-Seite, auf 480px wäre die unbrauchbar. */
@media (min-width:768px) and (max-width:1024px) {
  #psCreateOverlay .modal, #psDetailOverlay .modal, #psEditOverlay .modal,
  #psMailOverlay .modal, #sepaCreateOverlay .modal, #sepaPreviewOverlay .modal,
  #sepaRechnungPreviewOverlay .modal, #psEmailDraftsOverlay .modal,
  #psVersandManuellOverlay .modal, #psVermerkOverlay .modal { max-width:92vw; }
}
@media (max-width:767px) {
  .ps-page-title { font-size:20px; }
  .ps-select { flex:1 1 calc(50% - 5px); min-width:0; }
  .ps-search { flex:1 1 100%; }
  .ps-btn-outline { flex:1 1 auto; justify-content:center; }
  #psNewDocWrap { flex:1 1 auto; }
  #psNewDocWrap .ps-btn-primary-page { width:100%; justify-content:center; }
  .ps-doc-main { padding:13px 14px 13px 18px; }
  .ps-doc-actions .ps-action-start, .ps-doc-actions .ps-action-resend,
  .ps-doc-actions .ps-action-changes, .ps-doc-actions .ps-action-delete { flex:1 1 auto; text-align:center; }
  .ps-expand { padding:4px 16px 16px; }
  .ps-signer-row { flex-wrap:wrap; }
  /* Textspalte nimmt die Zeile neben dem Avatar, Status-Chip und Knopf rutschen darunter. Ohne
     Grundbreite (flex:1 = 0 %) brach nie etwas um und Name/E-Mail wurden auf Zeichenbreite gequetscht. */
  .ps-signer-row .s-text { flex-basis:calc(100% - 60px); }
  .ps-detail-signer { flex-wrap:wrap; }
  .ps-grid-datetitle { grid-template-columns:1fr !important; }
  /* Erstell-Dialog: 32px-Seitenpolster sind auf Telefon-Breite zu fett (Inline-Styles → !important) */
  #psCreateModal > div { padding-left:18px !important; padding-right:18px !important; }
}
/* Touch-Geräte: größere Tippziele, Hover-Lift neutralisieren (iOS „sticky hover") */
@media (hover:none) and (pointer:coarse) {
  .ps-doc:hover { transform:none; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08)); border-color:var(--border,#e5e7eb); }
  .ps-action-start, .ps-action-resend, .ps-action-delete, .ps-action-changes { min-height:40px; padding:8px 16px; }
  .ps-chip { min-height:40px; }
  .ps-link-btn, .ps-btn-ghost { min-height:40px; }
  .ps-done-toggle { min-height:44px; }
  .ps-select, .ps-search { height:44px; }
}

  /* === Buttons === */
  /* Primaer = Primary-Flaeche weiss 600, Sekundaer = Karte mit Rand, Zustaende Hover/Active/Focus/Disabled/Loading
     (Redesign 24.09.2026) */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 16px;
    border:1px solid var(--border); border-radius:10px; background:var(--surface);
    font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; line-height:1.2;
    transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; color:var(--text);
  }
  .btn:hover { background:var(--surface-solid); border-color:var(--border-strong); }
  .btn:active { transform:scale(0.98); }
  .btn:focus-visible { outline:none; box-shadow:var(--ring); }
  .btn:disabled, .btn[disabled] { opacity:0.45; cursor:not-allowed; transform:none; }
  .btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
  .btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
  .btn-primary:disabled:hover { background:var(--primary); border-color:var(--primary); }
  .btn-danger { color:var(--red-text); }
  .btn-danger:hover { background:var(--red-tint); border-color:var(--red-text); }
  .btn-ghost { background:transparent; border-color:transparent; }
  .btn-ghost:hover { background:var(--press); border-color:transparent; }
  .btn-sm { min-height:30px; padding:0 12px; font-size:13px; border-radius:8px; }
  .btn[style*="height"] { min-height:0; }  /* eine feste Inline-Hoehe gewinnt */
  .btn-icon { padding:0; width:34px; height:34px; min-height:34px; justify-content:center; }
  .btn-icon svg { width:16px; height:16px; }
  /* Laden: 14px-Spinner statt Icon */
  .btn.is-loading { pointer-events:none; }
  .btn.is-loading > svg { display:none; }
  .btn.is-loading::before { content:''; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:btnSpin 0.7s linear infinite; }
  @keyframes btnSpin { to { transform:rotate(360deg); } }

  /* === Form elements === */
  .form-group { margin-bottom:18px; }
  .form-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
  .form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
  .form-input, .form-select {
    width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px;
    font-size:14px; font-family:inherit; background:var(--bg-input); color:var(--text);
    outline:none; transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .form-input:hover, .form-select:hover { border-color:var(--border-strong); }
  .form-input:focus, .form-select:focus {
    border-color:var(--brand-text); box-shadow:var(--ring);
  }
  /* Eigener Chevron fuer Auswahlfelder */
  select.form-input, .form-select {
    -webkit-appearance:none; appearance:none; padding-right:34px !important; cursor:pointer; /* !important: 67 Selects tragen Inline-Padding */
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;
  }
  html.dark select.form-input, html.dark .form-select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e9aac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
  select.form-input[multiple], select.form-input[size] { background-image:none; padding-right:12px !important; }
  .form-input::placeholder { color:var(--text-muted); }
  /* Natives Browser-Loesch-X (Edge/IE) ausblenden — wir liefern eigene X-Buttons wo noetig */
  .form-input::-ms-clear { display:none; width:0; height:0; }
  /* Darkmode: native Select-Popups (Aufklappmenü) explizit dunkel stylen — ohne das rendern
     manche Browser das Popup weiß, der Options-Text erbt aber die helle Darkmode-Schrift
     und ist dann unlesbar (weiß auf weiß). Betrifft z.B. die Weisungs-Dropdowns im Vollmacht-Modal. */
  html.dark select option, html.dark select optgroup { background-color:#111827; color:#f1f5f9; }
  [contenteditable]:empty:before { content:attr(data-placeholder); color:var(--text-muted); font-style:italic; }
  [contenteditable]:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-ring); }
  .form-row { display:flex; gap:10px; align-items:center; }
  .form-row .form-input { flex:1; }

  /* === Autocomplete === */
  .ac-wrap { position:relative; }
  .ac-dropdown {
    display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
    max-height:260px; overflow-y:auto; background:var(--bg-modal);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    border:1px solid var(--border-glass); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); z-index:200;
    animation:modalIn 0.15s ease-out;
  }
  .ac-dropdown.open { display:block; }
  .ac-item {
    padding:11px 16px; cursor:pointer; font-size:14px;
    border-bottom:1px solid var(--border-light); transition:all 0.15s;
  }
  .ac-item:last-child { border-bottom:none; }
  .ac-item:hover, .ac-item.active { background:var(--brand-bg); }
  .ac-item .nr { font-weight:700; color:var(--brand); }
  .ac-item .name { color:var(--text-secondary); margin-left:8px; }

  /* === Selected object pill === */
  .selected-pill {
    display:none; align-items:center; gap:12px; padding:12px 16px;
    background:linear-gradient(160deg, rgba(7,161,226,0.1) 0%, rgba(7,161,226,0.04) 100%);
    border:1px solid rgba(7,161,226,0.18);
    border-radius:12px; font-size:14px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .selected-pill.visible { display:flex; }
  .selected-pill .pill-nr { font-weight:700; color:var(--brand); }
  .selected-pill .pill-name { color:var(--text); flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .selected-pill .pill-clear {
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    font-size:18px; line-height:1; padding:2px 6px; border-radius:6px; transition:all 0.15s;
  }
  .selected-pill .pill-clear:hover { color:var(--red); background:var(--red-bg); }

  /* === Preview stats === */
  .preview-row { display:none; gap:16px; padding:14px 0; justify-content:center; }
  .preview-row.visible { display:flex; }
  .pstat {
    text-align:center; padding:12px 20px; border-radius:14px;
    background:linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 100%);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.2);
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
    flex:1;
  }
  html.dark .pstat {
    background:linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border-color:rgba(255,255,255,0.06);
  }
  .pstat .pval { font-size:26px; font-weight:700; color:var(--brand); letter-spacing:-0.02em; }
  .pstat .plbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; font-weight:600; }

  /* === Toggle === */
  .toggle-row { display:flex; gap:20px; }
  .toggle-item { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
  .toggle-switch { position:relative; width:44px; height:26px; flex-shrink:0; }
  .toggle-switch input { opacity:0; width:0; height:0; }
  .toggle-switch .slider {
    position:absolute; inset:0; background:var(--gray-200); border-radius:13px;
    cursor:pointer; transition:background 0.25s ease;
  }
  .toggle-switch .slider::before {
    content:''; position:absolute; width:22px; height:22px; left:2px; top:2px;
    background:white; border-radius:50%; transition:transform 0.25s ease;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
  }
  .toggle-switch input:checked + .slider { background:var(--brand); }
  .toggle-switch input:checked + .slider::before { transform:translateX(18px); }

  /* === Progress === */
  .progress-area { display:none; margin-top:12px; }
  .progress-area.visible { display:block; }
  .progress-track {
    height:8px; border-radius:6px; overflow:hidden; margin-bottom:6px; position:relative;
    background:rgba(0,0,0,0.06);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  }
  html.dark .progress-track { background:rgba(255,255,255,0.08); box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); }
  .progress-fill {
    height:100%; width:0%; background:linear-gradient(90deg, var(--brand-dark), var(--brand-light));
    border-radius:6px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative; overflow:hidden;
  }
  .progress-fill::after {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
    border-radius:inherit;
  }
  .progress-label { font-size:13px; color:var(--text-secondary); }

  /* === Result === */
  .result-box {
    display:none; text-align:center; padding:20px; margin-top:14px; border-radius:14px;
    background:linear-gradient(160deg, rgba(48,209,88,0.1) 0%, rgba(48,209,88,0.04) 100%);
    border:1px solid rgba(48,209,88,0.2);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .result-box.visible { display:block; }
  .result-box h4 { color:var(--green); margin-bottom:6px; font-weight:700; }
  .result-box p { font-size:13px; color:var(--text-secondary); margin-bottom:12px; }
  .result-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

  .error-box {
    display:none; text-align:center; padding:16px; margin-top:14px; border-radius:14px;
    background:linear-gradient(160deg, rgba(255,69,58,0.08) 0%, rgba(255,69,58,0.03) 100%);
    border:1px solid rgba(255,69,58,0.2); color:var(--red); font-size:13px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .error-box.visible { display:block; }

  #sonstigeDropZone.drag-over { border-color:var(--brand);background:var(--brand-bg); }
  #sonstigeDropZone.drag-over svg { stroke:var(--brand); }
  .sonstige-file {
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;font-size:13px;transition:all .2s;
    background:linear-gradient(160deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 100%);
    border:1px solid var(--border);
  }
  html.dark .sonstige-file { background:linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.008) 100%); }
  .sonstige-file:hover { transform:translateX(2px); }
  .sonstige-file .sf-icon { flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(220,38,38,0.08);display:flex;align-items:center;justify-content:center; }
  .sonstige-file .sf-info { flex:1;min-width:0; }
  .sonstige-file .sf-name { font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .sonstige-file .sf-meta { font-size:11px;color:var(--text-secondary); }
  .sonstige-file .sf-del { flex-shrink:0;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
  .sonstige-file .sf-del:hover { background:rgba(220,38,38,0.1);color:var(--red); }

  /* === Generate button === */
  .btn-generate {
    width:100%; padding:14px; border:none; border-radius:12px;
    background:linear-gradient(135deg, var(--brand), var(--brand-light)); color:white;
    font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
    transition:all 0.3s cubic-bezier(0.2, 0, 0, 1);
    box-shadow:0 4px 14px rgba(7,161,226,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    position:relative; overflow:hidden;
  }
  .btn-generate::after {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    pointer-events:none;
  }
  .btn-generate:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(7,161,226,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
  .btn-generate:active { transform:translateY(0); }
  .btn-generate:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
  .bp-btn-row { display:flex; flex-direction:column; gap:8px; }
  .bp-btn-secondary { display:flex; gap:8px; }
  @media(min-width:500px) {
    .bp-btn-row { flex-direction:row; }
    .bp-btn-row .btn-generate { flex:1; }
  }
  /* PDF-Download als eigene, dezente Action-Zeile unter den sekundären Buttons.
     Visuell schwächer als die Primärbuttons, aber klar als Hauptaktion erkennbar
     sobald die BP hochgeladen ist (disabled-State greift bis dahin). */
  .bp-pdf-action {
    display:flex; align-items:center; gap:12px;
    width:100%; margin-top:10px;
    padding:10px 14px;
    background:var(--bg-card); border:1px solid var(--border);
    color:var(--text); font:inherit; text-align:left;
    border-radius:8px; cursor:pointer;
    transition:border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
  }
  .bp-pdf-action svg {
    width:18px; height:18px; flex-shrink:0;
    color:var(--text-secondary); transition:color 0.15s;
  }
  .bp-pdf-action-label { display:flex; flex-direction:column; gap:1px; line-height:1.25; min-width:0; }
  .bp-pdf-action-title { font-size:13px; font-weight:600; }
  .bp-pdf-action-hint { font-size:11px; color:var(--text-tertiary); }
  .bp-pdf-action:not(:disabled):hover {
    border-color:var(--blue); color:var(--blue); background:var(--bg-hover);
  }
  .bp-pdf-action:not(:disabled):hover svg { color:var(--blue); }
  .bp-pdf-action:not(:disabled):active { transform:translateY(1px); }
  .bp-pdf-action:disabled { opacity:0.45; cursor:not-allowed; }
  .spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; vertical-align:middle; margin-left:6px; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* === BP-Konfiguration === */
  .bpc-section { border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
  .bpc-header { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; font-size:13px; font-weight:600; background:var(--bg-card); transition:background 0.15s; }
  .bpc-header:hover { background:var(--bg-hover); }
  .bpc-header.open .bpc-chev { transform:rotate(90deg); }
  .bpc-body { padding:12px 14px; border-top:1px solid var(--border); }
  .bpc-info { font-size:11px; color:var(--text-secondary); padding:8px 10px; border-radius:6px; background:var(--bg-hover); border:1px solid var(--border); margin-bottom:10px; line-height:1.5; }
  .bpc-info code { background:var(--bg-code,rgba(0,0,0,0.15)); padding:1px 4px; border-radius:3px; font-size:11px; }
  .bpc-badge { font-size:10px; padding:2px 8px; border-radius:10px; background:var(--brand); color:#fff; margin-left:auto; }
  .bpc-badge.bpc-readonly { background:var(--text-tertiary); }
  .bpc-table { width:100%; border-collapse:collapse; font-size:12px; }
  .bpc-table th { text-align:left; padding:6px 8px; font-size:11px; color:var(--text-secondary); border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap; }
  .bpc-table td { padding:5px 8px; border-bottom:1px solid var(--border-light,rgba(255,255,255,0.04)); }
  .bpc-table td.num, .bpc-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .bpc-table tbody tr:hover { background:var(--bg-hover); }
  .bpc-table select { font-size:11px; padding:2px 4px; border-radius:4px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); }

  /* === BP-Konfiguration Full Page === */
  .bpc-topbar {
    display:flex; align-items:center; gap:12px; padding:12px 20px;
    background:var(--bg-card); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:10;
  }
  .bpc-mode-toggle { display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--bg-main); }
  .bpc-mode-btn { display:flex; align-items:center; gap:5px; padding:6px 14px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
  .bpc-mode-btn:hover { color:var(--text); background:var(--bg-hover); }
  .bpc-mode-btn.active { background:var(--brand); color:#fff; }
  .bpc-mode-btn.active svg { stroke:#fff; }
  .bpc-obj-display { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .bpc-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .bpc-select {
    font-size:13px; padding:6px 10px; border-radius:var(--radius-sm,6px);
    border:1px solid var(--border); background:var(--bg-input,var(--bg-main));
    color:var(--text); cursor:pointer; font-weight:600;
  }
  .bpc-tabs {
    display:flex; gap:4px; padding:12px 20px 0; background:var(--bg-card);
    border-bottom:1px solid var(--border); overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .bpc-tabs::-webkit-scrollbar { display:none; }
  .bpc-tab {
    padding:8px 16px; font-size:13px; font-weight:500; border:none; cursor:pointer;
    background:transparent; color:var(--text-secondary); border-radius:8px 8px 0 0;
    transition:all 0.2s ease; white-space:nowrap; position:relative;
  }
  .bpc-tab:hover { color:var(--text); background:var(--bg-hover); }
  .bpc-tab.active {
    color:var(--brand); font-weight:600;
    background:var(--bg-main);
    box-shadow:inset 0 -2px 0 var(--brand);
  }
  .bpc-panel { display:none; padding:20px; overflow-y:auto; flex:1; }
  .bpc-panel.active { display:block; }
  .bpc-panel-inner { max-width:1100px; margin:0 auto; }
  .bpc-table-wrap {
    border:1px solid var(--border); border-radius:8px; overflow:hidden;
    background:var(--bg-card);
  }
  .bpc-table-wrap .bpc-table th { background:var(--bg-hover); }
  #pageBpconfig.active {
    display:flex !important; flex-direction:column; overflow:hidden;
  }

  /* Kanban Board */
  .bpc-kanban {
    display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;
    padding:0 20px 20px; flex:1; overflow-y:auto;
  }
  .bpc-kanban-col {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; display:flex; flex-direction:column;
    min-height:200px; overflow:hidden;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  .bpc-kanban-col-header {
    padding:12px 14px; font-size:13px; font-weight:700;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:8px;
    color:var(--text); letter-spacing:0.01em;
  }
  .bpc-kanban-col-header .bpc-col-count {
    font-size:10px; font-weight:600; padding:2px 7px;
    border-radius:10px; background:var(--brand); color:#fff;
    margin-left:auto;
  }
  .bpc-kanban-col-body {
    padding:8px; flex:1; display:flex; flex-direction:column; gap:6px;
    overflow-y:auto; min-height:60px;
  }
  .bpc-kanban-col-body.drag-over {
    background:rgba(0,122,255,0.06);
    border:2px dashed var(--brand);
    border-radius:0 0 12px 12px;
    margin:-1px;
  }
  .bpc-kanban-card {
    padding:10px 12px; border-radius:8px;
    background:var(--bg-main); border:1px solid var(--border);
    cursor:grab; transition:all 0.15s ease;
    display:flex; flex-direction:column; gap:4px;
    user-select:none; -webkit-user-select:none;
  }
  .bpc-kanban-card:hover {
    border-color:var(--brand); box-shadow:0 2px 8px rgba(0,122,255,0.12);
    transform:translateY(-1px);
  }
  .bpc-kanban-card.dragging { opacity:0.4; transform:scale(0.95); }
  .bpc-kanban-card.has-override {
    border-left:3px solid var(--brand);
  }
  .bpc-kanban-card-nr {
    font-size:12px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .bpc-kanban-card-name {
    font-size:11px; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .bpc-kanban-card-saldo {
    font-size:11px; font-weight:600; color:var(--text-secondary);
    font-variant-numeric:tabular-nums; margin-top:2px;
  }

  /* Hidden zone */
  .bpc-hidden-zone {
    margin:0 20px 20px; padding:12px 16px; border-radius:10px;
    border:2px dashed var(--border); min-height:60px;
    background:var(--bg-hover); transition:all 0.2s;
  }
  .bpc-hidden-zone.drag-over {
    border-color:var(--red); background:rgba(255,69,58,0.06);
  }
  .bpc-hidden-zone-header {
    font-size:12px; font-weight:600; color:var(--text-secondary);
    margin-bottom:8px; display:flex; align-items:center; gap:6px;
  }
  .bpc-hidden-cards {
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .bpc-hidden-cards .bpc-kanban-card {
    flex:0 0 auto; max-width:180px; opacity:0.6;
  }

  /* Add-Button in Kanban-Spalten */
  .bpc-add-btn {
    width:22px; height:22px; border-radius:6px; border:1px solid var(--border);
    background:var(--bg-main); color:var(--text-secondary); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s; padding:0; margin-left:4px; flex-shrink:0;
  }
  .bpc-add-btn:hover {
    background:var(--brand); color:#fff; border-color:var(--brand);
  }

  /* Konten-Picker Dropdown */
  .bpc-add-picker {
    position:fixed; z-index:1000;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.18);
    display:flex; flex-direction:column; max-height:420px;
    width:360px;
  }
  .bpc-add-picker-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-bottom:1px solid var(--border);
    font-size:12px; color:var(--text);
  }
  .bpc-add-picker-close {
    background:none; border:none; font-size:18px; color:var(--text-secondary);
    cursor:pointer; padding:0 4px; line-height:1;
  }
  .bpc-add-picker-close:hover { color:var(--red); }
  .bpc-add-picker-search {
    margin:8px 10px 4px; padding:6px 10px; border-radius:6px;
    border:1px solid var(--border); background:var(--bg-main);
    font-size:12px; color:var(--text); outline:none;
  }
  .bpc-add-picker-search:focus { border-color:var(--brand); }
  .bpc-add-picker-actions {
    display:flex; align-items:center; gap:6px; padding:6px 10px;
    border-bottom:1px solid var(--border);
  }
  .bpc-add-picker-list {
    flex:1; overflow-y:auto; padding:4px 0;
  }
  .bpc-add-picker-item {
    display:flex; align-items:center; gap:8px; padding:5px 12px;
    cursor:pointer; font-size:12px; transition:background 0.1s;
  }
  .bpc-add-picker-item:hover { background:var(--bg-hover); }
  .bpc-picker-nr {
    font-weight:700; font-variant-numeric:tabular-nums; min-width:48px;
    color:var(--text);
  }
  .bpc-picker-name {
    flex:1; color:var(--text-secondary); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .bpc-picker-from {
    font-size:10px; color:var(--text-tertiary); white-space:nowrap;
  }
  .bpc-add-picker-footer {
    padding:8px 10px; border-top:1px solid var(--border);
    display:flex; justify-content:flex-end;
  }

  /* Kontoauszuege toggle */
  .bpc-ka-toggle {
    position:relative; width:44px; height:24px; cursor:pointer;
    display:inline-block;
  }
  .bpc-ka-toggle input { opacity:0; width:0; height:0; }
  .bpc-ka-toggle .bpc-ka-slider {
    position:absolute; inset:0; border-radius:12px;
    background:var(--border); transition:all 0.2s;
  }
  .bpc-ka-toggle .bpc-ka-slider::before {
    content:''; position:absolute; width:18px; height:18px;
    border-radius:50%; background:white; top:3px; left:3px;
    transition:transform 0.2s;
  }
  .bpc-ka-toggle input:checked + .bpc-ka-slider {
    background:var(--green);
  }
  .bpc-ka-toggle input:checked + .bpc-ka-slider::before {
    transform:translateX(20px);
  }

  /* Ranges */
  .bpc-ranges-grid {
    display:grid; grid-template-columns:1fr; gap:12px; max-width:600px;
  }
  .bpc-range-row {
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; transition:border-color 0.2s;
  }
  .bpc-range-row:hover { border-color:var(--brand); }
  .bpc-range-label {
    font-size:13px; font-weight:600; color:var(--text); min-width:200px;
  }
  .bpc-range-input {
    width:80px; padding:6px 10px; font-size:13px; font-weight:600;
    border:1px solid var(--border); border-radius:6px;
    background:var(--bg-input,var(--bg-main)); color:var(--text);
    text-align:center; font-variant-numeric:tabular-nums;
  }
  .bpc-range-input:focus {
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(0,122,255,0.15);
  }
  .bpc-range-sep { font-size:12px; color:var(--text-secondary); font-weight:500; }

  @media (max-width:1200px) {
    .bpc-kanban { grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:768px) {
    .bpc-kanban { grid-template-columns:repeat(2, 1fr); gap:10px; padding:0 12px 12px; }
    .bpc-topbar { flex-wrap:wrap; padding:10px 12px; }
    .bpc-tabs { padding:8px 12px 0; }
    .bpc-range-label { min-width:140px; font-size:12px; }
    .bpc-range-input { width:65px; }
  }
  @media (max-width:480px) {
    .bpc-kanban { grid-template-columns:1fr; }
  }

  /* ═══ Legacy compat: Shares (alte Klassen) ═══ */
  .shares-toolbar { display:flex; gap:10px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
  .shares-toolbar .form-input { max-width:280px; }
  .shares-toolbar .form-select { max-width:180px; }
  .share-item {
    border:1px solid var(--border-glass); border-radius:var(--radius); padding:16px 18px;
    background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    transition:all 0.2s ease; cursor:pointer;
  }
  .share-item:hover { border-color:var(--gray-300); box-shadow:var(--shadow); transform:translateY(-1px); }
  .share-item.selected { border-color:var(--brand); background:var(--brand-bg); }
  .share-header { display:flex; align-items:center; gap:10px; }
  .share-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .share-dot.active { background:var(--green); }
  .share-dot.expired { background:var(--red); }
  .share-dot.notup { background:var(--gray-300); }
  .share-details { flex:1; }
  .share-name { font-size:14px; font-weight:600; }
  .share-meta { display:flex; gap:8px; margin-top:3px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; align-items:center; }
  .status-pill {
    display:inline-block; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:600;
  }
  .status-pill.active { background:var(--green-bg); color:var(--green); }
  .status-pill.expired { background:var(--red-bg); color:var(--red); }
  .status-pill.notup { background:var(--gray-100); color:var(--gray-500); }
  .share-link-row {
    display:flex; align-items:center; gap:8px; margin-top:8px; padding:10px 12px;
    background:var(--bg-card-hover); border-radius:var(--radius-sm); font-size:12px;
  }
  .share-link-row a { color:var(--brand); text-decoration:none; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .share-link-row a:hover { text-decoration:underline; }
  .pw-badge {
    background:var(--bg-card-hover); padding:2px 8px; border-radius:4px; font-size:11px;
    cursor:pointer; font-family:monospace; color:var(--text-secondary);
  }
  .pw-badge:hover { background:var(--gray-200); }
  .share-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .bulk-bar {
    display:none; align-items:center; gap:10px; padding:12px 18px;
    background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass); border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px;
  }
  .bulk-bar.visible { display:flex; }

  /* === Toast === */
  .toast-container {
    position:fixed; top:16px; right:16px; z-index:9999;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
    max-width:420px;
  }
  .toast-item {
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px; border-radius:var(--radius);
    background:var(--bg-modal); color:var(--text);
    border:1px solid var(--border-glass);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
    opacity:0; transform:translateX(40px);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    cursor:pointer;
  }
  .toast-item.show { opacity:1; transform:translateX(0); }
  .toast-item.hiding { opacity:0; transform:translateX(40px); }
  .toast-item .toast-icon { font-size:16px; flex-shrink:0; line-height:1; }
  .toast-item .toast-msg { flex:1; line-height:1.4; }
  .toast-item.toast-success { border-left:3px solid #059669; }
  .toast-item.toast-success .toast-icon { color:#059669; }
  .toast-item.toast-error { border-left:3px solid #DC2626; }
  .toast-item.toast-error .toast-icon { color:#DC2626; }
  .toast-item.toast-warning { border-left:3px solid #F59E0B; }
  .toast-item.toast-warning .toast-icon { color:#F59E0B; }
  .toast-item.toast-info { border-left:3px solid #2563EB; }
  .toast-item.toast-info .toast-icon { color:#2563EB; }
  /* === FIBU Sub-Tabs === */
  .fibu-subtab-bar {
    display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; padding:0 4px;
  }
  .fibu-subtab {
    padding:8px 14px; font-size:12px; font-weight:500; border:none; background:none;
    color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent;
    transition:all 0.15s; white-space:nowrap;
  }
  .fibu-subtab:hover { color:var(--text); background:var(--bg-card-hover); }
  .fibu-subtab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
  /* === FIBU Buchen-Drawer === */
  .fibu-drawer-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:800;
    opacity:0; pointer-events:none; transition:opacity 0.25s;
    display:flex; align-items:center; justify-content:center;
  }
  .fibu-drawer-overlay.open { opacity:1; pointer-events:auto; }
  .fibu-drawer {
    width:90vw; max-width:960px; max-height:90vh; z-index:801;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column; overflow:hidden;
    transform:scale(0.95); opacity:0; transition:all 0.2s ease;
  }
  .fibu-drawer-overlay.open .fibu-drawer { transform:scale(1); opacity:1; }
  /* === FIBU TopBar === */
  #fibuTopBar {
    height:52px; background:var(--bg-card); border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px; padding:0 16px;
    position:sticky; top:0; z-index:100;
  }
  #fibuCtxObjekt:hover, #fibuCtxJahr:hover { border-color:var(--brand); }
  /* === FIBU Layout === */
  #fibuBodyWrap {
    display:flex; flex:1; min-height:0; overflow:hidden;
  }
  /* === FIBU Sidebar === */
  #fibuSidebar {
    width:200px; flex-shrink:0; border-right:1px solid var(--border);
    padding:8px; display:flex; flex-direction:column;
    overflow-y:auto; background:var(--bg-card);
    transition:width 0.2s ease;
  }
  #fibuSidebar.collapsed { width:52px; }
  #fibuSidebar.collapsed .fnav-label,
  #fibuSidebar.collapsed .fnav-badge,
  #fibuSidebar.collapsed .fnav-sep { display:none; }
  #fibuSidebar.collapsed .fnav-item { justify-content:center; padding:8px; }
  .fnav-item {
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    border-radius:var(--radius-sm); cursor:pointer; font-size:13px;
    color:var(--text-muted); transition:all 0.15s; font-weight:500;
    border:none; background:none; width:100%; text-align:left;
  }
  .fnav-item:hover { background:var(--bg-main); color:var(--text); }
  .fnav-item.active { background:var(--brand); color:#fff; }
  .fnav-item.active .fnav-icon svg { stroke:#fff; }
  .fnav-icon { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .fnav-icon svg { width:18px; height:18px; }
  .fnav-sep {
    font-size:9px; text-transform:uppercase; letter-spacing:0.8px;
    color:var(--text-muted); padding:12px 10px 4px; font-weight:600;
  }
  .fnav-badge {
    background:var(--brand); color:#fff; border-radius:10px;
    padding:1px 7px; font-size:11px; font-weight:700; margin-left:auto;
  }
  .fnav-badge.warn { background:var(--red); }
  .fnav-label { white-space:nowrap; }
  #fibuSidebarFooter { margin-top:auto; padding:8px; }
  #fibuBtnBuchen {
    width:100%; padding:10px; background:var(--brand); color:#fff;
    border:none; border-radius:var(--radius-sm); font-weight:600;
    font-size:13px; cursor:pointer;
  }
  #fibuBtnBuchen:hover { filter:brightness(1.1); }
  /* === Lokale Objekt/WJ-Selects ausblenden (globaler Kontext steuert) === */
  #fibuJlObjekt, #fibuSollObjekt, #fibuBvObjekt, #fibuSlObjekt, #fibuOpObjekt,
  #fibuWpObjekt, #fibuAbrObjekt, #fibuJaObjekt, #fibuBwaObjekt, #fibuKstObjekt,
  #fibuUstObjekt, #fibuOkObjekt, #fibuHgkObjekt, #fibuSyncObjekt, #fibuSessionObjekt,
  #fibuLrObjekt, #fibuSlWjahr, #fibuOpWjahr, #fibuBwaWjahr, #fibuUstWjahr,
  #fibuOkWjahr, #fibuJlJahr { display:none !important; }
  /* === KPI Cards === */
  .kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  .kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
  .kpi-label { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
  .kpi-value { font-size:28px; font-weight:700; color:var(--text); }
  .kpi-value.kpi-warn { color:var(--red); }
  .kpi-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
  /* === Skeleton === */
  .skeleton {
    background:linear-gradient(90deg, var(--bg-main) 25%, var(--bg-card) 50%, var(--bg-main) 75%);
    background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px;
  }
  @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  /* === Kontext-Hint === */
  .kontext-hint { text-align:center; padding:80px 20px; color:var(--text-muted); }
  .kontext-hint p { font-size:16px; margin-bottom:16px; }
  /* === Command Palette === */
  #fibuCmdBackdrop { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:199; }
  #fibuCmdModal {
    position:fixed; top:18%; left:50%; transform:translateX(-50%);
    width:520px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:200;
  }
  #fibuCmdInput {
    width:100%; background:transparent; border:none;
    border-bottom:1px solid var(--border); padding:16px;
    font-size:15px; color:var(--text); outline:none;
  }
  .cp-result {
    padding:10px 14px; cursor:pointer; border-radius:var(--radius);
    display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text);
  }
  .cp-result:hover, .cp-result.selected { background:var(--bg-main); }
  /* === Dropzone === */
  .dropzone {
    border:2px dashed var(--border); border-radius:var(--radius);
    padding:16px; text-align:center; color:var(--text-muted);
    cursor:pointer; margin-top:8px; transition:all 0.2s; font-size:13px;
  }
  .dropzone:hover, .dropzone.dragover { border-color:var(--brand); background:rgba(59,130,246,0.05); color:var(--brand); }
  /* === Workflow Dots === */
  .wf-dot { width:10px; height:10px; border-radius:50%; background:var(--border); border:1px solid var(--text-muted); transition:all 0.3s; }
  .wf-dot.done { background:var(--green); border-color:var(--green); }
  .wf-dot.active { background:var(--brand); border-color:var(--brand); animation:pulse 2s infinite; }
  .wf-dot.warn { background:var(--red); border-color:var(--red); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
  /* Legacy single toast (Kompatibilität) */
  .toast {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(100px);
    background:var(--bg-modal); color:var(--text); padding:12px 24px; border-radius:var(--radius);
    border:1px solid var(--border-glass);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
    opacity:0; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); z-index:9999;
  }
  .toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

  /* === Overlay / Modal === */
  .overlay {
    position:fixed; inset:0; background:var(--scrim); z-index:500;
    display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  .overlay.open { display:flex; }
  /* ⚠ Der Vollbild-Betrachter liegt UEBER der Spotlight-Suche (#spOverlay.an hat z-index 9000).
     Die Suche legt sich beim Oeffnen einer Datei nur schlafen; geht dabei etwas schief (Datei
     oeffnet in einem eigenen Fenster, Weckruf kommt zu frueh), stand sie mit z-index 9000 vor dem
     Dokument und man sah die PDF gar nicht (Mike, 23.09.2026). Ein Deckel statt einer Zeitfrage. */
  #archivFullOverlay { z-index:9200; }
  .modal {
    background:var(--surface-solid);
    border:1px solid var(--border-strong);
    border-radius:16px; box-shadow:var(--pop-shadow);
    max-height:85vh; overflow-y:auto; width:480px;
    animation:modalIn 0.25s ease-out;
  }
  @keyframes modalIn { from { opacity:0; transform:scale(0.97) translateY(6px); } }
  /* App-Dialoge (appAlert/appConfirm/appPrompt, Notiz): 480px zentriert, am Telefon Bottom-Sheet */
  .app-dlg-overlay { position:fixed; inset:0; z-index:100000; /* Rueckfragen immer ueber jedem Dialog (Bugcheck Rechte 28.09.2026: lag hinter #permOverlay) */ display:flex; align-items:center; justify-content:center; padding:16px;
    background:var(--scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .app-dlg { width:480px; max-width:100%; display:flex; flex-direction:column; gap:14px; padding:22px;
    background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:16px; box-shadow:var(--pop-shadow);
    color:var(--text); animation:modalIn 0.2s ease-out; }
  .app-dlg-kopf { display:flex; flex-direction:column; gap:4px; }
  .app-dlg-titel { font-size:18px; font-weight:600; letter-spacing:-0.015em; }
  .app-dlg-sub, .app-dlg-hint { font-size:13.5px; color:var(--text-3); line-height:1.45; }
  .app-dlg-hint { font-size:12.5px; }
  .app-dlg-msg { font-size:14.5px; line-height:1.55; white-space:pre-wrap; max-height:60vh; overflow-y:auto; overflow-wrap:anywhere; }
  .app-dlg-msg .app-dlg-titel { display:block; margin-bottom:8px; white-space:normal; }
  .app-dlg textarea.form-input { resize:vertical; min-height:96px; font-size:14.5px; line-height:1.5; background:var(--surface-2); }
  .app-dlg-btns { display:flex; justify-content:flex-end; gap:8px; }
  .app-dlg-btns .btn { min-height:40px; min-width:88px; }
  .app-dlg-danger { background:var(--red-dot); border-color:var(--red-dot); color:#fff; font-weight:600; }
  .app-dlg-danger:hover { background:var(--red-text); border-color:var(--red-text); color:#fff; }
  @media (max-width:767px) {
    .app-dlg-overlay { align-items:flex-end; padding:0; }
    .app-dlg { width:100%; border:none; border-radius:18px 18px 0 0; padding:22px 16px max(16px, env(safe-area-inset-bottom)); animation:sheetIn 0.22s cubic-bezier(0.2,0,0,1); }
    .app-dlg-btns .btn { min-height:44px; flex:1; }
  }
  .modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px; border-bottom:1px solid var(--border-light);
  }
  .modal-header h3 { font-size:18px; font-weight:600; letter-spacing:-0.015em; }
  .modal-close {
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    font-size:20px; padding:6px; border-radius:8px; transition:all 0.15s;
  }
  .modal-close:hover { background:var(--bg-card-hover); color:var(--text); }
  .modal-body { padding:22px 28px; }

  /* === Adressen: seit 24.09.2026 in css/adressen.css === */

  /* Beiräte & Prüfer: seit 03.10.2026 in css/seiten/beiraete.css */

  /* Contact rows */

  /* Unit cards */

  /* Role chips (horizontal row under unit card) */

  /* Bank card */

  /* KPI footer bar */

  /* Fade-in animation */

  .modal-footer { padding:16px 28px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

  /* === Settings === */
  .fibu-nav-group { margin-bottom:12px; }
  .fibu-nav-label { font-size:9px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); padding:0 8px 4px; font-weight:600; }
  /* Objektkontenrahmen */
  .ok-chip { height:32px;font-size:12px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text); }
  .ok-row:hover { background:rgba(255,255,255,0.04); }
  .ok-row:hover .ok-act-btn { opacity:1 !important; }
  .ok-act-btn:hover { background:rgba(255,255,255,0.08); }
  .ok-group-div:hover td > div { background:rgba(255,255,255,0.02); border-radius:6px; }
  /* Debitorenkonto modal sections */
  .deb-section .deb-chev svg { transform:rotate(180deg); }
  .deb-section.deb-open .deb-chev svg { transform:rotate(0deg); }
  .deb-section + .deb-body { display:none; }
  .deb-section.deb-open + .deb-body { display:block; }
  .fibu-tab { display:block; width:100%; text-align:left; padding:6px 10px; font-size:12px; border:none; background:none; color:var(--text-secondary); cursor:pointer; border-radius:6px; transition:all 0.15s; font-weight:500; }
  .fibu-tab:hover { background:var(--bg-card-hover); color:var(--text); }
  .fibu-tab.active { background:var(--brand); color:#fff; font-weight:600; }
  .settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin:-22px -28px 22px; padding:0 28px; }
  .settings-tab {
    flex:1; padding:13px 0; text-align:center; font-size:14px; font-weight:500;
    color:var(--text-secondary); background:none; border:none;
    border-bottom:2px solid transparent; cursor:pointer; transition:all 0.2s;
  }
  .settings-tab:hover { color:var(--text); }
  .settings-tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
  .settings-card {
    background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
  }
  .settings-card-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .settings-card-title svg { color:var(--text-secondary); flex-shrink:0; }
  .settings-section { margin-bottom:22px; }
  .settings-section-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:10px; padding-top:10px; border-top:1px solid var(--border-light); }
  .settings-saved { display:none; text-align:center; color:var(--green); font-size:13px; font-weight:600; padding:8px; }

  /* ── Settings Page — Tab-based Workspace ── */
  #pageSettings.active { height:100%; display:flex; flex-direction:column; overflow:hidden; }

  /* Layout: vertical stack (tabs on top, content below) */
  .sett-layout { display:flex; flex-direction:column; height:100%; }

  /* Top tab navigation — horizontal */
  .sett-nav { display:flex; align-items:center; gap:0; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; overflow-x:auto; overflow-y:hidden; padding:0 24px; scrollbar-width:none; -ms-overflow-style:none; }
  .sett-nav::-webkit-scrollbar { display:none; }
  .sett-nav-group { display:contents; }
  .sett-nav-group-title { display:none; }
  .sett-nav-item { display:flex; align-items:center; gap:6px; padding:12px 14px; font-size:13px; color:var(--text-secondary); background:none; border:none; cursor:pointer; text-align:left; white-space:nowrap; transition:color 0.15s; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; border-left:none; }
  .sett-nav-item:hover { color:var(--text); }
  .sett-nav-item.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
  .sett-nav-item svg { width:15px; height:15px; flex-shrink:0; opacity:0.5; }
  .sett-nav-item.active svg { opacity:1; color:var(--brand); }

  /* Content workspace — scrollable */
  .sett-content { flex:1; overflow-y:auto; padding:0; position:relative; }
  .sett-panel { display:none; }
  .sett-panel.active { display:block; padding:32px 40px 100px; }

  /* Sticky header with title + save */
  .sett-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; padding:28px 40px 14px; margin:-32px -40px 24px; border-bottom:1px solid var(--border-light, var(--border)); }
  .sett-header-left { flex:1; }
  .sett-section-title { font-size:20px; font-weight:700; color:var(--text); margin:0 0 4px; }
  .sett-section-desc { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }
  .sett-header .btn { flex-shrink:0; }

  /* Section blocks */
  .sett-block { margin-bottom:36px; }
  .sett-block-title { font-size:14px; font-weight:600; color:var(--text); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
  .sett-block-title svg { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
  .sett-block-desc { font-size:12px; color:var(--text-muted); margin:0 0 16px; }
  .sett-block-line { height:1px; background:var(--border); margin:0 0 20px; }
  .sett-block-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
  .sett-block-fields.single-col { grid-template-columns:1fr; }
  .sett-field { min-width:0; }
  .sett-field.full { grid-column:1/-1; }
  .sett-field label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:5px; }
  .sett-field .form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.4; }
  .sett-field .form-input, .sett-field .form-select { width:100%; }

  /* Divider between major sections */
  .sett-divider { height:1px; background:var(--border); margin:36px 0; }

  /* Sub-navigation tabs (inside panels like Integrationen) */
  .sett-sub-nav { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:28px; overflow-x:auto; }
  .sett-sub-tab { padding:10px 18px; font-size:13px; color:var(--text-secondary); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit; transition:color 0.15s; }
  .sett-sub-tab:hover { color:var(--text); }
  .sett-sub-tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
  .sett-sub-panel { display:none; }
  .sett-sub-panel.active { display:block; }

  /* Footer */
  .sett-footer { font-size:11px; color:var(--gray-400); text-align:center; padding:24px 0 4px; border-top:1px solid var(--gray-100); margin-top:40px; }

  /* Legacy save bar — hidden */
  .sett-save-bar { display:none; }

  /* Tablet */
  @media (max-width:1100px) {
    .sett-nav { padding:0 16px; }
    .sett-nav-item { padding:10px 12px; font-size:12px; }
    .sett-nav-item svg { display:none; }
    .sett-panel.active { padding:24px 24px 80px; }
    .sett-header { padding:24px 24px 14px; margin:-24px -24px 24px; }
  }
  /* Mobile */
  @media (max-width:768px) {
    .sett-nav { padding:0 8px; }
    .sett-nav-item { padding:10px 10px; font-size:12px; gap:4px; min-height:44px; }
    .sett-nav-item svg { display:none; }
    .sett-panel.active { padding:16px 16px 80px; }
    .sett-header { padding:16px 16px 12px; margin:-16px -16px 20px; position:relative; }
    .sett-header .btn { padding:8px 16px; font-size:13px; }
    .sett-block-fields { grid-template-columns:1fr; }
    .sett-sub-nav { margin-bottom:16px; }
    .sett-sub-tab { padding:10px 12px; font-size:12px; min-height:44px; }
  }
  .api-key-display { background:var(--gray-900); color:#4ade80; font-family:monospace; font-size:13px; padding:14px 18px; border-radius:var(--radius-sm); word-break:break-all; margin:8px 0; position:relative; }
  .api-key-display .copy-btn { position:absolute; right:8px; top:8px; background:rgba(255,255,255,0.15); color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:11px; cursor:pointer; }
  .api-key-display .copy-btn:hover { background:rgba(255,255,255,0.25); }
  .api-key-masked { font-family:monospace; font-size:13px; color:var(--text-secondary); background:var(--gray-100); padding:6px 12px; border-radius:8px; display:inline-block; }

  /* === User Management (Table) === */
  .usr-account-card {
    background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass); border-radius:var(--radius);
    padding:20px 24px; margin-bottom:24px; box-shadow:var(--shadow-sm);
  }
  .usr-account-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
  .usr-avatar-lg {
    width:48px; height:48px; border-radius:50%;
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:600; flex-shrink:0;
  }
  .usr-account-name { font-weight:600; font-size:16px; color:var(--text); }
  .usr-account-email { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .usr-account-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px) { .usr-account-fields { grid-template-columns:1fr; } }
  .usr-field-label {
    display:block; font-size:11px; font-weight:500; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
  }
  .usr-field-row { display:flex; gap:8px; }
  .usr-totp-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:20px; padding-top:20px; border-top:1px solid var(--border-light);
  }
  .usr-badge-you {
    font-size:10px; font-weight:600; padding:1px 6px; border-radius:99px;
    background:var(--brand); color:#fff; margin-left:4px; vertical-align:middle;
  }

  /* ── User Table ── */
  .usr-table-wrap {
    background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); overflow:hidden;
  }
  .usr-table-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:14px 20px; border-bottom:1px solid var(--border-light);
  }
  .usr-toolbar-title { font-weight:600; font-size:14px; }
  .usr-toolbar-count {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; background:var(--gray-100); border-radius:50%;
    font-size:11px; font-weight:600; color:var(--text-muted); margin-left:6px;
  }
  .usr-table { width:100%; border-collapse:collapse; }
  .usr-table thead th {
    padding:8px 16px; text-align:left; font-size:11px; font-weight:600;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em;
    background:var(--gray-50); border-bottom:1px solid var(--border-light);
    white-space:nowrap;
  }
  .usr-table tbody tr {
    border-bottom:1px solid var(--border-light);
    transition:background 0.15s ease;
  }
  .usr-table tbody tr:last-child { border-bottom:none; }
  .usr-table tbody tr:hover { background:rgba(7,161,226,0.04); }
  .usr-table td {
    padding:10px 16px; font-size:13px; vertical-align:middle;
  }

  /* User cell (avatar + name) */
  .usr-cell { display:flex; align-items:center; gap:10px; }
  .usr-avatar {
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0; color:#fff;
  }
  .usr-name { font-weight:600; line-height:1.2; }
  .usr-email { font-size:11px; color:var(--text-muted); margin-top:1px; }

  /* Tag chips */
  .usr-tag {
    display:inline-flex; align-items:center;
    padding:2px 8px; border-radius:99px;
    font-size:11px; font-weight:500;
    background:var(--gray-100); color:var(--text-secondary);
  }

  /* Role chips */
  .usr-role {
    padding:3px 10px; border-radius:99px;
    font-size:11px; font-weight:500;
  }
  .usr-role-admin { background:rgba(7,161,226,0.1); color:var(--brand); }
  .usr-role-user { background:var(--gray-100); color:var(--text-muted); }
  .usr-role-gf { background:rgba(147,51,234,0.08); color:#7c3aed; }

  /* Status dot */
  .usr-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
  .usr-dot-active { background:var(--green); }
  .usr-dot-inactive { background:var(--text-muted); }

  /* Actions cell */
  .usr-actions { display:flex; align-items:center; gap:2px; justify-content:flex-end; }
  .usr-btn-icon {
    width:30px; height:30px; padding:0; border:none; background:none;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm); color:var(--text-muted);
    cursor:pointer; transition:background 0.15s, color 0.15s;
  }
  .usr-btn-icon:hover { background:var(--gray-100); color:var(--text); }
  .usr-btn-icon.danger:hover { background:rgba(239,68,68,0.08); color:var(--red); }

  /* ── User Modal ── */
  .usr-modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:9999; align-items:center; justify-content:center; padding:16px;
  }
  .usr-modal-overlay.open { display:flex; }
  .usr-modal {
    background:var(--bg-modal-solid, #fff); border:1px solid var(--border-glass);
    border-radius:var(--radius); box-shadow:var(--shadow-lg);
    width:100%; max-width:480px; padding:24px;
    animation:usrModalIn 180ms cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes usrModalIn {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .usr-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
  }
  .usr-modal-title { font-weight:600; font-size:16px; }
  .usr-modal-fields { display:flex; flex-direction:column; gap:14px; }
  .usr-modal-fields .form-input,
  .usr-modal-fields .form-select {
    width:100%; padding:8px 10px; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:var(--bg-input);
    color:var(--text); font-size:13px; transition:border-color 0.15s, box-shadow 0.15s;
  }
  .usr-modal-fields .form-input:focus,
  .usr-modal-fields .form-select:focus {
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring);
  }
  .usr-modal-fields .form-input::placeholder { color:var(--text-muted); }
  .usr-modal-footer {
    display:flex; justify-content:flex-end; gap:10px;
    margin-top:24px; padding-top:16px; border-top:1px solid var(--border-light);
  }
  .usr-modal-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  /* Confirm Dialog */
  .usr-confirm-modal { max-width:380px; }
  .usr-confirm-icon {
    width:44px; height:44px; border-radius:50%;
    background:rgba(239,68,68,0.08); color:var(--red);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .usr-confirm-title { font-weight:600; font-size:16px; margin-bottom:6px; }
  .usr-confirm-body { font-size:13px; color:var(--text-secondary); }

  @media (max-width:768px) {
    .usr-table-wrap { overflow-x:auto; }
    .usr-account-fields { grid-template-columns:1fr; }
    .usr-modal-row2 { grid-template-columns:1fr; }
  }

  /* ── Rechteverwaltung: Einstellungen > Rechte & Gruppen + Rechte-Dialog (28.09.2026) ── */
  .rv-bereich { font-size:13px; font-weight:600; color:var(--text); margin:18px 0 6px; }
  .rv-herkunft { font-size:11px; font-weight:400; color:var(--brand); margin-left:8px; }
  .rv-perm-hilfe { font-size:12px; line-height:1.5; color:var(--text-muted); margin:0 0 10px; }
  .rv-warn { color:var(--orange); }
  .rv-perm-hilfe a { color:var(--brand); text-decoration:none; font-weight:500; }
  .rv-perm-hilfe a:hover { text-decoration:underline; }
  .rv-rechte-raster { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; }
  @media (max-width:640px) { .rv-rechte-raster { grid-template-columns:1fr; } }
  .rv-recht { display:flex; align-items:flex-start; gap:10px; padding:7px 8px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; }
  .rv-recht:hover { background:var(--bg-card-hover); }
  .rv-recht input { margin-top:2px; flex-shrink:0; }
  .rv-recht:has(input:disabled) { cursor:default; }
  .rv-recht-text { display:flex; flex-direction:column; min-width:0; }
  .rv-recht-name { font-weight:600; }
  .rv-recht-desc { font-size:11px; line-height:1.4; color:var(--text-muted); margin-top:1px; }

  /* Rechte-Dialog eines Benutzers: Kopf und Fuss fest, Mitte rollt */
  .rv-perm-modal { max-width:780px; padding:0; display:flex; flex-direction:column; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
  .rv-perm-kopf { padding:20px 24px 14px; border-bottom:1px solid var(--border-light); }
  .rv-perm-ergebnis { margin-top:8px; font-size:12px; line-height:1.6; color:var(--text-secondary); }
  .rv-perm-mitte { flex:1; min-height:0; overflow-y:auto; padding:0 24px 18px; }
  .rv-perm-abschnitt { padding-top:18px; }
  .rv-perm-h { font-size:14px; font-weight:600; color:var(--text); margin:0 0 2px; }
  summary.rv-perm-h { cursor:pointer; margin-bottom:8px; }
  .rv-einschraenkung { margin-top:18px; border-top:1px solid var(--border-light); }
  .rv-perm-gruppen { display:flex; flex-wrap:wrap; gap:8px; }
  .rv-gruppe-wahl { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border); border-radius:99px; font-size:13px; cursor:pointer; transition:border-color .15s, background .15s; }
  .rv-gruppe-wahl input { margin:0; }
  .rv-gruppe-wahl:has(input:checked) { border-color:var(--brand); background:var(--blue-bg); color:var(--brand); font-weight:600; }
  .rv-gruppe-wahl:has(input:focus-visible) { box-shadow:0 0 0 3px var(--brand-ring); }
  .rv-gruppe-zahl { font-size:11px; font-weight:400; color:var(--text-muted); }
  .rv-vorlagen { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
  .rv-perm-warnung { margin:0 24px 12px; padding:10px 12px; border:1px solid var(--orange); border-radius:var(--radius-sm); color:var(--orange); font-size:12px; line-height:1.5; }
  .rv-perm-fuss { margin:0; padding:14px 24px; }

  /* Gruppen: links Liste, rechts Editor */
  .rv-hinweis { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; margin-bottom:20px; border:1px solid var(--brand); border-radius:var(--radius); background:var(--blue-bg); font-size:13px; }
  .rv-hinweis p { margin:3px 0 0; font-size:12px; line-height:1.5; color:var(--text-secondary); }
  .rv-hinweis .btn { flex-shrink:0; }
  .rv-hinweis-warn { border-color:var(--orange); background:none; }
  .rv-md { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:start; }
  .rv-liste { display:flex; flex-direction:column; gap:2px; position:sticky; top:0; }
  .rv-liste-eintrag { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:9px 12px; border:none; border-left:2px solid transparent; border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:none; font:inherit; font-size:13px; color:var(--text); text-align:left; cursor:pointer; }
  .rv-liste-eintrag:hover { background:var(--bg-card-hover); }
  .rv-liste-eintrag.aktiv { background:var(--bg-card-hover); border-left-color:var(--brand); font-weight:600; }
  .rv-liste-eintrag:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
  .rv-liste-neu { color:var(--brand); margin-top:6px; }
  .rv-liste-meta { font-size:11px; font-weight:400; color:var(--text-muted); white-space:nowrap; margin-left:6px; }
  .rv-editor { background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px 24px; }
  .rv-editor-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; }
  .rv-editor-titel { font-size:16px; font-weight:600; margin:0; color:var(--text); }
  .rv-felder { display:grid; grid-template-columns:1fr 2fr; gap:14px; }
  .rv-feld { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; }
  .rv-felder .form-input { width:100%; }
  .rv-mitglieder { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .rv-mitglied { display:inline-flex; align-items:center; gap:2px; padding:3px 3px 3px 10px; border-radius:99px; background:var(--gray-100); color:var(--text-secondary); font-size:12px; }
  .rv-mitglied button { width:32px; height:32px; border:none; border-radius:50%; background:none; color:var(--text-muted); font-size:14px; line-height:1; cursor:pointer; }
  .rv-mitglied button:hover { color:var(--red); background:var(--bg-card-hover); }
  .rv-mitglied-neu { max-width:280px; }
  .rv-editor-fuss { display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border-light); }
  .rv-loeschen { color:var(--red); }
  @media (max-width:820px) {
    .rv-md { grid-template-columns:1fr; }
    .rv-liste { position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
    .rv-liste-eintrag { border:1px solid var(--border); border-radius:99px; padding:6px 12px; }
    .rv-liste-eintrag.aktiv { border-color:var(--brand); }
    .rv-liste-neu { margin-top:0; }
    .rv-felder { grid-template-columns:1fr; }
    .rv-editor { padding:16px; }
    .rv-hinweis { flex-direction:column; align-items:flex-start; }
  }

  /* Übersicht: Matrix im Rahmen der Benutzertabelle */
  .rv-toolbar { flex-wrap:wrap; }
  .rv-filter { display:flex; flex-wrap:wrap; gap:8px; }
  .rv-filter .form-input { width:auto; max-width:100%; min-width:170px; padding:6px 10px; font-size:13px; }
  .rv-matrix-wrap { overflow-x:auto; }
  .rv-matrix { width:100%; border-collapse:collapse; font-size:12px; }
  .rv-matrix th, .rv-matrix td { border-bottom:1px solid var(--border-light); padding:5px 7px; text-align:center; }
  .rv-matrix thead th { background:var(--gray-50); color:var(--text-muted); font-weight:600; }
  .rv-matrix tbody tr { cursor:pointer; }
  .rv-matrix tbody tr:hover td { background:var(--bg-card-hover); }
  .rv-matrix tbody tr:hover td.rv-sticky { background:linear-gradient(var(--bg-card-hover),var(--bg-card-hover)), var(--bg-modal-solid, var(--bg-card)); }
  .rv-matrix tbody tr:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
  .rv-matrix td[data-spalte] { color:var(--brand); font-size:16px; line-height:1; }
  .rv-sticky { position:sticky; left:0; z-index:1; background:var(--bg-modal-solid, var(--bg-card)); text-align:left !important; min-width:170px; padding-left:16px !important; }
  .rv-sticky .usr-tag { margin-top:3px; }
  .rv-bereichkopf { font-size:11px; border-left:1px solid var(--border-light); white-space:nowrap; }
  .rv-rechtkopf { height:150px; vertical-align:bottom; }
  .rv-rechtkopf span { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-size:12px; color:var(--text-secondary); }
  .rv-admin { text-align:left !important; color:var(--text-muted); }
  .rv-markiert { background:var(--blue-bg) !important; }
  .rv-legende { display:flex; flex-wrap:wrap; gap:6px 20px; padding:10px 20px; font-size:11px; color:var(--text-muted); border-top:1px solid var(--border-light); }

  /* === Template Manager === */
  .tpl-mgr-search { position:relative; margin-bottom:16px; }
  .tpl-mgr-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }
  .tpl-mgr-search .form-input { padding-left:36px; padding-right:32px; }
  .tpl-mgr-search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:none; background:var(--gray-200); color:var(--text-secondary); border-radius:50%; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
  .tpl-mgr-search-clear:hover { background:var(--gray-300); color:var(--text); }
  .tpl-mgr-stats { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--text-muted); margin-bottom:20px; }
  .tpl-mgr-stats-custom { color:var(--brand); font-weight:600; }
  .tpl-mgr-group { margin-bottom:8px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .tpl-mgr-group-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; user-select:none; background:var(--gray-50); transition:background 0.15s; }
  .tpl-mgr-group-header:hover { background:var(--gray-100); }
  .tpl-mgr-group-left { display:flex; align-items:center; gap:10px; }
  .tpl-mgr-group-chevron { width:14px; height:14px; color:var(--text-muted); transition:transform 0.2s; flex-shrink:0; }
  .tpl-mgr-group-icon { width:28px; height:28px; border-radius:7px; background:var(--brand-bg, rgba(7,161,226,0.08)); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .tpl-mgr-group-icon svg { width:15px; height:15px; }
  .tpl-mgr-group-title { font-size:13px; font-weight:600; color:var(--text); }
  .tpl-mgr-group-right { display:flex; align-items:center; gap:8px; }
  .tpl-mgr-group-count { font-size:11px; font-weight:600; color:var(--text-muted); background:var(--gray-100); padding:2px 8px; border-radius:99px; min-width:20px; text-align:center; }
  .tpl-mgr-group-body { padding:8px; background:var(--bg); }

  /* === Template Accordion (inside groups) === */
  .tpl-accordion { border:1px solid var(--border-light, var(--border)); border-radius:8px; overflow:hidden; margin-bottom:6px; }
  .tpl-header { padding:14px 18px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; background:var(--gray-50); transition:background 0.15s; user-select:none; }
  .tpl-header:hover { background:var(--gray-100); }
  .tpl-header .tpl-title { font-size:14px; font-weight:600; color:var(--text); }
  .tpl-header .tpl-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .tpl-header .tpl-chevron { width:16px; height:16px; color:var(--text-muted); transition:transform 0.2s; flex-shrink:0; }
  .tpl-accordion.open .tpl-chevron { transform:rotate(90deg); }
  .tpl-body { display:none; padding:16px 18px; border-top:1px solid var(--border-light); background:var(--bg); }
  .tpl-accordion.open .tpl-body { display:block; }
  .tpl-placeholders { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
  .tpl-placeholder-btn { padding:3px 10px; border:1px solid var(--brand); border-radius:99px; background:var(--brand-bg); color:var(--brand); font-size:11px; font-weight:500; cursor:pointer; transition:background 0.15s; }
  .tpl-placeholder-btn:hover { background:rgba(7,161,226,0.15); }
  .tpl-editor { border:1px solid var(--border); border-radius:var(--radius-sm); min-height:150px; padding:12px 16px; font-family:inherit; font-size:13px; color:var(--text); background:var(--bg-input); outline:none; overflow-y:auto; max-height:300px; }
  .tpl-editor:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
  .tpl-toolbar { display:flex; gap:2px; margin-bottom:6px; padding:4px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-sm); flex-wrap:wrap; }
  .tpl-toolbar button { width:30px; height:28px; border:none; border-radius:4px; background:transparent; cursor:pointer; font-size:14px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
  .tpl-toolbar button:hover { background:var(--gray-200); color:var(--text); }
  .tpl-toolbar .sep { width:1px; background:var(--border-light); margin:0 4px; }
  .tpl-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:10px; }
  .tpl-badge-custom { font-size:10px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--brand); color:white; margin-left:8px; }

  /* === Facilioo list === */
  .fac-list { max-height:300px; overflow-y:auto; border:1px solid var(--border-glass); border-radius:var(--radius); }
  .fac-item {
    padding:12px 14px; border-bottom:1px solid var(--border-light); cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background 0.1s;
  }
  .fac-item:last-child { border-bottom:none; }
  .fac-item:hover { background:var(--bg-card-hover); }
  .fac-item.selected { background:var(--brand-bg); border-left:3px solid var(--brand); }
  .fac-item .fi-title { font-size:14px; font-weight:500; flex:1; }
  .fac-item .fi-status { font-size:11px; padding:3px 10px; border-radius:99px; font-weight:600; }
  .fac-item .fi-status.open { background:var(--green-bg); color:var(--green); }
  .fac-item .fi-status.closed { background:var(--gray-100); color:var(--gray-400); }

  /* === Dashboard table === */
  .data-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
  .data-table th {
    text-align:left; padding:10px 10px; background:transparent;
    border-bottom:1px solid var(--border); font-weight:600; font-size:12px;
    color:var(--text-3); text-transform:none; letter-spacing:0;
    white-space:nowrap; position:sticky; top:0; position:relative; overflow:hidden;
  }
  .data-table th .col-resize {
    position:absolute; right:0; top:0; bottom:0; width:5px; cursor:col-resize;
    border-right:2px solid transparent; transition:border-color 0.15s;
  }
  .data-table th .col-resize:hover, .data-table th .col-resize.active { border-right-color:var(--brand); }
  .data-table .filter-row th { padding:3px 4px; background:transparent; border-bottom:1px solid var(--border-light); }
  .data-table .filter-row input {
    width:100%; box-sizing:border-box; padding:4px 6px; font-size:11px;
    border:1px solid var(--border); border-radius:6px; background:var(--bg-input);
    color:var(--text); outline:none; transition:border-color 0.15s;
  }
  .data-table .filter-row input:focus { border-color:var(--brand); }
  .data-table .filter-row input::placeholder { color:var(--text-muted); }
  .data-table td { height:44px; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; transition:background 0.15s; }
  .data-table .col-hide { display:none; }
  .data-table.show-details .col-hide { display:table-cell; }
  .data-table tr:hover td { background:var(--hover); }
  .data-table .cell-check { text-align:center; color:var(--green); }
  .data-table .cell-date { white-space:nowrap; color:var(--text-secondary); }
  .data-table .cell-nr { font-weight:600; color:var(--brand); }

  .clr-tab { padding:10px 20px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
  .clr-tab:hover { color:var(--text); }
  .clr-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
  .clr-obj-row { border-bottom:1px solid var(--border-light); }
  .clr-obj-header { display:flex; align-items:center; padding:10px 16px; cursor:pointer; gap:12px; transition:background .1s; }
  .clr-obj-header:hover { background:var(--bg-body); }
  .clr-obj-arrow { transition:transform .2s; font-size:10px; color:var(--gray-400); }
  .clr-obj-arrow.open { transform:rotate(90deg); }
  .clr-obj-detail { display:none; padding:0 16px 12px 44px; }

  .hndl-link { color:var(--brand); text-decoration:none; cursor:pointer; white-space:nowrap; }
  .hndl-link:hover { opacity:0.8; }
  .wp-badge { display:inline-block; padding:1px 4px; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; border-radius:3px; }
  .wp-badge:hover { opacity:0.7; background:var(--bg-hover); }

  .hndl-item { padding:11px 14px; border-bottom:1px solid var(--border-light); cursor:pointer; transition:all 0.15s; }
  .hndl-item:hover { background:var(--bg-card-hover); }
  .hndl-item.active { background:var(--brand-bg); border-left:3px solid var(--brand); }
  html.dark .hndl-item.active { background:rgba(7,161,226,0.12); }
  .hndl-item .hndl-whg { font-weight:600; font-size:13px; color:var(--text); }
  .hndl-item .hndl-name { font-size:12px; color:var(--text-secondary); margin-top:1px; }
  .hndl-item .hndl-pkto { font-size:11px; color:var(--text-muted); }

  .bj-select { padding:7px 30px 7px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--bg-input); color:var(--text); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; transition:border-color 0.2s, box-shadow 0.2s; }
  .bj-select:hover { border-color:var(--brand); }
  .bj-select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }

  /* === Empty state === */
  .empty-state { text-align:center; padding:56px 28px; color:var(--text-muted); }
  .empty-state svg { width:48px; height:48px; margin-bottom:14px; opacity:0.25; }
  .empty-state h4 { font-size:16px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
  .empty-state p { font-size:13px; }

  @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .fade-in { animation:fadeIn 0.25s ease-out; }
  @keyframes slideInRight { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:none; } }

  /* ── Hamburger Menu Button (hidden on desktop) ── */
  .hamburger-btn {
    display:none; background:none; border:none; cursor:pointer; padding:8px;
    color:var(--text); z-index:201; -webkit-tap-highlight-color:transparent;
  }
  .hamburger-btn svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
  .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99; -webkit-tap-highlight-color:transparent; }
  .sidebar-backdrop.open { display:block; }

  /* ══════════════════════════════════════════════════════════════════
     Beschlusssammlung — Search + Full-Width Timeline
     ══════════════════════════════════════════════════════════════════ */
  #pageBeschluesse { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',var(--font); }
  .bs-page { display:flex; flex-direction:column; height:calc(100vh - var(--header-h) - 48px); }

  /* ── Shared ── */
  .bs-search-box { position:relative; display:flex; align-items:center; }
  .bs-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); opacity:.55; }
  .bs-search-input {
    width:100%; height:36px; padding:0 12px 0 34px; font-size:14px;
    border:none; border-radius:10px; background:rgba(120,120,128,0.08);
    color:var(--text); outline:none; font-family:inherit; transition:all .2s ease; box-sizing:border-box;
  }
  html.dark .bs-search-input { background:rgba(120,120,128,0.2); }
  .bs-search-input:focus { background:rgba(120,120,128,0.12); box-shadow:0 0 0 3px rgba(0,122,255,0.18); }
  .bs-badge { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:99px; white-space:nowrap; letter-spacing:.2px; }
  .bs-stat-pill { font-size:12px; font-weight:500; color:var(--text-secondary); background:rgba(120,120,128,0.06); padding:5px 14px; border-radius:99px; }
  html.dark .bs-stat-pill { background:rgba(120,120,128,0.15); }
  .bs-empty-state { padding:64px 24px; text-align:center; color:var(--text-muted); }
  .bs-empty-spinner { width:28px; height:28px; border:3px solid rgba(120,120,128,0.15); border-top-color:#007AFF; border-radius:50%; margin:0 auto; animation:bsSpin .8s linear infinite; }
  @keyframes bsSpin { to { transform:rotate(360deg); } }
  .bs-highlight { background:rgba(255,204,0,0.25); color:inherit; padding:1px 2px; border-radius:3px; }

  /* ── Header: Suche oder Objekt-Anzeige ── */
  .bs-header { flex-shrink:0; position:relative; z-index:10; margin-bottom:12px; }

  /* State 1: Zentrierte Objekt-Suche */
  .bs-header-search {
    display:flex; justify-content:center; padding:24px 0 8px;
  }
  .bs-search-box--lg { min-width:320px; max-width:480px; width:100%; }
  .bs-search-box--lg .bs-search-input { height:40px; font-size:15px; padding-left:36px; border-radius:12px; }

  /* State 2: Objekt gewählt */
  .bs-header-active { animation: bsHeaderIn .35s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes bsHeaderIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

  .bs-header-obj {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:10px;
  }
  .bs-header-obj-info { display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; }
  .bs-header-obj-label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
  .bs-header-obj-name {
    font-size:22px; font-weight:700; letter-spacing:-.3px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:500px;
  }
  .bs-header-obj-close {
    background:rgba(120,120,128,0.08); border:none; cursor:pointer; color:var(--text-muted);
    padding:6px; border-radius:8px; display:flex; transition:all .15s;
  }
  .bs-header-obj-close:hover { background:rgba(255,59,48,0.1); color:#FF3B30; }
  html.dark .bs-header-obj-close { background:rgba(120,120,128,0.2); }

  .bs-header-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  /* Search clear button */
  .bs-search-clear {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:rgba(120,120,128,0.15); border:none; cursor:pointer; color:var(--text-muted);
    width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    transition:all .12s;
  }
  .bs-search-clear:hover { background:rgba(255,59,48,0.15); color:#FF3B30; }
  .bs-filter-search { position:relative; }
  /* Autocomplete */
  .bs-ac-wrap { position:relative; }
  .bs-ac-wrap .bs-search-input { width:220px; height:32px; font-size:13px; border-radius:8px; }
  .bs-ac-drop {
    display:none; position:absolute; top:100%; right:0; width:380px; margin-top:4px;
    background:var(--bg-card); border-radius:12px;
    box-shadow:0 4px 24px rgba(0,0,0,0.12), 0 0 0 .5px rgba(0,0,0,0.06);
    max-height:360px; overflow-y:auto; z-index:20; padding:6px;
  }
  html.dark .bs-ac-drop { background:rgba(30,30,35,0.95); box-shadow:0 4px 24px rgba(0,0,0,0.4), 0 0 0 .5px rgba(255,255,255,0.1); }
  .bs-ac-drop.open { display:block; }
  .bs-ac-item {
    padding:10px 12px; border-radius:8px; cursor:pointer; display:flex; align-items:center;
    justify-content:space-between; transition:background .12s ease;
  }
  .bs-ac-item:hover { background:rgba(0,122,255,0.06); }
  html.dark .bs-ac-item:hover { background:rgba(10,132,255,0.1); }
  .bs-ac-name { font-size:14px; font-weight:600; color:var(--text); }
  .bs-ac-sub { font-size:11px; color:#8E8E93; margin-top:1px; }
  .bs-ac-count { font-size:10px; font-weight:600; color:var(--text-muted); background:rgba(120,120,128,0.08); padding:2px 8px; border-radius:99px; flex-shrink:0; }
  html.dark .bs-ac-count { background:rgba(120,120,128,0.2); }
  /* Stat pills inline in topbar */
  .bs-topbar-stats { display:none; align-items:center; gap:6px; }
  .bs-topbar-stats.active { display:flex; }
  .bs-topbar-stats .bs-stat-pill { font-size:11px; padding:3px 10px; }
  /* Filter controls */
  .bs-select {
    height:32px; padding:0 28px 0 10px; font-size:12px; font-weight:500;
    border:none; border-radius:8px; background:rgba(120,120,128,0.08); color:var(--text);
    cursor:pointer; outline:none; font-family:inherit;
    appearance:none; -webkit-appearance:none;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%239ca3af"/></svg>');
    background-repeat:no-repeat; background-position:right 8px center; transition:all .2s ease;
  }
  html.dark .bs-select { background-color:rgba(120,120,128,0.2); }
  .bs-filter-search { flex:0 0 auto; }
  .bs-filter-search .bs-search-input { width:160px; height:32px; font-size:12px; padding-left:30px; }
  .bs-toolbar-btn {
    height:32px; padding:0 14px; font-size:12px; font-weight:500;
    border:none; border-radius:8px; background:rgba(120,120,128,0.08);
    color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:all .2s ease;
  }
  html.dark .bs-toolbar-btn { background:rgba(120,120,128,0.2); }
  .bs-toolbar-btn:hover { background:rgba(0,122,255,0.1); color:#007AFF; }
  .bs-controls-hidden { display:none !important; }

  /* ── Timeline scroll ── */
  .bs-timeline-scroll { flex:1; overflow-y:auto; padding-right:4px; }
  .bs-timeline-scroll::-webkit-scrollbar { width:5px; }
  .bs-timeline-scroll::-webkit-scrollbar-track { background:transparent; }
  .bs-timeline-scroll::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:99px; }
  html.dark .bs-timeline-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); }

  /* ── Timeline wrapper with spine ── */
  .bs-tl { position:relative; padding:4px 0 32px 56px; }
  .bs-tl::before {
    content:''; position:absolute; left:23px; top:0; bottom:0; width:2px;
    background:rgba(0,0,0,0.06); border-radius:1px;
  }
  html.dark .bs-tl::before { background:rgba(255,255,255,0.08); }
  /* Animate spine on load */
  .bs-tl--anim::before { animation:bsSpineIn .6s ease-out both; transform-origin:top; }
  @keyframes bsSpineIn { from { transform:scaleY(0); } to { transform:scaleY(1); } }

  /* ── Sticky year divider ── */
  .bs-year-div {
    position:sticky; top:0; z-index:5; margin-left:-56px; padding:16px 0 8px;
    background:var(--bg-body); display:flex; align-items:center; gap:0;
  }
  html.dark .bs-year-div { background:var(--bg-body); }
  .bs-year-div::before, .bs-year-div::after {
    content:''; flex:1; height:1px; background:var(--border-light);
  }
  .bs-year-div span {
    padding:0 16px; font-size:12px; font-weight:700; color:var(--text-muted);
    letter-spacing:.8px; text-transform:uppercase; white-space:nowrap;
  }

  /* ── Timeline node ── */
  .bs-node { position:relative; margin-bottom:10px; }
  /* Spine dot */
  .bs-node-dot {
    position:absolute; left:-41px; top:18px; width:14px; height:14px;
    border-radius:50%; background:#007AFF; border:2.5px solid var(--bg-body);
    z-index:2; box-shadow:0 0 0 2px rgba(0,122,255,0.15);
  }
  html.dark .bs-node-dot { background:#0A84FF; border-color:var(--bg-body); box-shadow:0 0 0 2px rgba(10,132,255,0.2); }
  /* Status tint on the dot */
  .bs-node-dot--green { background:#34C759; box-shadow:0 0 0 2px rgba(52,199,89,0.15); }
  .bs-node-dot--orange { background:#FF9500; box-shadow:0 0 0 2px rgba(255,149,0,0.15); }
  .bs-node-dot--red { background:#FF3B30; box-shadow:0 0 0 2px rgba(255,59,48,0.15); }

  /* Scroll-reveal animation */
  .bs-node { opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
  .bs-node.bs-visible { opacity:1; transform:translateY(0); }

  /* ── Meeting card ── */
  .bs-mc {
    border-radius:12px; overflow:hidden;
    background:var(--bg-card);
    box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 0 0 .5px rgba(0,0,0,0.04);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .bs-mc:hover { box-shadow:0 3px 12px rgba(0,0,0,0.08), 0 0 0 .5px rgba(0,0,0,0.04); }
  html.dark .bs-mc { background:var(--bg-card); box-shadow:0 1px 3px rgba(0,0,0,0.2), 0 0 0 .5px rgba(255,255,255,0.06); }
  html.dark .bs-mc:hover { box-shadow:0 3px 12px rgba(0,0,0,0.3), 0 0 0 .5px rgba(255,255,255,0.08); }

  /* Card header */
  .bs-mc-header {
    padding:14px 16px; display:flex; align-items:center; gap:12px;
    cursor:pointer; user-select:none; transition:background .15s ease;
  }
  .bs-mc-header:hover { background:rgba(0,122,255,0.02); }
  .bs-mc-chev { flex-shrink:0; color:var(--text-muted); opacity:.4; transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .bs-mc-info { flex:1; min-width:0; }
  .bs-mc-date { font-weight:700; font-size:17px; letter-spacing:-.3px; }
  .bs-mc-ort { font-size:13px; color:#8E8E93; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bs-mc-meta { display:flex; gap:8px; align-items:center; flex-shrink:0; }
  .bs-mc-count {
    font-size:10px; font-weight:700; color:#fff; background:#007AFF;
    min-width:22px; height:22px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
  }
  html.dark .bs-mc-count { background:#0A84FF; }

  /* Expanded body */
  .bs-mc-body { overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
  .bs-mc-divider { height:1px; background:var(--border-light); margin:0 16px; }
  .bs-mc-items { padding:8px 12px 12px 12px; }

  /* ── Resolution rows ── */
  .bs-res { border-radius:8px; margin-bottom:1px; }
  /* Sprungziel aus der Suche: kurz hervorgehoben, dann ausgeblendet */
  .bs-res { transition: box-shadow .6s ease, background-color .6s ease; }
  .bs-res--ziel { background: var(--brand-bg); box-shadow: 0 0 0 2px var(--brand); }
  .bs-res-row { padding:8px 10px; display:flex; align-items:flex-start; gap:10px; border-radius:8px; transition:background .15s ease; }
  .bs-res-row--click { cursor:pointer; }
  .bs-res-row--click:hover { background:rgba(0,122,255,0.04); }
  .bs-edit-btn { flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; border-radius:6px; opacity:0; transition:opacity .15s, background .15s; margin-top:1px; }
  .bs-res-row:hover .bs-edit-btn { opacity:1; }
  .bs-edit-btn:hover { background:rgba(0,122,255,0.1); color:var(--brand); }
  .bs-res-chev { flex-shrink:0; margin-top:4px; color:#8E8E93; transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .bs-res-top { flex-shrink:0; font-size:10px; font-weight:700; color:var(--text-muted); background:rgba(120,120,128,0.08); padding:2px 8px; border-radius:6px; margin-top:2px; }
  html.dark .bs-res-top { background:rgba(120,120,128,0.2); }
  .bs-res-title { flex:1; min-width:0; font-size:13px; line-height:1.5; color:var(--text); }
  .bs-res-expand { overflow:hidden; transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
  .bs-res-text-wrap { padding:2px 10px 10px 30px; }
  .bs-res-text { background:rgba(120,120,128,0.04); border-radius:10px; padding:12px 16px; font-size:12.5px; line-height:1.65; color:var(--text-secondary); }
  html.dark .bs-res-text { background:rgba(120,120,128,0.1); }

  /* Vote bar */
  .bs-vote-bar { display:flex; height:4px; border-radius:2px; overflow:hidden; margin-top:8px; gap:1px; }
  .bs-vote-bar-seg { min-width:2px; }
  .bs-votes { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-light); display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text-muted); }

  /* "Show more" link */
  .bs-more-btn {
    display:block; padding:6px 10px; font-size:12px; font-weight:500; color:#007AFF;
    background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
    border-radius:6px; transition:background .12s ease; margin-top:2px;
  }
  .bs-more-btn:hover { background:rgba(0,122,255,0.06); }
  .bs-spell-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid var(--border); cursor:pointer; color:var(--text-muted); font-size:11px; font-weight:500; padding:3px 8px; border-radius:6px; transition:all .15s; font-family:inherit; }
  .bs-spell-btn:hover { background:rgba(0,122,255,0.08); color:var(--brand); border-color:var(--brand); }
  .bs-spell-btn.loading { opacity:0.6; pointer-events:none; }

  /* ── Apple Magic Spellcheck Animation ── */
  @property --spell-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  @property --spell-progress { syntax: '<number>'; initial-value: 0; inherits: false; }

  .bs-spell-scan {
    position:relative; overflow:hidden;
  }
  .bs-spell-scan::before {
    content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:10; pointer-events:none;
    background: conic-gradient(from var(--spell-angle),
      transparent 0%,
      rgba(0,122,255,0.08) 10%,
      rgba(88,86,214,0.15) 20%,
      rgba(0,122,255,0.08) 30%,
      transparent 40%
    );
    animation: spellScanRotate 2s linear infinite;
    opacity:0; transition: opacity 0.4s ease;
  }
  .bs-spell-scan.active::before { opacity:1; }

  .bs-spell-scan::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:11; pointer-events:none;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0,122,255,0) 10%,
      rgba(88,86,214,0.6) 30%,
      rgba(175,82,222,0.8) 50%,
      rgba(88,86,214,0.6) 70%,
      rgba(0,122,255,0) 90%,
      transparent 100%
    );
    transform: translateY(calc(var(--spell-progress) * 100%));
    filter: blur(1px);
    box-shadow: 0 0 12px rgba(88,86,214,0.4), 0 0 30px rgba(175,82,222,0.2);
    opacity:0; transition: opacity 0.3s ease;
  }
  .bs-spell-scan.active::after { opacity:1; animation: spellScanLine 2.5s ease-in-out infinite; }

  @keyframes spellScanRotate {
    from { --spell-angle: 0deg; }
    to { --spell-angle: 360deg; }
  }
  @keyframes spellScanLine {
    0% { top: -2px; }
    50% { top: calc(100% - 2px); }
    100% { top: -2px; }
  }

  /* Shimmer-Glow auf dem Prüfen-Button während loading */
  .bs-spell-btn.loading {
    background: linear-gradient(135deg, rgba(88,86,214,0.08), rgba(175,82,222,0.12), rgba(0,122,255,0.08));
    background-size: 300% 300%;
    animation: spellBtnShimmer 1.5s ease infinite;
    border-color: rgba(88,86,214,0.3);
    color: #5856D6;
  }
  @keyframes spellBtnShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Ergebnis-Einblendung: Fehler-Markierungen faden ein */
  .bs-spell-error { animation: spellErrorIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  @keyframes spellErrorIn {
    from { background: rgba(88,86,214,0.3); transform: scale(1.1); }
    to { background: rgba(255,59,48,0.12); transform: scale(1); }
  }
  .bs-spell-accepted { animation: spellAcceptIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  @keyframes spellAcceptIn {
    from { background: rgba(255,255,255,0.4); transform: scale(1.08); }
    to { background: rgba(52,199,89,0.12); transform: scale(1); }
  }

  /* Toolbar Einblendung */
  .bs-spell-toolbar { animation: spellToolbarIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  @keyframes spellToolbarIn {
    from { opacity:0; transform: translateY(-8px) scale(0.97); }
    to { opacity:1; transform: translateY(0) scale(1); }
  }
  .bs-spell-error { background:rgba(255,59,48,0.12); text-decoration:underline wavy #FF3B30; text-decoration-skip-ink:none; cursor:pointer; padding:0 1px; border-radius:2px; position:relative; }
  html.dark .bs-spell-error { background:rgba(255,59,48,0.2); }
  .bs-spell-accepted { background:rgba(52,199,89,0.12); text-decoration:underline wavy #34C759; text-decoration-skip-ink:none; cursor:pointer; padding:0 1px; border-radius:2px; }
  html.dark .bs-spell-accepted { background:rgba(52,199,89,0.2); }
  .bs-spell-popup { position:fixed; z-index:9999; background:var(--bg-modal); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:10px; box-shadow:var(--shadow-lg); padding:6px 10px; display:flex; gap:6px; align-items:center; white-space:nowrap; font-size:12px; animation:spellPopupIn .2s cubic-bezier(.34,1.56,.64,1) both; }
  .bs-spell-popup::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border:5px solid transparent; }
  .bs-spell-popup.above::after { top:100%; border-top-color:var(--border-glass); }
  .bs-spell-popup.below::after { bottom:100%; border-bottom-color:var(--border-glass); }
  @keyframes spellPopupIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
  .bs-spell-popup-btn { background:none; border:1px solid var(--border); cursor:pointer; border-radius:5px; padding:2px 8px; font-size:11px; font-family:inherit; transition:all .12s; flex-shrink:0; }
  .bs-spell-popup-btn:hover { background:var(--bg-card-hover); }
  .bs-spell-popup-btn.accept { color:#34C759; border-color:#34C759; }
  .bs-spell-popup-btn.accept:hover { background:rgba(52,199,89,0.1); }
  .bs-spell-popup-btn.dismiss { color:#FF3B30; border-color:#FF3B30; }
  .bs-spell-popup-btn.dismiss:hover { background:rgba(255,59,48,0.1); }
  .bs-spell-popup input[type="text"] { border:1px solid var(--border); border-radius:5px; padding:2px 6px; font-size:12px; font-family:inherit; min-width:120px; background:var(--bg-card); color:var(--text); outline:none; }
  .bs-spell-popup input[type="text"]:focus { border-color:var(--brand); }
  .bs-spell-toolbar { display:flex; align-items:center; gap:8px; padding:6px 10px; margin:4px 0 8px 30px; background:rgba(0,122,255,0.04); border-radius:8px; font-size:12px; color:var(--text-secondary); }
  .bs-spell-toolbar button { font-size:11px; padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; font-family:inherit; transition:all .12s; }
  .bs-spell-toolbar button:hover { background:var(--bg-card-hover); }
  .bs-spell-toolbar button.primary { background:var(--brand); color:#fff; border:none; }
  .bs-spell-toolbar button.primary:hover { opacity:0.9; }

  /* ── Tablet (768px - 1024px) ── */
  @media (max-width:1024px) {
    .main-content { padding:20px; }
    .etv-checkin-topbar { margin:-20px -20px 12px; padding:14px 20px; top:-20px; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
    .dash-row-3 { grid-template-columns:repeat(3, 1fr); }
    .dash-row-2 { grid-template-columns:repeat(2, 1fr); }
    .dash-card { padding:18px 16px; border-radius:16px; }
    .dash-stat-value { font-size:18px; }
    .dash-stat-label { font-size:10px; }
    .stat-card .value { font-size:28px; }
    .modal { width:90vw; max-width:480px; }
  }

  /* ── Mobile filter toggle (hidden on desktop) ── */
  .mobile-filter-toggle { display:none; }
  /* ── Mobile (< 768px) ── */
  @media (max-width:767px) {
    :root { --header-h:56px; }
    .hamburger-btn { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border-radius:10px; margin-left:-10px; }
    .main { margin-left:0; }
    .main-header { padding:0 12px; }
    .main-header h2 { font-size:15px; }
    .main-content { padding:14px; }
    .etv-checkin-topbar { margin:-14px -14px 12px; padding:12px 14px; top:-14px; }
    .dash-greeting-text { font-size:22px; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:18px; }
    .stat-card { padding:16px; border-radius:16px; }
    .stat-card .stat-icon { width:34px; height:34px; border-radius:10px; margin-bottom:10px; }
    .stat-card .stat-icon svg { width:17px; height:17px; }
    .stat-card .value { font-size:26px; }
    .stat-card .label { font-size:10px; }
    .stat-card .sub { font-size:11px; }
    .dash-grid-2, .dash-grid-3, .dash-grid-4 { grid-template-columns:1fr; }
    .dash-row-3 { grid-template-columns:1fr; }
    .dash-row-2 { grid-template-columns:repeat(2, 1fr); }
    .dash-section-title { margin-top:24px; font-size:13px; }
    .dash-card { border-radius:16px; padding:16px 14px; }
    .dash-stat-value { font-size:18px; }
    .dash-stat-label { font-size:10px; }
    .dash-stat-row { gap:4px; }
    .card { border-radius:12px; }
    .card-header { padding:14px 16px; font-size:14px; }
    .card-body { padding:14px 16px; overflow-x:hidden; }
    .modal { width:95vw !important; max-width:none; margin:10px; max-height:90vh; border-radius:14px; }
    .overlay { padding:10px; align-items:flex-end; }
    .btn { padding:8px 14px; font-size:12px; min-height:40px; -webkit-tap-highlight-color:transparent; }
    .nav-item { padding:12px 16px; font-size:13px; min-height:44px; display:flex; align-items:center; }
    .profile-bar { padding:10px 14px; }
    .brand { padding:14px 16px; }
    .brand-text { font-size:16px; }
    .toggle-switch { width:44px; height:26px; }
    select, input[type="text"], input[type="password"], input[type="email"], textarea { font-size:16px !important; }

    /* ── Mobile Filter Toggle ── */
    .mobile-filter-toggle { display:block; margin-bottom:8px; }

    /* ── Dashboard Tables → Card Layout ── */
    .data-table { border:0 !important; width:100% !important; table-layout:fixed !important; }
    .data-table thead { display:none !important; }
    .data-table tbody { display:block !important; }
    .data-table tbody tr {
      display:block !important; background:var(--surface); border:1px solid var(--border);
      border-radius:16px; margin-bottom:10px; padding:12px 16px;
      box-shadow:var(--card-shadow);
    }
    .data-table tbody tr:hover td { background:transparent !important; }
    .data-table td {
      display:flex !important; justify-content:space-between; align-items:flex-start;
      padding:8px 0 !important; border-bottom:1px solid var(--border) !important;
      white-space:normal !important; word-break:break-word;
      font-size:14px; min-height:36px; height:auto; width:100% !important;
    }
    .data-table td:last-child { border-bottom:none !important; }
    .data-table td::before {
      content:attr(data-label); font-weight:600; font-size:12.5px;
      color:var(--text-3); margin-right:12px; flex-shrink:0; min-width:90px;
      text-transform:none; letter-spacing:0; line-height:1.6;
    }
    .data-table td > * { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
    /* Hide col-hide cells */
    .data-table td .col-hide, .data-table .col-hide { display:none !important; }
    /* Zellen mit — oder leere dezenter */
    .data-table td[data-label]:has(> span:only-child) { min-height:24px; }
    /* First cell (Nr.) as card header */
    .data-table td.cell-nr {
      font-size:15px !important; font-weight:600 !important;
      border-bottom:1px solid var(--border) !important;
      padding-bottom:10px !important; margin-bottom:2px;
      color:var(--brand-text) !important;
    }
    .data-table td.cell-nr::before { display:none; }
    /* Filter row */
    .data-table .filter-row { display:none !important; }
    .data-table.show-filters .filter-row { display:block !important; }
    .data-table.show-filters .filter-row th {
      display:block; padding:4px 0;
    }
    .data-table.show-filters .filter-row input {
      width:100%; padding:10px 14px; font-size:15px !important;
      border-radius:10px; box-sizing:border-box;
    }
    /* Column resize handles: hide */
    .data-table th .col-resize { display:none !important; }
    /* Action buttons: full touch targets */
    .data-table td a, .data-table td button {
      min-height:36px; display:inline-flex; align-items:center;
      -webkit-tap-highlight-color:transparent;
    }
    /* WP badges: bigger touch targets */
    .data-table .wp-badge { padding:4px 8px !important; font-size:13px !important; margin:2px; }

    /* ── Master-Detail Mobile (Beschlüsse) ── */
    .md-back-btn {
      display:none; align-items:center; gap:6px; padding:10px 14px; margin-bottom:8px;
      font-size:13px; font-weight:600; color:var(--blue); background:none; border:none; cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    .md-back-btn.show { display:flex; }
    .md-back-btn svg { width:18px; height:18px; }
    .md-mobile-hidden { display:none !important; }
    /* Beschlüsse */
    /* Beschlusssammlung — iPhone-optimiert: kein Spine, Card-basiert */
    .bs-page { height:auto; min-height:calc(100vh - var(--header-h) - 48px); }
    .bs-header-search { padding:12px 0 4px; }
    .bs-search-box--lg { min-width:0; max-width:100%; }
    /* Header: Objekt-Name + Close kompakt */
    .bs-header-obj { flex-wrap:wrap; gap:8px; }
    .bs-header-obj-info { gap:4px; flex:1; min-width:0; }
    .bs-header-obj-label { font-size:10px; }
    .bs-header-obj-name { font-size:17px; max-width:100%; white-space:normal; line-height:1.25; }
    /* Stats unter dem Namen */
    .bs-topbar-stats { flex-wrap:wrap; gap:4px; width:100%; }
    .bs-topbar-stats .bs-stat-pill { font-size:10px; padding:2px 8px; }
    /* Controls: volle Breite, wrappen */
    .bs-header-controls { flex-wrap:wrap; gap:6px; }
    .bs-header-controls > * { flex-shrink:1; min-width:0; }
    .bs-select { flex:0 1 auto; min-width:0; max-width:45%; }
    .bs-filter-search { flex:1 1 50%; min-width:100px; }
    .bs-filter-search .bs-search-input { width:100%; font-size:13px; }
    .bs-toolbar-btn { font-size:11px; padding:6px 12px; flex:0 0 auto; white-space:nowrap; }
    /* Autocomplete: volle Breite, nicht nach rechts versetzt */
    .bs-ac-wrap { width:100%; }
    .bs-ac-wrap .bs-search-input { width:100%; }
    .bs-ac-drop { width:100% !important; right:auto; left:0; max-height:50vh; }
    .bs-ac-name { font-size:13px; }
    .bs-ac-sub { font-size:10px; }
    /* Timeline: Spine komplett entfernen auf iPhone */
    .bs-tl { padding-left:0; }
    .bs-tl::before { display:none; }
    .bs-node-dot { display:none; }
    .bs-node { margin-bottom:8px; }
    /* Year-Divider: ohne Spine-Offset */
    .bs-year-div { margin-left:0; padding:12px 0 6px; }
    .bs-year-div span { font-size:11px; padding:0 12px; }
    /* Meeting Cards: volle Breite, abgerundeter */
    .bs-mc { border-radius:14px; }
    .bs-mc-header { padding:12px 14px; gap:10px; }
    .bs-mc-date { font-size:15px; }
    .bs-mc-ort { font-size:12px; }
    .bs-mc-meta { gap:5px; flex-wrap:wrap; justify-content:flex-end; }
    .bs-mc-meta .bs-badge { font-size:9px; padding:2px 7px; }
    .bs-mc-count { width:20px; height:20px; font-size:9px; min-width:20px; }
    /* Resolution Rows: Touch-optimiert */
    .bs-res-row { padding:10px 8px; gap:6px; flex-wrap:wrap; }
    .bs-res-top { font-size:9px; padding:2px 6px; }
    .bs-res-title { font-size:13px; line-height:1.45; flex-basis:calc(100% - 80px); }
    .bs-res-chev { margin-top:2px; }
    /* Edit-Button auf Mobile immer sichtbar (kein hover) */
    .bs-edit-btn { opacity:0.5; }
    /* Expanded Beschlusstext: mehr Platz */
    .bs-res-text-wrap { padding:4px 4px 10px 4px; }
    .bs-res-text { padding:10px 12px; font-size:12px; line-height:1.6; }
    .bs-votes { gap:6px; font-size:10px; flex-wrap:wrap; }
    /* Spellcheck: auf Mobile komplett ausblenden (Desktop-only Feature) */
    .bs-spell-btn { display:none !important; }
    .bs-spell-toolbar { display:none !important; }
    .bs-spell-popup { display:none !important; }
    /* Items padding */
    .bs-mc-items { padding:6px 6px 10px 6px; }
    /* Rechnungseingang: eigene Regeln in css/seiten/rechnungseingang.css (Redesign 28.09.2026) */
    #reAdditionalFields [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
    #reAdditionalFields [style*="grid-column:span 3"] { grid-column:span 1 !important; }

  }

  /* ── Small Phone (< 400px) ── */
  @media (max-width:399px) {
    .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .stat-card { padding:12px; border-radius:14px; }
    .stat-card .value { font-size:20px; }
    .stat-card .stat-icon { width:28px; height:28px; margin-bottom:6px; border-radius:8px; }
    .stat-card .stat-icon svg { width:14px; height:14px; }
    .stat-card .sub { font-size:10px; }
    .dash-greeting-text { font-size:18px; }
    .dash-stat-value { font-size:18px; }
    .dash-card { padding:14px 12px; }
    .main-header h2 { font-size:13px; }
    .brand-text { font-size:14px; }
    .brand-sub { display:none; }
    .data-table td { font-size:12px; }
    .data-table td::before { min-width:70px; font-size:10px; }
  }

  /* ============================================================
     ETV — Eigentümerversammlung Design System
     ============================================================ */
  #pageEtv table, #pageEtv .btn, #pageEtv input, #pageEtv select, #pageEtv textarea { font-family: inherit; }
  .etv-phase { animation: etvFadeIn 0.3s ease-out; }
  @keyframes etvFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

  /* Phase Header */
  .etv-phase-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .etv-phase-header h3 { margin:0; }
  .etv-phase-header .spacer { flex:1; }

  /* Status Badge */
  .etv-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; }
  .etv-badge.draft { background:var(--badge-draft-bg); color:var(--badge-draft-text); }
  .etv-badge.checkin { background:var(--clr-info-bg); color:var(--brand-text); }
  .etv-badge.running { background:var(--clr-warn-bg); color:var(--orange-text); }
  .etv-badge.closed { background:var(--clr-ok-bg); color:var(--green-text); }

  /* Check-in Sticky-Kopfleiste: full-bleed (volle Breite, bündig unter der globalen .main-header), deckend angepinnt.
     Negative Margins kompensieren das Padding von .main-content (28/20/14px je Breakpoint). */
  .etv-checkin-topbar {
    position:sticky; top:-28px; z-index:40;
    background:var(--bg-body);
    margin:-28px -28px 12px; padding:14px 28px;
    border-bottom:1px solid var(--border);
    box-shadow:0 6px 14px -8px rgba(0,0,0,0.30);
  }

  /* Check-in Tile */
  .etv-tile { padding:14px; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); backdrop-filter:var(--glass-blur); cursor:pointer; transition:all 0.2s ease; user-select:none; min-height:80px; }
  .etv-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .etv-top-text p { margin:4px 0; }
  .etv-top-text ul, .etv-top-text ol { margin:4px 0; padding-left:20px; }
  .etv-top-text li { margin:2px 0; }
  .etv-tile:active { transform:scale(0.98); }
  .etv-tile.selected { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(7,161,226,0.25); transform:translateY(-2px); }
  @keyframes etvSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
  .etv-tile.present { border-color:var(--green); background:rgba(34,197,94,0.08); }
  .etv-tile.represented { border-color:var(--brand); background:var(--brand-tint); }
  .etv-tile.left { border-color:var(--orange); background:var(--orange-tint); }
  .etv-tile .tile-name { font-weight:600; font-size:13px; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
  .etv-tile .tile-haus { font-size:12px; font-weight:600; color:var(--brand); margin-top:1px; overflow-wrap:anywhere; }
  .etv-tile .tile-unit { font-size:11px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .etv-tile .tile-mea { font-size:11px; color:var(--text-muted); }
  .etv-tile .tile-proxy { font-size:10px; color:var(--brand-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .etv-tile .tile-late { font-size:10px; font-weight:600; color:var(--orange-text); background:var(--orange-tint); border:1px solid var(--clr-warn-border); border-radius:var(--radius-sm); padding:2px 6px; margin-top:4px; display:inline-block; }
  .etv-tile .tile-status { font-size:10px; margin-top:4px; font-weight:600; }
  .etv-tile .tile-status.present { color:var(--green); }
  .etv-tile .tile-status.represented { color:var(--brand-text); }
  .etv-tile .tile-status.left { color:var(--orange-text); }
  .etv-tile .tile-status.absent { color:var(--text-muted); }

  /* Vote Counter */
  .etv-vote-counter { text-align:center; }
  .etv-vote-counter .count { font-size:28px; font-weight:700; min-width:48px; display:inline-block; font-variant-numeric:tabular-nums; }
  .etv-vote-counter .label { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
  .etv-vote-counter.yes .count { color:var(--green); }
  .etv-vote-counter.no .count { color:var(--red); }

  /* Vote Buttons */
  .etv-vote-btn { min-height:32px; min-width:40px; font-size:11px; transition:all 0.15s; }
  .etv-vote-btn.selected-yes { background:var(--green) !important; color:#fff !important; border-color:var(--green) !important; }
  .etv-vote-btn.selected-no { background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; }
  .etv-vote-btn.selected-abstain { background:#6b7280 !important; color:#fff !important; border-color:#6b7280 !important; }
  .etv-quick-yes { background:rgba(34,197,94,0.1); color:var(--green); }
  .etv-quick-yes:hover { background:rgba(34,197,94,0.2); }
  .etv-quick-no { background:rgba(239,68,68,0.1); color:var(--red); }
  .etv-quick-no:hover { background:rgba(239,68,68,0.2); }

  /* Result Banner */
  .etv-result { padding:16px; border-radius:var(--radius-sm); text-align:center; font-weight:600; font-size:15px; animation:etvFadeIn 0.3s ease-out; margin-top:12px; }
  .etv-result.passed { background:rgba(34,197,94,0.12); color:var(--green); border:1px solid var(--green); }
  .etv-result.failed { background:rgba(239,68,68,0.12); color:var(--red); border:1px solid var(--red); }
  .etv-result.discussion { background:rgba(59,130,246,0.08); color:#3b82f6; border:1px solid #3b82f6; }
  .etv-result.skipped { background:rgba(107,114,128,0.08); color:var(--text-muted); border:1px solid var(--border); }

  /* TOP Chips */
  /* Online-Vollmacht, Lese-Ansicht (Pill-Klick in der Eigentuemer-Tabelle) */
  .etv-ovm-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .etv-ovm-head h4 { margin:0; font-size:17px; font-weight:700; line-height:1.25; }
  .etv-ovm-sub { font-size:12.5px; color:var(--text-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .etv-ovm-when { flex:none; background:var(--brand-bg); color:var(--brand); border:1px solid var(--brand-ring);
                  border-radius:999px; padding:4px 11px; font-size:11px; font-weight:600; white-space:nowrap; }
  .etv-ovm-sum { display:flex; gap:26px; padding:11px 2px 13px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .etv-ovm-sum div { display:flex; flex-direction:column; gap:1px; }
  .etv-ovm-sum b { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; color:var(--text-muted); }
  .etv-ovm-sum span { font-size:11px; color:var(--text-muted); }
  .etv-ovm-sum .yes b { color:var(--green); }
  .etv-ovm-sum .no b { color:var(--red); }
  .etv-ovm-list { max-height:44vh; overflow-y:auto; margin-top:4px; }
  .etv-ovm-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:13px; }
  .etv-ovm-row:last-child { border-bottom:none; }
  .etv-ovm-row .nr { flex:none; width:44px; color:var(--text-muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
  .etv-ovm-row .ti { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .etv-ovm-row .etv-badge { flex:none; min-width:84px; text-align:center; }
  .etv-ovm-row .etv-badge.yes { background:rgba(34,197,94,0.12); color:var(--green); }
  .etv-ovm-row .etv-badge.no { background:rgba(239,68,68,0.12); color:var(--red); }
  .etv-ovm-row .etv-badge.abstain { background:rgba(107,114,128,0.14); color:var(--text-muted); }
  .etv-ovm-row .etv-badge.none { background:transparent; color:var(--text-muted); font-weight:400; }
  .etv-ovm-note { font-size:12.5px; line-height:1.5; margin-top:14px; padding:9px 12px; background:var(--bg-input);
                  border-left:3px solid var(--brand-ring); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
  .etv-ovm-foot { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
  @media (max-width:520px) {
    .etv-ovm-head { flex-direction:column-reverse; align-items:stretch; gap:8px; }
    .etv-ovm-when { align-self:flex-start; }
    .etv-ovm-sum { gap:16px; flex-wrap:wrap; }
    .etv-ovm-row { flex-wrap:wrap; gap:4px 10px; }
    .etv-ovm-row .ti { flex:1 1 100%; order:3; white-space:normal; }
    .etv-ovm-row .etv-badge { margin-left:auto; }
    .etv-ovm-foot { flex-direction:column-reverse; align-items:stretch; }
    .etv-ovm-foot .btn { width:100%; }
  }
  .etv-chip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; }
  .etv-chip:hover { transform:scale(1.15); }
  /* Kontrast >= 4,5:1 hell und dunkel: dunkles Gruen + weisse Schrift (hell), helles Gruen + dunkle Schrift (dunkel) */
  .etv-chip.done { background:var(--green-text); color:var(--surface-solid); }
  .etv-chip.active { background:var(--primary); color:#fff; box-shadow:0 0 0 3px var(--brand-ring); }
  .etv-chip.pending { background:var(--bg-input); color:var(--text-muted); }
  .etv-chip.skipped { background:var(--orange); color:#fff; }

  /* Quorum Bar */
  .etv-quorum-bar { position:sticky; bottom:0; left:0; right:0; background:var(--bg-card); backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy); border-top:1px solid var(--border); padding:12px 20px; padding-bottom:max(12px, env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; justify-content:space-between; z-index:10; border-radius:0 0 var(--radius) var(--radius); }

  /* Owner Row */
  .etv-owner-row { padding:8px 10px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; font-size:13px; border-radius:6px; transition:background 0.15s; margin-bottom:2px; }
  .etv-owner-row:hover { background:var(--bg-card-hover); }
  .etv-owner-row.has-proxy { background:rgba(59,130,246,0.06); border-left:3px solid #3b82f6; padding-left:10px; }
  .etv-owner-row .owner-proxy { font-size:11px; color:#3b82f6; font-weight:600; }
  .etv-owner-row .owner-instruction { font-size:10px; color:var(--text-muted); font-style:italic; margin-top:1px; }
  .etv-owner-row .owner-detail { font-size:11px; color:var(--text-muted); }

  /* Agenda Item */
  .etv-agenda-item { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; transition:all 0.15s; }
  .etv-agenda-item:hover { box-shadow:var(--shadow-sm); }
  .etv-agenda-item.sonstiges { border-style:dashed; }
  .etv-agenda-item .agenda-header { display:flex; justify-content:space-between; align-items:center; }
  .etv-agenda-item .agenda-title { font-size:13px; font-weight:600; }
  .etv-agenda-item .agenda-text { font-size:12px; color:var(--text-muted); margin:4px 0 0; white-space:pre-wrap; }

  /* Modal */
  .etv-modal-overlay { position:fixed; inset:0; background:rgba(8,12,20,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
  .etv-modal-overlay.visible { display:flex; }
  .etv-modal { background:var(--bg-modal-solid); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); max-height:88vh; max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:modalIn 0.25s ease-out; }
  .etv-modal-sm { max-width:400px; width:90%; }
  .etv-modal-md { max-width:500px; width:90%; }
  .etv-modal-header { padding:20px 24px; border-bottom:1px solid var(--border-light); }
  .etv-modal-header h4 { margin:0; font-size:16px; font-weight:700; }
  .etv-modal-body { padding:20px 24px; }
  .etv-modal-footer { padding:16px 24px; border-top:1px solid var(--border-light); display:flex; gap:8px; justify-content:flex-end; }

  /* ── Neue-ETV-Dialog: Dokument-Auswahl + Import-Fortschritt (etvnw-) ── */
  .etvnw-eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin:0 0 8px; }
  .etvnw-eyebrow .etvnw-stepnum { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:6px; background:var(--brand); color:#fff; font-size:11px; font-weight:800; letter-spacing:0; }
  .etvnw-doclist { display:flex; flex-direction:column; gap:6px; }
  .etvnw-doc { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); cursor:pointer; text-align:left; width:100%; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; }
  .etvnw-doc:hover { border-color:var(--brand); background:var(--bg-card-hover, var(--bg-input)); }
  .etvnw-doc:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  .etvnw-doc.selected { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
  .etvnw-doc.disabled { cursor:default; opacity:0.55; }
  .etvnw-doc.disabled:hover { border-color:var(--border); background:var(--bg-card); }
  .etvnw-doc-ico { flex:0 0 34px; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(7,161,226,0.1); color:var(--brand); }
  .etvnw-doc.disabled .etvnw-doc-ico { background:var(--bg-input); color:var(--text-muted); }
  .etvnw-doc-ico svg { width:18px; height:18px; }
  .etvnw-doc-main { flex:1; min-width:0; }
  .etvnw-doc-title { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .etvnw-doc-meta { font-size:11px; color:var(--text-muted); margin-top:2px; display:flex; gap:10px; }
  .etvnw-chip { flex:0 0 auto; font-size:10px; font-weight:600; border-radius:999px; padding:2px 8px; white-space:nowrap; }
  .etvnw-chip-word { color:var(--green); border:1px solid var(--green); background:transparent; }
  .etvnw-chip-none { color:var(--text-muted); border:1px solid var(--border); background:transparent; }
  .etvnw-skel { height:54px; border-radius:12px; border:1px solid var(--border-light); background:linear-gradient(100deg, var(--bg-input) 40%, var(--bg-card) 50%, var(--bg-input) 60%); background-size:200% 100%; animation:etvnwShimmer 1.4s linear infinite; }
  @keyframes etvnwShimmer { from { background-position:120% 0; } to { background-position:-80% 0; } }
  .etvnw-empty { font-size:13px; color:var(--text-muted); padding:12px; border:1px dashed var(--border); border-radius:12px; text-align:center; }
  .etvnw-korrbtn { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; font-weight:600; color:var(--brand); background:transparent; border:1px solid var(--border); border-radius:10px; padding:7px 12px; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
  .etvnw-korrbtn:hover { border-color:var(--brand); background:rgba(7,161,226,0.06); }
  .etvnw-busy { pointer-events:none; opacity:0.5; }
  /* Import-Fortschritt als Deck-Overlay über dem ganzen Neue-ETV-Dialog (Kind von .etv-modal-overlay):
     deckt Modal + Backdrop ab → Klicks auf Abbrechen/Backdrop laufen ins Leere, bis der Import fertig ist */
  .etvnw-busylayer { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,12,20,0.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .etvnw-busylayer .etvnw-progress { margin-top:0; width:min(440px,100%); box-shadow:var(--shadow-lg); }
  .etvnw-progress-hint { font-size:11.5px; color:var(--text-muted); margin-top:10px; }
  /* Import-Fortschrittskarte */
  .etvnw-progress { margin-top:12px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-card); }
  .etvnw-progress.error { border-color:var(--red); }
  .etvnw-progress-doc { font-size:12px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:10px; }
  .etvnw-bar { height:6px; border-radius:999px; background:var(--bg-input); overflow:hidden; }
  .etvnw-bar-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--brand), var(--brand-light, var(--brand))); transition:width 0.35s ease; }
  .etvnw-progress-step { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); margin-top:10px; min-height:18px; }
  .etvnw-progress-step .etvnw-spin { width:13px; height:13px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:etvnwSpin 0.8s linear infinite; flex:0 0 auto; }
  @keyframes etvnwSpin { to { transform:rotate(360deg); } }
  .etvnw-progress-err { font-size:12.5px; color:var(--red); margin-top:10px; }

  /* Individual Vote Row */
  .etv-indiv-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--border-light); font-size:12px; transition:background 0.15s; }
  .etv-indiv-row:hover { background:var(--bg-card-hover); }
  .etv-indiv-row .indiv-name { flex:1; min-width:0; }
  .etv-indiv-row .indiv-buttons { display:flex; gap:3px; flex-shrink:0; }

  /* Utility */
  .etv-form-section { padding:16px; background:var(--bg-input); border-radius:var(--radius-sm); margin-bottom:16px; }
  .etv-checkin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; padding-bottom:80px; }
  .etv-meta { display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-bottom:16px; flex-wrap:wrap; }
  .etv-meta-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; font-size:12px; }
  .etv-loading { pointer-events:none; opacity:0.6; }

  /* ETV List Cards */
  .etv-list-card { padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; transition:all 0.2s ease; background:var(--bg-card); backdrop-filter:var(--glass-blur); }
  .etv-list-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--brand); }
  .etv-list-card:active { transform:scale(0.99); }
  /* ── ETV-Liste: LIVE-Indikator (laufende Versammlung) ── */
  .etv-live-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:0.5px; background:color-mix(in srgb, var(--red) 13%, transparent); color:var(--red); }
  .etv-live-dot { width:8px; height:8px; border-radius:50%; background:var(--red); animation:etvLivePulse 1.2s ease-in-out infinite; }
  @keyframes etvLivePulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(239,68,68,0.45); } 50% { opacity:0.55; box-shadow:0 0 0 5px rgba(239,68,68,0); } }
  .etv-live-row { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:var(--red); font-weight:600; flex-wrap:wrap; }
  .etv-live-row .etv-live-elapsed { font-variant-numeric:tabular-nums; }
  .etv-live-row .etv-live-top { color:var(--text-muted); font-weight:500; }
  .etv-list-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .etv-list-card-name { font-weight:600; font-size:14px; }
  .etv-list-card-detail { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .etv-list-card-actions { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
  .etv-list-card-actions .btn { font-size:11px; }

  /* Prep Phase Grid (2 columns → 1 on mobile) */
  .etv-prep-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:768px) { .etv-prep-grid { grid-template-columns:1fr; } }
  .etv-vote-btn { min-height:44px; }
  .etv-chip { min-width:32px; min-height:32px; width:32px; height:32px; }
  /* Touch-Ziele NUR bei grobem Zeiger (iPad, Telefon). Am PC bleibt das Layout kompakt, auch im
     schmalen Fenster; ein iPad Pro quer (1194 px) greift trotzdem. */
  @media (pointer:coarse) {
    #pageEtv .btn-sm { min-height:44px; }
    .etv-chip { min-width:44px; min-height:44px; width:44px; height:44px; }
  }

  /* iPad Touch Targets */
  @media (max-width:1024px) {
    .etv-checkin-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
    .etv-tile { padding:10px; min-height:64px; }
    .etv-tile .tile-name { font-size:14px; }
    .etv-tile .tile-status { font-size:11px; }
    /* Check-in Phase: kompakt auf iPad */
    #etvCheckinTitle { font-size:14px !important; }
    /* Running Phase: Buttons wrappen */
    #etvTopActions { flex-wrap:wrap; }
    #etvTopActions .btn { font-size:12px; min-width:0; }
    /* Schnellerfassung responsive */
    #etvVoteQuick > div:nth-child(2) { gap:12px !important; }
    /* Einzelstimmen Header */
    #etvVoteIndividual > div:first-child { flex-wrap:wrap; }
    #etvVoteIndividual > div:first-child input[type="text"] { width:100% !important; order:10; }
    /* Vote Result Banner: kein Overflow */
    .etv-result { word-break:break-word; overflow-wrap:break-word; }
  }
  /* Mobile */
  @media (max-width:768px) {
    .etv-meta-grid { grid-template-columns:1fr 1fr; }
    .etv-checkin-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .etv-phase-header { flex-wrap:wrap; }
    /* Schnellerfassung: vertikal auf Handy */
    #etvVoteQuick > div:nth-child(2) { flex-direction:column; gap:16px !important; }
  }
  /* Mobile Quorum Bar */
  @media (max-width:768px) {
    .etv-quorum-bar { flex-direction:column; gap:8px; padding:10px 16px; }
    .etv-quorum-bar > div { width:100%; justify-content:center; }
    .etv-quorum-bar .btn { width:100%; }
    .etv-list-card-actions { flex-wrap:wrap; }
    .card-header { flex-wrap:wrap; gap:8px; }
    .card-header h3 { font-size:14px; }
  }
  /* Extra-Small Phones */
  @media (max-width:400px) {
    .etv-checkin-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .etv-vote-counter .count { font-size:22px; }
    .etv-meta-grid { grid-template-columns:1fr; }
    .etv-tile { padding:10px; min-height:60px; }
    .etv-tile .tile-name { font-size:12px; }
  }

  /* ═══ ETV Signatur-Banner (iPad/Tablet) ═══ */
  .etv-sign-banner {
    display:flex; align-items:center; gap:16px;
    padding:18px 20px; margin-bottom:16px;
    border-radius:var(--radius);
    background:linear-gradient(135deg, #07a1e2, #0284c7);
    color:#fff; cursor:pointer;
    transition:all 0.2s ease;
    box-shadow:0 4px 16px rgba(7,161,226,0.3);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  .etv-sign-banner:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(7,161,226,0.4); }
  .etv-sign-banner:active { transform:scale(0.98); }
  .etv-sign-banner-icon {
    width:56px; height:56px; border-radius:14px;
    background:rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .etv-sign-banner-title { font-weight:700; font-size:17px; letter-spacing:-0.02em; }
  .etv-sign-banner-sub { font-size:13px; opacity:.8; margin-top:2px; }

  /* ═══ ETV Signature — Liquid Glass UI ═══ */

  /* Fullscreen container */
  .etv-sig-screen {
    position:fixed; inset:0; z-index:900;
    background:var(--bg-body);
    display:flex; flex-direction:column;
    animation:etvSlideUp 0.35s cubic-bezier(0.2, 0, 0, 1);
    /* iOS safe areas */
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    /* iOS viewport fix */
    height:100dvh; height:-webkit-fill-available;
    overscroll-behavior:none; overflow:hidden;
  }
  @keyframes etvSlideUp {
    from { transform:translateY(20px); opacity:0; }
    to { transform:translateY(0); opacity:1; }
  }

  .etv-sig-header {
    display:flex; align-items:center; gap:12px;
    padding:14px 20px;
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    border-bottom:1px solid var(--border-glass);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  }
  html.dark .etv-sig-header { box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }

  .etv-sig-footer {
    padding:12px 20px;
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    border-top:1px solid var(--border-glass);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px;
  }
  html.dark .etv-sig-footer { box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }

  .etv-sig-search {
    width:100%; font-size:18px; height:52px;
    border-radius:var(--radius);
    padding:0 16px 0 48px;
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--border);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.3);
    outline:none; color:var(--text); font-family:var(--font);
    transition:all 0.25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .etv-sig-search:focus {
    border-color:var(--brand);
    box-shadow:var(--shadow-md), 0 0 0 3px var(--brand-ring);
  }
  .etv-sig-search::placeholder { color:var(--text-muted); }
  html.dark .etv-sig-search { box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04); }

  /* Owner Card */
  .etv-sig-card {
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; margin-bottom:8px;
    border-radius:var(--radius);
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:2px solid var(--border);
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:all 0.2s cubic-bezier(0.2, 0, 0, 1);
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none; user-select:none;
    min-height:68px;
  }
  .etv-sig-card:active { transform:scale(0.97); background:var(--bg-card-hover); }
  .etv-sig-card.signed {
    border-color:rgba(34,197,94,0.2);
    background:linear-gradient(135deg, var(--bg-card), rgba(34,197,94,0.03));
    opacity:0.75;
  }
  .etv-sig-card.signed:active { opacity:1; }

  .etv-sig-dot {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all 0.3s ease;
    -webkit-user-select:none; user-select:none;
  }
  .etv-sig-dot.signed { background:rgba(34,197,94,0.12); }
  .etv-sig-dot.present { background:rgba(7,161,226,0.1); border:2px solid rgba(7,161,226,0.25); }
  .etv-sig-dot.absent { background:var(--bg-input); }

  /* Canvas Modal */
  .etv-sig-modal {
    position:fixed; inset:0; z-index:1100;
    background:var(--bg-body);
    display:none; flex-direction:column;
    animation:etvFadeScale 0.3s cubic-bezier(0.2, 0, 0, 1);
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .etv-sig-modal.visible { display:flex; }
  @keyframes etvFadeScale {
    from { opacity:0; transform:scale(0.97); }
    to { opacity:1; transform:scale(1); }
  }

  .etv-sig-canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:16px 20px; }
  .etv-sig-canvas-inner { width:100%; max-width:900px; height:100%; display:flex; flex-direction:column; }
  .etv-sig-canvas-border {
    flex:1; border:2px solid var(--border);
    border-radius:var(--radius); background:#fff;
    touch-action:none; position:relative; min-height:200px;
    box-shadow:var(--shadow), inset 0 2px 4px rgba(0,0,0,0.02);
    transition:border-color 0.2s;
  }
  .etv-sig-canvas-border.drawing { border-color:var(--brand); }

  .etv-sig-save-btn {
    font-size:17px; min-height:52px;
    padding:0 36px; border-radius:var(--radius);
    font-weight:700; letter-spacing:-0.01em;
    transition:all 0.2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .etv-sig-save-btn:active { transform:scale(0.96); }
  .etv-sig-save-btn:disabled { opacity:0.6; pointer-events:none; }

  /* Connection Banner */
  .etv-conn-banner {
    display:none;
    background:linear-gradient(135deg, #dc2626, #b91c1c);
    color:#fff; padding:10px 16px;
    text-align:center; font-weight:700; font-size:14px;
    animation:etvPulse 2s ease-in-out infinite;
  }
  .etv-conn-banner.visible { display:block; }

  /* Stagger animation */
  /* nur beim ersten Aufbau: das Check-in-Polling (3 s) baut die Liste neu, sonst blinken alle Karten (Mike 16.10.2026) */
  .etv-sig-animated > .etv-sig-card { animation:etvCardIn 0.3s ease-out both; }
  
    .etv-sig-animated > .etv-sig-card:nth-child(1) { animation-delay:0ms; }
    .etv-sig-animated > .etv-sig-card:nth-child(2) { animation-delay:30ms; }
    .etv-sig-animated > .etv-sig-card:nth-child(3) { animation-delay:40ms; }
    .etv-sig-animated > .etv-sig-card:nth-child(4) { animation-delay:50ms; }
    .etv-sig-animated > .etv-sig-card:nth-child(5) { animation-delay:60ms; }
    .etv-sig-animated > .etv-sig-card:nth-child(n+6) { animation-delay:70ms; }
  
  @keyframes etvCardIn {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
  }

  /* iPad Landscape: 2-column list */
  @media (min-width:769px) and (orientation:landscape) {
    #etvSigList { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; align-content:start; }
  }
  /* Canvas im Landscape: compact header/footer */
  @media (orientation:landscape) {
    .etv-sig-modal .etv-sig-header { padding:10px 20px; }
    .etv-sig-modal .etv-sig-footer { padding:10px 20px; }
    .etv-sig-canvas-wrap { padding:8px 20px; }
    .etv-sig-save-btn { min-height:44px; font-size:15px; }
  }
  /* Portrait small */
  @media (max-width:768px) {
    .etv-sig-card { padding:12px 14px; }
    .etv-sig-search { height:48px; font-size:17px; }
  }


  /* ── Login Screen ── */
  .login-screen {
    display:none; position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center;
    background:var(--bg-body);
    overflow:hidden;
  }
  /* Ambient background orbs */
  .login-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .login-orb {
    position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15;
    animation:loginOrbFloat 20s ease-in-out infinite;
  }
  html.dark .login-orb { opacity:0.08; }
  .login-orb-1 { width:500px; height:500px; background:var(--brand); top:-15%; right:-10%; animation-delay:0s; }
  .login-orb-2 { width:400px; height:400px; background:#9333ea; bottom:-10%; left:-8%; animation-delay:-7s; }
  .login-orb-3 { width:300px; height:300px; background:#ec4899; top:40%; left:50%; animation-delay:-13s; }
  @keyframes loginOrbFloat {
    0%,100% { transform:translate(0,0) scale(1); }
    33% { transform:translate(30px,-20px) scale(1.05); }
    66% { transform:translate(-20px,15px) scale(0.95); }
  }
  /* Card */
  .login-card {
    position:relative; width:420px; max-width:calc(100vw - 40px);
    background:linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 100%);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:none; outline:1px solid rgba(255,255,255,0.35);
    outline-offset:-1px;
    border-radius:24px;
    box-shadow:0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
    padding:48px 40px 40px;
    animation:loginCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html.dark .login-card {
    background:linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    outline-color:rgba(255,255,255,0.1);
    box-shadow:0 8px 40px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .login-card::before {
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.55) 70%, transparent);
    pointer-events:none;
  }
  html.dark .login-card::before {
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.12) 70%, transparent);
  }
  @keyframes loginCardIn { from { opacity:0; transform:scale(0.92) translateY(20px); } }
  /* Logo */
  .login-logo { text-align:center; margin-bottom:32px; animation:loginLogoIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
  @keyframes loginLogoIn { from { opacity:0; transform:translateY(-10px); } }
  .login-logo-img { width:220px; margin-bottom:8px; }
  html.dark .login-logo-img { filter:brightness(0) invert(1) hue-rotate(180deg) saturate(1.2) hue-rotate(180deg); }
  .login-pro-badge {
    display:inline-block; font-size:11px; font-weight:700; color:white;
    background:linear-gradient(135deg, var(--brand), #0689c2);
    padding:3px 14px; border-radius:8px; letter-spacing:2px;
    margin-top:10px; box-shadow:0 2px 8px rgba(7,161,226,0.25);
  }
  /* Form */
  .login-field { margin-bottom:18px; animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
  .login-field:nth-child(1) { animation-delay:0.25s; }
  .login-field:nth-child(2) { animation-delay:0.35s; }
  .login-field:nth-child(3) { animation-delay:0.45s; }
  @keyframes loginFieldIn { from { opacity:0; transform:translateY(12px); } }
  .login-label {
    font-size:12px; font-weight:600; color:var(--text-secondary);
    letter-spacing:0.3px; margin-bottom:6px; display:block;
  }
  .login-input {
    width:100%; padding:12px 16px; border:1px solid var(--border);
    border-radius:14px; font-size:14px; font-family:inherit;
    background:var(--bg-input); color:var(--text);
    transition:border-color 0.2s, box-shadow 0.2s; outline:none;
  }
  .login-input:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
  .login-input::placeholder { color:var(--text-muted); }
  .login-btn {
    width:100%; padding:13px; border:none; border-radius:14px; cursor:pointer;
    font-size:15px; font-weight:600; font-family:inherit; color:white;
    background:linear-gradient(135deg, var(--brand), #0689c2);
    box-shadow:0 4px 16px rgba(7,161,226,0.25);
    transition:all 0.25s; margin-top:6px;
    animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.5s both;
  }
  .login-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(7,161,226,0.35); }
  .login-btn:active { transform:translateY(0); }
  /* Footer text */
  .login-footer {
    text-align:center; margin-top:24px; font-size:11px; color:var(--text-muted);
    animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.6s both;
  }
  /* Mobile */
  @media (max-width:480px) {
    .login-card { padding:36px 28px 32px; border-radius:20px; }
    .login-logo-text { font-size:24px; }
    .login-logo-skyline { width:180px; }
    .login-orb-1 { width:300px; height:300px; }
    .login-orb-2 { width:250px; height:250px; }
    .login-orb-3 { width:200px; height:200px; }
  }
  /* iPad */
  @media (min-width:481px) and (max-width:1024px) {
    .login-card { width:400px; }
  }

/* ── ETV: HTML-Content in TOP-Anzeige ── */
.etv-top-content { line-height: 1.5; }
.etv-top-content p { margin: 0 0 4px; }
.etv-top-content ul, .etv-top-content ol { margin: 4px 0; padding-left: 20px; }
.etv-top-content table { border-collapse: collapse; margin: 4px 0; font-size: 12px; }
.etv-top-content table td, .etv-top-content table th { border: 1px solid var(--border); padding: 2px 6px; }
.etv-top-content h1, .etv-top-content h2, .etv-top-content h3 { font-size: 13px; margin: 4px 0 2px; }

/* ── TinyMCE Dark-Mode Fixes ── */
.dark .tox .tox-toolbar__primary { background: var(--bg-input) !important; }
.dark .tox .tox-edit-area__iframe { background: var(--bg-input) !important; }
.dark .tox .tox-statusbar { background: var(--bg-input) !important; border-color: var(--border) !important; }
.dark .tox.tox-tinymce { border-color: var(--border) !important; }

/* ── Search Clear Button ── */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
  transition: opacity 0.15s;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.dark input[type="search"]::-webkit-search-cancel-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ── ETV: GO-Antrag & Chips postponed/removed ── */
.etv-chip.postponed { background: var(--orange); color: #fff; }
.etv-chip.removed   { background: var(--red);    color: #fff; text-decoration: line-through; }
.etv-go-trigger { background: var(--red-text); color: var(--surface-solid); border: 0; min-height: 32px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 12px; }
@media (pointer:coarse) { .etv-go-trigger { min-height: 44px; } }
.etv-go-trigger:hover { opacity: 0.85; }
.etv-redezeit-banner { background: var(--orange-bg); border: 1px solid var(--orange); color: var(--orange); padding: 4px 10px; border-radius: 6px; display: inline-block; font-size: 12px; font-weight: 600; }
/* TOP-Text-Cards: Sachverhalt + Beschlussvorschlag (Running + Vorbereitung) */
.etv-tc-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); margin: 0 0 10px; overflow: hidden; }
.etv-tc-card:last-child { margin-bottom: 0; }
.etv-tc-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-input); padding: 5px 10px; border-bottom: 1px solid var(--border); }
.etv-tc-body { padding: 8px 10px; }
.etv-tc-body > p:first-child { margin-top: 0; }
.etv-tc-body > p:last-child { margin-bottom: 0; }
.etv-tc-body ul, .etv-tc-body ol { margin: 4px 0; padding-left: 20px; }
.etv-tc-body li { margin: 2px 0; }
.etv-tc-compact { margin: 4px 0 0; }
.etv-tc-compact .etv-tc-head { font-size: 10px; padding: 3px 8px; }
.etv-tc-compact .etv-tc-body { padding: 6px 8px; font-size: 12px; color: var(--text-muted); }
/* Live eingesetzter Protokollunterzeichner-Name in der Beschlussvorschlag-Card
   (rein visuell, nie im gespeicherten Text — s. _etvPuApplyHighlight in weg.js) */
.etv-pu-name { background: rgba(250, 204, 21, .32); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.etv-go-modal { max-width: 560px; }
.etv-go-typebtn { display: block; width: 100%; text-align: left; margin: 7px 0 0; padding: 12px 15px; cursor: pointer; background: var(--bg-input); border: 1px solid var(--border); border-radius: 11px; transition: all .15s; font-family: inherit; }
.etv-go-typebtn:hover { border-color: var(--brand); background: var(--brand-bg); }
.etv-go-typebtn b { display: block; font-size: 14px; font-weight: 680; color: var(--text); }
.etv-go-typebtn span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.etv-go-nav { margin-top: 12px; display: flex; gap: 8px; justify-content: space-between; }
.etv-go-result.ok { color: var(--green); font-weight: 700; }
.etv-go-result.no { color: var(--red);   font-weight: 700; }
.etv-go-warn { background: var(--red-bg); border: 1px solid var(--red); padding: 8px; border-radius: 6px; }
.etv-go-history { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

  /* ============================================================
     BEGEHUNGEN (Visitico) — Redesign 2026-06-09
     Ruhiges, modernes SaaS-Vokabular auf Basis des Glass-Systems.
     ============================================================ */
  .beg-page { padding:28px 32px; max-width:1080px; margin:0 auto; }
  .beg-head .sub { color:var(--text-secondary); font-size:13.5px; margin-top:5px; }
  .beg-search .form-input { padding-left:33px; min-width:230px; }
  .beg-tab.active { background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(7,161,226,0.3); }
  .beg-tab .cnt { font-size:11px; font-weight:700; background:rgba(0,0,0,0.06); padding:1px 7px; border-radius:999px; }
  html.dark .beg-tab .cnt { background:rgba(255,255,255,0.08); }
  .beg-tab.active .cnt { background:rgba(255,255,255,0.25); }
  .beg-group-head .gicon { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; }
  .beg-group-head .gicon svg { width:15px; height:15px; }
  .beg-group-head .cnt { font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg-input);
    border:1px solid var(--border-light); border-radius:999px; padding:1px 8px; }
  .beg-group-head.click { cursor:pointer; }
  .beg-group-head .chev { margin-left:auto; color:var(--text-muted); transition:transform .2s; }
  .beg-group-head.collapsed .chev { transform:rotate(-90deg); }
  .gicon.acc-orange { background:rgba(249,115,22,0.12); color:var(--orange); }
  .gicon.acc-brand { background:var(--brand-bg); color:var(--brand); }
  .gicon.acc-gray { background:var(--bg-input); color:var(--text-secondary); }
  .gicon.acc-green { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); }
  .beg-card .lead { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--brand-bg); color:var(--brand); }
  .beg-card .lead svg { width:21px; height:21px; }
  .beg-card .body { flex:1; min-width:0; }
  .beg-card .ttl { font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .beg-card .meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--text-muted); font-size:12.5px; margin-top:3px; }
  .beg-card .meta .sep { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
  .beg-card .meta b { font-weight:600; color:var(--text-secondary); }
  .beg-card .chev { color:var(--text-muted); transition:transform .18s,color .18s; flex:none; }
  .beg-card:hover .chev { transform:translateX(2px); color:var(--brand); }
  .beg-card .progress { position:absolute; left:0; bottom:0; height:3px; width:100%; }
  .beg-card .progress i { display:block; height:100%; background:var(--brand); border-radius:0 3px 3px 0; transition:width .3s; }

  /* Status-Badges — ruhig, mit Punkt */
  .beg-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    padding:3px 10px 3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
  .beg-badge .d { width:6px; height:6px; border-radius:50%; flex:none; }
  .beg-badge.draft { background:var(--bg-input); color:var(--text-secondary); border-color:var(--border-light); }
  .beg-badge.draft .d { background:var(--text-muted); }
  .beg-badge.running { background:rgba(249,115,22,0.1); color:var(--orange); border-color:rgba(249,115,22,0.22); }
  .beg-badge.running .d { background:var(--orange); }
  .beg-badge.done { background:rgba(34,197,94,0.1); color:var(--clr-ok-text); border-color:rgba(34,197,94,0.22); }
  .beg-badge.done .d { background:var(--green); }
  .beg-badge.sent { background:var(--brand-bg); color:var(--brand-dark); border-color:rgba(7,161,226,0.22); }
  .beg-badge.sent .d { background:var(--brand); }
  .beg-badge.warn { background:rgba(249,115,22,0.1); color:var(--orange); border-color:rgba(249,115,22,0.22); }
  .beg-badge.warn .d { background:var(--orange); }
  .beg-badge.err { background:rgba(239,68,68,0.1); color:var(--clr-err-text); border-color:rgba(239,68,68,0.22); }
  .beg-badge.err .d { background:var(--red); }
  .beg-objhead .ic { width:54px; height:54px; border-radius:15px; background:var(--brand-bg); color:var(--brand); display:grid; place-items:center; margin:0 auto 12px; }
  .beg-objhead .ic svg { width:27px; height:27px; }
  .beg-objhead .addr { color:var(--text-secondary); font-size:13.5px; margin-top:5px; }
  .beg-objhead .badges { display:flex; justify-content:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .beg-stat .n { font-size:26px; font-weight:800; letter-spacing:-0.04em; line-height:1; font-variant-numeric:tabular-nums; }
  .beg-stat .l { font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-top:6px; text-transform:uppercase; letter-spacing:.04em; }
  .beg-stat.ok .n { color:var(--clr-ok-text); }
  .beg-stat.mangel .n { color:var(--orange); }
  .beg-stat.dringend .n { color:var(--clr-err-text); }
  .beg-stat.offen .n { color:var(--text-muted); }
  .beg-progwrap .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
  .beg-progwrap .top .lbl { font-size:13px; font-weight:600; }
  .beg-progwrap .top .val { font-size:13px; font-weight:700; color:var(--brand); }
  .beg-progbar.urgent i { background:linear-gradient(90deg,var(--red),var(--orange)); }
  .beg-toolbar .ttl { font-size:15px; font-weight:700; letter-spacing:-0.01em; }
  .beg-segsmall button.active { background:var(--bg-card); color:var(--text); box-shadow:var(--shadow-sm); }
  .beg-subhead.bld { color:var(--brand); display:flex; align-items:center; gap:7px; }
  .beg-subhead.bld svg { width:15px; height:15px; }
  .beg-trade .tic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--bg-input); color:var(--text-secondary); }
  .beg-trade .tic svg { width:18px; height:18px; }
  .beg-trade .nm { font-weight:600; font-size:13.5px; letter-spacing:-0.01em; line-height:1.25; }
  .beg-trade .st { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; }
  .beg-trade .st .d { width:7px; height:7px; border-radius:50%; flex:none; }
  .beg-trade .ph { position:absolute; top:13px; right:14px; display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--text-muted); }
  .beg-trade .ph svg { width:13px; height:13px; }
  .beg-trade.s-ok { border-left:3px solid var(--green); } .beg-trade.s-ok .tic { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); } .beg-trade.s-ok .st { color:var(--clr-ok-text); } .beg-trade.s-ok .st .d { background:var(--green); }
  .beg-trade.s-mangel { border-left:3px solid var(--orange); } .beg-trade.s-mangel .tic { background:rgba(249,115,22,0.12); color:var(--orange); } .beg-trade.s-mangel .st { color:var(--orange); } .beg-trade.s-mangel .st .d { background:var(--orange); }
  .beg-trade.s-dringend { border-left:3px solid var(--red); } .beg-trade.s-dringend .tic { background:rgba(239,68,68,0.12); color:var(--clr-err-text); } .beg-trade.s-dringend .st { color:var(--clr-err-text); } .beg-trade.s-dringend .st .d { background:var(--red); }
  .beg-trade.s-offen .st { color:var(--text-muted); } .beg-trade.s-offen .st .d { background:var(--text-muted); }
  .beg-lrow .tic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--bg-input); color:var(--text-secondary); }
  .beg-lrow .tic svg { width:19px; height:19px; }
  .beg-lrow .nm { flex:1; min-width:0; }
  .beg-lrow .nm .t { font-weight:600; font-size:14px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .beg-lrow .nm .d { color:var(--text-muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .beg-lrow .nm .z { color:var(--text-secondary); font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .beg-lrow .nm .z .pr { color:var(--text-muted); font-weight:500; }
  .beg-trade .zu { color:var(--text-muted); font-size:11.5px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .beg-lrow .st { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
  .beg-lrow .st .d { width:7px; height:7px; border-radius:50%; flex:none; }
  .beg-lrow .ph { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:var(--text-muted); }
  .beg-lrow .ph svg { width:13px; height:13px; }
  .beg-lrow .chev { color:var(--text-muted); transition:transform .14s,color .14s; flex:none; }
  .beg-lrow:hover .chev { transform:translateX(2px); color:var(--brand); }
  .beg-lrow.s-ok { border-left:3px solid var(--green); } .beg-lrow.s-ok .tic { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); } .beg-lrow.s-ok .st { color:var(--clr-ok-text); } .beg-lrow.s-ok .st .d { background:var(--green); }
  .beg-lrow.s-mangel { border-left:3px solid var(--orange); } .beg-lrow.s-mangel .tic { background:rgba(249,115,22,0.12); color:var(--orange); } .beg-lrow.s-mangel .st { color:var(--orange); } .beg-lrow.s-mangel .st .d { background:var(--orange); }
  .beg-lrow.s-dringend { border-left:3px solid var(--red); } .beg-lrow.s-dringend .tic { background:rgba(239,68,68,0.12); color:var(--clr-err-text); } .beg-lrow.s-dringend .st { color:var(--clr-err-text); } .beg-lrow.s-dringend .st .d { background:var(--red); }
  .beg-lrow.s-offen .st { color:var(--text-muted); } .beg-lrow.s-offen .st .d { background:var(--text-muted); }
  /* Navigations-/Toolbar-Zeilen: immer volle Seitenbreite (nicht nur inhaltsbreit) */
  .beg-colgrid > .beg-breakout.wfull { width:100%; }
  /* Gewerke-Dashboard: komplett volle Seitenbreite (Kopf, Fortschritt, Gewerke, Fotos) */
  .beg-page.beg-colgrid { --beg-col:100%; }
  .beg-dh .tic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; flex:none; background:var(--bg-input); color:var(--text-secondary); }
  .beg-dh .tic svg { width:27px; height:27px; }
  .beg-dh.s-ok .tic { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); }
  .beg-dh.s-mangel .tic { background:rgba(249,115,22,0.12); color:var(--orange); }
  .beg-dh.s-dringend .tic { background:rgba(239,68,68,0.12); color:var(--clr-err-text); }
  .beg-dh .pos { font-size:13px; font-weight:600; margin-top:2px; }
  .beg-seg3 button.sel-ok { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); border-color:var(--green); }
  .beg-seg3 button.sel-mangel { background:rgba(249,115,22,0.12); color:var(--orange); border-color:var(--orange); }
  .beg-seg3 button.sel-dringend { background:rgba(239,68,68,0.12); color:var(--clr-err-text); border-color:var(--red); }
  .beg-seg3 button.sel-brand { background:var(--brand); color:#fff; border-color:var(--brand); }
  .beg-chip.on { background:rgba(249,115,22,0.12); color:var(--orange); border-color:var(--orange); font-weight:600; }
  /* Foto-Miniaturen: Kantenlänge kommt aus --beg-foto (Slider in begehung.js, 100–300px) */
  .beg-fotoitem { width:var(--beg-foto, 130px); }
  .beg-fotoframe img.begImg { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm);
    border:1px solid var(--border); cursor:zoom-in; background:var(--bg-input); }
  /* Rechtschreib-Vorschläge (LLM) — Optik wie im ETV-Protokoll, aber schmal-tauglich */
  .beg-spell-box { border:1px solid var(--brand,#09A1E2); border-radius:9px; padding:6px 9px; margin-top:6px;
    background:rgba(9,161,226,0.06); }
  .beg-spell-box .hd { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--brand-dark,#1A61AB); margin-bottom:5px; }
  html.dark .beg-spell-box .hd { color:var(--brand-light,#7DD3FC); }
  .beg-spell-row.done { opacity:.55; }
  .beg-spell-row .w { text-decoration:line-through wavy var(--red,#DC2626); }
  .beg-spell-row .ar { color:var(--text-muted); }
  .beg-spell-row .fix { font-weight:600; color:var(--green,#16A34A); }
  .beg-spell-row .ok { display:flex; align-items:center; gap:3px; font-size:12px; color:var(--green,#16A34A); }
  .beg-spell-mini.ok { border-color:var(--green,#16A34A); color:var(--green,#16A34A); }
  .beg-spell-wrap.compact .beg-spell-box { padding:5px 7px; }
  .beg-spell-wrap.compact .beg-spell-row { font-size:11px; gap:4px; }
  .beg-spell-wrap.compact .beg-spell-row .acts { display:flex; gap:4px; width:100%; justify-content:flex-end; }
  .beg-spell-wrap.compact .beg-spell-row + .beg-spell-row { border-top:1px solid var(--border-light); margin-top:2px; }
  /* Dokumente (PDF-Anhänge) — eigener Bereich neben den Fotos, gleiche Kachel-Metrik */
  .beg-docs { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
  .beg-detail-foot .navinfo { font-size:13px; font-weight:600; color:var(--text-secondary); min-width:54px; text-align:center; }

/* ── ETV Bediener-Lock: Sperr-Notiz + Klick-Overlay ── */
.etv-lock-notice {
  position: relative;
  z-index: 30;
  text-align: center;
  background: var(--clr-warn-bg, rgba(245, 158, 11, 0.10));
  color: var(--clr-warn-text, #b45309);
  border: 1px solid var(--orange, #E0931C);
  border-radius: var(--radius-sm, 8px);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.etv-lock-notice-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.etv-lock-notice-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.etv-lock-notice-text {
  font-size: 13px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto 16px;
  opacity: 0.92;
}
.etv-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.18);
  cursor: not-allowed;
  /* Zuschauen erlaubt, Eingaben geblockt: fängt alle Klicks ab */
}
/* Kompaktes Abzeichen in der Versammlungsliste */
.etv-list-lock {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-warn-text, #b45309);
  background: var(--clr-warn-bg, rgba(245, 158, 11, 0.10));
  border: 1px solid var(--orange, #E0931C);
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-block;
}

/* ============================================================
   ETV-Redesign 2026-06-16 (Apple-Premium-Look, Light/Dark via Tokens)
   Prefix .etvr-* — nutzt ausschließlich die globalen Theme-Tokens,
   damit Dark/Light automatisch funktionieren.
   ============================================================ */

/* ── Design-Tokens (Handoff Abschnitt 4) als ETV-Scope ──
   Überschreibt die App-Tokens NUR innerhalb von #pageEtv mit den exakten
   Entwurfs-Werten (solide Oberflächen, exakte Hairlines/Accent). Dadurch
   erben alle ETV-Komponenten (.etvr-*, .card, .btn …) die Design-Palette,
   ohne dass Klassen umgeschrieben werden müssen. */
#pageEtv {
  --brand:#07A1E2; --brand-light:#2CB5F0; --brand-dark:#0683BC;
  --brand-bg:#E7F6FD; --brand-ring:#DCEFF9; --blue:#07A1E2; --blue-bg:#E7F6FD;
  --green:#1CA05A; --green-bg:#E4F6EC; --red:#E2483D; --red-bg:#FCE9E7; --orange:#E0931C; --orange-bg:#FBF1DD;
  --text:#10141B; --text-secondary:#3C4654; --text-muted:var(--text-3);
  --bg-card:#FFFFFF; --bg-card-hover:#F4F6F9; --bg-input:#F4F6F9; --bg-modal:#FFFFFF; --bg-modal-solid:#FFFFFF;
  --border:#E8EBF0; --border-light:#F1F3F7; --border-glass:#E8EBF0;
  --radius:16px; --radius-lg:22px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(16,30,50,.04);
  --shadow:0 8px 26px rgba(16,30,50,.07);
  --shadow-md:0 12px 30px rgba(16,30,50,.10);
  --shadow-lg:0 18px 44px rgba(8,40,64,.16);
}
html.dark #pageEtv {
  --brand:#2BB0EC; --brand-light:#5EC8F5; --brand-dark:#1B93CE;
  --brand-bg:rgba(43,176,236,.18); --brand-ring:rgba(43,176,236,.30); --blue:#2BB0EC; --blue-bg:rgba(43,176,236,.18);
  --green:#34C77E; --green-bg:rgba(52,199,126,.18); --red:#F2675C; --red-bg:rgba(242,103,92,.18); --orange:#ECA73B; --orange-bg:rgba(236,167,59,.18);
  --text:#EAEEF5; --text-secondary:#AEBACB;
  --bg-card:#151B25; --bg-card-hover:#1C2533; --bg-input:#1C2533; --bg-modal:#151B25; --bg-modal-solid:#151B25;
  --border:#29323F; --border-light:#1F2734; --border-glass:#29323F;
  /* Primaerknoepfe: weisse Schrift braucht >= 4,5:1, der App-Wert #1690cf schafft nur 3,5:1 */
  --primary:#0a7cbd; --primary-hover:#0869a1;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 10px 30px rgba(0,0,0,.4); --shadow-md:0 14px 34px rgba(0,0,0,.45); --shadow-lg:0 22px 50px rgba(0,0,0,.5);
}
/* ETV-Karten solide (nicht das App-Glas) — entspricht --surface des Entwurfs */
#pageEtv .card { background:var(--bg-card); backdrop-filter:none; -webkit-backdrop-filter:none; border-color:var(--border); }

/* ---- Schritt-Leiste (Stepper) ---- */
/* Zeile aus Stepper-Pille + Werkzeug-Buttons. Beide liegen IM FLUSS und die Zeile darf
   umbrechen (flex-wrap): passt beides nebeneinander, steht es zentriert in einer Zeile,
   sonst wandern die Buttons unter die Pille. Nicht auf eine Viewport-Media-Query
   umstellen — maßgeblich ist die Kartenbreite (Viewport minus Nav-Schiene + Panel). */
.etvr-stepper-wrap { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; position:relative; margin-bottom:18px; container:etvstep / inline-size; }
.etvr-step .num {
  position:relative; display:grid; place-items:center; width:23px; height:23px;
  border-radius:50%; flex:none; font-size:12px; font-weight:700;
  background:var(--bg-card); border:1.5px solid var(--border); color:var(--text-muted);
}
.etvr-step .num svg { width:12px; height:12px; }
.etvr-step.active .num { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 7px var(--brand-ring); }
.etvr-step.done .num { background:var(--green); color:#fff; border-color:var(--green); }
.etvr-step .lbl { font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--text-secondary); }
.etvr-step.active .lbl { color:var(--brand-text); }
.etvr-step.done .lbl { color:var(--text); }
.etvr-step.future .lbl { color:var(--text-muted); }
.etvr-stat .v { font-size:24px; font-weight:740; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.etvr-stat .l { font-size:11.5px; color:rgba(255,255,255,.8); font-weight:600; margin-top:2px; }
.etvr-secthead .sub { font-size:13px; color:var(--text-muted); margin-top:2px; }
.etvr-top.sonstiges { border-style:dashed; }
/* Beschlussvorschlag-Karte hervorheben (zweite/letzte etv-tc-card im TOP) */
.etvr-top .etv-tc-card:last-child {
  border-color:var(--brand-ring); border-left:3px solid var(--brand); background:var(--brand-bg);
}
.etvr-top .etv-tc-card:last-child .etv-tc-head { color:var(--brand-dark); background:transparent; border-bottom:none; padding-bottom:0; }
.etvr-top .etv-tc-card:last-child .etv-tc-body { color:var(--text); }

/* ---- Übersicht: Versammlungs-Karten (Handoff 6.0) ---- */
.etvr-mtg { position:relative; cursor:pointer; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); transition:box-shadow .18s,border-color .18s; margin-bottom:14px; }
.etvr-mtg-head .no { font-size:12.5px; color:var(--text-muted); font-weight:700; font-variant-numeric:tabular-nums; }
.etvr-mtg-head .nm { font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.etvr-mtg-badge.live { background:var(--red-bg); color:var(--red); }
.etvr-mtg-badge.live .dot { width:7px; height:7px; border-radius:50%; background:var(--red); animation:etvLivePulse 1.4s infinite; }
.etvr-mtg-badge.done { background:var(--green-bg); color:var(--green); }
.etvr-mtg-badge.draft { background:var(--bg-input); color:var(--text-muted); }
.etvr-mtg-badge.checkin, .etvr-mtg-badge.running { background:var(--brand-bg); color:var(--brand-dark); }
.etvr-ring .v { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.etvr-ring .v .pct { font-size:28px; font-weight:760; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.etvr-ring .v .lbl { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }
.etvr-qbar .seg-present { background:linear-gradient(90deg,#1CA05A,#19B36A); transition:width .5s ease; }
.etvr-qbar .seg-rep { background:linear-gradient(90deg,#E0931C,#EDAA38); transition:width .5s ease; }
.etvr-qlegend .dot { width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }

/* ---- Check-in-Kacheln (Handoff 6.2) ---- */
#etvCheckinGrid.etvr-citile-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:13px; }
.etvr-citile.present { border-left-color:var(--green); }
.etvr-citile.represented { border-left-color:var(--orange); }
.etvr-citile.left { border-left-color:var(--orange); }
/* kurz abwesend (Raum verlassen, kommt wieder) — gestrichelt + leichte Tönung, klar von „gegangen"/„vertreten" unterscheidbar */
.etvr-citile.away { border-left-color:var(--orange); border-left-style:dashed; background:var(--orange-bg); }
.etvr-citile-info .nm { font-size:14.5px; font-weight:660; line-height:1.25; }
.etvr-citile-info .un { font-size:12px; color:var(--text-muted); margin-top:2px; overflow-wrap:anywhere; }
.etvr-citile-info .me { font-size:12px; color:var(--text-secondary); font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; }
.etvr-citile-away.active { background:var(--orange-bg); color:var(--orange); border-color:var(--orange); }
.etvr-citile-btns .b-present.active { background:var(--green-bg); color:color-mix(in srgb, var(--green-text) 85%, var(--text)); border-color:var(--green); }
.etvr-citile-btns .b-rep.active { background:var(--orange-bg); color:var(--orange); border-color:var(--orange); }
.etvr-citile-btns .b-absent.active { background:var(--bg-card-hover); color:var(--text); border-color:var(--text-muted); }
.etvr-citile .tile-late { font-size:10px; font-weight:600; color:var(--orange); background:var(--orange-bg); border-radius:6px; padding:2px 6px; margin-top:5px; display:inline-block; }
.etvr-citile .tile-away { font-size:10px; font-weight:600; color:var(--orange); background:var(--orange-bg); border-radius:6px; padding:2px 6px; margin-top:5px; display:inline-block; }
.etvr-citile .tile-proxy { font-size:11px; color:var(--brand); margin-top:4px; overflow-wrap:anywhere; }
.etvr-citile .tile-dauer { font-size:10px; font-weight:700; color:var(--orange); background:var(--orange-bg); border-radius:6px; padding:2px 6px; margin-top:5px; display:inline-block; overflow-wrap:anywhere; }
.etvr-citile .tile-dauer.ovr { color:var(--green); background:var(--green-bg); }
.etvr-sort button.active { background:var(--bg-card); color:var(--brand); box-shadow:var(--shadow-sm); }
.etvr-orow.has-proxy { background:var(--brand-bg); }
.etvr-orow .etv-vm-cell:empty { display:none; }
.etvr-orow-mea .v { font-size:13px; font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.etvr-orow-mea .l { font-size:10px; color:var(--text-muted); font-weight:600; }
.etvr-proxy-pill span.txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.etvr-proxy-pill.online { background:var(--brand-bg); border-color:var(--brand-ring); color:var(--brand); font-weight:700; }
.etvr-proxy-pill.online[onclick] { cursor:pointer; }
.etvr-proxy-pill.online[onclick]:hover { text-decoration:underline; }
.etvr-proxy-pill.dauer { background:var(--orange-bg); border-color:var(--orange); color:var(--orange); font-weight:700; }
.etvr-proxy-pill.dauer.ovr { background:var(--green-bg); border-color:var(--green); color:var(--green); }
.etvr-proxy-pill .dot { width:6px; height:6px; border-radius:50%; background:var(--brand); animation:etvLivePulse 2s infinite; flex:none; }
/* Online-Vollmacht Nutzungs-Statistik — durchgehend Theme-Tokens (Dark/Light), kein Hardcode.
   Der Strip liest sich als Conversion-Funnel: Verschickt › Geöffnet › Abgegeben. */
.etv-stat-card { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin:2px 4px 14px; padding:13px 16px; background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.etv-stat-funnel { display:flex; align-items:center; gap:11px; }
.etv-stat-cell { text-align:center; min-width:60px; }
.etv-stat-cell .v { font-size:21px; font-weight:700; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.etv-stat-cell .l { font-size:10px; font-weight:600; letter-spacing:var(--label-spacing); text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.etv-stat-cell .s { font-size:11px; font-weight:600; color:var(--text-secondary); margin-top:2px; font-variant-numeric:tabular-nums; }
.etv-stat-cell.is-goal .v, .etv-stat-cell.is-goal .s { color:var(--brand); }
.etv-stat-sep { color:var(--text-muted); font-size:16px; opacity:.45; user-select:none; }
.etv-stat-bar { flex:1 1 130px; min-width:110px; height:7px; border-radius:999px; background:var(--border-light); overflow:hidden; display:flex; }
.etv-stat-bar i { display:block; height:100%; }
.etv-stat-bar .seg-used { background:var(--brand); }
.etv-stat-bar .seg-open { background:var(--orange); opacity:.85; }
/* Weisungs-Auswertung je TOP (Ja/Nein/Enthaltung statt Funnel) */
.etv-stat-bar .seg-ja { background:var(--green); }
.etv-stat-bar .seg-nein { background:var(--red); }
.etv-stat-bar .seg-enth { background:var(--text-muted); opacity:.6; }
.etv-stat-aux { display:flex; gap:6px; flex-wrap:wrap; }
.etv-stat-chip { display:inline-flex; align-items:baseline; gap:5px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--bg-input); border:1px solid var(--border); color:var(--text-muted); }
.etv-stat-chip b { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-secondary); }
.etv-stat-chip.warn { background:var(--orange-bg); border-color:var(--orange); color:var(--orange); }
.etv-stat-chip.warn b { color:var(--orange); }
.etv-stat-actions { margin-left:auto; }
/* Anklickbarer Drill-down "Wer hat geöffnet?" (Geöffnet-Zelle + nur-geöffnet-Chip) */
.etv-stat-cell.clickable, .etv-stat-chip.clickable { cursor:pointer; }
.etv-stat-cell.clickable:hover .v, .etv-stat-cell.clickable:hover .l { color:var(--brand); }
.etv-stat-chip.clickable:hover { filter:brightness(.97); }
/* Gesamtauswertung-Overlay (nach Objekt gegliedert) */
.etv-ov-backdrop { position:fixed; inset:0; background:rgba(2,6,23,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.etv-ov-box { background:var(--bg-modal-solid); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); max-width:820px; width:100%; max-height:86vh; overflow:auto; padding:20px 22px; box-shadow:var(--shadow-lg); }
.etv-ov-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.etv-ov-head h3 { margin:0; font-size:16px; font-weight:700; color:var(--text); }
.etv-ov-head .sub { font-size:12px; color:var(--text-muted); margin-top:3px; }
.etv-ov-obj { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-top:12px; background:var(--bg-card-hover); }
.etv-ov-obj-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.etv-ov-obj-head .name { font-size:14px; font-weight:700; color:var(--text); }
.etv-ov-obj-head .agg { font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.etv-ov-obj-head .agg b { color:var(--brand); font-weight:700; }
.etv-ov-table { width:100%; border-collapse:collapse; font-size:13px; }
.etv-ov-table th, .etv-ov-table td { padding:5px 8px; border-bottom:1px solid var(--border-light); }
.etv-ov-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:var(--label-spacing); color:var(--text-muted); font-weight:600; }
.etv-ov-table td { color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.etv-ov-table tr:last-child td { border-bottom:none; }
.etv-ov-table .num { text-align:right; }
.etv-ov-empty { font-size:13px; color:var(--text-muted); padding:20px 4px; text-align:center; }
.etvr-open-pill.seen { background:var(--brand-bg); border:1px solid var(--brand-ring); color:var(--brand); }
.etvr-open-pill.none { background:var(--bg-input); border:1px solid var(--border); color:var(--text-muted); }

/* ---- Abschluss (Redesign 2026-07-17, Handoff protokoll_abschluss): Dokument links groß, Rail rechts ---- */
.etvr-final-grid { display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:20px; align-items:start; }
.etvr-fin-rail .card { margin-bottom:0 !important; border-radius:18px; }
.etvr-fin-crumb .sep { color:var(--text-muted); }
.etvr-fin-crumb .ctx { font-size:12.5px; color:var(--text-muted); }
.etvr-fin-head .sub { margin:5px 0 0; font-size:13px; color:var(--text-muted); }
.etvr-fin-dochead .t { font-size:13.5px; font-weight:700; line-height:1.25; }
.etvr-fin-dochead .s { font-size:11px; color:var(--text-muted); line-height:1.25; }
.etvr-fin-hero .eyebrow { font-size:10.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand); }
.etvr-fin-pill.ok { background:var(--clr-ok-bg); color:var(--clr-ok-text); }
.etvr-fin-pill.warn { background:var(--clr-warn-bg); color:var(--clr-warn-text); }
.etvr-fin-hero .headline { font-size:16px; font-weight:700; letter-spacing:-0.01em; margin:4px 0 12px; }
.etvr-fin-chk-item .ic { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; flex:none; font-size:11px; font-weight:800; }
.etvr-fin-chk-item .ic.ok { background:var(--clr-ok-bg); border:1px solid var(--green); color:var(--clr-ok-text); }
.etvr-fin-chk-item .ic.warn { background:var(--clr-warn-bg); border:1px solid var(--clr-warn-border); color:var(--clr-warn-text); }
.etvr-fin-chk-item .lbl { font-size:12.5px; font-weight:600; color:var(--text); }
.etvr-fin-chk-item .det { font-size:11px; color:var(--text-muted); }
.etvr-fin-chk-item .det.warn { color:var(--clr-warn-text); }
.etvr-fin-sign.dim { background:var(--bg-input); border:1px solid var(--border); color:var(--text-muted); cursor:not-allowed; box-shadow:none; }
.etvr-fin-hero .hint { margin:11px 0 0; font-size:10.5px; color:var(--text-muted); line-height:1.5; }
.etvr-fin-daterow .form-input { flex:1; min-width:0; font-size:12.5px; padding:8px 11px; border-radius:9px; }
.etvr-fin-coll-head .t { font-size:13px; font-weight:700; flex:1; }
.etvr-fin-coll-head .caret { font-size:12px; color:var(--text-muted); white-space:nowrap; }

/* ---- Protokoll bearbeiten (Handoff 6.4) ---- */
.etvr-bcard .card-header { align-items:flex-start; gap:13px; }
/* Lazy-Edit: Sofort-Vorschau des Beschlusstexts (Klick lädt erst den TinyMCE-Editor) */
.etv-edit-preview { min-height:54px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-input); font-size:12px; line-height:1.45; cursor:text; transition:border-color .12s, box-shadow .12s; }
.etv-edit-preview:hover { border-color:var(--brand-ring); box-shadow:0 0 0 3px var(--brand-bg); }
.etv-edit-preview p { margin:0 0 4px; }
.etv-edit-preview ul, .etv-edit-preview ol { margin:4px 0; padding-left:20px; }
.etv-edit-empty { color:var(--text-muted); font-style:italic; }
.etvr-result-pill.pass { background:var(--green-bg); color:var(--green); }
.etvr-result-pill.fail { background:var(--red-bg); color:var(--red); }
.etvr-result-pill.info { background:var(--bg-input); color:var(--text-muted); }

/* Interne Notiz (top.notes) im Bearbeiten-Tab prominent als blaue Info-Box —
   nicht im Protokoll, soll in der Nachbearbeitung nicht übersehen werden. */
.etv-note-callout { background:var(--brand-bg); border:1px solid var(--brand-ring); border-left:3px solid var(--brand); border-radius:var(--radius-sm); padding:11px 14px; margin:0 0 12px; }
.etv-note-callout__head { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-dark); margin-bottom:5px; }
.etv-note-callout__body { font-size:13.5px; line-height:1.5; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.etvr-live-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--red); animation:etvLivePulse 1.6s infinite; }
.etvr-tug .seg-ja { background:linear-gradient(90deg,#1CA05A,#19B36A); transition:width .45s cubic-bezier(.34,1.2,.64,1); }
.etvr-tug .seg-enth { background:linear-gradient(90deg,#E0931C,#EDAA38); transition:width .45s; }
.etvr-tug .seg-nein { background:linear-gradient(90deg,#E2483D,#EC5F55); transition:width .45s; }
.etvr-tug-legend .dot { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }
.etvr-verdict.pass { background:var(--green-bg); color:var(--green); }
.etvr-verdict.fail { background:var(--red-bg); color:var(--red); }
/* Stimmliste (Einzelstimmen) — Avatar + Icon-Buttons (Handoff 6.3) */
.etvr-av-sm { width:32px; height:32px; font-size:12px; flex:none; }
.etvr-voter-btn.ja.active { background:var(--green-bg); color:var(--green); border-color:var(--green); }
.etvr-voter-btn.nein.active { background:var(--red-bg); color:var(--red); border-color:var(--red); }
.etvr-voter-btn.enth.active { background:var(--orange-bg); color:var(--orange); border-color:var(--orange); }
/* Ergebnis-Kacheln (Live-Konsole, 2×2) */
.etvr-rtiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.etvr-rtile .v { font-size:19px; font-weight:780; line-height:1; font-variant-numeric:tabular-nums; }
.etvr-rtile .l { font-size:11px; font-weight:600; margin-top:3px; }
.etvr-rtile.ja { background:var(--green-bg); } .etvr-rtile.ja .v, .etvr-rtile.ja .l { color:var(--green); }
.etvr-rtile.nein { background:var(--red-bg); } .etvr-rtile.nein .v, .etvr-rtile.nein .l { color:var(--red); }
.etvr-rtile.enth { background:var(--orange-bg); } .etvr-rtile.enth .v, .etvr-rtile.enth .l { color:var(--orange); }
.etvr-rtile.offen { background:var(--bg-input); } .etvr-rtile.offen .v { color:var(--text); } .etvr-rtile.offen .l { color:var(--text-muted); }
.etvr-quickrow .qja { background:var(--green); color:#fff; }
.etvr-quickrow .qnein { background:var(--red-bg); color:var(--red); border-color:var(--red); }
.etvr-quickrow .qenth { background:var(--orange-bg); color:var(--orange); border-color:var(--orange); }

/* ── ETV: Abstimmungsergebnis kompakt pro TOP (Bearbeiten-Tab) ─── */
.etv-edit-result { margin-bottom:14px; }
.etv-edit-result-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.etv-er-tile { border-radius:11px; padding:9px 12px; text-align:center; }
.etv-er-tile .v { display:block; font-size:18px; font-weight:780; line-height:1; font-variant-numeric:tabular-nums; }
.etv-er-tile .l { display:block; font-size:11px; font-weight:600; margin-top:4px; }
.etv-er-tile.ja { background:var(--green-bg); } .etv-er-tile.ja .v, .etv-er-tile.ja .l { color:var(--green); }
.etv-er-tile.nein { background:var(--red-bg); } .etv-er-tile.nein .v, .etv-er-tile.nein .l { color:var(--red); }
.etv-er-tile.enth { background:var(--orange-bg); } .etv-er-tile.enth .v, .etv-er-tile.enth .l { color:var(--orange); }
.etv-edit-result-sub { margin-top:7px; font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.etv-edit-result-sub b { color:var(--text-secondary); font-weight:650; }

/* ── ETV: Versendete Unterlagen (HP-Archiv im Tool) ───────────── */
/* Werkzeug-Buttons der Stepper-Zeile (Versendete Unterlagen · Dokumente · Audit).
   Bewusst KEIN position:absolute mehr (Fix 2026-08-05): absolut positioniert kannte die
   Zeile die Breite der Gruppe nicht, die zentrierte Stepper-Pille lief darunter durch und
   „Versendete Unterlagen" überlappte die Schritte — auf jedem Bildschirm, dessen ETV-Karte
   schmaler als ~1100px ist (Laptop 1366px reicht dafür schon). */
.etvr-vu-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* Ganz schmal (Telefon / iOS-App): Buttons nur als Icon, Beschriftung steckt im title. */
@media (max-width:820px){.etvr-vu-btn{padding:0 12px}.etvr-vu-btn .lbl{display:none}}

/* Versendete-Unterlagen-Modal */
.etv-vu-modal{max-width:780px;width:94vw;max-height:88vh;display:flex;flex-direction:column}
.etv-vu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.etv-vu-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.etv-vu-head h3 svg{width:18px;height:18px;color:var(--brand)}
.etv-vu-sub{margin-top:4px;font-size:12px;color:var(--text-muted)}
.etv-vu-close{width:32px;height:32px;border:none;border-radius:9px;background:var(--bg-input);color:var(--text-muted);font-size:16px;cursor:pointer;display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.etv-vu-close:hover{background:var(--bg-card-hover);color:var(--text)}
.etv-vu-controls{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.etv-vu-search{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.etv-vu-search svg{position:absolute;left:12px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
#etvVuSearch{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);border-radius:11px;background:var(--bg-input);color:var(--text);font-family:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
#etvVuSearch:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.etv-vu-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-secondary);white-space:nowrap;cursor:pointer;padding:8px 13px;border:1px solid var(--border);border-radius:11px;background:var(--bg-card)}
.etv-vu-toggle input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}
.etv-vu-count{font-size:11.5px;color:var(--text-muted);padding:0 2px 8px}
.etv-vu-list{overflow:auto;flex:1;border:1px solid var(--border);border-radius:13px;background:var(--bg-card)}
.etv-vu-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.etv-vu-row:last-child{border-bottom:none}
.etv-vu-ico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-input);color:var(--text-muted);transition:background .13s,color .13s}
.etv-vu-ico svg{width:16px;height:16px}
.etv-vu-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.etv-vu-name{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etv-vu-meta{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etv-vu-clickable{cursor:pointer;transition:background .13s}
.etv-vu-clickable:hover{background:var(--bg-card-hover)}
.etv-vu-clickable:hover .etv-vu-ico{background:var(--brand);color:#fff}
.etv-vu-noopen{opacity:.6}
.etv-vu-conthead{cursor:pointer;transition:background .13s}
.etv-vu-conthead:hover{background:var(--bg-card-hover)}
.etv-vu-conthead:hover .etv-vu-ico{background:var(--brand);color:#fff}
.etv-vu-chev{flex:none;width:14px;text-align:center;color:var(--text-muted);font-size:10px}
.etv-vu-files{background:rgba(0,0,0,.025)}
html.dark .etv-vu-files{background:rgba(255,255,255,.025)}
.etv-vu-file{padding-left:20px}
.etv-vu-mappe>.etv-vu-conthead{border-left:3px solid var(--brand)}
.etv-vu-badge{display:inline-flex;align-items:center;margin-left:7px;padding:2px 8px;border-radius:7px;background:var(--bg-input);font-size:10.5px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.etv-vu-badge-warn{background:#FEF3C7;color:#92400E}
html.dark .etv-vu-badge-warn{background:rgba(234,179,8,.16);color:#FCD34D}
.etv-vu-badge-send{background:var(--brand-ring);color:var(--brand)}
.etv-vu-empty{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:13px}
.etv-vu-dim{display:block;padding:16px;text-align:center;color:var(--text-muted);font-size:12px}
.etv-vu-more{padding:12px 0 2px;text-align:center}
.etv-vu-morebtn{padding:9px 18px;border:1px solid var(--border);border-radius:11px;background:var(--bg-card);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.etv-vu-morebtn:hover{background:var(--bg-card-hover);border-color:var(--brand);color:var(--text)}

/* ETV-Übersicht: KPI-Strip garantiert in einer Reihe + Filter-Lesbarkeit (2026-06-24) */
#etvUebKpis{display:flex;flex-wrap:wrap;gap:12px}
#etvUebKpis .weg-kpi{flex:1 1 0;min-width:120px}
/* WEG-Übersicht: Lage-Leiste seit 04.10.2026 in css/seiten/weg.css (.wg-lage). */
.weg-kpi.weg-kpi-active{outline:2px solid var(--brand);outline-offset:-2px;background:var(--brand-bg);box-shadow:0 0 0 4px var(--brand-bg)}
.weg-kpi.weg-kpi-active .weg-kpi-label{color:var(--brand);font-weight:700}
#pageEtvuebersicht .weg-toolbar .form-input{min-width:140px}
#pageEtvuebersicht .weg-toolbar select.form-input{padding-right:30px}
/* Toolbar-Filter cross-browser entschärfen: das Standard-Padding (10px oben/unten) klemmt bei
   forcierter height:34px in Chrome/Edge den Options-Text ab (Firefox zentriert, Chrome schneidet).
   Weniger vertikales Padding + line-height + box-sizing fixen das in allen Browsern. */
#pageEtvuebersicht .weg-toolbar .form-input{box-sizing:border-box;line-height:1.2}
#pageEtvuebersicht .weg-toolbar select.form-input{padding-top:4px;padding-bottom:4px}
@media (max-width:900px){#etvUebKpis .weg-kpi{flex:1 1 40%}}

  /* ═══ Mein Tag (Redesign 24.09.2026, Handoff "Modernisierte Mein Tag Ansicht") ═══
     Breakpoints nach der Breite des App-Bereichs, deshalb Container-Queries auf #pageMeintag:
     Phone < 700, Tablet 700-1099, Desktop >= 1100, Wide >= 1600, XL >= 1900.
     Die Seite setzt ihre Raender selbst (Phone 16 · Tablet 28 · Desktop 40 · Wide 48). */
  body[data-seite="meintag"] .main-content:not(#_) { padding:0; }
  #pageMeintag { container:mt / inline-size; }
  .mt-wrap { display:flex; flex-direction:column; gap:20px; padding:20px 16px 32px; font-variant-numeric:tabular-nums; }
  @container mt (min-width:700px) { .mt-wrap { gap:28px; padding:28px 28px 48px; } }
  @container mt (min-width:1100px) { .mt-wrap { padding:36px 40px 48px; } }
  @container mt (min-width:1600px) { .mt-wrap { padding:36px 48px 48px; } }

  /* Kopf */
  .mt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  @container mt (min-width:700px) { .mt-head { align-items:flex-end; } }
  .mt-head-text { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .mt-hello { font-size:26px; font-weight:700; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance; }
  @container mt (min-width:700px) { .mt-hello { font-size:28px; } }
  @container mt (min-width:1100px) { .mt-hello { font-size:32px; } }
  .mt-sub { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--text-2); }
  .mt-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
  .mt-switch { display:none; }
  @container mt (min-width:700px) { .mt-switch { display:block; width:240px; } }
  .mt-reload { width:44px; height:44px; padding:0; justify-content:center; color:var(--text-2); }
  @container mt (min-width:700px) { .mt-reload { width:38px; height:38px; } }

  /* Pills und Farbtoene */
  .mt-pill { font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:99px; white-space:nowrap; }
  .mt-count { font-size:12px; font-weight:600; color:var(--text-3); background:var(--surface-2); padding:2px 8px; border-radius:99px; }
  .mt-tone-red { background:var(--red-tint); color:var(--red-text); }
  .mt-tone-orange { background:var(--orange-tint); color:var(--orange-text); }
  .mt-tone-teal { background:var(--teal-tint); color:var(--teal-text); }
  .mt-tone-neutral { background:var(--surface-2); color:var(--text-2); }

  .mt-fremd-hint { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 16px; border-radius:12px; background:var(--brand-tint); font-size:13.5px; color:var(--text-2); }
  .mt-fremd-hint b { color:var(--text); font-weight:600; }
  .mt-fremd-hint a { color:var(--brand-text); font-weight:600; text-decoration:none; }

  /* Raster: Liste links, rechts Zeiterfassung, Zur Info, Heute erledigt, Fussnote */
  .mt-grid { display:grid; gap:20px; align-items:start; grid-template-columns:minmax(0,1fr);
    grid-template-areas:"zeit" "list" "info" "done" "foot"; }
  @container mt (min-width:700px) { .mt-grid { gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"zeit zeit" "list list" "info done" "foot foot"; } }
  @container mt (min-width:1100px) { .mt-grid { gap:28px 32px; grid-template-columns:minmax(0,1fr) 340px;
    grid-template-rows:auto auto auto auto 1fr; grid-template-areas:"list zeit" "list info" "list done" "list foot" "list ."; } }
  @container mt (min-width:1600px) { .mt-grid { grid-template-columns:minmax(0,1fr) 380px; } }
  @container mt (min-width:2200px) { .mt-grid { grid-template-columns:minmax(0,1fr) 420px; } }
  .mt-list { grid-area:list; display:flex; flex-direction:column; gap:28px; min-width:0; }
  .mt-zeiten { grid-area:zeit; } .mt-info { grid-area:info; } .mt-done { grid-area:done; } .mt-footnote { grid-area:foot; }

  .mt-card {
    background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); min-width:0; overflow:hidden;
  }
  .mt-card-title { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
  .mt-card-sub { font-size:12.5px; color:var(--text-3); }
  .mt-chev { display:flex; color:var(--text-3); transition:transform 0.2s; }

  /* Sektionen */
  .mt-group { display:flex; flex-direction:column; }
  .mt-sec { display:flex; align-items:center; gap:9px; padding:0 4px 10px; }
  .mt-sec h2 { margin:0; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--text); }
  .mt-dot { width:8px; height:8px; border-radius:50%; background:var(--text-3); flex-shrink:0; }
  .mt-sec-ueberfaellig .mt-dot { background:var(--red-dot); }
  .mt-sec-ueberfaellig h2 { color:var(--red-text); }
  .mt-sec-heute .mt-dot { background:var(--primary); }

  /* Aufgaben: eine Karte pro Sektion, Zeilen mit Trennlinien (Inset-Grouped) */
  .mt-tasks { display:grid; grid-template-columns:minmax(0,1fr); }
  .mt-task {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 4px;
    grid-template-areas:"chip . acts" "text text go";
    padding:10px 6px 14px 16px; cursor:pointer; outline:none; transition:background 0.15s;
  }
  .mt-task + .mt-task { border-top:1px solid var(--border); }
  .mt-task:hover { background:var(--hover); }
  .mt-task:active { background:var(--press); }
  .mt-task:focus-visible { background:var(--hover); box-shadow:inset 0 0 0 2px rgba(7,161,226,0.35); }
  @container mt (min-width:700px) {
    .mt-task { grid-template-columns:100px minmax(0,1fr) auto auto; grid-template-areas:"chip text acts go";
      gap:16px; min-height:68px; padding:14px 12px 14px 20px; }
  }
  @container mt (min-width:1100px) { .mt-task { grid-template-columns:112px minmax(0,1fr) auto auto; } }
  @container mt (min-width:1900px) {
    .mt-tasks { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mt-task:nth-child(2) { border-top:none; }
    .mt-task:nth-child(even) { border-left:1px solid var(--border); }
  }
  .mt-mod { grid-area:chip; justify-self:start; font-size:12px; font-weight:600; padding:4px 9px; border-radius:7px; white-space:nowrap;
    background:var(--surface-2); color:var(--text-2); }
  .mt-mod-beschl, .mt-mod-bp { background:var(--orange-tint); color:var(--orange-text); }
  .mt-mod-vv, .mt-mod-em { background:var(--brand-tint); color:var(--brand-text); }
  .mt-mod-beg, .mt-mod-sign { background:var(--green-tint); color:var(--green-text); }
  .mt-mod-team { background:var(--teal-tint); color:var(--teal-text); }
  .mt-mod-ang { background:var(--red-tint); color:var(--red-text); }
  .mt-mod-etv, .mt-mod-buch { background:rgba(139,92,246,0.12); color:#6d28d9; }
  html.dark .mt-mod-etv, html.dark .mt-mod-buch { background:rgba(167,139,250,0.14); color:#c4b5fd; }
  .mt-text { grid-area:text; min-width:0; display:flex; flex-direction:column; gap:3px; padding-right:10px; }
  @container mt (min-width:700px) { .mt-text { padding-right:0; } }
  .mt-title { font-size:15px; font-weight:500; line-height:1.38; color:var(--text); text-wrap:pretty; }
  .mt-meta { font-size:13.5px; line-height:1.38; color:var(--text-3); text-wrap:pretty; }
  .mt-note { font-size:13.5px; line-height:1.4; color:var(--text-2); font-style:italic; cursor:text; }
  @container mt (min-width:700px) { .mt-title { font-size:14.5px; line-height:1.4; } .mt-meta, .mt-note { font-size:13px; line-height:1.4; } }
  .mt-row-actions { grid-area:acts; display:flex; align-items:center; gap:2px; }
  .mt-act {
    width:44px; height:40px; border:none; border-radius:10px; background:transparent; color:var(--text-3);
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; transition:background 0.15s, color 0.15s;
  }
  @container mt (min-width:700px) { .mt-act { width:34px; height:34px; border-radius:8px; } }
  .mt-act:hover { background:var(--press); color:var(--text); }
  .mt-act:focus-visible { outline:none; box-shadow:var(--ring); }
  .mt-act.has-note { color:var(--brand-text); }
  .mt-act-text { width:auto; padding:0 10px; font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap; }
  .mt-go { grid-area:go; display:flex; align-items:center; gap:3px; color:var(--text-3); white-space:nowrap; }
  .mt-go-text { display:none; }
  @container mt (min-width:700px) {
    .mt-go { font-size:13.5px; font-weight:600; color:var(--brand-text); padding:7px 8px 7px 10px; border-radius:8px; }
    .mt-go-text { display:inline; }
  }

  /* Leerzustand */
  .mt-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:56px 24px; border-radius:16px; border:1px dashed var(--border-strong); text-align:center; }
  .mt-empty-ico { width:44px; height:44px; border-radius:50%; background:var(--green-tint); color:var(--green-text); display:flex; align-items:center; justify-content:center; }
  .mt-empty-title { font-size:16px; font-weight:600; }
  .mt-empty-text { font-size:13.5px; color:var(--text-3); max-width:360px; }
  .mt-footnote { margin:0; padding:0 4px; font-size:12.5px; line-height:1.55; color:var(--text-3); text-wrap:pretty; }
  .mt-fehler { padding:24px 4px; color:var(--text-3); }

  /* Zeiterfassung: Phone Titel + kleiner Knopf, Tablet eine Zeile, Desktop gestapelt */
  .mt-zeiten { display:flex; flex-direction:column; gap:12px; padding:16px; }
  .mt-zeiten-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .mt-zeiten-pill, .mt-zeiten-gross { display:none; }
  .mt-zeiten-klein { height:34px; padding:0 14px; border-radius:99px; border:none; background:var(--brand-tint); color:var(--brand-text); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }
  .mt-zeiten-klein:active { background:var(--press); }
  .mt-zeiten-werte { display:flex; justify-content:space-between; gap:12px; }
  .mt-zw { display:flex; flex-direction:column; gap:2px; }
  .mt-zw-l { font-size:12.5px; color:var(--text-3); }
  .mt-zw-v { font-size:20px; font-weight:600; letter-spacing:-0.02em; white-space:nowrap; }
  .mt-zeiten-plus { color:var(--green-text); } .mt-zeiten-minus { color:var(--red-text); }
  @container mt (min-width:700px) {
    .mt-zeiten { flex-direction:row; align-items:center; gap:14px 28px; padding:18px 20px; }
    .mt-zeiten-klein { display:none; }
    .mt-zeiten-werte { flex:1 1 auto; justify-content:flex-start; gap:28px; }
    .mt-zw-v { font-size:22px; }
    .mt-zeiten-gross { display:block; flex-shrink:0; }
  }
  @container mt (min-width:1100px) {
    .mt-zeiten { flex-direction:column; align-items:stretch; gap:16px; }
    .mt-zeiten-pill { display:inline-block; }
    .mt-zw-offen { display:none; }
    .mt-zeiten-werte { flex:0 0 auto; }
    .mt-zeiten-gross { width:100%; }
  }

  /* Zur Info: heute abwesend */
  .mt-card-kopf { width:100%; display:flex; align-items:center; gap:10px; padding:16px 18px 10px; border:none; background:transparent; color:var(--text); cursor:pointer; text-align:left; font-family:inherit; }
  .mt-card-kopf-text { flex:1; display:flex; flex-direction:column; gap:2px; }
  .mt-leute { display:flex; flex-direction:column; padding:0 8px 8px; }
  .mt-person { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background 0.15s; }
  .mt-person:hover { background:var(--hover); }
  .mt-avatar { width:32px; height:32px; border-radius:50%; background:var(--surface-2); color:var(--text-2); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mt-person-name { flex:1; min-width:0; font-size:14px; font-weight:500; }
  .mt-typ { font-size:12px; font-weight:500; padding:3px 8px; border-radius:6px; white-space:nowrap; }

  /* Heute erledigt: einklappbar, Chevron dreht 90° */
  .mt-done summary { list-style:none; display:flex; align-items:center; gap:10px; padding:16px 18px; cursor:pointer; transition:background 0.15s; }
  .mt-done summary::-webkit-details-marker { display:none; }
  .mt-done summary:hover { background:var(--hover); }
  .mt-done[open] .mt-chev { transform:rotate(90deg); }
  .mt-done-ico { width:22px; height:22px; border-radius:50%; background:var(--green-tint); color:var(--green-text); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mt-done-titel { flex:1; font-size:15px; font-weight:600; letter-spacing:-0.01em; }
  .mt-done-liste { border-top:1px solid var(--border); }
  .mt-done-row { display:flex; flex-direction:column; gap:2px; padding:12px 18px; }
  .mt-done-row + .mt-done-row { border-top:1px solid var(--border); }
  .mt-done-text { font-size:13.5px; color:var(--text-2); }
  .mt-done-meta { font-size:12px; color:var(--text-3); }

  /* Laden: Skeleton */
  .mt-skel { height:12px; border-radius:5px; background:var(--surface-2); animation:mtPuls 1.4s ease-in-out infinite; }
  .mt-skel-hello { width:260px; max-width:70%; height:30px; border-radius:8px; }
  .mt-skel-sec { width:120px; height:14px; margin:8px 4px 0; }
  .mt-skel-row { display:flex; align-items:center; gap:16px; padding:18px 20px; }
  .mt-skel-row + .mt-skel-row { border-top:1px solid var(--border); }
  .mt-skel-chip { width:84px; height:22px; border-radius:7px; flex-shrink:0; }
  .mt-skel-lines { flex:1; display:flex; flex-direction:column; gap:8px; }
  .mt-skel-2 { height:10px; opacity:0.7; }
  @keyframes mtPuls { 50% { opacity:0.55; } }

  /* Verschieben-Menue: Popover, am Telefon Bottom-Sheet */
  .mt-snooze-menu { position:absolute; z-index:1000; width:248px; padding:6px; border-radius:14px; background:var(--surface-solid); border:1px solid var(--border-strong); box-shadow:var(--pop-shadow); display:flex; flex-direction:column; animation:popIn 0.16s ease-out; }
  .mt-snooze-menu .sheet-grip { display:none; }
  .mt-menu-titel { font-size:12px; font-weight:600; color:var(--text-3); padding:8px 10px 6px; }
  .mt-snooze-menu button, .mt-snooze-menu label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding:0 10px; border:none; border-radius:8px; background:transparent; color:var(--text); font-size:14px; font-family:inherit; text-align:left; cursor:pointer; }
  .mt-snooze-menu button:hover { background:var(--brand-tint); }
  .mt-snooze-menu label > span { white-space:nowrap; }
  .mt-snooze-menu label .form-input { width:128px; min-height:0; height:32px; padding:0 8px; font-size:13px; }
  .mt-menu-datum { font-size:12.5px; color:var(--text-3); }
  @media (max-width:767px) {
    .mt-snooze-menu { position:fixed; left:0 !important; right:0; top:auto !important; bottom:0; width:auto; border:none; border-radius:18px 18px 0 0;
      padding:0 12px max(12px, env(safe-area-inset-bottom)); box-shadow:0 0 0 100vmax var(--scrim), var(--pop-shadow); animation:sheetIn 0.22s cubic-bezier(0.2,0,0,1); }
    .mt-snooze-menu .sheet-grip { display:block; }
    .mt-menu-titel { font-size:17px; font-weight:600; color:var(--text); padding:8px 8px 10px; }
    .mt-snooze-menu button, .mt-snooze-menu label { min-height:50px; font-size:16px; }
    .mt-menu-datum { font-size:14px; }
  }
  .viewas-chip {
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,149,0,0.14);
    border:1px solid rgba(255,149,0,0.5); color:#b25000; border-radius:99px;
    padding:3px 12px; font-size:12px; font-weight:600; white-space:nowrap;
  }
  html.dark .viewas-chip { color:#ffb04d; }
  .viewas-chip .viewas-x { cursor:pointer; font-size:15px; line-height:1; opacity:0.7; }
  .viewas-chip .viewas-x:hover { opacity:1; }

/* ── ETV: Dokumente für die Versammlung (Pins) ─────────────────────────── */
.etv-docs-card { margin-top: 16px; padding: 16px; }
.etv-docs-head h2 { font-size: 15px; font-weight: 700; margin: 0; display: flex; gap: 8px; align-items: center; }
.etv-docs-head h2 svg { width: 16px; height: 16px; }
.etv-docs-head .sub { font-size: 12px; color: var(--text-muted); margin: 2px 0 10px; }
.etv-docs-warn { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.etv-docs-suggrow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.etv-docs-katlbl { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 110px; }
.etv-docs-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.etv-docs-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 4px; font-size: 12px; background: var(--bg-input); }
.etv-docs-chip.pinned { border-color: var(--brand); background: var(--brand-bg); }
.etv-docs-chip i { font-style: normal; color: var(--text-muted); font-size: 11px; }
.etv-docs-pinbtn { border: none; background: transparent; cursor: pointer; font-size: 13px; width: 22px; height: 22px; border-radius: 50%; }
.etv-docs-pinbtn:hover { background: var(--bg); }
.etv-docs-chiplbl, .etv-docs-hitlbl, .etv-docs-pinlbl { cursor: pointer; }
.etv-docs-chiplbl:hover, .etv-docs-hitlbl:hover, .etv-docs-pinlbl:hover { text-decoration: underline; }
.etv-docs-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.etv-docs-search svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.etv-docs-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 13px; color: inherit; }
.etv-docs-secthead { font-size: 12px; font-weight: 700; margin: 14px 0 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.etv-docs-arclist { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; }
.etv-docs-arcgroup { border-bottom: 1px solid var(--border); }
.etv-docs-archead { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.etv-docs-archead:hover { background: var(--bg-input); }
.etv-docs-chev { color: var(--text-muted); width: 12px; flex-shrink: 0; }
.etv-docs-arcname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etv-docs-arcmeta { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; padding-left: 8px; }
.etv-docs-arcmore { margin: 6px 0; }
.etv-docs-morebtn { font-size: 12px; border: 1px solid var(--border); background: var(--bg-input); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.etv-docs-morebtn:hover { border-color: var(--brand); }
.etv-docs-hit { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid var(--border); }
.etv-docs-arclist .etv-docs-hit:last-child, .etv-docs-arcgroup .etv-docs-hit:last-child { border-bottom: none; }
.etv-docs-hit.indent { padding-left: 26px; }
.etv-docs-hit.pinned { background: var(--brand-bg); }
.etv-docs-hit .etv-docs-hitlbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etv-docs-upload { margin: 12px 0; padding: 12px; border: 2px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--text-muted); text-align: center; }
.etv-docs-upload.drag { border-color: var(--brand); background: var(--brand-bg); }
.etv-docs-uploadbtn { color: var(--brand); cursor: pointer; text-decoration: underline; }
.etv-docs-boardhead { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.etv-docs-pins { display: flex; gap: 6px; flex-wrap: wrap; }
.etv-docs-pin { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--brand); background: var(--brand-bg); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 12px; cursor: grab; }
.etv-docs-unpin { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 12px; }
.etv-docs-unpin:hover { color: #dc2626; }
.etv-docs-empty, .etv-docs-modalbody .dim { font-size: 12px; color: var(--text-muted); }
.etv-docs-modalbody { padding: 4px 18px 18px; overflow-y: auto; }

.etv-docs-dock { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.etv-docs-docklbl { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.etv-docs-dockchip { font-size: 12px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.etv-docs-dockchip:hover { border-color: var(--brand); }
.etv-docs-dockchip.offline { opacity: .5; cursor: not-allowed; }

/* ── ETV-Audit (Admin-Zeitleiste, 2026-07-14) ─────────────────────────── */
#pageEtvaudit .etvau-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
#pageEtvaudit .etvau-h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
#pageEtvaudit .etvau-sub { color:var(--text-secondary); font-size:13px; margin-top:4px; }
#pageEtvaudit .etvau-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
#pageEtvaudit .etvau-month, #pageEtvaudit .etvau-search { padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-input); color:var(--text); font-size:13px; box-sizing:border-box; }
#pageEtvaudit .etvau-search { flex:1; min-width:220px; }
#pageEtvaudit .etvau-chips { display:flex; flex-wrap:wrap; gap:6px; }
#pageEtvaudit .etvau-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font-size:12px; cursor:pointer; transition:border-color .15s,color .15s; }
#pageEtvaudit .etvau-chip:hover { border-color:var(--brand); }
#pageEtvaudit .etvau-chip.active { border-color:var(--brand); color:var(--text); box-shadow:inset 0 0 0 1px var(--brand); }
#pageEtvaudit .etvau-dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; display:inline-block; }
#pageEtvaudit .etvau-day { position:sticky; top:0; z-index:2; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-secondary); background:var(--bg-main); padding:14px 2px 6px; }
#pageEtvaudit .etvau-row { display:flex; align-items:baseline; gap:12px; padding:9px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); margin-bottom:6px; cursor:pointer; transition:border-color .15s; }
#pageEtvaudit .etvau-row:hover { border-color:var(--brand); }
#pageEtvaudit .etvau-row.err { border-color:var(--clr-err-border); background:var(--clr-err-bg); }
#pageEtvaudit .etvau-time { font-variant-numeric:tabular-nums; color:var(--text-secondary); font-size:12px; flex:0 0 36px; }
#pageEtvaudit .etvau-row .etvau-dot { position:relative; top:-1px; }
#pageEtvaudit .etvau-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#pageEtvaudit .etvau-action { font-size:13.5px; font-weight:600; color:var(--text); }
#pageEtvaudit .etvau-err { color:var(--clr-err-text); font-weight:700; }
#pageEtvaudit .etvau-ctx { font-size:12px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; }
#pageEtvaudit .etvau-user { font-size:12px; color:var(--text-secondary); border:1px solid var(--border); padding:2px 9px; border-radius:99px; flex:0 0 auto; }
#pageEtvaudit .etvau-details { margin:-2px 0 8px 48px; padding:8px 12px; border-left:2px solid var(--border); font-size:12px; color:var(--text-secondary); }
#pageEtvaudit .etvau-details pre { margin:6px 0 0; padding:8px 10px; background:var(--bg-main); border:1px solid var(--border-light); border-radius:8px; overflow-x:auto; font-size:11.5px; max-height:280px; }
#pageEtvaudit .etvau-foot { text-align:center; color:var(--text-secondary); font-size:12px; padding:14px 0 30px; }
#pageEtvaudit .etvau-foot a { color:var(--brand); text-decoration:none; }
@media (max-width: 700px) {
  #pageEtvaudit .etvau-user { display:none; }
  #pageEtvaudit .etvau-details { margin-left:12px; }
}
#pageEtvaudit .etvau-asmfilter { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--brand); border-radius:10px; background:var(--brand-bg); color:var(--text); font-size:13px; font-weight:600; }
#pageEtvaudit .etvau-asmfilter a { color:var(--brand); font-weight:500; text-decoration:none; }

/* ── ETV Rechtschreibprüfung (TOP-Karte + Editor-Dialog) ─────────────────────── */
.etv-spell-box { border:1px solid var(--brand,#09A1E2); border-radius:10px; padding:8px 12px; margin-bottom:10px; background:rgba(9,161,226,0.06); }
.etv-spell-head { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-dark,#1A61AB); margin-bottom:6px; }
html.dark .etv-spell-head { color:var(--brand-light,#7DD3FC); }
.etv-spell-row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; flex-wrap:wrap; }
.etv-spell-row.done { opacity:.55; }
.etv-spell-word { text-decoration:line-through wavy var(--red,#DC2626); }
.etv-spell-fix { font-weight:600; color:var(--green,#16A34A); }
.etv-spell-ok { font-size:12px; color:var(--green,#16A34A); }
/* ============================================================
   Beschlusstext-Vorschläge aus der internen Notiz (2026-08-08)
   ============================================================
   Eigene Akzentfarbe (Indigo) statt Markenblau: maschinell formulierter Text muss in einem
   Dokument, das rechtsverbindlich wird, auf einen Blick von menschlichem unterscheidbar sein.
   Die Form (getönter Grund, 3px-Rail links, Eyebrow-Kopf) ist bewusst dieselbe wie bei
   .etv-note-callout — die Vorschläge stammen aus genau dieser Notiz. */
.etv-bv { --ki:#5B5BD6; --ki-bg:rgba(91,91,214,0.07); --ki-ring:rgba(91,91,214,0.28);
  background:var(--ki-bg); border:1px solid var(--ki-ring); border-left:3px solid var(--ki);
  border-radius:var(--radius-sm,10px); padding:12px 14px 10px; margin:10px 0 0; }
html.dark .etv-bv { --ki:#9A9AF2; --ki-bg:rgba(154,154,242,0.10); --ki-ring:rgba(154,154,242,0.26); }

.etv-bv__head { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ki); }
.etv-bv__head .sp { margin-left:auto; }
.etv-bv__sub { font-size:11.5px; color:var(--text-muted); margin:3px 0 0; }

/* Laufender Balken ohne Prozent-Lüge: die Dauer ist nicht vorhersagbar, deshalb wird
   sie nicht behauptet. Stattdessen Sekundenzähler + Abbrechen. */
.etv-bv__rail { position:relative; height:2px; border-radius:2px; overflow:hidden;
  background:var(--ki-ring); margin:10px 0 12px; }
.etv-bv__rail i { position:absolute; top:0; bottom:0; width:38%; border-radius:2px;
  background:var(--ki); animation:etvBvSweep 1.15s cubic-bezier(.55,.1,.45,.9) infinite; }
@keyframes etvBvSweep { 0% { left:-38%; } 100% { left:100%; } }
.etv-bv__wait { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-secondary); }
.etv-bv__wait .sec { font-variant-numeric:tabular-nums; color:var(--text-muted); }
.etv-bv__wait .hint { color:var(--text-muted); }
.etv-bv__wait button { margin-left:auto; }

/* Platzhalter in der Geometrie der echten Karten — beim Eintreffen springt nichts. */
.etv-bv__skel { border-top:1px solid var(--ki-ring); padding:10px 0 2px; }
.etv-bv__skel span { display:block; height:9px; border-radius:5px; margin-bottom:7px;
  background:linear-gradient(90deg, var(--ki-ring) 25%, transparent 50%, var(--ki-ring) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; }
.etv-bv__skel span:nth-child(2) { width:92%; }
.etv-bv__skel span:nth-child(3) { width:64%; }

.etv-bv-row { border-top:1px solid var(--ki-ring); padding:10px 0 2px; }
.etv-bv-row:first-of-type { border-top:0; padding-top:2px; }
.etv-bv__bar { display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap; }
.etv-bv__name { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ki); }
.etv-bv__delta { font-size:11px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.etv-bv__delta b { font-weight:700; }
.etv-bv__delta .plus { color:var(--green); }
.etv-bv__delta .minus { color:var(--red); }
.etv-bv__acts { margin-left:auto; display:flex; gap:6px; }

.etv-bv-text { font-size:14px; line-height:1.62; color:var(--text); word-break:break-word; }
.etv-bv-text ins { background:var(--green-bg); text-decoration:none; border-radius:3px; padding:0 2px;
  box-shadow:inset 0 -1px 0 var(--green); }
.etv-bv-text del { background:var(--red-bg); border-radius:3px; padding:0 2px; opacity:.75; }

.etv-bv__leer { font-size:13px; line-height:1.55; color:var(--text-secondary); }
.etv-bv__leer b { color:var(--text); }

.etv-bv button:focus-visible { outline:2px solid var(--ki); outline-offset:2px; }


/* Fund-Markierung direkt im Vorschau-Text der TOP-Karte */
.etv-spell-mark { text-decoration:underline wavy var(--red,#DC2626); text-decoration-skip-ink:none; background:rgba(220,38,38,0.10); border-radius:3px; padding:0 1px; }

/* ============================================================
   Protokoll bearbeiten — Master-Detail-Redesign 2026-07-17 (etvpb-)
   Design-Handoff: etv/design_handoff_protokoll_bearbeitung/ — ausschließlich
   App-Tokens (Light/Dark automatisch über den #pageEtv-Token-Scope oben).
   ============================================================ */
/* ── Ebenen-Staffelung (Seite → Karte → Feld), Prototyp --om-pg/--om-card/--om-inp ──
   Die etvpb-Klassen (und .form-input/.card innerhalb der Phase) hängen an
   --bg-card/--bg-input/--border; hier werden diese Tokens NUR innerhalb der
   Bearbeiten-Phase auf die drei Rollen gemappt: Seite = dunkelste Ebene (mit
   Radial-Glow oben rechts), Karten eine Stufe heller mit sichtbarer 1px-Border,
   Eingabefelder/innere Blöcke innerhalb der Karte wieder abgesetzt (Dark: dunkler
   als die Karte — bewusst umgekehrt zum globalen #pageEtv-Scope). */
#pageEtv #etvPhaseEdit {
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-input: #f1f4f9;
  --border: rgba(15,23,42,0.16);
  --border-light: rgba(15,23,42,0.11);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(7,161,226,0.12), transparent 60%), #eef1f6;
  border-radius: var(--radius-lg, 22px);
  padding: 20px 22px 30px;
  margin-bottom: 8px;
}
html.dark #pageEtv #etvPhaseEdit {
  /* Karten HALBTRANSPARENT wie im Prototyp (--om-card): bewusst KEIN großer Helligkeits-
     sprung zur Seite — die Tiefe entsteht daraus, dass der Radial-Glow durch die Füllung
     schimmert, plus Border und Schatten-Halo am Detail-Panel (Feedback Mike 2026-07-17,
     zweite Runde: opakes Aufhellen war die falsche Richtung). */
  --bg-card: rgba(17,24,39,0.88);
  --bg-card-hover: rgba(30,41,59,0.75);
  --bg-input: rgba(11,15,25,0.7);
  --border: rgba(255,255,255,0.12);
  --border-light: rgba(255,255,255,0.08);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(7,161,226,0.10), transparent 60%), #0b0f19;
}
/* Die beiden Haupt-Panels unterschiedlich (Prototyp): Tagesordnung = --om-card-2
   rgba(17,24,39,0.6) mit schwächerer Border, OHNE Schatten; Detail = --om-card 0.88 mit
   dem entscheidenden Drop-Shadow-Halo 0 12px 40px rgba(0,0,0,0.35). Light unverändert. */
html.dark #pageEtv #etvPhaseEdit .etvpb-list { background: rgba(17,24,39,0.6); border-color: rgba(255,255,255,0.10); }
html.dark #pageEtv #etvPhaseEdit .etvpb-detail { box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.etvpb-titlerow .sub { margin:5px 0 0; font-size:13px; color:var(--text-muted); }
.etvpb-progress .t1 { font-size:12px; font-weight:700; }
.etvpb-progress .t2 { font-size:10.5px; color:var(--text-muted); }
.etvpb-tab.active { background:var(--brand); color:#fff; font-weight:700; }
@keyframes etvpbFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.etvpb-list-head .lbl { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.etvpb-list-head .cnt { font-size:11px; color:var(--text-muted); }
.etvpb-row.active { border-color:var(--brand); background:var(--brand-bg); }
.etvpb-row.misc { opacity:0.72; }
.etvpb-row.misc.active { opacity:1; }
.etvpb-check.on { background:var(--green-bg); border:1px solid var(--green); }
.etvpb-row.active .etvpb-row-num { color:var(--brand); }
.etvpb-chip.info { background:var(--bg-input); color:var(--text-muted); }
.etvpb-row.active .etvpb-row-subj { color:var(--text); }
.etvpb-dot.green { background:var(--green); box-shadow:0 0 8px rgba(34,197,94,0.35); }
.etvpb-dot.red { background:var(--red); box-shadow:0 0 8px rgba(239,68,68,0.35); }
.etvpb-divider .lbl { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.etvpb-divider .line { flex:1; height:1px; background:var(--border-light); }
html.dark .etvpb-addbtn { color:var(--brand-light); }
.etvpb-checkbtn.on { background:var(--green-bg); border:1px solid var(--green); color:var(--green); font-weight:700; }
html.dark .etvpb-boxlabel { color:var(--brand-light); }
.etvpb-text .etv-edit-empty { color:var(--text-muted); font-style:italic; }
.etvpb-svtoggle .caret { font-size:11px; color:var(--text-muted); width:12px; }
.etvpb-svtoggle .hint { font-size:11px; color:var(--text-muted); margin-left:auto; }
.etvpb-callout.warn { background:var(--clr-warn-bg); border:1px solid var(--clr-warn-border); color:var(--clr-warn-text); }
.etvpb-vote-row .k { font-size:12.5px; font-weight:600; }
.etvpb-vote-row .v { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.etvpb-vote-total .lbl { font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.etvpb-vote-total .num { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.etvpb-vote-total .sub { font-size:10px; color:var(--text-muted); margin-top:4px; }
.etvpb-avatar.present { background:var(--green-bg); color:var(--green); }
.etvpb-avatar.represented { background:var(--brand-bg); color:var(--brand); }
.etvpb-avatar.absent { background:var(--bg-input); color:var(--text-muted); }
.etvpb-chipcard.on { border-color:var(--brand); background:var(--brand-bg); }
.etvpb-chipcard .chk { position:absolute; top:8px; right:10px; color:var(--brand); font-size:14px; font-weight:800; display:none; }
.etvpb-chipcard.on .chk { display:block; }
.etvpb-chipcard .nm { display:block; font-weight:600; font-size:13px; color:var(--text); }
.etvpb-chipcard .rl { display:block; font-size:10px; font-weight:600; color:#ca8a04; letter-spacing:0.04em; }
.etvpb-ex-badge.auto { background:var(--border-light); color:var(--text-muted); }
.etvpb-ex-badge.manual { background:var(--orange-bg); color:var(--orange); }

/* ProTico Wizard-Stepper (Baustein 2B, 2026-07-24) */
.protico-stepbtn { border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.protico-stepbtn.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.protico-stepbtn.done { background:var(--brand-bg); border-color:var(--brand-ring); color:var(--brand); }
.protico-stepbtn.future { opacity:0.6; }

/* ============================================================
   ProTico (Baustein 6) — Übergabe-/Abnahmeprotokolle
   Vokabular 1:1 nach dem Begehungs-Modul (.beg-*), damit das Modul wie der
   Rest der App aussieht: Glaskarten, Marken-Blau, 20px-Radien, Inter.
   REGEL: nur Tokens, keine hartcodierten Farben. Zwei Informationsachsen —
   Protokoll-TYP sitzt in der Icon-Kachel, STATUS im Punkt-Badge, Raum-ZUSTAND
   in der linken Kante.
   ============================================================ */

.pro-page { padding:28px 32px 40px; max-width:1080px; margin:0 auto; }
.pro-detail { padding:22px 32px 48px; max-width:900px; margin:0 auto; }

/* --- Kopfzeile --- */
.pro-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.pro-head h1 { font-size:28px; font-weight:800; letter-spacing:-0.035em; margin:0; line-height:1.1; }
.pro-head .sub { color:var(--text-secondary); font-size:13.5px; margin-top:5px; }
.pro-head-spacer { flex:1; }
.pro-search { position:relative; }
.pro-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-muted); width:15px; height:15px; pointer-events:none; }
.pro-search .form-input { padding-left:33px; min-width:250px; }

/* --- Status-Segmente --- */
.pro-tabs { display:inline-flex; gap:3px; padding:4px; background:var(--bg-card);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-glass); border-radius:12px; box-shadow:var(--shadow-sm); }
.pro-tab { display:inline-flex; align-items:center; gap:7px; border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--text-secondary);
  padding:7px 14px; border-radius:9px; transition:all .18s; }
.pro-tab:hover { color:var(--text); }
.pro-tab.active { background:var(--brand); color:#fff; box-shadow:0 2px 8px var(--brand-ring); }
.pro-tab .cnt { font-size:11px; font-weight:700; background:rgba(0,0,0,0.06); padding:1px 7px; border-radius:999px; }
.pro-tab.active .cnt { background:rgba(255,255,255,0.25); }

/* --- Filterzeile --- */
.pro-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:22px; }
.pro-filters .fgrp { display:flex; flex-direction:column; gap:5px; }
.pro-filters label { font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-spacing);
  text-transform:uppercase; color:var(--label-color); }
.pro-filters .form-input, .pro-filters .form-select { padding:8px 11px; font-size:13px; }

/* --- Abschnittsüberschrift in Versalien --- */
.pro-subhead { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; margin:0 2px 11px; }
.pro-subhead > svg { width:15px; height:15px; flex:none; }
.pro-subhead .cnt { font-weight:700; color:var(--text-secondary); background:var(--bg-input);
  border:1px solid var(--border-light); padding:1px 8px; border-radius:999px; text-transform:none; letter-spacing:0; }
.pro-subhead .sp { flex:1; }

/* --- Listenzeile eines Protokolls --- */
.pro-list { display:flex; flex-direction:column; gap:9px; }
.pro-row { position:relative; display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-glass); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:14px 16px; cursor:pointer; font-family:inherit; color:inherit;
  transition:transform .16s, box-shadow .16s, border-color .16s; }
.pro-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border); }
/* Kompakte Variante fuer dichte Listen (Vorlagen): kleinere Kachel, weniger Polster. */
.pro-row.compact { padding:9px 13px; gap:11px; }
.pro-row.compact:hover { transform:none; }
.pro-row.compact .pro-tile { width:32px; height:32px; border-radius:9px; }
.pro-row.compact .pro-tile svg { width:16px; height:16px; }
.pro-row.compact .ttl { font-size:14px; font-weight:600; }
.pro-row:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.pro-row .body { flex:1; min-width:0; }
.pro-row .body > * { display:block; }
.pro-row .ttl { font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pro-row .meta { display:flex; align-items:center; gap:0; flex-wrap:wrap; color:var(--text-muted); font-size:12.5px; margin-top:3px; }
.pro-row .meta b { font-weight:600; color:var(--text-secondary); }
.pro-row .chev { color:var(--text-muted); transition:transform .18s, color .18s; flex:none; display:inline-flex; }
.pro-row .chev svg { width:17px; height:17px; }
.pro-row:hover .chev { transform:translateX(2px); color:var(--brand); }

/* Papierkorb-Zeile: die Karte bleibt ein <button> (oeffnet die Leseansicht), die Aktionen
   liegen als GESCHWISTER darunter — verschachtelte Buttons waeren ungueltiges HTML und der
   Klick landete unzuverlaessig. Wrapper haelt beides als ein Listenelement zusammen. */
.pro-trash { display:flex; flex-direction:column; }
.pro-trash .pro-row { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pro-trash .pro-row:hover { transform:none; }
.pro-trash-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 16px; background:var(--bg-input);
  border:1px solid var(--border-glass); border-top:none;
  border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); }
.pro-trash-bar .frist { flex:1; min-width:180px; color:var(--text-muted); font-size:12px; }

/* Punkttrenner in Meta-Zeilen (wie .beg-card .meta .sep). display:inline-block ist PFLICHT,
   ein reiner inline-Span ignoriert width/height und der Trenner verschwindet dann komplett
   (Symptom: "ab 15.04.2006Koelner Strasse 68"). Der Abstand kommt vom Trenner selbst,
   deshalb gap:0 in den Flex-Zeilen, die ihn nutzen. */
.pro-sep { display:inline-block; vertical-align:middle; width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.5; flex:none; margin:0 6px; }

/* --- Icon-Kachel: trägt den TYP (Übergabe/Abnahme) --- */
.pro-tile { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--bg-input); color:var(--text-secondary); }
.pro-tile svg { width:21px; height:21px; }
.pro-tile.t-uebergabe { background:rgba(34,197,94,0.12); color:var(--clr-ok-text); }
.pro-tile.t-abnahme { background:rgba(249,115,22,0.12); color:var(--orange); }
.pro-tile.lg { width:54px; height:54px; border-radius:15px; }
.pro-tile.lg svg { width:27px; height:27px; }

/* --- Punkt-Badge: trägt den STATUS --- */
.pro-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:999px; border:1px solid var(--border-light);
  background:var(--bg-input); color:var(--text-secondary); white-space:nowrap; }
.pro-badge .d { width:6px; height:6px; border-radius:50%; flex:none; background:var(--text-muted); }
.pro-badge.s-entwurf { background:rgba(249,115,22,0.1); color:var(--orange); border-color:rgba(249,115,22,0.22); }
.pro-badge.s-entwurf .d { background:var(--orange); }
.pro-badge.s-abgeschlossen { background:rgba(34,197,94,0.1); color:var(--clr-ok-text); border-color:rgba(34,197,94,0.22); }
.pro-badge.s-abgeschlossen .d { background:var(--green); }
.pro-badge.s-archiviert { background:var(--bg-input); color:var(--text-secondary); border-color:var(--border-light); }
.pro-badge.s-papierkorb { background:var(--clr-err-bg); color:var(--clr-err-text); border-color:var(--clr-err-border); }
.pro-badge.s-papierkorb .d { background:var(--red); }
.pro-badge.info { background:var(--brand-bg); color:var(--brand-dark); border-color:var(--brand-ring); }
.pro-badge.info .d { background:var(--brand); }
.pro-badge.warn { background:var(--clr-warn-bg); color:var(--clr-warn-text); border-color:var(--clr-warn-border); }
.pro-badge.warn .d { background:var(--orange); }
.pro-badge.err { background:var(--clr-err-bg); color:var(--clr-err-text); border-color:var(--clr-err-border); }
.pro-badge.err .d { background:var(--red); }
.pro-badge.plain { border-color:var(--border); }

.pro-page .btn > svg, .pro-detail .btn > svg { width:15px; height:15px; flex:none; }
/* Buttons, die als <a> ausgeliefert werden (PDF oeffnen/herunterladen), duerfen nicht wie
   Textlinks unterstrichen sein. */
.pro-page a.btn, .pro-detail a.btn, .pro-lb a.btn { text-decoration:none; }
.pro-back svg { width:16px; height:16px; }

/* --- Kennzahlen-Streifen der Detailansicht --- */
.pro-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.pro-stat { background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-glass); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:15px 16px; text-align:center; }
.pro-stat .n { font-size:26px; font-weight:800; letter-spacing:-0.04em; line-height:1; font-variant-numeric:tabular-nums; }
.pro-stat .l { font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-top:6px;
  text-transform:uppercase; letter-spacing:.04em; }
.pro-stat.ok .n { color:var(--clr-ok-text); }
.pro-stat.mangel .n { color:var(--orange); }
.pro-stat.err .n { color:var(--clr-err-text); }
.pro-stat.muted .n { color:var(--text-muted); }

/* --- Abschnittskarte --- */
.pro-sec { background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-glass); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  margin-bottom:14px; overflow:hidden; }
.pro-sec-head { display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--border-light); }
.pro-sec-head > svg { width:17px; height:17px; color:var(--text-muted); flex:none; }
.pro-sec-head h3 { font-size:15px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.pro-sec-head .cnt { font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg-input);
  border:1px solid var(--border-light); padding:1px 8px; border-radius:999px; }
.pro-sec-head .sp { flex:1; }
.pro-sec > .pro-sec-head:last-child { border-bottom:none; }
.pro-sec-body { padding:18px 20px; }
.pro-sec-body.tight { padding:12px 14px; }
.pro-sec-empty { padding:26px 20px; text-align:center; color:var(--text-muted); font-size:13px; }

/* --- Kopf der Detailansicht --- */
.pro-dh { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.pro-dh .body { min-width:0; flex:1; }
.pro-dh h1 { font-size:23px; font-weight:800; letter-spacing:-0.03em; margin:0; }
.pro-dh .addr { color:var(--text-secondary); font-size:13.5px; margin-top:4px; }
.pro-dh .badges { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; align-items:center; }
.pro-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--text-secondary); padding:0; margin-bottom:14px; }
.pro-back:hover { color:var(--brand); }
.pro-back svg { width:16px; height:16px; }

/* --- Feld/Wert-Paare --- */
.pro-kv { display:grid; grid-template-columns:minmax(130px,max-content) 1fr; gap:5px 16px; align-items:baseline; }
.pro-kv dt { font-size:12.5px; color:var(--text-muted); }
.pro-kv dd { font-size:13.5px; margin:0; font-variant-numeric:tabular-nums; }
.pro-kv dd.strong { font-weight:600; }

/* --- Aktionsleiste --- */
.pro-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-light); }

/* --- Hinweisstreifen --- */
.pro-note { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:var(--radius-sm);
  font-size:13px; line-height:1.45; }
.pro-note svg { width:16px; height:16px; flex:none; margin-top:1px; }
.pro-note.info { background:var(--clr-info-bg); border:1px solid var(--clr-info-border); color:var(--clr-info-text); }
.pro-note.warn { background:var(--clr-warn-bg); border:1px solid var(--clr-warn-border); color:var(--clr-warn-text); }
.pro-note.err { background:var(--clr-err-bg); border:1px solid var(--clr-err-border); color:var(--clr-err-text); }
.pro-note .sp { flex:1; }

/* --- Beteiligte --- */
.pro-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:11px; }
.pro-person { border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:12px 14px; background:var(--bg-input); }
.pro-person .role { font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-spacing);
  text-transform:uppercase; color:var(--label-color); }
.pro-person .nm { font-weight:700; font-size:14.5px; letter-spacing:-0.01em; margin:2px 0 6px; }
.pro-person .cline { display:flex; align-items:center; gap:7px; font-size:12.5px; padding:1px 0; color:var(--text-secondary); }
.pro-person .cline svg { width:13px; height:13px; color:var(--text-muted); flex:none; }
.pro-person a { color:var(--brand); text-decoration:none; }
.pro-person a:hover { text-decoration:underline; }
.pro-person .adr { font-size:12.5px; color:var(--text-muted); margin-top:5px; }

/* --- Räume: linke Kante trägt den Zustand --- */
.pro-rooms { display:flex; flex-direction:column; gap:8px; }
.pro-room { border:1px solid var(--border-light); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-input); }
.pro-room-btn { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 14px;
  background:none; border:none; cursor:pointer; font-family:inherit; color:inherit; }
.pro-room-btn:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.pro-room-btn .chev { color:var(--text-muted); transition:transform .18s; flex:none; display:inline-flex; }
.pro-room-btn .chev svg { width:15px; height:15px; }
.pro-room.open .pro-room-btn .chev { transform:rotate(90deg); }
.pro-room-btn .nm { flex:1; min-width:0; font-weight:600; font-size:14px; letter-spacing:-0.01em; }
.pro-room-btn .st { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.pro-room-btn .st .d { width:7px; height:7px; border-radius:50%; flex:none; }
.pro-room-btn .cnts { display:flex; align-items:center; gap:0; font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.pro-room.z-gut { border-left:3px solid var(--green); }
.pro-room.z-gut .st { color:var(--clr-ok-text); } .pro-room.z-gut .st .d { background:var(--green); }
.pro-room.z-maengel { border-left:3px solid var(--orange); }
.pro-room.z-maengel .st { color:var(--orange); } .pro-room.z-maengel .st .d { background:var(--orange); }
.pro-room.z-nicht_besichtigt { border-left:3px solid var(--gray-300); }
.pro-room.z-nicht_besichtigt .st { color:var(--text-muted); } .pro-room.z-nicht_besichtigt .st .d { background:var(--text-muted); }
.pro-room-body { padding:2px 14px 14px; border-top:1px solid var(--border-light); }
.pro-room-body > * + * { margin-top:14px; }

/* --- Mängel: linke Kante trägt die Schwere --- */
.pro-defects { display:flex; flex-direction:column; gap:8px; }
.pro-defect { border-left:3px solid var(--gray-300); padding:7px 0 7px 11px; }
.pro-defect .txt { font-weight:600; font-size:13.5px; }
.pro-defect .meta { display:flex; align-items:center; gap:0; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin-top:2px; }
.pro-defect .note { font-size:12.5px; color:var(--text-secondary); margin-top:3px; }
.pro-defect.sv-leicht { border-left-color:var(--clr-warn-text); }
.pro-defect.sv-mittel { border-left-color:var(--orange); }
.pro-defect.sv-schwer { border-left-color:var(--red); }

/* --- Zähler --- */
.pro-meters { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:11px; }
.pro-meter { display:flex; gap:13px; align-items:flex-start; border:1px solid var(--border-light);
  border-radius:var(--radius-sm); padding:13px 14px; background:var(--bg-input); }
.pro-meter .body { flex:1; min-width:0; }
.pro-meter .body > * { display:block; }
.pro-meter .typ { font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-spacing);
  text-transform:uppercase; color:var(--label-color); }
.pro-meter .val { font-size:24px; font-weight:800; letter-spacing:-0.035em; line-height:1.1; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.pro-meter .val .u { font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:0; margin-left:3px; }
.pro-meter .val.none { font-size:14px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.pro-meter .sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
.pro-meter .use { font-size:12.5px; font-weight:600; color:var(--brand-dark); margin-top:3px; font-variant-numeric:tabular-nums; }
.pro-meter .use.wechsel { color:var(--clr-warn-text); font-weight:600; }
.pro-meter details summary { font-size:11.5px; color:var(--text-muted); cursor:pointer; margin-top:5px; }
.pro-meter pre { font-size:11.5px; white-space:pre-wrap; margin:5px 0 0; color:var(--text-secondary); }

/* --- Fotos --- */
.pro-photos { display:flex; gap:7px; flex-wrap:wrap; }
.pro-thumb { position:relative; border:none; padding:0; background:var(--bg-input); border-radius:var(--radius-sm);
  overflow:hidden; cursor:pointer; line-height:0; transition:transform .16s, box-shadow .16s; }
.pro-thumb:hover { transform:scale(1.03); box-shadow:var(--shadow); }
.pro-thumb:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.pro-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.pro-thumb.sz-l { width:118px; height:118px; }
.pro-thumb.sz-m { width:86px; height:86px; }
.pro-thumb.sz-s { width:62px; height:62px; }

/* --- Unterschriften --- */
.pro-sigs { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:11px; }
.pro-sig { border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:12px 14px; background:var(--bg-input); }
.pro-sig .role { font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-spacing);
  text-transform:uppercase; color:var(--label-color); }
.pro-sig img { display:block; width:100%; max-height:110px; object-fit:contain; object-position:left center;
  background:#fff; border-radius:8px; margin:7px 0 5px; }
.pro-sig .when { font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* --- Textblöcke --- */
.pro-text { white-space:pre-wrap; font-size:13.5px; line-height:1.55; }
.pro-text + .pro-tlabel { margin-top:14px; }
.pro-tlabel { display:block; font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-spacing);
  text-transform:uppercase; color:var(--label-color); margin-bottom:4px; }

/* --- PDF-Einbettung --- */
.pro-pdf { width:100%; height:min(72vh,760px); border:1px solid var(--border-light); border-radius:var(--radius-sm);
  background:#fff; display:block; }
.pro-hash { font-size:11px; color:var(--text-muted); margin-top:7px; word-break:break-all; font-family:ui-monospace,monospace; }

/* --- Lightbox --- */
.pro-lb { position:fixed; inset:0; z-index:9999; background:rgba(8,12,20,0.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; }
.pro-lb img { max-width:94vw; max-height:78vh; object-fit:contain; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.pro-lb .cap { color:rgba(255,255,255,0.85); font-size:13px; text-align:center; max-width:80vw; }
.pro-lb .bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pro-lb .bar .btn { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.22); color:#fff; backdrop-filter:none; }
.pro-lb .bar .btn:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.35); }

/* --- Band: anstehende Ein-/Auszüge --- */
.pro-moves { display:flex; flex-direction:column; }
.pro-move { display:flex; align-items:center; gap:12px; padding:10px 20px; border-top:1px solid var(--border-light); flex-wrap:wrap; }
.pro-move .dir { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; min-width:82px; }
.pro-move .dir svg { width:14px; height:14px; }
.pro-move.einzug .dir { color:var(--clr-ok-text); }
.pro-move.auszug .dir { color:var(--orange); }
.pro-move .dt { font-size:12.5px; font-variant-numeric:tabular-nums; min-width:86px; color:var(--text-secondary); }
.pro-move .who { flex:1; min-width:180px; font-size:13px; }
.pro-move .who b { font-weight:600; }
.pro-move .who .wo { color:var(--text-muted); }

/* --- Vorlagen-Auswahl im Anlegen-Formular --- */
.pro-tplcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.pro-tplcol { display:flex; flex-direction:column; min-width:0; }
.pro-tplcol .hd { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pro-tplcol .hd strong { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pro-tplcol .hd .sp { flex:1; }
.pro-tpllist { border:1px solid var(--border-light); border-radius:var(--radius-sm); background:var(--bg-input);
  max-height:232px; overflow-y:auto; }
.pro-check { display:flex; align-items:center; gap:9px; padding:7px 11px; cursor:pointer; font-size:12.5px; }
.pro-check + .pro-check { border-top:1px solid var(--border-light); }
.pro-check:hover { background:var(--bg-card-hover); }
.pro-check input { accent-color:var(--brand); flex:none; }
.pro-check .t { flex:1; min-width:0; }
.pro-check .n { color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* --- Personen-Vorschlag (Anlegen) --- */
.pro-picks { display:flex; flex-direction:column; gap:7px; }
.pro-pick { display:flex; align-items:center; gap:11px; border:1px solid var(--border-light); border-radius:var(--radius-sm);
  padding:10px 13px; background:var(--bg-input); cursor:pointer; }
.pro-pick:hover { border-color:var(--border); }
.pro-pick input { accent-color:var(--brand); flex:none; }
.pro-pick .body { flex:1; min-width:0; }
.pro-pick .body > * { display:block; }
.pro-pick .nm { font-weight:600; font-size:13.5px; }
.pro-pick .sub { font-size:12px; color:var(--text-muted); margin-top:1px; }

/* --- Trefferliste (Objekt-/Personensuche) --- */
.pro-hits { display:none; margin-top:6px; border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; max-height:264px; overflow-y:auto; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.pro-hits.open { display:block; }
.pro-hit { padding:10px 13px; cursor:pointer; }
.pro-hit + .pro-hit { border-top:1px solid var(--border-light); }
.pro-hit:hover { background:var(--bg-card-hover); }
.pro-hit strong { font-size:13.5px; font-weight:600; }
.pro-hit .sub { font-size:12px; color:var(--text-muted); margin-top:1px; }
.pro-hits .msg { padding:10px 13px; color:var(--text-muted); font-size:12.5px; }

/* --- Protokoll-Zelle in der Einheiten-Tabelle --- */
.pro-cell { display:inline-flex; align-items:center; gap:6px; }

/* --- Zählerverlauf --- */
.pro-hist + .pro-hist { margin-top:14px; }
.pro-hist .hd { font-size:12.5px; font-weight:700; letter-spacing:-0.01em; margin-bottom:4px; }

@media (max-width:900px) {
  .pro-page, .pro-detail { padding:18px 16px 32px; }
  .pro-head h1 { font-size:23px; }
  .pro-stats { grid-template-columns:repeat(2,1fr); }
  .pro-kv { grid-template-columns:1fr; gap:1px 0; }
  .pro-kv dt { margin-top:7px; }
  .pro-search .form-input { min-width:0; width:100%; }
  .pro-search { flex:1; }
  /* Status-Segmente schmaler als der Bildschirm: waagerecht scrollen statt abschneiden. */
  .pro-tabs { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pro-tab { white-space:nowrap; }
  .pro-filters .fgrp { flex:1; min-width:140px; }
  .pro-meters { grid-template-columns:1fr; }
  .pro-people, .pro-sigs { grid-template-columns:1fr; }
}

/* Wizard-Stepper (nur noch Bearbeiten-Weg fuer Entwuerfe) — an die .pro-tabs angelehnt. */
.protico-stepper { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.protico-stepper .protico-stepbtn { font-family:inherit; transition:all .18s; }
.protico-stepper .protico-stepbtn:hover { color:var(--text); border-color:var(--gray-300); }
.protico-stepper .protico-stepbtn.active:hover { color:#fff; border-color:var(--brand); }

/* Wizard-Schrittinhalte: die Schritte bringen eigene <h3>/<strong>-Struktur mit, hier nur
   an die Typo-Skala der App angleichen. Leerhinweise im Wizard stehen INLINE in einer Liste,
   deshalb linksbuendig statt zentriert wie in den Abschnittskarten. */
.protico-step > h3 { font-size:15px; font-weight:700; letter-spacing:-0.01em; margin:0 0 14px; }
.protico-step h3 + * { margin-top:0; }
.protico-step .pro-sec-empty { text-align:left; padding:6px 0; font-size:12.5px; }
.protico-step .form-label { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--label-color); }

/* [hidden] muss im Modul wirklich verstecken: .btn/.pro-badge setzen display:inline-flex und
   ueberschreiben das UA-Stylesheet sonst (Symptom: "Filter zuruecksetzen" und ein 0-Zaehler
   bleiben sichtbar). */
.pro-page [hidden], .pro-detail [hidden] { display:none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Modul "Rückschreiben" (rueckschreiben.js) — Prüfstrecke und Blatt
   Entwurf vom 2026-08-06, umgesetzt aus "Prüfstrecke und Blatt Redesign".

   Leitgedanke: das ist kein Formular, das man ausfüllt, sondern eine Prüfstrecke.
   Die KI hat schon geantwortet, der Mensch liest gegen. Deshalb trägt jeder Wert
   sichtbar seine Herkunft (KI / HP / HAND), und jede Karte sagt zugeklappt, was
   in ihr steht.

   Alles hier ist auf #pageRueckschreiben begrenzt, Präfix .rsb-. Farben kommen
   aus den App-Tokens; die --rsb-*-Tokens gibt es nur für das, was die App nicht
   hat (Papier, Chip-Flächen, Segment-Schalter).
   Auszeichnungsschrift ist Satoshi — dieselbe, die im echten Brief steht. */
@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Bold.otf')   format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Black.otf')  format('opentype'); font-weight:900; font-display:swap; }

#pageRueckschreiben {
  --rsb-papier:#ffffff;
  --rsb-rand-stark:rgba(148,163,184,0.42);
  --rsb-chip-fl:rgba(148,163,184,0.18);
  --rsb-ki-fl:rgba(124,58,237,0.10);
  --rsb-segment:rgba(148,163,184,0.16);
  --rsb-segment-an:#ffffff;
  --rsb-fach-rand:var(--border);
  --rsb-tisch:#dde5ee;
  --rsb-schatten:0 1px 3px rgba(15,23,42,.04), 0 10px 28px -16px rgba(15,23,42,.22);
  --rsb-blatt-schatten:0 1px 2px rgba(15,23,42,.2), 0 24px 48px -18px rgba(15,23,42,.5);
}
html.dark #pageRueckschreiben {
  --rsb-rand-stark:rgba(255,255,255,0.24);
  --rsb-chip-fl:rgba(148,163,184,0.16);
  --rsb-ki-fl:rgba(167,139,250,0.16);
  --rsb-segment:rgba(148,163,184,0.16);
  --rsb-segment-an:#1e293b;
  --rsb-fach-rand:rgba(255,255,255,0.30);
  --rsb-tisch:#0e1621;
  --rsb-schatten:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
  --rsb-blatt-schatten:0 1px 2px rgba(0,0,0,.6), 0 24px 48px -18px rgba(0,0,0,.75);
}

/* ── Stationsleiste: der Weg des Dokuments, waagerecht über beiden Spalten ── */
.rsb-leiste {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  padding:0 clamp(12px,2.5vw,28px) 14px;
}
/* Erledigt: gefüllter grauer Punkt. Aktiv: blauer Punkt mit Ring auf blauer Fläche.
   Offen: hohler Punkt, gedämpft. Ohne diesen Unterschied sagt die Leiste nichts. */
.rsb-station.erledigt::before { background:var(--text-secondary); }
.rsb-station.erledigt .rsb-station-txt { color:var(--text-secondary); }
.rsb-station.offen { background:none; }
.rsb-station.offen::before { background:none; border:1.5px solid var(--text-muted); opacity:.7; }
.rsb-station.offen .rsb-station-txt { color:var(--text-muted); opacity:.75; }
.rsb-station.aktiv { background:var(--brand-bg); box-shadow:inset 0 0 0 1px var(--brand-ring); }
.rsb-station.aktiv::before { width:8px; height:8px; background:var(--brand); box-shadow:0 0 0 4px var(--brand-bg); }
.rsb-station.aktiv .rsb-station-txt { font-family:'Satoshi', var(--font); font-weight:900; color:var(--brand); }

/* ── Zwei Spalten, ohne Breakpoint-Pflege ──────────────────────────────── */
.rsb-raster {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,400px), 1fr));
  gap:22px; align-items:start;
  padding:0 clamp(12px,2.5vw,28px) 40px; max-width:1760px; margin:0 auto;
}
/* Der Kleber muss ein INNERES div sein: das Grid-Element selbst hat mit
   align-items:start keinen Spielraum und würde nie kleben. Gescrollt wird
   .main-content, top:0 gilt also relativ dazu, nicht zum Fenster. */
/* Auf die Fensterhöhe begrenzt: sonst wäre der klebende Block irgendwann höher als
   der Weg, den seine Spalte hergibt, und würde am Seitenende doch weglaufen. Das Blatt
   scrollt dann in sich — abgeschnitten wird nichts. */
.rsb-kleber {
  position:sticky; top:0; display:flex; flex-direction:column; gap:12px;
  /* Etwas Luft: über dem Raster steht noch die Stationsleiste, die mitscrollt.
     Ohne diesen Abzug reicht der Klebeweg der Spalte nicht bis ans Seitenende. */
  max-height:calc(100vh - 210px);
}

/* ── Herkunft: KI vorgeschlagen, HP aus HausPerfekt, HAND überschrieben ── */
.rsb-chip {
  font-family:'Satoshi', var(--font); font-weight:900; font-size:9px; letter-spacing:.08em;
  padding:2px 5px; border-radius:4px; background:var(--rsb-chip-fl); color:var(--text-secondary);
  white-space:nowrap;
}
.rsb-chip.ki   { background:var(--rsb-ki-fl); color:var(--violet); }
.rsb-chip.hand { background:var(--brand-bg); color:var(--brand); }
.rsb-marke.warn { background:var(--clr-warn-bg); color:var(--clr-warn-text); }
.rsb-marke.ok   { background:var(--clr-ok-bg); color:var(--clr-ok-text); }
.rsb-karte.mahnt { border-color:var(--clr-warn-border); }
.rsb-punkt.ok   { background:var(--clr-ok-bg); color:var(--clr-ok-text); }
.rsb-punkt.warn { background:var(--clr-warn-bg); color:var(--clr-warn-text); }
.rsb-punkt.ki   { background:var(--rsb-ki-fl); color:var(--violet); }
.rsb-karte.auf .rsb-karte-pfeil { transform:rotate(90deg); }
.rsb-karte:not(.auf) .rsb-karte-inhalt { display:none; }
.rsb-gitter > .rsb-feld.voll { grid-column:1/-1; }
.rsb-klein.stark { border-color:var(--brand); background:var(--brand-bg); color:var(--brand); }
.rsb-fach:hover, .rsb-fach.zieht { border-color:var(--brand); background:var(--brand-bg); }
.rsb-fach.schmal { padding:11px 16px; text-align:left; }
.rsb-fach.schmal .rsb-fach-gross { font-size:12.5px; color:var(--text-muted); font-weight:500; font-family:var(--font); }
.rsb-fach.schmal .rsb-fach-klein { display:none; }

/* ── Dateien, die mit dem Brief hinausgehen ─────────────────────────────── */
.rsb-dateien { display:flex; flex-direction:column; gap:6px; }
.rsb-segment button.an {
  background:var(--rsb-segment-an); box-shadow:0 1px 3px rgba(15,23,42,0.18);
  font-weight:900; color:var(--text);
}
.rsb-vorgang.aktiv { border-color:var(--brand); background:var(--brand-bg); }

/* ── Das Blatt: der einzige helle, harte Gegenstand, auch im Dunkelmodus ── */
.rsb-blattkopf {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
}
/* Fünf Wege nach draußen: kompakt, damit sie in einer Zeile bleiben. */
.rsb-blattkopf .btn { padding:7px 11px; font-size:12.5px; }
/* flex-start, sonst streckt der Kasten das Blatt auf seine Höhe und schneidet es
   wegen overflow:hidden ab. Gescrollt wird die Hülle, nicht das Papier. */
.rsb-blatt-huelle { display:flex; align-items:flex-start; justify-content:center; padding:4px 0 8px; }
/* Leer: A4-Verhältnis halten. Gefüllt: mitwachsen, damit nichts abgeschnitten wird —
   die pdf.js-Seiten stehen untereinander und tragen ihr Verhältnis selbst. */
/* Immer A4: leer wie gefüllt. Die BREITE setzt rsbBlattPassend aus der verfügbaren Höhe,
   damit eine ganze Seite hineinpasst statt eines breiten Ausschnitts. Mehrseitige Briefe
   scrollen im Blatt. */
.rsb-blatt { aspect-ratio:1/1.414; }
.rsb-blatt:not(.gefuellt) { display:flex; align-items:center; justify-content:center; }
.rsb-blatt.gefuellt { display:block; overflow:auto; }
.rsb-blatt.eingang { filter:saturate(.6); }
.rsb-blatt.frisch { animation:rsbBlattEin .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rsbBlattEin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── Geräte ────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  /* Eine Spalte: das Blatt steht unter der Prüfstrecke und klebt nicht mehr,
     sonst verdeckt es die Felder, an denen gerade gearbeitet wird. Ohne Kleben braucht
     es auch keine Höhenbegrenzung, der Brief darf hier einfach lang sein. */
  .rsb-kleber { position:static; max-height:none; }
  .rsb-kleber > .rsb-blatt-huelle { overflow:visible; }
  #pageRueckschreiben input, #pageRueckschreiben textarea, #pageRueckschreiben select {
    font-size:16px;   /* sonst zoomt Safari beim Fokus in das Feld */
  }
  .rsb-raster { padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
}
@media (pointer:coarse) {
  #pageRueckschreiben button { min-height:40px; -webkit-tap-highlight-color:transparent; }
  #pageRueckschreiben input[type="checkbox"] { width:20px; height:20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Modul "Online-Beauftragung Betriebskostenabrechnung" (bkauftrag.js)
   Nutzt ausschließlich die App-weiten Design-Tokens (--text, --bg-card, --brand,
   --clr-ok-*/--clr-err-*/--clr-warn-*/--clr-info-* usw.) — die sind bereits für
   Hell/Dunkel definiert, ein eigener html.dark-Block ist hier daher nicht nötig.
   ══════════════════════════════════════════════════════════════════════════ */

.bka-wrap { width:100%; }
.bka-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.bka-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.01em; color:var(--text); }
.bka-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:18px; margin-bottom:16px; backdrop-filter:var(--glass-blur);
}
.bka-card-title {
  font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.bka-step {
  display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--brand);
  color:#fff; font-size:11px; font-weight:700; align-items:center; justify-content:center; letter-spacing:0;
}
.bka-muted { color:var(--text-muted); font-size:13px; }
.bka-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }
.bka-scroll { max-height:320px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Adress-Trefferliste */
.bka-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px;
  border:1px solid var(--border-light); border-radius:var(--radius-sm); margin-bottom:6px;
  cursor:pointer; transition:background .12s;
}
.bka-row:hover { background:var(--brand-bg); }
.bka-row-main { display:flex; flex-direction:column; gap:1px; min-width:0; }
.bka-row-name { font-size:13.5px; font-weight:600; color:var(--text); }
.bka-row-sub { font-size:12px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bka-row-nr { flex-shrink:0; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* Gewählte Adresse + Wohnungsvorschau */
.bka-gewaehlt {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:9px 12px; background:var(--ctrl-bg); border-radius:var(--radius-sm); margin-bottom:10px;
}
.bka-wlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:10px 0 4px; }
.bka-wliste { margin:0 0 8px; padding-left:18px; font-size:13px; color:var(--text); }
.bka-wliste li { margin-bottom:2px; }

.bka-zeile { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.bka-zeile > .form-group { flex:1 1 220px; min-width:0; }

.bka-sendok { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; background:var(--ctrl-bg); }
.bka-linkrow { margin-top:8px; }
.bka-linkrow input { font-size:12.5px; }

/* Status-Chips */
.bka-chip {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; padding:3px 10px;
  border-radius:999px; white-space:nowrap;
}
.bka-st-neutral { background:var(--ctrl-bg); color:var(--text-muted); }
.bka-st-info { background:var(--clr-info-bg); color:var(--clr-info-text); }
/* "Geöffnet" braucht eine von "Verschickt" (bka-st-info) unterscheidbare Farbe -- in Hell
   sind --brand-bg/--brand-dark und --clr-info-bg/--clr-info-text zufällig identisch (beide
   #0689c2 auf demselben Blauton), die zwei Status-Chips waren dadurch nicht auseinanderzuhalten
   (Sichtpruefung 2026-07-29). --violet/--violet-bg ist ein eigenes, app-weites Token (siehe
   usr-role-gf) und bleibt in Hell/Dunkel klar von Blau/Orange/Gruen/Rot getrennt. */
.bka-st-violet { background:var(--violet-bg); color:var(--violet); }
.bka-st-warn { background:var(--clr-warn-bg); color:var(--clr-warn-text); }
.bka-st-ok { background:var(--clr-ok-bg); color:var(--clr-ok-text); }
.bka-st-err { background:var(--clr-err-bg); color:var(--clr-err-text); }
.bka-st-muted { background:var(--ctrl-bg); color:var(--text-muted); text-decoration:line-through; }

/* Vorgangsliste */
.bka-fbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
/* Die Tabelle hat 7 Spalten und passt auf schmalen Bildschirmen nicht in die Karte
   (Sichtpruefung 2026-07-29: ohne Wrapper wurden Status/Versendet/Eingegangen abgeschnitten,
   ohne jede Moeglichkeit sie einzusehen). Eigener Scroll-Container statt die Spalten zu kuerzen,
   damit auf dem Desktop nichts verloren geht. */
.bka-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bka-table { width:100%; border-collapse:collapse; font-size:13px; }
.bka-table th {
  text-align:left; padding:7px 10px; color:var(--text-muted); font-size:11px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; border-bottom:1px solid var(--border);
}
.bka-table td { padding:7px 10px; border-bottom:1px solid var(--border-light); color:var(--text); }
.bka-hist-row { cursor:pointer; transition:background .12s; }
.bka-hist-row:hover td { background:var(--brand-bg); }

/* Detail */
.bka-back {
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--brand);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:4px 0; margin-bottom:10px;
}
.bka-back:hover { text-decoration:underline; }
.bka-head .bka-chip { margin-left:2px; }
.bka-kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:8px 16px; font-size:13px; color:var(--text); margin-bottom:12px; }
.bka-fehler {
  grid-column:1/-1; padding:8px 11px; border-radius:8px; background:var(--clr-err-bg);
  color:var(--clr-err-text); font-size:12.5px;
}
.bka-btnbar { display:flex; gap:8px; flex-wrap:wrap; }
.bka-auftrag { border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; }
.bka-auftrag-kopf { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.bka-auftrag-zeile { font-size:12.5px; color:var(--text); margin-top:2px; }
.bka-anlage { font-size:13px; color:var(--text); padding:4px 0; }
.bka-link { color:var(--accent); font-size:12.5px; font-weight:600; text-decoration:none; }
.bka-link:hover { text-decoration:underline; }

@media (pointer:coarse) {
  .bka-row { padding:12px 14px; }
  .bka-wrap .btn { min-height:44px; }
  .bka-wrap .form-input, .bka-wrap .form-select { font-size:16px !important; }
}
@media (max-width:660px) {
  .bka-kv { grid-template-columns:1fr; }
}

/* ============================================================
   ETV: Protokoll-Fortschritt (Listen-Chip + Karte in der Abschluss-Phase)
   Spec: etv/docs/superpowers/specs/2026-07-31-etv-protokoll-fortschritt-design.md
   ============================================================ */
.etv-list-prot {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.etv-list-prot .ic { font-size: 11px; }
.etv-list-prot.grau {
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(127, 127, 127, 0.10));
  border: 1px solid var(--border);
}
.etv-list-prot.amber {
  color: var(--clr-warn-text, #b45309);
  background: var(--clr-warn-bg, rgba(245, 158, 11, 0.10));
  border: 1px solid var(--orange, #E0931C);
}
.etv-list-prot.gruen {
  color: var(--clr-ok-text, #1CA05A);
  background: var(--clr-ok-bg, rgba(28, 160, 90, 0.12));
  border: 1px solid var(--green, #1CA05A);
}

.etvr-fin-pill.neutral { background: var(--bg-subtle, rgba(127,127,127,0.12)); color: var(--text-muted); }

/* Kopf umbricht, statt den Titel zu zerreißen: lange Status-Pillen („Post noch nicht an BINECT
   übergeben") rutschen in die zweite Zeile. */
#etvProtStatusCard .etvps-head, #etvVertragStatusCard .etvps-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; flex-wrap: wrap; }
#etvProtStatusCard .etvps-head .etvr-fin-card-title, #etvVertragStatusCard .etvps-head .etvr-fin-card-title { white-space: nowrap; }
#etvProtStatusCard .etvps-head .etvr-fin-pill, #etvVertragStatusCard .etvps-head .etvr-fin-pill { text-align: left; }
#etvProtStatusCard .etvps-note, #etvVertragStatusCard .etvps-note { font-size: 11px; color: var(--text-muted); margin: -6px 0 10px; }
/* Archiv-Ablage. Warn-Familie heißt --clr-warn-*, NICHT --amber-* (die gibt es nicht, Befund 2026-08-05). */
#etvProtStatusCard .etvps-note.ok { color: var(--clr-ok-text); background: var(--clr-ok-bg); border: 1px solid var(--green); border-radius: 8px; padding: 6px 9px; margin: 0 0 10px; }
#etvProtStatusCard .etvps-note.warn { color: var(--clr-warn-text); background: var(--clr-warn-bg); border: 1px solid var(--orange); border-radius: 8px; padding: 6px 9px; margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#etvProtStatusCard .etvps-steps, #etvVertragStatusCard .etvps-steps, .vvb-flow.etvps-steps { display: flex; flex-direction: column; gap: 9px; }
#etvProtStatusCard .etvps-step, #etvVertragStatusCard .etvps-step, .vvb-flow .etvps-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
#etvProtStatusCard .etvps-step .ttl, #etvVertragStatusCard .etvps-step .ttl, .vvb-flow .etvps-step .ttl { font-size: 12.5px; font-weight: 600; color: var(--text); }
#etvProtStatusCard .etvps-step.open .ttl, #etvVertragStatusCard .etvps-step.open .ttl, .vvb-flow .etvps-step.open .ttl { color: var(--text-muted); font-weight: 500; }
#etvProtStatusCard .etvps-step .det, #etvVertragStatusCard .etvps-step .det, .vvb-flow .etvps-step .det { grid-column: 2; font-size: 11px; color: var(--text-muted); }
#etvProtStatusCard .etvps-step.active .det, #etvVertragStatusCard .etvps-step.active .det, .vvb-flow .etvps-step.active .det { color: var(--clr-warn-text, #b45309); }
#etvProtStatusCard .etvps-dot, #etvVertragStatusCard .etvps-dot, .vvb-flow .etvps-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; }
#etvProtStatusCard .etvps-dot.done, #etvVertragStatusCard .etvps-dot.done, .vvb-flow .etvps-dot.done { background: var(--clr-ok-bg); border: 1px solid var(--green); color: var(--clr-ok-text); }
#etvProtStatusCard .etvps-dot.active, #etvVertragStatusCard .etvps-dot.active, .vvb-flow .etvps-dot.active { background: var(--clr-warn-bg); border: 1px solid var(--clr-warn-border); }
#etvProtStatusCard .etvps-dot.open, #etvVertragStatusCard .etvps-dot.open, .vvb-flow .etvps-dot.open { background: transparent; border: 1px dashed var(--border); }

#etvProtStatusCard .etvps-signers, #etvVertragStatusCard .etvps-signers { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
#etvProtStatusCard .etvps-sub, #etvVertragStatusCard .etvps-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
#etvProtStatusCard .etvps-signer, #etvVertragStatusCard .etvps-signer { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#etvProtStatusCard .etvps-signer .nm, #etvVertragStatusCard .etvps-signer .nm { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#etvProtStatusCard .etvps-signer .st, #etvVertragStatusCard .etvps-signer .st { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
#etvProtStatusCard .etvps-sdot, #etvVertragStatusCard .etvps-sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--border); }
#etvProtStatusCard .etvps-sdot.signed, #etvVertragStatusCard .etvps-sdot.signed { background: var(--green, #1CA05A); }
#etvProtStatusCard .etvps-sdot.viewed, #etvVertragStatusCard .etvps-sdot.viewed { background: var(--brand, #09A1E2); }
#etvProtStatusCard .etvps-sdot.invited, #etvVertragStatusCard .etvps-sdot.invited { background: var(--orange, #E0931C); }
/* Vermerk statt Unterschrift: eine Festlegung der Verwaltung, kein von selbst entstandener Status.
   Ohne eigene Regel fiel der Punkt auf das blasse --border zurück und die Zeile las sich wie
   „wartet". Die Karte ist schmal (rechte Rail), deshalb darf die Zeile umbrechen, sonst kollidieren
   Wortlaut und Rücknahme-Knopf. Warn-Familie ist --clr-warn-*, NICHT --amber-* (existiert nicht). */
#etvProtStatusCard .etvps-sdot.no-signature { background: var(--clr-warn-text); }
#etvProtStatusCard .etvps-signer, #etvVertragStatusCard .etvps-signer { flex-wrap: wrap; row-gap: 3px; }
#etvProtStatusCard .etvps-signer.no-signature .st { color: var(--clr-warn-text); font-weight: 600; }
#etvProtStatusCard .etvps-vmtag { font-size: 10px; font-weight: 700;
  color: var(--clr-warn-text); background: var(--clr-warn-bg); border: 1px solid var(--clr-warn-border);
  border-radius: 99px; padding: 1px 7px; white-space: nowrap; }

#etvProtStatusCard .etvps-actions, #etvVertragStatusCard .etvps-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
#etvProtStatusCard .etvps-actions .etvr-fin-pdf, #etvVertragStatusCard .etvps-actions .etvr-fin-pdf { flex: 1 1 130px; margin: 0; }

/* ============================================================
   HOMEPAGE-STEUERPULT (#homepage) — Strecke Arbeitsstand → Live
   Klassen bewusst eigenstaendig unter .hpg-, nicht aus dem ETV-Modul
   geliehen. Farben ausschliesslich aus den Tokens, damit html.dark
   ohne eigene Regeln mitlaeuft.
   ============================================================ */
.hpg-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0B2740, #0683BC 62%, #08A6E6);
  color: #fff; padding: 22px 26px 24px; margin-bottom: 20px;
  box-shadow: 0 18px 44px rgba(8, 40, 64, 0.28);
}

/* ── Die Strecke: Knoten, Verbindung, Knoten, Verbindung, Knoten ── */
.hpg-route {
  position: relative; display: grid; align-items: stretch; gap: 0;
  grid-template-columns: minmax(0, 1.15fr) 58px minmax(0, 0.9fr) 58px minmax(0, 1.15fr);
  margin-top: 18px;
}

/* Verbindung: ruhend gestrichelt, waehrend des Deploys wandernd, danach gruen bzw. rot. */
.hpg-leg { position: relative; display: grid; place-items: center; }
@keyframes hpg-march { to { background-position-x: 12px; } }

/* Knoepfe in der Kopfzone (heller Grund, deshalb eigene Variante). */
.hpg-btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--brand-dark); font-weight: 700; font-size: 13.5px;
  padding: 9px 16px; border-radius: 11px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Bei langer Liste zeigt ein weicher Verlauf an der Unterkante, dass es weitergeht. */
.hpg-files-mask { position: relative; }
.hpg-step.done::before { background: var(--green); opacity: 0.4; }
.hpg-step.running .hpg-num { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-bg); }
.hpg-step.done .hpg-num { background: var(--green); border-color: var(--green); color: #fff; }
.hpg-step.warn .hpg-num { background: var(--orange); border-color: var(--orange); color: #fff; }
.hpg-step.error .hpg-num { background: var(--red); border-color: var(--red); color: #fff; }
.hpg-step.idle .hpg-step-title { color: var(--text-secondary); font-weight: 550; }
.hpg-step.error .hpg-step-msg { color: var(--clr-err-text); }
.hpg-step.warn .hpg-step-msg { color: var(--clr-warn-text); }
.hpg-step.running .hpg-step-msg { color: var(--brand-dark); }
@keyframes hpg-march-y { to { background-position-y: 12px; } }
  /* ============================================================
     WEG-News-Publisher (#wegnews)
     Kategoriefarben sind 1:1 die der oeffentlichen WEG-News-Rubrik
     auf projecta.immo (src/app/weg-news/content.tsx, OKLCH-Farbtoene) —
     gleiche Kategorie, gleiche Farbe innen wie aussen.
     ============================================================ */

  .wgn-sub { font-size:13px; color:var(--text-muted); margin:0 0 18px; }
  .wgn-sub b { font-weight:600; color:var(--text-secondary); }

  /* --- Rueckstand: fertig im Worktree, noch nicht auf projecta.immo --- */
  .wgn-offen {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:12.5px; color:var(--text-secondary); margin:-6px 0 18px;
    padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--bg-input);
  }
  .wgn-offen.wartet { border-color:var(--brand-ring); background:var(--brand-bg); }
  .wgn-offen b { font-weight:640; color:var(--text); }
  .wgn-offen-dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex:none; }
  .wgn-offen.wartet .wgn-offen-dot { background:var(--brand); }
  .wgn-offen-liste { color:var(--text-muted); }
  .wgn-offen-knopf { margin-left:auto; }

  /* --- Leiste „In Arbeit": Titelbild-Auftraege, ein Klick wechselt den Artikel --- */
  .wgn-arbeit {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 18px;
  }
  .wgn-arbeit-label {
    font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--text-muted); margin-right:2px;
  }
  .wgn-arbeit-stueck {
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--border); border-radius:999px; background:var(--bg-input);
    padding:3px 10px 3px 8px; max-width:340px;
  }
  .wgn-arbeit-stueck.aktiv { border-color:var(--brand); background:var(--brand-bg); }
  .wgn-arbeit-stueck.fehler { border-color:var(--red); }
  .wgn-arbeit-knopf {
    display:inline-flex; align-items:center; gap:7px; min-width:0;
    background:none; border:0; padding:0; cursor:pointer; color:inherit;
    font:inherit; font-size:12px; text-align:left;
  }
  .wgn-arbeit-knopf:hover .wgn-arbeit-titel { text-decoration:underline; }
  .wgn-arbeit-punkt { width:7px; height:7px; border-radius:50%; flex:none; background:var(--text-muted); }
  .wgn-arbeit-stueck.laeuft .wgn-arbeit-punkt { background:var(--brand); animation:wgn-puls 1.4s ease-in-out infinite; }
  .wgn-arbeit-stueck.fertig .wgn-arbeit-punkt { background:var(--green); }
  .wgn-arbeit-stueck.fehler .wgn-arbeit-punkt { background:var(--red); }
  .wgn-arbeit-titel {
    font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px;
  }
  .wgn-arbeit-status { color:var(--text-muted); white-space:nowrap; }
  .wgn-arbeit-erneut { font-size:11.5px; }
  @keyframes wgn-puls { 0%,100% { opacity:1; } 50% { opacity:.35; } }

  /* Auftragsstand in der Bild-Spalte des Archivs */
  .wgn-bild-job { font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
  .wgn-bild-job.laeuft { color:var(--brand); }
  .wgn-bild-job.fehler { color:var(--red); }

  #pageWegnews { container-type:inline-size; container-name:wgnpage; }
  .wgn-top { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; margin-bottom:16px; }
  .wgn-card { padding:20px 22px; }
  .wgn-card-title {
    font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--text-muted); margin:0 0 14px;
  }

  /* --- Ablageflaeche --- */
  .wgn-drop {
    border:1.5px dashed var(--border); border-radius:var(--radius);
    padding:26px 18px; text-align:center; cursor:pointer;
    transition:border-color .18s ease, background .18s ease, color .18s ease;
  }
  .wgn-drop:hover, .wgn-drop.over { border-color:var(--brand); background:var(--brand-bg); }
  .wgn-drop:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
  .wgn-drop svg { width:26px; height:26px; color:var(--text-muted); transition:color .18s ease; }
  .wgn-drop:hover svg, .wgn-drop.over svg { color:var(--brand); }
  .wgn-drop-title { font-size:14px; font-weight:600; margin-top:8px; }
  .wgn-drop-hint { font-size:12px; color:var(--text-muted); margin-top:5px; }
  .wgn-drop.hat-datei {
    display:flex; align-items:center; gap:13px; text-align:left;
    padding:14px 16px; border-style:solid; border-color:var(--border);
  }
  .wgn-drop.hat-datei svg { flex:none; color:var(--brand); }
  .wgn-drop.hat-datei .wgn-drop-title { margin-top:0; word-break:break-all; }

  .wgn-status { font-size:12.5px; color:var(--text-secondary); margin-top:11px; }
  .wgn-status.fehler { color:var(--red); }

  /* --- Formular --- */
  .wgn-fields { display:grid; grid-template-columns:1fr; gap:13px 14px; margin-top:18px; }
  .wgn-fields .weit { grid-column:1/-1; }
  .wgn-fields textarea.form-input { resize:vertical; min-height:96px; line-height:1.5; }
  .wgn-slug {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px; color:var(--text-muted); word-break:break-all;
  }
  .wgn-hint { font-size:12px; color:var(--text-muted); margin-top:8px; }
  .wgn-hint.warn { color:var(--orange); }
  .wgn-hint.fehler { color:var(--red); }
  /* Positiver Endzustand nach dem Anlegen (vorher stand dort die Kollisionswarnung
     ueber den eigenen, gerade angelegten Artikel -- Befund 2026-08-05). */
  .wgn-hint.ok { color:var(--green); }
  .wgn-hint a { color:inherit; text-decoration:underline; }
  /* Knopf, der wie ein Link im Hinweistext sitzt ("Diesen Artikel bearbeiten"). */
  .wgn-link-knopf {
    background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
    text-decoration:underline; cursor:pointer;
  }
  /* ── Titelbild wird erzeugt ─────────
     Der Ladezustand sitzt IM 16:9-Rahmen der Vorschaukarte, wo das Bild landet: gleiche
     Groesse, gleiche Kategoriefarbe (--wgn-h/--wgn-c), damit beim Eintreffen nichts springt
     und die Wartezeit sichtbar zu DIESEM Artikel gehoert. Ein Spinner daneben hat das nicht
     geleistet (Befund 2026-08-05). Die Farben kommen aus derselben OKLCH-Rechnung wie der
     Platzhalter, es gibt also keine zweite Palette. */
  /* Bild-Spalte im Archiv: Ansehen-Link plus "neu" zum Ersetzen des Motivs. */
  .wgn-bild-zelle { display:inline-flex; align-items:baseline; gap:8px; }
  .wgn-bild-neu { font-size:11.5px; color:var(--text-muted); }
  .wgn-bild-neu:hover { color:var(--accent); }
  /* --- Zwischenstand aus dem Bild-Stream (OpenAI partial_images) --- */
  /* Sitzt im selben absoluten Rahmen wie der Ladezustand, damit beim Eintreffen des fertigen
     Bildes nichts springt. Die Marke unten sagt, dass das noch nicht das Ergebnis ist. */
  .wgn-bild-teil { position:absolute; inset:0; overflow:hidden; }
  .wgn-bild-teil img { width:100%; height:100%; object-fit:cover; display:block; }
  .wgn-bild-teil-marke {
    position:absolute; left:0; right:0; bottom:0;
    padding:5px 10px; font-size:11px; font-weight:600; text-align:center;
    color:#fff; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  }

  .wgn-bild-lade {
    position:absolute; inset:0; overflow:hidden;
    /* MITTIG statt unten: als Textzeile am Rand war der Zustand zu unauffaellig, Mike hat
       den Start nicht gesehen (2026-08-05). Jetzt sitzt Balken plus Text in der Bildmitte. */
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:18px 22px; gap:3px;
    /* Exakt der Ton des Platzhalters (.wgn-preview-bild), damit der Rahmen beim Start des
       Laufs nicht die Farbe wechselt -- nur der Inhalt darin aendert sich. */
    background:oklch(94% calc(var(--wgn-c,.12) * .32) var(--wgn-h,258));
    color:oklch(36% calc(var(--wgn-c,.12) * .85) var(--wgn-h,258));
  }
  /* Dunkelmodus: NEUTRALE, leicht angehobene Flaeche statt Kategorieton. Grund: OKLCH mit
     einem warmen Farbton (Gelb, Orange) wird im Dunkeln zwangslaeufig braun, waehrend der
     Kartenkoerper kuehl blau ist -- das Feld sah aus wie ein kaputtes Bild, nicht wie ein
     wartender Platz (am Screenshot geprueft, 2026-08-05). Die Kategorie tragen hier nur noch
     Schrift und Fortschrittslinie. */
  html.dark .wgn-bild-lade {
    background:color-mix(in oklab, var(--bg-input) 82%, white 18%);
    color:oklch(90% calc(var(--wgn-c,.12) * .35) var(--wgn-h,258));
  }
  /* Ein einzelner weicher Lichtstreifen wandert durch die Flaeche -- kein Puls, kein Kreisel. */
  .wgn-bild-lade-sweep {
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg,
      transparent 30%,
      oklch(100% 0 0 / .42) 48%,
      transparent 66%);
    transform:translateX(-60%);
    animation:wgn-bild-sweep 2.1s cubic-bezier(.4,0,.25,1) infinite;
  }
  html.dark .wgn-bild-lade-sweep {
    background:linear-gradient(105deg, transparent 30%, oklch(100% 0 0 / .12) 48%, transparent 66%);
  }
  @keyframes wgn-bild-sweep {
    0%   { transform:translateX(-60%); }
    100% { transform:translateX(60%); }
  }
  /* Der eigentliche Ladebalken: deutlich sichtbar, unbestimmt (die Dauer ist nicht
     vorhersagbar, deshalb kein Prozentwert). */
  .wgn-bild-lade-balken {
    position:relative; width:min(62%, 260px); height:5px; border-radius:3px;
    background:oklch(100% 0 0 / .45); overflow:hidden; margin-bottom:12px;
  }
  html.dark .wgn-bild-lade-balken { background:oklch(100% 0 0 / .14); }
  .wgn-bild-lade-balken span {
    position:absolute; inset:0 auto 0 0; width:38%; border-radius:3px;
    background:oklch(56% calc(var(--wgn-c,.12) * 1.2) var(--wgn-h,258));
    animation:wgn-bild-balken 1.5s cubic-bezier(.65,0,.35,1) infinite;
  }
  html.dark .wgn-bild-lade-balken span {
    background:oklch(80% calc(var(--wgn-c,.12) * .9) var(--wgn-h,258));
  }
  @keyframes wgn-bild-balken {
    0%   { transform:translateX(-110%); }
    100% { transform:translateX(370%); }
  }
  .wgn-bild-lade-text {
    position:relative; font-size:12.5px; font-weight:650; letter-spacing:-.005em;
  }
  .wgn-bild-lade-text {
    position:relative; font-size:12.5px; font-weight:650; letter-spacing:-.005em;
  }
  .wgn-bild-lade-sub {
    /* 0.8 statt 0.72: bei 0.72 lag der 11px-Text auf den helleren Kategorietoenen bei
       4,3:1 und damit unter dem WCAG-AA-Minimum. Nachgerechnet, nicht geschaetzt:
       schlechtester Wert jetzt 5,2:1. */
    position:relative; font-size:11px; font-weight:500; opacity:.8;
    letter-spacing:.005em; line-height:1.35;
  }
  .wgn-actions { margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

  /* --- Schrittanzeige + Log --- */
  .wgn-steps { margin-top:18px; display:grid; gap:8px; }
  .wgn-step { display:grid; grid-template-columns:9px 1fr; gap:11px; align-items:start; }
  .wgn-step-dot {
    width:9px; height:9px; border-radius:50%; margin-top:5px;
    background:var(--gray-300); transition:background .2s ease;
  }
  .wgn-step[data-status="running"] .wgn-step-dot { background:var(--brand); animation:wgnPulse 1.4s ease-in-out infinite; }
  .wgn-step[data-status="done"]    .wgn-step-dot { background:var(--green); }
  .wgn-step[data-status="warn"]    .wgn-step-dot { background:var(--orange); }
  .wgn-step[data-status="error"]   .wgn-step-dot { background:var(--red); }
  .wgn-step-label { font-size:13px; }
  .wgn-step[data-status="done"] .wgn-step-label,
  .wgn-step[data-status="running"] .wgn-step-label { font-weight:600; }
  .wgn-step-msg { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
  @keyframes wgnPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
  .wgn-log {
    margin:14px 0 0; max-height:260px; overflow:auto; font-size:11px; line-height:1.6;
    background:var(--bg-input); border:1px solid var(--border-light);
    padding:11px 13px; border-radius:var(--radius-sm); white-space:pre-wrap; word-break:break-word;
  }

  /* --- Kategorie-Punkt und -Chip (Farbtoene vom oeffentlichen Bereich) --- */
  .wgn-dot {
    width:8px; height:8px; border-radius:50%; flex:none;
    background:oklch(62% var(--wgn-c,.12) var(--wgn-h,258));
  }
  .wgn-chip {
    display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap;
    background:oklch(96% calc(var(--wgn-c,.12) * .3) var(--wgn-h,258));
    color:oklch(42% var(--wgn-c,.12) var(--wgn-h,258));
  }
  html.dark .wgn-chip {
    background:oklch(34% calc(var(--wgn-c,.12) * .45) var(--wgn-h,258) / .5);
    color:oklch(82% var(--wgn-c,.12) var(--wgn-h,258));
  }

  /* --- Vorschaukarte --- */
  .wgn-preview { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-light); }
  .wgn-preview-bild {
    position:relative;   /* Anker fuer .wgn-bild-lade */
    aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
    background:oklch(94% calc(var(--wgn-c,.12) * .35) var(--wgn-h,258));
    color:oklch(45% var(--wgn-c,.12) var(--wgn-h,258));
    font-size:11.5px; font-weight:600; letter-spacing:.02em;
  }
  html.dark .wgn-preview-bild {
    background:oklch(30% calc(var(--wgn-c,.12) * .5) var(--wgn-h,258) / .55);
    color:oklch(78% var(--wgn-c,.12) var(--wgn-h,258));
  }
  .wgn-preview-bild img { width:100%; height:100%; object-fit:cover; display:block; }
  .wgn-preview-body { padding:15px 16px 17px; background:var(--bg-input); }
  .wgn-preview-titel {
    font-size:16px; font-weight:680; letter-spacing:-.015em; line-height:1.32;
    margin:10px 0 7px; color:var(--text);
  }
  .wgn-preview-excerpt { font-size:12.5px; line-height:1.55; color:var(--text-secondary); }
  .wgn-preview-meta {
    margin-top:12px; padding-top:11px; border-top:1px solid var(--border-light);
    font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums;
    display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  }
  .wgn-preview-leer {
    padding:40px 22px; text-align:center; font-size:12.5px; line-height:1.6;
    color:var(--text-muted); background:var(--bg-input);
  }

  /* --- Archiv --- */
  .wgn-archiv-kopf {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:16px 22px; border-bottom:1px solid var(--border-light);
  }
  .wgn-archiv-kopf h2 { font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0; }
  .wgn-archiv-zahl { font-size:12px; color:var(--text-muted); margin-right:auto; }
  .wgn-archiv-kopf .form-input { width:210px; }
  .wgn-archiv-kopf .form-select { width:auto; min-width:150px; }
  .wgn-archiv-hinweis {
    padding:10px 22px 0; font-size:11.5px; color:var(--text-muted); line-height:1.5;
  }
  .wgn-archiv-body { padding:6px 12px 12px; }

  .wgn-ausgabe {
    display:flex; align-items:baseline; gap:10px;
    padding:16px 10px 7px; border-bottom:1px solid var(--border-light);
  }
  .wgn-ausgabe-name { font-size:13px; font-weight:700; letter-spacing:-.01em; }
  .wgn-ausgabe-zahl { font-size:11.5px; color:var(--text-muted); margin-left:auto; font-variant-numeric:tabular-nums; }

  .wgn-zeile {
    display:grid; grid-template-columns:8px minmax(0,1fr); gap:8px; row-gap:3px;
    align-items:center; padding:9px 10px; border-radius:var(--radius-sm);
    transition:background .15s ease;
  }
  .wgn-zeile > * { grid-column:2; }
  .wgn-zeile > .wgn-dot { grid-column:1; grid-row:1; }
  .wgn-zeile:hover { background:var(--bg-card-hover); }
  .wgn-zeile-datum { font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  /* Der Punkt am Zeilenanfang traegt die Kategoriefarbe schon, im Chip waere er doppelt. */
  /* Im Archiv nur die Schrift in der Kategoriefarbe, ohne Pille: 100 gefuellte Pillen
     untereinander werden zum Farbteppich. Den Punkt am Zeilenanfang traegt die Zeile
     schon, im Chip waere er doppelt. Voll eingefaerbt ist der Chip nur in der Vorschau. */
  .wgn-zeile > .wgn-chip,
  html.dark .wgn-zeile > .wgn-chip {
    justify-self:start; padding:0; background:none; font-weight:500;
  }
  .wgn-zeile > .wgn-chip .wgn-dot { display:none; }
  .wgn-zeile > .wgn-pdf { justify-self:start; margin-left:-8px; }
  .wgn-zeile-titel { font-size:13px; line-height:1.4; color:var(--text); text-decoration:none; }
  .wgn-zeile-titel:hover { color:var(--brand); text-decoration:underline; }
  .wgn-pdf {
    display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-muted);
    text-decoration:none; padding:3px 8px; border-radius:7px; white-space:nowrap;
  }
  .wgn-pdf:hover { color:var(--brand); background:var(--brand-bg); }
  .wgn-pdf svg { width:13px; height:13px; flex:none; }
  .wgn-pdf.fehlt { color:var(--text-muted); opacity:.55; cursor:default; }

  /* Titelbild je Zeile: Link wenn vorhanden, sonst Knopf zum Erzeugen */
  .wgn-bild {
    font-size:11.5px; color:var(--text-muted); text-decoration:none;
    padding:3px 8px; border-radius:7px; white-space:nowrap;
  }
  .wgn-bild:hover { color:var(--brand); background:var(--brand-bg); }
  .wgn-bild-knopf { padding:3px 9px; font-size:11px; white-space:nowrap; }

  /* Zeilen-Aktion "Bearbeiten": zurueckhaltend, tritt erst beim Ueberfahren hervor */
  .wgn-zeile-knopf {
    border:none; background:none; font-family:inherit; font-size:11.5px; cursor:pointer;
    color:var(--text-muted); padding:3px 8px; border-radius:7px; white-space:nowrap;
    opacity:.7; transition:opacity .15s ease, color .15s ease, background .15s ease;
  }
  .wgn-zeile:hover .wgn-zeile-knopf { opacity:1; }
  .wgn-zeile-knopf:hover { color:var(--brand); background:var(--brand-bg); }
  .wgn-zeile-knopf:focus-visible { outline:2px solid var(--brand); outline-offset:1px; opacity:1; }
  .wgn-leer { padding:34px 12px; text-align:center; font-size:13px; color:var(--text-muted); }

  /* Genug Platz nebeneinander? Dann Zeile einzeilig und Formular zweispaltig.
     Container-Abfrage statt @media, weil die Navigation ein- und ausklappbar ist. */
  @container wgnpage (min-width:700px) {
    .wgn-fields { grid-template-columns:1fr 1fr; }
    .wgn-zeile {
      grid-template-columns:8px 104px minmax(0,1fr) auto auto auto auto; gap:11px; row-gap:0;
      padding:8px 10px;
    }
    .wgn-zeile > * { grid-column:auto; grid-row:auto; }
    .wgn-zeile > .wgn-chip { justify-self:end; }
    .wgn-zeile > .wgn-pdf { justify-self:end; margin-left:0; }
    .wgn-zeile > .wgn-bild, .wgn-zeile > .wgn-bild-knopf { justify-self:end; }
    .wgn-zeile > .wgn-zeile-knopf { justify-self:end; }
    .wgn-zeile-titel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  }
  @container wgnpage (min-width:1000px) {
    .wgn-top { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  }
  @container wgnpage (max-width:699px) {
    .wgn-archiv-kopf .form-input, .wgn-archiv-kopf .form-select { width:100%; }
    .wgn-archiv-zahl { width:100%; margin-right:0; }
  }

/* Verwalterverträge: Stil seit dem Redesign 03.10.2026 in css/seiten/vvbestellungen.css. */
.stand-hinweis{margin-left:12px;font-size:12px;color:var(--text-muted);}

/* ── Zeiterfassung (Reiter Zeiten): Stundenzettel, Entwurf 13.09.2026 ───────────────
   Nur Tokens, damit Hell- und Dunkelmodus ohne eigene Regeln stimmen. */
.zt-wrap { display: flex; flex-direction: column; gap: 12px; font-variant-numeric: tabular-nums; }
.zt-ansichten { display: flex; gap: 6px; flex-wrap: wrap; }
.zt-hinweis-karte { padding: 20px; color: var(--text-secondary); }
.zt-fehler { color: var(--red); font-size: 13px; }
.zt-dim { color: var(--text-secondary); }
.zt-fett { font-weight: 600; }
.zt-plus { color: var(--green); } .zt-minus { color: var(--red); }
.zt-r { text-align: right; }
.zt-link { font-size: 12px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.zt-link:hover { text-decoration: underline; }
.zt-link-aus { color: var(--text-muted); cursor: not-allowed; }
/* Kopfzeile */
.zt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zt-nav { padding: 6px 10px; font-size: 15px; line-height: 1; }
.zt-titel { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.zt-titel-punkt { color: var(--text-secondary); font-weight: 400; }
.zt-person { max-width: 220px; width: auto; font-size: 13px; padding: 6px 30px 6px 10px; }
.zt-personname { font-size: 13px; font-weight: 500; }
.zt-sperre { font-size: 12px; color: var(--text-secondary); }
.zt-spacer { flex: 1; }
.zt-saldo { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 14px; height: 32px; border-radius: 8px; }
.zt-saldo-plus { background: var(--green-bg); } .zt-saldo-minus { background: var(--red-bg); }
.zt-saldo-label { font-size: 12px; color: var(--text-secondary); }
.zt-saldo-wert { font-size: 15px; font-weight: 700; }
.zt-saldo-plus .zt-saldo-wert { color: var(--green); } .zt-saldo-minus .zt-saldo-wert { color: var(--red); }
.zt-uhr { display: flex; align-items: center; gap: 8px; }
.zt-uhr-stand { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.zt-uhr-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.zt-uhr-punkt-pause { background: var(--orange); }
.zt-uhr-hinweis { max-width: 360px; }
.zt-uhr-btn { gap: 6px; }
/* Stundenzettel */
.zt-blatt { overflow: hidden; }
.zt-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zt-tabelle th { text-align: left; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.zt-tabelle th.zt-r { text-align: right; }
.zt-th-tag { padding-left: 22px !important; }
.zt-th-diff, .zt-tabelle td:last-child { padding-right: 22px !important; }
.zt-tabelle td { padding: 13px 16px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.zt-td-tag { padding-left: 22px !important; white-space: nowrap; }
.zt-tag-name { font-weight: 600; }
.zt-zeile.zt-heute td { background: var(--brand-bg); }
.zt-zeile.zt-heute td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.zt-zeile.zt-heute .zt-tag-name { font-weight: 700; }
.zt-zeile.zt-frei td { color: var(--text-muted); padding-top: 9px; padding-bottom: 9px; cursor: pointer; }
.zt-zeile.zt-gedeckt .zt-td-badge { cursor: pointer; }
.zt-zeile.zt-gedeckt td { background: var(--green-bg); }
.zt-laeuft { color: var(--brand); font-weight: 600; }
.zt-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 12px; font-weight: 600; white-space: nowrap; }
.zt-badge-klein { padding: 1px 8px; font-size: 11px; background: var(--brand-bg); color: var(--brand); margin-left: 4px; }
.zt-warn { color: var(--orange); font-size: 12px; cursor: help; margin-left: 6px; }
.zt-geaendert { font-size: 11px; color: var(--text-secondary); margin-left: 6px; }
.zt-leer { font-size: 12px; color: var(--text-muted); font-style: italic; font-weight: 400; }
/* Zellen (Kommen/Gehen/Pause direkt in der Tabelle, Entscheidung Mike 14.09.2026) */
.zt-scroll { overflow-x: auto; }
.zt-td-zelle { white-space: nowrap; }
.zt-zelle { width: 74px; height: 32px; text-align: right; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; transition: border-color 0.15s, box-shadow 0.15s; }
.zt-zelle:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.zt-zelle::placeholder { color: var(--text-muted); opacity: 0.7; }
.zt-zelle:disabled { opacity: 0.6; cursor: not-allowed; }
.zt-zelle[readonly] { color: var(--text-secondary); background: transparent; border-color: transparent; }
.zt-b2 { display: none; }
.zt-zeile.zt-zwei .zt-b2 { display: inline-block; margin-top: 6px; }
.zt-zeile:focus-within td { background: var(--brand-bg); }
.zt-zeile:focus-within td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.zt-status { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
.zt-status.zt-warn { color: var(--orange); } .zt-status.zt-minus { color: var(--red); }
.zt-td-badge .zt-zellen-inline { display: none; }
.zt-zeile.zt-offen .zt-td-badge .zt-zellen-inline { display: inline-flex; gap: 6px; margin-left: 12px; }
.zt-zeile.zt-offen .zt-freitext { display: none; }
.zt-freitext { color: var(--text-muted); }
.zt-zeile.zt-gedeckt .zt-td-badge { text-align: left; }
.zt-zeile.zt-frei .zt-td-badge { text-align: right; }
/* Werkzeugzeile: nur sichtbar, solange die Zeile (oder sie selbst) den Fokus hat */
.zt-wz { display: none; }
.zt-zeile:focus-within + .zt-wz, .zt-wz:focus-within { display: table-row; }
.zt-wz td { padding: 0 22px 10px 22px; background: var(--brand-bg); border-bottom: 1px solid var(--border-light); }
.zt-zeile:focus-within td { border-bottom: none; }
.zt-wz-inhalt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.zt-wz-inhalt b { color: var(--text); }
/* Textfeld (Schnellsyntax) als Fallback */
.zt-edit td { padding: 0 22px 14px 22px; background: var(--brand-bg); }
.zt-edit .zt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.zt-chip { border: 1px solid var(--border); border-radius: 12px; padding: 1px 8px; font-size: 12px; }
.zt-chip-pause { color: var(--text-secondary); border-style: dashed; }
.zt-chip-offen { border-color: var(--brand); color: var(--brand); }
.zt-eingabe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.zt-feld { flex: 0 1 420px; min-width: 220px; padding: 7px 12px; font-size: 13px; font-family: var(--font-mono); }
.zt-feld-fehler { border-color: var(--red) !important; }
.zt-feld-hinweis { font-size: 12px; color: var(--red); margin-top: 6px; }
.zt-syntaxhilfe { font-size: 12px; color: var(--text-muted); }
.zt-hinweise { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
/* Fuss */
.zt-tabelle tfoot td { border-top: 1px solid var(--border); border-bottom: none; background: var(--bg-body); font-weight: 600; }
.zt-fuss-info { font-weight: 400; font-size: 12px; color: var(--text-secondary); }
.zt-fuss-info b { color: var(--text); }
.zt-fuss-info .zt-link { margin-left: 14px; }
.zt-fuss-ist { font-weight: 700; } .zt-fuss-diff { font-weight: 700; }
.zt-fussnote { font-size: 12px; color: var(--text-secondary); padding: 0 4px; }
/* Desktop zeigt Kommen/Gehen/Pause/Soll einzeln, Handy eine Zusammenfassung */
.zt-mob { display: none; }
@media (max-width: 700px) {
  .zt-desk, .zt-ist { display: none; }
  .zt-mob { display: inline; }
  .zt-mob-soll { color: var(--text-muted); font-weight: 400; }
  .zt-tabelle { font-size: 13px; min-width: 0; }
  .zt-tabelle th, .zt-tabelle td { padding: 9px 6px; }
  .zt-th-tag, .zt-td-tag { padding-left: 12px !important; }
  .zt-th-diff, .zt-tabelle td:last-child { padding-right: 10px !important; }
  .zt-td-tag { white-space: normal; }
  .zt-td-tag .zt-geaendert, .zt-td-tag .zt-badge-klein { display: none; }
  .zt-status { display: block; margin-left: 0; }
  .zt-zelle { width: 56px; height: 36px; padding: 0 4px; font-size: 13px; }
  .zt-td-tag { max-width: 84px; }
  .zt-tabelle th, .zt-tabelle td { padding: 9px 4px; }
  .zt-tabelle th { font-size: 10px; letter-spacing: 0.02em; }
  .zt-fuss-info .zt-link { display: block; white-space: normal; margin-left: 0; margin-top: 4px; }
  .zt-kopf { align-items: center; }
  .zt-titel { font-size: 15px; white-space: normal; }
  .zt-kopf { row-gap: 10px; }
  .zt-saldo { height: 36px; }
  .zt-uhr-btn { min-height: 40px; }
  .zt-wz td, .zt-edit td { padding: 0 12px 10px 12px; }
  .zt-feld { flex: 1 1 100%; min-height: 44px; font-size: 15px; }
  .zt-eingabe .btn { min-height: 44px; }
  .zt-syntaxhilfe { display: none; }
  .zt-fussnote { display: none; }
}

/* ── Dokument-Vollansicht auf dem Telefon (15.09.2026) ───────────────────────────────────
   Auf dem iPhone traf der PDF-Betrachter eine Kopfzeile mit Titel, zwei Zoom-Knoepfen, dem
   Knopf "Herunterladen" und dem Schliessen-Kreuz -- auf 390 Punkten Breite blieb vom Zoom
   nichts Bedienbares uebrig. Deshalb: echtes Vollbild, gestauchte Kopfzeile, Zoom-Knoepfe in
   Daumengroesse und "Herunterladen" auf ein Symbol verkuerzt. Pinch und Doppeltipp auf der
   Flaeche bedienen den Zoom ohnehin (dokument-vollansicht.js). */
@media (max-width: 768px) {
  #archivFullOverlay { padding: 0; align-items: stretch; }
  #archivFullOverlay .modal {
    /* !important, weil die Masse in index.html als style-Attribut am Element stehen
       (width:95vw, max-height:92vh) und ein Stylesheet sonst nicht dagegen ankommt. */
    width: 100vw !important; max-width: none !important; margin: 0;
    height: 100dvh; max-height: 100dvh !important; border-radius: 0;
  }
  #archivFullOverlay .modal-header { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  #archivFullTitle { font-size: 12px; min-width: 0; }
  #archivFullOverlay .modal-header .btn { min-width: 40px; padding: 8px 10px; flex: none; }
  #archivFullZoomInfo { font-size: 11px; min-width: 34px; }
  /* Der Text wuerde die Zoom-Knoepfe aus der Zeile draengen; das Symbol genuegt.
     Auf iOS fuehrt der Knopf in Apples PDF-Betrachter (data-ios="1"), sonst in den Download. */
  #archivFullDownload { font-size: 0; }
  #archivFullDownload::before { content: '\2193'; font-size: 16px; }
  #archivFullDownload[data-ios="1"]::before { content: '\2197'; }
}

/* ── Verwalterwechsel ─────────────────────────────────────────────────────────
   Anschreiben an Versorger/Dienstleister/Behoerden nach einer Objektuebernahme.
   Neugestaltung 21.09.2026: Uebersicht und Vorgang sind zwei Ansichten, Formulare
   sind gruppierte Zeilenlisten (Etikett links, Bedienelement rechts, Haarlinie
   dazwischen) statt eines Feldergedraenges, und die Empfaenger stehen als ruhige
   Zeilen statt in einer dichten Tabelle. Alles auf #pageVerwalterwechsel begrenzt,
   Praefix .vw-, Farben nur aus den App-Tokens. */
#pageVerwalterwechsel { padding: 26px clamp(16px, 2.5vw, 32px) 72px; }
/* Keine Breitenbremse: die Seite nutzt den Platz, den der Bildschirm hergibt. Lesbar
   bleibt sie ueber die feste linke Spalte und die Zeilenbreiten darin, nicht ueber einen
   Deckel auf der ganzen Seite. */
#pageVerwalterwechsel .vw-wrap { width: 100%; }
#pageVerwalterwechsel .vw-view[hidden] { display: none; }

/* Kopf einer Ansicht */
#pageVerwalterwechsel .vw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
#pageVerwalterwechsel .vw-title { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -0.021em; line-height: 1.2; }
#pageVerwalterwechsel .vw-sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); max-width: 62ch; }
#pageVerwalterwechsel .vw-vorgangkopf { margin: 4px 0 24px; }

#pageVerwalterwechsel .vw-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; padding: 4px 8px 4px 2px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--brand);
}
#pageVerwalterwechsel .vw-back::before { content: '\2039'; font-size: 19px; line-height: 1; margin-top: -2px; }
#pageVerwalterwechsel .vw-back:hover { background: var(--brand-bg); }

/* Knoepfe: ruhig, ein Akzent fuer die jeweils naechste Handlung */
#pageVerwalterwechsel .vw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
}
#pageVerwalterwechsel .vw-btn:hover { background: var(--bg-card-hover); }
#pageVerwalterwechsel .vw-btn:disabled { opacity: 0.4; cursor: default; }
#pageVerwalterwechsel .vw-btn-prim { background: var(--brand); border-color: var(--brand); color: #fff; }
#pageVerwalterwechsel .vw-btn-prim:hover { background: var(--brand-dark); }
#pageVerwalterwechsel .vw-btn-still { border-color: transparent; background: none; color: var(--text-secondary); padding: 6px 9px; }
#pageVerwalterwechsel .vw-btn-still:hover { background: var(--ctrl-bg); color: var(--text); }
#pageVerwalterwechsel .vw-btn-weg { color: var(--red); }
#pageVerwalterwechsel .vw-btn:focus-visible, #pageVerwalterwechsel .vw-back:focus-visible,
#pageVerwalterwechsel .vw-drop:focus-within, #pageVerwalterwechsel .vw-feld:focus {
  outline: 2px solid var(--brand-ring); outline-offset: 1px;
}
#pageVerwalterwechsel .vw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Gruppierte Zeilenliste */
#pageVerwalterwechsel .vw-block { margin-bottom: 26px; }
#pageVerwalterwechsel .vw-group-title { margin: 0 0 8px 3px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* container-type: die Zeilen richten sich nach der Breite IHRER Gruppe, nicht nach der des
   Fensters — in der schmalen linken Spalte des Zweispalters gilt sonst das Breitbild-Layout
   und die Werte werden abgeschnitten. */
#pageVerwalterwechsel .vw-group {
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; container-type: inline-size;
}
#pageVerwalterwechsel .vw-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; min-height: 46px; }
#pageVerwalterwechsel .vw-row + .vw-row { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-row-label { flex: 0 0 172px; font-size: 13.5px; color: var(--text-secondary); }
#pageVerwalterwechsel .vw-row-ctrl { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; text-align: right; }

/* Felder ohne Rahmen, bis man sie anfasst */
#pageVerwalterwechsel .vw-feld {
  font: inherit; font-size: 13.5px; color: var(--text); padding: 6px 9px; max-width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  transition: background var(--transition), border-color var(--transition);
}
#pageVerwalterwechsel select.vw-feld { text-align: right; }
#pageVerwalterwechsel .vw-feld:hover { background: var(--ctrl-bg); }
#pageVerwalterwechsel .vw-feld:focus { background: var(--bg-card); border-color: var(--border); outline-offset: 0; }
#pageVerwalterwechsel .vw-feld-breit { min-width: 0; width: 100%; max-width: 320px; }
#pageVerwalterwechsel .vw-fehlt { border-color: var(--clr-warn-border); background: var(--clr-warn-bg); }
/* Abgleich mit HausPerfekt: Beleg und Stammdaten nebeneinander, Übernahme je Zeile. */
#pageVerwalterwechsel .vw-hp { margin: 12px 0 2px; padding: 12px 14px; background: var(--gray-50); border-radius: var(--radius-sm); }
#pageVerwalterwechsel .vw-hp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#pageVerwalterwechsel .vw-hp-kopf .vw-group-title { margin: 0; }
#pageVerwalterwechsel .vw-hp-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#pageVerwalterwechsel .vw-hp-aktiv { background: var(--brand-bg); border-color: var(--brand-ring); color: var(--brand-dark); }
#pageVerwalterwechsel .vw-hp-tab { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; }
#pageVerwalterwechsel .vw-hp-zeile {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 128px;
  align-items: center; gap: 10px; padding: 7px 12px; font-size: 12.5px;
}
#pageVerwalterwechsel .vw-hp-zeile + .vw-hp-zeile { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-hp-titel { font-size: 11.5px; color: var(--text-muted); }
#pageVerwalterwechsel .vw-hp-label { color: var(--text-secondary); }
#pageVerwalterwechsel .vw-hp-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageVerwalterwechsel .vw-hp-wert i { color: var(--text-muted); font-style: normal; }
#pageVerwalterwechsel .vw-hp-anders .vw-hp-label { color: var(--clr-warn-text); }
#pageVerwalterwechsel .vw-hp-gleich { font-size: 11.5px; color: var(--text-muted); }
#pageVerwalterwechsel .vw-hp-leer { padding: 10px 2px; font-size: 13px; color: var(--text-muted); }
#pageVerwalterwechsel .vw-hinweis-aktion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@container (max-width: 640px) {
  #pageVerwalterwechsel .vw-hp-zeile { grid-template-columns: 84px minmax(0, 1fr); }
  #pageVerwalterwechsel .vw-hp-titel { display: none; }
  #pageVerwalterwechsel .vw-hp-zeile > .vw-hp-wert:nth-of-type(2)::before { content: 'HP: '; color: var(--text-muted); }
  #pageVerwalterwechsel .vw-hp-zeile > .vw-btn, #pageVerwalterwechsel .vw-hp-zeile > .vw-hp-gleich { grid-column: 2; justify-self: start; }
}

/* Objektsuche: eigene Vorschlagsliste statt <datalist> (auf dem iPhone unbrauchbar). */
#pageVerwalterwechsel .vw-suche { position: relative; display: flex; justify-content: flex-end; min-width: 0; }
#pageVerwalterwechsel .vw-suche > input:not([type="hidden"]) { text-align: right; }
#pageVerwalterwechsel .vw-suche-liste {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(420px, 78vw);
  background: var(--bg-modal-solid); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
}
#pageVerwalterwechsel .vw-suche-liste[hidden] { display: none; }
#pageVerwalterwechsel .vw-suche-treffer {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  width: 100%; padding: 9px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--text); text-align: left;
}
#pageVerwalterwechsel .vw-suche-treffer + .vw-suche-treffer { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-suche-treffer:hover, #pageVerwalterwechsel .vw-suche-aktiv { background: var(--brand-bg); }
#pageVerwalterwechsel .vw-suche-nr { color: var(--text-muted); font-variant-numeric: tabular-nums; }
#pageVerwalterwechsel .vw-suche-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageVerwalterwechsel .vw-suche-ort { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
#pageVerwalterwechsel .vw-suche-leer { padding: 12px 14px; font-size: 13px; color: var(--text-muted); }

/* Zwei Spalten, sobald Platz ist: Stammdaten links (bleibt stehen), Empfänger rechts. */
#pageVerwalterwechsel .vw-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 1100px) {
  #pageVerwalterwechsel .vw-spalten { grid-template-columns: 420px minmax(0, 1fr); align-items: start; }
  #pageVerwalterwechsel .vw-spalte-links { position: sticky; top: 16px; }
  #pageVerwalterwechsel .vw-spalte-rechts .vw-block { margin-bottom: 0; }
}

#pageVerwalterwechsel .vw-hinweis-zeile { padding: 2px 16px 12px; font-size: 12.5px; color: var(--clr-warn-text); }

/* Schalter */
#pageVerwalterwechsel .vw-schalter { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
#pageVerwalterwechsel .vw-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#pageVerwalterwechsel .vw-schalter span {
  position: absolute; inset: 0; border-radius: 13px; background: var(--ctrl-border);
  transition: background var(--transition); pointer-events: none;
}
#pageVerwalterwechsel .vw-schalter span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition);
}
#pageVerwalterwechsel .vw-schalter input:checked + span { background: var(--green); }
#pageVerwalterwechsel .vw-schalter input:checked + span::after { transform: translateX(18px); }
#pageVerwalterwechsel .vw-schalter input:focus-visible + span { outline: 2px solid var(--brand-ring); outline-offset: 2px; }

/* Ablagefeld fuer Belege */
#pageVerwalterwechsel .vw-drop {
  display: block; padding: 22px 16px; text-align: center; cursor: pointer;
  background: var(--bg-card); border: 1.5px dashed var(--ctrl-border); border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}
#pageVerwalterwechsel .vw-drop:hover, #pageVerwalterwechsel .vw-drop.vw-drop-an { background: var(--brand-bg); border-color: var(--brand); }
#pageVerwalterwechsel .vw-drop-laeuft { cursor: progress; border-style: solid; border-color: var(--brand); background: var(--brand-bg); }

/* Der Lauf beim Einlesen: Kugel mit zwei Ringen, daneben der Schritt und die Zeit. Kein
   Prozentbalken — die Dauer haengt am Beleg und waere geraten. */
#pageVerwalterwechsel .vw-lauf { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
#pageVerwalterwechsel .vw-lauf-text { max-width: 44ch; }
#pageVerwalterwechsel .vw-lauf-kugel {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brand-light), var(--brand) 42%, var(--brand-dark) 78%);
  box-shadow: 0 0 0 5px var(--brand-bg), 0 0 22px var(--brand-ring);
  animation: vw-puls 1.9s ease-in-out infinite;
}
#pageVerwalterwechsel .vw-lauf-kugel span {
  position: absolute; inset: -7px; border: 1px solid var(--brand-ring); border-radius: inherit;
  animation: vw-kreist 2.6s linear infinite;
}
#pageVerwalterwechsel .vw-lauf-kugel span:nth-child(2) { inset: -13px; opacity: 0.5; animation-duration: 3.8s; animation-direction: reverse; }
#pageVerwalterwechsel .vw-lauf-kugel span:nth-child(3) { inset: -19px; opacity: 0.22; animation-duration: 5s; }
#pageVerwalterwechsel .vw-lauf-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#pageVerwalterwechsel .vw-lauf-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
#pageVerwalterwechsel .vw-lauf-text span { font-size: 12.5px; color: var(--text-secondary); }
#pageVerwalterwechsel .vw-lauf-fuss { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@keyframes vw-puls { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.07); } }
@keyframes vw-kreist { from { transform: rotate(0deg) scaleX(1.25); } to { transform: rotate(360deg) scaleX(1.25); } }
/* „Animationen reduzieren": die Bewegung bleibt, sie wird nur langsamer. Eine Ladeanzeige ist
   ESSENZIELLE Bewegung — sie trägt die Aussage „hier arbeitet etwas" und darf laut WCAG 2.3.3
   (Animation from Interactions gilt nur für nicht-essenzielle Bewegung) unter `reduce` bestehen
   bleiben; die Empfehlung lautet, den Indikator NIE zu verstecken. Hintergrund: jede
   Windows-Sitzung über RDP meldet „reduzieren" von sich aus (Memory
   reference_rdp_reduced_motion), und dieses Haus arbeitet über RDP. Mit `animation: none` sah der
   Lauf eingefroren aus, mit reinem Auf- und Abblenden blinkte er nur (zwei Befunde Mike
   2026-09-22). Quellen: qaskills.sh/blog/accessibility-testing-reduced-motion,
   blog.pope.tech/2025/12/08/design-accessible-animation-and-movement/ */
#pageVerwalterwechsel .vw-drop-titel { display: block; font-size: 13.5px; font-weight: 500; color: var(--text); }
#pageVerwalterwechsel .vw-drop-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
#pageVerwalterwechsel .vw-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Vollmacht-Hinweis */
#pageVerwalterwechsel .vw-stand { display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 13.5px; }
#pageVerwalterwechsel .vw-stand-text { flex: 1 1 auto; min-width: 0; }
#pageVerwalterwechsel .vw-stand-zeichen { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
#pageVerwalterwechsel .vw-stand-ok .vw-stand-zeichen { background: var(--clr-ok-bg); color: var(--clr-ok-text); }
#pageVerwalterwechsel .vw-stand-warn .vw-stand-zeichen { background: var(--clr-warn-bg); color: var(--clr-warn-text); }
#pageVerwalterwechsel .vw-stand-warn .vw-stand-text { color: var(--clr-warn-text); }
#pageVerwalterwechsel .vw-wahl { padding: 6px 16px 14px; font-size: 13.5px; }
#pageVerwalterwechsel .vw-wahl label { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* Empfaengerzeilen */
#pageVerwalterwechsel .vw-empf { padding: 12px 16px; }
#pageVerwalterwechsel .vw-empf + .vw-empf { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-empf-kopf { display: flex; align-items: center; gap: 12px; }
#pageVerwalterwechsel .vw-empf-name { flex: 1 1 160px; min-width: 0; font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
/* Raster statt Fluss, damit Art, Bezugsart, Nummer und Adresse ueber alle Empfaenger
   in denselben Spalten stehen. */
#pageVerwalterwechsel .vw-empf-meta {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 4px 6px; margin: 6px 0 0 -9px; max-width: 1040px;
}
#pageVerwalterwechsel .vw-empf-meta .vw-feld {
  width: 100%; min-width: 0; font-size: 12.5px; color: var(--text-secondary); text-align: left;
}
#pageVerwalterwechsel .vw-empf-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 -9px; }
#pageVerwalterwechsel .vw-detail .vw-empf-tools { margin: 12px 0 0 -9px; }

#pageVerwalterwechsel .vw-pille {
  flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--badge-draft-bg); color: var(--badge-draft-text);
}
#pageVerwalterwechsel .vw-pille-laeuft { background: var(--clr-info-bg); color: var(--clr-info-text); }
#pageVerwalterwechsel .vw-pille-ok { background: var(--clr-ok-bg); color: var(--clr-ok-text); }
#pageVerwalterwechsel .vw-pille-fehler { background: var(--clr-err-bg); color: var(--clr-err-text); }
#pageVerwalterwechsel .vw-nebenstand { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
#pageVerwalterwechsel .vw-nebenstand-ok { color: var(--clr-ok-text); }

#pageVerwalterwechsel .vw-detail { margin: 12px 0 2px; padding: 12px 14px; background: var(--gray-50); border-radius: var(--radius-sm); }
#pageVerwalterwechsel .vw-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
#pageVerwalterwechsel .vw-detail-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-secondary); }
#pageVerwalterwechsel .vw-detail-grid .vw-feld { background: var(--bg-card); border-color: var(--border-light); font-size: 12.5px; }
#pageVerwalterwechsel .vw-detail-grid select.vw-feld { text-align: left; }

/* Uebersicht */
#pageVerwalterwechsel .vw-zeile { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
#pageVerwalterwechsel .vw-zeile + .vw-zeile { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-zeile-haupt { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
#pageVerwalterwechsel .vw-zeile-name { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
#pageVerwalterwechsel .vw-zeile-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
#pageVerwalterwechsel .vw-zeile-haupt:hover .vw-zeile-name { color: var(--brand); }
#pageVerwalterwechsel .vw-fortschritt { flex: 0 0 132px; }
#pageVerwalterwechsel .vw-fortschritt-text { font-size: 12.5px; color: var(--text-secondary); text-align: right; }
#pageVerwalterwechsel .vw-fortschritt-bahn { margin-top: 6px; height: 3px; border-radius: 2px; background: var(--ctrl-border); overflow: hidden; }
#pageVerwalterwechsel .vw-fortschritt-bahn i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
#pageVerwalterwechsel .vw-fortschritt-fertig .vw-fortschritt-bahn i { background: var(--green); }

/* Mailentwurf-Fenster */
#pageVerwalterwechsel .vw-modal {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 42, 0.45); backdrop-filter: var(--glass-blur);
}
#pageVerwalterwechsel .vw-modal[hidden] { display: none; }
#pageVerwalterwechsel .vw-modal-karte {
  width: min(860px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-modal-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
#pageVerwalterwechsel .vw-modal-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-light);
}
#pageVerwalterwechsel .vw-modal-titel { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
#pageVerwalterwechsel .vw-modal-koerper { padding: 18px 20px 22px; overflow: auto; }
#pageVerwalterwechsel .vw-mail-an { font-size: 13.5px; }
#pageVerwalterwechsel .vw-mail-fuss { margin: 14px 0 0; font-size: 12.5px; }
#pageVerwalterwechsel .vw-modal .vw-feld { text-align: left; }
#pageVerwalterwechsel .vw-modal .vw-feld-breit { max-width: 100%; }
#pageVerwalterwechsel .vw-mail-label { margin: 18px 0 8px 3px; }
#pageVerwalterwechsel .vw-mail-text {
  min-height: 220px; max-height: 42vh; overflow: auto; padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.55;
}
#pageVerwalterwechsel .vw-mail-text:focus { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

/* Brieftext von Hand aendern: dieselbe Flaeche wie der Mailtext, nur als echtes Textfeld —
   der Brief kennt keine Formatierung, nur Absaetze. */
#pageVerwalterwechsel .vw-brieftext {
  width: 100%; max-width: 100%; min-height: 320px; max-height: 52vh; resize: vertical;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.55; font-family: inherit;
}
#pageVerwalterwechsel .vw-haken {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted);
  white-space: nowrap; margin-right: 4px;
}
#pageVerwalterwechsel .vw-haken input { margin: 0; }
#pageVerwalterwechsel .vw-brieftext-hinweis { color: var(--warn, #b26a00); }

#pageVerwalterwechsel .vw-leer { padding: 34px 16px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

/* Wegbeschreibung, solange noch keine Übernahme angelegt ist. */
#pageVerwalterwechsel .vw-schritt { display: flex; gap: 14px; padding: 14px 16px; }
#pageVerwalterwechsel .vw-schritt + .vw-schritt { border-top: 1px solid var(--border-light); }
#pageVerwalterwechsel .vw-schritt-nr {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-bg); color: var(--brand-dark); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#pageVerwalterwechsel .vw-schritt-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 62ch; }
#pageVerwalterwechsel .vw-schritt-text b { display: block; font-weight: 550; color: var(--text); }

/* Schmale Gruppe (linke Spalte, Telefon): Etikett ueber das Bedienelement. */
@container (max-width: 560px) {
  #pageVerwalterwechsel .vw-row { flex-direction: column; align-items: stretch; gap: 4px; }
  #pageVerwalterwechsel .vw-row-label { flex: none; }
  #pageVerwalterwechsel .vw-row-ctrl { justify-content: flex-start; text-align: left; }
  #pageVerwalterwechsel .vw-feld { max-width: 100%; }
  #pageVerwalterwechsel select.vw-feld { text-align: left; }
  #pageVerwalterwechsel .vw-suche { justify-content: flex-start; }
  #pageVerwalterwechsel .vw-suche > input:not([type="hidden"]) { text-align: left; }
  #pageVerwalterwechsel .vw-suche-liste { right: auto; left: 0; width: min(420px, 90cqw); }
}
@container (max-width: 700px) {
  #pageVerwalterwechsel .vw-empf-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (max-width: 380px) {
  #pageVerwalterwechsel .vw-empf-meta { grid-template-columns: minmax(0, 1fr); }
}
/* Schmale Gruppe: Name des Empfaengers auf eine eigene Zeile, sonst quetschen ihn Pille,
   Ablagehinweis und Aufklapper auf wenige Zeichen zusammen. */
@container (max-width: 520px) {
  #pageVerwalterwechsel .vw-empf-kopf { flex-wrap: wrap; gap: 6px 10px; }
  #pageVerwalterwechsel .vw-empf-name { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  #pageVerwalterwechsel .vw-row { flex-direction: column; align-items: stretch; gap: 4px; }
  #pageVerwalterwechsel .vw-row-label { flex: none; }
  #pageVerwalterwechsel .vw-row-ctrl { justify-content: flex-start; text-align: left; }
  #pageVerwalterwechsel select.vw-feld { text-align: left; }
  #pageVerwalterwechsel .vw-head { flex-direction: column; align-items: stretch; }
  #pageVerwalterwechsel .vw-fortschritt { flex-basis: 96px; }
  #pageVerwalterwechsel .vw-empf-meta { grid-template-columns: 1fr; }
}

/* ══ Navigation responsiv (Design-Handoff "Navigationsleiste", 22.09.2026) ══
   Steht am Dateiende, damit diese Regeln die frueheren Breakpoint-Bloecke
   (Tablet 1024, Telefon 767) sicher ueberschreiben. */

/* iPad quer 1024–1366: wie hochkant, Rail fest, Seitenliste als Overlay mit Scrim, die nach der
   Wahl zuklappt (Mike 24.09.2026; vorher stand die Liste hier fest im Flow und blieb offen).
   pointer:coarse trennt das Tablet vom schmalen Desktop-Fenster, denn die Breitenbereiche von
   "Desktop ab 1200" und "iPad quer bis 1366" ueberlappen. Gegenstueck in core.js: navIstFlow(),
   navPinMoeglich(). */
@media (min-width:768px) and (max-width:1366px) and (orientation:landscape) and (pointer:coarse) {
  :root { --rail-w:92px; --panel-w:288px; --sidebar-w:92px; }
  #navPinBtn { display:none; }
  body.nav-pinned .main { margin-left:var(--sidebar-w); }
  .rail-btn svg, .nav-rail .nav-item svg { width:20px; height:20px; }
  .rail-ico { width:44px; height:34px; }
  .rail-label { font-size:10px; }
  .nav-item { min-height:46px; font-size:14.5px; padding:9px 12px; }
  .sidebar.nav-arrange .nav-item { padding-left:0; }
}

/* iPad hoch 768–834: Rail fest, Seitenliste als Overlay mit Scrim, kein Anheften */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) and (pointer:coarse) {
  :root { --rail-w:92px; --panel-w:288px; --sidebar-w:92px; }
  #navPinBtn { display:none; }
  body.nav-pinned .main { margin-left:var(--sidebar-w); }
  .main-header { height:62px; }
  .rail-btn svg, .nav-rail .nav-item svg { width:20px; height:20px; }
  .rail-ico { width:44px; height:34px; }
  .rail-label { font-size:10px; }
  .nav-item { min-height:46px; font-size:14.5px; padding:9px 12px; }
  .sidebar.nav-arrange .nav-item { padding-left:0; }
}

/* Telefon < 768: alles in einer 326px-Schublade (Rail 92 + Liste), Scrim ueber dem Screen */
@media (max-width:767px) {
  :root { --rail-w:92px; --sidebar-w:326px; }
  .sidebar {
    width:var(--sidebar-w); z-index:200; box-shadow:none;
    transform:translateX(-102%); transition:transform 0.26s cubic-bezier(0.2,0,0,1);
  }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:var(--nav-drawer-shadow); }
  .nav-scrim { display:none; }
  .nav-rail { padding-top:max(14px, env(safe-area-inset-top)); }
  .nav-panel {
    position:relative; left:auto; top:auto; bottom:auto; flex:1; min-width:0; width:auto;
    transform:none !important; opacity:1 !important; pointer-events:auto !important;
    box-shadow:none; padding-top:max(0px, env(safe-area-inset-top));
  }
  #navPinBtn { display:none; }
  body.nav-pinned .main { margin-left:0; }
  .sidebar-backdrop { background:rgba(15,23,42,0.32); z-index:199; }
  html.dark .sidebar-backdrop { background:rgba(3,6,12,0.55); }
  .nav-item { min-height:48px; font-size:14.5px; padding:9px 12px; border-radius:13px; }
  .sidebar.nav-arrange .nav-item { padding-left:0; }
  .page-area { font-size:11.5px; }
  .main-header h2 { font-size:15.5px; font-weight:700; }
}

/* Kopfzeile: Seitentitel und darunter der Bereich — keine Brotkrume */
.page-head { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.page-head h2 { line-height:1.25; }
.page-area { font-size:12px; color:var(--text-3); line-height:1.2; }
.page-area:empty { display:none; }
.main-header .status-dots { margin-left:4px; }

/* Bewusst KEINE reduce-Ausnahme fuer die Navigation: jede RDP-Sitzung meldet
   prefers-reduced-motion:reduce, dort stand das Aufklappen sonst still (23.09.2026).
   Die Bewegungen sind kurz (unter 0,4 s) und oertlich. */


/* ══ Kopfzeile responsiv (Redesign "Mein Tag", 24.09.2026) ══
   Die Breakpoints des Entwurfs gelten fuer die Breite des App-Bereichs (ohne Rail 84px):
   Desktop >= 1100 -> Fenster >= 1184, Wide >= 1600 -> Fenster >= 1684. Das Telefon folgt der
   bestehenden Navigationsgrenze < 768 (navIstFlow() in core.js), nicht den 700 des Entwurfs. */
@media (min-width:1184px) {
  .main-header { padding:0 40px; }
  .hdr-search {
    width:260px; justify-content:flex-start; gap:8px; padding:0 8px 0 11px; margin-right:4px;
    border:1px solid var(--border); background:var(--surface-2); color:var(--text-3); font-size:13.5px; font-family:inherit;
  }
  .hdr-search:hover { background:var(--surface-2); border-color:var(--border-strong); color:var(--text-2); }
  .hdr-search svg { width:15px; height:15px; }
  .hdr-search-text { display:block; flex:1; text-align:left; }
  .hdr-kbd { display:inline-block; }
  .hdr-profile { padding:0 12px 0 4px; }
  #headerUserName { display:block; }
}
@media (min-width:1684px) {
  .main-header { padding:0 48px; }
}
@media (max-width:767px) {
  .main-header { padding:0 16px; gap:8px; }
  .main-header .status-dots, #darkModeBtn, #viewAsChip { display:none !important; }
  .header-actions { gap:0; }
  .hdr-btn { width:40px; height:40px; }
  .hdr-profile { height:40px; border:none; background:transparent; padding:0 4px; margin-left:0; }
  .hamburger-btn svg { width:22px; height:22px; }
  /* Mein Tag: kein Kopfzeilentitel, die Begruessung uebernimmt */
  body[data-seite="meintag"]:not(#_) .page-head { display:none; }
  /* Scrollbalken aus */
  .main-content { scrollbar-width:none; }
  .main-content::-webkit-scrollbar { width:0; height:0; }
  /* backdrop-filter macht die Kopfzeile zum Bezugsrahmen fuer position:fixed; solange das Sheet
     offen ist, faellt der Blur weg, sonst klebt das Sheet unter der Kopfzeile statt am Bildschirmrand */
  .main-header:has(.profile-menu.show) { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface-solid); }
  /* Profilmenue als Bottom-Sheet; der riesige Schatten ist der Scrim */
  .profile-menu {
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:78vh; overflow-y:auto;
    border-radius:18px 18px 0 0; border:none; padding:0 12px max(12px, env(safe-area-inset-bottom));
    box-shadow:0 0 0 100vmax var(--scrim), var(--pop-shadow); z-index:210;
    animation:sheetIn 0.22s cubic-bezier(0.2,0,0,1);
  }
  .sheet-grip { display:block; width:38px; height:5px; border-radius:3px; background:var(--border-strong); margin:8px auto 4px; }
  .sheet-head { display:flex; align-items:center; justify-content:space-between; padding:8px 8px 6px; font-size:17px; font-weight:600; letter-spacing:-0.015em; }
  .sheet-done { height:36px; padding:0 4px; border:none; background:transparent; color:var(--brand-text); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; }
  .profile-menu-item { height:50px; font-size:16px; }
  .profile-menu-theme { display:flex; }
  .profile-menu-select .form-input { height:44px; font-size:16px; }
}

/* ══ Reiter als Segmented Control (Redesign Schritt 5, 24.09.2026) ══
   Ein Aussehen fuer alle gewachsenen Reiter-Familien: dezente Mulde, aktives Segment hell
   hinterlegt statt Primary-Flaeche oder Unterstrich. Das "html"-Praefix hebt die Spezifitaet
   ueber die Stile, die mehraufwand.js, voicedesk.js und verwalterzustimmung.js zur Laufzeit
   einspielen (die stehen im DOM NACH app.css). Bewusst ausgenommen: .tk-tabs (Dokument-Reiter
   der Vorgaenge) und .ar-tabs (senkrechte Liste der Ausgangsrechnungen). */
html .beg-tabs, html .pro-tabs, html .etvpb-tabs, html .ma-tab-bar, html .vd-tabs, html .sett-sub-nav {
  display:inline-flex; gap:2px; padding:3px; border-radius:10px; border:none; box-shadow:none;
  background:var(--surface-2); backdrop-filter:none; -webkit-backdrop-filter:none;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
html .sett-sub-nav { border-bottom:none; }
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 {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:0 14px; margin:0;
  border:none; border-radius:8px; background:transparent; box-shadow:none;
  color:var(--text-2); font-family:inherit; font-size:13.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background 0.15s, color 0.15s, box-shadow 0.15s;
}
html .beg-tab:hover, html .pro-tab:hover, html .etvpb-tab:hover, html .ma-tab:hover, html .vd-tab:hover,
html .sett-sub-tab:hover, html .bpc-tab:hover, html .clr-tab:hover, html .vz-tabs button:hover { color:var(--text); background:var(--hover); }
html .beg-tab.active, html .pro-tab.active, html .etvpb-tab.active, html .ma-tab.ma-tab-active, html .vd-tab.active,
html .sett-sub-tab.active, html .bpc-tab.active, html .clr-tab.active, html .vz-tabs button.aktiv {
  background:var(--surface-solid); color:var(--text); font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,0.08), 0 0 0 1px var(--border);
}
html.dark .beg-tab.active, html.dark .pro-tab.active, html.dark .etvpb-tab.active, html.dark .ma-tab.ma-tab-active,
html.dark .vd-tab.active, html.dark .sett-sub-tab.active, html.dark .bpc-tab.active, html.dark .clr-tab.active,
html.dark .vz-tabs button.aktiv { background:rgba(255,255,255,0.1); box-shadow:0 1px 2px rgba(0,0,0,0.3); }
html .beg-tab .cnt, html .pro-tab .cnt { background:var(--surface-2); color:var(--text-3); }
html .beg-tab.active .cnt, html .pro-tab.active .cnt { background:var(--brand-tint); color:var(--brand-text); }
/* Reiterleisten ohne eigene Mulde (Kopf der Belegpruefung, Clearing): Abstand statt Unterstrich-Kante */
html .bpc-tabs { padding:10px 20px; gap:4px; }
html :has(> .clr-tab) { gap:4px !important; padding:8px 16px !important; border-bottom:1px solid var(--border) !important; }
html .vz-tabs { gap:4px; }
@media (max-width:767px) {
  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 { min-height:40px; padding:0 12px; font-size:14px; }
}

/* ── PDF signieren: Dialog-Stile (aus protokoll.js psEnsureFieldStyles, 27.09.2026) ──
   Bewusst am Dateiende: vorher als Laufzeit-<style> HINTER app.css eingespielt; bei gleicher
   Spezifitaet (.ps-signer-btn neben .btn/.btn-sm) muss es dabei bleiben. */
  .ps-stepper { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:28px; }
  .ps-stepper-step { display:flex; align-items:center; gap:8px; }
  .ps-stepper-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; transition:all 0.2s; }
  .ps-stepper-circle.active { background:var(--primary); color:#fff; }
  .ps-stepper-circle.inactive { background:var(--surface-2); color:var(--text-muted); }
  .ps-stepper-circle.done { background:var(--green-tint); color:var(--green-text); }
  .ps-stepper-label { font-size:13px; font-weight:600; transition:color 0.2s; }
  .ps-stepper-label.active { color:var(--brand-text); }
  .ps-stepper-label.inactive { color:var(--text-muted); }
  .ps-stepper-label.done { color:var(--green-text); }
  .ps-stepper-line { width:48px; height:2px; margin:0 12px; background:var(--border-strong); }
  .ps-stepper-line.done { background:var(--primary); }
  .ps-label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
  .ps-label .ps-req { color:var(--red-text); }
  .ps-input { background:var(--bg-input); border:1.5px solid var(--border-strong); border-radius:8px; padding:10px 14px; font-size:14px; color:var(--text); width:100%; box-sizing:border-box; transition:border-color 0.15s, box-shadow 0.15s; font-family:inherit; }
  .ps-input:focus { border-color:var(--brand-text); box-shadow:var(--ring); outline:none; }
  .ps-input::placeholder { color:var(--text-muted); }
  .ps-input:disabled, .ps-input.ps-disabled { background:var(--surface-2); border-color:var(--border); color:var(--text-muted); cursor:not-allowed; }
  .ps-input-icon-wrap { position:relative; }
  .ps-input-icon-wrap .ps-icon-left { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); }
  .ps-input-icon-wrap .ps-icon-right { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-secondary); }
  .ps-input-icon-wrap input.ps-has-icon-left { padding-left:36px; }
  .ps-input-icon-wrap input.ps-has-icon-right { padding-right:36px; }
  .ps-obj-dropdown { background:var(--surface-solid); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; box-shadow:var(--pop-shadow); max-height:260px; overflow-y:auto; z-index:9999; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
  .ps-obj-dropdown::-webkit-scrollbar { width:6px; }
  .ps-obj-dropdown::-webkit-scrollbar-track { background:transparent; }
  .ps-obj-dropdown::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:999px; }
  .ps-obj-item { padding:10px 16px; border-bottom:1px solid var(--border); cursor:pointer; border-left:3px solid transparent; color:var(--text); transition:background 0.1s, border-color 0.1s; }
  .ps-obj-item:last-child { border-bottom:none; }
  .ps-obj-item:hover { background:var(--hover); }
  .ps-obj-item.is-active { background:var(--brand-tint); border-left-color:var(--brand); }
  .ps-obj-id { font-weight:700; color:var(--text); }
  .ps-obj-name { font-weight:400; color:var(--text-secondary); }
  .ps-obj-addr { font-size:13px; color:var(--text-muted); margin-top:1px; }
  .ps-obj-input-open { border-radius:10px 10px 0 0 !important; border-bottom-color:var(--border) !important; }
  .ps-spinner { display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--border-strong); border-radius:8px; overflow:hidden; background:var(--bg-input); }
  .ps-spinner-btn { width:36px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:none; cursor:pointer; color:var(--text); font-size:18px; transition:all 0.15s; font-family:inherit; }
  .ps-spinner-btn:hover { background:var(--brand-tint); color:var(--brand-text); }
  .ps-spinner input { width:48px; text-align:center; border:none; border-left:1.5px solid var(--border-strong); border-right:1.5px solid var(--border-strong); font-size:14px; font-weight:600; color:var(--text); background:transparent; padding:0; height:38px; font-family:inherit; outline:none; -moz-appearance:textfield; }
  .ps-spinner input::-webkit-outer-spin-button, .ps-spinner input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .ps-helper { font-size:12px; color:var(--text-muted); margin-top:6px; }
  .ps-signer-box { background:var(--surface-2); border-radius:10px; padding:16px; }
  .ps-signer-btn { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border-strong); background:var(--bg-card); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:all 0.15s; font-family:inherit; }
  .ps-signer-btn:hover { border-color:var(--brand); color:var(--brand-text); background:var(--brand-tint); }
  .ps-signer-empty { font-size:13px; color:var(--text-muted); font-style:italic; margin-top:12px; }
  .ps-dropzone { border:2px dashed var(--border-strong); border-radius:12px; background:var(--surface-2); padding:28px 20px; text-align:center; cursor:pointer; transition:all 0.15s; }
  .ps-dropzone:hover { border-color:var(--brand); background:var(--brand-tint); }
  .ps-dropzone.ps-dragover { border-color:var(--brand); border-style:solid; background:var(--brand-tint); }
  .ps-dropzone-icon { color:var(--text-muted); margin-bottom:8px; }
  .ps-dropzone-title { font-size:14px; font-weight:600; color:var(--text); }
  .ps-dropzone-sub { font-size:13px; color:var(--text-secondary); margin-top:2px; }
  .ps-dropzone-limit { font-size:12px; color:var(--text-muted); margin-top:6px; }
  .ps-footer { padding:20px 0 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; margin-top:4px; }
  .ps-btn-cancel { background:var(--bg-card); border:1.5px solid var(--border-strong); color:var(--text); border-radius:8px; padding:10px 20px; font-size:14px; cursor:pointer; transition:all 0.15s; font-family:inherit; }
  .ps-btn-cancel:hover { background:var(--bg-card-hover); }
  .ps-btn-primary { background:var(--primary); color:#fff; border:none; border-radius:8px; padding:10px 24px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
  .ps-btn-primary:hover { background:var(--primary-hover); }
  .ps-btn-primary:disabled { opacity:0.55; cursor:not-allowed; }
  .ps-form-scroll { max-height:72vh; overflow-y:auto; padding-right:4px; }
  .ps-form-scroll::-webkit-scrollbar { width:4px; }
  .ps-form-scroll::-webkit-scrollbar-track { background:var(--surface-2); border-radius:2px; }
  .ps-form-scroll::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:2px; }
  /* Feldkästen liegen auf dem weißen PDF-Blatt, ihre Farbe kommt je Unterzeichner inline. */
  .ps-field-box { position:absolute; border:2px solid; border-radius:4px; cursor:grab; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; user-select:none; z-index:10; min-width:80px; min-height:28px; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:box-shadow 0.15s; }
  .ps-field-box.ps-selected { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--primary), 0 4px 12px rgba(0,0,0,0.3); }
  .ps-field-box:hover .ps-field-delete { opacity:1 !important; }
  .ps-field-box .ps-field-resize { position:absolute; bottom:-4px; right:-4px; width:12px; height:12px; background:#fff; border:2px solid; border-radius:2px; cursor:nwse-resize; opacity:0; transition:opacity 0.15s; }
  .ps-field-box:hover .ps-field-resize, .ps-field-box.ps-selected .ps-field-resize { opacity:1; }
  .ps-context-menu { position:fixed; z-index:99999; background:var(--surface-solid); border:1px solid var(--border); border-radius:6px; box-shadow:var(--pop-shadow); padding:4px 0; min-width:140px; }
  .ps-context-menu div { padding:7px 16px; font-size:13px; cursor:pointer; color:var(--text); }
  .ps-context-menu div:hover { background:var(--hover); }
  .ps-context-menu div.ps-ctx-danger { color:var(--red-text); }
  .sepa-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
  @media (max-width:768px) { .sepa-grid { grid-template-columns:1fr; } .sepa-grid > div[style*="grid-column"] { grid-column:auto !important; } }

/* ── Qualität (qm.js, Spec docs/2026-09-29-qm-modul-design.md). Nur Tokens, keine festen Farben. ── */
.qm { max-width: 1200px; }
.qm-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.qm-kopf h2 { margin: 0; }
.qm-leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.qm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.qm-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; box-shadow: var(--card-shadow); }
.qm-kachel:hover { border-color: var(--border-strong); }
.qm-kachel:focus-visible { outline: none; box-shadow: var(--ring); }
.qm-kachel .qm-zahl { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 2px 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qm-kachel .qm-zahl.null { color: var(--text-3); font-weight: 600; }
.qm-kachel .qm-zahl.text { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.qm-kachel > .qm-leise:first-child { font-size: 13px; line-height: 1.3; }
.qm-kachel-unter { font-size: 12.5px; line-height: 1.35; }
.qm-kachel.rot .qm-zahl { color: var(--red); }
.qm-kachel.orange .qm-zahl { color: var(--orange); }
.qm-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.qm-tabelle th, .qm-tabelle td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.qm-tabelle tr.qm-klick { cursor: pointer; }
.qm-tabelle tr.qm-klick:hover { background: var(--hover); }
.qm-rot { color: var(--red); font-weight: 600; }
.qm-leise { color: var(--text-muted); }
.qm-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.qm-block h3 { margin: 0 0 10px; font-size: 15px; }
.qm-bt-fassung { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.qm-bt-luecke { color: var(--red); font-weight: 600; }
/* .hdr-btn und .profile-menu-item setzen display:flex und schlagen sonst [hidden] (Abschlussprüfung 2b, Befund 1) */
#qmMeldenBtn[hidden], #qmMeldenMenue[hidden] { display: none; }
.qm-md-hinweis { font-size: 12px; color: var(--text-muted); margin: 2px 0; }
.qm-bt-text { white-space: pre-wrap; }
.qm details > summary { cursor: pointer; margin: 6px 0; }
.qm-form { display: grid; grid-template-columns: 190px 1fr; gap: 8px 12px; align-items: start; max-width: 900px; }
.qm-form label { color: var(--text-muted); padding-top: 6px; }
.qm-form input, .qm-form select, .qm-form textarea { width: 100%; box-sizing: border-box; }
.qm-form input:is([type="checkbox"], [type="radio"]) { width: auto; flex: none; }
.qm-status { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: var(--gray-100); color: var(--text); }
.qm-status.erledigt, .qm-status.wirksam { background: var(--green-bg); color: var(--green-text); }
.qm-status.in_arbeit { background: var(--orange-bg); color: var(--orange-text); }
.qm-status.nicht_wirksam { background: var(--red-bg); color: var(--red-text); }
.qm-punkt textarea, .qm-punkt input { width: 100%; box-sizing: border-box; }
.qm-punkt td.erg-nicht_konform { background: var(--red-bg); }
.qm-punkt td.erg-teilweise { background: var(--orange-bg); }
.qm-stufe { display: inline-block; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 99px; font-weight: 600; font-size: 12px; }
.qm-stufe.rot, .qm-stufe-feld.rot { background: var(--red-bg); color: var(--red-text); }
.qm-stufe.gelb, .qm-stufe-feld.gelb { background: var(--orange-bg); color: var(--orange-text); }
.qm-stufe.gruen, .qm-stufe-feld.gruen { background: var(--green-bg); color: var(--green-text); }
.qm-matrix { border-collapse: collapse; margin: 8px 0; }
.qm-matrix th, .qm-matrix td { border: 1px solid var(--border); padding: 6px; min-width: 90px; height: 44px; text-align: center; vertical-align: middle; font-size: 13px; }
.qm-matrix td a { margin: 0 3px; color: inherit; font-weight: 600; }
.qm-ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--gray-100); border: 1px solid var(--border); vertical-align: middle; }
.qm-ampel.gruen { background: var(--green); border-color: var(--green); }
.qm-ampel.rot { background: var(--red); border-color: var(--red); }
.qm-hinweis { border-color: var(--orange); background: var(--orange-bg); }
.qm-hinweis p { margin: 2px 0; }
/* QM Etappe 2a: Kompetenzen & Schulungen */
.qm-ps-nav .btn-primary { pointer-events: none; }
.qm-ps-matrix-rahmen { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); }
.qm-ps-matrix { border-collapse: collapse; font-size: 12px; }
.qm-ps-matrix th, .qm-ps-matrix td { border: 1px solid var(--border); padding: 3px 4px; text-align: center; background: var(--bg-card); }
.qm-ps-matrix thead th { position: sticky; top: 0; z-index: 2; }
.qm-ps-matrix thead tr:first-child th { height: 24px; line-height: 16px; white-space: nowrap; box-sizing: border-box; }   /* feste Höhe, sonst rutscht die zweite Kopfzeile darunter */
.qm-ps-matrix thead tr:nth-child(2) th { top: 24px; }
.qm-ps-matrix th.qm-ps-kopf { vertical-align: bottom; font-weight: 500; cursor: default; }
.qm-ps-senk { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 170px; overflow: hidden; text-overflow: ellipsis; }   /* Drehung am inneren Block: am th selbst ragt der Text in die Bereichszeile */
.qm-ps-matrix td.qm-ps-name, .qm-ps-matrix th.qm-ps-name { position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap; }
.qm-ps-matrix thead th.qm-ps-name { z-index: 3; }
.qm-ps-matrix select { font-size: 12px; padding: 0 2px; min-width: 38px; }
.qm-ps-unter { background: var(--red-bg) !important; color: var(--red-text); }
.qm-ps-soll { color: var(--text-muted); font-size: 10px; }
.qm-ps-niemand { color: var(--red); font-weight: 700; }
.qm-ps-eine { color: var(--orange); font-weight: 700; }
.qm-ps-gruen { color: var(--green-text); background: var(--green-bg); }
.qm-ps-gelb { color: var(--orange-text); background: var(--orange-bg); }
.qm-ps-rot { color: var(--red-text); background: var(--red-bg); }
.qm-ps-marke { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 12px; }
.qm-dok-ansicht { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-bottom: 14px; }
.qm-ed-leiste { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--gray-100); position: sticky; top: 0; z-index: 2; }
.qm-ed-trenner { width: 1px; background: var(--border); margin: 0 4px; }
.qm-ed { border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-card); min-height: 50vh; }
.qm-ed .ProseMirror { padding: 16px 20px; min-height: 50vh; outline: none; line-height: 1.5; }
.qm-ed table { border-collapse: collapse; margin: 8px 0; }
.qm-ed th, .qm-ed td { border: 1px solid var(--border); padding: 4px 8px; vertical-align: top; min-width: 60px; position: relative; }
.qm-ed th { background: var(--gray-100); }
.qm-ed .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--hover); pointer-events: none; }
.qm-ed ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.qm-ed ul[data-type="taskList"] li { display: flex; gap: 6px; }
.qm-ed img { max-width: 100%; }
.qm-ed img.ProseMirror-selectednode { outline: 2px solid var(--orange); }
.qm-ed-verweis { background: var(--gray-100); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.qm-vorschlag { position: absolute; z-index: 1000; min-width: 260px; max-width: 480px; max-height: 280px; overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.qm-vorschlag-eintrag { padding: 6px 10px; cursor: pointer; }
.qm-vorschlag-eintrag.aktiv, .qm-vorschlag-eintrag:hover { background: var(--hover); }
.qm-vorschlag-leer { padding: 6px 10px; color: var(--text-muted); }
.qm-ed-kommentar { background: var(--orange-bg); border-bottom: 2px solid var(--orange); }
.qm-ed-kommentar.blinken { outline: 2px solid var(--orange); }
.qm-kommentar { border-bottom: 1px solid var(--border); padding: 6px 0; }
.qm-kommentar.erledigt { opacity: .6; }
.qm-kommentar-zitat { font-style: italic; color: var(--text-muted); }
.qm-ed-hinweis { border-left: 4px solid var(--border); background: var(--gray-100); padding: 6px 12px; margin: 8px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.qm-ed-hinweis[data-art="achtung"] { border-left-color: var(--orange); background: var(--orange-bg); }
.ProseMirror { counter-reset: qmedschritt; } .ProseMirror h2, .ProseMirror h3, .ProseMirror h4 { counter-set: qmedschritt 0; }
.qm-ed-schritt { position: relative; counter-increment: qmedschritt; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px 6px 42px; margin: 8px 0; }
.qm-ed-schritt::before { content: counter(qmedschritt); position: absolute; left: 10px; top: 7px; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--primary); color: var(--bg-card); font-size: 12px; font-weight: 600; text-align: center; }
.qm-ed-schritt:not([data-rolle=""])::after { content: attr(data-rolle-text); position: absolute; top: 6px; right: 10px; padding: 1px 8px; border-radius: var(--radius); background: var(--gray-100); color: var(--primary); font-size: 12px; font-weight: 600; }
.qm-ed-schritt p { margin: 2px 0; }
.qm-ed-schritt:not([data-rolle=""]) { padding-right: 110px; }
.qm-ed-mermaid { border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px; margin: 8px 0; }
.qm-ed-mermaid svg { max-width: 100%; height: auto; }
.qm-dialog-hg { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.qm-dialog { background: var(--bg-card); color: var(--text); border-radius: var(--radius); padding: 16px; width: min(1000px, 94vw); max-height: 90vh; overflow: auto; }
.qm-dialog-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qm-dialog-zwei textarea { width: 100%; font-family: monospace; box-sizing: border-box; }
@media (max-width: 700px) { .qm-dialog-zwei { grid-template-columns: 1fr; } }
.qm-band { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; background: var(--bg-card); }
.qm-band-kern { border-left: 4px solid var(--green); }
.qm-band-fuehrung { border-left: 4px solid var(--orange); }
.qm-band-unterstuetzung { border-left: 4px solid var(--text-muted); }
.qm-band-titel { font-weight: 700; margin-bottom: 6px; }
.qm-band-bereich { color: var(--text-muted); font-size: 12px; margin: 8px 0 4px; }
.qm-kacheln-klein { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.qm-prozess { border: 1px dashed var(--border); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; font-size: 13px; background: var(--bg-card); }
.qm-prozess.gueltig { border-style: solid; }
.qm-prozess:hover { background: var(--hover); }
.qm-haken { display: inline-block; margin-right: 10px; }
.tk-qm-beschwerde.aktiv { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange); }
.tk-qm-dialog-hg { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.tk-qm-dialog { background: var(--bg-card); color: var(--text); border-radius: var(--radius); padding: 16px; width: min(460px, 94vw); display: grid; gap: 6px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.tk-qm-dialog input, .tk-qm-dialog select, .tk-qm-dialog textarea { width: 100%; box-sizing: border-box; }
.tk-qm-dialog-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.qm-bew-label { display: block; font-weight: 600; margin: 10px 0 4px; }
.qmBText { width: 100%; box-sizing: border-box; }
#qmBErg input, #qmBErg select { width: 100%; box-sizing: border-box; }
.qm-normmatrix tr.luecke td { background: var(--red-bg); color: var(--red-text); }
.qm-normmatrix tr.ausgeschlossen td { color: var(--text-muted); }
@media (max-width: 700px) { .qm-form { grid-template-columns: 1fr; } .qm-form label { padding-top: 0; } }

/* ── Qualität: Seitenleiste nach PDCA, Übersicht mit Zyklus-Ring, einheitliche Felder (UX-Überarbeitung 02.10.2026) ── */
.qm { --qm-plan: var(--blue); --qm-do: var(--green); --qm-check: var(--orange); --qm-act: var(--violet); }
.qm [data-phase="plan"] { --qm-phase: var(--qm-plan); }
.qm [data-phase="do"] { --qm-phase: var(--qm-do); }
.qm [data-phase="check"] { --qm-phase: var(--qm-check); }
.qm [data-phase="act"] { --qm-phase: var(--qm-act); }
.qm-kopf h2 { font-size: var(--m-fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.qm-rahmen { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 28px; align-items: start; }
.qm-rahmen.qm-ohne-nav { grid-template-columns: minmax(0, 1fr); }
.qm-ohne-nav .qm-nav, .qm-ohne-nav .qm-nav-mobil { display: none !important; }
.qm-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; }
.qm-nav-gruppe { display: flex; flex-direction: column; gap: 1px; }
.qm-nav-titel { display: flex; align-items: center; gap: 8px; padding: 0 10px 4px; font-size: var(--m-fs-xs); font-weight: 600; color: var(--text-3); }
.qm-nav-titel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--qm-phase); }
.qm-nav-link { position: relative; text-align: left; font: inherit; font-size: 13.5px; color: var(--text-2); background: none; border: 0;
  border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; }
.qm-nav-link:hover { background: var(--hover); color: var(--text); }
.qm-nav-link { display: flex; align-items: center; gap: 8px; }
.qm-nav-link > span:first-child { flex: 1 1 auto; min-width: 0; }
.qm-nav-zahl { flex: none; min-width: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center;
  background: var(--gray-100); color: var(--text-2); font-variant-numeric: tabular-nums; }
.qm-nav-zahl[hidden] { display: none; }
.qm-nav-zahl.dringend { background: var(--red-bg); color: var(--red-text); }
.qm-nav-link.aktiv { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: var(--card-shadow); }
.qm-nav-link.aktiv::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--qm-phase, var(--primary)); }
.qm-nav-link:focus-visible { outline: none; box-shadow: var(--ring); }
.qm-nav-mobil { display: none; }
@media (max-width: 900px) {
  .qm-rahmen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qm-nav { display: none; }
  .qm-nav-mobil { display: block; }
}
/* Übersicht: Ring + „Jetzt zu tun“ */
.qm-start { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: center; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 18px 22px; margin-bottom: 14px; }
.qm-ring { width: 100%; max-width: 240px; display: block; overflow: visible; }
.qm-ring-teil { cursor: pointer; outline: none; }
.qm-ring-flaeche { fill: transparent; stroke: none; }
.qm-ring-teil .qm-ring-bogen { fill: none; stroke: var(--qm-phase); stroke-width: 26; stroke-linecap: butt; opacity: .28; transition: opacity .15s; }
.qm-ring-teil.offen .qm-ring-bogen { opacity: 1; }
.qm-ring-teil:hover .qm-ring-bogen, .qm-ring-teil:focus-visible .qm-ring-bogen { opacity: .8; }
.qm-ring-teil.offen:hover .qm-ring-bogen, .qm-ring-teil.offen:focus-visible .qm-ring-bogen { opacity: .85; }
.qm-ring-teil:focus-visible .qm-ring-name { text-decoration: underline; }
.qm-ring-zahl, .qm-ring-name, .qm-ring-mitte { pointer-events: none; }
.qm-ring-zahl { text-anchor: middle; font-size: 15px; font-weight: 700; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.qm-ring-teil.offen .qm-ring-zahl { fill: #fff; }
.qm-ring-name { font-size: 12.5px; font-weight: 600; fill: var(--text-2); }
.qm-ring-mitte { text-anchor: middle; font-size: 15px; font-weight: 700; fill: var(--text); }
.qm-ring-mitte.klein { font-size: 13px; font-weight: 500; fill: var(--text-3); }
.qm-todo h3 { margin: 0 0 8px; font-size: var(--m-fs-md); }
.qm-todo ul { list-style: none; margin: 0; padding: 0; }
.qm-todo li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.qm-todo li:first-child { border-top: 0; }
.qm-todo-phase { display: inline-flex; align-items: center; gap: 7px; font-size: var(--m-fs-sm); color: var(--text-3); }
.qm-todo-phase::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--qm-phase); flex: none; }
.qm-todo-text { line-height: 1.4; }
@media (max-width: 700px) {
  .qm-start { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .qm-ring { max-width: 200px; margin: 0 auto; }
  .qm-todo li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .qm-todo-phase { grid-column: 1 / -1; }
}
/* Blöcke, Tabellen, Links */
.qm-block { box-shadow: var(--card-shadow); border-radius: var(--radius-lg); padding: 16px 18px; }
.qm-block h3 { font-size: var(--m-fs-md); font-weight: 600; }
.qm-hinweis { border-color: var(--orange); }
.qm a:not(.btn) { color: var(--brand-text, var(--primary)); text-decoration: none; }
.qm a:not(.btn):hover { text-decoration: underline; }
.qm a.btn, .qm-dialog a.btn { text-decoration: none; }
.qm-tabelle th { font-size: var(--m-fs-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; border-bottom-color: var(--border-strong, var(--border)); }
.qm-tabelle td { line-height: 1.4; }
.qm-tabelle tr.qm-klick:focus-within { background: var(--hover); }
.qm-tabelle td.qm-rot, .qm-tabelle td:first-child { white-space: nowrap; }
/* Leere Listen als ruhige Fläche statt verlorener grauer Satz */
.qm [id^="qm"][id$="Liste"] > p.qm-leise:only-child { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; }
/* Felder ohne Klasse (Filter, Formulare in den Unterseiten) sehen aus wie .form-input / .form-select */
.qm :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"])):not(.form-input):not(.form-select) {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px;
  background-color: var(--bg-input); color: var(--text); outline: none; max-width: 100%; }
.qm :where(select, textarea, input):not(.form-input):not(.form-select):focus { border-color: var(--brand-text); box-shadow: var(--ring); }
.qm select:not(.form-select):not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.qm .qm-ps-matrix select:not(.form-select) { padding: 0 14px 0 2px; font-size: 12px; border-radius: 6px; background-position: right 2px center; background-size: 10px; min-width: 38px; }
/* Filterleisten: Auswahlfelder nur so breit wie ihr Inhalt, nicht über die ganze Zeile */
.qm-leiste :is(.form-select, .form-input, select, input) { width: auto; max-width: 280px; flex: 0 1 auto; min-width: 0; }
.qm-leiste input:is([type="checkbox"], [type="radio"]) { flex: none; }
.qm-leiste label { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .qm-leiste :is(.form-select, select) { flex: 1 1 calc(50% - 4px); max-width: none; }   /* gleiche Spezifität wie die Grundregel, steht danach */
}
/* Handy: Tabellen als Zeilenkarten. Spaltenname links (data-label, gesetzt von qmTabellenBeschriften), Wert rechts. */
@media (max-width: 700px) {
  .qm-tabelle, .qm-tabelle tbody, .qm-tabelle tr { display: block; }
  .qm-tabelle thead, .qm-tabelle tr.qm-kopfzeile { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
  .qm-tabelle tr { position: relative; padding: 10px 2px; border-bottom: 1px solid var(--border); }
  .qm-tabelle td { display: block; position: relative; border: 0; padding: 2px 0 2px calc(36% + 12px); min-width: 0;
    white-space: normal !important; overflow-wrap: anywhere; }
  .qm-tabelle td::before { content: attr(data-label); position: absolute; left: 0; top: 2px; width: 36%; color: var(--text-3); font-size: var(--m-fs-sm); line-height: 1.45; }
  .qm-tabelle td:empty { display: none; }
  /* Kopfzeile der Karte: erste Zelle, bei kurzer erster Zelle (Nr., Datum) auch die zweite; Zellen ohne Spalte (Gruppenzeilen) ebenso */
  .qm-tabelle td:first-child, .qm-tabelle td:not([data-label]), .qm-tabelle tr.qm-kopf2 td:nth-child(2) { padding-left: 0; font-weight: 600; color: var(--text); }
  .qm-tabelle td:first-child::before, .qm-tabelle td:not([data-label])::before, .qm-tabelle tr.qm-kopf2 td:nth-child(2)::before { content: none; }
  .qm-tabelle tr.qm-kopf2 td:first-child { font-weight: 500; color: var(--text-3); font-size: var(--m-fs-sm); }
  .qm-tabelle tr.qm-kopf2 td:nth-child(2) { padding-bottom: 4px; }
  .qm-tabelle tr.qm-klick { padding-right: 24px; }
  .qm-tabelle tr.qm-klick::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
    border-right: 2px solid var(--text-3); border-top: 2px solid var(--text-3); transform: rotate(45deg); opacity: .55; }
}

/* Handy: Kompetenzmatrix nur Person + Stufen; Rollen und Vertretung stehen unter „Personen“ */
@media (max-width: 700px) {
  .qm-ps-matrix .qm-ps-neben { display: none; }
  .qm-ps-matrix td.qm-ps-name { white-space: normal; min-width: 92px; max-width: 120px; }
}
/* Handy: Knopfleisten füllen die Zeile statt einzelner Knöpfe am Ende; „Jetzt zu tun“ mit Knopf unter dem Text */
@media (max-width: 700px) {
  .qm-leiste > .btn { flex: 1 1 auto; }
  .qm-todo li { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
  .qm-todo li > .btn { justify-self: start; margin-top: 4px; }
}
/* Touch-Geräte (iPhone, iPad): Felder mit 16 px, sonst zoomt Safari beim Antippen; Tippziele mindestens 40-44 px */
@media (pointer: coarse) {
  .qm :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"])),
  .qm-dialog :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"])) { font-size: 16px !important; }
  .qm-nav-link { min-height: 40px; }
  .qm input:is([type="checkbox"], [type="radio"]), .qm-dialog input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; }
  .qm-tabelle a:not(.btn) { display: inline-block; padding: 6px 0; }
  .qm .btn, .qm-dialog .btn { min-height: 40px; }
  .qm-ps-matrix a { display: inline-block; padding: 6px 0; }
  .qm p > a:not(.btn):only-child { display: inline-block; padding: 10px 0; }   /* „‹ Zurück zur Liste“ */
  .qm .qm-ps-matrix select:not(.form-select) { min-height: 32px; }
}
/* iPad hoch, Handy quer: breite Tabellen scrollen in ihrem Block statt rechts abgeschnitten zu werden (unter 700 px: Zeilenkarten) */
@media (pointer: coarse) and (min-width: 701px) {
  .qm-tabelle tr.qm-klick td { padding-top: 11px; padding-bottom: 11px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  :is(.qm, .qm-dialog) :has(> table.qm-tabelle) { overflow-x: auto; }
}

/* ── Protokollversand: Postversand über Binect (01.10.2026) ── */
.psb-sec { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:8px; }
.psb-kopf { font-size:13px; font-weight:600; color:var(--text); margin:2px 0 8px; }
.psb-kopf-fehler { color:var(--red-text); }
.psb-liste { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:14px; max-height:280px; overflow-y:auto; }
.psb-zeile { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.psb-zeile:last-child { border-bottom:none; }
.psb-name { font-size:13px; color:var(--text); min-width:0; }
.psb-status { font-size:12px; margin-top:2px; }
.psb-fehler { font-size:12px; color:var(--red-text); margin-top:3px; line-height:1.4; }
.psb-aktionen { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.sett-hervor { box-shadow:0 0 0 2px var(--primary); transition:box-shadow 0.3s ease; }

/* Beschlusssammlung: App-Einträge (2026-10-04) */
.bs-quelle-app { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-text); flex-shrink: 0; }
.bs-etv-link { font-size: 12px; color: var(--brand-text); flex-shrink: 0; }
.bs-entfallen-hinweis { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.bs-res--entfallen .bs-res-title { color: var(--text-3); text-decoration: line-through; }