/* CSS Document */

/* FARBEN *********************************************************************************************

hellgruen:	#96C11F		rgba(150,193,31,1)	--> a=1	im Logo, 
gruen:		#324205		rgba(50,66,5,1)	--> a=0.6 Hintergrund .inhalts_flaeche, #titelbalken, #totop; a=1 Schrift a:hover, Formular, Hinergrund body
*/


/* SCHRIFT ********************************************************************************************/

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:200,300,500');



/* RESETS   *****************************************************************************************/

* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

/* ALLGEMEINE DEFINITIONEN ***************************************************************************/

html {
	font-size:120%;
}
body {
	background: rgba(50,66,5,1);
	background-attachment:fixed;
	background-position:0 0;
	background-size:cover;
	color:#fff;
	font-family:'Barlow Condensed', sans-serif;
	font-size:1.2rem;
	font-weight:200;
	line-height:1.5;
	transition:background-image 0.9s ease;
}
	
a,
a:visited {
	color:white;
	text-decoration:none;
}
a:hover {
	background:rgba(255,255,255,0.6);
	color:rgba(50,66,5,1);
}

#logo_einblenden a:hover {
	background:none;	
}

h1, h2, h3  {
	font-family:'Barlow Condensed', sans-serif;
	font-weight:300;
	padding:1rem;
}
p {
	padding:0 1rem 1rem;
}
article {
	width:60%;
	max-width:45rem;
}
article.impressum {
	padding: 4rem 4rem;
}
blockquote {
	padding:1rem 3rem;
	position:relative;
	width:21rem;
}
blockquote:before {
	content:"\201C";
	font-family:Times New Roman, Times, serif;
	font-size:3.75rem;
	position:absolute;
	left:1rem;
	top:-0.25rem;
}
blockquote:after {
	content:"\201D";
	font-family:Times New Roman, Times, serif;
	font-size:3.75rem;
	padding-left: 1rem;
	position:absolute;
	right:3.75rem;
	bottom:0.5rem;
}
blockquote cite {
	display:block;
	font-size:1rem;
	font-style:normal;
	padding-top:0.5rem;
}
img {
	max-width:100%;
}
ul {
	list-style-type:square;
	padding:1rem;
}
ul li {
	padding-bottom:1rem;
	margin-left:1rem;
}
#titelbalken {
	top:1%;
	position:fixed;
	background:rgba(50,66,5,0.6);
	margin-top: 1%;
	padding:1.25rem 4rem;
}
#hamburgerbutton{
	display:none;
}
#hamburgermenu{
	display:none;
}
#titelbalken #menubutton{
	position:absolute;
	right:1.25rem;
}
#logo_einblenden {
	width:30%;
	height:auto;
	max-width:21rem;
	position:fixed;
	top:1rem;
	right:5rem;
}


/* ================= LAYOUT INHALTE =============== */

#fusszeile {
	background:rgba(50,66,5,0.6);
	margin-top:3rem;
	padding:1.25rem 4rem;	
}

#inhalt_1 {
	background-image: url("bilder/allee.jpg") ;
}
#inhalt_2 {
	background-image: url("bilder/inselchen.jpg") ;
}
#inhalt_3 {
	background-image: url("bilder/sonnenblume.jpg") ;
}
#inhalt_4 {
	background-image: url("bilder/weg_sonnenuntergang.jpg") ;
}
#inhalt_5 {
	background-image: url("bilder/wasser_wald.jpg") ;
}
#totop {
	background:rgba(50,66,5,0.6);
	display:none; 	
	position:fixed;
	right:0px;
	bottom:1.25rem;
	padding:0.625rem 0;
}
#totop a {
	padding:0.625rem;
}	


/* ================= EIGENE KLASSEN =============== */

.aktiv {
	background:rgba(255,255,255,0.6);
	color:rgba(50,66,5,1);
	transition:all ease-in-out 0.7s;
}
.bedeutung {
	font-size:1rem;
	padding-top:1rem;
}
.fas,.far {
	margin:0 0.25rem 0 0.5rem;
}

.fa {
	margin:0 0.25rem 0 0.5rem;
}

.fett {
	font-weight:500;
}
.infolinks{
	float:left;
	width:60%;
	max-width:45rem;
}
.inforechts{
	float:right;
	width:30%;
}	
.inhalts_flaeche {
	background:rgba(50,66,5,0.6);
	padding:1.25rem 4rem;
}

