/* =============================================================================
   Vereinsabrechnung KGV – Gestaltung
   Teil 1: Designsystem aus dem FinanzCockpit (Themes, Grundlagen, Komponenten)
   Teil 2: Regeln dieser Anwendung (ab „Anwendung“ weiter unten)
   ========================================================================== */

/* =============================================================================
   Design-Basis (aus FinanzCockpit herausgelöst)
   Elf Themes über data-theme auf <html> (ohne Attribut gilt Blaugrau), alle Komponenten nur über Token.
   Umschalten: document.documentElement.setAttribute('data-theme', 'trading-hell')
   ========================================================================== */

/* --- Blaugrau (Standard): gedämpfte Flächen, Akzent Stahlblau */
:root, :root[data-theme="blaugrau"] {
  --bg: #d6dce5;
  --surface: #e3e8ee;
  --surface-2: #d0d7e1;
  --border: #bcc5d2;
  --text: #141821;
  --text-muted: #4a5466;
  --accent: #3f6894;
  --accent-soft: #3f68941f;
  --accent-hover: #34587f;
  --on-accent: #ffffff;
  --negative: #d92d20;
  --focus: #15803d;
  --overlay: #d6dce5ee;
  --radius: 6px;
  --pruef-ok: #15803d;
  --diagramm-1: #3f6894; --diagramm-2: #15803d; --diagramm-3: #9333ea; --diagramm-4: #d92d20;
  --verlauf-1: #52779f; --verlauf-2: #345579; --verlauf-hover-1: #406287; --verlauf-hover-2: #284361;
  --status-offen: #1d4ed8;
}
/* --- Eisblau (id trading-hell): Weiß, Akzent kühles Petrolblau, Grün positiv */
:root[data-theme="trading-hell"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eceff5;
  --border: #dde2ea;
  --text: #141821;
  --text-muted: #596275;
  --accent: #0b78b5;
  --accent-soft: #0b78b51a;
  --accent-hover: #09659a;
  --on-accent: #ffffff;
  --negative: #d92d20;
  --focus: #15803d;
  --overlay: #f4f6faee;
  --radius: 6px;
  --pruef-ok: #15803d;
  --diagramm-1: #0b78b5; --diagramm-2: #15803d; --diagramm-3: #9333ea; --diagramm-4: #d92d20;
  --verlauf-1: #207aac; --verlauf-2: #096294; --verlauf-hover-1: #186ea0; --verlauf-hover-2: #074d75;
  --status-offen: #1d4ed8;
}
/* --- Salbei: gedecktes Graugrün, Akzent Grün */
:root[data-theme="salbei"] {
  --bg: #dfe5dc;
  --surface: #eaefe7;
  --surface-2: #d6ddd2;
  --border: #c2cbbd;
  --text: #1a211b;
  --text-muted: #4c5a4f;
  --accent: #3d7a4f;
  --accent-soft: #3d7a4f1f;
  --accent-hover: #33683f;
  --on-accent: #ffffff;
  --negative: #b83227;
  --focus: #1f6f7a;
  --overlay: #dfe5dcee;
  --radius: 6px;
  --pruef-ok: #2e7d32;
  --diagramm-1: #3d7a4f; --diagramm-2: #1f6f7a; --diagramm-3: #7a5ea8; --diagramm-4: #b83227;
  --verlauf-1: #4c7f5b; --verlauf-2: #326441; --verlauf-hover-1: #3f714b; --verlauf-hover-2: #274f30;
  --status-offen: #1d4ed8;
}
/* --- Sand: warmes Beige, Akzent Terrakotta */
:root[data-theme="sand"] {
  --bg: #e8e1d6;
  --surface: #f1ece4;
  --surface-2: #e0d8cb;
  --border: #cfc5b5;
  --text: #231e17;
  --text-muted: #5e5446;
  --accent: #a84f29;
  --accent-soft: #a84f291f;
  --accent-hover: #8f4222;
  --on-accent: #ffffff;
  --negative: #b42318;
  --focus: #2f7d5b;
  --overlay: #e8e1d6ee;
  --radius: 6px;
  --pruef-ok: #2e7d32;
  --diagramm-1: #a84f29; --diagramm-2: #2f7d5b; --diagramm-3: #6a5fc1; --diagramm-4: #b42318;
  --verlauf-1: #b1613e; --verlauf-2: #8a4122; --verlauf-hover-1: #964d2f; --verlauf-hover-2: #6d321a;
  --status-offen: #1d4ed8;
}
/* --- Graphit (id technisch): Grau mit Orange */
:root[data-theme="technisch"] {
  --bg: #2b2b2b;
  --surface: #333333;
  --surface-2: #3d3d3d;
  --border: #4a4a4a;
  --text: #e8e8e8;
  --text-muted: #9a9a9a;
  --accent: #e08a2c;
  --accent-soft: #e08a2c22;
  --accent-hover: #e49845;
  --on-accent: #1a1a1a;
  --negative: #e2574c;
  --focus: #4fb3a9;
  --overlay: #2b2b2bee;
  --radius: 6px;
  --pruef-ok: #5cb85c;
  --diagramm-1: #e08a2c; --diagramm-2: #4fb3a9; --diagramm-3: #8f95e8; --diagramm-4: #d94f8a;
  --verlauf-1: #e59d4e; --verlauf-2: #ca7c28; --verlauf-hover-1: #e9ad6a; --verlauf-hover-2: #d68f41;
  --status-offen: #60a5fa;
}
/* --- Nachtblau (id trading): fast Schwarz mit Blau, Grün positiv */
:root[data-theme="trading"] {
  --bg: #0b0d12;
  --surface: #12151c;
  --surface-2: #1a1e28;
  --border: #232732;
  --text: #e8eaf0;
  --text-muted: #8b92a5;
  --accent: #2f6feb;
  --accent-soft: #2f6feb22;
  --accent-hover: #2962cf;
  --on-accent: #ffffff;
  --negative: #f0474a;
  --focus: #22c55e;
  --overlay: #0b0d12ee;
  --radius: 6px;
  --pruef-ok: #22c55e;
  --diagramm-1: #2f6feb; --diagramm-2: #22c55e; --diagramm-3: #c084fc; --diagramm-4: #f0474a;
  --verlauf-1: #356de0; --verlauf-2: #1d4fc4; --verlauf-hover-1: #2f66d8; --verlauf-hover-2: #173f9e;
  --status-offen: #60a5fa;
}
/* --- Schiefer: Dunkelblaugrau, Akzent helles Blau */
:root[data-theme="schiefer"] {
  --bg: #1e242c;
  --surface: #262d37;
  --surface-2: #2e3642;
  --border: #3a4350;
  --text: #e6e9ee;
  --text-muted: #9aa5b4;
  --accent: #5b9cf0;
  --accent-soft: #5b9cf026;
  --accent-hover: #74acf3;
  --on-accent: #0b1220;
  --negative: #f06a5f;
  --focus: #4cc38a;
  --overlay: #1e242cee;
  --radius: 6px;
  --pruef-ok: #4cc38a;
  --diagramm-1: #5b9cf0; --diagramm-2: #4cc38a; --diagramm-3: #b58cf0; --diagramm-4: #f06a5f;
  --verlauf-1: #75acf2; --verlauf-2: #528cd8; --verlauf-hover-1: #90bdf5; --verlauf-hover-2: #6da2e4;
  --status-offen: #60a5fa;
}
/* --- Waldgrün: sehr dunkles Grün, Akzent Lindgrün */
:root[data-theme="waldgruen"] {
  --bg: #141c17;
  --surface: #1b241e;
  --surface-2: #232e27;
  --border: #2f3b33;
  --text: #e4ebe5;
  --text-muted: #93a597;
  --accent: #8cc274;
  --accent-soft: #8cc27426;
  --accent-hover: #9ccf85;
  --on-accent: #0f1a0f;
  --negative: #e0675a;
  --focus: #5fc0b0;
  --overlay: #141c17ee;
  --radius: 6px;
  --pruef-ok: #5cb85c;
  --diagramm-1: #8cc274; --diagramm-2: #5fc0b0; --diagramm-3: #c39be0; --diagramm-4: #e0675a;
  --verlauf-1: #9ecc8a; --verlauf-2: #7eaf68; --verlauf-hover-1: #b0d99d; --verlauf-hover-2: #93c37d;
  --status-offen: #60a5fa;
}

