:root{
  --bg:#f5f7f6; --card:#ffffff; --border:#dde3e0; --text:#1c2422; --muted:#5c6b66;
  --accent:#1d6f4c; --accent-dark:#154f37; --accent-light:#e6f2ec;
  --danger:#b3441f; --danger-light:#fbe9e3;
  --gray:#5c6b66; --gray-light:#eef1ef;
  --amber-bg:#fdf1d6; --amber-fg:#8a6512;
  --shadow: 0 1px 2px rgba(20,30,25,.06), 0 4px 14px rgba(20,30,25,.05);
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121613; --card:#1a201c; --border:#2b332e; --text:#e9efec; --muted:#9aa9a2;
    --accent:#3ea174; --accent-dark:#2c7a56; --accent-light:#1c2c24;
    --danger:#e08a63; --danger-light:#2c1e18;
    --gray:#9aa9a2; --gray-light:#232a26;
    --amber-bg:#3a2f14; --amber-fg:#e0b95c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height:100vh;
}
header{
  position:sticky; top:0; z-index:20; background:var(--accent);
  padding:14px 18px; color:#fff; box-shadow: var(--shadow);
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px;
}
header h1{margin:0; font-size:19px; font-weight:700; letter-spacing:.2px;}
header .sub{font-size:12.5px; opacity:.9;}
header .logout-link{margin-left:auto; color:#fff; font-size:13px; text-decoration:underline; opacity:.9;}
.top-nav{display:flex; gap:4px; margin-left:12px;}
.top-nav a{color:#fff; opacity:.85; text-decoration:none; font-size:13.5px; font-weight:600; padding:6px 10px; border-radius:8px;}
.top-nav a:hover{opacity:1; background:rgba(255,255,255,.12);}
.top-nav a.active{opacity:1; background:rgba(255,255,255,.2);}
@media (max-width:640px){ header{flex-direction:column; align-items:flex-start;} header .logout-link{margin-left:0;} .top-nav{margin-left:0;} }
main{max-width:1180px; margin:0 auto; padding:16px 14px 60px;}

.sync-status{font-size:12px; color:var(--muted); min-height:16px; margin-bottom:8px;}
.sync-status.error{color:var(--danger);}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px;}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow);}
.stat .num{font-size:22px; font-weight:700; color:var(--accent-dark);}
.stat .lbl{font-size:12px; color:var(--muted); margin-top:2px;}

.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;}
.toolbar input[type=search]{
  flex:1; min-width:180px; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:14px;
}
select{padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:13.5px;}
button{
  font-family:inherit; font-size:13.5px; font-weight:600; border-radius:10px; border:1px solid transparent;
  padding:9px 14px; cursor:pointer; transition:.15s;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{background:var(--card); color:var(--text); border-color:var(--border);}
.btn-outline:hover{border-color:var(--accent);}
.btn-danger{background:var(--danger-light); color:var(--danger); border-color:var(--danger-light);}
.btn-danger:hover{filter:brightness(0.95);}
.btn-small{padding:5px 9px; font-size:12px; border-radius:8px;}
.link-danger{background:none; border:none; color:var(--danger); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px 0;}

.table-wrap{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto;}
table{border-collapse:collapse; width:100%; min-width:920px; font-size:13.5px;}
th, td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
th{position:sticky; top:0; background:var(--card); font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); cursor:pointer; user-select:none;}
th:hover{color:var(--accent-dark);}
tbody tr:hover{background:var(--accent-light);}
td.name{font-weight:600;}
td.wrap{white-space:normal;}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--accent-light); color:var(--accent-dark); margin:1px 3px 1px 0;}
.tag.gray{background:var(--gray-light); color:var(--gray);}
.row-actions{display:flex; gap:6px;}
.empty{padding:40px; text-align:center; color:var(--muted);}

