/* Design-Tokens – gemeinsame Basis für Startseite, Steuerung, Court-Bedienung und Anzeige.
   Farben und Schrift der Event Crew Steinfurt wie auf der Website und in der Event-App:
   Nachtblau, Königsblau, Sonnengelb, Schrift Poppins (lokal, siehe fonts.css).
   Standard ist dunkel; hell per data-theme="light" (Umschalter, siehe theme.js). */
:root {
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: var(--font);

  /* Marke */
  --ecs-night: #000325;
  --ecs-royal: #162668;
  --ecs-blue: #5d72e5;
  --ecs-sun: #ffe156;

  --bg: #000325;
  --surface: #162668;
  --surface-2: #213173;
  --border: #2f3d7b;
  --text: #dfe9fb;
  --text-2: #a3abc2;
  --text-3: #737c9c;
  --heading: #ffe156;
  --primary: #5d72e5; /* Flächen, z. B. Schaltflächen (weiße Schrift) */
  --accent: #8494eb; /* Schrift und Linien in Akzentfarbe */
  --accent-soft: #232f7c;
  --field: #213173; /* Eingabefelder auf Karten */
  --cta: #ffe156; /* Hauptaktion in Sonnengelb */
  --cta-text: #000325;
  --success: #34d07a;
  --success-soft: color-mix(in srgb, #22c55e 20%, var(--surface));
  --live: #f05252;
  --live-soft: color-mix(in srgb, #ef4444 22%, var(--surface));
  --warn: #fbbf24;
  --warn-soft: color-mix(in srgb, #f59e0b 20%, var(--surface));

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #f1f3fb;
  --surface: #ffffff;
  --surface-2: #eef1fa;
  --border: #dbe0f0;
  --text: #0b1435;
  --text-2: #4d5779;
  --text-3: #858da8;
  --heading: #162668;
  --primary: #3f55d6;
  --accent: #3448c5;
  --accent-soft: #e6eafc;
  --field: #ffffff;
  --success: #15803d;
  --success-soft: #e3f5ea;
  --live: #dc2626;
  --live-soft: #fde8e8;
  --warn: #b45309;
  --warn-soft: #fdf1df;
  --shadow: 0 1px 2px rgba(11, 20, 53, 0.06), 0 6px 18px -10px rgba(11, 20, 53, 0.18);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--primary); color: #fff; }

/* Hinweis auf den Betreiber (Startseite, Steuerung, Court-Bedienung) */
.ecs-credit { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.ecs-credit img { width: 30px; height: 30px; flex-shrink: 0; }
.ecs-credit a { color: inherit; font-weight: 600; text-decoration: none; }
.ecs-credit a:hover { color: var(--text); text-decoration: underline; }
.ecs-credit strong { display: block; color: var(--text-2); font-weight: 600; }
.ecs-legal { display: flex; flex-wrap: wrap; gap: 2px 12px; }