/* ============================================================================
   Aurora Glass — die Komponenten (D21).

   Radzen bleibt. Was hier steht, ist Feinschliff auf den Klassen, die
   material-base.css ohnehin ausgibt; die Grundfarben kommen ueber die
   --rz-*-Zuordnung in tokens.css.

   ECHTES GLAS KOSTET, UND ZWAR JE ELEMENT. `backdrop-filter` laesst den
   Compositor den Hintergrund je Flaeche erneut filtern. In der Eintragsliste
   ist jede Zeile eine RadzenCard — bei dreissig Eintraegen waeren das dreissig
   Filterdurchgaenge je Bild, auf dem Geraet, auf dem SplitPilot laeuft: einem
   Telefon. Deshalb tragen nur die WENIGEN, GROSSEN und MEIST STEHENDEN Flaechen
   echtes Glas (Kopfzeile, Seitenleiste, Monatskopf, Dialog, Meldung); alles
   andere bekommt eine durchscheinende Fuellung, die dasselbe Bild ergibt und
   nur aus einer Mischung besteht.
   ============================================================================ */

/* ---------------------------------------------------------------- Geruest -- */

.rz-layout,
.rz-body {
    background: transparent;
}

.rz-header {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border-bottom: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow-1);
}

.rz-sidebar {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border-right: 1px solid var(--sp-border);
}

/* ------------------------------------------------------ Sichere Bereiche -- */

/* AM HOMESCREEN GESTARTET LIEGT DIE SEITE UNTER DER STATUSLEISTE, und das ist so
   gewollt: App.razor setzt viewport-fit=cover und black-translucent, damit die
   Kopfzeile hinter Uhr und Batterie durchlaeuft statt unter einem schwarzen Balken
   zu beginnen (D28). Ohne Polsterung landet dann aber auch ihr INHALT dort — und
   die Statusleiste nimmt jede Beruehrung selbst. Der Menueknopf stand am iPhone
   sichtbar da und war trotzdem nicht zu treffen: nicht zu klein, sondern zu hoch
   (D34).

   env() liefert ueberall sonst 0: in Safari mit Adressleiste, am Desktop, unter
   Android. Die Regeln brauchen deshalb keine Abfrage — sie tun nur dort etwas, wo
   etwas zu tun ist. Der Rueckfall 0px gilt Browsern, die env() nicht kennen; ohne
   ihn fiele die ganze Deklaration aus.

   Die Kopfzeile ist im Raster von Radzen eine auto-Zeile, sie waechst also mit;
   darunter bleibt die Aufteilung, wie sie war. */
.rz-header {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Quer gehalten liegt die Kerbe links oder rechts, unten sitzt der Streifen fuer die
   Wischgeste. Beides schnitte sonst in die Liste — den Bereich, in dem gescrollt und
   getippt wird. Radzens eigene Polsterung bleibt stehen, der Einzug kommt dazu. */
.rz-body {
    padding-bottom: calc(var(--rz-layout-body-padding, 1rem) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--rz-layout-body-padding, 1rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--rz-layout-body-padding, 1rem) + env(safe-area-inset-right, 0px));
}

/* Die Seitenleiste steht am linken Rand und reicht bis unten: dort liegt "Abmelden",
   und darunter der Wischstreifen. */
.rz-sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

/* Die beiden Symbolknoepfe der Kopfzeile — Seitenleiste und Design — sind
   Variant.Text und standen damit fast unsichtbar auf dem Glas. */
.rz-sidebar-toggle,
.rz-header .rz-button.rz-variant-text {
    border-radius: var(--sp-radius-sm);
    color: var(--sp-muted);
    transition: background var(--sp-base) var(--sp-ease),
                color var(--sp-base) var(--sp-ease);
}

