@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:500=Roboto:400;700');

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
	background-color: #FFFAFA;
	color: #2D3536;
}

.wrapper{
	-ms-overflow-y: scroll;
	-ms-overflow-x: hidden;
	-webkit-overflow: scroll;
	overflow: scroll;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.4em;
	margin: 0 auto;
} 
.logo img{
	width: 30%;
	display: block;
	text-align: center;
	margin: 72px auto 36px auto;
}
nav ul{ 
	font-size: 1.25em;
	display: block;
	text-align: center;
	margin: 0 auto 72px auto;
}
nav li{
	display: inline-block;
	margin: 0 18px;
}
nav a:hover, p a:hover, footer a:hover{
	color: #fad32d;
	border-bottom-style: solid; 
	border-bottom-width: 0.1em; 
	border-bottom-color: #fad32d;
	width: fit-content; 
}
.headerbild{
	text-align: center;
	width: 100%;	
	position: relative;
}
.headerbild img{
	height: 540px;
    width: 100% !important;
    object-fit: cover;
    object-position: top center;
	display: block;
	background-color: #e0eeee;
}
.headerbild cite{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 75%;
	background-color: transparent;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 4.75em;
	line-height: 1.4em;
	text-align: left;
}
.headerbild p{
	background-color: transparent;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 0.35em;
	line-height: 1.4em;
	margin-top: 0.5em;
}
.container{
	text-align: center;
	width: 85%;
	margin: 144px auto 0 auto;
	display:block;
}
.lead{
	width: 65.931373%;
	margin: 0 auto;
	text-align: center;
}
.lead h1{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.5em;
	line-height: 1.25em;
	margin: 0 auto 36px auto;
}
.lead p{
	font-size: 1.5em;
	line-height: 1.25em;
	margin-bottom: 36px;
}
.impressum{
	width: 85%;
	margin: 0 auto 72px;
	text-align: left;
}
.impressum h1, .datenschutz h1{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.5em;
	line-height: 1.2em;
	margin: 0 auto 72px auto;
}
.impressum h2, .datenschutz h2{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 1.75em;
	line-height: 1.2em;
	margin-bottom: 36px;
}
.impressum p, .impressum address, .impressum a, .datenschutz p, .datenschutz a{
	line-height: 1.4em;
	background-color: transparent ;
}
.datenschutz{
	width: 85%;
	margin: 0 auto 72px;
	text-align: left;
}
#angebot{
	width: 100%;
	display: grid;
	grid-template-columns: calc(33.33334% - 24px) calc(33.33334% - 24px) calc(33.33334% - 24px); 
	grid-column-gap: 36px;
}
#angebot h3{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 1.75em;
	line-height: 1.2em;
	padding: 0.5em;
	background-color: #E0EEEE;
	display: inline-block;
	margin: -72px auto 18px auto;
}
#angebot img{
	width: 100%;
	display: inline-block;
	margin: 36px 0 -12px 0;
}
button{
	margin: 72px auto 144px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	line-height: 1.25em;
	background: none;
	color: inherit;
	border: none;
	padding: 0px;
	cursor: pointer;
	outline: inherit;
	border-bottom-style: solid; 
	border-bottom-width: 0.1em; 
	border-bottom-color: #fad32d;
	}
button:hover{
	color: #fad32d;
}

