/* Finanzen (finanzen.js). Größen, Radien und Höhen nur aus der Skala in app.css; das Blatt der Formulare kommt aus
   aufgaben.css (.af-blatt). Akzent ist die Farbe des Bereichs (Area.geld in der Mac-App: Grün), dunkler, damit
   Schrift und Linien auf hellem Grund lesbar bleiben. */

.haupt:has(> .fz), .fz, .fz-blatt { --studium: #248A3D; --studium-weich: rgba(52, 199, 89, .16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .haupt:has(> .fz), :root:not([data-theme="light"]) .fz, :root:not([data-theme="light"]) .fz-blatt { --studium: #30D158; --studium-weich: rgba(48, 209, 88, .2); }
}

.fz .rot { color: var(--rot); }
.fz .orange { color: var(--orange); }
.fz .plus { color: var(--studium); }
.fz .kopf-knoepfe { flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* Zahlen */
.fz-leitzahl { font-size: var(--t-zahl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.fz-zahl { font-size: var(--t-titel); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }
.fz-teiler { display: flex; gap: 2px; height: 8px; margin-bottom: 6px; }
.fz-teiler i { display: block; border-radius: var(--r-punkt); background: var(--geld); }
.fz-teiler i:last-child { flex: 1; opacity: .35; }
.fz-punkt { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--geld); }
.fz-punkt.blass { opacity: .35; }

/* Listen in Karten: jede Zeile ein Knopf, der das Blatt öffnet */
.fz-liste { list-style: none; margin: 0; padding: 0; }
.fz-liste li + li { border-top: 1px solid var(--linie); }
.fz-zeile {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%;
  padding: 10px 0; border: 0; background: none; text-align: left; font-size: var(--t-text); cursor: pointer;
}
.fz-zeile.zwei { grid-template-columns: minmax(0, 1fr) auto; }
.fz-zeile.statisch { cursor: default; }
.fz-zeile:focus-visible, .fz-link:focus-visible, .fz-tabelle tr:focus-visible { outline: 2px solid var(--studium); outline-offset: 2px; border-radius: var(--r-punkt); }
.fz-wann { font-size: var(--t-neben); color: var(--text-2); }
.fz-wann.heute { color: var(--studium); font-weight: 600; }
.fz-name { min-width: 0; overflow-wrap: anywhere; }
.fz-name small, .fz-betrag small, .fz-tabelle small { display: block; font-size: var(--t-klein); color: var(--text-2); font-weight: 400; }
.fz-name small.rot { color: var(--rot); }
.fz-betrag { font-weight: 600; text-align: right; white-space: nowrap; }
.fz-ziel { row-gap: 8px; }
.fz-ziel .balken { grid-column: 1 / -1; }
.fz-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: var(--t-text); }
.fz-hinweis .knopf { flex: none; }
.fz-fuss { margin: 10px 0 0; font-size: var(--t-neben); color: var(--text-2); }
.fz-leer { margin: 0; max-width: 46ch; }
.fz-link { border: 0; background: none; padding: 0; color: var(--studium); font: inherit; cursor: pointer; }
.fz-extern { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; font-size: var(--t-neben); }
.fz-extern svg { width: 13px; height: 13px; }

/* Kontoverlauf */
.fz-verlauf { display: block; width: 100%; height: auto; margin-bottom: 4px; overflow: visible; }
.fz-verlauf .linie { fill: none; stroke: var(--studium); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fz-verlauf .flaeche { fill: var(--studium-weich); stroke: none; }
.fz-verlauf .null { stroke: var(--rot); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fz-verlauf .tief { fill: var(--grund); stroke: var(--studium); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fz-verlauf .tief.rot { stroke: var(--rot); }
.fz-verlauf text { font-size: 11px; fill: var(--text-2); font-variant-numeric: tabular-nums; }

/* Leiste über Tabellen */
.fz-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 14px; }
.fz-blaettern { display: flex; align-items: center; gap: 10px; font-size: var(--t-text); }
.fz-blaettern b { min-width: 132px; text-align: center; }
.fz-blaettern .knopf { padding: 0 8px; }

/* Tabellen */
.fz-tabelle-karte { padding: 6px 20px 10px; overflow-x: auto; }
.fz-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-text); }
.fz-tabelle th { padding: 12px 0 8px; font-size: var(--t-klein); font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap; }
.fz-tabelle th.zahl, .fz-tabelle td.zahl { text-align: right; }
.fz-tabelle td { padding: 10px 12px 10px 0; border-top: 1px solid var(--linie); vertical-align: baseline; }
.fz-tabelle td:last-child, .fz-tabelle th:last-child { padding-right: 0; }
.fz-tabelle tbody tr[data-fz-oeffnen] { cursor: pointer; }
.fz-tabelle tbody tr[data-fz-oeffnen]:hover td { background: var(--flaeche); }
.fz-gruppe th { padding-top: 20px; }
.fz-gruppe th span:first-child { letter-spacing: .06em; text-transform: uppercase; }
.fz-gruppe th span.zahl { float: right; color: var(--text); font-size: var(--t-neben); }
thead + tbody .fz-gruppe th { padding-top: 6px; }
.fz-tabelle tr.pausiert td { color: var(--text-3); }
.fz-t-wann, .fz-t-gebucht, .fz-t-tag { color: var(--text-2); font-size: var(--t-neben); white-space: nowrap; }
.fz-t-betrag { font-weight: 600; white-space: nowrap; }
.fz-t-name { min-width: 128px; overflow-wrap: break-word; }
.fz-marke { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--flaeche); font-size: var(--t-mini); font-weight: 600; color: var(--text-2); }
.fz-umsaetze select { max-width: 190px; min-height: var(--h-knopf-klein); padding: 0 8px; border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); font-size: var(--t-neben); }
.fz-umsaetze select.leer { color: var(--text-2); }
.fz-import { cursor: pointer; }
.fz-anleitung { max-width: 62ch; }
.fz-anleitung p { margin: 8px 0 0; font-size: var(--t-text); }

