/* BattleComms Mockups – Design-Tokens (Variante E, einheitlicher Bedienrahmen, Stand 08.11.2026).
   Regel: [hidden] als erste Regel (Skill nkdm-electron-desktop, L50).
   Seiten-CSS darf KEINE Tokens überschreiben (Prüfskript). Ein Thema für alle Seiten, Hell/Dunkel nur global.
   Farbregeln (Ergonomie-Kritik 1+2, Inhaber-Entscheidung 08.11.):
   - Akzent = Kartell-Orange: Logo, aktive Navigation, Primärknopf, Fokus, gewählter Zustand.
   - Farbflächen NUR für Senden (Rot, nur im Sendeziel-Feld), Durchsage (Gelb), Notruf (Magenta).
   - Ampeln nur als Symbol (● ▲ ■ ◆) + Wort, nie als Fläche. Battle Comms = neutrales Band mit Warnstreifen.
   - Netzfarben nur kühle Töne, immer mit Frequenz/Kennung. */
[hidden] { display: none !important; }

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --surface-1: #13161b;
  --surface-2: #1a1e25;
  --surface-3: #232833;
  --border: #2c323d;            /* nur Trennlinien, nie Bedienelement-Rahmen */
  --border-strong: #3d4552;
  --control-border: #6a7381;    /* Rahmen von Knöpfen/Feldern ≥ 3:1 zu surface-1/2 */
  --text: #eceef1;
  --text-muted: #a9b2be;
  --text-faint: #8a94a1;
  --accent: #f28c28;            /* Kartell-Orange */
  --accent-text: #111317;
  --accent-soft: rgba(242, 140, 40, 0.16);
  --mode-orga: #56b4e9;
  --mode-op: #f28c28;
  --stripe-a: #e8eaee;          /* Battle-Comms-Warnstreifen */
  --stripe-b: #1a1e25;
  --mock: #3a2d5c;              /* Mockup-Streifen (nicht Teil der App) */
  --mock-text: #e9e3ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --amp-outline: transparent;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3;
  --surface-1: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #e9ecf0;
  --border: #d3d8df;
  --border-strong: #b5bdc8;
  --control-border: #7d8694;
  --text: #14171c;
  --text-muted: #4a5361;
  --text-faint: #5b6472;
  --accent: #b5530a;
  --accent-text: #ffffff;
  --accent-soft: rgba(181, 83, 10, 0.12);
  --mode-orga: #0b6aa2;
  --mode-op: #b5530a;
  --stripe-a: #1a1e25;
  --stripe-b: #f6f7f9;
  --mock: #e7e0fb;
  --mock-text: #2b1f4f;
  --shadow: 0 6px 20px rgba(20, 23, 28, 0.12);
  --amp-outline: #14171c;       /* helle Signalsymbole mit dunkler Umrandung */
}

