/* famquota — mobile-first, ohne externe Abhängigkeiten
 *
 * Gestaltung nach dem Neumorphismus-Prinzip: Flaeche und Hintergrund haben
 * DIESELBE Farbe. Tiefe entsteht nicht durch Kontrast, sondern durch zwei
 * Schatten - einen hellen oben links und einen dunklen unten rechts, so als
 * fiele Licht schraeg von vorn. Was man druecken kann, steht heraus
 * (--nm-out); was etwas aufnimmt, liegt vertieft (--nm-in).
 *
 * Der Preis dieses Stils ist Kontrastarmut, und daran scheitern die meisten
 * Umsetzungen. Deshalb hier: Schrift und Akzent behalten vollen Kontrast,
 * nur die Flaechen sind weich. Der Fokusrahmen bleibt hart sichtbar.
 *
 * ZWEI FORMENSPRACHEN. Reiner Neumorphismus hat einen Haken: Seite, Karte,
 * Eingabefeld und Knopf haben dieselbe Farbe und keinen Rand - was man
 * anfassen kann, unterscheidet sich nur durch die RICHTUNG eines weichen
 * Schattens. Das ist zu wenig. Deshalb gilt hier:
 *
 *   Moebel (Karten, Listen, Abschnitte)  nur Schatten, keine Kante
 *   Bedienelemente (Felder, Knoepfe)     Schatten UND eine Haarkante
 *
 * Und Vertiefungen sind zusaetzlich dunkler als ihre Umgebung (--field) -
 * so wie eine echte Mulde weniger Licht abbekommt. Das erkennt das Auge
 * sofort, ohne den Schatten lesen zu muessen.
 */

:root {
    /* Sagt dem Browser, in welchem Licht er seine eigenen Bedienteile
       zeichnen soll - Datumswaehler, Auswahlmenues, Bildlaufleisten.
       Ohne das richten sie sich nach dem GERAET und stehen dunkel in
       einer hellen App, sobald jemand das Handy nachts dunkel stellt. */
    color-scheme: light;

    --bg:        #e7ecf3;
    --surface:   #e7ecf3;   /* bewusst identisch mit --bg */
    /* Was etwas aufnimmt, liegt tiefer und ist darum dunkler. */
    --field:     #d9e1ec;
    /* Die Kante der Bedienelemente. Auf 3:1 gegen die Flaeche gelegt -
       das ist der Wert, den die Zugaenglichkeitsrichtlinie fuer die
       Umrisse von Bedienelementen verlangt (WCAG 1.4.11). Eine leisere
       Kante sieht huebscher aus und tut nichts. */
    --edge:      #78859a;
    --border:    #d2dae5;   /* nur noch fuer Trennlinien, nicht fuer Raender */
    /* Die zwei Toene des Schriftzugs, im Hellen genau wie im Original. */
    --logo-ink:  #0e6f6b;
    --logo-mint: #61c7bc;
    --text:      #2b3542;
    --muted:     #5a6979;   /* dunkel genug fuer 4,5:1 - Hinweise sind Text */
    /* Etwas dunkler als das Mint der dunklen Fassung: Auf hellem Grund
       traegt der Knopf weisse Schrift, und die braucht 4,5:1. */
    --accent:    #0a7369;
    --accent-ink:#ffffff;
    --plus:      #0f7a3d;
    --plus-bg:   #dfeee5;
    --minus:     #b4302b;
    --minus-bg:  #f2e0df;
    --warn-bg:   #efe8d8;
    --warn-ink:  #85601a;

    /* Die beiden Lichtfarben - aus ihnen bauen sich alle Schatten. */
    --nm-light:  #ffffff;
    --nm-dark:   #c3ccda;

    --radius:    18px;
    --nav-h:     4.4rem;
}

/* Erhaben, vertieft - je einmal gross und klein. Sie greifen auf
   --nm-light/--nm-dark zu und gelten damit in beiden Designs. */
:root {
    --nm-out:    6px 6px 13px var(--nm-dark), -6px -6px 13px var(--nm-light);
    --nm-out-sm: 3px 3px 7px var(--nm-dark), -3px -3px 7px var(--nm-light);
    --nm-in:     inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
    --nm-in-sm:  inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light);
    --shadow:    var(--nm-out);
}

/* Dunkles Design.
 *
 * Die Farben stehen genau einmal (als --d-*), die Zuordnung zweimal: einmal
 * fuer "richtet sich nach dem Geraet" und einmal fuer die feste Wahl unter
 * Mehr -> Anzeige. Wer Hell erzwingt, behaelt Hell auch auf einem dunkel
 * gestellten Geraet - deshalb das :not([data-theme="hell"]).
 */
