/* Globale Stile für den gesamten Body */
body {
  font-family: Arial, sans-serif; /* Textschriftart */
  margin: 0; /* Kein Außenabstand */
  padding: 0; /* Kein Innenabstand */
  display: flex; /* Flexbox-Layout */
  background-image: url('KI.jfif'); /* Hintergrundbild */
  background-size: cover; /* Bildgröße anpassen */
  background-position: center; /* Bildposition in der Mitte zentrieren */
}

/* Stil für den Hauptinhalt (main) */
main {
  flex: 1; /* Flexibles Wachstum des Inhalts */
  padding: 20px; /* Innenabstand */
  background-color: #ecf0f5; /* Hintergrundfarbe */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten für Kasten */
  border-radius: 8px; /* Abgerundete Ecken */
  margin: 20px; /* Außenabstand */
}

/* Stil für die Seitenleiste (Sidebar) */
.sidebar {
  width: 330px; /* Breite der Sidebar (anpassbar) */
  background-color: #3498db; /* Hintergrundfarbe */
  height: 160vh; /* Höhe der Sidebar (anpassbar) */
  display: flex; /* Flexbox-Layout */
  flex-direction: column; /* Anordnung der Elemente in Spalten */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Schatten für Kasten */
}

/* Stil für Dropdown-Schaltflächen, normale Abschnittsschaltflächen und Links */
.dropdown-btn,
.normal-section-btn,
a {
  font-size: 16px; /* Schriftgröße */
  padding: 10px; /* Innenabstand */
  background-color: #2980b9; /* Hintergrundfarbe */
  color: #fff; /* Textfarbe */
  border: none; /* Keine Rahmen */
  cursor: pointer; /* Zeigercursor */
  text-align: left; /* Textausrichtung links */
  text-decoration: none; /* Keine Unterstreichung für Links */
  display: block; /* Blockelemente (eine pro Zeile) */
  margin-bottom: 10px; /* Unten Abstand */
}

/* Stil für Hover-Effekte bei Links und Schaltflächen */
a:hover,
.dropdown-btn:hover {
  background-color: #3498db; /* Hintergrundfarbe bei Hover */
  color: #fff; /* Textfarbe bei Hover */
}

/* Stil für Dropdown-Inhalte */
.dropdown-content {
  display: none; /* Standardmäßig ausgeblendet */
  background-color: #ecf0f5; /* Hintergrundfarbe */
  padding-left: 20px; /* Innenabstand links */
  border-radius: 0 8px 8px 0; /* Abgerundete Ecken für rechte Seite */
}

/* Stil für Links im Dropdown-Inhalt */
.dropdown-content a {
  color: #333; /* Textfarbe */
  padding: 12px 0; /* Innenabstand oben/unten */
  text-decoration: none; /* Keine Unterstreichung für Links */
  display: block; /* Blockelemente (eine pro Zeile) */
}

/* Stil für Hover-Effekte bei Links im Dropdown-Inhalt */
.dropdown-content a:hover {
  background-color: #3498db; /* Hintergrundfarbe bei Hover */
  color: #fff; /* Textfarbe bei Hover */
}

/* Anzeige des Dropdown-Inhalts beim Hover über die Dropdown-Schaltfläche */
.dropdown:hover .dropdown-content {
  display: block; /* Einblenden des Dropdown-Inhalts */
}

/* Stil für Überschriften (h1) */
h1 {
  color: #3498db; /* Textfarbe */
}

/* Stil für Absatztexte (p) */
p {
  color: #555; /* Textfarbe */
}

/* Stil für Bildcontainer */
.image-container {
  float: left; /* Links ausrichten mit schwebendem Effekt */
  margin-right: 20px; /* Rechts Abstand */
}

/* Medienabfrage für Bildschirme kleiner als 768px Breite */
@media (max-width: 768px) {
  .sidebar {
    width: 100%; /* Volle Breite für kleine Bildschirme */
    height: auto; /* Automatische Höhe */
  }

  .content {
    margin-left: 0; /* Kein linker Abstand für Hauptinhalt */
  }
}