/* CSS Reset */

* {
  margin: 0;
  box-sizing: border-box;
}
html,
body{
	background: white;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto';
  font-weight: 400;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
  background: none;
  border: none;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}


/* Helper */

:root {
	--font-copy-color: #152E43;
	--passive-grey-color: #A6BAC7;
  --schimmel-1-color: #A1A1A0;
  --schimmel-2-color: #CBCFD1;
  --boden-1-color: #0B7E70;
  --boden-2-color: #74B2A9;
  --asbest-1-color: #ED6E4D;
  --asbest-2-color: #F2A696;
  --wasser-1-color: #25A6DC;
  --wasser-2-color: #82C9E9;
  --allgemein-1-color: #46748D;
  --allgemein-2-color: #A6BBC7;
  --allgemein-3-color: #51A4D7;
  --link-color: #1468AF;
}

.flex{
	display: flex;
}
.flex.center{
	justify-content: center;
	align-items: center;
}
.center{
	text-align: center;
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}

/* Main */

@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Thin.ttf);
  font-weight: 100;
}
@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Light.ttf);
  font-weight: 300;
}
@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: Roboto;
  src: url(../misc/font/Roboto/Roboto-Black.ttf);
  font-weight: 900;
}

body:has(.show-menu),
html:has(.show-menu){
	overflow-y: hidden;
}

.container{
	max-width: 880px;
	width: 100%;
	min-height: 560px;
	position: relative;
	overflow-x: hidden;
}

.nav{
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: space-between;
}
.nav-back{
	background-image: url('../img/nav-back.png');
	height: 100%;
	width: 60px;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	background-size: 35%;
}
.nav-home{
	height: 100%;
	width: 60px;
}
.nav-home img{
	width: 30px;
}
.nav-head h1{
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	position: relative;
}
.nav-head::before{
	left: -45px;
	width: 35px;
	height: 35px;
	top: calc(50% - 17px);
	position: absolute;
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
}
.ueber .nav,
.so-funktionierts .nav,
.faq .nav,
.produktfinder-start .nav{
	background-color: var(--font-copy-color);
}
.ueber .nav-head::before,
.so-funktionierts .nav-head::before,
.faq .nav-head::before,
.produktfinder-start .nav-head::before{
	background-image: url('../img/icon-allgemein.png');
}
.schimmel .nav{
	background-color: var(--schimmel-1-color);
}
.schimmel .nav-head::before{
	background-image: url('../img/icon-schimmel.png');
}
.wasser .nav,
.legionellen .nav{
	background-color: var(--wasser-1-color);
}
.wasser .nav-head::before,
.legionellen .nav-head::before{
	background-image: url('../img/icon-wasser.png');
}
.boden .nav{
	background-color: var(--boden-1-color);
}
.boden .nav-head::before{
	background-image: url('../img/icon-boden.png');
}
.asbest .nav{
	background-color: var(--asbest-1-color);
}
.asbest .nav-head::before{
	background-image: url('../img/icon-asbest.png');
}
.allgemein .nav,
.testergebnisse .nav{
	background-color: var(--allgemein-1-color);
}
.allgemein .nav-head::before,
.testergebnisse .nav-head::before{
	background-image: url('../img/icon-allgemein.png');
}


.main-cont{
	width: 100%;
	padding: 15px;
}
.ueber .main-cont,
.so-funktionierts .main-cont,
.faq .main-cont{
	color: var(--font-copy-color);
	font-size: 16px;
	padding-top: 30px;
}

.burger-menu {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    right: 50px;
    top: calc(50% - 27px);
}

