/*------------------------------------------------------------< Dimensionen >---*/

main .mod_article > .inside,
footer > .inside{
    width:100%;
    max-width:1640px;
    margin:0 auto;
}

header > .inside,
main .mod_article.thin > .inside,
#stage .content-text.headline,
#banner{
    width:100%;
    max-width:1364px;
    margin:0 auto;
}

main .mod_article{
    padding:4rem 1rem;
}

header, footer{
    padding:0 1rem;
}

/*------------------------------------------------------------< Kopfzeile >---*/

header{
    position:relative;
    z-index:9;
    background-color:var(--c_fontColor);
    padding:0 1rem;
}

header .inside{
    position:relative;
    height:4rem;
}

header .contact{
    position:absolute;
    transform:translateY(-50%);
    right:0;
    top:50%;
}

header .contact{
    color:#fff;
    font-size:var(--fs_20);
    display:flex;
    gap:2rem;
}

@media screen and (max-width:1100px){
    header .contact .address{
        display:none;
    }

    @media screen and (max-width:680px){
        header .contact .telefon{
            display:none;
        }
    }
}

#logo{
    display:block;
    width:15.92rem;
    aspect-ratio: 1/1;
    background-image:url(../img/logo.svg);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;

    position:absolute;
    left:0;
    top:-6.6rem;
}

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

footer{
    background-color:var(--c_pink);
    color:#fff;
    font-size:var(--fs_20);
    padding:4rem 1rem 2rem;
}

footer div[class*="col-"]:has(.content-image){
    padding:0 30% 0 0;
}

footer nav ul{
    display:flex;
    justify-content: center;
    padding-top:4rem;
}

footer nav li:not(:last-child):after{
    content:"";
    display:inline-block;
    height:.2rem;
    aspect-ratio: 1/1;
    background-color:#fff;
    vertical-align: middle;
    border-radius:50%;
    margin:0 .5rem;
}

footer nav :is(a, strong){
    font-weight: var(--fw_bold);
}




/*------------------------------------------------------------< Bühne >---*/

#stage{
    height:calc(100svh - 4rem);
    background-color:aliceblue;
    position:relative;
}

#stage .inside,
#stage .mod_article,
#stage .swiper,
#stage .swiper-wrapper,
#stage .content-swiper,
#stage .content-image,
#stage figure{
    height:100%;
}

#stage .swiper{
    overflow:hidden;
}

#stage .swiper-slide{
    overflow:hidden;
}

#stage .content-image{
    position:relative;
}

#stage .content-image img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    width:auto;
}

#stage .swiper button{
    display:none;
}

#stage .swiper-pagination span{
    border:2px solid #fff;
    width:.8rem;
    height:.8rem;
    margin:0 .2rem;
}

#stage .swiper-pagination-bullet-active{
    background-color:var(--c_pink);
}

#stage .content-text.headline{
    position:absolute;
    left:0;
    right:0;
    bottom:4rem;
    z-index:1;
}

#stage .content-text.headline > .rte{
    padding:0 1rem;
}

#stage .content-text.headline h1{
    max-width:50%;
}

#banner{
    display:flex;
    flex-direction:column;
    position:relative;
}



#banner .bubble{
    position:relative;
    width:15.92rem;
    aspect-ratio:1/1;
    border-radius:50%;
    text-align:center;
    background-color:var(--c_beige);
}

#banner .bubble > .inside{
    position:absolute;
    transform:translateY(-50%);
    left:1rem;
    right:1rem;
    top:50%;
}

#banner .telefon:before{
    height:2rem;
    display:block;
    margin:.7rem auto;
    background-color:var(--c_fontColor);
}



#banner .down > .inside > .content-text:first-child{
    margin-bottom:1rem;
}

#banner{
    position:absolute;
    align-items: end;
    transform:translateY(-50%);
    top:-4rem;
    z-index:9;
}

#banner > .up:before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    top:50%;

    position:absolute;
    z-index:-1;

    background-color:var(--c_beige);
}

