@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:
    ========================================================================== */
@layer settings {
  :root {
    /* ================
    Colors
    ================ */
    --clr-black: hsl(0deg 0% 0%);
    --clr-white: hsl(0deg 0% 100%);
    --clr-red-500: hsl(351deg 86% 46%);
    --clr-blue-500: hsl(198deg 100% 45%);
    --clr-yellow-500: hsl(50deg 100% 53%);
    --clr-grey-200: hsl(0deg 0% 20%);
    --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%);
    --clr-warm-grey-800: hsl(60deg 12% 97%);
    /* ================
    Font Families
    ================ */
    --ff-sans: "CelexGrotesk", arial, sans-serif;
    --ff-sans-2: "Copperhewitt", "Times New Roman", times, 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 > 760px) {
    :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: 2.75rem;
    --fs-hl-xxl-max: 4.756rem;
    --fs-hl-xxl-min-no-unit: 2.75;
    --fs-hl-xxl-max-no-unit: 4.756;
    --fs-hl-xl-min: 2.5rem;
    --fs-hl-xl-max: 3.125rem;
    --fs-hl-xl-min-no-unit: 2.5;
    --fs-hl-xl-max-no-unit: 3.125;
    --fs-hl-lg-min: 2rem;
    --fs-hl-lg-max: 2rem;
    --fs-hl-lg-min-no-unit: 2;
    --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-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: 2rem;
    --space-900: 3rem;
  }
  @media (width > 760px) {
    :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 > 760px) {
    :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 {
    /* ================
    Breakpoints
    ================ */
    --breakpoint-sm: 26.25rem; /* 420px */
    --breakpoint-sm-no-unit: 26.25;
    --breakpoint-md: 48rem; /* 768px */
    --breakpoint-md-no-unit: 48;
    --breakpoint-lg: 64rem; /* 1024px */
    --breakpoint-lg-no-unit: 64;
    --breakpoint-xl: 90rem; /* 1440px */
    --breakpoint-xl-no-unit: 90;
    --breakpoint-xxl: 112.5rem; /* 1800px */
    --breakpoint-xxl-no-unit: 112.5;
    /* ================
    Radius
    ================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 20px;
    --radius-xl: 40px;
    /* ================
    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
   Settings: Tokens Semantic
   Description: Define semantic design tokens based on primitive tokens.
   Layer: Settings
   Reusable: Yes
   Custom Property Definitions: Yes
   Depends on:
   ========================================================================== */
/* 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 Structure:
   1. Brand Colors - Brand identity colors
   2. Focus - Global interaction states
   3. Section - Main container
   4. Wrapper - Content wrapper
   5. Layout Gaps - General spacing between elements
   6. Flow Spacing - Vertical rhythm
   7. Card - Card components
   8. Equal Columns Layout - Grid layout utility
   9. Flex Group Layout - Flex layout utility
   10. Grid Auto-Fit Layout - Responsive grid utility
   11. Header - Header area
   12. Logo - Logo component
   13. Navigation - Navigation menu
   14. Button - Buttons
   15. Link - Links
   16. Text - Text colors
   17. Background - Background colors
   18. Form - Form elements
   19. Table - Table elements
   20. Border - Borders (colors & radius)
   21. Icon - Icon sizes
   22. Font - Typography (font sizes, weights, families, line heights)
*/
@layer settings {
  :root {
    /* ================
    Brand Colors
    ================ */
    --brand-color-primary: var(--clr-red-500);
    --brand-color-secondary: var(--clr-blue-500);
    --brand-color-tertiary: var(--clr-yellow-500);
    /* ================
    Focus
    ================ */
    --focus-color-default: var(--clr-blue-500);
    /* ================
    Section
    ================ */
    --section-width-xs: var(--width-300);
    --section-width-sm: var(--width-500);
    --section-width-default: var(--width-700);
    --section-width-full: var(--width-1000);
    --section-padding-inline: var(--space-400); /* do not use yet */
    --section-padding-block: var(--space-800);
    /* ================
    Wrapper
    ================ */
    --wrapper-padding-inline: var(--space-400);
    --wrapper-padding-block: var(--space-750); /* do not use yet */
    /* ================
    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); /* for normal flow use em units */
    --flow-spacing-block-lg: var(--space-500-em);
    --flow-grid-spacing-block: var(--space-400); /* grid flow has to be rem */
    /* ================
    Card
    ================ */
    --card-padding-inline: var(--space-600);
    --card-padding-block: var(--space-700);
    /* ================
    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-750);
    /* ================
    Logo
    ================ */
    --logo-width-default: 380px;
    /* ================
    Navigation
    ================ */
    --navigation-gap-inline-default: var(--space-600);
    --navigation-gap-block-default: var(--space-500);
    --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);
    /* ================
    Button
    ================ */
    --button-background-primary: var(--clr-red-500);
    --button-background-secondary: var(--clr-grey-600);
    --button-background-reduced: var(--clr-grey-600);
    --button-background-accent: var(--clr-yellow-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-red-500);
    --button-color-reduced: var(--clr-black);
    --button-color-accent: var(--clr-black);
    --button-color-primary-hover: var(--clr-red-500);
    --button-color-secondary-hover: var(--clr-grey-600);
    --button-color-reduced-hover: var(--clr-black);
    --button-color-accent-hover: var(--clr-black);
    --button-padding-inline: var(--space-450);
    --button-padding-block: var(--space-350);
    --button-padding-inline-sm: var(--space-300);
    --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);
    /* ================
    Background
    ================ */
    --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-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-padding-inline-regular: var(--space-200);
    --icon-padding-inline-lg: var(--space-300);
    /* ================
    Fonts
    ================ */
    /* font sizes */
    --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);
    /* font sizes static */
    --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);
    /* font weight */
    --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 for fluid typography */
    --fluid-breakpoint-min: var(--breakpoint-sm); /* 420px */
    --fluid-breakpoint-max: var(--breakpoint-xl); /* 1440px */
    --fluid-breakpoint-min-no-unit: var(--breakpoint-sm-no-unit);
    --fluid-breakpoint-max-no-unit: var(--breakpoint-xl-no-unit);
    /* font families */
    --font-family-base: var(--ff-sans);
    --font-family-heading: var(--ff-sans-2);
    --line-height-body: var(--lh-regular);
    --line-height-heading: var(--lh-sm);
  }
  /* ================
      high contrast mode
      ================ */
  html.is-high-contrast {
    --text-color-light: var(--clr-grey-200);
  }
}
/* 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 {
  @font-face {
    font-family: Copperhewitt;
    src: url("../fonts/cooperhewitt-medium-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Copperhewitt;
    src: url("../fonts/cooperhewitt-semibold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Copperhewitt;
    src: url("../fonts/cooperhewitt-bold-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Copperhewitt;
    src: url("../fonts/cooperhewitt-heavy-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-Light.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-Book.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-BookItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: CelexGrotesk;
    src: url("../fonts/CelexGrotesk-Bold.woff2") format("woff2");
    font-weight: 700;
    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
   Base: Typography Styles
   Description: Base typography styles for the theme.
   Layer: Base
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: 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-book);
    color: var(--text-color-default);
  }
  /* formula for the preferred value 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));
  */
  /* headings (clamp + fallback) */
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--font-family-heading);
    line-height: var(--line-height-heading);
    color: var(--text-color-default);
    text-wrap: balance;
    hyphens: auto; /* enable hyphenation for headings to prevent overflowing on small viewport */
  }
  h1 {
    /* fluid typography parameters */
    --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);
    text-align: center;
    margin-block-end: var(--flow-spacing-block-sm);
  }
  h2 {
    /* fluid typography parameters */
    --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;
  }
  h3 {
    /* 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 */
    /* 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;
  }
  /* text elements */
  th,
  td,
  caption,
  p {
    /* fluid typography parameters */
    --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));
  }
  strong,
  b {
    font-weight: var(--font-weight-medium);
  }
  a {
    color: var(--text-color-default);
    transition: color 0.3s ease;
  }
  /* use focus-visible and not focus, because after a click on a button the button should not be stay on focus */
  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;
  }
  /* center button inside content-download wrapper with class button--center */
  .content-download.button--center .button {
    margin-inline: auto;
  }
  /* 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);
    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-font {
    --svg-icon-width: 1em;
    --svg-icon-height: 1em;
  }
}
/* 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-narrow {
    --wrapper-max-width: var(--section-width-sm);
  }
  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;
  }
  /* ================
  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;
  }
}
/* 40) extensions (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__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 2em;
    flex-flow: wrap;
  }
  .newslist__info .newslist__divider {
    padding-inline-end: 0.5rem;
  }
  .layout_full {
    margin-block-end: var(--section-padding-block);
    /* display none for info under headline */
  }
  .layout_full .info {
    display: 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;
  }
}
/* ==========================================================================
   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 > .content-text,
  .wrapper--width-standard > .content-text {
    max-width: 65ch;
  }
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-narrow > .content-text h3,
  .wrapper--width-narrow > .content-text h4,
  .wrapper--width-narrow > .content-text h5,
  .wrapper--width-narrow > .content-text h6,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-standard > .content-text h3,
  .wrapper--width-standard > .content-text h4,
  .wrapper--width-standard > .content-text h5,
  .wrapper--width-standard > .content-text h6 {
    text-align: left;
  }
  .wrapper--width-narrow > .content-text:has(.u-text-center),
  .wrapper--width-standard > .content-text:has(.u-text-center) {
    margin-inline: auto;
  }
  .wrapper--width-narrow > * .content-text,
  .wrapper--width-standard > * .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: #000000 !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;
  }
  .formbody .widget > * + *,
  .formbody fieldset > * + * {
    margin-block-start: var(--flow-spacing-block-sm);
  }
  .formbody input.text,
  .formbody textarea {
    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 textarea {
    min-height: 16rem;
    resize: vertical;
  }
  .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 .checkbox_container legend,
  .formbody label {
    font-weight: var(--fw-500);
  }
  .formbody .checkbox_container label {
    font-weight: inherit;
  }
  .formbody .checkbox_container span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .formbody > *:last-child {
    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-grid-spacing-block, 1.5rem);
  }
  .content-block .equal-columns .content-download + .content-download {
    margin-block-start: 0;
  }
}
/* 50) components */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Component: Section Background Decorations
   Description: Styles for decorative background elements in sections (circles, crosses).
   Layer: Components
   Reusable: Yes
   Custom Property Definitions: No
   Depends on: tokens.semantic.css
   ========================================================================== */
