/* =========   Layout styles (aus MainLayout)   ========= */
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .mud-layout,
    .layout-root {
        height: 100vh;
    }

    .mud-main-content {
        height: 100vh;
        overflow: auto;
    }

    /* ===================== css override needed to use Text.Primary and Text.Secondary styles ===================== */
    .mud-typography.mud-primary-text {
        color: var(--mud-palette-text-primary) !important;
    }

    .mud-typography.mud-secondary-text {
        color: var(--mud-palette-text-secondary) !important;
    }

    .app-dark .mud-drawer-content {
        /* background-image: url('/img/bg_drawer_452.png'); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
        height: 95vh;
    }

    .nav-grow {
        flex: 1 1 auto;
    }

    .logout-btn .mud-icon-root {
        margin-left: 10px;
    }

    .logout-btn .nav-text {
        margin-left: 15px;
    }

    /* Navigation (MainLayout): öffnet beim Überfahren, klappt erst verzögert und langsamer wieder ein; die Texte blenden
       dabei aus, statt hart abgeschnitten zu werden. Die Hover-Zone deckt den ganzen Drawer ab. */
    .app-nav-hover-zone {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 100%;
    }

    .app-nav-drawer.mud-drawer-mini {
        transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 320ms ease;
    }

    .app-nav-drawer.mud-drawer-mini.mud-drawer--closed {
        transition-duration: 650ms;
    }

    .app-nav-drawer .mud-nav-link-text,
    .app-nav-drawer .nav-text {
        transition: opacity 280ms ease;
    }

    .app-nav-drawer.mud-drawer--closed .mud-nav-link-text,
    .app-nav-drawer.mud-drawer--closed .nav-text {
        opacity: 0;
    }

    /* =========   Konto-Menü oben rechts (AccountMenu)   ========= */
    .account-menu {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: calc(var(--mud-zindex-appbar) + 3);
    }

    .account-menu-trigger {
        position: relative;
        display: inline-flex;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        cursor: pointer;
        transition: transform 160ms ease;
    }

    .account-menu-trigger:hover {
        transform: scale(1.05);
    }

    .account-menu-trigger:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 3px;
    }

    .account-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-primary-lighten), var(--mud-palette-primary-darken));
        color: var(--mud-palette-primary-text);
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        user-select: none;
    }

    .account-avatar-large {
        width: 48px;
        height: 48px;
        font-size: 1.05rem;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .account-menu-trigger-flag {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--mud-palette-background);
    }

    .account-menu-popover {
        min-width: 300px;
        margin-top: 8px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 16px !important;
        overflow: hidden;
    }

    .account-menu-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px !important;
    }

    .account-menu-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 4px 12px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .account-menu-identity {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .account-menu-name {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-menu-email {
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-menu-section {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .account-menu-caption {
        padding-left: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    /* Segment-Schalter (Sprache, Darstellung): die aktive Option hebt sich als Karte ab. */
    .account-menu-segment {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 4px;
        border-radius: 12px;
        background: var(--mud-palette-action-default-hover);
    }

    .account-menu-option {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 36px;
        padding: 0 10px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--mud-palette-text-secondary);
        font: inherit;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    }

    .account-menu-option:hover {
        color: var(--mud-palette-text-primary);
    }

    .account-menu-option.active {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font-weight: 600;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .account-menu-option:focus-visible,
    .account-menu-action:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 1px;
    }

    .account-menu-option img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    }

    .account-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 8px;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .account-menu-logout-form {
        margin: 0;
    }

    .account-menu-action {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--mud-palette-text-primary);
        font: inherit;
        font-size: 0.9rem;
        text-align: left;
        cursor: pointer;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .account-menu-action:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .account-menu-action-logout:hover {
        color: var(--mud-palette-error);
    }

    /* =========   Marke oben links (AppBrand) und Bildmarke im Drawer (MainLayout)   ========= */
    /* Sitzt im Kopfabstand von MudMainContent, gegenüber dem Konto-Menü. Die Glas-Pille hält die Marke lesbar, wenn der
       Inhalt darunter durchscrollt. Mit Navigation rechts neben dem Mini-Drawer (70px) und wandert beim Aufklappen im
       Takt des Drawers mit (app-nav-open, MainLayout); im Kundenmodus am Rand. Liegt unter dem Drawer, damit sie ihn
       auch während der Animation nie überdeckt. */
    .app-brand {
        position: fixed;
        top: 14px;
        left: 86px;
        z-index: calc(var(--mud-zindex-drawer) - 1);
        display: inline-flex;
        align-items: center;
        gap: 12px;
        height: 44px;
        padding: 0 18px 0 16px;
        border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
        color: var(--mud-palette-text-primary);
        text-decoration: none;
        user-select: none;
        transition: left 650ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease, transform 200ms ease;
    }

    .app-nav-open .app-brand {
        left: calc(var(--mud-drawer-width-left, 240px) + 16px);
        transition-duration: 320ms, 200ms, 200ms;
    }

    .app-brand:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    }

    .app-brand:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 3px;
    }

    .customer-mode .app-brand {
        left: 16px;
    }

    .app-brand-wordmark {
        display: inline-flex;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.14em;
    }

    .app-brand-eos {
        color: var(--mud-palette-text-primary);
    }

    /* Der Bindestrich als schräger, glühender Balken in der Primärfarbe. */
    .app-brand-dash {
        width: 14px;
        height: 4px;
        margin: 0 0.3em 0 0.1em;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--mud-palette-primary-lighten), var(--mud-palette-primary));
        box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
        transform: skewX(-24deg);
    }

    .app-brand-nxt {
        margin-right: -0.14em;
        background: linear-gradient(100deg, #ffb74d 0%, var(--mud-palette-primary) 40%, var(--mud-palette-primary-darken) 70%, #ffb74d 100%);
        background-size: 250% 100%;
        background-position: 0 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .app-brand:hover .app-brand-nxt {
        animation: app-brand-shimmer 1.4s ease;
    }

    @keyframes app-brand-shimmer {
        from {
            background-position: 100% 0;
        }

        to {
            background-position: 0 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .app-brand,
        .app-brand:hover .app-brand-nxt {
            transition: none;
            animation: none;
        }
    }

    .app-brand-divider {
        width: 1px;
        height: 22px;
        background: var(--mud-palette-lines-default);
    }

    .app-brand-by {
        margin-right: -4px;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .app-brand-eastek {
        display: block;
        width: auto;
        height: 24px;
    }

    /* Schmal: nur die Wortmarke, das Eastek-Logo bleibt in der Bildmarke des Drawers bzw. entfällt. */
    @media (max-width: 600px) {
        .app-brand-divider,
        .app-brand-by,
        .app-brand-eastek {
            display: none;
        }
    }

    .app-nav-mark {
        display: flex;
        justify-content: center;
        padding: 18px 0 14px;
    }

    .app-nav-mark img {
        width: 42px;
        height: auto;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transition: transform 200ms ease;
    }

    .app-nav-mark:hover img {
        transform: scale(1.06);
    }

    /* Footer (Impressum, Datenschutz, Version) am Seitenende, bei kurzen Seiten unten am Viewport */
    .app-content {
        display: flex;
        flex-direction: column;
    }

    .app-content > .app-body {
        flex: 1 0 auto;
    }

    .app-content > .app-footer {
        flex-shrink: 0;
    }

    /* bg Grundfläche DARKMODE */
    .app-dark .app-content {
        min-height: 100vh;
        /* background-image: url("/img/full_bg_2418x1360.png"); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* bg sicherstellen das nichts „überläuft“ */
    .app-dark .mud-main-content {
        height: 100vh;
        overflow: auto;
    }

    /* =========   Lesbare Text- und Outlined-Buttons   ========= */
    /* Sie tragen ihre Farbe als Schrift. Auf den mittelgrauen Flächen des Themes (Surface dunkel #5a5a5a, hell #bebebe)
       ist die Originalfarbe kaum lesbar (Primär ~2:1, Fehler ~1,5:1). Die Schrift mischt sich deshalb im Dark Mode mit
       Weiß, im Light Mode mit Schwarz (jeweils mindestens ~4,3:1); Rahmen, Hover und Ripple behalten die Originalfarbe.
       Gefüllte Buttons sind davon nicht betroffen. */
    .app-dark {
        --eos-button-ink: white;
        --eos-button-ink-share: 30%;
    }

    .app-light {
        --eos-button-ink: black;
        --eos-button-ink-share: 45%;
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-primary,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-primary {
        color: color-mix(in srgb, var(--mud-palette-primary) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-secondary,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-secondary {
        color: color-mix(in srgb, var(--mud-palette-secondary) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-tertiary,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-tertiary {
        color: color-mix(in srgb, var(--mud-palette-tertiary) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-info,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-info {
        color: color-mix(in srgb, var(--mud-palette-info) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-success,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-success {
        color: color-mix(in srgb, var(--mud-palette-success) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-warning,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-warning {
        color: color-mix(in srgb, var(--mud-palette-warning) var(--eos-button-ink-share), var(--eos-button-ink));
    }

    :is(.app-dark, .app-light) .mud-button-text.mud-button-text-error,
    :is(.app-dark, .app-light) .mud-button-outlined.mud-button-outlined-error {
        color: color-mix(in srgb, var(--mud-palette-error) var(--eos-button-ink-share), var(--eos-button-ink));
    }