@font-face {
    font-family: 'Inclusive Sans';
    src: url("Inclusive_Sans/InclusiveSans-VariableFont_wght.ttf");
}

.button,
.button3,
.button4 {
  position: fixed;
  top: 20px;
  right: 20px;
  color: white;
  z-index: 1000;
}
.button3 {
  right: 60px;
}

.button4 {
  right: 100px;
}

.video1 {
  width: 60vh;
  z-index: 1000;
  position: relative;
  left: -50vw;
  top: 9vw;
}

h2 {

  font-size: 18px;
}


.titlepic{

  width: 40vw;
}

.titlepic2{

  width: 40vw;
}

.titlepic3{

  height: 80vh;
}

.titlepic4{

  width: 20vw;
}

.titlepic5{

position: relative;
width: 70vw;
margin-right: 0;
}


.dropdown {
  position: fixed;
  width: fit-content;
  z-index: 100;
}

/* Style the dropdown button */
.dropbtn {
  background-color: #793a1c;
  color: white;
  padding: 12px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #793a1c;
  min-width: 200px;
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #793a1c;
}


section:nth-child(odd) { background:#793a1c; color:whitesmoke; }
section:nth-child(even) { background: #793a1c; color:whitesmoke; }
p { margin:0 0 1rem 0; line-height:1.6; }

.slideshow {
  position: relative;
  width: 500px;
  height: 350px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Slides Container */

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Einzelne Bilder */

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slide.active {
  opacity: 1;
}

/* Buttons */

.slideshow button {
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(0,0,0,0.4);
  border: none;
  color: white;

  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

.slideshow button:hover {
  background: rgba(0,0,0,0.6);
}




html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  background-color: #793a1c;
}

/* HORIZONTAL SCROLL */

.horizontal {
  display: flex;
  height: 100vh;


  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

}

/* SECTIONS */

.horizontal section {
  flex: 0 0 auto;
  height: 100vh;
  padding: 60px 25px;
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* CONTENT WRAPPER */

.multi {
  display: flex;
  align-items: flex-start;
  height: calc(100vh - 120px);
  min-width: 0;

  
}

/* MAGAZIN TEXT */

.text {
  height: calc(100vh - 120px);
  width: 1000px;

  column-count: 2;
  column-gap: 60px;


  font-size: 16px;
  line-height: 1.5;
}

/* NICHT ZERREISSEN */

.text h1,
.text h2,
.text img {
  break-inside: avoid;
}

/* BILDER */

.text img {
  max-width: 100%;
}



iframe {
  height: 85%;
  aspect-ratio: 16/9;
}

/* MENU */

.dropdown {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;

}

.caption {
  padding-top: 320px;
  padding-left: 8px;
  font-size: 13px;
  opacity: 0.99;
  z-index: 999;

}

@media (orientation: portrait), (max-width: 900px) {

  html, body {
    overflow: auto;
  }

  /* Horizontal Layout deaktivieren */
  .horizontal {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }

  /* Sections untereinander */
  .horizontal section {
    height: auto;
    flex-direction: column;
  }

  /* Content untereinander statt nebeneinander */
  .multi {
    flex-direction: column;
    gap: 30px;
  }

  /* Text ohne Spalten */
  .text {
    width: 90vw;
    column-count: 1;
    column-gap: 0;
    height: auto;
    font-size: 16px;
  }

  /* Bilder */
  .titlepic,
  .titlepic2,
  .titlepic3,
  .titlepic4
  {
    width: 90vw;
  }

  .titlepic5 {
    position: relative;
width: 60vw;
animation: slide-in 10s 1;
opacity: 0;
margin-bottom: -40vw;


  }

  /* Slideshow an Bildschirmbreite anpassen */
  .slideshow {
    width: 90vw;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* iframe responsive */
  iframe {
    width: 90vw;
    height: auto;
  }

  /* Buttons oben rechts neu positionieren */
  .button {
    margin-right: auto;
    left: -1px;
  }
  .button3 {
    margin-right: auto;
    left: -30px;
  }
  .button4 {
    margin-right: auto;
    left: -70px;
  }

}