@charset "utf-8";
/* CSS Document ©2023 by daroc */
/* Thank you for looking at this code ;-) */ 

/* special-elite-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/special-elite-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/special-elite-v18-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* yeseva-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/yeseva-one-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/yeseva-one-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin-ext_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); 
}

/* roboto-700 - latin-ext_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-ext_latin-700.woff') format('woff');
}

/* roboto-900 - latin-ext_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'),
       url('../fonts/roboto-v27-latin-ext_latin-900.woff2') format('woff2'),
       url('../fonts/roboto-v27-latin-ext_latin-900.woff') format('woff');
}

html, body{
	background-color: #fff; color: #222; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400; font-size: 1.2em; letter-spacing: 0.02em; line-height: 1.2em; margin: 0; padding: 0; width: 100%; }

a{
	outline: none; }
a:link,
a:visited{
	background-color: #88b2d3; border-radius: 10px; color: #293133; font-weight: 700; padding: 2px 15px; text-decoration: none; transition: all 0.5s ease-in-out; }
a:hover,
a:active{
	color: #d9ca9c; }

a.masterphone:link,
a.masterphone:visited,
a.mastercallme:link,
a.mastercallme:visited,
a.mastermail:link,
a.mastermail:visited,
a.normalMenu:link,
a.normalMenu:visited{
	background-color: #88b2d3; border-radius: 10px; color: #293133; display: inline-block; font-weight: 700; padding: 2px 0; text-align: center; text-decoration: none; width: 210px; transition: all 0.5s ease-in-out; }
a.normalMenu:link,
a.normalMenu:visited{
	background-color: transparent; border-radius: 0px; color: #88b2d3; display: block; font-size: 1.2rem; font-weight: 400; outline: none;  padding: 5px 0; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
a.masterphone:hover,
a.masterphone:active,
a.mastercallme:hover,
a.mastercallme:active,
a.mastermail:hover,
a.mastermail:active,
a.normalMenu:hover,
a.normalMenu:active{
	color: #d9ca9c; }

a.no-js{
	display: block; position: relative; top: -100px; visibility: hidden; }

ul{
	margin: 1em; padding: 0; }

header{
	height: auto; background-color: #fff; padding: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
div#innerheader{
	box-sizing: border-box; margin: 0 auto; padding: 0; height: 100px; position: relative; width: 100%; }
div#logoheader{
    background-image: url("../images/unperfekt-frenkendorf-logo.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center; background-clip: border-box; background-origin: content-box; background-size: contain; box-sizing: border-box; clear: both; height: 100px; position: absolute; left: 30px; top: 0; width: 100px; }
.fullOpacity{
	opacity: 1; transition: all 0.5s ease; }
.openOpacity{
	opacity: 0.1; }

div#moblist{
	display: block; height: 40px; position: absolute; width: 40px; transition: all 0.5s ease; }
div.open{
	right: 30px; top: 30px; }
div.closed{
	right: 240px; top: 30px; }
a#mobNavi{ 
	background-color: transparent; border: 0; border-radius: 2px; box-sizing: border-box; display: block; height: 40px; margin: 0; outline: 0; padding: 0; text-decoration: none; text-align: center; width: 40px; }

div#container{
    box-sizing: border-box; height: auto; margin: 0 auto; padding: 0; position: relative; width: 100%; }

div.uppertable{
	display: block; width: 100%; }

section#introduction{
	box-sizing: border-box; margin: 0; padding: 0; position: relative; z-index: 1001; }
div#heroimage{
	background-image: url(../images/unperfekt-frenkendorf-startbild3.png); background-position: left 50%; background-attachment: local; background-origin: content-box; background-repeat: no-repeat; background-size: contain; background-color: #e0e5eb; margin: 0; height: 100%; padding: 0; position: relative;  }
div#logoposition{
	position: absolute; left: auto; right: 30px; top: 30px; bottom: auto; height: min(30vh,150px); width: auto; padding: 10px; transform: translateX(0); }
div#logoposition img{
	height: 100%; width: auto; }
div#thecloset{
	background-image: url(../images/unperfekt-frenkendorf-startbild3.png); background-position: left 50%; background-attachment: local; background-origin: content-box; background-repeat: no-repeat; background-size: contain; background-color: #e0e5eb; display: none; margin: 0; height: 100%; padding: 0; width: 100%; position: absolute; }
div#thesentence{
	position: absolute; right: 13%; top: 40%; bottom: auto; padding: 10px; transform: translateX(0); }
div#thesentence p{
	text-align: center; font-size: min(3.3vw, 50px); padding: 0; margin: 0; line-height: min(4.3vw, 70px); }
span.theName{
	font-family: 'Special Elite', serif; text-shadow: 1px 1px; }
span.subSlo{
	 font-size: min(2.6vw, 40px)}
div#herosarrow{
	position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); width: 60px; height: auto; }
svg.pfeil{
	fill: #88b2d3; transition: fill 0.5s ease-in-out; }
svg.pfeil:hover{
	fill: #d9ca9c; }
div#herosarrow a:link,
div#herosarrow a:visited{
	color: #88b2d3; background-color: transparent; text-decoration: none; width: 60px; transition: color 0.5s ease-in-out; }
div#herosarrow a:hover,
div#herosarrow a:active{
	color: #d9ca9c; }

div#angebots-div,
div#ueber-div,
div#preise-div,
div#impressum-div{
	box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; width: 100%; }

div#angebot-title,
div#ueber-title,
div#preise-title,
div#impressum-title{
	display: flex; justify-content: center; align-items: center; height: 15vh; padding: 0; width: 100%; }

div#angebot-title h2,
div#ueber-title h2,
div#preise-title h2,
div#impressum-title h2,
div#datenschutz-title h2{
	color: #293133; font-size: min(3.2vw, 60px); font-weight: 700; line-height: 110%; margin: 0; text-align: center; text-transform: uppercase; }
div#event-title h2{
	color: #fff; }
div#ds_inhalt h2{
	color: #293133; font-size: 2rem; font-weight: 700; }

div#angebot-inhalt p:first-child,
div#ueber-inhalt p:first-child,
div#preise-inhalt p:first-child,
div#impressum-inhalt p:first-child{
	margin-top: 0; }

div#angebot-inhalt:last-child,
div#preise-inhalt:last-child,
div#event-inhalt p:last-child,
div#impressum-inhalt p:last-child{
	margin-bottom: 0; }

section#dasangebot{
	box-sizing: border-box; background: linear-gradient(180deg, rgba(224,229,235,1) 0%, rgba(230,236,242,1) 100%); height: auto; min-height: 100vh; margin: 0 auto; padding: 100px 0 0; position: relative; width: 100%;  }
div#angebot-inhalt{
	box-sizing: border-box; display: block; margin: 0 auto; padding: 0 30px 50px; width: 100%; max-width: 950px; }
div#angebot-inhalt p:first-child{
	margin-top: 0; }
div#angebot-inhalt ul{
	list-style-type: none; margin: 0; padding: 0; }
div#angebot-inhalt ul li{
	margin: 10px 0; padding: 0; }
blockquote {
	background: #f9f9f9; border-left: 10px solid #88b2d3; font-weight: 700; margin: 0 10% 3rem; padding: 20px; text-align: center; }
blockquote p {
  display: inline; }

section#dasuebermich{
	background-origin: content-box; background-repeat: no-repeat; background-size: 100%; box-sizing: border-box; background-color: #E6ECF2; height: auto; min-height: 100vh; margin: 0 auto; padding: 100px 0 0; position: relative; width: 100%;  }
div#ueber-div{
	background-color: rgba(243,249,244,0.9); min-height: 100vh; }
div#ueber-upper{
	box-sizing: border-box; display: block; margin: 0 auto; width: 100%; }
div#ueber-text{
	box-sizing: border-box; display: block; min-height: calc(100vh - 100px - 15vh);padding: 0 30px 50px; width: 100%; }
div#ueber-inhalt{
	box-sizing: border-box; display: block; margin: 0 auto; padding: 0; width: 100%; max-width: 950px; }

section#diepreise{
	background-origin: content-box; background-repeat: no-repeat; background-size: 100%; box-sizing: border-box; background-color: #F3F9F4; height: auto; min-height: 100vh; margin: 0 auto; padding: 100px 0 0; position: relative; width: 100%;  }
div#preise-div{
	background-color: rgba(219,227,227,0.9); min-height: 100vh; }
div#preise-upper{
	box-sizing: border-box; display: block; margin: auto 0; width: 100%; }
div#preise-text{
	box-sizing: border-box; display: block; min-height: calc(100vh - 100px - 15vh);padding: 0 30px 50px; width: 100%; }
div#preise-inhalt{
	box-sizing: border-box; display: block; margin: 0 auto; padding: 0; width: 100%; max-width: 950px; }

section#theimpressum{
	background-origin: content-box; background-repeat: no-repeat; background-size: 100%; box-sizing: border-box; background-color: #dbe3e3; height: auto; margin: 0 auto; padding: 100px 0 0; position: relative; width: 100%;  }
div#impressum-div{
	background-color: rgba(243,241,228,0.9); min-height: calc(100vh - 150px); }
div#impressum-upper{
	box-sizing: border-box; display: block; margin: auto 0; width: 100%; }
div#impressum-text{
	box-sizing: border-box; display: block; padding: 0 30px 50px; width: 100%; }
div#impressum-inhalt{
	box-sizing: border-box; display: block; margin: 0 auto; padding: 30px 0 0; width: 100%; max-width: 950px; }
div#impressum-inhalt a:link,
div#impressum-inhalt a:visited{
	background-color: transparent; border-radius: 0; color: #555; font-weight: 400; padding: 0; text-decoration: underline; transition: all 0.5s ease-in-out; }
div#impressum-inhalt a:hover,
div#impressum-inhalt a:active{
	color: #999; }
div#impressum-inhalt a.mastermail{
	text-align: left; }

div#ds_hintergrund{ 
	display: none; z-index: 1003; position: fixed; height:100%; width:100%; top:0px; left:0px; bottom: 0; right: 0; background-color: rgba(255,255,255,1); }
div#datenschutz{ 
	display: none; z-index: 1004; position: fixed; width: calc(100% - 40px); max-width: 950px; top: 20px; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #fff; border: 2px solid #ccc;  border-radius: 5px; padding: 50px 20px 20px 20px; }
div#ds_schliessen{ 
	position: absolute; height: 30px; width: 30px; right: 10px; top: 10px; background: url(../images/close.png) no-repeat 0 0 transparent; float: right; cursor: pointer; border-radius: 5px; }
div#ds_inhalt{ 
	height: 100%; overflow: auto; width: 100%; }

footer{
	background-color: rgba(243,241,228,1); height: 50px; line-height: 50px; }
footer p{
	margin: 0; }

/* SIDR Menu */

