:root{
	--primary: #ff0303;
	--secondary: white;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #2b2b2b;

	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yollow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #3b3b3b;

	--base-font-size: 18px;

	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
}



/*-----------------------hier wird die Schriftart �berschrieben, ansonsten wird es von Vaadin geladen----------------------*/
html {
	font-family: "Muli","Roboto",sans-serif !important;
	line-height: 1.75em !important;
	margin-bottom: 5px !important;
	font-size: var(--base-font-size) !important;
	color: #2b2b2b;
}

.inner_content h1 {
	font-size: 2.5rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	font-family: "Poppins","Muli","Roboto",sans-serif !important;
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
	line-height: 1.2 !important;
}

.inner_content h2 {
	font-size: 1.625rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	font-family: "Poppins","Muli","Roboto",sans-serif !important;
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	line-height: 1.2 !important;
}

.inner_content h3 {
	font-size: 1rem !important;
	font-weight: 300 !important;
	font-family: "Poppins","Muli","Roboto",sans-serif !important;
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
	line-height: 1.2 !important;
}

.inner_content p {
    font-size: var(--base-font-size) !important;
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
}

.inner_content a {
	color: #2b2b2b;
	text-decoration: none;
	cursor: pointer;
}

.inner_content a:hover {
	color: #7e7e7e !important;
	text-decoration: none;
	cursor: pointer;
}

.inner_content li {
	font-size: 1.25em !important;
}



/*Hier werden die Abst�nde weggenommen*/
.produkt_text :first-child {
	margin-top: 0em !important;
}

.articelTextWrapper :first-child {
	margin-top: 0em !important;
}

.formularHeader :first-child{
	margin-top: 0em !important;
}



/*---------------------------------AdminSection----------------------*/
.adminSection{
	background-color: #6f6f6f;
	position: fixed;
	z-index: 102!important;
	display: flex;
}

.adminSection vaadin-button{
	background: transparent;
	color: white;
	border: none;
	height: 20px;
}

.adminSection vaadin-button:hover {
    cursor: pointer;
    background: #5a5a5a;
}



/*---------------------------------Cookie-Meldung----------------------*/
.termsfeed-com---nb .cc-nb-main-container {
	padding: 2rem !important;
}

.termsfeed-com---palette-dark.termsfeed-com---nb {
	background-color: rgba(0, 0, 0, 0.8) !important;
}



/*---------------------------------Edit Icon----------------------*/
.edit_icon{
	width: 25px;
	height: 25px;
	border: 0;	
	padding-left: 5px;
}

.edit_icon:hover{
	cursor: pointer;
}

.tooltiptext{
	font-size: 18px;
    font-weight: 100;
}

.editButtonLogo{
	position: absolute;
	left: 0;
	top: 2rem;
}

.editButtonLeft{
	position: absolute;
	left: 0rem;
	margin-top: 5rem;
}

.produkt_editButtonLeft {
	position: absolute;
	left: 1rem;
}

.produkt_text .editButtonLeft {
	top: 1rem;
	left: 1rem;
}

.headerImageWrapper .tooltip {
	position: absolute;
	z-index: 2;
	left: 1rem;
}

.articleModul .editButtonLeft {
	margin-top: 1rem;
}

.article_text .editButtonLeft {
	position: absolute;
	margin-top: -4rem;
	left: 1rem;
}

.articelWrapper_first .articelTextWrapper_left .editButtonLeft {
	margin-top: -5.5rem !important;
	left: 3rem;
}

.articelWrapper_first .articelTextWrapper_middle .editButtonLeft {
	margin-top: -5.5rem !important;
	left: 38rem;
}

.articelWrapper_first .articelTextWrapper_right .editButtonLeft {
	margin-top: -5.5rem !important;
	left: 73rem;
}

.articelTextWrapper_title .editButtonLeft {
	margin-top: -3rem;
	left: 1rem;
}

.articelWrapper_second .articelTextWrapper_left .editButtonLeft {
	margin-top: -4rem !important;
	left: 18rem;
}

.articelWrapper_second .articelTextWrapper_right .editButtonLeft {
	margin-top: -4rem !important;
	left: 78rem;
}

.articelTextWrapper_left .editButtonLeft {
	margin-top: -2.5rem !important;
	left: 0;
}

.articelTextWrapper_right .editButtonLeft {
	margin-top: -2.5rem !important;
	left: 50%;
}

.articleModul_Startseite .articelTextWrapper_left .editButtonLeft {
	margin-top: -2.5rem !important;
	left: 0;
}

.articleModul_Startseite .articelTextWrapper_right .editButtonLeft {
	margin-top: -3.7rem !important;
	left: 50%;
}

.article_footerText .editButtonLeft {
	left: 1rem;
	margin-top: 0;
	z-index: 1;
	background-color: #f9f9f9;
}

.articelImageWrapper .editButtonRight {
	display: ruby;
}

.formular .editButtonLeft:first-child {
	margin-left: 1rem;
	top: -4rem;
}

.formular .editButtonLeft {
	margin-left: 1rem;
	top: -1rem;
}

