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

main .mod_article:not(:has(#map)) > .insideArticle,
footer .inside,
#stage .cb_frame{
    width:100%;
    max-width:calc(1200px + 2rem);
    margin:0 auto;
    padding:0 2rem;
}



#stage .cb_frame{
    padding:0;
}

#wrapper{
    min-height:calc(100vh - 3rem);
}


#container{
    margin-top:3rem;
    min-height:calc(100vh - 6rem);
}




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

header{
    background-color:var(--c_red);
    color:#fff;
    height:3rem;
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1;
}

#homeLink{
    position:absolute;
    transform:translateX(-50%);
    left:50%;
    top:1rem;
}

header .inside > a,
header .inside > .mod_customnav{
    position:absolute;
    transform:translateY(-50%);
    top:50%;
}

header .inside > #nav{
    left:1rem;
    display:flex;
    flex-wrap:nowrap;
    align-items: center;
    gap:.85rem;

    text-transform:uppercase;
    font-weight:400;
}

header .inside > .mod_customnav{
    right:1rem;
}

header .mod_customnav ul{
    display:flex;
    gap:.85rem;
    margin-bottom:0;
}

header .mod_customnav li a,
header .mod_customnav li strong{
    font-size:0;
    display:block;
    height:1.5rem;
    aspect-ratio:1/1;
    background-color:#fff;

    mask-repeat: no-repeat;
    mask-size:contain;
    mask-position: center;
}

header .mod_customnav li.contact a,
header .mod_customnav li.contact strong{
    mask-image: url(../img/icon_kontakt.svg);
}

header .mod_customnav li.login a,
header .mod_customnav li.login strong{
    mask-image: url(../img/icon_login.svg);
}


/*-------------------------------------------------------------------< MMenü >---*/

.mm-menu {
    --mm-translate-vertical: 3rem !important;
}

.mm-menu--position-bottom.mm-menu--opened,
.mm-menu--position-left-front.mm-menu--opened,
.mm-menu--position-right-front.mm-menu--opened,
.mm-menu--position-top.mm-menu--opened {
    -webkit-transform: translate3d(0,3rem,0);
    transform: translate3d(0,3rem,0) !important;
}

.mm-menu--theme-dark {
    --mm-color-background: var(--c_red);
    /* --mm-color-border: rgb(0, 0, 0, 0.4); */
    --mm-color-border: transparent;
    --mm-color-icon: rgb(255, 255, 255, 0.4);
    --mm-color-text: rgb(255, 255, 255, 1);
    --mm-color-text-dimmed: rgb(255, 255, 255, 0.4);
    --mm-color-background-highlight: rgb(255, 255, 255, 0.08);
    --mm-color-background-emphasis: rgb(0, 0, 0, 0.1);
    --mm-color-focusring: #06c
}

.mm-wrapper__blocker{
    background:transparent !important;
}

.mm-listitem__text{
    padding-left:1rem;
}

.mm-searchfield__input{
    padding:0 1rem;
}

.mm-listitem > strong,
.mm-listitem--selected > strong{
    padding: calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 1rem;
}

.mm-listitem.active > a,
.mm-listitem.trail > a,
.mm-listitem > span{
    font-weight:var(--fw_bold);
}

.mm-navbar span{
    font-weight:var(--fw_bold);
    color:#fff;
}

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

#stage{
    position:relative;
    top:3rem;
}

#stageSlider{
    height:calc( 100vh - 3rem );
    overflow:hidden;
}

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

#stageSlider .slide .image_container{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}

#stageSlider .slideContent {
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    color:#fff;
    text-align:center;
}

#stage h1{
    font-weight:normal;
}

.slick-dots{
    position:absolute;
    transform:translateX(-50%);
    bottom:1rem;
    left:50%;
    display:flex;
    gap:.75rem;
}

.slick-dots button{
    font-size:0;
    width:.75rem;
    aspect-ratio: 1/1;
    background:transparent;
    border-radius:50%;
    border:1px solid #fff;
    padding:0;
    height:inherit;
}

