/* ============================= */
/* BASIS-LAYOUT & DESKTOP        */
/* ============================= */
:root { color-scheme: light only; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { margin: 0; font-family: Arial, sans-serif; background-color: #9bb7da !important; color: #000; overflow-x: hidden; width: 100%; }

header { 
  display: flex; 
  position: fixed; 
  top: 0; left: 0; 
  width: 100%; 
  z-index: 10000; 
  align-items: flex-start;
}

header .logo { 
  background-color: #155ee3; 
  padding: 10px 20px; 
  border-radius: 0 0 12px 0; 
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
}

header .logo img { height: 50px; display: block; }

#main-nav { flex-grow: 1; background-color: #155ee3; border-radius: 0 0 12px 0; height: 40px; padding: 4px 15px; display: flex; align-items: center; box-shadow: 4px 4px 4px rgba(0,0,0,0.3); }
#main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; white-space: nowrap; }
#main-nav ul li a { text-decoration: none; color: rgb(225, 236, 248); font-weight: bold; padding: 10px 5px 4px 5px; display: block; transition: color 0.2s; }
#main-nav ul li a:hover { color: white; }
.menu-btn { display: none; } 

main { max-width: 1024px; margin: 100px auto 40px auto; padding: 0 20px; box-sizing: border-box; }
main h1 { color: #0b2e6d; text-align: center; }
.content-box { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;   }

.left-column { width: 370px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.image-box { position: relative; width: 100%; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 4px 4px 4px rgba(0,0,0,0.3); }

/* SLIDESHOW 2 BILDER */
.slideshow-2 .slide { animation: fade-2 8s infinite; }
.slideshow-2 .slide:nth-child(1) { animation-delay: 0s; }
.slideshow-2 .slide:nth-child(2) { animation-delay: 4s; }
@keyframes fade-2 { 
  0%, 100% { opacity: 0; } 
  8%, 50% { opacity: 1; }   /* Sichtbar bis zur Mitte */
  58% { opacity: 0; }      /* Ausblenden */
}

/* SLIDESHOW 3 BILDER*/
.slideshow .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.slideshow-3 .slide { animation: fade-3 12s infinite; }
.slideshow-3 .slide:nth-child(1) { animation-delay: 0s; }
.slideshow-3 .slide:nth-child(2) { animation-delay: 4s; }
.slideshow-3 .slide:nth-child(3) { animation-delay: 8s; }
@keyframes fade-3 { 
  0%, 100% { opacity: 0; } 
  8%, 33% { opacity: 1; } 
  41% { opacity: 0; } }

/* SLIDESHOW 4 BILDER*/
.slideshow .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.slideshow-4 .slide { animation: fade-3 16s infinite; }
.slideshow-4 .slide:nth-child(1) { animation-delay: 0s; }
.slideshow-4 .slide:nth-child(2) { animation-delay: 4s; }
.slideshow-4 .slide:nth-child(3) { animation-delay: 8s; }
.slideshow-4 .slide:nth-child(4) { animation-delay: 12s; }
@keyframes fade-4 { 
  0%, 100% { opacity: 0; } 
  8%, 25% { opacity: 1; } 
  33% { opacity: 0; } }


.text-box > *:first-child { 
  flex: 1; 
  min-width: 100px; 
  margin-top: 0px !important; 
}

/* SOCIAL BOX */
.social-box { text-align: center; width: 100%; margin-top: 40px; display: block; clear: both; }
.social-icons { display: flex; gap: 40px; justify-content: center; align-items: center; }
.social-icons a { color: #0b2e6d; transition: transform 0.2s, color 0.2s; text-decoration: none; }
.social-icons a:hover { color: #155ee3; transform: scale(1.1); }

/* ============================= */
/* MOBIL-ANSICHT (Ab 700px)      */
/* ============================= */
@media (max-width: 9000px) {
  .left-column {
    width: 300px;
  }

  .text-box { 
  flex: 1; 
  min-width: 100px; 
  margin-top: 0px !important; 
}


}

@media (max-width: 700px) {
  header .logo { 
    padding: 5px 15px; 
    width: 140px;
    border-radius: 0 0 12px 0;
    box-shadow: 3px 3px 9px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1; 
  }
  header .logo img { height: 36px; }

  .menu-btn { 
    display: block !important; 
    margin-left: -90px;
    /* background: #155ee3; */
    background: transparent; 
    color: white; 
    border: none; 
    font-size: 14px; 
    height: 46px; 
    padding: 0 20px; 
    cursor: pointer;
    border-radius: 0 0 12px 0; 
    /* box-shadow: 3px 3px 9px rgba(0,0,0,0.5); */
    box-shadow: none;
    position: relativ; 
    z-index: 10002; 
  }

  #main-nav { 
    display: none; 
    position: absolute; 
    top: 46px; left: 0; 
    width: 160px; 
    background-color: #155ee3; 
    height: auto !important; /* Fixiert den Hintergrund für alle Punkte */
    padding: 0; 
    border-radius: 0 0 12px 0; 
    box-shadow: 3px 3px 9px rgba(0,0,0,0.5); 
    z-index: 10001; 
  }

  /* Hover-Logik */
  .menu-btn:hover + #main-nav, #main-nav:hover { display: flex !important; }
  #main-nav.is-open { display: flex !important; }

  /* WICHTIG: Erzwingt vertikale Liste unter 700px */
  #main-nav ul { 
    flex-direction: column !important; 
    width: 100%; 
    gap: 0; 
  }

  #main-nav ul li { 
    width: 100%; 
    display: block; 
  }

  #main-nav ul li a { 
    padding: 8px 20px; 
    color: rgb(170, 195, 222) !important; 
    display: block; 
    line-height: 1.1; 
    font-size: 14px; 
    text-decoration: none; 
    border-bottom: 1px solid transparent; 
  }

  #main-nav ul li a:hover { 
    color: white !important; 
    border-bottom: 1px solid white; 
  }

  main { margin-top: 60px; padding: 0 10px; width: 100%; box-sizing: border-box; }
  .content-box { flex-direction: column; align-items: center; width: 100%; }
  .left-column { width: 100% !important; max-width: 400px; }
  .text-box { width: 100%; min-width: 100%; text-align: left; padding: 0 5px; }

  .social-box { display: block !important; visibility: visible !important; margin-top: 30px; padding-bottom: 50px; }
}