.formular .editButtonHeader {
	top: -3%;
}

.formularZeile .editButtonModul {
	top: 7rem;
	left: 1rem;
}

.editButtonRight{
	position: absolute;
}

.editButtonHeader{
	position: absolute;
	top: 0;
    left: 1rem;
}

.editButtonModul{
	position: absolute;
}

.editButtonTextBearbeiten {
    position: absolute;
    margin-top: -2.5rem;
}

.productlist_text_leistungen .editButtonTextBearbeiten {
    position: absolute;
    margin-top: 2.5rem;
}

.bannerImageWrapper .tooltip {
	position: absolute;
	margin-top: 15%;	
	background-color: white;
	opacity: 70%;
	z-index: 2;
}

.menu1 .editButtonLeft {
	position: absolute;
	margin-bottom: 2%;
	margin-left: 11%;
}

.footerImage .editButton {
	position: relative;
	top: -0.5rem;
	left: -6rem;
	margin-top: -4%;
	margin-right: 0.5rem;
}



/*---------------------------------Container----------------------*/
.container {
	min-height: 100vh;
	display: flex;
    flex-direction: column;
}


.kontakt_popUp {
	width: 80px;
	height: 80px;
	position: fixed;
	top: 45%;
	right: 0;
	z-index: 10;
}

.popUp-button::before {
	content: url('data:image/svg+xml; charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>');
}

.popUp-button {
	font-size: 18px;
	color: white;
	background-color: var(--primary);
	border: 1px solid white;
	width: 80px;
	height: 80px;
  }

  .popUp-button:hover {
	cursor: pointer;
	background-color: #eb0101;
  }

/* The PopUp (background) */
.popUp {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
  }
  
  /* PopUp Content */
  .popUp-content {
	position: fixed;
	top: 42.5%;
	right: 0;
	background-color: var(--primary);
	color: white;
	padding: 17px 15px;
	border: 1px solid white;
	width: 268px;
  }

  .popUp-content:hover{
	background-color: #eb0101;
  }	

  .popUp-content p{
	font-size: 1.1rem;
	margin: 0;
  }	

  .popUp-content small{
	font-size: 0.8rem;
  }

  .popUp-content a{
	color: white;
	font-size: 1.2rem;
  }	

  .popUp-content a:hover{
	text-decoration: none;
  }

.scrollToTopDiv_visible {
	overflow: hidden;
	height: 1rem;
    position: fixed;
    right: 15px;
    z-index: 99999;
    bottom: 15px;
    padding: 1rem;
	background-color: var(--primary);
	border: 1px solid #fff;
	transition: all 0.3s ease-in-out;
}

.scrollToTopDiv:hover {
	cursor: pointer;
}

.arrowUp{
	border: solid white;
    border-width: 0px 1px 1px 0;
    display: inline-block;
    padding: 7px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}



/*---------------------------------Header----------------------*/
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}
	
.LogoImage {
	display: inline-block;
	margin: 25px 0;
}

.LogoImage img {
	/* width: 150px; */
	max-width: 150px !important;
	vertical-align: middle;
}

input#hamburg {
	display:none
}

.menu1 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0px 20rem;
}

.menu1 ul{
	list-style-type: none;
}

.menuLevel1 {
	list-style: none;
	margin: 0;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
}



/**** menulevel 1 ****/
.menuLevel1>li{
	display: inline-block;
	vertical-align: top;
	text-align: left;
	position: relative;
}

.menu_icon_level_1{
	display:none;	
}

.menu_icon_level_2{
	display:none;
}

.menuLevel1>li>button,
.menuLevel2>li>button {
	background: none;
	border: none;
	float: inherit;
	width: 100%;
	text-align: left;
	padding: 22px 30px;
}

.menuLevel1>li:hover > ul,
.menuLevel2>li:hover > ul{
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
	z-index: 1;
}

.menuLevel1>li.editButton_menu{
	position: absolute;
	left: -20px;
}

.menuLevel1>li.editButton_menu > a{
	border-left: 0px;
	padding: 0px;
}

.menuLevel1 li a {
	color: var(--primary);
	display: block;
}

.menuLevel1>li>button>a {
	margin: 10px 0px;
	font-size: 18px;
    font-weight: 400;
    box-sizing: border-box;
    width: 100%;
}

.menuLevel1>li:first-of-type>button>a {
	border-left: none;
}

.menuLevel1>li>button>a:LINK {
	text-decoration: none;
}



/* einblenden Linie bei selectierte Menu */
.menuLevel1>li.selected>button>a::after, .menuLevel1>li.hasSelectedDescendant>button>a::after {
    bottom: 0;
    display: block;
    height: 1px;
    width: 100%;
    content: "";
    background-color: var(--primary);
}

.menuLevel1>li>button>a:hover:before,
.menuLevel1>li .current a:before {
  	opacity: 1;
  	width: 100%;
}
.menuLevel1>li>button>a:hover:after,
.menuLevel1>li .current a:after {
  	max-width: 100%;
}



