@media screen {
    a {
        position: relative;
    }

    a,
    a:link {
        color: var(--link-color);
        border-bottom: 1px solid;
    }

    a:visited {
        color: var(--link-visited-color);
    }

    a:hover, a:active, a:focus {
        color: var(--link-hover-color);
    }

    a:has(img),
    figure a {
        border-bottom: none !important;
    }

    a.nonclick {
        cursor: default;
    }

    /* NAVIGATION STYLES
    ---------------------*/
    a.sprunglink:link, a.sprunglink:visited {
        position: absolute;
        top: -10000px;
        left: -10000px;
    }

    a.sprunglink:hover, a.sprunglink:active, a.sprunglink:focus {
        top: 1rem;
        left: 33px;
        height: 1.5rem;
        background-color: #ddd;
    }

    #nav-section {
        display: none;
        user-select: none;
    }

    p > .externallink { /* selecting a direct child, becoz we dont want this style on external link with link-button css */
        position: relative;
        margin-right: 0.75rem;
    }

    #container p > .externallink::after {
        position: absolute;
        left: auto;
        content: '';
        display: inline-block;
        height: 0.75em;
        width: 0.75em;
        background: url(../images/icons/external-link.svg) top left no-repeat;
        background-size: cover;
        background-size: 75% 75%;
    }

    #container .image_container .externallink::after {
        position: absolute;
    }



}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {

}


/* Tablet-landscape (and larger) for width 960px */
@media only screen and (min-width: 992px) {


}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1200px */
@media only screen and (min-width:1200px) {
}



/* Main top Navigation Desktop
--------------------*/
@media screen {
    .js #mainNavi {
        display: none;
    }

}
/* Main top Navigation ends
--------------------*/



