/* Eigene Stile (Issue #76, Toms Vorgabe: wenige eigene Stile, sonst reines Radzen). Alles in dieser Datei ist eine begründete Ausnahme:
   Entweder hat Radzen keinen Baustein oder keine Variable dafür (Inter, QR-Code, native Auswahl, Seitenraster, untere Leiste mit
   Sicherheitsabstand), oder die Gestalt gehört zur Marke (Farbblock, Linientabelle, Soll-Ist-Marke). Werte, die Radzen als Variable
   kennt, stehen in Theme/RadzenVariables.cs und nicht hier. Inline-Stile und feste Farben sind verboten (RazorFilesTests). */

/* Die Schrift Inter (SIL Open Font License, siehe fonts/LICENSE-Inter-OFL.txt).
   Eine Datei enthält alle Schriftstärken ("variable font"). */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ziffern gleicher Breite, damit Beträge in Listen und Spalten gerade untereinander stehen.
   Die Schrift des Themes gilt auch für den Text, den kein Baustein von Radzen umgibt (Issue #54); sonst nähme der Browser
   dort seine Standardschrift (Times). */
body {
    font-family: var(--rz-text-font-family);
    font-variant-numeric: tabular-nums;
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    background-color: var(--rz-body-background-color);
}

/* Eingabefelder und Knöpfe bringen sonst die Schrift des Browsers mit. */
button,
input,
select,
textarea {
    font-family: inherit;
}

h1:focus {
    outline: none;
}

/* Seitenrahmen (Spec 9): die drei Breitenbereiche stehen in Layout/WidthRanges.cs und in docs/layout.md.
   Handy bis 599 px, Tablet 600 bis 1279 px, Desktop ab 1280 px. Das Stylesheet kann die C#-Werte nicht lesen;
   ein Test (ResponsiveScaffoldTests) prüft, dass die Umbruchstellen hier mit WidthRanges.cs übereinstimmen.
   Alle Randwerte und die Schriftskala des Rahmens stehen in diesem einen :root-Block und in den drei Bereichen
   darunter; die Layouts benutzen nur die Klasse app-page und die Rollen der Skala, keine eigenen Maße.
   Die Schriftwerte sind die Skala aus RadzenVariables.TypeScale (Wert für den Desktop). */
:root {
    --page-gutter: 1rem;
    --block-gap: 1rem;
    --tap-min: 44px;
    --side-nav-width: 15rem;
    --app-header-height: 4rem;
    --app-bottom-bar-height: 4rem;

    --type-title-size: clamp(2rem, 3vw, 3.25rem);
    --type-title-weight: 700;
    --type-title-line: 1.1;
    --type-section-size: 1.5rem;
    --type-section-weight: 650;
    --type-section-line: 1.2;
    --type-amount-size: clamp(1.6rem, 2.4vw, 2.8rem);
    --type-amount-weight: 700;
    --type-amount-line: 1.1;
    --type-text-size: 1rem;
    --type-text-weight: 400;
    --type-text-line: 1.6;
    --type-extra-size: 0.875rem;
    --type-extra-weight: 500;
    --type-extra-line: 1.45;
}

/* Der Rahmen um den Seiteninhalt in beiden Layouts: seitlicher Abstand je Breitenbereich und nichts,
   was breiter als der Bildschirm wird. "clip" statt "hidden", damit klebende Kopfzeilen weiter kleben. */
.app-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-block: var(--block-gap);
    padding-inline: var(--page-gutter);
    overflow-x: clip;
}

.rz-layout {
    overflow-x: clip;
}

@media (max-width: 599px) {
    :root {
        --type-section-size: 1.25rem;
    }
}

@media (min-width: 600px) {
    :root {
        --page-gutter: 1.5rem;
        --block-gap: 1.25rem;
        --type-section-size: 1.375rem;
    }
}

@media (min-width: 1280px) {
    :root {
        --page-gutter: 2rem;
        --block-gap: 1.5rem;
        --type-section-size: 1.5rem;
        /* Die untere Leiste ist ausgeblendet; Hauptbereich und Plus-Knopf rechnen mit ihrer Höhe. */
        --app-bottom-bar-height: 0px;
    }

    /* Auf dem Desktop ist der Inhalt begrenzt und mittig, nicht gestreckt wie auf dem Handy. */
    .app-page {
        max-width: 1180px;
        margin-inline: auto;
    }

    /* Seiten mit Spalten nutzen die Breite (Klasse page-wide, Tom 01.11.2026); Formulare und Texte bleiben schmal.
       Ohne :has in einem alten Browser bleibt es bei 1180 px, nichts geht kaputt. */
    .app-page:has(.page-wide) {
        max-width: 1600px;
    }
}

/* Der Titel in der oberen Leiste ist die Rolle "Abschnitt" der Schriftskala. */
.rz-header .app-title {
    font-size: var(--type-section-size);
    font-weight: var(--type-section-weight);
    line-height: var(--type-section-line);
}

/* Die Kopfzeile von Radzen: Marke links, Umschalter rechts, so hoch und so weit eingerückt wie der Rahmen der Seite. */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--app-header-height);
    padding-inline: var(--page-gutter);
}

.app-header-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-header-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.mode-switch {
    display: flex;
    align-items: center;
}