/**** submenu level 1 ****/
.menuLevel2{
	visibility: hidden;
	position: absolute;
	float: left;
	min-width: 100%;
    white-space: nowrap;
    padding: 0px;
    box-sizing: border-box;
    margin-top: 2px;
}

.menuLevel2>li {
	float: left;
	clear: left;
	width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-bottom: 2px;
    border: 1px solid;
    border-color: #ccc9c9;
}

.menuLevel2>li>button>a {
	float: left;
	clear: left;
	box-sizing: border-box;
	width: 100%;
	font-size: 18px;
    font-weight: 500;
    position: relative;
}

.menuLevel2>li>button>a:LINK {
	text-decoration: none;
}

.menuLevel2>li>button:HOVER>a {
	color: white;
	border-color: var(--primary);
}

.menuLevel2>li:HOVER {
	background-color: var(--primary);
    border-color: var(--primary);
}

#container li.editButton_menu > a::after{
	display: none;
}

.menuLevel2>li>button>a {
	color: black;
}

.menuLevel2{
	opacity: 0;
	transition-delay: 0s;
	transition: visibility 0s 0.2s, opacity 0.2s linear;
}

.menuLevel3 {
	display: none;
}

.kontakt_popUp {
	width: 80px;
	height: 80px;
	position: fixed;
	top: 45%;
	right: 0;
}

/* Search PopUp */
	.search-popUp-button {
		width: 18px;
		height: 18px;
	}

	.search-popUp-button:hover {
		cursor: pointer;
	}

	.search-popUp-button img.installation-image {
		width: 18px;
		height: 18px;
		margin-left: 30px;
		margin-bottom: 10px;
	}

	.search-popUp-button .tooltiptext {
		position: absolute;
		top: 3rem;
	}

	/* The PopUp (background) */
	.search-popUp {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 10; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
	}
	
	/* PopUp Content */
	.search-popUp-content {
		position: fixed;
		top: 0;
		right: 0;
		background-color: rgba(0,0,0,0.9);
		color: #c6c6c6;
		width: 100%;
		height: 100%;
	}	

	.search-popUp-content p{
		font-size: 2rem;
		margin: 0;
	}	

	.search-popUp-content a{
		color: #c6c6c6;
		font-size: 2rem;
	}

	/* The Close Button */
	.close {
		color: #c6c6c6;
		float: right;
		font-size: 50px;
		font-weight: bold;
		margin-top: 35px;
		margin-right: 20px;
	}
	
	.close:hover {
		text-decoration: none;
		cursor: pointer;
	}

	.search_text {
		margin-top: 25rem;
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	#searchField {
		border: none;
		color: white;
	}

	.searchIcon {
		filter: invert(32%) sepia(8%) saturate(1925%) hue-rotate(183deg) brightness(96%) contrast(94%);
	}



/*------Content-------*/
.content{
	flex:1;
	position: relative;
	background-color: #f9f9f9 !important;
}

.bannerImageWrapper{
    margin-bottom: 2.5rem;
    position: relative;
}
.headerImageWrapper{
	position: relative;
	z-index: 2;
}
.bannerImage{
	display: flex;
	align-items: center;
	justify-content: center;
	object-fit: Fill;
	width: 100%;
	min-width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 2;
	background-color: #f9f9f9;
	/* margin-top: -2.75rem; */
}

#formatImage {
    max-width: 100%;	
}

.startseite #mainimage{
	object-fit: contain;
	width: 100%;
	filter: brightness(80%);
}

#mainimage{
	object-fit: contain;
}

.bannerTextWrapper{
    position: absolute;
    background: rgba(0,0,0,0.4);
    padding: 20px 40px 20px 40px;
    margin-left: 20rem;
	max-width: 850px;
	left: 0;
}

.bannerText{
	color: white;
	font-size: 2rem;
	font-weight: 100;
	display: inline;
	line-height: 1em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: "Poppins","Muli","Roboto",sans-serif !important;
	margin-top: 0;
	margin-bottom: 0;
}

.breadcrumb{
	color: #c1c1c1;
}

.breadcrumbText{
	margin-left: 20rem;
}

.breadcrumbText a{
	color: #c1c1c1 !important;
}

.inner_content{
	position: relative;
	/* margin: 0 20rem; */
	margin-bottom: 2.5rem;
}

.dateschutz {
	margin-right: 20rem;
	margin-left: 20rem;
	margin-top: 2rem;
}

.impressum {
	margin-right: 20rem;
	margin-left: 20rem;
	margin-top: 2rem;
}



/*------Article-------*/
.article_text {
	padding-right: 20rem;
	padding-left: 20rem;
	padding-bottom: 1rem;
	position: relative;
	z-index: 1;
	background-color: #f9f9f9;
}

.articleModul{
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding-bottom: 5rem;
	background-color: #f9f9f9;
	z-index: 1;
}

.articelWrapper_first {
	display: flex;
	justify-content: center;
	width: 100%;
	background-color: var(--primary);
	padding-top: 3rem;
	padding-bottom: 1rem;
	box-shadow: inset 0 0 30px #333;
}

.articelTextWrapper_title {
	padding-top: 3rem;
}

