/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {    font-family: 'Asap Condensed';
    src: url('../../fonts/AsapCondensed-Medium.eot');
    src: url('../../fonts/AsapCondensed-Medium.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/AsapCondensed-Medium.woff2') format('woff2'),
        url('../../fonts/AsapCondensed-Medium.woff') format('woff'),
        url('../../fonts/AsapCondensed-Medium.ttf') format('truetype');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'Asap';
	src: url('../../fonts/Asap-Bold.eot');
    src: url('../../fonts/Asap-Bold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Asap-Bold.woff2') format('woff2'),
        url('../../fonts/Asap-Bold.woff') format('woff'),
        url('../../fonts/Asap-Bold.ttf') format('truetype');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-Medium.eot');
    src: url('../../fonts/Asap-Medium.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Asap-Medium.woff2') format('woff2'),
        url('../../fonts/Asap-Medium.woff') format('woff'),
        url('../../fonts/Asap-Medium.ttf') format('truetype');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-Regular.eot');
    src: url('../../fonts/Asap-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Asap-Regular.woff2') format('woff2'),
        url('../../fonts/Asap-Regular.woff') format('woff'),
        url('../../fonts/Asap-Regular.ttf') format('truetype');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-SemiBold.eot');
    src: url('../../fonts/Asap-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Asap-SemiBold.woff2') format('woff2'),
        url('../../fonts/Asap-SemiBold.woff') format('woff'),
        url('../../fonts/Asap-SemiBold.ttf') format('truetype');
    font-weight: 600;    font-style: normal;}

html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Asap'; font-size:17px; font-weight: 400; color: #202020;  width: 100%; font-variant-ligatures: none; background: #fcfcfc;}
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.display{display: none;}
.space{width: 100%; height: 60px; display: inline-block;}
.doublespace{width: 100%; height: 120px; display: inline-block;}
.clear{width: 100%; clear: both;}
p{line-height: 1.5em;}
header, main, footer{position: relative; width: 100%;}

