/* Farbstimmung nach its-marketech.de. clamp() skaliert zwischen 375 px und 1440 px Viewport. */

:root {
  --schrift-titel: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  --schrift-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: var(--schrift-titel);

  --gewicht-normal: 400;
  --gewicht-mittel: 500;
  --gewicht-fett: 650;

  --groesse-klein: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);
  --groesse-text: clamp(0.9375rem, 0.9155rem + 0.0939vw, 1rem);
  --groesse-gross: clamp(1.0625rem, 1.018rem + 0.1878vw, 1.1875rem);
  --groesse-h3: clamp(1.125rem, 1.037rem + 0.3756vw, 1.375rem);
  --groesse-h2: clamp(1.375rem, 1.199rem + 0.7512vw, 1.875rem);
  --groesse-h1: clamp(1.75rem, 1.398rem + 1.502vw, 2.75rem);
  --groesse-kennzahl: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);

  --groesse-eingabe: max(1rem, var(--groesse-text)); /* unter 16 px zoomt iOS beim Fokus */
  --zeilenhoehe-eng: 1.15;
  --zeilenhoehe-text: 1.5;
  --laufweite-eng: -0.02em;
  --laufweite-weit: 0.06em;

  --abstand-haar: 0.125rem;
  --abstand-0: 0.25rem;
  --abstand-halb: 0.375rem;
  --abstand-titel: 0.6rem;
  --abstand-1: clamp(0.375rem, 0.331rem + 0.1878vw, 0.5rem);
  --abstand-2: clamp(0.625rem, 0.581rem + 0.1878vw, 0.75rem);
  --abstand-3: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);
  --abstand-4: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
  --abstand-5: clamp(1.5rem, 1.324rem + 0.7512vw, 2rem);
  --abstand-6: clamp(2rem, 1.648rem + 1.502vw, 3rem);
  --rand-seite: clamp(1rem, 0.6479rem + 1.502vw, 2rem);
  --breite-max: 90rem;
  --breite-text: 40rem;

  --radius-klein: 0.375rem;
  --radius: 0.75rem;
  --radius-gross: 1rem;
  --radius-rund: 100vw;

  --ziel-min: 2.75rem;
  --leiste-breite: 13.75rem;
  --kopf-hoehe-klein: 3.5rem;
  --tabbar-hoehe: 3.5rem;
  --plan-tag: 1.75rem;
  --plan-label: 11rem;
  --linie: 0.0625rem;
  --fokus-breite: 0.1875rem;
  --fokus-abstand: 0.125rem;
  --punkt: 0.625rem;
  --balken-hoehe: 4rem;
  --dauer: 160ms;

  /* Panels, Schatten und kleine Schriftstufen für die einheitliche Oberfläche */
  --schatten-karte: 0 0.0625rem 0.1875rem var(--farbe-schatten);
  --schatten-pop: 0 1rem 2.5rem var(--farbe-schatten);
  --groesse-label: 0.75rem;
  --radius-panel: var(--radius-gross);
  --abstand-panel: var(--abstand-3);

  color-scheme: light;
  --farbe-grund: #ececea;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-2: #f5f5f3;
  --farbe-flaeche-3: #e2e2df;
  --farbe-text: #111111;
  --farbe-text-2: #4d4d4d;
  --farbe-text-3: #6b6b6b;
  --farbe-linie: rgba(0, 0, 0, 0.14);
  --farbe-linie-stark: rgba(0, 0, 0, 0.32);
  --farbe-akzent: #d9ff36; /* Limette nur als Fläche unter dunklem Text, auf Weiß unlesbar */
  --farbe-akzent-text: #000000;
  --farbe-markierung: #111111;
  --farbe-fokus: #111111;
  --farbe-fokus-innen: #d9ff36;
  --farbe-warnung: #a3330f;
  --farbe-warnung-flaeche: #fbe6dd;
  --farbe-hinweis: #6a5300;
  --farbe-hinweis-flaeche: #f5edc9;
  --farbe-balken: #b9b9b5;
  --farbe-balken-voll: #111111;
  --farbe-schatten: rgba(0, 0, 0, 0.12);
  --farbe-overlay: rgba(0, 0, 0, 0.45);
  --farbe-toast: #111111;
  --farbe-toast-text: #f2f2f2;
  --plan-wochenende: rgba(0, 0, 0, 0.05);
  --plan-aufgabe: #b8500a;
  --plan-aufgabe-flaeche: #fbe9d9;
  --plan-heute: #111111;
  --plan-warten-flaeche: #ececea;
  --plan-streifen: rgba(0, 0, 0, 0.14);
  --plan-streifen-akzent: rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --farbe-grund: #0b0b0b;
    --farbe-flaeche: #151515;
    --farbe-flaeche-2: #1d1d1d;
    --farbe-flaeche-3: #2a2a2a;
    --farbe-text: #eeeeee;
    --farbe-text-2: #b4b4b4;
    --farbe-text-3: #8f8f8f;
    --farbe-linie: rgba(255, 255, 255, 0.12);
    --farbe-linie-stark: rgba(255, 255, 255, 0.3);
    --farbe-akzent: #d9ff36;
    --farbe-akzent-text: #000000;
    --farbe-markierung: #d9ff36;
    --farbe-fokus: #d9ff36;
    --farbe-fokus-innen: #000000;
    --farbe-warnung: #ff8a70;
    --farbe-warnung-flaeche: #3a1a12;
    --farbe-hinweis: #f0d36b;
    --farbe-hinweis-flaeche: #2f2810;
    --farbe-balken: #444444;
    --farbe-balken-voll: #d9ff36;
    --farbe-schatten: rgba(0, 0, 0, 0.5);
    --farbe-overlay: rgba(0, 0, 0, 0.7);
    --farbe-toast: #eeeeee;
    --farbe-toast-text: #000000;
  --plan-wochenende: rgba(255, 255, 255, 0.05);
  --plan-aufgabe: #ff9a4d;
  --plan-aufgabe-flaeche: #3a2410;
  --plan-heute: #d9ff36;
  --plan-warten-flaeche: #262626;
  --plan-streifen: rgba(255, 255, 255, 0.16);
  --plan-streifen-akzent: rgba(0, 0, 0, 0.24);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --farbe-grund: #0b0b0b;
  --farbe-flaeche: #151515;
  --farbe-flaeche-2: #1d1d1d;
  --farbe-flaeche-3: #2a2a2a;
  --farbe-text: #eeeeee;
  --farbe-text-2: #b4b4b4;
  --farbe-text-3: #8f8f8f;
  --farbe-linie: rgba(255, 255, 255, 0.12);
  --farbe-linie-stark: rgba(255, 255, 255, 0.3);
  --farbe-akzent: #d9ff36;
  --farbe-akzent-text: #000000;
  --farbe-markierung: #d9ff36;
  --farbe-fokus: #d9ff36;
  --farbe-fokus-innen: #000000;
  --farbe-warnung: #ff8a70;
  --farbe-warnung-flaeche: #3a1a12;
  --farbe-hinweis: #f0d36b;
  --farbe-hinweis-flaeche: #2f2810;
  --farbe-balken: #444444;
  --farbe-balken-voll: #d9ff36;
  --farbe-schatten: rgba(0, 0, 0, 0.5);
  --farbe-overlay: rgba(0, 0, 0, 0.7);
  --farbe-toast: #eeeeee;
  --farbe-toast-text: #000000;
  --plan-wochenende: rgba(255, 255, 255, 0.05);
  --plan-aufgabe: #ff9a4d;
  --plan-aufgabe-flaeche: #3a2410;
  --plan-heute: #d9ff36;
  --plan-warten-flaeche: #262626;
  --plan-streifen: rgba(255, 255, 255, 0.16);
  --plan-streifen-akzent: rgba(0, 0, 0, 0.24);
}