:root {
  --marke: #123a08;
  --marke-hell: #2f6b1a;
  --hintergrund: #f7f8f5;
  --karte: #ffffff;
  --text: #1c1c1c;
  --rand: #dde1d8;
  --gefahr: #b3261e;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  padding-bottom: 3rem;
}

a { color: var(--marke-hell); }

.kopfleiste {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--marke);
  color: white;
  flex-wrap: wrap;
}
.kopfleiste a { color: white; text-decoration: none; }
.kopfleiste .marke { font-weight: 700; font-size: 1.1rem; }
.zugriffsmodus-badge {
  font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); white-space: nowrap;
}
.zugriffsmodus-badge.gesperrt { background: var(--gefahr); font-weight: 600; }
/* Für Eltern ist der Badge in der Kopfleiste direkt anklickbar und schaltet
   den Zugriffsmodus um (Alex-Wunsch 18.08.2026, ersetzt den bisherigen
   separaten Button in der Benutzerverwaltung) -- daher hier als <button>
   statt <span> gerendert. Überschreibt bewusst die generische
   button[type="submit"]-Optik (sonst grün wie "Speichern"), damit es
   weiterhin wie ein Badge statt wie ein Hauptbutton aussieht. */
button[type="submit"].zugriffsmodus-badge {
  font: inherit; color: white; border: none; cursor: pointer;
  font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); white-space: nowrap;
}
button[type="submit"].zugriffsmodus-badge:hover,
button[type="submit"].zugriffsmodus-badge:focus-visible {
  background: rgba(255, 255, 255, 0.32);
}
button[type="submit"].zugriffsmodus-badge.gesperrt { background: var(--gefahr); font-weight: 600; }
button[type="submit"].zugriffsmodus-badge.gesperrt:hover,
button[type="submit"].zugriffsmodus-badge.gesperrt:focus-visible {
  filter: brightness(1.1);
}
.hauptnav { display: flex; gap: 1rem; flex-wrap: wrap; }
.benutzer-info { margin-left: auto; display: flex; gap: 1rem; align-items: center; }

/* Hamburger-Menü fürs Handy: Button nur unterhalb der Breakpoint-Breite
   sichtbar, Navigation/Benutzer-Info klappen dort standardmäßig weg und
   werden per Alpine.js (menuOffen, siehe base.html) über die Klasse
   "mobil-offen" eingeblendet. Ab 721px immer sichtbar, Button versteckt. */
