/*
   Keine externen Schriften, kein CDN, keine Tracker (Prinzip 6). Der System-Font-Stack
   kostet nichts, lädt nichts nach und verrät niemandem, wer diese Seite besucht.

   Die Farben stehen als Variablen an einer Stelle. Der dunkle Modus ist keine zweite
   Gestaltung, sondern dieselbe mit anderen Werten — sonst driften die beiden auseinander,
   und irgendwann ist eine Seite im Dunkeln unlesbar, ohne dass es jemand merkt.
*/
:root {
    color-scheme: light dark;

    --bg: #fbfaf8;
    --surface: #ffffff;
    --surface-2: #f4f3f0;
    --text: #1b1c1e;
    --muted: #6a6c72;
    --line: #e4e2dd;
    --line-strong: #cfccc5;

    /* „Karo" ist die Raute — das Grün-Blau ist die einzige kräftige Farbe im Haus. */
    --accent: #12706a;
    --accent-hover: #0d5a55;
    --accent-soft: #e6f2f1;
    --accent-text: #0b4a46;

    /* Markenfarben der Cloud-Anbieter. Die einzigen Farben im Haus, die im dunklen
       Modus NICHT umschlagen dürfen: Ein Dropbox-Blau, das je nach Modus anders
       aussieht, ist kein Wiedererkennungszeichen mehr — und genau das Wiedererkennen
       ist der Zweck. Deshalb stehen sie hier einmal und nicht im Dunkel-Block. */
    --anbieter-dropbox: #0061ff;

    --danger: #a52020;
    --danger-soft: #fbeceb;
    --warn: #8a5a00;
    --warn-soft: #fdf3e0;
    --ok: #1d6b3a;
    --ok-soft: #e8f5ec;

    /* Schrift AUF der Akzentfarbe. Im Hellen ist der Akzent dunkles Tuerkis, da traegt
       Weiss; im Dunklen ist er helles Tuerkis, da braucht es dunkle Schrift (7,89 : 1).
       Als Variable, damit auch Komponenten-Stylesheets sie benutzen koennen, ohne die
       Umkehrung selbst zu kennen. */
    --auf-akzent: #ffffff;

    /* Schrift AUF --danger. Bewusst eine eigene Variable und nicht --auf-akzent, obwohl
       die Werte sich heute gleichen: Akzent und Warnfarbe haben nichts miteinander zu
       tun, und wenn eine von beiden je verschoben wird, soll die andere nicht mitwandern. */
    --auf-danger: #ffffff;

    /* Der Schleier hinter einem Dialog. Bleibt in beiden Modi schwarz — er verdunkelt,
       er faerbt nicht. */
    --overlay: rgba(0, 0, 0, .5);

    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(20, 20, 25, .05), 0 4px 14px rgba(20, 20, 25, .045);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16171b;
        --surface: #1e2025;
        --surface-2: #26282e;
        --text: #e9e8e5;
        --muted: #a0a2a9;
        --line: #32343b;
        --line-strong: #43464e;

        --accent: #4ec5bb;
        --accent-hover: #6fd6cd;
        --accent-soft: #16332f;
        --accent-text: #8fdcd4;

        --danger: #f08a86;
        --danger-soft: #3a1f1e;
        --warn: #e0b061;
        --warn-soft: #362b17;
        --ok: #7fd39a;
        --ok-soft: #17301f;

        --auf-akzent: #10221f;

        /* Dunkles Rot-Schwarz aus der Danger-Familie — 7,23 : 1 auf #f08a86. Weiss ergaebe
           hier 2,42 : 1 und faellt damit durch (WCAG AA verlangt 4,5). */
        --auf-danger: #2c1211;

        --overlay: rgba(0, 0, 0, .65);

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .28);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { color: var(--accent-hover); }

code {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    font-size: .875em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .1em .4em;
}

article {
    max-width: 38rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

h1 {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 .4rem;
}

h1:focus { outline: none; }

h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 2rem 0 .5rem;
}

h3 {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.5rem 0 .5rem;
}

.lead {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0 0 2rem;
}

/* --- Hinweise -------------------------------------------------------------- */

.notice {
    margin: 1.25rem 0;
    padding: .9rem 1.1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.notice p { margin: 0; color: var(--muted); }
.notice p + p { margin-top: .5rem; }
.notice strong { color: var(--text); }

.notice--warn { background: var(--warn-soft); border-left-color: var(--warn); }
.notice--accent { background: var(--accent-soft); border-left-color: var(--accent); }

/*
   Blazors Fehlerleiste.

   Steht GLOBAL und nicht in einem *.razor.css, weil sie in zwei Layouts vorkommt
   (MainLayout öffentlich, InternLayout angemeldet). Ein bereichsbezogenes Stylesheet gilt
   nur für Markup aus der gleichnamigen Komponente — die Kopie im anderen Layout bekäme
   kein einziges dieser Attribute, auch nicht das display:none. Genau so stand die Leiste
   am 2026-07-21 auf jeder angemeldeten Seite dauerhaft da, ohne dass ein Fehler vorlag.

   Die Vorlage setzte hier ausserdem `background: lightyellow` samt `color-scheme: light
   only` — eine Regel, die den dunklen Modus fuer dieses Element ausdruecklich abschaltet.
*/
#blazor-error-ui {
    background: var(--warn-soft);
    color: var(--text);
    border-top: 1px solid var(--warn);
    bottom: 0;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .7rem 1.25rem .75rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .reload { margin-left: .4rem; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
    color: var(--muted);
}

.meldung { margin: .25rem 0 0; font-size: .93rem; }
.meldung--fehler { color: var(--danger); font-weight: 500; }
.meldung--ok { color: var(--ok); font-weight: 500; }

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

.karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
    margin: 1rem 0;
}

