:root {
    /* ════════════════════════════════════════════════════════════════
       RITMANO-PALETTE (Run 2, 2026-06-12) — docs/styling.md ist SSOT.

       Uebergangs-Strategie (wie im Mockup 21-redesign.css):
       Die ALTEN Token-Namen (--mint, --coral, --ink, ...) tragen jetzt
       die RITMANO-WERTE, damit saemtliche Bestandsseiten ohne Einzel-
       Edit im neuen Look rendern. Der KANONISCHE Namensraum fuer allen
       Neucode (Shell, Screen-Transfers) sind die SEMANTISCHEN Tokens
       weiter unten (--brand, --error, --sage, --gold, ...) — Mapping:
       styling.md Abschnitt 0. Beim Screen-Transfer werden die alten
       Namen je Klasse durch die semantischen ersetzt; sind alle Screens
       transferiert, fliegen die Legacy-Namen raus.
       ════════════════════════════════════════════════════════════════ */
    --mint: #E85234;          /* LEGACY-Name, Wert = Coral Orange (Brand) */
    --mint-deep: #D9462A;     /* Coral Hover */
    --mint-soft: #FFE2D4;     /* Soft Peach */
    --mint-softer: #FFF1EA;   /* sehr helle Peach */
    --ink: #24172F;           /* Deep Aubergine */
    --bg: #FBF8F0;            /* Warm Cream (entpeacht) */
    --card: #ffffff;
    --muted: #6F6660;         /* warmes Muted */
    --text: #211A17;          /* warmes Dunkel */
    --coral: #D83A2E;         /* LEGACY-Name, Wert = Error Red (!) */

    /* ── Semantische Ritmano-Tokens (kanonisch, styling.md §2) ── */
    --brand: #E85234;         /* Coral Orange — Primary */
    --brand-deep: #D9462A;
    --brand-deeper: #B23A22;
    --brand-soft: #FFE2D4;    /* Soft Peach */
    --brand-softer: #FFF1EA;
    --error: #D83A2E;         /* Error Red — strikt getrennt vom Brand */
    --error-soft: #FBE6E3;
    --error-deep: #A82A21;
    --sage: #6FAF8D;          /* Sage Green — positiv/Community */
    --sage-soft: #EAF6EF;
    --sage-deep: #4E8E6E;
    --gold: #F2B84B;          /* Champagne Gold — Event/Premium */
    --gold-soft: #FFF4D8;
    --gold-deep: #9A6F12;
    --aubergine: #24172F;     /* Markentiefe (== --ink) */
    --aubergine-deep: #3A2347;
    --aubergine-soft: #F3EEF6;
    --indigo: #0C0B37;        /* Midnight Indigo — Dark-Premium */
    --sidebar-w: 248px;

    /* ---------------------------------------------------------------------
       Batch H — Token-Foundation (2026-04-18)
       Die nachfolgenden Tokens sind rueckwaerts-kompatible Aliases fuer die
       im CSS bereits vorkommenden Werte. Sie werden von Batch H vorerst nur
       punktuell genutzt (Mapping siehe Abschnitt H.5/H.6 im Subagent-Auftrag);
       das vollstaendige Konsolidieren der Klassen uebernehmen Batch I/K/N.
       Null optische Aenderungen sind die Regel.
       --------------------------------------------------------------------- */

    /* Spacing-Scale — 4px-Basis */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */

    /* Font-Size-Scale */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.25rem;     /* 20px */
    --fs-2xl: 1.5rem;     /* 24px */
    --fs-3xl: 1.875rem;   /* 30px */
    --fs-4xl: 2.25rem;    /* 36px */
    --fs-hero: 3rem;      /* 48px */

    /* Line-Height */
    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-base: 1.5;
    --lh-relaxed: 1.65;

    /* Semantische Farb-Tokens (fuer bereits im CSS genutzte Werte als
       1:1-Mapping; die uebrigen dienen spaeteren Batches). */
    --danger: #b91c1c;         /* bereits im CSS: .banner-error, .toast-error */
    --danger-soft: #fee2e2;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --success: #047857;
    --success-soft: #d1fae5;
    /* Ritmano-Remap (Run 2): warme deckende Borders + warme Schatten
       (rgb 33,26,23) statt Teal/Schwarz — Werte aus styling.md §2.2 */
    --border: #E9DDD4;
    --border-strong: #D8C7BA;
    --shadow-sm: 0 2px 6px rgba(33, 26, 23, 0.07);
    --shadow-md: 0 6px 18px rgba(33, 26, 23, 0.10);
    --shadow-lg: 0 16px 40px rgba(33, 26, 23, 0.15);
    --coral-soft: #FBE6E3;     /* Ritmano-Remap: Error Soft */

    /* Border-Radius-Skala (Batch I-reduced, D07) — konsolidiert die
       Card/Modal/Panel-Radien. Kleinere Elemente (Inputs 8px, Chips 6px,
       Labels 4px) bleiben hardcoded, weil sie nicht in die Card-Skala
       gehoeren. --radius-pill deckt die Button-/Pill-Formen ab. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ─────────────────────────────────────────────────────────────────
       Design-Refresh 2026-05 — Bootstrap × Mint Hybrid (Stil 12)
       Neue Tokens fuer die Refresh-Komponenten. Koexistieren mit den
       alten --radius-*/--shadow-*-Tokens, damit alte Klassen unangetastet
       bleiben. Spec: docs/styling.md Sektion 2.
       ───────────────────────────────────────────────────────────────── */
    --mint-deeper: #B23A22;        /* Ritmano-Remap: Coral gedrueckt */
    --coral-deep:  #A82A21;        /* Ritmano-Remap: Error Deep */

    /* Refresh-Shadows — Ritmano-Remap auf warmen Dark-Ton (33,26,23). */
    --shadow-xs:   0 1px 2px rgba(33, 26, 23, 0.05);
    --shadow-sm-r: 0 2px 6px rgba(33, 26, 23, 0.07);
    --shadow-md-r: 0 6px 18px rgba(33, 26, 23, 0.10);
    --shadow-lg-r: 0 16px 40px rgba(33, 26, 23, 0.15);

    /* Refresh-Radien — Hybrid-Logik aus styling.md 2.3.
       Existierende --radius-*-Tokens bleiben fuer alte Klassen. */
    --r-sm:   6px;        /* Badges, Tabellen-Action-Buttons */
    --r-md:  10px;        /* Form-Inputs, Tabs, Panels innen */
    --r-lg:  12px;        /* Cards, List-Group, Quick-Cards */
    --r-pill: 999px;      /* Primary-CTAs, Status-Pills */

    /* Refresh-BG-Alt (Cream-Variante fuer Section-Highlights) */
    --bg-alt: #F3EFE5;  /* Ritmano-Remap: tieferes Cream */
}

/* Breakpoint-Skala (als Kommentar, da CSS Custom Properties nicht in @media evaluieren):
   --bp-sm: 480px   (kleine Handies)
   --bp-md: 768px   (Tablet Portrait / grosse Handies)
   --bp-lg: 1024px  (Tablet Landscape / kleiner Desktop)
   --bp-xl: 1280px  (Desktop)
*/

*, *::before, *::after {
    box-sizing: border-box;
}

/* Form-control accents — Mint statt Browser-Default-Lila für Checkboxes/Radios/Range. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--mint);
}

/* Prevent Blazor SSR→Interactive transition flicker/borders.
   Note: [b-*] (attribute prefix wildcard) is non-standard CSS — NUglify chokes on
   it and the resulting Content-Length mismatch makes MapStaticAssets() fail with
   500 on Linux self-contained deploys. The .blazor-ssr rule below is the real
   fix; the per-attribute outline reset is not needed in practice. */
.blazor-ssr { outline: none; border: none; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
}

/* Batch J — H.3 Baseline-Line-Height (WCAG 1.4.12 Recommendation).
   Bisher kein expliziter line-height auf body gesetzt; 1.5 ist Gold-Standard. */
body {
    line-height: var(--lh-base, 1.5);
}

/* Screenreader-only content (WCAG 1.3.1). Fuer Tabellen-Captions,
   Icon-Button-Labels und versteckte Kontext-Hinweise. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a {
    color: var(--mint-deep);
}

/* Skip-Link (UX-Audit U-010) — Tastatur-User springen ohne Top-Nav direkt zum
   Hauptinhalt. Versteckt off-canvas, sichtbar bei :focus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1001;
    background: var(--ink);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}
/* Main-Content-Container ist programmatisch fokussierbar (tabindex="-1"),
   beim Skip soll aber kein klassischer Outline-Ring erscheinen. */
main#main-content:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------
   Nav-CTA Pills (Design-Refresh D-2)

   .nav-cta-primary — solid ink pill for unauth "Registrieren" in the header.
                      Compact version of .btn-primary without the arrow.
   .nav-cta-ghost   — hollow pill for authenticated "Logout" in the header.

   Rendered inside MainLayout header by AuthLinks.razor. Must live globally
   because AuthLinks has no scoped CSS file and sits inside MainLayout's
   scoped shadow (::deep wouldn't reach the button reliably).
   Reference: designvorschlaege/06-mint.html .cta-nav
   --------------------------------------------------------------------------- */
.nav-cta-primary {
    display: inline-flex;
    align-items: center;
    background: var(--ink);
    color: #fff;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-cta-primary:hover {
    background: var(--mint-deep);
    border-color: var(--mint-deep);
    color: #fff;
}

.nav-cta-ghost {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--ink);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(10, 46, 42, 0.2);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.nav-cta-ghost:hover {
    border-color: var(--mint);
    color: var(--mint-deep);
    background: transparent;
}

/* ---------------------------------------------------------------------------
   .btn-primary-sm — Compact primary pill (D-2, stabilisiert in D-5)

   Compact pill for admin/dashboard primary actions ("+ Training anlegen",
   "Speichern"). Token-basierte Version von .btn-primary ohne animierten
   Pfeil und mit kleineren Paddings. Bleibt als eigenstaendige Klasse in D-5
   erhalten, weil sie page-uebergreifend (Dashboard, Admin*) die gleiche
   Semantik transportiert.
   --------------------------------------------------------------------------- */
.btn-primary-sm {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary-sm:hover {
    background: var(--mint-deep);
    color: #fff;
}

.btn-primary-sm:disabled,
.btn-primary-sm[disabled] {
    background: var(--muted);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Batch I-D01: .btn-primary-sm.mint — Mint-BG / Ink-Text Variante fuer Aktionen,
   die sich visuell vom regulaeren Ink-Primary abgrenzen sollen (Admin-Zugriff,
   Warteliste-Beitritt im Verein). Ersetzt die page-lokalen .btn-admin und
   .btn-waitlist aus OrganisationPage.razor. */
.btn-primary-sm.mint {
    background: var(--mint);
    color: var(--ink);
}

.btn-primary-sm.mint:hover {
    background: var(--mint-deep);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Mint Pill-Button Basis (D-1 Foundation)

   .btn-primary  — solid ink pill with animated arrow on hover
   Use via <a class="btn-primary">Label</a>. Arrow on .btn-primary is produced
   via a ::after pseudo-element that slides right on :hover.
   Reference: designvorschlaege/06-mint.html, docs/design_system.md
   Note: Some pages (Home.razor, Login.razor etc.) still carry older inline
   .btn-primary definitions. They will override this global via CSS specificity
   until D01 (Button-Consolidation) raeumt das auf.
   Alle Outline-Cancel-Pills sind auf .btn-secondary-sm (+ .in-hero Modifier
   fuer Hero-Groesse) konsolidiert; Admin-Tabellen nutzen .btn-cancel-sm.
   --------------------------------------------------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ink);
    color: #fff;
    padding: 0.95rem 2.2rem;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-base, 1rem);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

.btn-primary::after {
    content: '→';
    transition: transform 0.2s ease;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--mint-deep);
    color: #fff;
}

.btn-primary:hover::after {
    transform: translateX(4px);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background: var(--muted);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-primary:disabled::after,
.btn-primary[aria-disabled="true"]::after {
    transform: none;
}

/* Batch I-D01: .btn-primary.on-dark — Variante fuer Ink/Mint-Gradient-Callouts
   (Home.razor Callout-Section). Mint-BG auf dunklem Gradient-Grund mit
   Ink-Text. Hover kehrt zu Weiss-BG + Ink-Text.
   Ersetzt .home-btn-primary--on-dark (Home-page-lokale Kopie). */
.btn-primary.on-dark {
    background: var(--mint);
    color: var(--ink);
    position: relative;
    z-index: 1;
}

.btn-primary.on-dark:hover {
    background: #fff;
    color: var(--ink);
}

.validation-message {
    /* Batch O — B12: Validation-Message-Font-Sizes vereinheitlicht (vorher 0.8rem;
       Drift auf 0.82rem/0.85rem page-lokal). 0.85rem = --fs-sm ist lesbarste
       Groesse und liegt ueber der WCAG-empfohlenen 12px-Schwelle.
       Batch O — C-11: Error-Rot auf --danger-Token gezogen (vorher #c00 —
       alle anderen Error-Styles nutzen bereits var(--danger, #b91c1c)). */
    color: var(--danger, #b91c1c);
    font-size: var(--fs-sm, 0.85rem);
    margin-top: 0.2rem;
}

#blazor-error-ui {
    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;
}

/* B-101 v2: FocusOnNavigate setzt tabindex="-1" auf h1 fuer Screen-Reader-Handoff
   nach Route-Wechsel. Diese Elemente sind nicht interaktiv und sollen keinen
   Focus-Indikator zeigen — unabhaengig von Browser-:focus-visible-Heuristiken. */
[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Batch J — G01 + C04: Globale :focus-visible Baseline
   (WCAG 2.4.7 Focus-Visible, 2.4.11 Focus Not Obscured)

   Bisher hatten nur Form-Inputs/Skip-Link/pwd-toggle einen sichtbaren Focus-
   Ring; Buttons/Links/Tabs fehlten oder der mint-soft-Ring hatte nur 1.09:1
   Kontrast (WCAG-Fail).

   Wichtig: Zeile 88 setzt `[b-*] { outline: none !important; }` fuer alle
   Blazor-Scoped-Elements, weshalb wir hier `!important` brauchen, um die
   Tastatur-Accessibility wiederherzustellen. Die [tabindex="-1"]-Regel
   oberhalb bleibt durch hoehere Spezifitaet + !important der stabile Schutz.
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--ink, #0a2e2a) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ink, #0a2e2a) !important;
    outline-offset: 2px !important;
}

/* Form-Inputs behalten ihren Mint-Glow via box-shadow, bekommen aber
   zusaetzlich eine sichtbare Outline fuer Tastatur-User. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ink, #0a2e2a) !important;
    outline-offset: 0 !important;
}

/* B-101-Schutz bleibt fuer alle Nicht-Interaktiven tabindex="-1"-Elemente
   (u.a. h1 nach FocusOnNavigate). Hier zusaetzlich explizit fuer
   :focus-visible, weil manche Browser die Heuristik anders bewerten. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Admin-Dichte (Design-Refresh D-5)

   Gemeinsame Shell fuer alle Admin*.razor-Pages. Admin ist dichter als die
   User-App: kleinere Paddings, kompaktere Pills, eng getaktete Tabellen.
   Die Tokens und Patterns folgen docs/design_system.md Abschnitt 1.

   Komponenten, die hier global definiert sind:
    - .admin-tabs / .tab           — Tab-Navigation (Mint-Underline aktiv)
    - .admin-section-header        — h3 + Action-Row (space-between)
    - .admin-table                 — kompakte Datentabelle, Mint-Hover
    - .inline-form                 — Panel fuer Create/Edit-Formulare
    - .form-grid / .form-group     — 2-Spalten-Form-Layout
    - .form-input (+ :focus)       — Input/Select/Textarea mit Mint-Focus
    - .checkbox-group              — Label+Checkbox inline
    - .btn-sm / .btn-danger        — Tabellen-Action-Pills (Outline)
    - .btn-approve                 — Tabellen-Action fuer "Freigeben" (Mint)
    - .btn-cancel-sm               — Sekundaerer Cancel-Button
    - .status-badge (.active/.blocked/.approved/.rejected/.pending)
    - .pill (+ .pill-active/.pill-blocked/.pill-course)
    - .success-msg / .error-msg    — Flash-Messages
    - .empty / .hint               — Placeholder-Texte
    - .modal-overlay / .modal-dialog — Overlay-Dialog (mit Aliasen .modal-backdrop/.modal)
   --------------------------------------------------------------------------- */

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border, rgba(10, 46, 42, 0.08));
    padding-bottom: 0;
}

