/* ══════════════════════════════════════════════════════════════
   FINA — Bausteine
   Alles, was in mehreren Ansichten vorkommt: Schaltflächen, Siegel,
   Notizlampen, Formulare, Fenster, Listen, Hinweise.
   ══════════════════════════════════════════════════════════════ */

/* ── Schaltflächen ────────────────────────────────────────────
   Die Kopfzeile bleibt bewusst einfarbig: was gerade wichtig ist,
   sagt der Dateiname daneben, nicht die Farbe der Knöpfe. Rot
   trägt nur, was Daten überschreibt (.danger). */
button{font-family:var(--font-ui);font-size:13px;cursor:pointer}
/* Der Mac-Knopf: heller Verlauf, feine Kante, Radius 6. Primär
   (dunkel, weiß, 600) trägt die Entscheidung eines Fensters,
   Rot nur, was Daten überschreibt (.danger). */
.btn{background:var(--grad-btn);border:1px solid var(--rule);color:var(--ink);
  padding:4px 11px;border-radius:6px;font-size:11.5px;font-weight:500;box-shadow:var(--sh-btn);
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--paper-2);border-color:var(--rule-strong)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.seal:focus-visible,.qmark:focus-visible,.mtab:focus-visible,.vtab:focus-visible,.namebtn:focus-visible,.mhead:focus-visible,a:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;box-shadow:none}
.btn.primary:hover{background:#2E3A35;border-color:#2E3A35}
.btn.danger{background:var(--seal);border-color:var(--seal);color:#FBF1EF;box-shadow:none}
.btn.danger:hover{background:#93302A;border-color:#93302A}
.btn.small{padding:3px 8px;font-size:11px}
/* Die Anleitung ist der farbige Eintrag im Hamburger-Menü: orange
   Schrift statt orangener Fläche — im Menü tragen Einträge Farbe
   als Text (wie die drei „Neu…"-Wege). Offen zeigt der getönte
   Grund, dass der Bereich daneben steht. */
.btn.guidebtn{background:none;border-color:transparent;color:var(--accent-2);font-weight:600;box-shadow:none}
.btn.guidebtn:hover{background:var(--paper-2);border-color:transparent;color:var(--accent)}
.btn.guidebtn[aria-pressed="true"]{background:var(--chrome);box-shadow:none}
/* Zugeklappt bleibt vom Bereich nur seine oberste Zeile — dann
   braucht die Karte unter dem Kopf auch keinen Platz mehr.
   **Auch keine zwei Pixel**: die Karte ist weiß, der Kopf trägt
   seine Blockfarbe — ein Rest Polster darunter stand als weiße
   Kante quer unter dem zugeklappten Bereich (bis 22.8.26). */
.card.folded{padding-bottom:0}
.card.folded>.sechead{margin-bottom:0}
.linkish{background:none;border:0;color:var(--ink-2);text-decoration:underline;padding:0;font-size:12px;cursor:pointer;box-shadow:none}
.linkish:hover{color:var(--seal)}
/* Ein Weg im Kopf einer Karte — orange wie die Anleitung im Menü:
   er bietet etwas an, statt etwas zu tun. */
.headlink{background:none;border:0;padding:0;font-size:11px;color:var(--accent-2);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.headlink:hover{color:var(--accent)}
.namebtn{background:none;border:0;padding:0;font-family:var(--font-ui);font-size:15px;color:inherit;text-align:left;
  border-bottom:1px dotted var(--rule-strong);line-height:1.3}
.namebtn:hover{border-bottom-color:var(--ink);color:var(--ink)}
.rowbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  border-bottom:1px dotted var(--rule-strong)}
.rowbtn:hover{color:var(--seal)}
/* Die Bezeichnung im Kopf eines Fensters ist der Knopf, der sie
   ändert. Sie sieht aus wie die Überschrift, die sie ist —
   nur die gepunktete Linie sagt, dass man sie anfassen kann. Ein
   Stift daneben wäre ein zweites Ziel für dieselbe Sache. */
.titlebtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-bottom:1px dotted var(--rule-strong);line-height:1.15}
.titlebtn:hover{border-bottom-color:var(--ink)}
/* Noch ohne Bezeichnung: die Überschrift ist dann eine
   Aufforderung und keine Angabe — sie tritt zurück. */
.titlebtn.empty{color:var(--ink-2);font-style:italic}
/* Ein Fenster, das genau eine Sache fragt, ist so breit wie diese
   eine Sache. Ohne das nähme es die 1080 px von .modal .box und
   stünde mit einem Feld darin verloren da. */
.modal .box.narrow{max-width:460px}
/* Die beiden Kategorielisten im Einstellungsfenster: Einnahmen
   und Ausgaben nebeneinander, jede in der Farbe ihrer Geldart —
   dieselbe, die sie in allen Ansichten trägt. Die Kante links
   macht aus zwei Listen zwei Bereiche; ohne sie läse sich die
   rechte wie eine Fortsetzung der linken. */
.grouplists .field{border-left:4px solid var(--rule-strong);padding-left:12px}
.grouplists .gl-in{border-left-color:var(--edge-in)}
.grouplists .gl-out{border-left-color:var(--edge-out)}
.grouplists .gl-in .listhead,.grouplists .gl-in>label{color:var(--ok)}
.grouplists .gl-out .listhead,.grouplists .gl-out>label{color:var(--seal)}
/* Die Kategorieliste des Posten-Fensters trägt dieselben Farben:
   Einnahmen grün, Ausgaben rot. Die Beschriftung der Gruppe ist
   grau und kursiv — sie ist kein Eintrag, und wählen lässt sie
   sich ohnehin nicht (das macht <optgroup> von selbst). */
.grouppick optgroup{color:var(--ink-2);font-style:italic;font-weight:600}
.grouppick option.og-in{color:var(--ok);font-style:normal;font-weight:400}
.grouppick option.og-out{color:var(--seal);font-style:normal;font-weight:400}

/* ── Bezahlt-Siegel ───────────────────────────────────────────
   Die drei Zustände nach 3a: bezahlt = gefüllter grüner Kreis mit
   weißem Haken, offen = gestrichelter leerer Kreis, geschätzt =
   gelber Kreis in den Flex-Tönen. 16 px in der Zeile, 14 px in
   den Monatskacheln der Fenster (.mini). */
.marks{display:flex;gap:6px;align-items:center}
.seal{width:16px;height:16px;border-radius:50%;border:1.5px dashed var(--rule-strong);background:transparent;
  display:grid;place-items:center;padding:0;transition:border-color .15s,background .15s;flex:0 0 auto}
.seal:hover{border-color:var(--ink)}
.seal svg{width:10px;height:10px;opacity:0;transition:opacity .12s;stroke:#fff}
.seal[aria-pressed="true"]{border:0;background:var(--ok)}
.seal.est{border:1.5px solid var(--edge-flex);background:var(--bg-flex-3)}
.seal[aria-pressed="true"] svg{opacity:1}
.seal.mini{width:14px;height:14px;border-width:1.5px}
.seal.mini svg{width:9px;height:9px}
.seal.mini:disabled{opacity:.55;cursor:not-allowed}
.qmark{width:24px;height:24px;border-radius:50%;border:1.5px dotted var(--rule-strong);background:transparent;
  color:var(--rule-strong);font-family:var(--font-data);font-weight:600;font-size:13px;line-height:1;padding:0;flex:0 0 auto}
.qmark:hover{border-color:var(--amber);color:var(--amber)}
.qmark[aria-pressed="true"]{border:2px solid var(--amber);border-style:solid;background:#F6E9B8;color:#6E5410}

/* ── Stift, Notizlampe und Beleglink ──────────────────────────
   Die drei Symbole stehen in jeder Ansicht nebeneinander und
   bekommen deshalb dasselbe 20px-Feld: nur dann sitzen sie in
   einer Flucht und ihre Abstände sind gleich. */
.pencil{background:none;border:0;padding:0;width:16px;height:16px;cursor:pointer;color:var(--ink-2);
  font-size:13px;font-weight:700;line-height:1;border-radius:2px;
  display:inline-grid;place-items:center;vertical-align:middle}
.pencil:hover{color:var(--seal);background:rgba(0,0,0,.05)}
.lamp{background:none;border:0;padding:0;width:16px;height:16px;cursor:pointer;color:var(--rule)}
.lamp{display:inline-grid;place-items:center;vertical-align:middle}
.lamp svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lamp:hover{color:var(--seal)}
/* Die Lampe „an" trägt die Flex-Töne des Mocks: Kontur amber,
   Füllung die dritte Gelbstufe. */
.lamp.on{color:var(--amber)}
.lamp.on svg{fill:var(--bg-flex-3)}
/* Die Lampe zur ganzen Position steht links vor dem Namen —
   überall gleich: in den Ansichten, in der Prognose und in der
   Überschrift der Fenster. */
.lamp.pos{margin-right:6px;vertical-align:-4px}
.modal h3 .lamp.pos{vertical-align:-3px}
/* Das Kettensymbol ist mal ein Link (ein einziger Eintrag), mal ein
   Knopf (mehrere — dann öffnet er die Auswahl). Beide sehen gleich
   aus: welcher es ist, geht den Leser nichts an. */
.linkicon{display:inline-grid;place-items:center;width:16px;height:16px;color:var(--ink-2);text-decoration:none;
  background:none;border:0;padding:0;box-shadow:none}
.linkicon:hover{color:var(--seal)}
/* Wo noch kein Link steht, steht ein Strich: eine leere Zelle sagt
   nur, dass hier nichts ist — der Strich sagt, dass hier etwas
   hinkönnte. Blass wie eine Vorgabe, nicht wie eine Angabe. */
.linkicon.linkdash{color:var(--rule);font-size:13px;line-height:1}
.linkicon.linkdash:hover{color:var(--seal)}
.linkicon svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ── Marken, Plaketten, Legende ───────────────────────────── */
.pill{display:inline-block;font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-strong);padding:1px 6px;color:var(--ink-2);margin-left:8px}
.pill.last{border-color:var(--seal);color:var(--seal)}
.pill.corrp{border-color:var(--seal);color:var(--seal)}
/* Die Marke an der neuesten Version im Reiter „Was ist neu": gelb,
   Schrift wie Rahmen. Gelb heißt in dieser Anwendung „sieh her,
   das steht noch nicht fest" (geschätzte Beträge) — hier heißt es
   „das ist neu". Beides zieht den Blick, ohne etwas zu behaupten;
   Rot wäre eine Warnung, Grün eine Bestätigung. */
.guide .pill{border-color:var(--amber);color:var(--amber)}
.lock{color:var(--seal);font-family:var(--font-data);font-size:8.5px;letter-spacing:.08em}
/* Grün: unverändert so importiert. Orange: von Hand korrigiert —
   dieselbe Farbe, die überall „steht noch nicht fest, das hat
   jemand gesetzt" bedeutet. Rot wäre eine Warnung, und eine
   Korrektur ist keine. */
.lock.imp{color:var(--ok)}
.lock.corr{color:var(--amber);cursor:help}
/* Die Zeichenerklärung steht unter allen Karten und nicht am Fuß
   der regelmäßigen Kosten: dieselben Siegel gibt es auch bei den
   Einnahmen und den Flexible Payments.

   Die Zeichenerklärung steht unter allen Karten und ist gesetzt
   wie die Statuszeile ganz unten: eine dünne Linie darüber, kleine
   Schreibmaschinenschrift, kein Kasten. Sie erklärt etwas, sie
   meldet nichts — deshalb tritt sie zurück. */
.legendbar{margin-top:14px;border-top:1px solid var(--rule);padding-top:10px;
  font-family:var(--font-data);font-size:11px;color:var(--ink-2);
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.legendbar .legtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.legendbar .legend{margin-top:0;font-size:11px;font-family:var(--font-data);gap:18px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--ink-2);align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-2px}
/* Dieselben drei Zustände wie die Siegel selbst (siehe .seal). */
.legend .l-open{border:1.5px dashed var(--rule-strong)}
.legend .l-paid{border:0;background:var(--ok)}
.legend .l-unc{border:1.5px solid var(--edge-flex);background:var(--bg-flex-3)}
.meta{font-family:var(--font-data);font-size:10.5px;color:var(--ink-2);margin-top:3px;letter-spacing:.02em}
.meta span+span::before{content:" · ";opacity:.6}
.meta a{color:var(--ink-2)}

/* ── Filterleiste ─────────────────────────────────────────────
   Eine Zeile: links die Fälligkeiten und das Suchfeld, rechts der
   Zahlungsstand. Wird es eng, rutscht die rechte Gruppe als
   Ganzes darunter — die Knöpfe einer Gruppe bleiben zusammen. */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
/* Angewendet heißt dunkel — in der Filterzeile der Monatsansicht
   wie in der Knopfleiste der Jahresmatrix. Beide stecken ihre
   Filter in eine `.fbgroup`; Knöpfe ohne aria-pressed (anlegen)
   bleiben davon unberührt. Orange ist in der Monatsansicht der
   Grund der ganzen Leiste (.anabar .filterbar in css/layout.css):
   sie sagt, **wo** gefiltert wird, der dunkle Knopf, **was**. */
.filterbar button[aria-pressed="true"],.fbgroup button[aria-pressed="true"]{
  background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
/* Eine Zeile, drei Abschnitte: Suchfeld · Fälligkeit · Stand.
   Zwischen den Gruppen mehr Luft als zwischen ihren Knöpfen,
   damit man sieht, was zusammengehört. */
.filterbar.fbrow{justify-content:flex-start;gap:10px 8px}
.fbgroup{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fbgroup+.fbgroup{margin-left:10px}
/* Das Suchfeld ist so breit wie die drei Spalten vor der
   Bezeichnung (--leadw in css/ledger.css): die Knöpfe dahinter
   fangen dann genau über der Bezeichnungsspalte an. Wird es eng,
   gibt das Feld nach — die Knöpfe sollen nicht umbrechen, bloß
   weil das Feld auf seiner Breite besteht.

   Die Breite trägt der Kasten aus Hamburger-Knopf und Feld, nicht
   das Feld allein: davor steht der Knopf, der sagt, worin gesucht
   wird. */
/* `stretch` statt `center`: die beiden Knöpfe sind damit genau so
   hoch wie das Feld zwischen ihnen. Sonst richtet sich jeder nach
   seiner eigenen Schrift, und drei verschieden hohe Kästchen in
   einer Reihe lesen sich wie ein Fehler. Die Höhe gibt also das
   Feld vor; die Knöpfe zentrieren ihr Zeichen darin selbst. */
.fltbox{display:flex;gap:8px;align-items:stretch;
  flex:0 1 calc(var(--leadw) - 8px);width:calc(var(--leadw) - 8px);min-width:170px}
/* Das eingedrückte Mac-Suchfeld: weißer Kasten mit der Lupe davor,
   das Eingabefeld darin randlos — der Kasten trägt Rahmen, Radius
   und den inneren Schatten. */
.fltfield{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:0 9px;
  background:#fff;border:1px solid var(--rule);border-radius:6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.fltfield .lens{color:var(--rule-strong);font-size:12px;line-height:1}
.fltfield:focus-within{outline:2px solid var(--ink);outline-offset:-1px}
/* Randlos nur **im Kasten**: das mobile Suchfeld (.msq) steht
   allein und behält Rand und Fokusring. */
.fltfield .fltq{flex:1 1 auto;width:auto;min-width:0;padding:4px 0;font-size:11.5px;
  background:none;border:0;border-radius:0;box-shadow:none}
.fltfield .fltq:focus{outline:none;border:0}
/* In der Jahresansicht steht das Feld neben der Überschrift und
   richtet sich nach keiner Spalte. */
.fltbox.fltyear{flex:0 0 auto;width:264px}
/* Rechts vom Feld der Knopf, der den Filter zurücknimmt. Etwas
   kleiner ist das Kreuz: es ist ein Zeichen, keine Beschriftung. */
.fltclear{flex:0 0 auto;padding:0 8px;font-size:11.5px;line-height:1;
  display:flex;align-items:center;justify-content:center}

/* Eingabefeld mit Knopf daneben — der Beleglink lässt sich so
   öffnen, ohne vorher zu speichern. */
/* ── Zugehörige Links ─────────────────────────────────────────
   Je Zeile drei Dinge: der Stift links, der Link als Text, das
   Kreuz rechts. Der Stift steht links, weil er zur Zeile gehört —
   wie in jeder Tabelle der Anwendung; das Kreuz rechts, weil es
   die Zeile beendet.

   Der Link ist ein Link und sieht auch so aus: ein Klick öffnet
   die Seite, beim Überfahren nennt die Sprechblase die volle
   Adresse. Der Name allein wäre sonst eine Behauptung, die man
   nicht prüfen kann.

   Die Überschrift trägt das Pluszeichen direkt hinter sich
   (.plusmini, wie die Listen im Einstellungsfenster); ohne Links
   steht darunter gar nichts. */
.linklist{list-style:none;margin:0;padding:0}
.linklist li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--rule)}
/* Im Auswahlfenster ist die letzte Zeile die letzte — darunter
   kommt der Knopf. In der Liste des Änderungsfensters schließt
   dagegen ein Strich ab (siehe unten). */
.linklist:not(.edit) li:last-child{border-bottom:0}
.linklist a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.linklist.edit a{flex:1 1 auto}
.linklist a:hover{color:var(--accent-2)}

/* ── Die Zeile eines Links ────────────────────────────────────
   Von links: der Griff zum Sortieren, der Stift, dann der Link —
   und **das Kreuz ganz rechts**, wie in den Listen des
   Einstellungsfensters (`.listrow`: Griff links, Löschen rechts).
   Dasselbe Muster an beiden Stellen, damit man es nur einmal
   lernen muss.

   Griff und Stift stehen dabei **auseinander**: sie tun sehr
   verschiedene Dinge, und dicht an dicht träfe man beim schnellen
   Klicken das falsche. */
/* **Die Liste sieht aus wie eine Tabelle**: ein Strich unter der
   Überschrift, einer unter jeder Zeile — auch unter der letzten,
   auch wenn es nur eine gibt. Erst der Abschluss unten macht aus
   den Zeilen einen Block; ohne ihn franst die Liste nach unten
   aus und man weiß nicht, ob noch etwas kommt.

   Ohne Links gibt es keine Striche: dann steht dort nur die
   Überschrift mit ihrem Plus, und eine Tabelle ohne Inhalt wäre
   ein leerer Rahmen. Das ergibt sich von selbst — linkRows()
   liefert dann gar nichts. */
.linklist.edit{border-top:1px solid var(--rule)}
.linklist.edit li{gap:0;padding:4px 0}
.linklist.edit .grip{flex:0 0 auto;cursor:grab;color:var(--ink);font-size:14px;font-weight:700;
  line-height:1;letter-spacing:-2px;user-select:none;width:16px;text-align:center}
.linklist.edit .grip:hover{color:var(--seal)}
/* Stift und Kreuz sind gleich groß: sie stehen nebeneinander und
   sind gleich wichtig. Der Stift trägt sonst 17px — das ist die
   Größe für eine Tabellenzeile, hier stünde er über dem Kreuz. */
.linklist.edit .pencil{flex:0 0 auto;margin-left:14px;margin-right:18px;font-size:13px}
.linklist.edit .lndel{flex:0 0 auto;margin-left:18px;
  background:none;border:0;padding:0;width:20px;height:20px;border-radius:2px;
  color:var(--ink-2);font-size:13px;line-height:1;display:inline-grid;place-items:center}
.linklist.edit .lndel:hover{color:var(--seal);background:rgba(0,0,0,.05)}
/* Gezogen wird wie in den Einstellungen: die gehaltene Zeile tritt
   zurück, die Zeile darunter zeigt, wo sie landet. */
.linklist.edit li.dragging{opacity:.4}
.linklist.edit li.over{background:var(--bg-out)}
/* Der Monat, dessentwegen das Fenster aufging (Siegel eines
   geschätzten Betrags): kurz hervorgehoben, damit man ihn unter
   zwölf Feldern sofort findet. */
.mgrid .cell.askcell{box-shadow:inset 0 0 0 2px var(--amber)}

/* ── Formularfelder ───────────────────────────────────────────
   Weiße Boxen mit Radius 6 auf dem --chrome-Grund der Blöcke —
   die Bauform der Selects und Felder aus 5a/5b. */
input,select,textarea{font-family:var(--font-ui);font-size:12px;background:#fff;color:var(--ink);
  border:1px solid var(--rule);border-radius:6px;padding:5px 10px}
input.num{font-family:var(--font-data);font-size:11.5px;text-align:right}
input[type="checkbox"]{accent-color:var(--ink)}
/* Ein Feld, das noch etwas braucht: roter Rahmen, sonst nichts.
   Es ist keine Meldung — die steht darunter —, sondern der Zeiger
   auf die Stelle, an der sie zu beheben ist. Deshalb liegt der
   Rahmen doppelt, damit er auch neben dem gewöhnlichen 1px-Rand
   der Nachbarfelder auffällt. */
input.bad,input.bad:focus{border-color:var(--seal);box-shadow:inset 0 0 0 1px var(--seal);outline:none}
/* Vorzeichen schon beim Tippen: Ausgaben rot, Einnahmen grün —
   dieselben Farben wie in den Tabellen. Die Klasse setzt
   signValue() in js/ui.js, die Null bleibt ohne.

   Auch ein abgeschlossener Monat trägt die Farbe: sein Betrag
   soll sich beim Überfliegen der zwölf Felder genauso lesen wie
   die offenen. Dass er gesperrt ist, sagen der graue Grund der
   Zelle und der gestrichelte Rand — dafür braucht es die
   Schriftfarbe nicht. Zwei Klassen wiegen schwerer als
   input:disabled darunter; das Grau gilt also weiter für jedes
   andere gesperrte Feld. */
input.num.neg{color:var(--seal)}
input.num.pos{color:var(--ok)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
/* Gesperrt heißt im Mac-Chrome: kein weißer Grund mehr, nur der
   gestrichelte Rand — die Kachel dahinter (--settled) sagt den
   Rest. */
input:disabled{background:transparent;color:var(--ink-2);cursor:not-allowed;
  border-style:dashed;border-color:var(--rule-strong)}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--font-data);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.field input,.field select,.field textarea{width:100%}

/* ── Felder nebeneinander ─────────────────────────────────────
   Beschriftung und Eingabe sind zwei Zeilen des äußeren Rasters,
   die sich alle Felder einer Reihe teilen (subgrid). Nur so
   fluchten die Eingaben, wenn eine Beschriftung zweizeilig wird
   und die daneben einzeilig — „Last payment (LP) — month" neben
   „Link to receipt or contract". Ohne das säße jedes Feld auf
   eigener Höhe.

   Die Fugen: 4px zwischen Beschriftung und Feld (die setzt das
   Feld selbst), 14px zwischen zwei Reihen von Feldern (die kommt
   vom Raster). Kennt ein Browser subgrid nicht, bekommt jede
   Beschriftung stattdessen die Höhe von zwei Zeilen — dasselbe
   Bild, nur unnachgiebiger. */
/* Der Abstand nach unten saß früher am einzelnen Feld; jetzt
   trägt ihn die Reihe, denn die Felder darin sollen keinen
   eigenen haben. */
.cols{display:grid;column-gap:10px;row-gap:14px;margin-bottom:12px}
.cols>.field{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:4px;margin-bottom:0}
.cols>.field>label{margin-bottom:0;align-self:end}
@supports not (grid-template-rows:subgrid){
  .cols>.field{display:block}
  .cols>.field>label{margin-bottom:4px;min-height:2.6em}
}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:1fr 1fr 1fr}
.c4{grid-template-columns:repeat(4,1fr)}
.c6{grid-template-columns:repeat(6,1fr)}
.span4{grid-column:span 4}
@media(max-width:900px){.c4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.c2,.c3,.c4,.c6,.quick .qrow{grid-template-columns:1fr!important}.span4{grid-column:span 1}.mgrid{grid-template-columns:repeat(2,1fr)!important}}

/* ── Liste zum Ankreuzen ──────────────────────────────────────
   Eine Zeile je Wahl: Kästchen, Beschriftung, darunter der
   Halbsatz, der sagt, was dazugehört. Die ganze Zeile ist ein
   <label> — man trifft sie überall, nicht nur auf dem Kästchen. */
.checklist{display:grid;gap:0;margin-bottom:4px}
.checkrow{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;
  padding:10px 4px;border-bottom:1px solid var(--rule);cursor:pointer}
.checkrow:last-child{border-bottom:0}
.checkrow input{width:auto;margin:3px 0 0}
.checkrow .clab{font-size:14.5px;color:var(--ink)}
.checkrow .chint{grid-column:2;font-size:12px;color:var(--ink-2);margin-top:2px}
.checkrow:hover{background:var(--shade)}
/* Der Haken, der nicht sagt, worin gesucht wird, sondern wo: eine
   Linie darüber trennt ihn von den fünf, die zusammengehören. */
.wherelist{border-top:1px solid var(--rule-strong);margin-top:10px}

/* Was das Speichern zurückweist, steht in Rot über den Knöpfen —
   dort, wo eben geklickt wurde. */
.errline{color:var(--seal);font-size:13px;font-weight:600;margin:12px 0 0}

/* ── Fenster (Modal) ──────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(27,35,32,.42);display:grid;place-items:center;padding:18px;z-index:50}
/* Das Mac-Fenster (Vorlage 5a/5b): Papiergrund, Rand in
   --rule-strong, Radius 10 und der tiefe Schatten des Chrome.
   Die Blöcke darin (.dgrp) stehen auf --chrome mit Radius 8. */
.modal .box{background:var(--paper-2);border:1px solid var(--rule-strong);border-radius:10px;
  box-shadow:var(--sh-modal);
  max-width:1080px;width:100%;max-height:92vh;overflow:auto;padding:22px}
/* ── Ein Formularfenster ist schmal ──────────────────────────
   Die Monate stehen zu dritt in einer Reihe — ein Quartal je Zeile
   (siehe .mgrid). Ein Kästchen bleibt dabei so breit wie zuvor,
   also ist das Fenster so breit wie drei davon: 3 × 166 + 2 × 8
   Fuge + 2 × 22 Polster des Fensters + 2 × 12 des Blocks, in dem
   sie stehen. Breiter wäre es leerer Platz neben den Kästchen,
   schmaler drückte es sie zusammen. */
.modal .box.form{max-width:588px}
/* Im schmalen Fenster stehen die Auswahllisten zu zweit: vier
   nebeneinander wären 120 px je Liste, und darin ist von einer
   Kategorie nichts mehr zu lesen. */
.modal .box.form .c4,.modal .box.form .c3{grid-template-columns:1fr 1fr}
/* ── Die Blöcke eines Fensters ───────────────────────────────
   Zuordnung · Links · Schnelleingabe · Monate: jeder in einem
   eigenen Feld auf hellerem Grund, mit derselben Kante wie ein
   Knopf. Überschriften tragen sie nicht — die Felder darin sind
   beschriftet, und ein Wort über jedem Block wäre der Text, der
   ein Fenster zumüllt. Der Abstand zwischen zwei Blöcken ist
   größer als der zwischen zwei Feldern; erst dadurch liest man
   sie als Gruppen. */
.dgrp{background:var(--chrome);border:1px solid var(--shade);border-radius:8px;
  padding:10px 12px 2px;margin:0 0 10px}
.dgrp>.cols:last-child,.dgrp>.field:last-child{margin-bottom:10px}
.dgrp .listlinks{margin-top:0}
/* ── Anleitung als Seitenbereich ──────────────────────────────
   Die Anleitung ist kein Fenster: sie bleibt offen, während man
   in der Tabelle weiterarbeitet. Deshalb liegt sie fest am
   rechten Rand, und die Seite wird um genau ihre Breite schmaler
   gemacht (body.guideon .wrap) statt überdeckt — sonst verschwände
   die halbe Tabelle darunter.

   Die Breite steht in --guidew und wird von js/dialogs/guide.js
   gesetzt: beim Öffnen ein Drittel des Fensters, danach, was man
   am Griff zieht. Beide Stellen lesen dieselbe Variable, damit
   Bereich und Seitenrand nie auseinanderlaufen. Der Bereich liegt
   unter den Fenstern (z-index 45 gegen 50) — ein Fenster deckt
   ihn also zu. */
.guidepanel{position:fixed;top:0;right:0;bottom:0;width:var(--guidew,33vw);z-index:45;
  display:flex;flex-direction:column;background:var(--paper-2);border-left:2px solid var(--ink);
  box-shadow:-14px 0 26px -20px rgba(0,0,0,.7)}
body.guideon .wrap{padding-right:calc(24px + var(--guidew,33vw))}
/* Der Griff greift über die Kante hinaus, damit er auch dann zu
   fassen ist, wenn die Maus schon knapp daneben steht. */
.guidepanel .ghandle{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;
  background:transparent;border:0;padding:0}
.guidepanel .ghandle::after{content:"";position:absolute;left:3px;top:50%;width:3px;height:46px;
  margin-top:-23px;border-radius:2px;background:var(--rule-strong)}
.guidepanel .ghandle:hover::after,.guidepanel .ghandle:focus-visible::after{background:var(--accent)}
.guidepanel .ghandle:focus-visible{outline:none}
.guidepanel .ghead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:16px 18px 10px;background:var(--paper);flex:0 0 auto}
.guidepanel .ghead h3{font-family:var(--font-display);font-size:20px;margin:0}
.guidepanel .ghead .subline{font-size:12px;color:var(--ink-2);margin:3px 0 0}
/* ── Die Sprache der Anleitung ────────────────────────────────
   Zwei Kürzel links neben dem Kreuz, in einem gemeinsamen Rahmen:
   sie gehören zusammen und sind eine Wahl, keine zwei Knöpfe. Das
   gewählte steht dunkel — dieselbe Sprache wie die Filterknöpfe.
   Sie schalten **nur** die Anleitung um; die Sprache der Oberfläche
   steht in den Einstellungen. */
.guidepanel .gact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Der Pfeil aus dem Kasten steht zwischen der Sprachwahl und dem
   Kreuz: er nimmt die Anleitung mit, das Kreuz lässt sie zurück.
   Ein Symbol statt eines Wortes — im Kopf ist die Zeile schmal, und
   „In neuem Reiter öffnen" stünde dort dreizeilig. */
/* Das Polster ist um ein Pixel höher als am Kreuz daneben: dort
   trägt ein Schriftzeichen die Höhe, hier ein 13-px-Symbol — beide
   Knöpfe sollen gleich hoch sein. */
.guidepanel .gfull{display:inline-grid;place-items:center;padding:5px 8px}
.guidepanel .gfull svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Der Trennstrich ist eine **Fuge**, kein Rand am zweiten Knopf:
   als border-left war DE genau ein Pixel breiter als EN, und bei
   zwei Kürzeln nebeneinander sieht man das. Dieselbe Bauart wie
   die Kennzahlenleisten (.kpi, .anarow) — die 1px-Lücke lässt den
   Grund des Rahmens durchscheinen, beide Knöpfe bleiben gleich. */
.guidepanel .glangs{display:flex;gap:1px;background:var(--rule-strong);
  border:1px solid var(--rule-strong);border-radius:2px;overflow:hidden}
/* Deckender Grund statt transparent: sonst schiene die Fuge durch
   die Knöpfe selbst hindurch. Der Kopf der Anleitung steht auf
   --paper (siehe .guidepanel .ghead). */
.guidepanel .glang{background:var(--paper);border:0;cursor:pointer;padding:3px 7px;
  font-family:var(--font-data);font-size:10px;letter-spacing:.1em;color:var(--ink-2);line-height:1.5}
.guidepanel .glang:hover{background:var(--shade);color:var(--ink)}
.guidepanel .glang[aria-pressed="true"]{background:var(--ink);color:var(--paper-2)}
.guidepanel .glang:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
/* Zwei Wege durch dieselbe Anleitung: der Weg für Anfänger und
   die Beschreibung. Die orange Linie liegt am gewählten Reiter,
   nicht am Kopf darüber — sie soll sagen, wo man gerade liest. */
.guidepanel .gtabs{display:flex;background:var(--paper);border-bottom:1px solid var(--rule);flex:0 0 auto}
.guidepanel .gtabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:9px 10px;
  font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);cursor:pointer;line-height:1.3}
