:root{
	--ticker-h: clamp(48px, 5vw, 96px);
}

html, body {
	overscroll-behavior-y: none;
}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family: 'basier_square_monoregular';
	src: url('../fonts/basiersquaremono-regular-webfont.eot');
	src: url('../fonts/basiersquaremono-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/basiersquaremono-regular-webfont.woff2') format('woff2'),
	url('../fonts/basiersquaremono-regular-webfont.woff') format('woff'),
	url('../fonts/basiersquaremono-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'basier_squaresemibold';
	src: url('../fonts/basiersquare-semibold-webfont.eot');
	src: url('../fonts/basiersquare-semibold-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/basiersquare-semibold-webfont.woff2') format('woff2'),
	url('../fonts/basiersquare-semibold-webfont.woff') format('woff'),
	url('../fonts/basiersquare-semibold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'basier_squareregular';
	src: url('../fonts/basiersquare-regular-webfont.eot');
	src: url('../fonts/basiersquare-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/basiersquare-regular-webfont.woff2') format('woff2'),
	url('../fonts/basiersquare-regular-webfont.woff') format('woff'),
	url('../fonts/basiersquare-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.gsap-marker-end,
.gsap-marker-start,
.gsap-marker-scroller-end,
.gsap-marker-scroller-start {
	padding: 5px;
	background: #FFF
}

.hidden {
	display: none;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

h1 {
	font-size: 4rem;
	font-family:"basier_squaresemibold", sans-serif;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 4;
	line-height: 100%
}

h2 {
	font-family:"basier_squaresemibold", sans-serif;
	font-size: 2rem;
	line-height: 100%;
	text-transform: uppercase;
	font-weight: bold;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 4;
}

h3 {
	font-family:"basier_squaresemibold", sans-serif;
	font-size: 1.3rem;
	line-height: 110%
}

h4 {
	font-family:"basier_squareregular", sans-serif;
	font-size: 1rem;
}

ul {
	list-style: none;
}

strong {
	font-family:"basier_squaresemibold", sans-serif;
}

body {
	font-family:"basier_squareregular", sans-serif;
	letter-spacing: -0.1px;
	color: #243226;
	background: #e5e5e1;
	position: relative;
	line-height: 150%;
	height: 100%;
	transition: all 0.6s ease-in-out;
	opacity: 0;
}

body.loaded {
	opacity: 1
}

body.touch {

}

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

a {
	text-decoration:none;
	transition: all 0.3s ease;
	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 4;
}

a:focus {
	outline:0;
}

a:hover,
a:active {
	outline:0;
}

/*------------------------------------*\
	Header
\*------------------------------------*/

.ticker{
	background:#d0043a;
	overflow:hidden;
	white-space:nowrap;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 2000;
	height: var(--ticker-h);
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform .35s ease, opacity .2s ease;
}

body.ticker-visible .ticker{
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.ticker__track{
	display:flex;
	width:max-content;
	will-change:transform;
	animation: ticker 18s linear infinite;
}

/* Ein Textblock (wird mehrfach dupliziert) */
.ticker__item{
	flex:0 0 auto;
	font-family:"basier_squaresemibold", sans-serif;
	font-size: clamp(16px, 2.2vw, 44px);
	color:#fff;
}

/* Nahtlos: um die Breite von 1 Item verschieben */
@keyframes ticker{
	from { transform: translateX(0); }
	to   { transform: translateX(-33.3333%); } /* bei 3 gleichen Items */
}

/* Optional: Pause bei Hover */
.ticker:hover .ticker__track{
	animation-play-state: paused;
}

/* Optional: Reduced Motion */
@media (prefers-reduced-motion: reduce){
	.ticker__track{ animation:none; }
}

#logoWrapper {
	position: fixed;
	top:2.9vh;
	left:5vw;
	z-index: 1001;
	display: flex;
	align-items: baseline;
	transform: translateY(0);
	transition: transform .35s ease;
}

body.ticker-visible #logoWrapper{
	transform: translateY(var(--ticker-h));
}

#logo {
	width: 100%;
	max-width: 200px
}

#langWrapper {
	padding: 0 0 0 7px;
}

#langWrapper a {
	font-size: 0.8rem;
	font-weight: bold;
	color: #d0043a;
}

/*------------------------------------*\
	Intro
\*------------------------------------*/

.introWrapper {
	width: 100%;
	height: 100%;
	background: #202629;
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top:0;
	right:0;
	z-index: 10002;
	cursor: default;
}

.introWrapper.active {
	display: flex
}

.introWrapper.done {
	opacity: 0
}

.introWrapper .introContent {
	text-align: center;
	font-family:"basier_squaresemibold", sans-serif;
	font-size: 1.6vw;
	margin: 0;
	line-height: 140%;
	transform: scale(1.4);
	transition: all 140s cubic-bezier(0,0,0,1);
}

