/*------------------------------------------------------------------------------------------< Dimendsionen >---*/

#hero .inside,
.divider .inside,
main .mod_article > .inside:not(:has(.divider)):not(:has(#map)),
header .inside,
footer .inside{
    width: 100%;
    max-width: calc(1364px + 2rem);
    padding:0 1rem;
    margin:0 auto;
}



/*------------------------------------------------------------------------------------------< Navigation >---*/

header{
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:14rem;
    z-index:10;
    transition:height var(--tt);
}

body :not(:has(#stage)) header{
    background-color:#fff;
    box-shadow:0 -10px 10px 0px #000;
}

body :not(:has(#stage)) #container{
    margin-top:14rem;
}


header > .inside{
    height:100%;
}

body.small header{
    height:6rem;
}

header:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:0;
    background-color:#fff;
    box-shadow:0 -10px 10px 0px #000;
    transition:height var(--tt);
}

body.small header:before{
    height:100%;
}

header > .inside{
    position:relative;
    mix-blend-mode: exclusion;
}

#mainNav{
    position:absolute;
    transform:translateY(-50%);
}

#homeLink{
    position:absolute;
    top:2rem;
    left:1rem;
    display:block;
    height:10rem;
    aspect-ratio:1/1;
    mask-repeat: no-repeat;
    mask-size:contain;
    mask-position:left;
    background-color:#fff;
    transition:height var(--tt), top var(--tt);
}

#homeLink.sigls{
    mask-image:url(../img/logo_sigls.svg);
}

#homeLink.forsthaus{
    mask-image:url(../img/logo_forsthaus.svg);
}

body.small #homeLink{
    top:1rem;
    height:4rem;
}

@media screen and (max-width:1099px){

    body.open{
        height:100vh;
        overflow-y:hidden;
    }

    body.open header, body.open header:before{
        height:100%;
    }

    body.small #navCtl{
        top:3rem
    }

    #mainNav{
        width:calc(100% - 2rem);
        text-align:center;
        transform:translateY(-100%);
        top:0;
        transition:top var(--tt), transform var(--tt);
    }

    body.open #mainNav{
        transform:translateY(-50%);
        top:calc(50% + 6rem);
    }

    body.small.open #mainNav{
        top:calc(50% + 2.5rem);
    }

    #mainNav ul{
        flex-direction:column;
    }

    #navCtl{
        position:absolute;
        transform:translateY(-50%);
        right:1rem;
        top:6rem;
        width:4.265rem;
        height:1.6rem;
        transition:top var(--tt);

    }

    #navCtl button{
        background-color:transparent;
        border:none;
        color:#fff;
        cursor:pointer;
        width:100%;
        height:100%;
    }

    #closeNav{
        mask-image:url(../img/close.svg);
        mask-position:center;
        mask-size:contain;
        mask-repeat:no-repeat;
        background-color:#fff !important;
    }



    #navCtl{
        perspective: 1000px;
    }


    /* This container is needed to position the front and back side */
    #navCtl .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    body.open #navCtl .flip-card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;

    }

    /* Style the front side (fallback if image is missing) */
    .flip-card-front {

    }

    /* Style the back side */
    .flip-card-back {

        transform: rotateY(180deg);
    }























}

@media screen and (min-width:1100px){

    #mainNav{
        transition: top var(--tt);
        top:6rem;
        right:1rem;
    }

    body.small #mainNav{
        top:3rem;
    }

    #navCtl{
        display:none;
    }

    #mainNav ul :where(a, strong){
        position:relative;
    }

    #mainNav ul :where(a, strong):before{
        content:"";
        display:block;
        position:absolute;
        bottom:-.25rem;
        left:0;
        height:1px;
        width:0;
        background-color:#fff;
        transition:width var(--tt);
    }

    #mainNav ul a:is(:hover, :focus):before{
        width:100%;
    }
}





#mainNav ul :where(a, strong){
    color:#fff;
    text-decoration:none;
}

nav > ul{
    display:flex;
    margin:0;
}

nav > ul :where(a, strong){
    font-size:var(--fs-h4);
}