@layer components {
  /* default/fallback (optional) */
  :root {
    --decor-color-element: var(--background-color-extra-light);
    --decor-color-background: var(--background-color-light);
  }
  /* standard in main */
  main {
    --decor-color-element: var(--background-color-light, hsl(0deg 0% 95%));
    --decor-color-background: var(--background-color-extra-light);
  }
  /* footer */
  .site-footer {
    --decor-color-element: var(--background-color-extra-light, hsl(0deg 0% 95%));
    --decor-color-background: var(--background-color-light);
  }
  .decor-section {
    --shape-size: 200px;
    position: relative;
    overflow: clip; /* cuts the shapes cleanly at the edges */
    background-color: var(--decor-color-background);
  }
  .decor-section__inner {
    position: relative;
    z-index: 1; /* above the shapes */
  }
  .decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .shape {
    position: absolute;
    display: block;
    will-change: transform;
  }
  /* Circle */
  .shape--circle {
    --shape-size: clamp(10rem, 28vw, 26rem);
    background: var(--decor-color-element);
    border-radius: 50%;
    width: var(--shape-size);
    aspect-ratio: 1; /* keeps the circle round */
    /* filter: saturate(110%); */
    /* optional: slightly bolder */
  }
  /* Cross: two bars created using pseudo-elements, rotated by 45°. */
  .shape--x {
    --x-thickness: 230px;
    --shape-size: 70px;
    width: var(--shape-size);
    height: var(--shape-size);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .shape--x::before,
  .shape--x::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
  }
  .shape--x::before {
    /* vertical bar */
    left: 50%;
    translate: -50% 0;
    width: var(--x-thickness);
    height: 100%;
    background: var(--decor-color-element);
    border-radius: 9px;
  }
  .shape--x::after {
    /* horizontal bar */
    top: 50%;
    translate: 0 -50%;
    height: var(--x-thickness);
    width: 100%;
    background: var(--decor-color-element);
    border-radius: 9px;
  }
  /* elements position */
  /* top left */
  .shape--tl {
    top: max(-12%, -5rem); /* moves the shape slightly above the section; uses the larger of the two values so it scales with viewport size but never exceeds -13rem */
    left: max(-10%, -13rem);
  }
  /* br */
  .shape--br {
    right: max(-10%, -5rem);
    bottom: max(-4%, -3rem);
  }
  .shape--br-x {
    right: 0;
    bottom: 0;
  }
  @media (width >= 64rem) {
    .shape--tl {
      top: max(-20%, -15rem);
      left: -10rem;
    }
    .shape--br {
      right: max(-20%, -8rem);
      bottom: max(-12%, -16rem);
    }
    .shape--x {
      --x-thickness: 330px;
      --shape-size: 80px;
    }
    .shape--br-x {
      right: 0;
      bottom: 0;
    }
  }
}
/* ==========================================================================
   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;
    border-bottom: 1px solid var(--border-color-light);
    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 < 1200px) {
    .site-header {
      background-color: var(--background-color-extra-light);
      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 */
  }
  .site-header > :first-child {
    background-color: var(--background-color-light);
  }
  @media (width < 1200px) {
    .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: 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 components {
  .skip-navigation {
    background: var(--button-background-primary);
    font-size: var(--font-size-regular);
    padding: 1rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
    border-radius: var(--border-radius-lg);
    color: var(--button-color-primary);
  }
  .skip-navigation:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .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;
  }
  @media (width < 48rem) {
    .navigation ul {
      flex-direction: column;
      row-gap: var(--navigation-gap-block-default);
    }
    .navigation-footer ul {
      align-items: center;
    }
  }
}
/* ==========================================================================
   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 .wrapper {
    display: grid;
    gap: var(--flow-grid-spacing-block) var(--elements-gap-inline);
  }
  .hero__column:first-child {
    grid-row: 2/3;
  }
  .hero__column:last-child {
    grid-row: 1/2;
  }
  .hero-images {
    display: grid;
  }
  .hero-images .content-image:last-child {
    display: none;
  }
  @media (width > 600px) {
    .hero-images {
      grid-template-columns: 1fr 0.7fr;
      gap: var(--elements-gap-block) var(--elements-gap-inline);
    }
    .hero-images .content-image {
      align-self: end;
    }
    .hero-images .content-image:last-child {
      display: block;
    }
  }
  @media (width > 1400px) {
    .hero .wrapper {
      grid-template-columns: 0.8fr 1fr;
      grid-template-rows: auto;
    }
    .hero__column:first-child {
      grid-row: 1/2;
      grid-column: 1/2;
      align-self: center;
    }
    .hero__column:last-child {
      grid-row: 1/2;
      grid-column: 2/3;
    }
  }
  /* decorative dots */
  /* stylelint-disable-next-line no-duplicate-selectors */
  .hero__column:last-child {
    position: relative;
    z-index: 2;
    border-radius: var(--border-radius-default);
    overflow: hidden;
  }
  .dot {
    position: absolute;
    width: clamp(60px, 18vw, 140px);
    height: clamp(60px, 18vw, 140px);
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    /* Für performante Animationen used in dot animation*/
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .dot--red {
    left: -20px;
    top: -20px;
    background: var(--brand-color-primary);
    z-index: 2;
  }
  .dot--blue {
    display: none;
    background: var(--brand-color-secondary);
    z-index: 3;
  }
  .dot--yellow {
    right: 14%;
    bottom: 8%;
    background: var(--brand-color-tertiary);
    z-index: 3;
  }
  @media (width > 600px) {
    .dot--blue {
      display: block;
      right: 10%;
      top: 8%;
    }
    .dot--yellow {
      left: 52%;
      bottom: 8%;
    }
  }
  @media (width > 1400px) {
    .hero-images {
      position: relative;
      z-index: 2;
    }
    .hero__column:last-child {
      overflow: inherit;
    }
    .dot--red {
      left: -100px;
      top: 10%;
      z-index: 1;
    }
  }
}
/* ==========================================================================
   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 {
    padding-inline-start: 3rem;
    margin-inline-start: 3rem;
    border-left: 1px solid var(--border-color-light);
  }
  .nav-search-icon .svg_icon_search__path {
    fill: var(--navigation-color-default);
  }
  .nav-search-icon:hover .svg_icon_search__path {
    fill: var(--navigation-color-default-hover);
  }
  @media (width < 1200px) {
    .nav-search-icon {
      margin-inline-start: 0;
      border-left: none;
      padding-inline: 3rem;
      display: flex;
      align-items: center;
    }
  }
  @media (width < 768px) {
    .nav-search-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 < 1200px) {
    .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;
  }
  .text-icon__icon.svg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor; /* inherit text color */
    /* path {
        fill: currentcolor;
    } */
  }
  .text-icon__text {
    line-height: 1; /* to vertically center the text */
  }
  /* text-icon with link */
  .text-icon--link {
    /* customizable design tokens */
    --link-text-icon-color: var(--link-color-default-hover); /* text + circle */
    --link-text-icon-icon-background: var(--link-color-default-hover); /* circle fill */
    --link-text-icon-icon-icon: #fff; /* arrow color */
    --link-text-icon-color-hover: var(--link-color-default); /* text + circle hover */
    --link-text-icon-icon-background-hover: var(--link-color-default); /* circle fill hover */
    color: var(--link-text-icon-color);
    text-decoration: none;
    font-weight: 400;
    /* used in text-icon__text - is needed? */
    line-height: 1; /* to vertically center the text */
    /* sufficiently large click area (min. ~40–44px height) */
    padding: 0.5rem 0.5rem 0.5rem 0;
    /* 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 {
    fill: var(--link-text-icon-icon-background);
    /* 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);
    transition: transform 0.3s ease;
  }
  .text-icon--link:hover .text-icon__icon-bg, .text-icon--link:active .text-icon__icon-bg {
    fill: var(--link-text-icon-icon-background-hover);
  }
  /* active link in contao navigation */
  .active .text-icon .text-icon__icon {
    transform: translateX(4px);
    transition: transform 0.3s ease;
  }
  .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-light);
    border: 1px solid var(--border-color-extra-light);
  }
  .site-footer__bottom {
    background-color: var(--background-color-light);
  }
  @media (width < 48rem) {
    .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: 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 */
  }
  .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: 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;
  }
}
/* ==========================================================================
   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);
  }
  /* 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(200px, 70vh, 400px);
    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 > 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
   ========================================================================== */
