*, *::before, *::after {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			scroll-snap-type: y mandatory;
		}


	:root {
		font-size: 16px;
		font-family: 'Open Sans';
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-primary: #23232e;
		
		--transition-speed: 600ms;
	}
	
	
	body::-webkit-scrollbar {
		width: 0.35rem;
	}
	
	body::-webkit-scrollbar-track {
		background: #1e1e24;
	}
	
	body::-webkit-scrollbar-thumb {
		background: #1199f4;
	}
	
/*Media klein*/

@media only screen and (max-width: 428px) and 
(-webkit-device-pixel-ratio: 3) { body 
	{ 			
		font-size: 8px; padding: 0 1rem; 

	}
	.background-video {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: auto;
		object-fit: cover;
		background-position: center;
		z-index: -5;		
} 
	.maincontainer { 
		grid-template-columns: 1fr; /* Einspaltiges Layout */ 
		padding: 0 ; 
		width: 100vw;
	}

	.konkenlogo {
		position: fixed;
		width: auto ;
		height: auto;
		object-fit: cover;	
	}
	.headline, .headline2 { 
		font-size: 1.5rem; /* Kleinere Überschriften */ 
		margin: 0.5rem 0; 
	}

	.work-container {
		margin: 0;	
	}

	.work-pict-container { 
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 			
		margin: 0 1rem; 
	}

	.navbar { 
		width: 100vw; 
		height: 4rem; 
	}

	main {
		margin: 0;
	}
}
	

	html {
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
			margin: 0;
			padding: 0;
			overflow-x: hidden;
			font-family: Arial, Helvetica, sans-serif;
			width: auto;
			min-height: 100vh;
	}

