html{
  	min-width: 320px;    
	scroll-behavior: smooth; 
	--cream: #F9F6F0;
	--beige: #EDE8DF;
	--grey: #232323;
	--black: #151515;
	--mint: #00FFAE;
	--yellow: #D6FF67;
	--red: #EA1932;
	--gold: #bba054;
	--light-grey: #f3f3f3;
	--dark-grey: #444444;
	--medium-grey: #333;
	--border-grey: #AAAAAA;
	--text-grey: #707070;
	--pagination-grey: #888;
	--accent-grey: #3c3c3c;
	--light-accent: #F2F2F2;
	--text-primary: #111;
	--error-grey: #6b7280;
	--success-red: red;
	--transparent: transparent;
	--white: white;
	--shadow-light: rgba(0, 0, 0, 0.16);
	--shadow-medium: rgba(0, 0, 0, 0.22);
	--shadow-dark: rgba(0, 0, 0, 0.25);
	--font-light: 'HelveticaNeueLTPro-Lt', Helvetica, Arial, sans-serif;
	--font-roman: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;	
	--font-cn: 'HelveticaNeueLTPro-Cn', Helvetica, Arial, sans-serif;	
	--font-medium: 'HelveticaNeueLTPro-Md', Helvetica, Arial, sans-serif;	
	--font-medium-cn: 'HelveticaNeueLTPro-MdCn', Helvetica, Arial, sans-serif;	
	--font-dots: 'Dots', Arial, sans-serif;
}
body{
	font-family:var(--font-light); 
	background-color: var(--cream);  
	color: var(--text-primary);
	font-size: calc(14px + (17 - 14) * (100vw - 400px) /( 2500 - 400));
	line-height: 1.6;
	counter-reset: section;     
	overflow-x: hidden;  
	&.dark{
		background-color: var(--grey); 
		color: var(--beige);        
	} 
}
/* .container {
	max-width: 2200px;
	padding: 0 calc(25px + (120 - 25) * (100vw - 400px) /( 2500 - 400));
}	 */
ul, li, h3 {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;	
	hyphens: auto;
    word-break: auto-phrase;
}
h1{
	font-family: var(--font-medium);
	font-size: 5.8vw;
	line-height: 6vw;
}
h2, .title, .counter{
	font-family: var(--font-roman);
	font-size: calc(20px + (43 - 20) * (100vw - 400px) /( 2500 - 400));
	letter-spacing: -0.25px;
	line-height: 1.2;
	margin-bottom: 0;
}
h3{
	font-family: var(--font-roman);
	font-size: 1.3em;
	letter-spacing: -0.5px;
	
	a {
		color: var(--black);
	}
}
h4, .current_page a, .current_page h1, .current_page span, h1.current_page{
	font-family: var(--font-roman);
	font-size: calc(14px + (18 - 14) * (100vw - 400px) /( 2500 - 400));
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0;
	display: block;
}

.current_page{
	a, h1, span{
		display: inline-block;
	}
}
h5{
	font-family: var(--font-roman);
	font-size: 26px;
	line-height: 26px;
	padding-bottom: 35px;
}
h6, .caption{
	font-size: calc(14px + (19 - 14) * (100vw - 400px) /( 2500 - 400));
	font-family: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.large{
	font-family: var(--font-roman);
	font-size: calc(40px + (120 - 40) * (100vw - 400px) /( 2500 - 400));
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: 1.1;
	display: block;
}
.overline{
	h2, h3, h4{
		font-size: 1em;
		font-family: var(--font-medium);	
		text-transform: uppercase;
		letter-spacing: .5px;
		padding-bottom: 35px;
	}
}
p {
	font-size: 1em;
	line-height: 1.6;
	padding: 0;
	margin: 0;
	font-weight: normal;
	
	&.large-type{
		font-size: 1.35em;
	}
}
.redactor {
	p{
		margin-bottom: calc(17.5px + (42 - 17.5) * (100vw - 400px) /( 2500 - 400));
	}
}
b, strong{
	font-family: var(--font-medium);	
	font-weight: normal;
}
a {
	color: var(--black);	
	transition: border-bottom 0.2s;
	border-bottom: 1px solid var(--transparent);
	cursor: pointer;
	text-decoration: none;
	
	&:hover {
		color: var(--black);	
		text-decoration: none;
	}
	
	img{
		cursor: pointer!important;
	}
}
.dark {
	a, a:hover{
		color: var(--beige);	
	}
	
	.link{
		border-bottom: 1px solid var(--beige);
	}
}
.link {
	border-bottom: 1px solid var(--black);
	padding-bottom: 2px;
    transition: padding-bottom 0.2s;
    cursor: pointer;
    
    &:hover {
		padding-bottom: 4px;
	}
}
ul.nostyle {
	li{
		list-style: none;
	}
}
.mb-30{
	margin-bottom: calc(15px + (36 - 15) * (100vw - 400px) /( 2500 - 400));
}
.mb-35{
	margin-bottom: calc(17.5px + (42 - 17.5) * (100vw - 400px) /( 2500 - 400));
}
.mb-50{
	margin-bottom: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400));
}
.mb-75{
	margin-bottom: calc(37.5px + (90 - 37.5) * (100vw - 400px) /( 2500 - 400));
}
.mb-100{
	margin-bottom: calc(50px + (180 - 50) * (100vw - 400px) /( 2500 - 400));
}
.mb-130{
	margin-bottom: calc(65px + (200 - 65) * (100vw - 400px) /( 2500 - 400));
}
.mb-210{
	margin-bottom: calc(75px + (252 - 75) * (100vw - 400px) /( 2500 - 400));
}
img {
	width: 100%;
	height: auto;
}
.img{
	display: block;
	width: 100%;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.img-container, .video-container{
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.link-img {
	border-bottom: 0px solid var(--transparent) !important;
}
.link-vertical, .text-vertical {    
    transform: rotate(-90deg);
    transform-origin: right bottom;
    right: 0;
    top: -15px;
    position: absolute;
    display: inline-block;
    white-space: nowrap;
}

.text-vertical {
	&.left{
		right: -23px;
	}
}

.link-vertical {
	span {    
		cursor: pointer;
		line-height: 25px;
	}
}
.vertical-container{
	position: relative;
}
.text-right{
	text-align: right;
}
.text-left{
	text-align: left;
}
.text-center{
	text-align: center;
}
.infobox{
	background-color: var(--beige);
	z-index: 10;
}
.red  {
	color: var(--red);
}
.arrow {
	background: url('/assets/global/img/arrow-right.svg') no-repeat right;
	background-size: 6px 8px;
	padding-right: 15px;
	transition: padding-right .5s ease;	
    line-height: 25px;
    display: block;
    height: 21px;
    
    &:hover {
		padding-right: 20px;
	}
}
.transform-arrow {
	svg g{
		fill: var(--black);
		stroke: var(--black);
	}
}

.dark .transform-arrow {
	svg g{
		fill: var(--beige);
		stroke: var(--beige);
	}
}
.slick-list, .slick-slide, .slick-slide:focus {
    outline: none !important;
}
.stamp-container {
	position: relative;
	display: block;
}
.quote{		
	font-size: calc(20px + (67 - 20) * (100vw - 400px) /( 2500 - 400));
	font-family: var(--font-roman);
	line-height: 1.3em;
}

.dark .quote{
	font-family: var(--font-light);
}
/* Startseite: BrandStory Problem -> Übergang -> Empathie als 3-Spalter (bündig zum Agentur-Teaser).
   Eine einzige Textgröße; nur der Übergang über die Schriftstärke abgesetzt. */
#ce_problem{
	.problem-rule{
		border-top: 1px solid var(--black);
		margin-bottom: calc(30px + (60 - 30) * (100vw - 400px) /( 2500 - 400));
	}
	.problem-text{
		margin-bottom: calc(24px + (34 - 24) * (100vw - 400px) /( 2500 - 400));
	}
	.problem-bridge{
		font-family: var(--font-medium);
	}
}
.dark #ce_problem .problem-rule{
	border-top-color: var(--beige);
}
/* Startseite: Problem-Beat + Agentur-Teaser als ein Block zusammenrücken */
#index #ce_problem{
	padding-bottom: 0;
}
#index #ce_services_teaser{
	padding-top: calc(60px + (110 - 60) * (100vw - 400px) /( 2500 - 400));
}
/* Startseite: zwei Schaltflächen unter dem Agentur-Text */
.agency-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: calc(30px + (45 - 30) * (100vw - 400px) /( 2500 - 400));
}
.agency-btn{
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 10px 26px 8px;
	border-radius: 50px;
	border: 1px solid transparent;
	font-family: var(--font-medium);
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: transform .25s ease-in-out, background .25s, color .25s;
}
.agency-btn:hover{
	transform: scale(0.96);
}
.agency-btn--primary{
	background: var(--grey);
	color: var(--cream);
}
.agency-btn--secondary{
	background: var(--beige);
	color: var(--grey);
}
/* Startseite: Journal — links Headline + Tabs (News/Feed), rechts kompakte Teaser mit Introtext, beige */
#ce_journal{
	background: var(--beige);
	.journal-panel[hidden]{
		display: none;
	}
	.journal-headline{
		margin-bottom: calc(20px + (30 - 20) * (100vw - 400px) /( 2500 - 400));
	}
	.journal-tabs{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.journal-tab{
		display: block;
		text-align: left;
		background: transparent;
		border: none;
		border-radius: 10px;
		padding: 8px 16px;
		margin-left: -16px;
		font-family: var(--font-medium);
		color: rgba(35,35,35,0.45);
		cursor: pointer;
		transition: color .2s, background .2s;
	}
	.journal-tab:hover{
		color: var(--grey);
	}
	.journal-tab.is-active{
		background: var(--cream);
		color: var(--grey);
	}
	.journal-all{
		display: inline-block;
		margin-top: calc(24px + (34 - 24) * (100vw - 400px) /( 2500 - 400));
		color: var(--grey);
		border-bottom: 1px solid var(--black);
		padding-bottom: 2px;
		transition: padding-bottom .2s;
		cursor: pointer;
	}
	.journal-all:hover{
		padding-bottom: 4px;
	}
	.journal-card-col{
		margin-bottom: calc(34px + (55 - 34) * (100vw - 400px) /( 2500 - 400));
	}
	.journal-card__media{
		overflow: hidden;
		margin-bottom: 14px;
		background: var(--cream);
	}
	.journal-card__media img{
		width: 100%;
		display: block;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		transition: transform .5s ease;
	}
	.journal-card:not(:has(.journal-card__media--full)):hover .journal-card__media img{
		transform: scale(1.03);
	}
	.journal-card__media--full img{
		aspect-ratio: auto;
		height: auto;
		object-fit: contain;
	}
	.journal-card__text{
		display: block;
		color: var(--black);
	}
	.journal-card__meta{
		display: block;
		opacity: 0.55;
		margin-bottom: 6px;
	}
	.journal-card__title{
		font-family: var(--font-roman);
		margin-bottom: 8px;
	}
	.journal-card__intro{
		opacity: 0.7;
	}
	.article-slider{
		position: relative;
		overflow: hidden;
	}
	.article-slider-container{
		display: flex;
		transition: transform .4s ease;
	}
	.article-slide{
		flex: 0 0 100%;
	}
	.article-slide img{
		width: 100%;
		height: auto;
		display: block;
	}
	.article-slider-controls{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: none;
		background: rgba(249,246,240,0.85);
		color: var(--grey);
		cursor: pointer;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.article-slider-prev{ left: 12px; }
	.article-slider-next{ right: 12px; }
}
@media (max-width: 991px){
	#ce_journal .journal-nav{
		margin-bottom: calc(24px + (34 - 24) * (100vw - 400px) /( 2500 - 400));
	}
	#ce_journal .journal-tabs{
		flex-direction: row;
		flex-wrap: wrap;
	}
	#ce_journal .journal-tab{
		margin-left: 0;
	}
	#ce_journal .journal-all{
		margin-top: 14px;
	}
}
@media (max-width: 991px){
	#ce_problem .problem-col{
		margin-bottom: calc(30px + (40 - 30) * (100vw - 400px) /( 2500 - 400));
	}
	#ce_problem .problem-col:last-child{
		margin-bottom: 0;
	}
}
#wrapper{
	padding-top: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400));
}
.column-two{
	column-count: 2;
}
.new-icon{
	width: 100px;
	height: 100px;
	position: absolute;
    right: 0;
    z-index: 10;
}
.stoerer{
	width: calc(60px + (144 - 60) * (100vw - 400px) /( 2500 - 400));
	height: calc(60px + (144 - 60) * (100vw - 400px) /( 2500 - 400));
	z-index: 10;
	display: block;
}
.underline{
	border-bottom: 0px solid var(--black);
	margin-bottom: 0;
}

.dark .underline{
	border-bottom: 0px solid var(--beige);
}
.aos-init:not(.aos-animate):after{ 
	position: fixed;
}