.slick-dots li.slick-active button{
    background-color:#fff;
}

/*-------------------------------------------------------------------< Kontaktbox >---*/

.cb_frame{
    position:relative;
}

.contactBox{
    padding:4rem 2rem 2rem;
    text-align:center;
    box-shadow:0 3px 6px rbga(0,0,0,.16);

    background: #8F1003;
    background: linear-gradient(-90deg,rgba(143, 16, 3, 1) 0%, rgba(182, 5, 15, 1) 50%, rgba(114, 3, 10, 1) 100%);
    color:#fff;
}

.contactBox .textUp{
    position:relative;
    margin-bottom:2rem;
    padding-bottom:2rem;
}

.contactBox .textUp:after{
    content:"";
    display:block;
    position:absolute;
    width:33.333%;
    height:1px;
    background-color:#fff;
    transform:translateX(-50%);
    bottom:0;
    left:50%;
}

.contactBox:before{
    content:"";
    display:block;
    position:absolute;
    height:8rem;
    aspect-ratio: 1/1;
    transform:translate(-50%, -50%);
    top:0;
    left:50%;
    background-image:url(../img/Schwein.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}

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

    .contactBox{
        position:absolute;
        transform:translateY(50%);
        bottom:0;
        right:0;
    }

    body:has(.contactBox) main .mod_article:first-child > .insideArticle > *{
        padding-right:35%;
    }

    body:has(.contactBox) main .mod_article:first-child{
        pointer-events:none;
    }
}



/*-------------------------------------------------------------------< Telefon, Mail >---*/

.ce_hyperlink.mail:before,
.ce_hyperlink.telefon:before{
    content:"";
    display:inline-block;
    height:1em;
    aspect-ratio: 1/1;
    background-color:#fff;
    margin-right:.2rem;

    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:bottom;
    vertical-align: baseline;
}

.ce_hyperlink.mail:before{
    mask-image:url(../img/icons/mail.svg);
}

.ce_hyperlink.telefon:before{
    mask-image:url(../img/icons/telefon.svg);
}

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

footer{
    position:relative;
    height:3rem;
    background-color:#fff;
    box-shadow:0 3px 10px 0px rgba(0,0,0,.5);
}

footer .mod_customnav ul{
    display:flex;
    justify-content: center;
    gap:1rem;
    margin:0;
}

footer .mod_customnav a,
footer .mod_customnav strong{
    font-weight:500;
    text-transform: uppercase;
}

#footermenu{
    padding-top:1rem;
}

/*-------------------------------------------------------------------< Google Maps >---*/

#map{
    width:100% !important;
    height:60vh !important;
    max-height:30rem;
    padding-bottom:0 !important;

    background-color:var(--c_grau);
    position:relative;
}

#map .message{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    text-align: center;
}

#map .message a.btn{
    height:inherit !important;
}

.infoblase .firma{
    font-weight:var(--fw_bold);
}

.infoblase .adress{
    margin:.5rem 0;
}

.infoblase .person{
    margin-top:.5rem;
}

.infoblase > a{
    margin-top:.7rem;
    height:inherit !important;
}

/*-------------------------------------------------------------------< Youtube >---*/

.ce_youtube .video_container{
    width:100%;
    aspect-ratio: 1/.5625;
    border-radius: var(--br);
    overflow: hidden;
}

.ce_youtube iframe{
    width:100%;
    height:100%;
}

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

#wrapper > header + #container > main > .inside .mod_article:first-child{
    padding-top:13rem;
}

main .mod_article{
    overflow:hidden;
}

