@import url('/schriften/schriften.css');

/* ===========================================================================
   Helferplan Heimspieltage — Grundgestaltung
   Umgesetzt nach docs/UI-SPEZIFIKATION.md. Die Tokens dort sind verbindlich.

   Vereins-CI wird an genau EINER Stelle eingesetzt: den drei --marke-Werten
   direkt hier unten. Alles andere leitet sich ab.
   =========================================================================== */

:root {
  /* --- Austauschpunkt fuer die Vereins-CI (D7) ------------------------- */
  /* Abgenommen am Wappen und an handball-stutensee.de: das Blau der Wappen-
     schrift ist #183C6C, das Kopfband der Website steht auf #263A67. Beides
     derselbe Ton, hier gemittelt. 11,3:1 gegen Weiss. */
  --marke: #1B3A6B;          /* Hauptfarbe des Vereins */
  --marke-dunkel: #8FB8EA;   /* dieselbe Farbe, aufgehellt fuer den Dunkelmodus */
  --marke-kontrast: #FFFFFF; /* Textfarbe auf der Hauptfarbe */

  /* Zweitfarbe des Vereins. Sie kommt AUSSCHLIESSLICH im Kopfband vor und
     nie an einem Bedienelement, einem Text oder einem Status — das Orange
     liegt zu nah an --open (offene Schicht) und wuerde dessen Bedeutung
     verwaessern, sobald es an zweiter Stelle auch nur dekorativ auftaucht.
     Die Website laeuft nach rechts bis #D2632B aus; darauf traegt weisser
     Text nur 3,6:1. Hier gleicher Farbton, abgedunkelt auf 4,8:1. */
  --marke-zweit: #BC5412;

  /* Das Kopfband. Verlauf von der Haupt- in die Zweitfarbe, wie auf der
     Vereinsseite. Weisser Text sitzt ueber der gesamten Breite bei >= 4,76:1. */
  --band-von: var(--marke);
  --band-bis: var(--marke-zweit);

  /* --- Flaechen und Text ---------------------------------------------- */
  --bg: #EDF0F3;
  --surface: #FFFFFF;
  --surface2: #F5F7F9;
  --ink: #101A22;
  --muted: #5B6C78;
  --line: #D5DEE4;
  --line-soft: #E6ECF0;

  --accent: var(--marke);
  --accent-soft: #E4EBF5;

  /* Gastronomie bleibt eigenstaendig — sie traegt Information, keine CI. */
  --gastro: #7A4E9C;
  --gastro-soft: #EFE7F6;

  /* Statusfarben sind NICHT Teil der CI und werden nie ersetzt. */
  /* Von #B0700F abgedunkelt: der alte Wert erreichte auf --open-soft nur 3,60:1
     und verfehlte damit WCAG AA fuer Text (4,5:1). Gleicher Farbton (36 Grad),
     nur die Helligkeit von 37 auf 32 Prozent. Jetzt 4,57:1. */
  --open: #99610D;
  --open-soft: #FBF0DC;
  --full: #276E50;
  --full-soft: #E0F0E8;
  --alert: #A8423A;
  --alert-soft: #FBE7E5;

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-karte: 7px;
  --radius-klein: 4px;
  --radius-pille: 11px;
  --rand: 16px;
  --breite: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1318;
    --surface: #151E25;
    --surface2: #1B252D;
    --ink: #E4ECF2;
    --muted: #93A5B2;
    --line: #27343D;
    --line-soft: #1F2B33;
    /* Im Dunkelmodus ist --accent die aufgehellte Marke. Bliebe --marke-kontrast
       auf Weiss, stuende weisser Text auf hellem Blau (~1,4:1) — in jeder
       Primaerschaltflaeche, in der aktiven Spieltagskachel und im Anmeldeknopf.
       Die Textfarbe auf der Markenflaeche kippt deshalb mit. */
    --marke-kontrast: #101A22;
    --accent: var(--marke-dunkel);
    --accent-soft: #17293A;
    --band-von: #16294A;
    --band-bis: #8E3F0D;
    --gastro: #BB9BD8;
    --gastro-soft: #241C33;
    --open: #E0A44E;
    --open-soft: #33270F;
    --full: #63BC90;
    --full-soft: #122C21;
    --alert: #E0776B;
    --alert-soft: #33201D;
  }
}

