@charset 'utf-8';

/* Startseite */

.js body {
width: 100%;
height: 100%;
}

.js .start.animation article,
.js .start.animation header nav {
display: none;
}

/* 
.js .start header nav ul.main {
position: absolute;
left: 0;
}
 */

.js .animation header h1 {
display: none;
position: relative;
top: 152px;
left: 340px;
}

.start div.article {
position: relative;
width: 928px;
margin: 0 auto;
}

.start article {
text-align: center;
padding: 0 0 0 32px;
}

.js .start article {
padding: 0 0 0 32px;
}

.start article section a {
border-bottom: none;
}

.start article section {
display: inline-block;
text-align: left;
width: 308px;
margin: 0 32px 32px 0;
padding: 0;
background-color: rgb(138,173,229);
}

.start article section a {
display: block;
width: 280px;
padding: 6px 12px 4px 16px;
color: white;
}

.start article section a:hover {
background: rgb(255,210,100);
color: rgb(125,164,226);
}

/* 
.start article section a {
text-align: left;
display: block;
margin: 16px 4px 8px 0;
padding: 4px 8px 4px 8px;
background-color: rgb(255,210,100);
color: rgb(65,102,155);
}

.start article section a:hover {
background: white;
}
 */

.start article section h2 {
margin: 0 0 16px 0;
}

.start article section h3 {
font-weight: bold;
font-size: 18px;
line-height: 24px;
margin: 8px 0;
}

.js .start div.himmel {
display: block;
background: rgb(255,210,100);
position: absolute;
width: 100%;
height: 400px;
overflow: hidden;
}

.js .start div.sonne {
display: block;
width: 48px;
height: 48px;
-webkit-border-radius: 24px;
border-radius: 24px;
background: white;
position: absolute;
top: 400px;
left: 16px;
}

div.startgrafik {
position: relative;
height: 160px;
background-image: url('../img/pfeil.svg');
background-repeat: no-repeat;
background-position: 200px 0;
}

.no-svg div.startgrafik {
background-image: url('../img/pfeil.png');
}

div.startgrafik div {
position: absolute;
display: block;
width: 48px;
height: 48px;
-webkit-border-radius: 24px;
border-radius: 24px;
background: rgb(255,210,100);
-webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
}

article section a:hover h3:after {
content: ' ›';
}

#bewerber {
top: 64px;
left: 136px;
-webkit-transition-property: all;
-webkit-transition-duration: 600ms;
-webkit-transition-timing-function: cubic-bezier(.5,0,.5,1.2);
-moz-transition-property: all;
-moz-transition-duration: 600ms;
-moz-transition-timing-function: cubic-bezier(.5,0,.5,1.2);
transition-property: all;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(.5,0,.5,1.2);
}

#bewerber.rechts {
left: 540px;
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.35);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.35);
}

#ag1 {
top: 64px;
left: 476px;
}

#ag2 {
top: 64px;
left: 604px;
}

#ag3 {
top: 64px;
left: 668px;
}

div.claim {
display: inline-block;
margin: 32px 0 32px 16px;
}

div.claim p {
text-align: left;
font-size: 18px;
line-height: 24px;
}


/* ############# Screens bis 976px ############# */
@media only screen and (max-width: 976px) {

  .start article,
  .js .start article {
  text-align: left;
  padding: 0;
  }
  
  #bewerber {left: 0px;}
  #bewerber.rechts {left: 404px;}
  #ag1 {left: 340px;}
  #ag2 {left: 468px;}
  #ag3 {left: 532px;}
  
  div.startgrafik {
  background-position: 64px 0;
  }
  
  .start article section.start {
  margin: 0 0 32px 0;
  }
  
  .start div.article {
  width: auto;
  margin: 0;
  }

}

/* ############# Screens bis 712px ############# */
@media only screen and (max-width: 712px) {

  .start article section {
  margin: 0 16px 16px 0;
  }

  .start article section {
  /* width: 50%; */
  width: -webkit-calc(50% - 8px);
  width: calc(50% - 8px);
  }
  
  .start article section a {
  width: auto;
  }
  
  .start article section * {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }
  
  div.startgrafik,
  div.startgrafik * {
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -moz-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
  }
  
  div.startgrafik {
  width: 125%;
  margin-bottom: -16px;
  }

}


/* ############# Screens bis 976px ############# */
@media only screen and (max-width: 976px) {

  div.himmel {
  display: none!important;
  }
  
  .js .start.animation article,
  .js .start.animation header nav,
  .js .animation header h1 {
  display: block;
  }
  
  .js .animation header h1 {
  position: static!important;
  }

}

/* ############# Screens bis 488px ############# */
@media only screen and (max-width: 488px) {

  div.startgrafik {
  margin-bottom: -64px;
  width: 150%;
  }

  div.startgrafik,
  div.startgrafik * {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  }
  

}