@import url("../../../../bootstrap_package/Resources/Public/Contrib/photoswipe/photoswipe.css");
@import url("../../../../bootstrap_package/Resources/Public/Contrib/photoswipe/photoswipe-dynamic-caption-plugin.css");

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/*
 * Font-Face Definitions
 */

/* Bootstrap Icons */
@font-face {
  font-family: "bootstrap-icons";
  src: url("../packages/bootstrap-icons/fonts/bootstrap-icons.woff2") format("woff2"),
       url("../packages/bootstrap-icons/fonts/bootstrap-icons.woff") format("woff");
}

.accordion-collapse.collapse:not(.show) {
  display: none;
}
main .cookie-set {
  background: var(--color-primary);
  display: inline-block;
  padding: 1rem;
  color: #fff;
  border-radius: 2rem;
}

/* Prompt Latin */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/prompt/prompt-v12-latin-100.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/prompt/prompt-v12-latin-100italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/prompt/prompt-v12-latin-200.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/prompt/prompt-v12-latin-200italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/prompt/prompt-v12-latin-300.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/prompt/prompt-v12-latin-300italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prompt/prompt-v12-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/prompt/prompt-v12-latin-italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/prompt/prompt-v12-latin-500.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/prompt/prompt-v12-latin-500italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/prompt/prompt-v12-latin-600.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/prompt/prompt-v12-latin-600italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/prompt/prompt-v12-latin-700.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/prompt/prompt-v12-latin-700italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/prompt/prompt-v12-latin-800.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/prompt/prompt-v12-latin-800italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/prompt/prompt-v12-latin-900.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/prompt/prompt-v12-latin-900italic.woff2') format('woff2');
  font-display: swap;
}

/*
 * CSS Variablen
 */
:root {
  /* Logo-Farben */
  --color-blue-logo: oklch(from rgb(10 135 215) l c h); /* #0a87d7 */
  --color-blue-light-logo: oklch(from rgb(90 154 209) l c h); /* #5a9ad1 */

  /* Farben */
  --color-blue: oklch(from rgb(19 43 97) l c h); /* #132b61 */
  --color-blue-light: oklch(from rgb(0 166 229) l c h); /* #00a6e5 */
  --color-yellow: oklch(from rgb(232 198 24) l c h); /* #e8c618 */
  --color-gray: oklch(from rgb(90 90 81) l c h); /* #5a5a51 */
  --color-gray-light: oklch(from #ebebeb l c h); /* #ebebeb */

  --color-black: oklch(from #000000 l c h); /* #000000 */
  --color-white: oklch(from #ffffff l c h); /* #ffffff */

  /* TYPO3 Farben */
  --color-primary: var(--color-blue);
  --color-secondary: var(--color-yellow);
  --color-tertiary: var(--color-blue-light);
  --color-tertiary-hover: oklch(from var(--color-tertiary) 55% c h);
  --color-quaternary: var(--color-gray);

    /* Bootstrap Farben */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-tertiary: var(--color-tertiary);

  /* Text Selection */
  --color-selection-primary: oklch(from var(--color-primary) 75% c h / 0.5);

  /* Schatten */
  --color-shadow: oklch(from #000000 l c h / 0.1);

  /* Layout */
  --bs-container-max-inline-size: 1920px; /* Bootstrap: Max Container Width */
  --wqhd-max-inline-size: 2560px;
  --uhd-max-inline-size: 3840px;
  --offset-inline: 6.25rem;
  --header-block-size: clamp(5rem, calc(10vw + 1rem), 10rem);

  /* Seitenverhältnisse */
	--ratio-square: 1 / 1;
	--ratio-wide: 16 / 9;
	--ratio-tall: 9 / 16;
	--ratio-ultrawide: 21 / 9;
	--ratio-standard: 4 / 3;
	--ratio-portrait: 3 / 4;
	--ratio-banner: 3 / 1;
	--ratio-banner-wide: 4 / 1;
	--ratio-cinema: 2.39 / 1;
  --ratio-cinema-classic: 2.35 / 1;
  --ratio-cinema-ultrawide: 2.76 / 1;
	--ratio-1-2: 1 / 2;
	--ratio-2-1: 2 / 1;
  --ratio-golden: 1.618 / 1;
  --ratio-golden-inverse: 1 / 1.618;
	--ratio-photo-standard: 3 / 2;
	--ratio-photo-portrait: 2 / 3;
	--ratio-auto: auto;

  /* Übergänge */
	--transition-duration: 250ms;
	--transition-timing: ease-in-out;
	--transition-delay: 0ms;

  /* Animationen */
	--animation-duration: 250ms;
  --animation-delay: 0ms;
	--animation-timing: ease-in-out;
	--animation-direction: normal;
  --animation-fill-mode: forwards;

  /* Logo-Größe */
  --max-logo-size: clamp(10rem, calc(20vw - 1rem), 16rem);

  /* Typografie */
  --bs-body-font-family: 'Prompt', system-ui, Arial, Helvetica, sans-serif; /* Bootstrap: Body Font Family */
  --font-family-headings: 'Prompt', system-ui, Arial, sans-serif;
  --font-family-headings-condensed: 'Prompt', system-ui, Arial, sans-serif;
  --font-family-base: 'Prompt', system-ui, Arial, sans-serif;

  --font-family-h1: var(--font-family-headings);
  --font-family-h2: var(--font-family-headings);
  --font-family-h3: var(--font-family-headings);
  --font-family-h4: var(--font-family-headings);
  --font-family-h5: var(--font-family-headings);
  --font-family-h6: var(--font-family-headings);

  --font-color-headings: var(--color-primary);
  --font-color-paragraph: var(--color-primary);
  --font-color-links: var(--color-primary);
  --font-color-links-hover: var(--color-tertiary);

  --font-size-h1: clamp(3rem, calc(5vw - 1rem), 4.5rem);
  --font-size-h2: clamp(.85rem, calc(5vw - 1rem), 1.2rem);
  --font-size-h3: clamp(2.25rem, calc(5vw - 1rem), 3.5rem);
  --font-size-h4: clamp(2rem, calc(5vw - 1rem), 2.75rem);
  --font-size-h5: clamp(1.75rem, calc(5vw - 1rem), 2.5rem);
  --font-size-h6: clamp(1.5rem, calc(5vw - 1rem), 2rem);
  --font-size-paragraph: 1.2rem;
  --font-size-lead: 1.25rem;
  --font-size-nav-item: clamp(1.4rem, calc(5vw - 4rem), 2.25rem);
  --font-size-social-media: clamp(2rem, calc(5vw - 1rem), 2.4rem);

  --font-weight-h1: 200;
  --font-weight-h2: 400;
  --font-weight-h3: 500;
  --font-weight-h4: 200;
  --font-weight-h5: 400;
  --font-weight-h6: 400;
  --font-weight-paragraph: 300;
  --font-weight-lead: 300;
  --font-weight-strong: 500;
  --font-weight-stronger: 600;

  --line-height-h1: 1.0;
  --line-height-h2: 1.1;
  --line-height-h3: 1.1;
  --line-height-h4: 1.1;
  --line-height-h5: 1.2;
  --line-height-h6: 1.3;
  --line-height-paragraph: 1.5;

  --max-inline-size-h1: 30ch;
  --max-inline-size-h2: 40ch;
  --max-inline-size-h3: 50ch;
  --max-inline-size-h4: 60ch;
  --max-inline-size-h5: 65ch;
  --max-inline-size-h6: 70ch;
  --max-inline-size-paragraph: 75ch;

  /* Bootstrap Breakpoints */
  --bs-breakpoint-sm: 576px;    /* entspricht in 36rem */
  --bs-breakpoint-md: 768px;    /* entspricht in 48rem */
  --bs-breakpoint-lg: 992px;    /* entspricht in 62rem */
  --bs-breakpoint-xl: 1200px;   /* entspricht in 75rem */
  --bs-breakpoint-xxl: 1400px;  /* entspricht in 87.5rem */

  /* Bootstrap Abstände */
  --bs-size-1: .25rem;
  --bs-size-2: .5rem;
  --bs-size-3: 1rem;
  --bs-size-4: 1.5rem;
  --bs-size-5: 2rem;

  /* Bootstrap Abstände-Erweiterung */
  --bs-size-6: 3rem;
  --bs-size-7: 4rem;
  --bs-size-8: 5rem;
  --bs-size-9: 6rem;
  --bs-size-10: 8rem;

  /* Swiper */
  --swiper-pagination-bullet-size: .75rem;
  --swiper-pagination-color: var(--color-tertiary);
  --swiper-pagination-bullet-inactive-color: var(--color-tertiary);
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-inactive-opacity: .5;

  /*
   * SVG-Elemente
   */

  /* Interne Links */
  --svg-icon-internal-primary: url("../media/images/icons/icon-arrow-blue.svg");
  --svg-icon-internal-primary-hover: url("../media/images/icons/icon-arrow-blue-hover.svg");
  --svg-icon-internal-short-blue-light: url("../media/images/icons/icon-arrow-short-blue-light.svg");
  --svg-icon-internal-short-yellow: url("../media/images/icons/icon-arrow-short-yellow.svg");

  /* Download Links */
  --svg-icon-download-tertiary: url("../media/images/icons/icon-download-blue.svg");
  --svg-icon-download-tertiary-hover: url("../media/images/icons/icon-download-blue-hover.svg");

  /* Checkliste */
  --svg-icon-checklist-tertiary: url("../media/images/icons/icon-checkmark-blue.svg");
}

/*
 * Basic Styles
 */
html, body {
  min-block-size: 100%;
  margin: 0;
}

body,
body > .body-bg {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  background-color: var(--color-white);
  color: var(--color-primary);
  margin: 0;
  padding: 0;
}

main {
  flex: 1;

  & > *:is(section, div.section) {
    overflow: visible;
    overflow-x: clip;
  }
}

.container {
  --bs-gutter-x: 2rem;
  max-inline-size: calc(var(--bs-container-max-inline-size) + (2 * 12px));
}

/*
 * Typografie
 */
body {
  caret-color: var(--color-secondary);
}

body,
p,
.paragraph {
  font-family: var(--font-family-base);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-stretch: normal;
  font-style: normal;
  color: var(--font-color-paragraph);
  line-height: var(--line-height-paragraph);
}

.paragraph {
  max-inline-size: var(--max-inline-size-paragraph);
}

p, li {
  text-wrap-style: pretty;
}

a {
  &:not(.btn) {
    color: var(--font-color-links);
    /*text-decoration: none;
*/
    &:is(:hover, :focus-visible) {
      color: var(--font-color-links-hover);
      text-decoration: none;
    }
  }
}

::selection {
  background-color: var(--color-selection-primary);
}

button, input, select, textarea {
  color: var(--color-primary);
  font-weight: 200;
  width: 100%;
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  background-color: #fff;
  border: 1px solid #132b61;
}

input[type="checkbox"] {
  padding: unset;
  &:is(.form-check-input) {
    border-color: var(--color-secondary);
    box-shadow: none;
    margin-block: 0;

    &:is(:checked) {
      background-color: var(--color-secondary);
    }
  }
}
form > table{
  width: 100%;
}
/*form > table tr{
  padding-bottom: 1rem;
}
form > table td{
  vertical-align: middle;
}*/
form table tr {
    display: block;
    margin-bottom: 12px;
}

form table td {
    display: block;
    width: 100%;
}
form table tr:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
form table tr:has(input[type="checkbox"]) td {
    display: block;
}
form table tr:has(input[type="checkbox"]) td:last-child {
    order: 1;
    max-width: 5%;
}
form table tr:has(input[type="checkbox"]) td:first-child {
    order: 2;
}
input:is([type="text"],[type="email"], [type="url"], [type="tel"], [type="search"], [type="password"]) {
  &:is(.form-control) {
    color: var(--color-gray);
    caret-color: var(--color-tertiary);
  }
}

input:is([type="text"],[type="email"], [type="url"], [type="tel"], [type="search"], [type="password"]),
textarea {


  &::placeholder {
    color: var(--color-gray);
    opacity: .75;
    transition:
      opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
  }

  &:is(:focus) {
    &::placeholder {
      opacity: .25;
    }
  }
}

.form-check {
  & > * {
    &:is(:hover, :focus-visible) {
      cursor: pointer;
    }
  }
}

strong, b {
  font-weight: var(--font-weight-strong);
}

.fs-paragraph {
  font-size: var(--font-size-paragraph) !important;
}

.fw-paragraph {
  font-weight: var(--font-weight-paragraph) !important;
}

.text-normalize {
  text-transform: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--font-color-headings);
  text-transform: none;
  text-wrap-style: balance;
  hyphens: auto;
  hyphenate-limit-chars: 16 4 8;
  margin-block-start: 0;
  margin-block-end: .5lh;
}

h1,
.h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h1);
  max-inline-size: var(--max-inline-size-h1);
}

h2,
.h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h2);
  hyphenate-limit-chars: 16 4 10;
  max-inline-size: var(--max-inline-size-h2);
}

h3,
.h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h3);
  max-inline-size: var(--max-inline-size-h3);

  strong, b {
    font-weight: var(--font-weight-stronger);
  }

  &:not(:is(.paragraph, .accordion-header)) {
    &:first-of-type {
      max-inline-size: 35ch;
      text-wrap-style: auto;
    }
  }
}

h4,
.h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h4);
  max-inline-size: var(--max-inline-size-h4);
}

h5,
.h5 {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h5);
  max-inline-size: var(--max-inline-size-h5);
}

h6,
.h6 {
  font-family: var(--font-family-h6);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-h6);
  max-inline-size: var(--max-inline-size-h6);
}

/*
 * Text Alignment
*/
h1, h2, h3, h4, h5, h6, p,
.h1, .h2, .h3, .h4, .h5, .h6, .paragraph {
  &:is(.text-start, .text-left) {
    text-align: start;
    margin-inline: auto 0;
  }

  &:is(.text-center) {
    text-align: center;
    margin-inline: auto;
  }

  &:is(.text-end, .text-right) {
    text-align: end;
    margin-inline: auto 0;
  }
}