/* Tippflächen sind mindestens 44 px hoch und breit (Daumen). */
.mode-switch .rz-button {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
}

/* Der Link "Zurück zu den Monaten" ist eine Tippfläche wie ein Knopf. */
.plan-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
}

.app-page .rz-button,
.rz-dialog-content .rz-button {
    min-height: var(--tap-min);
}

.app-page .rz-button.rz-button-icon-only,
.rz-dialog-content .rz-button.rz-button-icon-only {
    min-width: var(--tap-min);
}

/* Radzen setzt die Farbe der Knöpfe fest; in der Kopfzeile gilt die Farbe der Kopfzeile. Die Regel nennt so viele Klassen
   wie die des Themes, sonst verliert sie gegen den Knopf mit Rahmen. */
.rz-header .mode-switch .rz-button.rz-base.rz-shade-default {
    color: inherit;
    border-color: currentColor;
    background-color: transparent;
}


/* Fokus: 3 px Tintenkontur plus 3 px heller Abstand (Design-System, helle Flächen). */
:focus-visible {
    outline: 3px solid var(--rz-text-title-color);
    outline-offset: 3px;
}

/* Die Regel oben allein verliert gegen die Knöpfe und Links des Themes. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--rz-text-title-color);
    outline-offset: 3px;
}

/* Die obere Leiste ist in beiden Modi dunkel, die Kontur nimmt dort ihre Textfarbe. */
.rz-header a:focus-visible,
.rz-header button:focus-visible,
.rz-header [role="button"]:focus-visible {
    outline: 3px solid var(--rz-header-color);
    outline-offset: 3px;
}

#blazor-error-ui {
    background: var(--rz-warning);
    color: var(--rz-on-warning);
    bottom: 0;
    border-top: 2px solid var(--rz-on-warning);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.25rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

/* Der Überspringen-Link liegt über allem und erscheint nur, solange er den Fokus hat. */
.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2100;
    padding: 0.75rem 1rem;
    border: 2px solid var(--rz-text-title-color);
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-card-background-color);
    color: var(--rz-text-title-color);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Das Ziel des Links nimmt den Fokus nur an; die Kontur um die ganze Seite hilft niemandem. */
.app-page:focus-visible {
    outline: none;
}

/* Eingabefelder: Beschriftung über dem umrandeten Feld, wie im Original. */
.field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
}

/* Ausnahme: Texteingaben, Passwortfelder und Zahlenfelder füllen die Breite ihrer Zeile. Radzen macht sie nur so breit
   wie ihren Inhalt (inline-block), und jedes Feld der App soll bündig mit seiner Beschriftung abschließen. Eine Regel
   ersetzt den Inline-Stil, der an jedem Feld stand. */
.rz-textbox,
.rz-numeric {
    width: 100%;
}

.field-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Anmelden und Registrieren (Layout/AuthLayout.razor): Formular in der Mitte, ab 1024 px
   links die dunkelblaue Markenfläche. */
.auth-layout {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--rz-body-background-color);
    color: var(--rz-text-title-color);
}

.auth-brand {
    display: none;
}

/* Name und Logo (Issue 8): Die Wortmarke ist eine SVG-Datei mit festem Seitenverhältnis 3:1, das Zeichen allein ist quadratisch. */
.brand-logo {
    display: block;
    height: 2.25rem;
    width: auto;
}

.brand-logo--symbol {
    height: 1.75rem;
    margin-right: 0.5rem;
}

.auth-mobile-brand {
    align-self: flex-start;
    margin-bottom: 1.5rem;
}

.auth-mobile-brand .brand-name {
    font-size: var(--type-section-size);
    font-weight: 600;
}

.auth-brand .brand-logo {
    height: 3rem;
}

.auth-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1.5rem;
}