.pushmenu-body{
	position: relative; right:0; }
.pushmenu-push-left { 
	right: 230px; }
div#mobile-sider{
	background-color: #fff; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0; position: fixed; text-align: center; top: 0; width: 230px; z-index: 999999; }
.pushmenu-right{
	right: -230px; }
.pushmenu-right.pushmenu-pushed{ 
	right: 0; }
#mobile-sider, 
.pushmenu-body {
  transition: all 0.5s ease; }
div#mobile-sider ul{
	border: none; display: block; margin: 0 15px; padding: 0; }
div#mobile-sider ul li{
	display: block; margin: 0; line-height: 40px; }
div#mobile-sider ul li:after {
	content: ""; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); display: block; height: 1px; width: 100%; margin: 0; }
div#mobile-sider ul li:last-child:after {
	content: ""; background: #fff; border-radius: 100%; display: block; height: 1px; width: 100%; margin: 0; }

/* SIDR Menu fertig */


/*======= RESPONSIVE =======*/ /*100px = 6.25em*/

@media screen and (orientation: landscape){
	@supports (-webkit-touch-callout: none){
		section#dasuebermich,
		section#diepreise,
		section#theimpressum{
			background-position: left top; background-attachment: scroll; }
		div#ueber-div,
		div#preise-div,
		div#impressum-div{
			margin-top: 50vw; }
	}
	@supports not (-webkit-touch-callout: none){
		section#dasuebermich,
		section#diepreise,
		section#theimpressum{
			background-position: left 100px; background-attachment: fixed; }
		div#ueber-div,
		div#preise-div,
		div#impressum-div{
			margin-top: calc(85vh - 100px); }
	}
}