/* Navigation */

	.navbar {
		position: fixed;
		background-color: var(--bg-primary);
		transition: width 600ms ease;
		overflow: scroll;
		z-index: 1000;
	}
	
	.navbar-nav {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}
	
	.nav-item {
		width: 100%;
	}
	
	.nav-item:last-child {
		margin-top: auto;
	}
	
	.nav-link {
		display: flex;
		align-items: center;
		height: 5rem;
		color: var(--text-primary);
		text-decoration: none;
		filter: grayscale(100%) opacity(0.7);
		transition: var(--transition-speed);
	}
	
	.nav-link:hover {
		filter: grayscale(0%) opacity(1);
		background: var(--bg-secondary);
		color: var(--text-secondary);
	}
	
	.link-text {
		display: none;
		margin-left: 1rem;
	}
	
	.nav-link svg {
		width: 2rem;
		min-width: 2rem;
		margin: 0 1.5rem;
	}
	
	.fa-primary {
		color: #7e98ff;
	}
	
	.fa-secondary {
		color: #df49a6;
	}
	
	.fa-primary,
	.fa-secondary {
		transition: var(--transition-speed);
	}
	
	.logo {
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 1rem;
		text-align: center;
		color: var(--text-secondary);
		background: var(--bg-secondary);
		font-size: 1.5rem;
		letter-spacing: 0.3ch;
		width: 100%;
		
	}
	
	.logo svg {
		transform: rotate(0deg);
		transition: var(--transition-speed);
	}
	
	.logo-text {
		display: inline;
		position: absolute;
		left: -999px;
		transition: var(--transition-speed);
	}
	
	.navbar:hover .logo svg {
		transform: rotate(-360deg);
	}
	
	/* Small screens */
	@media only screen and (max-width: 600px) {
		.navbar {
			bottom: 0;
			width: 100vw;
			height: 5rem;
		}
	
		.logo {
			display: none;
		}
	
		.navbar-nav {
			flex-direction: row;
		}
	
		.nav-link {
			justify-content: center;
		}
	
		main {
			margin: 0;
		}
	}
	
	/* Large screens */
	@media only screen and (min-width: 600px) {
		.navbar {
			top: 0;
			width: 5rem;
			height: 55vh;
			border-radius: 6px;
			opacity: 0.8;
		}
	
		.navbar:hover {
			width: 12rem;
		}
	
		.navbar:hover .link-text {
			display: inline;
			
		}
	
		.navbar:hover .logo svg
		{
			margin-left: 9rem;
		}
	
		.navbar:hover .logo-text
		{
			left: 0px;
		}
	}
	
	.dark {
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-primary: #23232e;
		--bg-secondary: #141418;
	}
	
	.light {
		--text-primary: #1f1f1f;
		--text-secondary: #000000;
		--bg-primary: #ffffff;
		--bg-secondary: #e4e4e4;
	}
	
	.solar {
		--text-primary: #576e75;
		--text-secondary: #35535c;
		--bg-primary: #fdf6e3;
		--bg-secondary: #f5e5b8;
	}
	
	.theme-icon {
		display: none;
	}
	
	.dark #darkIcon {
		display: block;
	}
	
	.light #lightIcon {
		display: block;
	}
	
	.solar #solarIcon {
		display: block;
	}




	.background-video {
			position: fixed;
			top: 0;
			left: 0;
			min-width: 100vw;
			min-height: 100vh;
			height: auto;
			width: 100%;
			object-fit: cover;
			background-position: center;
			z-index: -5;		
	} 

	.background-overlay {
			background-color: rgba(10, 10, 10, 0.6);
			position: fixed;
			min-width: 100vw;
			min-height: 100vh;
			animation: ani-overlay 1.5sec;
			object-fit: cover;
			background-position: center;
			z-index: -4;		
	}
	 

	@keyframes ani-overlay {
			0% {
			opacity: 10%;
			background: rgba(255, 51, 0, 0.885);
			}

			100% {
			opacity: 1; 
			background: rgba(51, 0, 0, 0.5);
			}
	}


	@keyframes startup {
		0% {
				opacity: 0;
				 
			}
		100% {
			opacity: 1;	
		}
}


	/* Optionales Ein- und Aufschwellen (Pulsieren) */
	@keyframes pulse {
			0%, 100% {
					transform: scale(1);
			}
			50% {
					transform: scale(1.1);
			}
	}

	

	.maincontainer {
		display: grid;
		height: 100vh;
		min-height: 840px;
		grid-template-columns: repeat(3, auto-fit, 1fr);
		grid-template-rows: 1fr 1fr 1fr;       
		column-gap: 0.5em;
		justify-content: center;
		justify-items:center;
		row-gap:  0.5em;
		z-index: 1;
		pointer-events: none;
		scroll-snap-align: start ;
		scroll-snap-stop: always;
		
	}

	.box {
		justify-self: center;	
		pointer-events: auto; 
	}
 

	
	.konkenlogo  {
		grid-row: 1;
		grid-column: 2; 
		cursor: pointer; 
	}

	.konkenlogo img {
		animation: startup 1.9s ;
		width: 60vw ;
		height: auto;
		min-width: 400px;	
		max-width: 580px;
		object-fit: cover;
	}

	.hovered {
			transform: scale(1.1); 
			transition: transform 0.3s ease-in-out;
	}


 	.headline {
			grid-row: 2;
			grid-column: 2;
			justify-self: center;
			color: rgba(219, 145, 8, 0.8);
			font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			text-align: end;
			text-indent: auto;
			/* font-size: 4rem; */
			font-size: calc(4.5vh + 0.75rem);
			line-height: 0.8;   
			z-index: 100;		
			margin-left: 9px;
			margin-top: 0px;
			animation: startup2 2.6s ;
			
	}

	.headline2 {
		grid-row: 2;
		grid-column: 2;
		justify-self: center;
		color: rgb(255, 255, 255);
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
		font-size: calc(4.5vh + 0.75rem);
		line-height: 0.8;   
		object-fit: cover;
		animation: startup 3.8s ; 
		z-index: 101;
			
	}


     
	@keyframes startup2 {
		0% {
				
			z-index: 99;
			opacity: 0; 
			
			transform: translateX(170px);					
		}
		100% {
				opacity: 1; 
				
				transform: translateX(0);				
		}
}


	

	.logo2 {
		grid-row: 3;
		grid-column: 2;	
		justify-items: center;
		margin-bottom: 180px;	
	}

	.logo2 img {
		width: 35vw; 
		height: auto;
		object-fit: cover;
		min-width: 90px;
		max-width: 190px;
		opacity: 0.6;
		transition: opacity 0.3s;
		transition: transform 0.5s;
		cursor: pointer;
		animation: logo2ani 1.7s ;	
		
	}


	@keyframes logo2ani {
			0% {
					opacity: 0;
					transform: translateY(-60px);
			}

			100% {
					transform: translate(); 
			}
	}

	.logo2 img:hover {
		transform: scale(1.1); 
		opacity: 1; 
		transition: transform 0.3, opacity 0.3s;
	}


	.konkenlogo, /* .headline, */ .headline2 {
		transition: transform 0.3s ;
		margin-top: 50px;
		position: relative; 
}



	.random-gif {
			position: fixed;
			width: 40px;
			height: auto;
			z-index: 11;
			display: none;
			animation: jitter 0.8s infinite, moveAlongEdges 3s linear; /* Zittern und Bewegung */
			transform-origin: center; /* Drehpunkt bleibt in der Mitte */
			backdrop-filter: blur;
			z-index: 100;
	}

	@keyframes moveAlongEdges {
			0% {
					transform: translate(calc(100% * var(--start-x)), calc(100% * var(--start-y)))
											rotate(var(--rotation));
			}
			100% {
					transform: translate(calc(100% * var(--end-x)), calc(100% * var(--end-y)))
											rotate(var(--rotation));
			}
	}

	@keyframes jitter {
			0%, 100% {
					transform: translate(0, 0) scale(1);
			}
			25% {
					transform: translate(-1px, 1px) scale(1.02);
			}
			50% {
					transform: translate(1px, -1px) scale(0.98);
			}
			75% {
					transform: translate(-0.5px, -1px) scale(1.01);
			}
	}



	.work-container {
		display: grid;
		background-color: rgb(8, 119, 122);	
		justify-content: left;
		margin: 0px 80px -0px 80px;
		border-radius: 6px;
		border-bottom-left-radius: 0%;
		border-bottom-right-radius: 0%;
		scroll-snap-align: start ;
		scroll-snap-stop: always;
	}
	
	.text-work {
		margin-top: 0.5em;
		text-align:left; 
		color: rgb(255, 255, 255);
		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
		font-size: 10rem; 
		line-height: 0.4;  	
	}
	 
	
	
	.work-headline {
		display: grid;
		margin: 0px 0px 0px 0px;
		transition-duration: 1s;
		text-align: left;
		color: rgb(219, 145, 8);
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
		font-size: 4rem;
		line-height: 0.8;  
		animation: appear linear; 
		/* animation-timeline: view();
		animation-range: entry 0 cover 40%;   */
		z-index: 99;
	}
	