.auth-mode-switch {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.auth-form {
    width: 100%;
    max-width: 24rem;
}

.auth-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.auth-lead {
    margin: 0;
    font-size: var(--type-extra-size);
    color: var(--rz-text-secondary-color);
}

.auth-switch {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: var(--type-extra-size);
    color: var(--rz-text-secondary-color);
}

.auth-switch a {
    margin-left: 0.25rem;
    font-weight: 500;
    color: var(--rz-text-title-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.server-line {
    background: none;
    border: 0;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: var(--type-extra-size);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.server-line:hover {
    color: var(--rz-text-title-color);
}

.auth-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    font-size: var(--type-extra-size);
}

.auth-legal a {
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    text-underline-offset: 4px;
}

.auth-legal a:hover {
    color: var(--rz-text-title-color);
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .auth-layout {
        grid-template-columns: 1fr 1fr;
    }

    .auth-mobile-brand {
        display: none;
    }

    .auth-brand {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3rem;
        background-color: var(--rz-header-background-color);
        color: var(--rz-header-color);
    }

    .auth-brand-name {
        font-size: var(--type-section-size);
        font-weight: 600;
    }

    .auth-brand-middle {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .auth-claim {
        max-width: 28rem;
        margin: 0;
        font-size: var(--type-title-size);
        font-weight: 600;
        line-height: 1.25;
        text-wrap: balance;
    }

    .auth-pots {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--type-extra-size);
        color: var(--rz-header-color);
    }

    .auth-pots li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .auth-pot-square {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 0;
    }

    .pot-needs { background-color: var(--rz-info); }
    .pot-wants { background-color: var(--rz-warning); }
    .pot-savings { background-color: var(--rz-success); }

    .auth-tagline {
        max-width: 20rem;
        margin: 0;
        font-size: var(--type-extra-size);
        color: var(--rz-header-color);
    }
}

/* App-Layout (Layout/AppLayout.razor): untere Leiste und Plus-Knopf.
   Beide halten Abstand zur Systemleiste unten (Gestenleiste). Die App schiebt die ganze Fläche
   schon um die Systemleisten nach innen (MainActivity); env() ist die zweite Absicherung für
   WebViews, die das selbst melden, und ergibt sonst 0. */
.app-main {
    padding-bottom: calc(var(--app-bottom-bar-height) + env(safe-area-inset-bottom, 0px) + 5rem);
}

.app-bottom-bar {
    /* Alle Einträge teilen sich 360 px; die Schrift wächst nicht über das hinaus, was dort passt. */
    --type-extra-size: min(0.875rem, 3.4vw);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    box-sizing: content-box;
    height: var(--app-bottom-bar-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--rz-card-background-color);
    box-shadow: var(--rz-card-shadow);
}

.app-bottom-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    box-sizing: border-box;
    min-width: var(--tap-min);
    padding-inline: 0;
    min-height: var(--tap-min);
    height: 100%;
    color: var(--rz-text-color);
    text-decoration: none;
}

.app-bottom-item:hover {
    background-color: var(--rz-primary-lighter);
}

/* Die Kontur liegt innen, weil die Leiste am Rand des Fensters steht und eine äußere Kontur abgeschnitten würde. */
.app-bottom-item:focus-visible {
    outline-offset: -3px;
}

.app-bottom-label {
    font-size: var(--type-extra-size);
    line-height: 1;
}

/* Das offene Ziel: Farbe und fetter Text, nicht nur eine Farbe. */
.app-bottom-item-active {
    color: var(--rz-primary);
}

.app-bottom-item-active .app-bottom-label {
    font-weight: 600;
}

/* Der Plus-Knopf: RadzenFab liegt von sich aus im nächsten Rahmen, hier fest über der unteren Leiste. */
.app-fab {
    position: fixed;
    top: auto;
    left: auto;
    right: 1rem;
    bottom: calc(var(--app-bottom-bar-height) + env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 1100;
}

/* Seitenleiste (Layout/SideNavigation.razor, Spec 10): unter 1280 px ausgeblendet, ab dem Desktop links fest unter der
   oberen Leiste. Sie zeigt das volle Menü, die untere Leiste vier Ziele mit "Mehr" (Tom, 01.11.2026). */
.app-side-nav {
    display: none;
}

/* Die Einträge rollen auf niedrigen Bildschirmen; der Fuß mit dem Profil-Knopf steht außerhalb und bleibt sichtbar. */
.app-side-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
    overflow-y: auto;
}

.app-side-mode {
    padding: 0.25rem 1rem;
}

/* Die Leiste von Radzen ist erst ab dem Desktop da; das Menü des Profil-Knopfs darf aus ihr herausragen. */
.app-sidebar {
    display: none;
}

@media (min-width: 1280px) {
    .app-sidebar {
        display: block;
        overflow: visible;
    }

    .app-side-nav {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        box-sizing: border-box;
        height: 100%;
        padding: 0.75rem;
    }

    .app-bottom-bar {
        display: none;
    }
}

/* Ausnahme: Ein Eintrag der Liste auf der Seite Mehr füllt die Zeile und beginnt links; Radzens Knopf zentriert seinen Text
   und ist nur so breit wie dieser. */
.more-entry.rz-button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* Vollbild-Formulare: die Kopfzeile bleibt oben stehen, wenn der Inhalt scrollt. */
.app-form-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem -1.5rem 1rem;
    padding: 0.5rem 0.5rem;
    background-color: var(--rz-card-background-color);
    border-bottom: 1px solid var(--rz-input-line);
}

.app-form-header-title {
    flex: 1 1 auto;
}

/* Das Profilfeld mit dem Menü "wessen Zahlen" (Spec 44): in der oberen Leiste auf der Farbe der Leiste, unten in der
   Seitenleiste auf einer Karte in der Hauptfarbe; das Menü geht dort nach oben auf. Fläche, Farben und Rundung kommen aus
   dem Theme. */
.member-profile {
    position: relative;
    min-width: 0;
}

.member-profile .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    color: inherit;
}

.member-profile .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    color: inherit;
}

.member-profile-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.member-profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-profile-hint {
    font-size: var(--type-extra-size);
    line-height: var(--type-extra-line);
}

/* In der Kopfzeile ist kein Platz für den Innenabstand der Karte, und ein langer Vorname wird abgekürzt. Am Handy fällt das
   Symbol weg, damit "Haushalt" neben dem Schalter ganz zu lesen bleibt. */
.rz-header .member-profile ul.rz-profile-menu {
    padding: 0;
}

.rz-header .member-profile-name {
    max-width: 8rem;
}

@media (max-width: 599px) {
    .rz-header .member-profile-name {
        max-width: 5rem;
    }

    .rz-header .member-profile-field > .rzi {
        display: none;
    }
}

