/* ============================================================================
   recrulu theme.css — v1 (2026-07-02)
   ----------------------------------------------------------------------------
   EINZIGE QUELLE für Design-Tokens: Farben, Typo-Skala, Radien, Schatten,
   Fokus-Ring + kleine Komponenten-Primitives.

   Themes:
     :root                    → Light (Default)
     html[data-theme="dark"]  → Dark (neutrales Graphit; Gold NUR für Aktionen,
                                aktive Zustände und Score-Balken)

   REGELN (verbindlich — Details & Kontrastwerte: docs/DESIGN-SYSTEM.md):
     1. Seiten verwenden NUR semantische Tokens — nie Roh-Hex.
     2. Diese Datei wird VOR dem seitenlokalen <style> verlinkt
        (Seiten-CSS gewinnt bei gleicher Spezifität → sichere Migration).
     3. Tokens sind additiv: in v1 nie umbenennen/entfernen, nur ergänzen.
     4. Jede Änderung hier → docs/DESIGN-SYSTEM.md aktualisieren (Pflicht).
     5. Status-Farben nie allein einsetzen — immer mit Symbol/Text kombinieren.
   ============================================================================ */

/* ── Fonts: Epilogue 400–800 + DM Sans 300–600, lokal gehostet (DSGVO) ────── */
@font-face{font-family:"Epilogue";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/O4ZRFGj5hxF0EhjimlIqsggqlg.woff2") format("woff2");unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Epilogue";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/O4ZRFGj5hxF0EhjimlIksgg.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 600;font-display:swap;src:url("/fonts/rP2Hp2ywxg089UriCZ2IHSeH.woff2") format("woff2");unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 600;font-display:swap;src:url("/fonts/rP2Hp2ywxg089UriCZOIHQ.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;}

/* ── Tokens: LIGHT (Default) ──────────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* Flächen */
  --bg:#FFFFFF;
  --surface-1:#FFFFFF;
  --surface-2:#FFF8E1;
  --surface-3:#F5EFD8;

  /* Text (Kontrast auf surface-1: 19.4 / 14.5 / 6.0) */
  --ink:#120D00;
  --ink-2:#2E2200;
  --ink-3:#7A6018;

  /* Marke: EIN Gold-Farbton, pro Flächenhelligkeit kalibriert */
  --gold:#D4A017;
  --gold-hi:#F0B820;
  --gold-hover:#B8920F;                 /* Button-Hover light = DUNKLER (Kontrast zu on-gold) */
  --on-gold:#FFFFFF;                    /* bewusster Marken-Trade-off, s. Doku */
  --gold-tint-1:rgba(212,160,23,.08);
  --gold-tint-2:rgba(212,160,23,.15);
  --gold-border:rgba(212,160,23,.40);   /* NUR aktive/ausgewählte Zustände */

  /* Linien (Light: warm — Marketing-Look bleibt) */
  --border:rgba(212,160,23,.20);
  --border-2:rgba(212,160,23,.40);

  /* Status — IMMER mit Symbol/Text kombinieren, nie Farbe allein */
  --ok:#1E7A5A;      --ok-bg:rgba(30,122,90,.10);
  --warn:#A05A00;    --warn-bg:rgba(160,90,0,.10);    --warn-border:rgba(160,90,0,.35);
  --danger:#B23F33;  --danger-bg:rgba(178,63,51,.08); --danger-border:rgba(178,63,51,.30);

  /* Ebenen */
  --overlay:rgba(18,13,0,.35);
  --shadow-1:0 4px 28px rgba(18,13,0,.07);
  --shadow-2:0 8px 40px rgba(18,13,0,.10);

  /* Footer (auf beiden Themes dunkel) */
  --footer-bg:#080400;
  --footer-ink:rgba(255,255,255,.55);

  /* Typografie */
  --fh:'Epilogue',Georgia,serif;
  --fb:'DM Sans',Arial,sans-serif;
  --fs-2xl:2rem;
  --fs-xl:1.55rem;
  --fs-lg:1.25rem;
  --fs-md:1rem;
  --fs-base:.92rem;
  --fs-sm:.8rem;
  --fs-xs:.72rem;

  /* Radien */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:100px;

  /* Fokus */
  --focus-ring:2px solid var(--gold);

  /* nav.js-Kompatibilitäts-Aliase — injizierte Nav themt sich automatisch */
  --bg2:var(--surface-2);
  --surface:var(--surface-1);
  --ink-mid:var(--ink-2);
  --ink-light:var(--ink-3);
}

/* ── Tokens: DARK ─────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme:dark;

  /* Flächen: neutrales Graphit statt Braun-Schwarz */
  --bg:#101114;
  --surface-1:#17191E;
  --surface-2:#1D2025;
  --surface-3:#23262C;

  /* Text (Kontrast auf surface-1: 13.8 / 8.7 / 5.4 — AA erfüllt) */
  --ink:#E9E4D6;
  --ink-2:#BDB6A8;
  --ink-3:#968E80;

  --gold:#E8A820;
  --gold-hi:#F5B830;
  --gold-hover:#F5B830;                 /* Button-Hover dark = HELLER */
  --on-gold:#101114;                    /* 9.0:1 auf Gold */
  --gold-tint-1:rgba(232,168,32,.08);
  --gold-tint-2:rgba(232,168,32,.16);
  --gold-border:rgba(232,168,32,.35);

  /* Linien: NEUTRAL — Gold ist Aktionen vorbehalten */
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);

  /* Status (teal-grün ↔ orange: maximaler Abstand bei Rot-Grün-Schwäche) */
  --ok:#66BFA3;      --ok-bg:rgba(102,191,163,.12);
  --warn:#E09A50;    --warn-bg:rgba(224,154,80,.12);   --warn-border:rgba(224,154,80,.35);
  --danger:#E07A6A;  --danger-bg:rgba(224,122,106,.10);--danger-border:rgba(224,122,106,.30);

  --overlay:rgba(0,0,0,.60);
  --shadow-1:0 1px 2px rgba(0,0,0,.40),0 4px 16px rgba(0,0,0,.28);
  --shadow-2:0 12px 40px rgba(0,0,0,.45);

  --footer-bg:#0B0C0E;
  --footer-ink:rgba(255,255,255,.35);

  --focus-ring:2px solid var(--gold-hi);
}

