/* NODE live – gemeinsames Design der Backends (Web-Oberflächen) aller Broadcast-Tools.
 * Gilt NUR für Bedienseiten. Sendegrafiken (vMix-Overlays, Ausgaben) bleiben im Design des jeweiligen Events.
 * CI: Tief #1E2420, Moos #74A982, Papier #ECE9DF; Schriften Saira (Überschriften, Zahlen) und Inter (Text).
 * Jede App setzt nur --akzent (siehe Tabelle in baukasten/README.md), z. B. <html data-app="regieradar">.
 * Einbinden:  <link rel="stylesheet" href="/node-live/node-live.css">  (vor dem App-eigenen CSS)
 */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/saira-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/saira-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/saira-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/saira-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 800 900; src: url(fonts/saira-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-display: swap; font-weight: 800 900; src: url(fonts/saira-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 400; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 400; src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500 600; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500 600; src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800 900; src: url(fonts/inter-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800 900; src: url(fonts/inter-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Farben ---------- */
:root {
  color-scheme: dark;
  /* CI */
  --nl-tief: #1E2420;
  --nl-moos: #74A982;
  --nl-papier: #ECE9DF;
  /* abgeleitet: Flächen leicht ins Grün, nie reines Grau */
  --nl-kopf: #171C19;      /* Kopfzeile */
  --nl-senke: #1A201C;     /* Eingabefelder, vertiefte Flächen */
  --nl-flaeche: #262D28;   /* Karten, Panels */
  --nl-flaeche2: #2F3832;  /* Zeilen, zweite Ebene */
  --nl-knopf: #3A453D;     /* normaler Knopf */
  --nl-hover: #44514A;
  --nl-linie: #3B463E;
  --nl-linie2: #323B35;
  --nl-leise: #A3AFA6;     /* Nebentext */
  --nl-text2: #D6D9CF;
  --nl-moos-dunkel: #4E7D5B; /* Hauptknopf (helle Schrift darauf gut lesbar) */
  --nl-moos-tief: #2E4A38;   /* aktive Zeile, „gewählt“ */
  /* Zustände – in allen Apps gleich */
  --nl-ok: #4CC27A;   --nl-ok-bg: #173222;
  --nl-warn: #F2C14E; --nl-warn-bg: #3A3015;
  --nl-alarm: #FF3B3B; --nl-alarm-bg: #4A1212;
  --nl-unbekannt: #6E7A71;
  /* Akzent je App (zur Unterscheidung, nie als Zustand) */
  --nl-a-regieradar: #7FB2E0;
  --nl-a-racegraphics: #E2834A;
  --nl-a-dartbridge: #B49AE0;
  --nl-a-feedverteiler: #E58FB0;
  --akzent: var(--nl-moos);
  /* Schrift */
  --nl-display: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --nl-text: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
html[data-app="regieradar"]    { --akzent: var(--nl-a-regieradar); }
html[data-app="racegraphics"]  { --akzent: var(--nl-a-racegraphics); }
html[data-app="dartbridge"]    { --akzent: var(--nl-a-dartbridge); }
html[data-app="feedverteiler"] { --akzent: var(--nl-a-feedverteiler); }

/* ---------- Bausteine ---------- */
/* Logo in der Kopfzeile: <img class="nl-logo" src="/node-live/node-live-logo.png" alt="NODE live"> */
.nl-logo { height: 28px; width: auto; flex: none; display: block; }
/* Kopfzeile bekommt unten eine Linie in der App-Farbe */
.nl-kopfzeile { border-bottom: 2px solid var(--akzent) !important; }
/* App-Name: erster Teil Papier, zweiter in Akzentfarbe: <span class="nl-marke">Regie<em>Radar</em></span> */
.nl-marke { font-family: var(--nl-display); font-weight: 800; letter-spacing: .3px; font-style: normal; }
.nl-marke em { font-style: normal; color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }