@charset "UTF-8";
/* CSS Document */

body {
    background: rgb(195,193,193);
    background: linear-gradient(90deg, rgba(195,193,193,1) 0%, rgba(229,229,230,1) 65%, rgba(150,150,149,1) 100%);
    margin:0;
    padding:0;
    font-family: "Playfair", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"width" 100;
	
}

h1, h2, h3, h4 {
        font-family: "Great Vibes", cursive;
        font-weight: 400;
        font-style: normal;
        color:#3d3d37;
}

p {
    color:#78786e;
    font-size:18px;
    line-height:1.5;

    
}

a {
    color:#fff;
    text-decoration:none;
}

.container-fluid {
    overflow:hidden;
}

.footer a {
    color:#78786e;
}


.kopfbereich {
    height:30px;
    background-color:#e30613;
}

.kopfkontakt li {
    list-style-type:none;
    float:left;
    margin-left:25px;
    color:#fff;
    font-size:22px;
}

.logo {
    position: relative;
    z-index: 99;
}

.hero {
    width:100%;
    background-size:cover;
    background-position:bottom;
}

.teaser {
    height:480px;
    background: rgb(227,227,227);
    background: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(242,242,242,1) 75%, rgba(221,221,221,1) 100%);
    padding:50px;
    padding-top:150px;
    position:relative;
}

.teasertxt {
    width:66%;
}

.teasertxt p {
    text-align:left;
}

.teaserimg {
    position:absolute;
    right:0;
    top:0;
}

.teaserimg img {
    height:480px;
}

.counter {
    height: 250px;
    background-size: cover;
    background-repeat:no-repeat;
    padding-top:30px;
}

.counter h3 {
    color:#fff;
    font-family: "Playfair", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    text-align:center;
    font-size:6rem;
    text-shadow: 2px 2px 8px #000;
    line-height: 8rem;
}

.counter h4 {
    color:#fff;
    font-family: "Playfair", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    text-align:center;
    font-size:2rem;
    line-height:0;
    text-shadow: 2px 2px 8px #000;
    text-transform:uppercase;
}

.lieferanten {
    margin-top: 50px;
}

.lieferanten h1 {
    text-align:center;
}

.lieferanten p {
    text-align:center;
}

.lieferantenlogo {
    width: 100%;
    max-width:250px;
    height:250px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    filter: grayscale(100);
    padding:50px;
}

.lieferantenlogo:hover {
    filter: grayscale(0);
}

.imagebild {
    height:300px;
    width:100%;
    background-size:cover;  
	background-position:center;
}

#map {
    height: 500px;
    width: 100%;
}

.oeffnungszeiten h1, p {
    text-align:center;
}

.oeffnungszeiten p {
    line-height:1.2;
}

.footer h1 {
    font-family: "Playfair", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    font-size:2rem;
    text-transform:uppercase;
    text-align:center;
}

.footer p {
    line-height:1.2;
}

.logo_footer {
    width:100%;
    height:150px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}








/* RESPONSIVE Anpassungen */

/* X-Small */
@media screen and (max-width: 576px) {
}

/* Small */
@media screen and (max-width: 768px) {
    .teasertxt {
        width:50%;
    }

    li {
        float:unset !important;
        text-align:right;
    }

    .teaserimg {
        right:-55px;
    }

}

/* Medium */
@media screen and (max-width: 992px) {


}

/* Large */
@media screen and (max-width: 1200px) {
    .teasertxt {
        width:50%;
    }

    .logo_footer {
        background-position: bottom;
        background-repeat: no-repeat;
    }

}

/* X-Large */
@media screen and (max-width: 1400px) {
    

}

/* XX-Large */
@media screen and (min-width: 1200px) {
    .counter h3 {
        font-size:7rem;
    }

}