.guidepanel .gtabs button:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.guidepanel .gtabs button[aria-selected="true"]{color:var(--ink);font-weight:600;
  border-bottom-color:var(--accent);background:var(--paper-2)}
.guidepanel .gtabs button:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
.guidepanel .gbody{flex:1 1 auto;overflow:auto;padding:2px 18px 40px}
/* Die erste Überschrift braucht keine Trennlinie — darüber steht
   schon die Kante des Kopfes. */
.guidepanel .gbody>h4:first-child{margin-top:16px;border-top:0;padding-top:0}
/* Beim Ziehen darf nichts markiert werden, sonst färbt sich der
   halbe Text blau. */
body.gresize{user-select:none;cursor:col-resize}
/* Auf schmalen Schirmen nimmt die Anleitung die ganze Breite und
   legt sich über die Seite: nebeneinander bliebe für keins von
   beidem Platz. */
@media(max-width:760px){
  .guidepanel{width:100%!important}
  body.guideon .wrap{padding-right:24px}
}

/* ── Anleitung: Text und Bilder ───────────────────────────────
   Die Bilder liegen in doc/img und sind immer so breit wie der
   Bereich. Weil eine Jahresmatrix darin nur noch ein Muster wäre,
   führt jedes Bild als Link auf sich selbst: der Klick öffnet es
   in voller Größe in einem neuen Reiter. */
