/* Kleiner CSS Reseet  */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


/* Common CSS for all breakpoints */
body {
    scroll-behavior: smooth;
    font-size: 18px;
    color: #333;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 64px;
    line-height: 66px;
    color: #002eb8;
}

h2 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 38px;
    line-height: 44px;
    color: #002eb8;
}

h3 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 28px;
    line-height: 34px;
    color: #002eb8;
    margin-bottom: 12px;
}

h4 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 22px;
    line-height: 24px;
    margin-bottom: 12px;
    color: #002eb8;
}

p {
    font-size: 18px;
    line-height: 20px;
}

/* .page-wrapper {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
} */

.section {
    width: 100%;
    margin: 0 auto;
}

.teaser-text {
    font-size: 24px;
    line-height: 26px;
}

/* Start Tutorial CSS  */
.section-tutorial {
  width: 80vw;
  margin: 16vh auto;
}

.tutorial-container {
  margin-top: 5vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-grow: auto;
  flex-wrap: wrap;
}

.tutorial-headline {
  margin-top: 1vh;
}

.video {
  width: 100%;
}

.video[poster]{
  object-fit: cover;
}

.footer {
  width: 100%;
  height: 128px;
  background-color: #e9e9e9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.footer-links {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.footer-link {
  color: #333;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}


/* CSS für Geräte kleiner als 768px (Landscape phones) */
@media (max-width: 1299.98px) {

  /* Start Header CSS */
  h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 54px;
    line-height: 54px;
    color: #002eb8;
  }

  .teaser-header-container {
    width: 96vw;
    margin: 6vh auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .teaser-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4vh;
    width: 100%;
    max-width: 800px;
  }

  .header-image {
    height: 40vh;
    min-height: 200px;
    width: 100%;
    background-image: url("../img/19_arthur.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  /* End Header CSS */
  /* Start Hard-Facts CSS */
  .hard-facts-container {
    width: 96vw;
    margin: 6vh 2vw;
    display: flex;
    flex-direction: column;
  }

  .cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .fact-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 800px;
    height: 380px;
    border: 1px solid #7e7e7e;
    padding: 2vw;
    margin-top: -1px;
    margin-left: -1px;
  }
  /* End Hard-Facts CSS */
      /* Start Slider CSS */
      .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slider{
        margin: 0 auto;
        width: 100vw;
        height: 500px;
        overflow: hidden;
        position: relative;
      }
      
      .slides{
        width: 500%;
        height: 100%;
        display: flex;
      }
      
      .slides input{
        display: none;
      }

      .slide{
        width: 20%;
        transition: 2s;
      }
      
      .slide img{
        object-fit: cover;
        object-position: center;
        width: 100vw;
        height: 500px;
        min-height: 30vh;
      }
      
      /* CSS for manual slide navigation */
      
      .navigation-manual{
        position: absolute;
        width: 100vw;
        margin-top: -5vh;
        display: flex;
        justify-content: center;
      }
      
      .manual-btn{
        border: 2px solid #002eb8;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
      }
      
      .manual-btn:not(:last-child){
        margin-right: 10px;
      }
      
      .manual-btn:hover{
        background: #002eb8;
      }
      
      #radio1:checked ~ .first{
        margin-left: 0;
      }
      
      #radio2:checked ~ .first{
        margin-left: -20%;
      }
      
      #radio3:checked ~ .first{
        margin-left: -40%;
      }
      
      #radio4:checked ~ .first{
        margin-left: -60%;
      }

      #radio5:checked ~ .first{
        margin-left: -80%;
      }

      #radio6:checked ~ .first{
        margin-left: -100%;
      }

      #radio7:checked ~ .first{
        margin-left: -120%;
      }

      #radio8:checked ~ .first{
        margin-left: -140%;
      }

      #radio9:checked ~ .first{
        margin-left: -160%;
      }

      #radio10:checked ~ .first{
        margin-left: -180%;
      }
      
      #radio11:checked ~ .first{
        margin-left: -200%;
      }

      #radio12:checked ~ .first{
        margin-left: -220%;
      }

      #radio13:checked ~ .first{
        margin-left: -240%;
      }

      #radio14:checked ~ .first{
        margin-left: -260%;
      }

      #radio15:checked ~ .first{
        margin-left: -280%;
      }
      
      /*css for automatic navigation*/
      
      .navigation-auto{
        position: absolute;
        display: flex;
        width: 100vw;
        justify-content: center;
        margin-top: 95vh;
      }
      
      .navigation-auto div{
        border: 2px solid #002eb8;
        padding: 5px;
        border-radius: 10px;
        transition: 1s;
      }
      
      .navigation-auto div:not(:last-child){
        margin-right: 40px;
      }
      
      #radio1:checked ~ .navigation-auto .auto-btn1{
        background: #002eb8;
      }
      
      #radio2:checked ~ .navigation-auto .auto-btn2{
        background: #002eb8;
      }
      
      #radio3:checked ~ .navigation-auto .auto-btn3{
        background: #002eb8;
      }
      
      #radio4:checked ~ .navigation-auto .auto-btn4{
        background: #002eb8;
      }
      
      #radio5:checked ~ .navigation-auto .auto-btn5{
        background: #002eb8;
      }
      #radio6:checked ~ .navigation-auto .auto-btn6{
        background: #002eb8;
      }
      #radio7:checked ~ .navigation-auto .auto-btn7{
        background: #002eb8;
      }
      #radio8:checked ~ .navigation-auto .auto-btn8{
        background: #002eb8;
      }
      #radio9:checked ~ .navigation-auto .auto-btn9{
        background: #002eb8;
      }
      #radio10:checked ~ .navigation-auto .auto-btn10{
        background: #002eb8;
      }
      #radio11:checked ~ .navigation-auto .auto-btn11{
        background: #002eb8;
      }
      #radio12:checked ~ .navigation-auto .auto-btn12{
        background: #002eb8;
      }
      #radio13:checked ~ .navigation-auto .auto-btn13{
        background: #002eb8;
      }
      #radio14:checked ~ .navigation-auto .auto-btn14{
        background: #002eb8;
      }
      #radio15:checked ~ .navigation-auto .auto-btn15{
        background: #002eb8;
      }

    /* End Slider CSS */

  .tutorial-card{
    width: 95%;
    height: auto;
    margin-bottom: 3vh;
  }
}