.member-profile-up .rz-card {
    color: var(--rz-on-primary);
}

/* Die Karte ist in der Hauptfarbe; die Kontur der Tab-Taste nimmt dort die Farbe auf der Hauptfarbe, sonst sieht man sie nicht. */
.member-profile-up .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper:focus-visible {
    outline: 3px solid var(--rz-on-primary);
    outline-offset: -3px;
}

/* Unten in der Leiste füllt das Feld die Karte. */
.member-profile-up ul.rz-profile-menu {
    display: block;
}

/* Der Selektor ist so schwer wie der des Themes, sonst bliebe das Menü unter dem Rand des Fensters. */
.member-profile-up ul.rz-profile-menu .rz-navigation-menu {
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-block-end: 0.25rem;
}

/* Auch die Einträge des Menüs sind Tippflächen von mindestens 44 px. */
.member-profile ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
}

/* Die gewählte Sicht: fett, ohne Balken. */
.member-menu-current {
    font-weight: 700;
}

.member-menu-reason {
    padding: 0 1rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    list-style: none;
}

/* Der Fuß der Seitenleiste mit dem Profil-Knopf (Spec 44): ganz unten, ohne Trenner. */
.app-side-footer {
    margin-top: auto;
    padding-top: 0.75rem;
}

@media (min-width: 1280px) {
    /* Ab dem Desktop steht der Knopf in der Seitenleiste, nicht mehr in der oberen Leiste. */
    .rz-header .member-profile {
        display: none;
    }
}

/* Ein Knopf, der gerade nichts bewirkt, aber erreichbar bleibt (aria-disabled statt disabled; der Grund steht daneben):
   Schrift und Rand in der Farbe für Gesperrtes. !important, weil die Regeln des Themes für Knopfart und Variante schwerer wiegen. */
.unavailable {
    color: var(--rz-text-disabled-color) !important;
    border-color: var(--rz-text-disabled-color) !important;
    cursor: default;
}

/* Ein Knopf ohne Freigabe (Spec 68): ausgegraut und ohne Wirkung, aber erreichbar; der Grund steht daneben. */
.grant-locked {
    color: var(--rz-text-disabled-color) !important;
    background-color: var(--rz-primary-lighter) !important;
    cursor: default;
    box-shadow: none;
}

/* Nur für Screenreader, zum Beispiel die Legende der Vorlagen auf der Freigaben-Seite. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Die Vorlagen einer Karte auf der Freigaben-Seite: eine Gruppe ohne eigenen Rahmen. */
.grants-presets {
    border: 0;
    margin: 0 0 0.75rem;
    padding: 0;
    min-width: 0;
}

/* Bausteine (Spec 6): Farbblock und Linientabelle. Alle Farben kommen aus der Palette des Themes,
   so gelten dieselben Regeln hell und dunkel. Auf einem Block steht immer der Haupttext (nie der Nebentext). */
.color-block {
    padding: 1rem 1.25rem;
    border: var(--rz-card-border);
    border-radius: var(--rz-card-border-radius);
    color: var(--rz-text-title-color);
}

.color-block--income {
    background-color: color-mix(in srgb, var(--rz-success) 50%, var(--rz-card-background-color));
}

.color-block--fixed {
    background-color: color-mix(in srgb, var(--rz-danger) 50%, var(--rz-card-background-color));
}

.color-block--free {
    background-color: color-mix(in srgb, var(--rz-warning) 50%, var(--rz-card-background-color));
}

.color-block-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.color-block-amount {
    margin: 0.25rem 0 0;
    font-size: clamp(1.6rem, 2.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.color-block-note {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Linien statt Schatten: eine Linie über der Tabelle und unter jeder Zeile. */
.line-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--rz-text-color);
    border-top: 1px solid var(--rz-input-line);
}

.line-table-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.5rem;
    font-weight: 650;
}

.line-table th,
.line-table td {
    padding: 0.625rem 0.5rem;
    font-weight: 400;
    text-align: left;
    border-bottom: 1px solid var(--rz-input-line);
}

.line-table-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Testseite der Bausteine: hell und dunkel nebeneinander. */
.blocks-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.blocks-panel {
    padding: 1rem;
    background-color: var(--rz-body-background-color);
    color: var(--rz-text-title-color);
    border: 1px solid var(--rz-input-line);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--rz-card-border-radius);
}

.blocks-panel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Diagramme (Spec 12): Balkendiagramm und Soll-Ist-Balken. Die Balken sind RadzenProgressBar in den Farben des Themes;
   hier stehen nur Anordnung, Höhe und Rundung. Die Füllungen tragen keinen Text; Zahlen stehen daneben im Haupttext.
   Über 100 Prozent gibt es bewusst keine Alarmfarbe: der Überschuss ist der blassere Teil desselben Balkens. */
.chart {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--rz-text-title-color);
    --rz-progressbar-height: 1.25rem;
    --rz-progressbar-border-radius: var(--rz-border-radius);
}