.guide .glead{font-size:15px;line-height:1.5;margin:14px 0 2px}
.guide .gzoom{font-size:11px;color:var(--ink-2);margin:10px 0 0}
.gshot{margin:10px 0 16px;padding:0}
.gshot a{display:block}
.gshot img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--paper-2)}
.gshot a:hover img{border-color:var(--accent)}
.gshot figcaption{font-size:11px;line-height:1.35;color:var(--ink-2);margin-top:4px}

/* ── Die Anleitung als eigene Seite ───────────────────────────
   Dieselben Stylesheets, nur ohne Tabelle daneben: eine einzelne
   Spalte in Lesebreite, mittig. Gebaut wird die Seite in
   js/dialogs/guide.js und in einen neuen Reiter des Browsers
   geschrieben; Reiter gibt es dort keine, die drei Teile stehen
   hintereinander und oben eine Zeile mit Sprungmarken. */
.gpage{max-width:820px;margin:0 auto;padding:26px 24px 90px}
.gpage h1{font-family:var(--font-display);font-size:25px;letter-spacing:.04em;margin:0}
/* Die drei Teile stehen auf einer Seite hintereinander; oben führt
   dieselbe Reiterzeile hin, die der Seitenbereich hat — gleiches
   Bild, gleiche Bedienung. Sie **klebt**, damit man von überall zum
   nächsten Teil kommt, ohne zurückzurollen. Es sind Sprungmarken
   und keine Schalter: welchen Teil man liest, sagt die Überschrift
   darunter, und ohne Skript ließe sich ein „gewählt" ohnehin nicht
   führen. */
