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

/* ===========================================================================
   Helferplan — 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 Kachel 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;
}

/* iOS Safari ignoriert overflow-x auf body allein: ragt irgendwo ein Pixel ueber den
   Rand, laesst sich die ganze Seite mit dem Finger seitlich verschieben. Erst auf html
   UND body zusammen greift es. clip statt hidden, weil hidden auf html den body zum
   eigenen Scrollcontainer machen wuerde (overflow-y wuerde zu auto) — das bricht
   Scrollen und position: sticky. Aeltere Browser behalten das hidden von oben. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

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

.hauptnav { align-items: center; }
.hauptnav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Zahl neben einem Menüpunkt (INavZaehler), z. B. offene Einträge der Prüfliste. */
.nav-zaehler {
  display: inline-block; min-width: 19px; padding: 0 6px; margin-inline-start: 3px;
  border-radius: 10px; background: #FFFFFF; color: var(--marke);
  font-size: 11.5px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums;
}

/* Aufklappmenüs im Kopf (Einstellungen, Kontomenü): <details>, ohne Skript. */
.navgruppe { position: relative; }
.navgruppe > summary {
  list-style: none; cursor: pointer; padding: 6px 2px; font-size: 13.5px; font-weight: 600;
  color: #FFFFFF; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary::after { content: "▾"; font-size: 11px; }
.navgruppe > summary.aktiv { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.navgruppe > summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.navmenue {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-karte);
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.kontomenue .navmenue { left: auto; right: 0; }
.kopf-band .navmenue a,
.kopf-band .hauptnav .navmenue a,
.kopf-band .hauptnav .navmenue a:hover,
.navmenue-knopf {
  color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--radius-klein);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.kopf-band .navmenue a:hover, .navmenue-knopf:hover { background: var(--surface2); }
.kopf-band .navmenue a[aria-current="page"] { background: var(--accent-soft); }
.navmenue .abmeldeform { display: block; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.navmenue-knopf {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--body);
}
.kopf-band .navmenue :where(a, button):focus-visible { outline-color: var(--accent); }

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