/*..........................................................................................< Farben >...*/

:root{
    --c_fontColor:#716666;
    --c_lightgreen:#E9F8D7;
    --c_white:#ffffff;
    --c_green:#A3BC84;
    --c_darkgreen:#609722;
    --c_gray:#F3F0EE;
    --c_button_highlight:#69a525;
    --c_red:#9F2141;
    --f_s_stage:3.85rem;
    --f_s_h1:2.75rem;
    --f_s_h2:2rem;
    --f_s_h3:1.2rem;
    --f_s_small:.8rem;
    --f_w_bold:600;
    --f_w_button:400;
    --f_shadow:0 3px 5px rgba(0,0,0,.5);
    --box_shadow:0 .3rem .7rem -.7rem rgba(0,0,0,.9);
    --box_shadow_hover:0 .5rem 1rem -.5rem rgba(0,0,0,.4);
    --border_radius: .3rem;
}

/*..........................................................................................< Dimensionen >...*/

#container .mod_article:not(.full) > .color > .inside,
header > .inside,
footer > .inside,
#stage .slide > .inside,
#container .recipeSlider .recipeContent,
#container .mod_article.full .normal{
    width:100%;
    max-width:calc(1364px + 4rem);
    margin:0 auto;
    padding: 2rem;
}

#container .mod_article.full > .color > .inside{
    padding:2rem 0;
}

#container .mod_article.zeroTop > .color > .inside{ padding-top:0 !important; }
#container .mod_article.zeroBottom > .color > .inside{ padding-bottom:0 !important; }
#container .mod_article.zeroTopBottom > .color > .inside{ padding-top:0 !important; padding-bottom:0 !important; }

header > .inside{
    padding:0 2rem;
}

#container .mod_article.wider > .color > .inside,
header > .inside,
#stage .slide > .inside{
    max-width:calc(1640px + 4rem);
}

main .mod_article .color > .inside > div:not(:last-child){
    margin-bottom:3rem;
}

#stage{
    margin-top:7vw;
}

@media screen and (min-width:1875px){
    #stage{
        margin-top:130px;
    }
}

@media screen and (max-width:1000px){
    #stage{
        margin-top:70px;
    }
}

#container{
    position: relative;
    z-index:0;
}



/*..........................................................................................< Suche >...*/

#search{
    position:absolute;
    right:0;
    top:0;
    width:2rem;
    height:1.5rem;
    display:flex;
    justify-content: end;
    overflow:hidden;

    transition:width .2s, right .2s;
}

#search button{
    height:1.5rem;
    width:1.5rem;

    background-image:url(../img/glass.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:50%;
    background-color:transparent;

    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(113deg) brightness(106%) contrast(101%);

    transition:background-size .2s;
}

#search .ce_form{
    position:absolute;
    left:0;
    width:calc(100% - 2.5rem);
}

#search input.text{
    line-height:1.5rem;
    padding:0;
    transition:padding .1s;
}

/*..........................................................................................< Kopfzeile, Hauptmenü >...*/

header{
    background-color:var(--c_green);
    min-height:70px;
    max-height:130px;
    height:7vw;

    position:fixed;
    left:0;
    right:0;
    top:0;

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

body.hideNav header{
    top: -10rem;
}

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


#navAndSearch{
    position:absolute;
    right:2rem;
    bottom:1rem;
}

header .content-hyperlink{
    position:absolute;
    bottom:0;
    left:2rem;
    display:block;
    width:13.5vw;
    max-width:287px;
    min-width:140px;

    transform:translateY(27.28%);

    transition:width .2s;
}

body.smallNav header .content-hyperlink,
body.hideNav header .content-hyperlink{
    width:140px;
}

header header .content-hyperlink a:before{
    content:"";
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4.5rem;
    box-shadow:var(--box_shadow);
}

header button.hamburger{
    position:absolute;
    right:-100px;
    bottom:1rem;
    opacity:0;
    transition:right .2s, opacity .2s, top .2s;
}

