:root {
  /* ==================================================
     Colors
  ================================================== */

  --color-primary: #00b8d9;
  --color-primary-dark: #009bb8;
  --color-secondary: #174a72;

  --color-text: #000000;
  --color-text-light: #5f6f7a;

  --color-background: #f7fcfd;
  --color-white: #ffffff;
  --color-border: #e8eef2;
  --color-black: #000000;
  --color-gray: #4d4d4d;

  --color-success: #39b54a;
  --color-error: #d63939;


  /* ==================================================
     Typography
  ================================================== */

  /* Font families */
  --font-family-heading: "Playfair Display", Georgia, serif;
  --font-family-body: "Raleway", Arial, sans-serif;
  --font-family-ui: "Roboto", Arial, sans-serif;

  /*
   * Bestehender allgemeiner Variablenname.
   * Verweist jetzt ebenfalls auf Raleway.
   */
  --font-family-base: var(--font-family-body);

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* General font sizes */
  --font-size-xs: 0.875rem;  /* 14px */
  --font-size-sm: 1rem;      /* 16px */
  --font-size-md: 1.125rem;  /* 18px */
  --font-size-lg: 1.375rem;  /* 22px */
  --font-size-xl: 1.75rem;   /* 28px */
  --font-size-1xl: 1.88rem;   /* 30px */
  --font-size-2xl: 2.375rem; /* 38px */
  --font-size-3xl: 2.813rem;     /* 45px */
  --font-size-4xl: 3.125rem;   /* 50px */ 

  /* Body text */
  --font-size-body: var(--font-size-md);
  --line-height-body: 1.6;

  /* Buttons */
  --font-size-button: var(--font-size-xs);
  --line-height-button: 1.2;

  /* Legal links */
  --font-size-legal: var(--font-size-sm);
  --line-height-legal: 1.5;

  /* Homepage headings */
  --font-size-heading-home: clamp(
    2.25rem,
    4vw,
    3.125rem
  ); /* max. 50px */

  --font-size-heading-section: clamp(
    2rem,
    3.6vw,
    2.8125rem
  ); /* max. 45px */

  --font-size-heading-about: clamp(
    2.5rem,
    5vw,
    3.75rem
  ); /* max. 60px */

  /* Heading line heights */
  --line-height-heading: 1.15;
  --line-height-heading-large: 1.1;


  /* ==================================================
     Spacing
  ================================================== */

  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-120: 7.5rem;


  /* ==================================================
     Layout
  ================================================== */

  /* Container widths */
  --container-max-width: 1200px;
  --container-narrow-width: 760px;
  --container-wide-width: 1280px;

  /* Inner content widths */
  --content-width: 1000px;
  --text-width: 760px;

  /* Horizontal page spacing */
  --container-padding: var(--space-24);

  /* Vertical section spacing */
  --section-padding-desktop: var(--space-80);
  --section-padding-tablet: var(--space-64);
  --section-padding-mobile: var(--space-40);


  /* ==================================================
     Radius
  ================================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;


  /* ==================================================
     Shadows
  ================================================== */

  --shadow-sm: 0 4px 12px rgba(23, 74, 114, 0.08);
  --shadow-md: 0 8px 24px rgba(23, 74, 114, 0.12);


  /* ==================================================
     Transitions
  ================================================== */

  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;


  /* ==================================================
     Breakpoints
  ================================================== */

  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
}