/*Alle Breiten*/
html{
	margin:0;
	padding:0;
	height:100%;
	font-size:var(--text-font-size);
	font-family:var(--font-family);
	font-optical-sizing:auto;
	line-height:var(--text-line-height);
	font-weight:400;
	scroll-behavior:smooth;
	/* font-variation-settings:var(--font-condensed); */
	background-color:var(--bodyoverflow-background);
}

body{
	color:var(--text-color);
	min-height:100%;
	display:flex;
	flex-direction:column;
	background-color:var(--color-lightblue);
	max-width:1920px;
	margin:0 auto;
}

h1, 
h2, 
h3, 
h4, 
h5,
h6{
	display:flex;
	flex-direction:column;
	font-family:var(--font-family-header);
	font-size:var(--text-header-font-size);
	line-height:var(--text-header-line-height);
	padding:0;
	margin:0 0 1rem 0;
	color:var(--text-header-color);
	font-weight:700;
	
	& > span{
		font-family:var(--font-family);
		color:var(--text-subheader-color);
		font-size:0.75em;
		font-weight:400;
		font-variation-settings:var(--font-condensed);
	}
	
	&.medium{
		font-size:var(--text-header-medium-font-size);
	}
	
	&.small{
		font-size:var(--text-header-small-font-size);
	}
}

.intro{
	& h1, 
	& h2, 
	& h3, 
	& h4, 
	& h5,
	& h6{
		font-family:var(--font-family);
		font-size:1.25rem;
		color:var(--text-black);
		font-weight:400;
		
		& > span{
			font-size:1em;
		}
		
		&:nth-child(1){
			& > span:nth-child(1){
				font-family:var(--font-family-header);
			}
			
			& > span:nth-child(2){
				font-size:1.5em;
				margin-top:0.25rem;
				
				& > .firma > span:nth-child(1){
					color:var(--color-blue);
				}
			}
			
			& > span:nth-child(3){
				margin-top:0.75rem;
			}
		}
		
		&:nth-child(2){			
			& > span{
				margin-top:0.75rem;
				
				& > strong{
					color:var(--color-blue);
				}
			}
		}
	}
}

.textBoxHeader.noMargin h1,
.textBoxHeader.noMargin h2,
.textBoxHeader.noMargin h3,
.textBoxHeader.noMargin h4,
.textBoxHeader.noMargin h5{
	margin:0;
}

p{
	margin:1rem 0;
}

p:first-child{
	margin-top:0;
}

table{
	border-collapse:collapse;
	
	& tr{
		& > th{
			font-weight:700;
		}
		
		& > td,
		& > th{
			padding:0.25rem 0.25rem;
			vertical-align:top;
			text-align:left;
			
			&:first-child{
				padding-left:0;
			}
			
			&:last-child{
				padding-right:0;
			}
		}
		
		&:first-child{
			& > td,
			& > th{
				padding-top:0;
			}
		}
		
		&:last-child{
			& > td{
				padding-bottom:0;
			}
		}
	}
}

address{
	font-style:normal;
}

sup{
	line-height:0;
}

ol{
	list-style:decimal outside none;
}

ul{
	list-style:disc outside none;
}

ul, ol{
	margin:0 0 0 1rem;
	padding:0;
}

.error, .hinweis, pre{
	display:block;
	padding:0.75rem;
}

.error, .hinweis{
	margin-bottom:2rem;
}

.error, pre{
	border:2px solid #e1271f;
	background-color:#f9dfde;
	color:#000000;
}

.hinweis{
	border:2px solid #01466f;
	background-color:#e4f5ff;
	color:#000000;
}

.formError{
	border-color:#e1271f!important;
}

.formErrorBox{
	border:2px solid #e1271f!important;
	padding:0.5rem!important;
	border-radius:0.5rem;
}

.fileErrorBox{
	margin-top:1rem;
	color:#002440;
	background-color:#f9dfde;
	border:2px solid #e1271f;
	padding:1rem;
	font-weight:400;
}

.fileErrorBox:empty{
	padding:0;
	margin:0;
	border:0 none;
}

.goBackButton:after{
	content:'';
	display:none;
}

.goBackButton:before{
	content:'arrow_back';
	font-size:1.15rem;
	margin-right:0.25rem;
}



form{
	margin:0;
	padding:0;
}

.formrowsGroup{
	display:grid;
}

.formrows{
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}

.formrowsElement{
	display:flex;
	flex-direction:column;
	gap:0.25rem;
}

input, select, textarea, button{
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	font-weight:inherit;
	padding:0.5rem;
	box-sizing:border-box;
}

input[type="text"], input[type="email"], textarea{
	border:0.125rem solid var(--input-border-color);
	background:var(--input-background);
	width:100%;
	border-radius:0.5rem;
}

textarea{
	height:10em;
}

#emailbest{
	display:none;
}

.formcontrol{
	display:flex;
	align-items:baseline;
	gap:1rem;
	margin:2rem 0 0 0;
}

.formcontrol > *{
	display:block;
}

.pflicht:after{
	content:'*';
	color:#e1271f;
	vertical-align:super;
	line-height:1;
	font-size:0.8em;
	margin:0;
}

div.pflicht:after{
	margin:0 0 0 0.15em;
}

.formrows > .checkbox{
	display:flex;
	gap:0.5rem;
	align-items:baseline;
	flex-direction:row;
}

.formrows > .checkboxSelect{
	cursor:pointer;
}

/* Verkaufsformular: Angebotsart (Radio als klickbare Kacheln, Icon + Text) */
.verkaufAngebotChoose{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
}

.verkaufAngebotChoose__option{
	position:relative;
	display:block;
	margin:0;
	cursor:pointer;
	flex:1 1 0;
	min-width:7.5rem;
	max-width:100%;
}

.verkaufAngebotChoose__input{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
	opacity:0;
}

.verkaufAngebotChoose__input:focus-visible + .verkaufAngebotChoose__btn{
	outline:2px solid var(--input-border-color);
	outline-offset:2px;
}

