@charset "UTF-8";
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Main SCSS File
   Description: Structured imports using SCSS modules + CSS layers
   ========================================================================== */
/* 00) settings */
/*  =========================================================================
    Author: Agentur KOPFNUSS - Marco Schädlich
    Settings: Tokens Primitives
    Description: Define primitive design tokens such as colors, typography, spacing, etc.
    Layer: Settings
    Reusable: Yes
    Custom Property Definitions: Yes
    Depends on:
    ========================================================================== */
/* 320px */
/* 420px */
/* 736px */
/* 768px */
/* 848px */
/* 1024px */
/* 1120px */
/* 1200px */
/* 1440px */
/* 1600px */
/* 1700px */
/* 1800px */
@layer settings {
  :root {
    /* ================
    Colors
    ================ */
    --clr-black: #192124;
    --clr-white: hsl(0deg 0% 100%);
    --clr-red-500: hsl(6deg 85% 49%);
    --clr-grey-blue: hsl(195deg 18% 39%);
    --clr-blue-500: hsl(198deg 100% 14%); /* prussian-blue */
    --clr-grey-200: hsl(196deg 18% 12%);
    --clr-grey-500: hsl(0deg 0% 49%);
    --clr-grey-600: hsl(43deg 14% 90%);
    --clr-grey-800: hsl(0deg 0% 95%);
    --clr-grey-900: hsl(0deg 0% 97%); /* seasalt */
    --clr-warm-grey-800: hsl(60deg 12% 97%);
    /* ================
    Font Families
    ================ */
    --ff-sans: "Overpass", "Noto Sans", "Segoe UI", roboto, arial, sans-serif;
    /* ================
    Typography
    ================ */
    /* line height */
    --lh-none: 1;
    --lh-sm: 1.15;
    --lh-regular: 1.4;
    --lh-m: 1.5;
    --lh-l: 1.8;
    /* fixed font size - used in navigation etc. */
    --fs-200: 0.75rem; /* 12px */
    --fs-300: 0.875rem; /* 14px */
    --fs-400: 0.875rem; /* 16px */
    --fs-500: 1rem; /* 18px */
    --fs-600: 1.125rem; /* 20px */
    --fs-650: 1.25rem; /* 22px */
    --fs-700: 1.375rem; /* 24px */
    --fs-800: 1.5rem; /* 26px */
    --fs-900: 1.625rem; /* 34px */
    --fs-1000: 2.125rem; /* 42px */
    --fs-1100: 2.65rem; /* 46px */
  }
  @media (width > 48rem) {
    :root {
      --fs-200: 0.75rem; /* 12px */
      --fs-300: 0.875rem; /* 14px */
      --fs-400: 1rem; /* 16px */
      --fs-500: 1.125rem; /* 18px */
      --fs-600: 1.25rem; /* 20px */
      --fs-650: 1.375rem; /* 22px */
      --fs-700: 1.5rem; /* 24px */
      --fs-800: 1.625rem; /* 26px */
      --fs-900: 2.125rem; /* 34px */
      --fs-1000: 2.65rem; /* 42px */
      --fs-1100: 2.875rem; /* 46px */
    }
  }
  :root {
    /* font-weight */
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    /* fluid parameters */
    --fs-hl-xxl-min: 2rem;
    --fs-hl-xxl-max: 4.756rem;
    --fs-hl-xxl-min-no-unit: 2;
    --fs-hl-xxl-max-no-unit: 4.756;
    --fs-hl-xl-min: 1.75rem;
    --fs-hl-xl-max: 3.125rem;
    --fs-hl-xl-min-no-unit: 1.75;
    --fs-hl-xl-max-no-unit: 3.125;
    --fs-hl-lg-min: 1.5rem;
    --fs-hl-lg-max: 2rem;
    --fs-hl-lg-min-no-unit: 1.5;
    --fs-hl-lg-max-no-unit: 2;
    --fs-regular-min: 1.125rem;
    --fs-regular-min-no-unit: 1.125;
    --fs-regular-max: 1.375rem;
    --fs-regular-max-no-unit: 1.37;
    /* ================
    Width Site
    ================ */
    --width-100: 26rem; /* 416px */
    --width-300: 40rem; /* 640px */
    --width-500: 82rem; /* 1312px */
    --width-600: 100rem; /* 1600px */
    --width-700: 125rem; /* 2000px */
    --width-1000: 100%;
    /* ================
    Width Elements
    ================ */
    --element-width-100: 160px;
    --element-width-200: 240px;
    --element-width-300: 320px;
    --element-width-400: 380px;
    --element-width-500: 416px;
    --element-width-700: 640px;
    /* ================
    Spacing
    ================ */
    --space-100: 0.2rem;
    --space-200: 0.25rem;
    --space-300: 0.5rem;
    --space-350: 0.6rem;
    --space-400: 0.75rem;
    --space-450: 0.8rem;
    --space-500: 1rem;
    --space-600: 1.25rem;
    --space-700: 1.5rem;
    --space-750: 1.75rem;
    --space-800: 2.5rem;
    --space-900: 3.5rem;
  }
  @media (width > 48rem) {
    :root {
      --space-100: 0.25rem; /* 4px */
      --space-200: 0.5rem; /* 8px */
      --space-300: 0.75rem; /* 12px */
      --space-350: 1rem; /* 12px */
      --space-400: 1.25rem; /* 16px */
      --space-450: 1.5rem; /* 16px */
      --space-500: 1.75rem; /* 24px */
      --space-600: 2.125rem; /* 32px */
      --space-700: 2.5rem; /* 48px */
      --space-750: 3rem; /* 48px */
      --space-800: 4.75rem; /* 64px */
      --space-900: 7rem; /* 96px */
    }
  }
  :root {
    --space-100-em: 0.2em;
    --space-200-em: 0.25em;
    --space-300-em: 0.5em;
    --space-400-em: 0.75em;
    --space-500-em: 1em;
    --space-600-em: 1.25em;
    --space-700-em: 1.5em;
    --space-800-em: 1.75em;
    --space-900-em: 2em;
  }
  @media (width > 48rem) {
    :root {
      --space-100-em: 0.25em; /* 4px */
      --space-200-em: 0.5em; /* 8px */
      --space-300-em: 0.75em; /* 12px */
      --space-400-em: 1.25em; /* 16px */
      --space-500-em: 1.75em; /* 24px */
      --space-600-em: 2.125em; /* 32px */
      --space-700-em: 2.5em; /* 48px */
      --space-800-em: 3em; /* 48px */
      --space-900-em: 4.75em; /* 64px */
    }
  }
  :root {
    /* ================
    Radius
    ================ */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    /* ================
    Border
    ================ */
    --border-width-100: 1px;
    --border-width-200: 2px;
    /* ================
    Object Size
    ================ */
    --object-size-xs: 0.75rem;
    --object-size-sm: 1rem;
    --object-size-regular: 1.375rem;
    --object-size-md: 1.5rem;
    --object-size-lg: 2rem;
    --object-size-xl: 3rem;
    --object-size-xxl: 5rem;
  }
}
/* =========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Einstellungen: Tokens Semantic
   Beschreibung: Definition von semantischen Design-Tokens basierend auf Primitiv-Tokens.
   Layer: Settings
   Wiederverwendbar: Ja
   Custom Property Definitionen: Ja
   Abhängig von:
   ========================================================================== */
/* Pattern: --[component]-[property]-[variant]-[state]:
   component: button, navigation, link, text, border, background, icon, etc.
   property: color, background, border, size, spacing, font-size, font-weight, etc.
   variant: primary, secondary, sm, lg, etc.
   state: hover, active, focus, disabled, etc.
*/
/* Token-Struktur:
    Breakpoints
   2. Focus - Globale Interaktionszustände
   3. Section - Hauptcontainer
   4. Wrapper - Content Wrapper
   5. Layout Gaps - Allgemeiner Abstand zwischen Elementen
   6. Flow Spacing - Vertikaler Rhythmus
   7. Card - Card Komponenten
   8. Equal Columns Layout - Grid Layout Utility
   9. Flex Group Layout - Flex Layout Utility
   10. Grid Auto-Fit Layout - Responsives Grid Utility
   11. Header - Header Bereich
   12. Logo - Logo Komponente
   13. Navigation - Navigationsmenü
   14. Button - Buttons
   15. Link - Links
   16. Text - Textfarben
   17. Background - Hintergrundfarben
   18. Form - Formular-Elemente
   19. Table - Tabellen-Elemente
   20. Border - Rahmen (Farben & Radius)
   21. Icon - Icon Größen
   22. Font - Typography (Schriftgrößen, Gewichte, Familien, Zeilenhöhen)
*/
/* ================
Breakpoints
================ */
/* Sass-Variablen für Breakpoints zur Verwendung in Media Queries */
/* Normale Breakpoints */
/* Container Breakpoints für Container Queries */
@layer settings {
  :root {
    /* ================
    Focus
    ================ */
    --focus-color-default: var(--clr-blue-500);
    --skip-link-color: var(--clr-white);
    --skip-link-background: var(--clr-black);
    --skip-link-focus-border-color: var(--clr-white);
    --skip-link-font-weight: var(--fw-400);
    /* ================
    Section
    ================ */
    --section-width-xs: var(--width-500);
    --section-width-sm: var(--width-600);
    --section-width-default: var(--width-700);
    --section-width-full: var(--width-1000);
    --section-padding-inline: var(--space-400); /* noch nicht verwenden */
    --section-padding-block: var(--space-800);
    --section-margin-block: var(--space-100);
    /* ================
    Wrapper
    ================ */
    --wrapper-padding-inline: var(--space-600);
    --wrapper-padding-block: var(--space-750); /* noch nicht verwenden */
    /* ================
    Layout Gaps
    ================ */
    --elements-gap-inline: var(--space-750);
    --elements-gap-block: var(--space-800);
    /* ================
    Flow Spacing
    ================ */
    --flow-spacing-block-sm: var(--space-200-em);
    --flow-spacing-block-default: var(--space-400-em); /* für normalen Flow em-Einheiten verwenden */
    --flow-spacing-block-lg: var(--space-500-em);
    --flow-grid-spacing-block: var(--space-700); /* Grid Flow muss rem sein */
    /* ================
    Card
    ================ */
    --card-padding-inline: var(--space-600);
    --card-padding-block: var(--space-700);
    --card-padding-inline-sm: var(--space-300);
    --card-padding-block-sm: var(--space-350);
    /* ================
    Equal Columns Layout
    ================ */
    --equal-columns-gap-sm: var(--space-500);
    --equal-columns-gap-default: var(--space-750);
    --equal-columns-gap-lg: var(--space-800);
    /* ================
    Flex Group Layout
    ================ */
    --flex-group-gap-default: var(--space-750);
    /* ================
    Grid Auto-Fit Layout
    ================ */
    --grid-auto-fit-column-size-min: var(--element-width-300);
    --grid-auto-fit-column-size-max: var(--element-width-400);
    /* ================
    Header
    ================ */
    --header-padding-block-default: var(--space-600);
    /* ================
    Logo
    ================ */
    --logo-width-default: 380px;
    /* ================
    Navigation
    ================ */
    --navigation-gap-inline-default: var(--space-600);
    --navigation-gap-block-default: var(--space-300);
    --navigation-font-size-default: var(--fs-650);
    --navigation-font-weight-default: var(--fw-300);
    --navigation-line-height-item: var(--lh-m);
    --navigation-font-family-default: var(--ff-sans);
    --navigation-color-default: var(--clr-black);
    --navigation-color-default-hover: var(--clr-red-500);
    --navigation-color-active: var(--clr-red-500);
    --navigation-list-row-gap-default: var(--space-300);
    /* ================
    Mobile Navigation
    ================ */
    --navigation-mobile-background-color: var(--clr-anti-flash-white);
    --navigation-mobile-background-active-color: var(--clr-anti-flash-white);
    /* ================
    Button
    ================ */
    --button-background-primary: var(--clr-red-500);
    --button-background-secondary: var(--clr-blue-500);
    --button-background-reduced: var(--clr-silver-500);
    --button-background-accent: var(--clr-red-500);
    --button-background-primary-hover: var(--clr-white);
    --button-background-secondary-hover: var(--clr-white);
    --button-background-reduced-hover: var(--clr-white);
    --button-background-accent-hover: var(--clr-white);
    --button-color-primary: var(--clr-white);
    --button-color-secondary: var(--clr-white);
    --button-color-reduced: var(--clr-black);
    --button-color-accent: var(--clr-black);
    --button-color-primary-hover: var(--clr-black);
    --button-color-secondary-hover: var(--clr-black);
    --button-color-reduced-hover: var(--clr-black);
    --button-color-accent-hover: var(--clr-black);
    --button-padding-inline: var(--space-500);
    --button-padding-block: var(--space-350);
    --button-padding-inline-sm: var(--space-350);
    --button-padding-block-sm: var(--space-200);
    /* ================
    Link
    ================ */
    --link-color-default: var(--clr-black);
    --link-color-default-hover: var(--clr-red-500);
    /* ================
    Text
    ================ */
    --text-color-default: var(--clr-black);
    --text-color-light: var(--clr-grey-500);
    --text-color-extra-light: var(--clr-white);
    --text-color-default-hover: var(--clr-red-500);
    --text-color-default-inverted: var(--clr-grey-600);
    --text-color-default-inverted-hover: var(--clr-red-500);
    /* ================
    Background
    ================ */
    --background-color-extra-dark: var(--clr-black);
    --background-color-default: var(--clr-white);
    --background-color-light: var(--clr-grey-800);
    --background-color-extra-light: var(--clr-grey-900);
    /* ================
    Form
    ================ */
    --form-field-background-color-default: var(--clr-grey-900);
    --form-field-background-color-default-active: var(--clr-white);
    --form-mandatory-color: var(--clr-red-500);
    --form-error-color: var(--clr-red-500);
    --form-field-padding-inline: var(--space-400);
    --form-field-padding-block: var(--space-300);
    /* ================
    Table
    ================ */
    --table-header-background-color: var(--clr-grey-800);
    --table-header-color: var(--clr-black);
    --table-row-background-color: var(--clr-white);
    --table-row-odd-background-color: var(--clr-grey-900);
    --table-border-color: var(--clr-grey-600);
    --table-cell-padding-inline-sm: var(--space-200);
    --table-cell-padding-inline-default: var(--space-300);
    --table-cell-padding-block-sm: var(--space-100);
    --table-cell-padding-block-default: var(--space-200);
    /* ================
    Border
    ================ */
    --border-color-default: var(--clr-grey-500);
    --border-color-light: var(--clr-grey-600);
    --border-color-extra-light: var(--clr-white);
    --border-radius-lg: var(--radius-lg);
    --border-radius-default: var(--radius-md);
    --border-width-default: var(--border-width-100);
    /* ================
    Icon
    ================ */
    --icon-size-sm: var(--object-size-sm);
    --icon-size-regular: var(--object-size-regular);
    --icon-size-lg: var(--object-size-lg);
    --icon-size-xl: var(--object-size-xl);
    --icon-padding-inline-regular: var(--space-200);
    --icon-padding-inline-lg: var(--space-300);
    /* ================
    Fonts
    ================ */
    /* Schriftgrößen */
    --font-size-heading-sm: var(--fs-650);
    --font-size-heading-regular: var(--fs-800);
    --font-size-heading-lg-min: var(--fs-hl-lg-min);
    --font-size-heading-lg-max: var(--fs-hl-lg-max);
    --font-size-heading-lg-min-no-unit: var(--fs-hl-lg-min-no-unit);
    --font-size-heading-lg-max-no-unit: var(--fs-hl-lg-max-no-unit);
    --font-size-heading-xl-min: var(--fs-hl-xl-min);
    --font-size-heading-xl-max: var(--fs-hl-xl-max);
    --font-size-heading-xl-min-no-unit: var(--fs-hl-xl-min-no-unit);
    --font-size-heading-xl-max-no-unit: var(--fs-hl-xl-max-no-unit);
    --font-size-heading-xxl-min: var(--fs-hl-xxl-min);
    --font-size-heading-xxl-max: var(--fs-hl-xxl-max);
    --font-size-heading-xxl-min-no-unit: var(--fs-hl-xxl-min-no-unit);
    --font-size-heading-xxl-max-no-unit: var(--fs-hl-xxl-max-no-unit);
    --font-size-regular-min: var(--fs-regular-min);
    --font-size-regular-min-no-unit: var(--fs-regular-min-no-unit);
    --font-size-regular-max: var(--fs-regular-max);
    --font-size-regular-max-no-unit: var(--fs-regular-max-no-unit);
    /* Schriftgrößen statisch */
    --font-size-xs: var(--fs-400);
    --font-size-sm: var(--fs-500);
    --font-size-regular: var(--fs-650);
    --font-size-md: var(--fs-700);
    --font-size-lg: var(--fs-800);
    /* Schriftgewicht */
    --font-weight-light: var(--fw-200);
    --font-weight-book: var(--fw-300);
    --font-weight-regular: var(--fw-400);
    --font-weight-medium: var(--fw-500);
    --font-weight-semi-bold: var(--fw-600);
    --font-weight-bold: var(--fw-700);
    --font-weight-heavy: var(--fw-900);
    /* Breakpoints für Fluid Typography */
    /* Sass-Variablen werden nicht "automatisch" in Custom Properties substituiert, daher verwenden wir hier die Interpolation #. */
    --fluid-breakpoint-min: 26.25rem;
    --fluid-breakpoint-max: 90rem;
    --fluid-breakpoint-min-no-unit: 26.25;
    --fluid-breakpoint-max-no-unit: 90;
    /* Schriftfamilien */
    --font-family-base: var(--ff-sans);
    --font-family-heading: var(--ff-sans);
    --line-height-body: var(--lh-regular);
    --line-height-heading: var(--lh-sm);
  }
}
/* =========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Einstellungen: Tokens Project Semantic
   Beschreibung: Definition von tokens für das Projekt.
   Layer: Settings
   Wiederverwendbar: Ja
   Custom Property Definitionen: Ja
   Abhängig von:
   ========================================================================== */