.mod_navigation a,
.mod_customnav a,
.mod_navigation strong,
.mod_customnav strong{
    text-align:center;
    display:inline-block;
    text-decoration:none;
    color:var(--c_white);
    font-size:1.25rem;

    transition:font-weight .2s, text-shadow .2s, color .2s;
}

.mod_navigation a:before,
.mod_customnav a:before{
    content:attr(title);
    font-weight:400;
    height:0;
    display:block;
    overflow:hidden;
    visibility: hidden;
}

.mod_navigation a:hover,
.mod_navigation a:focus,
.mod_customnav a:hover,
.mod_customnav a:focus,
.mod_navigation .active > strong,
.mod_customnav .active > strong,
.mod_navigation .trail > a,
.mod_customnav .trail > a{
    font-weight:400;
    text-shadow:0 3px 9px rgba(0,0,0,.2);
}


@media screen and (min-width:1501px){
    #addNav{
        display:none;
    }

    #firstNav{
        padding-right:calc( 1.5rem + var(--grid__gutter));
    }

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

    #search button{
        cursor:pointer;
    }

    #search button:hover,
    #search button:focus{
        background-size:70%;
    }

    #search.active{
        width:100%;
    }

    #search.active input.text{
        padding:0 .5rem;
    }
}

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

    header button.hamburger{
        right:2rem;
        bottom:1rem;
        opacity:1;
    }

    header #navPanel{
        padding:0;
        position:fixed;
        right:-51vw;
        top:0;
        height:100vh;
        width:50vw;
        /* min-width:250px; */
        /* background-image:url(../img/wood.jpg); */
        /* background-size:contain; */
        background-color:var(--c_red);
        box-shadow:1px 0 10px #000;
        transition:right .3s;
    }

    header #navPanel > .inside{
        position:absolute;
        transform:translateY(-50%);
        top:50%;
        left:2rem;
        right:2rem;
    }

    #firstNav{
        margin-bottom:1rem;
        padding-bottom:1rem;
        border-bottom: 1px solid var(--c_green);
    }

    .mod_navigation a,
    .mod_customnav a{
        text-align:left;
    }

    .mod_navigation a:hover,
    .mod_navigation a:focus,
    .mod_customnav a:hover,
    .mod_customnav a:focus{
        color:var(--c_green);
    }

    body.openNav header #navPanel{
        right:0;
    }



    #search{
        right:2rem;
        left:2rem;
        bottom:2rem;
        top:unset;
        width:auto;
    }

    #search input.text{
        padding:0 .5rem;
    }

}

/*..........................< kleiner Kopf >...*/



body.smallNav header,
body.hideNav header{
    height:3rem;
}

/*..........................................................................................< Footer >...*/

footer{
    background-color:var(--c_red);
    color:#fff;
    position:relative;
}

footer:before{
    position:absolute;
    top:-5.5vw;
    content:"";
    width:100%;
    height:6vw;
    background-image:url(../img/footer.svg);
    background-repeat:no-repeat;
    background-size:100%;
    background-position:left bottom;
}

footer nav a,
footer nav strong{
    color:inherit;
    text-decoration:none;
    margin: .3rem 0;
    text-align:left;
    text-shadow: var(--f_shadow);
}

footer .content-hyperlink{
    width:60%;
    margin-top:-2.3rem;
}

footer .inside{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:var(--grid__gutter);
    padding-top:5rem;
}

@media screen and (max-width:939px){
    footer .inside{
        grid-template-columns: 1fr;
        gap:calc(2 * var(--grid__gutter));
    }
    footer .content-hyperlink{
        width:33%;
        margin-top:-2.3rem;
    }
}



/*..........................................................................................< StageImages / Slider >...*/


#stage{
    position:relative;
}

#stage::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:6vw;

    background-image:url(../img/wave_stage.svg);
    background-repeat:repeat-x;
    background-position:center bottom;
}

#sliderBig,
#detailImage{
    position:relative;
    height:calc(80svh - 7vw);
    overflow:hidden;
}

#detailImage{
    height:30vw;
    max-height:500px;
}

@media screen and (min-width:1857px){
    #sliderBig{
        height:calc(80svh - 130px);
    }
    #detailImage{
        /* height:calc(30svh - 130px); */
    }
}