.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

/* Eine Karte, die man aufklappt. Fuer Handgriffe, die selten vorkommen und
   aufgeklappt mehr Platz einnehmen als alles andere auf der Seite zusammen. */
.karte--klapp > summary {
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.karte--klapp > summary::-webkit-details-marker { display: none; }

/* Eigenes Dreieck statt des Browser-Markers: Der Standard sitzt je nach Browser
   woanders und laesst sich nicht mit der Schrift ausrichten. */
.karte--klapp > summary::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: none;
}

.karte--klapp[open] > summary::before { transform: rotate(45deg); }
.karte--klapp[open] > summary { margin-bottom: .5rem; }

.karte-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}

.karte-kopf h2 { margin: 0; }

/* --- Zustands-Plaketten ---------------------------------------------------- */

.plakette {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.plakette::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: currentColor;
}

.plakette--ok { color: var(--ok); background: var(--ok-soft); }
.plakette--warn { color: var(--warn); background: var(--warn-soft); }
.plakette--aus { color: var(--muted); background: var(--surface-2); }

/* --- Schlagworte an einem Dokument ----------------------------------------- */

/* Als Pillen mit Abstand, damit sie nicht aneinanderkleben: In der Liste stehen
   je Dokument mehrere nebeneinander und sollen umbrechen können. */
.tag {
    display: inline-block;
    font-size: .8rem;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .12rem .55rem;
    margin: 0 .3rem .3rem 0;
    white-space: nowrap;
}

/* --- Beschreibungs-Paare --------------------------------------------------- */

.paare {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) 1fr;
    gap: .4rem 1rem;
    margin: .75rem 0 0;
}

.paare dt { color: var(--muted); font-size: .92rem; }
.paare dd { margin: 0; }

/* --- Tabellen -------------------------------------------------------------- */

.tabelle {
    width: 100%;
    max-width: 42rem;
    border-collapse: collapse;
    margin: 1rem 0;
}

.tabelle th {
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .3rem .6rem .5rem 0;
    border-bottom: 1px solid var(--line-strong);
}

.tabelle td {
    text-align: left;
    padding: .55rem .6rem .55rem 0;
    border-bottom: 1px solid var(--line);
}

.tabelle tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.tabelle tfoot td { border-bottom: none; color: var(--muted); font-size: .92rem; }

/*
   Zahlen werden rechtsbündig gesetzt und in gleich breiten Ziffern.

   Beides zusammen macht erst den Nutzen: Rechtsbündig stehen Einer über Einern und
   Zehner über Zehnern, sodass man Größenordnungen im Vorbeisehen vergleicht statt sie zu
   lesen. Und tabular-nums verhindert, dass eine 1 schmaler ist als eine 8 — sonst
   verrutschen die Spalten trotz Bündigkeit wieder. Bei Miteigentumsanteilen und Flächen
   ist das kein Schönheitsfrage: Auf diesen Zahlen rechnet die Jahresabrechnung, und ein
   Zahlendreher fällt in einer sauberen Spalte auf, in einer flatternden nicht.
*/
.tabelle .zahl,
.tabelle th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Die Einheit hinter der Zahl („m²") gehört zur Spalte, soll aber nicht mitbetont werden. */
.tabelle .einheit { color: var(--muted); font-size: .9em; }

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

.feld { display: block; margin-bottom: .85rem; }

.feld-name {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}

.feld-hilfe {
    display: block;
    font-size: .85rem;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: .3rem;
}

input[type="text"], input:not([type]), select, textarea {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: .5rem .65rem;
    transition: border-color .12s, box-shadow .12s;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.formular { max-width: 30rem; }

.bestaetigung {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .75rem 0;
    font-size: .95rem;
    cursor: pointer;
}

.bestaetigung input[type="checkbox"] {
    width: auto;
    margin-top: .3rem;
    accent-color: var(--accent);
    flex: none;
}

/* --- Einrichtungs-Assistent ------------------------------------------------ */

.assistent { margin: 1rem 0; }

/* Die Schritte hängen an einer Linie: Man sieht, dass es ein Weg ist und wie weit
   man darauf gekommen ist. */
.schritt {
    position: relative;
    padding: 0 0 1.5rem 2.5rem;
    border-left: 2px solid var(--line);
    margin-left: .75rem;
}

.schritt:last-child { border-left-color: transparent; padding-bottom: 0; }
.schritt--fertig { border-left-color: var(--accent); }

.schritt-kopf {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.schritt-kopf h3 {
    margin: 0;
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--text);
}

.schritt-nr {
    position: absolute;
    left: -.95rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 2px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}

.schritt--fertig > .schritt-kopf > .schritt-nr {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--auf-akzent);
}

.zugangsliste { display: grid; gap: .5rem; margin-top: .75rem; max-width: 30rem; }

.zugang {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    text-align: left;
    padding: .6rem .85rem;
    width: 100%;
}

.zugang--gewaehlt {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.zugang-name { font-weight: 600; }
.zugang-typ { font-size: .85rem; color: var(--muted); font-weight: 400; }
.zugang--gewaehlt .zugang-name { color: var(--accent-text); }

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

button, .knopf {
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: .5rem 1rem;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    transition: background .12s, border-color .12s, color .12s;
}

/* Ein <a>, der wie ein Knopf aussieht: Der Anmelde-Ablauf verlaesst die Anwendung, das ist
   ein Link und kein Formular-Knopf — aussehen soll er trotzdem wie eine Handlung. */
.knopf { display: inline-block; text-decoration: none; }
a.knopf--haupt, a.knopf--haupt:hover { color: var(--auf-akzent); }

button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
button:disabled { opacity: .55; cursor: not-allowed; }

button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Die Schrift auf der Akzentfarbe kehrt sich im dunklen Modus um — das steckt in
   --auf-akzent und nicht mehr in einer zweiten Regel hier. Vorher stand die Umkehrung
   an drei Stellen; wer eine vergisst, bekommt weisse Schrift auf hellem Tuerkis, und
   zwar nur im dunklen Modus (Prinzip 19). */
.knopf--haupt {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--auf-akzent);
}

.knopf--haupt:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--auf-akzent);
}

