/* Routes.razor:5 fokussiert per FocusOnNavigate nach jeder Navigation die h1 — dieser
   programmatische Fokus soll unsichtbar bleiben. Ein Tastatur-Fokus auf derselben
   Überschrift (:focus-visible) bekommt dagegen den globalen Fokusring weiter unten. */
h1:focus:not(:focus-visible) {
    outline: none;
}

/* Globaler Tastaturfokus (WCAG 2.4.7): sichtbarer Ring auf jedem fokussierbaren Element,
   das :focus-visible unterstützt (programmatischer Fokus per Maus/Skript bleibt ruhig). */
:focus-visible {
    outline: 2px solid var(--app-primary, #2563eb);
    outline-offset: 2px;
}

/* ── Schrift ────────────────────────────────────────────────────
   Noto Sans (lokal gebündelt, siehe lib/fonts/) für den gesamten
   App-Text; Überschriften zusätzlich in Black Italic. */
:root {
    --bs-body-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    font-style: italic;
}

/* ── Farben des App-Chromes ─────────────────────────────────────
   Navigation, Menü-Panel und das schwebende Zahnrad hatten dieselben
   Grautöne an neun Stellen in zwei Dateien hartcodiert. Werte unverändert,
   aber nur noch einmal notiert — ein späterer Dark Mode überschreibt diesen
   Block, statt die Regeln einzeln anzufassen. */
:root {
    --sa-surface: #ffffff;
    --sa-border: #e5e7eb;
    --sa-muted: #6b7280;
    --sa-strong: #374151;
    --sa-hover-bg: #f3f4f6;
    /* Halbtransparente Abdeckungen hinter Panels/Dialogen (Menü, Bild-Zuschnitt,
       Reconnect-Modal) waren an drei Stellen mit je eigener Deckkraft hartcodiert. */
    --sa-backdrop: rgba(0, 0, 0, 0.3);
    --sa-backdrop-medium: rgba(0, 0, 0, 0.4);
    --sa-backdrop-strong: rgba(0, 0, 0, 0.5);
    /* Schlagschatten unter schwebenden Flächen (Menü-Panel, Fehlerbanner, Reconnect-Modal),
       ebenfalls mit unterschiedlicher Deckkraft je Stelle. */
    --sa-shadow: rgba(0, 0, 0, 0.15);
    --sa-shadow-medium: rgba(0, 0, 0, 0.2);
    --sa-shadow-strong: rgba(0, 0, 0, 0.3);
    /* Textfarbe auf Flächen, die in --app-primary gefüllt sind (Demo-Banner). */
    --sa-on-primary: #ffffff;
    /* Neutraler Hintergrund hinter dem Zuschnitt-Rahmen (Bild-/Portrait-Crop). */
    --sa-crop-bg: #e9ecef;
    /* Fläche der Blazor-Reconnect-Warnleiste. */
    --sa-warning-surface: lightyellow;
}

/* Dark Mode: aktiviert über data-bs-theme="dark" auf <html> (saDarkMode.js).
   Bootstrap tauscht seine eigenen --bs-*-Variablen (Body-Hintergrund/-Text, Karten,
   Formulare, …) für dieses Attribut bereits selbst aus; hier nur die App-eigenen
   Grautöne des Chromes nachziehen, angelehnt an Bootstraps dunkle Palette. */
:root[data-bs-theme="dark"] {
    --sa-surface: #2b3035;
    --sa-border: #495057;
    --sa-muted: #adb5bd;
    --sa-strong: #f8f9fa;
    --sa-hover-bg: #343a40;
    --sa-backdrop: rgba(0, 0, 0, 0.3);
    --sa-backdrop-medium: rgba(0, 0, 0, 0.4);
    --sa-backdrop-strong: rgba(0, 0, 0, 0.5);
    --sa-shadow: rgba(0, 0, 0, 0.15);
    --sa-shadow-medium: rgba(0, 0, 0, 0.2);
    --sa-shadow-strong: rgba(0, 0, 0, 0.3);
    --sa-on-primary: #ffffff;
    --sa-crop-bg: #343a40;
    --sa-warning-surface: #4d3d00;
}

/* ── Überschriften-Skala ────────────────────────────────────────
   Die Bootstrap-Defaults (h1 2.5rem / h2 2rem / h3 1.75rem) sind für die
   mobile App zu groß und wurden bisher je Seite mit .h3/.h4/.h5/.h6
   einzeln korrigiert — mit drei verschiedenen Größen für dieselbe Ebene.
   Konvention: h1 = Seitentitel, h2 = Abschnitt, h3 = Unterabschnitt,
   h4 = Karten-/Listentitel. Die Größe kommt aus der Ebene, nicht aus einer
   Hilfsklasse; .h3/.h4/… auf Überschriften daher nicht wieder einführen. */
h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.15rem;
}

