/*===========================Schriften */
@font-face {
  font-family: "Roboto";
  src: url(./fonts/roboto/Roboto-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Roboto-Light";
  src: url(./fonts/roboto/Roboto-Light.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Quicksand";
  src: url(./fonts/roboto/Quicksand-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Quicksand-Bold";
  src: url(./fonts/roboto/Quicksand-Bold.ttf) format("truetype");
  font-style: normal;
  font-weight: bold;
}

@font-face {
 font-family: "Chakra";
 src: url(./fonts/Chakra_Petch/ChakraPetch-Regular.ttf) format("truetype");
 font-style: normal;
 font-weight: normal;
}

@font-face {
 font-family: "Chakra-Bold";
 src: url(./fonts/Chakra_Petch/ChakraPetch-Bold.ttf) format("truetype");
 font-style: normal;
 font-weight: bold;
}
/*===========================Allgemein=============================*/
* {
 font-family: "Roboto";
 color: #AAA9E8;
}

body {
 padding: 0;
 margin: 0;
}

img {
 width: 100%;
 height: auto;
}

a {
 text-decoration: none;
}

.bottom-line {
 border-bottom: 3px solid #AAA9E8;
}

.flex {
 align-items: center;
 display: flex;
}

.ueberschrift {
  font-size: 40px;
}

.text {
 font-size: 20px;
 padding-bottom: 25px;
}

.hintergrund {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
}

.background {
  background-image: linear-gradient(357deg, #09041b 10%, #343262, #09041b 90%);
}

.video_link {
  color: #bdbaf7;
  font-family: "Chakra";
  font-size: 50px;
  text-decoration: none;
  padding: 10px;
  border: 3px solid #bdbaf7;
  border-radius: 15px;
}

.speziell {
  padding-bottom: 40px;
}

#gross {
  font-size: 70px;
}

/*===========================Header================================*/

#header {
 height: 100px;
 background-image: linear-gradient(357deg, #09041b 10%, #343262, #09041b 90%);
 position: fixed;
}

#header .grid-10{
 padding: 0;
}

#header .logo {
 height: 90px;
 width: auto;
 margin-top: 10px;
 float: left;
}

#header .schriftzug {
 height: 70px;
 width: auto;
 margin-top: 20px;
 float: left;
}

#abstand {
 height: 100px;
}

.headerLink {
 font-size: 35px;
 float: right;
 padding: 25px;
}

/*===========================Footer================================*/

#footer {
  height: 100px;
  background-image: linear-gradient(357deg, #09041b 10%, #343262, #09041b 90%);
}

#footer .grid-10{
  padding: 0;
}

#footer .logo {
  height: 90px;
  width: auto;
  margin-top: 10px;
  float: left;
}

#footer .schriftzug {
  height: 70px;
  width: auto;
  margin-top: 20px;
  float: left;
}

.footerLink {
  font-size: 35px;
  float: right;
  padding: 25px;
}

/*===========================Grid System===========================*/
/*===========================insgesamt eine Breite von 10 =========*/
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*='grid-'] {
  float: left;
  min-height: 1px;
  max-width: 100%;
  text-align: center;
}

.grid-1-6 {   width: 16.6%; }
.grid-2   {   width: 20%;     }
.grid-3   {   width: 30%;     }
.grid-3-3 {   width: 33.333%  }
.grid-4   {   width: 40%;     }
.grid-5   {   width: 50%;     }
.grid-6   {   width: 60%;     }
.grid-10  {   width: 100%;    }

@media (max-width: 1100px) {
  .grid-1-6 {width: 33.3%}
}

@media (max-width: 768px) {
  #kontakt .row {display: block; padding-bottom: 15px;}
  .grid-1-6     {width: 100%;}
  .grid-4       {width: 100%;}
  .grid-5       {width: 100%;}
  .grid-6       {width: 100%;}
  .flex         {display: block;}
  .headerLink   {font-size: 25px; padding-top: 35px;}
  .footerLink   {font-size: 25px; padding-top: 35px;}
}

@media (max-width: 735px) {
  .weg {display: none;}
}
@media (max-width: 597px) {
  .weg2 {display: none;}
}

@media (max-width: 500px) {
  #header .logo       {height: 70px; padding-top: 8px;}
  #header .schriftzug {height: 50px; padding-top: 8px;}
  #footer .logo       {height: 70px; padding-top: 8px;}
  #footer .schriftzug {height: 50px; padding-top: 8px;}
  #header .headerLink {font-size: 20px; padding-top: 40px;}
  #footer .footerLink {font-size: 20px; padding-top: 40px;}
  .video_link         {font-size: 40px}
}

@media (max-width: 386px) {
  #header .logo       {height: 60px; padding-top: 15px;}
  #header .schriftzug {height: 40px; padding-top: 15px;}
  #footer .logo       {height: 60px; padding-top: 15px;}
  #footer .schriftzug {height: 40px; padding-top: 15px;}
  #header .headerLink {font-size: 15px; padding-top: 43px;}
  #footer .footerLink {font-size: 15px; padding-top: 43px;}
}