@charset "UTF-8";
/* Media Query Breakpoints (Figma) */
@media (min-width: 1200px) {
  .container {
    max-width: 1440px;
    width: 100%;
  }
}
@font-face {
  font-family: "Geologica";
  src: url("../../fonts/Geologica-VariableFont_CRSV-SHRP-slnt-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.font-geologica {
  font-family: "Geologica", sans-serif;
}

/* Calculate the right REM value */
.label-m-regular {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-m-regular {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-m-regular {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.label-m-semibold {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-m-semibold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-m-semibold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.label-s-regular {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-s-regular {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-s-regular {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.label-s-semibold {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-s-semibold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-s-semibold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.label-s-bold {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-s-bold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-s-bold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}

.label-xs-regular {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-xs-regular {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-xs-regular {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.label-xs-semibold {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-xs-semibold {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-xs-semibold {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.label-2xs-semibold {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-2xs-semibold {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 16px;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-2xs-semibold {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 16px;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.label-2xs {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .label-2xs {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 16px;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .label-2xs {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 16px;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.background-gradient-brand-dark-blue {
  background: linear-gradient(204deg, #0A4D9B, #023E84 42.46%, #043166), rgba(0, 0, 0, 0.2);
}

.background-gradient-neutral-light {
  background: linear-gradient(159deg, rgba(2, 62, 132, 0.05) 13.78%, rgba(2, 62, 132, 0.1) 86.22%);
}

.background-brand-surface-accent {
  background-color: #FA7D19;
}

.background-grey {
  background-color: #F3F3F3;
}

.background-white {
  background-color: #FFFFFF;
}

.background-neutral-surface-neutral-base-inversed {
  background-color: #FFFFFF;
}

.background-blue {
  background-color: #023E84;
}

.background-yellow {
  background-color: #F5DA10;
}

.has-fx {
  background-color: rgba(255, 255, 255, 0.1); /* oder per Token / Variable */
  filter: var(--fx-filter, none);
  backdrop-filter: var(--fx-backdrop-filter, none);
  -webkit-backdrop-filter: var(--fx-backdrop-filter, none); /* Safari */
}

.heading-3xl {
  font-size: 48px;
  font-size: 3rem;
  line-height: 56px;
  line-height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .heading-3xl {
    font-size: 56px;
    font-size: 3.5rem;
    line-height: 64px;
    line-height: 4rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .heading-3xl {
    font-size: 64px;
    font-size: 4rem;
    line-height: 72px;
    line-height: 4.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

.heading-2xl {
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .heading-2xl {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .heading-2xl {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

.heading-xl {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 32px;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .heading-xl {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .heading-xl {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

.heading-l {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 28px;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .heading-l {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .heading-l {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

.heading-m {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .heading-m {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .heading-m {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}

.heading-s {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .heading-s {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 26px;
    line-height: 1.625rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .heading-s {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}

:root {
  --background-base: #F9FAFB;
  --background-light: #FFFFFF;
  --background-content: #F3F3F3;
  --text-neutral-base: #000000;
  --text-neutral-light: #4B5563;
  --text-neutral-muted: #7D8593;
  --text-neutral-accent: #FA7D19;
  --text-neutral-base-inversed: #FFFFFF;
  --text-neutral-light-inversed: #A0A7B3;
  --text-neutral-muted-inversed: #7D8593;
  --text-neutral-accent-inversed: #FFB471;
  --text-primary-bold: #011E42;
  --text-primary-deep: #022F67;
  --text-primary-base: #023E84;
  --text-primary-muted: #A0A7B3;
  --text-primary-bold-inversed: #FAFBFD;
  --text-primary-deep-inversed: #F2F5F9;
  --text-primary-base-inversed: #FFFFFF;
  --text-primary-muted-inversed: #7D8593;
  --text-system-success: #47A44B;
  --text-system-success-lighter: #70BF73;
  --text-system-error: #970B01;
  --text-system-success-inversed: #B7DFB9;
  --text-system-error-inversed: #EF9A9A;
  --text-accent-accent: #FA7D19;
  --text-accent-accent-inversed: #FFB471;
  --icon-neutral-base: #000000;
  --icon-neutral-light: #4B5563;
  --icon-neutral-muted: #7D8593;
  --icon-neutral-base-inversed: #FFFFFF;
  --icon-neutral-light-inversed: #A0A7B3;
  --icon-neutral-muted-inversed: #7D8593;
  --icon-primary-bold: #011E42;
  --icon-primary-deep: #022F67;
  --icon-primary-base: #023E84;
  --icon-primary-muted: #A0A7B3;
  --icon-primary-bold-inversed: #FAFBFD;
  --icon-primary-deep-inversed: #F2F5F9;
  --icon-primary-base-inversed: #FFFFFF;
  --icon-primary-muted-inversed: #7D8593;
  --icon-secondary-bold: #FFF173;
  --icon-secondary-deep: #E6CF00;
  --icon-secondary-base: #FFE620;
  --icon-secondary-light: #FFF9CC;
  --icon-secondary-soft: #FFFDF2;
  --icon-secondary-bold-inversed: #FFFDF2;
  --icon-secondary-deep-inversed: #FFF9CC;
  --icon-secondary-base-inversed: #FFFFFF;
  --icon-secondary-light-inversed: #E6CF00;
  --icon-secondary-soft-inverted: #CCB500;
  --icon-system-success: #47A44B;
  --icon-system-error: #970B01;
  --icon-system-success-inversed: #B7DFB9;
  --icon-system-error-inverted: #EF9A9A;
  --icon-accent-accent: #FA7D19;
  --icon-accent-accent-inversed: #FFB471;
  --border-neutral-base: #4B5563;
  --border-neutral-light: #E0E5EA;
  --border-neutral-muted: #7D8593;
  --border-neutral-base-inversed: #E0E5EA;
  --border-neutral-light-inversed: #C3C9D2;
  --border-neutral-muted-inversed: #7D8593;
  --border-primary-bold: #011E42;
  --border-primary-deep: #022F67;
  --border-primary-base: #023E84;
  --border-primary-muted: #7D8593;
  --border-primary-bold-inversed: #FAFBFD;
  --border-primary-deep-inversed: #F2F5F9;
  --border-primary-base-inversed: #FFFFFF;
  --border-primary-muted-inversed: #7D8593;
  --border-secondary-bold: #FFF173;
  --border-secondary-deep: #E6CF00;
  --border-secondary-base: #FFE620;
  --border-secondary-light: #FFF9CC;
  --border-secondary-soft: #FFFDF2;
  --border-secondary-bold-inversed: #FFFDF2;
  --border-secondary-deep-inversed: #FFF9CC;
  --border-secondary-base-inversed: #FFFFFF;
  --border-secondary-light-inversed: #E6CF00;
  --border-secondary-soft-inverted: #CCB500;
  --border-system-success: #47A44B;
  --border-system-error: #970B01;
  --border-system-success-inversed: #B7DFB9;
  --border-system-error-inverted: #EF9A9A;
  --surface-neutral-bold: #1F2933;
  --surface-neutral-deep: #374151;
  --surface-neutral-base: #A0A7B3;
  --surface-neutral-light: #F3F3F3;
  --surface-neutral-soft: #F9FAFB;
  --surface-neutral-bold-inversed: #F9FAFB;
  --surface-neutral-deep-inversed: #F3F3F3;
  --surface-neutral-base-inversed: #FFFFFF;
  --surface-neutral-light-inversed: #374151;
  --surface-neutral-soft-inversed: #1F2933;
  --surface-neutral-transparent-deep: rgba(0, 0, 0, 0.5);
  --surface-neutral-transparent-base: rgba(0, 0, 0, 0.15);
  --surface-neutral-transparent-light-inversed: rgba(243, 243, 243, 0.5);
  --surface-neutral-transparent-base-inversed: rgba(255, 255, 255, 0.6);
  --surface-primary-bold: #011E42;
  --surface-primary-deep: #022F67;
  --surface-primary-base: #023E84;
  --surface-primary-light: #E6ECF3;
  --surface-primary-soft: #FAFBFD;
  --surface-primary-muted: #A0A7B3;
  --surface-primary-bold-inversed: #F2F5F9;
  --surface-primary-deep-inversed: #FAFBFD;
  --surface-primary-base-inversed: #FFFFFF;
  --surface-primary-light-inversed: #011E42;
  --surface-primary-soft-inversed: #022F67;
  --surface-primary-muted-inversed: #C3C9D2;
  --surface-primary-transparent-bold: rgba(2, 62, 132, 0.4);
  --surface-primary-transparent-deep: rgba(2, 62, 132, 0.2);
  --surface-primary-transparent-base: rgba(2, 62, 132, 0.05);
  --surface-primary-transparent-light: rgba(2, 62, 132, 0.75);
  --surface-primary-transparent-muted: rgba(#A0A7B3, 0.4);
  --surface-primary-transparent-bold-inversed: rgba(255, 255, 255, 0.15);
  --surface-primary-transparent-deep-inversed: rgba(255, 255, 255, 0.1);
  --surface-primary-transparent-base-inversed: rgba(255, 255, 255, 0.05);
  --surface-primary-transparent-light-inversed: rgba(255, 255, 255, 0.75);
  --surface-primary-transparent-muted-inversed: rgba(#A0A7B3, 0.4);
  --surface-secondary-bold: #FFF173;
  --surface-secondary-deep: #E6CF00;
  --surface-secondary-base: #FFE620;
  --surface-secondary-light: #FFF9CC;
  --surface-secondary-soft: #FFFDF2;
  --surface-secondary-bold-inversed: #FFFDF2;
  --surface-secondary-deep-inversed: #FFF9CC;
  --surface-secondary-base-inversed: #FFFFFF;
  --surface-secondary-light-inversed: #E6CF00;
  --surface-secondary-soft-inverted: #CCB500;
  --surface-system-success: #DAFFDD;
  --surface-system-error: #FFCAC4;
  --surface-system-success-inversed: #70BF73;
  --surface-system-error-inversed: #F15D5B;
  --surface-accent-accent: #FA7D19;
  --on-surface-text-neutral-base: #000000;
  --on-surface-text-neutral-light: #4B5563;
  --on-surface-text-neutral-muted: #7D8593;
  --on-surface-text-neutral-accent: #E6CF00;
  --on-surface-text-neutral-base-inversed: #FFFFFF;
  --on-surface-text-neutral-light-inversed: #A0A7B3;
  --on-surface-text-neutral-muted-inversed: #7D8593;
  --on-surface-text-neutral-accent-inversed: #FFEB47;
  --on-surface-text-primary-bold: #011E42;
  --on-surface-text-primary-deep: #022F67;
  --on-surface-text-primary-base: #023E84;
  --on-surface-text-primary-muted: #7D8593;
  --on-surface-text-primary-on-primary: #FFFFFF;
  --on-surface-text-primary-on-primary-muted: #FFFFFF;
  --on-surface-text-primary-bold-inversed: #FAFBFD;
  --on-surface-text-primary-deep-inversed: #E6ECF3;
  --on-surface-text-primary-base-inversed: #FFFFFF;
  --on-surface-text-primary-muted-inversed: #7D8593;
  --on-surface-text-primary-on-primary-inversed: #000000;
  --on-surface-text-primary-on-primary-muted-inversed: #F9FAFB;
  --on-surface-text-system-base: #000000;
  --on-surface-text-system-success: #47A44B;
  --on-surface-text-system-error: #970B01;
  --on-surface-text-system-base-inversed: #FFFFFF;
  --on-surface-text-system-success-inversed: #B7DFB9;
  --on-surface-text-system-error-inversed: #EF9A9A;
  --on-surface-icon-neutral-base: #000000;
  --on-surface-icon-neutral-light: #4B5563;
  --on-surface-icon-neutral-muted: #7D8593;
  --on-surface-icon-neutral-accent: #E6CF00;
  --on-surface-icon-neutral-base-inversed: #FFFFFF;
  --on-surface-icon-neutral-light-inversed: #A0A7B3;
  --on-surface-icon-neutral-muted-inversed: #7D8593;
  --on-surface-icon-neutral-accent-inversed: #FFEB47;
  --on-surface-icon-primary-bold: #011E42;
  --on-surface-icon-primary-deep: #023676;
  --on-surface-icon-primary-base: #023E84;
  --on-surface-icon-primary-muted: #7D8593;
  --on-surface-icon-primary-on-primary: #FFFFFF;
  --on-surface-icon-primary-on-primary-muted: #FFFFFF;
  --on-surface-icon-primary-bold-inversed: #FAFBFD;
  --on-surface-icon-primary-deep-inversed: #E6ECF3;
  --on-surface-icon-primary-base-inversed: #FFFFFF;
  --on-surface-icon-primary-muted-inversed: #7D8593;
  --on-surface-icon-primary-on-primary-inversed: #000000;
  --on-surface-icon-primary-on-primary-muted-inversed: #F9FAFB;
  --on-surface-icon-system-base: #000000;
  --on-surface-icon-system-success: #47A44B;
  --on-surface-icon-system-success-deep: #47A44B;
  --on-surface-icon-system-error: #970B01;
  --on-surface-icon-system-base-inversed: #FFFFFF;
  --on-surface-icon-system-success-inversed: #B7DFB9;
  --on-surface-icon-system-error-inversed: #EF9A9A;
  --on-surface-border-neutral-base: #000000;
  --on-surface-border-neutral-light: #4B5563;
  --on-surface-border-neutral-muted: #7D8593;
  --on-surface-border-neutral-accent: #E6CF00;
  --on-surface-border-neutral-base-inversed: #FFFFFF;
  --on-surface-border-neutral-light-inversed: #A0A7B3;
  --on-surface-border-neutral-muted-inversed: #7D8593;
  --on-surface-border-neutral-accent-inversed: #FFEB47;
  --on-surface-border-primary-bold: #011E42;
  --on-surface-border-primary-deep: #022F67;
  --on-surface-border-primary-base: #023E84;
  --on-surface-border-primary-muted: #7D8593;
  --on-surface-border-primary-on-primary: #FFFFFF;
  --on-surface-border-primary-on-primary-muted: #FFFFFF;
  --on-surface-border-primary-bold-inversed: #FAFBFD;
  --on-surface-border-primary-deep-inversed: #E6ECF3;
  --on-surface-border-primary-base-inversed: #FFFFFF;
  --on-surface-border-primary-muted-inversed: #7D8593;
  --on-surface-border-primary-on-primary-inversed: #000000;
  --on-surface-border-primary-on-primary-muted-inversed: #F9FAFB;
  --on-surface-border-secondary-bold: #CCB500;
  --on-surface-border-secondary-deep: #E6CF00;
  --on-surface-border-secondary-base: #FFE620;
  --on-surface-border-secondary-muted: #7D8593;
  --on-surface-border-secondary-bold-inversed: #FFFDF2;
  --on-surface-border-secondary-deep-inversed: #FFF9CC;
  --on-surface-border-secondary-base-inversed: #FFFFFF;
  --on-surface-border-secondary-muted-inversed: #7D8593;
  --on-surface-border-system-success: #47A44B;
  --on-surface-border-system-error: #970B01;
  --on-surface-border-system-success-inversed: #B7DFB9;
  --on-surface-border-system-error-inversed: #EF9A9A;
  /* ============================================
     SPACING
     ============================================ */
  --spacing-0px: 0;
  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-24px: 24px;
  --spacing-28px: 28px;
  --spacing-32px: 32px;
  --spacing-40px: 40px;
  --spacing-48px: 48px;
  --spacing-56px: 56px;
  --spacing-64px: 64px;
  --spacing-104px: 104px;
  /* ============================================
     RADIUS
     ============================================ */
  --radius-8px: 8px;
  --radius-12px: 12px;
  --radius-16px: 16px;
  --radius-24px: 24px;
  --radius-32px: 32px;
  --radius-40px: 40px;
  --radius-round: 1000px;
  /* ============================================
     BORDER WIDTHS
     ============================================ */
  --border-1px: 1px;
  --border-2px: 2px;
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  /* Font Family */
  --font-family-geologica: 'Geologica', sans-serif;
  /* Font Sizes */
  --font-size-10px: 10px;
  --font-size-12px: 12px;
  --font-size-14px: 14px;
  --font-size-16px: 16px;
  --font-size-18px: 18px;
  --font-size-20px: 20px;
  --font-size-24px: 24px;
  --font-size-32px: 32px;
  --font-size-40px: 40px;
  --font-size-48px: 48px;
  --font-size-56px: 56px;
  --font-size-64px: 64px;
  /* Line Heights */
  --line-height-12px: 12px;
  --line-height-16px: 16px;
  --line-height-18px: 18px;
  --line-height-20px: 20px;
  --line-height-24px: 24px;
  --line-height-26px: 26px;
  --line-height-28px: 28px;
  --line-height-32px: 32px;
  --line-height-40px: 40px;
  --line-height-48px: 48px;
  --line-height-56px: 56px;
  --line-height-64px: 64px;
  --line-height-72px: 72px;
  /* Letter Spacing */
  --letter-spacing-0px: 0;
  --letter-spacing-0-25: 0.25px;
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* ============================================
     LEGACY VARIABLES (for backwards compatibility)
     ============================================ */
  --color-white-100: #FFFFFF;
  --border-border-2px: var(--border-2px);
  --font-label-M-font-size: var(--font-size-16px);
  --font-label-M-line-height: var(--line-height-24px);
  /* Font-Sizes */
  --font-heading-S-font-size: 16px;
  --font-label-S-font-size: 14px;
  --font-label-M-font-size: 16px;
  --font-body-M-font-size: 16px;
  /* Line-Height */
  --font-label-S-allcaps-line-height: 18px;
  --font-label-M-line-height: 24px;
  --font-body-M-line-height: 24px;
  /* Line Spacing */
  --font-label-M-tracking: 0;
  /*Gutters*/
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
  /*Mobile View*/
  /*spacing/non-scalable*/
  --spacing-non-scalable-none: 0;
  --spacing-non-scalable-3xs: 2px;
  --spacing-non-scalable-2xs: 4px;
  --spacing-non-scalable-xs: 8px;
  --spacing-non-scalable-s: 12px;
  --spacing-non-scalable-m: 16px;
  --spacing-non-scalable-l: 24px;
  --spacing-non-scalable-xl: 32px;
  --spacing-non-scalable-2xl: 40px;
  --spacing-non-scalable-3xl: 48px;
  --spacing-non-scalable-4xl: 56px;
  --spacing-non-scalable-5xl: 64px;
  /*spacing/scalable Mobile*/
  --spacing-scalable-2xs: 2px;
  --spacing-scalable-xs: 4px;
  --spacing-scalable-s: 8px;
  --spacing-scalable-m: 12px;
  --spacing-scalable-l: 16px;
  --spacing-scalable-xl: 24px;
  --spacing-scalable-2xl: 32px;
  --spacing-scalable-3xl: 40px;
  --spacing-scalable-6xl: 24px;
  /*radius/scalable*/
  --radius-scalable-s: 12px;
  --radius-scalable-m: 16px;
  --radius-scalable-l: 24px;
  /*radius/non-scalable*/
  --radius-non-scalable-2xs: 8px;
  --radius-non-scalable-xs: 8px;
  --radius-non-scalable-s: 12px;
  --radius-non-scalable-m: 16px;
  --radius-non-scalable-l: 24px;
  --radius-non-scalable-xl: 32px;
  --radius-non-scalable-round: 1000px;
  /*Tablet View*/
}
@media (min-width: 768px) {
  :root {
    /*spacing/scalable Tablet*/
    --spacing-scalable-2xs: 4px;
    --spacing-scalable-xs: 8px;
    --spacing-scalable-s: 12px;
    --spacing-scalable-m: 16px;
    --spacing-scalable-l: 24px;
    --spacing-scalable-xl: 32px;
    --spacing-scalable-2xl: 40px;
    --spacing-scalable-3xl: 56px;
    --spacing-scalable-6xl: 64px;
    /*radius/scalable Tablet*/
    --radius-scalable-s: 12px;
    --radius-scalable-m: 16px;
    --radius-scalable-l: 24px;
  }
}
:root {
  /*Desktop View*/
}
@media (min-width: 1200px) {
  :root {
    /*spacing/scalable Desktop*/
    --spacing-scalable-2xs: 8px;
    --spacing-scalable-xs: 12px;
    --spacing-scalable-s: 16px;
    --spacing-scalable-m: 24px;
    --spacing-scalable-l: 32px;
    --spacing-scalable-xl: 40px;
    --spacing-scalable-2xl: 56px;
    --spacing-scalable-3xl: 64px;
    --spacing-scalable-6xl: 104px;
    /*radius/scalable Desktop*/
    --radius-scalable-s: 12px;
    --radius-scalable-m: 16px;
    --radius-scalable-l: 24px;
  }
}

.body-l-regular {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 28px;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-l-regular {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-l-regular {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.body-l-semibold {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 28px;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-l-semibold {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-l-semibold {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.body-m-regular {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-m-regular {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-m-regular {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.body-m-semibold {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-m-semibold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-m-semibold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.body-s-regular {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-s-regular {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-s-regular {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.body-s-semibold {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-s-semibold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-s-semibold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.body-xs-regular {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-xs-regular {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-xs-regular {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.body-xs-semibold {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .body-xs-semibold {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .body-xs-semibold {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 18px;
    line-height: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body .page-content {
  flex: 1;
}

.dt-scroll-headInner {
  margin: auto !important;
}

.footer {
  height: auto;
  /* padding: var(--bs-gutter-x) var(--bs-gutter-y);*/
  background-color: var(--background-footer);
}
.footer .footer-container {
  background-color: var(--color-white-100);
  border-radius: var(--radius-scalable-s);
}
.footer .footer-container .inner-container {
  max-width: 1440px !important;
  margin: 0 auto;
  padding: var(--spacing-non-scalable-2xl) var(--spacing-scalable-6xl);
  box-sizing: border-box;
}
@media (min-width: 1200px) {
  .footer .footer-container .inner-container {
    padding: var(--spacing-non-scalable-2xl) 119px;
  }
}
.footer .footer-container .footer-grid {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-non-scalable-5xl);
}
.footer .footer-container .footer-apps-social-wrapper {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-scalable-xl);
}
.footer .footer-container .footer-apps-list {
  grid-template-columns: repeat(1, auto);
  gap: var(--spacing-non-scalable-m);
}
.footer .footer-container .footer-social-media .footer-social-media-list {
  grid-template-columns: repeat(4, auto);
  gap: var(--spacing-scalable-xs);
  margin: 0;
  justify-content: start;
}
.footer .footer-container .footer-social-media .footer-social-media-list li {
  border-radius: var(--radius-non-scalable-round);
  background: var(--background-content);
  padding: var(--spacing-non-scalable-s);
}
.footer .footer-container .footer-social-media .footer-social-media-list li img {
  padding: var(--spacing-non-scalable-3xs);
}
.footer .footer-container .footer-steuer-tipps-list li {
  margin-bottom: var(--spacing-scalable-xs);
  color: var(--text-primary-base);
}
.footer .footer-container .footer-steuer-tipps-list li:last-child {
  margin-bottom: 0;
}
.footer .footer-container .footer-payment-options > .d-grid {
  gap: var(--spacing-non-scalable-m);
}
.footer .footer-container .footer-payment-options .payment-options {
  grid-template-columns: repeat(2, auto);
  column-gap: var(--spacing-scalable-xs);
  justify-content: start;
}
.footer .footer-container .footer-payment-options .payment-options a {
  border-radius: var(--radius-non-scalable-round);
  background: var(--background-content);
}
.footer .footer-container .footer-payment-options .payment-options a img {
  padding: var(--spacing-non-scalable-xs) var(--spacing-non-scalable-l);
}
.footer .footer-container .heading-s {
  color: var(--text-primary-base);
}
@media (min-width: 768px) {
  .footer .footer-container .inner-container {
    padding: var(--spacing-non-scalable-2xl) var(--spacing-scalable-6xl);
  }
  .footer .footer-container .footer-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
  }
  .footer .footer-container .footer-apps-social-wrapper {
    flex: 1;
    min-width: 0;
  }
  .footer .footer-container .footer-steuer-tipps {
    flex: 1;
    min-width: 0;
  }
  .footer .footer-container .footer-payment-options {
    flex-basis: 100%;
    width: 100%;
    margin-top: var(--spacing-non-scalable-5xl);
  }
}
@media (min-width: 992px) {
  .footer .footer-container .footer-grid {
    flex-wrap: nowrap;
  }
  .footer .footer-container .footer-payment-options {
    flex: 1;
    width: auto;
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .footer .footer-container .footer-grid {
    flex-direction: row;
    justify-content: space-between;
  }
  .footer .footer-container .footer-apps .heading-s,
  .footer .footer-container .footer-social-media .heading-s,
  .footer .footer-container .footer-steuer-tipps .heading-s,
  .footer .footer-container .footer-payment-options .heading-s {
    margin-bottom: var(--spacing-scalable-m);
  }
  .footer .footer-container .footer-social-media-list {
    grid-template-columns: repeat(4, auto);
    gap: var(--spacing-scalable-xs);
  }
}
.footer .container.container-legals {
  background-color: var(--background-content);
  margin-top: var(--spacing-scalable-xs);
  padding: var(--spacing-non-scalable-m) var(--spacing-scalable-6xl);
  border-radius: unset;
}
.footer .container.container-legals .container-legals-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-scalable-l);
  margin: 0;
}
.footer .container.container-legals .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-scalable-l);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .container.container-legals .footer-legal-links a {
  color: var(--text-primary-base);
  text-decoration: none;
  cursor: pointer;
}
.footer .container.container-legals .footer-logo {
  display: none;
}
@media (min-width: 992px) {
  .footer .container.container-legals {
    padding: var(--spacing-scalable-s) var(--spacing-scalable-6xl);
  }
  .footer .container.container-legals .container-legals-wrapper {
    justify-content: space-between;
  }
  .footer .container.container-legals .footer-legal-links {
    justify-content: flex-start;
    gap: var(--spacing-scalable-m);
  }
  .footer .container.container-legals .footer-logo {
    display: block;
    height: auto;
    max-width: 100%;
  }
}

body {
  top: 0 !important;
}

header {
  position: sticky;
  z-index: 1050;
  margin-bottom: 12px;
  top: 0;
  transition: padding 0.3s ease;
}
header .header-styling {
  padding: var(--spacing-non-scalable-m, 16px) var(--spacing-non-scalable-l, 24px);
  border-radius: var(--radius-non-scalable, 8px);
  background: var(--surface-primary-transparent-light-inversed, rgba(255, 255, 255, 0.75));
  backdrop-filter: blur(40px);
  transition: padding 0.3s ease;
}
header nav {
  height: auto;
}
header.header-scrolled {
  max-height: 90px;
}
@media (max-width: 1200px) {
  header.header-scrolled {
    padding: 0 !important;
  }
  header.header-scrolled .header-styling {
    padding: 8px 16px;
  }
  header.header-scrolled + div.my-3,
  header.header-scrolled .glassy-menu-background.my-3 {
    margin-top: 0 !important;
  }
}

.nav-logo {
  position: relative;
  display: inline-block;
  perspective: 800px;
  line-height: 0;
}
.nav-logo img {
  display: block;
  backface-visibility: hidden;
  transform-origin: center center;
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}
.nav-logo img.default {
  opacity: 1;
}
.nav-logo img.heart {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.nav-logo:hover img.default {
  opacity: 0;
  transition-delay: 0.1s;
}
.nav-logo:hover img.heart {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Grundstil: nutzt die vom PHP gesetzten CSS-Variablen */
.btn {
  font-size: var(--font-label-M-font-size, 16px);
  font-weight: 400;
  line-height: var(--font-label-M-line-height, 24px);
  letter-spacing: var(--font-label-M-tracking, 0);
  --btn-bg: transparent;
  --btn-color: inherit;
  --btn-border: transparent;
  --btn-bg-hover: var(--btn-bg);
  --btn-bg-active: var(--btn-bg);
  --btn-bg-disabled: var(--btn-bg);
  --btn-color-disabled: currentColor;
  --btn-border-disabled: var(--btn-border);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-scalable-m);
  padding: var(--spacing-non-scalable-S, 12px) var(--spacing-non-scalable-M, 16px);
  margin-inline: var(--btn-mx, 0);
  margin-block: var(--btn-my, 0);
  border-radius: var(--btn-radius);
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* Blur/Backdrop-Blur aus den Button-Variablen anwenden */
  filter: var(--btn-filter, none);
  backdrop-filter: var(--btn-backdrop-filter, none);
  -webkit-backdrop-filter: var(--btn-backdrop-filter, none);
}
.btn.icon-right {
  padding: 16px 16px 16px 32px;
}
.btn.icon-left {
  padding: 11px 24px 11px 12px;
}
.btn .btn-label, .btn svg, .btn span {
  pointer-events: none;
}
.btn {
  /**
   * Styling Primary Button
   */
}
.btn--primary {
  background-color: var(--text-primary-base);
  color: var(--on-surface-text-primary-base-inversed);
  border-radius: var(--radius-non-scalable-round);
  border: 1px solid var(--text-primary-base);
}
.btn--primary svg {
  background-color: var(--surface-primary-base-inversed);
  fill: var(--on-surface-icon-primary-base);
  border-radius: var(--radius-non-scalable-round);
}
.btn--primary:hover {
  color: var(--on-surface-text-primary-bold-inversed);
  background-color: var(--surface-primary-bold);
}
.btn--primary:hover svg {
  background-color: var(--surface-primary-bold-inversed);
  fill: var(--on-surface-icon-primary-bold);
}
.btn--primary:active {
  color: var(--on-surface-text-primary-deep-inversed) !important;
  background-color: var(--surface-primary-deep) !important;
}
.btn--primary:active svg {
  background-color: var(--surface-primary-deep-inversed);
  fill: var(--on-surface-icon-primary-deep);
}
.btn--primary[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: none;
  background-color: var(--surface-primary-muted);
}
.btn--primary[aria-disabled=true] svg {
  background-color: var(--surface-primary-muted-inversed);
  fill: var(--on-surface-icon-primary-muted);
  border-radius: var(--radius-non-scalable-round);
}
.btn--primary:focus {
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep);
  outline-offset: 2px;
}
.btn {
  /**
   * Styling Primary Inversed Button
   */
}
.btn--primary-inversed {
  background-color: var(--surface-secondary-base);
  color: var(--on-surface-text-primary-base);
  border-radius: var(--radius-non-scalable-round);
  border: none;
}
.btn--primary-inversed svg {
  background-color: var(--surface-primary-base);
  fill: var(--on-surface-icon-primary-base-inversed);
  border-radius: var(--radius-non-scalable-round);
}
.btn--primary-inversed:hover {
  color: var(--on-surface-text-primary-bold);
  background-color: var(--surface-secondary-bold);
}
.btn--primary-inversed:hover svg {
  background-color: var(--surface-primary-bold);
  fill: var(--on-surface-icon-primary-bold-inversed);
}
.btn--primary-inversed:active {
  color: var(--on-surface-text-primary-deep) !important;
  background-color: var(--surface-secondary-deep) !important;
}
.btn--primary-inversed:active svg {
  background-color: var(--surface-primary-deep);
  fill: var(--on-surface-icon-primary-deep-inversed);
}
.btn--primary-inversed[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: none;
  background-color: var(--surface-primary-muted-inversed);
}
.btn--primary-inversed[aria-disabled=true] svg {
  background-color: var(--surface-primary-muted);
  fill: var(--on-surface-icon-primary-muted-inversed);
  border-radius: var(--radius-non-scalable-round);
}
.btn--primary-inversed:focus {
  background-color: var(--surface-secondary-base);
  color: var(--on-surface-text-primary-base, #023E84);
  border: var(--border-border-2px, 2px) solid var(--on-surface-text-primary-base, #023E84);
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep-inversed, #E6ECF3);
  outline-offset: 2px;
}
.btn--primary-inversed:focus svg {
  background: var(--surface-primary-base, #023E84);
  fill: var(--on-surface-icon-primary-base-inversed, #FFF);
}
.btn {
  /**
   * Styling Secondary Button
   */
}
.btn--secondary {
  background-color: transparent;
  color: var(--text-primary-base);
  border-radius: var(--radius-non-scalable-round);
  border: 1px solid var(--text-primary-base);
}
.btn--secondary svg {
  background-color: var(--text-primary-base);
  fill: var(--color-white-100);
  border-radius: var(--radius-non-scalable-round);
}
.btn--secondary:hover {
  background-color: var(--surface-primary-bold-inverse);
  border: 1px solid var(--on-surface-border-primary-bold, #011E42);
}
.btn--secondary:active {
  background-color: var(--surface-primary-deep-inversed, #FAFBFD) !important;
}
.btn--secondary[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-muted, #7D8593);
}
.btn--secondary[aria-disabled=true] svg {
  background-color: var(--surface-primary-muted);
  fill: var(--on-surface-icon-primary-muted-inversed);
  border-radius: var(--radius-non-scalable-round);
}
.btn--secondary:focus {
  background-color: var(--surface-primary-base);
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep);
  outline-offset: 2px;
}
.btn {
  /**
   * Styling Secondary Inversed Button
   */
}
.btn--secondary-inversed {
  background-color: var(--surface-primary-base);
  color: var(--on-surface-text-primary-base-inversed, #FFF);
  border-radius: var(--radius-non-scalable-round, 1000px);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base-inversed, #FFF);
}
.btn--secondary-inversed svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-neutral-base-inversed, #FFF);
  fill: var(--on-surface-icon-primary-base, #023E84);
}
.btn--secondary-inversed:hover {
  color: var(--on-surface-text-primary-bold-inversed);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-bold-inversed, #FAFBFD);
  background: var(--surface-primary-bold, #011E42);
}
.btn--secondary-inversed:hover svg {
  background: var(--surface-primary-bold-inversed, #F2F5F9);
  fill: var(--on-surface-icon-primary-bold, #011E42);
}
.btn--secondary-inversed:active {
  color: var(--on-surface-text-primary-deep-inversed, #E6ECF3) !important;
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-deep-inversed, #E6ECF3) !important;
  background: var(--surface-primary-deep, #022F67) !important;
}
.btn--secondary-inversed:active svg {
  background: var(--surface-primary-deep-inversed, #FAFBFD);
  fill: var(--on-surface-icon-primary-deep, #023676);
}
.btn--secondary-inversed[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-muted-inversed, #7D8593);
}
.btn--secondary-inversed[aria-disabled=true] svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-muted, #A0A7B3);
  fill: var(--on-surface-icon-primary-muted-inversed, #7D8593);
}
.btn--secondary-inversed:focus {
  color: var(--on-surface-text-primary-base-inversed, #FFF);
  background-color: var(--surface-primary-base);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base-inversed, #FFF);
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep-inversed);
  outline-offset: 2px;
}
.btn--secondary-inversed:focus svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-neutral-base-inversed, #FFF);
  fill: var(--on-surface-icon-primary-base, #023E84);
}
.btn {
  /**
   * Styling Tertiary Button
   */
}
.btn--tertiary {
  background-color: var(--color-white-100);
  color: var(--text-primary-base);
  border-radius: var(--radius-non-scalable-round);
}
.btn--tertiary svg {
  background-color: var(--surface-primary-base);
  fill: var(--on-surface-icon-primary-base-inversed);
  border-radius: var(--radius-non-scalable-round);
}
.btn--tertiary:active {
  background-color: var(--surface-primary-deep-inversed);
}
.btn--tertiary:hover {
  background-color: var(--surface-primary-bold-inverse);
}
.btn--tertiary[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-muted);
}
.btn--tertiary[aria-disabled=true] svg {
  background-color: var(--surface-primary-muted);
  fill: var(--on-surface-icon-primary-muted-inversed);
}
.btn--tertiary:focus {
  background-color: var(--on-surface-icon-primary-base-inversed);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base);
  border: 0 solid var(--on-surface-border-primary-base, #023E84);
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep);
  outline-offset: 2px;
}
.btn {
  /**
    * Styling Secondary Inversed Button
    */
}
.btn--tertiary-inversed {
  border-radius: var(--radius-non-scalable-round, 1000px);
  color: var(--on-surface-text-primary-base-inversed, #FFF);
  background-color: var(--surface-primary-base);
}
.btn--tertiary-inversed svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-neutral-base-inversed, #FFF);
  fill: var(--on-surface-icon-primary-base, #023E84);
}
.btn--tertiary-inversed:hover {
  color: var(--on-surface-text-primary-bold-inversed, #FAFBFD);
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-bold, #011E42);
}
.btn--tertiary-inversed:hover svg {
  background: var(--surface-primary-bold-inversed, #F2F5F9);
  fill: var(--on-surface-icon-primary-bold, #011E42);
}
.btn--tertiary-inversed:active {
  color: var(--on-surface-text-primary-deep-inversed, #E6ECF3) !important;
  border-radius: var(--radius-non-scalable-round, 1000px) !important;
  border: 2px solid var(--on-surface-border-primary-deep-inversed, #E6ECF3) !important;
  background: var(--surface-primary-deep, #022F67) !important;
}
.btn--tertiary-inversed:active svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-deep-inversed, #FAFBFD);
  fill: var(--on-surface-icon-primary-deep, #023676);
}
.btn--tertiary-inversed[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--on-surface-text-primary-muted, #7D8593);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-muted-inversed, #7D8593);
}
.btn--tertiary-inversed[aria-disabled=true] svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-muted, #A0A7B3);
  fill: var(--on-surface-icon-primary-muted-inversed, #7D8593);
}
.btn--tertiary-inversed:focus {
  color: var(--on-surface-text-primary-base-inversed, #FFF);
  background-color: var(--surface-primary-base);
  outline: var(--border-border-2px, 2px) solid var(--on-surface-border-primary-deep-inversed);
  outline-offset: 2px;
}
.btn--tertiary-inversed:focus svg {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-neutral-base-inversed, #FFF);
  fill: var(--on-surface-icon-primary-base, #023E84);
}

/* Icon im Button: Spacing für Icon rechts erhöhen */
.btn-icon:not(.btn-icon--default) {
  margin-left: var(--spacing-non-scalable-M, 16px);
}

.link {
  font-size: 16;
  font-size: 1rem;
  line-height: 14;
  line-height: 0.875rem;
  /* Farben */
  color: var(--link-color);
  text-decoration: var(--link-underline);
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
  transition: color 0.15s ease, text-decoration-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  padding: 0 16px;
  margin: 0 8px;
}

.link:visited {
  color: var(--link-color-visited);
}

.link:hover,
.link:focus-visible {
  color: var(--link-color-hover);
  /* Optional: underline nur beim Hover anzeigen */
  /* text-decoration: underline; */
  box-shadow: var(--link-focus-ring);
}

.link:active {
  color: var(--link-color-active);
}

/* Disabled Links (ARIA) */
.link[aria-disabled=true] {
  pointer-events: none;
  color: var(--link-color);
  opacity: 0.6;
  text-decoration: none;
  box-shadow: none;
}

a {
  color: var(--text-primary-base, #023E84);
}
a:hover {
  color: var(--text-primary-bold, #011E42);
}
a:active {
  color: var(--text-primary-deep, #022F67);
}
a.is-disabled, a[aria-disabled=true] {
  color: var(--text-primary-muted, #A0A7B3);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

.pricing {
  position: relative;
  border-radius: var(--radius-scalable-s);
  margin-bottom: 1rem;
  max-width: 1416px;
  margin: 0 auto;
}
.pricing.pricing--state-b .pricing-card-image-wrapper {
  aspect-ratio: 0 !important;
}
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-information ul li:not(.steuergpt-icon)::before {
  left: -38px !important;
}
.pricing.pricing--state-b .pricing-product-option--highlighted .inner-pricing-product-option {
  background: none !important;
}
.pricing.pricing--state-b .pricing-product-option--highlighted .inner-pricing-product-option .pricing-card-image-wrapper {
  background: none !important;
  padding: 0;
}
.pricing.pricing--state-b .pricing-information ul {
  padding-left: 40px !important;
}
.pricing.pricing--state-b .inner-pricing-product-option {
  background: none;
}
.pricing.pricing--state-b .pricing-card-image-wrapper {
  padding: 12px;
}
.pricing.pricing--state-b .pricing-product-option--highlighted .inner-pricing-product-option {
  padding-top: 12px;
}
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-card-content,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-information,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-button-wrapper {
  color: var(--color-white-100, #FFFFFF);
}
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-card-content p, .pricing.pricing--state-b .pricing-product-option--highlighted .pricing-card-content li,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-information p,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-information li,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-button-wrapper p,
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-button-wrapper li {
  color: var(--color-white-100, #FFFFFF);
}
.pricing.pricing--state-b .pricing-product-option--highlighted .pricing-information ul li:not(.steuergpt-icon)::before {
  background-image: url("../images/pricing/icon-background-white.svg") !important;
  width: 24px;
  height: 24px;
}
.pricing.pricing--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-scalable-3xl) 0;
}
@media (min-width: 992px) {
  .pricing.pricing--with-bg {
    padding: var(--spacing-scalable-4xl) 0;
  }
}
.pricing .pricing__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}
.pricing .container {
  position: relative;
  z-index: 2;
}
.pricing .pricing__headline {
  margin-bottom: var(--spacing-scalable-l);
  color: #023E84;
}
@media (max-width: 768px) {
  .pricing .pricing__headline {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
.pricing .pricing__subline {
  margin-bottom: var(--spacing-scalable-xl);
}
.pricing.pricing--text-light .pricing__headline,
.pricing.pricing--text-light .pricing__subline {
  color: var(--color-white-100);
}
.pricing .pricing-card-image {
  width: 100%;
  border-radius: var(--radius-non-scalable-l);
  overflow: hidden;
  margin-bottom: var(--spacing-scalable-m);
}
.pricing .pricing-card-image img {
  width: 100%;
  height: auto;
  display: block;
}
.pricing .row.g-6 {
  row-gap: var(--spacing-non-scalable-s, 12px);
}
.pricing .pricing-product-option {
  gap: var(--spacing-non-scalable-s, 12px);
  border-radius: var(--radius-non-scalable-l);
  display: flex;
}
@media (min-width: 992px) {
  .pricing .pricing-product-option {
    margin-top: 35px;
  }
}
.pricing .pricing-product-option .inner-pricing-product-option {
  gap: 0;
  width: 100%;
  border-radius: var(--radius-non-scalable-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--background-neutral-surface-neutral-base-inversed, #fff);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-image-wrapper--highlighted {
  background-color: var(--background-gradient-brand-dark-blue, #023E84);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-image-wrapper.best-seller-badge:after {
  position: absolute;
  content: "Best Seller";
  width: 72px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-align: center;
  top: 10px;
  right: 10px;
  color: var(--text-primary-base);
  background-color: var(--surface-secondary-base);
  border-radius: var(--radius-non-scalable-round);
  font-weight: bold;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-image-wrapper .pricing-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-image-wrapper .pricing-card-image--placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 10px, #f5f5f5 10px, #f5f5f5 20px);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content {
  padding: var(--spacing-non-scalable-xl) var(--spacing-non-scalable-xl) var(--spacing-non-scalable-l) var(--spacing-non-scalable-xl);
  color: var(--Brand-Primary-Blue, #023E84);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-m);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content p {
  margin: 0;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content .pricing-card-label {
  font-size: 36;
  font-size: 2.25rem;
  line-height: 36;
  line-height: 2.25rem;
  font-weight: bold;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content .pricing-card-tag {
  font-size: 36;
  font-size: 2.25rem;
  line-height: 36;
  line-height: 2.25rem;
  font-weight: bold;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content .pricing-card-tag-subline {
  font-size: var(--font-label-M-font-size, 14px);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card-content .pricing-card-price {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-xs);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card {
  min-height: 280px;
  padding: var(--spacing-non-scalable-2xl) var(--spacing-non-scalable-2xl);
  border-radius: var(--radius-non-scalable-l);
  color: var(--Brand-Primary-Blue, #023E84);
  margin: var(--spacing-non-scalable-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 992px) {
  .pricing .pricing-product-option .inner-pricing-product-option .pricing-card {
    margin: var(--spacing-non-scalable-S, 12px);
    min-height: 320px;
  }
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card p {
  margin: 0;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card .pricing-card-label {
  font-size: 32;
  font-size: 2rem;
  line-height: 40;
  line-height: 2.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-non-scalable-m);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card .pricing-card-tag {
  font-size: 48;
  font-size: 3rem;
  line-height: 56;
  line-height: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-non-scalable-xs);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card .pricing-card-tag-subline {
  font-size: 14;
  font-size: 0.875rem;
  line-height: 20;
  line-height: 1.25rem;
  color: var(--text-secondary-base);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-card.best-seller-badge:after {
  position: absolute;
  content: "Best Seller";
  width: 72px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-align: center;
  top: 10px;
  right: 10px;
  color: var(--text-primary-base);
  background-color: var(--surface-secondary-base);
  border-radius: var(--radius-non-scalable-round);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-information {
  flex: 1;
  gap: var(--spacing-scalable-xl) 0;
  margin: 0;
  padding: var(--spacing-non-scalable-m) var(--spacing-non-scalable-xl);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-information ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-left: calc(var(--spacing-scalable-m) + 24px + var(--spacing-scalable-xs));
  padding-left: 64px;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-information ul li {
  list-style: none;
  position: relative;
  font-size: var(--font-label-M-font-size, 16px);
  color: #4B5563;
  padding-bottom: 12px;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-information ul li::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 33%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-image: url("../images/pricing/check_mark.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-information ul li.steuergpt-icon:before {
  content: "";
  position: absolute;
  left: -40px;
  top: 33%;
  transform: translateY(-50%);
  background-image: url("../images/pricing/badge-text-pricing.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 28px;
  height: 28px;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper {
  color: var(--text-primary-base, #023E84);
  font-size: var(--font-label-M-font-size, 16px);
  line-height: var(--font-label-M-line-height);
  padding: 0 var(--spacing-non-scalable-xl) var(--spacing-non-scalable-xl);
  gap: 10px;
  align-self: stretch;
  flex-direction: column;
  margin-top: 64px;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper .btn {
  font-weight: 400;
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper .btn--secondary:hover, .pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper .btn--secondary:focus {
  color: #011E42;
  background: var(--surface-primary-bold-inversed, #F2F5F9);
}
.pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper .btn--secondary:hover svg, .pricing .pricing-product-option .inner-pricing-product-option .pricing-button-wrapper .btn--secondary:focus svg {
  background-color: #011E42;
}
.pricing .pricing-product-option:nth-child(2) {
  margin-top: 0;
}
.pricing .pricing-product-option:nth-child(2) .pricing-card {
  color: var(--color-white-100);
}
.pricing .pricing-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, auto);
  column-gap: 12px;
}
.pricing .pricing-subtext {
  margin-top: var(--spacing-scalable-2xl);
  margin-bottom: var(--spacing-non-scalable-l);
  color: #4B5563;
}

.element-3-spalten {
  padding: var(--spacing-scalable-6xl) 0;
  border-radius: var(--radius-scalable-s);
  max-width: 1416px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .element-3-spalten {
    padding: var(--spacing-scalable-6xl) 119px;
  }
}
.element-3-spalten__wrapper {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}
@media (max-width: 768px) {
  .element-3-spalten__wrapper {
    gap: 48px;
  }
}
.element-3-spalten__title {
  color: #023E84;
  width: 100%;
  margin: 0;
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-3-spalten__title {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-3-spalten__title {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.element-3-spalten__cards {
  display: flex;
  width: 100%;
}
@media (max-width: 992px) {
  .element-3-spalten__cards {
    flex-direction: column;
    gap: 32px;
  }
}
.element-3-spalten__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
}
.element-3-spalten__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0px 12px 36px 0px rgba(0, 0, 0, 0.15);
  width: fit-content;
}
.element-3-spalten__icon {
  width: 32px;
  height: 32px;
  display: block;
}
.element-3-spalten__card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  color: #023E84;
}
.element-3-spalten__card-title {
  color: #023E84;
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .element-3-spalten__card-title {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .element-3-spalten__card-title {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
.element-3-spalten__card-description {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  color: #023E84;
  margin: 0;
}
.element-3-spalten__cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media (min-width: 768px) {
  .element-3-spalten__cta-wrapper {
    flex-direction: row;
    gap: 24px;
  }
}
.element-3-spalten__cta {
  display: flex;
  align-items: center;
  width: 100%;
}
@media (min-width: 768px) {
  .element-3-spalten__cta {
    width: auto;
  }
}
.element-3-spalten__cta .btn--secondary {
  background-color: transparent;
  font-family: "Geologica", sans-serif;
  border: 1px solid var(--text-primary-base);
}
.element-3-spalten__cta .btn--secondary:hover {
  background-color: var(--color-white-100);
  border: 1px solid var(--text-primary-base);
}
.element-3-spalten__cta .btn--secondary:active {
  background-color: transparent !important;
  border: 1px solid var(--text-primary-base);
}

.gap-64 {
  gap: 64px;
}

.gap-24 {
  gap: 24px;
}

.gap-12 {
  gap: 12px;
}

.rounded-12 {
  border-radius: 12px;
}

.rounded-pill {
  border-radius: 1000px;
}

.shadow-s {
  box-shadow: 0px 12px 36px 0px rgba(0, 0, 0, 0.15);
}

.text-primary {
  color: #023E84;
}

.bg-primary {
  background-color: #023E84;
}

.heading-2xl {
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .heading-2xl {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .heading-2xl {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

.heading-m {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .heading-m {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .heading-m {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}

.body-m-regular {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}

.label-m-regular {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}

.element-4-spalten {
  padding: var(--spacing-scalable-xl) 0;
}
@media (min-width: 768px) {
  .element-4-spalten {
    padding: var(--spacing-scalable-xl) 0;
  }
}
.element-4-spalten__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-xl);
  width: 100%;
}
.element-4-spalten__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xs);
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-non-scalable-l);
  width: 100%;
}
.element-4-spalten__heading h2 {
  color: #023E84;
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-4-spalten__heading h2 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-4-spalten__heading h2 {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.element-4-spalten__cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-non-scalable-s);
}
@media (min-width: 768px) {
  .element-4-spalten__cards {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.element-4-spalten__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-s);
  padding: var(--spacing-non-scalable-s);
  border-radius: var(--radius-non-scalable-l);
  background-color: #FFFFFF;
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  .element-4-spalten__card {
    flex: 1 1 calc(50% - 6px);
  }
}
@media (min-width: 992px) {
  .element-4-spalten__card {
    flex: 1 1 calc(25% - 9px);
  }
}
.element-4-spalten__footer-button {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--spacing-non-scalable-l);
  width: 100%;
}
.element-4-spalten__footer-button a {
  width: 100%;
}
.element-4-spalten .card__image-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 232px;
  overflow: hidden;
  position: relative;
}
.element-4-spalten .card__teaser-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-non-scalable-m);
}
.element-4-spalten .card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-l);
  padding: var(--spacing-non-scalable-s);
  width: 100%;
}
.element-4-spalten .card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-s);
  width: 100%;
}
.element-4-spalten .card__source {
  display: flex;
  align-items: center;
}
.element-4-spalten .card__source p {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  color: #023E84;
  margin: 0;
}
.element-4-spalten .card__button-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.element-4-spalten .card__button-container a {
  width: 100%;
}
.element-4-spalten .heading-xl {
  color: #023E84;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 32px;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-4-spalten .heading-xl {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-4-spalten .heading-xl {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 768px) {
  .element-4-spalten .heading-xl {
    font-size: var(--font-heading-S-font-size, 20px);
  }
}
.element-4-spalten .heading-2xl {
  color: #023E84;
  margin: 0;
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-4-spalten .heading-2xl {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-4-spalten .heading-2xl {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.element-4-spalten .body-m-regular {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  margin: 0;
}
.element-4-spalten .label-m-regular {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}
.element-4-spalten .text-primary {
  color: #023E84 !important;
}
.element-4-spalten .text-neutral-light {
  color: #4B5563;
}
.element-4-spalten .background-neutral-surface-neutral-base {
  background-color: #F9FAFB;
}
.element-4-spalten .background-neutral-surface-neutral-base-inversed {
  background-color: #FFFFFF;
}
.element-4-spalten .element_4_spalten_footer__cta-wrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.element-image {
  background-color: #FFE620;
  border-radius: var(--radius-non-scalable-s, 12px);
  padding: var(--spacing-scalable-3xl, 40px) var(--spacing-non-scalable-l, 24px);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .element-image {
    padding: var(--spacing-non-scalable-5xl, 64px) 100px;
    min-height: 500px;
  }
}
.element-image__image-container {
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: var(--spacing-non-scalable-l, 24px);
}
@media (min-width: 768px) {
  .element-image__image-container {
    width: calc(100% + 200px);
    margin-left: -100px;
    margin-right: -100px;
    margin-bottom: var(--spacing-non-scalable-2xl, 40px);
  }
}
.element-image__image {
  width: 100%;
  height: auto;
  display: block;
}
.element-image__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-l, 24px);
  width: 100%;
  max-width: 696px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .element-image__wrapper {
    gap: var(--spacing-non-scalable-2xl, 40px);
  }
}
.element-image__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl, 24px);
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
  .element-image__content {
    gap: var(--spacing-non-scalable-xl, 32px);
  }
}
.element-image__preheadline {
  font-family: var(--font-heading-S-family, Geologica);
  font-size: var(--font-heading-S-font-size, 20px);
  color: #023E84;
  margin: 0;
  text-align: center;
  width: 100%;
}
.element-image__heading {
  color: #023E84;
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: 48px;
  font-size: 3rem;
  line-height: 56px;
  line-height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-image__heading {
    font-size: 56px;
    font-size: 3.5rem;
    line-height: 64px;
    line-height: 4rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-image__heading {
    font-size: 64px;
    font-size: 4rem;
    line-height: 72px;
    line-height: 4.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.element-image__description {
  font-family: "Geologica", sans-serif;
  font-size: var(--font-body-m-font-size, 16px);
  font-weight: 400;
  line-height: var(--font-body-m-line-height, 24px);
  letter-spacing: var(--font-body-m-tracking, 0px);
  color: #023E84;
  margin: 0;
  max-width: 100%;
  text-align: center;
}
.element-image__cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-XS, 8px);
}
@media (min-width: 768px) {
  .element-image__cta-wrapper {
    flex-direction: row;
    gap: var(--spacing-non-scalable-M, 16px);
  }
}
.element-image__cta-wrapper__cta {
  display: flex;
  justify-content: center;
  width: 100%;
}
.element-image__cta-wrapper__cta a {
  width: 100%;
}
@media (min-width: 768px) {
  .element-image__cta-wrapper__cta a {
    width: 100%;
  }
}
.element-image .heading-3xl {
  color: #023E84;
  margin: 0;
  font-size: 48px;
  font-size: 3rem;
  line-height: 56px;
  line-height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .element-image .heading-3xl {
    font-size: 56px;
    font-size: 3.5rem;
    line-height: 64px;
    line-height: 4rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .element-image .heading-3xl {
    font-size: 64px;
    font-size: 4rem;
    line-height: 72px;
    line-height: 4.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.element-image .heading-3xl {
  font-size: 48px;
  line-height: 56px;
}
@media (min-width: 768px) {
  .element-image .heading-3xl {
    font-size: 64px;
    line-height: 72px;
  }
}
.element-image .body-m-regular {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  margin: 0;
}
.element-image .text-primary {
  color: #023E84 !important;
}

.element-cards__container {
  padding: var(--spacing-scalable-6xl);
}
.element-cards__headline-wrapper {
  margin-bottom: 2rem;
}
.element-cards__headline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
  color: var(--on-surface-text-primary-base);
}
.element-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  gap: var(--spacing-non-scalable-s);
}
@media (min-width: 768px) {
  .element-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1400px) {
  .element-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.element-cards__item {
  height: 100%;
}
.element-cards__card {
  background: var(--surface-neutral-base-inversed);
  border-radius: var(--radius-non-scalable-xs);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: var(--spacing-scalable-m) var(--spacing-scalable-l);
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  position: relative;
}
@media (min-width: 992px) {
  .element-cards__card {
    min-width: 384px;
  }
}
.element-cards__quote-icon {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 26px;
  height: 26px;
  z-index: 0;
  pointer-events: none;
}
.element-cards__quote-icon img {
  width: 100%;
  height: auto;
  display: block;
}
.element-cards__header {
  width: 100%;
}
.element-cards__image-wrapper img {
  width: 30%;
  height: auto;
}
.element-cards__icon-headline-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.element-cards__icon {
  width: 120px;
  height: 120px;
  object-fit: cover;
  flex-shrink: 0;
}
.element-cards__card-headline {
  margin-bottom: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}
.element-cards__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.element-cards__upper-text {
  margin-bottom: 0.5rem;
  color: var(--text-neutral-light);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.element-cards__content {
  color: var(--text-neutral-light);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 24px */
}
.element-cards__link-wrapper {
  margin-top: 1rem;
}
.element-cards__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-blue-base);
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.element-cards__link:hover, .element-cards__link:visited, .element-cards__link:active {
  text-decoration: none !important;
}
.element-cards__link:hover {
  opacity: 0.8;
}
.element-cards__link-arrow {
  color: var(--primary-blue-base);
  font-size: 18px;
  transition: transform 0.2s ease;
}
.element-cards__link:hover .element-cards__link-arrow {
  transform: translateX(4px);
}
.element-cards__badge {
  color: var(--text-primary-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-top: auto;
  padding-top: 1rem;
}
.element-cards__badge-link {
  color: inherit;
  text-decoration: none;
}
.element-cards__badge-link:hover {
  text-decoration: none;
}

.element-siegel {
  border-radius: var(--radius-non-scalable-l);
  overflow: hidden;
}
.element-siegel__container {
  padding: var(--spacing-scalable-6xl);
}
.element-siegel__row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "right" "left";
  gap: var(--spacing-scalable-2xl);
}
@media (min-width: 1200px) {
  .element-siegel__row {
    grid-template-columns: 2fr 2fr;
    grid-template-areas: "left right"; /* Desktop: left first, then right */
    align-items: center; /* vertical alignment requirement */
  }
}
@media (min-width: 1200px) {
  .element-siegel__row.is-8 {
    grid-template-columns: 2fr 2fr;
  }
  .element-siegel__row.is-8 .element-siegel__right {
    padding: var(--spacing-scalable-6xl);
  }
}
@media (min-width: 1200px) {
  .element-siegel__row.is-10 {
    grid-template-columns: 2fr 1fr;
  }
  .element-siegel__row.is-10 .element-siegel__right {
    padding: var(--spacing-scalable-3xl);
  }
}
.element-siegel__left {
  display: block;
  grid-area: left;
  text-align: center;
}
.element-siegel__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-s);
  grid-area: right;
  text-align: center;
  padding: var(--spacing-scalable-6xl);
}
.element-siegel__headline {
  margin: 0;
  color: #023E84;
  font-size: var(--font-heading-L-font-size, 32px) !important;
  line-height: var(--font-heading-L-line-height, 40px) !important;
}
.element-siegel__subline {
  color: #4B5563;
}
.element-siegel__subline a {
  color: #023E84;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-body-M-font-size, 16px);
}
.element-siegel__subline a::after {
  content: "→";
  margin-left: 8px;
  color: #023E84;
}
.element-siegel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
@media (min-width: 768px) {
  .element-siegel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .element-siegel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .element-siegel__grid.is-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.element-siegel__grid {
  /* Exactly 10 items: 5 per row on desktop */
}
@media (min-width: 1200px) {
  .element-siegel__grid.is-10 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.element-siegel__grid {
  /* Remove special centering overrides for is-6; use 4-col defaults */
  /* Remove desktop-specific centering for 5-column layout; only tablet rules remain below */
}
.element-siegel__grid.last-row-center-1 {
  /* Only tablet: 4 columns → center by spanning 2 columns */
}
@media (min-width: 768px) and (max-width: 1199px) {
  .element-siegel__grid.last-row-center-1 > .element-siegel__item:last-child {
    grid-column: 2/span 2;
  }
}
.element-siegel__grid {
  /* 4-column default grid: center last row with 2 or 3 items */
}
.element-siegel__grid.last-row-center-2 {
  /* Only tablet: 4 columns → place at 2 and 3 */
}
@media (min-width: 768px) and (max-width: 1199px) {
  .element-siegel__grid.last-row-center-2 > .element-siegel__item:nth-last-child(2) {
    grid-column: 2;
  }
  .element-siegel__grid.last-row-center-2 > .element-siegel__item:last-child {
    grid-column: 3;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .element-siegel__grid.last-row-center-3 > .element-siegel__item:nth-last-child(3) {
    grid-column: 2;
  }
}
.element-siegel__grid {
  /* Removed md-specific helper class variants to rely on generic ones with tablet-only media queries */
}
.element-siegel__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-neutral-base-inversed);
  border-radius: var(--radius-non-scalable-xs);
  padding: var(--spacing-non-scalable-m);
}
.element-siegel__image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Contrast adjustments on blue background */
.element-siegel.background-blue .element-siegel__headline {
  color: #FFFFFF;
}
.element-siegel.background-blue .element-siegel__subline {
  color: #FFFFFF;
}
.element-siegel.background-blue .element-siegel__subline a {
  color: inherit;
  text-decoration: none;
}
.element-siegel.background-blue .element-siegel__subline a::after {
  color: var(--text-primary-base);
}

.element-fliesstext {
  padding: 0;
}
.element-fliesstext__container {
  padding: var(--spacing-scalable-3xl);
  max-width: 702px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .element-fliesstext__container {
    box-sizing: content-box;
  }
}
.element-fliesstext__headline {
  color: var(--on-surface-text-primary-base);
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .element-fliesstext__headline {
    font-size: var(--font-heading-2XL-size, 32px) !important;
  }
}
.element-fliesstext__content {
  color: var(--text-primary-base);
  font-size: var(--font-body-M-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height);
}
.element-fliesstext__faq {
  margin-top: var(--spacing-scalable-3xl);
}
.element-fliesstext__faq-item {
  padding: var(--spacing-non-scalable-m);
  border-radius: var(--radius-non-scalable-s);
  background: var(--surface-neutral-soft);
  margin-bottom: var(--spacing-scalable-xs);
}
.element-fliesstext__faq-item[open] .element-fliesstext__faq-question::before {
  transform: rotate(180deg);
}
.element-fliesstext__faq-question {
  color: var(--text-primary-base);
  font-size: var(--font-body-M-font-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-body-M-line-height);
  min-height: 48px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  list-style: none;
}
.element-fliesstext__faq-question::-webkit-details-marker {
  display: none;
}
.element-fliesstext__faq-question::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background-image: url("../images/fliesstext/down_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  flex-shrink: 0;
  margin-right: 16px;
  margin-top: 0;
  border-radius: var(--radius-radius-round, 1000px);
  background-color: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
}
.element-fliesstext__faq-answer {
  color: var(--text-primary-base);
  font-size: var(--font-body-M-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height);
  letter-spacing: var(--font-body-M-tracking);
  padding-top: var(--spacing-non-scalable-s);
  padding-left: var(--spacing-non-scalable-5xl);
}
.element-fliesstext__faq-answer p {
  margin: 0;
}
.element-fliesstext__icon-text-wrapper {
  margin-top: var(--spacing-scalable-3xl);
  padding: 0 var(--spacing-non-scalable-l);
}
@media (min-width: 768px) {
  .element-fliesstext__icon-text-wrapper {
    padding: 0;
  }
}
.element-fliesstext__icon-text-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.element-fliesstext__it-headline {
  margin-bottom: 16px;
  color: var(--text-primary-base);
  font-size: var(--font-heading-S-font-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-heading-S-line-height);
  letter-spacing: var(--font-heading-S-tracking);
}
.element-fliesstext__it-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.element-fliesstext__it-icon {
  flex-shrink: 0;
}
.element-fliesstext__it-icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.element-fliesstext__it-text {
  color: var(--text-primary-base);
  font-size: var(--font-label-M-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-label-M-line-height);
  letter-spacing: var(--font-label-M-tracking);
}
.element-fliesstext__it-text p {
  margin: 0;
}

.tutorial-module {
  --tutorial-sticky-offset: 0px;
  --tutorial-scroll-height: 100vh;
  --tutorial-step-count: 1;
  padding: var(--spacing-scalable-2xl) 0;
  min-height: 100vh;
  display: block;
  position: relative;
  width: 100%;
  max-width: 1416px;
  margin: 0 auto;
  border-radius: var(--radius-non-scalable-S, 12px);
}
@media (max-width: 560px) {
  .tutorial-module {
    margin-left: calc(-1 * var(--spacing-non-scalable-m));
    margin-right: calc(-1 * var(--spacing-non-scalable-m));
    width: calc(100% + 2 * var(--spacing-non-scalable-m));
    border-radius: 0;
  }
}
@media (min-width: 768px) and (max-width: 560px) {
  .tutorial-module {
    margin-left: calc(-1 * var(--spacing-scalable-l));
    margin-right: calc(-1 * var(--spacing-scalable-l));
    width: calc(100% + 2 * var(--spacing-scalable-l));
    padding: var(--spacing-scalable-3xl) 0;
  }
}
@media (min-width: 992px) {
  .tutorial-module {
    padding: 0;
    height: var(--tutorial-scroll-height, 100vh);
    min-height: auto;
  }
}

.tutorial-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--spacing-non-scalable-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl);
  height: 100%;
  will-change: transform;
}
@media (max-width: 560px) {
  .tutorial-container {
    padding: 0 calc(2 * var(--spacing-non-scalable-m));
  }
}
@media (min-width: 768px) and (max-width: 560px) {
  .tutorial-container {
    padding: 0 calc(2 * var(--spacing-scalable-l));
    gap: var(--spacing-scalable-2xl);
  }
}
@media (min-width: 768px) {
  .tutorial-container {
    gap: var(--spacing-scalable-2xl);
  }
}
@media (min-width: 992px) {
  .tutorial-container {
    flex-direction: row;
    padding: var(--spacing-scalable-6xl);
    gap: var(--spacing-scalable-3xl);
    align-items: center;
    position: sticky;
    top: var(--tutorial-sticky-offset, 0px);
    height: auto;
  }
}

.tutorial-content-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl);
  position: relative;
  width: 100%;
}
@media (min-width: 992px) {
  .tutorial-content-column {
    max-height: calc(100vh - 100px);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tutorial-content-column::-webkit-scrollbar {
    display: none;
  }
}

.tutorial-image-column {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .tutorial-image-column {
    display: none !important;
  }
}

.tutorial-mobile-media {
  display: none;
  width: 100%;
  margin-bottom: var(--spacing-scalable-m);
  border-radius: var(--radius-non-scalable-m);
  overflow: hidden;
  max-height: 400px;
}
.tutorial-mobile-media img, .tutorial-mobile-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tutorial-header {
  margin-bottom: 0;
  text-align: left;
}
.tutorial-header .tutorial-headline {
  color: var(--on-surface-text-primary-base);
  margin-bottom: var(--spacing-scalable-s);
}
@media (max-width: 768px) {
  .tutorial-header .tutorial-headline {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
@media (min-width: 768px) {
  .tutorial-header .tutorial-headline {
    margin-bottom: var(--spacing-scalable-m);
  }
}
.tutorial-header .tutorial-sub-headline {
  color: var(--text-neutral-light);
  margin: 0;
}

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 992px) {
  .tutorial-steps {
    flex: 1;
    overflow-y: hidden;
    position: relative;
  }
}

.tutorial-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-scalable-m);
  padding: var(--spacing-scalable-m) 0;
  border-bottom: 1px solid var(--on-surface-border-primary-deep-inversed);
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
}
.tutorial-step:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .tutorial-step {
    gap: var(--spacing-scalable-l);
    padding: var(--spacing-scalable-l) 0;
  }
}
.tutorial-step:not(.is-active) .tutorial-step-text,
.tutorial-step:not(.is-active) .tutorial-step-button {
  display: none;
}
.tutorial-step:has(.tutorial-step-text), .tutorial-step:has(.tutorial-step-button) {
  flex-direction: column;
  background-color: transparent;
  border-radius: var(--radius-non-scalable-l);
  padding: var(--spacing-scalable-l);
  border-bottom: none;
}
.tutorial-step.is-active {
  border-radius: var(--radius-non-scalable-xs);
  background: var(--surface-neutral-base-inversed);
  box-shadow: 0 63px 66px -32px rgba(0, 0, 0, 0.05);
  padding: var(--spacing-scalable-l) var(--spacing-scalable-xl);
  border-bottom: none;
  margin: var(--spacing-scalable-s) 0;
}
@media (min-width: 992px) {
  .tutorial-step.is-active {
    padding: var(--spacing-scalable-l) var(--spacing-scalable-xl);
  }
}
.tutorial-step.is-active .tutorial-step-text,
.tutorial-step.is-active .tutorial-step-button {
  display: block;
}
.tutorial-step.is-active .tutorial-mobile-media {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-non-scalable-xs) var(--radius-non-scalable-xs) 0 0;
}
@media (min-width: 992px) {
  .tutorial-step.is-active .tutorial-mobile-media {
    display: none;
  }
}
.tutorial-step.is-active:has(.tutorial-step-text), .tutorial-step.is-active:has(.tutorial-step-button) {
  background-color: var(--surface-primary-bold-inversed);
}
.tutorial-step.is-active .tutorial-step-content {
  padding: 0;
}
.tutorial-step.is-active .tutorial-step-number {
  background-color: var(--surface-accent-accent);
  border: none;
  transform: scale(1.05);
}
.tutorial-step.is-active .tutorial-step-number span {
  color: var(--on-surface-text-primary-on-primary);
}

.tutorial-step-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  width: 100%;
}
.tutorial-step.is-active .tutorial-step-content {
  gap: var(--spacing-scalable-m);
}
@media (min-width: 768px) {
  .tutorial-step.is-active .tutorial-step-content {
    gap: var(--spacing-scalable-m);
  }
}

.tutorial-step-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-scalable-s);
}

.tutorial-step-number {
  width: 32px;
  height: 32px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--surface-primary-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.tutorial-step-number span {
  color: var(--surface-primary-base);
  font-weight: 700;
  font-size: var(--font-label-S-font-size);
}

.tutorial-step-headline {
  color: var(--on-surface-text-primary-base);
  font-size: var(--font-heading-S-font-size);
  margin: 0;
  flex: 1;
}

.tutorial-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-s);
  width: 100%;
}
@media (min-width: 768px) {
  .tutorial-step-body {
    gap: var(--spacing-scalable-m);
  }
}

.tutorial-step-text {
  color: #023E84;
  margin: 0;
  line-height: 1.5;
  width: 100%;
}

.tutorial-step-button {
  margin-top: 0;
}

.tutorial-main-image {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-non-scalable-l);
}
@media (min-width: 992px) {
  .tutorial-main-image {
    max-width: 100%;
  }
}
.tutorial-main-image img,
.tutorial-main-image video {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-non-scalable-l);
}

.tutorial-step-progress {
  width: 100%;
  height: 4px;
  margin: 12px 0;
  background-color: rgba(2, 62, 132, 0.1);
  border-radius: var(--radius-non-scalable-xs);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .tutorial-step-progress {
    margin: 0;
  }
}
.tutorial-step.is-active .tutorial-step-progress {
  opacity: 1;
}

.tutorial-step-progress-bar {
  height: 100%;
  background-color: var(--surface-accent-accent);
  width: 0%;
  transition: width 0.1s linear;
  transform-origin: left;
}

.hero-2027 {
  padding: var(--bs-gutter-x) var(--bs-gutter-y);
  background-color: var(--background-content);
}
.hero-2027__container {
  background-color: var(--surface-secondary-base);
  border-radius: var(--radius-non-scalable-s);
  padding: var(--spacing-scalable-3xl) var(--spacing-scalable-6xl);
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-non-scalable-l);
}
@media (min-width: 1200px) {
  .hero-2027__container {
    padding: var(--spacing-scalable-3xl) 119px;
    min-height: 512px;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-scalable-2xl);
  }
}
.hero-2027__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl);
  min-width: 0;
  z-index: 1;
}
@media (min-width: 1200px) {
  .hero-2027__content {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.hero-2027__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl);
  width: 100%;
}
.hero-2027__social-proof {
  display: flex;
  align-items: center;
  gap: var(--spacing-scalable-2xs);
  padding: var(--spacing-non-scalable-xs) var(--spacing-non-scalable-s);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px);
  border-radius: 99px;
}
@media (max-width: 1199px) {
  .hero-2027__social-proof {
    order: -10;
  }
}
@media (min-width: 1200px) {
  .hero-2027__social-proof {
    gap: var(--spacing-scalable-xs);
    padding: var(--spacing-non-scalable-xs) var(--spacing-non-scalable-m) var(--spacing-non-scalable-xs) var(--spacing-non-scalable-s);
    width: fit-content;
    order: 0;
  }
}
@media (min-width: 1200px) {
  .hero-2027__social-proof--top-left {
    position: static;
    transform: none;
  }
}
@media (max-width: 1199px) {
  .hero-2027__social-proof--top-left {
    display: flex;
    order: -10;
    align-self: flex-start;
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .hero-2027__social-proof--hide-desktop {
    display: none !important;
  }
}
.hero-2027__social-proof--overlay {
  display: none;
}
@media (min-width: 1200px) {
  .hero-2027__social-proof--overlay {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: auto;
    margin-bottom: 20px;
  }
}
@media (max-width: 1199px) {
  .hero-2027__social-proof--mobile-image {
    display: none;
  }
}
@media (min-width: 1200px) {
  .hero-2027__social-proof--mobile-image {
    display: none;
  }
}
.hero-2027__social-proof-icons {
  display: flex;
  align-items: center;
  padding-right: 10px;
  margin-right: -10px;
  height: 32px;
}
.hero-2027__social-proof-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: -10px;
  border: 2px solid var(--color-white-100);
  overflow: hidden;
  flex-shrink: 0;
}
.hero-2027__social-proof-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-2027__social-proof-icon:first-child {
  z-index: 3;
}
.hero-2027__social-proof-icon:nth-child(2) {
  z-index: 2;
}
.hero-2027__social-proof-icon:nth-child(3) {
  z-index: 1;
}
.hero-2027__social-proof-text {
  font-family: var(--font-body-s-family, "Geologica");
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary-base);
  margin: 0;
  white-space: nowrap;
}
.hero-2027__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-s);
  align-items: flex-start;
  width: 100%;
}
.hero-2027__pre-headline {
  color: var(--text-primary-base);
  margin: 0;
}
.hero-2027__headline {
  color: var(--text-primary-base);
  margin: 0;
  width: 100%;
}
.hero-2027__copy {
  font-family: var(--font-body-m-family, "Geologica");
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-base);
  margin: 0;
  width: 100%;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-non-scalable-xs);
}
.hero-2027__copy-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.hero-2027__copy-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-2027__copy-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--text-primary-base);
}
.hero-2027__copy-list {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-2xs);
  color: var(--text-primary-base);
}
.hero-2027__copy-list-item {
  margin: 0;
}
.hero-2027__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-xs);
  align-items: stretch;
  width: 100%;
}
@media (min-width: 1200px) {
  .hero-2027__buttons {
    flex-direction: row;
    gap: var(--spacing-non-scalable-m);
    align-items: center;
    width: auto;
  }
}
.hero-2027__buttons .btn {
  width: 100%;
  font-family: var(--font-label-M-family, Geologica);
  font-weight: 400;
}
@media (min-width: 1200px) {
  .hero-2027__buttons .btn {
    width: auto;
  }
}
.hero-2027__buttons .btn.btn--secondary {
  background-color: transparent;
}
.hero-2027__buttons .btn.btn--secondary:hover {
  background-color: #fff;
  color: #023e84 !important;
}
.hero-2027__subline {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.hero-2027__subline-text {
  font-family: var(--font-body-m-family, "Geologica");
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-base);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.hero-2027__subline-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-non-scalable-2xs);
  padding: var(--spacing-non-scalable-2xs);
  border-radius: 8px;
  font-family: var(--font-label-m-family, "Geologica");
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-base);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.hero-2027__subline-link:hover {
  background-color: rgba(2, 62, 132, 0.1);
}
.hero-2027__subline-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.hero-2027__image {
  width: 100%;
  position: relative;
}
@media (max-width: 1199px) {
  .hero-2027__image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .hero-2027__image {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    height: auto;
    order: 0;
  }
}
@media (max-width: 1199px) {
  .hero-2027__image--docked {
    margin-bottom: calc(-1 * var(--spacing-scalable-3xl));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
  }
}
@media (min-width: 1200px) {
  .hero-2027__image--docked {
    margin-bottom: calc(-1 * var(--spacing-scalable-3xl));
    margin-right: -119px;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
.hero-2027__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1200px) {
  .hero-2027__image img {
    height: auto;
    max-height: 464px;
  }
}
@media (min-width: 1200px) {
  .hero-2027__image--docked .hero-2027__image img {
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom right;
    width: auto;
    max-width: 100%;
  }
}
.hero-2027__video {
  width: 100%;
  position: relative;
}
@media (max-width: 1199px) {
  .hero-2027__video {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 1200px) {
  .hero-2027__video {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    height: auto;
    order: 0;
  }
}
.hero-2027__video-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.hero-2027__video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1200px) {
  .hero-2027__video-link img {
    height: auto;
    max-height: 464px;
  }
}
@media (max-width: 1199px) {
  .hero-2027__image.hero-2027__media--mobile-oben, .hero-2027__video.hero-2027__media--mobile-oben {
    order: 0;
  }
}
@media (min-width: 1200px) {
  .hero-2027__image.hero-2027__media--mobile-oben, .hero-2027__video.hero-2027__media--mobile-oben {
    display: none;
  }
}
@media (max-width: 1199px) {
  .hero-2027__image.hero-2027__media--desktop, .hero-2027__video.hero-2027__media--desktop {
    display: none;
  }
}
@media (max-width: 1199px) {
  .hero-2027__image.hero-2027__media--mobile-unten, .hero-2027__video.hero-2027__media--mobile-unten {
    order: 10;
  }
}
@media (max-width: 1199px) {
  .hero-2027__container {
    margin: 0 auto;
  }
  .hero-2027__content {
    width: 100%;
  }
  .hero-2027__wrapper {
    align-items: center;
    text-align: center;
    gap: var(--spacing-scalable-xl);
  }
  .hero-2027__heading {
    align-items: flex-start;
    text-align: left;
    gap: var(--spacing-scalable-s);
  }
  .hero-2027__headline {
    width: 100%;
  }
  .hero-2027__social-proof-icons {
    height: 20px;
  }
  .hero-2027__social-proof-icons .hero-2027__social-proof-icon {
    width: 20px;
    height: 20px;
  }
}
.hero-2027 .hero-2027__social-proof-text {
  margin-left: 10px;
}
@media (min-width: 1200px) {
  .hero-2027__container {
    max-width: 1416px;
    margin: 0 auto;
  }
  .hero-2027__wrapper {
    gap: var(--spacing-scalable-xl);
  }
}

/* ========================================
   Banner Component 2027
   ======================================== */
.banner-container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.banner-wrapper {
  width: 100%;
  margin: 0 auto;
}
.banner-wrapper--above-menu {
  z-index: 1030; /* Bootstrap navbar z-index + 30 */
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  font-size: 16;
  font-size: 1rem;
  line-height: 14;
  line-height: 0.875rem;
  /* Info Banner (Blau) */
}
.banner--info {
  background-color: var(--bg-info-subtle, #E6F0FA);
  border-color: var(--border-info, #0066CC);
  color: var(--text-info-bold, #004C99);
}
.banner--info .banner__icon svg {
  color: var(--icon-info, #0066CC);
}
.banner {
  /* Success Banner (Grün) */
}
.banner--success {
  background-color: var(--bg-success-subtle, #E6F7ED);
  border-color: var(--border-success, #00A854);
  color: var(--text-success-bold, #007A3D);
}
.banner--success .banner__icon svg {
  color: var(--icon-success, #00A854);
}
.banner {
  /* Warning Banner (Gelb/Orange) */
}
.banner--warning {
  background-color: var(--bg-warning-subtle, #FFF7E6);
  border-color: var(--border-warning, #FF9800);
  color: var(--text-warning-bold, #CC7A00);
}
.banner--warning .banner__icon svg {
  color: var(--icon-warning, #FF9800);
}
.banner {
  /* Error Banner (Rot) */
}
.banner--error {
  background-color: var(--bg-error-subtle, #FFEBEE);
  border-color: var(--border-error, #D32F2F);
  color: var(--text-error-bold, #B71C1C);
}
.banner--error .banner__icon svg {
  color: var(--icon-error, #D32F2F);
}
.banner {
  /* Neutral Banner (Grau) */
}
.banner--neutral {
  background-color: var(--bg-neutral-subtle, #F5F5F5);
  border-color: var(--border-neutral, #9E9E9E);
  color: var(--text-neutral-bold, #424242);
}
.banner--neutral .banner__icon svg {
  color: var(--icon-neutral, #616161);
}
.banner {
  /* Icon */
}
.banner__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner__icon svg {
  width: 100%;
  height: 100%;
}
.banner {
  /* Content */
}
.banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.banner__title {
  margin: 0;
  font-weight: 700;
  font-size: 18;
  font-size: 1.125rem;
  line-height: 16;
  line-height: 1rem;
  line-height: 1.4;
}
.banner__text {
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}
.banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin-top: 4px;
  background-color: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  align-self: flex-start;
}
.banner__button:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}
.banner__button:active {
  transform: translateY(0);
}
.banner {
  /* Close Button */
}
.banner__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 4px;
  margin-left: auto;
}
.banner__close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.banner__close:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.banner__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.banner__close svg {
  width: 20px;
  height: 20px;
}
.banner {
  /* Responsive */
}
@media (max-width: 767px) {
  .banner {
    padding: 12px 16px;
    gap: 12px;
  }
  .banner__title {
    font-size: 16;
    font-size: 1rem;
    line-height: 14;
    line-height: 0.875rem;
  }
  .banner__text {
    font-size: 14;
    font-size: 0.875rem;
    line-height: 12;
    line-height: 0.75rem;
  }
  .banner__button {
    padding: 6px 12px;
    font-size: 14;
    font-size: 0.875rem;
    line-height: 12;
    line-height: 0.75rem;
  }
}

/* ========================================
   Trust Banner - Structure (with Icons)
   ======================================== */
.banner--trust {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner--trust > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner--trust .banner__icon {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner--trust .banner__icon svg {
  width: 20px;
  height: 20px;
}
.banner--trust .banner__content {
  flex: 0;
  gap: 4px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.banner--trust .banner__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.banner--trust .banner__text {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  font-family: "Geologica", sans-serif;
}
.banner--trust .banner__button {
  display: none;
}
.banner--trust .banner__close {
  display: none;
}
.banner--trust {
  /* Desktop: horizontal layout */
}
@media (min-width: 768px) {
  .banner--trust {
    align-items: center;
    padding: 4px 12px;
  }
  .banner--trust .banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
  }
  .banner--trust .banner__title {
    white-space: nowrap;
  }
}
.banner--trust {
  /* Mobile: stacked layout */
}
@media (max-width: 767px) {
  .banner--trust {
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
  }
  .banner--trust > div {
    justify-content: flex-start;
    gap: 8px !important;
  }
  .banner--trust .banner__content {
    flex: 1;
  }
  .banner--trust:has(> div:only-child) > div {
    width: 100%;
  }
}

/* ========================================
   Steuerfrist Banner - Structure (Warning Icon + Text + Arrow)
   ======================================== */
.banner--steuerfrist {
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  gap: 4px;
}
.banner--steuerfrist > div {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}
.banner--steuerfrist .banner__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner--steuerfrist .banner__icon svg {
  width: 100%;
  height: 100%;
}
.banner--steuerfrist .banner__content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0;
  z-index: 1;
}
.banner--steuerfrist .banner__title {
  display: none;
}
.banner--steuerfrist .banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}
.banner--steuerfrist .banner__button {
  display: none;
}
.banner--steuerfrist .banner__close {
  display: none;
}
.banner--steuerfrist {
  /* Desktop layout */
}
@media (min-width: 768px) {
  .banner--steuerfrist {
    padding: 10px 12px;
    gap: 4px;
  }
}
.banner--steuerfrist {
  /* Mobile layout */
}
@media (max-width: 767px) {
  .banner--steuerfrist {
    padding: 10px 12px;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .banner--steuerfrist .banner__content {
    width: 100%;
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .banner--steuerfrist .banner__text {
    width: 100%;
  }
}

/* ========================================
   Color Modifiers (applicable to all banner types)
   ======================================== */
/* Yellow Gradient */
.banner--yellow {
  background: linear-gradient(135deg, #FFE620 0%, #FDD212 100%);
  color: #023E84;
}
.banner--yellow .banner__icon svg {
  fill: #023E84;
  color: #023E84;
}
.banner--yellow.banner--trust .banner__icon {
  background-color: #FFFFFF;
}

/* Gray Solid */
.banner--gray {
  background: #E8E8E8;
  color: #023E84;
}
.banner--gray .banner__icon svg {
  fill: #FFFFFF;
  color: #FFFFFF;
}
.banner--gray.banner--trust .banner__icon {
  background-color: #FA7D19;
}

/* White Solid */
.banner--white {
  background: #FFFFFF;
  color: #023E84;
}
.banner--white.banner--trust .banner__icon {
  /* Use brand blue tint so the circle is visible on white */
  background-color: rgba(2, 62, 132, 0.12);
}

/* Blue Gradient */
.banner--blue {
  background: linear-gradient(135deg, #023E84 0%, #034694 100%);
  color: white;
  /* Background Pattern */
}
.banner--blue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 2px, transparent 2px), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.1) 2px, transparent 2px), radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 100px 100px;
  pointer-events: none;
  z-index: 0;
}
.banner--blue .banner__icon svg {
  fill: white;
  color: white;
}
.banner--blue .banner__icon {
  z-index: 1;
}
.banner--blue .banner__content {
  z-index: 1;
}
.banner--blue.banner--trust .banner__icon {
  background-color: transparent;
}

.download-card-container--center .download-card-headline {
  text-align: center;
}
.download-card-container--left .download-card-headline {
  text-align: left;
}
.download-card-container--full {
  width: 100%;
}
.download-card-container--boxed {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .download-card-container--boxed {
    width: 100%;
  }
}

.download-card-headline {
  margin: 0 0 24px 0;
  color: #023e84;
}

.download-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.download-card--2027 {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid #023e84;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.download-card--2027:hover {
  background-color: rgba(2, 62, 132, 0.05);
  text-decoration: none;
}
.download-card--2027:active {
  background-color: rgba(2, 62, 132, 0.1);
}

/* Full-width section wrapper controls background + spacing */
.download-card-section {
  width: 100%;
  margin: 1rem 0;
  border-radius: var(--radius-scalable-s);
  padding: var(--spacing-4xl, 64px) 24px;
}
.download-card-section--bg-white {
  background-color: #FFFFFF;
}
.download-card-section--bg-gray {
  background-color: #E8E8E8;
}

.download-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.download-card__icon-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.download-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: #023e84;
  margin: 0;
  padding: 0;
}

.acf-module-wrapper {
  position: relative;
}

.acf-module-edit-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.acf-module-edit-link:hover,
.acf-module-edit-link:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}

/**
 * Content-Slides Element Styles
 * 
 * Slider mit mehreren Kacheln, Navigation und fixe Buttons
 */
.content-slides {
  position: relative;
  width: 100%;
  padding: var(--spacing-4xl, 64px) 0;
  overflow: hidden;
  border-radius: var(--radius-scalable-s);
  margin-bottom: 1rem;
  max-width: 1416px;
  margin: 0 auto;
  /* ============================================
       HEADER / HEADLINE
       ============================================ */
}
.content-slides__header {
  text-align: center;
  margin-bottom: var(--spacing-3xl, 48px);
}
.content-slides__headline {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 0;
  color: var(--text-primary-base, #023e84);
}
.content-slides {
  /* ============================================
       MAIN CONTAINER & TRACK
       ============================================ */
}
.content-slides__container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.content-slides__track {
  display: flex;
  gap: 12px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.content-slides {
  /* ============================================
       SLIDES
       ============================================ */
}
.content-slides__slide {
  flex: 0 0 calc(33.333% - 16px); /* 3 Kacheln sichtbar */
  min-width: 300px;
  animation: slideIn 0.5s ease-out;
}
.content-slides__slide-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 12px;
  padding: var(--spacing-2xl, 40px);
  min-height: 500px;
  overflow: hidden;
  /* Video Slides: position context für absolute video element */
}
.content-slides__slide-content:has(.content-slides__slide-media--video) {
  padding: 0;
  /* Slide-Text bei Videos verstecken */
}
.content-slides__slide-content:has(.content-slides__slide-media--video) .content-slides__slide-text {
  display: none;
}
.content-slides__slide-content {
  /* Textfarbe auf anderen Hintergründen (gelb, weiß, grau) - blau */
  color: #023e84;
}
.content-slides__slide-content .content-slides__slide-headline,
.content-slides__slide-content .content-slides__slide-subtext {
  color: #023e84;
}
.content-slides__slide-content {
  /* Textfarbe auf blauem Hintergrund */
}
.content-slides__slide-content[style*="#023E84"], .content-slides__slide-content[style*="#023e84"] {
  color: white;
}
.content-slides__slide-content[style*="#023E84"] .content-slides__slide-headline,
.content-slides__slide-content[style*="#023E84"] .content-slides__slide-subtext, .content-slides__slide-content[style*="#023e84"] .content-slides__slide-headline,
.content-slides__slide-content[style*="#023e84"] .content-slides__slide-subtext {
  color: white;
}
.content-slides {
  /* ============================================
       BACKGROUND IMAGE EFFECT
       ============================================ */
}
.content-slides__slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.content-slides {
  /* ============================================
       BACKGROUND BLUR EFFECT (Erstes Drittel)
       ============================================ */
}
.content-slides__slide-bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33.333%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--blur-strength, 50px));
  z-index: 2;
  pointer-events: none;
  /* Gradient Overlay basierend auf Richtung */
}
.content-slides__slide-bg-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.content-slides__slide-bg-blur {
  /* To Right (von Links dunkel) */
}
.content-slides__slide-bg-blur[style*="--gradient-direction: to-r"]::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.05) 100%);
}
.content-slides__slide-bg-blur {
  /* To Bottom (von Oben dunkel) */
}
.content-slides__slide-bg-blur[style*="--gradient-direction: to-b"]::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.05) 100%);
}
.content-slides__slide-bg-blur {
  /* To Bottom-Right (diagonal von Links-Oben dunkel) */
}
.content-slides__slide-bg-blur[style*="--gradient-direction: to-br"]::after {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.05) 100%);
}
.content-slides {
  /* Wenn Blur-Bild vorhanden ist, Text und andere Inhalte über dem Bild */
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) {
  /* Text wird weiß auf dem dunklen Hintergrund */
  color: white;
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-headline {
  font-size: var(--font-heading-M-font-size, 24px);
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-headline,
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-subtext,
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-text {
  color: white;
  position: relative;
  z-index: 4;
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-buttons {
  position: relative;
  z-index: 4;
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-media {
  position: relative;
  z-index: 4;
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) {
  /* Media wird auch über dem Blur */
}
.content-slides__slide-content:has(.content-slides__slide-bg-blur) .content-slides__slide-media--video {
  position: relative;
  z-index: 4;
}
.content-slides {
  /* ============================================
       SLIDE TEXT CONTENT
       ============================================ */
}
.content-slides__slide-text {
  position: relative;
  z-index: 2;
  margin-bottom: var(--spacing-2xl, 32px);
}
.content-slides__slide-headline {
  margin: 0 0 var(--spacing-xs, 12px) 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: inherit;
}
.content-slides__slide-subtext {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: inherit;
  opacity: 0.9;
}
.content-slides {
  /* ============================================
       SLIDE MEDIA
       ============================================ */
}
.content-slides__slide-media {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: var(--spacing-xl, 32px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 12px;
  overflow: hidden;
}
.content-slides__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-slides {
  /* ============================================
       VIDEO SLIDES
       ============================================ */
}
.content-slides__slide-media--video {
  position: relative;
  background: none;
  margin-bottom: var(--spacing-xl, 32px);
  border-radius: 12px;
  overflow: hidden;
  min-height: 100%;
  cursor: pointer;
}
.content-slides__video-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.content-slides__video-dimmer {
  display: none;
}
.content-slides__video-play-btn {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--text-primary-base, #023e84);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.content-slides__video-play-btn:hover, .content-slides__video-play-btn:focus {
  transform: scale(1.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.content-slides__video-play-btn:active {
  transform: scale(0.95);
}
.content-slides__play-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.content-slides {
  /* Video Banner (Overlay am Bottom) - positioned absolute auf dem Video */
}
.content-slides__video-banner {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(13px);
  padding: var(--spacing-m, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m, 16px);
  z-index: 5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.content-slides__video-banner-headline {
  margin: 0 0 var(--spacing-2xs, 4px) 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-primary-base, #023e84);
}
.content-slides__video-banner-subtext {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-primary-base, #023e84);
}
.content-slides__video-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.content-slides {
  /* ============================================
       BUTTONS PRO SLIDE
       ============================================ */
}
.content-slides__slide-buttons {
  position: relative;
  z-index: 3;
  display: flex;
  gap: var(--spacing-m, 16px);
  flex-wrap: wrap;
  margin-top: auto;
}
.content-slides__slide-buttons .btn {
  width: 100%;
}
.content-slides {
  /* Buttons in Kacheln sollen sich bei Hover nicht bewegen */
}
.content-slides__button {
  transform: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 1000px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.content-slides__button:hover, .content-slides__button:focus, .content-slides__button:active {
  transform: none !important;
}
.content-slides__button--filled {
  background: var(--text-primary-base, #023e84);
  color: white;
}
.content-slides__button--filled:hover, .content-slides__button--filled:focus {
  background: color-mix(in srgb, var(--text-primary-base, #023e84) 80%, black);
}
.content-slides__button--outline {
  border: 1px solid var(--text-primary-base, #023e84);
  color: var(--text-primary-base, #023e84);
  background: transparent;
}
.content-slides__button--outline:hover, .content-slides__button--outline:focus {
  background: color-mix(in srgb, var(--text-primary-base, #023e84) 10%, transparent);
}
.content-slides__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.content-slides {
  /* ============================================
       NAVIGATION BUTTONS
       ============================================ */
}
.content-slides__nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 20;
  padding: 0 var(--spacing-xl, 16px);
}
.content-slides__nav-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: white;
  color: var(--text-primary-base, #023e84);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
  pointer-events: all;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.content-slides__nav-btn:hover, .content-slides__nav-btn:focus {
  transform: scale(1.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.content-slides__nav-btn:active {
  transform: scale(0.95);
}
.content-slides__nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.content-slides__nav-icon {
  display: block;
  width: 32px;
  height: 32px;
}
.content-slides {
  /* ============================================
       FIXE BUTTONS
       ============================================ */
}
.content-slides__fixed-buttons {
  position: relative;
  z-index: 15;
  display: flex;
  gap: var(--spacing-m, 16px);
  justify-content: center;
  margin-top: var(--spacing-3xl, 48px);
  flex-wrap: wrap;
}
.content-slides__fixed-buttons .btn {
  width: auto;
}
.content-slides__fixed-buttons {
  /* SVG Icons im Button - erben das Button-Styling */
}
.content-slides__fixed-buttons svg {
  width: 24px;
  height: 24px;
  display: block;
}
.content-slides {
  /* Button Primary Border in Content-Slides */
}
.content-slides .btn--primary {
  border: 1px solid #011E42 !important;
}
.content-slides {
  /* Button Styles auf blauem Hintergrund */
}
.content-slides__slide-content[style*="#023E84"] .btn--primary,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled, .content-slides__slide-content[style*="#023e84"] .btn--primary,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled {
  background-color: var(--surface-secondary-base, #FFE620);
  border: none;
  color: var(--text-primary-base, #023e84);
}
.content-slides__slide-content[style*="#023E84"] .btn--primary svg,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled svg, .content-slides__slide-content[style*="#023e84"] .btn--primary svg,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled svg {
  background-color: var(--surface-primary-base, #023e84);
  fill: #ffffff;
}
.content-slides__slide-content[style*="#023E84"] .btn--primary svg path,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled svg path, .content-slides__slide-content[style*="#023e84"] .btn--primary svg path,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled svg path {
  fill: #ffffff;
}
.content-slides__slide-content[style*="#023E84"] .btn--primary:hover,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled:hover, .content-slides__slide-content[style*="#023e84"] .btn--primary:hover,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled:hover {
  background-color: var(--surface-secondary-bold, #FFF173);
}
.content-slides__slide-content[style*="#023E84"] .btn--primary:hover svg,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled:hover svg, .content-slides__slide-content[style*="#023e84"] .btn--primary:hover svg,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled:hover svg {
  background-color: var(--surface-primary-bold, #011E42);
  fill: #ffffff;
}
.content-slides__slide-content[style*="#023E84"] .btn--primary:hover svg path,
.content-slides__slide-content[style*="#023E84"] .btn--custom-filled:hover svg path, .content-slides__slide-content[style*="#023e84"] .btn--primary:hover svg path,
.content-slides__slide-content[style*="#023e84"] .btn--custom-filled:hover svg path {
  fill: #ffffff;
}
.content-slides__slide-content[style*="#023E84"] .btn--secondary, .content-slides__slide-content[style*="#023e84"] .btn--secondary {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.content-slides__slide-content[style*="#023E84"] .btn--secondary svg, .content-slides__slide-content[style*="#023e84"] .btn--secondary svg {
  background-color: #ffffff;
  fill: var(--surface-primary-base, #023e84);
}
.content-slides__slide-content[style*="#023E84"] .btn--secondary svg path, .content-slides__slide-content[style*="#023e84"] .btn--secondary svg path {
  fill: var(--surface-primary-base, #023e84);
}
.content-slides__slide-content[style*="#023E84"] .btn--secondary:hover, .content-slides__slide-content[style*="#023e84"] .btn--secondary:hover {
  background-color: var(--surface-primary-bold, #011E42);
}
.content-slides {
  /* Button Styles auf gelbem Hintergrund */
}
.content-slides__slide-content[style*="#FFE620"] .btn--secondary, .content-slides__slide-content[style*="#ffe620"] .btn--secondary, .content-slides__slide-content:has(.content-slides__slide-bg) .btn--secondary {
  background-color: transparent;
}
.content-slides__slide-content[style*="#FFE620"] .btn--secondary:hover, .content-slides__slide-content[style*="#ffe620"] .btn--secondary:hover, .content-slides__slide-content:has(.content-slides__slide-bg) .btn--secondary:hover {
  background-color: #ffffff;
  color: var(--text-primary-base, #023e84);
}
.content-slides {
  /* Icon Styling für Buttons mit SVG Icons */
}
.content-slides .btn svg {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-non-scalable-round, 50%);
  display: block;
  flex-shrink: 0;
}
.content-slides {
  /* ============================================
       VIDEO MODAL
       ============================================ */
}
.content-slides__video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.content-slides__video-modal.is-active {
  opacity: 1;
  pointer-events: all;
}
.content-slides__video-modal.is-active .content-slides__video-modal-content {
  transform: scale(1);
}
.content-slides__video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.content-slides__video-modal-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 960px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
.content-slides__video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 32px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1;
}
.content-slides__video-modal-close:hover, .content-slides__video-modal-close:focus {
  background: rgba(255, 255, 255, 0.2);
}
.content-slides__video-modal-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}
.content-slides__video-modal-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content-slides {
  /* ============================================
       ACCESSIBILITY
       ============================================ */
}
.content-slides__nav-btn:focus, .content-slides__video-play-btn:focus {
  outline: 2px solid var(--text-primary-base, #023e84);
  outline-offset: 2px;
}

/* Nicht innerhalb des Blocks scopen, da globaler Button-Typ */
.btn.icon-right {
  padding: 12px 20px 12px 16px;
}

/* ============================================
     RESPONSIVE
     ============================================ */
@media (max-width: 1024px) {
  .content-slides__slide {
    flex: 0 0 calc(50% - 12px); /* 2 Kacheln */
    min-width: 280px;
  }
  .content-slides__track {
    gap: 12px;
    padding: 0;
  }
  .content-slides__slide-content {
    min-height: 400px;
    padding: var(--spacing-xl, 24px);
  }
}
@media (max-width: 768px) {
  .content-slides {
    padding: var(--spacing-3xl, 48px) 0;
  }
  .content-slides__slide {
    flex: 0 0 calc(100% - 48px); /* Nicht ganze Breite, damit nächste Kachel sichtbar ist */
    min-width: calc(100% - 48px);
  }
  .content-slides__container {
    padding: 0;
  }
  .content-slides__track {
    gap: var(--spacing-s, 12px);
    padding: 0 var(--spacing-l, 24px);
  }
  .content-slides__header {
    margin-bottom: var(--spacing-2xl, 32px);
  }
  .content-slides__headline {
    font-size: 32px;
    line-height: 40px;
  }
  .content-slides__slide-content {
    min-height: 300px;
    padding: var(--spacing-m, 16px);
  }
  .content-slides__nav {
    display: none; /* Navigation Buttons auf Mobile ausblenden, Swipe stattdessen */
  }
  .content-slides__nav-btn {
    display: none;
  }
  .content-slides__nav-icon {
    display: none;
  }
  .content-slides__video-play-btn {
    width: 48px;
    height: 48px;
  }
  .content-slides__play-icon {
    width: 24px;
    height: 24px;
  }
}
/* Reducer Motion */
@media (prefers-reduced-motion: reduce) {
  .content-slides__slide {
    animation: none;
  }
  .content-slides__track, .content-slides__nav-btn, .content-slides__video-play-btn, .content-slides__video-banner, .content-slides__video-modal {
    transition: none;
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================
   Tab Component Styles
   ======================================== */
/* Typography Helper Classes */
.heading-2xl, h2 {
  font-family: var(--font-heading-2xl-family, "Geologica", sans-serif);
  font-weight: var(--font-heading-2xl-weight, 700);
  font-size: var(--font-heading-2xl-size, 48px);
  line-height: var(--font-heading-2xl-line-height, 56px);
  letter-spacing: var(--font-heading-2xl-tracking, 0);
}

.heading-xl, h3 {
  font-family: var(--font-heading-xl-family, "Geologica", sans-serif);
  font-weight: var(--font-heading-xl-font-weight, 700);
  font-size: var(--font-heading-xl-font-size, 40px);
  line-height: var(--font-heading-xl-line-height, 48px);
  letter-spacing: var(--font-heading-xl-tracking, 0);
}

.tabs-component {
  padding: var(--spacing-non-scalable-5XL, 64px) 0;
  border-radius: var(--radius-scalable-s);
  margin-bottom: 1rem;
  max-width: 1416px;
  margin: 0 auto;
}
.tabs-component .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-non-scalable-M, 16px);
}

/* Header/Headline Section */
.tabs-header {
  margin-bottom: var(--spacing-non-scalable-3XL, 48px);
}
.tabs-header.text-left {
  text-align: left;
}
.tabs-header.text-left .tabs-headline,
.tabs-header.text-left .tabs-subtext {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.tabs-header.text-center {
  text-align: center;
}
.tabs-header.text-center .tabs-headline,
.tabs-header.text-center .tabs-subtext {
  margin-left: auto;
  margin-right: auto;
}

.tabs-headline {
  color: var(--text-primary-base, #023e84);
  margin-bottom: var(--spacing-scalable-xs, 12px);
  max-width: 582px;
}

.tabs-subtext {
  font-family: var(--font-body-m-family, "Geologica", sans-serif);
  font-weight: var(--font-body-m-font-weight-regular, 400);
  font-size: var(--font-body-m-font-size, 16px);
  line-height: var(--font-body-m-line-height, 24px);
  letter-spacing: var(--font-body-m-tracking, 0);
  color: var(--text-neutral-light, #4b5563);
  max-width: 582px;
}

/* Primary Background Variante (Blau) */
.tabs-component[style*="background-color: #023e84"] .tabs-headline,
.tabs-component[style*="background-color:#023e84"] .tabs-headline {
  color: #ffffff;
}
.tabs-component[style*="background-color: #023e84"] .tabs-subtext,
.tabs-component[style*="background-color:#023e84"] .tabs-subtext {
  color: rgba(255, 255, 255, 0.85);
}
.tabs-component[style*="background-color: #023e84"] .btn--primary,
.tabs-component[style*="background-color:#023e84"] .btn--primary {
  background-color: #ffffff;
  color: #023e84;
  border-color: #ffffff;
}
.tabs-component[style*="background-color: #023e84"] .btn--primary svg,
.tabs-component[style*="background-color:#023e84"] .btn--primary svg {
  background-color: #023e84 !important;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}
.tabs-component[style*="background-color: #023e84"] .btn--primary svg path,
.tabs-component[style*="background-color: #023e84"] .btn--primary svg circle,
.tabs-component[style*="background-color:#023e84"] .btn--primary svg path,
.tabs-component[style*="background-color:#023e84"] .btn--primary svg circle {
  fill: white;
  stroke: white;
}
.tabs-component[style*="background-color: #023e84"] .btn--primary:hover,
.tabs-component[style*="background-color:#023e84"] .btn--primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Gelbe Background Variante */
.tabs-component[style*="background-color: #f4d03f"] .tabs-headline,
.tabs-component[style*="background-color:#f4d03f"] .tabs-headline {
  color: #023e84;
}
.tabs-component[style*="background-color: #f4d03f"] .tabs-subtext,
.tabs-component[style*="background-color:#f4d03f"] .tabs-subtext {
  color: #023e84;
}
.tabs-component[style*="background-color: #f4d03f"] .btn--primary,
.tabs-component[style*="background-color:#f4d03f"] .btn--primary {
  background-color: #023e84;
  color: #ffffff;
  border-color: #023e84;
}
.tabs-component[style*="background-color: #f4d03f"] .btn--primary svg,
.tabs-component[style*="background-color:#f4d03f"] .btn--primary svg {
  background-color: white;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}
.tabs-component[style*="background-color: #f4d03f"] .btn--primary svg path,
.tabs-component[style*="background-color: #f4d03f"] .btn--primary svg circle,
.tabs-component[style*="background-color:#f4d03f"] .btn--primary svg path,
.tabs-component[style*="background-color:#f4d03f"] .btn--primary svg circle {
  fill: #023e84;
  stroke: #023e84;
}
.tabs-component[style*="background-color: #f4d03f"] .btn--primary:hover,
.tabs-component[style*="background-color:#f4d03f"] .btn--primary:hover {
  background-color: #01356e;
}

/* Tab Navigation */
.tabs-navigation {
  display: inline-flex;
  gap: var(--spacing-non-scalable-S, 12px);
  padding: var(--spacing-non-scalable-2XS, 4px);
  background-color: var(--surface-neutral-base-inversed, #ffffff);
  border-radius: var(--radius-non-scalable-round, 1000px);
  margin-bottom: var(--spacing-non-scalable-L, 24px);
  overflow-x: auto;
  max-width: 100%;
  /* Custom scrollbar für besseres UX */
}
.tabs-navigation::-webkit-scrollbar {
  height: 4px;
}
.tabs-navigation::-webkit-scrollbar-track {
  background: transparent;
}
.tabs-navigation::-webkit-scrollbar-thumb {
  background: var(--surface-primary-light, #e6ecf3);
  border-radius: 2px;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-none, 0);
  padding: var(--spacing-non-scalable-XS, 8px);
  background: transparent;
  border: none;
  border-radius: var(--radius-non-scalable-round, 1000px);
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-button:focus {
  outline: 2px solid var(--surface-primary-base, #023e84);
  outline-offset: 2px;
}
.tab-button .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-non-scalable-2XS, 4px);
  pointer-events: none;
}
.tab-button .tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.tab-button .tab-label {
  pointer-events: none;
}
.tab-button .tab-label {
  font-family: var(--font-label-s-family, "Geologica", sans-serif);
  font-weight: var(--font-label-s-font-weight-semi, 600);
  font-size: var(--font-label-s-font-size, 14px);
  line-height: var(--font-label-s-line-height, 20px);
  letter-spacing: var(--font-label-s-tracking, 0);
  color: var(--on-surface-text-primary-base, #023e84);
  padding: 0 var(--spacing-non-scalable-2XS, 4px);
}
.tab-button {
  /* Active State */
}
.tab-button.active {
  background-color: var(--surface-primary-light, #e6ecf3);
}
.tab-button {
  /* Hover State */
}
.tab-button:hover:not(.active) {
  background-color: rgba(2, 62, 132, 0.05);
}
.tab-button {
  /* Focus State */
}
.tab-button:focus-visible {
  outline: 2px solid var(--on-surface-border-primary-base, #023e84);
  outline-offset: 2px;
}

/* Tab Panels */
.tabs-panels {
  position: relative;
}

.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-panel-content {
  display: flex;
  gap: var(--spacing-non-scalable-S, 12px);
  background-color: var(--surface-neutral-base-inversed, #ffffff);
  border-radius: var(--radius-non-scalable-L, 24px);
  padding: var(--spacing-non-scalable-S, 12px);
  min-height: 480px;
}
@media (max-width: 768px) {
  .tab-panel-content {
    flex-direction: column;
    min-height: auto;
  }
}

.tab-panel-text {
  flex: 0 0 376px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-S, 12px);
  padding: var(--spacing-non-scalable-L-1, 28px);
}
.tab-panel-text .btn {
  align-self: flex-start;
}
@media (max-width: 768px) {
  .tab-panel-text {
    flex: 1;
    order: 2;
  }
}

.tab-content-headline {
  font-family: var(--font-heading-xl-family, "Geologica", sans-serif);
  font-weight: var(--font-heading-xl-font-weight, 700);
  font-size: var(--font-heading-xl-font-size, 40px);
  line-height: var(--font-heading-xl-line-height, 48px);
  letter-spacing: var(--font-heading-xl-tracking, 0);
  color: var(--text-primary-base, #023e84);
}

.tab-content-subtext {
  font-family: var(--font-body-m-family, "Geologica", sans-serif);
  font-weight: var(--font-body-m-font-weight-regular, 400);
  font-size: var(--font-body-m-font-size, 16px);
  line-height: var(--font-body-m-line-height, 24px);
  letter-spacing: var(--font-body-m-tracking, 0);
  color: var(--text-neutral-light, #4b5563);
}
.tab-content-subtext p {
  margin: 0 0 var(--spacing-non-scalable-XS, 8px) 0;
}
.tab-content-subtext p:last-child {
  margin-bottom: 0;
}

.tab-button-link {
  margin-top: auto;
  font-family: "Geologica", sans-serif;
}
.tab-button-link .btn {
  width: auto;
}
.tab-button-link img {
  background-color: var(--text-primary-base, #023e84);
  border-radius: 50%;
  padding: 4px;
  width: 24px;
  height: 24px;
}

.tab-panel-image {
  flex: 1;
  border-radius: var(--radius-radius-16px, 16px);
  overflow: hidden;
  min-height: 456px;
  position: relative;
}
@media (max-width: 768px) {
  .tab-panel-image {
    min-height: 300px;
    order: 1;
  }
}
.tab-panel-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section Button (unterhalb der Tabs) */
.tabs-section-button {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-non-scalable-3XL, 48px);
}
@media (max-width: 768px) {
  .tabs-section-button {
    margin-top: var(--spacing-non-scalable-XL, 32px);
  }
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
  .tabs-headline {
    font-size: var(--font-heading-xl-font-size, 40px);
    line-height: var(--font-heading-xl-line-height, 48px);
  }
  .tab-content-headline {
    font-size: var(--font-heading-l-font-size, 32px);
    line-height: var(--font-heading-l-line-height, 40px);
  }
}
@media (max-width: 768px) {
  .tabs-component {
    padding: var(--spacing-non-scalable-3XL, 48px) 0;
  }
  .tabs-header {
    margin-bottom: var(--spacing-non-scalable-XL, 32px);
  }
  .tabs-navigation {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .tab-button {
    padding: var(--spacing-non-scalable-XS, 8px) var(--spacing-non-scalable-S, 12px);
  }
  .tab-panel-text {
    padding: var(--spacing-non-scalable-M, 16px);
  }
}
/* Print Styles */
@media print {
  .tabs-navigation {
    display: none;
  }
  .tab-panel {
    display: block !important;
    page-break-inside: avoid;
  }
  .tab-panel:not(:first-child) {
    page-break-before: always;
  }
}
/* Button Overrides für Tab Component */
.tabs-component .btn--primary {
  font-family: "Geologica", sans-serif;
}
.tabs-component .btn--primary svg {
  fill: none;
}
.tabs-component .btn--secondary svg path, .tabs-component .btn--secondary svg circle {
  fill: white;
}

.tab-panel.active {
  background-color: transparent;
}

/* 
 * Button Icon Component
 * 
 * Alle möglichen CSS-Klassen-Varianten:
 * 
 * HIERARCHIE + SIZE:
 * - class="btn-icon btn-icon--primary btn-icon--S"        → Primary Small (40x40px, blauer Hintergrund)
 * - class="btn-icon btn-icon--primary btn-icon--L"        → Primary Large (48x48px, blauer Hintergrund)
 * - class="btn-icon btn-icon--secondary btn-icon--S"      → Secondary Small (40x40px, transparenter Hintergrund mit Rand)
 * - class="btn-icon btn-icon--secondary btn-icon--L"      → Secondary Large (48x48px, transparenter Hintergrund mit Rand)
 * 
 * INVERSED MODE (auf dunklem Hintergrund):
 * - class="btn-icon btn-icon--primary-inversed btn-icon--S"    → Primary Inversed Small (40x40px, weißer Hintergrund)
 * - class="btn-icon btn-icon--primary-inversed btn-icon--L"    → Primary Inversed Large (48x48px, GELBER Hintergrund)
 * - class="btn-icon btn-icon--secondary-inversed btn-icon--S"  → Secondary Inversed Small (40x40px, transparenter Hintergrund mit weißem Rand)
 * - class="btn-icon btn-icon--secondary-inversed btn-icon--L"  → Secondary Inversed Large (48x48px, transparenter Hintergrund mit weißem Rand)
 * 
 * DISABLED STATE:
 * Füge einfach das disabled-Attribut zum Button hinzu:
 * - <button class="btn-icon btn-icon--primary btn-icon--L" disabled>...</button>
 * 
 * STATES (automatisch per CSS):
 * - :hover    → Hover-State (hellere/dunklere Farbe)
 * - :active   → Active-State (gedrückt)
 * - :focus-visible → Focus-State (Outline-Ring sichtbar)
 * 
 * BEISPIEL:
 * <button class="btn-icon btn-icon--primary btn-icon--L" aria-label="Schließen">
 *   <svg class="btn-icon__icon" width="24" height="24">...</svg>
 * </button>
 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-non-scalable-round, 1000px);
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  position: relative;
}
.btn-icon--S {
  padding: var(--spacing-non-scalable-xs, 8px);
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.btn-icon--L {
  padding: var(--spacing-non-scalable-s, 12px);
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.btn-icon .btn-icon__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.btn-icon[aria-disabled=true], .btn-icon:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.btn-icon[aria-disabled=true] .btn-icon__icon, .btn-icon:disabled .btn-icon__icon {
  filter: grayscale(1) opacity(0.6);
}
.btn-icon--primary {
  background-color: var(--surface-primary-base, #023e84);
  border: 1px solid var(--surface-primary-base, #023e84);
}
.btn-icon--primary .btn-icon__icon {
  filter: brightness(0) invert(1);
}
.btn-icon--primary:hover {
  background-color: var(--surface-primary-bold, #011e42);
  border-color: var(--surface-primary-bold, #011e42);
}
.btn-icon--primary:active {
  background-color: var(--surface-primary-deep, #022f67);
  border-color: var(--surface-primary-deep, #022f67);
}
.btn-icon--primary:focus-visible {
  background-color: var(--surface-primary-base, #023e84);
  border: 1px solid var(--surface-primary-base, #023e84);
  outline: 2px solid var(--on-surface-border-primary-deep, #022f67);
  outline-offset: 2px;
}
.btn-icon--primary-inversed {
  background-color: var(--surface-primary-base-inversed, white);
  border: 1px solid var(--surface-primary-base-inversed, white);
}
.btn-icon--primary-inversed .btn-icon__icon {
  filter: none;
}
.btn-icon--primary-inversed:hover {
  background-color: var(--surface-primary-bold-inversed, #f2f5f9);
  border-color: var(--surface-primary-bold-inversed, #f2f5f9);
}
.btn-icon--primary-inversed:active {
  background-color: var(--surface-primary-deep-inversed, #fafbfd);
  border-color: var(--surface-primary-deep-inversed, #fafbfd);
}
.btn-icon--primary-inversed:focus-visible {
  background-color: var(--surface-primary-base-inversed, white);
  border: 1px solid var(--surface-primary-base-inversed, white);
  outline: 2px solid var(--on-surface-border-primary-deep-inversed, #e6ecf3);
  outline-offset: 2px;
}
.btn-icon--primary-inversed.btn-icon--L {
  background-color: var(--surface-secondary-base, #ffe620);
  border-color: var(--surface-secondary-base, #ffe620);
}
.btn-icon--primary-inversed.btn-icon--L:hover {
  background-color: var(--surface-secondary-bold, #fff173);
  border-color: var(--surface-secondary-bold, #fff173);
}
.btn-icon--primary-inversed.btn-icon--L:active {
  background-color: var(--surface-secondary-deep, #e6cf00);
  border-color: var(--surface-secondary-deep, #e6cf00);
}
.btn-icon--primary-inversed.btn-icon--L:focus-visible {
  background-color: var(--surface-secondary-base, #ffe620);
  border-color: var(--surface-secondary-base, #ffe620);
  outline: 2px solid var(--on-surface-border-primary-deep-inversed, #e6ecf3);
  outline-offset: 2px;
}
.btn-icon--secondary {
  background-color: transparent;
  border: 1px solid var(--on-surface-border-primary-base, #023e84);
}
.btn-icon--secondary .btn-icon__icon {
  filter: none;
}
.btn-icon--secondary:hover {
  background-color: var(--surface-primary-bold-inversed, #f2f5f9);
  border-color: var(--on-surface-border-primary-bold, #011e42);
}
.btn-icon--secondary:active {
  background-color: var(--surface-primary-deep-inversed, #fafbfd);
  border-color: var(--on-surface-border-primary-deep, #022f67);
}
.btn-icon--secondary:focus-visible {
  background-color: transparent;
  border: 1px solid var(--on-surface-border-primary-base, #023e84);
  outline: 2px solid var(--on-surface-border-primary-deep, #022f67);
  outline-offset: 2px;
}
.btn-icon--secondary-inversed {
  background-color: transparent;
  border: 1px solid var(--on-surface-border-primary-base-inversed, white);
}
.btn-icon--secondary-inversed .btn-icon__icon {
  filter: brightness(0) invert(1);
}
.btn-icon--secondary-inversed:hover {
  background-color: var(--surface-primary-bold, #011e42);
  border-color: var(--on-surface-border-primary-bold-inversed, #fafbfd);
}
.btn-icon--secondary-inversed:active {
  background-color: var(--surface-primary-deep, #022f67);
  border-color: var(--on-surface-border-primary-deep-inversed, #e6ecf3);
}
.btn-icon--secondary-inversed:focus-visible {
  background-color: transparent;
  border: 1px solid var(--on-surface-border-primary-base-inversed, white);
  outline: 2px solid var(--on-surface-border-primary-deep-inversed, #e6ecf3);
  outline-offset: 2px;
}

.element-card-grid {
  padding: 4rem 0;
  background: var(--surface-neutral-base-inversed);
  margin-bottom: 1rem;
  border-radius: var(--radius-scalable-s);
  max-width: 1416px;
  margin: 0 auto;
}
.element-card-grid__icon--white {
  filter: brightness(0) invert(1);
}
.element-card-grid__icon--yellow {
  filter: brightness(0) saturate(100%) invert(85%) sepia(80%) saturate(1000%) hue-rotate(5deg) brightness(105%) contrast(102%);
}
.element-card-grid__container {
  max-width: 1416px;
  margin: 0 auto;
  padding: 0;
}
.element-card-grid__header {
  text-align: center;
  margin-bottom: var(--spacing-scalable-3xl, 64px);
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .element-card-grid__header {
    width: 90%;
    margin-bottom: var(--spacing-scalable-xl, 40px);
  }
}
.element-card-grid__headline-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-scalable-xs, 12px);
  margin-bottom: var(--spacing-scalable-xs, 12px);
}
.element-card-grid__headline-icon {
  width: 32px;
  height: 32px;
}
.element-card-grid__headline {
  color: var(--text-primary-base, #023e84);
  margin: 0;
}
@media (max-width: 768px) {
  .element-card-grid__headline {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
.element-card-grid__subline {
  color: var(--text-primary-base, #023e84);
  margin: 0;
}
.element-card-grid__grid {
  display: grid;
  gap: var(--spacing-scalable-xs, 12px);
  margin-bottom: var(--spacing-scalable-3xl, 64px);
}
@media (max-width: 992px) {
  .element-card-grid__grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .element-card-grid__grid .element-card-grid__tile {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 400px;
  }
}
.element-card-grid__grid--2-small {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(338px, auto);
}
.element-card-grid__grid--2-small .element-card-grid__tile {
  grid-column: span 1;
}
.element-card-grid__grid--2-large {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(690px, auto);
}
.element-card-grid__grid--2-large .element-card-grid__tile {
  grid-column: span 1;
}
.element-card-grid__grid--3-large-left {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(338px, auto));
}
.element-card-grid__grid--3-large-left .element-card-grid__tile--1 {
  grid-column: 1;
  grid-row: 1/3;
}
.element-card-grid__grid--3-large-left .element-card-grid__tile--2 {
  grid-column: 2;
  grid-row: 1;
}
.element-card-grid__grid--3-large-left .element-card-grid__tile--3 {
  grid-column: 2;
  grid-row: 2;
}
.element-card-grid__grid--3-large-right {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(338px, auto));
}
.element-card-grid__grid--3-large-right .element-card-grid__tile--1 {
  grid-column: 1;
  grid-row: 1;
}
.element-card-grid__grid--3-large-right .element-card-grid__tile--2 {
  grid-column: 1;
  grid-row: 2;
}
.element-card-grid__grid--3-large-right .element-card-grid__tile--3 {
  grid-column: 2;
  grid-row: 1/3;
}
.element-card-grid__grid--4-small {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(338px, auto));
}
.element-card-grid__grid--4-small .element-card-grid__tile {
  grid-column: span 1;
}
.element-card-grid__tile {
  position: relative;
  border-radius: var(--radius-non-scalable-s, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.element-card-grid__tile--text-light {
  color: var(--on-surface-text-primary-on-primary, white);
}
.element-card-grid__tile--text-light .element-card-grid__tile-headline,
.element-card-grid__tile--text-light .element-card-grid__tile-subtext {
  color: var(--on-surface-text-primary-on-primary, white);
}
.element-card-grid__tile--text-dark {
  color: var(--on-surface-text-primary-base, #023e84);
}
.element-card-grid__tile--text-dark .element-card-grid__tile-headline,
.element-card-grid__tile--text-dark .element-card-grid__tile-subtext {
  color: var(--on-surface-text-primary-base, #023e84);
}
.element-card-grid__tile-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-m, 24px);
  padding: var(--spacing-scalable-xl, 40px);
  height: 100%;
  position: relative;
  z-index: 1;
}
.element-card-grid__tile-content--flex {
  flex-direction: row;
  gap: var(--spacing-scalable-xl, 40px);
}
@media (max-width: 768px) {
  .element-card-grid__tile-content--flex {
    flex-direction: column;
    gap: var(--spacing-scalable-m, 24px);
  }
}
.element-card-grid__tile-content--image-bottom {
  padding-bottom: 0;
}
.element-card-grid__main-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-m, 24px);
  flex: 1;
}
.element-card-grid__icon-background {
  backdrop-filter: blur(40px);
  background: var(--surface-primary-transparent-deep, rgba(2, 62, 132, 0.2));
  width: 32px;
  height: 32px;
  border-radius: var(--radius-non-scalable-round, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-non-scalable-3xs, 2px);
}
.element-card-grid__icon {
  width: 20px;
  height: 20px;
}
.element-card-grid__text-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-m, 24px);
}
.element-card-grid__tile-headline {
  margin: 0;
}
.element-card-grid__tile-headline.heading-l-text {
  font-family: var(--font-heading-l-family, "Geologica", sans-serif);
  font-weight: var(--font-heading-l-font-weight, 700);
  font-size: var(--font-heading-l-font-size, 32px);
  line-height: var(--font-heading-l-line-height, 40px);
  letter-spacing: var(--font-heading-l-tracking, 0px);
}
.element-card-grid__tile-subtext {
  margin: 0;
}
.element-card-grid__additional-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.element-card-grid__additional-image picture,
.element-card-grid__additional-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 768px) {
  .element-card-grid__additional-image {
    order: 100;
  }
}
.element-card-grid__additional-image--top {
  order: -1;
}
.element-card-grid__additional-image--center {
  flex: 1;
  align-items: center;
}
.element-card-grid__additional-image--bottom {
  margin-top: auto;
}
.element-card-grid__additional-image--left {
  flex-shrink: 0;
  max-width: 40%;
}
.element-card-grid__additional-image--left picture,
.element-card-grid__additional-image--left img {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-non-scalable-xs, 8px);
}
@media (max-width: 768px) {
  .element-card-grid__additional-image--left {
    max-width: 100%;
    margin-top: 0;
  }
}
.element-card-grid__additional-image--right {
  flex-shrink: 0;
  max-width: 40%;
}
.element-card-grid__additional-image--right picture,
.element-card-grid__additional-image--right img {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-non-scalable-xs, 8px);
}
@media (max-width: 768px) {
  .element-card-grid__additional-image--right {
    max-width: 100%;
    margin-top: 0;
  }
}
.element-card-grid__additional-image--left-bottom {
  flex-shrink: 0;
  max-width: 45%;
  align-self: flex-end;
}
.element-card-grid__additional-image--left-bottom picture,
.element-card-grid__additional-image--left-bottom img {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-non-scalable-xs, 8px);
}
@media (max-width: 768px) {
  .element-card-grid__additional-image--left-bottom {
    max-width: 100%;
    align-self: auto;
  }
}
.element-card-grid__additional-image--right-bottom {
  flex-shrink: 0;
  max-width: 45%;
  align-self: flex-end;
}
.element-card-grid__additional-image--right-bottom picture,
.element-card-grid__additional-image--right-bottom img {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-non-scalable-xs, 8px);
}
@media (max-width: 768px) {
  .element-card-grid__additional-image--right-bottom {
    max-width: 100%;
    align-self: auto;
  }
}
.element-card-grid__chips {
  display: flex;
  gap: var(--spacing-scalable-2xs, 8px);
  flex-wrap: wrap;
}
.element-card-grid__chips--top {
  order: -1;
}
.element-card-grid__chips--bottom {
  margin-top: auto;
}
.element-card-grid__chip {
  backdrop-filter: blur(40px);
  background: var(--surface-primary-transparent-base-inversed, rgba(255, 255, 255, 0.05));
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-none, 0px);
  padding: var(--spacing-non-scalable-xs, 8px);
  border-radius: var(--radius-non-scalable-round, 1000px);
}
.element-card-grid__chip-icon {
  width: 20px;
  height: 20px;
}
.element-card-grid__chip-text {
  padding: 0 var(--spacing-non-scalable-2xs, 4px);
  color: var(--on-surface-text-primary-on-primary, white) !important;
  text-decoration: none !important;
}
.element-card-grid__desktop-link-indicator {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-base, #023e84);
  transition: transform 0.2s ease;
  pointer-events: auto;
}
.element-card-grid__desktop-link-indicator svg {
  width: 20px;
  height: 20px;
  stroke: var(--on-surface-text-primary-base-inversed, white);
}
.element-card-grid__desktop-link-indicator path {
  stroke: var(--on-surface-text-primary-base-inversed, white);
}
.element-card-grid__tile--linked {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.element-card-grid__tile--linked:focus-visible {
  outline: 2px solid var(--on-surface-border-primary-base, #023e84);
  outline-offset: 2px;
}
@media (min-width: 769px) {
  .element-card-grid__tile--linked:hover {
    transform: translateY(-2px);
  }
  .element-card-grid__tile--linked:hover .element-card-grid__desktop-link-indicator {
    transform: scale(1.1);
  }
}
.element-card-grid__mobile-button-wrapper {
  display: none;
}
.element-card-grid__mobile-button {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-spacing-0px, 0px);
  padding: var(--spacing-non-scalable-s, 12px) var(--spacing-non-scalable-m, 16px);
  border-radius: var(--radius-non-scalable-round, 1000px);
  text-decoration: none;
  transition: all 0.3s ease;
}
.element-card-grid__mobile-button.button--primary {
  background: var(--surface-primary-base, #023e84);
  color: var(--on-surface-text-primary-base-inversed, white);
  border: none;
}
.element-card-grid__mobile-button.button--primary .button__icon {
  background: var(--surface-primary-base-inversed, white);
  color: var(--on-surface-text-primary-base, #023e84);
}
.element-card-grid__mobile-button.button--primary:active {
  background: var(--surface-primary-bold, #02315c);
}
.element-card-grid__mobile-button.button--secondary {
  background: transparent;
  color: var(--on-surface-text-primary-base, #023e84);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base, #023e84);
}
.element-card-grid__mobile-button.button--secondary .button__icon {
  background: #023E84;
}
.element-card-grid__mobile-button.button--secondary .button__icon svg,
.element-card-grid__mobile-button.button--secondary .button__icon svg path {
  stroke: white;
}
.element-card-grid__mobile-button.button--secondary:active {
  background: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
}
.element-card-grid__mobile-button .button__text {
  padding: 0 var(--spacing-spacing-8px, 8px);
}
.element-card-grid__mobile-button .button__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-non-scalable-round, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-non-scalable-3xs, 2px);
}
.element-card-grid__mobile-button .button__icon img {
  width: 20px;
  height: 20px;
}
.element-card-grid__mobile-button .button__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.element-card-grid__buttons {
  display: flex;
  gap: var(--spacing-non-scalable-m, 16px);
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .element-card-grid__buttons {
    flex-direction: column;
    align-items: stretch;
  }
}
.element-card-grid__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-spacing-0px, 0px);
  padding: var(--spacing-non-scalable-s, 12px) var(--spacing-non-scalable-m, 16px);
  border-radius: var(--radius-non-scalable-round, 1000px);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.element-card-grid__button:focus-visible {
  outline: 2px solid var(--on-surface-border-primary-base, #023e84);
  outline-offset: 2px;
}
.element-card-grid__button.btn--primary {
  background: var(--surface-primary-base, #023e84);
  color: var(--on-surface-text-primary-base-inversed, white);
  border: none;
}
.element-card-grid__button.btn--primary .button__icon {
  background: var(--surface-primary-base-inversed, white);
  color: var(--on-surface-text-primary-base, #023e84);
}
.element-card-grid__button.btn--primary .button__icon svg {
  stroke: var(--on-surface-text-primary-base, #023e84);
}
.element-card-grid__button.btn--primary:hover {
  background: var(--surface-primary-bold, #02315c);
}
.element-card-grid__button.btn--secondary {
  background: transparent;
  color: var(--on-surface-text-primary-base, #023e84);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base, #023e84);
}
.element-card-grid__button.btn--secondary .button__icon {
  background: #023E84;
}
.element-card-grid__button.btn--secondary .button__icon svg {
  stroke: white;
}
.element-card-grid__button.btn--secondary .button__icon path {
  stroke: white;
}
.element-card-grid__button.btn--secondary:hover {
  background: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
}
.element-card-grid .button__text {
  padding: 0 var(--spacing-spacing-8px, 8px);
}
.element-card-grid .button__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-non-scalable-round, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-non-scalable-3xs, 2px);
}
.element-card-grid .button__icon img {
  width: 20px;
  height: 20px;
}
.element-card-grid .button__icon svg {
  width: 20px;
  height: 20px;
}
.element-card-grid .button__icon--default svg {
  stroke: currentColor;
}
.element-card-grid__button.btn--secondary .button__icon--default svg,
.element-card-grid__button.btn--secondary .button__icon--default svg path {
  stroke: white;
}

.element-card-grid__tile[data-background-type=image] .element-card-grid__tile-content {
  background: linear-gradient(244deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.logik-element {
  padding: var(--spacing-scalable-6xl);
  position: relative;
  border-radius: 12px;
  max-width: 1416px;
  margin: 0 auto;
}
.logik-element.logik-element--screen-1 .logik-container {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--spacing-scalable-2xl) var(--spacing-scalable-2xl);
  align-items: start;
}
.logik-element.logik-element--screen-1 .logik__header {
  grid-column: 1;
  grid-row: 1;
  max-width: 500px;
}
.logik-element.logik-element--screen-1 .logik__headline {
  font-size: 48;
  font-size: 3rem;
  line-height: 56;
  line-height: 3.5rem;
  font-weight: 700;
  color: #023e84;
  text-align: left;
  font-family: "Geologica", sans-serif;
  margin: 0 0 12px 0;
}
@media (max-width: 768px) {
  .logik-element.logik-element--screen-1 .logik__headline {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
.logik-element.logik-element--screen-1 .logik__headline br {
  display: block;
}
.logik-element.logik-element--screen-1 .logik__subtext {
  font-size: 16;
  font-size: 1rem;
  line-height: 24;
  line-height: 1.5rem;
  font-weight: 400;
  color: #4b5563;
  text-align: left;
  font-family: "Geologica", sans-serif;
  margin: 0;
}
.logik-element.logik-element--screen-1 .logik__tiles-grid {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__tiles-grid {
    flex-direction: column;
    overflow-x: visible;
    gap: 8px;
  }
}
.logik-element.logik-element--screen-1 .logik__tile {
  position: relative;
  flex: 1;
  min-width: 226px;
  height: 299px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__tile {
    flex-direction: row;
    height: auto;
    min-width: auto;
    width: 100%;
    border: 2px solid #ffe620;
    box-shadow: none;
  }
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-image {
  width: 100%;
  height: 179px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__tile .logik__tile-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-text {
  flex: 1;
  font-size: 16;
  font-size: 1rem;
  line-height: 24;
  line-height: 1.5rem;
  font-weight: 400;
  color: #023e84;
  text-align: left;
  font-family: "Geologica", sans-serif;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 2px;
  pointer-events: none;
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox {
    top: 50%;
    transform: translateY(-50%);
  }
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-input {
  display: none;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-input:checked ~ .logik__checkbox-label {
  background: #fff;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-input:checked ~ .logik__checkbox-label .logik__checkbox-icon {
  display: inline-block;
  opacity: 1;
  background: #023e84;
  border-radius: 5px;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-label {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
  color: #fff;
  transition: opacity 0.2s ease;
}
.logik-element.logik-element--screen-1 .logik__tile .logik__tile-checkbox .logik__checkbox-icon svg {
  width: 100%;
  height: 100%;
}
.logik-element.logik-element--screen-1 .logik__tile.logik__tile--selected {
  border: 1px solid #023e84;
}
.logik-element.logik-element--screen-1 .logik__footer {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-scalable-l);
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__footer {
    grid-column: 1/-1;
    grid-row: 3;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
.logik-element.logik-element--screen-1 .logik__bottom-text {
  font-size: 16;
  font-size: 1rem;
  line-height: 24;
  line-height: 1.5rem;
  font-weight: 400;
  color: #4b5563;
  text-align: left;
  font-family: "Geologica", sans-serif;
  margin: 0;
  flex: 1;
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-1 .logik__bottom-text {
    flex: 1;
  }
}
.logik-element.logik-element--screen-1 .logik__button-wrapper {
  display: flex;
  flex-shrink: 0;
}
.logik-element.logik-element--screen-1 .logik__submit-btn {
  font-size: 16;
  font-size: 1rem;
  line-height: 24;
  line-height: 1.5rem;
  font-weight: 400;
  color: #fff;
  background: #023e84;
  border: none;
  border-radius: 1000px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: "Geologica", sans-serif;
  white-space: nowrap;
}
.logik-element.logik-element--screen-1 .logik__submit-btn:hover {
  background: #022a5a;
  transform: translateY(-1px);
}
.logik-element.logik-element--screen-1 .logik__submit-btn svg {
  width: 20px;
  height: 20px;
}
.logik-element.logik-element--screen-2 .logik-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.logik-element.logik-element--screen-2 .logik__back-arrow {
  width: 48px;
  height: 48px;
  border: none;
  background: #023e84;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(2, 62, 132, 0.2);
}
.logik-element.logik-element--screen-2 .logik__back-arrow:hover {
  background: #021d47;
  box-shadow: 0 6px 16px rgba(2, 62, 132, 0.3);
}
.logik-element.logik-element--screen-2 .logik__back-arrow:active {
  transform: scale(0.95);
}
.logik-element.logik-element--screen-2 .logik__back-arrow svg {
  width: 24px;
  height: 24px;
}
.logik-element.logik-element--screen-2 .logik__result-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-scalable-2xl);
  align-items: start;
  margin-top: var(--spacing-scalable-2xl);
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-2 .logik__result-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-scalable-l);
  }
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-2 .logik__result-image-wrapper {
    order: -1;
  }
}
.logik-element.logik-element--screen-2 .logik__result-image-wrapper .logik__result-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.logik-element.logik-element--screen-2 .logik__result-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-m);
  color: #023e84;
}
.logik-element.logik-element--screen-2 .logik__result-headline {
  font-size: var(--font-heading-2XL-size, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: #023e84;
  font-family: "Geologica", sans-serif;
  margin: 0;
}
.logik-element.logik-element--screen-2 .logik__result-headline br {
  display: block;
}
.logik-element.logik-element--screen-2 .logik__result-subline {
  font-size: var(--font-body-M-font-size, 16px);
  font-weight: 400;
  color: #4B5563;
  font-family: "Geologica", sans-serif;
  margin: 0;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-text {
  font-size: var(--font-heading-L-font-size, 32px);
  font-weight: 400;
  color: #023e84;
  font-family: "Geologica", sans-serif;
  margin: 0;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-text p {
  margin-bottom: 0;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-text p.h2 {
  font-size: var(--font-heading-3XL-size, 64px);
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-text strong {
  font-weight: 700;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-text em {
  font-style: italic;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scalable-s);
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 8px;
  border-radius: 1000px;
  border: 1px solid #023e84;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__chip .logik__chip-icon {
  width: 24px;
  height: 24px;
  display: block;
}
.logik-element.logik-element--screen-2 .logik__result-content-area .logik__chip .logik__chip-text {
  font-size: 14;
  font-size: 0.875rem;
  line-height: 20;
  line-height: 1.25rem;
  font-weight: 400;
  color: #023e84;
  font-family: "Geologica", sans-serif;
  margin: 0;
}
.logik-element.logik-element--screen-2 .logik__result-bottom-text {
  font-size: var(--font-body-M-font-size, 16px);
  font-weight: 400;
  color: #4B5563;
  font-family: "Geologica", sans-serif;
  margin: var(--spacing-scalable-m) 0 0;
}
.logik-element.logik-element--screen-2 .logik__button-wrapper a.btn {
  font-size: 16;
  font-size: 1rem;
  line-height: 24;
  line-height: 1.5rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 1000px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.logik-element.logik-element--screen-2 .logik__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-scalable-l);
  margin-top: var(--spacing-scalable-l);
}
@media (max-width: 991px) {
  .logik-element.logik-element--screen-2 .logik__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.logik-container {
  width: 100%;
  padding: 0;
}
.logik-container--screen2 {
  position: relative;
}

.fusszeile {
  width: 100%;
  padding: 24px 0;
  color: #333333;
  transition: background-color 0.2s ease;
  border-radius: 12px;
  margin-top: 1rem;
  padding: var(--spacing-non-scalable-2xl) var(--spacing-scalable-6xl);
  max-width: 1416px;
  margin: 0 auto;
  /* ========================
     Text-Farb-Varianten
     ======================== */
}
.fusszeile--text-dark {
  color: #023E84;
}
.fusszeile--text-dark .fusszeile__content {
  color: #023E84;
}
.fusszeile--text-dark .fusszeile__content strong {
  color: #023E84;
}
.fusszeile--text-dark .fusszeile__content a {
  color: #023E84;
}
.fusszeile--text-dark .fusszeile__content a:hover {
  color: #012B5C;
}
.fusszeile--text-dark .fusszeile__icon-wrapper {
  color: #023E84;
}
.fusszeile--text-light {
  color: #ffffff;
}
.fusszeile--text-light .fusszeile__content {
  color: #e0e0e0;
}
.fusszeile--text-light .fusszeile__content strong {
  color: #ffffff;
}
.fusszeile--text-light .fusszeile__content a {
  color: #66b3ff;
}
.fusszeile--text-light .fusszeile__content a:hover {
  color: #99ccff;
}
.fusszeile--text-light .fusszeile__content a:focus {
  outline-color: #66b3ff;
}
.fusszeile--text-light .fusszeile__icon-wrapper {
  color: #e0e0e0;
}
.fusszeile__container {
  padding: 0;
}
.fusszeile__inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 575px) {
  .fusszeile__inner {
    gap: 12px;
  }
}
@media (max-width: 575px) {
  .fusszeile__inner.fusszeile--with-icon {
    flex-direction: column;
    align-items: center;
  }
  .fusszeile__inner.fusszeile--with-icon .fusszeile__icon-wrapper {
    order: 0;
  }
  .fusszeile__inner.fusszeile--with-icon .fusszeile__content {
    order: 1;
    text-align: center;
  }
}
.fusszeile__icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  width: 24px;
  height: 24px;
}
@media (max-width: 767px) {
  .fusszeile__icon-wrapper {
    min-width: 24px;
    width: 24px;
    height: 24px;
  }
}
.fusszeile__icon-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}
.fusszeile__icon {
  display: block;
  width: 100%;
  height: auto;
  max-width: 24px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .fusszeile__icon {
    max-width: 20px;
  }
}
.fusszeile__icon-svg {
  width: 100%;
  height: 100%;
  max-width: 24px;
  max-height: 24px;
}
.fusszeile__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.fusszeile__content {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  transition: max-height 0.4s ease-out, overflow 0s linear 0.4s;
}
@media (max-width: 767px) {
  .fusszeile__content {
    font-size: 13px;
  }
}
@media (max-width: 575px) {
  .fusszeile__content {
    font-size: 12px;
    max-height: 136px;
    overflow: hidden;
  }
}
@media (max-width: 575px) {
  .fusszeile.is-open .fusszeile__content {
    max-height: 9999px;
    overflow: visible;
    transition: max-height 0.4s ease-out, overflow 0s linear 0s;
  }
}
.fusszeile.is-open .fusszeile__toggle-icon {
  transform: rotate(180deg);
}
@media (max-width: 575px) {
  .fusszeile--no-toggle .fusszeile__content {
    max-height: none;
    overflow: visible;
  }
}
.fusszeile__toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #023E84;
  transition: transform 0.3s ease;
}
@media (max-width: 575px) {
  .fusszeile__toggle {
    display: flex;
  }
}
.fusszeile__toggle:hover, .fusszeile__toggle:focus {
  opacity: 0.8;
  outline: 2px solid #023E84;
  outline-offset: 2px;
  border-radius: 4px;
}
.fusszeile__toggle:focus {
  outline-offset: 2px;
}
.fusszeile__toggle-text {
  white-space: nowrap;
}
.fusszeile__toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  stroke: currentColor;
}
.fusszeile--text-dark .fusszeile__toggle {
  color: #023E84;
}
.fusszeile--text-dark .fusszeile__toggle:hover, .fusszeile--text-dark .fusszeile__toggle:focus {
  outline-color: #023E84;
}
.fusszeile--text-light .fusszeile__toggle {
  color: #ffffff;
}
.fusszeile--text-light .fusszeile__toggle:hover, .fusszeile--text-light .fusszeile__toggle:focus {
  outline-color: #ffffff;
}
.fusszeile__content p {
  margin: 0 0 12px 0;
}
.fusszeile__content p:last-child {
  margin-bottom: 0;
}
.fusszeile__content ul,
.fusszeile__content ol {
  margin: 0 0 12px 0;
  padding-left: 24px;
}
@media (max-width: 575px) {
  .fusszeile__content ul,
  .fusszeile__content ol {
    padding-left: 20px;
  }
}
.fusszeile__content ul li,
.fusszeile__content ol li {
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.fusszeile__content ul:last-child,
.fusszeile__content ol:last-child {
  margin-bottom: 0;
}
.fusszeile__content a {
  text-decoration: none;
  transition: color 0.2s ease;
}
.fusszeile__content a:focus {
  outline-offset: 2px;
  border-radius: 2px;
}
.fusszeile__content strong {
  font-weight: 600;
}
.fusszeile__content em {
  font-style: italic;
}
.fusszeile__content code {
  padding: 2px 6px;
  border-radius: 2px;
  font-family: "Geologica", sans-serif;
  font-size: 0.95em;
}
.fusszeile__content pre {
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 12px 0;
  font-family: "Geologica", sans-serif;
  font-size: 13px;
}
.fusszeile__content pre code {
  padding: 0;
}
.fusszeile__content hr {
  border: none;
  margin: 12px 0;
}
.fusszeile__content blockquote {
  border-left: 3px solid;
  padding-left: 12px;
  margin: 12px 0;
  font-style: italic;
}
.fusszeile--text-dark .fusszeile__content code {
  background-color: #f5f5f5;
  color: #333333;
}
.fusszeile--text-dark .fusszeile__content pre {
  background-color: #f5f5f5;
  color: #333333;
}
.fusszeile--text-dark .fusszeile__content hr {
  border-top: 1px solid #e0e0e0;
}
.fusszeile--text-dark .fusszeile__content blockquote {
  color: #666666;
  border-left-color: #0066cc;
}
.fusszeile--text-dark .fusszeile__content a {
  color: #0066cc;
}
.fusszeile--text-dark .fusszeile__content a:hover {
  color: #004499;
  text-decoration: underline;
}
.fusszeile--text-dark .fusszeile__content a:focus {
  outline: 2px solid #0066cc;
}
.fusszeile--text-light .fusszeile__content code {
  background-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}
.fusszeile--text-light .fusszeile__content pre {
  background-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}
.fusszeile--text-light .fusszeile__content hr {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fusszeile--text-light .fusszeile__content blockquote {
  color: #e0e0e0;
  border-left-color: #66b3ff;
}
.fusszeile--text-light .fusszeile__content a {
  color: #66b3ff;
}
.fusszeile--text-light .fusszeile__content a:hover {
  color: #99ccff;
  text-decoration: underline;
}
.fusszeile--text-light .fusszeile__content a:focus {
  outline: 2px solid #66b3ff;
}
.fusszeile--with-icon .fusszeile__inner {
  align-items: flex-start;
}

@media (prefers-contrast: more) {
  .fusszeile--text-dark .fusszeile__content {
    color: #000000;
  }
  .fusszeile--text-dark .fusszeile__content strong {
    color: #000000;
  }
  .fusszeile--text-dark .fusszeile__content a {
    color: #0000ee;
    text-decoration: underline;
  }
  .fusszeile--text-dark .fusszeile__content a:focus {
    outline-color: #0000ee;
  }
  .fusszeile--text-dark .fusszeile__content code {
    background-color: transparent;
    color: #000000;
    border: 1px solid #000000;
  }
  .fusszeile--text-light .fusszeile__content {
    color: #ffffff;
  }
  .fusszeile--text-light .fusszeile__content strong {
    color: #ffffff;
  }
  .fusszeile--text-light .fusszeile__content a {
    color: #ffff00;
    text-decoration: underline;
  }
  .fusszeile--text-light .fusszeile__content a:focus {
    outline-color: #ffff00;
  }
  .fusszeile--text-light .fusszeile__content code {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fusszeile__content a {
    transition: none;
  }
}
.whitespace {
  width: 100%;
  height: var(--whitespace-height-desktop, 20px);
  display: block;
  max-width: 1416px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .whitespace {
    height: var(--whitespace-height-tablet, var(--whitespace-height-desktop, 20px));
  }
}
@media (max-width: 575px) {
  .whitespace {
    height: var(--whitespace-height-mobile, var(--whitespace-height-desktop, 20px));
  }
}
.whitespace {
  background-color: transparent;
  border: none;
  padding: 0;
}

/**
 * Chat-Popup Component Styles - Figma Design
 * FAB-Button + Modal für SteuerGPT & Onlim Integration
 */
/**
 * FAB Button
 */
.chat-popup-fab {
  position: fixed;
  bottom: var(--fab-offset-y, 24px);
  right: var(--fab-offset-x, 24px);
  width: 56px;
  height: 56px;
  border-radius: 1000px;
  background-color: #ffffff;
  color: #023e84;
  border: none;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0;
  padding: 0;
}
body.chat-popup-open .chat-popup-fab {
  display: none;
}
.chat-popup-fab:hover {
  background-color: #ffffff;
  box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.2);
  transform: scale(1.08);
}
.chat-popup-fab:active {
  transform: scale(0.95);
}
.chat-popup-fab:focus {
  outline: 2px solid #023e84;
  outline-offset: 3px;
}
.chat-popup-fab--bottom-left {
  right: auto;
  left: var(--fab-offset-x, 24px);
}
.chat-popup-fab--bottom-center {
  right: 50%;
  transform: translateX(50%);
}
.chat-popup-fab--bottom-center:hover {
  transform: translateX(50%) scale(1.08);
}
.chat-popup-fab--bottom-center:active {
  transform: translateX(50%) scale(0.95);
}

.chat-popup-fab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #023e84;
}
.chat-popup-fab__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.chat-popup-fab__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/**
 * Modal Backdrop
 */
.chat-popup__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.chat-popup__modal.is-open .chat-popup__backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/**
 * Modal Container
 */
.chat-popup__modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;
  overflow-y: auto;
}
.chat-popup__modal.is-open {
  display: flex;
  pointer-events: auto;
}

.chat-popup__container {
  width: 100%;
  max-width: 464px;
  min-height: min(500px, 100vh - 40px);
  max-height: calc(100vh - 40px);
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 99px 80px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  transform-origin: bottom right;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10001;
}

.chat-popup__container.is-hidden {
  display: none !important;
}

.chat-popup__modal.is-open .chat-popup__container {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/**
 * Modal Header
 */
.chat-popup__header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e5ea;
  padding: 16px 24px;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}

.chat-popup__header-content {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.chat-popup__title-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-popup__title {
  margin: 0;
  padding: 0;
  font-family: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #023e84;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-popup__logo-container {
  height: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.chat-popup__logo {
  height: 18px;
  width: auto;
  display: block;
}

/**
 * Modal Buttons
 */
.chat-popup__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 1000px;
  background-color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.chat-popup__button:hover {
  background-color: rgba(2, 62, 132, 0.05);
}
.chat-popup__button:focus {
  outline: 2px solid #023e84;
  outline-offset: 2px;
}
.chat-popup__button.chat-popup__button--back {
  width: 40px;
  height: 40px;
  border: 1px solid #023e84;
  color: #023e84;
  display: none;
}
.chat-popup__button.chat-popup__button--close {
  width: 48px;
  height: 48px;
  background-color: #023e84;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-popup__button.chat-popup__button--close:hover {
  background-color: rgb(1.84, 57.04, 121.44);
}

.chat-popup__button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.chat-popup__button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/**
 * Modal Content
 */
.chat-popup__content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.chat-popup__screen {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
}
.chat-popup__screen.chat-popup__screen--selector {
  display: flex;
}

/**
 * Options Screen - FIGMA DESIGN
 * Light blue cards (#e6ecf3) with centered icons, text, and arrow button
 */
.chat-popup__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.chat-popup__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 40px;
  background-color: #e6ecf3;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  flex: 1;
  position: relative;
  min-height: auto;
}
.chat-popup__option:hover {
  background-color: rgb(214.0202702703, 223.8554054054, 235.3297297297);
  transform: translateY(-2px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
.chat-popup__option:focus {
  outline: 2px solid #023e84;
  outline-offset: 2px;
}
.chat-popup__option:active {
  transform: translateY(0);
}

.chat-popup__option-icon {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #023e84;
  flex-shrink: 0;
}
.chat-popup__option-icon svg {
  width: 100%;
  height: 100%;
}
.chat-popup__option-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-popup__option-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.chat-popup__option-title {
  margin: 0;
  padding: 0;
  font-family: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #023e84;
}

.chat-popup__option-description {
  margin: 0;
  padding: 0;
  font-family: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #023e84;
}

.chat-popup__option-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  color: rgba(2, 62, 132, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 62, 132, 0.05);
  border-radius: 1000px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.chat-popup__option-arrow:hover {
  background-color: rgba(2, 62, 132, 0.1);
  color: #023e84;
}
.chat-popup__option-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

#onlim-chat-widget-lite {
  min-height: 450px !important;
}

/**
 * Chat Screens (iFrame & Script)
 */
.chat-popup__iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.chat-popup__script-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f5f5f5;
  padding: 16px;
  box-sizing: border-box; /* Wichtig: Padding wird in der Höhe mitgerechnet */
}

.chat-popup__iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
  border-radius: 12px;
}

.chat-popup__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #949494;
  font-family: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

/**
 * Responsive Design
 */
@media (max-width: 768px) {
  .chat-popup-fab {
    position: fixed;
    width: 48px;
    height: 48px;
    transition: none;
    transform: none;
  }
  .chat-popup-fab:hover, .chat-popup-fab:active {
    transform: none;
  }
  .chat-popup__modal {
    padding: 16px;
  }
  .chat-popup__container {
    max-width: none;
    max-height: 85vh;
    height: auto;
    transform-origin: bottom right;
  }
  .chat-popup__option {
    padding: 16px;
  }
  .chat-popup__option-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
  }
  .chat-popup__header-content {
    gap: 16px;
  }
  .chat-popup__title {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (max-width: 480px) {
  .chat-popup-fab {
    position: fixed !important;
    width: 44px !important;
    height: 44px !important;
    bottom: 16px !important;
    right: 16px !important;
    top: auto !important;
    left: auto !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  .chat-popup-fab:hover, .chat-popup-fab:active {
    transform: none !important;
    box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.15) !important;
  }
  .chat-popup-fab.chat-popup-fab--bottom-left {
    left: 16px !important;
    right: auto !important;
  }
  .chat-popup-fab.chat-popup-fab--bottom-center {
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
  }
  .chat-popup-fab.chat-popup-fab--bottom-center:hover, .chat-popup-fab.chat-popup-fab--bottom-center:active {
    transform: translateX(50%) !important;
  }
  .chat-popup__modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .chat-popup__backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transition: none !important;
    transform: none !important;
  }
  .chat-popup__container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: 85vh;
    min-height: auto;
    border-radius: 0 !important;
    transform: none !important;
    transform-origin: bottom center;
    will-change: auto;
  }
  .chat-popup__container.is-hidden {
    display: none !important;
  }
  .chat-popup__container {
    /* Volle Höhe nur wenn ein Chat aktiv ist */
  }
  .chat-popup__container.has-active-chat {
    height: 100%;
    max-height: 100vh;
  }
  .chat-popup__modal.is-open .chat-popup__container {
    transform: none !important;
  }
  .chat-popup__header {
    padding: 12px;
  }
  .chat-popup__header-content {
    gap: 12px;
  }
  .chat-popup__button.chat-popup__button--back {
    width: 36px;
    height: 36px;
  }
  .chat-popup__button.chat-popup__button--close {
    width: 40px;
    height: 40px;
  }
  .chat-popup__title {
    font-size: 18px;
    line-height: 26px;
  }
  .chat-popup__option {
    padding: 16px;
    gap: 16px;
  }
  .chat-popup__option-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
  }
  .chat-popup__option-arrow {
    position: static;
    margin-top: 8px;
  }
}
/**
 * Animations
 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-popup__container {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Accessibility & Print
 */
@media print {
  .chat-popup__fab,
  .chat-popup__modal {
    display: none !important;
  }
}
@media (prefers-contrast: more) {
  .chat-popup__fab {
    border: 2px solid #023e84;
  }
  .chat-popup__button--back {
    border-width: 2px;
  }
  .chat-popup__option {
    border: 1px solid #023e84;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-popup__fab,
  .chat-popup__container,
  .chat-popup__backdrop,
  .chat-popup__option {
    transition: none;
  }
}
.bildtextvideo-container {
  border-radius: var(--radius-non-scalable-S, 12px);
  background: var(--surface-secondary-base, #FFE620);
  min-height: 400px;
  overflow: auto;
  height: auto;
}
@media (max-width: 1200px) {
  .bildtextvideo-container[data-mobile-image] {
    background-image: var(--mobile-bg) !important;
    background-size: cover !important;
    background-position: top right !important;
  }
}
.bildtextvideo-container .bildtextvideo-buttons {
  display: flex;
  gap: 12px;
}
.bildtextvideo-container .bildtextvideo-text {
  padding: 40px;
}
@media (max-width: 1200px) {
  .bildtextvideo-container .bildtextvideo-text {
    padding: 24px;
  }
}
.bildtextvideo-container .bildtextvideo-headline {
  color: #023E84;
  padding-top: 64px;
}
@media (max-width: 768px) {
  .bildtextvideo-container .bildtextvideo-headline {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
.bildtextvideo-container .bildtextvideo-subline {
  color: #4B5563;
  font-size: var(--font-body-M-font-size, 16px);
  font-style: normal;
  font-weight: 400;
  z-index: 2;
}
.bildtextvideo-container .bildtextvideo-video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
}
.bildtextvideo-container .bildtextvideo-video-dimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bildtextvideo-container .bildtextvideo-video-banner {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(13px);
  padding: var(--spacing-m, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m, 16px);
  z-index: 5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.bildtextvideo-container .bildtextvideo-video-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bildtextvideo-container .bildtextvideo-video-banner-headline {
  margin: 0;
  font-family: var(--font-heading-M-family, Geologica);
  font-size: var(--font-heading-M-font-size, 24px);
  font-weight: 700;
  line-height: var(--font-heading-M-line-height, 32px); /* 133.333% */
}
.bildtextvideo-container .bildtextvideo-video-banner-subtext {
  margin: 0;
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height, 24px);
}
.bildtextvideo-container .bildtextvideo-video-play-btn {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: white;
  color: var(--text-primary-base, #023e84);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.bildtextvideo-container .bildtextvideo-video-play-btn:hover, .bildtextvideo-container .bildtextvideo-video-play-btn:focus {
  transform: scale(1.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.bildtextvideo-container .bildtextvideo-video-play-btn:active {
  transform: scale(0.95);
}
.bildtextvideo-container .bildtextvideo-play-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.bildtextvideo-container .overlay-bildtextvideo {
  top: 0;
  left: 0;
  border-radius: var(--radius-non-scalable-S, 12px);
  background: linear-gradient(257deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%);
  position: absolute;
  inset: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(50px);
  /* Diagonaler Verlauf steuert die Sichtbarkeit */
  mask-image: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%);
}
@media (max-width: 1200px) {
  .bildtextvideo-container .overlay-bildtextvideo {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgb(0, 0, 0) 80%, rgb(0, 0, 0) 100%);
  }
}
.bildtextvideo-container .overlay-bildtextvideo-darken {
  top: 0;
  left: 0;
  width: 100%;
  border-radius: var(--radius-non-scalable-S, 12px);
  background: linear-gradient(257deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%);
  position: absolute;
}
.bildtextvideo-container .bildtextvideo-badges {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 40px;
  gap: 8px;
}
.bildtextvideo-container .bildtextvideo-badges.badge-position-below {
  padding-left: 0;
}
@media (max-width: 1200px) {
  .bildtextvideo-container .bildtextvideo-badges {
    padding: 24px;
  }
  .bildtextvideo-container .bildtextvideo-badges.badge-position-below {
    padding-left: 0;
  }
}
.bildtextvideo-container .bildtextvideo-badges li {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-transparent-base-inversed, rgba(255, 255, 255, 0.05));
  padding: var(--spacing-non-scalable-XS, 8px);
  justify-content: center;
  align-items: center;
  display: flex;
  gap: var(--spacing-non-scalable-none, 0);
  font-family: var(--font-label-S-family, Geologica);
  font-size: var(--font-label-S-font-size, 14px);
  font-weight: 600;
  line-height: var(--font-label-S-line-height, 20px);
  /* 142.857% */
  letter-spacing: var(--font-label-S-tracking, 0);
  backdrop-filter: blur(16px);
}
.bildtextvideo-container .bildtextvideo-badges li .badge-icon svg, .bildtextvideo-container .bildtextvideo-badges li .badge-icon img {
  filter: brightness(0) saturate(100%) invert(1);
}
.bildtextvideo-container .bildtextvideo-badges li .badge-icon svg path, .bildtextvideo-container .bildtextvideo-badges li .badge-icon svg circle, .bildtextvideo-container .bildtextvideo-badges li .badge-icon svg rect, .bildtextvideo-container .bildtextvideo-badges li .badge-icon svg polygon {
  fill: var(--badge-icon-color, #FFFFFF);
}
.bildtextvideo-container .bildtextvideo-badges.badge-layout-boxed li {
  flex: 0 1 auto;
  max-width: calc(50% - 4px);
  min-width: 0;
}
@media (max-width: 768px) {
  .bildtextvideo-container .bildtextvideo-badges.badge-layout-boxed li {
    max-width: 100%;
  }
}
.bildtextvideo-container .btn-default {
  text-decoration: none;
  border-radius: var(--radius-non-scalable-round, 1000px);
  padding: var(--spacing-non-scalable-S, 12px) var(--spacing-non-scalable-M, 16px);
  white-space: nowrap;
  gap: unset;
}
@media (max-width: 1400px) {
  .bildtextvideo-container .btn-default.only-icon-on-mobile {
    padding: 12px;
  }
  .bildtextvideo-container .btn-default.only-icon-on-mobile span {
    display: none;
  }
  .bildtextvideo-container .btn-default.only-icon-on-mobile::after {
    margin-left: 0 !important;
  }
  .bildtextvideo-container .btn-default.only-icon-on-mobile::before {
    margin-right: 0;
  }
}
.bildtextvideo-container .btn--primary.bildtextvideo-button[data-position=before]::before {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-blue.svg");
  background-color: #fff;
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 10px;
}
.bildtextvideo-container .btn--primary.bildtextvideo-button[data-position=after] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bildtextvideo-container .btn--primary.bildtextvideo-button[data-position=after]::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-blue.svg");
  background-color: #fff;
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
  background-position: center;
}
.bildtextvideo-container .btn--secondary.bildtextvideo-button[data-position=before]::before {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-white.svg");
  background-color: var(--text-primary-base);
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 10px;
}
.bildtextvideo-container .btn--secondary.bildtextvideo-button[data-position=after] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bildtextvideo-container .btn--secondary.bildtextvideo-button[data-position=after]::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-white.svg");
  background-color: var(--text-primary-base);
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
  background-position: center;
}
.bildtextvideo-container .btn--secondary-inversed.bildtextvideo-button {
  background-color: transparent !important;
  color: #fff;
}
.bildtextvideo-container .btn--secondary-inversed.bildtextvideo-button[data-position=before]::before {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-blue.svg");
  background-color: unset #fff;
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 10px;
}
.bildtextvideo-container .btn--secondary-inversed.bildtextvideo-button[data-position=after] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bildtextvideo-container .btn--secondary-inversed.bildtextvideo-button[data-position=after]::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-blue.svg");
  background-color: #fff !important;
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
  background-position: center;
}
.bildtextvideo-container .btn--primary-inversed.bildtextvideo-button[data-position=before]::before {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-white.svg");
  background-color: var(--text-primary-base);
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 10px;
}
.bildtextvideo-container .btn--primary-inversed.bildtextvideo-button[data-position=after] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bildtextvideo-container .btn--primary-inversed.bildtextvideo-button[data-position=after]::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-white.svg");
  background-color: var(--text-primary-base);
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
  background-position: center;
}
.bildtextvideo-container .bildtextvideo-empty {
  border-radius: 12px;
  color: #999;
  font-size: 14px;
}

/* FAQ Element Styles */
.element-faq {
  max-width: 1416px;
  margin: 0 auto;
  background-color: transparent;
  border-radius: var(--radius-non-scalable-S, 12px);
}
.element-faq__container {
  padding: var(--spacing-scalable-6xl);
}
.element-faq__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px var(--spacing-non-scalable-S, 12px);
}
@media (min-width: 992px) {
  .element-faq__wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
.element-faq {
  /* Linke Spalte */
}
.element-faq__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl, 40px);
}
.element-faq__headline h2 {
  color: var(--text-primary-base-inversed, #FFF);
  margin: 0;
  /* Zeilenumbrüche aus ACF übernehmen */
}
.element-faq__headline h2 br {
  display: block;
}
.element-faq__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-M, 16px);
}
.element-faq__buttons .btn {
  gap: 10px;
  padding: var(--spacing-non-scalable-S, 12px) 20px;
}
.element-faq__buttons .btn svg {
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .element-faq__buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.element-faq {
  /* Rechte Spalte */
}
.element-faq__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-M, 16px);
}
.element-faq__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-S, 12px);
}
.element-faq__item {
  padding: var(--spacing-non-scalable-M, 16px);
  border-radius: var(--radius-non-scalable-S, 12px);
  background: transparent;
  transition: background 0.3s ease;
}
.element-faq__item[open] {
  background: var(--gradient-background-transparent, linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%));
}
.element-faq__question {
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-M, 16px);
  cursor: pointer;
  list-style: none;
  color: var(--text-primary-base-inversed, #FFF);
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  font-weight: 600;
  line-height: var(--font-body-M-line-height, 24px);
  /* Entfernt Standard-Marker */
}
.element-faq__question::-webkit-details-marker, .element-faq__question::marker {
  display: none;
}
.element-faq__question:hover {
  opacity: 0.9;
}
.element-faq__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  min-width: 48px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-radius-round, 1000px);
  background: var(--surface-primary-transparent-deep-inversed, rgba(255, 255, 255, 0.1));
  position: relative;
  transition: transform 0.3s ease;
  /* Chevron Icon */
}
.element-faq__icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 10L8 6L4 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.element-faq__icon {
  /* Wenn aufgeklappt */
}
details[open] .element-faq__icon::before {
  transform: rotate(0deg);
}
.element-faq__answer {
  margin-top: var(--spacing-non-scalable-M, 16px);
  margin-left: 60px; /* 48px Icon + 12px Gap */
  color: var(--text-primary-base-inversed, rgba(255, 255, 255, 0.9));
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  line-height: var(--font-body-M-line-height, 24px);
}
.element-faq__answer p {
  margin: 0 0 var(--spacing-non-scalable-S, 12px) 0;
}
.element-faq__answer p:last-child {
  margin-bottom: 0;
}
.element-faq__answer a {
  color: var(--text-link-inversed, #FFF);
  text-decoration: underline;
}
.element-faq__answer a:hover {
  opacity: 0.8;
}
.element-faq__answer ul, .element-faq__answer ol {
  margin: var(--spacing-non-scalable-S, 12px) 0;
  padding-left: var(--spacing-scalable-l, 24px);
}
.element-faq__answer li {
  margin-bottom: var(--spacing-non-scalable-xs, 8px);
}
.element-faq {
  /* Responsive Anpassungen */
}
@media (max-width: 768px) {
  .element-faq {
    padding: var(--spacing-scalable-4xl, 72px) 0;
  }
  .element-faq__container {
    padding: 0 var(--spacing-scalable-l, 24px);
  }
  .element-faq__headline h2 {
    font-size: var(--font-heading-2XL-size, 32px);
  }
  .element-faq__answer {
    margin-left: 0;
    margin-top: var(--spacing-non-scalable-S, 12px);
  }
  .element-faq__question {
    font-size: 15px;
  }
  .element-faq__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* Fragen-Antworten Element Styles */
.element-fragen-antworten {
  max-width: 1416px;
  margin: 0 auto;
  background-color: transparent;
  border-radius: var(--radius-non-scalable-S, 12px);
}
.element-fragen-antworten__container {
  padding: var(--spacing-scalable-6xl);
}
.element-fragen-antworten__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px var(--spacing-non-scalable-S, 12px);
}
@media (min-width: 992px) {
  .element-fragen-antworten__wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
.element-fragen-antworten {
  /* Linke Spalte */
}
.element-fragen-antworten__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xl, 40px);
}
.element-fragen-antworten__headline h2 {
  color: var(--text-primary-base-inversed, #FFF);
  margin: 0;
  /* Zeilenumbrüche aus ACF übernehmen */
}
.element-fragen-antworten__headline h2 br {
  display: block;
}
.element-fragen-antworten__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-M, 16px);
}
.element-fragen-antworten__buttons .btn {
  gap: 10px;
  padding: var(--spacing-non-scalable-S, 12px) 20px;
}
.element-fragen-antworten__buttons .btn svg {
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: content-box;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .element-fragen-antworten__buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.element-fragen-antworten {
  /* Rechte Spalte */
}
.element-fragen-antworten__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-M, 16px);
}
.element-fragen-antworten__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-non-scalable-S, 12px);
}
.element-fragen-antworten__item {
  padding: var(--spacing-non-scalable-M, 16px);
  border-radius: var(--radius-non-scalable-S, 12px);
  background: transparent;
  transition: background 0.3s ease;
}
.element-fragen-antworten__item[open] {
  background: var(--gradient-background-transparent, linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%));
}
.element-fragen-antworten__question {
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-M, 16px);
  cursor: pointer;
  list-style: none;
  color: var(--text-primary-base-inversed, #FFF);
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  font-weight: 600;
  line-height: var(--font-body-M-line-height, 24px);
  /* Entfernt Standard-Marker */
}
.element-fragen-antworten__question::-webkit-details-marker, .element-fragen-antworten__question::marker {
  display: none;
}
.element-fragen-antworten__question:hover {
  opacity: 0.9;
}
.element-fragen-antworten__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  min-width: 48px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-radius-round, 1000px);
  background: var(--surface-primary-transparent-deep-inversed, rgba(255, 255, 255, 0.1));
  position: relative;
  transition: transform 0.3s ease;
  /* Chevron Icon */
}
.element-fragen-antworten__icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 10L8 6L4 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.element-fragen-antworten__icon {
  /* Wenn aufgeklappt */
}
details[open] .element-fragen-antworten__icon::before {
  transform: rotate(0deg);
}
.element-fragen-antworten__answer {
  margin-top: var(--spacing-non-scalable-M, 16px);
  margin-left: 60px; /* 48px Icon + 12px Gap */
  color: var(--text-primary-base-inversed, rgba(255, 255, 255, 0.9));
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  line-height: var(--font-body-M-line-height, 24px);
}
.element-fragen-antworten__answer p {
  margin: 0 0 var(--spacing-non-scalable-S, 12px) 0;
}
.element-fragen-antworten__answer p:last-child {
  margin-bottom: 0;
}
.element-fragen-antworten__answer a {
  color: var(--text-link-inversed, #FFF);
  text-decoration: underline;
}
.element-fragen-antworten__answer a:hover {
  opacity: 0.8;
}
.element-fragen-antworten__answer ul, .element-fragen-antworten__answer ol {
  margin: var(--spacing-non-scalable-S, 12px) 0;
  padding-left: var(--spacing-scalable-l, 24px);
}
.element-fragen-antworten__answer li {
  margin-bottom: var(--spacing-non-scalable-xs, 8px);
}
.element-fragen-antworten {
  /* Responsive Anpassungen */
}
@media (max-width: 768px) {
  .element-fragen-antworten {
    padding: var(--spacing-scalable-4xl, 72px) 0;
  }
  .element-fragen-antworten__container {
    padding: 0 var(--spacing-scalable-l, 24px);
  }
  .element-fragen-antworten__headline h2 {
    font-size: var(--font-heading-2XL-size, 32px);
  }
  .element-fragen-antworten__answer {
    margin-left: 0;
    margin-top: var(--spacing-non-scalable-S, 12px);
  }
  .element-fragen-antworten__question {
    font-size: 15px;
  }
  .element-fragen-antworten__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

.text-teaser-module {
  position: relative;
  padding: 0;
  margin: 0 auto var(--spacing-scalable-6xl) auto;
  border-radius: var(--radius-scalable-s);
  max-width: 702px;
}
.text-teaser-module .text-teaser-container {
  position: relative;
  margin: 0 auto;
  padding: 0 24px;
}
.text-teaser-module .text-teaser-wrapper {
  position: relative;
  background: var(--surface/primary-transparent/base);
  border-radius: var(--radius-scalable-s);
  padding: var(--spacing-scalable-3xl) 16px var(--spacing-scalable-xl);
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-m);
}
@media (min-width: 768px) {
  .text-teaser-module .text-teaser-wrapper {
    margin-top: 32px;
  }
}

.text-teaser-icon {
  position: absolute;
  top: 0;
  left: 0px;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background: var(--surface-primary-base);
  border-radius: var(--radius-non-scalable-round);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-non-scalable-xs);
  z-index: 10;
  flex-shrink: 0;
}
@media (min-width: 576px) {
  .text-teaser-icon {
    left: 16px;
  }
}
.text-teaser-icon img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.text-teaser-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-non-scalable-none);
  padding: var(--spacing-non-scalable-xs);
  background: rgba(2, 62, 132, 0.05);
  backdrop-filter: blur(40px);
  border-radius: var(--radius-non-scalable-round);
  align-self: flex-start;
  flex-shrink: 0;
}
.text-teaser-chip .chip-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: block;
  object-fit: contain;
}
.text-teaser-chip .chip-text {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .text-teaser-chip .chip-text {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .text-teaser-chip .chip-text {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
.text-teaser-chip .chip-text {
  color: var(--text-primary-base);
  white-space: nowrap;
  text-align: center;
  padding: 0 var(--spacing-non-scalable-2xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-teaser-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  color: var(--text-primary-base);
  width: 100%;
  white-space: pre-wrap;
}

.text-teaser-headline {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .text-teaser-headline {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .text-teaser-headline {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
.text-teaser-headline {
  color: var(--text-primary-base);
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  position: relative;
  flex-shrink: 0;
  text-align: left;
}
.text-teaser-headline.heading-h3, .text-teaser-headline.heading-h4, .text-teaser-headline.heading-xl, .text-teaser-headline.heading-l {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .text-teaser-headline.heading-h3, .text-teaser-headline.heading-h4, .text-teaser-headline.heading-xl, .text-teaser-headline.heading-l {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .text-teaser-headline.heading-h3, .text-teaser-headline.heading-h4, .text-teaser-headline.heading-xl, .text-teaser-headline.heading-l {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
.text-teaser-headline.heading-h3, .text-teaser-headline.heading-h4, .text-teaser-headline.heading-xl, .text-teaser-headline.heading-l {
  margin: 0 !important;
  padding: 0 !important;
}

.text-teaser-subtext {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .text-teaser-subtext {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
@media (min-width: 1200px) {
  .text-teaser-subtext {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}
.text-teaser-subtext {
  color: var(--text-primary-base);
  margin: 0;
  width: 100%;
  position: relative;
  flex-shrink: 0;
}
.text-teaser-subtext p {
  margin-bottom: 16px;
}
.text-teaser-subtext p:last-child {
  margin-bottom: 0;
}
.text-teaser-subtext p:empty {
  margin-bottom: 16px;
  height: 16px;
}

@media (max-width: 992px) {
  .text-teaser-module {
    max-width: 609px;
  }
  .text-teaser-module .text-teaser-wrapper {
    padding: var(--spacing-scalable-3xl) 16px var(--spacing-scalable-xl);
    gap: var(--spacing-scalable-m);
  }
  .text-teaser-module .text-teaser-headline {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .text-teaser-module .text-teaser-headline {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 26px;
    line-height: 1.625rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  .text-teaser-module .text-teaser-headline {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (max-width: 992px) {
  .text-teaser-module .text-teaser-headline.heading-h3, .text-teaser-module .text-teaser-headline.heading-h4, .text-teaser-module .text-teaser-headline.heading-xl, .text-teaser-module .text-teaser-headline.heading-l {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .text-teaser-module .text-teaser-headline.heading-h3, .text-teaser-module .text-teaser-headline.heading-h4, .text-teaser-module .text-teaser-headline.heading-xl, .text-teaser-module .text-teaser-headline.heading-l {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 26px;
    line-height: 1.625rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  .text-teaser-module .text-teaser-headline.heading-h3, .text-teaser-module .text-teaser-headline.heading-h4, .text-teaser-module .text-teaser-headline.heading-xl, .text-teaser-module .text-teaser-headline.heading-l {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
}
@media (max-width: 576px) {
  .text-teaser-module {
    max-width: 377px;
  }
  .text-teaser-module .text-teaser-wrapper {
    padding: var(--spacing-scalable-3xl) 0px var(--spacing-scalable-xl);
  }
}
.text-teaser-module[style*=background-color] .text-teaser-wrapper {
  background: inherit;
}
.text-teaser-module[style*=color] .text-teaser-headline,
.text-teaser-module[style*=color] .text-teaser-subtext,
.text-teaser-module[style*=color] .text-teaser-chip .chip-text {
  color: inherit;
}

.splide {
  overflow: hidden;
}
.splide__track {
  overflow: hidden;
}
.splide__slide {
  overflow: hidden;
}

.testimonial-container h2 {
  color: var(--text-primary-base);
}
@media (max-width: 992px) {
  .testimonial-container h2 {
    font-size: var(--font-heading-2XL-size, 32px);
  }
}
.testimonial-container {
  color: var(--text-primary-base, #023E84);
  min-height: 490px;
  height: auto;
  padding: var(--spacing-scalable-6XL, 104px) 119px;
  flex-shrink: 0;
}
@media (max-width: 992px) {
  .testimonial-container {
    padding: var(--spacing-scalable-6XL, 104px) 12px;
  }
}
.testimonial-container .summary-box-testimonials {
  color: var(--text-primary-base, #023E84);
}
.testimonial-container .summary-box-testimonials .points {
  padding: 10px;
  border-radius: var(--radius-non-scalable-2XS, 8px);
  background: var(--surface-secondary-base, #FFE620);
  color: var(--text-primary-base, #023E84);
  /* heading-L */
  font-family: var(--font-heading-L-family, Geologica);
  font-size: var(--font-heading-L-font-size, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-heading-L-line-height, 40px);
  /* 125% */
  letter-spacing: var(--font-heading-L-tracking, 0);
  margin-right: 24px;
}
.testimonial-container .summary-box-testimonials p {
  margin-bottom: 0;
}
.testimonial-container .summary-box-testimonials .star-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: 16px 16px;
}
.testimonial-container .summary-box-testimonials .star-icon.filled {
  background-image: url(../images/icons/24px/favorite-filled.svg);
}
.testimonial-container .summary-box-testimonials .star-icon.quarter-filled {
  background-image: url(../images/icons/24px/favorite-quarter-filled.svg);
}
.testimonial-container .summary-box-testimonials .star-icon.threequarter-filled {
  background-image: url(../images/icons/24px/favorite-three-quarter-filled.svg);
}
.testimonial-container .summary-box-testimonials .star-icon.half-filled {
  background-image: url(../images/icons/24px/favorite-half-filled.svg);
}
.testimonial-container .summary-box-testimonials .summary-text {
  color: var(--text-primary-base, #023E84);
  white-space: nowrap;
  /* body-M-regular */
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height, 24px);
  /* 150% */
  letter-spacing: var(--font-body-M-tracking, 0);
}
.testimonial-container .single-box-testimonial {
  border-radius: var(--radius-non-scalable-XS, 8px);
  background: var(--surface-neutral-base-inversed, #FFF);
  display: flex;
  height: 320px;
  min-width: 290px;
  padding: var(--spacing-scalable-M, 24px) var(--spacing-scalable-L, 24px);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  transition: all 0.3s ease-in-out;
  font-family: "Geologica", sans-serif;
}
.testimonial-container .single-box-testimonial .testimonial-text {
  height: 160px;
  color: var(--text-primary-base, #023E84);
}
.testimonial-container .single-box-testimonial:hover {
  border-radius: var(--radius-non-scalable-XS, 8px);
  background: var(--surface-neutral-base-inversed, #FFF);
  transition: all 0.3s ease-in-out;
  /* shadow/M */
  box-shadow: 0 63px 66px -32px rgba(0, 0, 0, 0.12);
}
.testimonial-container .single-box-testimonial p {
  color: var(--text-neutral-light, #4B5563);
  /* body-M-regular */
  font-family: var(--font-body-M-family, Geologica);
  font-size: var(--font-body-M-font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height, 24px);
  /* 150% */
  letter-spacing: var(--font-body-M-tracking, 0);
}
.testimonial-container .single-box-testimonial .testimonial-logo {
  height: 16px;
  width: auto;
}
.testimonial-container .single-box-testimonial .star-icon-orange {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-size: 16px 16px;
  background-image: url(../images/icons/24px/orangestar.svg);
}

.btn-testimonial {
  text-decoration: none;
  border-radius: var(--radius-non-scalable-round, 1000px);
  padding: var(--spacing-non-scalable-S, 12px) var(--spacing-non-scalable-M, 16px);
  white-space: nowrap;
  gap: unset;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--text-primary-base);
  border: 1px solid;
  font-family: "Geologica", sans-serif;
  color: var(--text-primary-base);
}
.btn-testimonial::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/icons/24px/arrow-right-white.svg");
  background-color: var(--text-primary-base);
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
  background-position: center;
  transition: all 0.3s ease-in-out;
}
.btn-testimonial:hover {
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-bold, #011E42);
  background: var(--surface-primary-bold-inversed, #F2F5F9);
  transition: all 0.3s ease-in-out;
}
.btn-testimonial:focus {
  border-radius: var(--radius-non-scalable-round, 1000px);
  border: var(--border-border-1px, 1px) solid var(--on-surface-border-primary-base, #023E84);
  transition: all 0.3s ease-in-out;
}

/**
 * Journey Section Styles
 * WISO Journey Guide Component
 * Based on Figma Design (Node: 40002111-24278)
 */
.acf-module-wrapper--journey {
  overflow: hidden;
}

.journey-section {
  background: linear-gradient(180deg, #e6ecf3 0%, #f5f8fb 100%);
  padding: 80px 40px 120px 40px;
  position: relative;
  margin-bottom: 24px;
  border-radius: 12px;
  max-width: 1416px;
  margin: 0 auto;
}

.journey-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* HEADER */
.journey-header {
  text-align: center;
  margin-bottom: 80px;
}

.journey-title {
  margin: 0 0 12px 0;
  color: #023e84;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.journey-subtitle {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* MAIN CONTAINER */
.journey-main {
  position: relative;
}

/* TOP 3 CARDS */
.journey-cards-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 120px;
  position: relative;
  z-index: 10;
  max-width: 1200px;
  /* 3 Karten - 3 Spalten */
}
.journey-cards-top:has(.journey-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.journey-cards-top {
  /* 4 Karten - 4 Spalten */
}
.journey-cards-top:has(.journey-card:nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr);
}

.journey-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: rgba(2, 62, 132, 0.05);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(2, 62, 132, 0.1);
  min-height: auto;
  text-align: center;
}

.journey-card-icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.journey-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.journey-card-text {
  margin: 0;
  color: #023e84;
  font-size: 16px;
  font-weight: 600;
  font-family: "Geologica", sans-serif;
  line-height: 22px;
}

/* ANIMATIONS */
@keyframes float-left-right {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(20px);
  }
}
@keyframes float-right-left {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-20px);
  }
}
@keyframes float-up-down {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
/* UNION/DASHED LINE */
.journey-union {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 1146px;
  height: 1316px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

/* SVG CONTAINERS - DESKTOP VERSTECKT */
.journey-svg-container,
.journey-svg-container-1,
.journey-svg-container-2,
.journey-svg-container-3 {
  display: none !important;
}

/* CLOUDS */
.journey-cloud {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.journey-cloud-left {
  top: 60px;
  left: -60px;
  width: 200px;
  height: auto;
  animation: float-left-right 8s ease-in-out infinite;
}

.journey-cloud-right {
  top: 60px;
  right: -65px;
  width: 271px;
  height: 125px;
  animation: float-right-left 6s ease-in-out infinite;
}

/* CONTENT BOXES */
.journey-content-boxes {
  position: relative;
  z-index: 9;
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  gap: 150px;
}

.journey-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  background: white;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(2, 62, 132, 0.08);
  width: 65%;
}
.journey-box:first-child {
  margin-left: auto;
  margin-right: 0;
}
.journey-box:last-child {
  margin-right: auto;
  margin-left: 0;
}

.journey-box-image {
  overflow: hidden;
  border-radius: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-box--reverse {
  direction: rtl;
}
.journey-box--reverse > * {
  direction: ltr;
}

.journey-box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 12px;
}

.journey-box-headline {
  margin: 0;
  color: #023e84;
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.journey-box-text {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid #023e84;
  border-radius: 50px;
  background: white;
  color: #023e84;
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
  margin-top: 8px;
}
.journey-btn:hover {
  background: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
}

.journey-btn .button__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-non-scalable-round, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-non-scalable-3xs, 2px);
  background: #023e84;
}
.journey-btn .button__icon svg {
  width: 20px;
  height: 20px;
  stroke: white;
  color: #fff;
}

/* PRICE BADGE */
.journey-price-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #E6ECF3;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 8;
  min-width: 140px;
  text-align: left;
}

/* SVG VOR PREISBOX 3 */
.journey-svg-before-price3 {
  position: absolute;
  margin: 40px 0 0 0;
  /* Positionierung wird via JavaScript und data-Attribute gesetzt */
}
.journey-svg-before-price3 img {
  height: auto;
}

.journey-price-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Geologica", sans-serif;
}

.journey-price-amount {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #4caf50;
  line-height: 1;
  font-family: "Geologica", sans-serif;
}

/* DECORATIONS */
.journey-deco {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.journey-rocket {
  width: 100px;
  height: 100px;
  /* Positionierung wird via JavaScript und data-Attribute gesetzt */
  transform: translateX(-50%);
  animation: float-up-down 6s ease-in-out infinite;
}

.journey-flame {
  width: 80px;
  height: 80px;
  top: 550px;
  right: 80px;
}

.journey-coin {
  width: 100px;
  height: 100px;
  top: 950px;
  right: 100px;
}

/* FINAL BOX */
.journey-final-box {
  background: white;
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: none;
  max-width: 592px;
  position: relative;
  z-index: 9;
  margin-top: 40px;
}

.journey-final-headline {
  margin: 0 0 16px 0;
  color: #023e84;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.journey-final-text {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.journey-final-illustration {
  width: 280px;
  height: 140px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
}
.journey-final-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .journey-cards-top {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px;
    margin-bottom: 60px;
    /* Bei 4 Karten: 2x2 Grid */
  }
  .journey-cards-top:has(.journey-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .journey-box {
    grid-template-columns: 1fr;
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .journey-union {
    width: 90%;
    opacity: 0.3;
  }
}
@media (max-width: 768px) {
  .journey-section {
    padding: 24px 8px;
    background: linear-gradient(180deg, #e6ecf3 0%, #f5f8fb 100%);
  }
  .journey-wrapper {
    max-width: 100%;
  }
  .journey-title {
    font-size: 32px;
    line-height: 40px;
  }
  .journey-subtitle {
    font-size: 16px;
  }
  /* TOP 3 CARDS - HORIZONTALES LAYOUT */
  .journey-cards-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 120px;
    grid-template-columns: unset;
  }
  .journey-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 24px;
    min-height: auto;
    background: rgba(2, 62, 132, 0.05);
    backdrop-filter: blur(40px);
    border-radius: 12px;
    border: none;
  }
  .journey-card-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
  .journey-card-text {
    font-size: var(--font-body-L-font-size, 20px);
    font-weight: 600;
    line-height: 28px;
    color: #023e84;
    margin: 0;
    text-align: left;
  }
  /* MOBILE CARDS - KEINE UNTERER MARGIN */
  .journey-cards-top {
    margin-bottom: 0;
  }
  /* SVG LINE - MOBILE SPECIFIC */
  .journey-union {
    display: none !important;
  }
  /* DESKTOP PRICE BADGES - VERSTECKEN */
  .journey-price-badge:not([class*="--mobile"]) {
    display: none !important;
  }
  /* MOBILE SVG SEGMENT - NACH CARDS UND ZWISCHEN BOXEN */
  .journey-union-mobile {
    display: block;
    position: relative;
    width: 100%;
    max-width: 377px;
    height: auto;
    margin: 40px auto;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
  }
  .journey-union-mobile img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* SVG CONTAINER MIT PREIS-BADGE - MOBILE NUR */
  .journey-svg-container {
    display: none;
  }
  .journey-svg-container-1,
  .journey-svg-container-2,
  .journey-svg-container-3 {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0 0;
  }
  .journey-svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .journey-svg-bg img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  /* MOBILE PRICE BADGES - OBEN ZENTRIERT */
  .journey-price-badge--mobile-1,
  .journey-price-badge--mobile-2,
  .journey-price-badge--mobile-3 {
    position: absolute !important;
    top: -10% !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin: 0 !important;
    padding: 12px 16px;
    background: #E6ECF3;
    backdrop-filter: none;
    border-radius: 0;
    z-index: 10;
    width: auto;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
  /* CLOUDS - SICHTBAR ABER OFFSET */
  .journey-cloud-left {
    display: block !important;
    top: -38.98px;
    left: -51px;
    width: 243px;
    height: 112px;
    z-index: 2;
  }
  .journey-cloud-right {
    display: block !important;
    top: 149px;
    right: -55px;
    width: 271px;
    height: 125px;
    z-index: 2;
  }
  /* CONTENT BOXES - FULL WIDTH, ÜBEREINANDER */
  .journey-content-boxes {
    margin-top: 0px;
    gap: 0;
  }
  .journey-box {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 0;
    align-items: stretch;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px;
    min-height: auto;
    background: white;
    border-radius: 24px;
    margin-top: -10px;
    z-index: 999;
  }
  /* MOBILE SVG CONTAINER ANZEIGEN */
  .journey-svg-container-1,
  .journey-svg-container-2,
  .journey-svg-container-3 {
    display: flex !important;
  }
  /* SVG VOR PREISBOX 3 ANZEIGEN - MOBILE */
  .journey-svg-before-price3 {
    display: block;
    position: absolute !important;
    /* Mobile Positionierung wird via JavaScript gesetzt */
    z-index: 99;
    width: auto;
    margin: 0 !important;
  }
  .journey-box-image {
    height: 232px;
    border-radius: 16px;
    overflow: hidden;
  }
  .journey-box-content {
    padding: 12px;
    gap: 16px;
    background: white;
  }
  .journey-box-headline {
    font-size: 24px;
    line-height: 32px;
    color: #023e84;
  }
  .journey-box-text {
    font-size: 16px;
    line-height: 24px;
    color: #4b5563;
  }
  .journey-price-label {
    font-size: 16px;
    color: #4b5563;
  }
  .journey-price-amount {
    font-size: 32px;
    color: #4caf50;
  }
  /* DECORATIONS - SICHTBAR, POSITIONED */
  .journey-deco {
    display: block !important;
  }
  .journey-rocket {
    display: block !important;
    width: 100px;
    height: 100px;
    /* Mobile Positionierung wird via JavaScript gesetzt */
  }
  .journey-flame {
    display: block !important;
    width: 80px;
    height: 80px;
  }
  .journey-coin {
    display: block !important;
    width: 100px;
    height: 100px;
  }
  /* FINAL BOX */
  .journey-final-box {
    max-width: 377px;
    margin: -3px auto 0;
    padding: 48px 40px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }
  .journey-final-headline {
    font-size: 24px;
    line-height: 32px;
  }
  .journey-final-text {
    font-size: 16px;
  }
  .journey-final-illustration {
    width: 280px;
    height: 140px;
    margin: 0px auto 0;
  }
}
/**
 * Navigation 2027 Module Styles
 * 
 * Navigation-Element für die Seitenstruktur
 * Erstellt Links zu allen Elementen nach dem Navigation-Element
 * 
 * Design basierend auf Figma
 */
.navigation-2027 {
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  background-color: rgba(255, 255, 255, 0.6);
  padding: 16px 24px;
  margin: 12px 0 12px 0;
  border-radius: 8px;
  width: 100%;
}
.navigation-2027__container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media (min-width: 768px) {
  .navigation-2027__container {
    gap: 24px;
  }
}
.navigation-2027__link {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.navigation-2027__link:hover {
  opacity: 0.8;
}
.navigation-2027__link:active {
  opacity: 0.7;
}
.navigation-2027__text {
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  color: #023E84;
  text-align: center;
  white-space: nowrap;
}
.navigation-2027__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.navigation-2027__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.navigation-2027__icon path {
  fill: #023E84;
}

.dataprotection-container {
  margin: 0 auto;
  color: var(--text-primary-base);
}
.dataprotection-container h1 {
  font-size: 48px;
  font-size: 3rem;
  line-height: 56px;
  line-height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .dataprotection-container h1 {
    font-size: 56px;
    font-size: 3.5rem;
    line-height: 64px;
    line-height: 4rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .dataprotection-container h1 {
    font-size: 64px;
    font-size: 4rem;
    line-height: 72px;
    line-height: 4.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.dataprotection-container h1 {
  color: var(--on-surface-text-primary-base);
  margin-bottom: var(--spacing-3xl, 48px);
  hyphens: auto;
}
.dataprotection-container h2 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 40px;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .dataprotection-container h2 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 48px;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .dataprotection-container h2 {
    font-size: 48px;
    font-size: 3rem;
    line-height: 56px;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.dataprotection-container h2 {
  color: var(--on-surface-text-primary-base);
  margin-top: var(--spacing-scalable-4xl);
  margin-bottom: var(--spacing-scalable-3xl);
}
.dataprotection-container h3 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 28px;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .dataprotection-container h3 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
@media (min-width: 1200px) {
  .dataprotection-container h3 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: 0px;
  }
}
.dataprotection-container h3 {
  color: var(--on-surface-text-primary-base);
  margin-top: var(--spacing-scalable-3xl);
  margin-bottom: var(--spacing-scalable-2xl);
}
.dataprotection-container p {
  font-size: var(--font-body-M-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-body-M-line-height);
  letter-spacing: var(--font-body-M-tracking);
  margin-bottom: var(--spacing-2xl, 24px);
}
.dataprotection-container p:last-child {
  margin-bottom: 0;
}
.dataprotection-container ul,
.dataprotection-container ol {
  font-size: var(--font-body-M-font-size);
  font-weight: 400;
  line-height: var(--font-body-M-line-height);
  letter-spacing: var(--font-body-M-tracking);
  margin-bottom: var(--spacing-scalable-2xl);
}
.dataprotection-container ul li,
.dataprotection-container ol li {
  margin-bottom: var(--spacing-scalable-xs);
}
.dataprotection-container ul li:last-child,
.dataprotection-container ol li:last-child {
  margin-bottom: 0;
}
.dataprotection-container ul {
  list-style: disc;
}
.dataprotection-container ol {
  list-style: decimal;
}
.dataprotection-container a {
  color: var(--surface-primary-base);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.dataprotection-container a:hover {
  color: var(--surface-primary-hover);
}
.dataprotection-container strong {
  font-weight: 600;
}
.dataprotection-container em {
  font-style: italic;
}
.dataprotection-container .toc-list {
  padding-left: 0;
  list-style: none !important;
}
.dataprotection-container .toc-list li {
  font-weight: bold;
}

/**
 * Comparison Module Styles
 * 
 * "Darum lohnt sich WISO Steuer" Vergleichstabelle
 * Basierend auf Figma Design: WISO Component Library
 * 
 * Struktur:
 * - Headline
 * - Tabelle mit 2 Logo-Spalten (Pill-Header)
 * - Zeilen mit Check/Cross Icons in runden Badges
 * - Footer mit Icon+Text und Buttons
 */
.comparison-module {
  max-width: 1416px;
  margin: 0 auto;
}
.comparison-module.bg-color-blue {
  padding: var(--spacing-scalable-xl, 40px);
  border-radius: var(--radius-non-scalable-xs, 8px);
  color: #FFFFFF;
}
.comparison-module.bg-color-blue .comparison-headline {
  color: #FFFFFF;
}
.comparison-module.bg-color-blue .comparison-info-icon-label,
.comparison-module.bg-color-blue .comparison-info-text,
.comparison-module.bg-color-blue .comparison-info-item__text {
  color: #FFFFFF;
}
.comparison-module.bg-color-blue .comparison-info-icon {
  background-color: #FFFFFF;
  border-radius: 50%;
}
.comparison-module.bg-color-blue .comparison-info-icon .comparison-info-icon--leaf,
.comparison-module.bg-color-blue .comparison-info-icon .comparison-info-icon--shield,
.comparison-module.bg-color-blue .comparison-info-icon .comparison-info-icon--check-circle {
  color: #023E84;
  fill: #023E84;
}
.comparison-module.bg-color-blue .comparison-info-icon path {
  fill: #023E84;
}
.comparison-module.bg-color-blue .comparison-btn.btn--primary {
  background-color: #FFFFFF;
  color: #023E84;
}
.comparison-module.bg-color-blue .comparison-btn.btn--primary svg {
  background-color: #023E84;
  color: #FFFFFF;
  fill: #FFFFFF;
  border-radius: 50%;
  padding: 2px;
}
.comparison-module.bg-color-blue .comparison-btn.btn--primary:hover {
  background-color: #F2F5F9;
}
.comparison-module.bg-color-blue .comparison-btn.btn--primary:active {
  background-color: #E5EBF5;
}
.comparison-module.bg-color-blue .comparison-btn.btn--secondary {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.comparison-module.bg-color-blue .comparison-btn.btn--secondary svg {
  background-color: #FFFFFF;
  color: #023E84;
  fill: #023E84;
  border-radius: 50%;
  padding: 2px;
}
.comparison-module.bg-color-blue .comparison-btn.btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.comparison-module.bg-color-blue .comparison-btn.btn--secondary:active {
  background-color: rgba(255, 255, 255, 0.25);
}
.comparison-module.bg-color-blue .comparison-btn.btn--tertiary {
  background-color: transparent;
  color: #FFFFFF;
}
.comparison-module.bg-color-blue .comparison-btn.btn--tertiary svg {
  background-color: #FFFFFF;
  color: #023E84;
  fill: #023E84;
  border-radius: 50%;
  padding: 2px;
}
.comparison-module.bg-color-blue .comparison-btn.btn--tertiary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.comparison-module.bg-color-blue .comparison-btn.btn--tertiary:active {
  background-color: rgba(255, 255, 255, 0.2);
}
.comparison-module.bg-color-yellow, .comparison-module.bg-color-gray, .comparison-module.bg-color-gray-none, .comparison-module.bg-color-white {
  padding: var(--spacing-scalable-xl, 40px);
  border-radius: var(--radius-non-scalable-xs, 8px);
}
.comparison-module.bg-color-yellow .comparison-btn.btn--secondary:hover, .comparison-module.bg-color-gray .comparison-btn.btn--secondary:hover, .comparison-module.bg-color-gray-none .comparison-btn.btn--secondary:hover, .comparison-module.bg-color-white .comparison-btn.btn--secondary:hover {
  background-color: #F2F5F9;
}
.comparison-module.bg-gradient {
  padding: var(--spacing-scalable-xl, 40px);
  border-radius: var(--radius-non-scalable-xs, 8px);
  background-size: 100% 100%;
  background-attachment: fixed;
}
.comparison-module.text-color-light {
  color: #FFFFFF !important;
}
.comparison-module.text-color-light .comparison-headline {
  color: #FFFFFF !important;
}
.comparison-module.text-color-light .comparison-info-icon-label,
.comparison-module.text-color-light .comparison-info-text,
.comparison-module.text-color-light .comparison-info-item__text {
  color: #FFFFFF !important;
}
.comparison-module.text-color-light .comparison-table__label-cell,
.comparison-module.text-color-light .comparison-table__col-text {
  color: #FFFFFF !important;
}
.comparison-module.text-color-dark {
  color: var(--text-primary-base, #023E84) !important;
}
.comparison-module.text-color-dark .comparison-headline {
  color: var(--text-primary-base, #023E84) !important;
}
.comparison-module.text-color-dark .comparison-info-icon-label,
.comparison-module.text-color-dark .comparison-info-text,
.comparison-module.text-color-dark .comparison-info-item__text {
  color: var(--text-primary-base, #023E84) !important;
}
.comparison-module.text-color-dark .comparison-table__label-cell,
.comparison-module.text-color-dark .comparison-table__col-text {
  color: var(--text-primary-base, #023E84) !important;
}

.comparison-header {
  text-align: center;
  margin-bottom: var(--spacing-scalable-3xl, 48px);
}
@media (max-width: 768px) {
  .comparison-header {
    margin-bottom: var(--spacing-scalable-m, 12px);
    padding: 0 var(--spacing-non-scalable-l, 24px);
  }
}

.comparison-headline {
  color: var(--text-primary-base, #023E84);
  /* heading-2XL */
  font-family: var(--font-heading-2XL-family, Geologica, sans-serif);
  font-size: var(--font-heading-2XL-size, 48px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-heading-2XL-line-height, 56px); /* 116.667% */
  letter-spacing: var(--font-heading-2XL-tracking, 0);
  text-align: left;
}
@media (max-width: 768px) {
  .comparison-headline {
    font-size: 32px;
    line-height: 40px;
  }
}

.comparison-table-wrapper {
  background-color: var(--surface-neutral-soft, #F9FAFB);
  border-radius: var(--radius-non-scalable-xs, 8px);
  padding: var(--spacing-scalable-xl, 40px);
  margin-bottom: var(--spacing-scalable-3xl, 48px);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .comparison-table-wrapper {
    padding: 8px 0px;
  }
}
.comparison-table-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(140px + var(--spacing-scalable-xl, 40px) + 32px);
  background-color: var(--surface-neutral-base-inversed, #FFFFFF);
  border-radius: 0 var(--radius-non-scalable-xs, 8px) var(--radius-non-scalable-xs, 8px) 0;
  box-shadow: -40px 0 66px -32px rgba(0, 0, 0, 0.12);
  z-index: 0;
}
@media (max-width: 768px) {
  .comparison-table-wrapper::after {
    width: 76px;
  }
}

.comparison-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 1;
}
.comparison-table thead:nth-child(2) {
  padding: 0 var(--spacing-non-scalable-5xl, 64px) var(--spacing-scalable-m, 24px) 0;
}
@media (max-width: 768px) {
  .comparison-table thead:nth-child(2) {
    padding-right: var(--spacing-non-scalable-m, 16px);
  }
}
.comparison-table__label-col {
  width: auto;
  text-align: left;
}
.comparison-table__no-spacing-col {
  padding: 0%;
  width: 24px;
  margin: 0px;
}
.comparison-table__data-col {
  width: 140px;
  text-align: center;
}
@media (max-width: 768px) {
  .comparison-table__data-col {
    width: 60px;
  }
}
.comparison-table__data-col--1 {
  padding: 0 var(--spacing-non-scalable-5xl, 64px) var(--spacing-scalable-m, 24px) 0;
}
@media (max-width: 768px) {
  .comparison-table__data-col--1 {
    padding-right: 8px;
  }
}
.comparison-table__data-col--2 {
  padding: 0 0 var(--spacing-scalable-m, 24px) 0;
  vertical-align: top;
}
@media (max-width: 768px) {
  .comparison-table__data-col--2 {
    padding: 0 8px 12px 0;
    padding-left: 8px !important;
  }
}
.comparison-table .comparison-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 140px;
}
@media (max-width: 768px) {
  .comparison-table .comparison-logo-badge {
    height: 22px;
    width: 60px;
  }
}
.comparison-table .comparison-table__col-image {
  max-width: 140px;
  max-height: 40px;
  height: auto;
  width: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .comparison-table .comparison-table__col-image {
    max-width: 60px;
    max-height: 22px;
  }
}
.comparison-table .comparison-table__col-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface-text-primary-deep, #000000);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .comparison-table .comparison-table__col-text {
    font-size: 9px;
  }
}
.comparison-table .comparison-table__first-col-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-text-primary-deep, #000000);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .comparison-table .comparison-table__first-col-label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}
.comparison-table tbody tr {
  border-bottom: 1px solid var(--on-surface-border-primary-deep-inversed, #E0E5EA);
}
.comparison-table tbody tr:last-child {
  border-bottom: none;
}
.comparison-table tbody td {
  padding: var(--spacing-non-scalable-s, 12px) 0;
}
@media (max-width: 768px) {
  .comparison-table tbody td {
    padding: 8px 8px;
    padding-right: 0;
  }
}
.comparison-table__label-cell {
  text-align: left;
  font-family: var(--font-body-m-family, "Geologica", sans-serif);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-neutral-base, #000000);
  padding-right: var(--spacing-non-scalable-l, 24px);
  max-width: 400px;
}
@media (max-width: 768px) {
  .comparison-table__label-cell {
    max-width: none;
    flex: 1 0 0;
    padding-right: 8px;
  }
}
.comparison-table__data-cell {
  width: 140px;
  text-align: center;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .comparison-table__data-cell {
    width: 60px;
  }
}
.comparison-table__data-cell--col1 {
  padding-right: var(--spacing-non-scalable-5xl, 64px);
}
@media (max-width: 768px) {
  .comparison-table__data-cell--col1 {
    padding-right: 8px;
  }
}
.comparison-table__text-content {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-neutral-base, #000000);
  line-height: 1.4;
  padding: 4px 8px;
}
@media (max-width: 768px) {
  .comparison-table__text-content {
    font-size: 11px;
    padding: 2px 4px;
  }
}
.comparison-table__icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-non-scalable-round, 1000px);
  padding: var(--spacing-non-scalable-3xs, 2px);
  position: relative;
}
.comparison-table__icon-wrapper svg {
  width: 20px;
  height: 20px;
  color: var(--on-surface-icon-primary-base-inversed, #FFFFFF);
}
.comparison-table__icon-wrapper--check {
  background-color: var(--surface-primary-deep, #022F67);
}
.comparison-table__icon-wrapper--cross, .comparison-table__icon-wrapper--minus {
  background-color: var(--surface-primary-muted-inversed, #C3C9D2);
}
.comparison-table__icon-wrapper--cross svg, .comparison-table__icon-wrapper--minus svg {
  color: var(--on-surface-icon-primary-base-inversed, #FFFFFF);
}
.comparison-table__asterisk {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary-base, #023E84);
}

.comparison-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-scalable-m, 16px);
}
@media (max-width: 768px) {
  .comparison-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-non-scalable-l, 24px);
    padding: 0;
  }
}

@media (max-width: 768px) {
  .mobile-buttons-above .comparison-footer {
    flex-direction: column-reverse;
  }
}

.layout-two-rows .comparison-footer {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-scalable-m, 16px);
}
.layout-two-rows .comparison-info-items {
  justify-content: center;
}
.layout-two-rows .comparison-buttons {
  justify-content: center;
}
.layout-two-rows.desktop-buttons-above .comparison-footer {
  flex-direction: column-reverse;
}
.layout-two-rows.desktop-buttons-below .comparison-footer {
  flex-direction: column;
}

.comparison-info-items {
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-l, 24px);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .comparison-info-items {
    justify-content: start;
    gap: 12px 24px;
    max-width: 325px;
    margin: 0 auto;
  }
}

.comparison-info-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-non-scalable-xs, 8px);
}
.comparison-info-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comparison-info-item__icon svg {
  width: 24px;
  height: 24px;
}
.comparison-info-item__icon .comparison-info-icon--leaf {
  color: #388E3C;
}
.comparison-info-item__icon .comparison-info-icon--shield,
.comparison-info-item__icon .comparison-info-icon--check-circle {
  color: #FA7D19;
}
.comparison-info-item__text {
  font-family: var(--font-label-m-family, "Geologica", sans-serif);
  font-size: var(--font-label-M-font-size, 16px);
  line-height: var(--font-label-M-line-height, 24px);
  color: var(--text-primary-base, #023E84);
}
@media (max-width: 768px) {
  .comparison-info-item__text {
    letter-spacing: var(--font-label-S-tracking, -0.5px);
  }
}

.comparison-buttons {
  display: flex;
  gap: var(--spacing-scalable-s, 16px);
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .comparison-buttons {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-scalable-s, 8px);
  }
}

.comparison-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--spacing-non-scalable-s, 12px) var(--spacing-non-scalable-m, 16px);
  border-radius: var(--radius-non-scalable-round, 1000px);
  font-family: var(--font-label-m-family, "Geologica", sans-serif);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: none;
  position: relative;
  z-index: 1;
}
@media (max-width: 576px) {
  .comparison-btn {
    width: 100%;
  }
}
.comparison-btn:focus, .comparison-btn:focus-visible {
  outline: 3px solid var(--surface-primary-base, #023E84);
  outline-offset: 2px;
}
.comparison-btn .btn-label {
  padding: 0 var(--spacing-non-scalable-xs, 8px);
  pointer-events: none;
}
.comparison-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}
.comparison-btn.btn--primary {
  background-color: var(--surface-primary-base, #023E84);
  color: var(--on-surface-text-primary-base-inversed, #FFFFFF);
}
.comparison-btn.btn--primary svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--primary:hover {
  background-color: var(--surface-primary-bold, #022F67);
}
.comparison-btn.btn--primary:active {
  background-color: var(--surface-primary-deep, #011D40);
}
.comparison-btn.btn--secondary {
  background-color: transparent;
  color: var(--on-surface-text-primary-base, #023E84);
  border: 1px solid var(--on-surface-border-primary-base, #023E84);
}
.comparison-btn.btn--secondary svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--secondary:hover {
  background-color: var(--surface-secondary-bold, #F2F5F9);
}
.comparison-btn.btn--secondary:active {
  background-color: var(--surface-secondary-deep, #E5EBF5);
}
.comparison-btn.btn--tertiary {
  background-color: transparent;
  color: var(--on-surface-text-primary-base, #023E84);
}
.comparison-btn.btn--tertiary svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--tertiary:hover {
  background-color: var(--surface-secondary-muted, #F9FAFB);
}
.comparison-btn.btn--tertiary:active {
  background-color: var(--surface-secondary-muted-inversed, #E5EBF5);
}
.comparison-btn.btn--primary-inversed {
  background-color: var(--surface-secondary-base, #FFFFFF);
  color: var(--on-surface-text-primary-base, #023E84);
}
.comparison-btn.btn--primary-inversed svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--primary-inversed:hover {
  background-color: var(--surface-secondary-bold, #F2F5F9);
}
.comparison-btn.btn--primary-inversed:active {
  background-color: var(--surface-secondary-deep, #E5EBF5);
}
.comparison-btn.btn--secondary-inversed {
  background-color: transparent;
  color: var(--on-surface-text-primary-base, #023E84);
  border: 1px solid var(--on-surface-border-primary-base, #023E84);
}
.comparison-btn.btn--secondary-inversed svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--secondary-inversed:hover {
  background-color: var(--surface-secondary-muted, #F9FAFB);
}
.comparison-btn.btn--secondary-inversed:active {
  background-color: var(--surface-secondary-muted-inversed, #E5EBF5);
}
.comparison-btn.btn--tertiary-inversed {
  background-color: transparent;
  color: var(--on-surface-text-primary-base, #023E84);
}
.comparison-btn.btn--tertiary-inversed svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--tertiary-inversed:hover {
  background-color: var(--surface-secondary-muted, #F9FAFB);
}
.comparison-btn.btn--tertiary-inversed:active {
  background-color: var(--surface-secondary-muted-inversed, #E5EBF5);
}
.comparison-btn.btn--outline-primary {
  background-color: transparent;
  color: var(--on-surface-text-primary-base, #023E84);
  border: 1px solid var(--on-surface-border-primary-base, #023E84);
}
.comparison-btn.btn--outline-primary svg {
  color: var(--on-surface-icon-primary-base, #023E84);
}
.comparison-btn.btn--outline-primary:hover {
  background-color: var(--surface-primary-bold-inversed, #F2F5F9);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comparison-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comparison-btn:focus-visible {
  outline: 3px solid var(--surface-primary-base, #023E84);
  outline-offset: 2px;
  border-radius: var(--radius-non-scalable-round, 1000px);
}
.comparison-btn.btn--primary:focus-visible {
  outline-color: var(--surface-primary-deep, #022F67);
}
.comparison-btn.btn--secondary:focus-visible {
  outline-color: var(--surface-primary-base, #023E84);
}
.comparison-module.bg-color-blue .comparison-btn:focus-visible {
  outline-color: #FFE620;
  outline-width: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .comparison-btn {
    transition: none;
  }
}
@media (prefers-contrast: high) {
  .comparison-table__icon-wrapper {
    border: 2px solid currentColor;
  }
  .comparison-btn {
    border-width: 2px;
  }
  .comparison-btn:focus-visible {
    outline-width: 4px;
  }
}
/* ============================================
   Vorteile Slider Module
   Horizontal scrolling tiles with scroll-based animation
   ============================================ */
.vorteile-slider {
  padding: var(--spacing-scalable-l, 32px) 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  max-width: 1416px;
  margin: 0 auto;
}

.vorteile-slider__container {
  margin: 0 auto;
}

/* Header */
.vorteile-slider__header {
  text-align: center;
  margin-bottom: var(--spacing-scalable-l, 32px);
}

.vorteile-slider__headline {
  font-family: var(--font-heading-l-family, "Geologica", sans-serif);
  font-size: var(--font-heading-l-font-size, 32px);
  font-weight: 700;
  line-height: var(--font-heading-l-line-height, 40px);
  color: var(--text-primary-base, #023e84);
  margin: 0;
}

.vorteile-slider__headline.h2 {
  font-family: var(--font-heading-h2-family, "Geologica", sans-serif);
  font-size: var(--font-heading-h2-font-size, 32px);
  font-weight: var(--font-heading-h2-font-weight, 700);
  line-height: var(--font-heading-h2-line-height, 40px);
}

.vorteile-slider__headline.h3 {
  font-family: var(--font-heading-h3-family, "Geologica", sans-serif);
  font-size: var(--font-heading-h3-font-size, 24px);
  font-weight: var(--font-heading-h3-font-weight, 700);
  line-height: var(--font-heading-h3-line-height, 32px);
}

/* Wrapper */
.vorteile-slider__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scalable-xs, 12px);
}

/* Row */
.vorteile-slider__row {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.vorteile-slider__track {
  display: flex;
  gap: var(--spacing-scalable-xs, 12px);
  will-change: transform;
}

/* Card */
.vorteile-slider__card {
  flex-shrink: 0;
  width: 226px;
}

.vorteile-slider__card-inner {
  background-color: var(--surface-neutral-base-inversed, white);
  border-radius: var(--radius-non-scalable-xs, 8px);
  height: 64px;
  padding: var(--spacing-non-scalable-s, 12px);
  display: flex;
  align-items: center;
  gap: var(--spacing-non-scalable-s, 12px);
  position: relative;
  overflow: hidden;
}

/* Text Container */
.vorteile-slider__card-text-container {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.vorteile-slider__card-text {
  font-family: var(--font-body-s-family, "Geologica", sans-serif);
  font-size: var(--font-body-s-font-size, 14px);
  font-weight: 400;
  line-height: var(--font-body-s-line-height, 20px);
  color: var(--text-primary-base, #023e84);
  margin: 0;
  word-break: break-word;
  text-align: left;
}

/* Icon */
.vorteile-slider__card-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 43.5px;
  height: 43.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vorteile-slider__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vorteile-slider__card-icon svg {
  width: 100%;
  height: 100%;
  fill: white;
}

/* Color Background (Yellow Circle) */
.vorteile-slider__card-color-bg {
  position: absolute;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  left: 163px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Image (optional) */
.vorteile-slider__card-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.vorteile-slider__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient Fades */
.vorteile-slider__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  z-index: 1;
}

.vorteile-slider__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--bg-color, #f3f3f3), transparent);
}

.vorteile-slider__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--bg-color, #f3f3f3), transparent);
}

/* Responsive */
@media (max-width: 768px) {
  .vorteile-slider {
    padding: var(--spacing-scalable-m, 24px) 0;
  }
  .vorteile-slider__headline {
    font-size: 24px;
    line-height: 32px;
  }
  .vorteile-slider__card {
    width: 200px;
  }
  .vorteile-slider__card-inner {
    height: 56px;
    padding: 8px;
  }
  .vorteile-slider__card-text {
    font-size: 14px;
    line-height: 18px;
  }
  .vorteile-slider__card-icon {
    width: 36px;
    height: 36px;
  }
  .vorteile-slider__card-color-bg {
    width: 120px;
    height: 120px;
    left: 140px;
  }
  .vorteile-slider__fade {
    width: 80px;
  }
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .vorteile-slider__card {
    width: 210px;
  }
}
/* Hide extra rows on mobile/desktop based on data attributes */
@media (min-width: 769px) {
  .vorteile-slider[data-rows-desktop="1"] .vorteile-slider__row:nth-child(n+2) {
    display: none;
  }
  .vorteile-slider[data-rows-desktop="2"] .vorteile-slider__row:nth-child(n+3) {
    display: none;
  }
}
@media (max-width: 768px) {
  .vorteile-slider[data-rows-mobile="1"] .vorteile-slider__row:nth-child(n+2) {
    display: none;
  }
  .vorteile-slider[data-rows-mobile="2"] .vorteile-slider__row:nth-child(n+3) {
    display: none;
  }
  .vorteile-slider[data-rows-mobile="3"] .vorteile-slider__row:nth-child(n+4) {
    display: none;
  }
}
body {
  overflow-x: hidden;
}

@media (min-width: 1201px) {
  header.container {
    overflow: visible;
  }
}
@media (max-width: 1200px) {
  header.container {
    overflow: hidden !important;
  }
}

.glassy-menu-background {
  font-family: Geologica, sans-serif;
  padding: var(--spacing-non-scalable-M, 16px) var(--spacing-non-scalable-L, 24px);
  border-radius: var(--radius-non-scalable-XS, 8px);
  overflow: visible;
  height: 84px;
}
@media (max-width: 576px) {
  .glassy-menu-background {
    padding: var(--spacing-non-scalable-M, 16px);
  }
}
.glassy-menu-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

#topnav {
  position: relative;
  top: -98px;
  margin-bottom: -98px;
  transition: top 0.3s ease, margin-bottom 0.3s ease;
  font-family: Geologica, sans-serif;
  padding: var(--spacing-non-scalable-M, 16px) var(--spacing-non-scalable-L, 24px);
  border-radius: var(--radius-non-scalable-XS, 8px);
}
@media (max-width: 576px) {
  #topnav {
    padding: var(--spacing-non-scalable-M, 16px);
  }
}
@media (max-width: 1200px) {
  header.header-scrolled #topnav {
    margin-bottom: 0;
  }
}
@media (max-width: 576px) {
  #topnav .nav-wiso-steuer-logo {
    max-width: 210px;
  }
}
#topnav .nav-wiso-steuer-logo {
  /* legacy iphones */
}
@media (max-width: 400px) {
  #topnav .nav-wiso-steuer-logo {
    max-width: 180px;
  }
}
#topnav {
  /* 

  Mainmenu Desktop & Mobile

  */
}
#topnav ul {
  /*
  1. Desktop Menu
  */
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing-non-scalable-XS, 8px);
  font-family: Geologica, sans-serif;
}
@media (min-width: 1201px) {
  #topnav ul li {
    padding-left: 0;
    position: relative;
  }
  #topnav ul li > a {
    font-family: Geologica, sans-serif;
    color: var(--text-primary-base, #023E84);
    text-decoration: none;
    font-size: var(--font-label-M-font-size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-label-M-line-height, 24px);
    /* 150% */
    letter-spacing: var(--font-label-M-tracking, 0);
    padding: var(--spacing-spacing-12px, 12px) var(--spacing-non-scalable-M, 16px);
    transition: all 0.3s ease-in-out;
    border-radius: var(--radius-non-scalable-round, 1000px);
    align-items: center;
    white-space: nowrap;
  }
  #topnav ul li > a:hover {
    background-color: #f5f5f5;
    transition: all 0.3s ease-in-out;
  }
  #topnav ul li.menu-item-has-children > a::after {
    content: "";
    background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/chevron-down-blue.svg");
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
  }
  #topnav ul li.menu-item-has-children > a:hover::after, #topnav ul li.menu-item-has-children > a.open::after {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
  }
  #topnav ul .sub-menu.open {
    transition: max-height 0.3s ease-in-out;
    max-height: fit-content;
    transition: all 0.3s ease-in-out;
    visibility: visible;
    opacity: 1;
    background-color: #fff !important;
  }
}
#topnav ul .sub-menu {
  position: absolute;
  top: 90px;
  opacity: 0;
  visibility: hidden;
  height: auto;
  max-height: 1px;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-non-scalable-L, 24px) 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-non-scalable-S, 12px);
  background: linear-gradient(0deg, var(--surface-primary-transparent-light-inversed, rgba(255, 255, 255, 0.75)) 0%, var(--surface-primary-transparent-light-inversed, rgba(255, 255, 255, 0.75)) 100%), var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05)) !important;
  backdrop-filter: blur(40px);
}
#topnav ul .sub-menu li {
  padding: 0 var(--spacing-non-scalable-L, 24px) !important;
}
#topnav ul .sub-menu li a {
  padding: 10px 20px;
  display: block;
  font-size: 16px;
  text-decoration: none;
}
#topnav ul {
  /*
      2. Mobile Menu
  */
}
@media (max-width: 1200px) {
  #topnav ul {
    list-style: none;
    position: fixed;
    margin: 0;
    padding: 0;
    margin-left: 0 !important;
    margin-top: 0;
    top: 0;
    right: 100%;
    bottom: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background-color: #F3F3F3;
    width: 100%;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-non-scalable-L, 24px) var(--spacing-non-scalable-XS, 8px) var(--spacing-non-scalable-M, 16px) var(--spacing-non-scalable-XS, 8px);
    z-index: 1040;
  }
  #topnav ul.open {
    right: 0;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex !important;
    padding-bottom: 80px;
  }
  #topnav ul li {
    margin-bottom: 44px;
    padding-left: 0;
  }
  #topnav ul li > a {
    white-space: nowrap;
    color: var(--text-primary-base, #023E84);
    text-decoration: none;
    font-size: var(--font-label-M-font-size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-label-M-line-height, 24px);
    /* 150% */
    letter-spacing: var(--font-label-M-tracking, 0);
    padding: var(--spacing-spacing-12px, 12px) var(--spacing-non-scalable-M, 16px);
    transition: all 0.3s ease-in-out;
    border-radius: var(--radius-non-scalable-round, 1000px);
    transform: rotate(0deg);
  }
  #topnav ul li.menu-item-has-children > a::after {
    content: " ";
    background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/chevron-down-blue.svg");
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
    transform: rotate(0deg);
  }
  #topnav ul li.menu-item-has-children > a.open::after {
    transform: rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #topnav ul li.anmelden {
    padding-top: 40px;
    margin-bottom: 20px;
    border-top: 1px solid rgb(224, 229, 234);
  }
  #topnav ul li.anmelden a {
    background-color: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
    color: #023E84;
    transition: all 0.3s ease-in-out;
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }
  #topnav ul li.anmelden a:hover {
    border-radius: var(--radius-non-scalable-round, 1000px);
    background: var(--surface-primary-transparent-bold, rgba(2, 62, 132, 0.4));
    transition: all 0.3s ease-in-out;
  }
  #topnav ul li.anmelden a:before {
    content: "";
    background-image: url(/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/account-circle.svg);
    margin-right: 8px;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
  #topnav ul li.kaufen {
    padding-top: 0;
    padding-right: 0;
    width: 100%;
    z-index: 1;
  }
  #topnav ul li.kaufen a {
    transition: all 0.3s ease-in-out;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    background-color: #023E84;
    color: #fff;
    transition: all 0.3s ease-in-out;
  }
  #topnav ul li.kaufen a:hover {
    background: var(--surface-primary-bold, #011E42);
    transition: all 0.3s ease-in-out;
  }
  #topnav ul li.kaufen a::after {
    content: "";
    background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/arrow-right-blue.svg");
    background-color: #fff;
    margin-left: 8px;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 50%;
  }
  #topnav ul .sub-menu {
    position: static;
    visibility: hidden;
    opacity: 0;
    height: 0;
    max-height: 1px;
    transition: opacity 100ms ease, max-height 0ms ease 200ms;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    margin: 0;
    right: 0;
    border-radius: var(--radius-non-scalable-S, 12px);
    background: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
    transform: translateX(0);
  }
  #topnav ul .sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }
  #topnav ul .sub-menu li:first-child {
    margin-top: var(--spacing-non-scalable-L, 24px) !important;
  }
  #topnav ul .sub-menu li:last-child {
    margin-bottom: var(--spacing-non-scalable-L, 24px) !important;
  }
  #topnav ul .sub-menu li a {
    white-space: nowrap;
    display: block;
    font-size: 16px;
    text-decoration: none;
    padding: 10px var(--spacing-non-scalable-L, 24px);
    padding-top: 0 !important;
  }
  #topnav ul .sub-menu li.ai {
    padding-left: var(--spacing-non-scalable-L, 24px) !important;
    padding-right: var(--spacing-non-scalable-L, 24px) !important;
  }
  #topnav ul .sub-menu li.ai a {
    padding-top: 10px !important;
    justify-content: center;
  }
  #topnav ul .sub-menu li.ai a::after {
    margin-left: 20px;
  }
  #topnav ul .sub-menu.open {
    padding: 0 !important;
    transition: max-height 200ms ease-in, opacity 0ms ease 100ms;
    max-height: 1000px;
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-top: 12px;
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-non-scalable-L, 24px);
    background: rgba(2, 62, 132, 0.05) !important;
  }
}
#topnav #headerbuttons {
  gap: var(--spacing-non-scalable-XS, 8px);
}
#topnav .btn-default {
  text-decoration: none;
  border-radius: var(--radius-non-scalable-round, 1000px);
  padding: var(--spacing-non-scalable-S, 12px) var(--spacing-non-scalable-M, 16px);
  white-space: nowrap;
}
@media (max-width: 1400px) {
  #topnav .btn-default.only-icon-on-mobile {
    padding: 12px;
  }
  #topnav .btn-default.only-icon-on-mobile span {
    display: none;
  }
  #topnav .btn-default.only-icon-on-mobile::after {
    margin-left: 0 !important;
  }
  #topnav .btn-default.only-icon-on-mobile::before {
    margin-right: 0;
  }
}
#topnav .btn-light {
  background-color: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
  color: #023E84;
  transition: all 0.3s ease-in-out;
}
#topnav .btn-light:hover {
  border-radius: var(--radius-non-scalable-round, 1000px);
  background: var(--surface-primary-transparent-bold, rgba(2, 62, 132, 0.4));
  transition: all 0.3s ease-in-out;
}
#topnav .btn-light.contrastsettings:hover {
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/contrast.svg");
  background-size: 24px;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--radius-radius-round, 1000px);
  background-color: rgba(2, 62, 132, 0.15);
}
#topnav .btn-dark {
  background-color: #023E84;
  color: #fff;
  transition: all 0.3s ease-in-out;
}
#topnav .btn-dark:hover {
  background: var(--surface-primary-bold, #011E42);
  transition: all 0.3s ease-in-out;
}
#topnav .btn-dark.arrow-right::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/arrow-right-blue.svg");
  background-color: #fff;
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
}
#topnav .contrastsettings {
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/contrast.svg");
  background-size: 24px;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--radius-radius-round, 1000px);
  background-color: var(--surface-primary-transparent-base, rgba(2, 62, 132, 0.05));
}
#topnav .login::before {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/account-circle.svg");
  margin-right: 8px;
  width: 24px;
  height: 24px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

#menu-mainmenu li.btn-dark-inversed.ai a {
  border: 2px solid #023E84;
  color: #023E84;
  justify-content: center;
}
#menu-mainmenu li.btn-dark-inversed.ai a::after {
  content: "";
  background-image: url("/wp-content/themes/buhl-marketing-acf-2027/assets/images/button/icons/steuer-gpt.svg");
  background-color: #023E84;
  margin-left: 0px;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  margin-left: 10px;
}

.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.menu-icon {
  width: 48px;
  height: 48px;
  display: block;
}

/* Grundzustand der Linien */
.line {
  fill: #fff;
  transform-origin: 24px 24px;
  /* Mittelpunkt des SVG */
  height: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hover: Hamburger -> X */
/*.menu-toggle:hover .line-top {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle:hover .line-middle {
  opacity: 0;
}

.menu-toggle:hover .line-bottom {
  transform: translateY(-6px) rotate(-45deg);
} 

/* Hover: Hamburger -> =
.menu-toggle:hover .line-top {
    transform: translateY(3px);
}

.menu-toggle:hover .line-middle {
    opacity: 0;
}

.menu-toggle:hover .line-bottom {
    transform: translateY(-3px);
}
*/
.menu-toggle.open .line-top {
  transform: translateY(8px) rotate(45deg) translateX(-5px);
}

.menu-toggle.open .line-middle {
  opacity: 0;
}

.menu-toggle.open .line-bottom {
  transform: translateY(-7px) rotate(-45deg) translateX(-4px);
}

#buhl-contrast-button {
  display: none;
}

img.menu-item-icon {
  margin-left: 8px;
}

@media (max-width: 1200px) {
  .flex-xl-row {
    flex-direction: column !important;
  }
  .d-xl-none {
    display: flex !important;
  }
  .d-xl-flex {
    display: none !important;
  }
  .d-none.d-xl-flex {
    display: none !important;
  }
}
@media (min-width: 1201px) {
  .flex-xl-row {
    flex-direction: row !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-none.d-xl-flex {
    display: flex !important;
  }
  .d-flex.d-xl-none {
    display: none !important;
  }
}
@media (min-width: 1201px) and (max-width: 1400px) {
  .btn-dark.arrow-right.d-xl-flex {
    display: none !important;
  }
}

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