.trenner{
	display: block;
	position: relative;
	height: 1px;
	width: 100%;
	margin-bottom: calc(17.5px + (42 - 17.5) * (100vw - 400px) /( 2500 - 400));
	display: block;
	background: var(--black);
}

.dark .trenner{
	background: var(--beige);
}
.img-oben, .img-unten, .img-std{
	object-fit: cover;
}

.img-std {
	aspect-ratio: 4/3;
}
.youtube{
  aspect-ratio: 16 / 9;
  width: 100%;
}
.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
#loader {
    border: 12px solid var(--light-grey);
    border-radius: 50%;
    border-top: 12px solid var(--dark-grey);
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}
.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.text-col-2{
	column-count: 2;
}
.w-100{
	width: 100%;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
@media (min-width: 1400px){
	.container{
		max-width: 2400px;
	}
}
@media (max-width: 1240px){
	.tablet-none{
		display: none!important;
	}
	
	h1{
		font-size: 4em;
		line-height: 1;
	}
}
@media (max-width: 990px){
	.column-two{
		column-count: 1;		
	}
	
	.underline{
		border-bottom: 1px solid var(--black);
		
		&:not(#ce_career_teaser .underline){
			margin-bottom: 35px;
		}
		
		.link{
			border-bottom: 0px solid var(--medium-grey);
			padding-bottom: 0px;
		}
	}
	
	.dark .underline{
		border-bottom: 1px solid var(--beige);
	}
	
	:hover.link {
		padding-bottom: 0px;
	}
	
	.text-right{
		text-align: left!important;
	}
	
	.text-col-2{
		column-count: 1;
	}
	
	.current_page {
		padding-top: 50px;
	}
	
	.mobile_headline{
		font-family: var(--font-roman)!important;
		font-size: calc(20px + (43 - 20) * (100vw - 400px) / (2500 - 400))!important;
		letter-spacing: -0.25px!important;
		line-height: 1.2!important;
		text-transform: none!important;
		text-align: left!important;
		padding-bottom:calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400));
		margin-bottom:calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400));
		border-bottom: 1px solid var(--black);
	}
	
	.dark .mobile_headline{
		border-bottom: 1px solid var(--beige);
	}
}

/***** PARTIALS ******/

.mod_block, .mod_content_block{
	padding: calc(50px + (180 - 50) * (100vw - 400px) /( 2500 - 400)) 0;
}

.mod_block_grey{
	padding: calc(75px + (180 - 75) * (100vw - 400px) /( 2500 - 400)) 0;
	margin: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)) 0;
	background: var(--beige);	
}
#wrapper > #calendly.mod_block_grey:last-child {
	margin-bottom: calc(0px - (75px + (180 - 75) * (100vw - 400px) /( 2500 - 400)));
}
.dark .mod_block_grey{
	background: var(--black);
}

.mod_block_sm{
	padding: calc(37.5px + (90 - 37.5) * (100vw - 400px) /( 2500 - 400)) 0;
}

.mod_client_block{
	padding: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)) 0;
}
.mod_two_column{
	ul li{
		list-style: none;
	}
	
	img{
		overflow: hidden;
	}
	
	a:not(.link){
		display: block;
	}
	
	.mod_two_column_navigation{
		li{
			padding-bottom: 5px;
			
			a:hover{
				border-bottom: 1px solid var(--black);
			}
		}
	}
}
.mod_three_column{
	overflow: hidden;
	
	a:not(.link){
		display: block;
	}
}
.mod_four_column{
	img{
		aspect-ratio: 3/4;
	}
}
#ce_career_siegel img{
	aspect-ratio: auto;
}
.mod_complex{
	.text-large{
		padding-bottom: calc(50px + (120 - 50) * (100vw - 400px) /( 2500 - 400));
	}
	
	.stamp-container .stamp{
		padding-bottom: 50px;
	}
}
.mod_list{
	aspect-ratio: auto;
	
	ul {
		border-top: 1px solid var(--black);
		
		li{
			list-style-type: none;
			border-bottom: 1px solid var(--black);
		}
		
		ul{
			border-top: none!important;
			
			li{
				border-bottom: none!important;
				
				&:hover{
					transform: scale(1);
				}
			}
		}
	}
	
	li{
		a{
			padding: 35px 0 70px;
			display: block;
			
			.title,
			svg{
				transform: scale(1);
				transition: all .2s ease-in-out;
			}
		}
		
		img{
			width: 2vw;
			min-width: 25px;
			height: auto;
		}
		
		&.award{
			a{
				padding: 40px 0 50px;
			}
			
			img{
				max-height: 60px;
				aspect-ratio: auto;
			}
		}
	}
	
	.award .award-title{
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 1.2em;
	}
}
.dark .mod_list{
	ul{
		border-top: 1px solid var(--cream);
	}
	
	li{
		border-bottom: 1px solid var(--cream);
		transform: scale(1);
		transition: all .2s ease-in-out;
	}
}
#about .mod_list{
	li:hover{
		transform: scale(1.01);
		
		a .title,
		a svg{
			transform: scale(1.01);
		}
	}
}
.table {	
	counter-reset: section;
	
	li{
		list-style-type: none;
	}
	
	.counter{
		counter-increment: section;
		
		&::before {
			content: counter(section, decimal-leading-zero); 
		}
	}
	
	&.profile-head .trenner{
		margin-bottom: 50px;
	}
	
	.profile-entry {
		.trenner{
			margin: 50px 0;
		}
		
		h2{
			font-family: var(--font-medium);
			font-size: 18px;
			line-height: 20px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}
		
		h3{
			line-height: normal;    
		}
	}
	
	.table-entry {
		.trenner{
			margin: 50px 0;
		}
		
		h3{
			font-size: 26px;
			line-height: 30px;
		}
	}
}
.mod_block.table{
	padding: 100px 0 50px 0;	
}
#ce_service_list, #future_services {
	.accordion__question {
		.accordion__img{
			height: 22px;
			width: 22px;
			transform: rotate(0deg);
			transition: transform .2s linear;
			cursor: pointer;
			margin-top: 0;
		}
		
		&.expanded .accordion__img{    
			transform: rotate(-180deg);
			transition: transform .2s linear;
		}
	}
}
.accordion__answer{
    display: none;
	padding: 60px 0 35px 0;
}

@media (min-width: 2400px){
	.mod_two_column .mod_two_column_navigation{
		li{
			padding-bottom: 10px;
		}
		li a{
			font-size: 18px;
		}
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	.mod_two_column .mod_two_column_navigation{
		li{
			padding-bottom: 13px;
		}
	}
}
@media (max-width: 1240px){
	.mod_two_column .mod_two_column_navigation{
		li{
			padding-bottom: 0;
		}
	}
}
@media (max-width: 990px){
	.mod_list .title, .counter{
		font-family: var(--font-roman);
		font-size: 1.4em;
		letter-spacing: -0.5px;
	}
	.mod_list{
		ul{
			border-top: none;
		}
		li a{
			padding: 35px 0;
		}
		.link{
			border-bottom: none;
		}
	}
	.mod_three_column .grid_item:nth-of-type(3),.mod_complex .img-sm:nth-of-type(3){
		display: none;
	}
	.mod_complex{
		.img-lg{
			padding-bottom: 35px;
		}
		.img-sm{
			margin-bottom: 50px;
		}	
	}
	.table .profile-head .trenner{
		margin-bottom: 35px;
	}
	.table .profile-entry .trenner{
		margin: 35px 0;
	}
	.mod_four_column .image:nth-child(n+3){
		display: none;
	}
}
@media (max-width: 767px){
	.mod_two_column .grid_item:nth-of-type(2),.mod_three_column .grid_item:nth-of-type(2),.mod_complex .img-sm:nth-of-type(2){
		display: none;
	}	
	#about.dark .mod_list{
		ul{
			border-top: none;
		}
	}
}
@media (max-width: 576px){	
	.mod_four_column img{
			aspect-ratio: 4/3;
	}
	.mod_four_column .image:nth-child(n+2){
		display: none;
	}
	.table{
		.table-entry .trenner{
			margin: 35px 0;
		}
		.profile-head h2{
			padding-bottom: 0;
		}
		.profile-entry h2{
				font-size: 15px;
				line-height: 15px;
				padding-bottom: 15px;
		}
		.profile-entry h3{
				padding-bottom: 5px;
		}
		.table-entry h3{
				padding-bottom: 15px;
		}
		.table-entry img{
				margin-top: 15px;
		}
	}
	.accordion__answer{
		padding: 35px 0 35px;
	}
	.table .spacing{
		padding-bottom: 15px;
	}
}


/***** BANNER ******/


#ce_banner{
	background-color: var(--beige);
	width: 100%;
	position: relative;
	overflow: hidden;
}
#banner{
	margin: 0;
	padding: 0;
	position: relative;
	height: 35px;
	overflow: hidden;
	
	li{
		font-family: var(--font-dots);
		font-size: 17px;
		text-transform: uppercase;
		letter-spacing: 2px;
		float: left;
		padding: 0;
		list-style-position: inside;
		list-style-type: none;
		line-height: 35px;
	}
}
#ce_banner {
	&.award{
		background-color: var(--grey);
		
		li{
			color: var(--beige);
			
			.gold{
				color: var(--gold);
			}
		}
	}
}

.dark #ce_banner.award{
	background-color: var(--black);
}
@media (min-width: 2400px){
	#banner{
		height: 45px;
		li{
			font-size: 25px;
			line-height:45px;
		}
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	#banner{
		height: 45px;
		li{
			font-size: 25px;
			line-height:45px;
		}
	}
}

@media (max-width:991px){
	.mod_list ul li:last-of-type{
		border-bottom: 0px;
	}
}

#scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px var(--medium-grey) solid;background:var(--light-accent);}


/***** NAVIGATION ******/

#navigation{
	position: relative;
	height: 15vh;
	box-sizing: border-box;
	padding-top: 5vh;
	
	.number{
		font-size: 33px;
		font-size: 2.2vw;
		line-height: 36px;
		line-height: 2.5vw;
	}
	
	.logo{
		display: block;
		
		img{
			height: auto;
			width: 15vw;
			min-width: 220px;
		}
	}
}
.dark #navigation .logo img{
	content: url("/assets/global/img/echd-logo-stempel-weiss-rgb.png");	
}
.nav-icon {
  width: 30px;
  height: 25px;
  position: relative;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
  transform-origin: center;
  
	span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: var(--accent-grey);
		border-radius: 2px;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
		
		&:nth-child(1) {
			top: 0px;
		}
		
		&:nth-child(2),
		&:nth-child(3) {
			top: 9px;
		}
		
		&:nth-child(4) {
			top: 18px;
		}
	}
	
	&.open{
		span {
			background: var(--cream);
			
			&:nth-child(1) {
				top: 9px;
				width: 0%;
				left: 50%;
			}
			
			&:nth-child(2) {
				transform: rotate(45deg);
			}
			
			&:nth-child(3) {
				transform: rotate(-45deg);
			}
			
			&:nth-child(4) {
				top: 9px;
				width: 0%;
				left: 50%;
			}
		}
	}
}
.dark .nav-icon span {
  background: var(--beige);
}