/* --- Bonbon: zartes Rosa, Akzent Beere */
:root[data-theme="bonbon"] {
  --bg: #fde8f1;
  --surface: #fff6fa;
  --surface-2: #fbd9e8;
  --border: #f3bcd4;
  --text: #3b1530;
  --text-muted: #8a4a74;
  --accent: #c2187a;
  --accent-soft: #c2187a1f;
  --accent-hover: #a11466;
  --on-accent: #ffffff;
  --negative: #c81e3a;
  --focus: #0b7a5f;
  --overlay: #fde8f1ee;
  --radius: 6px;
  --pruef-ok: #0b7a5f;
  --diagramm-1: #c2187a; --diagramm-2: #0b7a5f; --diagramm-3: #6d28d9; --diagramm-4: #e36414;
  --verlauf-1: #cc2f7d; --verlauf-2: #9b1fd1; --verlauf-hover-1: #c2187a; --verlauf-hover-2: #7a14b0;
  --status-offen: #1d4ed8;
}
/* --- Honig: cremiges Gelb, Akzent Gold */
:root[data-theme="honig"] {
  --bg: #f6ecd0;
  --surface: #fdf7e6;
  --surface-2: #f1e3bb;
  --border: #e2cf98;
  --text: #2b2109;
  --text-muted: #6b5a2a;
  --accent: #a86f00;
  --accent-soft: #c98d0026;
  --accent-hover: #c48a10;
  --on-accent: #1f1400;
  --negative: #b42318;
  --focus: #2f7d32;
  --overlay: #f6ecd0ee;
  --radius: 6px;
  --pruef-ok: #2e7d32;
  --diagramm-1: #c98d00; --diagramm-2: #2f7d32; --diagramm-3: #6a5fc1; --diagramm-4: #b42318;
  --verlauf-1: #f5c451; --verlauf-2: #dc9a1c; --verlauf-hover-1: #f8d06e; --verlauf-hover-2: #e6a830;
  --status-offen: #1d4ed8;
}
/* --- Sonnenuntergang: Pflaumenviolett, Akzent Orange */
:root[data-theme="sonnenuntergang"] {
  --bg: #2a1033;
  --surface: #3a1745;
  --surface-2: #4a1f56;
  --border: #64306f;
  --text: #ffeede;
  --text-muted: #e0b3c4;
  --accent: #ff8a3d;
  --accent-soft: #ff8a3d26;
  --accent-hover: #ffa366;
  --on-accent: #2a0f00;
  --negative: #ff5c7a;
  --focus: #ffd166;
  --overlay: #2a1033ee;
  --radius: 6px;
  --pruef-ok: #7ee081;
  --diagramm-1: #ff8a3d; --diagramm-2: #ffd166; --diagramm-3: #c77dff; --diagramm-4: #ff5c7a;
  --verlauf-1: #ffb347; --verlauf-2: #ff5e62; --verlauf-hover-1: #ffc36b; --verlauf-hover-2: #ff7a7d;
  --status-offen: #60a5fa;
}
/* Sonnenuntergang: Hintergrund als Verlauf */
:root[data-theme="sonnenuntergang"] body { background: linear-gradient(160deg, #3b1240 0%, #2a1033 45%, #1b0b2b 100%); }

/* --- Farbverläufe auf Knöpfen (alle Themes) --------------------------------
   Gefüllte Knöpfe und Umschalter bekommen einen Verlauf statt einer Fläche,
   Farben je Theme oben (--verlauf-1/2, beim Überfahren --verlauf-hover-1/2;
   aus --accent bzw. --accent-hover abgeleitet). Der Rahmen bleibt stehen und
   wird nur transparent; background-origin: border-box zieht den Verlauf unter
   ihn – keine Größenänderung. --on-accent erreicht auf beiden Enden jedes
   Verlaufs mindestens 4,5:1. :root erhöht die Spezifität über die Grundregeln.
   -------------------------------------------------------------------------- */
:root .btn.aktiv, :root .switch-option.aktiv {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(135deg, var(--verlauf-1), var(--verlauf-2)) border-box;
}

:root .btn.aktiv:hover, :root .btn-primary:hover, :root .btn-ghost:not(.btn-gefahr):hover,
:root .switch-option:hover, :root .switch-option.aktiv:hover {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(135deg, var(--verlauf-hover-1), var(--verlauf-hover-2)) border-box;
}

/* =============================================================================
   Grundlagen
   ========================================================================== */

* { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; } /* Seite scrollt nie, nur Bereiche */

body {
  margin: 0;
  /* Kopf, Arbeitsfläche, Fußzeile. Die Kopfhöhe ergibt sich aus dem Inhalt,
     keine fest eingerechneten Pixel. Fehlt die Fußzeile, bleibt die Zeile leer. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 26px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }

/* Scrollbalken passend zum Theme. */
html, .scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
html::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 20px;
  border: 2px solid var(--bg);
}
html::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* Tastaturfokus sichtbar halten (Maus bleibt rahmenlos). */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* =============================================================================
   Layout
   ========================================================================== */

.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 32px;
  border-bottom: 1px solid var(--border);
}
.kopf-aktionen { display: flex; gap: 10px; }

.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0; /* Höhe kommt aus dem Grid des body */
}

.seitenleiste {
  border-right: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  min-height: 0;
}

.inhalt { padding: 24px 32px; overflow-y: auto; min-height: 0; }

.fusszeile {
  margin: 0;
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: right;
}

/* =============================================================================
   Bedienelemente
   ========================================================================== */