.articelTextWrapper_title p {
	font-size: 2rem !important;
}

.articelWrapper_first .articelTextWrapper_left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;
	margin-left: 2rem;
	margin-right: 4rem;
	width: 560px;
}

.articelWrapper_first .articelTextWrapper_left h1 {
	color: #252525;
	background-color: white;
	padding: 20px;
	border: 1px solid #cdcdcd;
	padding: 5px;
}

.articelWrapper_first .articelTextWrapper_middle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;
	width: 560px;
}

.articelWrapper_first .articelTextWrapper_middle h1 {
	color: #252525;
	background-color: white;
	padding: 20px;
	border: 1px solid #cdcdcd;
	padding: 5px;
}

.articelWrapper_first .articelTextWrapper_right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;
	margin-right: 2rem;
	margin-left: 4rem;
	width: 560px;
}

.articelWrapper_first .articelTextWrapper_right h1 {
	color: #252525;
	background-color: white;
	padding: 20px;
	border: 1px solid #cdcdcd;
	padding: 5px;
}

.articleModul .articelWrapper_first a::before {
	display: flex;
	justify-content: center;
	align-items: center;
    font-family: FontAwesome;
	content: "+";
	margin-right: 10px;
	padding-top: 1px;
	height: 10px;
	width: 11px;
	border: 1px solid var(--primary);
	border-radius: 3px;
}

.articleModul .articelWrapper_first a:hover::before {
	border: 1px solid white !important;
}

.articleModul .articelWrapper_first a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	text-align: center;
    color: var(--primary);
	background-color: white;
	font-size: 15px;
    font-weight: 400;
    text-decoration: none;
	border: 1px solid var(--primary);
}

.articleModul .articelWrapper_first a:hover {
    background-color: var(--primary);
    color: white !important;
    cursor: pointer;
	border: 1px solid #c4313f;
}

.articelWrapper_second {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 0.5rem;
}

.articelWrapper_second p:first-of-type {
	border-bottom: 1px dotted red;
}

.articelWrapper_second .articelTextWrapper_left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: white;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.125);
	margin-right: 1rem;
	margin-left: 1rem;
	width: 546px;
}

.articelWrapper_second .articelTextWrapper_right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: white;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.125);
	width: 546px;
	margin-right: 1rem;
	margin-left: 1rem;
}

.articleModul .articelWrapper_second a::before {
	display: flex;
	justify-content: center;
	align-items: center;
    font-family: FontAwesome;
	content: "+";
	margin-right: 10px;
	padding-top: 1px;
	height: 10px;
	width: 11px;
	border: 1px solid var(--primary);
	border-radius: 3px;
}

.articleModul .articelWrapper_second a:hover::before {
	border: 1px solid white !important;
}

.articleModul .articelWrapper_second a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	text-align: center;
    color: var(--primary);
	font-size: 15px;
    font-weight: 400;
    text-decoration: none;
	border: 1px solid var(--primary);
}

.articleModul .articelWrapper_second 	a:hover {
    background-color: var(--primary);
    color: white !important;
    cursor: pointer;
}

.articelTextWrapper {
   	flex: 1;
}

.articelTextWrapper p a:any-link{
	text-decoration: none;
    color: var(--primary);
    font-weight: 400;
}

/* .articelTextWrapper p a:any-link:hover {
    font-weight: 600;
	text-decoration: none;
} */

.articelTextWrapper > p{
    margin-right: 30px;
}

.articelTextWrapper ul li p {
    margin-block-end: 0;
}

.artikelThumbbar {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding-left: 0px;
}

.artikelThumbbarImage {
    height: 60px;
	margin: 2px;
}

.article_footerText {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 300px;
	margin-top: 4rem;
}

.article_footerText p {
	position: absolute;
	font-size: 3.875rem !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1em;
	color: white;
	z-index: 1;
}

.hintergrundBild img.installation-image {
	min-width: 100%;
	filter: brightness(80%);
}

.hintergrundBild {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	background-position: bottom center; 
	background-repeat: no-repeat; 
	background-size:cover; 
	background-attachment:fixed;
}



/*------Produktmodul-------*/
.productArticleBackButton {
	border: 1px solid var(--primary);
	background-image: none;
	box-shadow: none;
	border-radius: 0px;
	color: var(--primary);
	transition: background-color 0.156s ease;
	text-align: center;
	width: 100px;
	display: flex;
    justify-content: center;
    text-decoration: none;
    margin-top: 40px;
}

.productArticleBackButton:hover {
    background-color: var(--primary);
    color: white;
    cursor: pointer;
}

.produkt_text{
	margin-bottom: 3rem;
	margin-right: 20rem;
	margin-left: 20rem;
}

.produkt_text a:any-link{
	text-decoration: underline;
    color: var(--primary);
    font-weight: 400;
}

.produkt_text a:any-link:hover {
    font-weight: 600;
}

.productlist_div {
	display: flex;
	flex-direction: column;
	margin-right: 20rem;
	margin-left: 20rem;
}

.productlist_entry{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 80px;
}