@media screen and (max-width:1000px){
    #sliderBig{
        height:calc(80svh - 70px);
    }
    #detailImage{
        /* height:calc(30svh - 70px); */
    }
}




/*..........................................................................................< Slider >...*/

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


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

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

    width:auto;
    height:auto;
}

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

#sliderBig .slideContent{
    position:absolute;
    transform:translateY(-50%);
    width:55%;
    top:50%;
    left:2rem;
    color:#fff;
}

#sliderBig .slideHeadline{
    font-size:var(--f_s_stage);
    font-weight:var(--f_w_bold);
    text-shadow: var(--f_shadow);
    line-height: 1.3em;
}

#sliderBig .slideText{
    margin:1.5rem 0;
}

#sliderBig .slick-dots{
    bottom:2rem;
}

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

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

    #sliderBig .slideContent{
        width:75%;
    }

    #sliderBig .slideHeadline{
        font-size:var(--f_s_h2);
    }
}

/*..........................................................................................< Slick-Dots >...*/

.slick-dots{
    position:absolute;
    bottom: -6vw;
    width:50%;
    display:flex;
    gap:.5rem;
    justify-content: center;
    list-style-type:none !important;
    z-index:9;
}

.slick-dots button{
    font-size:0;
    color:transparent;
    display:block;
    height:1.15rem;
    width:1.15rem;
    border:4px solid #fff;
    border-radius:50%;
    background-color:transparent;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(0,0,0,.9), 0 2px 5px rgba(0,0,0,.9) inset;
    padding:0 !important;
}

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



/*..........................................................................................< Arikel (Hintergründe und Farben) >...*/



main > .inside .mod_article{
    position:relative;
}

main > .inside > .mod_article:nth-child(1){z-index: 20;}
main > .inside > .mod_article:nth-child(2){z-index: 19;}
main > .inside > .mod_article:nth-child(3){z-index: 18;}
main > .inside > .mod_article:nth-child(4){z-index: 17;}
main > .inside > .mod_article:nth-child(5){z-index: 16;}
main > .inside > .mod_article:nth-child(6){z-index: 15;}
main > .inside > .mod_article:nth-child(7){z-index: 14;}
main > .inside > .mod_article:nth-child(8){z-index: 13;}
main > .inside > .mod_article:nth-child(9){z-index: 12;}
main > .inside > .mod_article:nth-child(10){z-index: 11;}
main > .inside > .mod_article:nth-child(11){z-index: 10;}
main > .inside > .mod_article:nth-child(12){z-index: 9;}
main > .inside > .mod_article:nth-child(13){z-index: 8;}
main > .inside > .mod_article:nth-child(14){z-index: 7;}
main > .inside > .mod_article:nth-child(15){z-index: 6;}
main > .inside > .mod_article:nth-child(16){z-index: 5;}
main > .inside > .mod_article:nth-child(17){z-index: 4;}
main > .inside > .mod_article:nth-child(18){z-index: 3;}
main > .inside > .mod_article:nth-child(19){z-index: 2;}
main > .inside > .mod_article:nth-child(20){z-index: 1;}


main .mod_article.spacer{
    position:relative;
    height:40vw;
    max-height:500px;
    overflow:hidden;
}

main .mod_article.spacer .color{
    height:calc(100% - 6vw);
}

main .mod_article.spacer .content-image{
    position:static;
}

main .mod_article.spacer img{
    width:auto;
    height:auto;
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;  
} 

main .mod_article.wave{
    margin-bottom:-6vw;
}

main .mod_article.wave + .mod_article > .color{
    padding-top:6vw;
}

main .mod_article.wave:after{
    content:"";
    display:block;
    height:6vw;
    width:100%;
    background-repeat:repeat-x;
    background-position:center -1px;
}

main .mod_article.wave.wood:after,
main .mod_article.wave.spacer:after{
    position: relative;
    background-position:center 1px;
    z-index:1;
}

main .mod_article.wave:after{ background-image:url(../img/wave_white_bottom.svg); }
main .mod_article.lightgreen.wave:after{ background-image:url(../img/wave_green_bottom.svg); }
main .mod_article.gray.wave:after{ background-image:url(../img/wave_gray_bottom.svg); }