#navigation-active{
	display: block;
	width: 100%;
	/*padding-top: calc(5vh + 35px);*/
	padding-top: 5vh;
	position: fixed;
	top: 0;
	background: var(--grey);		
	opacity: 0;
	z-index: 100;
	visibility: hidden;
	height: 100vh;
	transition: opacity .1s;
}
#index #navigation-active, #about #navigation-active, #future #navigation-active {
	padding-top: calc(5vh + 35px);
}
#navigation-active {
	&.active{
		opacity: 1;
		visibility: visible;
	}
}
#navigation-active {
	#mobile-nav li,
	#mobile-info li{
		list-style-type: none;
	/*	overflow: hidden;*/
	}
}
#navigation-active{
	#mobile-nav{
		padding: 8px 0 20px;
		text-align: left;

		.m-nav__eyebrow{
			display: block;
			width: 100%;
			font-size: 12px;
			text-align: left;
			padding-bottom: 14px;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: var(--mint);
		}

		.m-nav{
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.m-nav__item{
			list-style: none;
			border-top: 1px solid rgba(249, 246, 240, .14);
			/* Slide-in von rechts nach links, gestaffelt (Aesop-Anmutung) */
			transform: translateX(38px);
			opacity: 0;
			transition: transform .4s ease, opacity .4s ease;
		}
		.m-nav__item:last-child{
			border-bottom: 1px solid rgba(249, 246, 240, .14);
		}

		.m-nav__link,
		.m-nav__toggle{
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			width: 100%;
			padding: 15px 0;
			margin: 0;
			background: none;
			border: 0;
			text-align: left;
			font-family: var(--font-roman);
			font-size: 24px;
			line-height: 1.1;
			color: var(--cream);
			cursor: pointer;
			-webkit-appearance: none;
			appearance: none;
		}

		.m-nav__caret{
			flex: 0 0 auto;
			transition: transform .3s ease;
		}
		.m-nav__item.is-open > .m-nav__toggle .m-nav__caret{
			transform: rotate(180deg);
		}

		/* Aufklapp-Animation ueber Grid-Rows (0fr -> 1fr, ohne feste Hoehe) */
		.m-nav__sub{
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows .3s ease;
		}
		.m-nav__item.is-open > .m-nav__sub{
			grid-template-rows: 1fr;
		}
		.m-nav__sub-inner{
			overflow: hidden;
			min-height: 0;
		}
		.m-nav__sub ul{
			list-style: none;
			margin: 0;
			padding: 0 0 10px;
		}
		.m-nav__sub li{
			list-style: none;
		}
		.m-nav__sub a{
			display: block;
			padding: 8px 0;
			font-family: var(--font-light);
			font-size: 16px;
			line-height: 1.3;
			color: var(--cream);
			opacity: .82;
		}
		.m-nav__sub a:hover{ opacity: 1; color: var(--cream); }
		.m-nav__sub-label{
			margin: 4px 0 2px;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: var(--mint);
			opacity: .9;
		}

		/* Staffelung der Top-Level-Items */
		.m-nav__item:nth-of-type(1){ transition-delay: .05s; }
		.m-nav__item:nth-of-type(2){ transition-delay: .10s; }
		.m-nav__item:nth-of-type(3){ transition-delay: .15s; }
		.m-nav__item:nth-of-type(4){ transition-delay: .20s; }
		.m-nav__item:nth-of-type(5){ transition-delay: .25s; }
	}

	&.active #mobile-nav .m-nav__item{
		transform: translateX(0);
		opacity: 1;
	}
	
	#mobile-info {
		text-align: left;
		margin-top: 26px;
		li a{
			text-align: left;
			padding: 5px 0;
			display: block;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: var(--cream);
		}
	}

	#mobile-social-media{
		margin-top: 35px;
		text-align: left;
		
		li{
			display: inline-block;
			margin-right: 5px;
			list-style-type: none;
		}
		
		a{
			width: 20px;
			height: 20px;
			display: block;
		}
		
		img{
			width: 100%;
			height: auto;
			color: var(--cream);
			fill: var(--cream);
		}
		
		svg{
			width: 20px;
			height: 20px;
			color: var(--cream)!important;
			fill: var(--cream)!important;
		}
	}
}
.language-manager{
	display: inline-block;
	
	li{
		display: inline-block;
		
		a{
			display: inline-block !important;
		}
		
		&:not(.active) a{
			color: var(--text-grey) !important;
		}
		
		&:nth-of-type(2n):before{
			content: "| ";
			color: inherit;
		}
	}
}
#navigation-active .language-manager {
	li {
		a,
		&:nth-of-type(2n):before{
			color: var(--cream);
		}
	}
}

@media (min-width:2400px){
	#navigation .number{
		font-size: 40px;
		font-size: 2vw;
		line-height: 45px;
		line-height: 2.2vw;
	}
	#navigation-active #mobile-info li a,#navigation-active #mobile-nav span{	
		font-size: 18px;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	#navigation{
		.number{
			font-size: 40px;
			font-size: 2vw;
			line-height: 45px;
			line-height: 2.2vw;
		}
		.logo{
			height: 42px;
			/* width: 295px; */
		}
	}
	#navigation-active #mobile-info li a,
	#navigation-active #mobile-nav span
	{	
		font-size: 14px;
	}
}
@media (max-width: 990px){
	#navigation:not(#index #navigation){
		height: auto;
	}
	#navigation .logo img{
		max-width: 90px;
		min-width: 0px;
		float: right;
		content:url("/assets/global/img/echd-logo-schwarz-rgb.png");	
	}
	.dark #navigation .logo img{
		content:url("/assets/global/img/echd-logo-weiss-rgb.png");	
	}
	#navigation-active{
		#mobile-nav{
			padding: 20px 0 20px;
		}
		#mobile-nav img{
			width: 30px;
			height: 30px;
			margin: -30px 0 0 5px;
		}
		#mobile-social-media{
			margin-top: 15px;
		}
	}
	.language-manager:not(#navigation-active .language-manager){
		display: none;
	}
}



/***** PAGINATION ******/
.pagination-container {
	.pagination{
		margin: 0 5px;
		display: inline-block;
		width: auto;
	}
	
	span{
		color: var(--pagination-grey);
	}
	
	.active, 
	.active:hover{
		color: var(--black);
		
		svg{
			stroke: var(--black);
		}
	}
	
	svg{
		fill: none;
		stroke: var(--pagination-grey);
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.2px;
		margin-top: -1px;
	}
	
	.next svg{
		margin-left: 10px;
	}
	
	.previous svg{
		margin-right: 10px;
		transform: rotate(180deg);
	}
}
.dark .pagination-container {
	.active,
	.active:hover{
		color: var(--beige);
		
		svg{
			stroke: var(--beige);
		}
	}
}

/***** HEADER ******/

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.ce_header{
	position: relative;
	width: 100%;
	padding: 0 0 50px 0;
	display: block;
}
#ce_header_index #introduction {
	position: absolute;
	top: 15vw;
	left: 0;
	right: 0;
}
/* #ce_header_index #introduction h1 {
	font-family: var(--font-roman);
} */
#ce_header_index #introduction #title strong{
	font-family: 'HelveticaNeueLTPro-Bd', Helvetica, Arial, sans-serif;
	font-size: 15px;
}
#ce_header_index .stoerer{
	position: absolute;
	right: -76px;
	top: -150px;
	z-index: 10;
	animation: rotating 20s linear infinite;
}
#textlogo{
	position:relative;
}
	@keyframes highlight {
	  0% {
	    width: 0;
	    opacity: 0;
	  }
	  50% {
	    width: 100%;
	    opacity: 1;
	  }
	}
#ce_header_client, #ce_header-image, #ce_header_news_overview {
	.headline {
		padding-top: 85px;
		
		h2{
			text-transform: none;
		}
	}
}

#ce_header_client, #ce_header_news_overview {
	.headline {
		padding-bottom: 0;
	}
}

#ce_header-image {
	.headline{
		padding-bottom: 100px;
	}
}
#ce_header-image {
	.stoerer{
		position: absolute;
		right: 120px;
		overflow: visible;
		
		img{
			margin-top: -60px;
		}
		
		&.standard img{
			animation: rotating 20s linear infinite;
		}
	}
}
#ce_header_client {
	.stoerer{
		position: absolute;
		right: 0;
		top: 0;
		
		img{
			height: 190px;
			width: 190px;
			animation: rotating 20s linear infinite;
		}
	}
}
#ce_header_complex{
	.img-oben{
		aspect-ratio: 3/4;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}
	
	.img-unten{
		aspect-ratio: 1/1;
	}
	
	.first-block{
		padding-bottom: 75px;
	}
	
	.first{
		padding-bottom: 60px;
	}
	
	.second{
		padding-top: 125px;
	}
	
	h4{
		margin-bottom: 15px;
	}
	
	li{
		list-style: outside;
		margin-left: 15px;
	}
	
	a{
		padding-bottom: 15px;
		display: block;
	}
}


@media (min-width: 2400px){
	.ce_header{
		padding: 0 0 100px 0;
	}
	#ce_header_index .stoerer{
		top: -200px;
		right: -100px;
	}
	#ce_header_client .headline, #ce_header-image .headline,#ce_header_news_overview .headline {
		padding-top: 180px;
	}
	#ce_header_client .stoerer img{
		height: 240px;
		width: 240px;
	}
	#ce_header-image .headline{
		padding-bottom: 150px;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	.ce_header{
		padding: 0 0 75px 0;
	}
	#ce_header_index .stoerer{
		top: -130px;
		right: -80px;
	}
	#ce_header_client .headline, #ce_header-image .headline,#ce_header_news_overview .headline{
		padding-top: 100px;
	}
	#ce_header_client .stoerer img{
		height: 210px;
		width: 210px;
	}
}
@media (max-width: 1200px){
	#ce_header_index #introduction {
		top: 10vw;
	}
}
@media (max-width: 990px){
	#ce_header_complex{
		padding-top: 60px;
	}
	#ce_header_complex .img-oben{
		aspect-ratio: 4/3;
	}
	#ce_header_complex .second{
		padding-top: 0;
	}
	.ce_header{
		padding: 0 0 35px 0;
	}
		#ce_header_index #introduction {
		position: relative;
		top: 0;
	}
	#ce_header_index #introduction #title {
		height:auto;
		padding-bottom: 50px;
	}
	#ce_header_index .stoerer{
		top: 75px;
		right: 50px;
	}
	#ce_header_client .stoerer img{
		height: 140px;
		width: 140px;
	}
	#ce_header-image .stoerer{
		right: 60px;
	}
}
@media (max-width: 767px){
	#ce_header_index #introduction #title strong{
		font-size: 10px;
	}
	#ce_header_client{
		padding: 0;
	}
	#ce_header_index .stoerer{
		top: auto;
		right: 30px;
		bottom: -240px;
	}
	#ce_header_client .stoerer img{
		height: 100px;
		width: 100px;
	}
}
@media (max-width: 576px){
	#ce_header_index .stoerer{
		bottom: -215px;
	}
	#ce_header-image .stoerer{
		right: 30px;
	}
	#ce_header-image .headline{
		padding-bottom:50px;
	}
	#ce_header_client h2.headline, #ce_header-image h2.headline, #news-overview h2.headline{
		line-height: 36px;
	}
}

/***** SLIDER ******/


.slider-wrapper{
	position: relative;
	width: 100%;
}
.carousel{
	overflow: hidden;
}
.carousel {
	.row.indicators{
		position: absolute;
	}
}
.carousel-indicators {
	position: relative;
	right: initial;
	bottom: initial;
	z-index: 15;
	display: block;
	padding-left: 0;
	margin-right: 0;
	margin-left: 0;
	list-style: none;
	width: 9px;
	
	li {
		width: 9px;
		height: 9px;
		display: block;
		margin-bottom: 20px;
		position: relative;
		flex: initial;
		margin-right: 0;
		margin-left: 0;
		text-indent: initial;
		cursor: pointer;
		background-color: var(--transparent)!important;
		
		svg {
			fill: var(--text-grey);
			height: 9px;
			width: 9px;
			transform: scale(1);
			transition: all .2s ease-in-out;
		}
		
		&:hover svg {
			transform: scale(1.4);
		}
		
		&.active svg {
			fill: var(--mint);
		}
	}
}
.carousel{
	h3{
		margin-bottom: 30px;
	}
	
	.carousel-inner{
		overflow: visible;
	}
	
	&.fade {
		opacity: 1;
		
		.carousel-item {
			top: 100%;
			left: 0;
			position: absolute;
			width: 100%;
			display: block;
			
			&.active {
				top: auto;
				position: relative;
				opacity: 1;
				overflow: visible;
			}
		}
	}
	
	.carousel-item{
		.row.initial{
			height: 100%;	
		}
		
		.pagingInfo::before {
			counter-increment: section;
			content: "0" counter(section) " "; 
		}
		
		li{
			list-style: decimal-leading-zero;
		}
		
		ul li{
			list-style: none;
		}
		
		.infobox{
			padding: 50px 50px 65px 50px;
			box-sizing: border-box;
			margin-top: -12.5vh;
			
			.client-name{
				font-size: 12px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
			}
			
			.headline, 
			.pagingInfo{
				font-family: var(--font-roman);
				font-weight: normal;
				font-size: 26px;
				line-height: 30px;
				padding-bottom: 15px;
			}
		}
		
		video{
			width: auto;
			height: 100%;
			max-width: none;
		}
		
		.img-unten{
			aspect-ratio: 1/1;
		}
		
		&.active img{
			opacity: 1;
			transform: translate(0px, 0px);
		}
		
		img{
			opacity: 0;
			transition: 1s;
			transform: translate(30px, 0px);
		}
		
		.img-oben,
		.img-container.oben {
			aspect-ratio: 3/4;
			max-height: 80vh;
			margin-bottom: 40px;
			overflow: hidden;
			display: flex;
			justify-content: center;
			object-fit: cover;
		}
	}
}
.dark .carousel .carousel-item .infobox{
	background: var(--black);
}
#slider .carousel-item img{
	aspect-ratio: 16/9;
}
.carousel-controls{
	display: block;
	position: absolute;
	font-size: 20px;
	white-space: nowrap;
	
	span{
		height: 50px;
		width: 50px;
		background-color: var(--beige);
		display: block;
		text-align: center;	
		transition: transform .5s;
		transform: scale(1);
		transform-origin: center;   
		cursor: pointer; 
		
		svg{
			height: 20px;
			width: 30px;
		}
		
		&:hover{
			transform: scale(1.2);
		}
	}
}
.a{
	fill: var(--transparent);
}

