@font-face {font-family:'Lexend Deca';
 src:local('Lexend Deca Regular'),local('LexendDeca-Regular'),url('./fonts/lexend-deca-v1.woff') format('woff');}

@font-face {font-family:'Raleway';
  src: local('Raleway'),local('Raleway-Regular'),url('./fonts/raleway-v14-latin-regular.woff');}


@font-face {font-family:'FontAwesome';font-style:normal;font-weight:900;src:url("./fonts/fa-solid-900.woff");}
/* @font-face {font-family:'Brands';font-style:normal;font-weight:normal;src:url("./fonts/fa-brands-400.woff");} */

  
body {
	height: 100%;
	background: #ffffff;
	font-size:16px;
	font-family:"Lexend Deca",sans-serif;
	/* text-transform:lowercase; */
	margin: 0em;
	padding: 0em;
	color:#222222;
}

html {
height:100%;
scroll-behavior:smooth;
}	

.fas {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900; }
  
/*.fab {font-family:'Brands';}*/  
  
/*.fa-youtube:before{content:"\f167";}*/
.fa-handshake:before{content:"\f2b5";}
.fa-chart-bar:before{content:"\f080";}
.fa-tasks:before{content:"\f0ae";}
.fa-envelope-open-text:before{content:"\f658";}
.fa-arrow-circle-right:before{content:"\f0a9";}
.fa-arrow-circle-down:before{content:"\f0ab";}
.fa-angle-down:before{content:"\f107";}
.fa-project-diagram:before{content:"\f542";}
.fa-brain:before{content:"\f5dc";}
.fa-code:before{content:"\f121";}
.fa-chalkboard-teacher:before{content:"\f51c";}
.fa-chart-line:before{content:"\f201";}
.fa-running:before{content:"\f70c";}
.fa-map-marked-alt:before{content:"\f5a0";}
.fa-code-branch:before{content:"\f126";}
.fa-tachometer-alt:before{content:"\f3fd";}
.fa-list-ol:before{content:"\f0cb";}
.fa-fire-alt:before{content:"\f7e4";}
.fa-graduation-cap:before{content:"\f19d";}
.fa-diagnoses:before{content:"\f470";}
.fa-award:before{content:"\f559";}
.fa-flag-checkered:before{content:"\f11e";}
.fa-tools:before{content:"\f7d9";}
.fa-yin-yang:before{content:"\f6ad";}

* {
	box-sizing: border-box;
} 

a {text-decoration: none;color:#222222;}


p {font-size:18px;margin-top:0px;}
h1 {font-size:40px;font-family:"Raleway",sans-serif;font-weight: normal;}
h2 {font-size:32px;font-family:"Raleway",sans-serif;font-weight: normal;}
h3 {font-size:30px;font-family:"Raleway",sans-serif;font-weight: normal;}
h4 {font-size:26px;font-weight: normal;}
h5 {font-size:20px;font-weight: normal;text-transform:uppercase;}

input {
font-family:"Lexend Deca",sans-serif;
    font-size: 18px;
    line-height: 35px;
    width: 350px;
    background: #eeeeee;
    border: 2px solid #888888;
    }
    

input[type="submit"]{
    padding: 5px 25px;
    margin-bottom: 50px;
    width: auto;
    cursor:pointer;
}

#regularcheckbox {
	display:inline;
	width: 20px;
	}

.hintergrund{
background-color:#fab030;
color: #222222;
}


.intro{
	background-color:#444444;
	width: 100%;
	height: 100%;
	position: relative;
	overflow:hidden;
	}
	