.chart-caption {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.chart-empty {
    margin: 0;
    padding: 1rem;
    border: var(--rz-card-border);
    border-radius: var(--rz-card-border-radius);
    background-color: var(--rz-card-background-color);
    color: var(--rz-text-secondary-color);
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chart-bar-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 0.75rem;
}

/* Die Spalte fasst "Grundbedarf" am schmalen Handy; längere Namen trennen an der Silbe statt mitten im Wort. */
.chart-bar-label {
    overflow-wrap: break-word;
    hyphens: auto;
}

.chart-bar-value,
.chart-percent {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 500;
}

.chart-target-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.chart-target-track {
    position: relative;
    display: block;
}

/* Die Soll-Marke: eine Linie bei 100 Prozent, damit der Überschuss ohne Farbe lesbar bleibt. */
.chart-target-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background-color: var(--rz-text-title-color);
}

.chart-target-summary,
.chart-over-note {
    margin: 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.chart-over-note {
    color: var(--rz-text-secondary-color);
}

/* Plan-Übersicht (Spec 23): die Monate als Liste von Links. Linien statt Schatten wie in der Linientabelle; der laufende
   Monat liegt auf der Fläche von Frei mit dem Haupttext darauf. Jede Zeile ist mindestens 3 rem hoch zum Tippen. */
.plan-months {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rz-input-line);
}

.plan-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--rz-input-line);
    color: var(--rz-text-title-color);
    text-decoration: none;
}

.plan-month:hover {
    background-color: var(--rz-primary-lighter);
}

.plan-month--current,
.plan-month--current:hover {
    background-color: color-mix(in srgb, var(--rz-warning) 50%, var(--rz-card-background-color));
}

.plan-month-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
    font-weight: 500;
}

.plan-month-badge {
    font-size: 0.875rem;
    font-weight: 700;
}

.plan-month-free {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.plan-month-free--none {
    color: var(--rz-text-secondary-color);
}

.plan-month--current .plan-month-free--none {
    color: var(--rz-text-title-color);
}

/* ===== Dialog: Schritt-Dialog (Spec 11) =====
   Über 599 px ein Dialog von höchstens 640 px Breite, bis 599 px füllt er den Bildschirm.
   Nur der Inhalt rollt; Kopf mit Fortschritt und die Knöpfe unten bleiben an ihrer Stelle. */
/* Der Abbrechen-Knopf behält seine Breite; die Überschrift daneben bricht um. */
.step-dialog-head .duofy-button {
    flex: none;
    white-space: nowrap;
}

.step-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.step-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.step-dialog-progress {
    margin: 0.25rem 0 0;
    color: var(--rz-text-title-color);
    font-size: 0.875rem;
}

/* Der Balken wiederholt nur, was der Text sagt; deshalb ist er für Vorlese-Programme verborgen. */
.step-dialog-bar {
    display: flex;
    gap: 4px;
}

.step-dialog-bar-segment {
    flex: 1 1 0;
    height: 4px;
    background-color: var(--rz-input-line);
}

.step-dialog-bar-segment--reached {
    background-color: var(--rz-text-title-color);
}

.step-dialog-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step-dialog-step[hidden] {
    display: none;
}

.step-field {
    display: flex;
    flex-direction: column;
}

/* Fehler wie überall: Haupttext mit Tintenlinie auf Korall, nie Korall als Schrift. */
.step-field-error {
    margin-top: 0.375rem;
    padding: 0.25rem 0.5rem;
    color: var(--rz-text-title-color);
    background-color: var(--rz-danger-lighter);
    border-left: 4px solid var(--rz-text-title-color);
    font-size: 0.875rem;
}

/* Zurück links, Weiter rechts; im ersten Schritt hält der Platzhalter die linke Stelle frei. */
.step-dialog-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.step-dialog-demo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

/* Monatsseite (Spec 24): Tabs, Blöcke der Übersicht und ihre Listen. Alle Farben kommen aus der Palette des Themes. */
.line-table-lead,
.line-table-trail {
    width: 1%;
    white-space: nowrap;
}

/* Die Zeile mit den Buchungen eines Postens (Spec 51, R8); die Zeile darüber behält ihre Linie. */
.line-table-below {
    padding-top: 0;
}

.position-bookings summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
}

.booking-kind {
    margin-inline-end: 0.375rem;
}

.account-open {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.line-table-detail {
    display: block;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

/* Am schmalen Handy passen Bezeichnung, Betrag und Plakette oder Knöpfe nicht nebeneinander: Die letzte Spalte bekommt
   eine eigene Zeile. Die Rollen im Markup von LineTable halten die Tabelle für Vorlese-Programme zusammen. */
@media (max-width: 479.98px) {
    .line-table,
    .line-table tbody,
    .line-table-caption {
        display: block;
    }

    .line-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--rz-input-line);
    }

    .line-table th,
    .line-table td {
        border-bottom: 0;
    }

    .line-table-label {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .line-table-lead {
        flex: none;
        width: auto;
    }

    .line-table-below {
        flex: 1 0 100%;
        width: auto;
    }

    /* Bewegungen am Konto: der Text in einer eigenen Zeile, darunter Betrag und beide Knöpfe zusammen. */
    .bookings-table .data-row-frame > * > .flex-grow-1 {
        flex: 1 1 100%;
    }

    .bookings-table .data-row-frame > * > .data-column-4 {
        margin-inline-end: auto;
    }

    .line-table-trail {
        flex: 1 0 100%;
        width: auto;
        padding-top: 0;
        white-space: normal;
    }

    /* Ohne Inhalt nimmt die Betragsspalte keinen Platz weg. */
    .line-table-amount:empty {
        display: none;
    }

    /* Konten, Verträge, Buchungen: Was nicht in die Reihe passt, rutscht in die nächste, statt den Bildschirm zu verlassen.
       Das !important schlägt die Einstellung des Stapels. */
    .data-row-frame > * {
        flex-wrap: wrap !important;
    }

    .data-row-frame > * > .flex-grow-1 {
        flex: 1 1 8rem;
        min-width: 0;
    }
}

/* Vier Tabs passen am schmalen Handy nicht in eine Reihe; sie brechen um, statt abgeschnitten zu werden. */
.month-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--rz-input-line);
}