@media (min-width: 2400px){
	.carousel{
		.carousel-item{
			.img-oben, .img-container.oben {
				 min-height: 1200px;
			}
			.infobox .headline, 
			.pagingInfo
			{
				font-size: 30px;
				line-height: 35px;
				padding-bottom: 20px;
			}
			.infobox{
				padding: 75px 75px 90px 75px;
				margin-top:-160px;
				.client-name{
					font-size: 18px;
				}
			}
		}
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	.carousel{
		.carousel-item{
			.infobox .headline, 
			.pagingInfo
			{
				font-size: 30px;
				line-height: 35px;
				padding-bottom: 20px;
			}
			.infobox{
				padding: 75px 75px 90px 75px;
				margin-top:-160px;
				.client-name{
					font-size: 14px;
				}
			}
		}
	}
}
@media (max-width: 1240px){
	.carousel .carousel-item .infobox{
		padding: 35px 25px 40px 25px;
	}
}
@media (max-width: 990px){
	.carousel .carousel-item .img-oben,
	#slider .carousel-item img,
	.carousel .img-container.oben
	{
		aspect-ratio: 4/3;
		margin-bottom:0px;
	}
	.carousel .carousel-item .img-oben video{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.carousel{
		.carousel-item .infobox{
			margin-top:0px;
			padding: 35px;
		}
		.carousel-item .infobox span{
			display: inline-block;
			margin: 0;
			padding: 0;
		}
	}
	.carousel-controls span{
		margin-top: 20px;
	}
	/* Hero-Slider-Headline: engerer Zeilenabstand bei mehrzeiligem Umbruch */
	#ce_header_index .carousel-item .infobox .headline{
		line-height: 0.95;
	}
}
@media (max-width: 767px){
	.carousel .carousel-inner{
		overflow: hidden;
	}
}


/***** ABOUT ******/

.dark #ce_solutions_teaser svg{
	fill: var(--beige);
	stroke: var(--beige);
 }
#ce_solutions_teaser svg{
	fill: var(--black);
	stroke: var(--black);
 }
/* Arbeiten-Filter-Teaser: "Mehr über … erfahren" als Outline-Button (Optik wie #landingpage .button, hier gescoped) */
#branche_lp_teaser .button{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding: 10px 35px 6px;
	border-radius: 50px;
	border: 1px solid currentColor;
	font-family: var(--font-medium);
	line-height: 1.5;
	transition: transform .25s ease-in-out;
}
#branche_lp_teaser .button:hover{ transform: scale(0.96); }
#branche_lp_teaser .button svg{ margin-top: -2px; flex-shrink: 0; }
/* Divider unter dem Intro-Teaser: unteren Abstand an den oberen (mod_block_sm-Padding) angleichen */
#branche_lp_teaser + .container .trenner{
	margin-bottom: calc(37.5px + (90 - 37.5) * (100vw - 400px) /( 2500 - 400));
}

/* Branchen-Teaser (Lösungs-Seiten): kompakte Liste aller Branchen, klickbar = Pfeil */
#ce_branchen_teaser .branche-list{
	list-style: none;
	padding-left: 0;
}
#ce_branchen_teaser .branche-list li{
	margin-bottom: 18px;
	list-style: none;
}
#ce_branchen_teaser .branche-list__item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.2;
}
#ce_branchen_teaser a.branche-list__item svg{
	flex-shrink: 0;
	transition: transform .2s ease-in-out;
}
#ce_branchen_teaser a.branche-list__item:hover svg{
	transform: translate(3px, -3px);
}
#ce_about_teaser .container{
	position: relative;
}
#ce_about .img-text p{
	text-align: right;
	width: auto;
}
#ce_how li{
	list-style: inside decimal;
}
#ce_partners{
	.grid_item{
		transition: all .2s;
		margin-bottom: 35px;
		background:var(--cream);
	}
	a.grid_item:hover{
		transform: scale(1.03);
			transform-origin: center;    
			box-shadow: 0px 3px 6px var(--shadow-light);  	
	}
	p{
		padding-bottom: 35px;	
	}
}
#solution{
	h2{
		font-size: calc(16px + (28 - 16) * (100vw - 400px) /( 2500 - 400));
		word-wrap: break-word;
		hyphens: auto;
	}
	a{
		h2,svg
		{
			display: inline-block;
		}
		svg{
			margin: -5px 0 0 2px;	
			transition: all .3s;
			width: 13px;
		}
		&:hover svg{
			margin: -7px 0 0 3px;	
		}
	}
	.service-list{
		padding-top: calc(125px + (300 - 125) * (100vw - 400px) /( 2500 - 400));
		li{
			list-style: none;
		}
	}
}
#solution-intro img:nth-of-type(1){
	aspect-ratio: 4/3;
	margin-bottom: 30px;
}
#solution-intro img:nth-of-type(2){
	aspect-ratio: 1/1;
}
#ce_services_list_teaser{
	padding: calc(75px + (180 - 75) * (100vw - 400px) /( 2500 - 400)) 0;
	 a{
		font-family: var(--font-roman);
		font-size: 1.3em;
		letter-spacing: -0.5px;
		display: block;
	}
	.solution,
	.intro{
		border-bottom: 1px solid var(--black);
	}
	.solution:last-of-type{
		border-bottom: 0px;
	}
	.intro{
		padding-bottom: calc(50px + (130 - 50) * (100vw - 400px) /( 2500 - 400));
	}
	.solution{
		padding: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)) 0;
	}
	li{
		list-style-type: none;
	}
	ul{
		margin-bottom: 25px;
	}
	ul > li{
		font-family: var(--font-roman);
		margin-bottom: 15px;
	}
	ul > ul > li{
		font-family: var(--font-light);
		margin-bottom: 2px;
	}
	
}
#herritage .img-container{
	aspect-ratio: 3 / 4; 
}
@media (min-width: 1450px){
	#ce_about_teaser .img{
		height:700px;
	}
}
@media (max-width: 991px){
	#herritage .img-container{
		aspect-ratio: 4 / 3;
		margin-bottom: 35px; 
		display: none;
	}
	#herritage .image:last-of-type .img-container{
		display: block;
	}
}
@media (max-width: 767px){
	#ce_services_list_teaser ul{
		margin-bottom: 15px;
	}
	#ce_services_list_teaser ul > li{
		font-family: var(--font-roman);
		margin-bottom: 15px;
	}
}
/***** LOCATION ******/

#ce_location_small{
	h2,h3{
		padding-bottom: 15px!important;
	}
	.infobox{
		box-sizing: border-box;
		padding: 50px 0 60px 0; 
		margin-top:-220px;
		h3{
			font-size: 26px;
			line-height: 30px;
		}
	}
}
@media (min-width: 2400px){
	#ce_location_small {
		h2,h3{
			padding-bottom: 35px!important;
		}
		.infobox{
			padding: 100px 0 100px 0; 
			margin-top: -380px;
			h3{
				font-size: 40px;
				line-height: 50px;
			}
		}
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	#ce_location_small .infobox{
		padding: 75px 0 75px 0; 
		margin-top:-220px;
	}
}
@media (max-width: 1240px){
	#ce_location_small .infobox{
		margin-top:-200px;
	}
}
@media (max-width: 990px){
	#ce_location_small .infobox{
		padding:50px; 
		margin-top:-150px;
	}
}
@media (max-width: 767px){
	#ce_location_small .infobox{
		padding:35px; 
		margin-top:0;
	}
}



/***** CLIENTS ******/


.ce_overview{
	padding: 0 0 calc(75px + (180 - 75) * (100vw - 400px) / (2500 - 400));
	.teaser_img{
			overflow: hidden;
			display: block;
			width: 100%;
			margin-bottom: 30px;
		 aspect-ratio: 4/3;
	}
	a {
		img,
		video 
		{
				transform: scale(1.00);
				transform-origin: center; 
				transition: all .5s;
				object-fit: cover;
				height: 100%;
		}
		&:hover img,
		&:hover video 
		{
				transform: scale(1.05);
		}
	}
}
#ce_work-overview {
	.grid_item{
		display: block;
		position: relative;
	}
}

#filter_navigation{
	a, 
	span{
		padding-bottom: 15px;
		display: block;
	}
	
	span{
		text-decoration: underline;
	}
}
#news_content{
	p {
		padding-bottom: 15px;
	}
	
	.gallery-img{
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 2400px){

	
	.ce_overview a.teaser_img {
		margin-bottom: 50px;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
		
		h3{
			margin-bottom: 35px;
		}	
	.ce_overview a.teaser_img {
		margin-bottom: 35px;
	}
}

@media (max-width:991px){
	#ce_news h1{
		font-size: 2em;
	}
}


/***** CLIENT TEASER ******/

#ce_clients_teaser_overview{
	.grid_item{
		display: block;
		width: 100%;
		aspect-ratio: 5/3;
		background: var(--cream);	
		transition: all .2s;
		margin-bottom: 30px;
		
		&:hover {
			transform: scale(1.03);
			transform-origin: center;    
			box-shadow: 0px 3px 6px var(--shadow-light);  	
		}
		
		img{
			height: auto;
		}
	}
}
.dark #ce_clients_teaser_overview .grid_item{
	background: var(--grey);
}
#ce_work-overview, #ce_client_teaser {
	.stamp {
		font-family: var(--font-roman);
		position: absolute;
		display: block;
		height: calc(40px + (96 - 40) * (100vw - 400px) /( 2500 - 400));
		width: calc(40px + (96 - 40) * (100vw - 400px) /( 2500 - 400));
		z-index: 9;
		top: -20px;
		right: 0;
	}
}
#client {
	&.dark {
		#ce_client_logo,
		#ce_client_communication{
			color: var(--beige);
		}
		
		svg {
			path, 
			line{
				stroke: var(--beige);
			}
		}
		
		.share svg path, 
		.share svg line{
			stroke: none;
		}
	}
	
	#ce_client_header video{
		height: auto;
		width: 100%;
	}
}
@media (max-width: 767px){
	#ce_work-overview, #ce_client_teaser {
		.stamp {
			top: -25px;
			right: 30px;
		}
	}
	
	#ce_clients_teaser_overview .grid_item img {
		max-width: 50%;
	}
}

/***** CLIENT WORK ******/
#ce_client_header{
	ul li{
		list-style-type: none;
		margin-bottom: 5px;
		
		svg{
			fill: var(--black);
			color: var(--black);
			transition: .3s all;
			display: inline;
		}
		
		&:hover svg{
			margin: -2px 0 0 2px;
		}
	}
}
.dark #ce_client_header ul li svg{
	fill: var(--beige);
	display: inline;
}
#ce_client_logo {
	.logo-container{
		aspect-ratio: 4/3;
		background-color: var(--cream);
		
		img{
			max-width: 420px;
			width: 50%;
			height: auto;
		}
	}
}

.dark #ce_client_logo .logo-container{
	background-color: var(--grey);
}
#client_award_list {
	padding-top: calc(37.5px + (90 - 37.5) * (100vw - 400px) /( 2500 - 400));
	padding-bottom: calc(15px + (36 - 15) * (100vw - 400px) /( 2500 - 400));
	
	.award {
		display: block;
		margin-right: 5%;
		max-height: 70px;
		width: auto;
		
		&:last-of-type {
			margin-right: 0;
		}
	}
}
.video-container{
	aspect-ratio: 4/3;
}
.ce_client_content_some{
	.reel{
		.asset:nth-child(n+4){
			display: none;
		}
	}
	.feed .img-std{
		aspect-ratio: 3/4;
	}
}
@media (max-width: 991px){
	.ce_client_content_some .reel .asset:nth-child(n+3){
		display: none;
	}
}
#ce_client_website{
	img{
		width: 100%;
		height: auto;
		aspect-ratio: auto; 
	}
	
	.video-container{
		aspect-ratio: auto;
		position: relative;
	}
	
	.video, 
	video {
		position: absolute;
		width: calc(78% - 30px);
		/* height: 84%; */
		left: 0;
		right: 0;
		top: 0;
		bottom: 14%;
		margin: auto;
	}
}
@media (max-width: 991px){
	#client_award_list .award{
		max-height: 50px;
		margin-right: 5%;
	}
}
@media (max-width: 767px){
	.ce_client_content_img_two img{
		margin-bottom: calc(15px + (36 - 15) * (100vw - 400px) /( 2500 - 400));
	}
}

/***** NEWS ******/

.date{
	display: inline-block;
	text-align: right;
}

#ce_news-overview{
	margin-top: calc(0px - (25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)));
	h2{
		margin-bottom: calc(50px + (180 - 50) * (100vw - 400px) /( 2500 - 400));
	}
}

.news-filter-sidebar,
.article-filter-sidebar {
	margin-bottom: 30px;
	li{
		list-style-type: none;
	}
	svg{
		fill: var(--black);
		display: inline;
		margin-left: 2px;
	}
	.author{
		gap: 10px;
		a{
			margin:0;
			padding:0;
			border-bottom: 0;
		}
		svg{
			margin-top: -5px;
		}
	}
	.author-avatar{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		object-fit: cover;
	}
}

