/*
		2021 Februar - Tim - neues Layout
		16.10.2024 - Justus - Menue Mobile Layout Padding Bottom wieder einkommentiert 
		23.07.2025- Neele - Kontaktbox für Livechat eingebaut
*/
html {
	overflow-x: hidden;
	/* betrifft Desktop-Layout mit ausgeklapptem Menue */
}

body {
	/* font-family: 'Open Sans', sans-serif; */
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}

a,
.link {
	text-decoration: underline;
	color: #1a73ff;
	background-color: transparent;
}

.kategorie_ueberschrift {
	hyphens: auto;
}

a:link {}

a:visited {
	color: #0040a0;
	text-decoration: none;
}

a:hover {
	color: #0040a0;

}

a:active {
	color: #0040a0;
}

a:focus {
	color: #0040a0;
}

h1 {
	font-size: 1.6em;
	font-weight: 700;
	margin-top: 35px;
	margin-bottom: 30px;
	color: #080808;
	text-decoration: none;
}

h1 a {
	color: #080808;
	text-decoration: underline;
}

h2 {
	font-size: 1.4em;
	font-weight: 400;
	color: #080808;
	text-decoration: none;
	margin-bottom: 0.5em;
}

h2 a {
	color: #080808;
	text-decoration: underline;
}

h3 {
	font-size: 1.1em;
	font-weight: 400;
	margin-bottom: 0.2em;
	color: #080808;
	text-decoration: none;
}

h3 a {
	color: #080808;
	text-decoration: underline;
}

p {
	margin: 0;
	color: #4b4e55;
	font-weight: 200;
	font-size: 1em;
	line-height: 1.5em;
	/* padding: 1.5em; */
}

ul {
	padding-left: 3em;
}






.flaggen,
.flaggen>div,
.flaggen a {
	display: flex;
	align-items: center;
}

.flaggen {
	gap: 2em;
	justify-content: end;
	position: absolute;
	left: calc(100% - 17.5em);
	width: 16.5em;
	top: 50%;
	transform: translateY(-50%);
}

.flaggen>div {
	gap: 0.25em;
	opacity: 1;
	order: 1;
	transition: opacity 0.25s;
}

.flaggen img {
	width: 30px;
}

.flaggen>a {
	order: 2;
	font-size: 0.75em;
	color: #000;
	transition: color 0.25s;
}

.flaggen a img {
	filter: grayscale(100%);
	transition: filter 0.25s;
}

.flaggen a img:first-child {
	margin-right: 0.5em;
}

.flaggen a span {
	width: 0;
	overflow: hidden;
	transition: width 0.25s;
}

.flaggen .arrow {
	width: 0.5em;
	margin-left: 0.5em;
}

.flaggen a .arrow+.arrow {
	margin-left: 0;
	opacity: 0;
	transition: opacity 0.25s;
}

.flaggen>a:hover {
	color: #f60000;
}

.flaggen>a:hover img {
	filter: grayscale(0%);
}

.flaggen a:hover span {
	width: 3.5em;
}

.flaggen a:hover .arrow+.arrow {
	opacity: 1;
}

.flaggen a:hover~div {
	opacity: 0;
}

.flaggen>div span {
	display: flex;
	gap: 0.25em;
}

.flaggen>div span.laenderBez {
	flex-flow: column;
	color: #5d5d5d;
	gap: 0;
	font-size: 0.75em;
}


button,
.button,
a.button {
	/* Die Klasse .button kann fuer Links verwendet werden, die wie Buttons aussehen sollen */
	background-color: #1a73ff;
	color: #ffffff;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	/*border-bottom: 3px solid #0040a0;*/
	border-radius: 2px;
	padding-left: 1.8em;
	padding-right: 1.8em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

button>*,
.button>* {
	vertical-align: middle;
}

button>img,
.button>img {
	height: 22px;
}

button:hover,
.button:hover,
a.button:hover {
	/*box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.25);*/
	background-color: #1566e4;
	transition: background 0.25s;
	color: #ffffff !important;
	/* Es gibt abweichend definierte Styles, z.B. im Warenkorb, da ist die color im normalen Sutand grau. Wenn dieses Hover hier greift, dann sieht das grau im dunklen blau nicht gut aus. - Deshalb auch hier die Vordergrundfarbe definieren. */
}

/*button:focus, .button:focus, a.button:focus {
		box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.25);
}*/
button:active,
.button:active,
a.button:active {
	background-color: #64a0ff;
	border-bottom-color: #1a73ff;
}

.feste_breite {
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	/* fuer die rechten Tabs - die sind absolut */
}


.banner {
	padding-top: 34px;
	padding-bottom: 34px;
	text-align: center;
	position: relative;
}

.banner_logo_box {
	/*flex: 3 1 auto;*/
	position: relative;
	text-align: center;
	flex: 1;
}

.banner_logo {
	height: 62px;
}

.ajax_lade {
	visibility: hidden;
	position: absolute;
	top: 40px;
	right: 10%;
	width: 25px;
}

@media (max-width: 1100px) {
	.flaggen {
		position: static;
		transform: none;
		margin: 2em auto 0 auto;
	}
}

#layout_suche,
#filter_suche {
	margin-top: 1em;
}

