@charset "UTF-8";
@layer base, components, sections, utilities, overwrites;
:root {
  --clr-white: white;
  --clr-black: black;
  --clr-primary: #1e3a5f;
  --clr-primary-gradient: #1f4d89;
  --clr-primary-text: #272561;
  --clr-secondary: #97d0fc;
  --clr-secondary-light: #bce0fd;
  --clr-gray-blue: #6c757d;
  --clr-gray-light-2: #c1c1c1;
  --clr-gray-light: #e1e1e1;
  --clr-accent-primary: #bce0fd;
  --clr-accent: rgba(188, 224, 253, 0.75);
  --clr-accent-light: rgba(188, 224, 253, 0.5);
  --clr-accent-secondary: #243642;
  --clr-accent-attention: rgba(255, 97, 79, 0.75);
  --clr-surface-alt: #edf6fe;
  --clr-tertiary: rgb(251, 196, 46);
  --clr-error: red;
  --clr-error-light: #ffcccc;
  --gradient-primary: linear-gradient(to bottom, #1e3a5f, #1e3a5f, #1f4d89);
  --gradient-primary-even: linear-gradient(to bottom, #1e3a5f, #1f4d89);
  --gradient-primary: linear-gradient(to right, #1e3a5f, #97d0fc);
  --gradient-secondary: linear-gradient(90deg, #bce0fd 0%, #97d0fc 100%);
  --gradient-secondary-half: linear-gradient(90deg, #bce0fd 50%, #97d0fc 100%);
  --gradient-bg-radial-translucent: radial-gradient(circle, rgba(31, 77, 137, 0.99) 0%, rgba(30, 58, 95, 0.96) 100%);
}

@layer utilities {
  .font-primary {
    color: var(--clr-primary-text);
  }
  .primary-color {
    color: var(--clr-primary);
  }
  .bg-primary-color {
    background-color: var(--clr-primary);
  }
}
@layer base {
  html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
    display: block;
  }
  audio,
  canvas,
  progress,
  video {
    display: inline-block;
    vertical-align: baseline;
  }
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  [hidden],
  template {
    display: none;
  }
  a {
    background-color: transparent;
  }
  a:active,
  a:hover {
    outline: 0;
  }
  abbr[title] {
    border-bottom: 1px dotted;
  }
  b,
  strong {
    font-weight: bold;
  }
  dfn {
    font-style: italic;
  }
  h1 {
    font-size: 2em;
    margin: 15px 0;
  }
  mark {
    background: var(--clr-tertiary);
    color: black;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }
  img {
    border: 0;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  figure {
    margin: 1em 40px;
  }
  hr {
    box-sizing: content-box;
    height: 0;
  }
  pre {
    overflow: auto;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }
  button {
    overflow: visible;
  }
  button,
  select {
    text-transform: none;
  }
  button,
  html input[type=button],
  input[type=reset],
  input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  button[disabled],
  html input[disabled] {
    cursor: default;
  }
  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  input {
    line-height: normal;
  }
  input[type=checkbox],
  input[type=radio] {
    box-sizing: border-box;
    padding: 0;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
  }
  input[type=search]::-webkit-search-cancel-button,
  input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  fieldset {
    border: 1px solid var(--clr-gray-light-2);
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }
  legend {
    border: 0;
    padding: 0;
  }
  textarea {
    overflow: auto;
  }
  optgroup {
    font-weight: bold;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  td,
  th {
    padding: 0;
  }
}
:root {
  --shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 0 0.5rem var(--clr-primary);
  --shadow-primary-light: 0 0 0.75rem rgba(30, 58, 95, 0.45);
}

@layer components {
  .button-wrapper {
    display: block;
    margin-top: 25px;
    width: 100%;
  }
  @media (min-width: 768px) {
    .button-wrapper {
      max-width: 350px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  button,
  .button-accent {
    display: block;
    color: black;
    font-weight: 800;
    padding: 15px;
    border-radius: 50px;
  }
  button,
  #weiter-button {
    margin-left: auto;
    margin-right: auto;
  }
  button {
    width: 180px;
    background: var(--clr-primary);
    text-align: center;
  }
  .button-accent {
    text-align: center;
    overflow: hidden;
    background: var(--clr-secondary-light);
    box-sizing: border-box;
    border: 1px solid black;
  }
  .button-accent.dark {
    color: white;
    background: var(--clr-primary);
  }
}
@layer base {
  /* quicksand-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300;
    src: url("../assets/fonts/quicksand-v30-latin-300.woff2") format("woff2"), url("../assets/fonts/quicksand-v30-latin-300.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* quicksand-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/quicksand-v30-latin-regular.woff2") format("woff2"), url("../assets/fonts/quicksand-v30-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* quicksand-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500;
    src: url("../assets/fonts/quicksand-v30-latin-500.woff2") format("woff2"), url("../assets/fonts/quicksand-v30-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* quicksand-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    src: url("../assets/fonts/quicksand-v30-latin-600.woff2") format("woff2"), url("../assets/fonts/quicksand-v30-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* quicksand-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    src: url("../assets/fonts/quicksand-v30-latin-700.woff2") format("woff2"), url("../assets/fonts/quicksand-v30-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
}
@layer sections {
  header {
    position: sticky;
    width: 100%;
    top: 0;
    background-color: white;
    z-index: 999;
  }
  @media (max-width: 1023px) {
    header {
      box-shadow: var(--shadow);
    }
  }
  header #header {
    position: relative;
    z-index: 3;
  }
  header .menu-cta {
    min-width: 200px;
  }
  header .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    min-height: 77.59px;
  }
  header .container .cta-wrapper,
  header .container .menu-icon {
    padding: 10px 0;
  }
  header .navigation {
    box-sizing: border-box;
    font-size: 22.4px;
    display: none;
    min-height: 100%;
    gap: 25px;
    padding-top: 5px;
    align-self: stretch;
    align-items: center;
  }
  header .navigation a {
    color: var(--clr-primary);
    font-weight: 800;
  }
  header .cta-wrapper {
    display: none;
  }
  header .nav-item.has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
  }
  header .nav-item.has-dropdown .menu-hoverArea {
    display: flex;
    align-items: center;
  }
  header .nav-item.has-dropdown.active a {
    color: var(--clr-gradient);
  }
  #userCounter p {
    text-align: center;
  }
  #userCounter strong,
  #userCounter .fa-users {
    font-size: 1.2em;
    color: var(--clr-primary);
  }
  @media (min-width: 1024px) {
    header nav.navigation {
      display: flex;
    }
    header .button-wrapper {
      margin-top: 0;
      display: inline;
    }
    header .cta-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    header .nav-phone-icon {
      display: inline;
      margin-right: 25px;
      margin-top: 5px;
    }
  }
  #nav-panel {
    display: none;
  }
  @media (min-width: 1024px) {
    #nav-panel {
      display: block;
    }
  }
  #nav-panel {
    background-color: white;
    overflow-y: visible;
    position: absolute;
    z-index: 2;
    top: 76px;
    left: 0;
    right: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: default;
  }
  #nav-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    background-color: var(--clr-secondary-light);
  }
  #nav-panel .nav-panel-inner {
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: translate 0.25s ease-in-out, max-height 0.25s ease-in-out, height 0.25s ease-in-out;
  }
  #nav-panel .nav-panel-inner > * {
    position: relative;
    z-index: 1;
  }
  #nav-panel .nav-panel-inner::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    border-bottom: solid white 1px;
    transition: border-color 0.25s ease-in-out;
  }
  #nav-panel .nav-panel-inner::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    transition: height 0.25s ease-in-out;
  }
  #nav-panel.is-out .nav-panel-inner {
    max-height: 254px;
  }
  #nav-panel.is-out .nav-panel-inner::before {
    border-bottom: solid var(--clr-primary) 1px;
  }
  #nav-panel.is-out .nav-panel-inner::after {
    height: 330px;
  }
  #nav-panel .nav-panel-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
  }
  .nav-panel-left,
  .nav-panel-right {
    box-sizing: border-box;
    padding: 25px 0;
  }
  .nav-panel-left a,
  .nav-panel-right a {
    padding: 2.5px 0;
    font-size: 19.2px;
    font-weight: 800;
  }
  .nav-panel-left {
    width: 255px;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    margin-left: 85px;
  }
  .nav-panel-left .dropdown-link-element {
    max-width: 200px;
  }
  .nav-panel-left .dropdown-link-element a {
    background-color: var(--clr-secondary-light);
    padding: 5px 10px;
    border-radius: 5px;
    width: 100%;
    align-items: center;
    transition: transform 0.25s ease-in-out, width 0.25s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, filter 0.25s ease-in-out;
  }
  .nav-panel-left .dropdown-link-element .icon {
    transition: filter 0.25s ease-in-out, transform 0.25s ease-in-out;
    filter: none;
  }
  .nav-panel-left .dropdown-link-element.active a {
    background-color: var(--clr-primary);
    color: white;
  }
  .nav-panel-left .dropdown-link-element.active a .icon {
    filter: brightness(0) invert(1);
  }
  .nav-panel-left .dropdown-link-element.active a .icon {
    transform: scale(1.15);
  }
  .nav-panel-right {
    max-width: 533px;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    margin: 0;
    margin-top: 1px;
    background-color: white;
    padding-left: 50px;
  }
  .nav-panel-right .nav-panel-element {
    transition: transform 0.25s ease-in-out;
    transform: translateY(calc(-100% + 77px));
  }
  .nav-panel-right a {
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.25s ease-in-out, width 0.25s ease-in-out, background-color 0.25s ease-in-out;
  }
  .nav-panel-right .dropdown-links {
    display: block;
    position: relative;
  }
  .nav-panel-right .dropdown-link-element a:hover {
    width: 91%;
    transform: scale(1.1) translateX(4.5%);
  }
  .dropdown-links {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: flex-start;
  }
  .dropdown-links-nested {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-direction: column;
    inset: 0;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
    /*
    Zuerst : Enter-From Klasse um zur Start-Position teleportieren
    Dann : Visible -> Außerhalb des Sichtfelds sichtbar machen und in die mitte sliden

    Bei Exit:
    Zuerst: Exit-Klasse zum ausblenden und raussliden
    Dann : Wenn Animation vorbei, visible Klasse entfernen (und exit, enter-from),
    sonst slided das Element sichtbar zur neuen Position, wenn es das nächste Mal enter-from bekommt (sollte ja teleportierten)
    */
  }
  .dropdown-links-nested.enter-from-top {
    transform: translateY(-254px);
  }
  .dropdown-links-nested.enter-from-bottom {
    transform: translateY(254px);
  }
  .dropdown-links-nested.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: translateY(0);
  }
  .dropdown-links-nested {
    /* Exit-Varianten (werden per JS kurz gesetzt) */
  }
  .dropdown-links-nested.exit-up {
    opacity: 0;
    transform: translateY(-254px);
  }
  .dropdown-links-nested.exit-down {
    opacity: 0;
    transform: translateY(254px);
  }
  .dropdown-links-nested.exit-up, .dropdown-links-nested.exit-down {
    pointer-events: none;
  }
  .dropdown-link-wrapper {
    width: 100%;
  }
  .dropdown-link-element {
    display: flex;
  }
  .dropdown-link-element a {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .dropdown-link-element .icon {
    transition: transform 0.25s ease-in-out;
    width: 26px;
    height: 26px;
  }
  #anchor-links-treppenlift {
    height: 203px;
  }
}
@layer sections {
  .fa-phone {
    font-size: 30px;
    margin-bottom: 4px;
    color: var(--clr-primary);
  }
  .hamburger-menu {
    display: inline-block;
    margin-top: 13px;
    margin-left: 20px;
  }
  .line {
    width: 35px;
    height: 2.5px;
    background-color: var(--clr-primary);
  }
  .line2 {
    height: 1.5px;
    margin: 10px 0;
    background-color: var(--clr-primary);
  }
  .close-button {
    display: inline-block;
    margin-left: 20px;
  }
  .close-button-img {
    margin-top: 5px;
  }
  .mobile-menu {
    position: fixed;
    box-sizing: border-box;
    min-width: min(400px, 100vw);
    max-width: min(400px, 100vw);
    top: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    background-color: var(--clr-primary);
    color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .mobile-menu .menu-cta {
    min-width: 200px;
  }
  .mobile-menu .fa-phone {
    color: white;
    margin-bottom: 6px;
  }
  .mobile-menu ul {
    list-style: none;
    text-decoration: none;
    padding: 0px;
    width: 100%;
    font-size: 16px;
  }
  .mobile-menu a {
    font-size: 16px;
  }
  .mobile-menu .mobile-menu-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    width: 100%;
    padding: 0 25px;
  }
  .mobile-menu .mobile-menu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu .mobile-menu-link {
    position: relative;
  }
  .mobile-menu {
    /* START: Button (chevron button "/\" und "\/" ) */
  }
  .mobile-menu .chev-btn-wrapper {
    position: absolute;
    top: 0;
    right: 0;
  }
  .mobile-menu .chev-btn {
    --rot-left: -45deg;
    --rot-right: 45deg;
    --overlap: 1px;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(0, -6px);
    transition: all 0.25s;
  }
  .mobile-menu .chev-btn.closed {
    --rot-left: 45deg;
    --rot-right: -45deg;
    transform: translate(0, 2.4px);
  }
  .mobile-menu .chev-btn::before, .mobile-menu .chev-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 3px;
    width: 12px;
    background: white;
    border-radius: 2px;
    transition: transform 0.25s ease;
    will-change: transform;
  }
  .mobile-menu .chev-btn::before {
    transform-origin: 100% 50%;
    transform: translate(calc(-100% + var(--overlap)), -50%) rotate(var(--rot-left));
  }
  .mobile-menu .chev-btn::after {
    transform-origin: 0% 50%;
    transform: translate(calc(0% - var(--overlap)), -50%) rotate(var(--rot-right));
  }
  .mobile-menu {
    /* ENDE : Button (chevron button "/\" und "\/" ) */
  }
  .mobile-menu-show {
    transform: translateX(0);
  }
  .mobile-menu-hide {
    transform: translateX(100%);
  }
  .mobile-cta.container {
    display: block;
  }
  .mobile-menu-headline {
    font-weight: 800;
    font-size: 22.4px;
    color: white;
  }
  .mobile-menu-header {
    border-bottom: 1px solid white;
    height: 67px;
    flex: 0 0 auto;
  }
  .mobile-menu-header .container {
    align-items: center;
    min-height: 100%;
  }
  ul.mobile-menu-links {
    width: 100%;
    margin: 0;
  }
  ul.mobile-menu-links.nested-links {
    width: auto;
    box-sizing: border-box;
    margin-left: 25px;
    transition: max-height 0.25s ease-in-out;
    overflow: hidden;
    max-height: 300px;
  }
  ul.mobile-menu-links.nested-links.collapsed {
    max-height: 0;
  }
  ul.mobile-menu-links.nested-links .mobile-menu-item:last-of-type {
    border-bottom: 0;
  }
  ul.mobile-menu-links li {
    padding: 10px 0;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  ul.mobile-menu-links li a {
    color: white;
  }
  ul.mobile-menu-links .fa-angle-left {
    float: right;
  }
  .inner-menu {
    padding: 5px 0 0 20px;
  }
  .inner-menu li {
    border-bottom: 0;
  }
  .inner-menu .last-elment {
    padding-bottom: 0;
  }
  @media (min-width: 1024px) {
    .menu-icon {
      display: none;
    }
    .mobile-menu {
      display: none;
    }
  }
  #mobile-menu {
    overflow: hidden;
    gap: 15px;
    padding-bottom: 15px;
  }
  #mobile-menu .mobile-menu-item > .mobile-menu-link {
    display: block;
  }
  #mobile-menu .mobile-menu-link {
    padding-right: 25px;
  }
  #mobile-menu .mobile-menu-row {
    display: flex;
    justify-content: space-between;
  }
}
/*_____FOOTER*/
@layer sections {
  #footer {
    margin-top: max(25px, auto);
    padding-top: 25px;
    background-color: var(--clr-secondary-light);
  }
  #footer .container.footer-grid {
    max-width: min(90%, 1090px);
    display: grid;
    row-gap: 50px;
    -moz-column-gap: 25px;
         column-gap: 25px;
    /* Mobile default: alles untereinander */
    grid-template-columns: 1fr;
    grid-template-areas: "entdecken" "mitmachen" "kontakt" "about";
  }
  @media (min-width: 550px) {
    #footer .container.footer-grid {
      /* Ab 550px:
      2 Spalten / 2 Reihen:
      oben: entdecken | kontakt
      unten: mitmachen | about */
      grid-template-columns: 1fr minmax(280px, 1fr);
      grid-template-areas: "entdecken kontakt" "mitmachen about";
    }
  }
  @media (min-width: 1024px) {
    #footer .container.footer-grid {
      justify-content: space-around;
    }
  }
  @media (min-width: 1366px) {
    #footer .container.footer-grid {
      /* Ab 1366px:
      alles in einer Reihe:
      entdecken -> mitmachen -> kontakt -> about */
      grid-template-columns: 1fr 1fr minmax(280px, 1fr) 280px;
      grid-template-areas: "entdecken mitmachen kontakt about";
    }
  }
  #footer .container.footer-grid.-partner-werden {
    /* Mobile default: alles untereinander */
    grid-template-columns: 1fr;
    grid-template-areas: "entdecken" "mitmachen" "kontakt";
  }
  @media (min-width: 550px) {
    #footer .container.footer-grid.-partner-werden {
      grid-template-columns: 1fr minmax(280px, 1fr);
      grid-template-areas: "entdecken entdecken" "mitmachen mitmachen" "kontakt   kontakt";
    }
  }
  @media (min-width: 590px) {
    #footer .container.footer-grid.-partner-werden {
      grid-template-columns: 1fr minmax(280px, 1fr);
      grid-template-areas: "entdecken kontakt" "mitmachen mitmachen";
    }
  }
  @media (min-width: 1024px) {
    #footer .container.footer-grid.-partner-werden {
      justify-content: space-around;
      grid-template-columns: 1fr 1fr minmax(280px, 1fr);
      grid-template-areas: "entdecken mitmachen kontakt";
    }
  }
  #footer {
    /* Zuordnung der Bereiche */
  }
  #footer .footer-entdecken {
    grid-area: entdecken;
  }
  #footer .footer-mitmachen {
    grid-area: mitmachen;
  }
  #footer .footer-kontakt {
    grid-area: kontakt;
  }
  #footer .footer-about {
    grid-area: about;
  }
  #footer a {
    color: black;
  }
  #footer .fa-phone,
  #footer .fa-comment-dots,
  #footer h3,
  #footer .footer-phone,
  #footer .phone-link {
    color: var(--clr-primary);
  }
  #footer .fa-phone,
  #footer .footer-phone {
    font-size: 25.6px;
  }
  #footer .fa-phone {
    margin-right: 15px;
    margin-bottom: 0;
  }
  #footer .fa-user-helmet-safety {
    margin-right: 12px;
  }
  #footer .footer-social {
    display: flex;
  }
  #footer .social-circle {
    margin-right: 5px;
  }
  #footer .social-circle svg {
    margin: 0px;
    color: white;
  }
  #footer .social-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-primary);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    transition: all 0.2s;
    box-shadow: var(--shadow);
  }
  #footer .social-circle:hover {
    background: var(--clr-primary-gradient);
    transform: scale(110%);
    transition: all 0.2s;
  }
  #footer .footer-phone a {
    font-weight: 800;
  }
  #footer hr {
    width: 90%;
    height: 0px;
    border: 1px solid var(--clr-primary);
  }
  #footer .footer-rechtliches {
    display: flex;
    flex-direction: row;
    padding: 15px 0 25px;
    justify-content: space-between;
  }
  @media (min-width: 1024px) {
    #footer .footer-rechtliches {
      justify-content: space-around;
    }
  }
  #footer .footer-container {
    display: flex;
    flex-direction: column;
  }
  #footer .footer-container > * {
    margin: 0;
  }
  #footer .footer-container {
    --flow-space: 15px;
  }
  #footer .footer-container > * + * {
    margin-block-start: var(--flow-space);
  }
  #footer .footer-container > h2 + * {
    --flow-space: 10px;
  }
  #footer .footer-box {
    background-color: var(--clr-primary);
    padding: 15px;
  }
  #footer .footer-box .footer-links,
  #footer .footer-box .fa-phone {
    font-size: 16px;
  }
  #footer .footer-box .partner-werden {
    margin-bottom: 15px;
  }
  #footer .footer-box h3,
  #footer .footer-box a,
  #footer .footer-box .fa-phone,
  #footer .footer-box .fa-user-helmet-safety {
    color: white;
  }
  #footer .footer-box {
    box-sizing: border-box;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    border-radius: 5px;
  }
  .lk-toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 0.95rem;
    line-height: 1.2;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .lk-toast.is-visible {
    opacity: 1;
  }
}
@layer base {
  #header {
    box-shadow: var(--shadow);
  }
  .danke-wrapper {
    box-sizing: border-box;
  }
  .danke-header,
  .danke-kontakt {
    text-align: center;
    margin: 50px 0;
  }
  .danke-header {
    margin-top: 0;
  }
  h2 {
    font-size: 1.6rem;
  }
  h1 {
    position: relative;
    z-index: 1;
  }
  .blue-box {
    border-radius: 0.5rem;
    background-color: var(--clr-secondary-light);
    box-sizing: border-box;
    max-width: min(530px, 100%);
    margin-left: auto;
    margin-right: auto;
    transition: height 3s ease;
    animation-delay: var(--start-box);
    overflow: hidden;
    max-height: 0;
    padding: 0 2rem;
  }
  @media (min-width: 400px) {
    .blue-box {
      padding: 0 4rem;
    }
  }
  .blue-box {
    transition: none;
    animation: box-expand 3s linear 1.5s forwards;
  }
  @keyframes box-expand {
    0% {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    60% {
      max-height: 250px;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    100% {
      max-height: 600px;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
  }
  :root {
    --start-box: 2s;
    --slot: 1s; /* Abstand zwischen den Items */
    --reveal: 1s; /* Dauer des Fade/Expand */
    --li-max: 240px;
  }
  @media (min-width: 400px) {
    :root {
      --li-max: 140px;
    }
  }
  @media (min-width: 550px) {
    :root {
      --li-max: 100px;
    }
  }
  /* Staffelung der Delays */
  .custom-list li {
    --idx: 0;
  }
  .custom-list li:nth-child(2) {
    --idx: 1;
  }
  .custom-list li:nth-child(3) {
    --idx: 2;
  }
  @keyframes li-reveal {
    0% {
      opacity: 0;
      max-height: 0;
      transform: translateY(-2rem);
    }
    100% {
      opacity: 1;
      max-height: var(--li-max);
      transform: translateY(0);
    }
  }
  .custom-list li:nth-child(1) {
    animation-delay: calc(var(--start-box) + var(--slot) * 0);
  }
  .custom-list li:nth-child(2) {
    animation-delay: calc(var(--start-box) + var(--slot) * 1);
  }
  .custom-list li:nth-child(3) {
    animation-delay: calc(var(--start-box) + var(--slot) * 2);
  }
  :root {
    --icon-checked: 3rem;
  }
  @media (min-width: 550px) {
    :root {
      --icon-checked: 5rem;
    }
  }
  @media (min-width: 768px) {
    :root {
      --icon-checked: 3rem;
    }
  }
  :root {
    --scroll-offset: 0px;
  }
  html {
    scroll-behavior: smooth;
    font-size: 10px;
    font-family: "Quicksand", sans-serif;
    overflow-y: scroll;
  }
  p {
    font-size: 1.6rem;
  }
  h1 {
    font-size: 2.88rem;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .custom-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    overflow-anchor: none;
  }
  .custom-list li {
    z-index: 2;
    display: grid;
    grid-template-columns: 3rem 1fr;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    align-items: flex-start;
    min-height: 3rem;
    position: relative;
    opacity: 0;
    max-height: 0;
    transform: translateY(-1rem);
    animation: li-reveal var(--reveal) ease forwards;
    animation-delay: calc(var(--start-box) + var(--slot) * var(--idx));
  }
  .custom-list li .lp-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    font-size: calc(3rem * 0.58);
    --size: 3rem;
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: 50%;
    background: var(--clr-primary);
    color: white;
  }
  .custom-list li .lp-icon.fa-check {
    font-size: calc(3rem * 0.66);
  }
  .custom-list li .lp-icon.fa-phone {
    font-size: calc(3rem * 0.52);
  }
  .custom-list li .lp-icon {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .custom-list li .lp-icon .check,
  .custom-list li .lp-icon .envelope,
  .custom-list li .lp-icon .phone {
    display: inline-block;
    background-color: white;
    border-radius: 50%;
  }
  .custom-list li .lp-icon .check {
    -webkit-mask: url("/assets/img/icon/check-solid-full.svg") no-repeat center/contain;
    mask: url("/assets/img/icon/check-solid-full.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
  }
  .custom-list li .lp-icon .envelope,
  .custom-list li .lp-icon .phone {
    width: 22px;
    height: 22px;
  }
  .custom-list li .lp-icon .envelope {
    -webkit-mask: url("/assets/img/icon/envelope-solid-full.svg") no-repeat center/contain;
    mask: url("/assets/img/icon/envelope-solid-full.svg") no-repeat center/contain;
  }
  .custom-list li .lp-icon .phone {
    -webkit-mask: url("/assets/img/icon/phone-solid-full.svg") no-repeat center/contain;
    mask: url("/assets/img/icon/phone-solid-full.svg") no-repeat center/contain;
  }
  .custom-list li::before {
    /* Animation zeitlich auf das jeweilige LI abgestimmt */
    animation: line-grow 1s ease forwards;
    animation-delay: calc(1s + var(--slot));
    z-index: 0;
    content: "";
    position: absolute;
    left: calc(3rem * 0.5 - 0.5px);
    width: 1px;
    top: 3rem; /* knapp unter Icon-Zentrum */
    bottom: -4.1rem; /* ragt in den gap */
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-gradient) 100%);
    transform-origin: top;
    transform: scaleY(0);
    /* EINMAL definieren: Dauer + Delay korrekt berechnet */
    animation: line-grow 0.8s ease forwards;
    animation-delay: calc(var(--start-box) + var(--slot) * var(--idx) + var(--reveal) * 0.7);
  }
  .custom-list li.light::before {
    background: linear-gradient(180deg, var(--clr-primary-gradient) 0%, var(--clr-secondary) 100%);
  }
  .custom-list li:last-child::before {
    content: none;
  }
  .custom-list li .lp-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .custom-list li {
      animation: none;
      opacity: 1;
      max-height: none;
      transform: none;
    }
  }
  @keyframes li-reveal {
    0% {
      opacity: 0;
      max-height: 0;
      transform: translateY(-1rem);
    }
    100% {
      opacity: 1;
      max-height: var(--li-max);
      transform: translateY(0);
    }
  }
  @keyframes line-grow {
    0% {
      transform: scaleY(0);
    }
    100% {
      transform: scaleY(1);
    }
  }
  .custom-list {
    counter-reset: li;
  }
  .custom-list li {
    counter-increment: li;
  }
  .custom-list {
    --i: calc(counter(li) - 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .custom-list li,
    .custom-list > li::before {
      animation: none !important;
    }
    .custom-list li {
      opacity: 1;
      max-height: none;
      transform: none;
    }
  }
  .danke-kontakt p {
    margin-bottom: 2rem;
  }
  .danke-kontakt {
    margin-bottom: 50px;
  }
  .t-link {
    gap: 1rem;
  }
  .t-link p {
    display: none;
  }
  @media (min-width: 550px) {
    .t-link p {
      display: block;
    }
  }
  @property --rot {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
  .wrapper-paperplane {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  .paperplane {
    position: relative;
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
    left: 0;
  }
  .plane {
    position: absolute;
    left: 10rem;
    top: 0;
    animation: move 6s linear 2s infinite;
  }
  .plane-stage {
    position: absolute;
    left: 100px;
    top: 55px;
    --rot: 0deg;
    /* Einmalige Intro-Animation */
    animation: intro 2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .plane-loop {
    transform-origin: -70px 10px;
    transform: rotate(var(--rot));
  }
  /* ===== Keyframes ===== */
  /* ===== Keyframes: Fly-in + Loop in einem Rutsch ===== */
  @keyframes intro {
    /* Abschnitt 1: Einflug */
    0% {
      transform: translate3d(-65vw, -16rem, 0) rotate(25deg);
      animation-timing-function: linear;
    }
    10% {
      transform: translate3d(-50vw, 0, 0) rotate(40deg);
      animation-timing-function: linear;
    }
    20% {
      transform: translate3d(-25vw, 12rem, 0) rotate(35deg);
      animation-timing-function: linear;
    }
    30% {
      transform: translate3d(-15vw, 16rem, 0) rotate(0deg);
      animation-timing-function: linear;
    }
    40% {
      transform: translate3d(-5rem, -2rem, 0) rotate(-100deg);
      animation-timing-function: linear;
    }
    50% {
      transform: translate3d(-20rem, -8rem, 0) rotate(-180deg);
      animation-timing-function: linear;
    }
    60% {
      transform: translate3d(-30rem, -2rem, 0) rotate(-210deg);
      animation-timing-function: linear;
    }
    70% {
      transform: translate3d(-25rem, 8rem, 0) rotate(-240deg);
      animation-timing-function: linear;
    }
    80% {
      transform: translate3d(-20rem, 10rem, 0) rotate(-370deg);
      animation-timing-function: linear;
    }
    90% {
      transform: translate3d(-15rem, 4rem, 0) rotate(-380deg);
      animation-timing-function: linear;
    }
    /* Abschnitt 2: Zielposition + Loop vollendet */
    100% {
      transform: translate3d(-10rem, 0, 0) rotate(-360deg);
    }
  }
  /* Optional: Rücksicht auf reduzierte Bewegungen */
  @media (prefers-reduced-motion: reduce) {
    .plane-stage,
    .plane-loop,
    .plane {
      animation: none !important;
    }
  }
  @keyframes move {
    0% {
      transform: translateX(0) translateY(0) rotateX(0);
    }
    25% {
      transform: translateX(0) translateY(-30px) rotateX(40deg);
    }
    50% {
      transform: translateX(0) rotateX(0) translateY(0);
    }
    75% {
      transform: translateX(0) rotateX(-40deg) translateY(30px);
    }
    100% {
      transform: translateX(0) rotateX(0) translateY(0);
    }
  }
  .wingRight {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 22.5px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 115px solid var(--clr-secondary);
    transform: rotate(62deg);
    z-index: 4;
  }
  .bottom {
    position: relative;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 18px solid var(--clr-primary);
    top: 69px;
    transform: rotate(-25deg);
    left: -57px;
    z-index: 3;
  }
  .top {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 30px solid var(--clr-primary-gradient);
    top: 65px;
    transform: rotate(5deg);
    left: -60px;
    z-index: 1;
  }
  .middle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 135px solid var(--clr-primary-gradient);
    top: -13.5px;
    transform: rotate(72deg);
    left: -7.5px;
    z-index: 2;
  }
  .wingLeft {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-bottom: 135px solid var(--clr-secondary);
    transform: rotate(78deg) skewY(-35deg);
    left: -18.5px;
    z-index: 3;
    top: -30px;
  }
  .clouds {
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  @keyframes cloud {
    from {
      left: -100px;
    }
    to {
      left: calc(100% + 100px);
    }
  }
  .cloudOne,
  .cloudTwo,
  .cloudThree {
    position: absolute;
    width: 50px;
    height: 25px;
    background-color: var(--clr-secondary-light);
    border-radius: 100px 100px 0 0;
  }
  .cloudOne {
    top: 0;
    left: 0;
    animation: cloud 12s linear infinite reverse;
  }
  .cloudTwo {
    top: 50%;
    transform: translateY(-50%);
    left: 100px;
    animation: cloud 8s linear infinite reverse;
  }
  .cloudThree {
    bottom: 0px;
    left: 50px;
    animation: cloud 10s linear infinite reverse;
  }
  .cloudOne:before,
  .cloudTwo:before,
  .cloudThree:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 12.5px;
    background-color: var(--clr-secondary-light);
    border-radius: 100px 100px 0 0;
    left: -20px;
    top: 12.5px;
    box-shadow: 65px 0 var(--clr-secondary-light);
  }
  .balanced {
    text-wrap: balance;
  }
  .ww-when-small {
    white-space: normal;
    word-wrap: normal;
    text-wrap: pretty;
  }
  .no-wrap {
    white-space: nowrap; /* Verhindert Zeilenumbruch im <strong>-Text */
  }
  .footer_legal {
    gap: 2rem;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .footer_upper-segment {
    padding-bottom: 0;
  }
  .footer_legal-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  @media (min-width: 400px) {
    .footer_legal-list {
      gap: 2rem;
    }
  }
  @media (min-width: 550px) {
    .footer_legal-list {
      gap: 4rem;
    }
  }
  .icon-and-label > i {
    display: none !important;
  }
  @media (min-width: 550px) {
    .icon-and-label > i {
      display: inline-block !important;
    }
  }
  .footer_social-list {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    justify-content: center;
  }
  .footer_link.impressum {
    box-sizing: border-box;
    padding-right: 1.19rem;
  }
  .main {
    box-sizing: border-box;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  footer {
    margin-top: auto;
  }
  header {
    height: 70px;
  }
  header .container {
    display: flex;
    flex-direction: row;
    max-height: 100%;
    box-sizing: border-box;
  }
  header .wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1440px;
  }
  @media (min-width: 1024px) {
    .container {
      width: 95%;
      max-width: 1090px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  body {
    font-family: "Quicksand", sans-serif;
  }
  .footer-rechtliches {
    display: flex;
    padding-bottom: 30px;
    color: black;
    font-weight: 400;
    justify-content: space-between;
    font-size: 12.8px;
  }
  @media (min-width: 550px) {
    .footer-rechtliches {
      justify-content: space-around;
    }
  }
  .footer-rechtliches span {
    margin-left: 25px;
    margin-right: 25px;
  }
  header {
    min-height: 74px;
  }
  header .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    width: 90%;
    margin: 0px auto;
    display: flex;
  }
  header .container .logo {
    padding: 0;
  }
  header .telefon-nummer {
    font-weight: 600;
    font-size: 17.6px;
  }
  header i,
  header .telefon-nummer {
    color: var(--clr-primary);
    text-align: center;
  }
  header .fa-phone {
    margin-right: 0.5rem;
    font-size: 3rem;
    transform: translateY(1px);
  }
  a {
    text-decoration: none;
  }
  a:hover, a:focus, a:active, a:visited {
    text-decoration: none;
  }
  .wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1440px;
  }
  .flex {
    display: flex;
  }
  .justify-center {
    justify-content: center;
    align-items: center;
  }
  .header-tellink {
    gap: 0.5rem;
  }
}/*# sourceMappingURL=style_danke.css.map */