/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* AdminLayout — Phase 2 / S3 (Bootstrap-Mint Refresh)
   Visuelle Referenz: designvorschlaege/10-admin-members-bootstrap.html.
   Strukturelle Geschwister-Datei zu MainLayout.razor.css — bewusst
   identisches Layout-Skelett, Topbar wechselt aber von „transparent ueber
   Hero" zu „sticky weiss mit Border-Bottom + Shadow".

   Tokens: ausschliesslich aus :root in app.css. Kein eigener Token. */

.ritmano-app[b-3rpdvjj8o6] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* S11 (2026-05-08): position:sticky entfernt (User-Wunsch — Topbar
   scrollt mit). S14 (2026-05-08): Padding wandert von .ritmano-header
   in .ritmano-nav (Logo-Linkskante mit .ritmano-main bündig). */
.ritmano-header.admin-header[b-3rpdvjj8o6] {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.ritmano-nav[b-3rpdvjj8o6] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 1rem;
}

/* Logo — identisch zu MainLayout, damit der Wechsel zwischen Member- und
   Admin-Bereich keinen Logo-Shift verursacht. */
.ritmano-logo[b-3rpdvjj8o6], [b-3rpdvjj8o6] .ritmano-logo {
    color: var(--ink) !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

[b-3rpdvjj8o6] .ritmano-logo-word { color: var(--ink); }

/* S11: .ritmano-logo-dot entfernt — Punkt jetzt via .logo-dot-mid (app.css). */

[b-3rpdvjj8o6] .ritmano-logo-tld {
    color: var(--mint-deep);
    font-weight: 700;
}

.ritmano-logo:hover[b-3rpdvjj8o6], [b-3rpdvjj8o6] .ritmano-logo:hover {
    color: var(--mint-deep) !important;
}

/* Nav-Links — gleiche Mechanik wie MainLayout (CLS-Reservation, Active-State
   global via app.css). */
.ritmano-nav-links[b-3rpdvjj8o6] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* S11: erhoeht von 280 → 560 (zusaetzliche Nav-Items). */
    min-width: 560px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .ritmano-nav-links[b-3rpdvjj8o6] { min-width: 0; }
}

.ritmano-nav-links[b-3rpdvjj8o6]  a:not(.nav-cta-primary):not(.nav-cta-ghost):not(.user-menu) {
    color: var(--ink);
    text-decoration: none;
    /* S11 — groesser (Mockup-12-Werte) */
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.25rem 0.1rem;
    transition: color 0.2s;
}

.ritmano-nav-links[b-3rpdvjj8o6]  a:not(.nav-cta-primary):not(.nav-cta-ghost):not(.user-menu):hover {
    color: var(--mint-deep);
}

/* Main / admin-shell ------------------------------------------------------
   admin-shell signalisiert „kein Hero-Glow". Falls eine Hero-Klasse aus
   Versehen auf einer Admin-Page landet, unterdrueckt die Wrapper-Regel den
   ::before-Glow zumindest visuell — die Page-Migration in S5 wird die
   Hero-Klassen ohnehin aus den Admin-Pages entfernen. */
.ritmano-main.admin-shell[b-3rpdvjj8o6] {
    flex: 1;
    min-height: 80vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    width: 100%;
    background: var(--bg);
}

/* Defensive: keine Radial-Glow-Schicht im Admin-Bereich — Admin-Pages
   verwenden keine `.hero`-Section, aber falls doch, wird der dekorative
   ::before unterdrueckt. */
.ritmano-main.admin-shell[b-3rpdvjj8o6]  .hero::before {
    content: none;
}

/* S11: Alter .ritmano-footer-Block entfernt — Footer rendert jetzt
   ueber .app-footer-r aus dem app.css Refresh-Block (einheitlich). */

#blazor-error-ui[b-3rpdvjj8o6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-3rpdvjj8o6] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — Mint Token Migration (Design-Refresh D-2)
   Reference: designvorschlaege/06-mint.html, docs/design_system.md §7
   All colors via CSS tokens defined in wwwroot/app.css (:root). */

.ritmano-app[b-x09xtbaeyb] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* S11 (2026-05-08): position:sticky entfernt — Topbar scrollt mit.
   S14 (2026-05-08): Padding wandert von .ritmano-header in .ritmano-nav,
   damit Logo-Linkskante mit .ritmano-main / .app-footer-r / .hero auf
   exakt derselben vertikalen Linie liegt: (viewport-1180)/2 + 2rem.
   Doppel-Padding zwischen Header und Nav war Ursache des Drifts. */
.ritmano-header[b-x09xtbaeyb] {
    background: transparent;
}

.ritmano-nav[b-x09xtbaeyb] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 1rem;
}

/* Hamburger — nur Mobile sichtbar (Desktop: display:none). */
.nav-burger[b-x09xtbaeyb] {
    display: none;
    align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.nav-burger:hover[b-x09xtbaeyb] { background: var(--brand-softer); }
.nav-burger svg[b-x09xtbaeyb] { width: 24px; height: 24px; }
.nav-backdrop[b-x09xtbaeyb] { display: none; }
/* Schliessen-X im Drawer — nur Mobile (im @media unten sichtbar gemacht). */
.nav-close[b-x09xtbaeyb] {
    display: none;
    align-items: center; justify-content: center;
    position: absolute; top: 0.9rem; right: 0.9rem;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: transparent; color: var(--ink);
    cursor: pointer;
}
.nav-close:hover[b-x09xtbaeyb] { background: var(--brand-softer); }
.nav-close svg[b-x09xtbaeyb] { width: 22px; height: 22px; }

/* ── Mobile-Nav (<=768px): Off-Canvas-Drawer statt Zeilenumbruch.
   Logo + Hamburger in der Topbar; .ritmano-nav-links wird ein von rechts
   einfahrendes Panel (toggelt via .ritmano-header.nav-open, ui-interop.js).
   Konsistent zum Drawer der eingeloggten Shell. ── */
@media (max-width: 768px) {
    .ritmano-nav[b-x09xtbaeyb] { padding: 0 1rem; }
    .nav-burger[b-x09xtbaeyb] { display: inline-flex; }
    .nav-close[b-x09xtbaeyb] { display: inline-flex; }

    .nav-backdrop[b-x09xtbaeyb] {
        display: block;
        position: fixed; inset: 0;
        background: rgba(20, 20, 25, 0.45);
        opacity: 0; pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 55;
    }
    [b-x09xtbaeyb] .ritmano-header.nav-open .nav-backdrop,
    .ritmano-header.nav-open .nav-backdrop[b-x09xtbaeyb] { opacity: 1; pointer-events: auto; }

    .ritmano-nav-links[b-x09xtbaeyb] {
        position: fixed;
        top: 0; right: 0;
        height: 100vh;
        width: min(80vw, 300px);
        background: var(--card);
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        z-index: 60;
        transform: translateX(100%);
        transition: transform 0.24s ease;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 4.5rem 1rem 1rem;
        overflow-y: auto;
        min-width: 0;
    }
    .ritmano-header.nav-open .ritmano-nav-links[b-x09xtbaeyb] { transform: translateX(0); }

    /* AuthLinks-Kinder im Drawer: volle Breite, grosse Tap-Targets. */
    .ritmano-nav-links[b-x09xtbaeyb]  a,
    .ritmano-nav-links[b-x09xtbaeyb]  .lang-dropdown,
    .ritmano-nav-links[b-x09xtbaeyb]  form {
        display: block;
        width: 100%;
        padding: 0.7rem 0.5rem;
        border-radius: var(--r-md);
    }
    .ritmano-nav-links[b-x09xtbaeyb]  a:hover { background: var(--brand-softer); }
    .ritmano-nav-links[b-x09xtbaeyb]  .nav-cta-primary,
    .ritmano-nav-links[b-x09xtbaeyb]  .btn-pill { text-align: center; }

    @media (prefers-reduced-motion: reduce) {
        .ritmano-nav-links[b-x09xtbaeyb], .nav-backdrop[b-x09xtbaeyb] { transition: none; }
    }
}

/* Logo -------------------------------------------------------------------- */

.ritmano-logo[b-x09xtbaeyb], [b-x09xtbaeyb] .ritmano-logo {
    color: var(--ink) !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

[b-x09xtbaeyb] .ritmano-logo-word {
    color: var(--ink);
}

/* S11: .ritmano-logo-dot entfernt (Kreis-Dot vorne weggemacht).
   Punkt zwischen `grouvy` und `io` rendert jetzt ueber globale
   .logo-dot-mid Klasse (app.css). */

[b-x09xtbaeyb] .ritmano-logo-tld {
    color: var(--brand-deep);
    font-weight: 700;
}

.ritmano-logo:hover[b-x09xtbaeyb], [b-x09xtbaeyb] .ritmano-logo:hover {
    color: var(--brand-deep) !important;
}

/* Nav links --------------------------------------------------------------- */

.ritmano-nav-links[b-x09xtbaeyb] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Perf-Fix 2026-04-24 (CLS): Reserviert horizontalen Platz fuer AuthLinks-
       Children (Dashboard, Mein Kalender, Profil, Abmelden ~ 280px;
       Login+Registrieren ~ 170px). Vor AuthState.InitializeAsync rendert
       AuthLinks nichts, danach die Links — ohne min-width shiftete der
       Discover-Link und der Logout-Pill horizontal (Shift-Score 0.016–0.038).
       Auf Mobile (Nav wrapping) wird min-width ueber Media-Query aufgehoben. */
    /* S11: erhoeht von 280 → 560, da AuthLinks jetzt mehr Eintraege
       (Hilfe, Feedback, Avatar-Tile) rendert. */
    min-width: 560px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .ritmano-nav-links[b-x09xtbaeyb] {
        min-width: 0;
    }
}

.ritmano-nav-links[b-x09xtbaeyb]  a:not(.nav-cta-primary):not(.nav-cta-ghost):not(.user-menu) {
    color: var(--ink);
    text-decoration: none;
    /* S11 — groesser (Mockup-12-Werte) */
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.25rem 0.1rem;
    transition: color 0.2s;
}

.ritmano-nav-links[b-x09xtbaeyb]  a:not(.nav-cta-primary):not(.nav-cta-ghost):not(.user-menu):hover {
    color: var(--brand-deep);
}

/* Register/Logout pills are styled via global classes in app.css
   (.nav-cta-primary / .nav-cta-ghost) so AuthLinks can reference them
   without CSS-isolation hop. */

/* Main / Footer ----------------------------------------------------------- */

.ritmano-main[b-x09xtbaeyb] {
    flex: 1;
    /* Lighthouse-Audit 2026-04-24: Footer war globaler CLS-Top-Shifter auf
       Dashboard (0.24), Profile (0.39), MyCalendar (0.28), ClubPage (0.40),
       Discover (0.48). Ursache: main hat flex:1 aber keinen min-height, also
       schrumpft es auf Content-Groesse waehrend async Loading, Footer springt.
       80vh = reserviert von Anfang an Platz damit Footer-Position stabil
       bleibt. Page-spezifische Skeletons bleiben zusaetzlich fuer
       Above-the-fold-Reserve (z.B. Discover Cards, OrganisationPage Sections). */
    min-height: 80vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 2rem;
    width: 100%;
}

/* S11: Alter .ritmano-footer-Block entfernt — Footer rendert jetzt ueber
   .app-footer-r aus dem app.css Refresh-Block. */

#blazor-error-ui[b-x09xtbaeyb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-x09xtbaeyb] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ReconnectModal scoped CSS — beabsichtigt minimal.
   Die Inline-Disable-Logik (body.ritmano-circuit-disconnected ... ) liegt
   in wwwroot/app.css, weil scoped CSS-Selectors globale body/button-
   Targets nicht treffen wuerden (Blazor packt [b-xxx]-Scope-Attribute
   an die Selectors).

   Hier nur das Standard-Reconnect-Modal verstecken. */

#components-reconnect-modal[b-i778yowrze],
#components-reconnect-modal[b-i778yowrze]::backdrop {
    display: none !important;
}
/* /Components/Layout/StaticLegalLayout.razor.rz.scp.css */
/* StaticLegalLayout — 1:1 Duplikat der relevanten Regeln aus
   MainLayout.razor.css. Grund: CSS-Isolation bindet die Styles an die
   Layout-Komponente. Eine Shared-CSS-Extraktion (z.B. in app.css mit
   globalen Klassen) waere sauberer, ist aber Scope-Creep.
   Referenz: docs/design_system.md §7 (Mint-Tokens). */

.ritmano-app[b-ilholrq8gm] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* S11 (2026-05-08): sticky entfernt + Linksbuendigkeit zu MainLayout.
   S14 (2026-05-08): Padding nur noch in .ritmano-nav (Drift-Fix). */
.ritmano-header[b-ilholrq8gm] {
    background: transparent;
}

.ritmano-nav[b-ilholrq8gm] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 1rem;
}

/* Logo (statische <a>-Variante, kein LogoLink-Component).
   Styles sind im StaticLegalLayout direkt wirksam, weil das <a> hier gerendert
   wird und nicht ueber ::deep aus einem Child kommt. */

.ritmano-logo[b-ilholrq8gm] {
    color: var(--ink) !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

.ritmano-logo-word[b-ilholrq8gm] {
    color: var(--ink);
}

/* S11: Kreis-Dot weg — der Punkt zwischen `grouvy` und `io`
   wird ueber globale Klasse .logo-dot-mid (app.css) gerendert. */

.ritmano-logo-tld[b-ilholrq8gm] {
    color: var(--mint-deep);
    font-weight: 700;
}

.ritmano-logo:hover[b-ilholrq8gm] {
    color: var(--mint-deep) !important;
}

/* Nav links */

.ritmano-nav-links[b-ilholrq8gm] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ritmano-nav-links a:not(.nav-cta-primary):not(.nav-cta-ghost)[b-ilholrq8gm] {
    color: var(--ink);
    text-decoration: none;
    /* S11 — groesser */
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.25rem 0.1rem;
    transition: color 0.2s;
}

.ritmano-nav-links a:not(.nav-cta-primary):not(.nav-cta-ghost):hover[b-ilholrq8gm] {
    color: var(--mint-deep);
}

/* Main / Footer */

.ritmano-main[b-ilholrq8gm] {
    flex: 1;
    /* CLS-Fix aus 5247a4e / MainLayout.razor.css uebernommen:
       min-height:80vh reserviert Platz, damit der Footer nicht beim async
       Rendern der Page springt. */
    min-height: 80vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 2rem;
    width: 100%;
}

/* S11: Alter .ritmano-footer-Block entfernt — Footer rendert jetzt
   ueber .app-footer-r aus dem app.css Refresh-Block. */

#blazor-error-ui[b-ilholrq8gm] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-ilholrq8gm] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Pages/Admin/AdminActivities.razor.rz.scp.css */
/* Aktivitaeten-Tab — Mockup .act-* (Admin/index.html, Screen "aktivitaeten"),
   Variablen-Referenzen per styling.md §0-Mapping in den semantischen
   Namensraum uebersetzt (--mint->--brand, --violet->--sage, --coral->--error,
   --amber->--gold; aubergine unveraendert). Nur Tokens aus styling.md §2. */

/* Panel-Header Export-Button: Outline auf hellem Grund. Der globale
   .btn-sm-pill.outline ist nur unter .uc (Foto-Karten) hell gestylt; hier
   die helle Outline-Variante fuer den Panel-Header nachziehen (Mockup-Optik). */
.act-export.outline[b-mcehwqirt8] {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border-strong);
}

.act-export.outline:hover[b-mcehwqirt8] {
    background: var(--bg-alt);
    color: var(--ink);
    border-color: var(--border-strong);
}

.act-export:disabled[b-mcehwqirt8] {
    opacity: 0.6;
    cursor: default;
}

/* Toolbar: Such-Box + Typ-Filter-Chips + Person-/Zeitraum-Select + Export */
.act-toolbar[b-mcehwqirt8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

/* Such-Box erbt global .search-box; hier nur die flexible Breite */
.act-search[b-mcehwqirt8] {
    flex: 1 1 240px;
    min-width: 200px;
    width: auto;
}

.act-filters[b-mcehwqirt8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.act-sep[b-mcehwqirt8] {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 0.25rem;
}

/* Aktiver Filter-Chip = Brand; inaktiv = Outline. */
.act-chip[b-mcehwqirt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.42rem 0.7rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.act-chip:hover[b-mcehwqirt8] {
    background: var(--brand-softer);
    border-color: var(--brand-soft);
}

.act-chip.active[b-mcehwqirt8] {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
}

.act-chip .act-cdot[b-mcehwqirt8] {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
}

.act-select[b-mcehwqirt8] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.42rem 0.6rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--card);
    cursor: pointer;
}

.act-select:disabled[b-mcehwqirt8] {
    color: var(--muted);
    cursor: default;
}

/* Tages-Gruppen-Header (Sticky wie im Mockup) */
.act-group[b-mcehwqirt8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.act-group[b-mcehwqirt8]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Eintrag — dreispaltig: Typ-Icon | Text | Akteur-Avatar (Mockup-Grid). */
.act-row[b-mcehwqirt8] {
    display: grid;
    grid-template-columns: 38px 1fr 28px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background 0.12s;
}

.act-row:last-child[b-mcehwqirt8] {
    border-bottom: none;
}

.act-row:hover[b-mcehwqirt8] {
    background: var(--brand-softer);
}

.act-ic[b-mcehwqirt8] {
    width: 38px;
    height: 38px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
}

.act-ic[b-mcehwqirt8]  svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Typ-Faerbung nach Kategorie-Konvention des Mockups (§0-gemappt).
   .act-ic.wait (Warteliste, Gold) ist Mockup-Parity-vorbereitet — es gibt
   noch keinen ActivityType "EnrollmentWaitlisted", daher aktuell ungenutzt
   aber bereit, sobald das Enum einen Warteliste-Typ bekommt. */
.act-ic.confirm[b-mcehwqirt8] { background: var(--sage-soft);      color: var(--sage-deep); }
.act-ic.reject[b-mcehwqirt8]  { background: var(--error-soft);     color: var(--error-deep); }
.act-ic.wait[b-mcehwqirt8]    { background: var(--gold-soft);      color: var(--gold-deep); }
.act-ic.member[b-mcehwqirt8]  { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.act-ic.offer[b-mcehwqirt8]   { background: var(--brand-soft);     color: var(--brand-deep); }
.act-ic.cancel[b-mcehwqirt8]  { background: var(--error-soft);     color: var(--error-deep); }
.act-ic.room[b-mcehwqirt8]    { background: var(--sage-soft);      color: var(--sage-deep); }
.act-ic.system[b-mcehwqirt8]  { background: var(--bg);             color: var(--muted); }

.act-meta[b-mcehwqirt8] {
    min-width: 0;
}

.act-text[b-mcehwqirt8] {
    display: block;
    font-size: 0.86rem;
    color: var(--ink);
    line-height: 1.35;
}

.act-text[b-mcehwqirt8]  strong {
    font-weight: 700;
}

.act-text[b-mcehwqirt8]  .act-obj {
    color: var(--brand-deep);
    font-weight: 600;
}

.act-sub[b-mcehwqirt8] {
    display: block;
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* Kategorie-Pill im Sub */
.act-tag[b-mcehwqirt8] {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.18rem 0.42rem;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 0.4rem;
}

/* App-Taxonomie (Backend-Typen) + Mockup-Taxonomie (Angebot-Arten) verfuegbar.
   App rendert t-offer/t-enroll/t-member/t-room/t-system; die Angebot-Arten
   (t-training/t-kurs/t-event/t-free) braeuchten ein Angebot-Art-Feld im DTO. */
.act-tag.t-offer[b-mcehwqirt8]    { background: var(--brand-softer);   color: var(--brand-deep); }
.act-tag.t-enroll[b-mcehwqirt8]   { background: var(--gold-soft);      color: var(--gold-deep); }
.act-tag.t-training[b-mcehwqirt8] { background: var(--brand-softer);   color: var(--brand-deep); }
.act-tag.t-kurs[b-mcehwqirt8]     { background: var(--gold-soft);      color: var(--gold-deep); }
.act-tag.t-event[b-mcehwqirt8]    { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.act-tag.t-free[b-mcehwqirt8]     { background: var(--sage-soft);      color: var(--sage-deep); }
.act-tag.t-member[b-mcehwqirt8]   { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.act-tag.t-room[b-mcehwqirt8]     { background: var(--sage-soft);      color: var(--sage-deep); }
.act-tag.t-system[b-mcehwqirt8]   { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Akteur-Avatar rechts (Mockup .act-av). Foto-Variante via background-image
   (kein Foto im DTO -> Initialen-Kreis als .initials). */
.act-av[b-mcehwqirt8] {
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 700;
    border: 1px solid var(--card);
    box-shadow: 0 0 0 1px var(--border);
}

.act-av.initials[b-mcehwqirt8] {
    background: var(--bg);
    color: var(--muted);
}

/* Footer: "Aeltere Aktivitaeten laden" */
.act-foot[b-mcehwqirt8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 980px) {
    .act-row[b-mcehwqirt8] {
        grid-template-columns: 38px 1fr;
    }

    .act-av[b-mcehwqirt8] {
        display: none;
    }
}
/* /Components/Pages/Admin/AdminCockpit.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Org-Cockpit (.dash-*) — scoped CSS fuer AdminCockpit.razor.
   Portiert aus dem Mockup-Screen "dashboard"
   (wwwroot/mockup-canonical/Admin/index.html, Z. 3934-4057).
   Token-Mapping nach styling.md §0: --mint -> --brand, --coral -> --error,
   --violet -> --sage, --amber -> --gold. --gold/--sage/--aubergine/--ink
   unveraendert. Keine Custom-Radien, kein !important.
   ════════════════════════════════════════════════════════════════════ */

/* ── KPI-Strip ── */
.dash-stats[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 900px) {
    .dash-stats[b-hb1uyjb3mr] { grid-template-columns: repeat(2, 1fr); }
}

.dash-stat[b-hb1uyjb3mr] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    border-left: 4px solid var(--border-strong);
    padding: 0.9rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
}

.dash-stat.s-members[b-hb1uyjb3mr]  { border-left-color: var(--brand); }
.dash-stat.s-approve[b-hb1uyjb3mr]  { border-left-color: var(--gold); }
.dash-stat.s-offers[b-hb1uyjb3mr]   { border-left-color: var(--aubergine-deep); }
.dash-stat.s-load[b-hb1uyjb3mr]     { border-left-color: var(--sage); }

.dash-stat-val[b-hb1uyjb3mr] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dash-stat-lbl[b-hb1uyjb3mr] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 0.3rem;
}

.dash-stat-sub[b-hb1uyjb3mr] {
    font-size: 0.73rem;
    color: var(--muted);
}

.dash-stat-sub b[b-hb1uyjb3mr] { color: var(--brand-deep); font-weight: 700; }

/* ── Zwei-Spalten-Grid ── */
.dash-grid[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 980px) {
    .dash-grid[b-hb1uyjb3mr] { grid-template-columns: 1fr; }
}

.dash-col[b-hb1uyjb3mr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Auslastungs-Balken ── */
.dash-load-row[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: 1fr 200px 64px;
    gap: 0.9rem;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.dash-load-row:last-child[b-hb1uyjb3mr] { border-bottom: none; }

@media (max-width: 640px) {
    .dash-load-row[b-hb1uyjb3mr] { grid-template-columns: 1fr 90px 60px; }
}

.dash-load-name[b-hb1uyjb3mr] { min-width: 0; }

.dash-load-name b[b-hb1uyjb3mr] {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-load-name span[b-hb1uyjb3mr] {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
}

.dash-bar[b-hb1uyjb3mr] {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--bg-alt);
    overflow: hidden;
}

.dash-bar i[b-hb1uyjb3mr] {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
}

.dash-bar.c-kurs i[b-hb1uyjb3mr]     { background: var(--gold); }
.dash-bar.c-training i[b-hb1uyjb3mr] { background: var(--brand); }
.dash-bar.c-event i[b-hb1uyjb3mr]    { background: var(--aubergine-deep); }
.dash-bar.near i[b-hb1uyjb3mr]       { background: var(--gold-deep); }

.dash-load-num[b-hb1uyjb3mr] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.dash-load-num.near[b-hb1uyjb3mr] { color: var(--gold-deep); }
.dash-load-num.full[b-hb1uyjb3mr] { color: var(--brand); }

/* ── Heute-Zeile + Raumstatus ── */
.dash-today-date[b-hb1uyjb3mr] {
    margin-left: 0.4rem;
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 500;
}

.dash-today-row[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.75rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.dash-today-time[b-hb1uyjb3mr] {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    border-radius: var(--r-sm);
    text-align: center;
    background: var(--gold-soft);
    color: var(--gold-deep);
    font-variant-numeric: tabular-nums;
}

.dash-room-row[b-hb1uyjb3mr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.2rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.83rem;
    color: var(--ink);
}

.dash-room-row:last-child[b-hb1uyjb3mr] { border-bottom: none; }

.dash-room-dot[b-hb1uyjb3mr] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-room-dot.free[b-hb1uyjb3mr] { background: var(--sage); }
.dash-room-dot.busy[b-hb1uyjb3mr] { background: var(--brand); }

.dash-room-sub[b-hb1uyjb3mr] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ── Veranstaltungs-Zeile ── */
.dash-ev-row[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.dash-ev-row:last-child[b-hb1uyjb3mr] { border-bottom: none; }

.dash-ev-date[b-hb1uyjb3mr] {
    width: 48px;
    text-align: center;
    border-radius: var(--r-md);
    background: var(--aubergine-soft);
    color: var(--aubergine-deep);
    padding: 0.3rem 0;
    line-height: 1.1;
}

.dash-ev-date b[b-hb1uyjb3mr] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}

.dash-ev-date span[b-hb1uyjb3mr] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dash-ev-end[b-hb1uyjb3mr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.dash-ev-badge[b-hb1uyjb3mr] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--gold-soft);
    color: var(--gold-deep);
    white-space: nowrap;
}

/* ── Aktivitaeten kompakt ── */
.dash-act-row[b-hb1uyjb3mr] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.7rem;
    align-items: start;
    padding: 0.6rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.dash-act-row:last-child[b-hb1uyjb3mr] { border-bottom: none; }

.dash-act-av[b-hb1uyjb3mr] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
}

.dash-act-txt[b-hb1uyjb3mr] {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.35;
}

.dash-act-txt b[b-hb1uyjb3mr] { color: var(--ink); }

.dash-act-time[b-hb1uyjb3mr] {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

/* ── Handlungsbedarf: 1-Klick-Freigabe/Ablehnung als Form-POST ──
   Wrapper-Forms in .pending-actions duerfen den Button-Flow nicht aufbrechen
   (analog .nz-act-form in Dashboard.razor.css). .pending-actions/.pending-btn
   selbst kommen aus app.css. */
.pending-act-form[b-hb1uyjb3mr] { display: inline-flex; margin: 0; }
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* AdminDashboard scoped CSS — Untertab-Leiste in Mockup-Optik.
   Quelle: 21-redesign-final-mockup/Admin/index.html, section "administration",
   Block .adm-tabs/.adm-tab (Kiosk-Sub-Tabs). Token-Mapping nach styling.md §0:
   --mint-deep -> --brand-deep, --mint -> --brand. Nur semantische Tokens.
   Abweichungen zum Mockup: kein horizontales Panel-Padding (Leiste steht frei
   im Main-Content), overflow-x fuer schmale Viewports, aktiver Tab 800. */

.adm-head[b-n87vptae8s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0.9rem;
}

/* Org-Header (Bediener 2026-06-16): Logo + groesserer Vereinsname statt kleiner
   grauer Zeile. Ersetzt die fruehere .adm-head-sub. */
.adm-org[b-n87vptae8s] { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.adm-org-logo[b-n87vptae8s] {
    width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
    object-fit: cover; background: var(--brand-softer);
}
.adm-org-logo-fallback[b-n87vptae8s] {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-deep);
    font-weight: 800; font-size: 1.05rem;
}
.adm-org-text[b-n87vptae8s] { min-width: 0; }
.adm-org-name[b-n87vptae8s] {
    margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--ink);
    letter-spacing: -0.3px; line-height: 1.15;
}
.adm-org-city[b-n87vptae8s] { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--muted); }

.adm-tabs[b-n87vptae8s] {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.adm-tab[b-n87vptae8s] {
    padding: 0.8rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    background: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.adm-tab.active[b-n87vptae8s] {
    color: var(--brand-deep);
    border-bottom-color: var(--brand);
    font-weight: 800;
}

.adm-tab:hover:not(.active)[b-n87vptae8s] {
    color: var(--ink);
}
/* /Components/Pages/Admin/AdminDateExclusions.razor.rz.scp.css */
/* AdminDateExclusions — Screen-CSS nach Mockup "angebote-o" (Admin/index.html,
   .ang-*-Block). Token-Mapping gemaess docs/styling.md §0: ausschliesslich
   semantische Tokens, keine Mockup-Namen (--mint/--amber/--violet/--coral).
   HINWEIS Konsolidierung: .ang-Basisklassen bewusst in allen vier
   Angebots-Tab-Komponenten dupliziert (scoped CSS ist je Komponente
   isoliert) — bei spaeterer Konsolidierung zentral nach app.css heben.
   Termin-Typ-Flags nach Mockup: Ausfall=.cancel (Error-Soft),
   Unterbrechung/Ferien=.holiday (Aubergine-Soft). */

/* ── Listen-Kopf ── */
.ang-list-head[b-dvics7e9jy] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.25rem 0 0.6rem;
}
.ang-list-head h3[b-dvics7e9jy] { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ang-list-head .ang-count[b-dvics7e9jy] { color: var(--muted); font-weight: 600; font-size: 0.84rem; }

/* ── Listen-Rahmen ── */
.ang-list[b-dvics7e9jy] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    overflow: hidden; margin-bottom: 1.5rem;
}

/* ── Auswahl-Zeile (Training/Event waehlen, ganze Zeile = Link) ── */
.ang-select-row[b-dvics7e9jy] {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--ink);
    transition: background 0.15s;
}
.ang-select-row:last-child[b-dvics7e9jy] { border-bottom: none; }
.ang-select-row:hover[b-dvics7e9jy] { background: var(--brand-softer); }
.ang-select-row .ang-info[b-dvics7e9jy] { flex: 1; min-width: 0; }
.ang-chevron[b-dvics7e9jy] { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.ang-select-row:hover .ang-chevron[b-dvics7e9jy] { color: var(--brand-deep); }

/* ── Typ-Badge (Kategorie-Farben: Training=Brand, Kurs=Gold, Event=Aubergine) ── */
.ang-badge[b-dvics7e9jy] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
    white-space: nowrap; letter-spacing: 0.2px;
    flex-shrink: 0; width: 116px; justify-content: flex-start;
}
.ang-badge .ang-bdot[b-dvics7e9jy] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ang-badge.training[b-dvics7e9jy] { background: var(--brand-softer); color: var(--brand-deep); }
.ang-badge.training .ang-bdot[b-dvics7e9jy] { background: var(--brand-deep); }
.ang-badge.kurs[b-dvics7e9jy] { background: var(--gold-soft); color: var(--gold-deep); }
.ang-badge.kurs .ang-bdot[b-dvics7e9jy] { background: var(--gold-deep); }
.ang-badge.event[b-dvics7e9jy] { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.ang-badge.event .ang-bdot[b-dvics7e9jy] { background: var(--aubergine-deep); }

/* ── Name + Unterzeile ── */
.ang-info[b-dvics7e9jy] { min-width: 0; }
.ang-name[b-dvics7e9jy] {
    display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ang-sub[b-dvics7e9jy] {
    display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

/* ── Ausfalltermin-Zeile (Datum | Typ-Flag | Aktion) ── */
.ang-row[b-dvics7e9jy] {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    align-items: center; gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.ang-row:last-child[b-dvics7e9jy] { border-bottom: none; }
.ang-row:hover[b-dvics7e9jy] { background: var(--brand-softer); }
.ang-when[b-dvics7e9jy] {
    font-size: 0.82rem; color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Termin-Typ-Flags ── */
.ang-flags[b-dvics7e9jy] { display: inline-flex; align-items: center; gap: 0.35rem; }
.ang-flag[b-dvics7e9jy] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-sm);
    white-space: nowrap;
}
.ang-flag.cancel[b-dvics7e9jy]  { background: var(--error-soft); color: var(--error-deep); }
.ang-flag.holiday[b-dvics7e9jy] { background: var(--aubergine-soft); color: var(--aubergine-deep); }

/* ── Aktions-Spalte ── */
.ang-actions[b-dvics7e9jy] { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.btn-sm-pill.outline[b-dvics7e9jy] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-dvics7e9jy] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Fehler/Loeschen) */
.btn-sm-pill.outline.ang-danger[b-dvics7e9jy] { color: var(--error-deep); }
.btn-sm-pill.outline.ang-danger:hover[b-dvics7e9jy] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error-deep); }

/* ── Kommende-Termine-Picker (klickbare Chips im Erfassen-Panel) ── */
.excl-pick-hint[b-dvics7e9jy] {
    margin: 0.9rem 0 0.5rem; font-size: 0.8rem; color: var(--muted);
}
.excl-pick-list[b-dvics7e9jy] {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.excl-pick-chip[b-dvics7e9jy] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: var(--card); border: 1px solid var(--border-strong);
    border-radius: var(--r-pill); cursor: pointer;
    font: inherit; color: var(--ink); transition: background 0.15s, border-color 0.15s;
}
.excl-pick-chip:hover[b-dvics7e9jy] { background: var(--brand-softer); border-color: var(--brand-deep); }
.excl-pick-chip .excl-pick-wd[b-dvics7e9jy] { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.excl-pick-chip .excl-pick-date[b-dvics7e9jy] { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.excl-pick-chip .excl-pick-badge[b-dvics7e9jy] {
    font-size: 0.64rem; font-weight: 700;
    padding: 0.05rem 0.4rem; border-radius: var(--r-sm);
    background: var(--aubergine-soft); color: var(--aubergine-deep);
}
/* Bereits als Unterbrechung markiert: gedaempft, aber weiterhin waehlbar */
.excl-pick-chip.is-interruption[b-dvics7e9jy] { opacity: 0.62; }
.excl-pick-chip.is-interruption:hover[b-dvics7e9jy] { opacity: 1; }

/* ── Benachrichtigungs-Toggle ── */
.excl-notify-row[b-dvics7e9jy] { margin-top: 0.9rem; }
.excl-notify[b-dvics7e9jy] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.84rem; color: var(--ink); cursor: pointer;
}
.excl-notify input[b-dvics7e9jy] { width: 1rem; height: 1rem; accent-color: var(--brand-deep); cursor: pointer; }

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-dvics7e9jy] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-dvics7e9jy]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-dvics7e9jy] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-dvics7e9jy] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

/* ── T-EXCL-PAGE: Pager fuer Vorschlags- + Ausfall-Listen ──
   Layout-only (Grid), Pfeile/Seitenanzeige tragen die globalen
   .btn-pill-/.section-link-Klassen aus app.css. Muster 1:1 wie der
   .mn-pager in MyNotifications.razor.css (scoped CSS ist je Komponente
   isoliert, daher hier dupliziert). Leere <span> halten das Grid stabil,
   wenn ein Pfeil fehlt (erste/letzte Seite). */
.mn-pager[b-dvics7e9jy] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}
.mn-pager > :first-child[b-dvics7e9jy] { justify-self: start; }
.mn-pager > :last-child[b-dvics7e9jy] { justify-self: end; }
.mn-pager > .section-link[b-dvics7e9jy] { justify-self: center; }
/* /Components/Pages/Admin/AdminEventDetail.razor.rz.scp.css */
/* AdminEventDetail — T-DETAIL-BTN (2026-06-18).
   Aktions-Leiste unter dem Titel + Delete-Confirm-Dialog. Optik/Token 1:1
   aus der Angebote-Liste (AdminTrainings.razor / AdminFreeTrainings.razor.css)
   uebernommen; scoped CSS ist je Komponente isoliert, daher hier dupliziert
   (siehe Konsolidierungs-Hinweis in den anderen .ang-Komponenten). */

/* ── Aktions-Leiste (primaer Bearbeiten, Rest outline) ── */
.detail-actions[b-84oljzpwau] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Loeschen).
   Greift sowohl auf den Action-Bar-Button (.btn-pill.outline) als auch auf den
   Dialog-Bestaetigungs-Button (.btn-sm-pill.outline). */