h4 {
    font-size: 1.05rem;
}

/* ── Abstand über Abschnitten ───────────────────────────────────
   Abschnitte saßen direkt am vorherigen Block (Tabelle, Button, Karte) —
   das Layout wirkte gedrängt. Der Abstand gehört wie die Größe zur Ebene:
   h2/h3 bringen ihre Luft selbst mit, statt sie je Seite als .mt-3/.mt-4
   nachzureichen (das ergab drei verschiedene Abstände für dieselbe Ebene).
   Ausgenommen: das erste Element eines Containers (Karte, Alert, Seite) —
   dort trennt der Abstand nichts. Karten-Titel bleiben ganz außen vor.
   Die Ränder kollabieren mit dem margin-bottom des Vorgängers, addieren
   sich also nicht. */
h2:not(:first-child):not(.card-title) {
    margin-top: 2.5rem;
}

h3:not(:first-child):not(.card-title) {
    margin-top: 2rem;
}

/* Überschrift direkt auf Überschrift gehört zusammen — kein Abschnittsabstand.
   Betrifft z. B. ClubDashboard.razor: <h1>Verein</h1> gefolgt vom <h2>@_club.Name</h2>
   direkt darunter (kein Logo/keine Auswahl dazwischen) wirkte mit den vollen 2.5rem
   wie eine Abschnittstrennung, obwohl der Vereinsname zur Überschrift gehört.
   :not(:first-child):not(.card-title) hier verdoppelt, sonst gewinnt die generische
   h2-Regel oben trotz Reihenfolge — ihre zwei :not() bringen mehr Spezifität als der
   einfache Typ-Kombinator h1 + h2. */
h1 + h2:not(:first-child):not(.card-title) {
    margin-top: 0.5rem;
}

h2 + h3 {
    margin-top: 0.5rem;
}

/* Überschrift mit „?“-Knopf steht in einer Flex-Zeile. Die Überschrift braucht dort mb-0,
   sonst zentriert die Zeile deren Rand-Box und der Knopf sitzt versetzt zum Text — damit
   fiel aber auch der Abstand nach unten weg: Buttons und Text klebten an der Überschrift,
   während sie unter einer normalen Überschrift die 0.5rem von Bootstrap bekommen. Den
   Abstand trägt jetzt die Zeile selbst, in derselben Höhe. */
.sa-heading-row {
    margin-bottom: 0.5rem;
}

/* Bei ABSCHNITTS-Überschriften fiel aus demselben Grund auch der Abstand nach oben weg: Das h2
   ist in dieser Zeile das erste Kind, also greift `h2:not(:first-child)` oben nicht mehr und der
   Abschnittsabstand von 2.5rem entfiel — die Überschrift klebte am vorigen Abschnitt, während ein
   einfaches h2 daneben Luft hatte. Die Zeile trägt ihn jetzt selbst.
   Warum eine eigene Klasse und nicht `.sa-heading-row:has(h2)`: Dieselbe Zeile trägt auf den
   Seitentiteln ein h1 (Playbook, Notizen, Teamkasse, Events, ClubDashboard) und darf dort KEINEN
   Abschnittsabstand bekommen — und `:has()` gibt es erst ab Safari 15.4, die App unterstützt aber
   iOS 15.0; die Regel würde dort still nicht greifen. */
.sa-heading-row-section:not(:first-child) {
    margin-top: 2.5rem;
}

/* ── Seitenbreiten ──────────────────────────────────────────────
   Öffentliche Seiten (MainLayout) trugen ihre Breite bisher je Seite als
   Inline-Style: 24/32/34/40/48rem und einmal 480px. Drei Rollen statt sechs
   Einzelwerte. Der eingeloggte Bereich wird über .page-content begrenzt
   (AuthGuardLayout.razor.css). */
.sa-prose {
    max-width: 48rem;
}

.sa-form {
    max-width: 34rem;
}

.sa-card {
    max-width: 30rem;
}

/* Blöcke innerhalb einer Seite. Lagen bisher als Inline-max-width an 14 Stellen
   (24/28/30/40/42rem); auch hier bestimmt die Rolle den Wert. */
.sa-field {
    max-width: 28rem;
}

.sa-block {
    max-width: 40rem;
}

