/* ════════════════════════════════════════════════════════════════
   DWS-Chat — zentrale Farbstufen + Firmenfarben (v1.126.0)
   EINE Datei für alle Seiten (index, wfboard, auftrag, rechte,
   druckdaten, wiki, backup). Wird per <link> NACH dem Seiten-<style>
   eingebunden und überschreibt dessen Variablen.
   Stufen:  body.stufe-hell | -sand | -daemmerung | -abend | -nacht
   Akzente: body.akzent-blau | -dwsgruen | -dwsblau | -rot
   Hell+Sand tragen zusätzlich theme-light, der Rest theme-dark
   (für die bestehenden Sonderregeln in index.html).
   ════════════════════════════════════════════════════════════════ */

/* ── Stufe 1: HELL (das bisherige Hell) ── */
body.stufe-hell {
  --bg-primary: #f5f6f8; --bg-secondary: #ffffff; --bg-tertiary: #f0f2f5;
  --bg-hover: #e8ebef; --bg-active: #dde2e8;
  --text-primary: #1a1d27; --text-secondary: #5a6175; --text-muted: #8b91a3;
  --accent: #2563eb; --accent-hover: #1d4ed8;
  --accent-glow: rgba(37,99,235,0.12); --accent-bg: rgba(37,99,235,0.12);
  --green: #16a34a; --orange: #ea580c; --red: #dc2626;
  --border: #c2c8d4; --border-strong: rgba(0,0,0,0.22);
  --shadow: 0 4px 24px rgba(0,0,0,0.08); --brand-bg: #ffffff;
}

/* ── Stufe 2: SAND (NEU — gedämpftes, warmes Hell) ── */
body.stufe-sand {
  --bg-primary: #eae7e0; --bg-secondary: #f4f2ec; --bg-tertiary: #e0dcd2;
  --bg-hover: #d7d2c6; --bg-active: #ccc6b8;
  --text-primary: #2c2e33; --text-secondary: #5d6066; --text-muted: #8a8d94;
  --accent: #4a72c4; --accent-hover: #3c63b2;
  --accent-glow: rgba(74,114,196,0.14); --accent-bg: rgba(74,114,196,0.14);
  --green: #1f9d63; --orange: #d97706; --red: #c92a2a;
  --border: #cfc9bd; --border-strong: rgba(0,0,0,0.24);
  --shadow: 0 4px 24px rgba(60,50,30,0.10); --brand-bg: #faf8f3;
}

/* ── Stufe 3: DÄMMERUNG (NEU — die echte Mitte) ── */
body.stufe-daemmerung {
  --bg-primary: #3d4554; --bg-secondary: #485162; --bg-tertiary: #545e72;
  --bg-hover: #5f6a80; --bg-active: #6a7590;
  --text-primary: #eef0f4; --text-secondary: #c3cad6; --text-muted: #97a0b3;
  --accent: #7fa0ff; --accent-hover: #93b0ff;
  --accent-glow: rgba(127,160,255,0.22); --accent-bg: rgba(127,160,255,0.22);
  --green: #3fd6a0; --orange: #ffa14e; --red: #ff6b6b;
  --border: #5b667c; --border-strong: rgba(255,255,255,0.24);
  --shadow: 0 4px 24px rgba(0,0,0,0.22); --brand-bg: rgba(255,255,255,0.95);
}

/* ── Stufe 4: ABEND (NEU — sanftes Dunkel) ── */
body.stufe-abend {
  --bg-primary: #232a38; --bg-secondary: #2c3447; --bg-tertiary: #38415a;
  --bg-hover: #424c69; --bg-active: #4d5878;
  --text-primary: #eef0f4; --text-secondary: #b6bdc9; --text-muted: #7d8595;
  --accent: #6b96ff; --accent-hover: #84a8ff;
  --accent-glow: rgba(107,150,255,0.20); --accent-bg: rgba(107,150,255,0.20);
  --green: #34d399; --orange: #fb923c; --red: #f87171;
  --border: #404a63; --border-strong: rgba(255,255,255,0.20);
  --shadow: 0 4px 24px rgba(0,0,0,0.26); --brand-bg: rgba(255,255,255,0.95);
}

/* ── Stufe 5: NACHT (das bisherige Dunkel, Variante B) ── */
body.stufe-nacht {
  --bg-primary: #161a23; --bg-secondary: #1f2535; --bg-tertiary: #2a3045;
  --bg-hover: #353c50; --bg-active: #404663;
  --text-primary: #eef0f4; --text-secondary: #aab3c2; --text-muted: #6b7280;
  --accent: #5b8cff; --accent-hover: #7aa3ff;
  --accent-glow: rgba(91,140,255,0.18); --accent-bg: rgba(91,140,255,0.18);
  --green: #34d399; --orange: #fb923c; --red: #f87171;
  --border: #363c50; --border-strong: rgba(255,255,255,0.18);
  --shadow: 0 4px 24px rgba(0,0,0,0.3); --brand-bg: rgba(255,255,255,0.95);
}