main .mod_article.wood.wave.nextGreen:after{background-image:url(../img/next_green.svg);}
main .mod_article.wood.wave.nextWhite:after{background-image:url(../img/next_white.svg);}
main .mod_article.wood.wave.nextGray:after{background-image:url(../img/next_gray.svg);}
main .mod_article.spacer.wave.nextGreen:after{background-image:url(../img/next_green.svg);}
main .mod_article.spacer.wave.nextWhite:after{background-image:url(../img/next_white.svg);}
main .mod_article.spacer.wave.nextGray:after{background-image:url(../img/next_gray.svg);}




main .mod_article.lightgreen > .color{
    background-color:var(--c_lightgreen);
}

main .mod_article.gray > .color{
    background-color:var(--c_gray);
}

main .mod_article.wood{
    background-image:url(../img/wood.jpg);
    background-size:cover;
    background-position:center;

    color:var(--c_white);
}
.mod_article.wood h2 {
    color: #ffffff;
    text-align: center;
}
.mod_article.wood h3 {
    color: #ffffff;
    text-shadow: #00000050 0 3px 6px;
}




.mod_article.full .row > div[class^=col]:last-child > .content-text{
    padding-right:2rem;
    text-align:right;
}

main > .inside > .mod_article:last-child > .color > .inside{
    padding-bottom:10rem !important;
}

/*..........................................................................................< Schaltflächen >...*/

main .content-text a,
main .ce_form a,
main .cr_image a{
    text-decoration:none;
    color:var(--c_darkgreen);
    font-weight: var(--f_w_button);
    transition:color .2s;
}

main .content-text a:hover,
main .ce_form a:hover,
main .cr_image a:hover{
    color:var(--c_red);
}

.button a,
a.button,
main .content-hyperlink a,
form button{
    position:relative;
    display:inline-block;
    vertical-align: middle;
    background-color:var(--c_darkgreen);
    color:#fff;
    text-decoration:none;
    padding:.5rem;
    margin:0 .6rem;
    font-weight:var(--f_w_button);
    box-shadow:0px .3rem .5rem rgba(0,0,0,.5);
    transition:transform .2s, box-shadow .2s, background-color .2s;
    cursor:pointer;
}



.button a:before,
a.button:before,
main .content-hyperlink a:before,
form button:before{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:-.6rem;
    border-top: 1.25rem solid var(--c_darkgreen);
    border-bottom: 1.25rem solid var(--c_darkgreen);
    border-right:.2rem solid var(--c_darkgreen);
    border-left:.6rem solid transparent;
    transition:border-color .2s;
    cursor:pointer;
}

.button a:after,
a.button:after,
main .content-hyperlink a:after,
form button:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    right:-.6rem;
    border-top: 1.25rem solid var(--c_darkgreen);
    border-bottom: 1.25rem solid var(--c_darkgreen);
    border-left: .2rem solid var(--c_darkgreen);
    border-right:.6rem solid transparent;
    transition:border-color .2s;
    cursor:pointer;
}

.button a:hover:after,
a.button:hover:after,
main .content-hyperlink a:hover:after,
form button:hover:after{
    border-color:var(--c_button_highlight);
    border-right-color: transparent;
}

.button a:hover:before,
a.button:hover:before,
main .content-hyperlink a:hover:before,
form button:hover:before{
    border-color:var(--c_button_highlight);
    border-left-color: transparent;
}

.button a:hover,
a.button:hover,
main .content-hyperlink a:hover,
form button:hover{
    transform:scale(1.1);
    box-shadow:0px .3rem .7rem rgba(0,0,0,.35);
    background-color:var(--c_button_highlight);
}

/*..........................................................................................< diverse Elemente >...*/

main p:not(:last-child),
main .content-table:not(:last-child),
main .content-text ul:not(:last-child),
main .content-text ol:not(:last-child){
    margin-bottom:1rem;
}

.content-table table{}

.content-table table tr:nth-child(odd){
    background-color:#fff;
}