.knopf--still {
    background: none;
    border-color: transparent;
    color: var(--muted);
    padding-left: .5rem;
    padding-right: .5rem;
}

.knopf--still:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); border-color: transparent; }

/* Abbildung der Anbieter-Warnung, die dem Benutzer gleich begegnet. Bewusst wie ein
   Zitat gesetzt — eingerueckt und abgesetzt —, damit sie als "so wird es gleich
   aussehen" gelesen wird und nicht als Warnung von Karo selbst. */
.warn-vorschau {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: .6rem;
    padding: .7rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
}
.warn-vorschau svg { flex: none; }
.warn-vorschau p { margin: 0; font-size: .93rem; line-height: 1.45; }

/* Knopf mit dem Zeichen des Cloud-Anbieters davor. Das Zeichen sitzt auf weissem
   Grund, damit es in beiden Modi so aussieht wie ueberall sonst — ein Markenzeichen,
   das je nach Modus die Farbe wechselt, erkennt niemand wieder. */
.knopf--mit-zeichen { display: inline-flex; align-items: center; gap: .55rem; }
.knopf--mit-zeichen svg {
    flex: none;
    background: #fff;
    border-radius: 3px;
    padding: 2px;
}

.knopf-reihe { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }

.validation-message { color: var(--danger); }

/* Blazors Fehlergrenze. Stand bis zum 2026-07-21 auf weisser Schrift — im hellen Modus
   ist --danger dunkelrot und das trug (7,43 : 1), im dunklen ist sie helles Lachsrosa und
   es blieben 2,42 : 1. Derselbe Fehler wie am 2026-07-20 bei den Haupt-Knoepfen, nur an
   einer Stelle, die man fast nie zu sehen bekommt — und deshalb umso laenger falsch. */
.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: var(--auf-danger);
}

.blazor-error-boundary::after { content: "Da ist etwas schiefgegangen."; }

/* --- Öffentliche Seiten ---------------------------------------------------- */