/* ════════════════════════════════════════════════════════════════
   Firmenfarben (Akzent) — überschreiben nur die accent-Variablen.
   akzent-blau = Standard: nichts zu tun, die Stufen bringen ihr Blau mit.
   Für die hellen Stufen (hell, sand) je eine dunklere Variante (Kontrast).
   ════════════════════════════════════════════════════════════════ */

/* DWS Grün #76b82a */
body.akzent-dwsgruen {
  --accent: #76b82a; --accent-hover: #88cc3a;
  --accent-glow: rgba(118,184,42,0.20); --accent-bg: rgba(118,184,42,0.20);
}
body.stufe-hell.akzent-dwsgruen, body.stufe-sand.akzent-dwsgruen {
  --accent: #5c941c; --accent-hover: #4d7e15;
  --accent-glow: rgba(92,148,28,0.14); --accent-bg: rgba(92,148,28,0.14);
}

/* DWS Hellblau #169fdb */
body.akzent-dwsblau {
  --accent: #169fdb; --accent-hover: #2eb6f2;
  --accent-glow: rgba(22,159,219,0.20); --accent-bg: rgba(22,159,219,0.20);
}
body.stufe-hell.akzent-dwsblau, body.stufe-sand.akzent-dwsblau {
  --accent: #0f7fb1; --accent-hover: #0c6c97;
  --accent-glow: rgba(15,127,177,0.14); --accent-bg: rgba(15,127,177,0.14);
}

/* RMBA / Heinikel Rot #e4003a */
body.akzent-rot {
  --accent: #f23556; --accent-hover: #ff5470;
  --accent-glow: rgba(242,53,86,0.20); --accent-bg: rgba(242,53,86,0.20);
}
body.stufe-hell.akzent-rot, body.stufe-sand.akzent-rot {
  --accent: #cf0336; --accent-hover: #b00330;
  --accent-glow: rgba(207,3,54,0.13); --accent-bg: rgba(207,3,54,0.13);
}

/* ════════════════════════════════════════════════════════════════
   SAISON-THEMES (v1.127.0) — nur mit Recht „Saison-Designs" wählbar.
   Vollwertige Stufen mit eigenem Akzent; Effekte als pointer-events-
   freie Ebene über body::after (stört keine Bedienung).
   ════════════════════════════════════════════════════════════════ */

/* ── WEIHNACHTEN: Tannengrün + Gold, dezenter Schneefall ── */
body.stufe-weihnachten {
  --bg-primary: #16211b; --bg-secondary: #1f2e26; --bg-tertiary: #2a3c32;
  --bg-hover: #34493d; --bg-active: #3e5648;
  --text-primary: #f0ece2; --text-secondary: #c2cabb; --text-muted: #8fa094;
  --accent: #d4a843; --accent-hover: #e4bc5c;
  --accent-glow: rgba(212,168,67,0.22); --accent-bg: rgba(212,168,67,0.22);
  --green: #5cba6e; --orange: #e8853d; --red: #e05252;
  --border: #2e4036; --border-strong: rgba(255,255,255,0.18);
  --shadow: 0 4px 24px rgba(0,0,0,0.3); --brand-bg: rgba(255,255,255,0.95);
}
body.stufe-weihnachten::after {
  content: ''; position: fixed; left: 0; right: 0; top: -360px; bottom: 0;
  pointer-events: none; z-index: 9000;
  background-image:
    radial-gradient(2px 2px at 23px 41px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 89px 137px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2.5px 2.5px at 151px 233px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 197px 89px, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 61px 307px, rgba(255,255,255,0.7), transparent);
  background-size: 240px 360px;
  animation: dws-fall 11s linear infinite;
}

/* ── OSTERN: Pastell-Frühling (helle Stufe), ohne Effekt ── */
body.stufe-ostern {
  --bg-primary: #f6f0e4; --bg-secondary: #fdf9f0; --bg-tertiary: #efe7d6;
  --bg-hover: #e6dcc6; --bg-active: #ddd1b8;
  --text-primary: #4a3f55; --text-secondary: #7a7088; --text-muted: #a39aae;
  --accent: #9b72cf; --accent-hover: #8a5fc2;
  --accent-glow: rgba(155,114,207,0.16); --accent-bg: rgba(155,114,207,0.16);
  --green: #57b06a; --orange: #e09f3e; --red: #d4576a;
  --border: #ddd3c0; --border-strong: rgba(0,0,0,0.20);
  --shadow: 0 4px 24px rgba(90,70,40,0.10); --brand-bg: #ffffff;
}

