@charset "UTF-8";
/* ==========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Main SCSS File
   Description: Structured imports using SCSS modules + CSS layers
   ========================================================================== */
/* 00) settings */
/*  =========================================================================
    Author: Agentur KOPFNUSS - Marco Schädlich
    Settings: Tokens Primitives
    Description: Define primitive design tokens such as colors, typography, spacing, etc.
    Layer: Settings
    Reusable: Yes
    Custom Property Definitions: Yes
    Depends on:
    ========================================================================== */
/* 320px */
/* 420px */
/* 736px */
/* 768px */
/* 848px */
/* 1024px */
/* 1120px */
/* 1200px */
/* 1440px */
/* 1600px */
/* 1700px */
/* 1800px */
@layer settings {
  :root {
    /* ================
    Colors
    ================ */
    --clr-black: hsl(0deg 0% 18%);
    --clr-white: hsl(0deg 0% 100%);
    --clr-blue-500: hsl(217deg 71% 53%);
    --clr-red-500: hsl(6deg 85% 49%);
    --clr-grey-200: hsl(0deg 0% 18%);
    --clr-grey-500: hsl(0deg 0% 49%);
    --clr-grey-600: hsl(0deg 0% 60%);
    --clr-grey-800: hsl(0deg 0% 96%);
    --clr-grey-900: hsl(0deg 0% 97%);
    --clr-yellow-500: hsl(44deg 88% 60%);
    --clr-green-300: hsl(128deg 29% 24%);
    /* ================
    Font Families
    ================ */
    --ff-sans: "Overpass", "Noto Sans", "Segoe UI", roboto, arial, sans-serif;
    --ff-script: "DancingScript", "Noto Sans", "Segoe UI", roboto, arial, sans-serif;
    /* ================
    Typography
    ================ */
    /* line height */
    --lh-none: 1;
    --lh-sm: 1.15;
    --lh-regular: 1.4;
    --lh-m: 1.5;
    --lh-l: 1.8;
    /* fixed font size - used in navigation etc. */
    --fs-200: 0.75rem; /* 12px */
    --fs-300: 0.875rem; /* 14px */
    --fs-400: 0.875rem; /* 16px */
    --fs-500: 1rem; /* 18px */
    --fs-600: 1.125rem; /* 20px */
    --fs-650: 1.25rem; /* 22px */
    --fs-700: 1.375rem; /* 24px */
    --fs-800: 1.5rem; /* 26px */
    --fs-900: 1.625rem; /* 34px */
    --fs-1000: 2.125rem; /* 42px */
    --fs-1100: 2.65rem; /* 46px */
  }
  @media (width > 48rem) {
    :root {
      --fs-200: 0.75rem; /* 12px */
      --fs-300: 0.875rem; /* 14px */
      --fs-400: 1rem; /* 16px */
      --fs-500: 1.125rem; /* 18px */
      --fs-600: 1.25rem; /* 20px */
      --fs-650: 1.375rem; /* 22px */
      --fs-700: 1.5rem; /* 24px */
      --fs-800: 1.625rem; /* 26px */
      --fs-900: 2.125rem; /* 34px */
      --fs-1000: 2.65rem; /* 42px */
      --fs-1100: 2.875rem; /* 46px */
    }
  }
  :root {
    /* font-weight */
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    /* fluid parameters */
    --fs-hl-xxl-display-min: 3.375rem;
    --fs-hl-xxl-display-max: 8.625rem;
    --fs-hl-xxl-display-min-no-unit: 3.375;
    --fs-hl-xxl-display-max-no-unit: 8.625;
    --fs-hl-xxl-min: 2rem;
    --fs-hl-xxl-max: 3.756rem;
    --fs-hl-xxl-min-no-unit: 2;
    --fs-hl-xxl-max-no-unit: 3.756;
    --fs-hl-xl-min: 1.75rem;
    --fs-hl-xl-max: 3.125rem;
    --fs-hl-xl-min-no-unit: 1.75;
    --fs-hl-xl-max-no-unit: 3.125;
    --fs-hl-lg-min: 1.5rem;
    --fs-hl-lg-max: 2rem;
    --fs-hl-lg-min-no-unit: 1.5;
    --fs-hl-lg-max-no-unit: 2;
    --fs-regular-min: 1.125rem;
    --fs-regular-min-no-unit: 1.125;
    --fs-regular-max: 1.375rem;
    --fs-regular-max-no-unit: 1.37;
    /* ================
    Width Site
    ================ */
    --width-100: 26rem; /* 416px */
    --width-300: 40rem; /* 640px */
    --width-500: 82rem; /* 1312px */
    --width-600: 100rem; /* 1600px */
    --width-700: 125rem; /* 2000px */
    --width-1000: 100%;
    /* ================
    Width Elements
    ================ */
    --element-width-100: 160px;
    --element-width-200: 240px;
    --element-width-300: 320px;
    --element-width-400: 380px;
    --element-width-500: 416px;
    --element-width-700: 640px;
    /* ================
    Spacing
    ================ */
    --space-100: 0.2rem;
    --space-200: 0.25rem;
    --space-300: 0.5rem;
    --space-350: 0.6rem;
    --space-400: 0.75rem;
    --space-450: 0.8rem;
    --space-500: 1rem;
    --space-600: 1.25rem;
    --space-700: 1.5rem;
    --space-750: 1.75rem;
    --space-800: 2.5rem;
    --space-900: 3.5rem;
  }
  @media (width > 48rem) {
    :root {
      --space-100: 0.25rem; /* 4px */
      --space-200: 0.5rem; /* 8px */
      --space-300: 0.75rem; /* 12px */
      --space-350: 1rem; /* 12px */
      --space-400: 1.25rem; /* 16px */
      --space-450: 1.5rem; /* 16px */
      --space-500: 1.75rem; /* 24px */
      --space-600: 2.125rem; /* 32px */
      --space-700: 2.5rem; /* 48px */
      --space-750: 3rem; /* 48px */
      --space-800: 4.75rem; /* 64px */
      --space-900: 7rem; /* 96px */
    }
  }
  :root {
    --space-100-em: 0.2em;
    --space-200-em: 0.25em;
    --space-300-em: 0.5em;
    --space-400-em: 0.75em;
    --space-500-em: 1em;
    --space-600-em: 1.25em;
    --space-700-em: 1.5em;
    --space-800-em: 1.75em;
    --space-900-em: 2em;
  }
  @media (width > 48rem) {
    :root {
      --space-100-em: 0.25em; /* 4px */
      --space-200-em: 0.5em; /* 8px */
      --space-300-em: 0.75em; /* 12px */
      --space-400-em: 1.25em; /* 16px */
      --space-500-em: 1.75em; /* 24px */
      --space-600-em: 2.125em; /* 32px */
      --space-700-em: 2.5em; /* 48px */
      --space-800-em: 3em; /* 48px */
      --space-900-em: 4.75em; /* 64px */
    }
  }
  :root {
    /* ================
    Radius
    ================ */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    /* ================
    Border
    ================ */
    --border-width-100: 1px;
    --border-width-200: 2px;
    /* ================
    Object Size
    ================ */
    --object-size-xs: 0.75rem;
    --object-size-sm: 1rem;
    --object-size-regular: 1.375rem;
    --object-size-md: 1.5rem;
    --object-size-lg: 2rem;
    --object-size-xl: 3rem;
    --object-size-xxl: 5rem;
  }
}
/* =========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Einstellungen: Tokens Semantic
   Beschreibung: Definition von semantischen Design-Tokens basierend auf Primitiv-Tokens.
   Layer: Settings
   Wiederverwendbar: Ja
   Custom Property Definitionen: Ja
   Abhängig von:
   ========================================================================== */
/* Pattern: --[component]-[property]-[variant]-[state]:
   component: button, navigation, link, text, border, background, icon, etc.
   property: color, background, border, size, spacing, font-size, font-weight, etc.
   variant: primary, secondary, sm, lg, etc.
   state: hover, active, focus, disabled, etc.
*/
/* Token-Struktur:
    Breakpoints
   2. Focus - Globale Interaktionszustände
   3. Section - Hauptcontainer
   4. Wrapper - Content Wrapper
   5. Layout Gaps - Allgemeiner Abstand zwischen Elementen
   6. Flow Spacing - Vertikaler Rhythmus
   7. Card - Card Komponenten
   8. Equal Columns Layout - Grid Layout Utility
   9. Flex Group Layout - Flex Layout Utility
   10. Grid Auto-Fit Layout - Responsives Grid Utility
   11. Header - Header Bereich
   12. Logo - Logo Komponente
   13. Navigation - Navigationsmenü
   14. Button - Buttons
   15. Link - Links
   16. Text - Textfarben
   17. Background - Hintergrundfarben
   18. Form - Formular-Elemente
   19. Table - Tabellen-Elemente
   20. Border - Rahmen (Farben & Radius)
   21. Icon - Icon Größen
   22. Font - Typography (Schriftgrößen, Gewichte, Familien, Zeilenhöhen)
*/
/* ================
Breakpoints
================ */
/* Sass-Variablen für Breakpoints zur Verwendung in Media Queries */
/* Normale Breakpoints */
/* Container Breakpoints für Container Queries */
@layer settings {
  :root {
    /* ================
    Focus
    Globale Fokus-Ring-Parameter für :focus-visible. Werden von der
       Basis-Regel in b-focus.scss und allen Komponenten genutzt, die
       outline: none setzen und den Ring selbst nachbilden müssen.
    ================ */
    --focus-color-default: var(--clr-blue-500);
    --focus-color-default-inverted: var(--clr-white);
    --focus-outline-width: 2px;
    --focus-outline-offset: 3px;
    --skip-link-color: var(--clr-white);
    --skip-link-background: var(--clr-black);
    --skip-link-focus-border-color: var(--clr-white);
    --skip-link-font-weight: var(--fw-400);
    /* ================
    Section
    ================ */
    --section-width-xs: var(--width-500);
    --section-width-sm: var(--width-600);
    --section-width-default: var(--width-700);
    --section-width-full: var(--width-1000);
    --section-padding-inline: var(--space-400); /* noch nicht verwenden */
    --section-padding-block: var(--space-800);
    --section-margin-block: var(--space-100);
    /* ================
    Wrapper
    ================ */
    --wrapper-padding-inline: var(--space-600);
    --wrapper-padding-block: var(--space-750); /* noch nicht verwenden */
    /* ================
    Layout Gaps
    ================ */
    --elements-gap-inline: var(--space-750);
    --elements-gap-block: var(--space-800);
    /* ================
    Flow Spacing
    ================ */
    --flow-spacing-block-sm: var(--space-200-em);
    --flow-spacing-block-default: var(--space-400-em); /* für normalen Flow em-Einheiten verwenden */
    --flow-spacing-block-lg: var(--space-500-em);
    --flow-grid-spacing-block: var(--space-700); /* Grid Flow muss rem sein */
    /* ================
    Card
    ================ */
    --card-padding-inline: var(--space-600);
    --card-padding-block: var(--space-700);
    --card-padding-inline-sm: var(--space-300);
    --card-padding-block-sm: var(--space-350);
    /* ================
    Equal Columns Layout
    ================ */
    --equal-columns-gap-sm: var(--space-500);
    --equal-columns-gap-default: var(--space-750);
    --equal-columns-gap-lg: var(--space-800);
    /* ================
    Flex Group Layout
    ================ */
    --flex-group-gap-default: var(--space-750);
    /* ================
    Grid Auto-Fit Layout
    ================ */
    --grid-auto-fit-column-size-min: var(--element-width-300);
    --grid-auto-fit-column-size-max: var(--element-width-400);
    /* ================
    Header
    ================ */
    --header-padding-block-default: var(--space-600);
    /* ================
    Logo
    ================ */
    --logo-width-default: 420px;
    /* ================
    Navigation
    ================ */
    --navigation-gap-inline-default: var(--space-800);
    --navigation-gap-block-default: var(--space-300);
    --navigation-font-size-default: var(--fs-650);
    --navigation-font-weight-default: var(--fw-300);
    --navigation-line-height-item: var(--lh-m);
    --navigation-font-family-default: var(--ff-sans);
    --navigation-color-default: var(--clr-black);
    --navigation-color-default-hover: var(--clr-yellow-500);
    --navigation-color-active: var(--clr-yellow-500);
    --navigation-list-row-gap-default: var(--space-300);
    --navigation-color-default-inverted: var(--clr-white);
    --navigation-color-default-hover-inverted: var(--clr-yellow-500);
    --navigation-color-active-inverted: var(--clr-yellow-500);
    /* ================
    Mobile Navigation
    ================ */
    --navigation-mobile-background-color: var(--clr-grey-800);
    --navigation-mobile-background-active-color: var(--clr-grey-800);
    /* ================
    Button
    ================ */
    --button-background-primary: var(--clr-yellow-500);
    --button-background-secondary: var(--clr-green-300);
    --button-background-reduced: var(--clr-grey-800);
    --button-background-accent: var(--clr-red-500);
    --button-background-primary-hover: var(--clr-white);
    --button-background-secondary-hover: var(--clr-white);
    --button-background-reduced-hover: var(--clr-white);
    --button-background-accent-hover: var(--clr-white);
    --button-color-primary: var(--clr-black);
    --button-color-secondary: var(--clr-black);
    --button-color-reduced: var(--clr-black);
    --button-color-accent: var(--clr-black);
    --button-color-primary-hover: var(--clr-black);
    --button-color-secondary-hover: var(--clr-black);
    --button-color-reduced-hover: var(--clr-black);
    --button-color-accent-hover: var(--clr-black);
    --button-padding-inline: var(--space-500);
    --button-padding-block: var(--space-350);
    --button-padding-inline-sm: var(--space-350);
    --button-padding-block-sm: var(--space-200);
    /* ================
    Link
    ================ */
    --link-color-default: var(--clr-black);
    --link-color-default-hover: var(--clr-yellow-500);
    --link-color-default-inverted: var(--clr-white);
    --link-color-default-hover-inverted: var(--clr-yellow-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-yellow-500);
    --text-color-default-inverted: var(--clr-grey-800);
    --text-color-default-inverted-hover: var(--clr-yellow-500);
    /* ================
    Background
    ================ */
    --background-color-extra-dark: var(--clr-black);
    --background-color-default: var(--clr-white);
    --background-color-light: var(--clr-grey-800);
    --background-color-extra-light: var(--clr-grey-900);
    /* ================
    Form
    ================ */
    --form-field-background-color-default: var(--clr-grey-800);
    --form-field-background-color-default-hover: var(--clr-white);
    --form-field-background-color-default-focus: var(--clr-white);
    --form-field-border-color-focus: var(--focus-color-default);
    --form-mandatory-color: var(--clr-red-500);
    --form-color-error: var(--clr-red-500);
    --form-color-input: var(--clr-black);
    --form-color-label: var(--clr-black);
    --form-font-weight-label: var(--fw-200);
    --form-field-padding-inline: var(--space-400);
    --form-field-padding-block: var(--space-300);
    /* ================
    Table
    ================ */
    --table-header-background-color: var(--clr-grey-800);
    --table-header-color: var(--clr-black);
    --table-row-background-color: var(--clr-white);
    --table-row-odd-background-color: var(--clr-grey-900);
    --table-border-color: var(--clr-grey-600);
    --table-cell-padding-inline-sm: var(--space-200);
    --table-cell-padding-inline-default: var(--space-300);
    --table-cell-padding-block-sm: var(--space-100);
    --table-cell-padding-block-default: var(--space-200);
    /* ================
    Border
    ================ */
    --border-color-default: var(--clr-grey-500);
    --border-color-light: var(--clr-grey-600);
    --border-color-extra-light: var(--clr-white);
    --border-radius-lg: var(--radius-lg);
    --border-radius-default: var(--radius-md);
    --border-width-default: var(--border-width-100);
    /* ================
    Icon
    ================ */
    --icon-size-sm: var(--object-size-sm);
    --icon-size-regular: var(--object-size-regular);
    --icon-size-lg: var(--object-size-lg);
    --icon-size-xl: var(--object-size-xl);
    --icon-padding-inline-regular: var(--space-200);
    --icon-padding-inline-lg: var(--space-300);
    /* ================
    Fonts
    ================ */
    /* Schriftgrößen */
    --font-size-heading-sm: var(--fs-650);
    --font-size-heading-regular: var(--fs-800);
    --font-size-heading-lg-min: var(--fs-hl-lg-min);
    --font-size-heading-lg-max: var(--fs-hl-lg-max);
    --font-size-heading-lg-min-no-unit: var(--fs-hl-lg-min-no-unit);
    --font-size-heading-lg-max-no-unit: var(--fs-hl-lg-max-no-unit);
    --font-size-heading-xl-min: var(--fs-hl-xl-min);
    --font-size-heading-xl-max: var(--fs-hl-xl-max);
    --font-size-heading-xl-min-no-unit: var(--fs-hl-xl-min-no-unit);
    --font-size-heading-xl-max-no-unit: var(--fs-hl-xl-max-no-unit);
    --font-size-heading-xxl-min: var(--fs-hl-xxl-min);
    --font-size-heading-xxl-max: var(--fs-hl-xxl-max);
    --font-size-heading-xxl-min-no-unit: var(--fs-hl-xxl-min-no-unit);
    --font-size-heading-xxl-max-no-unit: var(--fs-hl-xxl-max-no-unit);
    --font-size-heading-xxl-display-min: var(--fs-hl-xxl-display-min);
    --font-size-heading-xxl-display-max: var(--fs-hl-xxl-display-max);
    --font-size-heading-xxl-display-min-no-unit: var(--fs-hl-xxl-display-min-no-unit);
    --font-size-heading-xxl-display-max-no-unit: var(--fs-hl-xxl-display-max-no-unit);
    --font-size-regular-min: var(--fs-regular-min);
    --font-size-regular-min-no-unit: var(--fs-regular-min-no-unit);
    --font-size-regular-max: var(--fs-regular-max);
    --font-size-regular-max-no-unit: var(--fs-regular-max-no-unit);
    /* Schriftgrößen statisch */
    --font-size-xs: var(--fs-400);
    --font-size-sm: var(--fs-500);
    --font-size-regular: var(--fs-650);
    --font-size-md: var(--fs-700);
    --font-size-lg: var(--fs-900);
    /* Schriftgewicht */
    --font-weight-light: var(--fw-200);
    --font-weight-book: var(--fw-300);
    --font-weight-regular: var(--fw-400);
    --font-weight-medium: var(--fw-500);
    --font-weight-semi-bold: var(--fw-600);
    --font-weight-bold: var(--fw-700);
    --font-weight-heavy: var(--fw-900);
    /* Breakpoints für Fluid Typography */
    /* Sass-Variablen werden nicht "automatisch" in Custom Properties substituiert, daher verwenden wir hier die Interpolation #. */
    --fluid-breakpoint-min: 26.25rem;
    --fluid-breakpoint-max: 90rem;
    --fluid-breakpoint-min-no-unit: 26.25;
    --fluid-breakpoint-max-no-unit: 90;
    /* Schriftfamilien */
    --font-family-base: var(--ff-sans);
    --font-family-heading: var(--ff-sans);
    --line-height-body: var(--lh-regular);
    --line-height-heading: var(--lh-sm);
  }
}
/* =========================================================================
   Author: Agentur KOPFNUSS - Marco Schädlich
   Einstellungen: Tokens Project Semantic
   Beschreibung: Definition von tokens für das Projekt.
   Layer: Settings
   Wiederverwendbar: Ja
   Custom Property Definitionen: Ja
   Abhängig von:
   ========================================================================== */
