*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Default: "System" - color-scheme:light dark laesst den Browser (inkl.
       Safari) native Steuerelemente (Datalist-Popup, Datum-/Zeit-Picker) passend
       zum OS-Theme rendern; die @media-Bloecke unten liefern dazu unsere eigene
       dunkle Palette. Explizite Wahl per Toggle setzt data-theme und ueberschreibt
       beides gezielt (siehe Bloecke am Dateiende). */
    color-scheme: light dark;
    --bg: #f4f4f2;
    --surface: #ffffff;
    --surface-2: #f9f9f8;
    --border: #e2e2de;
    --border-strong: #c8c8c4;
    --text: #1a1a18;
    --text-2: #5a5a56;
    --text-3: #9a9a96;
    --accent: #2563eb;
    --accent-bg: #eff6ff;
    --accent-text: #1d4ed8;
    --success: #166534;
    --success-bg: #f0fdf4;
    --danger: #991b1b;
    --danger-bg: #fef2f2;
    --warning: #92400e;
    --warning-bg: #fffbeb;
    --toast-ok-border: #bbf7d0;
    --toast-err-border: #fecaca;
    --info-banner-border: #fde68a;
    --overlay-bg: rgba(0,0,0,.4);
    --radius: 6px;
    --sidebar: 210px;
  }

  /* System-Dark (OS dunkel, kein expliziter Toggle auf "Hell") */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1c1c1a;
      --surface: #242422;
      --surface-2: #2a2a27;
      --border: #3a3a36;
      --border-strong: #4d4d47;
      --text: #f0f0ee;
      --text-2: #b8b8b2;
      --text-3: #7a7a74;
      --accent: #3b82f6;
      --accent-bg: #1e3a5f;
      --accent-text: #93c5fd;
      --success: #4ade80;
      --success-bg: #14532d;
      --danger: #f87171;
      --danger-bg: #450a0a;
      --warning: #fbbf24;
      --warning-bg: #451a03;
      --toast-ok-border: #166534;
      --toast-err-border: #7f1d1d;
      --info-banner-border: #78350f;
      --overlay-bg: rgba(0,0,0,.6);
    }
  }

  /* Expliziter Toggle auf "Dunkel" (unabhängig vom OS-Theme) */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1c1c1a;
    --surface: #242422;
    --surface-2: #2a2a27;
    --border: #3a3a36;
    --border-strong: #4d4d47;
    --text: #f0f0ee;
    --text-2: #b8b8b2;
    --text-3: #7a7a74;
    --accent: #3b82f6;
    --accent-bg: #1e3a5f;
    --accent-text: #93c5fd;
    --success: #4ade80;
    --success-bg: #14532d;
    --danger: #f87171;
    --danger-bg: #450a0a;
    --warning: #fbbf24;
    --warning-bg: #451a03;
    --toast-ok-border: #166534;
    --toast-err-border: #7f1d1d;
    --info-banner-border: #78350f;
    --overlay-bg: rgba(0,0,0,.6);
  }

  /* Expliziter Toggle auf "Hell" (unabhängig vom OS-Theme) */
  :root[data-theme="light"] { color-scheme: light; }

  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

  /* Layout */
  .app { display: flex; flex: 1; overflow: hidden; }
  .sidebar { width: var(--sidebar); min-width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  .topbar { padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 10px; }
  .topbar h1 { font-size: 15px; font-weight: 600; }
  .content { flex: 1; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; }
  .hamburger { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; flex-shrink: 0; }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; flex-shrink: 0; }
  .sidebar-backdrop { display: none; }
  @media (min-width: 769px) { .sidebar.collapsed { display: none; } }

  /* Sidebar */
  .sidebar-section { padding: 16px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
  .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; color: var(--text-2); font-size: 13px; border: none; background: none; width: 100%; text-align: left; border-radius: 0; transition: background .1s; }
  .nav-item:hover { background: var(--bg); color: var(--text); }
  .nav-item.active { background: var(--accent-bg); color: var(--accent-text); font-weight: 500; }
  .nav-item i { font-size: 15px; flex-shrink: 0; }
  .nav-group-label { font-weight: 700; color: var(--text-2); }
  .nav-group-parent { cursor: default; }
  .nav-group-parent:hover { background: none; color: var(--text-2); }
  .nav-childitem { padding-left: 32px; font-size: 12.5px; }
  .nav-childitem i { font-size: 13px; }

  /* API badge */
  .api-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
  .dot.ok { background: #16a34a; }
  .dot.err { background: #dc2626; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; font-family: inherit; transition: background .1s; white-space: nowrap; }
  .btn:hover { background: var(--bg); }
  .btn:active { transform: scale(.98); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
  .btn.sm { padding: 4px 8px; font-size: 12px; }
  .btn.ghost { border-color: transparent; background: transparent; }
  .btn.ghost:hover { background: var(--bg); }
  .btn.danger-ghost { border-color: transparent; background: transparent; color: var(--text-3); }
  .btn.danger-ghost:hover { background: var(--danger-bg); color: var(--danger); }
  .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* Section header */
  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .section-header h2 { font-size: 14px; font-weight: 600; }

  /* Table */
  .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  thead { background: var(--surface-2); }
  th { text-align: left; padding: 8px 14px; font-size: 11px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); letter-spacing: .03em; text-transform: uppercase; }
  td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--surface-2); }
  .empty-row td { text-align: center; color: var(--text-3); padding: 32px; font-size: 13px; }
  th.th-sort { cursor: pointer; user-select: none; }
  th.th-sort:hover { color: var(--text); }
  th.th-sort .sort-icon { margin-left: 4px; font-size: 12px; opacity: .4; vertical-align: -1px; }
  th.th-sort.active .sort-icon { opacity: 1; color: var(--accent); }

  /* Badges */
  .badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; }
  .badge-blue { background: var(--accent-bg); color: var(--accent-text); }
  .badge-green { background: var(--success-bg); color: var(--success); }
  .badge-amber { background: var(--warning-bg); color: var(--warning); }
  .badge-red { background: var(--danger-bg); color: var(--danger); }
  .badge-gray { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }

  /* Mono text */
  .mono { font-family: "SF Mono", "Fira Mono", monospace; font-size: 11px; color: var(--text-3); }

  /* Tabs (Registerblätter) */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; user-select: none; }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* Filterleiste */
  .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
  .filter-bar .field { min-width: 140px; }

  /* Modal */
  .overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
  .modal { background: var(--surface); border-radius: 10px; border: 1px solid var(--border); padding: 20px; width: 520px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
  .modal.wide { width: 860px; }
  .modal.xwide { width: 1180px; }
  .modal-title { font-size: 15px; font-weight: 600; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
  .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

  /* Forms */
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; min-width: 0; }
  .form-grid.cols1 { grid-template-columns: 1fr; }
  .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .field.span2 { grid-column: 1 / -1; }
  .field label { font-size: 12px; font-weight: 500; color: var(--text-2); }
  .field input, .field select, .field textarea {
    padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
    width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  }
  .field .hint { font-size: 11px; color: var(--text-3); }
  .checkbox-row { display: flex; align-items: center; gap: 8px; }
  .checkbox-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
  .checkbox-row label { font-size: 13px; color: var(--text); cursor: pointer; font-weight: 400; }

  /* Toast */
  #toast { position: fixed; bottom: 24px; right: 24px; padding: 10px 16px; border-radius: var(--radius); font-size: 13px; z-index: 2000; display: none; align-items: center; gap: 8px; max-width: 320px; }
  #toast.ok { display: flex; background: var(--success-bg); color: var(--success); border: 1px solid var(--toast-ok-border); }
  #toast.err { display: flex; background: var(--danger-bg); color: var(--danger); border: 1px solid var(--toast-err-border); }

  /* Info banner */
  .info-banner { background: var(--warning-bg); border: 1px solid var(--info-banner-border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--warning); display: flex; align-items: flex-start; gap: 8px; }

  /* Row actions */
  .row-actions { display: flex; gap: 2px; }

  /* Tree (Kategorien-Hierarchie) */
  .tree-toggle { width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: none; background: transparent; color: var(--text-3); cursor: pointer; flex-shrink: 0; }
  .tree-toggle:hover { background: var(--bg); color: var(--text); }
  .tree-toggle i { font-size: 14px; }
  .tree-spacer { display: inline-block; width: 20px; flex-shrink: 0; }
  .tree-cell { display: flex; align-items: center; gap: 4px; }

  /* Planrechnung (Pivot) */
  .plan-sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  thead .plan-sticky-col { background: var(--surface-2); z-index: 2; }
  tr:hover .plan-sticky-col { background: var(--surface-2); }
  .plan-group-th { text-align: center; border-bottom: 1px solid var(--border); }
  .plan-group-header td { background: var(--surface-2); border-top: 1px solid var(--border); font-weight: 600; }
  .plan-group-header .tree-cell { cursor: pointer; }
  /* Markiert einen "Plan je Monat"-Monat mit geplanter Sonderausgabe (status=geplant) */
  .plan-zelle-geplant { background: var(--accent-bg); }

  /* Belegscan-Aktionsleiste - Desktop-Default (flex-row, alle Buttons gleich groß) */
  .belegscan-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

  /* 12m-Report: zusätzlich zur fixierten ersten Spalte (.plan-sticky-col) auch
     die Kopfzeile fixieren ("Fenster fixieren" wie in Excel) - die Ecke oben
     links braucht den höchsten z-index, da beide Sticky-Achsen dort überlappen. */
  .report-table thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; }
  .report-table thead .plan-sticky-col { z-index: 3; }
  #plan-ab {
    padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
  }

  /* Saldo color */
  .saldo-pos { color: var(--success); font-variant-numeric: tabular-nums; }
  .saldo-neg { color: var(--danger); font-variant-numeric: tabular-nums; }
  .saldo-zero { color: var(--text-3); font-variant-numeric: tabular-nums; }

  /* User menu (Dropdown beim Usernamen) */
  .user-menu-wrap { position: relative; }
  .user-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; z-index: 1800; }
  .user-menu.show { display: block; }
  .user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: none; background: none; padding: 8px 10px; border-radius: 6px; font-size: 13px;
    color: var(--text); cursor: pointer; font-family: inherit; }
  .user-menu-item:hover { background: var(--bg); }
  .user-menu-item.danger { color: var(--danger); }
  .user-menu-item.danger:hover { background: var(--danger-bg); }
  .user-menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }

  /* Konten-Subnav in der Sidebar */
  .nav-subitem { padding-left: 32px; font-size: 12.5px; }
  .nav-subitem i { font-size: 8px; color: var(--text-3); }
  .nav-subitem.active i { color: var(--accent-text); }

  /* Konten per Drag&Drop sortieren (Sidebar-Subnav + Kontoübersicht-Tabelle) */
  .konto-drag-handle { font-size: 13px !important; color: var(--text-3) !important; cursor: grab; margin-right: 2px; }
  .nav-subitem.dragging, tr.dragging { opacity: .4; }

  /* Resizable Split (Belegvorschau ↔ Info) */
  .resizable-split { display: grid; grid-template-columns: var(--split-left, 340px) 8px 1fr; align-items: start; }
  .split-left, .split-right { min-width: 0; }
  /* Belegvorschau bleibt beim Scrollen sichtbar (z.B. lange Artikellisten im
     Beleg-Review) - modal(die naechste scrollbare Vorfahren-Box hat overflow-y:auto)
     bzw. .content ausserhalb eines Modals. */
  .split-left { position: sticky; top: 0; }
  .split-handle { cursor: col-resize; align-self: stretch; position: relative; touch-action: none; }
  .split-handle::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: var(--border); transform: translateX(-50%); transition: background .1s; }
  .split-handle:hover::after, .split-handle.dragging::after { background: var(--accent); width: 3px; }

  /* Spinner */
  .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading { padding: 40px; text-align: center; color: var(--text-3); }

  /* ── Mobile (iPhone test) ─────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .hamburger { display: inline-flex; }
    .sidebar-toggle { display: none; }
    .sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 1600;
      transform: translateX(-100%); transition: transform .2s ease;
      box-shadow: 2px 0 16px rgba(0,0,0,.2);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show {
      display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1500;
    }
    .topbar { padding: 10px 12px; }
    .topbar h1 { font-size: 14px; }
    #api-label { display: none; }
    .content { padding: 12px; }
    .section-header h2 { font-size: 13px; }
    .section-header { flex-wrap: wrap; gap: 8px; }

    /* Tables scroll horizontally instead of squeezing/clipping */
    .table-card { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    table { min-width: 640px; }

    /* Forms stack to one column */
    .form-grid { grid-template-columns: 1fr; }
    .field.span2 { grid-column: span 1; }
    .modal.wide, .modal.xwide { width: 100%; }

    /* Any inline two-column grid layouts (buchungszeilen, beleg preview, etc.) stack too */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .resizable-split { grid-template-columns: 1fr !important; }
    .split-handle { display: none; }

    /* Prevent iOS Safari auto-zoom on focus (needs >=16px font) */
    .field input, .field select, .field textarea { font-size: 16px; }

    .modal { padding: 16px; }
    .modal-footer { flex-wrap: wrap; }

    /* Belegscan: Hauptusecase auf dem Handy ist "Foto aufnehmen -> Scannen" -
       beide Schritte werden hier als große, volle-Breite-Buttons übereinander
       gestapelt statt der Desktop-Reihe aus gleich großen Buttons. */
    .belegscan-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .belegscan-foto-btn { order: 1; font-size: 16px; padding: 16px; justify-content: center; }
    .belegscan-datei-btn { order: 2; align-self: center; }
    #scan-filename { order: 3; text-align: center; }
    .belegscan-scan-btn { order: 4; font-size: 16px; padding: 14px; justify-content: center; }
    #scan-status { order: 5; text-align: center; }
  }

  /* ── Druckansicht (Notfallblatt) ───────────────────────────────────────── */
  /* .no-print: Elemente, die nur in der App sichtbar sind (Buttons, Personen-
     Auswahl, ...), nicht auf dem Ausdruck/PDF. */
  @media print {
    .sidebar, .topbar, .sidebar-backdrop, #toast, .no-print { display: none !important; }
    .app, .main, .content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
    body { height: auto !important; overflow: visible !important; }
    .notfallblatt-card { border: none !important; box-shadow: none !important; }
  }
  .notfallblatt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; }
  .notfallblatt-card h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); margin-bottom: 10px; }
  /* Medikamentenplan: kompakter als Standardtabellen, alle Spalten bleiben
     einzeilig (nowrap) - nur die Bemerkung darf umbrechen, damit nichts
     abgeschnitten wird und trotzdem nichts unnötig zweizeilig wird. */
  .notfallblatt-plan-table { font-size: 12px; width: 100%; }
  .notfallblatt-plan-table th, .notfallblatt-plan-table td { padding: 5px 10px; }
  .notfallblatt-plan-table th:not(.nb-bemerkung), .notfallblatt-plan-table td:not(.nb-bemerkung) { white-space: nowrap; }
  .notfallblatt-plan-table .nb-bemerkung { white-space: normal; word-break: break-word; }