/*
==================
= PAGE STRUCTURE =
==================
*/

/* Basic Page Structure (Container and Frame Sizes, standard-Padding etc...)

/*PAGE-SEGMENTS
**************************************************************/

body {
    font-family: var(--sans);
    background-color: #f5f3f3;
}

/*contains the whole Page */
.container {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    position: relative;
    flex-grow: 1;
}
section {
    position: relative;
    background-color: #f5f3f3;
    padding-top: 62px;
}
.content > section:last-child {
    padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
    section {
        padding-top: 100px;
    }
    .content > section:last-child {
        padding-bottom: 100px;
    }
}

.section-splitsticky:last-child {
    padding-bottom: 0 !important;
}

.padded {
    padding-left: 30px;
    padding-right: 30px;
}

.padded-s {
    padding-left: 15px;
    padding-right: 15px;
}
/*frame, contains Content-Modules, no padding! Values come from the settings.css file*/
.frame,
[class*=" frame-"],
[class^="frame-"] {
    position: relative;
    width: 100%;
    max-width: var(--grid-width);
    margin: 0 auto;
}

.frame-2,
.width-2 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 2 - var(--grid-gap));
}

.frame-3,
.width-3 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 3 - var(--grid-gap));
}

.frame-4,
.width-4 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 4 - var(--grid-gap));
}
.frame-5,
.width-5 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 5 - var(--grid-gap));
}
.frame-6,
.width-6 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 6 - var(--grid-gap));
}
.frame-7,
.width-7 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 7 - var(--grid-gap));
}
.frame-8,
.width-8 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 8 - var(--grid-gap));
}
.frame-9,
.width-9 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 9 - var(--grid-gap));
}
.frame-10,
.width-10 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 10 - var(--grid-gap));
}
.frame-11,
.width-11 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 11 - var(--grid-gap));
}
.frame-12,
.width-12 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 12 - var(--grid-gap));
}
.frame-13,
.width-13 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 13 - var(--grid-gap));
}
.frame-14,
.width-14 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 14 - var(--grid-gap));
}
.frame-15,
.width-15 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 15 - var(--grid-gap));
}
.frame-16,
.width-16 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 16 - var(--grid-gap));
}
.frame-17,
.width-17 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 17 - var(--grid-gap));
}
.frame-18,
.width-18 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 18 - var(--grid-gap));
}
.frame-19,
.width-19 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 19 - var(--grid-gap));
}
.frame-20,
.width-20 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 20 - var(--grid-gap));
}

/* Utility */

