@charset "utf-8";

@font-face {
    font-family: "Julius Sans One";
    src: url('fonts/juliussansone-regular-webfont.woff2') format('woff2'),
         url('fonts/juliussansone-regular-webfont.woff') format('woff');
 }

@font-face {
    font-family: "Post Grotesk";
    src:url("fonts/PostGrotesk-Light.ttf");
}

body, .container-fluid {
    height:100%;
	width:100%;
}

a:active {
    color: black;
}

a:hover {
    color: black;
}

.backgroundstripe {
	width: 105%;
   	height: 700px;
	background-color: black;
	z-index: -100;
}

.brandwhite {
	max-width: 100%;
 	height: auto;
	top: 40px;
	left: 80px;
	position: relative;
	animation-name: meinreinanim;
	animation-duration: 0.5s;
}

.h2 {
	color: white;
	position: relative;
	z-index: 9;
	font-family: "Montserrat", sans-serif;
	animation-name: haushaltanim;
	animation-duration: 0.5s;
}

.titleContBlack {
    margin-left: 5%;
	top: 200px;
	width: 30%;
	left: 110px;
	font-family: "Julius Sans One", sans-serif;
	font-weight: bold;
}

.textbox {
	display: none;
	width: 57%;
	top: 250px;
	left: 200px;
	position: relative;
	color: white;
	font-family: 'Post Grotesk', sans-serif;
	font-size: 2vh;
	animation-name: haushaltanim;
	animation-duration: 0.5s;
	font-style: normal;
	font-weight: 400;
}

#plzCheck {
    display: block;
    z-index: 100;
    text-align: center;
}

#PLZinput {
    width: 130px;
    height: 50px;
    margin-top: 6%;
    background-color: black;
    border: 2px solid white;
    color: white;
    font-size: 32px;
    text-align: center;
}

#plzFalse {
	display: none;
	text-align: center;
}

input, select, textarea{
    color: white;
	background-color: black;
}

.h2Title {
	position: relative;
	z-index: 20;
	font-family: 'Julius Sans One', sans-serif;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
}

.price_textblock {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 5% 200px 1% 4%;
	
}

.price_textblock_title {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 7vh;
	padding-left: 8%;
}

.price_container {
	position: relative;
	padding-top: 5vh;
	
}

.price_container2 {
    position: relative;
}

.kontakt_container {
	position: relative;
	padding-top: 1vh;
	
}

.h2price_small {
	z-index:9;
	font-family: "Post Grotesk", sans-serif;
	font-size: 2vh;
	text-align: left;
	font-weight: 300;
	}

.price_textblock_left {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3vh;
	padding-left: 8%;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	word-break: normal;
	
}

.price_textblock_bot {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 8%;
	padding-right: 5%;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	word-break: normal;
	position: absolute;
	padding-bottom: 6%;
	padding-top: 0%;
}

.img_us {
	width: 80%;
}

.price_textblock_us {
	width: 100%;
	padding-left: 8%;
	padding-right: 5%;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	word-break: normal;
	height: 100%;
	padding-bottom: 6%;
	padding-top: 0%;
}

.text_container {
	width: 70%;
	
}


.price_textblock_title_flex {
	width: max-content;
	padding-top: 7vh;
	padding-left: 8%;
	
}



.flexline {
	width: 0%;
	height: 2px;
	background: #D3D3D3;
	margin-top: 30px;
	margin-bottom: 100px;
	transition: width 2s ease-out;
	
	
}

.price_img {
	overflow: hidden;
	width: 35vw;
	margin-top: 5%;
	left: 6vh;
	position: relative;
	}

#imghover	{
	width: 100%;
    }
	
#pricetextphone {
	display:none;
	border-width: 2px;
	border-style: solid;
	padding: 10px;
    margin: auto;
}

#pricetextphone2 {
	display:none;
	border-width: 2px;
	border-style: solid;
	padding: 10px;
}

