:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --border: #e3e6ec;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #2952cc;
  --accent-light: #e5edff;
  --ok: #1f9d55;
  --ok-bg: #e6f5ec;
  --teil: #b7791f;
  --teil-bg: #fff4dd;
  --offen: #c0392b;
  --offen-bg: #fde9e7;
  --ueber: #5a4fcf;
  --ueber-bg: #ece9ff;
  --extra: #0f7e8e;
  --extra-bg: #e3f6f9;
  --warn: #c0392b;
  --warn-bg: #fde9e7;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45;
}

header {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 12px 24px; display: flex; align-items: center; gap: 24px;
}
header h1 { margin: 0; font-size: 18px; }
header h1 a { color: var(--text); text-decoration: none; }
nav { display: flex; gap: 16px; flex: 1; }
nav a {
  color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 6px;
}
nav a:hover { background: var(--accent-light); }
nav a.primary { background: var(--accent); color: #fff; }
nav a.primary:hover { background: #1f3fa6; }

main { padding: 20px 24px 60px; max-width: 1600px; margin: 0 auto; }
footer { padding: 16px 24px; color: var(--muted); }

h2 { margin: 0; font-size: 20px; }
h3 { margin: 0 0 12px; font-size: 16px; }

.toolbar {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar h2 { flex: 1; }

.flashes { padding: 0 24px; }
.flash { padding: 10px 14px; margin-top: 12px; border-radius: 6px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--warn-bg); color: var(--warn); }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  cursor: pointer; font-size: 14px; text-decoration: none;
}
.btn:hover { background: #f0f2f7; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #1f3fa6; }
.btn-danger { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-link { background: none; border: none; color: var(--accent); padding: 0; }
.btn-small { padding: 4px 8px; font-size: 13px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #eee; font-size: 12px;
}
.badge-warn { background: var(--warn-bg); color: var(--warn); text-decoration: none; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }

.empty { color: var(--muted); padding: 40px; text-align: center; background: var(--card); border-radius: 8px; }

/* Card / Forms */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 20px; margin-bottom: 20px;
}
.card label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.card label.inline { display: inline-flex; align-items: center; gap: 8px; }
.card input, .card select, .card textarea {
  display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; color: var(--text); background: #fff; margin-top: 4px;
}
.card input[type=checkbox] { display: inline-block; width: auto; margin: 0; }
.card textarea { resize: vertical; }
.card fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-top: 12px; }
.card legend { padding: 0 6px; color: var(--muted); }
.card .actions { margin-top: 12px; display: flex; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { color: var(--muted); font-size: 13px; }
form.danger { margin-top: 24px; }

.row-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr 2fr auto; gap: 8px; align-items: end;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border);
}
.row-form label { margin: 0; }

