/* Grundlayout */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  background-color: #9bb7da; /* blassblau */
  color: #000000; 
}

/* Kopfbereich fixieren */
header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* background-color: #155ee3; /* dunkelblau */
  /* padding: 10px 10px; */
  box-sizing: border-box;
  /* box-shadow: 4px 4px 4px rgba(0,0,0,0.3); */
  z-index: 1000;
}

/* Logo links */
header .logo {
  background-color: #155ee3;
  padding: 10px 20px;
  /* margin-right: 20px; */
  display: flex;
  align-items: center;
  border-radius: 0 0 12px 0;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

header .logo img {
  height: 50px;
}

/* Navigation rechts daneben */
nav {
  flex-grow: 1;                   /* nimmt den restlichen Platz */
  background-color: #155ee3;    /* gleiche Farbe wie Header */
  border-radius: 0 0 12px 0;      /* oben rund → wirkt schmaler & nach oben versetzt */
  height: 36px;
  padding: 4px 15px;              /* kompakter (weniger hoch) */
  align-self: stretch;
  /* margin-left: 10px;
  /* margin-top: 8px;v               /* hebt Menü etwas an */
  display: flex;
  align-items: center;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

/* nav ul li {
  display: inline-block;
} */

nav ul li a {
  text-decoration: none;
  color: rgb(188, 215, 243);
  font-weight: bold;
  padding: 10px 5px 4px 5px; /* oben rechts unten links */
  display: block;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

nav ul li a:hover {
  color: white;
  border-bottom: 2px solid white;
}

/* Hauptbereich */
main {
  max-width: 1024px;
  margin: 80px auto 40px auto; /* Abstand nach oben wegen fixiertem Menü */
  padding: 0 20px;
  text-align: center;
}

main h1 {
  color: #0b2e6d; /* dunkelblau */
  margin-top: 35px;     /* Abstand nach oben */
  margin-bottom: 20px;
}

main h2 {
  color: #0b2e6d; /* dunkelblau */
  margin-top: 40px; /* Abstand nach oben */ 
  margin-bottom: 10px;
}

/* Linke Spalte bündelt Slideshow + Social-Links */
.left-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto; /* fixe Breite */
  gap: 20px;
  width: 350px;        /* gleiche Breite wie image-box */
  max-width: 450px;
}

.content-box{
  display: flex;
  align-items: flex-start; /* Text oben beginnen lassen */
  flex-wrap: wrap; /* erlaubt, dass Elemente umbrechen */
  gap: 20px;              /* Abstand zwischen Bild und Text */
  margin-top: 20px;
}

.image-box {
  position: relative;
  width: 300px;     /* Bildbreite anpassen */
  max-width: 350px;
  border-radius: 8px;  /* optional: abgerundete Ecken */
  overflow: hidden;
  aspect-ratio: 16 / 9;   /* sorgt für konstante Höhe, hier 4:3 – anpassen an deine Bilder */
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

/* Slideshow Container */
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slideshow-3 .slide {
  position: absolute;   /* Übereinander stapeln */
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Bild füllt den Container */
  object-position: center; /* Bild wird mittig beschnitten */
  border-radius: 8px;
  opacity: 0;
  animation: fade-3 12s infinite;
}

/* Bilder starten sichtbar */
.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;}

/* Überblendung */
@keyframes fade-3 {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}

.slideshow-2 .slide {
  position: absolute;   /* Übereinander stapeln */
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Bild füllt den Container */
  object-position: center; /* Bild wird mittig beschnitten */
  border-radius: 8px;
  opacity: 0;
  animation: fade-2 8s infinite;
}

/* Bilder starteten sichtbar */
.slideshow-2 .slide:nth-child(1) {animation-delay: 0s;}
.slideshow-2 .slide:nth-child(2) {animation-delay: 4s;}

@keyframes fade-2 {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

.text-box {
  flex: 1; /* nimmt restliche Breite ein */
  text-align: left;
  min-width: 300px;
}

.social-box {
  flex-basis: 100%; /* nimmt ganze Breite */
  text-align: center;
  margin-top: 20px;
}

.social-box p {
  margin-bottom: 10px;
  font-weight: bold;
  color: #0b2e6d;
}

.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.social-icons a {
  color: #0b2e6d;   /* dunkelblau, passt zum Design */
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #155ee3;   /* helleres Blau beim Hover */
}


/* ------------------------------ */
/* Responsive Anpassung */
@media (max-width: 800px) {
  header {
    display: flex;
    flex-direction: column;   /* Logo oben, Menü darunter */
    align-items: center;      /* Logo zentrieren */
    width: 98%;
    position: static;         /* nicht fixiert auf Handy */
    padding: 0 2px;
  }

  header .logo {
    border-radius: 12px 12px 0 0;
  }

  header .logo img {
    margin: 0 0 10px 0;       /* Abstand unter Logo */
    height: 60px;             /* ggf. etwas größer für Handy */
    
  }

  main{margin: 40px auto 20px auto};

  main h1{margin-top: 20px}
  main h2{margin-top: 20px}

  nav {
    height: 88px;
    border-radius: 12px;
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.3); /* optional */
  }

  /* Menü: maximal 2 Zeilen */
  nav ul {
    flex-wrap: wrap;          /* Zeilenumbruch erlaubt */
    justify-content: center; /* Links + rechts verteilen */
    gap: 10px;
    width: 100%;
    max-width: 100%;
    position: 0 10px;
    box-sizing: border-box;
    row-gap: 10px;
    padding: 0 10;
  }

  nav ul li {
    flex: 0 1 35%;            /* jeweils ~45% pro Menüpunkt, 2 Spalten */
    text-align: center;       /* Text zentrieren */
    max-width: none;
  }

  .left-column {
    width: 100%;
    max-width: 400px;
  }

  .content-box {
    flex-direction: column;  /* Bild kommt über den Text */
    align-items: center;     /* optional: Bild mittig */
  }

  .image-box {
    width: 90%;              /* Bild füllt die Breite */
    max-width: 95%; 
    margin: 0 auto;
  }

  /* Social-Box ganz ans Ende verschieben */
  .social-box {
    order: 3;
    margin-top: 20px;
    max-width: 95%;
  }

  .text-box {
    width: 100%;
    min-width: auto;
    max-width: 90%;
    text-align: left;
  }
}