:root {
  /* =========================
   * Transitions
   * ========================= */
  --transition-fast: 0.2s ease;
  --transition-std: 0.3s ease-in-out;
  --transition-long: 0.5s ease;
  --transition-long-i: 0.5s ease-in;

  /* =========================
   * Typografie
   * ========================= */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --font-size-base: 16px;
  --line-height-base: 1.5;
  --line-height-xl: 1.75rem;

  /* Font-Sizes (Scale) */
  --text-4xs: 0.4rem;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  /* --text-lg: 1.125rem;*/
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2.25rem;
  --text-5xl: 2.5rem;

  /* Font-Weights */
  --font-weight-base: 400;
  --font-weight-lg: 500;
  --font-weight-xl: 600;
  --font-weight-2xl: 700;

  /* =========================
   * Spacing & Layout
   * ========================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;

  --max-width-std: 36rem;
  --max-width-lg: 72rem;

  --nav-height: 3.75rem;

  /* =========================
   * Radius
   * ========================= */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;
  --radius-2xl: 2rem;
  --radius-3xl: 2.75rem;

  /* =========================
   * Scale / Hover
   * ========================= */
  --scale-lg: scale(1.05);
  --scale-btn: scale(0.97);

  /* =========================
   * Shadows
   * ========================= */
  --shadow-std: 0 3px 6px -1px hsla(0, 0%, 0%, 0.1),
    0 1px 4px -2px hsla(0, 0%, 0%, 0.1);

  --shadow-hover: 0 8px 15px -3px hsla(0, 0%, 0%, 0.1),
    0 2px 6px -4px hsla(0, 0%, 0%, 0.1);

  --shadow-nav-desktop: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1),
    0 4px 6px -4px hsla(0, 0%, 0%, 0.1);

  /* =========================
   * Farben (Basis / semantisch)
   * ========================= */
  --color-bg: hsla(252, 21.7%, 95.5%, 1);

  --color-title: hsla(221, 39%, 11%, 1);
  --color-title-hover: hsla(224, 71%, 4%, 1);

  --color-text: hsla(217, 19%, 27%, 1);
  --color-text-bg: hsla(249, 13.7%, 90%, 1);
  --color-text-bg-inset-shadow: inset 0 0 2px hsla(249, 14.3%, 90.4%, 1);

  --color-error: hsla(0, 100%, 40%, 1);

  /* Links / Brand */
  --color-link: hsla(221, 83%, 53%, 1);
  --color-brand: hsla(355, 72%, 28%, 1);
  --color-brand-hover: hsla(355, 72%, 33%, 1);

  /* Komponenten-spezifisch */
  --color-button: hsla(211.2, 100%, 49.8%, 1);
  --color-button-bg: hsla(249, 18%, 92.4%, 1);
  --color-button-bg-hover: hsla(249, 18%, 92%, 1);
  --color-text-bg-inset-shadow: inset 0 0 2px hsla(249, 14.9%, 90.8%, 1);

  --color-business-card-bg: hsla(0, 0%, 99%, 1);
  --color-businesscard: hsla(221, 39%, 11%, 1);

  --icon-button-hover: hsla(220, 14%, 96%, 0.2);

  --tile-grid-arrow: hsla(180, 100%, 99.8%, 1);

  /* =========================
   * Glass-Effect
   * ========================= */
  --glass-bg: hsla(0, 0%, 84%, 0.7);
  --glass-border-color: hsla(0, 0%, 100%, 0.2);
  --glass-border-width: 1px;
  --glass-blur: blur(16px);

  --noise-opacity: 0.01;
  --noise-bg-img: url("/assets/resources/images/ui/noise.png");

  /* =========================
   * Footer
   * ========================= */
  --footer-bg: hsla(252, 21.7%, 90.5%, 1);
  --footer-text: hsla(215, 14%, 34%, 1);
  --footer-text-hover: hsla(217, 19%, 27%, 1);

  /* =========================
   * Nav Mobile
   * ========================= */
  --nav-mobile-pager-item-height: 2.2rem;
  --nav-mobile-pager-visible: 3; /* 3,5,7 */
  --nav-mobile-pager-pad-items: 1; /* visible=5 => 2 | visible=3 => 1 | visible=7 => 3 */

  /* =========================
   * tile
   * ========================= */
  --tile-min-height: 16rem;

  /* =========================
   * Business-Card
   * ========================= */
  --business-card-max-width: 360px;
  --business-card-aspect-ratio: 85 / 55;
  --business-card-logo-width: 4.5rem;

  /* =========================
   * Breakpoints (optional)
   * ========================= 
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px; */
}

/* =========================
 * Dark Mode
 * ========================= */
:root.dark {
  /* Basis */
  --color-bg: hsla(240, 3.45%, 11.37%, 1);

  /* Text */
  --color-title: hsla(180, 100%, 99.8%, 1);
  --color-title-hover: hsla(220, 14%, 96%, 1);
  --color-text: hsla(240, 4.4%, 84.3%, 1);
  --color-text-bg: hsla(240, 3.3%, 17.8%, 1);

  /* Buttons / Brand */
  --color-button: hsla(210, 99.2%, 51.8%, 1);
  --color-button-bg: hsla(240, 3.9%, 20%, 1);
  --color-button-bg-hover: hsla(240, 3.9%, 23%, 1);
  --color-text-bg-inset-shadow: inset 0 0 2px hsla(240, 3.3%, 17.8%, 1);

  --color-brand: hsla(355, 72%, 43%, 1);
  --color-brand-hover: hsla(355, 72%, 48%, 1);

  --icon-button-hover: hsla(0, 0%, 100%, 0.06);

  /* Footer Dark */
  --footer-bg: hsla(240, 3.45%, 6.37%, 1);
  --footer-text: hsla(0, 0%, 64%, 1);
  --footer-text-hover: hsla(0, 0%, 83%, 1);

  /* Glass Dark */
  --glass-bg: hsla(0, 0%, 7.84%, 0.7);
  --glass-border-color: hsla(0, 0%, 100%, 0.1);
}