:root[data-theme="dark"] {
  --bg: #0D1318;
  --surface: #151E25;
  --surface2: #1B252D;
  --ink: #E4ECF2;
  --muted: #93A5B2;
  --line: #27343D;
  --line-soft: #1F2B33;
  --marke-kontrast: #101A22;
  --accent: var(--marke-dunkel);
  --accent-soft: #17293A;
  --band-von: #16294A;
  --band-bis: #8E3F0D;
  --gastro: #BB9BD8;
  --gastro-soft: #241C33;
  --open: #E0A44E;
  --open-soft: #33270F;
  --full: #63BC90;
  --full-soft: #122C21;
  --alert: #E0776B;
  --alert-soft: #33201D;
}

/* --- Grundgeruest ------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  /* Die Seite scrollt nie horizontal. */
  overflow-x: hidden;
}

.wrap {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-inline: max(var(--rand), env(safe-area-inset-left), env(safe-area-inset-right));
}

h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 600; }
h1 { font-size: 27px; text-transform: uppercase; letter-spacing: .035em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

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

/* Sichtbarer Fokus auf allem Bedienbaren. Nicht entfernen.

   tabindex="-1" ist ausgenommen: solche Elemente sind mit der Tabulatortaste
   nicht erreichbar, sie werden nur aus dem Programm heraus fokussiert. Ein Ring
   um sie markiert nichts, er ueberrascht nur. */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* FocusOnNavigate (Components/Routes.razor) haengt nach jedem Seitenwechsel
   tabindex="-1" an die h1 und setzt den Fokus dorthin, damit ein Screenreader
   die neue Seite ansagt. Das ist gewollt und bleibt. Sichtbar sein soll dieser
   Fokus jedoch nicht: ohne diese Regel steht nach JEDEM Seitenaufruf ein
   dunkler Rahmen um die Ueberschrift -- in Browsern, die fuer programmatischen
   Fokus :focus-visible setzen, der Ring von oben, sonst der des Browsers. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

/* Alle Zahlen, die untereinander stehen, fluchten. */
.zahl, .zeit, .anpfiff, .kennzahl { font-variant-numeric: tabular-nums; }

/* --- Kopfzeile --------------------------------------------------------- */

.kopf {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Das Kopfband traegt die Vereins-CI: Blau, nach rechts ins Vereinsorange
   auslaufend — dieselbe Anmutung wie handball-stutensee.de.

   Es liegt in einem eigenen Element und nicht auf .kopf selbst, weil unter dem
   Band noch die Spieltagsauswahl haengt (Oeffentlich/Plan.razor reicht sie ueber
   SectionOutlet in denselben <header> herein). Die gehoert auf Flaechenfarbe,
   nicht auf den Verlauf — sonst stehen weisse Kacheln auf Orange. */
.kopf-band {
  background: linear-gradient(95deg,
    var(--band-von) 0%, var(--band-von) 38%, var(--band-bis) 100%);
  color: #FFFFFF;
}

/* Auf dem Band ist jeder Text deckend weiss. Abgestuftes Weiss (85 %) traegt
   ueber dem orangen Ende nur noch 3,9:1 und verfehlt damit WCAG AA; die
   Abstufung leistet hier stattdessen Schriftgrad und Laufweite. */
.kopf-band h1,
.kopf-band .marke,
.kopf-band .kopf-zusatz,
.kopf-band a,
.kopf-band .hauptnav a,
.kopf-band .hauptnav a:hover { color: #FFFFFF; }

/* Der Fokusring aus app.css ist --accent — Vereinsblau auf Vereinsblau waere
   auf dem Band unsichtbar. */
.kopf-band :where(a, button, input, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #FFFFFF;
}

/* Anmelden/Abmelden sitzen im Band und koennen dort nicht auf Flaechenfarbe
   stehen, ohne wie ein Fremdkoerper zu wirken. */
.kopf-band .knopf.stumm {
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .6);
  color: #FFFFFF;
}
.kopf-band .knopf.stumm:hover { background: rgb(255 255 255 / .26); filter: none; }

.kopf-inhalt {
  display: flex; align-items: center; gap: 12px;
  padding-block: 12px; flex-wrap: wrap;
}
.logo {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.kopf-zusatz {
  font-family: var(--display); font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

/* --- Schaltflaechen und Formulare -------------------------------------- */

.knopf {
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-klein);
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--marke-kontrast); cursor: pointer;
  min-height: 38px;
}
.knopf:hover { filter: brightness(1.08); }
.knopf.stumm {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}

input[type="text"], input[type="email"], select, textarea {
  font-family: var(--body); font-size: 14px;
  padding: 7px 10px; border-radius: var(--radius-klein);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  min-height: 38px;
}

label { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Ein Platzhalter ist kein Label. Bei Platzmangel visuell verborgen, aber vorhanden. */
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot: sichtbar nur fuer Bots. */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Meldungen --------------------------------------------------------- */

.meldung {
  border-radius: var(--radius-klein); padding: 10px 14px; margin-block: 12px;
  border: 1px solid var(--line); background: var(--surface2); font-size: 13.5px;
}
.meldung.erfolg { border-color: var(--full); background: var(--full-soft); color: var(--full); }
.meldung.fehler { border-color: var(--alert); color: var(--alert); }

/* --- Barrierefreiheit und Bewegung ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* Auf Touch mindestens 44x44 px. */
@media (pointer: coarse) {
  .knopf, .slot, .pille { min-height: 44px; }
}

@media (max-width: 520px) {
  h1 { font-size: 22px; }
}

/* --- Kopf- und Fusszeile ----------------------------------------------- */

.hauptnav {
  display: flex; gap: 14px; flex-wrap: wrap; margin-inline-start: auto;
  font-size: 13.5px; font-weight: 600;
}
.hauptnav a { color: var(--ink); text-decoration: none; padding: 6px 2px; }
.hauptnav a:hover { color: var(--accent); text-decoration: underline; }

/* Konto-Zeile immer ganz nach rechts. Ohne das haengt sie direkt am Titel und
   laesst die halbe Kopfzeile leer — was mit dem farbigen Band deutlich auffaellt.
   Steht .hauptnav daneben, teilen sich beide den freien Platz. */
.kopf-konto { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.abmeldeform { display: inline; }

.fusszeile {
  margin-top: 34px; padding-block: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.fusszeile a { color: var(--muted); }

@media (max-width: 700px) {
  .hauptnav { margin-inline-start: 0; width: 100%; order: 3; }
  .kopf-konto { margin-inline-start: auto; }
}

@media print {
  .kopf-konto, .hauptnav, .fusszeile { display: none; }
  /* Ein flaechiger Farbverlauf ueber die volle Breite ist auf Papier weder
     gewollt noch (ohne background-graphics) zuverlaessig. */
  .kopf-band { background: none; color: var(--ink); }
  .kopf-band h1, .kopf-band .marke, .kopf-band .kopf-zusatz { color: var(--ink); }
}

/* Die Marke in der Kopfzeile sieht aus wie eine Ueberschrift, ist aber keine —
   die Ueberschrift erster Ordnung gehoert dem Seiteninhalt. Zwei h1 auf einer
   Seite sind fuer einen Screenreader eine kaputte Gliederung. */
.marke {
  display: block;
  font-family: var(--display); font-size: 27px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .035em; line-height: 1.1;
}
@media (max-width: 520px) { .marke { font-size: 22px; } }

/* --- Fehlerbanner von Blazor ------------------------------------------- */
/* Blazor blendet dieses Element per Inline-Stil ein, wenn der Circuit bricht.
   Die Regel, die es bis dahin versteckt, stand im Bootstrap-Template und ist
   mit ihm verschwunden — ohne sie steht die Meldung dauerhaft auf jeder Seite. */
#blazor-error-ui {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  padding: 12px 16px;
  background: var(--alert); color: var(--marke-kontrast);
  font-size: 13.5px;
  box-shadow: 0 -2px 10px rgb(0 0 0 / .25);
}
#blazor-error-ui a, #blazor-error-ui .dismiss { color: inherit; cursor: pointer; }
#blazor-error-ui .dismiss { float: right; }

/* --- Ampel: "dringend" (ergaenzt fuer die oeffentliche Seite, UI-SPEZIFIKATION 13.3)
   Das einzige Rot der Helfer-Seite, das KEIN Fehler ist: eine leere Schicht, deren
   Spieltag hoechstens 7 Tage entfernt ist. Bewusst ein eigener Token und nicht --alert
   (--alert heisst "etwas stimmt nicht": geaenderte Schicht, fehlende Zustaendigkeit).
   5,7:1 hell, 6,3:1 dunkel auf der jeweiligen -soft-Flaeche. */
:root {
  --dringend: #B3261E;
  --dringend-soft: #FCE8E6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dringend: #F28B82;
    --dringend-soft: #3A1F1C;
  }
}
:root[data-theme="dark"] {
  --dringend: #F28B82;
  --dringend-soft: #3A1F1C;
}