/* ==================== Allgemeine Einstellungen ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, main, section {
  width: 100%; /* Vollbreit-Anzeige */
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: black;
}

/* ==================== Header ==================== */
.site-header {
  background: url('assets/images/header-bg.jpg') no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 50px 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.site-header h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  font-weight: bold; /* Fettgedruckter Titel */
}

/* ==================== Navbar (Menü) ==================== */
.navbar {
  background: #0074d9;
  color: #fff;
  padding: 10px 20px;
  position: relative; /* Standardpositionierung */
  width: 100%; /* Vollbreit-Anzeige */
  z-index: 1000; /* Über anderen Inhalten anzeigen */
}
.menu-icon {
  display: none; /* Standardmäßig ausgeblendet */
  font-size: 2rem;
  cursor: pointer;
  color: #fff;
}
.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.nav-links li {
  margin: 0 15px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-links a.active,
.nav-links a:hover {
  color: #ffcc00;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 1000px) {
  /* Header ausblenden */
  .site-header {
    display: none; /* Header wird ausgeblendet */
  }
  /* Menü-Symbol anzeigen */
  .menu-icon {
    display: block; /* Hamburger-Symbol anzeigen */
  }
  /* Navigationsmenü standardmäßig ausblenden */
  .nav-links {
    display: none; /* Ausgeblendet, bis 'active' hinzugefügt wird */
    flex-direction: column; /* Vertikale Anordnung der Links */
    align-items: center;
    background: #0074d9;
    position: absolute; /* Positionierung relativ zum Header */
    top: 100%; /* Unten an der Navbar ausrichten */
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0; /* Mehr Abstand zwischen den Links */
  }
  /* Wird aktiviert, wenn das Menü geöffnet wird */
  .nav-links.active {
    display: flex; /* Menü anzeigen */
  }
}

/* ==================== Content mit Hintergrundbild ==================== */
.content.background-content {
  background: url('assets/images/content-bg.png') no-repeat center center/cover;
  color: white;
  position: relative;
  padding: 50px 20px;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional: Overlay für bessere Lesbarkeit */
.content.background-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
  z-index: -1; /* Hinter dem Content */
}

/* ==================== Footer ==================== */
.site-footer {
  background: #005ea6;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  position: relative; /* Relativer Container für mögliche Overlay-Effekte */
}

/* ==================== Slideshow-Container ==================== */
.slideshow-container {
  position: relative;
  width: 100%; /* Maximale Breite */
  margin: auto;
  overflow: hidden;
  height: 60vh; /* Höhe auf 50% des Viewports setzen */
  max-width: 100%; /* Maximale Breite auf 100% setzen */
  border-radius: 8px; /* Runde Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Slideshow-Bilder */
.mySlides {
  display: none; /* Standardmäßig ausgeblendet */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Bilder skalieren mit dem Container */
  height: 100%; /* Höhe passt sich automatisch an */
}

.mySlides img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bilder werden skaliert und zentriert */
  object-position: center;
}





/* Textüberlagerung */
.text-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.3); /* Dunkleres Overlay */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.2rem;
  width: 80%; /* Text block width relative to the container */
  text-align: center;
}

/* Navigationspunkte */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot.active,
.dot:hover {
  background-color: #717171;
}

/* Reduzierte Höhe für die Slideshow in mobiler Ansicht */
@media (max-width: 768px) {
  .slideshow-container {
    height: 300px; /* Reduzierte Höhe */
  }
  /* Reduzierte Schriftgröße für den Textüberlagerung */
  .text-overlay {
    font-size: 1rem;
    padding: 8px 15px;
  }
  /* Kleiner Navigationspunkte */
  .dot {
    height: 10px;
    width: 10px;
  }
  /* Content-Anpassungen */
  .content.background-content {
    padding: 30px 10px;
  }
  /* Hero-Content */
  .hero-content h2 {
    font-size: 1.5rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}

/* ==================== Tabelle für Mitgliedsbeiträge (Tauchen-Seite) ==================== */
.membership-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert die Tabelle horizontal */
  justify-content: center; /* Zentriert die Tabelle vertikal */
  text-align: center; /* Zentriert den Text innerhalb der Tabelle */
  padding: 20px;
}
.membership-table {
  width: 100%; /* Vollbreit-Anzeige */
  max-width: 600px; /* Maximale Breite */
  border-collapse: collapse;
  margin: 20px auto; /* Zentriert die Tabelle */
  background-color: transparent; /* Transparenter Hintergrund */
}
.membership-table th,
.membership-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left; /* Links ausgerichteter Text */
}
.membership-table th {
  background-color: rgba(0, 116, 217, 0.8); /* Halbtransparenter Blau-Ton */
  color: white;
}
.membership-table tr:nth-child(even) {
  background-color: rgba(240, 240, 240, 0.5); /* Alternierender Hintergrund */
}

