    /* Global Reset */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
  /* Haupt-Container für die Buchstaben */
.haupt-menue {
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
}

/* Styling für die klickbaren Zeilen (Buchstaben & Begriffe) */
.haupt-menue details summary,
.auswahl-box details summary {
  padding: 14px 20px;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* Entfernt den Standard-Pfeil */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekt für Interaktivität */
.haupt-menue details summary:hover,
.auswahl-box details summary:hover {
  background: #edf2f7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Eigenes Pfeil-Icon hinzufügen */
.haupt-menue details summary::after,
.auswahl-box details summary::after {
  content: "▶";
  font-size: 0.8rem;
  color: #4a5568;
  transition: transform 0.2s ease;
}

/* Drehung des Pfeils, wenn geöffnet */
.haupt-menue details[open] > summary::after,
.auswahl-box details[open] > summary::after {
  transform: rotate(90deg);
}

/* Box für die Unterbegriffe */
.auswahl-box {
  padding: 10px 0 10px 20px;
}

/* Inhaltstext-Styling mit Einblende-Animation */
.text-inhalt {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Strukturierung der Unterblöcke (Vorteile, Nachteile...) */
.list-container {
  margin-top: 15px;
  padding: 15px;
  border-radius: 6px;
  background: #f7fafc;
}

/* Gestylte Listen */
.styled-list {
  padding-left: 20px;
  margin: 5px 0 0 0;
}

.styled-list li {
  margin-bottom: 8px;
  color: #4a5568;
}

/* Suchfeld und A B C Leiste */

/* Der neue Container, der unter dem Hauptmenü kleben bleibt */
/* Der korrigierte Container, der bündig abschließt und Text perfekt verdeckt */
.sticky-such-bereich {
  position: -webkit-sticky; /* Unterstützung für ältere Safari-Browser */
  position: sticky;
  top: 45px;               /* Falls noch ein minimaler Spalt da ist, auf 69px oder 68px testen */
  background-color: #ffffff; /* Reines Weiß, damit kein Text durchscheint */
  z-index: 999;            /* Liegt über den Begriffen, aber unter dem Hauptmenü */
  padding: 15px 20px;      /* Innenabstand links/rechts schützt vor seitlichem Durchscheinen */
  margin-left: -20px;      /* Gleicht den Innenabstand aus, damit es bündig bleibt */
  margin-right: -20px;     /* Gleicht den Innenabstand aus, damit es bündig bleibt */
  margin-bottom: 25px;
  border-bottom: 2px solid #e2e8f0; /* Etwas deutlichere Trennlinie beim Scrollen */
  box-sizing: border-box;
}


/* Zentrierte und moderne ABC-Leiste */
.abc-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 15px;
  font-family: Arial, sans-serif;
}

.abc-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #2d3748;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Hover-Effekt für die Buchstaben */
.abc-navigation a:hover {
  background: #3182ce;
  color: #ffffff;
  border-color: #3182ce;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styling für das Suchfeld */
.such-container {
  margin: 0 auto;
  max-width: 100%;
}

#glossarSuche {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  outline: none;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#glossarSuche:focus {
  border-color: #3182ce;
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15);
}

