/* Oberflaeche im Stil des Windows-Classic-Themes (Windows 95/98/2000): graue Flaechen, 3D-Rahmen,
   navyblaue Titelleisten, klassische Knoepfe und Fortschrittsbalken. Kein externer Font, kein
   Inline-Style (CSP: style-src 'self'): alles hier, Balkenbreiten ueber .breite-N. Die Basis ist auf
   dem iPhone als Home-Bildschirm-App gedacht: kein Zoomen, Felder mindestens 16 px, Safe-Area. */

:root {
  --grau: #c0c0c0;
  --grau-hell: #dfdfdf;
  --weiss: #ffffff;
  --grau-dunkel: #808080;
  --schwarz: #0a0a0a;
  --navy: #000080;
  --navy-hell: #1084d0;
  --desktop: #008080;
  --text: #000000;
  --text-leise: #404040;
  --link: #0000ee;
  --rot: #b00000;
  --amber: #8a5a00;
  --positiv: #004d00;
  --schrift: Tahoma, Verdana, "Segoe UI", sans-serif;
  --tap: 44px;

  /* Rahmen als Schattenlisten: erhoben (Knopf, Fenster), gedrueckt, eingedrueckt (Feld), flach eingedrueckt */
  --bevel-erhoben: inset -1px -1px var(--schwarz), inset 1px 1px var(--weiss),
    inset -2px -2px var(--grau-dunkel), inset 2px 2px var(--grau-hell);
  --bevel-gedrueckt: inset -1px -1px var(--weiss), inset 1px 1px var(--schwarz),
    inset -2px -2px var(--grau-hell), inset 2px 2px var(--grau-dunkel);
  --bevel-feld: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel),
    inset -2px -2px var(--grau-hell), inset 2px 2px var(--schwarz);
  --bevel-flach-hinein: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel);
  --bevel-flach-heraus: inset -1px -1px var(--grau-dunkel), inset 1px 1px var(--weiss);
  --titel-verlauf: linear-gradient(90deg, var(--navy), var(--navy-hell));

  --pfeil-auswahl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38' viewBox='0 0 22 38'%3E%3Crect width='22' height='38' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h22v1H1v37H0z' fill='%23fff'/%3E%3Cpath d='M21 0h1v38H0v-1h21z' fill='%230a0a0a'/%3E%3Cpath d='M20 1h1v36H1v-1h19z' fill='%23808080'/%3E%3Cpath d='M6 16h10l-5 6z' fill='%23000'/%3E%3C/svg%3E");
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;          /* kein Doppeltipp-Zoom */
  overscroll-behavior: none;
  background: var(--desktop);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--desktop);
  color: var(--text);
  font: 14px/1.4 var(--schrift);
  font-variant-numeric: tabular-nums;
  /* html erlaubt Pinch (manipulation), der Koerper nimmt ihn zurueck: die Schnittmenge sperrt Doppeltipp- und Pinch-Zoom */
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: anywhere;
}

.tabular-nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-leise); }
.positiv { color: var(--positiv); }
.error { color: var(--rot); font-weight: bold; }
.hinweis-text { color: var(--amber); margin: 8px 0; }

a { color: var(--link); }
a:visited { color: #551a8b; }
p { margin: 6px 0; }
ul, ol { margin: 6px 0; padding-left: 20px; }
h1, h2, h3 { margin: 0; }

/* ---------- Programmleiste oben (Titelleiste der App) ---------- */

.app-titel {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  margin-left: calc(-1 * env(safe-area-inset-left));
  margin-right: calc(-1 * env(safe-area-inset-right));
  background: var(--titel-verlauf);
  color: var(--weiss);
}
.app-titel .app-icon { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }
.app-titel h1 { flex: 1; font-size: 16px; font-weight: bold; letter-spacing: 0.02em; }
.app-titel form { margin: 0; }

.titel-knopf {
  position: relative;
  min-height: 30px;
  padding: 3px 10px;
  font-size: 13px;
}
.titel-knopf::after {                     /* Trefferflaeche auf 44 px vergroessern */
  content: "";
  position: absolute;
  inset: -7px -4px;
}

.arbeitsflaeche {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 8px calc(72px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Fenster ---------- */

.fenster {
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  padding: 3px;
  min-width: 0;
}
.titelleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  margin: 0;
  padding: 3px 6px;
  background: var(--titel-verlauf);
  color: var(--weiss);
  font: bold 14px/1.3 var(--schrift);
}
.titel-extra { font-weight: normal; font-size: 12px; white-space: nowrap; }
.fenster-inhalt { padding: 8px 6px 6px; }
.fenster-inhalt > :first-child { margin-top: 0; }
.fenster-inhalt > :last-child { margin-bottom: 0; }
.fenster-inhalt h3 {
  margin: 14px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--grau-dunkel);
  box-shadow: 0 1px 0 var(--weiss);
  font-size: 14px;
}

/* Gruppenrahmen (fieldset/legend) */
.gruppe, fieldset {
  min-width: 0;
  margin: 10px 0;
  padding: 8px 8px 8px;
  border: 1px solid var(--grau-dunkel);
  box-shadow: 1px 1px 0 var(--weiss), inset 1px 1px 0 var(--weiss);
}
.gruppe > legend, fieldset > legend { padding: 0 4px; }

/* Eingedrueckte weisse Flaeche (Listenfeld) und erhobene graue Kachel */
.karte, .liste-rahmen {
  background: var(--weiss);
  box-shadow: var(--bevel-feld);
  padding: 6px 8px;
  margin: 0 0 8px;
}
.liste-rahmen { padding: 2px; }
.paneel {
  padding: 8px;
  margin: 8px 0;
  box-shadow: var(--bevel-flach-heraus);
}

/* ---------- Knoepfe ---------- */

button, .knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: var(--grau);
  color: var(--text);
  box-shadow: var(--bevel-erhoben);
  font: 14px/1.2 var(--schrift);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
button:visited, .knopf:visited { color: var(--text); }
button:active, .knopf:active, .knopf.aktiv {
  box-shadow: var(--bevel-gedrueckt);
  padding: 7px 13px 5px 15px;
}
button:focus-visible, .knopf:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 1px dotted var(--schwarz);
  outline-offset: -5px;
}
button:disabled, .knopf.inaktiv {
  color: var(--grau-dunkel);
  text-shadow: 1px 1px 0 var(--weiss);
  cursor: default;
}
.primary {
  font-weight: bold;
  margin: 1px;
  box-shadow: 0 0 0 1px var(--schwarz), var(--bevel-erhoben);
}
.primary:active { box-shadow: 0 0 0 1px var(--schwarz), var(--bevel-gedrueckt); }
.wide { width: 100%; }