/* ── ZOMBIEDAY: Giftgrün auf Fast-Schwarz, flackernde Vignette ── */
body.stufe-zombie {
  --bg-primary: #0c1208; --bg-secondary: #141d0e; --bg-tertiary: #1d2b13;
  --bg-hover: #25371a; --bg-active: #2e4420;
  --text-primary: #cfe8b8; --text-secondary: #9bb886; --text-muted: #6f8a5e;
  --accent: #9dff57; --accent-hover: #b4ff7e;
  --accent-glow: rgba(157,255,87,0.22); --accent-bg: rgba(157,255,87,0.16);
  --green: #9dff57; --orange: #ff7518; --red: #ff4d4d;
  --border: #243617; --border-strong: rgba(157,255,87,0.30);
  --shadow: 0 4px 24px rgba(157,255,87,0.10); --brand-bg: rgba(255,255,255,0.92);
}
body.stufe-zombie::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(157,255,87,0.07) 100%);
  animation: dws-flicker 5s infinite;
}

/* ── SILVESTER: Mitternachts-Violett + Gold, aufsteigende Funken ── */
body.stufe-silvester {
  --bg-primary: #14101f; --bg-secondary: #1d1830; --bg-tertiary: #292143;
  --bg-hover: #342a55; --bg-active: #403468;
  --text-primary: #f2eef8; --text-secondary: #c5bcd9; --text-muted: #8d83a8;
  --accent: #e8c45a; --accent-hover: #f2d278;
  --accent-glow: rgba(232,196,90,0.22); --accent-bg: rgba(232,196,90,0.18);
  --green: #4ade80; --orange: #fb923c; --red: #f87171;
  --border: #2d2547; --border-strong: rgba(255,255,255,0.20);
  --shadow: 0 4px 24px rgba(0,0,0,0.32); --brand-bg: rgba(255,255,255,0.95);
}
body.stufe-silvester::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: -360px;
  pointer-events: none; z-index: 9000;
  background-image:
    radial-gradient(1.5px 1.5px at 31px 47px, rgba(232,196,90,0.9), transparent),
    radial-gradient(2px 2px at 103px 151px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 167px 251px, rgba(232,196,90,0.7), transparent),
    radial-gradient(2px 2px at 211px 101px, rgba(242,210,120,0.8), transparent),
    radial-gradient(1.5px 1.5px at 67px 311px, rgba(255,255,255,0.5), transparent);
  background-size: 250px 360px;
  animation: dws-rise 9s linear infinite;
}

/* ── KARNEVAL: helles Creme + Pink, bunter Konfetti-Regen ── */
body.stufe-karneval {
  --bg-primary: #fbf3e8; --bg-secondary: #fffdf8; --bg-tertiary: #f3e8d8;
  --bg-hover: #ecddc8; --bg-active: #e3d2b8;
  --text-primary: #3a2e44; --text-secondary: #6f6480; --text-muted: #9d93ab;
  --accent: #e84393; --accent-hover: #d63484;
  --accent-glow: rgba(232,67,147,0.15); --accent-bg: rgba(232,67,147,0.15);
  --green: #20bf6b; --orange: #f7941d; --red: #eb3b5a;
  --border: #e6d8c4; --border-strong: rgba(0,0,0,0.20);
  --shadow: 0 4px 24px rgba(120,60,90,0.10); --brand-bg: #ffffff;
}
body.stufe-karneval::after {
  content: ''; position: fixed; left: 0; right: 0; top: -360px; bottom: 0;
  pointer-events: none; z-index: 9000;
  background-image:
    radial-gradient(2.5px 2.5px at 29px 53px, rgba(232,67,147,0.8), transparent),
    radial-gradient(2px 2px at 97px 149px, rgba(32,191,107,0.8), transparent),
    radial-gradient(2.5px 2.5px at 159px 247px, rgba(247,148,29,0.8), transparent),
    radial-gradient(2px 2px at 203px 97px, rgba(91,140,255,0.8), transparent),
    radial-gradient(2.5px 2.5px at 59px 313px, rgba(155,114,207,0.8), transparent),
    radial-gradient(2px 2px at 233px 199px, rgba(235,59,90,0.8), transparent);
  background-size: 260px 360px;
  animation: dws-fall 7s linear infinite;
}

/* ── Effekt-Animationen ── */
@keyframes dws-fall    { to { transform: translateY(360px); } }
@keyframes dws-rise    { to { transform: translateY(-360px); } }
@keyframes dws-flicker { 0%,100% { opacity: 1; } 90% { opacity: 1; } 92% { opacity: 0.35; } 94% { opacity: 1; } 96% { opacity: 0.6; } 98% { opacity: 1; } }