@charset "utf-8";
/* CSS Document */

:root{
/*	----------------------------------------------------------  SIZES  */	
	--full-width: 100%;
	--outer-width: 1600px;
	--inner-width: 1400px;
	
/*	---------------------------------------------------------  COLORS  */
	--nbb-green-light: 	#B5C6A4;
	--nbb-green-dark: 	#95AD7E;
	--nbb-yellow-light: #E4D374;
	--nbb-yellow-dark: 	#D9C13A;
	--nbb-terracotta: 	#BA6748;
	--nbb-blue: 		#9DC6CE; 
	
	
	--bg-color-test: rgba(255,0,0,0.1);

/*	----------------------------------------------------------  FONTS  */	
	--montserrat: 'Montserrat', 'Arial', sans-serif;
	--cormorant:  'Cormorant Garamond', 'Times New Roman', serif;
	
	--thin: 		100;
	--extralight: 	200;
	--light: 		300;
	--regular: 		400;
	--medium: 		500;
	--semibold: 	600;
	--bold: 		700;
	--black: 		800;
	--extrablack: 	900;
	
	--common-fontsize: 1.15rem;
}

* {
	box-sizing:border-box;
	overflow-wrap: break-word;
}

html, body {
	width:100%;
	height:auto;
	min-height:100vh;
	position:relative;
	
	padding:0;
	margin:0;
	
	font-family: var(--montserrat); 
	font-weight: var(--medium);
	font-style: normal;
	font-size: 93.75%;
	color: rgba(0,0,0,1);
}

html{
	/*	force scrollbars  */
	overflow-y:scroll;
	scroll-behavior: smooth;	
}

body{
	overflow: hidden;
}

body.info-fuer-kinder-und-jugendliche{
	background-color: var(--nbb-green-dark);
}
body.info-fuer-eltern{
	background-color: var(--nbb-green-light);
}

	h1, h2, h3, h4, h5, h6, p, td, ul, li, figure, button {
		margin:0;
		padding:0;
		font-weight:normal;
		border:0;
		outline:0;
		background-color:transparent;
	}

	a{
		text-decoration: none;
	}

	strong{
		font-family: var(--montserrat); 
		font-weight: var(--bold);
		font-style: normal;
	}

	.yellow { color:rgba(255,204,0,1); }


.flxR{
	display:flex;
	flex-flow:row;
	flex-wrap:nowrap;
}
.flxC{
	display:flex;
	flex-flow:column;
	flex-wrap:nowrap;
}
.flxJCA	{ justify-content:space-around; }
.flxJCB	{ justify-content:space-between; }
.flxJCC	{ justify-content:center; }
.flxJCE	{ justify-content:flex-end; }
.flxJCS	{ justify-content:flex-start; }

.flxAIC	{ align-items:center; }
.flxAIE	{ align-items:flex-end; }
.flxAIS	{ align-items:flex-start; }
.flxAIX	{ align-items:stretch; }

.flxWrp	{ flex-wrap:wrap; }

.fllW{
	width:100%;
	height:auto;
}
.fllH{
	height:100%;
	width:auto;
}
.fllWH{
	width:100%;
	height:100%;
}

.innerWidth{
	width:100%;
	max-width: var(--inner-width);
	margin:0 auto;
}

.grd{
	display: grid;
}