.verkaufAngebotChoose__btn{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:0.5rem;
	width:100%;
	box-sizing:border-box;
	padding:0.5rem 0.65rem;
	border:0.125rem solid var(--input-border-color);
	background:var(--input-background);
	border-radius:0.5rem;
	transition:background-color 0.15s ease, border-color 0.15s ease;
	font-weight:600;
	font-variation-settings:var(--font-condensed);
	color:var(--input-color);
}

.verkaufAngebotChoose__option:hover .verkaufAngebotChoose__btn{
	background:rgba(var(--color-blue-rgb), 0.08);
}

.verkaufAngebotChoose__input:checked + .verkaufAngebotChoose__btn,
.verkaufAngebotChoose__option--active .verkaufAngebotChoose__btn{
	border-color:var(--color-blue);
	background:var(--color-lightblue);
}

.verkaufAngebotChoose__icon{
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:2.25rem;
	height:2.25rem;
}

.verkaufAngebotChoose__img{
	display:block;
	width:1.75rem;
	height:1.75rem;
	object-fit:contain;
}

.verkaufAngebotChoose__text{
	flex:1 1 auto;
	min-width:0;
	line-height:1.25;
	text-align:left;
}

.fileUpload{
	position:relative;
	color:var(--input-color);
	text-transform:uppercase;
	text-align:center;
	
	& > input{
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		right:0;
		bottom:0;
		opacity:0;
		cursor:pointer;
	}
	
	& > div{
		width:100%;
		padding:2rem;
		border:2px dashed var(--input-border-color);
		box-sizing:border-box;
		font-weight:700;
		
		& > div{
			&:nth-child(2){
				display:none;
			}
			
			& > div:nth-child(1){
				display:flex;
				align-items:center;
				justify-content:center;
				
				&:before{
					content:'attach_file';
					display:block;
					font-size:1.5rem;
				}
			}
		}
	}
	
	&.fileUploadOK,
	&:hover{
		& > div{
			border:2px solid var(--input-border-color);
			background-color:rgba(255,255,255,0.25);
		}
	}
	
	&.fileUploadOK{
		& > div{
			& > div{
				&:nth-child(2){
					display:block;
				}
				
				&:nth-child(1){
					display:none;
				}
			}
		}
	}
}

.formInProgress{
	display:block;
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	z-index:900;
	top:0;
	left:0;
	color:var(--color-black);
	text-align:center;
	
	& > div{
		height: 100%;
		background-color:var(--color-white);
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:3rem;
		padding:3rem;
		box-sizing: border-box;
		
		& > div:nth-child(1){
			width:8rem;
			aspect-ratio:1/1 auto;
			border:10px solid var(--color-green);
			border-bottom-color:var(--color-blue);
			border-radius:50%;
			display:inline-block;
			box-sizing:border-box;
			animation:rotation 2s linear infinite;
		}
	}
}

@keyframes rotation {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}



.materialIcon,
.textIcon > span,
.fileUpload > div > div > div:nth-child(1):before,
body > footer > div:nth-child(1) ul > li > a:before{
	font-family:'Material Symbols Outlined';
	font-weight:normal;
	font-style:normal;
	font-size:1em;
	display:inline-block;
	line-height:1;
	text-transform:none;
	letter-spacing:normal;
	word-wrap:normal;
	white-space:nowrap;
	direction:ltr;
}

.materialIconFill{
	font-variation-settings:
	'FILL' 1
}

.textIcon{
	display:inline-flex;
	gap:0.25em;
	align-items:baseline;
	
	& > span{
		font-size:1.1em;
		transform:translateY(0.20em);
	}
}

a, a:visited, a:hover{
	text-decoration:none;
	color:var(--link-color);
	text-decoration:var(--link-decoration);
	font-weight:var(--link-weight);
}

a:hover{
	color:var(--link-hover-color);
}

