@charset "UTF-8";


@font-face {
	font-family: Hark-Bold;
	src:url("../font/Hark Bold.otf");
}
@font-face {
	font-family: Hark-Roman;    /*entspricht Semibold*/
	src:url("../font/Hark Roman.ttf");
}
@font-face {
	font-family: Hark-Regular;
	src:url("../font/Hark Regular.otf");
}
@font-face {                /*Logo-Subline*/
	font-family: Hark-Semi-Con; 
	src:url("../font/Hark Semi Condensed.otf");
}

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

body {
	background: url("../img/Blumenbeet_OK.jpg") no-repeat center fixed;
	background-size: cover;
	font-family: Hark-Regular, sans-serif; 
	font-size: 1.5em;
	line-height: 1.5em;
	color: #000;
}

/*-----Header-Bereich-----*/

header {
	background-color: #FFF;
	height: 133px;
	top: 0;              /*verworfen, weil wenig Content*/
}

.logo-positioner{
	position: absolute;	
	height: 200px;
	margin-left: 50%;
	z-index: 1;
}

.logo-positioner img {
	margin-left:-1144px;
	/*margin-top: -36px;*/
}

/*-----Content-Bereich-----*/

.container {
	width: 1230px;
	margin: 100px auto;
	margin-bottom: 0;
}

main {
	/*height: 200vh;*/
	background-color: rgba(255,255,255,0.6);
	padding: 75px 30px 60px 75px;
	/*text-align: justify;
	hyphens: auto;*/
}

.box1 a {
	font-family: Hark-Bold, sans-serif;
	color: #781;
	text-decoration: none;
	cursor: pointer;
}

.box1 a:hover {
	color: #E75012;
	cursor: pointer;
}

.flexcontainer {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: center;*/
}

.box1 {
	width: 390px;
	margin-right: 50px;
	margin-bottom: 45px;
	margin-top: 45px;
}

.box3 {
	width: 90%;
	margin: 45px 0 0 0;
}

h1 {
	font-family: Hark-Bold, sans-serif;
	font-size: 1.5em;
	line-height: normal;
	color: #781;
	margin: -9px 0 45px 0;
	hyphens: manual;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	text-align: manual;
	font-kerning: none;
/*	letter-spacing:-2px;*/
}

h2 {
	font-family: Hark-Bold, sans-serif;
	font-size: 1.125em;
	color: #781;
	margin: 30px 0 13px 0;
	hyphens: manual;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	text-align: left;
/*	letter-spacing:-1px;*/
}

h3 {
	font-family: Hark-Roman, sans-serif;
	font-size: 1.0em;
	margin-bottom: 0.5em;
	hyphens: manual;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	text-align: left;
}

h4 {
	font: bold;
	padding-bottom: 0.75em;
}

/*mark {
	font-family: Hark-Roman, sans-serif;
}*/

main p {
	margin: -8px 0 15px 0;
	padding-bottom: 0.25em;
}

.box1 img,
.box2 img {
	width: 640px;
	margin-top: 45px;
}

.album { 
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 45px 0 0 0;
}

.album img,
.album p {
	width: 330px;
	margin-right: 45px;
}

.album figcaption {
	width: 330px;
	line-height: 125%;
	margin-bottom: 1em;
}

.album a img:hover {     /*falls vom Album weiterverlinkt wird*/
	cursor: pointer;
	filter:opacity(0.5);
}

iframe {
padding-top: 45px;
width: 640px;
height: 685px;  /* Wert paddin-top dazu addieren!!! */
}

footer {
	background-color: rgba(255,255,255,0.6);
	padding: 10px 75px;
}

figcaption,
footer a,
.map {
	font-size: 0.85em;
	line-height: 1.5em;
	text-decoration: none;
	color: #000;
}

.active {
	font-size: 0.85em;
/*	color: #AAA;  */
}

footer a:hover,
.box1 a:hover,   	/* E-Mail-Link */
.map:hover {		/* Größere Kartenansicht */
	color: #E75012;
}

.recht {			/* Impressum + Datenschutz */
	max-width: 700px;
	font-size: 90%;
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	margin-top: 45px;
}

.recht a {
	text-decoration: none;
	font-family: Hark-Roman, sans-serif;
	color: #781;
}

.recht a:hover {
	color: #E75012;
}


@media screen and (max-width: 1400px) {
	
	header {
		height: 100px;
	}
	.logo-positioner img {
		width: 660px;
		margin-left:-864px;
	}
	.container {
		width: 930px;
		margin: 75px auto;
		margin-bottom: 0;
	}
	main {
		padding: 45px 25px 45px 55px;

	}
	h1 {
		font-size: 1.65em;
		margin: -7px 0 35px 0;
	}
	body {
		font-size: 1.225em;
		line-height: 1.5em;
	}
	p {
		padding-bottom: 0.25em;
	}
	.box1 {
		margin: 45px 40px 0 0;
	}
	.box2 img {
		width: 390px; 
		height: 390px;
	}
	.album img,
	.album p  { 
	width: 390px;
	margin-right: 35px;
	}
	.album figcaption {
	width: 390px;
	margin-bottom: 1em;
	}
	iframe {
		width: 390px;
		height: 435px;  /* Wert paddin-top dazu addieren!!! */
	}
	footer {
		padding-left: 55px;
	}
	figcaption,footer a, .map {
	font-size: 0.875em;
	line-height: 1.5em;
	}
	.active {
		font-size: 0.875em;
	}
	.recht {
		max-width: 535px;
		hyphens: auto;
	}
}

@media screen and (max-width: 1000px) {
	
	.logo-positioner {
		margin-left: 3.5%;
	}
	.logo-positioner img {
		margin-left:-399px;
	}
	.container {
		width: 93%;
	}
	main, footer {
		padding-right: 55px;
	}
	.box1, .box2, .box2 img {
		margin: auto;
		width: 100%; 
		height: auto;
	}
	.box1 {
		margin-top: 45px;
		hyphens: auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
	}
	.album img { 
	width: 100%;
	}
	.album figcaption {
	width: 100%;
	margin-bottom: 1.5em;
	}
	iframe {
		padding-top: 0;
		width: 100%;
		height: 350px;
	}
	.recht {
		width: 100%;
		hyphens: auto;
	}
}