.burger-button {
    cursor: pointer;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.line {
    width: 30px;
    height: 5px;
    background-color: white;
    margin-bottom: 5px;
    border-radius: 5px;
}

.menu {
  position: absolute;
  top: 80px;
  right: -120vw; /* Start offscreen */
  width: 100vw;
  height: calc(100% - 80px);
  background-color: #fff;
  transition: right 0.5s ease;
  -webkit-box-shadow: 0px 10px 10px 5px rgba(0,0,0,0.2);
  box-shadow: 0px 10px 10px 5px rgba(0,0,0,0.2);
  padding: 30px;
  z-index: 100;
}

.menu-head{
	font-size: 38px;
	font-weight: 700;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 50px;
}

.menu ul li,
.footer a {
    margin-bottom: 30px;
    position: relative;
}
.menu ul li::before,
.footer a::before {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    top: calc(50% - 15px);
    left: -50px;
    background-position: center center;
}
.menu-li-faq::before{
	background-image: url('../img/icon-faq.png');
}
.menu-li-testergebnisse::before{
	background-image: url('../img/icon-testergebnisse.png');
}
.menu-li-produktfinder::before {
	background-image: url('../img/icon-produktfinder.png');
}
.menu-li-ueber-ivario::before {
	background-image: url('../img/icon-ueber-ivario.png');
}


.menu ul li a {
    text-decoration: none;
    color: var(--font-copy-color);
    font-size: 24px;
    font-weight: 700;
}

.show-menu {
    right: 0 !important;
}

@media (min-width: 600px){
	.menu {
	  right: -450px; /* Start offscreen */
	  width: 400px;
	}
}




@media (min-width: 839px){
	.container{
		max-height: 560px;
		overflow-x: hidden;
	}
	.nav{
		height: 80px;
	}
	.nav-head h1{
		font-size: 30px;
	}
	.nav-back{
		background-size: auto;
	}
	.nav-head::before{
    left: -80px;
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
	}
	.nav-home,
	.nav-back{
		width: 100px;
	}
	.nav-home img{
		width: 40px;
	}

	.burger-menu {
		right: 90px;
		top: calc(50% - 25px);
	}
	.line{
		width: 40px;
		margin-bottom: 7px;
	}
	.menu {
	  top: 80px;
	  height: calc(100% - 80px);
	}
}


/* Home */


.home .nav{
	background-color: var(--font-copy-color);
}
.home .nav-home,
.home .nav-back,
.home .nav h1{
	display: none;
}
.home .burger-menu {
    right: 20px;
}
.home,
.home p{
	color: var(--font-copy-color);
}
.home h1,
.home h2,
.home h3{
	color: var(--allgemein-3-color);
}
.home h1{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 10px auto;
}
.home h2{
	font-size: 32px;
	font-weight: 700;
	margin: 20px 0
}
.home h3{
	font-size: 24px;
	margin: 50px auto 15px;
}
.home-haus-mobile{
	width: calc(100% + 30px);
	margin: 15px 0 0 -15px;
	max-width: none;
}
.home .burger-button .line{
	background-color: #fff;
}
.btn{
	background-color: var(--allgemein-3-color);
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
	font-size: 20px;
	padding: 15px;
	display: inline-block;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
	text-align: center;
	flex-grow: 1;
}

.btn-inverted{
	color: var(--allgemein-3-color);
	background-color: #fff;
	border: 1px solid var(--allgemein-3-color);
}
.home .btns{
	width: 80%;
	margin: auto;
}
.home .btns .btn-ui,
.home .btns .btn-sf{
	display: none;
}
.btns-haus{
	display: none;
}
.home .sof-cont-img-box{
	width: 50vw;
	height: 50vw;
}
.home .sof-cont-inner{
	text-align: center;
}
.home .btn-ui{
	margin: 20px auto;
	display: block;
	width: 80%;
}
@media (min-width: 600px){
	.home .menu {
	    top: 0;
	    height: 100%;
	    padding-top: 100px;
	}
	.home:has(.show-menu) .burger-button .line{
		background-color: var(--font-copy-color);
	}
	.home-haus-mobile{
		display: none;
	}
	.home h1{
		max-width: 40%;
		font-size: 36px;
		margin-left: 0;
	}
	.home h2{
		max-width: 40%;
		font-size: 24px;
		margin-bottom: 50px;
	}
	.home .btns{
		width: 30%;
		margin-left: 0;
		flex-direction: column;
		gap: 20px;
	}
	.home .btns a{
		font-size: 18px;
	}
	.home .btns .btn-ui,
	.home .btns .btn-sf{
		display: inline-block;
	}
	.home .btn-ui{
		width: 100%;
		margin: 0;
	}
	.sf-home{
		display: none;
	}
	.home h3,
	.home p{
		display: none;
	}
	.home .btn-ui{
		display: none;
	}
	.home .nav{
		background: none;
		z-index: 200;
	}
	.haus-grafik{
		width: 65vw;
		height: 65vw;
		background-image: url('../img/haus.jpg');
		position: absolute;
		top: 0;
		right: 0;
		background-size: contain;
		background-position: top right;
		background-repeat: no-repeat;
		z-index: 0;
	}
	.home .main-cont{
		margin-top: -80px;
		padding-left: 30px;
	}
	.haus-grafik{
		max-width: 560px;
		max-height: 560px;
	}
	.btns-haus{
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-haus{
		background-color: #F1AF47;
		padding: 4px 8px;
		border-radius: 20px;
		text-decoration: none;
		display: block;
		margin-bottom: 10px;
		position: absolute;
		color: #fff;
		text-decoration: none;
		box-shadow: 0 0 0 0 rgba(241, 175, 71, 1);
		animation: pulse-orange 2s infinite;
	}

	@keyframes pulse-orange {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(241, 175, 71, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(241, 175, 71, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(241, 175, 71, 0);
	}
}
	.btn-haus-span{
		background-color: #DEB650;
		padding: 4px;
		border-radius: 15px;
		font-weight: 700;
		color: #fff;
		font-size: 18px;
		display: inline-block;
		width: 100%;
	}
	.btn-haus-i{
		background-color: #fff;
		color: #DEB650;
		font-weight: 700;
		font-size: 16px;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		font-size: 20px;
		width: 22px;
		height: 22px;
		line-height: 22px;
		margin-right: 8px;
	}
	#btn-asbest{
		top: 32%;
    right: 15%;
	}
	#btn-legionellen{
		top: 54%;
    right: 62%;
	}
	#btn-trinkwasser{
    top: 62%;
    right: 37%;
	}
	#btn-boden{
    top: 76%;
    right: 80%;
	}
	#btn-schimmel{
		top: 75%;
    right: 10%;
	}
	.home .popup{
		max-width: 680px;
	}
	.home .popup-head,
	.home .popup-copy{
		font-size: 18px;
		padding: 30px;
	}
	.home .popup-head{
		color: var(--font-color-copy);
		font-weight: 700;
		padding-bottom: 0;
	}
	.home .popup-btns{
		display: flex;
		justify-content: end;
		gap: 30px;
		padding: 30px;
	}
	.home .popup .close{
		color: var(--font-color-copy);
		top: 5px;
		right: 15px;
	}
}