.productlist_text {
	box-sizing: border-box;
	display: flex;
    flex-direction: column;
    flex: 1;
}

.productlist_text > .editButton_productlist_div {
    position: absolute;
    top: 0px;
    left: -20px;
}

.productlist_text .productlist_title {
	display: block;
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 20px;
	border: 1px solid #cdcdcd;
	padding: 10px;
	text-align: center;
}

.productlist_description{
	width: 100%;
}

/* .productlist_description p {
	display: flex;
	align-items: center;
	gap: 4px;
} */

.productlist_description span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.productlist_description a:any-link{
	text-decoration: underline;
    color: var(--primary);
    font-weight: 400;
}

.productlist_description a:any-link:hover {
    font-weight: 600;
    text-decoration: underline;
}

.productlist_description ul {
	list-style-position: inside;
}

.productlist_description li {
	font-size: var(--base-font-size) !important;
}

.productlist_description li::marker {
	content: "✔ ";
  }

.productlist_description img{
	height: 20px;
}

.productlist_more {
	width: fit-content;
	display: flex;
	justify-content: center;
	margin-top: 40px;
	border: 1px solid var(--primary);
}

.productlist_more a {
    color: var(--primary);
    font-weight: 400;
    text-decoration: none;
    width: 100px;
    text-align: center;
}

.productlist_more:hover {
    background-color: var(--primary);
    cursor: pointer;
}

.productlist_more:hover a {
    background-color: var(--primary);
    color: white;
    cursor: pointer;
}

.productlist_image_div {
	margin-right: 150px;
}

.productlist_image{
	max-width: 100%;
    height: auto;
    object-fit: contain;
}

.product_separator {
	width: 100%;
    border-top: 1px solid var(--primary);
    margin: 3rem 0;
}

.product_separator:last-Child {
	width: 0%;
}

.product_back_outer a {
    font-size: 1.3rem;
    color: var(--primary);
    text-decoration: underline;
}



/*------Produktmodul Leistungen-------*/
.productlist_div_leistungen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: white;
	box-shadow: 0 0 10px #ddd;
	padding-top: 5rem;
	padding-bottom: 5rem;
	padding-right: 20rem;
	padding-left: 20rem;
}

.productlist_entry_leistungen {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	align-items: center;
}

.productlist_text_leistungen {
	box-sizing: border-box;
	display: flex;
	align-items: center;
    flex-direction: column;
    flex: 1;
}

.productlist_text_leistungen > .editButton_productlist_div_leistungen {
    position: absolute;
    top: 0px;
    left: -20px;
}

.productlist_text_leistungen .productlist_title {
	display: block;
	line-height: 1.2;
	font-size: 2.5rem;
	font-weight: 200;
	text-align: center;
}

.productlist_title_leistungen {
	font-weight: bolder;
    font-size: 1.5rem;
}

.productlist_description_leistungen {
	width: 85%;
}

.produkt_text ul {
	list-style-position: inside;
}

.produkt_text li {
	font-size: var(--base-font-size) !important;
}

.produkt_text li::marker {
	content: "✔ ";
  }

.productlist_description_leistungen a:any-link{
	text-decoration: underline;
    color: var(--primary);
    font-weight: 400;
}

.productlist_description_leistungen a:any-link:hover {
    font-weight: 600;
    text-decoration: underline;
}

.productlist_text_leistungen .productlist_description {
	width: 232px;
	height: 39px;
    display: flex;
    justify-content: center;
	align-items: center;
    margin-top: 44px;
    border: 1px solid var(--primary);
}

.productlist_text_leistungen .productlist_description a::before {
	display: flex;
	justify-content: center;
	align-items: center;
    font-family: FontAwesome;
	content: "+";
	margin-right: 10px;
	padding-top: 1px;
	height: 10px;
	width: 11px;
	border: 1px solid var(--primary);
	border-radius: 3px;
}

.productlist_text_leistungen .productlist_description:hover a::before {
	border: 1px solid white !important;
}

.productlist_text_leistungen .productlist_description a {
	display: flex;
	align-items: center;
	justify-content: center;
    color: var(--primary);
    font-weight: 400;
    text-decoration: none;
}

.productlist_text_leistungen .productlist_description p {
	margin-bottom: 0 !important;
}

.productlist_text_leistungen .productlist_description:hover {
    background-color: var(--primary);
    cursor: pointer;
}

.productlist_text_leistungen .productlist_description:hover a {
    background-color: var(--primary);
    color: white !important;
    cursor: pointer;
	text-decoration: none;
	font-weight: 400;
}

.productlist_entry_leistungen .productlist_image_div {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 44px;
}

.productlist_image_leistungen_div {
	display: flex;
	justify-content: center;
	align-items: center;

}

.productlist_image_leistungen {
	max-width: 100%;
    height: auto;
    object-fit: contain;
}



/*------Formularmodul-------*/
/*------Da die Formular Elemente von Vaadin kommen wird der Style auch von Vaadin �berschrieben, 
deswegen muss man hier ein !important hinzuf�gen-------*/
.formular {
	margin-left: 20rem;
	margin-right: 20rem;
}

