/* COLORS */
/* FONTS */
/* >= 768px */
@media screen and (min-width: 768px) {
  #node-leistung #intro {
    padding-top: 100px;
  }
  #node-leistung #intro .introwrapper .button {
    width: auto;
    display: inline-block;
  }
  #node-leistung #intro .introwrapper .button.tf-button {
    margin-top: 0;
    margin-left: 15px;
  }
  #node-leistung #leistungen .leistungen .leistung .button {
    width: auto;
  }
  #node-leistung #leistungen #paket {
    padding: 50px 40px;
  }
  #node-leistung #benefits .swiper-navigation {
    display: none !important;
  }
}
/* >= 1024 */
@media screen and (min-width: 1023px) {
  #main.promotion #intro .section {
    min-height: calc(100vh - 16.8vw - 44px);
  }
  #node-leistung #intro-wrapper {
    margin-bottom: 20vh;
  }
  #node-leistung #intro {
    padding-top: 9.6vw;
  }
  #node-leistung #intro .section {
    min-height: calc(100vh - 16.8vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #node-leistung #intro .introwrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 4.8vw;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "titel icon" "text icon" "button void";
  }
  #node-leistung #intro .introwrapper .icon {
    grid-area: icon;
    height: auto;
    width: auto;
    padding: 0vw 2.95vw 4.8vw 1.95vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
  }
  #node-leistung #intro .introwrapper .icon .lottie {
    height: auto;
    width: auto;
  }
  #node-leistung #intro .introwrapper .h1 {
    grid-area: titel;
    margin-bottom: 4.7vw;
  }
  #node-leistung #intro .introwrapper .text {
    grid-area: text;
    margin-bottom: 2.6vw;
  }
  #node-leistung #intro .introwrapper .button-wrapper {
    grid-area: button;
    margin-bottom: 4.7vw;
  }
  #node-leistung #intro .introwrapper .button {
    width: auto;
    display: inline-block;
  }
  #node-leistung #intro .video::before {
    height: 7.2vw;
  }
  #node-leistung #intro .video .video-wrapper {
    border-radius: 1.04vw;
  }
  #node-leistung #vorteile {
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
  #node-leistung #vorteile .h4 {
    padding-right: 20%;
    margin-bottom: 2.9vw;
  }
  #node-leistung #vorteile .text {
    padding-right: 20%;
  }
  #node-leistung #vorteile .vorteile {
    display: inline-flex;
    flex-direction: row;
    margin-top: 4.8vw;
    gap: 0.975vw;
  }
  #node-leistung #vorteile .vorteile .vorteil {
    padding: 1.95vw;
    gap: 1.95vw;
    border-radius: 0.625vw;
  }
  #node-leistung #vorteile .vorteile .vorteil .icon {
    height: 3.9vw;
    width: 3.9vw;
  }
  #node-leistung #vorteile .vorteile .vorteil .titel {
    white-space: nowrap;
  }
  #node-leistung #leistungen {
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
  #node-leistung #leistungen .h1 {
    width: 60%;
    margin-bottom: 4.8vw;
  }
  #node-leistung #leistungen .leistungen {
    margin-bottom: 5.2vw;
  }
  #node-leistung #leistungen .leistungen .leistung {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8vw;
    margin-bottom: 7.8vw;
  }
  #node-leistung #leistungen .leistungen .leistung .details {
    position: relative;
  }
  #node-leistung #leistungen .leistungen .leistung .details .details-wrapper {
    padding: 1.95vw 0.975vw;
    border-radius: 0.625vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #node-leistung #leistungen .leistungen .leistung .details .details-wrapper.fixed {
    position: fixed;
    left: 8.33vw;
    top: 7.8vw;
    width: 39.27vw;
  }
  #node-leistung #leistungen .leistungen .leistung .details .details-wrapper.bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #node-leistung #leistungen .leistungen .leistung .titel {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen .leistungen .leistung .text {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen .leistungen .leistung .price-reduced {
    padding: 1.95vw;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen .leistungen .leistung .price-reduced strong {
    font-size: 2.53vw;
    line-height: 2.53vw;
  }
  #node-leistung #leistungen .leistungen .leistung .price-reduced .icon-info {
    font-size: 1.25vw;
    line-height: 1.25vw;
    margin-left: 0.8vw;
  }
  #node-leistung #leistungen .leistungen .leistung .price {
    margin-top: -0.975;
    padding: 2.4vw 1.95vw 1.46vw 1.95vw;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen .leistungen .leistung .button {
    display: none;
  }
  #node-leistung #leistungen .leistungen .leistung .detailleistungen {
    display: block !important;
    border-top: 1px solid #fff;
  }
  #node-leistung #leistungen .leistungen .leistung .detailleistungen > .titel {
    display: none;
  }
  #node-leistung #leistungen .leistungen .leistung .detailleistungen .detailleistung {
    display: flex;
    padding: 1.95vw 0;
    border-bottom: 1px solid #fff;
    align-items: center;
  }
  #node-leistung #leistungen .leistungen .leistung .detailleistungen .detailleistung .icon {
    flex-shrink: 0;
    width: 3.9vw;
    height: 3.9vw;
    margin-right: 1.95vw;
  }
  #node-leistung #leistungen .leistungen .leistung .detailleistungen .detailleistung .titel {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    font-weight: 400;
    color: #fff;
    text-align: left;
    margin-bottom: 0;
  }
  #node-leistung #leistungen #paket + #extras {
    margin-bottom: 0;
    margin-top: 4.165vw;
  }
  #node-leistung #leistungen #extras .h4 {
    margin-bottom: 2.9vw;
  }
  #node-leistung #leistungen #extras .extras {
    grid-template-columns: 1fr 1fr;
    gap: 0.975vw;
    margin-bottom: 4.8vw;
  }
  #node-leistung #leistungen #extras .extras .extra {
    padding: 1.95vw;
    display: flex;
    flex-direction: column;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen #extras .extras .extra .titel {
    margin-bottom: 0.975vw;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
  #node-leistung #leistungen #extras .extras .extra .text {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen #extras .extras .extra .price {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    margin-top: auto;
  }
  #node-leistung #leistungen #extras .extras.teaser {
    display: none;
  }
  #node-leistung #leistungen #extras .more-extras .button {
    display: none;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content {
    display: block !important;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content .h4 {
    display: none;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content .extras {
    grid-template-columns: 1fr 1fr;
    gap: 0.975vw;
    display: grid;
    margin-bottom: 0;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content .extras .extra {
    padding: 1.95vw;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content .extras .extra .titel {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen #extras .more-extras .overlay-content .extras .extra .text {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen #paket {
    padding: 4.165vw;
    margin: 14.58vw 4.165vw 0 4.165vw;
    border-radius: 1.04vw;
  }
  #node-leistung #leistungen #paket .h1 {
    margin-bottom: 4.8vw;
    width: 70%;
  }
  #node-leistung #leistungen #paket .paket .leistung {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8vw;
    grid-template-rows: auto 1fr;
    grid-template-areas: "price text" "price void";
  }
  #node-leistung #leistungen #paket .paket .leistung .details {
    grid-area: price;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .details-wrapper {
    padding: 1.95vw 0.975vw;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .details-wrapper .titel {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .details-wrapper .text {
    margin-bottom: 0.975vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .details-wrapper .text-paket-info {
    padding: 2.9vw 0.975vw 0 0.975vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .price-reduced {
    padding: 1.95vw;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .price-reduced strong {
    font-size: 2.53vw;
    line-height: 2.53vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .details .price {
    margin-top: -0.975;
    padding: 2.4vw 1.95vw 1.46vw 1.95vw;
    border-radius: 0.625vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .text-paket {
    margin-top: 0;
    padding: 1.95vw 0;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen {
    display: block !important;
    margin-top: 0;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen > .titel {
    display: none;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen .wrapper {
    border-bottom: 1px solid #fff;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen .detailleistung {
    gap: 0;
    padding: 1.95vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen .detailleistung .icon {
    flex-shrink: 0;
    width: 3.9vw;
    height: 3.9vw;
    margin-right: 1.95vw;
  }
  #node-leistung #leistungen #paket .paket .leistung .detailleistungen .detailleistung .titel {
    font-weight: 400;
  }
  #node-leistung #benefits {
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
  #node-leistung #benefits .section {
    display: flex;
    align-items: flex-start;
  }
  #node-leistung #benefits .section .h4 {
    padding-right: 4.8vw;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100vw - 100px)*0.45);
    width: calc(83.34vw*0.45);
  }
  #node-leistung #benefits .section .h4.fixed {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 8.33vw;
  }
  #node-leistung #benefits .section .h4.bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
  }
  #node-leistung #benefits .section .benefits {
    width: 55%;
    margin-left: 45%;
    padding-bottom: 0;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4.8vw;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper .benefit {
    background-color: #111111;
    border-radius: 0;
    display: block;
    padding: 0;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper .benefit .icon {
    height: 6.83vw;
    width: 6.83vw;
    margin-bottom: 2.9vw;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper .benefit .titel {
    margin-bottom: 1.95vw;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper .benefit .text {
    color: #000000;
    color: #fff;
    margin-bottom: 4.8vw;
  }
  #node-leistung #benefits .section .benefits .swiper-wrapper .benefit .button {
    background-color: #111111;
    width: auto;
    align-self: flex-start;
  }
  #node-leistung #kontakt {
    border-bottom-left-radius: 1.56vw;
    border-bottom-right-radius: 1.56vw;
  }
}
/* >= 1248 */