/*-------------------------------------------------------------------------------< Farben >---*/

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

header > .inside,
footer > .inside{
    width:100%;
    max-width:calc(1640px + 2rem);
    margin:0 auto;

    position:relative;
}

header > .inside{ padding:0 1rem; }
footer > .inside{ padding:3 1rem; }


main .mod_article:not(.fullWidth) .inside_article,
footer .inside_article{
    width: 100%;
    max-width: calc(1364px + 2rem);
    margin:0 auto;
    padding:3rem 1rem;
}

/*-------------------------------------------------------------------------------< Kopfbild >---*/

#stage{
    height:50vh;
    overflow:hidden;
    position:relative;
}

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

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

header{
    position:relative;

    height: 5.32rem;

    background-color: var(--c_orange_dark);
    color:#fff;

    box-shadow:0 2px 5px rgba(0,0,0,.3);
    z-index:1;
    transition:top .4s, height .3s;
}

#sidebar{
    position:absolute;
    left:0;
    top:0;
    height:5.32rem;
    width:calc(100% / 2 - 682px);
    min-width:5.2rem;
    background-color:#fff;

    transition:height .3s;

}

#sidebar:before{
    content:"";
    position:absolute;

    height:5.32rem;
    width:10rem;
    background-color:#fff;
    top:0;
    right:-6rem;
    overflow:hidden;
    clip-path:ellipse(50% 110% at 50% 0%);
    
    transition:height .3s;

    /* transition:clip-path .4s, right .4s, width 0s, height .4s; */

}

body.fixedNav #sidebar,
body.fixedNav #sidebar:before{
    height:3.32rem;
}



body.fixedNav header{
    position:fixed;
    top:-5.32rem;
    left:0;
    right:0;

    height:3.32rem;
}

body.fixedNav.scrollUp header{
    top:0;
}

body.fixedNav #container{
    margin-top:5.32rem;
}


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

#homeLink{
    display: block;
    width: 10.4rem;
    height: 100%;

    position: absolute;
    transform:translateX(50%);
    right:0;

    z-index:3;
}

#logo_hoch{
    position:absolute;
    width: 10.4rem;
    height: 9.92rem;
    right:0;
    bottom:.55rem;

    background-image: url(../img/amenda_logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transition:bottom .3s, opacity .3s;
}

body.fixedNav #logo_hoch{
    bottom:5.32rem;
}

#logo_quer{
    position:absolute;
    transform:translateY(-50%);
    right:0;
    top:50%;

    width:10.4rem;
    height:0;


    background-image: url(../img/logo_quer.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transition:height .3s;
}

body.fixedNav #logo_quer{
    /* right:0; */
    height:2.82rem;
}










header button.hamburger{
    position:absolute;
    transform:translateY(-50%);
    right:1rem;
    top:50%;
    z-index:1;

    transition:top .4s;
}

header nav a,
header nav strong{
    display:block;
}










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

    body.openNav{
        overflow:hidden;
    }

    #shadowNav{
        position:fixed;
        left:-20%;
        top:50%;
        background-color:#fff;
        width: 0;
        height:0;
        clip-path:ellipse(50% 50% at 50% 50%);
        z-index:10;
        opacity:0;
        transition:width .4s, height .4s, top .4s, clip-path .4s, left .4s, opacity .4s;
    }

    #mainNav{
        position:fixed;
        right:-20%;
        top:50%;
        background-color:var(--c_orange_dark);
        width:0;
        height:0;
        clip-path: ellipse(50% 50% at 50% 50%);
        z-index:1;
        opacity:0;
        transition:width .4s, height .4s, top .4s, opacity .4s, left .4s;
    }

    body.openNav #shadowNav{
        width:60%;
        height:150%;
        top:-25%;
        left:0;
        clip-path:ellipse(75% 50% at 12% 38%);
        opacity:1;
    }

    body.openNav #mainNav{
        width:150%;
        height:150%;
        top:-25%;
        right:-50%;
        opacity:1;
    }

    body.openNav button.hamburger{
        position:fixed;
        top:2rem;
        right:1rem;
    }

    /* body.openNav #homeLink{
        top:10%;
        left:50%;
        transform:translateX(-50%);
        position:fixed;
    } */

    #shadowNav .mod_navigation,
    #mainNav .mod_navigation{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        

    }

    #shadowNav .mod_navigation ul,
    #mainNav .mod_navigation ul{
        position:absolute;
        transform:translate(-50%, -50%);
        top:50%;
        left:50%;

        font-size:2rem;
        font-weight:var(--fw_bold);
        text-align:center;

    }

    #shadowNav .mod_navigation ul{
        color:var(--c_orange_dark);
        
    }

    #mainNav .mod_navigation ul{
        color:#fff;
        /* text-shadow: 0 3px 12px #000; */

    }

}




















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

    #shadowNav,
    button.hamburger{
        display:none;
    }

    #mainNav{
        position:absolute;
        transform:translateY(-50%);
        left: 16.56rem;
        top:50%;
    }

    #mainNav ul{
        display:flex;
        gap:var(--grid__gutter);
    }

}

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

