/* ==========================================================
   Gemeinsame Gestaltungsdatei - eine Quelle fuer drei Oberflaechen
   (App, Informationsseite, sechs Rechtsseiten).

   Anlass: Design-Review vom 15.10.2026, Paket 2a. Jede Oberflaeche trug
   ihren eigenen :root-Block; die Werte liefen auseinander (rechnung.html
   ohne --card, die Informationsseite mit Rollen, die der App fehlten und
   umgekehrt). Gleiche Funktion soll ueberall gleich aussehen, und das geht
   nur, wenn die Werte an EINER Stelle stehen.

   Zwei Ebenen, und die Regel gilt fuer beide verschieden:

   EBENE 1 - die zwoelf Grundwerte (--navy bis --score-under) plus die
   festen Statuswerte. Die Namen der zwoelf sind Schluessel in
   tournaments.color_overrides (FARB_TOKENS in der App): NICHT umbenennen,
   sonst verliert jedes Turnier mit eigenen Farben sie still. Seit Paket 3
   (APP-20) hat --lime-bright in der App keinen Farbwaehler mehr - die App
   benutzt es nirgends -, steht aber hier weiter, weil die Informationsseite
   es braucht.

   EBENE 2 - die Rollen --farbe-*. Hier stehen die Werte des Schemas
   'standard'. In der App setzt wendeFarbenAn() sie je Turnier inline auf
   <html> und schlaegt damit diese Datei (Inline-Stil gewinnt gegen jede
   Regel); die Datei ist dort nur der Rueckfall vor dem ersten JavaScript.
   Informationsseite und Rechtsseiten haben kein wendeFarbenAn(), bei ihnen
   gilt immer der Wert von hier.

   MASS-TOKENS (--schrift-*, --abstand-*, --radius-*, --schatten-*,
   --ziel-*, --dauer-*, --knopf-*): seit Paket 2c benutzt die
   Informationsseite Schrift, Abstand, Radius und Knopf aus diesen Tokens,
   und die Rechtsseiten Schrift, Abstand, Radius und Zeilenhoehe. Die App
   zieht in 2b nach. Anlass war, dass dieselbe Funktion (ein Knopf, eine
   Fussnote) auf den Seiten in 11, 12, 13 oder 14 px und in 6, 8, 10 oder
   12 px Rundung stand, ohne dass es jemand so entschieden hatte. Regel:
   wer einen Wert braucht, nimmt den naechsten Token und legt keinen fuer
   einen Einzelfall an. Folge, wenn er stattdessen einen losen Wert
   schreibt: die Skala franst wieder aus, und die naechste Seite kopiert
   den losen Wert.

   FOLGE, wenn jemand einen Wert aus dieser Datei zurueck in eine Seite
   kopiert: die Seiten laufen wieder auseinander, und niemand sieht es,
   bis ein Zuschauer zwei Seiten desselben Produkts nebeneinander hat.
   Eine Seite, die etwas braucht, das hier fehlt, traegt es hier nach.

   Kein @layer: es verschoebe die Reihenfolge gegenueber den <style>-
   Bloecken der Seiten, die diese Datei VOR sich einbinden und dadurch bei
   gleicher Spezifitaet die Letzten sind. Die CSP (style-src 'self'
   'unsafe-inline') erlaubt die Datei vom eigenen Ursprung.
   ========================================================== */