.text-start > *:is(
  p, h1, h2, h3, h4, h5, h6, a,
  .h1, .h2, .h3, .h4, .h5, .h6, .paragraph
) {
  margin-inline: 0 auto;
}

.text-center > *:is(
  p, h1, h2, h3, h4, h5, h6, a,
  .h1, .h2, .h3, .h4, .h5, .h6, .paragraph
) {
  margin-inline: auto;
}

.text-end > *:is(
  p, h1, h2, h3, h4, h5, h6, a,
  .h1, .h2, .h3, .h4, .h5, .h6, .paragraph
) {
  margin-inline: auto 0;
}

/*
 * Hilfsklassen für Schriftgrößen und -stärken
 */
.fs-1 {
  font-size: var(--font-size-h1) !important;
}

.fs-2 {
  font-size: var(--font-size-h2) !important;
}

.fs-3 {
  font-size: var(--font-size-h3) !important;
}

.fs-4 {
  font-size: var(--font-size-h4) !important;
}

.fs-5 {
  font-size: var(--font-size-h5) !important;
}

.fs-6 {
  font-size: var(--font-size-h6) !important;
}

.fw-1 {
  font-weight: var(--font-weight-h1) !important;
}

.fw-2 {
  font-weight: var(--font-weight-h2) !important;
}

.fw-3 {
  font-weight: var(--font-weight-h3) !important;
}

.fw-4 {
  font-weight: var(--font-weight-h4) !important;
}

.fw-5 {
  font-weight: var(--font-weight-h5) !important;
}

.fw-6 {
  font-weight: var(--font-weight-h6) !important;
}


/*
 * Hilfsklassen für Schriftfarben
 */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-tertiary {
  color: var(--color-tertiary) !important;
}

.text-quaternary {
  color: var(--color-quaternary) !important;
}

.text-gray {
  color: var(--color-gray) !important;
}

.text-gray-light {
  color: var(--color-gray-light) !important;
}


/*
 * Hilfsklassen für Hintergrundfarben
 */
.bg-primary, .frame-background-primary {
  background-color: var(--color-primary) !important;

  h2, h3, h4, h5, h6, p {
    color: var(--color-white);
  }

  ::selection {
    background-color: var(--color-selection-primary);
  }
}

.bg-secondary, .frame-background-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-tertiary, .frame-background-tertiary {
  background-color: var(--color-tertiary) !important;
}

.bg-quaternary, .frame-background-quaternary {
  background-color: var(--color-quaternary) !important;
}
.frame-background-light{
  background-color: rgba(255,255,255,0.1) !important;
}
.frame-background-light p{
  margin: 0;
}
.frame-background-primary, .frame-background-secondary, .frame-background-tertiary, .frame-background-quaternary, .frame-background-light{
  padding: 2rem;
  border-radius: var(--bs-border-radius-xxl) !important;
}
.bg-gray {
  background-color: var(--color-gray) !important;
}

.bg-gray-light {
  background-color: var(--color-gray-light) !important;
}

.bg-gradient-primary-to-tertiary {
  --color-gradient-angle: 90deg;
  --color-gradient-start: var(--color-primary);
  --color-gradient-end: var(--color-tertiary);

  background-image: linear-gradient(
    in oklch var(--color-gradient-angle, to left),
    var(--color-gradient-start),
    var(--color-gradient-end)
  );
}

.bg-stripes {
  --_stripe-thickness: clamp(8rem, calc(20vw - 2rem), 16rem);
  --_stripe-spacing: clamp(8rem, calc(20vw - 2rem), 16rem);

  background-image: repeating-linear-gradient(
    45deg,
    oklch(from var(--color-black) l c h / .03) 0,
    oklch(from var(--color-black) l c h / .03) var(--_stripe-thickness),
    transparent var(--_stripe-thickness),
    transparent calc(var(--_stripe-thickness) + var(--_stripe-spacing))
  );
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  &:is(.bg-primary) {
    background-image: repeating-linear-gradient(
      45deg,
      oklch(from var(--color-primary) 80% 60% h / .2) 0,
      oklch(from var(--color-primary) 80% 60% h / .2) var(--_stripe-thickness),
      transparent var(--_stripe-thickness),
      transparent calc(var(--_stripe-thickness) + var(--_stripe-spacing))
    );
  }
}

/*
* Hilfsklassen für Rahmenfarben
*/
.border-primary {
  border-color: var(--color-primary) !important;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.border-tertiary {
  border-color: var(--color-tertiary) !important;
}

.border-quaternary {
  border-color: var(--color-quaternary) !important;
}

.border-gray {
  border-color: var(--color-gray) !important;
}

.border-gray-light {
  border-color: var(--color-gray-light) !important;
}


/*
 * Hilfasklassen für Seitenverhältnisse
 */
.ratio-square {
  aspect-ratio: var(--ratio-square) !important;
}

.ratio-wide {
  aspect-ratio: var(--ratio-wide) !important;
}

.ratio-tall {
  aspect-ratio: var(--ratio-tall) !important;
}

.ratio-ultrawide {
  aspect-ratio: var(--ratio-ultrawide) !important;
}

.ratio-standard {
  aspect-ratio: var(--ratio-standard) !important;
}

.ratio-portrait {
  aspect-ratio: var(--ratio-portrait) !important;
}

.ratio-banner {
  aspect-ratio: var(--ratio-banner) !important;
}

.ratio-cinema {
  aspect-ratio: var(--ratio-cinema) !important;
}

.ratio-cinema-classic {
  aspect-ratio: var(--ratio-cinema-classic) !important;
}

.ratio-cinema-ultrawide {
  aspect-ratio: var(--ratio-cinema-ultrawide) !important;
}

.ratio-1-2 {
  aspect-ratio: var(--ratio-1-2) !important;
}

.ratio-2-1 {
  aspect-ratio: var(--ratio-2-1) !important;
}

.ratio-golden {
  aspect-ratio: var(--ratio-golden) !important;
}

.ratio-golden-inverse {
  aspect-ratio: var(--ratio-golden-inverse) !important;
}

.ratio-photo-standard {
  aspect-ratio: var(--ratio-photo-standard) !important;
}

.ratio-photo-portrait {
  aspect-ratio: var(--ratio-photo-portrait) !important;
}

.ratio-auto {
  aspect-ratio: auto !important;
}

/*
 * Hilfsklassen für Objekt-Positionierung
 */
.object-position {
  /* links */
  &.object-position-x-left {
    --object-position-x: left;
  }

  /* horizontal zentriert */
  &.object-position-x-center {
    --object-position-x: center;
  }

  /* rechts */
  &.object-position-x-right {
    --object-position-x: right;
  }

  /* oben */
  &.object-position-y-top {
    --object-position-y: top;
  }

  /* vertikal zentriert */
  &.object-position-y-center {
    --object-position-y: center;
  }

  /* unten */
  &.object-position-y-bottom {
    --object-position-y: bottom;
  }

  object-position: var(--object-position-x, center) var(--object-position-y, center) !important;
}


/* IMG: Rendering Qualität */
img {
  image-rendering: auto;
}


/* SVG: Rendering Qualität */
svg {
  shape-rendering: geometricPrecision;
}


/* Fix: Sticky-Elemente kann Offcanvas überlappen */
.sticky-top {
  z-index: calc(var(--bs-offcanvas-zindex) - 1);

  &:is(.top-1) {
    top: calc(var(--header-block-size) + var(--bs-size-1));
  }

  &:is(.top-2) {
    top: calc(var(--header-block-size) + var(--bs-size-2));
  }

  &:is(.top-3) {
    top: calc(var(--header-block-size) + var(--bs-size-3));
  }

  &:is(.top-4) {
    top: calc(var(--header-block-size) + var(--bs-size-4));
  }

  &:is(.top-5) {
    top: calc(var(--header-block-size) + var(--bs-size-5));
  }

  &:is(.top-6) {
    top: calc(var(--header-block-size) + var(--bs-size-6));
  }

  &:is(.top-7) {
    top: calc(var(--header-block-size) + var(--bs-size-7));
  }

  &:is(.top-8) {
    top: calc(var(--header-block-size) + var(--bs-size-8));
  }

  &:is(.top-9) {
    top: calc(var(--header-block-size) + var(--bs-size-9));
  }

  &:is(.top-10) {
    top: calc(var(--header-block-size) + var(--bs-size-10));
  }
}


/*
 * Grid-Stack
 */
.grid-stack {
  & > * {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    z-index: 1;

    &:is(.media-container) {
      z-index: 0;
    }
  }
}


/*
 * Buttons
 */
.btn,
.cc-btn {
  --bs-btn-line-height: normal;

  display: flex;
  inline-size: fit-content;
  justify-content: center;
  align-items: center;

  font-family: inherit;
  font-size: clamp(1rem, calc(5vw - 1rem), 1.2rem);
  text-transform: none;
  text-decoration: none;

  border-width: 2px;
  border-style: solid;
  border-radius: 3rem;

  padding-inline: 2.25rem;
  padding-block: .675rem;

  &:is(
    .btn-download-primary,
    .btn-download-secondary,
    .btn-download-tertiary,
    .btn-download-white,
    .btn-inline-link-external-primary,
    .btn-inline-link-external-secondary,
    .btn-inline-link-external-white,
    .btn-inline-link-internal-primary
  ) {
    &:after {
      content: "";
      display: inline-flex;
      aspect-ratio: var(--ratio-square);
      inline-size: 1rem;
      background-repeat: no-repeat;
      background-position: center right;
      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      translate: 0 0;
    }

    &:is(:active) {
      background-color: inherit;
      color: inherit;
      border-color: inherit;
    }

    &:is(:hover, :focus-visible) {
      text-decoration: none;

      &:after {
        translate: .25rem 0;
      }
    }
  }

  /* Button: Primär und Blau */
  &:is(.btn-primary, .btn-blue) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);

    &:is(:hover, :active, :focus-visible) {
      background-color: var(--color-tertiary);
      border-color: var(--color-tertiary);
    }
  }

  /* Button: Sekundär und Gelb */
  &:is(.btn-secondary, .btn-yellow) {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary);

    &:is(:hover, :active, :focus-visible) {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
    }
  }

  /* Button: Tertiär und Hellblau */
  &:is(.btn-tertiary, .btn-blue-light, .cc-dismiss) {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-white);

    &:is(:hover, :active, :focus-visible) {
      background-color: var(--color-tertiary-hover);
      border-color: var(--color-tertiary-hover);
      color: var(--color-white);
    }
  }

  /* Button Outline: Primär und Blau */
  &:is(.btn-outline-primary, .btn-outline-blue) {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);

    &:is(:hover, :focus-visible) {
      background-color: var(--color-tertiary);
      border-color: var(--color-tertiary);
      color: var(--color-white);
    }
  }

  /* Button Outline: Sekundär und Gelb */
  &:is(.btn-outline-secondary, .btn-outline-yellow) {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);

    &:is(:hover, :focus-visible) {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
    }
  }

  /* Button Outline: Tertiär und Hellblau */
  &:is(.btn-outline-tertiary, .btn-outline-blue-light) {
    background-color: transparent;
    border-color: var(--color-tertiary);
    color: var(--color-tertiary);

    &:is(:hover, :focus-visible) {
      border-color: var(--color-tertiary-hover);
      color: var(--color-tertiary-hover);
    }
  }

  /* Button Inline Link */
  &:is(.btn-inline-link) {
    background-color: transparent;
    gap: .5rem;

    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-paragraph);

    border-color: transparent;
    border-radius: .25rem;

    padding: 0;
  }

  /* Button Plain */
  &:is(.btn-plain) {
    background-color: inherit;

    font-size: inherit;
    color: inherit;
    text-decoration: none;
    line-height: inherit;

    border-color: transparent;
    border-radius: .25rem;

    padding-inline: 0;
    padding-block: 0;
  }

  &:is(
    .btn-download-primary,
    .btn-download-secondary,
    .btn-download-tertiary,
    .btn-download-white,
    .btn-inline-link-external-primary,
    .btn-inline-link-external-secondary,
    .btn-inline-link-external-white,
    .btn-inline-link-internal-primary
  ) {
    background-color: transparent;
    gap: 1.2rem;

    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-paragraph);
    text-transform: none;

    border-radius: initial;

    padding-inline: 0;
    padding-block: 0;
  }

  &:is(
    .btn-inline-link-internal-primary
  ) {
    &:after {
      aspect-ratio: var(--ratio-auto);
      inline-size: 1.2rem;
      block-size: .5rem;
      transform: translateY(.15rem);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        inline-size: 1.65rem;
        translate: .25rem 0;
      }
    }
  }


  &:is(.btn-download-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-download-primary);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-secondary);

      &:after {
        background-image: var(--svg-icon-download-secondary);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-download-secondary) {
    color: var(--color-secondary);

    &:after {
      background-image: var(--svg-icon-download-secondary);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-primary);

      &:after {
        background-image: var(--svg-icon-download-primary);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-download-tertiary) {
    color: var(--color-blue-light-logo);

    &:after {
      background-image: var(--svg-icon-download-tertiary);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-blue-logo);

      &:after {
        background-image: var(--svg-icon-download-tertiary-hover);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-download-white) {
    color: var(--color-white);

    &:after {
      background-image: var(--svg-icon-download-white);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-primary);

      &:after {
        background-image: var(--svg-icon-download-primary);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-inline-link-external-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-external-secondary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-secondary);
        translate: .25rem -.25rem;
      }
    }
  }

  &:is(.btn-inline-link-external-secondary) {
    color: var(--color-secondary);

    &:after {
      background-image: var(--svg-icon-external-primary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-primary);
        translate: .25rem -.25rem;
      }
    }
  }

  &:is(.btn-inline-link-external-white) {
    color: var(--color-white);

    &:after {
      background-image: var(--svg-icon-external-primary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-primary);
        translate: .25rem -.25rem;
      }
    }
  }

  &:is(.btn-inline-link-internal-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-internal-primary);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-tertiary);

      &:after {
        background-image: var(--svg-icon-internal-primary-hover);
        translate: .25rem 0;
      }
    }
  }

  &:is(.btn-inline-link-internal-alt) {
    color: inherit;
    column-gap: 1.25rem;
    padding-inline-start: 0;

    &:before {
      content: "";
      display: inline-flex;
      aspect-ratio: var(--ratio-square);
      inline-size: 3.25rem;
      block-size: auto;

      background-image: var(--svg-icon-internal-short-blue-light);
      background-repeat: no-repeat;
      background-position: center center;

      border: 2px solid var(--color-tertiary);
      border-radius: 50%;

      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      transform: rotate(-45deg);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-secondary);

      &:before {
        background-image: var(--svg-icon-internal-short-yellow);
        background-position: calc(50% + .25rem) center;
        border-color: var(--color-secondary);
      }
    }
  }

  &:is(.btn-mobile-menu) {
    inline-size: 3rem;
    aspect-ratio: var(--ratio-square);

    font-size: 2rem;
    line-height: 1;
    color: var(--color-white);

    padding-inline: 0;
    padding-block: 0;

    &:is(:active) {
      color: var(--color-secondary);
      border-color: transparent;
    }
  }
}

