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

header > .inside,
footer > .inside,
#container .mod_article:not(.full) > .inside,
.slide > .inside{
    width:100%;
    max-width:calc(1640px + 2rem);
    padding:0 1rem;
    margin:0 auto;
}

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

#wrapper:not(:has(.custom)) #container,
#wrapper > .custom{
    padding-top:5.5rem;
}



header{
    position:fixed;
    left:0;
    right:0;
    height:5.5rem;

    transition:height var(--tt);

    background-color:#fff;
    border-bottom: 1rem solid var(--c-red);

    z-index:999;
}

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

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

    body.open header{
        height:100%;
    }

}

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

/*------------------------------------------------------------------< Menü >---*/



header nav ul{
    display:flex;
    justify-content: space-between;
    gap:2rem;

    margin:1rem 0;
}

header nav :where(a, strong){
    display:block;
    font-weight:var(--fw-bold);
    text-transform:uppercase;
}

@media screen and (max-width:1349px){
    
    .hamburger{
        position:absolute;
        top:1rem;
        right:1rem;
    }

    header nav{
        position:absolute;
        transform: translate(-50%, -50%);
        top:-50vh;
        left:50%;
        transition:top var(--tt);
    }

    body.open header nav{
        top:50%;
    }

    header nav ul{
        flex-direction: column;
        text-align: center;
    }



}

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

    .hamburger{
        display:none;
    }

    header nav{
        position:absolute;
        transform:translateY(-50%);
        top:50%;
        left:1rem;
        right:1rem;
    }

    header nav :where(a, strong){
        border:2px solid var(--c-red);
        border-radius:var(--br);
        padding:.2rem .5rem;
        transition:color var(--tt), background-color var(--tt);
    }

    header nav a:where(:hover, :focus){
        background-color:var(--c-fontcolor);
        color:#fff;
    }

    header nav strong{
        background-color:var(--c-red);
        color:#fff;
    }


}

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

#stage{
    position:relative;
}

#stageSlider{
    position:relative;
    height:calc(100svh - 5.5rem);
    overflow:hidden;
}

#stage:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:33vw;
    z-index:1;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#stage:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:1rem;

    height:33.33vh;
    aspect-ratio: 1;
    z-index:2;
    background-image:url(../img/logo.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}

/*------------------------------------------------------------------< Sider >---*/

.slick-list,
.slick-track,
.slick-slide,
.slick-slide > div,
.slide,
.slide > figure.content-image{
  height:100%;
}


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

.slide .background-image img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;

    width:auto;
    height:auto;
}

.slide > .inside{
    position:absolute;
    inset:0;
}

#stageSlider .slide .slideContent{
    position:absolute;
    transform:translateY(-50%);
    width:40%;
    top:50%;
    right:2rem;
    color:#fff;

    text-align:right;
}

#stageSlider .inside.dark .slideContent{
   
}

#stageSlider .slideHeadline{
    font-size:var(--fs-h2);
    line-height: 1.3em;
}

#stageSlider .slideText{
    margin:1rem 0;
}

main .slick-slider{
    padding-bottom:3rem;
}

#stageSlider .slick-dots{
    bottom:1rem;
}

/* @media screen and (max-width:1300px){
    #stageSlider .slideHeadline{
        font-size:var(--f_s_h1);
    }
}

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

    #stageSlider .slideContent{
        width:75%;
    }

    #stageSlider .slideHeadline{
        font-size:var(--f_s_h2);
    }
} */

/*------------------------------------------------------------------< Slider-Dots >---*/

.slick-dots{
    position:absolute;
    transform:translateX(-50%);
    left:50%;
    bottom: 0rem;
    display:flex;
    gap:.5rem;
    justify-content: center;
    list-style-type:none !important;
}

.slick-dots button{
    font-size:0;
    color:transparent;
    display:block;
    height:1.15rem;
    width:1.15rem;
    border:2px solid var(--c_red_2);
    border-radius:50%;
    background-color:transparent;
    cursor:pointer;
    padding:0 !important;
}

.slick-dots .slick-active button{
    background-color:var(--c_red_2);
}

/*------------------------------------------------------------------< Schaltflächen >---*/

.more > a,
.btn > a,
.puzzleBox a{
    display:inline-block;
    padding:.2rem .5rem;

    border-radius:var(--br);
    color:#fff;
    font-weight:var(--fw-bold);
    text-transform: uppercase;
    background-color:var(--c-fontcolor);

    transition:background-color var(--tt);
}

.more > a:where(:hover, :focus),
.btn > a:where(:hover, :focus){
    background-color: var(--c-red);
}

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

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

footer .mod_navigation{
    border-right:2px solid #fff;
}

/*------------------------------------------------------------------< Zitate >---*/

.zitat{
    position: relative;
    padding:1rem 15vw;
    text-align:center;
}

