@charset "utf-8";

@font-face { font-display: swap; font-family: 'Rauschen'; font-style: normal; font-weight: normal; src: url('../webfonts/Rauschen-BMedium.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Aptos'; font-style: normal; font-weight: normal; src: url('../webfonts/Aptos-Regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Aptos'; font-style: normal; font-weight: 600; src: url('../webfonts/Aptos-SemiBold.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Aptos'; font-style: normal; font-weight: bold; src: url('../webfonts/Aptos-Bold.woff2') format('woff2'); }

html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

img {
	display: block;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

ul {
	padding-left: 1.5em;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background-color: #f9F4E9; 
	color: #003f48; 
	font-family: "Aptos",sans-serif;
	font-weight: 600;
	font-size: 1.6vw;
	line-height: 1.2;
}	 

.hero {
	width: 100%;
	height: 46.2vw;
	background-image: url(../img/home-hero.webp);
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero .headline {
	box-sizing: border-box;
	width: 100%;
	padding-left: 10vw;
	padding-right: 42vw;
	color: #F9F0DF;
	font-size: 2vw;
	font-weight: 700;
}

.hero .headline h1 {	
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 4.5vw;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 0.3em;
}

.textblock {
	text-align: center;
	width: 70vw;
	margin: auto;
	padding-top: 5vw; 
	padding-bottom: 7vw; 
} 

h2 {
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 1.8em;
	line-height: 1.1;
	margin-top: 0.4em;
	margin-bottom: 0.2em;
}

.imgblock {
	width: 85vw;
	height: 30vw;
	margin: auto;
	border-radius: 0.4em;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.imgblock.bg-01B { background-image: url(../img/home-01B.webp); }

.imgblock .text {
	color: #F9F0DF;
	max-width: 50vw;
	text-align: center;
} 

.imgblock .text h2 {
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 1.8em;
	margin-top: 0.4em;
	margin-bottom: 0.6em;
}

.counter {
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 3.6em;
	line-height: 1.1;
	color: #FE6C23;
	text-align: center;
}

.counter .digit {
	display: inline-block;
	position: relative;
	width: 1.5em;
}

.counter .digit .caption {
	position: absolute;
	font-size: 0.25em;
	bottom: -1.3em;
	left: 0;
	width: 100%;
}

.grid-container {
	width: 86.5vw;
	margin: auto;
	font-size: 0;
	margin-top: -6vw;
	margin-bottom: 5vw;
}

.grid-container .entry {
	display: inline-block;
	vertical-align: top;
	width: calc(25% - 1.5vw);
	height: 20vw;
	font-size: 1.6vw;
	margin: 0.75vw;
	perspective: 1000px;
}

.grid-container .entry .inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.grid-container .entry:hover .inner  {
 	transform: rotateY(180deg);
	transition: transform 0.8s;
}


.grid-container .entry .side {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	background-size: cover;
	border-radius: 0.4em;
}

.grid-container .entry .side.back { 
	transform: rotateY(180deg);
}

.grid-container .entry.bg-01 .side { background-image: url(../img/home-02-01.webp); }
.grid-container .entry.bg-02 .side { background-image: url(../img/home-02-02.webp); color: #F9F0DF; }
.grid-container .entry.bg-03 .side { background-image: url(../img/home-02-03.webp); }
.grid-container .entry.bg-04 .side { background-image: url(../img/home-02-04.webp); color: #F9F0DF; }

.grid-container .entry .side .text {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 1.3em;
}

.grid-container .entry .side.back .text { font-size: 0.85em; }

.grid-container .entry .side .text h3 {
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 1.3em;
	line-height: 1.1;
	margin: 0;
}

.zitate { 
	width: 85vw;
	height: 30vw;
	margin: auto;
	margin-top: -5vw; 
	margin-bottom: 1vw;
	position: relative;
	font-size: 0;
	overflow-x: scroll;
	white-space: nowrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: block;
}

.zitate::-webkit-scrollbar { display: none; }

.zitate .entry {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	text-align: left;
	white-space: normal;
	font-size: 1.6vw;
	background-image: url(../img/home-03.webp);
	background-size: cover;
	margin-right: 3vw;
	border-radius: 0.4em;
	overflow: hidden;
	color: #F9F0DF;
}

.zitate .entry:last-child { margin-right: 0; }
.zitate .entry .image { position: absolute; left: 0; top: 0; width: 40%; height: 100%; }
.zitate .entry .image img { height: 100% !important; object-fit: cover; }
.zitate .entry .image .playbutton { position: absolute; left: 40%; top: 39.5%; width: 20%; cursor: pointer; transition: transform 0.3s; }
.zitate .entry .image .playbutton:hover { transform: scale(110%); }
.zitate .entry .image .playbutton:hover circle { fill: #003f48; }

.zitate .entry .text { position: absolute; left: 50%; top: 0; width: 40%; height: 100%; display: flex; justify-content: center; align-items: center; } 

.zitate .entry .text .zitat { 
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 1.3em;
	line-height: 1.25;
	margin-bottom: 1em;
}

.zitate .entry .text .name { 
	font-weight: 700;
	font-size: 1.05em;
	margin-bottom: 0.3em;
}

.zitate-arrows { text-align: right; width: 85vw; margin: auto; }
.zitate-arrows a { display: inline-block; width: 2em; margin-left: 0.2em; cursor: pointer; }
.zitate-arrows a.inactive { opacity: 0.3; }


.videoplayer {
	display: none;
}

.videoplayer .inner {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0,0,0,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
}

.videoplayer video { display: block; width: 100%; height: 100%; object-fit: contain; max-width: 1400px; }

.videoplayer .video-close {
	position: absolute;
	display: inline-block;
	right: 20px;
	top: 20px;
	width: 40px;
	cursor: pointer;
}	

.videoplayer .video-close .line-1 { transform-origin: 70% 42%; transform: rotate(-45deg); }
.videoplayer .video-close .line-2 { transform-origin: 70% 58%; transform: rotate(45deg); }

.colblock { 
	width: 85vw;
	margin: auto;
	margin-top: 8vw; 
	margin-bottom: 7vw;
	position: relative;
	font-size: 0;
}

.colblock .text { 
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	font-size: 1.6vw; 
	padding-right: 7vw;
}

.colblock .image { 
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

.bigimgblock {
	width: 100%;
	height: 41vw;
	background-image: url(../img/home-design.webp);
	background-size: cover;
	background-position: center right;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bigimgblock .text {
	box-sizing: border-box;
	width: 100%;
	padding-left: 52vw;
	padding-right: 10vw;
	color: #F9F0DF;
}

.bigimgblock .text p { max-width: 555px; }

.bigimgblock .text .image {
	margin-top: 4vw;
	width: 26vw;
}

.bigimage { 
	width: 85vw;
	margin: auto;
	margin-top: -5vw; 
	margin-bottom: 5vw;
}

.faq-container { 
	margin-top: -4vw;
	margin-bottom: 10vw;
}

.faq {
	position: relative;
	box-sizing: border-box;
	background-color: #F2E9E4;
	border-radius: 0.4em;
	width: 90vw;
	margin: auto;
	padding: 1.3em 1.5em 0.21em 1.5em;
	margin-bottom: 1em;
}

.faq .frage {
	position: relative;
	font-family: "Rauschen",sans-serif;
	font-weight: normal;
	font-size: 1.15em;
	line-height: 1.25;
	margin-bottom: 1em;
	cursor: pointer;
	padding-right: 8em;
}

.faq .frage .pfeilchen {
	position: absolute;
	right: 0;
	top: calc(50% - 0.2em);
	width: 1em;
	transition: transform 0.3s; 
}

.faq .frage.sel .pfeilchen { transform: rotate(180deg); }

.faq .antwort { display: none; padding-right: 8em; }
.faq .antwort p { margin-top: 0; }

.footer-counter {
	width: 100%;
	height: 36vw;
	margin: auto;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../img/footer-counter.webp);
	color: #f9F4E9;
	text-align: center;
}

.footer-counter h2 { margin: 0; }
.footer-counter .counter { color: #f9F4E9; margin-top: 0.4em; margin-bottom: 0.3em; }

.social-icons {
	width: 90vw;
	margin: auto;
	text-align: right;
	padding-top: 3.5vw;
	padding-bottom: 3.3vw;
	border-bottom: 1px solid #003f48;
}

.social-icons a { display: inline-block; margin-left: 15px; }

.copyright {
	text-align: center;
	font-size: 14px;
	padding-top: 2vw;
	padding-bottom: 5vw;
	width: 90vw;
	margin: auto;
}


@media only screen and (min-width: 1500px) {
	body { font-size: calc(1.6 * 15px); }
	.textblock { width: calc(70 * 15px); padding-top: 75px; padding-bottom: 105px; }
	.imgblock { width: calc(85 * 15px); height: calc(30 * 15px); }
	.grid-container { width: calc(86.5 * 15px); margin-top: calc(-6 * 15px); margin-bottom: calc(5 * 15px); }
	.grid-container .entry { width: calc(25% - 22px); height: calc(20 * 15px); font-size: calc(1.6 * 15px); margin: 11px; }
	.zitate { width: calc(85 * 15px); height: calc(30 * 15px); margin-top: calc(-5 * 15px); margin-bottom: 15px; }
	.zitate .entry { font-size: calc(1.6 * 15px); }
	.zitate-arrows { width: calc(85 * 15px); }
	.colblock { width: calc(85 * 15px); margin-top: calc(8 * 15px); margin-bottom: calc(7 * 15px); }
	.colblock .text { font-size: calc(1.6 * 15px); }
	.bigimgblock .text .image { width: calc(26 * 15px); }
	.bigimage { width: calc(85 * 15px); margin-top: calc(-5 * 15px); margin-bottom: calc(5 * 15px); }
	.faq-container { margin-top: calc(-4 * 15px); margin-bottom: calc(10 * 15px); }
	.faq { width: calc(90 * 15px); }
	.social-icons { width: calc(90 * 15px); padding-top: calc(3.5 * 15px); padding-bottom: calc(3.3 * 15px); }
	.copyright { padding-top: calc(2 * 15px); padding-bottom: calc(5 * 15px); }
}

@media only screen and (max-width: 1000px) {
	body { font-size: 16px; }
	.textblock { width: auto; max-width: 700px; padding: 30px 20px 50px 20px; }
	.imgblock { width: 850px; max-width: 100%; height: 300px; }
	.imgblock .text { max-width: 500px; padding-left: 20px; padding-right: 20px; }
	.grid-container { margin-top: -45px; margin-bottom: 50px; }
	.zitate { width: 850px; max-width: 100%; height: 300px; margin-top: -30px; margin-bottom: 10px; }
	.zitate .entry { font-size: 14px; }
	.zitate .entry .image .playbutton { width: 50px; left: calc(50% - 25px); top: calc(50% - 25px); }
	.zitate-arrows { box-sizing: border-box; width: 890px; max-width: 100%; padding-right: 20px; }
	.colblock .text { font-size: 16px; }
	.bigimgblock { height: auto; }
	.bigimgblock .text { padding-top: 50px; padding-bottom: 50px; padding-left: calc(100% - 400px); padding-right: 40px; }
	.bigimgblock .text .image { width: 260px; }
	.bigimage { margin-top: -30px; margin-bottom: 50px; }
	.faq-container { margin-top: -40px; margin-bottom: 100px; }
	.faq .frage { padding-right: 2em; }
	.faq .antwort { padding-right: 2em; }
	.footer-counter { height: 360px; }
	.social-icons { padding-top: 35px; padding-bottom: 33px; }
	.copyright { padding-top: 20px; padding-bottom: 50px; }
}

@media only screen and (max-width: 740px) {
	.colblock .text { display: block; width: auto; max-width: 700px; padding: 30px 20px 20px 20px; text-align: center; }
	.colblock .image { display: block; width: auto; }
	.zitate .entry { background-image: url(../img/home-03-mobile.webp); background-position: center right; }

@media only screen and (max-width: 600px) {
	.hero { height: 77vw; background-image: url(../img/home-hero-mobile.webp); }
	.hero .headline { font-size: 3.8vw; padding-left: 8vw; padding-right: 8vw; }
	.hero .headline h1 { font-size: 8.5vw; }
	.counter { font-size: 40px; }
	.grid-container .entry { width: calc(50% - 3vw); height: 40vw; font-size: 3.2vw; margin: 1.5vw; }
	.copyright { padding-bottom: 80px; }
	.zitate .entry .text { left: 45%; width: 50%; } 
	.bigimgblock { background-image: url(../img/home-design-mobile.webp); background-position: center left; }
}

@media only screen and (max-width: 500px) {
	.bigimgblock .text { padding-left: 40px; }
	.zitate .entry { font-size: 13px; }
}

@media only screen and (max-width: 380px) {
	.counter { font-size: 32px; }
	.zitate .entry { font-size: 12px; }
}