.gpage .gnav{display:flex;position:sticky;top:0;z-index:5;margin:9px 0 0;
  background:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.gpage .gnav a{flex:1;text-align:center;padding:9px 10px;
  font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;line-height:1.3;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent}
.gpage .gnav a:hover{color:var(--ink);background:rgba(0,0,0,.04);border-bottom-color:var(--accent)}
.gpage .gnav a:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
/* Die Sprungmarke soll nicht unter der klebenden Zeile landen. */
.gpage section{scroll-margin-top:44px}

/* ── Zurück nach oben ─────────────────────────────────────────
   Unten rechts, klein und rund. Im Seitenbereich ein Knopf, der den
   Textbereich rollt (die Seite dahinter ginge ins Leere), auf der
   ganzen Seite ein Anker — die kommt ohne Skript aus. Beide sehen
   gleich aus. */
.gtop{position:absolute;right:16px;bottom:14px;z-index:6;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--rule-strong);color:var(--ink-2);
  font-size:15px;line-height:1;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.4)}
.gtop:hover{color:var(--ink);border-color:var(--ink);background:var(--paper)}
.gtop[hidden]{display:none}
/* Auf der ganzen Seite gibt es keinen Bereich, in dem er sitzen
   könnte — dort hängt er am Fenster. */