:root {
    --d-bg:        #2b3037;
    --d-surface:   #2b3037;   /* wieder identisch mit --d-bg */
    /* Auch im Dunkeln ist die Mulde die dunklere Stelle - nicht die hellere.
       Die Kante geht hier nach oben statt nach unten, wieder auf 3:1. */
    --d-field:     #22262b;
    --d-edge:      #6f7a88;
    --d-border:    #3a4149;
    /* Das dunkle Tuerkis des Originals kaeme auf diesem Grund nur auf
       2,2:1 - die Haelfte "fam" waere fast weg. Deshalb aufgehellt;
       das Minz bleibt, damit der Zweiklang erhalten bleibt. */
    --d-logo-ink:  #3fa39b;
    --d-logo-mint: #61c7bc;
    --d-text:      #e9eef4;
    --d-muted:     #a0adbb;
    --d-accent:    #52dcc8;
    --d-accent-ink:#0e2e2a;   /* dunkle Schrift auf hellem Mint, wie in der Vorlage */
    --d-plus:      #5fe08c;
    --d-plus-bg:   #26332b;
    --d-minus:     #ff8a84;
    --d-minus-bg:  #3a2b2b;
    --d-warn-bg:   #373126;
    --d-warn-ink:  #ffd479;
    --d-nm-light:  #363d46;
    --d-nm-dark:   #1c2026;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        color-scheme: dark;
        --bg:        var(--d-bg);
        --surface:   var(--d-surface);
        --field:     var(--d-field);
        --edge:      var(--d-edge);
        --border:    var(--d-border);
        --logo-ink:  var(--d-logo-ink);
        --logo-mint: var(--d-logo-mint);
        --text:      var(--d-text);
        --muted:     var(--d-muted);
        --accent:    var(--d-accent);
        --accent-ink:var(--d-accent-ink);
        --plus:      var(--d-plus);
        --plus-bg:   var(--d-plus-bg);
        --minus:     var(--d-minus);
        --minus-bg:  var(--d-minus-bg);
        --warn-bg:   var(--d-warn-bg);
        --warn-ink:  var(--d-warn-ink);
        --nm-light:  var(--d-nm-light);
        --nm-dark:   var(--d-nm-dark);
    }
}

:root[data-theme="dunkel"] {
    color-scheme: dark;
    --bg:        var(--d-bg);
    --surface:   var(--d-surface);
    --field:     var(--d-field);
    --edge:      var(--d-edge);
    --border:    var(--d-border);
    --logo-ink:  var(--d-logo-ink);
    --logo-mint: var(--d-logo-mint);
    --text:      var(--d-text);
    --muted:     var(--d-muted);
    --accent:    var(--d-accent);
    --accent-ink:var(--d-accent-ink);
    --plus:      var(--d-plus);
    --plus-bg:   var(--d-plus-bg);
    --minus:     var(--d-minus);
    --minus-bg:  var(--d-minus-bg);
    --warn-bg:   var(--d-warn-bg);
    --warn-ink:  var(--d-warn-ink);
    --nm-light:  var(--d-nm-light);
    --nm-dark:   var(--d-nm-dark);
}

* { box-sizing: border-box; }

/* Das hidden-Attribut gewinnt immer - auch gegen display-Regeln von
   Klassen (sonst blitzen ausgeblendete Felder trotzdem auf). */
[hidden] { display: none !important; }

/* Alle Groessen haengen in rem an der Wurzel. --font-scale ist die vom
   Nutzer unter "Mehr -> Anzeige" gewaehlte Stufe (je Geraet, aus dem
   localStorage) - ein kleines Skript im Seitenkopf setzt sie vor dem
   ersten Zeichnen. */
html {
    -webkit-text-size-adjust: 100%;
    font-size: calc(100% * var(--font-scale, 1));
    /* Sprungmarken wie "#datenschutz" landen sonst unter der stehen
       gebliebenen Kopfzeile. */
    scroll-padding-top: 4.5rem;
}

/* Auf Handys ist die Flaeche klein und die Aufloesung hoch - eine
   groessere Wurzel macht alles lesbar. */
@media (max-width: 46rem) {
    html { font-size: calc(118.75% * var(--font-scale, 1)); } /* 19px Basis */
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

body.plain { padding-bottom: 2rem; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }

p { margin: 0 0 .75rem; }
a { color: var(--accent); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--bg);
    padding: .1em .35em;
    border-radius: 5px;
}

.muted { color: var(--muted); }
.hint  { color: var(--muted); font-size: .9rem; margin: .4rem 0 .9rem; }

/* ---------------------------------------------------------- Schriftzug */

/* Der Schriftzug setzt sich wie ein Wort in die Zeile: Hoehe in em,
   damit er mit der Schriftgroesse mitwaechst, Breite von selbst.
   Der Rahmen der Zeichnung schliesst die Unterlaenge des "q" ein -
   deshalb etwas mehr als 1em, sonst wirkten die Buchstaben kleiner
   als der Text daneben. */
.wordmark {
    display: inline-block;
    height: 1.25em;
    width: auto;
    vertical-align: -.34em;
}

.wordmark .wm-fam   { fill: var(--logo-ink); }
.wordmark .wm-quota { fill: var(--logo-mint); }

/* Das ganze Logo und das Zeichen ohne Schrift teilen sich die Farben
   des Schriftzugs - eine Regel genuegt fuer alle drei. */
.logo { display: block; width: auto; }
.logo .wm-fam   { fill: var(--logo-ink); }
.logo .wm-quota { fill: var(--logo-mint); }

/* Auf der Anmeldeseite traegt das Logo die Seite. */
.logo--gross { height: 8.5rem; margin: .2rem auto .4rem; }