.news-filter-sidebar h3,
.article-filter-sidebar h3 {
	font-size: 1.2em;
}

.filter-categories {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 15px;
}

.filter-section {
	margin-bottom: 30px;
	font-size: 14px;
	span{
		font-family: var(--font-medium);
	}
}

.filter-btn {
	color: var(--text-black);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	transform: scale(1);
	transform-origin: left;
	&.active{
		font-family: var(--font-medium);
	}
	&:hover{
		transform: scale(0.95);
	}
}

.news-teaser-col,
.article-teaser-col {
	transition: opacity 0.3s ease;
	margin-bottom: 25px;
}

.news-card {
	margin-bottom: 30px;
	.img-container {
		margin-bottom: 15px;
	}
	span{
		font-size: 0.9em;
	}
	.news-title{
		font-family: var(--font-roman);
		font-weight: normal;
		font-size: 1.1em;
	}
}

.news-card.hidden,
.article-teaser-col.hidden {
	display: none;
}

.news-card .img-container {
	aspect-ratio: 4/3 !important;
	overflow: hidden;
	display: flex;
	justify-content: center;
	object-fit: cover;
}

.news-card img {
	transition: transform 0.3s ease !important;
	transform: scale(1) !important;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.news-teaser-col:hover img {
	transform: scale(1.05) !important;
}

.news-date {
	color: var(--text-grey);
}

.article-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background: var(--beige);
	border-radius: 8px;
	overflow: hidden;
	height: 100%;

	&:hover {
		transform: scale(1.03);
		transform-origin: center;
		text-decoration: none;
		color: inherit;
		box-shadow: 0px 3px 6px var(--shadow-light);

		.article-slider-controls {
			opacity: 0.7;
		}
	}

	.article-link {
		text-decoration: none;
		color: inherit;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.tile-footer {
		padding: 20px 25px;
	}

	.tile-head {
		position: relative;
		overflow: hidden;

		img {
			width: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}
	}
}

.article-slider {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	.article-slider-container {
		display: flex;
		transition: transform 0.3s ease-in-out;
		will-change: transform;
	}

	.article-slider-controls {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: rgba(0,0,0,0.5);
		border: none;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 10;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 18px;
		font-weight: bold;

		&:hover {
			opacity: 1 !important;
			background: rgba(0,0,0,0.7);
		}

		&.article-slider-prev {
			left: 10px;
		}

		&.article-slider-next {
			right: 10px;
		}
	}
}

#ce_article_teaser {
	background-color: #f8f6f3;
	padding: 100px 0;
}


.article-slide {
	flex: 0 0 100%;
	width: 100%;

	img {
		width: 100%;
		height: auto;
		object-fit: contain;
		display: block;
	}
}

.img-post,
.img-carousel {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.author-info {
	display: flex;
	align-items: center;
	gap: 10px;
}
.article-date {
	font-size: 12px;
	color: var(--black);
}
.author-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}
.author-name {
	font-weight: 600;
	color: var(--black);
	font-size: 12px;
}
.article-hashtags {
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}
#load-more-news,
#load-more-articles {
	background: none;
	border: 1px solid var(--black);
	color: var(--black);
	padding: 12px 30px 10px;
	border-radius: 25px;
	font-family: var(--font-roman);
	cursor: pointer;
	transition: all 0.3s ease, transform 0.3s ease;
	transform: scale(1);
}

#load-more-news:hover,
#load-more-articles:hover {
	transform: scale(0.95);
}

#load-more-news:disabled,
#load-more-articles:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

#ce_news {
	h1{
		font-size: calc(20px + (67 - 20) * (100vw - 400px) / (2500 - 400));
    font-family: var(--font-roman);
    line-height: 1.3em;
	}
	.breadcrumb{
		margin-bottom: 30px;
		
		span{
			letter-spacing: 0;
		}
	}
	.share{
		padding-bottom: 0;
	}
	.trenner{
		margin-top: 20px;
	}
	.filter-section{
		margin-bottom: 0;
	}
}
.news-content{
	margin-bottom: 50px;
}
.news_text{
	p{
		padding: 15px 0;
	}	
	a{
		color: var(--black);
		font-family: var(--font-medium);
	}
}
.news_gallery{
	padding: 75px 0;
	
	.gallery-img{
		/* height: 215px; */
		margin-bottom: 20px;
		
		img{
			object-fit: cover;
			height: 100%;
		}
	}
}
.news_quote{
	padding: 50px 0;

	.row{
		position: relative;
	}

	.quoteblock{
		background: var(--black);
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 10px;
	}
	
	.quote{
		font-size: 24px;
		line-height: 36px;
		padding-bottom: 20px;
	}
}
.share{
	padding: 50px 0;
}
.share-button{
	width: 100%;
	height: 40px;
	background-color:var(--beige);
  	transition: background-color .5s;
}
.share-button .a{
	stroke: none;
}
.share .a{
		fill: var(--accent-grey);
}
.icon-facebook svg{
	width:8px;
	height: 15px;
}
.icon-twitter svg{
	width:13px;
	height: 11px;
}
.icon-linkedin svg{
	width:13px;
	height: 12px;
}
.icon-xing svg{
	width:13px;
	height: 15px;
}
.icon-mail svg{
	width:11px;
	height: 13px;
}

@media (min-width: 2400px){
	.news-card {
		.news-title{
			font-size: 1.4em;
		}
	}
	.tags li a{
		font-size: 14px;
		line-height: 14px;
	}	
	.share{
		padding: 100px 0;
	}
	.share-button{
		height: 70px;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	.tags li a{
		font-size: 12px;
		line-height: 12px;
	}	
	.share{
		padding: 75px 0;
	}
}
@media (min-width: 992px) {
	#ce_news .article-slider:hover .article-slider-controls {
		opacity: 0.7 !important;
	}
}
@media (max-width: 992px){
	#index .article-teaser-col:nth-child(n+3) {
		display: none;
	}
	#ce_news-overview{
		margin-top: 0;
		h2{
			margin-bottom: calc(17.5px + (42 - 17.5) * (100vw - 400px) /( 2500 - 400))
		}
	}
	.filter-categories {
    flex-direction: row;
		flex-wrap: wrap;
	}
	.tags{
		padding: 15px 0 0;
	}
}
@media (max-width: 768px) {
	.article-teaser-col {
		margin-bottom: 30px;
	}
	.article-title {
		font-size: 20px;
	}
	.article-subtitle {
		text-align: left;
	}
}
@media (max-width: 576px){	
	.news{
		margin-bottom: calc(37.5px + (90 - 37.5) * (100vw - 400px) /( 2500 - 400));
	}
}


/***** TEAM ******/

#ce_team{ 
	.image-full {
		padding: 75px 0;
	}
	
	.grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30px;
		padding: 75px 0;
		
		&.gallery-4 .grid_item:nth-child(2n+1){
			grid-row: auto / span 2;
			aspect-ratio: 3/4;
		}
		
		&.gallery-3 .grid_item:nth-child(2){
			grid-row: auto / span 2;
			aspect-ratio: 39/60;
		}
	}
	
	.grid_item{
		aspect-ratio: 4/3;
		color: var(--beige);
		position: relative;
		background-color: var(--black);
		overflow: hidden;
		
		img{	
			transition: all .5s;
			opacity: 1;   
			background-color: var(--black);
			object-fit: cover;
			height: 100%;
		}
		
		&:hover{
			img{
				transform: scale(1.02);
				transform-origin: center; 
				opacity: .6;  
			} 
			
			.information{
				opacity: 1;   
			}
		}
		
		.information{
			position: absolute;
			bottom: 75px;
			left: 75px;
			right: 75px;
			opacity: 0;   
			transition: all .5s;
		}
		
		h3, h4 {
			cursor: default;
		}
		
		h3{
			font-size: 35px;
			line-height: 40px;
			font-family: var(--font-medium);	
		}
		
		h4{
			font-size: 14px;
			padding: 0 0 10px 0;
		}
	}
}


@media (min-width: 2400px){
 #ce_team .image-full,#ce_team .grid{
		padding: 130px 0;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
}
@media (max-width: 1025px){	
	#ce_team .grid{
		padding: 50px 0;
	}
}
@media (max-width: 990px){	
	#ce_team{
		.image-full,#ce_team .grid{
			 padding: 35px 0;
		 }
		 .grid_item{
			.information {
					bottom: 35px;
					left: 35px;
					right: 35px;
			}
			h3 {
					font-size: 25px;
					line-height: 25px;
			}	
			img{	
					opacity: .6;   
			}
			.information{
					opacity: 1;   
			}
		 }	
		 .grid{
			 display: block;
		 }
		 .grid.gallery-4 .grid_item:nth-child(2n+1), 
		 .grid.gallery-3 .grid_item:nth-child(2) {
			 grid-row: 1/1;
			 aspect-ratio: 4/3!important;
		 }
		 .grid .grid_item{
			 margin-bottom: 35px;
		 }
	}
}
@media (max-width: 576px){
	 #ce_team .image-full,#ce_team .grid{
			padding: 15px 0;
		}
		#ce_team{
			.grid_item{
				.information{
					bottom: 10px;
					left: 10px;
					right: 10px;
				}
				h3{
					font-size: 20px;
				}
				h4{
					display: none;
				}
			}
		}
}


/***** CAREER ******/

#job_opening{
	.infobox{
		padding: 35px 35px 50px 35px;
		margin-bottom: 75px;
		
		h2{
			padding-bottom: 0;
		}
	}
	
	.stoerer{
		position: absolute;
		left: -43px;
		top: 80px;
		z-index: 10;
		-webkit-animation: rotating 20s linear infinite;
		-moz-animation: rotating 20s linear infinite;
		-ms-animation: rotating 20s linear infinite;
		-o-animation: rotating 20s linear infinite;
		animation: rotating 20s linear infinite;
	}
	
	span.headline{
		font-family: var(--font-roman);
		font-size: calc(30px + (60 - 30) * (100vw - 400px) /( 2500 - 400));
		letter-spacing: -0.25px;
		line-height: 1.2;
		display: block;
	}
}
#ce_job_description {
	li{
		list-style-type: none;
	}
}
.job_inquiry{
	display: block;
	width: 100%;
	height: 50px;
	background: var(--medium-grey);
	color: var(--beige);
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-medium);
	padding: 13px;
	transition: all .2s;
	transform: scale(1);
	letter-spacing: 1px;
	margin: 35px 0 15px;
	
	&:hover{
		color: var(--beige);
		background: var(--black);
		transform: scale(0.95);
	}
}
@media (min-width: 2400px){
	#job_opening .stoerer{
		left: -65px;
	}
	.job_inquiry{
		height: 70px;
		line-height: 44px;
	}
}
@media (min-width: 1919px) and (max-width:2399px){
	.job_inquiry{
		height: 70px;
		line-height: 44px;
	}
}
@media (min-width: 1450px){
	#job_opening .infobox{
		padding: 50px 50px 70px 50px;
	}
}
@media (max-width: 990px){
	#job_opening .stoerer{
		left: auto;
		right: 50px;
		top: -50px;
	}
}
@media (max-width: 767px){
	#job_opening .stoerer{
		right: 30px;
	}
}

/***** INFORMATION ******/

