/*---------------------------------------------------------------------------< Farben, Hintergrund >---*/

.red{
    background-color: var(--red);
    color:#fff;
}

.lightgray{
    background-color:var(--lightgray);
}

.orange{
    background-color:var(--orange);
    color:#fff;
}

.orange .artikelNav .item{
    background-color:var(--red);
    color:#fff;
}

.imgRight,
.imgLeft{
    position:relative;
}

.imgRight:before,
.imgLeft:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    background-image:url('../img/bgimage.svg');
    background-repeat:no-repeat;
    background-size:cover;
    z-index:-1;
}

.imgRight:before{
    left:50%;
    right:0;
    background-position:right center;
}

.imgLeft:before{
    left:0;
    right:50%;
    background-position:left center;
}




//smooth scrolling
@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 8rem;
    }
}

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

#wrapper{
    width:100%;
    overflow:hidden;
}

.mod_article:not(.fullWidth) > .inside,
header > .inside,
footer > .inside,
.mod_article.fullWidth .ce_youtube{
    width:100%;
    max-width:calc(1640px + 2rem);
    margin:0 auto;
    padding-left:1rem;
    padding-right:1rem;
}

main .mod_article:not(.fullWidth){
    padding:3rem 0;
}

main .mod_article > .inside > *:not(:first-child){
    margin-top:3rem;
}

.row.downloads {
	grid-gap: 1.5rem;
	margin: 1.5rem 3rem;
	img {
		box-shadow: 0 10px 20px -10px #000;
		margin-bottom: .6rem;
	}
	figcaption {
		font-size: 18px;
	}
}

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

header a{
    text-decoration:none;
    color:inherit;
}


header{
    position:relative;
    z-index:1;
    /* overflow-x:hidden; */
}

header:before,
header:after{
    content:"";
    display:block;
    width:100%;

    position:absolute;
    z-index:-1;
}

header:before{
    height:1rem;
    background-color:var(--red);

    top:0;
    left:-50%;
}

/* header:after{
    height:500px;
    transform:translateY(100%);
    background-color:var(--orange);
    
    bottom:2.45rem;
    left:50%;
} */

header > .inside{
    display:grid;
    grid-template-areas:
        'a a a .'
        'b c d e'
        'b f f f';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:.5rem;
}

header .balken{
    grid-area:a;
    height:1rem;
    background-color:var(--red);
    
    position:relative;
}

header .balken:after{
    content:"";
    display:block;
    height:3.5rem;
    width:3.5rem;
    background-color:var(--red);
    border-radius:0 0 100%;

    position:absolute;
    transform:translateX(100%);
    bottom:0;
    right:0;


}

header .logo{
    grid-area:b;
    height:7.8rem;

    position:relative;
}

header .mail{
    grid-area:c;
    justify-self: end;

    /* background-color:purple; */
}

header .telefon{
    grid-area:d;
    justify-self: start;
    margin-left:1rem;
    padding-left:1.5rem;
    border-left:1px solid var(--red);


    /* background-color:tomato; */
}

header .suche{
    grid-area:e;
    justify-self: stretch;

    /* background-color:green; */
}

header .navigation{
    grid-area:f;
    align-self:end;
    height:2.45rem;

    position:relative;
}

/* header .navigation.open{
    height:17.15rem;
} */

#panel{
    background-color:var(--orange);
    width:calc(100% - 8.575rem);
    overflow-y:clip;
    transition:height .2s, box-shadow .2s;

    position:absolute;
    left:8.575rem;
    height:2.45rem;
}

#panel.open{
    height:17.15rem;
}

#panel > .inside{
    position:absolute;
    height:100%;
    width:100%;
    right:0;
    min-width:15rem;
    z-index:1;
}

#panel > .inside:after{
    content:"";
    
    position:absolute;
    transform:translateX(100%);
    top:0;
    right:0;
    bottom:0;
    width:3000px;
    background-color:var(--orange);
}

/* header .navigation > .inside{
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:100%;
    background-color:lightblue;
}
*/
#panel:before{
    content:"";
    display:block;
    height:8.575rem;
    width:8.575rem;
    background-color:var(--orange);
    border-radius:100% 0 0 0;
    
    position:absolute;
    left:-8.575rem;
}

#panel:after{
    content:"";
    display:block;
    height:8.575rem;
    width:8.575rem;
    background-color:var(--orange);
    border-radius:0 0 0 100%;
    
    position:absolute;
    left:-8.575rem;
    top:8.575rem;
}

header .mail,
header .telefon,
header .suche{
    /* height:5.35rem; */
    align-self:end;
}

header .mail,
header .telefon,
header .suche{
    font-weight:200;
    font-size:.8rem;
}