.btn-pill.outline.detail-danger[b-84oljzpwau],
.btn-sm-pill.outline.detail-danger[b-84oljzpwau] { color: var(--error-deep); }
.btn-pill.outline.detail-danger:hover[b-84oljzpwau],
.btn-sm-pill.outline.detail-danger:hover[b-84oljzpwau] {
    background: var(--error-soft);
    color: var(--error-deep);
    border-color: var(--error-deep);
}

/* T-SUBST-DISCOVER: Trainer-Aktion "Verhindert melden / Vertretung suchen".
   Eigene Sage-Akzent-Variante (Outline) — optisch abgesetzt von den
   Brand-/Error-Verwaltungs-Buttons, damit der Trainer-Einstieg erkennbar ist. */
.btn-pill.outline.detail-substitute[b-84oljzpwau] {
    color: var(--sage-deep);
    border-color: var(--sage-deep);
}
.btn-pill.outline.detail-substitute:hover[b-84oljzpwau] {
    background: var(--sage-soft);
    color: var(--sage-deep);
    border-color: var(--sage-deep);
}

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-84oljzpwau] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-84oljzpwau]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-84oljzpwau] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-84oljzpwau] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
.btn-sm-pill.outline[b-84oljzpwau] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-84oljzpwau] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* /Components/Pages/Admin/AdminEvents.razor.rz.scp.css */
/* AdminEvents — Screen-CSS nach Mockup "angebote-o" (Admin/index.html,
   .ang-*-Block). Token-Mapping gemaess docs/styling.md §0: ausschliesslich
   semantische Tokens, keine Mockup-Namen (--mint/--amber/--violet/--coral).
   HINWEIS Konsolidierung: .ang-Basisklassen bewusst in allen vier
   Angebots-Tab-Komponenten dupliziert (scoped CSS ist je Komponente
   isoliert) — bei spaeterer Konsolidierung zentral nach app.css heben.
   Kategorie-Farbe Veranstaltung = Aubergine (Mockup "angebote-o" verbindlich). */

.toggle-link[b-0fu9i0muky] { color: var(--brand-deep); text-decoration: none; padding: 0.4rem 0.6rem; }
.toggle-link:hover[b-0fu9i0muky] { text-decoration: underline; }

/* ── Listen-Kopf ── */
.ang-list-head[b-0fu9i0muky] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.25rem 0 0.6rem;
}
.ang-list-head h3[b-0fu9i0muky] { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ang-list-head .ang-count[b-0fu9i0muky] { color: var(--muted); font-weight: 600; font-size: 0.84rem; }

/* ── Hauptliste ── */
.ang-list[b-0fu9i0muky] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    overflow: hidden; margin-bottom: 1.5rem;
}
.ang-row[b-0fu9i0muky] {
    display: grid;
    /* badge | info | wann | raum | cap | aktionen (keine Trainer-Spalte im EventDto-Listenbild) */
    grid-template-columns: 124px minmax(0, 1fr) 168px 140px 90px auto;
    align-items: center; gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.ang-row:last-child[b-0fu9i0muky] { border-bottom: none; }
.ang-row:hover[b-0fu9i0muky] { background: var(--brand-softer); }

/* ── Typ-Badge (Veranstaltung = Aubergine) ── */
.ang-badge[b-0fu9i0muky] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
    white-space: nowrap; letter-spacing: 0.2px;
}
.ang-badge .ang-bdot[b-0fu9i0muky] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ang-badge.event[b-0fu9i0muky] { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.ang-badge.event .ang-bdot[b-0fu9i0muky] { background: var(--aubergine-deep); }

/* ── Name + Preis-Unterzeile ── */
.ang-info[b-0fu9i0muky] { min-width: 0; }
.ang-name[b-0fu9i0muky] {
    display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
}
.ang-name:hover[b-0fu9i0muky] { color: var(--brand-deep); text-decoration: underline; }
.ang-sub[b-0fu9i0muky] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem;
    font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem;
}
.ang-price[b-0fu9i0muky] { font-weight: 700; color: var(--ink); }

/* ── Status-Mini-Badges (Schema: Freigabe-noetig = Gold-Soft) ── */
.ang-flags[b-0fu9i0muky] { display: inline-flex; align-items: center; gap: 0.35rem; }
.ang-flag[b-0fu9i0muky] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-sm);
    white-space: nowrap;
}
.ang-flag.approve[b-0fu9i0muky] { background: var(--gold-soft); color: var(--gold-deep); }

/* ── Datum/Zeit + Raum ── */
.ang-when[b-0fu9i0muky] {
    font-size: 0.82rem; color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ang-when small[b-0fu9i0muky] { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.ang-room[b-0fu9i0muky] { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Teilnehmer-Zahl (voll=Error-Soft, fast voll=Gold-Soft als Soft-Pill) ── */
.ang-cap[b-0fu9i0muky] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ang-cap svg[b-0fu9i0muky] { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.ang-cap.full[b-0fu9i0muky], .ang-cap.near[b-0fu9i0muky] {
    padding: 0.15rem 0.55rem; border-radius: var(--r-pill);
}
.ang-cap.full[b-0fu9i0muky] { background: var(--error-soft); color: var(--error-deep); }
.ang-cap.near[b-0fu9i0muky] { background: var(--gold-soft); color: var(--gold-deep); }
.ang-cap.unlimited[b-0fu9i0muky] { color: var(--sage-deep); }

/* ── Aktions-Spalte ── */
.ang-actions[b-0fu9i0muky] { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
/* Icon-Aktion (Deep-Link Ausfalltermine). Spiegelt .ang-iconbtn aus
   AdminTrainings.razor.css — scoped CSS ist je Komponente isoliert. */
.ang-iconbtn[b-0fu9i0muky] {
    width: 30px; height: 30px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--card);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); cursor: pointer; text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ang-iconbtn:hover[b-0fu9i0muky] { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-deep); }
.ang-iconbtn svg[b-0fu9i0muky] { width: 15px; height: 15px; display: block; }
.btn-sm-pill.outline[b-0fu9i0muky] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-0fu9i0muky] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Fehler/Loeschen) */
.btn-sm-pill.outline.ang-danger[b-0fu9i0muky] { color: var(--error-deep); }
.btn-sm-pill.outline.ang-danger:hover[b-0fu9i0muky] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error-deep); }

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-0fu9i0muky] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-0fu9i0muky]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-0fu9i0muky] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-0fu9i0muky] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

@media (max-width: 1100px) {
    .ang-row[b-0fu9i0muky] { grid-template-columns: 110px minmax(0, 1fr) 100px 84px auto; }
    .ang-when small[b-0fu9i0muky], .ang-room[b-0fu9i0muky] { display: none; }
}
/* /Components/Pages/Admin/AdminFreeTrainings.razor.rz.scp.css */
/* AdminFreeTrainings — Screen-CSS nach Mockup "angebote-o" (Admin/index.html,
   .ang-*-Block). Token-Mapping gemaess docs/styling.md §0: ausschliesslich
   semantische Tokens, keine Mockup-Namen (--mint/--amber/--violet/--coral).
   HINWEIS Konsolidierung: .ang-Basisklassen bewusst in allen vier
   Angebots-Tab-Komponenten dupliziert (scoped CSS ist je Komponente
   isoliert) — bei spaeterer Konsolidierung zentral nach app.css heben.
   Kategorie-Farbe Freies Training = Sage (Mockup "angebote-o" verbindlich).
   Sichtbarkeits-Flags: Oeffentlich=Sage-Soft (positiv), Intern=neutral. */

/* ── Listen-Kopf ── */
.ang-list-head[b-paonuc6nch] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.25rem 0 0.6rem;
}
.ang-list-head h3[b-paonuc6nch] { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ang-list-head .ang-count[b-paonuc6nch] { color: var(--muted); font-weight: 600; font-size: 0.84rem; }

/* ── Hauptliste ── */
.ang-list[b-paonuc6nch] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    overflow: hidden; margin-bottom: 1.5rem;
}
.ang-row[b-paonuc6nch] {
    display: grid;
    /* badge | info | wann | raum | cap | aktionen */
    grid-template-columns: 124px minmax(0, 1fr) 168px 140px 90px auto;
    align-items: center; gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.ang-row:last-child[b-paonuc6nch] { border-bottom: none; }
.ang-row:hover[b-paonuc6nch] { background: var(--brand-softer); }

/* ── Typ-Badge (Freies Training = Sage) ── */
.ang-badge[b-paonuc6nch] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
    white-space: nowrap; letter-spacing: 0.2px;
}
.ang-badge .ang-bdot[b-paonuc6nch] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ang-badge.free[b-paonuc6nch] { background: var(--sage-soft); color: var(--sage-deep); }
.ang-badge.free .ang-bdot[b-paonuc6nch] { background: var(--sage-deep); }

/* ── Name + Unterzeile (kostenlos + Leitung + Sichtbarkeit) ── */
.ang-info[b-paonuc6nch] { min-width: 0; }
.ang-name[b-paonuc6nch] {
    display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ang-sub[b-paonuc6nch] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem;
    font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem;
}
.ang-price-free[b-paonuc6nch] { color: var(--sage-deep); font-weight: 700; }

/* ── Sichtbarkeits-Flags ── */
.ang-flags[b-paonuc6nch] { display: inline-flex; align-items: center; gap: 0.35rem; }
.ang-flag[b-paonuc6nch] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-sm);
    white-space: nowrap;
}
.ang-flag.public[b-paonuc6nch]   { background: var(--sage-soft); color: var(--sage-deep); }
.ang-flag.internal[b-paonuc6nch] { background: var(--bg-alt); color: var(--muted); }

/* ── Datum/Zeit + Raum ── */
.ang-when[b-paonuc6nch] {
    font-size: 0.82rem; color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ang-when small[b-paonuc6nch] { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.ang-room[b-paonuc6nch] { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Teilnehmer-Zahl (Freies Training: immer unbegrenzt = Sage) ── */
.ang-cap[b-paonuc6nch] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ang-cap svg[b-paonuc6nch] { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.ang-cap.unlimited[b-paonuc6nch] { color: var(--sage-deep); }

/* ── Aktions-Spalte ── */
.ang-actions[b-paonuc6nch] { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.btn-sm-pill.outline[b-paonuc6nch] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-paonuc6nch] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Fehler/Loeschen) */
.btn-sm-pill.outline.ang-danger[b-paonuc6nch] { color: var(--error-deep); }
.btn-sm-pill.outline.ang-danger:hover[b-paonuc6nch] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error-deep); }

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-paonuc6nch] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-paonuc6nch]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-paonuc6nch] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-paonuc6nch] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

@media (max-width: 1100px) {
    .ang-row[b-paonuc6nch] { grid-template-columns: 110px minmax(0, 1fr) 100px 84px auto; }
    .ang-when small[b-paonuc6nch], .ang-room[b-paonuc6nch] { display: none; }
}
/* /Components/Pages/Admin/AdminMembers.razor.rz.scp.css */
/* AdminMembers — screen-spezifische Klassen aus dem Mockup-Screen
   "mitglieder" (Admin/index.html, .mit-*-Block). Token-Mapping gemaess
   styling.md §0: ausschliesslich semantische Tokens (--brand/--sage/--gold/
   --error/--aubergine/--ink/...), keine Mockup-Namen (--mint/--coral/
   --violet/--amber).

   Strikt-Mockup-Stand (2026-06-14): Layout 1:1 an der Mockup-Section
   ausgerichtet — Toolbar (.mit-toolbar mit Such-/Filter-Platzhalter),
   6-Spalten-Tabelle (Mitglied/E-Mail/Rollen/Beitritt/Status/Aktionen),
   Status als .mit-status (Text+Dot wie Mockup, KEINE Pills mehr),
   Pending-/Invite-Boxen als .mit-pending-box. Token-Abweichung zum Mockup:
   - Rollen-Badge "Trainer" = Sage-Soft (Schema: Sage = positiv/Community,
     Transfer-Vorgabe) statt Mockup --mint-soft (waere Brand-Peach);
     Stat-Akzent .is-trainer analog Sage statt Brand-Deep.
   App-Plus ggue. Mockup: Inline-Editoren (Rolle-Dropdown + Trainer-Checkbox)
   in der Rollen-Zelle (Mockup zeigt dort nur read-only Badges). P5-Politur
   (2026-06-14): Editoren liegen dezent hinter einem <details>-Disclosure
   (.mit-role-edit-toggle), Badges bleiben primaer. */