/* Link-Button Query
--------------------*/
@media screen {
    button,
    input.link-button,
    input.submit,
    .submit,
    .back a,
    a.link-button,
    .link-button a {
        cursor: pointer;
        display: inline-block;
        user-select: none;
        background: var(--btn_bg);
        color: var(--btn_color);
        padding: 0.5rem 1.5rem;
        border: 1px solid;
        border-radius: 1.5rem;
        border-color: var(--border_col);
        transition: var(--transition);
        margin-top: 1rem;
        font-style: normal;
        white-space: nowrap;
        bottom: 0;
        position: relative;
        margin-bottom: 0;
        line-height: 1.4;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        text-shadow: none;
    }
    
    .back a {
        background-color: transparent;
        border-color: var(--link-color);
        color: var(--link-color);
    }

    button,
    input.submit {
        font-weight: 800; 
    }

    button:hover,
    input.link-button:hover,
    .submit:hover,
    .back a:hover,
    a.link-button:hover,
    .link-button a:hover {
        background: var(--btn_hover_bg);
        color: var(--btn_hover_color);
        border-color: var(--border_hover_col);
    } 

    .back a {
        /* margin-top: 1.5rem; */
    }

    /* color */
    .button-green {
        --btn_bg: var(--mut-lightgreen);
        --btn_color: #fff;
        --btn_hover_color: #fff;
        --btn_hover_bg: var(--mut-green);
        --border_col: var(--btn_bg);
        --border_hover_col: var(--btn_hover_bg);
    }


    /* button with arrow mutterkuh */
    .back a:before,
    .link-button a:after,
    .link-arrow a:after {
        position: relative;
        content: "";
        display: inline-block;
        width: 1.2rem !important;
        height: 1rem !important;
        margin-left: 0.5rem;
        margin-bottom: -0.1rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../images/icons/arrow-right.svg) !important;
        filter: brightness(0) invert(1);
        align-self: center;       
        transition: var(--transition); 
    }

    .back a:before {
        filter: brightness(0);
    }   

    .back a:hover:before {
        filter: brightness(0) invert(1);
    }

    .back a:before {
        transform: rotate(180deg);
        margin-right: 0.5rem;
        margin-left: 0;
    }

    /* link-arrow */
    .link-arrow a {
        border-bottom: none;
        transition: var(--transition);
    }
    .link-arrow a:after {        
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3566%) hue-rotate(2deg) brightness(87%) contrast(100%);
    }

    .link-arrow a:hover:after {
        position: relative;
        right: -0.25rem;
    }

    .link-arrow a:visited {
        color: inherit;
    }
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .back a,
    a.link-button,
    .link-button a {
        border-radius: 2rem;
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Link-Button ends
--------------------*/



/* Mutterkuh Nav Query
#topNavi, #headerNav, #footerNavi, #footerMoreNavi
--------------------*/
@media screen {

    .mod_customnav a,
    .mod_navigation a {
    }

    .mod_customnav a:before,
    .mod_navigation a:before {
        content: "";
        display: inline-block;
        /* width: 1rem;
        height: 1rem;
        margin-right: 0.25rem;
        margin-bottom: -0.1rem; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .mod_customnav a,
    .mod_navigation a {
        border-radius: 1rem;      
    }

    .mod_customnav a.faq:before,
    .mod_navigation a.faq:before {
        background-image: url(../images/icons/question.svg);
    }

    .mod_customnav a.onlineshop:before,
    .mod_navigation a.onlineshop:before {
        background-image: url(../images/icons/cart.svg);
    }      
    
    /* navigation with bg image */

    .mod_customnav a.Lea_Ben,
    .mod_navigation a.Lea_Ben,    
    .mod_customnav a.BeefNet,
    .mod_customnav a.beefcontrol,
    .mod_navigation a.BeefNet,
    .mod_navigation a.beefcontrol, 
    .mod_customnav a.NaturaBeef,
    .mod_customnav a.NaturaVeal {
        text-indent: -99999px;
        color: transparent !important;
        min-width: 100px;
        display: flex;
        position: relative;
    }

    .mod_customnav a.Lea_Ben:before,
    .mod_navigation a.Lea_Ben:before,
    .mod_customnav a.BeefNet:before,
    .mod_navigation a.BeefNet:before,
    .mod_customnav a.beefcontrol:before,
    .mod_navigation a.beefcontrol:before,
    .mod_customnav a.NaturaBeef:before,
    .mod_customnav a.NaturaVeal:before {
        background-size: contain;
        text-indent: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: calc(100% - 1rem);
        height: calc(100% - 1.2rem);
    }    

    .mod_customnav a.BeefNet:before,
    .mod_navigation a.BeefNet:before {
        background-image: url(../images/logo/beefnet.svg);
    }

    .mod_customnav a.beefcontrol:before,
    .mod_navigation a.beefcontrol:before {
        background-image: url(../images/logo/beefcontrol.svg);
    }    

    .mod_customnav a.NaturaBeef:before,
    .mod_navigation a.NaturaBeef:before {
         background-image: url(../images/logo/natura-beef-gross.svg);
     }
    
    .mod_customnav a.NaturaVeal:before,
      .mod_navigation a.NaturaVeal:before {
           background-image: url(../images/logo/natura-veal-gross.svg);
       }
      

    body.de .mod_customnav a.Lea_Ben:before,
    body.de .mod_navigation a.Lea_Ben:before {
        background-image: url(../images/logo/Lea_und_Ben_de.svg);
    }

    body.en .mod_customnav a.Lea_Ben:before,
    body.en .mod_navigation a.Lea_Ben:before {
        background-image: url(../images/logo/Lea_und_Ben_en.svg);
    }
    body.fr .mod_customnav a.Lea_Ben:before,
    body.fr .mod_navigation a.Lea_Ben:before {
        background-image: url(../images/logo/Lea_und_Ben_fr.svg);
    }
    body.it .mod_customnav a.Lea_Ben:before,
    body.it .mod_navigation a.Lea_Ben:before {
        background-image: url(../images/logo/Lea_und_Ben_it.svg);
    }            

    .mod_customnav a.menu:before,
    .mod_customnav a.Marktpreise:before,
    .mod_navigation a.Marktpreise:before {
        display: none;
    }

}

/* Mutterkur Nav ends
--------------------*/




/* labelNav Query
--------------------*/
@media screen {
    #labelNav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        row-gap: 3rem;
        text-align: center;     
        box-sizing: border-box;   
    }
    
    #labelNav ul li {
        width: calc(50% - 0.5rem);
        margin: 0 auto;
    }

    #labelNav a {
        display: inline-block;
        transition: var(--transition);
        font-size: 90%;
    }

    #labelNav .hasIcon .link-txt {
        display: none;
    }

    #labelNav a:before {
        display: none;
    }

    #labelNav a:not(.hasIcon) {
        background-color: var(--mut-red);
        color: #fff;
        padding: 0.5rem 1rem;
        border-radius: 1.5rem;
    }

    #labelNav a:not(.hasIcon):hover {
        background-color: var(--mut-darkgrey);
    } 

    #labelNav a.hasIcon:hover  {
        transform: scale(1.1)
    }    

    #labelNav .link-txt:after {
        content: "";
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 0.25rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../images/icons/arrow-right.svg);
        filter: brightness(0) invert(1);
    }
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    #labelNav ul {
        gap: 1rem;
        row-gap: 3rem;
    }

    #labelNav ul li {
        margin: 1rem auto 0;
        width: 25%;
    }

    #labelNav a:not(.hasIcon) {
        padding: 0.5rem 1.5rem;
        border-radius: 2rem;
        font-size: 100%;
    }    
    #labelNav .link-txt:after {
        width: 1.2rem;
        height: 1rem;
        margin-left: 0.5rem;
        margin-bottom: -0.1rem;
    }    
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* labelNav ends
--------------------*/