/* Auf Papier gibt es kein dunkles Design - dort die Originalfarben. */
@media print {
    .wordmark .wm-fam   { fill: #0e6f6b; }
    .wordmark .wm-quota { fill: #61c7bc; }
}

/* ------------------------------------------------------------- Symbole */

/* Die Zeichen aus dem Material-Symbols-Satz stehen inline im Text.
   Masse in em statt rem: So wachsen sie mit der eingestellten
   Schriftgroesse mit. "fill: currentColor" laesst sie die Farbe der
   Umgebung erben - deshalb braucht das dunkle Design keine zweite
   Fassung, und ein Zeichen im Knopf wird von selbst hell. */
.ic {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -.3em;
    fill: currentColor;
}

/* Die Zeichnungen sitzen auf der Grundlinie (viewBox "0 -960 960 960").
   Steht ein Zeichen allein in einem Flex-Kasten, richtet der Kasten aus
   und die Grundlinienverschiebung wuerde es nach unten druecken. */
.btn .ic, .mainnav .ic, .topbar .ic, .info__mark .ic { vertical-align: 0; }

/* ------------------------------------------------------------ Struktur */

/* Die Kopfzeile trug bisher die Akzentfarbe. Im Neumorphismus gibt es
   keine farbigen Flaechen - alles ist dieselbe Flaeche, nur unterschiedlich
   beleuchtet. Der Kassenname traegt die Farbe jetzt allein. */
/* Die Kopfzeile bleibt beim Blaettern stehen - wie die Leiste unten.
   Name der Kasse und der Weg zur Liste sind damit von jeder Stelle der
   Seite aus da, ohne erst nach oben zu scrollen. Der Schatten nach
   unten spiegelt den der Navigationsleiste. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
    color: var(--text);
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 6px 16px var(--nm-dark), 0 1px 0 var(--nm-light);
}

.topbar__inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}

/* Der Schriftzug steht vor dem Kassennamen: erst die App, dann die
   Kasse. Er ist kein Knopf - der Weg zur Uebersicht steht unten in
   der Leiste, ein zweiter waere nur eine Verdopplung. */
.topbar__marke {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.topbar__marke .wordmark { height: 1.15rem; vertical-align: 0; }

/* Die Farbe traegt jetzt der Schriftzug daneben. Stuende der Name der
   Kasse ebenfalls in Tuerkis, verschwaemmen beide zu einer Zeile -
   dunkel gesetzt liest er sich als das, was er ist: der Ort, an dem
   man gerade steht. */
.topbar__trip {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Schrumpft als Einziges, wenn der Platz knapp wird - Schriftzug
       und Knoepfe bleiben dadurch ganz. */
    min-width: 0;
    flex: 0 1 auto;
}

/* Trennt Marke und Kassenname, ohne eine Linie zu ziehen. */
.topbar__trip::before {
    content: "·";
    margin-right: .45rem;
    color: var(--muted);
    font-weight: 400;
}

.topbar__logout,
.topbar__link {
    color: var(--text);
    font-size: .875rem;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--nm-out-sm);
    padding: .4rem .85rem;
    white-space: nowrap;
    transition: box-shadow .15s, color .15s;
}
.topbar__logout:hover,
.topbar__link:hover { color: var(--accent); }
.topbar__logout:active,
.topbar__link:active { box-shadow: var(--nm-in-sm); }

.topbar__link,
.topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.topbar__link { margin-left: auto; font-weight: 600; }
.topbar__link.is-active { color: var(--accent); box-shadow: var(--nm-in-sm); }

/* Zahl der offenen Einkaeufe */
.topbar__badge {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    min-width: 1.3em;
    padding: 0 .35em;
    font-size: .8em;
    font-weight: 700;
    text-align: center;
}

/* Auf schmalen Handys tragen die beiden Knoepfe nur ihr Zeichen und
   der Schriftzug wird etwas kleiner - sonst bliebe fuer den Namen der
   Kasse nur noch ein abgeschnittener Rest. Die Beschriftung steckt bei
   "Abmelden" zusaetzlich im aria-label, sie geht also nur dem Auge
   verloren, nicht der Vorlesefunktion. */
@media (max-width: 30rem) {
    .topbar__link-text,
    .topbar__logout-text { display: none; }
    .topbar__inner { gap: .45rem; }
    .topbar__marke .wordmark { height: 1rem; }
    .topbar__link, .topbar__logout { padding: .4rem .7rem; }
    /* Jedes Zeichen zaehlt hier - Tuerkis gegen Dunkel trennt die
       beiden Woerter auch ohne Punkt. */
    .topbar__trip::before { content: none; }
}

.page {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.page__title { margin-bottom: .75rem; }

.section {
    margin: 1.75rem 0 .75rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 700;
}

/* --------------------------------------------------------- Navigation */

.mainnav {
    position: fixed;
    inset: auto 0 0 0;
    background: var(--bg);
    border-top: 0;
    box-shadow: 0 -6px 16px var(--nm-dark), 0 -1px 0 var(--nm-light);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 20;
}

.mainnav ul {
    display: flex;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.mainnav li { flex: 1; }

.mainnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: var(--nav-h);
    padding: .4rem .2rem;
    text-decoration: none;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
}

.mainnav a.is-active { color: var(--accent); }
.mainnav__icon { width: 1.5rem; height: 1.5rem; }

/* Am grossen Bildschirm bleibt die Leiste, wo sie auf dem Handy ist:
   unten und immer sichtbar. Nur flacher, und die vier Punkte stehen
   mittig beieinander statt ueber die ganze Breite gezogen - sonst
   liegen sie auf einem breiten Monitor weit auseinander. Die kleinere
   --nav-h zieht Seitenrand, Fusszeile und den schwebenden Knopf
   automatisch mit. */
@media (min-width: 46rem) {
    :root { --nav-h: 3.5rem; }
    .mainnav ul { justify-content: center; padding: 0 1rem; }
    .mainnav li { flex: 0 0 auto; }
    .mainnav a {
        flex-direction: row;
        gap: .45rem;
        padding: 0 1.4rem;
        font-size: .9rem;
        border-top: 2px solid transparent;
    }
    /* Die Linie liegt oben an der Leiste - sie zeigt zur Seite, die
       gerade offen ist. */
    .mainnav a.is-active { border-top-color: var(--accent); }
    .mainnav__icon { width: 1.2rem; height: 1.2rem; }
}

/* Die Karten der Listen: erhaben wie eine echte Karte auf dem Tisch. */
.list__item, .transfer, .payment {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-out-sm);
}

/* ------------------------------------------------------------- Karten */

.card {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-out);
    padding: 1.25rem;
    margin: 0 0 1.4rem;
}

.card--narrow { max-width: 26rem; margin: 2.5rem auto; }
.card--login  { text-align: center; }
.card--login form { text-align: left; }
.login__mark  { width: 3rem; height: 3rem; color: var(--accent); }

/* Der Weg zurueck steht unter dem Formular und traegt bewusst kein
   Gewicht - er soll da sein, aber nicht mit dem Anmelden konkurrieren. */
.login__back { margin: 1rem 0 0; text-align: center; }

/* Leere Zustaende liegen vertieft - da ist noch nichts, was herausragt. */
.empty {
    background: var(--field);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-in);
    padding: 1.8rem 1.2rem;
    text-align: center;
    margin-bottom: 1.4rem;
}
.empty p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Formulare */

