/*
   HG.HGSpielberichte - mobile PWA (Spielberichte/Spielverlauf).

   UI-Kanon übernommen aus den HG-Satelliten (Vorbild HG.HGVerwaltung /
   HG.H360Boarding.Web / HG.HGEvents.Web): dieselben Token-Namen, --radius: 0,
   .karte / .btn / .form-input / .marke, Kopf "Wappen über Balken", Focus-Ring
   als box-shadow. Werte sind die CI-SSOT aus "CC_HG Kaarst-Büttgen" (10_Logo/CI/)
   - hier nur gespiegelt.

   Schrift: selbst gehostet (keine externen Hosts), wie HG.HGWebsite - Epunda Slab
   ("HG Kopf") für Überschriften, Inter für Fließtext, JetBrains Mono für
   Angabenzeilen. URW Egyptienne wird im Web NICHT ausgeliefert (Lizenz).
*/

@font-face { font-family: "HG Kopf"; src: url("../schrift/epunda-slab-750.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "HG Kopf"; src: url("../schrift/epunda-slab-500.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../schrift/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../schrift/jetbrains-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
    /* CI-Farben (SSOT CC_HG Kaarst-Büttgen) */
    --background: #fafafa;
    --foreground: #1f1f1f;
    --card: #ffffff;
    --primary: #0E55A1;
    --primary-foreground: #ffffff;
    --hg-gelb: #FFD000;
    --hg-navy: #082B54;
    --hg-ink: #0B1424;
    --muted: #f0f0f0;
    --muted-foreground: #6b6b6b;
    --border: #e8e8e8;
    --input-background: #ffffff;
    --accent: #e6eef8;
    --paper-2: #F4F6FA;
    --line: rgba(14, 85, 161, .14);
    --destructive: #b8302a;
    --erfolg: #1B7F3B;
    --ring: #0E55A1;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --radius: 0;
    --schatten: 0 1px 6px rgba(0, 0, 0, .10);

    /* Schrift-Stacks */
    --schrift-kopf: "HG Kopf", Rockwell, "Roboto Slab", Georgia, serif;
    --schrift-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --schrift-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

    /* Kopfgeometrie nach CI: Wappen = 3 x Balkenhöhe, 0.85 H oben / 1.15 H unten. */
    --balken-hoehe: 46px;
    --wappen-breite: calc(var(--balken-hoehe) * 3 * 0.836);
    --wappen-luft: 0.75rem;
    --spalte: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--schrift-text);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--hg-navy);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* FocusOnNavigate setzt den Fokus auf die h1 (tabindex=-1) - kein sichtbarer Rahmen am Titel. */
h1:focus, h1:focus-visible { outline: none; }

/* ---------- Kopf: Wappen über Balken (CI) ---------- */
.kopf { position: relative; background: var(--card); z-index: 10; }
.kopf-weiss { height: calc(var(--balken-hoehe) * 0.85 + var(--wappen-luft)); }
.kopf-balken { height: var(--balken-hoehe); background: var(--primary); }
.kopf-balken-inhalt {
    max-width: var(--spalte);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-right: 1rem;
    padding-left: calc(1rem + var(--wappen-breite) + 0.9rem);
}
.kopf-marke {
    color: #ffffff;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kopf-wappen-link {
    position: absolute;
    top: var(--wappen-luft);
    left: max(1rem, calc(50% - var(--spalte) / 2 + 1rem));
    z-index: 11;
    display: block;
    line-height: 0;
}
.kopf-wappen { height: calc(var(--balken-hoehe) * 3); width: auto; display: block; }

/* ---------- Inhalt ---------- */
.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--spalte);
    margin: 0 auto;
    padding: calc(var(--balken-hoehe) * 1.15 + 1.25rem) 1rem 2.5rem;
}

/* ---------- Haus-Primitives ---------- */
.karte {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { background-color: color-mix(in srgb, var(--primary) 85%, #000); border-color: color-mix(in srgb, var(--primary) 85%, #000); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 0; padding: 0.3rem 0.7rem; font-size: 0.875rem; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* Marken/Status-Pills - einzige Rundung (9999px), sonst eckig */
.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    white-space: nowrap;
}
.marke-blau { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.marke-erfolg { background: #e3f3e8; color: #14602c; }
.marke-warn { background: #fff3bf; color: #5c4300; }
.marke-neutral { background: var(--muted); color: var(--muted-foreground); }
.marke-kontur { background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }
.marke-gelb { background: var(--hg-gelb); color: var(--hg-navy); font-weight: 500; }
.marke-hell { background: rgba(255, 255, 255, .18); color: #fff; }

/* Spielausgang - exakt wie auf der Vereins-Homepage (Sieg = Gelb/Navy,
   Niederlage = Ink/weiß, Unentschieden = helles Blaugrau). */
.marke-sieg { background: var(--hg-gelb); color: var(--hg-navy); font-weight: 600; }
.marke-niederlage { background: #14181f; color: #fff; font-weight: 600; }
.marke-remis { background: #c7d0de; color: #14181f; font-weight: 600; }

/* Mono-Angabenzeile (CI-Eyebrow) */
.mono {
    font-family: var(--schrift-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    color: var(--muted-foreground);
}

/* CI-Akzentstrich vor Abschnittstiteln: auf hell = blau */
.block-titel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.0625rem;
    color: var(--hg-navy);
    margin-bottom: 0.9rem;
}
.block-titel::before {
    content: "";
    flex: none;
    width: 0.26rem;
    height: 1.05em;
    background: var(--primary);
}

/* Fuss */
.fuss {
    padding: 1.25rem 1rem calc(2rem + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.fuss-zeile { margin: 0.15rem 0; }
.fuss-konto { margin-top: 0.6rem; font-size: 0.8rem; }
.fuss-abmelden {
    padding: 0;
    font: inherit;
    color: var(--primary);
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ---------- Ladeanzeige (vor dem Start der WASM-App) ---------- */
.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 28vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--muted);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.08s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    inset: calc(28vh + 2.5rem) 0 auto 0;
    text-align: center;
    font-family: var(--schrift-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}
.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Laden …");
}

/* ---------- Blazor-Fehler-UI: standardmäßig verborgen, erscheint nur bei echtem Fehler ---------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.7rem 2.5rem 0.75rem 1.25rem;
    background: var(--hg-gelb);
    color: var(--hg-ink);
    font-size: 0.9rem;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .18);
}
#blazor-error-ui .reload { color: var(--primary); text-decoration: underline; margin-left: 0.3rem; }
#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.9rem;
    top: 0.5rem;
    cursor: pointer;
}

/* Kleine Geräte: Grundschrift etwas herunterskalieren, wo der Platz knapp wird.
   Alle rem-Größen skalieren mit; Touch-Ziele (px-Mindesthöhen) bleiben erhalten. */
@media (max-width: 23.5rem) { html { font-size: 93.75%; } }
@media (max-width: 20rem) { html { font-size: 87.5%; } }

@media (min-width: 40rem) {
    :root { --balken-hoehe: 56px; }
}

/* ---------- Desktop: breitere Inhaltsspalte (Mobile bleibt 34rem) ---------- */
/* Listen (Mannschaften, Letzte Spiele, Spielplan) und der Kopf nutzen ab
   Tablet/Desktop mehr Breite. */
@media (min-width: 48rem) { :root { --spalte: 50rem; } }
/* Die Spielbericht-Detailseite wird mehrspaltig und nutzt dafür noch mehr Breite.
   Greift nur auf der Detailseite (Markierung .sb-seite) und nur auf dem Desktop. */
@media (min-width: 64rem) { body:has(.sb-seite) { --spalte: 64rem; } }