/* Lists / Tables */
table.list {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
table.list th, table.list td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.list th { background: #f9fafc; font-weight: 600; font-size: 13px; color: var(--muted); }
table.list tr:last-child td { border-bottom: none; }
table.list tr.muted { opacity: 0.6; }
table.list tr.row-warn { background: #fff8f7; }
table.list tr.row-nk { background: #f0f6ff; }
.badge-nk { background: #dbeafe; color: #1d4ed8; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
table.list td.r, table.list th.r { text-align: right; }
table.list td.nowrap { white-space: nowrap; }
table.list code { font-size: 12px; color: var(--muted); }

.zahlungen .inline-zu { display: flex; gap: 6px; align-items: center; }
.zahlungen .inline-zu select, .zahlungen .inline-zu input {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
}

/* Matrix */
.matrix-wrap { overflow-x: auto; background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
table.matrix {
  border-collapse: collapse; width: 100%; min-width: 800px; font-size: 13px;
}
table.matrix th, table.matrix td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; vertical-align: middle;
}
table.matrix th.month-h { font-weight: 600; color: var(--muted); writing-mode: horizontal-tb; min-width: 64px; }
table.matrix th.sum, table.matrix td.sum { background: #f9fafc; min-width: 90px; text-align: right; padding: 6px 12px; }
table.matrix .saldo { font-weight: 600; }
table.matrix .saldo.neg { color: var(--warn); }
table.matrix .saldo.pos { color: var(--ok); }

.sticky-col {
  position: sticky; left: 0; background: #fff; text-align: left !important;
  min-width: 200px; box-shadow: 1px 0 0 var(--border);
}
.sticky-col a { color: var(--text); text-decoration: none; font-weight: 600; }
.sticky-col a:hover { color: var(--accent); }
.badge-ausgezogen {
  font-size: 10px; color: var(--muted); background: #eee;
  border-radius: 3px; padding: 1px 5px; font-weight: normal;
}
.sticky-col small { color: var(--muted); font-weight: normal; }

.cell { min-width: 70px; }
.cell .ico { font-size: 14px; font-weight: 600; }
.cell .amt { font-size: 11px; color: var(--muted); }
.cell .dt { font-size: 10px; color: var(--muted); }
.cell-ok { background: var(--ok-bg); }
.cell-ok .ico { color: var(--ok); }
.cell-teil { background: var(--teil-bg); }
.cell-teil .ico { color: var(--teil); }
.cell-offen { background: var(--offen-bg); }
.cell-offen .ico { color: var(--offen); }
.cell-ueber { background: var(--ueber-bg); }
.cell-ueber .ico { color: var(--ueber); }
.cell-extra { background: var(--extra-bg); }
.cell-extra .ico { color: var(--extra); }
.cell-now { outline: 2px solid var(--accent); outline-offset: -2px; }
.muted { color: var(--muted) !important; }

table.kondtab input[type=date],
table.kondtab input[type=number],
table.kondtab input[type=text],
table.kondtab input:not([type]) {
  width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: #fff;
}
table.kondtab input[type=number] { text-align: right; }
table.kondtab td { vertical-align: middle; }

.kaution { font-size: 12px; min-width: 110px; }
.kaution > div { font-weight: 600; }
.kaution-ok { background: var(--ok-bg); color: var(--ok); }
.kaution-teil { background: var(--teil-bg); color: var(--teil); }
.kaution-offen { background: var(--offen-bg); color: var(--offen); }
.kaution .ico { font-weight: 700; margin-right: 2px; }

.legend { padding: 12px 0; display: flex; gap: 20px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .ico { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; margin-right: 4px; }

.inline { display: inline; }
form.inline { display: inline; }
.filters { display: flex; gap: 8px; align-items: center; }

/* NK-Abrechnung */
.row-form-6 { grid-template-columns: 1fr 1fr 1fr 1fr 2fr auto; }
table.nktab input[type=number],
table.nktab input[type=text],
table.nktab input[type=date],
table.nktab input:not([type]) {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: #fff;
}
table.nktab input[type=number] { text-align: right; }
table.nktab td { vertical-align: middle; }
.saldo-gut { color: var(--ok); }
.saldo-nach { color: var(--warn); }

/* ============ Mobile / Touch ============ */

/* iOS: inputs/selects mit font-size >=16px → kein Auto-Zoom beim Fokus */
@media (max-width: 1024px) {
  .card input, .card select, .card textarea,
  table.kondtab input, table.nktab input,
  .zahlungen .inline-zu input, .zahlungen .inline-zu select {
    font-size: 16px;
  }
  /* Touch-Targets: min. 44px Hoehe (Apple HIG) */
  .btn, nav a, .card input, .card select, .card textarea {
    min-height: 44px;
  }
  .btn-small { min-height: 32px; }
  /* Wide tables: horizontaler Scroll innerhalb eines Wrappers */
  table.list, table.matrix, table.kondtab, table.nktab {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* Liste/Tabelle: tbody/thead bleiben semantisch korrekt, visuell scrollt der Wrapper */
  table.list thead, table.list tbody,
  table.kondtab thead, table.kondtab tbody,
  table.nktab thead, table.nktab tbody { display: table; width: 100%; }
}

@media (max-width: 800px) {
  header { padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  header h1 { font-size: 17px; }
  nav { flex-wrap: wrap; gap: 6px; width: 100%; }
  nav a { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; flex: 1 1 auto; text-align: center; min-width: 110px; }
  main { padding: 14px 12px 60px; }
  .toolbar { gap: 10px; }
  .toolbar h2 { font-size: 18px; width: 100%; }
  .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .row-form { grid-template-columns: 1fr; }
  .row-form-6 { grid-template-columns: 1fr; }
  .card { padding: 14px; border-radius: 10px; }
  .card label { font-size: 13px; }
  /* Tabellen-Zellen kompakter */
  table.list th, table.list td { padding: 8px 8px; font-size: 13px; }
  table.matrix th, table.matrix td { padding: 4px 6px; }
  /* Tabellen brauchen nicht mehr nowrap auf Mobile-Inhalt, aber Spalte erlauben breit */
  .flashes { padding: 0 12px; }
  footer { padding: 12px 14px; font-size: 12px; }
}

/* Sehr schmal (iPhone Portrait) */
@media (max-width: 480px) {
  header h1 { font-size: 16px; width: 100%; margin-bottom: 4px; }
  nav a { min-width: 0; flex: 1 1 calc(50% - 6px); padding: 12px 6px; font-size: 13px; }
  main { padding: 10px 10px 60px; }
}

/* PWA-Standalone-Mode: native-feel (kein Browser-Chrome) */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
  header { padding-top: max(12px, env(safe-area-inset-top)); }
}