@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 */
  }
  /* 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);
  }
  .page-teaser__card--background {
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-default);
  }
  .page-teaser__card--background .image--hover,
  .page-teaser__card--background img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* padding for all cards with subgrid - without wrapper around content */
  .page-teaser__card > *:not(:first-child) {
    padding-inline: var(--card-padding-inline, 1rem);
  }
  .page-teaser__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block, 1.5rem);
  }
  .page-teaser__card > *:last-child {
    padding-block-end: var(--card-padding-block, 1.5rem);
  }
  .page-teaser__card > :nth-child(n+3) {
    margin-block-start: var(--flow-grid-spacing-block, 1.5rem);
  }
  /* style for Friedrich Engels Schule */
  .page-teaser__card > *:not(:first-child) {
    text-align: center;
  }
  .page-teaser__card .text-icon__text {
    display: none;
  }
}
/* ==========================================================================
   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__card {
    --flow-spacing-block: var(--flow-spacing-block-default, 1.5em);
    display: grid;
    /* padding without wrapper around content */
  }
  .team__card > *:not(:first-child) {
    padding-inline: var(--card-padding-inline, 1rem);
  }
  .team__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block, 1.5rem);
  }
  .team__card > *:last-child {
    padding-block-end: var(--card-padding-block, 1.5rem);
  }
  .team__card > :nth-child(n+3) {
    margin-block-start: var(--flow-spacing-block);
  }
  .team__card .icon-with-text__text {
    line-height: inherit;
  }
  .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: 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.block-text-icon--border {
    border: var(--border-width-default) solid var(--border-color-default);
    border-radius: var(--border-radius-default);
    padding-inline: var(--elements-gap-inline, 1rem);
    padding-block: var(--elements-gap-block, 1rem);
  }
}
/* ==========================================================================
   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
   ========================================================================== */