.studio{
	clear: both;
	width: 100%;
	margin: -5px 0 0 0;
	background-color: #E0EEEE;
	display: inline-block;
}
.studio h2{
	text-align: left;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 1.75em;
	line-height: 1.4em;
	background-color: transparent;
	margin: 72px 7.5% 36px 7.5%;
}
.studio p{
	width: calc(42.5% - 18px);
	text-align: left;
	margin: 0 7.5% 36px 7.5%;
	background-color: transparent;
}
.slider{
	width: 85%;
	margin: 0 auto 144px auto;
	display: grid;
	grid-template-columns: calc(25% - 24px) calc(25% - 24px) calc(25% - 24px) calc(25% - 24px) ; 
	grid-column-gap: 36px;
	grid-row-gap: 0px;
	background-color: transparent;
}
.slider img{
	margin-bottom: -5px;
	width: 100%;
}
.ueber{
	margin: 144px auto 144px auto;
	display: inline-block;
	background-color: #fad32d;
}
.ueber img{
	width: calc(50% - 36px);
	float: left;
}
.ueber h3{
	float: left;
	width: calc(50% - 144px);
	text-align: left;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 1.75em;
	margin: 72px 72px 36px 72px;
	background-color: #fad32d;
}
.ueber p{
	float: left;
	text-align: left;
	width: calc(50% - 108px);
	margin: 0 0 72px 72px;
	background-color: #fad32d;
}
.kontakt{
	clear: both;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	background-color: #E0EEEE;
}
.kontakt iframe{
	width: 100%;
	margin: 72px auto;
	padding: 0 7.5%;
	display: block;
	background-color: #E0EEEE;
}
.kontakt h3{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 1.75em;
	margin-bottom: 36px;
	background-color: #E0EEEE;
}
.address{
	text-align: left;
	margin: 0 6.35%;
	position: absolute;
	background-color: #E0EEEE;
}
address p{
	background-color: #E0EEEE;
	line-height: 1.25em;
}
address a, .zeit table, .zeit h3, .zeit th{
	background-color: #E0EEEE;
}
.zeit p{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	background-color: #E0EEEE;
	margin: 18px 0 72px 0;
	display: inline-block;
}
.zeit{
	float: right;
	text-align: left;
	width: 50%;
	margin: 0 auto;
	background-color: #E0EEEE;
}
table{
	width: 70%;
}
th{
	height: 1.5em;
}
.footer{ 
	width: 85%;
	padding: 18px 10px 10px 36px;
	margin: 0 auto;
	display: block;
	background-color: #2D3536;
}
footer p{
	display: inline-block;
	font-size: 0.75em;
	background-color: transparent;
	color: #FFFAFA;
}
footer a{
	display: inline-block;
	float: right;
	padding: 0 18px;
	font-size: 0.75em;
	background-color: transparent;
	color: #FFFAFA;
}

.textklein{
	font-size: 0.75em;
	line-height: 1em;
	margin-bottom: 36px;
}

#myBtn{
	display: none;
	width: 54px;
	height: 54px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99;
	background-color: #2D3536;
	color: white;
	cursor: pointer;
	margin: 0 calc(7.5% + 36px) 92px 0;
	border: 0;
	opacity: 0.8;
}

#myBtn p{
	background-color: transparent;
	color: white;
	font-size: 1.5em;
}

