/* Baltic-Cup App – Grundstil aller drei Apps (Wasser, Teilnehmer, Büro).
   Werte nur aus design-tokens.css; Regeln nach Doku/Design/DesignSystem/project/README.md (Typografie, Abstände,
   Fokus) und dem Kopf von components/bundle.css (.bc-root, .bc-num, .bc-icon). Komponenten (Button, Badge …)
   kommen nicht hierher, sondern mit ihrer Razor-Komponente (TODO 1c). */

/* Open Sans, selbst ausgeliefert statt Google Fonts (keine IP-Adressen an Dritte, offline verfügbar; Entscheidung
   Nutzer Session 30). Variable Schrift 300–800 aus @fontsource-variable/open-sans 5.3.0, Lizenz OFL 1.1
   (fonts/open-sans/OFL.txt). Untermengen wie im Paket: latin (inkl. Æ Ø Å), latin-ext nur bei Bedarf. */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bedienelemente und Bildlaufleisten des Browsers passend zum Thema */
:root { color-scheme: light; }
[data-theme="nacht"] { color-scheme: dark; }

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--surface);
}

/* Textstil „body“ (18/26) — kleinste Schrift der App ist „label“ mit 16px */
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 26px;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

/* Textstile „titel-1“ (Seitentitel) und „titel-2“ (Abschnitte); fett, nicht in Versalien */
h1 { margin: 0 0 var(--space-3); font-size: 28px; line-height: 34px; font-weight: 700; }
h2 { margin: 0 0 var(--space-3); font-size: 22px; line-height: 28px; font-weight: 700; }
p { margin: 0 0 var(--space-3); }

a { color: var(--brand); }

/* Fokus: 3px durchgezogener Ring in „focus“ mit 2px Abstand, auf allen Flächen ≥ 3:1 */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Blazor setzt nach dem Navigieren den Fokus auf die Überschrift (FocusOnNavigate) — dort kein Ring */
h1:focus { outline: none; }

/* Zahlen tabellarisch, damit Countdowns und Zeitspalten nicht springen (bundle.css) */
.bc-num { font-variant-numeric: tabular-nums lining-nums; }

/* Lineare Symbole, 24px, Strich 2,25 (in Badges 18px / 2,5), runde Enden, currentColor (bundle.css) */
.bc-icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.bc-icon--sm { width: 18px; height: 18px; stroke-width: 2.5; }

/* Hilfsklassen aus dem Kopf von bundle.css: Stapel, Reihe, Bildunterschrift (Legende unter Tabellen, Session 31) */
.bc-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.bc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bc-caption { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

/* ---------- Blazor: Fehlerleiste, Fehlergrenze, Ladeanzeige ----------
   Rot nur für Frühstart, Abbruch und Stornieren (F12) — Fehler deshalb in „warn“. Die Fehlerleiste ist der letzte
   Ausweg; Ladefehler zeigen sonst die Fehlerkarte (blazor-conventions.md „Robustheit“). */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
    background: var(--warn-bg);
    color: var(--warn);
    border-top: 3px solid var(--warn-line);
    font-weight: 600;
}

    #blazor-error-ui .reload { color: var(--brand); font-weight: 700; }

    #blazor-error-ui .dismiss {
        position: absolute;
        top: var(--space-2);
        right: var(--space-3);
        padding: var(--space-1);
        background: none;
        border: none;
        color: var(--brand);
        font: inherit;
        text-decoration: underline;
        cursor: pointer;
    }

.blazor-error-boundary {
    padding: var(--space-4);
    background: var(--warn-bg);
    color: var(--warn);
    border: 2px solid var(--warn-line);
    border-radius: var(--radius-lg);
    font-weight: 600;
}

    .blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--line);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brand);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
}

    .loading-progress-text::after { content: var(--blazor-load-percentage-text, "Lädt"); }

@media (prefers-reduced-motion: reduce) {
    .loading-progress circle:last-child { transition: none; }
}