/* montserrat-700 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-v21-latin-700.eot');
	src: local(''), url('../fonts/montserrat-v21-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-v21-latin-700.woff2') format('woff2'), url('../fonts/montserrat-v21-latin-700.woff') format('woff'), url('../fonts/montserrat-v21-latin-700.ttf') format('truetype'), url('../fonts/montserrat-v21-latin-700.svg#Montserrat') format('svg');
}

/* raleway-regular - latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-v22-latin-regular.eot');
	src: local(''), url('../fonts/raleway-v22-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-v22-latin-regular.woff2') format('woff2'), url('../fonts/raleway-v22-latin-regular.woff') format('woff'), url('../fonts/raleway-v22-latin-regular.ttf') format('truetype'), url('../fonts/raleway-v22-latin-regular.svg#Raleway') format('svg');
}

/* raleway-500 - latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/raleway-v22-latin-500.eot');
	src: local(''), url('../fonts/raleway-v22-latin-500.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-v22-latin-500.woff2') format('woff2'), url('../fonts/raleway-v22-latin-500.woff') format('woff'), url('../fonts/raleway-v22-latin-500.ttf') format('truetype'), url('../fonts/raleway-v22-latin-500.svg#Raleway') format('svg');
}

/* raleway-700 - latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway-v22-latin-700.eot');
	src: local(''), url('../fonts/raleway-v22-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-v22-latin-700.woff2') format('woff2'), url('../fonts/raleway-v22-latin-700.woff') format('woff'), url('../fonts/raleway-v22-latin-700.ttf') format('truetype'), url('../fonts/raleway-v22-latin-700.svg#Raleway') format('svg');
}

/* oswald-regular - latin */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/oswald-v40-latin-regular.eot');
	src: local(''), url('../fonts/oswald-v40-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/oswald-v40-latin-regular.woff2') format('woff2'), url('../fonts/oswald-v40-latin-regular.woff') format('woff'), url('../fonts/oswald-v40-latin-regular.ttf') format('truetype'), url('../fonts/oswald-v40-latin-regular.svg#Oswald') format('svg');
}

/* oswald-700 - latin */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/oswald-v40-latin-700.eot');
	src: local(''), url('../fonts/oswald-v40-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/oswald-v40-latin-700.woff2') format('woff2'), url('../fonts/oswald-v40-latin-700.woff') format('woff'), url('../fonts/oswald-v40-latin-700.ttf') format('truetype'), url('../fonts/oswald-v40-latin-700.svg#Oswald') format('svg');
}

* {
	box-sizing: border-box;
}

html {
	margin: 0;
	font-family: 'Raleway', sans-serif;
	--c-red: #e5332a; 
	--c-blue: #132c4a; 
	--c-lightblue: #c3c3cf; 
	--c-middleblue: #545c76;
}

body {
	font-family: 'Raleway', sans-serif;
	margin: 0;
	overflow-x: hidden;
	font-size: 20px;
	position: relative;
	z-index: 2;
	background-color: #181818;
	color: white;
}

body.start {
	background-color: #132c4a;
}

body>div {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: 80px;
}

body.start>div {
	padding-top: 0;
}

.flexspacer {
	flex-grow: 1;
}

a {
	transition: all 0.3s ease;
	color: #e5332a;
	text-decoration: none;
}

a:hover {
	color: var(--c-blue);
}

p {
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
}

h1>span, h2>span, h3>span, h4>span, h5>span, h6>span {
	color: #e5332a;
}

h2 {
	margin-top: 0;
	font-size: 3em;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	color: white;
}

h3 {
	font-size: 25px;
	line-height: 1.1;
	color: #e3e3e3;
}
ul{
	margin-top: 0; 
}
nav {
	position: fixed;
	width: 100%;
	z-index: 10;
	transition: all 0.3s ease;
	top: 0;
	/* display: none; */
	background-color: black;
	transform-origin: top;
	padding: min(0.8em, 2.5vh) 1em;
}


nav button {
	display: none;
	flex-direction: column;
	background-color: transparent;
	border: none;
	padding: 9px 7px;
	cursor: pointer;
}

nav button span {
	width: 22px;
	height: 2px;
	margin: 2px 0;
	background-color: #fff;
	position: relative; 
	transition: all 0.3s ease;
}

nav button span:nth-child(2){
	background-color: transparent;
}
nav button span:nth-child(2):after,
nav button span:nth-child(2):before {
	content: ""; 
	border: 1px solid white; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left:0; 
	transition: all 0.3s ease;
}
nav button.open span:nth-child(2):before {
	transform: rotateZ(45deg);
}
nav button.open span:nth-child(2):after {
	transform: rotateZ(-45deg);
}