.layout_suche {
	/*flex: 1 1 auto;*/
	flex: 1;
}

.layout_suche button {
	flex: 0 0 47px;
	padding: 0;
	background-color: #00cc7f;
	border: 1px solid #00cc7f;
	border-radius: 2px 0 0 2px;
}

.layout_suche button>img {
	margin: 0;
	width: auto;
	height: 20px;
	padding: 0;
}

.layout_suche input {
	flex: 1 1 auto;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;

	border: 1px solid #00cc7f;
}

.layout_suche input::placeholder {
	color: #a4a4a4;
	font-style: italic;
}

.layout_suche_element {
	position: relative;
}

.layout_suche_element input {
	padding-left: 1em;
	padding-right: 1em;
	height: 44px;
	border: 1px solid #CFD8DC;
	border-radius: 30px;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	/* die von den uebergeordneten Elementen angegebene Groesse findet hier keine Anwendung. Die Groesse muss hier separat gesetzt werden. Ab einer Mindestgroesse von 16px zoom iOS (iPhone) das Eingabefeld beim Focus nicht mehr heran. Der Zoom an dieser Stelle ist unnoetig und nicht gewuenscht. Mit dieser ausreichend grossen Schriftgroesse passt das auch */
	color: #009D66;
}

.layout_suche_element input::placeholder {
	color: #6A85A0;
}

.layout_suche_element button {
	position: absolute;
	right: -15px;
	top: 2px;

	background-color: transparent;
	color: #6A85A0;
	border: 0;
	font-size: 20px;
}

#layout_suche_ergebnisse {
	/* vorher hatte jede Suche seine Suchergebnisvorschau direkt unter dem Suche-Feld. die vorschau war aber in der Sidebar zu klein. Jetzt haben wir eine Vorschau, die ueber die ganze Seite geht */
	display: none;

	position: fixed;
	z-index: 1300;
	top: 5%;
	left: 2.5%;
	width: 95%;
	bottom: 5%;
	overflow: auto;

	box-shadow: 0px 3px 40px #2D3E50;

	background-color: #ffffff;

	border-left: 1px solid #CFD8DC;
	border-right: 1px solid #CFD8DC;
	border-bottom: 1px solid #CFD8DC;

	padding: 1.5%;
	box-sizing: border-box;
}

#layout_suche_ergebnisse_close {
	position: sticky;
	background-image: url(/bilder/layout/icon_arrow_faq_close.svg);
	background-repeat: no-repeat;
	height: 20px;
	width: 20px;
	left: 100%;
	top: 0%;
	cursor: pointer;
}

/*
						.layout_suche_ergebnisse {
								width: 100%;
								position: relative;

								display: none;
						}
						*/

.layout_suche_ergebnisse_notfound {
	font-style: italic;
	color: #a4a4a4;
	cursor: default;
	text-align: center;
	position: relative;
	top: calc(50% - 0.5em);
}

.layout_suche_ergebnisse_found {}

.layout_suche_ergebnisse_found .found {
	font-weight: bold;
	color: #009d66;
}

.layout_suche_ergebnisse_kategorie_ueberschrift {
	padding: 6px;
	border: 4px solid transparent;
	/* damit es beim hovern nicht springt */
	margin-top: 2em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	color: #000000;
	text-decoration: none;
}

.layout_suche_ergebnisse_kategorie_ueberschrift:first-child {
	margin-top: 0;
}

a.layout_suche_ergebnisse_kategorie_ueberschrift {
	color: #000000;
}

a.layout_suche_ergebnisse_kategorie_ueberschrift:hover {
	text-decoration: underline;
}

.layout_suche_ergebnisse_kategorie_ergebnisse {
	margin-left: 2em;
	column-width: 500px;
}

.layout_suche_ergebnisse_kategorie_ergebnisse a {
	display: grid;
	grid-template-areas:
		"bild text"
		"bild preis"
	;
	grid-template-columns: 120px 1fr;
	align-items: center;
	color: #000000;
	text-decoration: none;
	padding: 8px;
	border: 2px solid transparent;
	/* damit es beim hovern nicht springt */
	break-inside: avoid-column;
	gap: 0.5em;
}

