/* ============================================================
   Spielfeld – Hallenplan · Design-Tokens
   Abgeleitet aus der Spielfeld-Designsprache (Prototyp v0.95):
   Grün #0E7C5A, Tinte #0F172A, Fläche #EEF2F4, Radius 16, Systemschrift.
   Nur Variablen – keine Selektoren außer :root/Theme. Keine externen Quellen.
   ============================================================ */

:root {
  /* ---------- Marke ---------- */
  --brand:        #0E7C5A;
  --brand-dark:   #0A5D43;
  --brand-soft:   #E7F6EF;
  --brand-line:   #BCE7D5;
  --brand-ink:    #FFFFFF;   /* Text auf Markengrün */
  --accent:       #2563EB;

  /* ---------- Neutrale Flächen und Text ---------- */
  --bg:           #EEF2F4;   /* Seitenhintergrund */
  --surface:      #FFFFFF;   /* Karten, Leisten */
  --surface-2:    #F8FAFC;   /* Kopfzeilen im Raster, ruhige Flächen */
  --surface-3:    #F1F5F9;   /* Eingabefelder, Chips aus */
  --line:         #E2E8F0;
  --line-strong:  #CBD5E1;
  --ink:          #0F172A;
  --ink-2:        #334155;
  --muted:        #64748B;
  --muted-2:      #94A3B8;
  --sidebar:      #0B1324;   /* Admin-Seitenleiste, wie Spielfeld */
  --sidebar-2:    #111C33;
  --sidebar-line: #1E293B;
  --sidebar-ink:  #CBD5E1;

  /* ---------- Rückmeldung (nur für Meldungen, nie für Sparten) ---------- */
  --ok:           #16A34A;   --ok-bg:   #DCFCE7;  --ok-ink:   #166534;
  --warn:         #D97706;   --warn-bg: #FEF3C7;  --warn-ink: #92400E;
  --bad:          #DC2626;   --bad-bg:  #FEE2E2;  --bad-ink:  #991B1B;
  --info:         #0EA5E9;   --info-bg: #E0F2FE;  --info-ink: #075985;

  /* ---------- Status eines Eintrags (Icon + Wort, nie nur Farbe) ---------- */
  --st-neu:            #DB2777;  --st-neu-bg:      #FCE7F3;  --st-neu-ink:      #9D174D;
  --st-klaerung:       #CA8A04;  --st-klaerung-bg: #FEF9C3;  --st-klaerung-ink: #713F12;
  --st-ausweich:       #EA580C;  --st-ausweich-bg: #FFEDD5;  --st-ausweich-ink: #9A3412;
  --st-entfaellt:      #64748B;  --st-entfaellt-bg:#F1F5F9;  --st-entfaellt-ink:#475569;
  --st-schule:         #475569;  --st-schule-bg:   #E2E8F0;  --st-schule-ink:   #1E293B;
  --st-frei:           #94A3B8;  --st-frei-bg:     #FFFFFF;  --st-frei-ink:     #64748B;
  --konflikt:          #DC2626;

  /* ---------- Sparten (Identität; 8 Farbklassen, validiert hell + dunkel) ----------
     Text trägt immer die Tinte, die Farbe sitzt nur in der Randleiste / im Punkt. */
  --sp-fussball:     #16A34A;
  --sp-handball:     #2563EB;
  --sp-rueckschlag:  #0891B2;   /* Tischtennis + Badminton */
  --sp-kampfsport:   #8B5CF6;   /* Judo + Karate */
  --sp-volleyball:   #D97706;
  --sp-tanzen:       #C026D3;
  --sp-turnen:       #65A30D;
  --sp-gesundheit:   #0284C7;   /* Kurse & Gesundheitssport */
  --sp-sonstige:     #64748B;   /* neutral, keine Serie */
  --sp-tint:         12%;       /* Deckkraft der Sparten-Tönung im Block */

  /* ---------- Schrift ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 11px;  --fs-sm: 12.5px;  --fs-md: 14px;  --fs-lg: 16px;
  --fs-xl: 20px;  --fs-2xl: 26px;   --fs-hero: 40px;
  --lh: 1.45;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800;
  --tracking-tight: -0.015em;
  --tracking-caps: 0.06em;

  /* ---------- Abstände (4er-Raster) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --gutter: 16px;                         /* Seitenrand Handy */
  --gutter-lg: 26px;                      /* Seitenrand ab Tablet */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ---------- Radien ---------- */
  --radius:     16px;   /* Karten, wie Spielfeld */
  --radius-md:  12px;   /* Meldungen, Felder */
  --radius-sm:  8px;    /* Blöcke im Raster, kleine Buttons */
  --radius-pill: 999px;

  /* ---------- Schatten ---------- */
  --shadow:    0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --shadow-lg: 0 30px 80px rgba(15,23,42,.35);
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(15,23,42,.06);

  /* ---------- Bedienung ---------- */
  --tap: 44px;              /* Mindest-Tippziel */
  --field-h: 44px;
  --field-fs: 16px;         /* iOS zoomt nicht bei >= 16 px */
  --focus: 0 0 0 3px rgba(37,99,235,.35);
  --dur: 160ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ---------- Raster (Wochenplan) ---------- */
  --rail-w: 52px;           /* Zeitleiste links */
  --slot-h: 14px;           /* 15 Minuten = 14 px -> 60 Minuten = 56 px */
  --day-head-h: 40px;

  /* ---------- Ebenen ---------- */
  --z-sticky: 20;
  --z-nav: 30;
  --z-sheet: 80;
  --z-toast: 90;

  color-scheme: light;
}