/* ── Stat-Strip ── */
.mit-stats[b-2b5t9gn6mk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
    .mit-stats[b-2b5t9gn6mk] { grid-template-columns: repeat(2, 1fr); }
}
.mit-stat[b-2b5t9gn6mk] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: 0.3rem;
    position: relative; overflow: hidden;
}
.mit-stat[b-2b5t9gn6mk]::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--brand);
}
.mit-stat.is-trainer[b-2b5t9gn6mk]::before { background: var(--sage-deep); }
.mit-stat.is-admin[b-2b5t9gn6mk]::before   { background: var(--aubergine-deep); }
.mit-stat.is-pending[b-2b5t9gn6mk]::before { background: var(--gold); }
.mit-stat-val[b-2b5t9gn6mk] {
    font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mit-stat-lbl[b-2b5t9gn6mk] { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.mit-stat-sub[b-2b5t9gn6mk] { font-size: 0.72rem; color: var(--muted); }

/* ── Toolbar (Mockup .mit-toolbar) ──
   Such-Box + Rolle-Filter sind reine Optik-Platzhalter ohne Backend
   (Static SSR), daher nicht-interaktiv (disabled / span). */
.mit-toolbar[b-2b5t9gn6mk] {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.mit-toolbar .search-box[b-2b5t9gn6mk] { flex: 1; min-width: 200px; max-width: 360px; width: auto; }
.mit-toolbar .search-box input[disabled][b-2b5t9gn6mk] { cursor: not-allowed; opacity: 0.75; }
.mit-filter[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    background: var(--card); color: var(--ink);
    font-size: 0.85rem; font-weight: 600;
    white-space: nowrap;
}
.mit-filter svg[b-2b5t9gn6mk] { width: 15px; height: 15px; color: var(--muted); }
.mit-toolbar-spacer[b-2b5t9gn6mk] { flex: 1; }

/* ── Status-Tabs (Query-Links, Static SSR) — Optik = Mockup .mit-tabs ── */
.mit-tabs[b-2b5t9gn6mk] {
    display: flex; gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.mit-tab[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    font-size: 0.88rem; font-weight: 600;
    color: var(--muted); text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.mit-tab:hover[b-2b5t9gn6mk] { color: var(--ink); }
.mit-tab.active[b-2b5t9gn6mk] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 700; }
.mit-tab svg[b-2b5t9gn6mk] { width: 15px; height: 15px; }
.mit-tab-badge[b-2b5t9gn6mk] {
    font-size: 0.72rem; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 0.35rem;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: #fff;
    font-variant-numeric: tabular-nums;
}
.mit-tab-badge.neutral[b-2b5t9gn6mk] { background: var(--bg-alt); color: var(--muted); }

/* ── Tabellen-Optik (Grid-Rows mit ARIA-Table-Rollen) ──
   Spalten 1:1 Mockup: Mitglied / E-Mail / Rollen / Beitritt / Status / Aktionen. */
.mit-table[b-2b5t9gn6mk] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.75rem;
}
.mit-thead[b-2b5t9gn6mk], .mit-trow[b-2b5t9gn6mk] {
    display: grid;
    grid-template-columns: 2.4fr 2fr 1.7fr 1.1fr 1fr 70px;
    align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.1rem;
}
.mit-thead[b-2b5t9gn6mk] {
    border-bottom: 1px solid var(--border);
    background: var(--brand-softer);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--muted); font-weight: 700;
}
.mit-th-actions[b-2b5t9gn6mk] { text-align: right; }
.mit-trow[b-2b5t9gn6mk] { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.mit-trow:last-child[b-2b5t9gn6mk] { border-bottom: none; }
.mit-trow:hover[b-2b5t9gn6mk] { background: var(--brand-softer); }
@media (max-width: 1000px) {
    .mit-thead[b-2b5t9gn6mk] { display: none; }
    .mit-trow[b-2b5t9gn6mk] { grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; }
}

.mit-cell-user[b-2b5t9gn6mk] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.mit-av[b-2b5t9gn6mk] {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff;
    font-size: 0.78rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mit-av img[b-2b5t9gn6mk] { width: 100%; height: 100%; object-fit: cover; display: block; }
.mit-user-meta[b-2b5t9gn6mk] { min-width: 0; }
.mit-uname[b-2b5t9gn6mk] {
    display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rollen-Zelle: read-only Badges (Mockup) + funktionale Inline-Editoren (App-Plus) */
.mit-roles[b-2b5t9gn6mk] { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mit-badge[b-2b5t9gn6mk] {
    font-size: 0.68rem; font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.mit-badge.member[b-2b5t9gn6mk]  { background: var(--border); color: var(--muted); }
.mit-badge.trainer[b-2b5t9gn6mk] { background: var(--sage-soft); color: var(--sage-deep); }
.mit-badge.admin[b-2b5t9gn6mk]   { background: var(--aubergine-soft); color: var(--aubergine-deep); }
/* Inline-Editoren als dezentes <details>-Disclosure: Badges bleiben primaer
   (Mockup-Optik), Edit-Controls erscheinen erst nach Klick auf den kompakten
   "Rolle ändern"-Toggle. */
.mit-role-edit[b-2b5t9gn6mk] { margin-top: 0.4rem; }
.mit-role-edit-toggle[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600; color: var(--muted);
    cursor: pointer; white-space: nowrap;
    list-style: none; user-select: none;
}
.mit-role-edit-toggle[b-2b5t9gn6mk]::-webkit-details-marker { display: none; }
.mit-role-edit-toggle:hover[b-2b5t9gn6mk] { color: var(--ink); }
.mit-role-edit-toggle svg[b-2b5t9gn6mk] { width: 13px; height: 13px; }
.mit-role-edit[open] .mit-role-edit-toggle[b-2b5t9gn6mk] { color: var(--ink); margin-bottom: 0.4rem; }
.mit-role-edit-body[b-2b5t9gn6mk] {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.mit-role-edit-body .form-select-sm[b-2b5t9gn6mk] { max-width: 130px; }
.mit-inline-form[b-2b5t9gn6mk] { display: inline-flex; align-items: center; margin: 0; }
.mit-trainer-label[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; font-weight: 600; color: var(--muted);
    cursor: pointer; white-space: nowrap;
}
.mit-trainer-label input[b-2b5t9gn6mk] { accent-color: var(--brand); }

.mit-email[b-2b5t9gn6mk] {
    font-size: 0.82rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mit-date[b-2b5t9gn6mk] {
    font-size: 0.82rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Status: Text + Farbpunkt (Mockup .mit-status — KEINE Pills) ──
   Aktiv=Sage (positiv), Ausstehend=Gold (wartet), Gesperrt/Abgelaufen=Muted-Dot. */
.mit-status[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    white-space: nowrap;
}
.mit-status[b-2b5t9gn6mk]::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-strong); flex-shrink: 0;
}
.mit-status.ok[b-2b5t9gn6mk]            { color: var(--sage-deep); }
.mit-status.ok[b-2b5t9gn6mk]::before    { background: var(--sage); }
.mit-status.pending[b-2b5t9gn6mk]       { color: var(--gold-deep); }
.mit-status.pending[b-2b5t9gn6mk]::before { background: var(--gold); }
.mit-status.inactive[b-2b5t9gn6mk]      { color: var(--muted); }
.mit-status.inactive[b-2b5t9gn6mk]::before { background: var(--border-strong); }

/* ── Aktionen: runde Icon-Buttons (Mockup .mit-act) + Freigeben-Pill ── */
.mit-actions[b-2b5t9gn6mk] { display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; }
.mit-act[b-2b5t9gn6mk] {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card); color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mit-act svg[b-2b5t9gn6mk] { width: 15px; height: 15px; }
.mit-act:hover[b-2b5t9gn6mk] { background: var(--brand-softer); color: var(--ink); border-color: var(--border-strong); }
/* Destruktive Aktionen (Sperren/Entfernen): Error-Toene, analog .pending-btn.reject (styling.md §6.4) */
.mit-act.danger[b-2b5t9gn6mk] { color: var(--error-deep); }
.mit-act.danger:hover[b-2b5t9gn6mk] { background: var(--error); color: #fff; border-color: var(--error); }
/* Freigeben = positive Aktion -> Sage (kein CTA-Coral), analog .pending-btn.accept */
.mit-approve[b-2b5t9gn6mk] {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--card); color: var(--sage-deep);
    font-size: 0.76rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mit-approve:hover[b-2b5t9gn6mk] { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }

@media (max-width: 980px) {
    /* Tap-Targets analog .pending-btn (Mockup 2d) */
    .mit-act[b-2b5t9gn6mk] { width: 40px; height: 40px; }
    .mit-actions[b-2b5t9gn6mk] { justify-content: flex-start; }
}

/* ── Karten-Rahmen fuer Invite-/Einladungs-Boxen (Mockup .mit-pending-box) ── */
.mit-pending-box[b-2b5t9gn6mk] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* ── Invite-Form (im Karten-Rahmen) ── */
.mit-invite-box[b-2b5t9gn6mk] { padding: 1rem 1.2rem; }
.mit-invite-form[b-2b5t9gn6mk] {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0;
}
.mit-invite-input[b-2b5t9gn6mk] { flex: 1; min-width: 200px; max-width: 360px; }
.mit-invite-role[b-2b5t9gn6mk] { width: auto; min-width: 140px; }
.mit-invite-hint[b-2b5t9gn6mk] {
    margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted);
}

/* ── Native Bestaetigungs-Dialoge (tokenisiert) ── */
.modal-dialog-native[b-2b5t9gn6mk] {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-2b5t9gn6mk]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-2b5t9gn6mk] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-2b5t9gn6mk] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
/* /Components/Pages/Admin/AdminRoomEdit.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   AdminRoomEdit — Scoped CSS fuer die eigene Raum-Anlage-/Bearbeiten-Seite.
   Nutzt ansonsten globale Klassen (.page-header, .panel, .form-group,
   .form-input, .hint, .btn-pill). Hier nur die zwei Layout-Helfer.
   ════════════════════════════════════════════════════════════════════ */

/* Kapazitaet-Feld schmaler halten (analog der bisherigen Inline-Form). */
.rme-fg-capacity[b-bre7q0qs71] {
    max-width: 220px;
}

/* Aktionsleiste (Abbrechen / Anlegen|Speichern) unter dem Formular. */
.rme-actions[b-bre7q0qs71] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.25rem;
}
/* /Components/Pages/Admin/AdminRooms.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   AdminRooms — Scoped CSS, Mockup-Screen "raeume" (.rm-*-Klassen aus
   designvorschlaege/21-redesign-final-mockup/Admin/index.html).
   Token-Mapping nach docs/styling.md §0 angewandt (mint->brand,
   violet->sage, amber->gold, coral->error). Nur semantische Tokens.
   ════════════════════════════════════════════════════════════════════ */

.rm-count[b-7oescdpqxj] {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
    margin-right: auto;
}

/* ── Toolbar (Anlegen-Button links, Such-Box rechts) ───────────────── */
.rm-toolbar[b-7oescdpqxj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.rm-toolbar .search-box[b-7oescdpqxj] { width: 320px; }
.rm-toolbar .rm-spacer[b-7oescdpqxj] { flex: 1; }
/* Static-SSR-Platzhalter: optisch wie Mockup-Such-Box (kein Dimmen), aber
   input bleibt disabled — keine vorgetaeuschte Live-Filter-Funktion. */
.rm-search-disabled input[b-7oescdpqxj] { cursor: not-allowed; }

/* ── Info-Box Doppelbelegungspruefung ──────────────────────────────── */
.rm-info[b-7oescdpqxj] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--sage-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sage);
    border-radius: var(--r-md);
}
.rm-info-ic[b-7oescdpqxj] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--sage-deep);
}
.rm-info-ic svg[b-7oescdpqxj] { width: 17px; height: 17px; display: block; }
.rm-info-txt[b-7oescdpqxj] { font-size: 0.84rem; color: var(--text); line-height: 1.45; }
.rm-info-txt strong[b-7oescdpqxj] { color: var(--ink); }

/* ── Raum-Karten-Grid (responsive 1-3 Spalten) ─────────────────────── */
.rm-grid[b-7oescdpqxj] {
    display: grid;
    /* min(330px,100%): auf schmalen Viewports (<=~360px) schrumpft die Spalte
       auf 100% statt 330px zu erzwingen — verhindert horizontales Overflow. */
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 1.1rem;
    margin-bottom: 2rem;
}
.rm-card[b-7oescdpqxj] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.rm-card:hover[b-7oescdpqxj] { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }

.rm-card-head[b-7oescdpqxj] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem 1.1rem 0.7rem;
}
.rm-card-ic[b-7oescdpqxj] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-softer);
    color: var(--brand-deep);
}
.rm-card-ic svg[b-7oescdpqxj] { width: 20px; height: 20px; display: block; }
.rm-card-titlewrap[b-7oescdpqxj] { min-width: 0; flex: 1; }
.rm-card-title[b-7oescdpqxj] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.rm-cap[b-7oescdpqxj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.rm-cap svg[b-7oescdpqxj] { width: 14px; height: 14px; display: block; flex-shrink: 0; }

/* Ausstattungs-Chips (.rm-tags) — Beschreibung an Kommas gesplittet (kein
   Equipment-Feld im Room-DTO). Token-Mapping styling.md §0: amber->gold. */
.rm-tags[b-7oescdpqxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1.1rem 0.85rem;
}
.rm-tag[b-7oescdpqxj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--gold-soft);
    color: var(--gold-deep);
}
.rm-tag svg[b-7oescdpqxj] { width: 12px; height: 12px; display: block; }

/* ── Karten-Footer Aktionen ────────────────────────────────────────── */
.rm-card-foot[b-7oescdpqxj] {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--border);
}
.rm-act[b-7oescdpqxj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.42rem 0.85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rm-act svg[b-7oescdpqxj] { width: 14px; height: 14px; display: block; flex-shrink: 0; }
.rm-act:hover[b-7oescdpqxj] { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-deep); }
.rm-act.danger[b-7oescdpqxj] { color: var(--error-deep); }
.rm-act.danger:hover[b-7oescdpqxj] { background: var(--error-soft); border-color: var(--error); color: var(--error-deep); }

/* ── Loeschen-Confirm als natives <dialog> ─────────────────────────── */
.rm-dialog[b-7oescdpqxj] {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}
.rm-dialog[b-7oescdpqxj]::backdrop {
    /* warmer Ink-Ton analog Shadow-Basis rgb(33,26,23), kein Token vorhanden */
    background: rgba(33, 26, 23, 0.45);
}
.rm-dialog h4[b-7oescdpqxj] { margin: 0 0 0.75rem; color: var(--ink); }
.rm-dialog-actions[b-7oescdpqxj] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    justify-content: flex-end;
}

/* ── Wochen-Belegungsuebersicht (.rm-week) ─────────────────────────────
   Token-Mapping nach styling.md §0: violet->sage, amber->gold, mint->brand;
   aubergine unveraendert. */
.rm-week[b-7oescdpqxj] {
    display: grid;
    grid-template-columns: 120px repeat(7, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.rm-week-cell[b-7oescdpqxj] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 0.74rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 42px;
}
.rm-week-cell:nth-child(8n)[b-7oescdpqxj] { border-right: none; }
.rm-week-row-last[b-7oescdpqxj] { border-bottom: none; }
.rm-week-head[b-7oescdpqxj] {
    background: var(--bg-alt);
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.68rem;
    justify-content: center;
    align-items: center;
}
.rm-week-roomname[b-7oescdpqxj] {
    background: var(--card);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.8rem;
    justify-content: center;
}
.rm-slot[b-7oescdpqxj] {
    display: block;
    padding: 0.16rem 0.35rem;
    border-radius: var(--r-sm);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rm-slot.training[b-7oescdpqxj] { background: var(--brand-softer); color: var(--brand-deep); }
.rm-slot.kurs[b-7oescdpqxj]     { background: var(--gold-soft); color: var(--gold-deep); }
.rm-slot.event[b-7oescdpqxj]    { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.rm-slot.free[b-7oescdpqxj]     { background: var(--sage-soft); color: var(--sage-deep); }
.rm-week-empty[b-7oescdpqxj] {
    color: var(--border-strong);
    justify-content: center;
    align-items: center;
}

.rm-legend[b-7oescdpqxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.85rem;
    font-size: 0.76rem;
    color: var(--muted);
}
.rm-legend span[b-7oescdpqxj] { display: inline-flex; align-items: center; gap: 0.4rem; }
.rm-legend i[b-7oescdpqxj] { width: 11px; height: 11px; border-radius: var(--r-sm); display: inline-block; }
.rm-legend i.training[b-7oescdpqxj] { background: var(--brand-deep); }
.rm-legend i.kurs[b-7oescdpqxj]     { background: var(--gold); }
.rm-legend i.event[b-7oescdpqxj]    { background: var(--aubergine-deep); }
.rm-legend i.free[b-7oescdpqxj]     { background: var(--sage); }

.rm-week-note[b-7oescdpqxj] {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}
/* /Components/Pages/Admin/AdminSettings.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   AdminSettings — scoped CSS (Redesign Welle 3, Mockup-Screen
   "administration", .adm-*-Formular-Bausteine). Quelle: fenced Styles
   aus designvorschlaege/21-redesign-final-mockup/Admin/index.html,
   var()-Referenzen ueber docs/styling.md §0 gemappt
   (--mint->--brand, --coral->--error usw.). Nur semantische Tokens.
   Panel-Huelle (.panel/.panel-header/.panel-title) kommt aus app.css.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   2-Spalten-Layout (Welle 7) — Mockup-Section "administration" (Z.3315-3336):
   .adm-wrap = Grid (sticky Sub-Nav links + Content rechts).
   Token-Mapping styling.md §0: --mint->--brand. Nur var(--r-*).
   ════════════════════════════════════════════════════════════════════ */
.adm-wrap[b-5j7y3xvjmw] { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .adm-wrap[b-5j7y3xvjmw] { grid-template-columns: 1fr; } }

/* Linke Sub-Nav (sticky; aktiver Eintrag via Scrollspy markiert) */
.adm-nav[b-5j7y3xvjmw] {
    position: sticky; top: 1rem; display: flex; flex-direction: column;
    gap: 0.15rem; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 0.6rem; box-shadow: var(--shadow-xs);
}
@media (max-width: 900px) { .adm-nav[b-5j7y3xvjmw] { position: static; } }
.adm-nav-item[b-5j7y3xvjmw] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.7rem; border-radius: var(--r-md);
    color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.adm-nav-item svg[b-5j7y3xvjmw] { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
.adm-nav-item:hover[b-5j7y3xvjmw] { background: var(--brand-softer); }
.adm-nav-item.active[b-5j7y3xvjmw] { background: var(--brand-soft); color: var(--brand-deep); }
.adm-nav-item.active svg[b-5j7y3xvjmw] { color: var(--brand-deep); }
.adm-nav-item.danger[b-5j7y3xvjmw] { color: var(--error); }
.adm-nav-item.danger svg[b-5j7y3xvjmw] { color: var(--error); }
.adm-nav-item.danger:hover[b-5j7y3xvjmw] { background: var(--error-soft); }

.adm-content[b-5j7y3xvjmw] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.adm-panel-body[b-5j7y3xvjmw] { padding: 1.25rem; }
.adm-panel-sub[b-5j7y3xvjmw] { font-size: 0.78rem; color: var(--muted); font-weight: 500; margin-left: 0.6rem; }

/* Formular-Bausteine */
.adm-grid[b-5j7y3xvjmw] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
@media (max-width: 640px) { .adm-grid[b-5j7y3xvjmw] { grid-template-columns: 1fr; } }
.adm-field[b-5j7y3xvjmw] { display: flex; flex-direction: column; gap: 0.35rem; }
.adm-field.full[b-5j7y3xvjmw] { grid-column: 1 / -1; }
.adm-label[b-5j7y3xvjmw] { font-size: 0.78rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.4px; }
.adm-hint[b-5j7y3xvjmw] { font-size: 0.74rem; color: var(--muted); }
.adm-input[b-5j7y3xvjmw], .adm-textarea[b-5j7y3xvjmw], .adm-select[b-5j7y3xvjmw] {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 0.6rem 0.75rem; font: inherit; font-size: 0.88rem;
    color: var(--text); background: var(--card); width: 100%;
}
.adm-input:focus[b-5j7y3xvjmw], .adm-textarea:focus[b-5j7y3xvjmw], .adm-select:focus[b-5j7y3xvjmw] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer); }
.adm-textarea[b-5j7y3xvjmw] { resize: vertical; min-height: 80px; }
.adm-prefix[b-5j7y3xvjmw] {
    display: flex; align-items: center; border: 1px solid var(--border);
    border-radius: var(--r-md); overflow: hidden; background: var(--card);
}
.adm-prefix:focus-within[b-5j7y3xvjmw] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer); }
.adm-prefix-tag[b-5j7y3xvjmw] { padding: 0.6rem 0.7rem; background: var(--bg); color: var(--muted); font-size: 0.84rem; border-right: 1px solid var(--border); white-space: nowrap; }
.adm-prefix input[b-5j7y3xvjmw] { border: none; padding: 0.6rem 0.7rem; font: inherit; font-size: 0.88rem; flex: 1; background: transparent; color: var(--text); min-width: 0; }
.adm-prefix input:focus[b-5j7y3xvjmw] { outline: none; }

/* Panel-Footer-Leiste mit Aktionen (Submit) */
.adm-actions[b-5j7y3xvjmw] { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* Kiosk: URL-Zeile + Copy-Button (Mockup .adm-copy, Token-gemappt) */
.adm-inline-row[b-5j7y3xvjmw] { display: flex; align-items: center; gap: 0.5rem; }
.adm-inline-row .adm-input[b-5j7y3xvjmw] { flex: 1; min-width: 0; }
.adm-copy[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--border); background: var(--card);
    border-radius: var(--r-md); padding: 0.55rem 0.75rem;
    font-size: 0.82rem; font-weight: 700; color: var(--ink);
    cursor: pointer; white-space: nowrap;
}
.adm-copy:hover[b-5j7y3xvjmw] { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-deep); }
.adm-rotate-btn[b-5j7y3xvjmw] { align-self: flex-start; }

/* Natives <dialog> fuer Kiosk-Key-Rotate (vormals inline .modal-dialog-native;
   Custom-Radius 14px -> var(--r-lg), Teal-rgba-Border/Backdrop -> warme Tokens). */
.adm-dialog[b-5j7y3xvjmw] {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    background: var(--card);
    color: var(--text);
}
.adm-dialog[b-5j7y3xvjmw]::backdrop { background: rgba(33, 26, 23, 0.45); }
.adm-dialog h4[b-5j7y3xvjmw] { margin: 0 0 0.75rem; color: var(--ink); }
.adm-dialog-actions[b-5j7y3xvjmw] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

/* ── Kiosk-SOLL (S-408..S-410): Anlegen-Formulare (Anzeige/Schaltplan/Display)
   + Schritt-Add. Nur semantische Tokens (styling.md §0), Radien ueber var(--r-*),
   Fehler-Rot strikt fuer destruktive Aktionen.
   (Listen-Tabellen + Playlist-Block-Klassen entfielen mit dem Card-Grid/Schedule-
   Restructuring — Daten kommen jetzt aus .adm-widgets/.adm-schedule.) */