.rz-sidebar-toggle:hover,
.rz-header .rz-button.rz-variant-text:hover {
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

/* TEXTKNOEPFE BRAUCHEN IHRE EIGENE ZEILE. Radzen adressiert sie mit
   .rz-button.rz-variant-text.rz-light (0,3,0) und schlaegt damit die Regel fuer
   .rz-button.rz-light darunter — uebrig blieb dessen Vorgabe #EEEEEE, also weiss
   auf weiss. Sichtbar war es nur im hellen Modus und nur ausserhalb der Kopfzeile,
   wo eine eigene Regel es schon abfing: der Jahres-Knopf unter "Nach Jahr" stand
   leer da. */
.rz-button.rz-variant-text.rz-light,
.rz-button.rz-variant-text.rz-base {
    background: transparent;
    border-color: transparent;
    color: var(--sp-muted);
}

.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover,
.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

/* Der Name des angemeldeten Kontos steht als Link in der Kopfzeile. Als Marken-
   farbe waere er dort ein Handlungsangebot; er ist aber eine Statusanzeige. */
.rz-header .rz-link {
    color: var(--sp-muted);
    font-weight: 500;
}

.rz-header .rz-link:hover {
    color: var(--sp-accent);
}

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

.rz-panel-menu .rz-navigation-item-link {
    border-radius: var(--sp-radius-sm);
    color: var(--sp-muted);
    font-weight: 500;
    margin: 2px 8px;
    transition: background var(--sp-base) var(--sp-ease),
                color var(--sp-base) var(--sp-ease);
}

.rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--sp-glass-2);
    color: var(--sp-text);
}

/* Die aktive Seite traegt Flaeche und einen Streifen an der Kante. Nur Fettung
   waere auf einem Telefon im Sonnenlicht kaum zu sehen. */
.rz-panel-menu .rz-navigation-item-link.active,
.rz-panel-menu .rz-navigation-item-link.rz-state-focused {
    background: var(--sp-accent-soft);
    box-shadow: inset 3px 0 0 0 var(--sp-accent);
    color: var(--sp-accent);
}

.rz-panel-menu .rz-navigation-item-link .rz-navigation-item-icon {
    color: inherit;
}

/* ---------------------------------------------------------------- Flaechen -- */

.rz-card,
.rz-panel {
    background: var(--sp-glass);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-2);
    transition: transform var(--sp-base) var(--sp-ease),
                box-shadow var(--sp-base) var(--sp-ease),
                border-color var(--sp-base) var(--sp-ease);
}

/* Die Umriss-Fassung wird in der ganzen Anwendung benutzt (Variant.Outlined).
   Sie bleibt flacher — sonst schwebt jede Zeile der Liste. */
.rz-card.rz-variant-outlined,
.rz-panel.rz-variant-outlined {
    box-shadow: var(--sp-shadow-1);
}

/* Anheben nur dort, wo die Karte wirklich anklickbar ist. Eine Liste, in der
   jede Zeile beim Ueberfahren wandert, ist unruhig. */
a > .rz-card:hover,
.rz-card[role="button"]:hover,
.splitpilot-klickbar:hover {
    border-color: var(--sp-border-strong);
    box-shadow: var(--sp-shadow-3);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------- Knoepfe -- */

/* KEIN position UND KEIN overflow AUF JEDEM KNOPF. Beides braucht nur der
   Lichtstreifen des Hauptknopfes, und beides ist teuer erkauft: der Ausloeser
   des Datumswaehlers traegt selbst .rz-button und wird von Radzen `absolute`
   an den rechten Rand gesetzt. Ein `position: relative` von hier warf ihn
   zurueck in den Textfluss, wo er hinter dem 144 px breiten Feld in die zweite
   Zeile brach — im Bild ein Kalendersymbol ueber der Zeile und eine Filterzeile,
   die ploetzlich 68 statt 40 px hoch war. */
.rz-button {
    border-radius: var(--sp-radius-sm);
    font-family: var(--sp-font);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
    transition: transform var(--sp-fast) var(--sp-ease),
                box-shadow var(--sp-base) var(--sp-ease),
                background var(--sp-base) var(--sp-ease),
                color var(--sp-base) var(--sp-ease);
}

.rz-button:not(.rz-state-disabled):hover {
    transform: translateY(-1px);
}

.rz-button:not(.rz-state-disabled):active {
    transform: translateY(0);
    transition-duration: 60ms;
}

.rz-button.rz-primary,
.rz-button.rz-secondary {
    background-image: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px -10px var(--sp-accent);
    color: var(--sp-on-accent);
}

.rz-button.rz-primary:not(.rz-state-disabled):hover,
.rz-button.rz-secondary:not(.rz-state-disabled):hover {
    box-shadow: 0 10px 26px -10px var(--sp-accent);
}

/* Ein Lichtstreifen wandert einmal ueber den Hauptknopf. Er ist die einzige
   Zierbewegung dieser Oberflaeche und sitzt genau auf der Handlung, die die
   Anwendung ausmacht: einen Beleg fotografieren. */
.rz-button.rz-primary::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    bottom: 0;
    content: "";
    left: -60%;
    position: absolute;
    top: 0;
    transform: skewX(-18deg);
    transition: left 700ms var(--sp-ease);
    width: 45%;
}