label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin: .9rem 0 .3rem;
}

/* Eingabefelder nehmen etwas auf - sie liegen vertieft in der Flaeche,
   sind darum dunkler als die Karte und tragen eine Kante. Drei Merkmale
   statt einem: Wer nur eines davon uebersieht, erkennt es trotzdem. */
/* Nicht nach Typen aufzaehlen, sondern die wenigen ausnehmen, die
   eigene Gestalt haben. Die alte Liste kannte "tel" und "search" nicht -
   die Felder blieben roh und richteten sich nach dem Dunkelmodus des
   Geraets statt nach dem Design der App. Jeder neue Typ ist jetzt von
   selbst dabei. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select, textarea {
    width: 100%;
    padding: .75rem .9rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--edge);
    border-radius: 14px;
    box-shadow: var(--nm-in);
    min-height: 2.9rem;
    transition: box-shadow .15s, border-color .15s;
}

input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }

/* Der Fokusrahmen bleibt hart. Ein weicher Schatten allein zeigt nicht
   zuverlaessig genug, wo die Tastatur gerade steht. */
input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

input[type="file"] { padding: .6rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.grid-2 label { margin-top: 0; }

/* Betrag mit Waehrungswahl daneben */
.money-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    align-items: stretch;
}
.money-row select {
    width: auto;
    min-width: 6rem;
    font-weight: 600;
}

.input-money { position: relative; }
.input-money input { padding-right: 2.4rem; font-size: 1.35rem; font-weight: 650; }
.input-money__unit {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    margin-top: .6rem;
}
.checkbox input { width: auto; min-height: 0; }

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.2rem;
}

.receipt-preview img, .receipt-current img {
    max-width: 100%;
    max-height: 13rem;
    border-radius: 14px;
    border: 0;
    box-shadow: var(--nm-out-sm);
    margin-top: .7rem;
    display: block;
}

/* ------------------------------------------------------------ Buttons */

/* Knoepfe stehen heraus und sinken beim Druecken ein - genau die Geste,
   die man von einer echten Taste erwartet. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.9rem;
    padding: .65rem 1.2rem;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 999px;
    box-shadow: var(--nm-out-sm);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow .15s, color .15s, border-color .15s;
}

.btn:hover  { color: var(--accent); border-color: var(--accent); }
.btn:active { box-shadow: var(--nm-in-sm); }

/* Der gefuellte Knopf braucht keine Kante - die Farbe traegt ihn schon.
   Der Rand bleibt trotzdem stehen, damit er nicht einen Hauch kleiner
   ist als die Knoepfe daneben. */
.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
    box-shadow: var(--nm-out-sm);
}
.btn--primary:hover { border-color: transparent; }
.btn--primary:hover  { color: var(--accent-ink); filter: brightness(1.06); }
.btn--primary:active { box-shadow: var(--nm-in-sm); filter: none; }

.btn--danger { color: var(--minus); }
.btn--danger:hover { color: var(--minus); border-color: var(--minus); filter: brightness(1.1); }

.btn--small { min-height: 2.25rem; padding: .35rem .85rem; font-size: .85rem; }
.btn--block { width: 100%; margin-top: 1.25rem; }

/* Nicht anklickbar heisst: liegt flach in der Flaeche, ohne Schatten. */
.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: var(--nm-in-sm);
}

/* Gewaehlte Schriftgroesse und gewaehltes Design unter "Mehr -> Anzeige":
   die aktive Stufe ist eingedrueckt, nicht umrandet. */
[data-font-scale].is-active,
[data-theme-choice].is-active {
    color: var(--accent);
    box-shadow: var(--nm-in-sm);
    font-weight: 700;
}

.actions-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.inline { display: inline; margin: 0; }

/* Schwebender Knopf: im Urlaub der meistgenutzte Weg zur neuen Ausgabe */
.fab {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .85rem 1.2rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--nm-out);
    z-index: 15;
}
.fab:active { box-shadow: var(--nm-in-sm); }
.fab span[aria-hidden] { font-size: 1.3rem; line-height: 1; }

/* -------------------------------------------------------------- Listen */

.list { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.list__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .8rem .9rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}

.list__main { flex: 1 1 10rem; min-width: 0; }

