/* /Components/Layout/AppFooter.razor.rz.scp.css */
/* ============================================================
   APPFOOTER.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Layout / AppFooter.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.app-footer[b-x0yojpqpuz] {
    background: var(--chrome-bg);
    border-top: 1px solid #202733;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.app-footer-inner[b-x0yojpqpuz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.footer-links[b-x0yojpqpuz] {
    display: flex;
    gap: 28px;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.footer-links a[b-x0yojpqpuz] {
    color: var(--sidebar-text);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.footer-links a:hover[b-x0yojpqpuz] {
    color: var(--sidebar-active);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.footer-copy[b-x0yojpqpuz] {
    font-size: var(--text-xs);
    color: rgba(203, 213, 225, 0.6);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.footer-link-jb[b-x0yojpqpuz] {
    color: rgba(203, 213, 225, 0.6);
    text-decoration: none;
    transition: color var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.footer-link-jb:hover[b-x0yojpqpuz] {
    color: var(--sidebar-active);
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 576px) {
    /* Navigationsregel: Footer darf auf kleinen Displays höher werden und Inhalte umbrechen */
    .app-footer[b-x0yojpqpuz] {
        height: auto;
        min-height: 86px;
        padding: 16px 10px;
    }

    /* Navigationsregel: hält Footer-Inhalte zentriert und verhindert Überlauf */
    .app-footer-inner[b-x0yojpqpuz] {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    /* Navigationsregel: Footer-Links umbrechen kontrolliert statt horizontal zu scrollen */
    .footer-links[b-x0yojpqpuz] {
        justify-content: center;
        gap: 10px 18px;
        flex-wrap: wrap;
    }

    /* Navigationsregel: Copyright-Zeile darf auf Smartphones umbrechen */
    .footer-copy[b-x0yojpqpuz] {
        line-height: 1.45;
    }
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
/* ============================================================
   APPHEADER.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Layout / AppHeader.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.app-header[b-oapmj2na0i] {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--chrome-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.header-brand[b-oapmj2na0i] {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: min(460px, calc(100vw - 420px));
    color: #F8FAFC;
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 14px;
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.header-brand:hover[b-oapmj2na0i] {
    color: #fff;
    background: rgba(255,255,255,.045);
    text-decoration: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.header-brand:active[b-oapmj2na0i] {
    transform: translateY(1px);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.header-brand img[b-oapmj2na0i] {
    display: block;
    width: auto;
    height: 34px;
    max-width: 136px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.header-brand span[b-oapmj2na0i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-brand-text[b-oapmj2na0i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-brand-name[b-oapmj2na0i] {
    font-family: "Outfit", var(--font-body);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;
}

.header-brand-sub[b-oapmj2na0i] {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #F97316;
}

/* Nav */
.header-nav[b-oapmj2na0i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

/* Navigationsregel: kapselt Trigger und Dropdown an einer gemeinsamen Ankerstelle */
.header-user-shell[b-oapmj2na0i] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Navigationsregel: Benutzerchip bleibt die visuelle Basis des Menüs */
.header-user[b-oapmj2na0i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px 6px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.095);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

/* Zustandsregel: Hover zeigt dem Benutzer, dass der Chip anklickbar ist */
.header-user:hover[b-oapmj2na0i],
.header-user.open[b-oapmj2na0i] {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

/* Zustandsregel: geöffneter Zustand bekommt etwas mehr Tiefe */
.header-user.open[b-oapmj2na0i] {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 26px rgba(15,23,42,.16);
}

/* Zustandsregel: Fokus-Ring für Tastaturnavigation */
.header-user:focus-visible[b-oapmj2na0i] {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 3px rgba(255,255,255,.16),
        0 0 0 5px rgba(249,115,22,.3);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar[b-oapmj2na0i] {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: rgba(249,115,22,0.16);
    border: 1px solid rgba(249,115,22,0.38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    overflow: hidden;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar img[b-oapmj2na0i] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-info[b-oapmj2na0i] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-name[b-oapmj2na0i] {
    max-width: 220px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-role[b-oapmj2na0i] {
    font-size: var(--text-xs);
    color: rgba(209,215,226,0.62);
}

/* UI-Regel: Chevron signalisiert den Menücharakter dezent */
.user-menu-chevron[b-oapmj2na0i] {
    width: 9px;
    height: 9px;
    border-right: 1.8px solid rgba(226,232,240,0.78);
    border-bottom: 1.8px solid rgba(226,232,240,0.78);
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--transition), border-color var(--transition);
    flex-shrink: 0;
    margin-left: 2px;
}

/* Zustandsregel: Chevron dreht sich im geöffneten Zustand */
.header-user.open .user-menu-chevron[b-oapmj2na0i] {
    transform: rotate(-135deg) translateY(-1px);
    border-color: #fff;
}

/* Navigationsregel: Dropdown-Position und Größe – visuelles Styling in app.css (USER MENU) */
.user-menu-panel[b-oapmj2na0i] {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: min(290px, calc(100vw - 20px));
    padding: 10px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 146, 58, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(49, 49, 51, 0.98) 0%, rgba(34, 34, 36, 0.98) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow:
        0 18px 40px rgba(4,8,14,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(-8px);
    animation: user-menu-enter-down 180ms ease-out forwards;
    z-index: 140;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.header-brand:focus-visible[b-oapmj2na0i] {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.16),
        0 0 0 5px rgba(249,115,22,.3);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hamburger:focus-visible[b-oapmj2na0i] {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.16),
        0 0 0 5px rgba(249,115,22,.3);
}

/* Hamburger (mobile) */
.hamburger[b-oapmj2na0i] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.hamburger span[b-oapmj2na0i] {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--sidebar-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hamburger.open span:nth-child(1)[b-oapmj2na0i] { transform: rotate(45deg) translate(5px, 5px); }
/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hamburger.open span:nth-child(2)[b-oapmj2na0i] { opacity: 0; }
/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hamburger.open span:nth-child(3)[b-oapmj2na0i] { transform: rotate(-45deg) translate(5px, -5px); }

/* Breakpoint: Header wird ab 798px full-width, Logo und Hamburger erscheinen */
@media (max-width: 798px) {
    /* Header überspannt die volle Breite, da Sidebar Off-Canvas wird.
       z-index: 121 liegt über der mobilen Sidebar (z-index: 120), damit der Hamburger-Button
       beim geöffneten Menü nicht verdeckt wird und immer klickbar bleibt. */
    .app-header[b-oapmj2na0i] {
        left: 0;
        gap: 8px;
        padding: 0 14px;
        z-index: 121;
    }

    /* Logo-Brand erscheint links im Header (auf Desktop in der Sidebar versteckt).
       Rechts steht nur der Hamburger (36px) + Abstände – daher großzügige Breite. */
    .header-brand[b-oapmj2na0i] {
        display: inline-flex;
        max-width: calc(100vw - 80px);
        gap: 8px;
        padding: 5px 8px;
    }

    /* Logo größer im Tablet-Header, Schrift bleibt unverändert */
    .header-brand img[b-oapmj2na0i] {
        height: 44px;
        max-width: 140px;
    }

    /* Hamburger wird als einziger mobiler Sidebar-Trigger sichtbar */
    .hamburger[b-oapmj2na0i] {
        display: flex;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .header-nav[b-oapmj2na0i] {
        gap: 8px;
    }

    /* Navigationsregel: Menü bleibt auf kleinen Displays vollständig sichtbar */
    .user-menu-panel[b-oapmj2na0i] {
        right: -2px;
        top: calc(100% + 8px);
    }
}

/* Ab 799px übernimmt die Sidebar – AppHeader wird ausgeblendet */
@media (min-width: 799px) {
    .app-header[b-oapmj2na0i] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MAINLAYOUT.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Layout / MainLayout.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Inhaltsbereich: definiert den zentralen Arbeitsbereich innerhalb des Layouts */
.app-body[b-hhdb4ectnm] {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.app-content[b-hhdb4ectnm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px;
}

.main-content-surface[b-hhdb4ectnm] {
    background: transparent;
    border-radius: 0;
    padding: 24px;
    margin: 0;
    border: none;
    box-shadow: none;
    min-height: 100%;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 1199px) {
    .app-content[b-hhdb4ectnm] {
        max-width: 100%;
        padding: 20px;
    }

    .main-content-surface[b-hhdb4ectnm] {
        padding: 22px;
    }
}

/* Responsive Anpassung: ab 798px – Sidebar Off-Canvas, AppHeader sichtbar */
@media (max-width: 798px) {
    /* Sidebar verschwindet, Content startet bei left: 0 und unterhalb des Headers */
    .app-body[b-hhdb4ectnm] {
        left: 0;
        top: var(--header-height);
    }

    .app-content[b-hhdb4ectnm] {
        padding: 16px;
    }

    .main-content-surface[b-hhdb4ectnm] {
        padding: 18px;
    }
}

/* Responsive Anpassung: reduziert den Arbeitsbereich auf sehr schmalen Displays ohne Designbruch */
@media (max-width: 576px) {
    /* UI-Regel: hält Seitenabstände mobil knapp, aber weiterhin gut lesbar */
    .app-content[b-hhdb4ectnm] {
        padding: 12px;
        max-width: 100%;
    }

    .main-content-surface[b-hhdb4ectnm] {
        padding: 16px;
    }
}

@media (max-width: 430px) {
    .app-content[b-hhdb4ectnm] {
        padding: 10px;
    }

    .main-content-surface[b-hhdb4ectnm] {
        padding: 14px;
    }
}
/* /Components/Layout/NavSidebar.razor.rz.scp.css */
/* ============================================================
   NAVSIDEBAR.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Layout / NavSidebar.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

.nav-sidebar[b-14xr6oy080] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background:
        linear-gradient(180deg, #313133 0%, #28282a 100%);
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    z-index: 101;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow:
        inset -1px 0 0 rgba(255,255,255,0.02),
        inset 0 1px 0 rgba(255,255,255,0.03);
    transition: transform var(--transition-md), width var(--transition-md);
}

.nav-main[b-14xr6oy080] {
    flex: 1;
    min-height: 0;
    padding: 14px 0 16px;
}

.nav-section[b-14xr6oy080] {
    padding: 0 10px;
}

.nav-section-label[b-14xr6oy080] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: rgba(209,215,226,0.58);
    padding: 12px 12px 7px;
}

.nav-divider[b-14xr6oy080] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    margin: 12px 16px 6px;
}

.nav-sidebar-footer[b-14xr6oy080] {
    margin-top: auto;
    padding-bottom: 12px;
}

.nav-divider-footer[b-14xr6oy080] {
    margin-bottom: 12px;
}

.sidebar-user-shell[b-14xr6oy080] {
    position: relative;
    margin: 0 12px;
}

.sidebar-user[b-14xr6oy080] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px 10px 10px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)),
        #232325;
    border: 1px solid rgba(255,255,255,0.045);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 22px rgba(0,0,0,.12);
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.sidebar-user:hover[b-14xr6oy080],
.sidebar-user.open[b-14xr6oy080] {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.012)),
        #272729;
    border-color: rgba(255,255,255,0.07);
    transform: translateY(-1px);
}

.sidebar-user.open[b-14xr6oy080] {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 16px 30px rgba(0,0,0,.18);
}

.sidebar-user:focus-visible[b-14xr6oy080] {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 3px rgba(255,255,255,.16),
        0 0 0 5px rgba(249,115,22,.3);
}

.user-avatar[b-14xr6oy080] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(249,115,22,0.16);
    border: 1px solid rgba(249,115,22,0.38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    overflow: hidden;
}

.user-avatar img[b-14xr6oy080] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.user-info[b-14xr6oy080] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    text-align: left;
}

.user-name[b-14xr6oy080] {
    max-width: 150px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-14xr6oy080] {
    font-size: var(--text-xs);
    color: rgba(209,215,226,0.62);
}

.user-menu-chevron[b-14xr6oy080] {
    width: 9px;
    height: 9px;
    border-right: 1.8px solid rgba(226,232,240,0.78);
    border-bottom: 1.8px solid rgba(226,232,240,0.78);
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--transition), border-color var(--transition);
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar-user.open .user-menu-chevron[b-14xr6oy080] {
    transform: rotate(-135deg) translateY(-1px);
    border-color: #fff;
}

/* Navigationsregel: Dropdown-Position (Sidebar öffnet nach oben) – visuelles Styling in app.css */
.user-menu-panel[b-14xr6oy080] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    padding: 10px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 146, 58, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(49, 49, 51, 0.98) 0%, rgba(34, 34, 36, 0.98) 100%);
    border: 1px solid rgba(255,255,255,0.055);
    box-shadow:
        0 20px 40px rgba(4,8,14,.24),
        inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(8px);
    animation: user-menu-enter-up 180ms ease-out forwards;
    z-index: 140;
}


.nav-overlay[b-14xr6oy080] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.58);
    z-index: 119;
}

@media (max-width: 1199px) {
    .nav-sidebar[b-14xr6oy080] {
        width: 224px;
    }
}

@media (max-width: 920px) {
    .user-name[b-14xr6oy080] {
        max-width: 128px;
    }
}

/* Sidebar wird ab 798px als Off-Canvas-Menü eingeblendet */
@media (max-width: 798px) {
    .nav-sidebar[b-14xr6oy080] {
        transform: translateX(-100%);
        width: min(320px, 100vw);
        max-width: 100vw;
        /* Beginnt unterhalb des Headers, damit der Hamburger-Button nicht verdeckt wird */
        top: var(--header-height);
        z-index: 120;
        box-shadow:
            inset -1px 0 0 rgba(255,255,255,0.04),
            inset 0 1px 0 rgba(255,255,255,0.035),
            20px 0 44px rgba(0,0,0,.24);
    }

    .nav-sidebar.open[b-14xr6oy080] {
        transform: translateX(0);
    }

    .nav-main[b-14xr6oy080] {
        padding-top: 12px;
    }

    /* Overlay beginnt unterhalb des Headers – der Schließen-Button bleibt sichtbar und nicht abgedunkelt */
    .nav-overlay[b-14xr6oy080] {
        display: block;
        top: var(--header-height);
    }
}

@media (max-width: 576px) {
    .nav-sidebar[b-14xr6oy080] {
        width: 100vw;
    }

    .sidebar-user-shell[b-14xr6oy080] {
        margin-inline: 10px;
    }
}
/* /Components/Shared/Cards/DashboardCard.razor.rz.scp.css */
/* ============================================================
   DASHBOARDCARD.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Shared / Cards / DashboardCard.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

.dashboard-card[b-9utkkyhoi5] {
    display: grid;
    grid-template-areas: "main arrow";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    column-gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 22px 22px 22px 20px;
    background: var(--surface-3);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--text);
    transition:
        box-shadow var(--transition-md),
        transform var(--transition),
        border-color var(--transition),
        background var(--transition-md);
    cursor: pointer;
}

.dashboard-card:hover[b-9utkkyhoi5] {
    box-shadow: 0 5px 14px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.05);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.11);
    color: var(--text);
    text-decoration: none;
}

.dashboard-card:active[b-9utkkyhoi5] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dc-main[b-9utkkyhoi5] {
    grid-area: main;
    display: flex;
    align-items: center;
    align-self: start;
    gap: 14px;
    min-width: 0;
}

.dc-icon[b-9utkkyhoi5] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    color: var(--dc-icon-color, currentColor);
    filter: drop-shadow(0 2px 8px rgba(4,8,14,0.18));
    transition: transform var(--transition), color var(--transition);
}

.dashboard-card:hover .dc-icon[b-9utkkyhoi5] {
    transform: translateY(-1px);
}

.dc-icon svg[b-9utkkyhoi5] {
    width: 48px;
    height: 48px;
    display: block;
}

.dc-copy[b-9utkkyhoi5] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.dc-title[b-9utkkyhoi5] {
    font-size: 1.05rem;
    font-weight: 650;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.005em;
    line-height: 1.15;
}

.dc-body[b-9utkkyhoi5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.dc-value[b-9utkkyhoi5] {
    font-size: 1.72rem;
    font-weight: 850;
    color: var(--text);
    line-height: .98;
    letter-spacing: -0.045em;
}

.dc-label[b-9utkkyhoi5] {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.74);
    font-weight: 600;
}

.dc-title[b-9utkkyhoi5],
.dc-value[b-9utkkyhoi5],
.dc-label[b-9utkkyhoi5] {
    overflow-wrap: anywhere;
}

.dc-arrow[b-9utkkyhoi5] {
    grid-area: arrow;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 46px;
    min-height: 100%;
    flex-shrink: 0;
    margin: -22px -22px -22px 0;
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,0.16);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.28));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.9);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.07),
        inset 8px 0 14px rgba(0,0,0,0.10);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dc-arrow[b-9utkkyhoi5]::before {
    content: none;
}

.dc-arrow svg[b-9utkkyhoi5] {
    position: relative;
    z-index: 1;
    opacity: 0.95;
    filter: none;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.dashboard-card:hover .dc-arrow[b-9utkkyhoi5] {
    transform: translateX(2px);
    background: linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0.32));
    border-color: rgba(255,255,255,0.20);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.10),
        inset 10px 0 16px rgba(0,0,0,0.14);
    color: #ffffff;
}

.dashboard-card:hover .dc-arrow svg[b-9utkkyhoi5] {
    transform: translateX(1px);
    opacity: 1;
}

.dashboard-card:focus-visible[b-9utkkyhoi5] {
    outline: none;
    border-color: rgba(249,115,22,.34);
    box-shadow:
        0 18px 36px rgba(4,8,14,0.24),
        0 0 0 4px rgba(249,115,22,.12);
}

.card-inventar[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #244653 0%, #2f6b7a 56%, #3a7680 100%);
    border: 1px solid rgba(255,255,255,0.10);
    --dc-icon-color: rgba(255,255,255,0.95);
}

.card-inventar .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }
.card-inventar .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-inventar .dc-label[b-9utkkyhoi5] { color: #d9edf0; }
.card-reservierungen[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #8b3612 0%, #c65218 58%, #e96d1f 100%);
    border: 1px solid rgba(255,255,255,0.10);
    --dc-icon-color: rgba(255,255,255,0.95);
}

.card-reservierungen .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }
.card-reservierungen .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-reservierungen .dc-label[b-9utkkyhoi5] { color: #fff7ed; }
.card-mitglieder[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #124d3f 0%, #167a60 58%, #1d9773 100%);
    border: 1px solid rgba(255,255,255,0.10);
    --dc-icon-color: rgba(255,255,255,0.95);
}

.card-mitglieder .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }
.card-mitglieder .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-mitglieder .dc-label[b-9utkkyhoi5] { color: #ecfdf5; }
.card-dokumente[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #5b3a1a 0%, #8a5316 50%, #b7791f 100%);
    border: 1px solid rgba(255,255,255,0.08);
    --dc-icon-color: rgba(255,255,255,0.95);
}

.card-dokumente .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }
.card-dokumente .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-dokumente .dc-label[b-9utkkyhoi5] { color: #fffbeb; }
.card-inventar:hover[b-9utkkyhoi5],
.card-reservierungen:hover[b-9utkkyhoi5],
.card-mitglieder:hover[b-9utkkyhoi5],
.card-dokumente:hover[b-9utkkyhoi5] {
    filter: brightness(1.025);
    border-color: rgba(255,255,255,0.14);
}

/* Ab 768px: Tablet-Layout mit größeren Kacheln und normalem Pfeil */
@media (max-width: 850px) {
    .dashboard-card[b-9utkkyhoi5] {
        column-gap: 0;
    }

    .dc-arrow[b-9utkkyhoi5] {
        display: none;
    }
}

@media (max-width: 768px) {
    .dashboard-card[b-9utkkyhoi5] {
        width: 100%;
        margin: 0;
        column-gap: 0;
        padding: 20px 18px;
        border-radius: 16px;
        min-height: 108px;
    }

    .dc-main[b-9utkkyhoi5] {
        gap: 16px;
        align-items: flex-start;
    }

    .dc-icon svg[b-9utkkyhoi5] {
        width: 42px;
        height: 42px;
    }

    .dc-copy[b-9utkkyhoi5] {
        gap: 6px;
    }

    .dc-title[b-9utkkyhoi5] {
        font-size: 0.96rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .dc-body[b-9utkkyhoi5] {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px 8px;
    }

    .dc-value[b-9utkkyhoi5] {
        font-size: 2rem;
    }

    .dc-label[b-9utkkyhoi5] {
        white-space: normal;
        font-size: 0.96rem;
    }

    .dc-arrow[b-9utkkyhoi5] {
        width: 48px;
        margin: -20px -18px -20px 0;
        border-radius: 0 16px 16px 0;
    }

    .dc-arrow svg[b-9utkkyhoi5] {
        width: 24px;
        height: 24px;
    }
}

/* Ab 620px: 2×2-Grid – Pfeil + Label weg, Titel oben, Icon + Zahl zentriert darunter */
@media (max-width: 620px) {
    .dc-arrow[b-9utkkyhoi5],
    .dc-label[b-9utkkyhoi5] {
        display: none;
    }

    /* Kompaktes Padding für schmale 2×2-Kacheln – column-gap auf 0, da kein Pfeil */
    .dashboard-card[b-9utkkyhoi5] {
        padding: 14px 10px;
        min-height: 0;
        border-radius: 16px;
        column-gap: 0;
    }

    /* dc-main als Grid: Titel oben, Icon und Zahl nebeneinander zentriert darunter */
    .dc-main[b-9utkkyhoi5] {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "title title"
            "icon  value";
        justify-content: center;
        align-items: center;
        gap: 6px 8px;
        width: 100%;
        min-width: 0;
    }

    /* dc-copy aus dem Fluss nehmen – Kinder direkt ins Grid */
    .dc-copy[b-9utkkyhoi5] {
        display: contents;
    }

    .dc-title[b-9utkkyhoi5] {
        grid-area: title;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .dc-icon[b-9utkkyhoi5] {
        grid-area: icon;
        align-self: center;
        justify-self: center;
    }

    .dc-icon svg[b-9utkkyhoi5] {
        width: 30px;
        height: 30px;
    }

    .dc-body[b-9utkkyhoi5] {
        grid-area: value;
        align-self: center;
        min-width: 0;
    }

    .dc-value[b-9utkkyhoi5] {
        font-size: 1.65rem;
        line-height: 1;
        letter-spacing: -0.04em;
    }
}

/* Ab 430px: noch etwas kleinere Werte für sehr schmale Displays – bleibt 2×2-Grid-kompatibel */
@media (max-width: 430px) {
    .dashboard-card[b-9utkkyhoi5] {
        padding: 12px 8px;
    }

    .dc-icon svg[b-9utkkyhoi5] {
        width: 26px;
        height: 26px;
    }

    .dc-title[b-9utkkyhoi5] {
        font-size: 0.74rem;
    }

    .dc-value[b-9utkkyhoi5] {
        font-size: 1.5rem;
    }
}
/* /Components/Shared/FaqItem.razor.rz.scp.css */
/* ============================================================
   FAQITEM.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Shared / FaqItem.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-item[b-8lhx6rd5fo] {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background var(--transition);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-item:last-child[b-8lhx6rd5fo] {
    border-bottom: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.faq-item:hover[b-8lhx6rd5fo] {
    background: rgba(255,255,255,0.02);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-question[b-8lhx6rd5fo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-question-text[b-8lhx6rd5fo] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--sidebar-text);
    transition: color var(--transition);
    line-height: 1.5;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-question-text--open[b-8lhx6rd5fo] {
    color: var(--primary);
    font-weight: 600;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-chevron[b-8lhx6rd5fo] {
    color: rgba(203,213,225,0.4);
    flex-shrink: 0;
    transition: transform 200ms ease, color var(--transition);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-chevron--up[b-8lhx6rd5fo] {
    transform: rotate(180deg);
    color: var(--primary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-answer[b-8lhx6rd5fo] {
    padding: 0 24px 18px;
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.7;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-answer strong[b-8lhx6rd5fo] {
    color: #fff;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-answer a[b-8lhx6rd5fo] {
    color: var(--primary);
    text-decoration: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.faq-answer a:hover[b-8lhx6rd5fo] {
    color: var(--primary-hover);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.faq-answer em[b-8lhx6rd5fo] {
    font-style: normal;
    color: rgba(203,213,225,0.8);
}

/* Responsive Anpassung: reduziert FAQ-Abstände auf sehr schmalen Displays ohne Lesbarkeit zu verlieren */
@media (max-width: 576px) {
    /* UI-Regel: FAQ-Fragen bleiben als Touchflächen groß genug, aber schmaler gepolstert */
    .faq-question[b-8lhx6rd5fo] {
        gap: 12px;
        padding: 14px 16px;
    }

    /* UI-Regel: Antworten nutzen die mobile Breite besser aus */
    .faq-answer[b-8lhx6rd5fo] {
        padding: 0 16px 16px;
        overflow-wrap: anywhere;
    }
}
/* /Components/Shared/NavItem.razor.rz.scp.css */
/* ============================================================
   NAVITEM.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Shared / NavItem.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Styles sind in wwwroot/app.css (global), da NavLink das Root-Element ist
   und ::deep in Blazor-Scoped-CSS nicht greift wenn keine Wrapper-Element existiert. */
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* ============================================================
   PAGEHEADER.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Shared / PageHeader.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header[b-3o1xb4drym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 35px;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header-left[b-3o1xb4drym] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header-icon[b-3o1xb4drym] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top, rgba(249,115,22,0.18), transparent 70%),
        var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: var(--shadow-card);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.page-header-icon:hover[b-3o1xb4drym] {
    transform: translateY(-1px);
    filter: none;
    border-color: rgba(249,115,22,0.22);
    box-shadow: var(--shadow-md);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header-content[b-3o1xb4drym] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.page-title[b-3o1xb4drym] {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.page-subtitle[b-3o1xb4drym] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header-actions[b-3o1xb4drym] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Responsive Anpassung: Tabletbreiten geben Titel und Aktionen eigene Zeilen */
@media (max-width: 900px) {
    .page-header[b-3o1xb4drym] {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 35px;
    }

    .page-header-actions[b-3o1xb4drym] {
        width: 100%;
    }
}

/* Responsive Anpassung: kompakterer Header ab Smartphone-Breite */
@media (max-width: 480px) {
    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .page-header[b-3o1xb4drym] {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    /* Navigationsregel: Icon und Titel bleiben zentriert ausgerichtet */
    .page-header-left[b-3o1xb4drym] {
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    /* Navigationsregel: kleineres Icon auf Smartphones */
    .page-header-icon[b-3o1xb4drym] {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    /* Titelgröße auf Smartphone reduzieren */
    .page-title[b-3o1xb4drym] {
        font-size: 1.25rem;
    }

    /* UI-Regel: hält lange Seitentitel innerhalb der verfügbaren Breite */
    .page-header-content[b-3o1xb4drym] {
        min-width: 0;
    }

    /* UI-Regel: verbessert Zeilenumbruch und Lesbarkeit langer Untertitel */
    .page-subtitle[b-3o1xb4drym] {
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    /* Navigationsregel: Aktionsbuttons unter dem Titel dürfen die volle Breite nutzen */
    .page-header-actions[b-3o1xb4drym] {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Formular- und Aktionsregel: primäre Seitenaktionen bleiben auf Smartphones leicht antippbar */
    .page-header-actions .btn[b-3o1xb4drym] {
        flex: 1 1 170px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .page-header[b-3o1xb4drym] {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 22px;
    }

    .page-header-left[b-3o1xb4drym] {
        align-items: center;
        gap: 12px;
    }

    .page-header-icon[b-3o1xb4drym] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .page-header-content[b-3o1xb4drym] {
        gap: 3px;
    }

    .page-title[b-3o1xb4drym] {
        font-size: 1.2rem;
    }

    .page-subtitle[b-3o1xb4drym] {
        font-size: var(--text-sm);
        line-height: 1.45;
    }
}

@media (max-width: 430px) {
    .page-header[b-3o1xb4drym] {
        gap: 10px;
        margin-bottom: 18px;
    }

    .page-header-icon[b-3o1xb4drym] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .page-title[b-3o1xb4drym] {
        font-size: 1.1rem;
    }

    .page-subtitle[b-3o1xb4drym] {
        font-size: var(--text-xs);
    }
}
/* /Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ============================================================
   ADMINDASHBOARD.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / AdminDashboard.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.admin-overview-grid[b-l2u2nl23q0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    align-items: stretch;
}

/* Layoutregel: verteilt fuenf sichtbare Kacheln ausgewogen auf 3 oben und 2 breitere unten */
.admin-overview-grid--five[b-l2u2nl23q0] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Layoutregel: obere Reihe behaelt drei gleich starke Kacheln */
.admin-overview-grid--five .admin-tile:nth-child(-n+3)[b-l2u2nl23q0] {
    grid-column: span 2;
}

/* Layoutregel: untere Reihe nutzt zwei breitere Kacheln für harmonische Proportionen */
.admin-overview-grid--five .admin-tile:nth-child(n+4)[b-l2u2nl23q0] {
    grid-column: span 3;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.admin-tile[b-l2u2nl23q0] {
    position: relative;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.1rem calc(1.1rem + 42px) 1.1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--surface-2);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
        transform 190ms ease,
        box-shadow 190ms ease,
        border-color 190ms ease,
        background 190ms ease;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.admin-tile:hover[b-l2u2nl23q0] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(249, 115, 22, 0.18);
    background: var(--surface-3);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.admin-tile.is-coming-soon[b-l2u2nl23q0] {
    background: var(--surface-2);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.admin-tile-icon[b-l2u2nl23q0] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    transition: transform 190ms ease, filter 190ms ease;
}

/* Zustandsregel: hebt Icons nur bei Interaktion leicht hervor */
.admin-tile:hover .admin-tile-icon[b-l2u2nl23q0] {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

/* Karteninhalt: ordnet Text und Metadaten innerhalb der Kartenfläche */
.admin-tile-body[b-l2u2nl23q0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.admin-tile-topline[b-l2u2nl23q0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

/* UI-Regel: Titel ohne erzwungene Mindesthöhe – Kachelhöhe ergibt sich aus dem Inhalt */
.admin-tile-topline h3[b-l2u2nl23q0] {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Karteninhalt: Beschreibungstext ohne erzwungene Mindesthöhe */
.admin-tile-body p[b-l2u2nl23q0] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.87rem;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Pfeil-Container: rechtsbündig am unteren Rand der Kachel */
.admin-tile-link[b-l2u2nl23q0] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: absolute;
    inset: 0 0 0 auto;
    width: 42px;
    margin: 0;
    border-left: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.28));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.07),
        inset 8px 0 14px rgba(0,0,0,0.10);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Pfeil-Button: volle Orange-Kreisfläche analog zu den Dashboard-KPI-Kacheln */
.admin-tile-arrow[b-l2u2nl23q0] {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    border: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.9);
    opacity: 0.95;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

/* Zustandsregel: Pfeil verschiebt sich leicht nach rechts beim Hover */
.admin-tile:hover .admin-tile-link[b-l2u2nl23q0] {
    transform: translateX(2px);
    background: linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0.32));
    border-color: rgba(255,255,255,0.20);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.10),
        inset 10px 0 16px rgba(0,0,0,0.14);
}

.admin-tile:hover .admin-tile-arrow[b-l2u2nl23q0] {
    transform: translateX(1px);
    color: #ffffff;
    opacity: 1;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.admin-status-grid[b-l2u2nl23q0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Karteninhalt: verfeinert die Admin-Statuswidgets ohne globales Layout zu veraendern */
.admin-status-grid :deep(.card)[b-l2u2nl23q0] {
    background: var(--surface-2);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255,255,255,0.07);
}

/* Karteninhalt: schafft mehr Luft in den Admin-Statuscards */
.admin-status-grid :deep(.card-body)[b-l2u2nl23q0] {
    padding: 1.35rem 1.5rem 1.5rem;
}

/* Statuswerte in Systemhinweisen bewusst ohne Pill-Hintergrund darstellen */
.admin-hints-list[b-l2u2nl23q0] {
    gap: 0.45rem;
}

.admin-hints-list .status-row[b-l2u2nl23q0] {
    align-items: baseline;
    gap: 0.9rem;
}

.admin-hint-value[b-l2u2nl23q0] {
    display: inline-flex;
    justify-content: flex-end;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.admin-hint-value--neutral[b-l2u2nl23q0] {
    color: var(--text-secondary);
}

.admin-hint-value--muted[b-l2u2nl23q0] {
    color: var(--warning);
}

.admin-hint-value--success[b-l2u2nl23q0] {
    color: var(--success);
}

/* Responsive Anpassung: reduziert die Kacheldichte, bevor Admin-Kacheln zu schmal werden */
@media (max-width: 1630px) {
    .admin-overview-grid[b-l2u2nl23q0],
    .admin-status-grid[b-l2u2nl23q0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-overview-grid--five .admin-tile:nth-child(-n+3)[b-l2u2nl23q0],
    .admin-overview-grid--five .admin-tile:nth-child(n+4)[b-l2u2nl23q0] {
        grid-column: auto;
    }

    /* Kein min-height-Override noetig – Tiles skalieren mit dem Inhalt */
}

/* Responsive Anpassung: blendet den rechten Aktionsbereich aus, sobald das Grid zweispaltig wird */
@media (max-width: 1630px) {
    .admin-tile[b-l2u2nl23q0] {
        padding: 1.1rem;
    }

    .admin-tile-link[b-l2u2nl23q0] {
        display: none;
    }
}

@media (max-width: 820px) {
    .admin-overview-grid[b-l2u2nl23q0],
    .admin-status-grid[b-l2u2nl23q0] {
        grid-template-columns: 1fr;
    }

    .admin-tile[b-l2u2nl23q0] {
        padding: 1.2rem;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    .admin-overview-grid[b-l2u2nl23q0],
    .admin-status-grid[b-l2u2nl23q0] {
        grid-template-columns: 1fr;
    }

    .admin-tile[b-l2u2nl23q0] {
        padding: 1.1rem;
        gap: 0.9rem;
    }
}

/* Responsive Schlussregel: verhindert Überlauf in Admin-Kacheln auf kleinen Smartphones */
@media (max-width: 640px) {
    .admin-tile-topline[b-l2u2nl23q0] {
        flex-direction: column;
    }

    .admin-tile-icon[b-l2u2nl23q0] {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

@media (max-width: 576px) {
    .admin-tile[b-l2u2nl23q0] {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .admin-tile-body[b-l2u2nl23q0],
    .admin-tile-topline[b-l2u2nl23q0] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .admin-tile-link[b-l2u2nl23q0] {
        justify-content: center;
        width: 100%;
    }
}
/* /Pages/Admin/Benutzer.razor.rz.scp.css */
/* ============================================================
   BENUTZER.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / Benutzer.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-list[b-cdbgzzgvq1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-cards[b-cdbgzzgvq1] {
    gap: 10px;
}

.user-card[b-cdbgzzgvq1] {
    grid-template-columns: auto 1fr auto;
    gap: 0 1.2rem;
    padding: 16px 20px;
    align-items: center;
}

.user-card .reserv-card-overlay-toggle[b-cdbgzzgvq1] {
    display: none;
}

.user-card-leading-col[b-cdbgzzgvq1] {
    min-width: 0;
    grid-column: 1;
}

.user-card-head[b-cdbgzzgvq1] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-card-head-copy[b-cdbgzzgvq1] {
    min-width: 0;
    flex: 1 1 auto;
}

.user-card-details[b-cdbgzzgvq1] {
    display: contents;
}

.user-card-details > *[b-cdbgzzgvq1] {
    grid-column: 2;
}

.user-card .user-row-summary[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-card .user-row-avatar[b-cdbgzzgvq1] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.user-card .user-avatar-lg[b-cdbgzzgvq1],
.user-card .card-person-avatar[b-cdbgzzgvq1] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
}

.user-card .user-avatar-image[b-cdbgzzgvq1] {
    display: block;
    object-fit: cover;
}

.user-card .user-row-main[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.user-card .user-row-title[b-cdbgzzgvq1] {
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
}

.user-card .user-row-title h3[b-cdbgzzgvq1] {
    font-size: var(--text-sm);
    font-weight: 700;
}

.user-card .user-row-badges[b-cdbgzzgvq1] {
    gap: 0.35rem;
}

.user-card .user-field-grid[b-cdbgzzgvq1] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
}

.user-card .user-field-wide[b-cdbgzzgvq1] {
    grid-column: auto;
}

.user-card .user-field-label[b-cdbgzzgvq1] {
    font-size: 0.72rem;
}

.user-card .user-field-value[b-cdbgzzgvq1] {
    font-size: 0.92rem;
    color: var(--text);
}

.user-card .user-row-actions[b-cdbgzzgvq1] {
    align-items: center;
    justify-content: flex-end;
    min-width: 210px;
    grid-column: 3;
}

.user-card--admin[b-cdbgzzgvq1] {
    background:
        linear-gradient(90deg, rgba(217,119,6,0.22) 0%, rgba(217,119,6,0.09) 28%, rgba(217,119,6,0.03) 56%, rgba(255,255,255,0) 100%),
        var(--surface-2);
    border-color: rgba(251,191,36,0.10);
}

.user-card--mitglied[b-cdbgzzgvq1] {
    background:
        linear-gradient(90deg, rgba(22,163,74,0.18) 0%, rgba(22,163,74,0.08) 28%, rgba(22,163,74,0.03) 56%, rgba(255,255,255,0) 100%),
        var(--surface-2);
    border-color: rgba(74,222,128,0.10);
}

.user-card--benutzer[b-cdbgzzgvq1] {
    background:
        linear-gradient(90deg, rgba(47,107,122,0.22) 0%, rgba(47,107,122,0.09) 28%, rgba(47,107,122,0.03) 56%, rgba(255,255,255,0) 100%),
        var(--surface-2);
    border-color: rgba(93,164,181,0.10);
}

.user-card--inactive[b-cdbgzzgvq1] {
    opacity: 0.72;
}

.user-row-card[b-cdbgzzgvq1],
/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.profile-panel[b-cdbgzzgvq1] {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    background: var(--surface-2);
}

/* .upload-card, .upload-hint, .pending-file-chip global in app.css */

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.user-row-card[b-cdbgzzgvq1] {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-card);
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-summary[b-cdbgzzgvq1] {
    display: flex;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-main[b-cdbgzzgvq1] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
    flex: 1;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-title[b-cdbgzzgvq1] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-title h3[b-cdbgzzgvq1] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-badges[b-cdbgzzgvq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-field-grid[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-field[b-cdbgzzgvq1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-field-wide[b-cdbgzzgvq1] {
    grid-column: span 2;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-field-label[b-cdbgzzgvq1] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-field-value[b-cdbgzzgvq1] {
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-word;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-actions[b-cdbgzzgvq1] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-avatar-image[b-cdbgzzgvq1],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar-fallback[b-cdbgzzgvq1] {
    border-radius: 24px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar-image[b-cdbgzzgvq1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* UI-Regel: orangener Initialen-Avatar als Fallback, wenn kein Profilbild hinterlegt ist */
.user-avatar-fallback[b-cdbgzzgvq1] {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--primary);
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.28);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar-lg[b-cdbgzzgvq1] {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-avatar-preview[b-cdbgzzgvq1] {
    width: 168px;
    height: 168px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.user-modal-grid[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 1.5rem;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.user-form-grid[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-status-strip[b-cdbgzzgvq1] {
    display: flex;
    justify-content: flex-end;
    margin: -0.4rem 0 1rem;
}

.admin-status-chip[b-cdbgzzgvq1] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-status-chip strong[b-cdbgzzgvq1] {
    color: var(--text);
}

.admin-permission-card[b-cdbgzzgvq1] {
    margin: 0.8rem 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    box-shadow: var(--shadow-card);
}

.admin-permission-header[b-cdbgzzgvq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 800;
}

.admin-permission-pill[b-cdbgzzgvq1] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: var(--text);
    background: rgba(255,255,255,0.06);
    box-shadow: none;
    font-size: var(--text-xs);
    font-weight: 800;
}

.admin-permission-text[b-cdbgzzgvq1] {
    margin: 0.55rem 0 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.55;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.role-info-card[b-cdbgzzgvq1] {
    margin: 0.8rem 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(249,115,22,0.28);
    border-radius: 20px;
    background: rgba(249,115,22,0.06);
    box-shadow: var(--shadow-card);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.role-info-header[b-cdbgzzgvq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 800;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-pill[b-cdbgzzgvq1] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    font-size: var(--text-xs);
    font-weight: 800;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-list[b-cdbgzzgvq1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: stretch;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-item[b-cdbgzzgvq1] {
    height: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.role-info-item.is-active[b-cdbgzzgvq1] {
    border-color: rgba(249,115,22,0.28);
    background: rgba(249,115,22,0.08);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-item strong[b-cdbgzzgvq1] {
    display: block;
    color: var(--text);
    font-size: var(--text-sm);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-item p[b-cdbgzzgvq1] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.55;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.profile-panel[b-cdbgzzgvq1] {
    padding: 1rem;
    background: var(--surface-2);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.profile-panel h4[b-cdbgzzgvq1] {
    margin: 0;
    font-size: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.profile-panel p[b-cdbgzzgvq1] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.profile-preview[b-cdbgzzgvq1] {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* .user-feedback global als .page-feedback in app.css */

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 980px) {
    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .user-row-card[b-cdbgzzgvq1] {
        flex-direction: column;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .user-field-grid[b-cdbgzzgvq1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .user-row-actions[b-cdbgzzgvq1] {
        justify-content: flex-start;
    }
}

@media (max-width: 1330px) {
    .user-cards[b-cdbgzzgvq1] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .user-card[b-cdbgzzgvq1] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        align-items: start;
        gap: 0.7rem !important;
    }

    .user-card-leading-col[b-cdbgzzgvq1],
    .user-card-details[b-cdbgzzgvq1],
    .user-card .user-row-actions[b-cdbgzzgvq1] {
        grid-column: 1 / -1;
    }

    .user-card-details > *[b-cdbgzzgvq1] {
        grid-column: 1 / -1;
    }

    .user-card-details[b-cdbgzzgvq1] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        width: 100%;
    }

    .user-card .reserv-card-overlay-toggle[b-cdbgzzgvq1] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: userChevronFloat-b-cdbgzzgvq1 2.2s ease-in-out infinite;
    }

    .user-card .user-row-main[b-cdbgzzgvq1] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .user-card .user-field-grid[b-cdbgzzgvq1] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .user-card .user-row-actions[b-cdbgzzgvq1] {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
        padding-bottom: 1.6rem;
    }

    .user-card-details[b-cdbgzzgvq1],
    .user-card .user-row-actions[b-cdbgzzgvq1] {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    .user-card.reserv-card--expanded .user-card-details[b-cdbgzzgvq1],
    .user-card.reserv-card--expanded .user-row-actions[b-cdbgzzgvq1] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .user-card.reserv-card--expanded .reserv-card-overlay-icon[b-cdbgzzgvq1] {
        transform: rotate(180deg);
    }

    .user-card.reserv-card--expanded .reserv-card-overlay-toggle[b-cdbgzzgvq1] {
        animation: none;
    }

    .user-card:hover .reserv-card-overlay-toggle[b-cdbgzzgvq1] {
        color: var(--primary-hover);
    }

    .user-card .reserv-card-overlay-toggle:hover .reserv-card-overlay-icon[b-cdbgzzgvq1],
    .user-card .reserv-card-overlay-toggle:focus-visible .reserv-card-overlay-icon[b-cdbgzzgvq1] {
        opacity: 1;
        transform: scale(1.03);
    }

    .user-card .reserv-card-overlay-toggle:focus-visible[b-cdbgzzgvq1] {
        outline: none;
        color: var(--primary-hover);
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 860px) {
    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .user-modal-grid[b-cdbgzzgvq1] {
        grid-template-columns: 1fr;
    }

    .role-info-list[b-cdbgzzgvq1] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    .user-cards[b-cdbgzzgvq1] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .user-card[b-cdbgzzgvq1] {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        row-gap: 0.8rem;
        justify-items: center;
        text-align: center;
        padding: 1rem 1rem 1.6rem;
    }

    .user-card .user-row-summary[b-cdbgzzgvq1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .user-card .user-row-main[b-cdbgzzgvq1],
    .user-card .user-row-title[b-cdbgzzgvq1] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .user-card .user-row-badges[b-cdbgzzgvq1] {
        justify-content: center;
    }

    .user-card-head[b-cdbgzzgvq1] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    .user-card-head-copy[b-cdbgzzgvq1] {
        width: 100%;
        text-align: center;
    }

    .user-card .user-field[b-cdbgzzgvq1] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .user-card.reserv-card--expanded .user-row-actions[b-cdbgzzgvq1] {
        justify-content: center;
        padding-bottom: 1.4rem;
        width: 100%;
    }

    .user-form-grid[b-cdbgzzgvq1],
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .user-field-grid[b-cdbgzzgvq1] {
        grid-template-columns: 1fr;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .user-field-wide[b-cdbgzzgvq1] {
        grid-column: auto;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .user-avatar-preview[b-cdbgzzgvq1] {
        width: 132px;
        height: 132px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .user-row-card[b-cdbgzzgvq1] {
        padding: 1rem;
    }

}

@keyframes userChevronFloat-b-cdbgzzgvq1 {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

/* ============================================================
   TAB-LEISTE
   ============================================================ */

/* Navigationsregel: trennt Benutzer- und Mitglieder-Inhalt über eine klar lesbare Tab-Leiste */
.admin-tab-bar[b-cdbgzzgvq1] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* UI-Regel: inaktiver Tab – dezente Darstellung, die den aktiven Tab hervortreten lässt */
.admin-tab[b-cdbgzzgvq1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    min-height: 42px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.admin-tab--mitglied[b-cdbgzzgvq1] {
    background: rgba(34,197,94,0.10);
    border-color: rgba(34,197,94,.18);
    color: #86efac;
}

.admin-tab--benutzer[b-cdbgzzgvq1] {
    background: rgba(47,107,122,0.14);
    border-color: rgba(47,107,122,.24);
    color: #8ac7d5;
}

/* Zustandsregel: aktiver Tab erhält orangene Unterlinie und primäre Textfarbe */
.admin-tab.active[b-cdbgzzgvq1] {
    color: #ffffff;
    border-bottom-color: var(--primary);
    background: #ea580c;
    border-color: rgba(249,115,22,.28);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Zustandsregel: Hover auf inaktivem Tab – leichter Hinweis ohne Ablenkung */
.admin-tab:not(.active):hover[b-cdbgzzgvq1] {
    color: #ffffff;
    filter: brightness(1.04);
    transform: translateY(-1px);
}

/* UI-Regel: kleine Zahl-Pill neben dem Tab-Label zeigt die aktuelle Datensatzmenge an */
.tab-count[b-cdbgzzgvq1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}

/* Zustandsregel: im aktiven Tab bekommt die Pill die Primärfarbe */
.admin-tab.active .tab-count[b-cdbgzzgvq1] {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

@media (max-width: 900px) {
    .admin-tab[b-cdbgzzgvq1] {
        flex: 1 1 180px;
    }
}

/* ============================================================
   MITGLIEDER-TABELLE (Styles aus Mitglieder.razor.css übernommen)
   ============================================================ */

/* UI-Regel: Namenszeile mit Avatar-Pill und Text nebeneinander */
.member-name-cell[b-cdbgzzgvq1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* UI-Regel: runder Initialen-Avatar für Mitglieder – orange Akzentfarbe passend zum Design */
.member-avatar[b-cdbgzzgvq1] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* UI-Regel: klickbarer E-Mail-Link in Tabellenzeilen */
.text-link[b-cdbgzzgvq1] {
    color: var(--info);
    text-decoration: none;
    font-size: var(--text-sm);
}

/* Zustandsregel: Unterstreichung beim Hover zeigt Klickbarkeit an */
.text-link:hover[b-cdbgzzgvq1] {
    text-decoration: underline;
    color: var(--info);
}

/* Responsive Schlussregel: gewinnt gegen Basiskartenregeln und hält Benutzeraktionen mobil erreichbar */
@media (max-width: 640px) {
    /* Flächenregel: reduziert Nebenpanels im Dialog auf mobile Innenabstände */
    .profile-panel[b-cdbgzzgvq1],
    .upload-card[b-cdbgzzgvq1] {
        padding: 0.85rem;
    }

    .admin-permission-header[b-cdbgzzgvq1],
    .role-info-header[b-cdbgzzgvq1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-tab[b-cdbgzzgvq1] {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
        margin-bottom: 0;
    }

    .admin-tab-bar[b-cdbgzzgvq1] {
        border-bottom: 0;
        gap: 8px;
    }

    .admin-status-strip[b-cdbgzzgvq1] {
        justify-content: flex-start;
    }
}

/* .char-counter global in app.css */
/* /Pages/Admin/Documents.razor.rz.scp.css */
/* ============================================================
   DOCUMENTS.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / Documents.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.doc-type-icon[b-o0aarp4u6l] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
}

.card-person-avatar[b-o0aarp4u6l] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(249,115,22,0.10);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

.card-person-avatar--icon svg[b-o0aarp4u6l] {
    width: 18px;
    height: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.doc-name-link[b-o0aarp4u6l] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.doc-name-button[b-o0aarp4u6l] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.doc-name-link:hover[b-o0aarp4u6l] {
    color: var(--primary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.doc-ext[b-o0aarp4u6l] {
    font-weight: 500;
}

/* .document-feedback global als .page-feedback in app.css */

/* .upload-hint, .pending-file-chip global in app.css */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-files[b-o0aarp4u6l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.doc-name-link > span:first-child[b-o0aarp4u6l],
.doc-table-wrap[b-o0aarp4u6l] {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.doc-table-badge[b-o0aarp4u6l] {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
}

/* .form-label (flex-Erweiterung) und .char-counter global in app.css */
.form-label[b-o0aarp4u6l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview[b-o0aarp4u6l] {
    min-height: 420px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-frame[b-o0aarp4u6l] {
    width: 100%;
    min-height: 68vh;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: var(--surface-1);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-image[b-o0aarp4u6l] {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--surface-1);
    object-fit: contain;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-fallback[b-o0aarp4u6l] {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: var(--surface-1);
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .doc-type-icon[b-o0aarp4u6l] {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .doc-name-link[b-o0aarp4u6l] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* UI-Regel: verkürzt Dokumentvorschauen, damit Dialogaktionen mobil erreichbar bleiben */
    .document-preview[b-o0aarp4u6l] {
        min-height: 260px;
    }

    /* UI-Regel: passt eingebettete Dokumente an Smartphone-Höhen an */
    .document-preview-frame[b-o0aarp4u6l] {
        min-height: 56dvh;
    }

    /* UI-Regel: reduziert Fallback-Flächen, ohne Hinweise zu verstecken */
    .document-preview-fallback[b-o0aarp4u6l] {
        min-height: 240px;
        padding: 1.25rem;
    }

}

@media (max-width: 900px) and (min-width: 641px) {
    .document-preview-frame[b-o0aarp4u6l] {
        min-height: 60dvh;
    }
}

.document-preview .empty-state-title[b-o0aarp4u6l],
.document-preview .empty-state-text[b-o0aarp4u6l] {
    max-width: 100%;
}

/* RESPONSIV ≤1330px – 2-spaltig nebeneinander, Actions immer sichtbar */

@media (max-width: 1330px) {
    /* Container: 2 Karten nebeneinander */
    .card-reference-list[b-o0aarp4u6l] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    /* Karte: Accent-Balken + Inhalt gestapelt, kein Collapse */
    .entry-card[b-o0aarp4u6l] {
        grid-template-columns: 4px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start;
    }

    /* Actions: unter den Inhalt, volle Breite, linksbündig */
    .entry-card-side[b-o0aarp4u6l] {
        grid-column: 2;
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* RESPONSIV ≤640px – einspaltig */

@media (max-width: 640px) {
    /* Container: zurück zu einspaltig */
    .card-reference-list[b-o0aarp4u6l] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
}

/* CHEVRON-TOGGLE */

/* Auf Desktop unsichtbar */
.doc-card-toggle[b-o0aarp4u6l] {
    display: none;
}

/* Chevron-Icon mit Übergang beim Aufklappen */
.doc-card-chevron[b-o0aarp4u6l] {
    opacity: 0.92;
    transition: transform var(--transition);
}

/* RESPONSIV ≤640px – Chevron-Collapse */

@media (max-width: 640px) {
    /* Karte: Platz für Chevron am unteren Rand, Inhalte zentriert */
    .entry-card[b-o0aarp4u6l] {
        padding-bottom: 1.6rem !important;
        position: relative;
        text-align: center;
        justify-items: center;
    }

    /* Avatar + Titel stapeln sich vertikal, zentriert */
    .entry-card-head[b-o0aarp4u6l] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 0.8rem !important;
    }

    /* Titelbereich zentriert */
    .entry-card-head-copy[b-o0aarp4u6l] {
        width: 100%;
        text-align: center;
    }

    /* Badges und Meta-Felder zentriert */
    .entry-card-meta[b-o0aarp4u6l] {
        justify-content: center !important;
        text-align: center;
    }

    /* Aktionsbuttons zentriert */
    .entry-card-side[b-o0aarp4u6l] {
        justify-content: center;
    }

    /* Globale flex-start-Regel überschreiben */
    .entry-card-actions[b-o0aarp4u6l] {
        justify-content: center !important;
        flex-wrap: wrap;
        width: 100%;
    }

    /* Chevron: animierter Toggle am unteren Rand der Karte */
    .doc-card-toggle[b-o0aarp4u6l] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: docChevronFloat-b-o0aarp4u6l 2.2s ease-in-out infinite;
    }

    /* Meta-Bereich: standardmäßig eingeklappt */
    .entry-card-meta[b-o0aarp4u6l] {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    /* Aktions-Bereich: standardmäßig ausgeblendet */
    .entry-card-side[b-o0aarp4u6l] {
        display: none;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* Meta-Bereich: aufgeklappt */
    .entry-card--expanded .entry-card-meta[b-o0aarp4u6l] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Aktions-Bereich: aufgeklappt */
    .entry-card--expanded .entry-card-side[b-o0aarp4u6l] {
        display: flex;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
        padding-bottom: 1.6rem;
    }

    /* Chevron dreht sich beim Aufklappen */
    .entry-card--expanded .doc-card-chevron[b-o0aarp4u6l] {
        transform: rotate(180deg);
    }

    /* Chevron-Animation pausieren wenn aufgeklappt */
    .entry-card--expanded .doc-card-toggle[b-o0aarp4u6l] {
        animation: none;
    }
}

/* KEYFRAME: schwebende Chevron-Animation */

@keyframes docChevronFloat-b-o0aarp4u6l {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}
/* /Pages/Admin/Email.razor.rz.scp.css */
/* ============================================================
   EMAIL.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / Email.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.email-admin-grid[b-kc0qszo1u5] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card[b-kc0qszo1u5] {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    background: var(--surface-2);
    padding: 1rem;
    box-shadow: var(--shadow-card);
    min-width: 0;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-status-card[b-kc0qszo1u5] {
    grid-column: 1 / -1;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card-header[b-kc0qszo1u5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.email-card-header > *[b-kc0qszo1u5] {
    min-width: 0;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card-header h3[b-kc0qszo1u5] {
    margin: 0;
    font-size: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card-header p[b-kc0qszo1u5] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.email-form-grid[b-kc0qszo1u5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.email-check[b-kc0qszo1u5] {
    margin-top: 0.75rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card-actions[b-kc0qszo1u5] {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Status-Liste: vertikale Auflistung der Konfigurationszustände */
.status-list[b-kc0qszo1u5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Status-Zeile: Dot, Label und Statustext in einer Reihe */
.status-row[b-kc0qszo1u5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* Letzte Status-Zeile ohne untere Trennlinie */
.status-row:last-child[b-kc0qszo1u5] {
    border-bottom: none;
}

/* Statustext rechts ausgerichtet */
.status-value[b-kc0qszo1u5] {
    margin-left: auto;
    font-weight: 600;
}

/* .email-feedback global als .page-feedback in app.css */

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 900px) {
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .email-admin-grid[b-kc0qszo1u5] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    /* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
    .email-form-grid[b-kc0qszo1u5] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Schlussregel: stapelt Kartenköpfe auf kleinen Viewports */
@media (max-width: 640px) {
    /* Flächenregel: stapelt E-Mail-Kartenköpfe vertikal */
    .email-card-header[b-kc0qszo1u5] {
        flex-direction: column;
    }

    /* Aktionszeile bleibt horizontal – Button und Hinweistext nebeneinander */
    .email-card-actions[b-kc0qszo1u5] {
        flex-wrap: wrap;
        align-items: center;
    }
}
/* /Pages/Admin/Events.razor.rz.scp.css */
/* ============================================================
   EVENTS.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält nur noch admin-spezifische Veranstaltungsregeln.
   - Gemeinsame Filter- und Card-Basis liegt zentral in app.css.

   Zweck:
   - Vermeidet doppelte Status- und Card-Definitionen.
   ============================================================ */

/* .event-feedback global als .page-feedback in app.css */

.event-time-cell[b-ynff6y9i9r] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.event-time-range[b-ynff6y9i9r] {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
}

.event-time-cell > .text-tertiary[b-ynff6y9i9r] {
    font-size: var(--text-xs);
    line-height: 1.35;
    white-space: nowrap;
}

.event-time-cell > .text-tertiary[b-ynff6y9i9r]::before {
    content: "|";
    margin-right: 0.35rem;
    color: var(--text-tertiary);
}

/* .form-label (flex) und .char-counter global in app.css */
.form-label[b-ynff6y9i9r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.card-person-avatar[b-ynff6y9i9r] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(249,115,22,0.10);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

@media (max-width: 640px) {
    .event-time-range[b-ynff6y9i9r],
    .event-time-cell > .text-tertiary[b-ynff6y9i9r] {
        white-space: normal;
    }

    .event-time-cell[b-ynff6y9i9r] {
        flex-wrap: wrap;
    }

    .event-time-cell > .text-tertiary[b-ynff6y9i9r]::before {
        content: none;
        margin-right: 0;
    }
}
/* /Pages/Admin/Inventory.razor.rz.scp.css */
/* ============================================================
   INVENTORY.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / Inventory.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: listet Inventareinträge als kompakte Zeilen untereinander */
.inventory-admin-list[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.inventory-admin-columns[b-7huv431dci] {
    display: none;
}

.inventory-admin-column[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.inventory-image-panel[b-7huv431dci] {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    background: var(--surface-2);
}

/* .upload-card, .upload-hint, .pending-file-chip global in app.css */

/* Flächenregel: 5-Spalten-Grid – alle drei Inhaltsbereiche gleichwertig, Badges+Buttons auto */
.inventory-admin-card[b-7huv431dci] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) auto auto;
    align-items: center;
    gap: 0 1.2rem;
    padding: 0.8rem 1.15rem;
    position: relative;
}

/* Layoutregel: Bild und Titel horizontal und vertikal zentriert nebeneinander */
.inventory-admin-image-title[b-7huv431dci] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

/* Titelregel: zeigt alle 80 Zeichen auf zwei Zeilen – kein Abschneiden */
.inventory-admin-image-title h3[b-7huv431dci] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1;
}

/* Layoutregel: einzelnes Detailfeld mit Label und Wert */
.inventory-field[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Typoregel: kleines Uppercase-Label über dem Feldwert */
.inventory-field-label[b-7huv431dci] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* Typoregel: Feldwert – bricht sauber um, kein Overflow */
.inventory-field-value[b-7huv431dci] {
    font-size: 0.92rem;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Layoutregel: Aktions-Buttons als feste Gruppe ganz rechts */
.inventory-admin-actions[b-7huv431dci] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.inventory-card-overlay-toggle[b-7huv431dci] {
    display: none;
}

.inventory-card-details[b-7huv431dci] {
    display: contents;
}

.inventory-card-overlay-icon[b-7huv431dci] {
    transition: transform var(--transition);
}

@media (max-width: 1330px) {
    .inventory-admin-list--stack[b-7huv431dci] {
        display: none;
    }

    .inventory-admin-columns[b-7huv431dci] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .inventory-admin-card[b-7huv431dci] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        align-items: start;
        gap: 0.7rem 1rem !important;
    }

    .inventory-admin-image-title[b-7huv431dci] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .inventory-card-overlay-toggle[b-7huv431dci] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: inventoryChevronFloat 2.2s ease-in-out infinite;
    }

    .inventory-card-details[b-7huv431dci] {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem 1rem;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    .inventory-card--expanded .inventory-card-details[b-7huv431dci] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .inventory-card--expanded .inventory-card-overlay-icon[b-7huv431dci] {
        transform: rotate(180deg);
    }

    .inventory-card--expanded .inventory-card-overlay-toggle[b-7huv431dci] {
        animation: none;
    }

    .inventory-admin-card:hover .inventory-card-overlay-toggle[b-7huv431dci] {
        color: var(--primary-hover);
    }

    .inventory-card-overlay-toggle:hover .inventory-card-overlay-icon[b-7huv431dci],
    .inventory-card-overlay-toggle:focus-visible .inventory-card-overlay-icon[b-7huv431dci] {
        opacity: 1;
        transform: scale(1.03);
    }

    .inventory-card-overlay-toggle:focus-visible[b-7huv431dci] {
        outline: none;
        color: var(--primary-hover);
    }

    .inventory-admin-actions[b-7huv431dci] {
        justify-self: stretch;
        width: 100%;
        margin-top: 0.15rem;
        padding-bottom: 1.6rem;
    }
}

.inventory-preview-button[b-7huv431dci],
.gallery-image-button[b-7huv431dci],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail[b-7huv431dci] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.inventory-preview-button[b-7huv431dci] {
    display: inline-flex;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

/* Größenregel: Thumbnail als klares visuelles Anker-Element */
.inventory-preview-image[b-7huv431dci],
.inventory-placeholder[b-7huv431dci] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
}

.inventory-preview-image[b-7huv431dci],
.gallery-image[b-7huv431dci],
.lightbox-main-image[b-7huv431dci],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail img[b-7huv431dci] {
    display: block;
    object-fit: cover;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.inventory-placeholder[b-7huv431dci] {
    display: grid;
    place-items: center;
    background: rgba(249, 115, 22, 0.10);
    color: var(--primary);
    font-weight: 700;
}

/* Label-Zeile: Text links, Zähler rechts – .char-counter global in app.css */
.form-label[b-7huv431dci] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.inventory-modal-grid[b-7huv431dci] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 1.5rem;
    align-items: start;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.inventory-image-panel[b-7huv431dci] {
    padding: 1rem;
    background: var(--surface-2);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.image-panel-header h4[b-7huv431dci] {
    margin: 0;
    font-size: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.image-panel-header p[b-7huv431dci] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-files[b-7huv431dci] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-previews[b-7huv431dci] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-preview[b-7huv431dci] {
    min-width: 0;
    margin: 0;
    padding: 0.45rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-preview img[b-7huv431dci] {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-preview figcaption[b-7huv431dci] {
    margin-top: 0.35rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.empty-gallery-state[b-7huv431dci] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.inventory-gallery-grid[b-7huv431dci] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.inventory-gallery-card[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.07);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-gallery-card.is-primary[b-7huv431dci] {
    border-color: rgba(249, 115, 22, 0.24);
    box-shadow: var(--shadow-card);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.gallery-image-button[b-7huv431dci] {
    border-radius: 16px;
    overflow: hidden;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.gallery-image[b-7huv431dci] {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.gallery-card-actions[b-7huv431dci] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* .inventory-feedback, .lightbox-* und @keyframes inventoryChevronFloat global in app.css */

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
/* .lightbox-* responsive Regeln global in app.css */
@media (max-width: 900px) {
    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .inventory-modal-grid[b-7huv431dci] {
        grid-template-columns: 1fr;
    }

    .gallery-card-actions .btn[b-7huv431dci] {
        flex: 1 1 180px;
        justify-content: center;
    }

    .image-panel-header[b-7huv431dci] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    .inventory-admin-list--stack[b-7huv431dci] {
        display: flex;
    }

    .inventory-admin-columns[b-7huv431dci] {
        display: none;
    }

    /* Layoutregel: auf kleinen Displays alles einspaltig stapeln */
    .inventory-admin-card[b-7huv431dci] {
        grid-template-columns: 1fr;
        row-gap: 0.8rem;
        justify-items: center;
        text-align: center;
        padding: 1rem;
    }

    .inventory-admin-image-title[b-7huv431dci],
    .inventory-card-details[b-7huv431dci],
    .inventory-admin-actions[b-7huv431dci] {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
    }

    .inventory-admin-image-title[b-7huv431dci] {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    .inventory-admin-image-title h3[b-7huv431dci] {
        text-align: center;
    }

    .inventory-field[b-7huv431dci] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .inventory-card-details[b-7huv431dci] {
        order: 3;
        grid-template-columns: 1fr;
    }

    /* Layoutregel: alle Grid-Zuweisungen aufheben */
    .inventory-admin-actions[b-7huv431dci] {
        justify-self: stretch;
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.35rem;
        order: 4;
        padding-bottom: 1.5rem;
    }

    .inventory-admin-actions .btn[b-7huv431dci] {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .inventory-gallery-grid[b-7huv431dci] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Responsive Schlussregel: gewinnt gegen frühere Mobile-Galerieregeln und hält Dialoge bedienbar */
@media (max-width: 640px) {
    /* Layoutregel: nutzt verfügbare Breite für Galerien ohne harte Zweispaltigkeit */
    .inventory-gallery-grid[b-7huv431dci] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .gallery-card-actions .btn[b-7huv431dci] {
        width: 100%;
    }

    /* Layoutregel: Badges und Aktionen auf sehr kleinen Displays umbrechen */
    .inventory-admin-right[b-7huv431dci] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

}

@media (max-width: 576px) {
    .inventory-admin-actions[b-7huv431dci] {
        justify-content: center;
        justify-self: center;
        width: 100%;
        gap: 0.5rem;
    }
}

/* Responsive Schlussregel: entspannt sehr schmale Smartphones in der Bildverwaltung */
@media (max-width: 430px) {
    .pending-image-previews[b-7huv431dci] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lightbox-main[b-7huv431dci] {
        min-height: 220px;
    }
}

/* ============================================================
   IMPORT-MODAL
   ============================================================ */

/* Hinweiszeile für die Vorlage */
.import-template-row[b-7huv431dci] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Upload-Dropzone: gibt dem Benutzer einen klar abgegrenzten Ablagebereich */
.import-upload-zone[b-7huv431dci] {
    border: 2px dashed rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.03);
    transition: border-color var(--transition), background var(--transition);
}

/* Hover-Zustand: zeigt visuell, dass die Zone aktiv ist */
.import-upload-zone:hover[b-7huv431dci],
.import-upload-zone:focus-within[b-7huv431dci] {
    border-color: rgba(249,115,22,0.4);
    background: rgba(249,115,22,0.04);
}

/* Label füllt die gesamte Dropzone für maximale Klickfläche */
.import-upload-label[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.75rem 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

/* Icon und Text innerhalb des Labels */
.import-upload-hint[b-7huv431dci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-sm);
}

/* Kleiner Hinweistext für erlaubte Formate */
.import-upload-hint small[b-7huv431dci] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Datei-Input ausblenden – das Label übernimmt den Klick */
.import-file-input[b-7huv431dci] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Kopfzeile der Vorschautabelle mit Zählern */
.import-preview-header[b-7huv431dci] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
}

/* Scrollbarer Wrapper für große Importlisten */
.import-preview-wrap[b-7huv431dci] {
    max-height: 340px;
    overflow-y: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Tabelle für die Importvorschau */
.import-preview-table[b-7huv431dci] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* Kopfzeile der Vorschautabelle */
.import-preview-table thead th[b-7huv431dci] {
    background: var(--border-light);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Datenzellen */
.import-preview-table tbody td[b-7huv431dci] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    vertical-align: middle;
}

/* Zeilennummer-Spalte schmaler */
.import-col-nr[b-7huv431dci] {
    color: var(--text-tertiary) !important;
    width: 2.5rem;
    text-align: right;
}

/* Sekundäre Felder dezenter darstellen */
.import-col-secondary[b-7huv431dci] {
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
}

/* Status-Zelle rechtsbündig */
.import-col-status[b-7huv431dci] {
    text-align: right;
    width: 1px;
    white-space: nowrap;
}

/* Ungültige Zeilen rot markieren */
.import-row-invalid td[b-7huv431dci] {
    background: rgba(239,68,68,0.06) !important;
}

/* Fehlertext in ungültigen Zeilen */
.import-row-error[b-7huv431dci] {
    color: var(--danger);
    font-size: var(--text-xs);
    white-space: nowrap;
}
/* /Pages/Admin/Settings.razor.rz.scp.css */
/* ============================================================
   SETTINGS.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Admin / Settings.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.settings-grid[b-35wllfy6qt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.settings-card[b-35wllfy6qt] {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    background: var(--surface-2);
    padding: 1rem;
    box-shadow: var(--shadow-card);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.settings-card-header[b-35wllfy6qt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-card-header h3[b-35wllfy6qt] {
    margin: 0;
    font-size: 1rem;
}

.settings-card-header > *[b-35wllfy6qt] {
    min-width: 0;
}

.settings-card-header p[b-35wllfy6qt] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.settings-log-card[b-35wllfy6qt] {
    overflow: hidden;
}

.settings-log-header[b-35wllfy6qt] {
    align-items: center;
}

.settings-log-meta[b-35wllfy6qt] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-log-empty[b-35wllfy6qt] {
    padding: 1rem;
    border: 1px dashed rgba(255,255,255,0.10);
    border-radius: 16px;
    color: var(--text-secondary);
    background: var(--surface-1);
}

.settings-log-list[b-35wllfy6qt] {
    display: grid;
    gap: 0.75rem;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.settings-log-entry[b-35wllfy6qt] {
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 16px;
    padding: 0.85rem;
    background: rgba(239, 68, 68, 0.08);
}

.settings-log-entry-head[b-35wllfy6qt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
}

.settings-log-level[b-35wllfy6qt] {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    color: #991b1b;
    background: rgba(220, 38, 38, 0.12);
}

.settings-log-category[b-35wllfy6qt] {
    overflow-wrap: anywhere;
}

.settings-log-message[b-35wllfy6qt] {
    color: var(--text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.settings-log-exception[b-35wllfy6qt] {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.55rem;
    color: var(--danger);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.settings-log-details[b-35wllfy6qt] {
    margin-top: 0.65rem;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.settings-log-details summary[b-35wllfy6qt] {
    cursor: pointer;
    font-weight: 800;
}

.settings-log-details pre[b-35wllfy6qt] {
    max-height: 260px;
    overflow: auto;
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    border-radius: 12px;
    color: #fee2e2;
    background: var(--surface-1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* .settings-feedback global als .page-feedback in app.css */

@media (max-width: 980px) {
    .settings-log-header[b-35wllfy6qt] {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .settings-log-meta[b-35wllfy6qt] {
        flex-direction: column;
        gap: 0.35rem;
    }
}

@media (max-width: 576px) {
    .settings-card-header[b-35wllfy6qt] {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-card[b-35wllfy6qt] {
        padding: 0.85rem;
        border-radius: 18px;
    }

    .settings-log-list[b-35wllfy6qt] {
        max-height: 54dvh;
        padding-right: 0;
    }

    .settings-log-header .btn[b-35wllfy6qt] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* ============================================================
   FORGOTPASSWORD.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / ForgotPassword.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-page[b-7o5veje45s] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(249, 115, 22, 0.12), transparent 32%),
        var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-shell[b-7o5veje45s] {
    width: 100%;
    max-width: 460px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.auth-card[b-7o5veje45s] {
    width: 100%;
    background: radial-gradient(circle at top, rgba(249,115,22,0.08), transparent 34%), linear-gradient(180deg, rgba(35, 35, 37, 0.98) 0%, rgba(27, 27, 29, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(4, 8, 14, 0.24),
        0 8px 18px rgba(4, 8, 14, 0.14);
    padding: 36px 36px 32px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-brand[b-7o5veje45s] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-logo[b-7o5veje45s] {
    width: 140px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(4, 8, 14, 0.24));
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.auth-header[b-7o5veje45s] {
    margin-bottom: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-title[b-7o5veje45s] {
    font-size: clamp(2rem, 4vw, 2.35rem);
    line-height: 1.05;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-subtitle[b-7o5veje45s] {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-form[b-7o5veje45s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-card :deep(.form-label)[b-7o5veje45s] {
    color: rgba(248, 250, 252, 0.92);
    font-weight: 600;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-7o5veje45s] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(4, 8, 14, 0.16);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-7o5veje45s]::placeholder {
    color: rgba(226, 232, 240, 0.36);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-input:focus[b-7o5veje45s] {
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.12),
        inset 0 1px 2px rgba(4, 8, 14, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-btn[b-7o5veje45s] {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    background: #f97316;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-link[b-7o5veje45s] {
    font-size: 0.84rem;
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(226, 232, 240, 0.18);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-link:hover[b-7o5veje45s] {
    color: #f8fafc;
    text-decoration-color: rgba(248, 250, 252, 0.6);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-links[b-7o5veje45s] {
    margin-top: 16px;
    text-align: center;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-success[b-7o5veje45s] {
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 16px;
    color: #dcfce7;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-error[b-7o5veje45s] {
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 16px;
    color: #fecaca;
    font-size: 0.9rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.auth-dev-panel[b-7o5veje45s] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-dev-title[b-7o5veje45s] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 6px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-dev-text[b-7o5veje45s] {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.74);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-dev-link[b-7o5veje45s] {
    color: #fdba74;
    word-break: break-all;
    font-size: 0.8rem;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 480px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-page[b-7o5veje45s] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-logo[b-7o5veje45s] {
        width: 118px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .auth-card[b-7o5veje45s] {
        padding: 26px 22px 22px;
        border-radius: 22px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-title[b-7o5veje45s] {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) and (max-height: 820px) {
    .auth-page[b-7o5veje45s] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ============================================================
   HOME.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Home.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Dashboard-Wrapper: transparente Basis ohne eigene Fläche */
.home-dashboard-page[b-y38cn6lbfn] {
    min-height: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* PageHeader: mehr Luft zwischen Hero und KPI-Karten */
.home-dashboard-page[b-y38cn6lbfn] (.page-header) {
    margin-bottom: 42px;
}

/* PageHeader-Inhalt: etwas mehr Abstand zwischen Titel und Untertitel */
.home-dashboard-page[b-y38cn6lbfn] (.page-header-content) {
    gap: 6px;
}

/* Begrüßungs-Titel: engere Laufweite für klarere Premium-Anmutung */
.home-dashboard-page[b-y38cn6lbfn] (.page-title) {
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Untertitel: luftigere Zeilenhöhe, leicht geöffnete Laufweite */
.home-dashboard-page[b-y38cn6lbfn] (.page-subtitle) {
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

/* KPI-Karten: kompakter Innenabstand für 4-spaltige Desktop-Zeile */
.home-dashboard-page[b-y38cn6lbfn] (.dashboard-card) {
    padding: 16px 18px 16px 16px;
    min-height: 0;
}

/* KPI-Karten Icon-Textblock: kompakter Abstand */
.home-dashboard-page[b-y38cn6lbfn] (.dc-main) {
    gap: 12px;
}

/* KPI-Karten Kopie: enger für kompaktes Layout */
.home-dashboard-page[b-y38cn6lbfn] (.dc-copy) {
    gap: 4px;
}

/* KPI-Karten Icon: kleiner für Desktop-Zeile */
.home-dashboard-page[b-y38cn6lbfn] (.dc-icon svg) {
    width: 36px;
    height: 36px;
}

/* KPI-Karten Titel: kompakte Schriftgröße */
.home-dashboard-page[b-y38cn6lbfn] (.dc-title) {
    font-size: 0.82rem;
}

/* KPI-Karten Zahlenwert: kompakte Schriftgröße */
.home-dashboard-page[b-y38cn6lbfn] (.dc-value) {
    font-size: 1.45rem;
}

/* KPI-Karten Pfeil-Button: kompaktere Größe */
.home-dashboard-page[b-y38cn6lbfn] (.dc-arrow) {
    width: 42px;
    margin: -16px -18px -16px 0;
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.28));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.9);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.07),
        inset 8px 0 14px rgba(0,0,0,0.10);
    transform: none;
}

.home-dashboard-page[b-y38cn6lbfn] (.dc-arrow::before) {
    content: none;
}

.home-dashboard-page[b-y38cn6lbfn] (.dc-arrow svg) {
    position: relative;
    z-index: 1;
    opacity: 0.95;
    filter: none;
}

.home-dashboard-page[b-y38cn6lbfn] (.dashboard-card:hover .dc-arrow) {
    background: linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0.32));
    border-color: rgba(255,255,255,0.20);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.10),
        inset 10px 0 16px rgba(0,0,0,0.14);
    color: #ffffff;
    transform: translateX(2px);
}

.home-dashboard-page[b-y38cn6lbfn] (.dashboard-card:hover .dc-arrow svg) {
    transform: translateX(1px);
    opacity: 1;
}

/* KPI-Karten-Grid: 4 Spalten auf Desktop */
.dashboard-grid[b-y38cn6lbfn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 42px;
}

/* Reihenfolge KPI-Karten: Reservierungen zuerst, dann Inventar */
.dashboard-grid > :nth-child(1)[b-y38cn6lbfn] { order: 2; }
.dashboard-grid > :nth-child(2)[b-y38cn6lbfn] { order: 1; }
.dashboard-grid > :nth-child(3)[b-y38cn6lbfn] { order: 3; }
.dashboard-grid > :nth-child(4)[b-y38cn6lbfn] { order: 4; }

/* Info-Grid: 2-spaltiges Layout für die vier großen Cards */
.info-grid[b-y38cn6lbfn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

/* Info-Grid-Kinder: gleichmäßige Höhe */
.info-grid > *[b-y38cn6lbfn] {
    height: 100%;
    min-width: 0;
}

/* Reihenfolge Info-Grid: Nächste Reservierungen links oben */
.info-grid > :nth-child(1)[b-y38cn6lbfn] { order: 2; }
.info-grid > :nth-child(2)[b-y38cn6lbfn] { order: 1; }
.info-grid > :nth-child(3)[b-y38cn6lbfn] { order: 4; }
.info-grid > :nth-child(4)[b-y38cn6lbfn] { order: 3; }

/* Info-Cards: dunkle Fläche klar vom Hintergrund abgehoben */
.home-dashboard-page[b-y38cn6lbfn] (.info-card.card) {
    background: #2d2d31 !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
    overflow: hidden;
}

/* Card-Header: klare Trennung zwischen Titel-Zone und Inhalt */
.home-dashboard-page[b-y38cn6lbfn] (.card-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 20px 24px 14px !important;
    background: linear-gradient(180deg, rgba(249,115,22,0.18) 0%, rgba(255,255,255,0.03) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* Card-Titel: klar, präzise, leicht geöffnete Laufweite */
.home-dashboard-page[b-y38cn6lbfn] (.card-title) {
    font-size: 0.97rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}

/* Card-Body: großzügige Innenabstände für Atemraum */
.home-dashboard-page[b-y38cn6lbfn] (.card-body) {
    padding: 22px 24px 26px !important;
}

/* Badges in den Cards: kompakte Pill-Form */
.home-dashboard-page[b-y38cn6lbfn] (.badge) {
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    line-height: 28px;
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Info-Panel: transparente Hülle ohne eigene Fläche */
.home-info-panel[b-y38cn6lbfn] {
    min-height: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

/* Status-Liste: vertikale Auflistung der Inventar-Zustände */
.status-list[b-y38cn6lbfn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Status-Zeile: kompaktes Padding für ausgeglichenen Rhythmus bei vier Einträgen */
.status-row[b-y38cn6lbfn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* Letzte Status-Zeile ohne untere Trennlinie */
.status-row:last-child[b-y38cn6lbfn] {
    border-bottom: none;
}

/* Badge in Status-Zeile: quadratische Pill, zentrierter Inhalt */
.status-row .badge[b-y38cn6lbfn] {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Hilfklasse: schiebt Badge-Elemente an den rechten Rand */
.ms-auto[b-y38cn6lbfn] {
    margin-left: auto;
}

/* Dokumenten- und Reservierungsliste: vertikaler Stack mit gleichmäßigem Abstand */
.latest-doc-list[b-y38cn6lbfn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Einzelne Zeile: Grid-Layout mit Icon, Inhalt und Pfeil — klar definierte Karte */
.latest-doc-row[b-y38cn6lbfn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

/* Hover-Zustand: leichtes Aufhellen — heller als Ruhezustand, nahe an der Inner Card */
.latest-doc-row:hover[b-y38cn6lbfn] {
    background: rgba(0,0,0,0.04);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(0);
}

/* Active-Zustand: kein zusätzliches Absenken */
.latest-doc-row:active[b-y38cn6lbfn] {
    transform: translateY(0);
}

/* Letzte Zeile mit minimalem Abstand nach unten */
.latest-doc-row:last-of-type[b-y38cn6lbfn] {
    margin-bottom: 2px;
}

/* Fokus-Zustand: orange Akzentring für Tastaturbedienung */
.latest-doc-row:focus-visible[b-y38cn6lbfn],
.latest-doc-link:focus-visible[b-y38cn6lbfn] {
    outline: none;
    border-color: rgba(249,115,22,.38);
    box-shadow: 0 0 0 4px rgba(249,115,22,.10);
}

/* Icon-Box: klar definierte Pill mit zentriertem SVG */
.latest-doc-icon[b-y38cn6lbfn] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
}

/* Textinhalt: stapelt Titel und Meta untereinander */
.latest-doc-content[b-y38cn6lbfn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Titel: semibold, klare Lesbarkeit, truncation bei Überlänge */
.latest-doc-title[b-y38cn6lbfn] {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta-Text: sekundäre Information, kompakt und gedämpft */
.latest-doc-meta[b-y38cn6lbfn] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pfeil-Hinweis: dezenter Chevron, reagiert auf Row-Hover */
.latest-doc-arrow[b-y38cn6lbfn] {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(249,115,22,0.58);
    background: transparent;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

/* Pfeil bewegt sich bei Hover leicht nach rechts */
.latest-doc-row:hover .latest-doc-arrow[b-y38cn6lbfn] {
    transform: translateX(2px);
    background: transparent;
    border-color: transparent;
    color: rgba(249,115,22,0.68);
}

.latest-doc-arrow svg[b-y38cn6lbfn] {
    width: 20px;
    height: 20px;
    stroke-width: 3.4;
}

.latest-doc-arrow svg line[b-y38cn6lbfn] {
    display: none;
}

/* „Alle anzeigen"-Link: linksbündig mit etwas Abstand nach oben */
.latest-doc-link[b-y38cn6lbfn] {
    align-self: flex-start;
    margin-top: 12px;
    text-decoration: none;
}

/* Kein Unterstrich beim Hovern des Links */
.latest-doc-link:hover[b-y38cn6lbfn] {
    text-decoration: none;
}

/* Empty-State: vertikal ausbalancierter Platzhalter bei leeren Cards */
.latest-doc-empty[b-y38cn6lbfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 24px 20px 28px;
    text-align: center;
}

/* Sekundärer Text im Empty-State: begrenzte Breite für bessere Lesbarkeit */
.latest-doc-empty .text-secondary[b-y38cn6lbfn] {
    max-width: 320px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Platzhalter-Icon: leicht gedämpft, nicht dominant */
.placeholder-icon[b-y38cn6lbfn] {
    opacity: 0.5;
    filter: saturate(.9);
}

/* Responsive: ab 1415px wechseln KPI-Karten von 4 auf 2×2 */
@media (max-width: 1415px) {
    .dashboard-grid[b-y38cn6lbfn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive: ab 992px wird Info-Grid einspaltig */
@media (max-width: 992px) {
    .info-grid[b-y38cn6lbfn] {
        grid-template-columns: 1fr;
    }
}

/* Responsive: ab 798px – Mobil-Breakpoint, KPI-Karten 2×2, originale Card-Größen */
@media (max-width: 798px) {
    .dashboard-grid[b-y38cn6lbfn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 30px;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.dashboard-card) {
        padding: 20px 18px;
        min-height: unset;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.dc-icon svg) {
        width: 42px;
        height: 42px;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.dc-title) {
        font-size: 0.96rem;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.dc-value) {
        font-size: 2rem;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.dc-arrow) {
        width: 48px;
        margin: -20px -18px -20px 0;
    }

    .info-grid[b-y38cn6lbfn] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .info-grid > :nth-child(1)[b-y38cn6lbfn] { order: 4; }
    .info-grid > :nth-child(2)[b-y38cn6lbfn] { order: 1; }
    .info-grid > :nth-child(3)[b-y38cn6lbfn] { order: 2; }
    .info-grid > :nth-child(4)[b-y38cn6lbfn] { order: 3; }
}

/* Responsive: ab 620px – KPI-Kacheln 2×2, Pfeil weg, Buttons zentriert */
@media (max-width: 620px) {
    .dashboard-grid[b-y38cn6lbfn] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* „Alle anzeigen"-Buttons in den Info-Cards zentrieren */
    .latest-doc-link[b-y38cn6lbfn] {
        display: flex;
        margin: 18px auto 4px;
    }
}

/* Responsive: ab 576px kompaktere Card-Innenabstände und Row-Layout */
@media (max-width: 576px) {
    .home-dashboard-page[b-y38cn6lbfn] (.card-header) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        min-height: 60px;
        padding: 16px 18px 12px !important;
        text-align: left !important;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.info-card.card) {
        border-radius: 18px;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.card-header > .card-title) {
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.card-header > .badge) {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(255,255,255,0.9);
        box-shadow: none;
        line-height: 1;
    }

    .home-dashboard-page[b-y38cn6lbfn] (.card-header > .badge::before) {
        content: "(";
    }

    .home-dashboard-page[b-y38cn6lbfn] (.card-header > .badge::after) {
        content: ")";
    }

    .home-dashboard-page[b-y38cn6lbfn] (.card-body) {
        padding: 14px 18px 18px !important;
    }

    .home-info-panel[b-y38cn6lbfn] {
        padding: 14px;
        border-radius: 18px;
    }

    .latest-doc-row[b-y38cn6lbfn] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 10px;
        padding: 14px;
    }

    .latest-doc-content[b-y38cn6lbfn] {
        align-items: center;
        text-align: center;
    }

    .latest-doc-title[b-y38cn6lbfn],
    .latest-doc-meta[b-y38cn6lbfn] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

}

/* Mobile Dashboard-Cards: gesamte Zeile ist klickbar, Pfeil nur dezenter Hinweis */
@media (max-width: 768px) {
    .card-clickable[b-y38cn6lbfn] {
        transition: all 0.15s ease;
    }

    .card-clickable:active[b-y38cn6lbfn] {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.03);
    }

    .latest-doc-row.card-clickable[b-y38cn6lbfn] {
        position: relative;
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-items: stretch;
        text-align: left;
        padding-right: 42px;
    }

    .latest-doc-row.card-clickable .latest-doc-content[b-y38cn6lbfn] {
        align-items: flex-start;
        text-align: left;
    }

    .latest-doc-row.card-clickable .latest-doc-arrow[b-y38cn6lbfn] {
        position: absolute;
        top: 50%;
        right: 16px;
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: rgba(249,115,22,0.58);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .latest-doc-row.card-clickable:hover .latest-doc-arrow[b-y38cn6lbfn] {
        background: transparent;
        border-color: transparent;
        color: rgba(249,115,22,0.68);
        transform: translateY(-50%);
    }

    .latest-doc-row.card-clickable .latest-doc-arrow svg[b-y38cn6lbfn] {
        width: 20px;
        height: 20px;
        stroke-width: 3.4;
    }

    .latest-doc-row.card-clickable .latest-doc-arrow svg line[b-y38cn6lbfn] {
        display: none;
    }
}
/* /Pages/Info/Datenschutz.razor.rz.scp.css */
/* ============================================================
   DATENSCHUTZ.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Info / Datenschutz.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* ── Page ──────────────────────────────────────────────── */
.ds-page[b-93wnd31bsy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Cards ─────────────────────────────────────────────── */
.ds-card[b-93wnd31bsy] {
    background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.ds-card-header[b-93wnd31bsy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.ds-card-header svg[b-93wnd31bsy] {
    color: var(--primary);
    flex-shrink: 0;
}

/* Karteninhalt: ordnet Text und Metadaten innerhalb der Kartenfläche */
.ds-card-body[b-93wnd31bsy] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Text ──────────────────────────────────────────────── */
.ds-text[b-93wnd31bsy] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.7;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-text-note[b-93wnd31bsy] {
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Lists ─────────────────────────────────────────────── */
.ds-list[b-93wnd31bsy] {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-list li[b-93wnd31bsy] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.65;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-list li[b-93wnd31bsy]::marker {
    color: var(--primary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-list li strong[b-93wnd31bsy] {
    color: #fff;
}

/* ── Contact box ───────────────────────────────────────── */
.ds-contact-box[b-93wnd31bsy] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: flex-start;
    min-width: 280px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-contact-box-plain[b-93wnd31bsy] {
    background: transparent;
    border: none;
    padding: 0;
    gap: 3px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-contact-name[b-93wnd31bsy] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-contact-line[b-93wnd31bsy] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.6;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-contact-spacer[b-93wnd31bsy] {
    margin-top: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-link[b-93wnd31bsy] {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.ds-link:hover[b-93wnd31bsy] {
    color: var(--primary-hover);
}

/* ── Rights grid ───────────────────────────────────────── */
.ds-rights-grid[b-93wnd31bsy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-right-item[b-93wnd31bsy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-right-icon[b-93wnd31bsy] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(249,115,22,0.15);
    border: 1px solid rgba(249,115,22,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-right-title[b-93wnd31bsy] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-right-desc[b-93wnd31bsy] {
    font-size: var(--text-xs);
    color: var(--sidebar-text);
    line-height: 1.55;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 700px) {
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .ds-rights-grid[b-93wnd31bsy] {
        grid-template-columns: 1fr;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .ds-contact-box[b-93wnd31bsy] {
        min-width: unset;
        width: 100%;
    }
}

/* Responsive Anpassung: verdichtet Datenschutzkarten und lange Kontaktdaten auf Smartphones */
@media (max-width: 576px) {
    /* Navigationsregel: Datenschutzkopf stapelt Icon und Text für schmale Ansichten */
    .ds-header[b-93wnd31bsy] {
        flex-direction: column;
        gap: 10px;
    }

    /* Flächenregel: Kartenköpfe bleiben lesbar, ohne seitlich zu viel Platz zu verbrauchen */
    .ds-card-header[b-93wnd31bsy] {
        align-items: flex-start;
        padding: 14px 16px;
    }

    /* Karteninhalt: lange Datenschutztexte und Kontaktdaten brechen sicher um */
    .ds-card-body[b-93wnd31bsy],
    .ds-contact-box[b-93wnd31bsy] {
        padding: 18px 16px;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Info/Hilfe.razor.rz.scp.css */
/* ============================================================
   HILFE.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Info / Hilfe.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Zurück-zum-Login-Link für nicht eingeloggte Benutzer */
.hlp-login-back[b-yx3qv5qq34] {
    margin-bottom: 8px;
}

/* ── Page ──────────────────────────────────────────────── */
.hlp-page[b-yx3qv5qq34] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Cards ─────────────────────────────────────────────── */
.hlp-card[b-yx3qv5qq34] {
    background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.hlp-card-header[b-yx3qv5qq34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--sidebar-text);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.hlp-card-header svg[b-yx3qv5qq34] {
    color: var(--primary);
    flex-shrink: 0;
}

/* ── Link ──────────────────────────────────────────────── */
.hlp-link[b-yx3qv5qq34] {
    color: var(--primary);
    text-decoration: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hlp-link:hover[b-yx3qv5qq34] {
    color: var(--primary-hover);
}

/* Responsive Anpassung: macht Hilfeseite und FAQ-Karten auf Smartphones kompakter */
@media (max-width: 576px) {
    /* Flächenregel: reduziert Kartenkopf-Abstände für schmale Ansichten */
    .hlp-card-header[b-yx3qv5qq34] {
        padding: 12px 16px;
        align-items: flex-start;
    }
}
/* /Pages/Info/Info.razor.rz.scp.css */
/* ============================================================
   INFO.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Info / Info.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────── */
.info-page[b-v4q14bappb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Hero ─────────────────────────────────────────────── */
.info-hero[b-v4q14bappb] {
    background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-xl);
    padding: 48px 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

/* Großes App-Logo analog zum Login-Bildschirm */
.info-logo[b-v4q14bappb] {
    width: 202px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(4, 8, 14, 0.24));
    margin-bottom: 4px;
}

/* INVENTORY-Schriftzug direkt unter dem Logo – analog zur Sidebar-Branding-Unterzeile */
.info-inventory-label[b-v4q14bappb] {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: #F97316;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: -4px;
    margin-bottom: 4px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-subtitle[b-v4q14bappb] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    max-width: 680px;
    line-height: 1.6;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-version-badge[b-v4q14bappb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sidebar-text);
    margin-top: 4px;
}

/* ── Two-col grid ─────────────────────────────────────── */
.info-grid-2[b-v4q14bappb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Cards ────────────────────────────────────────────── */
.info-card[b-v4q14bappb] {
    background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.info-card-full[b-v4q14bappb] {
    width: 100%;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.info-card-header[b-v4q14bappb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.info-card-header svg[b-v4q14bappb] {
    color: var(--sidebar-text);
    flex-shrink: 0;
}

/* Karteninhalt: ordnet Text und Metadaten innerhalb der Kartenfläche */
.info-card-body[b-v4q14bappb] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Developer card ───────────────────────────────────── */
.info-dev-label[b-v4q14bappb] {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-dev-desc[b-v4q14bappb] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.6;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-feature-list[b-v4q14bappb] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-feature-list li[b-v4q14bappb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.5;
}

/* Pseudo-Element: ergänzt dekorative Struktur ohne zusätzliches Markup */
.info-feature-list li[b-v4q14bappb]::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-legal-box[b-v4q14bappb] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-legal-title[b-v4q14bappb] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-legal-text[b-v4q14bappb] {
    font-size: var(--text-xs);
    color: var(--sidebar-text);
    line-height: 1.6;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-legal-text strong[b-v4q14bappb] {
    color: #fff;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-website-btn[b-v4q14bappb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
    align-self: flex-start;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.info-website-btn:hover[b-v4q14bappb] {
    background: var(--primary-hover);
    color: #fff;
}

/* ── Tech-Stack card ──────────────────────────────────── */
.info-tech-section-label[b-v4q14bappb] {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.info-tech-grid[b-v4q14bappb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-badge[b-v4q14bappb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-blazor[b-v4q14bappb] { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-dotnet[b-v4q14bappb]  { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-csharp[b-v4q14bappb]  { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-ef[b-v4q14bappb]      { background: rgba(249,115,22,0.10); color: var(--primary); border: 1px solid rgba(249,115,22,0.18); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-pomelo[b-v4q14bappb]  { background: rgba(249,115,22,0.10); color: #fdba74; border: 1px solid rgba(249,115,22,0.18); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-neutral[b-v4q14bappb] { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); }

/* ── Wichtige Funktionen ──────────────────────────────── */
.info-func-grid[b-v4q14bappb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-func-title[b-v4q14bappb] {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-func-desc[b-v4q14bappb] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.6;
}

/* ── Lizenzen-Tabelle ─────────────────────────────────── */
.info-license-table-wrap[b-v4q14bappb] {
    overflow-x: auto;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-table[b-v4q14bappb] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-table thead tr[b-v4q14bappb] {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-table th[b-v4q14bappb] {
    padding: 10px 24px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(203,213,225,0.5);
    text-align: left;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-table td[b-v4q14bappb] {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--sidebar-text);
}

/* Tabellenregel: hält Zeilenabstände und Hover-Zustände in Datenlisten konsistent */
.info-license-table tbody tr:last-child td[b-v4q14bappb] {
    border-bottom: none;
}

/* Tabellenregel: hält Zeilenabstände und Hover-Zustände in Datenlisten konsistent */
.info-license-table tbody tr:hover td[b-v4q14bappb] {
    background: rgba(255,255,255,0.03);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-badge[b-v4q14bappb] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.2);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .info-grid-2[b-v4q14bappb] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .info-func-grid[b-v4q14bappb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 600px) {
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .info-func-grid[b-v4q14bappb] {
        grid-template-columns: 1fr;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .info-hero[b-v4q14bappb] {
        padding: 32px 20px;
    }

    .info-license-table-wrap[b-v4q14bappb] {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .info-license-table[b-v4q14bappb] {
        min-width: 440px;
    }

    .info-license-table th[b-v4q14bappb],
    .info-license-table td[b-v4q14bappb] {
        padding-inline: 14px;
    }
}

/* Responsive Anpassung: verdichtet dunkle Infokarten auf kleinen Smartphones */
@media (max-width: 576px) {
    /* Flächenregel: Kartenköpfe bleiben lesbar, ohne seitlich zu viel Platz zu verbrauchen */
    .info-card-header[b-v4q14bappb] {
        align-items: flex-start;
        padding: 14px 16px;
    }

    /* Karteninhalt: Textbereiche dürfen lange Inhalte umbrechen statt zu überlaufen */
    .info-card-body[b-v4q14bappb] {
        padding: 18px 16px;
        overflow-wrap: anywhere;
    }

    /* UI-Regel: große Infoüberschrift passt sich schmalen Displays an */
    .info-title[b-v4q14bappb] {
        font-size: 1.8rem;
        line-height: 1.15;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
   LOGIN.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Login.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-page[b-2o28bqqu1p] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(249, 115, 22, 0.12), transparent 32%),
        var(--surface-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    gap: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-shell[b-2o28bqqu1p] {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.login-card[b-2o28bqqu1p] {
    width: 100%;
    background:
        radial-gradient(circle at top, rgba(249,115,22,0.08), transparent 34%),
        linear-gradient(180deg, rgba(35, 35, 37, 0.98) 0%, rgba(27, 27, 29, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(4, 8, 14, 0.24),
        0 8px 18px rgba(4, 8, 14, 0.14);
    padding: 36px 36px 32px;
    backdrop-filter: blur(18px);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.login-setup-panel[b-2o28bqqu1p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-setup-note[b-2o28bqqu1p] {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-brand[b-2o28bqqu1p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    text-align: center;
    gap: 3px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-brand-module[b-2o28bqqu1p] {
    font-size: 1.36rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.94);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-logo[b-2o28bqqu1p] {
    width: 202px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(4, 8, 14, 0.24));
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.login-header[b-2o28bqqu1p] {
    margin-top: 10px;
    margin-bottom: 18px;
    text-align: center;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-title[b-2o28bqqu1p] {
    font-size: clamp(2rem, 4vw, 2.35rem);
    line-height: 1.05;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
    margin-top: 0;
    user-select: none;
    outline: none;
    box-shadow: none;
}

/* Zustandsregel: verhindert sichtbaren Fokus-Ring auf dem Titel */
.login-title:focus[b-2o28bqqu1p],
.login-title:focus-visible[b-2o28bqqu1p] {
    outline: none;
    box-shadow: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-subtitle[b-2o28bqqu1p] {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
    margin: 0;
    user-select: none;
    display: none;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.login-card :deep(.form-label)[b-2o28bqqu1p] {
    color: #f8fafc !important;
    font-weight: 700;
}

.login-form .form-label[b-2o28bqqu1p] {
    color: #f8fafc !important;
    font-weight: 700;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.login-form[b-2o28bqqu1p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.login-input[b-2o28bqqu1p] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.45;
    box-shadow: inset 0 1px 2px rgba(4, 8, 14, 0.16);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.login-input[b-2o28bqqu1p]::placeholder {
    color: rgba(226, 232, 240, 0.36);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.login-input:focus[b-2o28bqqu1p] {
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.12),
        inset 0 1px 2px rgba(4, 8, 14, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-error[b-2o28bqqu1p] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 16px;
    font-size: var(--text-sm);
    color: #c53030;
    margin: 2px 0 4px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-btn[b-2o28bqqu1p] {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    background: #f97316;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 10px;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-setup-btn[b-2o28bqqu1p] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.login-btn:hover[b-2o28bqqu1p] {
    background: #ea580c;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Zustandsregel: Active-Zustand */
.login-btn:active[b-2o28bqqu1p] {
    background: #c2410c;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-meta-links[b-2o28bqqu1p] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-meta-link[b-2o28bqqu1p] {
    font-size: 0.84rem;
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(226, 232, 240, 0.18);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.login-meta-link:hover[b-2o28bqqu1p] {
    color: #f8fafc;
    text-decoration-color: rgba(248, 250, 252, 0.6);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-meta-support[b-2o28bqqu1p] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.84);
    text-align: center;
}

/* Wrapper: positioniert den Auge-Button relativ zum Eingabefeld */
.pw-toggle-wrap[b-2o28bqqu1p] {
    position: relative;
}

/* Auge-Button: absolut am rechten Rand des Felds, vertikal zentriert */
.pw-toggle-wrap .pw-toggle-btn[b-2o28bqqu1p] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(226, 232, 240, 0.45);
    transition: color 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    line-height: 0;
}

/* Hover-Zustand: Icon heller machen */
.pw-toggle-wrap .pw-toggle-btn:hover[b-2o28bqqu1p] {
    color: rgba(226, 232, 240, 0.88);
}

/* Input bekommt rechts Abstand, damit Text nicht vom Button überlagert wird */
.pw-toggle-wrap .login-input[b-2o28bqqu1p] {
    padding-right: 46px;
}

/* Standardzustand: Passwort verborgen → Auge offen zeigen */
.pw-toggle-btn .eye-show[b-2o28bqqu1p] { display: block; }
.pw-toggle-btn .eye-hide[b-2o28bqqu1p] { display: none; }

/* Nach Aktivierung: Passwort sichtbar → durchgestrichenes Auge zeigen */
.pw-toggle-btn.is-visible .eye-show[b-2o28bqqu1p] { display: none; }
.pw-toggle-btn.is-visible .eye-hide[b-2o28bqqu1p] { display: block; }

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 480px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-page[b-2o28bqqu1p] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-shell[b-2o28bqqu1p] {
        gap: 0;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-brand[b-2o28bqqu1p] {
        margin-bottom: 12px;
        gap: 2px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-header[b-2o28bqqu1p] {
        margin-top: 8px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-logo[b-2o28bqqu1p] {
        width: 170px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-brand-module[b-2o28bqqu1p] {
        font-size: 1.22rem;
        letter-spacing: 0.24em;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .login-card[b-2o28bqqu1p] {
        padding: 26px 22px 22px;
        border-radius: 22px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-title[b-2o28bqqu1p] {
        font-size: 1.8rem;
    }
}

@media (max-width: 430px) {
    .login-page[b-2o28bqqu1p] {
        justify-content: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 12px 12px;
        min-height: 100dvh;
    }

    .login-shell[b-2o28bqqu1p] {
        max-width: 100%;
    }

    .login-card[b-2o28bqqu1p] {
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .login-brand[b-2o28bqqu1p] {
        margin-bottom: 8px;
    }

    .login-logo[b-2o28bqqu1p] {
        width: 128px;
    }

    .login-brand-module[b-2o28bqqu1p] {
        font-size: 0.96rem;
        letter-spacing: 0.18em;
    }

    .login-header[b-2o28bqqu1p] {
        margin-top: 4px;
        margin-bottom: 12px;
    }

    .login-title[b-2o28bqqu1p] {
        font-size: 1.22rem;
        margin-bottom: 6px;
    }

    .login-subtitle[b-2o28bqqu1p] {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .login-form[b-2o28bqqu1p] {
        gap: 4px;
    }

    .login-form :deep(.form-group)[b-2o28bqqu1p] {
        margin-bottom: 10px;
        gap: 5px;
    }

    .login-card :deep(.form-label)[b-2o28bqqu1p] {
        font-size: 0.94rem;
        color: #f8fafc !important;
    }

    .login-input[b-2o28bqqu1p] {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 16px;
    }

    .pw-toggle-wrap .login-input[b-2o28bqqu1p] {
        padding-right: 42px;
    }

    .pw-toggle-wrap .pw-toggle-btn[b-2o28bqqu1p] {
        right: 12px;
    }

    .login-btn[b-2o28bqqu1p] {
        min-height: 48px;
        margin-top: 6px;
        border-radius: 14px;
        font-size: 0.98rem;
    }

    .login-meta-links[b-2o28bqqu1p] {
        margin-top: 10px;
        gap: 6px;
    }

    .login-meta-link[b-2o28bqqu1p] {
        font-size: 0.8rem;
    }

    .login-meta-support[b-2o28bqqu1p] {
        font-size: 0.74rem;
    }
}

@media (max-width: 767px) and (max-height: 820px) {
    .login-page[b-2o28bqqu1p] {
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* /Pages/PageNotFound.razor.rz.scp.css */
/* ============================================================
   PAGENOTFOUND.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / PageNotFound.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.not-found-page[b-el5q9lf6k9] {
    min-height: calc(100vh - 74px);
    display: grid;
    place-items: center;
    padding: 28px 0 56px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.not-found-card[b-el5q9lf6k9] {
    width: min(640px, 100%);
    text-align: center;
    padding: 44px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, rgba(249,115,22,.16), transparent 42%),
        linear-gradient(180deg, rgba(35,35,37,0.98) 0%, rgba(27,27,29,0.98) 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(4,8,14,.26), inset 0 1px 0 rgba(255,255,255,.06);
    color: rgba(248,250,252,.78);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.not-found-logo[b-el5q9lf6k9] {
    margin: 0 auto 22px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.not-found-kicker[b-el5q9lf6k9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 5px 14px;
    border-radius: 999px;
    color: #FED7AA;
    background: rgba(249,115,22,.14);
    border: 1px solid rgba(249,115,22,.26);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: .12em;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.not-found-card h1[b-el5q9lf6k9] {
    margin-top: 18px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.not-found-card p[b-el5q9lf6k9] {
    max-width: 470px;
    margin: 16px auto 0;
    font-size: var(--text-lg);
    line-height: 1.75;
    color: rgba(209,215,226,.78);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.not-found-actions[b-el5q9lf6k9] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .not-found-page[b-el5q9lf6k9] {
        min-height: calc(100vh - 40px);
        padding: 18px 0 36px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .not-found-card[b-el5q9lf6k9] {
        padding: 32px 22px;
        border-radius: 24px;
    }

    .not-found-actions .btn[b-el5q9lf6k9] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Planung/Dokumente.razor.rz.scp.css */
/* ============================================================
   DOKUMENTE.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Planung / Dokumente.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.doc-name-button[b-dgwko5twxn] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.doc-type-icon[b-dgwko5twxn] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
}

.card-person-avatar[b-dgwko5twxn] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(249,115,22,0.10);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

.card-person-avatar--icon svg[b-dgwko5twxn] {
    width: 18px;
    height: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview[b-dgwko5twxn] {
    min-height: 420px;
}

/* Desktop: iframe für PDF-Vorschau; auf Touch-Geräten (iOS/Android) per CSS ausgeblendet */
.document-preview-frame[b-dgwko5twxn] {
    width: 100%;
    min-height: 68vh;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: var(--surface-1);
}

/* Desktop-only iframe – auf Touch-Geräten durch mobile-hint ersetzt */
.document-preview-frame--desktop[b-dgwko5twxn] {
    display: block;
}

/* Mobile-Fallback: standardmäßig ausgeblendet, auf Touch-Geräten sichtbar */
.document-preview-mobile-hint[b-dgwko5twxn] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 320px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: var(--surface-1);
}

/* Auf Touch-Geräten (iOS, Android): iframe verstecken, Fallback mit "Im Browser öffnen" zeigen */
@media (pointer: coarse) {
    .document-preview-frame--desktop[b-dgwko5twxn] {
        display: none;
    }

    .document-preview-mobile-hint[b-dgwko5twxn] {
        display: flex;
    }
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-image[b-dgwko5twxn] {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--surface-1);
    object-fit: contain;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-fallback[b-dgwko5twxn] {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: var(--surface-1);
}

/* .form-label (flex) und .char-counter global in app.css */
.form-label[b-dgwko5twxn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Responsive Anpassung: begrenzt Dokumentvorschauen in mobilen Dialogen auf die sichtbare Höhe */
@media (max-width: 640px) {
    /* UI-Regel: verkürzt Dokumentvorschauen, damit Dialogaktionen mobil erreichbar bleiben */
    .document-preview[b-dgwko5twxn] {
        min-height: 260px;
    }

    /* UI-Regel: passt eingebettete Dokumente an Smartphone-Höhen an */
    .document-preview-frame[b-dgwko5twxn] {
        min-height: 56dvh;
    }

    /* UI-Regel: reduziert Fallback-Flächen, ohne Hinweise zu verstecken */
    .document-preview-fallback[b-dgwko5twxn] {
        min-height: 240px;
        padding: 1.25rem;
    }

    /* Mobiler Hint ebenfalls kompakter, damit der Dialog nicht überfüllt wirkt */
    .document-preview-mobile-hint[b-dgwko5twxn] {
        min-height: 240px;
        padding: 1.25rem;
    }
}

@media (max-width: 900px) and (min-width: 641px) {
    .document-preview-frame[b-dgwko5twxn] {
        min-height: 60dvh;
    }
}

.document-preview .empty-state-title[b-dgwko5twxn],
.document-preview .empty-state-text[b-dgwko5twxn] {
    max-width: 100%;
}

/* RESPONSIV ≤1330px – 2-spaltig nebeneinander, Actions immer sichtbar */

@media (max-width: 1330px) {
    /* Container: 2 Karten nebeneinander */
    .card-reference-list[b-dgwko5twxn] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    /* Karte: Accent-Balken + Inhalt gestapelt, kein Collapse */
    .entry-card[b-dgwko5twxn] {
        grid-template-columns: 4px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start;
    }

    /* Actions: unter den Inhalt, volle Breite, linksbündig */
    .entry-card-side[b-dgwko5twxn] {
        grid-column: 2;
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* RESPONSIV ≤640px – einspaltig */

@media (max-width: 640px) {
    /* Container: zurück zu einspaltig */
    .card-reference-list[b-dgwko5twxn] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
}

/* CHEVRON-TOGGLE */

/* Auf Desktop unsichtbar */
.doc-card-toggle[b-dgwko5twxn] {
    display: none;
}

/* Chevron-Icon mit Übergang beim Aufklappen */
.doc-card-chevron[b-dgwko5twxn] {
    opacity: 0.92;
    transition: transform var(--transition);
}

/* RESPONSIV ≤640px – Chevron-Collapse */

@media (max-width: 640px) {
    /* Karte: Platz für Chevron am unteren Rand, Inhalte zentriert */
    .entry-card[b-dgwko5twxn] {
        padding-bottom: 1.6rem !important;
        position: relative;
        text-align: center;
        justify-items: center;
    }

    /* Avatar + Titel stapeln sich vertikal, zentriert */
    .entry-card-head[b-dgwko5twxn] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 0.8rem !important;
    }

    /* Titelbereich zentriert */
    .entry-card-head-copy[b-dgwko5twxn] {
        width: 100%;
        text-align: center;
    }

    /* Badges und Meta-Felder zentriert */
    .entry-card-meta[b-dgwko5twxn] {
        justify-content: center !important;
        text-align: center;
    }

    /* Aktionsbuttons zentriert */
    .entry-card-side[b-dgwko5twxn] {
        justify-content: center;
    }

    /* Globale flex-start-Regel überschreiben */
    .entry-card-actions[b-dgwko5twxn] {
        justify-content: center !important;
        flex-wrap: wrap;
        width: 100%;
    }

    /* Chevron: animierter Toggle am unteren Rand der Karte */
    .doc-card-toggle[b-dgwko5twxn] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: docChevronFloat-b-dgwko5twxn 2.2s ease-in-out infinite;
    }

    /* Meta-Bereich: standardmäßig eingeklappt */
    .entry-card-meta[b-dgwko5twxn] {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    /* Aktions-Bereich: standardmäßig ausgeblendet */
    .entry-card-side[b-dgwko5twxn] {
        display: none;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* Meta-Bereich: aufgeklappt */
    .entry-card--expanded .entry-card-meta[b-dgwko5twxn] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Aktions-Bereich: aufgeklappt */
    .entry-card--expanded .entry-card-side[b-dgwko5twxn] {
        display: flex;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
        padding-bottom: 1.6rem;
    }

    /* Chevron dreht sich beim Aufklappen */
    .entry-card--expanded .doc-card-chevron[b-dgwko5twxn] {
        transform: rotate(180deg);
    }

    /* Chevron-Animation pausieren wenn aufgeklappt */
    .entry-card--expanded .doc-card-toggle[b-dgwko5twxn] {
        animation: none;
    }
}

/* KEYFRAME: schwebende Chevron-Animation */

@keyframes docChevronFloat-b-dgwko5twxn {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

.doc-name-link[b-dgwko5twxn] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

.doc-name-link:hover[b-dgwko5twxn] {
    color: var(--primary);
}

.doc-ext[b-dgwko5twxn] {
    font-weight: 500;
}

.doc-name-link > span:first-child[b-dgwko5twxn],
.doc-table-wrap[b-dgwko5twxn] {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.doc-table-badge[b-dgwko5twxn] {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
}
/* /Pages/Planung/Veranstaltungen.razor.rz.scp.css */
/* ============================================================
   VERANSTALTUNGEN.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält seitenlokale Card-Styles für die Veranstaltungsübersicht.
   - Card-Layout identisch zur Reservierungen-Seite: 3 Spalten auf Desktop,
     kollabierbare Details mit Chevron-Toggle auf Tablet/Mobile.

   Zweck:
   - Einheitliches Card-Verhalten über Reservierungen- und Veranstaltungsseite hinweg.
   ============================================================ */

/* .event-feedback global als .page-feedback in app.css */

/* FORMULAR */

/* .form-label (flex) und .char-counter global in app.css */
.form-label[b-94al2pv2x2] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* DESKTOP-LAYOUT */

/* Spalte 1: Wrapper für Avatar, Titel und Ort-Subtitle */
.reserv-card-leading-col[b-94al2pv2x2] {
    min-width: 0;
}

/* Avatar und Titel horizontal nebeneinander */
.reserv-card-head[b-94al2pv2x2] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Avatar-Wrapper: feste Größe, zentriert */
.reserv-card-leading[b-94al2pv2x2] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* Titel und Ort-Subtitle gestapelt */
.reserv-card-head-copy[b-94al2pv2x2] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Avatar: orangefarbener Initialen-Kasten */
.card-person-avatar[b-94al2pv2x2] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(249,115,22,0.10);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

/* Avatar ohne Initialen: Icon-Fallback */
.card-person-avatar--icon svg[b-94al2pv2x2] {
    width: 26px;
    height: 26px;
}

/* Ort als Subtitle unter dem Veranstaltungsnamen */
.reserv-card-person[b-94al2pv2x2] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Details auf Desktop: Inhalt direkt im Grid (kein Collapse) */
.reserv-card-details[b-94al2pv2x2] {
    display: contents;
}

/* ZEITRAUM-FELD */

/* Label + Wert gestapelt */
.reserv-field[b-94al2pv2x2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Kleines Uppercase-Label über dem Feldwert */
.reserv-field-label[b-94al2pv2x2] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* Feldwert – bricht sauber um */
.reserv-field-value[b-94al2pv2x2] {
    font-size: 0.92rem;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Dauer auf eigener Zeile unter dem Datumbereich */
.reserv-field-value .text-tertiary[b-94al2pv2x2] {
    display: block;
}

/* Beschreibung: etwas kleiner und gedämpft */
.reserv-field-value--secondary[b-94al2pv2x2] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.2rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* CHEVRON-TOGGLE */

/* Auf Desktop unsichtbar */
.reserv-card-overlay-toggle[b-94al2pv2x2] {
    display: none;
}

/* Chevron-Icon mit Übergang beim Aufklappen */
.reserv-card-overlay-icon[b-94al2pv2x2] {
    opacity: 0.92;
    transition: transform var(--transition);
}

/* AKTIONS-BEREICH */

/* Mindestbreite verhindert Layoutsprung wenn keine Buttons vorhanden */
.reserv-card-actions[b-94al2pv2x2] {
    gap: 10px;
    min-width: 120px;
    justify-content: flex-end;
}

/* Im aufgeklappten Responsive-Bereich: Buttons linksbündig */
@media (max-width: 1330px) {
    .reserv-card-actions[b-94al2pv2x2] {
        justify-content: flex-start;
        min-width: 0;
    }
}

/* RESPONSIV ≤1330px – 2-spaltig nebeneinander, Details immer sichtbar */

@media (max-width: 1330px) {
    /* Container: 2 Karten nebeneinander */
    .reserv-cards[b-94al2pv2x2] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    /* Karte: einspaltig, kein Collapse */
    .reserv-card[b-94al2pv2x2] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: start;
        gap: 0.7rem !important;
    }

    /* Führende Spalte nimmt volle Breite */
    .reserv-card-leading-col[b-94al2pv2x2] {
        grid-column: 1 / -1;
    }

    /* Toggle-Button bleibt unsichtbar */
    .reserv-card-overlay-toggle[b-94al2pv2x2] {
        display: none;
    }

    /* Details-Bereich: immer sichtbar */
    .reserv-card-details[b-94al2pv2x2] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        grid-column: 1 / -1;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        max-height: none;
        transform: none;
    }

    /* Actions: volle Breite, linksbündig */
    .reserv-card-actions[b-94al2pv2x2] {
        justify-self: stretch;
        width: 100%;
    }
}

/* RESPONSIV ≤640px – einspaltig mit Chevron-Collapse */

@media (max-width: 640px) {
    /* Container: einspaltig */
    .reserv-cards[b-94al2pv2x2] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    /* Karte: einspaltig, zentriert, Platz für Chevron unten */
    .reserv-card[b-94al2pv2x2] {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 0.8rem;
        justify-items: center;
        text-align: center;
        padding: 1rem 1rem 1.6rem;
    }

    /* Avatar stapelt sich vertikal über den Titel */
    .reserv-card-head[b-94al2pv2x2] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    /* Titelbereich zentriert */
    .reserv-card-head-copy[b-94al2pv2x2] {
        width: 100%;
        text-align: center;
    }

    /* Ort-Subtitle zentriert */
    .reserv-card-person[b-94al2pv2x2] {
        justify-content: center;
    }

    /* Zeitraum-Feld zentriert */
    .reserv-field[b-94al2pv2x2] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* Chevron: animierter Toggle am unteren Rand der Karte */
    .reserv-card-overlay-toggle[b-94al2pv2x2] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: eventChevronFloat-b-94al2pv2x2 2.2s ease-in-out infinite;
    }

    /* Details: standardmäßig eingeklappt */
    .reserv-card-details[b-94al2pv2x2] {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        grid-column: 1 / -1;
        grid-row: 2;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    /* Details: aufgeklappt */
    .reserv-card--expanded .reserv-card-details[b-94al2pv2x2] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Chevron dreht sich beim Aufklappen */
    .reserv-card--expanded .reserv-card-overlay-icon[b-94al2pv2x2] {
        transform: rotate(180deg);
    }

    /* Chevron-Animation pausieren wenn aufgeklappt */
    .reserv-card--expanded .reserv-card-overlay-toggle[b-94al2pv2x2] {
        animation: none;
    }

    /* Actions: volle Breite, zentriert, Abstand zum Chevron */
    .reserv-card-actions[b-94al2pv2x2] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 1.6rem;
        min-width: 0;
    }
}

/* KEYFRAME: schwebende Chevron-Animation */

@keyframes eventChevronFloat-b-94al2pv2x2 {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}
/* /Pages/Profil.razor.rz.scp.css */
/* ============================================================
   PROFIL.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Profil.razor.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: 2-spaltiges Grid für Stammdaten und Profilbild nebeneinander */
.profil-grid[b-ph1tldav00] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

/* Flächenregel: Passwort-Karte nimmt die volle Breite über beide Spalten ein */
.profil-card-full[b-ph1tldav00] {
    grid-column: 1 / -1;
}

/* ── Dunkle Kartenoptik analog zur Datenschutz- und Hilfe-Seite ── */

/* Dunkler Sidebar-Gradient als Kartenhintergrund – ersetzt das weiße Standard-Card-BG */
.profil-card[b-ph1tldav00] {
    background: var(--surface-2);
    border-color: rgba(255,255,255,0.07);
    box-shadow: var(--shadow-card);
}

/* Kartenkopf: heller Text und feine Trennlinie auf dunklem Grund */
.profil-card .card-header[b-ph1tldav00] {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Kartentitel weiß, damit er auf dem dunklen Hintergrund lesbar bleibt */
.profil-card .card-title[b-ph1tldav00] {
    color: #ffffff;
}

/* Layoutregel: verhindert, dass das Label im Card-Body doppelt erscheint */
.profil-card .card-body[b-ph1tldav00] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
}

/* Formular-Labels: hell für dunklen Kartenhintergrund */
.profil-card .form-label[b-ph1tldav00] {
    color: rgba(248,250,252,0.92);
}

/* Hinweistext unter Feldern: gedämpft, aber noch lesbar */
.profil-card .form-hint[b-ph1tldav00] {
    color: rgba(226,232,240,0.58);
}

/* Eingabefelder: dunkles Glas-UI passend zum Kartenhintergrund */
.profil-card .form-control[b-ph1tldav00] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    color: #f8fafc;
}

/* Platzhaltertext im Eingabefeld: dezent auf dunklem Grund */
.profil-card .form-control[b-ph1tldav00]::placeholder {
    color: rgba(226,232,240,0.36);
}

/* Fokus-Zustand: oranger Akzent analog zu den Auth-Seiten */
.profil-card .form-control:focus[b-ph1tldav00] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(249,115,22,0.42);
    box-shadow: 0 0 0 4px rgba(249,115,22,0.12);
    color: #f8fafc;
}

/* Auge-Icon im Passwortfeld: auf dunklem Hintergrund aufgehellt */
.profil-card .pw-toggle-btn[b-ph1tldav00] {
    color: rgba(226,232,240,0.5);
}

/* Hover-Zustand des Auge-Icons */
.profil-card .pw-toggle-btn:hover[b-ph1tldav00] {
    color: rgba(248,250,252,0.9);
}

/* Layoutregel: Vorname und Nachname nebeneinander im gleichen Abstand */
.profil-name-row[b-ph1tldav00] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Formular- und Aktionsregel: Button-Reihe am Ende des Formulars mit Abstand nach oben */
.profil-actions[b-ph1tldav00] {
    margin-top: 1.1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* UI-Regel: Feedback-Banner innerhalb der Profil-Karten – kompaktere Darstellung */
.profil-feedback[b-ph1tldav00] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-size: 0.88rem;
}

/* Layoutregel: Profilbild-Karte mit zentriertem Inhalt */
.profil-image-body[b-ph1tldav00] {
    align-items: center;
    text-align: center;
}

/* UI-Regel: Avatar-Vorschau – rund, deutlich groß für eine klare Vorschau */
.profil-avatar-preview[b-ph1tldav00] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

/* UI-Regel: Profilbild-Vorschau – quadratisch wie im Benutzer-Admin */
.profil-avatar-img[b-ph1tldav00] {
    width: 140px;
    height: 140px;
    border-radius: 24px;
}

/* Layoutregel: Aktionen unter dem Bild – nebeneinander und zentriert */
.profil-image-actions[b-ph1tldav00] {
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Layoutregel: Passwort-Felder nebeneinander mit drei gleich breiten Spalten */
.profil-pw-grid[b-ph1tldav00] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ── Upload-Label als styled Button ────────────────────── */

/* Label verhält sich wie btn btn-primary btn-sm, löst den versteckten File-Input aus */
.profil-upload-label[b-ph1tldav00] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: var(--primary);
    border: 1px solid rgba(249,115,22,0.28);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    user-select: none;
}

/* Hover-Zustand analog zum btn-primary */
.profil-upload-label:hover[b-ph1tldav00] {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}


/* UI-Regel: Lade-Indikator, solange die Profildaten noch nicht geladen sind */
.profil-loading[b-ph1tldav00] {
    color: var(--text-secondary);
    padding: 2rem 0;
    font-size: var(--text-sm);
}

/* Wrapper: positioniert den Auge-Button relativ zum Passwort-Eingabefeld */
.pw-toggle-wrap[b-ph1tldav00] {
    position: relative;
}

/* Auge-Button: absolut am rechten Rand des Felds, vertikal zentriert */
.pw-toggle-btn[b-ph1tldav00] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-tertiary);
    transition: color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    line-height: 0;
}

/* Hover-Zustand: Icon dunkler für bessere Erkennbarkeit */
.pw-toggle-btn:hover[b-ph1tldav00] {
    color: var(--text-secondary);
}

/* Input bekommt rechts Abstand, damit der eingegebene Text nicht unter dem Button verschwindet */
.pw-toggle-wrap .form-control[b-ph1tldav00] {
    padding-right: 40px;
}

/* .char-counter global in app.css */

/* Responsive Anpassung: einspaltig auf schmalen Viewports */
@media (max-width: 860px) {
    /* Layoutregel: Grid auf eine Spalte reduzieren, damit Karten stapeln */
    .profil-grid[b-ph1tldav00] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: Passwort-Karte braucht keinen Span mehr, da nur eine Spalte */
    .profil-card-full[b-ph1tldav00] {
        grid-column: auto;
    }
}

/* Responsive Anpassung: Passwort-Felder und Namensspalten auf Smartphones stapeln */
@media (max-width: 640px) {
    /* Layoutregel: Vorname/Nachname untereinander */
    .profil-name-row[b-ph1tldav00] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: Passwort-Felder untereinander */
    .profil-pw-grid[b-ph1tldav00] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .profil-actions[b-ph1tldav00],
    .profil-image-actions[b-ph1tldav00] {
        align-items: stretch;
        flex-direction: column;
    }

    .profil-actions .btn[b-ph1tldav00],
    .profil-image-actions .btn[b-ph1tldav00] {
        width: 100%;
        justify-content: center;
    }

    .profil-avatar-img[b-ph1tldav00] {
        width: 120px;
        height: 120px;
        border-radius: 20px;
    }

    .profil-card .upload-card[b-ph1tldav00] {
        width: 100%;
    }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ============================================================
   RESETPASSWORD.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / ResetPassword.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-page[b-swbq0y639v] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(249, 115, 22, 0.12), transparent 32%),
        var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-shell[b-swbq0y639v] {
    width: 100%;
    max-width: 460px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.auth-card[b-swbq0y639v] {
    width: 100%;
    background: radial-gradient(circle at top, rgba(249,115,22,0.08), transparent 34%), linear-gradient(180deg, rgba(35, 35, 37, 0.98) 0%, rgba(27, 27, 29, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(4, 8, 14, 0.24),
        0 8px 18px rgba(4, 8, 14, 0.14);
    padding: 36px 36px 32px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-brand[b-swbq0y639v] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-logo[b-swbq0y639v] {
    width: 140px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(4, 8, 14, 0.24));
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.auth-header[b-swbq0y639v] {
    margin-bottom: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-title[b-swbq0y639v] {
    font-size: clamp(2rem, 4vw, 2.35rem);
    line-height: 1.05;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-subtitle[b-swbq0y639v] {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-form[b-swbq0y639v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-card :deep(.form-label)[b-swbq0y639v] {
    color: rgba(248, 250, 252, 0.92);
    font-weight: 600;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-swbq0y639v] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(4, 8, 14, 0.16);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-swbq0y639v]::placeholder {
    color: rgba(226, 232, 240, 0.36);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-input:focus[b-swbq0y639v] {
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.12),
        inset 0 1px 2px rgba(4, 8, 14, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-btn[b-swbq0y639v] {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    background: #f97316;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-link[b-swbq0y639v] {
    font-size: 0.84rem;
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(226, 232, 240, 0.18);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-link:hover[b-swbq0y639v] {
    color: #f8fafc;
    text-decoration-color: rgba(248, 250, 252, 0.6);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-links[b-swbq0y639v] {
    margin-top: 16px;
    text-align: center;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-success[b-swbq0y639v] {
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 16px;
    color: #dcfce7;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-error[b-swbq0y639v] {
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 16px;
    color: #fecaca;
    font-size: 0.9rem;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 480px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-page[b-swbq0y639v] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-logo[b-swbq0y639v] {
        width: 118px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .auth-card[b-swbq0y639v] {
        padding: 26px 22px 22px;
        border-radius: 22px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .auth-title[b-swbq0y639v] {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) and (max-height: 820px) {
    .auth-page[b-swbq0y639v] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* /Pages/Setup.razor.rz.scp.css */
/* ============================================================
   SETUP.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Setup.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-page[b-pomn024c95] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(249, 115, 22, 0.12), transparent 32%),
        var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-shell[b-pomn024c95] {
    width: 100%;
    max-width: 520px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.setup-card[b-pomn024c95] {
    width: 100%;
    background: radial-gradient(circle at top, rgba(249,115,22,0.08), transparent 34%), linear-gradient(180deg, rgba(35, 35, 37, 0.98) 0%, rgba(27, 27, 29, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(4, 8, 14, 0.24),
        0 8px 18px rgba(4, 8, 14, 0.14);
    padding: 36px 36px 32px;
}

/* Markenbereich: zentriert Logo und Modul-Label vertikal untereinander */
.setup-brand[b-pomn024c95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    text-align: center;
    gap: 3px;
}

/* Wrapper für das Logo-Bild */
.setup-logo-wrap[b-pomn024c95] {
    display: flex;
    justify-content: center;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-logo[b-pomn024c95] {
    width: 148px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(4, 8, 14, 0.24));
}

/* Modul-Label unterhalb des Logos – passt zur Login-Seite */
.setup-brand-module[b-pomn024c95] {
    font-size: 1.36rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.94);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.setup-header[b-pomn024c95] {
    margin-bottom: 18px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-title[b-pomn024c95] {
    font-size: clamp(2rem, 4vw, 2.35rem);
    line-height: 1.05;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-subtitle[b-pomn024c95] {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.setup-form[b-pomn024c95] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.setup-grid[b-pomn024c95] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.setup-card :deep(.form-label)[b-pomn024c95] {
    color: rgba(248, 250, 252, 0.92);
    font-weight: 600;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.setup-input[b-pomn024c95] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(4, 8, 14, 0.16);
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.setup-input[b-pomn024c95]::placeholder {
    color: rgba(226, 232, 240, 0.36);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.setup-input:focus[b-pomn024c95] {
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.12),
        inset 0 1px 2px rgba(4, 8, 14, 0.16);
    outline: none;
}

.setup-note[b-pomn024c95],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-info[b-pomn024c95] {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-note[b-pomn024c95] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.82);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-info[b-pomn024c95] {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.16);
    color: #dcfce7;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-error[b-pomn024c95] {
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 16px;
    color: #fecaca;
    font-size: 0.9rem;
}

.char-counter[b-pomn024c95] {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.72);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-pomn024c95] {
    color: #fbbf24;
}

.char-counter--red[b-pomn024c95] {
    color: #fca5a5;
    font-weight: 700;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-btn[b-pomn024c95] {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    background: #f97316;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 10px;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 480px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .setup-page[b-pomn024c95] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .setup-logo[b-pomn024c95] {
        width: 124px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .setup-card[b-pomn024c95] {
        padding: 26px 22px 22px;
        border-radius: 22px;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .setup-grid[b-pomn024c95] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .setup-title[b-pomn024c95] {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) and (max-height: 900px) {
    .setup-page[b-pomn024c95] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* /Pages/Verwaltung/Auswertung.razor.rz.scp.css */
/* ============================================================
   AUSWERTUNG.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Verwaltung / Auswertung.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-dashboard-grid[b-iwp8z696vr] {
    margin-bottom: 20px;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-info-grid[b-iwp8z696vr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.analytics-info-grid > *[b-iwp8z696vr] {
    height: 100%;
    min-width: 0;
}

/* Karteninhalt: verfeinert die beiden InfoCards analog zu anderen Übersichtsseiten */
.analytics-info-grid[b-iwp8z696vr]  .info-card {
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255,255,255,0.07);
}

.analytics-info-grid[b-iwp8z696vr]  .card-header {
    padding: 18px 24px 14px;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

/* Karteninhalt: schafft mehr Luft innerhalb der Analytics-Karten */
.analytics-info-grid[b-iwp8z696vr]  .card-body {
    padding: 22px 24px;
}

.analytics-list[b-iwp8z696vr],
.analytics-table[b-iwp8z696vr] {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: 0.15rem 0;
}

.analytics-row[b-iwp8z696vr],
/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-table-row[b-iwp8z696vr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 6px 18px rgba(4, 8, 14, 0.18);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

/* Zustandsregel: hebt Datenzeilen wie andere Karten dezent hervor */
.analytics-row:hover[b-iwp8z696vr],
.analytics-table-row:hover[b-iwp8z696vr] {
    transform: translateY(-1px);
    border-color: rgba(249, 115, 22, 0.16);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-row-main[b-iwp8z696vr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.analytics-table-name[b-iwp8z696vr] {
    font-weight: 600;
    color: var(--text);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.analytics-table-metrics[b-iwp8z696vr] {
    display: grid;
    grid-template-columns: 64px 64px 110px;
    gap: 0.75rem;
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Typoregel: trennt Kennzahlen in der Nutzungstabelle optisch sauberer */
.analytics-table-metrics span[b-iwp8z696vr] {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 768px) {
    .analytics-info-grid[b-iwp8z696vr] {
        grid-template-columns: 1fr;
    }

    .analytics-row[b-iwp8z696vr],
    .analytics-table-row[b-iwp8z696vr] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .analytics-table-metrics[b-iwp8z696vr] {
        grid-template-columns: repeat(3, auto);
        text-align: left;
    }

    .analytics-table-metrics span[b-iwp8z696vr] {
        justify-content: flex-start;
    }
}

/* Responsive Anpassung: macht Kennzahlenreihen auf kleinen Smartphones vertikal scanbar */
@media (max-width: 576px) {
    /* Layoutregel: vermeidet zu breite Kennzahlen-Spalten in Auswertungslisten */
    .analytics-table-metrics[b-iwp8z696vr] {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    /* UI-Regel: reduziert Karteninnenabstände für dichte mobile Auswertungslisten */
    .analytics-row[b-iwp8z696vr],
    .analytics-table-row[b-iwp8z696vr] {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .analytics-info-grid[b-iwp8z696vr]  .card-body {
        padding: 1rem;
    }

    .analytics-row[b-iwp8z696vr],
    .analytics-table-row[b-iwp8z696vr],
    .analytics-row-main[b-iwp8z696vr] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .analytics-table-metrics span[b-iwp8z696vr] {
        justify-content: center;
        text-align: center;
    }
}
/* /Pages/Verwaltung/Inventar.razor.rz.scp.css */
/* ============================================================
   INVENTAR.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für die Inventar-Übersichtsseite (Verwaltung).
   - Card-Layout analog zur Admin/Inventory-Seite.
   - Kein Modal, keine Galerie-Verwaltung – nur Anzeige und Lightbox.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* CARD-LISTE */

/* Layoutregel: listet Inventareinträge als kompakte Zeilen untereinander */
.inventar-list[b-s3g7202sfx] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.inventar-list-columns[b-s3g7202sfx] {
    display: none;
}

.inventar-list-column[b-s3g7202sfx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Flächenregel: 5-Spalten-Grid – Titel + 2 Felder + Info + Reservieren-Button */
.inventar-card[b-s3g7202sfx] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 0 1.2rem;
    padding: 0.8rem 1.15rem;
    position: relative;
}

/* Layoutregel: Bild und Titel horizontal und vertikal zentriert nebeneinander */
.inventar-image-title[b-s3g7202sfx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

/* Titelregel: zeigt alle 80 Zeichen auf zwei Zeilen – kein Abschneiden */
.inventar-image-title h3[b-s3g7202sfx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1;
}

/* Layoutregel: einzelnes Detailfeld mit Label und Wert */
.inventory-field[b-s3g7202sfx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Typoregel: kleines Uppercase-Label über dem Feldwert */
.inventory-field-label[b-s3g7202sfx] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* Typoregel: Feldwert – bricht sauber um, kein Overflow */
.inventory-field-value[b-s3g7202sfx] {
    font-size: 0.92rem;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Info-Spalte: Status-Badge und nächste Buchung gestapelt */
.inventar-info[b-s3g7202sfx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    padding-top: 0.15rem;
}

/* Layoutregel: Datum und Name der nächsten Buchung untereinander */
.inventar-next-booking[b-s3g7202sfx] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Typoregel: Datumszeile der nächsten Buchung */
.inv-next-date[b-s3g7202sfx] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
}

/* Typoregel: Mitgliedsname der nächsten Buchung */
.inv-next-member[b-s3g7202sfx] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Typoregel: Hinweis wenn kein Eintrag reserviert ist */
.inventar-booking-free[b-s3g7202sfx] {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

/* Aktions-Spalte: Reservieren-Button ganz rechts */
.inventar-actions[b-s3g7202sfx] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-self: end;
}

.inventory-card-overlay-toggle[b-s3g7202sfx] {
    display: none;
}

.inventory-card-details[b-s3g7202sfx] {
    display: contents;
}

.inventar-actions .btn.is-disabled[b-s3g7202sfx] {
    opacity: 0.58;
    cursor: not-allowed;
}

.inventory-card-overlay-icon[b-s3g7202sfx] {
    transition: transform var(--transition);
}

@media (max-width: 1330px) {
    .inventar-list--stack[b-s3g7202sfx] {
        display: none;
    }

    .inventar-list-columns[b-s3g7202sfx] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .inventar-card[b-s3g7202sfx] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        align-items: start;
        gap: 0.7rem 1rem !important;
    }

    .inventar-image-title[b-s3g7202sfx] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .inventory-card-overlay-toggle[b-s3g7202sfx] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: inventoryChevronFloat 2.2s ease-in-out infinite;
    }

    .inventory-card-details[b-s3g7202sfx] {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem 1rem;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    .inventory-card--expanded .inventory-card-details[b-s3g7202sfx] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .inventory-card--expanded .inventory-card-overlay-icon[b-s3g7202sfx] {
        transform: rotate(180deg);
    }

    .inventory-card--expanded .inventory-card-overlay-toggle[b-s3g7202sfx] {
        animation: none;
    }

    .inventar-card:hover .inventory-card-overlay-toggle[b-s3g7202sfx] {
        color: var(--primary-hover);
    }

    .inventory-card-overlay-toggle:hover .inventory-card-overlay-icon[b-s3g7202sfx],
    .inventory-card-overlay-toggle:focus-visible .inventory-card-overlay-icon[b-s3g7202sfx] {
        opacity: 1;
        transform: scale(1.03);
    }

    .inventory-card-overlay-toggle:focus-visible[b-s3g7202sfx] {
        outline: none;
        color: var(--primary-hover);
    }

    .inventar-actions[b-s3g7202sfx] {
        justify-self: stretch;
        width: 100%;
        margin-top: 0.15rem;
        padding-bottom: 1.6rem;
    }
}

/* BILD & PLACEHOLDER */

.inventory-preview-button[b-s3g7202sfx],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail[b-s3g7202sfx] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.inventory-preview-button[b-s3g7202sfx] {
    display: inline-flex;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

/* Größenregel: Bild und Placeholder als klares visuelles Anker-Element */
.inventory-preview-image[b-s3g7202sfx],
.inventory-placeholder[b-s3g7202sfx] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
}

.inventory-preview-image[b-s3g7202sfx],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail img[b-s3g7202sfx] {
    display: block;
    object-fit: cover;
}

/* UI-Regel: Initialen-Platzhalter wenn kein Bild vorhanden */
.inventory-placeholder[b-s3g7202sfx] {
    display: grid;
    place-items: center;
    background: rgba(249, 115, 22, 0.10);
    color: var(--primary);
    font-weight: 700;
}

/* .inventory-feedback und .lightbox-* global in app.css */

/* RESPONSIVE */

/* Responsive Anpassung: unter 640px alles einspaltig stapeln */
@media (max-width: 640px) {
    .inventar-list--stack[b-s3g7202sfx] {
        display: flex;
    }

    .inventar-list-columns[b-s3g7202sfx] {
        display: none;
    }

    .inventar-card[b-s3g7202sfx] {
        grid-template-columns: 1fr;
        row-gap: 0.8rem;
        justify-items: center;
        text-align: center;
        padding: 1rem;
    }

    .inventar-image-title[b-s3g7202sfx],
    .inventory-card-details[b-s3g7202sfx],
    .inventar-actions[b-s3g7202sfx] {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
    }

    .inventar-image-title[b-s3g7202sfx] {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    .inventar-image-title h3[b-s3g7202sfx] {
        text-align: center;
    }

    .inventory-card-details[b-s3g7202sfx] {
        order: 3;
        grid-template-columns: 1fr;
    }

    .inventar-actions[b-s3g7202sfx] {
        order: 4;
        justify-content: stretch;
        width: 100%;
        margin-top: 0.35rem;
        padding-bottom: 1.5rem;
    }

    .inventory-field[b-s3g7202sfx] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .inventar-actions .btn[b-s3g7202sfx] {
        margin-inline: 0;
        width: 100%;
        justify-content: center;
    }
}

/* .lightbox-* und @keyframes inventoryChevronFloat global in app.css */

@media (max-width: 576px) {
    .inventar-actions[b-s3g7202sfx] {
        justify-self: center;
    }
}
/* /Pages/Verwaltung/Mitglieder.razor.rz.scp.css */
/* ============================================================
   MITGLIEDER.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält die Styles für Components / Pages / Verwaltung / Mitglieder.razor.css.

   Zweck:
   - Sichert eine nachvollziehbare Gestaltung im projektweiten Designsystem.
   ============================================================ */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.member-name-cell[b-e6kg7xmfir] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.card-person-avatar[b-e6kg7xmfir] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.card-person-avatar--icon svg[b-e6kg7xmfir] {
    width: 16px;
    height: 16px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.text-link[b-e6kg7xmfir] {
    color: var(--info);
    text-decoration: none;
    font-size: var(--text-sm);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.text-link:hover[b-e6kg7xmfir] {
    text-decoration: underline;
    color: var(--info);
}

/* .char-counter global in app.css */

@media (max-width: 576px) {
    .member-name-cell[b-e6kg7xmfir] {
        align-items: flex-start;
    }

    .card-person-avatar[b-e6kg7xmfir] {
        width: 28px;
        height: 28px;
    }

    .text-link[b-e6kg7xmfir] {
        overflow-wrap: anywhere;
    }
}
/* /Pages/Verwaltung/Reservierungen.razor.rz.scp.css */
/* ============================================================
   RESERVIERUNGEN.RAZOR.CSS - Stylesheet

   Beschreibung:
   - Enthält seitenlokale Card-Styles für die Reservierungsübersicht.
   - Card-Layout analog zur Inventar-Seite: 3 Spalten auf Desktop,
     kollabierbare Details mit Chevron-Toggle auf Tablet/Mobile.

   Zweck:
   - Einheitliches Card-Verhalten über Inventar- und Reservierungsseite hinweg.
   ============================================================ */

/* DESKTOP-LAYOUT */

/* Spalte 1: Wrapper für Avatar, Titel und Person-Subtitle */
.reserv-card-leading-col[b-u0nobjkmnj] {
    min-width: 0;
}

/* Avatar und Titel horizontal nebeneinander */
.reserv-card-head[b-u0nobjkmnj] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Avatar-Wrapper: feste Größe, zentriert */
.reserv-card-leading[b-u0nobjkmnj] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* Titel und Person-Subtitle gestapelt */
.reserv-card-head-copy[b-u0nobjkmnj] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Avatar: orangefarbener Initialen-Kreis */
.card-person-avatar[b-u0nobjkmnj] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(249,115,22,0.10);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(4, 8, 14, 0.16);
}

/* Avatar ohne Initialen: Icon-Fallback */
.card-person-avatar--icon svg[b-u0nobjkmnj] {
    width: 26px;
    height: 26px;
}

/* Verantwortliche Person als Subtitle unter dem Gegenstandsnamen */
.reserv-card-person[b-u0nobjkmnj] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Details auf Desktop: Inhalt direkt im Grid (kein Collapse) */
.reserv-card-details[b-u0nobjkmnj] {
    display: contents;
}

/* ZEITRAUM-FELD (analog inventory-field) */

/* Label + Wert gestapelt – wie das Beschreibungsfeld auf der Inventarseite */
.reserv-field[b-u0nobjkmnj] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Kleines Uppercase-Label über dem Feldwert */
.reserv-field-label[b-u0nobjkmnj] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

/* Feldwert – bricht sauber um */
.reserv-field-value[b-u0nobjkmnj] {
    font-size: 0.92rem;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Tagesanzahl auf eigener Zeile unter dem Datumbereich */
.reserv-field-value .text-tertiary[b-u0nobjkmnj] {
    display: block;
}

/* Notizen-Wert: etwas kleiner und gedämpft */
.reserv-field-value--secondary[b-u0nobjkmnj] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.2rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* CHEVRON-TOGGLE */

/* Auf Desktop unsichtbar */
.reserv-card-overlay-toggle[b-u0nobjkmnj] {
    display: none;
}

/* Chevron-Icon mit Übergang beim Aufklappen */
.reserv-card-overlay-icon[b-u0nobjkmnj] {
    opacity: 0.92;
    transition: transform var(--transition);
}

/* AKTIONS-BEREICH */

/* Feste Mindestbreite damit alle Cards dieselbe Spaltenbreite haben,
   unabhängig davon ob der "Zurückgeben"-Button sichtbar ist oder nicht */
.reserv-card-actions[b-u0nobjkmnj] {
    gap: 10px;
    min-width: 210px;
    justify-content: flex-end;
}

/* Im aufgeklappten Responsive-Bereich: Buttons linksbündig */
@media (max-width: 1330px) {
    .reserv-card-actions[b-u0nobjkmnj] {
        justify-content: flex-start;
        min-width: 0;
    }
}

/* Wrap-Regel für lange Notizen-Texte im Feld */
.reserv-card-meta-item--wrap[b-u0nobjkmnj] {
    align-items: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Readonly-Anzeige im Edit-Modal (Gegenstand gesperrt) */
.reserv-readonly-field[b-u0nobjkmnj] {
    display: flex;
    align-items: center;
    min-height: 50px;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border-style: dashed;
}

/* RESPONSIV ≤1330px – 2-spaltig nebeneinander, Details immer sichtbar */

@media (max-width: 1330px) {
    /* Container: 2 Karten nebeneinander */
    .reserv-cards[b-u0nobjkmnj] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    /* Karte: einspaltig, kein Collapse */
    .reserv-card[b-u0nobjkmnj] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: start;
        gap: 0.7rem !important;
    }

    /* Führende Spalte nimmt die volle Breite ein */
    .reserv-card-leading-col[b-u0nobjkmnj] {
        grid-column: 1 / -1;
    }

    /* Toggle-Button bleibt unsichtbar – Details immer offen */
    .reserv-card-overlay-toggle[b-u0nobjkmnj] {
        display: none;
    }

    /* Details-Bereich: immer sichtbar, kein Collapse */
    .reserv-card-details[b-u0nobjkmnj] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        grid-column: 1 / -1;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        max-height: none;
        transform: none;
    }

    /* Actions: volle Breite, linksbündig */
    .reserv-card-actions[b-u0nobjkmnj] {
        justify-self: stretch;
        width: 100%;
    }
}

/* RESPONSIV ≤640px – einspaltig mit Chevron-Collapse, analog Inventar */

@media (max-width: 640px) {
    /* Container: 2-Spalten-Grid aufheben, zurück zu einspaltig */
    .reserv-cards[b-u0nobjkmnj] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    /* Karte: einspaltig, zentriert, Platz für Chevron unten */
    .reserv-card[b-u0nobjkmnj] {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 0.8rem;
        justify-items: center;
        text-align: center;
        padding: 1rem 1rem 1.6rem;
    }

    /* Avatar stapelt sich vertikal über den Titel */
    .reserv-card-head[b-u0nobjkmnj] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    /* Titelbereich zentriert */
    .reserv-card-head-copy[b-u0nobjkmnj] {
        width: 100%;
        text-align: center;
    }

    /* Person-Subtitle zentriert */
    .reserv-card-person[b-u0nobjkmnj] {
        justify-content: center;
    }

    /* Zeitraum-Feld zentriert */
    .reserv-field[b-u0nobjkmnj] {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* Chevron: animierter Toggle am unteren Rand der Karte */
    .reserv-card-overlay-toggle[b-u0nobjkmnj] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0 0.6rem;
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        z-index: 2;
        animation: reservationChevronFloat-b-u0nobjkmnj 2.2s ease-in-out infinite;
    }

    /* Details: standardmäßig eingeklappt */
    .reserv-card-details[b-u0nobjkmnj] {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        grid-column: 1 / -1;
        grid-row: 2;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height 420ms ease-out,
            opacity 320ms ease-out,
            transform 420ms ease-out;
    }

    /* Details: aufgeklappt */
    .reserv-card--expanded .reserv-card-details[b-u0nobjkmnj] {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Chevron dreht sich beim Aufklappen */
    .reserv-card--expanded .reserv-card-overlay-icon[b-u0nobjkmnj] {
        transform: rotate(180deg);
    }

    /* Chevron-Animation pausieren wenn aufgeklappt */
    .reserv-card--expanded .reserv-card-overlay-toggle[b-u0nobjkmnj] {
        animation: none;
    }

    /* Actions: volle Breite, zentriert, Abstand zum Chevron */
    .reserv-card-actions[b-u0nobjkmnj] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 1.6rem;
        min-width: 0;
    }
}

/* KEYFRAME: schwebende Chevron-Animation */

@keyframes reservationChevronFloat-b-u0nobjkmnj {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}