:root { --transition: 320ms; }
* { box-sizing: border-box; }


@font-face {
    font-family: 'Avenir Next Regular';
    src: url('/fonts/AvenirNextLTPro-Regular.eot');
    src: url('/fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/AvenirNextLTPro-Regular.woff2') format('woff2'),
        url('/fonts/AvenirNextLTPro-Regular.woff') format('woff'),
        url('/fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('/fonts/AvenirNext-Medium.eot');
    src: url('/fonts/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/AvenirNext-Medium.woff2') format('woff2'),
        url('/fonts/AvenirNext-Medium.woff') format('woff'),
        url('/fonts/AvenirNext-Medium.svg#AvenirNext-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next Altra!';
    src: url('/fonts/AvenirNext-UltraLight.eot');
    src: url('/fonts/AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('/fonts/AvenirNext-UltraLight.woff2') format('woff2'),
        url('/fonts/AvenirNext-UltraLight.woff') format('woff'),
        url('/fonts/AvenirNext-UltraLight.svg#AvenirNext-UltraLight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family:"Avenir Next Ultra";
    src:url("/fonts/1437416/599179d8-2203-4a9f-b271-010a707271dc.woff2") format("woff2"),url("/fonts//1437416/3b0370cd-39d6-4a24-9c65-60787db0ebe0.woff") format("woff");
    font-weight: normal;
}

section ::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}


body.impressum{
	font-family: "Avenir Next Altra!";
}

body.impressum h2, h3, h4{
	font-family: 'Avenir Next';
}

body.impressum section a{
	color:inherit;
}

.burger {
  width: 22px;
  height: 14px;
  position: relative;      /* wichtig: für absolute Kinder */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top:2px;
}

header{
	background-color:#fff;
}

header .navigation{
	height:0vh;
	background:white !important;
	overflow: hidden;
	opacity: 0;
	transition: all 350ms ease-in-out;
	position: absolute;
	width:100%;
}

header .navigation .container{
	height:100%;
}

header .navigation .navlist{
	display: flex;
    height: 100%;
    padding-bottom:6em;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

header .navigation .navlist a{
	font-size: 1.5em;
	color:inherit;
	text-decoration: none;
	cursor: pointer;
}

header .navigation.active{
	opacity: 1;
	height:100vh;
}

.slider .card img{
	margin-right:0;
	width:100%;
}

.white.outline{
	padding:0 0em 2em 0em !important;
}

@media only screen and (max-width:1355px){
	body{
		font-size:0.8em !important;
		padding-top: 250px !important;
	}
	
	#contentcontainer section{
		width:88% !important;
	}
	
}


@media only screen and (max-width:1100px){
	body{
		font-size:0.65em !important;
		padding-top: 180px !important;
	}
}

@media only screen and (max-width:900px){
	body{
		font-size:0.5em !important;
	}
}

@media only screen and (max-width:600px){
	body{
		font-size:12px !important;
		padding-top: 41vh !important;
	}
}

@media only screen and (max-width:600px){
	.burger {
		width: 18px;
		height: 12px;
		margin-top:-4px;
	}	
	
	header .navigation .navlist{
	    padding-bottom:11em;
	}
	
	.desktoponly{
		display: none !important;
	}
	
	.slider .card img{
		margin-right:auto;
		width: 84%;
	}
	
	.white.outline{
	    padding: 0 1em 2em 1em !important;
	}    
}

/* Grundlinie */
.burger .line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  border-radius: 3px;
  transform-origin: 50% 50%;
  transition:
    top 0.25s ease,
    bottom 0.25s ease,
    transform 0.25s ease,
    opacity 0.2s ease;
}

/* Positionen im Ruhezustand */
.burger .line:nth-child(1) { top: 0; }
.burger .line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger .line:nth-child(3) { bottom: 0; }

/* Aktiv: beide äußeren gehen exakt in die Mitte und rotieren */
.burger.active .line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.burger.active .line:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.6); /* optional: leicht einklappen */
}

.burger.active .line:nth-child(3) {
  bottom: auto;            /* bottom lösen */
  top: 50%;                /* in die Mitte ziehen */
  transform: translateY(-50%) rotate(-45deg);
}






header{
	width:100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 9;
}

header .container{
	position: relative;
}

header .burgernav{
	position: absolute;
	right:0;
	top: calc(1em - 2px);
}

footer{
	position: relative;
	z-index: 8;
	min-height:400px;
	margin-top:1em;
}

footer a{
	font-family: "Avenir Next Altra!";
	font-size: 1em;
	display: block;
	margin-bottom:0.25em;
	text-decoration: none;
	color: inherit;
	
}

footer a.claxlink{
	display: inline-block;
}

