/* app.css — Design-Tokens + Layout für alle Frontend-Seiten (PLAN2 §4.4).
   Eine Datei für die ganze App (Regel 9: kein Build, keine CDNs). Die
   Werte sind 1:1 aus den abgenommenen Mockups (mockups-v2/Main.dc.html,
   StartHandy.dc.html, StartDunkel.dc.html) übernommen — helle Palette als
   Grundeinstellung, dunkle über prefers-color-scheme.

   Die Schriften (OFL-Lizenz) liegen selbst gehostet unter fonts/ —
   Regel 9 (keine CDNs) bleibt gewahrt, das abgenommene Schriftbild auch. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  /* Helle Palette (Standard) — mockups-v2/Main.dc.html + StartHandy.dc.html */
  --bg-seite: #f7f7f4;
  --bg-flaeche: #fcfcfb;
  --bg-flaeche-gedimmt: #f2f2ee;
  --bg-badge-gedimmt: #e1e0d9;
  --bg-segment: #f0efec;
  --bg-segment-aktiv: #fcfcfb;
  --rand: rgba(11, 11, 11, 0.10);
  --rand-segment-aktiv: rgba(11, 11, 11, 0.10);
  --rand-feld: rgba(11, 11, 11, 0.14);

  --text: #0b0b0b;
  --text-sekundaer: #52514e;
  --text-tertiaer: #898781;
  --text-auf-akzent: #ffffff;
  --text-auf-badge-gedimmt: #52514e;

  --akzent: #0e6a85;
  --akzent-hover: #0a5063;

  --positiv-text: #006300;
  --positiv-bg: #eaf3ea;

  /* Buchungen (W5, mockups-v2/Buchungen.dc.html): eigene Chip-Farbe für
     automatisch (Regel/Modell) zugewiesene AUSGABEN-Kategorien — Einnahmen
     benutzen dagegen --positiv-*, s. buchungen.js. */
  --chip-auto-bg: #e8f0f3;
  --chip-auto-text: #0a5063;
  /* Gestrichelter "Kategorie wählen"-Chip (unkategorisiert). */
  --kategorie-fehlt-text: #c96a1f;
  /* Zeile mit angehakter Checkbox (Mehrfachauswahl). */
  --zeile-ausgewaehlt-bg: #f3f7f8;
  --schatten-popover: 0 12px 32px rgba(11, 11, 11, 0.16);
  --dialog-hintergrund: rgba(11, 11, 11, 0.5);
  /* Auf der Aktionsleiste (immer auf --akzent) — bewusst gleich in beiden
     Farbschemata, s. Kommentar bei der dunklen Palette. */
  --aktionsleiste-taste-bg: rgba(255, 255, 255, 0.14);

  --diagramm-linie: var(--akzent);
  --diagramm-gitter: #e1e0d9;
  --diagramm-grundlinie: #c3c2b7;
  --diagramm-text: #898781;

  --fehler-bg: #7a1f1f;
  --fehler-text: #ffffff;

  /* Einstellungen (W7, mockups-v2/Einstellungen.dc.html): Warnbox
     "Löschen nur mit Ziel", Schalter-Aus-Zustand (Konten: in_auswertung/aktiv). */
  --warn-bg: #fdf3ec;
  --warn-rand: #eddccb;
  --schalter-aus-bg: #c3c2b7;
  /* Notiz an einer Buchung (v2.1): eigene, warme Farbe — bewusst NICHT die
     Warnfarbe (--warn-*): eine Notiz ist kein Problem, sondern ein Merker. */
  --notiz-bg: #fbf3d8;
  --notiz-rand: #e8d9a4;
  --notiz-text: #7a5a12;

  --schrift-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-zahl: "Space Grotesk", var(--schrift-ui);

  --radius-karte: 10px;
  --radius-chip: 999px;
  --radius-segment-aussen: 8px;
  --radius-segment-innen: 6px;
  --radius-popover: 12px;

  --hoehe-kopf: 64px;
  --breite-inhalt: 1288px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dunkle Palette — mockups-v2/StartDunkel.dc.html */
    --bg-seite: #0d0d0d;
    --bg-flaeche: #1a1a19;
    --bg-flaeche-gedimmt: #141413;
    --bg-badge-gedimmt: #2c2c2a;
    --bg-segment: #2c2c2a;
    --bg-segment-aktiv: #1a1a19;
    --rand: rgba(255, 255, 255, 0.10);
    --rand-segment-aktiv: rgba(255, 255, 255, 0.14);
    --rand-feld: rgba(255, 255, 255, 0.18);

    --text: #ffffff;
    --text-sekundaer: #c3c2b7;
    --text-tertiaer: #898781;
    --text-auf-akzent: #0d0d0d;
    --text-auf-badge-gedimmt: #c3c2b7;

    --akzent: #4da3bf;
    --akzent-hover: #6fb8d0;

    --positiv-text: #7cd992;
    --positiv-bg: rgba(46, 125, 50, 0.22);

    --chip-auto-bg: rgba(77, 163, 191, 0.18);
    --chip-auto-text: #8cc9de;
    --kategorie-fehlt-text: #e0975a;
    --zeile-ausgewaehlt-bg: rgba(77, 163, 191, 0.10);
    --schatten-popover: 0 12px 32px rgba(0, 0, 0, 0.5);
    --dialog-hintergrund: rgba(0, 0, 0, 0.65);

    --diagramm-linie: var(--akzent);
    --diagramm-gitter: #2c2c2a;
    --diagramm-grundlinie: #383835;
    --diagramm-text: #898781;

    --fehler-bg: #b23a3a;
    --fehler-text: #ffffff;

    --warn-bg: rgba(201, 106, 31, 0.14);
    --warn-rand: rgba(201, 106, 31, 0.35);
    --schalter-aus-bg: #3a3a38;
    --notiz-bg: rgba(196, 154, 41, 0.18);
    --notiz-rand: rgba(196, 154, 41, 0.38);
    --notiz-text: #e2c778;
  }
}

/* Erzwungene Wahl über data-theme (Einstellungen, spätere Wellen) —
   gewinnt in beide Richtungen gegen prefers-color-scheme. */
