@charset "utf-8";

@font-face { font-display: swap; font-family: 'Satoshi'; src: url('../webfonts/Satoshi-Variable.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roslindale'; font-style: normal; font-weight: 500; src: url('../webfonts/RoslindaleDisplay-Medium.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roslindale'; font-style: normal; font-weight: bold; src: url('../webfonts/RoslindaleDisplay-Bold.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roslindale'; font-style: normal; font-weight: 900; src: url('../webfonts/RoslindaleDisplay-Ultra.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('../webfonts/inter-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('../webfonts/inter-v19-latin-600.woff2') format('woff2'); }

html { 
	margin: 0px;
	min-height: 100%;
	overscroll-behavior: none; 
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

img {
	display: block;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

ul {
	padding-left: 1.5em;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Satoshi",sans-serif;
	font-size: 4vw;
	font-weight: 500;
	line-height: 1.3;
	background-color: white;
	color: black;
	height: 100%;
	overflow-x: hidden;
}	 

.show-on-desktop { display: none !important; }

.anchor { position: relative; top: -16vw; }

/**** HEADER ****/

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

.header .logo {
	position: absolute;
	display: inline-block;
	left: 4vw;
	top: 4vw;
}

.header .logo.compact {
	top: 6.075vw;
	opacity: 0;
}

.header .logo svg { width: 42vw; }
.header .logo.compact svg { width: 11vw; }

.header .logo.compact .subline {
	text-decoration: none; 
	position: absolute;
	left: 13vw;
	top: 0.1vw;
	font-size: 4vw;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.header.scroll .logo .letter { animation: fadeout 0.2s linear forwards; animation-delay: 0s; }
.header.scroll .logo .letter-g { animation: moveleft 0.7s ease-in-out forwards; position: relative; animation-delay: 0.2s;}
.header.scroll .logo.compact { animation: fadein 0.1s linear forwards;  animation-delay: 0.8s; }
.header.scroll .logo.full { animation: fadeout 0.2s linear forwards;  animation-delay: 0.8s; }

.header.scrollend .logo.compact { opacity: 1; }
.header.scrollend .logo .letter { opacity: 0; }

.header.scrollend .logo.full { animation: fadein 0.2s linear forwards;  animation-delay: 0s; }
.header.scrollend .logo.compact { animation: fadeout 0.3s linear forwards;  animation-delay: 0s; }
.header.scrollend .logo .letter-g { animation: moveright 0.5s ease-in-out forwards; position: relative; animation-delay: 0.1s;}
.header.scrollend .logo .letter { animation: fadein 0.2s linear forwards; animation-delay: 0.4s; }

@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes moveleft { from { transform: translate(0,0); } to { transform: translate(-67%,1.5%); } }
@keyframes moveright { from { transform: translate(-67%,1.5%); } to { transform: translate(0,0); } }


.header .backbutton {
	position: absolute;
	display: inline-block;
	right: 13.5vw;
	top: 4.7vw;
	width: 6vw;
	cursor: pointer;
}

.header .menuicon {
	position: absolute;
	display: inline-block;
	right: 4.3vw;
	top: 4.7vw;
	width: 6vw;
	cursor: pointer;
}

.header .slider-switch {
	position: absolute; 
	right: 14.5vw;
	top: 4vw;
	width: 24vw;
	height: 1.8em; 
	margin: 0;
}

.header .slider-switch .options a { font-size: 2.4vw; transition: none; }

.header .slider-switch.white { background-color: rgba(255,255,255,0.6); }
.header .slider-switch.white .slider { background: none; background-color: white; }
.header .slider-switch.white .options a.sel { color: #FF734C; background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.header .logo.white path, .header .logo.white rect, .header .logo.white polygon { fill: white; }
.header .logo.white .subline { color: white; }
.header .backbutton.white circle { fill: white; }
.header .backbutton.white path { fill: black; }
.header .menuicon.white path { stroke: white; }

/** Menu Close Animation **/
.header .menuicon path { transition: transform 0.5s; }
.header .menuicon .line-1 { transform-origin: 70% 42%; }
.header .menuicon .line-2 { transform-origin: 70% 58%; }
.header .menuicon.close .line-1 { transform: rotate(-45deg); }
.header .menuicon.close .line-2 { transform: rotate(45deg); }

/**** FOOTER ****/

.footer {
	position: relative;
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	color: white;
}

.footer .inner {
	position: relative;
	padding: 2.5vw;
	font-size: 3.5vw;
	font-weight: 400;
	line-height: 1.1;
	height: 100%;
}

.footer a { text-decoration: none; }

.footer h2 {
	font-family: "Roslindale",serif;
	font-weight: 500;
	font-size: 10vw;
	line-height: 1.1;
}	

.footer h3 {
	font-size: 6vw;
	margin-top: 1.4em;
	margin-bottom: 1.2em;
}

.footer .details {
	position: relative;
	opacity: 0.7;
	padding-left: 2.3em;
	margin-bottom: 1em
}	

.footer .details:before {
	position: absolute;
	left: 0;
	top: 0.1em;
	display: inline-block;
	width: 1em;
}

.footer .details p { margin: 0; }

.footer .mail:before { content: url(../img/icon-mail.svg); }
.footer .phone:before { content: url(../img/icon-phone.svg); }
.footer .address:before { content: url(../img/icon-address.svg); }

.footer .mapslink {
	font-size: 4vw;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	margin-top: 1.4em;
}

.footer .social-links {
	margin-top: -1em;
	margin-bottom: 2.3em;
}

.footer .social-links a {
	display: inline-block;
	vertical-align: top;
	width: 1.2em;
	background-color: white;
	padding: 0.8em;
	border-radius: 0.5em;
	margin-right: 0.8em;
}

.footer .social-links a svg { display: block; width: 100%; }

.footer .legal-links {
	font-size: 4vw;
	font-weight: 500;
	margin-top: 1.4em;
	margin-bottom: 1.5em;
}

.footer .legal-links a { display: inline-block; margin-right: 2em; margin-bottom: 0.8em; }

.footer .copyright {
	opacity: 0.7;
	margin-bottom: 1.5em;
}	

.footer a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/**** MENU ****/

.menu-container {
	box-sizing: border-box;
	position: fixed;
	z-index: 998;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: none;
}

.menu-container::-webkit-scrollbar { display: none; }

.menu-container .inner { 
	box-sizing: border-box;
	position: relative; 
	padding: 20vw 4vw 30vw 4vw;
	min-height: 100%;
}

.menu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.menu .entry { padding-bottom: 1em; }

.menu .entry a {
	position: relative;
	text-decoration: none;
	font-size: 9vw;
	font-weight: 500;
	transition: padding 0.5s;
}

.menu .entry.sel a { transition: none; }

.menu .entry a:hover, .menu .entry.sel a {
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent;
	padding-left: 0.5em;
}

.menu .entry a:hover:before, .menu .entry.sel a:before {
	content: "·";
	margin-right: 0.2em;
	margin-left: -0.5em;
}

.menu-container .kontaktinfo {
	position: absolute;
	bottom: 4vw;
	left: 4vw;
	color: #929394;
}

.menu-container .kontaktinfo a { text-decoration: none; }
.menu-container .kontaktinfo a:hover { color:black; }

.menu-container .kontaktinfo .details {
	position: relative;
	padding-left: 1.8em;
	margin-top: 0.1em
}

.menu-container .kontaktinfo .details:before {
	position: absolute;
	left: 0;
	top: 0.1em;
	display: inline-block;
	width: 1em;
}

.menu-container .kontaktinfo .mail:before { content: url(../img/icon-mail-grey.svg); }
.menu-container .kontaktinfo .phone:before { content: url(../img/icon-phone-grey.svg); }
.menu-container .kontaktinfo .address:before { content: url(../img/icon-address-grey.svg); }


/**** MAIN ****/

.main {
	position: relative;
}

.main .block { 
	position: relative;
	padding: 16vw 2.5vw 4vw 2.5vw; 
}

.main .block.letswork { padding-bottom: 2vw; }

.main .block.textpage {
	font-weight: 400;
}

.main .block .lighttext { 
	font-weight: 400;
	color: rgba(0,0,0,0.6);
}

.main .block.smallpadding { padding-top: 4vw; }
.main .block.nopadding { padding-top: 0 !important; padding-bottom: 0 !important; }

.main .scrollbg { background-color: #FFFFFF; transition: background 1s; }
.main .scrollbg.infocus { background-color: #F4F5F7; }

.main h1, .main h2.big { font-weight: 500; margin-top: 0.4em; margin-bottom: 0.7em; font-size: 10vw; line-height: 1.25; }
.main h2 { font-weight: 500; }
.startseite .main h1, .startseite .main h2 { margin: 0; font-weight: normal; }

.main a span { text-decoration: underline; 	text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }

.main .orangetext { 
	font-weight: inherit;
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.fathead {
	font-family: "Roslindale",serif;
	font-weight: bold;
	font-size: 9vw;
	line-height: 1.1;
	margin-top: 0.8em;
}

.bighead {
	font-weight: 400;
	font-size: 12vw;
	line-height: 1.05;
	margin-top: 0.8em;
}

.maintag {
	margin-top: 0.6em;
	margin-bottom: 2.5em;
	font-size: 6vw;
	max-width: 50vw;
}

.greytext { color: rgba(0,0,0,0.6); }

.button {
	box-sizing: border-box;
	display: inline-block;
	font-family: "Inter",sans-serif;
	font-weight: 600;
	font-size: 2.8vw;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	background-color: black;
	color: white !important;
	border-radius: 2em;
	text-align: center;
	min-width: 52vw;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	cursor: pointer;
}

.button .inner {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	transition: padding 0.5s;
	padding-left: 3.2em;
	padding-right: 0.2em;
	text-decoration: none;
}

.button .inner:before {
	content: url("../img/buttondot.svg");
	display:inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 1em;
	margin-left: -1.8em;
	position: relative;
	top: -0.1em;
	transition: opacity 0.5s;
}

.button .inner:after {
	content: url(../img/buttonpfeil.svg);
	display:inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 1em;
	opacity: 0;
	position: relative;
	top: 0.045em;
	transition: opacity 0.5s;
}

.button:hover {
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
}

.button:hover .inner {
	padding-left: 2em;
	padding-right: 1.4em;
}

.button:hover .inner:before { opacity: 0; }
.button:hover .inner:after { opacity: 1; }

.kontakt-button { margin-bottom: 2em; }

/**** SCROLLTEXT ****/

.scrolltext {
	position: relative;
	height: 4vw;
	overflow: hidden;
	font-size: 3.5vw;
	font-weight: normal;
	margin-bottom: 1.2em;
	margin-left: -2.5vw;
	margin-right: -2.5vw;
}

.scrolltext .inner { 
	position: relative;
	text-wrap: nowrap;
}

.scrolltext img { position: relative; display: inline-block; width: 2.5vw; top: -0.1em; }

.scrolltext.scroll .inner { animation: scrolltext-scroll 3s linear forwards infinite; }	
.scrolltext.scroll .pos1 { position: absolute; left: 0%; top: 0%; }
.scrolltext.scroll .pos2 { position: absolute; left: 40%; top: 0%; }
.scrolltext.scroll .pos3 { position: absolute; left: 80%; top: 0%; }
.scrolltext.scroll .pos4 { position: absolute; left: 120%; top: 0%; }
.scrolltext.scroll .pos1-extra { position: absolute; left: 20%; top: 0%; display: none; }
.scrolltext.scroll .pos2-extra { position: absolute; left: 60%; top: 0%; display: none; }
.scrolltext.scroll .pos3-extra { position: absolute; left: 100%; top: 0%; display: none; }
.scrolltext.scroll .pos4-extra { position: absolute; left: 140%; top: 0%; display: none; }
@keyframes scrolltext-scroll { from { transform: translateX(0%); } to { transform: translateX(-40%); } }

.scrolltext.party .inner { animation: scrolltext-party 5s linear forwards infinite; }	
.scrolltext.party .pos1 { position: absolute; left: 0%; top: 0%; }
.scrolltext.party .pos2 { position: absolute; left: 75%; top: 0%; }
.scrolltext.party .pos3 { position: absolute; left: 150%; top: 0%; }
.scrolltext.party .pos1-extra { position: absolute; left: 37.5%; top: 0%; display: none; }
.scrolltext.party .pos2-extra{ position: absolute; left: 112.5%; top: 0%; display: none; }
.scrolltext.party .pos3-extra { position: absolute; left: 187.5%; top: 0%; display: none; }
@keyframes scrolltext-party { from { transform: translateX(0%); } to { transform: translateX(-75%); } }


/**** VIDEO ****/

.video {
	display: block;
	position: relative; 
	transition: all 0.5s;
	text-decoration: none; 
	margin-bottom: 1vw;
	font-size: 0;
}

.video video, .video img.fallback { 
	width: 100%;
	border-radius: 4vw; 
	transition: all 0.5s;
}

.video.infocus { margin: -2.5vw; }
.video.infocus video, .video.infocus img { border-radius: 0vw; }

.video.zoom { overflow: hidden; }
.video.zoom video, .video.zoom img.fallback { overflow: hidden; transform: scale(800%) !important; }

.video .reelbutton { 
	position: absolute;
	top: calc(50% - 21vw);
	left: calc(50% - 21vw);
	width: 42vw;
}

.video .reelbutton.text { animation: rotate 15s linear forwards infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.video .bighead {
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 100%;
	font-family: "Roslindale",serif;
	font-weight: 900 !important;
	font-size: 15vw;
	text-align: center;
	color: white;
	margin: 0;
	transition: all 0.5s;
}

.video .bighead .orangetext { text-decoration: none; }

.video.infocus .bighead { font-size: 16vw; }

.video .button.kontakt {
	position: absolute;
	left: 2vw; 
	bottom: 10vw;
	width: calc(100% - 4vw); 
	background-color: white;
}

.video .button.kontakt .inner {
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.video .button.kontakt .inner:before {
	content: url(../img/buttondot-red.svg);
}

.video .button.kontakt:hover .inner { 
	color: white; 
	background: none;
	-webkit-text-fill-color: white; 
}

.video .overlay { 
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
}

.video .hero-head {
	position: absolute;
	top: 56vw;
	color: white;
	padding: 0vw 3.5vw 0vw 3.5vw; 
	font-size: 5vw;
}

.video .hero-head h1 {
	font-family: "Roslindale",serif;
	font-weight: 900 !important;
	font-size: 11vw;
	margin-top: 0;
	margin-bottom: 0.25em;
}

.video .hero-head p {
	margin-top: 0;
	max-width: 75vw;
}

/**** SLOGAN ****/

.slogan-container {
	position: relative;
	margin-top: 16vw;
	margin-bottom: 20vw;
	height: 148vw;
	/* overflow: hidden; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.slogan-container .line-art-1 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.slogan-container .line-art-2 { 
	position: absolute;
	left: 0;
	top: 38vw; 
	z-index: -1;
}

.slogan-container .slogan {
	padding: 8vw;
	text-align: center;
	font-weight: 500;
	font-size: 6.1vw;
}


/**** TEXT ANIMATIONS ****/

.textanim-shift .line { clip-path: polygon(0 0, 100% 0, 100% 105%, 0 105%); }

.textanim-typewriter .orangetext { 
	background-image: none;
	background-clip: inherit;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}


/**** INDEX FÜR CASES ETC. ****/

.index { 
	position: absolute;
	right: 0;
	top: 0.3em;
	font-size: 2.5vw;
	letter-spacing: 0.4em;
	color: rgba(0,0,0,0.6);
}

.index b { font-weight: inherit; color: black; }


/**** CASES ****/

.case {
	margin-top: 15vw;
	margin-bottom: 15vw;
}

.case .details {
	position: relative;
	font-size: 3.5vw;
	color: rgba(0,0,0,0.6);
	margin-bottom: 3.5vw;
}

.case .details .customer { 
	position: absolute;
	right: 25vw;
	top: 0;
	display: inline-block;
	margin: 0;
	font-size: inherit;
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.case .video { cursor: pointer; }

.case .video .wide { display: none; }

.case .video .fact { 
	position: absolute;
	left: 0;
	bottom: 0.5em;
	width: 100%;
	font-family: "Roslindale",serif;
	font-weight: 900;
	font-size: 8vw;
	line-height: 1.1;
	text-align: center;
	color: white;
	transition: transform 0.5s;
}

.case .video.infocus .fact { transform: scale(105%); }

.case .abstract {
	margin-top: 3vw;
	font-size: 5vw; 
}

.case .abstract p { margin: 0; }

/**** CATEGORIES ****/

.category {
	margin-top: 15vw;
	margin-bottom: 15vw;
}

.category .details {
	position: relative;
	color: rgba(0,0,0,0.6);
	margin-top: 3.5vw;
}

.category .details .name { 
	display: inline-block;
	margin: 0;
	font-family: "Roslindale",serif;
	font-size: 8vw;
	font-weight: bold;
	color: #FF734C; 
}

.category .details .name .inner { 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.category .details .name:before { 
	content: url("../img/catpfeil.svg");
	display:inline-block;
	width: 0.55em;
	height: 0.55em;
	position: relative;
	top: -0.1em;
	margin-right: 0.4em;
}

.category .details .subcat { 
	position: absolute;
	right: 0;
	top: 0.5em;
	display: inline-block;
	font-size: 3vw;
	width: 50vw;
	text-align: right;
}

/**** GRID / SLIDER ****/

.grid-container {
	font-size: 0;
	margin-top: -2.5vw;
	margin-left: -2.5vw;
	margin-right: -2.5vw;
	padding-left: 2.5vw;
}

.grid-container .slide {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 2.5vw;
	margin-top: 2.5vw;
	width: calc(50% - 2.5vw);
}

.grid-container .slide.wide { width: calc(100% - 2.5vw); }

.slide-container {
	font-size: 0;
	white-space: nowrap;
	overflow-x: scroll;
	margin-left: -2.5vw;
	margin-right: -2.5vw;
	padding-left: 2.5vw;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slide-container::-webkit-scrollbar { display: none; }

.slide-container .slide {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 2.5vw;
	width: 65vw;
}

.slide video {
	width: 100%;
	border-radius: 4vw;
}

.slide img.fallback { width: 100%; }

.slide .overlay { 
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	border-radius: 4vw;
}

.slide .text { 
	white-space: normal;
	position: absolute;
	padding-left: 0.8em;
	padding-right: 0.8em;
	bottom: 1em;
	text-align: left;
	color: white;
	transition: transform 0.5s;
	font-size: 4vw;
}

.slide .text h3 {
	margin: 0;
	font-family: "Roslindale",serif;
	font-weight: 600;
	font-size: 8vw;
	line-height: 1.1;
}

.slide .text p { 
	margin-top: 0.5em;
	margin-bottom: 0;
}

/**** CASE FILTER ****/

.casefilter {
	margin-bottom: -2em; 
	font-size: 3.5vw;
}

.casefilter .headline {
	font-weight: 600;
	margin-top: 1em;
	margin-bottom: 1em;
	text-decoration: none;
} 

.casefilter .headline img {
	display: inline;
	width: 0.9em;
	margin-right: 0.5em;
}

.casefilter-body { display: none; }

.casefilter .subheadline {
	margin-top: 1em;
	margin-bottom: 1em;
} 

.kat-icon {
	box-sizing: border-box;
	display: inline-block;
	font-family: "Inter",sans-serif;
	font-weight: 400;
	font-size: 2.8vw;
	line-height: 1.5;
	text-decoration: none;
	background-color: #F4F5F7;
	border-radius: 2em;
	text-align: center;
	min-width: 20vw;
	padding: 0.4em 0.8em;
	margin-right: 0.2em;
	margin-bottom: 0.5em;
}

.casefilter .kat-icon { cursor: pointer; }

.kat-icon.sel {
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	color: white;
}

.casefilter .subkategorien {
	display: none;
}

/**** CASE DETAILS ****/

.block.case-details { padding-top: 0 !important; }

.block.case-details .smallfacts {
	margin-top: -2em;
	margin-bottom: 2em;
	font-size: 3.3vw;
	color: rgba(0,0,0,0.6);
}

.block.case-details h2 {
	font-size: 3.5vw;
	margin-top: 2em;
	font-weight: 700;
}

.block.case-details .headline-subtext h2:first-child { margin-top: 0; }

.block.case-details .ergebnis {
	font-family: "Roslindale",serif;
	font-weight: 900;
	font-size: 8vw;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	line-height: 1.1;
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.case-fact {
	position: relative;
	margin-top: 3em;
}

.case-fact h3 {
	font-size: inherit; 
	font-weight: 500;
	padding-right: 30vw;
}

.case-fact .text {
	font-size: 3.5vw;
	color: rgba(0,0,0,0.6);
}

.case-fact .slide .text { color: white; }

/**** ZITAT ****/

.zitat {
	margin-top: 1.5em;
	font-size: 6vw;
}

.zitat .quelle {
	position: relative;
	padding-left: 14vw;
	font-size: 4vw;
}

.zitat .quelle .firma {
	font-size: 3.5vw;
	color: rgba(0,0,0,0.6);
}

.zitat .quelle .image {
	position: absolute;
	left: 0;
	top: 0;
	width: 10.5vw;
}

.zitat .quelle .image img { width: 100%; border-radius: 50%; }

/**** KATEGORIE DETAILS ****/

.block.kategorie-details { padding-top: 0 !important; }

.block.kategorie-details .scrolltext { color: white; margin-top: -3.5em; margin-bottom: 3.5em; }

.block.kategorie-details .introtext { color: rgba(0,0,0,0.6); margin-top: 5em; margin-bottom: 3em; }

/**** QUICKLINKS ****/

.quicklinks .entry {
	display: block;
	text-decoration: none;
	position: relative;
	background-color: #F4F5F7;
	font-size: 5vw;
	padding: 0.8em;
	border-radius: 0.8em;
	margin-bottom: 0.5em;
	padding-right: 30vw;
}

.quicklinks .entry:hover { background-color: #EDEEF0; }

.quicklinks .entry.sel { 
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	color: white;
}

.quicklinks .entry .index { text-decoration: none; top: 2.3em; right: 1.5em; }
.quicklinks .entry.sel .index { color: white; }
.quicklinks .entry.sel .index b { color: white; }

/**** SUBKATEGORIEN ****/

.subkategorie {
	margin-top: 5em;
	margin-bottom: 2em;
}

.subkategorie .headline { position: relative; }
.subkategorie .headline .index { top: 1.3em; }

.subkategorie .headline h2 { 
	font-size: 8vw;
	padding-right: 30vw;
}

.subkategorie .zitat { margin-bottom: 1.5em; }

.subkategorie .slide .text h3 { font-weight: 900; font-size: 6vw; }

.subkategorie .content-case {
	background-color: #F4F5F7;
	border-radius: 1em;
}

.subkategorie .content-case:hover { background-color: #EDEEF0; }

.subkategorie .content-case .headline { 
	display: block; 
	padding: 1em; 
	cursor: pointer; 
}

.subkategorie .content-case .case { margin: 0; padding: 0.5em 1em 1em 1em; }
.subkategorie .content-case .case .video .fact { font-size: 7vw; }

/**** ACCORDION ****/

.accordion-head {
	background-image: url(../img/icon-expand.svg);
	background-repeat: no-repeat;
	background-position: center right 1em;
	background-size: 0.7em;
	cursor: pointer;
}

.accordion-head.sel { background-image: url(../img/icon-collapse.svg); }

.accordion-body { display: none; }

/**** KATEGORIE-KONTAKT ****/

.kategorie-kontakt {
	position: relative;
}

.kategorie-kontakt .image img { width: 100%; }

.kategorie-kontakt .text {
	position: absolute;
	left: 0;
	bottom: 0;
	color: white;
	padding: 7vw 2.5vw;
}

.kategorie-kontakt .text h3 {
	font-family: "Roslindale",serif;
	font-weight: 900;
	font-size: 10vw;
	line-height: 1;
	margin: 0;
}

.kategorie-kontakt .text p {
	margin-top: 0.5em;
}

.kategorie-kontakt .text .button {
	width: 100%;
	background-color: white;
	color: black !important;
	margin-top: 0.7em;
	text-transform: none;
}

.kategorie-kontakt .text .button .icon {
	display: inline-block;
	vertical-align: middle;
	width: 1.4em;
	margin-right: 0.8em;
}

/**** ERRORPAGE ****/

.errorpage .hero {
	font-family: "Roslindale",serif;
	font-weight: 700;
	font-size: 32vw;
	text-align: center;
	color: #ffcbc8;
	padding-top: 0.3em;
	margin-bottom: 0.3em;
}

.errorpage .bigtext {
	text-align: center;
	font-size: 10vw;
	line-height: 1.25;
}

.errorpage .zurueck {
	text-align: center;
	margin-top: 4em;
	margin-bottom: 4em;
}

.errorpage .zurueck .button { 
	padding-left: 1.5em;
	padding-right: 1.5em;
	min-width: 0 !important; 
}

.errorpage .zurueck .button .icon {
	display: inline-block;
	vertical-align: middle;
	width: 1.7em;
	margin-right: 0.5em;
}

/**** SLIDER SWITCH ****/

.slider-switch {
	position: relative;
	background-color: #F4F5F7;
	height: 3em;
	border-radius: 1.5em;
	margin-top: 4em;
	margin-bottom: 1em;
}

.slider-switch .slider {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 50%;
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	border-radius: 1.5em;
	transition: left 0.4s ease-in-out;
}

.slider-switch .options {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	font-size: 0;
}

.slider-switch .options a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 100%;
	font-size: 4vw;
	font-weight: 700;
	color: rgba(0,0,0,0.4);
	cursor: pointer;
	transition: color 0.4s ease-in-out;
}

.slider-switch .options a.sel { color: white; }


/**** KONTAKT ****/

.kontakt label {
	display: block;
	font-size: 5vw; 
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.kontakt input[type=text], .kontakt textarea {
	box-sizing: border-box;
	background-color: #F4F5F7;
	font-family: "Satoshi",sans-serif;
	font-size: 4vw;
	font-weight: 500;
	line-height: 1.3;
	-webkit-appearance: none;
	border: none;
	width: 100%;
	padding: 0.8em;
	border-radius: 0.5em;
}

.kontakt textarea {
	height: 9em;
	resize: none; 
}

.kontakt .legal {
	position: relative;
	font-size: 2.8vw;
	color: rgba(0,0,0,0.6);
	padding-left: 2.5em;
	margin-bottom: 2.5em;
}

.kontakt .legal input[type=checkbox] {
	position: absolute;
	left: 0.5em;
	top: calc(50% - 0.8em);
	transform: scale(1.8);
}

.kontaktpersonen {
	margin-top: 2em;
	margin-bottom: 1.5em;
}

.kontaktperson {
	background-color: #F4F5F7;
	border-radius: 1em;
	margin-top: 0.7em;
}

.kontaktperson .headline { 
	position: relative;
	display: block; 
	padding: 1em; 
	cursor: pointer; 
	padding-left: 4.5em;
	padding-right: 50px;
}

.kontaktperson .headline .funktion { 
	font-size: 0.8em;
	color: rgba(0,0,0,0.6);
}

.kontaktperson .headline .image { 
	position: absolute;
	left: 1em;
	top: 0.9em;
	width: 2.5em;
}

.kontaktperson .headline .image img { 
	border-radius: 50%;
}

.kontaktperson .body .details {
	padding: 0 1em 1em 4.5em;
	color: #929394;
}

.kontaktperson .body .details .telefon { 
	background-image: url(../img/icon-phone-grey.svg);
	background-size: 0.8em;
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 1.5em;
	margin-bottom: 0.3em;
}

.kontaktperson .body .details .email { 
	background-image: url(../img/icon-mail-grey.svg);
	background-size: 0.8em;
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 1.5em;
}

.kontaktperson .body .details a { text-decoration: none; }

.kontaktinfo { color: rgba(0,0,0,0.6); }

.kontaktinfo h3 { margin-bottom: 0.5em; color: black; }
.kontaktinfo p { margin-top: 0; }
.kontaktinfo a { text-decoration: none; }

.kontaktinfo .social-links {
	margin-bottom: 2.3em;
}

.kontaktinfo .social-links a {
	display: inline-block;
	vertical-align: top;
	width: 1.2em;
	margin-right: 0.8em;
}

.kontaktinfo .social-links a svg { display: block; width: 100%; }

.kontaktinfo .social-links path { fill: rgba(0,0,0,0.6); }

.kontakt-map { 
	display: block; 
	margin-left: -2.5vw; 
	margin-right: -2.5vw; 
	margin-bottom: -4vw; 
}

/**** AGENTUR ****/

.block.agentur { padding-top: 0 !important; }
.block.agentur .headline-container { margin-bottom: 6vw; }
.block.agentur h1 p { margin-bottom: 0; }

.facts .entry { 
	position: relative;
	padding-left: 35%;
	margin-bottom: 2em;
}

.facts .entry .wert {
	position: absolute;
	left: 0;
	font-family: "Roslindale",serif;
	font-size: 9vw;
	line-height: 1.1;
	font-weight: 900;
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.facts .entry h3 { margin-bottom: 0.5em; }
.facts .entry p { margin-top: 0.5em; }
.facts-text { margin-bottom: 2em; }
.facts-text.small { font-size: 0.85em; color: rgba(0,0,0,0.6); }

.zitate-container { width: 100%; overflow: hidden; }

.zitate .entry {
	position: relative;
	margin-bottom: 3em;
}


.zitate .entry h3 {
	font-size: 1.7em;
	font-weight: 500;
	color: #FF734C; 
	background-image: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
	background-clip: text; 	
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	margin-bottom: 0.8em;
}

.zitate .entry .index { top: 1.7em; }

.zitate .entry .text { font-size: 1.3em; }

.zitate .entry .quelle {
	position: relative;
	padding-left: 14vw;
	font-size: 4vw;
}

.zitate .entry .quelle .firma {
	font-size: 3.5vw;
	color: rgba(0,0,0,0.6);
}

.zitate .entry .quelle .image {
	position: absolute;
	left: 0;
	top: 0;
	width: 10.5vw;
}

.zitate .entry .quelle .image img { width: 100%; border-radius: 50%; }

.zitate-scrollbuttons {
	margin-top: -0.5em;
}

.scrollbutton { 
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d9d9d9;
	margin-right: 2px;
}

.scrollbutton.sel { background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); }

/**** VIDEOPLAYER ****/

.videoplayer {
	display: none;
}

.videoplayer .inner {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0,0,0,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
}

.videoplayer video { display: block; width: 100%; height: 100%; object-fit: contain; }

.videoplayer .video-close {
	position: absolute;
	display: inline-block;
	right: 4.3vw;
	top: 4.7vw;
	width: 6vw;
	cursor: pointer;
}	

.videoplayer .video-close .line-1 { transform-origin: 70% 42%; transform: rotate(-45deg); }
.videoplayer .video-close .line-2 { transform-origin: 70% 58%; transform: rotate(45deg); }


/**** JOBS ****/

.jobs .block h1 { margin-bottom: 0.7em !important; }
.jobs .block h1 p { margin: 0 !important; }

.jobs .bigimage img { width: 100%; border-radius: 4vw; }

.jobs .initiativbewerbung { margin-top: 2em; margin-bottom: 4em; }

.jobs .lighttext { font-size: 0.9em;  }

.job-entry {
	background-color: #F4F5F7; 
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 1em;
	color: rgba(0,0,0,0.6);
}

.job-entry h3 {
	font-weight: 500;
	color: black;
	margin: 0;
}

.job-entry .datum {
	font-size: 0.7em;
}

.job-entry .tags {
	margin-top: 0.5em;
	margin-bottom: 1.2em;
}

.job-entry .tags .entry {
	display: inline-block;
	background-color: white;
	font-size: 0.8em;
	padding: 0.3em 1em;
	border-radius: 1em;
	margin-bottom: 0.3em;
}

.job-entry .button {
	min-width: 10em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
}

.job-details p, .job-details li { max-width: 760px; }
.job-details h2 { margin-top: 1.2em; }
.job-details li { margin-bottom: 0.2em; }

.job-details .job-facts .entry { position: relative; padding-left: 33vw; margin-bottom: 1.5em; }
.job-details .job-facts .entry .icon { position: absolute; left: 0.7em; top: 0.1em; width: 6vw; }

.job-details .job-facts .entry h3 { color: black; margin-bottom: 0.2em; font-size: inherit; }
.job-details .job-facts .entry p { margin-top: 0; }

/**** SCROLLFOOTER ****/

.scrollfooter {
	position: relative;
	background-color: white;
}

.scrollfooter .inner {
	position: relative;
	padding: 4vw 2.5vw;
	font-weight: 400;
}

.scrollfooter .keepscrolling {
	text-transform: uppercase;
}

.scrollfooter .nextpage {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 2em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

.scrollfooter .nextinfo {
	margin-bottom: 0.5em;
}

.scrollfooter .progress-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2.5vw;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
}

.scrollfooter .progress-bar .progress {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #FF3344 0%, #FF924F 100%); 
}

.scrollfooter a { text-decoration: none; }

/**** DESKTOP VERSION ****/

@media only screen and (min-width: 800px) {	
	body { font-size: 24px; }
	.show-on-desktop { display: block !important; }
	.hide-on-desktop { display: none !important; }
	.dragscroll { cursor: grab; }
	.header .logo { left: 35px; top: 40px; }
	.header .logo svg { width: 210px; }
	.header .logo.compact { top: 50px; }
	.header .logo.compact svg { width: 55px; }
	.header .logo.compact .subline { left: 65px; top: -2px; font-size: 24px; }
	.header .backbutton { right: 95px; top: 38px; width: 42px; }
	.header .menuicon { right: 35px; top: 38px; width: 42px; }
	.header .slider-switch { right: 100px; top: 38px; width: 136px; height: 40px; }
	.header .slider-switch .options a { font-size: 14px; }
	.footer .inner { font-size: 12px; height: 220px; padding: 25px;  }
	.footer h2 { position: absolute; left: 30px; top: 30px; font-size: 40px; width: 200px; margin: 0; }
	.footer-kontakt { position: absolute; left: 300px; top: 30px; }
	.footer-social { position: absolute; left: 550px; top: 110px; }
	.footer h3 { font-size: 18px; margin-top: 0; margin-bottom: 12px; }
	.footer .details { margin-bottom: 10px; }
	.footer .mapslink { font-size: 12px; opacity: 0.7; margin: 0; }
	.footer .social-links { padding-top: 10px; }
	.footer .social-links a { background: none; padding: 0; border-radius: none; margin-right: 1.5em; width: 18px; }
	.footer .social-links path { fill: white; }
	.footer .copyright { position: absolute; left: 30px; bottom: 30px; margin: 0; line-height: 1.7; }
	.footer .legal-links { position: absolute; right: 30px; bottom: 30px; font-size: 12px; opacity: 0.7; font-weight: inherit; line-height: 1.7; margin: 0; width: 150px; text-align: right; }
	.footer .legal-links a { margin: 0; }
	.menu-container .inner { padding: 150px 35px 220px 35px; }
	.menu .entry { padding-bottom: 15px;  }
	.menu .entry a { font-size: 50px; }
	.menu-container .kontaktinfo { left: 35px; bottom: 35px; border-top: 1px solid #D4D5D6; padding-top: 30px; width: calc(100% - 70px); }
	.main .block { padding: 140px 30px 35px 30px; } 
	.main .block.smallpadding { padding-top: 40px; }
	.fathead { font-size: 72px; margin-top: 0.2em; }
	.bighead { font-size: 54px; }
	.button { font-size: 14px; min-width: 300px; }
	.kontakt-button { margin-bottom: 18px; }
	.headline-container { position: relative; margin-bottom: 30px; }
	.main h1, .main h2.big { font-size: 54px; }
	.main h2.centered { text-align: center; }
	.headline-container h1 { padding-right: 380px; margin-top: 0; }
	.headline-container h1 p { margin: 0; }
	.headline-container h2 { padding-right: 380px; }
	.headline-subtext { position: absolute; right: 0px; bottom: -12px; font-size: 16px; width: 360px; }
	.startseite .main h2 { font-weight: 500; }
	.maintag { font-size: 24px; max-width: none; }
	.scrolltext { height: 20px; font-size: 16px; margin-left: -30px; margin-right: -30px; }
	.scrolltext img { width: 12px; }
	.video { margin-bottom: 0px; overflow: hidden; border-radius: 20px; } 
	.video video, .video img.fallback { border-radius: 20px; } 
	.video.infocus { margin: 0;  }
	.video.scrollfocus video, .video.scrollfocus img.fallback { transform: scale(0.95); } 
	.video.infocus video, .video.infocus img.fallback { border-radius: 20px; transform: scale(1); }
	.video.full { margin: 0px -30px 0px -30px !important; }
	a.video:hover video, a.video:hover img.fallback { transform: scale(120%); }
	.video.full, .video.full video, .video.full img { border-radius: 0 !important; }
	.video .reelbutton { width: 18vw; position: fixed; left: -10000px; display: none; margin-left: -9vw; margin-top: -9vw; }
	.video.reel:hover { cursor: none; }
	.video.reel:hover .reelbutton { cursor: none; display: block; pointer-events: none; }
	.letswork .video { cursor: none; }
	.letswork .video .bighead { font-size: 6.2vw; top: 0.3em; width: 50vw; left: calc(50% - 25vw); }
	.video .kontakt-icon { display: none; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(10px); border-radius: 50%; width: 8vw; height: 8vw; margin-left: -4vw; margin-top: -4vw; position: fixed; z-index: 99; left: -10000px; font-size: 1.15vw; text-align: center; color: white; text-decoration: none; }
	.video .kontakt-icon .inner { display: flex; justify-content: center; align-items: center;  width: 100%; height: 100%; }
	.video:hover .kontakt-icon { cursor: none; display: block; pointer-events: none; }
	.slogan-container { margin-top: 0px; margin-bottom: 30px; height: 64vw; }
	.slogan-container .slogan { padding: 16vw; font-size: 4vw; }
	.slogan-container .line-art-2 { width: 40%; top: 5vw; left: auto; right: 0; }
	.case-container { font-size: 0; margin-right: -30px; }
	.index { font-size: 13px; top: 0.1em; letter-spacing: 0.3em; }
	.case { display: inline-block; vertical-align: top; width: calc(50% - 30px); margin-top: 15px; margin-bottom: 15px; margin-right: 30px; }
	.case.wide { width: calc(100% - 30px); }
	.case.wide .video .normal { display: none; }
	.case.wide .video .wide { display: block; }
	.case .details { font-size: 16px; margin-bottom: 15px; }
	.case .details .customer { right: 118px; }
	.case .video .fact { font-size: 3.5vw !important; }
	.case .video.infocus .fact { transform: none; }
	.case .abstract { margin-top: 15px; font-size: 20px; }
	.case .abstract p:before { content: ""; transition: all 0.5s; opacity: 0; display:inline-block; position: relative;   margin-left: -0.95em; width: 0.55em; margin-right: 0.4em;  }
	.case:hover .abstract p:before { content: url("../img/pfeil.svg"); height: 0.55em; top: -0.1em; opacity: 1; margin-left: 0; }
	.alle-ergebnisse { text-align: center; margin-top: 20px; }
	.category-container { font-size: 0; margin-right: -30px; }
	.category { display: inline-block; vertical-align: top; width: calc(50% - 30px); margin-top: 15px; margin-bottom: 15px; margin-right: 30px; }
	.category .details { margin-top: 0; padding-top: 24px;}
	.category .details .name { font-size: 4vw; perspective: 500px; -webkit-perspective: 500px; }
	.category .details .name:before { content: ""; width: 0; margin-right: 0; }
	.category .details .name .inner { display: inline-block; position: relative; transition: transform 0.5s; }
	.category:hover .details .name .inner { transform: rotateX(360deg); }
	.category .details .name .inner:before { content: ""; display:inline-block; width: 0.55em; margin-left: -0.95em; margin-right: 0.4em; transition: all 0.5s; opacity: 0;}
	.category:hover .details .name .inner:before { content: url("../img/catpfeil.svg"); margin-left: 0; position: relative; top: -0.1em; opacity: 1;  }
	.category .details .subcat { font-size: 12px; left: 0; text-align: left; width: auto; }
	.slide.scrollfocus video, .slide.scrollfocus img.fallback, .slide.scrollfocus .overlay { transform: scale(0.95); transition: all 0.5s; } 
	.slide.infocus video, .slide.infocus img.fallback, .slide.infocus .overlay { transform: scale(1); }
	.slide { overflow: hidden; border-radius: 20px; }
	.slide .overlay { border-radius: 20px; }
	.slide video, .slide img.fallback { border-radius: 20px; transition: all 0.5s; }
	a.slide:hover video, a.slide:hover img.fallback, a.slide:hover .overlay { transform: scale(120%); }
	.slide .text { font-size: 16px; padding-left: 20px; padding-right: 20px; bottom: 20px; }
	.slide .text h3 { font-size: 4vw; }
	.casefilter { margin-top: 60px;  margin-bottom: 20px; font-size: 16px; }
	.kat-icon { font-size: 16px; min-width: 120px; }
	.case-details .headline-container { margin-top: 30px; font-size: 0; }
	.case-details .headline-container .headline { display: inline-block; vertical-align: top; width: 60%; }
	.case-details .headline-container .headline h1 { line-height: 1.2; padding-right: 50px; }
	.case-details .headline-container .headline .smallfacts { margin-top: -0.8em; font-size: 16px; }
	.case-details .headline-container .headline-subtext { position: relative; display: inline-block; vertical-align: top; width: 40%; }
	.case-details .headline-container .headline-subtext p { margin-top: 0; }
	.case-details .headline-container .headline-subtext h2 { font-size: 16px; margin-top: 1em; margin-bottom: 0.5em; padding-right: 0 }
	.case-details .headline-container .headline-subtext .ergebnis { font-size: 26px; }
	.case-details .headline-container .headline-subtext .kat-icon { font-size: 12px; min-width: 40px; padding: 0.2em 0.8em; }
	.case-fact .text { font-size: 16px; max-width: 400px; }
	.slide-container .slide { width: 40vw; }
	.grid-container .slide.wide { width: calc(50% - 2.5vw); }
	.zitat { font-size: 24px; max-width: 760px; margin: auto; margin-top: 70px; margin-bottom: 70px; text-align: center; }
	.zitat .details { display: inline-block; }
	.zitat .quelle { font-size: 16px; padding-left: 55px; text-align: left; }
	.zitat .quelle .firma { font-size: 14px; }
	.zitat .quelle .image { width: 42px; }
	.video .hero-head { top: 18vw; font-size: 16px; padding-left: 65px; }
	.video .hero-head h1 { font-size: 60px; }
	.video .hero-head p { max-width: 350px; }
	.block.kategorie-details .scrolltext { margin-top: -35px; margin-bottom: 35px; }
	.block.kategorie-details .introtext {color: black; font-size: 16px; max-width: 500px; }
	.quicklinks .entry { font-size: 24px; border-radius: 14px; }
	.quicklinks .entry .index { top: 2.1em; }
	.quicklinks .entry .name:before { content: ""; display:inline-block; transition: all 0.5s; opacity: 0; margin-right: 0.4em; width: 0.55em; margin-left: -0.95em; }
	.quicklinks .entry:hover .name:before { content: url("../img/pfeil.svg"); height: 0.55em; position: relative; top: -0.1em; opacity: 1; margin-left: 0; }
	.subkategorie { margin-top: 80px; }
	.subkategorie .headline h2 { font-size: 36px; }
	.subkategorie .slide .text h3 { font-size: 40px; }
	.subkategorie .content-case .case { width: calc(100% - 50px); }
	.kategorie-kontakt { padding: 0px 30px 80px 30px; } 
	.kategorie-kontakt .image video, .kategorie-kontakt .image img { border-radius: 20px; } 
	.kategorie-kontakt .text { padding: 0; width: 460px; left: calc(50% - 230px); bottom: 100px; font-size: 16px; }
	.kategorie-kontakt .text h3 { font-size: 30px; }
	.kategorie-kontakt .text .button { padding-top: 0.8em;  padding-bottom: 0.8em; margin-top: 0.5em; }
	.kontakt .headline-container { margin-top: 30px; font-size: 0; }
	.kontakt .headline-container .headline-block { display: inline-block; vertical-align: top; width: 52%; font-size: 16px; }
	.kontakt .headline-container .headline-block h1 { line-height: 1.2; padding-right: 50px; max-width: 550px; }
	.kontakt .headline-container .headline-block .zusatzinfo { margin-top: -1em; max-width:400px; }
	.kontakt .headline-container .kontaktpersonen { display: inline-block; vertical-align: top; width: 48%; font-size: 16px; margin: 0; }
	.kontaktinfo { margin-top: 50px; margin-bottom: 30px;  font-size: 16px; }
	.kontaktinfo h3 { font-size: 24px; }
	.kontaktinfo .infoblock { display: inline-block; vertical-align: top; width: 250px; }
	.kontaktinfo .social-links a { width: 24px; }
	.kontakt-map { padding: 0px 30px 80px 30px; margin: 0px -30px 0px -30px !important; }
	.kontakt-map .inner { overflow: hidden; border-radius: 20px; }
	.kontakt-map img { border-radius: 20px; transition: all 0.5s; } 
	.kontakt-map:hover img { transform: scale(120%); }
	.main .block.textpage { padding-bottom: 150px; font-size: 20px; }
	.main .block.textpage h1 { font-size: 54px; margin-bottom: 1.5em; }
	.main .block.textpage p, .textpage li, .textpage h2, .textpage h3 { max-width: 1000px; }
	.block.agentur .headline-container { margin-top: 30px; margin-bottom: 50px; }
	.block.agentur .headline-container .headline-subtext { position: relative; width: auto; max-width: 460px; margin-top: -1.5em; }
	.facts { font-size: 0; max-width: 1200px; margin: auto; margin-top: 50px; margin-bottom: 50px;  text-align: center; }
	.facts .entry { font-size: 16px; color: rgba(0,0,0,0.6); padding: 0px 15px; display: inline-block; vertical-align: top; width: calc(33.33% - 30px);}
	.zitate .entry .head { position: relative; }
	.facts .entry .wert { position: relative; font-size: 50px; }
	.facts .entry h3 { color: black; font-size: 1.5em; margin-top:@import("style.css"); 0.4em; margin-bottom: 0.1em; }
	.facts .entry p { margin-top: 0; }
	.facts-text { max-width: 550px; }
	.zitate { font-size: 0; margin-right: -60px; white-space: nowrap; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; }
	.zitate::-webkit-scrollbar { display: none; }
	.zitate .entry { font-size: 14px; margin-right: 60px; display: inline-block; vertical-align: top; width: calc(33.33% - 60px); white-space: normal; }
	.zitate .entry:last-child { padding-right: 0; }
	.zitate .entry .index { top: 30px; }
	.zitate .entry .quelle { font-size: 16px; padding-left: 55px; text-align: left; }
	.zitate .entry .quelle .firma { font-size: 14px; }
	.zitate .entry .quelle .image { width: 42px; }
	.videoplayer .video-close { right: 35px; top: 38px; width: 42px; }
	.jobs .bigimage img { border-radius: 20px; }
	.jobs .initiativbewerbung { text-align: center; margin-top: -1em; margin-bottom: 3em; }
	.job-details .job-facts { font-size: 0; margin-right: -15px; margin-bottom: -20px; }
	.job-details .job-facts .entry { display: inline-block; vertical-align: top; width: calc(25% - 15px); margin-right: 15px; padding: 0; font-size: 18px; }
	.job-details .job-facts .entry .icon { position: relative; left: 0; top: 0; }
	.job-details .job-facts .entry .icon img { width: 35px; }
	.scrollfooter .inner { font-size: 18px;  padding: 25px;  }
	.scrollfooter .progress-bar { height: 12px; }
	.errorpage { text-align: center; }
	.errorpage .hero { font-size: 256px; }
	.errorpage .bigtext { font-size: 80px; margin-bottom: 80px;}
	.errorpage .bigtext p { max-width: 700px; margin: auto;  }
	.errorpage .case .details { text-align: left; }
}


/**** BIG SCREEN ****/

@media only screen and (min-width: 1000px) {	
	.scrolltext.party .pos1-extra, .scrolltext.party .pos2-extra, .scrolltext.party .pos3-extra { display: block; }
	.scrolltext.scroll .pos1-extra, .scrolltext.scroll .pos2-extra, .scrolltext.scroll .pos3-extra,  .scrolltext.scroll .pos4-extra { display: block; }
	.zitate .entry .index { top: 10px; }
	.job-details .job-facts { margin-right: -30px; }
	.job-details .job-facts .entry { font-size: 20px; margin-right: 30px; width: calc(25% - 30px); }
}

@media only screen and (min-width: 1200px) {
	.kontakt .headline-container .headline-block { width: calc(100% - 600px); }
	.kontakt .headline-container .kontaktpersonen { width: 600px; }
}

@media only screen and (min-width: 1750px) {
	.content { width: 1750px; margin: auto; position: relative; /* overflow: hidden; */ }
	/* .content:before { content: ""; position: absolute; z-index: 99; left: 0; top: 0; height: 100%; width: 30px; background: linear-gradient(to right, white 0%, rgba(255,255,255,0.738) 19%, rgba(255,255,255,0.541) 34%, rgba(255,255,255,0.382) 47%, rgba(255,255,255,0.278) 56.5%, rgba(255,255,255,0.194) 65%, rgba(255,255,255,0.126) 73%, rgba(255,255,255,0.075) 80.2%, rgba(255,255,255,0.042) 86.1%, rgba(255,255,255,0.021) 91%, rgba(255,255,255,0.008) 95.2%, rgba(255,255,255,0.002) 98.2%, transparent 100%); }
	.content:after { content: ""; position: absolute; z-index: 99; right: 0; top: 0; height: 100%; width: 30px; background: linear-gradient(to left, white 0%, rgba(255,255,255,0.738) 19%, rgba(255,255,255,0.541) 34%, rgba(255,255,255,0.382) 47%, rgba(255,255,255,0.278) 56.5%, rgba(255,255,255,0.194) 65%, rgba(255,255,255,0.126) 73%, rgba(255,255,255,0.075) 80.2%, rgba(255,255,255,0.042) 86.1%, rgba(255,255,255,0.021) 91%, rgba(255,255,255,0.008) 95.2%, rgba(255,255,255,0.002) 98.2%, transparent 100%); } */
	.scrollbg .content:before, .scrollbg .content:after { background: none; }
	.header .inner { width: 1750px; margin: auto; position: relative; }
	.footer .inner { width: 1750px; margin: auto; position: relative; padding-left: 0; padding-right: 0; }
	.menu-container .inner { width: 1750px; margin: auto; }
	.video .reelbutton { width: 315px; margin-left: -158px; margin-top: -158px; }
	.letswork .video .bighead { font-size: 108px; width: 875px; left: calc(50% - 438px); }
	.video .kontakt-icon { width: 140px; height: 140px; margin-left: -70px; margin-top: -70px; font-size: 20px; }
	/* .slogan-container { height: 1120px; } */
	.slogan-container .slogan { padding: 280px; font-size: 70px; max-width: 1100px; }
	.slogan-container .line-art-2 { top: 88px; }
	.category .details .name { font-size: 70px; }
	.case .video .fact { font-size: 61px !important; }
	.slide .text h3 { font-size: 70px; }
	.slide-container .slide { width: 700px; }
	.grid-container { margin-top: -30px; margin-left: -30px; margin-right: -30px; padding-left: 30px; }
	.grid-container .slide { margin-right: 30px; margin-top: 30px; width: calc(50% - 30px); }
	.grid-container .slide.wide { width: calc(50% - 30px); }
	.video .hero-head { box-sizing: border-box; width: 100%; padding-left: 30px; padding-right: 30px; }
	.video .hero-head .inner { width: 1690px; margin: auto; }
	.video.full {margin: 0 !important; }
	.scrollfooter .inner { box-sizing: border-box; width: 1750px; margin: auto; position: relative; }
	.slide-container { margin-left: calc(-50vw + 845px); margin-right: calc(-50vw + 845px);  padding-left: calc(50vw - 845px); padding-right: calc(50vw - 889px); }
	.slide-container .slide { margin-right: 44px; }
}

/**** SMALL SCREEN ****/

@media only screen and (max-width: 500px) {	
	body { font-size: 20px; }
	.anchor { position: relative; top: -80px; }
	.header { height: 80px; }
	.header .logo { left: 20px; top: 20px; }
	.header .logo.compact { top: 30.38px; }
	.header .logo svg { width: 210px; }
	.header .logo.compact svg { width: 55px; }
	.header .logo.compact .subline { left: 65px; top: 1px; font-size: 20px; }
	.header .backbutton { right: 68.5px; top: 23.5px; width: 30px; }
	.header .menuicon { width: 30px; right: 21.5px; top: 23.5px; }
	.footer .inner { font-size: 17.5px; padding: 12.5px; }
	.footer h3 { font-size: 30px; }
	.footer .mapslink, .footer .legal-links { font-size: 20px; }
	.menu-container .inner { padding: 100px 20px 100px 20px; }	
	.menu-container .kontaktinfo { font-size: 16px; }
	.main .block { padding: 80px 12.5px 20px 12.5px; }
	.fathead { font-size: 45px; }
	.maintag { font-size: 30px; max-width: 250px; }
	.button { font-size: 14px; min-width: 260px; }
	.slogan-container { margin-top: 80px; margin-bottom: 100px; }
	.casefilter { font-size: 17.5px; }
	.block.case-details .smallfacts { font-size: 16.5px; }
	.block.case-details h2 { font-size: 17.5px; }
	.case-fact .text { font-size: 17.5px; }
	.zitat .quelle { padding-left: 70px; font-size: 20px; }
	.zitat .quelle .firma { font-size: 17.5px; }
	.zitat .quelle .image { width: 55px; }
	.video.infocus { margin: -12.5px; }
	.video .hero-head { padding: 0 12.5px 0 12.5px; }
	.kategorie-kontakt .text { padding: 7vw 12.5px; }
	.kontakt label { font-size: 25px; }
	.kontakt input[type=text], .kontakt textarea { font-size: 20px; }
	.kontakt .legal { font-size: 14px; }
	.kontaktperson .body .details { font-size: 16px; }
}

@media only screen and (max-width: 400px) {
	.header .logo { top: 24px; }
	.header .logo.compact { top: 31px; }
	.header .logo svg { width: 168px; }
	.header .logo.compact svg { width: 44px; }
	.header .logo.compact .subline { left: 50px; top: 3px; font-size: 14px; }
	.footer h2 { font-size: 40px; }
	.menu .entry a { font-size: 36px; }
	.bighead { font-size: 48px; }
	.slogan-container .slogan { padding: 20px; font-size: 24.4px; }
	.case .abstract { font-size: 20px; }
	.zitat { font-size: 24.4px; }
	.video .hero-head { font-size: 20px; }
	.video .hero-head h1 { font-size: 45px; }
	.subkategorie .headline h2 { font-size: 32px; }
	.subkategorie .headline .index { top: 18px; }
}