#myBtn:hover{
 	background-color: #fad32d;
}
#myBtn p:hover{
	color: #2D3536;
}
/*------------------------------------------------------------------------------------------------------------------
Grosser Bildschirm
-------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1920px){
	.wrapper{
		max-width: 1920px;
	}
	.headerbild cite{
		width: 60%;
	}

	.headerbild img{
	height: 720px;
   
	}
	.headerbild cite{
		font-size: 6em;
	}
}

/*------------------------------------------------------------------------------------------------------------------
Desktop mittel
-------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1439px){

	.headerbild img{
		height: 540px;
		object-position: right;
	}

	#angebot h3{
		font-size: 1.3em;
	}

}

/*------------------------------------------------------------------------------------------------------------------
Tablet
-------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1023px){

	.headerbild img{
		height: 384px;
		object-position: right;
	}

	.logo img{
		width: 40%;
	}
	.headerbild cite{
		font-size: 3.5em;
	}
	.lead{
		width: 85%;
	}
	#angebot{
		grid-template-columns: calc(50% - 24px) calc(50% - 24px); 
	}

	#angebot h3{
		font-size: 1.3em;
	}

	.studio p{
		width: 85%;
	}
	.slider{
		width: 85%;
		grid-template-columns: calc(50% - 24px) calc(50% - 24px);
	}
	.slider img{
		margin-bottom: 36px;
		width: 100%;
	}
	.ueber{
		margin: 144px auto 144px auto;
		display: inline-block;
	}
	.ueber img{
		width: 60%;
		margin: 72px 20% 0 20%;
	}
	.ueber h3{
		width: 60%;
		margin: 72px 20% 36px 20%;
	}
	.ueber p{
		width: 60%;
		margin: 0 20% 72px 20%;
	}

	.kontakt h3{
		margin-bottom: 36px;
	}
	.address{
		text-align: left;
		margin: 0 6.35% 36px 6.35%;
		position: inherit;
	}
	.zeit{
		float: left;
		width: 85%;
		margin: 0 6.35% 36px 6.35%;
	}
}

/*------------------------------------------------------------------------------------------------------------------
Mobile
-------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px){

	.headerbild img{
		height: 420px;
		object-position: right;
	}
	.logo img{
		width: 60%;
	}
	nav ul{ 
		margin: 0 auto 36px auto;
		max-width: 95%;
	}
	nav li{
		margin: 0 18px 18px 18px;
	}

	.headerbild cite{
		font-size: 2em;
	}
	.headerbild cite{
		width: 85%;
	}
	.lead{
		width: 100%;
	}
	#angebot{
		grid-template-columns: 100%; 
	}
	.lead h1{
		font-size: 3em;
	}
	.impressum h2, .datenschutz h2, .studio h2{
	font-size: 1.5em;
	}
	.headerbild cite{
		font-size: 2.8em;
	}
	#angebot h3{
		font-size: 1.3em;
	}
	.studio p{
		width: 85%;
	}
	.slider{
		width: 85%;
		grid-template-columns: 100%;
	}
	.slider img{
		margin-bottom: 36px;
		width: 100%;
	}
	.ueber{
		margin: 144px auto 144px auto;
		display: inline-block;
	}
	.ueber img{
		width: 80%;
		margin: 72px 10% 0 10%;
	}
	.ueber h3{
		width: 80%;
		margin: 72px 10% 36px 10%;
	}
	.ueber p{
		width: 80%;
		margin: 0 10% 72px 10%;
	}
	
	.kontakt h3{
		margin-bottom: 36px;
	}
	.address{
		text-align: left;
		margin: 0 6.35% 36px 6.35%;
		position: inherit;
	}
	.zeit{
		float: left;
		width: 85%;
		margin: 0 6.35% 36px 6.35%;
	}
	table{
		width: 100%;
	}
	.footer{ 
		width: 85%;
		padding: 18px 10px 36px 36px;
}


/*------------------------------------------------------------------------------------------------------------------
Print
-------------------------------------------------------------------------------------------------------------------*/
@media print{

	.wrapper, .impressum p, .impressum address, .impressum a, .datenschutz p, .datenschutz a{
		font-size: 10pt;
		line-height: 12pt;
	} 
	.logo img{
		margin: 0 auto 36px auto;
		width: 45%;
	}
	nav ul, .headerbild, .headerbild img, .headerbild cite, .headerbild p, button, #myBtn, #myBtn p, .kontakt iframe, .footer{ 
		display: none;
	}
	.container, .impressum, .datenschutz{
		width: 100%;
		margin: 36px auto 0 auto;
		}
	.lead{
		width: 100%;
	}
	.lead h1, .impressum h1, .datenschutz h1{
		font-size: 18pt;
		line-height: 20pt;
		margin-bottom: 18px;
	}
	.lead p{
		font-size: 12pt;
		line-height: 14pt;
		margin-bottom: 18px;
	}
	
	.impressum h2, .datenschutz h2{
		font-size: 12pt;
		line-height: 14pt;
		margin-bottom: 18px;
	}
	
	#angebot{
		grid-template-columns: calc(50% - 24px) calc(50% - 24px); 
	}
	#angebot h3{
		font-size: 12pt;
		line-height: 14pt;
		margin: -72px auto 18px auto;
	}
	#angebot img{
		width: 100%;
		display: inline-block;
		margin-top: 36px;
	}
	.studio h2{
		font-size: 14pt;
		margin: 36px 7.5% 18px 7.5%;
	}
	.studio p{
		width: 85%;
	margin: 0 7.5% 36px 7.5%;
	}
	.slider{
		width: 85%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: calc(25% - 24px) calc(25% - 24px) calc(25% - 24px) calc(25% - 24px) ; 
		grid-column-gap: 36px;
		grid-row-gap: 0px;
		background-color: transparent;
	}
	
	.ueber{
		margin: 72px auto 36px auto;
		display: inline-block;
		background-color: #fad32d;
	}
	.ueber img{
		width: calc(50% - 36px);
	}
	.ueber h3{
		width: calc(50% - 72px);
		font-size: 14pt;
		margin: 0px 36px 36px 36px;
	}
	.ueber p{
		width: calc(50% - 36px);
		margin: 0 0 36px 36px;
		background-color: #fad32d;
	}
	
	.kontakt h3{
		font-size: 14pt;
		margin-bottom: 36px;

	}
	.address{
		margin: 0;
	}
	address p{
		background-color: #E0EEEE;
		line-height: 10pt;
	}
	
	.zeit p{
		margin: 18px 0 36px 0;
	}
	th{
		height: 14pt;
	}
	@page { 
		margin: 1.5cm;
		margin-bottom: 1cm;
		margin-left: 1cm;
		margin-right: 1cm;
	}