.month-tab {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--rz-text-title-color);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.month-tab[aria-selected="true"] {
    border-bottom-color: var(--rz-text-title-color);
    font-weight: 700;
}

.month-tab:focus-visible {
    outline: 3px solid var(--rz-text-title-color);
    outline-offset: -3px;
}

/* Die Blöcke stehen auf dem Handy untereinander und ab 600 px nebeneinander. */
.month-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
    .month-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.month-section {
    margin: 0 0 1.5rem;
}

.month-section-title {
    margin: 0 0 0.5rem;
    font-size: var(--type-section-size, 1.25rem);
    font-weight: 650;
}

.month-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.month-due-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.375rem;
    border: 1px solid var(--rz-text-title-color);
    border-radius: var(--rz-border-radius);
    font-size: 0.875rem;
    font-weight: 700;
}

.month-hint {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

/* ===== Breite Seiten ab 1280 px (Tom, 01.11.2026) =====
   Darunter zeigt keine dieser Regeln Wirkung: Karten und Reihenfolge bleiben wie auf dem Handy. Die Seiten behalten
   ihren Aufbau; die Tabellen entstehen aus denselben Elementen. data-row wird ein Raster, data-cells löst sich darin
   auf, damit seine Kinder Spalten werden, und data-column-N legt die Spalte fest (auch wenn ein Knopf einmal fehlt).
   Die Kopfzeile ist nur fürs Auge: Vorlese-Programme lesen jede Zeile wie auf dem Handy. */
.data-table-head {
    display: none;
}

/* Ein Betrag bricht nie zwischen Zahl und Währung. */
.data-amount {
    white-space: nowrap;
}

@media (min-width: 1280px) {
    /* Die doppelten Klassen und !important schlagen Anzeige und Abstand der Stapel von Radzen. */
    .data-table.data-table {
        gap: 0 !important;
        border-top: 1px solid var(--rz-input-line);
    }

    .data-row.data-row,
    .data-table-head {
        display: grid !important;
        grid-template-columns: var(--data-columns);
        column-gap: 1rem;
        align-items: center;
    }

    .data-table-head {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--rz-input-line);
        color: var(--rz-text-secondary-color);
        font-size: 0.875rem;
        font-weight: 650;
    }

    .data-row-frame.data-row-frame {
        padding: 0.25rem 0.75rem !important;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .data-row-frame:hover {
        background-color: var(--rz-primary-lighter);
    }

    .data-cells.data-cells {
        display: contents !important;
    }

    .data-separator {
        display: none;
    }

    .data-amount.data-amount {
        justify-self: end;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .data-column-1 { grid-column: 1; }
    .data-column-2 { grid-column: 2; }
    .data-column-3 { grid-column: 3; }
    .data-column-4 { grid-column: 4; }
    .data-column-5 { grid-column: 5; }
    .data-column-6 { grid-column: 6; }
    .data-column-7 { grid-column: 7; }

    .data-row > .rz-button,
    .data-row > .rz-badge {
        justify-self: start;
    }

    /* Das Symbol hat eine eigene Spalte zwischen Stern und Name. */
    .accounts-table .account-icon {
        grid-column: 2;
    }

    .accounts-table {
        --data-columns: 2.75rem 2rem minmax(0, 2fr) minmax(0, 1fr) 10rem 2.75rem 8rem;
    }

    .commitments-table {
        --data-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 8rem 2.75rem 7rem;
    }

    .bookings-table {
        --data-columns: 7rem minmax(0, 2fr) minmax(0, 2fr) 9rem 2.75rem 2.75rem;
    }

    .members-table {
        --data-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 7rem 2.75rem;
    }

    /* Buchungen: Monat, Filter und Summen in einer Reihe. */
    .bookings-top {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 1fr) minmax(24rem, 2fr);
        column-gap: var(--block-gap);
        align-items: center;
        margin-bottom: var(--block-gap);
    }

    /* Die Monate als mehrere Spalten. */
    .plan-months.page-wide {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
        column-gap: var(--block-gap);
    }

    /* Monatsübersicht: die Abschnitte in zwei Spalten. */
    .month-sections {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--block-gap) * 2);
        align-items: start;
    }

    /* Monat, Tab Plan: Posten links, Summen und Übertrag rechts. Ohne geänderte Verträge beginnen beide Spalten oben,
       die letzte nimmt den Rest der Höhe, damit rechts keine Lücke zwischen den Kästen entsteht. */
    .plan-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24rem;
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: var(--block-gap);
        align-items: start;
    }

    .plan-layout > .plan-layout-top {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .plan-layout > .plan-groups {
        grid-column: 1;
        grid-row: 1 / span 5;
    }

    .plan-layout:has(> .plan-layout-top) > .plan-groups {
        grid-row: 2 / span 5;
    }

    .plan-layout > .plan-layout-side {
        grid-column: 2;
    }

    /* Die Töpfe nebeneinander, sobald zwei hineinpassen. */
    .plan-groups {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
        column-gap: var(--block-gap);
        align-items: start;
    }

    /* Blättern zwischen den Monaten: Die Pfeile bleiben beim Monat, statt an die Ränder der breiten Seite zu rücken. */
    .month-nav.month-nav {
        justify-content: center !important;
        gap: 1.5rem;
    }

    /* Der Betrag bleibt am rechten Rand, die Bezeichnung nimmt den freien Platz. */
    .line-table-amount {
        width: 1%;
    }

    /* Bezeichnung und Nebentext einer Zeile in eigenen Spalten, wo die Tabelle Platz hat; die Posten im Plan tragen
       rechts schon Beträge und Knöpfe, dort bleibt der Nebentext unter der Bezeichnung. */
    .month-sections .line-table-text,
    .month-bookings .line-table-text {
        display: grid;
        grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
        column-gap: 1rem;
        align-items: baseline;
    }

    /* Haushalt: die Karte links, Mitglieder und Einladungen rechts. */
    .household-columns {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: var(--block-gap);
        align-items: start;
    }

    .household-paste-row {
        align-self: start;
    }
}