.list__title {
    display: block;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list__sub { display: block; color: var(--muted); font-size: .9rem; }

.list__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

/* Beschriftung ueber einer Knopfreihe (Schriftgroesse, Design). */
.display-label {
    display: block;
    margin: 1rem 0 .35rem;
    font-weight: 600;
    font-size: .9rem;
}
.display-label:first-of-type { margin-top: .3rem; }

/* Vier Knoepfe passen auf einem Handy nicht nebeneinander - ohne Umbruch
   liefen sie bisher rechts aus der Karte hinaus. */
.list__actions { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }

.amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount--credit { color: var(--plus); }

.radio-row { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.radio-row .checkbox { margin-top: .2rem; }

/* Marken liegen vertieft - sie sind Beschriftung, nicht Bedienelement. */
.badge {
    display: inline-block;
    background: var(--bg);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--nm-in-sm);
    padding: .2rem .7rem;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 600;
}

.badge--admin {
    color: var(--accent);
    vertical-align: middle;
}

/* Modus-Wahl beim Anlegen: zwei erklaerende Radio-Karten. */
.choice-group { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.choice-group legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.choice {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nm-out-sm);
    padding: .75rem .85rem;
    margin-bottom: .6rem;
    cursor: pointer;
    transition: box-shadow .15s;
}
.choice input { margin-top: .25rem; flex: 0 0 auto; }
.choice span { font-weight: 400; }
/* Die gewaehlte Karte ist eingedrueckt - so sieht man sie ohne Farbe. */
.choice:has(input:checked) { box-shadow: var(--nm-in-sm); }
.choice:has(input:checked) strong { color: var(--accent); }

/* Einstellungen im geschlossenen Modus: fuer alle lesbar, fuer
   Nicht-Admins gesperrt - fieldset[disabled] legt alles darin still. */
fieldset.lock { border: 0; padding: 0; margin: 0; min-width: 0; display: block; }
fieldset.lock[disabled] .btn,
fieldset.lock[disabled] button { opacity: .5; cursor: not-allowed; }

.thumb {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 9px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--bg);
    border: 0;
    box-shadow: var(--nm-in-sm);
    font-size: 1.3rem;
    text-decoration: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--empty { opacity: .45; }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.25rem 0 .75rem;
}
.toolbar__filter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.toolbar__label { margin: 0; }
.toolbar__filter select { width: auto; min-width: 9rem; }
.toolbar__filter input[type="search"] { width: auto; min-width: 8.5rem; flex: 1 1 8.5rem; }
.toolbar__sum { color: var(--muted); font-size: .9rem; }

/* -------------------------------------------------------- Übersicht */

.total {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-out);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.total__label {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 700;
}

.total__value {
    display: block;
    font-size: 2.3rem;
    font-weight: 750;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin: .2rem 0;
}

.total__meta { display: block; color: var(--muted); font-size: .9rem; }

.balances {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

@media (min-width: 46rem) {
    .balances { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

.balance {
    background: var(--surface);
    border: 0;
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--nm-out-sm);
    padding: .95rem 1.05rem;
}

.balance--plus  { border-left-color: var(--plus); }
.balance--minus { border-left-color: var(--minus); }

.balance__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.balance__name { font-weight: 700; }

.balance__value {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.balance--plus  .balance__value { color: var(--plus); }
.balance--minus .balance__value { color: var(--minus); }

.balance__detail { color: var(--muted); font-size: .875rem; margin-top: .1rem; }

.balance__figures {
    display: flex;
    gap: 1.5rem;
    margin: .7rem 0 .5rem;
}
.balance__figures div { margin: 0; }
.balance__figures dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}
.balance__figures dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.balance__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.balance__note {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .6rem;
    border-radius: 8px;
    display: inline-block;
}
.balance--plus  .balance__note { background: var(--plus-bg);  color: var(--plus); }
.balance--minus .balance__note { background: var(--minus-bg); color: var(--minus); }
.balance--even  .balance__note { background: var(--bg); color: var(--muted); }

.transfers { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* Die Zeile zeigt nur wer, wem, wie viel. Zahlungswege und das Abhaken
   liegen darunter im aufklappbaren Teil - sonst waere die Uebersicht keine. */
.transfer {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-out-sm);
    padding: .9rem 1rem;
}

.transfer__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    grid-template-areas:
        "from   arrow to     chev"
        "amount amount amount chev";
    align-items: center;
    gap: .3rem .6rem;
    list-style: none;
    cursor: pointer;
}

.transfer__row::-webkit-details-marker { display: none; }
.transfer__row::marker { content: ''; }

/* Der Pfeil rechts zeigt, dass sich hier etwas oeffnen laesst. */
.transfer__row::after {
    grid-area: chev;
    content: '⌄';
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .1rem;
    transform: translateY(-.15em);
    transition: transform .15s;
}
.transfer__box[open] > .transfer__row::after { transform: translateY(.1em) rotate(180deg); }

.transfer__from   { grid-area: from; font-weight: 600; }
.transfer__arrow  { grid-area: arrow; color: var(--muted); font-size: 1.2rem; }
.transfer__to     { grid-area: to; font-weight: 600; }
.transfer__amount {
    grid-area: amount;
    font-weight: 750;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    margin-top: .2rem;
}

@media (min-width: 34rem) {
    .transfer__row {
        grid-template-columns: 1fr auto 1fr auto auto;
        grid-template-areas: "from arrow to amount chev";
    }
    .transfer__amount { margin-top: 0; text-align: right; }
}

/* "Als ueberwiesen verbuchen" unter jeder offenen Zahlung */
.transfer__done {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    margin: .55rem 0 0;
    padding-top: .55rem;
    border-top: 1px dashed var(--border);
}
.transfer__done-hint { font-size: .85rem; }

/* Verbuchte Zahlungen */
.payments {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .45rem;
}

.payment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .8rem;
    background: var(--surface);
    border: 0;
    border-left: 4px solid var(--plus);
    border-radius: 14px;
    box-shadow: var(--nm-out-sm);
    padding: .6rem .85rem;
    font-size: .95rem;
}
.payment .amount { margin-left: auto; }
.payment .inline { margin-left: .2rem; }

/* Aufklappbare Zusatzbloecke (Fremdwaehrung, Zahlung nachtragen) */
.details {
    border: 1px solid var(--edge);
    border-radius: 14px;
    box-shadow: var(--nm-out-sm);
    padding: .7rem 1rem;
    margin: 1rem 0;
    background: var(--surface);
}
/* Derselbe Winkel wie ueberall sonst, statt des Dreiecks, das der
   Browser von sich aus setzt - aufklappbar sieht in der ganzen App
   gleich aus, sonst muss man es an jeder Stelle neu lernen. */