#main .mod_article.light_orange{
    background-color:var(--c_orange_superbright);
}

#main .mod_article.dark_orange,
#main .mod_article.dark_orange :where(h1, h2, h3, h4){
    background-color:var(--c_orange_bright);
    color:#fff;
}

.row img{
    width:100%;
    height:auto;
}

.inside_article :where(.content-text, .content-accordion):not(:last-child){
    margin-bottom:2rem;
}

main .mod_article a{
    text-decoration: underline;
}

/*-------------------------------------------------------------------------------< Bilder >---*/

.content-text.media:after{
    content:"";
    display:block;
    clear:both;
}

.content-text.media figure{
    border-radius:var(--border_radius);
    overflow:hidden;
}

.content-text.media--right figure{
    float:right;
    margin:0 0 var(--grid__gutter) var(--grid__gutter);  
}

.content-text.media--left figure{
    float:left;
    margin:0 var(--grid__gutter) var(--grid__gutter) 0;  
}

/*-------------------------------------------------------------------------------< Mitarbeiter >---*/

.team,
.team > .person{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    gap:1rem;
}

.team{
    column-gap:var(--grid__gutter);
    row-gap: calc(2 * var(--grid__gutter));
}

@media screen and (min-width:1200px){
    .team > .person:nth-child(4n+4) .img,
    .team > .person:nth-child(4n+3) .img{
        order:2;
    }
    
    .team > .person:nth-child(4n+4) .text,
    .team > .person:nth-child(4n+3) .text{
        text-align:right;
    }
}

@media screen and (max-width:1199px){
    .team{
        display:block;
    }

    .team > .person:nth-child(even) .img{
        order:2;
    }

    .team > .person:nth-child(even) .text{
        text-align:right;
    }
    
}



.team .person .img img{
    border-radius:50%;
    border:5px solid var(--c_orange_dark);
    overflow:hidden;
}

.team .person .name{
    margin-bottom:.5rem;
    color:var(--c_orange_dark);
}

.team .person .position{
    font-size:.8rem;
}



/*-------------------------------------------------------------------------------< Bildlink (rund) >---*/

.content-hyperlink figure{
    position:relative;
    margin-bottom:1rem;
}

.content-hyperlink figure a{
    display:block;
}