/* Die Startseite (Spec 33): Begrüßung im Farbblock, darunter die Blöcke. Am Handy eine Spalte, ab dem Desktop (1280 px) zwei. */
.start-greeting {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
}

.start-hero {
    margin-bottom: 1rem;
}

.start-hero .start-greeting {
    margin-bottom: 0.75rem;
}

/* minmax(0, ...): Sonst bestimmt eine breite Tabelle die Spalte, und der Kasten läuft am Handy aus dem Bild. */
.start-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1280px) {
    .start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

.start-section {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rz-input-line);
    border-radius: var(--rz-card-border-radius);
}

.start-grid .start-section {
    margin-bottom: 0;
}

.start-bars {
    display: grid;
    gap: 0.75rem;
}

/* Der Link eines Blocks: unterstrichen, damit er auch ohne Farbe als Link zu erkennen ist. */
.start-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--rz-text-title-color);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.start-link:focus-visible {
    outline: 3px solid var(--rz-text-title-color);
    outline-offset: 2px;
}

/* Einwilligungs-Baustein (Issue #35): am unteren Rand, beide Knöpfe gleich groß. */
/* Die Leiste kann zwei Dienste zeigen und wird hoch: Sie endet über der unteren Leiste, neben der Seitenleiste und unter
   der App-Leiste, damit Navigation und Profilknopf erreichbar bleiben. Was nicht passt, rollt in ihr selbst. */
