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

/*	--------------------------------------------------------------------------------------------------------  VARIABLES  */

	:root{
	/*	----------------------------------------------------------  SIZES  */
		--width-full: 1800px;	/*	1920  */
		--width-inner: 1360px;
		--width-content: 950px;

		--width-min: 280px;  /*	 320px - 2 x 25px  */


	/*	----------------------------------------------------  BREAKPOINTS  */
		--break-m: 666px;
		--break-t: 999px;


	/*	---------------------------------------------------------  COLORS  */

		--acadius-bg-color: black;
		--acadius-bg-grey: rgba(40,39,42,1);
		--acadius-bg-grey-dark: rgba(20,19,22,1);

		--acadius-link-p: rgba(0,0,0,1);
		--acadius-link-a: rgba(129,90,60,1);

		--acadius-terracotta: rgba(129,90,60,1);
		--acadius-terracotta-light: rgba(165,125,95,1);

		--acadius-translucent-black: rgba(0,0,0,0.6);
		--acadius-translucent-white: rgba(255,255,255,0.8);


		--acadius-border-color: rgba(255,255,255,0.1);

		--a11y-bg-color: rgba(255,128,0,1);

		--bg-color-temp: rgba(255,255,0,0.05);
		
		
	/*	----------------------------------------------------------  FONTS  */
		--bitter: 'Bitter', 'Times', 'Times New Roman';

		--thin: 		100;
		--extralight: 	200;
		--light: 		300;
		--regular: 		400;
		--medium: 		500;
		--semibold: 	600;
		--bold: 		700;
		--black: 		800;
		--extrablack: 	900;

		--font-color-light: rgba(242,242,242,1);


	/*	------------------------------------------------------  FONT SIZES  */

		--font-size-h1: 2.8rem;
		--font-size-h2: 1.5rem;
		--font-size-h3: 1.25rem;
		--font-size-copy: 1rem;
		--font-size-copy-plus: 1rem;
		--font-size-list-large: 3rem;
		--font-size-small: 1rem;

		@media screen and (min-width:380px){
			--font-size-h1: 3.6rem;
			--font-size-h2: 2.0rem;
			--font-size-h3: 1.6rem;
			--font-size-copy: 1.15rem;
			--font-size-copy-plus: 1.25rem;
		}

		@media screen and (min-width:666px){
			--font-size-h1: 4.8rem;
			--font-size-h2: 2.4rem;
			--font-size-h3: 2.0rem;
			--font-size-copy: 1.25rem;
			--font-size-copy-plus: 1.5rem;
			--font-size-list-large: 4rem;
		}
	}

/*	-----------------------------------------------------------------------------------------------------------  BASICS  */

	* {
		box-sizing: border-box;
	}

	html, body {
		width: 100%;
		height: auto;

		position: relative;

		padding:0;
		margin:0;

		font-family: var(--bitter), serif;
		font-style: normal;
		font-size: 93.75%;
		color: white;

		background-color: var(--acadius-bg-color);
	}

	html{
		/*	force scrollbars  */
		scroll-behavior: smooth;
		scrollbar-gutter: stable;

		/*	prevent scrolling if a modal dialog is open  */
		&:has(dialog[open]) {
			overflow: hidden;
		}

	}

	body{
		display: grid;
		grid-template-rows: auto 1fr;
	}

/*	---------------------------------------------------------------------------------------------------  GENERIC RESETS  */

	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;
	}


/*	----------------------------------------------------------------------------------------------------------  FLEXBOX  */
	.flx{
		display: flex;
	}

	.flx-r{
		display:flex;
		flex-flow:row;
		flex-wrap:nowrap;
	}

	.flx-c{
		display:flex;
		flex-flow:column;
		flex-wrap:nowrap;
	}

	.flx-jca { justify-content:space-around; }
	.flx-jcb { justify-content:space-between; }
	.flx-jcc { justify-content:center; }
	.flx-jce { justify-content:flex-end; }
	.flx-jcs { justify-content:flex-start; }

	.flx-aic { align-items:center; }
	.flx-aie { align-items:flex-end; }
	.flx-ais { align-items:flex-start; }

	.flx-wrp { flex-wrap:wrap; }


/*	-------------------------------------------------------------------------------------------------------------  GRID  */

	.grd{
		display: grid;
	}

	.grd-auto-fill{
		--grd-min-col-size: 400px;
		grid-template-columns: repeat( auto-fill, minmax( min( var(--grd-min-col-size), 100%), 1fr ) );
	}