/* Inhalt eines aufgeklappten Bereichs (SectionToggle). Einzug plus Leitlinie machen sichtbar,
   wo ein Bereich anfaengt und aufhoert — ohne sie sahen die Trennlinien INNERHALB eines
   Bereichs (z. B. zwischen Portraet und Betreuer) aus wie Bereichsgrenzen. */
.sa-section-body {
    max-width: 40rem;
    margin-left: 0.4rem;
    margin-bottom: 1.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--bs-border-color, rgba(128, 128, 128, 0.35));
}

.sa-menu {
    max-width: 30rem;
}

/* Die Einträge eines Menüs (Team-Hub, Einstellungen) sind Navigationsziele, keine
   Listenzeilen: mit dem Bootstrap-Default (.5rem/1rem) klebten Symbol und Text am
   Rand des Kastens. Mehr Polsterung macht die Kästen größer und nebenbei die
   Tap-Fläche auf dem Handy brauchbar. */
.sa-menu .list-group-item {
    padding: 1rem 1.25rem;
}

/* Zeile mit langer URL (iCal-Feed, Einladungslink) plus Kopieren-Button. */
.sa-url {
    max-width: 42rem;
}

/* Links global ohne Unterstrich – die Einfärbung genügt (überschreibt Bootstrap-Default).
   Das Unterstreichen von Links ist eine Nutzer-Option ("Links unterstreichen", SettingsMenu →
   Darstellung): sie setzt data-sa-underline="all" auf <html>, was in a11y.css ausnahmslos alle
   Links unterstreicht. Ohne die Option bleibt es bei der reinen Einfärbung. */
a {
    text-decoration: none;
}

.nav-menu-item,
.nav-menu-item:hover,
.nav-menu-item:focus,
.nav-menu-item:active {
    text-decoration: none !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten."
    }

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80vh;
    text-align: center;
}

.landing-hero {
    margin: auto 0;
}

.landing-demo {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
}

.landing-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.landing-subtitle {
    font-size: 1.2rem;
    color: var(--bs-secondary-color);
    margin-bottom: 2rem;
}

.api-error {
    text-align: center;
    padding: 3rem 1rem;
}

.api-error h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.api-error p {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Einstellungen-Zahnrad: schwebend, obere rechte Ecke. Global (nicht scoped),
   damit die Positionierung unabhängig von CSS-Isolation/Bundling greift. */
.settings-fab {
    position: fixed;
    top: max(0.6rem, env(safe-area-inset-top), var(--sa-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right), var(--sa-right, 0px));
    z-index: 150;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--sa-muted);
    background: var(--sa-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.settings-fab:hover {
    color: var(--app-primary, #1d4ed8);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.settings-fab.active {
    color: var(--app-primary, #2563eb);
}

.settings-fab svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Skip-Link (P7): Sprung zum Hauptinhalt, aus MainLayout und AuthGuardLayout verwendet.
   Global statt in einer der beiden .razor.css, weil beide Layouts dieselbe Klasse
   brauchen und eine CSS-Isolation-Datei nicht die andere erreicht. Standardmäßig aus
   dem Sichtfeld verschoben, bei Tastaturfokus oben links eingeblendet — z-index: 200,
   denn .settings-fab liegt auf z-index: 150 und würde ihn sonst verdecken. */
.sa-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--sa-surface);
    color: var(--sa-strong);
    border-radius: 0 0 0.5rem 0;
}

.sa-skip-link:focus {
    left: 0;
}

/* Anwesenheitsstatistik: eine Zeile je Spieler, Balkenlänge = Teilnahmezahl relativ
   zum Höchstwert der Liste. Einfarbig (Vereinsfarbe) statt Kategorienpalette, da eine
   einzelne Kennzahl je Person gerankt wird — Farbe würde hier keine Zusatzinfo tragen. */
.sa-stat-bar-row {
    margin-bottom: 0.5rem;
}

.sa-stat-bar-name {
    width: 9rem;
    flex: 0 0 auto;
}

.sa-stat-bar-value {
    width: 2.5rem;
    flex: 0 0 auto;
}

.sa-stat-bar-track {
    height: 1.5rem;
    border-radius: 4px;
    background: var(--sa-hover-bg);
    overflow: hidden;
}

.sa-stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--app-primary, #2563eb);
}

/* Level-Anzeige einer Notiz: 0-5 Punkte, frei belegbare Markierung (siehe LevelDots.razor). */
.sa-level-dots {
    display: inline-flex;
    gap: 0.2rem;
}

.sa-level-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--sa-border);
}