.introWrapper .introContent.active {
	margin: 0;
	transform: scale(1.9);
}

.introContent.done {
	color: #202629;
	opacity: 0;
	transition: all 3s ease-out;
}

.introWrapper .slide {
	display: block;
	position: relative;
	opacity: 0;
	transform: scale(2);
	filter: blur(1vw);
	transition: all 1.2s cubic-bezier(0,0,0,1);
	color: #202629;
}

.introWrapper .slide.active {
	opacity: 1;
	transform: scale(1);
	filter: none;
	color: #d0043a;
}

.introWrapper .slide.fadeout {
	opacity: 0;
	filter: blur(1vw);
	transform: scale(0.2);
	transition: all 4s ease-out;
	color: #202629;
}

.vid {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 9;
	transition: all 0.6s ease-in-out;
}

.vid video {
	width: 100%;
	min-width: 218.19vh;
	height: auto;
}

/*------------------------------------*\
	LAYOUTS
\*------------------------------------*/

#mainWrapper {
	height: 100%;
	height: 100dvh;
	position: relative;
}

body.touch #mainWrapper {
	height: 100%;
	height: 100dvh;
	overflow: visible;
}

#mainWrapper.active {
	height: 100%;
	height: 100dvh;
	overflow: visible;
}

#mainWrapper .section {
	height: 100%;
	height: 100dvh;
	width: 100%;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "leftcontent rightcontent";
	transition: all 0.6s ease-in-out;
}

#mainWrapper .section.notfound404 {
	display: flex;
	align-items: center;
}

.page-template-singlepage #mainWrapper .section.nogrid,
.page-template-jobs #mainWrapper .section.nogrid {
	height: auto;
}

.section .contentWrapper,
.section .imagesWrapper {

}

#mainWrapper .section.textbild .contentWrapper {
	grid-area: leftcontent;
}

#mainWrapper .section.textbild .imagesWrapper {
	grid-area: rightcontent;
}

#mainWrapper .section.bildtext .contentWrapper {
	grid-area: rightcontent;
}

#mainWrapper .section.bildtext .imagesWrapper {
	grid-area: leftcontent;
}

#mainWrapper .section.nogrid {
	grid-template-columns: 1fr;
}

#mainWrapper .section.active {

}

body.touch #mainWrapper .section.active {
	opacity: 1;
	z-index: 2
}

#mainWrapper .section.light {
	color: #BFC0B5
}

#mainWrapper .section.dark {
	color: #243226
}

/* Styling */

#mainWrapper .section .contentWrapper .text {
	padding: 5vw 5vw 2vw 5vw
}

#mainWrapper .section.singlepage .contentWrapper .text {
	padding: 200px 5vw 100px;
	max-width: 70vw
}

#mainWrapper .section.jobspage .contentWrapper .text {
	padding: 200px 5vw 100px;
	max-width: 66vw
}

#mainWrapper .section .contentWrapper .text a:not(.morebtn),
#mainWrapper .section.singlepage .contentWrapper .text a {
	color: #d0043a;
	text-decoration: underline
}

#mainWrapper .section .contentWrapper .moreContent > .text:last-child {
	padding: 5vw 5vw 8vw 5vw
}

#mainWrapper .section .contentWrapper .moreContent > .text:first-child {
	padding: 0 5vw 2vw 5vw
}

#mainWrapper .section .contentWrapper .text h1 {
	margin: 0 0 3vh -3px;
	font-size: 4rem;
}

#mainWrapper .section .contentWrapper .text.error h1 {
	margin: 0 0 3vh -3px;
	font-size: 6rem;
}

#mainWrapper .section .contentWrapper .text.error .canthelpit {
	font-size: 2rem;
	font-family:"basier_squaresemibold", sans-serif;
	color: #d0043a
}

#mainWrapper .section .contentWrapper .text h2 {
	margin: 0 0 3vh -3px;
	font-size: 4rem
}

#mainWrapper .section.singlepage .contentWrapper .text h2 {
	font-size: 2rem
}

#mainWrapper .section .contentWrapper .text h3,
#mainWrapper .section .contentWrapper .text h4,
#mainWrapper .section .contentWrapper .text p {
	margin: 0 0 3vh 0
}

#mainWrapper .section .contentWrapper .text ul {
	margin: 0 0 4vh 25px;
	list-style: disc
}

/* Content */

.section .trigger {
	-webkit-transition: 0.6s ease-in-out;
	-moz-transition: 0.6s ease-in-out;
	-ms-transition: 0.6s ease-in-out;
	-o-transition: 0.6s ease-in-out;
	transition: 0.6s ease-in-out;
}