:root[data-theme="dark"] {
  --bg-seite: #0d0d0d;
  --bg-flaeche: #1a1a19;
  --bg-flaeche-gedimmt: #141413;
  --bg-badge-gedimmt: #2c2c2a;
  --bg-segment: #2c2c2a;
  --bg-segment-aktiv: #1a1a19;
  --rand: rgba(255, 255, 255, 0.10);
  --rand-segment-aktiv: rgba(255, 255, 255, 0.14);
  --rand-feld: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-sekundaer: #c3c2b7;
  --text-tertiaer: #898781;
  --text-auf-akzent: #0d0d0d;
  --text-auf-badge-gedimmt: #c3c2b7;
  --akzent: #4da3bf;
  --akzent-hover: #6fb8d0;
  --positiv-text: #7cd992;
  --positiv-bg: rgba(46, 125, 50, 0.22);
  --chip-auto-bg: rgba(77, 163, 191, 0.18);
  --chip-auto-text: #8cc9de;
  --kategorie-fehlt-text: #e0975a;
  --zeile-ausgewaehlt-bg: rgba(77, 163, 191, 0.10);
  --schatten-popover: 0 12px 32px rgba(0, 0, 0, 0.5);
  --dialog-hintergrund: rgba(0, 0, 0, 0.65);
  --diagramm-linie: var(--akzent);
  --diagramm-gitter: #2c2c2a;
  --diagramm-grundlinie: #383835;
  --diagramm-text: #898781;

  --warn-bg: rgba(201, 106, 31, 0.14);
  --warn-rand: rgba(201, 106, 31, 0.35);
  --schalter-aus-bg: #3a3a38;
  --notiz-bg: rgba(196, 154, 41, 0.18);
  --notiz-rand: rgba(196, 154, 41, 0.38);
  --notiz-text: #e2c778;
}

/* ---------------------------------------------------------------------
   Grundgerüst
   --------------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Author-Regeln schlagen die UA-Regel "[hidden]{display:none}" bei
   gleicher Spezifität IMMER (Herkunft vor Spezifität) — jede eigene
   Klasse, die selbst "display" setzt (.abschnitt, .karte, .tabbar, …),
   würde das HTML-Attribut sonst wirkungslos machen. Einmal zentral
   richtiggestellt, gilt es für alle Seiten (W4–W7). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* Kein horizontales Scrollen, nie (PLAN2 §4.4 Design-Grundsatz). */
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--bg-seite);
  color: var(--text);
  font-family: var(--schrift-ui);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hover); }

.zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
}

.app-rahmen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Wiederverwendbare Bausteine (W5–W7 bauen darauf auf)
   --------------------------------------------------------------------- */

.karte {
  background: var(--bg-flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
}

.karte-gedimmt {
  background: var(--bg-flaeche-gedimmt);
}

.chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-chip);
  padding: 4px 10px;
  white-space: nowrap;
  /* Reset für <button class="chip">: Buchungen-Chips sind klickbar (Regel
     10/§4.4 "Klick auf den Chip → Popover"), tragen also von Natur aus den
     nativen Button-Rahmen/-Hintergrund. ".chip-kategorie-fehlt" (gleiche
     Spezifität, aber SPÄTER in dieser Datei — s. Buchungen-Abschnitt)
     überschreibt "border" gezielt wieder mit ihrem gestrichelten Rahmen. */
  border: none;
  background: none;
}
/* Zeigefinger nur für WIRKLICH klickbare Chips (<button class="chip">,
   Buchungen-Kategorie-Chips) — der reine Anzeige-Chip auf der Startseite
   (<span class="chip chip-positiv">, Vermögens-Differenz) bleibt ohne
   Klick-Cursor, weil er nicht interaktiv ist. */
button.chip { cursor: pointer; }

.chip-positiv { color: var(--positiv-text); background: var(--positiv-bg); }

/* Negative/neutrale Beträge bekommen bewusst KEINE Warnfarbe (Rot) —
   dieselbe Zurückhaltung wie bei Buchungszeilen (PLAN2 §4.4: "Ausgaben in
   Textfarbe, Einnahmen grün"), nur eben als gedeckter Chip. */
.chip-negativ { color: var(--text-sekundaer); background: var(--bg-segment); }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-auf-akzent);
  background: var(--akzent);
  border-radius: var(--radius-chip);
  padding: 3px 9px;
  text-decoration: none;
}
.badge:hover { color: var(--text-auf-akzent); filter: brightness(1.08); }

.badge-gedimmt {
  color: var(--text-auf-badge-gedimmt);
  background: var(--bg-badge-gedimmt);
}

.segment {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-segment);
  border-radius: var(--radius-segment-aussen);
  padding: 3px;
}

.segment-taste {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-sekundaer);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-segment-innen);
  padding: 5px 12px;
  cursor: pointer;
}

.segment-taste .kurz { display: none; }

.segment-taste.aktiv {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-segment-aktiv);
  border-color: var(--rand-segment-aktiv);
}

.beschriftung-klein {
  font-size: 13px;
  color: var(--text-sekundaer);
}

.leerzustand {
  margin: 48px auto;
  max-width: 32em;
  text-align: center;
  color: var(--text-sekundaer);
  font-size: 14px;
}

/* Globaler Fehlerbalken (lib/api.js) — dezent, oben, verschwindet nach
   Erfolg/Timeout von selbst. */
.fehlerbalken {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--fehler-text);
  background: var(--fehler-bg);
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}
.fehlerbalken.sichtbar { transform: translateY(0); }

/* ---------------------------------------------------------------------
   Navigation — Desktop: schmale Leiste oben. Handy (<700px): Tabbar unten.
   --------------------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--hoehe-kopf);
  padding: 0 48px;
  background: var(--bg-flaeche);
  border-bottom: 1px solid var(--rand);
}

.marke {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--akzent);
  white-space: nowrap;
}

.hauptnav { display: flex; gap: 8px; font-size: 14px; }

.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-sekundaer);
}
.nav-link:hover { color: var(--text); }
.nav-link.aktiv {
  background: var(--akzent);
  color: var(--text-auf-akzent);
  font-weight: 600;
}
.nav-link.aktiv:hover { color: var(--text-auf-akzent); }

.stand {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-tertiaer);
  white-space: nowrap;
}

.kopf-mobil {
  display: none;
  align-items: baseline;
  gap: 10px;
  padding: 22px 20px 12px;
}
.kopf-mobil .marke { font-size: 19px; }
.kopf-mobil .stand { font-size: 11.5px; }

.tabbar {
  display: none;
  background: var(--bg-flaeche);
  border-top: 1px solid var(--rand);
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  /* Fest am Bildschirmrand, nicht nur "sticky" — bei acht echten Konten
     ist die Startseite länger als der Bildschirm, eine nur scrollende
     Tabbar wäre dann erst ganz unten zu sehen (PLAN2 §4.4: "am Handy
     unten" heißt dauerhaft sichtbar, wie eine native App-Tableiste). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
}

.tab-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-tertiaer);
  padding: 2px 0;
}
.tab-link svg { width: 22px; height: 22px; }
.tab-link span { font-size: 10.5px; }
.tab-link.aktiv { color: var(--akzent); }
.tab-link.aktiv span { font-weight: 600; }

/* ---------------------------------------------------------------------
   Startseite
   --------------------------------------------------------------------- */

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.abschnitt { display: flex; flex-direction: column; gap: 14px; }