.adm-kiosk-create[b-5j7y3xvjmw] { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.adm-kiosk-form-actions[b-5j7y3xvjmw] { display: flex; justify-content: flex-end; margin-top: 1rem; }
.adm-kiosk-grow[b-5j7y3xvjmw] { flex: 1; }
.adm-kiosk-inline-btn[b-5j7y3xvjmw] { align-self: flex-end; white-space: nowrap; }
.adm-kiosk-step-add[b-5j7y3xvjmw] { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.adm-kiosk-step-add .adm-field[b-5j7y3xvjmw] { min-width: 140px; }
.adm-kiosk-step-add-btn[b-5j7y3xvjmw] { white-space: nowrap; }
@media (max-width: 640px) {
    .adm-kiosk-step-add[b-5j7y3xvjmw] { flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════════════
   Kiosk-Verwaltung — Mockup-Section "administration" (Z.3675-3910).
   EIN Panel mit Sub-Tabs statt drei getrennter Panels:
   Anzeigen (Card-Grid) / Schaltplaene (Schedule) / Displays (Bloecke).
   Token-Mapping styling.md §0 (--mint->--brand, --coral->--error,
   --violet->--sage, --amber->--gold, --aubergine bleibt). Nur var(--r-*).
   ════════════════════════════════════════════════════════════════════ */

/* Sub-Tabs (Vanilla-JS-Toggle ueber data-Attribute, Static-SSR) */
.adm-tabs[b-5j7y3xvjmw] { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); padding: 0 1.25rem; }
.adm-tab[b-5j7y3xvjmw] {
    padding: 0.8rem 0.95rem; font-size: 0.88rem; font-weight: 700; color: var(--muted);
    border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
    cursor: pointer; background: none; font-family: inherit;
}
.adm-tab.active[b-5j7y3xvjmw] { color: var(--brand-deep); border-bottom-color: var(--brand); }
.adm-tab:hover:not(.active)[b-5j7y3xvjmw] { color: var(--ink); }
.adm-tabpanel[b-5j7y3xvjmw] { padding: 1.25rem; }
.adm-tabpanel[hidden][b-5j7y3xvjmw] { display: none; }

/* Widget-Karten (Anzeigen) */
.adm-widgets[b-5j7y3xvjmw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.adm-widget[b-5j7y3xvjmw] { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-xs); }
.adm-widget-preview[b-5j7y3xvjmw] {
    height: 96px; display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--muted); font-size: 0.72rem; position: relative; overflow: hidden;
}
.adm-widget-preview svg[b-5j7y3xvjmw] { width: 34px; height: 34px; }
.adm-widget-body[b-5j7y3xvjmw] { padding: 0.7rem 0.85rem; }
.adm-widget-name[b-5j7y3xvjmw] { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.adm-widget-foot[b-5j7y3xvjmw] { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; gap: 0.5rem; }
.adm-pill[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700;
    border-radius: var(--r-pill); padding: 0.22rem 0.6rem; background: var(--aubergine-soft); color: var(--aubergine-deep);
}
.adm-pill.training[b-5j7y3xvjmw] { background: var(--brand-softer); color: var(--brand-deep); }
.adm-pill.event[b-5j7y3xvjmw] { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.adm-pill.gold[b-5j7y3xvjmw] { background: var(--gold-soft); color: var(--gold-deep); }
.adm-pill.warn[b-5j7y3xvjmw] { background: var(--error-soft); color: var(--error-deep); }
.adm-widget-del[b-5j7y3xvjmw] {
    border: none; background: none; color: var(--error-deep);
    font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0;
}
.adm-widget-del:hover[b-5j7y3xvjmw] { text-decoration: underline; }
.adm-widget-add[b-5j7y3xvjmw] {
    text-decoration: none; display: flex; align-items: center; justify-content: center;
    min-height: 160px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
    color: var(--brand-deep); background: var(--bg); font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.adm-widget-add:hover[b-5j7y3xvjmw] { border-color: var(--brand); background: var(--brand-softer); }

/* Anzeige-Anlegen-Form (im Anzeigen-Tab, unter dem Card-Grid) */
.adm-widget-create[b-5j7y3xvjmw] { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }

/* Schaltplan — geordnete Abfolge */
.adm-schedule[b-5j7y3xvjmw] { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1rem; }
.adm-schedule-head[b-5j7y3xvjmw] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.adm-schedule-title[b-5j7y3xvjmw] { font-weight: 800; color: var(--ink); }
/* Grid: Nr | Name+Typ | Dauer | Grip | Loeschen (App-Erweiterung ggue. Mockup). */
.adm-step[b-5j7y3xvjmw] { display: grid; grid-template-columns: 26px 1fr auto auto auto; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.adm-step:last-of-type[b-5j7y3xvjmw] { border-bottom: none; }
.adm-step-num[b-5j7y3xvjmw] { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; }
.adm-step-name[b-5j7y3xvjmw] { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.adm-step-type[b-5j7y3xvjmw] { font-size: 0.74rem; color: var(--muted); font-weight: 600; margin-left: 0.45rem; }
.adm-step-dur[b-5j7y3xvjmw] { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.adm-step-grip[b-5j7y3xvjmw] { color: var(--border-strong); cursor: grab; display: inline-flex; }
.adm-step-grip svg[b-5j7y3xvjmw] { width: 16px; height: 16px; }
.adm-step-del[b-5j7y3xvjmw] {
    border: none; background: none; color: var(--error-deep);
    font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0; white-space: nowrap;
}
.adm-step-del:hover[b-5j7y3xvjmw] { text-decoration: underline; }
.adm-schedule-foot[b-5j7y3xvjmw] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.7rem 1rem; background: var(--bg); border-top: 1px solid var(--border); }
.adm-total[b-5j7y3xvjmw] { font-size: 0.8rem; color: var(--muted); }
.adm-total b[b-5j7y3xvjmw] { color: var(--ink); }
.adm-schedule-empty[b-5j7y3xvjmw] { padding: 0.9rem 1rem; font-size: 0.82rem; color: var(--muted); border-bottom: 1px solid var(--border); }

/* Displays */
.adm-display[b-5j7y3xvjmw] { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; margin-bottom: 0.9rem; background: var(--card); box-shadow: var(--shadow-xs); }
.adm-display:last-of-type[b-5j7y3xvjmw] { margin-bottom: 0; }
.adm-display-top[b-5j7y3xvjmw] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.adm-display-name[b-5j7y3xvjmw] { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--ink); font-size: 1rem; }
.adm-display-name svg[b-5j7y3xvjmw] { width: 18px; height: 18px; color: var(--brand-deep); flex-shrink: 0; }
.adm-display-tags[b-5j7y3xvjmw] { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.adm-display-del[b-5j7y3xvjmw] {
    border: none; background: none; color: var(--error-deep);
    font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0; white-space: nowrap;
}
.adm-display-del:hover[b-5j7y3xvjmw] { text-decoration: underline; }
.adm-tag[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700;
    border-radius: var(--r-pill); padding: 0.25rem 0.65rem; background: var(--bg); color: var(--muted); border: 1px solid var(--border);
}
.adm-tag.fmt[b-5j7y3xvjmw] { background: var(--sage-soft); color: var(--sage-deep); border-color: transparent; }
.adm-linkbox[b-5j7y3xvjmw] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.45rem 0.5rem 0.45rem 0.75rem; }
.adm-linkbox code[b-5j7y3xvjmw] { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-linkbox .adm-copy svg[b-5j7y3xvjmw] { width: 14px; height: 14px; }

/* Hinweis-Box (Info) */
.adm-note[b-5j7y3xvjmw] { display: flex; gap: 0.7rem; background: var(--sage-soft); border-radius: var(--r-md); padding: 0.8rem 1rem; font-size: 0.82rem; color: var(--sage-deep); line-height: 1.45; margin-bottom: 1rem; }
.adm-note svg[b-5j7y3xvjmw] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* Tab-Footer-Aktion (z. B. "+ Schaltplan-Add-Form-Anker") */
.adm-tab-foot[b-5j7y3xvjmw] { margin-top: 1rem; }

/* Sport-/Tanz-Kategorie-Auswahl (Phase-2 #2): Checkbox-Chips */
.adm-cat-grid[b-5j7y3xvjmw] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.adm-cat-chip[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    background: var(--card); cursor: pointer;
    font-size: 0.85rem; color: var(--text);
    transition: border-color 0.12s, background 0.12s;
}
.adm-cat-chip:hover[b-5j7y3xvjmw] { border-color: var(--brand); }
.adm-cat-chip:has(input:checked)[b-5j7y3xvjmw] {
    background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); font-weight: 600;
}
.adm-cat-chip input[b-5j7y3xvjmw] { accent-color: var(--brand); }

/* ════════════════════════════════════════════════════════════════════
   Platzhalter-Sektionen (Welle 7) — Mockup-STRUKTUR ohne Live-Backend:
   Lizenz & Tarif (Plan-Badge + Meter), E-Mail-Versand (Segment), Gefahrenzone.
   Token-Mapping styling.md §0: --mint->--brand, --coral->--error,
   --amber->--gold, --violet->--sage. Nur var(--r-*), kein !important.
   ════════════════════════════════════════════════════════════════════ */

/* "Bald verfuegbar"-Hinweis ueber den Platzhalter-Inhalten */
.adm-soon[b-5j7y3xvjmw] {
    display: flex; gap: 0.7rem; align-items: flex-start;
    background: var(--gold-soft); color: var(--gold-deep);
    border-radius: var(--r-md); padding: 0.8rem 1rem;
    font-size: 0.82rem; line-height: 1.45; margin-bottom: 1.1rem;
}
.adm-soon svg[b-5j7y3xvjmw] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.adm-placeholder .adm-meter-val[b-5j7y3xvjmw],
.adm-placeholder .adm-plan-badge[b-5j7y3xvjmw] { opacity: 0.75; }

/* Lizenz / Tarif */
.adm-plan-head[b-5j7y3xvjmw] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.adm-plan-badge[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--gold-soft); color: var(--gold-deep);
    border-radius: var(--r-pill); padding: 0.45rem 0.9rem; font-weight: 800; font-size: 0.92rem;
}
.adm-plan-badge .dot[b-5j7y3xvjmw] { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.adm-meter[b-5j7y3xvjmw] { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.adm-meter:last-child[b-5j7y3xvjmw] { margin-bottom: 0; }
.adm-meter-head[b-5j7y3xvjmw] { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.84rem; }
.adm-meter-name[b-5j7y3xvjmw] { font-weight: 700; color: var(--ink); }
.adm-meter-val[b-5j7y3xvjmw] { color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-meter-val b[b-5j7y3xvjmw] { color: var(--ink); }
.adm-track[b-5j7y3xvjmw] { height: 8px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.adm-bar[b-5j7y3xvjmw] { height: 100%; border-radius: var(--r-pill); background: var(--sage); }
.adm-bar.warn[b-5j7y3xvjmw] { background: var(--gold); }
.adm-bar.full[b-5j7y3xvjmw] { background: var(--error); }

/* E-Mail-Versandmodus (Segment-Optik, hier deaktiviert) */
.adm-seg[b-5j7y3xvjmw] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.adm-seg-opt[b-5j7y3xvjmw] {
    flex: 1; min-width: 140px; border: 1.5px solid var(--border);
    border-radius: var(--r-md); padding: 0.7rem 0.85rem; background: var(--card);
}
.adm-seg-opt .t[b-5j7y3xvjmw] { display: block; font-weight: 800; color: var(--ink); font-size: 0.9rem; margin-bottom: 0.15rem; }
.adm-seg-opt .d[b-5j7y3xvjmw] { display: block; font-size: 0.74rem; color: var(--muted); }
.adm-seg-opt.active[b-5j7y3xvjmw] { border-color: var(--brand); background: var(--brand-softer); }
.adm-seg-opt.active .t[b-5j7y3xvjmw] { color: var(--brand-deep); }
.adm-input:disabled[b-5j7y3xvjmw], .adm-select:disabled[b-5j7y3xvjmw], .adm-textarea:disabled[b-5j7y3xvjmw] { background: var(--bg); color: var(--muted); cursor: not-allowed; }

/* Gefaehrliche Aktionen (Gefahrenzone) */
.adm-danger[b-5j7y3xvjmw] { border: 1px solid var(--error-soft); }
.adm-danger .panel-title[b-5j7y3xvjmw] { color: var(--error-deep); }
.adm-danger-body[b-5j7y3xvjmw] { padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.adm-danger-text[b-5j7y3xvjmw] { font-size: 0.86rem; color: var(--muted); line-height: 1.45; max-width: 560px; }
.adm-danger-text strong[b-5j7y3xvjmw] { color: var(--error-deep); }
.adm-btn-danger[b-5j7y3xvjmw] {
    display: inline-flex; align-items: center; gap: 0.5rem; background: var(--error); color: #fff;
    border: none; border-radius: var(--r-pill); padding: 0.6rem 1.2rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
}
.adm-btn-danger:hover:not(:disabled)[b-5j7y3xvjmw] { background: var(--error-deep); }
.adm-btn-danger svg[b-5j7y3xvjmw] { width: 16px; height: 16px; }

/* Disabled-Controls in Platzhalter-Sektionen einheitlich gedimmt */
.adm-placeholder button:disabled[b-5j7y3xvjmw],
.adm-btn-danger:disabled[b-5j7y3xvjmw] { opacity: 0.55; cursor: not-allowed; }

/* Vereinslogo-Upload (Mockup-Parity 2026-06-15). Port aus Mockup .adm-logo-row/.adm-logo/
   .adm-upload; --mint->--brand pro styling.md Namespace-Regel. Ergaenzt: .adm-logo-empty
   (Initialen-Platzhalter), versteckter Datei-Input im klickbaren Label, Actions-Spalte. */
.adm-logo-row[b-5j7y3xvjmw] { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.adm-logo[b-5j7y3xvjmw] {
    width: 84px; height: 84px; border-radius: var(--r-lg); flex-shrink: 0;
    background-size: cover; background-position: center; border: 1px solid var(--border);
}
.adm-logo-empty[b-5j7y3xvjmw] {
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-softer); color: var(--brand-deep);
    font-weight: 800; font-size: 2rem;
}
.adm-upload[b-5j7y3xvjmw] {
    position: relative; flex: 1; min-width: 220px; cursor: pointer;
    border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
    padding: 0.9rem 1.1rem; text-align: center; color: var(--muted);
    font-size: 0.82rem; background: var(--bg);
}
.adm-upload:hover[b-5j7y3xvjmw] { border-color: var(--brand); background: var(--brand-softer); color: var(--brand-deep); }
.adm-upload strong[b-5j7y3xvjmw] { color: var(--brand-deep); display: block; }
.adm-upload-hint[b-5j7y3xvjmw] { display: block; font-size: 0.72rem; margin-top: 0.2rem; }
/* Datei-Input visuell verstecken; das umgebende <label> bleibt klickbar (nativer Picker). */
.adm-upload-input[b-5j7y3xvjmw] {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.adm-logo-actions[b-5j7y3xvjmw] { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* /Components/Pages/Admin/AdminStats.razor.rz.scp.css */
/* AdminStats — Statistik-Dashboard (Phase-2 Feature #3). Semantische Tokens
   gemaess styling.md §0 (--brand/--sage/--gold/--aubergine/--ink/...), Optik
   analog AdminMembers .mit-stats (KPI-Strip) + Panel-Listen mit Fortschritts-
   balken. Read-only, keine Forms. */

/* ── KPI-Strip ── */
.st-stats[b-h5hsefqjv1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
    .st-stats[b-h5hsefqjv1] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .st-stats[b-h5hsefqjv1] { grid-template-columns: 1fr; }
}
.st-stat[b-h5hsefqjv1] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: 0.3rem;
    position: relative; overflow: hidden;
}
.st-stat[b-h5hsefqjv1]::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--brand);
}
.st-stat.is-trainer[b-h5hsefqjv1]::before { background: var(--sage-deep); }
.st-stat.is-offer[b-h5hsefqjv1]::before   { background: var(--aubergine-deep); }
.st-stat.is-reg[b-h5hsefqjv1]::before     { background: var(--gold); }
.st-val[b-h5hsefqjv1] {
    font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.st-lbl[b-h5hsefqjv1] { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.st-sub[b-h5hsefqjv1] { font-size: 0.72rem; color: var(--muted); }

/* ── Listen (Trainings / Raeume) ── */
.st-list[b-h5hsefqjv1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.st-row[b-h5hsefqjv1] { display: flex; flex-direction: column; gap: 0.4rem; }
.st-row-head[b-h5hsefqjv1] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.st-row-name[b-h5hsefqjv1] { font-size: 0.9rem; font-weight: 700; color: var(--ink); min-width: 0; }
.st-row-num[b-h5hsefqjv1] {
    font-size: 0.85rem; font-weight: 600; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.st-pending[b-h5hsefqjv1] { font-size: 0.72rem; font-weight: 700; color: var(--gold-deep); }

/* Fortschrittsbalken (Fuellgrad gegen MaxParticipants) */
.st-bar[b-h5hsefqjv1] {
    height: 8px; border-radius: var(--r-pill);
    background: var(--bg-alt); overflow: hidden;
}
.st-bar-fill[b-h5hsefqjv1] {
    display: block; height: 100%;
    background: var(--brand); border-radius: var(--r-pill);
    transition: width 0.3s;
}
.st-bar-fill.full[b-h5hsefqjv1] { background: var(--sage-deep); }

/* Raum-Zeile: Name + Chips */
.st-room[b-h5hsefqjv1] { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.st-room-meta[b-h5hsefqjv1] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.st-chip[b-h5hsefqjv1] {
    font-size: 0.72rem; font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--brand-softer); color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.st-chip.muted[b-h5hsefqjv1] { background: var(--bg-alt); color: var(--muted); }
/* /Components/Pages/Admin/AdminTrainingDetail.razor.rz.scp.css */
/* AdminTrainingDetail — T-DETAIL-BTN (2026-06-18).
   Aktions-Leiste unter dem Titel + Delete-Confirm-Dialog. Optik/Token 1:1
   aus der Angebote-Liste (AdminTrainings.razor / AdminFreeTrainings.razor.css)
   uebernommen; scoped CSS ist je Komponente isoliert, daher hier dupliziert
   (siehe Konsolidierungs-Hinweis in den anderen .ang-Komponenten). */

/* ── Aktions-Leiste (primaer Bearbeiten, Rest outline) ── */
.detail-actions[b-imases8yi9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Loeschen).
   Greift sowohl auf den Action-Bar-Button (.btn-pill.outline) als auch auf den
   Dialog-Bestaetigungs-Button (.btn-sm-pill.outline). */
.btn-pill.outline.detail-danger[b-imases8yi9],
.btn-sm-pill.outline.detail-danger[b-imases8yi9] { color: var(--error-deep); }
.btn-pill.outline.detail-danger:hover[b-imases8yi9],
.btn-sm-pill.outline.detail-danger:hover[b-imases8yi9] {
    background: var(--error-soft);
    color: var(--error-deep);
    border-color: var(--error-deep);
}

/* T-SUBST-DISCOVER: Trainer-Aktion "Verhindert melden / Vertretung suchen".
   Eigene Sage-Akzent-Variante (Outline) — optisch abgesetzt von den
   Brand-/Error-Verwaltungs-Buttons, damit der Trainer-Einstieg erkennbar ist. */
.btn-pill.outline.detail-substitute[b-imases8yi9] {
    color: var(--sage-deep);
    border-color: var(--sage-deep);
}
.btn-pill.outline.detail-substitute:hover[b-imases8yi9] {
    background: var(--sage-soft);
    color: var(--sage-deep);
    border-color: var(--sage-deep);
}

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-imases8yi9] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-imases8yi9]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-imases8yi9] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-imases8yi9] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
.btn-sm-pill.outline[b-imases8yi9] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-imases8yi9] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* /Components/Pages/Admin/AdminTrainingEdit.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   AdminTrainingEdit — Scoped CSS fuer die eigene Training-Bearbeiten-Seite.
   Nutzt ansonsten globale Klassen (.page-header, .panel, .form-grid,
   .form-group, .form-input, .banner-info, .btn-pill). Hier nur die
   Aktionsleiste analog AdminRoomEdit (.rme-actions).
   ════════════════════════════════════════════════════════════════════ */

/* Aktionsleiste (Abbrechen / Speichern) unter dem Formular. */
.ate-actions[b-7cdelecplq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.25rem;
}

/* ── Wochentag-Schnellwahl (Mo-So) ── */
.weekday-picker[b-7cdelecplq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.weekday-btn[b-7cdelecplq] {
    min-width: 2.1rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}

.weekday-btn:hover[b-7cdelecplq] {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.weekday-btn.is-active[b-7cdelecplq] {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

/* ── Plausibilitaets-Hinweis (erkannter Wochentag) ── */
.weekday-hint[b-7cdelecplq] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    min-height: 1rem;
}

.weekday-hint.is-ok[b-7cdelecplq] {
    color: var(--sage-deep);
}

.weekday-hint.is-warn[b-7cdelecplq] {
    color: var(--gold-deep);
    font-weight: 600;
}

/* ── Raum-Verfuegbarkeit ── */
.availability-box[b-7cdelecplq] {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-alt);
}

.availability-result[b-7cdelecplq] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.avail-line[b-7cdelecplq] {
    margin: 0.25rem 0;
    color: var(--ink);
}

.avail-free strong[b-7cdelecplq] {
    color: var(--sage-deep);
}

.avail-busy strong[b-7cdelecplq] {
    color: var(--error-deep);
}

.avail-busy span[b-7cdelecplq] {
    text-decoration: underline dotted;
    cursor: help;
}

.avail-warn[b-7cdelecplq] {
    color: var(--gold-deep);
}

/* ── Einzeltermine anpassen (Occurrence-Overrides) ── */
.ate-occ-panel[b-7cdelecplq] {
    margin-top: 1.5rem;
}

.ate-occ-form[b-7cdelecplq] {
    margin-bottom: 1rem;
}

.ate-occ-list-title[b-7cdelecplq] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: var(--ink);
}

.ate-occ-items[b-7cdelecplq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ate-occ-item[b-7cdelecplq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-alt);
}

.ate-occ-item-info[b-7cdelecplq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--ink);
}

.ate-occ-badge[b-7cdelecplq] {
    font-weight: 600;
    color: var(--brand-deep);
}

.ate-occ-meta[b-7cdelecplq] {
    color: var(--muted);
}

.ate-occ-note[b-7cdelecplq] {
    flex-basis: 100%;
    color: var(--muted);
    font-style: italic;
}
/* /Components/Pages/Admin/AdminTrainings.razor.rz.scp.css */
/* AdminTrainings — Screen-CSS nach Mockup "angebote-o" (Admin/index.html,
   .ang-*-Block). Token-Mapping gemaess docs/styling.md §0: ausschliesslich
   semantische Tokens (--brand/--gold/--sage/--error/--aubergine/...), keine
   Mockup-Namen (--mint/--amber/--violet/--coral).
   HINWEIS Konsolidierung: Die .ang-Basisklassen (Liste/Zeile/Badge/Flags/
   Cap/Aktionen/Dialog) sind bewusst in allen vier Angebots-Tab-Komponenten
   (AdminTrainings/AdminEvents/AdminFreeTrainings/AdminDateExclusions)
   dupliziert — scoped CSS ist je Komponente isoliert. Bei spaeterer
   Konsolidierung zentral nach app.css heben (ein Block, vier Loescher).
   Strikt-Mockup-Optik (Bediener-Entscheid 2026-06-13): die App-Seite folgt
   der Mockup-Section, auch wo zuvor eine bewusste Abweichung dokumentiert war.
   - Aktions-Icon-Trio (.ang-iconbtn: Teilnehmer/Bearbeiten/Loeschen) liegt
     UNTER Name/Preis im .ang-info-Block (Zeile 2 der Karte, links) —
     Mockup Z.1413-1417, NICHT in einer eigenen rechten Aktions-Spalte
     (P5-Politur 2026-06-14).
   - Sekundaer-Funktionen (CSV-Import, Vergangene-Toggle) als dezente
     Toolbar-Links .ang-tool-link, keine eigene admin-tab-header-Aktionszeile
     (Mockup zeigt nur "+ Angebot erstellen" + Suche + Filter; P5-Politur).
   - Status-Flag "blocked"/Gesperrt = neutral Cream (bg-alt/muted) wie Mockup
     Z.1251 (zuvor Error-Soft). Voll-Auslastung (.ang-cap.full) bleibt Error
     (Schema-Regel: "voll" ist negativer Zustand, kein Status-Flag).
   - Kein Default-"Aktiv"-Badge in der Zeile (Mockup zeigt nur Sonderstatus).
   - Warteliste-Flag = Sage-Soft wie Mockup Z.1254 (.ang-flag.wait). */

/* ── Toolbar (Erstellen + funktionierende Suche + Vergangene-Toggle) ──
   T-OFFER-RESTRUCTURE/T-FILTER (2026-06-18): Such-Box ist jetzt ein echtes
   Form-GET (?q=); die toten Filter-Dropdowns (.ang-filter) wurden entfernt.
   Typ-Filterung erfolgt ueber die vier Typ-Sektionen unten. */
.ang-toolbar[b-p2czcj1ipn] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
    margin-bottom: 1rem;
}
.ang-toolbar .btn-pill[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    text-decoration: none;
}
.ang-toolbar .btn-pill svg[b-p2czcj1ipn] { width: 15px; height: 15px; display: block; }
.ang-toolbar .search-box[b-p2czcj1ipn] { width: 280px; flex-shrink: 0; }
/* Such-Button im Such-Feld als reines Icon (kein eigener Pill-Hintergrund). */
.ang-toolbar .search-box button.icon[b-p2czcj1ipn] {
    border: none; background: none; padding: 0; cursor: pointer;
    color: var(--muted); display: inline-flex; align-items: center;
}
.ang-toolbar .search-box button.icon:hover[b-p2czcj1ipn] { color: var(--brand-deep); }
.ang-toolbar-spacer[b-p2czcj1ipn] { flex: 1; }

/* ── Sekundaer-Funktionen in der Toolbar (CSV-Import, Vergangene-Toggle) ──
   Dezent als textbetonte Links statt prominenter Pills — Mockup zeigt keine
   eigene Aktions-Zeile (P5-Konsolidierung). Aktiver Zustand (Import-Panel offen
   bzw. Vergangene eingeblendet) wird in Brand-Soft markiert. */
.ang-tool-link[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-pill);
    font-size: 0.82rem; font-weight: 600; color: var(--muted);
    text-decoration: none; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ang-tool-link svg[b-p2czcj1ipn] { width: 14px; height: 14px; display: block; }
.ang-tool-link:hover[b-p2czcj1ipn] { background: var(--brand-softer); color: var(--brand-deep); }
.ang-tool-link.is-active[b-p2czcj1ipn] { background: var(--brand-soft); color: var(--brand-deep); }

/* ── Typ-Sprunglinks (T-OFFER-RESTRUCTURE 2026-06-18) ──
   Ersetzen die alten toten .ang-tabs. Anker-Links zu den vier Typ-Sektionen
   (#sec-kurse/#sec-trainings/#sec-events/#sec-free) + Count-Badge. Kategorie-
   Dots: Kurs=Gold, Training=Brand, Event=Aubergine, Freies Training=Sage. */
.ang-jump[b-p2czcj1ipn] {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.ang-jump-link[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: 0.82rem; font-weight: 700; color: var(--ink);
    text-decoration: none; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ang-jump-link:hover[b-p2czcj1ipn] { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-deep); }
.ang-jump-link .ang-tab-dot[b-p2czcj1ipn] { width: 9px; height: 9px; border-radius: 50%; }
.ang-jump-n[b-p2czcj1ipn] {
    font-size: 0.7rem; font-weight: 700;
    padding: 0.05rem 0.45rem; border-radius: var(--r-pill);
    background: var(--bg-alt); color: var(--muted);
}
.ang-tab-dot[b-p2czcj1ipn] { width: 9px; height: 9px; border-radius: 50%; }
.ang-dot-training[b-p2czcj1ipn] { background: var(--brand-deep); }
.ang-dot-kurs[b-p2czcj1ipn]     { background: var(--gold-deep); }
.ang-dot-event[b-p2czcj1ipn]    { background: var(--aubergine-deep); }
.ang-dot-free[b-p2czcj1ipn]     { background: var(--sage-deep); }

/* ── Stat-Strip (KPI-Kacheln) ── */
.ang-stats[b-p2czcj1ipn] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem; margin-bottom: 1.25rem;
}
.ang-stat[b-p2czcj1ipn] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    padding: 0.85rem 1rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.ang-stat-ic[b-p2czcj1ipn] {
    width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ang-stat-ic svg[b-p2czcj1ipn] { width: 19px; height: 19px; display: block; }
.ang-stat-ic.training[b-p2czcj1ipn] { background: var(--brand-softer); color: var(--brand-deep); }
.ang-stat-ic.kurs[b-p2czcj1ipn]     { background: var(--gold-soft); color: var(--gold-deep); }
.ang-stat-ic.event[b-p2czcj1ipn]    { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.ang-stat-ic.approve[b-p2czcj1ipn]  { background: var(--sage-soft); color: var(--sage-deep); }
.ang-stat-meta[b-p2czcj1ipn] { min-width: 0; }
.ang-stat-num[b-p2czcj1ipn] { font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1; }
.ang-stat-lbl[b-p2czcj1ipn] { font-size: 0.74rem; color: var(--muted); margin-top: 0.2rem; }

/* ── Listen-Kopf ── */
.ang-list-head[b-p2czcj1ipn] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.25rem 0 0.6rem;
}
.ang-list-head h3[b-p2czcj1ipn] { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ang-list-head .ang-count[b-p2czcj1ipn] { color: var(--muted); font-weight: 600; font-size: 0.84rem; }

/* ── Typ-Sektion (T-OFFER-RESTRUCTURE) ──
   Eine Sektion je Angebotstyp. Scroll-Margin, damit die Anker-Sprunglinks die
   Ueberschrift nicht hinter eine evtl. fixe Topbar schieben. */
.ang-section[b-p2czcj1ipn] { margin-bottom: 1.75rem; scroll-margin-top: 1rem; }
.ang-section:last-child[b-p2czcj1ipn] { margin-bottom: 0.5rem; }
.ang-section-empty[b-p2czcj1ipn] {
    color: var(--muted); font-size: 0.85rem; font-style: italic;
    padding: 0.4rem 0.1rem 0.2rem; margin: 0;
}

/* ── Hauptliste ── */
.ang-list[b-p2czcj1ipn] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    overflow: hidden; margin-bottom: 1.5rem;
}
.ang-row[b-p2czcj1ipn] {
    display: grid;
    /* Mockup-Spalten (Z.1165, 6-spaltig): Badge 116 / Name 1fr / Zeit 168 /
       Raum 150 / Cap 84 / Trainer 110. Die Aktions-Icons liegen NICHT in einer
       eigenen Spalte, sondern UNTER Name/Preis im .ang-info-Block (Mockup
       Z.1413-1417). Top-Ausrichtung, damit der mehrzeilige Info-Block sauber
       am Badge/Zeit/Cap oben startet. */
    grid-template-columns: 116px minmax(0, 1fr) 168px 150px 84px 110px;
    align-items: start; gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
/* Badge/Zeit/Cap/Trainer optisch auf Hoehe der Namens-Zeile zentrieren
   (Info-Block ist durch die Aktions-Icons hoeher als eine Textzeile). */
.ang-row > .ang-badge[b-p2czcj1ipn],
.ang-row > .ang-when[b-p2czcj1ipn],
.ang-row > .ang-room[b-p2czcj1ipn],
.ang-row > .ang-cap[b-p2czcj1ipn],
.ang-row > .ang-trainer-cell[b-p2czcj1ipn] { margin-top: 0.15rem; }
.ang-row:last-child[b-p2czcj1ipn] { border-bottom: none; }
.ang-row:hover[b-p2czcj1ipn] { background: var(--brand-softer); }

/* ── Typ-Badge (Kategorie-Farbe: Training=Brand, Kurs=Gold) ── */
.ang-badge[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
    white-space: nowrap; letter-spacing: 0.2px;
}
.ang-badge .ang-bdot[b-p2czcj1ipn] { width: 7px; height: 7px; border-radius: 50%; }
.ang-badge.training[b-p2czcj1ipn] { background: var(--brand-softer); color: var(--brand-deep); }
.ang-badge.training .ang-bdot[b-p2czcj1ipn] { background: var(--brand-deep); }
.ang-badge.kurs[b-p2czcj1ipn] { background: var(--gold-soft); color: var(--gold-deep); }
.ang-badge.kurs .ang-bdot[b-p2czcj1ipn] { background: var(--gold-deep); }
/* T-OFFER-RESTRUCTURE: Event=Aubergine, Freies Training=Sage (1:1 aus
   AdminEvents.razor.css / AdminFreeTrainings.razor.css uebernommen, da scoped
   CSS je Komponente isoliert ist). */
.ang-badge.event[b-p2czcj1ipn] { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.ang-badge.event .ang-bdot[b-p2czcj1ipn] { background: var(--aubergine-deep); }
.ang-badge.free[b-p2czcj1ipn] { background: var(--sage-soft); color: var(--sage-deep); }
.ang-badge.free .ang-bdot[b-p2czcj1ipn] { background: var(--sage-deep); }

/* ── Name + Preis-Unterzeile ── */
.ang-info[b-p2czcj1ipn] { min-width: 0; }
.ang-name[b-p2czcj1ipn] {
    display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
}
.ang-name:hover[b-p2czcj1ipn] { color: var(--brand-deep); text-decoration: underline; }
.ang-sub[b-p2czcj1ipn] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem;
    font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem;
}
.ang-price[b-p2czcj1ipn] { font-weight: 700; color: var(--ink); }
.ang-price-free[b-p2czcj1ipn] { color: var(--sage-deep); font-weight: 700; }

/* ── Status-Mini-Badges (Mockup: Freigabe=Gold, gesperrt=neutral Cream,
   Warteliste=Sage). Kein Default-"Aktiv"-Badge (Mockup Z.1242-1254). ── */
.ang-flags[b-p2czcj1ipn] { display: inline-flex; align-items: center; gap: 0.35rem; }
.ang-flag[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-sm);
    white-space: nowrap;
}
.ang-flag.approve[b-p2czcj1ipn] { background: var(--gold-soft); color: var(--gold-deep); }
.ang-flag.blocked[b-p2czcj1ipn] { background: var(--bg-alt); color: var(--muted); }
.ang-flag.wait[b-p2czcj1ipn]    { background: var(--sage-soft); color: var(--sage-deep); }
/* T-OFFER-RESTRUCTURE: Sichtbarkeits-Flags fuer Freie Trainings (aus
   AdminFreeTrainings.razor.css). */
.ang-flag.public[b-p2czcj1ipn]   { background: var(--sage-soft); color: var(--sage-deep); }
.ang-flag.internal[b-p2czcj1ipn] { background: var(--bg-alt); color: var(--muted); }

/* ── Tag/Zeit + Raum ── */
.ang-when[b-p2czcj1ipn] {
    font-size: 0.82rem; color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ang-when small[b-p2czcj1ipn] { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.ang-room[b-p2czcj1ipn] { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Teilnehmer-Zahl (voll=Error-Soft, fast voll=Gold-Soft als Soft-Pill) ── */
.ang-cap[b-p2czcj1ipn] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ang-cap svg[b-p2czcj1ipn] { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.ang-cap.full[b-p2czcj1ipn], .ang-cap.near[b-p2czcj1ipn] {
    padding: 0.15rem 0.55rem; border-radius: var(--r-pill);
}
.ang-cap.full[b-p2czcj1ipn] { background: var(--error-soft); color: var(--error-deep); }
.ang-cap.near[b-p2czcj1ipn] { background: var(--gold-soft); color: var(--gold-deep); }
.ang-cap.unlimited[b-p2czcj1ipn] { color: var(--sage-deep); }

/* ── Trainer-Avatare (nutzt globale .avatar-stack/.av) ── */
.ang-trainer-cell[b-p2czcj1ipn] { display: flex; align-items: center; }
.ang-none[b-p2czcj1ipn] { color: var(--muted); }

/* T-AVATAR: Foto-Avatar fuer Instruktoren/Leiter. Die globale Regel
   (.avatar-stack .av in app.css) liefert bereits Groesse, Rundung,
   background-size: cover + background-position: center; das background-image
   kommt per Inline-Style aus AvatarPhotoStyle(). .av.photo blendet nur den
   Initialen-Gradient/Text aus (reines Foto). */
.avatar-stack .av.photo[b-p2czcj1ipn] {
    background: var(--bg-alt);
    color: transparent;
    background-size: cover;
    background-position: center;
}
/* Freies Training: der Leiter-Avatar steht solo (KEINE .avatar-stack), daher
   bekommt er hier explizit dieselbe Avatar-Optik wie ein Stack-Eintrag. */
.ang-trainer-cell .av.solo[b-p2czcj1ipn] {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.6rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    background-size: cover; background-position: center;
    background-color: var(--brand-deep);
}
.ang-trainer-cell .av.solo.initials[b-p2czcj1ipn] { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.ang-trainer-cell .av.solo.photo[b-p2czcj1ipn] { background-color: var(--bg-alt); color: transparent; }

/* ── T-PAST-STYLE: vergangene Angebote dezent absetzen ──
   Graue/passive Optik fuer die ganze Zeile (gedaempfte Deckkraft + neutraler
   Hintergrund). Die Zeile bleibt voll anklickbar — nur visuell zurueckgenommen.
   Der Hover hebt die Zeile wieder leicht an, damit Klickbarkeit spuerbar bleibt. */
.ang-row.is-past[b-p2czcj1ipn] { background: var(--bg-alt); opacity: 0.72; }
.ang-row.is-past:hover[b-p2czcj1ipn] { opacity: 1; background: var(--brand-softer); }
/* Badge "Vergangen"/"Beendet" in der Info-Zeile (.ang-sub), neutral-grau. */
.ang-past-badge[b-p2czcj1ipn] {
    display: inline-flex; align-items: center;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-sm);
    background: var(--bg-alt); color: var(--muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* ── Aktions-Icon-Trio UNTER Name/Preis (Mockup Z.1413-1417) ──
   Links ausgerichtet im .ang-info-Block, abgesetzt unter der Preis-Unterzeile. */
.ang-actions[b-p2czcj1ipn] {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.3rem;
    margin-top: 0.5rem;
}
.ang-iconbtn[b-p2czcj1ipn] {
    width: 30px; height: 30px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--card);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); cursor: pointer; text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ang-iconbtn:hover[b-p2czcj1ipn] { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-deep); }
.ang-iconbtn svg[b-p2czcj1ipn] { width: 15px; height: 15px; display: block; }
/* Destruktive Aktion: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Loeschen) */
.ang-iconbtn.ang-danger:hover[b-p2czcj1ipn] { background: var(--error-soft); border-color: var(--error-deep); color: var(--error-deep); }

/* ── Delete-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-p2czcj1ipn] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 480px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-p2czcj1ipn]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-p2czcj1ipn] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-p2czcj1ipn] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
/* Destruktiver Bestaetigungs-Button im Dialog (Text-Pill, Error-Semantik) */
.modal-actions .btn-sm-pill.outline.ang-danger[b-p2czcj1ipn] { color: var(--error-deep); border-color: var(--border-strong); }
.modal-actions .btn-sm-pill.outline.ang-danger:hover[b-p2czcj1ipn] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error-deep); }

@media (max-width: 1100px) {
    .ang-stats[b-p2czcj1ipn] { grid-template-columns: repeat(2, 1fr); }
    .ang-toolbar .search-box[b-p2czcj1ipn] { width: 100%; }
    /* Schmal: Badge / Name (inkl. Aktions-Icons) / Cap — Zeit/Raum/Trainer
       ausgeblendet (Mockup Z.1328-1332). Aktionen liegen jetzt im Info-Block. */
    .ang-row[b-p2czcj1ipn] { grid-template-columns: 100px minmax(0, 1fr) 84px; }
    .ang-when[b-p2czcj1ipn], .ang-room[b-p2czcj1ipn], .ang-trainer-cell[b-p2czcj1ipn] { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Anlage-Formular: Wochentag-Schnellwahl, Plausibilitaets-Hinweis,
   Raum-Verfuegbarkeit (#7 CourseAvailability). Static-SSR, Logik im
   Inline-Script am Seitenende.
   ════════════════════════════════════════════════════════════════════ */

/* ── Wochentag-Schnellwahl (Mo-So) ── */
.weekday-picker[b-p2czcj1ipn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.weekday-btn[b-p2czcj1ipn] {
    min-width: 2.1rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}

.weekday-btn:hover[b-p2czcj1ipn] {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.weekday-btn.is-active[b-p2czcj1ipn] {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

/* ── Plausibilitaets-Hinweis (erkannter Wochentag) ── */
.weekday-hint[b-p2czcj1ipn] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    min-height: 1rem;
}

.weekday-hint.is-ok[b-p2czcj1ipn] {
    color: var(--sage-deep);
}

.weekday-hint.is-warn[b-p2czcj1ipn] {
    color: var(--gold-deep);
    font-weight: 600;
}

/* ── Raum-Verfuegbarkeit ── */
.availability-box[b-p2czcj1ipn] {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-alt);
}

.availability-result[b-p2czcj1ipn] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.avail-line[b-p2czcj1ipn] {
    margin: 0.25rem 0;
    color: var(--ink);
}

.avail-free strong[b-p2czcj1ipn] {
    color: var(--sage-deep);
}

.avail-busy strong[b-p2czcj1ipn] {
    color: var(--error-deep);
}

.avail-busy span[b-p2czcj1ipn] {
    text-decoration: underline dotted;
    cursor: help;
}

.avail-warn[b-p2czcj1ipn] {
    color: var(--gold-deep);
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* Calendar.razor.css — Mockup-Parity (2026-06-14, Mockup-Screen "kalender-o").
   Nur semantische Tokens (docs/styling.md §0/§2). Token-Mapping aus dem Mockup
   angewandt: --mint* -> --brand*. Klassen-Praefix .cal-* analog Mockup-Section.

   FullCalendar rendert in den Page-DOM OHNE den b-<hash>-Scope-Marker, den die
   CSS-Isolation an die eigenen Elemente dieser Component haengt. Deshalb greifen
   .fc-Selektoren nur via ::deep (am gescopeten Wrapper #org-calendar). */

/* ── Legende: Karten-Leiste analog Mockup .cal-legend ── */
.cal-legend[b-i7c29vft16] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.cal-legend legend[b-i7c29vft16] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    padding: 0;
    float: left;
    margin-right: 0.4rem;
}
.cal-leg[b-i7c29vft16] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text);
}
/* Legende-Eintraege als klickbare Filter-Toggles (2026-06-18, single-isolate):
   <button>-Reset auf die span-Optik, plus Cursor/Hover. .cal-leg-active = dieser
   Filter ist aktiv (Typ isoliert ODER Mine-only an) — hervorgehoben statt
   ausgegraut, weil der aktive Toggle jetzt die ZEIGE-Auswahl ist, nicht das
   Ausgeblendete. Default (kein Filter) = alle Buttons neutral. */
button.cal-leg-toggle[b-i7c29vft16] {
    background: none;
    border: none;
    padding: 0.15rem 0.4rem;
    margin: 0;
    font: inherit;
    cursor: pointer;
    border-radius: var(--r-sm);
}
button.cal-leg-toggle:hover[b-i7c29vft16] { color: var(--ink); }
button.cal-leg-toggle:focus-visible[b-i7c29vft16] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.cal-leg-active[b-i7c29vft16] {
    background: var(--brand-softer);
    color: var(--ink);
    font-weight: 700;
}
.cal-leg-dot[b-i7c29vft16] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}
/* Kategorie-Farbschema (konsistent zu /me-Hero-Cards): Training=Sage(--sage),
   Veranstaltung=Gold(--gold), Freies Training=Coral(--brand). Lesbares Schema —
   das dunkle Aubergine fuer Events ist bewusst entfernt (Text war unlesbar). Diese
   Legenden-Dots entsprechen den vom CalendarController pro Event gesetzten Feed-
   Farben (Hex-Pendants derselben Tokens), damit Legende und FullCalendar-Kacheln
   zusammenpassen. Kurs ist eine eigene Feed-Kategorie (Trainings mit IsCourse=true)
   und nutzt das dezent abgesetzte dunklere Sage (--sage-deep) — gleiche Gruen-
   Familie wie Training, aber als eigene Kategorie unterscheidbar. */
.cal-dot-training[b-i7c29vft16] { background: var(--sage); }
.cal-dot-course[b-i7c29vft16]   { background: var(--sage-deep); }
.cal-dot-event[b-i7c29vft16]    { background: var(--gold); }
.cal-dot-free[b-i7c29vft16]     { background: var(--brand); }

/* Stern-Glyph in der Legende ("von mir geleitet"-Toggle) — gleiches Symbol wie an
   den Events (fc-event-mine-star). Ersetzt den Farb-Dot fuer diesen Eintrag. */
.cal-leg-star[b-i7c29vft16] {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

/* ── Kalender-Karte (umschliesst FullCalendar) analog Mockup .cal-board ── */
.cal-board[b-i7c29vft16] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 1rem;
}
.calendar-loading[b-i7c29vft16] {
    display: none;
    text-align: center;
    padding: 1rem;
    color: var(--muted);
}

/* ── FullCalendar-Chrome auf Ritmano-Tokens via FC-v6-CSS-Variablen ──
   neutrale weisse Buttons (Mockup-Toolbar-Optik), aktive Ansicht in
   Soft-Peach, Heute-Spalte in --brand-softer, warme Gitterlinien. */
#org-calendar[b-i7c29vft16] {
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--card);
    --fc-neutral-bg-color: var(--bg-alt);
    --fc-today-bg-color: var(--brand-softer);
    --fc-button-text-color: var(--ink);
    --fc-button-bg-color: var(--card);
    --fc-button-border-color: var(--border-strong);
    --fc-button-hover-bg-color: var(--brand-softer);
    --fc-button-hover-border-color: var(--border-strong);
    --fc-button-active-bg-color: var(--brand-soft);
    --fc-button-active-border-color: var(--border-strong);
    --fc-list-event-hover-bg-color: var(--brand-softer);
}
[b-i7c29vft16] .fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.2px;
}
/* Toolbar-Buttons dezenter (kleineres Padding/Schriftgrad statt FC-Default-Groesse). */
[b-i7c29vft16] .fc .fc-button {
    font-weight: 600;
    border-radius: var(--r-md);
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.2;
}
/* Keine Unterstreichungen auf Buttons/Links im Kalender-Chrome. */
[b-i7c29vft16] .fc .fc-button,
[b-i7c29vft16] .fc a {
    text-decoration: none;
}
[b-i7c29vft16] .fc .fc-button-primary:not(:disabled).fc-button-active {
    color: var(--brand-deeper);
}
[b-i7c29vft16] .fc .fc-today-button:disabled { opacity: 0.5; }
[b-i7c29vft16] .fc .fc-col-header-cell-cushion,
[b-i7c29vft16] .fc .fc-list-day-text,
[b-i7c29vft16] .fc .fc-list-day-side-text { color: var(--ink); }
/* Termine sind klickbar (Navigation auf die Angebots-Detailseite) -> Cursor pointer. */
[b-i7c29vft16] .fc-event {
    cursor: pointer;
    border: none;
    padding: 1px 4px;
    font-size: 0.8rem;
    border-radius: var(--r-sm);
}
/* "Von mir geleitet" (Trainer): nur Stern vor dem Titel, KEINE Umrandung mehr
   (T-STAR-LEGEND 2026-06-18 — outline entfernt, der Stern allein markiert eigene
   Termine). Events rendern ausserhalb des CSS-Isolation-Scopes -> ::deep. */
[b-i7c29vft16] .fc-event-mine {
    font-weight: 700;
}
[b-i7c29vft16] .fc-event-mine-star { font-weight: 700; }

/* T-PAST-STYLE (2026-06-18): vergangene Termine dezent grau/zurueckgenommen.
   Reduzierte Deckkraft + entsaettigt; Termin bleibt klickbar (kein
   pointer-events:none). Die Klasse setzt das eventDidMount-Interop, sie
   ist unabhaengig vom Typ-/Mine-Filter (der ueber display laeuft). */
[b-i7c29vft16] .fc-event-past {
    opacity: 0.5;
    filter: grayscale(0.6);
}
[b-i7c29vft16] .fc-event-past:hover { opacity: 0.8; }

@media (max-width: 980px) {
    .cal-board[b-i7c29vft16] { padding: 0.6rem; }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard (/me) — screen-spezifische Klassen fuer den Mockup-Screen
   "mein-grouvy" (Admin/index.html). Token-Mapping gemaess styling.md §0:
   ausschliesslich semantische Tokens (--brand/--sage/--gold/--error/--ink/...),
   keine Mockup-Namen (--mint/--coral/--violet/--amber). */

/* ════════════════════════════════════════════════════════════════════
   Hero-Cards (.uc-*): Kategorie-Farbgebung fuer Icon + Uhr-Glyph
   (Bediener 2026-06-16: "farbenfroher"). .uc/.uc-icon-Basis liegt global
   in app.css; hier nur die per-Kategorie eingefaerbten currentColor-SVGs.
   Training=Sage, Freies=Brand(Coral), Event=Gold — analog der Karten-
   Akzentzuordnung (styling.md §6.1).
   ════════════════════════════════════════════════════════════════════ */
.uc.training .uc-icon[b-q4le796zgx] { color: var(--sage-deep); }
.uc.free .uc-icon[b-q4le796zgx]     { color: var(--brand); }
.uc.event .uc-icon[b-q4le796zgx]    { color: var(--gold-deep); }
/* Uhr-/Wecker-Glyph in uc-meta Zeile 1 mit Kategorie-Farbe (farbenfroher). */
.uc.training .uc-clock[b-q4le796zgx] { color: var(--sage-deep); }
.uc.free .uc-clock[b-q4le796zgx]     { color: var(--brand); }
.uc.event .uc-clock[b-q4le796zgx]    { color: var(--gold-deep); }
/* .more als dezente Pill (Mockup-Optik); .avatar-stack/.av liegen global. */
.avatar-stack .more[b-q4le796zgx] {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 0.45rem; margin-left: 0.35rem;
    border-radius: var(--r-pill);
    background: rgba(33, 26, 23, 0.07);
    font-size: 0.72rem; font-weight: 700; color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   Wochenplan: Tages-Strip + Tagesliste (.wp-*, aus dem Mockup promoted).
   Static-SSR-Fassung: Strip zeigt Mo-So der laufenden Woche; Tage sind
   anklickbare Links (?wpday=), aktiv = gewaehlter Tag (Default heute).
   Tag-Optik Mockup-treu (Bediener 2026-06-16): keine Umrandung/Fuellung,
   aktive Auswahl rein ueber den .wp-date-Kreis + ::after-Strich; Hover
   hinterlegt dezent. Kategorie-Farben auf die abgenommene Hero-Card-
   Zuordnung (styling.md §6.1: Training=Sage, Frei=Brand, Event=Gold).
   ════════════════════════════════════════════════════════════════════ */
.wp[b-q4le796zgx] { display: flex; flex-direction: column; }
.wp-strip[b-q4le796zgx] {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem; padding: 0.5rem 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border);
}
.wp-day[b-q4le796zgx] {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.15rem 0.5rem; border-radius: var(--r-md);
    position: relative;
    /* Mockup-Optik (Bediener 2026-06-16): KEINE Umrandung/Hinterlegung im Normal-
       und Aktiv-Zustand. Nur Hover hinterlegt dezent (Lachston). Anklickbarer
       Tag-Link (?wpday=), aktive Auswahl rein ueber den .wp-date-Kreis + ::after. */
    background: none; border: none;
    color: inherit; text-decoration: none; cursor: pointer;
    transition: background 0.15s;
}
.wp-day:hover[b-q4le796zgx] { background: var(--brand-softer); }
.wp-dow[b-q4le796zgx] {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--muted); font-weight: 600;
}
.wp-date[b-q4le796zgx] {
    font-size: 0.98rem; font-weight: 700; color: var(--ink);
    width: 30px; height: 30px; border-radius: 50%; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.wp-day.active .wp-dow[b-q4le796zgx] { color: var(--ink); }
.wp-day.active .wp-date[b-q4le796zgx] { background: var(--brand); color: #fff; } /* aktiver Tag = Coral Orange (aktive Auswahl, Bediener 2026-06-09) */
.wp-day.active[b-q4le796zgx]::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 18px; height: 3px;
    border-radius: var(--r-pill);
    background: var(--brand-deep);
}
.wp-list[b-q4le796zgx] { display: flex; flex-direction: column; }
.wp-row[b-q4le796zgx] {
    display: grid;
    /* Mockup-5-Spalten inkl. Belegungs-Spalte (56px 10px 1fr auto 16px):
       Zeit / Punkt / Info / Kapazitaet / Chevron. */
    grid-template-columns: 56px 10px 1fr auto 16px;
    align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border);
    color: var(--text); text-decoration: none; transition: background 0.15s;
}
.wp-row:last-child[b-q4le796zgx] { border-bottom: none; }
.wp-row:hover[b-q4le796zgx] { background: var(--brand-softer); }
.wp-time[b-q4le796zgx] {
    font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.4rem;
    border-radius: var(--r-sm); text-align: center;
    font-variant-numeric: tabular-nums;
}
.wp-dot[b-q4le796zgx] { width: 9px; height: 9px; border-radius: 50%; }
.wp-info[b-q4le796zgx] { min-width: 0; }
.wp-name[b-q4le796zgx] {
    display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-sub[b-q4le796zgx] {
    display: block; font-size: 0.76rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-cap[b-q4le796zgx] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; font-weight: 600; color: var(--muted);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wp-cap svg[b-q4le796zgx] { width: 15px; height: 15px; display: block; }
.wp-chev[b-q4le796zgx] { color: var(--muted); display: inline-flex; }
.wp-chev svg[b-q4le796zgx] { width: 16px; height: 16px; display: block; }
.wp-c-training[b-q4le796zgx] { background: var(--sage-soft); color: var(--sage-deep); }
.wp-c-free[b-q4le796zgx]     { background: var(--brand-soft); color: var(--brand-deep); }
.wp-c-event[b-q4le796zgx]    { background: var(--gold-soft); color: var(--gold-deep); }
.wp-dot.wp-c-training[b-q4le796zgx] { background: var(--sage-deep); }
.wp-dot.wp-c-free[b-q4le796zgx]     { background: var(--brand-deep); }
.wp-dot.wp-c-event[b-q4le796zgx]    { background: var(--gold-deep); }
.wp-empty[b-q4le796zgx] {
    padding: 2rem 1.1rem; text-align: center;
    color: var(--muted); font-size: 0.85rem;
}
.tile-link svg[b-q4le796zgx] { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.tile-loading[b-q4le796zgx] { padding: 0.7rem 1.1rem; color: var(--muted); }

/* Aktionszeile unten im Vereine-Tile ("+ Verein erstellen") */
.tile-actions[b-q4le796zgx] {
    padding: 0.7rem 1.1rem 0.8rem;
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
}

/* Hinweiszeile unter den max. 3 Hero-Cards (weitere Anmeldungen) */
.upcoming-more[b-q4le796zgx] {
    margin: -0.9rem 0 1.5rem;
    font-size: 0.85rem; color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   Benachrichtigungen-Kachel (.nz-*) — ersetzt die fruehere Meine-Vereine-
   Kachel (Mockup-Screen "mein-grouvy", Z.986-1062). Die .nz-Kern-Klassen
   (.nz-row/.nz-ic/.nz-meta/.nz-title/.nz-sub/.nz-time + .pending-btn) liegen
   global in app.css (geteilt mit der Topbar-Glocke). Hier nur die tile-
   spezifischen Wrapper, die app.css nicht traegt.
   Mockup-Parity (Bediener 2026-06-16): blaetterbarer .nz-pager als reine
   HTML/CSS-Loesung (kein JS, Static-SSR-/Enhanced-Nav-sicher) — siehe Pager-
   Block unten. Eintraege ohne Foto-Backend (Member/Conversation-DTO hat
   keins) -> Initialen-/SVG-Icon. */
.nz-body[b-q4le796zgx] { display: flex; flex-direction: column; padding: 0; }
/* .nz-row als Anchor (non-join-Eintraege sind Links) erbt sonst den UA-Default
   text-decoration:underline -> der Titel wuerde unterstrichen. Mockup zeigt die
   Titel fett, NICHT unterstrichen (nur Hover-Background als dezenter Hinweis,
   getragen von .nz-row:hover in app.css). Underline hier zuruecksetzen. */
.nz-row[b-q4le796zgx] { text-decoration: none; }
.nz-row:hover[b-q4le796zgx] { text-decoration: none; }
/* nz-acts: die zwei accept/reject-Forms nebeneinander (analog Mockup-.nz-acts). */
.nz-acts[b-q4le796zgx] { display: flex; gap: 0.35rem; }
.nz-act-form[b-q4le796zgx] { display: inline-flex; margin: 0; }
.nz-act-form .pending-btn svg[b-q4le796zgx] { width: 15px; height: 15px; display: block; }

/* ════════════════════════════════════════════════════════════════════
   Gleiche Tile-Hoehe + unten buendig (Bediener 2026-06-16): .tiles-row ist
   ein Grid; .tile ist global flex/column. Damit beide Kacheln auf die Hoehe der
   hoeheren gehen, fuellt der Inhaltsbereich den Rest (flex:1). .nz dehnt sich mit,
   der .nz-pager bleibt unten (mt:auto). Wochenplan-Body fuellt analog.

   WICHTIG (Bediener 2026-06-16, verifiziert im Browser): `align-items: stretch`
   allein greift hier NICHT (die kuerzere Wochenplan-Kachel blieb bei 341px statt
   auf die 373px der Benachrichtigungen-Kachel zu gehen — Grid-Stretch wird durch
   die Flex-Column-Tiles nicht wirksam). Definite `height: 100%` gegen die
   Grid-Zeile zwingt beide Kacheln auf identische Hoehe -> Unterkanten buendig. */
.tiles-row[b-q4le796zgx] { align-items: stretch; }
.tiles-row .tile[b-q4le796zgx] { height: 100%; }
.tile-body[b-q4le796zgx] { flex: 1; }
.nz[b-q4le796zgx] { flex: 1; }

/* Hero-Card-Foot (Avatar-Stack + "Details ansehen") unten buendig ueber alle
   3 Karten — Mockup .uc-foot{margin-top:auto} (21-redesign.css Z.745). .uc ist
   global flex/column; ohne mt:auto saesse der Foot direkt unter der Meta-Zeile
   und Karten mit unterschiedlich vielen Meta-Zeilen waeren unten nicht buendig. */
.uc-foot[b-q4le796zgx] { margin-top: auto; }

/* ════════════════════════════════════════════════════════════════════
   Benachrichtigungen-Pager — REIN HTML/CSS (kein <script>, kein data-enhance):
   versteckte Radios (name="nz-pg"), eine pro Seite; die gecheckte Radio blendet
   ihre .nz-page ein. Da scoped CSS keine dynamischen nth-Regeln generieren kann,
   sind die Sichtbarkeits-Regeln 1..NzMaxPages (=10 in Dashboard.razor) fest
   ausgeschrieben. Punkte-Leiste aus <label for>-Dots zum Direktsprung.
   ════════════════════════════════════════════════════════════════════ */
.nz[b-q4le796zgx] { display: flex; flex-direction: column; }
.nz-pg-radio[b-q4le796zgx] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.nz-pages[b-q4le796zgx] { display: flex; flex-direction: column; flex: 1; }
.nz-page[b-q4le796zgx] { display: none; flex-direction: column; }
/* Erste Seite per Default sichtbar, solange keine andere Radio gecheckt ist
   wuerde ohne diese Regel nichts angezeigt; die 1..10-Regeln unten greifen,
   weil immer genau eine Radio checked ist (p==0 im Markup). */
.nz-pg-radio:nth-of-type(1):checked  ~ .nz-pages > .nz-page:nth-of-type(1)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(2):checked  ~ .nz-pages > .nz-page:nth-of-type(2)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(3):checked  ~ .nz-pages > .nz-page:nth-of-type(3)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(4):checked  ~ .nz-pages > .nz-page:nth-of-type(4)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(5):checked  ~ .nz-pages > .nz-page:nth-of-type(5)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(6):checked  ~ .nz-pages > .nz-page:nth-of-type(6)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(7):checked  ~ .nz-pages > .nz-page:nth-of-type(7)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(8):checked  ~ .nz-pages > .nz-page:nth-of-type(8)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(9):checked  ~ .nz-pages > .nz-page:nth-of-type(9)[b-q4le796zgx]  { display: flex; }
.nz-pg-radio:nth-of-type(10):checked ~ .nz-pages > .nz-page:nth-of-type(10)[b-q4le796zgx] { display: flex; }
/* Aktiver Dot: gehoert zur gecheckten Radio (gleicher nth-of-type-Index). */
/* Pager-Leiste: Dots links, .nz-nav (Zaehler + Pfeile) rechts. justify
   space-between + Mockup-Masse (Admin/index.html Z.260-278). margin-top:auto
   haelt den Pager am unteren Kachel-Rand (Bottom-Alignment). */
.nz-pager[b-q4le796zgx] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 1.2rem; border-top: 1px solid var(--border);
    margin-top: auto;
}
.nz-dots[b-q4le796zgx] { display: flex; gap: 0.35rem; align-items: center; }
.nz-dot[b-q4le796zgx] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--border-strong); cursor: pointer;
    transition: background 0.12s;
}
.nz-dot:hover[b-q4le796zgx] { background: var(--sage-soft); }
/* Aktiver Dot: gehoert zur gecheckten Radio (gleicher nth-of-type-Index).
   Mockup-Farbe --mint-deep -> live --sage-deep (Gruen). */
.nz-pg-radio:nth-of-type(1):checked  ~ .nz-pager .nz-dot:nth-of-type(1)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(2):checked  ~ .nz-pager .nz-dot:nth-of-type(2)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(3):checked  ~ .nz-pager .nz-dot:nth-of-type(3)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(4):checked  ~ .nz-pager .nz-dot:nth-of-type(4)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(5):checked  ~ .nz-pager .nz-dot:nth-of-type(5)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(6):checked  ~ .nz-pager .nz-dot:nth-of-type(6)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(7):checked  ~ .nz-pager .nz-dot:nth-of-type(7)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(8):checked  ~ .nz-pager .nz-dot:nth-of-type(8)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(9):checked  ~ .nz-pager .nz-dot:nth-of-type(9)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(10):checked ~ .nz-pager .nz-dot:nth-of-type(10)[b-q4le796zgx] {
    background: var(--sage-deep);
}

/* Rechte Pager-Seite: Zaehler "X / Y" + Prev/Next-Pfeile. Pro Seite ein
   .nz-navpage (alle default versteckt); CSS zeigt nur das der gecheckten Radio,
   sodass der Zaehler die aktuelle Seite zeigt und die Pfeile auf die Nachbarseiten
   verweisen. So bleibt der Pager rein HTML/CSS (kein JS). */
.nz-nav[b-q4le796zgx] { display: flex; align-items: center; }
.nz-navpage[b-q4le796zgx] { display: none; align-items: center; gap: 0.45rem; }
.nz-pg-radio:nth-of-type(1):checked  ~ .nz-pager .nz-navpage:nth-of-type(1)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(2):checked  ~ .nz-pager .nz-navpage:nth-of-type(2)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(3):checked  ~ .nz-pager .nz-navpage:nth-of-type(3)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(4):checked  ~ .nz-pager .nz-navpage:nth-of-type(4)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(5):checked  ~ .nz-pager .nz-navpage:nth-of-type(5)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(6):checked  ~ .nz-pager .nz-navpage:nth-of-type(6)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(7):checked  ~ .nz-pager .nz-navpage:nth-of-type(7)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(8):checked  ~ .nz-pager .nz-navpage:nth-of-type(8)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(9):checked  ~ .nz-pager .nz-navpage:nth-of-type(9)[b-q4le796zgx],
.nz-pg-radio:nth-of-type(10):checked ~ .nz-pager .nz-navpage:nth-of-type(10)[b-q4le796zgx] {
    display: inline-flex;
}
.nz-info[b-q4le796zgx] { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nz-arrow[b-q4le796zgx] {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.12s;
}
.nz-arrow:hover[b-q4le796zgx] { background: var(--sage-soft); }
.nz-arrow svg[b-q4le796zgx] { width: 14px; height: 14px; display: block; }
.nz-arrow.disabled[b-q4le796zgx] { opacity: 0.4; cursor: default; pointer-events: none; }

/* (Bediener 2026-06-15: .me-org-actions + .stat-line entfernt — die Org-Aktionszeile
   und die Stat-Zeile wurden vom /me-Screen genommen, siehe Dashboard.razor.) */
/* /Components/Pages/Discover.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Screen "entdecken" — scoped Styles (Quelle: Mockup Admin/index.html,
   <section data-screen="entdecken">, Prefix .ent-). Variablen ueber das
   §0-Token-Mapping aus docs/styling.md uebersetzt (--mint -> --brand,
   --violet -> --sage, --amber -> --gold, --coral -> --error).
   Nur semantische Tokens, Radien/Shadows ausschliesslich via var(--r-*) /
   var(--shadow-*).
   ════════════════════════════════════════════════════════════════════ */

/* Such-Hero — grosse Suche ueber die volle Breite */
.ent-hero[b-7sgwztkrzy] {
    background: linear-gradient(135deg, var(--ink) 0%, var(--indigo) 100%);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.75rem 1.7rem;
    margin-bottom: 1.4rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.ent-hero[b-7sgwztkrzy]::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    opacity: 0.32;
    pointer-events: none;
}

.ent-hero > *[b-7sgwztkrzy] { position: relative; z-index: 1; }

.ent-hero-title[b-7sgwztkrzy] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.4px;
    line-height: 1.2;
    /* h1 (A11y: Seite braucht genau eine h1) — Default-Margins resetten,
       damit der Hero optisch identisch zur frueheren div-Variante bleibt. */
    margin: 0;
}

.ent-hero-sub[b-7sgwztkrzy] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    margin-top: 0.25rem;
    margin-bottom: 1.1rem;
}

/* grosse Suchleiste (Form-GET, q-Parameter) */
.ent-search[b-7sgwztkrzy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card);
    border-radius: var(--r-pill);
    padding: 0.45rem 0.5rem 0.45rem 1.2rem;
    box-shadow: var(--shadow-sm);
    max-width: 720px;
}

.ent-search .ent-search-ic[b-7sgwztkrzy] { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.ent-search .ent-search-ic svg[b-7sgwztkrzy] { width: 20px; height: 20px; display: block; }

.ent-search input[b-7sgwztkrzy] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.98rem;
    color: var(--text);
    padding: 0.35rem 0;
}

.ent-search input[b-7sgwztkrzy]::placeholder { color: var(--muted); }
.ent-search .btn-pill[b-7sgwztkrzy] { padding: 0.55rem 1.3rem; }

/* Divider + Orts-/PLZ-Box in der Suchleiste (Mockup .ent-search-divider/.ent-loc) */
.ent-search .ent-search-divider[b-7sgwztkrzy] {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0.2rem 0;
}
.ent-search .ent-loc[b-7sgwztkrzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.88rem;
    white-space: nowrap;
    padding: 0 0.3rem;
}
.ent-search .ent-loc svg[b-7sgwztkrzy] { width: 16px; height: 16px; display: block; color: var(--brand-deep); }
.ent-search .ent-loc input[b-7sgwztkrzy] {
    width: 120px;
    flex: 0 0 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.92rem;
    color: var(--text);
    padding: 0.35rem 0;
}
.ent-search .ent-loc input[b-7sgwztkrzy]::placeholder { color: var(--muted); }

/* Such-Form: umschliesst Hero (mit Suchleiste) + Filterzeile darunter.
   Hero traegt die Untermarge selbst, kein Form-Gap noetig. */
.ent-search-form[b-7sgwztkrzy] { display: block; }

/* Filterzeile (Mockup .ent-filters): Label + Chips auf hellem Seitengrund */
.ent-filters[b-7sgwztkrzy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.6rem;
}
.ent-filter-label[b-7sgwztkrzy] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 0.2rem;
}

/* Chip (Mockup .ent-chip) — umschliesst ein natives <select>, das als
   Chip-Steuerung gestylt ist. Funktion bleibt: onchange submittet die Form. */
.ent-chip[b-7sgwztkrzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--card);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ink);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    cursor: pointer;
}
.ent-chip:hover[b-7sgwztkrzy] { background: var(--brand-softer); border-color: var(--brand-deep); }
.ent-chip svg[b-7sgwztkrzy] { width: 13px; height: 13px; display: block; flex-shrink: 0; }
/* Das native Select randlos in den Chip einbetten (Pfeil ueber .ent-chip-caret) */
.ent-chip select[b-7sgwztkrzy] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.ent-chip select option[b-7sgwztkrzy] { color: var(--text); }
.ent-chip .ent-chip-caret[b-7sgwztkrzy] { font-size: 0.65rem; opacity: 0.6; flex-shrink: 0; }

/* Aktiver Chip = Brand-gefuellt (Auswahl getroffen) */
.ent-chip.active[b-7sgwztkrzy] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.ent-chip.active:hover[b-7sgwztkrzy] { background: var(--brand-deep); border-color: var(--brand-deep); }
.ent-chip.active select option[b-7sgwztkrzy] { color: var(--text); }

/* Angebotstyp-Pill: kategorie-farbiger Dot (Mockup .ent-chip-dot).
   Farbe inline via style="background: var(--token)" gesetzt. */
.ent-chip-dot[b-7sgwztkrzy] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Rein optische Chips (Angebotstyp + "Nur freie Plaetze"-Toggle): kein
   submittender Filter, daher kein Pointer-Cursor / kein Brand-Hover. Backend-GAP
   — siehe Kommentar in Discover.razor (kein OfferingType-/Seat-Aggregat). */
.ent-chip-static[b-7sgwztkrzy] {
    cursor: default;
}
.ent-chip-static:hover[b-7sgwztkrzy] {
    background: var(--card);
    border-color: var(--border-strong);
}

/* "Nur freie Plaetze"-Toggle in der Mockup-Aktiv-Optik (Sage = positiver
   Filter; Mockup-Legacy --violet-soft/--violet-deep -> --sage-soft/--sage-deep). */
.ent-chip-static.ent-toggle[b-7sgwztkrzy] {
    background: var(--sage-soft);
    border-color: var(--sage-deep);
    color: var(--sage-deep);
}
.ent-chip-static.ent-toggle:hover[b-7sgwztkrzy] {
    background: var(--sage-soft);
    border-color: var(--sage-deep);
}

/* Reset-Chip rechts (Mockup: gemutet, Hover Error-Deep) */
.ent-chip-reset[b-7sgwztkrzy] {
    color: var(--muted);
    font-weight: 600;
    margin-left: auto;
    font-size: 0.8rem;
    text-decoration: none;
}
.ent-chip-reset:hover[b-7sgwztkrzy] { color: var(--error-deep); }

/* Sport-/Tanzrichtung-Tags auf den Karten (Mockup .ent-org-tag) */
.ent-org-tags[b-7sgwztkrzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 1.2rem 0.85rem;
}
.ent-org-tag[b-7sgwztkrzy] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-alt);
    border-radius: var(--r-pill);
    padding: 0.16rem 0.55rem;
    white-space: nowrap;
}

/* Distanzangabe inline in der Ortszeile (nur bei aktivem Umkreisfilter) */
.ent-org-dist[b-7sgwztkrzy] {
    font-variant-numeric: tabular-nums;
}

/* Vereins-Karten-Grid */
.ent-org-grid[b-7sgwztkrzy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.ent-org-card[b-7sgwztkrzy] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.12s ease-out, box-shadow 0.15s;
}

.ent-org-card:hover[b-7sgwztkrzy] { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.ent-org-head[b-7sgwztkrzy] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 1.2rem 0.85rem;
}

/* Logo-Box: <img> bei vorhandener LogoUrl, sonst Initialen auf Brand-Soft */
.ent-org-logo[b-7sgwztkrzy] {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    flex-shrink: 0;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    overflow: hidden;
}

.ent-org-logo img[b-7sgwztkrzy] { width: 100%; height: 100%; object-fit: cover; display: block; }

.ent-org-id[b-7sgwztkrzy] { min-width: 0; flex: 1; }

.ent-org-name[b-7sgwztkrzy] {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.ent-org-name a[b-7sgwztkrzy] { color: inherit; text-decoration: none; }
.ent-org-name a:hover[b-7sgwztkrzy] { color: var(--brand-deep); }

.ent-org-loc[b-7sgwztkrzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

.ent-org-loc svg[b-7sgwztkrzy] { width: 13px; height: 13px; display: block; }

/* Typ-Badge (Verein/Verband = Aubergine, Studio = Gold, Gruppe = Sage) */
.ent-type-badge[b-7sgwztkrzy] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: var(--r-pill);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--aubergine-soft);
    color: var(--aubergine-deep);
    white-space: nowrap;
}

.ent-type-badge.studio[b-7sgwztkrzy] { background: var(--gold-soft); color: var(--gold-deep); }
.ent-type-badge.group[b-7sgwztkrzy] { background: var(--sage-soft); color: var(--sage-deep); }

.ent-org-desc[b-7sgwztkrzy] {
    padding: 0 1.2rem 0.6rem;
    font-size: 0.84rem;
    color: var(--text);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ent-org-foot[b-7sgwztkrzy] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.2rem 1.1rem;
    margin-top: auto;
}

.ent-org-foot .btn-pill[b-7sgwztkrzy],
.ent-org-foot .ent-btn-outline[b-7sgwztkrzy] {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* Outline-Button auf hellem Grund (.btn-pill.outline ist fuer Foto-Karten
   ausgelegt). Mockup .ent-btn-outline: heller Grund, warme Border. */
.ent-btn-outline[b-7sgwztkrzy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ent-btn-outline:hover[b-7sgwztkrzy] { background: var(--bg-alt); color: var(--ink); }

@media (max-width: 1100px) {
    .ent-org-grid[b-7sgwztkrzy] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Angebotstyp-Chips als echte GET-Filter (T-DISC-OFFERINGS) ──────────
   Frueher rein optisch (.ent-chip-static). Jetzt <a role="button">; aktiver
   Zustand ueber .active (Brand-gefuellt, wie die Select-Chips). Der Dot
   behaelt seine Kategorie-Farbe; im aktiven (Brand-)Zustand wird er hell. */
.ent-chip-type[b-7sgwztkrzy] { text-decoration: none; }
.ent-chip-type.active .ent-chip-dot[b-7sgwztkrzy] { background: #fff !important; }

/* "Nur freie Plaetze"-Toggle: inaktiv neutraler Chip, aktiv Sage-gefuellt
   (positiver Filter, Mockup-Ton). */
.ent-toggle.active[b-7sgwztkrzy] {
    background: var(--sage-deep);
    border-color: var(--sage-deep);
    color: #fff;
}
.ent-toggle.active:hover[b-7sgwztkrzy] { background: var(--sage-deep); border-color: var(--sage-deep); }

/* ── Offene Kurse & Veranstaltungen — Angebots-Karten (.uc reuse) ───────
   Die .uc-Hero-Cards kommen global aus app.css (Kategorie-Toene training/
   free/event). Hier nur die Ergaenzungen fuer die Discover-Angebote:
   Kurs-Ton (.uc.course, kein globaler Variant), Org-/Titel-Links,
   "freie Plaetze"-Hinweis im Footer. */
.uc.course[b-7sgwztkrzy] {
    background: linear-gradient(90deg, rgba(255,244,216,1) 0%, rgba(255,244,216,1) 52%, rgba(255,244,216,0.55) 72%, rgba(255,244,216,0) 96%), var(--card);
}
.uc.course .uc-tag[b-7sgwztkrzy] { background: var(--gold-deep); }

.uc .uc-title a[b-7sgwztkrzy] { color: inherit; text-decoration: none; }
.uc .uc-title a:hover[b-7sgwztkrzy] { color: var(--brand-deep); }

.uc-org-link[b-7sgwztkrzy] { color: var(--muted); text-decoration: none; font-weight: 600; }
.uc-org-link:hover[b-7sgwztkrzy] { color: var(--brand-deep); }

/* Verfuegbarkeits-Hinweis im Footer (HasFreePlaces). */
.uc-places[b-7sgwztkrzy] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    letter-spacing: 0.3px;
}
.uc-places.free[b-7sgwztkrzy] { background: var(--sage-soft); color: var(--sage-deep); }
.uc-places.full[b-7sgwztkrzy] { background: var(--bg-alt); color: var(--muted); }

/* "Mehr anzeigen"-Pager (skip-basiert), zentriert unter dem Grid. */
.upcoming-more[b-7sgwztkrzy] {
    text-align: center;
    margin: -0.6rem 0 1.75rem;
}

@media (max-width: 980px) {
    .ent-org-grid[b-7sgwztkrzy] { grid-template-columns: 1fr; }
    .ent-search[b-7sgwztkrzy] { flex-wrap: wrap; border-radius: var(--r-lg); }
    /* Divider raus (Mockup); die Orts-/PLZ-Box bleibt funktional erhalten und
       umbricht in eine eigene Zeile (Abweichung zum reinen Demo-Mockup, das die
       Box hier ausblendet — wir behalten das Umkreis-Eingabefeld bedienbar). */
    .ent-search .ent-search-divider[b-7sgwztkrzy] { display: none; }
    .ent-search .ent-loc[b-7sgwztkrzy] { width: 100%; }
    .ent-search .ent-loc input[b-7sgwztkrzy] { flex: 1; width: auto; }
}
/* /Components/Pages/Messages.razor.rz.scp.css */
/* Nachrichten — zweispaltiges Postfach (Mockup-Screen "nachrichten",
   .nac-* aus designvorschlaege/21-redesign-final-mockup/Admin/index.html,
   uebertragen als .msg-* mit styling.md-§0-Token-Mapping: --mint->--brand,
   --mint-soft->--brand-soft, --mint-softer->--brand-softer,
   --mint-deep->--brand-deep. STRIKT Mockup-Optik (Bediener 2026-06-14):
   Akzente/Unread-Badge in Brand (== Mockup --mint), Compose mit rundem
   Senden-Button + Anhang. */

.msg-wrap[b-w96beti9zj] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 600px;
}

/* ── Linke Spalte: Konversationsliste ─────────────────────────────── */
.msg-list[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    min-width: 0;
}

.msg-list-head[b-w96beti9zj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: 1px solid var(--border);
}

.msg-list-title[b-w96beti9zj] {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
}

.msg-new[b-w96beti9zj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.msg-new:hover[b-w96beti9zj] {
    background: var(--brand-deep);
}

.msg-new svg[b-w96beti9zj] {
    width: 17px;
    height: 17px;
    display: block;
}

/* Such-Box (Mockup .nac-search): Static-SSR-Query-Filter. Self-contained,
   damit die Page nicht von der globalen .search-box in app.css abhaengt. */
.msg-search[b-w96beti9zj] {
    position: relative;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

.msg-search input[b-w96beti9zj] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    padding: 0.5rem 2.4rem 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.msg-search input[b-w96beti9zj]::placeholder {
    color: var(--muted);
}

.msg-search input:focus[b-w96beti9zj] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}

.msg-search-icon[b-w96beti9zj] {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.msg-search-icon svg[b-w96beti9zj] {
    width: 16px;
    height: 16px;
    display: block;
}

.msg-convos[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.msg-empty[b-w96beti9zj] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.86rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: center;
}

.msg-convo[b-w96beti9zj] {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    text-align: left;
    text-decoration: none;
}

.msg-convo:hover[b-w96beti9zj] {
    background: var(--brand-softer);
}

.msg-convo.active[b-w96beti9zj] {
    background: var(--brand-softer);
}

.msg-convo.active[b-w96beti9zj]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 3px;
    background: var(--brand-deep);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.msg-av[b-w96beti9zj] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.msg-cmeta[b-w96beti9zj] {
    min-width: 0;
}

.msg-crow[b-w96beti9zj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
}

.msg-cname[b-w96beti9zj] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-convo.unread .msg-cname[b-w96beti9zj] {
    font-weight: 800;
}

.msg-ctime[b-w96beti9zj] {
    font-size: 0.7rem;
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.msg-convo.unread .msg-ctime[b-w96beti9zj] {
    color: var(--brand-deep);
    font-weight: 700;
}

.msg-csnip[b-w96beti9zj] {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.msg-convo.unread .msg-csnip[b-w96beti9zj] {
    color: var(--text);
    font-weight: 600;
}

.msg-cright[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    align-self: stretch;
    padding-top: 0.15rem;
}

/* Unread-Badge in Brand (strikt Mockup-Optik: Mockup .nac-unread-dot = --mint
   -> --brand). Bediener-Entscheid "strikt Mockup-Optik" 2026-06-14. */
.msg-unread-dot[b-w96beti9zj] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Rechte Spalte: Thread / Neue Nachricht ───────────────────────── */
.msg-thread[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.msg-thread-head[b-w96beti9zj] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.msg-thread-head .msg-av[b-w96beti9zj] {
    width: 40px;
    height: 40px;
}

.msg-th-name[b-w96beti9zj] {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
}

/* Name + Untertitel (Rolle · Org) gestapelt — Mockup-Struktur.
   Untertitel-Slot (.msg-th-sub) vorbereitet fuer kuenftiges DTO-Feld. */
.msg-th-id[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msg-th-sub[b-w96beti9zj] {
    font-size: 0.74rem;
    color: var(--muted);
}

/* Thread-Kopf-Aktionen (Mockup .nac-th-actions / .nac-icon-btn).
   Strikt Mockup-Optik: klickbar gerendert (Mockup-Buttons sind dekorativ).
   Hover/Akzent in Brand (Mockup .nac-icon-btn:hover = --mint-softer). */
.msg-th-actions[b-w96beti9zj] {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
}

.msg-icon-btn[b-w96beti9zj] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.msg-icon-btn:hover[b-w96beti9zj] {
    background: var(--brand-softer);
}

.msg-icon-btn svg[b-w96beti9zj] {
    width: 17px;
    height: 17px;
    display: block;
}

/* Zurueck-Pfeil: nur mobil sichtbar (Desktop hat beide Spalten) */
.msg-back[b-w96beti9zj] {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

.msg-back:hover[b-w96beti9zj] {
    background: var(--brand-softer);
}

.msg-back svg[b-w96beti9zj] {
    width: 17px;
    height: 17px;
    display: block;
}

.msg-body[b-w96beti9zj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem;
    overflow-y: auto;
}

.msg-daysep[b-w96beti9zj] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.5rem 0;
}

.msg-daysep[b-w96beti9zj]::before,
.msg-daysep[b-w96beti9zj]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.msg-daysep span[b-w96beti9zj] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-msg[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    max-width: 74%;
}

.msg-msg.out[b-w96beti9zj] {
    align-self: flex-end;
    align-items: flex-end;
}

.msg-msg.in[b-w96beti9zj] {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-bubble[b-w96beti9zj] {
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-lg);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg-msg.in .msg-bubble[b-w96beti9zj] {
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom-left-radius: var(--r-sm);
}

.msg-msg.out .msg-bubble[b-w96beti9zj] {
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-bottom-right-radius: var(--r-sm);
}

.msg-stamp[b-w96beti9zj] {
    font-size: 0.66rem;
    color: var(--muted);
    margin-top: 0.2rem;
    padding: 0 0.2rem;
}

/* ── Eingabezeile (Form-Post, Mockup .nac-compose) ────────────────── */
.msg-compose[b-w96beti9zj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--card);
}

/* Anhang-Button (Mockup .nac-attach). Dekorativ/disabled — kein Upload. */
.msg-attach[b-w96beti9zj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.msg-attach:hover:not(:disabled)[b-w96beti9zj] {
    background: var(--brand-softer);
    color: var(--ink);
}

.msg-attach:disabled[b-w96beti9zj] {
    cursor: default;
}

.msg-attach svg[b-w96beti9zj] {
    width: 18px;
    height: 18px;
    display: block;
}

/* Pill-Input single-line (Mockup .nac-input). */
.msg-input[b-w96beti9zj] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--bg);
    font-family: inherit;
}

.msg-input[b-w96beti9zj]::placeholder {
    color: var(--muted);
}

.msg-input:focus[b-w96beti9zj] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}

/* Runder Senden-Button mit Pfeil-SVG (Mockup .nac-send = --mint -> --brand). */
.msg-send[b-w96beti9zj] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.msg-send:hover[b-w96beti9zj] {
    background: var(--brand-deep);
}

.msg-send svg[b-w96beti9zj] {
    width: 19px;
    height: 19px;
    display: block;
}

/* ── Neue Nachricht (Empfaenger-Select + Textarea) ────────────────── */
.msg-newform[b-w96beti9zj] {
    flex: 1;
    padding: 1.1rem 1.2rem;
}

.msg-startform[b-w96beti9zj] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 560px;
}

.msg-startform label[b-w96beti9zj] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 0.5rem;
}

.msg-startform select[b-w96beti9zj],
.msg-startform textarea[b-w96beti9zj] {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--card);
    font-family: inherit;
}

.msg-startform textarea[b-w96beti9zj] {
    resize: vertical;
}

.msg-formactions[b-w96beti9zj] {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.8rem;
}

.msg-placeholder[b-w96beti9zj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem 1.5rem;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: center;
}

/* ── Mobile: EINE Spalte — Liste ODER Thread ──────────────────────── */
@media (max-width: 860px) {
    .msg-wrap[b-w96beti9zj] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .msg-list[b-w96beti9zj] {
        border-right: none;
    }

    /* Default: nur die Liste; mit geoeffnetem Thread/Form: nur rechts. */
    .msg-thread[b-w96beti9zj] {
        display: none;
    }

    .msg-wrap.thread-open .msg-list[b-w96beti9zj] {
        display: none;
    }

    .msg-wrap.thread-open .msg-thread[b-w96beti9zj] {
        display: flex;
        min-height: 70vh;
    }

    .msg-back[b-w96beti9zj] {
        display: inline-flex;
    }
}
/* /Components/Pages/MyCalendar.razor.rz.scp.css */
/* MyCalendar.razor.css — Redesign Welle 4 (2026-06-13, Mockup "kalender-p").
   Nur semantische Tokens (docs/styling.md §0/§2). Token-Mapping aus dem Mockup
   angewandt: --mint* -> --brand*, --violet-deep -> --sage-deep, --coral* -> --error*.

   FullCalendar rendert in den Page-DOM OHNE den b-<hash>-Scope-Marker, den
   die CSS-Isolation an die eigenen Elemente dieser Component haengt. Deshalb
   greifen .fc-Selektoren nur via ::deep (am gescopeten Wrapper #my-calendar). */

/* ── Legende: Karten-Leiste analog Mockup .mkal-legend ── */
.mkal-legend[b-52ivoqaqg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.mkal-legend legend[b-52ivoqaqg4] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    padding: 0;
    float: left;
    margin-right: 0.4rem;
}
.mkal-leg[b-52ivoqaqg4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text);
}
/* Legende-Eintraege als klickbare Filter-Toggles (2026-06-18, single-isolate):
   <button>-Reset auf die span-Optik. .mkal-leg-active = dieser Filter ist aktiv
   (Typ isoliert ODER Mine-only an) — hervorgehoben statt ausgegraut, weil der
   aktive Toggle jetzt die ZEIGE-Auswahl ist. Default (kein Filter) = neutral. */
button.mkal-leg-toggle[b-52ivoqaqg4] {
    background: none;
    border: none;
    padding: 0.15rem 0.4rem;
    margin: 0;
    font: inherit;
    cursor: pointer;
    border-radius: var(--r-sm);
}
button.mkal-leg-toggle:hover[b-52ivoqaqg4] { color: var(--ink); }
button.mkal-leg-toggle:focus-visible[b-52ivoqaqg4] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.mkal-leg-active[b-52ivoqaqg4] {
    background: var(--brand-softer);
    color: var(--ink);
    font-weight: 700;
}
.mkal-leg-dot[b-52ivoqaqg4] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}
/* Kategorie-Farbschema (2026-06-16, konsistent zu /me-Hero-Cards): Training=
   Sage(--sage/gruen), Veranstaltung=Gold(--gold), Freies Training=Coral(--brand).
   Lesbares Schema — das dunkle Aubergine fuer Events ist bewusst entfernt (Text war
   unlesbar). Semantische Tokens, kein Hex. Die farbliche Abstimmung Legende<->Bloecke
   wird im MyEnrollmentsController gepflegt (separater Agent/Task). */
.mkal-c-training[b-52ivoqaqg4] { background: var(--sage); }
.mkal-c-event[b-52ivoqaqg4] { background: var(--gold); }
.mkal-c-free[b-52ivoqaqg4] { background: var(--brand); }
/* "Kurs" ist eine eigene Feed-Kategorie (Trainings mit IsCourse=true) und nutzt das
   dezent abgesetzte dunklere Sage (--sage-deep) — gleiche Gruen-Familie wie Training,
   aber als eigene Kategorie unterscheidbar. */
.mkal-c-course[b-52ivoqaqg4] { background: var(--sage-deep); }

/* Stern-Glyph in der Legende ("von mir geleitet"-Toggle) — gleiches Symbol wie an
   den Events (fc-event-mine-star). Ersetzt den frueheren gestrichelten Ring-Dot. */
.mkal-leg-star[b-52ivoqaqg4] {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
/* Mockup setzt das Trainer-Item per inline margin-left:auto ans Zeilenende
   (Mockup Z.5873). Hier als Klasse statt Inline-Style. */
.mkal-leg-end[b-52ivoqaqg4] { margin-left: auto; }

/* ── Kalender-Karte (umschliesst FullCalendar) analog Mockup .mkal-cal ── */
.mkal-cal[b-52ivoqaqg4] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 1rem;
}
.calendar-loading[b-52ivoqaqg4] {
    display: none;
    text-align: center;
    padding: 1rem;
    color: var(--muted);
}

/* ── FullCalendar-Chrome auf Ritmano-Tokens via FC-v6-CSS-Variablen ──
   neutrale weisse Buttons (Mockup-Toolbar-Optik), aktive Ansicht in
   Soft-Peach, Heute-Spalte in --brand-softer, warme Gitterlinien. */
#my-calendar[b-52ivoqaqg4] {
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--card);
    --fc-neutral-bg-color: var(--bg-alt);
    --fc-today-bg-color: var(--brand-softer);
    --fc-button-text-color: var(--ink);
    --fc-button-bg-color: var(--card);
    --fc-button-border-color: var(--border-strong);
    --fc-button-hover-bg-color: var(--brand-softer);
    --fc-button-hover-border-color: var(--border-strong);
    --fc-button-active-bg-color: var(--brand-soft);
    --fc-button-active-border-color: var(--border-strong);
    --fc-list-event-hover-bg-color: var(--brand-softer);
}
[b-52ivoqaqg4] .fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.2px;
}
/* Toolbar-Buttons dezenter (kleineres Padding/Schriftgrad statt FC-Default-Groesse). */
[b-52ivoqaqg4] .fc .fc-button {
    font-weight: 600;
    border-radius: var(--r-md);
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.2;
}
/* Keine Unterstreichungen auf Buttons/Links im Kalender-Chrome. */
[b-52ivoqaqg4] .fc .fc-button,
[b-52ivoqaqg4] .fc a {
    text-decoration: none;
}
[b-52ivoqaqg4] .fc .fc-button-primary:not(:disabled).fc-button-active {
    color: var(--brand-deeper);
}
[b-52ivoqaqg4] .fc .fc-today-button:disabled { opacity: 0.5; }
[b-52ivoqaqg4] .fc .fc-col-header-cell-cushion,
[b-52ivoqaqg4] .fc .fc-list-day-text,
[b-52ivoqaqg4] .fc .fc-list-day-side-text { color: var(--ink); }
[b-52ivoqaqg4] .fc-event {
    cursor: pointer;
    border: none;
    padding: 1px 4px;
    font-size: 0.8rem;
    border-radius: var(--r-sm);
}
/* "Von mir geleitet" (Trainer): nur Stern vor dem Titel, KEINE Umrandung mehr
   (T-STAR-LEGEND 2026-06-18 — outline entfernt, der Stern allein markiert eigene
   Termine). Events rendern ausserhalb des CSS-Isolation-Scopes -> ::deep. */
[b-52ivoqaqg4] .fc-event-mine {
    font-weight: 700;
}
[b-52ivoqaqg4] .fc-event-mine-star { font-weight: 700; }

/* T-PAST-STYLE (2026-06-18): vergangene Termine dezent grau/zurueckgenommen.
   Reduzierte Deckkraft + entsaettigt; Termin bleibt klickbar (kein
   pointer-events:none). Die Klasse setzt das eventDidMount-Interop, sie
   ist unabhaengig vom Typ-/Mine-Filter (der ueber display laeuft). */
[b-52ivoqaqg4] .fc-event-past {
    opacity: 0.5;
    filter: grayscale(0.6);
}
[b-52ivoqaqg4] .fc-event-past:hover { opacity: 0.8; }

@media (max-width: 980px) {
    .mkal-cal[b-52ivoqaqg4] { padding: 0.6rem; }
}
/* /Components/Pages/MyNotifications.razor.rz.scp.css */
/* Page-spezifischer Pager fuer die Benachrichtigungs-Vollseite.
   Layout-only: zentriert "Seite X / Y" zwischen Zurueck/Weiter, die selbst die
   globalen .btn-pill-/.section-link-Klassen aus app.css tragen. Leere <span>
   halten als Platzhalter das Grid-Layout, wenn ein Pfeil fehlt (erste/letzte Seite). */
.mn-pager[b-xfn6w9auna] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

/* Zurueck linksbuendig, Weiter rechtsbuendig, Mitte (Seitenanzeige) zentriert. */
.mn-pager > :first-child[b-xfn6w9auna] { justify-self: start; }
.mn-pager > :last-child[b-xfn6w9auna] { justify-self: end; }
.mn-pager > .section-link[b-xfn6w9auna] { justify-self: center; }
/* /Components/Pages/MyOrganisations.razor.rz.scp.css */
/* MyOrganisations (/me/organisations) — screen-spezifische Klassen fuer den
   Mockup-Screen "organisationen" (Admin/index.html, .morg-*). Token-Mapping
   gemaess styling.md §0: ausschliesslich semantische Tokens
   (--brand/--sage/--gold/--error/--aubergine/--ink/...), keine Mockup-Namen
   (--mint/--coral/--violet/--amber).

   Strikt-Mockup-Optik (Bediener-Entscheid 2026-06): Markup/Klassen/Farben
   1:1 am Mockup ausgerichtet, soweit ohne Verlust funktionaler Bindings und
   ohne styling.md-NoGo moeglich.

   Verbleibende Abweichungen (GAP = echtes Backend fehlt; sonst NoGo-bedingt):
   - .morg-card.active / .morg-active-pill / .morg-current-btn SIND umgesetzt:
     aktive Org = erste verwaltete Org (analog MainLayout.ResolveActiveOrg),
     "Wechseln zu" navigiert auf /admin/{OrgId}. Mockup-Aktiv-Pill/Current-Btn
     nutzen violet-soft/-deep -> §0-Mapping sage-soft/-deep.
   - GAP keine .morg-stats / .morg-since (keine Kennzahlen/Beitrittsdatum im DTO;
     MyOrganisationDto hat weder Trainings-/Anmelde-/Mitglieder-Zahlen noch ein
     Beitrittsdatum). Echtes Backend fehlt -> nicht erfunden. Mockup-SOLL.
   - b-admin: Mockup nutzt coral-soft/-deep -> mapped error-soft/-deep; bewusst
     auf Aubergine-Soft belassen, weil styling.md NoGo #5 Error-Rot fuer
     Rollen-/Brand-Akzente verbietet (Error strikt = Fehler). b-trainer +
     b-member sind 1:1 aufs Mockup-Mapping gezogen (gold bzw. brand-softer).
   - zusaetzliche .morg-status-pill (Pending = Gold-Soft, Rejected = Error-Soft)
     an der Position der Mockup-"Aktiv"-Pill (App-spezifischer ApprovalStatus). */

/* ── Section-Header Count-Suffix (Mockup: inline span im h2) ── */
.morg-count-suffix[b-4kh396823x] { font-weight: 600; color: var(--muted); font-size: 0.85rem; }

/* ── Multi-Org-Prinzip-Hinweis ── */
.morg-intro[b-4kh396823x] {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.95rem 1.15rem; margin: 0.2rem 0 1.4rem;
    background: var(--brand-softer); border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.morg-intro-ic[b-4kh396823x] {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); color: var(--brand-deep);
    box-shadow: var(--shadow-xs);
}
.morg-intro-ic svg[b-4kh396823x] { width: 19px; height: 19px; display: block; }
.morg-intro-txt[b-4kh396823x] { min-width: 0; }
.morg-intro-title[b-4kh396823x] {
    display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink);
    margin-bottom: 0.15rem;
}
.morg-intro-sub[b-4kh396823x] {
    display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.5;
}