.layout_suche_ergebnisse_kategorie_ergebnisse a:hover {
	padding: 8px;
	border: 2px solid #cdcdcd;
}

.layout_suche_ergebnisse_img {
	grid-area: bild;
}

.layout_suche_ergebnisse_kategorie_ergebnisse a img {
	width: 100%;
}

.layout_suche_ergebnisse_text {
	padding-left: 0.5em;
	grid-area: text;
	align-self: end;
}

.layout_suche_ergebnisse_abpreis {
	padding-left: 0.5em;
	grid-area: preis;
	align-self: start;
	font-weight: bold;
}

.layout_suche_ergebnisse_kategorie_more {
	margin-top: 3em;
	margin-bottom: 3em;
}

.layout_suche_ergebnisse_kategorie_more_block {
	margin-left: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
}


.layout_suche_ergebnisse_more {
	margin-top: 3em;
	margin-bottom: 3em;
}

.layout_suche_ergebnisse_more_block {
	margin-left: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.layout_suche_ergebnisse_kategorie_more a,
.layout_suche_ergebnisse_more a {
	box-shadow: 0px 3px 6px #00000029;
	border: 1px solid #009D66;
	border-radius: 22px;
	color: #000000;
	text-decoration: none;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: inline-flex;
	/* wegen responsive auf kleinen Bildschirmen, beim Zeilenumburch, duss der Button-Style erhalten bleibt */
	align-items: center;
}

.layout_suche_ergebnisse_kategorie_more a:hover,
.layout_suche_ergebnisse_more a:hover {
	box-shadow: 0px 0px 0px #00000000;
}

.layout_suche_ergebnisse_kategorie_more a img,
.layout_suche_ergebnisse_more a img

/* das "Plus"-Symbol */
	{
	margin-left: 15px;
}



.layout_box_main {}



.layout_link {
	position: fixed;
	left: 0;
	z-index: 400;
	background-color: #2D3E50;
	color: white;
	text-transform: uppercase;
	line-height: 44px;
	border-top-right-radius: 22px;
	border-bottom-right-radius: 22px;
	cursor: pointer;
	display: none;
	/* einschalten mit ".layout_group_sidebar_out .layout_link"  */
}

#layout_link_menu {
	top: 160px;
}

#layout_link_filter {
	top: 210px;
}

.layout_link>* {
	vertical-align: middle;
	display: inline-block;
}

.layout_link>span {}

.layout_link_bez_show .layout_link>span {
	padding-left: 1em;
}

.layout_link_bez_hide .layout_link>span {
	width: 0;
	overflow: hidden;
	transition: width 0.4s;
	text-align: right;
}

.layout_link_bez_hide .layout_link:hover>span {
	width: 60px;
}

.layout_link>img {
	padding-left: 1em;
	padding-right: 1em;
}



#layout_group {
	overflow-x: hidden;
	/* verhindert horizontalen Scrollbalken, wenn im Tablet-Modus das Menue eingefahren ist */
}

/* Whatsapp Anfang */

.hidden {
	display: none !important;
}

.livechatKontaktBox {
	width: 10.188em;
	height: 9.063em;
	background-color: #F9FAFA;
	border-radius: 3px;
	box-shadow: 0px 5px 10px #0000001F;
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 999;
	right: 0;
	top: 31%;
	transform: translateX(100%);
	transition-duration: 200ms;
}

.livechatKontaktBox.active {
	transform: translateX(0);
}

.livechatKontaktBox>span:first-of-type {
	padding: 0 22px;
	color: #6A85A0;
}

.livechatBildBox {
	width: 100%;
	height: 25%;
}

.livechatBildBox img {
	width: 4em;
	background-color: #F9FAFA;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;
	border: solid 1px #F9FAFA;
	margin-left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 2px 5px #0000001F;
}

.livechatKontaktBoxButton {
	height: 2.125em;
	width: 7.938em;
	background-color: #009D66;
	border-radius: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	margin-top: 0.625em;
	margin-left: 50%;
	transform: translateX(-50%);
	text-decoration: none;
	padding: 0 5px;
	box-shadow: 0px 3px 4px #2D3E5080;
	cursor: pointer;
	user-select: none;
}

.livechatKontaktBoxButton span {
	color: #FFFFFF;
}

.livechatKontaktBoxButton img {
	width: 1.25em;
}