@layer components {
  /* breakpoint is the same as equal-columns */
  .equal-columns:has(.image-slider-text__card) {
    display: block; /* fix for swiper, dose not work with grid */
  }
  @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 */
    }
  }
  .image-slider-text__card {
    --flow-spacing-block: var(--flow-spacing-block-default, 1.5em);
    /* padding without wrapper around content */
  }
  .image-slider-text__card > *:not(:first-child) {
    padding-inline: var(--card-padding-inline, 1rem);
  }
  .image-slider-text__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block, 1.5rem);
  }
  .image-slider-text__card > *:last-child {
    padding-block-end: var(--card-padding-block, 1.5rem);
  }
  .image-slider-text__card > :nth-child(n+3) {
    margin-block-start: var(--flow-spacing-block);
  }
  .image-slider-text__card .icon-with-text__text {
    line-height: inherit;
  }
}
/* ==========================================================================
   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);
    }
  }
  /* Name unten links */
  .testimonial__author {
    margin-block-start: var(--flow-spacing-block-lg);
    font-size: var(--font-size-sm);
    color: var(--text-color-light);
  }
  /* Dekorative Anführungszeichen */
  .testimonial__figure::before,
  .testimonial__figure::after {
    position: absolute;
    font-size: var(--font-size-heading-xxl-max);
    line-height: 1;
    color: var(--text-color-default);
    content: "";
  }
  /* Öffnendes Anführungszeichen oben links */
  .testimonial__figure::before {
    content: "“";
    top: -3rem;
    left: 0;
  }
  /* Schließendes Anführungszeichen unten rechts */
  .testimonial__figure::after {
    content: "”";
    right: 0;
    bottom: -1.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
   ========================================================================== */
@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 {
    border-radius: var(--border-radius-default);
  }
  .block-table-link__card.block-table-link__card--background, .block-table-link__card.block-table-link__card--border {
    padding-inline: var(--elements-gap-inline, 1rem);
    padding-block: var(--elements-gap-block, 1rem);
  }
  .block-table-link__card.block-table-link__card--background {
    background-color: var(--background-color-light);
  }
  .block-table-link__card.block-table-link__card--border {
    border: var(--border-width-default) solid var(--border-color-default);
  }
  .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;
  }
}
/* ==========================================================================
   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
   ========================================================================== */