.rz-button.rz-primary:not(.rz-state-disabled):hover::after {
    left: 130%;
}

.rz-button.rz-light,
.rz-button.rz-base {
    background: var(--sp-glass-2);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
}

.rz-button.rz-light:not(.rz-state-disabled):hover {
    background: var(--sp-solid);
    border-color: var(--sp-border-strong);
}

.rz-button.rz-danger {
    background: transparent;
    border: 1px solid var(--sp-neg);
    color: var(--sp-neg);
}

.rz-button.rz-danger:not(.rz-state-disabled):hover {
    background: var(--sp-neg);
    color: #fff;
}

.rz-button.rz-state-disabled {
    box-shadow: none;
    opacity: .45;
}

/* ---------------------------------------------------------------- Eingaben -- */

.rz-textbox,
.rz-inputtext,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-textarea {
    background: var(--sp-glass-2);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text);
    font-family: var(--sp-font);
    transition: border-color var(--sp-base) var(--sp-ease),
                box-shadow var(--sp-base) var(--sp-ease),
                background var(--sp-base) var(--sp-ease);
}

.rz-textbox:hover,
.rz-inputtext:hover,
.rz-dropdown:hover,
.rz-datepicker:hover,
.rz-numeric:hover {
    border-color: var(--sp-border-strong);
}

.rz-textbox:focus,
.rz-inputtext:focus,
.rz-textarea:focus,
.rz-dropdown.rz-state-focused,
.rz-datepicker.rz-state-focused,
.rz-numeric.rz-state-focused {
    background: var(--sp-solid);
    border-color: var(--sp-accent);
    box-shadow: var(--sp-glow);
    outline: none;
}

/* ZUSAMMENGESETZTE FELDER: DIE HUELLE IST DIE BOX, DAS INNERE FELD NICHT.
   Dropdown, Datumswaehler und Zahlenfeld sind Huellen, und ihr innerer Wert
   traegt selbst die Klasse .rz-inputtext — die Regel oben gab damit beiden
   einen Rahmen und einen Grund. Im Bild ist das eine Box in einer Box, und
   beim Datumswaehler kam es teurer: das innere Feld fuellte 142 von 144 px,
   der 24 px breite Kalenderknopf brach in die zweite Zeile, und die ganze
   Filterzeile wurde 68 statt 40 px hoch. */
.rz-dropdown .rz-dropdown-label,
.rz-datepicker .rz-inputtext,
.rz-numeric .rz-inputtext,
.rz-autocomplete .rz-inputtext {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Das innere Feld bringt seine volle Hoehe mit; der Rahmen der Huelle kam
   darauf, und der Datumswaehler stand damit 42 px hoch neben 40 px hohen
   Dropdowns. Aus der Polsterung gerechnet passt es wieder in die Zeile. */
.rz-datepicker .rz-inputtext {
    height: auto;
}

/* Die aufklappenden Flaechen sind klein und stehen nur kurz — hier lohnt Glas. */
.rz-dropdown-panel,
.rz-datepicker-panel,
.rz-autocomplete-panel {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-3);
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-highlight {
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

/* ---------------------------------------------------------------- Schalter -- */

/* Die Spur IST .rz-switch; einen -bar-Knoten gibt es nicht. Gesetzt wird ueber
   die Variablen des Pakets, damit auch der Griff und der Fokusring mitziehen. */
:root {
    --rz-switch-background-color:                   var(--sp-border-strong);
    --rz-switch-circle-background-color:            var(--sp-solid);
    --rz-switch-checked-circle-background-color:    #FFFFFF;
    --rz-switch-focus-outline:                      2px solid var(--sp-accent);
}

.rz-switch {
    border-radius: var(--sp-radius-pill);
    transition: background var(--sp-base) var(--sp-ease);
}

.rz-switch .rz-switch-circle {
    transition: transform var(--sp-base) var(--sp-ease),
                background var(--sp-base) var(--sp-ease);
}

.rz-switch.rz-switch-checked {
    background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
}

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

.rz-badge {
    border-radius: var(--sp-radius-pill);
    font-family: var(--sp-font);
    font-weight: 600;
    letter-spacing: 0;
    padding: .28rem .6rem;
}

/* Die Zustaende aus D4 lesen sich als Kontur und nicht als Farbblock: in einer
   Liste stehen bis zu fuenf Plaketten je Zeile nebeneinander, und fuenf volle
   Flaechen ergeben ein Konfetti, in dem keine mehr auffaellt. */
.rz-badge.rz-badge-success {
    background: color-mix(in srgb, var(--sp-pos) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-pos) 40%, transparent);
    color: var(--sp-pos);
}

.rz-badge.rz-badge-warning {
    background: color-mix(in srgb, var(--sp-warn) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-warn) 44%, transparent);
    color: var(--sp-warn);
}