.content-table table td{
    padding:.5rem;
}

main .content-text ul,
#ingredients ul{
    list-style-type: disc;
    margin-left:1rem;
}

main .content-text ol{
    margin-left:1rem;
}

.content-image {
 position: relative;   
}

figure figcaption {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    color: #fff;
    font-size:.6rem;
    mix-blend-mode: difference;
}

.spacer.wave figcaption{
    left:inherit;
    width:50%;
    right:0;
    text-align: center;
}

.media--left figure {
    float: left;
    margin: 0 1rem 1rem 0;
}
.media--right figure {
    float: right;
    margin: 0 0 1rem 1rem;
}
.media--left img,
.media--right img{
    width: inherit;
}

.center{
    text-align: center;
}



/*..........................................................................................< Galerie >...*/

.content-gallery ul{
    display:flex;
    flex-wrap: wrap;
}

.content-gallery a{
    position:relative;
    display:block;
    overflow:hidden;
    /* filter:grayscale(1); */
    transition:filter .2s;
}

.content-gallery a:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:#000;
    opacity:0;
    transition:opacity .2s;
    z-index:1
}

/* .content-gallery a:hover{
    filter:grayscale(0);
} */

.content-gallery a img{
    transition:transform .2s;
}

.content-gallery a:hover img{
    transform: scale(1.1);
}

.content-gallery a:hover:before{
    opacity:.4;
}

.content-gallery a:after{
    content:"";
    position:absolute;
    transform:translate(-50%, -50%);
    top:120%;
    left:50%;

    width:50px;
    height:50px;
    
    background-image:url(../img/muetze.svg);
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;

    z-index:2;

    transition:top .2s;
}

.content-gallery a:hover:after{
    top:50%;
}

.content-gallery.icons ul{
    display:grid;
}


.content-gallery.icons li{
    position:relative;
    aspect-ratio: 1 / 1;
}

.content-gallery.icons li figure{
    max-height:75%;
    max-width:75%;
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:0;
}

.content-gallery.icons.content-gallery--cols-4 ul{
    grid-template-columns: repeat(4, 1fr);
}

.content-gallery.icons.content-gallery--cols-5 ul{
    grid-template-columns: repeat(5, 1fr);
}

/*..........................................................................................< Formular-Elemente >...*/

form button{
    line-height:inherit;
}

button,
input.text{
    appearance: none;
    border:none;
    line-height:1.2rem;
    margin:0;
    padding:0;
    outline:none;
}

input.text{
    width:100%;
    padding:0 .5rem;
    font-size:.8rem;
}

button, .btn {
    display: inline-block;
    background-color: #609722;
    color: #ffffff;
    padding: .3rem 1rem;
    text-decoration: none;
    text-align: center;
}

/*..........................................................................................< Produktübersicht >...*/

#filter{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:.5rem;
}

.filter_item,
.ingredient{
    position:relative;
    background-color:var(--c_fontColor);
    color:#fff;
    cursor:pointer;
    transition:background-color .2s, box-shadow .2s, transform .2s;
    aspect-ratio: 1/1;
    border-radius:var(--border_radius);
    box-shadow: var(--box_shadow);

}

.filter_item:hover{
    background-color: #564e4e;
    box-shadow: var(--box_shadow_hover);
    transform:scale(1.05);
}

.filter_item[data-checked='checked']{
    background-color:var(--c_darkgreen);
}