.details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    list-style: none;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
}
.details summary::-webkit-details-marker { display: none; }
.details summary::marker { content: ''; }
.details summary::after {
    content: '⌄';
    margin-left: auto;
    color: var(--muted);
    font-weight: 400;
    transition: transform .15s;
}
.details[open] > summary::after { transform: rotate(180deg); }
.details[open] summary { margin-bottom: .4rem; }
.details label { margin-top: .6rem; }

/* Reiter der To-Do-Liste */
.tabs {
    display: flex;
    gap: .35rem;
    background: var(--field);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--nm-in-sm);
    padding: .3rem;
    margin: 0 0 1.1rem;
    /* Reicht der Platz trotz allem nicht (sehr grosse Schrift auf sehr
       schmalem Geraet), scrollt die Leiste selbst - nie die ganze Seite. */
    overflow-x: auto;
}
.tabs__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .55rem .4rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .95rem;
    text-decoration: none;
    color: var(--muted);
    font-weight: 650;
}
/* Der offene Reiter ragt aus der vertieften Leiste heraus. */
.tabs__tab.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--nm-out-sm);
}
/* "Auf diesem Gerät angemeldet bleiben" - direkt ueber dem Anmeldeknopf. */
.login__remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .9rem 0 .2rem;
    font-size: .95rem;
    cursor: pointer;
}
.login__remember input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

/* Eine Karte, die sich erst auf Klick oeffnet (z. B. "Familie anlegen").
   Die Zusammenfassung sieht aus wie ein Knopf, ist aber nativ - das
   Aufklappen braucht deshalb kein JavaScript. */
.card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: -.2rem 0;
    padding: .7rem 1.1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    box-shadow: var(--nm-out-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.card__toggle::-webkit-details-marker { display: none; }
.card__toggle::after {
    content: "+";
    font-size: 1.2em;
    line-height: 1;
}
details[open] > .card__toggle {
    margin-bottom: 1rem;
}
details[open] > .card__toggle::after { content: "−"; }
.card__toggle:hover { filter: brightness(1.08); }

/* Beleg-Editor: Zuschneiden und Drehen vor dem Hochladen. */
.beleg-editor { margin-top: .6rem; }
.beleg-editor__canvas {
    display: block;
    max-width: 100%;
    border: 0;
    box-shadow: var(--nm-in-sm);
    border-radius: 14px;
    background: var(--bg);
    cursor: crosshair;
    /* Ohne das scrollt der Finger beim Aufziehen des Rahmens die Seite. */
    touch-action: none;
}

.tabs__icon { flex: 0 0 auto; }
/* Drei Reiter nebeneinander: auf schmalen Bildschirmen tragen die Icons
   nicht genug, um die Ueberbreite zu rechtfertigen - weg damit. */
@media (max-width: 480px) {
    .tabs__icon { display: none; }
    .tabs__tab { font-size: .9rem; }
}
.tabs__count {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    min-width: 1.4em;
    padding: 0 .4em;
    font-size: .78em;
    font-weight: 700;
    text-align: center;
}

/* Einkaufsliste - bewusst schlank: eine Zeile je Eintrag. */
.shopping {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-out-sm);
    overflow: hidden;
}

.shopping__item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--border);
}
.shopping__item:last-child { border-bottom: 0; }

/* Erledigtes rutscht ans Ende und tritt zurueck. */
.shopping__item--done { opacity: .55; }
.shopping__item--done .shopping__text { text-decoration: line-through; }

.shopping__check { display: flex; align-items: center; margin: 0; }
.shopping__check input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin: .25rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.shopping__detail { flex: 1 1 auto; min-width: 0; }
.shopping__text {
    display: block;
    padding: .15rem 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    /* Lange Adressen in Vorschlaegen sollen umbrechen statt ueberlaufen. */
    overflow-wrap: anywhere;
}
.shopping__text a,
.shopping__comments a {
    color: var(--accent);
    overflow-wrap: anywhere;
}

/* "Nur meine anzeigen" - schmale Filterzeile direkt ueber der Liste. */
.filter-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin: 0 .1rem .45rem;
    font-size: .92rem;
    color: var(--muted);
}
.filter-row .checkbox {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}
.filter-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
}
/* Die Ueberschrift wird im offenen Eintrag zum Schreibfeld. Damit man
   das sieht, bevor man tippt: gestrichelte Linie und Schreibzeiger -
   dieselbe Andeutung, die Papierformulare seit je benutzen. */
.js .shopping__detail[open] .shopping__title {
    cursor: text;
    border-bottom: 1px dashed var(--edge);
}
.shopping__title[contenteditable] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
    border-bottom-color: transparent;
}

/* Wo das geht, braucht es das Formular darunter nicht mehr. */
.js .shopping__rename { display: none; }

.shopping__text::-webkit-details-marker { display: none; }
.shopping__text::after {
    content: " ›";
    color: var(--muted);
    font-weight: 400;
}
.shopping__detail[open] .shopping__text::after { content: " ⌄"; }

.shopping__info {
    font-size: .88rem;
    line-height: 1.5;
    padding: .2rem 0 .45rem;
}
.shopping__actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

.shopping__buy { margin: 0; }
.shopping__buy .btn { min-height: 1.9rem; padding: .1rem .6rem; }

