/* -- Partial: STREICHER Base: Header Base -- */
:root {
    --he_headerbild_hoehe: 100dvh;
    --he_headerbild_hoehe_schmal: 500px;
    --ob_height: var(--ob_height);
    --he_aspect_header: 16/9;
    --he_border-radius: clamp(10px, calc(2.727px + 2.273vw), 30px);
    --he_linse_maxwi: 280px;
    --he_typewriterSpeed: 2s;
    --he_verlauf_bg: rgba(var(--color_base_color),var(--color_base_alpha070));
    --he_verlauf: linear-gradient(10deg,var(--he_verlauf_bg) 10%, transparent 60%);
    --he_abstand_dots: var(--padding1020);
    --he_abstand_unten: clamp(10px, calc(-4.545px + 4.545vmin), 50px);
    --he_dots_dot: var(--color_f1f1f1);
    --he_dot_dot_border: rgb(var(--color_base_color));
    --he_dots_act: var(--color_base_hightlight_1);

}

.he_headerbild_box {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    height: var(--ob_height);
    position: relative;
    overflow: hidden;
}

.he_headerbild_box:has(> .he_headercontent) {
    height: auto;
    max-height: var(--he_headerbild_hoehe);
}

.he_headerbild_box.he_schmal {

}

.he_headercontent {
    width: 100%;
    float: left;
    clear: both;
    container-type: inline-size;
    container-name: he_headercontent;
}

.he_headercontent::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--he_verlauf);
    z-index: 0;
}

/* -- Für Slider --*/
.he_headercontent:has(.he_headercontentslider)::after {
    display: none;
}

.he_headerbild_box .he_headercontentslider .frame::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--he_verlauf);
    z-index: 0;
}

#oben:has(.na_hauptnavi.is-mobile) + .he_headerbild_box:has(> .he_headercontent) {
    margin-top: var(--ob_height);
    max-height: calc(var(--he_headerbild_hoehe) - var(--ob_height));
}

/* -- Headerbild -- */
.he_headerbild_box .frame {
    margin: 0 !important;
}

.he_headerbild_box .frame > .rahmen {
    width: 100%;
    height: 100%;
    float: left;
    clear: both;
    margin: 0;
    max-width: none;
}

.he_headercontent,
.he_headercontent .frame,
.he_headercontent .ce-textpic,
.he_headercontent .ce-gallery,
.he_headercontent .ce-gallery .ce-row,
.he_headercontent .ce-gallery .ce-column,
.he_headercontent .ce-gallery .image,
.he_headercontent .ce-gallery .image picture {
    width: 100%;
    height: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    display: block;
}

.he_headercontent .ce-gallery .image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    aspect-ratio: var(--he_aspect_header);
}

.he_headercontent .ce-gallery .image a {
    text-decoration: none;
    position: static;
}

.he_headercontent .ce-gallery .image a::before {
    display: none;
}

.he_headercontent .ce-gallery .image a::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.he_headercontent .ce-bodytext {
    display: none;
}

/* -- Header Schmal -- */
.he_headerbild_box.he_schmal .he_headercontent .ce-gallery .image img {
    aspect-ratio: unset;
    min-height: 50dvh;
}

#oben:has(.na_hauptnavi.is-mobile) + .he_headerbild_box.he_schmal .he_headercontent .ce-gallery .image img {
    min-height: calc(50dvh - var(--ob_height));
}

/* -- Header-Slogan -- */
.he_headercontent header {
    position: absolute;
    z-index: 1;
    left: calc((100% - var(--content-width)) / 2);
    width: calc(var(--content-width) / 3 * 2);
    max-width: var(--max-width);
    margin: 0;
    float: none;
    bottom: var(--he_abstand_unten);
    overflow: hidden;
}

/* -- Header Schmal -- */
.he_headerbild_box.he_schmal .he_headercontent header {
    width: var(--content-width);
}

/* -- Header-Slogan Animation -- */
.he_headercontent header > span:first-child {
    animation: fadeInDown 0.5s ease forwards;
    opacity: 0;
}

.he_headercontent header > span:last-child {
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 0.5s ease calc(var(--he_typewriterSpeed) / 2) forwards;
}

