/**
 * https://davidhellmann.com/blog/development/sass-breakpoint-mixin
 */
:root {
  /**
   * color
   */
  --color-white: #FFFFFF;
  --color-gray: #707070;
  --color-black: #5A5A5A;
  --color-red: #FF4558;
  --color-orange: #FF7D2A;
  --color-blue: #5C7AFF;
  --color-blue-light: #84D1F5;
  --color-logo-red: #FF585F;
  --color-logo-blue: #93D6F6;
  --color-background: var(--color-white);
  --color-on-background: var(--color-black);
  --color-on-background-flexible: var(--color-gray);
  --color-background-alt: var(--color-black);
  --color-on-background-alt: var(--color-white);
  --color-text-darkgray: #2c2c2c;
/**
 * neue Farben
 **/
  --color-blue-bg: #BDDBFF;
  --color-neongruen: #D2F982;
  --color-antrazit: #2C2C2C;
  --color-on-footer: var(--color-antrazit);
  /**
   * list
   */
  --list-offer-item-color: transparent;
  /**
   * accordion
   */
  --accordion-icon-border: 2px;
  --accordion-icon-color: var(--color-on-background-alt);
  --accordion-icon-width: 0.75rem;
  --accordion-icon-height: var(--accordion-icon-width);
  --accordion-icon-translate-y: -50%;
  /**
   * sections
   */
  --section-padding-x: 4rem;
  --section-padding-y: 10rem;
  --section-margin-y: 0rem;
  --container-width: 100%;
  /**
   * z-index
   */
  --z-navigation: 200;
  --z-navigation-local: 190;
  --z-back-to-top: 180;
  --z-header: 20;
  --z-above-content: 10;
  /**
   * text
   */
  --font-size-default: 18px;
  --font-size-medium: 18px;
  --font-size-small: 18px;
  --font-size-extra-small: 14.5px;
  --font-family-light: "Didot-Light"; /* "Calibri-Light"; */
  --font-family-bold: "Didot-Bold"; /* "Calibri-Bold"; */
  --font-family-bold-italic: "Calibri-Bold-Italic";
  --text-line-height-default: 1.45;
  --text-line-height-big: 1.55;
  --text-line-height-small: 1.25;
  --font-size-h1: 1.8rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1rem;
  --paragraph-mb: 1.125rem;
  --headline-line-before-h: 4px;
  /**
   * blur
   */
  --blur-default: 12px;
  /**
   * border
   */
  --border-radius-default: 15px;
  --border-radius-small: 10px;
  --border-radius-big: 30px;
  /**
   * buttons
   */
  --button-row-horizontal-gap: 1rem;
  --button-row-vertical-gap: 1.5rem;
  --button-border-radius: var(--border-radius-big);
  --button-font-size: var(--font-size-small);
  --button-hover-background: var(--color-on-background-light);
  --section-cta-height: 20vh;
  --btn-color-primary-outline: #84D7AB;
  --btn-color-primary-outline-text: var(--color-black);
  --btn-color-secondary-background: var(--color-tertiary);
  --btn-color-secondary-text: var(--color-white);
  --btn-color-secondary-hover-text: var(--color-black);
  --btn-color-secondary-outline: var(--color-tertiary);
  --btn-color-secondary-outline-text: var(--color-black);
  --btn-color-tag-outline: var(--color-secondary);
  --btn-color-tag-text: var(--color-secondary);
  --btn-color-tag-hover-text: var(--color-black);
  /**
   * transition
   */
  --transition-time-default: 0.15s;
  --transition-time-slow: 0.5s;
  --transition-time-fast: 0.10s;
  --transition-default: var(--transition-time-default) ease;
  --transition-slow: var(--transition-time-slow) ease;
  --transition-fast: var(--transition-time-fast) ease;
  /**
   * navigation
   */
  --navigation-height: 80px;
  --navigation-space-around-y: 2.5rem;
  --navgiation-calculated-height: calc(calc(var(--navigation-space-around-y) * 2) + var(--navigation-height));
  --navigation-font-size: 1.65rem;
  --navigation-line-height: 1;
  --navigation-grid-gap: 0.75rem;
  --navigation-grid-padding: 1rem;
  --navigation-panel-w: 100vw;
  --navigation-panel-px: 1.5rem;
  --navigation-label-px: 1.85rem;
  --navigation-links-wrapper-font-size: 0.9rem;
  --navigation-links-section-gap-x: 2rem;
  --navigation-links-section-gap-y: 0;
  --local-nav-pt: 4.5rem;
  /**
   * header
   */
  --heroX: 0.5;
  /* TODO: Define scale factor by script. Should be higher if mouse is on the right and lower if mouse is on the left */
  --hero-scale-factor-b: 9;
  --hero-aspect-w: 1520;
  --hero-aspect-h: 472; 
/*  --hero-aspect-h: 272;*/
  /**
   * dropdown
   */
  --dropdown-background-color: var(--color-white);
  --dropdown-border-radius: var(--border-radius-small);
  --dropdown-border-color: var(--color-white);
  --dropdown-icon: url("/images/icon-dropdown.svg");
  --dropdown-label-font-size: var(--font-size-default);
  --dropdown-menu-min-w: 8rem;
  --dropdown-item-padding: 0.1rem;
  --dropdown-item-gap: 0.15rem;
  --dropdown-item-active-indicator-width: 0.45rem;
  --dropdown-item-active-indicator-height: 0.75rem;
  --dropdown-item-icon-gap: 0.5rem;
  --dropdown-item-font-size: var(--font-size-default);
  /**
   * select
   */
  --select-field-p: 0.45rem;
  --select-indicator-w: 0.65rem;
  --select-border-radius: 0px;
  --select-bg: hotpink;
  --select-color: var(--color-black);
  --select-indicator-color-filter: invert(0);
  --select-input-font: var(--font-family-light);
  --select-border-color: transparent;
  /**
   * accordion
   */
  --accordion-label-py: 0;
  --accordion-label-icon-transform-y: calc(1.5rem + 0.5em + 0px);
  --accordion-panel-py: 0;
  --accordion-open-indicator-color: var(--color-white);
  --accordion-open-label-color: inherit;
  --accordion-open-label-font-family: var(--font-family-light);
  /**
   * form
   */
  --form-group-gap: 1.275rem;
  --form-item-w: 100%;
  --form-input-group-col-w: 100%;
  --form-input-pt: 1rem;
  --form-input-pe: 1rem;
  --form-input-pb: 0.5rem;
  --form-input-ps: 1rem;
  --form-input-padding: var(--form-input-pt) var(--form-input-pe) var(--form-input-pb) var(--form-input-ps);
  --form-checkbox-dimensions: 22px;
  --form-checkbox-group-col-w: 33%;
  --form-radio-group-col-w: 50%;
  --form-input-background: var(--color-background-alt-4);
  --form-label-font-size: var(--font-size-default);
  --form-label-active-font-size: var(--font-size-extra-small);
  --form-label-checked-color: var(--color-secondary);
  --form-input-label-color: var(--color-on-background-flexible);
  --form-input-checked-color: var(--color-secondary);
  --form-input-border-color: var(--color-gray-medium);
  --form-input-border-bottom-color: var(--form-input-border-color);
  --search-form-border-radius: var(--border-radius-default, 2.5rem);
  /**
   * team filter
   */
  --team-filter-headline-font-size: 1rem;
  --team-filter-button-grid-width: 280px;
  --team-filter-label-color: var(--color-white);
}
@media (min-width: 576px) {
  :root {
    --section-padding-x: 1.5rem;
  }
}
@media (min-width: 768px) {
  :root {
    --font-size-h1: 2.15rem;
  }
}
@media (min-width: 992px) {
  :root {
    --font-size-default: 22px;
    --font-size-medium: 20px;
    --font-size-h1: 3.25rem;
    --font-size-h2: 2.25rem;
  }
}