.welcomefirst{
	height: 100%;
	background-image:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0)60%,rgba(0,0,0,0.4)70%,rgba(0,0,0,0.4)85%,rgba(0,0,0,0)),url("wald.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity:0;
	animation: lars1 3s linear 1s forwards,lars2 20s linear 2s infinite alternate;
}
@keyframes lars1 {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes lars2 {
0% {transform:scale(1) translate(0px,0px);}
100% {transform:scale(1.2) translate(30px,-50px);}
}

.headerfirst {
	position: absolute;
	bottom: 4%;
	left: 25%;
	right: 25%;
	padding:20px 10px;
	font-family:"Raleway",sans-serif;
	text-align: center;
	color: white;
	font-size: 30px;
	letter-spacing:-3px;
}
.headerfirst a{
color:#fab030;
font-size:40px;
}

.welcome{
	height: 100%;
	background-image: url("design.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display:flex;
	align-items:center;
}

.layer {
position: absolute;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(250,250,250,0.8),rgba(250,250,250,0) 10%,rgba(250,250,250,0));
}

.header {
	margin-left:10%;
	padding-top:20px;
	text-align: center;
	color: white;
	font-family:"Raleway",sans-serif;
	font-size: 24px;
	width: 400px;
	background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.2)90%,rgba(0,0,0,0));
	border-radius:5px;
}
.header b{padding:10px;}


.headercontent {
position:relative;
z-index:1;
height:50px;
font-size: 22px;
line-height: 50px;
margin-top: 15px;
border-radius: 0 0 5px 5px;
display:flex;
justify-content:center;
align-items:center;
}

.headercontent i{
font-size: 26px;
margin: 0px 10px;
animation: dip 1.5s linear infinite;
}

@keyframes dip{
0% {transform:translateY(0px);}
68% {transform:translateY(0px);}
76% {transform:translateY(8px);}
84% {transform:translateY(0px);}
92% {transform:translateY(8px);}
100% {transform:translateY(0px);}
}

#logo{
position:absolute;
transition:0.5s;
top:2px;
left:5px;
z-index:5;
}

#navbar{
position:absolute;
top:0;
left:0;
right:0;
height:70px;
display:flex;
justify-content:flex-end;
font-size:18px;
color:white;
background:linear-gradient(180deg,rgba(0,0,0,0.8),rgba(0,0,0,0.4)75%,rgba(0,0,0,0));
padding:0px 50px;
transition:0.4s linear;
}
#navbar a{
color:white;
}

.navmobile{
display:none;
}

.navlinktop{
text-align:center;
padding-top: 30px;
margin:0 15px;
cursor:pointer;
overflow:hidden;
}

.navlinktop:hover .balken{
transform:translatex(0px);
}

.dropdown{
margin:0 15px;
text-align:center;
padding-top: 30px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
}

.topdrop{
display:flex;
}

.arrowdrop{
margin-left:6px;
}

#nlcontainer{
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.4)20%,rgba(0,0,0,0.6));
padding:10px 0px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:3px;
position:absolute;
/* display:none;*/
visibility:hidden;
transform:scaley(0);
transform-origin:50% 0%;
transition:transform 0.4s linear, visibility 0s;
}

.navlink{
font-size:16px;
padding: 10px 0px;
overflow:hidden;
}
.navlink:hover .balken{
transform:translatex(0px);
}

.balken{
height:2px;
background:#fab030;
transform:translatex(-101%);
transition:0.5s;
}

#burger {
display: none;
}

.strich1,.strich2,.strich3 {
height: 3px;
width: 30px;
margin: 5px;
border-radius: 2px;
background: #ffffff;
}
.strich1{
transition: transform 0.5s;
transform-origin: 12.5%;
}
.strich2 {
transition: opacity 0.5s;
}
.strich3 {
transition: transform 0.5s;
transform-origin: 12.5%;
}
/*ab hier ersetze ich mal input[type=checkbox] mit der id hackedchkbox - das klappt weil es im html vorher definiert wird*/
#hackedchkbox{
    display: none;
}

#subcheckbox{
    display: none;
}

#subcheckbox:checked ~ #nlcontainer{
transform:scaley(1);
visibility:visible;
position:relative;
}