/* Kommentare in den Details */
.shopping__count {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

.shopping__comments {
    list-style: none;
    margin: .2rem 0 .5rem;
    padding: 0;
}
.shopping__comments li {
    padding: .2rem 0;
    border-top: 1px dashed var(--border);
}
.shopping__comments li:first-child { border-top: 0; }

.shopping__comment-x {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}
.shopping__comment-x:hover { color: var(--minus); }

.shopping__comment-form {
    display: flex;
    gap: .4rem;
    margin: .2rem 0 .1rem;
}
.shopping__comment-form input[type="text"] {
    flex: 1 1 auto;
    min-height: 2.25rem;
    padding: .35rem .6rem;
    font-size: .9rem;
}

.me-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.me-row select { width: auto; min-width: 11rem; }

/* Änderungsprotokoll */
.changelog__list {
    margin: .5rem 0 .7rem;
    padding-left: 1.1rem;
    font-weight: 400;
    font-size: .92rem;
    line-height: 1.5;
}
.changelog__list li { margin-bottom: .25rem; }

/* Aufteilungszeilen: Familie links, fester Betrag rechts */
.split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .35rem;
}
.split-row .checkbox { margin-top: 0; }
.split-amount {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.split-amount input {
    width: 7rem;
    min-height: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Balken der Kategorien-Auswertung */
.catbar {
    background: var(--field);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--nm-in-sm);
    height: 1rem;
    min-width: 6rem;
    overflow: hidden;
}
.catbar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    opacity: .75;
}

/* Hinweisband ohne Netz */
.netbanner {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-bottom: 1px solid currentColor;
    padding: .45rem .9rem calc(.45rem + env(safe-area-inset-top));
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
}

/* ------------------------------------------------------------- Flash */

/* Meldungen behalten ihre Farbe - hier geht Erkennbarkeit vor Weichheit.
   Der farbige Streifen links traegt die Bedeutung, die Flaeche bleibt
   ruhig. */
.flash {
    background: var(--plus-bg);
    color: var(--plus);
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: 14px;
    box-shadow: var(--nm-out-sm);
    padding: .8rem 1rem;
    margin-bottom: 1.1rem;
    font-weight: 600;
    font-size: .95rem;
}

.flash--error { background: var(--minus-bg); color: var(--minus); }
.flash--warn  { background: var(--warn-bg);  color: var(--warn-ink); }

/* ------------------------------------------------------ Druckansicht */

.print { max-width: 52rem; margin: 0 auto; }
.print__toolbar { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.print h2 { margin-top: 1.75rem; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    margin-bottom: 1rem;
}

.table th, .table td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border);
}

.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.table tfoot th { border-top: 2px solid var(--text); border-bottom: 0; font-weight: 700; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .pos { color: var(--plus); }
.table .neg { color: var(--minus); }

/* ------------------------------------------------- Einzelabrechnung */

.statement { margin-bottom: 3rem; }

.statement__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--text);
}

.statement__head h1 { margin-bottom: .15rem; }
.statement__head p  { margin: 0; font-size: .9rem; }

.statement__sum {
    text-align: right;
    padding: .5rem .9rem;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    min-width: 9rem;
}

.statement__sum--plus  { background: var(--plus-bg);  border-color: var(--plus); }
.statement__sum--minus { background: var(--minus-bg); border-color: var(--minus); }

.statement__sum-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--muted);
}

.statement__sum-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.statement__sum--plus  .statement__sum-value { color: var(--plus); }
.statement__sum--minus .statement__sum-value { color: var(--minus); }

.statement h2 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 1.6rem 0 .5rem;
}

.todo { list-style: none; margin: 0 0 1rem; padding: 0; }

.todo li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin-bottom: .5rem;
    font-size: 1.02rem;
}

.todo__line { margin-bottom: .2rem; }

.todo__pay {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .9rem;
    margin: .5rem 0 0;
    font-size: .9rem;
}
.todo__pay > div { display: contents; }
.todo__pay dt { color: var(--muted); font-weight: 600; }
.todo__pay dd { margin: 0; }
.todo__iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.todo__hint { font-size: .85rem; margin: .4rem 0 0; }

.girocode {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: .8rem 0 0;
    padding-top: .7rem;
    border-top: 1px dashed var(--border);
}

.girocode__code {
    flex: 0 0 auto;
    width: 7.5rem;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
}
.girocode__code svg { display: block; width: 100%; height: auto; }
.girocode__code:empty { display: none; }

.girocode figcaption {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.45;
}

/* Fortschritt der gefuehrten Einrichtung */
.steps {
    display: flex;
    gap: .4rem;
    margin: .2rem 0 .5rem;
}
.steps__dot {
    flex: 1;
    height: .4rem;
    border-radius: 999px;
    background: var(--border);
}
.steps__dot--done { background: var(--accent); }

/* Zugangscode zum Weitergeben */
.code-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    color: var(--accent);
    background: var(--field);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nm-in);
    padding: .9rem .5rem;
    margin: .7rem 0 .2rem;
    user-select: all;
}

/* ------------------------------------------------------ Zahlungsdaten */

.fieldset {
    background: var(--field);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nm-in-sm);
    padding: .8rem 1rem 1rem;
    margin: 1.6rem 0 0;
    min-width: 0;
}

.fieldset legend {
    padding: 0 .45rem;
    font-weight: 700;
    font-size: .9rem;
}

/* Ein Block, der zugeklappt nur seine Ueberschrift zeigt - fuer alles,
   was im Normalfall so bleiben kann, wie es voreingestellt ist.

   Er lag frueher vertieft, also in genau derselben Mulde wie ein
   Eingabefeld - und wurde prompt fuer eines gehalten. Jetzt steht er
   heraus und traegt die Kante der Bedienelemente: erhaben plus Winkel
   heisst "hier oeffnet sich etwas", nie "hier tippt man". */