body:has(.app-bottom-bar) {
    --consent-bottom: calc(var(--app-bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

.consent-banner {
    /* Im Fluss am Ende der Seite, nicht fest über ihr: So verdeckt sie auf dem schmalen Login den Anmelden-Knopf nicht,
       denn die Seite rollt bis über die Leiste. Beim Rollen bleibt sie am unteren Rand haften. */
    position: sticky;
    bottom: var(--consent-bottom, 0px);
    z-index: 1400;
    box-sizing: border-box;
    max-height: calc(100dvh - var(--consent-bottom, 0px) - var(--app-header-height));
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem var(--page-gutter);
    background-color: var(--rz-card-background-color);
    color: var(--rz-text-title-color);
    border-top: 1px solid var(--rz-input-line);
}

@media (min-width: 1280px) {
    body:has(.app-side-nav) .consent-banner {
        margin-inline-start: var(--side-nav-width);
    }
}

/* Jeder angebotene Dienst ist eine Zeile mit eigenem Text und eigenen Knöpfen (Issue #36). */
.consent-item {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.consent-text {
    flex: 1 1 24rem;
    margin: 0;
}

.consent-actions {
    display: flex;
    gap: 0.75rem;
}

.consent-actions .rz-button {
    min-width: 8rem;
    min-height: var(--tap-min);
}

.consent-change .rz-button {
    min-height: var(--tap-min);
}

.consent-change {
    display: flex;
    justify-content: center;
    padding-block: 0.25rem;
    font-size: var(--type-extra-size);
}

/* Richtwerte je Person im Haushaltsplan (Issue #28): untereinander, am PC (ab 1280 px) nebeneinander. Keine Warnfarben. */
.guideline-summary {
    margin: 0 0 1rem;
}

.guideline-people {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.guideline-person-name {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

@media (min-width: 1280px) {
    .guideline-people {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        align-items: start;
    }
}

/* Konten mit Symbol (Issues 14 und 16): Eine Gruppe von Optionsfeldern, die Optionsfelder selbst bleiben für Tastatur und
   Vorlese-Programme da (versteckt, nicht entfernt). Der Name bricht um und wird nie abgeschnitten. Die gewählte Option hat
   einen dickeren Rand, fetten Namen und ein Häkchen, nicht nur eine Farbe. */
.account-select {
    min-width: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
}

.account-select-legend {
    padding: 0;
    margin-bottom: 0.25rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.account-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.account-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rz-input-line);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-color);
    cursor: pointer;
}

.account-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.account-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.account-option-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-option:has(input:checked) {
    border: 2px solid var(--rz-text-color);
    padding: calc(0.625rem - 1px) calc(0.75rem - 1px);
    font-weight: 650;
}

.account-option:has(input:checked)::after {
    content: "\2713";
    margin-left: auto;
}

.account-option:has(input:focus-visible) {
    outline: 3px solid var(--rz-text-color);
    outline-offset: 2px;
}

/* Zahlungsart als Symbol-Knöpfe (Issue 15): Symbol über dem Text, wie die Konten eine Gruppe von Optionsfeldern, die für
   Tastatur und Vorlese-Programme da bleiben (versteckt, nicht entfernt). Der Text bricht um. Die gewählte Option hat
   einen dickeren Rand, fetten Text und ein Häkchen, nicht nur eine Farbe. */
.payment-select {
    min-width: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.payment-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--rz-input-line);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-title-color);
    text-align: center;
    cursor: pointer;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.payment-icon {
    display: inline-flex;
}

.payment-option-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
}

.payment-option:has(input:checked) {
    border: 2px solid var(--rz-text-title-color);
    padding: calc(0.75rem - 1px) calc(0.5rem - 1px);
    font-weight: 650;
}

.payment-option:has(input:checked)::after {
    content: "\2713";
    position: absolute;
    top: 0.125rem;
    right: 0.375rem;
    font-size: 0.875rem;
}

.payment-option:has(input:focus-visible) {
    outline: 3px solid var(--rz-text-title-color);
    outline-offset: 2px;
}

/* Buchungsdialog (Issue #21): die Art als Reihe, jede Zeile der Buchung als abgesetzter Block. */
.booking-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.booking-line {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--rz-input-line);
    border-radius: var(--rz-card-border-radius);
}

.booking-line-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.booking-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Das Element nimmt den freien Platz in seinem Stapel. */
.flex-grow-1 {
    flex-grow: 1;
}

/* ===== Kleine Hilfsklassen ===== Radzen hat für diese Fälle keinen Baustein und keine Variable; jede Klasse nennt ihren Grund. */

/* Der QR-Code bleibt weiß, auch im Dunkelmodus, damit er sich scannen lässt. Das ist die einzige feste Farbe außerhalb des Themes
   (Tom, Issue #72). */
.qr-code {
    width: 240px;
    max-width: 100%;
    background: #ffffff;
}

.qr-code-small {
    width: 160px;
}

/* Ein langer Link oder eine lange Adresse ohne Leerstellen bricht an jeder Stelle um, statt die Zeile zu sprengen. */
.long-link {
    word-break: break-all;
}

/* Ein Knopf in einer senkrechten Stapelung steht links statt über die ganze Breite gedehnt (RadzenStack kennt das nur für alle Kinder). */
.align-start {
    align-self: flex-start;
}

/* Ein Element in einer Zeile nimmt den freien Platz und darf schmaler werden als sein Inhalt (sonst läuft ein langer Name aus der Karte);
   fill-wrap darf zusätzlich in die nächste Zeile umbrechen, wenn weniger als 10 rem bleiben. */
.fill {
    flex: 1 1 auto;
    min-width: 0;
}

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

/* Rechtstexte und Lizenzen sind Fließtext mit Zeilenumbrüchen aus der Quelle; lange Wörter und Adressen brechen um. */
.plain-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.plain-text-small {
    font-size: 0.75rem;
    margin: 0.5rem 0 0;
}

/* Die Größe der Symbole neben dem Namen von Konto und Zahlart: RadzenIcon hat keinen Größenparameter. */
.account-icon .rzi {
    font-size: 22px;
}

.payment-icon .rzi {
    font-size: 28px;
}

/* Der gefüllte Stern des Standardkontos: Material Symbols füllt ein Zeichen nur über diese Schrifteinstellung. */
.rzi.icon-filled {
    font-variation-settings: 'FILL' 1;
}

/* Ausnahme: Das Feld ist das echte select des Geräts (auf dem Handy öffnet sich die Auswahl des Systems, R6); RadzenDropDown kann das
   nicht. Rand, Rundung und Abstand kommen aus den Variablen des Themes. */
.native-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--rz-base-400);
    border-radius: var(--rz-input-border-radius);
    background: transparent;
    color: inherit;
    font: inherit;
}

/* Der Schritt-Dialog: Kopf und Knöpfe bleiben stehen, nur die Schritte rollen. Im Browser höchstens 60 vh hoch (Tom: darf als Ausnahme
   bleiben, damit ein Dialog nie höher ist als der Bildschirm), in der App füllt er den ganzen Bildschirm. */
.step-dialog {
    display: flex;
    flex-direction: column;
}

.step-dialog-app {
    height: 100%;
    padding: 0.5rem 0.25rem;
}

.step-dialog-top {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.step-dialog-scroll {
    overflow-y: auto;
    max-height: 60vh;
    padding: 1rem 0;
}

.step-dialog-scroll-app {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.step-dialog-foot {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-300);
}