/* Knopf, der wie ein Hyperlink aussieht (Aktionen in Zeilen) */
button.link {
  min-width: 0;
  padding: 4px 6px;
  background: none;
  box-shadow: none;
  color: var(--link);
  text-decoration: underline;
}
button.link:active { padding: 4px 6px; box-shadow: none; color: var(--navy); }

.button-link {
  display: flex;
  margin-top: 12px;
}

/* ---------- Eingabefelder (mindestens 16 px: sonst zoomt iOS beim Fokus) ---------- */

input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: var(--tap);
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background-color: var(--weiss);
  color: var(--text);
  box-shadow: var(--bevel-feld);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.3;
}
textarea { min-height: 88px; }
select {
  padding-right: 30px;
  background-image: var(--pfeil-auswahl);
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 22px 38px;
  text-overflow: ellipsis;
}
input[type="date"], input[type="month"], input[type="time"] {
  display: inline-block;
  text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
input[type="file"] { padding: 6px; width: 100%; }
input[type="file"]::file-selector-button {
  -webkit-appearance: none;
  min-height: 32px;
  margin-right: 10px;
  padding: 4px 12px;
  border: 0;
  border-radius: 0;
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  color: var(--text);
  font: 16px var(--schrift);
}
input::placeholder { color: var(--grau-dunkel); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -5px; }

input[type="checkbox"], input[type="radio"] {
  width: 22px;
  min-height: 0;
  height: 22px;
  padding: 0;
  flex: none;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="checkbox"]:checked { background-image: var(--haken); background-size: 14px 14px; }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked { background-image: radial-gradient(circle, var(--schwarz) 0 3px, transparent 4px); }

label { color: var(--text); }
.checkbox, .einnahme-umschalter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 0;
}

.formular, .auth-form, .erfassen-formular, .korrektur-formular {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.formular label, .korrektur-formular label, .auth-form label { display: flex; flex-direction: column; gap: 3px; }
.formular label input, .formular label select { width: 100%; }
.auth-form label.checkbox, .formular label.checkbox, label.einnahme-umschalter { flex-direction: row; }
.korrektur-formular { margin-top: 10px; max-width: none; }
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.filter input, .filter select { flex: 1 1 140px; min-width: 0; }
.filter input[type="month"] { flex: 1 1 150px; }
.filter button { flex: none; }
.inline-formular { display: inline; margin: 0; }

/* ---------- Kopf- und Aufklappbereiche ---------- */

details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--weiss);
  box-shadow: var(--bevel-flach-hinein);
  font: bold 12px/1 var(--schrift);
}
details[open] > summary::before { content: "\2212"; }

/* ---------- Listen: eine Zeile je Eintrag, Betrag rechts ---------- */