/* OFff-Canvas Button Toggle */
button {
  &:is(.offcanvas-toggle) {
    display: grid;
    aspect-ratio: var(--ratio-square);
    inline-size: 2.5rem;
    place-items: center;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: 50%;
    border-color: transparent;
    transition:
      background-color var(--transition-duration) var(--transition-timing) var(--transition-delay);

    &:before,
    &:after {
      grid-row: 1 / -1;
      grid-column: 1 / -1;

      content: "";
      display: block;
      inline-size: 1rem;
      block-size: 2px;
      background-color: currentColor;
      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
    }

    &:before {
      transform: rotate(90deg);
    }

    &:after {
      transform: rotate(0deg);
    }
  }

  &:is([aria-show="true"]) {
    background-color: transparent;

    &:before {
      transform: rotate(180deg);
    }

    &:after {
      transform: rotate(180deg);
    }
  }
}


/* Checklisten */
ul {
  /* Checkliste mit Checkmark Tertiary */
  &:is(.checklist-tertiary) {
    inline-size: fit-content;
    list-style: none;
    padding-inline: 0;

    li {
      --_icon-size: 1.5rem;

      display: grid;
      max-inline-size: 60ch;
      grid-template-columns: auto 1fr;
      column-gap: 1.5ch;
      font-size: inherit;
      margin-block: .85lh;

      &:before {
        content: "";
        aspect-ratio: var(--ratio-square);
        inline-size: var(--_icon-size);
        block-size: auto;
        transform:
          translateY(.15lh);

        background-image: var(--svg-icon-checklist-tertiary);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
  }
}


/*
 * Animationen
 */
@keyframes fadeIn {
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeOut {
  to{
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes enabledWebsite {
  to {
    pointer-events: auto;
    max-height: initial;
    overflow-y: auto;
  }
}

@keyframes disabledWebsite {
  to {
    pointer-events: none;
    max-height: 100vh;
    overflow-y: hidden;
  }
}

@keyframes gradientAnimation {
  from {
    background-position: 0% center;
  }

  to {
    background-position: 100% center;
  }
}


/*
 * Abstandshalter
 */
.seperator-1,
.seperator-2,
.seperator-3,
.seperator-4,
.seperator-5 {
  display: block;
  inline-size: 100% !important;
  block-size: 0 !important;
  margin: 0 !important;
}

.seperator-1 {
  padding-block: .5rem;
}

.seperator-2 {
  padding-block: 1rem;
}

.seperator-3 {
  padding-block: 2rem;
}

.seperator-4 {
  padding-block: 3.5rem;
}

.seperator-5 {
  padding-block: 5rem;
}

/*
* Bootstrap Abstandsklassen erweitern *-6 bis *-10
*/
/* Margin Utilities */
.m-6  { margin: var(--bs-size-6) !important; }
.m-7  { margin: var(--bs-size-7) !important; }
.m-8  { margin: var(--bs-size-8) !important; }
.m-9  { margin: var(--bs-size-9) !important; }
.m-10 { margin: var(--bs-size-10) !important; }

.mt-6  { margin-block-start: var(--bs-size-6) !important; }
.mt-7  { margin-block-start: var(--bs-size-7) !important; }
.mt-8  { margin-block-start: var(--bs-size-8) !important; }
.mt-9  { margin-block-start: var(--bs-size-9) !important; }
.mt-10 { margin-block-start: var(--bs-size-10) !important; }

.mb-6  { margin-block-end: var(--bs-size-6) !important; }
.mb-7  { margin-block-end: var(--bs-size-7) !important; }
.mb-8  { margin-block-end: var(--bs-size-8) !important; }
.mb-9  { margin-block-end: var(--bs-size-9) !important; }
.mb-10 { margin-block-end: var(--bs-size-10) !important; }

.mx-6  { margin-inline: var(--bs-size-6) !important; }
.mx-7  { margin-inline: var(--bs-size-7) !important; }
.mx-8  { margin-inline: var(--bs-size-8) !important; }
.mx-9  { margin-inline: var(--bs-size-9) !important; }
.mx-10 { margin-inline: var(--bs-size-10) !important; }

.my-6  { margin-block: var(--bs-size-6) !important; }
.my-7  { margin-block: var(--bs-size-7) !important; }
.my-8  { margin-block: var(--bs-size-8) !important; }
.my-9  { margin-block: var(--bs-size-9) !important; }
.my-10 { margin-block: var(--bs-size-10) !important; }

.ms-6  { margin-inline-start: var(--bs-size-6) !important; }
.ms-7  { margin-inline-start: var(--bs-size-7) !important; }
.ms-8  { margin-inline-start: var(--bs-size-8) !important; }
.ms-9  { margin-inline-start: var(--bs-size-9) !important; }
.ms-10 { margin-inline-start: var(--bs-size-10) !important; }

.me-6  { margin-inline-end: var(--bs-size-6) !important; }
.me-7  { margin-inline-end: var(--bs-size-7) !important; }
.me-8  { margin-inline-end: var(--bs-size-8) !important; }
.me-9  { margin-inline-end: var(--bs-size-9) !important; }
.me-10 { margin-inline-end: var(--bs-size-10) !important; }


/* Padding Utilities */
.p-6  { padding: var(--bs-size-6) !important; }
.p-7  { padding: var(--bs-size-7) !important; }
.p-8  { padding: var(--bs-size-8) !important; }
.p-9  { padding: var(--bs-size-9) !important; }
.p-10 { padding: var(--bs-size-10) !important; }

.pt-6  { padding-block-start: var(--bs-size-6) !important; }
.pt-7  { padding-block-start: var(--bs-size-7) !important; }
.pt-8  { padding-block-start: var(--bs-size-8) !important; }
.pt-9  { padding-block-start: var(--bs-size-9) !important; }
.pt-10 { padding-block-start: var(--bs-size-10) !important; }

.pb-6  { padding-block-end: var(--bs-size-6) !important; }
.pb-7  { padding-block-end: var(--bs-size-7) !important; }
.pb-8  { padding-block-end: var(--bs-size-8) !important; }
.pb-9  { padding-block-end: var(--bs-size-9) !important; }
.pb-10 { padding-block-end: var(--bs-size-10) !important; }

.px-6  { padding-inline: var(--bs-size-6) !important; }
.px-7  { padding-inline: var(--bs-size-7) !important; }
.px-8  { padding-inline: var(--bs-size-8) !important; }
.px-9  { padding-inline: var(--bs-size-9) !important; }
.px-10 { padding-inline: var(--bs-size-10) !important; }

.py-6  { padding-block: var(--bs-size-6) !important; }
.py-7  { padding-block: var(--bs-size-7) !important; }
.py-8  { padding-block: var(--bs-size-8) !important; }
.py-9  { padding-block: var(--bs-size-9) !important; }
.py-10 { padding-block: var(--bs-size-10) !important; }

.ps-6  { padding-inline-start: var(--bs-size-6) !important; }
.ps-7  { padding-inline-start: var(--bs-size-7) !important; }
.ps-8  { padding-inline-start: var(--bs-size-8) !important; }
.ps-9  { padding-inline-start: var(--bs-size-9) !important; }
.ps-10 { padding-inline-start: var(--bs-size-10) !important; }

.pe-6  { padding-inline-end: var(--bs-size-6) !important; }
.pe-7  { padding-inline-end: var(--bs-size-7) !important; }
.pe-8  { padding-inline-end: var(--bs-size-8) !important; }
.pe-9  { padding-inline-end: var(--bs-size-9) !important; }
.pe-10 { padding-inline-end: var(--bs-size-10) !important; }


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Margin Utilities */
  .m-sm-6  { margin: var(--bs-size-6) !important; }
  .m-sm-7  { margin: var(--bs-size-7) !important; }
  .m-sm-8  { margin: var(--bs-size-8) !important; }
  .m-sm-9  { margin: var(--bs-size-9) !important; }
  .m-sm-10 { margin: var(--bs-size-10) !important; }

  .mt-sm-6  { margin-block-start: var(--bs-size-6) !important; }
  .mt-sm-7  { margin-block-start: var(--bs-size-7) !important; }
  .mt-sm-8  { margin-block-start: var(--bs-size-8) !important; }
  .mt-sm-9  { margin-block-start: var(--bs-size-9) !important; }
  .mt-sm-10 { margin-block-start: var(--bs-size-10) !important; }

  .mb-sm-6  { margin-block-end: var(--bs-size-6) !important; }
  .mb-sm-7  { margin-block-end: var(--bs-size-7) !important; }
  .mb-sm-8  { margin-block-end: var(--bs-size-8) !important; }
  .mb-sm-9  { margin-block-end: var(--bs-size-9) !important; }
  .mb-sm-10 { margin-block-end: var(--bs-size-10) !important; }

  .mx-sm-6  { margin-inline: var(--bs-size-6) !important; }
  .mx-sm-7  { margin-inline: var(--bs-size-7) !important; }
  .mx-sm-8  { margin-inline: var(--bs-size-8) !important; }
  .mx-sm-9  { margin-inline: var(--bs-size-9) !important; }
  .mx-sm-10 { margin-inline: var(--bs-size-10) !important; }

  .my-sm-6  { margin-block: var(--bs-size-6) !important; }
  .my-sm-7  { margin-block: var(--bs-size-7) !important; }
  .my-sm-8  { margin-block: var(--bs-size-8) !important; }
  .my-sm-9  { margin-block: var(--bs-size-9) !important; }
  .my-sm-10 { margin-block: var(--bs-size-10) !important; }

  .ms-sm-6  { margin-inline-start: var(--bs-size-6) !important; }
  .ms-sm-7  { margin-inline-start: var(--bs-size-7) !important; }
  .ms-sm-8  { margin-inline-start: var(--bs-size-8) !important; }
  .ms-sm-9  { margin-inline-start: var(--bs-size-9) !important; }
  .ms-sm-10 { margin-inline-start: var(--bs-size-10) !important; }

  .me-sm-6  { margin-inline-end: var(--bs-size-6) !important; }
  .me-sm-7  { margin-inline-end: var(--bs-size-7) !important; }
  .me-sm-8  { margin-inline-end: var(--bs-size-8) !important; }
  .me-sm-9  { margin-inline-end: var(--bs-size-9) !important; }
  .me-sm-10 { margin-inline-end: var(--bs-size-10) !important; }


  /* Padding Utilities */
  .p-sm-6  { padding: var(--bs-size-6) !important; }
  .p-sm-7  { padding: var(--bs-size-7) !important; }
  .p-sm-8  { padding: var(--bs-size-8) !important; }
  .p-sm-9  { padding: var(--bs-size-9) !important; }
  .p-sm-10 { padding: var(--bs-size-10) !important; }

  .pt-sm-6  { padding-block-start: var(--bs-size-6) !important; }
  .pt-sm-7  { padding-block-start: var(--bs-size-7) !important; }
  .pt-sm-8  { padding-block-start: var(--bs-size-8) !important; }
  .pt-sm-9  { padding-block-start: var(--bs-size-9) !important; }
  .pt-sm-10 { padding-block-start: var(--bs-size-10) !important; }

  .pb-sm-6  { padding-block-end: var(--bs-size-6) !important; }
  .pb-sm-7  { padding-block-end: var(--bs-size-7) !important; }
  .pb-sm-8  { padding-block-end: var(--bs-size-8) !important; }
  .pb-sm-9  { padding-block-end: var(--bs-size-9) !important; }
  .pb-sm-10 { padding-block-end: var(--bs-size-10) !important; }

  .px-sm-6  { padding-inline: var(--bs-size-6) !important; }
  .px-sm-7  { padding-inline: var(--bs-size-7) !important; }
  .px-sm-8  { padding-inline: var(--bs-size-8) !important; }
  .px-sm-9  { padding-inline: var(--bs-size-9) !important; }
  .px-sm-10 { padding-inline: var(--bs-size-10) !important; }

  .py-sm-6  { padding-block: var(--bs-size-6) !important; }
  .py-sm-7  { padding-block: var(--bs-size-7) !important; }
  .py-sm-8  { padding-block: var(--bs-size-8) !important; }
  .py-sm-9  { padding-block: var(--bs-size-9) !important; }
  .py-sm-10 { padding-block: var(--bs-size-10) !important; }

  .ps-sm-6  { padding-inline-start: var(--bs-size-6) !important; }
  .ps-sm-7  { padding-inline-start: var(--bs-size-7) !important; }
  .ps-sm-8  { padding-inline-start: var(--bs-size-8) !important; }
  .ps-sm-9  { padding-inline-start: var(--bs-size-9) !important; }
  .ps-sm-10 { padding-inline-start: var(--bs-size-10) !important; }

  .pe-sm-6  { padding-inline-end: var(--bs-size-6) !important; }
  .pe-sm-7  { padding-inline-end: var(--bs-size-7) !important; }
  .pe-sm-8  { padding-inline-end: var(--bs-size-8) !important; }
  .pe-sm-9  { padding-inline-end: var(--bs-size-9) !important; }
  .pe-sm-10 { padding-inline-end: var(--bs-size-10) !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Margin Utilities */
  .m-md-6  { margin: var(--bs-size-6) !important; }
  .m-md-7  { margin: var(--bs-size-7) !important; }
  .m-md-8  { margin: var(--bs-size-8) !important; }
  .m-md-9  { margin: var(--bs-size-9) !important; }
  .m-md-10 { margin: var(--bs-size-10) !important; }

  .mt-md-6  { margin-block-start: var(--bs-size-6) !important; }
  .mt-md-7  { margin-block-start: var(--bs-size-7) !important; }
  .mt-md-8  { margin-block-start: var(--bs-size-8) !important; }
  .mt-md-9  { margin-block-start: var(--bs-size-9) !important; }
  .mt-md-10 { margin-block-start: var(--bs-size-10) !important; }

  .mb-md-6  { margin-block-end: var(--bs-size-6) !important; }
  .mb-md-7  { margin-block-end: var(--bs-size-7) !important; }
  .mb-md-8  { margin-block-end: var(--bs-size-8) !important; }
  .mb-md-9  { margin-block-end: var(--bs-size-9) !important; }
  .mb-md-10 { margin-block-end: var(--bs-size-10) !important; }

  .mx-md-6  { margin-inline: var(--bs-size-6) !important; }
  .mx-md-7  { margin-inline: var(--bs-size-7) !important; }
  .mx-md-8  { margin-inline: var(--bs-size-8) !important; }
  .mx-md-9  { margin-inline: var(--bs-size-9) !important; }
  .mx-md-10 { margin-inline: var(--bs-size-10) !important; }

  .my-md-6  { margin-block: var(--bs-size-6) !important; }
  .my-md-7  { margin-block: var(--bs-size-7) !important; }
  .my-md-8  { margin-block: var(--bs-size-8) !important; }
  .my-md-9  { margin-block: var(--bs-size-9) !important; }
  .my-md-10 { margin-block: var(--bs-size-10) !important; }

  .ms-md-6  { margin-inline-start: var(--bs-size-6) !important; }
  .ms-md-7  { margin-inline-start: var(--bs-size-7) !important; }
  .ms-md-8  { margin-inline-start: var(--bs-size-8) !important; }
  .ms-md-9  { margin-inline-start: var(--bs-size-9) !important; }
  .ms-md-10 { margin-inline-start: var(--bs-size-10) !important; }

  .me-md-6  { margin-inline-end: var(--bs-size-6) !important; }
  .me-md-7  { margin-inline-end: var(--bs-size-7) !important; }
  .me-md-8  { margin-inline-end: var(--bs-size-8) !important; }
  .me-md-9  { margin-inline-end: var(--bs-size-9) !important; }
  .me-md-10 { margin-inline-end: var(--bs-size-10) !important; }


  /* Padding Utilities */
  .p-md-6  { padding: var(--bs-size-6) !important; }
  .p-md-7  { padding: var(--bs-size-7) !important; }
  .p-md-8  { padding: var(--bs-size-8) !important; }
  .p-md-9  { padding: var(--bs-size-9) !important; }
  .p-md-10 { padding: var(--bs-size-10) !important; }

  .pt-md-6  { padding-block-start: var(--bs-size-6) !important; }
  .pt-md-7  { padding-block-start: var(--bs-size-7) !important; }
  .pt-md-8  { padding-block-start: var(--bs-size-8) !important; }
  .pt-md-9  { padding-block-start: var(--bs-size-9) !important; }
  .pt-md-10 { padding-block-start: var(--bs-size-10) !important; }

  .pb-md-6  { padding-block-end: var(--bs-size-6) !important; }
  .pb-md-7  { padding-block-end: var(--bs-size-7) !important; }
  .pb-md-8  { padding-block-end: var(--bs-size-8) !important; }
  .pb-md-9  { padding-block-end: var(--bs-size-9) !important; }
  .pb-md-10 { padding-block-end: var(--bs-size-10) !important; }

  .px-md-6  { padding-inline: var(--bs-size-6) !important; }
  .px-md-7  { padding-inline: var(--bs-size-7) !important; }
  .px-md-8  { padding-inline: var(--bs-size-8) !important; }
  .px-md-9  { padding-inline: var(--bs-size-9) !important; }
  .px-md-10 { padding-inline: var(--bs-size-10) !important; }

  .py-md-6  { padding-block: var(--bs-size-6) !important; }
  .py-md-7  { padding-block: var(--bs-size-7) !important; }
  .py-md-8  { padding-block: var(--bs-size-8) !important; }
  .py-md-9  { padding-block: var(--bs-size-9) !important; }
  .py-md-10 { padding-block: var(--bs-size-10) !important; }

  .ps-md-6  { padding-inline-start: var(--bs-size-6) !important; }
  .ps-md-7  { padding-inline-start: var(--bs-size-7) !important; }
  .ps-md-8  { padding-inline-start: var(--bs-size-8) !important; }
  .ps-md-9  { padding-inline-start: var(--bs-size-9) !important; }
  .ps-md-10 { padding-inline-start: var(--bs-size-10) !important; }

  .pe-md-6  { padding-inline-end: var(--bs-size-6) !important; }
  .pe-md-7  { padding-inline-end: var(--bs-size-7) !important; }
  .pe-md-8  { padding-inline-end: var(--bs-size-8) !important; }
  .pe-md-9  { padding-inline-end: var(--bs-size-9) !important; }
  .pe-md-10 { padding-inline-end: var(--bs-size-10) !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Margin Utilities */
  .m-lg-6  { margin: var(--bs-size-6) !important; }
  .m-lg-7  { margin: var(--bs-size-7) !important; }
  .m-lg-8  { margin: var(--bs-size-8) !important; }
  .m-lg-9  { margin: var(--bs-size-9) !important; }
  .m-lg-10 { margin: var(--bs-size-10) !important; }

  .mt-lg-6  { margin-block-start: var(--bs-size-6) !important; }
  .mt-lg-7  { margin-block-start: var(--bs-size-7) !important; }
  .mt-lg-8  { margin-block-start: var(--bs-size-8) !important; }
  .mt-lg-9  { margin-block-start: var(--bs-size-9) !important; }
  .mt-lg-10 { margin-block-start: var(--bs-size-10) !important; }

  .mb-lg-6  { margin-block-end: var(--bs-size-6) !important; }
  .mb-lg-7  { margin-block-end: var(--bs-size-7) !important; }
  .mb-lg-8  { margin-block-end: var(--bs-size-8) !important; }
  .mb-lg-9  { margin-block-end: var(--bs-size-9) !important; }
  .mb-lg-10 { margin-block-end: var(--bs-size-10) !important; }

  .mx-lg-6  { margin-inline: var(--bs-size-6) !important; }
  .mx-lg-7  { margin-inline: var(--bs-size-7) !important; }
  .mx-lg-8  { margin-inline: var(--bs-size-8) !important; }
  .mx-lg-9  { margin-inline: var(--bs-size-9) !important; }
  .mx-lg-10 { margin-inline: var(--bs-size-10) !important; }

  .my-lg-6  { margin-block: var(--bs-size-6) !important; }
  .my-lg-7  { margin-block: var(--bs-size-7) !important; }
  .my-lg-8  { margin-block: var(--bs-size-8) !important; }
  .my-lg-9  { margin-block: var(--bs-size-9) !important; }
  .my-lg-10 { margin-block: var(--bs-size-10) !important; }

  .ms-lg-6  { margin-inline-start: var(--bs-size-6) !important; }
  .ms-lg-7  { margin-inline-start: var(--bs-size-7) !important; }
  .ms-lg-8  { margin-inline-start: var(--bs-size-8) !important; }
  .ms-lg-9  { margin-inline-start: var(--bs-size-9) !important; }
  .ms-lg-10 { margin-inline-start: var(--bs-size-10) !important; }

  .me-lg-6  { margin-inline-end: var(--bs-size-6) !important; }
  .me-lg-7  { margin-inline-end: var(--bs-size-7) !important; }
  .me-lg-8  { margin-inline-end: var(--bs-size-8) !important; }
  .me-lg-9  { margin-inline-end: var(--bs-size-9) !important; }
  .me-lg-10 { margin-inline-end: var(--bs-size-10) !important; }


  /* Padding Utilities */
  .p-lg-6  { padding: var(--bs-size-6) !important; }
  .p-lg-7  { padding: var(--bs-size-7) !important; }
  .p-lg-8  { padding: var(--bs-size-8) !important; }
  .p-lg-9  { padding: var(--bs-size-9) !important; }
  .p-lg-10 { padding: var(--bs-size-10) !important; }

  .pt-lg-6  { padding-block-start: var(--bs-size-6) !important; }
  .pt-lg-7  { padding-block-start: var(--bs-size-7) !important; }
  .pt-lg-8  { padding-block-start: var(--bs-size-8) !important; }
  .pt-lg-9  { padding-block-start: var(--bs-size-9) !important; }
  .pt-lg-10 { padding-block-start: var(--bs-size-10) !important; }

  .pb-lg-6  { padding-block-end: var(--bs-size-6) !important; }
  .pb-lg-7  { padding-block-end: var(--bs-size-7) !important; }
  .pb-lg-8  { padding-block-end: var(--bs-size-8) !important; }
  .pb-lg-9  { padding-block-end: var(--bs-size-9) !important; }
  .pb-lg-10 { padding-block-end: var(--bs-size-10) !important; }

  .px-lg-6  { padding-inline: var(--bs-size-6) !important; }
  .px-lg-7  { padding-inline: var(--bs-size-7) !important; }
  .px-lg-8  { padding-inline: var(--bs-size-8) !important; }
  .px-lg-9  { padding-inline: var(--bs-size-9) !important; }
  .px-lg-10 { padding-inline: var(--bs-size-10) !important; }

  .py-lg-6  { padding-block: var(--bs-size-6) !important; }
  .py-lg-7  { padding-block: var(--bs-size-7) !important; }
  .py-lg-8  { padding-block: var(--bs-size-8) !important; }
  .py-lg-9  { padding-block: var(--bs-size-9) !important; }
  .py-lg-10 { padding-block: var(--bs-size-10) !important; }

  .ps-lg-6  { padding-inline-start: var(--bs-size-6) !important; }
  .ps-lg-7  { padding-inline-start: var(--bs-size-7) !important; }
  .ps-lg-8  { padding-inline-start: var(--bs-size-8) !important; }
  .ps-lg-9  { padding-inline-start: var(--bs-size-9) !important; }
  .ps-lg-10 { padding-inline-start: var(--bs-size-10) !important; }

  .pe-lg-6  { padding-inline-end: var(--bs-size-6) !important; }
  .pe-lg-7  { padding-inline-end: var(--bs-size-7) !important; }
  .pe-lg-8  { padding-inline-end: var(--bs-size-8) !important; }
  .pe-lg-9  { padding-inline-end: var(--bs-size-9) !important; }
  .pe-lg-10 { padding-inline-end: var(--bs-size-10) !important; }

  .container {
    --bs-gutter-x: 1.5rem;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Margin Utilities */
  .m-xl-6  { margin: var(--bs-size-6) !important; }
  .m-xl-7  { margin: var(--bs-size-7) !important; }
  .m-xl-8  { margin: var(--bs-size-8) !important; }
  .m-xl-9  { margin: var(--bs-size-9) !important; }
  .m-xl-10 { margin: var(--bs-size-10) !important; }

  .mt-xl-6  { margin-block-start: var(--bs-size-6) !important; }
  .mt-xl-7  { margin-block-start: var(--bs-size-7) !important; }
  .mt-xl-8  { margin-block-start: var(--bs-size-8) !important; }
  .mt-xl-9  { margin-block-start: var(--bs-size-9) !important; }
  .mt-xl-10 { margin-block-start: var(--bs-size-10) !important; }

  .mb-xl-6  { margin-block-end: var(--bs-size-6) !important; }
  .mb-xl-7  { margin-block-end: var(--bs-size-7) !important; }
  .mb-xl-8  { margin-block-end: var(--bs-size-8) !important; }
  .mb-xl-9  { margin-block-end: var(--bs-size-9) !important; }
  .mb-xl-10 { margin-block-end: var(--bs-size-10) !important; }

  .mx-xl-6  { margin-inline: var(--bs-size-6) !important; }
  .mx-xl-7  { margin-inline: var(--bs-size-7) !important; }
  .mx-xl-8  { margin-inline: var(--bs-size-8) !important; }
  .mx-xl-9  { margin-inline: var(--bs-size-9) !important; }
  .mx-xl-10 { margin-inline: var(--bs-size-10) !important; }

  .my-xl-6  { margin-block: var(--bs-size-6) !important; }
  .my-xl-7  { margin-block: var(--bs-size-7) !important; }
  .my-xl-8  { margin-block: var(--bs-size-8) !important; }
  .my-xl-9  { margin-block: var(--bs-size-9) !important; }
  .my-xl-10 { margin-block: var(--bs-size-10) !important; }

  .ms-xl-6  { margin-inline-start: var(--bs-size-6) !important; }
  .ms-xl-7  { margin-inline-start: var(--bs-size-7) !important; }
  .ms-xl-8  { margin-inline-start: var(--bs-size-8) !important; }
  .ms-xl-9  { margin-inline-start: var(--bs-size-9) !important; }
  .ms-xl-10 { margin-inline-start: var(--bs-size-10) !important; }

  .me-xl-6  { margin-inline-end: var(--bs-size-6) !important; }
  .me-xl-7  { margin-inline-end: var(--bs-size-7) !important; }
  .me-xl-8  { margin-inline-end: var(--bs-size-8) !important; }
  .me-xl-9  { margin-inline-end: var(--bs-size-9) !important; }
  .me-xl-10 { margin-inline-end: var(--bs-size-10) !important; }


  /* Padding Utilities */
  .p-xl-6  { padding: var(--bs-size-6) !important; }
  .p-xl-7  { padding: var(--bs-size-7) !important; }
  .p-xl-8  { padding: var(--bs-size-8) !important; }
  .p-xl-9  { padding: var(--bs-size-9) !important; }
  .p-xl-10 { padding: var(--bs-size-10) !important; }

  .pt-xl-6  { padding-block-start: var(--bs-size-6) !important; }
  .pt-xl-7  { padding-block-start: var(--bs-size-7) !important; }
  .pt-xl-8  { padding-block-start: var(--bs-size-8) !important; }
  .pt-xl-9  { padding-block-start: var(--bs-size-9) !important; }
  .pt-xl-10 { padding-block-start: var(--bs-size-10) !important; }

  .pb-xl-6  { padding-block-end: var(--bs-size-6) !important; }
  .pb-xl-7  { padding-block-end: var(--bs-size-7) !important; }
  .pb-xl-8  { padding-block-end: var(--bs-size-8) !important; }
  .pb-xl-9  { padding-block-end: var(--bs-size-9) !important; }
  .pb-xl-10 { padding-block-end: var(--bs-size-10) !important; }

  .px-xl-6  { padding-inline: var(--bs-size-6) !important; }
  .px-xl-7  { padding-inline: var(--bs-size-7) !important; }
  .px-xl-8  { padding-inline: var(--bs-size-8) !important; }
  .px-xl-9  { padding-inline: var(--bs-size-9) !important; }
  .px-xl-10 { padding-inline: var(--bs-size-10) !important; }

  .py-xl-6  { padding-block: var(--bs-size-6) !important; }
  .py-xl-7  { padding-block: var(--bs-size-7) !important; }
  .py-xl-8  { padding-block: var(--bs-size-8) !important; }
  .py-xl-9  { padding-block: var(--bs-size-9) !important; }
  .py-xl-10 { padding-block: var(--bs-size-10) !important; }

  .ps-xl-6  { padding-inline-start: var(--bs-size-6) !important; }
  .ps-xl-7  { padding-inline-start: var(--bs-size-7) !important; }
  .ps-xl-8  { padding-inline-start: var(--bs-size-8) !important; }
  .ps-xl-9  { padding-inline-start: var(--bs-size-9) !important; }
  .ps-xl-10 { padding-inline-start: var(--bs-size-10) !important; }

  .pe-xl-6  { padding-inline-end: var(--bs-size-6) !important; }
  .pe-xl-7  { padding-inline-end: var(--bs-size-7) !important; }
  .pe-xl-8  { padding-inline-end: var(--bs-size-8) !important; }
  .pe-xl-9  { padding-inline-end: var(--bs-size-9) !important; }
  .pe-xl-10 { padding-inline-end: var(--bs-size-10) !important; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* Margin Utilities */
  .m-xxl-6  { margin: var(--bs-size-6) !important; }
  .m-xxl-7  { margin: var(--bs-size-7) !important; }
  .m-xxl-8  { margin: var(--bs-size-8) !important; }
  .m-xxl-9  { margin: var(--bs-size-9) !important; }
  .m-xxl-10 { margin: var(--bs-size-10) !important; }

  .mt-xxl-6  { margin-block-start: var(--bs-size-6) !important; }
  .mt-xxl-7  { margin-block-start: var(--bs-size-7) !important; }
  .mt-xxl-8  { margin-block-start: var(--bs-size-8) !important; }
  .mt-xxl-9  { margin-block-start: var(--bs-size-9) !important; }
  .mt-xxl-10 { margin-block-start: var(--bs-size-10) !important; }

  .mb-xxl-6  { margin-block-end: var(--bs-size-6) !important; }
  .mb-xxl-7  { margin-block-end: var(--bs-size-7) !important; }
  .mb-xxl-8  { margin-block-end: var(--bs-size-8) !important; }
  .mb-xxl-9  { margin-block-end: var(--bs-size-9) !important; }
  .mb-xxl-10 { margin-block-end: var(--bs-size-10) !important; }

  .mx-xxl-6  { margin-inline: var(--bs-size-6) !important; }
  .mx-xxl-7  { margin-inline: var(--bs-size-7) !important; }
  .mx-xxl-8  { margin-inline: var(--bs-size-8) !important; }
  .mx-xxl-9  { margin-inline: var(--bs-size-9) !important; }
  .mx-xxl-10 { margin-inline: var(--bs-size-10) !important; }

  .my-xxl-6  { margin-block: var(--bs-size-6) !important; }
  .my-xxl-7  { margin-block: var(--bs-size-7) !important; }
  .my-xxl-8  { margin-block: var(--bs-size-8) !important; }
  .my-xxl-9  { margin-block: var(--bs-size-9) !important; }
  .my-xxl-10 { margin-block: var(--bs-size-10) !important; }

  .ms-xxl-6  { margin-inline-start: var(--bs-size-6) !important; }
  .ms-xxl-7  { margin-inline-start: var(--bs-size-7) !important; }
  .ms-xxl-8  { margin-inline-start: var(--bs-size-8) !important; }
  .ms-xxl-9  { margin-inline-start: var(--bs-size-9) !important; }
  .ms-xxl-10 { margin-inline-start: var(--bs-size-10) !important; }

  .me-xxl-6  { margin-inline-end: var(--bs-size-6) !important; }
  .me-xxl-7  { margin-inline-end: var(--bs-size-7) !important; }
  .me-xxl-8  { margin-inline-end: var(--bs-size-8) !important; }
  .me-xxl-9  { margin-inline-end: var(--bs-size-9) !important; }
  .me-xxl-10 { margin-inline-end: var(--bs-size-10) !important; }


  /* Padding Utilities */
  .p-xxl-6  { padding: var(--bs-size-6) !important; }
  .p-xxl-7  { padding: var(--bs-size-7) !important; }
  .p-xxl-8  { padding: var(--bs-size-8) !important; }
  .p-xxl-9  { padding: var(--bs-size-9) !important; }
  .p-xxl-10 { padding: var(--bs-size-10) !important; }

  .pt-xxl-6  { padding-block-start: var(--bs-size-6) !important; }
  .pt-xxl-7  { padding-block-start: var(--bs-size-7) !important; }
  .pt-xxl-8  { padding-block-start: var(--bs-size-8) !important; }
  .pt-xxl-9  { padding-block-start: var(--bs-size-9) !important; }
  .pt-xxl-10 { padding-block-start: var(--bs-size-10) !important; }

  .pb-xxl-6  { padding-block-end: var(--bs-size-6) !important; }
  .pb-xxl-7  { padding-block-end: var(--bs-size-7) !important; }
  .pb-xxl-8  { padding-block-end: var(--bs-size-8) !important; }
  .pb-xxl-9  { padding-block-end: var(--bs-size-9) !important; }
  .pb-xxl-10 { padding-block-end: var(--bs-size-10) !important; }

  .px-xxl-6  { padding-inline: var(--bs-size-6) !important; }
  .px-xxl-7  { padding-inline: var(--bs-size-7) !important; }
  .px-xxl-8  { padding-inline: var(--bs-size-8) !important; }
  .px-xxl-9  { padding-inline: var(--bs-size-9) !important; }
  .px-xxl-10 { padding-inline: var(--bs-size-10) !important; }

  .py-xxl-6  { padding-block: var(--bs-size-6) !important; }
  .py-xxl-7  { padding-block: var(--bs-size-7) !important; }
  .py-xxl-8  { padding-block: var(--bs-size-8) !important; }
  .py-xxl-9  { padding-block: var(--bs-size-9) !important; }
  .py-xxl-10 { padding-block: var(--bs-size-10) !important; }

  .ps-xxl-6  { padding-inline-start: var(--bs-size-6) !important; }
  .ps-xxl-7  { padding-inline-start: var(--bs-size-7) !important; }
  .ps-xxl-8  { padding-inline-start: var(--bs-size-8) !important; }
  .ps-xxl-9  { padding-inline-start: var(--bs-size-9) !important; }
  .ps-xxl-10 { padding-inline-start: var(--bs-size-10) !important; }

  .pe-xxl-6  { padding-inline-end: var(--bs-size-6) !important; }
  .pe-xxl-7  { padding-inline-end: var(--bs-size-7) !important; }
  .pe-xxl-8  { padding-inline-end: var(--bs-size-8) !important; }
  .pe-xxl-9  { padding-inline-end: var(--bs-size-9) !important; }
  .pe-xxl-10 { padding-inline-end: var(--bs-size-10) !important; }
}


/*
 * Header
 */
header {
  display: grid;
  position: relative;
  overflow-x: clip;
  /*z-index: 10;*/

  section,
  .section {
    display: flex;
    align-items: center;
    block-size: var(--header-block-size);
    padding-block: 1rem;;

    &.fixed {
      position: fixed;
      top: 0;
      inline-size: 100%;
      background-color: var(--color-white);
      box-shadow: 0 -1rem 4rem oklch(from var(--color-black) l c h / .1);
      z-index: 100;
    }

    &.static {
      position: absolute;
      background-color: transparent ; /*var(--color-primary);*/
      z-index: 1000;
      width: 100vw;
      top: 0;
      left: 0;

      a {
        &:is(.nav-link) {
          color: var(--color-white);
        }

        &:is(.btn-outline-tertiary) {
          color: var(--color-tertiary);

          &:not(:hover, :focus-visible) {
            color: var(--color-white);
          }
        }
      }

      .dropdown {
        .dropdown-toggle {
          color: var(--color-white);

          &:not(.show):is(:hover, :focus-visible) {
            color: var(--color-secondary);
          }
        }
      }
    }

    a {
      &:is(.nav-link) {
        font-weight: var(--font-weight-strong);

        &:is(:hover, :focus-visible, .active) {
          color: var(--color-secondary);
        }
      }

      &:is(.btn-outline-tertiary) {
        &:not(:hover, :focus-visible) {
          color: var(--color-primary);
        }
      }
    }
  }

  a:has(> img) {
    inline-size: 100%;
    block-size: 100%;
  }

  .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      aspect-ratio: var(--ratio-auto);
      inline-size: 16rem;
      max-inline-size: var(--max-logo-size);
      block-size: auto;
    }
  }

  .dropdown {
    .dropdown-toggle {
      border: none;
      outline: none;

      padding-inline: 1rem;
      padding-block: .5rem;
    }

    .dropdown-menu {
      --bs-dropdown-min-width: fit-content;

      text-align: end;

      a {
        padding-inline: 1.25rem;
        padding-block: .5rem;

        &:is(:hover, :focus-visible) {
          color: var(--color-tertiary);
        }
      }
    }
  }

  .offcanvas {
    a {
      &:is(.nav-link) {
        color: var(--color-primary);
        padding-inline: 0;
      }

      &:is(.btn-tertiary) {
        color: var(--color-white);
      }

      &:is(.btn-outline-tertiary) {
        color: var(--color-tertiary);
      }
    }
  }
}


/*
* Body
*/
body {
  &:has(
    .section[class*="-banner"]
  ) {
    header {
      .static {
      }
    }
  }
}


/*
 * Footer
 */
footer {
  background-color: var(--color-primary);
  min-block-size: 20rem;
  padding-block: 4rem;

  * {
    &:not(.btn *) {
      color: var(--color-white);
    }
  }

  .logo-container {
    img {
      inline-size: 12rem;
      margin-block: 0 2rem;
    }
  }

  a:is(.social-media) {
    font-size: var(--font-size-social-media);
  }

  .footer-title {
    font-weight: 600;
  }

  .footer-title,
  address ~ a[href^="http"] {
    color: var(--color-tertiary);
  }

  a[href^="tel:"],
  a[href^="mailto:"] {
    font-size: clamp(2rem, calc(5vw - 1rem), 3rem);
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .footer-navigation {
    ul {
      a {
        color: var(--color-white);
        font-weight: 200;

        padding-inline: 0;
        padding-block: .15rem;

        &:is(:hover, :focus-visible) {
          color: var(--color-secondary);
        }
      }
    }
  }
}


/*
 * Container
 */
.button-container,
p:has(> a.btn) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}


/*
 * Cards
 */
.card {
  &:is(.card-sm) {
    max-inline-size: 20rem;
  }

  &:is(.card-md) {
    max-inline-size: 30rem;
  }

  &:is(.card-lg) {
    max-inline-size: 40rem;
  }

  &:is(.business-card) {
    background-color: var(--color-primary);

    .card-img-top {
      inline-size: fit-content;
    }

    a {
      &:not(.btn):is(:hover, :focus-visible) {
        color: var(--color-secondary);
      }

      &:is(.social-media) {
        font-size: var(--font-size-h6);
        color: var(--color-white);

        &:is(:hover, :focus-visible) {
          color: var(--color-white);
        }
      }
    }

    .card-body {
      background-color: oklch(from var(--color-blue-light) l c h / .1);

      * {
        &:not(a:is(:hover, :focus-visible)) {
          color: var(--color-white);
        }

        &:is(:last-child) {
          margin-block-end: 0;
        }
      }
    }
  }
}

/*
 * Card Menu
 */
.frame-inner:has(>.card-menu) {
  container-name: card-menu;
  container-type: inline-size;

  --_columns: 1;

  /* Container-Breite: 768px */
  @container card-menu ( width >= 48rem ) {
    .card-menu {
      --_columns: 2;
    }
  }

  /* Container-Breite: >= 1200px */
  @container card-menu ( width >= 75rem ) {
    .card-menu {
      &:is(.card-menu-columns-2) { --_columns: 2; }
      &:is(.card-menu-columns-3) { --_columns: 3; }
      &:is(.card-menu-columns-4) { --_columns: 4; }
    }
  }

  .card-menu {
    display: grid;
    grid-auto-flow: dense;
    gap: 1rem;

    grid-template-columns: repeat(var(--_columns), 1fr);

    .card {
      display: grid;
      block-size: 100%;
      align-content: end;
      background-color: var(--color-gray-light);
      border: none;
      border-radius: 2rem;
      overflow: hidden;

      .card-img-top {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: var(--ratio-photo-standard);
        overflow: hidden;

        picture {
          inline-size: 100%;
          block-size: 100%;

          img {
            inline-size: 100%;
            block-size: 100%;
            object-fit: contain;
          }
        }
      }

      .card-body,
      .card-footer {
        background-color: transparent;
        padding-inline: var(--bs-size-5);
        padding-block: var(--bs-size-3);
      }

      .card-body {
        .card-title {
          color: var(--color-primary);
          font-size: var(--font-size-h6);
          margin-block-end: 0;
        }

        .card-subtitle {
          display: none;
          font-size: inherit;
        }
      }

      .card-footer {
        display: flex;
        justify-content: flex-start;
        border-top: none;

        a {
          display: flex;
          inline-size: fit-content;
          justify-content: center;
          align-items: center;
          gap: 1.25rem;

          background-color: transparent;
          color: var(--color-primary);
          font-size: var(--bs-size-3);

          padding-inline: 0;
          padding-block: 0;

          &:after {
            content: "";
            display: inline-flex;
            aspect-ratio: var(--ratio-auto);
            inline-size: 1.2rem;
            block-size: .5rem;
            background-image: var(--svg-icon-internal-primary);
            transform:
              translateY(.15rem);
            transition:
              all var(--transition-duration) var(--transition-timing) var(--transition-delay);
            translate: 0 0;
          }

          &:is(:hover, :focus-visible) {
            color: var(--color-tertiary);

            &:after {
              inline-size: 1.65rem;
              background-image: var(--svg-icon-internal-primary-hover);
              translate: .25rem 0;
            }
          }
        }
      }
    }
  }
}


/*
 * Navigation
 */
nav {
  &:is(.faq-toc) {
    .nav-link {
      color: var(--color-primary);
      line-height: initial;
      padding-inline: 0;

      &:is(:hover, :focus-visible) {
        color: var(--color-secondary);
      }
    }
  }
}

/*
 * Containers-Elemente
 */

/* Grid-Container */
.grid-container {
  display: grid;
}

/* Medien-Container */
.media-container:not(.nostretch) {
  display: flex;
  overflow: hidden;

  img,
  video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    align-self: center;
  }
}


/*
 * Accordion
 */
.accordion {
  --bs-accordion-active-bg: var(--color-primary);
  --bs-accordion-active-color: var(--color-white);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem oklch(from var(--color-primary) l c h / .35);

  .accordion-header {
    h3 {
      font-size: var(--font-size-paragraph);
      color: var(--color-primary);
    }
  }

  .accordion-body {
    p {
      &:is(:last-child) {
        margin-block-end: 0;
      }
    }
  }

  .accordion-item {
    --_accordion-border-radius: 1.25rem;
    --bs-accordion-border-radius: var(--_accordion-border-radius);
    --bs-accordion-inner-border-radius: var(--_accordion-border-radius);
    --bs-accordion-border-color: oklch(from var(--color-primary) l c h / .15);
  }

  .accordion-button {
    font-size: var(--font-size-paragraph);
    padding-inline-end: 3rem;

    &:before,
    &:after {
      content: "";
      display: block;
      inline-size: 1rem;
      block-size: 2px;
      background-color: currentColor;
      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
    }

    &:before,
    &:after {
      position: absolute;
      right: 1rem;
    }

    &:before {
      transform: rotate(90deg);
    }

    &:after {
      transform: rotate(0deg);
    }

    &:is([aria-show="true"]) {
      &:before {
        transform: rotate(180deg);
      }

      &:after {
        transform: rotate(180deg);
      }
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-secondary);
      outline: none;
    }
  }
}

/* Icon Placeholder */
.icon-placeholder {
  aspect-ratio: var(--ratio-square);
  inline-size: 5.5rem;
  block-size: auto;
  background-color: transparent;
  border: 2px solid currentColor;
  border-radius: 1rem;
}


.row {
  &:is(.equal-height) {
    & > [class*="col-"] {
      display: grid;
    }
  }

  &:has(.teaser) {
    container-name: teaser;
    container-type: inline-size;

    .teaser {
      display: flex;
      flex-direction: column;
      gap: 4rem;
      align-items: center;
      justify-content: center;

      &:has(.media-container + .text-container) {
        .media-container {
          order: 1;
        }
      }
    }

    .media-container {
      max-block-size: 32rem;
    }

    /* Container-Breite: >= 992px */
    @container teaser ( width >= 62rem ) {
      .teaser {
        flex-direction: row;

        &:has(.media-container + .text-container) {
          .media-container {
            order: initial;
          }
        }

        p {
          max-inline-size: min(75ch, 50vw);
        }
      }

      .media-container {
        max-block-size: 24rem;
      }
    }
  }
}

/*
 * Sections
 */
section,
div:is(.section) {
  /* Maximale Breite des Containers */
  .container {
    max-inline-size: calc(var(--bs-container-max-inline-size) - (2 * var(--offset-inline)) + var(--bs-gutter-x));
    margin-inline: auto;
  }

  /* Typografie: */
  h2:first-of-type {
    color: var(--color-secondary);
    max-inline-size: initial;
  }

  &.bg-primary,
  & *.bg-primary {
    h2:first-of-type {
      color: inherit;
    }
  }

  /* Mit Hintergrundfarbe Primary */
  &:is(.bg-primary),
  .bg-primary {
    *:not(.btn, h2, .h2) {
      color: var(--color-white);
    }

    .btn {
      &:is(.btn-outline-tertiary, .btn-outline-blue-light) {
        &:not(:hover, :focus-visible) {
          color: var(--color-white);
        }
      }
    }
  }

    /* Mit Hintergrundfarbe Secondary */
  &:is(.bg-secondary),
  .bg-secondary {
    h2:first-of-type {
      color: var(--color-white);
    }
  }

  /* Mit Hintergrundfarbe Tertiary */
  &:is(.bg-tertiary),
  .bg-tertiary {
    h2:first-of-type {
      color: var(--color-white);
    }
  }

  /* Mit Hintergrundfarbe Primary und Gradient zu Tertiary */
  &:is(.bg-gradient-primary-to-tertiary),
  .bg-gradient-primary-to-tertiary {
    *:not(.btn) {
      color: var(--color-white);
    }
  }


  /* Mit Banner-Klasse */
  &[class*="-banner"] {
    display: grid;
    min-block-size: max(30rem, 30vh);

    .media-container {
      block-size: 100%;
      /*max-block-size: 67.5rem;*/
    }

    *:not(.btn) {
      color: var(--color-white);
    }
  }


  /* Section: Home Banner */
  &:is(.home-banner) {
    .grid-container {
      container-name: home-banner;
      container-type: inline-size;

      .home-banner-grid {
        align-items: center;

        .media-container {
          img,
          video {
            object-position: 60% center;
            pointer-events: none;
            filter: brightness(.7); /* Dunkler machen, damit Text besser lesbar ist */
            transition:
              filter var(--transition-duration) var(--transition-timing) var(--transition-delay),
              object-position var(--transition-duration) var(--transition-timing) var(--transition-delay);
          }
        }

        /* Container-Breite: >= 768px */
        @container home-banner ( width >= 48rem ) {
          .media-container {
            /*max-block-size: 67.5rem;*/

            img,
            video {
              object-position: 50% center;
              filter: brightness(1);
            }
          }
        }

        .text-container {
          h1 {
            line-height: 1.1;
          }
        }

        a {
          &:is(.btn-tertiary, .btn-outline-tertiary) {
            &:not(:hover, :focus-visible) {
              color: var(--color-white);
            }
          }
        }
      }
    }
  }

  /* Section: Devices */
  &:is(.devices) {
    .frame-header:has(.element-header, .element-subheader) {
      margin-block-end: var(--bs-size-6);
    }
  }


  /* Section: Reference */
  &:is(.reference) {
    container-name: reference;
    container-type: inline-size;

    .btn-tertiary {
      margin-block-end: 4rem;
    }

    .reference-grid {
      row-gap: clamp(1rem, calc(5vw - 1rem), 2rem);
      column-gap: clamp(1rem, calc(5vw - 1rem), 2rem);

      .card {
        --bs-border-radius: 1.2rem;
        --bs-card-bg: var(--color-primary);

        --bs-card-spacer-x: clamp(2rem, 5vw - 1rem, 3rem);
        --bs-card-spacer-y: clamp(1.5rem, 5vw - 1rem, 2rem);

        border: none;;
        overflow: hidden;

        .card-img-header {
          aspect-ratio: var(--ratio-photo-standard);
          overflow: hidden;

          .card-img-top {
            --_transition-duration-scale: calc(var(--transition-duration) * 2);

            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
            object-position: center;

            transition:
              transform var(--_transition-duration-scale) var(--transition-timing) var(--transition-delay);
          }
        }

        .card-body {
          color: var(--color-white);

          * {
            &:not(.btn) {
              font-size: clamp(1.5rem, calc(5vw - 1rem), 1.75rem);
            }

            &:not(a) {
              color: var(--color-white);
            }

            &:is(:last-child) {
              margin-block-end: 0;
            }
          }
        }

        &:is(:hover, :focus-visible) {
          .card-img-top {
            transform: scale(1.08);
          }

          .btn-inline-link-internal-alt {
            color: var(--color-secondary);

            &:before {
              background-image: var(--svg-icon-internal-short-yellow);
              background-position: calc(50% + 0.25rem) center;
              border-color: var(--color-secondary);
            }
          }
        }
      }
    }

    /* Container-Breite: >= 768px */
    @container reference ( width >= 48rem ) {
      .reference-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
      }
    }
  }


  /* Section: Financing */
  &:is(.financing) {
    container-name: financing;
    container-type: inline-size;

    /* Container-Breite: >= 768px */
    @container financing ( width >= 48rem ) {
      .frame-inner:has(> .frame-header),
      .section-title {
        margin-block-start: clamp(1rem, 5vw - 1rem, 10rem);
      }
    }

    p:last-of-type {
      margin-block-end: var(--bs-size-6);
    }
  }


  /* Section: Purchase */
  &:is(.purchase) {
    .element-header,
    .element-subheader {
      text-align: center;
      margin-inline: auto;
    }

    .section,
    .grid-container {
      container-name: purchase;
      container-type: inline-size;

      display: grid;

      .row,
      .purchase-grid {
        display: grid;
        inline-size: fit-content;
        max-inline-size: clamp(40rem, 100%, 70rem);
        grid-template-columns: 1fr;
        column-gap: clamp(6rem, 10vw - 1rem, 10rem);
        row-gap: 2rem;
        justify-self: center;
        margin-inline: clamp(0rem, 5vw - 2rem, 1.5rem);
        margin-block: 0 2rem;

        & > div,
        .grid-item {
          & > *:last-child {
            margin-block-end: 0;
          }
        }
      }

      /* Container-Breite: >= 768px */
      @container purchase ( width >= 48rem ) {
        .row,
        .purchase-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }

    .button-container {
      margin-block-start: clamp(2rem, calc(5vw - 1rem), 4rem);

      .btn {
        padding-inline: 4rem;
        padding-block: 1rem;
      }
    }
  }


  /* Section: Product Banner */
  &:is(.product-banner) {
    padding-block: clamp(8rem, calc(15vw - 1rem), 16rem) 8rem;

    .media-container {
      aspect-ratio: var(--ratio-wide);
      min-block-size: max(min(50rem, 100%), 25vw);

      img {
        object-position: left center;
      }
    }

    h1 {
      line-height: 1.1;
    }

    h4, .h4 {
      font-size: 2rem;
      margin-block: 0 1lh;
    }

    h5, .h5 {
      font-size: 1.5rem;
      margin-block: 0 1lh;
    }

    ul:last-child,
    p:last-child {
      margin-block: 0;
    }

    p {
      &:is(.small)
      & > sub {
        font-size: .95rem;
      }

      &:has(> a.btn):last-child {
        gap: 3rem;
        margin-block: 0 var(--bs-size-7);
      }
    }

    ul {
      display: grid;
      row-gap: .5rem;
      list-style-type: none;
      padding-inline-start: 0;

      li {
        font-size: var(--font-size-paragraph);
        line-height: 1.5;
        text-indent: -1ch;
        padding-inline-start: 2ch;

        &:before {
          content: "–"; /* Halbgeviertstrich */
          display: inline-block;
          width: 1ch;
          color: var(--color-white);
        }
      }
    }

    .key-facts {
      .frame {
        margin-block-end: var(--bs-size-6);
      }
    }
  }


  /* Section: Product in Detail */
  &:is(.product-in-detail) {
    img {
      block-size: auto;
    }

    p:has(> a.btn) {
      margin-block-end: var(--bs-size-6);
    }
  }

  &:is(.promise) {
    h4 {
      font-size: 1.25rem;
      line-height: 1.2;
    }

    p {
      font-size: var(--font-size-paragraph);
    }
  }


  /* Section: Addons */
  &:is(.addons) {

  }


  /* Section: Addons Conclusion */
  &:is(.addons-conclusion) {
    .grid-container {
      container-name: addons-conclusion;
      container-type: inline-size;

      .addons-conclusion-grid {
        display: grid;
        inline-size: 100%;
        grid-template-columns: 1fr;
        column-gap: clamp(6rem, 10vw - 1rem, 10rem);
        row-gap: 2rem;
        justify-self: center;
        padding-block: clamp(2rem, calc(10vw - 2rem), 8rem);
        padding-inline: clamp(2rem, calc(10vw - 2rem), 10rem);

        .grid-item {
          & > *:last-child {
            margin-block-end: 0;
          }
        }

        *:is(p, li) {
          font-size: 1.5rem;
        }

        ul {
          margin-block: 1.5lh 1.125lh;
        }
      }

      /* Container-Breite: >= 1200px */
      @container addons-conclusion ( width >= 75rem ) {
        .addons-conclusion-grid {
          grid-template-columns: repeat(2, 1fr);

          p {
            max-inline-size: 42ch;
          }
        }
      }
    }
  }


  /* Section: Related Products */
  &:is(.related-products) {
    h4 {
      padding-inline: 2rem;
      padding-block: 2rem 0;
    }

    .media-container {
      aspect-ratio: var(--ratio-wide);

      img {
        block-size: auto;
      }
    }
  }

  &:is(.generic-banner) {
    .generic-banner-grid {
      block-size: 100%;
      align-items: center;
    }

    .media-container {
      block-size: 100%;
      inline-size: 100%;
      max-block-size: initial;
      mix-blend-mode: soft-light;
      filter: grayscale(1) contrast(0.5);

      img {
        aspect-ratio: var(--ratio-banner-wide);
        object-fit: cover;
        object-position: center;
      }
    }

    h1, .h1,
    .element-header,
    .element-subheader {
      max-inline-size: initial;
    }

    .element-header {
      margin-block-end: var(--bs-size-3);
    }

    .element-text {
      p {
        &:not(:has(> a.btn), :is(.lead)) {

          font-size: var(--font-size-lead);
          font-weight: var(--font-weight-lead);
        }

        &:last-child {
          margin-block-end: 0;
        }
      }
    }
  }


  /* Section: PointSEM Introduction */
  &:is(.pointsem-introduction) {
    --_media-border-radius: 2rem;

    container-name: pointsem-introduction;
    container-type: inline-size;

    .row {
      align-items: center;
    }

    .media-container {
      block-size: 100%;
    }

    .text-container {
      padding-inline: clamp(1rem, calc(5vw - 1rem), 4rem);
      padding-block: 2rem;
    }

    /* Container-Breite: >= 1200px */
    @container pointsem-introduction ( width >= 75rem ) {
      .row {
        /* Erste Spalte mit Bild */
        &:has(> div:first-child img) {
          .media-container {
            border-top-right-radius: var(--_media-border-radius);
            border-bottom-right-radius: var(--_media-border-radius);
          }
        }

        /* Letzte Spalte mit Bild */
        &:has(> div:last-child img) {
          .media-container {
            border-top-left-radius: var(--_media-border-radius);
            border-bottom-left-radius: var(--_media-border-radius);
          }
        }
      }

      .media-container {
        max-block-size: 48rem;
      }
    }

    p {
      font-size: 1.35rem;
      line-height: 1.4;

      &:first-of-type {
        font-weight: 400;
      }
    }
  }


  /* Section: PointSEM Benefits */
  &:is(.pointsem-benefits) {
    padding-block: 2rem 8rem;

    .media-container {
      &:has(embed) {
        inline-size: 100%;
        justify-content: center;
        padding-inline: 1rem;

        embed {
          inline-size: 100%;
          block-size: auto;
          margin-block: 4rem;
        }
      }
    }

    img {
      filter: brightness(0) invert(1);
      block-size: 7rem;
      min-block-size: 7rem;
    }

    h4 {
      font-size: 1.25rem;
      line-height: 1.2;
    }
  }


  /* Section: PointSEM Process */
  &:is(.pointsem-process) {

  }


  /* Section: PointSEM Comparison */
  .table {
    table {
      --bs-table-border-color: oklch(from var(--color-primary) l c h / .15);

      inline-size: 100%;
      /*max-inline-size: 62rem;*/
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 2rem;
      border: 1px solid var(--bs-table-border-color);
      overflow: hidden;
      margin-inline: auto;

      th,
      td {
        inline-size: fit-content;
        background-color: transparent;

        text-align: center;
        text-wrap-style: balance;

        padding-inline: 1.5rem;
        padding-block: 1.5rem;

        &:first-child {
          text-align: start;
          max-inline-size: 50ch;
          font-weight: 400;
        }
      }

      thead {
        tr {
          background-color: var(--color-primary);
        }

        th {
          color: var(--color-white);
          font-weight: 400;
          vertical-align: top;
          border-color: transparent;
          padding-block: 1.5rem;
        }
      }

      tbody {
        tr {
          td {
            color: var(--color-primary);
            vertical-align: middle;

            &:last-child {
              background-color: oklch(from var(--color-primary) l c h / .05);
            }
          }

          &:last-child {
            td {
              border-color: transparent;
            }
          }
        }
      }
    }
  }


  /* Section: PointSEM Details */
  &:is(.pointsem-details) {

  }


  /* Section: PointSEM Details - Overview */
  &:is(.pointsem-details-overview) {
    .offcanvas-toggle[aria-show="false"] {
      background-color: var(--color-primary);
    }

    .offcanvas-grid {
      .grid-item {
        h4, p, li, a {
          text-wrap-style: balance;
        }
      }

      .offcanvas-overlay {
        ul {
          gap: 1rem;
        }
      }
    }
  }


  /* Section: PointSEM Addons */
  &:is(.pointsem-addons) {
    --bs-border-color: currentColor;

    h3 {
      color: var(--color-secondary);
    }

    h5 {
      font-size: 1.25rem;
      line-height: 1.2;
    }
  }


  /* Section: PointSEM Processing Steps */
  &:is(.pointsem-processing-steps) {
    .grid-container {
      container-name: processing-steps;
      container-type: inline-size;

      .processing-steps-grid {
        max-inline-size: 62rem;
        justify-self: center;
        gap: 4rem;

        .grid-item {
          position: relative;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-areas:
            "icon"
            "text";
          gap: 1.5rem;
          align-items: start;
          justify-items: center;
          text-align: start;

          .text-container {
            grid-area: text;
            background-color: oklch(from currentColor l c h / .05);
            border: 1px solid oklch(from currentColor l c h / .05);
            border-radius: 1rem;
            padding-inline: 1.25rem;
            padding-block: 1.5rem;

            *:last-child {
              margin-block-end: 0;
            }
          }

          .media-container,
          img {
            grid-area: icon;
          }
        }
      }

      /* Container-Breite: >= 576px */
      @container processing-steps (width >= 36rem) {
        .processing-steps-grid {
          gap: 2rem;

          .grid-item {
            grid-template-areas:
              "icon text";
            justify-items: start;
          }
        }
      }

      /* Container-Breite: >= 992px */
      @container processing-steps (width >= 48rem) {
        .processing-steps-grid {
          gap: 1rem;

          .grid-item {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 1.5rem;
            align-items: center;

            &:nth-child(odd) {
              grid-template-areas:
                "text icon .";
              text-align: end;
            }

            &:nth-child(even) {
              grid-template-areas:
                ". icon text";
              text-align: start;
            }
          }
        }
      }
    }

    .media-container {
      aspect-ratio: var(--ratio-square);
      inline-size: 7rem;
      block-size: auto;
      background-color: transparent;
      border: 2px solid currentColor;
      border-radius: 1rem;
      padding-inline: .5rem;
      padding-block: .5rem;

      img {
        filter: brightness(0) invert(1);
      }
    }
  }


  /* Section: PointSEM Promotion */
  &:is(.pointsem-promotion) {

  }

  /* Section: PointSEM Warranty and Training */
  &:is(.pointsem-warranty-and-training) {
    h4, .h2  {
      color: var(--color-white);
    }

    [class*="col-"] > * {
      padding-inline: clamp(2rem, calc(5vw - 1rem), 5rem);
      padding-block: clamp(2rem, calc(5vw - 1rem), 5rem);
    }

    .text-container {
      inline-size: fit-content;
      margin-inline: auto;

      *:is(p, li) {
        font-size: 1.5rem;
      }

      *:last-child {
        margin-block-end: 0;
      }
    }
  }
}


/*
* Farbverlauf-Hilfsklasse
* Endlos animierter Verlauf ohne sichtbare Sprünge
*/
.color-gradient {
  --color-gradient-angle: to left;
  --color-gradient-start: var(--color-tertiary);
  --color-gradient-middle: var(--color-secondary);
  --color-gradient-end: var(--color-primary);

  inline-size: 100%;
  block-size: 1rem;

  /* Symmetrischer Verlauf für nahtlose Wiederholung */
  background: linear-gradient(
    in oklch var(--color-gradient-angle, to left),
    var(--color-gradient-start),
    var(--color-gradient-middle),
    var(--color-gradient-end),
    var(--color-gradient-middle),
    var(--color-gradient-start),
    var(--color-gradient-middle),
    var(--color-gradient-end)
  );
  background-size: 300vw 100%;
  background-position: 100% center;
  background-repeat: repeat-x;

  animation: gradientAnimation 10s linear infinite;
}


/*
 * Accordion
 */
/* Accordion Item */
.tx-accordion-item {
  position: relative;

  background-color: var(--color-gray-light);

  padding-inline: 0;
  padding-block: 0 2rem;
  margin-block: 0 2rem;

  .tx-accordion-icon + .tx-accordion-title {
    margin-block-start: 2rem;
  }

  /* Leeres Accordion Item ausblenden */
  &:not(:has(.tx-accordion-title, .tx-accordion-body)) {
      display: none;
  }

  /* Accordion Title */
  .tx-accordion-title {
    color: var(--color-primary);
    transition:
      color var(--transition-duration) var(--transition-timing) var(--transition-delay);
  }

  /* Accordion Header */
  .tx-accordion-header {
    inline-size: 100%;
    background-color: transparent;
    place-items: start;

    text-align: start;
    border: none;

    padding-inline: 2rem;
    padding-block: 2rem 0;

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 3rem;
      right: 2rem;

      display: block;
      inline-size: 2rem;
      block-size: 3px;

      background-color: var(--color-primary);
      cursor: pointer;

      transition:
        transform var(--transition-duration) var(--transition-timing) var(--transition-delay),
        background-color var(--transition-duration) var(--transition-timing) var(--transition-delay);
      transform-origin: center;
      transform: translate(0, -50%);
    }

    &:before {
      transform: rotate(0deg);
    }

    &:after {
      transform: rotate(-90deg);
    }

    &:is(:hover, :focus-visible) {
      &:after,
      &:before {
        background-color: var(--color-tertiary);
      }
    }

    &:is([aria-expanded="true"]) {
      &:after {
        transform: rotate(0deg);
      }

      .tx-accordion-title {
        color: var(--color-tertiary);
      }
    }

    img {
      pointer-events: none;
    }
  }

  /* Accordion Body */
  .tx-accordion-body {
    --_font-size: 1rem;

    max-block-size: 0;
    font-size: var(--_font-size);
    overflow: hidden;
    transition:
      max-block-size var(--transition-duration) var(--transition-timing) var(--transition-delay),
      padding-block var(--transition-duration) var(--transition-timing) var(--transition-delay);

    padding-inline: 2rem;
    padding-block: 0;

    > * {
      opacity: 0;
      transition:
        opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
    }

    ul {
      list-style-type: none;
      padding-inline-start: 0;

      li {
        --_indent-size: 1.5ch;

        line-height: 2;
        text-indent: calc(var(--_indent-size) * -1);
        padding-inline-start: var(--_indent-size);

        &:before {
          content: "";
          display: inline-flex;
          aspect-ratio: var(--ratio-square);
          inline-size: .5ch;
          background-color: var(--color-tertiary);

          transform: translateY(-0.25rem);

          margin-inline-end: 1ch;
        }
      }
    }

    a {
      font-size: var(--_font-size);
    }
  }

  /* Accordion Expanded State */
  &:has([aria-expanded="true"]) {
    .tx-accordion-body {
      max-block-size: 100rem;
      padding-block: 2rem 0;

      > * {
        --_transition-delay: 150ms;

        opacity: 1;
        transition:
          opacity var(--transition-duration) var(--transition-timing) var(--_transition-delay);
      }
    }
  }
}


/*
 * Offcanvas Grid
 */
.offcanvas-grid {
  --_min-item-size: 18rem;
  --_max-item-size: 1fr;
  --_gap: 1rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--_min-item-size), 100%), var(--_max-item-size)));
  grid-auto-rows: 1fr;
  gap: var(--_gap);

  .grid-item {
    display: grid;
    min-block-size: 16rem;
    background-color: var(--color-white);
    border-radius: 1.2rem;
    overflow: hidden;

    /* Hide empty elements */
    &:is(:empty) {
      display: none;
    }

    /* Stack child elements */
    & > * {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
    }

    .offcanvas-toggle {
      position: relative;
      place-self: start;
      justify-self: end;
      z-index: 3;

      margin-inline-end: 1rem;
      margin-block-start: 1rem;
    }

    &:not(
      :has(.offcanvas-overlay)
      :has(.offcanvas-overlay *)
    ) {
      .offcanvas-toggle,
      .offcanvas-overlay {
        display: none;
      }
    }

    /* Primaärer Inhalts-Container */
    .offcanvas-content {
      display: grid;
      align-content: start;

      padding-inline: 1.5rem;
      padding-block: 1.5rem;

      .media-container {
        aspect-ratio: var(--ratio-photo-standard);
        margin-block-end: 1rem;

        &:not(:has(img)) {
          background-color: var(--color-gray-light);
          border-radius: 1rem;
        }

        img {
          object-fit: contain;
        }
      }

      .media-container,
      .text-container {
        position: relative;
        z-index: 1;
      }

      .text-container {
        text-align: center;
      }
    }

    &:not(:has(.media-container):has(.media-container img)) {
      .offcanvas-content {
        align-content: center;
        padding-block: 3.5rem;
      }
    }


    /* Sekundärer Inhalts-Container */
    .offcanvas-overlay {
      --_transition-delay-opacity-show: 200ms;
      --_transition-delay-opacity-hide: 50ms;

      background-color: var(--color-primary);
      color: var(--color-white);
      text-align: start;
      padding-inline: 1.5rem 5rem;
      padding-block: 1.5rem;
      overflow: hidden;
      z-index: 2;

      transition:
        transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
      transform:
        translateY(calc(100% + 1rem));

      * {
        color: currentColor;
      }

      & > * {
        opacity: 0;
        transition:
          opacity var(--transition-duration) var(--transition-timing) var(--_transition-delay-opacity-hide);
      }
    }

    h4,
    p,
    li, a {
      font-size: 1.2rem;
      font-weight: inherit;
      line-height: 1.4;
      hyphens: auto;
      hyphenate-limit-chars: 16 6 8;

      &::selection {
        background-color: var(--color-selection-primary);
      }
    }

    ul {
      display: grid;
      row-gap: .25rem;
      list-style-type: none;
      padding-inline: 0;
    }

    h4,
    *:is(:last-child) {
      margin-block: 0;
    }

    &:has(button.offcanvas-toggle:is([aria-show="true"])) {
      .offcanvas-overlay {
        transform: translateY(0);

        & > * {
          opacity: 1;
          transition:
            opacity var(--transition-duration) var(--transition-timing) var(--_transition-delay-opacity-show);
        }
      }
    }
  }


  /*
   * Medien-Grid  2 x 2 bis 6 x 6
   */
  div[class*="media-grid-"] {
    --_axis-items: 2;

    &[class*="2"] {
      --_axis-items: 2;
    }

    &[class*="3"] {
      --_axis-items: 3;
    }

    &[class*="4"] {
      --_axis-items: 4;
    }

    &[class*="5"] {
      --_axis-items: 5;
    }

    &[class*="6"] {
      --_axis-items: 6;
    }

    display: grid;
    grid-template-columns: repeat(var(--_axis-items), 1fr);
    gap: 1rem;

    > * {
      border-radius: 2rem;
    }
  }
}

