@charset "UTF-8";
/*------------------------------------*\
 * Global Variables
 * 
 * 1. Colors
 *    ─ Purpose: Defines the color variables used throughout the project.
 * 
 * 2. Fonts
 *    ─ Purpose: Sets the font families, line heights, and gaps.
 * 
 * 3. Layout
 *    ─ Purpose: Sets the breakpoints for various screen sizes.
 * 
 * 4. Root Import
 *    ─ Purpose: Imports root-level custom properties.
 * 
 * 5. Spaces
 *    ─ Purpose: Sets the space variables for larger layout elements.
 * 
 * 6. Others
 *    ─ Purpose: Miscellaneous variables like transitions, borders
\*------------------------------------*/
/*------------------------------------*/
/* NOTE - Not from FIGMA */
/*------------------------------------*/
:root {
  --transition: all 300ms ease-in-out;
  --transition-fast: all 100ms ease-in-out;
  --layout-screen: var(--layout-wrapper);
  --layout-desktop: 1024px;
  --layout-tablet: 768px;
  --layout-mobile: 520px;
  --inner-margin: var(--layout-outergap);
}
@media only screen and (min-width: 1464px) {
  :root {
    --inner-margin: calc((100vw - 1400px) / 2);
  }
}

/*------------------------------------*/
/* COLLECTION - 🌟 Primitives */
/*------------------------------------*/
:root {
  /* colors */
  --color-blue-100: rgb(220, 235, 233);
  --color-blue-200: rgb(184, 215, 211);
  --color-blue-300: rgb(141, 187, 184);
  --color-blue-400: rgb(101, 156, 153);
  --color-blue-50: rgb(244, 249, 248);
  --color-blue-500: rgb(75, 129, 127);
  --color-blue-600: rgb(58, 103, 102);
  --color-blue-700: rgb(47, 79, 79);
  --color-blue-800: rgb(43, 68, 68);
  --color-blue-900: rgb(39, 58, 58);
  --color-blue-950: rgb(18, 33, 33);
  --color-dark-blue-100: rgb(205, 228, 253);
  --color-dark-blue-200: rgb(145, 190, 254);
  --color-dark-blue-300: rgb(83, 146, 253);
  --color-dark-blue-400: rgb(28, 99, 253);
  --color-dark-blue-50: rgb(235, 245, 255);
  --color-dark-blue-500: rgb(2, 60, 217);
  --color-dark-blue-600: rgb(2, 35, 156);
  --color-dark-blue-700: rgb(1, 17, 96);
  --color-dark-blue-800: rgb(1, 15, 66);
  --color-dark-blue-900: rgb(0, 8, 30);
  --color-dark-blue-950: rgb(0, 5, 15);
  --color-green-100: rgb(217, 242, 227);
  --color-green-200: rgb(182, 228, 204);
  --color-green-300: rgb(134, 207, 173);
  --color-green-400: rgb(101, 188, 150);
  --color-green-50: rgb(239, 250, 244);
  --color-green-500: rgb(49, 152, 111);
  --color-green-600: rgb(33, 122, 88);
  --color-green-700: rgb(27, 97, 72);
  --color-green-800: rgb(23, 78, 58);
  --color-green-900: rgb(20, 64, 49);
  --color-green-950: rgb(10, 36, 28);
  --color-orange-100: rgb(254, 234, 214);
  --color-orange-200: rgb(253, 210, 171);
  --color-orange-300: rgb(251, 177, 118);
  --color-orange-400: rgb(248, 132, 59);
  --color-orange-50: rgb(255, 246, 237);
  --color-orange-500: rgb(239, 111, 42);
  --color-orange-600: rgb(231, 75, 15);
  --color-orange-700: rgb(191, 55, 15);
  --color-orange-800: rgb(152, 45, 20);
  --color-orange-900: rgb(122, 39, 20);
  --color-orange-950: rgb(66, 17, 8);
  --color-taas-blue-100: rgb(200, 231, 254);
  --color-taas-blue-200: rgb(150, 208, 254);
  --color-taas-blue-300: rgb(94, 184, 253);
  --color-taas-blue-400: rgb(43, 162, 252);
  --color-taas-blue-50: rgb(230, 244, 255);
  --color-taas-blue-500: rgb(3, 135, 237);
  --color-taas-blue-600: rgb(1, 107, 186);
  --color-taas-blue-700: rgb(2, 75, 131);
  --color-taas-blue-800: rgb(1, 45, 78);
  --color-taas-blue-900: rgb(1, 24, 40);
  --color-taas-blue-950: rgb(0, 12, 20);
  /* numbers */
  --space-100: 2px;
  --space-200: 4px;
  --space-300: 8px;
  --space-400: 12px;
  --space-500: 16px;
  --space-600: 20px;
  --space-700: 32px;
  --space-800: 44px;
  --space-900: 64px;
}

/*------------------------------------*/
/* COLLECTION - 🔗 Aliases */
/*------------------------------------*/
:root {
  /* colors */
  --theme-accent-accent: var(--color-orange-500);
  --theme-accent-accent-dark: var(--color-orange-600);
  --theme-accent-accent-darker: var(--color-orange-800);
  --theme-accent-accent-light: var(--color-orange-400);
  --theme-accent-accent-lighter: var(--color-orange-200);
  --theme-accent-accent-lightest: var(--color-orange-50);
  --theme-error-error: var(--tailwind-rose-600);
  --theme-error-error-dark: var(--tailwind-rose-700);
  --theme-error-error-darker: var(--tailwind-rose-800);
  --theme-error-error-light: var(--tailwind-rose-400);
  --theme-error-error-lighter: var(--tailwind-rose-200);
  --theme-error-error-lightest: var(--tailwind-rose-50);
  --theme-neutral-black: var(--tailwind-black);
  --theme-neutral-neutral: var(--tailwind-zinc-400);
  --theme-neutral-neutral-dark: var(--tailwind-zinc-600);
  --theme-neutral-neutral-darker: var(--tailwind-zinc-800);
  --theme-neutral-neutral-darkest: var(--tailwind-zinc-950);
  --theme-neutral-neutral-light: var(--tailwind-zinc-300);
  --theme-neutral-neutral-lighter: var(--tailwind-zinc-100);
  --theme-neutral-neutral-lightest: var(--tailwind-zinc-50);
  --theme-neutral-white: var(--tailwind-white);
  --theme-notice-notice: var(--tailwind-sky-500);
  --theme-notice-notice-dark: var(--tailwind-sky-600);
  --theme-notice-notice-darker: var(--tailwind-sky-700);
  --theme-notice-notice-light: var(--tailwind-sky-400);
  --theme-notice-notice-lighter: var(--tailwind-sky-200);
  --theme-notice-notice-lightest: var(--tailwind-sky-50);
  --theme-primary-primary: var(--color-taas-blue-700);
  --theme-primary-primary-dark: var(--color-taas-blue-800);
  --theme-primary-primary-darker: var(--color-taas-blue-900);
  --theme-primary-primary-light: var(--color-taas-blue-600);
  --theme-primary-primary-lighter: var(--color-taas-blue-500);
  --theme-primary-primary-lightest: var(--color-taas-blue-50);
  --theme-secondary-secondary: var(--tailwind-blue-500);
  --theme-secondary-secondary-dark: var(--tailwind-blue-600);
  --theme-secondary-secondary-darker: var(--tailwind-blue-700);
  --theme-secondary-secondary-light: var(--tailwind-blue-400);
  --theme-secondary-secondary-lighter: var(--tailwind-blue-300);
  --theme-secondary-secondary-lightest: var(--tailwind-blue-50);
  --theme-success-success: var(--tailwind-green-500);
  --theme-success-success-dark: var(--tailwind-green-600);
  --theme-success-success-darker: var(--tailwind-green-700);
  --theme-success-success-light: var(--tailwind-green-400);
  --theme-success-success-lighter: var(--tailwind-green-200);
  --theme-success-success-lightest: var(--tailwind-green-50);
  --theme-warning-warning: var(--tailwind-orange-500);
  --theme-warning-warning-dark: var(--tailwind-orange-600);
  --theme-warning-warning-darker: var(--tailwind-orange-700);
  --theme-warning-warning-light: var(--tailwind-orange-400);
  --theme-warning-warning-lighter: var(--tailwind-orange-200);
  --theme-warning-warning-lightest: var(--tailwind-orange-50);
  --colors-few-left-stock: #f2c037;
  --colors-gray-dark: #888888;
  --colors-gray-light: #f1f1f1;
  --colors-green-dark: #30403b;
  --colors-in-stock: #21ba45;
  --colors-logo-green: #016344;
  --colors-logo-magenta: #bf014d;
  --colors-out-of-stock: #db2828;
  --colors-primary: #369678;
  --colors-primary-dark: #346e5b;
  --colors-primary-light: #5aac92;
  --colors-secondary: #e3e0ca;
  --colors-secondary-light: #f8f7ec;
  --colors-text: #000000;
  --colors-text-white: #ffffff;
  --layout-column-gap: 20px;
  --layout-outer-gap: 240px;
  --layout-inner: 1200px;
  --layout-screen: 1680px;
  --space-extrasmall: 20px;
  --space-small: 30px;
  --space-medium: 50px;
  --space-large: 80px;
  --space-extralarge: 120px;
  --typography-linegap: 20px;
  --typography-regular: 400px;
  --typography-bold: 600px;
  --typography-font-size-h5: 14px;
  --typography-font-size-h6: 14px;
  --typography-font-size-smallertext: 14px;
  --typography-font-size-copytext: 16px;
  --typography-font-size-h4: 16px;
  --typography-font-size-h3: 25px;
  --typography-font-size-h1: 35px;
  --typography-font-size-h2: 35px;
  /* string */
  --typography-font: "Poppins";
  /* numbers */
  --radius-2xs: var(--space-100);
  --radius-xs: var(--space-200);
  --radius-sm: var(--space-300);
  --radius-md: var(--space-400);
  --radius-lg: var(--space-500);
  --radius-xl: var(--space-600);
  --radius-2xl: var(--space-700);
  --radius-3xl: var(--space-800);
  --radius-4xl: var(--space-900);
  --space-2xs: var(--space-100);
  --space-xs: var(--space-200);
  --space-sm: var(--space-300);
  --space-md: var(--space-400);
  --space-lg: var(--space-500);
  --space-xl: var(--space-600);
  --space-2xl: var(--space-700);
  --space-3xl: var(--space-800);
  --space-4xl: var(--space-900);
}

/*------------------------------------*/
/* COLLECTION - 🗺️ Responsive Tokens */
/*------------------------------------*/
:root {
  /* numbers */
  --box-padding-small: var(--space-lg);
  --box-padding-medium: var(--space-xl);
  --box-padding-large: var(--space-3xl);
  --components-abstand-extrasmall: 16px;
  --components-abstand-small: 32px;
  --components-abstand-medium: 64px;
  --components-abstand-large: 96px;
  --components-abstand-extralarge: 148px;
  --components-button-padding-y: var(--space-xl);
  --components-button-padding-x: var(--space-3xl);
  --components-input-radius: var(--radius-small);
  --components-input-font-size: 16px;
  --components-input-padding-y: 16px;
  --components-input-padding-x: 18px;
  --font-family-body: "Montserrat";
  --font-family-headings: "Montserrat";
  --font-default-lineheight: 1.5;
  --font-body-lineheight: 1.8;
  --font-default-linegap: 20px;
  --font-line-height-2xs: 16.5px;
  --font-line-height-xs: 19.5px;
  --font-line-height-sm: 22.5px;
  --font-line-height-md: 25.5px;
  --font-line-height-lg: 27px;
  --font-line-height-xl: 31.5px;
  --font-line-height-2xl: 39px;
  --font-line-height-3xl: 47.599998474121094px;
  --font-linegap-subline-h1: var(--space-xs);
  --font-linegap-subline-h2: var(--space-xs);
  --font-size-2xs: 11px;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-md: 17px;
  --font-size-lg: 18px;
  --font-size-xl: 21px;
  --font-size-2xl: 26px;
  --font-size-3xl: 34px;
  --font-weight-regular: 500;
  --font-weight-bold: 600;
  --layout-wrapper: 1120px;
  --layout-grid-columns: 4px;
  --layout-grid-gutter: var(--space-xl);
  --layout-outergap: var(--space-xl);
  --layout-native-ui-height-bottom: 52px;
  --layout-native-ui-height-top: 137px;
  --layout-window-width: 390px;
  --layout-window-height: 844px;
  --radius-small: var(--radius-xs);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);
  --radius-rounded: 1000px;
  /* desktop */
}
@media only screen and (min-width: 768px) {
  :root {
    /* numbers */
    --box-padding-small: var(--space-xl);
    --box-padding-medium: var(--space-2xl);
    --box-padding-large: var(--space-4xl);
    --components-abstand-extrasmall: 20px;
    --components-abstand-medium: 80px;
    --components-abstand-small: 80px;
    --components-abstand-large: 160px;
    --components-abstand-extralarge: 200px;
    --components-button-padding-y: var(--space-xl);
    --components-button-padding-x: var(--space-4xl);
    --components-input-radius: var(--radius-small);
    --components-input-font-size: 16px;
    --components-input-padding-y: 18px;
    --components-input-padding-x: 20px;
    --font-family-body: "Montserrat";
    --font-family-headings: "Montserrat";
    --font-default-lineheight: 1.5;
    --font-body-lineheight: 1.8;
    --font-default-linegap: 20px;
    --font-line-height-2xs: 18px;
    --font-line-height-xs: 21px;
    --font-line-height-sm: 24px;
    --font-line-height-md: 27px;
    --font-line-height-lg: 30px;
    --font-line-height-xl: 36px;
    --font-line-height-2xl: 48px;
    --font-line-height-3xl: 60px;
    --font-linegap-subline-h1: var(--space-xs);
    --font-linegap-subline-h2: var(--space-xs);
    --font-size-2xs: 12px;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-weight-regular: 500;
    --font-weight-bold: 600;
    --layout-wrapper: 1120px;
    --layout-grid-columns: 12px;
    --layout-grid-gutter: var(--space-xl);
    --layout-outergap: var(--space-2xl);
    --layout-native-ui-height-bottom: 0px;
    --layout-native-ui-height-top: 136px;
    --layout-window-height: 982px;
    --layout-window-width: 1512px;
    --radius-small: var(--radius-xs);
    --radius-medium: var(--radius-md);
    --radius-large: var(--radius-lg);
    --radius-rounded: 1000px;
  }
}

