@charset "UTF-8";
@layer reset, base, layout, components, pages, utilities, overrides;
/*
reset       : browser defaults als baseline setzen
layout      : strukturelles Grundgerüst, "Skelett"
components  : Wiederverwendbare UI-Elemente, wie FAQ, Buttons, hero-bereiche, Banner
pages       : "seitengebundene" Sonderregeln, keine eigenständigen Components aber deren Overwrites
utilities   : Wiederverwendbare kleine Helper, eher sparsam zu verwenden, aber "eyebrow", visually-hidden, hidden, text-center etc
overrides   : Eher "Notfall", für 3rd-Party-Code oder explizite/bewusstes Überschreiben. Möglichst klein
*/
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  img,
  picture,
  svg,
  canvas {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  textarea {
    resize: vertical;
  }
  table {
    border-collapse: collapse;
  }
  ul,
  ol {
    padding-inline-start: 0;
    margin: 0;
  }
  a {
    text-decoration: none;
    color: var(--color-text);
  }
  fieldset {
    margin: 0;
    padding: 0;
  }
}
@layer base {
  html {
    font-size: 10px;
  }
  body {
    font-size: 1.6rem;
  }
  .font-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
  }
  .primary {
    color: var(--color-brand-primary);
  }
  .soft {
    color: var(--color-text-soft);
  }
  .center {
    text-align: center;
  }
  .bp\:none {
    display: none;
  }
  @media (min-width: 450px) {
    .bp-xsm\:none {
      display: none;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:none {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:none {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:none {
      display: none;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:none {
      display: none;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:none {
      display: none;
    }
  }
  @media (min-width: 450px) {
    .bp-xsm\:block {
      display: block;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:block {
      display: block;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:block {
      display: block;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:block {
      display: block;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:block {
      display: block;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:block {
      display: block;
    }
  }
  @media (min-width: 450px) {
    .bp-xsm\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:inline-block {
      display: inline-block;
    }
  }
  img {
    -webkit-user-drag: none;
  }
  p {
    cursor: text;
  }
}
/*
  Unit Guidance
  rem -> globale Größen / Spacing / Typografie
  em  -> lokale Skalierung innerhalb einer Komponente
  %   -> relative Dimensionen
  px  ->  Dinge, die wirklich physisch klein bleiben sollen (wie border 1px)
*/
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #c72914;
  --color-brand-primary: #1d4ed8;
  --color-brand-primary-dark: #3c4b77;
  --color-brand-secondary: #0ba690;
  --color-brand-tertiary: #8c52ff;
  --color-special: #ffc940;
  --color-brand-primary-soft: rgba(29, 78, 216, 0.2);
  --color-brand-primary-xsoft: #ebf1ff;
  --color-brand-secondary-soft: rgba(11, 166, 144, 0.2);
  --color-brand-tertiary-soft: rgba(140, 82, 255, 0.2);
  --color-special-soft: rgba(255, 201, 64, 0.2);
  --color-brand-primary-soft-opaque: #D1DBF7;
  --color-brand-secondary-soft-opaque: #CEEDE8;
  --color-brand-tertiary-soft-opaque: #E8DCFF;
  --color-text: #060b27;
  --color-text-accent: #1d4ed8;
  --color-text-soft: #585858;
  --color-surface: #ffffff;
  --color-surface-contrast: #f0f0f0;
  --color-surface-dark: rgba(34, 34, 34, 0.95);
  --color-surface-translucent: rgba(240, 240, 240, 0.93);
  --color-surface-light-translucent: rgba(255, 255, 255, 0.93);
  --color-surface-dark-soft: rgba(34, 34, 34, 0.1);
  --color-frame-light: #aaa;
  --gradient-brand-angle: 90deg;
  --gradient-brand: linear-gradient(var(--gradient-brand-angle),
      var(--color-brand-primary),
      var(--color-brand-secondary));
  --shadow-dark: 0 5px 15px rgba(6, 11, 39, 0.2);
}

@layer utilities {
  .text-default {
    color: var(--color-text);
  }
  .text-accent {
    color: var(--color-text-accent);
  }
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-contrast {
    background-color: var(--color-surface-contrast);
  }
  .bg-brand-gradient {
    background: var(--gradient-brand);
  }
}
@layer base {
  @font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fonts/quicksand-variable.woff2") format("woff2");
  }
  @font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  }
}
@layer base {
  body {
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--color-text);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Quicksand", Arial, sans-serif;
    font-weight: 700;
    color: var(--color-text);
  }
  h1 {
    font-size: 3rem;
    line-height: 3.6rem;
  }
  @media (min-width: 600px) {
    h1 {
      font-size: 4rem;
      line-height: 4.8rem;
    }
  }
  h2 {
    font-size: 3rem;
    line-height: 3.6rem;
  }
  h3 {
    font-size: 2.4rem;
    line-height: 3rem;
  }
  p,
  label {
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
  }
  .small {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
  .mini {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
}
@layer tokens {
  :root {
    --speed-fast: 250ms;
    --speed-med: 500ms;
    --speed-slow: 1000ms;
  }
}
/*  LAYOUT #################################### */
:root {
  --section-padding: 3rem;
  --section-gap: 4rem;
}

@layer layout {
  .container {
    padding: var(--section-padding);
    max-width: min(100%, 1024px + var(--section-padding) * 2);
    margin-left: auto;
    margin-right: auto;
  }
  .visually-hidden,
  .selection__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .bg-contrast {
    background-color: var(--color-surface-contrast);
  }
  .section--contrast {
    background-color: var(--color-surface-contrast);
    padding-block: calc(var(--section-padding) * 2);
    margin-block: var(--section-padding);
  }
  .section--contrast .container {
    padding-block: 0;
  }
  .button--accent {
    max-width: 100%;
    width: var(--benefit-width);
    padding: 1rem 0;
  }
}
/*  Allgemeine Form Layout/Komponente ##################################### */
@layer components {
  :root {
    --form-slide-speed: var(--speed-fast);
    --form-max-width: 662px;
  }
  @media (min-width: 1024px) {
    :root {
      --form-max-width: 1090px;
    }
  }
  .form {
    background-color: var(--color-surface-translucent);
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    position: relative;
    max-width: var(--form-max-width);
    margin-left: auto;
    margin-right: auto;
  }
  .form__message {
    text-align: center;
    color: var(--color-error);
  }
  .form__message[role=alert] {
    color: var(--color-error);
  }
  .form .fancy-list {
    background-color: inherit;
  }
  .form__chrome {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--form-slide-speed) ease, visibility 0s;
  }
  .form__chrome-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    transition: transform var(--form-slide-speed) ease, opacity var(--form-slide-speed) ease;
  }
  .form__chrome {
    /* Während JS ein Element zunächst "teleportiert", darf nichts animieren */
  }
  .form__chrome.is-positioning, .form__chrome.is-immediate {
    transition: none;
  }
  .form__chrome.is-positioning .form__chrome-inner, .form__chrome.is-immediate .form__chrome-inner {
    transition: none;
  }
  .form__chrome {
    /* Start-/Endzustände: gleichzeitig horizontal bewegen UND den belegten Platz einklappen */
  }
  .form__chrome.from-right, .form__chrome.from-left, .form__chrome.to-right, .form__chrome.to-left, .form__chrome.is-hidden {
    grid-template-rows: 0fr;
  }
  .form__chrome.from-right .form__chrome-inner, .form__chrome.from-left .form__chrome-inner, .form__chrome.to-right .form__chrome-inner, .form__chrome.to-left .form__chrome-inner, .form__chrome.is-hidden .form__chrome-inner {
    opacity: 0;
  }
  .form__chrome.from-right .form__chrome-inner, .form__chrome.to-right .form__chrome-inner {
    transform: translateX(100%);
  }
  .form__chrome.from-left .form__chrome-inner, .form__chrome.to-left .form__chrome-inner {
    transform: translateX(-100%);
  }
  .form__chrome.is-hidden {
    visibility: hidden;
    pointer-events: none;
  }
  .form__chrome--eyebrow .form__chrome-inner {
    padding: 2rem 2rem 0;
  }
  @media (min-width: 450px) {
    .form__chrome--eyebrow .form__chrome-inner {
      padding: var(--section-gap) var(--section-gap) 0;
    }
  }
  .form__chrome--footer .form__chrome-inner {
    padding: 0;
  }
  .form__eyebrow {
    line-height: 2rem;
    text-align: center;
    text-wrap: balance;
  }
  .form__submit-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: var(--color-surface-translucent);
  }
  .form__submit-overlay[hidden] {
    display: none;
  }
  .form__submit-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .form__submit-spinner {
    width: 4rem;
    height: 4rem;
    border: 0.4rem solid var(--color-brand-primary-soft);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: form-submit-spin 0.8s linear infinite;
  }
  .form__nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--section-gap);
    max-width: var(--form-max-width);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: max-height var(--speed-fast) ease-in-out, opacity var(--speed-fast) ease-in-out, margin-top var(--speed-fast) ease-in-out;
  }
  .form__nav[data-collapsed] {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }
  .form__nav .nav-button {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-frame-light);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    background: var(--color-surface-translucent);
    transition: opacity var(--speed-fast) ease-in-out, color var(--speed-fast) ease-in-out, background-color var(--speed-fast) ease-in-out, border-color var(--speed-fast) ease-in-out;
  }
  .form__nav .nav-button:disabled {
    opacity: 0.4;
  }
  .form__nav .nav-button.prev {
    padding-right: 2rem;
    padding-left: 1.5rem;
  }
  .form__nav .nav-button.next {
    padding-left: 2rem;
    padding-right: 1.5rem;
  }
  .form__nav .nav-button__icon {
    width: 1rem;
    height: 2rem;
    color: var(--color-text);
    transition: transform var(--speed-med) ease-in-out;
  }
  .form__nav .nav-button:not(:disabled) {
    cursor: pointer;
  }
  .form__nav .nav-button:not(:disabled):hover .nav-button__icon.--right, .form__nav .nav-button:not(:disabled):active .nav-button__icon.--right, .form__nav .nav-button:not(:disabled):focus-visible .nav-button__icon.--right {
    transform: translateX(0.5rem);
  }
  .form__nav .nav-button:not(:disabled):hover .nav-button__icon.--left, .form__nav .nav-button:not(:disabled):active .nav-button__icon.--left, .form__nav .nav-button:not(:disabled):focus-visible .nav-button__icon.--left {
    transform: translateX(-0.5rem);
  }
  .form .privacy {
    font-weight: 400;
  }
  @keyframes form-submit-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .form__submit-spinner {
      animation-duration: 1.6s;
    }
  }
  .input-error {
    margin: 0;
    color: var(--color-error);
    text-wrap: balance;
    margin-left: 0;
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  @media (min-width: 320px) {
    .input-error {
      margin-left: 0.5rem;
    }
  }
  @media (min-width: 450px) {
    .input-error {
      margin-left: 4rem;
      font-size: 1.4rem;
      line-height: 1.6rem;
    }
  }
  @media (min-width: 600px) {
    .input-error {
      margin-left: 0.5rem;
    }
  }
  @media (min-width: 768px) {
    .input-error {
      margin-left: 4rem;
    }
  }
  .input-error {
    opacity: 1;
    transition: opacity var(--speed-fast) ease-in-out;
  }
  .input-error.visible {
    opacity: 1;
  }
  .slider {
    position: relative;
    overflow: clip;
  }
  .slider.is-initialized {
    transition: height var(--form-slide-speed) ease;
  }
  .slider__stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .slider.is-transitioning .slide {
    pointer-events: none;
  }
  .slide {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  .slide__head {
    padding-top: 1rem;
  }
  .slide__body {
    padding-bottom: 2rem;
  }
  .slide__head, .slide__body {
    padding-inline: 2rem;
  }
  @media (min-width: 450px) {
    .slide__head, .slide__body {
      padding-inline: var(--section-gap);
    }
  }
  .slide__message {
    text-align: center;
    color: var(--color-error);
  }
  .slide__message[role=alert] {
    color: var(--color-error);
  }
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0);
    transition: transform var(--form-slide-speed) ease;
  }
  .slide.is-positioning {
    transition: none;
  }
  .slide.is-active, .slide.is-entering, .slide.is-leaving {
    visibility: visible;
  }
  .slide.is-active {
    pointer-events: auto;
  }
  .slide.from-right {
    transform: translateX(100%);
  }
  .slide.from-left {
    transform: translateX(-100%);
  }
  .slide.to-left {
    transform: translateX(-100%);
  }
  .slide.to-right {
    transform: translateX(100%);
  }
  .slide__head {
    gap: 1rem;
    display: flex;
    flex-direction: column;
  }
  .slide__headline {
    text-align: center;
    text-wrap: balance;
  }
  .slide h1,
  .slide h2 {
    line-height: 2.8rem;
    font-size: 2.4rem;
    hyphens: auto;
  }
  @media (min-width: 450px) {
    .slide h1,
    .slide h2 {
      font-size: 3rem;
      line-height: 3.6rem;
    }
  }
  .slide__headline {
    font-size: 3rem;
    font-weight: 600;
  }
  .slide--end-card {
    padding: 0 2rem 0 2rem;
  }
  @media (min-width: 450px) {
    .slide--end-card {
      padding: 2rem var(--section-gap);
    }
  }
  .slide--end-card .slide__container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .slide--end-card .slide__container {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "intro intro" "content visual";
      gap: 2rem;
    }
  }
  @media (min-width: 1024px) {
    .slide--end-card .slide__container {
      grid-template-areas: "intro visual" "content visual";
      align-items: stretch;
    }
  }
  .slide--end-card .slide__intro {
    grid-area: intro;
  }
  .slide--end-card .slide__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .slide--end-card .slide__visual {
    grid-area: visual;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .slide--end-card .slide__headline {
    text-align: left;
  }
  .slide--end-card .button {
    width: 100%;
  }
  @media (min-width: 450px) {
    .slide--end-card .button {
      width: -moz-fit-content;
      width: fit-content;
    }
  }
  .selection-group {
    border: none;
  }
  .contact {
    --input-icon-size: 2rem;
    --input-padding: 1rem;
    --input-inner-height: 2rem;
    --input-state-color: var(--color-frame-light);
    --input-state-background: var(--color-surface);
    --input-gap: 1rem;
  }
  @media (min-width: 1024px) {
    .contact .slide__body {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 465px) 1fr;
      gap: var(--section-gap);
      justify-content: space-between;
    }
  }
  .contact__required-notice {
    text-align: right;
    padding-right: 0.5rem;
  }
  .contact .input-wrapper {
    position: relative;
  }
  .contact .input-wrapper:has(.contact__input:is(:not(:placeholder-shown),
  :-webkit-autofill,
  :-webkit-autofill)) {
    --input-state-color: var(--color-text);
    --input-state-background: var(--color-brand-primary-xsoft);
  }
  .contact .input-wrapper:has(.contact__input:is(:not(:placeholder-shown),
  :autofill,
  :-webkit-autofill)) {
    --input-state-color: var(--color-text);
    --input-state-background: var(--color-brand-primary-xsoft);
  }
  .contact .input-wrapper:has(.contact__input:focus) {
    --input-state-color: var(--color-brand-primary);
  }
  .contact .contact__input {
    border: 1px solid var(--input-state-color);
    color: var(--input-state-color);
    caret-color: var(--input-state-color);
    background-color: var(--input-state-background);
    outline: none;
  }
  .contact .contact__input:-webkit-autofill {
    -webkit-text-fill-color: var(--input-state-color);
    caret-color: var(--input-state-color);
    box-shadow: 0 0 0 1000px var(--input-state-background) inset;
  }
  .contact .contact__input:autofill, .contact .contact__input:-webkit-autofill {
    -webkit-text-fill-color: var(--input-state-color);
    caret-color: var(--input-state-color);
    box-shadow: 0 0 0 1000px var(--input-state-background) inset;
  }
  .contact .input-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .contact .input-field .input-wrapper {
    margin-top: auto;
  }
  .contact .input-field .input-error:not([hidden]) {
    margin-top: auto;
    margin-bottom: var(--input-error-gap);
  }
  .contact .input-field .input-error:not([hidden]) + .input-wrapper {
    margin-top: 0;
  }
  .contact .input-icon {
    position: absolute;
    top: var(--input-padding);
    left: var(--input-padding);
    width: var(--input-icon-size);
    height: var(--input-icon-size);
    color: var(--input-state-color);
  }
  .contact .bottom-group {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: var(--input-gap);
  }
  @media (min-width: 600px) {
    .contact .bottom-group {
      display: grid;
      gap: var(--input-gap);
    }
  }
  .contact .bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--input-gap);
  }
  .contact .submit {
    width: 100%;
    cursor: pointer;
    padding: 1rem;
  }
  .contact__input {
    height: calc(var(--input-inner-height) + var(--input-padding) * 2);
    width: 100%;
    padding: var(--input-padding) var(--input-padding) var(--input-padding) calc(var(--input-icon-size) + var(--input-padding) * 2);
    border-radius: 5px;
    border: 1px solid var(--input-border-color);
  }
  .contact__input:hover, .contact__input:focus-visible, .contact__input:active {
    --input-border-color: var(--color-brand-primary);
  }
  .contact .mb-right {
    display: none;
  }
  @media (min-width: 1024px) {
    .contact .mb-right {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    .contact .mb-right > * {
      min-width: 380px;
      max-width: 380px;
    }
  }
  .contact .contact-slogan {
    display: none;
  }
  @media (min-width: 1024px) {
    .contact .contact-slogan {
      display: block;
    }
  }
  .contact .contact-slogan {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 700;
    color: var(--color-brand-primary);
  }
  .contact__benefits {
    flex-direction: column;
    gap: 1rem;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    background-color: inherit;
    --benefit-content-max-width: 18rem;
  }
  .contact__benefits .fancy-list__value, .contact__benefits .fancy-list__label {
    width: -moz-fit-content;
    width: fit-content;
  }
  .contact__benefits .fancy-list__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: var(--benefit-content-max-width);
  }
  .contact__benefits .fancy-list__icon {
    flex: 0 0 var(--trust-icon-size);
    --trust-icon-color: var(--color-brand-primary);
    --trust-icon-background: var(--color-brand-primary-soft);
  }
  .contact__benefits .fancy-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: -moz-fit-content;
    width: fit-content;
  }
  @media (min-width: 450px) {
    .contact__benefits .fancy-list__item {
      display: grid;
      grid-row: 1/span 3;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
      width: auto;
      text-align: center;
    }
    .contact__benefits .fancy-list__icon {
      grid-row: 1;
      justify-self: center;
    }
    .contact__benefits .fancy-list__content {
      --benefit-content-max-width: auto;
      display: grid;
      grid-row: 2/span 2;
      grid-template-rows: subgrid;
      width: auto;
      justify-items: center;
    }
  }
  @media (min-width: 600px) {
    .contact__benefits {
      padding: 1rem 2rem;
    }
    .contact__benefits .fancy-list__item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: -moz-fit-content;
      width: fit-content;
      text-align: left;
    }
    .contact__benefits .fancy-list__content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: -moz-fit-content;
      width: fit-content;
    }
    .contact__benefits .fancy-list__icon {
      flex: 0 0 var(--trust-icon-size);
    }
  }
  .selections {
    --selection-gap: 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--selection-gap);
  }
  @media (min-width: 1024px) {
    .selections {
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(2, minmax(0, 182px));
    }
  }
  @media (min-width: 1024px) {
    .selections--three {
      grid-template-columns: repeat(3, minmax(0, 182px));
    }
  }
  @media (min-width: 768px) {
    .selections.selections--five {
      display: flex;
    }
    .selections.selections--five .selection__label {
      flex-direction: row;
      gap: 2rem;
      padding: 1.5rem 2rem;
    }
    .selections.selections--five .selection__icon {
      width: 6rem;
      height: 6rem;
      margin-top: 0;
      margin-bottom: 0;
    }
    .selections.selections--five > .selection:last-child:nth-child(odd) {
      display: flex;
    }
  }
  @media (min-width: 1024px) {
    .selections.selections--five {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 182px));
    }
    .selections.selections--five .selection__label {
      flex-direction: column;
      gap: 0;
    }
    .selections.selections--five .selection__icon {
      width: 7rem;
      height: 7rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .selections.selections--five > .selection:last-child:nth-child(odd) {
      grid-column: auto;
      width: auto;
      max-width: none;
      justify-self: stretch;
    }
  }
  @media (min-width: 1024px) {
    .selections--five {
      grid-template-columns: repeat(5, minmax(0, 182px));
    }
  }
  .select-field {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .select-field__control {
    width: 100%;
    padding: 1rem var(--section-gap) 1rem 2rem;
    color: var(--color-brand-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-brand-primary);
    border-radius: 0.5rem;
    font: inherit;
    font-weight: 700;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
  }
  .select-field__control:focus, .select-field__control:focus-visible {
    outline: none;
    box-shadow: none;
  }
  .select-field__chevron {
    --angle: 55deg;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-primary);
    transform: translateY(-60%);
    pointer-events: none;
  }
  .select-field__chevron::before, .select-field__chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 0.3rem;
    background-color: currentColor;
    border-radius: 0.4rem;
    transform-origin: center;
    transform: transform var(--speed-fast) linear, width var(--speed-fast) linear, right var(--speed-fast) linear, left var(--speed-fast) linear;
  }
  .select-field__chevron::before {
    right: 25%;
    transform: rotate(var(--angle));
  }
  .select-field__chevron::after {
    left: 25%;
    transform: rotate(calc(var(--angle) * -1));
  }
  .select-field:has(.select-field__control:open) .select-field__chevron::before {
    animation: chevron-left-open var(--speed-fast) linear forwards;
  }
  .select-field:has(.select-field__control:open) .select-field__chevron::after {
    animation: chevron-right-open var(--speed-fast) linear forwards;
  }
  .select-field:has(.select-field__control:focus:not(:open)) .select-field__chevron::before {
    animation: chevron-left-close var(--speed-fast) linear forwards;
  }
  .select-field:has(.select-field__control:focus:not(:open)) .select-field__chevron::after {
    animation: chevron-right-close var(--speed-fast) linear forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .select-field .select-field__chevron::before, .select-field .select-field__chevron::after {
      animation-duration: 0.01ms !important;
    }
  }
  @keyframes chevron-left-open {
    0% {
      right: 25%;
      width: 2rem;
      transform: rotate(55deg);
    }
    50% {
      right: 44%;
      width: 1.2rem;
      transform: rotate(0deg);
    }
    100% {
      right: 25%;
      width: 2rem;
      transform: rotate(-55deg);
    }
  }
  @keyframes chevron-right-open {
    0% {
      left: 25%;
      width: 2rem;
      transform: rotate(-55deg);
    }
    50% {
      left: 44%;
      width: 1.2rem;
      transform: rotate(0deg);
    }
    100% {
      left: 25%;
      width: 2rem;
      transform: rotate(55deg);
    }
  }
  @keyframes chevron-left-close {
    0% {
      right: 25%;
      width: 2rem;
      transform: rotate(-55deg);
    }
    50% {
      right: 44%;
      width: 1.2rem;
      transform: rotate(0deg);
    }
    100% {
      right: 25%;
      width: 2rem;
      transform: rotate(55deg);
    }
  }
  @keyframes chevron-right-close {
    0% {
      left: 25%;
      width: 2rem;
      transform: rotate(55deg);
    }
    50% {
      left: 44%;
      width: 1.2rem;
      transform: rotate(0deg);
    }
    100% {
      left: 25%;
      width: 2rem;
      transform: rotate(-55deg);
    }
  }
  .inputs-wrapper {
    flex-direction: column;
    display: flex;
    gap: 1rem;
  }
  .mb-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .selection {
    position: relative;
    display: flex;
    flex-direction: row;
    box-shadow: none;
    transition: box-shadow var(--speed-fast) ease-in-out;
  }
  .selection:hover, .selection:active, .selection:focus-visible {
    box-shadow: var(--shadow-dark);
  }
  .selection__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
  }
  .selection__description {
    text-align: left;
  }
  @media (min-width: 320px) {
    .selection__description {
      text-align: center;
    }
  }
  .selection__description {
    color: var(--color-text);
  }
  .selection.is-selected {
    translate: 0 -2px;
    box-shadow: var(--shadow-dark);
    border-width: 3px;
    font-weight: 600;
  }
  .selection__label {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    gap: 1rem;
  }
  @media (min-width: 450px) {
    .selection__label {
      gap: 0.75rem;
    }
  }
  @media (min-width: 450px) {
    .selection__label {
      gap: 2rem;
      padding: 1rem 2rem;
    }
  }
  @media (min-width: 1024px) {
    .selection__label {
      gap: 2rem;
      padding: 2rem;
    }
  }
  .selection__label {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-brand-primary);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--speed-fast) ease, background-color var(--speed-fast) ease, transform var(--speed-fast) ease;
  }
  .selection__icon {
    width: 3.5rem;
    height: 3.5rem;
  }
  @media (min-width: 320px) {
    .selection__icon {
      width: 4rem;
      height: 4rem;
    }
  }
  .selection__input:checked + .selection__label .checked {
    opacity: 1;
  }
  .selection__input:focus-visible + .selection__label {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
  }
  @media (min-width: 450px) {
    .selection__icon {
      width: 6rem;
      height: 6rem;
    }
  }
  @media (min-width: 1024px) {
    .selection {
      position: relative;
      align-items: center;
      justify-content: center;
    }
    .selection__label {
      flex-direction: column;
      gap: 0;
    }
    .selection__icon {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      width: 7rem;
      height: 7rem;
    }
  }
  [data-form-slide] .slide__headline:focus {
    outline: none;
  }
}
@layer pages {
  .contact__benefits {
    padding: 0;
    display: none;
  }
  @media (min-width: 1024px) {
    .contact__benefits {
      display: flex;
      gap: 1rem;
      margin: 0;
    }
  }
  .bottom-group {
    gap: 0;
  }
  @media (min-width: 600px) {
    .bottom-group {
      gap: 2rem;
    }
  }
  @media (min-width: 600px) {
    .submit {
      padding: 1rem;
    }
  }
}
@layer components {
  :root {
    --icon-checked: 3rem;
  }
  @media (min-width: 320px) {
    :root {
      --icon-checked: 4rem;
    }
  }
  .checked {
    position: absolute;
    top: 0.5rem;
    right: -1rem;
    width: var(--icon-checked);
    height: var(--icon-checked);
  }
  @media (min-width: 320px) {
    .checked {
      top: 0.5rem;
      right: -0.5rem;
    }
  }
  .checked {
    background-color: var(--color-brand-secondary);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.6);
    transition: opacity var(--speed-med) ease, transform var(--speed-med) cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
  }
  .checked::before, .checked::after {
    content: "";
    position: absolute;
    left: 12%;
    top: 50%;
    height: calc(var(--icon-checked) * 0.1333);
    background-color: var(--color-surface);
    border-radius: calc(var(--icon-checked) * 0.0667);
    transform-origin: left center;
  }
  .checked::before {
    width: calc(var(--icon-checked) * 0.55);
    transform: rotate(-45deg) translate(calc(var(--icon-checked) * 0.08), calc(var(--icon-checked) * 0.28));
  }
  .checked::after {
    width: calc(var(--icon-checked) * 0.33);
    transform: rotate(-135deg) translate(calc(-0.33 * var(--icon-checked)), calc(0.1333 * var(--icon-checked)));
  }
  .selection__input:checked + .selection__label .checked,
  .checked.is-visible {
    opacity: 1;
    animation: checked-pop var(--speed-med) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes checked-pop {
    0% {
      transform: translate3d(0, -50%, 0) scale(0.2);
    }
    60% {
      transform: translate3d(0, -50%, 0) scale(1.2);
    }
    100% {
      transform: translate3d(0, -50%, 0) scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .checked {
      transition: none;
      animation: none;
    }
    .selection__input:checked + .selection__label .checked {
      transform: translate3d(0, -50%, 0) scale(1);
    }
  }
}
@property --gradient-shift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --gradient-spread {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8%;
}
@layer components {
  .progress-bar {
    --progress: 0%;
    --primary-share: 80%;
    width: 100%;
    height: 1rem;
    overflow: hidden;
    background-color: var(--color-surface-dark-soft);
  }
  .progress-bar__fill {
    position: relative;
    width: var(--progress);
    height: 100%;
    overflow: hidden;
    transition: width var(--speed-slow) ease;
  }
  .progress-bar__fill::before {
    --gradient-shift: 0%;
    --gradient-spread: 8%;
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-brand-primary) clamp(0%, clamp(0%, var(--primary-share) + var(--gradient-shift), 100%) - var(--gradient-spread), 100%), var(--color-brand-secondary) clamp(0%, clamp(0%, var(--primary-share) + var(--gradient-shift), 100%) + var(--gradient-spread), 100%), var(--color-brand-secondary) 100%);
    animation: progress-gradient-idle 7s ease-in-out infinite;
  }
}
@keyframes progress-gradient-idle {
  0% {
    --gradient-shift: -8%;
    --gradient-spread: 14%;
  }
  30% {
    --gradient-shift: 3%;
    --gradient-spread: 30%;
  }
  55% {
    --gradient-shift: 9%;
    --gradient-spread: 20%;
  }
  80% {
    --gradient-shift: -2%;
    --gradient-spread: 34%;
  }
  100% {
    --gradient-shift: -8%;
    --gradient-spread: 14%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar__fill {
    transition: none;
  }
  .progress-bar__fill::before {
    animation: none;
  }
}
/*  TRUST-BAR / FANCY-LIST ###################################### */
@layer components {
  /* ============================================================
    SHARED
  ============================================================ */
  .trust-bar,
  .fancy-list {
    --trust-icon-size: 4rem;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    margin-top: auto;
    background-color: var(--color-surface-contrast);
    border-radius: 0.5rem;
  }
  .trust-bar__item,
  .fancy-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  @media (min-width: 600px) {
    .trust-bar__item,
    .fancy-list__item {
      display: grid;
      grid-row: 1/span 2;
      grid-template-rows: subgrid;
      grid-template-columns: var(--trust-icon-size) 1fr;
      -moz-column-gap: 1rem;
           column-gap: 1rem;
      row-gap: 0;
    }
  }
  .trust-bar__item,
  .fancy-list__item {
    --trust-icon-color: var(--color-special);
    --trust-icon-background: var(--color-special-soft);
  }
  .trust-bar__item:nth-child(3n+2),
  .fancy-list__item:nth-child(3n+2) {
    --trust-icon-color: var(--color-brand-primary);
    --trust-icon-background: var(--color-brand-primary-soft);
  }
  .trust-bar__item:nth-child(3n+3),
  .fancy-list__item:nth-child(3n+3) {
    --trust-icon-color: var(--color-brand-secondary);
    --trust-icon-background: var(--color-brand-secondary-soft);
  }
  .trust-bar__icon,
  .fancy-list__icon {
    display: grid;
    place-items: center;
    width: var(--trust-icon-size);
    height: var(--trust-icon-size);
    min-width: var(--trust-icon-size);
    min-height: var(--trust-icon-size);
    background-color: var(--trust-icon-background);
    border-radius: 50%;
  }
  @media (min-width: 600px) {
    .trust-bar__icon,
    .fancy-list__icon {
      grid-row: 1/span 2;
      align-self: center;
    }
  }
  .trust-bar__icon::before,
  .fancy-list__icon::before {
    content: "";
    width: 50%;
    height: 50%;
    background-color: var(--trust-icon-color);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transform: scale(var(--icon-scale));
  }
  .trust-bar__icon--star::before,
  .fancy-list__icon--star::before {
    --icon-scale: 1.5;
    -webkit-mask-image: url("/assets/img/icons/star-light-full.svg");
            mask-image: url("/assets/img/icons/star-light-full.svg");
  }
  .trust-bar__icon--shield::before,
  .fancy-list__icon--shield::before {
    --icon-scale: 1.2;
    -webkit-mask-image: url("/assets/img/icons/shield-check-solid.svg");
            mask-image: url("/assets/img/icons/shield-check-solid.svg");
  }
  .trust-bar__icon--handshake::before,
  .fancy-list__icon--handshake::before {
    --icon-scale: 1.3;
    -webkit-mask-image: url("/assets/img/icons/handshake-solid.svg");
            mask-image: url("/assets/img/icons/handshake-solid.svg");
  }
  .trust-bar__icon--shield-light::before,
  .fancy-list__icon--shield-light::before {
    --icon-scale: 1.3;
    -webkit-mask-image: url("/assets/img/icons/shield-check-regular.svg");
            mask-image: url("/assets/img/icons/shield-check-regular.svg");
  }
  .trust-bar__icon--thumb-up-light::before,
  .fancy-list__icon--thumb-up-light::before {
    --icon-scale: 1.2;
    -webkit-mask-image: url("/assets/img/icons/thumbs-up-regular.svg");
            mask-image: url("/assets/img/icons/thumbs-up-regular.svg");
  }
  .trust-bar__icon--heart-light::before,
  .fancy-list__icon--heart-light::before {
    --icon-scale: 1.2;
    -webkit-mask-image: url("/assets/img/icons/heart-regular.svg");
            mask-image: url("/assets/img/icons/heart-regular.svg");
  }
  .trust-bar__content,
  .fancy-list__content {
    display: flex;
    flex-direction: column;
  }
  .trust-bar__content strong,
  .trust-bar__content span,
  .fancy-list__content strong,
  .fancy-list__content span {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  @media (min-width: 600px) {
    .trust-bar__content,
    .fancy-list__content {
      display: grid;
      grid-row: 1/span 2;
      grid-template-rows: subgrid;
    }
  }
  .trust-bar__value,
  .fancy-list__value {
    font-weight: 800;
    margin-top: auto;
  }
  .trust-bar__label,
  .fancy-list__label {
    text-wrap: balance;
    margin-bottom: auto;
  }
  /* ============================================================
    FANCY-LIST ursprüngliches Verhalten
  ============================================================ */
  @media (min-width: 450px) {
    .fancy-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto auto;
      -moz-column-gap: 1rem;
           column-gap: 1rem;
      row-gap: 1rem;
      align-content: start;
    }
    .fancy-list__item {
      display: grid;
      grid-row: 1/span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .fancy-list__icon {
      grid-row: 1;
      justify-self: center;
      align-self: start;
    }
    .fancy-list__content {
      display: grid;
      grid-row: 2/span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .fancy-list__value {
      grid-row: 1;
      align-self: start;
    }
    .fancy-list__label {
      grid-row: 2;
      align-self: start;
    }
  }
  @media (min-width: 600px) {
    .fancy-list {
      display: flex;
    }
  }
  /* ============================================================
    TRUST-BAR
    spezifisches Responsive-Layout
  ============================================================ */
  .trust-bar__wrapper {
    --trust-edge-fade: 2.5rem;
    --trust-gap: var(--trust-edge-fade);
    --trust-bleed: var(--trust-edge-fade);
    position: relative;
    overflow: clip;
    margin-inline: calc(var(--trust-bleed) * -1);
    /*
    * Track ist dadurch schmaler als der gesamte Wrapper.
    * Gleichzeitig entsteht Platz für die Edge-Fades.
    */
    padding-inline: var(--trust-edge-fade);
  }
  .trust-bar__wrapper::before, .trust-bar__wrapper::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block: 0;
    width: var(--trust-edge-fade);
    pointer-events: none;
  }
  .trust-bar__wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-surface), transparent);
  }
  .trust-bar__wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-surface), transparent);
  }
  @media (min-width: 600px) {
    .trust-bar__wrapper {
      overflow: visible;
      padding-inline: 0;
    }
    .trust-bar__wrapper::before, .trust-bar__wrapper::after {
      display: none;
    }
  }
  @media (min-width: 600px) {
    .trust-bar__wrapper {
      --trust-bleed: 0;
    }
  }
  .trust-bar {
    /* Mobile = Slider-Track */
    --trust-offset: 0;
    display: flex;
    justify-content: flex-start;
    gap: var(--trust-gap);
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    transform: translate(var(--trust-offset));
    transition: transform var(--form-slide-speed) ease-in-out;
    /* 1. Element ist Default */
  }
  .trust-bar.is-step-2 {
    --trust-offset: calc(-100% - var(--trust-gap));
  }
  .trust-bar.is-step-3 {
    --trust-offset:
      calc(-200% - var(--trust-gap) - var(--trust-gap));
  }
  .trust-bar__item {
    flex: 0 0 100%;
    min-width: 0;
    padding: 1rem 2rem;
    background-color: var(--color-surface-contrast);
    border-left: 4px solid var(--trust-icon-color);
    border-radius: 0.5rem;
  }
  @media (min-width: 600px) {
    .trust-bar__item {
      border-left: none;
    }
  }
  .trust-bar {
    /* Desktop = normale Trustbar */
  }
  @media (min-width: 600px) {
    .trust-bar {
      --trust-icon-size: 4rem;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: none;
      justify-content: space-between;
      gap: 2rem;
      width: 100%;
      margin-top: auto;
      padding: 1rem 2rem;
      background-color: var(--color-surface-contrast);
      border-radius: 0.5rem;
      /*
      * Mobile-Sliderzustand auf Desktop komplett ignorieren.
      */
      transform: none;
      transition: none;
    }
    .trust-bar__item {
      width: auto;
      padding: 0;
      background-color: inherit;
    }
  }
  .trust-bar__content {
    line-height: 1.6rem;
    vertical-align: middle;
  }
  @media (min-width: 450px) {
    .trust-bar__content {
      display: grid;
      grid-template-columns: 45px minmax(0, 1fr);
      gap: 1rem;
    }
  }
  @media (min-width: 600px) {
    .trust-bar__content {
      grid-template-columns: none;
      gap: 0;
    }
  }
  .trust-bar__value {
    line-height: 2.2rem;
  }
  @media (min-width: 450px) {
    .trust-bar__value {
      text-align: end;
    }
  }
  @media (min-width: 600px) {
    .trust-bar__value {
      text-align: start;
    }
  }
}
/*  inline icons (generische styles) ###################################### */
@layer layout {
  .inline-icon {
    display: block;
  }
  .inline-icon .icon-fill {
    fill: currentColor;
  }
  .inline-icon .icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width, 1.5px);
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
  }
  .inline-icon .icon-stroke--round {
    stroke-linecap: round;
  }
}
@layer components {
  .auszeichnung {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    justify-content: space-between;
  }
  .auszeichnung > div {
    margin-left: auto;
    margin-right: auto;
  }
  .auszeichnung {
    padding: 2rem;
  }
  @media (min-width: 1024px) {
    .auszeichnung {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .last-request {
    text-align: center;
  }
}
@layer layout {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    background-color: var(--color-brand-primary);
    color: var(--color-surface);
    font-weight: 700;
  }
  @media (min-width: 450px) {
    .button {
      padding-inline: 3rem;
    }
  }
  .button {
    border-radius: 0.5rem;
    align-self: center;
    border: none;
    text-decoration: none;
    overflow: clip;
  }
  .button.light {
    background-color: var(--color-surface);
    color: var(--color-text-accent);
  }
  .button__icon--arrow {
    position: relative;
    width: 2rem;
    height: 1rem;
    flex: 0 0 auto;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .button__icon--arrow::before, .button__icon--arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.2rem;
  }
  .button__icon--arrow::before {
    width: 1.6rem;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    transform-origin: right center;
    transition: width var(--speed-fast) ease-in-out, transform var(--speed-fast) ease-in-out;
  }
  .button__icon--arrow::after {
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 2px;
    transform: translateY(-50%) rotate(45deg);
    transition: transform var(--speed-fast) ease-in-out, width var(--speed-fast) ease-in-out, height var(--speed-fast) ease-in-out;
  }
  .button__icon {
    flex: 0 0 auto;
  }
  .button__icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .button__icon--svg svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .button:is(:hover, :focus-visible) .button__icon--svg {
    transform: scale(1.1);
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow {
    transform: translateX(0.3rem);
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow::before {
    width: 1.3rem;
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow::after {
    transform: translateY(-50%) rotate(45deg);
    width: 0.9rem;
    height: 0.9rem;
  }
  .button:active .button__icon--arrow {
    transform: translateX(3rem);
    transition-duration: 200ms;
  }
}
@layer components {
  .cta-banner__wrapper {
    display: flex;
    justify-content: center;
  }
  .cta-banner {
    width: 100%;
    max-width: 1024px;
    border-radius: 1rem;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    box-shadow: var(--shadow-dark);
  }
  .cta-banner__headline, .cta-banner__description {
    color: var(--color-surface);
    text-wrap: balance;
  }
  .cta-banner__headline {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 700;
  }
  .cta-banner__description {
    line-height: 2.2rem;
  }
  @media (min-width: 399px) {
    .cta-banner__description {
      max-width: 260px;
    }
  }
  @media (min-width: 399px) {
    .cta-banner__description {
      max-width: max(255px, 80%);
    }
  }
  @media (min-width: 768px) {
    .cta-banner__description {
      max-width: 66%;
    }
  }
  .cta-banner__icon {
    display: none;
  }
  .cta-banner__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .cta-banner__price-banner {
    --banner-size: 8rem;
    width: var(--banner-size);
    height: var(--banner-size);
    border-radius: calc(var(--banner-size) * 0.5);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-special);
    right: -3rem;
    top: 2rem;
  }
  .cta-banner__price-banner.is-plopping {
    animation: cta-pop var(--speed-med) ease-out;
  }
  @media (min-width: 315px) {
    .cta-banner__price-banner {
      top: 12rem;
    }
  }
  @media (min-width: 348px) {
    .cta-banner__price-banner {
      top: -1rem;
      right: -2rem;
      --banner-size: 9rem;
    }
  }
  @media (min-width: 399px) {
    .cta-banner__price-banner {
      top: 10rem;
      right: -2rem;
      --banner-size: 9rem;
    }
  }
  @media (min-width: 480px) {
    .cta-banner__price-banner {
      --banner-size: 12rem;
    }
  }
  @media (min-width: 550px) {
    .cta-banner__price-banner {
      --banner-size: 14rem;
      top: 8rem;
    }
  }
  @media (min-width: 768px) {
    .cta-banner__price-banner {
      --banner-size: 16rem;
      top: auto;
      bottom: -4rem;
      right: 4rem;
    }
  }
  @media (min-width: 800px) {
    .cta-banner__price-banner {
      right: 10%;
    }
  }
  @media (min-width: 1024px) {
    .cta-banner__price-banner {
      right: 12%;
    }
  }
  .cta-banner__price-banner__text {
    color: var(--color-brand-primary);
  }
  @media (min-width: 480px) {
    .cta-banner__price-banner__text {
      font-size: 2.4rem;
      line-height: 3rem;
    }
  }
  @media (min-width: 768px) {
    .cta-banner__price-banner__text {
      font-size: 3rem;
      line-height: 3.6rem;
    }
  }
  .cta-banner__price-banner {
    transition: transform var(--speed-fast) ease-in-out;
  }
  .cta-banner__price-banner:hover, .cta-banner__price-banner:focus-visible, .cta-banner__price-banner:active {
    transform: scale(1.05);
  }
  .cta-banner .button {
    width: 100%;
    max-width: var(--benefit-width);
    padding: 1rem 0;
    margin-right: auto;
    gap: 1rem;
  }
  @media (min-width: 450px) {
    .cta-banner .button {
      gap: 1;
      padding: 1rem 2rem;
    }
  }
  @media (min-width: 768px) {
    .cta-banner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "icon content" "icon button";
      -moz-column-gap: 2rem;
           column-gap: 2rem;
      row-gap: 2rem;
      grid-template-columns: clamp(10rem, 17vw, 14rem) minmax(0, 1fr);
      grid-template-rows: auto auto;
    }
    .cta-banner__icon {
      grid-area: icon;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1/1;
      -o-object-fit: contain;
         object-fit: contain;
      align-self: center;
    }
    .cta-banner__content {
      grid-area: content;
      min-width: 0;
      gap: 2rem;
    }
    .cta-banner__headline span {
      display: inline-block;
      white-space: nowrap;
      text-wrap: normal;
    }
    .cta-banner .button {
      grid-area: button;
      width: var(--benefit-width);
      justify-self: start;
    }
  }
  @keyframes cta-pop {
    0%, 100% {
      transform: scale(1);
    }
    45% {
      transform: scale(1.2);
    }
    70% {
      transform: scale(0.95);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-banner__price-banner.is-plopping {
      animation: none;
    }
  }
}
/*  HEADER ###################################### */
/*  HEADER ###################################### */
:root {
  --header-height: 8rem;
}

@layer components {
  .header {
    inset: 0 0 auto;
    width: 100%;
    height: var(--header-height);
    z-index: 10;
  }
  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-block: 0;
    gap: 2rem;
  }
  @media (min-width: 600px) {
    .header .container {
      gap: 1rem;
    }
  }
  .header .logo {
    height: calc(var(--header-height) - 2.5rem);
    --logo-ring-speed: var(--speed-med);
  }
  .header__quick-links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  @media (min-width: 600px) and (min-width: 767px) {
    .header__quick-links:not(.--slim) {
      gap: 1rem;
    }
    .header__quick-links.--slim .button--accent {
      padding-inline: 2rem;
    }
  }
  @media (min-width: 768px) {
    .header__quick-links {
      gap: 2rem;
    }
  }
  .header .icon-link {
    cursor: pointer;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .header .icon-link:hover, .header .icon-link:active, .header .icon-link:focus-visible {
    transform: scale(1.05);
  }
  .header__icon {
    width: 3.8rem;
    height: 3.8rem;
    color: var(--color-brand-primary);
  }
  .header .button--accent {
    display: none;
    width: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 600px) {
    .header .button--accent {
      display: inline-flex;
    }
  }
  @media (min-width: 768px) {
    .header .button--accent {
      padding-inline: 2rem;
    }
  }
}
@layer pages {
  .header {
    position: absolute;
  }
}
/* HERO ###################################### */
@layer components {
  .hero {
    --trust-bar-height: 6rem;
    --hero-image-cutoff: calc(var(--trust-bar-height) / 2 + var(--section-padding));
    --hero-fade-left-solid: 0rem;
    --hero-fade-left: 20rem;
    --hero-fade-bottom-solid: 0rem;
    --hero-fade-bottom: 8rem;
    --hero-image-height: 300px;
    --hero-image-gap: 200px;
    --face-factor: 0.5;
    --image-padding-top: calc(var(--header-height) * (1 - var(--face-factor)));
    --image-fade-top: calc(var(--header-height) * (0 + var(--face-factor)));
    --hero-image-fade-side: 0;
    position: relative;
    padding-top: calc(var(--hero-image-gap) + 2rem);
    background-color: var(--color-surface);
  }
  .hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  @media (min-width: 600px) {
    .hero__content {
      gap: 2rem;
    }
  }
  .hero__content {
    max-width: 1024px;
    margin-inline: auto;
  }
  .hero > .container {
    position: relative;
    z-index: 1;
  }
  .hero::before, .hero::after {
    margin-top: var(--image-padding-top);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--hero-image-cutoff);
    background-repeat: no-repeat;
    background-position: 20%;
    background-size: cover;
    z-index: 0;
    height: var(--hero-image-height);
    background-image: var(--hero-600);
    /* Image-Helper.php stellt folgende Bildpfad-Variablen bereit: 
     * --hero-450
     * --hero-600
     * --hero-768
     * --hero-1024
     * --hero-1280
     * --hero-1440
     * --hero-1920
     * --hero-2560

      Das heißt NICHT, dass es so viele Bild-Varianten gibt / geben muss,
      sondern bietet auf Designebene nur so viel "maximale" Granularität.
      Je nach Breite (450, 600, 768 [...]) wird der Pfad von der passende /
      nächstgrößten Bildquelle in der Variable gesetzt.

      Granularität in image-helper.php anpassbar unter:
        const RESPONSIVE_IMAGE_TARGETS = [ 450, 600, 768, 1024, 1280, 1440, 1920, 2560,];

      Beispiel:
        --hero-image-450: url(/assets/img/illustrations/pkv-anfrage/hero-600.webp);
        --hero-image-600: url(/assets/img/illustrations/pkv-anfrage/hero-600.webp);
        --hero-image-768: url(/assets/img/illustrations/pkv-anfrage/hero-1280.webp);
        --hero-image-1024: url(/assets/img/illustrations/pkv-anfrage/hero-1280.webp);
        --hero-image-1280: url(/assets/img/illustrations/pkv-anfrage/hero-1280.webp);
        --hero-image-1440: url(/assets/img/illustrations/pkv-anfrage/hero-1920.webp);
        --hero-image-1920: url(/assets/img/illustrations/pkv-anfrage/hero-1920.webp);
        --hero-image-2560: url(/assets/img/illustrations/pkv-anfrage/hero-2560.webp);
    */
    background-image: var(--hero-image-600);
  }
  @media (min-width: 600px) {
    .hero::before {
      background-image: var(--hero-image-600);
    }
  }
  @media (min-width: 768px) {
    .hero::before {
      background-image: var(--hero-image-768);
    }
  }
  @media (min-width: 1024px) {
    .hero::before {
      background-image: var(--hero-image-1024);
    }
  }
  @media (min-width: 1280px) {
    .hero::before {
      background-image: var(--hero-image-1280);
    }
  }
  @media (min-width: 1440px) {
    .hero::before {
      background-image: var(--hero-image-1440);
    }
  }
  .hero::after {
    content: "";
    height: var(--hero-image-height);
    position: absolute;
    inset: 0 0 var(--hero-image-cutoff);
    background: linear-gradient(to bottom, #fff 0, transparent var(--image-fade-top)), linear-gradient(to top, #fff 0, #fff var(--hero-fade-bottom-solid), transparent var(--hero-fade-bottom)), linear-gradient(to right, #fff 0, transparent var(--hero-image-fade-side)), linear-gradient(to left, #fff 0, transparent var(--hero-image-fade-side));
    pointer-events: none;
  }
  @media (min-width: 600px) {
    .hero {
      --trust-bar-height: 6rem;
      --hero-image-cutoff: calc(var(--trust-bar-height) / 2 + var(--section-padding));
      --hero-fade-left-solid: 0rem;
      --hero-fade-left: 20rem;
      --hero-fade-bottom-solid: 0rem;
      --hero-fade-bottom: 8rem;
      --hero-image-height: calc(100% - var(--hero-image-cutoff));
      --hero-image-gap: 100px;
      --face-factor: 1;
      --image-padding-top: calc(var(--header-height) * (1 - var(--face-factor)));
      --image-fade-top: calc(var(--header-height) * (0 + var(--face-factor)));
    }
  }
  @media (min-width: 1280px) {
    .hero {
      max-width: calc(1024px + var(--hero-image-fade-side) * 2);
      margin-left: auto;
      margin-right: auto;
      background-position: top center;
      --hero-image-fade-side: 0;
      --hero-image-gap: 200px;
    }
  }
}
/*  process ###################################### */
:root {
  --process-icon-size: 8rem;
  --process-counter-size: 2.4rem;
  --process-counter-margin: 1.5rem;
}

@layer layout {
  .process .container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  .process h2 {
    text-align: center;
  }
  .process h2,
  .process p {
    text-wrap: balance;
  }
  .process__list {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    -moz-column-gap: var(--process-list-gap);
         column-gap: var(--process-list-gap);
  }
  @media (min-width: 768px) {
    .process__list {
      max-width: 1024px;
      display: grid;
      grid-template-columns: repeat(3, minmax(189px, 1fr));
      grid-template-rows: auto auto 1fr;
      -moz-column-gap: var(--process-list-gap);
           column-gap: var(--process-list-gap);
      row-gap: 2rem;
      padding-left: calc(var(--process-counter-size) + var(--process-counter-margin));
    }
  }
  .process__list {
    list-style: none;
    counter-reset: process-step;
    --process-list-gap: calc(var(--process-counter-size) + var(--process-counter-margin) * 2);
  }
  .process__item {
    counter-increment: process-step;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }
  .process__item:hover .process__icon-wrapper, .process__item:focus-visible .process__icon-wrapper {
    transform: scale(1.1);
  }
  @media (min-width: 768px) {
    .process__item:hover .process__icon-wrapper, .process__item:focus-visible .process__icon-wrapper {
      transform: translateX(calc(var(--process-marker-versatz) * -1)) scale(1.1);
    }
  }
  @media (min-width: 768px) {
    .process__item {
      display: grid;
      grid-row: 1/span 3;
      grid-template-rows: subgrid;
      gap: 0;
      align-items: start;
    }
  }
  .process__item {
    --process-icon-color: var(--color-brand-primary);
    --process-next-color: var(--color-brand-secondary);
    --process-icon-background: var(--color-brand-primary-soft);
    --process-icon-stroke-width: 1.5px;
    --process-arrow-offset: 1rem;
    --process-marker-versatz: var(--process-list-gap) * 0.5;
  }
  .process__item:nth-child(3n+2) {
    --process-icon-color: var(--color-brand-secondary);
    --process-next-color: var(--color-brand-tertiary);
    --process-icon-background: var(--color-brand-secondary-soft);
  }
  .process__item:nth-child(3n+3) {
    --process-icon-color: var(--color-brand-tertiary);
    --process-next-color: var(--color-brand-primary);
    --process-icon-background: var(--color-brand-tertiary-soft);
  }
  @media (min-width: 768px) {
    .process__item:not(:last-child)::before {
      content: "";
      position: absolute;
      top: calc(var(--process-icon-size) / 2);
      left: calc(50% + var(--process-icon-size) / 2 + var(--process-arrow-offset));
      right: calc(-50% - var(--process-list-gap) + var(--process-icon-size) / 2 + var(--process-arrow-offset) + var(--process-marker-versatz) * 2);
      height: 2px;
      background: linear-gradient(to right, var(--process-icon-color), var(--process-next-color));
      mask-image: repeating-linear-gradient(to right, #000 0 10px, transparent 10px 14px);
      mask-repeat: repeat-x;
      -webkit-mask-image: repeating-linear-gradient(to right, #000 0 10px, transparent 10px 14px);
      -webkit-mask-repeat: repeat-x;
    }
    .process__item:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--process-icon-size) / 2);
      right: calc(-50% - var(--process-list-gap) + var(--process-icon-size) / 2 + 10px + var(--process-marker-versatz) * 2);
      width: 0.8rem;
      height: 0.8rem;
      border-top: 2px solid var(--process-next-color);
      border-right: 2px solid var(--process-next-color);
      transform: translateY(calc(-50% + 1px)) rotate(45deg);
    }
  }
  .process__title {
    display: flex;
    align-items: flex-start;
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
  .process__title::before {
    content: counter(process-step) ".";
    content: counter(process-step);
    display: grid;
    position: absolute;
    place-items: center;
    flex: 0 0 auto;
    width: var(--process-counter-size);
    height: var(--process-counter-size);
    top: calc((100% - var(--process-icon-size)) * 0.5);
    left: -0.5rem;
  }
  @media (min-width: 768px) {
    .process__title::before {
      top: calc(var(--process-icon-size) + 2.4rem);
      left: calc((var(--process-counter-size) + var(--process-counter-margin)) * -1);
    }
  }
  .process__title::before {
    color: #fff;
    background-color: var(--process-icon-color);
    border-radius: 50%;
    font-size: calc(var(--process-counter-size) * 0.6);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .process__icon-wrapper {
    display: grid;
    place-items: center;
    width: var(--process-icon-size);
    height: var(--process-icon-size);
    min-width: var(--process-icon-size);
    min-height: var(--process-icon-size);
    color: var(--process-icon-color);
    background-color: var(--process-icon-background);
    border-radius: 50%;
    transition: transform ease-in-out var(--speed-fast);
  }
  @media (min-width: 768px) {
    .process__icon-wrapper {
      margin-bottom: 2rem;
      grid-row: 1;
      margin-left: auto;
      margin-right: auto;
      transform: translateX(calc(var(--process-marker-versatz) * -1)) scale(1);
    }
  }
  .process__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 768px) {
    .process__content {
      display: grid;
      grid-row: 2/span 2;
      grid-template-rows: subgrid;
    }
  }
  .process__content p {
    hyphens: auto;
  }
  .process__icon {
    width: calc(var(--process-icon-size) - 1rem);
    height: calc(var(--process-icon-size) - 1rem);
    --icon-stroke-width: var(--process-icon-stroke-width);
  }
}
/*  benefits ###################################### */
:root {
  --benefit-width: 286px;
}

@layer components {
  .benefits .container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  .benefits h2 {
    text-align: center;
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
    .benefits.is-reveal-enabled .benefit {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: opacity var(--speed-med) ease, transform var(--speed-med) ease;
    }
    .benefits.is-reveal-enabled .benefit.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .benefit-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, var(--benefit-width)));
  }
  @media (min-width: 529px) {
    .benefit-list {
      grid-template-columns: repeat(2, minmax(0, var(--benefit-width)));
      grid-auto-rows: auto 1fr auto 1fr;
    }
  }
  @media (min-width: 768px) {
    .benefit-list {
      grid-template-columns: repeat(4, minmax(0, var(--benefit-width)));
    }
  }
  .benefit-list {
    justify-content: center;
    gap: 2rem;
  }
  .benefit {
    --benefit-border-width: 1px;
    --gradient-brand-angle: 135deg;
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    width: 100%;
    padding: var(--benefit-border-width);
    row-gap: var(--benefit-border-width);
    background: var(--gradient-brand);
    border-radius: 1rem;
    overflow: hidden;
  }
  .benefit__headline, .benefit__description {
    text-align: center;
    background: var(--color-surface);
  }
  .benefit__headline {
    color: var(--color-text-accent);
    padding: 1rem;
    border-radius: calc(1rem - var(--benefit-border-width)) calc(1rem - var(--benefit-border-width)) 0 0;
  }
  .benefit__description {
    padding: 1rem;
    hyphens: auto;
    text-wrap: balance;
    border-radius: 0 0 calc(1rem - var(--benefit-border-width)) calc(1rem - var(--benefit-border-width));
  }
  .benefit__cta {
    width: var(--benefit-width);
    max-width: 100%;
    padding: 1rem 0;
  }
  .benefit {
    transition: transform var(--speed-med) ease-in-out;
    cursor: default;
  }
  @media (min-width: 1024px) {
    .benefit:hover {
      transform: scale(1.05);
    }
  }
}
/* REVIEW ###################################### */
@layer layout {
  .review {
    /* Rating */
    --review-star-size: 2rem;
    --review-star-gap: 0.2rem;
    /* Desktop */
    --review-max-width: calc(var(--benefit-width) * 2 + 2rem);
    /* Carousel Timing */
    --review-motion-duration: var(--speed-med);
    --review-fade-duration: var(--speed-med);
    --review-position-easing: cubic-bezier(0.65, 0, 0.35, 1);
    --review-scale-easing: cubic-bezier(0.34, 1.25, 0.64, 1);
    /* Carousel Depth */
    --review-side-scale: 0.86;
    --review-separated-scale: 0.82;
    --review-side-y: 1.2rem;
    --review-separated-y: 2.2rem;
    /* Carousel Geometry */
    --review-active-width: min(320px, 80%);
    --review-active-half: min(160px, 40%);
    /*
     * Geometrische Breite der Side-Slides.
     * Wird nur für die Positionsberechnung verwendet.
     */
    --review-side-width: min(292px, 73%);
    /* Überlappung im Ruhezustand */
    --review-side-overlap: 4rem;
    /* Abstand am äußersten Punkt der Bewegung */
    --review-separate-gap: 1rem;
    /* Eintrittsabstand für bisher unsichtbare Slides */
    --review-stage-gap: 8rem;
    /* Finale Positionen */
    --review-active-left:
      calc(50% - var(--review-active-half));
    --review-prev-left:
      calc(50% - var(--review-active-half) - var(--review-side-width) + var(--review-side-overlap));
    --review-next-left:
      calc(50% + var(--review-active-half) - var(--review-side-overlap));
    /* Positionen nach dem Auseinanderfahren */
    --review-prev-separated-left:
      calc(50% - var(--review-active-half) - var(--review-side-width) - var(--review-separate-gap));
    --review-next-separated-left:
      calc(50% + var(--review-active-half) + var(--review-separate-gap));
    /* Eintrittspositionen neuer Side-Slides */
    --review-prev-stage-left:
      calc(50% - var(--review-active-half) - var(--review-side-width) - var(--review-stage-gap));
    --review-next-stage-left:
      calc(50% + var(--review-active-half) + var(--review-stage-gap));
  }
  .review .container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  .review__header {
    text-align: center;
  }
  .review {
    /* Rating ################################### */
  }
  .review__rating {
    display: flex;
    gap: var(--review-star-gap);
    inline-size: calc(var(--review-star-size) * 5 + var(--review-star-gap) * 4);
    block-size: var(--review-star-size);
  }
  .review__rating .star-half__left,
  .review__rating .star-half__right {
    opacity: 1;
    color: var(--color-frame-light);
  }
  .review__rating .half .star-half__left,
  .review__rating .full .star-half__left {
    color: var(--color-special);
  }
  .review__rating .full .star-half__right {
    color: var(--color-special);
  }
  .review .review__icon {
    transition: transform var(--speed-fast) ease-in-out;
  }
  .review .review__icon:hover,
  .review .review__icon :focus-visible {
    transform: scale(1.1);
  }
  .review {
    /* Base / Fallback ########################## */
  }
  .review__carousel {
    width: 100%;
  }
  .review__list {
    display: grid;
    justify-items: center;
    gap: 2rem;
  }
  .review__item {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2rem;
    width: 100%;
    max-width: var(--review-max-width);
    padding: 2rem;
    border: 1px solid var(--color-frame-light);
    border-radius: 1rem;
    background: var(--color-surface);
  }
  .review__description {
    hyphens: auto;
  }
  .review__author {
    padding-left: 1rem;
  }
  .review {
    /* Controls ################################# */
  }
  .review__controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: var(--section-gap);
  }
  .review .review-button, .review__toggle {
    min-height: 4.4rem;
    border: 1px solid var(--color-frame-light);
    background: var(--color-surface-translucent);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--speed-fast) ease-in-out, background-color var(--speed-fast) ease-in-out, border-color var(--speed-fast) ease-in-out;
  }
  .review .review-button:focus-visible, .review__toggle:focus-visible {
    outline: 2px solid var(--color-special);
    outline-offset: 3px;
  }
  .review .review-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    padding: 1rem;
    border-radius: 2.2rem;
  }
  .review .review-button__icon {
    width: 2.2rem;
    height: 2.2rem;
  }
  @media (hover: hover) {
    .review .review-button:hover {
      border-color: var(--color-special);
      color: var(--color-special);
    }
  }
  .review__toggle {
    padding: 1rem 1.5rem;
    font-weight: 700;
    border-radius: 0.5rem;
  }
  .review {
    /* Screenreader Status ###################### */
  }
  .review__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .review {
    /* Mobile Carousel ########################## */
  }
  @media (max-width: 767px) {
    .review.is-ready {
      /*
       * Interner Carousel-Overflow darf sichtbar sein,
       * aber nicht die Seite horizontal verbreitern.
       */
      overflow: clip;
    }
    .review.is-ready .review__carousel {
      width: calc(100% + var(--section-padding) * 2);
      margin-inline: calc(var(--section-padding) * -1);
    }
    .review.is-ready .review__viewport {
      position: relative;
      width: 100%;
      overflow: visible;
      touch-action: pan-y;
      transition: height var(--review-motion-duration) var(--review-position-easing);
    }
    .review.is-ready .review__list {
      position: relative;
      display: block;
      width: 100%;
      min-height: 1px;
    }
    .review.is-ready {
      /* Slide Basis ########################## */
    }
    .review.is-ready .review__item {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: var(--review-active-left);
      width: var(--review-active-width);
      max-width: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: inset-inline-start var(--review-motion-duration) var(--review-position-easing), opacity var(--review-fade-duration) ease-in-out, box-shadow var(--review-motion-duration) var(--review-position-easing), transform var(--review-motion-duration) var(--review-scale-easing);
    }
    .review.is-ready {
      /* Finale Rollen ######################## */
    }
    .review.is-ready .review__item.is-active {
      inset-inline-start: var(--review-active-left);
      z-index: 4;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      box-shadow: 0 1.5rem 4rem rgba(6, 11, 39, 0.14);
      transform: translateY(0) scale(1);
    }
    .review.is-ready .review__item.is-prev,
    .review.is-ready .review__item.is-next {
      opacity: 0.68;
      visibility: visible;
      box-shadow: 0 0.8rem 2rem rgba(6, 11, 39, 0.08);
      transform: translateY(var(--review-side-y)) scale(var(--review-side-scale));
    }
    .review.is-ready .review__item.is-prev {
      inset-inline-start: var(--review-prev-left);
      z-index: 3;
    }
    .review.is-ready .review__item.is-next {
      inset-inline-start: var(--review-next-left);
      z-index: 2;
    }
    .review.is-ready {
      /* Phase 1: auseinanderfahren ########### */
    }
    .review.is-ready.is-separating .review__item.is-prev,
    .review.is-ready.is-separating .review__item.is-next {
      transform: translateY(var(--review-separated-y)) scale(var(--review-separated-scale));
      opacity: 0.45;
    }
    .review.is-ready.is-separating .review__item.is-prev {
      inset-inline-start: var(--review-prev-separated-left);
    }
    .review.is-ready.is-separating .review__item.is-next {
      inset-inline-start: var(--review-next-separated-left);
    }
    .review.is-ready {
      /* Phase 2: Rollenwechsel ############### */
    }
    .review.is-ready.is-staging {
      /*
       * Beim Rollenwechsel darf nichts animieren. Die Karten werden zunächst unsichtbar bzw. außerhalb der Überlagerung positioniert.
       */
    }
    .review.is-ready.is-staging .review__item {
      transition: none;
    }
    .review.is-ready.is-staging {
      /* NEXT ################################ */
    }
    .review.is-ready.is-staging.is-moving-next {
      /*
       * alter ACTIVE -> neuer PREV bleibt zunächst noch in der Mitte.
       */
    }
    .review.is-ready.is-staging.is-moving-next .review__item.is-prev {
      inset-inline-start: var(--review-active-left);
      z-index: 3;
      opacity: 1;
      visibility: visible;
      box-shadow: 0 1.5rem 4rem rgba(6, 11, 39, 0.14);
      transform: translateY(0) scale(1);
    }
    .review.is-ready.is-staging.is-moving-next {
      /*
       * alter NEXT -> neuer ACTIVE bleibt zunächst außen.
       */
    }
    .review.is-ready.is-staging.is-moving-next .review__item.is-active {
      inset-inline-start: var(--review-next-separated-left);
      z-index: 4;
      opacity: 0.45;
      visibility: visible;
      box-shadow: 0 0.8rem 2rem rgba(6, 11, 39, 0.08);
      transform: translateY(var(--review-separated-y)) scale(var(--review-separated-scale));
    }
    .review.is-ready.is-staging.is-moving-next {
      /*
       * neuer NEXT wird rechts vorbereitet.
       */
    }
    .review.is-ready.is-staging.is-moving-next .review__item.is-next {
      inset-inline-start: var(--review-next-stage-left);
      z-index: 2;
      opacity: 0.2;
      visibility: visible;
      transform: translateY(var(--review-separated-y)) scale(var(--review-separated-scale));
    }
    .review.is-ready.is-staging {
      /* PREVIOUS ############################ */
    }
    .review.is-ready.is-staging.is-moving-prev {
      /*
       * alter ACTIVE -> neuer NEXT
       * bleibt zunächst noch in der Mitte.
       */
    }
    .review.is-ready.is-staging.is-moving-prev .review__item.is-next {
      inset-inline-start: var(--review-active-left);
      z-index: 2;
      opacity: 1;
      visibility: visible;
      box-shadow: 0 1.5rem 4rem rgba(6, 11, 39, 0.14);
      transform: translateY(0) scale(1);
    }
    .review.is-ready.is-staging.is-moving-prev {
      /*
       * alter PREV -> neuer ACTIVE
       * bleibt zunächst außen.
       */
    }
    .review.is-ready.is-staging.is-moving-prev .review__item.is-active {
      inset-inline-start: var(--review-prev-separated-left);
      z-index: 4;
      opacity: 0.45;
      visibility: visible;
      box-shadow: 0 0.8rem 2rem rgba(6, 11, 39, 0.08);
      transform: translateY(var(--review-separated-y)) scale(var(--review-separated-scale));
    }
    .review.is-ready.is-staging.is-moving-prev {
      /*
       * neuer PREV wird links vorbereitet.
       */
    }
    .review.is-ready.is-staging.is-moving-prev .review__item.is-prev {
      inset-inline-start: var(--review-prev-stage-left);
      z-index: 3;
      opacity: 0.5;
      visibility: visible;
      transform: translateY(var(--review-separated-y)) scale(var(--review-separated-scale));
    }
    .review.is-ready .review__controls {
      display: flex;
    }
  }
  .review {
    /* Desktop ################################## */
  }
  @media (min-width: 768px) {
    .review__list {
      grid-template-columns: repeat(3, 1fr);
    }
    .review__item {
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    .review__viewport {
      height: auto !important;
    }
    .review__controls {
      display: none !important;
    }
  }
  .review {
    /* Reduced Motion ########################### */
  }
  @media (prefers-reduced-motion: reduce) {
    .review__viewport, .review__item {
      transition: none !important;
    }
  }
}
@layer layout {
  .faq {
    --faq-toggle-size: 2.6rem;
    --faq-toggle-stroke: 0.8rem;
    --faq-toggle-line: 0.1rem;
    --faq-animation-time: var(--speed-med);
    --faq-toggle-cutout: var(--color-surface);
  }
  .faq .container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
  }
  .faq h2 {
    text-align: center;
  }
  .faq__list {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  .faq__item {
    display: block;
    border-radius: 1rem;
    border: var(--faq-toggle-line) solid var(--color-frame-light);
  }
  .faq__summary {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    cursor: pointer;
    list-style: none;
  }
  .faq__summary::-webkit-details-marker {
    display: none;
  }
  .faq__question, .faq_answer {
    hyphens: auto;
  }
  .faq__answer {
    border-top: 1px solid var(--color-frame-light);
    margin: 0rem 2rem 1rem;
    padding-top: 1rem;
  }
  .faq__toggle {
    display: block;
    position: relative;
    inline-size: var(--faq-toggle-size);
    block-size: var(--faq-toggle-size);
    flex: 0 0 auto;
    color: var(--color-brand-primary);
  }
  .faq__toggle-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .faq__toggle-state {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--faq-animation-time) ease-in-out, opacity var(--faq-animation-time) ease-in-out;
  }
  .faq__toggle-state--plus {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  .faq__toggle-state--minus {
    opacity: 0;
    transform: rotate(-90deg) scale(0.85);
  }
  .faq__toggle-state--plus path, .faq__toggle-minus-outer {
    fill: currentColor;
  }
  .faq__toggle-minus-inner {
    fill: var(--faq-toggle-cutout);
  }
  .faq .faq__details.is-animating {
    overflow: clip;
  }
  .faq .faq__details.is-expanded .faq__toggle-state--plus {
    opacity: 0;
    transform: rotate(180deg) scale(0.85);
  }
  .faq .faq__details.is-expanded .faq__toggle-state--minus {
    opacity: 1;
    transform: rotate(180deg) scale(1);
  }
}
/* footerslim ###################################### */
@layer layout {
  .footer {
    --gradient-brand-angle: -90deg;
    background: var(--gradient-brand);
    margin-top: var(--section-padding);
  }
  .footer__icon, .footer__icon-link,
  .footer h2 {
    color: var(--color-surface);
  }
  .footer h2, .footer__accent-text {
    line-height: 2.8rem;
    font-size: 2.4rem;
  }
  .footer__accent-text {
    font-weight: 700;
  }
  .footer h2 {
    text-wrap: balance;
  }
  .footer h2,
  .footer h3 {
    font-weight: 600;
  }
  .footer__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--section-gap);
    padding-top: var(--section-gap);
  }
  @media (min-width: 600px) {
    .footer__links {
      flex-direction: row;
    }
  }
  .footer__us--social, .footer__us--contact, .footer__us, .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .footer__contact {
    width: -moz-fit-content;
    width: fit-content;
  }
  @media (min-width: 600px) {
    .footer__contact {
      margin-left: auto;
    }
  }
  .footer {
    --social-link-size: 2.4rem;
  }
  .footer__social {
    display: flex;
    gap: 1rem;
  }
  .footer__social-link {
    --social-link-color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--social-link-size) * 1.4);
    height: calc(var(--social-link-size) * 1.4);
    color: var(--social-link-color);
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .footer__social-link:is(:hover, :active, :focus-visible) {
    transform: scale(1.1);
  }
  .footer__social-link-icon {
    width: var(--social-link-size);
    height: var(--social-link-size);
    color: currentColor;
  }
  .footer__icon-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: -moz-fit-content;
    width: fit-content;
  }
  .footer__foot-note {
    display: flex;
    justify-content: space-between;
  }
  @media (min-width: 600px) {
    .footer__foot-note {
      justify-content: space-around;
    }
  }
  .footer__icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-surface);
  }
  .footer__site-link {
    color: var(--color-surface);
    transition: transform var(--speed-fast) ease-in-out;
  }
  .footer__site-link:is(:hover, :focus-visible, :active) {
    transform: scale(1.05);
  }
}
@layer layout {
  .priceDisclaimer__wrapper {
    max-width: calc(var(--benefit-width) * 2);
  }
  .priceDisclaimer__body {
    text-align: center;
  }
  .priceDisclaimer__body::details-content {
    opacity: 0;
    transition: opacity 350ms ease, content-visibility 350ms allow-discrete;
  }
  .priceDisclaimer__body[open]::details-content {
    opacity: 1;
  }
  @supports (interpolate-size: allow-keywords) {
    .priceDisclaimer__body {
      interpolate-size: allow-keywords;
    }
    .priceDisclaimer__body::details-content {
      height: 0;
      overflow: clip;
      transition: height 350ms ease, opacity 350ms ease, content-visibility 350ms allow-discrete;
    }
    .priceDisclaimer__body[open]::details-content {
      height: auto;
    }
  }
  .priceDisclaimer__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding-inline: 2.5rem;
    cursor: pointer;
    list-style: none;
  }
  .priceDisclaimer__toggle::marker {
    content: "";
  }
  .priceDisclaimer__toggle::-webkit-details-marker {
    display: none;
  }
  .priceDisclaimer__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
  .priceDisclaimer__headline {
    margin: 0;
    color: var(--color-frame-light);
    font-size: 1.4rem;
    line-height: 1.5;
    text-wrap: balance;
    hyphens: auto;
  }
  .priceDisclaimer__headline::before {
    content: "*";
  }
  .priceDisclaimer__chevron {
    position: absolute;
    right: 0;
    top: 50%;
    width: 2rem;
    height: 2rem;
    color: var(--color-frame-light);
    transform: translateY(calc(-50% + 0.3rem));
    transition: transform 350ms ease;
    pointer-events: none;
  }
  .priceDisclaimer__chevron::before, .priceDisclaimer__chevron::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    width: 40%;
    height: 3px;
    background-color: currentColor;
    border-radius: 999px;
    transition: transform 350ms ease;
  }
  .priceDisclaimer__chevron::before {
    left: 10%;
    transform-origin: left center;
    transform: skewY(-50deg);
  }
  .priceDisclaimer__chevron::after {
    right: 10%;
    transform-origin: right center;
    transform: skewY(50deg);
  }
  .priceDisclaimer__body[open] .priceDisclaimer__chevron {
    transform: translateY(calc(-60% - 0.3rem));
  }
  .priceDisclaimer__body[open] .priceDisclaimer__chevron::before {
    transform: skewY(50deg);
  }
  .priceDisclaimer__body[open] .priceDisclaimer__chevron::after {
    transform: skewY(-50deg);
  }
  .priceDisclaimer__content {
    margin: 1rem 0 0;
    color: var(--color-frame-light);
    font-size: 1.4rem;
    line-height: 1.5;
    text-wrap: pretty;
    hyphens: auto;
    text-align: start;
  }
  @media (prefers-reduced-motion: reduce) {
    .priceDisclaimer__body::details-content, .priceDisclaimer__chevron, .priceDisclaimer__chevron::before, .priceDisclaimer__chevron::after {
      transition: none;
    }
  }
}/*# sourceMappingURL=anfrage.css.map */