.work-pict-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, 174px);
	
	margin-left: 80px;
	margin-right: 80px;

	justify-content: center;
	justify-items:center;
	gap: 0.5em;
	
	background-color:rgb(8, 119, 122);  
	border-radius: 8px;
	border-top-left-radius: 0%;
	border-top-right-radius: 0%;
	height: 100vh; 
	overflow-x: auto;
		
}

.empty {
	opacity: 0;
	max-width: 170px;
	height: auto;
	aspect-ratio: 9 / 13;
	object-fit: cover;
	margin-top: 5px; 
	border-radius: 6px;
}


.pic1 {
	max-width: 170px;
	height: auto;
	aspect-ratio: 9 / 13;
	object-fit: cover;
	margin-top: 5px; 
	border-radius: 6px;
	opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
	/* animation-timeline: view();
	animation-range: entry 0 cover 40%; */
	cursor: pointer; 
	

}

.pic1:hover {
	transform: scale(1.3) !important ; 
	opacity: 1 !important;
	z-index: 100;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.pic1.visible {
	opacity: 1;
	transform: scale(1.3);
}



@keyframes appear {
	0%{
		opacity: 0;
		scale: 0.1 ;
	}
	55%{
		opacity: 30%;
	}
	100%{
		opacity: 1;
		scale: 1; 
	} 
}


	
/*----- About---------*/

.about-container {
	display: grid;
	row-gap: 0.1em;
	grid-template-columns: 2fr 1fr 1fr 1fr ;
	grid-template-rows: repeat(5, 1fr );
	column-gap: 0.1em;
	height: 100vh; 
	min-height: 840px;
	/* max-height: 960px; */
	background-color: rgb(149, 28, 105);
	border-radius: 7px;
	margin: 0px 80px 0px 80px; 
  color: rgb(16, 16, 16);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 10rem;
  line-height: 0.8;	
	scroll-snap-align: start;
	scroll-snap-stop:normal;
}



.ov-member {
	grid-column: 1;
	grid-row: 2;
	font-size: 4rem;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-align: center;
	
	justify-self: start;
}

.member-logo-link {
	display: block;
	grid-column: 1;
	justify-self: center;
	line-height: 0;
}

.member-logo-link--dfa {
	grid-row: 5;
	width: 35%;
	margin-right: 12px;
	margin-bottom: 20px;
}

.member-logo-link--efa {
	grid-row: 4;
	width: 100%;
}

.pict-dfa-logo {
	display: block;
	width: 100%;
	grid-column: 1;
	grid-row: 5;	
}

.pict-efa-logo {
	display: block;
	width: 100%;
	grid-column: 1;
	grid-row: 4;	
}


.text-about {
	text-align: left;
	grid-row: 1;
	grid-column: 1; 	
}

.ov-awards {
	grid-row: 1;
	grid-column: 2; 		
	text-align: left;
	border-radius: 6px;
	font-size: 4rem;
	line-height: 0.8; 
	justify-self: start;
	align-self: start ;	 	
}

.text-awards {
	grid-row: 2/6;
	grid-column: 2; 	
	font-size: 0.9rem;
	line-height: 1;
	text-align: left;
	overflow-y: auto;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	color: rgba(185, 182, 182, 0.9);
}

.ov-vita {
	grid-row: 1;
	grid-column: 3; 		
	text-align: left;
	font-size: 4rem;
	line-height: 0.8;  
	justify-self: start;
	align-self: start ;
}

.text-vita   {
	grid-row: 2/6;
	grid-column: 3; 	
	font-size: 0.9rem;
	line-height: 1;
	font-weight:lighter;
	text-align:left;
	overflow-y: auto;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	color: rgba(185, 182, 182, 0.912);	
}


	

/* Services */

	.service-headcontainer {
		display: grid;
		height: 10vh;
		grid-template-columns: 1;
		grid-template-rows: 1;
		/* border-style: dashed; */
		background-color: rgb(90, 149, 28);
		margin: 0px 80px 0px 80px; 
		scroll-snap-align: start ;
		border-radius: 6px;
		border-bottom-left-radius: 0%;
		border-bottom-right-radius: 0%;
	}

	.text-services {
		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
		font-size: 10rem;
		letter-spacing: -0.5rem;
		grid-column: 1;
		margin-left: 0px;	
		text-align: start;
		justify-self: start;
		line-height: 0.8;  
		cursor: pointer;
	}
	.service-headcontainer:hover {
		background-color: #df49a6;
		
	}



	.services-container {
		display:grid;
		grid-template-columns: repeat(3, 1fr );
		grid-template-rows: repeat(3, 1fr); 
		row-gap: 0.1em;
		column-gap: 0.1em;
		justify-content: center;
		min-height: 840px;
		height: 90vh; 
		background-color: rgb(90, 149, 28);
		margin: 0px 80px 0px 80px; 
  	color: rgb(16, 16, 16);
  	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  	font-size: 10rem;
  	line-height: 0.8;	
		border-radius: 7px;
		border-top-left-radius: 0%;
		border-top-right-radius: 0%;	
	}

	.ov-sounddesign {
		grid-row: 2;
		grid-column: 1; 
		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
		font-size: 4rem;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		text-align: end;
		text-indent: auto;
		line-height: 0.8;  
		justify-self: center;
		align-self: end ;
	}

	.pict-alche {
		grid-row: 3;
		grid-column: 1; 
		width: 10vw;
		margin-left: 0px;
		margin-top: 0px;
		justify-self: center;
		object-fit: cover;
	}
	
	.pict-alche2 {
		grid-row: 4 ;
		grid-column: 1; 
		width: 10vw;
		margin-left: 0px;
		margin-top: 0px;
		justify-self: center;
		cursor: pointer;
	}






	.ov-filmmixing {
		grid-column: 2;
		grid-row: 2;
		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
		font-size: 4rem;
		writing-mode: vertical-rl;
		text-orientation: mixed;	
		text-align: start;
		line-height: 0.8;  
		justify-self: center;
		align-self: end ;
	}
	
	.pict-mix {
		grid-column: 2;
		grid-row: 3;
		width: 8vw;
		margin-left: 0px;
		margin-top: 0px;
		justify-self: center;
	}
	
	.pict-alche3 {
		grid-row: 4 ;
		grid-column: 2; 
		width: 10vw;
		margin-left: 0px;
		margin-top: 0px;
		justify-self: center;
		cursor: pointer;
		
	}



	.ov-musicff {
		grid-column: 3;
		grid-row: 2;
		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
		font-size: 4rem;
		text-align: end;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 0.8;  
		justify-self: center;
		align-self: end ;
		/* background-color: #b6b6b6; */
	}

	.pict-music {
		grid-column: 3;
		grid-row: 3;
		width: 10vw;
		
		margin-top: 0px;
		justify-self: center;	
	}
	
	.pict-alche4 {
		grid-row: 4 ;
		grid-column: 3; 
		width: 10vw;
		margin-left: 0px;
		margin-top: 0px;
		justify-self: center;
		cursor: pointer;

	}
	.pict-alche2:hover, .pict-alche3:hover, .pict-alche4:hover {
		rotate: 110deg;
		transform: scale(1.1); 
		opacity: 0.4; 
			
	}
	
		
/* Contact */		

.contact-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: repeat(5, 1fr); 
	height: 100vh;
  max-width: 100vw;
  background-color: rgb(28, 93, 149);
  border-radius: 7px;
  margin: 0px 80px 0px 80px;
  color: rgb(16, 16, 16);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	scroll-snap-align: start ;
}