.section-heading{display:flex; align-items:center; gap:8px; margin:26px 0 10px;}
.section-heading h2{font-size:15px; margin:0; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.section-heading .count{background:var(--gray-light); color:var(--gray); border-radius:999px; padding:1px 9px; font-size:12px; font-weight:700;}
.section-heading.verstorben .count{background:var(--danger-light); color:var(--danger);}
.section-heading.zuklaeren .count{background:var(--amber-bg); color:var(--amber-fg);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(10,16,13,.5); display:none; align-items:flex-start; justify-content:center;
  padding:20px 14px; z-index:50; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{background:var(--card); border-radius:var(--radius); max-width:640px; width:100%; padding:20px; box-shadow:var(--shadow); margin-top:20px;}
.modal h2{margin:0 0 14px; font-size:17px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.form-grid .full{grid-column:1/-1;}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600;}
input[type=text], input[type=number], input[type=email], input[type=password], textarea{
  width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px; font-family:inherit;
}
textarea{resize:vertical; min-height:44px;}
.checkbox-grid{display:flex; flex-wrap:wrap; gap:6px 16px; padding:8px 2px;}
.checkbox-grid label{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text); font-weight:500; margin:0;}
.checkbox-grid input{width:auto; margin:0;}
.mitgliedschaft-row{display:flex; gap:14px; padding:6px 2px; flex-wrap:wrap;}
.mitgliedschaft-row label{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text); font-weight:500; margin:0;}
.mitgliedschaft-row input{width:auto; margin:0;}
.modal-actions{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap;}
.modal-actions .right{display:flex; gap:8px;}
.hint{font-size:11.5px; color:var(--muted); margin-top:10px;}
footer{text-align:center; color:var(--muted); font-size:12px; padding:20px 0 10px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }

/* Login-Seite */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 28px; max-width:340px; width:100%; text-align:center;}
.login-card h1{margin:0 0 2px; font-size:22px;}
.login-card .sub{color:var(--muted); font-size:13px; margin:0 0 20px;}
.login-card form{text-align:left;}
.login-error{background:var(--danger-light); color:var(--danger); border-radius:8px; padding:8px 10px; font-size:13px; margin-bottom:14px;}

.email-preview{ border:1px solid var(--border); border-radius:10px; background:var(--bg); padding:16px; }
.email-preview-field{ font-size:13px; padding:3px 0; border-bottom:1px solid var(--border); }
.email-preview-field:last-of-type{ border-bottom:none; margin-bottom:10px; }
.email-preview-body{ font-size:14px; line-height:1.6; white-space:pre-wrap; padding-top:10px; }

/* Druckbereich der Rechnungen ist auf dem Bildschirm unsichtbar, nur beim Drucken sichtbar */
#printArea{ display:none; }
@media print{
  #printArea{ display:block; }
}

/* Mutationen (Mitglieder) */
.mutation-box{ background:var(--accent-light); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.mutation-row{ display:grid; grid-template-columns:2fr 1fr; gap:8px; }
.mutation-row select, .mutation-row input{ width:100%; }
.tag.mut-neu{ background:var(--accent-light); color:var(--accent-dark); border:1px solid var(--accent); }
.tag.mut-adr{ background:var(--amber-bg); color:var(--amber-fg); }
.tag.mut-aus{ background:var(--gray-light); color:var(--gray); }
.tag.mut-tot{ background:var(--danger-light); color:var(--danger); }
select.status-inline{ padding:3px 6px; border-radius:8px; font-size:12px; font-weight:600; }
select.status-inline.st-Aktiv{ background:var(--accent-light); color:var(--accent-dark); }
select.status-inline.st-Passiv{ background:var(--gray-light); color:var(--gray); }
select.status-inline.st-Gratis{ background:var(--amber-bg); color:var(--amber-fg); }
@media (max-width:640px){ .mutation-row{ grid-template-columns:1fr; } }

/* Aktionen-Spalte (Bearbeiten/Löschen) bleibt am rechten Rand immer sichtbar,
   auch wenn die Tabelle breiter ist als der Bildschirm. */
th.actions-th{ position:sticky; right:0; top:0; z-index:4; background:var(--card); box-shadow:-8px 0 8px -8px rgba(0,0,0,.25); }
td.actions-cell{ position:sticky; right:0; z-index:2; background:var(--card); box-shadow:-8px 0 8px -8px rgba(0,0,0,.25); white-space:nowrap; }
tbody tr:hover td.actions-cell{ background:var(--accent-light); }
@media (max-width:640px){
  td.actions-cell .row-actions{ flex-direction:column; gap:4px; }
}


/* Ausgabe-Optionen auf den Rechnungsseiten (Betrag 0, Paare, Adressetiketten) */
.opt-box{ padding:14px 16px; margin-bottom:12px; }
.opt{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--text); font-weight:500; margin:5px 0; }
.opt input[type=checkbox], .opt input[type=radio]{ width:auto; margin-top:3px; }
.opt-hint{ color:var(--muted); font-weight:400; font-size:12px; }
.opt-row{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:8px 0 2px; font-size:13.5px; }
.opt-inline{ display:inline-flex; gap:6px; align-items:center; font-size:13.5px; color:var(--text); font-weight:500; margin:0; }
.opt-inline input{ width:auto; }
.label-options{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.label-options label{ font-size:12px; color:var(--muted); margin:0; }
.label-options input[type=number]{ width:96px; padding:7px 8px; }
.label-options select{ max-width:100%; }