/* _content/OrgaPlus/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: 2px solid rgba(249,115,22,0.6);
    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;
    }
}

/* _content/OrgaPlus/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: 2px solid rgba(249,115,22,0.65);
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
}

/* 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 wirkt wie eine hochwertige Erweiterung der User-Card */
.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:
        linear-gradient(180deg, rgba(26, 39, 63, 0.98) 0%, rgba(21, 31, 52, 0.98) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow:
        0 18px 40px rgba(15,23,42,.24),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(-8px);
    animation: user-menu-enter-b-oapmj2na0i 180ms ease-out forwards;
    z-index: 140;
}

/* UI-Regel: gruppiert Menüinhalte mit ruhiger Innenstruktur */
.user-menu-section[b-oapmj2na0i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Navigationsregel: Menü-Kopf wiederholt Benutzerinfos bewusst zurückhaltend */
.user-menu-profile[b-oapmj2na0i] {
    padding: 12px 8px 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-menu-name[b-oapmj2na0i] {
    color: #fff;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.2;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-menu-role[b-oapmj2na0i] {
    color: rgba(203, 213, 225, 0.68);
    font-size: var(--text-xs);
    margin-top: 3px;
}

/* Navigationsregel: teilt Bereiche klar ohne harte Linien */
.user-menu-divider[b-oapmj2na0i] {
    height: 1px;
    margin: 8px 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* Navigationsregel: Link- und Buttoneinträge bleiben einheitlich und gut klickbar */
.user-menu-link[b-oapmj2na0i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #E2E8F0;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

/* Zustandsregel: Hover bleibt ruhig und hochwertig */
.user-menu-link:hover[b-oapmj2na0i] {
    background: rgba(255,255,255,0.07);
    color: #fff;
    text-decoration: none;
    transform: translateX(1px);
}

/* Aktiver Menüeintrag: zeigt die aktuelle Seite mit orangem Akzent an */
.user-menu-link.active[b-oapmj2na0i] {
    background: rgba(249,115,22,0.12);
    color: #F97316;
}

/* Aktiver Bullet: voller Orange-Ton mit stärkerem Halo */
.user-menu-link.active .user-menu-icon[b-oapmj2na0i] {
    background: rgba(249,115,22,0.9);
    box-shadow: 0 0 0 2px rgba(249,115,22,0.22);
}

/* Hover auf aktivem Eintrag bleibt orangefarben */
.user-menu-link.active:hover[b-oapmj2na0i] {
    background: rgba(249,115,22,0.18);
    color: #fb923c;
}

/* Zustandsregel: Fokus-Ring hält Tastaturnavigation klar sichtbar */
.user-menu-link:focus-visible[b-oapmj2na0i] {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.14),
        0 0 0 4px rgba(249,115,22,.24);
}

/* UI-Regel: kleine Iconspur hält Einträge optisch ausgerichtet */
.user-menu-icon[b-oapmj2na0i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(249,115,22,0.74);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.08);
}

/* Formularregel: Logout übernimmt dieselbe Breite wie andere Menüpunkte */
.user-menu-logout[b-oapmj2na0i] {
    margin: 0;
}

/* Zustandsregel: Logout ist akzentuiert, aber nicht aggressiv */
.user-menu-link-danger[b-oapmj2na0i] {
    color: #f3c1b0;
}

/* Zustandsregel: Logout hebt sich dezent rot ab */
.user-menu-link-danger .user-menu-icon[b-oapmj2na0i],
.user-menu-icon-danger[b-oapmj2na0i] {
    background: rgba(242, 122, 92, 0.88);
    box-shadow: 0 0 0 2px rgba(242, 122, 92, 0.12);
}

/* Zustandsregel: Hover für Logout bleibt weich */
.user-menu-link-danger:hover[b-oapmj2na0i] {
    background: rgba(242,122,92,0.10);
    color: #ffd8cb;
}

/* Animationsregel: Dropdown öffnet weich mit leichtem Fade und Slide */
@keyframes user-menu-enter-b-oapmj2na0i {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 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); }

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 1199px) {
    .app-header[b-oapmj2na0i] {
        padding-inline: 14px;
    }

    .header-brand[b-oapmj2na0i] {
        max-width: min(380px, calc(100vw - 340px));
    }

    .user-name[b-oapmj2na0i] {
        max-width: 160px;
    }
}

@media (max-width: 920px) {
    .header-brand[b-oapmj2na0i] {
        max-width: min(280px, calc(100vw - 280px));
    }

    .header-user[b-oapmj2na0i] {
        padding: 6px 8px;
    }

    .user-info[b-oapmj2na0i] {
        display: none;
    }

    .user-menu-panel[b-oapmj2na0i] {
        width: min(270px, calc(100vw - 18px));
    }
}

@media (max-width: 767px) {
    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .app-header[b-oapmj2na0i] {
        left: 0;
        gap: 8px;
        padding: 0 10px;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .header-brand[b-oapmj2na0i] {
        display: inline-flex;
        max-width: min(48vw, calc(100vw - 180px));
        gap: 6px;
        font-size: var(--text-sm);
        padding: 5px 7px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .hamburger[b-oapmj2na0i] {
        display: flex;
    }

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

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .header-user[b-oapmj2na0i] {
        padding: 4px 6px 4px 4px;
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.05);
        box-shadow: none;
    }

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

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 479px) {
    /* Navigationsregel: nutzt die Headerbreite auf Smartphones ohne gedrängte Abstände */
    .app-header[b-oapmj2na0i] {
        padding: 0 8px;
    }

    /* Navigationsregel: Logo bleibt mobil sichtbar, ohne Aktionen zu verdrängen */
    .header-brand[b-oapmj2na0i] {
        max-width: min(160px, calc(100vw - 120px));
        padding-inline: 4px;
    }

    /* Navigationsregel: Aktionsbereich bleibt rechts bedienbar */
    .header-nav[b-oapmj2na0i] {
        gap: 6px;
        min-width: 0;
    }

    /* UI-Regel: Profilchip bleibt kompakt, aber weiter als Trigger erkennbar */
    .header-user[b-oapmj2na0i] {
        min-width: 0;
        justify-content: center;
    }

    /* UI-Regel: Chevron wird auf kleinen Smartphones ausgeblendet */
    .user-menu-chevron[b-oapmj2na0i] {
        display: none;
    }

    /* Navigationsregel: Menübreite bleibt innerhalb des mobilen Viewports */
    .user-menu-panel[b-oapmj2na0i] {
        width: min(260px, calc(100vw - 14px));
    }
}

@media (max-width: 767px) {
    .app-header[b-oapmj2na0i] {
        gap: 10px;
        padding: 0 14px;
    }

    .header-brand[b-oapmj2na0i] {
        max-width: min(62vw, calc(100vw - 160px));
        gap: 10px;
        padding: 6px 8px;
    }

    .header-brand img[b-oapmj2na0i] {
        height: 42px;
        max-width: 160px;
    }

    .header-brand-name[b-oapmj2na0i] {
        font-size: 1.1rem;
    }

    .header-brand-sub[b-oapmj2na0i] {
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }

    .header-user[b-oapmj2na0i] {
        min-height: 46px;
        padding: 6px 8px 6px 6px;
        border-radius: 16px;
    }

    .user-avatar[b-oapmj2na0i] {
        width: 36px;
        height: 36px;
    }

    .hamburger[b-oapmj2na0i] {
        width: 44px;
        height: 44px;
    }

    .hamburger span[b-oapmj2na0i] {
        width: 24px;
    }
}

@media (max-width: 430px) {
    .app-header[b-oapmj2na0i] {
        padding: 0 12px;
    }

    .header-brand[b-oapmj2na0i] {
        max-width: min(66vw, calc(100vw - 136px));
        gap: 8px;
    }

    .header-brand img[b-oapmj2na0i] {
        height: 38px;
    }

    .header-brand-name[b-oapmj2na0i] {
        font-size: 1rem;
    }

    .header-brand-sub[b-oapmj2na0i] {
        font-size: 0.66rem;
    }
}
/* _content/OrgaPlus/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: var(--header-height);
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    background: #f5f7fb;
    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: 32px 32px 20px;
}

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

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 767px) {
    /* Inhaltsbereich: definiert den zentralen Arbeitsbereich innerhalb des Layouts */
    .app-body[b-hhdb4ectnm] {
        left: 0;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .app-content[b-hhdb4ectnm] {
        padding: 18px 16px 16px;
    }
}

/* 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: 14px 12px 14px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .app-content[b-hhdb4ectnm] {
        padding: 22px 16px 24px;
    }
}

@media (max-width: 430px) {
    .app-content[b-hhdb4ectnm] {
        padding: 18px 12px 22px;
    }
}
/* _content/OrgaPlus/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.
   ============================================================ */

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.nav-sidebar[b-14xr6oy080] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    z-index: 101;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--transition-md), width var(--transition-md);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.nav-main[b-14xr6oy080] {
    flex: 1;
    padding: 16px 0;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.nav-section[b-14xr6oy080] {
    padding: 0 10px;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.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.72);
    padding: 12px 12px 7px;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.nav-divider[b-14xr6oy080] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
    margin: 12px 16px 6px;
}

/* Brand-Styles sind in wwwroot/css/app.css (global), da NavLink das Root-Element des
   Markenbereichs ist und Blazor-Scoped-CSS das Scope-Attribut nicht zuverlässig
   an gerenderte Blazor-Komponenten weitergibt. Gleiches Muster wie bei .nav-item. */

/* Overlay (mobile) */
.nav-overlay[b-14xr6oy080] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 109;
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 1199px) {
    .nav-sidebar[b-14xr6oy080] {
        width: 224px;
    }
}