nav button.open span{
	background-color: transparent;
}
nav>div {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

.navbar {
	display: flex;
	list-style-type: none;
	flex-direction: row;
	margin: 0;
}

.navbar a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: 0.8em;
	padding: 0.5em 1em;
	font-family: 'Oswald', sans-serif;
	display: block;
}
.navbar a:hover {
	scale: 1.1; 
}

nav .logos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* margin: 15px 0; */
}

nav .logos img {
	height: 85px;
	max-height: 13vh;
	/* margin: 1em; */
	transition: all 0.3s ease;
}

.start nav{
	/* z-index: -1; */
	/* opacity: 0; */
	/* visibility: hidden; */
	transform: scaleY(0);
}
.start nav.fixed{
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}
nav.fixed .logos img:nth-child(1) {
	filter: none;
}

nav .logos img:nth-child(2) {
	height: 120px;
	filter: drop-shadow(0px 0px 32px #000);
	transition: all 0.3s ease;
}

nav.fixed {
	background-color: var(--c-blue);
	border-bottom: 2px solid #fff;
	box-shadow: 0 0 10px #000;
}

nav.fixed .logos img:nth-child(1), nav.fixed .logos img:nth-child(2) {
	/* height: 55px; */
}

nav.fixed .navbar a {
	color: #FFF;
}

nav.fixed .navbar a:hover {
	color: white;
}

nav.fixed .navbar a.active {
	color: white;
}

.intro .logo img {
	width: 500px;
	max-width: 70vw;
	/* filter: drop-shadow(0px 0px 4px #000) drop-shadow(0px 0px 16px #000) drop-shadow(0px 0px 64px #000); */
}

.intro .logo {
	margin: 20px 0;
}

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

section {
}

section>* {
	z-index: 7;
	position: relative;
}

.blackbox {
	background-color: #101010;
}

.lightbox {
	background-color: var(--c-lightblue);
	position: relative;
	color: var(--c-blue);
}

.lightbox h2 {
	color: var(--c-blue);
}

.textbox {
	text-align: center;
	padding: 3em 0 6em;
}

.impbox {
	padding: 3em 0;
}

.impbox h1 {
	font-size: 35px;
	text-transform: none;
	color: #e3e3e3;
}

.impbox h2 {
	font-size: 30px;
	text-transform: none;
}

.impbox h3 {
	font-size: 24px;
}

.impbox h4 {
	font-size: 20px;
}

.impbox h5 {
	font-size: 17px;
}

.impbox h6 {
	font-size: 15px;
}

.impbox p {
	line-height: 1.4;
}

.socbox {
	text-align: center;
	padding: 2em 0 3em;
}

.socbox .itemwrapper {
	margin-top: 15px;
	margin-bottom: 15px;
}

.socbox .item {
	background-color: var(--c-middleblue);
	display: block;
	border-radius: 5px;
	position: relative;
	border: 1px solid var(--c-lightblue);
	padding: 5px;
	overflow: hidden;
}

.socbox .item .bgholder {
	width: 100%;
	border-radius: 5px;
	background-size: cover;
	background-position: center center;
	transition: all 0.3s ease;
	top: 5px;
	aspect-ratio: 9 / 16;
}

.socbox .icon {
	position: absolute;
	right: 5%;
	top: 5%;
	width: 15%;
	height: 15%;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.3s ease;
}

.socbox .icon.insta {
	background-image: url('../img/instagram.png');
}

.socbox .item .overlay {
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	padding: 10px;
	opacity: 0;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 5px;
	background-color: #000c;
	border-radius: 5px;
}

.socbox .item:hover .overlay {
	opacity: 1;
}

.socbox .item .overlay .inner {
	max-height: 100%;
	overflow-y: auto;
	padding: 15px;
}

.socbox .socext {
	font-size: 2.5em;
}

.socbox .socext a {
	margin: 10px;
	color: #aaa;
}

.socbox .socext a:hover {
	margin: 10px;
	color: #fff;
}

.socbox a {
	color: #ccc;
}

.faqbox {
	padding: 3em 0 3em;
	text-align: center;
}

.faqbox .item {
	text-align: left;
	background-color: var(--c-lightblue);
	padding: 1em;
	border-radius: 5px;
	color: var(--c-blue);
	border: 1px solid var(--c-middleblue);
}

.faqbox .item h3 {
	font-size: 20px;
	text-transform: uppercase;
	margin-top: 0;
	line-height: 1.2;
	color: #e5332a;
}

.faqbox .item span {
	font-weight: 300;
	font-color: white;
}

.factcar{
	/* box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.3); */
	padding: 0 4em;
}

.newsbox {
	text-align: center;
	padding: 3em 0;
}

.newsbox .item {
	background-color: var(--c-lightblue);
	display: flex;
	/* border-radius: 20px; */
	padding: 0px;
	position: relative;
	height: 100%;
	flex-direction: column;
	justify-content: flex-start;
	/* font-size: 0.9em; */
	color: var(--c-blue);
	box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	overflow: hidden;
}

.newsbox .itemwrapper {
	margin-top: 15px;
	margin-bottom: 15px;
}

.newsbox .item h3 {
	font-size: 1.15em;
	text-transform: uppercase;
	color: var(--c-red);
	margin: 0.8em 0;
}

.newsbox .item img {
	width: 100%;
	/* border-radius: 15px; */
	background-size: cover;
	background-position: center center;
	transition: all 0.3s ease;
	aspect-ratio: 19/12;
	background-color: #555;
}

.newsbox .item .text-holder {
	padding: 0.7em 1.2em 0.9em;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
	justify-content: flex-start;
}
.newsbox .item .text-holder>*:last-child {
	margin-bottom: 0; 
}

.newsbox .item .text-holder date {
	order: -1; 
	color: var(--c-blue);
}

.newsbox a {
	color: #ccc;
}

.newsbox p {
	/* line-height: 1.6; */
	/* font-size: 0.8em; */
	font-weight: 400;
}

.fspacer {
	flex-grow: 1;
}

.btn {
	display: inline-block;
	padding: 10px;
	border: 1px solid #e5332a;
	border-radius: 5px;
	background-color: #e5332a;
	transition: all 0.3s ease;
	color: #e7e7e7;
}

.btn:hover {
	border: 1px solid var(--c-middleblue);
	background-color: var(--c-blue);
}
.boxbox {
	padding: 6em 0;
	background-color: #181818;
}

.boxbox .itemwrapper {
	padding: 15px;
}

.boxbox .item {
	background-color: #101010;
	text-align: center;
	border-radius: 20px;
	border: 1px solid #75757533;
	padding: 15px;
	height: 100%;
	overflow: hidden;
}

.boxbox .item .wrapper p {
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease;
	margin-bottom: 0;
	min-height: 140px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.boxbox .item .wrapper {
	position: relative;
	margin-bottom: 1em;
	padding: 1em 0;
}

.boxbox .item .wrapper>img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) scaleX(1) scaleY(1);
	transition: all .3s ease;
	width: 125px;
}