@layer settings {
  :root {
    /* ================
    Brand Colors
    ================ */
    --brand-color-primary: var(--clr-green-300);
    --brand-color-secondary: var(--clr-yellow-500);
    /* ================
    RSCE
    ================ */
    --rsce-headline-subheadline-font-family-subheadline: var(--ff-script);
    --rsce-headline-subheadline-color-subheadline: var(--clr-green-300);
    --rsce-headline-subheadline-color-subheadline-inverted: var(--clr-yellow-500);
    --rsce-button-arrow-left-right-background-primary: var(--clr-yellow-500);
    --rsce-button-arrow-left-right-background-primary-hover: var(--clr-green-300);
    --rsce-button-arrow-left-right-color-primary: var(--clr-green-300);
    --rsce-button-arrow-left-right-color-primary-hover: var(--clr-yellow-500);
    /* ================
    Fonts
    ================ */
    /* Schriftgrößen */
    --font-size-heading-lg: var(--fs-900);
    /* Schriftfamilien */
    --font-family-script: var(--ff-script);
  }
}
/* 10) generic */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Reset / CSS-Basis-Reset
   Beschreibung: Setzt Browser-eigene Standard-Styles gezielt zurück und
     schafft eine konsistente Ausgangsbasis. Kein vollständiger Universal-Reset,
     sondern ein moderner, selektiver Ansatz ohne box-sizing-Override.
   Layer: generic
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --line-height-body
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer generic {
  /* ================
     Box Sizing (deaktiviert)
     Diskussion ob border-box mit modernem Grid/Flexbox noch nötig ist:
     https://www.youtube.com/watch?v=PtAcpV6TAGM
  ================ */
  /** ,
  *::before,
  *::after {
      box-sizing: border-box;
  } */
  /* ================
     html – Text Size Adjust
     Verhindert automatische Schriftgrößenanpassung durch Mobile Browser
     nach Orientierungswechsel (iOS Safari).
     https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
  ================ */
  html {
    text-size-adjust: none;
  }
  /* ================
     Margin-Reset – Block-Level-Elemente
     Browser-UA-Styles für margin werden entfernt; Abstände werden
     bewusst auf Makro-Ebene (Layout, Flow) definiert.
  ================ */
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
    /* margin-block-end: 0; */
  }
  /* ================
     Listen – Accessibility Reset
     list-style nur bei role="list" entfernen, damit Screen Reader
     die Listenstruktur bei semantischen Listen erhalten.
     https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
  ================ */
  [role=list] {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* ================
     Body – Mindesthöhe und Zeilenhöhe
  ================ */
  body {
    min-block-size: 100vh;
    line-height: var(--line-height-body);
  }
  /* ================
     Überschriften und interaktive Elemente – kompakte Zeilenhöhe
     Achtung: bei Schriften mit großen Ober-/Unterlängen ggf. anpassen,
     um Accessibility-Probleme durch überlappende Zeilen zu vermeiden.
  ================ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  label {
    line-height: 1.1;
  }
  /* ================
     Text Wrapping – typografische Optimierung
  ================ */
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
  :where(p, li) {
    text-wrap: pretty;
  }
  /* ================
     Medien-Elemente – responsive Basisstyles
  ================ */
  img,
  picture,
  video,
  canvas,
  svg {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }
  /* ================
     Formular-Elemente – Schriftvererbung
  ================ */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* ================
     Typografie-Korrekturen – Browser-Inkonsistenzen
  ================ */
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  pre {
    font-family: monospace;
    font-size: 1em;
  }
  /* ================
     Button Reset – natives <button>-Element
     all: unset entfernt alle UA-Styles inkl. Typografie und Box-Model;
     nachfolgende Properties stellen benötigte Defaults explizit wieder her
  ================ */
  button {
    all: unset;
    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;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Fonts / Web-Font-Import
   Beschreibung: Bindet die projektspezifische Schriftart „Overpass" in allen
     verfügbaren Schriftgewichten (100–900) sowie die Script-Schrift
     „DancingScript" als lokale @font-face-Deklarationen ein.
     font-display: swap verhindert unsichtbaren Text (FOIT) während des
     Schriftlade-Vorgangs.
   Layer: generic
   Abhängig von: none
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: ../fonts/Overpass-Thin.woff2, ../fonts/Overpass-ExtraLight.woff2,
     ../fonts/Overpass-ExtraLightItalic.woff2, ../fonts/Overpass-Light.woff2,
     ../fonts/Overpass-LightItalic.woff2, ../fonts/Overpass-Regular.woff2,
     ../fonts/Overpass-Italic.woff2, ../fonts/Overpass-SemiBold.woff2,
     ../fonts/Overpass-Bold.woff2, ../fonts/Overpass-ExtraBold.woff2,
     ../fonts/Overpass-Black.woff2, ../fonts/DancingScript-Regular.woff2
   ========================================================================== */
@layer generic {
  /* ================
     @font-face – Overpass (alle Schriftgewichte)
     Pfad ist relativ zur Entry-Datei css/main.scss, nicht zu dieser Partial-Datei –
     Sass schreibt relative url() in Partials nicht um. Ziel: src/fonts/
  ================ */
  /* Thin */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  /* Extra Light */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-ExtraLightItalic.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
  }
  /* Light */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-LightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  /* Regular */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  /* Semi Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  /* Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  /* Extra Bold */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  /* Black */
  @font-face {
    font-family: Overpass;
    src: url("../fonts/Overpass-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  /* Script */
  @font-face {
    font-family: DancingScript;
    src: url("../fonts/DancingScript-Regular.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
}
/* 20) base */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Root Base
   Beschreibung: Basis-Styles für html und body. Aktiviert Smooth Scroll
     nur wenn der Nutzer keine Bewegungsreduzierung bevorzugt; setzt die
     globale Hintergrundfarbe des Dokuments.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --background-color-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer base {
  /* ================
     Smooth Scroll – nur ohne Bewegungsreduzierung
     prefers-reduced-motion: no-preference stellt sicher, dass der Scroll-
     Effekt für Nutzer mit Vestibulär-Störungen oder Bewegungssensitivität
     nicht ausgelöst wird.
  ================ */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  /* ================
     Body – Hintergrundfarbe
  ================ */
  body {
    background-color: var(--background-color-default);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Fokus – globaler Fokus-Ring
   Beschreibung: Einheitlicher Fokus-Indikator für alle bedienbaren Elemente.
     Ersetzt die uneinheitlichen Einzellösungen der Komponenten durch eine
     zentrale Regel: gleicher Ring an Links, Buttons, Formularfeldern,
     summary-Elementen und allen Elementen mit tabindex.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --focus-color-default, --focus-outline-width,
     --focus-outline-offset
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
     (der Selektor referenziert .button aus _b-buttons.scss, definiert hier
     aber keinen eigenen Block)
   RSCE-Templates: none
   Assets: none

   Hinweis – wer diese Regel beeinflusst:
     _l-background-inverted.scss:70 überschreibt --focus-color-default für
     .background-color--dark mit --focus-color-default-inverted, weil der
     dunkelblaue Ring auf dunklen Flächen zu wenig Kontrast hätte. Die Regel
     hier bleibt unverändert und erbt die Farbe über den Kontext.
   ========================================================================== */
@layer base {
  /* ================
     Globaler Fokus-Ring
     :focus-visible statt :focus – der Ring erscheint bei Tastaturbedienung,
     nicht nach einem Mausklick.

     :where() hält die Elementliste bei Spezifität 0; das angehängte
     :focus-visible steht außerhalb und bringt die Regel auf (0,1,0).
     Ob ein outline: none einer Komponente den Ring aushebelt, hängt
     deshalb an deren Spezifität:

     - _b-buttons.scss:231 → :where(button, .button) { outline: none }
       ist (0,0,0) und unterliegt. Der Ring bleibt erhalten; entfernt wird
       nur die UA-Outline bei Maus- und Touch-Fokus.
     - _e-contao-form.scss:182/200 → input.text, textarea, select
       sind (0,1,1) und gewinnen. Diese Datei stellt den Ring deshalb in
       einem eigenen :focus-visible-Block (Zeile 263) wieder her.

     Faustregel für neue Komponenten: ein Reset über :where() ist
     unbedenklich, jeder Reset mit Klasse oder Typ im Selektor muss den
     Ring selbst nachziehen.

     Farbe allein genügt als Indikator nicht (WCAG 2.4.11 Focus Appearance),
     deshalb eine durchgehende Outline mit Abstand zum Element.
  ================ */
  :where(a, button, .button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color-default);
    outline-offset: var(--focus-outline-offset);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Typography Base
   Beschreibung: Globale Typografie-Styles. h1–h3 und der Fließtext nutzen
     Fluid Typography via clamp() mit berechneten slope/intercept-Werten;
     h4–h5 haben feste Größen. Enthält außerdem die Display-Variante der h1,
     die Ausrichtungs-Modifier für Headlines, Inline-Elemente, Links und die
     Responsiv-Anpassung (Headlines linksbündig auf Mobile).
   Layer: base
   Abhängig von: s-tokens-semantic.scss (Schrift-, Farb- und Fluid-Tokens
     sowie die Sass-Variable $breakpoint-mobile)
   Verwendete Tokens: --font-family-base, --font-family-heading,
     --line-height-body, --line-height-heading,
     --font-size-regular, --font-size-regular-min, --font-size-regular-max,
     --font-size-regular-min-no-unit, --font-size-regular-max-no-unit,
     --font-size-heading-xxl-min, --font-size-heading-xxl-max,
     --font-size-heading-xxl-min-no-unit, --font-size-heading-xxl-max-no-unit,
     --font-size-heading-xxl-display-min, --font-size-heading-xxl-display-max,
     --font-size-heading-xxl-display-min-no-unit,
     --font-size-heading-xxl-display-max-no-unit,
     --font-size-heading-xl-min, --font-size-heading-xl-max,
     --font-size-heading-xl-min-no-unit, --font-size-heading-xl-max-no-unit,
     --font-size-heading-lg-min, --font-size-heading-lg-max,
     --font-size-heading-lg-min-no-unit, --font-size-heading-lg-max-no-unit,
     --font-size-heading-regular, --font-size-heading-sm,
     --font-weight-heavy, --font-weight-bold, --font-weight-semi-bold,
     --font-weight-medium, --font-weight-light,
     --text-color-default, --text-color-default-hover,
     --flow-spacing-block-sm,
     --fluid-breakpoint-min, --fluid-breakpoint-min-no-unit,
     --fluid-breakpoint-max-no-unit
     Zusätzlich werden die sechs hier definierten Rechen-Variablen wieder
     ausgelesen: --min-font-size, --max-font-size, --min-font-size-no-unit,
     --max-font-size-no-unit, --slope, --intercept
   Projekt-Tokens: none
   Definierte Tokens: --min-font-size, --max-font-size,
     --min-font-size-no-unit, --max-font-size-no-unit,
     --slope, --intercept
     Diese Datei ist die Ursprungsdefinition (Layer base). _c-footer.scss
     (Zeilen 116–128) setzt dieselben sechs Variablen erneut, um die
     Fluid-Rechnung für die Footer-Headline mit eigenen Grenzwerten zu
     wiederholen – kein Override im Sinne einer Wertkorrektur, sondern eine
     zweite Instanz desselben Rechenwegs.
   Überschriebene Tokens: none
   BEM-Blöcke: .headline--left, .headline--center
     (Modifier ohne eigenen .headline-Block – sie werden direkt auf die
     Headline bzw. deren Contao-Wrapper gesetzt. Kontext-Selektoren:
     h1.display sowie das Contao-Element .content-text.)
   RSCE-Templates: none
   Assets: none

   Hinweis – wer diese Datei beeinflusst:
     _l-background-inverted.scss:61 überschreibt --text-color-default für
     .background-color--dark. Deshalb setzen die Fließtext- und
     Headline-Regeln color explizit (siehe Abschnitt "Fließtext").
     _e-contao-typography.scss richtet .content-text im Layer extensions aus
     und schlägt damit die Modifier dieser Datei (Layer base).
   ========================================================================== */
/*
 * Fluid Typography – Berechnung des bevorzugten Werts in clamp():
 *
 * slope     = (maxFontSize - minFontSize) / (maxWidth - minWidth)
 * intercept = minFontSize - slope * minWidth
 * clamp(minFontSize, intercept + slope * 100vw, maxFontSize)
 *
 * slope und intercept werden als CSS Custom Properties berechnet, weil
 * CSS-Berechnungen zur Laufzeit erfolgen und keine Sass-Variablen erlaubt sind.
 *
 * Die *-no-unit-Tokens tragen denselben Wert wie ihre Geschwister, nur ohne
 * Einheit. calc() kann rem nicht durch rem teilen – die Steigung muss deshalb
 * aus reinen Zahlen gebildet werden, während intercept die Einheit über
 * --min-font-size und --fluid-breakpoint-min wieder hereinholt.
 *
 * Der Rechenblock (--slope/--intercept) ist in jedem Selektor mit Fluid
 * Typography identisch; ausgetauscht werden nur die vier Parameter darüber.
 */
@layer base {
  /* ================
     html – Schriftfamilie und Zeilenhöhe
  ================ */
  html {
    font-family: var(--font-family-base);
    line-height: var(--line-height-body);
  }
  /* ================
     body – Schriftgröße, Gewicht und Textfarbe
  ================ */
  body {
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-light);
    color: var(--text-color-default);
  }
  /* ================
     Headlines h1–h5 – gemeinsame Basis-Styles
     text-wrap: balance und hyphens: auto sind auskommentiert –
     als Optionen bei Bedarf aktivierbar.
  ================ */
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--font-family-heading);
    line-height: var(--line-height-heading);
    color: var(--text-color-default);
  }
  /* ================
     h1 – Fluid Typography (xxl), zentriert
     margin-inline: auto zentriert die Box selbst, text-align den Satz darin –
     beides wird von .headline--left bzw. auf Mobile wieder zurückgesetzt.
  ================ */
  h1 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-xxl-min);
    --max-font-size: var(--font-size-heading-xxl-max);
    --min-font-size-no-unit: var(--font-size-heading-xxl-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-xxl-max-no-unit);
    /* Rechenblock – in allen Fluid-Selektoren identisch,
       Herleitung siehe Kopfkommentar */
    --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)
    );
    /* Fluid Typography: clamp(min, intercept + slope * 100vw, max) –
       clamp() begrenzt selbst nach unten und oben, ein separater
       Fallback-Wert ist deshalb nicht nötig. */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-heavy);
    margin-block-end: var(--flow-spacing-block-sm);
    text-align: center;
    margin-inline: auto;
  }
  /* ================
     h1.display – Display-Variante
     Größere Schrift (xxl-display) für Hero-/Titelzeilen. Setzt die
     Zentrierung der h1 bewusst zurück (text-align: left, margin-inline: 0),
     weil Display-Zeilen im Layout linksbündig am Raster hängen.
  ================ */
  h1.display {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-xxl-display-min);
    --max-font-size: var(--font-size-heading-xxl-display-max);
    --min-font-size-no-unit: var(--font-size-heading-xxl-display-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-xxl-display-max-no-unit);
    /* Rechenblock – in allen Fluid-Selektoren identisch,
       Herleitung siehe Kopfkommentar */
    --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)
    );
    /* Fluid Typography: clamp(min, intercept + slope * 100vw, max) –
       clamp() begrenzt selbst nach unten und oben, ein separater
       Fallback-Wert ist deshalb nicht nötig. */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-heavy);
    margin-block-end: var(--flow-spacing-block-sm);
    text-align: left;
    margin-inline: 0;
  }
  /* ================
     h2 – Fluid Typography (xl), standardmäßig zentriert
     h2 ist im Design grundsätzlich zentriert (Abschnittsüberschriften);
     .headline--left überschreibt bei Bedarf.
  ================ */
  h2 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-xl-min);
    --max-font-size: var(--font-size-heading-xl-max);
    --min-font-size-no-unit: var(--font-size-heading-xl-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-xl-max-no-unit);
    /* Rechenblock – in allen Fluid-Selektoren identisch,
       Herleitung siehe Kopfkommentar */
    --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)
    );
    /* Fluid Typography: clamp(min, intercept + slope * 100vw, max) –
       clamp() begrenzt selbst nach unten und oben, ein separater
       Fallback-Wert ist deshalb nicht nötig. */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-heavy);
    text-align: center;
    margin-inline: auto;
  }
  /* ================
     h3 – Fluid Typography (lg)
  ================ */
  h3 {
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-heading-lg-min);
    --max-font-size: var(--font-size-heading-lg-max);
    --min-font-size-no-unit: var(--font-size-heading-lg-min-no-unit);
    --max-font-size-no-unit: var(--font-size-heading-lg-max-no-unit);
    /* Rechenblock – in allen Fluid-Selektoren identisch,
       Herleitung siehe Kopfkommentar */
    --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)
    );
    /* Fluid Typography: clamp(min, intercept + slope * 100vw, max) –
       clamp() begrenzt selbst nach unten und oben, ein separater
       Fallback-Wert ist deshalb nicht nötig. */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-bold);
  }
  /* ================
     h4–h5 – Feste Schriftgrößen (kein Fluid Typography)
  ================ */
  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-Ausrichtungs-Modifier
     Werden im Backend über das Feld cssID vergeben und überschreiben die
     Vorgabe der jeweiligen Ebene (h1/h2 zentriert, h3–h5 linksbündig).
  ================ */
  .headline--left {
    text-align: left;
  }
  .headline--center {
    text-align: center;
    margin-inline: auto;
  }
  .headline--center.content-text > :is(h2, h3, h4, h5, h6) {
    text-align: center;
    margin-inline: auto;
  }
  /* ================
     Fließtext – p, th, td, caption mit Fluid Typography
     --text-color-default wird explizit gesetzt, damit die Klasse
     .background-color--dark die Farbe per Custom Property überschreiben kann
     (_l-background-inverted.scss:61 setzt den Token auf die invertierte
     Variante um) – ohne diese Deklaration würde der Fließtext die Farbe
     vom body erben und den Kontextwechsel nicht mitbekommen.
  ================ */
  th,
  td,
  caption,
  p {
    color: var(--text-color-default);
    /* Parameter für Fluid Typography */
    --min-font-size: var(--font-size-regular-min);
    --max-font-size: var(--font-size-regular-max);
    --min-font-size-no-unit: var(--font-size-regular-min-no-unit);
    --max-font-size-no-unit: var(--font-size-regular-max-no-unit);
    /* Rechenblock – in allen Fluid-Selektoren identisch,
       Herleitung siehe Kopfkommentar */
    --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)
    );
    /* Fluid Typography: clamp(min, intercept + slope * 100vw, max) –
       clamp() begrenzt selbst nach unten und oben, ein separater
       Fallback-Wert ist deshalb nicht nötig. */
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    hyphens: auto; /* Silbentrennung aktivieren, um Überlaufen auf kleinen Viewports zu verhindern */
  }
  /* ================
     Inline-Elemente
  ================ */
  strong,
  b {
    font-weight: var(--font-weight-medium);
  }
  a {
    color: var(--text-color-default);
    transition: color 0.3s ease;
  }
  /* ================
     Responsive – Mobile
     Alle Headlines linksbündig, da Zentrierung auf kleinen Viewports
     mit kurzem Zeilenfall unruhig wirkt.
  ================ */
  @media (width < 26.25rem) {
    h1,
    h2,
    h3,
    h4,
    h5 {
      text-align: left;
    }
    .headline--center {
      text-align: left;
      margin-inline: 0;
    }
    .headline--center.content-text > :is(h2, h3, h4, h5, h6) {
      text-align: left;
      margin-inline: 0;
    }
  }
  /* ================
     Link-States – Hover
  ================ */
  a:hover {
    color: var(--text-color-default-hover);
  }
  @media (prefers-reduced-motion: reduce) {
    a {
      transition: none !important;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Button Base
   Beschreibung: Definiert die wiederverwendbare .button-Klasse mit ihrem
     Varianten-System über CSS Custom Properties: Jeder Modifier setzt nur
     die vier Steuer-Variablen, die generischen Regeln lesen sie aus.
     Enthält außerdem Zentrierung, Disabled- und Fokus-Styles sowie die
     Sonderbehandlung für das Contao Download-Element.
   Layer: base
   Abhängig von: s-tokens-semantic.scss (Farb-, Abstands- und Radius-Tokens
     sowie die Sass-Variable $breakpoint-mobile), _b-focus.scss (liefert den
     Fokus-Ring, den das outline: none am Ende dieser Datei bewusst nur für
     den Nicht-Tastatur-Fall entfernt – siehe Abschnitt "Fokus-Styles")
   Verwendete Tokens: --button-background-primary, --button-color-primary,
     --button-background-primary-hover, --button-color-primary-hover,
     --button-background-secondary, --button-color-secondary,
     --button-background-secondary-hover, --button-color-secondary-hover,
     --button-background-accent, --button-color-accent,
     --button-background-accent-hover, --button-color-accent-hover,
     --button-background-reduced, --button-color-reduced,
     --button-background-reduced-hover, --button-color-reduced-hover,
     --button-padding-inline, --button-padding-block,
     --border-radius-lg, --navigation-color-default,
     --navigation-color-default-hover
     Zusätzlich werden die vier hier definierten Steuer-Variablen wieder
     ausgelesen: --button-background, --button-color,
     --button-background-hover, --button-color-hover
   Projekt-Tokens: none
   Definierte Tokens: --button-background, --button-color,
     --button-background-hover, --button-color-hover
     Diese Datei ist die Ursprungsdefinition (Layer base). Überschrieben
     werden alle vier in _c-rsce-button-arrow-left-right.scss (Zeilen 102–111),
     dort jeweils mit Inline-Kommentar und Rückverweis hierher.
   Überschriebene Tokens: none
   BEM-Blöcke: .button
     (Zustandsklasse .is-disabled und der Contao-Wrapper .content-download
     nur als Kontext-Selektoren)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a class="button button--primary" href="#">Label</a>
 * <a class="button button--secondary button--center" href="#">Label</a>
 * <button class="button button--accent">Label</button>
 * <button class="button button--primary is-disabled" disabled>Label</button>
 *
 * Contao Download-Element (Zentrierung sitzt am Wrapper, nicht am Link):
 * <div class="content-download button--center">
 *   <a class="button text-icon button--only-text-icon" href="#">Datei.pdf</a>
 * </div>
 *
 * Modifier:
 * .button--primary       → Primäre Variante (Standard)
 * .button--secondary     → Sekundäre Variante
 * .button--accent        → Akzent-Variante
 * .button--reduced       → Reduzierte/gedämpfte Variante
 * .button--only-text-icon → Transparenter Hintergrund, Navigationsfarbe
 * .button--center        → Horizontale Zentrierung via margin-inline: auto
 *
 * Varianten-Prinzip: Die vier Steuer-Variablen --button-background,
 * --button-color, --button-background-hover und --button-color-hover werden
 * hier definiert und ausschließlich von den Modifiern befüllt. Spätere Layer
 * greifen dieselben Variablen ab und müssen keine Properties neu deklarieren –
 * _c-rsce-button-arrow-left-right.scss überschreibt alle vier für den
 * Pfeil-Button. (_c-rsce-button--vars.scss liest dagegen nur die semantischen
 * Varianten-Tokens aus, um daraus --icon-bg-fill abzuleiten.)
 *
 * Wer den Modifier weglässt: Die Templates vergeben immer eine Variante –
 * rsce_button.html.twig fällt auf button--primary zurück, download.html.twig
 * und form_submit.html.twig setzen button--only-text-icon. Ein von Hand
 * geschriebenes <a class="button"> ohne Modifier bekäme zwar die
 * Primary-Farben (Default weiter unten), verlöre aber beim Hover seinen
 * Hintergrund – siehe Kommentar am generischen Hover-Block.
 */
@layer base {
  /* ================
     .button – Basis-Klasse für gestylte Buttons und Links
     Varianten steuern --button-background und --button-color lokal;
     der generische :hover-Block liest die Hover-Variablen aus,
     die jeder Modifier in seinem eigenen :hover-Scope setzt
  ================ */
  .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;
    /* ================
       Varianten – Farb-Tokens per Modifier überschreiben
       Die Hover-Variablen werden bewusst erst im jeweiligen :hover-Scope
       gesetzt, damit außerhalb von :hover kein Wert existiert und der
       generische Hover-Block nichts Falsches erbt.
    ================ */
  }
  .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 {
    /* ================
       Hover – generischer Block liest Hover-Variablen der aktiven Variante
       Ein .button ganz ohne Varianten-Modifier hat hier keine Werte: Beide
       Deklarationen werden dann "invalid at computed-value time" und fallen
       auf ihren Initialwert zurück – der Hintergrund wird transparent, die
       Textfarbe erbt vom Elternelement. In der Praxis tritt das nicht auf,
       weil alle Templates eine Variante mitgeben (siehe Kopf der Datei).
    ================ */
  }
  .button:hover {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
  }
  .button {
    /* ================
       Zentrierung
    ================ */
  }
  .button.button--center {
    margin-inline: auto;
  }
  /* ================
     Disabled State
  ================ */
  button.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  /* ================
     Responsive – Mobile
  ================ */
  @media (width < 26.25rem) {
    .button.button--center {
      margin-inline: 0;
    }
  }
  /* ================
     content-download – Button-Zentrierung im Contao Download-Element
     Contao rendert den Download-Link in einen .content-download-Wrapper;
     .button--center wird im Backend am Wrapper vergeben, nicht am Link.
     Deshalb muss die Zentrierung von dort an den inneren .button
     durchgereicht werden.
  ================ */
  .content-download.button--center .button {
    margin-inline: auto;
  }
  @media (width < 26.25rem) {
    .content-download.button--center .button {
      margin-inline: 0;
    }
  }
  /* ================
     Fokus-Styles – Accessibility
     outline: none auf beide Selektoren, damit die uneinheitlichen
     UA-Outlines der Browser verschwinden. Der Fokus-Ring geht dadurch
     nicht verloren: _b-focus.scss setzt ihn über
     :where(a, button, .button, …):focus-visible, und dessen Spezifität
     (0,1,0 durch die Pseudoklasse) schlägt die (0,0,0) dieser Regel.
     Entfernt wird der Ring damit nur dort, wo :focus-visible nicht greift –
     also bei Maus- und Touch-Fokus.
  ================ */
  :where(button, .button) {
    outline: none;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Image Base
   Beschreibung: Globaler Border-Radius für alle img-Elemente. Einzelne
     Komponenten können den Radius lokal überschreiben (z.B. .card__image).
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --border-radius-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer base {
  img {
    border-radius: var(--border-radius-default);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Video Base
   Beschreibung: Globaler Border-Radius für alle video-Elemente, analog
     zu img-Elementen in _b-images.scss.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --border-radius-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer base {
  video {
    border-radius: var(--border-radius-default);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: SVG Icon Base
   Beschreibung: Basis-Styles für SVG-Icons mit Größen-Modifiern über CSS
     Custom Properties. Icons sind immer quadratisch; beide Dimensionen
     werden über --svg-icon-width gesteuert.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --icon-size-regular, --icon-size-sm,
     --icon-size-lg, --icon-size-xl
   Projekt-Tokens: none
   Definierte Tokens: --svg-icon-width, --svg-icon-height
   Überschriebene Tokens: none
   BEM-Blöcke: .svg-icon
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <span class="svg-icon svg-icon--size-sm" aria-hidden="true">
 *   <svg viewBox="0 0 24 24">...</svg>
 * </span>
 *
 * Modifier:
 * .svg-icon--size-sm   → Kleine Größe (z.B. in Links/Buttons)
 * .svg-icon--size-lg   → Große Größe
 * .svg-icon--size-xl   → Extra-große Größe
 * .svg-icon--size-font → Skaliert mit der aktuellen Schriftgröße (1em)
 */
@layer base {
  /* ================
     SVG Icon – Basis
     block-size verwendet --svg-icon-width (nicht --svg-icon-height), da Icons
     immer quadratisch sind und nur eine Dimension gepflegt werden muss.
  ================ */
  .svg-icon {
    --svg-icon-width: var(--icon-size-regular);
    --svg-icon-height: var(--icon-size-regular);
    display: inline-flex;
    inline-size: var(--svg-icon-width);
    block-size: var(--svg-icon-width);
  }
  /* ================
     Größen-Modifier
  ================ */
  .svg-icon--size-sm {
    --svg-icon-width: var(--icon-size-sm);
    --svg-icon-height: var(--icon-size-sm);
  }
  .svg-icon--size-lg {
    --svg-icon-width: var(--icon-size-lg);
    --svg-icon-height: var(--icon-size-lg);
  }
  .svg-icon--size-xl {
    --svg-icon-width: var(--icon-size-xl);
    --svg-icon-height: var(--icon-size-xl);
  }
  .svg-icon--size-font {
    --svg-icon-width: 1em;
    --svg-icon-height: 1em;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Card Base
   Beschreibung: Basis-Styles für Karten-Layouts. Steuert Padding und
     vertikalen Flow-Abstand je nachdem, ob eine .card__image vorhanden ist.
     Modifier für Hintergrundfarbe und Rahmen.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-spacing-block-default, --flow-spacing-block,
     --card-padding-block, --card-padding-inline, --elements-gap-inline,
     --elements-gap-block, --border-radius-default, --background-color-light,
     --border-width-default, --border-color-default
   Projekt-Tokens: none
   Definierte Tokens: --flow-spacing-block
   Überschriebene Tokens: none
   BEM-Blöcke: .card
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <!-- Karte ohne Bild -->
 * <div class="card card--background">
 *   <h3>Überschrift</h3>
 *   <div class="content-text block">Textinhalt</div>
 * </div>
 *
 * <!-- Karte mit Bild (card__image muss erstes Kind sein) -->
 * <div class="card card--border">
 *   <div class="card__image"><img src="..." alt=""></div>
 *   <h3>Überschrift</h3>
 *   <div class="content-text block">Textinhalt</div>
 * </div>
 *
 * Modifier:
 * .card--background  → Hintergrundfarbe + Border-Radius + Padding
 * .card--border      → Rahmen + Border-Radius + Padding
 */
@layer base {
  /* ================
     Card – Basis-Grid
  ================ */
  .card {
    --flow-spacing-block: var(--flow-spacing-block-default);
    display: grid;
  }
  /* ================
     Card ohne .card__image – Padding und Flow-Abstände
     :has(> :not(svg) ~ :not(svg)) prüft ob mindestens 2 Nicht-SVG-Kinder
     vorhanden sind (tritt bei Subgrid-Verwendung auf); SVGs werden
     ausgeschlossen, da sie keine eigenständigen Inhaltsblöcke darstellen.
     :not(:has(> .card__image)) schließt Karten mit Bild aus (eigene Regel unten).
  ================ */
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > * {
    padding-inline: 0;
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > *:last-child {
    padding-block-end: var(--card-padding-block);
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > *:first-child {
    padding-block-start: var(--card-padding-block);
  }
  .card:has(> :not(svg) ~ :not(svg)):not(:has(> .card__image)) > :nth-child(n+2) {
    margin-block-start: var(--flow-spacing-block);
  }
  /* ================
     Card mit .card__image – Bild bündig, Text mit Padding
     Das Bild (erstes Kind) erhält kein padding-block-start, damit es
     nahtlos an den Kartenrand anschließt. Padding beginnt erst ab dem
     zweiten Kind. Flow-Abstand startet erst ab dem dritten Kind, damit
     Bild → Überschrift keinen zusätzlichen Abstand erhält.
  ================ */
  .card:has(.card__image) > *:not(:first-child) {
    padding-inline: var(--card-padding-inline);
  }
  .card:has(.card__image) > *:first-child {
    padding-block-start: 0;
  }
  .card:has(.card__image) > *:last-child {
    padding-block-end: var(--card-padding-block);
  }
  .card:has(.card__image) > *:nth-child(2) {
    padding-block-start: var(--card-padding-block);
  }
  .card:has(.card__image) > :nth-child(n+2) {
    margin-block-start: 0;
  }
  .card:has(.card__image) > :nth-child(n+3) {
    margin-block-start: var(--flow-spacing-block);
  }
  /* ================
     Modifier – Hintergrundfarbe und Rahmen
  ================ */
  .card--background,
  .card--border {
    border-radius: var(--border-radius-default);
    padding-inline: var(--card-padding-inline);
    padding-block: var(--card-padding-block);
  }
  .card--background {
    background-color: var(--background-color-light);
  }
  .card--border {
    border: var(--border-width-default) solid var(--border-color-default);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: List Base
   Beschreibung: Basis-Styles für Listenelemente. Setzt die Marker-Farbe auf
     die primäre Brandfarbe und stellt die .link-list-Klasse für
     Touch-optimierte Linklisten bereit.
   Layer: base
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --text-color-default, --brand-color-primary,
     --navigation-list-row-gap-default
   Projekt-Tokens:
     --brand-color-primary -> _s-tokens-project.scss
   Definierte Tokens: --link-list-row-padding-block, --link-list-row-padding-inline,
     --link-list-row-min-block-size, --link-list-row-gap
   Überschriebene Tokens: none
   BEM-Blöcke: .link-list
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer base {
  /* ================
     Listenelemente – Textfarbe und Marker-Farbe
  ================ */
  li {
    color: var(--text-color-default);
  }
  li::marker {
    color: var(--brand-color-primary);
  }
  /* ================
     Link List – Touch-optimierte Linkliste
     Jede Zeile erfüllt den WCAG-Mindest-Tap-Target von 44px (2.75rem)
     über min-block-size. Horizontales Padding ist 0, da Link-Icons
     eigene Abstände mitbringen.
  ================ */
  .link-list {
    --link-list-row-padding-block: var(--navigation-list-row-gap-default);
    --link-list-row-padding-inline: 0;
    --link-list-row-min-block-size: 2.75rem;
    --link-list-row-gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* ================
     Link List Row – Zeilen-Spacing (gilt für a- und span-Elemente)
  ================ */
  .link-list__row {
    padding-block: var(--link-list-row-padding-block);
    padding-inline: var(--link-list-row-padding-inline);
    min-block-size: var(--link-list-row-min-block-size);
  }
}
/* 30) layout */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Layout / Wrapper und Section-Abstände
   Beschreibung: Zentrierender Wrapper mit konfigurierbarer max-width über CSS Custom
     Properties. Modifier steuern die Breite per Token-Zuweisung. Außerdem:
     Section-Padding und Flow-Abstände zwischen Content-Elementen innerhalb von Sections.
   Layer: layout
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --section-width-default, --section-width-full, --section-width-sm,
     --section-width-xs, --wrapper-padding-inline, --section-padding-block,
     --elements-gap-block, --flow-spacing-block-default
   Projekt-Tokens: none
   Definierte Tokens: --wrapper-max-width, --wrapper-padding
   Überschriebene Tokens: none
   BEM-Blöcke: .wrapper, .element--center
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <section>
 *   <div class="wrapper wrapper--width-standard">
 *     <div class="content-block">
 *       <h2>Überschrift</h2>
 *       <div class="content-text">...</div>
 *     </div>
 *   </div>
 * </section>
 *
 * Modifier:
 * .wrapper--width-full      → Volle Breite (--section-width-full)
 * .wrapper--width-standard  → Standard-Breite (--section-width-default)
 * .wrapper--width-medium    → Mittlere Breite (--section-width-sm)
 * .wrapper--width-narrow    → Schmale Breite (--section-width-xs)
 */
@layer layout {
  /* ================
     Wrapper – zentrierender Container mit konfigurierbarer Breite
     max-width statt width: ermöglicht Vollbreite auf kleinen Viewports.
     padding-inline vergrößert die Box, weshalb max-width nicht der tatsächlichen
     Inhaltsbreite entspricht – bei Bedarf: calc(var(--wrapper-max-width) + 2 * padding).
     Breiten-Modifier überschreiben nur --wrapper-max-width, alles andere bleibt.
  ================ */
  .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);
    margin-inline: auto;
    padding-inline: var(--wrapper-padding);
    /* ================
       Breiten-Modifier
    ================ */
  }
  .wrapper.wrapper--width-full {
    --wrapper-max-width: var(--section-width-full);
  }
  .wrapper.wrapper--width-standard {
    --wrapper-max-width: var(--section-width-default);
  }
  .wrapper.wrapper--width-medium {
    --wrapper-max-width: var(--section-width-sm);
  }
  .wrapper.wrapper--width-narrow {
    --wrapper-max-width: var(--section-width-xs);
  }
  /* ================
     Section – Content-Block-Abstände
     Abstände zwischen Content-Elementen innerhalb von Sections über .content-block.
     Ausgenommen: .hero, .site-footer__inner, .site-footer__bottom – dort gelten
     eigene Abstands-Regeln.
  ================ */
  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) .content-block > .content-headline:not(h1) + * {
    margin-block-start: var(--flow-spacing-block-default);
  }
  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) {
    /* Generellere Lösung via .content-element (noch nicht aktiv):
    .content-block > .content-element + .content-element {
        margin-block-start: var(--flow-spacing-block-default);
    } */
  }
  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 – vertikales Padding
     Verschachtelte Sections erhalten kein Padding, damit keine
     doppelten Abstände entstehen.
  ================ */
  section {
    padding-block: var(--section-padding-block);
  }
  section section {
    padding-block: 0;
  }
  /* ================
     Element Center – horizontale Zentrierung
  ================ */
  .element--center {
    margin-inline: auto;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Flow / Vertikale Abstände
   Beschreibung: Utility-Klassen für konsistente vertikale Abstände zwischen Elementen.
     .flow nutzt den Lobotomized-Owl-Selektor (> * + *), damit nur Nicht-Erst-Kinder
     einen Abstand erhalten. .grid-flow ist die Grid-Variante mit gap statt margin.
   Layer: layout
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-spacing-block-default, --flow-grid-spacing-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .flow, .grid-flow
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer layout {
  /* ================
     Flow – vertikaler Abstand zwischen Geschwisterelementen
     Lobotomized Owl (> * + *): trifft nur Elemente mit einem vorangehenden
     Geschwister – das erste Kind erhält keinen Abstand.
     Alternative .flow > :not(:first-child) hätte höhere Spezifität.
     em statt rem: Abstand skaliert relativ zur Schriftgröße des Elements,
     nicht zur Root-Schriftgröße – der Abstand bei Überschriften ist damit
     proportional zur jeweiligen Schriftgröße.
     margin-block-start statt margin-block-end: Abstand wird oberhalb des
     Folgeelements gesetzt, nicht unterhalb des Vorgängers – z.B. mehr Raum
     über einem Absatz nach einer Überschrift.
  ================ */
  .flow > * + * {
    margin-block-start: var(--flow-spacing-block-default);
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* ================
     Grid Flow – Grid-Variante mit gap statt margin
     Alle Elemente in einem Grid mit gleichmäßigem Abstand – nützlich wenn
     Items ausgerichtet werden sollen und dennoch konsistente Abstände
     zwischen ihnen benötigt werden.
  ================ */
  .grid-flow {
    display: grid;
    gap: var(--flow-grid-spacing-block);
    align-content: start;
    justify-items: start;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Equal Columns Grid / Gleichmäßiges Spalten-Grid
   Beschreibung: Grid-Layout mit gleich breiten Spalten, konfigurierbaren Gaps und
     Ausrichtung. Unterstützt 2-, 3- und 4-spaltige Layouts mit optionaler Zentrierung
     unvollständiger letzter Zeilen sowie Varianten mit ungleich gewichteten Spalten.
     Mobile-first: auf kleinen Viewports einspaltig. Die Spaltenanzahl steuern
     Container Queries auf .content-collection, nicht der Viewport.
   Layer: layout
   Abhängig von: s-tokens-semantic.scss (Tokens und die Sass-Variablen
     $breakpoint-container-grid-1 / $breakpoint-container-grid-2)
   Verwendete Tokens: --equal-columns-gap-default, --equal-columns-gap-lg,
     --flow-grid-spacing-block, --flow-spacing-block-default,
     --grid-auto-fit-column-size-min
   Projekt-Tokens: none
   Definierte Tokens: --equal-columns-gap-columns, --equal-columns-gap-rows,
     --column-layout-alignment
   Überschriebene Tokens: none
   BEM-Blöcke: .equal-columns, .content-collection
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <div class="content-collection">
 *   <div class="equal-columns equal-columns--columns-3">
 *     <div>...</div>
 *     <div>...</div>
 *     <div>...</div>
 *   </div>
 * </div>
 *
 * .content-collection ist zwingend: Es stellt den Container-Kontext
 * "article-wrapper" bereit, auf den alle Container Queries dieser Datei
 * reagieren. Ohne diesen Wrapper bleibt das Grid einspaltig.
 *
 * Modifier:
 * .equal-columns--columns-2          → Fixiert auf 2 Spalten
 * .equal-columns--columns-3          → Fixiert auf 3 Spalten
 * .equal-columns--columns-4          → Fixiert auf 4 Spalten
 * .equal-columns--columns-center     → Zentriert unvollständige letzte Zeile
 * .equal-columns--gap-lg             → Größerer Spalten- und Zeilenabstand
 * .equal-columns--alignment-center   → Vertikale Ausrichtung: Mitte
 * .equal-columns--alignment-bottom   → Vertikale Ausrichtung: unten
 * .equal-columns--alignment-stretch  → Vertikale Ausrichtung: gestreckt
 * .equal-columns--only-content       → Zeilenabstand = Flow-Spacing (statt Grid-Gap)
 * .equal-columns--two-columns-left-wide  → 2-Spalter: links breiter (3fr 2fr)
 * .equal-columns--two-columns-right-wide → 2-Spalter: rechts breiter (2fr 3fr)
 * .equal-columns--three-columns-middle-wide → 3-Spalter: Mitte doppelt so breit
 *     (1fr 2fr 1fr), erst ab breakpoint-container-grid-2; darunter zwei gleich
 *     breite Spalten. Nicht mit --columns-center kombinierbar.
 *     Sichtbarkeit und horizontale Ausrichtung der Items ergänzt
 *     _p-grid.scss (Layer projects).
 *
 * Spaltenanzahl je Container-Breite:
 * < grid-1          → 1 Spalte (alle Varianten)
 * grid-1 … grid-2   → 2 Spalten (auch bei --columns-3 und --columns-4)
 * > grid-2          → 3 bzw. 4 Spalten gemäß Modifier
 *
 * Technik --columns-center (durchgängig in allen Stufen):
 * Das Raster wird verdoppelt (n Spalten → 2n Spalten), jedes Item belegt
 * span 2. Nur so lässt sich ein Rest-Item um eine halbe Spalte versetzt
 * platzieren; mit ganzen Spalten wäre keine echte Zentrierung möglich.
 */
@layer layout {
  /* ================
     Equal Columns – Basis
     Container Query auf .content-collection (article-wrapper) steuert
     die Spaltenanzahl; gleichmäßige Spaltenbreite via auto-fit + minmax.
  ================ */
  .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);
  }
  .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-columns: var(--equal-columns-gap-lg);
    --equal-columns-gap-rows: var(--equal-columns-gap-lg);
  }
  .equal-columns {
    /* ================
       Alignment-Modifier – vertikale Ausrichtung der Spalten
    ================ */
  }
  .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 {
    --equal-columns-gap-rows: var(--flow-spacing-block-default);
  }
  .equal-columns h2,
  .equal-columns h3,
  .equal-columns h4,
  .equal-columns h5 {
    text-align: left;
  }
  .equal-columns.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) > * {
    justify-self: center;
  }
  /* ================
     Equal Columns – Auto-fit (mobile first)
     Unterhalb des Container-Breakpoints: einspaltig (normaler Flow).
     Ab breakpoint-container-grid-1: Grid mit automatischer Spaltenanzahl
     via auto-fit und minmax – alle Spalten gleich breit.
  ================ */
  @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));
    }
  }
  /* ================
     Content Collection – Container für article-wrapper
     Definiert den Container-Kontext, auf den die Container Queries
     der equal-columns reagieren.
  ================ */
  .content-collection {
    container-type: inline-size;
    container-name: article-wrapper;
  }
  .content-collection > :is(h2, h3, h4, h5, h6):first-child + * {
    margin-block-start: var(--flow-spacing-block-default);
  }
  /* ================
     Equal Columns – 4 Spalten (fixiert)
     Zwischenstufe: Der 4-Spalter läuft hier zunächst als 2-Spalter,
     die volle Breite kommt erst ab breakpoint-container-grid-2.
  ================ */
  @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 {
      /* Letztes Item in letzter Zeile → zentrieren */
    }
    .equal-columns--columns-4.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  /* ================
     Equal Columns – 4 Spalten ab breakpoint-container-grid-2
     Volle Breite; die Zentrierungsfälle werden für Reihen à 4 Items neu
     durchgerechnet und der Zweier-Fall der Stufe davor zurückgesetzt.
  ================ */
  @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 aus width > breakpoint-container-grid-1 */
    }
    .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;
    }
  }
  /* ================
     Equal Columns – 3 Spalten (fixiert)
     Zwischenstufe: zwei gleich breite Spalten.
  ================ */
  @container article-wrapper (width > 46rem) {
    .equal-columns--columns-3 {
      grid-template-columns: repeat(2, 1fr);
    }
    .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) {
      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 {
      /* Letztes Item in letzter Zeile → zentrieren */
    }
    .equal-columns--columns-3.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
  /* ================
     Equal Columns – 3 Spalten ab breakpoint-container-grid-2
     Volle Breite; Zentrierungsfälle für Reihen à 3 Items.
  ================ */
  @container article-wrapper (width > 70rem) {
    .equal-columns--columns-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 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 aus width > breakpoint-container-grid-1 */
    }
    .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;
    }
  }
  /* ================
     Equal Columns – 2 Spalten (fixiert)
     Kennt keine zweite Stufe: Ab breakpoint-container-grid-1 gilt die
     Aufteilung unverändert bis zur größten Breite.
  ================ */
  @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 {
      /* Letztes Item in letzter Zeile → zentrieren */
    }
    .equal-columns--columns-2.equal-columns--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Flex Group / Flexibles Gruppen-Layout
   Beschreibung: Utility-Klasse für flexible Gruppen von Elementen mit einheitlichem
     Abstand und konfigurierbarer Ausrichtung. Alignment (Querachse) und Justification
     (Hauptachse) werden über CSS Custom Properties per Modifier gesteuert.
   Layer: layout
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flex-group-gap-default
   Projekt-Tokens: none
   Definierte Tokens: --flex-group-alignment, --flex-group-justification
   Überschriebene Tokens: none
   BEM-Blöcke: .flex-group
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <div class="flex-group flex-group--justify-center flex-group--align-start">
 *   <a class="button button--primary" href="#">Label</a>
 *   <a class="button button--secondary" href="#">Label</a>
 * </div>
 *
 * Modifier:
 * .flex-group--align-start            → Querachse: Anfang (oben)
 * .flex-group--align-center           → Querachse: Mitte
 * .flex-group--align-end              → Querachse: Ende (unten)
 * .flex-group--justify-start          → Hauptachse: Anfang (links)
 * .flex-group--justify-center         → Hauptachse: Mitte
 * .flex-group--justify-end            → Hauptachse: Ende (rechts)
 * .flex-group--justify-space-between  → Hauptachse: gleichmäßig verteilt
 */
@layer layout {
  /* ================
     Flex Group – Basis
     align-items steuert die Querachse (vertikal bei flex-direction: row,
     horizontal bei flex-direction: column).
     justify-content steuert die Hauptachse (horizontal bei flex-direction: row,
     vertikal bei flex-direction: column).
  ================ */
  .flex-group {
    display: flex;
    gap: var(--flex-group-gap-default, 0.5rem);
    flex-wrap: wrap;
    align-items: var(--flex-group-alignment, center);
    justify-content: var(--flex-group-justification, flex-start);
    /* ================
       Alignment-Modifier – Querachse
    ================ */
  }
  .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 {
    /* ================
       Justification-Modifier – Hauptachse
    ================ */
  }
  .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;
  }
  /* ================
     Responsive – Mobile
     Zentrierung auf Mobile aufheben: flex-start verhindert einzelne
     zentrierte Elemente, die auf kleinen Viewports unruhig wirken.
  ================ */
  @media (width < 26.25rem) {
    .flex-group.flex-group--justify-center {
      --flex-group-justification: flex-start;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Background / Hintergrundfarben-Modifier
   Beschreibung: Modifier-Klassen, die einer beliebigen Fläche einen der vier
     semantischen Hintergründe zuweisen. Ausschließlich Flächenfarbe – die
     invertierten Vordergrund-Rollen für .background-color--dark liegen getrennt in
     _l-background-inverted.scss (Framework-Rollen) und
     80-projects/pohlteich/_p-background-inverted.scss (komponentenspezifisch).
   Layer: layout
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --background-color-light, --background-color-default,
     --background-color-extra-light, --background-color-extra-dark
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .background-color (ausschließlich als Modifier-Klassen im Einsatz)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <section class="background-color--dark">
 *   <div class="wrapper">
 *     <h2>Überschrift</h2>
 *     <p>Fließtext erbt die helle Kontextfarbe automatisch.</p>
 *     <a href="#">Link ebenfalls</a>
 *   </div>
 * </section>
 *
 * Modifier:
 * .background-color--light       → Heller Hintergrund
 * .background-color--default     → Standard-Hintergrund (weiß)
 * .background-color--extra-light → Extra heller Hintergrund
 * .background-color--dark        → Dunkle Fläche; Vordergrund-Rollen kommen aus
 *                                  _l-background-inverted.scss
 */
@layer layout {
  /* ================
     Hintergrundfarben-Modifier
     Reine Flächenfarbe ohne Auswirkung auf den Vordergrund.
  ================ */
  .background-color--light {
    background-color: var(--background-color-light);
  }
  .background-color--default {
    background-color: var(--background-color-default);
  }
  .background-color--extra-light {
    background-color: var(--background-color-extra-light);
  }
  .background-color--dark {
    background-color: var(--background-color-extra-dark);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Background Inverted / Invertierte Vordergrund-Rollen
   Beschreibung: Ergänzt .background-color--dark um die invertierten Vordergrund-Rollen.
     Zuständig sind ausschließlich die generischen Framework-Rollen aus
     _s-tokens-semantic.scss (Text, Navigation, Links, Fokus). Sie werden am
     Container gesetzt und erreichen alle Kinder per Vererbung, ohne dass einzelne
     Komponenten angefasst werden müssen.
     Komponentenspezifische Tokens gehören NICHT hierher – siehe Hinweis zum Layer.
   Layer: layout
   Abhängig von: s-tokens-semantic.scss, _l-background.scss
   Verwendete Tokens: --text-color-default-inverted, --text-color-default-inverted-hover,
     --navigation-color-default-inverted, --link-color-default-inverted,
     --focus-color-default-inverted
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens:
     --text-color-default -> _s-tokens-semantic.scss
     --text-color-default-hover -> _s-tokens-semantic.scss
     --navigation-color-default -> _s-tokens-semantic.scss
     --link-color-default -> _s-tokens-semantic.scss
     --focus-color-default -> _s-tokens-semantic.scss
   BEM-Blöcke: .background-color (ausschließlich als Modifier-Klassen im Einsatz)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <section class="background-color--dark">
 *   <div class="wrapper">
 *     <h2>Überschrift</h2>
 *     <p>Fließtext erbt die helle Kontextfarbe automatisch.</p>
 *     <a href="#">Link ebenfalls</a>
 *   </div>
 * </section>
 *
 * Warum Layer "layout" hier ausreicht:
 * Alle hier überschriebenen Tokens sind in _s-tokens-semantic.scss (Layer settings)
 * auf :root definiert. settings steht vor layout, die Überschreibung gewinnt also.
 * Sie wirken zusätzlich per Vererbung, weil kein Kind-Element diese Rollen selbst setzt.
 *
 * Wo das NICHT reicht:
 * Komponenten-Tokens werden am Element selbst deklariert (z.B. .text-icon--link setzt
 * --link-text-icon-color in Layer components). Ein am Vorfahren gesetzter Wert wird dann
 * nicht geerbt, und components steht ohnehin hinter layout. Solche Overrides brauchen
 * einen verschachtelten Selektor UND einen späteren Layer – deshalb liegen sie in
 * 80-projects/pohlteich/_p-background-inverted.scss (Layer projects).
 */
@layer layout {
  /* ================
     Feste dunkle Surface – invertierte Vordergrund-Rollen (z.B. Site-Footer)
     In BEIDEN Modi dunkel: Die Vordergrund-Rollen werden auf die festen
     -inverted-Semantic-Tokens gelegt (helle Kontextfarbe für dunkle Flächen).
     Diese -inverted-Tokens dürfen von einem späteren globalen Dark-Mode NICHT
     umgemappt werden, damit die Fläche nicht doppelt invertiert.
  ================ */
  .background-color--dark {
    --text-color-default: var(
            --text-color-default-inverted
    );
    --navigation-color-default: var(
            --navigation-color-default-inverted
    );
    --link-color-default: var(
            --link-color-default-inverted
    );
    --focus-color-default: var(
            --focus-color-default-inverted
    );
    color: var(--text-color-default);
    /* ================
       Link-Hover
       Eigener Selektor, weil die Hover-Rolle nur im Hover-Zustand gilt.
    ================ */
  }
  .background-color--dark a:hover {
    --text-color-default-hover: var(--text-color-default-inverted-hover);
  }
  .background-color--dark {
    /* ================
       SVG – Icons ohne currentColor
       Icons, die ihre Farbe nicht per currentColor beziehen, werden hier
       direkt auf die helle Kontextfarbe gesetzt.
    ================ */
  }
  .background-color--dark svg {
    fill: var(--text-color-default-inverted);
  }
}
/* 40) contao */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Flow-Spacing
   Beschreibung: Definiert konsistente vertikale Abstände zwischen
     aufeinanderfolgenden Block-Elementen innerhalb von .content-text.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-spacing-block-default, --elements-gap-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-text
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  .content-text > * + *,
  .content-text > .rte > * + * {
    margin-block-start: var(--flow-spacing-block-default, 1.25em);
  }
  /* Vergrößerter Abstand nach einer H1 – stärkere visuelle Trennung gewünscht */
  .content-text > h1 + * {
    margin-block-start: var(--elements-gap-block);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao News-Modul (Newsliste + Newsreader)
   Beschreibung: Styles für das Contao News-Modul. Legt das Subgrid-Layout der
     Newsliste für gleich hohe Karten fest, steuert die Innenabstände der
     Kartenelemente und formatiert Meta-Informationen sowie das Layout der
     Einzelartikel-Detailseite.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss, _l-grid.scss (.equal-columns liefert
     display: grid und die Spaltendefinition für .newslist)
   Verwendete Tokens: --text-color-default, --card-padding-inline,
     --card-padding-block, --flow-grid-spacing-block, --font-weight-light,
     --font-size-sm, --section-padding-block, --section-width-sm
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .newslist (Elemente: __card, __link, __image, __headline,
     __info, __meta, __meta-item, __divider, __author)
   Contao-Klassen (unverändert übernommen): .layout_full, .layout_latest,
     .mod_newsreader, .content-block, .content-gallery, .info
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel – Newsliste (templates/news_latest.html.twig):
 * <div class="newslist equal-columns equal-columns--columns-3">
 *   <a class="newslist__link layout_latest newslist__card block" href="…">
 *     <div class="newslist__image">…</div>                  <- 1. Kind (Row 1)
 *     <div class="newslist__headline">                      <- 2. Kind (Row 2)
 *       <h3>Überschrift</h3>
 *       <div class="newslist__info">
 *         <ul class="newslist__meta">
 *           <li class="newslist__meta-item"><time …>01. Januar 2026</time></li>
 *           <li class="newslist__meta-item">
 *             <span class="newslist__divider" aria-hidden="true"> / </span>
 *             <span class="newslist__author">Autor</span>
 *           </li>
 *         </ul>
 *       </div>
 *     </div>
 *     <div class="content-text block">Teaser + Weiterlesen-Link</div> <- 3. Kind (Row 3)
 *   </a>
 * </div>
 *
 * Markup-Beispiel – Detailseite (templates/news_full.html.twig):
 * <div class="layout_full content-block block">
 *   <h1>Überschrift</h1>
 *   <p class="info"><time …>…</time> Autor</p>   <- wird ausgeblendet
 *   <div class="ce_text block">…</div>
 * </div>
 *
 * Ohne Beitragsbild entfällt das .newslist__image – die Karte beginnt dann mit
 * .newslist__headline als erstem Kind. Die Innenabstände greifen daher über
 * strukturelle Selektoren (:nth-child) statt über Klassennamen.
 */
@layer extensions {
  /* ================
     Newsliste – Grid-Layout
     display: grid und die Spaltenanzahl kommen von .equal-columns
     (_l-grid.scss); hier werden nur die drei Rows für das Subgrid der
     Karten definiert. Breakpoint entspricht dem von equal-columns.
  ================ */
  @media (width > 46rem) {
    .newslist {
      grid-template-rows: auto auto auto;
    }
  }
  /* ================
     News-Karte – Subgrid für gleiche Kartenhöhen
     Ohne Subgrid würde jede Karte ihre Zeilenhöhen selbst bestimmen und
     Bild-/Headline-Kanten der Karten lägen nicht auf einer Linie.
  ================ */
  .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);
  }
  /* ================
     News-Karte – Innenabstände
     Strukturell adressiert, weil die Kinder je nach Modul-Konfiguration
     variieren (Bild optional, Teaser optional).
  ================ */
  .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);
  }
  /* ================
     News-Meta-Informationen – Datum und Autor
  ================ */
  .newslist__info .newslist__meta {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm);
    color: var(--text-color-default);
    gap: 0.25em 0.9rem;
    flex-flow: wrap;
  }
  .newslist__info .newslist__divider {
    padding-inline-end: 0.9rem;
  }
  /* ================
     Einzelartikel-Layout (Detailseite)
  ================ */
  .layout_full {
    margin-block-end: var(--section-padding-block);
  }
  .layout_full .info {
    display: none;
  }
  /* Backlink und Links im Newsreader ohne Unterstreichung */
  .mod_newsreader a {
    text-decoration: none;
  }
  /* ================
     Newsreader – Lesebreite der Inhalte
  ================ */
  .wrapper--width-standard .content-block > *:not(.content-gallery) {
    max-width: var(--section-width-sm);
    margin-inline: auto;
  }
  /* ================
     News-Meta – Responsive (Mobilansicht)
     Datum und Autor untereinander statt nebeneinander
  ================ */
  @media (max-width: 26.25rem) {
    .newslist__info .newslist__meta {
      display: block;
    }
    .newslist__info .newslist__divider {
      display: none;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Typografie-Anpassungen
   Beschreibung: Typografie-spezifische Anpassungen für Contao-Wrapper-Klassen.
     Begrenzt Zeilenlänge von Fließtext und Überschriften für optimale
     Lesbarkeit und steuert Textausrichtung in Abhängigkeit von
     Utility-Klassen.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --section-width-sm
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* ================
     Überschriften – Max-Breite für optimale Lesbarkeit
  ================ */
  .wrapper--width-narrow :is(h2, h3, h4, h5, h6),
  .wrapper--width-medium :is(h2, h3, h4, h5, h6),
  .wrapper--width-standard :is(h2, h3, h4, h5, h6) {
    max-width: 25em;
  }
  /* ================
     Fließtext – Max-Breite und Ausrichtung
  ================ */
  .wrapper--width-narrow > .content-text,
  .wrapper--width-medium > .content-text,
  .wrapper--width-standard > .content-text {
    max-width: 75ch;
  }
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-narrow > .content-text:not(:has(.u-text-center)) h6,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-medium > .content-text:not(:has(.u-text-center)) h6,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h2,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h3,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h4,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h5,
  .wrapper--width-standard > .content-text:not(:has(.u-text-center)) h6 {
    text-align: left;
  }
  .wrapper--width-narrow > .content-text:has(.u-text-center),
  .wrapper--width-medium > .content-text:has(.u-text-center),
  .wrapper--width-standard > .content-text:has(.u-text-center) {
    margin-inline: auto;
  }
  /* Max-Breite in Zeicheneinheiten für bessere Lesbarkeit –
     nur in Wrappern, nicht in .equal-columns (dort definiert die Spalte die Breite) */
  .wrapper--width-narrow > *:not(:has(.equal-columns)) .content-text,
  .wrapper--width-medium > *:not(:has(.equal-columns)) .content-text,
  .wrapper--width-standard > *:not(:has(.equal-columns)) .content-text {
    max-width: 65ch;
  }
  /* ================
     Zwei-Spalten-Text-RSCE – Max-Breite und Zentrierung
  ================ */
  .wrapper--width-standard > * .ce_rsce_two_columns_text {
    max-width: var(--section-width-sm);
    margin-inline: auto;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Swiper – Konfiguration
   Beschreibung: Konfiguriert die Swiper-Bibliothek über deren offizielle
     CSS Custom Properties. Setzt Größe und Farben für Navigation und
     Pagination-Bullets projektspezifisch. Stellt zusätzlich den Modifier
     .swiper--pagination-under-image bereit, der die Pagination unter
     die Slides verschiebt statt absolut darüberzulegen.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-grid-spacing-block
   Projekt-Tokens: none
   Definierte Tokens:
     --swiper-navigation-size, --swiper-pagination-bullet-inactive-opacity,
     --swiper-pagination-bullet-size, --swiper-pagination-bullet-width,
     --swiper-pagination-bullet-height, --swiper-pagination-bullet-inactive-color,
     --swiper-pagination-bullet-horizontal-gap, --swiper-theme-color,
     --swiper-navigation-color
   Überschriebene Tokens: none
   BEM-Blöcke: .swiper--pagination-under-image
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* ================
     Swiper-Bibliothek – Projektspezifische Custom Property Overrides
     Alle --swiper-* Variablen werden von der Swiper-Bibliothek ausgelesen.
  ================ */
  :root {
    --swiper-navigation-size: 2rem !important;
    /* --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px; */
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-size: 16px;
    --swiper-pagination-bullet-width: 16px;
    --swiper-pagination-bullet-height: 16px;
    --swiper-pagination-bullet-inactive-color: #f5f5f5;
    --swiper-pagination-bullet-horizontal-gap: 0.3rem;
    --swiper-theme-color: #000 !important;
    --swiper-navigation-color: var(--swiper-theme-color);
  }
  /* ================
     Modifier: .swiper--pagination-under-image
     Hebt die Standard-Absolutpositionierung der Pagination auf, damit sie
     im Fluss unter dem .swiper-wrapper erscheint. Wird auf den .swiper-
     Container selbst gesetzt (Modifier = Wrapper).
     !important nötig, weil swiper-bundle.min.css ungestyled (außerhalb
     jeder @layer) geladen wird und damit gegenüber Layer-Regeln gewinnt.
  ================ */
  .swiper--pagination-under-image .swiper-pagination {
    position: static !important;
    margin-block-start: var(--flow-grid-spacing-block);
  }
  /* ================
     Fix für Swiper in Equal Columns
     Wenn ein Swiper in einem Equal Columns Grid verwendet wird, kann es zu Problemen
     mit der Berechnung der Spaltenbreite kommen, da grid Kindelemente standardmäßig auf
     min-width: auto setzt, was bei flexiblen Inhalten wie Swiper zu unerwarteten
     Layoutproblemen führen kann. Durch das Setzen von min-width: 0 auf die direkten
     Kinder von .equal-columns, die einen Swiper enthalten, wird sichergestellt, dass
     die Spaltenbreite korrekt berechnet wird und der Swiper sich an die verfügbare
     Breite anpasst.
  ================ */
  .equal-columns > *:has(.swiper) {
    min-width: 0;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Formular-Element
   Beschreibung: Styles für das Contao Formular-Element. Definiert Grid-Layout,
     Typografie und Interaktionszustände aller Formularelemente inklusive
     Text-, Textarea-, Select- und Upload-Felder sowie Checkbox- und
     Radio-Gruppen. Der Submit-Button wird hier NICHT formatiert – er trägt
     über form_submit.html.twig die Klassen der Button-Komponente
     (.button, .text-icon, .button--arrow-left-right) und wird in
     _c-button.scss gestylt.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss, b-focus.scss (globaler Fokus-Ring,
     der von der Feld-Regel via outline: none ausgehebelt und in den
     Fokus-Zuständen wiederhergestellt wird), _u-a11y.scss (globale
     Bewegungsreduzierung für die Transitions)
   Verwendete Tokens: --flow-grid-spacing-block, --flow-spacing-block-sm,
     --equal-columns-gap-rows, --font-size-lg, --font-size-md, --font-size-sm,
     --font-size-xs, --font-weight-semi-bold, --font-weight-light,
     --font-weight-book, --text-color-light, --form-color-input,
     --form-color-label, --form-font-weight-label, --form-mandatory-color,
     --form-color-error, --form-field-background-color-default,
     --form-field-padding-inline, --form-field-padding-block,
     --form-field-border-color-focus, --border-radius-default,
     --border-color-light, --button-background-reduced, --button-color-reduced,
     --button-background-reduced-hover, --button-color-reduced-hover,
     --button-padding-inline, --button-padding-block, --focus-color-default,
     --focus-outline-width, --focus-outline-offset
     Nicht mitgezählt: --elements-gap-block, das nur in einem auskommentierten
     Block am Ende von .formbody vorkommt.
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .formbody, .form--legend-invisible, .form-confirmation
     Alle übrigen Selektoren sind von Contao generierte Klassennamen
     (.widget, .checkbox_container, .radio_container, .invisible, .mandatory,
     .help, .hint, .error) und werden konventionsgemäß unverändert genutzt.
   RSCE-Templates: none
   Assets: none (der Select-Chevron ist ein Inline-SVG als data:-URI und
     zählt damit nicht als externes Asset)
   ========================================================================== */
/*
 * Markup-Beispiel (von Contao generiert, gekürzt):
 * <div class="ce_form content-collection">
 *   <form>
 *     <div class="formbody">
 *       <fieldset>
 *         <legend>Kontakt</legend>
 *         <div class="widget widget-text">
 *           <label for="ctrl_name">Name<span class="mandatory">*</span></label>
 *           <input type="text" id="ctrl_name" class="text mandatory">
 *           <p class="error">Bitte geben Sie einen Namen an.</p>
 *         </div>
 *         <div class="widget widget-checkbox">
 *           <fieldset class="checkbox_container">
 *             <legend>Interessen</legend>
 *             <span><input type="checkbox" id="opt_0"><label for="opt_0">Web</label></span>
 *           </fieldset>
 *         </div>
 *       </fieldset>
 *       <div class="widget widget-submit">
 *         <button type="submit" class="button text-icon button--arrow-left-right submit">…</button>
 *       </div>
 *     </div>
 *   </form>
 * </div>
 *
 * Modifier (im Backend über das Feld cssID gesetzt):
 * .form--legend-invisible  → blendet die Legende des obersten Fieldsets
 *                            visuell aus (bleibt für Screenreader lesbar)
 */
@layer extensions {
  /* ================
     Grundlayout Formular
  ================ */
  .formbody {
    display: grid;
    gap: var(--flow-grid-spacing-block, 1.25rem);
    align-content: start;
    /* ================
       Accessibility – visuell verstecktes Element (screenreader-kompatibel)
    ================ */
  }
  .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 – Reset
    ================ */
  }
  .formbody fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }
  .formbody > fieldset > legend {
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semi-bold);
  }
  .formbody {
    /* ================
       Abstände zwischen Widget-Elementen
       Owl-Selektor (* + *): Abstand nur zwischen Geschwistern, nie vor dem
       ersten Element – so bleibt der Grid-Gap der .formbody unangetastet.
    ================ */
  }
  .formbody .widget > * + *,
  .formbody fieldset > * + *,
  .formbody > fieldset > legend + * {
    margin-block-start: var(--flow-spacing-block-sm);
  }
  .formbody > fieldset > * + * {
    margin-block-start: var(--equal-columns-gap-rows);
  }
  .formbody :is(label, legend).visually-hidden + * {
    margin-block-start: 0;
  }
  .formbody {
    /* ================
       Hilfe- und Fehlertexte
       Drei Contao-Textsorten unterhalb eines Feldes: .help (Erläuterung),
       .hint (Kurzhinweis) und .error (Validierungsmeldung).
    ================ */
  }
  .formbody .widget > p.help {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
    font-style: italic;
    color: var(--text-color-light);
  }
  .formbody .widget > p.hint {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-book);
    font-style: italic;
  }
  .formbody .widget > p.error {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-book);
    font-style: italic;
    color: var(--form-color-error);
  }
  .formbody {
    /* ================
       Eingabefelder – Text, Textarea, Select
    ================ */
  }
  .formbody input.text,
  .formbody textarea,
  .formbody select {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--border-radius-default);
    border: 1px solid var(--border-color-light);
    background: var(--form-field-background-color-default);
    padding-inline: var(--form-field-padding-inline);
    padding-block: var(--form-field-padding-block);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    outline: none;
    color: var(--form-color-input);
    transition: border-color 0.3s ease;
  }
  .formbody {
    /* ================
       Datei-Upload-Feld
       Bewusst ohne eigenen Rahmen und ohne Feld-Padding: sichtbar ist nur
       der native Auswahl-Button plus Dateiname.
    ================ */
  }
  .formbody input.upload {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.4;
    outline: none;
  }
  .formbody input.upload[type=file]::file-selector-button {
    background: var(--button-background-reduced);
    color: var(--button-color-reduced);
    border: none;
    padding-inline: var(--button-padding-inline);
    padding-block: var(--button-padding-block);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  .formbody input.upload[type=file]::file-selector-button:hover {
    background: var(--button-color-reduced-hover);
    color: var(--button-background-reduced-hover);
  }
  .formbody {
    /* ================
       Textarea – Mindesthöhe und Resize-Verhalten
    ================ */
  }
  .formbody textarea {
    min-height: 16rem;
    resize: vertical;
  }
  .formbody {
    /* ================
       Select – Custom Dropdown mit eigenem Chevron-Icon
    ================ */
  }
  .formbody select {
    padding: 0.75rem 3rem 0.75rem 0.75rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.245 4L12 18.374L0.781001 4L1.02202e-06 4.619L12 20L24 4.609L23.245 4Z' fill='currentColor'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 10px;
    cursor: pointer;
  }
  .formbody {
    /* ================
       Fokus-Zustände
       Zweistufig: Rahmenfarbe bei jedem Fokus, Ring nur bei Tastatur.
    ================ */
  }
  .formbody input.text:focus,
  .formbody textarea:focus,
  .formbody select:focus {
    border-color: var(--form-field-border-color-focus);
  }
  .formbody input.text:focus-visible,
  .formbody textarea:focus-visible,
  .formbody select:focus-visible,
  .formbody input.upload:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color-default);
    outline-offset: var(--focus-outline-offset);
  }
  .formbody {
    /* ================
       Hover-Zustände
    ================ */
  }
  .formbody input.text:hover,
  .formbody textarea:hover,
  .formbody select:hover {
    border-color: var(--form-field-border-color-focus);
  }
  .formbody {
    /* ================
       Pflichtfeld-Markierung
    ================ */
  }
  .formbody span.mandatory {
    color: var(--form-mandatory-color);
  }
  .formbody {
    /* ================
       Labels und Legenden
    ================ */
  }
  .formbody label,
  .formbody legend span:not(.invisible) {
    display: inline-block;
  }
  .formbody fieldset fieldset > legend,
  .formbody .checkbox_container legend,
  .formbody label {
    font-weight: var(--form-font-weight-label);
    color: var(--form-color-label);
    font-size: var(--font-size-sm);
  }
  .formbody {
    /* ================
       Checkbox-Container
    ================ */
  }
  .formbody .checkbox_container span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .formbody .checkbox_container label {
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  .formbody {
    /* ================
       Radio-Container
       Optionen stehen nebeneinander und brechen bei Platzmangel um.
    ================ */
  }
  .formbody .radio_container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1em;
  }
  .formbody .radio_container span {
    flex: 0 0 auto;
  }
  .formbody .radio_container label {
    font-weight: inherit;
  }
  .formbody {
    /* & > .widget-submit {
        margin-block-start: var(--elements-gap-block);
    } */
  }
  /* ================
     Pflichtfeld-Markierung außerhalb von formbody - Erklärungstext
  ================ */
  span.mandatory {
    color: var(--form-mandatory-color);
  }
  /* ================
     Modifier – Visuell versteckte Fieldset-Legende
     Wird im Backend über das Feld cssID am Formular gesetzt. Die Legende
     bleibt im DOM und damit für Screenreader lesbar (gleiche Clip-Technik
     wie .invisible weiter oben).
  ================ */
  .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;
  }
  /* ================
     Formular-Bestätigungsmeldung (AJAX)
  ================ */
  .form-confirmation p {
    font-size: var(--font-size-md);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Tabellen-Element
   Beschreibung: Styles für das Contao Tabellen-Inhaltselement. Definiert
     Layout, Farben, Zeilenzebra und Typografie für HTML-Tabellen.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --table-border-color, --table-cell-padding-block-default,
     --table-cell-padding-inline-default, --table-header-background-color,
     --font-weight-medium, --table-row-odd-background-color,
     --text-color-light, --font-size-sm, --flow-grid-spacing-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-table
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* Max-Breite für Tabellen im Standard-Wrapper (bessere Lesbarkeit) */
  .wrapper--width-standard > .content-table {
    max-width: 65ch;
    margin-inline: auto;
  }
  /* ================
     Tabelle – Basis-Layout
  ================ */
  .content-table table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--flow-grid-spacing-block, 1.25rem);
    text-align: left;
    /* ================
       Tabellenzellen
    ================ */
  }
  .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 {
    /* ================
       Tabellenkopf
    ================ */
  }
  .content-table table th {
    background-color: var(--table-header-background-color);
    font-weight: var(--font-weight-medium);
  }
  .content-table table {
    /* ================
       Zeilenzebra – ungerade Zeilen hervorheben
    ================ */
  }
  .content-table table tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-background-color);
  }
  .content-table table {
    /* ================
       Tabellenunterschrift
    ================ */
  }
  .content-table table caption {
    color: var(--text-color-light);
    font-size: var(--font-size-sm);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Galerie-Element
   Beschreibung: Styles für das Contao Galerie-Inhaltselement. Setzt ein
     responsives Grid-Layout mit fixer oder automatischer Spaltenanzahl.
     Unterstützt optionale Zentrierung unvollständiger letzter Reihen.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --equal-columns-gap-default, --equal-columns-gap-columns,
     --equal-columns-gap-rows, --column-layout-alignment,
     --grid-auto-fit-column-size-min
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens:
     --equal-columns-gap-columns -> _l-grid.scss,
     --equal-columns-gap-rows -> _l-grid.scss
   BEM-Blöcke: .content-gallery
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <div class="content-gallery content-gallery--cols-4">
 *   <ul>
 *     <li><figure>...</figure></li>
 *   </ul>
 * </div>
 *
 * Modifier:
 * .content-gallery--cols-4              → fixes 4-Spalten-Grid
 * .content-gallery--cols-3              → fixes 3-Spalten-Grid
 * .content-gallery--cols-2              → fixes 2-Spalten-Grid
 * .content-gallery--columns-center      → zentriert unvollständige letzte Reihe
 */
@layer extensions {
  /* ================
     Galerie – Basis-Grid
  ================ */
  .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));
    }
  }
  /* ================
     Fixes 4-Spalten-Grid
  ================ */
  @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 {
      /* Letzte Reihe mit 1 Element → zentrieren */
    }
    .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;
    }
  }
  /* ================
     Fixes 3-Spalten-Grid
  ================ */
  @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 {
      /* Letzte Reihe mit 1 Element → zentrieren */
    }
    .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 {
      /* Letzte Reihe mit 2 Items → mittig */
    }
    .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;
    }
  }
  /* ================
     Fixes 2-Spalten-Grid
  ================ */
  @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 {
      /* Letzte Reihe mit 1 Element → zentrieren */
    }
    .content-gallery--cols-2 ul.content-gallery--columns-center > *:nth-child(2n+1):nth-last-child(1) {
      grid-column: 2/span 2;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Download-Element
   Beschreibung: Styles für das Contao Download-Inhaltselement. Setzt vertikale
     Abstände zwischen aufeinanderfolgenden Download-Elementen und setzt
     den Abstand im Grid-Kontext zurück.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-spacing-block-sm
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-download
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  .content-block .content-download + .content-download {
    margin-block-start: var(--flow-spacing-block-sm, 0.5rem);
  }
  .content-block .equal-columns .content-download + .content-download {
    margin-block-start: 0;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Suche-Modul
   Beschreibung: Styles für das Contao Suche-Modul und die Suchergebnis-Seite.
     Setzt Abstände zwischen Suchformular und Ergebnisliste sowie Farbe für
     den Kontext-Text der Suchergebnisse.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --elements-gap-block, --text-color-light
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .mod_search, .search_default
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* ================
     Suchmodul – Abstand zwischen Formular und Ergebnisliste
  ================ */
  .mod_search > *:first-child {
    margin-block-end: var(--elements-gap-block);
  }
  /* ================
     Suchergebnis-Eintrag
  ================ */
  .search_default:not(:first-child) {
    margin-block-start: var(--elements-gap-block);
  }
  /* Kontext-Snippet in abgeschwächter Farbe */
  .search_default .context {
    color: var(--text-color-light);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Social Feed (pdir/social-feed-bundle)
   Beschreibung: Ersetzt das mitgelieferte social_feed.min.css der Extension
     durch eine token-basierte Fassung. Stylt die Feed-Liste (Spalten mit und
     ohne Masonry) sowie die einzelnen Beitrags-Karten inklusive Account-Avatar,
     Meta-Zeile und Netzwerk-Icon.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss,
     App\EventListener\SocialFeedAssetsListener (entfernt das Bundle-CSS aus
     TL_CSS – ohne diesen Listener lägen beide Stylesheets übereinander),
     templates/news_social_feed.html.twig,
     templates/news_social_feed_extended.html.twig,
     templates/mod_newslist_social_feed.html.twig
   Verwendete Tokens: --equal-columns-gap-default, --background-color-extra-light,
     --border-color-light, --border-radius-default, --text-color-default,
     --text-color-light, --link-color-default, --link-color-default-hover,
     --font-size-xs, --font-size-sm, --font-weight-bold, --card-padding-inline,
     --card-padding-block-sm, --space-300, --space-500, --flow-spacing-block-sm
   Projekt-Tokens: none
   Definierte Tokens: --social-feed-columns, --social-feed-gap,
     --social-feed-avatar-size, --social-feed-accent-size,
     --social-feed-card-padding
   Überschriebene Tokens: none
   BEM-Blöcke: none
     (Klassen stammen aus der Extension und werden unverändert übernommen:
     .social_feed_container, .social_feed_element, .inner, .icon, .info,
     .title, .more sowie .ce_text aus dem Contao-Textelement)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel (aus mod_newslist_social_feed.html.twig):
 * <div class="social_feed_container masonry columns3">
 *   <div class="social_feed_element arc_3 block">
 *     <div class="inner">
 *       <a href="…">
 *         <div class="icon"><img …></div>
 *         <p class="info"><time …>…</time><img …></p>
 *         <div class="title">Accountname</div>
 *       </a>
 *       <figure class="image_container">…</figure>
 *       <a href="…"><div class="ce_text block"><p>…</p></div></a>
 *     </div>
 *   </div>
 * </div>
 *
 * Varianten:
 * .columns2 / .columns3 / .columns4  → Spaltenanzahl (pdir_sf_columns)
 * .masonry                           → Masonry-Layout (pdir_sf_enableMasonry)
 * .social_feed_element.extended      → erweiterte Karte mit "Weiterlesen"-Link,
 *                                      Kopfbereich und Teaser unverlinkt
 */
@layer extensions {
  /* ================
     Social Feed Container – Spaltenraster
     Die Spaltenanzahl kommt als Klasse aus dem Modul und wird auf ein
     einzelnes Token gemappt, statt die Regeln je Spaltenzahl zu wiederholen.
  ================ */
  .social_feed_container {
    --social-feed-columns: 1;
    --social-feed-gap: var(--equal-columns-gap-default);
  }
  .social_feed_container.columns2 {
    --social-feed-columns: 2;
  }
  .social_feed_container.columns3 {
    --social-feed-columns: 3;
  }
  .social_feed_container.columns4 {
    --social-feed-columns: 4;
  }
  .social_feed_container:not(.masonry) {
    display: grid;
    grid-template-columns: repeat(var(--social-feed-columns), minmax(0, 1fr));
    gap: var(--social-feed-gap);
  }
  .social_feed_container {
    /* ================
       Masonry-Variante
       Masonry positioniert die Items absolut und rechnet mit outerWidth.
       Der Container darf deshalb weder Grid noch Flex sein und gap greift
       nicht – der Abstand entsteht über Item-Padding, das der negative
       Container-Rand nach außen wieder ausgleicht.
    ================ */
  }
  .social_feed_container.masonry {
    margin-inline: calc(var(--social-feed-gap) / -2);
  }
  .social_feed_container.masonry .social_feed_element {
    float: left;
    width: calc(100% / var(--social-feed-columns));
    padding: calc(var(--social-feed-gap) / 2);
  }
  /* ================
     Social Feed Element – Karte
  ================ */
  .social_feed_element {
    --social-feed-avatar-size: 3.125rem;
    --social-feed-accent-size: 5px;
    --social-feed-card-padding: var(--card-padding-inline);
    width: 100%;
  }
  .social_feed_element .inner {
    position: relative;
    background: var(--background-color-extra-light);
    border-block-start: var(--social-feed-accent-size) solid var(--border-color-light);
    border-radius: var(--border-radius-default);
    padding-inline: var(--social-feed-card-padding);
    padding-block: calc(var(--social-feed-avatar-size) / 2 + var(--space-500)) var(--social-feed-card-padding);
    overflow-wrap: anywhere;
  }
  .social_feed_element a {
    color: var(--link-color-default);
    text-decoration: none;
  }
  .social_feed_element a:hover {
    color: var(--link-color-default-hover);
  }
  /* ================
     Account-Avatar
     Überlappt die Oberkante der Karte zur Hälfte. position: absolute bezieht
     sich auf .inner (dort position: relative).
  ================ */
  .social_feed_element .icon {
    position: absolute;
    inset-block-start: calc(var(--social-feed-avatar-size) / -2);
    inset-inline-start: var(--social-feed-card-padding);
    line-height: 0;
  }
  .social_feed_element .icon img {
    inline-size: var(--social-feed-avatar-size);
    block-size: var(--social-feed-avatar-size);
    border-radius: 50%;
    object-fit: cover;
  }
  /* ================
     Meta-Zeile – Datum und Netzwerk-Icon
  ================ */
  .social_feed_element .info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-300);
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-color-light);
  }
  .social_feed_element .info img {
    inline-size: 1rem;
    block-size: auto;
  }
  /* ================
     Accountname
  ================ */
  .social_feed_element .title {
    margin-block: var(--flow-spacing-block-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color-default);
  }
  /* ================
     Beitragstext
  ================ */
  .social_feed_element .ce_text {
    margin: 0;
    padding-block: var(--card-padding-block-sm);
    font-size: var(--font-size-xs);
    color: var(--text-color-default);
  }
  .social_feed_element .ce_text p:first-child {
    margin-block-start: 0;
  }
  .social_feed_element .ce_text p:last-child {
    margin-block-end: 0;
  }
  /* ================
     Erweiterte Variante – "Weiterlesen"-Link
     Nur news_social_feed_extended.html.twig gibt diesen Link aus; dort sind
     Kopfbereich und Teaser bewusst nicht verlinkt.
  ================ */
  .social_feed_element.extended .more {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
  }
  .social_feed_element.extended .more:hover {
    text-decoration: underline;
  }
  /* ================
     Mobile – einspaltig
     Gilt für beide Varianten: das Grid über das Spalten-Token, Masonry über
     die Item-Breite. Masonry muss nach dem Umbruch neu rechnen, das erledigt
     der layout-Aufruf im Skript von mod_newslist_social_feed.html.twig.
  ================ */
  @media (width < 48rem) {
    .social_feed_container {
      --social-feed-columns: 1;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Pagination
   Beschreibung: Styles für das Contao Pagination-Modul. Zentriert die
     Seitenzahlen und setzt konsistente Abstände zur vorherigen Sektion.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --elements-gap-block, --flow-spacing-block-sm
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .pagination
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  .pagination {
    margin-block-start: var(--elements-gap-block);
    /* ================
       Seitenanzeige-Text (z.B. "Seite 1 von 5")
    ================ */
  }
  .pagination p:first-child {
    margin-block-end: var(--flow-spacing-block-sm);
    text-align: center;
  }
  .pagination {
    /* ================
       Seitenzahlen-Liste – zentriert
    ================ */
  }
  .pagination ul {
    justify-content: center;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Navigation
   Beschreibung: Basis-Styles für Haupt- und Footer-Navigation sowie den
     barrierefreien Skip-Link. Behandelt Layout, Typografie und Hover-Zustände
     der Navigationselemente in Abhängigkeit von Link-Icon-Tokens.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --navigation-gap-inline-default,
     --navigation-gap-block-default, --navigation-font-family-default,
     --navigation-font-size-default, --navigation-font-weight-default,
     --navigation-line-height-item, --navigation-color-default,
     --navigation-color-default-hover, --elements-gap-block,
     --skip-link-background, --skip-link-color, --skip-link-font-weight,
     --skip-link-focus-border-color,
     --link-text-icon-color, --link-text-icon-color-hover
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .skip-link, .navigation, .navigation--centered,
     .navigation-footer, .navigation--main
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* ================
     Skip-Link – Barrierefreiheit (visuell versteckt, bei Fokus sichtbar)
  ================ */
  .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link:focus, .skip-link:focus-visible {
    position: fixed !important;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    z-index: 10000;
    background-color: var(--skip-link-background) !important;
    color: var(--skip-link-color) !important;
    font-size: 1rem;
    font-weight: var(--skip-link-font-weight) !important;
    line-height: 1;
    text-decoration: none;
    outline: 3px solid var(--skip-link-focus-border-color);
    animation: skip-nav-appear 0.15s ease-out;
  }
  @keyframes skip-nav-appear {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
  @media (forced-colors: active) {
    .skip-link:focus {
      outline: 3px solid ButtonText;
      background-color: ButtonFace;
      color: ButtonText;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skip-link:focus {
      animation: none;
    }
  }
  /* ================
     Navigation – Basis-Layout
  ================ */
  .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);
    /* Falls kein --link-text-icon-color aus Link-Icon-Komponente gesetzt ist, Fallback auf Navigation-Farbtokens */
    color: var(--link-text-icon-color, var(--navigation-color-default));
  }
  .navigation strong:hover,
  .navigation a:hover {
    /* Falls kein --link-text-icon-color-hover aus Link-Icon-Komponente gesetzt ist, Fallback auf Navigation-Farbtokens */
    color: var(--link-text-icon-color-hover, var(--navigation-color-default-hover));
  }
  .navigation strong.active,
  .navigation a.active {
    /* Falls kein --link-text-icon-color-hover aus Link-Icon-Komponente gesetzt ist, Fallback auf Navigation-Farbtokens */
    color: var(--link-text-icon-color-hover, var(--navigation-color-default-hover));
  }
  /* Temporärer Fix für News-Kategorien in der Navigation */
  .navigation.mod_newscategories span {
    line-height: var(--navigation-line-height-item);
  }
  /* ================
     Navigation – Modifier
  ================ */
  .navigation--centered ul {
    justify-content: center;
  }
  /* Abstand wenn Navigation direkt als erstes Kind in main auftaucht */
  main > .navigation:first-child {
    margin-block-start: var(--elements-gap-block);
  }
  /* ================
     Navigation – Responsive (Mobilansicht)
  ================ */
  @media (width < 48rem) {
    .navigation ul {
      flex-direction: column;
      row-gap: var(--navigation-gap-block-default);
    }
    .navigation-footer ul {
      align-items: center;
    }
  }
  /* ================
     Navigation – Haupt-Navigation mit Untermenü
  ================ */
  .navigation--main .level_2 {
    display: none;
  }
  .navigation--main .level_1 .submenu:hover ul.level_2 {
    display: block;
    position: absolute;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Navigation – Accessible
   Beschreibung: Barrierefreie Mobile/Desktop-Navigation ohne Mega-Menu.
     Styles zum Contao-Modul mod_navigation_accessible (Template-Override unter
     templates/mod_navigation_accessible.html.twig). Enthält den animierten
     Burger-Button mit Text, das mobile Fullscreen-Overlay, die
     Desktop-Dropdown-Submenüs, den Kontakt-Block unterhalb der Navigation
     sowie eine Sonderbehandlung für den Windows High Contrast Mode.
   Layer: extensions
   Abhängig von: s-tokens-semantic.scss
     Sass-Breakpoints: $breakpoint-main-nav-mobile, $breakpoint-nav-mobile-small
   Verwendete Tokens: --navigation-color-default,
     --navigation-color-default-hover, --navigation-mobile-background-color,
     --navigation-mobile-background-active-color,
     --navigation-gap-inline-default, --border-radius-default,
     --font-weight-regular, --fs-650, --fw-300, --fw-600, --lh-m,
     --clr-black, --clr-white, --clr-grey-500, --clr-green-300,
     --clr-red-500, --clr-yellow-500
   Projekt-Tokens: none
   Definierte Tokens:
     --nav-breakpoint, --nav-color, --nav-active-color,
     --nav-item-line-height, --nav-font-size, --nav-font-weight,
     --nav-icon, --nav-icon-background,
     --nav-mobile-background, --nav-mobile-color,
     --nav-mobile-active-background, --nav-mobile-active-color,
     --nav-mobile-active-border-color, --nav-mobile-btn-clr,
     --nav-mobile-separator-color, --nav-mobile-padding,
     --nav-mobile-font-size, --nav-mobile-backdrop-height,
     --nav-mobile-icon, --nav-submenu-background,
     --nav-burger-line-color, --nav-burger-line-color-active,
     --nav-burger-line-thickness, --nav-burger-line-gap,
     --nav-mobile-font-weight
   Überschriebene Tokens: none
   BEM-Blöcke: .navigation-accessible, .nav-wrapper, .navigation-main,
     .nav-mobile-content, .btn-toggle-submenu, .nav-burger,
     .nav-burger__inner, .nav-burger__text, .icon-line
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer extensions {
  /* ================
     CSS Custom Properties – Navigation-Tokens
     Basiswerte für Desktop- und Mobile-Navigation.
     Breakpoint muss mit $breakpoint-main-nav-mobile aus den SCSS-Variablen übereinstimmen.
  ================ */
  :root {
    --nav-breakpoint: 1700px; /* set same breakpoint as $breakpoint-main-nav-mobile */
    --nav-color: var(--navigation-color-default);
    --nav-active-color: var(--navigation-color-default-hover);
    --nav-item-line-height: var(--lh-m);
    --nav-font-size: var(--fs-650);
    --nav-font-weight: var(--fw-300);
    --nav-font-transform: uppercase;
    --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18l6-6-6-6"/></svg>');
    --nav-icon-background: transparent;
    /* Navigation Mobil */
    --nav-mobile-background: var(--navigation-mobile-background-color);
    --nav-mobile-color: var(--clr-black);
    --nav-mobile-active-background: var(--navigation-mobile-background-active-color);
    --nav-mobile-active-color: var(--clr-yellow-500);
    --nav-mobile-active-border-color: var(--clr-yellow-500);
    --nav-mobile-btn-clr: var(--clr-green-300);
    --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-white);
    --nav-burger-line-color-active: var(--clr-black);
    /* Burger-Geometrie: Strichstärke und Abstand zwischen den drei Linien.
       Der Versatz der äußeren Linien wird daraus berechnet, beide Werte
       lassen sich also unabhängig ändern, ohne dass etwas nachgerechnet
       werden muss. Angabe in rem, damit das Icon mit der
       a11y-Schriftgrößensteuerung mitskaliert (0.1875rem = 3px bei 16px Root). */
    --nav-burger-line-thickness: 0.1875rem;
    --nav-burger-line-gap: 0.4375rem;
    --nav-mobile-font-weight: var(--fw-600);
    /* skip link */
    /* --skip-background: var(--clr-grey-500);
    --skip-color: var(--clr-red-500);
    --skip-focus-border-color: var(--clr-red-500); */
  }
  /* ================
     Body – Navigationszustände
  ================ */
  body:not(.navigation-open, .nav-is-desktop) .navigation-main {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  body.navigation-open {
    overflow: hidden;
  }
  body.navigation-open header .logo {
    position: relative;
    z-index: 7;
  }
  .nav-wrapper * {
    box-sizing: border-box;
  }
  .navigation-main :is(a, strong) {
    line-height: var(--nav-item-line-height);
  }
  .navigation-main {
    /* set in _e-contao-navigation.scss */
    /* .skip-link {
        visibility: hidden;
    } */
  }
  /* ================
     Submenu-Toggle-Button
  ================ */
  .btn-toggle-submenu {
    all: revert;
    position: absolute;
    top: 5px;
    right: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--nav-icon-background) !important;
    cursor: pointer;
    z-index: 1;
  }
  .btn-toggle-submenu::after {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: var(--nav-mobile-icon) no-repeat center;
    transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.3, 1.1);
  }
  /* ================
     Burger-Button
  ================ */
  .nav-burger {
    padding: 0;
    border: none;
    background: transparent;
    line-height: 1.5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 7;
    height: 100%;
    top: 0;
    right: 0;
    transition: height 0.3s ease, top 0.3s ease, right 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-burger .icon-line,
  .nav-burger .icon-line::before,
  .nav-burger .icon-line::after {
    position: absolute;
    left: 50%;
    height: var(--nav-burger-line-thickness);
    width: 2.25rem;
    background: var(--nav-burger-line-color);
    border-radius: var(--border-radius-default);
    transform: translateX(-50%);
  }
  .nav-burger .icon-line {
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease-in-out;
  }
  .nav-burger .icon-line::before {
    top: calc(-1 * (var(--nav-burger-line-thickness) + var(--nav-burger-line-gap)));
  }
  .nav-burger .icon-line::after {
    bottom: calc(-1 * (var(--nav-burger-line-thickness) + var(--nav-burger-line-gap)));
  }
  .nav-burger .icon-line::before,
  .nav-burger .icon-line::after {
    z-index: 6;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
    content: "";
  }
  .nav-burger {
    /* Burger-Animation – Linien zu X drehen wenn aktiv */
  }
  .nav-burger.is-active .icon-line {
    background: transparent;
  }
  .nav-burger.is-active .icon-line::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
  }
  .nav-burger.is-active .icon-line::after {
    bottom: 0;
    transform: translateX(-50%) rotate(-45deg);
  }
  .nav-burger:hover {
    cursor: pointer;
  }
  /* ================
     Burger-Button – Position und Animation beim Öffnen
  ================ */
  body.nav-is-mobile.navigation-open .nav-burger {
    height: auto;
    position: fixed;
    top: 2rem;
    right: 2rem;
    transform: scale(1.05);
    /* Icon-Farbe beim geöffneten Menü wechseln */
  }
  body.nav-is-mobile.navigation-open .nav-burger .icon-line::before,
  body.nav-is-mobile.navigation-open .nav-burger .icon-line::after {
    background: var(--nav-burger-line-color-active);
  }
  .nav-burger__inner {
    position: relative;
    width: 44px;
    height: 44px;
  }
  /* ================
     Burger-Button – Responsive Breite
  ================ */
  @media (width < 106rem) {
    .nav-burger {
      padding-inline: 3rem; /* Button-Breite */
      background-color: var(--nav-mobile-btn-clr);
    }
    body.nav-is-mobile.navigation-open .nav-burger {
      background-color: var(--nav-mobile-background);
      padding-inline: 0; /* Button-Breite zurücksetzen */
    }
  }
  @media (width < 46rem) {
    .nav-burger {
      padding-inline: 1.5rem; /* Button-Breite für kleine Viewports */
    }
  }
  /* ================
     Mobile Navigation – Overlay
  ================ */
  body.nav-is-mobile .nav-wrapper {
    position: relative;
    z-index: 5;
  }
  body.nav-is-mobile .navigation-main {
    position: fixed;
    inset: 0;
    overflow: hidden auto;
    z-index: 6;
    padding: var(--nav-mobile-padding);
    background: var(--nav-mobile-background);
    color: var(--nav-mobile-color);
    line-height: 1.5;
    font-size: var(--nav-mobile-font-size);
    font-weight: var(--nav-mobile-font-weight);
    transition: opacity 0.15s ease-in-out, visibility 0.1s;
  }
  body.nav-is-mobile .navigation-main.is-active::before {
    display: block;
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--nav-mobile-backdrop-height);
    backdrop-filter: blur(1px);
    z-index: 1;
  }
  body.nav-is-mobile .navigation-main :is(a, strong) {
    display: inline-block;
    color: var(--nav-mobile-color);
    text-decoration: unset;
    padding: 12px 10px;
    width: calc(100% - 44px);
  }
  body.nav-is-mobile .navigation-main :is(a, strong):is(.active) {
    --nav-mobile-color: var(--nav-mobile-active-color);
  }
  body.nav-is-mobile .navigation-main .level_1 ul {
    display: none;
    flex-direction: column;
  }
  body.nav-is-mobile .navigation-main .level_2 li {
    padding: 0 0 0 20px;
  }
  body.nav-is-mobile .navigation-main ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  body.nav-is-mobile .navigation-main li {
    position: relative;
    padding: 0;
  }
  body.nav-is-mobile .navigation-main li:not(:last-child) {
    border-bottom: 1px solid var(--nav-mobile-separator-color);
  }
  body.nav-is-mobile .navigation-main li.submenu li {
    border: none;
  }
  body.nav-is-mobile .navigation-main li.submenu li:first-child {
    border-top: 1px solid var(--nav-mobile-separator-color);
  }
  body.nav-is-mobile .navigation-main li > .btn-toggle-submenu::after {
    transform: rotateX(180deg) rotateZ(-90deg);
  }
  body.nav-is-mobile .navigation-main li.active,
  body.nav-is-mobile .navigation-main li a.trail {
    background: var(--nav-mobile-active-background);
    color: var(--nav-mobile-active-color);
  }
  body.nav-is-mobile .navigation-main li.nav-expanded > ul {
    display: flex;
  }
  body.nav-is-mobile .navigation-main li.nav-expanded > .btn-toggle-submenu::after {
    transform: rotateX(0deg) rotateZ(-90deg);
  }
  /* ================
     Desktop Navigation – Dropdown-Submenüs
  ================ */
  body.nav-is-desktop .nav-wrapper {
    display: flex;
    align-items: center;
    overflow: visible;
  }
  body.nav-is-desktop .navigation-main :is(a, strong) {
    line-height: 1;
  }
  body.nav-is-desktop .navigation-main a {
    text-decoration: unset;
  }
  body.nav-is-desktop .navigation-main :is(a, strong) {
    display: block;
    position: relative;
    color: var(--nav-color);
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    text-transform: var(--nav-font-transform);
  }
  body.nav-is-desktop .navigation-main :is(a:hover, a:focus-visible, a.trail, strong) {
    color: var(--nav-active-color);
  }
  body.nav-is-desktop .navigation-main :is(a, strong)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: currentcolor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }
  body.nav-is-desktop .navigation-main :is(a:hover, a:focus-visible, a.trail, strong)::after {
    transform: scaleX(1);
  }
  body.nav-is-desktop .navigation-main ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.nav-is-desktop .navigation-main ul li.submenu {
    position: relative;
  }
  body.nav-is-desktop .navigation-main ul ul {
    position: absolute;
    top: 100%;
    min-width: 270px;
    background: var(--nav-submenu-background);
    box-shadow: 1px 2px 15px 8px rgba(0, 0, 0, 0.1);
    gap: 0;
    z-index: 999;
  }
  body.nav-is-desktop .navigation-main ul ul li {
    padding: 0;
  }
  body.nav-is-desktop .navigation-main ul ul li.submenu {
    padding-right: 40px;
  }
  body.nav-is-desktop .navigation-main ul ul li:not(:last-of-type) {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }
  body.nav-is-desktop .navigation-main ul ul .btn-toggle-submenu {
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 40px;
  }
  body.nav-is-desktop .navigation-main li.nav-expanded > ul {
    display: flex;
  }
  body.nav-is-desktop .navigation-main li.nav-expanded .level_2 ul {
    top: 0;
    left: 100%;
    min-width: 200px;
  }
  body.nav-is-desktop .navigation-main li.nav-expanded .level_2 ul.bounds-right {
    left: auto;
    right: 100%;
    /* Position an alle Unterebenen weitergeben */
  }
  body.nav-is-desktop .navigation-main li.nav-expanded .level_2 ul.bounds-right ul {
    left: auto;
    right: 100%;
  }
  body.nav-is-desktop .navigation-main {
    /* ================
       Level 1 – Haupt-Navigationsleiste
    ================ */
  }
  body.nav-is-desktop .navigation-main .level_1 {
    gap: 0 var(--navigation-gap-inline-default);
    justify-content: flex-end;
    align-items: center;
  }
  body.nav-is-desktop .navigation-main .level_1 ul {
    padding: 0;
    display: none;
    flex-direction: column;
    border-radius: 4px;
  }
  body.nav-is-desktop .navigation-main .level_1 ul :is(a, strong) {
    font-size: calc(var(--nav-font-size) / 1.2);
    line-height: 1.2;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
  }
  body.nav-is-desktop .navigation-main .level_1 > li {
    padding: 5px 0;
  }
  body.nav-is-desktop .navigation-main .level_1 > li > .btn-toggle-submenu::after {
    transform: rotateX(180deg) rotateZ(-90deg);
  }
  body.nav-is-desktop .navigation-main .level_1 > li.submenu {
    padding-right: 20px;
  }
  body.nav-is-desktop .navigation-main .level_1 > li.nav-expanded > .btn-toggle-submenu::after {
    transform: rotateX(0deg) rotateZ(-90deg);
  }
  body.nav-is-desktop .navigation-main {
    /* ================
       Level 2 – Dropdown mit Pfeil-Indikator
    ================ */
  }
  body.nav-is-desktop .navigation-main .level_2::before {
    display: block;
    content: "";
    position: absolute;
    bottom: 100%;
    left: 16px;
    margin-left: -8px;
    height: 0;
    width: 0;
    pointer-events: none;
    border: 8px solid rgba(255, 255, 255, 0);
    border-bottom-color: var(--nav-submenu-background);
  }
  body.nav-is-desktop .navigation-main .level_2.bounds-right {
    right: 0;
  }
  body.nav-is-desktop .navigation-main .level_2.bounds-right::before {
    left: auto;
    right: 16px;
  }
  body.nav-is-desktop .navigation-main .level_2:not(.bounds-left, .bounds-right) {
    transform: translateX(-50%);
    left: 50%;
  }
  body.nav-is-desktop .navigation-main .level_2:not(.bounds-left, .bounds-right)::before {
    left: 50%;
  }
  body.nav-is-desktop .navigation-main {
    /* set in _e-contao-navigation.scss */
    /* .skip-link { ... } */
  }
  body.nav-is-desktop .btn-toggle-submenu {
    width: 24px;
    height: 24px;
    padding: 0;
    top: 0;
    right: -6px;
  }
  body.nav-is-desktop .btn-toggle-submenu::after {
    background: var(--nav-icon) no-repeat center;
  }
  body.nav-is-desktop .nav-burger {
    display: none;
  }
  /* ================
     Windows High Contrast Mode – Burger-Linien als Border
  ================ */
  @media (forced-colors) {
    .nav-burger .icon-line,
    .nav-burger .icon-line::before,
    .nav-burger .icon-line::after {
      height: 0;
      border: 1px transparent solid;
    }
    .nav-burger.is-active .icon-line {
      border: 0 none;
    }
    .nav-burger.is-active .icon-line::after {
      bottom: -1px;
    }
    .nav-burger__inner {
      color: currentcolor;
    }
  }
  /* ================
     Kontakt-Block unterhalb der Navigation – Sichtbarkeitssteuerung
  ================ */
  /* Vollständig ausblenden wenn Navigation geschlossen und mobil */
  body:not(.navigation-open, .nav-is-desktop) .navigation-main {
    display: none;
  }
  body.nav-is-desktop .nav-mobile-content {
    display: none;
  }
  body.nav-is-mobile .navigation-main {
    /* Position fixed deaktivieren */
    position: static;
    inset: auto;
  }
  body.nav-is-mobile .nav-mobile-content {
    display: none; /* Standard: im Mobil-Modus versteckt */
  }
  body.nav-is-mobile .nav-mobile-content p,
  body.nav-is-mobile .nav-mobile-content a {
    color: var(--nav-mobile-color);
  }
  /* ================
     Mobile Navigation geöffnet – Nav-Wrapper als Fullscreen-Overlay
  ================ */
  body.nav-is-mobile.navigation-open .navigation-accessible {
    background-color: var(--nav-mobile-background);
  }
  body.nav-is-mobile.navigation-open .nav-wrapper {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  body.nav-is-mobile.navigation-open .navigation-main {
    flex: 0 0 auto;
  }
  body.nav-is-mobile.navigation-open .nav-mobile-content {
    display: block;
    flex-shrink: 0;
    padding: 2rem;
    background: var(--nav-mobile-background);
  }
  /* ================
  ================
     Mobile Navigation Button mit Text und Icon
     ================
  ================ */
  .nav-burger {
    height: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* ----------------------------------------------------------------
       Optische Zentrierung des Buttontextes zum Burger-Icon

       Problem: align-items: center zentriert die Text-BOX, nicht die
       Buchstaben. Die Box reserviert unten Platz für Unterlängen, die
       "Menü" nicht hat – der Text sitzt dadurch sichtbar zu hoch.

       Gemessen an Overpass-Regular.woff2 (unitsPerEm 2000, Ascent
       0.883em, Descent 0.383em, Cap-Height 0.7em), bei line-height: 1:

           Boxoberkante   0.00em
           Oberkante "M"  0.05em   ← sichtbare Tinte beginnt
           optische Mitte 0.40em   ← hier steht der Text
           Box-Mitte      0.50em   ← hierhin zentriert Flexbox
           Baseline       0.75em   ← sichtbare Tinte endet
           Boxunterkante  1.00em

       Differenz: 0.1em. Unten stehen zwei Lösungen dafür.
    ---------------------------------------------------------------- */
  }
  .nav-burger .nav-burger__text {
    line-height: 1;
    transform: translateY(0.1em);
    font-weight: var(--font-weight-regular);
    color: var(--nav-burger-line-color);
  }
  @supports (text-box: trim-both cap alphabetic) {
    .nav-burger .nav-burger__text {
      text-box: trim-both cap alphabetic;
      transform: none;
    }
  }
  body.navigation-open .nav-burger .nav-burger__text {
    display: none;
  }
  /* ================
     Horizontal zentrieren von mobile menu button, damit er mittig zum Logo steht
  ================ */
  body.nav-is-mobile .nav-wrapper {
    display: flex;
    align-items: center;
  }
  /* ================
     Center Navigation Items untereinander
  ================ */
  body.nav-is-mobile.navigation-open .nav-wrapper {
    align-items: center;
  }
  body.nav-is-mobile .navigation-main li:not(:last-child) {
    border-bottom: none;
  }
  body.nav-is-mobile .navigation-main :is(a, strong) {
    width: auto;
  }
  body.nav-is-mobile .navigation-main li {
    text-align: center;
  }
  @media (width < 106rem) {
    .nav-burger {
      padding-inline: 0; /* Button-Breite */
      background-color: transparent;
    }
  }
}
/* 50) components */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Header / Seitenheader
   Beschreibung: Grundlegende Layout-Styles für den Seitenheader: Logo-
     Positionierung, Flex-Anordnung der Navigation und responsive Anpassungen
     für den mobilen Breakpoint.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --header-padding-block-default, --logo-width-default,
     --elements-gap-inline
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header, .site-header__inner, .site-header__logo-link,
     .site-header__logo-image
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Site Header – Grundlegende Layout-Basis
  ================ */
  .site-header {
    background-color: transparent;
    padding-block: var(--header-padding-block-default);
  }
  /* ================
     Site Header Inner – Flex-Zeile: Logo links, Navigation rechts
  ================ */
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
  /* ================
     Logo-Link – schiebt alle nachfolgenden Elemente nach rechts
  ================ */
  .site-header__logo-link {
    margin-inline-end: auto;
  }
  /* ================
     Logo-Bild – feste Breite aus Token
  ================ */
  .site-header__logo-image {
    width: var(--logo-width-default);
  }
  /* ================
     Mobile Nav-Breakpoint – Header gestreckt, kein Zeilenumbruch
  ================ */
  @media (width < 106rem) {
    .site-header {
      border: none;
      padding-block: 0; /* mobiles Padding entfernen – Button soll Header-Höhe ausfüllen */
    }
    .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); /* Logo-Abstand als Margin, damit der mobile Button den Header ausfüllt */
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Header Top / Oberer Header-Bereich
   Beschreibung: Styles für den optionalen oberen Bereich des Site-Headers,
     der Barrierefreiheits-Buttons und weitere Navigation-Elemente aufnimmt.
     Wird beim Scrollen durch .is-scrolled auf .site-header ausgeblendet.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --elements-gap-block, --navigation-gap-inline-default,
     --navigation-gap-block-default, --background-color-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header__top, .site-header__inner
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Header Inner – vertikaler Innenabstand oben
  ================ */
  .site-header__inner {
    padding-block-start: calc(var(--elements-gap-block) / 2);
  }
  /* ================
     Header Top – Flex-Zeile mit rechtsbündigen Elementen
  ================ */
  .site-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* Zeilen-Gap, Spalten-Gap */
    padding-block: calc(var(--elements-gap-block) / 6);
  }
  /* ================
     Header Top vorhanden – oberes Padding des gesamten Headers entfernen
     :has() verhindert doppelten Abstand wenn .site-header__top existiert.
  ================ */
  .site-header:has(.site-header__top) {
    padding-block-start: 0;
  }
  /* ================
     Mobile – Top-Leiste zentrieren, Header-Hintergrund setzen
  ================ */
  @media (width < 75rem) {
    .site-header__top {
      justify-content: center;
    }
    /* Padding entfernen – verhindert, dass der Header-Hintergrund den mobilen Menü-Button überlagert */
    .site-header__inner {
      padding-block-start: 0;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Hero Section / Einstiegsbereich
   Beschreibung: Styles für den Hero-Bereich: Bild und Text überlagern sich
     im selben Grid-Bereich. Text liegt über dem Bild (z-index) und ist
     zentriert im verfügbaren Viewport positioniert.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --text-color-extra-light, --section-width-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .hero, .hero__media, .hero__inner
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <div class="hero">
 *   <div class="wrapper--width-full">
 *     <div class="hero__media"><figure><img …></figure></div>
 *     <div class="hero__inner">
 *       <div class="content-headline"><h1>Headline</h1></div>
 *     </div>
 *   </div>
 * </div>
 */
@layer components {
  /* ================
     Hero – Grid-Container für Bild/Text-Überlagerung
  ================ */
  .hero {
    padding-block-start: 0;
  }
  .hero .wrapper--width-full {
    position: relative;
    display: grid;
  }
  .hero p,
  .hero h1 {
    color: var(--text-color-extra-light);
  }
  /* ================
     Hero Media – Bild auf z-index: 0, füllt Grid-Zelle
  ================ */
  .hero__media {
    grid-area: 1/1;
    position: relative;
    z-index: 0;
  }
  /* Overlay auf dem Bild – aktuell deaktiviert */
  /* .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-color);
  pointer-events: none;
  } */
  /* ================
     Hero Inner – Text-Ebene über dem Bild (z-index: 1)
     Selbe Grid-Zelle wie das Bild; zentriert den Inhalt vertikal.
  ================ */
  .hero__inner {
    grid-area: 1/1; /* gleiche Grid-Zelle wie das Bild */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: var(--section-width-default);
    margin-inline: auto;
  }
  .hero__inner * {
    align-self: stretch;
  }
  /* ================
     Hero Headline – Breite auf 70% begrenzt für bessere Lesbarkeit
  ================ */
  .hero .content-headline {
    max-width: 70%;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Scroll to Top / Zurück-nach-oben-Button
   Beschreibung: Fixierter Button in der rechten unteren Ecke. Wird durch
     JavaScript (scrolltotop.js) über data-visible="true" eingeblendet,
     sobald der Nutzer weit genug gescrollt hat.
   Layer: components
   Abhängig von: s-tokens-semantic.scss (alle drei Tokens),
     scrolltotop.js (setzt data-visible),
     templates/svg_icon_standard_back_to_top.html5 (liefert das Pfeil-SVG mit
     .back-to-top__icon und .back-to-top__path),
     _b-icons.scss (dimensioniert .svg-icon), _u-a11y.scss (siehe Hinweis
     zum hidden-Attribut im ersten Abschnitt)
   Verwendete Tokens: --button-background-reduced, --button-color-reduced,
     --border-radius-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .back-to-top
     (Element .back-to-top__path wird hier eingefärbt; .back-to-top__icon
     kommt aus dem SVG-Template und wird über .svg-icon dimensioniert)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a href="#top" class="back-to-top" data-visible="false">
 *   <svg class="svg-icon back-to-top__icon" viewBox="0 0 17 24" aria-hidden="true" focusable="false">
 *     <path class="back-to-top__path" d="..."/>
 *   </svg>
 *   <span class="visually-hidden">Nach oben</span>
 * </a>
 *
 * Das Markup liegt nicht in templates/, sondern wird im Contao-Backend
 * gepflegt; nur das Pfeil-SVG kommt aus
 * templates/svg_icon_standard_back_to_top.html5.
 *
 * Zustandssteuerung (kein Modifier, sondern ein data-Attribut, weil
 * scrolltotop.js es per setAttribute schaltet):
 * data-visible="false" / fehlend → ausgeblendet (Grundzustand)
 * data-visible="true"            → eingeblendet
 *
 * scrolltotop.js legt dazu ein 1x1px-Sentinel als erstes Kind in <body> und
 * beobachtet es per IntersectionObserver (rootMargin 0 0 -80% 0). Ohne
 * IntersectionObserver-Support greift ein Scroll-Fallback ab 200px.
 */
@layer components {
  /* ================
     Back to Top – Fixierter Button (initial unsichtbar)
     opacity: 0 + pointer-events: none verhindert Interaktion im
     ausgeblendeten Zustand; translateY erzeugt eine sanfte Einblend-Animation.
     visibility: hidden nimmt den Link zusätzlich aus Tab-Reihenfolge und
     A11y-Tree – opacity allein ließe ihn fokussierbar. Bewusst nicht über
     das hidden-Attribut gelöst: [hidden] { display: none } aus
     _u-a11y.scss liegt im Layer utilities und würde display: inline-flex
     aus diesem Block (Layer components) überschreiben.
  ================ */
  .back-to-top {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* min-width: 44px; */
    /* min-height: 44px; */
    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);
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  }
  .back-to-top .back-to-top__path {
    fill: var(--button-color-reduced, #000);
  }
  /* ================
     Back to Top – Sichtbarer Zustand (gesetzt durch scrolltotop.js)
     Ohne Delay auf visibility, damit der Button sofort da ist und die
     Opacity darüber einblendet. Die Attribut-Selektor-Spezifität liegt
     über der des Grundzustands, ein Modifier-Reset entfällt daher.
  ================ */
  .back-to-top[data-visible=true] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.2s, transform 0.2s, visibility 0s;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: A11y-Buttons / Zugänglichkeits-Steuerelemente
   Beschreibung: Styles für die Barrierefreiheits-Buttons in der Header-Top-
     Leiste (Schriftgröße, Kontrast, Bewegungsreduzierung). Blendet auf
     kleineren Viewports den sichtbaren Text aus und zeigt nur das Icon.
     Padding und Schriftgröße werden nicht direkt gesetzt, sondern über die
     Komponenten-API der Top-Bar (--top-bar-item-*) auf .a11y umkonfiguriert;
     die Buttons liegen im DOM innerhalb von .top-bar-links.
   Layer: components
   Abhängig von: s-tokens-semantic.scss, _c-text-icon.scss, _c-top-bar.scss
   Verwendete Tokens: --navigation-gap-inline-default, --navigation-gap-block-default,
     --button-padding-inline-sm, --button-padding-block-sm,
     --navigation-color-default, --navigation-color-default-hover,
     --font-size-xs, --font-size-sm, --font-weight-light,
     --icon-padding-inline-regular, --icon-size-regular
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens:
     --icon-with-text-gap -> _c-text-icon.scss,
     --icon-with-text-inline-size -> _c-text-icon.scss,
     --icon-with-text-block-size -> _c-text-icon.scss,
     --top-bar-item-padding-inline-start -> _c-top-bar.scss,
     --top-bar-item-padding-inline-end -> _c-top-bar.scss,
     --top-bar-item-padding-block -> _c-top-bar.scss,
     --top-bar-item-font-size -> _c-top-bar.scss
   BEM-Blöcke: .a11y, .button--a11y
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     A11y-Gruppe – Flex-Container für alle Barrierefreiheits-Buttons
  ================ */
  .a11y {
    --top-bar-item-padding-inline-start: var(--button-padding-inline-sm);
    --top-bar-item-padding-inline-end: var(--button-padding-inline-sm);
    --top-bar-item-padding-block: var(--button-padding-block-sm);
    --top-bar-item-font-size: var(--font-size-xs);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* Zeilen-Gap, Spalten-Gap */
  }
  /* ================
     A11y-Button – Einzelner Steuerungsbutton mit Icon und Text
  ================ */
  .button--a11y {
    --icon-with-text-gap: var(--icon-padding-inline-regular);
    color: var(--navigation-color-default);
    background: none;
    border: none;
  }
  .button--a11y:last-child {
    --top-bar-item-padding-inline-end: 0;
  }
  .button--a11y .text-icon__text {
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
  }
  .button--a11y .text-icon__icon {
    --icon-with-text-inline-size: var(--icon-size-regular);
    --icon-with-text-block-size: var(--icon-size-regular);
  }
  /* ================
     A11y-Button – Aktiver Zustand (aria-pressed)
  ================ */
  .button--a11y[aria-pressed=true] {
    color: var(--navigation-color-default-hover);
  }
  /* ================
     A11y-Button – Hover (nur wenn nicht deaktiviert)
  ================ */
  .button--a11y:not(.is-disabled):hover {
    color: var(--navigation-color-default-hover);
  }
  /* ================
     Responsive – Text visuell ausblenden unterhalb Desktop-Breakpoint
     Visuell versteckt via Clip-Methode; bleibt für Screen Reader zugänglich.
  ================ */
  @media (width < 75rem) {
    .a11y .text-icon__text {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    .a11y {
      --top-bar-item-font-size: var(--font-size-sm);
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Text-Icon / Icon-Text-Kombination
   Beschreibung: Styles und Custom Property-Definitionen für die wiederverwendbare
     Text-Icon-Komponente. Kombiniert Text und SVG-Icon in einem Flex-Container.
     Enthält auch die Link-Variante mit animiertem Pfeil-Icon sowie eine
     hervorgehobene Variante für „Mehr lesen"-Links.
   Layer: components
   Abhängig von: s-tokens-semantic.scss,
     a11y-reduced-motion.js (setzt .is-reduce-motion auf <html>)
   Verwendete Tokens: --icon-padding-inline-regular, --link-color-default,
     --link-color-default-hover
     Zusätzlich werden alle sechs hier definierten Tokens wieder ausgelesen:
     --icon-with-text-gap, --icon-with-text-inline-size,
     --icon-with-text-block-size, --link-text-icon-color,
     --link-text-icon-color-hover, --link-text-icon-icon-icon
   Projekt-Tokens: none
   Definierte Tokens: --icon-with-text-gap, --icon-with-text-inline-size,
     --icon-with-text-block-size, --link-text-icon-color,
     --link-text-icon-color-hover, --link-text-icon-icon-icon
     Diese Datei ist die Ursprungsdefinition; die Tokens sind die
     Konfigurationsschnittstelle der Komponente und werden auswärts
     überschrieben:
       --icon-with-text-gap -> _c-buttons-a11y.scss:59,
         _c-rsce-button--vars.scss:52, _c-rsce-button-arrow-left-right.scss:74,
         _c-rsce-icon-text--vars.scss:42
       --icon-with-text-inline-size, --icon-with-text-block-size
         -> _c-buttons-a11y.scss:82-83
       --link-text-icon-color, --link-text-icon-color-hover,
         --link-text-icon-icon-icon -> _p-background-inverted.scss:53-55
     Die ersten beiden Gruppen liegen im selben Layer (components) – dort
     entscheiden Spezifität und Quellreihenfolge, nicht die Layer-Ordnung.
     Der Dreier aus _p-background-inverted.scss liegt im Layer projects und
     gewinnt damit in jedem Fall.
   Überschriebene Tokens: none
   BEM-Blöcke: .text-icon, .text-icon__icon, .text-icon__text,
     .text-icon--link, .text-icon--link-highlighted
     Ebenfalls gestylt, aber ohne Markup im Projekt: .text-icon__icon-bg,
     .text-icon__icon-arrow (siehe Hinweis im Markup-Beispiel).
     Kontext-/Zustandsklassen: .active und strong.active (aktiver
     Navigationseintrag), .is-reduce-motion (JS-Flag auf <html>).
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a class="text-icon text-icon--link" href="/seite">
 *   <span class="text-icon__text">Mehr erfahren</span>
 *   <span class="text-icon__icon svg-icon">
 *     <svg>…</svg>
 *   </span>
 * </a>
 *
 * Verwendet u.a. in news_latest.html.twig, mod_newsreader.html.twig und
 * rsce_block_link_list.html.twig – dort jeweils als
 * .text-icon.text-icon--link(.text-icon--link-highlighted).
 *
 * Modifier:
 * .text-icon--link             → Link-Variante mit Farb- und Bewegungs-Animation
 * .text-icon--link-highlighted → Großgeschriebene Variante mit unterer Linie (News)
 *
 * Vorgesehene, aber im Projekt nicht gebaute Variante: Innerhalb von
 * .text-icon--link werden .text-icon__icon-bg (Kreisfläche) und
 * .text-icon__icon-arrow (Pfeil-Path) gestylt. Ein solches SVG existiert
 * derzeit in keinem Template und in keinem Datenbank-Inhalt – die beiden
 * Regeln und das Token --link-text-icon-icon-icon laufen deshalb ins Leere:
 *
 * <a class="text-icon text-icon--link" href="/seite">
 *   <span class="text-icon__text">Mehr erfahren</span>
 *   <span class="text-icon__icon svg-icon">
 *     <svg>
 *       <circle class="text-icon__icon-bg" … />
 *       <path class="text-icon__icon-arrow" … />
 *     </svg>
 *   </span>
 * </a>
 */
@layer components {
  /* ================
     Text-Icon – Basis-Flex-Container
  ================ */
  .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 – Quadratisches Icon-Element
     1em als Standard skaliert mit der umgebenden Schriftgröße.
     transform: translateY(-2px) gleicht optische Verschiebung aus.
  ================ */
  .text-icon__icon {
    --icon-with-text-inline-size: 1em; /* skaliert mit der Schriftgröße */
    --icon-with-text-block-size: 1em; /* skaliert mit der Schriftgröße */
    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;
    transform: translateY(-2px);
  }
  /* ================
     Text-Icon Icon – SVG erbt Textfarbe über currentColor
  ================ */
  .text-icon__icon.svg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor; /* SVG erbt die Textfarbe über currentColor */
  }
  /* ================
     Text-Icon Text – Zeilenumbruch und Überlauf
  ================ */
  .text-icon__text {
    line-height: 1; /* vertikale Zentrierung des Textes */
    word-break: break-word; /* lange Wörter umbrechen – verhindert unterschiedliche Bildhöhen im Grid */
    hyphens: none; /* keine Worttrennung in Buttons */
  }
  /* ================
     Text-Icon Link – Variante mit Farb- und Icon-Animation
     Farben und Icon-Farbe über überschreibbare Custom Properties konfigurierbar.
  ================ */
  .text-icon--link {
    /* überschreibbare Design-Tokens – Gegenstück in
       _p-background-inverted.scss:53-55 für dunkle Flächen */
    --link-text-icon-color: var(--link-color-default); /* Text + SVG via currentColor */
    --link-text-icon-color-hover: var(--link-color-default-hover); /* Text + SVG via currentColor */
    --link-text-icon-icon-icon: #fff; /* Pfeilfarbe (Stroke von .text-icon__icon-arrow) */
    color: var(--link-text-icon-color);
    line-height: 1; /* vertikale Zentrierung */
    transition: color 0.3s ease;
  }
  .text-icon--link .text-icon__icon {
    display: inline-grid;
    transition: transform 0.3s ease;
  }
  .text-icon--link {
    /* Kreis-Hintergrund des Pfeil-Icons – aktuell ohne Markup im Projekt,
       die fill-Transition greift mangels fill-Wechsel ins Leere */
  }
  .text-icon--link .text-icon__icon-bg {
    transition: fill 0.3s ease;
  }
  .text-icon--link {
    /* Pfeil im Kreis als Path mit Stroke – aktuell ohne Markup im Projekt */
  }
  .text-icon--link .text-icon__icon-arrow {
    stroke: var(--link-text-icon-icon-icon);
  }
  .text-icon--link:hover, .text-icon--link:active {
    color: var(--link-text-icon-color-hover);
  }
  .text-icon--link:hover .text-icon__icon, .text-icon--link:active .text-icon__icon {
    transform: translateX(4px) translateY(-2px);
    transition: transform 0.3s ease;
  }
  /* ================
     Text-Icon Link Highlighted – Hervorgehobene Variante (z.B. News-Weiterlesen)
  ================ */
  .text-icon--link-highlighted {
    text-transform: uppercase;
    border-block-end: solid 1px var(--link-color-default-hover);
    --link-text-icon-color: var(--link-color-default);
    --link-text-icon-color-hover: var(--link-color-default-hover);
  }
  /* ================
     Aktiver Navigationseintrag – Icon-Position angleichen
     Der aktive Eintrag zeigt dauerhaft dieselbe Verschiebung wie der
     Hover-Zustand von .text-icon--link (Contao setzt .active bzw. wickelt
     den Eintrag in <strong class="active">).
  ================ */
  .active .text-icon .text-icon__icon {
    transform: translateX(4px) translateY(-2px);
    transition: transform 0.3s ease;
  }
  /* Deaktiviert: --link-text-icon-icon-background-hover ist im Projekt
     nirgends definiert, die Regel wäre wirkungslos. Zum Aktivieren zuerst
     den Token in _s-tokens-semantic.scss oder oben in .text-icon--link
     anlegen – und das zugehörige SVG-Markup ergänzen. */
  /* .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 – Reduzierte Bewegung
     Zwei Wege zum selben Ziel: die Media Query folgt der Browser-/OS-
     Einstellung, der .is-reduce-motion-Block darunter dem manuellen
     Umschalter der Website. Beide brauchen !important, weil die
     transition-Deklarationen in .text-icon--link im selben Layer und mit
     gleicher bzw. höherer Spezifität stehen.
  ================ */
  @media (prefers-reduced-motion: reduce) {
    .text-icon,
    .text-icon__icon,
    .text-icon__icon-bg,
    .text-icon__icon-arrow {
      transition: none !important;
    }
  }
  /* Manuell gesetztes Flag via JavaScript (a11y-reduced-motion.js:20/65
     togglet die Klasse auf <html>, Zustand liegt im localStorage) */
  .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;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Footer / Seiten-Fußbereich
   Beschreibung: Styles für den Seitenabschluss mit Footer-Hauptbereich und
     Footer-Bottom-Leiste. Fluid Typography für die Footer-Überschriften; Subgrid
     richtet mehrspaltige Footer-Spalten zeilenübergreifend aus; die drei Spalten
     werden asymmetrisch nach Inhaltsbreite verteilt (auto 1fr auto) und brechen
     über zwei Stufen auf 2 bzw. 1 Spalte um; die Bottom-Leiste stapelt unterhalb
     des Desktop-Breakpoints zentriert.
     Flächenfarbe und invertierte Vordergrund-Rollen kommen NICHT aus dieser Datei,
     sondern über .background-color--dark im Markup (siehe _l-background.scss,
     _l-background-inverted.scss).
     Schriftart, Schriftgewicht und Farbe der Footer-h2 sowie die vertikalen
     Innenabstände liegen in _p-footer.scss (Layer projects).
   Layer: components
   Abhängig von: s-tokens-semantic.scss
     Sass-Breakpoints: $breakpoint-desktop, $breakpoint-mobile
     Fremde Blöcke: .equal-columns (_l-grid.scss), .flex-group (_l-flex.scss)
   Verwendete Tokens: --font-size-heading-lg-min, --font-size-heading-lg-max,
     --font-size-heading-lg-min-no-unit, --font-size-heading-lg-max-no-unit,
     --fluid-breakpoint-max-no-unit, --fluid-breakpoint-min-no-unit,
     --fluid-breakpoint-min, --font-weight-bold
     Zusätzlich werden die sechs unten überschriebenen Rechen-Variablen wieder
     ausgelesen: --min-font-size, --max-font-size, --min-font-size-no-unit,
     --max-font-size-no-unit, --slope, --intercept
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens:
     --min-font-size -> _b-typography.scss,
     --max-font-size -> _b-typography.scss,
     --min-font-size-no-unit -> _b-typography.scss,
     --max-font-size-no-unit -> _b-typography.scss,
     --slope -> _b-typography.scss,
     --intercept -> _b-typography.scss
     Keine Wertkorrektur, sondern eine zweite Instanz derselben Fluid-Rechnung:
     Der Rechenweg aus _b-typography.scss wird mit den lg-Grenzwerten der
     Footer-h2 wiederholt.
   BEM-Blöcke: .site-footer, .site-footer__bottom
     Dazu der Modifier .equal-columns--columns-3-space-between: Er gehört zum
     fremden Block .equal-columns, ist aber ausschließlich hier definiert und
     existiert in _l-grid.scss nicht.
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <footer class="site-footer">
 *   <section class="site-footer__top">
 *     <div class="wrapper">
 *       <div class="content-collection background-color--dark">
 *         <div class="equal-columns equal-columns--columns-3-space-between">
 *           <div class="site-footer__column flow">
 *             <h2>Kontakt</h2>
 *             <p>…</p>
 *           </div>
 *           <div class="site-footer__column flow">…</div>
 *           <div class="site-footer__column flow">…</div>
 *         </div>
 *       </div>
 *     </div>
 *   </section>
 *   <section class="site-footer__bottom">
 *     <div class="wrapper">
 *       <div class="flex-group flex-group--justify-space-between">…</div>
 *     </div>
 *   </section>
 * </footer>
 *
 * Hinweis zum Markup: .site-footer kommt aus fe_page.html.twig, alles darunter
 * (__top / __bottom, .equal-columns, .flow) wird redaktionell als CSS-Klasse an
 * den Footer-Abschnitten im Contao-Backend gesetzt. Für den oberen Abschnitt
 * existieren zwei Namen im Projekt: .site-footer__top (verwendet von
 * _p-footer.scss und _c-section-background-image-top-bottom.scss) und das
 * ältere .site-footer__inner (nur noch in der :not()-Ausnahme in _l-layout.scss).
 * Beide sind von den Regeln dieser Datei unabhängig – sie greifen über
 * .site-footer bzw. .site-footer__bottom.
 *
 * Hinweis zur Spaltenanzahl: Die Spaltenregeln unten sind auf genau drei
 * Kindelemente ausgelegt und laufen über drei Stufen:
 *   ab $breakpoint-desktop   → auto 1fr auto (3 Spalten, nach Inhaltsbreite)
 *   < $breakpoint-desktop    → 1fr 1fr (Spalte 3 als eigene Zeile darunter)
 *   < $breakpoint-mobile     → 1fr (alles einspaltig gestapelt)
 * Bei abweichender Kindanzahl greifen die nth-child-Regeln ins Leere bzw. falsch.
 * Ein Modifier aus _l-grid.scss
 * (.equal-columns--columns-*) ist nicht nötig – dessen Spaltendefinition liegt
 * im Layer layout und wird von dieser Datei (Layer components) überschrieben.
 * .equal-columns--columns-3-space-between im Beispiel unten ist kein Modifier
 * aus _l-grid.scss, sondern wird ausschließlich hier definiert; er dient als
 * Aufhänger für die Spaltenregeln und trägt selbst keine Grid-Definition aus
 * dem Layout-Layer bei.
 * Ausnahme: .equal-columns--three-columns-middle-wide aus _p-grid.scss liegt im
 * Layer projects und würde die Spaltenverteilung hier aushebeln.
 *
 * Hinweis zum dunklen Hintergrund:
 * .background-color--dark muss im Markup gesetzt sein – die Klasse bringt
 * Flächenfarbe UND die invertierten Vordergrund-Rollen mit. Ein Bereich mit
 * dunklem Hintergrund, aber ohne diese Klasse, behält die nicht-invertierten
 * Textfarben.
 */
@layer components {
  /* ================
     Site Footer – Überschriften mit Fluid Typography
     Setzt die lokalen Berechnungsvariablen für die Fluid-Typography-Formel;
     überschreibt die aus _b-typography.scss stammenden Werte für h2 im Footer.
     Die Formel selbst ist identisch – nur die vier Grenzwert-Parameter
     darüber wechseln auf die lg-Stufe. Herleitung von slope/intercept
     siehe Kopfkommentar von _b-typography.scss.
  ================ */
  .site-footer h2 {
    --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);
    --slope: calc(// Überschreibt --slope aus _b-typography.scss für die Footer-h2-Berechnung
            (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(// Überschreibt --intercept aus _b-typography.scss für die Footer-h2-Berechnung
            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)
    );
    font-size: clamp(var(--min-font-size), var(--intercept) + var(--slope) * 100vw, var(--max-font-size));
    font-weight: var(--font-weight-bold);
  }
  /* ================
     Footer Bottom – Mobile: zentrierte Stapelansicht
     Die horizontale .flex-group (Copyright + Footer-Navigation) bricht unterhalb
     des Desktop-Breakpoints auf eine zentrierte Spalte um.
  ================ */
  @media (width < 75rem) {
    .site-footer__bottom .flex-group {
      flex-direction: column;
      align-items: center;
    }
    .site-footer__bottom p {
      text-align: center;
    }
  }
  /* ================
     Footer Spalten – Subgrid für zeilenübergreifende Ausrichtung
     grid-template-rows: auto 1fr definiert 2 Zeilen (z.B. Überschrift + Inhalt).
     Subgrid auf den Kindelementen sorgt dafür, dass alle Spalten auf gleicher
     Zeilenhöhe beginnen.
     Die Spaltenachse desselben Selektors wird im folgenden Block definiert.
  ================ */
  .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; /* Gap aus equal-columns zurückgesetzt; Abstände über .flow-Klasse */
  }
  /* ================
     Footer Spalten – Optische Aufteilung nach Inhaltsbreite
     Gegenstück zum Subgrid-Block darüber: dort die Zeilen-, hier die
     Spaltenachse. Statt gleich breiter Spalten bekommen die äußeren Spalten
     nur ihre Inhaltsbreite (auto), die mittlere den verbleibenden Rest (1fr).
     Dadurch liegt die erste Spalte am linken, die dritte am rechten Rand,
     ohne dass die Spaltenbreiten an den Textmengen hängen.
     Überschreibt die Spaltendefinition aus _l-grid.scss – nicht über
     Spezifität, sondern über die Layer-Reihenfolge (layout vor components).
     Das gilt auch gegenüber .equal-columns--three-columns-middle-wide,
     soweit es aus _l-grid.scss kommt (Zeilen 130/264/296, Layer layout).
     NICHT dagegen gegenüber der gleichnamigen Regel in _p-grid.scss
     (Zeilen 56/76/91): Die liegt im Layer projects und damit hinter
     components – sie würde die Spaltenverteilung hier aushebeln. Der
     Modifier darf im Footer-Markup deshalb nicht gesetzt werden.
  ================ */
  .site-footer .equal-columns--columns-3-space-between {
    grid-template-columns: auto 1fr auto;
  }
  .site-footer .equal-columns--columns-3-space-between > *:nth-child(2) {
    justify-self: center;
    text-align: left;
  }
  .site-footer .equal-columns--columns-3-space-between > *:nth-child(3) {
    justify-self: end;
    text-align: left;
  }
  /* ================
     Footer Spalten – Umbruchstufe 1: zwei Spalten
     Unterhalb des Desktop-Breakpoints reicht die Breite für die asymmetrische
     Dreiteilung nicht mehr. Spalte 1 und 2 teilen sich die erste Zeile, der
     dritte Block rutscht darunter über die volle Breite.
     Das justify-self: center aus dem Block darüber bleibt für nth-child(2)
     aktiv – bei 1fr füllt der Block die Zelle jedoch ohnehin aus.
  ================ */
  @media (width < 75rem) {
    .site-footer .equal-columns--columns-3-space-between {
      grid-template-columns: 1fr 1fr;
    }
    .site-footer .equal-columns--columns-3-space-between > *:nth-child(3) {
      grid-column: 1/-1;
      justify-self: start;
    }
  }
  /* ================
     Footer Spalten – Umbruchstufe 2: einspaltig
     Unterhalb des Mobile-Breakpoints stapeln alle Spalten untereinander.
     Der Zeilenabstand bleibt der Row-Gap aus _l-grid.scss
     (--equal-columns-gap-rows) – dieser Block ändert ihn nicht. Nicht zu
     verwechseln mit dem gap: 0 im Subgrid-Block, das auf den Kindelementen
     sitzt und hier ebenfalls unberührt bleibt.
  ================ */
  @media (width < 26.25rem) {
    .site-footer .equal-columns--columns-3-space-between {
      grid-template-columns: 1fr;
    }
    .site-footer .equal-columns--columns-3-space-between > *:nth-child(2), .site-footer .equal-columns--columns-3-space-between > *:nth-child(3) {
      justify-self: stretch;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Image Hover / Bild-Hover-Effekt
   Beschreibung: Wrapper-Klasse für Bilder mit Hover-Effekt: dunkles Overlay,
     Lupe als SVG-Icon (zentriert) und leichter Zoom-Effekt auf dem Bild.
     Enthält eine Accessibility-Variante für Nutzer mit reduzierter Bewegung.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --border-radius-default, --icon-size-lg
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .image--hover
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a href="/seite" class="image--hover">
 *   <img src="bild.jpg" alt="…">
 * </a>
 *
 * Modifier: none – Klasse direkt auf dem verlinkten Element setzen.
 * Kombinierbar mit: .image--hover als Wrapper für figure-Elemente.
 */
@layer components {
  /* ================
     Image Hover – Basis-Container
  ================ */
  .image--hover {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: var(--border-radius-default); /* Abgerundete Ecken nur wenn das Bild selbst abgerundet dargestellt wird */
  }
  /* ================
     Bild – Zoom-Effekt on Hover
  ================ */
  .image--hover img {
    display: block;
    transition: transform 0.6s ease;
  }
  /* ================
     Pseudo-Elemente – Overlay (::before) und Lupe (::after)
  ================ */
  /* Dunkles Overlay über dem Bild */
  .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; /* Link weiterhin klickbar halten */
    z-index: 1;
  }
  /* Lupe als inline SVG-Daten-URI (weiß, zentriert) */
  .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 – Overlay einblenden, Lupe zoomen, Bild leicht vergrößern
  ================ */
  .image--hover:hover::before {
    opacity: 1;
  }
  .image--hover:hover::after {
    opacity: 1;
    transform: scale(1);
  }
  .image--hover:hover img {
    transform: scale(1.05);
  }
  /* ================
     Accessible – Reduzierte Bewegung
  ================ */
  @media (prefers-reduced-motion: reduce) {
    .image--hover img,
    .image--hover::before,
    .image--hover::after {
      transition: none;
      transform: none;
    }
  }
  /* Manuell gesetztes Flag via JavaScript (a11y-reduced-motion.js) */
  .is-reduce-motion .image--hover img,
  .is-reduce-motion .image--hover::before,
  .is-reduce-motion .image--hover::after {
    transition: none;
    transform: none;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Top Bar / Obere Navigationsleiste
   Beschreibung: Styles für die Top-Bar-Linkgruppe im Header-Bereich. Zeigt
     Links mit Text und Icon; blendet den Text unterhalb des Desktop-Breakpoints
     visuell aus (bleibt für Screen Reader erhalten). Definiert außerdem die
     Komponenten-API der Leiste: Untergruppen wie .a11y setzen die
     --top-bar-item-*-Tokens auf ihrem eigenen Container neu, ohne die
     Selektoren dieser Datei überschreiben zu müssen.
   Layer: components
   Abhängig von: s-tokens-semantic.scss, _c-text-icon.scss
   Verwendete Tokens: --navigation-gap-inline-default, --navigation-gap-block-default,
     --button-padding-inline, --button-padding-block,
     --font-size-sm, --font-size-regular, --font-weight-light
   Projekt-Tokens: none
   Definierte Tokens: --top-bar-item-padding-inline-start,
     --top-bar-item-padding-inline-end, --top-bar-item-padding-block,
     --top-bar-item-font-size
   Überschriebene Tokens: none
     (die hier definierten Tokens werden bewusst in _c-buttons-a11y.scss
     überschrieben – siehe dortigen Header)
   BEM-Blöcke: .top-bar-links
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Top Bar Links – Flex-Gruppe rechtsbündig
     Setzt zugleich die Komponenten-API der Leiste: Die Item-Werte stehen als
     Custom Properties auf dem Container und werden von .top-bar-links .text-icon
     nur noch gelesen. Untergruppen (z. B. .a11y) überschreiben sie auf ihrem
     eigenen Container – eine eigene bzw. näher gesetzte Deklaration sticht den
     geerbten Wert, unabhängig von Spezifität und Quellreihenfolge.
  ================ */
  .top-bar-links {
    --top-bar-item-padding-inline-start: var(--button-padding-inline);
    --top-bar-item-padding-inline-end: var(--button-padding-inline);
    --top-bar-item-padding-block: var(--button-padding-block);
    --top-bar-item-font-size: var(--font-size-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--navigation-gap-inline-default) var(--navigation-gap-block-default); /* Zeilen-Gap, Spalten-Gap */
  }
  /* ================
     Top Bar Links – Text-Icon-Elemente mit Padding und Schriftgewicht
     Liest ausschließlich die API-Tokens von oben – hier keine festen Werte
     eintragen, sonst greifen die Overrides der Untergruppen nicht mehr.
  ================ */
  .top-bar-links .text-icon {
    padding-inline: var(--top-bar-item-padding-inline-start) var(--top-bar-item-padding-inline-end);
    padding-block: var(--top-bar-item-padding-block);
    font-size: var(--top-bar-item-font-size);
  }
  .top-bar-links .text-icon .text-icon__text {
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
  }
  /* ================
     Unterhalb Desktop – Text visuell ausblenden, nur Icon anzeigen
     Visuell versteckt via Clip-Methode; bleibt für Screen Reader zugänglich.
  ================ */
  @media (width < 75rem) {
    .top-bar-links .text-icon .text-icon__text {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    .top-bar-links {
      --top-bar-item-font-size: var(--font-size-regular);
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Header / Seitenheader
   Beschreibung: Grundlegende Layout-Styles für den Seitenheader: Logo-
     Positionierung, Flex-Anordnung der Navigation und responsive Anpassungen
     für den mobilen Breakpoint.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --header-padding-block-default, --logo-width-default,
     --elements-gap-inline
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header, .site-header__inner, .site-header__logo-link,
     .site-header__logo-image
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer components {
  @media (width < 75rem) {
    .site-header__inner {
      flex-direction: column;
      align-items: center;
    }
    .site-header__logo-link {
      margin-inline-end: 0;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Section – Wellen-Abschluss (Hintergrundbild oben/unten)
   Beschreibung: Setzt dekorative Wellengrafiken als Abschlusskanten an die
     Flächen mit dunklem Hintergrund: an die Unterkante von Site-Header und
     dunklen Sections (bg-wave-top.png), an die Oberkante von dunklen Sections
     und Site-Footer (bg-wave-bottom.png). Die Grafiken werden über ::before /
     ::after als horizontal gekachelte Hintergrundbilder eingeblendet und
     kaschieren die geraden Kanten. Zusätzlich wird der Innenabstand der
     betroffenen Flächen um die Wellenhöhe erhöht, damit kein Inhalt unter der
     Welle liegt.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --section-padding-block, --header-padding-block-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header, .site-footer, .site-footer__top,
     .background-color--dark (Utility aus _l-background.scss)
   RSCE-Templates: none
   Assets: ../images/bg-wave-top.png, ../images/bg-wave-bottom.png
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <header class="site-header">…</header>
 * <main>
 *   <section class="background-color--dark">…</section>
 * </main>
 * <footer class="site-footer">
 *   <section class="site-footer__top">…</section>
 * </footer>
 *
 * Die Wellen tauchen im Markup nicht auf – sie entstehen allein über die
 * ::before- / ::after-Pseudo-Elemente dieser Datei.
 *
 * Zuordnung der Kanten:
 * .site-header::after                       → bg-wave-top.png    (Unterkante)
 * section.background-color--dark::after     → bg-wave-top.png    (Unterkante)
 * section.background-color--dark::before    → bg-wave-bottom.png (Oberkante)
 * .site-footer::before                      → bg-wave-bottom.png (Oberkante)
 *
 * Die Hero-Section ist über :not(.hero) ausgenommen – sie bringt ihre eigene
 * Kante mit. Auf Seiten mit Header über dem Hero-Bild blendet
 * _c-header-over-hero-image.scss zusätzlich .site-header::after aus.
 */
@layer components {
  /* ================
     Positionierungs-Kontext für die Wellen
     Die Wellen sind absolut positionierte Pseudo-Elemente – ihre Träger
     brauchen deshalb einen eigenen Positionierungs-Kontext, sonst würden sie
     sich am nächsthöheren positionierten Vorfahren ausrichten.
  ================ */
  header,
  .site-footer,
  section {
    position: relative;
  }
  /* ================
     Innenabstände – Platz für die Wellen schaffen
     Die 72px entsprechen der Höhe der Wellengrafiken. Ohne diesen Zuschlag
     würde Inhalt unter der Welle liegen.
  ================ */
  main section.background-color--dark:not(.hero) {
    padding-block: calc(var(--section-padding-block) + 72px);
  }
  .site-footer__top {
    padding-block-start: calc(var(--section-padding-block) + 72px);
  }
  /* ================
     Site Header – Welle an der Unterkante
     Auf Seiten mit Header über dem Hero-Bild wird dieses Pseudo-Element in
     _c-header-over-hero-image.scss per display: none abgeschaltet.
  ================ */
  .site-header {
    padding-block-end: calc(var(--header-padding-block-default) + 72px);
  }
  .site-header::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 72px;
    width: 100%;
    background: transparent url("../images/bg-wave-top.png") repeat-x center 0;
  }
  /* ================
     Dunkle Section – Welle an der Unterkante
     Die Hero-Section ist ausgenommen, sie bringt ihre eigene Kante mit.
  ================ */
  main section.background-color--dark:not(.hero)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 72px;
    width: 100%;
    background: transparent url("../images/bg-wave-top.png") repeat-x center 0;
  }
  /* ================
     Dunkle Section – Welle an der Oberkante
     Gegenstück zu ::after: bg-wave-bottom.png ist die gespiegelte Kante.
  ================ */
  main section.background-color--dark:not(.hero)::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    height: 72px;
    width: 100%;
    background: transparent url("../images/bg-wave-bottom.png") repeat-x center 0;
  }
  /* ================
     Site Footer – Welle an der Oberkante
  ================ */
  .site-footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    height: 72px;
    width: 100%;
    background: transparent url("../images/bg-wave-bottom.png") repeat-x center 0;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Header mit Hintergrundbild
   Beschreibung: Hinterlegt den Seitenheader mit einem Hintergrundbild und
     ersetzt damit die transparente Fläche aus _c-header.scss. Ergänzt dazu den
     oberen Innenabstand der Header-Zeile, damit sie nicht bündig am Bildrand
     sitzt. Layout, Logo-Positionierung und das mobile Verhalten bleiben in
     _c-header.scss.
   Layer: components
   Abhängig von: _c-header.scss
   Verwendete Tokens: --elements-gap-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header, .site-header__inner
   RSCE-Templates: none
   Assets: ../images/bg-header.jpg
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <header class="site-header">…</header>
 *
 * Geltungsbereich: Die Regel ist an keine zusätzliche Klasse gebunden und
 * greift damit für jeden .site-header – das Hintergrundbild ist der Standard,
 * kein Opt-in.
 *
 * Ladereihenfolge (siehe 50-components/_index.scss):
 * Die Datei wird nach _c-header.scss / _c-header-top.scss / _c-hero.scss
 * eingebunden, damit sie deren background-color überschreibt. Danach folgt
 * _c-header-over-hero-image.scss – dessen höher spezifischer Selektor
 * .site-header-over-hero-image .site-header setzt den Hintergrund auf Seiten
 * mit Header über dem Hero-Bild wieder auf transparent.
 */
@layer components {
  /* ================
     Site Header – Hintergrundbild
     Kurzform-Property statt background-image: setzt zugleich background-color
     auf transparent und überschreibt damit den Wert aus _c-header.scss.
  ================ */
  .site-header {
    background: transparent url("../images/bg-header.jpg") no-repeat center center;
    background-size: cover;
  }
  /* ================
     Site Header Inner – Oberer Innenabstand
  ================ */
  .site-header__inner {
    padding-block-start: calc(var(--elements-gap-block) / 4);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Header über Hero-Bild
   Beschreibung: Legt den Site-Header transparent über das Hero-Bild, statt ihn
     darüber im Fluss zu platzieren. Ergänzt dazu die Hero-Basiskomponente
     (_c-hero.scss) um die passenden Innenabstände, damit das Hero-Bild randlos
     über die volle Viewport-Breite läuft, und schaltet den Wellen-Abschluss des
     Headers ab. Alle Regeln sind an die Klasse .site-header-over-hero-image
     gebunden und greifen nur auf Seiten, die diese Klasse am <body> tragen
     (siehe "Aktivierung in Contao").
   Layer: components
   Abhängig von: s-tokens-semantic.scss, _c-hero.scss, _l-layout.scss,
     _c-header-with-background-image.scss, _c-section-background-image-top-bottom.scss
   Verwendete Tokens: --elements-gap-block, --wrapper-padding-inline,
     --wrapper-padding
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: --wrapper-padding -> _l-layout.scss
   BEM-Blöcke: .site-header-over-hero-image, .site-header, .site-header__inner,
     .site-header__top, .hero, .hero__inner, .content-headline,
     .wrapper--width-full
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Aktivierung in Contao (Voraussetzung):
 * Die Klasse .site-header-over-hero-image ist keine Template-Klasse, sondern
 * wird redaktionell pro Seite gesetzt:
 *
 *   Contao-Backend → Seitenstruktur → Seite bearbeiten →
 *   Experten-Einstellungen → "CSS-Klasse"  →  site-header-over-hero-image
 *
 * Contao gibt den Wert am <body>-Element aus:
 *
 *   <body class="… site-header-over-hero-image">
 *
 * Erst dadurch greifen die nachfolgenden Regeln. Ohne diese Klasse bleibt der
 * Site-Header im normalen Dokumentfluss über dem Hero-Bild stehen – die Datei
 * hat dann keinerlei Wirkung.
 */
/*
 * Markup-Beispiel:
 * <body class="site-header-over-hero-image">
 *   <header class="site-header">…</header>
 *   <section class="hero">
 *     <div class="wrapper wrapper--width-full">
 *       <div class="hero__media"><figure><img …></figure></div>
 *       <div class="hero__inner">
 *         <div class="content-headline"><h1>Headline</h1></div>
 *       </div>
 *     </div>
 *   </section>
 * </body>
 *
 * Wirkung:
 * .site-header         → absolut positioniert, liegt über dem Hero-Bild
 * .site-header::after  → Wellen-Abschluss abgeschaltet
 * .hero__media         → randlos über die volle Viewport-Breite
 * .hero__inner         → behält den regulären Wrapper-Innenabstand
 *
 * Ergänzend: _p-header-over-hero-image.scss (Layer projects) übernimmt die
 * projektspezifische Darstellung der Hero-Headline – inklusive der mobilen
 * Aufhebung ihrer Breitenbegrenzung. Diese muss im Layer projects stehen, weil
 * Cascade Layers die Spezifität schlagen: eine Regel im Layer components könnte
 * die dortige max-width nicht überschreiben.
 */
@layer components {
  .site-header-over-hero-image {
    /* ================
       Wellen-Abschluss des Headers abschalten
       Der Header liegt hier transparent über dem Hero-Bild – die Welle aus
       _c-section-background-image-top-bottom.scss würde mitten im Bild
       schweben statt eine Kante zu kaschieren.
    ================ */
  }
  .site-header-over-hero-image .site-header::after {
    display: none;
  }
  .site-header-over-hero-image {
    /* ================
       Site Header – Über dem Hero-Bild positioniert
       Aus dem Dokumentfluss genommen, damit das Hero-Bild bis unter den
       Header läuft; z-index hält ihn über der Bild-Ebene.
    ================ */
  }
  .site-header-over-hero-image .site-header {
    position: absolute;
    z-index: 10;
    width: 100%;
    background: transparent;
  }
  .site-header-over-hero-image .site-header__inner {
    padding-block-start: calc(var(--elements-gap-block) / 4);
  }
  .site-header-over-hero-image {
    /* ================
       Hero – Unteren Innenabstand entfernen
       Das Hero-Bild soll direkt an den nachfolgenden Inhalt anschließen.
    ================ */
  }
  .site-header-over-hero-image .hero {
    padding-block-end: 0;
  }
  .site-header-over-hero-image {
    /* ================
       Hero Inner – Horizontaler Innenabstand
    ================ */
  }
  .site-header-over-hero-image .hero__inner {
    --wrapper-padding: var(--wrapper-padding-inline);
    padding-inline: var(--wrapper-padding);
    box-sizing: border-box; /* verhindert, dass Inhalt in den Innenabstand überläuft */
    max-width: inherit;
  }
  .site-header-over-hero-image {
    /* ================
       Hero – Full-Width-Wrapper ohne seitliches Padding
    ================ */
  }
  .site-header-over-hero-image section.hero .wrapper--width-full {
    --wrapper-padding: 0;
  }
  .site-header-over-hero-image {
    /* ================
       Mobile – Top-Leiste zentrieren, Header-Hintergrund setzen
       Der Header liegt über dem Bild, deshalb muss die dunkle Hintergrundfarbe
       der ersten Header-Zeile (aus _c-site-header.scss) transparent werden.
    ================ */
  }
  @media (width < 75rem) {
    .site-header-over-hero-image .site-header__top {
      justify-content: center;
    }
    .site-header-over-hero-image .site-header > :first-child {
      background-color: transparent;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Icon Label Badge / Badge-Komponente
   Beschreibung: Styles für die Badge-Komponente, die als Schaltfläche oder
     dekoratives Label verwendet wird. Konfigurierbar über Custom Properties;
     unterstützt mehrere Farbvarianten und eine zentrierte Darstellung.
   Layer: components
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --button-background-reduced, --button-color-reduced,
     --border-radius-default, --icon-padding-inline-lg,
     --button-padding-inline, --button-padding-block,
     --button-background-accent, --button-color-accent,
     --navigation-color-default
   Projekt-Tokens: none
   Definierte Tokens: --badge-background, --badge-color, --badge-radius,
     --badge-gap, --badge-padding-inline, --badge-padding-block
   Überschriebene Tokens:
     --icon-with-text-gap -> _c-text-icon.scss
   BEM-Blöcke: .badge, .badge--primary, .badge--accent,
     .badge--only-text-icon, .badge--center
   RSCE-Templates: rsce_icon_label_badge.html.twig,
     rsce_icon_label_badge_config.php,
     rsce_be_icon_label_badge.html.twig
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Badge – Basis-Komponente mit konfigurierbaren Custom Properties
  ================ */
  .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);
    --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; */
    /* verhindert unschöne Zeilenumbrüche – auf Mobile jedoch problematisch */
  }
  .badge strong {
    font-weight: 800;
  }
  .badge {
    /* ================
       Badge Varianten – Farbgebung über Custom Properties
    ================ */
  }
  .badge.badge--primary {
    --badge-background: var(--button-background-reduced);
    --badge-color: var(--button-color-reduced);
  }
  .badge.badge--accent {
    --badge-background: var(--button-background-accent);
    --badge-color: var(--button-color-accent);
  }
  .badge.badge--only-text-icon {
    --badge-background: transparent;
    --badge-color: var(--navigation-color-default);
  }
  .badge {
    /* display: flex notwendig für margin-inline: auto bei Zentrierung */
  }
  .badge.badge--center {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
  /* ================
     Mobile – Zentrierung aufheben
  ================ */
  @media (width < 26.25rem) {
    .badge.badge--center {
      margin-inline: 0;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Button mit Icon / Button-Icon-Styles
   Beschreibung: Styles für Buttons mit SVG-Icon. Steuert Icon-Farben für
     Pfeil und Hintergrundkreis über kontextabhängige Custom Properties, die
     pro Button-Variante gesetzt werden. Enthält Accessibility-Variante für
     reduzierte Bewegung.
   Layer: components
   Abhängig von: s-tokens-semantic.scss, _b-button.scss, _c-text-icon.scss
   Verwendete Tokens: --icon-padding-inline-regular, --button-background-primary,
     --button-color-primary, --button-background-secondary, --button-color-secondary,
     --button-background-reduced, --button-color-reduced,
     --navigation-color-default-hover, --button-background-accent, --button-color-accent
   Projekt-Tokens: none
   Definierte Tokens: --icon-arrow-stroke, --icon-bg-fill
   Überschriebene Tokens:
     --icon-with-text-gap -> _c-text-icon.scss
   BEM-Blöcke: .button, .button--primary, .button--secondary,
     .button--reduced, .button--only-text-icon,
     .button__icon-arrow, .button__icon-bg
   RSCE-Templates: rsce_button.html.twig,
     rsce_button_config.php,
     rsce_be_button.html.twig
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a class="button button--primary" href="/seite">
 *   <strong>Button-Text</strong>
 *   <span class="button__icon">
 *     <svg>
 *       <path class="button__icon-bg" …/>
 *       <path class="button__icon-arrow" …/>
 *     </svg>
 *   </span>
 * </a>
 *
 * Modifier – Button-Varianten:
 * .button--primary         → Primärfarbe (Hintergrund + Icon)
 * .button--secondary       → Sekundärfarbe
 * .button--reduced         → Reduzierte Variante (neutral)
 * .button--only-text-icon  → Nur Text + Icon, kein Button-Hintergrund
 */
@layer components {
  /* ================
     Button mit Icon – Flex-Layout und Icon-Gap
  ================ */
  .button:has(.button__icon) {
    --icon-with-text-gap: var(--icon-padding-inline-regular);
    display: flex; /* display: flex ermöglicht margin-inline: auto für Zentrierung */
    width: fit-content;
    align-items: center;
  }
  .button:has(.button__icon) strong {
    font-weight: 800;
  }
  /* ================
     Icon-Elemente – gemeinsame Transition für Pfeil und Hintergrundkreis
  ================ */
  .button__icon svg path {
    transition: stroke 0.3s ease, fill 0.3s ease;
  }
  /* ================
     Button Varianten – Icon-Farben über Custom Properties
     --icon-arrow-stroke steuert den Pfeil (stroke), --icon-bg-fill den Kreis (fill).
     Hover invertiert die Farben.
  ================ */
  /* Primär-Button – Icon-Farben */
  .button--primary {
    --icon-bg-fill: var(--button-color-primary);
  }
  .button--primary:hover {
    --icon-bg-fill: var(--button-background-primary);
  }
  /* Sekundär-Button – Icon-Farben */
  .button--secondary {
    --icon-bg-fill: var(--button-color-secondary);
  }
  .button--secondary:hover {
    --icon-bg-fill: var(--button-background-secondary);
  }
  /* Reduzierter Button – Icon-Farben */
  .button--reduced {
    --icon-bg-fill: var(--button-color-reduced);
  }
  .button--reduced:hover {
    --icon-bg-fill: var(--button-background-reduced);
  }
  /* Nur-Text-Icon-Button – Icon-Farben */
  .button--only-text-icon {
    --icon-bg-fill: var(--button-color-reduced);
  }
  .button--only-text-icon:hover {
    --icon-bg-fill: var(--navigation-color-default-hover);
  }
  /* ================
     Icon-Zuordnung – Custom Properties auf SVG-Elemente anwenden
  ================ */
  .button__icon svg path {
    fill: var(--icon-bg-fill);
  }
  /* ================
     Accessible – Reduzierte Bewegung
  ================ */
  @media (prefers-reduced-motion: reduce) {
    .button__icon svg path {
      transition: none !important;
    }
  }
  /* Manuell gesetztes Flag via JavaScript (a11y-reduced-motion.js) */
  .is-reduce-motion .button__icon svg path {
    transition: none !important;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Button „Pfeil links/rechts"
   Beschreibung: Styles für die RSCE-Button-Variante mit je einem
     Pfeil-SVG links und rechts vom Text. Setzt Textfarbe und Pfeil-Füllung
     über projektspezifische Tokens, hält den Button-Hintergrund transparent
     und definiert das Flex-Layout samt Icon-Abstand. Enthält die
     Accessibility-Variante für reduzierte Bewegung.
   Layer: components
   Abhängig von: _b-buttons.scss (Basis-.button, Layer base),
     _b-icons.scss (.svg-icon, .svg-icon--size-xl),
     _c-text-icon.scss (.text-icon, --icon-with-text-gap),
     _c-rsce-button--vars.scss (Herkunft von --icon-bg-fill)
     – kein @use nötig, da keine Sass-Variablen verwendet werden
   Verwendete Tokens: --icon-padding-inline-regular, --icon-bg-fill,
     --rsce-button-arrow-left-right-background-primary,
     --rsce-button-arrow-left-right-background-primary-hover,
     --rsce-button-arrow-left-right-color-primary,
     --rsce-button-arrow-left-right-color-primary-hover,
     --button-background-primary, --button-background-primary-hover,
     --navigation-color-default, --navigation-color-default-hover,
     --font-family-script, --font-size-lg
   Projekt-Tokens:
     --rsce-button-arrow-left-right-background-primary -> _s-tokens-project.scss,
     --rsce-button-arrow-left-right-background-primary-hover -> _s-tokens-project.scss,
     --rsce-button-arrow-left-right-color-primary -> _s-tokens-project.scss,
     --rsce-button-arrow-left-right-color-primary-hover -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens:
     --icon-with-text-gap -> _c-text-icon.scss,
     --icon-bg-fill -> _c-rsce-button--vars.scss,
     --button-background -> _b-buttons.scss,
     --button-background-hover -> _b-buttons.scss,
     --button-color -> _b-buttons.scss,
     --button-color-hover -> _b-buttons.scss
   BEM-Blöcke: .button, .button--arrow-left-right, .button__icon,
     .button__text, .is-reduce-motion
   RSCE-Templates: rsce_button_arrow_left_right.html.twig,
     rsce_button_arrow_left_right_config.php,
     rsce_be_button_arrow_left_right.html.twig
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <a class="button button--only-text-icon button--arrow-left-right text-icon" href="/seite">
 *   <span class="button__icon svg-icon svg-icon--size-xl" aria-hidden="true">
 *     <svg viewBox="0 0 48 11"><path d="…" fill="currentcolor"/></svg>
 *   </span>
 *   <span class="button__text">Button-Text</span>
 *   <span class="button__icon svg-icon svg-icon--size-xl" aria-hidden="true">
 *     <svg viewBox="0 0 48 11"><path d="…" fill="currentcolor"/></svg>
 *   </span>
 * </a>
 *
 * Die beiden Pfeil-SVGs sind reine Dekoration (aria-hidden) und tragen keine
 * eigene Klasse – eingefärbt werden sie über den Nachfahren-Selektor
 * .button__icon svg path.
 *
 * Modifier und Utility-Klassen:
 * .button--only-text-icon  → aus _b-buttons.scss: kein Button-Hintergrund
 * .button--arrow-left-right → diese Datei: Schrift- und Pfeilfarben
 * .text-icon               → aus _c-text-icon.scss: Flex-Gap zwischen Icon und Text
 * .svg-icon--size-xl       → aus _b-icons.scss: Icon-Größe
 * .button--center          → optional, horizontale Zentrierung
 */
@layer components {
  /* ================
     Button mit Icon – Flex-Layout und Icon-Gap
  ================ */
  .button:has(.button__icon) {
    --icon-with-text-gap: var(--icon-padding-inline-regular);
    display: flex; /* display: flex ermöglicht margin-inline: auto für Zentrierung */
    width: fit-content;
    align-items: center;
  }
  .button:has(.button__icon) strong {
    font-weight: 800;
  }
  /* ================
     Icon-Elemente – gemeinsame Transition für Pfeil und Hintergrundkreis
  ================ */
  .button__icon svg path {
    transition: fill 0.3s ease;
  }
  /* ================
     Pfeil-Button – Schrift- und Farbvarianten
     Die Farben kommen aus den Projekt-Tokens in _s-tokens-project.scss;
     der Button selbst bleibt hintergrundlos, sichtbar sind nur Text und Pfeile.
  ================ */
  .button--arrow-left-right {
    --icon-bg-fill: var(--rsce-button-arrow-left-right-background-primary, var(--button-background-primary));
    --button-color: var(--rsce-button-arrow-left-right-color-primary, var(--navigation-color-default));
    --button-background: transparent;
    font-family: var(--font-family-script);
    font-size: var(--font-size-lg);
  }
  .button--arrow-left-right:hover {
    --icon-bg-fill: var(--rsce-button-arrow-left-right-background-primary-hover, var(--button-background-primary-hover));
    --button-color-hover: var(--rsce-button-arrow-left-right-color-primary-hover, var(--navigation-color-default-hover));
    --button-background-hover: transparent;
  }
  /* ================
     Icon-Zuordnung – Custom Properties auf SVG-Elemente anwenden
     Das fill des <path> im Template lautet currentcolor, wird hier aber
     gezielt überschrieben, damit Pfeil- und Textfarbe getrennt steuerbar sind.
  ================ */
  .button__icon svg path {
    fill: var(--icon-bg-fill);
  }
  /* ================
     Accessible – Reduzierte Bewegung
  ================ */
  @media (prefers-reduced-motion: reduce) {
    .button__icon svg {
      transition: none !important;
    }
  }
  /* Manuell gesetztes Flag via JavaScript (a11y-reduced-motion.js) */
  .is-reduce-motion .button__icon svg {
    transition: none !important;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Headline Subheadline / Überschrift mit Unter-/Oberzeile
   Beschreibung: Styles für RSCE-Überschriften mit optionaler kleinerer Zeile
     oberhalb oder unterhalb der Hauptüberschrift. Die Sub-Zeilen werden als
     Block-Elemente mit relativ zur Überschriftsgröße skalierter Schriftgröße
     dargestellt; Schriftart und Stärke sind über Tokens steuerbar.
   Layer: components
   Abhängig von: s-tokens-semantic.scss (--font-family-heading, --font-weight-book),
     s-tokens-project.scss (--rsce-headline-subheadline-font-family-subheadline)
   Verwendete Tokens: --rsce-headline-subheadline-font-family-subheadline,
     --font-family-heading, --font-weight-book
   Projekt-Tokens:
     --rsce-headline-subheadline-font-family-subheadline -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .headline-subheadline, .headline-top, .headline-bottom
   RSCE-Templates: rsce_headline_subheadline.html.twig,
     rsce_headline_subheadline_config.php,
     rsce_be_headline_subheadline.html.twig
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel (erzeugt von rsce_headline_subheadline.html.twig):
 * <div class="ce_rsce_headline_subheadline">
 *   <h2 class="content-headline headline-subheadline">
 *     <span class="headline-top">Oberzeile</span>
 *     Hauptüberschrift
 *   </h2>
 * </div>
 *
 * Varianten (über das Backend-Feld subheadlineTopBottom):
 * isTop     → <span class="headline-top">    vor der Überschrift
 * isBottom  → <span class="headline-bottom"> nach der Überschrift
 *
 * Die Überschriftenebene (h1–h6) ist im Backend frei wählbar (headlineOrder)
 * und bestimmt über die em-Größen unten die Größe der Sub-Zeile.
 * Farbe, Schriftstärke und eine einheitliche Größe setzt das Projekt in
 * _p-rsce-headline-subheadline.scss (Layer projects, greift danach).
 */
@layer components {
  /* ================
     Headline Top / Bottom – Sub-Zeile oberhalb oder unterhalb der Überschrift
     font-size in em skaliert relativ zur Überschriftsgröße des Elternelements.
  ================ */
  .headline-subheadline .headline-top,
  .headline-subheadline .headline-bottom {
    display: block;
    font-size: 0.5em; /* Hälfte der Überschriftsgröße */
    font-family: var(--rsce-headline-subheadline-font-family-subheadline, var(--font-family-heading));
    font-weight: var(--font-weight-book);
  }
  /* ================
     Abstände – Headline Top und Bottom
  ================ */
  .headline-subheadline .headline-top {
    margin-bottom: 0.25em;
  }
  .headline-subheadline .headline-bottom {
    margin-top: 0.25em;
  }
  /* ================
     Schriftgrößen – Anpassungen je Überschriftenebene
     h1 erhält eine kleinere Sub-Zeile (0.4em), da h1 selbst bereits sehr groß ist.
     h3–h5 erhalten schrittweise größere Sub-Zeilen.
  ================ */
  h1.headline-subheadline .headline-top,
  h1.headline-subheadline .headline-bottom {
    font-size: 0.4em; /* ein Drittel der h1-Größe */
  }
  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;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Block Icon Text / Karte mit Icon und Text
   Beschreibung: Styles für die RSCE-Karte mit optionalem Icon, Überschrift
     und Fließtext. Das Icon wird als Inline-Flex-Element dargestellt, damit
     der block-Abstand nach unten korrekt greift.
   Layer: components
   Custom Property Definitionen: Nein
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-grid-spacing-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .block-text-icon__card, .block-text-icon__icon
   RSCE-Templates: rsce_block_icon_text.html.twig,
     rsce_block_icon_text_config.php,
     rsce_be_block_icon_text.html.twig
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Block Text Icon Card – Icon-Abstand nach unten
     display: inline-flex verhindert, dass das Icon als Inline-Element
     den margin-block-end ignoriert.
  ================ */
  .block-text-icon__card .block-text-icon__icon {
    margin-block-end: var(--flow-grid-spacing-block);
    display: inline-flex;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Block Icon Text Link / Verlinkbare Karte mit Icon und Text
   Beschreibung: Styles für die RSCE-Karte mit optionalem Icon, Überschrift,
     Fließtext und Link auf der gesamten Karte. Erweitert .block-text-icon__card
     um Link-Resetstyles, damit die Karte ohne Textdekoration erscheint.
   Layer: components
   Custom Property Definitionen: Nein
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --flow-grid-spacing-block
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .block-text-icon-link__card, .block-text-icon-link__icon
   RSCE-Templates: rsce_block_icon_text_link.html.twig,
     rsce_block_icon_text_link_config.php,
     rsce_be_block_icon_text_link.html.twig
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Block Text Icon Link Card – Icon-Abstand nach unten
  ================ */
  .block-text-icon-link__card .block-text-icon-link__icon {
    margin-block-end: var(--flow-grid-spacing-block);
    display: inline-flex;
  }
  /* ================
     Verlinkter Card-Wrapper – Textdekoration und Farbe zurücksetzen
  ================ */
  a.block-text-icon-link__card {
    text-decoration: none;
  }
  a.block-text-icon-link__card:hover {
    text-decoration: none;
    color: inherit;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Link List / Link-Liste mit optionaler Überschrift
   Beschreibung: Styles für eine Liste aus verlinkten Text-Icon-Elementen mit
     optionaler Gruppen-Überschrift. Steuert Abstände zwischen Listenpunkten
     in Abhängigkeit davon, ob eine Überschrift vorhanden ist.
   Layer: components
   Custom Property Definitionen: Nein
   Abhängig von: s-tokens-semantic.scss, _b-icon.scss, _b-lists.scss
   Verwendete Tokens: --flow-spacing-block-default, --font-weight-medium
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .link-list, .link-list__headline
   RSCE-Templates: rsce_block_link_list.html.twig,
     rsce_block_link_list_config.php,
     rsce_be_block_link_list.html.twig
   Assets: none
   ========================================================================== */
@layer components {
  /* ================
     Link List – Abstand zwischen Einträgen
     Nur wenn eine Überschrift vorhanden ist, erhält der erste Eintrag kein
     Padding-Block-Start (kein doppelter Abstand zum Headline-Element).
     Abstände zwischen li-Elementen werden nur bei vorhandener Überschrift gesetzt.
  ================ */
  .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 – Gruppen-Überschrift innerhalb eines Listeneintrags
  ================ */
  .link-list__headline {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-medium);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Page Teaser Standard
   Beschreibung: Styles für den Standard-Seitenteaser. Richtet mehrere Karten
     über Subgrid aus, sodass Bild, Überschrift, Text und Link spaltenübergreifend
     auf gleicher Höhe stehen. Basiert auf der .equal-columns-Infrastruktur.
   Layer: components
   Abhängig von: s-tokens-semantic.scss, _b-cards.scss, _c-equal-columns.scss
   Verwendete Tokens: --equal-columns-gap-columns, --text-color-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens:
     --equal-columns-gap-rows -> _l-grid.scss
   BEM-Blöcke: .page-teaser, .page-teaser__card
   RSCE-Templates: rsce_block_page_teaser_standard.html.twig,
     rsce_block_page_teaser_standard_config.php,
     rsce_be_block_page_teaser_standard.html.twig
   Assets: none
   ========================================================================== */
@layer components {
  /*  ================
      1 RSCE galerie - different size
      ================ */
  .gallery-bento-4images {
    display: grid;
    grid-template: repeat(2, 1fr)/repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    place-items: stretch;
  }
  .gallery-bento-4images--left .gallery-bento-4images__1 {
    grid-area: 1/1/span 2/span 2;
  }
  .gallery-bento-4images--left .gallery-bento-4images__4 {
    grid-area: 1/4/span 2/span 1;
  }
  .gallery-bento-4images--right .gallery-bento-4images__1 {
    grid-area: 1/1/span 2/span 1;
  }
  .gallery-bento-4images--right .gallery-bento-4images__4 {
    grid-area: 1/3/span 2/span 2;
  }
  /*  ================
      2 Mobile
      ================ */
  @media (max-width: 75rem) {
    .gallery-bento-4images {
      grid-template: repeat(4, 1fr)/repeat(2, 1fr);
    }
    .gallery-bento-4images--left .gallery-bento-4images__1 {
      grid-area: 1/1/span 2/span 2;
    }
    .gallery-bento-4images--left .gallery-bento-4images__4 {
      grid-area: 3/2/span 2/span 1;
    }
    .gallery-bento-4images--right .gallery-bento-4images__1 {
      grid-area: 1/1/span 2/span 1;
    }
    .gallery-bento-4images--right .gallery-bento-4images__4 {
      grid-area: 3/1/span 2/span 2;
    }
  }
  @media (max-width: 26.25rem) {
    .gallery-bento-4images {
      grid-template: repeat(4, 1fr)/1fr;
    }
    .gallery-bento-4images--left .gallery-bento-4images__1 {
      grid-area: 1/1/span 1/span 1;
    }
    .gallery-bento-4images--left .gallery-bento-4images__4 {
      grid-area: 3/1/span 1/span 1;
    }
    .gallery-bento-4images--right .gallery-bento-4images__1 {
      grid-area: 1/1/span 1/span 1;
    }
    .gallery-bento-4images--right .gallery-bento-4images__4 {
      grid-area: 3/1/span 1/span 1;
    }
  }
}
/* 60) utilities */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Accessibility Utilities
   Beschreibung: Utility-Klassen zur Verbesserung der Barrierefreiheit.
     Blendet Inhalte visuell aus, versteckt Elemente über [hidden] und
     deaktiviert Animationen bei aktivierter Reduced-Motion-Präferenz.
   Layer: utilities
   Abhängig von: none
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Visuell versteckt – nur für Screenreader sichtbar
     Bevorzugt gegenüber .sr-only, da der Name beschreibt was passiert (visuell versteckt),
     nicht wer davon profitiert (Screenreader).
  ================ */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  /* ================
     HTML [hidden]-Attribut – Elemente ausblenden
  ================ */
  [hidden] {
    display: none;
  }
  /* ================
     Reduced Motion – Animationen deaktivieren
     Reagiert auf die Browser-/OS-Einstellung "Bewegung reduzieren"
  ================ */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  /* ================
     .is-reduce-motion – JavaScript-gesteuerte Reduced-Motion-Klasse
     Ermöglicht dieselbe Deaktivierung wie das Media Query, gesteuert per JS-Toggle
  ================ */
  .is-reduce-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Text Utilities
   Beschreibung: Utility-Klassen für Text-Alignment und Zeilenbreite.
     Der invertierte Farbkontext für dunkle Flächen lag früher hier als
     .content--light und wird jetzt vollständig über .background-color--dark
     geregelt – siehe _l-background-inverted.scss und
     80-projects/pohlteich/_p-background-inverted.scss.
   Layer: utilities
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Text-Breite – Max-Width-Begrenzung
  ================ */
  .u-text-narrow {
    max-width: 65ch;
  }
  .u-text-narrow--center {
    max-width: 65ch;
    margin-inline: auto;
  }
  /* ================
     Text-Alignment – Ausrichtungs-Modifier
  ================ */
  .u-text-left {
    text-align: left;
  }
  .u-text-center {
    text-align: center;
  }
  .u-text-right {
    text-align: right;
  }
  .u-text-justify {
    text-align: justify;
  }
  /* ================
     Responsive Anpassungen – Mobile
  ================ */
  @media (width < 26.25rem) {
    .u-text-narrow--center {
      margin-inline: 0;
    }
    .u-text-center {
      text-align: left;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Icon Utilities
   Beschreibung: Utility-Klassen für SVG-Icons. Setzt Farben für Icons
     über projektspezifische Brand-Color-Tokens.
   Layer: utilities
   Abhängig von: s-tokens-project.scss
   Verwendete Tokens: --brand-color-primary, --brand-color-secondary
   Projekt-Tokens:
     --brand-color-primary -> _s-tokens-project.scss,
     --brand-color-secondary -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .svg-icon
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     SVG-Icon – Primärfarbe (Rot)
  ================ */
  .svg-icon--red svg {
    color: var(--brand-color-primary);
  }
  /* ================
     SVG-Icon – Sekundärfarbe (Blau)
  ================ */
  .svg-icon--blue svg {
    color: var(--brand-color-secondary);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Text-Icon Utilities
   Beschreibung: Utility-Klassen für die Text-Icon-Komponente aus
     _c-text-icon.scss. Setzt Schriftstärke und Display-Verhalten
     über Modifier.
   Layer: utilities
   Abhängig von: s-tokens-semantic.scss, _c-text-icon.scss
   Verwendete Tokens: --font-weight-medium
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .text-icon
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Text-Icon Text – Fettschrift-Modifier
  ================ */
  .text-icon__text--bold .text-icon__text {
    font-weight: var(--font-weight-medium);
  }
  /* ================
     Text-Icon – Block-Level Flex-Modifier
  ================ */
  .text-icon--flex-block {
    display: flex;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Grid Utilities
   Beschreibung: Utility-Klassen für das Grid-Layout aus _l-grid.scss.
     Ermöglicht horizontale Zentrierung einzelner Grid-Elemente.
   Layer: utilities
   Abhängig von: _l-grid.scss
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .grid-item
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Grid-Item – Horizontale Zentrierung innerhalb der Grid-Zelle
  ================ */
  .grid-item--center {
    justify-self: center;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Images Utilities
   Beschreibung: Utility-Klassen für Bilder aus _b-images.scss.
     Ermöglicht horizontale Zentrierung von Bildern via Modifier.
   Layer: utilities
   Abhängig von: _b-images.scss
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-image
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Content-Image – Horizontale Zentrierung
  ================ */
  .content-image--center img {
    margin-inline: auto;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Image-Hover Utilities
   Beschreibung: Utility-Klassen zum Deaktivieren des Hover-Effekts bei
     Bildern. Entfernt Pseudo-Elemente, Transition und Transform-Animation
     für Bilder mit der Klasse .image--hover.
   Layer: utilities
   Abhängig von: none
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-image
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Content-Image – Hover-Effekt deaktivieren
     Entfernt Pseudo-Elemente und Animationen für .image--hover-Elemente
  ================ */
  .content-image--no-hover-icon .image--hover::before,
  .content-image--no-hover-icon .image--hover::after {
    display: none;
  }
  .content-image--no-hover-icon .image--hover img {
    transition: none;
  }
  .content-image--no-hover-icon .image--hover:hover img {
    transform: none;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Element-Group Utilities
   Beschreibung: Utility-Klassen für das Contao Element-Group-Modul.
     Ermöglicht horizontale Zentrierung von Element-Gruppen via Modifier.
   Layer: utilities
   Abhängig von: none
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .element-group
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer utilities {
  /* ================
     Element-Group – Horizontale Zentrierung
  ================ */
  .element-group--center {
    margin-inline: auto;
  }
}
/* 70) overrides */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Extension Cookiebar / Overrides
   Beschreibung: Projektspezifische Overrides für die Contao-Cookiebar-
     Erweiterung (oveleon/contao-cookiebar). Verknüpft die Extension-eigenen
     CSS Custom Properties (--ccb-*) mit den projektweiten Design-Tokens.
     Bewusst außerhalb von @layer, um die Extension-Styles zuverlässig
     zu überschreiben.
   Layer: overrides
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --text-color-default, --border-color-default,
     --button-color-reduced, --button-background-reduced,
     --button-background-reduced-hover, --button-color-reduced-hover,
     --button-padding-inline, --button-padding-block
   Projekt-Tokens: none
   Definierte Tokens: --ccb-text, --ccb-bdr, --ccb-btn-clr,
     --ccb-btn-clr-hvr, --ccb-btn-bg, --ccb-btn-bg-hvr
   Überschriebene Tokens: none
   BEM-Blöcke: .contao-cookiebar, .cc-module
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/* ================
   Cookiebar – Extension Custom Properties mit Projekt-Tokens verknüpfen
   Die --ccb-*-Variablen werden von der oveleon/contao-cookiebar-Extension
   ausgelesen und steuern Farben und Rahmen der Cookie-Leiste.
================ */
:root {
  --ccb-text: var(--text-color-default);
  --ccb-bdr: var(--border-color-default);
  --ccb-btn-clr: var(--button-color-reduced);
  --ccb-btn-clr-hvr: var(--button-background-reduced-hover);
  --ccb-btn-bg: var(--button-background-reduced);
  --ccb-btn-bg-hvr: var(--button-background-reduced-hover);
}

.cc-head p {
  margin-block-start: var(--flow-spacing-block-default);
}

/* ================
   Cookiebar – Button- und Footer-Layout
================ */
.contao-cookiebar .cc-btn {
  border: none;
  border-radius: 0;
  padding-inline: var(--button-padding-inline);
  padding-block: var(--button-padding-block);
  line-height: 1;
  transform: translateY(0.1em);
}
@supports (text-box: trim-both cap alphabetic) {
  .contao-cookiebar .cc-btn {
    text-box: trim-both cap alphabetic;
    transform: none;
  }
}
.contao-cookiebar {
  /* Footer als gleichmäßiges Grid, damit alle Buttons gleich breit sind */
}
.contao-cookiebar .cc-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 8px;
  align-items: stretch;
  width: 100%;
}

/* ================
   CC-Module – Zentrierte Einzel-Button-Darstellung
   Wird für die Standalone-Ansicht des Cookie-Buttons verwendet.
================ */
.cc-module {
  text-align: center;
  margin-top: 5rem;
}
.cc-module button {
  display: inline-block;
  background-color: var(--button-background-reduced);
  padding-inline: var(--button-padding-inline);
  padding-block: var(--button-padding-block);
  cursor: pointer;
  color: var(--button-color-reduced);
  outline: 0 none;
}
.cc-module button:hover {
  background-color: var(--button-color-reduced-hover);
  color: var(--button-background-reduced-hover);
}

/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Handorgel / Accordion-Overrides
   Beschreibung: Projektspezifische Overrides für die Handorgel-Akkordeon-
     Erweiterung. Entfernt Standard-Rahmen und -Hintergründe, setzt
     Hover-Farben über Projekt-Tokens und ergänzt eine Plus/Minus-Animation
     am Akkordeon-Toggle. Bewusst außerhalb von @layer, um die Extension-
     Styles zuverlässig zu überschreiben.
   Layer: overrides
   Abhängig von: s-tokens-semantic.scss
   Verwendete Tokens: --text-color-default-hover, --text-color-default
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .content-accordion, .handorgel__header,
     .handorgel__header__button, .handorgel__content,
     .handorgel__headline, .handorgel__icon
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/* ================
   Akkordeon-Container – Rahmen entfernen
================ */
/* bewusst außerhalb von @layer um die Handorgel-Extension-Styles zu überschreiben */
.content-accordion {
  border: none;
}

/* ================
   Akkordeon-Header – Hover-Farbe und Layout
================ */
.handorgel__header {
  max-width: initial;
}
.handorgel__header .handorgel__header__button {
  box-sizing: border-box;
  padding: 1rem;
}
.handorgel__header .handorgel__header__button:hover {
  color: var(--text-color-default-hover);
}
.handorgel__header.handorgel__header--opened .handorgel__header__button {
  color: var(--text-color-default-hover);
}

/* ================
   Akkordeon-Button – Basis: transparenter Hintergrund, nur untere Trennlinie
================ */
.handorgel__header__button {
  background-color: transparent;
  border-inline: none;
  border-block-start: none;
  border-block-end: 1px solid currentcolor;
}

/* ================
   Akkordeon-Content – Rahmen und Hintergrund entfernen
================ */
.handorgel__content {
  background-color: transparent;
  border: none;
}

/* ================
   Akkordeon-Überschrift – Zeilenhöhe zurücksetzen
================ */
.handorgel__headline {
  line-height: 1;
}

/* ================
   Akkordeon-Header – Plus/Minus-Icon-Animation
   ::before und ::after erzeugen die horizontale und vertikale Linie des Plus-Zeichens.
   Beim Öffnen rotiert ::after auf 0° (Minus), ::before behält die horizontale Linie.
================ */
.handorgel__header .handorgel__header__button {
  display: flex;
  justify-content: space-between;
}
.handorgel__header .handorgel__icon {
  position: relative;
  width: 1em;
}
.handorgel__header .handorgel__icon::before,
.handorgel__header .handorgel__icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 4px;
  background-color: var(--text-color-default);
  transform-origin: 50% 50%;
  transition: all 0.25s ease;
}
.handorgel__header .handorgel__icon::before {
  transform: rotate(0deg);
  opacity: 1;
}
.handorgel__header .handorgel__icon::after {
  transform: rotate(-90deg);
}
.handorgel__header.handorgel__header--opened .handorgel__icon::before {
  transform: rotate(0deg);
  opacity: 1;
  background-color: var(--text-color-default-hover);
}
.handorgel__header.handorgel__header--opened .handorgel__icon::after {
  transform: rotate(0deg);
  background-color: var(--text-color-default-hover);
}

/* 80) projects */
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Equal Columns – 3-Spalter mit breiter Mitte (projektspezifisch)
   Beschreibung: Projektspezifisches Verhalten des Modifiers
     .equal-columns--three-columns-middle-wide. Unterhalb von
     breakpoint-container-grid-2 wird das erste Grid-Item ausgeblendet und das
     letzte in seiner Spalte zentriert; ab breakpoint-container-grid-2 sind alle
     drei Items sichtbar und werden nach außen ausgerichtet. Die Spaltenbreiten
     selbst kommen aus _l-grid.scss, hier wird nur die Sichtbarkeit und die
     horizontale Ausrichtung der Items gesteuert.
   Layer: projects
   Abhängig von: s-tokens-semantic.scss (Sass-Variablen
     $breakpoint-container-grid-1 und $breakpoint-container-grid-2),
     _l-grid.scss (definiert .equal-columns, den Modifier und die
     Spaltenaufteilung je Breakpoint)
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .equal-columns
     (Modifier --columns-3 und --three-columns-middle-wide;
     --columns-center erscheint nur als Ausschluss in :not())
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <div class="equal-columns equal-columns--columns-3 equal-columns--three-columns-middle-wide">
 *   <div>...</div>   ← unterhalb grid-2 ausgeblendet
 *   <div>...</div>
 *   <div>...</div>   ← unterhalb grid-2 in seiner Spalte zentriert
 * </div>
 *
 * Zusammenspiel mit _l-grid.scss (Layer layout, greift vor diesem Layer):
 * < grid-1          → 1 Spalte
 * grid-1 … grid-2   → 2 gleich breite Spalten
 * > grid-2          → 1fr 2fr 1fr (breite Mitte)
 *
 * Der Modifier ist nicht mit .equal-columns--columns-center kombinierbar –
 * dieser baut in _l-grid.scss ein verdoppeltes Raster mit span 2 auf
 * (4 Spalten unterhalb grid-2, 6 Spalten darüber), in dem eine 1:2:1-Gewichtung
 * keinen Sinn ergibt. Der Ausschluss ist keine Frage der Spezifität, sondern
 * wird erzwungen: jeder Selektor dieser Datei hängt :not() an, sodass bei
 * gesetztem --columns-center hier gar keine Regel greift.
 */
@layer projects {
  /* ================
     Equal Columns – 3 Spalten (fixiert)
     Grundzustand ohne Container Query: gilt für alle Breiten und wird vom
     grid-2-Block weiter unten wieder aufgehoben. Solange nur zwei Spalten
     zur Verfügung stehen, wird das erste Item ausgeblendet, damit die
     verbleibenden zwei die Zeile nicht ungleich füllen.
  ================ */
  .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) > :first-child {
    display: none;
  }
  .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) > :last-child {
    justify-self: center;
  }
  /* ================
     Breakpoint grid-1 – aktuell ohne Wirkung
     Der Block erzeugt kein CSS; die einzige Regel ist auskommentiert.
     Zwischen grid-1 und grid-2 gilt damit unverändert der Grundzustand
     oben: erstes Item ausgeblendet, letztes zentriert.
  ================ */
  @container article-wrapper (width > 46rem) {}
  /* ================
     Breakpoint grid-2 – vollständiger 3-Spalter
     Ab hier stellt _l-grid.scss die Spalten auf 1fr 2fr 1fr um. Alle drei
     Items werden gezeigt und nach außen gerückt, sodass die breite Mitte
     optisch zwischen ihnen liegt.
  ================ */
  @container article-wrapper (width > 70rem) {
    .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) > :first-child {
      display: block;
      justify-self: start;
    }
    .equal-columns--columns-3.equal-columns--three-columns-middle-wide:not(.equal-columns--columns-center) > :last-child {
      justify-self: end;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: RSCE Headline Subheadline – Projektspezifisch
   Beschreibung: Projektspezifische Anpassung der RSCE-Überschrift mit Ober-/
     Unterzeile. Setzt die Sub-Zeile auf die Projekt-Akzentfarbe, vereinheitlicht
     die Schriftgröße über alle Überschriftenebenen und nimmt die
     Schriftstärke zurück. Zusätzlich wird die linksbündige Ausrichtung
     zurückgesetzt, die das Grid-Layout auf Überschriften innerhalb von
     .equal-columns anwendet.
   Layer: projects
   Abhängig von: s-tokens-project.scss (--rsce-headline-subheadline-color-subheadline);
     _c-rsce-headline-subheadline.scss (Basis-Styles, werden hier ergänzt),
     _l-grid.scss (Ursprung der zurückgesetzten Textausrichtung)
   Verwendete Tokens: --rsce-headline-subheadline-color-subheadline
   Projekt-Tokens:
     --rsce-headline-subheadline-color-subheadline -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .headline-subheadline, .headline-top, .headline-bottom
     (.equal-columns nur als Kontext-Selektor, definiert in _l-grid.scss)
   RSCE-Templates: rsce_headline_subheadline.html.twig,
     rsce_headline_subheadline_config.php,
     rsce_be_headline_subheadline.html.twig
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel (erzeugt von rsce_headline_subheadline.html.twig):
 * <div class="ce_rsce_headline_subheadline">
 *   <h2 class="content-headline headline-subheadline">
 *     <span class="headline-top">Oberzeile</span>
 *     Hauptüberschrift
 *   </h2>
 * </div>
 *
 * Varianten (über das Backend-Feld subheadlineTopBottom):
 * isTop     → <span class="headline-top">    vor der Überschrift
 * isBottom  → <span class="headline-bottom"> nach der Überschrift
 *
 * Die Überschriftenebene (h1–h6) ist im Backend frei wählbar
 * (headlineOrder) und beeinflusst die Größe der Sub-Zeile.
 *
 * Die Schriftart der Sub-Zeile wird nicht hier, sondern in der Basis-Komponente
 * über --rsce-headline-subheadline-font-family-subheadline gesetzt.
 */
@layer projects {
  /* ================
     Headline Top / Bottom – Projekt-Styling der Sub-Zeile
     Ergänzt die Basis-Komponente um Farbe und angepasste Größe/Stärke.
  ================ */
  .headline-subheadline .headline-top,
  .headline-subheadline .headline-bottom {
    font-size: 0.8em;
    font-weight: initial;
    color: var(--rsce-headline-subheadline-color-subheadline);
  }
  /* ================
     Textausrichtung im Grid-Kontext
     _l-grid.scss zwingt alle h2–h5 innerhalb von .equal-columns auf
     text-align: left. Für die RSCE-Überschrift wird das zurückgenommen,
     damit sie auch in Spaltenlayouts zentriert bleibt.
  ================ */
  .equal-columns h2.headline-subheadline {
    text-align: center;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Site Footer – Projekt-Anpassung Pohlteich
   Beschreibung: Projektspezifische Darstellung des Seitenfußes. Setzt die
     Footer-Überschriften (h2) auf die Script-Schrift in der Primärfarbe mit
     leichterem Schriftgewicht und ersetzt dabei die Fluid-Typography-Größe aus
     _c-footer.scss durch die feste Projekt-Größenstufe; ergänzt außerdem die
     vertikalen Innenabstände von Footer-Top und Footer-Bottom. Struktur,
     Subgrid-Spalten und das mobile Umbruchverhalten kommen aus _c-footer.scss
     (Layer components).
     Flächenfarbe und invertierte Vordergrund-Rollen kommen NICHT aus dieser
     Datei, sondern über .background-color--dark im Markup (siehe
     _l-background.scss, _l-background-inverted.scss).
   Layer: projects
   Abhängig von: s-tokens-project.scss, s-tokens-semantic.scss,
     s-tokens-primitives.scss, _c-footer.scss
   Verwendete Tokens: --font-size-heading-lg, --font-weight-book, --ff-script,
     --brand-color-primary, --section-padding-block
   Projekt-Tokens: --brand-color-primary -> _s-tokens-project.scss,
     --font-size-heading-lg -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-footer, .site-footer__top, .site-footer__bottom
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <footer class="site-footer">
 *   <section class="site-footer__top">
 *     <div class="wrapper">
 *       <div class="content-collection background-color--dark">
 *         <div class="equal-columns equal-columns--columns-3-space-between">
 *           <div class="site-footer__column flow">
 *             <h2>Kontakt</h2>
 *             <p>…</p>
 *           </div>
 *           <div class="site-footer__column flow">…</div>
 *           <div class="site-footer__column flow">…</div>
 *         </div>
 *       </div>
 *     </div>
 *   </section>
 *   <section class="site-footer__bottom">
 *     <div class="wrapper">
 *       <div class="flex-group flex-group--justify-space-between">…</div>
 *     </div>
 *   </section>
 * </footer>
 *
 * Hinweis zum Markup: .site-footer kommt aus fe_page.html.twig; .site-footer__top
 * und .site-footer__bottom stammen nicht von dort, sondern werden redaktionell
 * als CSS-Klasse an den Footer-Abschnitten im Contao-Backend gesetzt. Fehlt eine
 * der beiden Klassen, entfällt für diesen Abschnitt der halbierte
 * Section-Abstand aus dieser Datei.
 *
 * Hinweis zur Spaltenanzahl: Die Spaltenregeln der .equal-columns im Footer
 * liegen vollständig in _c-footer.scss und sind auf genau drei Kindelemente
 * ausgelegt. Aufhänger ist der Modifier .equal-columns--columns-3-space-between,
 * der ausschließlich dort definiert ist – ohne ihn im Markup greifen die
 * Spaltenregeln nicht. Diese Datei greift nicht in die Spaltenachse ein.
 *
 * Hinweis zum dunklen Hintergrund:
 * .background-color--dark muss im Markup gesetzt sein – die Klasse bringt
 * Flächenfarbe UND die invertierten Vordergrund-Rollen mit. Ein Bereich mit
 * dunklem Hintergrund, aber ohne diese Klasse, behält die nicht-invertierten
 * Textfarben.
 */
@layer projects {
  /* ================
     Site Footer – Überschriften in Script-Schrift
     Überschreibt Schriftgröße, -gewicht, -art und Farbe der Footer-h2 aus
     _c-footer.scss. Layer projects liegt nach components, deshalb gewinnen
     diese Werte ohne zusätzliche Spezifität – die dort gesetzten
     Fluid-Typography-Variablen (--min-font-size, --slope, --intercept …)
     bleiben zwar am Element bestehen, wirken sich aber nicht mehr aus, weil
     das clamp() als Ganzes ersetzt wird.
  ================ */
  .site-footer h2 {
    font-size: var(--font-size-heading-lg);
    font-weight: var(--font-weight-book);
    font-family: var(--ff-script);
    color: var(--brand-color-primary);
  }
  /* ================
     Footer Top / Bottom – Vertikale Innenabstände
     Halbierter Section-Abstand, damit die beiden Footer-Bänder enger
     zusammenrücken als reguläre Sections. Gesetzt wird nur die zur Naht
     zeigende Kante – Footer-Top unten, Footer-Bottom oben –, sodass sich
     beide Werte zur Trennfuge zwischen den Bändern addieren.

     Der volle Wert kommt aus _l-layout.scss:114 (section { padding-block:
     var(--section-padding-block) }, Layer layout). Überschrieben wird hier
     nur die jeweils innere Kante; die Außenkanten der beiden Bänder behalten
     den vollen Abstand. An der Naht summieren sich die beiden Hälften damit
     auf genau einen --section-padding-block statt auf zwei.
  ================ */
  .site-footer__top {
    padding-block-end: calc(var(--section-padding-block) / 2);
  }
  .site-footer__bottom {
    padding-block-start: calc(var(--section-padding-block) / 2);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Typografie – Projekt-Anpassung Pohlteich
   Beschreibung: Projektspezifische Korrekturen an der globalen Typografie.
     Aktuell nur das Schriftgewicht der Display-Überschrift h1.display; Größen,
     Fluid-Typography-Berechnung und Abstände bleiben unverändert aus
     _b-typography.scss.
   Layer: projects
   Abhängig von: s-tokens-semantic.scss, _b-typography.scss
   Verwendete Tokens: --font-weight-book
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: none (Element-Selektor h1 mit Modifier-Klasse .display)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
@layer projects {
  /* ================
     h1.display – Display-Variante
     Übernimmt Größe und Fluid Typography aus _b-typography.scss und ersetzt
     nur das Schriftgewicht. Layer projects liegt nach base, überschreibt den
     dortigen Wert daher ohne zusätzliche Spezifität.
  ================ */
  h1.display {
    font-weight: var(--font-weight-book);
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Header über Hero-Bild – Projekt-Anpassung Pohlteich
   Beschreibung: Projektspezifische Darstellung der Hero-Headline auf Seiten,
     deren Header über dem Hero-Bild liegt: Script-Schrift, helle Schriftfarbe,
     engere Breitenbegrenzung und vertikaler Versatz, damit die Headline
     unterhalb des transparenten Headers steht. Das Positionieren des Headers
     selbst erledigt _c-header-over-hero-image.scss (Layer components).
   Layer: projects
   Abhängig von: s-tokens-primitives.scss, s-tokens-semantic.scss,
     _c-hero.scss, _c-header-over-hero-image.scss
   Verwendete Tokens: --ff-script, --text-color-light
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .site-header-over-hero-image, .hero, .content-headline
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Aktivierung in Contao (Voraussetzung):
 * Die Klasse .site-header-over-hero-image ist keine Template-Klasse, sondern
 * wird redaktionell pro Seite gesetzt:
 *
 *   Contao-Backend → Seitenstruktur → Seite bearbeiten →
 *   Experten-Einstellungen → "CSS-Klasse"  →  site-header-over-hero-image
 *
 * Contao gibt den Wert am <body>-Element aus:
 *
 *   <body class="… site-header-over-hero-image">
 *
 * Ohne diese Klasse greifen weder die Regeln hier noch die Header-Positionierung
 * aus _c-header-over-hero-image.scss.
 *
 * Markup-Beispiel:
 * <body class="site-header-over-hero-image">
 *   <header class="site-header">…</header>
 *   <section class="hero">
 *     <div class="wrapper wrapper--width-full">
 *       <div class="hero__media"><figure><img …></figure></div>
 *       <div class="hero__inner">
 *         <div class="content-headline"><h1>Headline</h1></div>
 *       </div>
 *     </div>
 *   </section>
 * </body>
 */
@layer projects {
  /* ================
     Hero Headline – Projektspezifische Darstellung
     Layer projects liegt nach components, überschreibt die Vorgaben aus
     _c-hero.scss daher unabhängig von der Spezifität.
  ================ */
  .site-header-over-hero-image .hero .content-headline {
    max-width: 55%;
    font-family: var(--ff-script);
    color: var(--text-color-light);
    padding-top: 10%;
  }
  .site-header-over-hero-image {
    /* ================
       Hero – Mobile: Maximale Breite der Überschrift aufheben
       Unterhalb der Mobile-Navigation steht zu wenig Breite zur Verfügung,
       um die Headline zusätzlich zu begrenzen.
       Muss im Layer projects stehen (nicht in _c-header-over-hero-image.scss):
       Cascade Layers schlagen die Spezifität, eine Regel im Layer components
       könnte die max-width von oben nicht überschreiben.
    ================ */
  }
  @media (width < 75rem) {
    .site-header-over-hero-image .hero .content-headline {
      max-width: initial;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Section – Wellen-Abschluss (Hintergrundbild oben/unten)
   Beschreibung: Setzt eine dekorative Wellengrafik als Abschlusskante an den
     Hero-Bereich. Die Grafik wird über ein Pseudo-Element als horizontal
     gekacheltes Hintergrundbild eingeblendet und kaschiert die gerade
     Unterkante des Hero-Bildes.
   Layer: components
   Abhängig von: _c-hero.scss (setzt position: relative am Hero-Wrapper)
   Verwendete Tokens: none
   Projekt-Tokens: none
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .hero
   RSCE-Templates: none
   Assets: ../images/bg-wave-top.png (bg-wave-bottom.png liegt für die
     Gegenkante bereit, wird aktuell nicht eingebunden)
   ========================================================================== */
/*
 * Markup-Beispiel:
 * <section class="hero">
 *   <div class="wrapper wrapper--width-full">
 *     <div class="hero__media"><figure><img …></figure></div>
 *   </div>
 * </section>
 *
 * Die Welle taucht im Markup nicht auf – sie entsteht allein über
 * section.hero::after.
 */
@layer projects {
  .site-header-over-hero-image section.hero::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 72px;
    width: 100%;
    background: transparent url("../images/bg-wave-top.png") repeat-x center 0;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Contao Formular-Element – Projekt-Overrides Pohlteich
   Beschreibung: Projektspezifische Überschreibungen der Formular-Basisstyles
     aus _e-contao-form.scss. Reduziert die Eingabefelder auf eine reine
     Unterstreichung statt umlaufender Rahmen und gibt Labels/Legenden die
     Script-Schrift in der Markenfarbe. Zusätzlich wird die äußere
     Fieldset-Legende in allen Formularen visuell versteckt.
   Layer: projects
   Abhängig von: _e-contao-form.scss (Basisstyles, Layer extensions – werden
     hier gezielt überschrieben); Tokens werden zur Laufzeit per var() gelesen,
     die Datei benötigt daher kein @use (keine Sass-Variablen im Einsatz).
   Verwendete Tokens: --border-color-light, --focus-color-default,
     --font-family-script, --font-size-lg, --brand-color-primary
   Projekt-Tokens:
     --brand-color-primary -> _s-tokens-project.scss,
     --font-family-script -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens: none
   BEM-Blöcke: .formbody (Contao-generiert; ebenso .checkbox_container,
     input.text, legend, label – Contao-Klassen werden unverändert übernommen)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Kontext (Contao Formulargenerator):
 * <form>
 *   <div class="formbody">
 *     <fieldset>                          <- äußeres Fieldset
 *       <legend>Formularname</legend>     <- wird hier visuell versteckt
 *       <fieldset>                        <- inneres Fieldset (Feldgruppe)
 *         <legend>Gruppentitel</legend>   <- Script-Schrift, Markenfarbe
 *         <label for="…">Feldname</label> <- Script-Schrift, Markenfarbe
 *         <input class="text" …>
 *         <div class="checkbox_container">
 *           <legend>Auswahl</legend>
 *           <label>…</label>              <- erbt zurück (inherit)
 *         </div>
 *       </fieldset>
 *     </fieldset>
 *   </div>
 * </form>
 *
 * Die Selektoren arbeiten bewusst strukturell (> fieldset > legend gegen
 * fieldset fieldset > legend), weil Contao für äußeres und inneres Fieldset
 * dieselben Elemente ohne unterscheidende Klassen ausgibt.
 */
@layer projects {
  /* ================
     Grundlayout Formular
  ================ */
  .formbody {
    /* ================
       Eingabefelder – Text, Textarea, Select
       Projekt-Design: nur Unterstreichung statt umlaufendem Rahmen.
       Die Basis (_e-contao-form.scss:174/175) setzt border-radius und
       border; border: none hebt den Rahmen komplett auf, bevor die
       untere Kante einzeln wieder gesetzt wird.

       Der border-radius der Basis bleibt bestehen – er wird hier nicht
       zurückgesetzt. Sichtbar ist er weiterhin an der Feld-Hintergrund-
       fläche (--form-field-background-color-default, Basis Zeile 176),
       deren Ecken gerundet bleiben.
    ================ */
  }
  .formbody input.text,
  .formbody textarea,
  .formbody select {
    border: none;
    border-bottom: 1px solid var(--border-color-light);
  }
  .formbody input.text:focus-visible,
  .formbody textarea:focus-visible {
    border-color: var(--focus-color-default);
  }
  .formbody {
    /* ================
       Labels und Legenden
       Projekt-Design: Script-Schrift in Markenfarbe.

       Die Basis (_e-contao-form.scss:306–311) nutzt den identischen
       Selektor und setzt dort font-weight (--form-font-weight-label),
       color (--form-color-label) und font-size (--font-size-sm).
       Überschrieben werden hier color und font-size, hinzu kommt
       font-family; das font-weight der Basis bleibt unangetastet und
       wirkt weiter.
    ================ */
  }
  .formbody fieldset fieldset > legend,
  .formbody .checkbox_container legend,
  .formbody label {
    font-family: var(--font-family-script);
    font-size: var(--font-size-lg);
    color: var(--brand-color-primary);
  }
  .formbody .checkbox_container label {
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  .formbody {
    /* ================
       Äußere Fieldset-Legende – visuell versteckt
       Entspricht dem Modifier .form--legend-invisible aus
       _e-contao-form.scss, hier jedoch ohne Modifier für alle Formulare
       des Projekts. Bleibt für Screenreader zugänglich (kein display: none).
    ================ */
  }
  .formbody > fieldset > legend {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Social-Feed-Liste – Projekt-Anpassung Pohlteich
   Beschreibung: Styles für die Beitragsliste von pdir/social-feed-bundle in
     der projekteigenen Kartenform. Legt die drei Grid-Rows für gleich hohe
     Karten fest, steuert die Innenabstände der Kartenelemente und formatiert
     die Meta-Zeile aus Datum und Netzwerk-Kennzeichnung.
   Layer: projects
     Die Grid-Rows weiter unten überschreiben .equal-columns aus _l-grid.scss –
     das trägt allein die Layer-Reihenfolge (projects nach layout), nicht die
     Spezifität. Der Layer darf deshalb nicht vor layout rutschen.
   Abhängig von: s-tokens-semantic.scss (Tokens sowie die Sass-Variablen
     $breakpoint-container-grid-1, $breakpoint-container-grid-2 und
     $breakpoint-mobile),
     _l-grid.scss (.equal-columns liefert display: grid und die
     Spaltendefinition für .socialfeedlist),
     _c-text-icon.scss (.text-icon in der Meta-Zeile, siehe Abschnitt Meta),
     templates/mod_newslist_social_feed_pohlteich.html.twig (liefert .socialfeedlist
     samt .equal-columns – ohne dieses Template greift die Datei nicht),
     templates/news_social_feed_pohlteich.html.twig (liefert .socialfeedlist__*),
     templates/component/_social_feed_icon.html.twig,
     templates/component/_social_feed_teaser.html.twig
   Verwendete Tokens: --card-padding-inline, --card-padding-block,
     --flow-grid-spacing-block, --font-weight-light, --font-size-sm,
     --text-color-default, --equal-columns-gap-default
   Projekt-Tokens: none
   Definierte Tokens: --socialfeedlist-masonry-columns,
     --socialfeedlist-masonry-gap (beide nur im Masonry-Zweig)
   Überschriebene Tokens: none
   BEM-Blöcke: .socialfeedlist
     (hier gestylt: __card, __info, __meta, __meta-item, __divider.
     __image und __headline kommen aus dem Template, werden aber nur
     strukturell über :nth-child adressiert – siehe Hinweis unten.)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Markup-Beispiel (templates/news_social_feed_pohlteich.html.twig):
 * <div class="socialfeedlist equal-columns equal-columns--columns-3 block">
 *   <article class="socialfeedlist__card arc_3 block">
 *     <div class="socialfeedlist__image">…</div>            <- 1. Kind (Row 1)
 *     <div class="socialfeedlist__headline">                <- 2. Kind (Row 2)
 *       <h3>Accountname</h3>
 *       <div class="socialfeedlist__info">
 *         <ul class="socialfeedlist__meta">
 *           <li class="socialfeedlist__meta-item"><time …>14. Oktober 2021</time></li>
 *           <li class="socialfeedlist__meta-item">
 *             <span class="socialfeedlist__divider" aria-hidden="true"> / </span>
 *             <span class="text-icon">…SVG… Facebook</span>
 *           </li>
 *         </ul>
 *       </div>
 *     </div>
 *     <div class="content-text block">Teaser + Weiterlesen-Link</div> <- 3. Kind (Row 3)
 *   </article>
 * </div>
 *
 * Herkunft der Klassen:
 * .socialfeedlist, .equal-columns und .equal-columns--columns-3 stehen fest im
 * Listen-Template mod_newslist_social_feed_pohlteich.html.twig (Zeile 27), das
 * am Modul als eigenes Template hinterlegt ist. .socialfeedlist__* kommen aus
 * dem Beitrags-Template news_social_feed_pohlteich.html.twig.
 *
 * Beide Templates sind die Projekt-Abwandlung der Extension-Vorlagen. Die
 * unveränderten Twig-Fassungen liegen daneben (news_social_feed,
 * news_social_feed_extended, mod_newslist_social_feed) und arbeiten mit den
 * Extension-Klassen .social_feed_container / .social_feed_element; für die
 * gilt 40-contao/_e-contao-social-feed.scss, nicht diese Datei.
 *
 * Die Spaltenanzahl steuert nicht das Backend: Im Grid-Modus kommt sie über
 * .equal-columns--columns-3 aus dem Listen-Template, im Masonry-Modus über
 * --socialfeedlist-masonry-columns weiter unten. Die Backend-Einstellung
 * pdir_sf_columns (Variable sfColumns) wird im Template nicht ausgegeben und
 * bleibt daher ohne Wirkung.
 *
 * Masonry-Markup (bei gesetztem pdir_sf_enableMasonry):
 * <div class="socialfeedlist socialfeedlist--masonry block">
 *   <article class="socialfeedlist__card …">…</article>
 * </div>
 * Ohne .equal-columns – Begründung im Masonry-Abschnitt unten.
 *
 * Ohne Beitragsbild entfällt das .socialfeedlist__image – die Karte beginnt
 * dann mit .socialfeedlist__headline als erstem Kind. Die Innenabstände greifen
 * deshalb über strukturelle Selektoren (:nth-child) statt über Klassennamen.
 */
@layer projects {
  /* ================
     Social-Feed-Liste – Grid-Rows
     display: grid und die Spaltenanzahl kommen von .equal-columns
     (_l-grid.scss); hier werden nur die drei Rows definiert, damit Bild,
     Kopfbereich und Text über alle Karten hinweg auf gleicher Höhe liegen.
     Breakpoint entspricht dem von equal-columns.
  ================ */
  @media (width > 46rem) {
    .socialfeedlist {
      grid-template-rows: auto auto auto;
    }
  }
  .socialfeedlist a {
    text-decoration: none;
  }
  /* ================
     Masonry-Variante
     Greift nur, wenn im Modul pdir_sf_enableMasonry gesetzt ist – das
     Listen-Template gibt dann .socialfeedlist--masonry aus und lässt
     .equal-columns weg. Masonry positioniert die Karten absolut und braucht
     dafür einen Block-Container; ein display: grid darunter würde die
     Positionierung aushebeln. Entsprechend gibt es hier kein gap – der
     Abstand entsteht über Karten-Padding, das der negative Container-Rand
     nach außen wieder ausgleicht.

     Die Staffelung 1 / 2 / 3 Spalten bildet .equal-columns--columns-3 nach
     (_l-grid.scss). Dort steuern das Container Queries auf .content-collection;
     ohne .equal-columns fehlt hier der Container-Kontext, deshalb Media
     Queries auf dieselben Breakpoint-Werte. In schmalen Wrappern kann die
     Spaltenzahl dadurch von der Grid-Variante abweichen.
  ================ */
  .socialfeedlist--masonry {
    --socialfeedlist-masonry-columns: 1;
    --socialfeedlist-masonry-gap: var(--equal-columns-gap-default);
    margin-inline: calc(var(--socialfeedlist-masonry-gap) / -2);
  }
  @media (width > 46rem) {
    .socialfeedlist--masonry {
      --socialfeedlist-masonry-columns: 2;
    }
  }
  @media (width > 70rem) {
    .socialfeedlist--masonry {
      --socialfeedlist-masonry-columns: 3;
    }
  }
  .socialfeedlist--masonry .socialfeedlist__card {
    float: left;
    width: calc(100% / var(--socialfeedlist-masonry-columns));
    padding-inline: calc(var(--socialfeedlist-masonry-gap) / 2);
    padding-block-end: var(--socialfeedlist-masonry-gap);
  }
  /* ================
     Karte – Innenabstände
     Strukturell adressiert, weil die Kinder je nach Beitrag variieren:
     Social-Posts ohne Bild liefern kein .socialfeedlist__image, Posts ohne
     Text keinen .content-text-Block (siehe _social_feed_teaser.html.twig).
  ================ */
  .socialfeedlist__card > *:not(:first-child) {
    padding-inline: var(--card-padding-inline, 1rem);
  }
  .socialfeedlist__card > *:nth-child(2) {
    padding-block-start: var(--card-padding-block, 1.5rem);
  }
  .socialfeedlist__card > *:last-child {
    padding-block-end: var(--card-padding-block, 1.5rem);
  }
  .socialfeedlist__card > :nth-child(n+3) {
    margin-block-start: var(--flow-grid-spacing-block, 1.5rem);
  }
  /* ================
     Meta-Zeile – Datum und Netzwerk
     Anders als in der News-Liste steht rechts vom Trennzeichen kein Autor,
     sondern die Netzwerk-Kennzeichnung aus _social_feed_icon.html.twig.
  ================ */
  .socialfeedlist__info .socialfeedlist__meta {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm);
    color: var(--text-color-default);
    gap: 0.25em 0.9rem;
    flex-flow: wrap;
  }
  .socialfeedlist__info .socialfeedlist__meta-item {
    display: flex;
    align-items: center;
  }
  .socialfeedlist__info .socialfeedlist__divider {
    padding-inline-end: 0.9rem;
  }
  /* ================
     Meta-Zeile – Responsive (Mobilansicht)
     Datum und Netzwerk untereinander statt nebeneinander
  ================ */
  @media (max-width: 26.25rem) {
    .socialfeedlist__info .socialfeedlist__meta {
      display: block;
    }
    .socialfeedlist__info .socialfeedlist__divider {
      display: none;
    }
  }
}
/* ==========================================================================
   Autor: Agentur KOPFNUSS – Marco Schädlich
   Komponente/Datei: Background Inverted – Projekt Pohlteich
   Beschreibung: Projektspezifische Ergänzung zu .background-color--dark. Deckt die
     Komponenten ab, deren Farb-Tokens am Element selbst deklariert werden und die
     deshalb von den geerbten Rollen aus _l-background-inverted.scss nicht erreicht
     werden. Hier landet alles, was an konkrete Komponenten dieses Projekts gebunden ist.
   Layer: projects
   Abhängig von: s-tokens-semantic.scss, s-tokens-project.scss,
     _l-background-inverted.scss, _c-text-icon.scss, _c-rsce-icon-text--vars.scss,
     _e-contao-navigation-accessible.scss
   Verwendete Tokens: --text-color-default-inverted, --text-color-default-inverted-hover,
     --text-color-extra-light, --navigation-color-default,
     --navigation-color-default-hover, --navigation-color-default-inverted,
     --navigation-color-default-hover-inverted
   Projekt-Tokens:
     --rsce-headline-subheadline-color-subheadline-inverted -> _s-tokens-project.scss
   Definierte Tokens: none
   Überschriebene Tokens:
     --link-text-icon-color -> _c-text-icon.scss
     --link-text-icon-color-hover -> _c-text-icon.scss
     --link-text-icon-icon-icon -> _c-text-icon.scss
     --badge-color -> _c-rsce-icon-text--vars.scss
     --rsce-headline-subheadline-color-subheadline -> _s-tokens-project.scss
     --nav-color -> _e-contao-navigation-accessible.scss
     --nav-active-color -> _e-contao-navigation-accessible.scss
   BEM-Blöcke: .background-color (ausschließlich als Modifier-Klassen im Einsatz)
   RSCE-Templates: none
   Assets: none
   ========================================================================== */
/*
 * Warum Layer "projects" und nicht "layout":
 * .text-icon--link und .badge deklarieren ihre Farb-Tokens am Element selbst
 * (Layer components). Zwei Gründe machen einen Override aus "layout" wirkungslos:
 *   1. Ein am Vorfahren gesetzter Wert wird nicht geerbt, wenn das Element den Token
 *      selbst deklariert – der Selektor muss also am Element ansetzen.
 *   2. In der Layer-Reihenfolge steht layout VOR components; components würde gewinnen.
 * "projects" steht hinter components und utilities, deshalb greifen die Overrides hier.
 */
@layer projects {
  /* ================
     Feste dunkle Surface – komponentenspezifische Tokens
  ================ */
  .background-color--dark {
    /* ================
       Text-Icon-Link – Farben für dunklen Hintergrund
    ================ */
  }
  .background-color--dark .text-icon--link {
    --link-text-icon-color: var(--text-color-default-inverted);
    --link-text-icon-color-hover: var(--text-color-default-inverted-hover);
    --link-text-icon-icon-icon: var(--text-color-extra-light);
  }
  .background-color--dark {
    /* ================
       Badge – Textfarbe invertieren
    ================ */
  }
  .background-color--dark .badge.badge--only-text-icon {
    --badge-color: var(--text-color-default-inverted);
  }
  .background-color--dark {
    /* ================
        Headline Top / Bottom – Textfarbe invertieren
    ================ */
  }
  .background-color--dark .headline-subheadline .headline-top,
  .background-color--dark .headline-subheadline .headline-bottom {
    --rsce-headline-subheadline-color-subheadline: var(--rsce-headline-subheadline-color-subheadline-inverted);
  }
  .background-color--dark {
    /* ================
       Navigation Accessible – Desktop-Hauptebene
       Sonderfall: Die Navigation legt ihre Tokens in
       _e-contao-navigation-accessible.scss als Aliasse auf :root an
       (--nav-color: var(--navigation-color-default)). Ein solcher Alias wird am
       definierenden Element aufgelöst – auf :root steht dort also bereits die
       nicht-invertierte Farbe, die als fertiger Wert nach unten vererbt wird.
       Der Override von --navigation-color-default in _l-background-inverted.scss
       kommt deshalb nie an; die --nav-*-Tokens müssen direkt gesetzt werden.
       Betrifft nur den Desktop-Modus: die mobile Navigation ist über
       --nav-mobile-* ein eigener Farbkontext mit eigenem Hintergrund.
    ================ */
    --nav-color: var(--navigation-color-default-inverted);
    --nav-active-color: var(--navigation-color-default-hover-inverted);
    /* ================
       Desktop-Dropdown – Farbkontext zurücksetzen
       Die Submenüs behalten ihre eigene helle Fläche
       (--nav-submenu-background: #fff). Ohne diesen Reset würde die geerbte
       invertierte Schriftfarbe dort weiß auf weiß stehen.
    ================ */
  }
  .background-color--dark .navigation-main ul ul {
    --nav-color: var(--navigation-color-default);
    --nav-active-color: var(--navigation-color-default-hover);
  }
}
/* 85) themes */
/* @use "./85-themes/your-theme-name" as *; */
/* define layer stack */
@layer settings, generic, base, layout, extensions, components, utilities, overrides, projects, themes;

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