/*------------------------------------*/
/* COLLECTION - 🗺️ Theme Tokens */
/*------------------------------------*/
:root {
  /* colors */
  --divider: var(--theme-neutral-neutral-lighter);
  --divider-on-dark: var(--theme-primary-primary);
  --border-accent: var(--theme-accent-accent);
  --border-box: var(--theme-neutral-neutral-lightest);
  --border-error: var(--theme-error-error-lighter);
  --border-input: var(--theme-neutral-neutral-lighter);
  --border-input-error: var(--theme-error-error);
  --border-input-focus: var(--theme-accent-accent);
  --border-input-hover: var(--theme-accent-accent-lighter);
  --border-notice: var(--theme-notice-notice-lighter);
  --border-selector: var(--theme-neutral-neutral);
  --border-selector-active: var(--theme-accent-accent);
  --border-selector-hover: var(--theme-accent-accent);
  --border-selector-press: var(--theme-accent-accent);
  --border-success: var(--theme-success-success-lighter);
  --border-warning: var(--theme-warning-warning-lighter);
  --button-accent-action: var(--theme-accent-accent-darker);
  --button-accent-default: var(--theme-accent-accent);
  --button-accent-disabled: var(--theme-accent-accent-lighter);
  --button-accent-focus: var(--theme-accent-accent-dark);
  --button-accent-hover: var(--theme-accent-accent-dark);
  --button-neutral-action: var(--theme-neutral-neutral-lighter);
  --button-neutral-default: var(--theme-neutral-white);
  --button-neutral-disabled: var(--theme-neutral-neutral);
  --button-neutral-focus: var(--theme-neutral-neutral-lightest);
  --button-neutral-hover: var(--theme-neutral-neutral-lightest);
  --button-primary-action: var(--theme-primary-primary-darker);
  --button-primary-default: var(--theme-primary-primary);
  --button-primary-disabled: var(--theme-primary-primary-lightest);
  --button-primary-focus: var(--theme-primary-primary-dark);
  --button-primary-hover: var(--theme-primary-primary-dark);
  --icon-accent: var(--theme-accent-accent);
  --icon-error: var(--theme-error-error);
  --icon-neutral: var(--text-headings);
  --icon-neutral-on-dark: var(--text-headings-on-dark);
  --icon-neutral-on-disabled: var(--text-on-disabled);
  --icon-notice: var(--theme-notice-notice);
  --icon-primary: var(--theme-primary-primary);
  --icon-secondary: var(--theme-secondary-secondary);
  --icon-success: var(--theme-success-success);
  --icon-warning: var(--theme-warning-warning);
  --surface-accent: var(--theme-accent-accent-lightest);
  --surface-action: var(--theme-accent-accent);
  --surface-action-hover: var(--theme-accent-accent-dark);
  --surface-box: var(--theme-neutral-neutral-lighter);
  --surface-dark: var(--theme-primary-primary-dark);
  --surface-disabled: var(--theme-neutral-neutral);
  --surface-error: var(--theme-error-error-lightest);
  --surface-input: var(--theme-neutral-neutral-lightest);
  --surface-input-hover: var(--theme-accent-accent-lightest);
  --surface-modal: var(--theme-neutral-neutral-lightest);
  --surface-notice: var(--theme-notice-notice-lightest);
  --surface-page: var(--theme-neutral-white);
  --surface-primary: var(--theme-primary-primary);
  --surface-secondary: var(--theme-secondary-secondary);
  --surface-selector: var(--theme-neutral-white);
  --surface-selector-active: var(--theme-accent-accent);
  --surface-selector-hover: var(--theme-accent-accent-lightest);
  --surface-selector-press: var(--theme-accent-accent-lighter);
  --surface-success: var(--theme-success-success-lightest);
  --surface-warning: var(--theme-warning-warning-lightest);
  --text-action: var(--theme-accent-accent);
  --text-action-hover: var(--theme-accent-accent-dark);
  --text-action-press: var(--theme-accent-accent-darker);
  --text-body: var(--theme-neutral-neutral-dark);
  --text-body-on-dark: var(--theme-neutral-neutral-light);
  --text-disabled: var(--theme-neutral-neutral-light);
  --text-error: var(--theme-error-error);
  --text-headings: var(--theme-neutral-black);
  --text-headings-on-dark: var(--theme-neutral-white);
  --text-highlight: var(--theme-accent-accent);
  --text-highlight-on-dark: var(--theme-accent-accent-light);
  --text-notice: var(--theme-notice-notice);
  --text-on-action: var(--theme-neutral-white);
  --text-on-disabled: var(--theme-neutral-neutral-dark);
  --text-placeholder: var(--theme-neutral-neutral);
  --text-success: var(--theme-success-success);
  --text-warning: var(--theme-warning-warning);
}

/*------------------------------------*/
/* NOTE - Tailwind colors */
/*------------------------------------*/
:root {
  --tailwind-zinc-100: #f4f4f5;
  --tailwind-zinc-200: #e4e4e7;
  --tailwind-zinc-300: #d4d4d8;
  --tailwind-zinc-400: #a1a1aa;
  --tailwind-zinc-50: #fafafa;
  --tailwind-zinc-500: #71717a;
  --tailwind-zinc-600: #52525b;
  --tailwind-zinc-700: #3f3f46;
  --tailwind-zinc-800: #27272a;
  --tailwind-zinc-900: #18181b;
  --tailwind-zinc-950: #09090b;
  --tailwind-rose-100: #ffe4e6;
  --tailwind-rose-200: #fecdd3;
  --tailwind-rose-300: #fda4af;
  --tailwind-rose-400: #fb7185;
  --tailwind-rose-50: #fff1f2;
  --tailwind-rose-500: #f43f5e;
  --tailwind-rose-600: #e11d48;
  --tailwind-rose-700: #be123c;
  --tailwind-rose-800: #9f1239;
  --tailwind-rose-900: #881337;
  --tailwind-rose-950: #4c0519;
  --tailwind-sky-100: #e0f2fe;
  --tailwind-sky-200: #bae6fd;
  --tailwind-sky-300: #7dd3fc;
  --tailwind-sky-400: #38bdf8;
  --tailwind-sky-50: #f0f9ff;
  --tailwind-sky-500: #0ea5e9;
  --tailwind-sky-600: #0284c7;
  --tailwind-sky-700: #0369a1;
  --tailwind-sky-800: #075985;
  --tailwind-sky-900: #0c4a6e;
  --tailwind-sky-950: #082f49;
  --tailwind-green-100: #dcfce7;
  --tailwind-green-200: #bbf7d0;
  --tailwind-green-300: #86efac;
  --tailwind-green-400: #4ade80;
  --tailwind-green-50: #f0fdf4;
  --tailwind-green-500: #22c55e;
  --tailwind-green-600: #16a34a;
  --tailwind-green-700: #15803d;
  --tailwind-green-800: #166534;
  --tailwind-green-900: #14532d;
  --tailwind-green-950: #052e16;
  --tailwind-blue-100: #dbeafe;
  --tailwind-blue-200: #bfdbfe;
  --tailwind-blue-300: #93c5fd;
  --tailwind-blue-400: #60a5fa;
  --tailwind-blue-50: #eff6ff;
  --tailwind-blue-500: #3b82f6;
  --tailwind-blue-600: #2563eb;
  --tailwind-blue-700: #1d4ed8;
  --tailwind-blue-800: #1e40af;
  --tailwind-blue-900: #1e3a8a;
  --tailwind-blue-950: #172554;
  --tailwind-orange-100: #ffedd5;
  --tailwind-orange-200: #fed7aa;
  --tailwind-orange-300: #fdba74;
  --tailwind-orange-400: #fb923c;
  --tailwind-orange-50: #fff7ed;
  --tailwind-orange-500: #f97316;
  --tailwind-orange-600: #ea580c;
  --tailwind-orange-700: #c2410c;
  --tailwind-orange-800: #9a3412;
  --tailwind-orange-900: #7c2d12;
  --tailwind-orange-950: #431407;
  --tailwind-white: #fff;
  --tailwind-black: #000;
}

/*------------------------------------*\
 * SASS Mixins and Utilities
 * 
 * Mixins:
 * ───────────
 * 
 * 1. fluid-type
 *    ─ Purpose: Dynamically adjust the font size based on the viewport width (min and max)
 * 
 * 2. pseudo
 *    ─ Purpose: Default properties for pseudo-elements ::before and ::after and display them.
 * 
 * 3. flex
 *    ─ Purpose: Flexbox configurator sets basic styling for flexbox containers and centers the content.
 * 
 * 4. pos
 *    ─ Purpose: Shortcode for absolute positioning of items and centering elements or images.
 * 
 * 5. hide-scrollbar
 *    ─ Purpose: Cross-browser properties to hide the scrollbar.
 * 
 * 6. background-image
 *    ─ Purpose: Center background images.
 * 
 * 7. bp-higher
 *    ─ Purpose: Breakpoint for min-width device width / mobile first.
 * 
 * 8. bp-lower
 *    ─ Purpose: Breakpoint for max-width device width.
\*------------------------------------*/
/*------------------------------------*\
  @mixin fluid-type
  Dynamically adjusts the font size based on the viewport width (min and max).

  @param {Number} $min-font-size - Minimum font size (default: 12px)
  @param {Number} $max-font-size - Maximum font size (default: 21px)
  @param {Number} $lower-range - Lower boundary for the viewport width (default: $mobile) 
  @param {Number} $upper-range - Upper boundary for the viewport width  (default: $screen) 
  @example
  @include fluid-type(14px, 18px, 400px, 1200px);
\*------------------------------------*/
/*------------------------------------*\
  @mixin pseudo
  Adds inner styles to an element.

  @param none

  @example
  @include inner;
\*------------------------------------*/
/*------------------------------------*\
  @mixin pseudo
  Provides default properties for pseudo-elements ::before and ::after.

  @param {String} $display - Display type (default: block)
  @param {String} $pos - Position (default: absolute)
  @param {String} $content - Content (default: empty)
  @example
  @include pseudo(block, absolute, 'content');
\*------------------------------------*/
/*------------------------------------*\
  @mixin flex
  Configures basic styling for flexbox containers.

  @param {String} $variant - Flexbox direction and alignment (default: empty)
  @param {Number} $gap - Gap between flexbox items (default: 0px)
  @example
  @include flex('row', 10px);
\*------------------------------------*/
/*------------------------------------*\
  @mixin pos
  Provides absolute positioning of items.

  @param {String} $variant - Special positioning variants like 'center' or 'cover'
  @example
  @include pos('center');
\*------------------------------------*/
/*------------------------------------*\
  @mixin hide-scrollbar
  Hides the scrollbar across browsers.

  @param none

  @example
  @include hide-scrollbar;
\*------------------------------------*/
/*------------------------------------*\
  @mixin background-image
  Centers background images.

  @param {String} $image - Background image URL
  @example
  @include background-image(url('path/to/image.jpg'));
\*------------------------------------*/
/*------------------------------------*\
  @mixin bp-higher
  Breakpoint for min-width device width (mobile first).

  @param {Number} $variable - Breakpoint value
  @example
  @include bp-higher(768px) { ... }
\*------------------------------------*/
/*------------------------------------*\
  @mixin bp-lower
  Breakpoint for max-width device width.

  @param {Number} $variable - Breakpoint value
  @example
  @include bp-lower(768px) { ... }
\*------------------------------------*/
/*------------------------------------*/
/* SECTION - NEW */
/*------------------------------------*/
/*------------------------------------*/
/* SECTION - Editor */
/*------------------------------------*/
.hamburger {
  padding: 0px;
  display: inline-block;
  cursor: pointer;
  outline: none;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  cursor: pointer;
  float: right;
  margin-right: 0px;
  margin-top: 0px;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}