.boxbox .item:hover p {
	opacity: 1;
	transform: scale(1);
}

.boxbox .item:hover .wrapper>img {
	transform: translateX(-50%) translateY(-50%) scaleX(3) scaleY(0);
	opacity: 0;
}

.wegebox {
	text-align: center;
	padding-top: 1em;
}

.wegebox .itemwrapper {
	margin-top: 15px;
	margin-bottom: 15px;
}

.wegebox .item {
	text-align: left;
}

.wegebox h3 {
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	width: 100%;
}

.wegebox .wrapper {
	display: flex;
	flex-wrap: wrap;
}

.wegebox .wrapper div {
	margin-top: 1em;
	flex-shrink: 1;
	width: 61%;
}

.wegebox .wrapper div p {
	padding-left: 25px;
	position: relative;
}

.wegebox .wrapper div p i {
	color: white;
	position: absolute;
	right: calc(100% - 15px);
	top: 7px;
	font-size: 1.125em;
}

.wegebox .number {
	display: flex;
	font-size: 140px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #e3e3e3;
	margin-right: 0.15em;
	line-height: 1;
}

.vdividers {
	z-index: 3;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow-y: hidden;
}

.vdividers>* {
	width: 1px;
	top: 0;
	height: 100%;
	background-color: #7773;
	height: 100%;
	position: absolute;
}

.vdividers>*:nth-child(1) {
	left: calc(25% + 7.5px);
}

.vdividers>*:nth-child(2) {
	left: 50%;
}

.vdividers>*:nth-child(3) {
	left: calc(75% - 7.5px);
}