#mainNav ul{
    gap:2rem;
    margin-bottom:0;
}

/*------------------------------------------------------------------------------------------< Hero >---*/

#hero{
    position:relative;
    height:100vh;
    text-align:center;
    overflow:hidden;
}

#hero:after{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,.5);
}

#hero > .media {
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
}


#heroContent{
    position:absolute;
    transform:translate(-50%, -50%);
    left:50%;
    top: calc(50% + 6rem);
    width:66.6666%;
    z-index:1;
    color:#fff;
}

@media screen and (max-width:450px){
    #heroContent{
        width:90%;
    }
}

#hero .headline{
    font-size:var(--fs-h1);
    font-weight:var(--fw-extralight);
    text-transform:uppercase;
    margin-bottom:1rem;
}

@media screen and (max-width:600px){
    #hero .headline{
        font-size:var(--fs-h2);
    }
}

#hero .button{
    margin-top:2rem;
}


#hero a.btn{
    margin-top:2rem;
}

/*------------------------------------------------------------------------------------------< Bildtrenner >---*/

.divider{
    position:relative;
    height:33vh;
    max-height:450px;
    min-height:300px;
    overflow:hidden;
}

.divider:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,.5);
    z-index:1;
}

.divider .image_container{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

.divider > .inside{
    position:relative;
    height:100%;
}


.dividertext{
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:1rem;

    text-align:left;
    color:#fff;
    z-index:1;
}

.dividertext .headline{
    font-size:var(--fs-h1);
    font-weight:var(--fw-extralight);
    margin-bottom:0;
}

@media screen and (max-width:450px){
    .dividertext .headline{
        font-size:2rem;
    }
}

.divider img{
    width:auto !important;
}

/*------------------------------------------------------------------------------------------< Button, Links >---*/

button{
    appearance: none;
    background-color:transparent;
    color: var(--c-fontcolor);
}

a.btn,
.btn > a,
.ce_rsce_imgNav .name,
.formbody button{
    position:relative;
    z-index:1;
    display:inline-block;
    overflow:hidden;
    text-decoration:none;
    font-weight:var(--fw-regular);
    line-height:2rem;
    padding:0 1rem;
    cursor:pointer;
}

a.btn:not(.cta),
.btn:not(.cta) > a,
.formbody button{
    border:1px solid var(--c-fontcolor);
}

#hero a.btn,
.ce_rsce_imgNav .name{
    border:1px solid #fff;
}

a.btn:not(.cta):before,
.btn:not(.cta) > a:before,
.ce_rsce_imgNav .name:before,
.formbody button:before{
    content:"";
    display:block;
    height:100%;
    width:0;
    background-color:var(--c-lightgrey);

    position:absolute;
    transform:translateX(-50%);
    top:0;
    left:50%;
    transition:width var(--tt);
    z-index:-1;
}

main .mod_article:nth-child(even) a.btn:not(.cta):before,
main .mod_article:nth-child(even) .btn:not(.cta) > a:before,
main .mod_article:nth-child(even) .formbody button:before{
    background-color:#fff;
}

#hero a.btn:before,
.ce_rsce_imgNav .name:before{
    background-color:rgba(255,255,255,.2);
}

a.btn:not(.cta):is(:hover, :focus):before,
.btn:not(.cta) > a:is(:hover, :focus):before,
.ce_rsce_imgNav a:is(:hover, :focus) .name:before,
.formbody button:is(:hover, :focus):before{
    width:100%;
}

.btn.cta > a{
    background-color: var(--c-darkgrey);
    color:#fff;
    line-height:3.85rem;
    padding:0 4rem 0 2rem;
    transition:background-color var(--tt);
}

.btn.cta > a:after,
.btn.cta > a:before{
    content:"";
    display:block;
    height:1rem;
    aspect-ratio: 1/1;
    mask-image:url(../img/arrow.svg);
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    background-color:#fff;

    position:absolute;
    transform:translateY(-50%);
    right:2rem;
    top:50%;

    transition:top var(--tt);
}

.btn.cta > a:before{
    mask-image:url(../img/arrow2.svg);
    top:-0.5rem;
}

.btn.cta > a:is(:hover, :focus){
    background-color:var(--c-darkgreen);
}

.btn.cta > a:is(:hover, :focus):after{
    top:calc(100% + .5rem);
}

.btn.cta > a:is(:hover, :focus):before{
    top:50%;
}


/*------------------------------------------------------------------------------------------< Artikel >---*/

.mod_article{
    text-align:center;
}

main .mod_article:not(:has(.divider)):not(:has(#map)){
    padding:5rem 0;
}

main .mod_article:nth-child(even){
    background-color:#f2f2f2;
}

main .mod_article > .inside > div:not(:last-child),
main .mod_article > .inside > nav:not(:last-child),
main .mod_article .ce_columns > div:not(:last-child),
main .accordion > div > div:not(:last-child),
main .mod_faqpage > article:not(:last-child){
    margin-bottom:5rem;
}

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

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




main .ce_text ul li{
    position:relative;
}

main .ce_text ul li:not(:last-child){
    margin-bottom:1.5rem;
}

main .ce_text.left ul li{
    padding-left:1rem;
}

main .ce_text.right ul li{
    padding-right:1rem;
}

main .ce_text.left ul{
    border-left:1px solid #cfcfcf;
    padding:1rem 0;
}

main .ce_text.right ul{
    border-right:1px solid #cfcfcf;
    padding:1rem 0;
}

main .ce_text:is(.left, .right) li:before{
    content:"";
    display:block;
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    height:1px;
    width:.5rem;
    background-color:#cfcfcf;
}



main .ce_text.left li:before{
    left:0;
}

main .ce_text.right li:before{
    right:0;
}


.ce_rsce_room_price_link{
    text-align:left;
    border-top:1px solid #cfcfcf;
    padding-top:2rem;
    margin-top:2rem;
}

.ce_rsce_room_price_link .price{
    font-size:var(--fs-h3);
}






main .ce_text figure.float_below{
    margin-top:3rem;
}

main .ce_text figure.float_above{
    margin-bottom:1rem;
}

main .ce_text figure img{
    margin:0 auto;
}

/* main .image_container img{
    width:100%;
    height:auto;
} */

#map{
    position:relative;
    height:50vh;
    max-height:500px;
}

#map .message{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

table td{
    padding:.5rem;
}

table tr:first-child td{
    font-weight:var(--fw-regular);
}


main div[class*="col-"] picture img{
    width:100%;
    height:auto;
}




main .ce_text a:not(.btn),
main .widget-explanation a:not(.btn){
    position:relative;
}

main .ce_text a:not(.btn):before,
main .ce_text a:not(.btn):after,
main .widget-explanation a:not(.btn):before,
main .widget-explanation a:not(.btn):after{
    content:"";

    position:absolute;
    bottom:0;
    left:0;
    height:1px;
}

main .ce_text a:not(.btn):before,
main .widget-explanation a:not(.btn):before{
    transition:left var(--tt) .1s;
    right:0;
    left:0;
    background-color:#cfcfcf;
}

main .ce_text a:not(.btn):is(:hover, :focus):before,
main .widget-explanation a:not(.btn):is(:hover, :focus):before{
    transition:left var(--tt) 0s;
    left:100%;
}

main .ce_text a:not(.btn):after,
main .widget-explanation a:not(.btn):after{
    transition: width var(--tt) 0s;
    width:0;
    background-color:var(--c-darkgreen);
}

main .ce_text a:not(.btn):is(:hover, :focus):after,
main .widget-explanation a:not(.btn):is(:hover, :focus):after{
    transition: width var(--tt) .1s;
    width:100%;
}

/*------------------------------------------------------------------------------------------< Gridelemente >---*/

.grid ul{
    display:grid;
    gap:var(--grid__gutter);
}

.grid.gr_2 ul{
    grid-template-areas:
        "a b b";
}

.grid.gl_2 ul{
    grid-template-areas:
        "b b a";
}

.grid:is(.gr_2, .gl_2) li:nth-child(1){
    grid-area: b;
}

.grid.gr_3 ul{
    grid-template-areas:
        "a b b"
        "c b b";
}

.grid.gl_3 ul{
    grid-template-areas:
        "b b a"
        "b b c";
}

.grid:is(.gr_3, .gl_3) li:nth-child(1){
    grid-area: b;
}



.grid.gr_4 ul{
    grid-template-areas: 
        "a b c"
        "d b c";
}

.grid.gl_4 ul{
    grid-template-areas: 
        "b c a"
        "b c d";
}


.grid:is(.gr_4, .gl_4) li:nth-child(1){
    grid-area: b;
}
.grid:is(.gr_4, .gl_4) li:nth-child(2){
    grid-area: c;
}

@media screen and (max-width:980px){
    .ce_rsce_imgNav:is(.gr_3, .gl_3, .gl_4, .gr_4) ul{
        grid-template-areas:
                "b"
                "c"
                "a"
                "d";
            }

    .ce_rsce_imgNav .image_container{
        aspect-ratio:1/.5 !important;
    }
}


/*------------------------------------------------------------------------------------------< Galerie >---*/

:is(.ce_rsce_gallery, .ce_image, .ce_rsce_imgNav) .image_container{
    position:relative;
    overflow:hidden;
}

:is(.ce_rsce_gallery:is(.gr_3, .gl_3), .ce_rsce_imgNav:is(.gr_3, .gl_3)) .image_container{
    aspect-ratio: 1/1;
}

.ce_rsce_gallery:is(.gl_2, .gr_2) li:first-child .image_container{
    aspect-ratio: 1/.49;
}

:is(.ce_rsce_gallery:is(.gr_4, .gl_4), .ce_rsce_imgNav:is(.gr_4, .gl_4)) li:nth-child(n+1) .image_container{
    aspect-ratio:1/2.057;
}

:is(.ce_rsce_gallery:is(.gr_4, .gl_4), .ce_rsce_imgNav:is(.gr_4, .gl_4)) li:nth-child(n+3) .image_container{
    aspect-ratio:1/1;
}

.ce_rsce_gallery img,
.ce_rsce_imgNav img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

:is(.ce_image, .ce_rsce_gallery) figcaption{
    position:absolute;
    display:inline-block;
    bottom:1rem;
    left:1rem;
    padding:.5rem;

    color:#fff;
    text-align: left;
    background-color:rgba(0,0,0,.5);
}

.ce_gallery ul{
    display:flex;
    flex-wrap:wrap;
    gap:var(--grid__gutter);
}

/*------------------------------------------------------------------------------------------< Bildnavigation >---*/

.ce_rsce_imgNav img{
    transition:transform var(--tt);
}

.ce_rsce_imgNav .name{
    position:absolute;
    left:1rem;
    bottom:1rem;
    
    z-index:2;
}

.ce_rsce_imgNav a{
    position:absolute;
    inset:0;
    color:#fff;
}

.ce_rsce_imgNav a:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,.5);
    transition:background-color var(--tt);
    z-index:1;
}