.closeButton {
	width: 16px;
	height: 16px;
	box-shadow: 0px 2px 1px #0000001F;
	background-color: #F9FAFA;
	border-radius: 50%;
	position: fixed;
	right: 9px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.closeButton img {
	width: 10px;
	height: 10px;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;

}

.whatsappBox {
	display: none;
}

.whatsappBoxMobile {
	height: 3.125em;
	width: 11.25em;
	background-color: #009D66;
	border-radius: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	margin-top: 1.25em;
	margin-left: 50%;
	transform: translateX(-50%);
	text-decoration: none;
	padding: 0 5px;
	box-shadow: 0px 3px 4px #2D3E5080;
}


.whatsappBoxMobile span {
	color: #FFFFFF;
}

.whatsappBoxMobile img {
	width: 2em;
}

@media (max-width: 500px) {
	.whatsappBox {
		display: flex;
		flex-direction: column;
		margin-top: 1.875em;
	}
}

.menu_head {
	color: #0E0E0F;
	line-height: 56px;
	text-align: center;
	position: relative;
	margin-top: 33px;
	margin-bottom: 33px;
	margin-left: 40px;
	margin-right: 40px;
}

.menu_head .menu_head_text {
	font-size: 18px;
	cursor: pointer;
}

.menu_head .menu_head_close {
	position: absolute;
	right: 10%;
	top: 0;
	font-weight: bold;
	font-size: 10px;
	cursor: pointer;
}

.layout_sidebar>*:last-child {
	/* padding-bottom auf .layout_sidebar geht nicht. mit box-sizing: border-box auf .layout_sidebar geht es nur bei Chrome, nicht aber bei firefox - deshalb jetzt diese Loesung hier */
	margin-bottom: 60px;
}


.layout_menu_group {
	margin-top: 40px;

	margin-left: 40px;
	margin-right: 40px;
}

.layout_menu_group_head {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}

.layout_menu_group_head .layout_icon {
	vertical-align: middle;
	margin-right: 0.4em;
}

.layout_menu_group_head .layout_text {
	vertical-align: middle;
	margin-left: 0.4em;
}

.layout_sidebar #menu_bottom {
	-webkit-overflow-scrolling: touch;
	/* bewirkt, dass beim Safari (iPhone) weiches Scrolling aktiviert ist */
}

.layout_sidebar #menuItems {
	display: block;
}

#menuItems {
	position: relative;
}

.layout_sidebar #menueItems {
	padding-left: 0;
	padding-right: 0;
	border-right: none;
}

#menueItems .arrow {
	position: absolute;
	right: -34px;
}

.layout_sidebar #menueItems a
/* das ausklappbare Menue */
,
.layout_sidebar .layout_menue_item

/* die festen Menue-Punkte */
	{
	color: #3D546C;

	text-decoration: none;
	display: block;
	line-height: 50px;
	padding-left: 1em;
	text-align: left;

	background-image: url(/bilder/layout/menue/icon_head_item_produkte_inactive.svg);
	background-position: 93% center;
	background-repeat: no-repeat;
	background-size: 24px 24px;

	margin-top: 8px;


	box-shadow: 0px 1px 3px #3D546C66;
	border-radius: 3px;


}

.layout_sidebar #menuItems a:first-child {
	border-top: none;
}

#menueItems a.active {
	/* ausgeklappt */
	color: #009D66;
	text-align: center;
	font-style: italic;
	background-image: url('/bilder/layout/menue/icon_head_item_produkte_active.svg');
	background-position: 5% center;
	position: relative;
	/* so dass der Pfeil absolut passend positioniert wird */
}


.layout_sidebar .layout_menue_item.layout_menu_item_plane {
	background-image: url('/bilder/layout/menue/icon_plane.svg');
}

.layout_sidebar .layout_menue_item.layout_menu_item_haube {
	background-image: url('/bilder/layout/menue/icon_haube.svg');
}

.layout_sidebar .layout_menue_item.layout_menu_item_balkon {
	background-image: url('/bilder/layout/menue/icon_balkon.svg');
}

.layout_sidebar .layout_menue_item.layout_menu_item_markisentuch {
	background-image: url('/bilder/layout/menue/icon_markisentuch.svg');
}

.layout_sidebar .layout_menue_item.layout_menu_item_livechat {
	background-size: auto 100%;
	background-position: 100% center;
	cursor: pointer;
}

.layout_sidebar .layout_menue_item.layout_menu_item_telefon {
	background-image: url('/bilder/layout/menue/icon_telefon.svg');
	cursor: default;

	/* inactive */
	box-shadow: none;
	border: 1px solid #CFD8DC;
}

.layout_sidebar .layout_menue_item.layout_menu_item_faq {
	background-image: url('/bilder/layout/menue/icon_fragezeichen.svg');
}

.layout_menu_item_livechat_live {
	text-transform: uppercase;
}

