/* ===============================
   Design Tokens & Farbvariablen
   =============================== */

/*
  Global proportional scale (single source of truth):
  html font-size drives 1rem. Typography, spacing and layout tokens in rem
  scale together. No upper clamp — growth on ultrawide viewports is intentional.
*/
html {
  font-size: max(16px, 0.9vw);
}

:root {
  /* Navigation tokens */
  --nav-bg: #fff;
  --nav-link-color: #DF291D;
  --nav-submenu-bg: #fff;
  --nav-submenu-hover: #DF291D;

  /* Brand colors */
  --color-primary: #DF291D;
  --color-primary-rgb: 223 41 29;
  --color-primary-alt: #b4251d;
  --color-primary-alt-rgb: 180 37 29;
  --color-secondary: #ECECEC;
  --color-secondary-rgb: 236 236 236;
  --color-secondary-alt: #c4c4c4;
  --color-secondary-alt-rgb: 196 196 196;
  --color-tertiary: #231F20;
  --color-tertiary-rgb: 35 31 32;

  /* Neutral channels */
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
  --color-black: #000;
  --color-black-rgb: 0 0 0;

  /* Semantic colors */
  --color-bg: var(--color-white);
  --color-text: #231F20;
  --color-text-alt: #ffc2bf;

  /* Interaction */
  --color-form-focus-ring: rgb(var(--color-primary-alt-rgb) / 0.16);

  /* Motion */
  --transition-default: 0.4s;
  --transition-fast: 0.3s;

  /* Fonts */
  --font-primary: "Outfit", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;

  /* Type scale */
  --fs-h1: 3.5rem;
  --fs-h2: 2.5rem;
  --fs-h3: 2rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h6: 0.85rem;
  --fs-body: 1rem;

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;

  /* Radius and icon sizes */
  --radius-sm: 0.5rem;
  --radius-pill: 3rem;
  --icon-size-sm: 1.5rem;
  /* Layout helpers */
  --layout-flex-gap:5vw; /* gap used for .is-layout-flex / layout blocks */

  /* Layout */
  --gutter: 12rem;
  --container-max: 90rem;
  --content-max: 75rem;

  /* Layering */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-base: 1;
  --z-content: 2;
  --z-ui: 10;
  --z-nav-header: 1001;
  --z-nav-logo: 1002;
  --z-nav-wrapper: 990;
  --z-nav-dropdown: 1005;
  --z-nav-mobile: 980;
  --z-lightbox: 999999;

}


@media (max-width: 1499.98px) {
  :root {
    --gutter: 8rem;
  }
}

/* Responsives Gutter über :root definieren */
@media (max-width: 1199.98px) {
  :root {
    --gutter: 4rem;
    
    /* Type scale */
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1rem;

}
}

@media (max-width: 767.98px) {
  html {
    font-size: 16px;
  }

  :root {
    --gutter: 2rem;
    --layout-flex-gap:2rem;
  }
}