.grdCols3{ grid-template-columns: repeat(1, 1fr); }
@media screen and (min-width:666px){
	.grdCols3{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:999px){
	.grdCols3{ grid-template-columns: repeat(3, 1fr); }
}

.grdCols3b{ grid-template-columns: repeat(1, 1fr); }
@media screen and (min-width:666px){
	.grdCols3b{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:1222px){
	.grdCols3b{ grid-template-columns: repeat(3, 1fr); }
}

.grdCols3c{ grid-template-columns: repeat(1, 1fr); }
@media screen and (min-width:999px){
	.grdCols3c{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:1222px){
	.grdCols3c{ grid-template-columns: repeat(3, 1fr); }
}

.grdCols4{ grid-template-columns: repeat(1, 1fr); }
@media screen and (min-width:666px){
	.grdCols4{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:999px){
	.grdCols4{ grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width:1400px){
	.grdCols4{ grid-template-columns: repeat(4, 1fr); }
}


.gap15{ gap: 15px; }

.grdSpn2{ grid-column-start: 1; }
@media screen and (min-width:666px){
	.grdSpn2{ grid-column-start: span 2; }
}


/*	-------------------------------------------------------------------------------  COMMON CLASSES  */

.khnbb_preH,
h1{
	padding: 0 0 2rem;
	
	font-size: 2rem;
	font-weight: 300;
	font-style: normal;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 0.25rem;
}
	.home h1{
		font-size: 1.7rem;
	}
	@media screen and (min-width:444px){
		.home h1{
			font-size: 2rem;
		}
	}

h2{
	padding: 2rem 0 1.5rem;
	font-family: var(--montserrat);
	font-weight: var(--light);
	font-size: 1.5rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

h3{
	padding: 15px 0 8px;
	
	font-family: var(--montserrat);
	font-weight: var(--semibold);
	font-size: 1.25rem;
	letter-spacing: 0.1rem;
}

p, ul, ol{
	padding: 0 0 1rem;
	font-family: var(--montserrat);
	font-weight: var(--regular);
	font-size: 1.05rem;
	letter-spacing: 0.08rem;
	line-height: 1.5;
}
@media screen and (min-width:666px){
	p, ul, ol{
		font-size: 1.1rem;
	}
}

ul, ol{
	margin-left: 30px;
}

	li{
		font-weight: var(--regular);
	}






.khnbb_btn{
	width: fit-content;
	min-width: 250px;
	
	height: 57px;
	
	margin: 20px 0 0 -8px;
	padding: 0 50px 3px;
	
	font-size: 1.1rem;
	text-transform: uppercase;
	text-align: center;
	
	border-radius: 30px;
	
	background-color: var(--nbb-green-dark);
	
	transition: all 0.5s;
}
	.khnbb_btn:hover, .khnbb_btn:active {
		color: var(--nbb-green-dark);
		background-color: white;
	}

		.khnbb_btnWire{
			font-weight: var(--regular);
			color: white;
			background-color: transparent;

			border: 1px solid white;
		}

		.khnbb_btnWireGreen{
			font-weight: var(--regular);
			color: white;
			background-color: var(--nbb-green-dark);

			border: 1px solid white;
		}
		.khnbb_btnWireGreen:hover, .khnbb_btnWireGreen:active {
			border: 1px solid var(--nbb-green-dark)
		}


		.khnbb_btnWireYellow{
			font-weight: var(--regular);
			color: white;
			background-color: var(--nbb-yellow-dark);

			border: 1px solid white;
		}
		.khnbb_btnWireYellow:hover, .khnbb_btnWireYellow:active {
			color: var(--nbb-yellow-dark);
			border: 1px solid var(--nbb-yellow-dark)
		}



.khnbb_subline{
	width: 135px;
	height: 1.5px;
	
	margin: 0 0 20px;
	font-size: 0;
}
	.khnbb_sublineWhite{ background-color: white; opacity: 0.6; }
	.khnbb_sublineBlack{ background-color: black; opacity: 0.6; }
	.khnbb_sublineGreen{ background-color: var(--nbb-green-dark); opacity: 0.6; }




/*	----------------------------------------------------------------------------------  THE FIXATIV  */
.fixativ{
	top: 0px;
}





/*	-----------------------------------------------------------------------------  MOBILE NAVIGATION  */

.khnbb_navM{
	width: 100%;
	height: auto;
	min-height: 100dvh;
	
	position: fixed;
	left: 0px;
	top: -5000px;
	z-index: 900;
	
	padding: 120px 25px 50px;
	
	background-color: var(--nbb-green-dark);
	
	opacity: 0;
	
	transition: opacity 0.7s;
}

	.khnbb_logoMobile{
		display: block;
		padding: 0 0 80px;
		
		font-size: 2rem;
		font-weight: 300;
		font-style: normal;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.25rem;
		color: white;
	}
	
	@media screen and (min-width:666px){
		.khnbb_logoMobile{
			display: none;
		}
	}
	


	.khnbb_menuM{
		width: 100%;
		height: auto;
		
		margin: 0;
		padding: 0;
	}
		.khnbb_menuM ul{
		}
			.khnbb_menuM li{
				padding: 0 0 30px;

				font-size: 1.20rem;
				font-weight: var(--medium);
				text-transform: uppercase;
				text-align: center;

				list-style: none;
			}
				.khnbb_menuM li a{
					font-weight: var(--medium);
				}
				.khnbb_menuM a:link, .khnbb_menuM a:visited { color: rgba(255,255,255,1); }
				.khnbb_menuM a:hover, .khnbb_menuM a:active { color: rgba(255,255,255,0.5); }


			.khnbb_menuM li.khnbb_menuBlockM{
				padding-top: 50px;
			}

			.khnbb_menuMGap{
				margin-top: 50px;
			}



/*	---------------------------------------------------------------------------------------  HEADER  */
.khnbb_hdrWrp{
	width: 100%;
	max-width: var(--full-width);
	height: 70px;
	
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 1000;
		
	backdrop-filter: blur(5px);
}
@media screen and (min-width:666px){
	.khnbb_hdrWrp{
		height: 100px;
	}
}

	.khnbb_hdrBackground{
		width: 100%;
		height: 100%;

		position: absolute;
		left: 0px;
		top: 0px;

		opacity: 0.75;

		background-color: rgba(149,173,126,1);

		transition: all 1s;
	}

	/*
	.khnbb_headerGradient{
		width: 100%;
		height: 300px;

		position: absolute;
		top: 0;
		left: 0;

		background: linear-gradient(0deg, rgba(54,27,4,0) 0%, rgba(54,27,4,0.5) 100%);	

	}
	*/

	.khnbb_hdr{
		width: 100%;
		max-width: var(--outer-width);
		height: 100%;
			
		position: relative;
	}
	@media screen and (min-width:999px){
		.khnbb_hdr{
			padding: 0 50px;
			
		}
	}
	@media screen and (min-width:1444px){
		.khnbb_hdr{
			justify-content: space-between; 
		}
	}



	/*	-----------------------------  mobile menu (hamburger) button  */
		.navBurgerBtn{
			width: 40px;
			aspect-ratio: 1 / 1;
			
			display: block;
			
			position: absolute;
			left: 25px;
			top: 50%;
			transform: translateY(-50%);
			
		/*	background-color: rgba(255,255,0,1);  */
		}
		@media screen and (min-width:666px){
			.navBurgerBtn{
				width: 50px;
			}
		}
		@media screen and (min-width:1444px){
			.navBurgerBtn{
				display:none;
			}
		}

				.navBurgerLines{
					width: 100%;
					height: 14px;

					position:absolute;
					top: 50%;
					transform: translateY(-50%);
				}
					.navBurgerLine{
						width: 100%;
						height: 2px;

						position:absolute;
						left: 0%;

						background-color: rgba(255,255,255,1);

						--1stheight: 	0px;
						--2ndheight: 	6px;
						--3rdheight: 	12px;
						
						--rotationUp: 	45deg;
						--rotationDown: -45deg;

						--animduration: 0.5s;

						transition:all 0.5s;
					}
						.navBurgerLine:nth-of-type(1){ top: var(--1stheight); }
						.navBurgerLine:nth-of-type(2){ top: var(--3rdheight); }

						.topslant{
							animation: topslant var(--animduration) forwards;
						}
						.topstraight{
							animation: topstraight var(--animduration) forwards;
						}

						@keyframes topslant {
							0% {	transform: rotate(0);					top: var(--1stheight); }
							50% {	transform: rotate(0);					top: var(--2ndheight); width: 100%; left: 0%; }
							100% {	transform: rotate(var(--rotationUp));	top: var(--2ndheight); width: 70%; left: 15%; }
						}

						@keyframes topstraight {
							0% {	transform: rotate(var(--rotationUp));	top: var(--2ndheight); width: 70%;  left: 15%;}
							50% {	transform: rotate(0);					top: var(--2ndheight); width: 100%; left: 0%; }
							100% {	transform: rotate(0);					top: var(--1stheight); }
						}

						.bottomslant{
							animation: bottomslant var(--animduration) forwards;
						}
						.bottomstraight{
							animation: bottomstraight var(--animduration) forwards;
						}

						@keyframes bottomslant {
							0% {	transform: rotate(0);					top: var(--3rdheight); }
							50% {	transform: rotate(0);					top: var(--2ndheight); width: 100%; left: 0%; }
							100% {	transform: rotate(var(--rotationDown));	top: var(--2ndheight); width: 70%; left: 15%;  }
						}

						@keyframes bottomstraight {
							0% {	transform: rotate(var(--rotationDown)); top: var(--2ndheight); width: 70%; left: 15%;  }
							50% {	transform: rotate(0deg);				top: var(--2ndheight); width: 100%; left: 0%;  }
							100% {	transform: rotate(0deg);				top: var(--3rdheight); }
						}




	/*	-------------------------------------------------------  logo  */
		
		.khnbb_hdrLogo{
			width: 50px;
			aspect-ratio: 70 / 40;
			display: block;
			
			font-size: 0.8rem;
			transition: all 1s;
		}
		@media screen and (min-width:666px){
			.khnbb_hdrLogo{
				width: 70px;
			}
		}
			
			.khnbb_hdrLogo svg path {
				fill: white;
			}

			.khnbb_hdrLogo a{ font-weight: var(--light); transition: all 0.5s; }
			.khnbb_hdrLogo a:hover, .khnbb_hdrLogo a:active { opacity: 0.5; }



	/*	-----------------------------------------  desktop navigation  */
		.khnbb_hdrNavD{
			display: none;
		}
		@media screen and (min-width:1444px){
			.khnbb_hdrNavD{
				width: fit-content;

				display: flex;
				position: relative;
			}
		}


			.khnbb_hdrMenuD{
				width: fit-content;
				padding: 0;
			}

				.khnbb_hdrMenuD li{
					padding: 0 15px;

					list-style: none;

					font-family: var(--montserrat);
					font-size: 1rem;
					font-weight: 400;
					letter-spacing: 0.1rem;
					text-transform: uppercase;
					white-space: nowrap;
				}

				.khnbb_hdrMenuD li a{
					transition: color 1s;
					transition: opacity 0.25s;
					
					color: rgba(255,255,255,1);
				}

				.khnbb_hdrMenuD li.menu-item{
					transition: color 1s;
				}
				/*
				.khnbb_hdrMenuD li:last-of-type{
					padding-right: 0;
				}
				*/
				.khnbb_hdrMenuD a:link, .khnbb_hdrMenuD li a:visited { opacity: 1; }
				.khnbb_hdrMenuD a:hover, .khnbb_hdrMenuD li a:active, .khnbb_hdrMenuD li a:focus { opacity: 0.5; }



	/*	-----------------------------------------------  social icons  */
		.khnbb_hdrSocialIcons{
			position: absolute;
			
			right: 10px;

		}
		@media screen and (min-width:666px){
			.khnbb_hdrSocialIcons{
				right: 20px;
			}
		}
		@media screen and (min-width:1444px){
			.khnbb_hdrSocialIcons{
				position: relative;
				
				right: unset;
				
				margin-right: -20px;
			}
		}

			.khnbb_hdrIconSocial{
				width: 25px;
				aspect-ratio: 1 / 1;
				
				display: block;
				margin: 4px 5px 0;
				
				transition: opacity 0.25s;
				
				fill: rgba(255,255,255,1);
			}
			@media screen and (min-width:666px){
				.khnbb_hdrIconSocial{
					margin: 4px 10px 0;
				}
			}

				.khnbb_hdrIconSocial:hover, .khnbb_hdrIconSocial:active, .khnbb_hdrIconSocial:focus { opacity: 0.5; }
				.khnbb_hdrIconSocial svg{
					width: 100%;
				}
					.khnbb_svgPath{
						transition: fill 1s;
					}



	/*	------------------------------------------------------------------------------------------  JOB BUTTON  */
		.khnbb_hdrJobsButtonOverlay{

			width: 70px;
			aspect-ratio: 1 / 1;

			position: fixed;
			top: 60px;
			right: 15px;
			transform: scale(1);

			transition: transform 0.25s;

			font-size: 1rem;
			text-transform: uppercase;
			color: white;

			border-radius: 50%;

			background-color: var(--nbb-yellow-dark);
		}
		@media screen and (min-width:666px){
			.khnbb_hdrJobsButtonOverlay{
				width: 80px;
				top: 80px;
				right: 30px;
			}
		}
		@media screen and (min-width:1444px){
			.khnbb_hdrJobsButtonOverlay{
				right: 40px;
			}
		}
		@media screen and (min-width:1380px){
			.khnbb_hdrJobsButtonOverlay{
				right: 50%;
				translate: calc( var(--outer-width) / 2 - 150px );
			}
		}

			.khnbb_hdrJobsButtonOverlay svg{
				width: 18px;
				aspect-ratio: 1 / 1;

				margin: -2px 0 5px;
			}
			@media screen and (min-width:666px){
				.khnbb_hdrJobsButtonOverlay svg{
					width: 23px;
				}

			}





/*	-------------------------------------------------------------------------------  SPECIAL HEADER: PLAIN  */

.khnbb_hdrJustClose{
	width: 30px;
	aspect-ratio: 1 / 1;
	
	position: fixed;
	right: 30px;
	top: 30px;

	opacity: 1;
	
	transition: opacity 0.5s;
}

	.khnbb_hdrJustClose:hover { opacity: 0.5; }

	.info-fuer-kinder-und-jugendliche .khnbb_hdrJustClose svg path,
	.info-fuer-eltern .khnbb_hdrJustClose svg path{
		fill: white;
	}










/*	-----------------------------------------------------------------------------------------  MAIN  */
.khnbb_mainWrp{
	width: 100%;
	max-width: var(--full-width);
}

	.khnbb_keyvisualDesktop{
		width: 100%;
		aspect-ratio: 7 / 2;

		display: none;

		background-color: rgba(0,0,0,0.2);
		background-size: cover;
		background-repeat: no-repeat;
	}
	@media screen and (min-width:999px){
		.khnbb_keyvisualDesktop{
			display:block;
		}
	}

	.khnbb_keyvisualMobile{
		width: 100%;
		height: 444px;

		display: block;

		background-color: rgba(0,0,0,0.2);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	@media screen and (min-width:999px){
		.khnbb_keyvisualMobile{
			display:none;
		}
	}

	.khnbb_main{
		width:100%;
		max-width: var(--inner-width);
		
		padding: 100px 25px;
	}
		@media screen and (min-width:666px){
			.khnbb_main{
				padding: 100px 50px;
			}
		}


		.khnbb_mainPlain{
			padding-top: 200px;
		}

		.khnbb_mainBlock{
			position: relative;
		}

			.khnbb_halfBlockWrp{
				width: 100%;
				position: relative;
			}
			@media screen and (min-width:999px){
				.khnbb_halfBlockWrp{
					flex-flow: row;
					justify-content: center;
					align-items: flex-start;
				}
			}

				.khnbb_halfBlock{
					width: 100%;
				/*	max-width: var(--half-block-width);  */
					
					padding: 30px 25px;
				}
				@media screen and (min-width:999px){
					.khnbb_halfBlock{
						padding: 30px 5% 80px;
					}
				}


		#top,
		#zitat,
		#leistungen,
		#team,
		#zitat2,
		#therapiediagnostik,
		#kosten,
		#jobs,
		#karte,
		#kontakt{
			scroll-margin-top: 58px;
		}
		@media screen and (min-width:750px){
			#top,
			#zitat,
			#leistungen,
			#team,
			#zitat2,
			#therapiediagnostik,
			#kosten,
			#jobs,
			#karte,
			#kontakt{
				scroll-margin-top: 98px;
			}
		}

		#info{
			scroll-margin-top: 150px;
		}
		@media screen and (min-width:750px) {
			#info{
				scroll-margin-top: 150px;
			}
		}

		.info-fuer-kinder-und-jugendliche,
		.info-fuer-eltern{
			color: white;
		}





	/*	-------------------------------------------------------------------------  FRONT PAGE BLOCKS  */

	/*	----------------------------------------------------------  INTRO BLOCK  */

		.khnbb_blockTop{
			width: 100%;

			height: auto;
			min-height: calc(100vh + 80px);
			
			position: relative;

			background-color: rgba(235,235,235,1);
		}
		@media screen and (min-width:2400px){
			.khnbb_blockTop{
				background-size: contain;
			}
		}

			.khnbb_keyVisual{
				width: 100%;
				height: 100%;

				position: absolute;
				top: 0px;
				left: 0px;
				
				background-size: cover;
				background-repeat: no-repeat;
			}

				.khnbb_keyVisualDesktop{
					display: none;
					z-index: 1;
					background-position: center center;
				}
				@media screen and (min-width:666px){
					.khnbb_keyVisualDesktop{
						display: block;
					}
				}

				.khnbb_keyVisualMobile{
					display: block;
					z-index: 2;
					background-position: center center;
				}
				@media screen and (min-width:666px){
					.khnbb_keyVisualMobile{
						display: none;
					}
				}




			.khnbb_blockTop .khnbb_overlay{
				width: 100%;
				
				position: absolute;
				left: 50%;
				top: 150px;
				z-index: 100;
				
				translate: -50% 0;
				
			/*	background-color: rgba(0,0,0,0.08);  */
			}
			@media screen and (min-width:999px){
				.khnbb_blockTop .khnbb_overlay{
					width: 50%;
					top: 50%;
					align-items: flex-start;
					translate: -75% -35%;
				}
			}
			@media screen and (min-width:1250px){
				.khnbb_blockTop .khnbb_overlay{
					translate: -67% -35%;
				}
			}

				.khnbb_blockTop h1{
					padding: 0;
					font-size: 1.1rem;
					text-align: center;	
					color: black;
				}
				@media screen and (min-width:350px){
					.khnbb_blockTop h1{
						font-size: 1.25rem;
					}
				}
				@media screen and (min-width:400px){
					.khnbb_blockTop h1{
						font-size: 1.5rem;
					}
				}
				@media screen and (min-width:999px){
					.khnbb_blockTop h1{
						padding-bottom: 1%;
						font-size: 1.8vw;
						text-align: left;	
					/*	color: black;  */
					}
				}

				.khnbb_blockTop h2{
					padding: 1rem 0;
					font-size: 0.9rem;
					text-align: center;	
					color: black;
					text-transform: uppercase;
				}
				@media screen and (min-width:400px){
					.khnbb_blockTop h2{
						font-size: 1.1rem;
					}
				}
				@media screen and (min-width:999px){
					.khnbb_blockTop h2{
						padding: 0.5rem 0;
						font-size: 1.3vw;
						text-align: left;	
						color: black;
					}
				}

				.khnbb_blockTop .khnbb_btn:link, .khnbb_blockTop .khnbb_btn:visited { color: rgba(255,255,255,1); }
				.khnbb_blockTop .khnbb_btn:hover, .khnbb_blockTop .khnbb_btn:active, .khnbb_blockTop .khnbb_btn:focus { color: rgba(0,0,0,1); background-color: white; }





	/*	---------------------------------------------------------------  INFO BLOCKS KIDS & PARENTS  */
	/*
		.khnbb_blockInfo{
			width: 90%;
			max-width: 600px;
			
			margin: -80px 5% 0 5%;
			z-index: 200;
		}
		@media screen and (min-width:999px){
			.khnbb_blockInfo{
				max-width: var(--outer-width);
				flex-flow: row;
				align-items: stretch;
			}
		}


			.khnbb_infoKids,
			.khnbb_infoParents{
				width: 100%;
				height: auto;

				color: white;
			}
			@media screen and (min-width:999px){
				.khnbb_infoKids,
				.khnbb_infoParents{
					width: 50%;
				}
			}

			.khnbb_infoKids{
				padding: 50px;
				background-color: var(--nbb-green-dark);
			}
			@media screen and (min-width:1600px){
				.khnbb_infoKids{
					padding: 20px 80px 50px 150px;
				}
			}

			.khnbb_infoParents{
				padding: 50px;
				background-color: var(--nbb-green-light);
			}
			@media screen and (min-width:1600px){
				.khnbb_infoParents{
					padding: 20px 120px 50px 100px;
				}
			}
			*/


/*	--------------------------------------------------------------  INFO BLOCK PRINCIPLES (2025)  */

    .khnbb_blockPrinciples{
        width: 90%;

        margin: -80px 5% 0 5%;
		padding: 50px 50px 50px;
        z-index: 200;

		border: 1px solid var(--nbb-green-dark);
		background-color: rgba(255,255,255,0.85);

		backdrop-filter: blur(7px);
    }
    @media screen and (min-width:999px){
        .khnbb_blockPrinciples{
            max-width: var(--outer-width);
            flex-flow: row;
            align-items: stretch;
        }
    }

		.khnbb_principlesWrp{
			width: 100%;
			gap: 30px 50px;
		}

			.khnbb_principleWrp{
				color: var(--nbb-green-dark);
				/*	background-color: rgba(255,255,255,0.04);  */
			}

				.khnbb_principleWrp svg{
					height: 100%;
					margin: 0 0 0 -2px;
				}
					.khnbb_principleWrp svg path,
					.khnbb_principleWrp svg circle{
						fill:none;
						stroke:currentColor;
						stroke-miterlimit:10;
						stroke-width:25px;		/*	32  */
					}

				.khnbb_principleWrp h2{
					font-weight: var(--light);
					padding: 10px 0 0.75rem;
				}

				.khnbb_principleWrp p{
					color: black;
				}


/*	--------------------------------------------------------------------------  QUOTATION BLOCK  */

		.khnbb_blockQuote{
			width: 100%;

			padding: 100px 25px 100px;
		}

			.khnbb_blockQuote img{
				display: block;

				margin: 0 0 70px;
			}

			.khnbb_blockQuoteQuote{
				width: 100%;
				max-width: 880px;
			}
				.khnbb_blockQuoteQuote p{
					font-weight: var(--light);
					font-size: 1.5rem;
					text-align: center;
					line-height: 1.4;
				}
				.khnbb_blockQuoteQuote p em{
					font-family: var(--cormorant);
					font-size: 1.9rem;
					line-height: 1.25;
				}
				.khnbb_blockQuoteQuote br{
					display: none;
				}
				@media screen and (min-width:440px){
					.khnbb_blockQuoteQuote p{
						font-size: 1.85rem;
					}
					.khnbb_blockQuoteQuote p em{
						font-size: 2.4rem;
					}
				}
				@media screen and (min-width:666px){
					.khnbb_blockQuoteQuote br{
						display: block;
					}
				}
				@media screen and (min-width:999px){
					.khnbb_blockQuoteQuote p{
						font-size: 2.3rem;
					}
					.khnbb_blockQuoteQuote p em{
						font-size: 3rem;
					}
				}


			.khnbb_blockQuoteAuthor{
				padding: 20px 0 0;
				font-size: 0.9rem;
			}




	/*	-------------------------------------------------------------------------  SERVICES BLOCK (LEISTUNGEN)  */

		.khnbb_blockLeistungen{
			width: 100%;
		}

			.khnbb_leistungenWrp{
				width: 100%;
				max-width: var(--outer-width);
				height: auto;

				position: relative;
				
				padding: 0;
			}
			@media screen and (min-width:999px){
				.khnbb_leistungenWrp{
					padding:0 25px;
					
					justify-content: flex-end;
				}

			}

				.khnbb_leistungenImg{
					width: 100%;
					height: 100vh;

					position: absolute; 
					left: 0px;
					top: 0px;
					translate: 0 0;
					z-index: -1;

					background-color: rgba(0,0,0,0.05);
					background-size: cover;
					background-position: center center;
				}
				@media screen and (min-width:999px){
					.khnbb_leistungenImg{
						width: 75%;
						height: 100%;
						
						left: 25px;
						top: 50%;
						translate: 0 -50%;
					}
				}

				.khnbb_leistungenTxt{
					width: calc(100% - 50px);
					max-width: 600px;
					height: auto;
					min-height: 400px;

					margin: calc(100vh - 200px) 0 50px 0;
					padding: 20px 25px 50px;
					
					color: white;
					background-color: var(--nbb-blue);
				}
				@media screen and (min-width:450px){
					.khnbb_leistungenTxt{
						padding: 20px 50px 50px;
					}
				}
				@media screen and (min-width:999px){
					.khnbb_leistungenTxt{
						width: 50%;

						margin: 100px 0;
					}
				}

					.khnbb_leistungenTxt ul,
					.khnbb_therapieTxt ul{
						margin-left: 15px;
						hyphens: auto;
					}
					@media screen and (min-width:360px){
						.khnbb_leistungenTxt ul, 
						.khnbb_therapieTxt ul{ 
							hyphens: none; 
						}
					}	
					@media screen and (min-width:440px){
						.khnbb_leistungenTxt ul,
						.khnbb_therapieTxt ul{ 
							margin-left: 40px;
						}
					}	

						.khnbb_leistungenTxt .khnbb_btn{
							font-weight: var(--medium);
						}
						.khnbb_leistungenTxt .khnbb_btn:hover, .khnbb_leistungenTxt .khnbb_btn:active { color: var(--nbb-blue); }




	/*	-----------------------------------------------------------------------------------------  TEAM-BLOCK  */

		.khnbb_blockTeam{
			width: 100%;
			
			padding: 100px 0 0;
		}

		/*	---------------------------------------------------  GRID  */
			.khnbb_teamGrid{
				display: none;
			}
			@media screen and (min-width:999px){
				.khnbb_teamGrid{
					width: 100%;
					max-width: var(--inner-width);

					display: grid;
					grid-template-columns: repeat(13, 1fr);
					grid-template-rows: repeat(3, 1fr);

					padding: 0 25px;
				}
			}

				.khnbb_teamMember{
					align-self: start;
				}

					.khnbb_teamMemberImg{
						aspect-ratio: 3 / 4;
						
						background-size: cover;
						background-position: center center;
					}

					.khnbb_teamMember h3{
						font-weight: var(--light);
						text-transform: uppercase;
					}

					.khnbb_teamMember p{
						font-size: 0.9rem;
						font-weight: var(--light);
					}



		/*	-------------------------------------------------  SLIDER  */

			.khnbb_teamSlider{
				width: 100%;
				
				display: block;
				
			/*	padding: 0 25px;  */
			}
			@media screen and (min-width:999px){
				.khnbb_teamSlider{
					display: none;
				}
			}

				.khnbb_teamSlider .khnbb_teamText{
					width: 100%;
					max-width: 580px;

					margin: 0 auto;
					padding: 0 30px;
				}

				.khnbb_teamSwiperWrp{
					width: 100%;
					height: auto;
					min-height: 400px;

					overflow: auto;
				}

					.khnbb_teamSwiper{
						width: fit-content;
						
						position: relative;
						padding: 0 25px 20px 25px;
					}

						.khnbb_teamMemberWrp{
							gap: 40px;
						}

							.khnbb_teamSlider .khnbb_teamMember{
								width: 270px;
							}

								.khnbb_teamSlider .khnbb_teamMemberImg{
									width: 100%;
								}





	/*	----------------------------------------------------------------------  THERAPY AND DIAGNOSTICS BLOCK  */

		.khnbb_blockTherapie{
			width: 100%;
		}

			.khnbb_therapieWrp{
				width: 100%;
				max-width: var(--outer-width);
				height: auto;

				position: relative;
				
				padding: 0;
			}
			@media screen and (min-width:999px){
				.khnbb_therapieWrp{
					padding:0 25px;
					
					justify-content: flex-start;
				}

			}

				.khnbb_therapieImg{
					width: 100%;
					height: 100vh;

					position: absolute; 
					right: 0px;
					top: 0px;
					translate: 0 0;
					z-index: -1;

					background-color: rgba(0,0,0,0.05);
					background-size: cover;
					background-position: center center;
				}
				@media screen and (min-width:999px){
					.khnbb_therapieImg{
						width: 75%;
						height: 100%;
						
						right: 25px;
						top: 50%;
						translate: 0 -50%;
					}
				}

				.khnbb_therapieTxt{
					width: calc(100% - 50px);
					max-width: 600px;
					height: auto;
					min-height: 400px;

					margin: calc(100vh - 200px) 0 50px 0;
					padding: 20px 25px 50px;
					
					color: white;
					background-color: var(--nbb-terracotta);
				}
				@media screen and (min-width:450px){
					.khnbb_therapieTxt{
						padding: 20px 50px 50px;
					}
				}
				@media screen and (min-width:999px){
					.khnbb_therapieTxt{
						width: 50%;

						margin: 100px 0;
					}
				}

					.khnbb_therapieTxt a{
						font-weight: var(--bold);
					}
					.khnbb_therapieTxt a:link, .khnbb_therapieTxt a:visited { color: white; opacity: 1; }
					.khnbb_therapieTxt a:visited, .khnbb_therapieTxt a:active { color: white; opacity: 0.5; }


					.khnbb_therapieTxt .khnbb_btn{
							font-weight: var(--medium);
						}
						.khnbb_therapieTxt .khnbb_btn:hover, .khnbb_therapieTxt .khnbb_btn:active { color: var(--nbb-terracotta); }




	/*	-------------------------------------------------------------------  START: EMERGENCY BLOCK  */

		.khnbb_blockNotfall{
			width: 100%;
		}

			.khnbb_NotfallWrp{
				width: 100%;
				max-width: var(--outer-width);
				height: auto;

				position: relative;
				
				padding: 100px 25px;
			}


			.khnbb_blockNotfall p strong{
				font-weight: var(--medium);
			}

			.khnbb_blockNotfall a:link, .khnbb_blockNotfall a:visited { color: black; }



			.khnbb_notfallAnlaufstellenWrp{
				width: 100%;
				padding: 20px 0;
			}

				.khnbb_notfallAnlaufstelle{
					height: auto;
					min-height: 100px;
					/*
					background-color: rgba(0,0,0,0.05);
					border: 1px solid rgba(0,0,0,0.1);
					*/
				}

					.khnbb_notfallAnlaufstelle h3{
						padding: 0 0 0.5rem;

						font-weight: var(--medium);
						text-transform: uppercase;
						color: var(--nbb-yellow-dark);
					}

						.khnbb_notfallAnlaufstelle2Col{
							gap: 0;
						}
						@media screen and (min-width:1400px){
							.khnbb_notfallAnlaufstelle2Col{
								flex-flow: row;
							}
						}

						.khnbb_notfallAnlaufstelle2Col p{
							width: 100%;
						}
						@media screen and (min-width:666px){
							.khnbb_notfallAnlaufstelle2Col p{
								width: 50%;
							}
						}





	/*	-------------------------------------------------------------------------  START: JOB BLOCK  */

		.khnbb_blockJobs{
			width: 100%;
			height: auto;

			color: black;
		}

				.khnbb_jobsWrp{
					gap: 30px 50px;
					padding: 20px 25px 50px;
				}
				@media screen and (min-width:666px){
					.khnbb_jobsWrp{
						padding: 20px 50px 50px;
					}
				}

					.khnbb_jobsWrp h2{
					}

					.khnbb_jobsTxt{
						width: 100%;
						max-width: 600px;
					}

						.khnbb_jobsOffersWrp{
							gap: 20px 30px;
							margin: 20px 0 10px;
						}

							.khnbb_jobWrp{
								width: 100%;
								position: relative;
								padding: 0 25px 100px;

								color: black;
								border: 1px solid var(--nbb-yellow-dark);
							}

								.khnbb_jobDate{
									padding: 20px 0 5px;
									font-size: 0.9rem;
								}

								.khnbb_jobWrp h3{
									font-size: 1.25rem;
									font-weight: var(--semibold);

									hyphens: auto;
									hyphenate-limit-chars: 8 5 5;
								}
								@media screen and (min-width:666px){
									.khnbb_jobWrp h3{
									/*	hyphens: none;  */
									}
								}

								.khnbb_jobWrp .khnbb_btn{
									position: absolute;
									bottom: 25px;
								}
								.khnbb_jobWrp .khnbb_btn:hover, .khnbb_jobWrp .khnbb_btn:active, .khnbb_jobWrp .khnbb_btn:focus { color: var(--nbb-yellow-dark); }








/*	------------------------------------------------------------------------------------------  SPECIAL PAGES  */

/*	------------------------------------------------------------------------------  ALL TOPIC PAGES  */

	.topic-page h2{
		padding: 1rem 0 0.25rem;
		
		font-size: 1.25rem;
		font-weight: var(--bold);
		text-transform: none;
	}

	.topic-page p{
		font-weight: var(--medium);
	}
		.topic-page .khnbb_subline + p{
			padding-top: 1rem;	
		}



	.topic-page .khnbb_main ul{
		margin-left: 20px;
	}
	@media screen and (min-width:666px){
		.topic-page .khnbb_main ul{
			margin-left: 40px;
		}
	}


	.topic-page .khnbb_blockQuote{
		padding-bottom: 20px;
	}
		.topic-page .khnbb_blockQuoteQuote p{
			font-weight: var(--light);
		}


/*	------------------------------------------------------------------------------  INFO FÜR KINDER UND ELTERN  */

	.info-fuer-kinder-und-eltern h1{
		color: var(--nbb-green-dark);
	}

	.info-fuer-kinder-und-eltern h2{
		padding: 1rem 0 0.25rem;
		font-size: 1.25rem;
		font-weight: var(--bold);
		text-transform: none;
	}

	.info-fuer-kinder-und-eltern .khnbb_subline{
		background-color: var(--nbb-green-dark);
	}


	.info-fuer-kinder-und-eltern p a[href*="pdf"]{
		width: fit-content;
		height: fit-content;
		min-height: 60px;
		
		display: inline-flex;
		align-items: center;
		
		padding: 0 35px 0 70px;
		margin: 0 5px 20px -8px;
		
		text-transform: uppercase;
		line-height: 1.15;
		
	/*	background-color: rgba(0,0,0,0.03);  */
		background-size: 20px auto;
		background-position: 30px 17px;
		background-repeat: no-repeat;

		border: 1px solid var(--nbb-green-dark);
		border-radius: 30px;
		
		transition: background 0.5s;
	}

	.info-fuer-kinder-und-eltern p a[href*="pdf"]:first-of-type{
		margin-top: 10px;
	}

		.info-fuer-kinder-und-eltern a[href*="pdf"]:link, .info-fuer-kinder-und-eltern a[href*="pdf"]:visited{
			background-color: var(--nbb-green-dark);
			color: white;
			background-image: url("../media/images/bleiker-buth-icon-file-download_100x115_opt.svg");

		}
		.info-fuer-kinder-und-eltern a[href*="pdf"]:hover, .info-fuer-kinder-und-eltern a[href*="pdf"]:focus, .info-fuer-kinder-und-eltern a[href*="pdf"]:active{
			background-color: white;
			color: var(--nbb-green-dark);
			background-image: url("../media/images/bleiker-buth-icon-file-download-green_100x115_opt.svg");
		}




/*	---------------------------------------------------------------------------------------  PRAXIS  */
	.praxis h1{
		color: var(--nbb-green-dark)
	}

	.praxis .khnbb_subline{
		background-color: var(--nbb-green-dark);
	}


/*	-----------------------------------------------------------------------------------  PAGE LEISTUNGEN  */
	.leistungen .khnbb_navM,
	.leistungen .khnbb_hdrBackground,
	.leistungen .khnbb_subline{
		background-color: var(--nbb-blue);
	}

	.leistungen h1{
		color: var(--nbb-blue)
	}

	.leistungen li{
		font-weight: var(--medium);
	}

	.leistungen p a:link, .leistungen p a:visited{ color: var(--nbb-blue); }
	.leistungen p a:hover, .leistungen p a:active{ color: grey; }

	.leistungen .khnbb_mapBtn:link, .leistungen .khnbb_mapBtn:visited{ background-color: var(--nbb-blue); color: white; }
	.leistungen .khnbb_mapBtn:hover, .leistungen .khnbb_mapBtn:active{ background-color: white; color: var(--nbb-blue); }





/*	------------------------------------------------------------------------  PAGE THERAPIE & DIAGNOSTIK  */
	.therapie-und-diagnostik .khnbb_navM,
	.therapie-und-diagnostik .khnbb_hdrBackground,
	.therapie-und-diagnostik .khnbb_subline{
		background-color: var(--nbb-terracotta);
	}

	.therapie-und-diagnostik h1{
		color: var(--nbb-terracotta)
	}

	.therapie-und-diagnostik li{
		font-weight: var(--medium);
	}

	.therapie-und-diagnostik p a:link, .therapie-und-diagnostik p a:visited{ color: var(--nbb-terracotta); }
	.therapie-und-diagnostik p a:hover, .therapie-und-diagnostik p a:active{ color: grey; }

	.therapie-und-diagnostik .khnbb_mapBtn:link, .therapie-und-diagnostik .khnbb_mapBtn:visited{ background-color: var(--nbb-terracotta); color: white; }
	.therapie-und-diagnostik .khnbb_mapBtn:hover, .therapie-und-diagnostik .khnbb_mapBtn:active{ background-color: white; color: var(--nbb-terracotta); }



/*	---------------------------------------------------------------------------------------  KOSTEN  */
	.kosten h1{
		color: var(--nbb-green-dark)
	}

	.kosten .khnbb_subline{
		background-color: var(--nbb-green-dark);
	}


/*	---------------------------------------------------------------------------------------  SINGLE JOB  */

	.single-jobs .khnbb_preH{
		color: var(--nbb-yellow-dark);
	}

	.single-jobs .khnbb_subline{
		background-color: var(--nbb-yellow-dark);
	}

	.khnbb_jobIntro{
		margin: 50px 0 1rem;
		font-size: 1.25rem;
		color: black;
	}

	.single-jobs h1{
		font-size: 1.5rem;
		font-weight: var(--semibold);
		text-transform: none;
		color: var(--nbb-yellow-dark);
	}




/*	----------------------------------------------------------------------------------------------  PREFOOTER  */

/*	------------------------------------------------------------------------------------  BLOCK MAP  */
	.khnbb_blockMap{
		width: 100%;
		height: 600px;

		background-color: rgba(240,240,240,1);
	}

		.khnbb_map{
			width: 100%;
			height: 100%;

			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			
			border: 0;
		}

			.khnbb_map img{
				width: 100%;
				height: 100%;

				display: block;

				position: relative;

				object-fit: cover;
				object-position: center center;
			}


		.khnbb_mapTxt{
			width: 100%;
			max-width: 500px;
			padding: 0 25px;
			z-index: 20;
		}
			.khnbb_mapTxt p{ 
				font-weight: var(--medium);
				text-align: center;
			}

			.khnbb_mapTxt a:link, .khnbb_mapTxt a:visited{ font-weight: var(--bold); color:black; }


		.khnbb_mapBtn{
			position: relative;
			z-index: 30;
			color: white;
		}




/*	-------------------------------------------------------------------------------------------------  FOOTER  */
.khnbb_ftrWrp{
	width: 100%;
	max-width: var(--full-width);
	min-height:30px;
	
}
	.khnbb_ftr{
		width: 100%;
		max-width: var(--inner-width);
		
		margin: 80px 0 0;
		padding: 0 25px;
	}
	@media screen and (min-width:666px){
		.khnbb_ftr{
			padding: 0 50px;
		}
	}

		.khnbb_ftrCntWrp{
		/*	margin: 0 25px; */
			border-bottom: 1px solid black;
		}
		@media screen and (min-width:999px){
			.khnbb_ftrCntWrp{
				flex-flow: row;
			}
		}

			.khnbb_ftrCntL{
				width: 100%;
				max-width: 680px;
			}
			@media screen and (min-width:999px){
				.khnbb_ftrCntL{
					width: 57%;
				}
			}

				.khnbb_ftrLogo{
					width: 70px;
					height: 45px;
					margin: 0 auto;
				}
				@media screen and (min-width:666px){
					.khnbb_ftrLogo{
						margin: 0;
					}
				}					
					.khnbb_ftrLogo svg path{
						fill: var(--nbb-green-dark);
					}

				.khnbb_ftr h2{
					padding: 15px 0;
					
					font-size: 1.25rem;
					font-weight: var(--regular);
					text-align: center;
					color: var(--nbb-green-dark);
				}
					.khnbb_ftr h2 br{ display: none; }
				@media screen and (min-width:666px){
					.khnbb_ftr h2{
						text-align: left;
					}
					.khnbb_ftr h2 br{ display: block; }
				}

				.khnbb_ftr h3{
					padding: 0 0 40px;
					margin: 0 auto;
					
					font-size: 1rem;
					font-weight: var(--regular);
					text-align: center;
					text-transform: uppercase;
				}
				@media screen and (min-width:666px){
					.khnbb_ftr h3{
						margin: 0;
						text-align: left;
					}
				}

				@media screen and (min-width:666px){
					.khnbb_ftrInnerCnt{
						flex-flow: row;
					}
				}

					.khnbb_contactData{
						width: 100%;
						padding: 0 0 20px;
					}
					@media screen and (min-width:666px){
						.khnbb_contactData{
							width: 48%;
							padding: 0 0 20px;	
						}
					}
						.khnbb_contact{
							padding-bottom: 0;
						}

						.khnbb_contactData p{
							text-align: center;
						}
						@media screen and (min-width:666px){
							.khnbb_contactData p{
								text-align: left;
							}
						}
				
					.khnbb_ftrHint p{
						text-align: center;
					}
					.khnbb_ftrHint br{ display: none; }

					@media screen and (min-width:666px){
						.khnbb_ftrHint p{
							text-align: left;
						}
						.khnbb_ftrHint br{ display: block; }
					}

					.topic_page .khnbb_ftrLegal,
					.khnbb_ftrLegal{
						display: none;
						margin: 40px 0;
					}
					@media screen and (min-width:999px){
						.topic_page .khnbb_ftrLegal,
						.khnbb_ftrLegal{
							display: block;
						}
					}

						.khnbb_ftr li{

							padding: 0 0 7px;
							list-style: none;

							font-size: var(--common-fontsize);
							font-weight: var(--regular);
							text-transform: uppercase;
						}

						.khnbb_ftr a{
							transition: opacity 0.5s;	
						}
						.khnbb_ftr a:link, .khnbb_ftr a:visited { color: rgba(0,0,0,1); }
						.khnbb_ftr a:hover, .khnbb_ftr a:active { opacity: 0.6; }





			.khnbb_ftrCntR{
				width: 100%;
				max-width: 700px;
				padding: 50px 0 20px;
			}
			@media screen and (min-width:999px){
				.khnbb_ftrCntR{
					width: 40%;
					padding: 0 0 20px;
				}
			}

				.khnbb_contactFormFieldWrp{
					width: 100%;
					position: relative;
					margin: 0 0 20px;
				}

					.khnbb_contactFormFieldWrp input:not(input[type=submit]),
				/*	.khnbb_contactFormFieldWrp input,  */
					.khnbb_contactFormFieldWrp select,
					.khnbb_contactFormFieldWrp textarea{
						width: 100%;	
						height: 60px;

						padding: 0 20px;

						font-family: var(--montserrat);
						font-size: 1.25rem;

						border:1px solid black;

						background-color: transparent;

						outline: none;
					}
						.khnbb_contactFormFieldWrp input:not(input[type=submit]):focus,
						.khnbb_contactFormFieldWrp select:focus,
						.khnbb_contactFormFieldWrp textarea:focus{
							outline: 3px solid black;	
						}

					.khnbb_contactFormFieldWrp textarea{
						padding: 15px 20px;
						min-height: 150px;
						height: 200px;
						max-height: 350px;

						resize: vertical;

						line-height: 1.5;
					}

					.khnbb_contactFormFieldWrp:has(span[data-name=khnbb_contactFormInsurance]) {
						margin: 60px 0 20px;
					}

					span[data-name=khnbb_contactFormInsurance] {
						position: relative;
					}
					span[data-name=khnbb_contactFormInsurance]::before{
						content: '';

						display:block;

						width: 58px;
						height: 58px;

						border-radius: 50%;

						position: absolute;
						bottom: -18px;
						right: 1px;

						background-color: white;
						background-image: url("../media/images/bleiker-buth-icon-dropdown_60x60_opt.svg");
						background-size: 40px 40px;
						background-position: center center;
						background-repeat: no-repeat;

						pointer-events: none;

						transition: all 0.5s;
					}


					.khnbb_contactFormFieldWrp label{
						position: absolute;
						left: 18px;
						top: 16px;

						padding: 0 5px;

						font-family: var(--montserrat), sans-serif;
						font-size: 1.25rem;
						color: rgba(220,220,220,1.00);
					/*	text-transform: uppercase;  */

						background-color: white;

						transition: all 0.15s;
					}

						label[for="formMobile"]{ display:none; }

						label[for="formInsurance"]{
							margin: -45px 0 0 -20px;
							color: rgba(0,0,0,0.75);
						}


						.khnbb_contactFormFieldWrp p{
							padding:0 0 0.5rem;
						}

						.khnbb_contactFormFieldWrp span[data-name="khnbb_contactFormGDPR"] .wpcf7-list-item{
							margin: 0 0 0 3px;
						}

							.khnbb_contactFormFieldWrp span[data-name="khnbb_contactFormGDPR"] label{
								display: block;

								position: relative;
								top: unset;
								left: unset;

								margin: 0;
								padding: 0 0 15px 35px;

								font-size: 0.8rem;
								color: rgba(0,0,0,0.4);
							}

								.khnbb_contactFormFieldWrp span[data-name="khnbb_contactFormGDPR"] input{
									width: 20px;
									height: 20px;

									margin: 0;
									padding: 0;

									position: absolute;
									left: 0;
									top: 0;
									
									outline: none;
								}
									.khnbb_contactFormFieldWrp span[data-name="khnbb_contactFormGDPR"] input:focus{
										outline: none;
									}

								.khnbb_contactFormFieldWrp span[data-name="khnbb_contactFormGDPR"]  input[type="checkbox"]{
									accent-color: var(--nbb-green-dark);
								}


						.khnbb_contactFormFieldWrp input[type=submit]{
							font-family: var(--montserrat);
							font-size: 1.1rem;
							letter-spacing: 0.05rem;
							color: white;

							border: 0;
							cursor: pointer;
						}
						.khnbb_contactFormFieldWrp input[type=submit]:hover{
							background-color: black;	
						}

						@media screen and (min-width:666px){
							.khnbb_contactFormSubmit {
								justify-content: flex-end;
								margin-right: -10px;
							}
						}
							.khnbb_contactFormSubmit input{
								align-self: flex-end;
							}

						.khnbb_contactFormHint{
							translate: 35px -25px;
							
							opacity: 0.35;

							position: absolute;
							left: 0;
							
							font-size: 0.8rem;
						}



					/*	-----------------------------------------------------------------------------------  CF7 TWEAKS    */
						/*	-----------------------------------------------------------------------  ERRORS  */
						/*	---------------------------------------------------------  not valid or missing  */
							.khnbb_contactFormFieldWrp input.wpcf7-not-valid, 
							.khnbb_contactFormFieldWrp input:not(input[type=submit]).wpcf7-not-valid, 
							.khnbb_contactFormFieldWrp textarea.wpcf7-not-valid{
								border:2px solid rgba(255,100,70,1);
							}

								.wpcf7-not-valid-tip{
									display:block;
									padding:5px 0 0 5px;
									color: rgba(255,150,120,1);
								}

						/*	--------------------------------------------------------------------  RESPONSES  */
						/*	-------------------------------------------------------------  general settings  */
							.wpcf7 form .wpcf7-response-output{
								border:0;
								margin:1rem 0 0.5rem;
								padding:10px 15px 12px;
								font-size:1.0rem;
							}
							/*	---------------------------------------------  not valid or missing  */
								.wpcf7 form.invalid .wpcf7-response-output, 
								.wpcf7 form.unaccepted .wpcf7-response-output{
									background-color:rgba(255,255,0,1);
									color:rgba(0,0,0,1);

									padding-left:45px;
									background-image:url("../media/images/system_form_warning-sign-broad01-opt.svg");
									background-repeat:no-repeat;
									background-size:17px;
									background-position:14px 12px;
								}

							/*	---------------------------------------------------------  SENT  */
								.wpcf7 form.sent .wpcf7-response-output {
									color: var(--nbb-green-dark);
								}
									.wpcf7 form.sent .wpcf7-response-output:before{
										content:'✓';
										padding-right:10px;
									}

							/*	------------------------------------------------------  SPINNER  */
								.wpcf7-spinner{
									margin: 0;
									position: absolute;
									right: 14px;
									top: 37px;

									background-color: var(--nbb-green-light);
								}
									.wpcf7-spinner::before{
										position:absolute;
										right: 50%;
										top: 4px;
									}




/*	------------------------------------------------------------------------------  SUB-FOOTER: PARTNER LOGOS  */
	.khnbb_ftrSubLogosWrp{
		width: 100%;

		padding-bottom: 30px;
		
		overflow: auto;
	}

		.khnbb_ftrSubLogos{
			width: fit-content;

			padding: 20px 0 0;
		}
		@media screen and (min-width:999px){
			.khnbb_ftrSubLogos{
				width: 100%;
			}
		}

			.khnbb_ftrSubLogo{
				width: fit-content;
				height: fit-content; 

				padding: 0 20px;

			/*	background-color: rgba(0,0,0,0.05);  */
			}



/*	baehring.net  */
	a.bdnet_seamlessLink:link, a.bdnet_seamlessLink:visited { color: black; }
	a.bdnet_seamlessLink:hover, a.bdnet_seamlessLink:focus, a.bdnet_seamlessLink:active { color: rgba(255,128,0,1); }





/*	----------------------------------------------------------------------------------------------------  404  */
	
	.error404 .khnbb_main{
		padding-top: 200px;
	}

		.error404 h1 sup{
			font-size: 1rem;
			padding-left: 10px;
		}

		.error404 p a{
			font-weight: var(--medium);
		}
		.error404 p a:link, .error404 p a:visited{ color: black; }
		.error404 p a:hover, .error404 p a:focus, .error404 p a:active{ color: var(--nbb-green-dark); }



/*	TEMP  */

	.khnbb_mainBlockTemp{
		width: 100%;
		height: auto;
		min-height: 100vh;

		position: relative;
		padding-bottom: 10%;

		text-align: center;
	}

	.khnbb_mainBlockTemp em{
		opacity: 0.5;	
	}