.layout_menu_item_livechat_chat {
	text-transform: uppercase;
	font-weight: bold;
}

.layout_livechat {
	position: fixed;
	bottom: 20px;
	right: 10px;
	padding: 0.7em;
	border: 1px black;
	border-radius: 18px;
	z-index: 999;
	background-color: #009D66;
	cursor: pointer;
	color: white;
	text-decoration: none;
}

#menu_2 {}

.menu_2_item {
	display: none;
	background-color: #ffffff;
	/* das ist wichtig, wenn das Menue doch mal wo drueber geht (z.B. im Konfigurator). Das das nicht transparent ist */
	position: fixed;
	top: 0;
	border-top: 6px solid #009D66;
	z-index: 900;
	box-shadow: 0px 3px 6px #00000029;
	max-width: 421px;
	padding-left: 27px;
	padding-right: 27px;
	padding-bottom: 27px;
	height: calc(100vh - 27px);
	/* (100vh - (padding-top + padding-bottom)) */
	overflow: auto;

}

.menu2_listing {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	grid-column-gap: 20px;
}

.menu2_listing a {
	margin-bottom: 50px;
	text-align: center;
	color: #3D546C;
	font-size: 16px;
	text-decoration: none;
	word-break: break-word;
}

.menu2_listing a img {
	width: 100%;
	border-radius: 2px;
}

.menu2_listing a:hover {
	text-decoration: none;
}

.menu2_listing .kategorie_pfeil {
	display: none;
}

.menu2_listing .preis {
	display: block;
}

@media (max-width: 400px) {
	.menu2_listing {
		display: block;
		grid-template-columns: none;
		grid-column-gap: 20px;
	}

	.menu2_listing a {
		display: flex;
		align-items: center;
		text-align: left;
		margin-bottom: 10px;
		box-shadow: 0px 1px 3px #3D546C66;
		border-radius: 3px;
		overflow: hidden;
	}

	.menu2_listing .kategorie_bild {
		flex: 0 0 65px;
	}

	.menu2_listing .kategorie_bild img {
		width: 100%;
		display: block;
	}

	.menu2_listing .kategorie_ueberschrift {
		flex: 1 1 auto;
		font-size: 16px;
		padding-left: 25px;
	}

	.menu2_listing .kategorie_pfeil {
		display: block;
		flex: 0 0 65px;
		text-align: center;
	}

	.menu2_listing .kategorie_pfeil img {
		width: 20px;
	}
}

.menu2_muster {
	margin-top: 50px;
	margin-bottom: 50px;
	border-top: 1px solid #CFD8DC;
	padding-top: 50px;
	padding-bottom: 50px;
}

.menu2_muster_link {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

.menu2_muster_link_1 {
	flex: 0 0 auto;
}

.menu2_muster_link_1 img {
	width: 100%;
}

.menu2_muster_link_2 {
	color: #3D546C;
	padding-left: 2em;
	padding-right: 2em;
	flex: 0 0 140px;
}

.menu2_muster_link_3 {
	background-color: #3D546C;
	border-radius: 50px;
	color: #F9FAFA;
	flex: 0 0 auto;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1.8em;
	background-image: url(/bilder/layout/icon_muster_right.svg);
	background-position: 94% center;
	background-repeat: no-repeat;
}

@media (max-width: 450px) {
	.menu2_muster_link {
		flex-direction: column;
		text-align: center;
	}

	.menu2_muster_link_1 {
		flex: 0 0 auto;
	}

	.menu2_muster_link_1 img {
		width: 83px;
	}

	.menu2_muster_link_2 {
		flex: 0 0 auto;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.menu2_muster_link_3 {
		flex: 0 0 auto;
	}

	#layout_suche_ergebnisse_close {
		top: 2%;
		left: 93%;
	}
}

.layout_menu_social {
	display: flex;
	justify-content: space-around;
}

.layout_sidebar {
	border-top: 6px solid #009D66;
	background-color: #F9FAFA;

	font-size: 16px;

	height: 100vh;
	overflow: auto;
	position: fixed;

	box-shadow: 0px 3px 6px #00000029;

	z-index: 1200;

	scrollbar-width: thin;
}

@media (max-width: 500px) {
	.layout_sidebar {
		padding-bottom: 100px;
		/* fuer das mobile Menu */
		box-sizing: border-box;
		/* damit das padding-bottom greift */
	}
}

.layout_sidebar::-webkit-scrollbar {
	width: 8px;
}

.layout_sidebar::-webkit-scrollbar-thumb {
	/* muss gesetzt sein, sonst ist der Scroll-Button weiss */
	background: #cdcdcd;
}

.layout_sidebar::-webkit-scrollbar-track {
	background: #f0f0f0;
}

.layout_sidebar::-webkit-scrollbar-thumb:vertical:hover,
.layout_sidebar::-webkit-scrollbar-thumb:vertical:active {
	background: #a6a6a6;
}

.layout_sidebar_on {
	/* desktop */
	display: block;
	width: 320px;
}

.layout_sidebar_out {
	/* tablet menue weg / mobile / desktop, wenn Filter da sind */
	display: none;
	left: -400px;
	/* fuer Einfahr-Animation */
}

.layout_sidebar_over {
	/* tablet menue sichtbar */
	display: block;
	width: 320px;
	z-index: 1000;
	/* soll ja ueber alles auf der Seite drueber gehen */
	left: 0px;
	/* fuer Einfahr-Animation */
}



.layout_group_sidebar_on #layout_main {
	position: absolute;
	left: 320px;
	top: 0;
	width: calc(100% - 320px);
	/* insbesondere fuer sehr groesse Layouts > (etwa) 2200px */
}