.inline {
	display:inline-block;
}
.kleinesbild {
	margin:4.25rem auto 0;
	padding:1.5rem;
	max-width:21rem;
	width: 100%;
}
.panel {
	background:rgba(50,66,5,0.6);
	background-attachment:fixed;
	background-position:center center;
	webkit-background-size:cover;
     -moz-background-size:cover;
     -o-background-size:cover;	
	background-size:cover;		
	background-repeat:no-repeat;
	padding-top:25rem;
	padding-bottom:4rem;
	height:auto;
	min-height:100vh;
	z-index:-10;	
}

/* ================= FORMULAR =============== */

form {
	margin-bottom:2rem;
	padding:1rem;
}

input,
textarea {
	background:rgba(150,193,31,0.6);
	border:none;
	font-family:'Barlow Condensed', sans-serif;
	outline:none;
	margin-bottom:0.5rem;
	padding:0.5rem 0.5rem;
	width:100%;
}

a.schaltflaeche {
	background:rgba(150,193,31,0.6);
	border:none;
	font-family:'Barlow Condensed', sans-serif;
	outline:none;
	margin: 0 0 0.5rem 2rem;
	padding:0.5rem 0.5rem;
	width:100%;
}

input[type="checkbox"] {
	margin-left:1rem;
	vertical-align:middle;
	width:auto;
}

input,
input::placeholder,
textarea,
textarea::placeholder {
	color:#fff;
	font-size:1rem;
	font-weight:300;
}

a.schaltflaeche,
input[type="submit"] {
	background:rgba(255,255,255,0.6);
	color:rgba(50,66,5,1);
	font-size:1.2rem;
	transition:all ease-in-out 0.7s;
	width:50%;
}

a.schaltflaeche:hover,
input[type="submit"]:hover {
	background:rgba(150,193,31,0.8);
	color:#fff;
	transition:all ease-in-out 0.7s;
}

input[type="text"] {
	min-height:2.5rem;
}

input[type="text"]:focus,
textarea:focus {
	background-color:rgba(150,193,31,0.8);
}

input[type="email"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

input[type="email"],
input[type="checkbox"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-border-radius: 0;
	border-radius: 0;
}

.terms {
	display: none;
}

/* ============================= RESPONSIVE ===================================== */

@media screen and (max-width:1200px) {
	
	html {
		font-size:110%;
	}
	#fusszeile {
		padding:1.25rem 2rem;	
	}
	#logo_einblenden {
		max-width:14rem;
		right:1rem;
	}
	#titelbalken{
		display:none;
	}
	#hamburgerbutton{
		position:absolute;
		top:0.625rem;
		left:0.625rem;
		display:block;
		font-size:3rem;
	}
	#hamburgermenu{
		margin:8rem 1rem 1.25rem;
		padding-bottom:1.25rem;
	}
	#hamburgermenu a{
		border-bottom:1px solid #fff;
		color:#fff;
		display:block;
		font-size:1.5rem;
		padding:0.5rem;
		text-align:center;
		text-transform:uppercase;
	}
	#hamburgermenu a:hover,
	#hamburgermenu a.aktiv {
		background:rgba(255,255,255,0.6);
		color:rgba(50,66,5,1);
	}
	#impressum {
		margin-top: 6rem;
	}	
	article.impressum {
        padding: 2rem 1rem;
    }
	.inhalts_flaeche {
		padding:1rem 1rem;
	}
	.inforechts{
		width:35%;
	}
	
	.panel {
		background-attachment:scroll;
		padding-top:15rem;
		padding-bottom:3rem;
	}
	
	#fusszeile>.inline {
		padding: 0 0;
	}
}

@media screen and (max-width:960px) {
	
	html {
		font-size: 100%;
	}
	article {
		width:100%;
	}
	#logo_einblenden {
		min-width:11.25rem;
		position:absolute;
	}
	.schaltflaeche,
	input[type="submit"] {
        background:rgba(255,255,255,0.6);
        color:rgba(50,66,5,1);
        font-size:1.2rem;
        transition:all ease-in-out 0.7s;
        width:100%;
     }
	
	.infolinks{
		float:none;
		width:100%;
	}
	.inforechts {
		float:none;
		width:100%;
	}
	
	.inline {
		padding: 1rem 1rem;
	}
	.kleinesbild {
		margin:0 auto 0;
		padding:1rem;
	}
}

/* KLEINE MOBILTELEFONE*/
@media screen and (max-width:460px) {
	
	.inline {
		display: block;
		padding: 0 1rem;
	}
	.inline:last-child {
		padding: 0 1rem 1rem;
	}
	
}