.sa-level-dot.filled {
    background: var(--app-primary, #2563eb);
}

/* Bilder in gerendertem Markdown (Playbook/Notiz) dürfen den Container nie überragen — ohne das
   ragt ein breites/hohes Quellbild seitlich aus der Karte heraus (Bootstrap setzt max-width nur
   für .img-fluid, nicht für rohe <img>-Tags aus Markdown-Inhalt). */
.playbook-preview img {
    max-width: 100%;
    height: auto;
}

/* Abgesagter Termin in der "Alle Events"-Tabelle: rote Umrandung statt vollflächig rosa
   gefüllter Zeile (Bootstraps table-danger) — die Füllung wirkt vor allem im Dark Mode unschön. */
.sa-table-row-cancelled {
    outline: 2px solid var(--bs-danger);
    outline-offset: -2px;
}

/* Reduzierte Bewegung (WCAG 2.3.3): wirkt nur im eigenen CSS, nicht in den scoped
   CSS-Isolation-Bundles (saClient.styles.css / saClient.Web.styles.css), die später im
   <head> stehen und dieselbe Spezifität gewinnen würden. Spinner bleiben ausgenommen,
   sonst frieren Ladeanzeigen optisch ein statt nur langsamer zu drehen. */
@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;
    }

    .spinner-border, .spinner-grow {
        animation-duration: 1.5s !important;
    }
}

/* ── Anmelde-Buttons (Apple/Google/Microsoft) ──────────────────────
   Google, Microsoft und vor allem Apple schreiben ihre Anbieter-Buttons
   markenrechtlich fest vor (Apples HIG verlangt für "Sign in with Apple"
   ausdrücklich Schwarz/Weiß statt einer beliebigen App-Farbe) — diese drei
   Buttons bleiben deshalb bewusst ohne .btn-primary, sonst würde theme.css
   sie in die Vereinsfarbe einfärben. Höhe/Radius/Schriftgröße sind für
   alle drei identisch, damit Apple nicht weniger prominent wirkt als die
   anderen (ebenfalls eine HIG-Vorgabe). Bootstrap 5.3 schaltet Hover- und
   Active-Zustände über Variablen, daher setzen wir hier `--bs-btn-*` statt
   direkter Eigenschaften — sonst würden die Buttons beim Hover/Focus dunkel
   auf dunklem Grund. */

.sa-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    --bs-btn-border-radius: 8px;
    --bs-btn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.25;
}

.sa-auth-logo {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sa-auth-btn-apple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a1a1a;
    --bs-btn-hover-border-color: #1a1a1a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #262626;
    --bs-btn-active-border-color: #262626;
}

.sa-auth-logo-apple {
    background-image: url("img/apple-logo-white.svg");
}

:root[data-bs-theme="dark"] .sa-auth-btn-apple {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #e6e6e6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #d9d9d9;
    --bs-btn-active-border-color: #d9d9d9;
}

:root[data-bs-theme="dark"] .sa-auth-logo-apple {
    background-image: url("img/apple-logo-black.svg");
}

.sa-auth-btn-google {
    --bs-btn-color: #1f1f1f;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #747775;
    --bs-btn-hover-color: #1f1f1f;
    --bs-btn-hover-bg: #f7f7f7;
    --bs-btn-hover-border-color: #747775;
    --bs-btn-active-color: #1f1f1f;
    --bs-btn-active-bg: #ededed;
    --bs-btn-active-border-color: #747775;
}

.sa-auth-logo-google {
    background-image: url("img/google-logo.svg");
}

:root[data-bs-theme="dark"] .sa-auth-btn-google {
    --bs-btn-color: #e3e3e3;
    --bs-btn-bg: #131314;
    --bs-btn-border-color: #8e918f;
    --bs-btn-hover-color: #e3e3e3;
    --bs-btn-hover-bg: #1d1d1e;
    --bs-btn-hover-border-color: #8e918f;
    --bs-btn-active-color: #e3e3e3;
    --bs-btn-active-bg: #262627;
    --bs-btn-active-border-color: #8e918f;
}

.sa-auth-btn-microsoft {
    --bs-btn-color: #5e5e5e;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #8c8c8c;
    --bs-btn-hover-color: #5e5e5e;
    --bs-btn-hover-bg: #f7f7f7;
    --bs-btn-hover-border-color: #8c8c8c;
    --bs-btn-active-color: #5e5e5e;
    --bs-btn-active-bg: #ededed;
    --bs-btn-active-border-color: #8c8c8c;
}

.sa-auth-logo-microsoft {
    background-image: url("img/microsoft-logo.svg");
}