.formularZeile{
	width: 100%;
	background-color: #efefef;
	padding: 0 20px 60px;
	margin-top: 40px;
}

.formularZeile p {
	margin-left: 2rem;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 18px;
}

.formularZeile span {
	color: #2b2b2b !important;
}

.formularZeile a {
	color: #2b2b2b !important;
}

.formularZeile label {
	color: #2b2b2b;
	font-size: 16px;
	font-weight: 400;
}

.formularZeile .editButtonLeft {
	top: 5rem;
}

.formularImageWrapper{
	position: absolute;
	left: 44rem;
	width: 500px;
}

.formularButton{
	width: 150px !important;
	background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 0px !important;
    color: white !important;
    transition: background-color 0.156s ease !important;
	margin-top: 6.2rem;
	margin-left: auto !important;
}

.formularFooter {
	margin-top: -8.75rem;
}

.formularFooter p:last-Child {
	font-size: 0.8rem !important;
	margin-left: 0;
}

.formularFooter .editButtonLeft {
	top: 10rem !important;
	margin-top: 0rem !important;
}

.formularFeld::part(input-field){
	border: 1px solid black !important;
	border-radius: 0px !important;
	background-color: white !important;
}

vaadin-form-layout > div > label {
	font-size: var(--lumo-font-size-s);
	font-weight: 500;
	color: var(--lumo-secondary-text-color);
}

vaadin-horizontal-layout > label {
	margin-top: 0.7rem;
	font-size: var(--lumo-font-size-s);
	font-weight: 500;
	color: var(--lumo-secondary-text-color);
}

.captchaTextfield{
	border: 1px solid black !important;
    padding: 0;
}

.captchaLayout{
	height: 80px !important;
}

vaadin-vertical-layout.captchaLayout {
	display: flex;
	flex-direction: row;
	position: absolute;
	margin-top: 1.3rem;
	padding-left: 0;
}

vaadin-vertical-layout.captchaLayout > img {
	width: 100px;
	height: 36px;
	border: 1px solid var(--lumo-secondary-text-color);
	margin-right: 10px;
}



/*-------Footer-------*/
.footer{
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	margin-bottom: -1rem;
	background-color: white;
	border-top: 1px solid;
	color: #7e7e7e;
    padding-right: 20rem;
    padding-left: 20rem;
}