.h2price_logo {
	z-index: 100;
	font-family: "Montserrat", sans-serif;
	font-size: 2vw;
}
	
.absolute {
	position: absolute;
	color: rgba(255,255,255,1.00);
	bottom: 14%;
	text-align: center;
	width: 70%;
	left: 15%;
	pointer-events: none;
}

.line   {
	position: absolute;
	color: rgba(255,255,255,1.00);
	width: 70%;
	bottom: 11%;
	height: 2px;
	margin-top: 19px;
	margin-right:auto;
	margin-left: auto;
	
	background-color: rgba(255,255,255,1.00);
	
	left: 15%;
	pointer-events:none;
}

.pricebox 	{
	position: absolute;
	width: 70%;
	bottom: 80%;
	height: 14%;
	left: 15%;
	border: 2px solid rgba(255,255,255,0.00);
	border-bottom: 0px;
	pointer-events:none;
	}
	

.h2price_logo_small {
	z-index: 100;
	width: 70%;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	text-align: center;
	padding-left: 30%;
	font-weight: 300;
	}

.absolute_small {
	position: absolute;
	color: rgba(255,255,255,1.00);
	bottom: 5%;
	pointer-events:none;
}

.row_pos {
	display: inline;

}
.img_pos {
	padding-top: 11%;
}

.h2price {
	z-index: 100;
	font-family: "Post Grotesk", sans-serif;
	font-size: 3vh;
	text-align: left;
	}

#imghover2 {
	width: 100%;
	}

.footer {
	display: table;
	width: auto;
	margin: 0 auto;
	padding-top: 120px;
	padding-bottom: 20px;
}

#footerImg {
	max-width: 100%;
}

[aos="fade"] {
	opacity: 0;
	transition-property: opacity;
}

[aos"fade"].aos-animate {
	opacity: 1;
}

#pricetextphone {
	text-decoration: none;
}

#pricetextphone2 {
	text-decoration: none;
}

#masked {
	
	filter: blur(1em);
}

a {}

.mr {
	margin-top: 19px;
	margin-left: 40px;
	animation-name: frost;
	animation-duration: 0.5s;
}
	
@keyframes frost {
	from {
		filter: blur(1em);
		animation-timing-function: ease-out;
	}
	
	to {
		filter: blur(0em);
		animation-timing-function: ease-out;
	}
}

   
/* 16:9 iPadpro Portrait */
@media only screen and (max-width: 1024px) and (orientation: portrait){
	.brandwhite {width: 40%; left: 5%;}
	.titleContBlack {top: 100px; width: 100%; left: 0px; text-align:center;}
	.price_textblock_title {padding-top: 4vh;}
	.textbox {width: 90%; top: 180px; left: 5%; font-size: 2.1vw;}
	.price_textblock {padding:60px 0 0 0;}
	.price_container {padding-top: 3vh;}
	.h2price {font-size: 2.1vw;}
	.price_textblock_left {padding-top: 0px;}
	.h2price_small {font-size: 2.1vw;}
	.price_img {width: 105%; padding-top: 200px; margin-bottom: 40px;left: 0;}
	.h2price_logo {font-size: 4vw;}
	.line {display: none;}
	.pricebox {display: none;}
	#pricetextphone { display:block;}
	#pricetextphone2 { display:block;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	.absolute_small {bottom: 8%;}
	.h2price_logo_small {font-size: 2.5vw;}
	#imghover {filter: brightness(80%);}
	#imghover2 {margin-top: 100px; filter: brightness(80%);}
	.footer {padding-top: 60px;}
	#footerImg {transform: scale(0.7);}
	#phoneL {position:fixed;}
	#phoneMIcon {transform: scale(0.8);}
	.img_us {width: 100%;}
	.price_textblock_title_flex {padding-left: 0%; margin-left: auto; margin-right: auto; font-size: 4.3vw; font-weight: bold;}
	.flexline {margin-top: 20px; margin-bottom: 50px;}
	.text_container {width: 95%;}
    
}