@media only screen and (max-width:600px){
	
	header .burgernav img{
		height:20px;
		margin-top: -3px;
	}
	
	footer a{
		font-size: 1.35em;
	}
}

footer img{
	max-height:60px;
	margin-right: 1em;
	height:auto;
}

header .container{
	columns:1;
	background: white;
	padding:1em 0;
}


footer > .container{
	columns:1;
	padding:1em 0;
}

.logo img{
	max-width:300px;
	height:auto;
}

footer .logo img{
	max-width:250px;
	height:auto;
}

.logo span.big{
	font-size: 1.75em;
	font-weight: 700;
	margin-bottom:0em;
	letter-spacing: 0.25em;
}

.logo span.small{
	font-size: 0.95em;
	letter-spacing: 0.15em;
}

@media only screen and (max-width:600px){
	
	footer .logo img,
	.logo img{
		max-width:200px;
		height:auto;
	}
	
	.logo span.big{
		font-size: 1.25em;
		font-weight: 700;
		margin-bottom:0.05em;
		letter-spacing: 0.25em;
	}
	
	.logo span.small{
		font-size: 0.85em;
		letter-spacing: 0.15em;
	}	
}

footer .logo span.big{
	font-size: 1.25em;
}

footer .logo span.small{
	font-size: 0.85em;
}

header span,
footer span{
	display: block;
	text-transform: uppercase;
}

.number {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.number.visible {
  opacity: 1;
  transform: translateY(0);
}

body{
	font-family: "Avenir Next";
	padding:0;
	margin:0;
	padding-top:41vh;
	font-size:16px;
}

@media only screen and (min-width:801px){
	
	body{
		padding-top:275px;
	}
	
	.container{
		max-width: 1200px !important;
		columns: 2;
		gap: 3em;
	}
	
	.grid_three{
		gap: 20px !important;
	}
	
	.grid_three > div{
		font-size:0.9em;
	}
}

@media only screen and (max-width:600px){
	body{
		font-size:12px;
	}
}

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

.container{
	margin-left:auto;
	margin-right:auto;
	width:87%;
	max-width: 800px;
	
	
}

section{
	width:100%;
	position: relative;
	z-index: 2;
    margin-bottom:12em;
	box-sizing: border-box;
	overflow:hidden;
}

@media only screen and (max-width:600px){
    section{	
    	margin-bottom:8em;
    }	
}

section > img{
	width: 100%;
}

#contentcontainer section{
	height:100vh;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	width:92%;
	max-width:1200px;
	position: relative;
	z-index: 1;
	aspect-ratio:auto;
	display:block;
}

/*
@media only screen and (min-width:1441px){
	#contentcontainer section{
		width:100%;
		max-width:1780px;
	}
	
	body section.white.translucent{
		margin-bottom:12em !important;
	}
}
*/



#contentcontainer{
	display: block;
}

#contentcontainer.fixed{
	width:100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 0;
	box-sizing: border-box;
	padding-top:5em;
}

#contentcontainer.fixed img{
	cursor: pointer;
	pointer-events: none;
}

.grid{
	display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    background-color: #fff;
}

.grid > img,
.grid > picture{
	border: 0.5px solid transparent;
	display: block;
}

#desktopteam{
	cursor: pointer;
}

section.empty{
	display: none;
}

@media only screen and (min-width:1441px){
	
}

@media only screen and (min-width:800px){
	
	section.empty{
		height:90vh;
		display: block;
		background: transparent !important;
	}
	
	.grid{
		display: grid;
	    grid-template-columns: repeat(6, 1fr);
	    gap: 5px;
	}
	
	.grid img{
		margin-top:-5px;
	}
	
	#fadein{
		max-width: 70%;
		line-height:3.85em;
		margin-left:105%;
	}
	
	#desktopcentury1{
		max-width: 66%;
		line-height:3.85em;
	}
	
	#desktopcentury2{
		margin-top:-30%;
		margin-left:33%;
		max-width: 66%;
		line-height:3.85em;
	}
	
	#desktopteam{
		margin-left:-108%;
	}
}

@media only screen and (max-width:1400px){
	.grid{
		grid-template-columns: repeat(6, 1fr);
	}	
}

@media only screen and (max-width:600px){
	.grid{
		grid-template-columns: repeat(3, 1fr);
	}	
}

section.black{
	background:#1d1d1b;
	color:#fff;
}

section.black a{
	color:#fff;
	text-decoration: none;
}

section.white{
	background:#fff;
	color:#1d1d1b;
}

section.outline{
	border-top:8em solid #fff;
	border-bottom:8em solid #fff;
	margin-bottom:0 !important;
	margin-top:-16em;
}

.translucent,
section.white.translucent{
	background: #ffffff;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 20%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%);
}