.button, .button:active, .button:visited, .button:hover{	
	border:var(--button-border-width) solid var(--button-border-color);
	font-size:1rem;	
	padding:0.25rem 1.5rem;
	color:var(--button-color);
	background:var(--button-background);
	display:inline-block;
	border-radius:var(--button-border-radius);
	text-decoration:none;
	font-weight:400;
	text-align:center;
	cursor:pointer;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

.button:hover{
	color:var(--button-hover-color);
	background:var(--button-hover-background);
	transform:scale(1.05);
}

.buttonAlt, .buttonAlt:active, .buttonAlt:visited, .buttonAlt:hover{
	border:var(--button-alt-border-width) solid var(--button-alt-border-color);
	color:var(--button-alt-color);
	background:var(--button-alt-background);
}

.buttonAlt:hover{
	color:var(--button-alt-hover-color);
	background:var(--button-alt-hover-background);
}

.imgCircle{
	border-radius:100%;
	overflow:hidden;
}

body > header{
	display:flex;
	flex-direction:column;
	gap:0;
	width:100%;
	height:var(--header-height);
	font-variation-settings:var(--font-condensed);
	
	& > div{
		width:100%;
		max-width:1920px;
		margin:0 auto;
		
		& > div{
			width:var(--main-width);
			margin:0 auto;
		}
	}
	
	& > div:nth-child(1){
		flex:1 1 auto;
		padding:1.25rem 0 1rem 0;
		background-color:var(--header-background);
		color:var(--header-color);
		
		& .firma{
			display:inline;
			
			& > span{
				color:var(--color-blue);
			}
		}
		
		& a,
		& a:visited,
		& a:hover{
			color:var(--color-blue);
		}
		
		& a:hover{
			color:var(--color-red);
		}
		
		& > div{
			display:grid;
			justify-content:center;
			grid-template-columns:max-content 3fr 4fr 3fr max-content;
			gap:2rem;
			
			& > div{
				display:flex;
				align-items:center;
			}
			
			& > div:first-child{
				display:block;
			}
			
			& > div:last-child{
				text-align:right;
				display:block;
			}
			
			& > div > img{
				width:100%;
			}
		}
		
		& .logo,
		& .logo:visited,
		& .logo:hover{
			display:block;
			width:100%;
			
			& > img{
				display:block;
				width:100%;
			}
		}
	}
	
	& > div:nth-child(2){
		background-color:var(--header2-background);
		color:var(--header2-color);
	}
}

#topNavigation{
	& .sideNavTrigger{
		cursor:pointer;
		display:flex;
		align-items:center;
		gap:0.25em;
		font-weight:700;
		
		& > div:nth-child(1){
			font-size:1.5em;
		}
	}
	
	& > nav{
		position:relative;
		display:flex;
		justify-content:space-between;
		height:var(--topnav-height, 0);
		font-variation-settings:var(--font-condensed);
		
		/* 1. Ebene */
		& > div{
			display:flex;
			align-items:center;
			height:100%;
			
			&:not(.flyout){
				position:relative;
			}
			
			& > *:first-child{
				padding-left:var(--topnav-padding, 0);
				padding-right:var(--topnav-padding, 0);
				
				&,
				&:visited,
				&:hover{
					color:var(--topnav-color);
					text-transform:uppercase;
					font-weight:700;
					font-size:1.2em;
				}
				
				&:hover,
				&.active{
					color:var(--topnav-hover-color);
				}
			}
			
			&.shopnavElement > *:first-child{
				padding-left:var(--topnavshop-padding, 0);
				padding-right:var(--topnavshop-padding, 0);
			}
			
			&:first-child > *:first-child{
				padding-left:0;
			}
			
			&:last-child > *:first-child{
				padding-right:0;
			}
			
			&.spacer{
				& > div{
					padding:0;
					height:50%;
					width:2px;
					background-color:var(--topnav-color);
				}
			}
			
			& > div:not(:first-child){
				display:none;
			}
		}
		
		/* 2. Ebene */
		& > div.open > div:not(:first-child),
		& > div.forceOpen > div:not(:first-child){
			display:block;
			position:absolute;
			top:var(--topnav-height, 0);
			left:0;
			width:100%;
			
			& > div{
				padding:2rem;
				border-bottom-left-radius:var(--topnav-sub-border-radius);
				border-bottom-right-radius:var(--topnav-sub-border-radius);
				background-color:var(--topnav-sub-background);
				color:var(--topnav-sub-color);
				display:flex;
				flex-direction:column;
				gap:0;
				width:200%;
				
				&.flyout{
					
				}
				
				& > div{
					display:flex;
					flex-direction:column;
					gap:0.5rem;
					
					& > a,
					& > a:visited,
					& > a:hover{
						color:var(--topnav-sub-link-color);
						display:block;
						font-weight:700;
						
						& img{
							display:block;
						}
					}
					
					& > a:hover,
					& > a.active{
						color:var(--topnav-sub-link-hover-color);
						text-decoration:underline;
					}
				}
			}
		}
		
		& > div.flyout > div:not(:first-child) > div{
			display:grid;
			grid-template-columns:repeat(6, 1fr);
			gap:2rem;
			width:auto;
		}
		
		& > div.flyout9 > div:not(:first-child) > div{
			grid-template-columns:repeat(9, 1fr);
			gap:1rem;
		}
		
		& > div.flyout8 > div:not(:first-child) > div{
			grid-template-columns:repeat(8, 1fr);
			gap:1rem;
		}
		
		& > div.flyout7 > div:not(:first-child) > div{
			grid-template-columns:repeat(7, 1fr);
		}
		
		/* 3. Ebene */
		& > div.open > div:not(:first-child),
		& > div.forceOpen > div:not(:first-child){
			& > div > div > ul{
				display:flex;
				flex-direction:column;
				gap:0.5rem;
				
				& > li{
					font-size:0.9em;
					
					& > a,
					& > a:visited,
					& > a:hover{
						color:var(--topnav-sub-link-color);
					}
					
					& > a:hover,
					& > a.active{
						color:var(--topnav-sub-link-hover-color);
						text-decoration:underline;
					}
				}
			}
		}
	}
}