.abschnitt-kopf { display: flex; align-items: baseline; gap: 14px; }
.abschnitt-kopf h1 { margin: 0; font-size: 16px; font-weight: 600; }

.konten-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Konto-Gruppen (Startseite): ein Grid je Gruppe, dazwischen eine
   Zwischenüberschrift. Genau das ist der „Zeilenumbruch an bestimmter
   Stelle" — nur eben benannt, damit man sieht, WARUM getrennt wird. */
.konten-behaelter { display: flex; flex-direction: column; gap: 18px; }
.konten-gruppe-titel {
  margin: 6px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiaer);
}

/* Aufklappbarer Block (inaktive Konten). */
.klappe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sekundaer);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.klappe:hover { color: var(--text); }
.klappe-pfeil { transition: transform 0.15s ease; flex: none; }
.klappe[aria-expanded="true"] .klappe-pfeil { transform: rotate(90deg); }

/* Warnbanner (Startseite): Abruf hakt — TAN/Freigabe, Fehler, Stille. */
.warnbanner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-sekundaer);
}
.warnbanner svg { flex: none; color: var(--kategorie-fehlt-text); }
.warnbanner-knopf {
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--akzent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

/* Warn-Badge auf einer Kontokarte — dieselbe Form wie das Ungelesen-Badge,
   aber in der Warnfarbe statt im Akzent. */
.badge-warnung {
  color: var(--kategorie-fehlt-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
}
.badge-warnung:hover { filter: brightness(0.97); }

/* Der Abruf-Dialog erbt die Form des Lösch-Dialogs, aber nicht dessen Rot:
   „Verstanden" bestätigt nur, es löscht nichts. */
.abruf-dialog .loeschen-dialog-tasten button.primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-auf-akzent);
}

.abruf-dialog-meldung {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiaer);
  background: var(--bg-flaeche-gedimmt);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-word;
}

.konto-karte {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.konto-karte-kopf { display: flex; align-items: center; gap: 8px; }

.konto-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.konto-namensblock {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.konto-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konto-untertitel {
  font-size: 12px;
  color: var(--text-tertiaer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konto-karte-kopf .badge { margin-left: auto; flex: none; }

.konto-karte-reihe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.konto-saldo { font-size: 26px; font-weight: 700; white-space: nowrap; }

.konto-sparkline {
  flex: none;
  width: 120px;
  height: 36px;
}

.konto-karte-gedimmt {
  /* Konto ohne Auswertung (mockups-v2/Main.dc.html: "Firma GmbH") —
     eigener, gedimmter Kartenhintergrund statt nur gedimmtem Text. */
  background: var(--bg-flaeche-gedimmt);
}

.konto-karte-gedimmt .konto-name,
.konto-karte-gedimmt .konto-saldo {
  color: var(--text-sekundaer);
}

.vermoegen-karte {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vermoegen-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vermoegen-summe {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vermoegen-wert { font-size: 30px; font-weight: 700; }

#zeitraum-umschalter { margin-left: auto; }

.vermoegen-diagramm { width: 100%; height: 220px; }

/* ---------------------------------------------------------------------
   Responsiv: unter 1100px zwei Spalten, unter 700px eine Spalte + Tabbar
   statt Kopfzeile (PLAN2 §4.4).
   --------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .inhalt { padding: 28px 32px 40px; }
  .konten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .kopf { display: none; }
  .kopf-mobil { display: flex; }
  .tabbar { display: flex; }

  /* Unten Platz für die fest positionierte Tabbar lassen, sonst
     verschwindet die letzte Kontokarte teilweise darunter. */
  .inhalt {
    padding: 0 16px calc(76px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
  }

  .konten-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .konto-karte { padding: 14px 16px; gap: 8px; }
  .konto-name { font-size: 14px; }
  .konto-untertitel { display: none; }
  .konto-saldo { font-size: 22px; }
  .konto-sparkline { width: 96px; height: 28px; }

  .vermoegen-karte { padding: 16px; gap: 10px; }
  .vermoegen-wert { font-size: 24px; }
  .vermoegen-diagramm { height: 110px; }

  .segment-taste .voll { display: none; }
  .segment-taste .kurz { display: inline; }

  /* Segmentierte Umschalter am Handy etwas kompakter (StartHandy.dc.html). */
  .segment { gap: 3px; padding: 2px; }
  .segment-taste { font-size: 11px; padding: 4px 8px; }
}

/* =======================================================================
   Buchungen (W5, mockups-v2/Buchungen.dc.html + BuchungenHandy.dc.html)
   ======================================================================= */

.inhalt-buchungen { gap: 14px; padding-top: 24px; }

/* -- Eingabefeld-Look (Suchfeld, Mehrfachauswahl-Knöpfe, Selects) -------- */

.feld {
  font: inherit;
  font-size: 13px;
  color: var(--text-sekundaer);
  background: var(--bg-flaeche);
  border: 1px solid var(--rand-feld);
  border-radius: 8px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feld svg { flex: none; color: var(--text-tertiaer); }

button.feld {
  cursor: pointer;
  white-space: nowrap;
}
button.feld:hover { border-color: var(--rand-segment-aktiv); color: var(--text); }
button.feld[aria-expanded="true"] { border-color: var(--akzent); color: var(--text); }

/* Kein Flex-Wachstum als Standard — ".feld-suche" steckt sowohl in der
   WAAGRECHTEN Desktop-Filterleiste als auch in SENKRECHTEN Flex-Spalten
   (Handy-Filterleiste, Kategorie-Popover); "flex: 1 1 240px" würde dort
   als 240px hohe statt breite Box wirken (flex-basis zeigt immer auf die
   Hauptachse). Das Breitenwachstum gilt deshalb nur gezielt für die
   waagrechte Desktop-Filterleiste, s. Media-Query unten. */
.feld-suche { min-width: 0; }
@media (min-width: 700px) {
  .filterleiste .feld-suche { min-width: 240px; flex: 1 1 240px; }
}
.feld-eingabe {
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  min-width: 0;
}
.feld-eingabe::placeholder { color: var(--text-tertiaer); }

.feld-auswahl select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.filterleiste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filterleiste-sortierung { margin-left: auto; }

/* -- Mehrfachauswahl-/Zeitraum-Popover ----------------------------------- */

.mehrfachauswahl { position: relative; display: inline-flex; }

.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--bg-flaeche);
  border: 1px solid var(--rand-feld);
  border-radius: var(--radius-popover);
  box-shadow: var(--schatten-popover);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
}

.popover-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 320px;
  overflow-y: auto;
}

.popover-gruppentitel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiaer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 8px 2px;
}
.popover-gruppentitel:first-child { padding-top: 4px; }

.popover-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  font: inherit;
}
.popover-eintrag:hover { background: var(--bg-segment); }
.popover-eintrag input[type="checkbox"] { width: 15px; height: 15px; flex: none; }

.popover-zeitraum-schnell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.popover-zeitraum-schnell button {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-sekundaer);
  background: var(--bg-segment);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
}
.popover-zeitraum-schnell button.aktiv {
  background: var(--bg-segment-aktiv);
  border-color: var(--akzent);
  color: var(--text);
  font-weight: 600;
}
.popover-zeitraum-frei {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--rand);
  padding-top: 8px;
}
.popover-zeitraum-frei label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--text-tertiaer);
  flex: 1;
}
.popover-zeitraum-frei input {
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-flaeche-gedimmt);
  border: 1px solid var(--rand-feld);
  border-radius: 6px;
  padding: 5px 7px;
}