:root[data-bs-theme="dark"] .sa-auth-btn-microsoft {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2f2f2f;
    --bs-btn-border-color: #8c8c8c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a3a3a;
    --bs-btn-hover-border-color: #8c8c8c;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #454545;
    --bs-btn-active-border-color: #8c8c8c;
}

/* Store-Badges der Download-Seite. Apple und Google verlangen beide unveränderte
   Original-Grafiken mit freiem Raum ringsum — Googles Vorgabe (ein Viertel der Badge-Höhe)
   ist die strengere und bestimmt daher den Abstand. Die Grafiken sind auf die reine
   Badge-Fläche zugeschnitten, dadurch reicht eine gemeinsame Höhe für beide. */
.sa-store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.sa-store-badge {
    height: 48px;
    width: auto;
}

.sa-store-badge-dark {
    display: none;
}

:root[data-bs-theme="dark"] .sa-store-badge-light {
    display: none;
}

:root[data-bs-theme="dark"] .sa-store-badge-dark {
    display: inline-block;
}

/* Drag-Proxy der Aufstellung (PitchField/saPitch.js). Beim Ziehen klont JS den Chip nach
   <body> und bewegt nur den Klon — das Original bleibt unberührt im Blazor-Baum. Die Styles
   stehen deshalb hier global und nicht im scoped CSS der Komponente: der Klon hängt außerhalb
   des Komponenten-Baums. !important, weil der Klon die Scope-Kennung der Komponente mitträgt
   und deren Regeln (.pitch-chip) sonst höher spezifisch wären; left/top setzt saPitch.js. */
.sa-pitch-drag-proxy {
    position: fixed !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    margin: 0 !important;
    z-index: 1080;
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.sa-pitch-dragging {
    opacity: 0.35 !important;
}

/* Beitrags-Tabelle (Teamkasse-Ansicht und TreasuryManager): eigener Scroll-Container, damit
   Kopfzeile (oben) und Namensspalte (links) beim Scrollen in beide Richtungen sichtbar bleiben.
   Global statt scoped, weil Seite und Komponente sie gemeinsam nutzen. border-collapse: separate,
   sonst wandern die Rahmen der fixierten Zellen in Chromium/WebView nicht mit. */
.sa-fee-table-scroll {
    max-height: 70vh;
    overflow: auto;
    margin-bottom: 1rem;
    /* Scrollleisten unsichtbar, bis die Maus darüber ist oder der Fokus drin liegt; mit der
       Option "Links unterstreichen" immer sichtbar. Transparent statt ausgeblendet, damit die
       Breite gleich bleibt und die Tabelle beim Hovern nicht springt. */
    scrollbar-color: transparent transparent;
}

.sa-fee-table-scroll:hover,
.sa-fee-table-scroll:focus-within,
:root[data-sa-underline="all"] .sa-fee-table-scroll {
    scrollbar-color: auto;
}

.sa-fee-table-scroll > .table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.sa-fee-table-scroll > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sa-fee-table-scroll > .table > thead > tr > th:first-child,
.sa-fee-table-scroll > .table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    border-right: var(--bs-border-width) solid var(--bs-border-color);
}

.sa-fee-table-scroll > .table > tbody > tr > td:first-child {
    z-index: 1;
}

/* Ecke oben links liegt über Kopfzeile und Namensspalte. */
.sa-fee-table-scroll > .table > thead > tr > th:first-child {
    z-index: 3;
}

/* Druck des Einladungs-QR-Codes: Nur solange der InviteQrDialog offen ist (:has), blendet der Druck alles ausser dem QR-Inhalt aus; ohne offenen Dialog bleibt der Druck unveraendert. */
@media print {
    body:has(.sa-qr-print-root) * { visibility: hidden; }
    body:has(.sa-qr-print-root) .sa-print-only-qr,
    body:has(.sa-qr-print-root) .sa-print-only-qr * { visibility: visible; }
    body:has(.sa-qr-print-root) .sa-print-only-qr { position: absolute; inset: 0; }
    body:has(.sa-qr-print-root) .modal-backdrop { display: none; }
}

.sa-qr-box { width: min(80vw, 420px); }
.sa-qr-box > svg, .sa-qr-box > img { width: 100%; height: auto; display: block; }

/* Zu-/Absage-, Unsicher- und Kommentar-Knöpfe: nur Symbol, aber breiter als das Symbol, damit sie gut zu treffen sind. */
.sa-rsvp-btn {
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tabelle „Alle Termine“: etwas mehr Luft über und unter jeder Terminzeile (Bootstrap-Standard 0.5rem). */
.sa-event-table > tbody > tr > td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}