body > main{
	flex:1 0 auto;
	background-color:var(--main-background);
	background-image:url(../picture/pico-berg-verlauf.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100% auto;
	overflow:clip;
}

.iframe > body > main{
	margin-top:0;
}

body > main > section{
	position:relative;
	
	& .sectionAnchor{
		position:absolute;
		left:0;
		height:0;
		width:0;
		top:0;
	}
}

body > main > section > div{
	background:var(--background);
	color:var(--text-color);
	
	&.contentWrapper{
		/* display:flex;
		gap:var(--gap-contentMedium);
		justify-content:center;
		overflow:hidden; */
		/* flex-direction:column; */
		
		& > div{
			padding:var(--innerPadding-content) 0 var(--innerPadding-content) 0;
		}
		
		&:first-of-type{
			& > div:first-of-type{
				padding-top:var(--padding-content);
			}
		}
		
		&:last-of-type{
			& > div:last-of-type{
				padding-bottom:var(--padding-content);
			}
		}
	}
	
	& > .center > .text{
		text-align:center;
	}
	
	& > .vollbild{
		& video{
			display:block;
			width:100%;
		}
		
		& img{
			display:block;
		}
	}
	
	& > .vollbildOverflow{
		width:100%;
		position:relative;
		margin-left:0;
		margin-right:0;
		overflow:hidden;
		display:flex;
		justify-content:center;
		flex-direction:row;
		gap:0;
		
		& > .sliderWrapper{
			width:100%;
			justify-content:center;
			/* align-items:center; */
			display:flex;
		}
	}
	
	& > .content{
		margin:0 auto;
		display:grid;
		width:var(--main-width);
		gap:var(--gap-contentMedium);
		
		&.immo-linkbox{
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			font-variation-settings:var(--font-condensed);
			gap:var(--gap-contentNarrow);
			
			& > *,
			& > *:visited,
			& > *:active,
			& > *:hover{
				background:var(--background);
				color:var(--link-color);
				text-align:center;
				
				& > div:nth-child(2){
					font-size:1.35em;
					font-weight:700;
				}
			}
		}
		
		&.immo-filter{
			gap:var(--gap-contentMedium);
		}
		
		&.immo-detail{
			gap:var(--gap-contentSmall);
		}
		
		&.contentVerkaufForm{
			width:var(--main-width-small);
			
			& .textBoxHeader{
				text-align:center;
			}
		}
		
		&.c1{
			gap:0;
		}
		
		&.c11s{
			width:var(--main-width-small);
			align-items:center;
			
			& > div:nth-child(1){
				& > div{
					justify-content:end;
				}
			}
		}
		
		&.bildLinkBoxen{
			font-variation-settings:var(--font-condensed);
			display:flex;
			flex-wrap:wrap;
			gap:var(--gap-contentNarrow);
		}
		
		&.bildLinkBoxenCenter{
			justify-content:center;
		}
		
		&.team{
			gap:var(--gap-contentMedium);
		}
		
		&.boxHeightStart{
			align-items:start;
		}
		
		&.overflow{
		}
		
		&.wm-pico-kreis{
			background-image:url(../picture/pico-kreis.png);
			background-repeat:no-repeat;
			background-size:var(--watermark-size);
			background-position:left center;
		}
		
		& .buttonBox {
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			gap:2rem;
		}
		
		&.rueckblick{
			& .textBoxHeader > div{
				font-size:var(--text-header-font-size);
				line-height:var(--text-header-line-height);
				padding:0;
				margin:0 0 1rem 0;
				color:var(--text-header-color);
				font-weight:700;
			}
		}
		
		& img{
			display:block;
		}
		
		& > *{
			/* border-radius:var(--border-radius);
			overflow:hidden; */
		}
		
		& > .bild{
			border-radius:0;
			
			& img{
				border-radius:var(--border-radius);
			}
		}
		
		& > .bild > div{
			max-height:100%;
			display:flex;
			align-items:center;
		}
		
		& > .text{
			display:flex;
			flex-direction:column;
			gap:var(--gap-contentNarrow); 
			background-color:var(--background);
			color:var(--text-color);
		}
		
		& .textBoxHeader{
			display:flex;
			flex-direction:column;
			gap:var(--gap-contentSmall);
			
			& h1,
			& h2,
			& h3,
			& h4,
			& h5,
			& h6{
				margin:0;
			}
		}
		
		&.contentKurse .textBoxHeader{
			display:flex;
			flex-direction:row;
			gap:2rem;
			align-items:center;
		}
		
		& .textBox{
			& > h1,
			& > h2,
			& > h3,
			& > h4,
			& > h5,
			& > h6{
				text-transform:none;
			}
		}
		
		& > .bildtextbox{
			overflow:hidden;
			position:relative;
			background-color:var(--background);
			color:var(--text-color);
			display:flex;
			flex-direction:column;
			
			& > .bildBox{
				display:flex;
				justify-content:center;
			}
			
			& > .textButtonBox{
				flex:1 1 auto;
				display:flex;
				flex-direction:column;
				gap:1rem;
				
				& > .textBox{
					flex:1 1 auto;
					text-align:center;
					
					& > h1,
					& > h2,
					& > h3,
					& > h4,
					& > h5{
						font-family:var(--font-family);
						font-size:1.35em;
						margin:0 0 0.75rem 0;
					}
				}
				
				& > .buttonBox{
				}
			}	
		}
		
		&.center > .bildtextbox{
			& .textBox{
				text-align:center;
			}
			
			& .buttonBox{
				text-align:center;
			}
		}
		
		& .jobStart{
			display:flex;
			flex-direction:column;
			gap:var(--gap-contentSmall);
			
			& > a,
			& > a:visited,
			& > a:hover{
				width:100%;
				display:flex;
				gap:1rem;
				background:var(--color-white);
				color:var(--color-blue);
				text-decoration:none;
				padding:0.5rem 1rem;
				
				& > div:nth-child(1){
					flex:1 1 auto;
					display:flex;
					flex-direction:column;
					
					& > div:nth-child(1){
						font-weight:600;
					}
					
					& > div:nth-child(2){
						color:var(--color-green);
					}
				}
				
				& > div:nth-child(2){
					display:flex;
					align-items:center;
					
					& > svg{
						width:1.25rem;
						
						& path{
							fill:var(--color-green)!important;
						}
					}
				}
			}
		}
		
		&.fullsize{
			width:100%;
		}
		
		&.centerContent{
			display:flex;
			justify-content:center;
		}
		
		&.centerBoxContent{
			& > div > div{
				display:flex;
				justify-content:center;
			}
		}
		
		& > .noGap{
			gap:0;
		}
	}	
}

.iframe > body > main > section > div{
	&.contentWrapper{
		padding:var(--innerPadding-content) 0 var(--innerPadding-content) 0;
		
		&:first-of-type{
			padding-top:var(--padding-contentNarrow);
		}
		
		&:last-of-type{
			padding-bottom:var(--padding-contentNarrow);
		}
	}
}

body > main > section.multiWrapper > .contentWrapper{
	flex-direction:column;
	gap:0;
}

main > section.noPadding{
	& > div,
	& > div:first-child,
	& > div:last-child{
		& > div{
			padding:0!important;
		}
	}
}

body > main > section.noColorChange > div.contentWrapper{
	&:first-of-type{
		& > div{
			padding-top:0;
		}
	}
}

.content .grafikWrapper{
	display:flex;
	justify-content:start;
	align-items:center;
}

.content.c11,
.content.c111,
.content.c1111,
.content.c21{
	& > *:last-child .grafikWrapper{
		justify-content:end;
	}
}

main > section > .bgColor-transparent > .content > *{
	&.boxColor-white,
	&.boxColor-lightblue,
	&.boxColor-blue,
	&.boxColor-grey{
		&.text,
		&.html,
		&.bildtextbox,
		&.linkbox{
			padding:var(--padding-box);
		}
	}
	
	&.boxColor-transparent{
		&.bildtextbox > .textButtonBox{
			padding-top:var(--padding-box);
		}
	}
}

main > section > .bgColor-white > .content > *{
	&.boxColor-lightblue,
	&.boxColor-blue,
	&.boxColor-grey{
		&.text,
		&.html,
		&.bildtextbox,
		&.linkbox{
			border-radius:var(--border-radius);
			padding:var(--padding-box);
		}
	}
	
	&.boxColor-white{
		&.bildtextbox > .textButtonBox{
			padding-top:var(--padding-box);
		}
	}
}

main > section > .bgColor-lightblue > .content > *{
	&.boxColor-white,
	&.boxColor-blue,
	&.boxColor-grey{
		&.text,
		&.html,
		&.bildtextbox,
		&.linkbox{
			border-radius:var(--border-radius);
			padding:var(--padding-box);
		}
	}
	
	&.boxColor-lightblue{
		&.bildtextbox > .textButtonBox{
			padding-top:var(--padding-box);
		}
	}
}

main > section > .bgColor-blue > .content > *{
	&.boxColor-white,
	&.boxColor-lightblue,
	&.boxColor-grey{
		&.text,
		&.html,
		&.bildtextbox,
		&.linkbox{
			border-radius:var(--border-radius);
			padding:var(--padding-box);
		}
	}
	
	&.boxColor-blue{
		&.bildtextbox > .textButtonBox{
			padding-top:var(--padding-box);
		}
	}
}

main > section > .bgColor-grey > .content > *{
	&.boxColor-white,
	&.boxColor-lightblue,
	&.boxColor-blue{
		&.text,
		&.html,
		&.bildtextbox,
		&.linkbox{
			border-radius:var(--border-radius);
			padding:var(--padding-box);
		}
	}
	
	&.boxColor-grey{
		&.bildtextbox > .textButtonBox{
			padding-top:var(--padding-box);
		}
	}
}

.contentJobs{
	& > .bildtextbox{
		& .textBox{
			& > div{
				font-size:1.5rem;
				
				&:first-child{
					font-weight:700;
				}
				
				&:last-child{
					font-size:1rem;
				}
			}
		}
	}
}

.jobDetail{
	display:flex;
	flex-direction:column;
	gap:1rem;
	
	& > div{
		&:nth-child(2){
			& h1,
			& h2,
			& h3,
			& h4,
			& h5{
				margin:0;
			}
		}
	}
}

.anspFilter{
	display:flex;
	gap:1rem;
	justify-content:center;
	flex-wrap:wrap;
	
	& > div{
		background:var(--button-background);
		color:var(--button-color);
		border:var(--button-border-width) solid var(--button-border-color);
		padding:0.25rem 1.5rem;
		border-radius:var(--button-border-radius);
		cursor:pointer;
		
		&.active{
			background:var(--button-hover-background);
			color:var(--button-hover-color);
		}
	}
}

.teamgrid{
	& > div{
		display:grid;
		gap:2rem;
	}
}

.teamelement{
	background:transparent;
	
	& .teamContent{
		& > div{
			height:100%;
			
			& > div{
				height:100%;
				background:var(--background);
				color:var(--text-color);
				/* border-radius:1.5rem;
				overflow:hidden; */
				
				& > div:nth-child(1){
					display:flex;
					justify-content:center;
					
					& > div{
						position:relative;
						
						& > div:nth-child(2){
							position:absolute;
							top:0;
							left:0;
							opacity:0;
							transition:opacity 0.5s;
						}
						
						&:hover{
							& > div:nth-child(2){
								opacity:1;
							}
						}
					}
				}
				
				&  > div:nth-child(2){
					padding:0.75rem;
					color:var(--team-color);
					
					& > div:nth-child(1){
						font-weight:700;
						font-size:1.2rem;
						color:var(--team-header-color);
						line-height:1;
					}
					
					& > div:nth-child(2){
						margin-top:0.5rem;
					}
					
					& > div:nth-child(3){
						margin-top:0.5rem;
					}
				}
			}
		}
	}
	
	&.teamelementColor-transparent{
		& .teamContent{
			& > div{
				& > div{
					border-radius:0;
					
					&  > div:nth-child(2){
						padding:0;
					}
				}
			}
		}
	}
}

.teamelement.teamslider{
	& .teamContent{
		height:100%;
	}
}

.teamelement.teamslider .swsTeamSwiper{
	/* width:100%; */
}

.content .kurse{
	display:grid;
	
	& > *,
	& > *:visited,
	& > *:hover{
		background:var(--background);
		color:var(--text-color);
		padding:1rem;
		border-left:1rem solid var(--color-blue);
		
		& > div:nth-child(1){
			font-weight:600;
		}
		
		& > div:nth-child(3){
			font-weight:600;
			margin-top:1rem;
		}
		
		&.kursArt-1{
			border-left:1rem solid #722123;
			
			& > div:nth-child(1){
				color:#722123;
			}
		}
		
		&.kursArt-2{
			border-left:1rem solid #77b41f;
			
			& > div:nth-child(1){
				color:#77b41f;
			}
		}
		
		&.kursArt-3{
			border-left:1rem solid #fdc400;
			
			& > div:nth-child(1){
				color:#fdc400;
			}
		}
	}
}

.kurs_info{
	table{
		border-collapse:separate;
	}
	
	table tr > td{
		padding:0.25rem;
	}
	
	table tr > td:last-child{
		padding-left:0.5rem;
	}
	
	&.kurs_info1{
		table tr > td:first-child{
			background:#722123;
			color:var(--color-white);
		}
	}
	
	&.kurs_info2{
		table tr > td:first-child{
			background:#77b41f;
			color:var(--color-white);
		}
	}
	
	&.kurs_info3{
		table tr > td:first-child{
			background:#fdc400;
			color:var(--color-white);
		}
	}
}

.contentDownloadListe {
	.downloads{
		display:flex;
		flex-direction:column;
		gap:1rem;
		max-width:800px;
		margin:0 auto;
		
		& .dl_head{
			font-size:1.5rem;
			color:var(--text-header-color);
		}
		
		& .dl_content{
			display:flex;
			flex-direction:column;
			gap:0.5rem;
			margin-top:0.5rem;
			
			& .dl_box{
				display:flex;
				justify-content:space-between;
				
				& > .dl_link{
					& > .dl_links{
						&.dl_link_pdf{
							display:flex;
							gap:0.25rem;
							align-items:center;
							
							&:before{
								content:'';
								display:block;
								width:1rem;
								height:1rem;
								background-image:url(../picture/icon_pdf.gif);
								background-size:contain;
								background-repeat:no-repeat;
								background-position:center center;
							}
						}
					}
				}
			}
		}
	}
}

.contentDownloadBoxen{
	.downloads{
		display:flex;
		flex-direction:column;
		gap:2rem;
		
		& .dl_container{
			& .dl_head{
				font-size:1.5rem;
				color:var(--text-header-color);
			}
			
			& .dl_content{
				margin-top:0.5rem;
				display:grid;
				
				& > .dl_box{
					background:var(--background);
					color:var(--text-color);
					padding:1rem;
					display:flex;
					gap:1rem;
					
					& .dl_text{
						& > div{
							color:var(--text-header-color);
							font-weight:600;
						}
					}
				}
			}
		}
	}
}

.cc11{
	display:grid;
	gap:var(--gap-contentNarrow);
	
	& > div:nth-child(1) img{
		width:100%;
	}
}

body > footer{
	& > div{
		& > div{
			& > div{
				margin:0 auto;
				width:var(--main-width);
			}
		}
	}
	
	& > div:nth-child(1){
		color:var(--footer-oben-color);
		
		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6{
			font-family:var(--font-family);
			color:var(--footer-oben-color);
			font-size:1.25rem;
			margin:0;
			text-transform:uppercase;
		}
		
		& a,
		& a:visited,
		& a:hover{
			color:var(--footer-oben-color);
		}
		
		& > div{
			background-color:var(--footer-oben-background);
			
			
			& > div{
				display:grid;
				grid-template-columns:var(--footer-grid-columns);
				grid-template-areas:var(--footer-grid-areas);
				column-gap:var(--footer-grid-columngap);
				row-gap:var(--footer-grid-rowgap);
				padding:2rem 0;
				background-image:url(../picture/pico-kreis-15.png);
				background-repeat:no-repeat;
				background-size:var(--footer-watermark-size);
				background-position-x:right;
				background-position-y:calc(100% + 3rem);
				
				& > div{
					& ul{
						margin:0;
						padding:0;
						list-style:none outside none;
						display:flex;
						flex-direction:column;
						gap:0;
						
						& > li > a{
							display:inline-flex;
							gap:0.25rem;
							
							&:before{
								content:'chevron_right';
								padding-top:0.25rem;
							}
						}
					}
				}
				
				& > div:nth-child(1){
					grid-area:footer1;
				}
				
				& > div:nth-child(2){
					grid-area:footer2;
				}
				
				& > div:nth-child(3){
					grid-area:footer3;
				}
				
				& > div:nth-child(4){
					grid-area:footer4;
				}
			}
		}
	}
	
	& > div:nth-child(2){
		color:var(--footer-unten-color);
		
		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6{
			color:var(--footer-unten-color);
		}
		
		& a,
		& a:visited,
		& a:hover{
			color:var(--footer-unten-color);
		}
		
		& > div{
			background-color:var(--footer-unten-background);
			padding:1rem 0;
			
			& > div{
				display:flex;
				justify-content:space-between;
				align-items:center;
				
				& > div:nth-child(1){
					& > ul{
						margin: 0;
						padding: 0;
						list-style: none outside none;
						display: flex;
						gap:0.25rem;
						
						& > li{
							display:flex;
							gap:0.25rem;
							
							& >span{
								display:flex;
								align-items:center;
								
								& > span{
									width:2px;
									height:65%;
									background-color:var(--footer-unten-color);
								}
							}
						}
						
						& > li:first-child{
							& > span{
								display:none;
							}
						}
					}
				}
				
				& > div:nth-child(2){
					/* display:flex;
					gap:1rem;
					height:2.5rem;
					
					& > *{
						display:block;
						
						& > img{
							height:100%;
						}
					} */
				}
			}
		}
	}
}

.sliderWrapper{
	width:100%;
}

.bildWrapper{
	width:100%;
}

.bildWrapper > img{
	display:block;
	width:100%;
	height:auto;
}

#blockedWrapper{
	display:none;
}