#mainWrapper .section .mCustomScrollBox,
#mainWrapper .section .mCustomScrollBox .innerWrapper {
	position: relative;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	height: auto
}

#mainWrapper .section .contentWrapper .mCustomScrollBox {
	top:50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#mainWrapper .section .contentWrapper .mCustomScrollBox.active {
	top:0;
	-ms-transform: none;
	transform: none;
	-webkit-transition: 0.6s ease-in-out;
	-moz-transition: 0.6s ease-in-out;
	-ms-transition: 0.6s ease-in-out;
	-o-transition: 0.6s ease-in-out;
	transition: 0.6s ease-in-out;
}

#mainWrapper .section .contentWrapper .mCustomScrollBox .innerWrapper {
	padding: 0
}

#mainWrapper .section .contentWrapper .mCustomScrollBox.active .innerWrapper {
	padding: 5vh 0 0 0
}

#mainWrapper .section .moreWrapper {
	position: relative
}

#mainWrapper .section .moreWrapper .moreContent {
	display: none;
	opacity: 0;
}

#mainWrapper .section .moreWrapper .moreContent.active {
}

/* ----- FOOTER ----- */

#mainWrapper .section.footer {
	min-height: 100dvh;
	height: unset;
}

#mainWrapper .section.footer .contactWrapper {
	padding: 10vw 5vw;
	position: relative;
	font-family:"basier_squaresemibold", sans-serif;
	font-size: 1.2rem
}

#mainWrapper .section.footer .customerWrapper {
	padding: 140px 5vw 80px;
	display:flex;
	flex-direction:column;
	min-height: 100%;
}

#mainWrapper .section.footer .customerWrapper .ourcustomers {
	margin-top: auto;
}


#mainWrapper .section.footer .inner {
	position: relative;
}


#mainWrapper .section .contactWrapper h2 {
	margin: 0 0 0 -5px;
	font-size: 4rem
}

#mainWrapper .section .contactWrapper p {
	margin: 3vw 0 0 0;
}

#mainWrapper .section .contactWrapper a {
	color:#d0043a;
}

#mainWrapper .section .contactWrapper a.linkedin {
	display: inline-block;
	background: url(../images/icons/linkedin.png) no-repeat;
	width: 30px;
	height: 30px;
	background-size: 30px;
	margin: 0 0 0 15px !important;
	opacity: 1;
	line-height: 9999px;
	overflow: hidden;
}

#mainWrapper .section .contactWrapper a.linkedin:hover {
	opacity: 0.8
}

#mainWrapper .section .contactWrapper a.pinterest {
	display: inline-block;
	background: url(../images/icons/pinterest.png) no-repeat;
	width: 30px;
	height: 30px;
	background-size: 30px;
	margin: 0 0 0 15px !important;
	opacity: 1;
	line-height: 9999px;
	overflow: hidden;
}

#mainWrapper .section .contactWrapper a.pinterest:hover {
	opacity: 0.8
}

#mainWrapper .section .contactWrapper a.instagram {
	display: inline-block;
	background: url(../images/icons/instagram.png) no-repeat;
	width: 30px;
	height: 30px;
	background-size: 30px;
	margin: 0 !important;
	opacity: 1;
	line-height: 9999px;
	overflow: hidden;
}

#mainWrapper .section .contactWrapper a.instagram:hover {
	opacity: 0.8
}

/* ----- Accordions ----- */

.stellenangeboteWrapper {
	border-top: 1px solid rgba(36, 50, 38, 0.2);
	margin: 0 0 3vw 0;
}

.stellenangeboteWrapper .accordion {
	border-bottom: 1px solid rgba(36, 50, 38, 0.2);
	transition: all 0.3s ease-out;
}

.stellenangeboteWrapper .accordion:last-of-type {

}

.stellenangeboteWrapper .accordion .acccontent {
	padding:0;
	font-size: 1rem;
	line-height: 140%;
}

.stellenangeboteWrapper .accordion .acccontent p {
	margin: 0 0 2vw 0 !important;
}

.stellenangeboteWrapper .accordion .acccontent ul {
	margin: 0 0 2vw 25px !important;
}

.stellenangeboteWrapper .accordion .headline {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 !important;
	text-transform: none;
}

.stellenangeboteWrapper .accordion .title {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns:1fr 24px;
	grid-column-gap: 10px;
	cursor: pointer;
	padding: 1.5vw 0;
	margin:0 !important;
	cursor: pointer;
	color: #d0043a;
	font-size: 2rem !important;
}

.stellenangeboteWrapper .accordion .title.active {
	padding: 1.5vw 0 5px;
}

.stellenangeboteWrapper .accordion .title .arrow {
	display: flex;
	justify-content: center;
	align-items: center;
}

.stellenangeboteWrapper .accordion .title .headline {
	display: flex;
	justify-content: left;
	align-items: center;
}