/*	------------------------------------------------------------------------------------------------------------  SIZES  */

	.w-fll{
		width:100%;
		height:auto;
	}
	.h-fll{
		height:100%;
		width:auto;
	}
	.wh-fll{
		width:100%;
		height:100%;
	}

	.w-in{
		width:100%;
		max-width: var(--width-inner);
		min-width: 280px;
		margin:0 auto;
	}



/*	--------------------------------------------------------------------------------------------------   CSS ANIMATIONS  */
	@keyframes fadeIn {
		from { 	opacity: 0;  transform: scale(1);  }
		to { 	opacity: 1;  transform: scale(1);  }
	}





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

	h1,
	.like-h1{
		margin: 0 0 1rem;
		font-size: var(--font-size-h1);
		font-weight: var(--regular);
		line-height: 1.1;
		color: var(--font-color-light);
	}

	h2,
	.like-h2{
		margin: 0 0 1rem;
		font-size: var(--font-size-h2);
		font-weight: var(--medium);
		color: black;
	}
	p + h2,
	.like-p + h2,
	ul + h2,
	ol + h2,
	div + h2{
		margin-top: 5rem;
	}

	h3{
		margin: 1rem 0 0.5rem;
		font-size: var(--font-size-h3);
		font-weight: var(--medium);
		color: black;
	}

	p,
	.like-p,
	ol,
	ul{
		margin: 0 0 1rem;
		font-size: var(--font-size-copy);
		font-weight: var(--regular);
		line-height: 1.5;
		color: black;

		@media screen and (min-width:666px){
			font-size: 1.25rem;
		}
	}
	ul{
		li{
			list-style: none;
		}
	}



	.khacd__col{
		padding: 0;

		@media screen and (min-width:999px){
			padding-bottom: 50px;
		}
	}

	.khacd__cols-two--wrp{

		column-gap: 70px;

		.khacd__col{
			width: 100%;
		}

		@media screen and (min-width:999px){

			flex-flow: row nowrap;
			justify-content: space-between;

			.khacd__col{
				width: 50%;

				&.one-third{
					width: calc( 30% - 1px);
				}
				&.two-thirds{
					width: calc( 70% - 1px );
				}
			}

		}
	}

	.khacd__cols_three--wrp{

		column-gap: 30px;

		.khacd__col{
			width: 100%;

			.khacd__col-content{
				flex-grow: 1;
			}

		}

		@media screen and (min-width:666px){

			flex-flow: row wrap;
			justify-content: space-between;

			.khacd__col{
				width: calc(50% - 15px);
			}
		}
		@media screen and (min-width:999px){
			.khacd__col{
				width: calc(33.333333% - 20px);
			}
		}
	}

	a{
		position: relative;

		text-decoration: underline dotted black 1px;

		border: 0;
		outline: none;

		&:link,
		&:visited{
			color: var(--acadius-link-p);
		}

		&:hover,
		&:focus,
		&:active{
			color: var(--acadius-link-a);
			text-decoration-color: var(--acadius-link-a);
		}

		&:focus-visible{

			color: black;
			text-decoration-color: black;

			&::after {
				content: " ";
				width: calc(100% + 10px);
				height: calc(100% + 4px);

				position: absolute;
				top: -2px;
				left: -5px;
				z-index: -1;

				background-color: var(--a11y-bg-color);
			}
		}
	}

	button:not(.navBurgerBtn),
	a.like-button{
		width: fit-content;
		height: 60px;

		position: relative;
		padding: 0 25px;
		margin: 25px 0 50px -5px;

		font-family: var(--bitter), sans-serif;
		font-size: 1.25rem;
		font-weight: var(--medium);
		color: white;
		text-decoration: none;

		cursor: pointer;

		border-radius: 30px;
		background-color: var(--acadius-terracotta);

		transition: background-color 0.5s, color 0.5s;


		&::after{
			display: block;
			aspect-ratio: 1;
			height: 100%;

			position: absolute;
			top: 0;
			left: 100%;

			content: '';

			mask-size: contain;
			mask-repeat: no-repeat;
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath class='ring' style='fill:currentColor;' d='M250,499C112.7,499,1,387.3,1,250S112.7,1,250,1s249,111.7,249,249-111.7,249-249,249ZM250,18.2C122.2,18.2,18.2,122.2,18.2,250s104,231.8,231.8,231.8,231.8-104,231.8-231.8S377.8,18.2,250,18.2Z'/%3E%3Cpath class='arrow' style='fill:currentColor;' d='M147,138.4c-4.7,0-8.6,3.8-8.6,8.6s3.8,8.6,8.6,8.6h185.3l-180.3,180.3c-3.4,3.4-3.4,8.8,0,12.1,1.7,1.7,3.9,2.5,6.1,2.5s4.4-.8,6.1-2.5l180.3-180.3v185.3c0,4.7,3.8,8.6,8.6,8.6s8.6-3.8,8.6-8.6v-214.7h-214.7Z'/%3E%3C/svg%3E");

			background-color: var(--acadius-terracotta);
			transition: all 0.25s;
		}

		&:hover,
		&:focus,
		&:focus-visible{
			color: white;
			background-color: black;

			&::after{
				background-color: black;
				transform: rotate(45deg);
			}
		}


		&.white{
			color: black;
			background-color: white;

			&::after{
				background-color: white;
			}

			&:hover,
			&:focus,
			&:focus-visible{
				color: white;
				background-color: var(--acadius-terracotta);

				&::after{
					background-color: var(--acadius-terracotta);
				}
			}

			&.to-black{

				&:hover,
				&:focus,
				&:focus-visible{
					color: white;
					background-color: black;

					&::after{
						background-color: black;
					}
				}

			}
		}
	}

	dialog{
		width: 100%;
		height: 100%;
		max-width: 100vw;
		max-height: 100vh;

		margin: 0;

		border: none;

		animation: fadeIn 0.5s ease-out;

		.dialog-content{
			width: 100%;
			height: 100%;
			overflow-y: auto;
		}
	}