main > .inside > .mod_article:not(:has(#map)){
    padding:5rem 0;
}

main > .inside > .mod_article.bottom{ padding-bottom:8rem; }

main > .inside > .mod_article.top{ padding-top:8rem; }

.mod_article.erzeuger{
    background-image:url(../img/bg_erzeuger.svg);
    background-color:var(--c_beige);
    background-blend-mode: soft-light;
    background-size:8rem;
}

.mod_article.handel{
    background-image:url(../img/bg_handel.svg);
    background-color:var(--c_beige);
    background-blend-mode: soft-light;
    background-size:8rem;
}

.mod_article.gastronomie{
    background-image:url(../img/bg_gastro.svg);
    background-color:var(--c_beige);
    background-blend-mode: soft-light;
    background-size:8rem;
}

.mod_article.beige{ background-color:var(--c_beige);}
.mod_article.grau{ background-color:var(--c_grau);}

main .mod_article{
    position:relative;
}

main .mod_article.top:after,
main .mod_article.bottom:after,
main .mod_article.left:after,
main .mod_article.right:after{
    content:"";
    display:block;
    position:absolute;
    aspect-ratio: 1/.646;

    background-image:url(../img/Kleeblatt.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index:0;
}

main .mod_article.bottom:after{
    width:10rem;
    transform:translateX(-50%);
    bottom:-1rem;
    left:50%;
}

main .mod_article.top:after{
    width:10rem;
    transform:translateX(-50%) rotate(180deg);
    top:-1rem;
    left:50%;
}

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

    main .mod_article.left:after{
        width:10rem;
        transform:translateY(-50%) rotate(180deg);
        top:50%;
        left:-5rem;
    }

        main .mod_article.right:after{
        width:10rem;
        transform:translateY(-50%);
        top:50%;
        right:-5rem;
    }

}



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

input.text,
select,
.detail_link > a,
.back > a,
button,
.more > a,
.grouplist a,
textarea,
.download-element > a,
.ce_cookiebarOpener > a,
.infoblase > a,
a.btn{
    display:inline-block;
    padding:.3rem 1.5rem;
    height:2rem;
    background-color:#fff;
    border:1px solid #000;
    border-radius:var(--br);
    cursor:pointer;
    text-transform: uppercase;
    font-weight:400;
}

button,
.detail_link > a,
.back > a,
.more > a,
.grouplist a,
.download-element > a,
.ce_cookiebarOpener > a,
.infoblase > a,
a.btn{
    transition:color .2s, background-color .2s;
}

button:is(:hover, :focus),
.detail_link > a:is(:hover, :focus),
.back > a:is(:hover, :focus),
.more > a:is(:hover, :focus),
.grouplist a:is(:hover, :focus),
.download-element > a:is(:hover, :focus),
.ce_cookiebarOpener > a:is(:hover, :focus),
.infoblase > a:is(:hover, :focus),
a.btn:is(:hover, :focus){
    background-color:var(--c_red);
    color:#fff;
}

.download-element > a{
    text-transform:none;
}

.formbody:not(:has(>fieldset)),
.formbody:has(>fieldset) > fieldset{
    background-color:var(--c_grau);
    padding:1rem;
    border-radius: var(--br);
}

.formbody .widget{
    position:relative;
}

.formbody .widget label{
    font-size:var(--fs_smaller);
    padding:0 .3rem;
}

.formbody .widget:not(:last-child),
.formbody > fieldset:not(:last-child){
    margin-bottom:1rem;
}

input.text, select, textarea{
    padding:.3rem;
    width:100%;
    text-transform: none;
}

textarea{
    min-height:5rem;
    resize: vertical;
}

.widget-radio fieldset span,
.widget-checkbox fieldset span{
    display:block;
}

.widget-radio fieldset span label,
.widget-checkbox fieldset label{
    font-size:inherit !important;
}

.formbody > fieldset > legend{
    font-weight:var(--fw_bold);
    padding:0 .5rem;
    background-color:#fff;
    border-radius: var(--br);
}

/*-------------------------------------------------------------------< News >---*/

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

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

.news_item{
    border-radius: var(--br);
    overflow:hidden;
    background-color:#fff;
}

.news_teaser{
    padding:2rem;
    text-align:center;
    display:flex;
    flex-direction: column;
    gap:var(--grid__gutter);
}

/*-------------------------------------------------------------------< Diverses >---*/

main .ce_text:last-child:after{
    content:"";
    display:block;
    clear:both;
}

p:not(:last-child),
ol:not(:last-child),
ul:not(:last-child),
.ce_list:not(:last-child),
table,
.ce_columns > div:not(:last-child){
	margin-bottom:1rem;
}

main .insideArticle > .ce_text:not(:last-child),
main .mod_article > .insideArticle > .row:not(:last-child),
main .insideArticle > .ce_youtube:not(:last-child),
main .insideArticle > .ce_download:not(:last-child),
main .insideArticle > .ce_code:not(:last-child),
main .insideArticle > div:not(:last-child){
	margin-bottom:1.5rem;
}

main .insideArticle > .ce_headline:not(:first-child){
    margin-top:4rem;
}

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

main .ce_text .image_container{
    margin-bottom:var(--grid__gutter);
}

@media screen and (min-width:621px){
    main .image_container.float_right{
        float:right;
        margin:0 0 var(--grid__gutter) var(--grid__gutter);
    }
}

table td{
    padding:.5rem;
}

table tr:nth-child(even) td{
    background-color:var(--c_grau);
}

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

table td:first-child{
    border-radius:var(--br) 0 0 var(--br);
}

table td:last-child{
    border-radius:0 var(--br) var(--br) 0;
}

#cboxTitle{
    display: none !important;
}