#subcheckbox:checked ~ .dropdown .arrowdrop{
transform:rotate(180deg);
}

/*
@keyframes flow01 {
0%{opacity:0;}
100%{opacity:1;}
}
*/

@keyframes flow01 {
0%{transform:translatey(-1200px);}
100%{transform:translatey(0px);}
}
@keyframes flow02 {
0%{transform:translatey(-1200px);}
100%{transform:translatey(0px);}
}
@keyframes flash {
0%{opacity:0;}
1%{opacity:1;}
2%{opacity:0;}
9%{opacity:0;}
10%{opacity:1;}
11%{opacity:0;}
12%{opacity:1;}
13%{opacity:0;}
29%{opacity:0;}
30%{opacity:1;}
31%{opacity:0;}
49%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
71%{opacity:0;}
72%{opacity:1;}
73%{opacity:0;}
91%{opacity:0;}
92%{opacity:1;}
96%{opacity:1;}
97%{opacity:0;}
98%{opacity:1;}
99%{opacity:0;}
100%{opacity:1;}
}


.t00{display:inline-block;}
.t01{display:inline-block;animation:flow01 3.2s linear .9s forwards;transform:translatey(-2000px);}
.t02{display:inline-block;animation:flow02 3.1s linear 1.5s forwards;transform:translatey(-2000px);}
.t03{display:inline-block;animation:flow01 4.2s linear 1.2s forwards;transform:translatey(-2000px);}
.t04{display:inline-block;animation:flow02 2.4s linear 2s forwards;transform:translatey(-2000px);}
.t05{display:inline-block;animation:flow01 1.3s linear 1.7s forwards;transform:translatey(-2000px);}
.t06{display:inline-block;animation:flow02 4.1s linear 1s forwards;transform:translatey(-2000px);}
.t07{display:inline-block;animation:flow01 2.7s linear 2s forwards;transform:translatey(-2000px);}
.t08{display:inline-block;animation:flow01 2.4s linear 1.6s forwards;transform:translatey(-2000px);}
.t09{display:inline-block;animation:flow02 3.1s linear 0.6s forwards;transform:translatey(-2000px);}
.t10{display:inline-block;animation:flow01 2.5s linear 1.4s forwards;transform:translatey(-2000px);}
.t11{display:inline-block;animation:flow02 1.6s linear 1.8s forwards;transform:translatey(-2000px);}
.t12{display:inline-block;animation:flow02 2.1s linear 1s forwards;transform:translatey(-2000px);}
.t13{display:inline-block;animation:flow01 1.1s linear 2.2s forwards;transform:translatey(-2000px);}
.t14{display:inline-block;animation:flow01 2.1s linear 1.3s forwards;transform:translatey(-2000px);}
.t15{display:inline-block;animation:flow02 3.6s linear 1.5s forwards;transform:translatey(-2000px);}
.t16{display:inline-block;animation:flow01 4s linear 1.2s forwards;transform:translatey(-2000px);}
.t17{display:inline-block;animation:flow01 2.8s linear 2.1s forwards;transform:translatey(-2000px);}
.t18{display:inline-block;animation:flow02 3.1s linear 2.3s forwards;transform:translatey(-2000px);}
.t19{display:inline-block;animation:flow02 2.2s linear 1.7s forwards;transform:translatey(-2000px);}
.t20{display:inline-block;animation:flow01 3.1s linear 1.5s forwards;transform:translatey(-2000px);}
.t21{display:inline-block;animation:flow02 4.1s linear 1.1s forwards;transform:translatey(-2000px);}
.t22{display:inline-block;animation:flow01 3.3s linear 2s forwards;transform:translatey(-2000px);}
.t23{display:inline-block;animation:flow01 1.1s linear 1.5s forwards;transform:translatey(-2000px);}
.t24{display:inline-block;animation:flow01 2.3s linear 2.1s forwards;transform:translatey(-2000px);}
.t25{display:inline-block;animation:flow02 3s linear 1s forwards;transform:translatey(-2000px);}
.t26{display:inline-block;animation:flow02 4.1s linear 1.4s forwards;transform:translatey(-2000px);}
.t27{display:inline-block;animation:flow02 3.4s linear 1.4s forwards;transform:translatey(-2000px);}
.t28{display:inline-block;animation:flow01 2.1s linear 2s forwards;transform:translatey(-2000px);}
.t33{animation:lars1 4s 6s forwards;opacity:0;letter-spacing:initial;margin-top:10px;}
.t34{animation:flash 3s 7s forwards;opacity:0;margin:15px;}