.filter_item figure img,
.ingredient figure img{
    position:absolute;
    max-width:50%;
    max-height:50%;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

.filter_item span,
.ingredient span{
    position:absolute;
    transform:translateX(-50%);
    font-size:.4rem;
    left:50%;
    bottom:2px;
}









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



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

    .productList{
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .productList{
        grid-template-columns: 1fr;
    }
}

.productList .product{
    position:relative;
    background-color:#fff;
    padding:1rem;
    text-decoration:none;
    color:inherit;
    border-radius:var(--border_radius);
    border:1px solid var(--c_darkgreen);
    box-shadow: var(--box_shadow);
    transition:box-shadow .2s, transform .2s;
}

.productList .product:hover{
    box-shadow: var(--box_shadow_hover);
    transform:scale(1.05);
}



.productList .inside{
    height:100%;
    display:grid;
    grid-template-columns: 2fr 1fr;
}

.productList .product > .inside > div,
.productList .product figure{
    align-self: center;
}

.productList .product img{
    transition:transform .4s;
    transform:rotate(9deg);
}

.productList .product:not(.noShadow) img{
    -webkit-filter: drop-shadow(0 6px 3px rgba(0,0,0,.3));
    filter: drop-shadow(0 6px 3px rgba(0,0,0,.3));
}

.productList .product:hover img{
    transform:rotate(0deg);
}

.productList .product span{
    font-size:.8rem;
    line-height:1em;
    font-weight:var(--f_w_button);
}

.productList .product h3{
    margin:0;
    line-height:1.3;
    padding-right:.5rem;
}



.productList .product.hide,
#choosen.hide,
#notChoosen.hide,
.productList figcaption{
    display:none;
}

/*..........................................................................................< Produktdetail >...*/

#stage .mod_master figcaption,
#stage .content-image figcaption{
    width:50%;
    text-align: center;
}

#detailImage:after{
    content:"";
    display:block;
    height:80%;

    position:absolute;
    bottom:-1px;
    left:0;
    right:0;

    background-image:url(../img/wave_detail_reverse.svg);
    background-repeat:no-repeat;
    background-size:100%;

}

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

.ingredientsIcons{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.ingredient{
    width:3.897rem;
    background-color:var(--c_darkgreen);    
}

.productDetails .details{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:var(--grid__gutter);
}

@media screen and (max-width:768px){
    .productDetails .details{
        grid-template-columns: 1fr;
    }
}

.productDetails .details div{
    align-self: center;
}

.detailsIngredients > .content-text:not(:last-child){
    margin-bottom:3rem;
}




table{
    width:100%;
}

table td,
table th{
    padding:0 .5rem;
}

table tbody tr:not(:last-child){
    border-bottom:1px dotted var(--c_darkgreen);
}



/*..........................................................................................< Schon probiert? >...*/

#triedList .product{
    position:relative;
    max-height:464px;
    height:100%;
    aspect-ratio: 1 / .5;
    overflow:hidden;
}

#triedList .product .inside{
    position:absolute;
    transform:translateX(-50%);
    left:50%;
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:var(--grid__gutter);
    width:80%;
    height:100%;
    max-width:900px;
}

#triedList .product .contentTeaser{
    position:relative;
    height:100%;
    width:100%;
}

#triedList .product .contentTeaser .button{
    position:absolute;
    bottom:1rem;
    left:0;
}

#triedList .product .teaserText{
    position:absolute;
    transform:translateY(-50%);
    top:40%;
}

#triedList .product .content-image{
    position:relative;
    width:100%;
    height:100%;
}

#triedList .product .content-image .image_container img{
    position:absolute;
    transform:translateY(-50%) rotate(9deg);
    top:50%;
    right:0;
    -webkit-filter: drop-shadow(-.5rem 1rem .4rem rgba(0,0,0,8));
    filter: drop-shadow(-.5rem 1rem .4rem rgba(0,0,0,8));
}

#triedList .product .stoerer{
    width:44%;
    aspect-ratio: 1/1;
    transform:rotate(9deg);
    position:absolute;
    top:60%;
    right:-1rem;
}

#triedList .product .stoerer > span{
    position:absolute;
    width:75%;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    text-align: center;
    font-size:1vw;
    font-weight:var(--f_w_button)
}

@media screen and (max-width:900px){
    #triedList .product .inside{
        width:90vw;
    }
    #triedList .product .stoerer > span{
        font-size:.7rem;
    }
}

#triedList ul.slick-dots{
    right:0;
}

/*..........................................................................................< Rezeptidee >...*/

@media screen and (min-width:769px){
    .recipeSlider .slick-track {
        display: flex;
    }
     
    .recipeSlider .slick-track .slick-slide {
        display: flex;
        height: auto;
        align-items: center;
        justify-content: center;
    }
}