.hamburger-box {
  width: 35px;
  height: 24px;
  display: block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 35px;
  height: 3px;
  background-color: #000;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * Print Stylesheet fuer Deinewebsite.de
* @version         1.0
* @lastmodified    16.06.2016
*/
@media print {
  /* Inhaltsbreite setzen, Floats und Margins aufheben */
  /* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
  #content, #page {
    width: 100%;
    margin: 0;
    float: none;
  }
  /** Seitenränder einstellen */
  @page {
    margin: 2cm;
  }
  /* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
  /* Das spart Tinte */
  body {
    font: 13pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
    background: #fff !important;
    color: #000;
  }
  h1 {
    font-size: 24pt;
  }
  h2, h3, h4 {
    font-size: 14pt;
    margin-top: 25px;
  }
  /* Alle Seitenumbrüche definieren */
  a {
    page-break-inside: avoid;
  }
  blockquote {
    page-break-inside: avoid;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  img {
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  table, pre {
    page-break-inside: avoid;
  }
  ul, ol, dl {
    page-break-before: avoid;
  }
  /* Linkfarbe und Linkverhalten darstellen */
  a:link, a:visited, a {
    background: transparent;
    color: #520;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
  }
  a {
    page-break-inside: avoid;
  }
  a[href^=http]:after {
    content: " <" attr(href) "> ";
  }
  a:after > img {
    content: "";
  }
  article a[href^="#"]:after {
    content: "";
  }
  a:not(:local-link):after {
    content: " <" attr(href) "> ";
  }
  /**
   * Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
   */
  .entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
  }
  .embed-youtube, .embed-responsive {
    position: absolute;
    height: 0;
    overflow: hidden;
  }
  /* Unnötige Elemente ausblenden für den Druck */
  #header-widgets, nav, aside.mashsb-container,
  .sidebar, .mashshare-top, .mashshare-bottom,
  .content-ads, .make-comment, .author-bio,
  .heading, .related-posts, #decomments-form-add-comment,
  #breadcrumbs, #footer, .post-byline, .meta-single,
  .site-title img, .post-tags, .readability {
    display: none;
  }
  /* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */
  .entry:after {
    content: " Alle Rechte vorbehalten. (c) 2014 - 2016 TechBrain - techbrain.de";
    color: #999 !important;
    font-size: 1em;
    padding-top: 30px;
  }
  #header:before {
    content: " Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.";
    color: #777 !important;
    font-size: 1em;
    padding-top: 30px;
    text-align: center !important;
  }
  /* Wichtige Elemente definieren */
  p, address, li, dt, dd, blockquote {
    font-size: 100%;
  }
  /* Zeichensatz fuer Code Beispiele */
  code, pre {
    font-family: "Courier New", Courier, mono;
  }
  ul, ol {
    list-style: square;
    margin-left: 18pt;
    margin-bottom: 20pt;
  }
  li {
    line-height: 1.6em;
  }
}
/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 0px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption .wp-caption-text,
.gallery-caption {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/*------------------------------------*\
    FONTS.SCSS
    Font Smoothing and Custom Fonts
\*------------------------------------*/
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/montserrat-v26-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-300.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/montserrat-v26-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/montserrat-v26-latin-600.woff2") format("woff2"), url("../fonts/montserrat-v26-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-regular - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v20-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/poppins-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins-v20-latin-regular.woff2") format("woff2"), url("../fonts/poppins-v20-latin-regular.woff") format("woff"), url("../fonts/poppins-v20-latin-regular.ttf") format("truetype"), url("../fonts/poppins-v20-latin-regular.svg#Poppins") format("svg"); /* Legacy iOS */
}
/* poppins-600 - latin */
@font-face {
  font-family: "Poppins SemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/poppins-v20-latin-600.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/poppins-v20-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins-v20-latin-600.woff2") format("woff2"), url("../fonts/poppins-v20-latin-600.woff") format("woff"), url("../fonts/poppins-v20-latin-600.ttf") format("truetype"), url("../fonts/poppins-v20-latin-600.svg#PoppinsSemiBold") format("svg"); /* Legacy iOS */
}
/*------------------------------------*\
	TYPOGRAPHY.scss

	Basic stylings for text elements.

	1. Text (body, p)
	   ─ Purpose: Styles for HTML paragraphs, including padding and margin.

	2. Headings (h1-h6)
	   ─ Note: Utilizes the fluid-type mixin for responsive font sizes.

	3. Links (a)
	   ─ Purpose: Styles for HTML links, including hover and focus states.

	4. Lists (ul)
	   ─ Purpose: Styles for HTML lists, including padding and margin.
\*------------------------------------*/
/*------------------------------------*/
/* SECTION - Text */
/*------------------------------------*/
body {
  font-family: var(--font-family-body);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-default-lineheight);
  color: var(--text-body);
}
@media screen and (max-width: 520px) {
  body {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  body {
    font-size: 16px;
  }
}

p {
  padding: var(--font-default-linegap) 0 0;
  margin: 0px;
  line-height: var(--font-body-lineheight);
}

/*------------------------------------*/
/* SECTION - Headings */
/*------------------------------------*/
h1,
.h1,
.--show-as-h1 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(34px + 6 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h1,
  .h1,
  .--show-as-h1 {
    font-size: 34px;
  }
}
@media screen and (min-width: 1400px) {
  h1,
  .h1,
  .--show-as-h1 {
    font-size: 40px;
  }
}

h2,
.h2,
.--show-as-h2 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(26px + 6 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h2,
  .h2,
  .--show-as-h2 {
    font-size: 26px;
  }
}
@media screen and (min-width: 1400px) {
  h2,
  .h2,
  .--show-as-h2 {
    font-size: 32px;
  }
}

h3,
.h3,
.--show-as-h3 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(21px + 3 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h3,
  .h3,
  .--show-as-h3 {
    font-size: 21px;
  }
}
@media screen and (min-width: 1400px) {
  h3,
  .h3,
  .--show-as-h3 {
    font-size: 24px;
  }
}

h4,
.h4,
.--show-as-h4 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(18px + 2 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h4,
  .h4,
  .--show-as-h4 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1400px) {
  h4,
  .h4,
  .--show-as-h4 {
    font-size: 20px;
  }
}

h5,
.h5,
.--show-as-h5 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(17px + 1 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h5,
  .h5,
  .--show-as-h5 {
    font-size: 17px;
  }
}
@media screen and (min-width: 1400px) {
  h5,
  .h5,
  .--show-as-h5 {
    font-size: 18px;
  }
}

h6,
.h6,
.--show-as-h6 {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h6,
  .h6,
  .--show-as-h6 {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  h6,
  .h6,
  .--show-as-h6 {
    font-size: 16px;
  }
}

/*------------------------------------*/
/* SECTION - Links */
/*------------------------------------*/
a {
  color: var(--Colors-primary, #369678);
  text-decoration: underline;
  text-underline-position: under;
}
a:hover {
  color: var(--Colors-primary, #369678);
}
a:focus, a:hover, a:active {
  outline: 0;
}

/*------------------------------------*/
/* SECTION - Hyphens */
/*------------------------------------*/
@media (max-width: 768px) {
  h1,
  .h1,
  .--show-as-h1,
  h2,
  .h2,
  .--show-as-h2,
  h3,
  .h3,
  .--show-as-h3,
  h4,
  .h4,
  .--show-as-h4,
  h5,
  .h5,
  .--show-as-h5,
  h6,
  .h6,
  .--show-as-h6,
  p,
  a,
  b,
  span {
    hyphens: auto;
  }
}
/*------------------------------------*/
/* SECTION - Lists */
/*------------------------------------*/
.wp-block-group ul,
ul.ul {
  --wv-ul-marker-size: 6px;
  padding-left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}
.wp-block-group ul li,
ul.ul li {
  font-family: var(--font-family-body);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-default-lineheight);
  color: var(--text-body);
  padding-left: calc(var(--wv-ul-marker-size) + 12px);
  position: relative;
  text-align: left;
}
@media screen and (max-width: 520px) {
  .wp-block-group ul li,
  ul.ul li {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  .wp-block-group ul li,
  ul.ul li {
    font-size: 16px;
  }
}
.wp-block-group ul li:before,
ul.ul li:before {
  content: "";
  display: block;
  position: absolute;
  width: var(--wv-ul-marker-size);
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='black' style='fill:black;fill-opacity:1;'/%3E%3C/svg%3E%0A");
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
@media (max-width: 768px) {
  .wp-block-group ul,
  ul.ul {
    --wv-ul-marker-size: 5px;
  }
  .wp-block-group ul li,
  ul.ul li {
    padding-left: calc(var(--wv-ul-marker-size) + 10px);
  }
}

/*------------------------------------*/
/* SECTION - Text styles */
/*------------------------------------*/
.text-highlighted {
  color: var(--text-highlight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins ", sans-serif;
  font-weight: 600;
  line-height: 1.625;
  color: #000000;
  margin: 0px;
  padding: 20px 0px 0px;
  hyphens: auto;
  padding: 0;
}
h1 b,
h1 strong,
h2 b,
h2 strong,
h3 b,
h3 strong,
h4 b,
h4 strong,
h5 b,
h5 strong,
h6 b,
h6 strong {
  position: relative;
  font-weight: inherit;
  display: inline-block;
  z-index: 1;
}
h1 b:before,
h1 strong:before,
h2 b:before,
h2 strong:before,
h3 b:before,
h3 strong:before,
h4 b:before,
h4 strong:before,
h5 b:before,
h5 strong:before,
h6 b:before,
h6 strong:before {
  content: "";
  display: block;
  position: absolute;
  left: -1%;
  top: 54%;
  width: 102%;
  height: 50%;
  background-color: #c9eadf;
  z-index: -1;
}
h1 b:after,
h1 strong:after,
h2 b:after,
h2 strong:after,
h3 b:after,
h3 strong:after,
h4 b:after,
h4 strong:after,
h5 b:after,
h5 strong:after,
h6 b:after,
h6 strong:after {
  content: "";
  display: block;
  position: absolute;
  left: -1%;
  top: 54%;
  width: 0px;
  height: 50%;
  background-color: #84ceb4;
  z-index: -1;
  transition: all 0.5s;
}
h1 b:hover:after,
h1 strong:hover:after,
h2 b:hover:after,
h2 strong:hover:after,
h3 b:hover:after,
h3 strong:hover:after,
h4 b:hover:after,
h4 strong:hover:after,
h5 b:hover:after,
h5 strong:hover:after,
h6 b:hover:after,
h6 strong:hover:after {
  width: 102%;
}

h1 {
  font-size: calc(25px + 10 * (100vw - 520px) / 880);
  line-height: 1.6;
}
@media screen and (max-width: 520px) {
  h1 {
    font-size: 25px;
  }
}
@media screen and (min-width: 1400px) {
  h1 {
    font-size: 35px;
  }
}

h2 {
  font-size: calc(25px + 10 * (100vw - 520px) / 880);
  line-height: 1.1428571429;
}
@media screen and (max-width: 520px) {
  h2 {
    font-size: 25px;
  }
}
@media screen and (min-width: 1400px) {
  h2 {
    font-size: 35px;
  }
}

h3 {
  font-size: calc(20px + 5 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h3 {
    font-size: 20px;
  }
}
@media screen and (min-width: 1400px) {
  h3 {
    font-size: 25px;
  }
}

h4 {
  font-size: calc(16px + 0 * (100vw - 520px) / 880);
  color: #369678;
}
@media screen and (max-width: 520px) {
  h4 {
    font-size: 16px;
  }
}
@media screen and (min-width: 1400px) {
  h4 {
    font-size: 16px;
  }
}

h5 {
  font-size: calc(14px + 0 * (100vw - 520px) / 880);
  color: #888888;
}
@media screen and (max-width: 520px) {
  h5 {
    font-size: 14px;
  }
}
@media screen and (min-width: 1400px) {
  h5 {
    font-size: 14px;
  }
}

h6 {
  font-size: calc(14px + 0 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  h6 {
    font-size: 14px;
  }
}
@media screen and (min-width: 1400px) {
  h6 {
    font-size: 14px;
  }
}

:is(h1, h2, h3, h4, h5, h6) + h5 {
  padding: 0;
}

:is(h1, h2, h3, h4, h5, h6) + h6 {
  padding: 0;
  padding-top: 20px;
}

:is(h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  padding: 0;
  margin-top: 10px;
}

:is(h1, h2, h3, h4, h5, h6) + p {
  padding-top: 20px;
}

p + :is(h1, h2, h3, h4, h5, h6) {
  padding-top: 20px;
}

p {
  padding: 20px 0 0;
  margin: 0px;
}

/*------------------------------------*\
    GLOBALS.SCSS
    Stylings for the whole page and utility and extra classes
\*------------------------------------*/
.acf-block-preview *,
.acf-block-preview *:after,
.acf-block-preview *:before,
body.page *,
body.page *:after,
body.page *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
}

/* clear */
.clear:before,
.clear:after {
  content: " ";
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  *zoom: 1;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

input:focus {
  outline: 0;
}

.text-left,
.alignleft,
.has-text-align-left {
  text-align: left !important;
}

.text-center,
.aligncenter,
.has-text-align-center {
  text-align: center !important;
}

.text-right,
.alignright,
.has-text-align-right {
  text-align: right !important;
}

.blocksatz {
  text-align: justify !important;
}

hr {
  margin: 40px 0;
  border-color: var(--border-box);
}

/*------------------------------------*\
    Formatting
\*------------------------------------*/
.wp-block-image {
  padding-top: var(--font-default-linegap);
}

/*------------------------------------*\
    Spaces
\*------------------------------------*/
.space {
  margin-bottom: var(--components-abstand-medium);
}
.space-extrasmall {
  margin-bottom: var(--components-abstand-extrasmall);
}
.space-small {
  margin-bottom: var(--components-abstand-small);
}
.space-medium {
  margin-bottom: var(--components-abstand-medium);
}
.space-large {
  margin-bottom: var(--components-abstand-large);
}
.space-extralarge {
  margin-bottom: var(--components-abstand-extralarge);
}

/*------------------------------------*\
    Group
\*------------------------------------*/
.wp-block-group.--background {
  background: var(--surface-dark);
  width: 100%;
  max-width: unset;
}
.wp-block-group.--background .wp-block-group__inner-container {
  width: calc(100% - 2 * var(--layout-outergap));
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.wp-block-group.--background .wp-block-group__inner-container > *:is(h1, h2, h3, h4, h5, h6, p, a, ul):not(.button):first-child {
  margin-top: 0;
  padding-top: 0;
}
.wp-block-group.--background h1,
.wp-block-group.--background .h1,
.wp-block-group.--background .--show-as-h1,
.wp-block-group.--background h2,
.wp-block-group.--background .h2,
.wp-block-group.--background .--show-as-h2,
.wp-block-group.--background h3,
.wp-block-group.--background .h3,
.wp-block-group.--background .--show-as-h3,
.wp-block-group.--background h4,
.wp-block-group.--background .h4,
.wp-block-group.--background .--show-as-h4,
.wp-block-group.--background h5,
.wp-block-group.--background .h5,
.wp-block-group.--background .--show-as-h5,
.wp-block-group.--background h6,
.wp-block-group.--background .h6,
.wp-block-group.--background .--show-as-h6 {
  color: var(--text-headings-on-dark);
}
.wp-block-group.--background p,
.wp-block-group.--background li {
  color: var(--text-body-on-dark);
}
.wp-block-group.--background li:before {
  filter: invert(1);
}
.wp-block-group.--margin-top-extrasmall {
  margin-top: var(--components-abstand-extrasmall);
}
.wp-block-group.--margin-top-small {
  margin-top: var(--components-abstand-small);
}
.wp-block-group.--margin-top-medium {
  margin-top: var(--components-abstand-medium);
}
.wp-block-group.--margin-top-large {
  margin-top: var(--components-abstand-large);
}
.wp-block-group.--margin-top-extralarge {
  margin-top: var(--components-abstand-extralarge);
}
.wp-block-group.--margin-bottom-extrasmall {
  margin-bottom: var(--components-abstand-extrasmall);
}
.wp-block-group.--margin-bottom-small {
  margin-bottom: var(--components-abstand-small);
}
.wp-block-group.--margin-bottom-medium {
  margin-bottom: var(--components-abstand-medium);
}
.wp-block-group.--margin-bottom-large {
  margin-bottom: var(--components-abstand-large);
}
.wp-block-group.--margin-bottom-extralarge {
  margin-bottom: var(--components-abstand-extralarge);
}
.wp-block-group.--padding-top-extrasmall {
  padding-top: var(--components-abstand-extrasmall);
}
.wp-block-group.--padding-top-small {
  padding-top: var(--components-abstand-small);
}
.wp-block-group.--padding-top-medium {
  padding-top: var(--components-abstand-medium);
}
.wp-block-group.--padding-top-large {
  padding-top: var(--components-abstand-large);
}
.wp-block-group.--padding-top-extralarge {
  padding-top: var(--components-abstand-extralarge);
}
.wp-block-group.--padding-bottom-extrasmall {
  padding-bottom: var(--components-abstand-extrasmall);
}
.wp-block-group.--padding-bottom-small {
  padding-bottom: var(--components-abstand-small);
}
.wp-block-group.--padding-bottom-medium {
  padding-bottom: var(--components-abstand-medium);
}
.wp-block-group.--padding-bottom-large {
  padding-bottom: var(--components-abstand-large);
}
.wp-block-group.--padding-bottom-extralarge {
  padding-bottom: var(--components-abstand-extralarge);
}

/*------------------------------------*\
    Grid elements
\*------------------------------------*/
.allcont {
  padding: 0px;
  display: block;
}

.inner,
.wp-block-group {
  width: calc(100% - 2 * var(--layout-outergap));
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.wp-block-group .inner.resetInner,
.wp-block-group .wp-block-group {
  width: 100%;
}

.gridrow,
.wp-block-columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  column-gap: var(--layout-grid-gutter);
  row-gap: var(--font-default-linegap);
  flex-wrap: wrap;
  width: 100%;
  margin: 0px auto;
}
.gridrow > .col,
.gridrow .wp-block-column,
.wp-block-columns > .col,
.wp-block-columns .wp-block-column {
  width: 100%;
}

/* reverseCol */
.reverseCol {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* align col */
.align-center,
.are-vertically-aligned-center {
  align-items: center;
}

.is-vertically-aligned-center {
  align-self: center;
}

.wp-block-columns.are-vertically-aligned-top {
  align-items: flex-start;
}

.is-vertically-aligned-top {
  align-self: flex-start;
}

.are-vertically-aligned-bottom {
  align-items: flex-end;
}

.is-vertically-aligned-bottom {
  align-self: flex-end;
}

@media all and (max-width: 768px) {
  /* reverseCol */
  .reverseCol .col + .col,
  .reverseCol .wp-block-column + .wp-block-column {
    margin-top: 10px;
  }
}
.gray-background {
  width: 100%;
  padding: calc(--components-abstand-large - var(--font-default-linegap)) 0px var(--components-abstand-large);
}

/*------------------------------------*\
    Call-To-Action's
\*------------------------------------*/
p.cta-grp {
  width: 100%;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.acf-block-preview a.button,
.acf-block-preview button:not(.hamburger),
.acf-block-preview input[type=submit],
body.page a.button,
body.page button:not(.hamburger),
body.page input[type=submit] {
  all: unset;
  display: inline-block;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  outline: none;
  border: none;
  border-radius: var(--radius-small, 4px);
  transition: var(--transition);
  transition-property: background;
  box-sizing: border-box;
  padding: var(--components-button-padding-y, 20px) var(--components-button-padding-x, 64px);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  background-color: var(--button-primary-default);
  color: var(--text-on-action);
}
@media screen and (max-width: 520px) {
  .acf-block-preview a.button,
  .acf-block-preview button:not(.hamburger),
  .acf-block-preview input[type=submit],
  body.page a.button,
  body.page button:not(.hamburger),
  body.page input[type=submit] {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  .acf-block-preview a.button,
  .acf-block-preview button:not(.hamburger),
  .acf-block-preview input[type=submit],
  body.page a.button,
  body.page button:not(.hamburger),
  body.page input[type=submit] {
    font-size: 16px;
  }
}
.acf-block-preview a.button:hover,
.acf-block-preview button:not(.hamburger):hover,
.acf-block-preview input[type=submit]:hover,
body.page a.button:hover,
body.page button:not(.hamburger):hover,
body.page input[type=submit]:hover {
  background-color: var(--button-primary-hover);
}
.acf-block-preview a.button:focus,
.acf-block-preview button:not(.hamburger):focus,
.acf-block-preview input[type=submit]:focus,
body.page a.button:focus,
body.page button:not(.hamburger):focus,
body.page input[type=submit]:focus {
  transition: none;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
  	var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
  	var(--tw-ring-color);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: white;
  --tw-ring-inset: ;
}
.acf-block-preview a.button:active,
.acf-block-preview button:not(.hamburger):active,
.acf-block-preview input[type=submit]:active,
body.page a.button:active,
body.page button:not(.hamburger):active,
body.page input[type=submit]:active {
  transition: none;
}
.acf-block-preview a.button:disabled,
.acf-block-preview button:not(.hamburger):disabled,
.acf-block-preview input[type=submit]:disabled,
body.page a.button:disabled,
body.page button:not(.hamburger):disabled,
body.page input[type=submit]:disabled {
  background-color: var(--button-primary-disabled);
  color: var(--text-on-disabled);
}
.acf-block-preview a.button.--color-main, .acf-block-preview a.button.--color-primary,
.acf-block-preview button:not(.hamburger).--color-main,
.acf-block-preview button:not(.hamburger).--color-primary,
.acf-block-preview input[type=submit].--color-main,
.acf-block-preview input[type=submit].--color-primary,
body.page a.button.--color-main,
body.page a.button.--color-primary,
body.page button:not(.hamburger).--color-main,
body.page button:not(.hamburger).--color-primary,
body.page input[type=submit].--color-main,
body.page input[type=submit].--color-primary {
  background-color: var(--button-primary-default);
  color: var(--text-on-action);
}
.acf-block-preview a.button.--color-main:hover, .acf-block-preview a.button.--color-main:focus, .acf-block-preview a.button.--color-primary:hover, .acf-block-preview a.button.--color-primary:focus,
.acf-block-preview button:not(.hamburger).--color-main:hover,
.acf-block-preview button:not(.hamburger).--color-main:focus,
.acf-block-preview button:not(.hamburger).--color-primary:hover,
.acf-block-preview button:not(.hamburger).--color-primary:focus,
.acf-block-preview input[type=submit].--color-main:hover,
.acf-block-preview input[type=submit].--color-main:focus,
.acf-block-preview input[type=submit].--color-primary:hover,
.acf-block-preview input[type=submit].--color-primary:focus,
body.page a.button.--color-main:hover,
body.page a.button.--color-main:focus,
body.page a.button.--color-primary:hover,
body.page a.button.--color-primary:focus,
body.page button:not(.hamburger).--color-main:hover,
body.page button:not(.hamburger).--color-main:focus,
body.page button:not(.hamburger).--color-primary:hover,
body.page button:not(.hamburger).--color-primary:focus,
body.page input[type=submit].--color-main:hover,
body.page input[type=submit].--color-main:focus,
body.page input[type=submit].--color-primary:hover,
body.page input[type=submit].--color-primary:focus {
  background-color: var(--button-primary-hover);
}
.acf-block-preview a.button.--color-main:active, .acf-block-preview a.button.--color-primary:active,
.acf-block-preview button:not(.hamburger).--color-main:active,
.acf-block-preview button:not(.hamburger).--color-primary:active,
.acf-block-preview input[type=submit].--color-main:active,
.acf-block-preview input[type=submit].--color-primary:active,
body.page a.button.--color-main:active,
body.page a.button.--color-primary:active,
body.page button:not(.hamburger).--color-main:active,
body.page button:not(.hamburger).--color-primary:active,
body.page input[type=submit].--color-main:active,
body.page input[type=submit].--color-primary:active {
  background-color: var(--button-primary-action);
}
.acf-block-preview a.button.--color-main:disabled, .acf-block-preview a.button.--color-primary:disabled,
.acf-block-preview button:not(.hamburger).--color-main:disabled,
.acf-block-preview button:not(.hamburger).--color-primary:disabled,
.acf-block-preview input[type=submit].--color-main:disabled,
.acf-block-preview input[type=submit].--color-primary:disabled,
body.page a.button.--color-main:disabled,
body.page a.button.--color-primary:disabled,
body.page button:not(.hamburger).--color-main:disabled,
body.page button:not(.hamburger).--color-primary:disabled,
body.page input[type=submit].--color-main:disabled,
body.page input[type=submit].--color-primary:disabled {
  background-color: var(--button-primary-disabled);
}
.acf-block-preview a.button.--color-second, .acf-block-preview a.button.--color-accent,
.acf-block-preview button:not(.hamburger).--color-second,
.acf-block-preview button:not(.hamburger).--color-accent,
.acf-block-preview input[type=submit].--color-second,
.acf-block-preview input[type=submit].--color-accent,
body.page a.button.--color-second,
body.page a.button.--color-accent,
body.page button:not(.hamburger).--color-second,
body.page button:not(.hamburger).--color-accent,
body.page input[type=submit].--color-second,
body.page input[type=submit].--color-accent {
  background-color: var(--button-accent-default);
  color: var(--text-on-action);
}
.acf-block-preview a.button.--color-second:hover, .acf-block-preview a.button.--color-second:focus, .acf-block-preview a.button.--color-accent:hover, .acf-block-preview a.button.--color-accent:focus,
.acf-block-preview button:not(.hamburger).--color-second:hover,
.acf-block-preview button:not(.hamburger).--color-second:focus,
.acf-block-preview button:not(.hamburger).--color-accent:hover,
.acf-block-preview button:not(.hamburger).--color-accent:focus,
.acf-block-preview input[type=submit].--color-second:hover,
.acf-block-preview input[type=submit].--color-second:focus,
.acf-block-preview input[type=submit].--color-accent:hover,
.acf-block-preview input[type=submit].--color-accent:focus,
body.page a.button.--color-second:hover,
body.page a.button.--color-second:focus,
body.page a.button.--color-accent:hover,
body.page a.button.--color-accent:focus,
body.page button:not(.hamburger).--color-second:hover,
body.page button:not(.hamburger).--color-second:focus,
body.page button:not(.hamburger).--color-accent:hover,
body.page button:not(.hamburger).--color-accent:focus,
body.page input[type=submit].--color-second:hover,
body.page input[type=submit].--color-second:focus,
body.page input[type=submit].--color-accent:hover,
body.page input[type=submit].--color-accent:focus {
  background-color: var(--button-accent-hover);
}
.acf-block-preview a.button.--color-second:active, .acf-block-preview a.button.--color-accent:active,
.acf-block-preview button:not(.hamburger).--color-second:active,
.acf-block-preview button:not(.hamburger).--color-accent:active,
.acf-block-preview input[type=submit].--color-second:active,
.acf-block-preview input[type=submit].--color-accent:active,
body.page a.button.--color-second:active,
body.page a.button.--color-accent:active,
body.page button:not(.hamburger).--color-second:active,
body.page button:not(.hamburger).--color-accent:active,
body.page input[type=submit].--color-second:active,
body.page input[type=submit].--color-accent:active {
  background-color: var(--button-accent-action);
}
.acf-block-preview a.button.--color-second:disabled, .acf-block-preview a.button.--color-accent:disabled,
.acf-block-preview button:not(.hamburger).--color-second:disabled,
.acf-block-preview button:not(.hamburger).--color-accent:disabled,
.acf-block-preview input[type=submit].--color-second:disabled,
.acf-block-preview input[type=submit].--color-accent:disabled,
body.page a.button.--color-second:disabled,
body.page a.button.--color-accent:disabled,
body.page button:not(.hamburger).--color-second:disabled,
body.page button:not(.hamburger).--color-accent:disabled,
body.page input[type=submit].--color-second:disabled,
body.page input[type=submit].--color-accent:disabled {
  background-color: var(--button-accent-disabled);
}
.acf-block-preview a.button.--color-white, .acf-block-preview a.button.--color-neutral,
.acf-block-preview button:not(.hamburger).--color-white,
.acf-block-preview button:not(.hamburger).--color-neutral,
.acf-block-preview input[type=submit].--color-white,
.acf-block-preview input[type=submit].--color-neutral,
body.page a.button.--color-white,
body.page a.button.--color-neutral,
body.page button:not(.hamburger).--color-white,
body.page button:not(.hamburger).--color-neutral,
body.page input[type=submit].--color-white,
body.page input[type=submit].--color-neutral {
  background-color: var(--button-neutral-default);
  color: var(--text-headings);
}
.acf-block-preview a.button.--color-white:hover, .acf-block-preview a.button.--color-white:focus, .acf-block-preview a.button.--color-neutral:hover, .acf-block-preview a.button.--color-neutral:focus,
.acf-block-preview button:not(.hamburger).--color-white:hover,
.acf-block-preview button:not(.hamburger).--color-white:focus,
.acf-block-preview button:not(.hamburger).--color-neutral:hover,
.acf-block-preview button:not(.hamburger).--color-neutral:focus,
.acf-block-preview input[type=submit].--color-white:hover,
.acf-block-preview input[type=submit].--color-white:focus,
.acf-block-preview input[type=submit].--color-neutral:hover,
.acf-block-preview input[type=submit].--color-neutral:focus,
body.page a.button.--color-white:hover,
body.page a.button.--color-white:focus,
body.page a.button.--color-neutral:hover,
body.page a.button.--color-neutral:focus,
body.page button:not(.hamburger).--color-white:hover,
body.page button:not(.hamburger).--color-white:focus,
body.page button:not(.hamburger).--color-neutral:hover,
body.page button:not(.hamburger).--color-neutral:focus,
body.page input[type=submit].--color-white:hover,
body.page input[type=submit].--color-white:focus,
body.page input[type=submit].--color-neutral:hover,
body.page input[type=submit].--color-neutral:focus {
  background-color: var(--button-neutral-hover);
}
.acf-block-preview a.button.--color-white:active, .acf-block-preview a.button.--color-neutral:active,
.acf-block-preview button:not(.hamburger).--color-white:active,
.acf-block-preview button:not(.hamburger).--color-neutral:active,
.acf-block-preview input[type=submit].--color-white:active,
.acf-block-preview input[type=submit].--color-neutral:active,
body.page a.button.--color-white:active,
body.page a.button.--color-neutral:active,
body.page button:not(.hamburger).--color-white:active,
body.page button:not(.hamburger).--color-neutral:active,
body.page input[type=submit].--color-white:active,
body.page input[type=submit].--color-neutral:active {
  background-color: var(--button-neutral-action);
}
.acf-block-preview a.button.--color-white:disabled, .acf-block-preview a.button.--color-neutral:disabled,
.acf-block-preview button:not(.hamburger).--color-white:disabled,
.acf-block-preview button:not(.hamburger).--color-neutral:disabled,
.acf-block-preview input[type=submit].--color-white:disabled,
.acf-block-preview input[type=submit].--color-neutral:disabled,
body.page a.button.--color-white:disabled,
body.page a.button.--color-neutral:disabled,
body.page button:not(.hamburger).--color-white:disabled,
body.page button:not(.hamburger).--color-neutral:disabled,
body.page input[type=submit].--color-white:disabled,
body.page input[type=submit].--color-neutral:disabled {
  background-color: var(--button-neutral-disabled);
}
.acf-block-preview a.button.--size-regular,
.acf-block-preview button:not(.hamburger).--size-regular,
.acf-block-preview input[type=submit].--size-regular,
body.page a.button.--size-regular,
body.page button:not(.hamburger).--size-regular,
body.page input[type=submit].--size-regular {
  padding: 20px 60px;
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  .acf-block-preview a.button.--size-regular,
  .acf-block-preview button:not(.hamburger).--size-regular,
  .acf-block-preview input[type=submit].--size-regular,
  body.page a.button.--size-regular,
  body.page button:not(.hamburger).--size-regular,
  body.page input[type=submit].--size-regular {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  .acf-block-preview a.button.--size-regular,
  .acf-block-preview button:not(.hamburger).--size-regular,
  .acf-block-preview input[type=submit].--size-regular,
  body.page a.button.--size-regular,
  body.page button:not(.hamburger).--size-regular,
  body.page input[type=submit].--size-regular {
    font-size: 16px;
  }
}
.acf-block-preview a.button.--size-small,
.acf-block-preview button:not(.hamburger).--size-small,
.acf-block-preview input[type=submit].--size-small,
body.page a.button.--size-small,
body.page button:not(.hamburger).--size-small,
body.page input[type=submit].--size-small {
  padding: 18px 54px;
  font-size: calc(14px + 1 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  .acf-block-preview a.button.--size-small,
  .acf-block-preview button:not(.hamburger).--size-small,
  .acf-block-preview input[type=submit].--size-small,
  body.page a.button.--size-small,
  body.page button:not(.hamburger).--size-small,
  body.page input[type=submit].--size-small {
    font-size: 14px;
  }
}
@media screen and (min-width: 1400px) {
  .acf-block-preview a.button.--size-small,
  .acf-block-preview button:not(.hamburger).--size-small,
  .acf-block-preview input[type=submit].--size-small,
  body.page a.button.--size-small,
  body.page button:not(.hamburger).--size-small,
  body.page input[type=submit].--size-small {
    font-size: 15px;
  }
}
@media (max-width: 520px) {
  .acf-block-preview a.button,
  .acf-block-preview button:not(.hamburger),
  .acf-block-preview input[type=submit],
  body.page a.button,
  body.page button:not(.hamburger),
  body.page input[type=submit] {
    padding: 18px 50px;
    width: 100%;
  }
  .acf-block-preview a.button.--size-regular,
  .acf-block-preview button:not(.hamburger).--size-regular,
  .acf-block-preview input[type=submit].--size-regular,
  body.page a.button.--size-regular,
  body.page button:not(.hamburger).--size-regular,
  body.page input[type=submit].--size-regular {
    padding: 18px 50px;
  }
  .acf-block-preview a.button.--size-small,
  .acf-block-preview button:not(.hamburger).--size-small,
  .acf-block-preview input[type=submit].--size-small,
  body.page a.button.--size-small,
  body.page button:not(.hamburger).--size-small,
  body.page input[type=submit].--size-small {
    padding: 16px 44px;
  }
}

a.button-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  font-weight: var(--font-weight-bold);
  line-height: 100%;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  color: var(--button-accent-default);
}
@media screen and (max-width: 520px) {
  a.button-link {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  a.button-link {
    font-size: 16px;
  }
}
a.button-link .arrow {
  transition: var(--transition);
}
a.button-link:hover, a.button-link:focus {
  color: var(--button-accent-hover);
  gap: var(--space-md);
}
a.button-link:active {
  color: var(--button-accent-action);
}
a.button-link:disabled {
  color: var(--button-accent-disabled);
}
a.button-link.--color-accent {
  color: var(--button-accent-default);
}
a.button-link.--color-accent:hover, a.button-link.--color-accent:focus {
  color: var(--button-accent-hover);
}
a.button-link.--color-accent:active {
  color: var(--button-accent-action);
}
a.button-link.--color-accent:disabled {
  color: var(--button-accent-disabled);
}
a.button-link.--color-neutral {
  color: var(--button-neutral-default);
}
a.button-link.--color-neutral:hover, a.button-link.--color-neutral:focus {
  color: var(--button-neutral-hover);
}
a.button-link.--color-neutral:active {
  color: var(--button-neutral-action);
}
a.button-link.--color-neutral:disabled {
  color: var(--button-neutral-disabled);
}

a.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-body-lineheight);
  text-decoration: none;
  transition: var(--transition);
  color: var(--text-headings);
}
a.icon-link svg {
  width: 18px;
  translate: 0 -0.5px;
}
a.icon-link svg path {
  transition: var(--transition);
}
a.icon-link:hover, a.icon-link:focus {
  color: var(--button-accent-hover);
}
a.icon-link:active {
  color: var(--button-accent-action);
}
a.icon-link:disabled {
  opacity: 50%;
}
a.icon-link.--color-white {
  color: var(--text-body-on-dark);
}
a.icon-link.--color-white svg {
  stroke: var(--text-body-on-dark);
}
a.icon-link.--color-white:hover, a.icon-link.--color-white:focus {
  color: var(--button-accent-hover);
}
a.icon-link.--color-white:hover svg, a.icon-link.--color-white:focus svg {
  stroke: var(--button-accent-hover);
}
a.icon-link.--color-white:active {
  color: var(--button-accent-action);
}
a.icon-link.--color-white:active svg {
  stroke: var(--button-accent-action);
}

/*------------------------------------*\
    MISC
\*------------------------------------*/
::selection {
  background: var(--text-action);
  color: var(--text-on-action);
  text-shadow: none;
}

::-webkit-selection {
  background: var(--text-action);
  color: var(--text-on-action);
  text-shadow: none;
}

::-moz-selection {
  background: var(--text-action);
  color: var(--text-on-action);
  text-shadow: none;
}

/*------------------------------------*/
/* SECTION - Components */
/*------------------------------------*/
.icon {
  width: 24px;
  height: auto;
  aspect-ratio: 1;
}

/*------------------------------------*\
    HEADER.SCSS
\*------------------------------------*/
.header {
  position: relative;
  z-index: 999;
  background-color: var(--surface-page);
  filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.08));
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.header > .inner {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) 0px;
}
.header .logo {
  max-width: 62px;
  width: 100%;
}
.header .hamburger {
  margin-right: -5px;
}
@media (min-width: 769px) {
  .header .logo {
    max-width: 100px;
  }
}

/*------------------------------------*/
/* NOTE - Footer */
/*------------------------------------*/
.footer {
  background: var(--surface-dark);
  color: var(--text-body-on-dark);
  padding: var(--components-abstand-small) 0;
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.footer .inner {
  display: flex;
  flex-direction: column;
  gap: var(--components-abstand-small);
}
.footer .footer-logo {
  max-width: 60px;
  width: 100%;
}
.footer .footer-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--components-abstand-small);
}
.footer .footer-content .footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.footer .footer-content .footer-contact h5 {
  padding: 0 0 var(--space-lg);
  border-bottom: solid 1px var(--divider-on-dark);
  color: var(--text-headings-on-dark);
}
.footer .footer-content .footer-contact ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 calc(var(--space-lg) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer .footer-content .footer-menu {
  /* Global styles for all navigation levels */
  /* Main level navigation */
  /* Second level navigation */
}
.footer .footer-content .footer-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: calc(12px + 2 * (100vw - 520px) / 880);
}
@media screen and (max-width: 520px) {
  .footer .footer-content .footer-menu ul {
    font-size: 12px;
  }
}
@media screen and (min-width: 1400px) {
  .footer .footer-content .footer-menu ul {
    font-size: 14px;
  }
}
.footer .footer-content .footer-menu a {
  display: block;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: var(--transition);
}
.footer .footer-content .footer-menu > ul {
  gap: var(--components-abstand-small);
}
.footer .footer-content .footer-menu > ul > li {
  /* Hover/active state */
}
.footer .footer-content .footer-menu > ul > li > a {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(17px + 1 * (100vw - 520px) / 880);
  padding: 0 0 var(--space-lg);
  border-bottom: solid 1px var(--divider-on-dark);
  color: var(--text-headings-on-dark);
}
@media screen and (max-width: 520px) {
  .footer .footer-content .footer-menu > ul > li > a {
    font-size: 17px;
  }
}
@media screen and (min-width: 1400px) {
  .footer .footer-content .footer-menu > ul > li > a {
    font-size: 18px;
  }
}
.footer .footer-content .footer-menu > ul > li a:hover, .footer .footer-content .footer-menu > ul > li:hover > a, .footer .footer-content .footer-menu > ul > li.current_page_item > a {
  color: var(--text-action);
}
.footer .footer-content .footer-menu > ul > li a:active {
  color: var(--text-action-press);
  transition: none;
}
.footer .footer-content .footer-menu > ul > li > ul {
  padding-top: calc(var(--space-lg) / 2);
}
.footer .footer-content .footer-menu > ul > li > ul > li {
  /* Hover/active state */
}
.footer .footer-content .footer-menu > ul > li > ul > li > a {
  color: var(--text-body-on-dark);
  padding: calc(var(--space-lg) / 2) 0;
  font-size: 15px;
}
.footer .footer-content .footer-menu > ul > li > ul > li a:hover, .footer .footer-content .footer-menu > ul > li > ul > li:hover > a, .footer .footer-content .footer-menu > ul > li > ul > li.current_page_item > a {
  color: var(--text-action);
}
.footer .footer-content .footer-menu > ul > li > ul > li a:active {
  color: var(--text-action-press);
  transition: none;
}
.footer .footer-end {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: calc(12px + 2 * (100vw - 520px) / 880);
  font-weight: 700;
}
@media screen and (max-width: 520px) {
  .footer .footer-end {
    font-size: 12px;
  }
}
@media screen and (min-width: 1400px) {
  .footer .footer-end {
    font-size: 14px;
  }
}
.footer .footer-end .copyright {
  padding: 0;
}
.footer .footer-end a {
  color: var(--text-body-on-dark);
  transition: var(--transition);
}
.footer .footer-end a:hover {
  color: var(--text-action);
}
.footer .footer-end .wv-legal-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-lg);
}
@media (min-width: 769px) {
  .footer .footer-content {
    flex-direction: row;
  }
  .footer .footer-content .footer-contact {
    flex: 1;
  }
  .footer .footer-content .footer-menu {
    flex: 1;
  }
  .footer .footer-content .footer-menu > ul {
    flex-direction: row;
  }
  .footer .footer-content .footer-menu > ul > li {
    flex: auto;
  }
  .footer .footer-end {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

/*------------------------------------*/
/* Styling for navigation and (sub) menues  */
/*------------------------------------*/
/*------------------------------------*/
/* NOTE - Mobile & Desktop Navigation */
/*------------------------------------*/
.header-menu {
  --nav-item-gap: calc(var(--space-2xl) / 2);
  /* Global styles for all navigation levels */
  /* Main level navigation */
  /* Second level navigation */
}
.header-menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.header-menu a {
  display: block;
  color: var(--text-headings);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}
.header-menu > ul > li {
  /* Hover/active state */
}
.header-menu > ul > li a:hover, .header-menu > ul > li:hover > a, .header-menu > ul > li.current_page_item > a {
  color: var(--text-action);
}
.header-menu > ul > li a:active {
  color: var(--text-action-press);
  transition: none;
}
.header-menu > ul > li > ul > li {
  /* Hover/active state */
}
.header-menu > ul > li > ul > li a:hover, .header-menu > ul > li > ul > li:hover > a, .header-menu > ul > li > ul > li.current_page_item > a {
  color: var(--text-action);
}
.header-menu > ul > li > ul > li a:active {
  color: var(--text-action-press);
  transition: none;
}

/*------------------------------------*/
/* NOTE - Mobile Navigation */
/*------------------------------------*/
@media (max-width: 1192px) {
  .hamburger {
    width: auto;
  }
  .hamburger:hover {
    background: transparent;
  }
  .hamburger .hamburger-box {
    scale: 0.8;
  }
  .header-menu {
    display: none;
    max-height: calc(100dvh - 100%);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0%;
    z-index: 999;
    /* Main level navigation */
    /* Second level navigation */
  }
  .header-menu > ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    flex-direction: column;
    align-items: stretch;
    background: var(--theme-neutral-white);
  }
  .header-menu > ul > li.menu-item {
    width: 100%;
    border-top: 1px solid var(--border-input);
    /* Hover/active state */
  }
  .header-menu > ul > li.menu-item > a {
    padding: 15px 20px;
    position: relative;
  }
  .header-menu > ul > li.menu-item > a .toggle-submenu {
    height: 100%;
    aspect-ratio: 1;
    background: var(--surface-input);
    border: 1px solid var(--border-input);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    transition: var(--transition);
    cursor: pointer;
  }
  .header-menu > ul > li.menu-item > a .toggle-submenu:after {
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 9.5L12.5 15.5L18.5 9.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition);
  }
  .header-menu > ul > li.menu-item > a .toggle-submenu.open:after {
    transform: rotate(-180deg) translate(50%, 50%);
  }
  .header-menu > ul > li.menu-item a:hover, .header-menu > ul > li.menu-item:hover > a, .header-menu > ul > li.menu-item.current_page_item > a {
    color: var(--text-action);
  }
  .header-menu > ul > li.menu-item > ul {
    display: none;
    padding-bottom: 10px;
  }
  .header-menu > ul > li.menu-item > ul > li.menu-item > a {
    padding: 10px 20px;
    font-size: 16px;
  }
  .nav__background {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    pointer-events: none;
    opacity: 0%;
    transition: var(--transition);
    transition-duration: 200ms;
  }
  .nav__background.is-active {
    opacity: 100%;
    pointer-events: all;
  }
}
/*------------------------------------*/
/* NOTE - Desktop Navigation */
/*------------------------------------*/
@media (min-width: 1193px) {
  .header-menu {
    /* Main level navigation */
    /* Second level navigation */
  }
  .header-menu > ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    flex-direction: row;
  }
  .header-menu > ul > li.menu-item {
    position: relative;
    /* Menü Item with Submenu */
    /* Hover/active state */
  }
  .header-menu > ul > li.menu-item > a {
    padding: 5px var(--nav-item-gap);
    font-size: 16px;
  }
  .header-menu > ul > li.menu-item.menu-item-has-children {
    overflow: hidden;
  }
  .header-menu > ul > li.menu-item.menu-item-has-children > a {
    padding-right: calc(23px + var(--nav-item-gap));
    position: relative;
  }
  .header-menu > ul > li.menu-item.menu-item-has-children > a:after {
    content: "";
    display: block;
    position: absolute;
    width: 11px;
    height: 8px;
    transition: var(--transition);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.865' height='6.847' viewBox='0 0 10.865 6.847'%3E%3Cpath id='Pfad_17' data-name='Pfad 17' d='M291.258,1305.2a1,1,0,0,1-.707-1.707l3.725-3.725-3.725-3.725a1,1,0,0,1,1.414-1.414l5.14,5.14-5.14,5.14A1,1,0,0,1,291.258,1305.2Z' transform='translate(1305.196 -290.258) rotate(90)' fill='%231c1c1c'/%3E%3C/svg%3E%0A");
    top: 50%;
    right: var(--nav-item-gap);
    transform: translateY(-50%);
  }
  .header-menu > ul > li.menu-item.menu-item-has-children:hover {
    overflow: visible;
  }
  .header-menu > ul > li.menu-item.menu-item-has-children:hover > a:after {
    transform: translateY(-50%) rotate(180deg);
  }
  .header-menu > ul > li.menu-item.menu-item-has-children:hover > ul {
    opacity: 1;
    transform: translateY(0px);
  }
  .header-menu > ul > li.menu-item a:hover:after, .header-menu > ul > li.menu-item:hover > a:after, .header-menu > ul > li.menu-item.current_page_item > a:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.865' height='6.847' viewBox='0 0 10.865 6.847'%3E%3Cpath id='Pfad_17' data-name='Pfad 17' d='M291.258,1305.2a1,1,0,0,1-.707-1.707l3.725-3.725-3.725-3.725a1,1,0,0,1,1.414-1.414l5.14,5.14-5.14,5.14A1,1,0,0,1,291.258,1305.2Z' transform='translate(1305.196 -290.258) rotate(90)' fill='%23E11D48'/%3E%3C/svg%3E%0A");
  }
  .header-menu > ul > li.menu-item > ul {
    padding-top: 31px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    flex-direction: column;
    align-items: stretch;
    top: 100%;
    left: 0px;
    min-width: 100%;
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transform: translateY(10px);
    z-index: 999;
  }
  .header-menu > ul > li.menu-item > ul > li.menu-item {
    display: block;
    border-top: 1px solid var(--border-input);
    position: relative;
    background: var(--surface-page);
  }
  .header-menu > ul > li.menu-item > ul > li.menu-item > a {
    padding: var(--space-md) var(--space-xl);
    background-color: var(--theme-neutral-white);
    font-size: 15px;
  }
  .header-menu > ul > li.menu-item > ul > li.menu-item:first-child {
    padding-top: var(--space-xs);
    border-top: 3px solid var(--border-accent);
  }
  .header-menu > ul > li.menu-item > ul > li.menu-item:last-child {
    padding-bottom: var(--space-xs);
  }
  .hamburger {
    display: none;
  }
}
/*------------------------------------*/
/* NOTE - Swiper slider componente */
/*------------------------------------*/
.slider__controls {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--layout-grid-gutter);
}
.slider__controls .slider__scrollbar {
  width: 10px;
  flex: auto;
}

.slider__button {
  padding: 0 !important;
  width: 60px !important;
  aspect-ratio: 1 !important;
  background-size: 20px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.slider__button.--prev {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='18' viewBox='0 0 22 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.61492 16.5146L0.999918 8.89958M0.999918 8.89958L8.61491 1.28458M0.999918 8.89958L20.7989 8.89958' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.slider__button.--next {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2845 1.88496L20.8995 9.49996M20.8995 9.49996L13.2845 17.115M20.8995 9.49996L1.1005 9.49996' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.slider__button:disabled.--prev {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.71541 17.615L1.10041 10M1.10041 10L8.71542 2.385M1.10041 10L20.8994 10' stroke='%2352525B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.slider__button:disabled.--next {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2845 2.38501L20.8995 10M20.8995 10L13.2845 17.615M20.8995 10H1.10052' stroke='%2352525B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}

.slider__scrollbar {
  height: 8px;
  width: 100%;
  max-width: 400px;
  background: var(--surface-input);
  border: 1px solid var(--border-input);
  border-radius: 10px;
}
.slider__scrollbar__drag {
  margin: -1px;
  height: calc(100% + 2px);
  background: var(--surface-action);
  cursor: pointer;
  position: relative;
  border-radius: 10px;
}
.slider__scrollbar__drag:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.slider__scrollbar__drag:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--surface-action);
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition-fast);
  z-index: -1;
  opacity: 20%;
}
.slider__scrollbar__drag.--dragging:after, .slider__scrollbar__drag:hover:after {
  width: calc(100% + 8px);
  height: calc(100% + 8px);
}

.slider__pagination {
  --slider__pagination-gap: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  flex-direction: row;
  justify-content: center;
  gap: var(--slider__pagination-gap);
}
.slider__pagination .slider__pagination__bullet {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--button-primary-default);
  transition: var(--transition);
  position: relative;
}
.slider__pagination .slider__pagination__bullet.--active {
  background: var(--text-action);
}
.slider__pagination .slider__pagination__bullet:before {
  content: "";
  width: calc(100% + var(--slider__pagination-gap));
  height: calc(100% + var(--slider__pagination-gap));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.slider__pagination.--vertical {
  flex-direction: column;
}
.slider__pagination.--clickable .slider__pagination__bullet:not(.--active) {
  cursor: pointer;
}
.slider__pagination.--clickable .slider__pagination__bullet:not(.--active):hover {
  background: var(--button-accent-hover);
}
.slider__pagination.--clickable .slider__pagination__bullet:not(.--active):active {
  background: var(--button-accent-action);
  transition: none;
}

.swiper {
  /*------------------------------------*/
  /* Responsive */
  /*------------------------------------*/
}
.swiper:hover .slider-button.--prev {
  left: 0px;
}
.swiper:hover .slider-button.--next {
  right: 0px;
}
@media (max-width: 768px) {
  .swiper .slider-button.--prev {
    left: 0px;
  }
  .swiper .slider-button.--next {
    right: 0px;
  }
}

/*------------------------------------*/
/* SECTION - Responsive */
/*------------------------------------*/
@media (max-width: 768px) {
  .slider__button {
    width: 46px !important;
    background-size: 16px !important;
  }
}
/*------------------------------------*/
/* STYLES - Form */
/*------------------------------------*/
/*------------------------------------*/
/* SECTION - Mixins */
/*------------------------------------*/
/*------------------------------------*/
/* SECTION - Styling */
/*------------------------------------*/
form.wpcf7-form p {
  width: 100%;
}
form.wpcf7-form br {
  display: none;
}
form.wpcf7-form input[type=text],
form.wpcf7-form input[type=email],
form.wpcf7-form input[type=tel],
form.wpcf7-form input[type=date],
form.wpcf7-form input[type=url],
form.wpcf7-form input[type=number],
form.wpcf7-form textarea {
  border-radius: 80px;
  border: 1px solid var(--Colors-gray-dark, #888);
  outline: none !important;
  width: 100%;
  line-height: var(--font-body-lineheight);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-headings);
  background-color: var(--surface-input);
  padding: var(--components-input-padding-y) var(--components-input-padding-x);
  appearance: none;
  letter-spacing: normal;
  transition: var(--transition-fast);
  outline: none !important;
  border-radius: 27px !important;
  border: 1px solid #888888 !important;
  width: 100%;
  font-weight: 400;
  color: #000000;
  background-color: #ffffff;
  margin-top: 5px;
  padding: 10px 20px;
  appearance: none;
  color: var(--Colors-text, #000);
  font-family: var(--Typography-font, Poppins);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 22.4px */
}
form.wpcf7-form input[type=text]::-webkit-input-placeholder,
form.wpcf7-form input[type=email]::-webkit-input-placeholder,
form.wpcf7-form input[type=tel]::-webkit-input-placeholder,
form.wpcf7-form input[type=date]::-webkit-input-placeholder,
form.wpcf7-form input[type=url]::-webkit-input-placeholder,
form.wpcf7-form input[type=number]::-webkit-input-placeholder,
form.wpcf7-form textarea::-webkit-input-placeholder {
  /* Edge */
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form input[type=text]:-ms-input-placeholder,
form.wpcf7-form input[type=email]:-ms-input-placeholder,
form.wpcf7-form input[type=tel]:-ms-input-placeholder,
form.wpcf7-form input[type=date]:-ms-input-placeholder,
form.wpcf7-form input[type=url]:-ms-input-placeholder,
form.wpcf7-form input[type=number]:-ms-input-placeholder,
form.wpcf7-form textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form input[type=text]::placeholder,
form.wpcf7-form input[type=email]::placeholder,
form.wpcf7-form input[type=tel]::placeholder,
form.wpcf7-form input[type=date]::placeholder,
form.wpcf7-form input[type=url]::placeholder,
form.wpcf7-form input[type=number]::placeholder,
form.wpcf7-form textarea::placeholder {
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form input[type=text]::-webkit-input-placeholder, form.wpcf7-form input[type=text]:-ms-input-placeholder, form.wpcf7-form input[type=text]::placeholder,
form.wpcf7-form input[type=email]::-webkit-input-placeholder,
form.wpcf7-form input[type=email]:-ms-input-placeholder,
form.wpcf7-form input[type=email]::placeholder,
form.wpcf7-form input[type=tel]::-webkit-input-placeholder,
form.wpcf7-form input[type=tel]:-ms-input-placeholder,
form.wpcf7-form input[type=tel]::placeholder,
form.wpcf7-form input[type=date]::-webkit-input-placeholder,
form.wpcf7-form input[type=date]:-ms-input-placeholder,
form.wpcf7-form input[type=date]::placeholder,
form.wpcf7-form input[type=url]::-webkit-input-placeholder,
form.wpcf7-form input[type=url]:-ms-input-placeholder,
form.wpcf7-form input[type=url]::placeholder,
form.wpcf7-form input[type=number]::-webkit-input-placeholder,
form.wpcf7-form input[type=number]:-ms-input-placeholder,
form.wpcf7-form input[type=number]::placeholder,
form.wpcf7-form textarea::-webkit-input-placeholder,
form.wpcf7-form textarea:-ms-input-placeholder,
form.wpcf7-form textarea::placeholder {
  color: var(--text-body);
}
form.wpcf7-form input[type=text]:not([aria-invalid=true]):hover,
form.wpcf7-form input[type=email]:not([aria-invalid=true]):hover,
form.wpcf7-form input[type=tel]:not([aria-invalid=true]):hover,
form.wpcf7-form input[type=date]:not([aria-invalid=true]):hover,
form.wpcf7-form input[type=url]:not([aria-invalid=true]):hover,
form.wpcf7-form input[type=number]:not([aria-invalid=true]):hover,
form.wpcf7-form textarea:not([aria-invalid=true]):hover {
  border-color: var(--border-input-hover);
}
form.wpcf7-form input[type=text]:not([aria-invalid=true]):focus,
form.wpcf7-form input[type=email]:not([aria-invalid=true]):focus,
form.wpcf7-form input[type=tel]:not([aria-invalid=true]):focus,
form.wpcf7-form input[type=date]:not([aria-invalid=true]):focus,
form.wpcf7-form input[type=url]:not([aria-invalid=true]):focus,
form.wpcf7-form input[type=number]:not([aria-invalid=true]):focus,
form.wpcf7-form textarea:not([aria-invalid=true]):focus {
  border-color: var(--border-input-focus);
}
form.wpcf7-form input[type=text][aria-invalid=true],
form.wpcf7-form input[type=email][aria-invalid=true],
form.wpcf7-form input[type=tel][aria-invalid=true],
form.wpcf7-form input[type=date][aria-invalid=true],
form.wpcf7-form input[type=url][aria-invalid=true],
form.wpcf7-form input[type=number][aria-invalid=true],
form.wpcf7-form textarea[aria-invalid=true] {
  background: var(--surface-error);
  border-color: var(--border-input-error);
}
form.wpcf7-form input[type=text]:disabled,
form.wpcf7-form input[type=email]:disabled,
form.wpcf7-form input[type=tel]:disabled,
form.wpcf7-form input[type=date]:disabled,
form.wpcf7-form input[type=url]:disabled,
form.wpcf7-form input[type=number]:disabled,
form.wpcf7-form textarea:disabled {
  opacity: 50%;
  cursor: not-allowed;
}
form.wpcf7-form select {
  border-radius: 80px;
  border: 1px solid var(--Colors-gray-dark, #888);
  outline: none !important;
  width: 100%;
  line-height: var(--font-body-lineheight);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-headings);
  background-color: var(--surface-input);
  padding: var(--components-input-padding-y) var(--components-input-padding-x);
  appearance: none;
  letter-spacing: normal;
  transition: var(--transition-fast);
  outline: none !important;
  border-radius: 27px !important;
  border: 1px solid #888888 !important;
  width: 100%;
  font-weight: 400;
  color: #000000;
  background-color: #ffffff;
  margin-top: 5px;
  padding: 10px 20px;
  appearance: none;
  color: var(--Colors-text, #000);
  font-family: var(--Typography-font, Poppins);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 22.4px */
  appearance: none;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0279 3.44434L6.00027 8.55591L10.9726 3.44434' stroke='black' stroke-width='1.1' stroke-linecap='square'/%3E%3C/svg%3E%0A");
  letter-spacing: normal;
}
form.wpcf7-form select::-webkit-input-placeholder {
  /* Edge */
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form select:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form select::placeholder {
  color: #d5d5d5;
  font-family: "Poppins ", sans-serif;
  font-weight: bold;
  opacity: 0.7;
}
form.wpcf7-form select::-webkit-input-placeholder, form.wpcf7-form select:-ms-input-placeholder, form.wpcf7-form select::placeholder {
  color: var(--text-body);
}
form.wpcf7-form select:not([aria-invalid=true]):hover {
  border-color: var(--border-input-hover);
}
form.wpcf7-form select:not([aria-invalid=true]):focus {
  border-color: var(--border-input-focus);
}
form.wpcf7-form select[aria-invalid=true] {
  background: var(--surface-error);
  border-color: var(--border-input-error);
}
form.wpcf7-form select:disabled {
  opacity: 50%;
  cursor: not-allowed;
}
form.wpcf7-form textarea {
  height: 250px;
  resize: none;
}
form.wpcf7-form .wpcf7-checkbox,
form.wpcf7-form .wpcf7-acceptance,
form.wpcf7-form .wpcf7-radio {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
}
form.wpcf7-form .wpcf7-checkbox span,
form.wpcf7-form .wpcf7-acceptance span,
form.wpcf7-form .wpcf7-radio span {
  margin: 0px;
}
form.wpcf7-form .wpcf7-checkbox label,
form.wpcf7-form .wpcf7-acceptance label {
  display: flex !important;
  position: relative;
  cursor: pointer;
}
form.wpcf7-form .wpcf7-checkbox label input[type=checkbox],
form.wpcf7-form .wpcf7-checkbox label input[type=radio],
form.wpcf7-form .wpcf7-acceptance label input[type=checkbox],
form.wpcf7-form .wpcf7-acceptance label input[type=radio] {
  display: none;
}
form.wpcf7-form .wpcf7-checkbox label:before,
form.wpcf7-form .wpcf7-acceptance label:before {
  content: "";
  display: block;
  margin: 4px var(--space-md) 0 0;
  height: 20px;
  width: 20px;
  min-width: 20px;
  background-color: var(--surface-selector);
  border: solid 1px var(--border-selector);
  border-radius: 50%;
  transition: var(--transition-fast);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4.00024L4.06471 6.95459L9.5 1.0459' stroke='%23EF6F2A' stroke-width='1.5'/%3E%3C/svg%3E%0A");
  background-size: 0;
}
form.wpcf7-form .wpcf7-checkbox label span,
form.wpcf7-form .wpcf7-acceptance label span {
  padding-top: 0;
  color: var(--text-body);
  color: var(--Colors-text, #000);
  font-family: var(--Typography-font, Poppins);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 16px */
}
form.wpcf7-form .wpcf7-checkbox label:hover:before,
form.wpcf7-form .wpcf7-acceptance label:hover:before {
  background-color: var(--surface-selector-hover);
  border-color: var(--Colors-green-dark, #30403b);
}
form.wpcf7-form .wpcf7-checkbox label:has(input:active):before,
form.wpcf7-form .wpcf7-acceptance label:has(input:active):before {
  background-color: var(--surface-selector-press);
  border-color: var(--Colors-green-dark, #30403b);
}
form.wpcf7-form .wpcf7-checkbox label:has(input:checked):before,
form.wpcf7-form .wpcf7-acceptance label:has(input:checked):before {
  border-color: var(--Colors-green-dark, #30403b);
  background-size: 10px;
}
form.wpcf7-form .wpcf7-radio label {
  display: flex !important;
  position: relative;
  cursor: pointer;
}
form.wpcf7-form .wpcf7-radio label input[type=checkbox],
form.wpcf7-form .wpcf7-radio label input[type=radio] {
  display: none;
}
form.wpcf7-form .wpcf7-radio label:before {
  content: "";
  display: block;
  margin: 4px var(--space-md) 0 0;
  height: 20px;
  width: 20px;
  min-width: 20px;
  background-color: var(--surface-selector);
  border: solid 1px var(--border-selector);
  border-radius: 50%;
  transition: var(--transition-fast);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4.00024L4.06471 6.95459L9.5 1.0459' stroke='%23EF6F2A' stroke-width='1.5'/%3E%3C/svg%3E%0A");
  background-size: 0;
}
form.wpcf7-form .wpcf7-radio label span {
  padding-top: 0;
  color: var(--text-body);
  color: var(--Colors-text, #000);
  font-family: var(--Typography-font, Poppins);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 16px */
}
form.wpcf7-form .wpcf7-radio label:hover:before {
  background-color: var(--surface-selector-hover);
  border-color: var(--Colors-green-dark, #30403b);
}
form.wpcf7-form .wpcf7-radio label:has(input:active):before {
  background-color: var(--surface-selector-press);
  border-color: var(--Colors-green-dark, #30403b);
}
form.wpcf7-form .wpcf7-radio label:has(input:checked):before {
  border-color: var(--Colors-green-dark, #30403b);
  background-size: 10px;
}
form.wpcf7-form .wpcf7-radio label:before {
  border-radius: 50%;
}
form.wpcf7-form .wpcf7-radio label:has(input:checked):before {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' rx='5' fill='%23EF6F2A'/%3E%3C/svg%3E%0A");
}
form.wpcf7-form .error,
form.wpcf7-form .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-error);
}
form.wpcf7-form .error:empty,
form.wpcf7-form .wpcf7-not-valid-tip:empty {
  display: none;
}
form.wpcf7-form .error:before,
form.wpcf7-form .wpcf7-not-valid-tip:before {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
}
form.wpcf7-form .error:before,
form.wpcf7-form .wpcf7-not-valid-tip:before {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='%23FFF1F2'/%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%23E11D48'/%3E%3Cpath d='M8.63029 9.47986L7.38029 9.47986L7.38029 4.13986L8.63029 4.13986L8.63029 9.47986ZM8.00029 10.3599C8.22696 10.3599 8.41696 10.4299 8.57029 10.5699C8.72363 10.7165 8.80029 10.8965 8.80029 11.1099C8.80029 11.3232 8.72363 11.4999 8.57029 11.6399C8.41696 11.7865 8.22696 11.8599 8.00029 11.8599C7.77363 11.8599 7.58363 11.7899 7.43029 11.6499C7.27696 11.5165 7.20029 11.3465 7.20029 11.1399C7.20029 10.9199 7.27696 10.7332 7.43029 10.5799C7.57696 10.4332 7.76696 10.3599 8.00029 10.3599Z' fill='%23E11D48'/%3E%3C/svg%3E%0A");
}
form.wpcf7-form .notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-notice);
}
form.wpcf7-form .notice:empty {
  display: none;
}
form.wpcf7-form .notice:before {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
}
form.wpcf7-form .notice:before {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='%23F0F9FF'/%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%230EA5E9'/%3E%3Cpath d='M7.36995 6.52014H8.61995V11.8601H7.36995V6.52014ZM7.99995 5.64014C7.77328 5.64014 7.58328 5.57014 7.42995 5.43014C7.27662 5.28347 7.19995 5.10347 7.19995 4.89014C7.19995 4.6768 7.27662 4.50014 7.42995 4.36014C7.58328 4.21347 7.77328 4.14014 7.99995 4.14014C8.22662 4.14014 8.41662 4.21014 8.56995 4.35014C8.72328 4.48347 8.79995 4.65347 8.79995 4.86014C8.79995 5.08014 8.72328 5.2668 8.56995 5.42014C8.42328 5.5668 8.23328 5.64014 7.99995 5.64014Z' fill='%230EA5E9'/%3E%3C/svg%3E%0A");
}
form.wpcf7-form p.required {
  line-height: var(--font-body-lineheight);
  font-size: calc(15px + 0 * (100vw - 520px) / 880);
  font-size: calc(16px + 0 * (100vw - 520px) / 880);
  padding: 0;
  width: fit-content;
  color: var(--text-body);
  opacity: 0.5;
  width: 100px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  display: none;
}
@media screen and (max-width: 520px) {
  form.wpcf7-form p.required {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  form.wpcf7-form p.required {
    font-size: 15px;
  }
}
@media screen and (max-width: 520px) {
  form.wpcf7-form p.required {
    font-size: 16px;
  }
}
@media screen and (min-width: 1400px) {
  form.wpcf7-form p.required {
    font-size: 16px;
  }
}
form.wpcf7-form .wpcf7-spinner {
  position: absolute;
  left: 7px;
  bottom: 16px;
  margin: 0px;
}

.standard-formular {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  gap: var(--space-xl);
}
.standard-formular > label {
  width: 100%;
}
.standard-formular > label span {
  display: block;
  width: 100%;
}
.standard-formular > label span.labeltext {
  color: var(--Colors-text, #000);
  font-family: var(--Typography-font, Poppins);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 16px */
}
.standard-formular > label span.labeltext .required {
  display: inline;
}

/*------------------------------------*/
/* SECTION - Responsive */
/*------------------------------------*/
@media (min-width: 521px) {
  .standard-formular > label {
    min-width: 100px;
  }
  .standard-formular > label.full, .standard-formular > label.ten {
    width: 100%;
    flex-grow: 10;
  }
  .standard-formular > label.nine {
    width: calc(90% - var(--space-xl));
    flex-grow: 9;
  }
  .standard-formular > label.eight {
    width: calc(80% - var(--space-xl));
    flex-grow: 8;
  }
  .standard-formular > label.seven {
    width: calc(70% - var(--space-xl));
    flex-grow: 7;
  }
  .standard-formular > label.six {
    width: calc(60% - var(--space-xl));
    flex-grow: 6;
  }
  .standard-formular > label.half, .standard-formular > label.five {
    width: calc(50% - var(--space-xl));
    flex-grow: 5;
  }
  .standard-formular > label.four {
    width: calc(40% - var(--space-xl));
    flex-grow: 4;
  }
  .standard-formular > label.three {
    width: calc(30% - var(--space-xl));
    flex-grow: 3;
  }
  .standard-formular > label.two {
    width: calc(20% - var(--space-xl));
    flex-grow: 2;
  }
  .standard-formular > label.one {
    width: calc(10% - var(--space-xl));
    flex-grow: 1;
  }
}
/*------------------------------------*\
    BOX20.SCSS

	Sets the width of a column based on its parent container - .box20 or .wp-block-columns.box20 .col;

	Layout for 2 columns layout on desktop 

\*------------------------------------*/
@media (min-width: 769px) {
  .box50 > .col,
  .wp-block-columns.box50 > .wp-block-column {
    width: calc(50% - var(--layout-grid-gutter) / 2);
  }
}

/*------------------------------------*\
    BOX20.SCSS

	Sets the width of a column based on its parent container - .box20 or .wp-block-columns.box20 .col;

	Layout for 3 columns layout on desktop 

\*------------------------------------*/
@media (min-width: 769px) {
  .box33 .col,
  .box33 .wp-block-column,
  .wp-block-columns.box33 .col,
  .wp-block-columns.box33 .wp-block-column {
    width: calc(33.333% - var(--layout-grid-gutter) * 2 / 3);
  }
}

/*------------------------------------*\
    BOX20.SCSS

	Sets the width of a column based on its parent container - .box20 or .wp-block-columns.box20 .col;

	Layout for 4 columns layout on desktop 

\*------------------------------------*/
@media (min-width: 521px) {
  .box25 .col,
  .box25 .wp-block-column,
  .wp-block-columns.box25 .col,
  .wp-block-columns.box25 .wp-block-column {
    width: calc(50% - var(--layout-grid-gutter) / 2);
  }
}
@media (min-width: 1193px) {
  .box25 .col,
  .box25 .wp-block-column,
  .wp-block-columns.box25 .col,
  .wp-block-columns.box25 .wp-block-column {
    width: calc(25% - var(--layout-grid-gutter) * 3 / 4);
  }
}

/*------------------------------------*\
    BOX20.SCSS

	Sets the width of a column based on its parent container - .box20 or .wp-block-columns.box20 .col;

	Layout for 5 columns layout on desktop 

\*------------------------------------*/
@media (min-width: 521px) {
  .box20 .col,
  .box20 .wp-block-column,
  .wp-block-columns.box20 .col,
  .wp-block-columns.box20 .wp-block-column {
    width: calc(50% - var(--layout-grid-gutter) / 2);
  }
}
@media (min-width: 1193px) {
  .box20 .col,
  .box20 .wp-block-column,
  .wp-block-columns.box20 .col,
  .wp-block-columns.box20 .wp-block-column {
    width: calc(20% - var(--layout-grid-gutter) * 4 / 5);
  }
}

/*------------------------------------*/
/* ACF BLOCK - abstand */
/*------------------------------------*/
/*------------------------------------*/
/* ACF BLOCK - Prelaunch */
/*------------------------------------*/
.prelaunch {
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.prelaunch a:hover {
  text-decoration: underline;
}
.prelaunch .wpcf7 form.sent .wpcf7-response-output {
  color: var(--Colors-text-white, #fff);
}
.prelaunch .formular-container {
  padding: 20px;
  background: var(--Colors-green-dark, #30403b);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url("data:image/svg+xml,%3Csvg width='850' height='850' viewBox='0 0 850 850' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M425 422.917L850 850L-4.22228e-05 850L425 422.917Z' fill='%233D5850'/%3E%3Cpath d='M638.542 639.583L427.083 425L850 425L638.542 639.583Z' fill='%23364D46'/%3E%3Cpath d='M427.083 425L-4.06537e-05 850L-3.05176e-05 5.59422e-05L427.083 425Z' fill='%23364D46'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
.prelaunch .formular-container .top,
.prelaunch .formular-container .meta {
  max-width: 500px;
}
.prelaunch .formular-container .meta ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prelaunch .formular-container .meta ul li a {
  color: var(--Colors-text-white, #fff);
  text-align: center;
  font-family: var(--Typography-font, Poppins);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 16px */
  text-decoration: none;
  position: relative;
}
.prelaunch .formular-container .meta ul li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 1.5px;
  height: 9px;
  background-color: var(--Colors-text-white, #fff);
  transform: translateY(-50%);
}
.prelaunch .formular-container .meta ul li + li {
  padding-left: 10px;
}
.prelaunch .formular-container .meta ul li:last-child a::after {
  display: none;
}
.prelaunch .formular-container .subline {
  color: var(--Colors-text-white, #fff);
  font-family: var(--Typography-font, Poppins);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  padding-bottom: 130px;
}
.prelaunch .formular-container .subline a {
  color: var(--Colors-text-white, #fff);
}
.prelaunch .formular-container .standard-formular {
  border-radius: 6px;
  border: 1px solid var(--Colors-gray-dark, #888);
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  gap: 10px;
}
.prelaunch .formular-container .standard-formular .button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.prelaunch .formular-container .standard-formular .labeltext {
  padding: 0px 15px;
  font-weight: var(--Typography-bold, 600);
}
.prelaunch .formular-container .standard-formular button {
  display: inline-block;
  background-color: #369678 !important;
  border-radius: 27px;
  background: var(--Colors-primary, #369678) !important;
  color: #ffffff;
  padding: 14px 30px !important;
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  text-decoration: none;
  font-family: "Poppins SemiBold", sans-serif;
  line-height: 1.625;
  text-align: center;
  transition: all 0.5s ease-in-out;
  border-radius: 27px;
  width: 100%;
  color: var(--Colors-text-white, #fff);
  text-align: center;
  /* Button */
  font-family: var(--Typography-font, Poppins);
  font-size: var(--Typography-Font-Size-copytext, 16px);
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 25.6px */
  transition: all 0.5s ease-in-out;
}
.prelaunch .formular-container .standard-formular button:hover {
  background-color: #5aac92 !important;
  cursor: pointer;
}
.prelaunch .formular-container .standard-formular .intro-label {
  padding: 0;
  padding-bottom: 10px;
}
.prelaunch .headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
  align-items: center;
  align-items: flex-start;
}
.prelaunch .headline .logo {
  max-width: 72px;
}
.prelaunch .headline h3 {
  padding: 0;
  color: var(--Colors-text-white, #fff);
}
.prelaunch .intro-label {
  color: var(--Colors-gray-dark, #888);
  /* Headline 5 */
  font-family: var(--Typography-font, Poppins);
  font-size: var(--Typography-Font-Size-h5, 14px);
  font-style: normal;
  font-weight: var(--Typography-bold, 600);
  line-height: 160%; /* 22.4px */
}
.prelaunch .content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.prelaunch .content-container * {
  color: var(--Colors-text-white, #fff);
}
.prelaunch .content-container .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.prelaunch .content-container .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.prelaunch .content-container .step {
  padding: 40px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 430px;
}
.prelaunch .content-container .step + .step {
  border-top: 1px solid var(--Colors-text-white, #fff);
}
.prelaunch .content-container .step .count {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.prelaunch .content-container .step h3,
.prelaunch .content-container .step p {
  text-align: center;
}
.prelaunch .content-container .step h3 {
  padding-top: 20px;
  font-size: var(--Typography-Font-Size-smallertext, 25px);
}
.prelaunch .content-container .step p {
  font-family: var(--Typography-font, Poppins);
  font-size: var(--Typography-Font-Size-smallertext, 14px);
  font-style: normal;
  font-weight: var(--Typography-regular, 400);
  line-height: 160%; /* 22.4px */
  color: var(--Colors-text-white, #fff);
}
@media (min-width: 769px) {
  .prelaunch {
    display: flex;
    justify-content: space-between;
    height: 100%;
    position: relative;
  }
}
@media (min-width: 769px) and (min-width: 1401px) {
  .prelaunch {
    min-height: 100vh;
  }
}
@media (min-width: 769px) and (min-width: 1401px) {
  .prelaunch .meta {
    width: fit-content;
    position: absolute;
    bottom: 20px;
  }
}
@media (min-width: 769px) {
  .prelaunch .formular-container,
  .prelaunch .content-container {
    width: 50%;
  }
}
@media (min-width: 769px) and (min-width: 1401px) {
  .prelaunch .formular-container .subline {
    padding-bottom: 0px;
  }
}
@media (min-width: 769px) {
  .prelaunch .headline {
    flex-direction: row;
    margin-bottom: 60px;
    align-items: center;
  }
  .prelaunch .headline .logo {
    max-width: 100px;
  }
  .prelaunch .step {
    padding: 50px;
  }
}

/*------------------------------------*\
	ACF Block: Akkordeon
\*------------------------------------*/
.accordeon {
  width: calc(100% - 2 * var(--layout-outergap));
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  margin-top: var(--font-default-linegap);
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  flex-direction: column;
  gap: var(--space-md);
}
.accordeon .item {
  align-items: stretch;
  background: var(--surface-box);
}
.accordeon .item .title {
  margin: 0px;
  padding: var(--font-default-linegap) 0px 0px;
  color: var(--text-headings);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-default-lineheight);
  font-size: calc(15px + 1 * (100vw - 520px) / 880);
  margin: 0;
  padding: var(--space-xl) 70px var(--space-xl) var(--space-xl);
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
@media screen and (max-width: 520px) {
  .accordeon .item .title {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  .accordeon .item .title {
    font-size: 16px;
  }
}
.accordeon .item .title span {
  display: inline-block;
}
.accordeon .item .title:after {
  content: "";
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  aspect-ratio: 1;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 20H27' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 13V27' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.25s ease-in-out;
}
.accordeon .item .content-container {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms linear;
}
.accordeon .item .content {
  line-height: var(--font-body-lineheight);
  font-size: calc(15px + 0 * (100vw - 520px) / 880);
  font-size: calc(16px + 0 * (100vw - 520px) / 880);
  padding: 0px var(--space-xl) var(--space-xl) var(--space-xl);
  overflow: hidden;
  transition: padding 300ms linear;
}
.accordeon .item .content > *:is(h1, h2, h3, h4, h5, h6, p, a, ul):not(.button):first-child {
  margin-top: 0;
  padding-top: 0;
}
@media screen and (max-width: 520px) {
  .accordeon .item .content {
    font-size: 15px;
  }
}
@media screen and (min-width: 1400px) {
  .accordeon .item .content {
    font-size: 15px;
  }
}
@media screen and (max-width: 520px) {
  .accordeon .item .content {
    font-size: 16px;
  }
}
@media screen and (min-width: 1400px) {
  .accordeon .item .content {
    font-size: 16px;
  }
}
.accordeon .item.--open .title:after {
  transform: translateY(-50%) rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 20H27' stroke='black' stroke-width='2'/%3E%3Cpath d='M27 20L13 20' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.accordeon .item:not(.--open) .content-container {
  grid-template-rows: 0fr;
}
.accordeon .item:not(.--open) .content {
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 769px) {
  .accordeon .item .title {
    padding: var(--space-2xl) 90px var(--space-2xl) var(--space-2xl);
  }
  .accordeon .item .title::after {
    right: 25px;
  }
  .accordeon .item .content {
    padding: 0px var(--space-2xl) var(--space-2xl) var(--space-2xl);
  }
}

/*------------------------------------*/
/* ACF Block: Galerie Slider */
/*------------------------------------*/
.gallery-slider {
  --gallery-gap: var(--space-md);
  overflow: hidden;
}
.gallery-slider .swiper {
  margin-left: calc(-1 * var(--gallery-gap) / 2);
  margin-right: calc(-1 * var(--gallery-gap) / 2);
}
.gallery-slider .swiper .swiper-slide {
  padding: 0px calc(var(--gallery-gap) / 2);
}
.gallery-slider .swiper .swiper-slide img {
  width: 100%;
  height: auto;
}
.gallery-slider .swiper .slider__controls {
  margin-top: var(--space-2xl);
  margin-left: calc(var(--gallery-gap) / 2);
  margin-right: calc(var(--gallery-gap) / 2);
}

/*------------------------------------*/
/* ACF Block: Hero Banner */
/*------------------------------------*/
.hero-banner {
  position: relative;
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.hero-banner .inner {
  padding: var(--space-2xl) 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-banner .inner .text {
  width: 100%;
  max-width: 544px;
  position: static;
  z-index: 1;
}
.hero-banner .inner .text > *:is(h1, h2, h3, h4, h5, h6, p, a, ul):not(.button):first-child {
  margin-top: 0;
  padding-top: 0;
}
.hero-banner .slider-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.hero-banner .slider-container .swiper {
  width: 100%;
  height: inherit;
}
.hero-banner .slider-container .swiper .swiper-slide {
  background-color: var(--theme-neutral-white);
}
.hero-banner .slider-container .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.hero-banner .slider-container .swiper .slider__button {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
}
.hero-banner .slider-container .swiper .slider__button.--prev {
  left: 0;
}
.hero-banner .slider-container .swiper .slider__button.--next {
  right: 0;
}
.hero-banner .slider-container .swiper .slider__pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
}
@media (max-width: 768px) {
  .hero-banner .slider-container .swiper .swiper-button-next,
  .hero-banner .slider-container .swiper .swiper-button-prev {
    display: none;
  }
}
@media (max-width: 1600px) {
  .hero-banner .slider__pagination,
  .hero-banner .slider__button {
    display: none;
  }
}
@media (min-width: 769px) {
  .hero-banner .slider__button.--prev {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .hero-banner .slider__button.--next {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/*------------------------------------*/
/* ACF BLOCK - Image Text */
/*------------------------------------*/
.image-text {
  width: calc(100% - 2 * var(--layout-outergap));
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xl);
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.image-text .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.image-text .text > *:is(h1, h2, h3, h4, h5, h6, p, a, ul):not(.button):first-child {
  margin-top: 0;
  padding-top: 0;
}
.image-text .image {
  position: relative;
}
.image-text .image img {
  width: 100%;
  min-height: 200px;
  max-height: 350px;
  object-fit: cover;
  object-position: top;
  height: -webkit-fill-available;
}
@media (min-width: 769px) {
  .image-text {
    flex-direction: row;
    gap: var(--space-4xl);
  }
  .image-text .text,
  .image-text .image {
    flex: auto;
    width: 50%;
  }
  .image-text .text {
    padding: var(--space-3xl) 0;
  }
  .image-text .image img {
    max-height: 700px;
  }
  .image-text.--order-text-image {
    flex-direction: row-reverse;
  }
}

/*------------------------------------*/
/* ACF BLOCK - Seitenanfang */
/*------------------------------------*/
.page-start {
  padding: var(--space-3xl) 0;
  background: var(--surface-dark);
  border-bottom: 4px solid var(--border-accent);
  /*------------------------------------*/
  /* SECTION - Responsive */
  /*------------------------------------*/
}
.page-start .inner > *:is(h1, h2, h3, h4, h5, h6, p, a, ul):not(.button):first-child {
  margin-top: 0;
  padding-top: 0;
}
.page-start .inner h1 {
  color: var(--text-headings-on-dark);
}
.page-start .inner p {
  color: var(--text-body-on-dark);
}
@media (min-width: 769px) {
  .page-start {
    padding: var(--space-4xl) 0;
  }
}

/*# sourceMappingURL=main.css.map */