/* ── Sichtbarer Tastatur-Fokus sitewide (WCAG 2.4.7) ──────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================================================
   Komponenten-Primitives — bewusst klein gehalten.
   Seitenlokale Styles überschreiben diese bis zur Voll-Migration (Cascade-
   Regel: theme.css wird VOR dem Seiten-<style> geladen).
   ============================================================================ */

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--gold);color:var(--on-gold);border:none;cursor:pointer;
  font-family:var(--fb);font-size:var(--fs-base);font-weight:600;
  padding:.6rem 1.5rem;border-radius:var(--r-pill);text-decoration:none;
  transition:background .2s,transform .2s;
}
.btn-primary:hover{background:var(--gold-hover);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:transparent;color:var(--ink-2);border:1px solid var(--border-2);
  cursor:pointer;font-family:var(--fb);font-size:var(--fs-sm);font-weight:600;
  padding:.5rem 1rem;border-radius:var(--r-sm);text-decoration:none;
  transition:border-color .2s,color .2s;
}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}

.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-bg);
  cursor:pointer;font-family:var(--fb);font-size:var(--fs-sm);font-weight:600;
  padding:.5rem 1rem;border-radius:var(--r-sm);text-decoration:none;
  transition:filter .2s;
}
.btn-danger:hover{filter:brightness(1.12);}

.btn-sm{padding:.4rem .9rem;font-size:var(--fs-sm);}

/* ── Karten ── */
.card{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:1.5rem;
}
.card-sub{background:var(--surface-2);}

/* ── Badges (Pill; Status immer zusätzlich mit Text/Symbol) ── */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .6rem;border-radius:var(--r-pill);
  font-family:var(--fb);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--surface-3);color:var(--ink-2);border:1px solid transparent;
}
.badge-gold{background:var(--gold-tint-2);color:var(--gold);border-color:var(--gold-border);}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-warn{background:var(--warn-bg);color:var(--warn);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-neutral{background:var(--surface-3);color:var(--ink-3);}

/* ── Formulare ── */
.input,.select{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.58rem .9rem;color:var(--ink);
  font-family:var(--fb);font-size:var(--fs-base);transition:border-color .2s;
}
.input:focus,.select:focus{border-color:var(--gold);}
.input::placeholder{color:var(--ink-3);}

.label{
  display:block;font-family:var(--fb);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.35rem;
}

/* ── Empty-State mit Maulwurf-Guide (Regeln: DESIGN-SYSTEM.md §Maulwurf) ── */
.empty-state{
  text-align:center;padding:2.5rem 1rem;
  color:var(--ink-3);font-size:var(--fs-base);
}
.empty-mole{width:96px;height:auto;margin:0 auto .75rem;display:block;}