#logo li > a,
#logo li > strong{
    position:absolute;
    inset:0;
    background-image:url('../img/tanneberger_logo.png');
    background-repeat:no-repeat;
    background-position: left center;
    background-size: 85%;
    color: transparent;
    font-size:0;
    min-width:175px;
}


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

    header .suche,
    header .mail{
        display:none;
    }

    header > .inside{
        grid-template-areas:
            'a a a .'
            'b d d d'
            'b f f f';
    }

    header .telefon{
        justify-self: end;
        border-left:none;
    }

}


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

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

    #mNav{
        display:none;
    }

    #mainNav ul{
        display:flex;
        justify-content: space-between;
        gap:1rem;
    }
}

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

    #mNav{

        position:absolute;
        top:0;
        right:0;

        display:flex;
        align-items: center;
        justify-content: flex-end;
        color:#fff;
        height:2.45rem;
    }

    #mNav > div:first-child{
        margin-right:var(--grid__gutter);
    }

    #mainNav{
        position:absolute;
        padding:2.45rem 0;
        bottom:0;
        opacity:0;
        text-align:right;
        transition:opacity .2s;
    }

    #panel.open{
        box-shadow: 0 15px 30px -15px #000;
    }

    #panel.open #mainNav{
        opacity: 1;
    }



}

#mainNav{
    width:100%;
}


#mainNav ul li a,
#mainNav ul li strong{
    display:block;
    text-decoration:none;
    color:#fff;
    text-transform:uppercase;
    font-weight:400;
    line-height:2.45rem;
    transition:color .2s;
}

#mainNav ul li a:hover,
#mainNav ul li a:focus,
#mainNav ul li strong{
    color:var(--red);
}

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

footer{
    background-color:var(--gray);
    color:#fff;
    border-top:12px solid var(--orange);
    padding:3rem 0 5rem;
}

footer > .inside{
    display:flex;
    justify-content: space-between;
    gap:1rem;
}

@media screen and (max-width:1400px){
    footer > .inside{
        flex-direction: column;
        gap:3rem;
    }
}

footer .col > div:first-child,
footer nav li > a,
footer nav li > strong{
    font-size:1.4rem;
    text-transform: uppercase;
}

footer .col > div:first-child,
footer nav li:not(:last-child){
    margin-bottom:1.2rem;
}

footer a,
footer strong{
    color:inherit;
    text-decoration:none;
    transition:color .2s;
}

footer a:hover,
footer a:focus,
footer strong{
    color:var(--orange);
}



/*---------------------------------------------------------------------------< Eyecatcher >---*/

.eyecatcher{
    position:relative;
    color:#fff;
    font-size:2.5rem;
}

.eyecatcher .image_container{
    box-sizing: content-box;
    width:100%;
    height:100vw;
    max-height:1300px;
    position:relative;
}

.eyecatcher img{
    width:100%;
    max-width:1300px;
    height:auto;
    position:absolute;
    transform:translateX(-50%);
    left:50%;
}

.eyecatcher img{
    margin:0 auto;
}

.eyecatcher .fromLeft,
.eyecatcher .fromRight{
    width:calc(50% + 3rem);
    box-shadow:0 10px 20px -10px #000;

    position:absolute;
}

.eyecatcher .fromLeft{
    background-color:var(--red);
    border-radius:0 2.5rem 2.5rem 0;

    display:flex;
    justify-content: end;

    transform:translateY(-100%);
    left:0;
    top:calc(70% + 1.1rem);

    z-index:1;
}

.eyecatcher .fromLeft strong{
    color:var(--orange);
}

.eyecatcher .fromRight{
    border-radius:2.5rem 0 0 2.5rem;
    background-color:var(--orange);

    top:calc(70% - 1.1rem);
    right:0;
}

.eyecatcher > div > .inside{
    width:100%;
    max-width: calc(1640px / 2 + 4rem);
}

.eyecatcher .fromLeft > .inside{
    padding:2.5rem 5.5rem 2.5rem 1rem;
}

.eyecatcher .fromRight > .inside{
    padding:2.5rem 1rem 2.5rem 9rem;
}



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

.artikelNav,
.infocards{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:var(--grid__gutter);
}

@media screen and (max-width:1024px){
    .artikelNav,
    .infocards{
        grid-template-columns: 1fr 1fr;
    }
}

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

.artikelNav .item,
.infocards .infocard{
    background-color:var(--orange);
    color:#fff;
    border-radius:1rem;
    padding:3rem;
    text-align:center;
    text-decoration: none;
    font-size:1.5rem;
    box-shadow:0 10px 20px -10px #000;
}

@media screen and (max-width:1024px){
    .artikelNav .item,
    .infocards .infocard{
        padding:2rem;
        font-size:1rem;
    }
}


.artikelNav .item .image_container,
.infocard .image_container{
    width:100px;
    height:100px;
    margin:0 auto 2rem;
}

.infocard .image_container{
    margin:0;
}