.img-mail-con {
	overflow: hidden; 
	grid-column: 1;
	grid-row: 4;
	position: relative;
	width: 300px;         /* passe die Größe an, wie du es brauchst */
  height: 700px;
   
}

.img-mail {
	
	max-width: 170px ;
	max-height: 140px;
	position: relative;
	rotate: 90deg;
	align-self: center; 
	justify-content: center;
	align-items: end;
	animation: ani-mail infinite;
	position: absolute;   
  width: 100%;          
  top: -100%;
  animation: slideDown 5s linear infinite;	
}


@keyframes slideDown {
  0% {
    top: -100%;
		rotate: 90deg;
		opacity: 10%;	
  }
	49% {
		
	}
	50% {
		rotate: 60deg;
		
	}

	90% {
		opacity: 90%;
		
	}
  100% {
		opacity: 0;
    top: 100%;
  }
}


.mail-textcontainer {
	grid-column: 2;
	grid-row: span 3;
	justify-content: right;
	margin-top: 20px;
}


.text-contact {
	grid-row: 1;
	grid-column: span 2; 
  text-align: start;
  font-size: 10rem;
	line-height: 0.7;
	color: white;	

}

.lb-name, .lb-email, .lb-message {
	grid-column: 1;
	grid-row: 3;
	
	text-align: right;
  font-size: 1.5rem;
	color: white;
}

.ip-name, .ip-email, .ip-message {
	grid-column: 1;
	grid-row: 3;
	width: 280px;
  padding: 5px;
  font-size: 1rem;
}

.ip-message {
  height: 100px;
	
}