/* ── Karten-Grid ── */
.morg-grid[b-4kh396823x] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.1rem;
}

.morg-card[b-4kh396823x] {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s;
}
.morg-card:hover[b-4kh396823x] { box-shadow: var(--shadow-md); }
/* aktive Org: kraeftigerer Rahmen + Coral-Akzent-Leiste oben (Mockup:
   --mint/--mint-deep -> §0-Mapping --brand/--brand-deep). */
.morg-card.active[b-4kh396823x] { border-color: var(--brand); }
.morg-card.active[b-4kh396823x]::before {
    content: ''; display: block; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

.morg-head[b-4kh396823x] {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1.05rem 1.15rem 0.85rem;
}
/* Initialen-Variante (kein Logo-Feld im DTO) — Optik analog Mockup-Fallback. */
.morg-logo[b-4kh396823x] {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--r-md);
    background-color: var(--brand-soft); color: var(--brand-deep);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0.5px;
    overflow: hidden;
}
.morg-logo img[b-4kh396823x] { width: 100%; height: 100%; object-fit: cover; display: block; }
.morg-head-meta[b-4kh396823x] { min-width: 0; flex: 1; }
.morg-name[b-4kh396823x] {
    display: block; font-size: 1rem; font-weight: 700; color: var(--ink);
    line-height: 1.25;
}
.morg-place[b-4kh396823x] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem;
}
.morg-place svg[b-4kh396823x] { width: 13px; height: 13px; display: block; }