.artikelNav .image_container img,
.infocard .image_container img{
    height:100%;
    max-height:100px;
    width:auto;
    max-width:100px;
    margin:0 auto;
}

.infocard .text{
    color:var(--textColor);
    font-size:1rem;
}

.infocard{
    text-align:left !important;
}

.infocard .head{
    display:flex;
    justify-content: space-between;
    align-items:flex-end;
    margin-bottom:2rem;
    font-size:1.5rem;
}

.infocard .head > .headline{
    margin-right:1rem;
}

/*---------------------------------------------------------------------------< Inhaltselemente >---*/

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

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

h1 strong{
    font-weight:800;
}

h2:before{
    content:"";
    display:inline-block;
    height:1rem;
    width:1rem;
    margin-right:.5rem;
    background-color:var(--orange);
}

.ce_text.address::first-line{
    color:var(--orange);
}

.ce_youtube .video_container{
    position:relative;
    padding-bottom:56.25%;
    box-shadow:0 70px 30px -60px #000
}

.mod_article:not(.fullWidth) img{
    box-shadow:0 70px 30px -60px #000;
    margin-bottom: .8rem;
}

.ce_youtube iframe{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

.mod_article.fullWidth .row .ce_text{
    padding:3rem;
}

.ce_text img{
    width:auto;
}

main a{
    color:inherit;
    text-decoration:none;
    transition:color .2s;
}

main a:hover,
main a:focus{
    color:var(--orange);
}

.ce_image.original img{
    width:auto;
}

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

form input.text,
form button.submit{
    border:1px solid var(--red);
    border-radius:8px;
}

form button.submit{
    background-color:var(--orange);
    color:#fff;
    border:1px solid var(--orange);
    padding:.5rem 3rem;
    text-transform:uppercase;
    text-align:center;
    min-width:120px;
}

/*---------------------------------------------------------------------------< Suche >---*/

form.search .widget-text,
.mod_search .widget-text{
    position:relative;
}

form.search .widget-text:after,
.mod_search .widget-text:after{
    content:"";
    display:block;

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

    position:absolute;
    top:0;
    bottom:0;
    width:1rem;
    right:.5rem;
}

form.search input.text,
.mod_search .widget-text input.text{
    width:100%;
    padding:.5rem 2rem .5rem .5rem;
}

.mod_search form{
    margin-bottom:3rem;
}

.mod_search .widget-submit{
    margin-top:1rem;
}

.mod_search p{
    margin-bottom:0;
}

.mod_search p.info,
.mod_search p.header{
    font-size:.8rem;
    color:#888;
}

.mod_search h3{
    font-size:1rem;
    margin-bottom:.5rem;
}

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

.mod_search > div:first-of-type{
    margin-top:3rem;
}

.mod_search p.url{
    font-size:.8rem;
    color:var(--orange);
}

/*---------------------------------------------------------------------------< diverse Mediaqueries >---*/

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

    .eyecatcher{
        font-size:1.8rem;
    }

    .eyecatcher .fromRight > .inside{padding:2.5rem 1.5rem 2.5rem 2.5rem;}
    .eyecatcher .fromLeft > .inside{padding:2.5rem 1.5rem;}

}

@media screen and (max-width:1440px){
    h1{ font-size:2.3rem; }
    h2{ font-size:1.2rem; }
    h3{ font-size:2rem; }
}




@media screen and (max-width:1024px){
    h1{ font-size:1.5rem; }
    h2{ font-size:1.4rem; }
    h3{ font-size:1.3rem; }


    main .mod_article:not(.fullWidth){
        padding:2rem 0;
    }

    .eyecatcher{
        font-size:1.5rem;
    }

    .eyecatcher .fromRight > .inside,
    .eyecatcher .fromLeft > .inside{
        padding:2.5rem;
    }

}





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

    .eyecatcher{
        font-size:1rem;
    }

    .eyecatcher .fromRight > .inside{ padding: 3rem 1rem 1rem 2rem; }
    .eyecatcher .fromLeft > .inside{ padding: 1rem; }

}







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

    .eyecatcher .fromLeft,
    .eyecatcher .fromRight{
        width:calc(65% + 2rem);
    }

    .eyecatcher .fromRight > .inside{ padding: 3rem 1rem 1rem 2rem; }
    .eyecatcher .fromLeft > .inside{ padding: 1rem; }
}

/*---------------------------------------------------------------------------< Burger-Button >---*/

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    height:22px;
}
.hamburger:hover {
    opacity: 0.7;
}
.hamburger.is-active:hover {
    opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
    background-color: #fff;
}

.hamburger-box {
    width: 30px;
    height: 22px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
    width: 30px;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.hamburger-inner::after,
.hamburger-inner::before {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -10px;
}
.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--slider .hamburger-inner {
    top: 2px;
}
.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}
.hamburger--slider .hamburger-inner::after {
    top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}
.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg);
}