.bt-submit {
  grid-column: span 2; 
  padding: 10px;
  font-size: 1rem;
  background-color: #fff;
  border: none;
  cursor: pointer;
	border-radius: 7px;
	z-index: 2;
}

.bt-submit:hover {
  background-color: #e03f3f;
	color: white;	
}







/* Footer */

.footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-left: 80px;
	margin-right: 80px;

	min-height: 185px;
	height: auto;	
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	
	padding: 20px 0 24px;
	gap: 1.25rem;
	scroll-snap-align: start ;
	/* scroll-snap-stop: always; */
}

/* Social Media Icons */

.social-nav ul li img {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: brightness(0.5);
}

.social-nav ul li img:hover {
	transform: scale(1.2); /* Vergrößerung beim Hover */
	filter: brightness(1.5); /* Hellerer Effekt */
	transform: rotate(20deg);		
}


.social-nav ul, .main-nav ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.social-nav ul li, .main-nav ul li {
	margin: 0 10px;
}

.social-nav ul li img {
	width: 24px;
	height: 24px;
	display: block;
}

.foot-impress {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 1.25fr);
	column-gap: clamp(1rem, 4vw, 4rem);
	row-gap: 0.35rem;
	text-align: left;
	color: #fff;
	padding: 0px 0px 0px 12px;
	font-size: 0.75rem;	
}
.fo-ov-impress {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: end;
	font-size: 4rem;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	color: rgb(219, 145, 8);	
}

a {
	text-decoration: none;
	color: rgb(219, 145, 8);	
}

.fo-ov-impress:hover {
	text-decoration: underline;
	color: rgb(219, 145, 8);
}





.trademark {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.75rem;
	color: #828181;
	text-align: left;
	width: auto;
	max-width: 36rem;
	line-height: 1.4;
}

.rights {
	grid-column: 2;
	grid-row: 2;
	color: #828181;
	text-align: left;
	font-size: 0.75rem;
	line-height: 1.4;
} 





/* cookie popup*/

.cookie-box {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(75, 9, 137, 0.95);
	color: white;
	padding: 20px;
	border-radius: 7px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	display: none;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	z-index: 1001;
}
.cookie-box p {
	margin-bottom: 10px;
	font-size: 1.2rem;
}
.cookie-options {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
button {
	margin-right: 10px;
	padding: 10px 15px;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	font-size: 1rem;
}
#accept-cookies {
	background: rgb(50, 205, 50);
	color: white;
}

#reject-cookies {
	background: rgb(220, 20, 60);
	color: white;
}

/* SEO test balloon: keep the existing visual language while making the page
   usable at narrow widths and reducing unnecessary mobile downloads. */
.maincontainer {
	position: relative;
}

.hero-credentials {
	position: absolute;
	left: clamp(7.25rem, 7vw, 8.75rem);
	right: 2rem;
	bottom: 2rem;
	z-index: 105;
	display: grid;
	grid-template-columns: clamp(108px, 8.5vw, 148px) 1fr clamp(108px, 8.5vw, 148px);
	align-items: center;
	pointer-events: auto;
}

.logo2 {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	z-index: auto;
	grid-row: auto;
	grid-column: 1;
	justify-self: auto;
	justify-items: initial;
	align-self: center;
	margin: 0;
}

.logo2 img {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	opacity: 0.58;
}

.hero-service-line {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	z-index: auto;
	grid-column: 2;
	justify-self: center;
	align-self: center;
	padding: 0;
	margin: 0;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: clamp(1.05rem, 1.7vw, 1.8rem);
	font-weight: 400;
	line-height: 0.84;
	letter-spacing: -0.035em;
	text-transform: lowercase;
	color: rgba(255, 255, 255, 0.76);
}

.hero-service-line a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: max-content;
	max-width: calc(100% - 2rem);
	height: auto;
	margin: 0 auto;
	transition: color 0.2s ease;
}

.hero-service-line span {
	position: relative;
	white-space: nowrap;
}

.hero-service-sound {
	font-size: 1em;
}

.hero-service-mixing {
	margin-left: 0.9em;
	color: inherit;
	font-size: 1em;
	transform: none;
}

.hero-service-music {
	margin-left: 1.8em;
	font-size: 1em;
}

.hero-service-line a,
.service-link {
	color: inherit;
	text-decoration: none;
}

.hero-service-line a:hover,
.hero-service-line a:focus-visible {
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
}

.service-link:hover,
.service-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.service-link:focus-visible,
.hero-service-line a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 0.18em;
}