.recipeSlider .recipe .recipeContent{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:var(--grid__gutter);
    padding-top:0 !important;
    padding-bottom:0 !important;
}

@media screen and (max-width:768px){
    .recipeSlider .recipe .recipeContent{
        grid-template-columns: 1fr;
    }
}

.recipeText{
    align-self: center;
}

.recipeImage{
    position: relative;
}

.recipeImage p.button a{
    position:absolute;
    bottom:1.5rem;
    right:0;
}

/*..........................................................................................< News >...*/

.news .more {
    margin-top: 1rem;
}
.news a {
    text-decoration: none;
    color: var(--c_darkgreen);
    font-weight: var(--f_w_button);
    transition: color .2s;
}
.news a:hover {
    color: var(--c_red);
}

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

.news .image_container{
    position:relative;
}

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

.newslist .news{
    background-color:var(--c_lightgreen);
    border-radius: var(--border_radius);
    overflow: hidden;
}

.newslist .newsTeaser{
    padding:1rem;
}

/*..........................................................................................< Bildlink >...*/

a.imageLink{
    display:block;
    background-color:var(--c_lightgreen);
    text-decoration:none;
    color:inherit;
    border-radius:var(--border_radius);
    overflow:hidden;
}

.imageLink .content-image{
    width:100%;
    aspect-ratio: 4 / 3;
    overflow:hidden;
}

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

    width:auto;
    height:auto;

    transition:transform .2s;
}

a.imageLink:hover .content-image img{
    transform:translate(-50%, -50%) scale(1.1);
}

.imageLink .text{
    padding:1rem;
    text-align:center;
    font-size:var(--f_s_h3);
    font-weight:var(--f_w_button);
}

/*..........................................................................................< Copyright-Liste >...*/

.mod_image_copyright_list .cr_image{
    display:flex;
    gap:var(--grid__gutter);
    align-items: center;
}

.mod_image_copyright_list .cr_image:nth-child(odd){
    background-color:var(--c_gray);
}

.mod_image_copyright_list .cr_image img{
    width:auto;
}

/*..........................................................................................< Suche >...*/

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

.mod_search .widget-text,
.mod_search fieldset.radio_container{
    margin:0;
}

.mod_search p.header{
    font-size:var(--f_s_small);
}

.search_default:not(:last-child){
    margin-bottom:1rem;
    border-bottom:1px solid var(--c_darkgreen);
    padding-bottom:1rem;
}

.search_default a{
    text-decoration:none;
    color:inherit;
}

.search_default h2{
    transition:color .2s;
}

.search_default a:hover h2,
.search_default a:focus h2{
    color:var(--c_red);
}

.search_default .highlight{
    background-color: var(--c_lightgreen);
}

.search_default p.url{
    font-size:var(--f_s_small);
}

/*..........................................................................................< Akkordeon >...*/
.handorgel__header__button{
    border-color:var(--c_gray);
}

.handorgel__content__inner{
    padding:1rem;
}

.content-accordion button.handorgel__header__button{
    padding:1rem 0 1rem 0;
    line-height:inherit;
    transition:color .2s, padding-left .2s;
}

.content-accordion button.handorgel__header__button:hover,
.content-accordion .handorgel__header--open button.handorgel__header__button,
.content-accordion .handorgel__header--opened button.handorgel__header__button{
    padding-left:1rem;
    background-color:var(--c_lightgreen);
}

.content-accordion h2.handorgel__header{
    position: relative;
}

.content-accordion h2.handorgel__header:after{
    content:"";
    position:absolute;

    right:1rem;
    top:0;

    height:1rem;
    width:1rem;

    border-top:1rem solid var(--c_gray);
    border-left:1rem solid transparent;
    border-right:1rem solid transparent;

    z-index:9;

    transition:top .2s, border-color .2s, transform .2s;
}

.content-accordion h2.handorgel__header:hover:after{
    border-top-color:var(--c_darkgreen);
}

/* .content-accordion h2.handorgel__header--opened:after, */
.content-accordion h2.handorgel__header--opened:after{
    top:-1rem;
    transform:rotate(180deg);
    border-top-color:var(--c_lightgreen) !important;
}