.hljs{
    padding:1rem;
    border-radius:var(--br);
    background-color:var(--c_grau);
}

.download-element > a:before{
    content:"";
    width:1.5rem;
    aspect-ratio: 1/1;
    vertical-align: top;
    margin-right:.5rem;
    display:inline-block;
    background-image: url(../img/icons/icon-download.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}

span.size{
    font-size:.8rem;
    margin-left:1rem;
}

/*-------------------------------------------------------------------< Glossar >---*/

.grouplist{
    background-color:var(--c_grau);
    border-radius:var(--br);
    padding:1rem;
    margin-bottom:2rem;
}

.grouplist ul{
    list-style-type: none;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.glossary .group{
    position:relative;
    background-color:var(--c_grau);
    border-radius:var(--br);
    padding:1rem 1rem 1rem 6rem;

}

.glossary .group:not(:last-child){
    margin-bottom:1rem;
}

.glossary .group .letter{
    color:#fff;
    font-weight:900;
    font-size:4.5rem;

    position:absolute;
    left:1rem;
    top:0;
    z-index:1;
}

.glossary .group .item{
    position:relative;
    z-index:2;
}

.glossary .group .item:not(:last-child){
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:5px dotted #fff;

}

.glossary .item .glossaryHeadline{
    font-weight:600;
    margin-bottom:.5rem;
}

.glossary .item .more{
    margin-top:1rem;
}

/*-------------------------------------------------------------------< Partner >---*/

.partner-navigation ul{
    list-style-type: none;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--grid__gutter);
}

.partner-navigation li{
    padding:2rem;
    text-align:center;
    background-color:var(--c_grau);
    border-radius: var(--br);

    display:flex;
    flex-direction: column;
    gap:2rem;
    justify-content: space-between;
}

#confirm-googlemaps{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    max-width:50vw;
    text-align:center;
}

/*-------------------------------------------------------------------< MM Listen >---*/

.gridlist > .layout_full{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--grid__gutter);
}

@media screen and (max-width:600px){
    .gridlist > .layout_full{
        grid-template-columns: 1fr;
    }
}

.gridlist .item{
    background-color:var(--c_grau);
    padding:1rem;
    border-radius:var(--br);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    gap:var(--grid__gutter);
}

.gridlist .item .top .field:not(.firma){
    font-size:var(--fs_smaller);
}

.gridlist .bottom{
    display:flex;
    justify-content: space-between;
}

.gridlist .bottom > *:only-child{
    margin-left:auto;
}

.ce_metamodels_frontendfilter .mm_select label{
    display:block;
}

