/*
Style: DPHstyle || dphWEB
Author: designstudioPH
Author URI: https://designstudio-ph.de
Description: Master-Template
Version: 1.0
*/

/* Import */
@import url("basic.css") screen;



/* Sonderfarben */
input, textarea, select{border:1px solid #8C7A6E; background-color:#fff;}


/* ######### FONTS ##################################################################################################################  */
/* fjalla-one-regular - latin */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fjalla-one-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fjalla One'), local('FjallaOne-Regular'),
       url('../fonts/fjalla-one-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/fjalla-one-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/fjalla-one-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/fjalla-one-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/fjalla-one-v5-latin-regular.svg#FjallaOne') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}


/* HTML Background-Image */


/* Standard HTML */
body {font-family: 'Source Sans Pro', sans-serif; font-size:1.2rem; color:#201E1D; background-color:#E7E6E6}
a{text-decoration: none; color:#201E1D}
a:hover{text-decoration:underline;}
h1{margin-bottom:10px; font-family: 'Fjalla One', sans-serif; text-transform: uppercase; font-size:2.0rem;}
h2, .phonenr{margin-bottom:8px; font-family:'Fjalla One', sans-serif; text-transform: uppercase; font-size:1.5rem;}
h3{margin-bottom:8px; padding-bottom:8px; font-family:'Fjalla One', sans-serif; text-transform: uppercase; font-size:1.2rem; border-bottom:1px solid #484848}
p{margin-bottom:20px;}
strong, b{font-weight:bold;}
figure{min-height:100px;}
em{font-style:italic;}
small{font-size:0.8rem;}

.aligncenter{text-align:center; }

article ul, aside ul{list-style-type: circle; margin-left:20px;}


/* Header */
header{position:fixed; z-index:10; width:100%; top:0 !important; height:110px; background-color:#fff}


/* Logo */
.logo{float:left; margin:10px 0 0 1%; padding:0;}
.logo .hauptlogo img{width:350px; height:auto;}
.logo .mobilelogo{display:none}


.xxlimg {
	position: relative;
	width:100%;
	height:100%; 
	background-image: url(../img/volk-hero-2020.jpg);
	background-repeat:no-repeat;
	background-position:top center;
    background-size: cover;
}

/* Navi */
nav{float:right; margin:30px 2% 0 0;}
nav ul{display:table; width:100%;}
nav li{display:table-cell;}
nav li a{display:block; padding:10px 0px 10px 0; text-align: center; text-decoration: none; text-transform: uppercase; text-align:center; margin-left:20px;}
nav li a:hover, nav li#aktiv a{text-decoration: none; border-bottom:2px solid #201E1D}
nav form{display:none;}


/* Content-Wrapper */
.wrapperhome{position:absolute; bottom:4%; margin-top:-130px; left:0; width:100%; text-align:center;}
.wrapperhome h1{font-size:4.0rem; text-shadow: 0px 0px 20px #000; color:#fff}

.top{padding-top:110px}


/* Aside */
aside img{border:2px solid #ccc;}


/* Bildquelle */
.credit{display:block; text-align:right; font-size:10px; color:#666;}


/* Buttons */
a.button, a.button2{width:180px; border-radius:3px; display:inline-block; padding:10px 0; transition:all 0.2s linear 0s; text-align:center; border:2px solid #fff}
a.button:hover, a.button2:hover{text-decoration: none;}


/* Bereiche */
.bereichborder{border:4px solid #fff}
.bereich{border:4px solid #fff; padding:0 0 0 0; position:relative;  overflow:hidden; height:271px}
.bereich a img{transition:all 0.4s linear 0s; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.bereich a:hover img{transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1);}
.bereich a .overlay{background-color:#201E1D; width:100%; height:100%; position:absolute; z-index:2; opacity:0; transition:all 0.2s linear 0s;}
.bereich a:hover .overlay{opacity:0.4}
.bereich .txt{position:absolute; top:28%; color:#fff; width:100%; text-align:center; text-shadow: 0px 0px 20px #000; z-index:3}
.bereich .txt h2{background-image: url(../img/line.jpg); background-repeat:no-repeat; background-position:center bottom; padding-bottom:20px}
.headline h1{background-color:#BADC77; display:block; text-align:center; padding:40px; margin-bottom:0; color:#fff; text-shadow: 2px 2px 8px #8AA359; border-bottom:5px solid #8AA359}


/* Kontaktformular */
input, textarea, select{padding:8px 10px; margin-bottom:15px; font-family: 'Source Sans Pro', sans-serif; font-size:1.2rem; width:100%;}
input.submit{cursor:pointer; transition:all 0.2s linear 0s;}
.form03{position:absolute; top:-2000px;}
.formok{font-weight:bold; margin-bottom:20px}


/* Footer */
footer{background-color:#201E1D; border-top:1px solid #fff; color:#fff; text-align:center; padding:3% 0;}
footer a{color:#fff !important;}
footer .footcol{padding:0 20px 20px 20px; text-align:left; height:170px}
footer .phonenr{padding-top:5px; display:block}


/* CSS3 Schatten */
header
{-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}



/* ##################################### RESPONSIVE ######################################## */


@media all and (max-width:1700px) {
	.bereich{height:243px}
	}
	
	
@media all and (max-width:1600px) {
	.bereich{height:230px}
	}

@media all and (max-width:1400px) {
	.bereich h2{font-size:1.6rem}
    .bereich{height:200px}
	}


@media all and (max-width:1270px) {
    body, nav li a,input, textarea, select{font-size:1rem;}
    .logo .hauptlogo img{width:300px;}
	header{height:95px}
	nav{float:right; margin-top:26px}
	.top{padding-top:95px}
	h1{font-size:1.6rem;}
	h2{font-size: 1.3rem}
    .bereich{height:185px}
	}
	
@media all and (max-width:1024px) {
	.bereich{height:145px}
	}
	
@media all and (max-width:1023px) {
    nav{float:right; margin-top:20px}
    nav form{display:block; margin-top:5px}
	nav form select{margin-bottom:0}
	nav ul{display:none}
	.bereich{height:280px}
	}



@media all and (max-width:767px) {
	.wrapperhome h1{font-size:2.0rem;}
	footer{padding:5% 0;}
}


@media all and (max-width:639px) {
	.bereich{height:350px}
}


@media all and (max-width:520px) {
	.logo .hauptlogo{display:none}
	.logo .mobilelogo{display:block}
	.logo .mobilelogo img{width:200px}
	.bereich{height:300px}
}

@media all and (max-width:420px) {
	.logo .mobilelogo img{width:120px; margin-top:5px}
	.top{padding-top:70px}
	nav{float:right; margin-top:13px}
	nav form select{padding:5px}
	header{height:70px}
	.wrapperhome h1{font-size:1.6rem;}
	.bereich{height:250px}
}





/* ##################################### RESPONSIVE; MOBILEFIRST ######################################## */