.abstandhalterresponsive {
position:relative;
width: 100%;
height: 40px;
}

.vanish{}

.textbox {
width: 80%;
margin: 50px auto;
text-align: justify;
font-size: 20px;
}

.hauptteil {
position: relative;
background: #ffffff;
text-align: center;
margin-bottom: 250px;
}

.modulecontainer {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.abschnitticons{
padding: 50px 20px;
text-align: center;
background: white;
overflow-x:hidden;
}

.icons{
font-size:50px;
color:#fab030;
position:relative;
height: 40vh;
}

.motto{
position:absolute;
top:40%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color: #222222;
text-align:center;
z-index:1;
}


.jumpicon{
position: absolute;
width: 72px;
height: 72px;
font-size: 40px;
border:4px solid #fab030;
border-radius: 50%;
display: flex;
justify-content: center;
align-items:center;
animation: trabant linear infinite;
}

.notiz{
position:absolute;
top:-20px;
left:-50px;
padding:4px;
background:white;
color:#222222;
font-size:18px;
border:2px solid #222222;
display:none;
}

.jumpicon:hover {
animation-play-state: paused;
cursor:grab;
}

.jumpicon:hover .test{
display:block;
}

@keyframes trabant {
from { transform: rotate(0deg) translateX(100px) rotate(0deg);}
to{ transform: rotate(360deg) translateX(100px) rotate(-360deg);}
}


.abschnittchallenge{
position:relative;
width:100%;
background-image:url(webdesign.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center left;
}
.abschnittchallenge h2{
color:white;
text-shadow: 0px 0px 2px #222222;
padding: 100px 20px 60px 20px;
}

.containerchallenge {
width: 100%;
height: 400px;
border:1px solid #888888;
display:flex;
}

.modulechallenge{
flex:33.3%;
padding: 20px;
color: white;
text-shadow:0px 0px 2px #222222;
font-size:22px;
border:1px solid #888888;
display: flex;
justify-content: center;
align-items:center;
}

.abschnittabout {
padding:30px 0px;
background: #eeeeee;
border-top:1px solid #eeeeee;
}
.abschnittabout h2{
text-align: center;
}


.triwhite,.trigrey{
position:absolute;
top:0px;
left:50%;
margin-left:-25px;
width:0;
height:0;
border-left:25px solid transparent;
border-right:25px solid transparent;
}

.triwhite{border-top:25px solid #ffffff;}
.trigrey{border-top:25px solid #eeeeee;}

.abschnittkompetenzen {
padding: 50px 20px;
}
.flipcontainer {
perspective:1000px;
}
.flipcontainer:hover .moduleflip {
transform:rotatex(180deg);
}
.moduleflip {
position:relative;
width: 300px;
height: 300px;
margin: 30px 20px;
transition:0.5s;
transform-style:preserve-3d;
}
.moduleflip i{
font-size:80px;
}
.moduleflip h3{
margin-bottom:0;
}
.modulefront,.moduleback{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
padding: 20px;
display:flex;
justify-content: center;
align-items:center;
transform: rotatex(0deg);
/* backface-visibility:hidden; */
-webkit-backface-visibility: hidden;
}
.moduleback{
background: #222222;
color: #fab030;
transform: rotatex(180deg);
}


.modulecontainernetz {
background-image: url("netz.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
padding:50px 0px;
margin: 50px 0px;
display: flex;
justify-content: center;
flex-wrap: wrap;
overflow:hidden;
}

.moduleziele {
width: 300px;
height: 300px;
margin: 15px;
padding: 20px;
Border-Radius:50%;
display:flex;
justify-content: center;
align-items:center;
flex-shrink:0;
}
.moduleziele i{
font-size: 60px;
}

.abschnittkunden{
padding: 50px 0px;}

.customercontainer {
height: calc(20vw);
display: flex;
justify-content: center;
}

.modulecustomer {
width: 20%;
height: 100%;
padding: 20px;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
display: flex;
justify-content: center;
align-items:center;
}

.customerslide{
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items:center;
}

.customerslide img{
position: absolute;
opacity: 0;
width: 100%;
height: auto;
animation: fade 30s infinite;
}

.customerslide img:nth-child(1) { animation-delay: 0s; }
.customerslide img:nth-child(2) { animation-delay: 3s; }
.customerslide img:nth-child(3) { animation-delay: 6s; }
.customerslide img:nth-child(4) { animation-delay: 9s; }
.customerslide img:nth-child(5) { animation-delay: 12s; }
.customerslide img:nth-child(6) { animation-delay: 15s; }
.customerslide img:nth-child(7) { animation-delay: 18s; }
.customerslide img:nth-child(8) { animation-delay: 21s; }
.customerslide img:nth-child(9) { animation-delay: 24s; }
.customerslide img:nth-child(10) { animation-delay: 27s; }

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  10%  { opacity: 1; }
  15%  { opacity: 0; }
  100% { opacity: 0; }
}

.abschnittwarum{
display:flex;
}

.warumimage{
flex:40%;
height:auto;
background-image: url("heroimg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.warumtext{
background: #eeeeee;
padding-top:20px;
flex:60%;
}

.modulewarum{
position: relative;
margin: 0px 100px;
text-align:left;
padding: 15px 5px 40px 50px;
border-left: 1px dashed #cccccc;
}
.modulewarum h5{
margin-top:10px;
margin-bottom: 10px;
}

.warumicon{
position: absolute;
width: 80px;
height: 80px;
font-size: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items:center;
top:0px;
left:-40px;
}

.flyby{
transform: scale(0);
}

.visible{
animation: plop .6s linear forwards;
}

@keyframes plop{
0% {transform: scale(0);}
40% {transform: scale(1.5);}
60% {transform: scale(.8);}
80% {transform: scale(1.2);}
100% {transform: scale(1);}
}


.transdelay1{
animation-delay: .5s;
}

.transdelay2{
animation-delay: 1s;
}

.abschnittcontact {
position:relative;
background: #eeeeee;
font-size: 18px;
padding: 50px 10%;
}
.abschnittcontact h5{
margin-top: 50px;
}

.modulecontactcontainer {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.modulecontact {
padding: 15px;
text-align: left;
}

.abschnitttrend {
margin: 30px;
padding: 20px;
color: grey;
border: 2px dashed grey;
}

.moduletrend {
width: 220px;
margin: 15px;
padding-right: 5px;
font-size: 15px;
text-align: right;
border-right: 2px solid #fab030;
}
.moduletrend em{
font-family:"Righteous",sans-serif;
color: #fab030;
text-shadow:2px 2px 2px #222222;
font-style: normal;
font-size: 50px;
}
.moduletrend em b{
font-size: 100px;
}


.safarihack {
height:1px;
background:transparent;
}

.fuhta {
width:100%;
height: 252px;
position: fixed;
bottom:0px;
text-align: center;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
z-index: -1;
}

.downlinks {
display: flex;
justify-content: center;
font-size: 16px;
}

.downlinks a {
	padding: 20px;
	color:#222222;
}

.downlinks a:hover {color: #000000;}

.copyright {
margin: 20px 0px;
}

#lifeinstcookie {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
border: 2px solid #222222;
text-align: center;
color: white;
padding: 1em;
line-height: 1.1em;
margin: 1.5em;
border-radius: 10px;
z-index: 10;
}

#lifeinstcookie a {
color:#ffffff;
}

#lifeinstcookie a.button {
cursor: pointer;
padding: 3px 7px;
border: 1px solid white;
border-radius: 4px;
color:#222222;
}


@media screen and (max-width: 500px) {
     
input {width: 280px;}


.vanish{display: none;}

.headerfirst {
left: 2%;
right: 2%;
font-size: 26px;
}

.moduleflip {
width: 260px;
height: 260px;
margin: 20px 15px;
}

.containerchallenge {
height:auto;
border:none;
flex-direction:column;
}

.modulechallenge{
padding: 50px 20px;
border:none;
}

.customercontainer {
height: calc(30vw);
}

.modulecustomer {width: 30%;}

.customerslide{
width: 280px;
height: 280px;
}

.abstandhalterresponsive {height: 20px;}

.modulecontainernetz {
background-image: url("netz90.svg");
margin: 10px 0px;
}

.downlinks {flex-direction: column;}

.downlinks a{padding: 12px;}


p {font-size:16px;}
h1 {font-size:28px;}
h2 {font-size:24px;}
h3 {font-size:22px;}
h4 {font-size:20px;}
h5 {font-size:18px;}


.icons{font-size: 40px;}

.jumpicon{
width: 64px;
height: 64px;
font-size: 34px;
border:3px solid #fab030;
}

.headercontent{font-size:18px;}

.moduleziele {
width: 260px;
height: 260px;
margin: 12px;
padding: 16px;
}

.modulewarum{margin: 0px 50px;}

.transdelay1,.transdelay2
{transition-delay: 0s;}

.welcome{justify-content: center;}

.header {
width: 90%;
margin: 0 auto;
font-size: 20px;
}

#navbar{flex-direction:column;
align-items:flex-end;
justify-content:flex-start;
background:none;
padding:0;
z-index:9;
position:fixed;
opacity:0;
transform:translatex(500px);
transform-origin: 0% 0%;
transition:0.6s;
z-index:2;
top:50px;
}

.quer{
position:absolute;
top:-150px;
right:-300px;
width:400px;
height:1500px;
transition:1s;
transform-origin:50% 80%;
background:rgba(0,0,0,0.8);
z-index:-1;
}


#nlcontainer{
background:none;
}

.navlinktop,.dropdown{
padding:10px 0px;
text-align:right;
}

#logo{
position:fixed;
}

#burger{
display:block;
background: rgba(0,0,0,0.6);
position:fixed;
top: 10px;
right: 10px;
padding:7px 5px;
width: 50px;
height: 44px;
cursor: pointer;
transition: 0.5s;
border-radius:3px;
z-index:5;}


#hackedchkbox:checked ~ #navbar{
    opacity:1;
    top:60px;
    transform:translatex(0);
    }
    
#hackedchkbox:checked ~ #navbar .quer{
    transform:rotate(-7deg);}
#hackedchkbox:checked + #burger .strich1{
    transform:rotate(45deg);
    }
#hackedchkbox:checked + #burger .strich2{
    opacity:0;}
#hackedchkbox:checked + #burger .strich3{
    transform:rotate(-45deg);
    }
#hackedchkbox:checked + #burger{
	background:none;
	transform:translatey(0) !important;
    }



}

@media screen and (max-width: 340px) {


.modulewarum{
padding: 15px 0px 40px 40px;
margin: 0px 25px 0px 35px;
}

.warumicon{
width: 70px;
height: 70px;
font-size: 38px;
left:-35px;
}

.headercontent{font-size:17px;}


.moduleziele {
width: 250px;
height: 250px;
margin: 10px;
padding: 15px;
}


}