*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Mercedes Light – Studio/Konfigurator-Look */
    --bg: #f5f6f7;                     /* sehr helles Silbergrau als Hauptfläche */
    --bg-deep: #ebedef;
    --card: #ffffff;                   /* reines Weiß für Karten */
    --surface: #f0f1f3;                /* Hover/Highlight, dezent grau */
    --surface-strong: #e6e8ea;
    --border: #dcdfe2;                 /* dezente silbrige Linien */
    --border-strong: #c4c8cc;
    --text: #1a1a1a;                   /* sehr dunkles Anthrazit, nicht reines Schwarz */
    --text-soft: #3a3d42;
    --muted: #6e7378;                  /* abgesetztes Silber-Grau für Sekundärtext */
    --silver: #A4AAAE;                 /* Mercedes-Silber – Markenfarbe */
    --silver-light: #d8dbde;
    --silver-dark: #6e7378;
    --accent: #00ADEF;                 /* Mercedes-Blue */
    --accent-soft: #00A3E0;
    --accent-dark: #0085b8;
    --input: #ffffff;
    --green: #1f8a4d; --red: #b73228; --orange: #b8732e;

    /* metallische Verläufe in hell */
    --gradient-silver: linear-gradient(135deg, #ffffff 0%, #e8eaec 50%, #ffffff 100%);
    --gradient-silver-bright: linear-gradient(135deg, #ffffff 0%, #f4f5f7 50%, #ffffff 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    --gradient-accent: linear-gradient(135deg, #00ADEF 0%, #0085b8 100%);
    --gradient-page: linear-gradient(180deg, #f5f6f7 0%, #ebedef 100%);
    --gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);

    /* Schatten – soft & Mercedes-typisch */
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 0 1px rgba(0,173,239,0.3), 0 4px 16px rgba(0,173,239,0.15);
  }
  body {
    background: var(--gradient-page);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  input, select, textarea, button { font-family: inherit; }
  input, select, textarea {
    width: 100%;
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: 4px;             /* Mercedes nutzt eher kantige Formen */
    padding: 10px 12px;
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,173,239,0.15);
  }
  select option { background: var(--card); }
  table { border-collapse: collapse; width: 100%; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; display:inline-block; }
  .page { animation: fadein 0.2s ease; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .page > .page-full { flex: 1 1 auto; min-height: 0; }

  /* LAYOUT */
  #app { display: flex; min-height: 100vh; }
  #sidebar {
    width: 240px; height: 100vh;
    background: var(--gradient-sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow-y: auto; flex-shrink: 0;
    transition: width 0.25s ease;
    box-shadow: 1px 0 0 rgba(0,0,0,0.02);
  }
  #sidebar.collapsed { width: 64px; }
  #main { flex: 1; padding: 2rem; overflow-x: auto; min-width: 0; display: flex; flex-direction: column; }
  .sidebar-logo {
    padding: 1.5rem 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    text-align: center;
  }
  .sidebar-logo-img { width: 56px; height: auto; display: block; }
  #sidebar.collapsed .sidebar-logo { padding: 1rem 0.5rem; gap: 0; }
  #sidebar.collapsed .sidebar-logo-img { width: 32px; }
  #sidebar.collapsed .logo-text { display: none; }
  /* An den PDF-Briefkopf angeglichen: serifenlose Schrift (Roboto-Look wie im PDF),
     fett, weiter Zeichenabstand. Frueher Cormorant Garamond – sorgte fuer Bruch zw. App und PDF. */
  .logo-text {
    font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    font-size: 0.72rem; font-weight: 700; line-height: 1.25;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text); width: 100%;
  }
  .logo-divider {
    width: 36px; height: 1px; background: var(--text); opacity: 0.3;
    margin: 0.4rem auto;
  }
  #sidebar.collapsed .logo-divider { display: none; }
  .logo-sub {
    font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    color: #6e7378; font-size: 0.7rem;
    font-style: italic; font-weight: 400;
    letter-spacing: 0.04em; text-transform: none;
  }
  nav { flex:1; padding:1rem 0.6rem; }
  .nav-btn {
    width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px;
    border-radius:4px; cursor:pointer; border:none; background:transparent;
    color:var(--muted); font-size:0.85rem; margin-bottom:3px; text-align:left;
    transition: all 0.15s; position:relative;
    letter-spacing: 0.02em;
  }
  .nav-btn:hover { background: var(--surface); color: var(--text); }
  .nav-btn.active {
    background: linear-gradient(90deg, rgba(0,173,239,0.12) 0%, rgba(0,173,239,0.04) 100%);
    color: var(--accent); font-weight:600;
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .nav-btn .badge { margin-left:auto; background:var(--red); color:#fff; border-radius:100px; font-size:0.65rem; font-weight:700; padding:1px 6px; min-width:18px; text-align:center; }
  .nav-spacer { margin-top:1.1rem; padding-top:0.9rem; border-top:1px solid var(--border); }
  .sidebar-footer { padding:0.9rem 0.6rem; border-top:1px solid var(--border); }
  /* Jahres-Selektor (Mehrjahr-Ansicht): betrachtetes Abrechnungsjahr global umschalten. */
  .jahr-select-wrap { padding:0 6px; margin-bottom:10px; }
  .jahr-select-label { display:block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:3px; font-weight:600; }
  .jahr-select { width:100%; padding:5px 7px; font-size:0.8rem; color:var(--text); background:var(--input); border:1px solid var(--border-strong); border-radius:6px; cursor:pointer; }
  .jahr-select:hover { border-color:var(--silver); }
  .jahr-select:focus { outline:none; border-color:var(--accent); }
  #sidebar.collapsed .jahr-select-wrap { display:none; }
  .user-email { font-size:0.7rem; color:var(--muted); padding:0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:6px; }
  #sidebar.collapsed .logo-text,
  #sidebar.collapsed .nav-label,
  #sidebar.collapsed .user-email { display: none; }

  /* BUTTONS */
  .btn {
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:none;
    border-radius:4px; font-weight:600; font-size:0.82rem;
    padding:10px 20px; transition: all .2s ease;
    letter-spacing: 0.04em; text-transform: uppercase;
    position: relative; overflow: hidden;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
  .btn-sm { font-size:0.72rem; padding:6px 12px; letter-spacing: 0.03em; }
  .btn-primary {
    background: var(--gradient-accent);
    color:#fff;
    box-shadow: 0 2px 8px rgba(0,173,239,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .btn-primary:hover { box-shadow: 0 4px 16px rgba(0,173,239,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
  .btn-secondary {
    background: var(--gradient-silver);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.04);
  }
  .btn-secondary:hover {
    background: var(--gradient-silver-bright);
    border-color: var(--silver-dark);
  }
  .btn-danger { background:rgba(192,57,43,0.12); color:#e74c3c; border:1px solid rgba(192,57,43,0.4); }
  .btn-success { background:rgba(39,174,96,0.12); color:#2ecc71; border:1px solid rgba(39,174,96,0.4); }
  .btn-ghost { background:none; color:var(--muted); text-transform:none; letter-spacing:0; }
  .btn-ghost:hover { color: var(--text); background: var(--surface); transform: none; }

  /* CARDS */
  .card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-card);
  }
  .stat-card {
    padding:1.25rem 1.5rem;
    border-left: 3px solid var(--accent);
    position: relative;
    overflow: hidden;
  }
  .stat-card::before {
    content:''; position:absolute; top:0; right:0;
    width: 80px; height: 80px;
    background: radial-gradient(circle at top right, rgba(0,0,0,0.02), transparent 70%);
    pointer-events: none;
  }
  .stat-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; font-weight:600; }
  .stat-value { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
  .stat-sub { font-size:0.72rem; color:var(--muted); margin-top:4px; letter-spacing:0.02em; }

  /* BADGES */
  .badge { font-size:0.65rem; font-weight:700; padding:3px 10px; border-radius:2px; letter-spacing:0.08em; text-transform:uppercase; }
  .badge-green { background:rgba(39,174,96,0.15); color:#2ecc71; border:1px solid rgba(39,174,96,0.3); }
  .badge-red { background:rgba(192,57,43,0.15); color:#e74c3c; border:1px solid rgba(192,57,43,0.3); }
  .badge-orange { background:rgba(214,138,60,0.15); color:#d68a3c; border:1px solid rgba(214,138,60,0.3); }
  .badge-blue { background:rgba(0,173,239,0.15); color:#00ADEF; border:1px solid rgba(0,173,239,0.3); }
  .badge-violet { background:rgba(142,68,173,0.15); color:#9b59b6; border:1px solid rgba(142,68,173,0.3); }
  .badge-neben { background:rgba(142,68,173,0.15); color:#9b59b6; border:1px solid rgba(142,68,173,0.35); margin-left:6px; text-transform:none; letter-spacing:0; }

  /* MODAL */
  .modal-overlay {
    position:fixed; inset:0;
    background: rgba(20,22,26,0.45);
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:1rem;
    backdrop-filter: blur(6px);
  }
  .modal-box {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 100%; max-height: 90vh; overflow: auto;
    box-shadow: 0 25px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.02);
  }
  .modal-box.wide { max-width: 820px; }
  .modal-box.narrow { max-width: 520px; }
  .modal-box.full {
    max-width: none; width: 100%; height: 100vh; max-height: 100vh;
    border-radius: 0; border: none;
    display: flex; flex-direction: column;
    background: var(--gradient-page);
  }
  .modal-overlay:has(.modal-box.full) { padding: 0; }
  .modal-box.full .modal-header {
    padding: 1.25rem 2rem; flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
  }
  .modal-box.full .modal-body { flex: 1 1 auto; overflow: auto; padding: 2rem 2.5rem; }
  .modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.25rem 1.75rem;
    border-bottom: 1px solid var(--border);
  }
  .modal-header h3 { font-size:1rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
  .modal-body { padding:1.75rem; }

  /* FORM */
  .field { margin-bottom:1.1rem; }
  .field label {
    display:block; font-size:0.68rem; font-weight:600;
    color: var(--muted);
    margin-bottom:6px;
    text-transform:uppercase; letter-spacing:0.08em;
  }
  .field-hint { font-size:0.72rem; color:var(--muted); margin-top:5px; line-height:1.4; }
  .ro-anzeige { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.7rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-weight:400; color:var(--text); min-height:1.2rem; }
  .ro-anzeige .ro-link { margin-left:auto; font-size:0.68rem; font-weight:400; color:var(--accent); font-style:italic; background:none; border:none; cursor:pointer; padding:0; white-space:nowrap; }
  .ro-anzeige .ro-link:hover { text-decoration:underline; }
  .nzk-box { margin-top:0.3rem; }
  .nzk-felder { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0.8rem; margin-top:0.6rem; }
  /* Einheitliche Hervorhebung für situativ erforderliche Felder (Zählerwechsel, Abschluss, neues Mitglied) */
  .field-required input { border:1.5px solid #d68a3c !important; background:rgba(214,138,60,0.06) !important; }
  .field-required label { color:#d68a3c !important; }
  .req-hint { font-size:0.72rem; color:#d68a3c; font-weight:600; margin-top:5px; line-height:1.4; display:flex; align-items:center; gap:4px; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; }
  .grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 1.5rem; }
  .grid-auto .span2 { grid-column: 1/-1; }
  .span2 { grid-column: 1/-1; }

  /* TABLE */
  .tbl { border-collapse: separate; border-spacing: 0; width: 100%; }
  .tbl thead tr {
    background: linear-gradient(180deg, #f4f5f7 0%, #ebedef 100%);
  }
  .tbl th {
    padding:12px 14px; text-align:left;
    color: var(--text-soft);
    font-weight:600; font-size:0.68rem;
    text-transform:uppercase; letter-spacing:0.08em;
    white-space:nowrap;
  }
  .tbl th.r, .tbl td.r { text-align:right; }
  .tbl td {
    padding:11px 14px; font-size:0.88rem;
    border-bottom:1px solid var(--border);
  }
  .tbl tr:last-child td { border-bottom:none; }
  .tbl tbody tr { transition: background .12s; }
  .tbl tbody tr:hover { background: rgba(0,173,239,0.05); }
  .tbl tbody tr:nth-child(even) { background: rgba(0,0,0,0.012); }
  .tbl tbody tr:nth-child(even):hover { background: rgba(0,173,239,0.06); }

  /* TOAST – mittig im Bild, prominent (alle Meldungen gleich auffällig) */
  #toast-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
  .toast {
    padding:16px 28px; border-radius:10px;
    font-size:0.95rem; font-weight:600;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
    min-width:260px; max-width:90vw; text-align:center;
    animation:toast-pop 0.22s ease;
    border-top: 4px solid;
    background: #ffffff;
  }
  .toast-success {
    color: #1f8a4d; border-top-color: #1f8a4d;
  }
  .toast-error {
    color: #b73228; border-top-color: #b73228;
  }
  @keyframes toast-pop {
    from { opacity:0; transform:scale(0.92); }
    to   { opacity:1; transform:scale(1); }
  }

  /* TABS */
  .tabs {
    display:flex; gap:0;
    background: transparent;
    padding: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    width: fit-content;
    margin-bottom: 1.5rem;
  }
  .tab-btn {
    padding: 12px 24px;
    border-radius: 0;
    cursor: pointer; border: none;
    font-weight: 600; font-size: 0.78rem;
    background: transparent;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s;
  }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.active {
    background: transparent;
    color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: none;
  }

  /* FILTER PILLS */
  .filter-pills { display:flex; gap:0.5rem; margin-bottom:1rem; }
  .filter-pill {
    padding: 7px 16px; border-radius: 2px;
    cursor: pointer; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text);
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all .15s;
  }
  .filter-pill:hover { border-color: var(--silver-dark); }
  .filter-pill.active {
    background: var(--gradient-accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,173,239,0.25);
  }

  /* Kontoauszug Schritt 7 — dynamische Filterleiste + Ad-hoc-Summe */
  /* Suchzeile: eigener Block im Card-Look (passend zur Tabelle darunter), Suchfeld volle Breite. */
  .kf-suchzeile { background:var(--gradient-card); border:1px solid var(--border); border-radius:6px;
    box-shadow:var(--shadow-card); padding:0.75rem; margin-bottom:0.6rem; }
  .kf-suche { display:block; width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--border-strong);
    border-radius:6px; background:var(--input); color:var(--text); font-size:0.9rem; }
  /* Filterleiste: ebenfalls im Card-Look, damit sie sich vom grauen Grund absetzt (wie die Tabelle). */
  .kf-bar { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-bottom:0.75rem;
    background:var(--gradient-card); border:1px solid var(--border); border-radius:6px;
    box-shadow:var(--shadow-card); padding:0.75rem; }
  .kf-sel { padding:7px 10px; border:1px solid var(--border-strong); border-radius:6px;
    background:var(--input); color:var(--text); font-size:0.8rem; }
  .kf-date { padding:6px 8px; border:1px solid var(--border-strong); border-radius:6px;
    background:var(--input); color:var(--text); font-size:0.8rem; }
  .kf-datelabel { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
  .kf-suche:focus, .kf-sel:focus, .kf-date:focus { outline:none; border-color:var(--accent); }
  /* Aufklappbarer Detailfilter: Toggle-Button dezent, Chevron dreht sich, Punkt zeigt aktive versteckte Filter. */
  .kf-toggle-zeile { margin-bottom:0.6rem; }
  .kf-toggle { display:inline-flex; align-items:center; gap:0.4rem; padding:6px 12px; cursor:pointer;
    background:var(--gradient-card); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow-card);
    color:var(--text); font-size:0.82rem; font-weight:600; }
  .kf-toggle:hover { border-color:var(--border-strong); }
  .kf-toggle-chevron { display:inline-flex; transition:transform .2s ease; color:var(--muted); }
  .kf-toggle.offen .kf-toggle-chevron { transform:rotate(180deg); }
  .kf-toggle-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; margin-left:2px; }
  .kf-summe { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:baseline; margin-bottom:0.75rem;
    padding:10px 14px; background:var(--surface); border:1px solid var(--border-strong);
    border-left:3px solid var(--accent); border-radius:2px; font-size:0.85rem; }
  .kf-summe-anz { font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-size:0.72rem; }
  .kf-summe-teil { font-weight:600; }
  .kf-summe-netto { font-weight:700; margin-left:auto; }

  /* Benutzerverwaltung (Rollen-Badges, Status) */
  .rollen-badge { display:inline-block; padding:2px 9px; border-radius:2px; font-size:0.7rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
  .rb-gold   { background:#fdf0d0; color:#8a6d00; border:1px solid #e6c65c; }
  .rb-silber { background:#eceff1; color:#516170; border:1px solid #b8c2cc; }
  .rb-bronze { background:#f3e3d6; color:#8a5a33; border:1px solid #d6a982; }
  .status-ok  { color:var(--accent); font-weight:600; }
  .status-off { color:var(--muted); font-weight:600; }
  .row-inaktiv { opacity:0.55; }
  .benutzer-actions { display:flex; gap:0.4rem; align-items:center; justify-content:flex-end; flex-wrap:wrap; }

  /* LOGIN */
  #login-screen {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: var(--gradient-page);
  }
  .login-box {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3rem;
    width: 100%; max-width: 420px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    position: relative;
  }
  .login-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }

  /* SETUP */
  #setup-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--gradient-page); padding: 1.5rem;
  }
  .setup-box {
    background: var(--gradient-card);
    border: 1px solid rgba(0,173,239,0.3);
    border-radius: 6px; padding: 2.5rem;
    max-width: 760px; width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,173,239,0.05);
  }
  .sql-block {
    background: #1a1a1a;
    border: 1px solid var(--border-strong);
    border-radius: 4px; padding: 1rem;
    font-size: 0.72rem; overflow: auto;
    color: #a0e6a0; max-height: 280px;
    white-space: pre; font-family: 'Consolas', 'Monaco', monospace;
    position: relative;
  }

  /* TYPOGRAFIE (Mercedes-Stil: aufgeräumt, klar, mit Letter-Spacing) */
  h1, h2, h3 { font-weight: 600; letter-spacing: 0.02em; }
  h2 { text-transform: uppercase; letter-spacing: 0.06em; }

  /* Scrollbar im Mercedes-Stil – schmal und dezent */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 0; border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--silver-dark); background-clip: padding-box; }

  /* STATS GRID */
  .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.25rem; margin-bottom:2rem; }
  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }

  /* SONDERKOSTEN */
  .sk-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }

  /* FULL-WIDTH PAGE (z. B. Mitgliederliste) - normales Seiten-Scrolling */
  .page-full {
    margin: -2rem;            /* kompensiert #main padding */
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .page-full .full-card {
    display: flex;
    flex-direction: column;
  }
  .page-full .full-card-scroll {
    overflow-x: auto;         /* nur horizontal scrollen falls Tabelle zu breit */
  }
  @media(max-width:700px) {
    .page-full { margin: -1rem; padding: .75rem; }
  }

  /* ══════════════════════════════════════════════════════════════
     PHASE 3b/3c — Klassen statt inline-styles (CSP: style-src 'self')
     Ersetzen frühere style="..."-Attribute. Drei Gruppen:
     (1) Utilities – wenige, sehr häufige Einzelzweck-Klassen
     (2) .dyn-* – lesen CSS Custom Properties, die applyDynStyles() per JS
         aus data-sty-Attributen setzt (für echte Laufzeit-Werte/-Farben)
     (3) Komponenten-/Zustandsklassen – benannte UI-Bausteine
     ══════════════════════════════════════════════════════════════ */

  /* (1) UTILITIES */
  .tnum { font-variant-numeric: tabular-nums; }
  .muted { color: var(--muted); }
  .muted-sm { color: var(--muted); font-size: 0.875rem; }
  .nowrap { white-space: nowrap; }
  .tright { text-align: right; }
  .tcenter { text-align: center; }
  .w-full { width: 100%; }
  .row-between { display: flex; justify-content: space-between; align-items: center; }
  .row-center { display: flex; align-items: center; }
  /* Statusfarben als Textfarbe (feste Werte, keine var() nötig) */
  .c-red { color: #e74c3c; }
  .c-orange { color: #d68a3c; }
  .c-green { color: #2ecc71; }
  .c-accent { color: #00ADEF; }
  .ok-green { color: #1a7f37; }
  .fs-08 { font-size: .8rem; }

  /* (2) DYNAMISCHE WERTE via Custom Property (applyDynStyles setzt --c / --bg / --bord) */
  .dyn-color { color: var(--c); }
  .dyn-color-bold { color: var(--c); font-weight: 700; }
  .dyn-bordl { border-left-color: var(--c); }   /* stat-card Akzentkante */
  .dyn-accent-btn { background: var(--c); border-color: var(--c); color: #fff; }
  .dyn-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background: var(--c); }
  /* Mahnstufen-Badge: Hintergrund mit Alpha + Textfarbe aus einem Wert (--c) */
  .dyn-mahn-badge { background: var(--c-bg); color: var(--c); }

  /* (3a) KOMPONENTEN — Dashboard / Listen / Karten */
  .section-label {
    font-size: 0.8rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem;
  }
  .section-label.tight { margin: 1.25rem 0 .75rem; }
  .card-pad { padding: 1.25rem; }
  .list-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; background: var(--surface); border-radius: 6px;
  }
  .list-row.mb { margin-bottom: 6px; }
  .list-row.tight { padding: 6px 8px; }
  .item-title { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; }
  .item-sub { font-size: 0.72rem; color: var(--muted); }
  .item-ico { display: flex; align-items: center; gap: 4px; }
  .empty-hint { text-align: center; color: var(--muted); padding: 2rem; }
  .grid-hint { grid-column: 1/-1; text-align: center; font-size: .78rem; color: var(--muted); padding: 6px; }
  .card-alert-orange { padding: 1.25rem; border-left: 4px solid #d68a3c; }
  .card-alert-red { padding: 1.25rem; border-left: 4px solid #e74c3c; }
  .card-alert-grey { border-left: 3px solid #9e9e9e; }
  .card-grid-280 { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: .5rem; }
  .card-grid-300 { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: .5rem; }
  /* Dashboard-Kostentabelle */
  .kpos-tbl td { padding: 5px 0; font-size: 0.85rem; }
  .kpos-tbl tr.kpos-line { border-bottom: 1px solid var(--border); }
  .kpos-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .kpos-tbl tr.kpos-sum td { padding: 8px 0; font-weight: 700; font-size: inherit; }
  .kpos-tbl tr.kpos-sum td.r { color: var(--accent); }
  .stack-amount { text-align: right; }
  /* Seitentitel (Dashboard u.a.) */
  .page-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
  .page-subtitle { color: var(--muted); font-size: 0.875rem; }
  .mb0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: 4px; }
  .loading-fixed { position: fixed; top: 1rem; right: 1rem; }
  .note-ico { color: #d68a3c; display: inline-block; margin-left: 6px; vertical-align: middle; }

  /* (3b) KOMPONENTEN — Mitglieder-Tabelle / Abrechnung */
  /* Status-Icons in Tabellenzellen (Zählerstand ok/fehlt, Notiz) */
  .cell-ico { display: inline-block; margin-left: 6px; }
  .cell-ico.ok { color: #2ecc71; }
  .cell-ico.warn { color: #e74c3c; }
  .cell-ico.note { color: #d68a3c; }
  /* Archiviert-Badge (grau, fester Wert) */
  .badge-grey { background: #9e9e9e22; color: #888; }
  /* Spaltenbreiten / Tabellen-Mindestbreite */
  .col-220 { width: 220px; }
  .tbl-min-1100 { min-width: 1100px; }
  /* Zellinhalte */
  .name-cell { font-weight: 600; display: flex; align-items: center; }
  .sub-line { font-size: .72rem; color: var(--muted); }
  .sk-line { font-size: .7rem; color: #d68a3c; }
  .strong { font-weight: 700; }
  .strong-accent { font-weight: 700; color: var(--accent); }
  /* Abrechnungs-Kopf (Seitentitel + Periode) */
  .ab-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
  .ab-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; }
  .ab-box { padding: 12px; background: var(--surface); border-radius: 8px; }
  .ab-box-accent { padding: 12px; background: rgba(0,173,239,0.13); border: 1px solid rgba(0,173,239,0.27); border-radius: 8px; }
  .ab-box-label { font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
  .ab-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; }
  .row-gap { display: flex; gap: .75rem; align-items: center; }
  .row-gap-sm { display: flex; gap: 4px; }
  .row-wrap { display: flex; gap: .5rem; flex-wrap: wrap; }
  /* Abrechnungstabelle */
  .ab-tbl-min { min-width: 1100px; }
  /* Höhere Spezifität als .tbl tbody tr:nth-child(even)/:hover, sonst überschreibt
     die Zebra-/Hover-Regel den grauen Summenzeilen-Hintergrund (früher inline gelöst). */
  .tbl tbody tr.ab-sum-row,
  .tbl tbody tr.ab-sum-row:hover { background: var(--surface); border-top: 2px solid var(--border); }
  .ab-sum-row td { padding: 9px 12px; font-variant-numeric: tabular-nums; }
  .pill-margin { margin: .75rem 0 0; }
  .input-search { width: 220px; }
  .mb-15 { margin-bottom: 1.5rem; }
  .mb-1rem { margin-bottom: 1rem; }
  .vz-col { color: #d68a3c; }
  .is-faded { opacity: .4; }

  /* (3c) KOMPONENTEN — Zahlungen / Mahnwesen / Einstellungen */
  /* Alert-Karten mit farbigem Rand + Titel + Zeilenliste */
  .alert-card { padding: 1.25rem; margin-bottom: 1.5rem; }
  .alert-card.bord-orange { border-color: #d68a3c44; }
  .alert-card.bord-accent { border-color: rgba(0,173,239,0.27); }
  .alert-title { font-size: .875rem; font-weight: 700; margin-bottom: 1rem; }
  .alert-title.t-orange { color: #d68a3c; }
  .alert-title.t-accent { color: #00ADEF; }
  .alert-hint { font-size: .78rem; color: var(--muted); margin-bottom: .75rem; }
  /* Zeile in Alert-Karten (etwas größeres Padding/Radius als list-row) */
  .pay-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; background: var(--surface); border-radius: 7px; margin-bottom: 6px;
  }
  .pay-name { font-weight: 600; font-size: .875rem; }
  .pay-meta { color: var(--muted); font-size: .8rem; margin-left: 8px; }
  .pay-actions { display: flex; align-items: center; gap: 10px; }
  .pay-amount { font-weight: 700; }
  .stat3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
  /* Refund-Buttons in Zahlungsliste mit farbigem Rand */
  .btn-refund-accent { color: #00ADEF; border: 1px solid rgba(0,173,239,0.27); }
  .btn-refund-orange { color: #d68a3c; border: 1px solid #d68a3c44; }
  /* Zahlungstabelle: Betrag-Spalte */
  .card-scroll { overflow: auto; }
  .zz-datum { color: var(--muted); white-space: nowrap; }
  /* Zahlungsliste – erweiterte Spalten (Zuordnung, Jahr) */
  th.c, td.c { text-align: center; }
  .zz-jahr { white-space: nowrap; }
  /* Eingang/Ausgang-Badges in der Typ-Spalte einheitlich hoch + mittig */
  .zahlungs-tbl .badge { display: inline-flex; align-items: center; height: 22px; box-sizing: border-box; vertical-align: middle; line-height: 1; }
  /* Zuordnung: schlichter Text, bei Mitgliedern Symbol daneben (keine bunten Badges) */
  .zz-zuord-txt { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; }
  .zz-zuord-txt svg { flex: 0 0 auto; }
  /* Mahnwesen */
  .mahn-flex1 { flex: 1; min-height: 0; overflow: auto; }
  .empty-state { text-align: center; padding: 3rem; color: var(--muted); }
  .empty-state-ico { font-size: 2.5rem; margin-bottom: .5rem; }
  .badge-pad { padding: 6px 12px; }
  .mahn-card { padding: 1rem 1.25rem; margin-bottom: .75rem; }
  .mahn-card.is-overdue { border-color: #e74c3c44; }
  .mahn-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
  .mahn-main { flex: 1; min-width: 240px; }
  .mahn-namerow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .mahn-name { font-weight: 700; font-size: 1rem; }
  .mahn-gr { color: var(--muted); font-size: .8rem; }
  .mahn-meta { font-size: .8rem; color: var(--muted); }
  .mahn-side { display: flex; align-items: center; gap: 1rem; }
  .mahn-amount { font-size: 1.1rem; font-weight: 700; color: #e74c3c; }
  .mahn-amount-lbl { font-size: .72rem; color: var(--muted); }
  .mahn-block-hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }
  .mahn-hist { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
  .mahn-hist-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
  .mahn-hist-row { display: flex; justify-content: space-between; font-size: .82rem; padding: 3px 0; }
  /* Einstellungen */
  .card-pad-lg { padding: 1.5rem; }
  .mt-1rem { margin-top: 1rem; }
  .max-1000 { max-width: 1000px; }
  .max-900 { max-width: 900px; }
  .max-760 { max-width: 760px; }
  .max-680 { max-width: 680px; }
  .max-640 { max-width: 640px; }
  .max-500 { max-width: 500px; }
  .max-480 { max-width: 480px; }
  .max-340 { max-width: 340px; }
  .set-label { font-weight: 600; margin-bottom: .25rem; }
  .set-desc { color: var(--muted); font-size: .85rem; margin-bottom: 1rem; }
  /* Wasserpreis-Berechnungsbox */
  .preis-box { background: var(--surface); padding: 1rem; border-radius: 8px; margin-top: 1rem; margin-bottom: 1rem; font-size: .85rem; }
  .preis-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
  .preis-row.total { font-weight: 700; color: var(--accent); border-top: 1px solid var(--border); padding-top: 4px; margin-bottom: 0; }
  /* Hinweis-/Mahntext-Textareas (Serif, hell) */
  .ta-serif { width: 100%; font-family: Georgia,serif; font-size: .85rem; line-height: 1.6; padding: 10px 12px; background: #fafafa; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
  .field-mt { margin-top: .75rem; }
  /* BCC-Checkbox-Zeile */
  .check-row { display: flex; gap: .6rem; align-items: center; cursor: pointer; margin-bottom: 1rem; }
  .check-auto { width: auto; margin: 0; }
  /* Kostenpositionen-Editor */
  .k-flex2 { flex: 2; }
  .k-flex1 { flex: 1; text-align: right; min-width: 120px; }
  .k-euro { color: var(--muted); font-size: .85rem; white-space: nowrap; }
  .ksum-row { display: flex; justify-content: space-between; padding: .75rem 0; border-top: 1px solid var(--border); margin-bottom: 1rem; }
  /* Mahntext-Editor */
  .mahntext-sticky { position: sticky; top: -1.5rem; background: var(--bg); padding: .75rem 1rem; margin: -1.5rem -1.5rem 1rem; border-bottom: 1px solid var(--border); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .ph-box { background: #f0f7fa; border-left: 3px solid #00ADEF; padding: 12px 14px; border-radius: 4px; margin-bottom: 1.25rem; font-size: .85rem; }
  .ph-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 4px; font-family: monospace; font-size: .78rem; }
  .mahntext-block { margin-bottom: 1.5rem; }
  .mahntext-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
  .mahntext-title { display: flex; align-items: center; gap: 8px; }
  .mahntext-h3 { font-size: 1rem; font-weight: 700; }
  .ta-mahntext { width: 100%; font-family: Georgia,serif; font-size: .85rem; line-height: 1.6; padding: 10px 12px; background: #fafafa; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
  .badge-sm { font-size: .7rem; }
  /* Badge-Default für Mahntext: grau wenn Standard, sonst farbig (Custom Property) */
  .badge-mahntext-default { background: #eee; color: #888; }
  /* Sonderkosten-Liste */
  .sk-empty { font-size: .8rem; color: var(--muted); font-style: italic; padding: 6px 0; }
  .sk-flex3 { flex: 3; }
  .sk-sum-row { text-align: right; font-size: .82rem; font-weight: 700; color: #d68a3c; border-top: 1px solid var(--border); padding-top: 4px; margin-top: .5rem; }

  /* (3d) MODALS */
  /* Modal-Inhalts-Karten (Abschnitte im Mitglied-Modal) */
  .modal-inner { max-width: 1400px; margin: 0 auto; }
  .mcard { padding: 1.5rem; margin-bottom: 1.25rem; }
  .mcard-title { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.25rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
  /* Auswahl-/Options-Box (aktiv/inaktiv) – ersetzt das wiederkehrende blau-getönte Box-Muster */
  .opt-box {
    padding: .75rem 1rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    display: flex; align-items: center; gap: .75rem;
  }
  .opt-box.clickable { cursor: pointer; }
  .opt-box.is-active { background: rgba(0,173,239,0.08); border-color: #00ADEF; }
  /* Margin-Varianten der Box */
  .opt-box.m-15 { margin: 1.5rem 0 .5rem; }
  .opt-box.m-10 { margin: 1rem 0 .5rem; }
  .opt-box.mt-10 { margin-top: 1rem; }
  /* Box ohne flex (enthält selbst Header + Block, z.B. Zählerwechsel) */
  .opt-box.stacked { display: block; }
  .opt-box-head { display: flex; align-items: center; gap: .75rem; }
  /* Inline-Checkbox + Label im Box-Kopf */
  .cb-inline { width: auto; margin: 0; }
  .cb-label { margin: 0; cursor: pointer; font-weight: 600; }
  /* Ausklappbarer Block unter einer Box */
  .opt-block { margin-top: .75rem; }
  .opt-block.mb-1rem { margin-top: 0; margin-bottom: 1rem; }
  .opt-block-hint { font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
  /* Zählerwechsel: zwei Uhren (alt/neu) klar getrennt */
  .zw-uhren { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  @media (max-width: 760px) { .zw-uhren { grid-template-columns: 1fr; } }
  .zw-uhr { border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem .6rem; margin: 0; min-width: 0; background: var(--card); }
  .zw-uhr > legend { font-size: .68rem; font-weight: 600; color: var(--muted); padding: 0 .45rem; text-transform: uppercase; letter-spacing: .08em; }
  .zw-uhr .grid-auto { grid-template-columns: 1fr; gap: .9rem 0; }
  .zw-uhr .field { margin: 0; }
  /* Einheitliche Felddarstellung im Wechsel-Block: KEINE orange Pflicht-Einfärbung (alle gleich),
     die Pflicht-Info bleibt über die req-hint-Zeile erhalten. */
  .zw-uhr .field-required input { border:1px solid var(--border-strong) !important; background:var(--card) !important; }
  .abw-hint { font-size: .78rem; color: var(--muted); padding: .5rem .25rem; }
  /* Abschluss-Infokasten (orange) */
  .abschluss-info { margin-bottom: 1rem; padding: .75rem 1rem; background: rgba(214,138,60,0.08); border: 1px solid #d68a3c55; border-radius: 8px; font-size: .82rem; line-height: 1.5; }
  .abschluss-info ul { margin: .4rem 0 0; padding-left: 1.2rem; }
  .abschluss-sub { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #d68a3c33; display: flex; align-items: center; gap: .5rem; }
  .abschluss-nf-hint { margin-top: .4rem; font-size: .8rem; color: #555; }
  /* Verknüpfungs-Hinweise (Vorgänger/Nachfolger, grün) */
  .link-ok { margin-top: .25rem; font-size: .82rem; color: #1a7f37; display: flex; align-items: center; gap: 6px; }
  .link-ok.mt-6 { margin-top: .6rem; }
  .link-ok a { color: #1a7f37; font-weight: 700; text-decoration: underline; cursor: pointer; }
  .link-warn { margin-top: .6rem; font-size: .82rem; color: #d68a3c; display: flex; align-items: center; gap: 6px; }
  /* disabled-Input mit surface-Hintergrund (Status-Feld) */
  .input-readonly { background: var(--surface); }
  .row-end { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
  /* Allgemeiner Sichtbarkeits-Toggle (ersetzt inline display:none in Modals) */
  .is-hidden { display: none; }
  .sk-list-wrap { max-width: 900px; }
  .ta-notiz { min-height: 80px; resize: vertical; }
  .modal-footer-bar { display: flex; gap: .75rem; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
  .modal-footer-left { display: flex; gap: .5rem; flex-wrap: wrap; }
  .modal-footer-right { display: flex; gap: .75rem; }
  /* Info-Box in schmalen Modals (Mitglied/Soll/Ist-Zusammenfassung) */
  .info-box { background: var(--surface); padding: 1rem; border-radius: 8px; margin-bottom: 1.25rem; }
  .info-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
  .info-row.total { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 700; margin-bottom: 0; }
  .info-val-strong { font-weight: 600; }
  /* Auswahl-Frage-Label über Optionen */
  .opt-question { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; display: block; }
  /* Radio-Options-Box (aktiv/inaktiv) – stärkeres Blau als opt-box */
  .radio-opt { display: flex; gap: .75rem; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: .5rem; }
  .radio-opt.mb-1rem { margin-bottom: 1rem; }
  .radio-opt.is-active { background: rgba(0,173,239,0.13); border-color: #00ADEF; }
  .radio-opt.is-disabled { cursor: not-allowed; opacity: .4; }
  .radio-opt input { width: auto; margin-top: 3px; }
  .radio-opt-title { font-weight: 600; margin-bottom: 2px; }
  .radio-opt-desc { font-size: .78rem; color: var(--muted); }
  .modal-actions-right { display: flex; gap: .75rem; justify-content: flex-end; }
  .z-typ-row { display: flex; gap: .5rem; }
  .z-typ-row .btn { flex: 1; justify-content: center; }
  /* Mahnungstext-Vorschau (details) */
  .mahn-preview { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 8px; }
  .mahn-preview summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: .875rem; background: var(--surface); border-radius: 8px 8px 0 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  .mahn-preview-body { padding: 12px 14px; background: #fafafa; font-family: Georgia,serif; font-size: .85rem; line-height: 1.6; border-radius: 0 0 8px 8px; }
  .mahn-preview-subj { font-weight: 600; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #ddd; color: #666; }
  .pre-wrap { white-space: pre-wrap; }
  .summary-note { font-size: .75rem; color: var(--muted); font-weight: 400; }
  /* Warnhinweis-Box (gelb) */
  .warn-box { background: #fff8e7; border-left: 3px solid #d68a3c; padding: 10px 12px; border-radius: 4px; margin-bottom: 1rem; font-size: .82rem; }
  .mail-abw { color: #00ADEF; font-size: .78rem; }
  .mail-none { color: #e74c3c; font-style: italic; }
  /* Login / Setup */
  .login-logo { margin-bottom: 1.75rem; text-align: center; }
  .login-logo svg { color: var(--muted); }
  .login-h2 { margin-bottom: 1.5rem; font-size: 0.85rem; text-align: center; color: var(--muted); font-weight: 500; }
  .login-error { background: #e74c3c22; border: 1px solid #e74c3c44; border-radius: 7px; padding: 10px 12px; margin-bottom: 1rem; font-size: 0.85rem; color: #e74c3c; }
  .login-error.is-success { background: #27ae6022; border-color: #2ecc7144; color: #2ecc71; }
  .btn-block { width: 100%; justify-content: center; }
  .setup-h2 { color: var(--accent); margin-bottom: 0.5rem; }
  .setup-intro { color: var(--muted); margin-bottom: 1.5rem; font-size: 0.9rem; }
  .setup-steps { color: var(--text); font-size: 0.875rem; line-height: 2; padding-left: 1.25rem; margin-bottom: 1.25rem; }
  .sql-wrap { position: relative; margin-bottom: 1.25rem; }
  .copy-sql-btn { position: absolute; top: 8px; right: 8px; }

  /* (3e) OVERLAYS (Korrektur, Sammelversand, Mail-Vorschau) */
  .ov-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 2rem 1rem; }
  .ov-backdrop.z-lower { z-index: 9998; }
  .ov-dialog { background: var(--bg,#fff); color: var(--text,#222); max-width: 680px; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  .ov-dialog.w720 { max-width: 720px; }
  .ov-dialog.w760 { max-width: 760px; }
  .ov-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border,#e5e5e5); display: flex; justify-content: space-between; align-items: center; }
  .ov-title { font-size: 1.05rem; }
  .ov-x { border: none; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted,#888); line-height: 1; }
  .ov-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
  .ov-body.gap-lg { gap: .75rem; }
  .ov-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--border,#e5e5e5); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
  /* Korrektur-Liste */
  .korr-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--border,#eee); }
  .korr-name { font-weight: 600; }
  .korr-name span { color: var(--muted,#888); font-weight: 400; }
  .korr-adr { font-size: .82rem; word-break: break-all; }
  .korr-adr.ok { color: #1a7f37; }
  .korr-adr.err { color: #e74c3c; }
  .korr-done { font-size: .8rem; color: #1a7f37; white-space: nowrap; }
  .ov-hint { font-size: .9rem; color: var(--muted,#888); }
  /* appConfirm-Dialog (gestaltetes confirm) */
  .ovc-dialog { max-width: 480px; }
  .ov-head-warn { background: rgba(214,138,60,0.10); border-bottom-color: rgba(214,138,60,0.30); }
  .ov-head-danger { background: rgba(192,57,43,0.10); border-bottom-color: rgba(192,57,43,0.30); }
  .ovc-ikon { display: inline-flex; vertical-align: -5px; margin-right: 8px; }
  .ov-head-warn .ovc-ikon { color: #d68a3c; }
  .ov-head-danger .ovc-ikon { color: #e74c3c; }
  .ovc-p { margin: 0 0 .5rem; line-height: 1.5; font-size: .92rem; }
  .ovc-p:last-child { margin-bottom: 0; }
  .ovc-list { margin: .25rem 0 .5rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 2px; }
  .ovc-list li { font-size: .88rem; color: var(--text,#222); }
  .ov-list { max-height: 50vh; overflow: auto; border: 1px solid var(--border,#e5e5e5); border-radius: 8px; padding: 0 .75rem; }
  .min0 { min-width: 0; }
  /* Sammelversand */
  .sv-summary { background: var(--surface,#f6f6f6); border-radius: 8px; padding: .75rem 1rem; font-size: .9rem; }
  .sv-check { display: flex; gap: .6rem; align-items: center; font-size: .9rem; cursor: pointer; }
  .sv-skipped { margin-top: .5rem; }
  .sv-skipped summary { cursor: pointer; color: #d68a3c; font-size: .85rem; }
  .sv-skipped-list { font-size: .8rem; color: var(--muted,#888); margin-top: .4rem; max-height: 140px; overflow: auto; }
  .sv-progress { display: none; flex-direction: column; gap: .4rem; }
  .sv-progress.is-shown { display: flex; }
  .sv-barwrap { height: 8px; background: var(--surface,#eee); border-radius: 4px; overflow: hidden; }
  .sv-bar { height: 100%; width: 0; background: #1a7f37; transition: width .2s; }
  .sv-count { font-size: .82rem; color: var(--muted,#888); }
  .sv-log { max-height: 200px; overflow: auto; font-size: .82rem; border: 1px solid var(--border,#e5e5e5); border-radius: 8px; padding: .5rem .75rem; background: #fff; }
  .sv-status { font-size: .88rem; min-height: 1.2em; }
  /* Rollover-Vorschau-Tabelle */
  .rv-tablewrap { max-height: 52vh; overflow: auto; border: 1px solid var(--border,#e5e5e5); border-radius: 8px; }
  .rv-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
  .rv-table thead th { position: sticky; top: 0; background: var(--bg,#fff); border-bottom: 1px solid var(--border,#e5e5e5); padding: .5rem .6rem; text-align: left; font-weight: 600; }
  .rv-table thead th.r { text-align: right; }
  .rv-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--border,#f0f0f0); }
  .rv-table td.r { text-align: right; }
  .rv-table tbody tr:hover { background: rgba(0,0,0,.03); }
  /* Mail-Vorschau */
  .mp-to { font-size: .9rem; }
  .mp-to .err { color: #e74c3c; }
  .mp-subj-label { font-size: .85rem; font-weight: 600; }
  .mp-subj-input { width: 100%; margin-top: .25rem; padding: .5rem .6rem; border: 1px solid var(--border,#ccc); border-radius: 8px; box-sizing: border-box; }
  .mp-att-hint { font-size: .8rem; color: var(--muted,#888); }
  .mp-doc-hint { font-size: .85rem; line-height: 1.45; padding: 12px 14px; border: 1px solid var(--border,#e5e5e5); border-radius: 8px; background: var(--card-bg,#fafafa); margin-top: 4px; }
  .mp-status { font-size: .88rem; min-height: 1.2em; }

  /* Hamburger-Button: standardmäßig versteckt (Desktop). Die Media-Query unten macht ihn auf
     Mobil sichtbar — diese Default-Regel MUSS vor der Media-Query stehen, sonst überschreibt
     sie (gleiche Spezifität, spätere Regel gewinnt) die mobile Sichtbarkeit. */
  .mobnav-toggle { display: none; }

  /* RESPONSIVE */
  @media(max-width:700px) {
    /* Hamburger-Menü: Sidebar wird zum ausfahrbaren Overlay statt dauerhaft Platz zu belegen.
       So gewinnt der Inhalt die volle Bildschirmbreite (wichtig für die mobile Ablesemaske). */
    #sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
      width: 240px; transform: translateX(-100%); transition: transform .25s ease;
      box-shadow: 2px 0 16px rgba(0,0,0,0.18);
    }
    #app.mobnav-open #sidebar { transform: translateX(0); }
    /* eingeklappte 60px-Variante auf Mobil aufheben: im Overlay zeigen wir die volle Sidebar */
    #sidebar.collapsed { width: 240px; }
    #sidebar.collapsed .logo-text,
    #sidebar.collapsed .nav-label,
    #sidebar.collapsed .user-email { display: revert; }
    .logo-text, .nav-label, .user-email { display: revert; }
    /* Backdrop hinter dem Overlay */
    #mobnav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
    #app.mobnav-open #mobnav-backdrop { display: block; }
    /* Hauptbereich nimmt die volle Breite ein */
    #main { padding: 1rem; padding-top: 4rem; min-width: 0; max-width: 100%; }
    /* .page-full hat einen negativen Margin zur Padding-Kompensation — der würde den Inhalt
       aber unter den fixierten Hamburger ziehen. Oben neutralisieren. */
    .page-full { margin-top: 0; }
    /* Hamburger-Button oben links, fix */
    .mobnav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      position: fixed; top: .6rem; left: .6rem; z-index: 998;
      width: 42px; height: 42px; border-radius: 10px;
      background: var(--card, #fff); border: 1px solid var(--border); color: var(--text);
      box-shadow: var(--shadow-card); cursor: pointer;
    }
    .grid2 { grid-template-columns:1fr; }
    .two-col { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    #main, .page, .page-full, .abl-wrap { min-width: 0; max-width: 100%; }
    .card { max-width: 100%; }
    .card-grid-280, .card-grid-300 { grid-template-columns: 1fr; }
    .tbl-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .abl-such-input { min-width: 0; box-sizing: border-box; }
    .abl-treffer-name { min-width: 0; }
    /* Login-Seite mobil: Box nutzt die Breite mit etwas Luft zum Rand, weniger Innenabstand. */
    #login-screen { padding: 1.25rem; box-sizing: border-box; }
    .login-box { padding: 1.75rem 1.5rem; max-width: 100%; }
    .login-logo { margin-bottom: 1.25rem; }
    .login-h2 { margin-bottom: 1.25rem; }
  }
  /* Hamburger-Button nur auf Mobil sichtbar (Default unten vor der Media-Query definiert) */

  /* ==========================================================================
     (Phase 4) CSV-IMPORT-OVERLAY — Kontoauszug importieren
     Nutzt bestehende Tokens (--card/--surface/--border/--green/--orange).
     Nur NEUE Klassen; ov-*, sv-*, is-hidden, input-search existieren bereits.
     ========================================================================== */
  .ov-dialog.w940 { max-width: 1180px; width: 96vw; }

  /* Datei-Auswahl als gut sichtbares Drop-Feld */
  .ci-file {
    display: block; width: 100%; padding: 1.1rem;
    border: 2px dashed var(--border-strong, #c4c8cc); border-radius: 10px;
    background: var(--surface, #f0f1f3); cursor: pointer; font: inherit; color: var(--text, #1a1a1a);
  }
  .ci-file:hover { border-color: var(--accent, #00ADEF); }

  /* Scrollbare Vorschau-Tabelle, damit lange Listen den Dialog nicht sprengen */
  .ci-tablewrap {
    max-height: 52vh; overflow-y: auto;
    border: 1px solid var(--border, #dcdfe2); border-radius: 8px;
  }
  .ci-tbl { width: 100%; font-size: .8rem; border-collapse: collapse; }
  .ci-tbl th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-strong, #e6e8ea); text-align: left; padding: .4rem .55rem;
  }
  .ci-tbl td { padding: .35rem .55rem; border-top: 1px solid var(--border, #dcdfe2); vertical-align: top; }
  .ci-tbl td.r, .ci-tbl th.r { text-align: right; }

  /* Verwendungszweck/Zahler gekürzt mit Ellipse (voller Text per title-Tooltip) */
  /* Verwendungszweck: vollständig lesbar (umbrechen), bekommt den meisten Platz */
  .ci-vz { min-width: 320px; max-width: 520px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  /* Zahler kompakt mit Ellipse (voller Text per title-Tooltip) */
  .ci-zahler { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Zeilen-Status: zugeordnet (grün), offen (orange), Ausgang (neutral) */
  .ci-tbl tr.ci-ok    td { background: rgba(31, 138, 77, 0.10); }
  .ci-tbl tr.ci-offen td { background: rgba(184, 115, 46, 0.12); }
  .ci-tbl tr.ci-aus   td { background: rgba(0, 0, 0, 0.03); }

  /* Kompaktes Select für die Zuordnung in der Tabelle */
  .input-sm {
    padding: .2rem .4rem; font-size: .75rem; max-width: 230px;
    border: 1px solid var(--border, #dcdfe2); border-radius: 6px;
    background: var(--input, #fff); color: var(--text, #1a1a1a);
  }

  /* Kostenpositionen: Checkbox „umlagefähig" pro Zeile + Hinweis */
  .k-umlage { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted, #6e7378); white-space: nowrap; cursor: pointer; }
  .k-umlage input { cursor: pointer; }
  /* Betrags-Feld einer automatischen Kostenposition (Häkchen „auto"): gesperrt, dezent ausgegraut.
     Der Wert wird aus den zugeordneten Buchungen der Periode berechnet und beim Speichern festgeschrieben. */
  .k-auto-locked { background: var(--surface-strong, #e6e8ea); color: var(--muted, #6e7378); border-color: var(--border, #dcdfe2); cursor: not-allowed; font-style: italic; }
  .k-hint { font-size: .82rem; line-height: 1.4; }

  /* Zwei zusammengehörige Summenzeilen (gesamt + umlagefähig) ohne Doppellinie */
  .ksum-row-top { margin-bottom: 0; padding-bottom: .25rem; }
  .ksum-row-sub { border-top: 0; padding-top: .25rem; margin-bottom: 1rem; }
  .ksum-warnung { background: #fff7ed; border: 1px solid #d68a3c; border-left: 4px solid #d68a3c; border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1rem; font-size: .88rem; line-height: 1.5; color: #7a4a1a; }
  .ksum-warnung strong { color: #8a3c0c; }

  /* Jahr-Auswahl in der Import-Vorschau (deaktiviert = gedämpft) */
  .ci-jahr { max-width: 96px; }
  .ci-jahr:disabled { opacity: .4; cursor: not-allowed; }

  /* Import-Vorschau: Filter-Leiste (Suche + Status- + Richtungsfilter) */
  .ci-filterbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .25rem 0 .5rem; }
  .ci-search { flex: 1 1 280px; min-width: 220px; }
  .ci-filtergroup { display: inline-flex; gap: 4px; }
  .ci-fbtn {
    padding: 5px 12px; border-radius: 2px; cursor: pointer;
    border: 1px solid var(--border-strong, #c4c8cc);
    background: var(--surface, #f0f1f3); color: var(--text, #1a1a1a);
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    transition: all .15s;
  }
  .ci-fbtn:hover { border-color: var(--silver-dark, #9aa0a6); }
  .ci-fbtn.is-active {
    background: var(--gradient-accent, #00ADEF); color: #fff;
    border-color: var(--accent, #00ADEF); box-shadow: 0 2px 8px rgba(0,173,239,0.25);
  }
  .ci-filterinfo { font-size: .75rem; color: var(--muted, #6e7378); margin-bottom: .4rem; }

/* ── Revisionssicherer Kontoauszug: Endsaldo-Kontrolle ───────────────── */
.saldo-kontrolle { margin-top: 12px; max-width: 480px; margin-left: auto; }
.saldo-zeile { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.saldo-zeile.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 600; font-size: 1.05em; }
.saldo-hint { margin-top: 8px; font-size: 0.85em; line-height: 1.4; }

/* ── Buchung-Bearbeiten-Modal (nachträgliche Zuordnung, Weg B) ───────── */
.buchung-info { background: var(--surface); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.buchung-info .saldo-zeile { padding: 3px 0; gap: 12px; }
.buchung-info .saldo-zeile span:last-child { text-align: right; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.bu-edit-hint { font-size: 12px; margin-bottom: 10px; }

/* ── Mehrjahr-Ansicht STUFE 2: Schreibschutz alter Abrechnungsjahre ───── */
/* Banner oben im Hauptbereich, wenn ein abgeschlossenes Jahr betrachtet wird. */
.readonly-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-strong, #e6e8ea);
  border: 1px solid var(--orange, #b8732e);
  border-left: 4px solid var(--orange, #b8732e);
  color: var(--text, #1a1a1a);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 0.9rem; line-height: 1.35;
}
.readonly-banner svg { flex: 0 0 auto; color: var(--orange, #b8732e); }
.readonly-banner span { font-weight: 500; }
/* Deaktivierte Schreib-Buttons im Nur-Ansicht-Modus: sichtbar gesperrt, einheitlich. */
.btn.ro-disabled, button.ro-disabled {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4);
  pointer-events: auto; /* erlaubt Tooltip-Anzeige trotz disabled */
}

/* ── Mobile Ablesemaske ─────────────────────────────────────────────── */
.abl-wrap { max-width: 560px; margin: 0 auto; width: 100%; min-width: 0; }
.abl-fortschritt { display: flex; flex-direction: column; gap: .6rem; }
.abl-fort-zahlen { display: flex; align-items: baseline; gap: .6rem; }
.abl-fort-gross { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.abl-fort-sub { font-size: .9rem; color: var(--text-soft); }
.abl-bar { height: 8px; background: var(--bg-deep); border-radius: 99px; overflow: hidden; }
.abl-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.dyn-abl-bar { width: var(--abl-bar-w, 0%); }
.abl-such { margin-top: 1rem; width: 100%; box-sizing: border-box; }
.abl-such-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .5rem; color: var(--text-soft); }
.abl-such-row { display: flex; gap: .5rem; }
.abl-such-input { display: block; width: 100%; box-sizing: border-box; padding: .8rem .9rem; font-size: 1.15rem; border: 1px solid var(--border-strong); border-radius: 10px; }
.abl-such-btn { white-space: nowrap; }
.abl-such-hint { font-size: .85rem; color: #c0392b; margin-top: .5rem; min-height: 1.1em; }
.abl-maske { margin-top: 1rem; }
.abl-maske-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.abl-m-name { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.abl-m-gs { font-size: .95rem; color: var(--text-soft); margin-top: .15rem; }
.abl-feld { margin-bottom: 1.1rem; }
.abl-feld label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; color: var(--text-soft); }
.abl-input { width: 100%; padding: .8rem .9rem; font-size: 1.1rem; border: 1px solid var(--border-strong); border-radius: 10px; box-sizing: border-box; }
.abl-input-gross { font-size: 1.6rem; font-weight: 600; text-align: center; letter-spacing: .02em; }
.abl-input-ro { background: var(--bg-deep); color: var(--text-soft); }
.abl-textarea { font-size: 1rem; resize: vertical; font-family: inherit; }
.abl-feld-hint { font-size: .82rem; color: var(--text-soft); margin-top: .35rem; line-height: 1.4; }
.abl-warn { font-size: .88rem; line-height: 1.45; margin-top: .5rem; padding: .6rem .75rem; background: #fff7ed; border: 1px solid #d68a3c; border-left: 3px solid #d68a3c; border-radius: 8px; color: #7a4a1a; }
.abl-neben-hinweis { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; padding: .9rem 1rem; background: var(--bg-deep); border-radius: 10px; color: var(--text-soft); }
.abl-neben-hinweis svg { flex-shrink: 0; margin-top: .1rem; }
.abl-maske-fuss { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }

/* Zaehlertausch-Weiche + gefuehrte Wechselbloecke (alte/neue Uhr). Bewusst schlicht wie .abl-feld:
   KEIN width:100% / overflow / overflow-wrap - diese liessen die Box-Breite kollabieren, sodass der
   Titel zeichenweise senkrecht umbrach. Block-Elemente fuellen die Elternbreite ohnehin. */
.abl-weiche { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; margin-bottom: 1rem; }
.abl-weiche-label { display: block; font-weight: 600; cursor: pointer; line-height: 1.45; }
.abl-weiche-cb { float: left; margin: .2rem .55rem 0 0; width: 18px; height: 18px; cursor: pointer; }
.abl-weiche-ok { display: flex; gap: .6rem; align-items: flex-start; background: #eafaf0; border-color: #2e9e5b; }
.abl-weiche-ok svg { color: #2e9e5b; flex-shrink: 0; margin-top: .1rem; }
.abl-weiche-warten { display: flex; gap: .6rem; align-items: flex-start; background: #fff6e9; border-color: #d68a3c; }
.abl-weiche-warten svg { color: #d68a3c; flex-shrink: 0; margin-top: .1rem; }
.abl-weiche-stark { font-weight: 700; margin-bottom: .2rem; }
.abl-wechselblock { border: 1px solid var(--accent); border-radius: 10px; padding: .9rem; margin-bottom: 1rem; background: #fffdf9; }
.abl-wechsel-titel { font-size: 1.05rem; font-weight: 700; color: var(--accent); margin-bottom: .35rem; }
.abl-wechsel-intro { margin-bottom: .8rem; }

.abl-offen-titel { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.abl-offen-sub { font-size: .88rem; color: var(--text-soft); margin-bottom: .9rem; }
.abl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.abl-chip { padding: .55rem .9rem; font-size: 1.05rem; font-weight: 600; background: #fff; border: 1px solid var(--border-strong); border-radius: 99px; cursor: pointer; color: var(--text); transition: all .15s; }
.abl-chip:hover, .abl-chip:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.abl-offen-leer { display: flex; flex-direction: column; align-items: center; gap: .8rem; color: #2e9e5b; padding: 2rem 1rem; }
.abl-leer-text { font-size: 1.05rem; font-weight: 600; }
@media (min-width: 640px) {
  .abl-input-gross { font-size: 1.8rem; }
}

/* Zählerwechsel-Bereich (Vorstand bestätigt gemeldete Wechsel) */
.zw-kopf { margin-bottom: 1.2rem; }
.zw-titel { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
.zw-liste { display: flex; flex-direction: column; gap: 1rem; }
.zw-karte { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.zw-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.zw-name { font-size: 1.1rem; font-weight: 700; }
.zw-gs { font-size: .85rem; color: var(--text-soft); }
.zw-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem 1.2rem; }
.zw-wert { display: flex; flex-direction: column; gap: .15rem; }
.zw-label { font-size: .78rem; color: var(--text-soft); }
.zw-val { font-size: 1rem; font-weight: 600; }
.zw-notiz { margin-top: .8rem; font-size: .88rem; color: var(--text-soft); font-style: italic; }
.zw-karte-fuss { margin-top: 1rem; display: flex; justify-content: flex-end; }
.zw-hint-ro { font-size: .85rem; color: var(--text-soft); }
.zw-leer { color: var(--text-soft); }

/* ── Zähler-Bereich (Zählerdatenbank) ───────────────────────────────── */
.z-kopf { margin-bottom: 1.2rem; }
.z-titel { margin: 0 0 .2rem; }
.z-ro-hinweis { color: var(--muted); font-size: .85rem; margin-bottom: .9rem; }
.z-liste { display: flex; flex-direction: column; gap: 1rem; }
.z-karte { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.z-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.z-mname { font-weight: 700; }
.z-mname-link { background:none; border:none; padding:0; cursor:pointer; color:var(--text); font-size:inherit; font-family:inherit; text-align:left; }
.z-mname-link:hover { color:var(--accent); text-decoration:underline; }
.z-mgs { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.z-karte-koerper { display: flex; flex-direction: column; gap: .5rem; }
.z-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .55rem .7rem; border-radius: 8px; background: var(--bg-soft, #f7f8f9); }
.z-aktiv { border-left: 3px solid var(--green); }
.z-historisch { opacity: .82; }
.z-zeile-haupt { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; flex: 1 1 auto; }
.z-nr { font-weight: 600; font-variant-numeric: tabular-nums; }
.z-zeile-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--muted); width: 100%; }
.z-notiz { font-style: italic; }
.z-zeile-akt { margin-left: auto; }
.z-edit { background: none; border: none; color: var(--muted); cursor: pointer; padding: .2rem; border-radius: 6px; }
.z-edit:hover { color: var(--accent); background: rgba(0,0,0,0.05); }
.z-eich { font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.eich-ok { background: rgba(39,174,96,0.12); color: var(--green); }
.eich-orange { background: rgba(184,115,46,0.14); color: var(--orange); }
.eich-rot { background: rgba(183,50,40,0.14); color: var(--red); }
.eich-leer { background: rgba(0,0,0,0.05); color: var(--muted); }
.z-kein-aktiv { font-size: .85rem; color: var(--orange); padding: .4rem .2rem; }
.z-historie { margin-top: .3rem; }
.z-historie summary { font-size: .82rem; color: var(--muted); cursor: pointer; padding: .3rem 0; }
.z-historie summary:hover { color: var(--text); }
.z-leer { color: var(--text-soft); }
.z-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.z-suchzeile { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.z-suchzeile .input-search { flex: 1 1 auto; }
.z-count { font-size: .82rem; color: var(--muted); white-space: nowrap; }

/* ── Einheitlicher ×-Button zum Leeren in allen Suchfeldern ───────────── */
.search-wrap { position: relative; display: inline-flex; align-items: center; }
/* Der Wrapper erbt die Flex-Breite, falls das Feld vorher ein Flex-Child war (z. B. Zähler-Suchzeile). */
.z-suchzeile .search-wrap { flex: 1 1 auto; }
/* Ablesemaske: der JS-erzeugte search-wrap (inline-flex) machte das Suchfeld nur inhaltsbreit → volle Kartenbreite erzwingen. */
.abl-such .search-wrap { display: flex; width: 100%; }
/* Kontoverwaltung-Suchzeile: gleicher Fall (JS-Wrapper inline-flex) → volle Breite. */
.kf-suchzeile .search-wrap { display: flex; width: 100%; }
.search-wrap > input { width: 100%; padding-right: 30px; }
/* Browsereigenes ×-Icon von type="search" unterdrücken – wir nutzen unseren eigenen Button. */
.search-wrap > input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 0;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  font-size: 1.05rem; color: var(--muted); border-radius: 50%;
  display: none;
}
.search-wrap.has-text .search-clear { display: block; }
.search-clear:hover { background: rgba(0,0,0,0.08); color: var(--text); }
.zwm-kopf { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.zwm-info { font-size: .9rem; color: var(--text-soft); margin-bottom: 1rem; }
.zwm-sektion { font-size: .95rem; font-weight: 700; color: var(--accent); margin: 1.1rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.zwm-fotos-label { font-size: .82rem; color: var(--text-soft); margin: .6rem 0 .4rem; }
.zwm-fotos { display: flex; flex-wrap: wrap; gap: .5rem; }
.zwm-foto-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: transform .1s; }
.zwm-foto-thumb:hover { transform: scale(1.05); }
.zwm-fotos-leer, .zwm-fotos-lade { font-size: .82rem; color: var(--text-soft); }

/* Ablese-Suche: Live-Trefferliste */
.abl-treffer { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; max-height: 50vh; overflow-y: auto; }
.abl-treffer-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .85rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.abl-treffer-row:hover, .abl-treffer-row:active { background: var(--bg-deep); border-color: var(--border-strong); }
.abl-treffer-gs { font-size: 1.1rem; font-weight: 700; color: var(--text); min-width: 3.2rem; }
.abl-treffer-name { flex: 1; font-size: .95rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abl-treffer-status { flex-shrink: 0; }
.abl-treffer-fertig { opacity: .62; }
.abl-treffer-leer { padding: 1rem; font-size: .92rem; color: #2e9e5b; display: flex; align-items: center; gap: .5rem; justify-content: center; }
.abl-treffer-keine { color: var(--text-soft); }

/* Ablesemaske auf dem Handy kompakter: kleinere Schriften + engere Abstände, damit mehr auf den
   Schirm passt und nichts „zu groß" wirkt. WICHTIG: Eingabefelder bleiben bei >=16px (1rem), sonst
   zoomt iOS Safari beim Antippen automatisch hinein. (Andi 25.06.2026) */
@media (max-width: 700px) {
  /* Listenansicht */
  .abl-fort-gross { font-size: 1.2rem; }
  .abl-fort-sub { font-size: .8rem; }
  .abl-fortschritt { gap: .4rem; }
  .abl-such { margin-top: .6rem; }
  .abl-such-label { font-size: .8rem; margin-bottom: .35rem; }
  .abl-such-input { font-size: 1rem; padding: .6rem .7rem; }   /* 1rem = 16px → kein iOS-Auto-Zoom */
  .abl-treffer { margin-top: .5rem; gap: .3rem; max-height: 60vh; }
  .abl-treffer-row { padding: .55rem .65rem; gap: .55rem; }
  .abl-treffer-gs { font-size: .98rem; min-width: 2.8rem; }
  .abl-treffer-name { font-size: .85rem; }
  /* Eingabemaske (einzelnes Grundstück) */
  .abl-maske-kopf { margin-bottom: .75rem; padding-bottom: .75rem; gap: .6rem; }
  .abl-m-name { font-size: 1.05rem; }
  .abl-m-gs { font-size: .85rem; }
  .abl-feld label { font-size: .82rem; margin-bottom: .3rem; }
  .abl-input { font-size: 1rem; padding: .6rem .7rem; }        /* 1rem = 16px → kein iOS-Auto-Zoom */
  .abl-input-gross { font-size: 1.25rem; }
  .abl-feld-hint { font-size: .76rem; }
  .abl-warn { font-size: .82rem; padding: .5rem .6rem; }
  .abl-maske-fuss { margin-top: 1rem; }
  .abl-tastatur-platz { height: 0; transition: height .15s; }
  .abl-tastatur-platz.aktiv { height: 45vh; }
  .abl-chip { font-size: .95rem; padding: .45rem .75rem; }
  /* card-pad in der Ablesung etwas reduzieren, spart Randbreite */
  .abl-wrap .card-pad { padding: .9rem; }
}

/* Dashboard-Kachel „Hinweise aus der Ablesung" */
.card-alert-blue { padding: 1.25rem; border-left: 4px solid #00ADEF; }
.abl-hinw-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.abl-hinw-tabs { display: flex; gap: .35rem; }
.abl-hinw-tab { padding: .35rem .75rem; font-size: .82rem; font-weight: 600; border: 1px solid var(--border); background: #fff; border-radius: 99px; cursor: pointer; color: var(--text-soft); }
.abl-hinw-tab.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.abl-hinw-row { align-items: flex-start; gap: .75rem; }
.abl-hinw-info { flex: 1; min-width: 0; }
.abl-hinw-text { font-size: .9rem; color: var(--text); margin-top: .35rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; padding: .4rem .6rem; background: rgba(0,173,239,0.06); border-radius: 6px; }
.abl-hinw-aktionen { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.abl-hinw-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; color: var(--accent-dark); transition: background .12s, border-color .12s; }
.abl-hinw-btn:hover { background: var(--bg-deep); border-color: var(--border-strong); }
.abl-hinw-btn:disabled { opacity: .5; cursor: default; }
.abl-hinw-done-lbl { font-size: .8rem; color: #2e9e5b; font-weight: 600; padding: 0 .3rem; }

/* Ablese-Maske Vollbild (Ansatz A): Zurück-Button oben */
.abl-zurueck { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; color: var(--accent-dark); font-size: .95rem; font-weight: 600; cursor: pointer; padding: .3rem 0; margin-bottom: .75rem; }
.abl-zurueck:hover { color: var(--accent); }

/* Datensicherung-Tab */
.set-divider { height: 1px; background: var(--border); margin: 1.75rem 0; }
.reset-box { border: 1px solid #e74c3c44; background: #e74c3c0a; border-radius: 10px; padding: 1.1rem 1.25rem; margin-top: .5rem; }

/* Ablese-Fotos */
.abl-foto-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.abl-foto-leer, .abl-foto-laden { color: var(--muted); font-size: .85rem; padding: .5rem 0; }
.abl-foto-thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #f3f3f3; }
.abl-foto-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.abl-foto-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.abl-foto-del:hover { background: #e74c3c; }
.abl-foto-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.abl-foto-btn { position: relative; overflow: hidden; cursor: pointer; }
.abl-foto-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.abl-foto-status { font-size: .85rem; margin-top: .4rem; min-height: 1.1em; }
/* Foto-Vollbild-Overlay */
.foto-vollbild { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.foto-vollbild img { max-width: 95%; max-height: 92%; object-fit: contain; border-radius: 6px; }
.foto-vollbild-close { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Foto-Anzeige beim Mitglied */
.mitglied-fotos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.mitglied-foto-thumb { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; }
.mitglied-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ablese-Ausweg-Checkboxen ("nicht gefunden"/"Foto nicht möglich") */
.abl-nichtgefunden { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .82rem; color: var(--muted); cursor: pointer; }
.abl-nichtgefunden input { width: 16px; height: 16px; cursor: pointer; }

/* Eichjahr-Hilfe (aufklappbares Schema in der Ablesemaske) */
.abl-eichhilfe { margin: .5rem 0; border: 1px solid var(--border); border-radius: 8px; background: #fafafa; }
.abl-eichhilfe summary { cursor: pointer; padding: .55rem .8rem; font-size: .85rem; font-weight: 600; color: var(--accent-dark); list-style: none; }
.abl-eichhilfe summary::-webkit-details-marker { display: none; }
.abl-eichhilfe summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; margin-right: .5rem; }
.abl-eichhilfe[open] summary { border-bottom: 1px solid var(--border); }
.abl-eichhilfe-inhalt { padding: .6rem; }
.abl-eichhilfe-svg { width: 100%; height: auto; display: block; }
/* SVG-Textklassen (CSP-konform, keine inline styles) */
.ehs-h { font-size: 14px; font-weight: 600; }
.ehs-t { font-size: 14px; }
.ehs-s { font-size: 12px; }
.ehs-tx { fill: var(--text); }
.ehs-tx2 { fill: var(--muted); }
.ehs-arr { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.ehs-ok-box { fill: #e1f5ee; stroke: #1d9e75; stroke-width: 0.5; }
.ehs-ok-tx { fill: #0f6e56; }
.ehs-ok-tx2 { fill: #1d9e75; }
.ehs-warn-box { fill: #faeeda; stroke: #ba7517; stroke-width: 0.5; }
.ehs-warn-tx { fill: #854f0b; }
.ehs-warn-tx2 { fill: #ba7517; }

/* System-Hinweis-Badges in der Dashboard-Hinweiskachel (getrennt von freier Notiz) */
.abl-hinw-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .15rem; }
.abl-hinw-flag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 10px; }
.abl-hinw-flag.flag-foto { background: #faeeda; color: #854f0b; }
.abl-hinw-flag.flag-eich { background: #faeeda; color: #854f0b; }

/* ── Diagnosezähler-Tab (A3.1) ─────────────────────────────────────────────── */
.diag-intro { margin-bottom: 1rem; }
.diag-intro p { margin: 0; color: var(--text-soft); font-size: 0.9rem; }
.diag-gruppe-titel { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 1rem 0 0.5rem; font-weight: 600; }
.diag-liste { display: flex; flex-direction: column; gap: 0.6rem; }
.diag-karte { background: var(--gradient-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-card); padding: 0.9rem 1rem; }
.diag-karte-kopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.diag-typ { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; }
.diag-typ-haupt { background: var(--accent); color: #fff; }
.diag-typ-zwischen { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.diag-bez { font-weight: 600; color: var(--text); }
.diag-karte-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; font-size: 0.82rem; color: var(--text-soft); }
.diag-karte-notiz { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted); font-style: italic; }
/* Etappe B: Karte klickbar + Detailansicht mit Ablese-Historie */
.diag-karte-klick { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.diag-karte-klick:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover, var(--shadow-card)); }
.diag-detail-back { display: inline-flex; align-items: center; gap: .35rem; background: none; border: none; color: var(--accent); cursor: pointer; font-size: .9rem; padding: .2rem 0; margin-bottom: .6rem; }
.diag-detail-back:hover { text-decoration: underline; }
.diag-detail-kopf { margin-bottom: 1rem; }
.diag-detail-titelzeile { display: flex; align-items: center; gap: .6rem; }
.diag-detail-bez { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.diag-detail-edit { margin-left: auto; }
.diag-detail-meta { margin-top: .5rem; font-size: .82rem; color: var(--text-soft); }
.diag-hist-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diag-hist-tage { color: var(--muted); font-size: .78rem; margin-left: .35rem; }
.diag-hist-leer { color: var(--muted); font-style: italic; }
.diag-neg { color: var(--danger, #c0392b); font-weight: 600; }
/* Etappe B Schritt 3: Sammelmaske (Diagnose-Stände erfassen) */
.diag-intro-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-liste { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 .5rem; }
.ds-row { border: 1px solid var(--border); border-radius: 6px; padding: .6rem .7rem; background: var(--surface); }
.ds-row-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ds-row-bez { font-weight: 600; color: var(--text); }
.ds-row-vor { font-size: .8rem; color: var(--text-soft); margin-left: auto; font-variant-numeric: tabular-nums; }
.ds-row-eingabe { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ds-row-eingabe input { padding: .4rem .55rem; border: 1px solid var(--border-strong); border-radius: 4px; font: inherit; color: var(--text); background: var(--input-bg, #fff); }
.ds-row-eingabe .ds-stand { width: 9.5rem; }
.ds-row-eingabe .ds-notiz { flex: 1 1 8rem; min-width: 6rem; }
.ds-vorschau { font-size: .85rem; color: var(--text-soft); min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.ds-vorschau.ds-erst { font-style: italic; color: var(--muted); }
.ds-vorschau.ds-warn { color: var(--danger, #c0392b); }
.ds-hint { margin-bottom: .6rem; }
/* Etappe C: Schwund-Analyse (Kontrolle 1) */
.sa-picker { display: flex; flex-wrap: wrap; gap: 1rem; margin: .25rem 0 .75rem; }
.sa-picker label { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-soft); }
.sa-picker select { padding: .35rem .5rem; border: 1px solid var(--border-strong); border-radius: 4px; font: inherit; color: var(--text); background: var(--input-bg, #fff); }
.sa-meta { font-size: .82rem; color: var(--text-soft); margin-bottom: .5rem; }
.sa-table tbody tr.sa-sum td { border-top: 1px solid var(--border-strong); font-weight: 600; }
.sa-table tbody tr.sa-schwund td { border-top: 2px solid var(--border-strong); font-weight: 700; }
.sa-warn { margin-top: .6rem; padding: .5rem .7rem; border-left: 3px solid var(--danger, #c0392b); background: var(--danger-bg, rgba(192,57,43,.08)); font-size: .85rem; border-radius: 0 4px 4px 0; }
.sa-legende { margin-top: .7rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.schwund-gruen { color: var(--ok, #2e7d32); font-weight: 600; }
.schwund-gelb  { color: var(--warn, #b8860b); font-weight: 600; }
.schwund-rot   { color: var(--danger, #c0392b); font-weight: 700; }
.sa-anz { color: var(--muted); font-size: .78rem; font-weight: 400; }
.sa-k2-titel { margin-top: 1.5rem; }
.sa-table tbody tr.sa-unassigned td { font-style: italic; color: var(--text-soft); }