.vdividers>*:nth-child(1):after, .vdividers>*:nth-child(1):before, .vdividers>*:nth-child(3):after, .vdividers>*:nth-child(3):before {
	width: 3px;
	background: linear-gradient(#fff0,#fff);
	content: "";
	top: 44%;
	position: absolute;
	left: -1px;
	border-radius: 2px;
	opacity: 0.5;
}

.vdividers>*:nth-child(1):before {
	animation: 30s linear 0s infinite moveDown;
}

.vdividers>*:nth-child(1):after {
	animation: 30s linear 15s infinite moveDown;
}

.vdividers>*:nth-child(3):before {
	animation: 30s linear 0s infinite moveUp;
	background: linear-gradient(#fff,#fff0);
}

.vdividers>*:nth-child(3):after {
	animation: 30s linear 15s infinite moveUp;
	background: linear-gradient(#fff,#fff0);
}

@keyframes moveUp {
	0% {
		height: 6vh;
		transform: translateY(0);
		top: 100%
	}

	50% {
		opacity: 0.75;
	}

	100% {
		height: 18vh;
		transform: translateY(-100%);
		top: 0;
	}
}

@keyframes moveDown {
	0% {
		height: 6vh;
		transform: translateY(-100%);
		top: 0;
	}

	50% {
		opacity: 0.75;
	}

	100% {
		height: 18vh;
		transform: translateY(0);
		top: 100%
	}
}

.bgholder {
}

.intro {
	/* background-attachment: fixed; */
	min-height: 60vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 80px 0 100px;
	position: relative;
	background-image: url('../img/intro.jpg');
	background-size: cover;
	background-position: center;
}
.intro:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	/* border: 1px solid red; */
	inset: 0;
	background: linear-gradient(#132c4a 0%,#132c4aaa 40% ,#132c4aaa 60% ,#132c4a 100%);
}
footer:before,
.lightbox:before,
.lightbox:after{
	content: "";
	width: 100%;
	min-width: 1200px;
	top: 0;
	right: 0;
	position: absolute;
	aspect-ratio: 21 / 1;
	background-image: url('../img/ue1.svg');
	background-size: cover;
}
 
.lightbox:after {
	top: auto;
	bottom: 0;
	background-image: url('../img/ue2.svg');
}

footer {
	position: relative;
	z-index: 5;
	background-color: var(--c-lightblue);
	color: var(--c-blue);
	display: block;
	padding-top: min(16vw, 9em);
}

footer p {
	line-height: 1.4;
}

footer p:last-child {
}

footer>div {
	transform: translateY(-2vw);
}

footer img {
	max-width: 80vw;
	width: 100%;
	margin-bottom: 2em;
	margin-top: 0em;
	/* filter: drop-shadow(0px 0px 4px #0008) drop-shadow(0px 0px 16px #0004) drop-shadow(0px 0px 64px #0002); */
}

footer a {
	color: var(--c-middleblue);
	text-decoration: none;
}

footer .implink {
	padding-top: 1em;
}

.intro h1 {
	color: white;
	text-shadow: 0px 4px 9px #00000099, 0px 14px 30.4px #00000099, 0px 0px 30.4px #000000;
	font-size: 70px;
	margin: 15px;
	line-height: 1.1;
	text-align: center;
	/* transform: scaleX(0.65); */
	margin-bottom: 0.5em;
	/* font-weight: 400; */
	letter-spacing: -0.04em;
}

.main {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 0 auto;
	min-height: 100vh;
}

.underline {
	font-size: 0.8em;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* margin-top: -3em; */
	display: block;
	margin-bottom: 3em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}


.owl-carousel .owl-nav button.owl-next.disabled, .owl-carousel .owl-nav button.owl-prev.disabled {
	/* display: none; */
	opacity: 0!important;
	cursor: initial;
	transform: scale(0)!important;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
	background-color: #98191c;
	/* color: white; */
	/* width: 3em; */
	/* height: 3em; */
	/* border-radius: 100%; */
	position: absolute;
	/* left: -2.5em; */
	/* top: calc(50% - 1.5em); */
	/* font-size: 1.25em; */
	/* opacity: 0; */
	/* transition: all 0.3s ease; */
	/* transform: translateX(50%); */
}

.owl-carousel:hover .owl-nav button.owl-next {
	/* opacity: 1; */
	/* transform: translateX(0); */
}

.owl-carousel:hover .owl-nav button.owl-prev {
	/*opacity: 1;
	transform: translateX(0); */
}

.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: -2.5em;
	transform: translateX(-50%);
}

.owl-carousel button.owl-dot {
}

a.join {
	position: fixed;
	bottom: 1.5em;
	right: 1.5em;
	z-index: 9;
	color: white;
	font-size: 1.5em;
	/* filter: drop-shadow(2px 2px 16px #0008); */
}
.dabei{
	--ccount: 7;
	color: white;
	padding-bottom: 2em;
	padding-top: 2em;
}
.dabei .items{
	overflow: hidden;
	position: relative;
	display: grid;
	gap: 1em;
	margin-top: 1em;
}
.dabei .items:before,
.dabei .items:after{
	content: "";
	position: absolute;
	left: 0;
	height: 100%;
	/* border: 1px solid yellow; */
	width: calc((100% / var(--ccount) / 2) - 0.5em);
	background: linear-gradient(90deg, #132c4a, transparent);
	z-index: 20;
	top: 0;
}
.dabei .items:after{
	background: linear-gradient(-90deg, #132c4a, transparent);
	z-index: 20; 
	left: auto; 
	right: 0; 
}
.dabei .items>div{
	/* border: 1px solid red; */
	display: grid;
	grid-template-columns: repeat(calc(var(--ccount) * 2 + 2), 1fr);
	gap: 1em;
	width: 114.2857%;
	width:calc(100% * (var(--ccount) + 1) / var(--ccount));
}
.dabei .items>div:nth-child(3n+3){
	position: relative; 
	left: calc(100% / var(--ccount) / -3); 
}
.dabei .items>div:nth-child(3n+2){
	position: relative; 
	left: calc(100% / var(--ccount) / -3 * 2); 
}
.dabei .item{
	/* border: 2px dashed green; */
	aspect-ratio: 1;
	/* grid-column: span 2; */
	grid-row: 1;
	animation-duration: 750ms;
	animation-fill-mode:forwards;
	animation-timing-function: linear;
	border-radius: 5px; 
	overflow: hidden; 
}
.dabei .item img{
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}
.dabei .item.fadeIn{
	animation-name: fi;
	transform: perspective(1500px) rotateX(-90deg);
	animation-timing-function: linear;
}
@keyframes fi{
	from{
		transform: perspective(1500px) rotateX(-90deg);
	}
	to {
		transform: perspective(1500px) rotateX(0deg) ;
	}
}

.dabei .item.dep,
.dabei .item.fadeIn.dep{
	animation-name: fo;
	transform: perspective(1500px) rotateX(0deg);
}
@keyframes fo{
	from {
		transform:perspective(1500px) rotateX(0deg);
	}
	to{
		transform: perspective(1500px) rotateX(-90deg);
	}
}
.dabei .itemcontent{
	display: grid;
	position: relative;
}
.dabei .itemcontent>div{
	padding:1em;
	text-align: center;
	background-color: #e5332add;
	/* align-self: center; */
	display: grid;
	flex-direction: column;
	justify-content: center;
	gap:  0.5em;
	transition: all 0.5s ease;
	opacity: 0;
	width: 100%;
	overflow-y: auto;
	/* border: 1px solid yellow; */
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.dabei .itemcontent>div:hover{
	opacity: 1;
}
.dabei .itemcontent>div>span:nth-child(1){
	font-weight: bold;
	align-self: end;
}

.dabei .itemcontent>div>span:nth-child(2){
	font-size: 0.9em; 
}

.gruende{
	color: var(--c-blue);
	padding: 2em 0 4em;
}
.gruende .items{
	margin-top: 2em;
	row-gap: 30px;
}

.gruende h3{
	color: var(--c-red);
	text-transform: uppercase
}

.gruende .item{
	background-color: var(--c-lightblue);
	padding: 0.7em 1.2em 0.9em;
	box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.3);
	border-radius: 5px;
}
.gruende .item>*:last-child{
	margin-bottom: 0; 	
}
.gruende .item img{
	margin: 1em 0; 
}
.gruende .itemwrapper{
	display: flex; 
}

.support{
	padding: 2em 0 5em;
	text-align: center;
}
.supcar{
	margin-top: 2em;
	padding: 0 4em;
	/* border: 1px solid red; */
}
.supcar .item{
	border-top: 2px solid var(--c-red);
	border-bottom: 2px solid  var(--c-red);
	padding: 0.5em 1em 1.5em;
}
.supcar h3{
	font-size: 1.2em; 
	font-weight: bold; 
	
}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev {
	position: absolute;
	top: 50%;
	right: auto;
	left: 0;
	height: 100%;
	width: 4em;
	height: 4em;
	transition: all 0.3s ease;
	/* border: 1px solid blue; */
	transform: translateY(-50%);
	background-color: transparent;
}
.owl-carousel .owl-nav button.owl-next.disabled,.owl-carousel .owl-nav button.owl-prev.disabled {
	opacity: 0; 
	scale: 0; 
}
.owl-carousel .owl-nav button.owl-next span,.owl-carousel .owl-nav button.owl-prev span {
	display: grid;
	align-self: center;
	justify-self: center;
	margin-left: 1em;
	opacity: 0.8;
	transition: all 0.3s ease;
}
.owl-carousel .owl-nav button.owl-next:hover span,.owl-carousel .owl-nav button.owl-prev:hover span {
	opacity: 1;
}
.owl-carousel .owl-nav button.owl-next span:after,.owl-carousel .owl-nav button.owl-next span:before ,
.owl-carousel .owl-nav button.owl-prev span:after,.owl-carousel .owl-nav button.owl-prev span:before {
	height: 0.6em;
	width: 2em;
	content: "";
	grid-row: 1;
	grid-column: 1;
	border-radius: 0.2em;
	transform-origin: 13% center;
	transform: rotateZ(-45deg);
	background-color: #ec1c24;
}
.owl-carousel .owl-nav button.owl-next span:before,
.owl-carousel .owl-nav button.owl-prev span:before {
	transform: rotateZ(45deg);
}
.owl-carousel .owl-nav button.owl-next {
	right: 0;
	left: auto;
	transform: translateY(-50%) rotateZ(180deg);
}



.machmit{
	padding: 6em 0 9em;
}
.machmit .itemwrapper{
	display: flex;
}
.machmit .item{
	display: flex;
	gap: 2.25em;
}
.machmit .items{
	row-gap: 2em;
	margin-top: 2em;
}
.machmit .text p{
	max-width: 80ch; 
	margin-left: auto; 
	margin-right: auto; 
}

.machmit .item a{
	/* break-inside: avoid; */
	/* word-break: keep-all; */
	/* white-space: pre; */
	font-weight: bold;
	/* display:  inline-block; */
}
.machmit .item p{
	position: relative; 
}
.machmit .item p>icon{
	position: absolute;
	right: calc(100% + 0.45em );
	top: 0.2em;
	color: var(--c-red);
}
.machmit .item>span{
	color: white;
	background-color: var(--c-red);
	font-family: 'Montserrat', sans-serif;
	font-size: 2.8em;
	width: 1.5em;
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-weight: 500;
	border-radius: 5px;
}
.machmit .item h3{
	font-size: 1em;
	color: var(--c-blue);
	/* font-family: 'Roboto Condensed'; */
	font-weight: 700;
}

.scale{
	--current-count: 11; 
	display: grid;
	width:  100%;
	grid-template-columns: repeat(24,1fr);
	/* border-top: 10px solid var(--c-blue); */
	/* font-weight: bold; */
	margin-top: 2em;
}

.scale>.null{
	grid-column: 1; 
}
.scale>.neun{
	grid-column: 8 /  span 5;
}
.scale>.fuenfzehn{
	grid-column: 14 /  span 5;
}
.scale>.voll{
	grid-column: 22 /  span 3;
}

.scale>.neun,
.scale>.fuenfzehn,
.scale>.voll{
	position: relative; 
	grid-row:3;
}
.scale>.neun:after,
.scale>.fuenfzehn:after,
.scale>.voll:after{
	--b-width: 10px;
	position: absolute;
	content: "";
	border-top: var(--b-width) solid var(--c-blue);
	border-left: var(--b-width) solid transparent;
	border-right: var(--b-width) solid transparent;
	transform:translateX(-50%);
	z-index: 1;
	top: 0px;
}

.scale>.neun.done:before,
.scale>.fuenfzehn.done:before,
.scale>.voll.done:before{
	--b-width: 10px;
	position: absolute;
	content: "";
	border-top: var(--b-width) solid var(--c-red);
	border-left: var(--b-width) solid transparent;
	border-right: var(--b-width) solid transparent;
	top: -6px;
	transform:translateX(-50%);
	z-index: 2;
}


.scale>.bar{
	grid-column: 2 / 24;
	border: 15px solid var(--c-blue);
	border-radius: 10px;
	grid-row: 2;
	background-color: var(--c-blue);
}
.scale>.barcurrent{
	grid-row: 2;
	grid-column: 2 / calc(2 + var(--current-count));
	border: 10px solid var(--c-red);
	margin-left: 2px;
	border-radius: 6px;
	margin: 5px;
}

.scale h3{
	color: var(--c-blue);
	margin-top: 1em;
	margin-bottom: 0.5em;
}
.scale .done h3{
	color: var(--c-red);
}
.scale .done h3{
	color: var(--c-red);
}
.scale .current{
	grid-row: 1;
	grid-column: var(--current-count) / span 3;
	padding-bottom: 1em;
	position: relative;
}

.scale .current span{
	font-size: 1.25em;
	font-weight: bold;
	font-family: 'Oswald';
}

.scale .current span:after{
	
	counter-reset: variable var(--current-count);
    content: counter(variable);

}

.scale .current{
	position: relative; 
}
.scale .current:before{
	--b-width: 10px;
	left: 50%;
	position: absolute;
	content: "";
	border-bottom: var(--b-width) solid var(--c-red);
	border-left: var(--b-width) solid transparent;
	border-right: var(--b-width) solid transparent;
	transform:translateX(-50%);
	z-index: 2;
	bottom: -6px;
}
.scale .current:after{
	--b-width: 10px;
	left: 50%;
	position: absolute;
	content: "";
	border-bottom: var(--b-width) solid var(--c-blue);
	border-left: var(--b-width) solid transparent;
	border-right: var(--b-width) solid transparent;
	transform:translateX(-50%);
	z-index: 1;
	bottom: 0;
}
.scale{
}

@media (max-width: 1680px) {
	.logo img {
		/* width: 335px; */
	}
}


@media (max-width: 1369px) {
	.dabei {
		--ccount: 5;
	}
}

@media (max-width: 1200px) {
	.logo img {
		/* width: 300px; */
	}

	.intro h1 {
		font-size: 60px;
	}

	h2 {
		font-size: 2.5em;
	}

	.underline {
		/* margin-top: -2.5em; */
	}

	.owl-carousel .owl-nav button.owl-prev {
		/* left: -2em; */
	}

	.owl-carousel .owl-nav button.owl-next {
		/* right: -2em; */
	}
}

@media (min-width: 992px) {
	.navbar {
		display: flex!important;
	}
}

@media (max-width: 991px) {

	
	.scale{
		display: grid;
		width:  100%;
		grid-template-columns: unset;
		grid-template-rows: repeat(24,1fr);
		grid-template-rows: repeat(8,1fr) repeat(16,1fr);
		margin-top: 2em;
	}
	
	.scale>.null{
		grid-column: 1; 
	}
	.scale>.neun{
		grid-row: 9 /  span 6;
		grid-column: 3;
	}
	.scale>.fuenfzehn{
		grid-row: 15 /  span 5;
		grid-column: 3;
	}
	.scale>.voll{
		grid-row: 22 /  span 3;
		grid-column: 3;
	}
	.scale>.neun,
	.scale>.fuenfzehn,
	.scale>.voll{
		text-align: left; 
		padding-left: 1em; 
	}
	.scale .current:before {
		border-bottom: var(--b-width) solid transparent;
		border-right: var(--b-width) solid var(--c-red);
		border-top: var(--b-width) solid transparent;
		top: 6px;
		bottom: auto;
		right: -8px;
		left: auto;
		transform: none;
	}
	.scale .current:after {
		left: 50%;
		position: absolute;
		content: "";
		border-bottom: var(--b-width) solid transparent;
		border-right: var(--b-width) solid var(--c-blue);
		border-top: var(--b-width) solid transparent;
		transform: translateX(-50%);
		top: 6px;
		bottom: auto;
		right: -2px;
		left: auto;
		transform: none;
	}

	.scale>.bar{
		grid-row: 1 / 23;
		grid-column: 2;
		border: 15px solid var(--c-blue);
		border-radius: 10px;
	}
	.scale>.barcurrent{
		grid-row: 1 / calc(1 + var(--current-count));
		grid-column: 2;
		border: 10px solid var(--c-red);
		margin-left: 2px;
		border-radius: 6px;
		margin: 5px;
	}

	.scale .current {
		grid-column: 1;
		grid-row: var(--current-count) / span 2;
		padding-bottom: 0;
		padding-right: 1em;
		text-align: right;
	}
	.scale .current br {
		display: none; 
	}
	.scale h3 {
		margin-top: 5px;
	}


	
	.scale>.neun:after,
	.scale>.fuenfzehn:after,
	.scale>.voll:after{
		--b-width: 10px;
		position: absolute;
		content: "";
		border-bottom: var(--b-width) solid transparent;
		border-left: var(--b-width) solid var(--c-blue);
		border-top: var(--b-width) solid transparent;
		transform:translateX(-50%);
		z-index: 1;
		top: 6px;
		left: -2px;
		transform: none;
	}
	
	.scale>.neun.done:before,
	.scale>.fuenfzehn.done:before,
	.scale>.voll.done:before{
		--b-width: 10px;
		position: absolute;
		content: "";
		border-top: var(--b-width) solid transparent;
		border-left: var(--b-width) solid var(--c-red);
		border-bottom: var(--b-width) solid transparent;
		top: 6px;
		transform:none;
		left: -6px; 
		z-index: 2;
	}






	
	.counterbox {
		padding: 15px;
		padding-bottom: 20vw;
	}

	.logo {
		padding: 10px 25px;
		margin-left: auto;
		margin-right: auto;
	}

	h1 {
		margin: 15px 3px;
	}

	.navbar {
		display: none;
		position: absolute;
		width: 100%;
		top: 100%;
		background-color: #101010;
		margin: 0;
		left: 0;
		align-items: center;
		justify-content: flex-start;
		padding: 10px;
		border-top: 1px solid #252525;
		box-shadow: 0px 4px 12px #0004;
		max-height: 80vh;
		max-height: 80dvh;
		overflow-y: auto;
	}

	.navbar li {
		text-align: center;
	}

	.navbar li a {
		padding: 10px;
	}
	.navbar a:hover {
		scale: initial;
	}
	nav button {
		display: flex;
	}

	.wegebox .number {
		font-size: 100px;
	}


	.boxbox .item .wrapper {
		position: relative;
		margin-bottom: 1em;
		padding: 1em 0;
		display: flex;
		flex-direction: row;
		padding: 0;
	}

	.boxbox .item .wrapper img {
		position: relative;
		opacity: 1!important;
		transform: none!important;
		top: auto;
		left: auto;
		margin: 1em;
	}

	.boxbox .item .wrapper p {
		position: relative;
		opacity: 1;
		transform: scale(1);
		text-align: left;
		margin: 15px;
	}
	.dabei {
		--ccount: 3;
	}
}

@media (max-width: 767px) {
	.intro h1 {
		font-size: 50px;
	}

	h2 {
		font-size: 2.25em;
	}

	.underline {
		/* margin-top: -2em; */
	}


	a.join {
		bottom: 1em;
		right: 1em;
		font-size: 1.25em;
	}

	.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
		opacity: 1;
		height: 2.5em;
		width: 2.5em;
		transform: none;
		/* top: 100%; */
		/* margin-top: 1em; */
	}

	.owl-carousel .owl-nav {
		display: flex;
		justify-content: center;
		gap: 2em;
		margin-top: 2em;
	}

	.owl-carousel .owl-nav button.owl-prev {
		position: relative; 
	}

	.owl-carousel .owl-nav button.owl-next {
		transform: scaleX(-1);
		position: relative; 
	}

	.wegebox .number {
		/* display: none */
		order: 0;
	}

	.wegebox h3 {
		order: 1;
	}

	.wegebox .wrapper div {
		margin-top: 0;
		order: 2;
		width: 100%;
	}

	.wegebox .wrapper {
		flex-direction: column;
	}

	.vsbox .overlay {
		text-align: center!important;
	}

	.supcar {
		padding: 0;
	}
	.factcar {
	
		padding: 0;
	}
}

@media (max-width: 550px) {
	.scale p{
		font-size: 0.8em; 
	}
	.scale h3{
		/* float: left; */
		margin-right: 1em
	}
	
	.dabei {
		--ccount: 1;
	}

	.dabei .items>div{
		position: relative;
		width: 100%;
		padding: 0 1em;
	}
	.dabei .items>div:nth-child(3n+2){
		left: 0;
	}
	.dabei .items>div:nth-child(3n+3){
		left: 0;
	}
	.dabei .items:before,
	.dabei .items:after{
		width: 0;
	}
	.supcar {
		padding: 0;
	}
	.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev {
		position: relative;
		top: auto;
		right: auto;
		left: 0;
		/* height: 100%; */
		/* border: 1px solid blue; */
		/* margin-top: 2em; */
		background-color: transparent;
	}
}
@media (max-width: 480px) {
	nav .logos img:nth-child(2) {
		height: 55px;
	}


	.wegebox .number {
		display: block;
		/* width: 120px; */
		text-align: center;
		order: 2;
	}

	.wegebox .wrapper div {
		margin-top: 0.5em;
		text-align: left;
		width: 70%;
	}

	.wegebox h3 {
		text-align: left;
		order: 1;
	}

	.wegebox .wrapper {
		flex-direction: row;
	}

	nav .logos img:nth-child(1) {
		height: 50px;
		margin-right: 15px;
	}


	.boxbox .item .wrapper {
		position: relative;
		margin-bottom: 1em;
		padding: 1em 0;
		display: block;
		flex-direction: row-reverse;
		padding: 0;
	}

	.boxbox .item .wrapper img {
		position: relative;
		opacity: 1!important;
		transform: none!important;
		top: auto;
		left: auto;
		margin: 1em;
		float: left;
		width: 33%;
	}

	.boxbox .item .wrapper p {
		position: relative;
		opacity: 1;
		transform: scale(1);
		text-align: left;
		margin: 15px;
		/* float: left; */
		display: block;
	}
	.dabei .itemcontent>div {
		padding: 0.5em;
	}
}