/* ── Status-Pill rechts oben (ApprovalStatus != Approved) ── */
.morg-status-pill[b-4kh396823x] {
    align-self: flex-start; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 0.25rem 0.55rem;
    border-radius: var(--r-pill);
}
.morg-status-pill .dot[b-4kh396823x] {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.morg-status-pill.pending[b-4kh396823x]  { background: var(--gold-soft);  color: var(--gold-deep); }
.morg-status-pill.rejected[b-4kh396823x] { background: var(--error-soft); color: var(--error-deep); }

/* ── "Aktiv"-Pill rechts oben (Mockup: violet-soft/-deep -> §0-Mapping sage,
   Dot in --sage = positiv/Community). ── */
.morg-active-pill[b-4kh396823x] {
    align-self: flex-start; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 0.25rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--sage-soft); color: var(--sage-deep);
}
.morg-active-pill .dot[b-4kh396823x] {
    width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}

/* ── Rollen-Badges ── */
.morg-roles[b-4kh396823x] {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0 1.15rem 0.85rem;
}
.morg-badge[b-4kh396823x] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.6rem;
    border-radius: var(--r-pill);
}
.morg-badge svg[b-4kh396823x] { width: 12px; height: 12px; display: block; }
/* Mockup b-admin = coral-soft/-deep -> error; NoGo #5: stattdessen Aubergine.
   b-trainer = amber-soft/-deep -> gold; b-member = mint-softer/mint-deep -> brand. */