@keyframes fadeInDown {
  from {
        opacity: 0;
		transform: translateY(-1em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }  
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -- Header-Slider (mehr als ein .frame) -- */
.he_headerbild_box .he_headercontentslider {
    width: 100%;
    float: left;
    clear: both;
}

.he_headerbild_box .he_headercontentslider .frame {
    width: 100%;
    height: auto;
    max-height: var(--he_headerbild_hoehe);
}

/* -- Header Video -- */
.he_headerbild_box .videoiframelink {
    display: none;
}

.he_headerbild_box .mediaconsent .video-preview {

}

.he_headerbild_box .mediaconsent.loadok .video-preview {
    display: none;
}


.he_headercontentslider .splide__pagination--ttb {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--he_abstand_dots);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: clamp(10px,calc(-4.545px + 4.545vmin),50px) 0;
    margin: 0;
    list-style: none;
}

.he_headercontentslider .splide__pagination--ttb li .splide__pagination__page {
    background: var(--he_dots_dot);
    border: 1px solid var(--he_dot_dot_border);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    cursor: pointer;
}

.he_headercontentslider .splide__pagination--ttb li .splide__pagination__page.is-active {
    background: var(--he_dots_act);  
    border-color: var(--he_dots_act);
}


/* -- Header Linse -- */
.he_headerlinse {
    position: absolute;
    z-index: 1;
    right: calc((100% - var(--content-width)) / 2);
    bottom: var(--he_abstand_unten);
    max-width: calc(var(--content-width) / 3 * 1);
    border-radius: var(--he_border-radius) 0 var(--he_border-radius) 0;
    background: rgba(var(--color_weiss),var(--color_base_alpha070));
    backdrop-filter: var(--blur10);
    font-family:  var(--hl_fontfamily_1);
    font-weight: var(--hl_fontweigt_300);
    font-size: var(--font-size_20);
    line-height: var(--font_lineheigt);
}

/* Damit es nicht zu viele Inhalte in der Linse im Header werden. -- */
.he_headerlinse > .frame {
    display: none;
}

.he_headerlinse > .frame:first-of-type {
    display: block;
}

.he_headerlinse > .frame > .rahmen {
    width: calc(100% - calc(var(--padding1020) * 2));
    max-width: var(--he_linse_maxwi);
    margin: var(--padding1020);
    float: left;
    clear: both;
    max-height: 30cqh;
    overflow-y: auto;
}


.he_headerlinse > .frame header > * {
    margin: 0;
    padding: 0;
    font-family:  var(--hl_fontfamily_1);
    font-weight: var(--hl_fontweigt_700);
    font-size: var(--font-size_20);
    line-height: var(--font_lineheigt);
}

.he_headerlinse > .frame header > *::before {
    display: none;
}

/* -- Ohne Rahmen -- */
.he_headerlinse:has(> .frame.frame-layout-50) {
    border-radius: 0;
    background: none;
    backdrop-filter: unset;
}

.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen {
    margin: 0;
    padding: 0;
    width: 100%;   
}

.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery,
.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery .ce-row,
.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery .ce-column, 
.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery .image,
.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery picture {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    display: block;
}

.he_headerlinse:has(> .frame.frame-layout-50) > .frame > .rahmen .ce-gallery .image img {
    width: 100%;
}

.he_headerlinse #he_linse {
    position: absolute;
    visibility: hidden;
    top: 0;
    right: 0;
}

/* -- Header-Lise im Responsive ein- und ausblenden -- */
.he_headerlinse_button {
    display: none;
    width: var(--footer_no_size);
    height: var(--footer_no_size);
    background: rgba(var(--color_weiss),var(--color_base_alpha070));
    backdrop-filter: var(--blur10);
    position: absolute;
    z-index: 1;
    cursor: pointer;
    color: rgb(var(--color_base_color));
    border-radius: calc(var(--he_border-radius) / 2) 0 0 0;
    right: 0;
    bottom: 0;
}

.he_headerlinse_button::before {
    content: 'i';
    font-family: var(--hl_fontfamily_1);
    font-weight: var(--hl_fontweigt_700);
    font-size: var(--font-size_20);
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}

.he_headerlinse_button > span {
    display: none;
    position: absolute;
    inset: 0;
}

.he_headerlinse_button > span::before,
.he_headerlinse_button > span::after {
    content: '';
    display: block;
    background: rgb(var(--color_base_color));
    height: var(--na_mob_height);
    left: calc(var(--footer_no_size) / 3.5);
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: calc(var(--footer_no_size) / 2);
    transform: translateY(0px) rotate(-45deg);
}

.he_headerlinse_button > span::after {
    transform: translateY(0px) rotate(45deg);
}


/* -- Responsive -- */
@media (max-width: 700px), (max-height: 500px)  {
    .he_headercontent header {
        width: var(--content-width);
    }

    .he_headerlinse_button {
        display: block;
    }

    .he_headerlinse:has(#he_linse:checked) + .he_headerlinse_button {
        background: rgb(var(--color_weiss));
    }

    .he_headerlinse:has(#he_linse:checked) + .he_headerlinse_button::before {
        display: none;
    }

    .he_headerlinse:has(#he_linse:checked) + .he_headerlinse_button span {
        display: block;
    }

    .he_headerlinse {
        display: none;
        top: var(--paddingl20);
        left: var(--paddingl20);
        right: var(--paddingl20);
        bottom: var(--paddingl20);
        max-width: unset;
        border-radius: var(--he_border-radius);
    }

    .he_headerlinse:has(> .frame.frame-layout-50) {
        inset: 0;
        border-radius: 0;
        background: rgba(var(--color_weiss),var(--color_base_alpha070));
        backdrop-filter: var(--blur10);
    }

    .he_headerlinse > .frame {
        display: flex;
        height: 100%;
    }

    .he_headerlinse > .frame > .rahmen {
        max-height: calc(100% - calc(var(--padding1020) * 2));
        max-width: unset;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .he_headerlinse:has(#he_linse:checked) {
        display: block;
    }
}