.layout_group_sidebar_on #layout_menu .menu_head .menu1_head_close {
	/* beim Filter das Icon anlassen */
	display: none;
}

.layout_group_sidebar_over .menu_head .menu1_head_close {
	display: inline-block;
}

.layout_group_sidebar_over #layout_main {
	margin-left: 0;
	left: 320px;
}


.layout_group_sidebar_on .layout_link {
	display: none;
}

.layout_group_sidebar_out .layout_link {
	display: block;
}

.layout_group_sidebar_over .layout_link {
	display: none;
}


#layout_main {
	border-top: 6px solid #009D66;
	position: relative;
	/* fuer die Ein-Ausschiebe-Animation vom Menue */
}


@media print {
	.layout_sidebar {
		display: none;
	}

	.layout_group_sidebar_on #layout_main,
	.layout_group_sidebar_over #layout_main {
		position: static;
		width: 100%;
		left: auto;
		top: auto;
	}
}






.layout_leiste {
	/* breadcrumbs */
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 4.5%;
	margin-right: 4.5%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	font-size: 12px;
}

.layout_button {
	/* nicht nur fuer die Sidebar, sondern auch fuer die gleichaussehenden Button im Tablet-Layout auf der Startseite */
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	color: #ffffff;
	font-weight: lighter;
	text-align: right;
	border-radius: 50px;
	/* ausreichend gross */
	padding-left: 2em;
	padding-right: 2em;
	font-size: 14px;
	height: 44px;
	box-shadow: 0px 2px 3px #2D3E5080;
	cursor: pointer;
}

.layout_sidebar .layout_button {
	/* nur in der Sidebar, nicht am oberen rechten Bereich */
	margin-top: 12px;
}

a.layout_button {
	color: #ffffff;
}

.layout_button img {
	height: 22px;
	display: inline-block;
	vertical-align: middle;
}

.layout_button .banner_trenner {
	margin-left: 1em;
	margin-right: 1em;
}

.layout_button>*:first-child {
	flex: 4 0 0;
	text-align: center;
}

.layout_button>*:last-child {
	flex: 1 0 0;
	text-align: left;
}

.layout_button_warenkorb {
	/* den Warenkorb-Button gibt es 2x: 1x in der linken Leiste, 1x oben rechts */
	background-color: #009D66;
}

.layout_button_othermenu {
	background-color: #2d3e50;
	cursor: pointer;
	text-transform: uppercase;
}

.breadcrumb_erklaerung {
	display: inline-block;
	color: #00cc7e;
	text-transform: uppercase;
	font-weight: 400;
}

.breadcrumbs {
	color: #6c6c6c;
	display: inline-block;
	font-weight: 300;
}

.breadcrumbs>span::after {
	content: '>';
}

.breadcrumbs>span:last-child::after {
	content: '';
}

.breadcrumbs .item {
	display: inline-block;
	margin-top: 4px;
	margin-bottom: 4px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0;
	padding-bottom: 0;
	/* font-weight: bold; */
}

.breadcrumbs span.item {
	cursor: default;
}

.breadcrumbs a:link,
.breadcrumbs a:active,
.breadcrumbs a:visited {
	color: #6c6c6c;
	text-decoration: none;

}

.breadcrumbs a:hover {
	text-decoration: underline;
}

@media (max-width: 380px) {
	.layout_leiste {
		display: block;
	}
}

@media (max-width: 1000px) {
	.breadcrumb_erklaerung {
		display: none;
	}

	.menu_2_item {
		max-width: 100%;
		box-sizing: border-box;
	}
}

