/* Basis Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  color: #222217; /* Primärer Text */
  background-color: #D2CBC1; /* Heller Hintergrund */
  line-height: 1.6;
  width: 100%;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #4D5038;
  border-bottom: 1px solid #858666;
  z-index: 1000;
}

.nav-container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Navigation Links */
.nav-container a {
  text-decoration: none;
  color: #D2CBC1;
  margin: 0 15px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-container a:hover {
  color: #858666;
}

/* Hamburger Button (drei Striche) */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background: #D2CBC1;
  margin: 4px 0;
  border-radius: 3px;
}

/* Hero Section & Slider */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info Block Section */
.info-block {
  background: #4D5038;
  color: #D2CBC1;
  padding: 40px 20px;
  margin: 40px 0;
  width: 100%;
}

.info-block .container {
  width: 100%;
  margin: 0 auto;
}

/* Für den schattierten Inhalt (80% Breite, zentriert) */
.content-container {
  width: 80%;
  margin: 40px auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

/* Footer */
footer {
  background: #4D5038;
  color: #D2CBC1;
  text-align: center;
  padding: 20px 0;
  width: 100%;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Hamburger-Menü anzeigen */
  .menu-toggle {
    display: flex;
  }
  
  /* Navigation ausblenden, bis das Hamburger-Menü aktiviert wird */
  nav {
    display: none;
    width: 100%;
    background: #4D5038;
  }
  
  /* Navigation aktiv anzeigen */
  nav.active {
    display: block;
  }
  
  nav a {
    display: block;
    padding: 10px 20px;
    border-top: 1px solid #858666;
    margin: 0;
  }
  
  .content-container {
    width: 90%;
    padding: 15px;
  }
 .text-container {
   background-color: #ffffff;    /* Weißer Hintergrund */
   border-radius: 8px;           /* Abgerundete Ecken */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Schatten für den Schwebe-Effekt */
   padding: 20px;                /* Innenabstand */
   margin: 40px auto;            /* Abstand und zentriert */
   max-width: 800px;             /* Optionale maximale Breite */
 }
}