@media (max-width: 767px) {
    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .nav-sidebar[b-14xr6oy080] {
        transform: translateX(-100%);
        width: min(320px, 100vw);
        max-width: 100vw;
        top: var(--header-height);
        z-index: 120;
        box-shadow:
            inset -1px 0 0 rgba(255,255,255,0.045),
            inset 0 1px 0 rgba(255,255,255,0.035),
            20px 0 44px rgba(15,23,42,.24);
    }

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

    /* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
    .nav-sidebar.open[b-14xr6oy080] {
        transform: translateX(0);
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .nav-overlay[b-14xr6oy080] {
        display: block;
        top: var(--header-height);
    }
}

@media (max-width: 576px) {
    .nav-sidebar[b-14xr6oy080] {
        width: 100vw;
    }
}
/* _content/OrgaPlus/Components/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-kjsonc5na8] {
    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-kjsonc5na8] {
    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-kjsonc5na8] {
    grid-column: span 2;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.admin-tile[b-kjsonc5na8] {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    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-kjsonc5na8] {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.09);
    border-color: rgba(249, 115, 22, 0.2);
    background: #ffffff;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.admin-tile.is-coming-soon[b-kjsonc5na8] {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.admin-tile-icon[b-kjsonc5na8] {
    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.4),
        0 6px 14px rgba(15, 23, 42, 0.08);
    transition: transform 190ms ease, filter 190ms ease;
}

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

/* Karteninhalt: ordnet Text und Metadaten innerhalb der Kartenfläche */
.admin-tile-body[b-kjsonc5na8] {
    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-kjsonc5na8] {
    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-kjsonc5na8] {
    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-kjsonc5na8] {
    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-kjsonc5na8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.35rem;
}

/* Pfeil-Button: orangefarbener Aktions-Indikator analog zu den Dashboard-Kacheln */
.admin-tile-arrow[b-kjsonc5na8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff8a1d 0%, #ff6a00 100%);
    border: 1px solid rgba(255,122,24,.34);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    color: #ffffff;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

/* Zustandsregel: Pfeil verschiebt sich leicht nach rechts beim Hover */
.admin-tile:hover .admin-tile-arrow[b-kjsonc5na8] {
    transform: translateX(2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.admin-status-grid[b-kjsonc5na8] {
    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-kjsonc5na8] {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

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

/* Responsive Anpassung: reduziert die Kacheldichte auf schmaleren Tablets */
@media (max-width: 1024px) {
    .admin-overview-grid[b-kjsonc5na8],
    .admin-status-grid[b-kjsonc5na8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

/* Responsive Anpassung: vermeidet gequetschte Admin-Kacheln im Tablet-Hochformat */
@media (max-width: 820px) {
    .admin-overview-grid[b-kjsonc5na8],
    .admin-status-grid[b-kjsonc5na8] {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

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

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

    .admin-tile-link[b-kjsonc5na8] {
        justify-content: center;
        width: 100%;
    }
}
/* _content/OrgaPlus/Components/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-gsl5kfk875] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-row-card[b-gsl5kfk875],
.profile-panel[b-gsl5kfk875],
/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.upload-card[b-gsl5kfk875] {
    border: 1px solid #cbd5e1;
    border-radius: 22px;
    background: #fff;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.user-row-card[b-gsl5kfk875] {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

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

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-row-main[b-gsl5kfk875] {
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.user-field-grid[b-gsl5kfk875] {
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    grid-column: span 2;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-field-label[b-gsl5kfk875] {
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

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

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

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

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

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.user-modal-grid[b-gsl5kfk875] {
    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-gsl5kfk875] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

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

.admin-status-chip[b-gsl5kfk875] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-status-chip strong[b-gsl5kfk875] {
    color: #1d4ed8;
}

.admin-permission-card[b-gsl5kfk875] {
    margin: 0.8rem 0 1rem;
    padding: 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
}

.admin-permission-header[b-gsl5kfk875] {
    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-gsl5kfk875] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    font-size: var(--text-xs);
    font-weight: 800;
}

.admin-permission-text[b-gsl5kfk875] {
    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-gsl5kfk875] {
    margin: 0.8rem 0 1rem;
    padding: 1rem;
    border: 1px solid #fdba74;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.role-info-header[b-gsl5kfk875] {
    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-gsl5kfk875] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff8a1d 0%, #ff6a00 100%);
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18);
    font-size: var(--text-xs);
    font-weight: 800;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-list[b-gsl5kfk875] {
    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-gsl5kfk875] {
    height: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 15px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    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-gsl5kfk875] {
    border-color: #fdba74;
    background: #fff7ed;
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.11);
    transform: translateY(-1px);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.role-info-item strong[b-gsl5kfk875] {
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    padding: 1rem;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.profile-panel p[b-gsl5kfk875] {
    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-gsl5kfk875] {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.upload-hint[b-gsl5kfk875] {
    margin: 0.55rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-file-chip[b-gsl5kfk875] {
    display: inline-flex;
    max-width: 100%;
    margin-top: 0.85rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.user-feedback[b-gsl5kfk875] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.user-feedback.is-success[b-gsl5kfk875] {
    background: #dcfce7;
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.user-feedback.is-error[b-gsl5kfk875] {
    background: #fee2e2;
    color: #991b1b;
}

/* 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-gsl5kfk875] {
        flex-direction: column;
    }

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

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

/* 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-gsl5kfk875] {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .user-row-summary[b-gsl5kfk875] {
        align-items: flex-start;
    }
}

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

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

/* UI-Regel: inaktiver Tab – dezente Darstellung, die den aktiven Tab hervortreten lässt */
.admin-tab[b-gsl5kfk875] {
    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: #ffffff;
    background: #475569;
    border: 1px solid rgba(71,85,105,.3);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.admin-tab--mitglied[b-gsl5kfk875] {
    background: #16a34a;
    border-color: rgba(22,163,74,.3);
}

.admin-tab--benutzer[b-gsl5kfk875] {
    background: #2563eb;
    border-color: rgba(37,99,235,.3);
}

/* Zustandsregel: aktiver Tab erhält orangene Unterlinie und primäre Textfarbe */
.admin-tab.active[b-gsl5kfk875] {
    color: #ffffff;
    border-bottom-color: var(--primary);
    background: #ea580c;
    border-color: rgba(255,122,24,.44);
    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-gsl5kfk875] {
    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-gsl5kfk875] {
    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.22);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

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

@media (max-width: 900px) {
    .admin-tab[b-gsl5kfk875] {
        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-gsl5kfk875] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* UI-Regel: runder Initialen-Avatar für Mitglieder – orange Akzentfarbe passend zum Design */
.member-avatar[b-gsl5kfk875] {
    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-gsl5kfk875] {
    color: var(--info);
    text-decoration: none;
    font-size: var(--text-sm);
}

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

/* Responsive Schlussregel: gewinnt gegen Basiskartenregeln und hält Benutzeraktionen mobil erreichbar */
@media (max-width: 640px) {
    /* Layoutregel: stapelt Benutzerkopf und Metadaten, damit lange Namen nicht überlaufen */
    .user-row-summary[b-gsl5kfk875] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Formular- und Aktionsregel: hält Zeilenaktionen mobil erreichbar und umbrechbar */
    .user-row-actions[b-gsl5kfk875] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Flächenregel: reduziert Nebenpanels im Dialog auf mobile Innenabstände */
    .profile-panel[b-gsl5kfk875],
    .upload-card[b-gsl5kfk875] {
        padding: 0.85rem;
    }

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

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

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

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

.char-counter[b-gsl5kfk875] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-gsl5kfk875] {
    color: var(--warning);
}

.char-counter--red[b-gsl5kfk875] {
    color: var(--danger);
    font-weight: 700;
}
/* _content/OrgaPlus/Components/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-50mjvq1q20] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e2e8f0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.doc-name-link[b-50mjvq1q20] {
    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-50mjvq1q20] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-feedback[b-50mjvq1q20] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.document-feedback.is-success[b-50mjvq1q20] {
    background: #dcfce7;
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.document-feedback.is-error[b-50mjvq1q20] {
    background: #fee2e2;
    color: #991b1b;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.upload-hint[b-50mjvq1q20] {
    margin: 0.55rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-file-chip[b-50mjvq1q20] {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 600;
}

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

.doc-table-badge[b-50mjvq1q20] {
    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[b-50mjvq1q20] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.char-counter[b-50mjvq1q20] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-50mjvq1q20] {
    color: var(--warning);
}

.char-counter--red[b-50mjvq1q20] {
    color: var(--danger);
    font-weight: 700;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-frame[b-50mjvq1q20] {
    width: 100%;
    min-height: 68vh;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff7ed;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-image[b-50mjvq1q20] {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    object-fit: contain;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-fallback[b-50mjvq1q20] {
    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 #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff7ed, #f8fafc);
}

/* 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-50mjvq1q20] {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

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

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

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

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

    .pending-file-chip[b-50mjvq1q20] {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

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

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

.pending-file-chip[b-50mjvq1q20] {
    max-width: 100%;
}
/* _content/OrgaPlus/Components/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-1aknbjvq1r] {
    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-1aknbjvq1r] {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

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

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

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

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.email-card-header p[b-1aknbjvq1r] {
    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-1aknbjvq1r] {
    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-1aknbjvq1r] {
    margin-top: 0.75rem;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.email-feedback[b-1aknbjvq1r] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.email-feedback.is-success[b-1aknbjvq1r] {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.email-feedback.is-error[b-1aknbjvq1r] {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

/* 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-1aknbjvq1r] {
        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-1aknbjvq1r] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Schlussregel: gewinnt gegen Basiskartenregeln und verhindert mobile Aktionsüberläufe */
@media (max-width: 640px) {
    /* Flächenregel: stapelt E-Mail-Kartenköpfe und hält Statusaktionen sichtbar */
    .email-card-header[b-1aknbjvq1r],
    .email-card-actions[b-1aknbjvq1r] {
        align-items: stretch;
        flex-direction: column;
    }

    /* Formular- und Aktionsregel: macht E-Mail-Aktionen auf Touch-Geräten vollbreit */
    .email-card-actions .btn[b-1aknbjvq1r] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .email-card-actions .btn[b-1aknbjvq1r] {
        flex: 1 1 220px;
        justify-content: center;
    }
}
/* _content/OrgaPlus/Components/Pages/Admin/Events.razor.rz.scp.css */
/* ============================================================
   EVENTS.RAZOR.CSS - Stylesheet

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.event-feedback[b-9pkqenkimu] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.event-feedback.is-success[b-9pkqenkimu] {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.event-feedback.is-error[b-9pkqenkimu] {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.event-time-cell[b-9pkqenkimu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.event-time-range[b-9pkqenkimu] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .event-time-range[b-9pkqenkimu] {
        font-size: 0.9rem;
        white-space: normal;
    }
}

.form-label[b-9pkqenkimu] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.char-counter[b-9pkqenkimu] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-9pkqenkimu] {
    color: var(--warning);
}

.char-counter--red[b-9pkqenkimu] {
    color: var(--danger);
    font-weight: 700;
}
/* _content/OrgaPlus/Components/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-h1rttd1qq5] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.inventory-admin-card[b-h1rttd1qq5],
.inventory-image-panel[b-h1rttd1qq5],
/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.upload-card[b-h1rttd1qq5] {
    border: 1px solid #cbd5e1;
    border-radius: 22px;
    background: #fff;
}

/* Flächenregel: 5-Spalten-Grid – alle drei Inhaltsbereiche gleichwertig, Badges+Buttons auto */
.inventory-admin-card[b-h1rttd1qq5] {
    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;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

/* Layoutregel: Bild und Titel horizontal und vertikal zentriert nebeneinander */
.inventory-admin-image-title[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    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-h1rttd1qq5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Typoregel: kleines Uppercase-Label über dem Feldwert */
.inventory-field-label[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    font-size: 0.92rem;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Layoutregel: Status-Badges als kompakte Gruppe */
.inventory-admin-badges[b-h1rttd1qq5] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

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

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

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

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.inventory-placeholder[b-h1rttd1qq5] {
    display: grid;
    place-items: center;
    background: #93c5fd;
    color: #1d4ed8;
    font-weight: 700;
}

/* Label-Zeile: Text links, Zähler rechts */
.form-label[b-h1rttd1qq5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Zeichenzähler rechts im Label – neutral bis 59, gelb ab 60, rot ab 80 */
.char-counter[b-h1rttd1qq5] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Zustandsregel: Warnung ab 60 Zeichen */
.char-counter--yellow[b-h1rttd1qq5] {
    color: var(--warning);
}

/* Zustandsregel: Limit erreicht ab 80 Zeichen */
.char-counter--red[b-h1rttd1qq5] {
    color: var(--danger);
    font-weight: 700;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.inventory-modal-grid[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    padding: 1rem;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

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

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.upload-card[b-h1rttd1qq5] {
    padding: 1rem;
    margin-top: 1rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.upload-hint[b-h1rttd1qq5] {
    margin: 0.55rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-file-chip[b-h1rttd1qq5] {
    max-width: 100%;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #fff1e6;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-previews[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    min-width: 0;
    margin: 0;
    padding: 0.45rem;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid #fdba74;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.pending-image-preview img[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    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-h1rttd1qq5] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: #e2e8f0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.inventory-gallery-grid[b-h1rttd1qq5] {
    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-h1rttd1qq5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #cbd5e1;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-gallery-card.is-primary[b-h1rttd1qq5] {
    border-color: #93c5fd;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

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

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.inventory-feedback[b-h1rttd1qq5] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-feedback.is-success[b-h1rttd1qq5] {
    background: #dcfce7;
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-feedback.is-error[b-h1rttd1qq5] {
    background: #fee2e2;
    color: #991b1b;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-overlay[b-h1rttd1qq5] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(4px);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.lightbox-dialog[b-h1rttd1qq5] {
    position: relative;
    width: min(980px, 100%);
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 28px;
    background: #0f172a;
    color: #fff;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-main[b-h1rttd1qq5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-main-image[b-h1rttd1qq5] {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 22px;
}

.lightbox-close[b-h1rttd1qq5],
/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav[b-h1rttd1qq5] {
    position: absolute;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: #334155;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-close[b-h1rttd1qq5] {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav[b-h1rttd1qq5] {
    top: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    transform: translateY(-50%);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav-left[b-h1rttd1qq5] {
    left: 1rem;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav-right[b-h1rttd1qq5] {
    right: 1rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.lightbox-nav:disabled[b-h1rttd1qq5] {
    opacity: 0.35;
    cursor: default;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnails[b-h1rttd1qq5] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail[b-h1rttd1qq5] {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid transparent;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.lightbox-thumbnail.active[b-h1rttd1qq5] {
    border-color: rgba(191, 219, 254, 0.95);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail img[b-h1rttd1qq5] {
    width: 100%;
    height: 100%;
}

/* Responsive Anpassung: Grid auf 3 Spalten reduzieren – Badges/Buttons umbrechen */
@media (max-width: 980px) {
    /* Layoutregel: Felder bleiben, Badges + Buttons umbrechen auf zweite Zeile */
    .inventory-admin-card[b-h1rttd1qq5] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 0.6rem;
    }

    /* Layoutregel: Badges beginnen in der zweiten Zeile ab Spalte 2 */
    .inventory-admin-badges[b-h1rttd1qq5] {
        grid-column: 2;
        grid-row: 2;
    }

    /* Layoutregel: Buttons in der zweiten Zeile ab Spalte 3 */
    .inventory-admin-actions[b-h1rttd1qq5] {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
}

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

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

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .lightbox-dialog[b-h1rttd1qq5] {
        padding: 1rem;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav[b-h1rttd1qq5] {
        bottom: 1rem;
        top: auto;
        transform: none;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav-left[b-h1rttd1qq5] {
        left: 1rem;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav-right[b-h1rttd1qq5] {
        right: 1rem;
    }

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

    .lightbox-main[b-h1rttd1qq5] {
        min-height: 280px;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 640px) {
    /* Layoutregel: auf kleinen Displays alles einspaltig stapeln */
    .inventory-admin-card[b-h1rttd1qq5] {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }

    /* Layoutregel: alle Grid-Zuweisungen aufheben */
    .inventory-admin-badges[b-h1rttd1qq5],
    .inventory-admin-actions[b-h1rttd1qq5] {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
    }

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

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .lightbox-overlay[b-h1rttd1qq5] {
        padding: 0.75rem;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .lightbox-dialog[b-h1rttd1qq5] {
        border-radius: 22px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .lightbox-thumbnail[b-h1rttd1qq5] {
        width: 64px;
        height: 64px;
    }
}

/* 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-h1rttd1qq5] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    /* Flächenregel: verhindert abgeschnittene Lightbox-Inhalte auf kurzen Displays */
    .lightbox-dialog[b-h1rttd1qq5] {
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }

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

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

    /* Layoutregel: Badges nehmen volle Breite auf kleinen Smartphones */
    .inventory-admin-badges[b-h1rttd1qq5] {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .inventory-admin-card[b-h1rttd1qq5] {
        justify-items: center;
        text-align: center;
        padding: 1rem;
        row-gap: 0.8rem;
    }

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

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

    .inventory-field[b-h1rttd1qq5] {
        align-items: center;
        text-align: center;
    }

    .inventory-admin-badges[b-h1rttd1qq5],
    .inventory-admin-actions[b-h1rttd1qq5] {
        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-h1rttd1qq5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lightbox-main[b-h1rttd1qq5] {
        min-height: 220px;
    }
}
/* _content/OrgaPlus/Components/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-12uj7w5t3i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.settings-card[b-12uj7w5t3i] {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

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

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

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

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

.settings-log-card[b-12uj7w5t3i] {
    overflow: hidden;
}

.settings-log-header[b-12uj7w5t3i] {
    align-items: center;
}

.settings-log-meta[b-12uj7w5t3i] {
    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-12uj7w5t3i] {
    padding: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    border-radius: 16px;
    color: var(--text-secondary);
    background: rgba(248, 250, 252, 0.72);
}

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

.settings-log-entry[b-12uj7w5t3i] {
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 16px;
    padding: 0.85rem;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.78), rgba(255, 255, 255, 0.96));
}

.settings-log-entry-head[b-12uj7w5t3i] {
    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-12uj7w5t3i] {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    color: #991b1b;
    background: rgba(220, 38, 38, 0.12);
}

.settings-log-category[b-12uj7w5t3i] {
    overflow-wrap: anywhere;
}

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

.settings-log-exception[b-12uj7w5t3i] {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.55rem;
    color: #7f1d1d;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

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

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

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

.settings-feedback[b-12uj7w5t3i] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

.settings-feedback.is-success[b-12uj7w5t3i] {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
}

.settings-feedback.is-error[b-12uj7w5t3i] {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

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

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

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

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

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

    .settings-log-header .btn[b-12uj7w5t3i] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/OrgaPlus/Components/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-p2mcr1yuq2] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(255, 122, 24, 0.10), transparent 32%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.auth-card[b-p2mcr1yuq2] {
    width: 100%;
    background: linear-gradient(180deg, rgba(22, 35, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(15, 23, 42, 0.22),
        0 8px 18px rgba(15, 23, 42, 0.12);
    padding: 36px 36px 32px;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-logo[b-p2mcr1yuq2] {
    width: 140px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.22));
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-title[b-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-p2mcr1yuq2] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
}

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

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-input:focus[b-p2mcr1yuq2] {
    border-color: rgba(255, 122, 24, 0.55);
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 4px rgba(255, 122, 24, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-btn[b-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    color: #f8fafc;
    text-decoration-color: rgba(248, 250, 252, 0.6);
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-success[b-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
    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-p2mcr1yuq2] {
        padding: 20px 14px;
    }

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

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

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

@media (max-width: 767px) and (max-height: 820px) {
    .auth-page[b-p2mcr1yuq2] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* _content/OrgaPlus/Components/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.
   ============================================================ */

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.dashboard-grid[b-uouxua78ds] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Dashboard-Reihenfolge: zuerst Reservierungen, danach die restlichen Hauptkacheln */
.dashboard-grid > :nth-child(1)[b-uouxua78ds] {
    order: 2;
}

.dashboard-grid > :nth-child(2)[b-uouxua78ds] {
    order: 1;
}

.dashboard-grid > :nth-child(3)[b-uouxua78ds] {
    order: 3;
}

.dashboard-grid > :nth-child(4)[b-uouxua78ds] {
    order: 4;
}

/* Layoutregel: 2-Spalten-Grid für gleichgewichtete Dashboard-Bereiche */
.info-grid[b-uouxua78ds] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Stellt sicher, dass alle Dashboard-Karten gleichmäßig den verfügbaren Platz füllen */
.info-grid > *[b-uouxua78ds] {
    height: 100%;
    min-width: 0;
}

/* Dashboard-Reihenfolge: links naechste Reservierungen ueber naechsten Veranstaltungen, rechts Inventarstatus */
.info-grid > :nth-child(1)[b-uouxua78ds] {
    order: 2;
}

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

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

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

/* Next card */
.next-card-content[b-uouxua78ds] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.next-card-row[b-uouxua78ds] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.next-card-icon[b-uouxua78ds] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.next-card-date[b-uouxua78ds] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding-left: 2px;
}

/* Placeholder content inside InfoCard – ruhiger Hintergrund ohne Glow */
.placeholder-content[b-uouxua78ds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 32px 14px;
    text-align: center;
    border-radius: 14px;
    background: #f8f9fb;
    border: 1px solid var(--border-light);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.placeholder-icon[b-uouxua78ds] {
    opacity: 0.48;
    filter: saturate(.95);
}

/* Status list */
.status-list[b-uouxua78ds] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.status-row[b-uouxua78ds] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(226,232,240,.65);
}

/* Alle Status-Badges als gleich große Kreise – unabhängig vom Inhalt */
.status-row .badge[b-uouxua78ds] {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.status-row:last-child[b-uouxua78ds] {
    border-bottom: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ms-auto[b-uouxua78ds] { margin-left: auto; }

/* Latest documents */
.latest-doc-list[b-uouxua78ds] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Layoutregel: Dokumentzeile als klickbares Element mit ruhigem Hintergrund */
.latest-doc-row[b-uouxua78ds] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: #f8f9fb;
    border: 1px solid rgba(0,0,0,0.05);
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

/* Zustandsregel: oranges Highlight beim Hover ohne Glow */
.latest-doc-row:hover[b-uouxua78ds] {
    background: #fff7ed;
    border-color: rgba(249,115,22,.2);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.latest-doc-row:active[b-uouxua78ds] {
    background: #fff7ed;
}

.latest-doc-row:focus-visible[b-uouxua78ds],
/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.latest-doc-link:focus-visible[b-uouxua78ds] {
    outline: none;
    border-color: rgba(249,115,22,.55);
    box-shadow: 0 0 0 4px rgba(249,115,22,.12);
}

/* UI-Regel: Dokument-Icon ohne Glow, nur dezenter Rahmen */
.latest-doc-icon[b-uouxua78ds] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(249,115,22,.18);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.latest-doc-content[b-uouxua78ds] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.latest-doc-title[b-uouxua78ds] {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 780;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.latest-doc-meta[b-uouxua78ds] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Layoutregel: Pfeil-Button ohne Orange-Glow */
.latest-doc-arrow[b-uouxua78ds] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ff8a1d 0%, #ff6a00 100%);
    border: 1px solid rgba(255,122,24,.34);
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.latest-doc-row:hover .latest-doc-arrow[b-uouxua78ds] {
    transform: translateX(2px);
    color: #fff;
    background: linear-gradient(135deg, #ff932c 0%, #ea580c 100%);
    border-color: rgba(255,122,24,.44);
}

/* UI-Regel: Link-Button zum Öffnen aller Dokumente */
.latest-doc-link[b-uouxua78ds] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 780;
    text-decoration: none;
    background: #f97316;
    border: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.latest-doc-link:hover[b-uouxua78ds] {
    background: #ea580c;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

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

/* Empty-State für Dokumente – ruhiger Hintergrund ohne Glow */
.latest-doc-empty[b-uouxua78ds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 34px 14px;
    text-align: center;
    border-radius: 14px;
    background: #f8f9fb;
    border: 1px solid var(--border-light);
}

/* Responsive */
@media (max-width: 1200px) {
    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .dashboard-grid[b-uouxua78ds] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 992px) {
    /* Layoutregel: info-grid auf 2 Spalten reduzieren */
    .info-grid[b-uouxua78ds] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 768px) {
    /* Layoutregel: 2-Spalten-Grid auf Mobilgeräten – 2×2-Raster statt einer Spalte */
    .dashboard-grid[b-uouxua78ds] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .info-grid[b-uouxua78ds] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Anpassung: auf Smartphone-Größe eine Spalte, Karten zentriert untereinander */
@media (max-width: 480px) {
    .dashboard-grid[b-uouxua78ds] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Responsive Anpassung: hält Dashboard-Zusatzkarten auf Smartphones ohne Überlauf lesbar */
@media (max-width: 576px) {
    .next-card-content[b-uouxua78ds],
    .status-list[b-uouxua78ds],
    .latest-doc-list[b-uouxua78ds] {
        align-items: center;
        text-align: center;
        gap: 0.8rem;
    }

    .next-card-row[b-uouxua78ds],
    .status-row[b-uouxua78ds] {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.55rem;
    }

    .next-card-date[b-uouxua78ds] {
        justify-content: center;
        text-align: center;
        padding-left: 0;
    }

    .status-row .ms-auto[b-uouxua78ds] {
        margin-left: 0;
    }

    /* Layoutregel: reduziert Dokumentzeilen auf eine stabile Einspalten-Darstellung */
    .latest-doc-row[b-uouxua78ds] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 1rem;
        gap: 0.65rem;
    }

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

    .latest-doc-arrow[b-uouxua78ds] {
        display: inline-flex;
        justify-self: center;
    }

    /* UI-Regel: Dokumenttitel dürfen mobil umbrechen statt abgeschnitten zu werden */
    .latest-doc-title[b-uouxua78ds],
    .latest-doc-meta[b-uouxua78ds] {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .dashboard-grid[b-uouxua78ds] {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

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

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

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

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

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

    .status-list[b-uouxua78ds],
    .latest-doc-list[b-uouxua78ds] {
        gap: 12px;
    }

    .status-row[b-uouxua78ds] {
        gap: 12px;
        padding: 12px 0;
    }

    .status-dot[b-uouxua78ds] {
        width: 12px;
        height: 12px;
    }

    .status-row .badge[b-uouxua78ds] {
        width: 36px;
        height: 36px;
        font-size: 0.88rem;
    }

    .latest-doc-row[b-uouxua78ds] {
        padding: 16px;
        gap: 14px;
        border-radius: 16px;
    }

    .latest-doc-icon[b-uouxua78ds] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .latest-doc-title[b-uouxua78ds] {
        font-size: 0.98rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .latest-doc-meta[b-uouxua78ds] {
        font-size: 0.86rem;
        line-height: 1.45;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .latest-doc-arrow[b-uouxua78ds] {
        width: 38px;
        height: 38px;
    }

    .latest-doc-link[b-uouxua78ds] {
        min-height: 48px;
        padding: 12px 16px;
    }
}

@media (max-width: 430px) {
    .dashboard-grid[b-uouxua78ds] {
        gap: 14px;
    }

    .info-grid[b-uouxua78ds] {
        gap: 16px;
    }

    .latest-doc-row[b-uouxua78ds] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .latest-doc-arrow[b-uouxua78ds] {
        display: none;
    }
}
/* _content/OrgaPlus/Components/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-layksbxk2o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Cards ─────────────────────────────────────────────── */
.ds-card[b-layksbxk2o] {
    background: var(--sidebar-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.ds-card-header[b-layksbxk2o] {
    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-layksbxk2o] {
    color: var(--primary);
    flex-shrink: 0;
}

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

/* ── Text ──────────────────────────────────────────────── */
.ds-text[b-layksbxk2o] {
    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-layksbxk2o] {
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Lists ─────────────────────────────────────────────── */
.ds-list[b-layksbxk2o] {
    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-layksbxk2o] {
    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-layksbxk2o]::marker {
    color: var(--primary);
}

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

/* ── Contact box ───────────────────────────────────────── */
.ds-contact-box[b-layksbxk2o] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    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-layksbxk2o] {
    background: transparent;
    border: none;
    padding: 0;
    gap: 3px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-contact-name[b-layksbxk2o] {
    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-layksbxk2o] {
    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-layksbxk2o] {
    margin-top: 10px;
}

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

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

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.ds-right-icon[b-layksbxk2o] {
    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-layksbxk2o] {
    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-layksbxk2o] {
    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-layksbxk2o] {
        grid-template-columns: 1fr;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .ds-contact-box[b-layksbxk2o] {
        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-layksbxk2o] {
        flex-direction: column;
        gap: 10px;
    }

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

    /* Karteninhalt: lange Datenschutztexte und Kontaktdaten brechen sicher um */
    .ds-card-body[b-layksbxk2o],
    .ds-contact-box[b-layksbxk2o] {
        padding: 18px 16px;
        overflow-wrap: anywhere;
    }
}
/* _content/OrgaPlus/Components/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-kcsxyickpf] {
    margin-bottom: 8px;
}

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

/* ── Cards ─────────────────────────────────────────────── */
.hlp-card[b-kcsxyickpf] {
    background: var(--sidebar-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.hlp-card-header[b-kcsxyickpf] {
    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-kcsxyickpf] {
    color: var(--primary);
    flex-shrink: 0;
}

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

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.hlp-link:hover[b-kcsxyickpf] {
    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-kcsxyickpf] {
        padding: 12px 16px;
        align-items: flex-start;
    }
}
/* _content/OrgaPlus/Components/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-4mfwqt6d1e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Hero ─────────────────────────────────────────────── */
.info-hero[b-4mfwqt6d1e] {
    background: var(--sidebar-bg);
    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-4mfwqt6d1e] {
    width: 202px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.22));
    margin-bottom: 4px;
}

/* INVENTORY-Schriftzug direkt unter dem Logo – analog zur Sidebar-Branding-Unterzeile */
.info-inventory-label[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    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-4mfwqt6d1e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Cards ────────────────────────────────────────────── */
.info-card[b-4mfwqt6d1e] {
    background: var(--sidebar-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.info-card-header[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    color: var(--sidebar-text);
    flex-shrink: 0;
}

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

/* ── Developer card ───────────────────────────────────── */
.info-dev-label[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e]::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-4mfwqt6d1e] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    color: #fff;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-website-btn[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    background: var(--primary-hover);
    color: #fff;
}

/* ── Tech-Stack card ──────────────────────────────────── */
.info-tech-section-label[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-badge[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] { background: rgba(89,74,226,0.25); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-dotnet[b-4mfwqt6d1e]  { background: rgba(99,102,241,0.2); color: #c7d2fe; border: 1px solid rgba(99,102,241,0.25); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-csharp[b-4mfwqt6d1e]  { background: rgba(124,58,237,0.2); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.25); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-ef[b-4mfwqt6d1e]      { background: rgba(249,115,22,0.18); color: var(--primary); border: 1px solid rgba(249,115,22,0.25); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-pomelo[b-4mfwqt6d1e]  { background: rgba(249,115,22,0.14); color: #fb923c; border: 1px solid rgba(249,115,22,0.2); }
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-tech-neutral[b-4mfwqt6d1e] { background: rgba(255,255,255,0.07); color: var(--sidebar-text); border: 1px solid rgba(255,255,255,0.1); }

/* ── Wichtige Funktionen ──────────────────────────────── */
.info-func-grid[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.6;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-table[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
    border-bottom: none;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.info-license-badge[b-4mfwqt6d1e] {
    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-4mfwqt6d1e] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .info-func-grid[b-4mfwqt6d1e] {
        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-4mfwqt6d1e] {
        grid-template-columns: 1fr;
    }

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

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

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

    .info-license-table th[b-4mfwqt6d1e],
    .info-license-table td[b-4mfwqt6d1e] {
        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-4mfwqt6d1e] {
        align-items: flex-start;
        padding: 14px 16px;
    }

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

    /* UI-Regel: große Infoüberschrift passt sich schmalen Displays an */
    .info-title[b-4mfwqt6d1e] {
        font-size: 1.8rem;
        line-height: 1.15;
    }
}
/* _content/OrgaPlus/Components/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-a9shznexuw] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(255, 122, 24, 0.10), transparent 32%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    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-a9shznexuw] {
    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-a9shznexuw] {
    width: 100%;
    background:
        linear-gradient(180deg, rgba(22, 35, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(15, 23, 42, 0.22),
        0 8px 18px rgba(15, 23, 42, 0.12);
    padding: 36px 36px 32px;
    backdrop-filter: blur(18px);
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-setup-note[b-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    width: 202px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.22));
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-title[b-a9shznexuw] {
    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-a9shznexuw],
.login-title:focus-visible[b-a9shznexuw] {
    outline: none;
    box-shadow: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-subtitle[b-a9shznexuw] {
    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-a9shznexuw] {
    color: #f8fafc !important;
    font-weight: 700;
}

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

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

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.login-input[b-a9shznexuw] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.45;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 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-a9shznexuw]::placeholder {
    color: rgba(226, 232, 240, 0.36);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.login-input:focus[b-a9shznexuw] {
    border-color: rgba(255, 122, 24, 0.55);
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 4px rgba(255, 122, 24, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.login-error[b-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

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

/* Zustandsregel: Active-Zustand */
.login-btn:active[b-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    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-a9shznexuw] {
    position: relative;
}

/* Auge-Button: absolut am rechten Rand des Felds, vertikal zentriert */
.pw-toggle-wrap .pw-toggle-btn[b-a9shznexuw] {
    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-a9shznexuw] {
    color: rgba(226, 232, 240, 0.88);
}

/* Input bekommt rechts Abstand, damit Text nicht vom Button überlagert wird */
.pw-toggle-wrap .login-input[b-a9shznexuw] {
    padding-right: 46px;
}

/* Standardzustand: Passwort verborgen → Auge offen zeigen */
.pw-toggle-btn .eye-show[b-a9shznexuw] { display: block; }
.pw-toggle-btn .eye-hide[b-a9shznexuw] { display: none; }

/* Nach Aktivierung: Passwort sichtbar → durchgestrichenes Auge zeigen */
.pw-toggle-btn.is-visible .eye-show[b-a9shznexuw] { display: none; }
.pw-toggle-btn.is-visible .eye-hide[b-a9shznexuw] { 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-a9shznexuw] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-shell[b-a9shznexuw] {
        gap: 0;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-brand[b-a9shznexuw] {
        margin-bottom: 12px;
        gap: 2px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-header[b-a9shznexuw] {
        margin-top: 8px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-logo[b-a9shznexuw] {
        width: 170px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .login-brand-module[b-a9shznexuw] {
        font-size: 1.22rem;
        letter-spacing: 0.24em;
    }

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

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

@media (max-width: 430px) {
    .login-page[b-a9shznexuw] {
        justify-content: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 12px 12px;
        min-height: 100dvh;
    }

    .login-shell[b-a9shznexuw] {
        max-width: 100%;
    }

    .login-card[b-a9shznexuw] {
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .login-brand[b-a9shznexuw] {
        margin-bottom: 8px;
    }

    .login-logo[b-a9shznexuw] {
        width: 128px;
    }

    .login-brand-module[b-a9shznexuw] {
        font-size: 0.96rem;
        letter-spacing: 0.18em;
    }

    .login-header[b-a9shznexuw] {
        margin-top: 4px;
        margin-bottom: 12px;
    }

    .login-title[b-a9shznexuw] {
        font-size: 1.22rem;
        margin-bottom: 6px;
    }

    .login-subtitle[b-a9shznexuw] {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .login-form[b-a9shznexuw] {
        gap: 4px;
    }

    .login-form :deep(.form-group)[b-a9shznexuw] {
        margin-bottom: 10px;
        gap: 5px;
    }

    .login-card :deep(.form-label)[b-a9shznexuw] {
        font-size: 0.94rem;
        color: #f8fafc !important;
    }

    .login-input[b-a9shznexuw] {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 16px;
    }

    .pw-toggle-wrap .login-input[b-a9shznexuw] {
        padding-right: 42px;
    }

    .pw-toggle-wrap .pw-toggle-btn[b-a9shznexuw] {
        right: 12px;
    }

    .login-btn[b-a9shznexuw] {
        min-height: 48px;
        margin-top: 6px;
        border-radius: 14px;
        font-size: 0.98rem;
    }

    .login-meta-links[b-a9shznexuw] {
        margin-top: 10px;
        gap: 6px;
    }

    .login-meta-link[b-a9shznexuw] {
        font-size: 0.8rem;
    }

    .login-meta-support[b-a9shznexuw] {
        font-size: 0.74rem;
    }
}

@media (max-width: 767px) and (max-height: 820px) {
    .login-page[b-a9shznexuw] {
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* _content/OrgaPlus/Components/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-s755qznm1u] {
    min-height: calc(100vh - var(--header-height) - 74px);
    display: grid;
    place-items: center;
    padding: 28px 0 56px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.not-found-card[b-s755qznm1u] {
    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, #172033 0%, #111827 100%);
    border: 1px solid rgba(249,115,22,.22);
    box-shadow: 0 30px 80px rgba(15,23,42,.20), 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-s755qznm1u] {
    margin: 0 auto 22px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.not-found-kicker[b-s755qznm1u] {
    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-s755qznm1u] {
    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-s755qznm1u] {
    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-s755qznm1u] {
    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-s755qznm1u] {
        min-height: calc(100vh - var(--header-height) - 40px);
        padding: 18px 0 36px;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .not-found-card[b-s755qznm1u] {
        padding: 32px 22px;
        border-radius: 24px;
    }

    .not-found-actions .btn[b-s755qznm1u] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/OrgaPlus/Components/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-8pjeepis0l] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-frame[b-8pjeepis0l] {
    width: 100%;
    min-height: 68vh;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff7ed;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-image[b-8pjeepis0l] {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    object-fit: contain;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.document-preview-fallback[b-8pjeepis0l] {
    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 #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff7ed, #f8fafc);
}

.form-label[b-8pjeepis0l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.char-counter[b-8pjeepis0l] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-8pjeepis0l] {
    color: var(--warning);
}

.char-counter--red[b-8pjeepis0l] {
    color: var(--danger);
    font-weight: 700;
}

/* 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-8pjeepis0l] {
        min-height: 260px;
    }

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

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

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

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

.doc-name-link[b-8pjeepis0l] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

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

.doc-table-badge[b-8pjeepis0l] {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
}
/* _content/OrgaPlus/Components/Pages/Planung/Veranstaltungen.razor.rz.scp.css */
/* ============================================================
   VERANSTALTUNGEN.RAZOR.CSS - Stylesheet

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

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.event-feedback[b-y1evy1eq4o] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.event-feedback.is-success[b-y1evy1eq4o] {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.event-feedback.is-error[b-y1evy1eq4o] {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

.form-label[b-y1evy1eq4o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.char-counter[b-y1evy1eq4o] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-y1evy1eq4o] {
    color: var(--warning);
}

.char-counter--red[b-y1evy1eq4o] {
    color: var(--danger);
    font-weight: 700;
}
/* _content/OrgaPlus/Components/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-vz81efji70] {
    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-vz81efji70] {
    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-vz81efji70] {
    background: var(--sidebar-bg);
    border-color: transparent;
    box-shadow: none;
}

/* Kartenkopf: heller Text und feine Trennlinie auf dunklem Grund */
.profil-card .card-header[b-vz81efji70] {
    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-vz81efji70] {
    color: #ffffff;
}

/* Layoutregel: verhindert, dass das Label im Card-Body doppelt erscheint */
.profil-card .card-body[b-vz81efji70] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
}

/* Formular-Labels: hell für dunklen Kartenhintergrund */
.profil-card .form-label[b-vz81efji70] {
    color: rgba(248,250,252,0.92);
}

/* Hinweistext unter Feldern: gedämpft, aber noch lesbar */
.profil-card .form-hint[b-vz81efji70] {
    color: rgba(226,232,240,0.58);
}

/* Eingabefelder: dunkles Glas-UI passend zum Kartenhintergrund */
.profil-card .form-control[b-vz81efji70] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(148,163,184,0.18);
    color: #f8fafc;
}

/* Platzhaltertext im Eingabefeld: dezent auf dunklem Grund */
.profil-card .form-control[b-vz81efji70]::placeholder {
    color: rgba(226,232,240,0.36);
}

/* Fokus-Zustand: oranger Akzent analog zu den Auth-Seiten */
.profil-card .form-control:focus[b-vz81efji70] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,122,24,0.55);
    box-shadow: 0 0 0 4px rgba(255,122,24,0.14);
    color: #f8fafc;
}

/* Auge-Icon im Passwortfeld: auf dunklem Hintergrund aufgehellt */
.profil-card .pw-toggle-btn[b-vz81efji70] {
    color: rgba(226,232,240,0.5);
}

/* Hover-Zustand des Auge-Icons */
.profil-card .pw-toggle-btn:hover[b-vz81efji70] {
    color: rgba(248,250,252,0.9);
}

/* Layoutregel: Vorname und Nachname nebeneinander im gleichen Abstand */
.profil-name-row[b-vz81efji70] {
    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-vz81efji70] {
    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-vz81efji70] {
    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-vz81efji70] {
    align-items: center;
    text-align: center;
}

/* UI-Regel: Avatar-Vorschau – rund, deutlich groß für eine klare Vorschau */
.profil-avatar-preview[b-vz81efji70] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

/* UI-Regel: Profilbild-Vorschau – quadratisch wie im Benutzer-Admin */
.profil-avatar-img[b-vz81efji70] {
    width: 140px;
    height: 140px;
    border-radius: 24px;
}

/* Layoutregel: Aktionen unter dem Bild – nebeneinander und zentriert */
.profil-image-actions[b-vz81efji70] {
    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-vz81efji70] {
    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-vz81efji70] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #ff8a1d 0%, #ff6a00 100%);
    border: 1px solid rgba(255,122,24,0.34);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,.2);
    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-vz81efji70] {
    background: linear-gradient(135deg, #ff932c 0%, #ea580c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,.22);
}


/* UI-Regel: Lade-Indikator, solange die Profildaten noch nicht geladen sind */
.profil-loading[b-vz81efji70] {
    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-vz81efji70] {
    position: relative;
}

/* Auge-Button: absolut am rechten Rand des Felds, vertikal zentriert */
.pw-toggle-btn[b-vz81efji70] {
    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-vz81efji70] {
    color: var(--text-secondary);
}

/* Input bekommt rechts Abstand, damit der eingegebene Text nicht unter dem Button verschwindet */
.pw-toggle-wrap .form-control[b-vz81efji70] {
    padding-right: 40px;
}

.char-counter[b-vz81efji70] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-vz81efji70] {
    color: var(--warning);
}

.char-counter--red[b-vz81efji70] {
    color: var(--danger);
    font-weight: 700;
}

/* Responsive Anpassung: einspaltig auf schmalen Viewports */
@media (max-width: 860px) {
    /* Layoutregel: Grid auf eine Spalte reduzieren, damit Karten stapeln */
    .profil-grid[b-vz81efji70] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: Passwort-Karte braucht keinen Span mehr, da nur eine Spalte */
    .profil-card-full[b-vz81efji70] {
        grid-column: auto;
    }
}

/* Responsive Anpassung: Passwort-Felder und Namensspalten auf Smartphones stapeln */
@media (max-width: 640px) {
    /* Layoutregel: Vorname/Nachname untereinander */
    .profil-name-row[b-vz81efji70] {
        grid-template-columns: 1fr;
    }

    /* Layoutregel: Passwort-Felder untereinander */
    .profil-pw-grid[b-vz81efji70] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .profil-actions[b-vz81efji70],
    .profil-image-actions[b-vz81efji70] {
        align-items: stretch;
        flex-direction: column;
    }

    .profil-actions .btn[b-vz81efji70],
    .profil-image-actions .btn[b-vz81efji70] {
        width: 100%;
        justify-content: center;
    }

    .profil-avatar-img[b-vz81efji70] {
        width: 120px;
        height: 120px;
        border-radius: 20px;
    }

    .profil-card .upload-card[b-vz81efji70] {
        width: 100%;
    }
}
/* _content/OrgaPlus/Components/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-cojejqg3l4] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(255, 122, 24, 0.10), transparent 32%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

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

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.auth-card[b-cojejqg3l4] {
    width: 100%;
    background: linear-gradient(180deg, rgba(22, 35, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(15, 23, 42, 0.22),
        0 8px 18px rgba(15, 23, 42, 0.12);
    padding: 36px 36px 32px;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-logo[b-cojejqg3l4] {
    width: 140px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.22));
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-title[b-cojejqg3l4] {
    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-cojejqg3l4] {
    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-cojejqg3l4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.auth-input[b-cojejqg3l4] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
}

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

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.auth-input:focus[b-cojejqg3l4] {
    border-color: rgba(255, 122, 24, 0.55);
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 4px rgba(255, 122, 24, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.16);
    outline: none;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-btn[b-cojejqg3l4] {
    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-cojejqg3l4] {
    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-cojejqg3l4] {
    color: #f8fafc;
    text-decoration-color: rgba(248, 250, 252, 0.6);
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.auth-success[b-cojejqg3l4] {
    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-cojejqg3l4] {
    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-cojejqg3l4] {
        padding: 20px 14px;
    }

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

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

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

@media (max-width: 767px) and (max-height: 820px) {
    .auth-page[b-cojejqg3l4] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* _content/OrgaPlus/Components/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-he7ogt0z5m] {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(255, 122, 24, 0.10), transparent 32%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-shell[b-he7ogt0z5m] {
    width: 100%;
    max-width: 520px;
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.setup-card[b-he7ogt0z5m] {
    width: 100%;
    background: linear-gradient(180deg, rgba(22, 35, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(15, 23, 42, 0.22),
        0 8px 18px rgba(15, 23, 42, 0.12);
    padding: 36px 36px 32px;
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-logo[b-he7ogt0z5m] {
    width: 148px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.22));
}

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

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-title[b-he7ogt0z5m] {
    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-he7ogt0z5m] {
    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-he7ogt0z5m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.setup-grid[b-he7ogt0z5m] {
    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-he7ogt0z5m] {
    color: rgba(248, 250, 252, 0.92);
    font-weight: 600;
}

/* Formular- und Aktionsregel: sorgt für konsistente Bedienbarkeit und Abstände */
.setup-input[b-he7ogt0z5m] {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
}

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

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.setup-input:focus[b-he7ogt0z5m] {
    border-color: rgba(255, 122, 24, 0.55);
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 4px rgba(255, 122, 24, 0.14),
        inset 0 1px 2px rgba(15, 23, 42, 0.16);
    outline: none;
}

.setup-note[b-he7ogt0z5m],
/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-info[b-he7ogt0z5m] {
    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-he7ogt0z5m] {
    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-he7ogt0z5m] {
    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-he7ogt0z5m] {
    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-he7ogt0z5m] {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.72);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-he7ogt0z5m] {
    color: #fbbf24;
}

.char-counter--red[b-he7ogt0z5m] {
    color: #fca5a5;
    font-weight: 700;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.setup-btn[b-he7ogt0z5m] {
    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-he7ogt0z5m] {
        padding: 20px 14px;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .setup-logo[b-he7ogt0z5m] {
        width: 124px;
    }

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

    /* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
    .setup-grid[b-he7ogt0z5m] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

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

@media (max-width: 767px) and (max-height: 900px) {
    .setup-page[b-he7ogt0z5m] {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* _content/OrgaPlus/Components/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-dowz00t914] {
    margin-bottom: 20px;
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-info-grid[b-dowz00t914] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.analytics-info-grid > *[b-dowz00t914] {
    height: 100%;
    min-width: 0;
}

/* Karteninhalt: verfeinert die beiden InfoCards analog zu anderen Übersichtsseiten */
.analytics-info-grid[b-dowz00t914]  .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(0, 0, 0, 0.05);
}

.analytics-info-grid[b-dowz00t914]  .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-dowz00t914]  .card-body {
    padding: 22px 24px;
}

.analytics-list[b-dowz00t914],
.analytics-table[b-dowz00t914] {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: 0.15rem 0;
}

.analytics-row[b-dowz00t914],
/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-table-row[b-dowz00t914] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    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-dowz00t914],
.analytics-table-row:hover[b-dowz00t914] {
    transform: translateY(-1px);
    border-color: rgba(249, 115, 22, 0.16);
    background: #fffaf5;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Layoutregel: ordnet Inhalte stabil im verfügbaren Raum an */
.analytics-row-main[b-dowz00t914] {
    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-dowz00t914] {
    font-weight: 600;
    color: var(--text);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.analytics-table-metrics[b-dowz00t914] {
    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-dowz00t914] {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.95);
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 768px) {
    .analytics-info-grid[b-dowz00t914] {
        grid-template-columns: 1fr;
    }

    .analytics-row[b-dowz00t914],
    .analytics-table-row[b-dowz00t914] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .analytics-table-metrics[b-dowz00t914] {
        grid-template-columns: repeat(3, auto);
        text-align: left;
    }

    .analytics-table-metrics span[b-dowz00t914] {
        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-dowz00t914] {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    /* UI-Regel: reduziert Karteninnenabstände für dichte mobile Auswertungslisten */
    .analytics-row[b-dowz00t914],
    .analytics-table-row[b-dowz00t914] {
        padding: 0.75rem;
        border-radius: 14px;
    }

    .analytics-info-grid[b-dowz00t914]  .card-body {
        padding: 1rem;
    }

    .analytics-row[b-dowz00t914],
    .analytics-table-row[b-dowz00t914],
    .analytics-row-main[b-dowz00t914] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .analytics-table-metrics span[b-dowz00t914] {
        justify-content: center;
        text-align: center;
    }
}
/* _content/OrgaPlus/Components/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-u0hawm455i] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Flächenregel: 5-Spalten-Grid – Titel + 2 Felder + Info + Reservieren-Button */
.inventar-card[b-u0hawm455i] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 1.2rem;
    padding: 0.8rem 1.15rem;
    border: 1px solid #cbd5e1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

/* Layoutregel: Bild und Titel horizontal und vertikal zentriert nebeneinander */
.inventar-image-title[b-u0hawm455i] {
    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-u0hawm455i] {
    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-u0hawm455i] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Typoregel: kleines Uppercase-Label über dem Feldwert */
.inventory-field-label[b-u0hawm455i] {
    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-u0hawm455i] {
    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-u0hawm455i] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

/* Layoutregel: Datum und Name der nächsten Buchung untereinander */
.inventar-next-booking[b-u0hawm455i] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Typoregel: Datumszeile der nächsten Buchung */
.inv-next-date[b-u0hawm455i] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
}

/* Typoregel: Mitgliedsname der nächsten Buchung */
.inv-next-member[b-u0hawm455i] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Typoregel: Hinweis wenn kein Eintrag reserviert ist */
.inventar-booking-free[b-u0hawm455i] {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

/* Aktions-Spalte: Reservieren-Button ganz rechts */
.inventar-actions[b-u0hawm455i] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* BILD & PLACEHOLDER */

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

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

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

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

/* UI-Regel: Initialen-Platzhalter wenn kein Bild vorhanden */
.inventory-placeholder[b-u0hawm455i] {
    display: grid;
    place-items: center;
    background: #93c5fd;
    color: #1d4ed8;
    font-weight: 700;
}

/* FEEDBACK */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.inventory-feedback[b-u0hawm455i] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-feedback.is-success[b-u0hawm455i] {
    background: #dcfce7;
    color: #166534;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.inventory-feedback.is-error[b-u0hawm455i] {
    background: #fee2e2;
    color: #991b1b;
}

/* LIGHTBOX */

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-overlay[b-u0hawm455i] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(4px);
}

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.lightbox-dialog[b-u0hawm455i] {
    position: relative;
    width: min(980px, 100%);
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 28px;
    background: #0f172a;
    color: #fff;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-main[b-u0hawm455i] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-main-image[b-u0hawm455i] {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 22px;
}

.lightbox-close[b-u0hawm455i],
/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav[b-u0hawm455i] {
    position: absolute;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: #334155;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-close[b-u0hawm455i] {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav[b-u0hawm455i] {
    top: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    transform: translateY(-50%);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav-left[b-u0hawm455i] {
    left: 1rem;
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.lightbox-nav-right[b-u0hawm455i] {
    right: 1rem;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.lightbox-nav:disabled[b-u0hawm455i] {
    opacity: 0.35;
    cursor: default;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnails[b-u0hawm455i] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail[b-u0hawm455i] {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid transparent;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.lightbox-thumbnail.active[b-u0hawm455i] {
    border-color: rgba(191, 219, 254, 0.95);
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.lightbox-thumbnail img[b-u0hawm455i] {
    width: 100%;
    height: 100%;
}

/* RESPONSIVE */

/* Responsive Anpassung: ab 980px Info + Button auf zweite Zeile */
@media (max-width: 980px) {
    /* Layoutregel: Felder bleiben, Info + Button umbrechen auf zweite Zeile */
    .inventar-card[b-u0hawm455i] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 0.6rem;
    }

    /* Layoutregel: Info-Spalte beginnt in der zweiten Zeile */
    .inventar-info[b-u0hawm455i] {
        grid-column: 2;
        grid-row: 2;
    }

    /* Layoutregel: Reservieren-Button in zweiter Zeile ganz rechts */
    .inventar-actions[b-u0hawm455i] {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
}

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@media (max-width: 900px) {
    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .lightbox-dialog[b-u0hawm455i] {
        padding: 1rem;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav[b-u0hawm455i] {
        bottom: 1rem;
        top: auto;
        transform: none;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav-left[b-u0hawm455i] {
        left: 1rem;
    }

    /* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
    .lightbox-nav-right[b-u0hawm455i] {
        right: 1rem;
    }
}

/* Responsive Anpassung: unter 640px alles einspaltig stapeln */
@media (max-width: 640px) {
    /* Layoutregel: auf kleinen Displays alles einspaltig stapeln */
    .inventar-card[b-u0hawm455i] {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }

    /* Layoutregel: alle Grid-Zuweisungen aufheben */
    .inventar-info[b-u0hawm455i],
    .inventar-actions[b-u0hawm455i] {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .lightbox-overlay[b-u0hawm455i] {
        padding: 0.75rem;
    }

    /* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
    .lightbox-dialog[b-u0hawm455i] {
        border-radius: 22px;
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }

    /* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
    .lightbox-thumbnail[b-u0hawm455i] {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 576px) {
    .inventar-card[b-u0hawm455i] {
        justify-items: center;
        text-align: center;
        padding: 1rem;
        row-gap: 0.8rem;
    }

    .inventar-image-title[b-u0hawm455i] {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
    }

    .inventar-image-title h3[b-u0hawm455i] {
        text-align: center;
    }

    .inventory-field[b-u0hawm455i] {
        align-items: center;
        text-align: center;
    }

    .inventar-info[b-u0hawm455i],
    .inventar-next-booking[b-u0hawm455i] {
        align-items: center;
        text-align: center;
        gap: 0.35rem;
    }

    .inventar-actions[b-u0hawm455i] {
        justify-self: center;
        justify-content: center;
        width: 100%;
    }

    .inventar-actions .btn[b-u0hawm455i] {
        margin-inline: auto;
    }
}
/* _content/OrgaPlus/Components/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-msj7lx2yhi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.member-avatar[b-msj7lx2yhi] {
    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: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.text-link[b-msj7lx2yhi] {
    color: var(--info);
    text-decoration: none;
    font-size: var(--text-sm);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.text-link:hover[b-msj7lx2yhi] {
    text-decoration: underline;
    color: var(--info);
}

.char-counter[b-msj7lx2yhi] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.char-counter--yellow[b-msj7lx2yhi] {
    color: var(--warning);
}

.char-counter--red[b-msj7lx2yhi] {
    color: var(--danger);
    font-weight: 700;
}

@media (max-width: 576px) {
    .member-name-cell[b-msj7lx2yhi] {
        align-items: flex-start;
    }

    .member-avatar[b-msj7lx2yhi] {
        width: 28px;
        height: 28px;
    }

    .text-link[b-msj7lx2yhi] {
        overflow-wrap: anywhere;
    }
}
/* _content/OrgaPlus/Components/Pages/Verwaltung/Reservierungen.razor.rz.scp.css */
/* ============================================================
   RESERVIERUNGEN.RAZOR.CSS - Stylesheet

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

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

/* Reuse .inv-filter-group from Inventar.razor.css via app.css global styles */
/* Filter buttons are global in app.css, so we only need page-specific overrides */

.reserv-card-actions[b-1wjgs97zgu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.reserv-card-title[b-1wjgs97zgu] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}

.reserv-card-meta-item--wrap[b-1wjgs97zgu] {
    align-items: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Formular- und Aktionsregel: macht fest übernommene Reservierungsdaten als nicht auswählbar erkennbar */
.reserv-readonly-field[b-1wjgs97zgu] {
    display: flex;
    align-items: center;
    min-height: 50px;
    color: var(--text);
    background: rgba(248, 250, 252, 0.82);
    border-style: dashed;
}

/* Responsive Anpassung: lässt Reservierungsaktionen auf kleinen Karten sauber umbrechen */
@media (max-width: 576px) {
    /* Formular- und Aktionsregel: setzt Bearbeiten und Löschen auf eine eigene mobile Zeile */
    .reserv-card-actions[b-1wjgs97zgu] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
/* _content/OrgaPlus/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.
   ============================================================ */

/* Flächenregel: strukturiert Inhalte als eigenständigen visuellen Bereich */
.dashboard-card[b-9utkkyhoi5] {
    display: grid;
    grid-template-areas: "main arrow";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    padding: 24px 24px 24px 20px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    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;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.dashboard-card:hover[b-9utkkyhoi5] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: rgba(0,0,0,0.08);
    color: var(--text);
    text-decoration: none;
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.dashboard-card:active[b-9utkkyhoi5] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Layoutregel: koppelt Icon und Kennzahlen als feste linke Einheit */
.dc-main[b-9utkkyhoi5] {
    grid-area: main;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.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 6px rgba(0,0,0,0.2));
    transition: transform var(--transition), color var(--transition);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.dashboard-card:hover .dc-icon[b-9utkkyhoi5] {
    transform: translateY(-1px);
}

/* UI-Regel: Icon groß und präsent für schnelle visuelle Orientierung */
.dc-icon svg[b-9utkkyhoi5] {
    width: 48px;
    height: 48px;
    display: block;
}

/* Layoutregel: haelt Titel und Kennzahl als kompakte Textebene zusammen */
.dc-copy[b-9utkkyhoi5] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.dc-title[b-9utkkyhoi5] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
    line-height: 1.15;
}

/* Inhaltsbereich: definiert den zentralen Arbeitsbereich innerhalb des Layouts */
.dc-body[b-9utkkyhoi5] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.dc-value[b-9utkkyhoi5] {
    font-size: 1.72rem;
    font-weight: 850;
    color: var(--text);
    line-height: .98;
    letter-spacing: -0.045em;
}

/* UI-Regel: beschreibt Darstellung und Kontext dieses Selektorblocks im Designsystem */
.dc-label[b-9utkkyhoi5] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 650;
}

/* Pfeil: dezent gefüllter Kreis, weich in die Card integriert */
.dc-arrow[b-9utkkyhoi5] {
    grid-area: arrow;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    transition:
        transform var(--transition),
        background var(--transition);
}

/* Hover: Füllung leicht verstärken, minimale Bewegung nach rechts */
.dashboard-card:hover .dc-arrow[b-9utkkyhoi5] {
    transform: translateX(4px);
    background: rgba(255,255,255,0.42);
}

/* Zustandsregel: macht Interaktion und aktuellen UI-Zustand visuell erkennbar */
.dashboard-card:focus-visible[b-9utkkyhoi5] {
    outline: none;
    border-color: rgba(249,115,22,.5);
    box-shadow:
        var(--shadow-md),
        0 0 0 4px rgba(249,115,22,.16);
}

/* ============================================================
   FARBIGE KACHEL-VARIANTEN (Vibrant Gradient Cards)
   Kräftige Farbverläufe mit weißem Text – Premium SaaS-Stil.
   CSS Custom Properties (--dc-icon-bg, --dc-icon-color) steuern
   den Icon-Wrapper über Vererbung der Elternklasse.
   ============================================================ */

/* Inventar – Saphirblau: tiefes Blau zu leuchtendem Mittelblau */
.card-inventar[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    border: 1px solid rgba(255,255,255,0.14);
    --dc-icon-color: rgba(255,255,255,0.95);
}

/* Titel klar lesbar weiß – volle Deckkraft für 4.5:1 Kontrast */
.card-inventar .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }

/* Kennzahl und Einheit mit abgestufter Helligkeit für Hierarchie */
.card-inventar .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-inventar .dc-label[b-9utkkyhoi5] { color: #eff6ff; }

/* Pfeil-Farbe passend zur Inventar-Kachel – kein Hintergrund */
.card-inventar .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,0.85); }
.card-inventar:hover .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,1); }

/* Reservierungen – Feuer-Orange: Markenfarbe, dunkel zu hell */
.card-reservierungen[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #C2410C 0%, #F97316 100%);
    border: 1px solid rgba(255,255,255,0.14);
    --dc-icon-color: rgba(255,255,255,0.95);
}

/* Titel klar lesbar weiß */
.card-reservierungen .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }

/* Kennzahl und Einheit */
.card-reservierungen .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-reservierungen .dc-label[b-9utkkyhoi5] { color: #fff7ed; }

/* Pfeil-Farbe passend zur Reservierungen-Kachel – kein Hintergrund */
.card-reservierungen .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,0.85); }
.card-reservierungen:hover .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,1); }

/* Mitglieder – Smaragdgrün: tiefes Grün zu leuchtendem Mint */
.card-mitglieder[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #065F46 0%, #10B981 100%);
    border: 1px solid rgba(255,255,255,0.14);
    --dc-icon-color: rgba(255,255,255,0.95);
}

/* Titel klar lesbar weiß */
.card-mitglieder .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }

/* Kennzahl und Einheit */
.card-mitglieder .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-mitglieder .dc-label[b-9utkkyhoi5] { color: #ecfdf5; }

/* Pfeil-Farbe passend zur Mitglieder-Kachel – kein Hintergrund */
.card-mitglieder .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,0.85); }
.card-mitglieder:hover .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,1); }

/* Dokumente – Goldener Bernstein: dunkles Braun zu sattem Amber */
.card-dokumente[b-9utkkyhoi5] {
    background: linear-gradient(135deg, #92400E 0%, #D97706 100%);
    border: 1px solid rgba(255,255,255,0.14);
    --dc-icon-color: rgba(255,255,255,0.95);
}

/* Titel klar lesbar weiß */
.card-dokumente .dc-title[b-9utkkyhoi5] { color: #ffffff; font-weight: 600; }

/* Kennzahl und Einheit */
.card-dokumente .dc-value[b-9utkkyhoi5] { color: #ffffff; }
.card-dokumente .dc-label[b-9utkkyhoi5] { color: #fffbeb; }

/* Pfeil-Farbe passend zur Dokumente-Kachel – kein Hintergrund */
.card-dokumente .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,0.85); }
.card-dokumente:hover .dc-arrow[b-9utkkyhoi5] { color: rgba(255,255,255,1); }

/* Hover für alle Farbvarianten: leichtes Aufhellen, kein neuer Farbton */
.card-inventar:hover[b-9utkkyhoi5],
.card-reservierungen:hover[b-9utkkyhoi5],
.card-mitglieder:hover[b-9utkkyhoi5],
.card-dokumente:hover[b-9utkkyhoi5] {
    filter: brightness(1.07);
    border-color: rgba(255,255,255,0.18);
}

/* Responsive Anpassung: Auf Smartphone etwas mehr Padding da nur eine Spalte */
@media (max-width: 480px) {
    .dashboard-card[b-9utkkyhoi5] {
        padding: 18px 20px;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

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

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

    .dc-label[b-9utkkyhoi5] {
        font-size: 0.7rem;
    }

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

/* Responsive Anpassung: Kompaktes horizontales Layout für 2×2-Grid auf Mobilgeräten */
@media (max-width: 768px) {
    .dashboard-card[b-9utkkyhoi5] {
        width: 100%;
        margin: 0;
        column-gap: 16px;
        padding: 20px 18px;
        border-radius: 24px;
        min-height: 108px;
    }

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

    .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] {
        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: 50px;
        height: 50px;
        flex-shrink: 0;
    }

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

@media (max-width: 430px) {
    .dashboard-card[b-9utkkyhoi5] {
        padding: 18px 16px;
        min-height: 100px;
    }

    .dc-main[b-9utkkyhoi5] {
        gap: 14px;
    }

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

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

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

    .dc-arrow[b-9utkkyhoi5] {
        width: 46px;
        height: 46px;
    }
}
/* _content/OrgaPlus/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;
    }
}
/* _content/OrgaPlus/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. */
/* _content/OrgaPlus/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: 20px;
}

/* 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: linear-gradient(135deg, #ff8a1d 0%, #ff6a00 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    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: brightness(1.02);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* Navigationsregel: hält Orientierung und zentrale Bereiche visuell konsistent */
.page-header-content[b-3o1xb4drym] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    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: 18px;
    }

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

/* Responsive Anpassung: begrenzt die folgenden Regeln auf passende Viewportgrößen */
@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;
    }

    /* Navigationsregel: sorgt mobil für sauber umbrechende Titelbereiche */
    .page-header-left[b-3o1xb4drym] {
        align-items: flex-start;
        min-width: 0;
    }

    /* Navigationsregel: reduziert die Iconfläche auf kleinen Displays ohne Markenwirkung zu verlieren */
    .page-header-icon[b-3o1xb4drym] {
        width: 46px;
        height: 46px;
    }

    /* 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] {
        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: 768px) {
    .page-header[b-3o1xb4drym] {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .page-header-left[b-3o1xb4drym] {
        align-items: flex-start;
        gap: 14px;
    }

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

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

    .page-title[b-3o1xb4drym] {
        font-size: clamp(2rem, 6vw, 2.4rem);
    }

    .page-subtitle[b-3o1xb4drym] {
        font-size: 1.02rem;
        line-height: 1.55;
    }
}

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

    .page-header-icon[b-3o1xb4drym] {
        width: 50px;
        height: 50px;
    }

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

    .page-subtitle[b-3o1xb4drym] {
        font-size: 0.98rem;
    }
}