#information{
	#wrapper h1{
		font-size: 65px;
		line-height: 75px;
		font-family: var(--font-medium);
		text-transform: uppercase;	
		padding-bottom: 75px;
	}
	h2{
		font-size: 25px;
		padding-bottom: 15px;
		line-height: 26px;
	}
	h3{
		padding-bottom: 15px;
		line-height: 26px;
	}
	ul{
		margin-bottom: 45px;
	}
	 ul li{
		list-style-type: none;
		margin-bottom: 0;
	}
	ul ul{
		padding-top: 10px;
		margin-bottom: 10px;
		padding-left: 16px;	
	}
	ul ul li{
		list-style-type: disc;
		list-style-position: outside;
		margin-bottom: 5px;
	}
	&.privacy ul li{
		list-style-type: disc;
		list-style-position: outside;
		margin-bottom: auto;
		margin-left: 15px;
	}
	&.privacy a, 
	&.cookies a{
		text-decoration: underline;
	}
	&.privacy p{
		margin-bottom: 35px;
	}
	&.privacy li p{
		margin-bottom: 15px;
	}
	&.signup{
		#ce_header_newsletter{
			max-height:650px ;
		}
		.icon-newsletter{
			position: absolute;
			right: -100px;
			top: -70px;
			height: 140px;
			width: 140px;   
			-webkit-animation: rotating 20s linear infinite;
				-moz-animation: rotating 20s linear infinite;
				-ms-animation: rotating 20s linear infinite;
				-o-animation: rotating 20s linear infinite;
				animation: rotating 20s linear infinite;
		}
		.newsletter-themen .row{
			padding-bottom: 50px;
		}
		.newsletter-themen img{
			position: relative;
			margin: auto;
			height: auto;
			width: 100%;
			max-height: 80px;
		}
		#mc_embed_signup{
			background:var(--beige); 
			clear:left; 
			font:14px;
			width:100%;
			padding: 75px 75px 90px 75px;
		}
		#mc_embed_signup input.email{
			display: block;
				width: 100%;
				height: 50px;
				background: none;
				border-color: var(--black);
				color: var(--black);
				padding: 0 15px;
				box-sizing: border-box;
				margin-bottom: 50px;
				border: 2px solid var(--black);
			font-family: var(--font-dots);
			letter-spacing: 1px;
		}
		#mc_embed_signup .indicates-required{
			float: right;
		}
		#mc_embed_signup .mc-field-group li,
		#mc_embed_signup .mc-field-group h2
		{
			margin-bottom: 15px;
		}
		#mc_embed_signup .mc-field-group li {
			width: 48%;
			display: inline-block;
		}
		#mc_embed_signup .mc-field-group label{
			letter-spacing: 0;
			margin: 0 0 10px 10px;
		}
		#mc_embed_signup .mc-field-group label p{
			font-weight: normal;
			font-family: 'HelveticaNeueLTPro-Lt', Helvetica, Arial, sans-serif;
		}
		#mc_embed_signup .button{  
			font-family: var(--font-medium);
			background-color: var(--mint);
			border: none;
			color: var(--black);
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: inherit;
			margin: 4px 2px;
			cursor: pointer;
		}
		#mc_embed_signup .datenschutz ul{  
			margin: 0;
			padding: 0;
		}
		#mc_embed_signup .datenschutz li{  
			width: 100%;
		}
		#mc_embed_signup .datenschutz .datenschutz-text{  
			padding-top: 15px;
			font-size: 14px;
			line-height: 20px;
		}
		#mc_embed_signup .datenschutz span{  
			font-size: 14px;
		}
		#mce-success-response {
			display: block;
			width: 100%;
			padding: 25px;
			background: var(--black);
			font-family: var(--font-medium);
			color: var(--beige);
		}
		.checklist input[type="checkbox"] {
			appearance: none;
			background-color: var(--form-background);
			margin: 0;
		
			font: inherit;
			color: currentColor;
			width: 1.5em;
			height: 1.5em;
			border: 2px solid var(--black);
			border-radius: 0;
			transform: translateY(-0.075em);
			display: inline-grid;
		}
		.checklist input[type="checkbox"]::before {
			content: "";
			width: 0.95em;
			height: 0.95em;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			transform: scale(0);
			transform-origin: center center; 
			transition: 120ms transform ease-in-out;
			/* Windows High Contrast Mode */
			background-color: CanvasText;
			place-self: center;
		}
		.checklist input[type="checkbox"]:checked::before {
			transform: scale(1);
		}
		.checklist input[type="checkbox"]:disabled {
			--form-control-color: var(--form-control-disabled);
		
			color: var(--form-control-disabled);
			cursor: not-allowed;
		}
		.checklist label{
			position: relative;
			top: -5px;
		}

	}
}


@media (max-width: 1200px){
	#information.signup .icon-newsletter{
		position: absolute;
		right: 0;
		top: -70px;
		height: 140px;
		width: 140px;   
	}
}

@media (max-width: 992px){
	#information.signup #ce_header_newsletter{
		max-height:350px ;
	}
	#information.signup #mc_embed_signup {
    	padding: 35px 35px 40px 35px;		
	}
	#information{
		text-align: left;
	}
	#information.signup #mc_embed_signup .mc-field-group li {
		width: 100%;
		display: block;
	}
	#information.signup .icon-newsletter{
		position: absolute;
		right: -70px;
		top: -70px;
		height: 140px;
		width: 140px;   
	}
	#information.signup .newsletter-themen img{
		height: auto;
		width: 100%;
		max-height: 80px;
	}
}
@media (max-width: 576px){
	#information.signup #ce_header_newsletter{
		max-height:250px ;
	}
	#information.signup .icon-newsletter{
		position: absolute;
		right: 35px;
		top: -140px;
		height: 100px;
		width: 100px;   
	}
	#information{
		text-align: left;
	}
	#information #wrapper h1{
		font-size: 24px;
    	line-height: 32px;
		padding-bottom: 35px;
	}
}


/***** LANDINGPAGE ******/

#landingpage{
	h1{
		font-size: 4.7em;
		line-height: 1.1em;
		font-family: var(--font-roman);
		font-weight: normal;
	}
	h2{
		font-size: 2em;
		line-height: 1.3;
		font-family: var(--font-roman);
		font-weight: normal;
	}
	h2.subline,
	#facts_figures dd strong
	{
		font-size: 1.5em;
		line-height: 1.4em;
		font-family: var(--font-roman);
		font-weight: normal;
	}
	h3{
		font-family: var(--font-roman);
		font-weight: normal;
	}
	.button-container{
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.button{
		display: inline-flex;
		flex-direction: row;
		gap: 10px;
		padding: 10px 35px 5px;
		width: fit-content;
		border-radius: 50px;
		margin-top: 35px;
		font-family: var(--font-medium);
		line-height: 1.5em;
		border: 1px solid var(--beige);
		transition: all .25s ease-in-out;
		transform: scale(1);
		&:hover{
			transform: scale(0.95);
		}
		&.cta{
			background-color: var(--beige);
			color: var(--black);
		}
		svg{
			margin-top: -3px;
			display: inline;
		}
	}
	.return:not(.button){
		font-size: calc(14px + (30 - 14) * (100vw - 400px) /( 2500 - 400));
		line-height: 1;
		svg{
			margin: -6px 10px 0 0;
			display: block;
			transition: 0.5s all;
		}
		&:hover svg{
			margin: -11px 10px 0 0;
		}
	}
	.icon{
		height: 50px;
		width: auto;
		margin-bottom: 35px;
	}
	#intro .img-container{
		aspect-ratio: 1/1;
	}
	#factors .number-circle {
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		border: 2px solid var(--beige);
		border-radius: 50%;
		font-size: 24px;
		line-height: 60px;
		font-weight: 500;
		margin: 0 auto 20px auto;
	}
	#facts_figures{
		dt{
			font-size: 4em;
			font-family: var(--font-light);
			font-weight: normal;
		}
		dd strong{
			padding-bottom: 35px;
			display: block;
		}
		dd strong{
			padding-bottom: 35px;
			display: block;
		}
	}
	#solutions .trenner{
		margin: 20px 0;
	}
	#related_work img,
	#related_work video
	{
		margin-bottom: 35px;
	}
	.ce_overview {
		padding: 0;
	}
	.client_some_teaser video{
		object-fit:contain;
		transform:none;	
		width: 100%;
		height: auto;
	}
	.ce_overview a:hover video{
		transform:none;	
	}

#pdf {
		.pdf_container{
			position: relative;
		}
		svg {
			position: absolute;
			top: -40px;
			left: -40px;
			width: 120px;
			height: 120px;
		}
		.img-container {
			aspect-ratio: 16/9;
			box-shadow: var(--shadow-dark) 0px 14px 28px, var(--shadow-medium) 0px 10px 10px;
		}

	}
	#category_teaser img.no-crop	{
		width: 100%;
		height: auto;
	}
}
#calendly{
	.person{
		.img-container {
			aspect-ratio: 1/1;
			width: 100%;
			height: auto;
			border-radius: 50%;
			max-width: 70px;
		}
		p {
			font-size: 1.3em;
			line-height: 1.2em;
		}
	}
}
#keyservice_teaser{
	.img-container{
		aspect-ratio: 3/4;
		margin-bottom: 50px;
	}
	.img-container img,
	#related_work{
		transform-origin: center; 
		transition: all .5s;
		transform: scale(1.0);
	}
	a:hover .img-container img{
		transform: scale(1.05);
	}
}
@media (max-width: 991px){
	#landingpage{
		h2{
			font-size: 1.8em;
		}
		#intro{
			.img-container{
				aspect-ratio: 4/3;
			}
			h1  {
				font-size: calc(40px + (120 - 40) * (100vw - 400px) /( 2500 - 400));
			}
			#intro_text_img_right .img-container  {
				display: none;
			}
			.intro-text {
				margin-bottom: 75px;
			}
		}
		#facts_figures,
		#intro .text-center{
			text-align: left!important;
		}
		#facts_figures{
			.stat{
				margin-bottom: 50px;
				padding-bottom: 50px;
				border-bottom: 1px solid var(--beige);
			}
			.stat:last-child{
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
			.trenner{
				display: none;
			}
			dt {
				font-size:8vw;
			}
			dd strong{
				padding-bottom: 0;
			}
		}
		#lp_textimg .img-container,
		#category_teaser .img-container,
		#category_teaser img.no-crop
		{
			margin-bottom: 50px;
		}
		#solutions .service:last-child{
			margin-bottom: 0;
		}
		#solutions .trenner{
			display: none;
		}
		#pdf{
			.img-container {
				margin-bottom: 50px;
			}
			svg {
				width: 60px;
				height: 60px;
				top: -20px;
				left: -20px;
			}
		}
	}
	#keyservice_teaser{
		a	{
			display: block;
		}
		img{
			margin-bottom: 0;
		}
		.img-container{
			aspect-ratio:4 / 3;
		}
		#factors .factor {
			margin: 0 auto 35px auto;
		}
	}
 #calendly .person p {
		font-size: 1.3em;
	}
}
@media (max-width: 576px){
	#keyservice_teaser .text,
	#landingpage #solutions .text{
		margin-bottom: 35px;
	}
	#landingpage #solutions .icon{
		width: 100%;
		height: auto;
	}
	#landingpage .button {
    padding: 10px 15px 5px;
	}
	#landingpage .button.cta,
	#landingpage .button{
		font-family: var(--font-medium-cn);
		letter-spacing: 0.2px;
	}

}


/***** FAQs ******/

#accordion_faq {
	background-color: var(--transparent)!important;
	color: var(--black)!important;
	.accordion-item,
	.accordion-button
	{
		background-color: var(--transparent)!important;
		color: var(--black)!important;
	}
	.accordion-item{
		border-bottom: 1px solid var(--black);
		transform: scale(1);
		transition: all .3s ease-in-out;
		&:hover{
			transform: scale(1.02);
		}
		&:first-child{
			border-top: 1px solid var(--black);
		}
	}
	.accordion-button {
		transition: none;
		padding: 35px 0;
		font-size: inherit;
		/* Grid-only-Bootstrap liefert .text-start nicht -> <button> erbt den
		   UA-Default text-align:center. Bei umbrechenden Titeln (2 Zeilen)
		   sonst sichtbar zentriert. Explizit linksbuendig erzwingen. */
		text-align: left;
		&:focus {
				border-color: var(--transparent);
				box-shadow:none;
		}
		&:after {
				width: 0;
				height: 0;
				content: "";
				background-image: none;
				background-repeat: no-repeat;
				background-size:0;
		}
	}
	.accordion-icon {
		stroke: var(--black);
	} 
	.accordion-icon {
		transition: transform 0.3s ease;
		}  
	.accordion-button[aria-expanded="true"] .accordion-icon {
		transform: rotate(180deg);
		}
	.accordion-item:first-child{
			border-top: 1px solid var(--black);
		} 
	.accordion-body{
		padding: 0 35px 35px 0;
	}
}
.dark #accordion_faq{
	background-color: var(--transparent)!important;
	color: var(--beige)!important;
	.accordion-item,
	.accordion-button
	{
		background-color: var(--transparent)!important;
		color: var(--beige)!important;
	}
	.accordion-item{
		border-bottom: 1px solid var(--beige);
	}
	.accordion-item:first-child{
		border-top: 1px solid var(--beige);
	}
	.accordion-icon {
		stroke: var(--beige);
		}  
	.accordion-item:first-child{
			border-top: 1px solid var(--beige);
		}
}
@media (max-width: 991px){
	.accordion-item span{
		text-align: left;
	}
}
@media (max-width: 576px){
	.dark #accordion_faq{
		.accordion-icon {
			width: 25px;
			}  
	}
}
/***** TESTIMONIALS ******/