section.white.translucent{
	padding-top:5em;
	padding-bottom:5em;
	margin-bottom:3% !important;
	margin-top:-5em;
}

footer .container.translucent{
	
    padding-bottom: 4em;
    padding-top: 5em;
	background-color:#fff;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
}

.mobilewhite{
		transition: opacity 900ms ease-in-out;
		opacity:0;
}

.mobilewhite.active{
		opacity:1;
	}

@media only screen and (max-width:600px){
	.mobilewhite{
		/*background: #ffffff !important;*/
		/*background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 20%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100%) !important;*/
		aspect-ratio:1/1 !important;
		width:calc(75% - 20px);
		/*color:#1d1d1b !important;*/
		padding-top:0 !important;
		padding-bottom:0 !important;
		/*justify-content: left !important;*/
		margin-bottom:20em;
	}
	
	
	
	.erfahrung{
		aspect-ratio:1/1 !important;
		margin-left:calc(25% + 20px);
		width:calc(75% - 20px);
		
		/*color:#1d1d1b !important;*/
		padding-top:0 !important;
		padding-bottom:0 !important;
		/*justify-content: left !important;*/
	}
	
	.erfahrung *{
		hyphens:auto !important;
	}
	
	.drive{
		aspect-ratio:1/1 !important;
		width:calc(75% - 20px);
		/*color:#1d1d1b !important;*/
		padding-top:0 !important;
		padding-bottom:0 !important;
		justify-content: center !important;
		text-align: center;
	}
	
	
}

section.square{
	aspect-ratio:1/1;
	padding:3em;
}

section.square.mobilewhite{
	padding:2.5em;
}

section.nopadding{
	padding:0;
}

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

.overlay{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	padding-left:3em;
	padding-right:3em;
	color:#fff;	
	box-sizing: border-box;
}

.overlay.center{
	display: flex;
	/*padding-top:2em;*/
    height: 100%;
    /*color:#1d1d1b;*/
    align-items: center;
}

.overlay.paddinglarge{
	padding-top:120%;
}	

h2{
	font-size:3em;
}

h3{
	font-size:1.5em;
}

@media only screen and (max-width:600px){
	h2{
		font-size:2em;
	}
}

.grid_three{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    padding-top: 3em;
    padding-bottom: 3em;
    align-items: start;
	font-size:1.25em;
}

@media only screen and (max-width:600px){
	.grid_three{
		grid-template-columns: repeat(1, 1fr);
	}	
	
	.grid_three > div{
		margin-bottom: 2em;
	}
}

.grid_three > div{
	display: flex;
	align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-weight: bold;
    width:100%;
    text-align: center;
}

.grid_three .number{
	font-size:3em;
	display: block;
	text-align: center;
	width:100%;
}

.slider__viewport{
	margin-bottom:0em
}

@media only screen and (max-width:600px){
	.slider__viewport{
		margin-bottom:-3em
	}
}


.slider figcaption{
	display:none !important;
}

.slider__arrow--prev{ left:-1.5em !important; }
.slider__arrow--next{ right:-1.5em !important; }


@media only screen and (min-width:601px){
	.slider__arrow{
		top:calc(100% - 3px) !important;		
	}
	
	.slider__arrow--prev{
		left: calc(-1.5em + 75px) !important;
	}
	
	.slider__arrow--next{
		right: calc(-1.5em + 75px) !important;
	}
}	

html body.impressum{
	padding-top:100px;
}

.slider { position: relative; max-width: 900px; margin: 0 auto; }

  .slider__viewport{
    overflow: auto hidden;
    /* WICHTIG: keine globale Smooth-Animation; JS steuert Smooth */
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    overscroll-behavior-x: contain;
  }
  .slider__track{ display:flex; }

  .slide{
    min-width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always; /* verhindert Zwischen-Snaps -> weniger Zappeln */
    user-select:none;
  }

  .card{ display:grid; grid-template-rows:auto 1fr; }
  .card img{ 
	  /*
	  display:block; 
	  width:100%; 
	  height:360px; 
	  object-fit:cover; 
	  pointer-events:none; 
	  */
		display: block;
		width: 84%;
		height: auto;
		pointer-events: none;
		margin-left: auto;
		margin-right: auto;
	}

  .card .info{ padding:12px 16px; }

  .slider__arrow{
    position:absolute; top:50%; translate:0 -50%;
    border:none; background:transparent;
    width:40px; height:40px; border-radius:999px;
  }
  
  .slider__arrow svg{ width:22px; height:22px; }

  .slider__dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
  .slider__dot{
    width:8px; height:8px; border-radius:999px;
    border:1px solid #000; background:transparent; padding:0; cursor:pointer;
  }
  .slider__dot[aria-current="true"]{ background:#000; }