.footerTextWrapper {
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

a.footerLinks {
	font-size: 0.875rem;
	color: #2b2b2b;
	line-height: 1.6em;
	margin-bottom: 5px;
}

a.footerLinks:hover {
	color: #7e7e7e !important;
    cursor: pointer;
    font-weight: 400;
	text-decoration: none;
}

.kontakt1_div {
	display: flex;
	padding-left: 15px;
	padding-right: 15px;
}

.footerText p{
	font-size: 0.875rem;
	color: #7e7e7e;
	line-height: 1.6em;
	margin-top: 0;
	margin-bottom: 5px;
}

.kontakt2_div {
	display: flex;
	flex-direction: column;
	padding-left: 15px;
	padding-right: 15px;
}

.kontakt2_text {
	display: flex;
	align-items: center;
}

.kontakt2_text a.footerLinks{
	margin-bottom: 0;
}

.kontakt2_div img {
	height: 15px;
	margin-right: 7px !important;
}

.kontakt2_div img.edit_icon {
	height: 25px;
}

span.footerLinks.fax {
	color: #7e7e7e;
	font-size: 0.875rem;
}

.schnelleinstieg_div {
	display: flex;
	flex-direction: column;
	padding-left: 15px;
	padding-right: 15px;
}

.schnelleinstieg_div h3 {
	font-size: 1rem;
	font-weight: 500;
	color: #7e7e7e;
	margin-top: 0;
}

.information_div {
	display: flex;
	flex-direction: column;
	padding-left: 15px;
	padding-right: 15px;
}

.information_div h3 {
	font-size: 1rem;
	font-weight: 500;
	color: #7e7e7e;
	margin-top: 0;
}

.footerImage {
	width: 150px;
	margin-right: 2rem;
	margin-top: 0.4rem;
}

.footerImage img.installation-image {
	width: 150px;
}

img.installation-image{
	margin-right: 25px;
}

.copyright_div{
	margin-left: 10%;
	padding: 15px 0;
}

.copyright_div a{
	text-decoration: none;
	color: #7e7e7e !important;
	font-size: 0.75rem;
	line-height: 1.75em;
}



/******************************/
/* Responsive*/
/******************************/
@MEDIA only screen and (max-width: 1670px){
	.produkt_text {
		margin-right: 12rem;
		margin-left: 12rem;
	}

	.productlist_div_leistungen, .footer {
		padding-right: 12rem;
		padding-left: 12rem;
	}

	.productlist_div {
		margin-right: 12rem;
		margin-left: 12rem;
	}

	.formular {
		margin-right: 13rem;
		margin-left: 12rem;
	}

	.article_text {
		padding-right: 12rem;
		padding-left: 12rem;
	}

	.dateschutz {
		margin-right: 12rem;
		margin-left: 12rem;
	}
	
	.impressum {
		margin-right: 12rem;
		margin-left: 12rem;
	}
}



/************* au�en Abstand verkleinern *****************/
@MEDIA only screen and (max-width: 1610px){
	.menu1 .bannerTextWrapper {
		margin: 0px 10rem;
	}
}



@MEDIA only screen and (max-width: 1450px){
	.menu1 .bannerTextWrapper {
		margin: 0px 5rem;
	}
}



@MEDIA only screen and (max-width: 1500px){
	.breadcrumbText {
		margin-left: 10rem;
	}
	
	/* .inner_content {
    	margin: 0 10rem;
	} */

	.copyright_div{
	    margin: 0 10rem;
	}
}



/************* Large devices (laptops/desktops, 1430px and up) *****************/
@MEDIA only screen and (max-width: 1430px){
	.productlist_div_leistungen, .footer {
		padding-right: 2rem;
		padding-left: 2rem;
	}

	.produkt_text {
		margin-right: 5rem;
		margin-left: 5rem;
	}

	.productlist_div {
		margin-right: 5rem;
		margin-left: 5rem;
	}

	.formular {
		margin-right: 7.5rem;
		margin-left: 6rem;
	}

	.article_text {
		padding-right: 5rem;
		padding-left: 5rem;
	}

	.hintergrundBild img.installation-image {
		height: 100%;
	}

	.dateschutz {
		margin-right: 5rem;
		margin-left: 5rem;
	}
	
	.impressum {
		margin-right: 5rem;
		margin-left: 5rem;
	}
}



/************* Large devices (laptops/desktops, 1280px and up) *****************/
@MEDIA only screen and (max-width: 1280px){
	.header {
		padding: 1rem 0;
	}
	.LogoImage	{
	    margin: 10px 1rem;
	    flex: 1;
}
	
	label.hamburg { 
	   display: block; 
	   width: 75px; 
	   height: 50px; 
	   position: relative; 
	   margin-left: auto; 
	   margin-right: 1rem;
	   border-radius: 4px;
	}

	.bannerTextWrapper {
		display: flex;
		align-items: center;
		margin-left: 1rem;
	}
	
	.bannerText{
		font-size: 1.5rem;
}

	.line { 
	   position: absolute; 
	   left:10px;
	   height: 4px; width: 55px; 
	   background: var(--primary); 
	   border-radius: 2px;
	   display: block; 
	   transition: 0.5s; 
	   transform-origin: center; 
	}

	.line:nth-child(1) { top: 12px; }
	.line:nth-child(2) { top: 24px; }
	.line:nth-child(3) { top: 36px; }

	#hamburg:checked + .hamburg .line:nth-child(1){
	   transform: translateY(12px) rotate(-45deg);
	}

	#hamburg:checked + .hamburg .line:nth-child(2){
	   opacity:0;
	}

	#hamburg:checked + .hamburg .line:nth-child(3){
	   transform: translateY(-12px) rotate(45deg);
	}
	
	#hamburg:checked ~ .menuLevel1 {
	   display: flex;
	}
		
	li.menu_opened>ul {
		visibility: visible;
		display: block;
		opacity: 1;
	}
	
	.menu1 {
	    align-items: center;
	    margin: 0;
	    flex-wrap: wrap;
	    justify-content: space-around;
	}
	
	.menuLevel1 {
		display: none;
	    flex-direction: column;
	    position: relative;
	    align-items: center;
	    background: #ffffff;
	    padding-inline-start: 0px;
	    width: 100%;
		border: 1px solid var(--base-color);
		margin-left: 0px;
    	flex: none;
	}
	
	.menu_icon_level_1{
		display:block;	
		width: 48px;
	    height: 48px;
	    margin-right: 2.8rem;
	}
	
	.menuLevel1>li {
     	margin-left: 0px;
    	width: 100%;
    	display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	}

	.menuLevel1>li:last-child {
    	border-bottom: none;
	}

	.menuLevel1>li>button, .menuLevel2>li>button {
		width: unset;
	}
	
	.menuLevel1>li>button>a {
		margin: 0;
	}

	.menuLevel1>li>button>a::before {
		content: "›";
		color: var(--primary);
		font-size: 20px;
		padding-right: 10px;
	}

	.menuLevel1>li.selected>button>a::after, .menuLevel1>li.hasSelectedDescendant>button>a::after {
		position: relative;
		top: 0.5rem;
	}
	
	.menu_icon_level_2{
		display:block;
		margin-right: 2.8rem;
	}
	
		
	.menuLevel2{
		display: none;
		position: relative;
	}
	
	
	.menuLevel2 > li{
	    margin-bottom: 0px;
	    border: none;
		background-color: var(--primary);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.menuLevel2>li>button>a{
	    margin: 0;
	}
	
	.menuLevel2>li:focus-within .menuLevel3{
		position: inherit;
		visibility: visible;
		opacity: 1;		
		transition: none;
		
	}
	
	.breadcrumbText {
		margin-left: 2rem;
	}

	/* .inner_content {
    	margin: 0 2rem;
	} */

	.copyright_div{
	    margin: 0 2rem;
	}

	.productlist_entry {
    	justify-content: center;
	}

	.produkt_text {
		margin-right: 2rem;
		margin-left: 2rem;
	}

	.productlist_div {
		margin-right: 2rem;
		margin-left: 2rem;
	}

	.formular {
		margin-right: 4rem;
		margin-left: 2rem;
	}

	.article_text {
		padding-right: 2rem;
		padding-left: 2rem;
	}

	.dateschutz {
		margin-right: 2rem;
		margin-left: 2rem;
	}
	
	.impressum {
		margin-right: 2rem;
		margin-left: 2rem;
	}
}