/* Für beige Hintergrund */
[data-sectionbg="beige"] {
    background: #dfddd8 !important;
}
[data-sectionbg="light"] {
    background: #efeceb !important;
}
[data-sectionbg="dark"] {
    background: #333334 !important;
    color: #eee !important;
}
[data-sectionbg="black"] {
    background: #111111 !important;
    color: #eee !important;
}
[data-sectionbg="gradient"] {
    background: linear-gradient(180deg, rgba(239, 236, 235, 0.6) 0%, #dfddd8 100%) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

[data-sectionbg="dark"] h1,
[data-sectionbg="dark"] h2,
[data-sectionbg="dark"] h3,
[data-sectionbg="dark"] h4,
[data-sectionbg="dark"] h5,
[data-sectionbg="dark"] h6,
[data-sectionbg="dark"] p,
[data-sectionbg="dark"] a,
[data-sectionbg="dark"] blockquote,
.txt-white h1,
.txt-white h2,
.txt-white h3,
.txt-white h4,
.txt-white h5,
.txt-white h6,
.txt-white p,
.txt-white a,
.txt-white blockquote {
    color: #eee !important;
}
.sans {
    font-family: var(--sans);
}

.serif {
    font-family: var(--serif) !important;
}

.mono {
    font-family: courier, monospace;
}

.fancy {
    font-family: "Didot", "Times New Roman", Georgia, Times, serif;
    font-feature-settings: "liga" 1;
}

.circle {
    border-radius: 50%;
}

.mask-circle {
    border-radius: 50%;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/*alignment*/

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

.align-justify {
    text-align: justify;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

/*
 Main Content Styles 
*/
.hero-termin-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: block;
}
.termin-icn {
    width: 52px;
    height: 52px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
        radial-gradient(75% 75% at 26.92% 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 90%)
            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 26px;
    overflow: hidden;

    z-index: 99;
    transition: all 0.4s ease-out;
}
.hero-termin-btn-content {
    position: absolute;
    left: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    height: 52px;
}
.termin-icn:hover {
    width: 220px;
}
.termin-btn-txt {
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0;
    white-space: nowrap;
}
.hero-termin-btn-content svg {
    display: block;
    width: 23px;
    max-width: none;
}
.section-hl h1,
.section-hl h2 {
    margin-bottom: 0;
}
.section-hl {
    margin-bottom: 30px;
}
/* Hero */
.section-heroslider {
    padding-top: 0 !important;
}
.section-fullbleedslider,
.layout-fullbleedslider {
    padding-top: 0;
    height: 100vh;
    overflow: visible;
}
.layout-fullbleedslider {
    position: fixed;
    width: 100%;
    height: 100vh;
}
.fullbleedslider-item,
.slide-content {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.section-heroslider .slide-img {
    transition: transform 8s ease-out;
    transform: scale(1);
    will-change: transform;
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    -o-object-position: center;
    object-position: center;
}
.section-heroslider .slide-video {
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    -o-object-position: center;
    object-position: center;
}
@media screen and (min-width: 768px) {
    .section-heroslider .slide-video,
    .section-heroslider .slide-img {
        min-height: 875px;
    }
}
.feature-sticky-m {
    display: block !important;
}

.feature-sticky-dt {
    display: none !important;
}

@media screen and (min-width: 768px) {
    .feature-sticky-m {
        display: none !important;
    }

    .feature-sticky-dt {
        display: block !important;
    }
}
.section-heroslider .swiper-slide-active .slide-img {
    transform: scale(1.05);
}

.section-heroslider .hero-caption {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    max-width: var(--w12);
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
}
@media screen and (min-width: 768px) {
    .section-heroslider .hero-caption {
        bottom: 200px;
    }
}
@media screen and (min-width: 1920px) {
    .section-heroslider .hero-caption {
        width: 100%;
        bottom: 185px;
        max-width: 100%;
        padding-left: 12vw;
        padding-right: 12vw;
    }
}
.hero-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    bottom: 20px;
    right: 30px;
    position: absolute;
    left: auto;
    width: auto;
    z-index: 9;
}
.hero-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Stapel für A/B-Links */
.hero-link-stack {
    position: relative;
    min-height: 1.25em;
} /* verhindert Layout-Jump */
.hero-slide-link {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.35s ease; /* Crossfade-Zeit */
    pointer-events: auto;
    white-space: nowrap;
    white-space: nowrap;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.03em;
    text-align: right;
    text-transform: uppercase;
    text-decoration: none !important;
    display: block;
    top: -5px;
}
.hero-slide-link.is-active {
    opacity: 1;
}
.hero-link-stack {
    opacity: 1;
    transition: opacity 0.25s ease;
    white-space: nowrap;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.03em;
    text-align: right;
    text-transform: uppercase;
    text-decoration: none !important;
}
.hero-slide-link.is-fading {
    opacity: 0;
}
.section-heroslider .custom-pagination {
    /* bottom: 20px;
    right: 30px;
    position: absolute;
    left: auto;
    width: auto; */
    position: relative;
}
.hero-hl {
    font-family: var(--sans) !important;
    font-weight: 200;
    font-size: 50px;
    line-height: 57px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}
.framedslider .hero-hl {
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media screen and (min-width: 768px) {
    .hero-hl {
        margin-bottom: 15px !important;
    }
    .framedslider .hero-hl {
        font-size: 50px;
        line-height: 57px;
    }
}

.hero-sub {
    font-family: var(--serif) !important;
    font-weight: 400;
    font-size: 36px;
    line-height: 32px;
}
.home-intro h1,
.home-intro h2 {
    margin-bottom: 0;
}

.home-intro h1 + p:not(.subheadline),
.home-intro h2 + p:not(.subheadline) {
    margin-top: 32px;
}
.home-intro.subheadline + p {
    margin-top: 25px;
}
@media screen and (min-width: 768px) {
    .home-intro h1 + p:not(.subheadline),
    .home-intro h2 + p:not(.subheadline) {
        margin-top: 61px;
    }
    .home-intro .subheadline + p {
        margin-top: 49px;
    }
}
.layout-txt-aside h1,
.layout-txt-aside h2 {
    text-transform: uppercase;
    margin-bottom: 0 !important;
}
.layout-txt-aside {
    margin-bottom: 33px;
}
@media screen and (min-width: 768px) {
    .layout-txt-aside {
        margin-bottom: 49px;
    }
}
h1 + .subheadline,
h1 + blockquote,
h2 + .subheadline,
h2 + blockquote {
    padding-top: 4px;
    line-height: 39px;
    margin-bottom: 35px !important;
    letter-spacing: 0;
}

@media screen and (min-width: 768px) {
    h1 + .subheadline,
    h1 + blockquote {
        padding-top: 8px;
        margin-bottom: 47px !important;
        line-height: 49px;
    }
    h2 + .subheadline,
    h2 + blockquote {
        padding-top: 12px;
        margin-bottom: 47px !important;
        line-height: 49px;
    }
}

.swiper-pagination {
    max-width: var(--w12);
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 34px;
    text-align: right;
}
.swiper-pagination-bullet {
    background-color: var(255, 255, 255.05) !important;
}
.swiper-pagination-bullet-active {
    background-color: var(--accent-color) !important;
}

@media screen and (min-width: 768px) {
    .fullbleedslider-item .hero-hl {
        font-size: 80px;
        line-height: 82px;
    }
    .fullbleedslider-item .hero-sub {
        font-weight: 400;
        font-size: 42px;
        line-height: 30px;
    }
}

/* Framed slider */

.framedslider-item .slide-content {
    height: auto;
    min-height: 100vh;
    max-height: 100vh;
}
.framedslider-item picture {
    height: auto;
    min-height: 400px;
    max-height: 100vh;
    display: block;
}
@media screen and (min-width: 768px) {
    .framedslider-item .slide-content {
        height: auto;
        min-height: 875px;
        max-height: 100vh;
    }
}
.framedslider-small .framedslider-item .slide-content {
    min-height: 400px;
    max-height: 600px;
}
.section-framedslider {
    background-color: #efeceb;
}
@media screen and (min-width: 768px) {
    .section-framedslider {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.section-framedslider .frame {
    max-width: 1920px;
}

.section-framedslider .slide-video,
.section-framedslider .slide-img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .section-framedslider .slide-video,
    .section-framedslider .slide-img {
        height: 100%;
        min-height: 875px;
    }
    .framedslider-small .slide-video,
    .framedslider-small .slide-img {
        min-height: 400px;
        max-height: 600px;
    }
}
.section-framedslider .hero-caption {
    bottom: 110px;
}
@media screen and (min-width: 768px) {
    .section-framedslider .hero-caption {
        bottom: 100px;
    }
}
/* Home Intro */

.section-home-intro {
    margin-top: 0;
    padding-top: 62px;
    padding-bottom: 72px;
    background: linear-gradient(180deg, #efeceb 0%, #dfddd8 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.section-home-intro:first-child {
    padding-top: 186px;
}
@media screen and (min-width: 768px) {
    .section-home-intro:first-child {
        padding-top: 318px;
    }
}
.page-home .section-home-intro {
    padding-top: 62px;
    padding-bottom: 72px;
}
@media screen and (min-width: 768px) {
    .section-home-intro {
        margin-top: 0;
        padding-top: 240px;
        padding-bottom: 200px;
        background: linear-gradient(180deg, rgba(239, 236, 235, 0.6) 0%, #dfddd8 100%);
    }

    .page-home .section-home-intro {
        padding-top: 240px;
        padding-bottom: 240px;
    }
}

.home-intro-container {
    display: flex;
    justify-content: flex-end;
}
.arrow-link {
    font-family: var(--sans);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-transform: uppercase;
}
@media screen and (min-width: 768px) {
    .arrow-link {
        font-weight: 400;
        font-size: 16px;
        line-height: 34px;
    }
}

.arrow-link::before {
    content: "";
    display: block;
    position: relative;
    width: 52px;
    height: 15px;
    background-image: url(../images/ui/icn-arrow-link.svg);
    background-size: 58px;
    background-repeat: no-repeat;
    background-position: right 0 center;
    transition: all 0.2s ease-out;
}
.txt-white .arrow-link::before,
[data-sectionbg="dark"] .arrow-link::before {
    background-image: url(../images/ui/icn-arrow-link-white.svg);
}
@media screen and (min-width: 768px) {
    .arrow-link::before {
        width: 58px;
        background-position: right 8px center;
        height: 34px;
    }
}
.fadeup-smooth {
    --yStart: 200px;
    /* Start-Offset nach unten */
    --opStart: 0.1;
    /* Start-Opacity */
    opacity: var(--opStart);
    transform: translateY(var(--yStart));
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .fadeup-smooth {
        opacity: 1;
        transform: none;
    }
}
@media (hover: hover) {
    .arrow-link:hover {
        color: inherit;
    }
    .arrow-link:hover::before {
        background-position: right 0 center;
    }
}
/* section-teaser-homestories */
.section-teaser-homestories {
    padding-top: 43px;
    padding-bottom: 110px;
    border-bottom: none;
}
@media screen and (min-width: 768px) {
    .section-teaser-homestories {
        padding-top: 120px;
        padding-bottom: 240px;
        border-bottom: none;
    }
}
.section-home-intro + .section-teaser-homestories {
    padding-top: 0;
}
.section-teaser-homestories.section-teaser-homestories-home {
    padding-top: 40px;
}
@media screen and (min-width: 768px) {
    .section-teaser-homestories.section-teaser-homestories-home {
        padding-top: 120px;
    }
}
.teaserimg {
    transition: all 0.3s ease-out;
    margin-bottom: 25px;
}
.teaser-content h3 {
    margin-bottom: 5px;
}
.teaser-homestory {
    display: block;
    text-decoration: none !important;
    margin-bottom: 119px;
}
.homestories-grid {
    border-bottom: 1px solid var(--color-txt);
    margin-bottom: 19px;
}
.homestories-overview {
    border-bottom: none;
}
.teaser-homestory h4 {
    font-weight: 200;
}
@media screen and (min-width: 768px) {
    .homestories-grid {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--grid-gap);
        margin-bottom: 41px;
    }

    .teaser-homestory {
        flex: 0 0 calc(50% - var(--grid-gap) / 2);
        display: flex;
        justify-content: flex-end;
        margin-bottom: 100px;
    }
    /* .teaser-homestory:nth-child(even) .teaser-homestory-inner {
        max-width: var(--w5);
    } */

    @media screen and (min-width: 768px) {
        /* 1. Zeile → 2., 4., 6., ... Element */
        .teaser-homestory:nth-child(2) .teaser-homestory-inner,
        .teaser-homestory:nth-child(4n + 2) .teaser-homestory-inner {
            max-width: var(--w5);
        }

        /* 2. Zeile → 1., 3., 5., ... Element */
        .teaser-homestory:nth-child(4n + 3) {
            justify-content: flex-start;
        }
        .teaser-homestory:nth-child(4n + 3) .teaser-homestory-inner {
            max-width: var(--w5);
        }
    }
}
.layout-teaser-homestories-s {
    border-bottom: none;
}
.section-teaser-homestories-s {
    padding-top: 120px;
    padding-bottom: 40px;
    border-bottom: none;
}
.section-teaser-homestories-s h3 {
    margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
    .section-teaser-homestories-s h3 {
        margin-bottom: 120px;
    }
}
.homestory-img {
    overflow: hidden;
}
.teaser-homestory img {
    transition: all 0.4s ease-out;
}
@media (hover: hover) {
    .teaser-homestory:hover img {
        transform: scale(1.05);
    }
}
.teaser-date {
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0%;
    margin-bottom: 11px;
}
@media screen and (min-width: 768px) {
    .teaser-date {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 16px;
    }
}

.homestory-img {
    display: block;
    margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
    .homestory-img {
        margin-bottom: 41px;
    }
}
.teaser-homestory h4 {
    /* margin-bottom: 7px; */
    margin-bottom: 17px;
}

/* @media screen and (min-width: 768px) {
    .teaser-homestory h4 {
        margin-bottom: 14px;
    }
} */

.teasergrp-hl {
    display: flex;
    justify-content: flex-end;
}
/* teaser */
@media screen and (min-width: 768px) {
    .section-teasergrp {
        padding-bottom: 240px;
    }
}
.teasergrp {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px var(--grid-gap);
    flex-wrap: wrap;
}
.teaser-item {
    text-decoration: none !important;
    flex: 0 0 calc(50% - var(--grid-gap) / 2);
    max-width: 320px;
}
@media screen and (min-width: 1000px) {
    .teaser-item {
        text-decoration: none !important;
        flex: 0 0 calc(25% - var(--grid-gap) * 3 / 4);
    }
    .teaser-item h3 {
        margin-bottom: 15px;
    }
}
@media (hover: hover) {
    .teaser-item:hover img {
        opacity: 0;
    }
}
.teaser-img {
    display: block;
    position: relative;
    border-radius: 5px;
    margin-bottom: 25px;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .teaser-img {
        margin-bottom: 27px;
    }
}
.teaser-img img {
    position: relative;
    transition: all 0.2s ease-out;
}
.teaser-img video {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.section-contact {
    padding-top: 50px;
    padding-bottom: 135px;
}

@media screen and (min-width: 768px) {
    .section-contact {
        padding-top: 180px;
        padding-bottom: 240px;
    }
}

/* Stickyfull */

/* sticky scrollover */
.section-stickyfull {
    padding-top: 0;
    position: relative;
}
.stickyfull {
    position: relative;
    overflow: unset;
}

.layout-stickyfull {
    /* height: 200vh; */
    height: 150vh;
}

.layout-stickyfull::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* height: 100vh; */
    height: 50vh;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #737373 100%);
    mix-blend-mode: multiply;
}

.scrollover {
    height: 250vh;
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    -webkit-mask-size: 100% 100vh;
    mask-size: 100% 200vh;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.section-stickyfeature:last-child .scrollover {
    height: calc(150vh + 851px);
}
.stickyfull {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
}
.stickyfull-inner {
    height: 100vh;
}

.stickyfull-inner img,
.stickyfull-inner video {
    display: block;
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100% !important;
}
.stickyfeature-caption {
    position: absolute;
    bottom: 0;
    height: auto;
    padding-bottom: 100px;
    padding-top: 60px;
    width: 100%;
}

[data-sectionbg="beige"] .stickyfeature-caption {
    z-index: 1;
    background: #dfddd8 !important;
}
[data-sectionbg="light"] .stickyfeature-caption {
    z-index: 1;
    background: #efeceb !important;
}
[data-sectionbg="dark"] .stickyfeature-caption {
    z-index: 1;
    background: #333334 !important;
    color: #eee !important;
}
[data-sectionbg="dark"] .stickyfeature-caption .arrow-link::before {
    background-image: url(../images/ui/icn-arrow-link-white.svg);
}
[data-sectionbg="black"] .stickyfeature-caption {
    z-index: 1;
    background: #111111 !important;
    color: #eee !important;
}
[data-sectionbg="black"] .stickyfeature-caption .arrow-link::before {
    background-image: url(../images/ui/icn-arrow-link-white.svg);
}
[data-sectionbg="gradient"] .stickyfeature-caption {
    z-index: 1;
    background: linear-gradient(180deg, rgba(239, 236, 235, 0.6) 0%, #dfddd8 100%) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
@media screen and (min-width: 768px) {
    [data-sectionbg="beige"] .stickyfeature-caption,
    [data-sectionbg="light"] .stickyfeature-caption,
    [data-sectionbg="dark"] .stickyfeature-caption,
    [data-sectionbg="black"] .stickyfeature-caption,
    [data-sectionbg="gradient"] .stickyfeature-caption {
        background: transparent !important;
        color: #fff !important;
    }
    .stickyfeature-caption .arrow-link::before {
        background-image: url(../images/ui/icn-arrow-link-white.svg);
    }
    .stickyfeature-caption {
        position: absolute;
        top: 0;
        bottom: auto;
        height: 100vh;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        padding-bottom: 100px;
        width: 100%;
        color: var(--white);
    }
}
.stickyfeature-caption .hero-hl {
    font-size: 50px;
    line-height: 52px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
@media screen and (min-width: 768px) {
    .stickyfeature-caption .hero-hl {
        font-size: 70px;
        line-height: 76px;
    }
}
.swiper-button-prev,
.swiper-button-next {
    background-color: transparent !important;
    border: none !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none !important;
}

.section-feedbackcarousel {
    padding-bottom: 130px;
}
@media screen and (min-width: 768px) {
    .section-feedbackcarousel {
        padding-bottom: 240px;
    }
}
.feedback-img {
    overflow: hidden;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 22px;
    margin-top: 23px;
    flex: 0 0 100px;
}
.feedback-content {
    max-width: 760px;
}
.star-rating {
    margin-bottom: 17px;
}
.star-rating svg {
    height: 21px;
    width: auto;
}

.feedback-content h3 {
    font-family: var(--serif) !important;
    font-weight: 400;
    font-size: 36px;
    line-height: 39px;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 17px;
}
.feedback-btn-grp {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 42px;
    z-index: 2;
}
.feedback-swiper-btn {
    position: relative;
    padding: 0 !important;
    width: 52px;
    height: 52px;
}
@media screen and (min-width: 1180px) {
    .feedback-btn-grp {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 22px;
    }
}
.feedback-item-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--w10);
}

@media screen and (min-width: 768px) {
    .feedback-item-inner {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
        padding-left: 80px;
    }
}

.section-chefportrait {
    width: 100%;
    height: 100vh;
    padding-top: 0;
}
.section-chefportrait img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.chefportrait-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    color: #fff;
}

.section-logogroup {
    padding-top: 19px;
    padding-bottom: 29px;
}

.logogroup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--grid-gap);
}

.section-infiniteslider {
    overflow: hidden;
}

.infiniteslider-wrapper {
    overflow: hidden;
    width: 100%;
}

.infiniteslider {
    display: flex;
    align-items: center;
    transition: transform 0.4s ease;
    will-change: transform;
}

.slider-item,
.slider-item-grp {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.slider-item img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

.arrow-link-s {
    font-family: var(--sans) !important;
    display: flex;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-bottom: 5px;
}
.arrow-link-xs {
    font-size: 13px;
}
.arrow-link-container {
    margin-bottom: 0 !important;
}
@media screen and (min-width: 768px) {
    .arrow-link-s {
        font-weight: 400;
        font-size: 16px;
        line-height: 34px;
    }
}
.arrow-link-container + .arrow-link-container .arrow-link-s {
    margin-top: 25px;
}
.splitsticky-txt-content {
    padding-bottom: 64px;
}
@media screen and (min-width: 768px) {
    .splitsticky-txt-content {
        padding-bottom: 0;
    }
}
.splitsticky-txt-content-inner {
    margin-bottom: 35px;
}

@media screen and (min-width: 768px) {
    .splitsticky-txt-content-inner {
        margin-bottom: 75px;
    }
}

/* Split Sticky */

.section-splitsticky {
    padding-top: 0;
}

.splitsticky-img {
    margin-bottom: 73px;
}

.styled-txt .h2-serif {
    font-family: var(--serif) !important;
    font-weight: 400;
    font-size: 38px;
    line-height: 44px;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 28px;
}
@media screen and (min-width: 768px) {
    .splitsticky-txt-content-inner .h2-serif {
        font-weight: 400;
        font-style: Light;
        font-size: 58px;
        line-height: 62px;
        letter-spacing: 0;
        margin-bottom: 72px;
    }
}
@media screen and (min-width: 1000px) {
    .splitsticky {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row-reverse;
        gap: 0;
    }
    .splitsticky-img,
    .splitsticky-txt {
        flex: 0 0 50%;
    }

    .splitsticky-txt {
        display: flex;
        justify-content: flex-end;
    }

    /* stick-effect */
    .splitstickyfull {
        position: relative;
        overflow: unset;
    }

    .splitsticky-img {
        position: relative;
        height: 100vh;
    }

    .splitsticky-img::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30vh;
        background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #737373 100%);
        mix-blend-mode: multiply;
    }

    .splitsticky-scrollover {
        height: 220vh;
        -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
        -webkit-mask-size: 100% 100vh;
        mask-size: 100% 200vh;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    .section-splitsticky:last-child .splitsticky-scrollover {
        height: calc(200vh - 801px);
    }
    .splitstickyfull {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
    }
    .splitstickyfull-inner {
        height: 100vh;
    }

    .splitstickyfull-inner img,
    .splitstickyfull-inner video {
        display: block;
        position: relative;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center top;
        object-position: center top;
        width: 100%;
        height: 100% !important;
    }
    .splitsticky-img {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .splitsticky-txt-content {
        padding-top: 308px;
    }
}

/* Moregrid */
.section-moregrid {
    padding-top: 106px;
    padding-bottom: 90px;
}
@media screen and (min-width: 768px) {
    .section-moregrid {
        padding-top: 208px;
    }
}
.moregrid-intro {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 52px;
}
@media screen and (min-width: 768px) {
    .moregrid-intro {
        margin-bottom: 100px;
    }
}
.moregrid-intro h3 {
    margin-bottom: 20px;
    font-weight: 200;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
@media screen and (min-width: 768px) {
    .moregrid-intro h3 {
        font-weight: 200;
        font-size: 36px;
        line-height: 48px;
        letter-spacing: 0.08em;
        margin-bottom: 22px;
    }
}
.section-teaser-moregrid {
    padding-top: 120px;
    padding-bottom: 240px;
}

.teaser-moregrid {
    display: block;
    text-decoration: none !important;
    margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
    .moregrid {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .teaser-moregrid {
        flex: 0 0 calc(33.33% - var(--grid-gap) * 2 / 3);
        display: flex;
        justify-content: flex-end;
        margin-bottom: 119px;
    }
}
.moregrid-img {
    overflow: hidden;
}
.teaser-moregrid img {
    transition: all 0.2s ease-out;
}
@media (hover: hover) {
    .teaser-moregrid:hover img {
        transform: scale(1.05);
    }
}

.moregrid-img {
    display: block;
    margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
    .moregrid-img {
        margin-bottom: 41px;
    }
}
.teaser-moregrid h4 {
    font-weight: 200;

    margin-bottom: 7px;
}

@media screen and (min-width: 768px) {
    .teaser-moregrid h4 {
        margin-bottom: 14px;
    }
}
/* Partnergrid */

.partner-intro {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 100px;
}
@media screen and (min-width: 768px) {
    .partner-intro {
        margin-bottom: 180px;
    }
}
.section-partner:first-child {
    padding-top: 186px;
}
@media screen and (min-width: 768px) {
    .section-partner:first-child {
        padding-top: 318px;
    }
}
.section-teaser-partner {
    padding-top: 120px;
    padding-bottom: 240px;
}

.teaser-partner {
    text-decoration: none !important;
    margin-bottom: 119px;
}

@media screen and (min-width: 768px) {
    .partner {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .teaser-partner {
        flex: 0 0 calc(33.33% - var(--grid-gap) * 2 / 3);
        display: flex;
        justify-content: flex-end;
        margin-bottom: 100px;
    }
}
.partner-img {
    overflow: hidden;
}
.teaser-partner img {
    transition: all 0.2s ease-out;
}

.partner-img {
    display: block;
    position: relative;
    margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
    .partner-img {
        margin-bottom: 30px;
    }
}
.partner-intro h1,
.partner-intro h2 {
    margin-bottom: 0;
}
.partner-intro h1 + p:not(.subheadline),
.partner-intro h2 + p:not(.subheadline),
.partner-intro blockquote + p:not(.subheadline) {
    margin-top: 49px;
}
.teaser-partner h4 {
    margin-bottom: 7px;
}

@media screen and (min-width: 768px) {
    .teaser-partner h4 {
        margin-bottom: 14px;
    }
}

.hover-dissolve .bottom-img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.hover-dissolve .top-img {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease-out;
}
@media (hover: hover) {
    .hover-dissolve:hover .top-img {
        opacity: 0;
    }
}
.teaser-partner-inner p {
    line-height: 25px;
}
.teaser-partner-inner a {
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
    line-height: 34px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media screen and (min-width: 768px) {
    .teaser-partner-inner a {
        font-size: 16px;
        line-height: 34px;
    }
}
/* txtaside-grp */
.person-aside-item {
    margin-bottom: 30px;
}
.person-aside-img {
    margin-bottom: 27px;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    overflow: hidden;
}

.person-aside-txt h3 {
    font-weight: 400;
    font-size: 13px;
    line-height: 25px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media screen and (min-width: 768px) {
    .person-aside-txt h3 {
        font-size: 16px;
        line-height: 30px;
    }

    .styled-txt .person-aside-txt p {
        font-weight: 200;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 0;
    }
}
.section-txt-aside {
    padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
    .section-txt-aside {
        padding-bottom: 192px;
    }
}
.txt-aside-grp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px 0;
    flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
    .txt-aside-grp {
        gap: 20px 0;
    }
}
.txt-aside-item {
    padding-bottom: 13px;
    margin-bottom: 13px;
    border-bottom: 1px solid #0000001f;
}
@media screen and (min-width: 768px) {
    .txt-aside-item {
        padding-bottom: 17px;
        margin-bottom: 17px;
    }
}
.txt-aside-item:last-child {
    border-bottom: none;
}
.txt-aside-item p {
    font-weight: 200;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0;
}
@media screen and (min-width: 768px) {
    .txt-aside-item p {
        font-size: 16px;
        line-height: 21px;
    }
}
.txt-aside-item .txt-aside-title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 13px;
    line-height: 25px;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
    text-transform: uppercase;
}

@media screen and (min-width: 768px) {
    .txt-aside-item .txt-aside-title {
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 6px;
    }
}

/* Accordion */
.section-accordion[data-sectionbg="dark"],
.section-accordion[data-sectionbg="black"] {
    padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
    .section-accordion[data-sectionbg="dark"],
    .section-accordion[data-sectionbg="black"] {
        padding-bottom: 240px;
    }
}

.section-accordion[data-sectionbg="dark"] .accordion-trigger,
.section-accordion[data-sectionbg="black"] .accordion-trigger {
    border-bottom: 1px solid #eee;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}
.section-accordion {
    padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
    .section-accordion {
        padding-bottom: 240px;
    }
}
.accordion-intro,
.dbl-intro {
    padding-bottom: 48px;
}
@media screen and (min-width: 768px) {
    .accordion-intro,
    .dbl-intro {
        padding-bottom: 88px;
    }
    .dbl-intro {
        padding-bottom: 85px;
    }
}
.dbl-intro h3 {
    margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
    .dbl-intro h3 {
        margin-bottom: 32px;
    }
}
.accordion-item {
    border-bottom: 1px solid #000000;
}
.accordion-trigger {
    position: relative;
    padding-right: 40px;
    cursor: pointer;
}
.accordion-trigger h3 {
    transition: all 0.3s ease-out;
}
.accordion-trigger:before {
    content: "";
    width: 30px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    left: -50px;
    background-image: url(../images/ui/drop-arrow.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.3s ease-out;
    opacity: 0;
}
@media (hover: hover) {
    .accordion-trigger:hover:before {
        opacity: 1;
    }
    .accordion-trigger:hover {
        color: #db1012;
    }
    .accordion-trigger:hover h3 {
        color: #db1012 !important;
    }
}
.accordion-item.is_open .accordion-trigger:before {
    transform: translateY(-50%) rotate(180deg);
}
.accordion-trigger h3 {
    font-family: var(--serif) !important;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0%;
    margin-bottom: 0;
    padding-top: 13px;
    padding-bottom: 3px;
}

@media screen and (min-width: 768px) {
    .accordion-trigger h3 {
        font-family: var(--serif) !important;
        font-size: 42px;
        line-height: 30px;
        letter-spacing: 0%;
        padding-top: 23px;
        padding-bottom: 28px;
    }
}

.accordion-content {
    overflow: hidden;
    transition: height 0.3s ease;
    height: 0; /* Start height as 0 to ensure it's closed initially */
}
.accordion-content-inner {
    padding-bottom: 30px;
}
@media screen and (min-width: 800px) {
    .accordion-content {
        overflow: hidden;
        transition: height 0.3s ease;
        height: 0; /* Start height as 0 to ensure it's closed initially */
    }
}

.accordion-content p,
.accordion-content li {
    font-size: 15px;
}

@media screen and (min-width: 800px) {
    .accordion-content p,
    .accordion-content li {
        font-size: 18px;
    }
}

/* Uneven */
.section-unevengrid {
    padding-bottom: 100px;
}
.unevengrid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 85px 10px;
}
@media screen and (min-width: 768px) {
    .unevengrid {
        gap: 100px 10px;
    }
}
.uneven-item {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    text-align: left !important;
    color: var(--color-txt) !important;
}
@media screen and (min-width: 768px) {
    .uneven-item {
        border: none !important;
        padding: 0 !important;
        background-color: transparent !important;
        text-align: left !important;
        color: var(--color-txt) !important;
        flex: 0 0 calc(50% - 5px);
    }
}
@media screen and (min-width: 1000px) {
    .uneven-item {
        border: none !important;
        padding: 0 !important;
        background-color: transparent !important;
        text-align: left !important;
        color: var(--color-txt) !important;
        flex: 0 0 calc(33.33% - 7px);
    }
}
.uneven-img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 21px;
}
@media screen and (min-width: 768px) {
    .uneven-img {
        margin-bottom: 29px;
    }
}
.uneven-item img {
    transition: all 0.2s ease-out;
}
@media (hover: hover) {
    .uneven-item:hover img {
        transform: scale(1.05);
    }
}
.uneven-content {
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (min-width: 768px) {
    .uneven-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.styled-txt .uneven-item h3 {
    font-weight: 300;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
    .styled-txt .uneven-item h3 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 9px;
    }
}
.styled-txt .uneven-item .subheadline {
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
    .styled-txt .uneven-item .subheadline {
        font-size: 30px;
        margin-bottom: 6px;
    }
}

.txt-main h1 {
    margin-bottom: 0 !important;
}
@media screen and (min-width: 768px) {
    .txt-main h1 {
        font-weight: 300;
        font-size: 60px;
        line-height: 61px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}
.price-prev {
    font-weight: 200;
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 0;
    text-decoration: line-through;
    margin-bottom: 3px !important;
}
@media screen and (min-width: 768px) {
    .price-prev {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 0 !important;
    }
}

.price-discount {
    font-weight: 200;
    font-size: 19px;
    letter-spacing: 0;
}

@media screen and (min-width: 768px) {
    .price-discount {
        font-size: 22px;
        line-height: 30px;
    }
}
/* Schublade Sonderverkauf-Detail */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    max-width: 1165px;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}
.drawer-content-scroller {
    height: 100vh;
    overflow: auto;
}
.drawer-content {
    max-width: 1006px;
    padding-top: 96px;
    padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
    .drawer-content {
        padding-top: 70px;
        padding-bottom: 160px;
    }
}
.drawer-content-inner {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.drawer-content-inner h2 {
    font-weight: 300;
}
@media screen and (min-width: 768px) {
    .drawer-content-inner h2 {
        font-size: 60px;
        margin-bottom: 0 !important;
    }
}
.drawer-content-inner .subheadline {
    padding-top: 0 !important;
}
.drawer.is_open {
    transform: translateX(0);
}

.drawer-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    width: 26px;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .drawer-close {
        top: 70px;
        right: 70px;
        width: 31px;
    }
}

.drawer-img,
.drawer-main-img {
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .drawer-img,
    .drawer-main-img {
        margin-bottom: 34px;
    }
}

.drawer-intro {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 95px;
}

@media screen and (min-width: 768px) {
    .drawer-intro {
        padding-left: 0;
        padding-right: 0;
    }
}
.drawer-content-inner h2 {
    margin-bottom: 0;
    font-weight: 300;
}
@media screen and (min-width: 768px) {
    .drawer-content-inner h2 {
        font-size: 60px;
        margin-bottom: 8px;
    }
}

.drawer-content-inner .subheadline {
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    margin-bottom: 28px;
}
@media screen and (min-width: 768px) {
    .drawer-content-inner .subheadline {
        margin-bottom: 55px;
        font-weight: 400;
        font-size: 42px;
        line-height: 42px;
        letter-spacing: 0;
    }
}
.drawer-imggrp {
    margin-bottom: 46px;
}

@media screen and (min-width: 768px) {
    .drawer-intro .price-prev {
        font-weight: 300;
        font-size: 22px;
        line-height: 38px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: line-through;
    }
    .drawer-intro .price-discount {
        font-weight: 300;
        font-size: 36px;
        line-height: 48px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 34px;
    }
    .drawer-content-inner .arrow-link {
        font-weight: 400;
        font-size: 14px;
        line-height: 34px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
}
.data-drawer-desc {
    margin-bottom: 34px;
}
/* Startzustand: Content unsichtbar */
[data-drawer] .drawer-content-inner {
    opacity: 0;
    transition: opacity 0.2s ease; /* 200ms wie gewünscht */
}

/* Sobald der Drawer offen ist und wir Content zeigen wollen */
[data-drawer].content-visible .drawer-content-inner {
    opacity: 1;
}

/* Spreadslider */

/* 
Start
*/
@media screen and (max-width: 1200px) {
    /* Basis: nur der innere Track scrollt */
    .spreadslider {
        position: relative;
        overflow: visible;
        /* Buttons sollen nicht abgeschnitten werden */
        padding-bottom: 175px;
    }

    .spreadslider .spreadslider-inner {
        display: flex;
        gap: 16px;
        /* Abstand zwischen Slides */
        overflow-x: auto;
        /* horizontaler Scroll-Track */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        /* Snap auf Slides */
        scroll-padding-left: 16px;
        /* Startpadding = linker Rand beim snap */
        padding: 0 16px;
        /* Innenabstand für Peek */
    }

    /* Jedes Slide snappt an den linken Rand */
    .spreadslider .slide {
        scroll-snap-align: start;
        flex: 0 0 auto;
        /* verhindert Stretching, Slide bleibt eigene Breite */
    }

    /* Mobile-Navigation: nicht mitscrollen (Eltern ist NICHT der Scroller) */
    .spreadslider .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        /* Optik nach Wunsch: */
        /* background: rgba(0,0,0,.4); color:#fff; border-radius:999px; padding:.4rem .7rem; */
    }

    .spreadslider .nav.prev {
        left: 15px;
        background-color: transparent;
        top: auto;
        bottom: 115px;
    }

    .spreadslider .nav.next {
        right: 15px;
        background-color: transparent;
        top: auto;
        bottom: 115px;
    }
}
.spreadslider .slide-caption {
    font-weight: 200;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    position: absolute;
    top: 100%;
}

@media screen and (min-width: 768px) {
    .spreadslider .slide-caption {
        font-size: 16px;
        line-height: 25px;
    }
}

/* Optional: Buttons nur auf Mobile zeigen */
@media (min-width: 1200px) {
    .spreadslider .nav {
        display: none;
    }
    .spreadslider .slide-caption {
        margin-top: 20px;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease 0s;
    }

    .spreadslider .slide.active .slide-caption {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.3s ease 0.2s;
    }
}

/* DBL Spreadslider */

.dblspreadslider {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 1000px) {
    .dblspreadslider {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.dblspreadslider {
    --gap-inner: 16px;
    --group-max: 850px;
    position: relative;
    overflow: hidden;
    padding-bottom: 158px;
}
@media screen and (min-width: 1000px) {
    .dblspreadslider {
        --gap-inner: 16px;
        --group-max: 850px;
        position: relative;
        overflow: hidden;
        padding-bottom: 158px;
    }
}
@media screen and (min-width: 1450px) {
    .dblspreadslider {
        --gap-inner: 16px;
        --group-max: 1310px;
    }
}
.dblspreadslider .dblspreadslider-inner {
    display: flex;
    will-change: transform;
    /* transform wird ausschließlich von JS gesetzt */
    gap: calc(0.5 * (100% - var(--group-max) - 100px));
}

.dblspreadslider.is-animating .dblspreadslider-inner {
    transition: transform 500ms ease;
}

/* Gruppen: auto-breit (so breit wie ihr Inhalt), keine Prozentbreiten/Margins */
.dblspreadslider .group {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    /* zentriert .group-inner */
    box-sizing: border-box;
}

/* Inneres Pair: max 1310px, darunter fluid; Abstand zwischen den 2 Slides */
.dblspreadslider .group .group-inner {
    width: auto;
    max-width: var(--group-max);
    display: flex;
    gap: var(--gap-inner);
    align-items: flex-start;
    justify-content: center;
}

/* Slides im Pair */
.dblspreadslider .group .slide {
    flex: 0 1 calc(50% - 5px);
}

.dblspreadslider .group .slide img {
    display: block;
    height: auto;
    width: 100%;
    /* falls deine Slides eine definierte Breite bekommen sollen */
    max-width: 100%;
    /* verhindert Überlauf */
}

/* Navi bleibt fix */
.dblspreadslider .nav {
    position: absolute;
    top: 0;
    bottom: 0;
    /* right: 0; */
    transform: none;
    z-index: 5;
    pointer-events: auto;
    width: 50px;
    background-color: transparent;
}
@media screen and (min-width: 1000px) {
    .dblspreadslider .nav svg {
        display: none;
    }
}
.carouseldbl-item-inner {
    padding-top: 30px;
}
.dblspreadslider .nav.prev {
    left: 0;
}

.dblspreadslider .nav.next {
    right: 0;
}

.dblspreadslider .group img {
    transition: filter 0.4s ease 0.2s, -webkit-filter 0.4s ease 0.2s, opacity 0.4s ease 0.2s;
}
@media screen and (min-width: 1000px) {
    .dblspreadslider.total-slides-1 .prev-dblslide,
    .dblspreadslider.total-slides-1 .next-dblslide,
    .dblspreadslider.total-slides-2 .prev-dblslide,
    .dblspreadslider.total-slides-2 .next-dblslide {
        opacity: 0 !important;
    }
}
.dblspreadslider .group.prev-dblslide img,
.dblspreadslider .group.next-dblslide img {
    -webkit-filter: blur(6px);
    filter: blur(6px);
    opacity: 0.5;
}

.dblspreadslider .group.prev-dblslide .carouseldbl-caption,
.dblspreadslider .group.next-dblslide .carouseldbl-caption {
    opacity: 0;
}

.dblspreadslider .group.current-dblslide img {
    -webkit-filter: none;
    filter: none;
}

.carouseldbl-item-inner img {
    display: block;
    margin-bottom: 26px;
}

@media screen and (min-width: 768px) {
    .carouseldbl-item-inner img {
        display: block;
        margin-bottom: 28px;
    }
}
.carouseldbl-item-inner h4 {
    font-weight: 200;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
    .carouseldbl-item-inner h4 {
        font-weight: 300;
        font-size: 22px;
        line-height: 28px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 28px;
    }
}
/* Mobile crossfade layer styles (only apply when track has .is-mobile) */
.dblspreadslider .dblspreadslider-inner.is-mobile {
    position: relative; /* becomes the stacking context */
    display: block; /* no flex row on mobile fade */
    will-change: height;
}

.dblspreadslider .dblspreadslider-inner.is-mobile > .fade-slide {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    opacity: 0;
    z-index: 0;
    transition: opacity 400ms ease; /* crossfade */
    pointer-events: none; /* only the active one is interactive */
}

.dblspreadslider .dblspreadslider-inner.is-mobile > .fade-slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

@media screen and (max-width: 1000px) {
    /* Mobile-Navigation: nicht mitscrollen (Eltern ist NICHT der Scroller) */
    .dblspreadslider .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        /* Optik nach Wunsch: */
        /* background: rgba(0,0,0,.4); color:#fff; border-radius:999px; padding:.4rem .7rem; */
    }

    .dblspreadslider .nav.prev {
        left: 15px;
        background-color: transparent;
        top: auto;
        bottom: 115px;
    }

    .dblspreadslider .nav.next {
        right: 15px;
        background-color: transparent;
        top: auto;
        bottom: 115px;
    }
    .dbl-counter {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        bottom: 130px;
    }
}

/* 
END
 */

:root {
    --slider-breakpoint: 900px;
    /* zentraler Wert */
}
.section-spreadslider {
    padding-top: 0;
    padding-bottom: 0;
}
.spreadslider {
    width: 100%;
    overflow: scroll;
    position: relative;

    /* background-color: #fff; */
}

.spreadslider-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding-top: 190px;
    padding-bottom: 190px;
}

.spreadslider .slide {
    flex-shrink: 0;

    transition: width 0.5s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.5s cubic-bezier(0.77, 0, 0.18, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

.spreadslider .slide,
.spreadslider .slide.visible,
.spreadslider .slide.active {
    height: 320px;
}

.slide.is-clone {
    display: none;
}

@media screen and (min-width: 768px) {
    .spreadslider .slide,
    .spreadslider .slide.visible,
    .spreadslider .slide.active {
        height: 500px;
    }
}
@media screen and (min-width: 1450px) {
    .spreadslider .slide,
    .spreadslider .slide.visible,
    .spreadslider .slide.active {
        height: 810px;
    }
}
@media screen and (min-width: 1200px) {
    .slide.is-clone {
        display: flex;
    }

    .spreadslider {
        overflow: hidden;
    }

    .spreadslider-inner {
        overflow: hidden;
        gap: 0;
    }

    .spreadslider .slide {
        flex-shrink: 0;
        width: 0px;
        opacity: 0;
    }

    .spreadslider .slide.visible {
        width: 60px;
        opacity: 1;
    }

    .spreadslider .slide.active {
        width: calc(100% - 120px);
        opacity: 1;
    }

    .spreadslider .nav.prev {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        opacity: 0;
    }

    .spreadslider .nav.next {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        opacity: 0;
    }
}

/* Bildcontainer für Abstand */
.slide-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.slide-img-wrap-inner {
    position: relative;
    height: 100%;
}

.spreadslider .slide img {
    height: 100%;
    width: auto;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 0px 2px 25px 0px #00000040;
}

.align-prev img {
    -o-object-position: right;
    object-position: right;
}

.align-next img {
    -o-object-position: left;
    object-position: left;
}
.hotspots-layer {
    z-index: 1;
}
.hotspot {
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: transparent !important;
    transition: opacity 0.3s ease-out 0.3s;
}

.tooltip_is_active .icon-plus {
    transform: rotate(45deg);
    background: #db1012;
}

.tooltip_is_active .icon-plus::before,
.tooltip_is_active .icon-plus::after {
    background-color: #ffffff;
}

.hotspot-tooltip {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out;
    background-color: #fff;
    color: #000;
    padding: 5px;
    width: 200px;
    font-size: 12px;
    line-height: 15px;
    left: -80px;
    top: -10px;
}

.tooltip_is_active .hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    background: #d9d9d9e5;
    font-weight: 200;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0;
    padding: 25px 30px;
    width: 270px;
    -webkit-filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
    position: absolute;
    bottom: 57px;
    top: auto;
    left: 0;
    transform: translateX(calc(-50% + 20px));
}
.tooltip_is_active .hotspot-tooltip::after {
    content: "";
    position: absolute;
    bottom: -12px; /* Höhe des Dreiecks */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 12px solid #d9d9d9e5;
}
@media screen and (min-width: 1450px) {
    .hotspot {
        width: 40px;
        height: 40px;
        position: absolute;
        background-color: transparent !important;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.3s ease-out 0.3s;
    }
}

.spreadslider .slide.active .hotspot {
    transition: opacity 0.1s ease-out 0;
}

@media screen and (min-width: 1450px) {
    .spreadslider .slide.active .hotspot {
        pointer-events: all;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.1s ease-out 0;
    }
}

.icon-plus {
    position: relative;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: block;
    width: 30px;
    height: 30px;
    background: radial-gradient(75% 75% at 26.92% 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 90%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease-out;
    backdrop-filter: blur(10px);
    box-shadow: 0px 1px 4px 0px #00000033;
}

@media screen and (min-width: 1450px) {
    .icon-plus {
        width: 40px;
        height: 40px;
    }
}

.icon-plus::before,
.icon-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.36px;
    background-color: #4f4f4f;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-out;
}

@media screen and (min-width: 1450px) {
    .icon-plus::before,
    .icon-plus::after {
        width: 22px;
        height: 2px;
    }
}

.icon-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

@media (hover: hover) {
    .icon-plus:hover {
        background: #db1012;
    }

    .icon-plus:hover::before,
    .icon-plus:hover::after {
        background: #ffffff;
    }
}

.icon-plus.is_active {
    background: #db1012;
    transform: rotate(45deg);
}

/* Bild-Drag komplett verhindern */
.spreadslider img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Filter-Bttons */
.styled-txt .tag-btn {
    font-weight: 200;
    font-size: 14px;
    line-height: 25px !important;
    letter-spacing: 0;
    background-color: transparent !important;
    border: none !important;
    color: #252525;
    padding-left: 0 !important;
}
[data-sectionbg="black"] .tag-btn,
[data-sectionbg="dark"] .tag-btn {
    color: #eee;
}
@media (hover: hover) {
    .tag-btn:hover {
        color: var(--accent) !important;
    }
}
.tag-btn.is-active[aria-pressed="true"] {
    color: var(--accent) !important;
}
/* Teaser ausblenden, wenn gefiltert */
.teaser-homestory.is-hidden {
    display: none !important;
}

.layout-catalogue {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
@media screen and (min-width: 768px) {
    .layout-catalogue {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
}

.layout-catalogue h2 {
    margin-bottom: 40px;
}

/* Grundlayout */
.cf7-magazin-form .form-item {
    margin: 22px 0;
}

.cf7-magazin-form .form-item > label {
    display: block;
    cursor: text;
}

.cf7-magazin-form .label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

/* Inputs im „Unterstreichungs“-Stil wie im Screenshot */
.cf7-magazin-form input[type="text"],
.cf7-magazin-form input[type="email"],
.cf7-magazin-form input[type="tel"],
.cf7-magazin-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    /* Farbe bei hellem BG anpassen */
    padding: 10px 0 12px;
    color: #eee;
    /* an dein Farbschema anpassen */
    font: inherit;
    font-size: 13px;
    line-height: 15px;
}

@media screen and (min-width: 768px) {
    .cf7-magazin-form input[type="text"],
    .cf7-magazin-form input[type="email"],
    .cf7-magazin-form input[type="tel"],
    .cf7-magazin-form textarea {
        font-size: 16px;
        line-height: 20px;
    }
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 0;
}

.cf7-magazin-form input:focus,
.cf7-magazin-form textarea:focus {
    outline: none;
    border-bottom-color: #fff;
}

/* Submit */
.cf7-magazin-form .form-item-submit input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 12px 0;
    cursor: pointer;
    position: relative;
}

.cf7-magazin-form .form-item-submit input[type="submit"]::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    width: 28px;
    height: 2px;
    transform: translateY(-50%);
    background: currentColor;
}

.cf7-magazin-form .form-item-submit input[type="submit"]::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
}

/* ===== Custom Checkbox (Accessibility-freundlich) ===== */
.cf7-magazin-form .cf7-accept {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.cf7-magazin-form .cf7-accept input[type="checkbox"] {
    position: absolute;
    /* visuell verstecken, bleibt fokussierbar */
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.cf7-magazin-form .cf7-accept .custom-checkbox {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-top: 2px;
}

.cf7-magazin-form .cf7-accept input[type="checkbox"]:focus + .custom-checkbox {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cf7-magazin-form .cf7-accept input[type="checkbox"]:checked + .custom-checkbox {
    background: #dbba83;
    /* deine Akzentfarbe */
    border-color: #dbba83;
}

.cf7-magazin-form .cf7-accept input[type="checkbox"]:checked + .custom-checkbox::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: 3px solid #111;
    /* dunkles Häkchen */
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.cf7-magazin-form .cf7-accept .txt {
    line-height: 1.5;
}

.cf7-magazin-form .cf7-accept .txt a {
    color: inherit;
    text-decoration: underline;
}

/* Helles Farbschema (optional) – falls Formular auf weißem BG läuft */
body.header_is_light .cf7-magazin-form input,
body.header_is_light .cf7-magazin-form .cf7-accept .custom-checkbox {
    color: #111;
    border-color: rgba(0, 0, 0, 0.4);
}

body.header_is_light .cf7-magazin-form input[type="text"],
body.header_is_light .cf7-magazin-form input[type="email"] {
    font-family: var(--text);
    font-style: normal;
    font-weight: 200;
    font-size: 13px;
    line-height: 15px;
}

@media screen and (min-width: 768px) {
    body.header_is_light .cf7-magazin-form input[type="text"],
    body.header_is_light .cf7-magazin-form input[type="email"] {
        font-family: var(--text);
        font-style: normal;
        font-weight: 200;
        font-size: 14px;
        line-height: 16px;
    }
}

.cf7-magazin-form input::-webkit-input-placeholder {
    color: #eee !important;
    opacity: 1 !important;
    /* manche Browser machen Placeholder sonst blasser */
}

body.header_is_light .cf7-magazin-form .form-item-submit input[type="submit"] {
    color: #111;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; /* Hintergrund überschreiben */
    -webkit-text-fill-color: #fff !important; /* Textfarbe anpassen */
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s; /* verhindert kurzes Aufblitzen */
    background-color: transparent !important; /* zusätzlich */
}
/* Layout & Klickbereich */
.form-item-accept .wpcf7-list-item {
    display: block;
}

.form-item-accept .wpcf7-list-item > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

/* Input visuell verstecken, aber zugänglich lassen */
.form-item-accept .wpcf7-list-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Label-Inhalt nebeneinander */
.form-item-accept .wpcf7-list-item .wpcf7-list-item-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/* Box */
.form-item-accept .custom-checkbox {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1px solid #eee;
    position: relative;
    margin-top: 2px;
}

/* Fokusrahmen über die eigene Box ziehen */
.form-item-accept .wpcf7-list-item input[type="checkbox"]:focus + .wpcf7-list-item-label .custom-checkbox {
    outline: 2px solid #eee;
    outline-offset: 2px;
    /* Farbe anpassen */
}

/* Checked: gefüllt + Checkmark */
.form-item-accept .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label .custom-checkbox {
    background: #eee;
    /* Füllfarbe (deine Akzentfarbe) */
    border-color: #eee;
}

.form-item-accept .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label .custom-checkbox::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: 3px solid #111;
    /* Häkchenfarbe (dunkel) */
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

/* Text neben der Box */
.form-item-accept .wpcf7-list-item .txt {
    line-height: 1.5;
}

.form-item-accept .wpcf7-list-item .txt a {
    color: inherit;
    text-decoration: underline;
}

/* Option: helles Farbschema */
body.header_is_light .form-item-accept .custom-checkbox {
    border-color: rgba(0, 0, 0, 0.5);
}

body.header_is_light .form-item-accept .wpcf7-list-item input[type="checkbox"]:focus + .wpcf7-list-item-label .custom-checkbox {
    outline-color: #111;
}

.cf7-magazin-form .form-item-submit input[type="submit"] {
    font-family: var(--sans);
    font-weight: 200;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-image: url(../images/ui/submit-arrow.svg);
    background-repeat: no-repeat;
    background-position: left -13px center;
    padding-left: 64px;
}
@media (hover: hover) {
    .cf7-magazin-form .form-item-submit input[type="submit"]:hover {
        background-position: left -8px center;
    }
}
@media screen and (min-width: 768px) {
    .cf7-magazin-form .form-item-submit input[type="submit"] {
        font-size: 20px;
        line-height: 34px;
        letter-spacing: 0.04em;
    }
}

.section-catalogue {
    padding-top: 50px;
    padding-bottom: 135px;
}
@media screen and (min-width: 768px) {
    .section-catalogue {
        padding-top: 170px;
        padding-bottom: 200px;
    }
}
.catalogue-img {
    margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
    .catalogue-img {
        position: absolute;
        right: 550px;
        top: 0;
        max-width: 650px;
    }
}
@media screen and (min-width: 1200px) {
    .catalogue-img {
        position: absolute;
        right: 100%;
        top: 0;
    }
}

.catalogue-form-container {
    max-width: 1310px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@media screen and (min-width: 1200px) {
    .catalogue-form-container {
        max-width: 650px;
    }
}

/* Chefbild */
.chefbild {
    min-height: 100vh;
}
.caption-chefbild-container {
    display: flex;
    justify-content: flex-end;
    padding-top: 46px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 68px;
}

@media screen and (min-width: 768px) {
    .caption-chefbild-container {
        position: absolute;
        display: flex;
        justify-content: flex-end;
        left: 0;
        right: 0;
        bottom: 248px;
    }
}
.chefbild {
    position: relative;
    width: 100%;
}

.chefbild img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100vh;
}
.caption-chefsign-container img {
    -o-object-fit: contain;
    object-fit: contain;
    height: auto;
    width: auto;
    max-width: 300px;
}
.caption-chefbild blockquote {
    margin-bottom: 15px;
}
.caption-chefbild blockquote p {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .caption-chefbild blockquote p {
        font-size: 64px;
        line-height: 68px;
        letter-spacing: 0;
    }
}
.section-chefbild {
    padding-top: 0;
}
.content > .section-chefbild:last-child {
    padding-bottom: 0;
}

.chefimg-dt {
    display: none !important;
}

@media screen and (min-width: 768px) {
    .chefimg-dt {
        display: block !important;
    }
    .chefimg-m {
        display: none !important;
    }
}

.caption-chefbild-container,
.caption-chefsign-container {
    display: flex;
    justify-content: flex-end;
}

.caption-chefsign-container {
    position: absolute;

    padding-right: 30px;
    padding-left: 30px;
    left: 0;
    right: 0;
    bottom: 100px;
}
.caption-chefsign-container .width-5 {
    display: flex;
    justify-content: flex-end;
}
.caption-chefsign-container img {
    max-width: 400px;
    width: 90%;
}

@media screen and (min-width: 768px) {
    .caption-chefsign-container img {
        max-width: 530px;
    }
}
@media screen and (min-width: 768px) {
    .caption-chefsign-container {
        bottom: 203px;
        /* max-width: 530px; */
    }
}

:root {
    --fade-dur: 1.5s;
}

/* Fade Effekt */
body {
    opacity: 0;
    transition: opacity var(--fade-dur) ease 0.1s;
}
body.is-ready {
    opacity: 1;
}

.fade-in-animation {
    opacity: 0;
    transition: opacity var(--fade-dur) ease;
}
.fade-in-animation.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .fade-in-animation {
        opacity: 1 !important;
        transition: none !important;
    }
}