@media (min-width: 839px){
	.home h1{
		font-size: 45px;
	}
	.home h2{
		font-size: 30px;
		margin-bottom: 40px;
	}
	.home .btns{
		width: 260px;
		gap: 40px;
	}

}


/* Über IVARIO */


.ueber-1-2,
.ueber-2-2{
	width: 80%;
	height: 200px;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	max-width: 400px;
}
.ueber-1-2{
	background-image: url('../img/logo-ivario.png');
}
.ueber-2-2{
	background-image: url('../img/logo-gba.png');
}
.btns-ueber{
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
}
@media (min-width: 839px){
	.ueber .main-cont{
		padding: 60px 40px;
		font-size: 16px;
	}
	.ueber-1,
	.ueber-2{
		display: flex;
		gap: 100px;
		margin-bottom: 20px;
	}
	.btns-ueber{
		flex-direction: row;
		justify-content: end;
		margin-top: 50px;
		gap: 30px;
	}
	.btn-ueber{
		max-width: 300px;
	}
	.ueber-1-2,
	.ueber-2-2{
		width: 100%;
		height: 100px;
		max-width: 400px;
	}
}


/* So Funktioniert's */

.so-funktionierts .main-cont{
	padding: 20px;
}
.sof-head{
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
}
.sof-cont-img-box{
	background: var(--font-copy-color);
	width: 60vw;
	height: 60vw;
	max-width: 250px;
	max-height: 250px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}
.sof-cont-img-box img{
	width: 35%;
}
.sof-cont-inner{
	margin-bottom: 30px;
}
@media (min-width: 839px){
	.so-funktionierts .main-cont{
		padding: 20px 40px;
	}
	.sof-head{
		margin-bottom: 10px;
		font-size: 20px;
	}
	.sof-cont-outer{
		display: flex;
		gap: 20px;
	}
	.sof-cont-inner{
		flex: 1 1 0px;
		text-align: center;
		position: relative;
    padding: 0 10px;
    font-size: 14px;
	}
	.sof-cont-inner::after{
		content: '';
		position: absolute;
		width: 2px;
		height: calc(100% - 40px);
		top: 20px;
		right: -10px;
		background: #E5E8E9;
	}
	.sof-cont-outer .sof-cont-inner:nth-last-child(1)::after{
		display: none;
	}
	.so-funktionierts .btns-ueber{
		margin-top: 0px;
	}
	.sof-cont-img-box{
		max-width: 170px;
		max-height: 170px;
		margin: 10px auto;
	}
}



/* Produktfinder */