.dropdown {
  .dropdown-toggle {
    display: inline-flex;
    column-gap: .5rem;

    &:after {
      aspect-ratio: var(--ratio-square);
      inline-size: .625rem;
      border: none;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translate(-.075rem, -.075rem);
      transform-origin: 65% 65%;
      transition:
        color var(--transition-duration) var(--transition-timing) var(--transition-delay),
        transform var(--transition-duration) var(--transition-timing) var(--transition-delay),
        border-color var(--transition-duration) var(--transition-timing) var(--transition-delay);
    }

    &:is(.show) {
      &:after {
        transform: rotate(-135deg);
      }
    }

    &:not(.show):is(:hover, :focus-visible) {
      color: var(--color-secondary);

      &:after {
        border-color: var(--color-secondary);
      }
    }
  }
}


/*
 * Swiper
 */
.swiper-container {
  container-name: swiper;
  container-type: inline-size;

  position: relative;

  .swiper-slide {
    cursor: grab;

    .text-container * {
      &:is(:hover) {
        cursor: auto;
      }

      &:is(a:hover) {
        cursor: pointer;
      }
    }
  }

  .swiper {
    &:is(.is-swiping) {
      .swiper-slide {
        cursor: grabbing;
      }
    }
  }

  .text-container {
    *:is(h2, h3, h4, h5, h6):first-of-type,
    p:not(:has(> a.btn)) {
      margin-block-end: var(--bs-size-6);
    }

    padding-inline: clamp(2rem, calc(5vw - 1rem), 4rem);
    padding-block: clamp(0rem, calc(5vw - 2rem), 4rem) 4rem;
  }

  .media-container {
    block-size: 100%;
    aspect-ratio: var(--ratio-auto);
    justify-content: center;

    img {
      inline-size: auto;
      max-block-size: 30rem;
      object-position: left center;
    }
  }

  .swiper-controls {
    --swiper-navigation-size: 2.5rem;

    position: absolute;
    bottom: 5rem;
    right: 1rem;

    display: grid;
    block-size: var(--swiper-navigation-size);
    grid-template-columns: repeat(2, auto);
    column-gap: 1rem;

    .swiper-button-prev,
    .swiper-button-next {
      position: relative;
      top: initial;
      left: initial;
      right: initial;
      bottom: initial;
      margin-block: 0;

      & > * {
        color: var(--color-tertiary);
        transition:
          color var(--transition-duration) var(--transition-timing) var(--transition-delay);
      }

      &:is(:hover, :focus-visible) {
        & > * {
          color: var(--color-tertiary-hover);
        }
      }
    }
  }

  /* Container-Breite: >= 1200px */
  @container swiper ( width >= 75rem ) {
    .swiper {
      .media-container {
        aspect-ratio: var(--ratio-square);
        justify-content: initial;

        img {
          max-block-size: 46rem;
        }
      }
    }
  }

  .swiper-pagination {
    --swiper-pagination-top: auto;
    --swiper-pagination-bottom: auto;

    position: relative;
    margin-block-start: 2rem;

    .swiper-pagination-bullet {
      inline-size: var(--swiper-pagination-bullet-size);
      block-size: var(--swiper-pagination-bullet-size);
      border-radius: var(--swiper-pagination-bullet-size);
      transition:
        inline-size var(--transition-duration) var(--transition-timing) var(--transition-delay);
    }

    .swiper-pagination-bullet-active {
      inline-size: 2.85rem;
    }
  }
}