/* CSS für Geräte größer als 1200px (Large Desktops) */
@media (min-width: 1300px) {
    /* Start Header CSS */
    .teaser-header-container {
        width: 80vw;
        margin: 16vh auto;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .teaser-header-headline {
        width: 40vw;
        max-width: 600px;
        text-transform: uppercase;
        margin-right: 5vw;
    }

    .teaser-header-content {
        width: 30vw;
    }

    .header-image {
        height: 100vh;
        width: 100%;
        background-image: url("../img/19_arthur.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    /* End Header CSS */

    /* Start Hard-Facts CSS */
    .hard-facts-container {
        width: 80vw;
        margin: 16vh auto;
        display: flex;
        flex-direction: column;
    }

    .card-group-left {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: left;
        margin-left: 4px;
    }

    .card-group-right {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: right;
    }

    .fact-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 25%;
        height: 400px;
        border: 1px solid #7e7e7e;
        padding: 2vw;
        margin-top: -1px;
        margin-left: -1px;
    }
    /* End Hard-Facts CSS */

    /* Start Slider CSS */
    .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slider{
        margin: 0 auto;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
      }
      
      .slides{
        width: 500%;
        height: 100%;
        display: flex;
      }
      
      .slides input{
        display: none;
      }

      .slide{
        width: 20%;
        transition: 2s;
      }
      
      .slide img{
        object-fit: cover;
        object-position: center;
        width: 100vw;
        height: 100vh;
      }
      
      /* CSS for manual slide navigation */
      
      .navigation-manual{
        position: absolute;
        width: 100vw;
        margin-top: -5vh;
        display: flex;
        justify-content: center;
      }
      
      .manual-btn{
        border: 2px solid #002eb8;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
      }
      
      .manual-btn:not(:last-child){
        margin-right: 40px;
      }
      
      .manual-btn:hover{
        background: #002eb8;
      }
      
      #radio1:checked ~ .first{
        margin-left: 0;
      }
      
      #radio2:checked ~ .first{
        margin-left: -20%;
      }
      
      #radio3:checked ~ .first{
        margin-left: -40%;
      }
      
      #radio4:checked ~ .first{
        margin-left: -60%;
      }

      #radio5:checked ~ .first{
        margin-left: -80%;
      }

      #radio6:checked ~ .first{
        margin-left: -100%;
      }

      #radio7:checked ~ .first{
        margin-left: -120%;
      }

      #radio8:checked ~ .first{
        margin-left: -140%;
      }

      #radio9:checked ~ .first{
        margin-left: -160%;
      }

      #radio10:checked ~ .first{
        margin-left: -180%;
      }
      
      #radio11:checked ~ .first{
        margin-left: -200%;
      }

      #radio12:checked ~ .first{
        margin-left: -220%;
      }

      #radio13:checked ~ .first{
        margin-left: -240%;
      }

      #radio14:checked ~ .first{
        margin-left: -260%;
      }

      #radio15:checked ~ .first{
        margin-left: -280%;
      }
      
      /*css for automatic navigation*/
      
      .navigation-auto{
        position: absolute;
        display: flex;
        width: 100vw;
        justify-content: center;
        margin-top: 95vh;
      }
      
      .navigation-auto div{
        border: 2px solid #002eb8;
        padding: 5px;
        border-radius: 10px;
        transition: 1s;
      }
      
      .navigation-auto div:not(:last-child){
        margin-right: 40px;
      }
      
      #radio1:checked ~ .navigation-auto .auto-btn1{
        background: #002eb8;
      }
      
      #radio2:checked ~ .navigation-auto .auto-btn2{
        background: #002eb8;
      }
      
      #radio3:checked ~ .navigation-auto .auto-btn3{
        background: #002eb8;
      }
      
      #radio4:checked ~ .navigation-auto .auto-btn4{
        background: #002eb8;
      }
      
      #radio5:checked ~ .navigation-auto .auto-btn5{
        background: #002eb8;
      }
      #radio6:checked ~ .navigation-auto .auto-btn6{
        background: #002eb8;
      }
      #radio7:checked ~ .navigation-auto .auto-btn7{
        background: #002eb8;
      }
      #radio8:checked ~ .navigation-auto .auto-btn8{
        background: #002eb8;
      }
      #radio9:checked ~ .navigation-auto .auto-btn9{
        background: #002eb8;
      }
      #radio10:checked ~ .navigation-auto .auto-btn10{
        background: #002eb8;
      }
      #radio11:checked ~ .navigation-auto .auto-btn11{
        background: #002eb8;
      }
      #radio12:checked ~ .navigation-auto .auto-btn12{
        background: #002eb8;
      }
      #radio13:checked ~ .navigation-auto .auto-btn13{
        background: #002eb8;
      }
      #radio14:checked ~ .navigation-auto .auto-btn14{
        background: #002eb8;
      }
      #radio15:checked ~ .navigation-auto .auto-btn15{
        background: #002eb8;
      }

    /* End Slider CSS */

    /* Start Tutorial CSS  */
    .tutorial-card{
      width: 26vw;
      height: auto;
      min-width: 400px;
      max-width: 95%;
      margin-bottom: 3vh;
    }
}