.liste, .pruefliste, .mehr-liste, .zaehler {
  list-style: none;
  margin: 0;
  padding: 0;
}
.liste > li, .startmenue-liste > li { border-bottom: 1px dotted var(--grau-dunkel); }
.liste > li:last-child, .startmenue-liste > li:last-child { border-bottom: 0; }
.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: baseline;
  min-height: var(--tap);
  padding: 6px 6px;
  color: var(--text);
  text-decoration: none;
}
a.zeile:visited { color: var(--text); }
a.zeile:active { background: var(--navy); color: var(--weiss); }
a.zeile:active .zeile-neben, a.zeile:active .zeile-haupt { color: var(--weiss); }
.zeile { position: relative; }
.zeile-haupt { grid-column: 1; min-width: 0; font-weight: bold; }
/* Ganze Zeile antippbar: der Link in .zeile-haupt spannt sich ueber die Zeile; Links/Formulare in der Zeile liegen darueber */
.dehnen::after { content: ""; position: absolute; inset: 0; }
.zeile-neben a, .zeile-aktion { position: relative; z-index: 1; }
.zeile-haupt a { color: var(--text); text-decoration: none; }
.zeile-haupt a:visited { color: var(--text); }
.zeile:has(.dehnen:active) { background: var(--grau-hell); }
.aktionslink { display: inline-flex; align-items: center; min-height: var(--tap); }
.zeile-betrag { grid-column: 2; text-align: right; white-space: nowrap; font-weight: bold; }
.zeile-neben { grid-column: 1 / -1; min-width: 0; color: var(--text-leise); font-size: 13px; }
.zeile-aktion { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.zeile-aktion select { flex: 1; min-width: 0; }
.zeile-notiz { grid-column: 1 / -1; font-size: 13px; }
.zeile-neben.zweck { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stufe-ueberfaellig, .stufe-heute { border-left: 4px solid var(--rot); }
.stufe-ueberfaellig .zeile-haupt, .stufe-ueberfaellig .zeile-betrag,
.stufe-heute .zeile-haupt, .stufe-heute .zeile-betrag,
.stufe-ueberfaellig .frist, .stufe-heute .frist { color: var(--rot); }
.stufe-ueberfaellig .frist, .stufe-heute .frist { font-weight: bold; }
.stufe-bald .frist { color: var(--amber); font-weight: bold; }
.zeile-marke {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  background: var(--grau);
  box-shadow: var(--bevel-flach-heraus);
  color: var(--text);
  font-size: 12px;
  font-weight: normal;
  white-space: nowrap;
}
.zeile-marke.mahnung { color: var(--rot); font-weight: bold; }

.listenfuss { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Schluessel/Wert-Zeilen */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 0; }
.kv > :last-child { text-align: right; font-weight: bold; }
.felder { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 8px; }
.felder dt { color: var(--text-leise); }
.felder dd { margin: 0; overflow-wrap: anywhere; }
.felder dd.ueberfaellig { color: var(--rot); font-weight: bold; }

/* Listenansicht (Tabelle): nur noch fuer kurze Tabellen */
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; background: var(--weiss); box-shadow: var(--bevel-feld); }
.tabelle th, .tabelle td { text-align: left; padding: 6px 8px; vertical-align: baseline; border-bottom: 1px dotted var(--grau-dunkel); }
.tabelle th { background: var(--grau); box-shadow: var(--bevel-flach-heraus); font-weight: normal; border-bottom: 0; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .betrag, .betrag { text-align: right; white-space: nowrap; }
.tabelle-kv th { width: 42%; }
.verlauf-tabelle td { padding: 13px 8px; }
.verlauf-tabelle td a { display: inline-block; }
tr.ueberfaellig td { color: var(--rot); font-weight: bold; }

/* ---------- Balken (Fortschrittsbalken im klassischen Stil: Bloecke) ---------- */

.balken-spur {
  height: 20px;
  padding: 2px;
  background: var(--weiss);
  box-shadow: var(--bevel-flach-hinein);
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--navy) 0 9px, transparent 9px 11px);
}
.balken-fuellung.status-hinweis { background: repeating-linear-gradient(90deg, #a06800 0 9px, transparent 9px 11px); }
.balken-fuellung.status-ueberschritten { background: repeating-linear-gradient(90deg, var(--rot) 0 9px, transparent 9px 11px); }
.balken-fuellung.status-ohne_budget { background: repeating-linear-gradient(90deg, #4a4aa0 0 9px, transparent 9px 11px); }
.balken-fuellung.status-noch_offen { background: repeating-linear-gradient(90deg, var(--grau-dunkel) 0 9px, transparent 9px 11px); }
.balken-fuellung.status-ok { background: repeating-linear-gradient(90deg, var(--navy) 0 9px, transparent 9px 11px); }
.marker { color: var(--amber); }

.budget-balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.budget-balken > li { padding: 0; }
.budget-zeile { display: block; padding: 8px 6px; color: var(--text); text-decoration: none; }
a.budget-zeile:visited { color: var(--text); }
a.budget-zeile:active { background: var(--grau-hell); }
.budget-kopf { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.budget-kopf > :first-child { font-weight: bold; min-width: 0; }
.budget-kopf > :last-child { white-space: nowrap; }
.budget-fuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 13px; color: var(--text-leise); }
.budget-fuss .drueber { color: var(--rot); font-weight: bold; }

/* R22: Fuellbreite ohne Inline-style (CSP), in 5-%-Stufen von der Route gerundet. */
.breite-0 { width: 0%; }
.breite-5 { width: 5%; }
.breite-10 { width: 10%; }
.breite-15 { width: 15%; }
.breite-20 { width: 20%; }
.breite-25 { width: 25%; }
.breite-30 { width: 30%; }
.breite-35 { width: 35%; }
.breite-40 { width: 40%; }
.breite-45 { width: 45%; }
.breite-50 { width: 50%; }
.breite-55 { width: 55%; }
.breite-60 { width: 60%; }
.breite-65 { width: 65%; }
.breite-70 { width: 70%; }
.breite-75 { width: 75%; }
.breite-80 { width: 80%; }
.breite-85 { width: 85%; }
.breite-90 { width: 90%; }
.breite-95 { width: 95%; }
.breite-100 { width: 100%; }

/* ---------- Ueberblick ---------- */

.monatswahl { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.monatswahl input { flex: 1; min-width: 0; }
.monatswahl .knopf { flex: none; }
.kennzahl-gross { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.kennzahl-gross .kz-wert { font-size: 24px; font-weight: bold; }
.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.kennzahl { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; box-shadow: var(--bevel-flach-hinein); background: var(--weiss); }
.kz-label { color: var(--text-leise); font-size: 13px; }
.kz-wert { font-size: 17px; font-weight: bold; white-space: nowrap; }
.kz-wert.minus { color: var(--rot); }
.kz-erklaerung { margin: 0 0 8px; font-size: 13px; }
.trenner { border: 0; border-top: 1px solid var(--grau-dunkel); box-shadow: 0 1px 0 var(--weiss); margin: 10px 0; }

.diagramm { display: block; width: 100%; height: auto; background: var(--weiss); box-shadow: var(--bevel-feld); }
.chart-gitter { stroke: var(--grau-hell); stroke-width: 1; }
.chart-achse { stroke: var(--grau-dunkel); stroke-width: 1; }
.chart-hg { fill: transparent; }
.chart-aktuell { fill: #e6e6ff; }
.bar-aus { fill: var(--navy); }
.bar-ein { fill: var(--desktop); }
.chart-label, .chart-skala { font: 10px var(--schrift); fill: var(--text); text-anchor: middle; }
.chart-skala { text-anchor: start; fill: var(--text-leise); }
.chart-label-aktuell { font-weight: bold; }
.legende { display: flex; gap: 14px; margin: 6px 0; font-size: 13px; }
.legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; box-shadow: var(--bevel-flach-hinein); }
.legende .leg-aus::before { background: var(--navy); }
.legende .leg-ein::before { background: var(--desktop); }

.rang { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.rang > li { counter-increment: rang; border-bottom: 1px dotted var(--grau-dunkel); }
.rang > li:last-child { border-bottom: 0; }
.rang .zeile-haupt::before { content: counter(rang) ". "; color: var(--text-leise); font-weight: normal; }

.meldung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  margin: 0;
  background: #ffffe1;
  box-shadow: var(--bevel-flach-hinein);
}
.meldung::before {
  content: "i";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--weiss);
  font: bold italic 14px/22px Georgia, serif;
  text-align: center;
}
.meldung.warnung::before { content: "!"; background: var(--amber); font-style: normal; }
.meldung-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Navigation: Taskleiste ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 16px; height: 16px; flex: none; shape-rendering: crispEdges; }
/* Farben der Piktogramme (Sprite in _sprite.html); ohne .ico davor, weil <use> die Regeln des Originals erbt */
.f-schwarz { fill: #0a0a0a; }
.f-weiss { fill: #ffffff; }
.f-grau { fill: #808080; }
.f-navy { fill: #000080; }
.f-hell { fill: #1084d0; }
.f-rot { fill: #c00000; }
.f-gruen { fill: #008000; }
.f-gelb { fill: #e0c000; }

.taskleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 4px calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
  background: var(--grau);
  box-shadow: inset 0 1px 0 var(--grau-hell), inset 0 2px 0 var(--weiss);
}
.task-knopf {
  flex: 1 1 0;
  max-width: 150px;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  padding: 4px 2px;
  font-size: 10.5px;
  line-height: 1.15;
  overflow: hidden;
}
.task-knopf span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-knopf.aktiv { background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px; }
.task-knopf.aktiv span { background: var(--grau); padding: 0 2px; }
.task-start span { font-weight: bold; }

/* Startmenue (Seite "Mehr") */
.startmenue { display: flex; align-items: stretch; gap: 0; }
.startmenue-band {
  flex: none;
  width: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 0;
  background: linear-gradient(0deg, var(--navy), var(--navy-hell));
  color: var(--weiss);
  font: bold 18px var(--schrift);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.06em;
}
.startmenue-liste { flex: 1; list-style: none; margin: 0; padding: 0; background: var(--grau); }
.startmenue-liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px;
  color: var(--text);
  text-decoration: none;
}
.startmenue-liste a:active { background: var(--navy); color: var(--weiss); }
.startmenue-liste a:visited { color: var(--text); }
.startmenue-liste a:active:visited { color: var(--weiss); }
.startmenue-liste .ico { width: 20px; height: 20px; }
.startmenue-liste li.trennlinie { border-top: 1px solid var(--grau-dunkel); box-shadow: inset 0 1px 0 var(--weiss); border-bottom: 0; }

/* ---------- Ablage: Explorer (Ordnerbaum links bzw. oben, Dateiliste rechts bzw. darunter) ---------- */

.f-gelb-hell { fill: #ffff80; }
.f-gelb-dunkel { fill: #a08000; }

.ablage-meldung { margin: 0 0 8px; }
.ablage-upload { margin: 0 0 8px; }
.explorer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.explorer-baum, .explorer-liste { min-width: 0; }
.explorer-baum .liste-rahmen, .explorer-liste .liste-rahmen { margin: 0; }
.explorer-liste { scroll-margin-top: 52px; }     /* Sprungziel (#dateiliste) nicht unter der fixierten Programmleiste */
.baum-hinweis { margin: 6px 0 0; font-size: 13px; }

.baum, .baum-jahre { list-style: none; margin: 0; padding: 0; }
.baum-jahre { padding-left: 22px; }
.baum-trenner { margin-top: 2px; padding-top: 2px; border-top: 1px dotted var(--grau-dunkel); }
.baum-knoten {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 4px 6px;
  color: var(--text);
  text-decoration: none;
}
.baum-knoten:visited { color: var(--text); }
.baum-name { flex: 1; min-width: 0; }
.baum-zahl { flex: none; color: var(--text-leise); font-size: 13px; }
.baum-knoten:active { background: var(--grau-hell); }
.baum-knoten.aktiv, .baum-knoten.aktiv:visited { background: var(--navy); color: var(--weiss); }     /* wie die Auswahl im Explorer */
.baum-knoten.aktiv .baum-zahl { color: var(--weiss); }

.adresse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 6px;
  padding: 2px 8px;
  background: var(--weiss);
  box-shadow: var(--bevel-feld);
  font-weight: bold;
}
.adresse > span { min-width: 0; }
.adresse .aktionslink { flex: none; font-weight: normal; }
.explorer-liste .meldung { margin: 0 0 8px; }

.datei {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: baseline;
  min-height: var(--tap);
  padding: 6px;
}
.datei-name { grid-column: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-weight: bold; }
.datei-name .datei-ico { width: 20px; height: 20px; margin-top: 1px; }
.datei-name a { min-width: 0; color: var(--text); text-decoration: none; }
.datei-name a:visited { color: var(--text); }
.datei-betrag { grid-column: 2; text-align: right; white-space: nowrap; font-weight: bold; }
.datei-frist.warnung { color: var(--amber); font-weight: bold; }
/* Fuss der Zeile: Datum und Aufbewahrung links, Links und Knopf rechts; reicht die Breite nicht, rutschen sie darunter */
.datei-fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  padding-left: 28px;
}
.datei-neben { flex: 1 1 auto; min-width: 0; color: var(--text-leise); font-size: 13px; }
/* Links und Knoepfe liegen ueber der antippbaren Zeile (.dehnen), wie bei .zeile-aktion */
.datei-aktionen { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: 0 14px; margin-left: auto; }
.datei-aktionen form { margin: 0; }
.datei-aktionen .aktionslink, .adresse .aktionslink { min-width: var(--tap); justify-content: center; }     /* Touchziel mindestens 44 x 44 */
.datei.im-papierkorb .datei-name a { color: var(--text-leise); }
.dateiliste > li { scroll-margin-top: 56px; }                                   /* Sprungziel #beleg-... nicht unter der Programmleiste */
.dateiliste > li:target .datei { background: #ffffe1; }      /* die eben geaenderte Zeile (Sprung nach Aufbewahren) */
.statusleiste { margin: 6px 0 0; padding: 4px 8px; background: var(--grau); box-shadow: var(--bevel-flach-hinein); font-size: 13px; }

@media (min-width: 600px) {
  .explorer { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}

/* ---------- Reiter (Tab-Steuerelement) ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 -1px; padding: 0 2px; position: relative; z-index: 1; }
.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 12px;
  background: var(--grau);
  box-shadow: inset 1px 1px 0 var(--weiss), inset -1px 0 0 var(--schwarz), inset -2px 0 0 var(--grau-dunkel);
  color: var(--text);
  text-decoration: none;
}
.tabs a:visited { color: var(--text); }
.tabs a.aktiv { font-weight: bold; margin-top: -2px; min-height: 46px; }
.reiter-inhalt { padding: 8px 6px; box-shadow: inset 1px 1px 0 var(--weiss), inset -1px -1px 0 var(--schwarz), inset -2px -2px 0 var(--grau-dunkel); }

/* ---------- Pruefen, Erfassen ---------- */

.pruefliste { display: flex; flex-direction: column; gap: 10px; }
.pruefliste .karte { margin: 0; }
.karte p, .kandidat p { margin: 3px 0; overflow-wrap: anywhere; }
.kandidat { border-top: 1px dotted var(--grau-dunkel); padding-top: 8px; margin-top: 8px; }
.kandidat p { overflow-wrap: anywhere; }
.zweifel-liste { list-style: none; margin: 4px 0; padding: 0; color: var(--amber); }
.sammelaktion { margin: 0 0 10px; }
.sammelaktion .primary { width: calc(100% - 2px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; box-shadow: none; padding: 0; margin: 0 0 12px; }
.chips legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.chip span, .chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 6px 12px;
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  color: var(--text);
  font: 14px/1.2 var(--schrift);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chip input:checked + span, .chip-button.vorgeschlagen { font-weight: bold; box-shadow: var(--bevel-gedrueckt); background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px; }
.chip input:checked + span { padding: 7px 11px 5px 13px; }
.chip input:focus-visible + span { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.chip-button { min-width: 0; }

.betrag-label { display: block; }
.betrag-eingabe { display: block; width: 100%; padding: 12px 10px; font-size: 32px; margin: 4px 0 8px; }
.details-erweitert { margin: 0; }
.details-erweitert label { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.details-erweitert input, .details-erweitert select { width: 100%; }
.buchen-knopf { min-height: 52px; font-size: 16px; }

/* Ausgabe erfassen (schnell): grosse Classic-Knoepfe (>= 44 px), dezent - die Knoepfe unten sind etwas kleiner */
.schnell-formular { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.schnell-auswahl { border: 0; box-shadow: none; padding: 0; margin: 0; }
.schnell-auswahl legend { padding: 0; margin-bottom: 6px; }
.schnell-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 6px; }
.grosse-wahl { position: relative; display: flex; }
.grosse-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.grosse-wahl span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 10px;
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  font: bold 16px/1.2 var(--schrift);
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.grosse-wahl.klein span { min-height: 48px; font-weight: normal; font-size: 15px; }
.grosse-wahl input:checked + span {
  padding: 9px 9px 7px 11px;
  box-shadow: var(--bevel-gedrueckt);
  background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px;
  font-weight: bold;
}
.grosse-wahl input:focus-visible + span { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.schnell-betraege { margin-bottom: 0; }
.erfassen-hinweis { margin: 0; font-size: 13px; }
.bar-schalter { padding: 4px 0; }
.meldung.bestaetigt::before { content: "\2713"; background: var(--positiv); font: bold 14px/22px var(--schrift); }
.bonfoto-formular { margin: 8px 0; }
.erstattung-formular { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-width: 480px; }
.erstattung-formular select { width: 100%; }
.erstattung-formular p { margin: 0; }
.eingang-antworten { margin-bottom: 8px; }
.annahme-bestaetigen { margin-top: 8px; }
.kamera-knopf { position: relative; width: calc(100% - 2px); min-height: 56px; font-size: 16px; overflow: hidden; }
.kamera-knopf .ico { width: 20px; height: 20px; }
.kamera-knopf input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }

.bestaetigung { text-align: center; padding: 12px; }
.betrag-gross { font-size: 34px; margin: 8px 0; font-weight: bold; }
.betrag-gross.positiv { color: var(--positiv); }
.eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }

.beleg-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--weiss); box-shadow: var(--bevel-feld); padding: 8px; margin: 0; font: 13px/1.45 "Courier New", monospace; }
.beleg-foto-vorschau { display: block; max-width: 100%; height: auto; box-shadow: var(--bevel-feld); }
.bon-positionen .zeile-aktion { margin-top: 6px; }
.bon-positionen .inline-formular { flex: 1; min-width: 0; }
.bon-positionen select { width: 100%; }

.budget-eingabe-formular { display: flex; gap: 6px; align-items: center; margin: 0; }
.budget-eingabe { width: 110px; flex: none; }
.budget-liste { list-style: none; margin: 0; padding: 0; }
.budget-liste > li { padding: 8px 6px; border-bottom: 1px dotted var(--grau-dunkel); }
.budget-liste > li:last-child { border-bottom: 0; }
.budget-liste .budget-name { display: block; font-weight: bold; margin-bottom: 4px; }
/* Kategorie-Seite (02.10.2026): der Name im Budget ist ein Link, also mindestens so hoch wie ein Knopf */
.budget-liste a.budget-name { display: flex; align-items: center; min-height: var(--tap); margin-bottom: 0; }
.budget-liste .budget-vorschlag { margin-top: 2px; }

/* ---------- Ablage: Dokumente hinzufuegen (Dateiauswahl, Drag-and-drop am PC) ---------- */

.ablage-ablegen { padding: 8px; box-shadow: var(--bevel-flach-hinein); background: var(--weiss); margin: 0 0 8px; }
.ablage-ablegen.ablage-ueber { outline: 2px dashed var(--navy); outline-offset: -6px; background: #e6e6ff; }
.ablage-ablegen-hinweis { margin: 0 0 6px; display: none; }
@media (hover: hover) and (pointer: fine) { .ablage-ablegen-hinweis { display: block; } }
.ablage-gewaehlt { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.ablage-gewaehlt > li { padding: 2px 0; overflow-wrap: anywhere; }
.ablage-dateiauswahl { display: block; margin: 0 0 4px; font-weight: bold; }

/* ---------- Verfuegbar (Ueberblick) und Budget planen ---------- */

.hauptzahl .kz-wert { font-size: 26px; }
.nebenzahl { margin: 0 0 8px; }
.verfuegbar-details { margin: 0 0 8px; }
.verfuegbar-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.verfuegbar-liste > li { padding: 4px 0; border-bottom: 1px dotted var(--grau-dunkel); }
.verfuegbar-liste > li:last-child { border-bottom: 0; font-weight: bold; }
.verfuegbar-liste .kv > :last-child { white-space: nowrap; }
.plan-zeile { display: flex; gap: 8px; align-items: center; }
.plan-zeile select { flex: 1 1 auto; min-width: 0; }
.plan-zeile input { flex: none; width: 110px; }
.plan-zahl { width: 90px; }
.plan-formular label { display: block; margin-top: 8px; }
.plan-liste { list-style: none; margin: 8px 0; padding: 0; }
.plan-liste > li { padding: 8px 0; border-bottom: 1px dotted var(--grau-dunkel); }
.plan-liste > li:last-child { border-bottom: 0; }
.plan-werte { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; margin: 2px 0 4px; }
.plan-ausreisser { flex-basis: 100%; }
.plan-formular .plan-eingabe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.plan-formular .plan-eingabe input { width: 110px; flex: none; }

.sparziel-karte { padding: 8px; }
.sparziel-details, .sparziel-aktionen { list-style: none; margin: 6px 0 0; padding: 0; }
.sparziel-karte h3 { margin-top: 0; }

/* ---------- Ueberweisen (Rechnungsdetail): Felder mit Kopieren-Knopf, GiroCode ---------- */

.ueberweisen { font-size: 16px; }
.zahl-feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
  margin: 0 0 8px;
}
.zahl-label { grid-column: 1 / -1; color: var(--text-leise); font-size: 16px; }
.zahl-wert {
  min-width: 0;
  min-height: var(--tap);
  margin: 0;
  padding: 10px;
  background: var(--weiss);
  box-shadow: var(--bevel-feld);
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-wrap: balance;                  /* IBAN in zwei gleich langen Zeilen statt mit einer Restgruppe */
  -webkit-user-select: all;
  user-select: all;
}
.kopieren-knopf { min-width: 96px; min-height: var(--tap); font-size: 16px; }
.kopieren-knopf.kopiert { box-shadow: var(--bevel-gedrueckt); font-weight: bold; }
.alles-kopieren { width: calc(100% - 2px); margin: 4px 1px 8px; }
.ueberweisen .meldung { font-size: 16px; margin: 0 0 4px; }
.ueberweisen .muted { font-size: 16px; }
.girocode { margin: 0 0 8px; }
.girocode-rahmen { padding: 8px; background: var(--weiss); box-shadow: var(--bevel-feld); text-align: center; }
.girocode-bild { display: inline-block; max-width: 100%; height: auto; vertical-align: top; background: #ffffff; }
.teilen-knopf { width: calc(100% - 2px); min-height: var(--tap); margin: 8px 1px 4px; font-size: 16px; }
.weitere-wege { margin: 8px 0 0; }
.teilen-meldung[hidden] { display: none; }           /* .meldung setzt display: flex und uebersteuert sonst das hidden-Attribut */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Hilfsfeld fuer den Kopier-Fallback (app.js): unsichtbar, aber im Viewport und mit 16 px (kein iOS-Zoom) */
.kopier-hilfsfeld { position: fixed; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; box-shadow: none; opacity: 0; font-size: 16px; }

/* ---------- Anmeldung und Zustimmung: Dialogfenster ---------- */

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 16px; }
.auth-page .fenster, .auth-card { width: 100%; max-width: 380px; }
.auth-card { background: var(--grau); box-shadow: var(--bevel-erhoben); padding: 3px; }
.auth-page h1 { font-size: 16px; }
.auth-page .fenster-inhalt { padding: 12px 10px 10px; }
.dialog-kopf { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.dialog-kopf .ico { width: 32px; height: 32px; }
.auth-form .primary { align-self: flex-end; min-width: 100px; }

.offline-inhalt { text-align: center; padding-top: 48px; }

@media (min-width: 720px) {
  .arbeitsflaeche { padding-top: 16px; }
}

/* Klassische Rollbalken nur am Rechner mit Maus - auf dem Handy bleibt das System-Verhalten */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 16px; height: 16px; }
  ::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px; }
  ::-webkit-scrollbar-thumb { background: var(--grau); box-shadow: var(--bevel-erhoben); }
  ::-webkit-scrollbar-corner { background: var(--grau); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* ---------- Diskret-Modus (diskret.py, app.js): Betraege geschwaerzt, Balken und Grafiken bleiben sichtbar ---------- */
/* Klasse "diskret" am <html>: vom Server aus dem Cookie gesetzt (kein Aufblitzen), von app.js ohne Neuladen umgeschaltet.
   Eine Zahl (Klasse "geheim") bleibt im Layout, ihr Text ist unsichtbar und ein dunkelgrauer Balken in Textbreite liegt
   dahinter - wie ein geschwaerzter Satz. Balken und Diagramme bleiben voll sichtbar, nur ihre Zahlen (Skala) sind geschwaerzt.
   "aufgedeckt": ein Tipp auf eine Zahl deckt die ganze Seite 10 Sekunden auf. "diskret-verlassen": beim App-Wechsel
   (visibilitychange/pagehide) sofort, auch bei ausgeschaltetem Modus, damit die App-Uebersicht von iOS keine Betraege zeigt.
   Sichtschutz, kein Zugriffsschutz: der Text bleibt im HTML. Kein Uebergang - es muss sofort wirken. */
html.diskret:not(.aufgedeckt) .geheim,
html.diskret-verlassen .geheim {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-color: var(--text-leise);
  border-radius: 0;
  text-shadow: none;
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;                        /* iOS: ohne das loest ein Tipp auf ein Textstueck keinen click am Dokument aus */
}
/* Zahl in einer eigenen Zeile (Vormonatstext, Detailwert): der Balken so breit wie der Text, nicht wie die Zeile */
.zeile-neben.geheim, dd.geheim { width: fit-content; max-width: 100%; }
/* Zahlen in SVG-Grafiken (Skala des Verlaufs): Text unsichtbar, dahinter ein Balken (rect.schwaerzung, sonst nicht gezeichnet) */
.schwaerzung { display: none; }
html.diskret:not(.aufgedeckt) .schwaerzung,
html.diskret-verlassen .schwaerzung { display: inline; fill: var(--text-leise); cursor: pointer; }
html.diskret:not(.aufgedeckt) text.geheim,
html.diskret-verlassen text.geheim { fill: transparent; }

/* Augen-Knopf in der Titelleiste und Eintrag im Startmenue: zwei Zustaende nur ueber die Klasse am <html> */
html.diskret .nur-offen, html:not(.diskret) .nur-diskret { display: none; }
.augen-knopf .ico { width: 20px; height: 20px; }
html.diskret .augen-knopf .ico-auge, html:not(.diskret) .augen-knopf .ico-auge-zu { display: none; }
.augen-knopf[aria-pressed="true"] { box-shadow: var(--bevel-gedrueckt); background: var(--grau-hell); }
.diskret-formular { margin: 0; }
.startmenue-liste button.startmenue-knopf {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px;
  background: none;
  box-shadow: none;
  font-size: 14px;
  text-align: left;
}
.startmenue-liste button.startmenue-knopf:active { background: var(--navy); color: var(--weiss); padding: 6px 12px; box-shadow: none; }
.diskret-einstellung { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.diskret-einstellung p { margin: 0; }
/* Hinweis, wenn das Anzeigen der Betraege nicht geht (app.js, Face-ID-Regel); .meldung setzt display: flex und uebersteuert sonst das hidden-Attribut */
.diskret-meldung[hidden] { display: none; }
/* Hinweisseite (hinweis.html): Knoepfe unter dem Text, auf dem Handy untereinander, wenn die Breite nicht reicht */
.hinweis-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hinweis-aktionen .knopf { min-height: var(--tap); }

/* ---------- Fixkosten (Dauerzahlungen), Genuss-Tracker, Kategorie-Seite (Feedback 02.10.2026) ---------- */

.fixkosten-formular { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.fixkosten-formular input:not([type="checkbox"]), .fixkosten-formular select { width: 100%; }
.fixkosten-formular > label:not(.einnahme-umschalter) { margin-top: 6px; }
.fixkosten-formular > .muted { margin: 0 0 4px; font-size: 13px; }
.fixkosten-formular .primary { margin-top: 10px; }
.fixkosten-entscheidung { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.fixkosten-entscheidung form { margin: 0; }
.fixkosten-monat { font-size: 13px; }
.fixkosten-abgelehnt { margin: 0; }
.fixkosten-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.fixkosten-aktionen form { margin: 0; }

/* Genuss-Tracker: Pfeil vor dem Vergleich zum Vormonat (mehr = rot, weniger = gruen, gleich = grau); die Zahlen sind "geheim" */
.genuss-pfeil { display: inline-block; min-width: 1.1em; font-weight: bold; }
.genuss-pfeil.pfeil-mehr { color: var(--rot); }
.genuss-pfeil.pfeil-weniger { color: var(--positiv); }
.genuss-pfeil.pfeil-gleich { color: var(--text-leise); }
.genuss-summe { margin: 8px 0 2px; }
.genuss-erklaerung { margin: 4px 0 8px; font-size: 13px; }
.genuss-quellen { margin: 0; }
.genuss-quellen .tabelle { margin: 6px 0; }

/* Bugfix 02.10.2026 (Punkt 4): Gruppenkopf "Wird automatisch abgebucht - nichts zu ueberweisen" in Rechnungsliste und Ueberblick, die Karte
   auf der Rechnungsseite; (Punkt 10): der Haken "Fuer alle Eingaenge von dieser Person merken" unter den Schnellantworten */
.liste > li.gruppen-kopf { padding: 8px 4px 2px; font-size: 13px; border-bottom: 0; }
.liste > li.gruppen-kopf .muted { font-weight: bold; }
.zahlweg-automatisch { margin: 0 0 8px; }
.zahlweg-automatisch form { margin: 6px 0 0; }
.regel-merken { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* Notizen und Hinweise ans System (Runde 3): Freitext dezent und mehrzeilig, kleines Notiz-Symbol in Listen */
.notiz-text { margin: 0 0 6px; white-space: pre-line; overflow-wrap: anywhere; }
.notiz-karte { margin: 8px 0; }
.notiz-details { margin: 12px 0 4px; }
.notiz-details textarea, .hinweis-neu textarea, .hinweis-liste textarea { width: 100%; }
.notiz-marke { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.hinweis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hinweis-liste .inline-formular { margin-right: 6px; }
.monatszuordnung { overflow-wrap: anywhere; }

/* ---------- Freunde & Geteiltes (Runde 3, 02.10.2026): Formulare und Listen - bewusst unauffaellig ---------- */

.freunde-formular fieldset { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.freunde-formular legend { padding: 0; margin: 0 0 4px; font-weight: bold; }
.freunde-formular fieldset input[type="text"] { width: 100%; }
.freunde-salden { margin: 8px 0; }
.freunde-gruppe { margin: 0 0 10px; }
.freunde-gruppe .liste { margin: 4px 0; }
.fixkosten-aktionen input[type="text"] { flex: 1 1 180px; min-width: 0; }

/* ---------- Umsatzliste kompakt, Kategorie-Auswahl, Schnell zuordnen (Auftrag Dorian 05.10.2026) ---------- */
/* Dorian: "auf dem Handy ist es unuebersichtlich, da ist extrem viel Platz". Eine Buchung ist EINE Zeile von etwa 60 px (hoechstens 64): Haendler und Betrag
   oben, darunter klein der Kategorie-Chip und das Konto-Kuerzel. Der Chip ist optisch klein, seine Trefferflaeche 44 px hoch (die Box ist 44 px hoch, nur die
   Flaeche darin ist klein). Die Zeile selbst oeffnet die Detailseite (.dehnen); nur der Chip liegt darueber. Kein Inline-Style (CSP). */

/* hidden gilt hier auch fuer Knoepfe und Flexbox-Zeilen (author-CSS mit display wuerde das hidden-Attribut sonst uebersteuern) */
.umsatz-seite [hidden], .schnell [hidden], .sheet-huelle[hidden] { display: none !important; }

/* Filterleiste: Monat mit Pfeilen, Konto und Kategorie nebeneinander, Status und "Schnell zuordnen" in einer Zeile */
.filterleiste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.filter-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.filter-zeile select { flex: 1 1 0; min-width: 0; }
.monat-pfeil { flex: none; width: var(--tap); padding: 6px 0; }
.monat-wahl { flex: 1 1 0; padding-left: 8px; padding-right: 26px; }
.lupe-knopf, .erfassen-knopf { flex: none; width: var(--tap); padding: 0; }
.lupe-knopf .ico, .erfassen-knopf .ico { width: 20px; height: 20px; }
.schnell-knopf { flex: none; padding-left: 10px; padding-right: 10px; }
.filter-status-zeile select { padding-left: 8px; padding-right: 26px; }
.filtern-knopf { width: 100%; }
/* Die Lupe ist ein Haken mit Beschriftung: angehakt klappt die Suchzeile auf (auch ohne JavaScript) */
.suche-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.suche-schalter:checked ~ .filterleiste .lupe-knopf { box-shadow: var(--bevel-gedrueckt); background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px; }
.suche-schalter:focus-visible ~ .filterleiste .lupe-knopf { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.suche-zeile { display: none; align-items: center; gap: 6px; margin: 0 0 8px; }
.suche-schalter:checked ~ .suche-zeile { display: flex; }
.suche-zeile input[type="search"] { flex: 1 1 auto; min-width: 0; }
.filter-info { margin: 0 0 4px; font-size: 13px; }
.karten-hinweis { margin: 0 0 8px; padding: 4px 8px; background: #ffffe1; box-shadow: var(--bevel-flach-hinein); font-size: 13px; }
.listenhinweis { margin: 6px 0 0; font-size: 13px; }

/* Liste nach Tagen: der Tageskopf wie ein Spaltenkopf (erhoben), links Wochentag und Datum, rechts die Tagessumme */
.umsatz-rahmen { padding: 0; }
.fenster-inhalt .tageskopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 4px 8px;
  border-bottom: 0;
  background: var(--grau);
  box-shadow: var(--bevel-flach-heraus);
  font-size: 13px;
}
.tagessumme { white-space: nowrap; }
.keine-umsaetze { margin: 0; padding: 12px 8px; }
.umsatz-liste > li { border-bottom: 1px dotted var(--grau-dunkel); scroll-margin-top: 56px; }
.umsatz-liste > li:last-child { border-bottom: 0; }
.umsatz-liste > li:target .zeile { background: #ffffe1; }     /* die eben geaenderte Zeile (Rueckkehr ohne JavaScript) */

/* Die kompakte Zeile: oben Haendler und Betrag (je 18 px hoch), darunter die 44 px hohe Box des Chips (4 px ueberlappen den freien Raum unter dem Text) */
.umsatz-kompakt { min-height: 0; padding: 4px 8px 0; row-gap: 0; align-items: center; }
.umsatz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; }
.umsatz-kompakt .zeile-betrag { font-size: 14px; line-height: 18px; }
.umsatz-kompakt .zeile-aktion { position: static; z-index: auto; flex-wrap: nowrap; gap: 6px; margin: -4px 0 0; min-height: 44px; }
.kat-chip {
  position: relative;
  z-index: 1;                              /* ueber der dehnbaren Zeile (.dehnen::after) */
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: var(--tap);
  max-width: 68%;
  min-height: var(--tap);
  padding: 0 3px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
}
.kat-chip:visited { color: var(--text); }
.kat-chip:focus-visible { outline: none; }
.kat-chip:focus-visible .kat-chip-flaeche { outline: 1px dotted var(--schwarz); outline-offset: -3px; }
.kat-chip-flaeche {
  display: block;
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--grau);
  box-shadow: var(--bevel-flach-heraus);
}
.kat-chip:active .kat-chip-flaeche { box-shadow: var(--bevel-flach-hinein); }
/* ohne Kategorie: auffaellig (gelb, rot); vom System vermutet: gelb, gestrichelt, kursiv, mit "?" - von Dorian gesetzte Chips sind schlicht grau */
.kat-chip.ohne .kat-chip-flaeche { background: #ffffe1; color: var(--rot); font-weight: bold; }
.kat-chip.vermutet .kat-chip-flaeche { background: #ffffe1; font-style: italic; outline: 1px dotted var(--schwarz); outline-offset: -3px; }
.konto-kuerzel { flex: none; color: var(--text-leise); font-size: 12px; }
.umsatz-kompakt .zeile-marke { flex: none; margin-right: 0; }

/* Kategorie-Auswahl: Fenster am unteren Rand (Classic-Fenster mit Titelleiste), auf dem PC mittig begrenzt */
.sheet-huelle { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-hintergrund { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.sheet { position: relative; width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet .fenster-inhalt { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.sheet .titel-knopf { font-size: 20px; line-height: 1; }
html.sheet-offen body { overflow: hidden; }
.sheet-kopf { margin: 0 0 8px; }
.kat-formular { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kat-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 4px 0; }
.kat-knopf { min-width: 0; min-height: 48px; padding: 6px 8px; font-size: 15px; overflow-wrap: anywhere; }
.kat-knopf.aktuell { box-shadow: var(--bevel-gedrueckt); font-weight: bold; padding: 7px 7px 5px 9px; }
.kat-knopf.vorgeschlagen { font-weight: bold; background: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px; }
.kat-weitere { margin: 4px 0; }
.sheet-passt { min-height: 52px; font-size: 16px; }
.sheet-passt-text { margin: 4px 0 8px; font-size: 13px; }
.sheet-immer { margin: 8px 0 0; }
.sheet-fehler { margin: 6px 0 0; }
/* waehrend des Speicherns (fetch) wirken die Knoepfe gedaempft; ein zweiter Tipp wird ohnehin ignoriert */
.sheet-huelle.beschaeftigt .kat-knopf, .sheet-huelle.beschaeftigt .sheet-passt,
.schnell.beschaeftigt .kat-knopf, .schnell.beschaeftigt .schnell-passt { color: var(--grau-dunkel); cursor: progress; }

/* Schnell zuordnen: eine Buchung nach der anderen, gross */
.schnell { display: flex; flex-direction: column; gap: 8px; }
.schnell-fortschritt { display: flex; flex-direction: column; gap: 4px; }
.schnell-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.schnell-zaehler { margin: 0; font-weight: bold; }
.schnell-steuerung { display: flex; align-items: center; gap: 6px; }
.schnell-karte { padding: 2px 0 0; }
.fenster-inhalt .schnell-haendler { margin: 0 0 2px; padding: 0; border: 0; box-shadow: none; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.schnell-paypal { font-size: 14px; font-weight: normal; }
.schnell-betrag { margin: 2px 0; font-size: 28px; font-weight: bold; }
.schnell-datum { margin: 2px 0 0; font-size: 16px; font-weight: bold; }
.schnell-konto, .schnell-hinweis { margin: 2px 0; font-size: 14px; }
.schnell-formular { margin-top: 10px; }
.schnell-passt { min-height: 56px; font-size: 17px; }
.schnell-vermutung-text { margin: 4px 0 8px; font-size: 13px; }
.schnell-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.schnell-notiz { margin: 8px 0 0; }
.schnell-notiz textarea { width: 100%; }
.schnell-fehler { margin: 6px 0 0; }
.schnell-fertig { padding: 4px 0; }
.nur-daten { display: none; }
.schnell-leiste { margin: 0 0 10px; }
.schnell-leiste .primary { width: calc(100% - 2px); }