.btn {
  appearance: none;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-primary { color: var(--text-muted); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Aktiv behält den Rahmen und färbt ihn nur mit ein. So bleibt die Größe
   gleich, auch bei .btn-icon, und es braucht keinen Padding-Ausgleich. */
.btn.aktiv { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.aktiv:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-icon { padding: 9px; justify-content: center; }

/* Gefüllte Knöpfe werden inaktiv grau statt nur blasser – auch im Trading-Verlauf. */
:root .btn.aktiv:disabled, :root .btn.aktiv:disabled:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 0.6;
}

/* Segmentierter Umschalter. */
.switch { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.switch-option {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.switch-option:not(:last-child) { border-right: 1px solid var(--border); }
.switch-option.aktiv,
.switch-option:hover { background: var(--accent); color: var(--on-accent); }

.chip {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.aktiv { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--focus);
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"],
select {
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 9px;
  flex: 1;
  min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--focus); }
/* Kontrollkästchen: siehe „Kontrollkästchen (alle im Programm)“ weiter unten. */

/* Native Zutaten, die sich sonst nicht ins Design fügen. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
/* Datumsfelder: Symbol in Themefarbe; geöffnet wird der eigene Kalender (app.js), nicht der des Browsers. */
input[type="date"]::-webkit-calendar-picker-indicator {
  pointer-events: none;
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
input[type="date"]:disabled::-webkit-calendar-picker-indicator { opacity: 0.5; }

.kalender {
  position: fixed; z-index: 90; width: 252px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); font-size: 13px; color: var(--text);
}
.kalender[hidden] { display: none; }
.kalender button { font-family: inherit; color: inherit; cursor: pointer; }
.kalender-kopf { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.kalender-kopf span { flex: 1; text-align: center; font-weight: 600; }
.kalender-kopf button {
  width: 28px; height: 28px; border: 1px solid transparent; background: none;
  border-radius: min(var(--radius), 6px); color: var(--text-muted); font-size: 15px; line-height: 1;
}
.kalender-kopf button:hover { border-color: var(--accent); color: var(--text); }
.kalender-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalender-tage span { text-align: center; font-size: 11px; color: var(--text-muted); padding: 2px 0 4px; }
.kalender .tag {
  height: 30px; border: 1px solid transparent; background: none; border-radius: min(var(--radius), 6px);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.kalender .tag:hover { background: var(--surface-2); }
.kalender .tag.fremd { color: var(--text-muted); opacity: 0.6; }
.kalender .tag.heute { border-color: var(--accent); }
.kalender .tag.gewaehlt, .kalender .tag.gewaehlt:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); opacity: 1; }
.kalender-fuss { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.feld-zeile { display: flex; align-items: center; gap: 10px; }
.feld-zeile label { width: 32px; color: var(--text-muted); font-size: 12.5px; }

.hinweis { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin: 0; }
.hinweis ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
#neu-hinweis, #pacht-neu-hinweis { margin-top: 10px; }

/* --- Zahlungseingang (nur in abgeschlossenen Abrechnungen) --------------- */
.parzellen:not(.mit-zahlung) .spalte-bezahlt { display: none; }
.parzellen .spalte-bezahlt { width: 170px; white-space: nowrap; }
.bezahlt-feld { display: flex; align-items: center; gap: 8px; }
.parzellen .bezahlt-feld input[type="checkbox"] { width: 16px; padding: 0; }
.bezahlt-feld input.bezahlt-datum { width: 130px; flex: none; padding: 3px 6px; font-size: 12.5px; }
.chip-bezahlt { cursor: default; font-size: 11px; padding: 2px 8px; }
.chip-bezahlt.offen { border-color: var(--status-offen); color: var(--status-offen); }
.chip-bezahlt.voll { border-color: var(--pruef-ok); color: var(--pruef-ok); }
.jahre td { white-space: nowrap; }
.status-zelle .chip + .chip { margin-left: 6px; } /* Status und „x / y bezahlt“ nebeneinander */
#modal-neu .modal, #modal-pacht-neu .modal { width: 400px; } /* beide Dialoge „Neue Abrechnung“ gleich breit; Platz für „Pachtabrechnung anlegen“ */

/* Luft zwischen Bedienelement und Hinweistext - zentral statt je Element. */
.btn + .hinweis,
.feld-zeile + .hinweis,
input + .hinweis,
select + .hinweis,
.karte + .hinweis,
.hinweis + .btn,
.hinweis + .feld-zeile { margin-top: 14px; }

/* =============================================================================
   Karten, Kennzahlen, Tabellen
   ========================================================================== */

.karte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
}

.karte-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.karte-kopf h3 { flex: 1; font-size: 13px; color: var(--text-muted); }
.karte-unter { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }

/* Verschiebbare Karten: Anfasser statt ganzer Karte. */
.anfasser { cursor: grab; color: var(--text-muted); font-size: 16px; line-height: 1; user-select: none; }
.anfasser:active { cursor: grabbing; }
.karte.wird-gezogen { opacity: 0.4; }
.karte.drop-ziel { border-color: var(--accent); }

.karten-raster { display: flex; flex-wrap: wrap; gap: 16px; }
.karten-raster > .karte { flex: 1 1 calc(50% - 8px); min-width: 380px; }

.stat-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat-box { background: var(--surface-2); border-radius: var(--radius); padding: 10px 14px; }
.stat-box .label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.stat-box .wert { font-size: 18px; font-weight: 600; }
.stat-box .wert.gut { color: var(--focus); }
.stat-box .wert.schlecht { color: var(--negative); }
.stat-box .wert.warn { color: var(--accent); }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
tbody td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
tbody tr:hover { background: var(--surface-2); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Kopfzeile bleibt beim Scrollen stehen. */
.scroll-bereich { flex: 1; min-height: 0; overflow-y: auto; }
.scroll-bereich thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }

/* Balken in Tabellenzellen. */
.balken-huelle {
  display: inline-block;
  width: 100%;
  max-width: 160px;
  height: 10px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.balken { display: block; height: 100%; background: var(--negative); }

/* =============================================================================
   Dialoge, Menüs, Meldungen
   ========================================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 60;
  align-items: center;
  justify-content: center;
}
.modal-overlay.sichtbar { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 360px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 22px;
}
.modal--breit { width: 720px; }

/* Dialoge mit Tabs: feste Höhe, sonst springt das Fenster beim Wechsel. */
.modal--tabs { height: 600px; max-height: 85vh; display: flex; flex-direction: column; overflow-y: hidden; }
.modal--tabs .modal-inhalt { flex: 1; min-height: 0; overflow-y: auto; }

.modal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-schliessen {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-abschnitt { margin-bottom: 24px; }
.modal-abschnitt h3 { font-size: 15px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Kleines Menü an einer Karte (Zahnrad). */
.karten-menu-huelle { position: relative; }
.karten-menu {
  position: absolute;
  top: 28px;
  right: 0;
  z-index: 20;
  min-width: 170px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.karten-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
}
.karten-menu button:hover { background: var(--surface-2); }
.karten-menu button.aktiv { color: var(--accent); font-weight: 600; }

.toast {
  position: fixed;
  z-index: 100; /* auch über offenen Dialogen sichtbar */
  bottom: 24px;
  right: 24px;
  max-width: 320px;
  padding: 12px 18px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.toast.fehler { border-color: var(--negative); }

/* =============================================================================
   Drucken
   ========================================================================== */

@media print {
  /* Ohne diese Zeile endet der Ausdruck nach der ersten Seite. */
  html, body { height: auto !important; overflow: visible !important; }
  body { display: block !important; background: #ffffff !important; } /* auch ohne Verlauf (Sonnenuntergang) */

  /* Seitenhintergründe werden nicht gedruckt - helle Schrift wäre unlesbar. */
  :root, :root[data-theme] {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #111111;
    --text-muted: #444444;
    --border: #bbbbbb;
  }

  .kopf, .seitenleiste, .modal-overlay, .toast, .anfasser, .karten-menu-huelle { display: none !important; }
  .inhalt { overflow: visible !important; padding: 0 !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  tr, .stat-reihe { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
}


/* =============================================================================
   Anwendung: Vereinsabrechnung KGV – eigene Regeln (nur Token, keine festen Farben)
   ========================================================================== */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Kopf: Titel des Bereichs, Trennstrich, Vereinsname; Knöpfe rechts.
   Der Trennstrich steht genau über der Linie der Navigations- bzw. Seitenleiste:
   Spalte 300px (Rand im letzten Pixel) − Kopfabstand links 24px. */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 24px; }
.kopf-links { display: flex; align-items: center; min-width: 0; }
.kopf-links .logo-titel { width: calc(300px - 1px - 24px); flex: none; }
.kopf-verein { font-size: 24px; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; line-height: 1.1; }
.kopf-trenner { width: 1px; height: 26px; flex: none; margin-right: 16px; background: var(--border); }
.kopf-aktionen { justify-self: end; }
.logo-defs { position: absolute; width: 0; height: 0; }

.logo-titel { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.logo-titel[hidden] { display: none; }
.logo-titel .hervor { color: var(--accent); font-style: italic; }
.logo-marke { width: 44px; height: 44px; flex: none; }
.logo-marke .ring { fill: var(--surface-2); stroke: url(#logo-verlauf); stroke-width: 2.6; }
.logo-marke .blitz { fill: var(--accent); stroke: var(--accent); stroke-width: 1; stroke-linejoin: round; }
.logo-marke .m1 { fill: var(--accent); stroke: var(--surface-2); stroke-width: 0.6; }
.logo-marke .m2 { fill: var(--accent-hover); }
.logo-marke .tuer { fill: var(--surface-2); }
.logo-marke .person { stroke: var(--surface-2); stroke-width: 1.4; }
@media (max-width: 1100px) { .kopf-verein, .kopf-trenner { display: none; } }
.kopf-aktionen { align-items: center; flex-wrap: wrap; }
.kopf-aktionen select { flex: none; width: auto; }
/* Info und Einstellungen im Kopf: etwas breiter als quadratisch. */
.kopf-aktionen .btn-icon { padding: 9px 16px; }

.abschnitt { display: flex; flex-direction: column; gap: 10px; }
.abschnitt h2 { color: var(--text); }
.abschnitt { gap: 8px; }
.abschnitt + .abschnitt { padding-top: 12px; border-top: 1px solid var(--border); }
#seitenleiste { gap: 12px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld label { font-size: 12.5px; color: var(--text-muted); }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
.feld-paar--konto { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); margin: 10px 0 12px; }
.feld-paar--oben { margin-top: 0; }
.feld input[type="date"] { min-width: 0; padding-right: 4px; }
.feld input, .feld select { width: 100%; }
.feld input.zahl { text-align: right; }

.inhalt { display: flex; flex-direction: column; gap: 20px; }
.inhalt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inhalt-kopf p { margin: 0; font-size: 12px; color: var(--text-muted); }
.stat-box .zusatz { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.pruefungen { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.pruefungen li { padding-left: 14px; position: relative; }
/* Prüfpunkte: rot = fehlt oder ist nicht korrekt (ohne Klasse und .schlecht),
   grün = in Ordnung (.gut). Rot ist --negative, Grün eigene Farbe je Theme,
   weil --focus nicht in allen Themes grün ist. */
.pruefungen li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--negative); }
.pruefungen li.gut::before { background: var(--pruef-ok); }

.tabelle-huelle { overflow-x: auto; }
.parzellen { min-width: 1160px; }
.parzellen thead th { white-space: nowrap; }
.parzellen thead th { background: var(--surface); }
.parzellen thead th.zahl { text-align: right; }
.parzellen td { vertical-align: middle; }
.parzellen input { width: 100%; padding: 5px 7px; }
.parzellen input.zahl { text-align: right; }
.parzellen input.fehler { border-color: var(--negative); }
.parzellen .nr { width: 70px; white-space: nowrap; }
.parzellen .spalte-name { width: 190px; }
.parzellen .spalte-stand { width: 110px; }
.parzellen .spalte-wechsel { width: 64px; text-align: center; }
.pacht-tabelle .leer, .parzellen td.paechter .leer { color: var(--text-muted); }
.pacht-tabelle .fehler-text { color: var(--negative); }
.pacht-tabelle td { height: 41px; }

/* Zählerwechsel: Knopf ausgegraut ohne Wechsel, rot bei fehlenden oder unstimmigen Ständen. */
.label-mit-knopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wechsel-knopf { padding: 2px 8px; margin: -4px 0; }
.label-mit-knopf .wechsel-knopf { padding: 1px 7px; }
.label-mit-knopf .wechsel-knopf svg { width: 14px; height: 14px; }
.wechsel-knopf:not(.aktiv-wechsel) { opacity: 0.4; }
.wechsel-knopf:not(.aktiv-wechsel):hover, .wechsel-knopf:focus-visible { opacity: 1; }
.wechsel-knopf.fehler { color: var(--negative); border-color: var(--negative); }
.wechsel-info { margin: 0; font-size: 12px; color: var(--text-muted); }
.wechsel-info.schlecht, .w-ergebnis.schlecht { color: var(--negative); }
#modal-wechsel .modal { width: 420px; }
.modal--beendet { width: 440px; padding: 26px 28px; }
.modal--beendet h2 { font-size: 20px; margin-bottom: 14px; }
.modal--beendet p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.modal--beendet .beendet-hinweis { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; opacity: 0.8; }
#modal-wechsel .modal > .feld + .feld-paar { margin-top: 12px; }
#modal-wechsel .modal-unter { margin: -8px 0 14px; }
.w-ergebnis { margin: 14px 0 6px; font-size: 13px; line-height: 1.6; }
.parzellen tr.befreit td { color: var(--text-muted); }
.parzellen tfoot td { padding: 10px 8px 0; font-weight: 600; font-size: 13px; }
.parzellen .betrag { font-weight: 600; color: var(--text); }
.leer { color: var(--text-muted); }
.chip-statisch { cursor: default; margin-left: 6px; }
.chip-statisch:hover { border-color: var(--border); color: var(--text-muted); }

.modal textarea {
  width: 100%; height: 220px; resize: vertical;
  font-family: ui-monospace, monospace; font-size: 11.5px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px;
}
.modal textarea:focus { outline: none; border-color: var(--focus); }
.modal-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.modal p { margin: 0 0 10px; font-size: 13px; }

#druck { display: none; }
[hidden] { display: none !important; }

/* --- Jahresübersicht ----------------------------------------------------- */
/* scrollbar-gutter: Platz für den Scrollbalken ist immer reserviert. Sonst wird der
   Inhalt schmaler, sobald ein Bereich scrollt, und die zentrierten Karten springen
   beim Wechsel zwischen Start, Strom, Pacht und Mitgliedern seitlich. */
.einspaltig { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 24px 32px; }
.einspaltig > .rahmen { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
a.btn { text-decoration: none; }
.zeile-klick { cursor: pointer; }
.zeile-klick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.jahre td.jahr { font-weight: 600; }
.jahre .balken.akzent { background: var(--accent); }
.jahre .spalte-balken { width: 150px; }
/* Jahresübersichten: dezente senkrechte Linien zwischen den Spalten, nur in den Zeilen
   (nicht im Kopf, nicht vor dem Balken) und mit Abstand zu den waagerechten Linien. */
.jahre td + td:not(.spalte-balken) {
  background-image: linear-gradient(var(--border), var(--border));
  background-size: 1px calc(100% - 14px);
  background-position: left center;
  background-repeat: no-repeat;
}
.karte thead th { background: var(--surface); }
.vergleich { min-width: 640px; }
.vergleich thead th.zahl { text-align: right; }
.vergleich .aenderung.hoeher { color: var(--negative); }
.vergleich .aenderung.niedriger { color: var(--focus); }
.leerzustand { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.leerzustand p { margin: 0; color: var(--text-muted); max-width: 460px; }

.chip-status { cursor: default; font-size: 11px; padding: 2px 8px; }
.chip-status:hover { border-color: var(--border); color: var(--text-muted); }
/* Pillen: Blau = offen (in Arbeit, Zahlungen offen), Grün = erledigt – in allen Designs gleich */
.chip-status.abgeschlossen, .chip-status.abgeschlossen:hover { border-color: var(--pruef-ok); color: var(--pruef-ok); }
.chip-status.entwurf, .chip-status.entwurf:hover { border-color: var(--status-offen); color: var(--status-offen); }

/* --- Einstellungen ------------------------------------------------------ */
/* Schmaler Dialog mit fester Höhe; nur der Inhalt scrollt. */
.modal--einstellungen { width: 400px; height: min(640px, 85vh); display: flex; flex-direction: column; overflow: hidden; }
.modal--einstellungen .modal-kopf h2 { font-size: 18px; }
.modal--einstellungen .modal-inhalt { flex: 1; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; }
.modal--einstellungen .modal-abschnitt:last-child { margin-bottom: 4px; }
.modal-abschnitt .hinweis { margin-top: 10px; overflow-wrap: anywhere; }

.knopf-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knopf-paar .btn { justify-content: center; }
.knopf-voll { width: 100%; justify-content: center; }
/* Bestätigung liegt über dem Einstellungsdialog. */
#modal-daten-loeschen, #modal-wiederherstellen, #modal-beenden-frage { z-index: 70; }
#modal-beenden-frage .modal { width: 440px; } /* drei Knöpfe in einer Reihe */
#modal-beenden-frage .modal-kopf h2 { font-size: 18px; }
#beenden-frage-text span { display: block; margin-bottom: 0.75em; } /* halbe Leerzeile zwischen den Sätzen */
#beenden-frage-text span:last-child { margin-bottom: 0; }
.eingabe-zeile select { flex: 1; min-width: 0; width: auto; }
.knopf-abstand { margin-top: 10px; }
/* Speichern-Knöpfe in den Einstellungen: gefüllt, solange etwas geändert und nicht gespeichert ist */
.knopf-speichern:disabled { opacity: 1; color: var(--text-muted); background: transparent; }
.knopf-speichern svg { flex: none; }
.eingabe-zeile { display: flex; gap: 10px; }
.eingabe-zeile input { min-width: 0; }
.eingabe-zeile .btn { flex: none; }
.haken { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; }
.haken input { margin: 3px 0 0; flex: none; }

/* --- Info-Dialog ------------------------------------------------------- */
.modal--info { width: 760px; height: min(760px, 88vh); display: flex; flex-direction: column; overflow: hidden; }
.modal--info .modal-kopf h2 { font-size: 18px; }
.info-einleitung { margin: 0 0 18px; }
.modal--info .modal-inhalt { flex: 1; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; }
.info-text { font-size: 13px; line-height: 1.55; }
.info-text p { margin: 0 0 10px; }
.info-text ol, .info-text ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.info-text strong { font-weight: 600; }
.info-text code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
.info-tabelle { margin: 4px 0 12px; }
.info-tabelle th { background: transparent; text-align: left; font-weight: 500; color: var(--text-muted); font-size: 12.5px; padding: 0 8px 6px 0; border-bottom: 1px solid var(--border); }
.info-tabelle td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); }

/* Eigene Auswahlliste statt <select>, damit das Farbsymbol sichtbar ist. */
.auswahl { position: relative; }
.auswahl-knopf {
  appearance: none; width: 100%; display: flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 13.5px; text-align: left;
  padding: 9px 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.auswahl-knopf:hover, .auswahl-knopf[aria-expanded="true"] { border-color: var(--accent); }
.auswahl-text { flex: 1; }
.auswahl-pfeil { width: 9px; height: 6px; color: var(--text-muted); }
.auswahl-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.auswahl-liste:focus { outline: none; }
.auswahl-liste li {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px;
  border-radius: calc(var(--radius) - 1px); cursor: pointer;
}
.auswahl-liste li small { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
.auswahl-liste li:hover, .auswahl-liste li.markiert { background: var(--surface-2); }
.auswahl-liste li[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.theme-symbol { width: 16px; height: 16px; flex: none; border-radius: 50% 2px 50% 2px; }

/* --- Pacht --------------------------------------------------------------- */
.pacht-tabelle { min-width: 1180px; }
.pacht-tabelle select, .mitglieder select { width: 100%; padding: 5px 6px; }
.spalte-zweit { width: 130px; }
.mitglieder .spalte-check { width: 76px; text-align: center; }
.mitglieder thead th.spalte-check { white-space: normal; line-height: 1.25; }
.mitglieder .spalte-kontakt { width: 72px; text-align: center; }
.knopf-kontakt { padding: 6px 12px; }
.knopf-kontakt:not(.hat-daten) { opacity: 0.4; }
.knopf-kontakt:not(.hat-daten):hover { opacity: 1; }
#modal-kontakt .modal { width: 400px; }
#modal-kontakt .modal > .feld + .feld, #modal-kontakt .modal > .feld + .feld-paar, #modal-kontakt .modal > .feld-paar + .feld { margin-top: 12px; }
.feld-paar--plz { grid-template-columns: 96px minmax(0, 1fr); }
#modal-kontakt .modal-unter { margin: -8px 0 14px; }
#modal-kontakt .feld + .hinweis { margin-top: 12px; }

/* Kontrollkästchen (alle im Programm): ruhig – nur Rahmen, angehakt mit Rahmen
   und Haken in der Akzentfarbe, keine gefüllte Fläche. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
  width: 16px; height: 16px; flex: none; vertical-align: middle;
  border: 1px solid var(--text-muted); border-radius: min(var(--radius), 4px); background: transparent;
  display: inline-grid; place-content: center; cursor: pointer; color: var(--accent);
  transition: border-color 0.12s ease;
}
input[type="checkbox"]::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}
input[type="checkbox"]:hover, input[type="checkbox"]:checked { border-color: var(--accent); }
input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }
.mitglieder td.spalte-check input.kaestchen { width: 18px; height: 18px; }
.mitglieder td.spalte-check input.kaestchen::after { width: 5px; height: 9px; }
.chip-zweit { margin-left: 6px; }
/* Pacht: Spalte Überweisungsgebühr nur, wenn sie umgelegt wird (Einstellung) */
.pacht-tabelle.ohne-ueberweisung .spalte-ueberw { display: none; }
/* Navigationsspalte der Übersichten: gleiche Breite und Linie wie die Seitenleiste
   der Abrechnungen, damit der Trennstrich im Kopf passt. */
.navspalte { gap: 4px; padding-top: 20px; }
.nav-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius); border: 1px solid transparent;
  color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 13.5px;
}
.nav-eintrag svg { flex: none; }
.nav-eintrag:hover { color: var(--text); background: var(--accent-soft); }
.nav-eintrag.aktiv { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.nav-eintrag.aktiv svg { color: var(--accent); }
/* Spalte fest auf die verfügbare Breite: breite Tabellen dürfen sie nicht aufweiten. */
.nav-inhalt { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }

/* --- Mitglieder ---------------------------------------------------------- */
#ansicht-mitglieder .rahmen { max-width: 1180px; }

/* Startseite */
#titel-start > span { font-size: 22px; } /* „Vereinsabrechnung“ ist länger als die Bereichstitel und muss vor den Trennstrich passen */
.logo-marke .ader { fill: none; stroke: var(--surface-2); stroke-width: 1.3; stroke-linecap: round; }
.start-kopf h2 { font-size: 22px; margin-bottom: 8px; }
.start-kopf p { margin: 0; color: var(--text-muted); line-height: 1.65; } /* ohne feste Breite: bricht erst am Rand der Box um */
.start-kopf p + p { margin-top: 0.75em; } /* halbe Leerzeile zwischen den Bereichen */
.start-kopf strong { color: var(--text); font-weight: 600; }
.start-bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-bereiche { grid-auto-rows: auto; }
/* Alle Karten teilen sich die Zeilen (Kopf, Text, Stand): Trennstrich auf gleicher Höhe,
   kommen Punkte dazu, wachsen alle Karten gleich nach unten. */
.start-karte { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; color: inherit; text-decoration: none; transition: border-color 0.12s ease; }
.start-karte:hover { border-color: var(--accent); }
.start-karte p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.start-karte-kopf { display: flex; align-items: center; gap: 10px; }
.start-karte-kopf h3 { font-size: 15px; }
.start-symbol { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.start-karte .start-status { padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text); }
.start-liste { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.start-ablauf ol { margin: 8px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; }
.start-hinweise { margin: 0 0 12px; }
.start-hinweise:empty { display: none; } /* nur Fehlendes wird angezeigt */
.start-fuss { margin: 0; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 1100px) { .start-bereiche { grid-template-columns: 1fr; } }
.mitglieder { min-width: 1000px; }
.mitglieder .spalte-strasse { width: 17%; }
.mitglieder .spalte-email { width: 10%; }
.mitglieder .spalte-datum { width: 132px; }
.mitglieder .spalte-m2 { width: 84px; }
.mitglieder .spalte-zweit { width: 116px; }
.mitglieder thead th.zahl { text-align: right; }
.mitglieder input.zahl { text-align: right; }
.mitglieder tfoot td { padding: 10px 8px 0; font-weight: 600; font-size: 13px; }
.mitglieder thead th { background: var(--surface); white-space: nowrap; }
.mitglieder td { vertical-align: middle; }
.mitglieder input { width: 100%; padding: 5px 7px; }
.mitglieder .nr { width: 64px; }
.mitglieder .spalte-plz { width: 72px; }
.karte-kopf .speicherstand { text-align: right; }

/* --- Analyse ------------------------------------------------------------ */
/* Diagrammfarben je Theme in fester Reihenfolge: Parzellen, Gemeinschaft,
   Beleuchtung, Verluste (--diagramm-1 bis 4, oben bei den Themes). Abgeleitet aus Akzent, Fokus und Negativfarbe; wo
   zwei Töne für Farbfehlsichtige zu ähnlich waren, angepasst (geprüft auf
   Unterscheidbarkeit benachbarter Stapelteile). */
#ansicht-analyse .rahmen { max-width: 1560px; }
.an-karte { display: flex; flex-direction: column; }
.karten-raster > .an-breit { flex-basis: 100%; }
.an-karte .karte-kopf { flex-wrap: wrap; }
.diagramm { width: 100%; height: 300px; }
.diagramm--hoch { height: 340px; }
.auswahl-klein { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.auswahl-klein select { flex: none; width: auto; padding: 6px 8px; }

/* --- Abrechnung --------------------------------------------------------- */
/* Überschriften mit Erklärung: kleines Info-Symbol dahinter, Hinweis beim Überfahren. */
/* Das Symbol läuft im Text mit: Bricht eine lange Überschrift um, steht es
   hinter dem letzten Wort statt abgesetzt am Rand. */
.abschnitt h2[data-tooltip] { align-self: flex-start; cursor: help; }
.modal-abschnitt h3[data-tooltip] { cursor: help; }
.modal-abschnitt h3[data-tooltip]:hover .info-symbol, .modal-abschnitt h3[data-tooltip]:focus-visible .info-symbol { color: var(--accent); }
.info-symbol {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -2px;
  line-height: 0;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.abschnitt h2[data-tooltip]:hover .info-symbol,
.abschnitt h2[data-tooltip]:focus-visible .info-symbol { color: var(--accent); }
.abschnitt h2[data-tooltip]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Tabellenköpfe mit Erklärung: kleines ⓘ hinter dem Text */
th[data-tooltip] { cursor: help; }
th[data-tooltip] .th-letztes { white-space: nowrap; }
th[data-tooltip] .info-symbol { margin-left: 4px; vertical-align: -1px; }
th[data-tooltip]:hover .info-symbol,
th[data-tooltip]:focus-visible .info-symbol { color: var(--accent); }
th[data-tooltip]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tooltip {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  white-space: pre-line; /* Zeilenumbrüche im Text (z. B. Kontaktdaten) untereinander */
}
#switch-differenz .switch-option { flex: 1; }
.titel-zeile { display: flex; align-items: center; gap: 10px; }
.speicherstand { font-size: 12px; color: var(--text-muted); min-width: 90px; }
.speicherstand.fehler { color: var(--negative); }
.btn-gefahr:hover { background: var(--negative); border-color: var(--negative); color: var(--bg); }
input:disabled, select:disabled { opacity: 0.7; cursor: not-allowed; }
.switch.gesperrt { pointer-events: none; opacity: 0.7; }

/* Schmale Bildschirme: eine Spalte, die Seite darf scrollen. */
@media (max-width: 860px) {
  html, body { overflow: auto; height: auto; }
  body { display: block; }
  .layout { grid-template-columns: 1fr; }
  .seitenleiste { border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .inhalt, .einspaltig { overflow: visible; padding: 20px 16px; }
  .navspalte { flex-direction: row; flex-wrap: wrap; padding: 10px 16px; }
  .kopf { padding: 8px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; }
}

/* =============================================================================
   Druck: eigener Druckbereich statt der Eingabemaske
   ========================================================================== */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  /* Übersichten im Querformat, damit alle Spalten mit Eurozeichen Platz haben */
  @page quer { size: A4 landscape; margin: 9mm 14mm; }
  .druck-seite { page: quer; line-height: 1.3; }
  .layout, .fusszeile, #ansicht-uebersicht, #ansicht-analyse, #ansicht-mitglieder, #ansicht-pacht-liste { display: none !important; }
  #druck { display: block; color: #111; font-size: 10.5pt; }
  .druck-seite + .druck-seite { break-before: page; page-break-before: always; }
  .druck-seite h1 { font-size: 14pt; margin-bottom: 2pt; }
  .druck-seite .verein { font-size: 10pt; color: #444; margin: 0 0 8pt; }
  .druck-seite h2 { font-size: 11pt; margin: 10pt 0 4pt; }
  .druck-seite h2 .einheit { font-weight: 400; font-size: 9.5pt; color: #555; }
  .druck-seite table { width: 100%; border-collapse: collapse; }
  .druck-seite th, .druck-seite td { padding: 1.6pt 6pt; border-bottom: 0.5pt solid #bbb; text-align: left; font-size: 9.5pt; }
  .druck-seite th { color: #444; font-weight: 500; }
  .druck-seite .zahl { text-align: right; white-space: nowrap; }
  .druck-seite tbody td:first-child { white-space: nowrap; } /* „16 (extern)“ in einer Zeile */
  .druck-seite tr.summe td { font-weight: 600; border-top: 1pt solid #111; border-bottom: none; }
  .druck-seite .angaben td:first-child { color: #444; width: 75%; }
  .druck-seite .fuss { margin-top: 8pt; font-size: 9pt; color: #444; }

  /* --- Einzelabrechnung als Brief nach DIN 5008, Form B ------------------ */
  @page brief { size: A4; margin: 0; }
  .druck-brief {
    page: brief;
    position: relative;
    width: 210mm; height: 296.5mm; /* knapp unter A4, sonst entsteht eine Leerseite */
    overflow: hidden;
    font-size: 10.5pt; line-height: 1.45; color: #111;
    break-after: page; page-break-after: always;
  }
  .druck-brief:last-child { break-after: auto; page-break-after: auto; }
  .druck-brief .klein { font-size: 8.5pt; color: #555; }
  .druck-brief .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Falzmarken (105 mm, 210 mm) und Lochmarke (148,5 mm) */
  .falzmarke, .lochmarke { position: absolute; left: 5mm; height: 0; border-top: 0.3pt solid #888; }
  .falzmarke { width: 5mm; }
  .falzmarke.oben { top: 105mm; }
  .falzmarke.unten { top: 210mm; }
  .lochmarke { top: 148.5mm; width: 7mm; }

  /* Briefkopf: Absender links oben, Logo rechts oben */
  .brief-absender { position: absolute; top: 14mm; left: 25mm; font-size: 9.5pt; line-height: 1.4; color: #333; }
  .brief-verein { font-size: 12.5pt; font-weight: 600; color: #111; margin-bottom: 1mm; }
  .brief-logo { position: absolute; top: 14mm; right: 20mm; width: 36mm; height: 36mm; object-fit: contain; } /* oben bündig mit dem Vereinsnamen */

  /* Anschriftfeld: 20 mm von links, 45 mm von oben, 85 × 45 mm */
  .brief-fenster { position: absolute; left: 20mm; top: 45mm; width: 85mm; height: 45mm; padding-left: 5mm; }
  .ruecksende { font-size: 7pt; color: #555; padding-top: 11mm; height: 17.7mm; border-bottom: 0.3pt solid #999; margin-bottom: 2mm; white-space: nowrap; overflow: hidden; }
  .anschrift { font-size: 11pt; line-height: 1.35; }

  /* Informationsblock rechts neben dem Anschriftfeld */
  .brief-info { position: absolute; right: 20mm; top: 53mm; width: auto; border-collapse: collapse; font-size: 9.5pt; } /* rechts bündig mit dem Logo */
  .brief-info td { padding: 0.6mm 0; border: none; }
  .brief-info td:first-child { color: #555; width: 26mm; padding-right: 2mm; white-space: nowrap; }
  .brief-info td:last-child { white-space: nowrap; }

  /* Brieftext: 25 mm links, 20 mm rechts, Betreff bei etwa 98 mm */
  .brief-text { position: absolute; left: 25mm; right: 20mm; top: 98mm; }
  .brief-text h1 { font-size: 12pt; font-weight: 600; margin: 0 0 6mm; }
  .brief-text p { margin: 0 0 3.2mm; }
  .brief-text table { width: 100%; border-collapse: collapse; }
  .brief-zaehler { margin: 1mm 0 4mm; border-top: 0.3pt solid #bbb; border-bottom: 0.3pt solid #bbb; } /* Rahmen statt Fläche: Hintergründe druckt der Browser meist nicht */
  .brief-zaehler td { padding: 1.2mm 3mm; font-size: 9.5pt; border: none; }
  .brief-zaehler td:nth-child(odd) { color: #555; }
  .brief-zaehler--wechsel td:nth-child(odd) { color: inherit; }
  .brief-zaehler--wechsel th { padding: 1.2mm 3mm; font-size: 8.5pt; font-weight: 500; color: #555; text-align: left; border-bottom: 0.3pt solid #bbb; }
  .brief-zaehler--wechsel th.zahl { text-align: right; }
  .brief-zaehler--wechsel td:first-child { color: #555; }
  .brief-zaehler tr.gesamt td { border-top: 0.3pt solid #bbb; }
  .druck-seite td .klein { font-size: 8pt; color: #555; }
  .brief-posten { margin-bottom: 4mm; }
  .brief-posten th { text-align: left; font-weight: 500; font-size: 9pt; color: #555; padding: 0 2mm 1mm; border-bottom: 0.6pt solid #111; }
  .brief-posten th.zahl { text-align: right; }
  /* Spalte Menge linksbündig; Anteile („1/16 von …“) kleiner und grau */
  .brief-posten th:nth-child(2), .brief-posten td:nth-child(2) { text-align: left; padding-left: 4mm; }
  .brief-posten td .anteil { font-size: 8.5pt; color: #666; }
  .brief-posten td { padding: 0.8mm 2mm; border-bottom: 0.3pt solid #ccc; vertical-align: baseline; }
  /* Ergänzung hinter der Position, abgesetzt durch einen feinen senkrechten Strich. */
  /* Rahmenlinie statt Fläche: Hintergründe druckt der Browser ohne „Hintergrundgrafiken“ nicht */
  .brief-posten td .klein::before { content: ""; display: inline-block; width: 0; height: 3.2mm; border-left: 0.6pt solid #999; margin: 0 2.2mm; vertical-align: -0.5mm; }
  /* Einstellung „Ergänzungen anzeigen“ aus: nur noch die Hinweise, warum ein Betrag entfällt */
  .ohne-ergaenzungen .brief-posten .klein:not(.immer):not(.je) { display: none; }
  .ohne-je .brief-posten .klein.je { display: none; } /* eigene Einstellung „je Mitglied“ */
  .brief-posten tr.summe td { font-weight: 600; font-size: 11pt; border-top: 0.8pt solid #111; border-bottom: 2pt double #111; padding-top: 1.6mm; padding-bottom: 1.2mm; }
  .brief-bank { margin: 1mm 0 4mm; border-top: 0.3pt solid #bbb; border-bottom: 0.3pt solid #bbb; }
  .brief-bank td { padding: 0.8mm 2mm; font-size: 9.5pt; border: none; white-space: nowrap; }
  .brief-bank td:nth-child(odd) { color: #555; width: 1%; padding-right: 3mm; }
  /* Tabellen bündig mit dem Fließtext: links und rechts kein Innenabstand an den Außenzellen */
  .brief-zaehler td:first-child, .brief-zaehler th:first-child,
  .brief-posten td:first-child, .brief-posten th:first-child,
  .brief-bank td:first-child { padding-left: 0; }
  .brief-zaehler td:last-child, .brief-zaehler th:last-child,
  .brief-posten td:last-child, .brief-posten th:last-child,
  .brief-bank td:last-child { padding-right: 0; }
  .brief-gruss { margin-top: 4mm !important; }
  .brief-maschinell { margin-top: 5mm !important; }
}

/* =============================================================================
   Anmeldung, angemeldeter Benutzer, Benutzer und Rechte, Protokoll
   (nur sichtbar, wenn die Anmeldung eingeschaltet ist)
   ========================================================================== */
.anm-seite { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); overflow-y: auto; }
.anm-seite[hidden] { display: none; }
.anm-karte { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px 26px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); }
.anm-marke { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; text-align: center; }
.anm-verein { font-size: 13px; color: var(--text-muted); }
.anm-einleitung { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: -6px 0 14px; }
.anm-karte .feld { margin-bottom: 12px; }
.anm-karte .feld[hidden] { display: none; }
.anm-karte .btn { width: 100%; justify-content: center; margin-top: 4px; }
.anm-fehler { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--negative); border: 1px solid var(--negative); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--negative) 9%, transparent); border-color: color-mix(in srgb, var(--negative) 40%, transparent); }
.anm-fehler[hidden] { display: none; }
.anm-fuss { margin: 16px 0 0; font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.5; }

/* Kopf: angemeldeter Benutzer (Klick auf den Namen: Passwort ändern). */
.nutzer-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px 3px 3px; border: 1px solid var(--border); border-radius: 999px; margin-right: 4px; }
.nutzer-chip[hidden] { display: none; }
.nutzer-name, .nutzer-abmelden { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; border-radius: 999px; }
.nutzer-name { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; }
.nutzer-name:hover { background: var(--surface-2); }
.nutzer-kreis { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--on-accent);
  background: linear-gradient(135deg, var(--verlauf-1), var(--verlauf-2)); }
.nutzer-abmelden { font-size: 11.5px; color: var(--text-muted); padding: 4px 8px; }
.nutzer-abmelden:hover { color: var(--text); background: var(--surface-2); }

#modal-passwort .modal, #modal-bn-form .modal { width: 400px; }
#modal-passwort .modal > .feld + .feld, #modal-bn-form .modal > .feld + .feld { margin-top: 12px; }
#modal-passwort .modal-unter, #modal-bn-form .modal-unter { margin: -8px 0 14px; }
#modal-passwort .modal-unter:empty, #modal-bn-form .modal-unter:empty { display: none; }
#modal-passwort .feld + .hinweis, #modal-bn-form .feld + .hinweis { margin-top: 10px; }
#modal-bn-form [hidden] { display: none; }
.bn-passwort { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }
#modal-passwort .modal > .feld + .pw-richtlinie, #modal-bn-form .modal > .feld + div > .pw-richtlinie { margin-top: 12px; }
#modal-passwort .pw-richtlinie + .hinweis { margin-top: 10px; }

/* Hinweis direkt unter einem Eingabefeld: wofür das Feld da ist */
.feld-hinweis { display: block; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); margin-top: 1px; }
.feld-hinweis code { font-size: 11px; }
.feld-paar .feld { margin-bottom: 0 !important; }
.feld > .feld-paar + .feld-hinweis { margin-top: 4px; }

/* Kennwortrichtlinie als Checkliste – erfüllte Punkte grün mit Haken */
.pw-richtlinie { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface-2); }
.pw-richtlinie-titel { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.pw-richtlinie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pw-richtlinie li { font-size: 12px; color: var(--text-muted); padding-left: 18px; position: relative; line-height: 1.45; }
.pw-richtlinie li::before { content: "○"; position: absolute; left: 2px; top: 0; }
.pw-richtlinie li.ok { color: var(--pruef-ok); }
.pw-richtlinie li.ok::before { content: "✓"; font-weight: 700; }
.anm-karte .pw-richtlinie { margin: -2px 0 14px; }
@media print { .pw-richtlinie { border-color: #999; background: none; } }

.modal--benutzer { width: 1460px; max-width: 97vw; }
.modal--benutzer .modal-kopf h2, .modal--protokoll .modal-kopf h2 { font-size: 18px; }
.bn-tabelle th { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: left; padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.bn-tabelle td { padding: 9px 6px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.bn-tabelle .mitte { text-align: center; }
.bn-name strong { display: block; font-weight: 600; white-space: nowrap; }
.bn-name span { font-size: 11.5px; color: var(--text-muted); }
.bn-tabelle .switch { display: inline-flex; }
.bn-tabelle .switch-option { font-size: 12px; padding: 5px 9px; white-space: nowrap; }
.bn-tabelle { width: 100%; }
.marke-admin { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); margin-left: 6px; vertical-align: 1px; }
.marke-ich { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.bn-zeit { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.bn-aktionen { white-space: nowrap; text-align: right; }
.bn-aktionen .btn { padding: 5px 8px; }
.bn-tabelle tr.inaktiv td:not(.mitte):not(.bn-aktionen) { opacity: 0.55; }
.bn-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 16px; }
.bn-fuss .hinweis { max-width: 680px; font-size: 12px; line-height: 1.5; }

.modal--protokoll { width: 760px; height: min(640px, 85vh); display: flex; flex-direction: column; overflow: hidden; }
.modal--protokoll .modal-unter { margin: -8px 0 12px; }
.modal--protokoll .modal-inhalt { flex: 1; min-height: 0; overflow-y: auto; }
.pr-tabelle th { position: sticky; top: 0; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: left; padding: 7px 8px; }
.pr-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: top; }
.pr-tabelle td:first-child { white-space: nowrap; color: var(--text-muted); width: 1%; }
.pr-tabelle td:nth-child(2) { white-space: nowrap; width: 1%; }
.pr-tabelle .pr-anzahl { color: var(--text-muted); font-size: 11.5px; }

/* Nur ansehen: Hinweis in der Seitenleiste bzw. über den Mitgliedern. */
.nur-ansehen-hinweis { font-size: 12px; color: var(--text-muted); }

@media print { .anm-seite, .nutzer-chip { display: none !important; } }
/* Aus den Einstellungen geöffnet: über dem Einstellungsdialog. */
#modal-benutzer, #modal-protokoll, #modal-passwort { z-index: 70; }
#modal-bn-form { z-index: 75; }
.modal--einstellungen.modal--kurz { height: auto; }
/* Nur das Design: Die aufgeklappte Liste liegt im Fluss, das Fenster wächst mit statt zu scrollen. */
.modal--kurz .auswahl-liste { position: static; margin-top: 4px; box-shadow: none; }

/* Programm aktualisieren (nur Admins, nur als Dienst auf dem Pi) */
.upd-version { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.upd-version strong { color: var(--text); font-weight: 600; }
#modal-upd { z-index: 70; }
#modal-upd .modal { width: 620px; }
#modal-upd .modal-kopf h2 { font-size: 18px; }
#modal-upd [hidden] { display: none; }
.upd-zeile { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; font-size: 13px; }
.upd-zeile strong { font-size: 15px; }
.upd-tabelle { width: 100%; }
.upd-tabelle th { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: left; padding: 7px 8px; background: var(--surface-2); }
.upd-tabelle td { padding: 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.upd-tabelle .zahl { text-align: right; }
.upd-tabelle code { font-size: 12.5px; }
.upd-pille { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
.upd-pille.gleich { border-color: var(--border); color: var(--text-muted); }
.upd-hinweise, .upd-schritte { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.upd-hinweise li { padding-left: 14px; position: relative; }
.upd-hinweise li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pruef-ok); }
.upd-hinweise li.warn::before { background: var(--status-offen); }
#modal-upd .feld { margin-top: 14px; }
.upd-schritte { gap: 8px; font-size: 13px; margin-top: 0; }
.upd-schritte li { display: flex; gap: 10px; align-items: center; }
.upd-schritte .punkt { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.upd-schritte .ok .punkt { background: var(--pruef-ok); border-color: var(--pruef-ok); }
.upd-schritte .fehler .punkt { background: var(--negative); border-color: var(--negative); }
.upd-schritte .laeuft .punkt { border-color: var(--accent); border-top-color: transparent; animation: upd-drehen 0.9s linear infinite; }
.upd-schritte .offen { color: var(--text-muted); }
@keyframes upd-drehen { to { transform: rotate(360deg); } }
#modal-upd .upd-ablauf-text { margin-top: 16px; }

/* Passwortfeld mit Auge zum Ein-/Ausblenden */
.pw-huelle { position: relative; display: flex; width: 100%; }
.pw-huelle input { width: 100%; padding-right: 36px; }
.pw-auge { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; padding: 0; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--text-muted); cursor: pointer; }
.pw-auge:hover { color: var(--text); background: var(--surface-2); }
.pw-huelle input[type="password"]::-ms-reveal { display: none; }