@charset "UTF-8";
/* CSS Document */

/* exo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/exo-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/exo-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/exo-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/exo-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color-light-shades: #E9ECE5;
	--color-light-accent: #878786;
	--color-main-brand: #E94E1A;
	--color-dark-accent: #B16D43;
	--color-dark-shades: #000000;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
	color: var(--color-light-shades);
}

.light-shades{
	background-color: var(--color-light-shades);
	color: var(--color-dark-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
	color: var(--color-dark-shades);
}

.dark-accent{
	background-color: var(--color-dark-accent);

}

/* ENDE Allgemeine Einstellungen für Farben */


.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

#body{
	font-family: 'Exo', "sans-serif";
}

#background{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: -10;
	position: relative;
	top: 0;
}

#background img{
	width: 100vw;
	height: auto;
}

#background2{
	width: 100vw;
	height: 70vh;
	overflow: hidden;
	z-index: -10;
	position: relative;
	top: 0;
}

#background2 img{
	width: 100vw;
	height: auto;
}

#bg-color{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	z-index: -5;
	background: rgb(0,0,0);
	background: linear-gradient(-20deg, rgba(0,0,0,0) 50%, rgba(135,135,134,0.95) 50%);
	
		animation: bgctransform 0.05s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
}

@keyframes bgctransform {
  to {	
	opacity: 0;
  }
}

#logo{
	width: 40vw;
	position: absolute;
	right: 30vw;
	top: 10vh;
	z-index: 100;
	
		animation: logotransform 0.01s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
}

@keyframes logotransform {
  to {
    	width: 10vw;
		position: fixed;
		right: 90vw;
		top: 2vh;
	  	left: 1vh;

  }
}

#logo2{
    	width: 10vw;
		position: fixed;
		right: 90vw;
		top: 2vh;
	  	left: 1vh;
		z-index: 100;
}


#mainmenu{
		height: 12vh;
		animation: menutransform 0.02s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
	
		z-index: 50;
	
		font-family: 'Exo', "sans-serif";
}

#mainmenu .navbar{
	margin-top: 2vh;
}

#mainmenu2{
		height: 12vh;
		background-color: var(--color-light-accent);
		z-index: 50;
		font-family: 'Exo', "sans-serif";
}

#mainmenu2 .navbar{
	margin-top: 2vh;
}

@keyframes menutransform {
  to {
    	background-color: var(--color-light-accent);
	  	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
		box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);  

  }
}

#submenu{
	font-family: 'Exo', "sans-serif";
}

.submenu-item{
	padding: .4vh;
	padding-left: .2vh;
	padding-right: .2vh;
	background-color: var(--color-dark-shades);
	transition: .3s;
}

.submenu-item:hover{
	padding: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: var(--color-dark-shades);
}

.submenu-item-inner{
	padding: 3vh;
	text-align: center;
	font-size: 1.2em;
}

#intro{
	font-family: 'Exo', "sans-serif";
	padding: 20vh;
	padding-right: 40vh;
	padding-bottom: 0;
}

#intro h1{
	font-weight: 900;
	font-size: 3.5em;
	margin-bottom: 5vh;
}

#intro h2{
	font-weight: 400;
}

#challengeinfos{
	padding: 10vh;
	position: relative;
	font-family: 'Exo', "sans-serif";
}

#challengeinfos .info-img{
	border-radius: 20px;
	overflow: hidden;
	height: 80vh;
}

#challengeinfos .info-img:hover{
	opacity: 0.9;
}

#challengeinfos .info-text{
	position: absolute;
	right: 10vw;
	bottom: 20vh;
	text-align: right;
	background: rgba(255,255,255,.8);
	padding: 2vh;
}

#challengeinfos .info-text h3{
	font-weight: 900;
	
}

#news{
	padding: 10vh;
	font-family: 'Exo', "sans-serif";
}

#news h3{
	font-weight: 600;
}

#news .newsitem1-pic{
	border-radius: 10px;
	overflow: hidden;
}

#news .newsitem1-text{
	padding: 5vh;
	padding-top: 0;
}

#othernews{
	margin-top: 10vh;
	font-family: 'Exo', "sans-serif";
}

#othernews .newsitem2{
	padding: 1vh;
}

#othernews .newsitem2:hover .newsitem2-pic{
	opacity: 0.9;
}

#othernews .newsitem2-pic{
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 2vh;
}

#sponsoren{
	padding: 10vh;
	font-family: 'Exo', "sans-serif";
}

#sponsoren h2{
	font-weight: 900;
}

#footer{
	height: 100vh;
	font-family: 'Exo', "sans-serif";
	padding: 10vh;
}

#footer a{
	color: var(--color-light-shades);
}


/*SUBSEITE*/

#maincontent{
	padding: 5vh;
}

#sidecontent{
	padding: 5vh;
}

#sidecontent-inner{
	min-height: 100vh;
}

/*MOBILE*/

@media (max-width: 768px){
	
	#background{
		width: 100vw;
		height: auto;
	}


	#bg-color{
		width: 100vw;
		height: 50vh;
		position: absolute;
	}
	
	#logo{
		width: 40vw;
		position: absolute;
		right: 30vw;
		top: 10vh;
		z-index: 0;
	
		animation: logotransform 10s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
}

	#intro{
		padding: 2vh;
		padding-bottom: 0;
	}

	#intro h1{
		font-weight: 900;
		font-size: 2.5em;
		margin-bottom: 5vh;
	}
	
	#challengeinfos{
		padding: 2vh;
	}

	#news{
		padding: 5vh;
		font-family: 'Exo', "sans-serif";
	}
	
	#news .newsitem1-text{
		padding: 2vh;
		padding-top: 2vh;
	}
	
	#sponsoren{
		padding: 2vh;
		font-family: 'Exo', "sans-serif";
	}
}