/* -- Trefferkopf ---------------------------------------------------------*/

.trefferkopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px;
  font-size: 13.5px;
}
.trefferkopf-anzahl { font-weight: 600; }
.trefferkopf-summe { color: var(--text-sekundaer); }

/* -- Aktionsleiste (Mehrfachauswahl) -------------------------------------*/

.aktionsleiste {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--akzent);
  color: var(--text-auf-akzent);
  border-radius: 10px;
  padding: 10px 18px;
  position: sticky;
  top: 8px;
  z-index: 40;
}

.aktionsleiste-zaehler { font-size: 13px; font-weight: 600; white-space: nowrap; }

.aktionsleiste-taste {
  font: inherit;
  font-size: 13px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aktionsleiste-taste-bg);
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.aktionsleiste-taste:hover { filter: brightness(1.1); }
.aktionsleiste-taste .kurz { display: none; }

.aktionsleiste-aufheben {
  margin-left: auto;
  font-size: 13px;
  opacity: 0.85;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.aktionsleiste-aufheben:hover { opacity: 1; }

.aktion-bestaetigung {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-flaeche-gedimmt);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
}
.aktion-bestaetigung-tasten { display: flex; gap: 8px; margin-left: auto; }
.aktion-bestaetigung button {
  font: inherit;
  font-size: 12.5px;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid var(--rand-feld);
  background: var(--bg-flaeche);
  color: var(--text);
}
.aktion-bestaetigung button.primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-auf-akzent);
  font-weight: 600;
}

/* -- Buchungsliste ---------------------------------------------------- */

.liste-karte { display: flex; flex-direction: column; position: relative; }

.liste-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rand);
}
.liste-kopf input[type="checkbox"] { width: 16px; height: 16px; }

.buchung-zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rand);
}
.buchung-zeile:last-child { border-bottom: none; }
.buchung-zeile.ausgewaehlt { background: var(--zeile-ausgewaehlt-bg); }

/* Buchung mit Notiz: schmaler farbiger Streifen am linken Rand — im
   Überfliegen sofort sichtbar, ohne die Zeile umzubauen. Der Streifen ist
   ein Innenschatten statt eines Rahmens, damit die Zeilenhöhe gleich
   bleibt (ein border-left würde alle Zeilen um 3px verschieben). */
.buchung-zeile.hat-notiz { box-shadow: inset 3px 0 0 var(--notiz-rand); }

.buchung-checkbox { width: 16px; height: 16px; margin-top: 3px; flex: none; cursor: pointer; }

.buchung-punkt {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.buchung-punkt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akzent);
}
.buchung-punkt.gelesen::before { background: transparent; }
.buchung-punkt:not(.gelesen):hover::before { background: var(--akzent-hover); }

.buchung-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buchung-inhalt.umbuchung { opacity: 0.65; }

.buchung-kopfzeile { display: flex; align-items: baseline; gap: 12px; }
.buchung-gegenpartei {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.buchung-gegenpartei.ungelesen-partei { font-weight: 600; }
.buchung-gegenpartei.gelesen-partei { font-weight: 500; color: var(--text-sekundaer); }
.buchung-betrag { margin-left: auto; font-size: 15px; font-weight: 600; white-space: nowrap; flex: none; }
.buchung-betrag.positiv { color: var(--positiv-text); }

.buchung-zweck {
  font-size: 13px;
  color: var(--text-sekundaer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buchung-unterzeile { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.buchung-datum-konto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-tertiaer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buchung-unterzeile .chip { flex: none; }

/* Notiz-Chip (v2.1): zeigt den Anfang der Notiz, voller Text im title.
   Anders als die übrigen Chips DARF er schrumpfen (flex: 0 1 auto) — eine
   lange Notiz soll die Zeile kürzen, nicht sprengen; die Ellipse sitzt auf
   dem inneren <span>, weil text-overflow an einem Flex-Container selbst
   nicht greift. */
.buchung-unterzeile .chip-notiz {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 340px;
  gap: 5px;
  font-size: 11.5px;
  color: var(--notiz-text);
  background: var(--notiz-bg);
  border: 1px solid var(--notiz-rand);
  cursor: pointer;
}
.chip-notiz:hover { filter: brightness(0.97); }
.chip-notiz .chip-icon { width: 11px; height: 11px; }
.chip-notiz-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* -- Kategorie-Chips ------------------------------------------------------*/

.chip-auto { background: var(--chip-auto-bg); color: var(--chip-auto-text); }
.chip-hand { background: var(--bg-segment); color: var(--text-sekundaer); }
.chip-umbuchung { background: var(--bg-segment); color: var(--text-sekundaer); }
.chip-icon { width: 10px; height: 10px; flex: none; }
.chip-umbuchung .chip-icon { width: 11px; height: 11px; }

.chip-kategorie-fehlt {
  border: 1.5px dashed var(--kategorie-fehlt-text);
  color: var(--kategorie-fehlt-text);
  background: var(--bg-flaeche);
  font-weight: 600;
  cursor: pointer;
}
.chip-kategorie-fehlt:hover { filter: brightness(1.05); }

/* -- Kategorie-Zuweisungs-Popover (Klick auf einen Chip) ------------------*/

.popover-kategorie { position: fixed; min-width: 280px; max-width: min(320px, calc(100vw - 16px)); }
.kategorie-liste { max-height: 260px; }
.kategorie-eintrag.aktiv { background: var(--chip-auto-bg); color: var(--chip-auto-text); font-weight: 600; }
.kategorie-regel-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-sekundaer);
  border-top: 1px solid var(--rand);
  padding-top: 10px;
  cursor: pointer;
}
.kategorie-regel-checkbox input { width: 15px; height: 15px; }
.kategorie-uebernehmen {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-auf-akzent);
  background: var(--akzent);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
}
.kategorie-uebernehmen:hover { background: var(--akzent-hover); }
.kategorie-hinweis {
  font-size: 12px;
  color: var(--positiv-text);
  text-align: center;
}

/* -- Paginierung + Export -------------------------------------------------*/

.fuss-leiste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.paginierung { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sekundaer); }
.paginierung button {
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.paginierung button:disabled { opacity: 0.4; cursor: default; }
.paginierung button.aktiv {
  border-color: var(--rand-feld);
  background: var(--bg-flaeche);
  color: var(--text);
  font-weight: 600;
}

.export-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-tertiaer);
}
.export-link:hover { color: var(--akzent-hover); }