.signin {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.signin p { color: var(--muted); }

/* ---------------------------------------------------------------
   Hülle des angemeldeten Bereichs (InternLayout): Kopf oben, Menü
   links, Inhalt rechts. Die öffentlichen Seiten bleiben unberührt —
   sie rendern weiter das zentrierte <article>.
   --------------------------------------------------------------- */
/* Feste Bildschirm-Hülle: Der Rahmen (Kopfzeile, Menü links) bleibt stehen, nur der
   Inhaltsbereich scrollt — nicht die ganze Seite. Deshalb 100vh mit verstecktem Überlauf,
   und das Scrollen wandert eine Ebene tiefer (.shell-content bzw. die Panes einer Seite). */
.shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Die Kopfleiste trägt jetzt den Seitentitel (aus Platzgründen oben statt im Inhalt). Deshalb
   fluchten ihre Spalten mit dem Rest: die Marke über der Menü-Spalte (14rem), der Seitenkopf
   linksbündig zum Inhalt. Die Polsterung sitzt an den Spalten, nicht am Balken. */
.shell-header {
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.shell-brand {
    flex: 0 0 14rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem .75rem;
    font-size: 1.85rem;          /* dieselbe große Schrift wie der Seitentitel (h1) */
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
    text-decoration: none;
}

/* Die Raute ist das Zeichen: „Karo" heißt genau das. Die 2 darin ist die Hausnummer. */
.shell-raute {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    color: var(--accent);
}

/* Seitenkopf in der Leiste — linksbündig zum Inhalt (dieselbe Polsterung wie das <article>). */
.shell-kopf {
    flex: 1 1 auto;
    min-width: 0;
    padding: .7rem 2.25rem;
}

.shell-kopf h1 { margin: 0; font-size: 1.85rem; line-height: 1.15; }
.shell-kopf .kopf-unter { margin: .12rem 0 0; font-size: .9rem; color: var(--muted); }

.shell-user {
    flex: none;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 0 1.4rem;
    font-size: .9rem;
}

.shell-who { color: var(--muted); }

/* Zahnrad-Menü der Verwaltung (ADR-0027): die getrennten Verwaltungs-Bereiche über ein kleines
   Dropdown oben rechts statt einer Gruppe im linken Menü. Reines <details>/<summary> — das Layout
   ist statisch, ein Skript wäre hier fehl am Platz. (Klick außerhalb schließt es nicht; es schließt
   beim Navigieren — die Seite lädt dabei neu.) Farben aus den Variablen, damit der dunkle Modus
   danebensteht (Farb-Wache). */
.zahnrad { position: relative; }
.zahnrad > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
}
.zahnrad > summary::-webkit-details-marker { display: none; }
.zahnrad > summary svg { width: 1.25rem; height: 1.25rem; }
.zahnrad > summary:hover,
.zahnrad[open] > summary { background: var(--surface-2); color: var(--text); }

.zahnrad-menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 30;
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.zahnrad-menu a {
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}
.zahnrad-menu a:hover { background: var(--surface-2); }

/* Jahres-Übersicht der Kontoauszüge im Menü (SectionContent MenuKontext) — kompakt und
   vertikal, bleibt beim Scrollen des Buchungsbereichs stehen. */
.nav-uebersicht {
    margin-top: 1.25rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.nav-uebersicht-jahr { font-size: .82rem; font-weight: 700; color: var(--text); text-align: right; }
/* Kleiner und rechtsbündig — Euro-Beträge stehen grundsätzlich rechtsbündig. */
.nav-uebersicht .stat { gap: .05rem; align-items: flex-end; }
.nav-uebersicht .stat-label { font-size: .62rem; }
.nav-uebersicht .stat-wert { font-size: .88rem; font-variant-numeric: tabular-nums; }

/* --- Kopfzeile: Steuerung links, Saldoverlauf-Chart rechts ----------------- */

.konto-kopfzeile { flex: none; display: flex; gap: 1.5rem; align-items: flex-start; }
.konto-steuerung { flex: 1 1 auto; min-width: 0; }
.konto-chart { flex: 0 0 clamp(16rem, 30%, 23rem); min-width: 0; }
.konto-chart-svg { width: 100%; height: auto; display: block; }
.konto-chart-leer { color: var(--muted); font-size: .85rem; margin: .4rem 0 0; }

.chart-null { stroke: var(--line-strong); stroke-width: 1; }
.chart-tick { stroke: var(--muted); stroke-width: 1; }
.chart-ein { fill: var(--ok); }
.chart-aus { fill: var(--danger); }
/* Saldo-Linie: gelblicher Ton (--warn), gestrichelt. Die Punkte je Monat sitzen darauf. */
.chart-linie { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 4 2.5; }
.chart-punkt { fill: var(--warn); stroke: var(--surface); stroke-width: .6; }
/* Der Zeiger zeigt an, dass Säulen und Punkte einen Wert im Hover tragen. */
.chart-ein, .chart-aus, .chart-punkt { cursor: help; }
.chart-yl { fill: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }

/* Schmale Fenster: Chart unter die Steuerung. */
@media (max-width: 60rem) {
    .konto-kopfzeile { flex-direction: column; }
    .konto-chart { flex-basis: auto; width: 100%; max-width: 24rem; }
}

/* Umschalter "Ansehen als" — existiert nur im Entwicklungs-Build (siehe
   SimulationsWaehler.razor). Der laufende Zustand ist absichtlich auffaellig: Wer vergisst,
   dass er gerade jemand anderes ist, prueft die falsche Ansicht und zieht falsche
   Schluesse. Deshalb traegt er die Warnfarbe und nicht die stille Menuefarbe. */
.simulation {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
}

.simulation--aktiv {
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--warn-soft);
    border: 1px solid var(--warn);
}

.simulation-text { color: var(--muted); }
.simulation--aktiv .simulation-text { color: var(--text); }

.simulation-auswahl {
    font: inherit;
    padding: .15rem .3rem;
    max-width: 11rem;
}

.simulation-zurueck {
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.shell-logout {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
}

.shell-logout:hover { color: var(--text); background: var(--surface-2); }

.shell-body {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

/* Das Menü scrollt nicht mit — es steht fest an seiner Stelle. */
.shell-nav {
    flex: 0 0 14rem;
    border-right: 1px solid var(--line);
    padding: 1.25rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    overflow: hidden;
}

.shell-nav a {
    display: block;
    padding: .45rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: .95rem;
}

.shell-nav a:hover { background: var(--surface-2); color: var(--text); }

.shell-nav a.active {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

.shell-nav-titel {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .2rem .75rem;
    margin-top: 1.1rem;
}

/* Sicherungs-Hinweis unten im Menü — statt als Banner über jedem Seiteninhalt. Sitzt am
   unteren Rand (margin-top: auto) und trägt die Warnfarbe, ohne den Inhalt zu verdecken. */
.nav-sicherung {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    line-height: 1.3;
    color: var(--warn);
    background: var(--warn-soft);
    text-decoration: none;
}

.nav-sicherung:hover { text-decoration: underline; }

.nav-sicherung-punkt {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--warn);
    flex: none;
}

/* Der Inhaltsbereich ist selbst ein fester Rahmen (Spalte): ein etwaiger Banner steht oben
   und bleibt, darunter scrollt der eigentliche Inhalt. */
.shell-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hier — und nur hier — scrollt der Seiteninhalt. Ohne eigene Polsterung: die tragen die
   Seiten selbst (das Standard-<article> unten), damit eine Seite auch die volle Höhe füllen
   kann (z. B. die Dokumente-Ansicht mit ihren zwei Spalten). */
.shell-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Der Banner steht ueber dem Seiteninhalt und bleibt, bis der Zustand behoben ist
   (Prinzip 15). Bewusst dieselbe Breite wie der Inhalt darunter: Ein durchlaufendes
   Band waere lauter als die Sache und wuerde nach ein paar Tagen ueberlesen. */
.banner-verwaltung {
    flex: none;
    max-width: 48rem;
    margin: 1.5rem 0 0 2.25rem;
}

/* Im Innenbereich soll der Inhalt die Fläche nutzen, nicht als schmale
   Spalte in der Mitte kleben wie auf den öffentlichen Seiten. Die Polsterung sitzt am
   <article> (nicht am scrollenden Container), damit Vollflächen-Seiten sie weglassen können. */
.shell-content > article {
    max-width: 48rem;
    margin: 0;
    padding: 2.25rem 2.25rem 4rem;
}

/* Die Kontoauszüge sind eine breite, sechsspaltige Tabelle — der Lesetext-Deckel (48rem)
   engt sie ein. Diese Seite darf die Fläche nutzen.
   Zudem füllt sie die Höhe: Kopf, Jahr-Leiste, Übersicht, Filter und Wolke bleiben fix —
   nur der Buchungsbereich darunter scrollt (wie die Dokumente-Liste). */
.shell-content > article.konto {
    /* Breiter als der 64rem-Lesedeckel: so rückt der Saldoverlauf-Chart oben rechts an den
       rechten Rand (das rechte Padding bleibt als Abstand). Auf ultrabreiten Schirmen bleibt
       ein Deckel, damit die Tabelle nicht auseinanderläuft. */
    max-width: 88rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* Oben knapp, damit die Jahr-Reiste auf Höhe des ersten Menüeintrags („Übersicht") sitzt. */
    padding-top: 1.2rem;
    padding-bottom: 1.25rem;
}

.konto > h1,
.konto > .lead,
.konto .jahr-leiste,
.konto .jahr-uebersicht,
.konto .konto-filter,
.konto .tag-wolke { flex: none; }

/* Schmale Fenster: Menü wandert über den Inhalt statt daneben. */
@media (max-width: 46rem) {
    .shell-body { flex-direction: column; }
    .shell-nav {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
        flex-direction: row;
        flex-wrap: wrap;
        padding: .6rem .75rem;
    }
    .shell-nav-titel { display: none; }
    .shell-nav { overflow: visible; }
    .shell-content > article { padding: 1.5rem 1.25rem 3rem; }
    .paare { grid-template-columns: 1fr; gap: 0 0; }
    .paare dt { margin-top: .6rem; }

    /* Schmale Fenster: Liste über Vorschau statt daneben. */
    .dok-split { flex-direction: column; }
    .dok-liste { flex: 0 0 auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--line); }
}

/* --- Dokumente: Liste links, Anzeige rechts -------------------------------- */

/* Wie die Kontoauszüge: volle Fläche und Höhe, Titel im Kopf-Band (Layout), darunter die
   Steuerzeile (Suche + Schlagwort-Wolke) fix, dann die zwei Spalten. */
.shell-content > article.dok {
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 1.2rem 2.25rem 1.25rem;
}

.dok-steuerung { flex: none; }

.dok-split {
    display: flex;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

/* Die Liste ist selbst eine feste Spalte: Kopf (Überschrift) bleibt stehen, nur die
   Einträge darunter scrollen. */
.dok-liste {
    flex: 0 0 26rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
}

.dok-liste-kopf {
    flex: none;
    padding: 1.75rem 1.5rem 1rem;
}

.dok-liste-kopf h1 { margin: 0; }
.dok-liste-kopf p { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }

.dok-eintraege {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .25rem .75rem 1.5rem;
}

.dok-eintrag {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    cursor: pointer;
    font: inherit;
    color: var(--text);
}

.dok-eintrag:hover { background: var(--surface-2); }

.dok-eintrag.aktiv {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.dok-eintrag-datum { font-size: .78rem; color: var(--muted); }
.dok-eintrag.aktiv .dok-eintrag-datum { color: var(--accent-text); }
.dok-eintrag-titel { display: block; margin-top: .1rem; }

/* Der Anzeigebereich: nimmt den Rest ein, das Dokument füllt ihn ganz. */
.dok-vorschau {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.dok-vorschau iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

.dok-vorschau-leer {
    margin: auto;
    color: var(--muted);
    padding: 2rem;
    text-align: center;
}

/* --- Kontoauszüge: Jahr für Jahr, numerisch ------------------------------- */

.konto-lade { color: var(--muted); }
.konto-leer { color: var(--muted); margin: 1.5rem 0; }

/*
   Jahres-Leiste als primäre Achse: Man sieht immer nur EIN Jahr. Erst das hält die
   Ansicht übersichtlich, wenn viele Jahrgänge erfasst sind — eine flache Liste über
   17 Jahre wären über tausend Zeilen.
*/
.jahr-leiste {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 1.25rem;
    border-bottom: 1px solid var(--line);
}

/* Die Jahr-Reiter (samt „Alle") scrollen bei Überlauf horizontal, aber ohne sichtbare
   Scrollleiste (kompakt). Sie nehmen nur ihre natürliche Breite; die Suche füllt den Rest. */
.jahr-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .2rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.jahr-tabs::-webkit-scrollbar { display: none; }

/* Die Suche sitzt in der Reiter-Zeile, hält aber eine feste, schmale Breite — das Wort
   „Suchen" genügt als Platzhalter, der übrige Platz bleibt frei. */
.jahr-leiste .konto-suche {
    flex: 0 0 auto;
    width: 10rem;
    padding: .35rem .7rem;
}

.jahr-tab {
    flex: none;                 /* Reiter behalten ihre Breite, statt sich zu quetschen */
    font: inherit;
    font-variant-numeric: tabular-nums;
    padding: .4rem .75rem;
    border: none;
    background: none;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
}

/* „Alle" steht immer ganz rechts — und bleibt beim Scrollen am rechten Rand angeheftet. */
/* „Alle" steht gleich hinter den Jahren (ggf. hinter den Blätter-Pfeilen), abgesetzt durch
   eine feine Trennlinie — nicht mehr ans rechte Ende geheftet. */
.jahr-tab--alle {
    flex: none;
    margin-left: .35rem;
    border-left: 1px solid var(--line);
    padding-left: .8rem;
}

/* Excel-artige Blätter-Pfeile in unserem Stil — dezent, nur bei Überlauf sichtbar. */
.jahr-pfeile { flex: none; display: inline-flex; gap: .1rem; }

.jahr-pfeil {
    font: inherit;
    line-height: 1;
    padding: .25rem .45rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.jahr-pfeil:hover { color: var(--text); border-color: var(--muted); background: var(--surface-2); }

.jahr-tab:hover { background: var(--surface-2); color: var(--text); }

.jahr-tab.aktiv {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
    font-weight: 600;
    background: none;
}

/* Der Jahrgang auf einen Blick — Ein-/Ausgänge, Endsaldo, Anzahl. */
.jahr-uebersicht {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2.5rem;
    padding: .9rem 1.15rem;
    margin: 0 0 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.stat { display: flex; flex-direction: column; gap: .15rem; }

.stat-label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat-wert { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.konto-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
}

.konto-filter input,
.konto-filter select { font: inherit; }

.konto-filter .konto-suche { flex: 1 1 18rem; }

.konto-reset { color: var(--muted); font-size: .9rem; padding: .45rem .6rem; }

/*
   Schlagwort-Wolke mit drei Zuständen: neutral (Umriss), „ein" (grün, nur diese),
   „aus" (rot durchgestrichen, ohne diese). Ein Klick weiter, kein Menü.
*/
.tag-wolke {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 1.25rem;
}

.tag-chip {
    font: inherit;
    font-size: .82rem;
    line-height: 1.2;
    padding: .22rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.tag-chip:hover { border-color: var(--muted); color: var(--text); }

.tag-chip.ein {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}

.tag-chip.aus {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
    text-decoration: line-through;
}

/* Sechs Spalten passen nicht in die schmale Standardbreite (max-width: 42rem). */
.konto-tabelle { max-width: none; }
.konto-tabelle td,
.konto-tabelle th { font-size: .9rem; }

/*
   Zeilenzellen grundsätzlich oben-bündig: Trägt eine Zeile mehrere Schlagworte, wächst
   sie in die Höhe — dann sollen Datum, Betrag und Saldo an der Oberkante stehen und nicht
   in der Mitte schweben.
*/
.konto-tabelle tbody td { vertical-align: top; }
.konto-tabelle .sp-datum { white-space: nowrap; }
.konto-saldo { color: var(--muted); }

/* Buchungstext: der Rohtext wie gedruckt trägt, der Vorgang ist kleine Zusatz-Beschriftung (ADR-0031). */
.konto-rohtext { display: block; white-space: pre-wrap; }
.konto-vorgang-klein { display: block; margin-top: .15rem; font-size: .8em; color: var(--muted); }

/* Schlagworte in der Zeile: umbrechbar, und jede Pille mit eigenem Rand — damit zwei
   Schlagworte („Hausgeld" + „Meteling") unverkennbar zwei sind, nicht ein Wortpaar. */
.konto-tabelle .sp-tags { max-width: 18rem; }
.konto-tabelle .sp-tags .tag { margin: 0 .35rem .3rem 0; border: 1px solid var(--line-strong); }

/* --- Beleg neben der Tabelle statt in einem neuen Tab ---------------------- */

.konto-split { display: flex; gap: 1.5rem; align-items: stretch; flex: 1 1 auto; min-height: 0; }

/* Nur dieser Bereich scrollt — die Buchungszeilen. */
.konto-tabelle-bereich { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }

/* Der Tabellenkopf bleibt beim Scrollen stehen. */
.konto-tabelle thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
}

/* Ist ein Beleg offen, darf die Seite die volle Breite nutzen — Tabelle links,
   Beleg rechts. Ohne Beleg bleibt der ruhige 64rem-Rahmen (siehe article.konto). */
.shell-content > article.konto.mit-beleg { max-width: none; }

.konto-vorschau {
    flex: 0 0 clamp(22rem, 40%, 34rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.konto-vorschau-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .4rem .5rem .85rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted);
}

.konto-vorschau-werkzeuge { display: inline-flex; align-items: center; gap: .5rem; }

.konto-vorschau-zu {
    border: none;
    background: none;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.konto-vorschau-zu:hover { color: var(--text); background: var(--surface); }

.konto-vorschau-rahmen { flex: 1; width: 100%; border: none; background: #fff; }

/* Der Beleg-Knopf ist ein Textknopf im Akzent — kein Kasten, der die Zeile beschwert. */
.beleg-knopf {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent-text);
    cursor: pointer;
    white-space: nowrap;
}

.beleg-knopf:hover { color: var(--accent-hover); text-decoration: underline; }
.beleg-knopf.aktiv { font-weight: 600; text-decoration: underline; }

/* Schmale Fenster: Beleg unter die Tabelle statt daneben. */
@media (max-width: 60rem) {
    .konto-split { flex-direction: column; }
    .konto-vorschau { position: static; width: 100%; flex-basis: auto; height: 70vh; }
}

/* Trennt die Zeilen je physischem Auszug — ein leiser Zwischentitel, kein Kasten. */
.auszug-trenner td {
    padding: .95rem .6rem .3rem 0;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
}

.konto-tabelle tbody tr.auszug-trenner:hover td { background: none; }
.konto-tabelle tbody tr.auszug-trenner:first-child td { padding-top: .3rem; }

/* Der Auszug-Zwischentitel führt zum Kontoauszug-Scan: „Auszug N" links als Link, dazu
   rechts ein „Kontoauszug N/Jahr →". Beide öffnen denselben Scan in der Vorschau. */
.auszug-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.auszug-link,
.auszug-beleg-link {
    font: inherit;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.auszug-link {
    color: var(--accent-text);
    letter-spacing: inherit;      /* erbt Versalien-Optik des Zwischentitels */
}

.auszug-beleg-link {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: .78rem;
}

.auszug-link:hover,
.auszug-beleg-link:hover { text-decoration: underline; color: var(--accent-hover); }

.auszug-link.aktiv,
.auszug-beleg-link.aktiv { text-decoration: underline; color: var(--accent-hover); }

.betrag-plus { color: var(--ok); }
.betrag-minus { color: var(--danger); }

.konto-tabelle tfoot td { font-weight: 600; color: var(--text); }

/* Kompakter Kopf: fixer Bereich klein halten, damit möglichst viele Buchungen sichtbar sind.
   Der Titel bleibt in Originalgröße (Wunsch Betreiber) — nur die Abstände darunter sind eng. */
.konto > h1 { margin: 0 0 .1rem; }
.konto-lead { font-size: .9rem; margin: 0; }
.konto .jahr-leiste,
.dok .jahr-leiste { margin: 0 0 .8rem; }
.konto .jahr-uebersicht { padding: .55rem .95rem; margin: 0 0 .8rem; gap: .45rem 2rem; }
.konto .stat-label { font-size: .68rem; }
.konto .stat-wert { font-size: 1.05rem; }
.konto .konto-filter { margin: 0 0 .6rem; }
.konto .tag-wolke { margin: 0 0 .7rem; }

/* „Eingang"/„Ausgang" sind mitgeführte Schlagworte — gleiche Pille, Zahlen tabellarisch. */
.tag-chip--richtung { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Abrechnungen — berechnete, erklärende Hausabrechnung (ADR-0026)

   Jahr-Reiter, Kennzahlen, die Verteil-Matrix (Posten × Einheit) und je Posten
   eine aufklappbare Herleitung mit Beleg. Die Seite fließt und scrollt im
   .shell-content; nur die breite Matrix scrollt bei Bedarf waagerecht.
   ============================================================================ */

.shell-content > article.abr {
    max-width: 66rem;
    padding-top: 1.2rem;
}

.abr-kennzahlen { margin: 0 0 1.25rem; }

/* Die Matrix kann breiter sein als das Fenster — dann scrollt sie in ihrer eigenen
   Hülle waagerecht, nie die ganze Seite. */
.abr-matrix-huelle { overflow-x: auto; margin: 0 0 .6rem; }
.abr-matrix { min-width: 34rem; }
.abr-matrix th:first-child, .abr-matrix td:first-child { text-align: left; }

/* Die eigene Einheit hervorheben — eine ruhige Akzent-Tönung über die ganze Spalte. */
.abr-meine { background: var(--accent-soft); }

.abr-schl-etikett { color: var(--muted); font-size: .8rem; margin-left: .4rem; white-space: nowrap; }

.abr-matrix tfoot .abr-summe td { font-weight: 600; color: var(--text); border-top: 2px solid var(--line-strong); }
.abr-matrix tfoot td { border-bottom: none; }
.abr-saldo-zeile td { font-weight: 600; }

.abr-nachzahlung { color: var(--danger); font-weight: 600; }
.abr-guthaben { color: var(--ok); font-weight: 600; }

.abr-hinweis { color: var(--muted); font-size: .88rem; margin: 0 0 1.75rem; max-width: 46rem; }
.abr-hinweis strong { color: var(--text); }

/* Der persönliche Jahresabschluss als Fließtext (ADR-0032) — Lese-Typografie in schmaler Spalte. */
.abr-abschluss { margin: 0 0 1.5rem; }
.abr-abschluss-text { max-width: 46rem; line-height: 1.7; }
.abr-abschluss-text h2, .abr-abschluss-text h3 { margin: 1.6rem 0 .5rem; }
.abr-abschluss-text p { margin: 0 0 .9rem; }
.abr-abschluss-text ul { margin: 0 0 .9rem 1.2rem; }
.abr-abschluss-text a { color: var(--accent); }
.abr-stand { color: var(--muted); font-size: .82rem; margin: .4rem 0 0; }

/* Salden-Übersicht aller Einheiten — kompakt statt Matrix (ADR-0032). Bewusst
   etwas kleiner als die generische .jahr-uebersicht: es ist eine Nebenübersicht
   neben dem Fließtext, kein Kennzahlen-Kopf. */
.abr-salden-titel { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
.abr-salden { padding: .6rem .9rem; gap: .5rem 2rem; }
.abr-salden .stat-label { font-size: .66rem; }
.abr-salden .stat-wert { font-size: .98rem; font-variant-numeric: tabular-nums; }

/* Verwaltungs-Vorschau der Abschlüsse (ADR-0032) — auffällig getönt, damit klar ist, dass hier
   nicht der eigene, sondern ein fremder Abschluss betrachtet wird. */
.abr-vorschau-wahl {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin: 0 0 1rem; padding: .5rem .7rem;
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.abr-vorschau-wahl-label { font-size: .8rem; color: var(--muted); margin-right: .3rem; }
.abr-vorschau-tab {
    padding: .25rem .7rem; font-size: .85rem; cursor: pointer;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.abr-vorschau-tab:hover { border-color: var(--accent); color: var(--accent); }
.abr-vorschau-tab.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.abr-vorschau-aus { margin-left: auto; }
.abr-vorschau-hinweis {
    margin: 0 0 1rem; padding: .5rem .7rem; font-size: .9rem;
    background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}
.abr-abschluss--vorschau { outline: 2px dashed var(--accent); outline-offset: .6rem; }

/* „Abschluss drucken"-Knopf und Druck-Stil (ADR-0032): im Druck nur der Abschluss, kein App-Rahmen. */
.abr-drucken {
    float: right; margin: -.2rem 0 0; padding: .35rem .8rem; font-size: .85rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: none; color: var(--text); cursor: pointer;
}
.abr-drucken:hover { border-color: var(--accent); color: var(--accent); }

@media print {
    /* Nur die Abrechnung drucken — App-Rahmen, Jahr-Reiter, Knopf und Scan-Vorschau ausblenden. */
    body * { visibility: hidden; }
    .abr, .abr * { visibility: visible; }
    .abr { position: absolute; left: 0; top: 0; width: 100%; }
    .jahr-leiste, .abr-drucken, .abr-scan-klapp,
    .abr-vorschau-wahl, .abr-vorschau-hinweis { display: none !important; }
    .abr-abschluss--vorschau { outline: none; }
    .abr-abschluss-text { max-width: none; }
    a[href] { color: #000 !important; text-decoration: underline; }
}

/* Herleitung je Posten — eine aufklappbare Karte (nutzt .karte--klapp). */
.abr-herleitung { margin: 0 0 .6rem; }
.abr-herleitung > summary { font-size: 1rem; }
.abr-herleitung-titel { font-weight: 600; }
.abr-herleitung-schl { color: var(--muted); font-size: .82rem; font-weight: 400; }
.abr-herleitung-betrag { margin-left: auto; font-variant-numeric: tabular-nums; }
.abr-herleitung-inhalt { padding-left: .9rem; }

/* Formel-Tabelle: Einheit links, Rechenweg rechts (Zahlen tabellarisch). */
.abr-formeln td:first-child { color: var(--muted); white-space: nowrap; width: 11rem; }
.abr-formeln td:last-child { font-variant-numeric: tabular-nums; }
.abr-meine-zeile td { background: var(--accent-soft); }

/* Aufteilungs-Balken: eine Akzentfarbe, je Segment eine Deckungsstufe (Deckung inline gesetzt). */
.abr-balken { width: 100%; height: .7rem; margin: .5rem 0 .25rem; border-radius: 3px; overflow: hidden; display: block; }
.abr-balken-seg { fill: var(--accent); }

.abr-erklaerung { color: var(--muted); font-size: .9rem; margin: .5rem 0 0; }

.abr-beleg { margin-top: .6rem; }
.abr-beleg-rahmen {
    display: block; width: 100%; height: clamp(20rem, 50vh, 38rem); margin-top: .5rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff;
}

/* Der eingescannte Original-Beleg des Jahres. */
.abr-scan-klapp { margin: 1.5rem 0 0; }
.abr-scan-rahmen {
    display: block; width: 100%; height: clamp(24rem, 58vh, 44rem);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff;
}

/* Didaktik-Box „So funktioniert …". */
.abr-erklaerbox { margin: 1.5rem 0 0; }
.abr-erklaerbox-inhalt { color: var(--muted); }
.abr-erklaerbox-inhalt p { margin: 0 0 .6rem; }

/* Verteilerschlüssel-Legende: schmale, betonte erste Spalte. */
.abr-schluessel { margin: .3rem 0 .8rem; max-width: 34rem; }
.abr-schluessel td:first-child { white-space: nowrap; font-weight: 600; color: var(--accent-text); width: 7rem; }