.produktfinder .main-cont{
	text-align: center;
}
.pfs-cont{
	padding: 30px 15px;
}
.btns-pfs{
	padding: 0 15px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.btn-pfs{
	background: var(--font-copy-color);
	position: relative;
}
.btn-pfs::after{
	display: block;
	position: absolute;
	content: '';
	width: 40px;
	height: 40px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	top: calc(50% - 20px);
	left: 20px;
}
#btn-pfs-wasser::after{
	background-image: url('../img/icon-faq-wasser.png');
}
#btn-pfs-schimmel::after{
	background-image: url('../img/icon-faq-schimmel.png');
}
#btn-pfs-asbest::after{
	background-image: url('../img/icon-faq-asbest.png');
}
#btn-pfs-boden::after{
	background-image: url('../img/icon-faq-boden.png');
}
@media (min-width: 600px){
	.pfs-cont{
		padding: 10px 60px;
		margin-bottom: 30px;
	}
	.btns-pfs{
		padding: 10px 60px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 50px;
		width: 100%;
    margin: auto;
	}
	.btn-pfs{
		min-width: 300px;
		flex: 1 1 0px;
	}
}
@media (min-width: 839px){
	.pfs-cont{
		font-size: 22px;
		margin-bottom: 30px;
	}

}

.pf-counter-top,
.pf-counter-bottom,
.pf-question{
	color: var(--font-copy-color);
}
.pf-counter-top{
	font-size: 20px;
	text-align: center;
	margin: 20px 0;
}
.pf-question{
	font-size: 26px;
	font-weight: 500;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	max-width: 800px;
  margin: 20px auto;
}
.pf-answers-container{
	display: inline-block;
	max-width: calc(100% - 100px);
	min-width: 80%;
}
.pf-answers{
	display: flex;
	justify-content: space-between;
	align-items: normal;
	flex-direction: column;
	margin: auto;
	width: 100%;
}
.pf_dn_cnt{
	margin: 10px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;

}
.pf-answer {
  margin: 10px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
}
.pf-answer-info {
  display: flex;
  align-items: center;
  text-decoration: none;
	position: absolute;
	right: -50px;
	top: 10px;
}
.pf-info-icon-outer{
  margin-right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.pf-info-icon-inner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.pf-info-text{
	display: none;
}
.pf-info-text::after{
	position: absolute;
	bottom: 2px;
	left: -1px;
	height: 1px;
	width: calc(100% + 2px);
	display: block;
	content: '';
}
.pf-answer-btn{
	text-decoration: none;
	font-size: 18px;
	font-weight: 800;
	background: #F6F4F4;
	padding: 8px 20px;
	border-radius: 8px;
	border: 3px solid;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
}
.asbest .pf-info-text,
.asbest .pf-answer-btn{
	color: var(--asbest-1-color);
}
.wasser .pf-info-text,
.wasser .pf-answer-btn,
.legionellen .pf-info-text,
.legionellen .pf-answer-btn{
	color: var(--wasser-1-color);
}
.boden .pf-info-text,
.boden .pf-answer-btn{
	color: var(--boden-1-color);
}
.schimmel .pf-info-text,
.schimmel .pf-answer-btn{
	color: var(--schimmel-1-color);
}
.asbest .pf-answer-btn{
	border-color: var(--asbest-1-color);
}
.wasser .pf-answer-btn,
.legionellen .pf-answer-btn{
	border-color: var(--wasser-1-color);
}
.boden .pf-answer-btn{
	border-color: var(--boden-1-color);
}
.schimmel .pf-answer-btn{
	border-color: var(--schimmel-1-color);
}
.asbest .pf-info-icon-outer,
.asbest .pf-info-icon-inner,
.asbest .pf-info-text::after{
    background-color: var(--asbest-1-color);
}
.wasser .pf-info-icon-outer,
.wasser .pf-info-icon-inner,
.wasser .pf-info-text::after,
.legionellen .pf-info-icon-outer,
.legionellen .pf-info-icon-inner,
.legionellen .pf-info-text::after{
    background-color: var(--wasser-1-color);
}
.boden .pf-info-icon-outer,
.boden .pf-info-icon-inner,
.boden .pf-info-text::after{
    background-color: var(--boden-1-color);
}
.schimmel .pf-info-icon-outer,
.schimmel .pf-info-icon-inner,
.schimmel .pf-info-text::after{
    background-color: var(--schimmel-1-color);
}
.pf-counter-bottom{
	font-size: 16px;
	text-align: right;
	margin: -10px 10px 0 0;
}

.pf-animated-progress {
  width: calc(100% - 20px);
  height: 10px;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid var(--font-copy-color);
  overflow: hidden;
  position: relative;
}

.pf-animated-progress > span {
  height: 100%;
  display: block;
  width: 0;
  color: var(--font-copy-color);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
}

.asbest .pf-animated-progress > span{
	background-color: var(--asbest-1-color);
}
.wasser .pf-animated-progress > span,
.legionellen .pf-animated-progress > span{
	background-color: var(--wasser-1-color);
}
.boden .pf-animated-progress > span{
	background-color: var(--boden-1-color);
}
.schimmel .pf-animated-progress > span{
	background-color: var(--schimmel-1-color);
}

@media (min-width: 839px){
	.pf-counter-top{
		font-size: 24px;
		margin: 20px 0;
	}
	.pf-question{
		font-size: 30px;
		min-height: 150px;
		padding: 0;
	}
	.pf-answers{
		justify-content: center;
		align-items: end;
		flex-direction: row;
		margin: 0;
		width: auto;
	}

	.pf-answer {
	  margin: 0;
	}
	.pf-answer-btn{
		font-size: 20px;
		padding: 10px;
	}
	.pf-answer-info {
	  margin-bottom: 10px;
		position: relative;
		right: 0;
		top: 0;
	}
	.pf-info-icon-outer{
	  width: 30px;
	  height: 30px;
	}
	.pf-info-icon-inner{
	  width: 26px;
	  height: 26px;
	  font-size: 20px;
	}
	.pf-info-text{
		position: relative;
		font-size: 20px;
		font-weight: 500;
		display: inline;
	}
	.pf-counter-bottom{
		font-size: 20px;
		margin: 10px 10px 0 0;
	}
}

/* Produktfinder-Zwischenseite */

.pf-zs-copy{
	font-size: 18px;
	padding: 20px 15px;
}
.pf-neustart{
	margin-top: 10px;
	color: var(--link-color);
	text-decoration: underline;
	display: block;
}
@media (min-width: 839px){
	.pf-zs-copy{
		font-size: 20px;
		padding: 40px;
	}
	.pf-neustart{
		text-align: left;
		margin: 30px auto auto 50px;
		font-size: 16px;
	}
	.zs .pf-answer{
		max-width: 400px;
		margin: 30px auto;
	}

}


/* Empfehlungsseiten */



.empfehlung .cont-prehead{
	color: #525354;
	font-size: 18px;
}
.empfehlung .cont-head{
	color: var(--font-copy-color);
	font-size: 24px;
	font-weight: 600;
}
.empf-cont{
	flex-direction: column-reverse;
	align-items: center;
}
.empf-cont-l{
	color: var(--font-copy-color);
}
.empf-cont-l ul{
	margin: 20px 0;
}
.empf-cont-r{
	width: 100%;
	max-width: 400px;
	height: 100vw;
	max-height: 450px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.empf-cont-r .pf-answer-info{
	right: auto;
	top: auto;
	left: 0;
	bottom: 15px;
}
.empf-cont-r .pf-info-text{
	display: inline;
	position: relative;
}
.empf-xs{
	font-weight: 700;
}
.empf-xs a{
	color: inherit;
	text-decoration: underline;
}
.produkt-asbest-material1 .empf-cont-r{
	background-image: url('../img/produkt-asbest-material1.png');
}
.produkt-asbest-material2 .empf-cont-r{
	background-image: url('../img/produkt-asbest-material2.png');
}
.produkt-asbest-hausstaub .empf-cont-r{
	background-image: url('../img/produkt-asbest-hausstaub.png');
}
.produkt-schimmel-express .empf-cont-r{
	background-image: url('../img/produkt-schimmel-express.png');
}
.produkt-schimmel-komplett .empf-cont-r{
	background-image: url('../img/produkt-schimmel-komplett.png');
}
.produkt-schimmel-raumluft .empf-cont-r{
	background-image: url('../img/produkt-schimmel-raumluft.png');
}
.produkt-boden-2in1 .empf-cont-r{
	background-image: url('../img/produkt-boden-2in1.png');
}
.produkt-boden-brunnen .empf-cont-r{
	background-image: url('../img/produkt-boden-brunnen.png');
}
.produkt-boden-naehrstoffe .empf-cont-r{
	background-image: url('../img/produkt-boden-naehrstoffe.png');
}
.produkt-boden-schadstoffe .empf-cont-r{
	background-image: url('../img/produkt-boden-schadstoffe.png');
}
.produkt-wasser-baby .empf-cont-r{
	background-image: url('../img/produkt-wasser-baby.png');
}
.produkt-wasser-brunnen .empf-cont-r{
	background-image: url('../img/produkt-wasser-brunnen.png');
}
.produkt-wasser-kombi .empf-cont-r{
	background-image: url('../img/produkt-wasser-kombi.png');
}
.produkt-wasser-legionellen .empf-cont-r{
	background-image: url('../img/produkt-wasser-legionellen.png');
}
.produkt-wasser-mini .empf-cont-r{
	background-image: url('../img/produkt-wasser-mini.png');
}
.produkt-wasser-plus .empf-cont-r{
	background-image: url('../img/produkt-wasser-plus.png');
}
.produkt-wasser-premium .empf-cont-r{
	background-image: url('../img/produkt-wasser-premium.png');
}
.footer{
	display: none;
}
.empf-btn{
	padding: 10px 15px;
	font-size: 16px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.empf-cont-r a:not(.pf-answer-info){
	display: block;
	width: 100%;
	height: 100%;
}
.asbest .empf-btn{
	background-color: var(--asbest-1-color);
}
.wasser .empf-btn{
	background-color: var(--wasser-1-color);
}
.boden .empf-btn{
	background-color: var(--boden-1-color);
}
.schimmel .empf-btn{
	background-color: var(--schimmel-1-color);
}



@media (min-width: 839px){
	.empfehlung .main-cont{
		padding: 20px 40px;
	}
	.empfehlung .cont-prehead{
		font-size: 22px;
	}
	.empfehlung .cont-head{
		font-size: 30px;
	}
	.empf-cont{
		flex-direction: row;
		justify-content: space-between;
	}
	.empf-cont-l{
		font-size: 16px;
		width: 60%;
	}
	.empf-cont-r{
		width: 40%;
		max-height: 260px;
	}
	.empfehlung .pf-answer-info{
		position: absolute;
	}
	.empf-cont-r .pf-answer-info {
    left: 80px;
    bottom: -40px;
	}
	.pf-neustart{
		margin: 0;
	}
	.footer{
		display: flex;
		justify-content: space-between;
		text-decoration: none;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 20;
		padding: 20px 50px;
		align-items: center;
    box-shadow: 0 -4px 7px rgba(0,0,0,0.14);
	}
	.footer a{
		padding-left: 50px;
		font-size: 20px;
		color: var(--font-copy-color);
		text-decoration: none;
		margin: 0;
	}
	.footer a::before{
		left: 0;
		width: 35px;
		height: 35px;
	}
	.empf-btn{
		font-size: 18px;
		margin-bottom: 20px;
	}
}

/* PopUps */


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 100ms;
  visibility: hidden;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay-close{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  background: #fff;
  border-radius: 5px;
  width: calc(100% - 50px);
  max-width: 600px;
  position: relative;
  text-align: left;
}

.popup-head {
  margin-top: 0;
  color: #fff;
  padding: 5px 10px;
}
.asbest .popup-head {
  background-color: var(--asbest-1-color);
}
.wasser .popup-head ,
.legionellen .popup-head {
  background-color: var(--wasser-1-color);
}
.boden .popup-head {
  background-color: var(--boden-1-color);
}
.schimmel .popup-head {
  background-color: var(--schimmel-1-color);
}
.popup .close {
	position: absolute;
	top: -10px;
	right: 20px;
	transition: all 200ms;
	font-size: 40px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}
.popup .close:hover {
  color: #06D85F;
}
.popup-copy {
  max-height: 30%;
  overflow: auto;
  padding:  40px 30px;
}




/* FAQ */


.faq-cont{
	font-size: 18px;
	margin-bottom: 30px;
}
.btns-faq{
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.btn-faq{
	background-color: var(--font-copy-color);
	position: relative;
}
.btn-faq::after{
	display: block;
	position: absolute;
	content: '';
	width: 40px;
	height: 40px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	top: calc(50% - 20px);
	left: 20px;
}
#btn-faq-allgemein::after{
	background-image: url('../img/icon-faq-allgemein.png');
}
#btn-faq-schimmel::after{
	background-image: url('../img/icon-faq-schimmel.png');
}
#btn-faq-boden::after{
	background-image: url('../img/icon-faq-boden.png');
}
#btn-faq-wasser::after{
	background-image: url('../img/icon-faq-wasser.png');
}
#btn-faq-asbest::after{
	background-image: url('../img/icon-faq-asbest.png');
}
#btn-faq-produktfinder{
	background-color: var(--allgemein-3-color);
}
@media (min-width: 600px){
	.faq-cont{
		padding: 10px 60px;
	}
	.btns-faq{
		padding: 10px 60px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}
	.btn-faq{
    min-width: 200px;
    flex: 1 1 0px;
    font-size: 16px;
	}
}
@media (min-width: 839px){
	.faq-cont{
		font-size: 22px;
	}
	.btn-faq::after{
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
	}

}