.rz-badge.rz-badge-danger {
    background: color-mix(in srgb, var(--sp-neg) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-neg) 42%, transparent);
    color: var(--sp-neg);
}

.rz-badge.rz-badge-info {
    background: var(--sp-accent-soft);
    border: 1px solid color-mix(in srgb, var(--sp-accent) 42%, transparent);
    color: var(--sp-accent);
}

.rz-badge.rz-badge-light {
    background: var(--sp-glass-2);
    border: 1px solid var(--sp-border);
    color: var(--sp-muted);
}

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

.rz-alert {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-accent);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-1);
    color: var(--sp-text);
}

/* Die Schwere steht als .rz-warning/.rz-danger/.rz-success neben .rz-alert —
   dieselben Klassen wie am Knopf, nicht .rz-alert-warning. */
.rz-alert.rz-warning { border-left-color: var(--sp-warn); }
.rz-alert.rz-danger  { border-left-color: var(--sp-neg); }
.rz-alert.rz-success { border-left-color: var(--sp-pos); }
.rz-alert.rz-info    { border-left-color: var(--sp-accent); }

/* ----------------------------------------------------------------- Dialoge -- */

.rz-dialog-wrapper .rz-dialog {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border: 1px solid var(--sp-border-strong);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-3);
}

.rz-dialog-titlebar {
    background: transparent;
    border-bottom: 1px solid var(--sp-border);
    font-weight: 700;
}

.rz-dialog-mask {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: color-mix(in srgb, var(--sp-bg) 62%, transparent);
}

/* --------------------------------------------------------------- Meldungen --

   ZWEI FALLEN, UND BEIDE SAHEN GLEICH AUS. Die Platte hinter der Meldung
   gehoert der Huelle und nicht dem Kasten; sie stand auf --rz-white und ist in
   tokens.css leergeraeumt — ohne das lag das Glas hier auf Weiss.

   Und die Schwere haengt AN DER HUELLE: Radzen schreibt sie als
   .rz-notification-item-wrapper.rz-notification-success, nicht an den Kasten.
   Dieselbe Verwechslung wie bei den Hinweisen weiter oben — die farbige Kante
   ist deshalb nie erschienen. */

.rz-notification .rz-notification-item {
    backdrop-filter: var(--sp-blur);
    -webkit-backdrop-filter: var(--sp-blur);
    background: var(--sp-glass);
    border: 1px solid var(--sp-border-strong);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-3);
    color: var(--sp-text);
}

.rz-notification .rz-notification-success .rz-notification-item { border-left: 3px solid var(--sp-pos); }
.rz-notification .rz-notification-warn    .rz-notification-item { border-left: 3px solid var(--sp-warn); }
.rz-notification .rz-notification-error   .rz-notification-item { border-left: 3px solid var(--sp-neg); }
.rz-notification .rz-notification-info    .rz-notification-item { border-left: 3px solid var(--sp-accent); }

/* Die Ueberschrift traegt die Farbe der Schwere, der Rumpf die Schriftfarbe.
   Radzen faerbt beide gleich — dann ist die Meldung entweder ganz gruen oder
   ganz grau, und die Schwere ist entweder aufdringlich oder gar nicht da. */
.rz-notification .rz-notification-item .rz-notification-message { color: var(--sp-text); }
.rz-notification .rz-notification-success .rz-notification-title { color: var(--sp-pos); }
.rz-notification .rz-notification-warn    .rz-notification-title { color: var(--sp-warn); }
.rz-notification .rz-notification-error   .rz-notification-title { color: var(--sp-neg); }
.rz-notification .rz-notification-info    .rz-notification-title { color: var(--sp-accent); }

/* ------------------------------------------------------------------- Rest -- */