/* -- Detail-Overlay (<dialog>) ---------------------------------------------*/

/* EIN Scrollbalken, nicht zwei: Bis v2.0 hatten Dialog UND Inhalt je eine
   eigene Höhenschranke (86vh außen, "calc(86vh - 58px)" innen). Der
   angenommene Kopf von 58px war einen Tick zu niedrig — der Rest quoll aus
   dem Dialog heraus und erzeugte einen zweiten, äußeren Balken. Jetzt hält
   der Dialog die Schranke (overflow: hidden), und der Inhalt bekommt den
   Rest über Flex (flex: 1 + min-height: 0) statt über eine gerechnete Höhe.

   Achtung (dieselbe Falle wie bei .loeschen-dialog): "display: flex" darf
   NICHT auf der Basisklasse stehen — es würde als Autor-Regel die
   UA-Regel "dialog:not([open]) { display: none }" schlagen und den Dialog
   dauerhaft sichtbar machen. Deshalb hängt es an [open]. */
.detail-dialog {
  border: none;
  border-radius: var(--radius-karte);
  padding: 0;
  /* Breiter als früher (560px) und mit zweispaltigen Feldern: So passt der
     Inhalt bei 100 % Zoom auf einen normalen Bildschirm, ohne zu scrollen. */
  width: min(860px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  background: var(--bg-flaeche);
  color: var(--text);
  box-shadow: var(--schatten-popover);
}
.detail-dialog[open] { display: flex; flex-direction: column; }
.detail-dialog::backdrop { background: var(--dialog-hintergrund); }

.detail-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rand);
}
.detail-kopf h2 { margin: 0; font-size: 15px; font-weight: 600; }
.detail-schliessen {
  margin-left: auto;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--text-tertiaer);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.detail-schliessen:hover { color: var(--text); }

.detail-inhalt {
  padding: 16px 20px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Zwei Spalten aus je (Feldname, Wert) — halbiert die Höhe der Feldliste,
   damit die Buchung als Ganzes ohne Scrollen sichtbar bleibt. Unter 720px
   fällt sie auf eine Spalte zurück (s. Responsiv-Block unten). */
.detail-felder {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  gap: 7px 14px;
  font-size: 13px;
  align-items: baseline;
}
.detail-felder dt { color: var(--text-tertiaer); }
.detail-felder dd { margin: 0; color: var(--text); word-break: break-word; }
/* Lange Felder (Zweck, Buchungstext) über die volle Breite. */
.detail-felder .breit { grid-column: 2 / -1; }

.detail-abschnitt-titel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiaer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.detail-notiz textarea {
  width: 100%;
  min-height: 56px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-flaeche-gedimmt);
  border: 1px solid var(--rand-feld);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}