.sub-nav{
	justify-content: space-around;
	width: 100%;
}
.sub-nav a{
	font-size: 14px;
	padding: 7px;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	flex-grow: 1;
	margin: 0 1%;
}
.faq .sub-nav a{
	background: var(--passive-grey-color);
}
.faq.schimmel .sub-nav a.active{
	background: var(--schimmel-1-color);
}
.faq.wasser .sub-nav a.active{
	background: var(--wasser-1-color);
}
.faq.boden .sub-nav a.active{
	background: var(--boden-1-color);
}
.faq.asbest .sub-nav a.active{
	background: var(--asbest-1-color);
}
.faq.allgemein .sub-nav a.active{
	background: var(--allgemein-1-color);
}

.accordion {
  position: relative;
  margin-top: 30px;
}

.accordion-head {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding: 10px 20px;

}
.faq.schimmel .accordion-head {
  background: var(--schimmel-2-color);
  border: 5px solid var(--schimmel-2-color);
}
.faq.schimmel .accordion-element:has(.active) .accordion-head {
  border: 5px solid var(--schimmel-1-color);
  background: none;
}
.faq.wasser .accordion-head {
  background: var(--wasser-2-color);
  border: 5px solid var(--wasser-2-color);
}
.faq.wasser .accordion-element:has(.active) .accordion-head {
  border: 5px solid var(--wasser-1-color);
  background: none;
}
.faq.boden .accordion-head {
  background: var(--boden-2-color);
  border: 5px solid var(--boden-2-color);
}
.faq.boden .accordion-element:has(.active) .accordion-head {
  border: 5px solid var(--boden-1-color);
  background: none;
}
.faq.asbest .accordion-head {
  background: var(--asbest-2-color);
  border: 5px solid var(--asbest-2-color);
}
.faq.asbest .accordion-element:has(.active) .accordion-head {
  border: 5px solid var(--asbest-1-color);
  background: none;
}
.faq.allgemein .accordion-head {
  background: var(--allgemein-2-color);
  border: 5px solid var(--allgemein-2-color);
}
.faq.allgemein .accordion-element:has(.active) .accordion-head {
  border: 5px solid var(--allgemein-1-color);
  background: none;
}