/*	----------------------------------------------------------------------------------------------------------   HEADER  */
	.khacd__hdr-wrp{
		width: calc( 100% + 2px);
		min-width: var(--width-min);

		height: 70px;

		position: fixed;
		top: 0;
		left: 50%;
		z-index: 1000;
		transform: translateX( calc(-50% - 1px) );

		padding: 0 25px;

		background-color: rgba(0,0,0,0.8);

		transition: height 0.5s, background-color 1.5s;

		&.hdr--scrolled-more{
			background-color: rgba(0,0,0,1);
		}




		/*  --------------------------------------------------------------------   A11Y SKIP LINKS  */

		.a11y__skip-links--wrp{
			width: 100%;
			height: 80px;

			position: fixed;
			left: 0;
			top: -90px;
			z-index: 1001;

			padding: 0 25px;

			background-color: white;
			border-bottom: 1px solid black;

			transition: top 0.5s;

			&:focus-within{
				top: 0;
			}

			.a11y__skip-links {

				width: 100%;
				max-width: var(--width-inner);

				li {
					list-style: none;
					padding: 0 20px 0 0;

					.a11y__skip-link {
						display: flex;
						flex-flow: row nowrap;
						align-items: center;

						padding: 3px 5px;

					}
				}
			}
		}


		/*	-------------------------------------------------------------------------   HEADER LOGO  */
		.khacd__hdr-logo-wrp{
			width: 100%;
			max-width: var(--width-content);
			height: fit-content;

			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);

			background-color: rgba(255, 255, 0, 0.1);

			.khacd__hdr-logo {
				width: 90px;
				height: fit-content;
				color: var(--acadius-terracotta);

				position: absolute;
				top: 10px;
				left: 50%;
				transform: translateX(-50%);

				transition: all 0.5s;

				@media screen and (min-width: 800px) {
					left: 47.5%;
				}

				svg {
					width: 100%;
					height: auto;

					path {
						fill: currentColor;
					}
				}
			}
		}

		/*	------------------------------------------------------------------------   HEADER MENUS  */
		.khacd__hdr{
			width: 100%;
		/*	max-width: var(--width-inner);  */
			max-width: var(--width-content);

			height: 100%;

			margin: 0;
			padding: 0;
			position: relative;


			/*	---------------------------------   header menu lists  */
			ul{
				display: none;
				margin: 0;
				padding: 0;

				@media screen and (min-width:800px){
					display: flex;
				}

				&:nth-of-type(1){
					width: 47.5%;
					margin-right: 100px;
				/*	background-color: rgba(255,0,0,0.1); */
				}
				&:nth-of-type(2){
					width: 52.5%;
					margin-left: 100px;
				/*	background-color: blue;  */
				}

				li{
					list-style: none;

					a{
						display: block;

						width: fit-content;
						height: fit-content;

						padding: 10px;

						font-size: 1.2rem;
						text-decoration: none;
						white-space: nowrap;
						color: white;

						&:hover,
						&:focus,
						&:active{
							color: var(--acadius-terracotta);
						}

						&:focus-visible{
							color: black;
							background-color: white;

							&::after {
								content: none;
							}
						}
					}
				}
			}
		}


		/*	---------------------------------------------------------------  HAMBURGER BUTTON  */
		/*	---------------------------------------------------------------  SVG Version 2026  */

		.navBurgerBtn{
			width: fit-content;
			height: auto;

			position: absolute;
			top: 50%;
			right: 5px;

			transform: translateY(-50%);

			margin: 0;
			padding: 5px 15px 5px 20px;

			cursor: pointer;

			border: 2px solid transparent;

			transition: top 0.5s;

			--rotationUp: 	45deg;
			--rotationDown: -45deg;

			--1stheight: 	0%;
			--2ndheight: 	50%;
			--3rdheight: 	100%;

			--animduration: 0.5s;
			/*	background-color: var(--test-shade);  */


			svg{
				width: 45px;
				height: 45px;

				margin: 0 0 0 10px;

				.navBurgerLine{
					stroke: var(--acadius-terracotta);
					stroke-width: 5px;

					transform-origin: center center;

					transition: transform 0.3s;

					&:nth-of-type(1).inactive{ transform: translate( 7px, 9px); }
					&:nth-of-type(2).inactive{ transform: translate( 7px, 22px); }
					&:nth-of-type(3).inactive{ transform: translate( 7px, 35px); }

					&.stacked{ transform: translate( 7px, 22px); }

					&:nth-of-type(1).active{ transform: translate( -10px, 19px) rotate(45deg); }
					&:nth-of-type(2).active{ transform: translate( 7px, 22px); }
					&:nth-of-type(3).active{ transform: translate( 22px, 11px) rotate(-45deg); }
				}
				/*
				@media screen and (min-width: 666px){
					width: 45px;
					height: 45px;
				}

				 */
			}

			@media screen and (min-width:800px){
				display: none;
			}
		}
	}


	/*	------------------------------------------------------------------------------  MOBILE MENU  */
	/*	modal / dialog version  */
	.khacd__menu-mobile-wrp{

		background-color: var(--acadius-terracotta);

		&::backdrop{
			background-color: transparent;
		}

		.navBurgerBtn{
			top: 35px;

			svg{
				.navBurgerLine{
					stroke: black;
				}
			}
		}

		.khacd__menu-mobile{

			padding: 50px 25px;

			ul{
				li{
					a{
						display: block;

						padding: 5px 15px;

						font-size: 1.8rem;
						text-decoration: none;

						@media  screen and (min-width: 666px){
							font-size: 2.2rem;
						}

						&:hover,
						&:focus,
						&:active{
							color: black;
						}
						&:focus-visible{
							color: white;
							background-color: black;
						}

						&::after{
							content: none;
						}
					}

					&.khcad__menu-mobile-legal{

						a{
							font-size: 1.5rem;

							@media screen and (min-width: 666px){
								font-size: 1.8rem;
							}

							&:link,
							&:visited{
								color: rgba(255,255,255,0.5);
							}
						}

						&.first{
							margin-top: 50px;
						}
					}
				}
			}

			.khacd__menu-mobile-logo{
				width: 100px;
				height: auto;

				padding: 25px 0;

				svg{
					display: block;
					width: 100%;
					height: auto;
				}
			}
		}

	}