.gpage~.gtop{position:fixed}
.gpage h2{font-family:var(--font-display);font-size:21px;margin:0 0 2px}
/* Zwischen den drei Teilen eine kräftige Linie: auf einer Seite
   ohne Reiter ist sie das, was den Wechsel sichtbar macht. */
.gpage section{padding-top:30px}
.gpage section+section{border-top:1px solid var(--rule-strong);margin-top:34px}
.gpage section>h4:first-of-type{border-top:0;padding-top:0;margin-top:16px}

/* ── Anleitung ────────────────────────────────────────────── */
.guide h4{font-family:var(--font-data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:22px 0 6px;border-top:1px solid var(--rule);padding-top:14px}
.guide p,.guide li{font-size:14px;line-height:1.55;margin:0 0 8px}
.guide ul,.guide ol{margin:0 0 8px;padding-left:20px}
.guide li{margin-bottom:5px}
.modal h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 4px}
.modal .subline{font-size:12.5px;color:var(--ink-2);margin:0 0 14px}
.row-end{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:16px;flex-wrap:wrap}
/* Die Knopfzeile eines Fensters steht hinter einer Haarlinie: was
   darüber steht, wird ausgefüllt, was darunter steht, entscheidet.
   Dieselbe Trennung wie zwischen den Blöcken, nur ohne Feld. */