.detail-notiz-tasten { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.detail-notiz-speichern {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-auf-akzent);
  background: var(--akzent);
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.detail-notiz-status { font-size: 12px; color: var(--positiv-text); }

/* Notiz und Änderungsprotokoll nebeneinander — spart die Höhe, die der
   Dialog sonst zum Scrollen zwingt. */
.detail-unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.detail-protokoll { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.detail-protokoll li { font-size: 12.5px; color: var(--text-sekundaer); display: flex; gap: 8px; }
.detail-protokoll .zeitpunkt { color: var(--text-tertiaer); white-space: nowrap; }
.detail-protokoll-leer { font-size: 12.5px; color: var(--text-tertiaer); }

/* Schmale Fenster: Felder und der untere Teil wieder einspaltig. */
@media (max-width: 760px) {
  .detail-felder { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .detail-felder .breit { grid-column: 2 / -1; }
  .detail-unten { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------
   Responsiv: unter 700px — Filterleiste hinter "Filter" aufklappbar,
   Aktionsleiste schwebend über der Tabbar, kompakte Zeilen (BuchungenHandy).
   ----------------------------------------------------------------------- */

.kopf-mobil-buchungen { flex-direction: column; align-items: stretch; gap: 10px; }
.kopf-mobil-buchungen .kopf-mobil-zeile { display: flex; align-items: center; gap: 10px; }
.kopf-mobil-buchungen .kopf-mobil-titel { font-size: 17px; font-weight: 600; }
.filter-knopf-mobil { margin-left: auto; display: none; }

/* Desktop-Trefferkopf ausblenden, sobald der Handy-Kopf (mit eigenem
   Trefferkopf) sichtbar ist — sonst stünde die Zeile doppelt da. */
@media (max-width: 699px) {
  #trefferkopf { display: none; }
  .aktionsleiste-taste .voll { display: none; }
  .aktionsleiste-taste .kurz { display: inline; }
}

@media (max-width: 699px) {
  .filter-knopf-mobil { display: inline-flex; }

  .filterleiste {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--bg-flaeche);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 12px;
  }
  .filterleiste.offen { display: flex; }
  .filterleiste-sortierung { margin-left: 0; }
  /* .feld-suche trägt am Desktop "flex: 1 1 240px" für die waagrechte
     Filterleiste — in der Handy-Filterleiste steht sie aber in einer
     SPALTE (flex-direction: column), wo dieselbe Regel eine 240px hohe
     statt breite Box ergäbe (flex-basis wirkt an der Hauptachse). Deshalb
     hier zurücksetzen. */
  .mehrfachauswahl,
  .mehrfachauswahl .feld,
  .feld-suche { width: 100%; flex: none; min-width: 0; }
  .popover { position: static; box-shadow: none; width: 100%; margin-top: 6px; }

  .segment-gelesen-mobil { align-self: flex-start; }

  .trefferkopf-mobil { font-size: 12.5px; }

  .liste-kopf { padding: 8px 16px; }
  .buchung-zeile { padding: 13px 16px; gap: 10px; }
  .buchung-checkbox { width: 17px; height: 17px; }
  .buchung-gegenpartei { font-size: 14px; }
  .buchung-betrag { font-size: 14px; }
  .buchung-zweck { max-width: none; }
  .buchung-datum-konto { font-size: 11px; }

  .aktionsleiste {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + 60px + env(safe-area-inset-bottom, 0px));
    top: auto;
    box-shadow: 0 8px 24px rgba(11, 11, 11, 0.18);
    z-index: 600;
  }

  .fuss-leiste { padding-bottom: 12px; }
}

/* =======================================================================
   Statistik (W6, mockups-v2/Statistik.dc.html)
   ======================================================================= */

.inhalt-statistik { gap: 20px; padding-top: 24px; }

/* -- Zeitraumwähler im Kopf ---------------------------------------------- */

.kopf .zeitraum-segment { margin-left: auto; }
.kopf-mobil-statistik { flex-direction: column; align-items: stretch; gap: 10px; }
.kopf-mobil-statistik .kopf-mobil-zeile { display: flex; align-items: center; }
.kopf-mobil-statistik .kopf-mobil-titel { font-size: 17px; font-weight: 600; }
.kopf-mobil-statistik .zeitraum-segment { align-self: flex-start; }

/* -- Gemeinsame Karten-Bausteine ------------------------------------------ */

.karte-kopfzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.karte-kopfzeile h2 { margin: 0; font-size: 15px; font-weight: 600; }

.diagramm-legende { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-sekundaer); }
.legende-punkt { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.leerzustand-klein {
  margin: 8px 0 0;
  text-align: center;
  color: var(--text-tertiaer);
  font-size: 12.5px;
  padding: 20px 0;
}

.filterchips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.filterchip {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-sekundaer);
  background: none;
  border: 1px solid var(--rand-feld);
  border-radius: var(--radius-chip);
  padding: 4px 12px;
  cursor: pointer;
}
.filterchip:hover { border-color: var(--akzent); color: var(--text); }
.filterchip.aktiv {
  font-weight: 600;
  color: var(--text-auf-akzent);
  background: var(--akzent);
  border-color: var(--akzent);
}

/* -- Kennzahlen-Kacheln ---------------------------------------------------*/

.kennzahlen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kennzahl-karte { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.kennzahl-label { font-size: 12.5px; color: var(--text-sekundaer); }
.kennzahl-wert { font-size: 28px; font-weight: 700; }
.kennzahl-wert-positiv { color: var(--positiv-text); }
.kennzahl-hinweis { font-size: 12px; color: var(--text-tertiaer); min-height: 1em; }

/* -- Einnahmen/Ausgaben je Monat ------------------------------------------*/

.monatsbalken-karte { padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.monatsbalken-diagramm { width: 100%; height: 240px; }

/* -- Zweispaltiger Block: Ranking + Zeitverlauf ---------------------------*/

.statistik-zweispaltig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* -- Kategorien-Ranking ----------------------------------------------------*/

.ranking-karte { padding: 22px 26px; display: flex; flex-direction: column; gap: 4px; }
.ranking-block { display: flex; flex-direction: column; gap: 11px; }
.ranking-block h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ranking-trenner { border-top: 1px solid var(--rand); margin: 14px 0 2px; }

.ranking-block-umschalter {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.ranking-block-umschalter .ranking-chevron-icon { color: var(--text-tertiaer); transition: transform 0.15s; flex: none; }
.ranking-block-umschalter.aufgeklappt .ranking-chevron-icon { transform: rotate(90deg); }

.ranking-liste { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.ranking-hinweis { font-size: 12px; color: var(--text-tertiaer); }

.ranking-zeile-gruppe { display: flex; align-items: center; gap: 10px; }
.ranking-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiaer);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ranking-chevron svg { transition: transform 0.15s; }
.ranking-chevron.aufgeklappt svg { transform: rotate(90deg); }
.ranking-chevron-platzhalter { cursor: default; }

.ranking-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.ranking-label {
  width: 150px;
  flex: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-balken-spur {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: var(--bg-segment);
  overflow: hidden;
}
.ranking-balken-fuellung { height: 100%; border-radius: 4px; }
.ranking-betrag { width: 74px; flex: none; text-align: right; font-weight: 600; }

.ranking-kinder { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.ranking-zeile-kategorie { display: flex; align-items: center; gap: 10px; padding-left: 22px; color: var(--text-sekundaer); }
.ranking-zeile-kategorie .ranking-label { width: 138px; font-weight: 400; }
.ranking-zeile-kategorie .ranking-balken-spur { height: 10px; }
.ranking-zeile-kategorie .ranking-betrag { font-weight: 400; }

/* -- Kategorie im Zeitverlauf ----------------------------------------------*/

.zeitverlauf-karte { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.zeitverlauf-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zeitverlauf-chip { gap: 5px; }
.chip-entfernen-btn {
  display: inline-flex;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.zeitverlauf-hinzufuegen {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--akzent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.zeitverlauf-hinzufuegen:hover { color: var(--akzent-hover); }
.zeitverlauf-diagramm { width: 100%; height: 230px; }

/* -- Vermögensverlauf -------------------------------------------------------*/

.vermoegensverlauf-karte { padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1099px) {
  .kennzahlen-grid { grid-template-columns: minmax(0, 1fr); }
  .statistik-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 699px) {
  .kopf .zeitraum-segment,
  .kopf-mobil-statistik .zeitraum-segment { gap: 3px; padding: 2px; }
  .kopf-mobil-statistik .zeitraum-segment .segment-taste { font-size: 11px; padding: 4px 8px; }
  .inhalt-statistik { padding-top: 4px; }
  .monatsbalken-diagramm { height: 190px; }
  .zeitverlauf-diagramm { height: 190px; }
  .ranking-label { width: 118px; }
  .ranking-zeile-kategorie .ranking-label { width: 108px; }
  .ranking-betrag { width: 64px; }
}

/* =======================================================================
   Einstellungen (W7, mockups-v2/Einstellungen.dc.html)
   ======================================================================= */

.inhalt-einstellungen { padding-top: 24px; }

.einstellungen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.einstellungen-karte { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.einstellungen-karte h2 { margin: 0; font-size: 15px; font-weight: 600; }
.einstellungen-karte-kopf { display: flex; align-items: center; gap: 10px; }
.karte-hinweis { font-size: 12px; color: var(--text-tertiaer); }

@media (max-width: 1099px) {
  .einstellungen-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--akzent);
  border: 1px solid var(--rand-feld);
  background: var(--bg-flaeche);
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent-hover); }
.knopf-primaer { color: var(--text-auf-akzent); background: var(--akzent); border-color: var(--akzent); }
.knopf-primaer:hover { color: var(--text-auf-akzent); background: var(--akzent-hover); border-color: var(--akzent-hover); }
.knopf-klein { font-size: 12.5px; padding: 6px 11px; gap: 5px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--text-tertiaer);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--bg-segment); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:hover { background: none; color: var(--text-tertiaer); }

/* -- Konten --------------------------------------------------------------*/

.konten-liste { display: flex; flex-direction: column; font-size: 13.5px; }
.konto-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rand); }
.konto-zeile:last-child { border-bottom: none; }
.konto-farbpunkt { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.konto-zeile-namen { display: flex; flex-direction: column; min-width: 0; }
.konto-zeile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-zeile-name.gedimmt { color: var(--text-sekundaer); }
.konto-zeile-untertitel { font-size: 11.5px; color: var(--text-tertiaer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-zeile-aktionen { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

.schalter {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  position: relative;
  flex: none;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--schalter-aus-bg);
}
.schalter::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.15s;
}
.schalter.an { background: var(--akzent); }
.schalter.an::after { left: 20px; }

.konto-bearbeiten-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rand);
  font-size: 13px;
}
.konto-bearbeiten-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.konto-bearbeiten-label { width: 84px; flex: none; color: var(--text-tertiaer); font-size: 12px; }
.konto-bearbeiten-zeile .feld-eingabe { flex: 1; min-width: 120px; }
.konto-bearbeiten-hinweis { font-size: 11.5px; color: var(--text-tertiaer); }

.farbpalette { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.farbswatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.farbswatch.aktiv { border-color: var(--text); }
.farbswatch-keine { background: var(--bg-segment); border: 1px dashed var(--rand-feld); }
.farbswatch-keine.aktiv { border: 1px dashed var(--text); }
/* Freie Farbwahl: der native Farbwähler als runder Swatch mit
   Regenbogen-Kegel als Erkennungszeichen. */
.farbswatch-frei {
  padding: 0;
  background: conic-gradient(#e34948, #eda100, #1baf7a, #2a78d6, #4a3aa7, #e34948);
  cursor: pointer;
}
.farbswatch-frei::-webkit-color-swatch-wrapper { padding: 0; }
.farbswatch-frei::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; }

.sortier-pfeile { display: flex; gap: 2px; }

/* -- Kategorien & Gruppen --------------------------------------------------*/

.kategorien-gruppen { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.kategorien-gruppe { display: flex; flex-direction: column; gap: 7px; }
.kategorien-gruppe-kopf { display: flex; align-items: center; gap: 6px; }
.kategorien-gruppe-titel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiaer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kategorien-gruppe-aktionen { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.kategorien-gruppe-aktionen .icon-btn { width: 22px; height: 22px; }
.kategorie-chip-liste { display: flex; gap: 7px; flex-wrap: wrap; }
.kategorie-chip-btn { border: none; background: var(--bg-segment); color: var(--text-sekundaer); cursor: pointer; }
.kategorie-chip-btn:hover { background: var(--rand-feld); color: var(--text); }
.kategorie-chip-btn.umbuchung { font-style: italic; }

.warnbox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-sekundaer);
}
.warnbox svg { flex: none; color: var(--kategorie-fehlt-text); }

/* Popover: Kategorie bearbeiten (Klick auf einen Kategorie-Chip) — analog
   zu .popover-kategorie in buchungen.js: per JS FIXED neben dem Chip
   positioniert, nicht relativ zu einem .mehrfachauswahl-Wrapper. */
.kategorie-bearbeiten-popover { position: fixed; min-width: 220px; }
.kategorie-bearbeiten-popover .feld-eingabe { flex: 1; }
.kategorie-bearbeiten-popover label.feld-auswahl { width: 100%; }
.kategorie-bearbeiten-popover select { width: 100%; }
.popover-aktion-loeschen {
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #b23a3a;
  background: none;
  border: none;
  border-top: 1px solid var(--rand);
  padding: 8px 0 0;
  margin-top: 2px;
  cursor: pointer;
  text-align: left;
}

/* Popover: Neue Kategorie/Gruppe. */
.neu-popover { min-width: 260px; }
.neu-popover-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.neu-popover-abschnitt + .neu-popover-abschnitt { border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 2px; }
.neu-popover-titel { font-size: 11px; font-weight: 600; color: var(--text-tertiaer); text-transform: uppercase; letter-spacing: 0.06em; }
.neu-popover .feld { width: 100%; }
.neu-popover .feld-eingabe { width: 100%; }
.neu-popover select { width: 100%; }

/* Lösch-Dialog (Kategorie/Gruppe) — <dialog>, wie das Buchungen-Detail-Overlay.
   ⚠ "display" MUSS an [open] gebunden bleiben: ein ungebundenes
   ".loeschen-dialog { display: flex }" schlägt als Autor-Regel IMMER die
   UA-Regel "dialog:not([open]) { display: none }" (Autor-Herkunft gewinnt
   gegen User-Agent-Herkunft, unabhängig von der Spezifität) — der Dialog
   wäre dann permanent sichtbar, auch ohne showModal(). */
.loeschen-dialog {
  border: none;
  border-radius: var(--radius-karte);
  padding: 20px 22px 22px;
  width: min(420px, 92vw);
  background: var(--bg-flaeche);
  color: var(--text);
  box-shadow: var(--schatten-popover);
  gap: 14px;
}
.loeschen-dialog[open] { display: flex; flex-direction: column; }
.loeschen-dialog::backdrop { background: var(--dialog-hintergrund); }
.loeschen-dialog h3 { margin: 0; font-size: 15px; font-weight: 600; }
.loeschen-dialog-info { font-size: 12.5px; color: var(--text-sekundaer); }
.loeschen-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-tertiaer); }
.loeschen-dialog select {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-flaeche-gedimmt);
  border: 1px solid var(--rand-feld);
  border-radius: 7px;
  padding: 7px 9px;
}
.loeschen-dialog-tasten { display: flex; justify-content: flex-end; gap: 8px; }
.loeschen-dialog-tasten button {
  font: inherit;
  font-size: 13px;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid var(--rand-feld);
  background: var(--bg-flaeche);
  color: var(--text);
}
.loeschen-dialog-tasten button.primaer {
  background: #b23a3a;
  border-color: #b23a3a;
  color: #ffffff;
  font-weight: 600;
}
.loeschen-dialog-fehler { font-size: 12px; color: #b23a3a; }

/* -- Regeln -----------------------------------------------------------------*/

.regeln-liste { display: flex; flex-direction: column; font-size: 13px; }
.regeln-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rand); }
.regeln-zeile:last-child { border-bottom: none; }
.regeln-fingerabdruck {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: var(--text-sekundaer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Einziges schrumpfbares Element der Zeile (Chip/Herkunft behalten ihre
     Wortbreite, s. .regeln-pfeil/.regeln-rechts flex:none) — ohne
     min-width würde der Fingerabdruck bei knappem Platz auf 0px
     zusammenfallen statt lesbar auf z. B. "rewe*bam…" zu kürzen. */
  flex: 1 1 auto;
  min-width: 64px;
}
.regeln-pfeil { color: var(--text-tertiaer); flex: none; }
.regeln-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.regeln-herkunft { font-size: 11.5px; color: var(--text-tertiaer); white-space: nowrap; }
.regeln-bestaetigung { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sekundaer); }
.regeln-bestaetigung button {
  font: inherit;
  font-size: 12px;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  border: 1px solid var(--rand-feld);
  background: var(--bg-flaeche);
  color: var(--text);
}
.regeln-bestaetigung button.primaer { background: #b23a3a; border-color: #b23a3a; color: #ffffff; }

/* Die Beschriftung einer Regel ist ein Knopf (öffnet die Detailansicht) —
   Button-Optik zurücksetzen, Textform beibehalten. Bedingungsregeln lesen
   sich als Satz und stehen deshalb nicht in der Monospace-Schrift, die für
   Fingerabdrücke gedacht ist. */
.regeln-oeffnen {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--schrift-ui);
  font-size: 12.5px;
}
.regeln-oeffnen:hover { color: var(--text); text-decoration: underline; }

/* -- Regel-Detailansicht (Dialog) ---------------------------------------- */

.regel-dialog .detail-inhalt { gap: 16px; }
.regel-kopfzeilen { display: flex; gap: 14px; flex-wrap: wrap; }
.regel-feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.regel-feld-label { font-size: 11.5px; color: var(--text-tertiaer); }
.regel-feld input,
.regel-feld select,
.regel-bedingung select,
.regel-bedingung input {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-flaeche);
  border: 1px solid var(--rand-feld);
  border-radius: 7px;
  padding: 7px 9px;
  min-width: 0;
}

.regel-fingerabdruck-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.regel-fingerabdruck-zeile code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-sekundaer);
  background: var(--bg-flaeche-gedimmt);
  border-radius: 5px;
  padding: 2px 6px;
  word-break: break-all;
}
.regel-fingerabdruck-hinweis { font-size: 11.5px; color: var(--text-tertiaer); }