#blocked{
	padding:3rem 1.5rem 1.5rem 1.5rem;
}

/* Side-Navigation */
/* Overlay */
.sideNav__overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.5);
	z-index:9998;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease, visibility 0.3s ease;
}

.sideNav__overlay--active{
	opacity:1;
	visibility:visible;
}

/* Navigation Container */
.sideNav{
	position:fixed;
	top:0;
	left:0;
	width:var(--sidenav-width);
	max-width:85vw;
	height:100%;
	background-color:var(--sidenav-background);
	z-index:9999;
	transform:translateX(-100%);
	transition:transform 0.3s ease;
	display:flex;
	flex-direction:column;
	box-shadow:2px 0 10px rgba(0, 0, 0, 0.2);
	font-size:var(--sidenav-font-size);
	font-variation-settings:var(--font-condensed);
}

.sideNav--open{
	transform:translateX(0);
}

/* Top Header */
.sideNav__topHeader{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem 1.25rem;
	background-color:var(--sidenav-header-background);
	color:var(--sidenav-header-color);
	flex-shrink:0;
}

.sideNav__title{
	font-weight:700;
	font-size:1.125em;
}

.sideNav__close{
	background:transparent;
	border:0 none;
	color:var(--sidenav-header-color);
	cursor:pointer;
	padding:0.25rem;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:opacity 0.2s ease;
	
	& > .materialIcon{
		font-size:1.5rem;
	}
}

