:root {
  --brand:#351c15; --ups:#ffb500; --bg:#f5f6f8; --card:#fff; --line:#e3e6ea;
  --ink:#1d2430; --muted:#6b7280; --ok:#15803d; --okbg:#ecfdf3; --warn:#b45309;
  --warnbg:#fffbeb; --bad:#b91c1c; --badbg:#fef2f2; --accent:#2563eb;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--brand); color:#fff; padding:10px 20px; }
.brand { font-weight:700; font-size:16px; }
.land-switch { display:flex; gap:4px; background:rgba(255,255,255,.12); padding:3px; border-radius:8px; }
.land-switch .land { color:#e9d9c9; padding:4px 12px; border-radius:6px; font-weight:600; font-size:13px; }
.land-switch .land.active { background:var(--ups); color:var(--brand); }
.land-switch .land:hover { text-decoration:none; color:#fff; }
.land-switch .land.active:hover { color:var(--brand); }
.mainnav { display:flex; gap:6px; margin-left:8px; }
.mainnav a { color:#e9d9c9; padding:6px 12px; border-radius:6px; }
.mainnav a.active, .mainnav a:hover { background:rgba(255,255,255,.15); color:#fff; text-decoration:none; }
.userbox { margin-left:auto; color:#e9d9c9; font-size:13px; }
.userbox a { color:var(--ups); }

.container { max-width:1180px; margin:24px auto; padding:0 20px; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:30px 0; }

h1 { font-size:22px; margin:0 0 4px; }
h2 { font-size:16px; margin:26px 0 10px; }
.sub { color:var(--muted); margin:0 0 18px; }
.month-h { font-size:14px; margin:22px 0 8px; padding-bottom:5px;
  border-bottom:2px solid var(--ups); display:inline-block; }
.month-h .muted { font-weight:400; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.card .k { color:var(--muted); font-size:13px; }
.card .v { font-size:26px; font-weight:700; margin-top:4px; }
.card.refund { border-color:#bbf7d0; background:var(--okbg); }
.card.refund .v { color:var(--ok); }
.card.late { border-color:#fde68a; background:var(--warnbg); }
.card.late .v { color:var(--warn); }

table { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px; }
th, td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); }
th { background:#fafbfc; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.badge.ref { background:var(--okbg); color:var(--ok); }
.badge.late { background:var(--warnbg); color:var(--warn); }
.badge.ok { background:#eef2ff; color:#3730a3; }
.badge.open { background:var(--okbg); color:var(--ok); }
.badge.closed { background:var(--badbg); color:var(--bad); }

.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px; }
.btn { display:inline-block; background:var(--ups); color:var(--brand); font-weight:700;
  border:none; padding:9px 16px; border-radius:8px; cursor:pointer; font-size:14px; }
.btn:hover { filter:brightness(.96); text-decoration:none; }
.btn.sec { background:#eef0f3; color:var(--ink); }
input[type=text], input[type=password], input[type=file] {
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; width:100%; }
label { font-size:13px; color:var(--muted); display:block; margin:10px 0 4px; }

.flash { padding:11px 14px; border-radius:9px; margin-bottom:14px; font-size:14px; }
.flash.ok { background:var(--okbg); color:var(--ok); border:1px solid #bbf7d0; }
.flash.err { background:var(--badbg); color:var(--bad); border:1px solid #fecaca; }
.flash.info { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }

.login-wrap { max-width:360px; margin:9vh auto; }
.login-wrap .panel { padding:26px; }
.muted { color:var(--muted); }
.note { font-size:13px; color:var(--muted); background:#fafbfc; border:1px dashed var(--line);
  padding:10px 12px; border-radius:8px; }
.row { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.bar { height:10px; background:#eef0f3; border-radius:999px; overflow:hidden; margin:12px 0 8px; }
.bar > i { display:block; height:100%; width:0; background:var(--ups); transition:width .3s ease; }
.enr-stat { font-size:13px; color:var(--muted); }
.enr-stat b { color:var(--ink); }
.enr-pct { font-weight:700; font-size:16px; margin-top:8px; color:var(--ink); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--line);
  border-top-color:var(--warn); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ---- Dialoge -------------------------------------------------------------
   Ersetzen die Browser-Fenster von confirm(). Aufbau und Verhalten in
   assets/dialog.js. Farben und Rundungen folgen den Karten weiter oben. */
.dlg-hintergrund {
  position:fixed; inset:0; z-index:1000;
  background:rgba(29,36,48,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; transition:opacity .14s ease;
}
.dlg-hintergrund.sichtbar { opacity:1; }

.dlg {
  background:var(--card); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.08);
  width:100%; max-width:440px; padding:22px 24px 18px;
  transform:translateY(8px) scale(.98); transition:transform .14s ease;
}
.dlg-hintergrund.sichtbar .dlg { transform:none; }

.dlg h3 { margin:0 0 8px; font-size:17px; }
.dlg p  { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.5; }
.dlg p strong { color:var(--ink); }

.dlg-knoepfe { display:flex; gap:8px; justify-content:flex-end; }
.dlg-knoepfe .btn { min-width:104px; justify-content:center; }

/* Ein Dialog, dessen Bestätigung etwas Unwiderrufliches tut */
.dlg.warnung  { border-top:4px solid var(--warn); }
.dlg.gefahr   { border-top:4px solid var(--bad); }
.dlg.erfolg   { border-top:4px solid var(--ok); }

.btn.gefahr { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.gefahr:hover { background:#991b1b; border-color:#991b1b; }

/* Anzeige eines erzeugten Passworts */
.dlg-passwort {
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin:0 0 6px;
  font:16px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all; user-select:all;
}
.dlg-passwort .wert { flex:1; }
.dlg-kopiert { color:var(--ok); font-size:13px; height:18px; margin:0 0 12px; }