.modal .box>.row-end{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
/* Löschen steht links in der Fußzeile, als orangefarbener Textlink
   (5a): es ist der Weg, der aus dem Fenster hinausführt, und kein
   Knopf neben „Speichern". margin-right:auto schiebt die
   entscheidenden Knöpfe nach rechts. */
.row-end .dellink{margin-right:auto;background:none;border:0;padding:0;
  color:var(--accent-2);text-decoration:underline;text-underline-offset:2px;
  font-size:12px;cursor:pointer}
.row-end .dellink:hover{color:var(--seal)}

/* ── Die Wege in die Einstellungen ────────────────────────────
   Eine dünne Zeile über der Reihe der Auswahllisten: die
   Beschriftung sagt einmal, wohin es geht, danach ein Weg je Liste,
   durch Mittelpunkte getrennt. Sie steht dicht über den Feldern, die
   sie meint — der Abstand nach unten ist kleiner als der nach oben.
   Gebaut wird sie in setLinks() (js/ui.js). */
.listlinks{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin:0 0 7px}
.listlinks .lsep{color:var(--rule-strong)}

/* ── Schnelleingabe und Monatsraster im Fenster ───────────── */
.quick{border:1px solid var(--shade);border-radius:8px;background:var(--chrome);
  padding:10px 12px;margin:0 0 10px}
/* Überschrift links, Mittelwert rechts — in einer Zeile, damit die
   Angabe keine eigene Höhe kostet. Rechts steht sie über dem
   Betragsfeld, und genau dort wird die Annahme für die kommenden
   Monate eingetippt: man liest den bisherigen Schnitt, während man
   den nächsten Wert setzt. */
.quick .qhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-bottom:8px;flex-wrap:wrap}
/* Orange, weil die Zahl weder Einnahme noch Kosten ist, sondern
   ein Hinweis — sie soll aus den Beträgen ringsum herausfallen,
   ohne sich als einer von ihnen auszugeben. */