@media screen and (orientation: portrait){
	section#dasuebermich,
	section#diepreise,
	section#theimpressum{
		background-position: left top; background-attachment: scroll; }
	div#ueber-div,
	div#preise-div,
	div#impressum-div{
		margin-top: 50vw; }
}


@media screen and (max-width:75em) {
	div#angebot-title h2,
	div#ueber-title h2,
	div#preise-title h2,
	div#impressum-title h2,
	div#datenschutz-title h2{
		font-size: max(40px, 3.2vw); }
	div#logoschrift p#longversion{
		font-size: 1.5rem; }
	div#thesentence{
		right: 30px; }
}

@media screen and (max-width:68em) {
	div#heroimage{
		background-image: none;  }
	div#logoposition{
		position: absolute; left: 30px; right: auto; top: 20px; bottom: auto; height: auto; width: 100px; padding: 0; transform: translateX(0); }
	div#logoposition img{
		height: auto; width: 100%; }
	div#thecloset{
		display: block; margin: 0; height: auto; padding: 0; width: 100%; position: absolute; left: 0; top: 200px; bottom: 50px; }
	div#thesentence{
		position: absolute; right: 30px; top: 95px; bottom: auto; padding: 0px; transform: translateX(0); }
	div#thesentence p{
		text-align: center; font-size: min(3.3vw, 50px); padding: 0; margin: 0; line-height: min(4.3vw, 70px); }
}

@media screen and (max-width:60em) {
}

@media screen and (max-width:50em) {
	html, body{
		font-size: 1.1em; }
	div#thesentence p{
		font-size: 24px; line-height: 30px; }
	span.subSlo{
		 font-size: 18px}
	blockquote {
		margin: 0 3% 3rem; padding: 20px; text-align: center; }
}

@media screen and (max-width:35em) {
	html, body{
		font-size: 1em; }
	div#angebot-title h2,
	div#ueber-title h2,
	div#preise-title h2,
	div#impressum-title h2,
	div#datenschutz-title h2{
		font-size: 24px; }
	div#thesentence p{
		font-size: 17px; line-height: 22px; }
	span.subSlo{
		 font-size: 15px}
}