/* ============================================================
   Dunkel · eigene Stufen, kein automatisches Umkehren
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:        #2BB88A;
    --brand-dark:   #0E7C5A;
    --brand-soft:   #0F2A22;
    --brand-line:   #1E5A45;
    --brand-ink:    #05130E;
    --accent:       #60A5FA;

    --bg:           #0B1220;
    --surface:      #141C2B;
    --surface-2:    #1A2334;
    --surface-3:    #1F2A3D;
    --line:         #263145;
    --line-strong:  #364256;
    --ink:          #EDF2F7;
    --ink-2:        #CBD5E1;
    --muted:        #94A3B8;
    --muted-2:      #64748B;
    --sidebar:      #070C16;
    --sidebar-2:    #0F1727;
    --sidebar-line: #1B2436;
    --sidebar-ink:  #CBD5E1;

    --ok:   #4ADE80; --ok-bg:   #0F2A1A; --ok-ink:   #BBF7D0;
    --warn: #FBBF24; --warn-bg: #2E2208; --warn-ink: #FDE68A;
    --bad:  #F87171; --bad-bg:  #2E1111; --bad-ink:  #FECACA;
    --info: #38BDF8; --info-bg: #0B2536; --info-ink: #BAE6FD;

    --st-neu:       #F472B6; --st-neu-bg:      #3A1226; --st-neu-ink:      #FBCFE8;
    --st-klaerung:  #FACC15; --st-klaerung-bg: #2E2A08; --st-klaerung-ink: #FEF08A;
    --st-ausweich:  #FB923C; --st-ausweich-bg: #33190A; --st-ausweich-ink: #FED7AA;
    --st-entfaellt: #94A3B8; --st-entfaellt-bg:#1F2937; --st-entfaellt-ink:#CBD5E1;
    --st-schule:    #94A3B8; --st-schule-bg:   #1E293B; --st-schule-ink:   #E2E8F0;
    --st-frei:      #64748B; --st-frei-bg:     #141C2B; --st-frei-ink:     #94A3B8;
    --konflikt:     #F87171;

    --sp-tint: 22%;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.6);
    --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.35);
    --focus: 0 0 0 3px rgba(96,165,250,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand:        #2BB88A;
  --brand-dark:   #0E7C5A;
  --brand-soft:   #0F2A22;
  --brand-line:   #1E5A45;
  --brand-ink:    #05130E;
  --accent:       #60A5FA;

  --bg:           #0B1220;
  --surface:      #141C2B;
  --surface-2:    #1A2334;
  --surface-3:    #1F2A3D;
  --line:         #263145;
  --line-strong:  #364256;
  --ink:          #EDF2F7;
  --ink-2:        #CBD5E1;
  --muted:        #94A3B8;
  --muted-2:      #64748B;
  --sidebar:      #070C16;
  --sidebar-2:    #0F1727;
  --sidebar-line: #1B2436;
  --sidebar-ink:  #CBD5E1;

  --ok:   #4ADE80; --ok-bg:   #0F2A1A; --ok-ink:   #BBF7D0;
  --warn: #FBBF24; --warn-bg: #2E2208; --warn-ink: #FDE68A;
  --bad:  #F87171; --bad-bg:  #2E1111; --bad-ink:  #FECACA;
  --info: #38BDF8; --info-bg: #0B2536; --info-ink: #BAE6FD;

  --st-neu:       #F472B6; --st-neu-bg:      #3A1226; --st-neu-ink:      #FBCFE8;
  --st-klaerung:  #FACC15; --st-klaerung-bg: #2E2A08; --st-klaerung-ink: #FEF08A;
  --st-ausweich:  #FB923C; --st-ausweich-bg: #33190A; --st-ausweich-ink: #FED7AA;
  --st-entfaellt: #94A3B8; --st-entfaellt-bg:#1F2937; --st-entfaellt-ink:#CBD5E1;
  --st-schule:    #94A3B8; --st-schule-bg:   #1E293B; --st-schule-ink:   #E2E8F0;
  --st-frei:      #64748B; --st-frei-bg:     #141C2B; --st-frei-ink:     #94A3B8;
  --konflikt:     #F87171;

  --sp-tint: 22%;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.6);
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.35);
  --focus: 0 0 0 3px rgba(96,165,250,.45);
  color-scheme: dark;
}

/* Weniger Bewegung: alle Übergänge aus */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* Druck: neutrale Fläche, keine Schatten */
@media print {
  :root {
    --bg: #FFFFFF;
    --shadow: none;
    --shadow-lg: none;
    --sp-tint: 0%;
  }
}