@layer settings {
  :root {
    /* ================
    Brand Colors
    ================ */
    --brand-color-primary: var(--clr-red-500);
    --brand-color-secondary: var(--clr-blue-500);
    --clr-anti-flash-white: #F0F1F1;
    --clr-silver-500: hsl(195deg 8% 81%);
    /* ================
    Background
    ================ */
    --background-color-blue: var(--clr-grey-blue);
    --background-color-anti-flash-white: var(--clr-anti-flash-white);
    /* ================
    Gap
    ================ */
    --alternating-split-gap: var(--space-300);
  }
}
/* 10) generic */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Generic: Reset
   Description: CSS Reset styles to provide a clean slate.
   Layer: Generic
   Reusable: No
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
@layer generic {
  /* Reset styles */
  /* do we need border-box now with grid and flexbox?
      https://www.youtube.com/watch?v=PtAcpV6TAGM */
  /** ,
  *::before,
  *::after {
      box-sizing: border-box;
  } */
  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    text-size-adjust: none;
  }
  /* I’ll always favour stripping out user agent styles for margin in favour of defining flow and space at a more macro level. With logical properties, I’m removing the end margin now instead of all sides in the older reset. It seems to work well in production. */
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
    /* margin-block-end: 0; */
  }
  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role=list] {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* I like a nice legible line height that gets inherited. Setting a min height as 100vh on the body is pretty handy too, especially if you’re gonna be setting decorative elements. It might be tempting to use a new unit like dvh, but if you delve deep like Ahmad has, you’ll see that can cause more problems than solutions, which is not what you want your reset to be doing! */
  body {
    min-block-size: 100vh;
    line-height: var(--line-height-body);
  }
  /* Just like it’s handy to have a generous line-height globally, it’s equally handy to have a shorter line-height for headings and buttons etc. It’s definitely worth removing or modifying this rule if your font has large ascenders and descenders though. The last thing you want is those clashing with each other and creating an accessibility issue. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  label {
    line-height: 1.1;
  }
  /* Balance text wrapping on headings */
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
  :where(p, li) {
    text-wrap: pretty;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  /*  Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
  pre {
    font-family: monospace;
    font-size: 1em;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Generic: Fonts
   Description: Import local fonts.
   Layer: Generic
   Reusable: No
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
/* relative root path from compiled CSS to fonts folder is css/ */
@layer generic {
  /* Thin */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  /* Extra Light */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  /* Light */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  /* Regular */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  /* Semi Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  /* Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  /* Extra Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  /* Extra Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
}
/* 20) base */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: Root Element
   Description: Base for the root elements like html and body.
   Layer: Base
   Reusable: No
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  /* This CSS checks the user’s system preference for motion. If the user has not requested reduced motion (prefers-reduced-motion: no-preference), it applies scroll-behavior: smooth to the <html> element. Use scroll-margin or scroll-padding for spacing */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    background-color: var(--background-color-default);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Basis: Typography Styles
   Beschreibung: Basis-Typography Styles für das Theme.
   Layer: Base
   Wiederverwendbar: Ja
   Custom Property Definitionen: Nein
   Abhängig von: tokens.semantic.css
   ========================================================================== */
@layer base {
  html {
    font-family: var(--font-family-base);
    line-height: var(--line-height-body);
  }
  body {
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-light);
    color: var(--text-color-default);
  }
  /* Formel für den bevorzugten Wert in clamp() */
  /*
  slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
  yAxisIntersection = -minWidth * slope + minFontSize
  preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]
  */
  /*
  --slope: calc((var(--max-font-size) - var(--min-font-size)) / (var(--max-width) - var(--min-width)));
  --intercept: calc(var(--min-font-size) - var(--slope) * var(--min-width));
  --fluid-font-size: calc(var(--slope) * 100vw + var(--intercept));
  */
  /* Headlines (clamp + fallback) */
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--font-family-heading);
    line-height: var(--line-height-heading);
    color: var(--text-color-default);
  }
  h1 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-xxl-min);
    --max-font-size: var(--font-size-heading-xxl-max);
    --min-font-size-no-unit: var(--font-size-heading-xxl-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-xxl-max-no-unit);
    /* fluid typography */
    --slope: calc(
            (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit))
    );
    --intercept: calc(
            var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) *
            var(--fluid-breakpoint-min)
    );
    /* Fallback */
    /* fluid typography */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-heavy);
    margin-block-end: var(--flow-spacing-block-sm);
  }
  h2 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-xl-min);
    --max-font-size: var(--font-size-heading-xl-max);
    --min-font-size-no-unit: var(--font-size-heading-xl-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-xl-max-no-unit);
    /* fluid typography */
    --slope: calc(
            (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit))
    );
    --intercept: calc(
            var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) *
            var(--fluid-breakpoint-min)
    );
    /* Fallback */
    /* fluid typography */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-heavy);
    text-align: center;
    margin-inline: auto;
  }
  h3 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-lg-min);
    --max-font-size: var(--font-size-heading-lg-max);
    --min-font-size-no-unit: var(--font-size-heading-lg-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-lg-max-no-unit);
    /* fluid typography */
    --slope: calc(
            (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit))
    );
    --intercept: calc(
            var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) *
            var(--fluid-breakpoint-min)
    );
    /* Fallback */
    /* fluid typography */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-bold);
  }
  /* h4–h5 (Fix) */
  h4 {
    font-size: var(--font-size-heading-regular);
    font-weight: var(--font-weight-semi-bold);
  }
  h5 {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
  }
  .headline--left {
    text-align: left;
  }
  .headline--center {
    text-align: center;
    margin-inline: auto;
  }
  /* im Inhaltselement "Text" nur die direkten Kindelemente */
  /* nur verwenden wenn die Regel von _e-contao-typography.scss nicht greift */
  /* @see ../40-extensions/contao/_e-contao-typography.scss */
  .headline--center.content-text > :is(h2, h3, h4, h5, h6) {
    text-align: center;
    margin-inline: auto;
  }
  /* Text-Elemente */
  th,
  td,
  caption,
  p {
    color: var(--text-color-default);
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-regular-min);
    --max-font-size: var(--font-size-regular-max);
    --min-font-size-no-unit: var(--font-size-regular-min-no-unit);
    --max-font-size-no-unit: var(--font-size-regular-max-no-unit);
    /* fluid typography */
    --slope: calc(
            (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit))
    );
    --intercept: calc(
            var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) *
            var(--fluid-breakpoint-min)
    );
    /* Fallback */
    /* fluid typography */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    hyphens: auto; /* Silbentrennung aktivieren, um Überlaufen auf kleinen Viewports zu verhindern */
  }
  strong,
  b {
    font-weight: var(--font-weight-medium);
  }
  a {
    color: var(--text-color-default);
    transition: color 0.3s ease;
  }
  @media (width < 26.25rem) {
    h1,
    h2,
    h3,
    h4,
    h5 {
      text-align: left;
    }
    .headline--center {
      text-align: left;
      margin-inline: 0;
    }
    .headline--center.content-text > :is(h2, h3, h4, h5, h6) {
      text-align: left;
      margin-inline: 0;
    }
  }
  /* focus-visible verwenden und nicht focus, da nach einem Klick auf einen Button der Button nicht im Focus bleiben sollte */
  a:hover,
  a:focus-visible {
    color: var(--text-color-default-hover);
  }
  @media (prefers-reduced-motion: reduce) {
    a {
      transition: none !important;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: Button Base
   Description: Base styles for buttons.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  button {
    all: unset; /* reset all button styles */
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
  }
  .button {
    --button-background: var(--button-background-primary);
    --button-color: var(--button-color-primary);
    padding-inline: var(--button-padding-inline);
    padding-block: var(--button-padding-block);
    background-color: var(--button-background);
    color: var(--button-color);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  .button.button--primary {
    --button-background: var(--button-background-primary);
    --button-color: var(--button-color-primary);
  }
  .button.button--primary:hover {
    --button-color-hover: var(--button-color-primary-hover);
    --button-background-hover: var(--button-background-primary-hover);
  }
  .button.button--secondary {
    --button-background: var(--button-background-secondary);
    --button-color: var(--button-color-secondary);
  }
  .button.button--secondary:hover {
    --button-color-hover: var(--button-color-secondary-hover);
    --button-background-hover: var(--button-background-secondary-hover);
  }
  .button.button--accent {
    --button-background: var(--button-background-accent);
    --button-color: var(--button-color-accent);
  }
  .button.button--accent:hover {
    --button-color-hover: var(--button-color-accent-hover);
    --button-background-hover: var(--button-background-accent-hover);
  }
  .button.button--reduced {
    --button-background: var(--button-background-reduced);
    --button-color: var(--button-color-reduced);
  }
  .button.button--reduced:hover {
    --button-color-hover: var(--button-color-reduced-hover);
    --button-background-hover: var(--button-background-reduced-hover);
  }
  .button.button--only-text-icon {
    --button-background: transparent;
    --button-color: var(--navigation-color-default);
  }
  .button.button--only-text-icon:hover {
    --button-color-hover: var(--navigation-color-default-hover);
    --button-background-hover: transparent;
  }
  .button {
    /* fallback for standard */
  }
  .button:hover {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
  }
  .button.button--center {
    margin-inline: auto;
  }
  button.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  @media (width < 26.25rem) {
    .button.button--center {
      margin-inline: 0;
    }
  }
  /* center button inside content-download wrapper with class button--center */
  .content-download.button--center .button {
    margin-inline: auto;
  }
  @media (width < 26.25rem) {
    .content-download.button--center .button {
      margin-inline: 0;
    }
  }
  /* focus styles */
  :where(button, .button) {
    outline: none;
  }
  :where(button, .button):focus-visible {
    outline: 2px solid var(--focus-color-default);
    outline-offset: 3px;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: Image Styles
   Description: Base styles for images.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  img {
    border-radius: var(--border-radius-default);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: Video Styles
   Description: Base styles for videos.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  video {
    border-radius: var(--border-radius-default);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: SVG Icon Base
   Description: Base for SVG icons with size modifiers.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  .svg-icon {
    --svg-icon-width: var(--icon-size-regular);
    --svg-icon-height: var(--icon-size-regular);
    display: inline-flex;
    inline-size: var(--svg-icon-width);
    block-size: var(--svg-icon-width);
  }
  /* size modifiers */
  .svg-icon--size-sm {
    --svg-icon-width: var(--icon-size-sm);
    --svg-icon-height: var(--icon-size-sm);
  }
  .svg-icon--size-lg {
    --svg-icon-width: var(--icon-size-lg);
    --svg-icon-height: var(--icon-size-lg);
  }
  .svg-icon--size-xl {
    --svg-icon-width: var(--icon-size-xl);
    --svg-icon-height: var(--icon-size-xl);
  }
  .svg-icon--size-font {
    --svg-icon-width: 1em;
    --svg-icon-height: 1em;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: Button Base
   Description: Base styles for buttons.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  .card {
    --flow-spacing-block: var(--flow-spacing-block-default);
    display: grid;
  }
  /* only apply styles if there are more than one child - it is the case if subgrid is used - exclude if an svg is a child */
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > * {
    padding-inline: 0;
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > *:last-child {
    padding-block-end: var(--card-padding-block);
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > *:first-child {
    padding-block-start: var(--card-padding-block);
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > :nth-child(n+2) {
    margin-block-start: var(--flow-spacing-block);
  }
  /* special styles if figure/image is present */
  .card:has(.card__image) > *:not(:first-child) {
    padding-inline: var(--card-padding-inline);
  }
  .card:has(.card__image) > *:first-child {
    padding-block-start: 0;
  }
  .card:has(.card__image) > *:last-child {
    padding-block-end: var(--card-padding-block);
  }
  .card:has(.card__image) > *:nth-child(2) {
    padding-block-start: var(--card-padding-block);
  }
  .card:has(.card__image) > :nth-child(n+2) {
    margin-block-start: 0;
  }
  .card:has(.card__image) > :nth-child(n+3) {
    margin-block-start: var(--flow-spacing-block);
  }
  /* card modifiers */
  .card--background,
  .card--border {
    border-radius: var(--border-radius-default);
    padding-inline: var(--elements-gap-inline);
    padding-block: var(--elements-gap-block);
  }
  .card--background {
    background-color: var(--background-color-light);
  }
  .card--border {
    border: var(--border-width-default) solid var(--border-color-default);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Base: List Base
   Description: Base styles for lists.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer base {
  li {
    color: var(--text-color-default);
  }
  li::marker {
    color: var(--brand-color-primary);
  }
  .link-list {
    /* damit der Link in der Liste große genug ist für den Touch-Zielbereich */
    --link-list-row-padding-block: var(--navigation-list-row-gap-default);
    --link-list-row-padding-inline: 0;
    --link-list-row-min-block-size: 2.75rem;
    --link-list-row-gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Die Zeile definiert Höhe/Spacing – egal ob a oder span */
  .link-list__row {
    padding-block: var(--link-list-row-padding-block);
    padding-inline: var(--link-list-row-padding-inline);
    min-block-size: var(--link-list-row-min-block-size);
  }
}
/* 30) layout */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Layout: Wrapper and Section Layout
   Description: Styles for the main layout wrapper and section spacing.
   Layer: Layout
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer layout {
  .wrapper {
    --wrapper-max-width: var(--section-width-default);
    --wrapper-padding: var(--wrapper-padding-inline);
    /* width: min(100% - 2rem, 70rem); */
    max-width: var(--wrapper-max-width); /* just in case min() is not supported - 1130px */
    margin-inline: auto;
    /* attention - padding-inline makes the box larger - so max-width is not the real max-width and the content is smaller - solution is calc(var(--wrapper-max-width) + 2rem) for max-width */
    padding-inline: var(--wrapper-padding);
    /* Modifier classes for different widths - it also could bei BEM modifiers .wrapper--wide - data-attributs are easier for javascript and it can be used in nesting */
  }
  .wrapper.wrapper--width-full {
    /* we only need to change the custom property */
    --wrapper-max-width: var(--section-width-full);
  }
  .wrapper.wrapper--width-standard {
    --wrapper-max-width: var(--section-width-default);
  }
  .wrapper.wrapper--width-medium {
    --wrapper-max-width: var(--section-width-sm);
  }
  .wrapper.wrapper--width-narrow {
    --wrapper-max-width: var(--section-width-xs);
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) {
    /* use content-block to set spacing between content elements inside sections */
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) .content-block > * + * {
    margin-block-start: var(--elements-gap-block, 1.25rem);
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) {
    /* special case for headlines directly inside wrapper and not h1 for space between elements */
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) .content-block > .content-headline:not(h1) + * {
    margin-block-start: var(--flow-spacing-block-default);
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) {
    /* special case for content-elements follow each other */
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) .content-block > :is(.content-text, .content-table) + :is(.content-text, .content-table) {
    margin-block-start: var(--flow-spacing-block-default);
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) {
    /* better solution for all content elements - use class .content-element on all content elements */
    /* .content-block > .content-element + .content-element {
        margin-block-start: var(--flow-spacing-block-default);
    } */
    /* needs ce_rsce_headline_subheadline */
    /* special case for rsce_two_columns_text after ce_rsce_headline_subheadline except if headline is h1 - define smaller space */
  }
  section:not(.hero, .site-footer__inner, .site-footer__bottom) .content-block > .ce_rsce_headline_subheadline:not(h1) + .content-collection:has(.ce_rsce_two_columns_text) {
    margin-block-start: var(--flow-spacing-block-default);
  }
  section {
    padding-block: var(--section-padding-block);
  }
  section section {
    padding-block: 0; /* remove padding for nested sections */
  }
  .element--center {
    margin-inline: auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Layout: Flow Spacing
   Description: Utility classes for adding consistent vertical spacing between elements.
   Layer: Layout
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer layout {
  /* flow only selecting elements if the have an element before them - so the first child will not have a margin */
  /* alternativ is .flow > :not(:first-child) - brings in extra speceficity */
  .flow > * + * {
    /* using em so it is relative to the font-size of the element - rem would be relative to the root font-size - the spacing on headlines is dependen on the font-size */
    /* using margin-block-start: because we want larger spacing on top - and not on the bottom - if we have a heading followed by a paragraph - the spacing should be above the paragraph - not below the heading */
    margin-block-start: var(--flow-spacing-block-default);
    hyphens: auto; /* enable hyphenation for headings to prevent overflowing on small viewport */
    overflow-wrap: break-word;
  }
  /* grid-flow is a grid version of flow - so all elements are in a grid - but they have spacing between them - this is useful if you want to align items in a grid but still have spacing between them and be consistent */
  .grid-flow {
    display: grid;
    gap: var(--flow-grid-spacing-block);
    align-content: start;
    justify-items: start;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Layout: Equal Columns Grid
   Description: A grid layout that creates equal-width columns with customizable gaps and alignment.
   Layer: Layout
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer layout {
  .equal-columns {
    --equal-columns-gap-columns: var(--equal-columns-gap-default);
    --equal-columns-gap-rows: var(--equal-columns-gap-default);
    container-type: inline-size;
    container-name: equal-columns;
    display: grid;
    gap: var(--equal-columns-gap-rows) var(--equal-columns-gap-columns);
    align-items: var(--column-layout-alignment, start);
    /* set gap when content-downloads are inside */
  }
  .equal-columns:has(.content-download) {
    gap: var(--flow-grid-spacing-block) var(--equal-columns-gap-columns);
  }
  .equal-columns.equal-columns--gap-lg {
    --equal-columns-gap: var(--equal-columns-gap-lg);
  }
  .equal-columns.equal-columns--alignment-center {
    --column-layout-alignment: center;
  }
  .equal-columns.equal-columns--alignment-bottom {
    --column-layout-alignment: end;
  }
  .equal-columns.equal-columns--alignment-stretch {
    --column-layout-alignment: stretch;
  }
  .equal-columns.equal-columns--only-content {
    /* when only content is inside - we want flow - like rsce-two-columns */
    --equal-columns-gap-rows: var(--flow-spacing-block-default);
  }
  .equal-columns {
    /* ensure headings are left aligned inside the grid */
  }
  .equal-columns h2,
  .equal-columns h3,
  .equal-columns h4,
  .equal-columns h5 {
    text-align: left;
  }
  /* grid-auto-flow: column; -> all in one row - grid-auto-columns: 1fr; -> all columns have the same width
  this is a mobile first approach - so on small screens it is a normal flow layout - on larger screens it is a grid with equal columns */
  @container article-wrapper (width > 46rem) {
    .equal-columns {
      grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-auto-fit-column-size-min, 250px), 100%), 1fr));
    }
  }
  /* specify container to enable container queries */
  .content-collection {
    container-type: inline-size;
    container-name: article-wrapper;
    /* set margin for first child after headings in content-collection - modul equal-columns */
  }
  .content-collection > :is(h2, h3, h4, h5, h6):first-child + * {
    margin-block-start: var(--flow-spacing-block-default);
  }
  /* ================
  eaqual columns with fixed number of 4 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .equal-columns--columns-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .equal-columns--columns-4.equal-columns--columns-center > * {
      grid-column: span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      /* Last row has only 1 item → center it */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  @container article-wrapper (width > 70rem) {
    .equal-columns--columns-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      grid-template-columns: repeat(8, 1fr);
    }
    .equal-columns--columns-4.equal-columns--columns-center > * {
      grid-column: span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      /* reset from width > 46rem */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      /* Fall 1: letzte Reihe hat nur 1 Item → in die Mitte */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+1):nth-last-child(1) {
      grid-column: 4/span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      /* Fall 2: letzte Reihe hat 2 Items → mittig */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+1):nth-last-child(2) {
      grid-column: 3/span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+2):nth-last-child(1) {
      grid-column: 5/span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center {
      /* Fall 3: letzte Reihe hat 3 Items → auch mittig */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+1):nth-last-child(3) {
      grid-column: 2/span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+2):nth-last-child(2) {
      grid-column: 4/span 2;
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(4n+3):nth-last-child(1) {
      grid-column: 6/span 2;
    }
  }
  /* ================
  eaqual columns with fixed number of 3 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .equal-columns--columns-3 {
      grid-template-columns: repeat(2, 1fr);
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .equal-columns--columns-3.equal-columns--columns-center > * {
      grid-column: span 2;
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      /* handle last row with less than 3 items and center */
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  @container article-wrapper (width > 70rem) {
    .equal-columns--columns-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      grid-template-columns: repeat(6, 1fr);
    }
    .equal-columns--columns-3.equal-columns--columns-center > * {
      grid-column: span 2;
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      /* reset from width > 46rem */
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: span 2;
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      /* Fall 1: letzte Reihe hat nur 1 Item → in die Mitte */
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(3n+1):nth-last-child(1) {
      grid-column: 3/span 2;
    }
    .equal-columns--columns-3.equal-columns--columns-center {
      /* Fall 2: letzte Reihe hat 2 Items → mittig */
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(3n+1):nth-last-child(2) {
      grid-column: 2/span 2;
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(3n+2):nth-last-child(1) {
      grid-column: 4/span 2;
    }
  }
  /* ================
  eaqual columns with fixed number of 2 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .equal-columns--columns-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .equal-columns--columns-2.equal-columns--two-columns-left-wide {
      grid-template-columns: 3fr 2fr;
    }
    .equal-columns--columns-2.equal-columns--two-columns-right-wide {
      grid-template-columns: 2fr 3fr;
    }
    .equal-columns--columns-2.equal-columns--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .equal-columns--columns-2.equal-columns--columns-center > * {
      grid-column: span 2;
    }
    .equal-columns--columns-2.equal-columns--columns-center {
      /* handle last row with less than 2 items and center */
    }
    .equal-columns--columns-2.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Layout: Flex Group
   Description: Utility class for creating flexible groups of items with consistent spacing and alignment.
   Layer: Layout
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer layout {
  .flex-group {
    display: flex;
    gap: var(--flex-group-gap-default, 0.5rem);
    flex-wrap: wrap;
    /* align-items is for the cross axis - so vertical if flex-direction is row - and horizontal if flex-direction is column */
    align-items: var(--flex-group-alignment, center);
    /* justify-content is for the main axis - so horizontal if flex-direction is row - and vertical if flex-direction is column */
    justify-content: var(--flex-group-justification, flex-start);
  }
  .flex-group.flex-group--align-start {
    --flex-group-alignment: start;
  }
  .flex-group.flex-group--align-center {
    --flex-group-alignment: center;
  }
  .flex-group.flex-group--align-end {
    --flex-group-alignment: end;
  }
  .flex-group.flex-group--justify-center {
    --flex-group-justification: center;
  }
  .flex-group.flex-group--justify-space-between {
    --flex-group-justification: space-between;
  }
  .flex-group.flex-group--justify-end {
    --flex-group-justification: flex-end;
  }
  .flex-group.flex-group--justify-start {
    --flex-group-justification: flex-start;
  }
  @media (width < 26.25rem) {
    .flex-group.flex-group--justify-center {
      --flex-group-justification: flex-start;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Layout: Background colors
   Description: Styles for different background colors in one section.
   Layer: Layout
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css, l-grid.scss
   ========================================================================== */
@layer layout {
  .background-color-two-sides {
    padding-block: 0;
  }
  .background-color-two-sides:has(.wrapper--width-full) .background-color-two-sides--wrapper {
    /* overwrite grid settings */
    --equal-columns-gap-columns: var(--section-margin-block);
    --equal-columns-gap-rows: var(--section-margin-block);
  }
  .background-color-two-sides:has(.wrapper--width-full) .background-color-two-sides--wrapper > * {
    padding-block: var(--section-padding-block);
  }
  .background-color-two-sides:has(.wrapper--width-full) .background-color-two-sides--wrapper > :first-child > * {
    max-width: calc(var(--section-width-default) / 2);
    margin-inline-start: auto;
    padding-inline: var(--elements-gap-inline);
    padding-block: calc(var(--elements-gap-block) / 2);
  }
  .background-color-two-sides:has(.wrapper--width-full) .background-color-two-sides--wrapper > :last-child > * {
    max-width: calc(var(--section-width-default) / 2);
    margin-inline-end: auto;
    padding-inline: var(--elements-gap-inline);
    padding-block: calc(var(--elements-gap-block) / 2);
  }
  .background-color--light {
    background-color: var(--background-color-light);
  }
  .background-color--default {
    background-color: var(--background-color-default);
  }
  .background-color--extra-light {
    background-color: var(--background-color-extra-light);
  }
  .background-color--dark {
    background-color: var(--background-color-extra-dark);
  }
}
/* 40) contao */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Flow Spacing
   Description: Adds consistent vertical spacing between elements in Contao.
   Layer: Extensions/contao
   Reusable: No
   Custom Property Definitions: No
   Depends on:
   Extension:
   ========================================================================== */
@layer extensions {
  .content-text > * + *,
  .content-text > .rte > * + * {
    margin-block-start: var(--flow-spacing-block-default, 1.25em);
  }
  /* Special handling for first heading inside content-text */
  .content-text > h1 + * {
    margin-block-start: var(--elements-gap-block);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao News Module Styles
   Description: Custom styles for the Contao news module to fit layout.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension: codefog/contao-news_categories
   ========================================================================== */
@layer extensions {
  /* breakpoint is the same as equal-columns */
  @media (width > 46rem) {
    .newslist {
      grid-template-rows: auto auto auto;
    }
  }
  .newslist > .newslist__card:first-child {
    grid-column: 1/-1;
  }
  .newslist__card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }
  a.newslist__link {
    text-decoration: none;
    color: var(--text-color-default);
  }
  .newslist__card > *:not(:first-child) {
    padding-inline: var(--card-padding-inline, 1rem);
  }
  .newslist__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block, 1.5rem);
  }
  .newslist__card > *:last-child {
    padding-block-end: var(--card-padding-block, 1.5rem);
  }
  .newslist__card > :nth-child(n+3) {
    margin-block-start: var(--flow-grid-spacing-block, 1.5rem);
  }
  .newslist__info .newslist__meta {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm);
    color: var(--text-color-default);
    gap: 0.25em 0.9rem;
    flex-flow: wrap;
  }
  .newslist__info .newslist__divider {
    padding-inline-end: 0.9rem;
  }
  .layout_full {
    margin-block-end: var(--section-padding-block);
    /* display none for info under headline */
  }
  .layout_full .info {
    display: none;
  }
  /* backlink */
  .mod_newsreader a {
    text-decoration: none;
  }
  /* limit max-width of content inside newsreader except for galleries */
  .wrapper--width-standard .content-block > *:not(.content-gallery) {
    max-width: var(--section-width-sm);
    margin-inline: auto;
  }
  @media (max-width: 26.25rem) {
    .newslist__info .newslist__meta {
      display: block;
    }
    .newslist__info .newslist__divider {
      display: none;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Typography Adjustments
   Description: Custom typography styles to enhance readability and aesthetics.
   Layer: Extensions/contao
   Reusable: No
   Custom Property Definitions: No
   Depends on:
   Extension:
   ========================================================================== */
@layer extensions {
  .wrapper--width-narrow :is(h2, h3, h4, h5, h6),
  .wrapper--width-medium :is(h2, h3, h4, h5, h6),
  .wrapper--width-standard :is(h2, h3, h4, h5, h6) {
    max-width: 25em;
  }
  .wrapper--width-narrow > .content-text,
  .wrapper--width-medium > .content-text,
  .wrapper--width-standard > .content-text {
    max-width: 75ch;
  }
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h6,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h6,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h6 {
    text-align: left;
  }
  .wrapper--width-narrow > .content-text:has(.u-text-center),
  .wrapper--width-medium > .content-text:has(.u-text-center),
  .wrapper--width-standard > .content-text:has(.u-text-center) {
    margin-inline: auto;
  }
  /* max-width in letter characters for better readability - only in wrapper and not .equal-columns - in equal-coulmns the max-widt is defined by columns */
  .wrapper--width-narrow > *:not(:has(.equal-columns)) .content-text,
  .wrapper--width-medium > *:not(:has(.equal-columns)) .content-text,
  .wrapper--width-standard > *:not(:has(.equal-columns)) .content-text {
    max-width: 65ch;
  }
  .wrapper--width-standard > * .ce_rsce_two_columns_text {
    max-width: var(--section-width-sm);
    margin-inline: auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Swiper Adjustments
   Description: Custom styles for Swiper integration in Contao.
   Layer: Extensions/contao
   Reusable: No
   Custom Property Definitions: No
   Depends on:
   Extension:
   ========================================================================== */
@layer extensions {
  :root {
    --swiper-navigation-size: 2rem !important;
    /* --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px; */
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-size: 16px;
    --swiper-pagination-bullet-width: 16px;
    --swiper-pagination-bullet-height: 16px;
    --swiper-pagination-bullet-inactive-color: #f5f5f5;
    --swiper-pagination-bullet-horizontal-gap: 0.3rem;
    --swiper-theme-color: #000 !important;
    --swiper-navigation-color: var(--swiper-theme-color);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Form Module Styles
   Description: Custom styles for the Contao form module to fit layout.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  /* Grundlayout Formular */
  .formbody {
    display: grid;
    gap: var(--flow-grid-spacing-block, 1.25rem);
    align-content: start;
  }
  .formbody .invisible {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .formbody fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }
  .formbody > fieldset > legend {
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semi-bold);
  }
  .formbody .widget > * + *,
  .formbody fieldset > * + *,
  .formbody > fieldset > legend + * {
    margin-block-start: var(--flow-spacing-block-sm);
  }
  .formbody > fieldset > * + * {
    margin-block-start: var(--equal-columns-gap-rows);
  }
  .formbody .widget > p.help {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
    font-style: italic;
    color: var(--text-color-light);
  }
  .formbody .widget > p.error {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-book);
    font-style: italic;
    color: var(--form-error-color);
  }
  .formbody input.text,
  .formbody textarea,
  .formbody select {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--border-radius-default);
    border: 1px solid var(--border-color-light);
    background: var(--form-field-background-color-default);
    padding-inline: var(--form-field-padding-inline);
    padding-block: var(--form-field-padding-block);
    font-size: 1rem;
    line-height: 1.4;
    outline: none;
  }
  .formbody input.upload {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.4;
    outline: none;
  }
  .formbody input.upload[type=file]::file-selector-button {
    background: var(--button-background-reduced);
    color: var(--button-color-reduced);
    border: none;
    padding-inline: var(--button-padding-inline);
    padding-block: var(--button-padding-block);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  .formbody input.upload[type=file]::file-selector-button:hover {
    background: var(--button-color-reduced-hover);
    color: var(--button-background-reduced-hover);
  }
  .formbody textarea {
    min-height: 16rem;
    resize: vertical;
  }
  .formbody select {
    padding: 0.75rem 2rem 0.75rem 0.75rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.245 4L12 18.374L0.781001 4L1.02202e-06 4.619L12 20L24 4.609L23.245 4Z' fill='currentColor'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 10px;
    cursor: pointer;
  }
  .formbody span.mandatory {
    color: var(--form-mandatory-color);
  }
  .formbody input.text:focus,
  .formbody textarea:focus {
    border-color: var(--focus-color-default);
  }
  .formbody label,
  .formbody legend span:not(.invisible) {
    display: inline-block;
  }
  .formbody fieldset fieldset > legend,
  .formbody .checkbox_container legend,
  .formbody label {
    font-weight: var(--fw-300);
  }
  .formbody .checkbox_container label {
    font-weight: inherit;
  }
  .formbody .checkbox_container span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .formbody .radio_container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1em;
  }
  .formbody .radio_container span {
    flex: 0 0 auto;
  }
  .formbody .radio_container label {
    font-weight: inherit;
  }
  .formbody {
    /* & > .widget-submit {
        margin-block-start: var(--elements-gap-block);
    } */
  }
  .form--legend-invisible .formbody > fieldset > legend {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  /* ajax conformation message */
  .form-confirmation p {
    font-size: var(--font-size-md);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Table Adjustments
   Description: Custom styles for Contao table elements to improve layout and readability.
   Layer: Extensions/contao
   Reusable: No
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  .wrapper--width-standard > .content-table {
    max-width: 65ch;
    margin-inline: auto;
  }
  .content-table table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--flow-grid-spacing-block, 1.25rem);
    text-align: left;
  }
  .content-table table th,
  .content-table table td {
    border: 1px solid var(--table-border-color);
    padding: var(--table-cell-padding-block-default, 0.5rem) var(--table-cell-padding-inline-default, 0.75rem);
  }
  .content-table table th {
    background-color: var(--table-header-background-color);
    font-weight: var(--font-weight-medium);
  }
  .content-table table tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-background-color);
  }
  .content-table table caption {
    color: var(--text-color-light);
    font-size: var(--font-size-sm);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao gallery styles
   Description: Custom styles for Contao gallery content elements.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  .content-gallery ul {
    --equal-columns-gap-columns: var(--equal-columns-gap-default);
    --equal-columns-gap-rows: var(--equal-columns-gap-default);
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--equal-columns-gap-rows, 1rem) var(--equal-columns-gap-columns, 1rem);
    align-items: var(--column-layout-alignment, start);
  }
  @container article-wrapper (width > 46rem) {
    .content-gallery ul {
      grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-auto-fit-column-size-min, 250px), 100%), 1fr));
    }
  }
  /* ================
  eaqual columns with fixed number of 4 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .content-gallery--cols-4 ul {
      grid-template-columns: repeat(2, 1fr);
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > * {
      grid-column: span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      /* Last row has only 1 item → center it */
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  @container article-wrapper (width > 70rem) {
    .content-gallery--cols-4 ul {
      grid-template-columns: repeat(4, 1fr);
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      grid-template-columns: repeat(8, 1fr);
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > * {
      grid-column: span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      /* Fall 1: letzte Reihe hat nur 1 Item → in die Mitte */
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+1):nth-last-child(1) {
      grid-column: 4/span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      /* Fall 2: letzte Reihe hat 2 Items → mittig */
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+1):nth-last-child(2) {
      grid-column: 3/span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+2):nth-last-child(1) {
      grid-column: 5/span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center {
      /* Fall 3: letzte Reihe hat 3 Items → auch mittig */
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+1):nth-last-child(3) {
      grid-column: 2/span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+2):nth-last-child(2) {
      grid-column: 4/span 2;
    }
    .content-gallery--cols-4 ul.content-gallery--columns-center > *:nth-child(4n+3):nth-last-child(1) {
      grid-column: 6/span 2;
    }
  }
  /* ================
  eaqual columns with fixed number of 3 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .content-gallery--cols-3 ul {
      grid-template-columns: repeat(2, 1fr);
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > * {
      grid-column: span 2;
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center {
      /* handle last row with less than 3 items and center */
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  @container article-wrapper (width > 70rem) {
    .content-gallery--cols-3 ul {
      grid-template-columns: repeat(3, 1fr);
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center {
      grid-template-columns: repeat(6, 1fr);
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > * {
      grid-column: span 2;
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > *:nth-child(3n+1):nth-last-child(1) {
      grid-column: 3/span 2;
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center {
      /* handle last row with less than 3 items and center */
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > *:nth-child(3n+1):nth-last-child(2) {
      grid-column: 2/span 2;
    }
    .content-gallery--cols-3 ul.content-gallery--columns-center > *:nth-child(3n+2):nth-last-child(1) {
      grid-column: 4/span 2;
    }
  }
  /* ================
  eaqual columns with fixed number of 2 columns
  ================ */
  @container article-wrapper (width > 46rem) {
    .content-gallery--cols-2 ul {
      grid-template-columns: repeat(2, 1fr);
    }
    .content-gallery--cols-2 ul.content-gallery--columns-center {
      grid-template-columns: repeat(4, 1fr);
    }
    .content-gallery--cols-2 ul.content-gallery--columns-center > * {
      grid-column: span 2;
    }
    .content-gallery--cols-2 ul.content-gallery--columns-center {
      /* handle last row with less than 2 items and center */
    }
    .content-gallery--cols-2 ul.content-gallery--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Download Module Styles
   Description: Custom styles for the Contao download module to fit layout.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  .content-block .content-download + .content-download {
    margin-block-start: var(--flow-spacing-block-sm, 0.5rem);
  }
  .content-block .equal-columns .content-download + .content-download {
    margin-block-start: 0;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Search Module Styles
   Description: Custom styles for the Contao search module to fit layout.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  .mod_search > *:first-child {
    margin-block-end: var(--elements-gap-block);
  }
  .search_default:not(:first-child) {
    margin-block-start: var(--elements-gap-block);
  }
  .search_default .context {
    color: var(--text-color-light);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Pagination
   Description: Custom styles for the Contao pagination to fit layout.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
@layer extensions {
  .pagination {
    margin-block-start: var(--elements-gap-block);
  }
  .pagination p:first-child {
    margin-block-end: var(--flow-spacing-block-sm);
    text-align: center;
  }
  .pagination ul {
    justify-content: center;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Navigation
   Description: Styles for the main navigation and footer navigation components.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Custom Properties used from: _c-link-with-icon--vars.scss - --link-text-icon-color-hover, --link-text-icon-color
   ========================================================================== */
@layer extensions {
  .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link:focus, .skip-link:focus-visible {
    position: fixed !important;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    z-index: 10000;
    background-color: var(--skip-link-background) !important;
    color: var(--skip-link-color) !important;
    font-size: 1rem;
    font-weight: var(--skip-link-font-weight) !important;
    line-height: 1;
    text-decoration: none;
    outline: 3px solid var(--skip-link-focus-border-color);
    animation: skip-nav-appear 0.15s ease-out;
  }
  @keyframes skip-nav-appear {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
  @media (forced-colors: active) {
    .skip-link:focus {
      outline: 3px solid ButtonText;
      background-color: ButtonFace;
      color: ButtonText;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skip-link:focus {
      animation: none;
    }
  }
  .navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--navigation-gap-inline-default);
  }
  .navigation strong,
  .navigation a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--navigation-font-family-default);
    font-size: var(--navigation-font-size-default);
    font-weight: var(--navigation-font-weight-default);
    line-height: var(--navigation-line-height-item);
    /* if no --link-text-icon-color is set from link-text-icon, fall back to navigation colors */
    color: var(--link-text-icon-color, var(--navigation-color-default));
  }
  .navigation strong:hover,
  .navigation a:hover {
    /* if no --link-text-icon-color is set from link-text-icon, fall back to navigation colors */
    color: var(--link-text-icon-color-hover, var(--navigation-color-default-hover));
  }
  .navigation strong.active,
  .navigation a.active {
    /* if no --link-text-icon-color is set from link-text-icon, fall back to navigation colors */
    color: var(--link-text-icon-color-hover, var(--navigation-color-default-hover));
  }
  /* temporary fix for news categories in navigation */
  .navigation.mod_newscategories span {
    line-height: var(--navigation-line-height-item);
  }
  .navigation--centered ul {
    justify-content: center;
  }
  /* navigation in layout and first child of main */
  main > .navigation:first-child {
    margin-block-start: var(--elements-gap-block);
  }
  @media (width < 48rem) {
    .navigation ul {
      flex-direction: column;
      row-gap: var(--navigation-gap-block-default);
    }
    .navigation-footer ul {
      align-items: center;
    }
  }
  .navigation--main .level_2 {
    display: none;
  }
  .navigation--main .level_1 .submenu:hover ul.level_2 {
    display: block;
    position: absolute;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Navigation Mega Menu
   Description: Styles for the megamenu navigation.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Custom Properties used from:
   ========================================================================== */
@layer extensions {
  :root {
    --nav-breakpoint: 1700px; /* set same breakpoint as $breakpoint-main-nav-mobile */
    --nav-color: var(--clr-black);
    --nav-active-color: var(--clr-red-500);
    --nav-item-line-height: var(--lh-m);
    --nav-font-size: var(--fs-650);
    --nav-font-weight: var(--fw-300);
    --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18l6-6-6-6"/></svg>');
    --nav-icon-background: transparent;
    /* navigation mobil */
    --nav-mobile-background: var(--navigation-mobile-background-color);
    --nav-mobile-color: var(--clr-black);
    --nav-mobile-active-background: var(--navigation-mobile-background-active-color);
    --nav-mobile-active-color: var(--clr-red-500);
    --nav-mobile-active-border-color: var(--clr-red-500);
    --nav-mobile-btn-clr: var(--clr-blue-500);
    --nav-mobile-separator-color: var(--clr-grey-500);
    --nav-mobile-padding: 5rem 2rem 2rem;
    --nav-mobile-font-size: var(--fs-650);
    --nav-mobile-backdrop-height: 80px;
    --nav-mobile-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
    --nav-burger-line-color: var(--clr-white);
    /* added */
    --nav-burger-line-color-active: var(--clr-black);
    --nav-mobile-font-weight: var(--fw-400);
    --nav-megamenu-background-color: var(--clr-white);
    --nav-megamenu-panel-items-gap: 1em;
    --nav-megamenu-panel-padding-block: 2em;
    --nav-megamenu-panel-padding-inline: 2em;
    --nav-megamenu-panel-max-width: 80rem;
    --nav-megamenu-panel-text-font-size: var(--fs-650);
    --nav-megamenu-panel-text-weight: var(--fw-600);
    --nav-megamenu-panel-border-color: var(--border-color-light);
  }
  body:not(.navigation-open, .nav-is-desktop) .navigation-main {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  body.navigation-open {
    overflow: hidden;
  }
  body.navigation-open header .logo {
    position: relative;
    z-index: 7;
  }
  .nav-wrapper * {
    box-sizing: border-box;
  }
  .navigation-main :is(a, strong) {
    line-height: var(--nav-item-line-height);
  }
  .btn-toggle-submenu {
    all: revert;
    position: absolute;
    top: 5px;
    right: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--nav-icon-background) !important;
    cursor: pointer;
    z-index: 1;
  }
  .btn-toggle-submenu::after {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: var(--nav-mobile-icon) no-repeat center;
    transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.3, 1.1);
  }
  .nav-burger {
    padding: 0;
    border: none;
    background: transparent;
    line-height: 1.5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 7;
    height: 100%;
    top: 0;
    right: 0;
    transition: height 0.3s ease-in-out;
    transition: top 0.3s ease, right 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-burger .icon-line {
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    transition: background-color 0.2s ease-in-out;
  }
  .nav-burger .icon-line::before {
    top: -0.625rem;
  }
  .nav-burger .icon-line::after {
    bottom: -0.625rem;
  }
  .nav-burger .icon-line,
  .nav-burger .icon-line::before,
  .nav-burger .icon-line::after {
    position: absolute;
    left: 50%;
    height: 0.2rem;
    width: 2.25rem;
    background: var(--nav-burger-line-color);
    border-radius: var(--border-radius-default);
    transform: translateX(-50%);
  }
  .nav-burger .icon-line::before,
  .nav-burger .icon-line::after {
    z-index: 6;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
    content: "";
  }
  .nav-burger.is-active .icon-line {
    background: transparent;
  }
  .nav-burger.is-active .icon-line::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
  }
  .nav-burger.is-active .icon-line::after {
    bottom: 0;
    transform: translateX(-50%) rotate(-45deg);
  }
  .nav-burger:hover {
    cursor: pointer;
  }
  /* burger navigation position and animation */
  body.nav-is-mobile.navigation-open .nav-burger {
    height: auto;
    position: fixed;
    top: 2rem;
    right: 2rem;
    transform: scale(1.05);
    /* change nav icon color */
  }
  body.nav-is-mobile.navigation-open .nav-burger .icon-line::before,
  body.nav-is-mobile.navigation-open .nav-burger .icon-line::after {
    background: var(--nav-burger-line-color-active);
  }
  .nav-burger__inner {
    position: relative;
    width: 44px;
    height: 44px;
  }
  @media (width < 106rem) {
    .nav-burger {
      padding-inline: 3rem; /* button width */
      background-color: var(--nav-mobile-btn-clr);
    }
    body.nav-is-mobile.navigation-open .nav-burger {
      background-color: var(--nav-mobile-background);
      padding-inline: 0; /* reset button width */
    }
  }
  @media (width < 46rem) {
    .nav-burger {
      padding-inline: 1.5rem; /* button width smaller */
    }
  }
  body.nav-is-mobile .nav-wrapper {
    position: relative;
    z-index: 5;
  }
  body.nav-is-mobile {
    /* wird nicht in mobile-nav verwendet - nur in desktop-nav */
  }
  body.nav-is-mobile .mega-panel__intro,
  body.nav-is-mobile .mega-panel__media {
    display: none;
  }
  body.nav-is-mobile .navigation-main {
    position: fixed;
    inset: 0;
    overflow: hidden auto;
    z-index: 6;
    padding: var(--nav-mobile-padding);
    background: var(--nav-mobile-background);
    color: var(--nav-mobile-color);
    line-height: 1.5;
    font-size: var(--nav-mobile-font-size);
    font-weight: var(--nav-mobile-font-weight);
    transition: opacity 0.15s ease-in-out, visibility 0.1s;
  }
  body.nav-is-mobile .navigation-main.is-active::before {
    display: block;
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--nav-mobile-backdrop-height);
    backdrop-filter: blur(1px);
    z-index: 1;
  }
  body.nav-is-mobile .navigation-main :is(a, strong) {
    display: inline-block;
    color: var(--nav-mobile-color);
    text-decoration: unset;
    padding: 12px 10px;
    width: calc(100% - 44px);
  }
  body.nav-is-mobile .navigation-main :is(a, strong):is(.active) {
    --nav-mobile-color: var(--nav-mobile-active-color);
  }
  body.nav-is-mobile .navigation-main .level_1 .mega-panel {
    display: none;
  }
  body.nav-is-mobile .navigation-main .level_2 li {
    padding: 0 0 0 20px;
  }
  body.nav-is-mobile .navigation-main ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  body.nav-is-mobile .navigation-main li {
    position: relative;
    padding: 0;
  }
  body.nav-is-mobile .navigation-main li:not(:last-child) {
    border-bottom: 1px solid var(--nav-mobile-separator-color);
  }
  body.nav-is-mobile .navigation-main li.submenu li {
    border: none;
  }
  body.nav-is-mobile .navigation-main li.submenu li:first-child {
    border-top: 1px solid var(--nav-mobile-separator-color);
  }
  body.nav-is-mobile .navigation-main li > .btn-toggle-submenu::after {
    transform: rotateX(180deg) rotateZ(-90deg);
  }
  body.nav-is-mobile .navigation-main li.active,
  body.nav-is-mobile .navigation-main li a.trail {
    background: var(--nav-mobile-active-background);
    color: var(--nav-mobile-active-color);
  }
  body.nav-is-mobile .navigation-main li.nav-expanded > .mega-panel {
    display: block;
  }
  body.nav-is-mobile .navigation-main li.nav-expanded > .btn-toggle-submenu::after {
    transform: rotateX(0deg) rotateZ(-90deg);
  }
  body.nav-is-desktop {
    /* Mega-Panel */
  }
  body.nav-is-desktop .mega-panel {
    display: none;
    position: fixed;
    inset-inline: 0;
    z-index: 100;
  }
  body.nav-is-desktop .mega-panel__background {
    margin-top: var(--header-padding-block-default);
    background: var(--nav-megamenu-background-color, #fff);
    border-top: 1px solid var(--nav-megamenu-panel-border-color, currentColor);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  body.nav-is-desktop .mega-panel__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--nav-megamenu-panel-items-gap, 2rem);
    padding-block: var(--nav-megamenu-panel-padding-block, 2rem);
    padding-inline: var(--nav-megamenu-panel-padding-inline, 2rem);
    max-width: var(--nav-megamenu-panel-max-width, 80rem);
    margin-inline-start: auto;
  }
  body.nav-is-desktop .mega-panel__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-inline-end: 1px solid var(--nav-megamenu-panel-border-color);
  }
  body.nav-is-desktop .mega-panel__text {
    font-size: var(--nav-megamenu-panel-text-font-size);
    font-weight: var(--nav-megamenu-panel-text-weight);
    hyphens: none;
  }
  body.nav-is-desktop .mega-panel__links-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 {
    display: flex;
    flex-direction: column;
    gap: var(--navigation-list-row-gap-default, 0.5rem);
  }
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > a,
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > strong {
    display: flex;
    align-items: center;
    gap: var(--icon-padding-inline-regular, 0.5rem);
  }
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > a::before,
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > strong::before {
    content: "→";
    color: var(--navigation-color-default-hover);
    flex-shrink: 0;
  }
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > a:hover, body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > a.active,
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > strong:hover,
  body.nav-is-desktop .mega-panel__links-wrap ul.level_2 > li > strong.active {
    color: var(--navigation-color-default-hover);
  }
  body.nav-is-desktop .mega-panel__media {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  body.nav-is-desktop .site-header.is-scrolled .mega-panel__background {
    margin-top: 0.5rem;
  }
  body.nav-is-desktop {
    /* Mega-Panel - Ende*/
  }
  body.nav-is-desktop .nav-wrapper {
    display: flex;
    align-items: center;
    overflow: visible;
  }
  body.nav-is-desktop .navigation-main :is(a, strong) {
    line-height: 1;
  }
  body.nav-is-desktop .navigation-main a {
    text-decoration: unset;
  }
  body.nav-is-desktop .navigation-main :is(a, strong) {
    display: block;
    position: relative;
    color: var(--nav-color);
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
  }
  body.nav-is-desktop .navigation-main :is(a:hover, a:focus-visible, a.trail, strong) {
    color: var(--nav-active-color);
  }
  body.nav-is-desktop .navigation-main ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.nav-is-desktop .navigation-main ul li.submenu {
    position: relative;
  }
  body.nav-is-desktop .navigation-main li.nav-expanded > .mega-panel {
    display: block;
  }
  body.nav-is-desktop .navigation-main .level_1 {
    gap: 0 var(--navigation-gap-inline-default);
    justify-content: flex-end;
    align-items: center;
  }
  body.nav-is-desktop .navigation-main .level_1 > li > .btn-toggle-submenu::after {
    transform: rotateX(180deg) rotateZ(-90deg);
  }
  body.nav-is-desktop .navigation-main .level_1 > li.submenu {
    padding-right: 20px;
  }
  body.nav-is-desktop .navigation-main .level_1 > li.nav-expanded > .btn-toggle-submenu::after {
    transform: rotateX(0deg) rotateZ(-90deg);
  }
  body.nav-is-desktop .btn-toggle-submenu {
    width: 24px;
    height: 24px;
    padding: 0;
    top: 0;
    right: -6px;
  }
  body.nav-is-desktop .btn-toggle-submenu::after {
    background: var(--nav-icon) no-repeat center;
  }
  body.nav-is-desktop .nav-burger {
    display: none;
  }
  @media (forced-colors) {
    .nav-burger .icon-line,
    .nav-burger .icon-line::before,
    .nav-burger .icon-line::after {
      height: 0;
      border: 1px transparent solid;
    }
    .nav-burger.is-active .icon-line {
      border: 0 none;
    }
    .nav-burger.is-active .icon-line::after {
      bottom: -1px;
    }
    .nav-burger__inner {
      color: currentcolor;
    }
  }
  /* enable contact block under navigation */
  body:not(.navigation-open, .nav-is-desktop) .navigation-main {
    display: none; /* hide completely when navigation is closed in mobile mode */
  }
  body.nav-is-desktop .nav-mobile-content {
    display: none;
  }
  body.nav-is-mobile .navigation-main {
    /* disable position fixed */
    position: static;
    inset: auto;
  }
  body.nav-is-mobile .nav-mobile-content {
    display: none; /* default: hidden in mobile mode */
  }
  body.nav-is-mobile.navigation-open .navigation--mega-menu {
    background-color: var(--nav-mobile-background);
  }
  body.nav-is-mobile.navigation-open .nav-wrapper {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--nav-mobile-background);
  }
  body.nav-is-mobile.navigation-open .navigation-main {
    flex: 0 0 auto;
  }
  body.nav-is-mobile.navigation-open .nav-mobile-content {
    display: block;
    flex-shrink: 0;
    padding: 2rem;
    background: var(--nav-mobile-background);
  }
}
/* 50) components */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Site Header
   Description: Styles for the site header component.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .site-header {
    background-color: transparent;
    padding-block: var(--header-padding-block-default);
  }
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
  .site-header__logo-link {
    margin-inline-end: auto;
  }
  .site-header__logo-image {
    width: var(--logo-width-default);
  }
  @media (width < 106rem) {
    .site-header {
      border: none;
      padding-block: 0; /* remove padding for mobile to stretch button */
    }
    .site-header__inner {
      align-items: stretch;
      flex-wrap: nowrap;
      column-gap: var(--elements-gap-inline);
    }
    .site-header__logo-link {
      margin-block: var(--header-padding-block-default); /* margin for mobile to stretch button */
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Site Header Top Section
   Description: Styles for the top section of the site header component.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .site-header__inner {
    padding-block-start: calc(var(--elements-gap-block) / 2);
  }
  .site-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* row-gap column gap */
    padding-block: calc(var(--elements-gap-block) / 6);
  }
  .site-header:has(.site-header__top) {
    padding-block-start: 0; /* remove top padding if top section exists */
  }
  @media (width < 75rem) {
    .site-header__top {
      justify-content: center;
    }
    .site-header > :first-child {
      background-color: var(--background-color-default);
    }
    /* adjust padding for smaller viewports to prevent background over mobile menu button */
    .site-header__inner {
      padding-block-start: 0;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Hero Section
   Description: Styles for the hero section component with images and text.
   Layer: Components
   Reusable: No
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .hero {
    padding-block-start: 0;
  }
  .hero .wrapper--width-full {
    position: relative;
    display: grid;
  }
  .hero p,
  .hero h1 {
    color: var(--text-color-extra-light);
  }
  .hero__media {
    grid-area: 1/1;
    position: relative;
    z-index: 0;
  }
  /* Overlay auf dem Bild */
  /* .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-color);
  pointer-events: none;
  } */
  .hero__inner {
    grid-area: 1/1; /* gleiche Grid-Zelle wie das Bild */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: var(--section-width-default);
    margin-inline: auto;
  }
  .hero__inner * {
    align-self: stretch;
  }
  .hero .content-headline {
    max-width: 70%;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Search Icon in Navigation
   Description: Styles for the search icon in the main navigation.
   Layer: Components
   Reusable: No
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .nav-search-icon.text-icon {
    padding-inline-start: 3rem;
    margin-inline-start: 3rem;
    border-left: 1px solid var(--border-color-light);
  }
  .nav-search-icon.text-icon .svg_icon_search__path {
    fill: var(--navigation-color-default);
  }
  .nav-search-icon.text-icon:hover .svg_icon_search__path {
    fill: var(--navigation-color-default-hover);
  }
  @media (width < 75rem) {
    .nav-search-icon.text-icon {
      margin-inline-start: 0;
      border-left: none;
      padding-inline: 3rem;
      display: flex;
      align-items: center;
      block-size: auto; /* reset from svg-icon */
    }
  }
  @media (width < 768px) {
    .nav-search-icon.text-icon {
      display: none;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Scroll to Top Button
   Description: Styles for the scroll to top button component.
   Layer: Components
   Reusable: No
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .back-to-top {
    position: fixed;
    inset-block-end: 1rem; /* bottom */
    inset-inline-end: 1rem; /* right */
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* min-width: 44px; */
    /* WCAG-Zielfläche */
    /* min-height: 44px; */
    /* WCAG-Zielfläche */
    min-width: 2.5em;
    min-height: 2.5em;
    /* padding: 0.75rem 1rem; */
    text-decoration: none;
    font: inherit;
    background: var(--button-background-reduced, #eee);
    color: var(--button-color-reduced, #000);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--border-radius-default, 0);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .back-to-top .back-to-top__path {
    fill: var(--button-color-reduced, #000);
  }
  .back-to-top[data-visible=true] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Button with Icon (accessible)
   Description: Styles for icon with text components used in various parts of the site.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: _c-icon-with-text--vars.css, a11y-font-size.js
   ========================================================================== */
@layer components {
  .a11y {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* row-gap column gap */
  }
  .button--a11y {
    /* Override with icon-with-text variables */
    --icon-with-text-gap: var(--icon-padding-inline-regular);
    padding-inline: var(--button-padding-inline-sm);
    padding-block: var(--button-padding-block-sm);
    color: var(--navigation-color-default);
    font-size: var(--font-size-xs);
    background: none;
    border: none;
  }
  .button--a11y .text-icon__text {
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
  }
  .button--a11y .text-icon__icon {
    /* Override with icon-with-text variables */
    --icon-with-text-inline-size: var(--icon-size-regular);
    --icon-with-text-block-size: var(--icon-size-regular);
  }
  .button--a11y[aria-pressed=true] {
    color: var(--navigation-color-default-hover);
  }
  .button--a11y:not(.is-disabled):hover {
    color: var(--navigation-color-default-hover);
  }
  @media (width < 75rem) {
    .a11y .text-icon__text {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    .button--a11y {
      font-size: var(--font-size-sm);
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Link with Icons
   Description: Styles for link components that include icons. Example: link with arrow icon used in news read more links etc.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: Yes
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .text-icon {
    --icon-with-text-gap: var(--icon-padding-inline-regular, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--icon-with-text-gap);
    min-height: 1.5rem;
  }
  .text-icon__icon {
    --icon-with-text-inline-size: 1em; /* scales with font-size */
    --icon-with-text-block-size: 1em; /* scales with font-size */
    inline-size: var(--icon-with-text-inline-size);
    block-size: var(--icon-with-text-block-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* fix to center icon */
    transform: translateY(-2px);
  }
  .text-icon__icon.svg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor; /* inherit text color */
  }
  .text-icon__text {
    line-height: 1; /* to vertically center the text */
    word-break: break-word; /* allow breaking long words to prevent overflow - fix bug with different image height in grid */
    hyphens: none; /* keine Worttrennung in Buttons */
  }
  /* text-icon with link */
  .text-icon--link {
    /* customizable design tokens */
    --link-text-icon-color: var(--link-color-default); /* text + svg works over currentcolor */
    --link-text-icon-color-hover: var(--link-color-default-hover); /* text + svg works over currentcolor */
    --link-text-icon-icon-icon: #fff; /* arrow color */
    color: var(--link-text-icon-color);
    /* used in text-icon__text - is needed? */
    line-height: 1; /* to vertically center the text */
    /* animation */
    transition: color 0.3s ease;
  }
  .text-icon--link .text-icon__icon {
    display: inline-grid;
    /* animation */
    transition: transform 0.3s ease;
  }
  .text-icon--link {
    /* circle background */
  }
  .text-icon--link .text-icon__icon-bg {
    /* animation */
    transition: fill 0.3s ease;
  }
  .text-icon--link {
    /* arrow in circle as path with stroke */
  }
  .text-icon--link .text-icon__icon-arrow {
    stroke: var(--link-text-icon-icon-icon);
  }
  .text-icon--link {
    /* hover */
  }
  .text-icon--link:hover, .text-icon--link:active {
    color: var(--link-text-icon-color-hover);
  }
  .text-icon--link:hover .text-icon__icon, .text-icon--link:active .text-icon__icon {
    transform: translateX(4px) translateY(-2px); /* fix to center icon on hover */
    transition: transform 0.3s ease;
  }
  /* highlighted variant for link in news read more */
  .text-icon--link-highlighted {
    text-transform: uppercase;
    border-block-end: solid 1px var(--link-color-default-hover);
    --link-text-icon-color: var(--link-color-default);
    --link-text-icon-color-hover: var(--link-color-default-hover);
  }
  /* active link in contao navigation */
  .active .text-icon .text-icon__icon {
    transform: translateX(4px) translateY(-2px); /* fix to center icon on hover */
    transition: transform 0.3s ease;
  }
  /* Custom Property nicht definiert */
  /* .active .text-icon .text-icon__icon-bg {
      fill: var(--link-text-icon-icon-background-hover);
  } */
  strong.active .text-icon__text {
    color: var(--link-text-icon-color-hover);
  }
  /* ================
      Accessible
      ================ */
  /* Accessible variant for users with reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .text-icon,
    .text-icon__icon,
    .text-icon__icon-bg,
    .text-icon__icon-arrow {
      transition: none !important;
    }
  }
  /* Accessible variant for manual use */
  .is-reduce-motion .text-icon,
  .is-reduce-motion .text-icon__icon,
  .is-reduce-motion .text-icon__icon-bg,
  .is-reduce-motion .text-icon__icon-arrow {
    transition: none !important;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Site Footer
   Description: Styles for the site footer component with footer bottom.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .site-footer h2 {
    /* fluid typography parameters */
    --min-font-size: var(--font-size-heading-lg-min);
    --max-font-size: var(--font-size-heading-lg-max);
    --min-font-size-no-unit: var(--font-size-heading-lg-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-lg-max-no-unit);
    /* fluid typography */
    --slope: calc(
            (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit))
    );
    --intercept: calc(
            var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) /
            (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) *
            var(--fluid-breakpoint-min)
    ); /* Fallback */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-bold);
  }
  .site-footer__inner {
    background-color: var(--background-color-extra-dark);
  }
  .site-footer__bottom {
    background-color: var(--background-color-extra-dark);
  }
  @media (width < 75rem) {
    .site-footer__bottom .flex-group {
      flex-direction: column;
      align-items: center;
    }
    .site-footer__bottom p {
      text-align: center;
    }
  }
  /* ================
  eaqual columns subgrid 2 rows
  ================ */
  .site-footer .equal-columns {
    grid-template-rows: auto 1fr;
  }
  .site-footer .equal-columns > * {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0; /* reset gap from equal-columns and use .flow */
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Image hover effect
   Description: class for images with hover effect (dark overlay + magnifying glass + zoom)
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .image--hover {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: var(--border-radius-default); /* Rounded corners when the image also has rounded corners */
  }
  .image--hover img {
    display: block;
    transition: transform 0.6s ease;
  }
  /* Dark overlay over the image */
  .image--hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Keep the link clickable */
    z-index: 1;
  }
  /* Magnifying glass as SVG (white, centered) */
  .image--hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' class='svg_icon_search__path' d='M15.4663 8.69959C15.4663 9.5882 15.2912 10.4681 14.9512 11.2891C14.6111 12.11 14.1127 12.856 13.4843 13.4843C12.856 14.1127 12.11 14.6111 11.2891 14.9512C10.4681 15.2912 9.5882 15.4663 8.69959 15.4663C7.81097 15.4663 6.93106 15.2912 6.11009 14.9512C5.28912 14.6111 4.54317 14.1127 3.91483 13.4843C3.28649 12.856 2.78806 12.11 2.448 11.2891C2.10794 10.4681 1.93292 9.5882 1.93292 8.69959C1.93292 6.90495 2.64583 5.18383 3.91483 3.91483C5.18383 2.64583 6.90495 1.93292 8.69959 1.93292C10.4942 1.93292 12.2153 2.64583 13.4843 3.91483C14.7533 5.18383 15.4663 6.90495 15.4663 8.69959ZM14.1303 15.4972C12.3931 16.8851 10.1903 17.5551 7.97446 17.3697C5.75861 17.1843 3.69787 16.1574 2.21545 14.5001C0.733044 12.8427 -0.0585044 10.6806 0.00337254 8.4579C0.0652495 6.23517 0.975855 4.12049 2.54817 2.54817C4.12049 0.975855 6.23517 0.0652495 8.4579 0.00337254C10.6806 -0.0585044 12.8427 0.733044 14.5001 2.21545C16.1574 3.69787 17.1843 5.75861 17.3697 7.97446C17.5551 10.1903 16.8851 12.3931 15.4972 14.1303L20.984 19.6152C21.0739 19.7051 21.1452 19.8118 21.1938 19.9292C21.2424 20.0466 21.2675 20.1725 21.2675 20.2996C21.2675 20.4267 21.2424 20.5526 21.1938 20.67C21.1452 20.7874 21.0739 20.8941 20.984 20.984C20.8941 21.0739 20.7874 21.1452 20.67 21.1938C20.5526 21.2424 20.4267 21.2675 20.2996 21.2675C20.1725 21.2675 20.0466 21.2424 19.9292 21.1938C19.8118 21.1452 19.7051 21.0739 19.6152 20.984L14.1303 15.4972Z' fill='%23f1f1f1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--icon-size-lg);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 2;
  }
  /* Hover effect */
  .image--hover:hover::before {
    opacity: 1;
  }
  .image--hover:hover::after {
    opacity: 1;
    transform: scale(1);
  }
  .image--hover:hover img {
    transform: scale(1.05);
  }
  /* ================
      Accessible
      ================ */
  /* Accessible variant for users with reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .image--hover img,
    .image--hover::before,
    .image--hover::after {
      transition: none;
      transform: none;
    }
  }
  /* Accessible variant for manual use */
  .is-reduce-motion .image--hover img,
  .is-reduce-motion .image--hover::before,
  .is-reduce-motion .image--hover::after {
    transition: none;
    transform: none;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Top Bar Styles
   Description: Styles for the top bar component, including responsive adjustments for icon-with-text elements.
     The top bar is designed to be flexible and adapt to different screen sizes, ensuring usability and accessibility.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: _s-tokens.semantic, _c-text-icon--vars
   ========================================================================== */
.top-bar-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* row-gap column gap */
}

.top-bar-links .text-icon {
  padding-inline: var(--button-padding-inline);
  padding-block: var(--button-padding-block);
  font-size: var(--font-size-sm);
}
.top-bar-links .text-icon .text-icon__text {
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
}

@media (width < 75rem) {
  .top-bar-links .text-icon .text-icon__text {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .top-bar-links .text-icon {
    font-size: var(--font-size-regular);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Overlay Link Media Block
   Description: Styles for the overlay link media block component.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Custom Properties used from: _c-link-with-icon--vars.scss - --link-text-icon-color-hover, --link-text-icon-color
   ========================================================================== */
@layer components {
  /* Basis Container */
  .media-overlay,
  .content-overlay {
    position: relative;
    container-type: inline-size;
  }
  /* Gemeinsamer Pfeil-Style */
  .media-overlay[class*="--arrow"]::after,
  .content-overlay[class*="--arrow"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(5rem, 12cqi, 9rem);
    height: clamp(2.5rem, 5.5cqi, 4rem);
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.5rem;
    z-index: 1;
  }
  /* Weißer Hintergrund */
  .media-overlay--arrow-background-default::after,
  .content-overlay--arrow-background-default::after {
    background-color: var(--background-color-default);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 19' fill='none' focusable='false' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.3537 10L17.945 17.7938L18.75 18.75L30 9.34875L18.75 0L17.9437 0.955L27.355 8.75H0V10H27.3537Z' fill='%23e72813'/%3E%3C/svg%3E");
    transition: background-position 0.3s ease;
  }
  /* Weißer Hintergrund */
  .media-overlay--arrow-background-light::after,
  .content-overlay--arrow-background-light::after {
    background-color: var(--background-color-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 19' fill='none' focusable='false' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.3537 10L17.945 17.7938L18.75 18.75L30 9.34875L18.75 0L17.9437 0.955L27.355 8.75H0V10H27.3537Z' fill='currentColor'/%3E%3C/svg%3E");
    transition: background-position 0.3s ease;
  }
  /* Roter Hintergrund */
  .media-overlay--arrow-background-red::after,
  .content-overlay--arrow-background-red::after {
    background-color: var(--brand-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.3537 10L17.945 17.7938L18.75 18.75L30 9.34875L18.75 0L17.9437 0.955L27.355 8.75H0V10H27.3537Z' fill='%23ffffff'/%3E%3C/svg%3E");
    transition: background-position 0.3s ease;
  }
  /* Hover-Effekt */
  a:hover .media-overlay[class*="--arrow"]::after,
  a:hover .content-overlay[class*="--arrow"]::after,
  a:hover.content-overlay[class*="--arrow"]::after {
    background-position: right 0.5rem center;
  }
  /* Größenvarianten */
  .media-overlay--arrow-sm::after,
  .content-overlay--arrow-sm::after {
    width: 7rem;
    height: 2.5rem;
    background-size: 1.25rem;
  }
  .media-overlay--arrow-lg::after,
  .content-overlay--arrow-lg::after {
    width: 12rem;
    height: 6rem;
    background-size: 2rem;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Counter
   Description: Styles for the counter component.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .stats__item {
    text-align: center;
    border-inline-end: 1px solid gray;
  }
  .stats__item:last-child {
    border-inline-end: none;
  }
  .stats__number {
    font-weight: var(--font-weight-heavy);
    font-size: var(--font-size-heading-xl-max);
    letter-spacing: -0.025em;
  }
  .stats__label {
    margin-block: 0.5rem;
    font-size: var(--font-size-sm);
  }
  @container article-wrapper (width < 70rem) {
    .equal-columns--columns-4 .stats__item:nth-child(2n) {
      border-inline-end: none;
    }
  }
  @container article-wrapper (width < 46rem) {
    .equal-columns--columns-4 .stats__item {
      border-inline-end: none;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Alternating Split
   Description: Styles for the alternating split component.
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Custom Properties used from:
   ========================================================================== */
@layer components {
  .alternating-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--alternating-split-gap);
    align-items: stretch;
  }
  .alternating-split > .content-image,
  .alternating-split > .content-element-group {
    grid-column: 1;
    grid-row: auto;
  }
  section:has(.alternating-split) .content-block > * + * {
    margin-block-start: var(--alternating-split-gap);
  }
  /* Content-Gruppe zentriert ihren Inhalt vertikal */
  .alternating-split > .content-element-group {
    background-color: var(--background-color-blue);
    padding: var(--card-padding-block) var(--card-padding-inline);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Pass Bild so an das es bei kleiner werdenden Viewport und höher werdenden content-block sich streckt ohne das Seitenverhältniss zu verändern */
  .alternating-split > .content-image {
    grid-column: 1;
  }
  .alternating-split > .content-image figure {
    height: 100%;
  }
  .alternating-split > .content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Dynamisches Padding: sorgt dafür dass der Inhalt nie über die halbe max-width hinausgeht */
  .alternating-split:nth-child(even) > .content-element-group {
    padding-inline-end: max(2rem, (100vw - var(--section-width-default)) / 2);
  }
  .alternating-split:nth-child(odd) > .content-element-group {
    padding-inline-start: max(2rem, (100vw - var(--section-width-default)) / 2);
  }
  @media (min-width: 48rem) {
    .alternating-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--alternating-split-gap);
      align-items: stretch;
    }
    .alternating-split > .content-image,
    .alternating-split > .content-element-group {
      grid-row: 1;
    }
    /* Standard: Bild in Spalte 1, Content in Spalte 2 */
    .alternating-split > .content-image {
      grid-column: 1;
    }
    .alternating-split > .content-element-group {
      grid-column: 2;
    }
    /* Ungerade Gruppen: tauschen */
    .alternating-split:nth-child(odd) > .content-image {
      grid-column: 2;
    }
    .alternating-split:nth-child(odd) > .content-element-group {
      grid-column: 1;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Basis: Typography Styles
   Beschreibung: Basis-Typography Styles für das Theme.
   Layer: Base
   Wiederverwendbar: Ja
   Custom Property Definitionen: Nein
   Abhängig von: tokens.semantic.css
   ========================================================================== */
@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
  }
  /* Sticky nur ab dem Nav-Breakpoint (Standard 1024px) */
  @media (max-width: 106rem) {
    .site-header {
      position: static;
    }
  }
  /* Top-Bar ausblenden wenn Header sticky aktiv ist und scrollt */
  .site-header > .wrapper:first-child {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
  }
  .site-header.is-scrolled > .wrapper:first-child {
    max-height: 0;
    opacity: 0;
  }
  /* Shrink + Milchglas */
  .site-header.is-scrolled {
    --site-header-padding-inline: 0 !important;
    padding-inline: var(--wrapper-padding-inline);
    padding-block-end: 0.5rem;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  }
  .site-header.is-scrolled .site-header__logo-image {
    width: calc(var(--logo-width-default) / 1.5);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Icon Text Badge
   Description: Styles for badge component used in the RSCE Icon Text element.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: Yes
   Depends on: _c-icon-with-text--vars.css, rsce_icon_text.html.twig, rsce_icon_text_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  .badge {
    --badge-background: var(--button-background-reduced, #f5f5f5);
    --badge-color: var(--button-color-reduced, #111);
    --badge-radius: var(--border-radius-default, 12px);
    --badge-gap: var(--icon-padding-inline-lg, 0.5rem);
    --badge-padding-inline: var(--button-padding-inline, 1.25rem);
    --badge-padding-block: var(--button-padding-block, 1rem);
    /* Override with icon-with-text variables */
    --icon-with-text-gap: var(--badge-gap);
    padding-block: var(--badge-padding-block);
    padding-inline: var(--badge-padding-inline);
    border-radius: var(--badge-radius);
    background: var(--badge-background);
    color: var(--badge-color);
    font: inherit;
    line-height: 1;
    /* white-space: nowrap; */
    /* prevents unsightly line breaks - bad for mobile */
  }
  .badge strong {
    font-weight: 800;
  }
  .badge.badge--primary {
    --badge-background: var(--button-background-reduced);
    --badge-color: var(--button-color-reduced);
  }
  .badge.badge--accent {
    --badge-background: var(--button-background-accent);
    --badge-color: var(--button-color-accent);
  }
  .badge.badge--only-text-icon {
    --badge-background: transparent;
    --badge-color: var(--navigation-color-default);
  }
  .badge.badge--center {
    display: flex; /* is display flex because of modifier center with margin-inline: auto */
    width: fit-content;
    margin-inline: auto;
  }
  @media (width < 26.25rem) {
    .badge.badge--center {
      margin-inline: 0;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Button with Icon
   Description: Styles for the button component used in RSCE.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: _b-button.css, _c-icon-with-text--vars.css, rsce_button.html.twig, rsce_button_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  /* button with icon */
  .button:has(.button__icon) {
    /* Override with icon-with-text variables */
    --icon-with-text-gap: var(--icon-padding-inline-regular);
    display: flex; /* is display flex because of modifier center with margin-inline: auto */
    width: fit-content;
    align-items: center;
  }
  .button:has(.button__icon) strong {
    font-weight: 800;
  }
  /* common transition for all icon elements */
  .button__icon-arrow,
  .button__icon-bg {
    transition: stroke 0.3s ease, fill 0.3s ease;
  }
  /* primary button colors via css variables */
  .button--primary {
    --icon-arrow-stroke: var(--button-background-primary);
    --icon-bg-fill: var(--button-color-primary);
  }
  .button--primary:hover {
    --icon-arrow-stroke: var(--button-color-primary);
    --icon-bg-fill: var(--button-background-primary);
  }
  /* secondary button colors via css variables */
  .button--secondary {
    --icon-arrow-stroke: var(--button-background-secondary);
    --icon-bg-fill: var(--button-color-secondary);
  }
  .button--secondary:hover {
    --icon-arrow-stroke: var(--button-color-secondary);
    --icon-bg-fill: var(--button-background-secondary);
  }
  /* reduced button colors via css variables */
  .button--reduced {
    --icon-arrow-stroke: var(--button-background-reduced);
    --icon-bg-fill: var(--button-color-reduced);
  }
  .button--reduced:hover {
    --icon-arrow-stroke: var(--button-color-reduced);
    --icon-bg-fill: var(--button-background-reduced);
  }
  /* reduced button colors via css variables */
  .button--only-text-icon {
    --icon-arrow-stroke: var(--button-background-reduced);
    --icon-bg-fill: var(--button-color-reduced);
  }
  .button--only-text-icon:hover {
    --icon-arrow-stroke: var(--navigation-color-default-hover);
    --icon-bg-fill: var(--navigation-color-default-hover);
  }
  /* assignment to the icons */
  .button__icon-arrow {
    stroke: var(--icon-arrow-stroke);
  }
  .button__icon-bg {
    fill: var(--icon-bg-fill);
  }
  /* ================
      Accessible
      ================ */
  /* accessible variant for users with reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .button__icon-arrow,
    .button__icon-bg {
      transition: none !important;
    }
  }
  /* accessible variant for manual use */
  .is-reduce-motion .button__icon-arrow,
  .is-reduce-motion .button__icon-bg {
    transition: none !important;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE HEadline Subheadline
   Description: Styles for the RSCE Headline Subheadline element.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_headline_subheadline.html.twig, rsce_headline_subheadline_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  .headline-subheadline .headline-top,
  .headline-subheadline .headline-bottom {
    display: block;
    font-size: 0.5em; /* 1/2 of the headline size */
    font-weight: var(--font-weight-book);
  }
  .headline-subheadline .headline-top {
    margin-bottom: 0.25em;
  }
  .headline-subheadline .headline-bottom {
    margin-top: 0.25em;
  }
  h1.headline-subheadline .headline-top,
  h1.headline-subheadline .headline-bottom {
    font-size: 0.4em; /* 1/3 of the h1 size */
  }
  h3.headline-subheadline .headline-top,
  h3.headline-subheadline .headline-bottom {
    font-size: 0.6em;
  }
  h4.headline-subheadline .headline-top,
  h4.headline-subheadline .headline-bottom {
    font-size: 0.7em;
  }
  h5.headline-subheadline .headline-top,
  h5.headline-subheadline .headline-bottom {
    font-size: 0.8em;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Section Parallax Images
   Description: Styles for parallax images.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: Yes
   Depends on: parallax-image.js, rsce_parallax_image_config.php, rsce_parallax_image.html.twig, tokens.semantic.css
   ========================================================================== */
@layer components {
  section:has(.parallax-container) {
    padding-block: 0;
  }
  section:has(.parallax-container) .wrapper {
    padding-inline: 0;
  }
  .parallax-container {
    --parallax-section-height: clamp(600px, 38.5vw, 980px);
  }
  .parallax-container.parallax-container--subpage {
    --parallax-section-height: clamp(400px, 38.5vw, 530px);
  }
  .parallax-container.parallax-container--mainpage {
    --parallax-section-height: clamp(600px, 38.5vw, 980px);
  }
  .parallax-container.parallax-container--small {
    --parallax-section-height: clamp(600px, 38.5vw, 980px);
  }
  .parallax-container {
    position: relative;
    height: var(--parallax-section-height);
    overflow: hidden;
    contain: layout paint; /* small performance optimization */
  }
  .parallax-image {
    position: absolute;
    inset: 0;
    will-change: transform;
  }
  .parallax-image picture {
    display: contents; /* picture aus dem Layout entfernen — img verhält sich wie direktes Kind von .parallax-image */
  }
  .parallax-image img {
    position: absolute;
    left: 0;
    top: 50%; /* vertically center */
    width: 100%;
    height: auto; /* maintain actual image height */
    min-height: 100%; /* in case the image is smaller */
    object-fit: cover; /* fill cleanly */
    display: block;
    /* base centering (-50%) + dynamic parallax shift */
    --parallax-shift: 0px;
    transform: translateY(calc(-50% + var(--parallax-shift)));
    will-change: transform;
  }
  /* ================
      Accessible
      ================ */
  /* Accessible variant for users with reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .parallax-image img {
      transform: translateY(-50%) !important; /* base position only */
    }
  }
  /* Accessible variant for manual use */
  .is-reduce-motion .parallax-image img {
    transform: translateY(-50%) !important; /* base position only */
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Page Teaser Standard
   Description: Styles for the standard page teaser component used in RSCE.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_page_teaser_standard.html.twig, rsce_page_teaser_standard_config.php, tokens.semantic.css, _b-cards.css
   ========================================================================== */
@layer components {
  /* breakpoint is the same as equal-columns */
  .page-teaser {
    --equal-columns-gap-rows: 0; /* row-gap for this grid is 0, margin-block-end is used for spacing between cards */
  }
  @media (width > 46rem) {
    .page-teaser {
      grid-template-rows: repeat(4, auto); /* maximal 4 rows for standard teaser to get subgrid to work */
    }
  }
  .page-teaser__card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4; /* maximal 4 rows for standard teaser to get subgrid to work */
    gap: 0;
    margin-block-end: var(--equal-columns-gap-columns, 1rem); /* use margin-block-end for horizontal spacing between cards in subgrid */
    /* overwrite card styles */
  }
  .page-teaser__card.card--border, .page-teaser__card.card--background {
    padding-inline: 0;
    padding-block: 0;
  }
  .page-teaser__card.card--border .image--hover,
  .page-teaser__card.card--border img, .page-teaser__card.card--background .image--hover,
  .page-teaser__card.card--background img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* set margin-block-end to 0 based on breakpoints */
  .page-teaser.equal-columns--columns-3 .page-teaser__card:last-child {
    margin-block-end: 0;
  }
  @container article-wrapper (46rem <= width <= 70rem) {
    .page-teaser.equal-columns--columns-3 .page-teaser__card:nth-child(2n+1):nth-last-child(-n+2),
    .page-teaser.equal-columns--columns-3 .page-teaser__card:nth-child(2n+1):nth-last-child(-n+2) ~ .page-teaser__card {
      margin-block-end: 0;
    }
  }
  @container article-wrapper (width > 70rem) {
    .page-teaser.equal-columns--columns-3 .page-teaser__card:nth-child(3n+1):nth-last-child(-n+3),
    .page-teaser.equal-columns--columns-3 .page-teaser__card:nth-child(3n+1):nth-last-child(-n+3) ~ .page-teaser__card {
      margin-block-end: 0;
    }
  }
  a.page-teaser__card {
    text-decoration: none;
    color: var(--text-color-default);
  }
  @media (width < 26.25rem) {
    .page-teaser__card {
      margin-block-end: 0;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Team
   Description: Styles for the team component used in RSCE.
   Layer: Components/rsce
   Custom Property Definitions: No
   Depends on: rsce_team_config.php, rsce_team.html.twig, _c-icon-with-text--vars.css, tokens.semantic.css
   ========================================================================== */
@layer components {
  .team_headline span {
    display: block;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-book);
    font-size: var(--font-size-sm);
  }
  .team__contact-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .team__contact-info li {
    display: flex;
  }
  .team__list {
    --flow-spacing-block: var(--flow-spacing-block-sm);
    list-style: none;
    margin: 0;
    padding-block: 0;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE element with text and optional icon and/or headline
   Description: Styles for the RSCE block icon text component.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_block_icon_text.html.twig, rsce_block_icon_text_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  .block-text-icon__card .block-text-icon__icon {
    margin-block-end: var(--flow-grid-spacing-block);
    display: inline-flex;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE element with text and optional icon and/or headline and link
   Description: Styles for the RSCE block icon text link component.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_block_icon_text_link.html.twig, rsce_block_icon_text_link_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  .block-text-icon-link__card .block-text-icon-link__icon {
    margin-block-end: var(--flow-grid-spacing-block);
    display: inline-flex;
  }
  a.block-text-icon-link__card {
    text-decoration: none;
  }
  a.block-text-icon-link__card:hover {
    text-decoration: none;
    color: inherit;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Block Image Slider Text
   Description: Styles for the image slider with text component used in RSCE.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_image_slider_text.html.twig, rsce_image_slider_text_config.php, tokens.semantic.css, _b-cards.css
   ========================================================================== */
@layer components {
  .equal-columns:has(.image-slider-text__card) .card,
  .equal-columns:has(.image-slider-text__card) {
    display: block; /* fix for swiper, dose not work with grid */
  }
  .equal-columns:has(.image-slider-text__card) .card {
    margin-block-end: var(--equal-columns-gap-rows); /* use margin-block-end because no grid */
  }
  /* breakpoint is the same as equal-columns */
  @container article-wrapper (width > 46rem) {
    .equal-columns:has(.image-slider-text__card) {
      display: grid; /* fix for swiper, dose not work with grid - activate grid again */
    }
    .equal-columns:has(.image-slider-text__card) .card {
      margin-block-end: 0; /* reset margin-block-end because grid is active again */
    }
  }
  .image-slider-text__card {
    /* overwrite card styles */
  }
  .image-slider-text__card.card--border, .image-slider-text__card.card--background {
    padding-inline: 0;
    padding-block: 0;
  }
  .image-slider-text__card.card--border .image--hover,
  .image-slider-text__card.card--border img, .image-slider-text__card.card--background .image--hover,
  .image-slider-text__card.card--background img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE element for testimonial block
   Description: Styles for the RSCE block testimonial component.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_block_testimonial.html.twig, rsce_block_testimonial_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  .testimonial {
    overflow: hidden; /* to prevent decorative quotes from overflowing */
  }
  .testimonial__figure {
    position: relative;
    margin-block-start: 3rem;
  }
  .testimonial:not(:has(.testimonial__quote--two-columns)) {
    max-width: 48rem;
    /* margin-inline: auto; */
  }
  @media (width >= 48rem) {
    .testimonial__quote--two-columns {
      column-count: 2;
      column-gap: var(--equal-columns-gap-default);
    }
  }
  /* Sterne */
  .testimonial__stars {
    display: flex;
    gap: 0.25rem;
  }
  .testimonial__star--active {
    /* extra custom property damit die Farbe Kontextabhänig geändert werden kann - content--light */
    --testimonial-star-color-active: #EEC638;
    fill: var(--testimonial-star-color-active);
  }
  /* Name unten links */
  .testimonial__author {
    margin-block-start: var(--flow-spacing-block-lg);
    font-size: var(--font-size-sm);
    color: var(--text-color-light);
    font-weight: var(--font-weight-light);
  }
  /* Dekorative Anführungszeichen */
  .testimonial--blockquotes .testimonial__figure {
    /* extra custom property damit die Farbe Kontextabhänig geändert werden kann - content--light */
    --testimonial-quote-color: var(--text-color-default);
  }
  .testimonial--blockquotes .testimonial__figure::before, .testimonial--blockquotes .testimonial__figure::after {
    position: absolute;
    font-size: var(--font-size-heading-xxl-max);
    line-height: 1;
    color: var(--testimonial-quote-color);
    content: "";
  }
  .testimonial--blockquotes {
    /* Öffnendes Anführungszeichen oben links */
  }
  .testimonial--blockquotes .testimonial__figure::before {
    content: "“";
    top: -3rem;
    left: 0;
  }
  .testimonial--blockquotes {
    /* Schließendes Anführungszeichen unten rechts */
  }
  .testimonial--blockquotes .testimonial__figure::after {
    content: "”";
    right: 0;
    bottom: -2.5rem;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Block Table Link
   Description: Styles for the RSCE Block Table Link element.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_block-table-link.html.twig, rsce_block-table-link_config.php, tokens.semantic.css, _b-cards.css
   ========================================================================== */
@layer components {
  a.block-table-link__card {
    text-decoration: none;
    color: var(--text-color-default);
  }
  a.block-table-link__card:hover .content-headline {
    color: var(--text-color-default-hover);
  }
  .block-table-link__card table {
    text-align: left;
    border-collapse: collapse;
  }
  .block-table-link__card table th,
  .block-table-link__card table td {
    padding: var(--table-cell-padding-block-sm, 0.25rem) var(--table-cell-padding-inline-default, 0.75rem);
  }
  .block-table-link__card table th {
    font-weight: var(--font-weight-medium);
  }
  .block-table-link__card table tr > :first-child {
    padding-inline-start: 0;
  }
  .block-table-link__card table tr > :last-child {
    padding-inline-end: 0;
  }
  .block-table-link__card table caption {
    color: var(--text-color-light);
    font-size: var(--font-size-sm);
  }
  .block-table-link__card .text-icon {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
  .block-table-link__card:has(.card-bg-icon) {
    position: relative;
    overflow: hidden;
  }
  .card-bg-icon {
    position: absolute;
    top: -6.5rem;
    right: 3%;
    width: 4.68rem;
    height: auto;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Block Image Animation Headline
   Description: Styles for the RSCE Block Image Animation Headline.
   Layer:Components/rsce
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .block-image-animation-headline__card > * + * {
    margin-block-start: var(--card-padding-block-sm, 1.5rem);
  }
  .block-image-animation-headline__card.is-icon {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
  .block-image-animation-headline__card.is-image .card {
    padding: 0;
  }
  .block-image-animation-headline__card.is-icon .card__content {
    width: fit-content;
    display: block;
    margin-inline: auto;
  }
  .svg-morph .svg-icon {
    width: 6.5rem;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Block Image Animation Headline
   Description: Styles for the RSCE Block Image Animation Headline.
   Layer:Components/rsce
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  .block-image-headline-anchor-link__card {
    text-decoration: none;
  }
  .block-image-headline-anchor-link__card > * + * {
    margin-block-start: var(--card-padding-block-sm, 1.5rem);
  }
  .block-image-headline-anchor-link__card.is-icon {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
  .block-image-headline-anchor-link__card.is-image .card {
    padding: 0;
  }
  .block-image-headline-anchor-link__card.is-icon .card__content {
    width: fit-content;
    display: block;
    margin-inline: auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE Link List
   Description: Styles for link list.
   Layer: Components/rsce
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css, _b-icon.css, _b-lists.css
   ========================================================================== */
@layer components {
  .link-list {
    /* nur wenn kein headline vorhanden ist */
  }
  .link-list li:first-child:not(:has(.link-list__headline)) .text-icon--link {
    padding-block-start: 0;
  }
  .link-list:has(.link-list__headline) li + li {
    margin-block-start: var(--flow-spacing-block-default);
  }
  .link-list__headline {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-medium);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: RSCE element for animated timeline with headline, image and list
   Description: Styles for the RSCE timeline component.
   Layer: Components/rsce
   Reusable: No
   Custom Property Definitions: No
   Depends on: rsce_timeline.html.twig, rsce_timeline_config.php, tokens.semantic.css
   ========================================================================== */
@layer components {
  /* ── TIMELINE WRAPPER ── */
  .timeline {
    --timeline-bg: var(--background-color-anti-flash-white);
    --timeline-accent: var(--brand-color-primary);
    --timeline-line: var(--text-color-light);
    --timeline-space-to-line: 3rem;
    position: relative;
  }
  /* ── CENTER LINE ── */
  .timeline__line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--timeline-line);
    z-index: 0;
  }
  .timeline__line--fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--timeline-accent);
    transition: height 0.05s linear;
  }
  /* ── ARROW INDICATOR ── */
  .timeline__arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 10;
    transition: top 0.08s linear;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }
  .arrow-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--timeline-accent);
    border: 3px solid var(--timeline-bg);
    box-shadow: 0 0 0 2px var(--timeline-accent);
  }
  /* ── STEP ── */
  .step {
    display: grid;
    grid-template-columns: 1fr var(--timeline-space-to-line) 1fr;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .step:nth-child(odd) .step__content {
    grid-column: 1;
    text-align: right;
    padding-right: var(--timeline-space-to-line);
  }
  .step:nth-child(even) .step__content {
    grid-column: 3;
    text-align: left;
    padding-left: var(--timeline-space-to-line);
  }
  .step:nth-child(odd) .step__content {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-right: var(--timeline-space-to-line);
  }
  .step:nth-child(even) .step__content {
    grid-column: 3;
    grid-row: 1; /* ← verhindert dass der Spacer verdrängt wird */
    text-align: left;
    padding-left: var(--timeline-space-to-line);
  }
  /* ── SPACER / DOT ── */
  .step__spacer {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
  .step__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--timeline-line);
    border: 2px solid var(--timeline-bg);
    transition: background 0.4s ease, transform 0.3s ease;
  }
  .step.in-view .step__dot {
    background: var(--timeline-accent);
    transform: scale(1.4);
  }
  /* ── CONTENT ── */
  .step__content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .step.in-view .step__content {
    opacity: 1;
    transform: translateY(0);
  }
  /* ── IMAGE ── */
  .step:nth-child(odd) figure {
    margin-left: auto;
  }
  .step:nth-child(even) figure {
    margin-right: auto;
  }
  .step__content img {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  }
  /* ── LIST ── */
  .step__content .list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .step:nth-child(odd) .list {
    align-items: flex-end;
  }
  .step:nth-child(even) .list {
    align-items: flex-start;
  }
  /* ── RESPONSIVE ── */
  @media (max-width: 48rem) {
    .timeline {
      padding: 0 16px 80px;
    }
    .step {
      grid-template-columns: 24px 1fr;
    }
    .step:nth-child(2n+1) .list {
      align-items: flex-start;
    }
    .step:nth-child(odd) .step__content,
    .step:nth-child(even) .step__content {
      grid-column: 2;
      grid-row: 1;
      text-align: left;
      padding: 0 0 0 20px;
    }
    .step:nth-child(odd) .step__spacer,
    .step:nth-child(even) .step__spacer {
      grid-column: 1;
      grid-row: 1;
    }
    .step:nth-child(odd) figure {
      margin-left: 0;
    }
    .timeline__line {
      left: 27px;
      transform: none;
    }
    .timeline__arrow {
      left: 28px;
      transform: translateX(-50%);
    }
  }
}
/* 60) utilities */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Accessibility Utilities
   Description: Utility classes to enhance accessibility.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
@layer utilities {
  /* .sr-only is a common class name for screen-reader-only content, but I prefer .visually-hidden as it describes what it does rather than who it’s for. */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  /* Utility classes from semantic custom properties */
  [hidden] {
    display: none;
  }
  /* Accessible variant for users with reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  .is-reduce-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Text Utilities
   Beschreibung: Utility-Klassen für Text-Alignment, Breite und mehr.
   Layer: Utilities
   Wiederverwendbar: Ja
   Custom Property Definitionen: Nein
   Abhängig von: tokens.semantic.css
   ========================================================================== */
@layer utilities {
  .u-text-narrow {
    max-width: 65ch;
  }
  .u-text-narrow--center {
    max-width: 65ch;
    margin-inline: auto;
  }
  .u-text-left {
    text-align: left;
  }
  .u-text-center {
    text-align: center;
  }
  .u-text-right {
    text-align: right;
  }
  .u-text-justify {
    text-align: justify;
  }
  @media (width < 26.25rem) {
    .u-text-narrow--center {
      margin-inline: 0;
    }
    .u-text-center {
      text-align: left;
    }
  }
  /* Utility-Klasse um dunkle Hintergründe mit invertierter Textfarbe zu erstellen */
  /* die Elemente müssen zwingende die Custom property habe und nicht die Farbe von body erben */
  .content--light {
    --text-color-default: var(--text-color-default-inverted);
  }
  .content--light a:hover {
    --text-color-default-hover: var(--text-color-default-inverted-hover);
  }
  .content--light svg {
    fill: var(--text-color-default-inverted);
  }
  .content--light {
    /* Überschreibe die Farbe der ", welche als Pseudoklasse eingebunden sind */
  }
  .content--light .testimonial__figure {
    --testimonial-quote-color: var(--text-color-default-inverted);
  }
  .content--light .testimonial__star--active {
    fill: var(--testimonial-star-color-active);
  }
  .content--light .text-icon--link {
    --link-text-icon-color: var(--text-color-default-inverted); /* text + svg works over currentcolor */
    --link-text-icon-color-hover: var(--text-color-default-inverted-hover); /* text + svg works over currentcolor */
    --link-text-icon-icon-icon: #fff; /* arrow color */
  }
  .content--light .badge.badge--only-text-icon {
    --badge-color: var(--text-color-default-inverted);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Icon Utilities
   Description: Utility classes for icons.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer utilities {
  .svg-icon--red svg {
    color: var(--brand-color-primary);
  }
  .svg-icon--blue svg {
    color: var(--brand-color-secondary);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Text-Icon Utilities
   Description: Utility classes for _c-text-icon--vars.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css, _c-text-icon--vars.scss
   ========================================================================== */
@layer utilities {
  .text-icon__text--bold .text-icon__text {
    font-weight: var(--font-weight-medium);
  }
  .text-icon--flex-block {
    display: flex;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Grid Utilities
   Description: Utility classes for _l-grid.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: _l-grid.scss
   ========================================================================== */
@layer utilities {
  .grid-item--center {
    justify-self: center;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Images Utilities
   Description: Utility classes for _b-images.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: _b-images.scss
   ========================================================================== */
@layer utilities {
  .content-image--center img {
    margin-inline: auto;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Image hover effect
   Description: utility classes for images with hover effect
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
@layer utilities {
  .content-image--no-hover-icon .image--hover::before,
  .content-image--no-hover-icon .image--hover::after {
    display: none;
  }
  .content-image--no-hover-icon .image--hover img {
    transition: none;
  }
  .content-image--no-hover-icon .image--hover:hover img {
    transform: none;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Utility: Elementgroup Utilities
   Description: Utility classes for Contao Elementgroup.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
@layer utilities {
  .element-group--center {
    margin-inline: auto;
  }
}
/* 70) overrides */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Extension Cookiebar
   Description: Custom styles for Contao Cookiebar extension.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension: oveleon/contao-cookiebar
   ========================================================================== */
:root {
  --ccb-text: var(--text-color-default);
  --ccb-bdr: var(--border-color-default);
  --ccb-btn-clr: var(--button-color-reduced);
  --ccb-btn-clr-hvr: var(--button-background-reduced-hover);
  --ccb-btn-bg: var(--button-background-reduced);
  --ccb-btn-bg-hvr: var(--button-background-reduced-hover);
}

.contao-cookiebar .cc-btn {
  border: none;
  border-radius: 0;
}
.contao-cookiebar .cc-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 8px;
  align-items: stretch;
  width: 100%;
}

.cc-module {
  text-align: center;
  margin-top: 5rem;
}
.cc-module button {
  display: inline-block;
  background-color: var(--button-background-reduced);
  padding-inline: var(--button-padding-inline);
  padding-block: var(--button-padding-block);
  cursor: pointer;
  color: var(--button-color-reduced);
  outline: 0 none;
}
.cc-module button:hover {
  background-color: var(--button-color-reduced-hover);
  color: var(--button-background-reduced-hover);
}

/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao addon Handorgel
   Description: Custom styles for Contao Handorgel accordion extension.
   Layer: Extensions/contao
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
/* no layer to overwrite default handorgel styles */
.content-accordion {
  border: none;
}

.handorgel__header .handorgel__header__button {
  box-sizing: border-box;
  padding: 1rem;
}
.handorgel__header .handorgel__header__button:hover {
  color: var(--text-color-default-hover);
}
.handorgel__header.handorgel__header--opened .handorgel__header__button {
  color: var(--text-color-default-hover);
}

.handorgel__header__button {
  background-color: transparent;
  border-inline: none;
  border-block-start: none;
  border-block-end: 1px solid currentcolor;
}

.handorgel__content {
  background-color: transparent;
  border: none;
}

.handorgel__headline {
  line-height: 1;
}

.handorgel__header .handorgel__header__button {
  display: flex;
  justify-content: space-between;
}
.handorgel__header .handorgel__icon {
  position: relative;
  width: 1em;
}
.handorgel__header .handorgel__icon::before,
.handorgel__header .handorgel__icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 4px;
  background-color: var(--text-color-default);
  transform-origin: 50% 50%;
  transition: all 0.25s ease;
}
.handorgel__header .handorgel__icon::before {
  transform: rotate(0deg);
  opacity: 1;
}
.handorgel__header .handorgel__icon::after {
  transform: rotate(-90deg);
}
.handorgel__header.handorgel__header--opened .handorgel__icon::before {
  transform: rotate(0deg);
  opacity: 1;
  background-color: var(--text-color-default-hover);
}
.handorgel__header.handorgel__header--opened .handorgel__icon::after {
  transform: rotate(0deg);
  background-color: var(--text-color-default-hover);
}

/* 80) projects */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Site Header Top Section
   Description: Styles for the top section of the site header component.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .site-header__top {
    padding-block: 0;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao News Module Styles
   Description: Custom styles for the Contao news module to fit layout.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   Extension: codefog/contao-news_categories
   ========================================================================== */
@layer projects {
  /* .newslist__card {
      grid-template-rows: inherit;
      grid-row: inherit;
  } */
  .newslist__card > *:not(:first-child) {
    padding-inline: 0;
  }
  .newslist__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block-sm, 1.5rem);
  }
  .newslist__card > *:last-child {
    padding-block-end: var(--card-padding-block-sm, 1.5rem);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Background Color Variants for Articles
   Description: Styles for background color variants.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .background-color--blue {
    background-color: var(--background-color-blue);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Background Color Variants for Articles
   Description: Styles for background color variants.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .site-footer,
  .site-header {
    --site-header-padding-inline: var(--wrapper-padding-inline);
    margin-inline: var(--site-header-padding-inline);
  }
  main > section {
    margin-inline: var(--wrapper-padding-inline);
    margin-block-end: var(--section-margin-block);
  }
  main {
    /* padding for sections with background color */
  }
  main > section {
    padding-inline: var(--section-padding-inline);
  }
  main > section.background-color--standard {
    padding-inline: 0;
  }
  .wrapper {
    padding-inline: 0;
  }
  .hero {
    padding-block-end: 0;
  }
  @media (width < 106rem) {
    .site-footer,
    .site-header {
      margin-inline: 0;
    }
    main > section {
      margin-inline: var(--section-padding-inline);
    }
    main > section.hero.background-color--standard {
      margin-inline: 0;
      padding-inline: 0;
    }
    main > section.background-color--standard {
      padding-inline: 0;
    }
  }
  @media (width < 48rem) {
    main > section {
      margin-inline: 0.5rem;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Card Base
   Description: Base styles for cards.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  /* special styles if figure/image is present */
  .card:has(.card__image) > *:not(:first-child) {
    padding-inline: 0;
  }
  .card:has(.card__image) > *:first-child {
    padding-block-start: 0;
  }
  .card:has(.card__image) > *:last-child {
    padding-block-end: var(--card-padding-block-sm);
  }
  .card:has(.card__image) > *:nth-child(2) {
    padding-block-start: var(--card-padding-block-sm);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Logos in block
   Description: Styles for the logos block.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .logos {
    border-block-start: 1px solid var(--text-color-light);
    padding-block-start: 3rem;
    margin-block-start: 4rem;
    align-items: center;
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Site Header
   Description: Styles for the site header component.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  @media (width < 106rem) {
    .site-header__logo-link {
      margin-inline-start: var(--section-padding-inline);
    }
    .site-header__inner {
      padding-block-start: 0;
      background-color: var(--background-color-anti-flash-white);
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Hero Section
   Description: Styles for the hero section.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .hero__inner {
    padding-inline: var(--section-padding-inline);
    box-sizing: border-box; /* prevents content from overflowing into padding */
  }
  @media (width < 106rem) {
    .hero .content-headline {
      max-width: initial;
    }
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Footer Section
   Description: Styles for the footer section.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .site-footer__inner {
    padding-inline: var(--section-padding-inline);
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: svg morph animation
   Description: Styles for svg morph animation.
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer projects {
  .svg-morph .cls-1 {
    fill: var(--brand-color-primary);
  }
  .svg-morph .cls-2 {
    fill: none;
    stroke: var(--text-color-default);
    stroke-miterlimit: 10;
    stroke-width: 7px;
  }
  .svg-morph.content-overlay[class*="--arrow"]::after {
    width: clamp(8rem, 12cqi, 12rem);
    height: clamp(3.5rem, 5.5cqi, 5rem);
    background-position: right 1.5rem center;
    background-size: 4rem;
  }
  #svg-morph-air-sealflex.content-overlay--arrow-background-default::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5296 17.0209C12.2417 15.1894 15 14.5501 15 11.6685C15 9.48895 14.9816 6 14.9816 6H13.4311V7.59708H11.6258V6H10.0787L10.0753 7.59708H8.27349V6H6.72633V7.59708H4.91769V6H3.37283V7.59708H1.56762V6H0.0135832C0.0135832 6 0.0502836 9.59668 0.0502836 11.7099C0.0502836 14.5892 2.75924 15.2273 2.46563 17.0434C2.15253 18.9767 -0.0781679 19.4029 0.00211443 21.2889C0.04799 22.4053 0.94027 23.1938 1.0412 23.2755C1.63529 23.7727 2.28557 23.8887 3.22029 23.9775C5.03811 23.9775 5.78244 24 7.49819 24C9.21394 24 9.95597 23.9775 11.7795 23.9775C12.7142 23.8887 13.3634 23.7715 13.9586 23.2755C14.0573 23.1938 14.9518 22.4053 14.9977 21.2889C15.0768 19.3934 12.8312 18.9578 12.5307 17.0209H12.5296ZM13.4299 21.0391C13.1352 22.1839 9.83211 22.1839 7.50048 22.1839C5.16541 22.1875 1.86122 22.1875 1.56762 21.0391C1.27975 19.9155 4.21235 19.03 4.14239 16.9582C4.10569 15.8193 3.1618 14.4021 2.46563 13.6208C1.89563 12.9791 1.56189 12.8429 1.60088 12.5706C1.74539 11.6661 5.69184 11.6685 7.50048 11.6685C9.30913 11.6685 13.2556 11.6685 13.3966 12.5706C13.4391 12.8429 13.1019 12.9791 12.5296 13.6208C11.8277 14.4057 10.8873 15.8193 10.8506 16.9582C10.7829 19.03 13.7189 19.9155 13.4311 21.0391H13.4299Z' fill='%23192124'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M52.3537 16L42.945 23.7938L43.75 24.75L55 15.3488L43.75 6L42.9437 6.955L52.355 14.75H25V16H52.3537Z' fill='%23E52713'/%3E%3Cpath d='M79.9786 4.5H78.4283V6.01966H76.6233V4.5H75.0764L75.0729 6.01966H73.2714V4.5H71.7245V6.01966H69.9161V4.5H68.3715V6.01966H66.5665V4.5H65.0127C65.0127 4.5 65.046 11.7745 65.046 13.7883C65.046 16.5321 65.015 17.1492 65.015 18.8708C65.015 20.7368 65.015 21.1317 65.0001 22.9165C64.9875 23.9803 65.9381 24.7317 66.0356 24.8096C66.6331 25.2834 67.2833 25.3939 68.2178 25.4786C70.0354 25.4786 70.7796 25.5 72.4951 25.5C74.2106 25.5 74.9525 25.4786 76.7758 25.4786C77.7104 25.3939 78.3595 25.2823 78.9546 24.8096C79.0521 24.7317 79.9844 23.9803 79.9935 22.9165C80.0084 21.108 79.9477 20.7977 79.9752 18.8494C80.0027 17.0984 79.9786 16.435 79.997 13.7488C80.0096 11.6719 79.9786 4.5 79.9786 4.5ZM78.4466 18.7896C78.4191 20.7673 78.4409 21.5333 78.4283 22.6784C78.4156 23.8089 74.831 23.7694 72.4963 23.7694C70.165 23.7728 66.586 23.8089 66.5677 22.6784C66.5459 21.5514 66.5459 20.7819 66.5459 18.7896V15.6092C66.5459 14.78 66.5585 11.0209 66.601 10.7614C66.7454 9.89948 70.6913 9.89948 72.4963 9.89948C74.3012 9.89948 78.2505 9.89948 78.395 10.7614C78.4351 11.0209 78.4466 14.7766 78.4466 15.6092C78.4466 16.4418 78.465 17.6918 78.4466 18.7896Z' fill='%23192124'/%3E%3C/svg%3E");
  }
  #svg-morph-low-pressure-sealflex.content-overlay--arrow-background-default::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 83 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18.3621V10.9839C15 9.22878 13.742 8 12.302 8C10.9741 8 9.69043 9.30806 9.69043 10.8473C9.69043 14.9994 9.67876 16.2855 7.50008 16.2855C5.32141 16.2855 5.31207 15.0006 5.31207 10.8473C5.31207 9.30035 4.02727 8 2.69813 8C1.25812 8 0.000161383 9.22878 0.000161383 10.9839V18.3621C0.000161383 18.7343 -0.0301792 19.788 0.741168 20.7921C1.65255 21.9758 2.74364 22 3.12522 22H11.8726C12.2542 22 13.3441 21.9758 14.2567 20.7921C15.028 19.7869 14.9977 18.7343 14.9977 18.3621H15ZM12.9952 19.7472C12.5028 20.3044 12.0535 20.2493 11.7722 20.2493H3.23025C2.94902 20.2493 2.49975 20.3033 2.0073 19.7472C1.53352 19.2121 1.56853 18.7453 1.56853 18.4282V10.9773C1.56853 10.2726 2.13099 9.7639 2.69462 9.7639C3.20108 9.7639 3.75304 10.1933 3.75304 10.9773C3.75304 17.2269 5.04601 17.805 7.50241 17.805C9.95882 17.805 11.2518 17.228 11.2518 10.9773C11.2518 10.2087 11.8038 9.7639 12.3102 9.7639C12.8727 9.7639 13.4386 10.2726 13.4386 10.9773V18.4282C13.4386 18.7464 13.4713 19.2121 12.9975 19.7472H12.9952Z' fill='%23192124'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M52.3537 16L42.945 23.7938L43.75 24.75L55 15.3488L43.75 6L42.9437 6.955L52.355 14.75H25V16H52.3537Z' fill='%23E52713'/%3E%3Cpath d='M80.9045 21.4509V14.2529C80.9045 12.5407 80.9767 11.5804 82.1015 11.3419C83.2262 11.1034 83.3706 5 82.1015 5H65.916C64.719 5 64.6705 10.9541 65.916 11.3419C67.1614 11.7297 67.0559 12.5407 67.0559 14.2529V21.4509C67.0559 21.814 67.0279 22.842 67.74 23.8216C68.5814 24.9764 69.5888 25 69.9411 25H78.0171C78.3694 25 79.3757 24.9764 80.2182 23.8216C80.9303 22.8409 80.9023 21.814 80.9023 21.4509H80.9045ZM79.0525 22.8022C78.5978 23.3458 78.183 23.2921 77.9234 23.2921H70.037C69.7773 23.2921 69.3625 23.3447 68.9079 22.8022C68.4705 22.2802 68.5028 21.8247 68.5028 21.5154V14.2465C68.5028 12.4397 68.728 11.2055 67.7842 10.8048C65.9171 10.0132 66.4676 6.42005 67.0451 6.42005H80.926C81.5035 6.42005 82.1025 10.0132 80.187 10.8048C79.4199 11.1217 79.4608 12.5106 79.4608 14.2465V21.5154C79.4608 21.8258 79.491 22.2802 79.0536 22.8022H79.0525Z' fill='%23192124'/%3E%3C/svg%3E%0A");
  }
  #svg-morph-high-pressure-sealflex.content-overlay--arrow-background-default::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 89 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9H0V10.3229H1.66909C2.45174 10.3229 2.99034 10.8921 2.99034 11.7195V17.8395C2.99034 18.1629 2.96603 19.0783 3.5841 19.9507C4.31532 20.979 5.18868 21 5.49444 21H12.5046C12.8095 21 13.6837 20.979 14.414 19.9507C15.0321 19.0783 15.0087 18.1629 15.0087 17.8395V11.7195C15.0087 10.8949 15.5398 10.32 16.3169 10.32H18V9.00096V9ZM13.4013 19.0438C13.0068 19.5279 12.6477 19.48 12.4214 19.48H5.57673C5.35138 19.48 4.99138 19.5279 4.59678 19.0438C4.21714 18.578 4.24519 18.1734 4.24519 17.8969V11.4239C4.24519 10.8117 4.69683 10.3698 5.14753 10.3698C5.55335 10.3698 7.45808 10.3746 7.45808 10.3746H10.5429C10.5429 10.3746 12.4466 10.3698 12.8525 10.3698C13.3032 10.3698 13.7557 11.1073 13.7557 11.7195V17.8969C13.7557 18.1734 13.7819 18.578 13.4023 19.0438H13.4013Z' fill='%23192124'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M55.3537 16L45.945 23.7938L46.75 24.75L58 15.3488L46.75 6L45.9437 6.955L55.355 14.75H28V16H55.3537Z' fill='%23E52713'/%3E%3Cpath d='M89 9.36784H86.1298C84.0418 9.36784 84.0604 7 81.1029 7C79.0793 7 80.3 7 80.3 7H76.7011C76.7011 7 77.948 7 75.8993 7C72.9527 7 72.9473 9.36784 70.8636 9.36784H68V10.8707H69.9473C70.8604 10.8707 71.4887 11.5173 71.4887 12.4572V19.4097C71.4887 19.777 71.4604 20.8169 72.1815 21.8079C73.0345 22.9761 74.0535 23 74.4102 23H82.5887C82.9444 23 83.9644 22.9761 84.8164 21.8079C85.5375 20.8169 85.5102 19.777 85.5102 19.4097V12.4572C85.5102 11.5205 86.1298 10.8674 87.0364 10.8674H89V9.36892V9.36784ZM83.6349 20.7778C83.1745 21.3276 82.7556 21.2733 82.4916 21.2733H74.5062C74.2433 21.2733 73.8233 21.3276 73.3629 20.7778C72.92 20.2486 72.9527 19.7889 72.9527 19.4749L72.9658 10.8826C72.9658 10.423 74.0142 8.33877 76.6771 8.33877C78.26 8.33877 77.4931 8.3442 77.4931 8.3442H79.508C79.508 8.3442 78.7869 8.33877 80.324 8.33877C82.9869 8.33877 84.0604 10.423 84.0604 10.9913L84.0473 19.4749C84.0473 19.7889 84.0778 20.2486 83.6349 20.7778Z' fill='%23192124'/%3E%3C/svg%3E%0A");
  }
}
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Animation fuer die Eigenschaftsmatrix
   Description: Styles für die Eigenschaftsmatrix
   Layer: Projects
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
.feature-matrix {
  --cube-size: 13rem;
  --label-gap: clamp(8px, 1vw, 16px);
  --label-width-application: 112px;
  --label-width-geometry: 98px;
  --label-width-material: 108px;
  --label-slide-y: clamp(4px, calc(var(--cube-size) * 0.025), 12px);
  height: calc(var(--cube-size) * 2);
  position: relative;
  overflow: hidden;
}

.feature-matrix__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.feature-matrix__cube {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  will-change: transform;
}

.feature-matrix__cube svg {
  width: var(--cube-size);
  height: var(--cube-size);
}

.feature-matrix__label {
  position: absolute;
  will-change: transform, opacity;
  pointer-events: none;
}

.feature-matrix__label--application {
  left: calc(50% - var(--cube-size) / 2 - var(--label-gap) - var(--label-width-application));
  top: calc(50% - var(--cube-size) * 0.22);
  opacity: 1;
  transform: translate(0, calc(-1 * var(--label-slide-y)));
}

.feature-matrix__label--application svg {
  width: var(--label-width-application);
}

.feature-matrix__label--geometry {
  left: calc(50% + var(--cube-size) / 2 + var(--label-gap));
  top: calc(50% - var(--cube-size) * 0.26);
  opacity: 1;
  transform: translate(0, calc(-1 * var(--label-slide-y)));
}

.feature-matrix__label--geometry svg {
  width: var(--label-width-geometry);
}

.feature-matrix__label--material {
  left: 50%;
  top: calc(50% + var(--cube-size) / 2 + var(--label-gap));
  opacity: 1;
  transform: translateX(-50%);
}

/* Progressive Enhancement: nur mit JS initial ausblenden und einfliegen lassen */
.feature-matrix--js .feature-matrix__label {
  opacity: 0;
}

.feature-matrix__label--material svg {
  width: var(--label-width-material);
}

.feature-matrix__label svg {
  display: block;
  height: auto;
}

@media (max-width: 75rem) {
  .feature-matrix {
    --cube-size: 11rem;
    --label-width-application: 102px;
    --label-width-geometry: 88px;
    --label-width-material: 94px;
  }
}
@media (max-width: 48rem) {
  .feature-matrix {
    --cube-size: 9rem;
  }
}
@media (max-width: 26.25rem) {
  .feature-matrix {
    --cube-size: 6rem;
    --label-width-application: 97px;
    --label-width-geometry: 83px;
    --label-width-material: 89px;
  }
}
/* 85) themes */
/* @use "./85-themes/your-theme-name" as *; */
/* define layer stack */
@layer settings, generic, base, layout, extensions, components, utilities, overrides, projects, themes;

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