@media only screen and (max-width: 600px) {
	.background-video {
		display: none;
	}

	.background-overlay {
		min-width: 0;
		width: 100%;
		height: 100%;
		background-color: #07101f;
		background-image: linear-gradient(rgba(7, 12, 22, 0.44), rgba(7, 12, 22, 0.58)), url("Content/Hintergrund-Space-Mobile.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		animation: none;
	}

	.maincontainer {
		width: 100%;
		height: 100svh;
		min-height: 42rem;
	}

	.konkenlogo img {
		width: min(82vw, 330px);
		min-width: 0;
	}

	.hero-credentials {
		left: 1.25rem;
		right: 1rem;
		bottom: 4.6rem;
		grid-template-columns: clamp(78px, 21vw, 98px) 1fr;
		column-gap: 1rem;
	}

	.logo2 img {
		width: 100%;
	}

	.hero-service-line {
		bottom: auto;
		left: auto;
		right: auto;
		grid-column: 2;
		justify-self: end;
		font-size: clamp(1rem, 5.2vw, 1.4rem);
		line-height: 0.84;
	}

	.hero-service-line a {
		width: max-content;
		max-width: calc(100% - 2rem);
		height: auto;
	}

	.hero-service-mixing {
		margin-left: 0.75em;
	}

	.hero-service-music {
		margin-left: 1.5em;
	}

	.work-pict-container,
	.about-container,
	.service-headcontainer,
	.services-container,
	.contact-container,
	.footer {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
	}

	.work-pict-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
		overflow-x: hidden;
		padding: 0.5rem;
	}

	.pic1,
	.empty {
		width: 100%;
		max-width: 170px;
	}

	.about-container {
		height: auto;
		min-height: 50rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto minmax(12rem, 1fr) minmax(12rem, 1fr);
		padding: 0.75rem;
		font-size: clamp(3rem, 18vw, 5rem);
	}

	.text-about {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ov-awards,
	.ov-vita {
		font-size: clamp(2rem, 10vw, 3rem);
		grid-row: 2;
	}

	.ov-awards,
	.text-awards {
		grid-column: 1;
	}

	.ov-vita,
	.text-vita {
		grid-column: 2;
	}

	.text-awards,
	.text-vita {
		grid-row: 3 / 5;
		font-size: 0.78rem;
	}

	.service-headcontainer {
		height: auto;
		min-height: 5.5rem;
	}

	.text-services {
		font-size: clamp(3.5rem, 22vw, 6rem);
		letter-spacing: -0.18rem;
	}

	.services-container {
		height: auto;
		min-height: 34rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		font-size: clamp(2.2rem, 12vw, 4rem);
	}

	.contact-container {
		height: auto;
		min-height: 42rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: 0.75rem;
	}

	.text-contact {
		font-size: clamp(3.5rem, 22vw, 6rem);
	}

	.mail-textcontainer,
	.img-mail-con {
		max-width: 100%;
	}

	.ip-name,
	.ip-email,
	.ip-message {
		width: 100%;
	}

	.footer {
		height: auto;
		min-height: 0;
		padding: 1rem 0 2rem;
		gap: 1rem;
	}

	.foot-impress {
		grid-template-columns: 1fr;
		row-gap: 0.9rem;
		padding-right: 12px;
	}

	.fo-ov-impress,
	.trademark,
	.rights {
		grid-column: 1;
	}

	.fo-ov-impress {
		grid-row: 1;
		font-size: clamp(3.2rem, 18vw, 4rem);
	}

	.trademark {
		grid-row: 2;
	}

	.rights {
		grid-row: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Film sound design modules used within the continuous homepage */
.service-page {
	position: relative;
	min-height: 100vh;
	background: #17171c;
	color: #f5f5f2;
	font-family: Arial, Helvetica, sans-serif;
}

.service-page-header,
.service-page-footer,
.service-hero,
.service-panel,
.service-offerings,
.service-contact-band {
	position: relative;
	z-index: 2;
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1100;
	transform: translateY(-200%);
	padding: 0.65rem 0.85rem;
	background: #fff;
	color: #17171c;
	font-weight: 700;
}

.skip-link:focus {
	transform: translateY(0);
}

.service-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: min(100% - 3rem, 1180px);
	margin: 0 auto;
	padding: 1.5rem 0;
}

.service-logo {
	color: #fff;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 1.35rem;
	line-height: 0.75;
	letter-spacing: 0.04em;
}

.service-page-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 0.75rem 1.4rem;
}

.service-page-nav a,
.service-page-footer a {
	color: #f5f5f2;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.service-page-nav a:hover,
.service-page-nav a:focus-visible,
.service-page-footer a:hover,
.service-page-footer a:focus-visible {
	color: #db9108;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.service-hero {
	width: min(100% - 3rem, 1180px);
	min-height: 76vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.service-eyebrow,
.service-kicker {
	margin-bottom: 1rem;
	color: #db9108;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.service-hero h1,
.service-panel h2,
.service-card h2,
.service-card h3,
.service-contact-band h2 {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-weight: 400;
	letter-spacing: -0.035em;
}

.service-hero h1 {
	max-width: 900px;
	font-size: clamp(4rem, 10vw, 9.5rem);
	line-height: 0.79;
	text-transform: uppercase;
}

.service-lead {
	max-width: 620px;
	margin: 2.4rem 0 2rem;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.45;
}

.service-cta,
.service-text-link {
	display: inline-block;
	color: #17171c;
	background: #db9108;
	padding: 0.85rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.service-cta:hover,
.service-cta:focus-visible,
.service-text-link:hover,
.service-text-link:focus-visible {
	color: #fff;
	background: #df49a6;
	text-decoration: none;
}

.service-panel,
.service-offerings,
.service-contact-band {
	width: min(100% - 3rem, 1180px);
	margin: 0 auto 1.2rem;
}

.service-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 2rem 5rem;
	padding: clamp(2rem, 5vw, 5rem);
	background: #08777a;
	border-radius: 7px;
}

.service-panel h2,
.service-contact-band h2 {
	font-size: clamp(2.75rem, 5vw, 5.4rem);
	line-height: 0.82;
}

.service-copy {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.55;
}

.service-copy p + p {
	margin-top: 1.1rem;
}

.service-proof {
	background: #951c69;
}

/* The explanatory sound-design sequence deliberately uses lowercase as a
   visual counterpoint to the large display typography above. */
.home-sounddesign,
.home-sounddesign-offerings,
.home-sounddesign-proof {
	text-transform: lowercase;
}

.home-sounddesign .service-kicker,
.home-sounddesign-offerings .service-kicker,
.home-sounddesign-proof .service-kicker,
.home-sounddesign .service-text-link,
.home-sounddesign-proof .service-text-link {
	text-transform: lowercase;
}

.service-text-link {
	margin-top: 1.6rem;
}

.service-offerings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
}

.service-card {
	min-height: 27rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	color: #17171c;
	border-radius: 7px;
}

.service-card h2,
.service-card h3 {
	font-size: clamp(2.6rem, 4.5vw, 4.7rem);
	line-height: 0.82;
}

.service-card > p:last-child {
	margin-top: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
}

.service-card-pink {
	background: #df49a6;
}

.service-card-teal {
	background: #08777a;
}

.service-card-green {
	background: #5a951c;
}

.service-card .service-kicker {
	color: #17171c;
}

.service-contact-band {
	padding: clamp(2rem, 5vw, 5rem);
	background: #5a951c;
	color: #17171c;
}

.service-contact-band > p:not(.service-kicker) {
	max-width: 650px;
	margin: 1.5rem 0 2rem;
	font-size: 1.1rem;
	line-height: 1.5;
}

.service-cta-light {
	color: #17171c;
	background: #fff;
}

.service-page-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	width: min(100% - 3rem, 1180px);
	margin: 0 auto;
	padding: 2.5rem 0 3rem;
	color: #b6b6b6;
	font-size: 0.78rem;
}

@media only screen and (max-width: 760px) {
	.service-page-header,
	.service-hero,
	.service-panel,
	.service-offerings,
	.service-contact-band,
	.service-page-footer {
		width: min(100% - 1.5rem, 1180px);
	}

	.service-page-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.service-page-nav {
		justify-content: start;
		gap: 0.7rem 1.1rem;
	}

	.service-hero {
		min-height: 38rem;
	}

	.service-panel,
	.service-offerings {
		grid-template-columns: 1fr;
	}

	.service-panel {
		gap: 1.8rem;
	}

	.service-card {
		min-height: 19rem;
	}

	.service-page-footer {
		padding-bottom: 6.5rem;
	}
}

/* One spacing system for separate sections. Headline and body pieces that form
   one visual module (work/library and services/service icons) stay connected. */
:root {
	--v2-section-gap: clamp(1rem, 1.5vw, 1.25rem);
}

.work-pict-container,
.about-container,
.services-container,
.service-panel,
.service-offerings,
.service-contact-band,
.contact-container {
	margin-bottom: var(--v2-section-gap);
}

/* V2 layout rhythm: immersive image areas may stay wide, while readable
   information panels share the narrower width of the new sound-design block. */
@media only screen and (min-width: 761px) {
	.about-container,
	.service-headcontainer,
	.services-container,
	.contact-container,
	.footer {
		width: min(100% - 3rem, 1180px);
		margin-left: auto;
		margin-right: auto;
	}

	.about-container {
		height: auto;
		min-height: 0;
		grid-template-columns: 4.5rem minmax(13rem, 0.68fr) minmax(0, 1.32fr);
		grid-template-rows: auto auto auto auto auto auto;
		gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 4rem);
		padding: clamp(2rem, 5vw, 5rem);
		margin-bottom: var(--v2-section-gap);
		line-height: 1;
	}

	.text-about {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: clamp(6rem, 12vw, 10rem);
		line-height: 0.76;
	}

	.ov-member {
		grid-column: 1;
		grid-row: 2 / 5;
		align-self: stretch;
		justify-self: center;
		font-size: clamp(2.8rem, 4.5vw, 4rem);
		line-height: 0.8;
	}

	.member-logo-link--efa {
		grid-column: 2;
		grid-row: 3;
		align-self: center;
		width: 100%;
		margin: 0;
	}

	.member-logo-link--dfa {
		grid-column: 2;
		grid-row: 4;
		align-self: end;
		width: 62%;
		margin: 0 auto;
	}

	.ov-awards {
		grid-column: 3;
		grid-row: 2;
		font-size: clamp(3rem, 5vw, 4rem);
	}

	.text-awards {
		grid-column: 3;
		grid-row: 3 / 5;
		overflow: visible;
		font-size: 0.95rem;
		line-height: 1.32;
		color: rgba(245, 222, 239, 0.78);
	}

	.ov-vita {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: clamp(1rem, 3vw, 3rem);
		font-size: clamp(3rem, 5vw, 4rem);
	}

	.text-vita {
		grid-column: 1 / -1;
		grid-row: 6;
		columns: 2 24rem;
		column-gap: clamp(2rem, 5vw, 5rem);
		overflow: visible;
		font-size: 0.95rem;
		line-height: 1.38;
		color: rgba(245, 222, 239, 0.78);
	}
}

@media only screen and (max-width: 760px) {
	.about-container,
	.service-headcontainer,
	.services-container,
	.contact-container,
	.footer {
		width: min(100% - 1.5rem, 1180px);
		margin-left: auto;
		margin-right: auto;
		border-radius: 7px;
	}

	.about-container {
		display: grid;
		height: auto;
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 1.5rem;
		padding: clamp(1.25rem, 5vw, 2rem);
		margin-bottom: var(--v2-section-gap);
	}

	.about-container > * {
		grid-column: 1;
		grid-row: auto;
	}

	.text-about {
		font-size: clamp(4.5rem, 24vw, 7rem);
		line-height: 0.76;
	}

	.ov-member {
		justify-self: start;
		writing-mode: horizontal-tb;
		font-size: clamp(2.5rem, 13vw, 4rem);
		line-height: 0.8;
	}

	.member-logo-link--efa {
		width: min(100%, 22rem);
		margin: 0;
	}

	.member-logo-link--dfa {
		width: min(62%, 13rem);
		margin: 0;
	}

	.ov-awards,
	.ov-vita {
		font-size: clamp(2.5rem, 13vw, 4rem);
		line-height: 0.82;
	}

	.text-awards,
	.text-vita {
		overflow: visible;
		columns: 1;
		font-size: 0.9rem;
		line-height: 1.38;
		color: rgba(245, 222, 239, 0.78);
	}
}

/* One responsive frame for every coloured section after the hero. The wider
   desktop inset clears the navigation rail; mobile uses equal side gutters. */
:root {
	--v2-content-left: clamp(6.25rem, 5vw, 8rem);
	--v2-content-right: clamp(1.5rem, 5vw, 6.25rem);
	--v2-content-max: 1920px;
	--v2-panel-radius: 7px;
	--v2-panel-padding: clamp(1.5rem, 4vw, 4.5rem);
}

.work-container,
.work-pict-container,
.about-container,
.service-headcontainer,
.services-container,
.service-panel,
.service-offerings,
.service-contact-band,
.contact-container,
.footer {
	box-sizing: border-box;
	max-width: var(--v2-content-max);
}

.work-container {
	border-radius: var(--v2-panel-radius) var(--v2-panel-radius) 0 0;
}

.work-pict-container {
	border-radius: 0 0 var(--v2-panel-radius) var(--v2-panel-radius);
}

.about-container,
.service-panel,
.service-contact-band,
.contact-container,
.footer {
	border-radius: var(--v2-panel-radius);
}

.service-headcontainer {
	border-radius: var(--v2-panel-radius) var(--v2-panel-radius) 0 0;
}

.services-container {
	border-radius: 0 0 var(--v2-panel-radius) var(--v2-panel-radius);
}

.service-panel,
.service-contact-band {
	padding: var(--v2-panel-padding);
}

.service-panel {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
	gap: clamp(1.5rem, 4vw, 5rem);
}

.service-offerings {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--v2-section-gap);
}

.service-card {
	border-radius: var(--v2-panel-radius);
}

@media only screen and (min-width: 761px) {
	.work-container,
	.work-pict-container,
	.about-container,
	.service-headcontainer,
	.services-container,
	.service-panel,
	.service-offerings,
	.service-contact-band,
	.contact-container,
	.footer {
		width: auto;
		margin-left: var(--v2-content-left);
		margin-right: var(--v2-content-right);
	}
}

@media only screen and (max-width: 760px) {
	.work-container,
	.work-pict-container,
	.about-container,
	.service-headcontainer,
	.services-container,
	.service-panel,
	.service-offerings,
	.service-contact-band,
	.contact-container,
	.footer {
		width: calc(100% - 1.5rem);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 420px) {
	:root {
		--v2-section-gap: 0.75rem;
	}

	.work-container,
	.work-pict-container,
	.about-container,
	.service-headcontainer,
	.services-container,
	.service-panel,
	.service-offerings,
	.service-contact-band,
	.contact-container,
	.footer {
		width: calc(100% - 1rem);
	}
}

/* Technical form helpers: invisible spam trap and accessible status feedback. */
.form-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-status {
	min-height: 1.4em;
	margin-top: 0.75rem;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
	line-height: 1.35;
}