.gridlist .firma,
.gridlist .ort,
.gridlist .ansprechpartner{
    margin-bottom:1rem;
}

.gridlist .firma{
    font-weight:var(--fw_bold);
    font-size:1rem;
}

.gridlist .ansprechpartner .label{
    font-weight:400;
}

.gridlist :where(.fax, .telefon, .email, .web) > div:before,
.infoblase :where(.fax, .telefon, .email, .web) > div:before,
#mm_detail div :where(.fax, .telefon, .email, .web):before{
    content:"";
    display:inline-block;
    width:var(--fs_smaller);
    aspect-ratio: 1/1;
    margin-right:.3rem;
    vertical-align: middle;

    mask-repeat:no-repeat;
    mask-size:contain;
    mask-position:center;

    background-color:#000;

}

.fax > div:before, #mm_detail .fax:before{ mask-image:url(../img/icons/fax.svg); }
.telefon > div:before, #mm_detail .telefon:before{ mask-image:url(../img/icons/telefon.svg); }
.email > div:before, #mm_detail .email:before{ mask-image:url(../img/icons/mail.svg); }
.web > div:before, #mm_detail .web:before{ mask-image:url(../img/icons/web.svg); }


.gridlist .detail_link a{
    display:inline-block;
    
    border:1px solid #000;
}

.gridlist .tags li{
    font-size:0;
    display:inline-block;
    height:100%;
}

.gridlist .tags li:before,
#mm_detail .tags li:before{
    content:"";
    display:block;
    height:100%;
    min-height:2rem;
    aspect-ratio: 1/1;

    background-color:#000;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.schwein:before{ mask-image:url(../img/icons/schwein.svg); }
.huhn:before{ mask-image:url(../img/icons/huhn.svg); }
.rind:before{ mask-image:url(../img/icons/rind.svg); }



.gridlist .plz{
    float:left;
    margin-right:.5rem;
}

.gridlist .ort:after{
    content:"";
    display:block;
    clear:both;
}

.back{
    margin-top:3rem;
    background-color:var(--c_grau);
    border-radius:var(--br);
    padding:1rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width:860px){
    .back{
        flex-direction: column;
        align-items:flex-end;
    }

    .back .mod_quicknav .formbody{
        padding-right:0 !important;
    }
}

@media screen and (max-width:500px){
    .back{
        flex-direction: column;
        align-items:flex-start;
        gap:1rem;
    }

    .back .nav{
        flex-direction: column;
        align-items:flex-start;
        gap:0;
    }

    .back .mod_quicknav .formbody{
        padding:0 !important;
    }
}

.back :where(.nav, .mod_quicknav .formbody){
    display:flex;
    align-items: center;
    gap:1rem;
}

.ce_metamodels_frontendfilter{
    margin-top:0;
    margin-bottom:var(--grid__gutter);
}

.ce_metamodels_frontendfilter .mm_select label{
    font-weight:var(--fw_bold);
}

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

.back .formbody .widget{
    margin-bottom:0;
}

/*-------------------------------------------------------------------< MM Details >---*/

#mm_detail div:where(.contact, .address){
    text-align: center;
}

#mm_detail div :where(.ansprechpartner, .contact){
    margin-top:1rem;
}

#mm_detail .tags{
    display:flex;
    gap:var(--grid__gutter);
    justify-content: center;
    margin:2rem 0;
}

#mm_detail .tags li{
    width:100px;
    font-size:0;
    color:transparent;
}

#mm_detail .file{
    list-style-type: none;
    gap:.5rem;
    display:flex;
    flex-wrap:wrap;
    margin:0 0 var(--grid__gutter) 0;
}

@media screen and (min-width:768px){
    #mm_detail .file{
        list-style-type: none;
        display:grid;
        grid-template-columns: 1fr 1fr;
        float:right;
        margin:0 0 var(--grid__gutter) var(--grid__gutter);
    }
}

#mm_detail .description:after{
    content:"";
    display:block;
    clear:both;
}