:root {
  /* Grundfarben */
  --color-bg: #dbdbdb;
  --color-text: #1a1a1a;
  --color-primary: #00bcd4;
  --color-secondary: #111827;

  /* Komponentenfarben */
  --header-text-color: #ffffff;
  --footer-text-color: #ffffff;

  /* Card Farben */
  --card-bg: #111827;
  --card-text-color: #ffffff;
  --card-spacing: 25px;      /* Abstand außen */
  --card-gap: 30px;          /* Abstand zwischen Cards */
  --card-hover-lift: -8px;   /* Hover-Anhebung */
  --card-radius: 12px;
  --card-shadow: 0 5px 15px rgba(0,0,0,0.2);
  --card-hover-shadow: 0 12px 25px rgba(0,0,0,0.35);

  /* Hero Section */
  --hero-height: 70vh;
  --hero-overlay: rgba(0,0,0,0.55);
  --hero-text-color: #ffffff;
  --hero-heading-size: 2.8rem;
  --hero-text-size: 1.2rem;

  /* Typografie */
  --font-main: 'Roboto', sans-serif;
  --font-heading: 'Roboto Mono', monospace;

  /* Responsive Typography */
    --fs-xs: clamp(0.7rem, 1.5vw, 0.9rem);      /* Kleiner Text */
    --fs-sm: clamp(0.9rem, 1.8vw, 1rem);        /* Standard Text */
    --fs-md: clamp(1rem, 2vw, 1.2rem);          /* größerer Text */
    --fs-lg: clamp(1.4rem, 4vw, 1.8rem);        /* H2 */
    --fs-xl: clamp(1.8rem, 6vw, 2.6rem);        /* H1 */
    --fs-xxl: clamp(2.2rem, 8vw, 3.4rem);       /* Hero H1 */

  /* Allgemein */
  --radius: 12px;
  --shadow: 0 5px 15px rgba(0,0,0,0.1);
  --container-width: 1200px;

}