/************* Produktmodul_Leistungen anpassen (1246px and up) *****************/
@MEDIA only screen and (max-width: 1246px){
	.productlist_leistungen_div {
		flex-direction: column;
	}
}

/************* Title anpassen (1200px and up) *****************/
@MEDIA only screen and (max-width: 1200px){
	.inner_content h1 {
		font-size: calc(1.15rem + 1.8vw) !important;
	}

	.inner_content h2 {
		font-size: calc(1.0625rem + 0.75vw) !important;
	}

	.productlist_text .productlist_title {
		font-size: calc(1.0625rem + 0.75vw) !important;
	}

	.productlist_text_leistungen .productlist_title {
		font-size: calc(1.15rem + 1.8vw) !important;
	}

	.article_footerText p {
		font-size: calc(1.2875rem + 3.45vw)  !important;
	}
}



/************* Startseite anpassen (1063px and up) *****************/
@MEDIA only screen and (max-width: 1063px){
	.productlist_div_leistungen, .footer {
		gap: 4rem;
		justify-content: center;
	}
}



/************* Lösungen anpassen (920px and up) *****************/
@MEDIA only screen and (max-width: 920px){
	.articelWrapper_first {
		flex-wrap: wrap;
		gap: 2rem;
	}

	.articelWrapper_first .articelTextWrapper_left {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.articelWrapper_first .articelTextWrapper_middle {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.articelWrapper_first .articelTextWrapper_right {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}



/************* Medium devices (landscape tablets, 838px and up) *****************/
@MEDIA only screen and (max-width: 838px){
	.scrollToTopDiv_visible {
		bottom: 90px;
	}

	.footer {
		flex-direction: column;
	}
}



/************* Medium devices (landscape tablets, 768px and up) *****************/
@MEDIA only screen and (max-width: 768px){
	.bannerTextWrapper {
		margin: 0 1rem;
	}

	.bannerText{
		font-size: 1rem;
	}

	.kontakt_popUp {
		display: none;
	}
	

	/******** Artikelmodul **********/
	.articelTextWrapper{
		min-width: 200px;
		margin-right: 0px;
		margin-bottom: 20px;
	}


	/******** Produktmodul **********/
	.productlist_entry {
		flex-direction: column;
		gap: 1rem;
		align-items: center;
	}
	
	.productlist_text {
		margin-bottom: 15px;
		margin-right: 0px;
	}

	.productlist_description {
	    width: 100%;
	}

	.productlist_image_div {
		margin-right: 0;
	}
	

	/******** Footer **********/
	.kontakt1_div {
		flex-direction: column;
		align-items: center;
	}

	.footerImage {
		margin-bottom: 1rem;
		margin-right: 0;
	}

	.copyright_div {
		display: block;
	}

	
	/******** Formular **********/
	.formularButton {
		margin-top: 10rem;
	}

	.formularFooter {
		margin-top: -12.75rem;
	}

	.formularZeile {
		padding-bottom: 90px;
	}
}



/************* Lösungen anpassen (644px and up) *****************/
@MEDIA only screen and (max-width: 644px){
	.articelWrapper_second {
		flex-wrap: wrap;
		gap: 1rem;
	}
}



/************* Medium devices (landscape tablets, 541px and up) *****************/
@MEDIA only screen and (max-width: 541px){
	.scrollToTopDiv_visible {
		bottom: 130px;
	}

	/******** Formular **********/
	.formularButton {
		margin-top: 15rem;
	}

	.formularFooter {
		margin-top: -17.75rem;
	}

	.formularZeile {
		padding-bottom: 120px;
	}
}



/************* Medium devices (landscape tablets, 461px and up) *****************/
@MEDIA only screen and (max-width: 461px){
	.footerTextWrapper {
		justify-content: flex-start;
	}
}



/************* Lösungen anpassen (450px and up) *****************/
@MEDIA only screen and (max-width: 450px){
	/******** Formular **********/
	.formularButton {
		margin-top: 20rem;
	}

	.formularFooter {
		margin-top: -22.75rem;
	}
}



/************* Small devices (landscape tablets, 430px and up) *****************/
@MEDIA only screen and (max-width: 430px){
	.scrollToTopDiv_visible {
		bottom: 160px;
	}
}



/************* Very small devices (phones, 411px and up) *****************/
@MEDIA only screen and (max-width: 411px){
	.scrollToTopDiv_visible {
		bottom: 190px;
	}
}