/*
 * Search Filter Form
 */
.search-filter-form {
  ul {
    padding-inline: 0;

    &:is(.subcategories) {
      li {
        padding-inline: 1ch 0;
      }
    }
  }

  input[type="checkbox"] {
    margin-block: .125rem;
  }
}



/*
 * Cookie Consent
 */
#cookieconsent {
  position: fixed;
  inset: 100% 0 0 100%;
  z-index: 1000;

  inline-size: max-content;
  block-size: fit-content;
  transform: translate(-100%, -100%);

  .cc-window {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 1rem;
    box-shadow: 0 0 4rem oklch(from var(--color-black) l c h / .1);

    padding-inline: 2rem;
    padding-block: 1.5rem;

    margin-inline: .5rem;
    margin-block: .5rem;

    h2 {
      color: var(--color-secondary);
    }

    .cc-compliance {
      display: flex;
      justify-content: flex-end;
      margin-block: 1rem 0;

      button:is(.cc-dismiss) {
        line-height: normal;
        transition:
          all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      }
    }
  }
}
.frame-space-before-extra-small{
  margin-top: 0.5rem;
}
.frame-space-before-small{
  margin-top: 1rem;
}
.frame-space-before-medium{
  margin-top: 2rem;
}
.frame-space-before-large{
  margin-top: 3rem;
}
.frame-space-before-extra-large{
  margin-top: 4.5rem;
}