.morg-badge.b-admin[b-4kh396823x]   { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.morg-badge.b-trainer[b-4kh396823x] { background: var(--gold-soft);      color: var(--gold-deep); }
.morg-badge.b-member[b-4kh396823x]  { background: var(--brand-softer);   color: var(--brand-deep); }

/* ── Aktionen-Fuss ── */
.morg-acts[b-4kh396823x] {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: auto; padding: 0.85rem 1.15rem 1.05rem;
    border-top: 1px solid var(--border);
}
.morg-acts .grow[b-4kh396823x] { flex: 1; justify-content: center; }
/* .btn-sm-pill.outline ist in app.css nur unter .uc gestylt — hier lokal
   identisch nachgezogen (weiss gefuellt, --border-strong). */
.morg-acts .btn-sm-pill.outline[b-4kh396823x] { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.morg-acts .btn-sm-pill.outline:hover[b-4kh396823x] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Verlassen = destruktiv -> Error-Toene (Mockup: coral-soft/-deep, §0-Mapping). */
.morg-leave[b-4kh396823x] {
    background: none; border: none; padding: 0.5rem;
    color: var(--muted); border-radius: var(--r-sm);
    display: inline-flex; align-items: center; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.morg-leave:hover[b-4kh396823x] { background: var(--error-soft); color: var(--error-deep); }
.morg-leave svg[b-4kh396823x] { width: 16px; height: 16px; display: block; }

/* "Aktiver Verein"-Zustand (disabled, nicht klickbar) — Mockup: violet-soft/-deep
   -> §0-Mapping sage. Belegt im Fuss den Primary-Slot der aktiven Org. */
.morg-current-btn[b-4kh396823x] {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    padding: 0.55rem 1rem; border-radius: var(--r-pill);
    font-size: 0.82rem; font-weight: 700;
    background: var(--sage-soft); color: var(--sage-deep);
    border: 1px solid transparent; cursor: default;
}
.morg-current-btn svg[b-4kh396823x] { width: 15px; height: 15px; display: block; }

/* ── Grosse "Beitreten oder gruenden"-Aktion (gestrichelte Karte) ── */
.morg-add[b-4kh396823x] {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 1rem;
    margin-top: 0.4rem; padding: 1.15rem 1.35rem;
    background: var(--card); border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-lg);
}
.morg-add-ic[b-4kh396823x] {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.morg-add-ic svg[b-4kh396823x] { width: 22px; height: 22px; display: block; }
.morg-add-txt[b-4kh396823x] { flex: 1; min-width: 0; }
.morg-add-title[b-4kh396823x] { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.morg-add-sub[b-4kh396823x] { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.morg-add-btns[b-4kh396823x] { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Verlassen-Dialog (Muster Dashboard.razor.css, scoped dort — hier
   identisch; Radius/Schatten auf Token) ── */
.modal-dialog-native[b-4kh396823x] {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-4kh396823x]::backdrop { background: rgba(33, 26, 23, 0.45); } /* warmer Dark-Ton analog Shadow-Basis (styling.md §2.2) */
.modal-dialog-native h4[b-4kh396823x] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-4kh396823x] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

@media (max-width: 980px) {
    .morg-grid[b-4kh396823x] { grid-template-columns: 1fr; }
    .morg-add[b-4kh396823x] { flex-wrap: wrap; }
}
/* /Components/Pages/MyUnenrollments.razor.rz.scp.css */
/* MyUnenrollments ("Meine Angebote") — Screen-CSS nach Mockup "angebote-p"
   (Admin/index.html, .mab-*-Block). Token-Mapping gemaess docs/styling.md §0:
   ausschliesslich semantische Tokens (--brand/--gold/--sage/--error/
   --aubergine/...), keine Mockup-Namen (--mint/--amber/--violet/--coral).
   Karten-Optik strikt nach Mockup (.mab-card, 2-spaltig 1fr/auto, linker
   Akzentstreifen je Typ) — Bediener-Entscheid "strikt Mockup-Optik" 2026-06-13.
   Funktionale Bindings (Query-Filter-Tabs, Form-Post-Abmeldung, native
   <dialog>) bleiben unveraendert; nur die Praesentation ist auf Mockup-Niveau
   gezogen (vorher Zeilen-Layout analog Welle-2 .ang-Zeilen).
   Abweichungen zum Mockup (bedingt durch Token-Schema / Backend):
   - Status-Pills nach Schema: Angemeldet=Sage-Soft, Offen=Gold-Soft,
     Abgelehnt=Error-Soft (Mockup .ok nutzte violet-soft/sage — via §0-Mapping
     auf sage-soft/sage-deep gehoben, sage-deep fuer Lesbarkeit).
   - Typ-Badges mit Dot statt Emoji (NoGo 3).
   - Tabs nach Beziehung gruppiert wie im Mockup ("Alle" / "Von mir geleitet"
     (T-MYOFFERS-TRAINER) / "Meine Freien Trainings"); Mockup-Tab "Warteliste"
     entfaellt (kein Wartelisten-Status/keine Platz-Nummer im DTO).
   - Stat-Karte "Auf Warteliste" -> "Von dir geleitet" (keine Wartelisten-
     Daten im DTO; geleitete Angebote sind via IsInstructor vorhanden).
   - Meta-Zeile nur Termin (Ort/Trainer/naechster-Termin/Preis fehlen im DTO). */

/* ── Stat-Strip (Mockup .mab-stats) ── */
.mab-stats[b-8s26wjizo5] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem; margin-bottom: 1.4rem;
}
.mab-stat[b-8s26wjizo5] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    padding: 0.95rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem;
    border-left: 4px solid var(--border-strong);
}
.mab-stat.is-confirmed[b-8s26wjizo5] { border-left-color: var(--sage); }
.mab-stat.is-pending[b-8s26wjizo5]   { border-left-color: var(--gold); }
.mab-stat.is-free[b-8s26wjizo5]      { border-left-color: var(--sage-deep); }
/* T-MYOFFERS-TRAINER: geleitete Angebote (Trainer-/Leiter-Sicht) = Gold, analog
   der Kalender-Stern-Semantik (von mir geleitet). */
.mab-stat.is-led[b-8s26wjizo5]       { border-left-color: var(--gold-deep); }
.mab-stat-val[b-8s26wjizo5] { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.mab-stat-lbl[b-8s26wjizo5] { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-top: 0.3rem; }
.mab-stat-sub[b-8s26wjizo5] { font-size: 0.74rem; color: var(--muted); }

/* ── Tab-Leiste (Mockup .mab-tabs, funktional als Filter-Links) ── */
.mab-tabs[b-8s26wjizo5] {
    display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border);
    margin-bottom: 1.3rem; flex-wrap: wrap;
}
.mab-tab[b-8s26wjizo5] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 0.95rem; font-size: 0.88rem; font-weight: 600;
    color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.mab-tab:hover[b-8s26wjizo5] { color: var(--ink); }
.mab-tab.active[b-8s26wjizo5] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 700; }
.mab-tab-badge[b-8s26wjizo5] {
    font-size: 0.72rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 0.35rem;
    border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; font-variant-numeric: tabular-nums;
}
.mab-tab-badge.free[b-8s26wjizo5] { background: var(--sage-deep); }
.mab-tab-badge.led[b-8s26wjizo5] { background: var(--gold-deep); }

/* ── Freie-Trainings-Hinweis (Discovery-Regeln, statischer Text) ── */
.mab-free-hint[b-8s26wjizo5] {
    font-size: 0.84rem; color: var(--muted);
    background: var(--sage-soft); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 0.7rem 1rem;
    margin: 0 0 1.2rem; max-width: 72ch;
}

/* ── Karten-Liste (Mockup .mab-list/.mab-card — Einzelkarten statt Zeilen) ── */
.mab-list[b-8s26wjizo5] { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.6rem; }
.mab-card[b-8s26wjizo5] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    border-left: 5px solid var(--border-strong);
    display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 1.2rem;
    align-items: center; padding: 1rem 1.2rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.mab-card:hover[b-8s26wjizo5] { box-shadow: var(--shadow-sm); }
/* Akzentstreifen links je Angebots-Typ */
.mab-card.c-training[b-8s26wjizo5] { border-left-color: var(--brand); }
.mab-card.c-event[b-8s26wjizo5]    { border-left-color: var(--ink); }
.mab-card.c-free[b-8s26wjizo5]     { border-left-color: var(--sage); }
.mab-card-main[b-8s26wjizo5] { min-width: 0; }
.mab-card-top[b-8s26wjizo5] { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.45rem; }

/* ── Typ-Badge (Mockup .mab-typebadge; Dot statt Emoji, NoGo 3) ── */
.mab-typebadge[b-8s26wjizo5] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 0.22rem 0.6rem; border-radius: var(--r-pill); white-space: nowrap;
}
.mab-typebadge .mab-bdot[b-8s26wjizo5] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mab-typebadge.t-training[b-8s26wjizo5] { background: var(--brand-softer); color: var(--brand-deep); }
.mab-typebadge.t-training .mab-bdot[b-8s26wjizo5] { background: var(--brand-deep); }
.mab-typebadge.t-event[b-8s26wjizo5] { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.mab-typebadge.t-event .mab-bdot[b-8s26wjizo5] { background: var(--aubergine-deep); }
.mab-typebadge.t-free[b-8s26wjizo5] { background: var(--sage-soft); color: var(--sage-deep); }
.mab-typebadge.t-free .mab-bdot[b-8s26wjizo5] { background: var(--sage-deep); }

/* ── Rollen-Badge (T-MYOFFERS-TRAINER): Trainer/Leitung vs. Teilnehmer ──
   Trainer = Gold (Stern, "von mir geleitet"); Teilnehmer = neutral. */
.mab-rolebadge[b-8s26wjizo5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill); white-space: nowrap;
}
.mab-rolebadge.trainer[b-8s26wjizo5] { background: var(--gold-soft); color: var(--gold-deep); }
.mab-rolebadge.member[b-8s26wjizo5] { background: var(--bg-alt); color: var(--muted); }
.mab-rolebadge .mab-star[b-8s26wjizo5] { font-size: 0.82rem; line-height: 1; color: var(--gold-deep); }

/* ── Name + Org-Unterzeile ── */
.mab-name[b-8s26wjizo5] { font-size: 1.02rem; font-weight: 800; color: var(--ink); min-width: 0; }
.mab-org[b-8s26wjizo5] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; color: var(--muted); font-weight: 600;
    text-decoration: none; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mab-org:hover[b-8s26wjizo5] { color: var(--brand-deep); }
.mab-orglogo[b-8s26wjizo5] {
    width: 18px; height: 18px; border-radius: var(--r-sm); flex-shrink: 0;
    background-color: var(--brand-soft); color: var(--brand-deep);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    font-size: 0.55rem; font-weight: 800; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Meta-Zeile (Termin; weitere Felder sind Backend-Gaps) ── */
.mab-meta[b-8s26wjizo5] { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-top: 0.4rem; }
.mab-meta-row[b-8s26wjizo5] {
    font-size: 0.81rem; color: var(--muted);
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.mab-meta-row b[b-8s26wjizo5] { color: var(--ink); font-weight: 600; }
.mab-meta-row svg[b-8s26wjizo5] { width: 15px; height: 15px; display: block; flex-shrink: 0; color: var(--muted); }

/* ── Karten-Seitenspalte (Status + Aktion) ── */
.mab-card-side[b-8s26wjizo5] {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
    text-align: right; white-space: nowrap;
}

/* ── Status-Pill (Mockup .mab-statusbadge; Dot via ::before) ── */
.mab-statusbadge[b-8s26wjizo5] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill); white-space: nowrap;
}
.mab-statusbadge[b-8s26wjizo5]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mab-statusbadge span[b-8s26wjizo5] { color: var(--ink); }
.mab-statusbadge.ok[b-8s26wjizo5]       { background: var(--sage-soft); color: var(--sage-deep); }
.mab-statusbadge.pending[b-8s26wjizo5]  { background: var(--gold-soft); color: var(--gold-deep); }
.mab-statusbadge.rejected[b-8s26wjizo5] { background: var(--error-soft); color: var(--error-deep); }
/* T-MYOFFERS-TRAINER: geleitetes Angebot -> "Leitung" statt Anmelde-Status. */
.mab-statusbadge.lead[b-8s26wjizo5]     { background: var(--gold-soft); color: var(--gold-deep); }

/* ── Aktions-Button ── */
.btn-sm-pill.outline[b-8s26wjizo5] { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-8s26wjizo5] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Destruktive Bestaetigung: Error-Semantik (NoGo 5 — nie Brand-Coral fuer Loeschen/Abmelden-Confirm) */
.btn-sm-pill.outline.mab-danger[b-8s26wjizo5] { color: var(--error-deep); }
.btn-sm-pill.outline.mab-danger:hover[b-8s26wjizo5] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error-deep); }
/* T-SUBST-DISCOVER: Vertretungs-Einstieg fuer geleitete Angebote — Sage-Akzent,
   konsistent mit den Detailseiten (.detail-substitute), abgesetzt von Abmelden (Error). */
.btn-sm-pill.outline.mab-substitute[b-8s26wjizo5] { color: var(--sage-deep); border-color: var(--sage-deep); white-space: normal; }
.btn-sm-pill.outline.mab-substitute:hover[b-8s26wjizo5] { background: var(--sage-soft); color: var(--sage-deep); border-color: var(--sage-deep); }

/* ── Abmelde-Confirm-Dialog (natives <dialog>) ── */
.modal-dialog-native[b-8s26wjizo5] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 440px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-8s26wjizo5]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h3[b-8s26wjizo5] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-8s26wjizo5] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 680px) {
    /* Karte einspaltig: Status/Aktion unter den Inhalt, linksbuendig */
    .mab-card[b-8s26wjizo5] { grid-template-columns: 1fr; }
    .mab-card-side[b-8s26wjizo5] { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; flex-wrap: wrap; }
}
@media (max-width: 980px) {
    .mab-stats[b-8s26wjizo5] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/PartnerSearch.razor.rz.scp.css */
/* Partnerboerse — Screen-Prefix .par-* (Mockup-Screen "partnerboerse",
   designvorschlaege/21-redesign-final-mockup/Admin/index.html, uebertragen
   mit styling.md-§0-Token-Mapping: --mint->--brand, --mint-softer->
   --brand-softer, --violet-soft->--sage-soft, --violet-deep->--sage-deep,
   --amber-soft->--gold-soft, --amber-deep->--gold-deep, --coral->--error,
   --coral-soft->--error-soft. Stilgruppen-Tag-Toene nach Spec (S-OPEN-06-
   Auftrag): StandardLatin=gold, Swing=brand, RnR/Urban=aubergine,
   Social=sage, SoloStage=bg-alt — KEIN Error-Rot fuer Kategorien
   (styling.md §7 Regel 5). */

/* ── Intro-Banner ── */
.par-intro[b-voaagvy0r0] {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--aubergine-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.par-intro-ic[b-voaagvy0r0] {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aubergine-deep); color: #fff;
}
.par-intro-ic svg[b-voaagvy0r0] { width: 22px; height: 22px; display: block; }
.par-intro-txt[b-voaagvy0r0] { min-width: 0; }
.par-intro-title[b-voaagvy0r0] { font-weight: 800; color: var(--ink); font-size: 0.98rem; margin-bottom: 0.15rem; }
.par-intro-sub[b-voaagvy0r0] { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

/* ── Tabs (Links statt Buttons: Static SSR navigiert via ?tab=) ── */
.par-tabs[b-voaagvy0r0] {
    display: flex; gap: 0.4rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.par-tab[b-voaagvy0r0] {
    padding: 0.6rem 0.9rem; font-size: 0.9rem; font-weight: 700;
    color: var(--muted); position: relative; border-radius: var(--r-sm) var(--r-sm) 0 0;
    display: inline-flex; align-items: center; gap: 0.45rem;
    text-decoration: none;
}
.par-tab:hover[b-voaagvy0r0] { color: var(--ink); background: var(--brand-softer); }
.par-tab.active[b-voaagvy0r0] { color: var(--ink); }
.par-tab.active[b-voaagvy0r0]::after {
    content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -1px;
    height: 3px; background: var(--brand); border-radius: 2px 2px 0 0;
}
.par-tab-badge[b-voaagvy0r0] {
    font-size: 0.68rem; font-weight: 800; line-height: 1;
    padding: 0.2rem 0.4rem; border-radius: var(--r-pill);
    background: var(--brand-soft); color: var(--brand-deep);
}

/* ── Filterleiste + Formular-Felder ── */
.par-filters[b-voaagvy0r0] {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1rem 1.1rem; margin-bottom: 1.1rem;
    box-shadow: var(--shadow-xs);
}
.par-field[b-voaagvy0r0] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 150px; flex: 1 1 150px; }
.par-field.par-field-grow[b-voaagvy0r0] { flex: 2 1 240px; }
.par-field.par-field-full[b-voaagvy0r0] { min-width: 100%; }
.par-label[b-voaagvy0r0] {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700; color: var(--muted);
}
.par-select[b-voaagvy0r0], .par-input[b-voaagvy0r0], .par-textarea[b-voaagvy0r0] {
    width: 100%; font: inherit; font-size: 0.86rem; color: var(--text);
    background: var(--bg); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); padding: 0.5rem 0.7rem;
}
.par-textarea[b-voaagvy0r0] { resize: vertical; min-height: 92px; line-height: 1.5; }
.par-select:focus[b-voaagvy0r0], .par-input:focus[b-voaagvy0r0], .par-textarea:focus[b-voaagvy0r0] {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer);
}
.par-filter-actions[b-voaagvy0r0] { display: flex; gap: 0.5rem; margin-left: auto; }
.par-select:disabled[b-voaagvy0r0] {
    background: var(--bg-alt); color: var(--muted); cursor: not-allowed; opacity: 0.85;
}

/* Verfuegbarkeits-Filter-Popover (Mockup-Parity, rein optisch — Schnittmengen-
   Matching ist Backend-GAP). Natives <details>; Token-Mapping: --violet-deep->
   --sage-deep, --violet-soft->--sage-soft. */