.stellenangeboteWrapper .accordion .title .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #d0043a
	border-radius: 50%;
}

.stellenangeboteWrapper .accordion .title .icon:after {
	content: '';
	width: 0.3rem;
	height: 0.3rem;
	margin:0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #d0043a;
}

.stellenangeboteWrapper .accordion .title.active .icon {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

.stellenangeboteWrapper .accordion {
	overflow:hidden;
}

.stellenangeboteWrapper .accordion .acccontent {
	display:none;
}

.stellenangeboteWrapper .accInner {
	display: block;
	grid-template-rows: auto;
	opacity: 0
}

.stellenangeboteWrapper .accordion.openfirst .acccontent .accInner {
	opacity: 1
}

.stellenangeboteWrapper .acccontent.open .accInner {
	opacity: 1
}

.stellenangeboteWrapper .accInner .icon {
	text-align: center
}

.stellenangeboteWrapper .accInner .text ul {
	list-style: disc;
	margin: 0 0 0 15px
}

.stellenangeboteWrapper .accInner .text p {
	margin: 20px 0
}

.stellenangeboteWrapper .accInner .text ul li {
	margin: 10px 0 0 0
}

.stellenangeboteWrapper .accInner .text a {
	font-weight: bold
}

/* ----- FOOTER ----- */

#mainWrapper .section.footer .ourcustomers h4 {
	font-size: 0.8rem;
	color: #bfc0b5;
	margin: 0 0 12px 0;
}

/* ------------------------------------ *\
   SECTION NAV Intro
\* ------------------------------------ */

.introText {
	position: absolute;
	left: calc(5vw - 3px);
	top: 50%;
	translate: 0 -50%;
	font-family: "basier_squaresemibold", sans-serif;
	font-weight: bold;
	z-index: 30;
	font-size: 5rem;
	line-height: 1.1;
	letter-spacing: -0.03em;
	will-change: transform, opacity, filter;
}

.introText .introLine {
	display: inline-block;
	will-change: transform, opacity, filter;
}

.sectionNav--intro {
	position: absolute;
	left: calc(5vw - 3px);
	top: 50%;
	translate: 0 -50%;
	z-index: 30;
	height: auto;
	width: auto;
	display: block;
	font-family: "basier_squaresemibold", sans-serif;
	font-weight: bold;
	will-change: transform, opacity;
}

.sectionNav--intro .sectionNav-inner,
.sectionNav--intro .sectionNav-slider {
	position: relative;
	height: auto;
	width: auto;
}

.sectionNav--intro .sectionNav-slider {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.sectionNav--intro .sectionNav-item {
	display: block;
	font-size: 3.5rem;
	font-weight: bold;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(209,210,201,1);
	transition: opacity 0.25s ease, color 0.25s ease;
	will-change: transform, opacity;
	opacity: 0;
}

.sectionNav--intro .sectionNav-item.active,
.sectionNav--intro .sectionNav-item:hover {
	color: rgba(255,255,255,1);
}

#sectionNavIntro.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#sectionNavIntro.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*------------------------------------*\
	SECTION NAV Sidebar
\*------------------------------------*/

#sectionNav {
	position: fixed;
	left: 1.4vw;
	bottom: 2.8vh;
	height: 100dvh;
	z-index: 999;
	display: flex;
	gap: 14px;
	color: inherit;
	opacity: 0;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
}

#sectionNav.is-ready {
	opacity: 1;
}

#sectionNav .sectionNav-inner {
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: auto;
}

#sectionNav .sectionNav-slider {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	width: 1.4em;
	will-change: transform;
	transition: none;
}

#sectionNav.is-ready .sectionNav-slider {
	transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

#sectionNav a {
	color:#d0043a;
	display: flex;
	justify-content: center;
	text-transform: uppercase;
	position: relative;
	margin-top: 22px;
	text-decoration: none;
	transition: color .5s ease;
	font-size: 0.9rem;
}

#sectionNav a.active {
	opacity: 1;
	font-weight: bold;
	font-family: "basier_squaresemibold", sans-serif;
}

#sectionNav a span {
	display: block;
	transform: rotate(-180deg);
	white-space: nowrap;
	writing-mode: vertical-rl;
	transition: color .5s ease;
}

body.hide-section-nav #sectionNav {
	opacity: 0;
	transform: translateY(30px);
	pointer-events: none;
}

@media (max-width: 859px) {
	#sectionNav,
	#sectionNavIntro {
		display: none;
	}

	.introText {
		left: 8vw;
		bottom:2.7em;
		top:auto;
		translate: 0;
		font-size: 3.3rem;
		line-height: 1;
		letter-spacing: -0.03em;
		will-change: transform, opacity, filter;
	}
}