/* Text unter der Tabelle */
.membership-section p {
  text-align: justify; /* Blocksatz */
  line-height: 1.6; /* Zeilenabstand */
  font-size: 1rem;
  margin-top: 20px;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
  .membership-table {
    font-size: 14px; /* Kleinere Schriftgröße */
  }
}

/* ==================== Tabelle für den Vorstand ==================== */
.vorstand-table {
  width: 100%; /* Vollbreit-Anzeige */
  border-collapse: collapse;
  margin-top: 20px;
  table-layout: fixed; /* Fixiert die Spaltenbreite */
}
.vorstand-table th,
.vorstand-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  word-wrap: break-word; /* Text umbrechen, wenn er zu lang ist */
}
.vorstand-table th {
  background-color: #0074d9;
  color: white;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
  .vorstand-table img.vorstand-image {
    display: none; /* Bilder im Vorstand ausblenden */
  }
  .vorstand-table td:nth-child(2),
  .vorstand-table th:nth-child(2) {
    display: none; /* Zweite Spalte ausblenden */
  }
  .vorstand-table {
    font-size: 1rem;
  }
  .vorstand-table th,
  .vorstand-table td {
    padding: 8px;
  }
}

/* ==================== Content-Bereich für die Kontaktseite ==================== */
.content.contact-page {
  display: flex;
  flex-direction: column; /* Stackt Inhalte übereinander */
  align-items: center; /* Zentriert den Content horizontal */
  justify-content: center; /* Zentriert den Content vertikal */
  padding: 40px 20px; /* Innerer Abstand */
  background-color: #f9f9f9; /* Hellgraue Hintergrundfarbe */
  min-height: 80vh; /* Minimale Höhe des Containers */
}

/* Textblock für die Kontaktseite */
.text-block {
  display: flex;
  flex-direction: column; /* Stackt Inhalte übereinander */
  align-items: center; /* Zentriert den Textblock */
  text-align: center; /* Zentriert den Text innerhalb des Blocks */
  max-width: 500px; /* Maximale Breite des Textblocks */
  width: 100%; /* Passt sich automatisch an */
  background: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
  border-radius: 8px; /* Runde Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  padding: 20px; /* Innerer Abstand */
}

/* Überschrift für den Textblock */
.text-block h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #0074d9; /* Blaue Überschrift */
}

/* Text im Textblock */
.text-block p {
  text-align: justify; /* Blocksatz */
  line-height: 1.6; /* Zeilenabstand */
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Content-Bereich für die Kontaktseite */
.content.contact-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

/* Textblock für die Kontaktseite */
.text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
  width: 100%;
  background: rgba(255, 255, 255, 0.4); /* Leicht transparenter Hintergrund */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Kontaktformular */
#contact-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7); /* Weiße Hintergrundfarbe mit 70% Opazität */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group label {
  text-align: left; /* Labels linksbündig */
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  text-align: left; /* Eingaben linksbündig */
}

.form-button {
  background: #0074d9;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  align-self: center;
  transition: background 0.3s ease;
}

.form-button:hover {
  background: #005ea6;
}

.form-feedback {
  margin-top: 10px;
  font-size: 1rem;
  text-align: center;
  color: green;
}

/* ==================== Allgemeiner Content-Container ==================== */
.content-container {
  max-width: 800px; /* Maximale Breite des Containers */
  margin: 0 auto; /* Zentrieren des Containers horizontal */
  padding: 40px; /* Innerer Abstand auf allen Seiten */
  padding-left: 40px; /* Mehr Abstand auf der linken Seite */
  padding-right: 40px; /* Mehr Abstand auf der rechten Seite */
  background-color: #f9f9f9; /* Hellgraue Hintergrundfarbe */
  border-radius: 8px; /* Runde Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}



/* Text im Content-Bereich */
.content-container p {
  text-align: justify; /* Blocksatz */
  line-height: 1.6; /* Zeilenabstand */
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Bilder im Content-Bereich */
.content-container img {
  max-width: 100%; /* Skaliert Bilder mit dem Container */
  height: auto;
  display: block;
  margin: 0 auto; /* Zentriert Bilder */
  border-radius: 5px; /* Runde Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* ==================== Tabellen im Content-Bereich ==================== */
.content-container table {
  width: 100%; /* Vollbreit-Anzeige */
  border-collapse: collapse;
  margin-bottom: 20px;
}
.content-container th,
.content-container td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left; /* Links ausgerichteter Text */
}
.content-container th {
  background-color: #0074d9;
  color: white;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
  /* Anpassungen für kleinere Bildschirme */
  .content.contact-page {
    padding: 20px; /* Weniger Padding */
  }
  .text-block {
    padding: 15px; /* Weniger Padding */
  }
  .form-group input,
  .form-group textarea {
    font-size: 0.9rem; /* Kleinere Schriftgröße */
  }
  .form-button {
    font-size: 0.9rem; /* Kleinere Schriftgröße */
    padding: 8px 15px; /* Weniger Padding */
  }
}