.layout_inhalt_alles {
	/* Dieses div gibt es nur einmal im Layout */
	min-height: 300px;
	/* dieser Wert wurde per Hand ermittelt, bei nicht ausgeklapptem Menue */
	/* Fuer die Konfis (Planen und Hauben) war 600px (bei Desktop-Laptop-Layout mit Hoehe 768) zuviel. Deshalb (testweise) jetzt mit 300px. */
}

.layout_inhalt {
	/* Dieses div kann es im Layout mehrmals geben */
	background-color: #ffffff;
	padding-bottom: 2em;
	margin-left: 4.5%;
	margin-right: 4.5%;
}

.layout_inhalt_mitte {}

.inhalt_mitte .text_before h1 {
	font-weight: normal;
	font-size: 18px;
	display: inline-block;
}


@media (max-width: 500px) {
	.layout_inhalt {
		border: 0;
		padding-left: 0;
		padding-right: 0;
	}
}







#layout_footer {
	color: #ffffff;
	clear: both;
	background-color: #3d546c;
	border-top: 6px solid #00cc7e;
	margin-top: 5em;
}

@media print {
	#layout_footer {
		display: none;
	}
}

#layout_footer,
#layout_footer li {
	font-size: 19px;
	font-weight: 300;
}

.layout_footer_leiste {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 2em;
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	box-sizing: border-box;
}

.layout_footer_leiste .layout_footer_leiste_box {
	flex: 0 1 10%;
}

.layout_footer_leiste_box_head {
	margin-top: 40px;
	margin-bottom: 12px;
	font-weight: 600;
	font-size: 1.2em;
}

.layout_footer_leiste_box_body {
	padding-right: 3%;
	margin-right: 3%;
}

@media (max-width: 650px) {
	.layout_footer_leiste {
		flex-wrap: wrap;
	}
}

@media (max-width: 500px) {
	.layout_footer_leiste {
		flex-wrap: nowrap;
		flex-direction: column;

	}

	.layout_footer_leiste .layout_footer_leiste_box {
		flex: 1 1 auto;
	}
}

#layout_footer ul {
	list-style-type: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -20px;
	/* wegen den Anstrichen - diese sollen links raus, so dass der Text mit der Ueberschrift buendig ist */
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 20px;
}

#layout_footer ul li {
	line-height: 32px;
}

#layout_footer ul li:first-child {
	margin-top: 0;
}

#layout_footer ul li:last-child {
	margin-bottom: 0;
}

#layout_footer ul li.liveChatTextLink {
	list-style-image: none;
}

ul .li.liveChatTextLink a:before,
ul li div a:before {
	content: url(/bilder/layout/icon_arrow_aufzaehlung.svg);
	display: inline-block;
	text-indent: -20px;
}

#layout_footer ul.layout_footer_service,
#layout_footer ul.layout_footer_kontakt,
#layout_footer ul.layout_footer_versand,
.text_inhalt ul {
	list-style-image: url(/bilder/layout/icon_arrow_aufzaehlung.svg);
}


#layout_footer ul.layout_footer_socialMedia {
	list-style: none;
	padding-left: 0px;
}

#layout_footer ul.layout_footer_socialMedia a {
	display: block;
	width: 28px;
	height: 28px;
	margin-right: 13px;
	margin-bottom: 13px;
	float: left;
}


#layout_footer a {
	color: #ffffff;
	text-decoration: none;
}

#layout_footer a:hover {
	text-decoration: underline;
}

.layout_footer_zahlsocial {
	background-color: #2d3e50;
	padding-left: 5%;
	padding-right: 5%;
	display: flex;
	align-items: start;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 1400px) {
	.layout_footer_zahlsocial {
		justify-content: flex-start;
	}
}

.layout_footer_zahlsocial_box_head {
	font-weight: 600;
	font-size: 1.2em;
	line-height: 48px;
	margin-top: 33px;
	margin-left: 20px;
	margin-right: 20px;
}

.layout_footer_zahlsocial_box_body {
	margin-top: 33px;
	margin-bottom: 33px;
	margin-left: 20px;
	margin-right: 20px;
}

.layout_footer_zahlsocial_box_body img {
	margin-right: 1em;
	height: 20px;
	border: 1px solid #CFD8DC;
	border-radius: 3px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 400px) {
	.layout_footer_zahlsocial_box_body img {
		margin-right: 0;
		height: auto;
		width: 100%;
		box-sizing: border-box;
	}
}


.layout_footer_copy {
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1.5em;
	padding-bottom: 100px;
	/* im mobilen Layout muss ausreichen Platz sein, so dass das mobile Menue unten noch drauf passt */
	background-color: #2d3e50;
	color: #99abb7;
	border-top: 1px solid #7a899e;
	font-size: 16px;

	text-align: center;
}

