/* =========================================================================
   FARB- & DESIGN-EINSTELLUNGEN (ROOT-DATEI)
   -------------------------------------------------------------------------
   Hier werden ALLE Farben, Schriften und Grundmaße der Website zentral
   definiert. Wenn du eine Farbe änderst, ändert sie sich automatisch
   überall auf der gesamten Seite (Header, Buttons, Footer, Links, ...).

   Am einfachsten anzupassen:
     --color-primary       -> Hauptfarbe (aktuell: Weiß)
     --color-secondary     -> Akzent-/Markenfarbe (aktuell: dunkles Rot)
     --color-secondary-*   -> hellere/dunklere Abstufungen davon

   Du musst sonst nirgends im CSS etwas ändern.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. MARKENFARBEN – hier anpassen, wenn sich die Farbwelt ändern soll
     --------------------------------------------------------------------- */

  /* Primärfarbe: Weiß (Basis für Hintergründe, Header, Content-Flächen) */
  --color-primary: #ffffff;

  /* Sekundärfarbe: dunkles, edles Rot (Akzentfarbe, Buttons, Footer) */
  --color-secondary: #7a1120;

  /* Automatisch abgeleitete Abstufungen der Sekundärfarbe.
     Werden für Hover-States, Verläufe & Footer-Hintergrund genutzt.
     Kannst du bei Bedarf ebenfalls per Hand anpassen. */
  --color-secondary-dark: #4f0a15;   /* für Footer-Hintergrund, sehr dunkel */
  --color-secondary-darker: #38070f; /* Footer-Verlauf / tiefster Punkt */
  --color-secondary-light: #a3283a;  /* Hover-Zustände auf hellem Grund */
  --color-secondary-lighter: #c94a5c;/* dezente Akzente, Icons */
  --color-secondary-tint: #fbecee;   /* sehr helles Rosé für Flächen/Badges */

  /* ---------------------------------------------------------------------
     2. NEUTRALE FARBEN – Text, Flächen, Linien
     --------------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #171412;

  --color-text: #221c1b;         /* Haupttext */
  --color-text-muted: #6b625f;   /* Sekundärtext, Beschreibungen */
  --color-text-inverted: #ffffff;/* Text auf dunklem Grund (z.B. Footer) */

  --color-bg: #ffffff;           /* Standard-Seitenhintergrund */
  --color-bg-alt: #faf8f7;       /* leicht abgesetzte Flächen/Sections */
  --color-border: #ece6e5;       /* dezente Trennlinien */
  --color-border-strong: #ddd4d2;

  /* ---------------------------------------------------------------------
     3. SEMANTISCHE ZUORDNUNGEN – werden im restlichen CSS verwendet
     --------------------------------------------------------------------- */
  --color-header-bg: var(--color-white);
  --color-header-border: var(--color-border);
  --color-header-text: var(--color-text);

  --color-footer-bg: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  --color-footer-bg-solid: var(--color-secondary-dark);
  --color-footer-text: rgba(255, 255, 255, 0.88);
  --color-footer-text-strong: #ffffff;
  --color-footer-border: rgba(255, 255, 255, 0.14);

  --color-btn-bg: var(--color-secondary);
  --color-btn-bg-hover: var(--color-secondary-dark);
  --color-btn-text: #ffffff;

  --color-link: var(--color-secondary);
  --color-link-hover: var(--color-secondary-dark);

  /* ---------------------------------------------------------------------
     4. TYPOGRAFIE
     --------------------------------------------------------------------- */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --line-height-tight: 1.15;
  --line-height-base: 1.6;

  /* ---------------------------------------------------------------------
     5. ABSTÄNDE, RADIEN, SCHATTEN
     --------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 20, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 20, 18, 0.08);
  --shadow-lg: 0 20px 45px rgba(23, 20, 18, 0.12);
  --shadow-header: 0 1px 0 rgba(23, 20, 18, 0.06), 0 8px 24px rgba(23, 20, 18, 0.04);

  --container-width: 1240px;
  --header-height: 84px;

  --transition-fast: 160ms ease;
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}