@charset "utf-8";

a, abbr, acronym, address, applet, article, aside, audio, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li,
mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time,
tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
	padding: 0;
	margin: 0;
	width:100%;
	height:100%;
}

:root	{
	font-size: 8px;
}

body		{
 	margin:0;
	padding:0;
	background-color: #fff9f4; 
	width:100%;
	height:100%;	
	font-family: 'Literata';		
}

#container	{
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 2rem 0 2rem;
}	

header	{
    width:100%;
    height: 5.5rem;
    margin: 0 0 1rem 0;
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    background-color: #fff9f4; 
}
	
#logo	{			
	position: absolute;
	top: 1rem;
	left: 2rem;
	z-index: 22;
	width: 40%;
	height: auto;
	margin: 0;	
	padding: 0;
	font-style: normal;
	font-weight: 300;
	font-variation-settings: 'opsz' 52;	
	font-size: 3rem;
	line-height:1;
	color: #333333;
}

main	 {
	width:100%;
	margin: 6rem 0 1rem 0;
	padding: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: flex-start;
 	-ms-align-items: flex-start;
 	align-items: flex-start;
 	-webkit-flex-wrap: wrap;
 	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  	flex-grow: 1;
  	-webkit-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -ms-justify-content: space-between;
  	justify-content: space-between;
}

.box2, .box26, .box3, .b0x35, .box5, .box6, .box62, .box72, .box74, .box10 {
 	-webkit-flex-basis: 100%;
 	-ms-flex-basis: 100%;
 	flex-basis: 100%;
	margin-bottom: 3rem;
	position: relative;
}

.hz	{
	margin-bottom: 1rem;
}

.wechsel {
    display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around; /* Safari 6.1+ */
	justify-content:  space-between;
	align-items: flex-start;	
    -webkit-flex-direction: row-reverse;
    flex-direction : row-reverse;
	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	flex-grow: 1;  
  	margin: 0;
  	padding: 0;
  	position: relative;
}

.spalten    {
	-moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
}

.bg-box {
	background-size: cover;
	background-position: center;
	background-position: 50% 50%;
	margin: 0 0 3rem 0;
	position: relative;
    width:100%;
    height: 450px;
}

.unten {
	-webkit-align-self: flex-end;
	align-self: flex-end;
}

.olinks	{
	position: absolute;
	top: 0;
	left:  0;
	width: 70%;
	background: transparent;
	margin: 0;
	padding: 2rem;
}

.ulinks	{
	position:absolute;
	bottom: 0;
	left: 0;
	width: 90%;
	background: transparent;
	padding: 3rem;
}

.orechts	{
	position:absolute;
	top: 0;
	right: 0;
	width: 70%;
	background: transparent;
	padding: 3rem;
	text-align: right;
}

.urechts	{
	position: absolute;
	bottom: 0 ;
	right: 0;
	width: 90%;
	height: auto;
	background: transparent;
	padding: 3rem;
	text-align: right;
}

figure	{
	width: 100%;
	margin: 0;
	padding: 0;
}

img {
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}