.accordion a {
	text-decoration: none;
	text-shadow: none;
	color: var(--font-copy-color);
	font-weight: 700;
	font-size: 16px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}

.accordion-content {
	height: 0;
	margin: -1px auto 0;
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 20px;
}

.faq .accordion-content.active {
	display: block;
	height: auto;
	padding: 10px 20px;
	margin-bottom: 20px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-top: none !important;
	margin-top: -11px;
}
.schimmel .accordion-content.active {
	border:  5px solid var(--schimmel-1-color);
}
.wasser .accordion-content.active {
	border:  5px solid var(--wasser-1-color);
}
.boden .accordion-content.active {
	border:  5px solid var(--boden-1-color);
}
.asbest .accordion-content.active {
	border:  5px solid var(--asbest-1-color);
}
.allgemein .accordion-content.active {
	border:  5px solid var(--allgemein-1-color);
}

.faq .accordion-element:has(.active) .accordion-head  {
	border-bottom: none !important;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.accordion span:target ~ [id*="open-accordion"] {
  display: none;
}
.accordion-content-head{
	display: none;
}
@media (min-width: 839px){
	.sub-nav{
		height: 50px;
	}
	.sub-nav a{
		font-size: 22px;
		min-width: 150px;
	}
	.accordion{
		margin-top: 0;
	}
	.accordion-content.active {
		margin-bottom: 20px;
		border-radius: 20px;
		margin-top: 0;
	}
	.faq .accordion-element:has(.active) .accordion-head,
	.faq .accordion-content.active  {
		border-radius: 20px;
		margin-top: 0;
	}
	.faq.schimmel .accordion-content.active,
	.faq.schimmel .accordion-element:has(.active) .accordion-head  {
		border:  5px solid var(--schimmel-1-color) !important;
	}
	.faq.wasser .accordion-content.active,
	.faq.wasser .accordion-element:has(.active) .accordion-head {
		border:  5px solid var(--wasser-1-color) !important;
	}
	.faq.boden .accordion-content.active,
	.faq.boden .accordion-element:has(.active) .accordion-head {
		border:  5px solid var(--boden-1-color) !important;
	}
	.faq.asbest .accordion-content.active,
	.faq.asbest .accordion-element:has(.active) .accordion-head {
		border:  5px solid var(--asbest-1-color) !important;
	}
	.faq.allgemein .accordion-content.active,
	.faq.allgemein .accordion-element:has(.active) .accordion-head {
		border:  5px solid var(--allgemein-1-color) !important;
	}
	.accordion-head {
    float: left;
    width: 40%;
    margin-right: 30%;
    display: block;
		font-size: 24px;
		margin-bottom: 15px;
		padding: 5px 15px;
}
	.accordion-content{
		position: absolute;
		right: 0;
		top: 0;
		width: calc(60% - 40px)
	}
	.accordion-content-head{
		display: block;
		font-size: 24px;
		margin-bottom: 15px;
	}
}


/* Beispiel Testergebnisse */
.testergebnisse .slick-dots li button::before{
	font-size: 10px;
}
.erg-infobox{
	background: #F3F3F3;
	color: var(--font-copy-color);
	font-weight: 700;
	font-size: 16px;
	padding: 15px;
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 15px;
	margin-bottom: 20px;
}
.erg-imgbox{
	background: #A7BBC7;
	width: 100%;
	height: 280px;
	border-radius: 15px;
	padding: 30px 15px;
}
.erg-imgbox div{
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	width: 100%;
	height: 100%;
}
.slide-1 .erg-imgbox div{
	background-image: url('../img/erg-1.jpg');
}
.slide-2 .erg-imgbox div{
	background-image: url('../img/erg-2.jpg');
}
.slide-3 .erg-imgbox div{
	background-image: url('../img/erg-3.jpg');
}
.slide-4 .erg-imgbox > div{
	display: flex;
	flex-direction: column;
	padding: 15px;
	border-radius: 15px;
	background-color: #F3F3F3;
}
.slide-4 .erg-imgbox-icon{
	background-image: url('../img/erg-support.png');
}
.slide-4 .erg-imgbox-cont{
	text-align: center;
}
.slide-5 .erg-imgbox div{
	background-image: url('../img/erg-5.jpg');
}
.btn-erg{
	background-color: var(--allgemein-1-color);
}

.slide-6 .erg-imgbox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
.slide-6 .erg-imgbox a{
	flex-grow: 0;
}
.slick-prev::before,
.slick-next::before {
  display: none;
}
@media (min-width: 600px){
	.slide-1 .erg-imgbox div{
		background-image: url('../img/erg-1-d.jpg');
	}
	.slide-2 .erg-imgbox div{
		background-image: url('../img/erg-2-d.jpg');
	}
	.erg-imgbox{
		padding: 15px 50px;
	}
	.slick-slide > div{
		padding: 0 50px;
	}
	.slide-4 .erg-imgbox > div{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.slide-4 .erg-imgbox-cont{
		text-align: left;
	}
	.slide-4 .erg-imgbox-icon{
		background-size: 200px;
    background-position: 80% 50%;
	}
	.slide-4 .erg-imgbox-cont{
		display: flex;
		justify-content: start;
    align-items: center;
	}
	.slide-4 .erg-imgbox-cont p{
		font-size: 18px;
	}
	.slide-6 .erg-imgbox {
    flex-direction: row;
	}
	.slide-6{
		margin-top: 100px;
	}
	.erg-infobox{
    font-size: 20px;
    padding: 15px 80px;
    margin-top: 10px;
	}
	.slick-prev{
		left: 0 !important;
		z-index: 100;
	}
	.slick-next{
		right: 0 !important;
		z-index: 100;
	}
	.slick-prev::before,
	.slick-next::before {
		display: block;
    font-size: 30px !important;
    color: #244e66 !important;
	}
}
@media (max-width: 374px){
	.burger-button{
		padding: 15px 10px;
	}
	.nav-head h1{
		font-size: 16px;
	}
	.pf-question{
		padding: 10px;
	}
	.sub-nav a{
		font-size: 12px;
	}

}