.sideNav__close:hover{
	opacity:0.8;
}

/* Panels Container */
.sideNav__panels{
	position:relative;
	flex:1 1 auto;
	overflow:hidden;
}

/* Panel */
.sideNav__panel{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow-y:auto;
	transform:translateX(100%);
	transition:transform 0.3s ease, visibility 0s 0.3s;
	display:flex;
	flex-direction:column;
	background-color:var(--sidenav-background);
	visibility:hidden;
}

.sideNav__panel--root{
	transform:translateX(0);
	visibility:visible;
	transition:transform 0.3s ease, visibility 0s;
}

.sideNav__panel--active{
	transform:translateX(0);
	visibility:visible;
	transition:transform 0.3s ease, visibility 0s;
}

.sideNav__panel--exiting{
	transform:translateX(-30%);
	visibility:hidden;
	transition:transform 0.3s ease, visibility 0s 0.3s;
}

/* Panel Header (Zur?ck-Navigation) */
.sideNav__header{
	padding:0;
	background-color:var(--sidenav-goback-background);
	color:var(--sidenav-goback-color);
	border-bottom:1px solid var(--sidenav-border-color);
	flex-shrink:0;
}

.sideNav__back{
	width:100%;
	display:flex;
	align-items:center;
	gap:0.5rem;
	padding:0.875rem 1.25rem;
	background:transparent;
	border:0 none;
	font-size:1rem;
	font-weight:500;
	cursor:pointer;
	text-align:left;
	
	& > .materialIcon{
		font-size:1.25rem;
	}
}