.rund {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.schatten	{
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.trenner	{
	width:100%;
	height:20px;
}

h1		{	
	font-weight: 200;
	font-variation-settings: 'opsz' 70;
	font-style: normal;
	font-size: 5rem;
	line-height: 1.1;
	color: #000000;
	margin: 0;
	padding: 0;
}

h1.impressum	{
	border-top: solid 1px rgb(204,204,204);
	padding: 1rem 0 0 0;
	margin: 0;
}

h2 	{		
	font-weight: 300;
	font-variation-settings: 'opsz' 70;	
	font-style: normal;
	font-size: 4rem;
	line-height: 1;
	margin: 0 0 0.5rem 0;
	color: #333333;
}

h3		{	
	font-weight: 300;
	font-variation-settings: 'opsz' 20;
	font-style: normal;
	font-size: 4rem;
	line-height: 1.2;
	margin: 0 0 0.5rem 0;
	color: #333333;
}

h4		{	
	font-weight: 600;
	font-variation-settings: 'opsz' 70;
	font-style: normal;
	font-size: 4rem;
	line-height: 1;
	margin: 0 0 0.5rem 0;
	color: #333333;
}

h5		{	
	font-weight: 600;
	font-variation-settings: 'opsz' 20;
	font-style: normal;
	font-size: 4rem;
	line-height: 1;
	margin: 0 0 0.5rem 0;
	color: #333333;
}

p	{
	font-weight: 350;
	font-variation-settings: 'opsz' 45;
	font-style: normal;
	font-size: 2rem;
	line-height: 1.6;
	color: #333333;
	margin: 0;
}

.test20	{
	font-variation-settings: 'opsz' 20;
}

.test60	{
	font-variation-settings: 'opsz' 60;
}
	
p.elegant	{
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: 300;
	color: rgb(51,51,51);
}
	
p.bt	{
   font-family: 'LatoLatinWeb';
	font-weight: normal;
	font-style: normal;
	font-size: 1.75rem;
	line-height: 1.2;
	color: rgb(95,95,95);
	padding: 0.5rem 0 0 0;
}	
	
p.hinweis	{
	font-size: 0.75rem;
	line-height: 1;
	color:#666;
    font-family: 'LatoLatinWebLight';
	font-weight: normal;
	font-style: normal;
	letter-spacing:1px;
	margin: 0 0 20px 0;
	text-align:right;
	width:100%;
} 

.schattenschrift {
	color: #ffffff;
	text-shadow: 1px 1px 4px #000000;
}

.weiss	{
	color: #ffffff;
}

p.sterne	{
	font-size:  2rem;
	text-align: center;
	color: #eeeeee;
	margin: 1rem 0 0 0;
} 
	
dl	{
	list-style: none outside none;
	padding: 3px 0;
	margin: 0;
	font-style: normal;
	font-size: 2rem;
	line-height: 1.5;
}
	
dt	{
	margin: 0 0 1rem 0;	
	font-weight: 600;
	font-style: normal;
	float : left;
}
	
dd	{
	margin: 0 0 1rem 17rem;
	font-weight: 400;
	font-style: normal;
	color: rgb(95,95,95);
}
		
main a:link, main a:visited	{
	color: rgb(47,95,143);
	text-decoration: none;
	padding: 0 2px 0 2px;
}

main a:hover	{
	color:rgb(255,255,255);
	background-color: rgb(0,0,0);
}

a.zoom:link, a.zoom:visited, a.zoom:hover 	{
	text-decoration : none;
	background: none;	
	padding : 0;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}	
 
footer {
	width: 100%;
	height: 4rem;
	border-top: solid 1px #cccccc;
	float: left;
	margin:  0;
}
 
footer  p {
	color: rgb(153,153,153);
	font-size: 1.5rem;
    font-family: 'LatoLatinWeb';
	font-weight: normal;
	font-style: normal;
	letter-spacing:1px;
	line-height: 100%; 	
	margin-top: 0.5rem;  
	text-align:left;	
}	

footer p span	{
	float:right;
}

footer a:link, footer a:visited	{
	color:rgb(153,153,153);
	text-decoration: none;
	padding: 0 2px 0 2px;
}

footer a:hover	{
	color:rgb(255,255,255);
	background-color: rgb(0,0,0);
}	

@media screen and (min-width:512px) {

	.box2, .box26, .box3, .box5, .box6, .box72, .box74 {
 		-webkit-flex-basis: 48.5%;
 		-ms-flex-basis: 48.5%;
 		flex-basis: 48.5%;
		margin-bottom: 3rem;
		position: relative;
	}
}

@media screen and (min-width:768px) {

	:root	{
		font-size: 9px;
	}

	#container	{
		padding: 0 3rem 0 3rem;
	}	
	
	header	{
        height: 4.5rem;
        margin: 0 0 0 0;
        position: relative;
    }
    
    #logo	{
    	top: 0;
    	left: 0;
    }
    
    main	{
    	margin: 0;
    }

	.box2 {
		-webkit-flex-basis: 23.5%;
 		-ms-flex-basis: 23.5%;
 		flex-basis: 23.5%;
		margin-bottom: 3rem;
		position: relative;
	}

	.box26 {
		-webkit-flex-basis: 26%;
 		-ms-flex-basis: 26%;
 		flex-basis: 26%;
		margin-bottom: 3rem;
		position: relative;
	}
	
	.box3 {
		-webkit-flex-basis: 32%;
 		-ms-flex-basis: 32%;
 		flex-basis: 32%;
		margin-bottom: 3rem;
		position: relative;
	}
	
		
	.box35 {
		-webkit-flex-basis: 35.5%;
 		-ms-flex-basis: 35.5%;
 		flex-basis: 35.5%;
		margin-bottom: 3rem;
		position: relative;
	}

	.box6 {
 		-webkit-flex-basis: 65%;
 		-ms-flex-basis: 65%;
 		flex-basis: 65%;
		margin-bottom: 3rem;
		position: relative;
	}


	.box62 {
 		-webkit-flex-basis: 62.5%;
 		-ms-flex-basis: 62.5%;
 		flex-basis: 62.5%;
		margin-bottom: 3rem;
		position: relative;
	}

	.box72 {
 		-webkit-flex-basis: 72%;
 		-ms-flex-basis: 72%;
 		flex-basis: 72%;
		margin-bottom: 3rem;
		position: relative;
	}
	
	.box74 {
 		-webkit-flex-basis: 74.5%;
 		-ms-flex-basis: 74.5%;
 		flex-basis: 74.5%;
		margin-bottom: 3rem;
		position: relative;
	}
	
	.box10 {
 		-webkit-flex-basis: 100%;
 		-ms-flex-basis: 100%;
 		flex-basis: 100%;
		margin-bottom: 3rem;
		position: relative;
	}

	.box10ohne {
 		-webkit-flex-basis: 100%;
 		-ms-flex-basis: 100%;
 		flex-basis: 100%;
		margin-bottom:5px;
	}

	.bg-box {	
    	height: 550px;
	}

	.schatten	{
		-moz-box-shadow: 5px 10px 15px #999999;
		-webkit-box-shadow:  5px 10px 15px #999999;
		box-shadow:  5px 10px 15px #999999;
	}

}

@media screen and (min-width:1024px) {	

	.spalten    {
    	-moz-column-count: 2;
    	-moz-column-gap: 2rem;
    	-webkit-column-count: 2;
    	-webkit-column-gap: 2rem;
    	column-count: 2;
    	column-gap: 2rem;
    	text-align: left;
	}
}

@media screen and (min-width:1280px) {		

	#container		{
    	width: 94%;
		max-width: 1408px;
		margin: 0 auto;
		padding: 0 ;
	}

	.bg-box {	
    	height: 640px;
	}
	
}