#testimonials_teaser{
	margin-bottom: 0;
	.headline{
		padding-bottom: 50px;
	}
	.testimonial{
		background-clip: content-box;
		.content{
			padding: calc(25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)) calc(10px + (24 - 10) * (100vw - 400px) /( 2500 - 400));
			background: var(--cream);
		}
		li{
			list-style-type: none;
			&.name{	
				padding-bottom: 10px;
			}
			&.title{	
				font-size: 0.8em;
				line-height: 1.5;
				margin-bottom: 15px;
				min-height: calc(1em*1.5*3);
			}
			&.stars {
				text-align: left;
				padding-bottom: 20px;
				img{
					visibility: visible;
					display: block;
					height: 20px;
					width: auto;
				}
				.five_stars{
					content:url("/assets/global/img/icon-stars-5-blk.svg");
				}
				.four_stars{
					content:url("/assets/global/img/icon-stars-4-blk.svg");
				}
				.three_stars{
					content:url("/assets/global/img/icon-stars-3-blk.svg");
				}
				.two_stars{
					content:url("/assets/global/img/icon-stars-2-blk.svg");
				}
				.one_stars{
					content:url("/assets/global/img/icon-stars-1-blk.svg");
				}
			}
		}
		a{	
			font-family: var(--font-medium);	
		}
		p{	
			display: block;
		}
		.collapse:not(.show) {
			display: block;
			height: 0!important;
			overflow: hidden;
		}
		.collapse.collapsing {
			height: 0;
			min-height: 0!important;
		}
		a.collapsed:after {
			content: 'Mehr erfahren';
			opacity: 1;
		}
		a:not(.collapsed):after {
			content: 'Mehr erfahren';
			opacity: 0;
			transition: opacity 0.4s ease-in-out;
		}
	}
}
.dark #testimonials_teaser .testimonial {
	.content{
		background: var(--grey);
	}
	li.stars{
		.five_stars{
			content:url("/assets/global/img/icon-stars-5.svg");
		}
		.four_stars{
			content:url("/assets/global/img/icon-stars-4.svg");
		}
		.three_stars{
			content:url("/assets/global/img/icon-stars-3.svg");
		}
		.two_stars{
			content:url("/assets/global/img/icon-stars-2.svg");
		}
		.one_stars{
			content:url("/assets/global/img/icon-stars-1.svg");
		}
	}
}
@media (min-width: 2400px){
	#testimonials_teaser .testimonial{
		li.stars {
			padding-bottom: 30px;
		}
		li.stars img{
			height: 30px;
		}
		li.title{	
			font-size: 18px;
			line-height: 22px;
			padding-bottom: 30px;
		}
		a{	
			padding-top: 35px;
		}
	}
}
@media (max-width: 1200px){	
	#testimonials_teaser .headline h3{
		padding-bottom: 0;
	}
}
@media (max-width: 1025px){	
}
@media (max-width: 990px){	
	#testimonials_teaser .testimonial:nth-child(3){
		display: none;
	}
	#testimonials_teaser .testimonial{
		margin-bottom: 20px;
	}
}

/***** FORMULAR ******/

#formular {
	.fui-label-above-input{
		margin-bottom: 40px;
	}
	
	.fui-label, 
	.fui-legend{
		text-transform: uppercase;
		font-size: 10px;
		letter-spacing: .5px;
		
		a{
			text-decoration: underline;
			display: inline;
			margin: 0;
			padding: 0;
		}
	}
	
	.fui-checkbox label, 
	.fui-radio label{
		color: var(--black);
		
		a{
			text-decoration: underline;
			display: inline;
			margin: 0;
			padding: 0;
		}
		
		&:before{
			background-color: var(--cream);
			border: 1px solid var(--black);	
		}
	}
	
	.fui-input, 
	.fui-select{
		background: none;
		border: 0;
		border-bottom: 1px solid var(--black);
		border-radius: 0;
		padding: 2px;
	}
	
	.fui-checkbox {
		input:checked+label:before{
			background-image: url("/assets/global/img/checkbox-haken-dark.svg");
			background-size: 8px auto;
		}
	}
	
	.fui-error-message,
	.fui-required{
		color: var(--error-grey);
	}
	
	.fui-submit{
		cursor: pointer;
		display: block;
		max-width: 100%;
		min-width: 215px;
		padding: 14px;
		text-align: center;
		transition: all .25s ease-in-out;
		transform: scale(1);
		border: none;
		background: var(--black);
		color: var(--beige);
		
		&:hover{
			transform: scale(0.92);
		}
	}
	
	.fui-alert-error, 
	.fui-alert-success{
		background-color: var(--mint);
		color: var(--black);
	} 
}
.dark #formular{
	.fui-label,
	.fui-legend, 
	.fui-checkbox label, 
	.fui-radio label{
		color: var(--beige);
	}
	
	.fui-input, 
	.fui-select{
		border-bottom: 1px solid var(--beige);
		color: var(--cream);
	}
	
	.fui-checkbox {
		input:checked+label:before{
			background-image: url("/assets/global/img/checkbox-haken-hell.svg");
			background-size: 8px auto;
		}
		
		label:before{
			background-color: var(--black);
			border: 1px solid var(--cream);	
		}
	}
	
	.fui-radio label:before{
		background-color: var(--black);
		border: 1px solid var(--cream);	
	}
	
	.fui-error-message,
	.fui-required{
		color: var(--mint);
	}
	
	.fui-submit{
		background: var(--mint);
		color: var(--black);
	}
}


/***** FOOTER ******/


#footer-calender{
	margin: 0 0 calc(0px - (25px + (60 - 25) * (100vw - 400px) /( 2500 - 400)));
	padding-bottom: 0;
}

#footer-contact p, #footer-contact li{
	font-family: var(--font-roman);
	list-style-type: none;
}
#footer_social li{
	margin-right: 2%;
}
#footer_social svg{
	width: 1.8vw;
	min-width: 22px;
	height: auto;
	fill: var(--black);
}
.dark #footer_social svg{
	fill: var(--beige);
}
#cookie_disclaimer { 
	background: var(--beige); 
	height: auto;
	padding: 15px 0;
	position:fixed;
	bottom:2%; 
	width:96%; 
	z-index:300; 
	margin: 0 2%;
	box-shadow: 0px 3px 6px 0px var(--shadow-light);
}
#cookie_disclaimer p,#cookie_disclaimer span, #cookie_disclaimer a { 
	font-size:14px;
}
#cookie_disclaimer .description { 
	line-height: 18px;
}
#cookie_stop {
	color: var(--beige);
	position: relative;
	padding:8px 0;
	display: block;
	width:100%;
	background: var(--success-red);
	display: inline-block;
	cursor: pointer;
	transform: scale(1);
	transition: transform .2s;
	text-align: center;
 }
#cookie_stop:hover {
	transform: scale(0.95);
 }
@media (max-width: 990px){	
	#cookie_disclaimer {
		padding: 35px 0;
	}
	#cookie_disclaimer .col-12,#cookie_disclaimer .col-md-8 { 
		margin-bottom: 15px;
	}
	#cookie_stop{
		max-width:320px;
	}
}

/***** BACK TO TOP ******/

.back-to-top {
	position: fixed;
	bottom:20px;
	right:20px;
	box-shadow: 0px 3px 6px var(--shadow-light);  	
	height: 60px;
	width:60px;
	display: block;
	background: url('/assets/global/img/arrow-up.svg') var(--beige) no-repeat center center;
	background-size: 10px 16px;
	transition: transform .5s;
	transform: scale(1);
	cursor: pointer;
}
.back-to-top:hover {
	transform: scale(1.1);
}
@media (max-width: 992px){	
	.back-to-top {
		display: none!important;
	}
}

/* Loading Spinner Styles */
.spinner-border {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: text-bottom;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg);
	}
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Lazy Loading Image Styles */
.lazy-load {
	opacity: 0 !important;
	transition: opacity 0.3s ease;
}

.lazy-load.loaded,
img[style*="opacity: 1"] {
	opacity: 1 !important;
}

/* ============================================================
   Header-CTA + Kontakt-Popup   (feature_content_update)
   ============================================================ */

/* --- Trigger im Header (rechts, vor dem Logo) --- */
.cta-logo-group { gap: 22px; }
.cta-nav {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 10px 26px 8px;
	border-radius: 50px;
	border: 1px solid transparent;
	font-family: var(--font-medium);
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	background: var(--grey);
	color: var(--cream);
	transition: transform .25s ease-in-out, background .25s, color .25s;
}
.cta-nav:hover { transform: scale(0.96); }
.dark .cta-nav { background: var(--cream); color: var(--grey); }
.cta-nav__label--short { display: none; }

/* --- Header-Layout: Logo links, Sprache rechts-von-Mitte, CTA + Menü rechts ---
   Wird von #navigation (geschlossen) UND #navigation-active (offen) genutzt,
   damit der offene Zustand den Header spiegelt (X sitzt, wo der Burger war). */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
}
.nav-bar .nav-context {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: clamp(40px, 7vw, 110px);
}
.nav-bar .nav-right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
/* Sprachumschalter rechts-von-der-Mitte: klarer Abstand zum CTA/Menü-Cluster */
.nav-bar .nav-lang { flex: 0 0 auto; margin-right: clamp(90px, 12vw, 230px); }
.nav-bar .nav-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: 0 0 auto;
}
.nav-bar .nav-actions .nav-icon { flex: 0 0 auto; margin: 0; }

/* Menü offen: darunterliegenden Header ausblenden (kein doppeltes X) */
body.menu-open #navigation { opacity: 0; pointer-events: none; }

/* Overlay: Menü vertikal in der Viewport-Höhe zentrieren (Header-Zeile bleibt oben) */
#navigation-active { display: flex; flex-direction: column; box-sizing: border-box; }
#navigation-active .container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#navigation-active .nav-overlay-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Aesop-Anmutung: Liste laeuft von oben */
	overflow-y: auto;
	padding-top: 2vh;
	padding-bottom: 6vh;
}

/* Overlay-Header (immer auf dunklem Grund): weißes Logo, cream CTA */
#navigation-active .nav-bar .logo { display: block; }
#navigation-active .nav-bar .logo img {
	width: 15vw;
	min-width: 220px;
	height: auto;
	content: url("/assets/global/img/echd-logo-stempel-weiss-rgb.png");
}
#navigation-active .nav-bar .cta-nav { background: var(--cream); color: var(--grey); }

/* --- Popup-Overlay --- */
.cta-popup {
	position: fixed;
	inset: 0;
	z-index: 200; /* über #navigation-active (100) */
	display: flex;
	align-items: center;
	justify-content: center;
}
.cta-popup[hidden] { display: none; }
.cta-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .2s ease;
}
.cta-popup.active .cta-popup__backdrop { opacity: 1; }
.cta-popup__panel {
	position: relative;
	width: min(92vw, 460px);
	background: var(--cream);
	color: var(--grey);
	border-radius: 24px;
	padding: 48px 40px 40px;
	box-shadow: 0 30px 80px rgba(21, 21, 21, 0.35);
	transform: translateY(14px);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}
.cta-popup.active .cta-popup__panel { transform: translateY(0); opacity: 1; }
.cta-popup__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--grey);
	cursor: pointer;
	border-radius: 50%;
	transition: background .2s ease;
}
.cta-popup__close:hover { background: var(--beige); }
.cta-popup__title {
	font-family: var(--font-medium);
	font-size: 24px;
	line-height: 1.25;
	margin-bottom: 28px;
}
.cta-popup__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cta-popup__option {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: left;
	text-decoration: none;
	padding: 18px 22px;
	border-radius: 16px;
	border: 1px solid var(--grey);
	background: var(--grey);
	color: var(--cream);
	cursor: pointer;
	font-family: inherit;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.cta-popup__option:hover { transform: translateY(-2px); }
.cta-popup__option--soft {
	background: transparent;
	color: var(--grey);
}
.cta-popup__option--soft:hover { background: var(--beige); }
.cta-popup__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}
.cta-popup__icon svg { width: 24px; height: 24px; display: block; }
.cta-popup__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cta-popup__label { font-family: var(--font-medium); font-size: 17px; }
.cta-popup__sub { font-size: 13px; opacity: .8; line-height: 1.35; }
/* "Anrufen" ist ein <a> (tel:) und wuerde sonst beim Hover die globale
   (dunkle bzw. .dark-beige) Link-Farbe erben -> unlesbar auf dem dunklen Button.
   Textfarbe der Optionen deshalb hover-/focus-fest pinnen (auch im .dark-Kontext). */
.cta-popup__option,
.cta-popup__option:hover,
.cta-popup__option:focus,
.dark .cta-popup__option,
.dark .cta-popup__option:hover,
.dark .cta-popup__option:focus { color: var(--cream); }
.cta-popup__option--soft,
.cta-popup__option--soft:hover,
.cta-popup__option--soft:focus,
.dark .cta-popup__option--soft,
.dark .cta-popup__option--soft:hover,
.dark .cta-popup__option--soft:focus { color: var(--grey); }

body.cta-open { overflow: hidden; }