.ce_rsce_imgNav a:is(:hover, :focus):before{
    background-color:rgba(0,0,0,.2);
}

.ce_rsce_imgNav a:is(:hover, :focus) img{
    transform:translate(-50%, -50%) scale(1.05);
}

/*------------------------------------------------------------------------------------------< Icon / Text / Link >---*/

.ce_rsce_icon_text_link:not(:last-child){
    margin-bottom:2rem !important;
}

.ce_rsce_icon_text_link ul{
    display:flex;
    flex-direction: column;
    gap:var(--grid__gutter);
    flex-wrap:wrap;
}

.ce_rsce_icon_text_link ul.center{
    justify-content: center;
}

.ce_rsce_icon_text_link ul.right{
    justify-content:end;
}

.ce_rsce_icon_text_link ul:is(.list, .centered) li{
    display: flex;
    gap:var(--grid__gutter);
    align-items: center;
}

.ce_rsce_icon_text_link ul.centered li{
    flex-direction:column;
}

.ce_rsce_icon_text_link ul.rowList{
    flex-direction: row;
}


.ce_rsce_icon_text_link ul .icon{
    position:relative;
    height:3rem;
    aspect-ratio: 1/1;
    border:1px solid var(--c-fontcolor);
}

.ce_rsce_icon_text_link .icon img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    width:80%;
    height:auto;
    max-width:80%;
    max-height:80%;
}

