*{font-family: 'Fressnapf', sans-serif; font-size:16px; color:#333;}
body{margin:0; padding:0; background: #eeedeb;}
.container{max-width:940px; margin:auto;}
.floatend{clear:both;}

.head_container {display: grid; grid-template-columns: 121px 1fr 1fr; gap: 30px; align-items: end; position:relative;}
.header_top{background-image:url("/media/bg-header.png"),linear-gradient(180deg,#8daa3c,#60843e); background-color:#8daa3c; padding: 8px 0 10px; background-position: 50% 33px,0 0; background-size: 2500px,auto; background-repeat: no-repeat,repeat; position:relative;}
.header_grey { background: #eeedeb; top: 0; right: 0; left:0; height: 40px; position: absolute; box-shadow:0 1px 5px 1px rgb(0 0 0 / 10%);}
.logo_link img{display:block;}
h1 { text-shadow:0 2px 2px rgb(51 51 51 / 30%);}
h1 a{color: #eeedeb; font-size:44px; line-height:44px; text-decoration:none; transition: all 0.2s ease;}
h1 a:hover{color:#fff;}

.location_grid{display:flex; align-items: center; transition: transform 200ms ease 0s;}
.location_grid:hover .map_icon{transform: translateY(-5px); transition: transform 200ms ease 0s;}
.map_icon{margin-right:10px;}
.location_button{font-weight:700; color: #fff; font-size:16px; line-height:20px; border: 2px solid #fff; border-radius: 4px; padding:9px 15px; text-decoration:none; margin-right: 15px; display: inline-block; transition: all 0.2s ease; height:fit-content;}
.location_button:hover{background:#fff; color:#60843e;}

.mainmenu_wrapper {background: linear-gradient(180deg,#8daa3c,#60843e); box-shadow:0 0 6px 0 rgb(51 51 51 / 49%); min-height:51.5px; position:relative;}
.mainmenu{display:flow-root;}
.menu_toggle{display:none;}
.menuitem {color: #fff; text-decoration: none; font-weight: 700; display: block; float:left; padding: 15px 25px; font-size: 18px; text-shadow: 0 1px 4px rgb(51 51 51 / 30%); border-left: 1px solid #60843e; transition: all 0.2s ease;}
.menuitem.active{text-decoration:underline;}
.menuitem:hover{background:#fff; color:#60843e; cursor:pointer;}
.hassubmenu{display:block; float:left; position:relative;}
.hassubmenu .menuitem{position:relative; padding-right:45px;}

.hassubmenu .menuitem:hover:after{color:#60843e;}
.submenu { display:none; position: absolute; top: 51.5px;  background: #fff;  width: max-content; box-shadow:0 1px 5px 1px rgb(0 0 0 / 10%); left:1px; z-index:99;}
.submenu .menuitem{color: #333; text-shadow:initial; font-weight:400; font-size:16px; display:block; float:initial; border-left: initial;padding:10px 20px;}
.submenu .menuitem:hover{color:#60843e; text-decoration:underline;}
.submenu .menuitem:after{content:initial;}
.hassubmenu:hover .submenu{display:block;}

.banner{overflow:hidden; }
.slider{height:500px; position: relative; clear:both;}
.w-slider-mask{position: relative; display: block; overflow: hidden; z-index: 1; left: 0; right: 0; height: 100%; white-space: nowrap;}
.slide{background-position:50% 50%; background-size:cover; background-repeat:no-repeat; position: relative; display: inline-block; vertical-align: top; width: 100%; height: 100%; white-space: normal; text-align: left;}
.banner .container{padding-top:100px;}
.banner h2{font-family:'Fressnapf Slider', sans-serif; font-size: 62px; line-height:60px; font-weight:400; color: #fff; letter-spacing:1px; margin-block-start: 0; margin-block-end: 0; margin-top: 10px; margin-bottom: 20px;}

.w-slider-nav{position: absolute; z-index: 2; top: auto; right: 0; bottom: 0; left: 0; margin: auto; padding-top: 10px; height: 30px; text-align: center;}
.w-slider-dot {width: 1em; height: 1em; position: relative; display: inline-block; background-color: rgba(255,255,255,.4); cursor: pointer; margin: 0 3px 0.5em; transition: background-color .1s,color .1s; border-radius:100%;}
.w-slider-dot.w-active{background-color: rgba(255,255,255,1);}

.left-arrow {position: absolute; left: 0; top: 0; bottom: 0; width: 80px; z-index: 2; cursor: pointer;}
.right-arrow {position: absolute; right: 0; top: 0; bottom: 0; width: 80px; z-index: 2; cursor: pointer;}


.twice_grid{display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:20px; margin-top:30px;}
.twice_col{background:#fff; box-shadow:0 2px 3px 0 #d3d2cc;}
.col_head{padding:15px; border-bottom: 1px solid #eeedeb}
.col_content{padding:15px;}
.twice_col img{width:100%; margin-bottom:15px;}
.twice_col img.video_button{width:26px; float:left; margin-bottom:0; margin-right:7px;}
.youtube_link{position:relative; display:block;}
.youtube_button{position:absolute; top:20px; background: #e8001e; padding: 7px 15px 7px 7px; border-radius:4px; color:#fff; display:flex; align-items:center;}
h3{color: #60843e; font-size:20px; line-height:28px; margin-block-start: 0; margin-block-end: 0; font-weight:400;}
/*.youtube_button:before{content:'x'; width:20px; height:20px; border-radius:100%; border: 1px solid #fff; position: absolute; left:8px; top:11.5px; text-align:center;}*/
.button_green, button {transition: all 0.3s ease; border-radius: 4px; background: linear-gradient(180deg,#8daa3c,#60843e); color: #fff; padding: 11px 15px 9px; text-decoration: none; margin-top: 15px; display: block; width: fit-content; margin-left: auto; font-weight:400; border:none; cursor:pointer;}
.button_green:hover, button:hover{background: linear-gradient(360deg,#8daa3c,#60843e);}

.three_wrapper{background: #fff; margin-bottom: 20px; box-shadow:0 2px 3px 0 #d3d2cc;}
.three_grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding: 20px;}
.prospekt_img{margin:auto; display:block; margin-bottom:15px; max-width:100%;}
.zeitraum{margin-top:20px;}

.sortiment_wrapper{background: #fff; margin-bottom: 20px; box-shadow:0 2px 3px 0 #d3d2cc;}
.sortiment_inner{padding: 0 15px 20px;}

.standort{background:#fff; margin-top:5px; margin-bottom:15px; box-shadow:0 2px 3px 0 #d3d2cc;}
.standort_inner{padding: 15px; display:grid; grid-template-columns:1fr 1fr; gap:20px;}
/*.map_col{background-position: 50% 50%; background-size:cover; background-repeat:no-repeat; position:relative; transition: all 0.3s ease; height:400px; filter: grayscale(0.7);}
.map_col:hover{filter: grayscale(0.5);}
.map_col:before{content:url(/media/mapmarker.svg); width:40px; position:absolute; top: calc(50% - 60px); left:calc(50% - 20px);}
.map_hint{opacity: 0; position: absolute; top:calc(50% - 9px); left:calc(50% - 129px); font-size: 20px; font-weight:600; z-index:2; background: rgba(255, 255, 255, 0.8); padding:6px 10px;} 
.map_col:hover .map_hint{opacity:1; }*/

.category{width:60px; height: 60px; position: relative; float:left; background-size:75px; background-position:50%; margin:5px;}
.category.cat{background-image:url(/media/cat.svg);}
.category.dog{background-image:url(/media/dog.svg);}
.category.nager{background-image:url(/media/hamster.svg);}
.category.bird{background-image:url(/media/bird.svg);}
.category.aqua{background-image:url(/media/fish.svg);}
.category.teich{background-image:url(/media/pond.svg);}
.category.terra{background-image:url(/media/reptile.svg);}
.cat_name {position: absolute; display: none; margin-top: 70px; padding: 5px 7px; border-radius: 3px; background-color: #60843e; color: #fff; transition: all 0.3s ease; opacity: 0;}
.category:hover .cat_name{display:block; opacity: 1;}

.kachel{background:#fff; box-shadow:0 2px 3px 0 #d3d2cc; margin-top:25px; margin-bottom:10px; }
.kachel_dyn{padding-bottom:20px;}
.content_half{width: calc(50% - 30px);}

.kontakt .form-group label {display: none;}
.kontakt .form-group input{display: block; width: calc(100% - 24px); padding: 8px 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.42857143; color: #333; vertical-align: middle; background-color: #fff;   border: 1px solid #ccc;}
.kontakt .form-group textarea{display: block; width: calc(100% - 24px); padding: 8px 12px; height:38px; margin-bottom: 10px; font-size: 14px; line-height: 1.42857143; color: #333; vertical-align: middle; background-color: #fff;   border: 1px solid #ccc;}

.abschnitt .col_content{padding:0 15px;}

h4{text-transform:uppercase;}

footer {background: #d3d2cc; padding: 20px 0; border-top: 1px solid rgba(51, 51, 51, 0.1);}
.footer_inner {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.foot_col{padding:15px; background:rgba(238,237,235,.3);}
.foot_link{display:block; text-decoration:none; font-size:14px; margin-bottom:4px;}
.foot_col p{font-size:14px;}

.sort_img{margin-top:10px;}

.to_top { width: 40px; height: 40px; position: fixed;  right: 40px;  bottom: 20px; background: #333; border-radius: 3px; z-index: 11;  display: none; transition: all 0.3s ease;}
.to_top:hover{background:#60843e;}

.error_page .kachel{padding:20px 30%; text-align:center;}
.error_page h2{color: #8daa3c; font-size:24px;}

@font-face{font-family:'icomoon';font-display:swap;src:url(/assets/resources/font/iconfont/icomoon.eot?-qk6xo1);src:url(/assets/resources/font/iconfont/icomoon.eot?#iefix-qk6xo1) format("embedded-opentype"),url(/assets/resources/font/iconfont/icomoon.woff?-qk6xo1) format("woff"),url(/assets/resources/font/iconfont/icomoon.ttf?-qk6xo1) format("truetype"),url(/assets/resources/font/iconfont/icomoon.svg?-qk6xo1#icomoon) format("svg");font-weight:400;font-style:normal}

.hassubmenu .menuitem:after,
.left-arrow:before,
.right-arrow:before, 
.to_top:before{font-family:'icomoon';speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.hassubmenu .menuitem:after{content:"\e900"; color: #fff; font-weight:700; font-size:18px; position:absolute;right:20px; top:16px;}
.left-arrow:before{content:"\e901"; font-size:50px; color:#fff; position:absolute; top:calc(50% - 25px); left:15px;}
.right-arrow:before{content:"\e902"; font-size:50px; color:#fff; position:absolute; top:calc(50% - 25px); right:15px;}
.to_top:before{content: "\e903"; color: #fff; font-size: 20px; padding: 10px; position: absolute;}

@media(max-width:1023px){
	.container{max-width:728px;}
	
	h1 a{font-size:28px;}
	.location_button{width:max-content;}
	
	.mainmenu{display:none; position:absolute; top:50px; z-index:999; left:0; right:0; background:#8daa3c;}	
	.menuitem{float:none; width:678px; max-width:678px; margin:auto; z-index:99; }
	.hassubmenu{float:none; }
	.hassubmenu .menuitem{padding:15px 25px;}
	.submenu{position:relative; width:728px; max-width:728px;left:0; margin:auto;top:0; z-index:98;border-left:1px solid #000;}
	.hassubmenu .menuitem.second{width:100%;}
	.hassubmenu .menuitem.second:after{content:initial;}
	.menu_toggle{width:20px; height:20px; display:grid; margin-left:auto; align-content:space-around; padding:15px;}
	.stroke{height:3px; width: auto; background:#fff;}
	
	.prospekt_img{max-height:280px;}
}

@media(max-width:767px){
	.container{width:calc(100% - 40px); max-width:calc(100% - 40px); padding:0 20px;}
	.menuitem{width:calc(100% - 51px);}
	.submenu{width:calc(100% - 1px);}
	.hassubmenu .menuitem.second{width:calc(100% - 51px);}
	
	.twice_grid{grid-template-columns:1fr;}
	.twice_col.col_2 {grid-row-start: 1;}
	.twice_col.col_1 {grid-row-start: 2;}
	.twice_col.col_4 {grid-row-start: 3;}
	.twice_col.col_3 {grid-row-start: 4;}
	.twice_col.col_6 {grid-row-start: 5;}
	.twice_col.col_5 {grid-row-start: 6;}
	.twice_col.col_8 {grid-row-start: 7;}
	.twice_col.col_7 {grid-row-start: 8;}
	
	.three_grid{grid-template-columns:1fr;}
	.footer_inner{grid-template-columns:1fr;}
	
	.header_top{padding-bottom:10px; background-size:cover;}
	.head_container{grid-template-columns: 150px 1fr; padding:0; gap:10px 0;}
	.location_grid{-ms-grid-column: 1; grid-column: span 2; -ms-grid-column-span: 2;}
	
	.slide .container{padding: 100px 60px 0 ;}
	.left-arrow, .right-arrow{width:60px;}
	.left-arrow:before{left:5px;}
	.right-arrow:before{right:5px;}
	
	.standort_inner{grid-template-columns:1fr;}
	
	.content_half{width:calc(100% - 30px);}

	
	h1 a{font-size:44px; }
	
}

@media(max-width:500px){
	h1 a{font-size:32px; line-height:30px;}
	.banner h2{font-size:40px; line-height:40px;}
	
}

@media(max-width:390px){
	.map_icon{height:50px; }
	.location_button{padding:6px 10px; margin-right:10px;}
}

@media(max-width:338px){
	.head_container{display:block;}
	.location_grid{display:grid; gap:5px;}
	
}