.fieldset--fold {
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--edge);
    box-shadow: var(--nm-out-sm);
}
.fieldset--fold > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    list-style: none;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
}
.fieldset--fold > summary::-webkit-details-marker { display: none; }
.fieldset--fold > summary::marker { content: ''; }
.fieldset--fold > summary::after {
    content: '⌄';
    margin-left: auto;
    color: var(--muted);
    font-weight: 400;
    transition: transform .15s;
}
.fieldset--fold[open] > summary::after { transform: rotate(180deg); }
.fieldset--fold[open] > summary { margin-bottom: .6rem; }
.fieldset--fold > summary .muted { font-weight: 400; font-size: .85rem; }

.paytag {
    display: inline-block;
    background: var(--plus-bg);
    color: var(--plus);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
}

.transfer__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--border);
}

.paydata {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .9rem;
}

.paydata code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    background: var(--bg);
}

.btn--pay {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.btn--pay:hover { filter: brightness(1.08); }

.btn--copy.is-done {
    color: var(--plus);
    border-color: var(--plus);
}

.statement__foot {
    font-size: .8rem;
    border-top: 1px solid var(--border);
    padding-top: .7rem;
    margin-top: 1.5rem;
}

/* Erklaertexte hinter einem kleinen "i". Es steht mitten im Satz, direkt
   hinter dem Text, auf den es sich bezieht - der Text kommt erst auf Klick. */
.info { display: inline; }

/* Das Zeichen selbst ist der Knopf - ohne die weiche Scheibe der uebrigen
   Knoepfe. Das Material-Zeichen ist bereits ein Kreis; eine zweite Scheibe
   darunter gaebe zwei Ringe ineinander und genau den unruhigen Eindruck,
   den die Hinweise loswerden sollten. */
.info__mark {
    display: inline-block;
    vertical-align: -.28em;
    margin: 0 0 0 .25rem;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
    user-select: none;
    transition: color .12s;
}

.info__mark .ic { width: 100%; height: 100%; }
.info__mark:hover { color: var(--accent); }
.info__mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50%; }

/* Aufgeklappt traegt das Zeichen die Akzentfarbe - so ist zu sehen,
   welches der Zeichen den Text darunter geoeffnet hat. */
.info--open .info__mark { color: var(--accent); }

/* Ohne JavaScript bleibt der Text sichtbar - nur die Klasse "js" am
   <html> blendet ihn aus. So geht nie eine Erklaerung verloren. */
.info__text {
    display: block;
    margin: .5rem 0 .3rem;
    max-width: 46rem;
    padding: .55rem .75rem;
    font-size: .88rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: var(--muted);
    background: var(--field);
    border: 0;
    box-shadow: var(--nm-in-sm);
    border-radius: 14px;
}

.js .info__text { display: none; }
.js .info--open .info__text { display: block; }

/* Impressum und Datenschutz stehen in der Fusszeile jeder Seite - auch auf
   der Anmeldeseite, die keine Navigation hat (§ 5 DDG). Unten Platz fuer
   die Navigationsleiste, damit der Verweis nicht darunter verschwindet. */
.fusszeile {
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
}

.fusszeile a { color: inherit; }
.fusszeile a:hover { color: var(--text); }

body:not(.plain) .fusszeile { padding-bottom: calc(var(--nav-h) + 1.1rem); }

/* Rechtstexte sind lange Fliesstexte - schmaler Satzspiegel, mehr Luft
   zwischen den Abschnitten als in den Formularkarten. */
.rechtstext { max-width: 42rem; margin-left: auto; margin-right: auto; }
.rechtstext h1 { font-size: 1.4rem; margin-top: 2.2rem; }
.rechtstext h1:first-child { margin-top: 0; }
.rechtstext h2 { font-size: 1.1rem; margin-top: 1.8rem; }
.rechtstext h3 { font-size: .98rem; margin-top: 1.2rem; }
.rechtstext p, .rechtstext li { line-height: 1.65; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin: .35rem 0; }

@media print {
    /* Auf Papier gibt es kein Licht von schraeg vorn: alle Schatten aus,
       dafuer wieder echte Linien - sonst verschwaemme die Abrechnung. */
    :root {
        --bg: #fff; --surface: #fff; --field: #fff; --edge: #999;
        --text: #000; --muted: #444;
        --border: #bbb; --plus: #000; --minus: #000;
        --plus-bg: #fff; --minus-bg: #fff; --accent: #000;
        --shadow: none;
        --nm-out: none; --nm-out-sm: none; --nm-in: none; --nm-in-sm: none;
    }
    body { padding: 0; font-size: 11pt; }
    .card, .total, .balance, .transfer, .payment, .list__item,
    .shopping, .details, .fieldset, .code-box, .statement__sum {
        border: 1px solid var(--border) !important;
        box-shadow: none !important;
    }
    .no-print, .mainnav, .topbar, .fab { display: none !important; }
    .page { padding: 0; max-width: none; }
    .table { page-break-inside: auto; }
    .table tr { page-break-inside: avoid; }
    h2 { page-break-after: avoid; }

    /* Der Ausdruck bleibt bei der klassischen Basis - die vergroesserte
       Handy-Wurzel wuerde sonst auch das Papier aufblasen. */
    html { font-size: 100%; }

    /* Jede Familie auf ein eigenes Blatt - beim letzten kein Umbruch,
       sonst kommt eine leere Seite hinterher. */
    .statement { margin-bottom: 0; }
    .statement--break { page-break-after: always; break-after: page; }
    .statement__sum { border: 1px solid #000; }
    .todo li { border: 1px solid #000; border-left: 4px solid #000; page-break-inside: avoid; }

    /* Feste Kantenlaenge: unter etwa 25 mm wird der Code auf Papier
       fuer viele Handykameras unzuverlaessig. */
    .girocode__code { width: 30mm; padding: 0; }
    .girocode { page-break-inside: avoid; }
}