#banner .down:before{
    content:"";
    display:block;
    height:3px;
    width:20%;

    position:absolute;
    transform:translate(-50%, -50%);
    top:0;
    left:50%;

    background-color: var(--c_pink);
}

main > .inside > .mod_article:first-child > .inside{
    position:relative;


}

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

    #banner{
        position:relative;
        transform:none;
        top:auto;
        align-items: center;
        margin-bottom:4rem;
    }

}

@media screen and (max-width:400px){
    #stage h1{
        font-size:calc(3.2rem * .6);
    }
}

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

main .content-gallery ul{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:var(--grid__gutter);
}

main .content-gallery a{
    position:relative;
    display: block;
    overflow:hidden;
}

main .content-gallery a:before,
main .content-gallery a:after{
    content:"";
    display:block;
}

main .content-gallery a:before{
    position:absolute;
    inset:0;
    background-color:rgba(90,46,104,.5);
    opacity:0;
    transition:opacity .2s;
}

main .content-gallery a:after{
    position:absolute;
    height:2rem;
    width:2rem;
    
    transform:translate(-50%, -50%);
    transition:top .2s;

    left:50%;
    top:150%;
    
    background-image:url(../img/Schere.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}

main .content-gallery a:where(:hover, :focus):after{
    top:50%;
}

main .content-gallery a:where(:hover, :focus):before{
    opacity: 1;
}

@media screen and (max-width:768px){
    main .content-gallery ul{
        grid-template-columns: repeat(2, 1fr);
    }
}

/*------------------------------------------------------------< Mitarbeiterinnen >---*/

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

@media screen and (max-width:550px){
    .content-employees{
        grid-template-columns:repeat(1, 1fr);
        gap:2rem;
    }
}

.content-employees .person img{
    border-radius:50%;
    width:66%;
    margin:0 auto 2rem;
}

.content-employees .person .text{
    text-align:center;
}

.content-employees .person .name{
    font-size:var(--fs_35);
    margin-bottom:.5rem;
    line-height:1.3em;
}

.content-employees .person .position{
    font-weight:700;
}

.content-employees .person .description{
    margin-top:1rem;
    font-size:var(--fs_20);
}

/*------------------------------------------------------------< Dekobild / Karte >---*/

.row.decoration:has(.content-image){
    background-color:var(--c_beige);
}

.row.decoration img{
    position:absolute;
    width:auto;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

.row.decoration .content-image{
    height:100%;
    position:relative;
    overflow:hidden;
}

.row.decoration > div[class*="col-"]:not(:has(.content-image)):not(:has(.mod_c4g_maps)){
    padding:2rem;
}

.row.decoration > div[class*="col-"]:has(.mod_c4g_maps){
    position:relative;
}

.mod_c4g_maps{
    height:100%;
}

.anfahrt{
    text-align: center;
}

.anfahrt .adresse:before, .anfahrt .bus:before, .anfahrt .pkw:before{
    content:"";
    display:block;
    width:1.6rem;
    aspect-ratio: 1/1;
    margin:0 auto .5rem;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    background-color:var(--c_pink);
}

.anfahrt .adresse:before{mask-image:url(../img/marker.svg);}
.anfahrt .bus:before{mask-image:url(../img/bus.svg);}
.anfahrt .pkw:before{mask-image:url(../img/auto.svg);}


@media screen and (max-width:1099px){
    .row.decoration .content-image{
        height:350px;
    }
}

@media screen and (max-width:939px){
    .mod_c4g_maps{
        height:45vh;
    }
}

/*------------------------------------------------------------< Preise >---*/

table{
    width:100%;
}

table td:last-child{
    text-align:right;
    font-weight:500;
    min-width:5.62rem;
    vertical-align: middle;
}

table td{
}

/*------------------------------------------------------------< Formular >---*/

form label{
    display: block;
    font-size:var(--fs_20);
}

form .widget-checkbox label{
    display:inline;
}

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

form :is(input.text, select, textarea, button){
    width:100%;
    /* border:1px solid #fff; */
    border:none;
    border-radius: 1.34rem;
    padding:.7rem;
    box-shadow: 0 .2rem .8rem -.7rem inset;
    background-color:#fff;
    height:2.68rem;
    appearance: none;
    text-align: left;
}

form textarea{
    min-height:6rem;
    resize: vertical;
}

form button{
    width:auto !important;
    padding:.7rem 3rem !important;
    background-color: var(--c_fontColor) !important;
    color:#fff;
    cursor: pointer;
    transition: background-color .2s;
}

form button:where(:hover, :focus){
    background-color: var(--c_pink) !important;
}

.formbody > fieldset > legend{
    font-size:var(--fs_35);
    color: var(--c_pink);
}


form .person,
form .termin{
    display: grid;
    gap:var(--grid__gutter);
}

form .person{
    grid-template-columns: 1fr 1fr;
}

form .termin{
    grid-template-columns: repeat(3, 1fr);
}

.formbody > .explanation:first-of-type{
    text-align:right;
    color:#fff;
}

@media screen and (max-width:980px){
    form .termin{
        grid-template-columns: repeat(1, 1fr);
    }

    @media screen and (max-width:600px){
        form .person{
            grid-template-columns: repeat(1, 1fr);
        }
    }


}



/*------------------------------------------------------------< Icons >---*/

.address > div, .telefon > div{
    display:inline-block;
}

.telefon:before, .address:before, .mail:before{
    content:"";
    display:inline-block;
    height:1em;
    aspect-ratio: 1/1;
    vertical-align: baseline;

    background-color:#fff;

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.telefon:before{
    mask-image: url(../img/telefon.svg);
}

.address:before{
    mask-image: url(../img/marker.svg);
}

.mail:before{
    mask-image: url(../img/mail.svg);
}





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

.mod_article > .inside > div[class*="content"]:not(:last-child),
.mod_article > .inside > .row div[class*="content"]:not(:last-child){
    margin-bottom:2rem;
}

.mod_article.backgroundPattern,
.row.decoration:has(.mod_c4g_maps) > div:not(:has(.mod_c4g_maps)){
    background-image:url(../img/pattern.svg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.mod_article.color{
    background-color: var(--c_lightPink);
}

.mod_article.backgroundImg{
    position:relative;
    overflow:hidden;
}

.mod_article.backgroundImg > .inside > div.content-image:first-child{
    margin-bottom:0;
}

.mod_article.backgroundImg > .inside > div.content-image:first-child img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    z-index:-1;
    width:auto;
}

.mod_article.backgroundImg > .inside{
    padding:3rem 4rem 4rem;
    color:#fff;
    background-color:rgba(90,46,104,.9);
}

.content-image.border{
    border: 10px solid #fff;
}

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

.mod_article > .inside > div[class^="content-"]:not(:last-child){
    margin-bottom:3rem;
}

/*------------------------------------------------------------< Diverses >---*/

#cboxCurrent, #cboxTitle{
    font-size:.6rem;
    top:-1rem;
}

@media screen and (max-width:940px){
    h1{
        text-align:center;
        max-width:100% !important;
        padding:0 1rem;
        position:relative;
    }

    h1:after{
        content:"";
        display:block;
        height:2rem;
        aspect-ratio: 1/1;
        background-color:#fff;
        mask-image: url(../img/arrow.svg);
        mask-repeat:no-repeat;
        mask-size:contain;
        mask-position:center;
        margin:0 auto;
        transform:rotate(180deg);

        position:absolute;
        left:0;
        right:0;
        bottom:-3rem;

        animation: 2s infinite pulse;
    }

    @keyframes pulse {
        0%{
            opacity:33%;
        }
        23%{
            opacity: 100%;
        }
        100%{
            opacity:33%;
        }
    }


}