.rz-link {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    gap: .35rem;
    color: var(--sp-accent);
    font-weight: 500;
    text-decoration-color: color-mix(in srgb, var(--sp-accent) 35%, transparent);
    text-underline-offset: 3px;
    transition: color var(--sp-base) var(--sp-ease),
                text-decoration-color var(--sp-base) var(--sp-ease);
}

.rz-link:hover {
    color: var(--sp-accent-hover);
    text-decoration-color: currentColor;
}

.rz-progressbar-circular circle {
    stroke: var(--sp-accent);
}

/* Ueberschriften: enger gesetzt als die Vorgabe, damit sie als Titel und nicht
   als grosser Fliesstext lesen. */
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.14;
}

.rz-text-subtitle1, .rz-text-subtitle2 {
    font-weight: 600;
    letter-spacing: -0.012em;
}

.rz-text-caption {
    letter-spacing: 0.005em;
}

/* ============================================================================
   Am Telefon (D35).

   Alles, was sich unterhalb von 768 px an den Radzen-Komponenten aendert. Es steht
   am Ende der Datei, damit es bei gleicher Spezifitaet gewinnt.

   DIE GRENZE IST ABGELESEN UND NICHT GEWAEHLT. Radzen klappt bei genau 768 px die
   Seitenleiste ein (.rz-sidebar-responsive) und stellt die DataGrids auf gestapelte
   Karten um (.rz-datatable-reflow). Eine zweite, eigene Grenze daneben hiesse, dass
   die Anwendung an einer Stelle schon ein Telefon annimmt, wo das Paket noch keines
   sieht — und dass ein Gerät dazwischen zwei Layouts gleichzeitig traegt.

   In px und nicht in rem, aus demselben Grund: Radzen misst in px, und bei einer
   vergroesserten Grundschrift lägen die beiden Grenzen sonst auseinander.
   ============================================================================ */

/* Am Schreibtisch schiebt die Seitenleiste wie bisher, und dann gibt es nichts zu
   verdecken. Der Schleier steht trotzdem im Markup: ob er zaehlt, entscheidet die
   Breite und nicht eine zweite Zustandsvariable, die mit der ersten auseinanderlaufen
   koennte. */
.splitpilot-menue-schleier,
.splitpilot-menuekopf {
    display: none;
}

/* Der Name des angemeldeten Kontos in der Kopfzeile. Am Telefon bleibt nur das
   Symbol stehen (D35) — es fuehrt an dieselbe Stelle, und der Name ist dort das
   Erste, was fuer die Marke Platz machen kann. */
.splitpilot-konto-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .splitpilot-konto-name {
        display: none;
    }
}

/* --- Die Seitenleiste wird zur Schublade ---------------------------------
   Im Raster von RadzenLayout ist die Seitenleiste eine SPALTE (grid-area, position:
   static): aufgeklappt schiebt sie den Inhalt nach rechts. Am Schreibtisch ist das
   richtig — auf einem 390 px breiten Telefon blieben dem Inhalt 90 px.

   position:fixed nimmt sie aus dem Raster; ein Element ausser Fluss zaehlt bei der
   Spaltenberechnung nicht mit, die auto-Spalte faellt also auf 0 zusammen und der
   Inhalt behaelt seine ganze Breite. Darueber legt sich die Schublade.

   Der Schleier dahinter ist ein Knopf und kein div: er schliesst das Menue, und was
   schliesst, muss auch mit der Tastatur und mit dem Screenreader erreichbar sein. */
@media (max-width: 767.98px) {
    .rz-layout > .rz-sidebar {
        bottom: 0;
        box-shadow: var(--sp-shadow-3);
        left: 0;
        max-width: 20rem;
        position: fixed;
        top: 0;
        width: 82vw;
        z-index: 30;
    }

    /* Die Schublade deckt jetzt auch die Statusleiste ab — vorher tat das die
       Kopfzeile, und nur sie trug den Einzug dafuer (D34). */
    .rz-layout > .rz-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Eingeklappt ist eingeklappt. Radzen setzt dafuer width:0; die Regel oben ist
       spezifischer und haette es ueberstimmt — die Schublade stuende immer offen. */
    .rz-layout > .rz-sidebar:not(.rz-sidebar-expanded) {
        box-shadow: none;
        width: 0;
    }

    /* Der Kopf der Schublade: die Kopfzeile der Anwendung liegt darunter, ihr
       Menueknopf ist also nicht mehr zu treffen. Der Einzug fuer die Statusleiste
       steht schon an der Seitenleiste selbst. */
    .splitpilot-menuekopf {
        align-items: center;
        border-bottom: 1px solid var(--sp-border);
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
    }

    .splitpilot-menue-schleier {
        appearance: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background: color-mix(in srgb, var(--sp-bg) 55%, transparent);
        border: 0;
        cursor: pointer;
        display: block;
        inset: 0;
        padding: 0;
        position: fixed;
        z-index: 29;
    }
}