/* Liste */
.sideNav__list{
	list-style:none;
	margin:0;
	padding:0;
	flex:1 1 auto;
}

/* Item */
.sideNav__item{
	display:flex;
	align-items:stretch;
	border-bottom:1px solid var(--sidenav-border-color);
}

.sideNav__item:last-child{
	border-bottom:0 none;
}

/* Link */
.sideNav__link,
.sideNav__link:visited,
.sideNav__link:hover{
	flex:1 1 auto;
	display:flex;
	align-items:center;
	padding:0.75rem 1.25rem;
	color:var(--sidenav-color);
	text-decoration:none;
	transition:background-color 0.2s ease, color 0.2s ease;
}

.sideNav__link:hover{
	color:var(--sidenav-hover-color);
}

/* Expand Button (Pfeil f?r Untermen?) */
.sideNav__expand{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:4rem;
	background:transparent;
	border:0 none;
	color:var(--sidenav-expand-color);
	background-color:var(--sidenav-expand-background);
	cursor:pointer;
	transition:background-color 0.2s ease, color 0.2s ease;
	
	& > .materialIcon{
		font-size:1.5rem;
	}
}

.sideNav__expand:hover{
	color:var(--sidenav-expand-hover-color);
	background-color:var(--sidenav-expand-hover-background);
}


.shopSortHeader{
	& .textBoxHeader{
		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6{
			text-transform:lowercase;
			font-size:4rem;
			color:inherit;
			text-shadow:1px 1px 0 var(--color-white), -1px -1px 0 var(--color-white), 1px -1px 0 var(--color-white), -1px 1px 0 var(--color-white);
		}
	}
	
	& .bild{
		display:flex;
		justify-content:end;
		align-items:center;
	}
}

.shopSortHeader-shop-grp-desinfektion{
	& .textBoxHeader{
		color:var(--shop-grp-desinfektion);
	}
}

.shopSortHeader-shop-grp-spezialgipse{
	& .textBoxHeader{
		color:var(--shop-grp-spezialgipse);
	}
}

.shopSortHeader-shop-grp-modellsysteme{
	& .textBoxHeader{
		color:var(--shop-grp-modellsysteme);
	}
}

.shopSortHeader-shop-grp-majesthetik{
	& .textBoxHeader{
		color:var(--shop-grp-majesthetik);
	}
}

.shopSortHeader-shop-grp-spezi{
	& .textBoxHeader{
		color:var(--shop-grp-spezi);
	}
}

.shopSortHeader-shop-grp-picoline{
	& .textBoxHeader{
		color:var(--shop-grp-picoline);
	}
}

.shopSortHeader-shop-grp-silikone{
	& .textBoxHeader{
		color:var(--shop-grp-silikone);
	}
}

.shopSortHeader-shop-grp-strahl-und-poliermittel{
	& .textBoxHeader{
		color:var(--shop-grp-strahl-und-poliermittel);
	}
}

.shopSortHeader-shop-grp-rundumdenguss{
	& .textBoxHeader{
		color:var(--shop-grp-rundumdenguss);
	}
}

.shopSortHeader-shop-grp-cadcam{
	& .textBoxHeader{
		color:var(--shop-grp-cadcam);
	}
}

.meinBereichBox{
	background:var(--background);
	color:var(--text-color);
	display:grid;
	gap:1rem;
	
	& > div:nth-child(1){
		& > div:nth-child(1){
			font-size:1.35rem;
			font-weight:500;
			color:var(--text-header-color);
			margin-bottom:1rem;
		}
	}
	
	& > div:nth-child(2){
		display:flex;
		justify-content:center;
		align-items:center;
	}
	
	& .button{
		padding-right:1rem;
		padding-left:1rem;
	}
	
	& svg path,
	& svg polygon{
		fill:var(--color-blue);
	}
}

.bildLinkBox,
.bildLinkBox:visited,
.bildLinkBox:hover{
	position:relative;
	color:var(--color-white);
	text-decoration:none;
	font-weight:400;
	font-size:1rem;
	
	&.bildLinkBoxLight{
		color:var(--color-black);
		
		& > div:nth-child(2){
			& > div:nth-child(1){
				color:var(--color-blue);
			}
		}
	}
	
	& img{
		display:block;
	}
	
	& > div:nth-child(2){
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		box-sizing:border-box;
		padding:1em;
		display:flex;
		flex-direction:column;
		gap:0.15em;
		
		& > div:nth-child(1){
			position:relative;
			font-size:2em;
			font-weight:700;
			line-height:1.05;
			
			& > .bildLinkBoxAngebot{
				position:absolute;
				top:0;
				right:0;
				background-color:var(--color-red);
				color:var(--color-white);
				font-size:1rem;
				font-weight:400;
				padding:0.5rem 0.5rem;
				border-radius:0.5rem;
				line-height:1;
				
				& > strong{
					font-size:1.75em;
					font-weight:700;
				}
			}
		}
			
		& > div:nth-child(2){
			flex:1 1 auto;
		}
		
		& > div:nth-child(3){
			& .button,
			& .button:visited,
			& .button:hover{
				font-size:inherit;
			}
		}
	}
}