.content-hyperlink figure a:after{
    content:"";
    display:block;
    width:2rem;
    aspect-ratio: 1/1;
    background-image:url(../img/arrow_button.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;

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

.content-hyperlink img{
    border-radius:100%;
    border:5px solid var(--c_orange_dark);
}

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

.mod_article.fullWidth{
    height:20rem;
    overflow:hidden;
    position:relative;
}

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

/*-------------------------------------------------------------------------------< Akkordion >---*/

.content-accordion .handorgel__header{
    background-color:var(--c_orange_dark);
    color:#fff;
    border-radius:var(--border_radius);
    overflow:hidden;
}

.handorgel__header:not(:first-child){
    margin-top:.5rem;
}

.handorgel__header__button{
    position: relative;
    background-color:inherit;
    border-top:none;
    padding:1rem 3rem 1rem 1rem;
}

.handorgel__header__button:after{
    content:"";
    display:block;
    height:1rem;
    aspect-ratio: 1/1;
    background-image: url(../img/arrow_button_light.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    position:absolute;
    right:1rem;
    top:calc(50% - .5rem);

    transition:transform .2s;
}

.handorgel__header--opened .handorgel__header__button:after{
    transform:rotate(90deg);
}

.handorgel__content{
    border-radius:var(--border_radius);
    margin-top:.5rem;
}

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

footer{
    background-color:var(--c_orange_dark);
    color:#fff;
}


@media screen and (max-width:1099px){
    footer .navColumn{
        border-top:2px solid #fff;
        padding-top:var(--grid__gutter);
    }
}

@media screen and (min-width:1100px){
    footer .navColumn{
        border-left:2px solid #fff;
        padding-left:var(--grid__gutter);
    }
}


.contao-cookiebar .highlight .success{
    background-color: var(--c_orange_dark);
}

table tr > td:not(:first-child){
    padding-left:.5rem;
}


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

.formbody > fieldset{
    margin-bottom:2rem;
    border-radius:var(--border_radius);
    background-color:transparent;
    border:1px solid var(--c_orange_dark);
    padding:1rem;
}

.formbody > fieldset > .widget:not(:last-child),
.formbody > fieldset > .row:not(:last-child){
    margin-bottom:var(--grid__gutter);
}

.formbody .hideLabel legend,
.formbody .hideLabel > label{
    display:none;
}

.formbody .widget:not(.widget-checkbox) label{
    display:block;
    font-size:.8rem;
}

.formbody input.text,
.formbody textarea,
.formbody select{
    width:100%;
    padding:.5rem 1rem;
    border:1px solid #fff;
    border-radius:var(--border_radius);
    color:inherit;
}

.formbody textarea{
    resize: vertical;
    padding:1rem;
}

.formbody > fieldset > legend{
    color:var(--c_orange_dark);
    padding:0 .5rem;
}

form a.delete{
    font-size:0;
    margin-left:0 !important;
    position:relative;
}

form a.delete:after{
    content:"";
    width:1rem;
    aspect-ratio: 1/1;
    background-color: var(--c_orange_dark);
    display:block;
    mask-image:url(../img/wastebin.svg);
    mask-size:contain;
    mask-position: center;
    mask-repeat: no-repeat;

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

}

.widget-fineuploader  .fineuploader-container .values-list li:not(:last-child){
    margin-bottom:.5rem;
    border-bottom:1px dotted var(--c_orange_dark);
    padding-bottom:.5rem;
}

.widget-fineuploader  .fineuploader-container .fineuploader-item{
    display:flex;
    justify-content: space-between;
    gap:1rem;
}

.fineuploader-wrapper .fineuploader-container{
    margin-bottom:2rem;
}

.fineuploader-item .content{
    display:flex;
    align-items: center;
    gap:1rem;
}

.fineuploader-item .content .image img{
    border-radius: var(--border_radius);
}

.fineuploader-item .content .image .pdf{
    content:"";
    width:3.2rem;
    aspect-ratio: 1/1;
    background-color: var(--c_orange_dark);
    display:block;
    mask-image:url(../img/pdfIcon.svg);
    mask-size:contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

.widget-fineuploader .qq-upload-size{
    display:none;
}

form button{
    padding:.5rem 3rem;
    color:#fff;
    background-color:var(--c_orange_dark);
    border:1px solid var(--c_orange_dark);
    border-radius:var(--border_radius);
    transition:background-color .2s;
    cursor:pointer;
}

form button:is(:hover, :focus){
    background-color:#f39038;
}

.fineuploader-wrapper .qq-upload-button{
    border-radius:var(--border_radius);
}

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

#drdsgvo_map{
    min-height: 400px;
    max-height: 600px;
    height:100%;
    border:5px solid var(--c_orange_dark);
    border-radius:var(--border_radius);
}

.ol-control button, .ol-control a.drdsgvo_btn{
    background-color:var(--c_orange_dark) !important;
}

.ol-attribution.ol-uncollapsible img{
    width:auto !important;
}

.drdsgvo_initbtn{
    top:4rem !important;
    left:.5rem !important;
}

.ol-zoom {
    top: .5em !important;
    left: .5em !important;
}

.drdsgvo_routebtn{
    top:.5rem !important;
}

.ol-control{
    border-radius:var(--border_radius) !important;
}

.drdsgvo_routebtn a.drdsgvo_btn{
    font-size:.8rem !important;
    font-weight:var(--fw_normal) !important;
    display:inline !important;
}