.hamburger-button {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: white;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

@media (max-width: 720px) {
  .hamburger-button { display: inline-block; }
  .hauptnav, .benutzer-info {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    gap: 0.5rem;
  }
  .hauptnav.mobil-offen, .benutzer-info.mobil-offen { display: flex; }
  .benutzer-info.mobil-offen { border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 0.5rem; margin-top: 0.25rem; }
}

.inhalt { max-width: 900px; margin: 0 auto; padding: 1.25rem; }
.inhalt.jahresuebersicht-detailseite { max-width: none; width: 100%; }

/* Für datenlastige Finanzen-Tabellen (Renten/Darlehen/Verträge/Jahresübersicht):
   auf breiteren Bildschirmen (PC/Tablet quer) mehr Platz und etwas kleinere
   Schrift, damit z. B. die Monatsspalten der Jahresübersicht nicht mehr
   gequetscht bzw. nur per Scrollen lesbar sind. Auf dem Handy (schmaler als
   900px) bleibt es unverändert bei der normalen Breite/Schriftgröße. */
@media (min-width: 900px) {
  .inhalt.inhalt-breit { max-width: min(96vw, 1600px); }
  .inhalt.inhalt-breit.jahresuebersicht-seite { max-width: none; width: 100%; }
  .inhalt.inhalt-breit.wiederkehrende-zahlungen-seite { max-width: none; width: 100%; }

  /* Die Vertragsübersicht nutzt auf großen Bildschirmen die gesamte verfügbare
     Breite. Die eigene Klasse verhindert, dass andere .inhalt-breit-Seiten
     (Renten/Zähler/Hochrechnung/Rechnungsprüfung) dadurch verändert werden. */
  .inhalt.inhalt-breit.inhalt-vertraege { max-width: none; width: 100%; }
}

.wiederkehrende-bereich { margin: 1.5rem 0 2.5rem; }
.wiederkehrende-bereich h2 { margin-bottom: 0.75rem; }
.wiederkehrende-pruefaktion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0;
  padding: 0.75rem 1rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--karte);
}
.wiederkehrende-pruefaktion span { color: #666; font-size: 0.85rem; }
.wiederkehrende-erfolg {
  background: #eef5ec; border: 1px solid #a9c9a0; border-radius: var(--radius); padding: 0.75rem 1rem;
}
.wiederkehrende-tabelle-wrapper { width: 100%; overflow-x: auto; }
.wiederkehrende-tabelle { min-width: 760px; margin-bottom: 0; }
.wiederkehrende-tabelle summary { cursor: pointer; }
.wiederkehrende-anzahl, .wiederkehrende-anlegen, .wiederkehrende-preisaenderung {
  color: #666; font-size: 0.78rem;
}
.wiederkehrende-preisaenderung, .wiederkehrende-offen { color: #8a5a25; }
.wiederkehrende-preisaenderung, .wiederkehrende-anlegen { margin-top: 0.15rem; }
.wiederkehrende-buchungen { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.85rem; }
.wiederkehrende-zuordnung {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.4rem; margin-top: 0.5rem;
}
.wiederkehrende-zuordnung label { display: grid; gap: 0.2rem; font-size: 0.78rem; }
.wiederkehrende-zuordnung select { max-width: 100%; }
.wiederkehrende-zuordnung button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

@media (max-width: 720px) {
  .wiederkehrende-tabelle { min-width: 0; }
  .wiederkehrende-tabelle thead { display: none; }
  .wiederkehrende-tabelle, .wiederkehrende-tabelle tbody, .wiederkehrende-tabelle tr,
  .wiederkehrende-tabelle td { display: block; width: 100%; }
  .wiederkehrende-tabelle tr {
    margin-bottom: 0.75rem; border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--karte); padding: 0.5rem 0.75rem;
  }
  .wiederkehrende-tabelle td {
    display: grid; grid-template-columns: minmax(6.5rem, 35%) 1fr; gap: 0.5rem;
    padding: 0.35rem 0; border: none; white-space: normal;
  }
  .wiederkehrende-tabelle td::before { content: attr(data-label); font-weight: 600; }
  .wiederkehrende-tabelle td:first-child { grid-template-columns: 1fr; }
  .wiederkehrende-tabelle td:first-child::before { display: none; }
  .wiederkehrende-tabelle td[colspan] { display: block; }
  .wiederkehrende-tabelle td[colspan]::before { display: none; }
}

.unternav { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.unternav a { text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--rand); border-radius: 999px; }

/* Finanzen-Untermenü-Gruppen mit Dropdown (Menü-Umbau 23.08.2026, Alex-
   Wunsch "Zahlungen" als Obermenü mit Einnahmen/Ausgaben-Untermenüs) --
   per Klick auf-/zuklappbar (Alpine.js x-data in _untermenue.html), gleiches
   Klick-statt-Hover-Prinzip wie das bestehende Hamburger-Menü in base.html,
   damit es auch auf dem Handy zuverlässig funktioniert. */
.unternav-gruppe { position: relative; }
.unternav-gruppe-button {
  font: inherit; cursor: pointer; background: var(--karte); color: var(--text);
  text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--rand);
  border-radius: 999px;
}
.unternav-gruppe-button[aria-expanded="true"] { background: var(--marke); color: white; border-color: var(--marke); }
.unternav-dropdown {
  position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 20;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 0.9rem 1.1rem; display: flex; gap: 1.75rem; flex-wrap: wrap;
  min-width: 220px;
}
.unternav-dropdown-spalte { display: flex; flex-direction: column; gap: 0.3rem; min-width: 160px; }
.unternav-dropdown-spalte strong { font-size: 0.8rem; color: #666; margin-bottom: 0.15rem; }
.unternav-dropdown a, .unternav-dropdown-spalte a {
  text-decoration: none; padding: 0.15rem 0; white-space: nowrap;
}
.unternav-dropdown a:hover, .unternav-dropdown-spalte a:hover { text-decoration: underline; }

/* Auf dem Handy wird das Dropdown volle Breite statt frei schwebend --
   sonst reicht der schmale Viewport nicht für zwei Spalten nebeneinander. */
@media (max-width: 720px) {
  .unternav-dropdown { position: static; flex-direction: column; gap: 0.9rem; box-shadow: none; }
}

.kachel-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kachel {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.25rem; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.kachel strong { font-size: 1.1rem; }

.anmelde-box {
  max-width: 400px; margin: 3rem auto; background: var(--karte);
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 2rem; text-align: center;
}

.primaer-button, button[type="submit"], .primaer-button:visited {
  background: var(--marke); color: white; border: none; border-radius: 8px;
  padding: 0.6rem 1.1rem; font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-block;
}
.primaer-button:hover, button[type="submit"]:hover { background: var(--marke-hell); }

button { font-family: inherit; }
.text-button { background: none; border: none; color: var(--gefahr); cursor: pointer; text-decoration: underline; padding: 0; }
/* Aufgaben-Haken (Abhaken-Button, sieht wie eine echte Checkbox aus statt
   wie ein roter Textlink) -- Nutzer-Fund 2026-09-14: der bisherige
   .text-button (rot, unterstrichen, für "Löschen" gedacht) wirkte für einen
   simplen Erledigt-Haken viel zu aufdringlich. */
/* button[type="submit"].aufgabe-haken (statt nur .aufgabe-haken) --
   Spezifität von "button[type=submit]" (weiter oben, grüner Vollbutton)
   war sonst höher und hat Hintergrund/Farbe/Padding/Rundung des Hakens
   überschrieben (Nutzer-Fund 2026-09-14: "sind noch grün hinterlegt" +
   dadurch faktisch nicht klickbar, weil die Klickfläche ein breiter
   grüner Pillenbutton statt eines kleinen Kästchens war). */
button[type="submit"].aufgabe-haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; flex: none;
  border: 1.5px solid #c2c8ce; border-radius: 5px; background: #fff;
  color: transparent; font-size: 0.85rem; line-height: 1; cursor: pointer;
  padding: 0; margin-right: 0.4rem; vertical-align: -3px;
}
button[type="submit"].aufgabe-haken:hover { border-color: var(--marke); background: #fff; }
button[type="submit"].aufgabe-haken.aufgabe-haken--erledigt { border-color: var(--marke); color: var(--marke); }

.bon-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  text-decoration: none; font-size: 0.78rem; font-weight: 600;
  padding: 0.25rem 0.55rem; border-radius: 999px;
  background: rgba(47, 107, 26, 0.12); border: 1px solid rgba(47, 107, 26, 0.25);
  color: var(--marke);
}
.bon-link:hover, .bon-link:focus-visible { background: rgba(47, 107, 26, 0.18); text-decoration: none; }

/* Löschen-Buttons (Papierkorb-Symbol) bewusst dezent -- kein farbiger Button
   wie "Speichern", sondern ein blasses, erst bei Hover/Fokus deutlicher
   werdendes Icon, damit die selten genutzte, unumkehrbare Aktion nicht neben
   harmlosen Aktionen (Bearbeiten, Details) heraussticht. */
button[type="submit"].loeschen-button {
  background: none; color: inherit; border: none; padding: 0; border-radius: 0;
  font-size: 0.95em; cursor: pointer;
  opacity: 0.45; filter: grayscale(65%);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
button[type="submit"].loeschen-button:hover,
button[type="submit"].loeschen-button:focus-visible {
  background: none; opacity: 1; filter: grayscale(0%);
}

/* Kündigen-Button (bei aktiven Verträgen) bewusst dezent -- eine seltene,
   nicht unumkehrbare, aber bewusste Aktion (siehe Reaktivieren), die nicht
   wie "Speichern" als grüner Hauptbutton neben den harmlosen Aktionen
   (Bearbeiten) heraussticht. Gleiches Blass-bis-Hover-Prinzip wie bei den
   Löschen-Buttons, nur mit Rahmen statt reinem Icon, da hier Text steht. */
button[type="submit"].kuendigen-button {
  background: none; color: var(--text); border: 1px solid var(--rand);
  border-radius: 8px; padding: 0.4rem 0.8rem; font-size: 0.9rem; cursor: pointer;
  opacity: 0.5; filter: grayscale(50%);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
button[type="submit"].kuendigen-button:hover,
button[type="submit"].kuendigen-button:focus-visible {
  opacity: 1; filter: grayscale(0%);
}

/* Speichern-/Umbenennen-Buttons in der Jahresübersicht (Alex-Wunsch
   18.08.2026, "mach alle diese button dezenter") -- diese Aktion kommt sehr
   häufig vor (pro Zeile/Monat), ein voller grüner Hauptbutton wie bei
   "Zeile anlegen" wäre hier optisch zu dominant. Gleiches Blass-bis-Hover-
   Prinzip wie bei Löschen-/Kündigen-Buttons, zusätzlich kleiner. */
button[type="submit"].speichern-button {
  background: none; color: var(--text); border: 1px solid var(--rand);
  border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.8rem; cursor: pointer;
  opacity: 0.55; filter: grayscale(40%);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
button[type="submit"].speichern-button:hover,
button[type="submit"].speichern-button:focus-visible {
  opacity: 1; filter: grayscale(0%);
}

.formular { display: flex; flex-direction: column; gap: 0.85rem; max-width: 480px; margin-bottom: 2rem; }
.formular-inline { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.formular label { font-size: 0.9rem; color: #444; }
.formular input, .formular select, .formular textarea,
.buchung-edit-layout {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
}
.buchung-edit-layout > form {
  flex: 1 1 0; min-width: 0;
}
.buchung-csv-raw {
  flex: 0 0 38%; max-width: 38%; min-width: 260px;
  background: #f7f7f6; border: 1px solid var(--rand, #d8d8d3); border-radius: 8px; padding: 0.5rem 0.7rem;
  box-sizing: border-box;
}
.buchung-csv-raw pre {
  margin: 0.5rem 0 0; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; line-height: 1.35; background: transparent;
}
.formular-inline input, .formular-inline textarea {  width: 100%; padding: 0.55rem; border: 1px solid var(--rand); border-radius: 8px; font-size: 1rem; margin-top: 0.2rem;
}
.formular-inline textarea, .formular textarea { font-family: inherit; resize: vertical; }
.checkbox-zeile { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-zeile input { width: auto; }

.daten-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.daten-tabelle th, .daten-tabelle td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--rand); }
.daten-tabelle tr.inaktiv { opacity: 0.5; }
.daten-tabelle tr.summenzeile td { border-top: 2px solid var(--rand); background: var(--hintergrund); }
.daten-tabelle td.positiv { color: var(--marke-hell); }
.daten-tabelle td.negativ { color: var(--gefahr); }

.notiz-zelle { white-space: pre-wrap; max-width: 320px; }

@media (min-width: 900px) {
  .inhalt-breit .daten-tabelle { font-size: 0.82rem; }
  .inhalt-breit .daten-tabelle th, .inhalt-breit .daten-tabelle td { padding: 0.3rem 0.5rem; white-space: nowrap; }
  /* Notiz-Spalten sollen trotzdem umbrechen -- sonst reißt eine lange Notiz
     die Tabelle unnötig breit. */
  .inhalt-breit .daten-tabelle td.notiz-zelle { white-space: pre-wrap; }
  /* Zusätzlich noch etwas kompakter für besonders spaltenreiche Tabellen
     (z. B. Renten mit 11 Spalten) -- passt so eher auf einen Bildschirm,
     ohne horizontal scrollen zu müssen. Mit .kompakt auf .daten-tabelle
     aktivieren. */
  .inhalt-breit .daten-tabelle.kompakt { font-size: 0.74rem; }
  .inhalt-breit .daten-tabelle.kompakt th, .inhalt-breit .daten-tabelle.kompakt td { padding: 0.2rem 0.4rem; }
  .inhalt-breit .daten-tabelle.kompakt .notiz-zelle { max-width: 220px; }
}

/* Jahresübersicht kompakt (Alex-Wunsch 18.08.2026): auf PC/Tablet soll die
   Seite ohne (langes) Scrollen der ganzen Seite auskommen. Überschriften
   enger setzen und die Erklärung standardmäßig einklappen (siehe <details>
   im Template) gewinnt schon einiges an Höhe; zusätzlich bekommen die
   Einnahmen-/Ausgaben-Abschnitte je eine begrenzte, innerhalb scrollbare
   Höhe, damit die Gesamthöhe der Seite unabhängig von der Zahl der
   Kategorien/Positionen stabil bleibt -- auf Mobilgeräten (unter 900px)
   bewusst nicht erzwungen, dort bleibt normales Seiten-Scrollen einfacher. */
.jahresuebersicht-seite h1 { margin: 0.2rem 0 0.6rem; }
.jahresuebersicht-seite h2 { margin: 0.6rem 0 0.4rem; font-size: 1.1rem; }
.jahresuebersicht-hinweis { color: #666; margin: 0 0 0.5rem; font-size: 0.9rem; }
/* Wirkungsmonat-Marker (Alex-Fund 02.09.2026): kennzeichnet Buchungen, die
   in der Jahresübersicht NICHT in ihrem Kalendermonat zählen -- z. B. die am
   31.08. eingegangene Septembermiete. Siehe app/wirkungsmonat.py. */
.wirkungsmonat-marker {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.3rem;
  border-radius: 0.5rem; background: #eef2f7; color: #4a6079;
  font-size: 0.75rem; white-space: nowrap;
}
.jahresuebersicht-kategorie { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; margin-bottom: 0.75rem; }
.jahresuebersicht-kategorie-kopf {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: var(--hintergrund); border: 0; border-radius: 8px; padding: 0.55rem 0.75rem;
  cursor: pointer; font: inherit; text-align: left;
}
.jahresuebersicht-kategorie-inhalt { padding: 0 0.5rem; }
.jahresuebersicht-loeschen-form { display: inline; margin-left: 0.2rem; }
.jahresuebersicht-monatstabelle { margin-bottom: 0.5rem; }
.jahresuebersicht-monatstabelle th:first-child { min-width: 5rem; }
.jahresuebersicht-monatstabelle thead th { vertical-align: bottom; }
.jahresuebersicht-monatstabelle td, .jahresuebersicht-monatstabelle th { text-align: right; }
.jahresuebersicht-monatstabelle th:first-child { text-align: left; }
.jahresuebersicht-tabelle-scroll { overflow-x: auto; }
.jahresuebersicht-raster { table-layout: fixed; }
.jahresuebersicht-raster .jahresuebersicht-spalte-bezeichnung { width: 18rem; }
.jahresuebersicht-raster .jahresuebersicht-spalte-summe { width: 8rem; }
.jahresuebersicht-raster th:not(:first-child),
.jahresuebersicht-raster td:not(:first-child) { text-align: right; }
.jahresuebersicht-bezeichnung { overflow: hidden; }
.jahresuebersicht-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.jahresuebersicht-position {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 1.5rem !important;
}
.jahresuebersicht-position-inhalt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 1ch;
  min-width: 0;
  text-align: left;
}
.jahresuebersicht-position .jahresuebersicht-text {
  flex: 0 1 auto;
  max-width: calc(100% - 5.5rem);
  min-width: 0;
}
.jahresuebersicht-aktionssymbole {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.15rem;
}
.jahresuebersicht-aktionssymbole form { display: inline; }
.jahresuebersicht-wert {
  white-space: nowrap;
}
.jahresuebersicht-linkplatz {
  display: inline-block;
  width: 1.2rem;
  text-align: left;
}
.jahresuebersicht-erkannt-link { margin-left: 0; text-decoration: none; font-size: 0.85rem; }

/* Die zwölf Monatswerte und die Jahressumme brauchen auf einem Handy mehr
   Breite als der Bildschirm. Ohne Mindestbreite verteilt table-layout:fixed
   die Spalten auf wenige Pixel; Eingabefelder und Zahlen lagen dann übereinander.
   Horizontal scrollen ist hier wesentlich besser bedienbar als überlappende
   Werte. */
@media (max-width: 899px) {
  .jahresuebersicht-seite .jahresuebersicht-raster {
    min-width: 82rem;
    width: 82rem;
  }
  .jahresuebersicht-seite .jahresuebersicht-scrollbereich > div,
  .jahresuebersicht-seite .jahresuebersicht-tabelle-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .jahresuebersicht-seite .jahresuebersicht-eingabe {
    width: 4.25rem;
    min-width: 4.25rem;
  }
}
.jahresuebersicht-saldo { max-width: 56rem; }
.jahresuebersicht-detailseite .jahresuebersicht-scrollbereich {
  max-height: none;
  overflow-y: visible;
}
@media (min-width: 900px) {
  .jahresuebersicht-scrollbereich { max-height: 32vh; overflow-y: auto; }
  .jahresuebersicht-detailseite .jahresuebersicht-scrollbereich {
    max-height: none;
    overflow-y: visible;
  }
  .jahresuebersicht-scrollbereich thead th {
    position: sticky; top: 0; background: var(--karte); z-index: 1;
  }
}

.notiz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.notiz-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; }
.notiz-karte header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.notiz-karte footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; font-size: 0.8rem; color: #666; }
.notiz-bild { max-width: 100%; border-radius: 8px; margin-bottom: 0.5rem; }
.sichtbarkeit-badge { font-size: 0.7rem; background: var(--hintergrund); border: 1px solid var(--rand); border-radius: 999px; padding: 0.1rem 0.5rem; }

.tab-leiste .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab-leiste .tabs button { padding: 0.5rem 1rem; border: 1px solid var(--rand); background: white; border-radius: 8px; cursor: pointer; }
.tab-leiste .tabs button.aktiv { background: var(--marke); color: white; border-color: var(--marke); }

.abhak-liste { list-style: none; padding: 0; }
.abhak-liste li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rand); }
.abhak-liste.erledigt li span { text-decoration: line-through; color: #888; }
.checkbox-button { background: none; border: 1px solid var(--rand); border-radius: 6px; font-size: 1.1rem; width: 2rem; height: 2rem; cursor: pointer; }
.abhak-form { margin: 0; }

.datei-button { background: white; border: 1px solid var(--rand); border-radius: 8px; padding: 0.55rem 1rem; cursor: pointer; display: inline-block; }
.datei-button input { display: none; }

.ocr-zeile { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.ocr-zeile input[type="text"] { flex: 1; }

.kennzahlen-zeile { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.kennzahl { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.5rem; }
.kennzahl span { display: block; font-size: 0.8rem; color: #666; }
.kennzahl strong { font-size: 1.4rem; }
.kennzahl.positiv strong { color: var(--marke-hell); }
.kennzahl.negativ strong { color: var(--gefahr); }

.fehler-hinweis { color: var(--gefahr); min-height: 1.2rem; }

.zeilen-uebernahme-ziel,
.zeilen-uebernahme-quelle {
  display: flex;
  align-items: end;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}

.zeilen-uebernahme-ziel {
  background: #eef5ec;
  border: 1px solid #a9c9a0;
}

.zeilen-uebernahme-quelle {
  background: #fbeeee;
  border: 1px solid #d9a3a3;
  color: var(--gefahr);
}
.ueberschrift-zeile { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.lizenz-text { white-space: pre-wrap; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; font-size: 0.85rem; }
.button-zeile { display: flex; gap: 0.5rem; }

/* Solange Alpine.js (per defer-Script) noch nicht initialisiert ist, sollen
   x-show-Elemente nicht kurz unstyled aufblitzen -- betrifft z. B. die
   Detailzeilen der Jahresübersicht. */
[x-cloak] { display: none !important; }

/* Editierbare Monatsfelder in der Jahresübersicht (Detailzeilen je Position). */
.jahresuebersicht-eingabe { width: 4.5rem; padding: 0.25rem; font-size: 0.85rem; border: 1px solid var(--rand); border-radius: 4px; }
.inhalt-breit .jahresuebersicht-eingabe { width: 4rem; font-size: 0.78rem; padding: 0.2rem; }
/* Live aus den Darlehen-Stammdaten abgeleitete "Kredite"-Zellen (noch keine
   echte Buchung) -- optisch gedämpft/kursiv, damit klar ist, dass sie sich
   automatisch aktualisieren, bis sie einmal gespeichert werden. */
.jahresuebersicht-eingabe-live { font-style: italic; color: var(--marke-hell); border-style: dashed; background: var(--hintergrund); }

/* Ausreißer je Kategorie in der Jahresübersicht (Alex-Wunsch 02.09.2026:
   "nur wo der Bereich/Kategorie zu teuer ist, rot, bei günstiger grün").
   Bewusst nur ein zarter Hintergrund plus Textfarbe -- die Zeile bleibt eine
   Summenzeile und soll nicht schreien; auffällig sind ohnehin nur wenige
   Monate je Kategorie. */
.jahresuebersicht-teuer { background: #fdeaea; color: #a3241c; font-weight: 600; }
.jahresuebersicht-guenstig { background: #e9f6ec; color: #1c6b34; font-weight: 600; }

/* Monatszellen, deren Buchung(en) einem Vertrag/einer Versicherung
   zugeordnet sind (Alex-Wunsch 23.08.2026: "blaue Hervorhebung erkannter
   Buchungen, zum Springen anklickbar") -- blau statt der live-Zellen-Farbe
   oben, da hier bereits eine ECHTE, gespeicherte Buchung vorliegt. Der
   kleine 🔗-Link daneben (siehe jahresuebersicht-erkannt-link) springt zur
   gefilterten Kontenbuchungen-Liste. */
.jahresuebersicht-eingabe-erkannt { background: #eaf1fb; border-color: #2a6dc9; color: #1a4d8f; }

/* Erweiterung der obigen Erkennungsfarbe um drei weitere Zustände (Alex-
   Wunsch 24.08.2026, Farbcodierung der Jahresübersicht):
   - gelb: verknüpfte Zelle, Ist-Betrag weicht >5 % vom hinterlegten
     Vertrags-/Versicherungsbetrag ab -- lohnt einen Blick.
   - grün: eine echte, aus dem Kontoauszug importierte Buchung (quelle=
     csv_import) ohne Vertrags-/Versicherungszuordnung -- "nur als
     Abbuchung erkannt", noch keinem Stammdatensatz zugeordnet. Bewusst nur
     für echte Importe, nicht für manuell eingetragene Platzhalter (die
     bleiben ungefärbt wie bisher).
   - grau: verknüpft, aber der zugehörige Vertrag ist inzwischen gekündigt/
     inaktiv -- kein aktueller Soll-Betrag zum Abgleich vorhanden (siehe
     auch /finanzen/wiederkehrende-zahlungen: "davon sind viele bereits
     gekündigt"). */
.jahresuebersicht-eingabe-abweichung { background: #fdf3d8; border-color: #b8860b; color: #7a5c00; }
.jahresuebersicht-eingabe-abbuchung { background: #e7f5ea; border-color: #2f8f46; color: #1f6b31; }
.jahresuebersicht-eingabe-inaktiv { background: #eeeeec; border-color: #8a8a86; color: #5a5a56; }

/* Jahresübersicht-Zeilen, die zu einem Vertrag/einer Versicherung gehören
   (Alex-Wunsch 21.08.2026: "Punkte, wo Dokumente hinterliegen, farblich
   gekennzeichnet ... auf Klick komme ich zum passenden Vertrag/
   Versicherung"). Jede erkannte Zuordnung wird klickbar; nur bei bereits mit
   Paperless verknüpftem Dokument zusätzlich dunkelgrün hervorgehoben (--marke
   ist bereits die dunkelgrüne Markenfarbe der App). */
.jahresuebersicht-verknuepfung { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.jahresuebersicht-mit-dokument { color: var(--marke); font-weight: 600; text-decoration-style: solid; }

/* Sprungziel von der Jahresübersicht auf die passende Vertragszeile (siehe
   jahresuebersicht-mit-dokument oben) -- kurzzeitig hervorgehoben, damit die
   Zielzeile nach dem Sprung leicht zu finden ist. */
.daten-tabelle tr:target { background: #eaf4ea; }

/* Lade-Overlay (Alex-Wunsch 21.08.2026: "Ich brauche einen Status oder eine
   Info, was gerade gemacht wird" -- bei PDF-Einlesen/Kontoauszug-Import ist
   aktuell nicht erkennbar, ob die App noch arbeitet oder abgestürzt ist).
   Standardmäßig ausgeblendet ([hidden]), wird per JS in _lade_overlay.html
   nur für Formulare mit data-lade-hinweis eingeblendet -- siehe dort. */
.lade-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 24, 16, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.lade-overlay[hidden] { display: none; }
.lade-overlay-inhalt {
  background: var(--karte); border-radius: var(--radius); padding: 1.75rem 2rem;
  max-width: 380px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.lade-spinner {
  width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem;
  border: 4px solid var(--rand); border-top-color: var(--marke-hell);
  border-radius: 50%; animation: lade-spinner-dreh 0.8s linear infinite;
}
@keyframes lade-spinner-dreh { to { transform: rotate(360deg); } }
.lade-overlay-text { margin: 0 0 0.35rem; font-weight: 600; }
.lade-overlay-sekunden { margin: 0; color: #666; font-size: 0.85rem; }
.lade-overlay-hinweis-spaet { margin: 0.6rem 0 0; color: #8a2b25; font-size: 0.8rem; }

/* Diagramme (ApexCharts, siehe templates/_diagramm.html). Der Rahmen hält
   die Höhe frei, solange die Bibliothek noch lädt -- sonst springt der
   Seiteninhalt beim Zeichnen. */
.diagramm-rahmen { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.6rem 0.4rem 0.2rem; margin: 0.5rem 0 1rem; }
.diagramm { min-height: 260px; }
.diagramm .apexcharts-tooltip { font-size: 0.85rem; }
.diagramm .apexcharts-toolbar { padding-right: 0.2rem; }

/* Menue "Portale" (Nutzer-Wunsch 2026-09-19) */
.portale-menue { position: relative; }
.portale-menue > summary { cursor: pointer; list-style: none; }
.portale-menue > summary::-webkit-details-marker { display: none; }
.portale-liste { display: flex; flex-direction: column; gap: .35rem; padding: .4rem 0 0 .8rem; }
@media (min-width: 801px) {
  .portale-liste { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 14rem; padding: .6rem .9rem; background: #fff; border: 1px solid #d7e0ea; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
}
.portale-gruppe { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7785; margin-top: .3rem; }