/* --- Responsive (Mobile-Label + kompakteres Popup) --- */
@media (max-width: 990px) {
	.cta-nav__label--full { display: none; }
	.cta-nav__label--short { display: inline; }
	.cta-nav { padding: 8px 18px 6px; font-size: 14px; }
	/* Header mobil: Logo + Menü in einer Zeile; Sprache, Titel und CTA ausgeblendet */
	#navigation .nav-bar { gap: 14px; }
	#navigation .nav-actions { gap: 14px; }
	#navigation .nav-lang { display: none; }
	#navigation .nav-context { display: none; }
	/* Logo mobil kleiner — ueber feste Breite + height:auto (ratio-sicher).
	   .nav-bar-Spezifitaet schlaegt die non-media height:clamp-Regel (sonst gestaucht). */
	#navigation .nav-bar .logo img { float: none; width: 62px; height: auto; min-width: 0; }
	/* CTA "Termin buchen" im Header (geschlossen + Overlay) auf Mobile ausblenden */
	#navigation .nav-actions .cta-nav,
	#navigation-active .nav-actions .cta-nav { display: none; }
	/* Burger kleiner -> optisch passend zum kleinen Logo (X-Animation bleibt via scale erhalten) */
	#navigation .nav-icon,
	#navigation-active .nav-icon { transform: scale(0.7); }
	/* Overlay-Header mobil: kleines Logo, kompakt; Sprache bleibt */
	#navigation-active .nav-bar { gap: 14px; }
	#navigation-active .nav-actions { gap: 14px; }
	#navigation-active .nav-bar .nav-lang { margin-right: clamp(30px, 8vw, 120px); }
	#navigation-active .nav-bar .logo img {
		width: 62px;
		height: auto;
		max-width: none;
		min-width: 0;
		content: url("/assets/global/img/echd-logo-weiss-rgb.png");
	}
	.cta-popup__panel { padding: 42px 26px 30px; border-radius: 20px; }
	.cta-popup__title { font-size: 21px; margin-bottom: 22px; }
}

/* Punkt 1: Schriften auf Mobile minimal kleiner (weniger "grob/quetschig").
   Body-Boden leicht runter -> alle em-basierten Groessen (h1 4em, h3, p ...)
   skalieren proportional mit; Hero-H1 zusaetzlich gedeckelt. */
@media (max-width: 767px) {
	body { font-size: 13px; }
	h1 { font-size: 3.5em; line-height: 1.02; }
	h2, .title, .counter { font-size: calc(19px + (43 - 19) * (100vw - 400px) / (2500 - 400)); }
	/* Pill-Buttons mobil kompakter (wirkten neben dem kleineren Text zu gross) */
	.agency-btn { font-size: 14px; padding: 8px 20px 6px; }
}

/* Fix: Hero-Video füllt die Spalte wie die regulären Bilder.
   (Die cover-Regel für Carousel-Videos lag nur im Mobile-Breakpoint <=990px,
   auf Desktop blieb das Video zu schmal / object-fit: contain.) */
#ce_header_index .carousel-item .img-oben:has(video) {
	width: 100%;
	overflow: hidden;
	/* aspect-ratio, max-height & display NICHT überschreiben: kommen aus .img-oben
	   (3/4 Desktop, 4/3 Mobile, max-height 80vh) → gleiche Box wie die Bilder */
}
#ce_header_index .carousel-item .img-oben video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

/* ============================================================
   Scroll-Reveal (ersetzt AOS): Fade + Slide-up beim Eintritt in den Viewport.
   Startzustand NUR bei aktivem JS (html.js, per Inline-Script im <head> gesetzt)
   → kein FOUC und no-JS-sicher. Gilt für alle Sektions-Blöcke + optional [data-reveal].
   ============================================================ */
html.js [data-reveal],
html.js .mod_block,
html.js .mod_block_sm,
html.js .mod_block_grey,
html.js .mod_two_column,
html.js .mod_three_column,
html.js .mod_four_column,
html.js .mod_complex,
html.js .mod_list,
html.js .mod_client_block {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .7s ease-out, transform .7s ease-out;
}
html.js [data-reveal].is-visible,
html.js .mod_block.is-visible,
html.js .mod_block_sm.is-visible,
html.js .mod_block_grey.is-visible,
html.js .mod_two_column.is-visible,
html.js .mod_three_column.is-visible,
html.js .mod_four_column.is-visible,
html.js .mod_complex.is-visible,
html.js .mod_list.is-visible,
html.js .mod_client_block.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal],
	html.js [class*="mod_"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* =========================================================================
   Desktop-Navigation v2 (nornorm-Anlehnung): schlankes Logo, Inline-Nav mit
   vollbreiten Dropdown-Panels. Mobile behaelt das Burger-Overlay (#navigation-active).
   ========================================================================= */

/* Logo schlank (ohne Tagline) + kleiner. Dark-Seiten: weisse Wortmarke. */
#navigation .logo img {
	width: auto;
	height: clamp(30px, 2.8vw, 38px);
	min-width: 0;
}
.dark #navigation .logo img {
	content: url("/assets/global/img/echd-logo-weiss-rgb.png");
}

/* #navigation ueber dem Seiteninhalt, damit die Panels ueberlagern.
   pointer-events gezielt: die leere Header-Flaeche (15vh) faengt keine
   Klicks auf den darunterliegenden Hero ab. */
#navigation { z-index: 120; pointer-events: none; }
/* Logo + Menuepunkte immer ueber den Panels: die Panel-Oberkante liegt bei
   top: calc(100% - 6vh) und wuerde sonst (v.a. auf kleinen/niedrigen Desktops)
   das Logo ueberdecken. Mit hoeherem z-index tritt das Panel hinter dem Header hervor. */
#navigation .nav-bar { pointer-events: auto; position: relative; z-index: 130; }

/* --- Inline-Hauptnavigation --- */
.nav-primary { margin-left: clamp(52px, 7vw, 130px); margin-right: auto; }
.nav-primary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 40px);
}
.nav-primary__trigger,
.nav-primary__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	padding: 6px 0;
	margin: 0;
	cursor: pointer;
	color: inherit;
	font-family: var(--font-roman);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.nav-primary__trigger .nav-caret { transition: transform .25s ease; }
.nav-primary__trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-primary__item { position: relative; }
/* Leichte Farbabschwaechung beim Hover statt Unterstreichung */
.nav-primary__trigger:hover,
.nav-primary__link:hover { opacity: .6; }

/* Sprache klar vom CTA absetzen + gleiche Typo wie die Menuepunkte */
#navigation .nav-bar .nav-lang { margin-right: clamp(44px, 5vw, 96px); }
#navigation .nav-lang .language-manager a {
	font-family: var(--font-roman);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1;
}

/* --- Vollbreite Panels --- */
.nav-panels {
	position: absolute;
	top: calc(100% - 6vh);   /* naeher an die Menuepunkte heranruecken */
	left: 0;
	right: 0;
	z-index: 95;
	pointer-events: none;
}
.nav-panel {
	background: var(--cream);
	box-shadow: 0 24px 40px -24px rgba(21, 21, 21, .35);
	color: var(--grey);
	padding: 48px 0 56px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	pointer-events: none;
}
.nav-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: auto;
}
.nav-panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 120px);
}
.nav-panel__label {
	font-family: var(--font-roman);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-grey);
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--beige);
}
.nav-panel a { color: var(--grey); text-decoration: none; }

/* Service: Loesungen links */
.nav-panel__solutions { list-style: none; margin: 0 0 32px; padding: 0; }
.nav-panel__solutions li + li { margin-top: 22px; }
.nav-panel__solution { display: block; }
.nav-panel__solution-title {
	display: block;
	font-family: var(--font-medium);
	font-size: clamp(17px, 1.15vw, 20px);
	line-height: 1.2;
	transition: color .2s ease;
}
.nav-panel__solution:hover .nav-panel__solution-title { color: var(--accent-grey); }
.nav-panel__solution-desc {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--accent-grey);
	max-width: 48ch;
}
/* Service-Panel: Abstand zum CTA-Button an den oberen Abstand (Label→Lösungen, 22px) angleichen */
#navpanel-service .nav-panel__solutions { margin-bottom: 22px; }
#navpanel-service .nav-panel__cta { margin-top: 0; }

/* Link-Listen (Keyservices, Branchen, Agentur) */
.nav-panel__links { list-style: none; margin: 0; padding: 0; }
.nav-panel__links--cols { columns: 2; column-gap: clamp(24px, 3vw, 56px); margin-bottom: 32px; }
.nav-panel__links li { margin: 0 0 14px; break-inside: avoid; }
.nav-panel__links a {
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.3;
	position: relative;
	transition: color .2s ease;
}
.nav-panel__links a:hover { color: var(--accent-grey); }
.nav-panel__link--all { font-family: var(--font-medium); }

/* Keyservices: Karten (Bild oben, Titel + 1-Satz-Beschreibung darunter).
   Festes Seitenverhaeltnis -> alle Bilder gleich hoch. Karten oben ausgerichtet. */
.nav-panel__services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 22px); align-items: start; }
.nav-panel__service { display: block; }
.nav-panel__service-img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--beige);
	border-radius: 2px;
}
.nav-panel__service-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.nav-panel__service:hover .nav-panel__service-img img { transform: scale(1.05); }
.nav-panel__service-title { display: block; margin-top: 20px; font-family: var(--font-medium); font-size: 16px; line-height: 1.25; }
.nav-panel__service-desc { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--accent-grey); }

/* Termin-buchen-Button im Panel — Typo/Form wie der Header-CTA (.cta-nav) */
.nav-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--grey);
	color: var(--cream);
	border: 1px solid var(--grey);
	border-radius: 50px;
	padding: 10px 26px 8px;
	font-family: var(--font-medium);
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: transform .25s ease-in-out;
}
.nav-panel__cta { margin-top: 8px; }
.nav-panel__cta:hover { transform: scale(0.96); }
.nav-panel__cta svg { flex: 0 0 auto; }

/* Agentur: gestapelte Links — gleiche Groesse wie die Loesungs-Titel (Service) */
.nav-panel__links--stack { columns: auto; margin-bottom: 32px; }
.nav-panel__links--stack a { font-family: var(--font-medium); font-size: clamp(17px, 1.15vw, 20px); }
.nav-panel__links--stack li { margin-bottom: 16px; }

/* Agentur: Awards */
.nav-panel__awards { list-style: none; margin: 0; padding: 0; }
.nav-panel__awards li {
	font-size: clamp(16px, 1.15vw, 19px);
	padding: 14px 0;
	border-bottom: 1px solid var(--beige);
}
.nav-panel__awards li:first-child { padding-top: 0; }

/* Arbeiten: Featured-Cases */
.nav-panel__cases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.6vw, 26px);
}
.nav-panel__case { display: block; }
.nav-panel__case-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--beige);
	border-radius: 2px;
}
.nav-panel__case-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.nav-panel__case:hover .nav-panel__case-img img { transform: scale(1.04); }
.nav-panel__case-title {
	display: block;
	margin-top: 12px;
	font-family: var(--font-medium);
	font-size: 16px;
	line-height: 1.25;
}
.nav-panel__case-link {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--accent-grey);
}

/* --- Responsive: Desktop zeigt Inline-Nav, Mobile den Burger --- */
@media (min-width: 991px) {
	#navigation .nav-icon { display: none; }   /* Burger nur mobil */
}
@media (max-width: 990px) {
	.nav-primary { display: none; }            /* Inline-Nav nur Desktop */
	.nav-panels { display: none; }
}

/* =========================================================================
   Startseite: dunkles CTA-Band (unter den Bewertungen) + FAQ 2-spaltig
   ========================================================================= */
#ce_cta_band { background: var(--grey); color: var(--cream); padding: 40px 0; }
#ce_cta_band .row { row-gap: 18px; }
.cta-band__headline { margin: 0; }
.cta-band__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
@media (min-width: 992px) { .cta-band__actions { justify-content: flex-end; } }
/* Buttons auf dunklem Grund invertieren */
#ce_cta_band .agency-btn--primary { background: var(--cream); color: var(--grey); }
#ce_cta_band .agency-btn--secondary { background: transparent; color: var(--cream); border-color: var(--cream); }

/* Nav-Dropdown-Panel auf dunklen Seiten ebenfalls dunkel einfaerben */
.dark .nav-panel { background: var(--grey); color: var(--cream); }
.dark .nav-panel a { color: var(--cream); }
.dark .nav-panel__label { color: var(--beige); border-bottom-color: rgba(237, 232, 223, .25); }
.dark .nav-panel__solution:hover .nav-panel__solution-title,
.dark .nav-panel__links a:hover { color: var(--beige); opacity: .75; }
.dark .nav-panel__solution-desc,
.dark .nav-panel__service-desc,
.dark .nav-panel__case-link { color: rgba(237, 232, 223, .7); }
.dark .nav-panel__awards li { border-bottom-color: rgba(237, 232, 223, .25); }
.dark .nav-panel__service-img,
.dark .nav-panel__case-img { background: rgba(237, 232, 223, .12); }
/* CTA-Button im Panel auf dunklem Grund invertieren */
.dark .nav-panel__cta { background: var(--cream); color: var(--grey); border-color: var(--cream); }

/* Dunkle Seiten: CTA-Band vom (ebenfalls dunklen) Footer abgrenzen */
.dark #ce_cta_band {
	border-top: 1px solid rgba(237, 232, 223, .2);
	border-bottom: 1px solid rgba(237, 232, 223, .2);
}