.bildLinkBoxEvent,
.bildLinkBoxEvent:visited,
.bildLinkBoxEvent:hover{
	display:flex;
	flex-direction:column;
	
	& > div:nth-child(1){
		aspect-ratio:16/10;
		overflow:hidden;
	}
	
	& > div:nth-child(2){
		position:static;
		background:var(--color-blue);
		color:var(--color-white);
		padding:1em;
		gap:0.5em;
		height:auto;
		flex:1 1 auto;
		
		& > div:nth-child(1){
			font-size:1.5em;
		}
		
		& > div:nth-child(2){
			display:flex;
			align-items:end;
		}
	}
}

.kontaktBox{
	display:flex;
	flex-direction:column;
	gap:1rem;
	
	& > div:nth-child(1){
		display:flex;
		gap:1rem;
		align-items:center;
		
		& > div:nth-child(1){
			width:5rem;
			
			& img{
				width:100%;
			}
		}
		
		& > div:nth-child(2){
			& > div:nth-child(1){
				font-weight:700;
			}
		}
	}
	
	& > div:nth-child(2){
		display:flex;
		flex-direction:column;
		
		& > div{
			display:flex;
			gap:1rem;
			justify-content:space-between;
			border-top:1px solid var(--color-blue);
			padding-top:0.25rem;
			padding-bottom:0.25rem;
			
			&:last-child{
				border-bottom:1px solid var(--color-blue);
			}
		}
	}
}

/* Galerieansicht mit Headerbild und Grid */
.galerieAnsicht{
	display:flex;
	flex-direction:column;
	gap:1rem;
	
	& img{
		display:block;
	}
}

.galerieHeader{
	& img{
		width:100%;
		height:auto;
	}
}

.galerieGrid{
	display:grid;
	grid-template-columns:repeat(var(--galerie-grid-spalten), 1fr);
	gap:1rem;
}

.galerieGridItem{
	display:flex;
	align-items:center;
	justify-content:center;
	
	& img{
		display:block;
		max-width:100%;
		height:auto;
	}
	
	& a{
		display:block;
	}
}

.slide__single{
	position:relative;
}

.slide__content{
	height:100%;
}

.slide__bg{
	display:flex;
	justify-content:center;
	
	& > div{
		width:var(--width-max);
	}
}

.slide__inner{
	display:flex;
	justify-content:center;
	width:100%;
	height:100%;
		
	& > div{
		display:grid;
		width:var(--width-max);
		grid-template-columns:repeat(2, calc(var(--width-max) / 2));
		grid-template-areas:"slidebild slidetext";
		
		& > div:nth-child(1){
			grid-area:slidebild;
			display:flex;
			justify-content:center;
			align-items:start;
		}
		
		& > div:nth-child(2){
			grid-area:slidetext;
			position:relative;
			display:flex;
			align-items:center;
			
			& > div{
				padding:var(--padding-box);
				font-size:1rem;
				font-weight:300;
				
				& > h6{
					font-size:2rem;
					font-weight:600;
					
					& > span{
						font-weight:300;
					}
				}
				
				& .greenText,
				& .redText{
					color:var(--color-white);
					padding:0.25rem 0.5rem;
					line-height:1.75;
					box-decoration-break:clone;
					font-size:1.2em;
				}
				
				& .greenText{
					background:var(--color-green);
				}
				
				& .redText{
					background:var(--color-red);
				}
			}
		}
	}
}

.slide__content__R > .slide__inner > div{
	grid-template-areas:"slidetext slidebild";
	
	& > div:nth-child(2){
		margin-left:calc((var(--width-max) - var(--main-width)) / 2);
	}
}

.slide__content__L > .slide__inner > div{
	& > div:nth-child(2){
		margin-right:calc((var(--width-max) - var(--main-width)) / 2);
	}
}

.slide__content__light{
	color:var(--color-white);
	
	& h6{
		color:inherit;
		
		& span{
			color:inherit;
		}
	}
}

.slide__content__box.slide__content__blue > .slide__inner > div > div:nth-child(2) > div{
	background:var(--color-blue);
}

.slide__content__box.slide__content__red > .slide__inner > div > div:nth-child(2) > div{
	background:var(--color-red);
}

.slide__content__box.slide__content__white > .slide__inner > div > div:nth-child(2) > div{
	background:var(--color-white);
}

.slide__content__box.slide__content__green > .slide__inner > div > div:nth-child(2) > div{
	background:var(--color-green);
}

.slideout,
.slideout:visited,
.slideout:hover{
	z-index:1000;
	display:grid;
	grid-template-columns:2fr 5fr;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url(../picture/link-picodent-digital.png);
	align-items:center;
	color:var(--color-white);
	position:fixed;
	top:33%;
	right:calc(((var(--slideout-width)) - ((var(--slideout-width) / 7) * 2)) * -1);
	aspect-ratio:283/74;
	width:var(--slideout-width);
	
	&.open{
		right:0;
	}
}

.video-js{
	width:100%;
	height:auto;
	aspect-ratio:16/9;
}

.swiper-button-prev,
.swiper-button-next{
	&,
	&:visited,
	&:active,
	&:hover{
		padding:0.35rem;
	}
}

/* Kundenstimmen */

.kundenstimme{
	background:var(--background);
	color:var(--text-color);
	border-radius:var(--border-radius);
	padding:var(--padding-box);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.5rem;
	text-align:center;
}

.kundenstimme-sterne{
	display:flex;
	gap:0.25rem;

	& > img{
		width:1rem;
		aspect-ratio:1/1;
		display:block;
	}
}

.kundenstimme-text{
	flex:1;
	font-variation-settings:var(--font-condensed);
}

.kundenstimme-name{
	font-weight:700;
	color:var(--text-header-color);
}

.kundenstimme-quelle{
	font-size:0.75rem;
	font-variation-settings:var(--font-condensed);
}

.mfp-title{
	text-align:center!important;
}