.quick .qavg{font-family:var(--font-data);font-size:12px;color:var(--accent-2);
  text-align:right;white-space:nowrap}
/* Ohne feststehenden Monat gibt es nichts zu rechnen: dann ist die
   Zeile eine Auskunft und keine Zahl — sie tritt zurück. */
.quick .qavg.none{color:var(--ink-2);font-style:italic}
/* Wiederholung · ab Monat · Betrag — in dieser Reihenfolge, und
   damit auch in dieser Tab-Folge. Die beiden Auswahlfelder
   tragen längeren Text und bekommen deshalb mehr Platz. */
.quick .qrow{display:grid;grid-template-columns:1.3fr 1.2fr 1fr;gap:8px}
/* Die beiden Knöpfe stehen rechts, „Übernehmen" ganz außen — wie
   die Fußzeile eines Fensters, wo der Knopf, der etwas tut, immer
   am rechten Rand steht. */
.quick .qbtns{display:flex;gap:8px 12px;margin-top:8px;flex-wrap:wrap;justify-content:flex-end;
  align-items:center}
/* Der Hinweis links, die Knöpfe rechts — eine Zeile statt zweier.
   Er schiebt sie mit margin-right:auto nach außen und gibt nach,
   wenn es eng wird; umbrechen darf er, die Knöpfe nicht. */
/* Der Schalter steht links, die Knöpfe rechts: dazwischen die
   Luft, in der bis 20.8.26 der Erklärsatz stand (jetzt als
   Sprechblase an „Übernehmen"). */
.quick .qest{margin-right:auto}
/* „Geschätzt" gehört zu den Beträgen und steht deshalb hier, in
   derselben Zeile wie die beiden Knöpfe der Schnelleingabe — als
   eigenes Feld darüber sah es aus wie eine weitere Angabe des
   Postens. */
.quick .qest{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);
  white-space:nowrap;cursor:pointer;margin-right:auto}
.quick .qest input{width:auto;margin:0}
/* Ein Quartal je Zeile: drei Kästchen nebeneinander, vier Zeilen.
   Zu sechst standen sie in zwei langen Reihen, und welcher Monat
   wo war, musste man abzählen — zu dritt ist jede Zeile ein
   Vierteljahr, und die Zeilen sind so kurz, dass man sie am Stück
   liest. Die Breite eines Kästchens bleibt dieselbe; das Fenster
   ist dafür schmal (siehe .box.form). */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Die Monatskachel nach 5a: offen auf Papier, geschlossen auf dem
   Grau der abgerechneten Zeilen (--settled), beide mit Radius 7.
   Das Betragsfeld eines geschlossenen Monats verliert seinen
   weißen Grund und behält den gestrichelten Rand (siehe
   input:disabled oben). */
