/* ── Mobile Stepper: Header scrollbar ───────────────────────────────────────
   Auf kleinen Bildschirmen scrollt der Stepper-Header horizontal und blendet
   die Scrollleiste aus. Das aktive Step-Element wird per JS in den sichtbaren
   Bereich gescrollt (scrollStepIntoView in JsHelpers.js).
*/
@media (max-width: 959px) {
    .mud-stepper .mud-stepper-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        scroll-behavior: smooth;
    }
    .mud-stepper .mud-stepper-nav::-webkit-scrollbar {
        display: none;                  /* Chrome / Safari */
    }
    .mud-stepper .mud-stepper-nav .mud-step {
        min-width: fit-content;
        flex-shrink: 0;
    }
    .mud-stepper .mud-stepper-nav .mud-stepper-nav-connector {
        min-width: 24px;
        flex-shrink: 0;
    }
}

:root {
    --rz-base-background-color: var(--mud-palette-background);
    --rz-base-50: var(--mud-palette-gray-lighter);
    --rz-text-color: var(--mud-palette-drawer-text);
    --rz-text-title-color: var(--mud-palette-drawer-text);
    --rz-base-100: var(--mud-palette-table-hover);
    --rz-base-200: var(--mud-palette-table-lines);
    --rz-primary: var(--mud-palette-tertiary);
    --rz-on-primary: var(--mud-palette-tertiary-text);
    --rz-secondary: var(--mud-palette-secondary);
    --rz-on-secondary: var(--mud-palette-secondary-text);
    --rz-text-disabled-color: var(--mud-palette-text-disabled);
    --rz-primary-lighter: rgba(var(--rz-primary), 0.5);
}