.admin-tabs .tab {
    background: none;
    border: none;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
}

.admin-tabs .tab:hover {
    color: var(--mint-deep);
}

.admin-tabs .tab.active {
    color: var(--ink);
    border-bottom-color: var(--mint);
    font-weight: 600;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-section-header h2,
.admin-section-header h3,
.admin-section-header h4 {
    margin: 0;
    color: var(--ink);
}

/* Admin h3/h4 fallback color when inside Admin pages */
.admin-table,
.inline-form,
.info-block,
.settings-form,
.participant-section,
.admin-section-header {
    color: var(--text);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid rgba(10, 46, 42, 0.06);
}

.admin-table th {
    background: var(--card);
    color: var(--ink);
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--mint);
}

.admin-table td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(10, 46, 42, 0.05);
    font-size: 0.88rem;
    color: var(--text);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: var(--mint-softer);
}

.admin-table strong {
    color: var(--ink);
}

.empty {
    color: var(--muted);
    font-style: italic;
}

.hint {
    color: var(--muted);
    font-size: 0.85rem;
}

.inline-form {
    background: var(--mint-softer);
    border: 1px solid rgba(10, 46, 42, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.inline-form h4 {
    margin: 0 0 1rem;
    color: var(--ink);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-grid .span2 {
    grid-column: span 2;
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(10, 46, 42, 0.15);
    border-radius: 8px;
    font-size: 0.9rem;
    box-sizing: border-box;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-soft);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
}

.form-actions-inline {
    display: flex;
    gap: 0.5rem;
}

/* Kompakter Outline-Button fuer Tabellen-Aktionen. Token-basiert.
   Batch J — G03/I10: min-height 44px fuer WCAG 2.5.5 (Touch-Target).
   Inline-Flex + center-Align, damit der Text beim Hoehen-Zuwachs mittig
   bleibt und die Pill nicht nur vertikal wirkt wie ein leeres Feld. */
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(10, 46, 42, 0.15);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    /* Batch O — B04: Drift-Wert 0.78rem auf --fs-xs (0.75rem = 12px) gezogen. */
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    margin-right: 0.25rem;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-sm:last-child {
    margin-right: 0;
}

.btn-sm:hover {
    border-color: var(--mint);
    color: var(--mint-deep);
    background: var(--card);
}

.btn-sm.btn-approve {
    border-color: rgba(15, 118, 110, 0.3);
    color: var(--mint-deep);
}

.btn-sm.btn-approve:hover {
    background: var(--mint-soft);
    border-color: var(--mint);
    color: var(--mint-deep);
}

/* Batch J — C02: Coral-Text auf Weiss hatte nur 2.57:1 (WCAG-AA-Fail).
   Ersetzt durch --danger (#b91c1c) = 5.9:1 auf Weiss (AA-pass).
   Hover wechselt auf volle Danger-Fuellung mit weissem Text (>7:1). */
.btn-sm.btn-danger {
    border-color: var(--danger, #b91c1c);
    color: var(--danger, #b91c1c);
}

.btn-sm.btn-danger:hover {
    background: var(--danger, #b91c1c);
    border-color: var(--danger, #b91c1c);
    color: #fff;
}

.btn-sm.btn-remove {
    border-color: var(--danger, #b91c1c);
    color: var(--danger, #b91c1c);
}

.btn-sm.btn-remove:hover {
    background: var(--danger, #b91c1c);
    border-color: var(--danger, #b91c1c);
    color: #fff;
}

.btn-cancel-sm {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(10, 46, 42, 0.15);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-cancel-sm:hover {
    border-color: var(--mint);
    color: var(--mint-deep);
}

/* ---------------------------------------------------------------------------
   .admin-row-actions (UX-Audit U-019, Batch E)

   Wrapper fuer 2+ Action-Buttons in einer Tabellen-Zelle. Erzeugt sichtbaren
   Gap statt nur dem .btn-sm:not(:last-child) margin-right. Verwendet von
   AdminMembers, AdminRooms (und potenziell weiteren Admin-Tabellen).
   --------------------------------------------------------------------------- */
.admin-row-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Status-Badges: Aktiv/Freigegeben → Mint, Pending → Mint-Soft,
   Blocked/Rejected → Coral-Tint. */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-badge.status-active,
.status-badge.approved {
    background: var(--mint-soft);
    color: var(--mint-deep);
}

/* Batch J — C05: Coral-Text auf rgba(255,122,89,0.15)-Tint (~#ffe4db) hatte
   nur ~2.6:1 (WCAG-AA-Fail). Gefixt durch --danger-Text auf --danger-soft
   (Ratio > 7:1). Der rote Signal-Charakter bleibt erhalten. */
.status-badge.status-blocked,
.status-badge.rejected {
    background: var(--danger-soft, #fee2e2);
    color: var(--danger, #b91c1c);
}

.status-badge.pending {
    background: var(--mint-softer);
    color: var(--mint-deep);
    border: 1px solid var(--mint-soft);
}

/* Info-Pills fuer Detail-Seiten (Kurs/Frei/Aktiv/Gesperrt). */
.pill {
    background: var(--mint-softer);
    color: var(--ink);
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
}

.pill-course {
    background: var(--mint-soft);
    color: var(--mint-deep);
}

.pill-active {
    background: var(--mint-soft);
    color: var(--mint-deep);
}

/* Batch J — C05: siehe .status-badge.status-blocked-Kommentar oben. */
.pill-blocked {
    background: var(--danger-soft, #fee2e2);
    color: var(--danger, #b91c1c);
}

/* Flash-Messages (Success/Error) — Token-basiert */
.success-msg {
    background: var(--mint-soft);
    color: var(--mint-deep);
    border: 1px solid rgba(15, 118, 110, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
}

/* Batch J — C05: Coral-Text auf Coral-Tint hatte ~2.6:1 (WCAG-AA-Fail).
   Auf --danger / --danger-soft angehoben (Ratio > 7:1). */
.error-msg {
    background: var(--danger-soft, #fee2e2);
    color: var(--danger, #b91c1c);
    border: 1px solid rgba(185, 28, 28, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
}

/* Detail-Seiten: Info-Panel + KV-Liste + Stat-Card */
.info-block {
    background: var(--card);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(10, 46, 42, 0.06);
}

.info-block h3 {
    color: var(--ink);
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.kv dt {
    color: var(--muted);
    font-size: 0.85rem;
}

.kv dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.9rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.stat-card {
    background: var(--mint-softer);
    border: 1px solid rgba(15, 118, 110, 0.08);
    border-radius: var(--radius-md, 12px);
    padding: 0.85rem;
    text-align: center;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 0.25rem;
}

/* Select-Liste fuer Event-/Training-Auswahl in Teilnehmer-/Ausfall-Tab */
.select-btn,
.event-select-btn,
.training-select-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border, rgba(10, 46, 42, 0.08));
    border-radius: 12px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.select-btn:hover,
.event-select-btn:hover,
.training-select-btn:hover {
    border-color: var(--mint);
    background: var(--mint-softer);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
}

.select-btn strong,
.event-select-btn strong,
.training-select-btn strong {
    color: var(--ink);
}

.select-btn span,
.event-select-btn span,
.training-select-btn span {
    font-size: 0.85rem;
    color: var(--muted);
}

.participant-count {
    background: var(--mint-soft);
    color: var(--mint-deep);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    /* Batch O — B04: 0.78rem → --fs-xs (0.75rem). */
    font-size: var(--fs-xs, 0.75rem);
}

/* ---------------------------------------------------------------------------
   Modal-Overlay (Batch I-reduced, D03 — konsolidiert)

   Kanonische Klassen: .modal-overlay (Hintergrund) + .modal-dialog (Box).
   .modal-backdrop und .modal werden als Aliase mitgefuehrt, damit evtl.
   uebersehene Markup-Stellen weiterhin korrekt styled werden; die
   Razor-Markup-Migration auf .modal-overlay/.modal-dialog ist in dieser
   Session erfolgt (8 Admin-Modale + Profile + MyUnenrollments).

   Padding 1.75rem uebernimmt den etwas grosszuegigeren Wert der frueheren
   .modal-box (MyUnenrollments) — vorher war .modal-dialog bei 1.5rem;
   Admin-Modale bekommen jetzt 0.25rem mehr Atemspaeche.
   --------------------------------------------------------------------------- */
.modal-backdrop,
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 46, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal,
.modal-dialog {
    background: var(--card);
    border-radius: 12px;
    padding: 1.75rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(10, 46, 42, 0.3);
}

.modal h4,
.modal-dialog h4 {
    margin: 0 0 0.75rem;
    color: var(--ink);
}

.modal p,
.modal-dialog p {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Inline-Select (Rolle in Tabellenzeile) */
.inline-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(10, 46, 42, 0.15);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

.inline-select:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 2px var(--mint-soft);
}

/* Toggle (Checkbox + Label in Section-Header) */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

/* ===========================================================================
   D-7 Template-Consolidation — Globale Pattern-Klassen
   ===========================================================================
   Diese Sektion konsolidiert Inline-CSS-Bloecke aus den Pages in globale,
   wiederverwendbare Pattern-Klassen. Siehe docs/design_system.md Abschnitt
   "Global Components" fuer Usage-Guide.

   Inhalt:
    - Block-Buttons         (.btn-primary-block)
    - Card-Patterns         (.page-card)
    - Auth-Page-Wrapper     (.auth-page, .auth-page-wide, .auth-hint, .auth-link)
    - Form-Styles           (.form-hint, .form-textarea;
                             .form-group/-row/-input sind oben unter Admin-
                             Dichte definiert und werden hier nur erweitert)
    - Banner-Patterns       (.banner-success, .banner-error, .banner-info)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Block-Buttons — full-width Ink/Hollow-Pills fuer Form-CTAs.
   Keine Pfeil-Animation (::after), weil Form-CTA kein Marketing-Charakter.
   Ersetzt die 10 page-lokalen .btn-primary-Redefinitionen aus D-3/D-4.
   --------------------------------------------------------------------------- */
.btn-primary-block {
    display: block;
    width: 100%;
    background: var(--ink);
    color: #fff;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-base, 1rem);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
}

.btn-primary-block:hover {
    background: var(--mint-deep);
    color: #fff;
}

.btn-primary-block:disabled,
.btn-primary-block[disabled],
.btn-primary-block[aria-disabled="true"] {
    background: var(--muted);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Card-Patterns — Page-Card (groessere Card-Variante).
   .page-card        : Groessere Card-Variante (2rem Padding) fuer Detail-
                       Seiten, OrganisationPage, Admin-Detail-Panels.
   --------------------------------------------------------------------------- */
.page-card {
    background: var(--card);
    border: 1px solid rgba(10, 46, 42, 0.06);
    border-radius: var(--radius-lg, 20px);
    padding: 1.75rem 2rem;
}

/* ---------------------------------------------------------------------------
   Auth-Page-Wrapper — zentrierte Form-Card (420px fuer Login/Forgot/Reset/
   Confirm, 520px fuer Register/AcceptInvite). Etabliert in D-3.

   .auth-page        : 420px-Variante (default)
   .auth-page-wide   : 520px-Variante (Register, AcceptInvite)
   .auth-hint        : Muted Einleitungs-Copy in der Auth-Card
     .--center       : zentriert
     .--lead         : mehr Abstand unten (Lead-Absatz)
   .auth-link        : Zentrierter Nav-Link-Text ("Zurueck zum Login",
                       "Bereits registriert?"); .a innerhalb mint-deep+bold
   --------------------------------------------------------------------------- */
.auth-page {
    max-width: 420px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: var(--card);
    border-radius: var(--radius-lg, 20px);
    border: 1px solid rgba(10, 46, 42, 0.06);
}

.auth-page-wide {
    max-width: 520px;
}

.auth-page h2 {
    text-align: center;
    margin: 0 0 1.5rem;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.auth-hint {
    color: var(--muted);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.auth-hint--center {
    text-align: center;
}

.auth-hint--lead {
    margin-bottom: 1.5rem;
}

.auth-link {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.auth-link a {
    color: var(--mint-deep);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Form-Styles — Label/Hint/Textarea als Erweiterung zu bestehenden
   .form-group/.form-row/.form-input (Admin-Dichte-Block oben).

   Hinweis: .form-group hat oben (Admin) margin-bottom:0, weil Admin-Forms
   in .form-grid gerendert werden. In Auth-Pages werden .form-group-Eintraege
   gestackt — dort setzt das Template zusaetzlich margin-bottom via
   .form-group:last-child-Overrides oder expliziten Auth-Stacks. Wir kippen
   .form-group oben *nicht*, um Admin-Layouts nicht zu brechen.
   Die Auth-Pages erhalten daher per spezifischer Regel .auth-page .form-group
   { margin-bottom: 1rem; } das gestackte Layout.
   --------------------------------------------------------------------------- */
/* Batch I-reduced (D05): .form-label entfernt — 0 Razor-Usages.
   Forms verwenden .form-group label (Admin) bzw. .auth-page .form-group label
   (Auth); beide Selektoren liefern das gleiche Styling ueber den Element-
   Selector. Neue Form-Pattern ausserhalb einer .form-group sollten eine
   .form-group oder .auth-page-Huelle bekommen. */

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

.form-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(10, 46, 42, 0.15);
    border-radius: 10px;
    font-size: var(--fs-base, 1rem);
    box-sizing: border-box;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    min-height: 5rem;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-soft);
}

/* Auth-Pages brauchen gestackte Form-Groups (keine Grid-Zellen wie Admin). */
.auth-page .form-group {
    margin-bottom: 1rem;
}

.auth-page .form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

/* Auth-Pages: .form-row als 2-Spalter (Admin hat den gleichen Name im
   Admin-Block als 1fr 1fr — kompatibel). */
.auth-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth-page .form-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: var(--fs-base, 1rem);
}

.auth-page .form-input:disabled {
    background: var(--mint-softer);
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Banner-Patterns — breitere, 12px-radius Variante der .success-msg/.error-msg
   aus dem Admin-Block. Verwendet von Auth-Pages + Enroll-Flows.

   .banner-success   : Mint-softer + Mint-deep
   .banner-error     : Rose-Tint + Rot
   .banner-info      : Mint-soft + Ink
   --------------------------------------------------------------------------- */
.banner-success {
    background: var(--mint-softer);
    color: var(--mint-deep);
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 118, 110, 0.18);
    font-size: 0.9rem;
}

.banner-success a {
    color: var(--mint-deep);
    font-weight: 600;
}

.banner-error {
    background: #fef2f2;
    color: var(--danger, #b91c1c);
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(185, 28, 28, 0.15);
    font-size: 0.9rem;
}

.banner-info {
    background: var(--mint-soft);
    color: var(--ink);
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 118, 110, 0.15);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Badge-Patterns — keine globalen Badge-Klassen. Genutzte Badges sind
   page-lokal (.org-role-badge in Dashboard, .pill-event in MyUnenrollments).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Toast (UX-Audit U-005, Batch C — Feedback)

   Fixed-position Feedback-Banner fuer Erfolg/Fehler nach Anmeldung,
   Abmeldung, Verein-Beitritt etc. Auto-Dismiss steuert die aufrufende
   Page (StateHasChanged + Task.Delay), Pattern wie successMsg in
   AdminTrainings.razor. Klick auf das X schliesst sofort.

   Varianten:
     .toast.toast-success  : Mint-Token, dezent
     .toast.toast-error    : Coral-Tint
   --------------------------------------------------------------------------- */
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(10, 46, 42, 0.18);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: toast-slide-in 0.2s ease;
}

.toast-success {
    background: var(--mint-softer);
    color: var(--mint-deep);
    border: 1px solid rgba(15, 118, 110, 0.25);
}

.toast-error {
    background: #fef2f2;
    color: var(--danger, #b91c1c);
    border: 1px solid rgba(185, 28, 28, 0.2);
}

.toast-text {
    flex: 1;
    line-height: 1.35;
}

/* Batch J — G03/I10: min 44x44 Touch-Target (WCAG 2.5.5). */
.toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    opacity: 0.65;
    font-family: inherit;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toast-slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Password-Toggle (UX-Audit U-033, Batch D)

   Wrapper-Pattern fuer Passwort-Inputs mit "Anzeigen/Verbergen"-Button rechts
   im Feld. Verwendet von Login, Register und Profile (4 Felder dort).

   Markup:
     <div class="pwd-wrapper">
         <input type="password" class="form-input" ... />
         <button type="button" class="pwd-toggle" aria-pressed="..."
                 aria-label="...">Anzeigen</button>
     </div>

   Der Button bekommt rechtsseitiges Padding im Input via padding-right, damit
   der Text nicht unter den Toggle-Button laeuft.
   --------------------------------------------------------------------------- */
.pwd-wrapper {
    position: relative;
    display: block;
}

.pwd-wrapper .form-input {
    padding-right: 5.5rem;
}

/* Batch J — G03/I10: min 44x44 Touch-Target (WCAG 2.5.5). Der Toggle sitzt
   innerhalb des Auth-Form-Inputs (44px hoch via .auth-page .form-input),
   darum passt 44x44 ohne Overflow. */
.pwd-toggle {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--mint-deep);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.pwd-toggle:hover {
    background: var(--mint-soft);
    color: var(--ink);
}

.pwd-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--mint-soft);
}

/* Password-Strength-Meter (.pwd-strength*) wurde nach
   Components/Pages/Register.razor.css verschoben (Per-Page-CSS-Splitting
   2026-04-24), weil die Klassen ausschliesslich auf Register.razor genutzt
   werden. */

/* ---------------------------------------------------------------------------
   Mobile Responsiveness (B-311, Block 5 Cross-Cutting)

   Pragmatische Mobile-Variante: keine Hamburger-Nav, keine Framework-Abhaengigkeit.
   Ziel: kein Horizontal-Overflow auf 375-500px, tappable Controls, lesbare
   Tabellen/Tabs via horizontalem Scroll im Wrapper.

   Strategie:
   - Nav-Links stacken / wrappen, Header-Padding reduzieren.
   - Hero-Typografie kleiner.
   - Grid-Layouts auf 1 Spalte.
   - Tables und Tab-Leisten bekommen horizontal scroll (pragmatisch, Karten-
     Rework waere groesser als Zeit-Cap erlaubt).
   - Buttons behalten Mindest-Tap-Target durch globale Paddings.

   Nur im `max-width: 768px`-Scope. Desktop-Regeln bleiben unveraendert.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Layout-Shell ---------------------------------------------------------- */
    .ritmano-header {
        padding: 0 0.75rem;
    }

    .ritmano-nav {
        height: auto;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    /* Batch K — I20: Authenticated-Nav hat 5 Links + Logo; auf 375px reichen
       0.75rem gap nicht, um ohne Ueberhang zu wrappen. Enger gap + kompaktere
       Link-Schrift laesst 2 Zeilen sauber stacken. */
    .ritmano-nav-links {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ritmano-nav-links ::deep a:not(.nav-cta-primary):not(.nav-cta-ghost) {
        font-size: 0.85rem;
        padding: 0.3rem 0.5rem;
    }

    .nav-cta-primary,
    .nav-cta-ghost {
        padding: 0.4rem 0.9rem;
        font-size: 0.85rem;
    }

    .ritmano-main {
        padding: 1.25rem 0.85rem;
    }

    .ritmano-footer {
        padding: 1.5rem 0.85rem;
        font-size: 0.8rem;
    }

    /* Home-Mobile-Overrides (.home-*) wurden nach Home.razor (inline <style>)
       verschoben — Per-Page-CSS-Splitting 2026-04-24. */

    /* Batch I-D04: .home-btn-secondary → .btn-secondary-sm.in-hero. Nur
       justify-content bleibt als Mobile-Override (stretched auf Mobile via
       flex-column im Hero, Label zentriert). Die Klasse selbst wird von
       mehreren Pages genutzt, deshalb bleibt die Regel global. */
    .btn-secondary-sm.in-hero {
        justify-content: center;
    }

    /* Admin-Tabellen + Tabs ------------------------------------------------- */
    .admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .admin-tabs .tab {
        padding: 0.55rem 0.9rem;
        font-size: 0.88rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .admin-table thead,
    .admin-table tbody,
    .admin-table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    .admin-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Forms ----------------------------------------------------------------- */
    .form-grid,
    .form-row,
    .auth-page .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .form-input,
    .form-textarea,
    .auth-page .form-input {
        width: 100%;
        font-size: var(--fs-base, 1rem); /* iOS zoom-prevention threshold */
    }

    /* Buttons — groessere Tap-Flaeche auf Mobile ---------------------------- */
    .btn-primary,
    .btn-primary-sm {
        padding: 0.65rem 1.1rem;
        /* Batch O — B04: 0.92rem → --fs-sm (0.875rem). */
        font-size: var(--fs-sm, 0.875rem);
    }

    /* OrganisationPage / generische Card-Grids ------------------------------ */
    /* D-MIG-07 (2026-05-09): .event-grid/.feature-grid/.discover-grid/.card-grid
       als unbenutzte Selektoren aus dieser Komma-Liste entfernt — keine Razor-Page
       referenziert sie mehr (verifiziert per repo-weitem Grep). */
    .training-list,
    .org-grid {
        grid-template-columns: 1fr !important;
    }

    /* Batch K — I07: Stat-Grid + KV auf 1 Spalte. .kv bekommt zusaetzlich eine
       Fett-Gewichtung auf dem Key, weil der 140px-Label sonst ohne Spalten-
       Kontext mit dem Wert verschmilzt. */
    .stat-grid {
        grid-template-columns: 1fr;
    }
    .kv {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }
    .kv dt {
        font-weight: 600;
        margin-bottom: 0.1rem;
    }
    .kv dd {
        margin-bottom: 0.5rem;
    }

    /* Batch K — I09: nowrap auf Admin-Tabellen aufheben, damit schmale Viewports
       nicht zu ueberlangem horizontalem Scroll zwingen. Action-Buttons-Spalten
       (admin-row-actions, aufeinanderfolgende .btn-sm) bleiben nowrap, damit
       "Bearbeiten | Loeschen" nicht umbricht. */
    .admin-table {
        white-space: normal;
    }
    .admin-table td,
    .admin-table th {
        white-space: normal;
    }
    .admin-table td.admin-row-actions,
    .admin-table .admin-row-actions,
    .admin-table .btn-sm + .btn-sm {
        white-space: nowrap;
    }

    /* Batch K — A12: Page-Container-Padding reduzieren, damit 16px statt 28-32px
       am Rand verschwendet wird (mehr Platz fuer Inhalt auf 375px). */
    .page-card {
        padding: var(--space-4, 1rem);
    }
    .auth-page,
    .auth-page-wide {
        padding: var(--space-5, 1.5rem) var(--space-4, 1rem);
        margin: 1.5rem auto;
    }

    /* Batch K — B14: Heading-Groessen auf Mobile leicht reduzieren. h1 bleibt
       hierarchisch groesster, aber nicht 2.4-2.6rem. */
    h1 {
        font-size: var(--fs-3xl, 1.875rem);
    }
    h2 {
        font-size: var(--fs-2xl, 1.5rem);
    }

    /* FullCalendar pragmatisch zusammenhalten (wide Monats-Grid bleibt leider
       breit; Fix via View=listWeek waere Code-Aenderung in Calendar-Wrapper
       Page, aus Zeit-Cap heraus als Folge-Backlog dokumentiert).
       Batch O — B04: 0.78rem → --fs-xs (0.75rem). */
    .fc,
    .fc-view-harness {
        font-size: var(--fs-xs, 0.75rem);
    }

    /* Kiosk-Display-Mobile-Overrides (.kiosk-*) wurden nach KioskDisplay.razor
       (inline <style> @@media-Block) verschoben — Per-Page-CSS-Splitting
       2026-04-24. */

    /* Modals ---------------------------------------------------------------- */
    .modal,
    .modal-dialog {
        max-width: 92vw;
        margin: 0 auto;
    }

    /* Toast: auf Mobile volle Breite mit Rand statt schmal rechts. */
    .toast {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }

    /* Verhindert dass irgendein schmales Kind horizontalen Scroll auf body
       triggert (Safety-Net). */
    html, body {
        overflow-x: hidden;
    }
}

/* ---------------------------------------------------------------------------
   Batch G — D02: globaler .btn-secondary-sm

   Kompakte Sekundaer-Pill analog zu .btn-primary-sm. Die Klasse wurde bisher
   in 5 Admin-Pages verwendet, war aber nur in AdminSettings.razor scoped
   definiert — in AdminTrainings/AdminRooms/AdminEvents fiel sie auf den
   Browser-Default zurueck. Jetzt global, mit dem Look aus AdminSettings.
   --------------------------------------------------------------------------- */
.btn-secondary-sm {
    display: inline-block;
    background: var(--card);
    color: var(--ink);
    border: 1px solid rgba(10, 46, 42, 0.15);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-secondary-sm:hover {
    border-color: var(--mint);
    color: var(--mint-deep);
}

.btn-secondary-sm:disabled,
.btn-secondary-sm[disabled],
.btn-secondary-sm[aria-disabled="true"] {
    border-color: var(--border, rgba(10, 46, 42, 0.08));
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Batch I-D04: .btn-secondary-sm.in-hero — Hero-Groesse (matched zu .btn-primary).
   Fuer den Home-Hero-Abschnitt, wo die Secondary-Pill visuell neben .btn-primary
   steht und die gleiche Hoehe braucht. Ersetzt die page-lokale .home-btn-secondary. */
.btn-secondary-sm.in-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2.2rem;
    font-size: var(--fs-base, 1rem);
}

/* ---------------------------------------------------------------------------
   Batch G — J06: Rechtliches-Footer + Legal-Pages

   Globaler Footer (unterhalb MainLayouts "Powered by"-Footer) mit Links zu
   Impressum/Datenschutz/AGB. Eigene .legal-page-Klasse strukturiert die
   Platzhalter-Seiten.
   --------------------------------------------------------------------------- */
.app-footer {
    border-top: 1px solid var(--border, rgba(10, 46, 42, 0.08));
    padding: 1.5rem 1rem;
    margin-top: 3rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.app-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-footer .footer-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Batch J — G03/I10: min 44px Touch-Target-Hoehe (WCAG 2.5.5). inline-flex
   laesst den Link-Text im bestehenden Footer-Layout weiter inline fliessen,
   aber bietet Tap-Area auch fuer kleine Finger. */
.app-footer .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.app-footer .footer-nav a:hover {
    color: var(--ink);
}

/* Legal-Pages — Struktur fuer Impressum/Datenschutz/AGB-Platzhalter. Nutzt
   die bestehende .page-card als Container. */
.legal-page {
    max-width: 860px;
    margin: 2rem auto;
}

.legal-page h1 {
    color: var(--ink);
    font-size: 1.9rem;
    letter-spacing: -0.5px;
    margin: 0 0 1.25rem;
}

.legal-page h2 {
    color: var(--ink);
    font-size: 1.1rem;
    margin: 1.75rem 0 0.5rem;
}

.legal-page section {
    color: var(--text);
}

.legal-page p,
.legal-page ul {
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.legal-page ul {
    padding-left: 1.25rem;
}

.legal-page .legal-placeholder {
    color: var(--muted);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Batch J — H05: prefers-reduced-motion
   (WCAG 2.3.3 Animation from Interactions)

   Respektiert OS-Einstellung "Animationen reduzieren" / "Bewegung reduzieren".
   Reduziert alle Animationen, Transitionen und Smooth-Scroll auf ein Minimum.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Batch M — Navigation + Orientierung

   E01 / H16  Active-State in Top-Nav (aria-current=page)
   E02        Breadcrumbs (.breadcrumbs + Items)
   E03 / G09  Globale .back-link-Klasse (ersetzt page-lokale Kopien)
   --------------------------------------------------------------------------- */

/* E01/H16 — Top-Nav Active-State.
   Der Selector muss robust gegen Blazor-CSS-Isolation sein, deshalb liegt die
   Regel hier global. aria-current wird in MainLayout/AuthLinks gesetzt.
   Lighthouse-Extended-Audit 2026-04-24: --mint-deep auf --ink-BG ergab nur
   2.66:1 Kontrast. --mint (heller Brand-Mint #2dd4bf) auf --ink gibt ~8:1. */
.ritmano-nav-links a[aria-current="page"] {
    color: var(--mint);
    font-weight: 600;
    border-bottom: 2px solid var(--mint);
    padding-bottom: 2px;
}

/* E02 — Breadcrumbs. */
.breadcrumbs {
    margin-bottom: var(--space-4, 1rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--muted);
}
.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}
.breadcrumbs__item { display: inline-flex; align-items: center; }
.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin: 0 var(--space-2, 0.5rem);
    color: var(--muted);
    opacity: 0.6;
}
.breadcrumbs__item a {
    color: var(--muted);
    text-decoration: none;
}
.breadcrumbs__item a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs__item--current { color: var(--ink); font-weight: 600; }

/* E03/G09 — Einheitliche Back-Link-Klasse.
   Page-lokale Copies in MyCalendar.razor / Calendar.razor bleiben vorerst
   stehen (optische Aequivalenz), neue Nutzungen verwenden diese Klasse. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-sm, 0.875rem);
    margin-bottom: var(--space-4, 1rem);
}
.back-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* =====================================================================
   Batch L — Skeleton / Spinner fuer Loading-States (F01)
   Ziel: "Laden..."-Text durch visuelle Platzhalter ersetzen.
   ===================================================================== */
@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--mint-softer, #ecfdf5) 25%,
        var(--mint-soft, #ccfbf1) 50%,
        var(--mint-softer, #ecfdf5) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    display: inline-block;
    width: 100%;
    min-height: 1em;
}
.skeleton-card {
    padding: var(--space-4, 1rem);
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(10,46,42,0.08));
    border-radius: 12px;
    margin-bottom: var(--space-3, 0.75rem);
}
.skeleton-line {
    height: 0.9em;
    margin-bottom: var(--space-2, 0.5rem);
}
.skeleton-line--title {
    width: 40%;
    height: 1.3em;
}
.skeleton-line--short {
    width: 60%;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; opacity: 0.8; }
}

/* ---------------------------------------------------------------------------
   Batch K — I14 + I19: Safe-Area-Inset fuer iPhone-Notch / Home-Indicator

   Respektiert env(safe-area-inset-*) auf Geraeten mit Notch (iPhone X+) und
   Home-Indicator-Bar. Die Top-Nav wird nicht angepasst, weil sie in
   MainLayout.razor.css scoped definiert ist (::deep aus app.css ist fuer
   padding-Topaenderungen nicht zuverlaessig). Stattdessen bekommt body einen
   unteren Safe-Area-Padding und Toasts/App-Footer rutschen unter den Notch/
   Home-Indicator.
   --------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .toast {
        top: max(1rem, env(safe-area-inset-top));
        right: max(1rem, env(safe-area-inset-right));
    }

    .app-footer {
        padding-bottom: max(var(--space-5, 1.5rem), env(safe-area-inset-bottom));
        padding-left: max(var(--space-4, 1rem), env(safe-area-inset-left));
        padding-right: max(var(--space-4, 1rem), env(safe-area-inset-right));
    }
}

/* Safe-Area: auf Mobile wird der Toast voll-breit — dort left/right via env. */
@media (max-width: 768px) {
    @supports (padding: env(safe-area-inset-top)) {
        .toast {
            top: max(0.5rem, env(safe-area-inset-top));
            left: max(0.5rem, env(safe-area-inset-left));
            right: max(0.5rem, env(safe-area-inset-right));
        }
    }
}

/* ==========================================================================
   Batch N — Lesbarkeit, Typo-Konsistenz, Rhythmus, Disabled-Baseline
   --------------------------------------------------------------------------
   Kombiniert B07, B08 (inline vorgenommen, hier nicht dupliziert), B09, G04
   (uebersprungen — siehe Report), G07, A07, A14. Reine Additive-Regeln,
   vorhandene spezifische Regeln (z.B. Button-Disabled-Styles, h1-Overrides
   im Media-Query) bleiben durch hoehere Spezifitaet oder spaetere Definition
   aktiv.
   ========================================================================== */

/* B07 — Lesbarkeit: Fliesstext maximal ca. 65ch (WCAG 1.4.8 + lesbar).
   Gilt fuer Paragraphen innerhalb von .legal-page, .auth-page, .page-card
   und die .org-description (Vereins-Public-Page).
   Admin-Tabellen und Listen sind bewusst ausgenommen.
   Hinweis: .org-description ist zusaetzlich in OrganisationPage.razor
   page-scoped definiert — dort kann die Regel durch Scoped-CSS gewinnen.
   Die Regel hier schadet nicht; max-width wird ebenfalls wirken, solange
   die scoped-Regel sie nicht explizit ueberschreibt. */
.legal-page p,
.auth-page p,
.page-card > p,
.org-description {
    max-width: 65ch;
}

/* B09 — Monospace fuer technische Werte (URLs, Tokens, IDs).
   Aktuell genutzte Klassen: .mono (AdminSettings Kiosk-URL/Key).
   .token und .kiosk-url-display werden (noch) nicht verwendet und daher
   nicht aufgenommen. <code> als sinnvolle Default-Ergaenzung mitgenommen. */
.mono,
code {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", "SF Mono",
                 Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
}

/* G07 — Disabled-Basis-Zustand (kann von spezifischeren Regeln in
   .btn-primary:disabled, .btn-secondary:disabled usw. ueberschrieben werden).
   Pointer-events: none verhindert versehentliches Ausloesen durch Klicks. */
button:disabled,
button[disabled],
[role="button"][aria-disabled="true"],
a[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* A07 — Konsistente Section-Gaps innerhalb von Seiten.
   Basis fuer nicht-spezifisch gestylte <section> und bestehende .org-section. */
section,
.org-section {
    margin-bottom: var(--space-6, 2rem);
}
section:last-child,
.org-section:last-child {
    margin-bottom: 0;
}

/* A14 — Vertikaler Rhythmus auf Heading-/Paragraph-Ebene.
   In app.css existieren KEINE globalen h1/h2/h3/p-margins (nur im
   @media-Block werden Heading-Font-Sizes auf Mobile reduziert). Daher sicher,
   diese Basis-Regeln einzufuehren. Page-scoped Overrides bleiben moeglich. */
h1 {
    margin-top: 0;
    margin-bottom: var(--space-5, 1.5rem);
}
h2 {
    margin-top: var(--space-6, 2rem);
    margin-bottom: var(--space-3, 0.75rem);
}
h3 {
    margin-top: var(--space-5, 1.5rem);
    margin-bottom: var(--space-2, 0.5rem);
}
p {
    margin-top: 0;
    margin-bottom: var(--space-4, 1rem);
}

/* ==========================================================================
   Batch O — Low-Impact-Politur (2026-04-18)
   --------------------------------------------------------------------------
   Pragmatische Auswahl der Top-Wins aus den UX-Deep-Audits (Severity: Low).
   Nicht: Button-/Card-/Modal-Konsolidierungen (das uebernimmt Batch I).
   --------------------------------------------------------------------------
   Enthalten:
     F12 + G06   Modal-Open-Transition (fade-in + slight drop-in)
     G05         Active/Pressed-State-Feedback auf Buttons
     B11         Global .form-input:disabled-Styling
     B10         Inputs global auf --fs-base (iOS-Zoom-Prevention)
     B04         Drift-Font-Sizes in app.css auf Scale-Werte gezogen
   ========================================================================== */

/* F12 + G06 — Modal-Open-Transition.
   Modale (.modal-overlay/.modal-backdrop > .modal bzw. .modal-dialog) popten
   bisher ohne Animation auf. Ein 180ms-Fade-In mit leichtem Drop gibt dem
   User visuelles Feedback, dass der Dialog gerade erscheint, ohne die
   Interaktion zu verzoegern. prefers-reduced-motion wird respektiert. */
@keyframes modal-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-overlay,
.modal-backdrop {
    animation: modal-fade-in 0.18s ease-out;
}
.modal,
.modal-dialog {
    animation: modal-fade-in 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-backdrop,
    .modal,
    .modal-dialog {
        animation: none;
    }
}

/* G05 — Active/Pressed-State-Feedback.
   Buttons hatten Hover, aber keine taktile Rueckmeldung beim Klick. Ein
   1px-Absenken signalisiert den gedrueckten Zustand (klassisches Affordance-
   Pattern, kostenlos auf jedem GPU). */
.btn-primary:active,
.btn-primary-sm:active,
.btn-primary-block:active,
.btn-secondary-sm:active,
.nav-cta-primary:active,
.nav-cta-ghost:active,
.btn-sm:active,
.btn-cancel-sm:active {
    transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary:active,
    .btn-primary-sm:active,
    .btn-primary-block:active,
    .btn-secondary-sm:active,
    .nav-cta-primary:active,
    .nav-cta-ghost:active,
    .btn-sm:active,
    .btn-cancel-sm:active {
        transform: none;
    }
}

/* B11 — Global .form-input:disabled.
   Bisher war nur .auth-page .form-input:disabled definiert (Z. ~1198) und
   Profile hatte eine page-lokale Variante. Dadurch wirken Admin-Forms mit
   disabled-Inputs optisch unveraendert (verwirrt den User). Globale Baseline
   hebt den Disabled-State eindeutig ab. Spezifischere Regeln (auth-page,
   Profile) ueberschreiben diesen Default weiterhin. */
.form-input:disabled,
.form-input[readonly] {
    background: var(--mint-softer, #ecfdf5);
    color: var(--muted);
    cursor: not-allowed;
}

/* B10 — iOS-Zoom-Prevention global.
   Inputs mit font-size < 16px triggern auf iOS Safari einen Auto-Zoom auf
   das Feld (stoerend, weil kein Zoom-Out-Button vorhanden ist). Bisher war
   der Override nur im @media(max-width:768px)-Block; auf Tablet/Small-Laptop
   (>=768px) blieben die Admin-Input-Styles mit 0.9rem. Die globale Regel
   zieht alle generischen Inputs auf --fs-base (1rem = 16px). Page-spezifische
   Klassen (.ft-form .form-input, .inline-select) ueberschreiben via
   Spezifitaet weiterhin. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    font-size: var(--fs-base, 1rem);
}


/* ==========================================================================
   Utility-Klassen — Phase 1 Konsolidierung 2026-05-08
   --------------------------------------------------------------------------
   Diese Utilities ersetzen Inline-`style="..."`-Anweisungen in `.razor`-Files
   gemaess `docs/styling.md` Sektion 5 NoGo #1. Werte-1:1-Spiegel der zuvor
   inline gesetzten Werte — keine Aenderung der visuellen Wirkung.
   ========================================================================== */

.u-mt-1 { margin-top: 0.25rem; }
.u-mt-2 { margin-top: 0.5rem; }
.u-mt-3 { margin-top: 0.75rem; }
.u-mt-4 { margin-top: 1rem; }
.u-mt-5 { margin-top: 1.5rem; }

.u-mb-4 { margin-bottom: 1rem; }

.u-ml-2 { margin-left: 0.5rem; }

.u-d-block { display: block; }
.u-d-inline-block { display: inline-block; }

/* No-underline-Helper fuer Anker, die als Buttons gerendert werden. */
.u-no-underline { text-decoration: none; }

/* Inline-Toolbar-Row: Flex-Container mit kleinem Gap, vertikal zentriert.
   Nutzung: Page-Header-Action-Cluster, Tabellen-Toolbar-Cluster. */
.u-row-tight {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Variante mit groesserem Gap (0.75rem) fuer Form-Aktion-Cluster. */
.u-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Space-between Header-Row (Flex-Container, Items getrennt). */
.u-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Wrap-Variante mit flex-end alignment fuer Filter-Bars. */
.u-row-filter {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Form-Group-Width-Constraints (Form-Cells in Filter-Rows). */
.u-fg-min-150 { min-width: 150px; }
.u-fg-min-180 { min-width: 180px; }
.u-fg-max-120 { max-width: 120px; }

/* Tabellen-Spaltenbreiten (gilt auf <th>). */
.u-col-100 { width: 100px; }
.u-col-110 { width: 110px; }
.u-col-160 { width: 160px; }
.u-col-180 { width: 180px; }
.u-col-200 { width: 200px; }

/* Margin-Reset fuer paragraf inside small hint-areas. */
.u-m-0-x-mb-3 { margin: 0 0 0.75rem; }

/* Hint-Modifier — Block-Display + 0.25rem-Top fuer Erklaer-Saetze unter
   Checkboxen (kommt in mehreren Admin-Formularen vor). */
.hint--block-mt-1 {
    display: block;
    margin-top: 0.25rem;
}

/* Flex-Row mit Wrap und 0.75rem-Top — fuer Action-Cluster auf Public-Pages. */
.u-row-wrap-mt-3 {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   Automated-Audit 2026-04-23 — FullCalendar A11y-Overrides
   ========================================================================== */
/* axe color-contrast: FullCalendar rendert .fc-event-time + .fc-event-title
   mit white text auf eventColor-BG. Bei den Ritmano-Event-Farben (mint/coral/
   blue) reicht das nicht fuer WCAG AA (~2-3:1). Wir setzen Text auf --ink,
   das liefert auf allen genutzten Event-Hintergruenden >=7:1. */
.fc .fc-event-time,
.fc .fc-event-title,
.fc .fc-event-main-frame,
.fc-daygrid-event .fc-event-time,
.fc-daygrid-event .fc-event-title {
    color: var(--ink, #0a2e2a);
    font-weight: 600;
}


/* ==========================================================================
   Pre-Launch-Site v0.3.0 — Layout + Navigation + Badges + Sections
   ========================================================================== */

/* --- Layout ---------------------------------------------------------------- */
.pl-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Navigation ------------------------------------------------------------ */
.pl-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.pl-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    flex-wrap: wrap;
}

.pl-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    flex-wrap: wrap;
}

.pl-nav-links a {
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}

.pl-nav-links a:hover {
    color: var(--mint-deep);
}

.pl-nav-active {
    color: var(--mint-deep) !important;
    font-weight: 700 !important;
}

/* CTA-Button inline in Nav */
.pl-nav-links a.in-nav {
    margin-left: auto;
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-4);
    color: #fff;
}

.pl-nav-links a.in-nav:hover {
    color: #fff;
}

/* --- Language Toggle ------------------------------------------------------- */
.pl-lang-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--muted);
}

.pl-lang-toggle a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    padding: 2px var(--space-1);
    border-radius: 4px;
    transition: color 0.15s ease;
}

.pl-lang-toggle a:hover {
    color: var(--mint-deep);
}

.pl-lang-active {
    color: var(--mint-deep) !important;
    font-weight: 700 !important;
}

/* --- Early Access Badge ---------------------------------------------------- */
.pl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--mint-soft);
    color: var(--mint-deep);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--mint);
}

.pl-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint-deep);
    animation: pl-pulse 2s infinite;
}

@keyframes pl-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* --- Hero Section ---------------------------------------------------------- */
.pl-hero {
    text-align: center;
    padding: var(--space-8) var(--space-5) var(--space-7);
    position: relative;
    overflow: hidden;
}

.pl-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mint-soft) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.pl-hero > * {
    position: relative;
    z-index: 1;
}

.pl-hero h1 {
    font-size: clamp(var(--fs-2xl), 5vw, var(--fs-hero));
    font-weight: 800;
    color: var(--ink);
    line-height: var(--lh-tight);
    margin: var(--space-4) 0 var(--space-3);
}

.pl-hero-sub {
    font-size: var(--fs-lg);
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto var(--space-6);
    line-height: var(--lh-relaxed);
}

.pl-hero-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Status Banner --------------------------------------------------------- */
.pl-status-banner {
    background: var(--mint-softer);
    border: 1px solid var(--mint);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    max-width: 700px;
    margin: 0 auto var(--space-6);
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-relaxed);
    text-align: center;
}

/* --- Feature Cards --------------------------------------------------------- */
.pl-features-grid .feature-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--space-2);
    display: block;
}

/* --- Feature Grid ---------------------------------------------------------- */
.pl-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* --- Page Sections --------------------------------------------------------- */
.pl-section {
    padding: var(--space-7) var(--space-5);
}

.pl-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.pl-section-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

/* D-MIG-07 (2026-05-09): .pl-section-lead entfernt — in keiner PreLaunch-Page
   mehr referenziert (verifiziert per repo-weitem Grep). */

/* --- FAQ Accordion --------------------------------------------------------- */
.pl-faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.pl-faq-item {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) 0;
}

.pl-faq-item:last-child {
    border-bottom: none;
}

.pl-faq-q {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.pl-faq-a {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-relaxed);
}

/* --- Contact Form ---------------------------------------------------------- */
.pl-contact-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.pl-art13 {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: var(--lh-relaxed);
    margin-top: var(--space-3);
}

.pl-art13 a {
    color: var(--mint-deep);
}

/* --- Inline Alert (kein ToastHost in PreLaunchLayout) --------------------- */
.pl-alert {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.pl-alert-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success);
}

.pl-alert-error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 640px) {
    .pl-nav {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .pl-nav-links {
        gap: var(--space-3);
    }

    .pl-hero {
        padding: var(--space-6) var(--space-3) var(--space-5);
    }

    .pl-features-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-3);
    }

    .pl-section {
        padding: var(--space-5) var(--space-3);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   DESIGN-REFRESH 2026-05 — Bootstrap × Mint Hybrid (Stil 12)
   Visuelle Referenz: designvorschlaege/12-empfehlung-warm.html
   Spec: docs/styling.md
   Diese Klassen koexistieren neben den alten — Migration der Pages
   erfolgt durch Subagents S3-S5.

   Konflikte mit bestehenden globalen Klassen werden mit dem Suffix `-r`
   (refresh) abgegrenzt, damit alte Klassen exakt so weiterrendern wie
   bisher. Konflikte:
     .btn-sm           (alt = pill-style)        → neu: .btn-r .btn-sm-r
     .btn-secondary    (kein global, NUR -sm)    → neu: .btn-secondary-r
     .btn-outline-danger (kein global)           → neu: .btn-outline-danger-r
     .stat-card / .stat-label / .stat-value
                       (alt = Mint-Box, kompakt) → neu: .stat-card-r etc.
     .app-footer       (alt = Footer-Inner-API)  → neu: .app-footer-r
     --shadow-sm       (alt-Wert anders)         → neu: --shadow-sm-r
   Alle uebrigen Klassen (.btn-pill*, .badge*, .org-list, .org-row,
   .quick-card, .panel, .tab, .tabs-nav, .form-control, .search-box,
   .filter-chip, .table-wrap, .toolbar, .breadcrumb (vs. .breadcrumbs),
   .page-header, .section-header, .hero, .avatar, .user-menu,
   .enrollment-*, .page-content) sind kollisionsfrei.
   ───────────────────────────────────────────────────────────────────── */

/* ── Pill-Buttons (Primary-CTAs) ─────────────────────────────────────── */
/* S11 (2026-05-08): Default-/Hover-Farben umgekehrt — Default jetzt
   --mint-deep, Hover wechselt auf --ink (dunkler). Modifier .mint und
   .outline behalten ihr eigenes Verhalten. */
.btn-pill {
    background: var(--mint-deep);
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.2;
}
.btn-pill:hover {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 46, 42, 0.18);
}
.btn-pill:active { transform: translateY(1px); }
.btn-pill.mint {
    background: var(--mint);
    color: var(--ink);
}
.btn-pill.mint:hover { background: var(--mint-deep); color: #fff; }
.btn-pill.outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border-strong);
}
.btn-pill.outline:hover {
    border-color: var(--ink);
    background: rgba(10, 46, 42, 0.04);
}
.btn-pill.sm { padding: 0.5rem 1.1rem; font-size: 0.82rem; }
/* S11 — groessere Hero-Variante fuer prominente CTAs (Dashboard-Hero). */
.btn-pill.lg { padding: 0.85rem 1.75rem; font-size: 0.95rem; }

/* ── Bootstrap-Style rechteckige Buttons (Refresh-Suffix `-r`) ───────── */
.btn-r {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
    background: transparent;
    color: var(--text);
    font-family: inherit;
}
.btn-r.btn-sm-r { padding: 0.3rem 0.65rem; font-size: 0.76rem; }
.btn-r.btn-secondary-r {
    background: #fff;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-r.btn-secondary-r:hover {
    border-color: var(--mint-deep);
    color: var(--mint-deep);
}
.btn-r.btn-outline-danger-r {
    background: #fff;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.3);
}
.btn-r.btn-outline-danger-r:hover {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

/* ── Badges (Pills) ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 600;
}
.badge-admin    { background: var(--mint);                 color: var(--ink); }
.badge-trainer  { background: rgba(255, 122, 89, 0.15);    color: var(--coral-deep); }
.badge-member   { background: var(--mint-soft);            color: var(--mint-deep); }
.badge-pending  { background: var(--coral-soft);           color: var(--coral-deep); }
.badge-success  { background: #d1fae5;                     color: #047857; }
.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ── Org-List / List-Group ───────────────────────────────────────────── */
.org-list {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.org-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    cursor: pointer;
}
.org-row:last-child { border-bottom: none; }
.org-row:hover { background: var(--mint-softer); }

.org-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--mint-soft);
    color: var(--mint-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    overflow: hidden;
}
.org-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.org-icon.coral  { background: var(--coral-soft);     color: var(--coral-deep); }
.org-icon.slate  { background: rgba(71, 85, 105, 0.12); color: #475569; }
.org-icon.violet { background: #ede9fe;               color: #6d28d9; }
.org-icon.amber  { background: #fef3c7;               color: #b45309; }

.org-meta { flex: 1; min-width: 0; }
.org-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.org-name a { color: var(--ink); text-decoration: none; }
.org-row:hover .org-name a { color: var(--mint-deep); }
.org-sub {
    color: var(--muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.org-sub-sep { color: var(--border-strong); }
.org-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Stat-Cards (Refresh-Suffix `-r` wegen alter .stat-card) ─────────── */
.stat-strip {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.stat-card-r {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
}
.stat-label-r {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.45rem;
}
.stat-value-r {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.stat-unit { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.stat-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }
.stat-sub.up { color: var(--mint-deep); font-weight: 500; }
.stat-sub.down { color: var(--coral-deep); font-weight: 500; }

.stat-card-r.hero-card {
    background: linear-gradient(135deg, var(--ink) 0%, var(--mint-deep) 100%);
    border-color: var(--mint-deep);
    color: #fff;
    box-shadow: var(--shadow-md-r);
}
.stat-card-r.hero-card::before {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 160px;
    height: 160px;
    background: var(--mint);
    opacity: 0.15;
    border-radius: 50%;
}
.stat-card-r.hero-card::after {
    content: '';
    position: absolute;
    right: 30px;
    bottom: -30px;
    width: 80px;
    height: 80px;
    background: var(--mint);
    opacity: 0.1;
    border-radius: 50%;
}
.stat-card-r.hero-card .stat-label-r { color: rgba(255, 255, 255, 0.7); }
.stat-card-r.hero-card .stat-value-r { color: #fff; font-size: 2rem; }
.stat-card-r.hero-card .stat-unit { color: rgba(255, 255, 255, 0.8); }
.stat-card-r.hero-card .stat-sub { color: rgba(255, 255, 255, 0.85); }
.stat-card-r.hero-card .hero-cta {
    margin-top: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
    background: var(--mint);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background 0.15s;
}
.stat-card-r.hero-card .hero-cta:hover { background: #fff; }

/* ── Section-Header ──────────────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
}
.section-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin: 0;
}
.section-count {
    background: var(--mint-soft);
    color: var(--mint-deep);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill);
}
.section-header-end {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.section-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mint-deep);
    text-decoration: none;
}
.section-link:hover { color: var(--mint-deeper); }

/* ── Hero (nur Member-Pages) ─────────────────────────────────────────── */
/* S14 (2026-05-08): max-width und L/R-Padding entfernt — der Hero liegt
   innerhalb .ritmano-main, das bereits max-width:1180 + padding:0 2rem
   setzt. Doppelte L/R-Padding-Verschachtelung war Ursache fuer Hero-
   Inhalt-Drift gegenueber Logo / Sektionen (~64px nach rechts). */
.hero {
    position: relative;
    padding: 2rem 0 1rem;
    overflow: visible;
}
.hero::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    width: 720px;
    height: 480px;
    background: radial-gradient(ellipse, var(--mint-soft) 0%, transparent 65%);
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.7;
    pointer-events: none;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding-bottom: 1.75rem;
}
.hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}
.hero h1 .accent {
    background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero h1 .wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave 2.5s 0.6s ease-in-out;
}
@keyframes wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
    50% { transform: rotate(-4deg); }
}
.hero p.lead {
    color: var(--muted);
    font-size: 1.05rem;
}
.hero-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* ── Page-Header (Admin, sachlich, ohne Glow) ────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.4px;
    margin: 0 0 0.3rem 0;
    line-height: 1.2;
}
.page-header p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

/* ── Breadcrumb (Refresh — bestehende `.breadcrumbs` BEM bleibt) ─────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--mint-deep); }
.breadcrumb-sep { color: var(--border-strong); }
.breadcrumb-current { color: var(--ink); font-weight: 600; }

/* ── Tabs (Bootstrap nav-tabs Pattern) ───────────────────────────────── */
.tabs-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tab:hover {
    color: var(--mint-deep);
    background: var(--mint-softer);
}
.tab.active {
    color: var(--ink);
    background: #fff;
    border-color: var(--border);
    font-weight: 600;
    border-bottom: 1px solid #fff;
}
.tab-count {
    background: var(--mint-soft);
    color: var(--mint-deep);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-pill);
    line-height: 1.2;
}
.tab.active .tab-count {
    background: var(--mint);
    color: var(--ink);
}

/* ── Panel ───────────────────────────────────────────────────────────── */
.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
}
.panel-subtitle {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.15rem;
}
.panel-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}
.panel-body {
    padding: 1rem 1.25rem;
}

/* ── Tabellen ────────────────────────────────────────────────────────── */
.table-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.table-wrap thead th {
    background: #fafbfa;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
}
.table-wrap tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.table-wrap tbody tr:last-child { border-bottom: none; }
.table-wrap tbody tr:hover {
    background: var(--mint-softer);
}
.table-wrap tbody td {
    padding: 0.85rem 1rem;
    color: var(--text);
    vertical-align: middle;
}
.td-name {
    font-weight: 600;
    color: var(--ink);
}
.td-mail {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ── Form-Controls (Refresh) ─────────────────────────────────────────── */
.form-control {
    display: block;
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
.form-select-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-select-sm:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.18);
}
.search-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 0 0.75rem 0 2.1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-box:focus-within {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
.search-box input {
    border: none;
    outline: none;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--text);
    min-width: 220px;
}
.search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-chip:hover {
    border-color: var(--mint-deep);
    color: var(--mint-deep);
    background: var(--mint-softer);
}

/* ── Toolbar (z. B. ueber Tabellen) ──────────────────────────────────── */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.toolbar-end {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Anmeldungen-Cards (Member) ──────────────────────────────────────── */
.enrollment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.enrollment-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.enrollment-card:hover {
    border-color: var(--mint);
    box-shadow: var(--shadow-md-r);
    transform: translateY(-1px);
}
.enrollment-header {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}
.enrollment-title {
    flex: 1;
    min-width: 0;
}
.enrollment-title-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}
.enrollment-title-org {
    color: var(--muted);
    font-size: 0.78rem;
}
.enrollment-when {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text);
    padding: 0.55rem 0.75rem;
    background: var(--mint-softer);
    border-radius: var(--r-md);
}
.enrollment-when-icon { color: var(--mint-deep); }
.enrollment-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border);
}
.enrollment-footer-end { margin-left: auto; }

/* ── Quick-Cards ─────────────────────────────────────────────────────── */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.75rem;
}
.quick-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.quick-card:hover {
    border-color: var(--mint);
    box-shadow: var(--shadow-md-r);
    transform: translateY(-2px);
}
.quick-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--r-md);
    background: var(--mint-soft);
    color: var(--mint-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.quick-icon.coral  { background: var(--coral-soft); color: var(--coral-deep); }
.quick-icon.violet { background: #ede9fe;            color: #6d28d9; }
.quick-card-text { flex: 1; }
.quick-card-text h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.2rem 0;
}
.quick-card-text p {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.45;
    margin: 0;
}
.quick-card-arrow {
    color: var(--mint-deep);
    font-size: 1.15rem;
    margin-left: auto;
}

/* ── Page-Layout-Container (Standard-Padding unter Topbar) ───────────── */
.page-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ── Footer (Refresh-Suffix `-r` wegen alter `.app-footer`) ──────────── */
.app-footer-r {
    /* width: 100% noetig, weil .ritmano-app als flex-column-Parent das
       footer-flex-item auf den Inhalt schrumpft (~570px statt 1180px).
       Mit width: 100% + max-width: 1180px + margin: auto laeuft der Footer
       voll bis zur Container-Kante und space-between trennt links/rechts. */
    width: 100%;
    max-width: 1180px;
    margin: 4rem auto 0;
    padding: 2rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    box-sizing: border-box;
}
.app-footer-r a { color: var(--muted); text-decoration: none; }
.app-footer-r a:hover { color: var(--mint-deep); }
.app-footer-r .slogan strong { color: var(--mint-deep); }

/* S11 — Logo-Mittelpunkt (zwischen `grouvy` und `io`). Ersetzt den
   gruenen Kreis-Dot vor dem Logo (LogoLink.razor).
   Rebrand 2026-06-12: LogoLink nutzt jetzt das SVG-Logo (.ritmano-logo-img);
   .logo-dot-mid bleibt als Legacy bis Run 2 (app.css-Neuaufbau). */
.logo-dot-mid {
    color: var(--mint-deep);
    font-weight: 800;
    margin: 0 0.05rem;
}

/* Rebrand 2026-06-12: offizielles Ritmano-Logo im Header (LogoLink.razor).
   Natuerliches Seitenverhaeltnis 300x79; Hoehe an die bisherige
   Wortmarken-Zeile angepasst. */
.ritmano-logo-img {
    display: block;
    height: 34px;
    width: auto;
}

/* S14 (2026-05-08): .topnav-icon entfernt — Top-Nav nur noch Text. */

/* S11 — "Coming soon"-Block fuer Stub-Pages (Help, Blog, Feedback). */
.coming-soon-r {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted);
}

/* ── Avatar (Topbar-User-Initials, Mint-Gradient) ────────────────────── */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}

/* ── User-Menu (Topbar-Tile rechts) ──────────────────────────────────── */
.user-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.user-menu:hover {
    background: var(--mint-softer);
    border-color: var(--border);
}
.user-menu-name {
    color: var(--ink);
    font-weight: 600;
}
/* S14 (2026-05-08): .user-menu-caret entfernt — Profil-Tile ist nur ein Link
   zu /profile (kein Dropdown), Caret war irrefuehrend. */

/* ── Refresh-Utilities (S4 Member-Pages-Migration) ────────────────────── */
/* Kleiner muted-Text in Enrollment-Footer ("naechster Termin: …"). */
.enrollment-footer-meta {
    font-size: 0.78rem;
    color: var(--muted);
}
/* Empty-State mit zentriertem CTA fuer Member-Pages — ersetzt page-scoped
   .empty-with-cta in Dashboard/MyUnenrollments. */
.empty-state-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
}
.empty-state-cta p {
    margin: 0;
    color: var(--muted);
}
/* Stat-Strip Variante mit 4 gleich grossen Spalten (z. B. Dashboard ohne
   dedizierte Hero-Card-Spalte oder mit 4 Karten gleicher Breite). */
.stat-strip.cols-4 {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
/* Profile-Form-Layout (Two-Column Form-Row, in Refresh-Form). */
.form-row-r {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .form-row-r { grid-template-columns: 1fr; }
}
.form-group-r { margin-bottom: 1rem; }
.form-group-r label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
}
.form-group-r .form-control:disabled {
    background: var(--mint-softer);
    color: var(--muted);
    cursor: not-allowed;
}
.form-hint-r {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--muted);
}
/* Profile-Sub-Heading (z. B. "Passwort aendern") inside panel-style page. */
.subsection-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin: 2rem 0 1rem;
}
.subsection-heading.danger { color: #b91c1c; }
.subsection-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}
/* Filter-Bar (Refresh) — Bootstrap-pill-style Filter-Buttons in
   MyUnenrollments. */
.filter-bar-r {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.filter-bar-r .filter-chip.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.filter-bar-r .filter-chip.active:hover {
    background: var(--ink);
    color: #fff;
}

/* ── Refresh-Utilities (S5 Admin-Pages-Migration) ─────────────────────── */
/* Invite-Row inside AdminMembers — Bootstrap input-group Pattern. */
.invite-row-r {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.invite-row-r .invite-input-r { flex: 1 1 280px; }
.invite-row-r .invite-role-r { flex: 0 0 auto; min-width: 160px; }

/* Section-Header in Admin Sub-Pages (Tab content): h2 + right-aligned actions.
   Sachlicher als .page-header — dafuer leichter (kleiner h2). */
.admin-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.admin-tab-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.admin-tab-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Pill-Toggle (Mode-Switcher) fuer DateExclusions Trainings/Events. */
.pill-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}
.pill-toggle-btn {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--muted);
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.pill-toggle-btn:hover { color: var(--mint-deep); }
.pill-toggle-btn.active {
    background: var(--ink);
    color: #fff;
}

/* Settings-Form: max-width fuer lesbare Form-Spaltenbreite. */
.settings-form-r { max-width: 640px; }

/* Signature-Vorschau in AdminSettings. */
.signature-preview-r {
    background: var(--mint-softer);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
}

/* Mono-Style fuer Kiosk-URL/Schluessel. */
.form-control.mono-r,
.mono-r {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--mint-softer);
}

/* Kiosk-URL-Row (Input + Copy-Button buendig). */
.kiosk-url-row-r {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.kiosk-url-row-r .form-control { flex: 1; }
.kiosk-url-row-r .btn-r { white-space: nowrap; }

/* Detail-Page (AdminTrainingDetail / AdminEventDetail): Two-Column-KV-List. */
.kv-list-r {
    display: grid;
    grid-template-columns: 180px 1fr;
    row-gap: 0.55rem;
    column-gap: 1rem;
    margin: 0;
    font-size: 0.9rem;
}
.kv-list-r dt { color: var(--muted); font-weight: 500; }
.kv-list-r dd { margin: 0; color: var(--text); }
@media (max-width: 600px) {
    .kv-list-r { grid-template-columns: 1fr; row-gap: 0.2rem; }
    .kv-list-r dt { margin-top: 0.5rem; }
}

/* Stat-Grid in Detail-Pages (3 small stat-cards). */
.stat-grid-r {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
}

/* ── Auth-Pages (Login/Register/Forgot/Reset/AcceptInvite/ConfirmEmail) ─
   Refresh-Variante: zentrierte Card auf Cream-BG mit subtilem radial-Glow.
   Pattern: <div class="auth-page-r"><div class="auth-card-r panel">…</div></div>
   Kein Hero, ruhig und einladend. */
.auth-page-r {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    padding: 3rem 1rem 4rem;
}
.auth-page-r.wide-r {
    max-width: 560px;
}
.auth-page-r::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, var(--mint-softer) 0%, transparent 55%);
    z-index: -1;
}
.auth-card-r {
    box-shadow: var(--shadow-md-r, 0 6px 18px rgba(10, 46, 42, 0.09));
}
.auth-card-r .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.auth-card-r .panel-title {
    font-size: 1.25rem;
    /* Auth-Karten-Titel ist als <h1> ausgezeichnet (A11y: je Seite genau eine
       h1). h1-Default-Margins resetten, damit die Karte optisch gleich bleibt. */
    margin: 0;
}
.auth-card-r .panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.alert-error-r {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.alert-success-r {
    background: var(--mint-soft);
    color: var(--mint-deep);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.alert-success-r a {
    color: var(--mint-deep);
    text-decoration: underline;
    font-weight: 600;
}

.form-actions-r {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
}
.form-actions-r.block-r {
    /* Voll-breite Submit-Buttons in Auth-Forms (Login, Register, Reset, …). */
    display: block;
}
.form-actions-r.block-r .btn-pill {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.auth-links-r {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 1rem;
}
.auth-links-r a {
    color: var(--mint-deep);
    text-decoration: none;
    font-weight: 600;
}
.auth-links-r a:hover {
    text-decoration: underline;
}
.auth-links-sep-r {
    color: var(--border-strong);
}
.auth-hint-r {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.auth-hint-r.center-r {
    text-align: center;
}

/* Password-Toggle innerhalb der Refresh-Auth-Cards: pwd-wrapper hat eine
   ältere Regel fuer .form-input — hier dieselbe Padding-Reservierung fuer
   .form-control, damit der Toggle-Button nicht auf den Text laeuft. */
.pwd-wrapper .form-control {
    padding-right: 5.5rem;
}

/* ── Token-Result-Pages (Approve/Reject/ApprovalTokenResult) ──────────── */
.token-result-r {
    text-align: center;
    padding: 1.5rem;
}
.token-icon-r {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
    line-height: 1;
}
.token-icon-success-r {
    background: var(--mint-soft);
    color: var(--mint-deep);
}
.token-icon-error-r {
    background: #fee2e2;
    color: #b91c1c;
}
.token-icon-pending-r {
    background: var(--coral-soft);
    color: var(--coral-deep);
}
.token-title-r {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.5rem;
    letter-spacing: -0.3px;
}
.token-message-r {
    color: var(--muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.token-result-r .form-actions-r {
    justify-content: center;
}

/* ── Legal-Pages (Imprint, Privacy, Terms) ───────────────────────────── */
/* S8 — D-MIG-04: Refresh-Variante der Legal-Pages. Markup-Hülle bleibt
   .page-card.legal-page (alt) UND zusätzlich .legal-page-r für die neuen
   Spacing/Typography-Tokens. Inline-Styles in der Cookie-Tabelle wurden
   in .legal-cookies-table-r ueberfuehrt. */
.legal-page-r {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}
.legal-page-r h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.4px;
    margin: 0 0 1rem;
}
.legal-page-r h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.75rem 0 0.5rem;
}
.legal-page-r p,
.legal-page-r ul,
.legal-page-r ol {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.legal-page-r ul,
.legal-page-r ol {
    padding-left: 1.5rem;
}
.legal-page-r code {
    background: var(--bg-alt);
    padding: 0.1rem 0.35rem;
    border-radius: var(--r-sm);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--ink);
}
.legal-page-r .legal-placeholder-r {
    color: var(--muted);
    font-style: italic;
}
.legal-cookies-table-r {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}
.legal-cookies-table-r thead tr {
    border-bottom: 2px solid var(--border-strong);
    text-align: left;
}
.legal-cookies-table-r th,
.legal-cookies-table-r td {
    padding: 0.4rem 0.6rem;
}
.legal-cookies-table-r tbody tr {
    border-bottom: 1px solid var(--border);
}
.legal-cookies-table-r tbody tr:last-child {
    border-bottom: none;
}
.legal-cookies-note-r {
    margin-top: 0.75rem;
}

/* ── Public-Member-Pages ─────────────────────────────────────────────── */
/* S8 — D-MIG-03: Hero-Variante mit Logo-Slot fuer Vereins-Public-Page. */
.hero-org-r {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 0 1.5rem;
    overflow: visible;
}
.hero-org-r::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    width: 600px;
    height: 380px;
    background: radial-gradient(ellipse, var(--mint-soft) 0%, transparent 65%);
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}
.hero-org-r h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1px;
    line-height: 1.15;
    margin: 0 0 0.4rem;
}
.hero-org-r .org-meta-r {
    color: var(--muted);
    font-size: 0.95rem;
}
.hero-org-r .org-description-r {
    color: var(--text);
    line-height: 1.6;
    margin-top: 0.75rem;
    max-width: 720px;
}
.hero-org-r .org-website-r {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--mint-deep);
    font-weight: 600;
    text-decoration: none;
}
.hero-org-r .org-website-r:hover {
    color: var(--ink);
    text-decoration: underline;
}
.hero-org-actions-r {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Membership-Banner (Pending/Approved/Rejected) — Refresh */
.membership-banner-r {
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    font-weight: 600;
    border-left: 4px solid transparent;
}
.membership-banner-r.approved-r {
    background: var(--mint-softer);
    color: var(--mint-deep);
    border-left-color: var(--mint-deep);
}
.membership-banner-r.pending-r {
    background: var(--mint-soft);
    color: var(--mint-deep);
    border-left-color: var(--mint);
}
.membership-banner-r.rejected-r {
    background: #fef2f2;
    color: #b91c1c;
    border-left-color: #b91c1c;
}
.membership-banner-r.sticky-r {
    position: sticky;
    top: 72px;
    z-index: 50;
    background: var(--mint-soft);
}
@media (max-width: 768px) {
    .membership-banner-r.sticky-r { top: 0; }
}

/* Calendar-Public — Legend + Loading */
.calendar-legend-r {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
    border: none;
    padding: 0;
}
.calendar-legend-r legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.25rem;
    padding: 0;
}
.calendar-legend-r .legend-item-r {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.calendar-legend-r .legend-dot-r {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.legend-dot-r.training-r { background: #E85234; }
.legend-dot-r.event-r { background: #24172F; }
.legend-dot-r.free-r { background: #6FAF8D; }
.calendar-loading-r {
    display: none;
    text-align: center;
    padding: 1rem;
    color: var(--muted);
}

/* Home-Public — Hero + Features + Callout */
.home-hero-r {
    position: relative;
    text-align: center;
    padding: 4rem 1rem 5rem;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
}
.home-hero-r::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, var(--mint-soft) 0%, transparent 65%);
    transform: translate(-50%, -20%);
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
}
.home-pill-r {
    display: inline-block;
    background: var(--mint-soft);
    color: var(--mint-deep);
    padding: 0.35rem 1rem;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.home-hero-r h1 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 1rem;
    letter-spacing: -2px;
    line-height: 1.05;
}
.home-highlight-r {
    background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.home-slogan-r {
    font-size: 1.3rem;
    color: var(--muted);
    margin: 0 0 0.5rem;
    font-weight: 400;
}
.home-slogan-r strong {
    color: var(--mint-deep);
    font-weight: 700;
}
.home-sub-r {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0 auto 2.5rem;
    max-width: 560px;
    line-height: 1.5;
}
.home-actions-r {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.home-features-r {
    max-width: 1100px;
    margin: 3rem auto 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 0 1.5rem;
}
.home-feature-r {
    background: var(--card);
    padding: 2rem 1.75rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-feature-r:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md-r);
}
.home-feature-icon-r {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--mint-soft);
    color: var(--mint-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
.home-feature-r:nth-child(2) .home-feature-icon-r {
    background: var(--coral-soft);
    color: var(--coral);
}
.home-feature-r:nth-child(3) .home-feature-icon-r {
    background: var(--mint);
    color: var(--ink);
}
.home-feature-r h2 {
    color: var(--ink);
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}
.home-feature-r p {
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
    font-size: 0.95rem;
}
.home-callout-r {
    max-width: 1100px;
    margin: 2rem auto 3rem;
    background: linear-gradient(135deg, var(--ink) 0%, var(--mint-deep) 100%);
    color: #fff;
    padding: 3.5rem 2rem;
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.home-callout-r::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: var(--mint);
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
}
.home-callout-r::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    background: var(--mint);
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}
.home-callout-r h2 {
    color: #fff;
    margin: 0 0 0.75rem;
    font-size: 2.2rem;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
}
.home-callout-r p {
    max-width: 560px;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
}
.home-logout-banner-r {
    max-width: 900px;
    margin: 1rem auto 0;
}
@media (max-width: 768px) {
    .home-hero-r { padding: 2rem 0.5rem 2.5rem; }
    .home-hero-r h1 { font-size: 2.4rem; letter-spacing: -1px; }
    .home-slogan-r { font-size: 1.05rem; }
    .home-sub-r { font-size: 1rem; }
    .home-actions-r { flex-direction: column; align-items: stretch; }
    .home-features-r { grid-template-columns: 1fr; margin: 2rem auto 3rem; padding: 0 0.5rem; gap: 1rem; }
    .home-callout-r { padding: 2.25rem 1.25rem; margin: 1rem auto 2rem; border-radius: 18px; }
    .home-callout-r h2 { font-size: 1.6rem; }
}

/* ── Language Dropdown (S12) ──────────────────────────────────────────── */
/* Native <details>/<summary>-basiertes Dropdown — A11y-konform ohne JS.
   Wird in AuthLinks.razor (auth + anon) eingebunden. 12 Sprachen. */
.lang-dropdown {
    position: relative;
    display: inline-block;
}
.lang-dropdown summary { list-style: none; cursor: pointer; }
.lang-dropdown summary::-webkit-details-marker { display: none; }

.lang-trigger {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: #fff;
    font-size: 0.85rem;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.lang-trigger:hover {
    border-color: var(--mint-deep);
    color: var(--mint-deep);
}
/* S13 (2026-05-08): SVG-Flaggen ueber flag-icons-Library (.fi .fi-{cc}).
   Library liefert Default-Hoehe ueber 1em; Box anpassen damit Flagge
   neben Text-Label proportional wirkt. */
.lang-flag { width: 1.2em; height: 0.9em; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.3); }
.lang-flag.fi { display: inline-block; }
.lang-short { font-weight: 600; letter-spacing: 0.04em; }
.lang-caret { font-size: 0.65rem; color: var(--muted); }

.lang-dropdown[open] .lang-trigger {
    border-color: var(--mint-deep);
    color: var(--mint-deep);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md-r);
    list-style: none;
    margin: 0; padding: 0.35rem;
    z-index: 100;
    max-height: 360px; overflow-y: auto;
}
.lang-menu li { margin: 0; padding: 0; }
.lang-option {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    transition: background 0.1s, color 0.1s;
}
.lang-option:hover { background: var(--mint-softer); color: var(--mint-deep); }
.lang-option.active { background: var(--mint-soft); color: var(--mint-deep); font-weight: 600; }
.lang-option .lang-name { flex: 1; }
.lang-option .lang-code { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.05em; }
.lang-option.active .lang-code { color: var(--mint-deep); }

/* ──────────────────────────────────────────────────────────────────────
   Reconnect-Inline-Disable (Phase 4b Variante B, 2026-05-09)
   ──────────────────────────────────────────────────────────────────────
   Gehoeren NICHT in ReconnectModal.razor.css — scoped CSS wuerde die
   globalen body/button-Selektoren mit [b-xxx]-Scope-Attribut versehen,
   damit waeren sie wirkungslos auf <body> und Buttons ausserhalb der
   Component. Daher hier global. */

body.ritmano-circuit-disconnected button:not([data-allow-offline="true"]),
body.ritmano-circuit-disconnected input[type="submit"]:not([data-allow-offline="true"]) {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.ritmano-circuit-disconnected form[data-needs-circuit="true"]::after {
    content: "● Verbindung weg — Speichern aktuell nicht möglich";
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: #fff4e0;
    color: #6a4a00;
    border: 1px solid rgba(180, 100, 0, 0.18);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

body.ritmano-circuit-disconnected .ritmano-needs-circuit-hint {
    display: inline-block !important;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: #fff4e0;
    color: #6a4a00;
    border: 1px solid rgba(180, 100, 0, 0.18);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.ritmano-needs-circuit-hint {
    display: none;
}

/* DESIGN-REFRESH 2026-05 — Ende Refresh-Block ────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   RITMANO SHELL (Run 2b, 2026-06-12) — Sidebar-Workspace gemaess Mockup
   designvorschlaege/21-redesign-final-mockup (v0.15.0) + docs/styling.md.
   Portiert aus 21-redesign.css + fenced Bloecken der Admin/index.html,
   var()-Referenzen ueber das styling.md-§0-Mapping auf den semantischen
   Namensraum uebersetzt (--brand statt --mint usw.). Verwendet vom neuen
   einheitlichen Layout (alle Rollen); alte Topnav-Klassen
   (.ritmano-header/-nav) bleiben bis zum Abschluss des Layout-Umbaus.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── App-Shell: 2 Spalten (Sidebar + Main) ── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    /* sticky erzeugt Stacking-Context (z-index auto), der sonst unter dem
       In-Flow-Inhalt von .main gemalt wird -> ueberlappendes Org-Dropdown
       verschwaende hinter .main (styling.md Abschnitt 3). */
    z-index: 20;
}
.sidebar-brand { padding: 0.9rem 1.25rem 0.8rem; }
.sidebar-brand .brand-logo-img { display: block; width: 100%; height: auto; }

.sidebar-nav {
    flex: 1;
    padding: 0.45rem 0.75rem 0.4rem;
    overflow-y: auto;
}
.nav-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    padding: 0.5rem 0.75rem 0.4rem;
    font-weight: 600;
}
.nav-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    margin: 0.1rem 0;
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1; /* Pflicht: sonst optischer Versatz zum 18px-Icon */
    transition: background 0.15s, color 0.15s;
    position: relative;
    text-decoration: none;
}
.nav-item:hover { background: var(--brand-softer); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--ink); font-weight: 800; }
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -0.75rem; top: 18%; bottom: 18%;
    width: 3px;
    background: var(--brand-deep);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nav-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-icon svg { width: 18px; height: 18px; display: block; }
/* Angebote-Icon (Dancer-Glyph, viewBox 1254) wirkt bei 18px optisch kleiner als die
   24er-Line-Icons -> 1:1 wie Mockup auf scale(1.48) vergroessert (NavIcon Name="Offerings",
   deckt Member-/me/offerings UND Admin-?tab=trainings ab). transform auf dem svg-Element,
   damit nichts am viewBox-Rand clippt. */
.nav-icon-offerings svg { transform: scale(1.48); transform-origin: center; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { color: var(--brand-deep); }
.nav-badge {
    margin-left: auto;
    background: var(--brand-deep);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-pill);
    min-width: 18px; text-align: center;
}

/* ── Zwei-Zonen-Switcher (User-Banner + Org-Picker) ── */
.switcher {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
    text-align: left;
    overflow: hidden;
    min-width: 0;
}
.switcher:hover { border-color: var(--border-strong); background: var(--brand-softer); }
.switcher-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    background: var(--sage-soft);
    color: var(--sage-deep);
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.switcher-icon.org-logo {
    background-size: cover;
    background-position: center;
    background-color: var(--card);
    color: transparent;
    border: 1px solid var(--border);
}
/* Initialen-Variante des Org-Icons (Run 2c): solange das Membership-DTO
   keine Logo-URL liefert, zeigen Org-Anker + Org-Menu Initialen statt
   Logo — org-logo wuerde sie via color:transparent verstecken. */
.switcher-icon.org-initials {
    background-color: var(--card);
    color: var(--ink);
    border: 1px solid var(--border);
    overflow: hidden;
}
/* Org-Logo als <img> im Switcher (Welle 1b): fuellt das Icon-Quadrat. */
.switcher-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-nav .sidebar-org .switcher-icon.org-initials {
    border: 2px solid rgba(255, 255, 255, 0.55);
}
.switcher-meta { flex: 1; min-width: 0; }
.switcher-label {
    font-size: 0.7rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-name {
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-caret { color: var(--muted); font-size: 0.7rem; }

.user-tile .switcher-icon {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff;
    border-radius: 50%;
    position: relative;
}
.user-tile .switcher-icon.photo {
    background-size: cover;
    background-position: center;
    color: transparent;
}
/* User-Foto wird als <img> gerendert; ohne eigenen Radius zeigt es eckige
   Ecken trotz runder Span (kein overflow:hidden, sonst wird der ::after-
   Online-Dot abgeschnitten) -> img selbst rund. */
.user-tile .switcher-icon img { border-radius: 50%; }
.user-tile .switcher-icon::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sage); /* Online/aktiv = Sage, nicht Brand */
    border: 2px solid var(--card);
}

.sidebar-nav .sidebar-user {
    margin-bottom: 0.65rem;
    background: var(--brand-softer);
    border-color: var(--brand-soft);
    cursor: pointer;
    text-decoration: none;
}
.sidebar-nav .sidebar-user:hover {
    background: var(--brand-soft);
    border-color: var(--brand-deep);
}

/* Org-Zone als Kontext-Anker: Premium-Dark Aubergine -> Midnight Indigo,
   Brand-Coral nur als subtiler Glow (Coral bleibt CTAs vorbehalten). */
.sidebar-nav .sidebar-org {
    margin: 0.95rem 0 0.6rem;
    background: linear-gradient(135deg, var(--ink) 0%, var(--indigo) 100%);
    border: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.sidebar-nav .sidebar-org::before {
    content: '';
    position: absolute;
    top: -28px; right: -28px;
    width: 86px; height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    opacity: 0.35;
}
.sidebar-nav .sidebar-org > * { position: relative; z-index: 1; }
.sidebar-nav .sidebar-org:hover { filter: brightness(1.08); }
.sidebar-nav .sidebar-org .switcher-label { color: var(--brand-soft); }
.sidebar-nav .sidebar-org .switcher-name {
    color: #fff;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    font-size: 0.84rem;
}
.sidebar-nav .sidebar-org .switcher-caret {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}
.sidebar-nav .sidebar-org:hover .switcher-caret { background: rgba(255, 255, 255, 0.30); }
.sidebar-nav .sidebar-org .switcher-caret svg { width: 13px; height: 13px; display: block; }
.sidebar-nav .sidebar-org .switcher-icon.org-logo {
    background-color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

/* ── Org-Wechsel-Dropdown (natives <details class="org-switch">) ──
   Menue ist position:fixed (sonst clippt das overflow der scrollenden
   .sidebar-nav); Position + max-height setzt ui-interop.js (Portierung
   des Mockup-Positionier-Scripts, Run 2c). */
.org-switch { position: relative; }
.org-switch > summary { list-style: none; cursor: pointer; }
.org-switch > summary::-webkit-details-marker { display: none; }
.org-switch[open] .sidebar-org .switcher-caret { transform: rotate(180deg); }
.org-menu {
    position: fixed;
    width: 360px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md-r);
    list-style: none; margin: 0; padding: 0.35rem;
    z-index: 100;
    overflow-y: auto;
}
.org-menu-label {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--muted); font-weight: 700;
    padding: 0.4rem 0.6rem 0.3rem;
}
.org-opt {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-md);
    text-decoration: none;
}
.org-opt:hover { background: var(--brand-softer); }
.org-opt.active { background: var(--brand-soft); }
.org-opt .switcher-icon { width: 28px; height: 28px; }
.org-opt-meta { min-width: 0; }
.org-opt-name {
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-opt-sub { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.org-menu-foot {
    position: sticky;
    bottom: -0.35rem;
    background: var(--card);
    border-top: 1px solid var(--border);
    margin-top: 0.3rem;
    padding: 0.3rem 0 0.35rem;
    z-index: 1;
}
.org-opt.add { color: var(--brand-deep); font-weight: 600; font-size: 0.82rem; }

/* ── Sidebar-Footer ── */
.sidebar-bottom {
    padding: 0.75rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.sidebar-settings {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
    border-radius: var(--r-md);
    margin-top: 0.25rem;
    text-decoration: none;
}
.sidebar-settings:hover { background: var(--brand-softer); color: var(--ink); }
.sidebar-foot {
    padding: 0.5rem 0.75rem 0.85rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar-foot .nav-icon { transform: translateY(1.5px); }

/* ── Main + Topbar (zwei Zeilen) ── */
.app-shell .main {
    padding: 1.5rem 2rem 1rem;
    min-width: 0;
    display: flex; flex-direction: column;
    min-height: 100vh;
}
.topbar {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 0.75rem;
}
.topbar-links { display: flex; align-items: center; gap: 1.3rem; }
.topbar-links a {
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.topbar-links a:hover { color: var(--brand-deep); }
.topbar-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.row2-left, .row2-right { display: flex; align-items: center; gap: 1rem; }
.pill-group { display: flex; align-items: center; gap: 0.4rem; }
.page-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.4px;
    line-height: 1.15;
    padding-left: 0.95rem;
    position: relative;
}
/* Solange eine Page keinen Titel in die Section "page-title" projiziert,
   wuerde sonst der leere Balken (::before) allein stehen. */
.page-title:empty { display: none; }
.page-title::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 4px;
    border-radius: 2px;
    background: var(--brand-deep);
}
.greeting { flex: 1; }
.greeting h1 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0; /* UA-Default-h1-Margin (~17px) raus — schob Greeting + Content nach unten und blies den Abstand zur Subline auf (Bediener 2026-06-15) */
}
.greeting h1 .wave {
    display: inline-block;
    animation: shell-wave 2.2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes shell-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
.greeting .sub { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }

/* Reset gegen die aeltere generische .search-box (oben im File): die setzt
   display:inline-flex + Container-Border + Links-Padding, was sonst in die
   Shell-Suchbox durchleckt (Doppel-Border). Shell-Box = Pill am Input. */
.search-box { position: relative; width: 340px; display: block; border: none; padding: 0; background: none; }
.search-box input {
    width: 100%;
    padding: 0.55rem 2.5rem 0.55rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: 0.85rem;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-box input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}
.search-box .icon {
    position: absolute; right: 0.85rem; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.search-box .icon svg { width: 16px; height: 16px; display: block; }

.bell {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: background 0.15s;
}
.bell:hover { background: var(--brand-softer); }
.bell svg { width: 18px; height: 18px; display: block; }
.bell .count {
    position: absolute; top: -4px; right: -4px;
    background: var(--brand); /* Benachrichtigung != Fehler (--error) */
    color: #fff;
    font-size: 0.65rem; font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: var(--r-pill);
    border: 2px solid var(--bg);
    min-width: 16px; text-align: center;
}
.bell .count.count-msg { background: var(--sage-deep); }

/* Shell-CTA-Pill: Neufassung gemaess Mockup (gewinnt via Kaskade ueber
   die Refresh-Definition weiter oben; Konsolidierung beim Transfer). */
.btn-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 0.88rem; font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, transform 0.05s;
    border: none;
    text-decoration: none;
}
/* box-shadow:none neutralisiert den Teal-Schatten der ALTEN
   .btn-pill:hover-Regel (Refresh-Block, Z. ~2611), die sonst durch die
   Kaskade weiterwirkt; outline:hover analog border-color (Review
   2026-06-12). */
.btn-pill:hover { background: var(--brand-deep); color: #fff; box-shadow: none; }
.btn-pill.outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border-strong);
}
.btn-pill.outline:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }
.btn-pill svg { width: 16px; height: 16px; display: block; }
.btn-pill .caret { font-size: 0.7rem; opacity: 0.8; }

/* Such-Box ist im Live-Code eine GET-Form mit Submit-Button (statt Mockup-
   span). Der generische .search-box .icon traegt pointer-events:none — fuer
   den klickbaren Button heben wir das auf und entstylen den Button-Default. */
.search-box button.icon {
    background: none; border: none; padding: 0;
    pointer-events: auto; cursor: pointer;
}

/* ── Erstellen-Dropdown (.create-dd / .cr-*) — Mockup index.html Z.663-742,
   Token-Mapping §0: --mint-softer->--brand-softer, --mint-deep->--brand-deep,
   --amber-soft->--gold-soft, --amber-deep->--gold-deep, --violet-soft->
   --sage-soft, --violet-deep->--sage-deep. ── */
.create-dd { position: relative; display: inline-flex; }
.create-dd > summary { list-style: none; cursor: pointer; }
.create-dd > summary::-webkit-details-marker { display: none; }
.cr-menu {
    position: absolute; right: 0; top: calc(100% + 0.5rem);
    width: 340px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md-r); z-index: 100;
    padding: 0.4rem;
}
.cr-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--muted); font-weight: 700; padding: 0.55rem 0.75rem 0.3rem;
}
.cr-item {
    display: grid; grid-template-columns: 34px 1fr; gap: 0.65rem;
    align-items: center; padding: 0.5rem 0.75rem;
    border-radius: var(--r-md); color: var(--text); text-decoration: none;
    transition: background 0.12s;
}
.cr-item:hover { background: var(--brand-softer); color: var(--text); }
.cr-ic {
    width: 34px; height: 34px; border-radius: var(--r-md); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.cr-ic svg { width: 17px; height: 17px; display: block; }
.cr-ic.training { background: var(--brand-softer);    color: var(--brand-deep); }
.cr-ic.kurs     { background: var(--gold-soft);       color: var(--gold-deep); }
.cr-ic.event    { background: var(--aubergine-soft);  color: var(--aubergine-deep); }
.cr-ic.free     { background: var(--sage-soft);       color: var(--sage-deep); }
.cr-ic.org      { background: var(--bg-alt);          color: var(--ink); }
.cr-name { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.cr-sub  { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.cr-sep  { height: 1px; background: var(--border); margin: 0.35rem 0.5rem; }

/* ── Topbar-Glocken-Dropdowns (.bell-dd / .bell-menu / .nz-*) — Mockup
   index.html Z.287-304 + Z.208-258. Token-Mapping §0: --mint-deep->
   --brand-deep, --mint-softer->--brand-softer, --mint-soft->--brand-soft,
   --violet-soft->--sage-soft, --violet-deep->--sage-deep, --amber-soft->
   --gold-soft, --amber-deep->--gold-deep, --aubergine-*->unveraendert.
   Inhalt (.nz-*) wird hier bereits mit-portiert; in Pass 1 sind die
   .bell-menu noch ohne Zeilen/Badge gerendert. ── */
.bell-dd { position: relative; display: inline-flex; }
.bell-dd > summary { list-style: none; cursor: pointer; }
.bell-dd > summary::-webkit-details-marker { display: none; }
.bell-menu {
    position: absolute; right: 0; top: calc(100% + 0.5rem);
    width: 380px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md-r); z-index: 100; overflow: hidden;
}
.bell-menu-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1rem; border-bottom: 1px solid var(--border);
    font-weight: 700; color: var(--ink); font-size: 0.92rem;
}
.bell-menu .nz { display: flex; flex-direction: column; }
.bell-menu .nz-pages { flex: 0 0 auto; min-height: 0; max-height: 56vh; }

.nz { display: flex; flex-direction: column; }
.nz-pages { display: flex; flex-direction: column; }
.nz-page { display: flex; flex-direction: column; }
.nz-page[hidden] { display: none; }
/* .nz-row hat display:grid -> die Attribut-Regel macht vom Pager
   ausgeblendete Zeilen wirklich unsichtbar (hoehere Spezifitaet). */
.nz-row[hidden] { display: none; }
.nz-row {
    display: grid; grid-template-columns: 36px 1fr auto;
    align-items: center; gap: 0.7rem;
    padding: 0.62rem 1.2rem; border-bottom: 1px solid var(--border);
    position: relative; cursor: pointer;
    transition: background 0.12s;
    text-decoration: none; color: inherit; /* Rows sind <a> — Link-Unterstrich/-Farbe neutralisieren (Mockup: Titel fett, nicht unterstrichen) */
}
.nz-row:last-child { border-bottom: none; }
.nz-row:hover { background: var(--brand-softer); }
.nz-row.unread .nz-title { font-weight: 800; }
.nz-row.unread::before {
    content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 3px; background: var(--brand-deep);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nz-row:not(.unread) .nz-title { color: var(--muted); }
.nz-row:not(.unread) .nz-ic { opacity: 0.7; }
.nz-ic {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
    background-color: var(--brand-soft); color: var(--brand-deep);
    font-size: 0.74rem; font-weight: 700;
}
.nz-ic svg { width: 17px; height: 17px; display: block; }
.nz-ic.msg     { background-color: var(--sage-soft);       color: var(--sage-deep); }
.nz-ic.partner { background-color: var(--aubergine-soft);  color: var(--aubergine-deep); }
.nz-ic.enroll  { background-color: var(--gold-soft);       color: var(--gold-deep); }
.nz-meta { min-width: 0; }
.nz-title {
    display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nz-sub {
    display: block; font-size: 0.74rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nz-time { font-size: 1rem; color: var(--muted); padding: 0 0.2rem; }

/* ── Mobile-Nav: Bottom-Tab-Bar + Drawer (Mockup MOCKUP.md 5.2) ── */
.m-bottombar { display: none; }
.m-backdrop  { display: none; }
.m-logo      { display: none; }
.m-logo .brand-logo-img { max-width: 230px; }
.m-iconbar   { display: contents; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-shell .sidebar {
        display: flex;
        position: fixed;
        top: 0; left: 0;
        width: min(86vw, 320px);
        height: 100vh;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        overflow-y: auto;
    }
    .app-shell.m-open .sidebar { transform: translateX(0); }
    .m-backdrop {
        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;
    }
    .app-shell.m-open .m-backdrop { opacity: 1; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) {
        .app-shell .sidebar, .m-backdrop { transition: none; }
    }

    .app-shell .main { padding: 1rem; padding-bottom: 4.75rem; }

    .m-bottombar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 4rem;
        background: var(--card);
        border-top: 1px solid var(--border);
        z-index: 50;
        padding: 0.2rem 0.2rem;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom, 0px));
    }
    .m-tab {
        flex: 1 1 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 0.18rem;
        border: 0; background: none; font: inherit;
        color: var(--muted);
        text-decoration: none; cursor: pointer;
        padding: 0.3rem 0.1rem;
        position: relative;
    }
    .m-tab svg { width: 22px; height: 22px; display: block; }
    .m-tab-label { font-size: 0.66rem; line-height: 1; font-weight: 600; }
    .m-tab.active { color: var(--brand-deep); }
    .m-badge {
        position: absolute; top: 0.1rem; left: 54%;
        min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: 999px;
        background: var(--sage-deep); color: #fff;
        font-size: 0.6rem; font-weight: 700; line-height: 16px;
        text-align: center;
    }
    .m-logo { display: block; order: 1; }
    .m-iconbar { display: flex; align-items: center; gap: 0.5rem; }

    /* Schmalspalten-Politur (Mockup Stufe 2d) */
    .topbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .topbar-links { flex-wrap: wrap; gap: 0.5rem 1rem; }
    .topbar-row2 { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .row2-left, .row2-right { flex-wrap: wrap; gap: 0.5rem; }
    .search-box { width: 100%; }
    .pill-group { flex-wrap: wrap; }
    .greeting h1 { font-size: 1.35rem; }
    .org-menu { width: min(92vw, 360px); max-width: calc(100vw - 0.75rem); }
    .cr-menu { width: min(92vw, 340px); }
    /* bell-menu ist rechts an einem schmalen Trigger verankert -> sonst
       ragt das 380px-Panel links aus dem Viewport. Anker auf links. */
    .bell-menu { width: min(94vw, 380px); left: 0; right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RITMANO CONTENT-KOMPONENTEN (Run 3 Welle 1, 2026-06-12) — gemeinsame
   Bausteine der Screens gemaess Mockup/styling.md §6: Section-Header,
   Hero-Cards (Soft-Pastell-Ein-Ebenen-Architektur, §6.1), Panels, Tiles,
   Wochenplan-Liste, Beitrittsantraege. var()-Namen = semantischer
   Namensraum (§0-Mapping). Die historischen Foto-Dunkel-Regeln des
   Mockup-CSS sind hier KONSOLIDIERT (nur die finale Soft-Fassung).
   ═══════════════════════════════════════════════════════════════════════ */

.section-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.5rem 0 0.8rem;
}
.section-header h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.section-link { font-size: 0.82rem; color: var(--brand-deep); font-weight: 500; }
.ico { font-style: normal; }

/* ── Hero-Cards: Soft-Pastell mit Foto im Verlauf (styling.md §6.1) ──
   Verlauf + Foto liegen in EINER Hintergrund-Ebene (sonst Antialiasing-
   Naht an der Rundung); Foto via Inline-Variable --uc-photo. */
.upcoming {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.uc {
    border-radius: var(--r-lg);
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    transition: transform 0.12s ease-out;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    contain: layout paint;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(33, 26, 23, 0.06);
    background-color: var(--card);
}
/* Kategorie-Zuordnung (Bediener 2026-06-09): Training=Sage Soft,
   Freies=Soft Peach, Event=Gold Soft; Stops 1@52% / .55@72% / 0@96%. */
.uc.training { background: linear-gradient(90deg, rgba(234,246,239,1) 0%, rgba(234,246,239,1) 52%, rgba(234,246,239,0.55) 72%, rgba(234,246,239,0) 96%), var(--uc-photo) center top / cover no-repeat, var(--card); }
.uc.free     { background: linear-gradient(90deg, rgba(255,226,212,1) 0%, rgba(255,226,212,1) 52%, rgba(255,226,212,0.55) 72%, rgba(255,226,212,0) 96%), var(--uc-photo) center top / cover no-repeat, var(--card); }
.uc.event    { 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(--uc-photo) center top / cover no-repeat, var(--card); }
.uc:hover { transform: translate3d(0, -6px, 0); } /* NUR translate3d (NoGo 4) */

.uc-head { display: flex; align-items: center; gap: 0.6rem; }
.uc-icon {
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    background: rgba(33, 26, 23, 0.08);
    color: var(--ink);
}
/* Kategorie-SVG (cr-ic-Set) statt Mockup-Emoji im uc-icon. */
.uc-icon svg { width: 20px; height: 20px; display: block; }
.uc-tag {
    font-size: 0.65rem; font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    border: 1px solid transparent;
}
.uc.training .uc-tag { background: var(--sage-deep); }
.uc.free .uc-tag     { background: var(--brand); }
.uc.event .uc-tag    { background: var(--gold-deep); }
.uc-title {
    font-size: 1.15rem; font-weight: 800; color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.uc-meta {
    font-size: 0.82rem; color: var(--muted);
    display: flex; flex-direction: column; gap: 0.25rem;
}
.uc-meta-row { display: flex; align-items: center; gap: 0.4rem; }
.uc-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(33, 26, 23, 0.14);
    margin-top: auto;
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .av {
    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;
    margin-left: -8px;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-deep);
}
.avatar-stack .av.initials { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.avatar-stack .av:first-child { margin-left: 0; }
.avatar-stack .more { font-size: 0.78rem; color: var(--muted); margin-left: 0.4rem; font-weight: 500; }

.btn-sm-pill {
    padding: 0.35rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem; font-weight: 600;
    background: var(--brand);
    color: #fff;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn-sm-pill:hover { background: var(--brand-deep); color: #fff; }
.uc .btn-sm-pill.outline { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.uc .btn-sm-pill.outline:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); }

/* ── Panels + Tiles (styling.md §6.2) ── */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.panel-title { font-weight: 700; color: var(--ink); font-size: 0.98rem; }

.tiles-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}
.tile {
    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;
}
.tile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--border);
}
.tile-title {
    font-weight: 700; color: var(--ink); font-size: 0.98rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.tile-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 0.5rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 0.72rem;
    font-weight: 700;
}
.tile-link { font-size: 0.82rem; color: var(--brand-deep); font-weight: 500; text-decoration: none; }
.tile-body { padding: 0.4rem 0; }

/* ── Wochenplan-Liste (styling.md §6.3 — .week-Fassung bis zur
   .wp-Promotion beim mein-ritmano-Transfer) ── */
.week-list { display: flex; flex-direction: column; }
.week-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.week-row:last-child { border-bottom: none; }
.week-row:hover { background: var(--brand-softer); }
.week-day { text-align: center; line-height: 1.1; }
.week-day .dow {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    font-weight: 600;
}
.week-day .num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin-top: 0.1rem;
    display: block;
}
.week-info { min-width: 0; }
.week-name {
    font-size: 0.92rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-meta {
    font-size: 0.78rem; color: var(--muted);
    margin-top: 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-time {
    font-size: 0.82rem;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.week-cap {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--brand-softer);
    color: var(--brand-deep);
    min-width: 56px;
    text-align: center;
}
.week-cap.full { background: var(--error-soft); color: var(--error-deep); }
.week-cap.near { background: var(--gold-soft); color: var(--gold-deep); }

/* ── Beitrittsantraege (styling.md §6.4; Accept=Sage, kein CTA-Coral) ── */
.pending-list { display: flex; flex-direction: column; }
.pending-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--border);
}
.pending-row:last-child { border-bottom: none; }
.pending-av {
    width: 38px; height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 0.78rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.pending-meta { flex: 1; min-width: 0; }
.pending-name {
    font-size: 0.9rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-sub {
    font-size: 0.76rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-actions { display: flex; gap: 0.35rem; }
.pending-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    background: var(--card);
    transition: background 0.15s, color 0.15s;
}
.pending-btn.accept { color: var(--sage-deep); }
.pending-btn.accept:hover { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.pending-btn.reject { color: var(--error-deep); }
.pending-btn.reject:hover { background: var(--error); color: #fff; border-color: var(--error); }

@media (max-width: 980px) {
    .upcoming, .tiles-row { grid-template-columns: 1fr; }
    .pending-btn { width: 40px; height: 40px; } /* Tap-Targets (Mockup 2d) */
}

/* iCal-Export-Link ("In Kalender") auf der Club-Seite (Phase-2 Feature). */
.ical-link-r {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    width: fit-content;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-decoration: none;
}
.ical-link-r:hover { text-decoration: underline; }
.ical-link-r svg { flex-shrink: 0; }