.frame-type-accordion{
  scroll-margin-top: 150px;
}

hr{
  border-top: 3px solid;
  border-top-color: currentColor;
}

.card-group-element{
  --gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap);
}
.card-group-element.card-group-element .card{
  position: relative;
  height: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
  cursor: pointer;
}
.card-group-element.card-group-element .card:not(.visible):after{
  content: '+';
  background-color: var(--color-secondary);
  color: var(--color-white);
  z-index: 99;
  font-size: 3rem;
  width: 3rem;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.card-group-element.card-group-element .card.visible:has(.card-body-content)::after{
  content: '-';
  color: var(--color-white);
  z-index: 99;
  font-size: 3rem;
  width: 3rem;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.card-group-element-item{
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px){
  .card-group-element-columns-5 .card-group-element-item, .card-group-element-columns-4 .card-group-element-item, .card-group-element-columns-3 .card-group-element-item, .card-group-element-columns-2 .card-group-element-item{
    flex: 0 0 auto;
    width: calc(50% - var(--gap));
  }
}
@media (min-width: 768px){
  .card-group-element-columns-5 .card-group-element-item, .card-group-element-columns-4 .card-group-element-item, .card-group-element-columns-3 .card-group-element-item{
    flex: 0 0 auto;
    width: calc(33.3333333% - var(--gap));
  }
}
@media (min-width: 992px){

  .card-group-element-columns-5 .card-group-element-item, .card-group-element-columns-4 .card-group-element-item{
    flex: 0 0 auto;
    width: calc(25% - var(--gap));
  }

}
@media (min-width: 1200px){
  .card-group-element-columns-5 .card-group-element-item{
    flex: 0 0 auto;
    width: calc(20% - var(--gap));
  }
}

.card-group-element img{
  max-width: 100%;
  height: auto;
}
.card-group-element .card-img-top{
  padding: 1rem;
}
.card-group-element h5{
  font-family: var(--font-family-base);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-stretch: normal;
  font-style: normal;
  color: var(--font-color-paragraph);
  line-height: var(--line-height-paragraph);
  text-align: center;
}
.card-body-content{
  position: absolute;
  inset: 0;

  background-color: var(--color-primary);
  color: #fff !important;

  padding-inline: 1.5rem 5rem;
  padding-block: 1.5rem;

  /* Start versteckt */
  transform: translateY(100%);
  opacity: 0;

  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
.visible .card-body-content{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.card-body-content *{
  color: #fff !important;
}

header .section.static {
  display: none;
}
body > .cookie-set{display:none;}
body:has(
    #page-content > .section:first-child > .home-banner:first-child
) header.static,
body:has(
    #page-content > .section:first-child > .frame:first-child
) header.static,
body:has(
    #page-content > .section:first-child .color-gradient:nth-child(2)
) header .section.static {
  display: block;
}


#page-content > .section:first-child  .color-gradient:nth-child(2),
#page-content > .section:first-child > .home-banner:first-child,
#page-content > .section:first-child > .frame:first-child {
  z-index: 999;
  position: relative;
}
svg{
  max-width: 100%;
  height: auto;
}
.pointsem-benefits .media-container img{
  height: 100px;
}
.svgWhite img{
  filter: brightness(0) invert(1);
}
.media-container.bordered{
  text-align: center;
}
.media-container.bordered img{
  border: 2px solid currentColor;
  padding: .5rem;
  border-radius: 1rem;
}
@media (min-width: 1200px){
  .row.container-mini{
    max-width: 70%;
    margin-inline: auto;
  }
}


.dropdown-menu.show {
    display: block;
}

.sticky > div {
  position: sticky;
  top: calc( var(--header-block-size) + 2rem );
}
.sticky > form {
  position: sticky;
  top: calc( var(--header-block-size) + 2rem );
}

@media (max-width:768px){
	.fixed .btn.btn-mobile-menu {
	  color: #132b61;
	}
	.home-banner .text-container{

	}
	.home-banner{
	  margin-top: -12rem !important;padding-top:15rem;
	}
	section, div:is(.section) {
	  &[class*="-banner"] {
		& .media-container {
				margin-top: -15rem;
				block-size: calc(100% + 15rem);
				max-block-size: inherit;
			}
		}
	}

}

/* ============================================================
 * Medien-Lightbox (PhotoSwipe)
 * ============================================================ */
.media-container > a.lightbox {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  cursor: zoom-in;
}

.media-container > a.lightbox::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgb(19 43 97 / 45%));
  opacity: 0;
  transition: opacity var(--transition-duration) var(--transition-timing);
  pointer-events: none;
}

.media-container > a.lightbox::after {
  content: "\f62c";
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: rgb(19 43 97 / 85%);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 20%);
  color: var(--color-white);
  font-family: "bootstrap-icons";
  font-size: 1.25rem;
  line-height: 1;
  opacity: .9;
  transform: translateY(.35rem);
  transition:
    opacity var(--transition-duration) var(--transition-timing),
    transform var(--transition-duration) var(--transition-timing),
    background-color var(--transition-duration) var(--transition-timing);
  pointer-events: none;
}