:root {
  /* Es gibt keinen Dunkelmodus (Paket 3, INFO-14). Ohne diese Erklaerung duerfen
     Browser mit erzwungenem Dunkelmodus (Samsung Internet, Chrome-Option Auto
     Dark Mode) die Seiten selbst umfaerben - auch die Screenshots. Ein echter
     Dunkelmodus kaeme spaeter ueber light-dark(), fuer App und Seiten zugleich. */
  color-scheme: light;

  /* ---- Ebene 1: Grundwerte ---- */
  --navy: #00376B;        /* awb-color5 - Ueberschriften, Kopfzeilen */
  --lime: #90AE25;        /* awb-color4 - Primaerfarbe, Akzente */
  --lime-dark: #618111;   /* awb-color6 - Hover, Rahmen auf Lime */
  --lime-bright: #99C010; /* Signalvariante der Website (Banner/Buttons) */
  --lime-light: #E4EDC8;  /* Tint aus --lime, fuer Hervorhebungen */
  --bg: #F6F6F6;          /* awb-color2 */
  --card: #FFFFFF;        /* awb-color1 */
  --text: #333333;        /* awb-color8 */
  --muted: #5D5D5D;       /* awb-color7 */
  --border: #EBEAEA;      /* awb-color3 */
  --danger: #C94560;      /* Website-Rot #DB4B68, um 8 % abgedunkelt: 4,66:1 mit Weiss */
  --score-under: #C8102E; /* Golf-Konvention, bewusst nicht --danger */

  /* ---- Ebene 1: feste Werte, unabhaengig vom Farbschema ---- */
  /* Statusfarben Pace of Play (Issue 203); wendeFarbenAn() fasst sie nicht an. */
  --pace-ok-bg: #DFF3E1;
  --pace-ok-text: #1B5E20;
  --pace-warn-bg: #FCF0BE;
  --pace-warn-text: #6B4E00;
  --pace-alert-bg: #FBE1E6;
  --pace-alert-text: #8A1F35;
  /* Text fuer "erledigt"/"live" auf Kacheln (Issue 228): 5,7:1 auf der
     lime-getoenten Kachel, wo --lime-dark nur 3,7:1 haette. */
  --ok-text-dunkel: #4A6209;
  --radius: 8px;

  /* ---- Ebene 2: Rollen, Stand 'standard' ---- */
  /* Grenze eines Bedienelements, 3:1 gegen den Grund (WCAG 1.4.11). --border
     ist Trennlinie (1,20:1) und taugt dafuer nicht. */
  --farbe-rand-feld: #8A8A8A;
  /* Schrift auf einer --lime-Flaeche; nie Weiss (2,16-3,12:1). */
  --farbe-auf-akzent: var(--navy);
  /* Schrift, Symbol und Linien auf einer --navy-Flaeche. */
  --farbe-auf-kopf: #FFFFFF;
  --farbe-warnung-auf-kopf: #F7C948;
  --farbe-aktiv-kontur: transparent;
  --farbe-punkt-kontur: transparent;
  --farbe-rand-auf-kopf: rgba(255,255,255,.5);
  --farbe-rand-auf-kopf-stark: rgba(255,255,255,.55);
  /* Schrift auf Karte und Seite (Entscheidung Lars 16.10.2026, APP08-05). */
  --farbe-text: var(--text);
  --farbe-text-leise: var(--muted);
  /* Schrift fuer Zahlen, die der Spieler im Gehen liest (Paket 3, APP-04):
     zwischen Nebentext und Text, 7,1:1 auf --bg. Die App leitet sie je
     Turnier ab (spielerTextFuer()); der Wert hier ist 25 % --text ueber
     --muted und nur der Rueckfall vor dem ersten JavaScript. */
  --farbe-text-spieler: #535353;
  --farbe-titel: var(--navy);
  --farbe-unter-par: var(--score-under);
  --farbe-text-auf-hervor: var(--text);
  --farbe-titel-auf-hervor: var(--navy);
  --farbe-text-auf-seite: var(--text);
  --farbe-text-leise-auf-seite: var(--muted);
  --farbe-titel-auf-seite: var(--navy);
  --farbe-text-auf-status: var(--text);
  --farbe-text-leise-auf-status: var(--muted);
  --farbe-titel-auf-status: var(--navy);
  --farbe-unter-par-auf-status: var(--score-under);
  --farbe-text-leise-auf-linie: var(--muted);
  --farbe-text-leise-auf-hervor: var(--muted);
  --farbe-unter-par-auf-hervor: var(--score-under);
  --farbe-fehler-text: var(--danger);
  /* Bisher nur auf der Informationsseite (Paket 1, INFO-01/02/06): Akzent
     als TEXT auf hellem Grund (7,33:1 auf --bg; --lime-dark hat dort 4,17:1)
     und der Fokusring (Navy; jede Navy-Flaeche setzt ihn auf Weiss). */
  --farbe-akzent-text: #465E0C;
  --farbe-fokus: var(--navy);

  /* ---- Mass-Tokens ---- */
  --schrift-familie: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --schrift-xs: 12px;
  --schrift-dicht: 13px;
  --schrift-s: 14px;
  --schrift-m: 16px;
  --schrift-l: 18px;
  --schrift-xl: 22px;
  --schrift-2xl: 28px;
  --schrift-titel: clamp(28px, 1.2rem + 2.4vw, 44px);
  --schrift-tafel: clamp(28px, 1rem + 2.2vw, 56px);
  --zeilenhoehe-dicht: 1.2;
  --zeilenhoehe-text: 1.5;
  --zeilenhoehe-lang: 1.6;
  --gewicht-normal: 400;
  --gewicht-mittel: 600;
  --gewicht-fett: 700;
  --gewicht-extra: 800;

  --abstand-1: 2px;
  --abstand-2: 4px;
  --abstand-3: 8px;
  --abstand-4: 12px;
  --abstand-5: 16px;
  --abstand-6: 24px;
  --abstand-7: 32px;
  --abstand-8: 48px;
  --abstand-9: 64px;
  --abstand-eng: 6px;

  --radius-klein: 4px;
  --radius-gross: 12px;
  --radius-pille: 999px;

  --schatten-karte: 0 2px 6px rgba(0,0,0,.18);
  --schatten-schwebend: 0 6px 20px rgba(0,0,0,.25);
  --schatten-dialog: 0 16px 44px rgba(0,0,0,.28);

  /* Trefferflaechen: Spieler mit Handschuh am Telefon, Touch allgemein,
     Desktop (Setup, Druckbogen). */
  --ziel-spieler: 48px;
  --ziel-touch: 44px;
  --ziel-desktop: 32px;

  --dauer-kurz: .15s;
  --dauer-mittel: .3s;

  /* ---- Knopf (Design-Review Paket 2c, INFO-11) ----
     Anlass: Informationsseite und App hatten je ein eigenes Knopf-System
     mit fast gleichen Werten (11/22 gegen 10/20 Polster, Gewicht 700
     gegen 600, Rand 1,5 gegen 1 px) - zu aehnlich, um aufzufallen, zu
     verschieden, um als ein Produkt zu wirken. Regel: ein Knopf besteht
     aus diesen fuenf Werten, Varianten aendern nur Farbe und Groesse
     (.btn-lg). Folge, wenn eine Seite sie wieder uebersteuert: derselbe
     Knopf misst auf zwei Seiten verschieden. */
  /* Hoehe kommt aus min-height (Trefferflaeche 44 px, Paket 1); das Polster
     bestimmt nur Breite und Umbruch. 20 statt 22 px laesst am Handy Luft in
     der Kopfzeile. */
  --knopf-hoehe: var(--ziel-touch);
  --knopf-padding: 10px 20px;
  --knopf-schrift: var(--schrift-s);
  /* 700 wie auf der Informationsseite: 14 px Navy auf Lime liest sich fett
     deutlich besser. Die App steht noch auf 600 und zieht im Folge-PR nach. */
  --knopf-gewicht: var(--gewicht-fett);
  /* Auf 1x-Schirmen rendert Chrome 1,5 px als 1 px - dort aendert sich in
     der App also nichts, auf 2x-Schirmen wird der Rand sichtbarer. */
  --knopf-rand: 1.5px;
  /* Hover des Primaerknopfs als Mischung statt festem Hex: --navy ist in
     der App je Turnier ueberschreibbar, ein fester Wert wuerde dort bei
     eigener Farbe hell bleiben. 25 % Schwarz trifft das bisherige #002a52
     fast genau. */
  --knopf-primaer-hover: color-mix(in srgb, var(--navy), #000 25%);

  /* ---- Rollenflaeche fuer Tabellenkoepfe und leise Hervorhebung ---- */
  /* Bisher auf den Rechtsseiten als loses #EEF2F7. Eine Mischung aus --navy
     folgt dem Farbschema und bleibt als Grund fuer Navy-Schrift lesbar
     (Navy auf dieser Flaeche: 10,9:1). */
  --farbe-flaeche-leise: color-mix(in srgb, var(--navy) 6%, #fff);

  /* Linie zwischen zwei gleich grauen Abschnitten (Paket 3, INFO-07). --border
     (1,20:1) ist auf --bg unsichtbar; die Mischung aus --navy folgt dem
     Farbschema. Trennlinie, kein Bedienelement - 3:1 gilt hier nicht. */
  --farbe-trennlinie-flaeche: color-mix(in srgb, var(--navy) 18%, #fff);
}