/*	-------------------------------------------------------------------------------------------------------------  MAIN  */
.khacd__main--wrp{
	width: 100%;
/*	max-width: var(--width-full);  */
	min-width: var(--width-min);

	height: fit-content;

	position: relative;

	transition: height 0.5s;

	border-top: 70px solid black;



	.khacd__main{
		width:100%;
		height: auto;
		min-height: 100lvh;

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

		ul{
			li{
				margin-left: 20px;
				padding: 0 0 0.5rem 5px;
				list-style: disc;

				&:last-of-type{
					padding-bottom: 0;
				}
			}
		}



	/*	------------------------------------------------------------------------------------------   MAIN BLOCK  */
		.khacd__main-block{
			width: 100%;
			height: fit-content;
			padding: 50px 0;

			.khacd__main-block-inner {
				width: var(--width-inner);
				padding: 0 25px;
			}

			&:nth-of-type(2n){
				background-color: rgba(40,39,42,1);
			}

			&#ueber-uns,
			&#team,
			&#branchen,
			&#leistungen,
			&#karriere,
			&#kontakt{
				scroll-margin-top: 70px;
			}


		/*	-------------------------------------------------------------------------------------------   INTRO  */
			&.block-intro{
				height: calc(100dvh - 50px);
				min-height: 750px;

				position: relative;
				padding: 0 0 40px;

				isolation: isolate;

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

				.background-media{
					width: 100%;
					height: 100%;

					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
					isolation: isolate;

					opacity: 0.25;

					background-image: url( '../media/images/khacd_temp001_intro_screenshot.jpg' );
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;

					video{
						width: 100%;
						height: 100%;

						object-fit: cover;
					}
				}

				.khacd__intro-wrp{
					width: var(--width-inner);
					padding: 0 25px;

					p{
						color: white;

						&.like-h1{
							font-weight: var(--semibold);
						}
						&.like-h2{
							font-weight: var(--regular);
						}
					}
				}

				@media screen and (min-width:999px){
					padding-bottom: 80px;
				}
			}


		/*	---------------------------------------------------------------------------------------   ÜBER UNS  */
			&.block-ueber-uns{

				color: black;
				background-color: white;

			/*	.khacd__main-block-inner{  */
					h1{
						padding: 0 0 2rem;
						color: black;
					}
			/*	}  */
			}




		/*	--------------------------------------------------------------------------------------------   TEAM  */
			&.block-team{
				height: fit-content;
				min-height: 700px;

				position: relative;
				margin: 0;
				padding: 0;

				background-color: rgba(8,13,17,1);

				@media screen and (min-width: 999px){
					background-color: rgba(18,31,39,1);
				}

				isolation: isolate;

				h2{
					position: absolute;
					top: 50px;
					left: 25px;
					z-index: 10;

					color: white;

					@media screen and (min-width: 999px){
						top: 80px;
						left: 50%;
						z-index: 1000;
						transform: translateX( calc( -100% - 350px ) );

						padding: 0;

					}
					@media screen and (min-width: 1360px){
						left: 50%;
						transform: translateX( calc( var(--width-inner) / -2 + 25px ) );
					}
				}


				.khacd__team-wrp{

					.khacd__team{

						.khacd__team-member {	/*	= .swiper-slide  */
							width: 100vw;
							height: auto;

							position: relative;

							background-position: center bottom;
							background-size: 150% auto;
							background-repeat: no-repeat;

							/*
							outline: 1px solid green;
							outline-offset: -2px;
							*/

							&:nth-of-type(1) { background-image: url('../media/images/acadius-team-mobile-voigt-tobias2_1000x1500.jpg'); }
							&:nth-of-type(2) { background-image: url('../media/images/acadius-team-mobile-klemt-michael_1000x1500.jpg'); }
							&:nth-of-type(3) { background-image: url('../media/images/acadius-team-mobile-ismatova-nilufar_1000x1500.jpg'); }
							&:nth-of-type(4) { background-image: url('../media/images/acadius-team-mobile-oegel-burak_1000x1500.jpg'); }
							&:nth-of-type(5) { background-image: url('../media/images/acadius-team-mobile-koehler-christopher_1000x1500.jpg'); }

							/*
							@media screen and (min-width: 666px) {
								background-size: 1000px 1500px;
							}
							*/

							@media screen and (min-width: 666px) {
								height: 700px;

								background-position: center center;
								background-size: auto 100%;

								&:nth-of-type(1) { background-image: url('../media/images/acadius-team-desktop-voigt-tobias2_2500x900.jpg'); }
								&:nth-of-type(2) { background-image: url('../media/images/acadius-team-desktop-klemt-michael_2500x900.jpg'); }
								&:nth-of-type(3) { background-image: url('../media/images/acadius-team-desktop-ismatova-nilufar_2500x900.jpg'); }
								&:nth-of-type(4) { background-image: url('../media/images/acadius-team-desktop-oegel-burak_2500x900.jpg'); }
								&:nth-of-type(5) { background-image: url('../media/images/acadius-team-desktop-koehler-christopher_2500x900.jpg'); }
							}

							.khacd__team-member-content{
								width: 100%;

								margin: auto;

								position: relative;
								padding: 110px 25px 0 25px;

								/*
								outline: 1px solid red;
								outline-offset: -5px;
								*/

								@media screen and (min-width:380px){
									padding: 130px 25px 0 25px;
								}

								@media screen and (min-width:666px){
									max-width: 400px;

									position: absolute;
									left: 0;

									padding: 150px 25px 500px 25px;
								}

								@media screen and (min-width: 999px){
									top: 180px;
									left: 50%;

									padding: 0;

									transform: translateX( calc( -100% - 50px ) );
								}

								@media screen and (min-width: 1360px){
									top: 71px;
									left: 50%;
									transform: translateX( calc( -100% - 50px ) );
								}

								color: white;

								h3,
								p{
									color: white;
								}
							}

							.khacd__team-profile-button{
								margin-top: 50px;
							}

							.khacd__team-spacer-mobile{
								width: 100%;
								height: auto;
								aspect-ratio: 0.8;
							}
						}
					}

				}


				.khacd__team_navigation_pagination{
					width: 100%;
					height: 30px;

					position: absolute;
					bottom: 10px;
					left: 0;
					z-index: 10;

					/*
					position: sticky;
					top: 200px;
					bottom: 15px;
					left: 0;
					z-index: 10;
					*/

					.khacd__team_navigation{
						width: 20px;
						aspect-ratio: 1;

						margin: 1px 15px 0;

						&:not(&.swiper-team-navigation-disabled){
							cursor: pointer;

							&:hover{
								svg {
									path {
										stroke: white;
									}
								}
							}
						}

						&:nth-of-type(1){
							transform: scaleX(-1);
						}

						&.swiper-team-navigation-disabled{
							opacity: .25;
						}
					}

					.khacd__team-pagination {
						width: fit-content;

						.swiper-team-bullet {
							display: inline-block;
							width: 10px;
							aspect-ratio: 1;

							margin: 0 3px;

							background-color: white;
							border-radius: 50%;

							&.swiper-team-bullet-active {
								background-color: var(--acadius-terracotta);
							}
						}
					}
				}
			}




		/*	----------------------------------------------------------------------------------------   BRANCHEN  */
			&.block-branchen{
				background-color: white;

				.khacd__col{
					.khacd__col-content {
						a {
							width: 100%;
							aspect-ratio: 3 / 4;
							background-color: rgba(0, 0, 0, 0.05);

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


		/*	-------------------------------------------------------------------------   LEISTUNGEN / KOMPETENZEN  */
			&.block-leistungen{

				background-color: var(--acadius-terracotta);
				padding: 50px 0;

				@media screen and (min-width: 999px){
					padding: 100px 0 50px;
				}

				ul{
					margin: 25px 0 0;
					font-size: var(--font-size-list-large);

					@media screen and (min-width: 999px){
						margin: 0;
					}

					li{
						margin: 0;
						padding: 0 0 1.5rem;

						list-style: none;
						line-height: 1.0;
						color: rgba(255,255,255,0.8);
						text-wrap: balance;

					}
				}
			}



		/*	----------------------------------------------------------------------------------   KARRIERE / JOBS  */
			&.block-karriere{

				background-color: var(--acadius-bg-grey-dark);
				padding: 50px 0;

				@media screen and (min-width: 999px){
					padding: 100px 0 50px;
				}

				.one-third{
					padding-right: 50px;
				}

				h2{
					color: var(--acadius-terracotta);
				}

				p{
					color: white;
				}

				ul{
					margin: 25px 0 0;
					font-size: var(--font-size-list-large);

					@media screen and (min-width: 999px){
						margin: 0;
					}

					li{
						margin: 0;
						padding: 0 0 1.5rem;

						list-style: none;
						line-height: 1.0;
						color: var(--acadius-terracotta-light);
						text-wrap: balance;

					}
				}
			}





		/*	-----------------------------------------------------------------------------------   ILLUSTRATIONS  */
			&.block-illustration{
				min-height: 700px;

				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;

				&.illustration-001{
					background-image: url( '../media/images/acadius-illustration001-windkraft.jpg' );
				}

				&.illustration-002{
					background-image: url( '../media/images/acadius-illustration002-stahl.jpg' );
				}
			}


			/*	----------------------------------------------------------------------------   TEMPORARY BLOCKS  */

			&.block-temp{
				display: flex;
				flex-flow: row nowrap;
				 align-items: center;
				 justify-content: center;

				h1,
				h2{
					font-size: 3rem;
					text-align: center;

					color: rgba(128,128,128,0.25);
				}
			}
		}





		.khacd__main-temp{
			width: fit-content;
			height: fit-content;

			font-size: 2rem;
			font-weight: var(--regular);
			text-align: center;
			white-space: nowrap;

			@media screen and (min-width:666px){
				font-size: 3rem;
			}
		}
	}
}




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

.home{

	.khacd__hdr-wrp {
		height: 70px;

		&.hdr--scrolled{
			height: 70px;
		}

		@media screen and (min-width:800px){
			height: 100px;
		}

		.khacd__hdr-logo-wrp {
			.khacd__hdr-logo {
				width: 200px;
				top: 20vh;
				left: 50%;

				@media screen and (min-width: 380px) {
					width: 300px;
				}

				@media screen and (min-width: 666px) {
					width: 360px;
				}

				@media screen and (min-width: 999px) {
					width: 420px;
				}

				&.logo--scrolled {
					width: 90px;
					top: 10px;
					left: 47.5%;
				}
			}
		}
	}
}



/*	-------------------------------------------------------------------------------------   BRANCHEN  */
/*	-----------------------------------------------------------------------------------   LEISTUNGEN  */

.branchen,
.team,
.leistungen,
.training-und-academy{

	background-color: white;

	.khacd__keyvisualWrp{
		width: 100%;

		position: relative;

		background-color: black;

		.khacd__keyvisual{
			aspect-ratio: 3 / 4;
			width: 100%;
			max-width: var(--width-full);
			height:auto;

			background-color: var(--acadius-bg-grey-dark);
			background-position: center center;
			background-size: cover;

			@media screen  and (min-width: 666px){
				aspect-ratio: 1;
			}
			@media screen  and (min-width: 800px){
				aspect-ratio: unset;
				max-width: unset;
				height: 700px;
			}

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

		.khacd__keyvisual-overlay{
			width: 100%;
			max-width: var(--width-content);

			padding: 25px;

			position: absolute;
			bottom: 0;
			left: 50%;

			transform: translateX(-50%);

			h1,
			h2{
				color: white;
			}
		}
	}

	&.on-und-offshore-wind{
		.khacd__keyvisual{
			background-image: url( '../../_assets/media/images/acadius_branchen_illustration_offshore-wind2_1920x700.jpg' );

			@media screen and (min-width: 999px){

			}
		}
		.khacd__keyvisual-overl{
		}
	}

	&.green-steel{
		.khacd__keyvisual{
			background-image: url( '../../_assets/media/images/acadius_branchen_illustration_green_steel_1920x700.jpg' );
		}
		.khacd__keyvisual-overlay{
		/*	background-color: var(--acadius-translucent-black);  */
		}
	}

	&.mobility{
		.khacd__keyvisual{
			background-image: url( '../../_assets/media/images/acadius_branchen_illustration_mobility_1920x700.jpg' );
		}
		.khacd__keyvisual-overlay{
		}
	}

	&.leistungen{
		h1{
			margin: 2rem 0;
			color: black;

			@media screen and (min-width: 666px){
				margin: 4rem 0;
			}
		}
	}



	.khacd__main{
		max-width: var(--width-content);
		padding: 50px 25px 150px;

		h2,
		h3,
		h4,
		p{
			color: black;
			text-align: left;
		}

		h2{
			&:first-of-type:not(p + h2){
				margin-top: 25px;
			}
		}
	}
}

.team{
	&.tobias-voigt{
		.khacd__keyvisual{ background-image: url('../../_assets/media/images/acadius-team-desktop-voigt-tobias_2500x900.jpg'); }
	}
	&.michael-klemt{
		.khacd__keyvisual{ background-image: url('../../_assets/media/images/acadius-team-desktop-klemt-michael_2500x900.jpg'); }
	}
	&.nilufar-ismatova{
		.khacd__keyvisual{ background-image: url('../../_assets/media/images/acadius-team-desktop-ismatova-nilufar_2500x900.jpg'); }
	}
	&.burak-oegel{
		.khacd__keyvisual{ background-image: url('../../_assets/media/images/acadius-team-desktop-oegel-burak_2500x900.jpg'); }
	}
	&.christopher-koehler{
		.khacd__keyvisual{ background-image: url('../../_assets/media/images/acadius-team-desktop-koehler-christopher_2500x900.jpg'); }
	}

	.khacd__keyvisualWrp {
		.khacd__keyvisual-overlay {
			/*
			top: 150px;
			bottom: unset;
			*/
			bottom: 20%;
		}
	}
}

.leistungen{
	.khacd__keyvisual{
		background-image: url( '../../_assets/media/images/acadius-missing-image.png' );
	}
}

.training-und-academy{
	.khacd__trainings-wrp{
		width: 100%;
		gap: 25px 50px;

		margin: 25px 0;

		.khacd__training{
			margin: 0 -15px;
			padding: 0 15px 25px;

			border: 1px solid rgba(0,0,0,0.25);
			border-radius: 7px;

			h3{
				font-size: 1.6rem;
				padding-bottom: 1rem;
			}
		}
	}
}




/*	-----------------------------------------------------------------------------------------------------------   LEGAL  */

.legal{

	background-color: white;

	.khacd__main{
		max-width: var(--width-content);
		padding: 50px 25px 150px;

		@media screen and (min-width: 999px){
			padding-top: 100px;
		}

		h1,
		h2,
		h3,
		h4,
		p{
			color: black;
			text-align: left;
		}
	}


	.khacd__contact-data-wrp{

		width: fit-content;
		margin: 0 0 1rem;

		h3 {
			font-size: var(--font-size-copy);
			margin: 0;
		}

		&.contact-data-type-1 {
			h3 {
				width: 70px;
				flex-shrink: 0;

				@media screen and (min-width: 666px){
					width: 200px;
				}
			}
		}

		&.contact-data-type-2 {
			h3 {
				width: 200px;
				flex-shrink: 0;
			}
			& div:last-of-type{
				margin-bottom: 0.5rem;

				@media screen and (min-width: 666px){
					margin-bottom: 0;
				}
			}
		}

		.khacd__contact-data{
			@media screen and (min-width: 666px){
				flex-direction: row;
			}
		}
	}

	.khacd__legal-ol{
		list-style-type: none;
		counter-reset: list-counter;
		padding-left: 0;

		& > li{
			position: relative;
			padding-left: 25px;

			counter-increment: list-counter;
			font-size: var(--font-size-copy-plus);
			font-weight: var(--medium);

			&::before{
				content: counter(list-counter, lower-alpha) ") ";

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

			@media screen and (min-width: 666px){
				padding-left: 25px;
			}

			h3{
				font-size: var(--font-size-copy-plus);
			}
		}
	}

	.khacd__ol-bracketed{
		list-style-type: none;
		counter-reset: bracket-counter;
		padding-left: 0;

		li{
			counter-increment: bracket-counter;
			&::before{
				content: "(" counter(bracket-counter, decimal) ") ";
			}
		}
	}


	&.datenschutz{
		counter-reset: h2-counter;

		h2{
			counter-increment: h2-counter;

			&::before{
				content: counter(h2-counter, decimal) ". ";
			}
		}

		.khacd__legal-source{
			margin-top: 8rem;
			font-style: italic;
		}
	}

}







/*	----------------------------------------------------------------------------------------------------------   FOOTER  */
.khacd__ftr--wrp {
	width: 100%;
	height: fit-content;

	padding: 0 25px;

	background-color: var(--acadius-bg-grey-dark);


	.khacd__ftr {
		width: 100%;
		max-width: var(--width-content);

		padding: 50px 0;

		.khacd__ftr-logo {
			width: 100%;
			max-width: 200px;

			color: var(--acadius-terracotta);

			svg {
				width: 100%;
				height: auto;
				fill: currentColor;
			}
		}

		h2 {
			margin: 2rem 0;
			color: white;

		}

		p {
			color: white;
		}

		a{
			position: relative;
			isolation: isolate;

			text-decoration-color: rgba(255,255,255,0.5);

			&:link,
			&:visited{
				color: white;
			}
			&:hover,
			&:focus,
			&:active{
				color: var(--acadius-terracotta);
			}
			&:focus-visible{
				color: black;

				&::after{
					content: " ";
					width: calc(100% + 20px);
					height: calc(100% + 8px);
					position: absolute;
					top: -4px;
					left: -9px;
					z-index: -1;

					background-color: white;
				}
			}
		}

		.khacd__ftr-blocks{
			width: 100%;
			max-width: 700px;

			@media screen and (min-width: 999px) {
				flex-direction: row;
				align-items: flex-start;
			}

			div{
				white-space: nowrap;
			}
		}

		.khacd__ftr-copyright{
			p{
				color: white;
			}
		}
	}
}