/*------------------------------------------------------------------------------------------< Formulare >---*/

.formbody :where(input.text, select, textarea){
    width:100%;
    display:block;
    line-height:2rem;
    padding:0 1rem;
}

.formbody{
    text-align: left;
}

.formbody .widget:not(:last-child){
    margin-bottom:1rem;
}

.formbody fieldset:not(:last-child){
    margin-bottom:2rem;
}

.formbody > fieldset > legend{
    font-weight:var(--fw-regular);
    text-align:center;
}

.formbody .explanation{
    text-align: center;
    color:#aaa;
}

.ce_text.right input.text,
.ce_text.right .widget-explanation,
.ce_text.right .widget-submit{
    text-align:right;
}

/*------------------------------------------------------------------------------------------< Nachrichten >---*/

.mod_newslist{
    display:grid;
    grid-template-columns: repeat(3, 1fr) ;
    gap:var(--grid__gutter);
}

@media screen and (max-width: 767px){
    .newsTeaser{
        aspect-ratio: 1/1;
    }
}

@media screen and (min-width: 768px) {
    .newsTeaser:nth-child(4n+2),
    .newsTeaser:nth-child(4n+3){
        grid-column: span 2;
    }

    .newsTeaser:nth-child(4n+0),
    .newsTeaser:nth-child(4n+1){
        background-color:blue;
        aspect-ratio: 1/1;
    }
}