/* 16:9 Tabs Portrait */
@media only screen and (max-width: 800px) and (orientation: portrait){
    html, body {overflow-x: hidden;}
    body {position: relative;}
	.textbox { font-size: 2.5vw;}
	.h2price {font-size: 2.5vw;}
	.h2price_small {font-size: 2.5vw;}
	#PLZinput {width: 150px; height: 60px; font-size: 31px; margin-top: 15%;}
}

@media only screen and (max-width: 480px) and (orientation: portrait){
    html, body {overflow-x: hidden;}
    body {position: relative;}
    .price_textblock_left {padding-top: 5%;}
    .titleContBlack {margin-left: 0px;}
	.brandwhite {width: 80%; left: 10%;}
	.textbox {font-size: 4vw; margin: auto; left: 2%;}
    .price_container {margin-bottom: 160px;}
    .price_container2 {margin-bottom: 160px;}
	.price_textblock {padding:40px 0 0 0;}
	.h2price {font-size: 20px;}
	.h2price_small {font-size: 16px;}
	.h2price_logo {font-size: 6vw; }
	.h2price_logo_small {font-size: 4vw; padding-left: 25%;}
    .absolute {left: 13%;}
}



@media only screen and (max-width: 1280px) and (max-height: 800px) and (orientation: landscape) {
	.textbox {font-size:2.5vh;}
	.h2price_small {font-size: 2.5vh;}
	.price_img {width:70%;}
	.line {display: none;}
	.pricebox {display: none;}
	#pricetextphone { display:block;}
	#pricetextphone2 { display:block;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#PLZinput {width: 100px; height: 40px; font-size: 22px;}
}



@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {
	.textbox {font-size:1.8vh;}
	.h2price {font-size: 2.5vh;}
	.price_img {width:80%;}
	.line {display: none;}
	.pricebox {display: none;}
	#pricetextphone { display:block;}
	#pricetextphone2 { display:block;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
}

@media only screen and (min-width: 768px) and (max-aspect-ratio: 4/3) and (orientation: landscape) {
	.textbox {font-size:2vh;}
	.h2price_small {font-size: 2vh;}
}

@media only screen and (max-width: 812px) and (orientation: landscape) {
	.brandwhite {width: 40%; left: -70px; top: 20px; display:table; margin: 0 auto;}
	.titleContBlack {top: 70px; font-size: 3.5vw; left: 70px;}
	.textbox {width: 70%; top: 100px; left: 50px; font-size: 2.2vw;}
	.backgroundstripe {height: 500px;}
	.h2price {font-size: 3vw;}
	.h2price_small {font-size: 2.2vw;}
	.line {display: none;}
	.pricebox {display: none;}
	#pricetextphone { display:block;}
	#pricetextphone2 { display:block;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	.price_img {width: 80%; height:auto; padding-top: 150px; margin-bottom: 40px;left: 0%;}
	.price_textblock_title {width: 80%; padding-left: 0; margin-left:8%;}
	.price_textblock_bot {width: 80%;}
	#footerImg {transform: scale(0.7);}
	.footer {padding-top: 60px;}
	.h2price_logo {font-size: 2vw;}
	.h2price_logo_small {font-size: 1.7vw;}
	#imghover2 {margin-top: 80px;}

}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
	.brandwhite {width: 100%; left: 10%;}
	.titleContBlack {top: 180px; margin-left: 0%;}
	.textbox {width: 85%; top: 300px; left: 10%; font-size: 2vw;}
	.price_img {padding-top: 40px; margin-bottom: 0px;}
	.price_textblock_title {padding-top: 170px;}
	.h2price_logo {font-size: 2vh;}
	.h2price_logo_small {font-size: 1.7vw;}
	.line {display: none;}
	.pricebox {display: none;}
	#pricetextphone { display:block;}
	#pricetextphone2 { display:block;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
	#pricetexthover {display:none;}
	#pricetexthover2 {display:none;}
    
}