/* Blatt */
.fz-blatt .fz-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fz-blatt form > * { min-width: 0; }
.fz-blatt [hidden] { display: none; }
.fz-blatt .af-feld input:focus, .fz-blatt .af-feld select:focus { outline-color: var(--studium); }
.fz-blatt .af-haken input { accent-color: var(--studium); }

@media (max-width: 700px) {
  .fz-t-gebucht, .fz-tabelle:not(.fz-umsaetze) thead th:nth-child(3) { display: none; }
  /* Umsätze: die Zuordnung rückt unter den Text der Buchung */
  .fz-umsaetze thead { display: none; }
  .fz-umsaetze tbody tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 0; border-top: 1px solid var(--linie); }
  .fz-umsaetze tbody tr:first-child { border-top: 0; }
  .fz-umsaetze td { padding: 0; border: 0; }
  .fz-umsaetze .fz-t-posten { grid-column: 2 / -1; grid-row: 2; padding-top: 6px; }
  .fz-umsaetze .fz-t-betrag { grid-column: 3; grid-row: 1; }
  .fz-umsaetze select { max-width: 100%; }
  .fz-hinweis { flex-wrap: wrap; gap: 6px 12px; }
  .fz-zeile { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .fz-tabelle-karte { padding: 4px 14px 8px; }
  .fz .kopf { flex-direction: column; align-items: stretch; }
  .fz .kopf-knoepfe { justify-content: space-between; }
}

/* In der Mac-App: Bedienmaße wie die nativen Seiten */
.eingebettet .fz-zeile, .eingebettet .fz-hinweis { padding: 7px 0; }
.eingebettet .fz-tabelle td { padding-top: 7px; padding-bottom: 7px; }
.eingebettet .fz-leiste { margin-top: 0; }
.eingebettet .fz .kopf { margin-bottom: 14px; }