/* Header */
header{border-top: 10px solid #f0bf00;}
header section.white{background: #fff;}
header .logo{width: 100%; height: auto; border-bottom: 5px solid #f0bf00; background: #fff; text-align: center; padding: 10px 0 30px 0;}
header .logo img{width: 90%; height: auto; max-width: 320px; margin: 0 auto;}
header.header-image {    position: relative;    height: 600px;    width: 100%;    display: block;    clear: both; background: none;  margin-bottom: 120px;}
header.header-image::before {    content: "";    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    background: url(../../../upload/header/kiesgrube.jpg) no-repeat;    background-size: cover;    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;    border-bottom: 10px solid #f0bf00;    z-index: 1;}
header.header-image::after {    content: "";    position: absolute;    left: 0;    bottom: -100px;    width: 100%;    height: 200px;    background: linear-gradient(        to right,        #f6dd7e 0 33.333%,        #f8eab0 33.333% 66.666%,        #fbf6e2 66.666% 100%    );    clip-path: polygon(        0 15%,        100% 0,        100% 75%,        0 100%    );    z-index: 0;}
header.header-image > section {    position: relative;    z-index: 2;}
header.header-image > section.time {z-index: 1;}

header .zeiten{ background:rgba(255,255,255,0.80); border: 3px solid #f0bf00; border-radius: 20px; padding: 10px 25px; margin-top: 230px; position: relative; display: inline-block; float: right; z-index: 1;}
header .zeiten .icon{background: url(../../images/icon_time.png) no-repeat; width: 35px; height: 35px; display: block; float: left; margin-right: 20px; margin-top: 12px; position: relative;}
header .zeiten .uhrzeit{font-size: 1.1em; font-weight: 600; float: right; text-align: justify;}
header .zeiten .uhrzeit span{font-size: 1.3em; font-weight: 600;}

.navigation {color: #202020; font-weight: 500; font-size: 1.4em; padding: 10px 30px; display: inline-block; width: 80%; z-index: 1000; background:rgba(255,255,255,0.80); border-radius: 20px; float: right; margin-top: 20px;}
.navigation ul {list-style: none; padding: 0; margin: 0;}
.navigation li {position: relative; margin: 0; float: left; display: inline-block;}
.navigation li a, .navigation li button {padding: 15px 25px; color: #101010; display: inline-block; text-decoration: none; font-size: 1.0em; background: none; border: none; }
.navigation li button::after {content: '\25BC'; margin-left: 8px; font-size: 0.8em;} /* Pfeil */
.navigation li div {display: none; position: absolute; background:rgba(229,229,229,1.00); padding: 10px; top: 100%;  left: 0; min-width: 150px; z-index: 1000;}
.navigation li:hover > div {display: block;}
.mobile_menu_button {display: none;}
.no-scroll {overflow: hidden;} 
.navigation li a:focus, .navigation li button:focus {outline: 3px solid #FFE700;}
.navigation li a.active, .navigation li a:hover, .navigation li button:hover {background: #FFE700;  color: #333;}
 .navigation div.submenu li{clear: both; width: 100% !important;}

/* Main */
main{padding: 0 0 100px 0;}

h1{margin-bottom: 40px; font-size: 1.7em; font-weight: 500;}
h1 span{color: #cc7400;}
h2{margin-bottom: 30px; font-weight: 600; font-size: 1.5em; color: #cc7400;}
h2 span{color: #472912; border-bottom: 2px solid #cc7400;}
h2.center{text-align: center;}
h2.center span{border: none;}
h3{margin-bottom: 20px;}

main p{margin-bottom: 20px;}
main p span{width: 70px; display: block; float: left;  margin-right: 20px; font-weight: 600;}
main .span-big p span{width: 200px; display: block; float: left;  margin-right: 20px; font-weight: 600;}
main a{color: #cc7400; text-decoration: none;}
main a.more-button{border: 1px solid #cc7400; padding: 10px 15px; color: #cc7400; text-decoration: none; margin: 20px 0 20px 0; position: relative; display: inline-block;}
main .trenn-content p, main .green-content p{color: #fff;}
main .trenn-content ul, main .green-content ul{color: #fff; margin: 0 0 15px 15px;}
main hr{margin: 70px 0; width: 100%; height: 5px; border: none; display: block; background: #fff;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 107, 5, 1) 50%, rgba(255, 255, 255, 1) 100%);}

main .main-content{padding-top: 100px; overflow: hidden;}
main .yellow-content{background: #fffbed; padding: 100px 0; margin: -80px 0 0px 0;}
main .yellow-content figure{position: relative; z-index: 3; margin-bottom: 50px;}
main .yellow-content figure img{position: relative; z-index: 3;}
main .yellow-content figure::before{content:""; position: absolute; top: -10px; left: -10px; width: 40px; height: 40px; display: block; background: #f0bf00; z-index: 1;}
main .yellow-content figure::after{content:""; position: absolute; bottom: -10px; right: -10px; width: 70%; height: 70%; display: block; background: #f0bf00; z-index: 1;}

main figure{width: 90%; height: auto;}
main figure.main-image{width: 90%; min-height: 400px; display: block;}

main figure.image-small{width: 90%; height: 125px; display: block; overflow: hidden; margin-bottom: 30px; border: 2px solid #fff; border-radius: 10px; box-shadow: 2px 2px 3px rgba(0,0,0,0.9); position: relative; z-index: 10;}
main figure img, main figure.main-image img, main figure.image-left img, main figure.image-right img, main figure.image-small img{width: 100%; height: auto;}

main ul{list-style: none; margin-left: 0;}
main ul li{margin-bottom: 7px; position: relative; display: inline-block; width: 100%; padding-left: 30px;}
main ul li::before{content:""; position: absolute; background:url(../../images/icon_list.png) no-repeat left center; width: 15px; height: 15px; display: block; margin-right: 10px; left: 0; top: 2px;}

main .annahme{background:url(../../images/annahme_bg.jpg) no-repeat center top; background-size: cover; padding: 100px 0 200px 0;}
main .leistungen-annahme figure{width: 90%; margin: 0 auto; height: auto; display: block; border-bottom: 4px solid #f0bf00; position: relative;}
main .leistungen-annahme .col-33{margin-bottom: 20px;}
main .leistungen-annahme figure::before{content: ""; position: absolute; background: #f0bf00; width: 30%; height: 15px; top: -15px; left: 35%; display: block;}
main .leistungen-annahme .schriftzug{padding: 10px 20px; border-radius: 10px; display: inline-block; margin: 0 auto; background: #44250E; background: linear-gradient(180deg,rgba(68, 37, 14, 1) 0%, rgba(54, 29, 11, 1) 100%); color: #fff; text-align: center; font-size: 1.3em; font-size: 1.2em; width: 70%; margin-left: 15%; font-weight: 700; margin-top: -30px; position: relative; z-index: 2; min-height: 40px;}
main .leistungen-annahme .schriftzug span.small{font-size: 0.8em; clear: both;}

main p a.link-button{display: inline-block; width: auto; padding: 15px 30px; margin-bottom: 50px; background: #cc7400; color: #fff; border-radius: 3px;}
main p a.link-button:hover{background: #f0bf00;}

footer{position: relative;  color: #fff; background: #472a15; background-size: cover; padding: 70px 0 30px 0; border-bottom: 10px solid #f0bf00; margin-top: -150px;}
footer::before{content:""; position: absolute; background:url(../../images/footer-before_erde.png) no-repeat right top; background-size: contain; height: 253px; width: 783px; display: block; top: -160px; right: 0;}
footer h2{color: #fff}
footer .col-33{border-left: 1px solid #fff; padding-left: 20px;}
footer .col-33::before{content:""; position: absolute; top: 0; left: -5px; background: #f0bf00; width: 11px; height: 30px; display: block;}
footer .contact p{width: 100%;margin-bottom: 10px;}
footer .contact p span{width: 70px; display: block; float: left;  margin-right: 20px; font-weight: 600;}
footer .contact p a{color: #fff; text-decoration: none;}
footer .contact p a:hover{color: #fff; font-weight: 600;}
footer nav.footnav{width: 100%; height: auto; display: inline-block;  position: relative; z-index: 10;}
footer nav.footnav ul{width: 100%; height: auto; display: inline-block; list-style: none;}
footer nav.footnav ul li{float: none; text-align: left; margin-bottom: 10px;}
footer nav.footnav ul li a{text-decoration: none; color: #fff; font-weight: 400; }
footer nav.footnav ul li a:hover, footer nav.footnav ul li a.active{color: #fff; font-weight: 600;}



/* MOBIL */
@media (max-width: 1140px) {
	.navigation {font-size: 1.1em;}
}
@media (max-width: 1075px) {
	header.header-image {  height: 400px; }
	header .zeiten{margin-top: 100px;}
.navigation li a, .navigation li button {padding: 15px 15px; color: #101010; display: inline-block; text-decoration: none; font-size: 1.0em; background: none; border: none; }
}
@media (max-width: 990px) {
	.mobil{display: none;}	
	header section.white .col-30{width: 30%; float: left;}
	header section.white .col-70{width: 70%; float: left;}
	
	.mobile_menu_button {display: flex;  background: #cc7400;  color: #fff;  border: none;  padding: 20px; cursor: pointer; align-items: center; position: absolute; top: 20px; right: 20px; height: 35px; border-radius: 5px;}
	.menu-icon {display: flex; flex-direction: column; gap: 5px; margin-right: 10px; width: 40px;    height: 40px; float: left;}
	.menu-icon .bar1, .menu-icon .bar2, .menu-icon .bar3 {    display: block;    position: absolute;    background: #fff;}

.menu-icon .bar1 {    top: 8px;}
.menu-icon .bar2 {    top: 15px; }
.menu-icon .bar3 {    top: 22px; }

.menu-open .menu-icon .bar1 {    transform: rotate(-45deg) translate(-5px, 5px); }
.menu-open .menu-icon .bar2 {    opacity: 0;}
.menu-open .menu-icon .bar3 {    transform: rotate(45deg) translate(-5px, -5px); }
.menu-text {    font-size: 18px;    font-weight: 500;    color:  #fff;	text-transform: uppercase; padding-top: 0px; float: left;}
	
	.menu-icon div {width: 25px;  height: 3px; background:#fff; margin: 4px 0;   transition: 0.4s ease;}
	
	.navigation {display: none;  flex-direction: column;background:rgba(234,234,234,1.00); padding: 10px; margin-top: 70px; z-index: 1000; position: absolute; right: 20px; top: -10px; width: 300px;}
	.navigation.menu-open {display: flex;}
	.navigation ul {display: flex; flex-direction: column; width: 100%;}
	.navigation li { width: 100%;}
	.navigation li div {position: static; display: none; background:rgba(247,247,247,1.00);padding: 5px;width: 100%;}
	.navigation li button {width: 100%; text-align: left;}

	}
@media (max-width: 900px) {
header .zeit .col-30, header .zeit .col-70{flex: 0 0 50%; }
}
@media (max-width: 815px) {
	header .container .col-30, header .container .col-70{flex: 0 0 50%; }

}
@media (max-width: 550px) {
header .zeit .col-30{flex: 0 0 80%; }
header .zeit .col-70{flex: 0 0 20%; }
}
@media (max-width: 515px) {
	header .logo img{max-width: 150px; height: auto; }
	
}
@media (max-width: 450px) {
	header .logo img{max-width: 100px; height: auto; }
	
}