@media (max-width: 767.98px) {
    /* --- Trefferflaechen -------------------------------------------------
       44 px ist die Untergrenze fuer den Daumen (D34). Sie gilt am Telefon fuer
       JEDEN Knopf — auch fuer die ExtraSmall-Knoepfe in der Duplikatwarnung und an
       den Belegpositionen, die dafuer gedacht waren, in einer Textzeile mitzulaufen.
       Am Schreibtisch bleiben sie klein: dort zielt eine Maus. */
    .rz-button,
    .rz-pager-element {
        min-height: 2.75rem;
    }

    .rz-button.rz-button-icon-only,
    .rz-pager-element {
        min-width: 2.75rem;
    }

    /* Die Felder ziehen mit: ein 40 px hohes Eingabefeld neben einem 44 px hohen
       Knopf sieht nicht nur ungleich aus, es ist auch schlechter zu treffen.
       Gesetzt wird die Quellvariable des Pakets, damit Zeilenhoehe und Polsterung
       mitgerechnet werden — .rz-input-md liest sie. */
    :root {
        --rz-input-size-md: 2.75rem;
        --rz-input-height: 2.75rem;
    }

    /* --- Die Seite bekommt ihre Breite zurueck ---------------------------
       Radzen polstert den Rumpf mit 1 rem, das Layout darin noch einmal mit 0.75 rem:
       auf 390 px sind das 56 px, die nur Rand sind. Am Telefon traegt allein die
       innere Polsterung; die Einzuege fuer Kerbe und Wischstreifen bleiben, sie
       stehen weiter oben und rechnen mit dieser Variablen. */
    .rz-body {
        --rz-layout-body-padding: 0px;
    }

    /* --- Menuepunkte ------------------------------------------------------ */
    .rz-panel-menu .rz-navigation-item-link {
        min-height: 3rem;
    }

    /* --- Meldungen --------------------------------------------------------
       Radzen setzt sie fest 100 px unter den oberen Rand und 1 rem vom rechten:
       am Telefon stehen sie damit quer ueber der Liste und schneiden rechts in die
       Kerbe. Ueber die volle Breite unter der Kopfzeile sind sie zu lesen, ohne
       etwas zu verdecken, das gerade gebraucht wird. */
    .rz-notification {
        inset-block-start: calc(4rem + env(safe-area-inset-top, 0px));
        inset-inline: calc(.75rem + env(safe-area-inset-left, 0px))
                      calc(.75rem + env(safe-area-inset-right, 0px));
    }

    .rz-notification .rz-notification-item {
        width: auto;
    }

    /* --- Dialoge ----------------------------------------------------------
       Der Bestaetigungsdialog vor dem Loeschen kommt mit einer festen Breite und
       stand damit rechts ueber dem Rand. */
    .rz-dialog-wrapper .rz-dialog {
        max-width: calc(100vw - 1.5rem);
    }

    /* --- Tabellen ---------------------------------------------------------
       Responsive="true" laesst Radzen jede Zeile zu einem Stapel aus Feldern werden
       (.rz-datatable-reflow) und blendet den Tabellenkopf aus; jede Zelle traegt
       ihren Titel dann selbst. Was fehlt, ist die Trennung: zwanzig Laeufe liefen
       sonst zu einem einzigen Block zusammen. Die Zeile bekommt deshalb den Umriss,
       den sie als Tabellenzeile hatte. */
    .rz-datatable-reflow .rz-data-row {
        border: 1px solid var(--sp-border);
        border-radius: var(--sp-radius-sm);
        display: block;
        margin-bottom: .5rem;
        padding: .5rem;
    }

    .rz-datatable-reflow .rz-data-row > td .rz-column-title {
        color: var(--sp-faint);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .01em;
    }

    /* --- Seitenwechsel ---------------------------------------------------- */
    .rz-pager {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .25rem;
    }
}