:root {
  /* Signalfarben – GESPERRT, in allen Themes gleich; Text darauf ≥ 4,5:1 */
  --sig-tx: #dc2626;            /* Senden – nur im Sendeziel-Feld beim Senden */
  --sig-tx-text: #ffffff;
  --sig-rx: #22c55e;            /* spricht (LED) */
  --sig-broadcast: #f5c518;     /* Durchsage */
  --sig-broadcast-text: #121212;
  --sig-emergency: #c026d3;     /* Notruf */
  --sig-emergency-text: #ffffff;
  /* Ampeln: nur Symbol + Wort */
  --amp-green: #22c55e;         /* ● */
  --amp-yellow: #eab308;        /* ▲ */
  --amp-red: #f43f5e;           /* ■ – eigener Ton, nicht Senden-Rot */
  --amp-black: #000000;         /* ◆ */
  --amp-black-ring: #f2f2f2;
  /* Netzfarben – nur kühle Töne, immer mit Frequenz + Kennung */
  --net-1: #56b4e9;  /* Himmelblau */
  --net-2: #4f7cff;  /* Blau */
  --net-3: #2bb3a3;  /* Blaugrün */
  --net-4: #8f8cf7;  /* Lavendel */
  --net-5: #6f9fc9;  /* Stahlblau */
  --net-6: #3fa7c4;  /* Petrol */
  --net-7: #7cc4b8;  /* Mint (Rettung) */
  --net-8: #9aa3ad;  /* Grau (Durchsage/Boarding) */

  /* Typografie: Skala 13/15/18/22/28 – nichts unter 13 px */
  --font: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  --fs-xs: 13px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-xxl: 28px;
  /* Abstände 4/8/12/18, Radien 6/10 */
  --gap-xs: 4px;
  --gap-s: 8px;
  --gap: 12px;
  --gap-l: 18px;
  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 10px;
  /* Klickflächen */
  --tap: 36px;                  /* Mindestmaß */
  --tap-critical: 44px;         /* Senden, Notruf, Durchsage, Antworten, Status */
  /* Bedienrahmen */
  --mockbar-h: 36px;
  --head-h: 40px;
  --txbar-h: 56px;
  --nav-w: 72px;
  --side-w: 360px;
  --header-h: 40px;             /* Altname, = --head-h */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =================== Themes (Inhaber-Vorlagen 08.11.) ===================
   Ein Theme ändert NUR Flächen, Kanten, Schatten, Rundungen, Akzent und Hintergrund.
   Gleich bleiben: Regionen, Knopfarten, Größen, Signalfarben (--sig-*, --amp-*).
   Strukturelle Tokens mit Standardwerten (Kartell): */
:root {
  --app-bg: var(--bg);
  --card-bg: var(--surface-1);
  --card-border: var(--border);
  --card-shadow: none;
  --btn-bg: var(--surface-2);
  --btn-shadow: none;
  --btn-pressed-shadow: none;
  --primary-bg: var(--accent);
  --primary-glow: none;
  --focus-glow: none;
  --glass: none;                   /* backdrop-filter für Glas-Themes */
  --broadcast-mark: none;          /* Zusatzmarkierung, wenn der Akzent nahe am Durchsage-Gelb liegt */
}

/* Fundament – Grau/Orange, weiche Erhebung (Vorlage „Foundations“) */
:root[data-theme="fundament"] {
  color-scheme: dark;
  --bg: #2a2e34; --surface-1: #343940; --surface-2: #2e3238; --surface-3: #3d434b;
  --border: rgba(255, 255, 255, 0.07); --border-strong: #4a515a; --control-border: #808994;
  --text: #eef0f3; --text-muted: #b7bec7; --text-faint: #9aa2ac;
  --accent: #f07a3a; --accent-text: #1b1b1b; --accent-soft: rgba(240, 122, 58, 0.18);
  --mode-orga: #5aa9e6; --mode-op: #f07a3a;
  --stripe-a: #e8eaee; --stripe-b: #2e3238; --mock: #3a2d5c; --mock-text: #e9e3ff; --amp-outline: transparent;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --radius-s: 8px; --radius: 14px; --radius-l: 14px;
  --app-bg: linear-gradient(160deg, #31363d 0%, #262a2f 100%);
  --card-bg: linear-gradient(145deg, #383d45, #30353b);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: 8px 8px 18px rgba(0, 0, 0, 0.45), -5px -5px 14px rgba(255, 255, 255, 0.035);
  --btn-bg: linear-gradient(145deg, #3a4048, #31363c);
  --btn-shadow: 3px 3px 8px rgba(0, 0, 0, 0.45), -2px -2px 6px rgba(255, 255, 255, 0.05);
  --btn-pressed-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
  --primary-bg: linear-gradient(145deg, #f58a4c, #e36a2a);
  --primary-glow: 0 0 14px rgba(240, 122, 58, 0.45);
  --focus-glow: 0 0 0 3px rgba(240, 122, 58, 0.35);
}

/* Graphit – dunkle, weich erhabene Kacheln, große Rundungen (Vorlage Dashboard 1) */
:root[data-theme="graphit"] {
  color-scheme: dark;
  --bg: #1d1f22; --surface-1: #272a2e; --surface-2: #222528; --surface-3: #30343a;
  --border: rgba(255, 255, 255, 0.05); --border-strong: #3c4148; --control-border: #747c87;
  --text: #f1f2f4; --text-muted: #b2b8c0; --text-faint: #959ca6;
  --accent: #ff7a45; --accent-text: #161616; --accent-soft: rgba(255, 122, 69, 0.18);
  --mode-orga: #4fb3d9; --mode-op: #ff7a45;
  --stripe-a: #e8eaee; --stripe-b: #222528; --mock: #3a2d5c; --mock-text: #e9e3ff; --amp-outline: transparent;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  --radius-s: 10px; --radius: 18px; --radius-l: 18px;
  --app-bg: radial-gradient(1200px 700px at 30% 0%, #2a2d32 0%, #1b1d20 70%);
  --card-bg: linear-gradient(160deg, #2c2f34, #24272b);
  --card-border: rgba(255, 255, 255, 0.04);
  --card-shadow: 10px 12px 24px rgba(0, 0, 0, 0.55), -6px -6px 16px rgba(255, 255, 255, 0.03);
  --btn-bg: linear-gradient(160deg, #2f3338, #26292e);
  --btn-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.04);
  --btn-pressed-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.55);
  --primary-bg: linear-gradient(135deg, #ff5f45, #ffa94d);
  --primary-glow: 0 0 16px rgba(255, 122, 69, 0.4);
  --focus-glow: 0 0 0 3px rgba(255, 122, 69, 0.35);
}

/* Gold – Schwarz mit Goldlinien und Leuchten (Vorlage 2) */
:root[data-theme="gold"] {
  color-scheme: dark;
  --bg: #090908; --surface-1: #12110f; --surface-2: #181714; --surface-3: #22201b;
  --border: rgba(226, 180, 60, 0.18); --border-strong: rgba(226, 180, 60, 0.35); --control-border: #8a7a52;
  --text: #f4ecd6; --text-muted: #c2b697; --text-faint: #a39778;
  --accent: #e2b43c; --accent-text: #120f05; --accent-soft: rgba(226, 180, 60, 0.15);
  --mode-orga: #7fb7d6; --mode-op: #e2b43c;
  --stripe-a: #e2b43c; --stripe-b: #12110f; --mock: #2c2412; --mock-text: #f4e3b0; --amp-outline: transparent;
  --shadow: 0 0 30px rgba(226, 180, 60, 0.12), 0 12px 30px rgba(0, 0, 0, 0.7);
  --radius-s: 6px; --radius: 10px; --radius-l: 10px;
  --app-bg: radial-gradient(900px 600px at 50% 30%, #1a1710 0%, #070706 75%);
  --card-bg: linear-gradient(180deg, #15140f, #0f0e0c);
  --card-border: rgba(226, 180, 60, 0.28);
  --card-shadow: 0 0 0 1px rgba(226, 180, 60, 0.06), 0 10px 24px rgba(0, 0, 0, 0.6);
  --btn-bg: linear-gradient(180deg, #1c1a15, #141310);
  --btn-shadow: 0 0 10px rgba(226, 180, 60, 0.08);
  --btn-pressed-shadow: inset 0 0 10px rgba(226, 180, 60, 0.25);
  --primary-bg: linear-gradient(180deg, #f0c85a, #c9971f);
  --primary-glow: 0 0 18px rgba(226, 180, 60, 0.55);
  --focus-glow: 0 0 0 3px rgba(226, 180, 60, 0.4), 0 0 14px rgba(226, 180, 60, 0.4);
  --broadcast-mark: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0 6px, transparent 6px 12px);
}

/* Nebel – hell, Glas, Lavendel (Vorlage 3) */
:root[data-theme="nebel"] {
  color-scheme: light;
  --bg: #d7d8dc; --surface-1: rgba(255, 255, 255, 0.62); --surface-2: rgba(255, 255, 255, 0.45); --surface-3: rgba(255, 255, 255, 0.78);
  --border: rgba(255, 255, 255, 0.75); --border-strong: rgba(120, 124, 135, 0.45); --control-border: #7f8592;
  --text: #24272e; --text-muted: #4a505b; --text-faint: #5a606b;
  --accent: #6d4fd0; --accent-text: #ffffff; --accent-soft: rgba(109, 79, 208, 0.14);
  --mode-orga: #1f8a7e; --mode-op: #6d4fd0;
  --stripe-a: #24272e; --stripe-b: #eef0f3; --mock: #e7e0fb; --mock-text: #2b1f4f; --amp-outline: #24272e;
  --shadow: 0 12px 30px rgba(60, 64, 80, 0.18);
  --radius-s: 12px; --radius: 18px; --radius-l: 18px;
  --app-bg: radial-gradient(1100px 700px at 50% 10%, #eceef1 0%, #cfd1d6 70%);
  --card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
  --card-border: rgba(255, 255, 255, 0.85);
  --card-shadow: 0 8px 24px rgba(70, 74, 90, 0.16);
  --btn-bg: rgba(255, 255, 255, 0.6);
  --btn-shadow: 0 2px 8px rgba(70, 74, 90, 0.12);
  --btn-pressed-shadow: inset 0 2px 6px rgba(70, 74, 90, 0.2);
  --primary-bg: linear-gradient(135deg, #7d5ee0, #5b3fc0);
  --primary-glow: 0 4px 14px rgba(109, 79, 208, 0.35);
  --focus-glow: 0 0 0 3px rgba(109, 79, 208, 0.3);
  --glass: blur(14px) saturate(1.2);
}

/* Carbon – Schwarz/Gelb, kantig, hoher Kontrast (Vorlage 4) */
:root[data-theme="carbon"] {
  color-scheme: dark;
  --bg: #0a0b0d; --surface-1: #121418; --surface-2: #171a1f; --surface-3: #20242b;
  --border: #23272e; --border-strong: #353a43; --control-border: #6c7480;
  --text: #f4f4f4; --text-muted: #b4b9c1; --text-faint: #979da7;
  --accent: #ffc400; --accent-text: #0a0a0a; --accent-soft: rgba(255, 196, 0, 0.14);
  --mode-orga: #4fb3d9; --mode-op: #ffc400;
  --stripe-a: #ffc400; --stripe-b: #121418; --mock: #2a2a10; --mock-text: #fff3b0; --amp-outline: transparent;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
  --radius-s: 3px; --radius: 4px; --radius-l: 4px;
  --app-bg: #0a0b0d;
  --card-bg: #121418;
  --card-border: #262a31;
  --card-shadow: none;
  --btn-bg: #181b20;
  --primary-bg: #ffc400;
  --primary-glow: 0 0 12px rgba(255, 196, 0, 0.35);
  --focus-glow: 0 0 0 2px #ffc400;
  --broadcast-mark: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0 6px, transparent 6px 12px);
}

body { background: var(--app-bg); }