/* ==========================================================================
   00-CONFIG.CSS -- DAS KONTROLLZENTRUM (Version 2.0)
   ========================================================================== */

:root {
  /* === FARBEN === */
  /*START_COLORS*/
  --color-primary: #007aff;
  --color-secondary: #0056b3;
  --color-accent: #ff9500;
  --color-primary-grad-start: #0a84ff;
  --color-primary-grad-end: #0066d6;
  --color-primary-overlay: rgba(0, 122, 255, 0.12);
  --color-primary-overlay-strong: rgba(0, 122, 255, 0.32);
  --color-primary-strong: #0a2f6b;
  --color-highlight-overlay: rgba(255, 255, 255, 0.5);
  --color-overlay-light: rgba(255, 255, 255, 0.14);
  --color-overlay-light-strong: rgba(255, 255, 255, 0.26);
  --color-hero-badge-bg: rgba(0, 0, 0, 0.38);
  --color-hero-badge-border: rgba(255, 255, 255, 0.36);
  --color-hero-badge-shadow: rgba(0, 0, 0, 0.4);
  --color-background: #ffffff;
  --color-background-dark: #000000;
  --color-surface: #f5f5f7;
  --color-surface-alt: #fafafa;
  --color-surface-muted: #e5e5ea;
  --color-text: #1d1d1f;
  --color-text-light: #6e6e73;
  --color-border: #d2d2d7;
  --color-focus-ring: #007aff;
  /*END_COLORS*/

  /*START_FONTS*/
  /*END_FONTS*/

  /* === SCHRIFTARTEN === */
  /*START_FONT_FAMILIES*/
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  /*END_FONT_FAMILIES*/

  --font-size-base: 16px;
  --font-scale-ratio: 1.25;

  /* NEU: Schriftstärken */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* NEU: Zeilenhöhen */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;

  /* === ABSTÄNDE (SPACING) === */
  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 4rem;

  /* === HEADER === */
  --header-height: 70px;
  /* Ungefähre Höhe des Headers inkl. Padding */

  /* === LAYOUT === */
  --container-width: 1140px;
  --container-width-wide: 1440px;
  --container-width-fullwidth: 1850px;
  --container-padding: var(--spacing-l);
  --content-width: 720px;

  /* === SONSTIGES === */
  --border-width: 1px;
  /* NEU: Standard-Rahmenbreite */
  --border-radius-button: 999px;
  --border-radius-card: 12px;
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.12);
  --transition-speed: 0.25s;
  --transition-ease: ease-in-out;
  /* NEU: Übergangs-Funktion */

  /* === KREISANIMATION === */
  --psi-green: #0cce6b;
  --psi-track: #e6e6e6;
  --psi-size: 120px;
  --psi-stroke: 6; /* dünner Balken */

  /* === PSI PROGRESS BARS === */
  --psi-bar-fill-good: #66bb6a; /* Grün für 90-100 */
  --psi-bar-fill-ok: #ffa726; /* Orange für 50-89 */
  --psi-bar-fill-poor: #ef5350; /* Rot für 0-49 */
  --psi-bar-track: rgba(255, 255, 255, 0.2); /* Hintergrund auf Blau */

  /* === BREAKPOINTS (DOKUMENTATION) === */
  /* HINWEIS: Diese Variablen funktionieren nicht direkt in @media-Regeln.
       Sie dienen als zentrale Referenz für das Projekt.
       --breakpoint-mobile: 480px;
       --breakpoint-tablet: 768px;
       --breakpoint-desktop: 1024px;
    */
}