.media-container > a.lightbox:hover::before,
.media-container > a.lightbox:focus-visible::before {
  opacity: 1;
}

.media-container > a.lightbox:hover::after,
.media-container > a.lightbox:focus-visible::after {
  background: var(--color-tertiary);
  opacity: 1;
  transform: translateY(0);
}

.media-container > a.lightbox:focus-visible {
  outline: 3px solid var(--color-tertiary);
  outline-offset: 4px;
}

.pswp {
  --pswp-bg: #ffffff;
  --pswp-placeholder-bg: #ffffff;
  --pswp-root-z-index: 110000;
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #132b61;
  --pswp-icon-stroke-color: #132b61;
  font-family: var(--font-family-base);
}

.pswp__bg {
  background:
    radial-gradient(circle at 50% 45%, rgb(0 166 229 / 16%), transparent 45%),
    var(--pswp-bg);
}

.pswp__top-bar {
  height: 5rem;
  padding: .75rem;
  background: linear-gradient(to bottom, rgb(8 26 67 / 80%), transparent);
}

.pswp :is(.pswp__button--close, .pswp__button--zoom) {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 0 0 .5rem;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(8px);
  transition:
    background-color var(--transition-duration) var(--transition-timing),
    transform var(--transition-duration) var(--transition-timing);
}

.pswp :is(.pswp__button--close, .pswp__button--zoom):hover,
.pswp :is(.pswp__button--close, .pswp__button--zoom):focus-visible {
  background: var(--color-tertiary);
  transform: scale(1.06);
}

.pswp :is(.pswp__button--close, .pswp__button--zoom) .pswp__icn {
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
}

.pswp__img {
  border-radius: .75rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 45%);
}

.pswp__dynamic-caption {
  color: var(--color-white);
}

.pswp__dynamic-caption--below,
.pswp__dynamic-caption--mobile {
  padding: .85rem 1rem;
  border-radius: .5rem;
  background: rgb(19 43 97 / 88%);
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 25%);
  backdrop-filter: blur(10px);
}

.pswp__dynamic-caption__title {
  font-weight: 600;
}

.pswp__dynamic-caption__subtitle {
  margin-top: .25rem;
  opacity: .82;
}

@media (max-width: 575.98px) {
  .media-container > a.lightbox::after {
    right: .75rem;
    bottom: .75rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .pswp__img {
    border-radius: .35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-container > a.lightbox::before,
  .media-container > a.lightbox::after,
  .pswp :is(.pswp__button--close, .pswp__button--zoom) {
    transition: none;
  }
}