@layer components {
  .link-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .link-list .text-icon--link {
    /* customizable design tokens from _b-icons.css */
    --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-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);
  }
}
/* 55) theme-overrides (optional) */
/* @use "./55-theme-overrides" as *; */
/* 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: Accessibility Utilities
   Description: Utility classes to enhance accessibility.
   Layer: Utilities
   Reusable: Yes
   Custom Property Definitions: No
   Depends on:
   ========================================================================== */
@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;
  }
}
/* 70) overrides */
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Extension: Contao Navigation Accessible
   Description: Enhancements for the Contao navigation to fit layout.
   Layer: Extensions/contao
   Reusable: No
   Custom Property Definitions: Yes
   Depends on: tokens.semantic.css
   Extension:
   ========================================================================== */
:root {
  --nav-breakpoint: 1200px; /* set same breakpoint in _header.css, _navigation.css */
  --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(--clr-grey-600);
  --nav-mobile-color: var(--clr-black);
  --nav-mobile-active-background: var(--clr-grey-600);
  --nav-mobile-active-color: var(--clr-red-500);
  --nav-mobile-active-border-color: var(--clr-red-500);
  --nav-mobile-btn-clr: var(--clr-red-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-submenu-background: #fff;
  --nav-burger-line-color: var(--clr-black);
  /* skip link */
  --skip-background: var(--clr-grey-500);
  --skip-color: var(--clr-red-500);
  --skip-focus-border-color: var(--clr-red-500);
}

body.nav-is-desktop .navigation-main ul ul {
  z-index: 999;
}

body.nav-is-desktop .navigation-main .level_1 {
  gap: 0 var(--navigation-gap-inline-default);
}

/* overwrite skip link */
body.nav-is-desktop .navigation-main .skip-link {
  background: var(--button-background-primary);
  font-size: var(--font-size-regular);
  padding: 1rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  border-radius: var(--border-radius-lg);
  color: var(--button-color-primary);
  transform: none;
  opacity: 1;
}

body.nav-is-desktop .navigation-main .skip-link:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body.nav-is-desktop .navigation-main a.skip-link:focus-visible {
  color: var(--button-color-primary);
}

body.nav-is-desktop .btn-toggle-submenu {
  top: 0;
}

body.nav-is-desktop .navigation-main a,
body.nav-is-desktop .navigation-main strong {
  line-height: 1;
}

body.nav-is-desktop .navigation-main .level_1 > li {
  padding: 0 0;
}

body.nav-is-desktop .navigation-main .level_1 ul a,
body.nav-is-desktop .navigation-main .level_1 ul strong {
  font-size: calc(var(--nav-font-size) / 1.2);
}

.navigation-accessible .navigation-main a,
.navigation-accessible .navigation-main strong {
  text-transform: uppercase;
}
.navigation-accessible .navigation-main .level_1 ul a {
  text-transform: none;
}

/* burger navigation position an animation */
.nav-burger {
  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;
}

body.nav-is-mobile.navigation-open .nav-burger {
  height: auto;
  position: fixed;
  top: 2rem;
  right: 2rem;
  transform: scale(1.05);
}

/* burger icon lines */
.nav-burger .icon-line,
.nav-burger .icon-line::after,
.nav-burger .icon-line::before {
  height: 0.2rem;
  border-radius: var(--border-radius-default);
}

@media (width < 1200px) {
  .navigation-accessible {
    order: 3;
    padding-inline: 3rem;
    background-color: var(--button-background-accent);
  }
  /*.nav-burger {
      height: 100%;
  }*/
}
@media (width < 500px) {
  .navigation-accessible {
    padding-inline: 1.5rem;
  }
}
/* define layer stack */
@layer settings, generic, base, layout, extensions, components, theme-overrides, utilities;

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