.par-avail-dd[b-voaagvy0r0] { position: relative; display: block; }
.par-avail-dd > summary[b-voaagvy0r0] { list-style: none; cursor: pointer; }
.par-avail-dd > summary[b-voaagvy0r0]::-webkit-details-marker { display: none; }
.par-avail-btn[b-voaagvy0r0] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.8rem; border: 1px solid var(--border-strong);
    border-radius: var(--r-md); background: var(--card);
    font-size: 0.85rem; color: var(--text); white-space: nowrap;
}
.par-avail-btn > svg[b-voaagvy0r0] { width: 15px; height: 15px; color: var(--sage-deep); display: block; }
.par-avail-caret[b-voaagvy0r0] { display: inline-flex; margin-left: 0.1rem; color: var(--muted); }
.par-avail-caret svg[b-voaagvy0r0] { width: 13px; height: 13px; display: block; }
.par-avail-dd[open] .par-avail-btn[b-voaagvy0r0] { border-color: var(--sage-deep); }
.par-avail-menu[b-voaagvy0r0] {
    position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 100;
    width: 380px; max-width: 88vw; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); padding: 0.9rem;
}
.par-avail-title[b-voaagvy0r0] { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.par-avail-sub[b-voaagvy0r0] { font-size: 0.74rem; color: var(--muted); margin: 0.1rem 0 0.6rem; }
.par-avail-grid[b-voaagvy0r0] {
    display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 2px; align-items: center;
}
.par-avail-h[b-voaagvy0r0] { font-size: 0.64rem; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 2px; }
.par-avail-time[b-voaagvy0r0] { font-size: 0.6rem; color: var(--muted); text-align: right; padding-right: 5px; font-variant-numeric: tabular-nums; line-height: 1; }
.par-avail-cell[b-voaagvy0r0] { height: 12px; border-radius: 3px; background: var(--bg-alt); }
.par-avail-foot[b-voaagvy0r0] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    margin-top: 0.7rem; flex-wrap: wrap;
}
.par-avail-sum[b-voaagvy0r0] { font-size: 0.76rem; font-weight: 600; color: var(--sage-deep); }
.par-avail-foot-btns[b-voaagvy0r0] { display: flex; gap: 0.4rem; }
.par-avail-foot-btns .btn-sm-pill:disabled[b-voaagvy0r0] { opacity: 0.6; cursor: not-allowed; }

/* ── Aktive Filter-Chips (einzeln entfernbar: Chip = Link ohne den Filter) ── */
.par-active-filters[b-voaagvy0r0] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; align-items: center; }
.par-active-label[b-voaagvy0r0] { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-right: 0.2rem; }
.par-chip[b-voaagvy0r0] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.76rem; font-weight: 700; padding: 0.28rem 0.6rem;
    border-radius: var(--r-pill); background: var(--brand-softer); color: var(--brand-deep);
    border: 1px solid var(--border); text-decoration: none;
}
.par-chip-x[b-voaagvy0r0] { opacity: 0.7; font-size: 0.85rem; line-height: 1; }
.par-chip:hover .par-chip-x[b-voaagvy0r0] { opacity: 1; }
.par-result-count[b-voaagvy0r0] { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-weight: 600; }

/* ── Gesuch-Karten-Grid (Browse) ── */
.par-grid[b-voaagvy0r0] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
}
.par-card[b-voaagvy0r0] {
    display: flex; flex-direction: column; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 1.1rem; box-shadow: var(--shadow-xs);
    transition: transform 0.15s;
}
.par-card:hover[b-voaagvy0r0] { transform: translate3d(0, -2px, 0); }
.par-card-head[b-voaagvy0r0] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.par-av[b-voaagvy0r0] {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
    background-color: var(--aubergine-soft); color: var(--aubergine-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.92rem; font-weight: 800;
}
/* Gruppen-Gesuch (S-407): eckiger Org-Avatar statt Personen-Kreis. */
.par-av.par-av-org[b-voaagvy0r0] { border-radius: var(--r-md); border: 1px solid var(--border); }
.par-id[b-voaagvy0r0] { min-width: 0; }
.par-name[b-voaagvy0r0] { font-size: 0.96rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; }
.par-name-meta[b-voaagvy0r0] { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; }

/* ── Tag-Zeile (Stil / Niveau / Rolle) ── */
.par-tags[b-voaagvy0r0] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.par-tag[b-voaagvy0r0] {
    font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.55rem;
    border-radius: var(--r-pill); line-height: 1;
}
.par-tag-stdlat[b-voaagvy0r0] { background: var(--gold-soft);      color: var(--gold-deep); }
.par-tag-swing[b-voaagvy0r0]  { background: var(--brand-soft);     color: var(--brand-deeper); }
.par-tag-rnr[b-voaagvy0r0]    { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.par-tag-social[b-voaagvy0r0] { background: var(--sage-soft);      color: var(--sage-deep); }
.par-tag-urban[b-voaagvy0r0]  { background: var(--aubergine-soft); color: var(--aubergine-deep); }
.par-tag-solo[b-voaagvy0r0]   { background: var(--bg-alt);         color: var(--muted); }
.par-tag-level[b-voaagvy0r0]  { background: var(--bg); color: var(--muted); border: 1px solid var(--border-strong); }
.par-tag-role[b-voaagvy0r0]   { background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); }

.par-card-rows[b-voaagvy0r0] { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.par-row[b-voaagvy0r0] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text); }
.par-row svg[b-voaagvy0r0] { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); display: block; }
.par-row b[b-voaagvy0r0] { color: var(--ink); font-weight: 700; }

.par-headline[b-voaagvy0r0] { font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-bottom: 0.45rem; }
.par-quote[b-voaagvy0r0] {
    font-size: 0.84rem; color: var(--text); line-height: 1.5;
    background: var(--bg); border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0.55rem 0.75rem;
    margin-bottom: 0.85rem;
}
.par-card-foot[b-voaagvy0r0] {
    display: flex; align-items: center; gap: 0.5rem; margin-top: auto;
    padding-top: 0.8rem; border-top: 1px solid var(--border);
}
.par-since[b-voaagvy0r0] { font-size: 0.74rem; color: var(--muted); }
.par-foot-btns[b-voaagvy0r0] { display: flex; gap: 0.45rem; margin-left: auto; }

/* ── Meine Gesuche ── */
.par-mine-list-head[b-voaagvy0r0] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    margin-bottom: 0.9rem; flex-wrap: wrap;
}
.par-mine-list-head .hint[b-voaagvy0r0] { font-size: 0.78rem; color: var(--muted); }
.par-mine[b-voaagvy0r0] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm);
}
.par-mine + .par-mine[b-voaagvy0r0] { margin-top: 1rem; }
.par-mine + dialog + .par-mine[b-voaagvy0r0] { margin-top: 1rem; }
.par-mine-head[b-voaagvy0r0] { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.1rem; }
.par-mine-head-main[b-voaagvy0r0] { flex: 1; min-width: 0; }
.par-mine-title[b-voaagvy0r0] { margin: 0.6rem 0 0.2rem; font-size: 1.2rem; color: var(--ink); }
.par-mine-sub[b-voaagvy0r0] { font-size: 0.82rem; color: var(--muted); }
.par-status-pill[b-voaagvy0r0] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 800; padding: 0.28rem 0.6rem;
    border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage-deep);
}
.par-status-pill svg[b-voaagvy0r0] { width: 13px; height: 13px; display: block; }
.par-status-pill.paused[b-voaagvy0r0] { background: var(--bg-alt); color: var(--muted); }

.par-avail-detail[b-voaagvy0r0] {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card); padding: 0.9rem 1rem; margin-top: 1rem;
}
.par-avail-detail-head[b-voaagvy0r0] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.par-avail-detail-head .par-label[b-voaagvy0r0] { margin: 0; }
.par-avail-detail-sum[b-voaagvy0r0] { font-size: 0.84rem; color: var(--text); }
.par-avail-detail-sum b[b-voaagvy0r0] { color: var(--sage-deep); }
.par-avail-note[b-voaagvy0r0] { color: var(--muted); }

.par-mine-stats[b-voaagvy0r0] { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 1.1rem 0; }
.par-stat[b-voaagvy0r0] { display: flex; flex-direction: column; gap: 0.15rem; }
.par-stat-num[b-voaagvy0r0] { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.par-stat-lbl[b-voaagvy0r0] { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.par-mine-actions[b-voaagvy0r0] {
    display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
    padding-top: 1.1rem; border-top: 1px solid var(--border);
}

/* ── Anlegen-/Bearbeiten-Formular ── */
.par-form-header[b-voaagvy0r0] { margin-top: 2rem; }
.par-form-title[b-voaagvy0r0] { font-size: 1.1rem; }
.par-adform[b-voaagvy0r0] { flex-direction: column; align-items: stretch; gap: 1rem; }
.par-adform-row[b-voaagvy0r0] { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.par-adform-actions[b-voaagvy0r0] { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.par-hint[b-voaagvy0r0] { font-size: 0.74rem; color: var(--muted); }

/* Wochen-Verfuegbarkeit: je Tag EIN Von-Bis-Fenster (vereinfachte
   Slot-Erfassung; das Mockup-Halbstunden-Raster ist Backlog). */
.par-week[b-voaagvy0r0] { display: flex; flex-direction: column; gap: 0.4rem; max-width: 420px; }
.par-week-row[b-voaagvy0r0] {
    /* minmax(0,1fr) statt 1fr: laesst die beiden Zeit-Inputs unter ihre
       intrinsische Mindestbreite schrumpfen — sonst Overflow auf <=375px,
       wo 44px+14px+Gaps kaum Platz fuer zwei Zeitfelder lassen. */
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center; gap: 0.5rem;
}
.par-week-row input[b-voaagvy0r0] { width: 100%; min-width: 0; }
.par-week-day[b-voaagvy0r0] { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.par-week-sep[b-voaagvy0r0] { color: var(--muted); text-align: center; }

/* ── Anfragen-Listen ── */
.par-req-group[b-voaagvy0r0] { margin-bottom: 1.6rem; }
.par-req-list[b-voaagvy0r0] {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs);
}
.par-req-row[b-voaagvy0r0] {
    display: grid; grid-template-columns: 44px 1fr auto;
    align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
}
.par-req-row:last-child[b-voaagvy0r0] { border-bottom: none; }
.par-req-av[b-voaagvy0r0] {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background-color: var(--aubergine-soft); color: var(--aubergine-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800;
}
.par-req-meta[b-voaagvy0r0] { min-width: 0; }
.par-req-name[b-voaagvy0r0] { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.par-req-sub[b-voaagvy0r0] { font-size: 0.77rem; color: var(--muted); margin-top: 0.1rem; overflow-wrap: anywhere; }
.par-req-side[b-voaagvy0r0] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.par-state[b-voaagvy0r0] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 800; padding: 0.28rem 0.6rem; border-radius: var(--r-pill);
}
.par-state-open[b-voaagvy0r0]     { background: var(--gold-soft);  color: var(--gold-deep); }
.par-state-accepted[b-voaagvy0r0] { background: var(--sage-soft);  color: var(--sage-deep); }
.par-state-rejected[b-voaagvy0r0] { background: var(--error-soft); color: var(--error-deep); }
.par-req-actions[b-voaagvy0r0] { display: flex; gap: 0.4rem; }

.par-subhead[b-voaagvy0r0] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--muted); margin-bottom: 0.7rem;
}
.par-subhead-count[b-voaagvy0r0] {
    font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: var(--r-pill);
    background: var(--brand-softer); color: var(--brand-deep); font-weight: 800;
}

/* ── Leere Zustaende ── */
.par-empty[b-voaagvy0r0] {
    background: var(--card); border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg); padding: 1.6rem; text-align: center;
    color: var(--muted); font-size: 0.88rem;
    display: flex; flex-direction: column; gap: 0.6rem; align-items: center;
}
.par-empty p[b-voaagvy0r0] { margin: 0; }

/* ── Dialoge (natives <dialog>, Muster MyUnenrollments) ── */
.modal-dialog-native[b-voaagvy0r0] {
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 1.5rem; max-width: 460px; box-shadow: var(--shadow-lg);
}
.modal-dialog-native[b-voaagvy0r0]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h3[b-voaagvy0r0] { margin: 0 0 0.5rem; color: var(--ink); font-size: 1.05rem; }
.par-dialog-sub[b-voaagvy0r0] { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.9rem; }
.modal-dialog-native .par-textarea[b-voaagvy0r0] { margin-top: 0.3rem; }
.modal-actions[b-voaagvy0r0] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }

/* .btn-sm-pill.outline ist global nur fuer dunkle .uc-Foto-Karten definiert
   (app.css) -> auf den weissen par-Flaechen eigener Scoped-Stil (Mockup-
   Override-Muster, dort als .par-card .btn-sm-pill.outline). */
.btn-sm-pill.outline[b-voaagvy0r0] { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.btn-sm-pill.outline:hover[b-voaagvy0r0] { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
/* Profil-Button (Browse-Karten) — Fremd-Profil-Route fehlt (GAP), daher disabled. */
.par-foot-btns .btn-sm-pill.outline:disabled[b-voaagvy0r0] {
    background: var(--bg-alt); color: var(--muted); border-color: var(--border);
    cursor: not-allowed; opacity: 0.8;
}
.btn-sm-pill.outline.par-danger[b-voaagvy0r0] { color: var(--error-deep); border-color: var(--error-soft); }
.btn-sm-pill.outline.par-danger:hover[b-voaagvy0r0] { background: var(--error-soft); color: var(--error-deep); border-color: var(--error); }

/* ── Responsive ── */
@media (max-width: 980px) {
    .par-filter-actions[b-voaagvy0r0] { margin-left: 0; }
    .par-req-row[b-voaagvy0r0] { grid-template-columns: 44px 1fr; }
    .par-req-side[b-voaagvy0r0] { grid-column: 1 / -1; justify-content: flex-start; }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Profile.razor (Einstellungen) — scoped CSS (Blazor-isoliert).
   Mockup-Transfer aus Screen "einstellungen" (wwwroot/mockup/Admin/index.html):
   .adm-* (Form-/Nav-/Panel-Bausteine, reused vom Administration-Screen) +
   .set-* (Avatar-Kreis, Toggle-Liste, 2FA-Box). Token-Mapping gemaess
   styling.md §0 angewandt: --mint->--brand, --coral->--error,
   --violet-soft->--sage-soft, --violet-deep->--sage-deep, --gold/--gold-* 1:1.
   Page-scoped, bis der Administration-Screen-Transfer die .adm-*-Bloecke
   nach app.css promotet (dann hier konsolidieren).
   .panel / .panel-header / .panel-title / .btn-pill / .banner-* /
   .section-header kommen global aus app.css.
   ════════════════════════════════════════════════════════════════════ */

.adm-wrap[b-0myo4a07wo] { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .adm-wrap[b-0myo4a07wo] { grid-template-columns: 1fr; } }

/* Linke Sub-Nav (statische Optik, aktiver Eintrag markiert) */
.adm-nav[b-0myo4a07wo] {
    position: sticky; top: 1rem; display: flex; flex-direction: column;
    gap: 0.15rem; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 0.6rem; box-shadow: var(--shadow-xs);
}
.adm-nav-item[b-0myo4a07wo] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.7rem; border-radius: var(--r-md);
    color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.adm-nav-item svg[b-0myo4a07wo] { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
.adm-nav-item:hover[b-0myo4a07wo] { background: var(--brand-softer); }
.adm-nav-item.active[b-0myo4a07wo] { background: var(--brand-soft); color: var(--brand-deep); }
.adm-nav-item.active svg[b-0myo4a07wo] { color: var(--brand-deep); }
.adm-nav-item.danger[b-0myo4a07wo] { color: var(--error); }
.adm-nav-item.danger svg[b-0myo4a07wo] { color: var(--error); }

.adm-content[b-0myo4a07wo] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* app.css-.panel bringt margin-bottom: 1.5rem mit — im Gap-Layout neutralisieren */
.adm-content[b-0myo4a07wo]  .panel { margin-bottom: 0; }

/* Panel-Sektionen erben global .panel / .panel-header / .panel-title */
.adm-panel-body[b-0myo4a07wo] { padding: 1.25rem; }
.adm-panel-sub[b-0myo4a07wo] { font-size: 0.78rem; color: var(--muted); font-weight: 500; margin-left: 0.6rem; }

/* Formular-Bausteine */
.adm-grid[b-0myo4a07wo] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.adm-grid + .adm-grid[b-0myo4a07wo] { margin-top: 1.25rem; }
@media (max-width: 640px) { .adm-grid[b-0myo4a07wo] { grid-template-columns: 1fr; } }
.adm-field[b-0myo4a07wo] { display: flex; flex-direction: column; gap: 0.35rem; }
.adm-field.full[b-0myo4a07wo] { grid-column: 1 / -1; }
.adm-label[b-0myo4a07wo] { font-size: 0.78rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.4px; }
.adm-hint[b-0myo4a07wo] { font-size: 0.74rem; color: var(--muted); }
.adm-input[b-0myo4a07wo], .adm-select[b-0myo4a07wo], .adm-textarea[b-0myo4a07wo] {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 0.6rem 0.75rem; font: inherit; font-size: 0.88rem;
    color: var(--text); background: var(--card); width: 100%;
}
.adm-input:focus[b-0myo4a07wo], .adm-select:focus[b-0myo4a07wo], .adm-textarea:focus[b-0myo4a07wo] {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer);
}
.adm-input:disabled[b-0myo4a07wo], .adm-select:disabled[b-0myo4a07wo] { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.adm-textarea[b-0myo4a07wo] { resize: vertical; min-height: 80px; }

.adm-actions[b-0myo4a07wo] { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* Hinweis-Box (--violet-* -> --sage-* gemappt) */
.adm-note[b-0myo4a07wo] {
    display: flex; gap: 0.7rem; background: var(--sage-soft); border-radius: var(--r-md);
    padding: 0.8rem 1rem; font-size: 0.82rem; color: var(--sage-deep); line-height: 1.45;
}
.adm-note svg[b-0myo4a07wo] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* Profilfoto-Upload (runder Avatar + Dropzone) */
.adm-logo-row[b-0myo4a07wo] { display: flex; align-items: center; gap: 1.25rem; }
/* Placeholder-Kreis: KEIN Foto gebunden (kein Avatar-Feld im ProfileDto).
   Brand-Soft-Flaeche + Personen-Silhouette als neutraler Vorschau-Stand-in. */
.set-avatar[b-0myo4a07wo] {
    width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-soft);
    border: 1px solid var(--border); box-shadow: var(--shadow-xs);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-deep); font-size: 1.6rem; font-weight: 800;
}
.set-avatar svg[b-0myo4a07wo] { width: 40px; height: 40px; }
.adm-upload[b-0myo4a07wo] {
    border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
    padding: 0.9rem 1.1rem; flex: 1; text-align: center; color: var(--muted);
    font-size: 0.82rem; background: var(--bg); cursor: pointer;
}
.adm-upload:hover[b-0myo4a07wo] { border-color: var(--brand); background: var(--brand-softer); color: var(--brand-deep); }
.adm-upload strong[b-0myo4a07wo] { color: var(--brand-deep); }

/* Benachrichtigungs-Toggle-Liste */
.set-toggle-list[b-0myo4a07wo] { display: flex; flex-direction: column; }
.set-toggle-row[b-0myo4a07wo] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 0; border-bottom: 1px solid var(--border);
}
.set-toggle-row:last-child[b-0myo4a07wo] { border-bottom: none; }
.set-toggle-meta[b-0myo4a07wo] { min-width: 0; }
.set-toggle-name[b-0myo4a07wo] { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.set-toggle-sub[b-0myo4a07wo] { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.12rem; }
/* Switch — reine Optik, aktiver Zustand = Coral (Brand). */
.set-switch[b-0myo4a07wo] {
    width: 44px; height: 24px; border-radius: var(--r-pill); flex-shrink: 0;
    background: var(--border-strong); position: relative; cursor: pointer;
    transition: background 0.15s;
}
.set-switch[b-0myo4a07wo]::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-xs); transition: left 0.15s;
}
.set-switch.on[b-0myo4a07wo] { background: var(--brand); }
.set-switch.on[b-0myo4a07wo]::after { left: 22px; }
.set-switch:focus-visible[b-0myo4a07wo] { outline: none; box-shadow: 0 0 0 3px var(--brand-softer); }

/* Tanzrichtungen + Niveau (Partnerboerse-relevant) — Mockup-Optik als
   statischer Platzhalterzustand (kein Partnerboerse-Profil-API). --coral->--error,
   --violet-soft->--sage-soft gemappt. */
.set-dance-list[b-0myo4a07wo] { display: flex; flex-direction: column; gap: 0.6rem; }
.set-dance-row[b-0myo4a07wo] {
    display: grid; grid-template-columns: 1fr 200px 32px; align-items: center; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.55rem 0.75rem; background: var(--card);
}
@media (max-width: 640px) { .set-dance-row[b-0myo4a07wo] { grid-template-columns: 1fr; } }
.set-dance-name[b-0myo4a07wo] { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.set-dance-del[b-0myo4a07wo] {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--card); color: var(--error); cursor: pointer; justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
}
.set-dance-del svg[b-0myo4a07wo] { width: 14px; height: 14px; }
.set-dance-del:hover[b-0myo4a07wo] { background: var(--error-soft); border-color: var(--error); }

/* Level-Pill (Niveau-Badge, statisch; --violet-soft->--sage-soft, --sage 1:1) */
.set-level[b-0myo4a07wo] {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700;
    border-radius: var(--r-pill); padding: 0.22rem 0.6rem; background: var(--sage-soft); color: var(--sage);
}

/* 2FA-Box (--amber-* -> --gold-* gemappt) */
.set-2fa[b-0myo4a07wo] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.9rem 1rem; background: var(--bg);
}
.set-2fa-meta[b-0myo4a07wo] { min-width: 0; }
.set-2fa-title[b-0myo4a07wo] { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.set-2fa-desc[b-0myo4a07wo] { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.set-2fa-aside[b-0myo4a07wo] { display: flex; align-items: center; gap: 0.75rem; }
.set-2fa-state[b-0myo4a07wo] {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 800;
    border-radius: var(--r-pill); padding: 0.2rem 0.6rem; background: var(--gold-soft); color: var(--gold-deep);
}
.set-2fa-state .dot[b-0myo4a07wo] { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* Kleiner Pill-Button (2FA "Einrichten"). Outline-Variante: warm, dezent. */
.btn-sm-pill[b-0myo4a07wo] {
    padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
    font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit;
    background: var(--brand); color: #fff; border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-sm-pill:hover[b-0myo4a07wo] { background: var(--brand-deep); }
.btn-sm-pill.outline[b-0myo4a07wo] { background: var(--card); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-sm-pill.outline:hover[b-0myo4a07wo] { background: var(--bg-alt); }
.btn-sm-pill:disabled[b-0myo4a07wo] { opacity: 0.6; cursor: not-allowed; }
.btn-sm-pill.outline:disabled:hover[b-0myo4a07wo] { background: var(--card); }

/* Gefahrenzone — Border/Akzente in --error-Toenen (NIE Brand-Coral) */
.adm-danger[b-0myo4a07wo] { border: 1px solid var(--error-soft); }
.adm-danger[b-0myo4a07wo]  .panel-title { color: var(--error-deep); }
.adm-danger-body[b-0myo4a07wo] { padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.adm-danger-text[b-0myo4a07wo] { font-size: 0.86rem; color: var(--muted); line-height: 1.45; max-width: 560px; }
.adm-danger-text strong[b-0myo4a07wo] { color: var(--error-deep); }
.adm-btn-danger[b-0myo4a07wo] {
    display: inline-flex; align-items: center; gap: 0.5rem; background: var(--error); color: #fff;
    border: none; border-radius: var(--r-pill); padding: 0.6rem 1.2rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
    font-family: inherit;
}
.adm-btn-danger:hover[b-0myo4a07wo] { background: var(--error-deep); }
.adm-btn-danger svg[b-0myo4a07wo] { width: 16px; height: 16px; flex-shrink: 0; }

/* Passwort-Anzeigen-Toggle (Bestand, Tokens auf semantischen Namensraum gemappt) */
.pwd-wrapper[b-0myo4a07wo] { position: relative; display: flex; align-items: center; }
.pwd-wrapper .adm-input[b-0myo4a07wo] { padding-right: 5.5rem; }
.pwd-toggle[b-0myo4a07wo] { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--brand-deep); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0.3rem 0.55rem; border-radius: var(--r-sm); }
.pwd-toggle:hover[b-0myo4a07wo] { background: var(--brand-softer); }

.profile-login-gate[b-0myo4a07wo] { min-height: 1500px; }

/* Loesch-Dialog (natives dialog-Element, Bestand — Tokens statt Hardcodes) */
.modal-dialog-native[b-0myo4a07wo] { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; max-width: 520px; box-shadow: var(--shadow-lg); color: var(--text); }
.modal-dialog-native[b-0myo4a07wo]::backdrop { background: rgba(33, 26, 23, 0.45); }
.modal-dialog-native h4[b-0myo4a07wo] { margin: 0 0 0.75rem; color: var(--ink); }
.modal-actions[b-0myo4a07wo] { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
/* /Components/Pages/Register.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   Register.razor — Page-scoped styles
   (ex-app.css — Per-Page-CSS-Splitting 2026-04-24)

   Password-Strength-Meter (UX-Audit U-030, Batch F)
   Live-Feedback unterhalb des Passwort-Inputs auf Register.razor. Visualisiert
   einen 0-4-Score (siehe ComputePasswordScore) als 4-Segment-Balken, der bei
   steigender Staerke gruener wird. Reines Feedback — Submit pruefte schon
   vorher die Server-Policy; auch "Sehr schwach" ist akzeptiert.

   Markup:
     <div class="pwd-strength">
       <div class="pwd-strength-bar">
         <span class="pwd-strength-segment filled-N"></span> ... (4x)
       </div>
       <small class="pwd-strength-label" aria-live="polite">Passwort-Staerke: ...</small>
     </div>

   Farb-Stufen orientieren sich an den vorhandenen Tokens (Coral fuer schwach,
   Mint-Stufen fuer stark). Score 1 = rot, 2 = orange, 3 = gelb, 4 = mint-deep.
   --------------------------------------------------------------------------- */
.pwd-strength[b-j0gcnrnih1] {
    margin-top: 0.4rem;
}

.pwd-strength-bar[b-j0gcnrnih1] {
    display: flex;
    gap: 4px;
    height: 6px;
}

.pwd-strength-segment[b-j0gcnrnih1] {
    flex: 1;
    background: rgba(10, 46, 42, 0.08);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.pwd-strength-segment.filled-1[b-j0gcnrnih1] {
    /* schwaechste Stufe = Error-Rot (semantischer Token, Wert identisch zum
       fruehren Legacy --coral #D83A2E). */
    background: var(--error);
}

.pwd-strength-segment.filled-2[b-j0gcnrnih1] {
    background: hsl(28, 92%, 60%);
}

.pwd-strength-segment.filled-3[b-j0gcnrnih1] {
    background: hsl(48, 92%, 55%);
}

.pwd-strength-segment.filled-4[b-j0gcnrnih1] {
    /* staerkste Stufe = Brand (semantischer Token, Wert identisch zu --mint-deep). */
    background: var(--brand-deep);
}

.pwd-strength-label[b-j0gcnrnih1] {
    display: block;
    margin-top: 0.3rem;
    /* Batch O — B04: 0.78rem auf --fs-xs (0.75rem = 12px) gezogen. */
    font-size: var(--fs-xs, 0.75rem);
    color: var(--muted);
    min-height: 1em;
}