/* ==========================================================================
   wefa Webdesign: Farb-Tokens – EINZIGE Stelle für Farbwerte.
   Alle weiteren CSS-Dateien nutzen ausschließlich var(--name).
   Konformiert mit wefa-tokens.css (CI September 2026).
   ========================================================================== */

:root {
  /* ── Hell ──────────────────────────────────────────────────────────────── */
  --bg:              #f6f1e7;
  --surface:         #fffdf8;
  --text:            #0f2e2a;
  --muted:           #4a615c;
  --border:          #ddd5c4;

  --dark:            #113f37;
  --dark2:           #1a544a;

  --accent:          #1f6f63;
  --accent-h:        #14554b;
  --accent-on-dark:  #7fd8c3;
  --accent-pale:     #dcebe5;

  --accent-warm:     #ff6b4a;
  --accent-cool:     #2a7484;
  --accent-alt:      #b4457a;

  --on-dark:         #f6f1e7;
  --on-dark-muted:   #bcd0ca;

  --warn-bg:         #fdecc8;
  --warn-text:       #7a4a00;
  --warn-border:     #e3bf78;
  --kf-ok:           #1f7a4d;
  --kf-error:        #b3261e;
  --whatsapp:        #25d366;

  /* Hinweisboxen */
  --info-bg:         #dcecf1;
  --info-text:       #164a57;
  --info-border:     #9cc7d1;
  --ok-bg:           #dcefe4;
  --ok-text:         #14573a;
  --ok-border:       #8fc7a8;
  --error-bg:        #f8e0dd;
  --error-text:      #8f1d17;
  --error-border:    #e0a49e;

  /* Datenfarben hell */
  --data-1: #1f6f63; --data-2: #2b6cb0; --data-3: #c96a1c;
  --data-4: #b4457a; --data-5: #7a6a12; --data-6: #8a3b3b;
  --data-good: #1f7a4d; --data-mid: #a86a00; --data-bad: #b3261e;

  /* Kontaktformular-Widget */
  --kf-border:      var(--border);
  --kf-btn-bg:      var(--dark);
  --kf-btn-text:    var(--on-dark);
  --kf-focus:       var(--accent);
  --kf-input-bg:    var(--surface);
  --kf-input-text:  var(--text);
  --kf-muted:       var(--muted);

  /* ── Dunkelbereich ─────────────────────────────────────────────────────── */
  --dark-text-1:  #f6f1e7; --dark-text-2:  #e8e7de; --dark-text-3:  #dbded4;
  --dark-text-4:  #ced4cb; --dark-text-5:  #c0cbc2; --dark-text-6:  #b2c1b8;
  --dark-text-7:  #a5b7af; --dark-text-8:  #98aea6; --dark-text-9:  #8aa49d;
  --dark-text-10: #7c9b93; --dark-text-11: #6f918a;

  --dark-border-1: rgb(246 241 231 / 0.08);
  --dark-border-2: rgb(246 241 231 / 0.14);
  --dark-border-3: rgb(246 241 231 / 0.22);
  --dark-border-4: rgb(246 241 231 / 0.34);

  --dark-surface-1: #17493f; --dark-surface-2: #1e5a4f; --dark-surface-3: #266a5d;

  --dark-good:           #6fd6a0; --dark-good-bg:        #1c5644; --dark-good-border:    #3f8b6a;
  --dark-warn:           #f2c14e; --dark-warn-bg:        #44391b; --dark-warn-border:    #8c7233;
  --dark-critical:       #ff8087; --dark-critical-bg:    #4d2b31; --dark-critical-border:#98525b;
  --dark-info:           #8fd0e8; --dark-info-bg:        #1a4a55; --dark-info-border:    #3f8497;

  /* Datenfarben Dunkel */
  --dark-data-1: #7fd8c3; --dark-data-2: #8fa8ff; --dark-data-3: #f28c52;
  --dark-data-4: #e58fc0; --dark-data-5: #f2d15e; --dark-data-6: #b5a08a;

  /* ── Schatten / Overlay ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgb(15 46 42 / 0.08), 0 1px 1px rgb(15 46 42 / 0.05);
  --shadow-md: 0 6px 16px rgb(15 46 42 / 0.10), 0 2px 4px rgb(15 46 42 / 0.06);
  --wall-label-bg: rgb(17 63 55 / 0.9);
  --scrim:     rgb(10 31 28 / 0.60);

  /* ── Dunkelbereich: Sonderfarben ─────────────────────────────────────────── */
  --dark-on-accent:     #04121f;
  --dark-overlay:       rgba(0,0,0,.18);
  --dark-surface-input: color-mix(in srgb, var(--dark) 60%, #000 10%);
  --dark-surface-panel: color-mix(in srgb, var(--dark) 70%, #fff 3%);
  --dark-text-3b:       rgba(255,255,255,.8);
}