.zitat:before,
.zitat:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    right:calc(10vw - 2rem);
    top:50%;

    height:3rem;
    width:2rem;

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

.zitat:after{
    left: calc(10vw - 2rem);
    right:auto;
    transform: translateY(-50%) rotate(180deg);
}

.ce_sliderStart :where(.slider-prev, .slider-next){
    display:none !important;
}

.ce_sliderStart:before{
    content:"";
    background-image:url(../img/books.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;

    display:block;
    height:4rem;
}



/*------------------------------------------------------------------< Puzzlebox >---*/

.puzzleHeadline{
    position:relative;
    aspect-ratio: 1/.5;
}

.puzzleHeadline :where(h2, h3){
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;

    width:100%;
    text-align:center;

    margin:0;
    transition:font-size var(--tt);
}

.puzzleBox:where(:hover, :focus) .puzzleHeadline :where(h2, h3){
    font-size:calc(var(--fs-h2) + .2rem);
}

.puzzleHeadline:before{
    content:"";
    position:absolute;
    transform:translate(-50%, -50%) rotate(0deg) scale(1);
    top:50%;
    left:50%;

    width:33%;
    aspect-ratio: 1;

    z-index:-1;

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

    opacity:.3;

    transition:transform var(--tt), opacity var(--tt);
}

.puzzleBox:where(:hover, :focus) .puzzleHeadline:before{
    transform:translate(-50%, -50%) rotate(45deg) scale(1.2);
    opacity:.5;
}



.puzzleBox .boxText{
    position:relative;
    color:#fff;
    border-radius:var(--br);
    padding:2rem;
    aspect-ratio: 1;
}

.puzzleBox.red .boxText,
.puzzleBox.red .puzzleHeadline:before{
    background-color: var(--c-red);
}

.puzzleBox.violet .boxText,
.puzzleBox.violet .puzzleHeadline:before{
    background-color: var(--c-violet);
}

.puzzleBox.yellow .boxText,
.puzzleBox.yellow .puzzleHeadline:before{
    background-color: var(--c-yellow);
}

.puzzleBox a{
    position:absolute;
    bottom:3rem;
    display:block;
    text-align:center;
    border:2px solid #fff;
    background-color:transparent;
    transition:background-color var(--tt);
}

.puzzleBox a:where(:hover, :focus){
    background-color:var(--c-fontcolor);
}


/*------------------------------------------------------------------< div. Elemente >---*/

main .mod_article:not(.full){
    padding:5rem 0;
}

main .mod_article.full .ce_text{
    padding:3rem;
}

main .mod_article > .inside > *:not(:last-child),
main .mod_article > .inside > .row > .ce_columns > *:not(:last-child){
    margin-bottom:2rem;
}







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











main ol li:not(:last-child){
    margin-bottom:1rem;
}

main ul{
    list-style-type: disc;
    margin-left:2rem;
}

main ol{
    list-style:none;
    counter-reset: li-counter;
}

main ol li{
    position:relative;
    padding:0 0 0 3rem;
    counter-increment: li-counter;
}

main ol li:before{
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:0;
    content:counter(li-counter)'.';
    display:inline-block;
    background-color:var(--c-red);
    color:#fff;
    width:2rem;
    aspect-ratio: 1;
    line-height:2rem;
    border-radius: var(--br);
    text-align:center;
    font-weight: var(--fw-bold);
}

/*------------------------------------------------------------------< Tabelle >---*/

table{
    border-collapse: separate;
    border-spacing:.5rem;
    border:0;
    width:100%;
}

tr:first-child td:not(:last-child){
    background-color:var(--c-red);
    color:#fff;
    font-weight:var(--fw-bold);
    font-size: var(--fs-h3);
}

td{
    background-color:#fff;
    border-radius:var(--br);
    -moz-border-radius: var(--br);
    padding:.5rem;
    vertical-align: middle;
    box-shadow:0 3px 5px -5px rgba(0,0,0,.5)
}

tr.head td:last-child,
table :where(tr:nth-child(1), tr:nth-child(2)) td:last-child{
    box-shadow: none;
}

tr.head td:not(:last-child){
    text-align:center;
    color:#fff;
    background-color:var(--c-yellow);
}

td:last-child{
    width:7rem;
    font-size:.7rem;
    border:0;
    background-color:transparent;
}

/*------------------------------------------------------------------< Akkordeon >---*/

.ce_accordion{
    background-color:var(--c-red);
    color:#fff;
    border-radius:var(--br);
    border:2px solid var(--c-red);
}

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

.ce_accordion > .toggler{
    padding:1rem;
    cursor:pointer;
}

.ce_accordion > .accordion{
    background-color:#fff;
    color:var(--c-fontcolor);
    border-radius:0 0 var(--br) var(--br);
    padding:1rem;
}