/*
rot: #a81747

*/

:root {
	--black: #181716;
	--white: #ffffff;
	--rot: #c51047;

}
body {

	font-family: poppins, sans-serif;
	font-weight: 300;
	font-style: normal;
    line-height: 1.2;
	color:var(--black);
	overflow-x: hidden;
	font-size: 18px;
    letter-spacing: 0.01em;
	margin: 0;

 }

h1, h2, h3{
	font-family: poppins, sans-serif;
	font-weight: 800;
	font-style: normal;
	letter-spacing: 0.01em;
	margin-top:0px;
	margin-bottom:0px;
	color:var(--color);
	line-height: 1;
	margin-block-start: 0px;
}
h1, .h1{
	/*font-size: clamp(2.5rem, 1.9532rem + 2.3392vw, 4rem);*/
	font-size: clamp(1.875rem, 0.9637rem + 3.8986vw, 4.375rem);
}



h2, .h2{
	/*font-size: clamp(1.25rem, 0.9083rem + 1.462vw, 2.1875rem);*/
	font-size: clamp(1.875rem, 0.9637rem + 3.8986vw, 4.375rem);
		letter-spacing: 0.02em;
}

h3, .h3{
	font-size: clamp(1.875rem, 0.9637rem + 3.8986vw, 4.375rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.02em;

}

h4, .h4{
	font-size: clamp(1.25rem, 1.0222rem + 0.9747vw, 1.875rem);
	padding-bottom: 10px;
	margin-block-start: 0;
    margin-block-end: 0;

}
p{
		margin-block-start: 0;
    margin-block-end: 0;
	margin-bottom:30px;
}

img{
	width:100%;
	height:auto;
}

ul{
	margin-bottom:30px;
	padding-left: 18px;
}

strong{
	font-weight:900;
}

a{
	color:inherit;
	text-decoration: none;
}

input{
	font-family: poppins, sans-serif;
}

.header{
	padding-top:15px;
	padding-bottom:15px;
}
.navi-link-container{
	padding-top:50px;
}
.navi-container-sm{
		background: var(--rot);
	font-size:12px;
	color: var(--white);
	padding-top:15px;
	padding-bottom:15px;
}

@media (min-width: 768px){
	
	.navi-container-sm{

	font-size:18px;

	}
	
}

.navi-link{
	display:inline-block;
	width:auto;
		cursor: pointer;
}

.back-red{
		background: var(--rot);
	color: var(--white);
}

.text-red{
	color: var(--rot);
}

.geberit{
	font-weight:600;
	font-size:24px;
	padding-bottom:30px;
}

.geberit:before{
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ffffff;
	margin-right:4px;
}

.header-img{
	position: absolute;
	width: 100%;
	height:100%;
	top:0;
	z-index: -1;
	
}

.header-img img{
	transform: scale(1.4);
}

.logo-header{
	max-width:230px;
}

.header-img picture{
    display: block;
    position: relative;
    overflow: hidden !important;
    width: 100%;
	height:100%;

}
.header-img img{
	width: 100%;
    object-fit: cover;
    height: 100%;

}
.header-text{
	padding-top: clamp(50px, 16%, 300px);
	padding-bottom: clamp(50px, 16%, 300px);
}

.header-content{
	display:inline-block; 
	font-weight:600; 
	padding-top:30px;
	font-size: clamp(0.9375rem, 0.5958rem + 1.462vw, 1.875rem);
}

.wimpel{
	position: absolute;
	top:0;
}

.wimpel img{
	/* Die neue Grafik enthält oben 150 px transparenten Rand.
	   Wie beim früheren Web-Störer beginnt die sichtbare Kante bei 0. */
	transform: translateY(-7.515%);
}

.neu{
    position: absolute;
    top: 0;
       right: 7%;
    background: var(--rot);
    /* width: 40px; */
    display: inline-block;
    width: auto;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 0 0 20px 20px;
    font-weight: 600 !important;

}

.produkt-image{
	background:#54000f;
}



@media (min-width: 991px){
	.navi-link:hover{
		color: var(--rot) !important;
	}

	.header{
		padding-top:30px;
		padding-bottom:30px;
	}
	.navi-link-container{
		padding-top:50px;
	}

}

.produkt-text{
	position: relative;
	
}
.produkt-container{
	border:2px solid var(--rot);
	border-radius:20px;
	overflow: hidden;
	position: relative;
}

.produkt-container p{
	margin-bottom:40px;
	
}

.produkt-container picture{
	display: block;
    position: relative;
    overflow: hidden !important;
    width: 101%;
	height:100%;
	
}

.produkt-container img{
	width: 100%;
    object-fit: cover;
    height: 100%;

}

.preis{
	    display: inline-block;
	font-size: clamp(0.9375rem, 0.8008rem + 0.5848vw, 1.3125rem);
	background: var(--rot);
	color: #ffffff;
	padding-left:15px;
	margin-right:20px;
	margin-bottom:20px;
	font-weight:600;
}

.preis strong{
	display: inline-block;

	padding-left:10px;
	padding:15px 15px 10px 15px;
	
	  border-left: 4px solid transparent; /* 3px Quadrat + 3px Abstand = 6px */
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='white'/%3E%3C/svg%3E") 1 0 1 0 repeat;
  border-image-slice: 1;
	
}
.cashback{
		color: var(--rot);
}

input[type=text]{
	    color: var(--black);
	    border: 2px solid var(--black);
    font-size: 18px;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
}

textarea {
	font-family: poppins, sans-serif;
border: 2px solid var(--black);
	font-size:18px;
	color: var(--black);
	width: 100%;
	padding: 10px;
	margin-bottom:0px;
}

::placeholder {
  color: var(--black) !important;
	font-size:18px;

}

input[type="radio"],
input[type="checkbox"] {
	    position: absolute;
    left: -999em;
}

.radio{
	padding-left: 20px;
	 display: block;
}

.radio:before {
    content: "";
    position: absolute;
    border: 1px solid var(--black);
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
    appearance: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    margin-right: 5px;
    margin-left: -20px;
    background: transparent;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
}

.checkbox{
	padding-left: 20px;
	 display: block;
}

.checkbox:before {
    content: "";
    position: absolute;
    border: 1px solid var(--black);
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
    appearance: none;
      border-radius: 50%;
    padding: 0;
    margin: 0;
    margin-right: 5px;
    margin-left: -20px;
    background: transparent;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
}

.active-label:before {
    background: var(--rot);
	    border: 1px solid var(--rot);
}

.not-valid{
	border: 2px solid var(--rot) !important;
	color: var(--rot);
}
.not-valid-radio{
	color: var(--rot) !important;
}

#senden{
	background:var(--rot);
	border:var(--rot);
	color:#ffffff;
	font-size:18px;
	padding: 7px 20px;
	cursor: pointer;
}

.btn-wrapper{
	    margin-top: 50px;
	margin-bottom: 20px;
}



.btn2{
		background:var(--white);
	border: 2px solid var(--rot);
	color:var(--rot);
	font-size:18px;
	padding: 7px 20px;
	cursor: pointer;
	font-weight:bold;
}

@media (max-width: 767px){
	.btn2{
		    display: block;
		width: 100%;
		text-align: center;

	}
}



#validText{
	color: var(--rot);

	margin-bottom:10px;
	padding:10px;
}

.sendBut-disable{
	 cursor: not-allowed !important;
	opacity: 0.8;
}

input:focus{
	outline: none;
	color: var(--rot);
	border: 2px solid var(--rot);
}

input:focus-visible{
	outline: none;
	color: var(--rot);
	border: 2px solid var(--rot);
}

textarea:focus{
	outline: none;
	color: var(--rot);
	border: 2px solid var(--rot);
}

textarea:focus-visible{
	outline: none;
	color: var(--rot);
	border: 2px solid var(--rot);
}