.regel-bedingungen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.regel-bedingung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regel-bedingung-wert { flex: 1 1 180px; min-width: 0; display: flex; }
.regel-bedingung-wert > * { width: 100%; }
.regel-und {
  flex: none;
  width: 38px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiaer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.regel-bedingungen-leer { margin: 0 0 10px; font-size: 12.5px; color: var(--text-tertiaer); }

.regel-vorschau { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.regel-beispiele { display: flex; flex-direction: column; gap: 4px; }
.regel-beispiel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  color: var(--text-sekundaer);
}
.regel-beispiel-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regel-beispiel-betrag { flex: none; }

.regel-dialog-tasten {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--rand);
}
.regel-dialog-tasten button {
  font: inherit;
  font-size: 12.5px;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  border: 1px solid var(--rand-feld);
  background: var(--bg-flaeche);
  color: var(--text);
}
.regel-dialog-tasten button.primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-auf-akzent);
  font-weight: 600;
  margin-left: auto;
}
.regel-dialog-tasten .regel-loeschen { color: #b23a3a; }
.regel-auch-hand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiaer);
}

/* Kurze Rückmeldung nach einer Aktion (z. B. „Regel auf 12 Buchungen
   angewandt") — schwebt unten mittig und verschwindet von selbst. */
.kontor-meldung {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 900;
  background: var(--akzent);
  color: var(--text-auf-akzent);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: var(--schatten-popover);
  max-width: min(520px, 92vw);
}

