/* =====================================================
   Loyal Team — Design System Foundations
   Quelle: LT_Manual_17 (Designhandbuch)
   ===================================================== */

@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: normal;
  src: url('/fonts/FiraSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Fira Sans'; font-weight: 500; font-style: normal;
  src: url('/fonts/FiraSans-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Fira Sans'; font-weight: 600; font-style: normal;
  src: url('/fonts/FiraSans-SemiBold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Fira Sans'; font-weight: 700; font-style: normal;
  src: url('/fonts/FiraSans-Bold.ttf') format('truetype'); font-display: swap; }

:root {
  /* Hauptfarben (Designhandbuch p. 10) */
  --lt-mf-blue:      #0e3176;
  --lt-mf-green:     #95c93d;
  --lt-mf-blue-deep: #183447;
  --lt-mf-teal-deep: #1a4d41;

  /* Akzentfarben */
  --lt-af-emerald: #008b73;
  --lt-af-olive:   #84aa31;
  --lt-af-purple:  #5b6199;
  --lt-af-yellow:  #efb900;
  --lt-af-red:     #da3416;
  --lt-af-gray:    #878786;
  --lt-af-gray-3:  #e9e9e9;

  /* Site-Palette (Shorthand-Tokens) */
  --t:   #1a5c50;
  --t2:  #1e6b5c;
  --tl:  #e8f3ef;
  --o:   #7a9c2c;
  --ol:  #f0f5e6;
  --r:   #c0392b;
  --bk:  #0c1810;
  --tx:  #0c1810;
  --tm:  #2d4a3e;
  --mu:  #7a9486;
  --bg:  #f5f8f6;
  --w:   #ffffff;
  --bd:  #ddeae3;
  --bd2: #c4d9cf;

  /* Fonts */
  --font-sans: 'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Karo-Raster (Designhandbuch p. 8) — dezent eingesetzt */
  --lt-karo:
    linear-gradient(to right,  rgba(35,73,99,.06) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, rgba(35,73,99,.06) 1px, transparent 1px) 0 0/40px 40px;
  --lt-karo-dark:
    linear-gradient(to right,  rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 40px;
}

/* Globale Responsive-Defaults */
img, svg, video { max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; }
@media (max-width: 640px) {
  body { -webkit-tap-highlight-color: rgba(26,92,80,.15); }
}

/* =====================================================
   Dark Mode
   ===================================================== */

/*
  !important auf Custom Properties ist nötig, weil jede Seite
  einen lokalen <style>-Block mit :root { --bg: ... } hat, der
  NACH design.css geladen wird und sonst die Variablen überschreibt.
*/
[data-theme="dark"] {
  --bg:  #0e1a12 !important;
  --w:   #162018 !important;
  --tx:  #ddeee5 !important;
  --tm:  #8cb8a4 !important;
  --mu:  #4e7060 !important;
  --t:   #2a9478 !important;
  --t2:  #32aa8a !important;
  --tl:  #0a1e14 !important;
  --o:   #90c038 !important;
  --ol:  #0f1c06 !important;
  --r:   #e05252 !important;
  --bk:  #080f0a !important;
  --bd:  #1a2e22 !important;
  --bd2: #22382c !important;
}

/* Seiteninhalt-Hintergrund und Textfarbe */
[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--tx) !important;
}

/* Nav-Hintergrund (hardcoded in pages) */
[data-theme="dark"] nav {
  background: rgba(8, 16, 12, 0.95) !important;
  border-bottom-color: var(--bd) !important;
}

/* Logo in Dark Mode: schwarz → weiß */
[data-theme="dark"] nav img[src*="loyal-team-logo"] {
  filter: brightness(0) invert(1);
}

/* Formulare */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--w) !important;
  color: var(--tx) !important;
  border-color: var(--bd2) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--mu) !important;
  opacity: 1;
}

/* Scrollbar (Webkit) */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bk); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }

/* Theme-Toggle-Button */
.theme-btn {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mu);
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-btn svg { display: block; pointer-events: none; }
.theme-btn:hover {
  color: var(--t);
  border-color: var(--t);
  background: var(--tl);
}