@media screen and (max-width: 767px) {
    .mod_newslist{
        grid-template-columns: 1fr;
    }
    .newsTeaser{

    }
}

.newsTeaser{
    position:relative;
    overflow:hidden;
}

.newsTeaser a{
    position:absolute;
    inset:0;
}

.newsTeaser img{
    position:absolute;
    transform:translate(-50%, -50%);
    left:50%;
    top:50%;
    transition:transform var(--tt);
}

.newsTeaser a:is(:hover, :focus) img{
    transform:translate(-50%, -50%) scale(1.05);
}

.newsTeaser .teaser{
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,.5);
}

.newsTeaser a:is(:hover, :focus) .teaser:before{
    width:100%;
}

.newsTeaser .teaser > div{
    position:absolute;
    transform:translateY(-50%);
    left:1rem;
    right:1rem;
    top:50%;
    color:#fff;
}

.newsTeaser .teaser .ce_text{
    text-overflow: ellipsis;

    /* Needed to make it work */
    overflow: hidden;
    white-space: nowrap;
}




/*------------------------------------------------------------------------------------------< Accordion >---*/

.ce_accordion:not(:last-child){
    margin-bottom:1rem;
}

.ce_accordion .toggler{
    background-color: var(--c-darkgrey);
    color:#fff;
    padding:1rem;
    font-size:var(--fs-h3);
    cursor:pointer;
}

.toggler > h3{
    margin:0;
}

.accordion{
    padding:3rem 0;
}

.accordion .ce_text{
    padding:0 1rem;
}

main .mod_article:nth-child(even) .accordion{
    background-color:#fff;
}

main .mod_article:nth-child(odd) .accordion{
    background-color:var(--c-lightgrey);
}

/*------------------------------------------------------------------------------------------< Footer >---*/

footer{
    background-color:var(--c-darkgreen);
    padding:3rem 0 5rem;
    color:#fff;
}

footer nav :where(a, strong){
    color:inherit;
    text-decoration:none;
}

footer nav ul{
    justify-content: center;
    gap:2rem;
    flex-wrap:wrap;
}

footer #address{
    text-align:center;
    margin:5rem 0;
}

footer #address > .ce_text:first-child{
    font-size:var(--fs-h2);
    text-transform:uppercase;
}

footer #cuju{
    display:table;
    text-align: center;
    margin:0 auto;
    font-size:.8rem;
}

footer #cuju .logo{
    width:100%;
    aspect-ratio: 1/1;
    margin-bottom:1rem;
    background-image:url(../img/cuju_logo.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
}