#layout_footer_copy_text {
	flex: 1 1 auto;
}

/*
				#layout_footer_seitenanfang {
						flex: 0 0 auto;
						/ - *padding-top: 3%;
						padding-bottom: 3%;* - /
						padding-left: 5%;
						cursor: pointer;
				}
				*/
#layout_footer .layout_footer_copy a {
	color: #99abb7;
}

.layout_footer_copy_separator {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

@media (max-width: 900px) {
	.layout_footer_copy {
		text-align: left;
	}

	.layout_footer_copy_name {
		display: block;
	}

	.layout_footer_copy_separator {
		display: none;
	}

	.layout_footer_copy_linkcreator {
		display: block;
	}
}

#layout_layer_entirePage {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

@keyframes layout_toTopButton_FadeIn {
	from {
		opacity: 0;
		visibility: hidden;
	}

	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes layout_toTopButton_FadeOut {
	from {
		opacity: 1;
		visibility: visible;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}


#layout_toTopButton {
	visibility: hidden;
	right: 0;
	bottom: 6.3%;
	cursor: pointer;
	position: fixed;
	z-index: 9999;
	/* bei einigen Seiten ist bei einigen Elementen der z-index gesetzt - mit dieser Angabe will ich aber wieder drueber sein */

	border: 1px solid #99abb7;
	text-align: center;
	width: 48px;
	height: 48px;
	line-height: 48px;
	background-color: rgba(255, 255, 255, 0.1);
}

#layout_toTopButton.show {
	visibility: visible;
	animation-name: layout_toTopButton_FadeIn;
	animation-duration: 3s;
}

#layout_toTopButton.hide {
	visibility: hidden;
	animation-name: layout_toTopButton_FadeOut;
	animation-duration: 3s;
}

#layout_toTopButton>img {
	width: 24px;
}




#layout_mobile_navigation {
	display: none;
}


@media (max-width: 500px) {
	.layout_group_sidebar_over .menu_1 .menu_head {
		display: none;
	}

	.layout_group_sidebar_over .menu_2 .menu_head {
		margin-left: 0;
		margin-right: 0;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.layout_sidebar_over {
		width: 100%;
	}

	.layout_group_sidebar_out .layout_link {
		display: none;
	}


	.layout_menu_group_mobilenone {
		display: none;
	}


	/* Navigation unten */
	#layout_mobile_navigation {
		display: flex;
		align-items: stretch;
		height: 80px;
		/*
				position: sticky;
				bei position: sticky ist die Leiste bei wenig HTML-Inhalt zu weit oben. Sie klebt unterhalb des contents
				bei position fixed muss sichergestellt werden, dass die untere Leiste keine benoetigten Inhalte verdeckt (wenn bis runter gescrollt wurde)
				*/
		position: fixed;
		bottom: 0;
		width: 100%;
		/* diese Angabe ist noetig, wenn es ueberbreite Elemente (z.B. grosse Tabelle) auf der Seite gibt, z.B. /top/insektenschutz/fliegengitter-pollenschutz.html */
		transition: bottom 0.25s ease-out;
		z-index: 1000;
		/* wenn Elemente im Seitenlayout einen hohen z-index haben. So dass das hier noch drueber liegt */
		margin-top: 4px;
		/* background-color: #2D3E50; */
		box-shadow: 0 0px 10px 0px #999;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
	}

	#layout_mobile_navigation>* {
		flex: 1 0 0;
		text-align: center;
		background-color: #2D3E50;
		color: #cfd8dc;
		cursor: pointer;

		/* center vertical */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* end center vertical */

		border-bottom: 4px solid #11273e;
		/* so dass beim aktivierten Zustand (Anhaengen der Klasse .active) das Bild nicht nach oben rutscht */
	}

	#layout_mobile_navigation>*:first-child {
		border-top-left-radius: 24px;
	}

	#layout_mobile_navigation>*:last-child {
		border-top-right-radius: 24px;
	}

	#layout_mobile_navigation>*.active {
		border-bottom: 4px solid #00CC7E;
	}

	#layout_mobile_navigation object {
		pointer-events: none;
		/* so ist das Object im HTML <a<-Tag klickbar */
		width: 100%;
		height: 24px;
		margin-bottom: 3px;
	}

	#layout_mobile_navigation>*.active object {
		height: 32px;
	}

	#layout_mobile_navigation span {
		font-size: 15px;
	}

	#layout_mobile_navigation>*.active span {
		display: none;
	}

	/* Ende Navigation unten */

}