:root {
    /* Design tokens — Mint palette (Grouvy Design-Refresh D-1)
       Reference: designvorschlaege/06-mint.html, docs/design_system.md */
    --mint: #2dd4bf;
    --mint-deep: #0f766e;
    --mint-soft: #ccfbf1;
    --mint-softer: #ecfdf5;
    --ink: #0a2e2a;
    --bg: #fdfcf8;
    --card: #ffffff;
    --muted: #5a6f6b;
    --text: #1f3a34;
    --coral: #ff7a59;

    /* ---------------------------------------------------------------------
       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;
    --border: rgba(10, 46, 42, 0.08);         /* dominanter Border-Wert */
    --border-strong: rgba(10, 46, 42, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --coral-soft: #fff2ec;     /* historisch fuer .badge-coral (in Batch I-reduced entfernt) */

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

/* 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 ---------------------------------------------------------- */
    .grouvy-header {
        padding: 0 0.75rem;
    }

    .grouvy-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. */
    .grouvy-nav-links {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .grouvy-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;
    }

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

    .grouvy-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 ------------------------------ */
    .training-list,
    .event-grid,
    .feature-grid,
    .discover-grid,
    .org-grid,
    .card-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. */
.grouvy-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);
}


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

.pl-section-lead {
    font-size: var(--fs-lg);
    color: var(--muted);
    max-width: 680px;
    margin-bottom: var(--space-6);
    line-height: var(--lh-relaxed);
}

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