/* FAQ Link Zu den Fragen + News List Veranstaltung
   Media Query
--------------------*/
@media screen {
    .listNavi {
        width: 100%;
    }

    .listNavi li:before {
        display: none;
    }

    .listNavi li {
        border-top: 1px solid;
        padding: 0.75rem 0 !important;
        margin: 0;
        font-weight: 500;
    }

    .mod_eventlist .listNavi li {
        font-weight: 400;
    }

    .listNavi li:last-child {
        border-bottom: 1px solid;
    }

    .listNavi li a {
        display: block;
        margin-top: 0.25rem;
        margin-left: auto;
        font-weight: 400;
        font-size: 92%;
        border: 2px solid var(--mut-red);
        padding: 0.35rem 1.5rem;
        border-radius: 1.5rem;
        color: var(--mut-darkgrey);
        width: fit-content;
        transition: var(--transition);
    }

    .listNavi li a:after {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-left: 0.5rem;
        margin-bottom: -0.1rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../images/icons/arrow-right.svg);
        /* https://cssfilterconverter.com/ */
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3566%) hue-rotate(2deg) brightness(87%) contrast(100%);
    }


    .listNavi li a:hover {
        color: #fff;
        transition: var(--transition);
        background-color: var(--mut-red);
    }

    .listNavi li a:hover:after {
        filter: brightness(0) invert(1)
    }

    .listNavi li + h2 {
        margin-top: 1rem;
    }

    /* when inside artbg */
    .artbg-red  {}
    .artbg-red .listNavi li a {
        color: #fff;
    }

    .artbg-red .listNavi li {
        border-top: 1px solid;
    }
    .artbg-red .listNavi li a {
        border-color: inherit
    }
    .artbg-red .listNavi li a:hover {
        color: var(--mut-red);
        background-color: #fff;
    }
    .artbg-red .listNavi li a:after {
        filter: brightness(0) invert(1)
    }
    .artbg-red .listNavi li a:hover:after {
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3566%) hue-rotate(2deg) brightness(87%) contrast(100%);
    }


}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .listNavi li {
        display: flex;
        align-items: center;
        column-gap: 1rem;
    }    

    .listNavi li a {
        display: inline-block;
        align-self: flex-start;
        min-width:  fit-content;
        max-width: 50%;
        padding: 0.5rem 1.25rem;
    }
    .listNavi li + h2 {
        margin-top: 1.5rem;
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* FAQ Link Media ends
--------------------*/




/* Weiterführende List Links Query
--------------------*/
@media screen {
    .linklist ul li {
        display: flex;
        margin-bottom: 0.75rem;
    }

    .linklist a {
        position: relative;
        border-bottom: 0;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-position: under;
    }
    .linklist a:hover {
        text-decoration-thickness: 2px;
    }

    .linklist ul li:before {
        content: "" !important;
        display: inline-block;
        width: 1rem;
        height: 1.5rem;
        margin-right: 0.5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../images/icons/arrow-right.svg);
        filter: saturate(0) invert(1)
    }
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .linklist ul li:before {
        content: "";
        display: inline-block;
        width: 1.2rem;
        height: 1.8rem;
        margin-right: 1rem;
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Weiterführende Links ends
--------------------*/