/* -- Import ----------------------------------------------------------------*/

.dropzone {
  border: 1.5px dashed var(--rand-feld);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-sekundaer);
  cursor: pointer;
}
.dropzone svg { color: var(--text-tertiaer); }
.dropzone-titel { font-size: 13.5px; font-weight: 500; }
.dropzone-hinweis { font-size: 12px; color: var(--text-tertiaer); text-align: center; }
.dropzone.ueber-ziel { border-color: var(--akzent); background: var(--bg-flaeche-gedimmt); }
.dropzone-datei { font-size: 12.5px; color: var(--text); font-weight: 600; }

.import-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-zeile label.feld-auswahl { flex: 1; min-width: 160px; }
.import-zeile select { width: 100%; }

.import-ergebnis {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-flaeche-gedimmt);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.import-ergebnis-erfolg { color: var(--positiv-text); font-weight: 600; }
.import-fehlerliste { margin: 0; padding-left: 18px; font-size: 12px; color: var(--fehler-bg); }
.import-fehler-text { font-size: 12.5px; color: var(--fehler-bg); }

@media (max-width: 699px) {
  .konto-bearbeiten-label { width: 100%; }
  /* Regeln-Zeile ist am Handy zu eng für Fingerabdruck + Chip + Herkunft +
     Papierkorb — Herkunft/Datum weicht (wie .konto-untertitel), der
     Fingerabdruck bleibt dafür lesbar. */
  .regeln-herkunft { display: none; }
}