.mgrid .cell{border:1px solid var(--rule);border-radius:7px;padding:6px 8px;background:var(--paper-2)}
.mgrid .cell.lockedcell{background:var(--settled)}
.mgrid .cell>label{font-family:var(--font-data);font-size:9px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mgrid input{width:100%;padding:3px 8px;font-size:11px;border-radius:5px}
.mgrid .cell .cellhead{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:4px}
.mgrid .cell .mlab{font-family:var(--font-data);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mgrid .cell .mlab.curm{color:var(--seal);font-weight:600}
.mgrid .cell .ctools{display:flex;align-items:center;gap:3px}
.mgrid .cell .cellnote{font-size:10.5px;line-height:1.35;color:var(--ink-2);margin-top:4px;white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* ── Erklärung unter einer Tabelle ────────────────────────────
   Kein Knopf, nur Text: was die gerechneten Spalten darüber sind
   und woher sie kommen. Abgesetzt durch eine Linie und den
   Papiergrund, damit er nicht wie eine weitere Zeile der Tabelle
   aussieht. */
.calchint{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule);
  font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.calchint p{margin:0 0 6px}
.calchint p:last-child{margin-bottom:0}
.calchint b{color:var(--ink)}

/* ── Sortierbare Listen (Banken, Zahlungsarten, Kategorien) ── */
.listrow{display:grid;grid-template-columns:16px 68px 1fr 22px;gap:6px;margin-bottom:6px;align-items:center;
  background:var(--paper-2);border:1px solid transparent;padding:1px 2px}
.listrow.onecol{grid-template-columns:16px 1fr 22px}
.listrow .grip{cursor:grab;color:var(--ink);font-size:14px;font-weight:700;line-height:1;letter-spacing:-2px;user-select:none}
.listrow .grip:hover{color:var(--seal)}
.listrow.dragging{opacity:.4}
.listrow.over{border-color:var(--seal);background:var(--bg-out)}
.listrow input{width:100%}
/* ── Einstellungen: Menü links, Bereich rechts ────────────────
   Alle Bereiche stehen im Fenster, sichtbar ist einer. Deshalb
   reicht [hidden] zum Umschalten. */
.setlayout{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start;margin-bottom:4px}
/* Das Menü nach 5b: Mono-Versalien 10px, der gewählte Eintrag auf
   --shade mit roter 3-px-Kante links und rechts gerundet; die
   inaktiven halten die Einrückung über einen durchsichtigen Rand. */
.setnav{display:flex;flex-direction:column;gap:1px;padding-right:0}
.setnav button{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;background:none;border:0;border-left:3px solid transparent;color:var(--ink-2);
  padding:8px 10px;cursor:pointer;line-height:1.4;border-radius:0 6px 6px 0}
.setnav button:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.setnav button[aria-pressed="true"]{color:var(--ink);border-left-color:var(--seal);
  background:var(--shade);font-weight:600}
.setnav button:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
/* Der gewählte Bereich steht als Gruppenbox (5b): --chrome-Grund,
   Radius 8 — dieselbe Bauform wie die Blöcke der
   Positionsfenster (.dgrp). */
.setpanes{min-width:0}
.setpane{background:var(--chrome);border:1px solid var(--shade);border-radius:8px;padding:12px 14px 4px}
.setpane>.note:first-of-type{margin-top:-2px}
.setpane[hidden]{display:none}
.setpane h4{font-family:var(--font-display);font-size:17px;margin:0 0 6px}
.setpane>.note{line-height:1.5}
/* Bereich „Import": je ein Knopf und darunter der Satz, der sagt,
   was er anrichtet. Der Abstand zwischen den beiden Wegen ist
   größer als der zum eigenen Satz — sonst läse sich der Satz wie
   die Erklärung des nächsten Knopfes. */
.impway{margin-bottom:24px}
.impway .note{margin:7px 0 0;max-width:64ch;line-height:1.5}
@media(max-width:760px){
  .setlayout{grid-template-columns:1fr;gap:14px}
  .setnav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule);padding:0 0 8px}
  .setnav button{border-left:0;border-bottom:2px solid transparent;padding:7px 8px}
  .setnav button[aria-pressed="true"]{border-left-color:transparent;border-bottom-color:var(--seal)}
}

/* Zwei Listen nebeneinander (Banken und Zahlungsarten). Beide
   fangen oben auf derselben Höhe an: der Abstand zwischen ihnen
   ist der Spalt des Rasters, kein Rand an der zweiten Liste —
   sonst hinge die rechte Liste um genau diesen Rand tiefer als
   die linke. Untereinander (schmaler Schirm) braucht es den Rand
   dagegen sehr wohl, deshalb steht er unten in der Abfrage. */
.liststack{column-gap:24px}
.liststack .field{margin-bottom:0}
/* Das Pluszeichen steht direkt hinter der Beschriftung der Liste
   und bleibt zurückhaltend — es soll die Überschrift nicht
   überstimmen, sondern nur bereitstehen.

   **Es ist so hoch wie die Versalien daneben und steht genau auf
   ihrer Mitte.** Beides ist gemessen, nicht geschätzt: die Tinte
   des + ist knapp die Hälfte seiner Schriftgröße, also 15.5px für
   die 7.4px hohen Großbuchstaben der Beschriftung; und weil ein +
   weder Ober- noch Unterlänge hat, wird es nicht auf der
   Grundlinie ausgerichtet, sondern auf der Mitte — dafür sitzt es
   mittig in einem Kasten, den `vertical-align` um 1.25px anhebt.
   Auf der Grundlinie ausgerichtet hing es sichtbar durch.

   Wer an der Schriftgröße der Beschriftung (`.field label`, 10px)
   oder an diesen Werten dreht, misst nach: Tintenmitte des + gegen
   Tintenmitte der Versalien, gleiche Höhe, kein Versatz. */
.plusmini{background:none;border:0;padding:0;margin-left:8px;width:16px;height:16px;
  color:var(--rule-strong);font-family:var(--font-data);font-size:15.5px;font-weight:600;line-height:1;
  display:inline-grid;place-items:center;vertical-align:-1.25px;cursor:pointer;border-radius:2px}
.plusmini:hover{color:var(--seal);background:rgba(0,0,0,.05)}
.plusmini:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
@media(max-width:760px){
  .liststack{grid-template-columns:1fr!important}
  .liststack .field+.field{margin-top:20px}
}

/* ── Kurzmeldung ──────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:var(--paper-2);
  padding:11px 18px;font-size:13px;border-radius:2px;z-index:60;max-width:90vw}

/* ── Sofort-Tooltip (data-tip) ────────────────────────────────
   Ersetzt title= dort, wo der Text ohne Verzögerung lesbar sein
   soll — vor allem an der Notizlampe. Wird von js/ui.js
   positioniert, deshalb hier nur das Aussehen. */
.tip{position:fixed;z-index:80;max-width:300px;pointer-events:none;
  background:var(--ink);color:#fff;padding:4px 9px;border-radius:5px;
  font-size:10.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 3px 8px rgba(0,0,0,.25)}
.tip[hidden]{display:none}

@media(prefers-reduced-motion:reduce){.seal,.seal svg{transition:none}}