/* 1. Den allgemeinen Overlay behalten (für den Hintergrund und Text-Lesbarkeit) */
header.masthead:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #212529;
  opacity: 0.5;
  z-index: 1; /* Ebene 1: Der Schleier */
}

/* 2. Den Inhalt (Text) über den Schleier heben, damit er lesbar bleibt */
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  position: relative;
  z-index: 2; /* Ebene 2: Text liegt ÜBER dem Schleier */
  color: #fff;
}

/* 3. Das Logo komplett vom Schleier befreien */
/* Wir heben es auf Ebene 3 und entfernen ggf. eigene Opacity */
header.masthead img {
  position: relative;
  z-index: 3; /* Ebene 3: Logo liegt GANZ OBEN, ohne den Schleier-Effekt */
  /* Falls das Logo selbst eine Opacity hat, auf 1 setzen */
  opacity: 1 !important; 
}

/* Hover-Effekt für Dropdowns nur auf Bildschirmen größer als 992px (Desktop) */
@media (min-width: 992px) {
    /* Wenn man über das li.dropdown fährt, zeige das ul.dropdown-menu */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Verhindert ein kleines Springen */
    }
    
    /* Optional: Sicherstellen, dass der Toggle-Pfeil auf Desktop keine Klicks stört */
    .navbar-nav .dropdown-toggle::after {
        display: none; /* Pfeil ausblenden, wenn Hover funktioniert (optional) */
    }
}

@media (min-width: 992px) {
    /* 1. Das Menü ist standardmäßig unsichtbar, aber im DOM vorhanden (für die Animation) */
    .navbar-nav .dropdown .dropdown-menu {
        display: block;       /* Wichtig: Immer 'block', damit wir animieren können */
        opacity: 0;           /* Unsichtbar */
        visibility: hidden;   /* Nicht klickbar */
        margin-top: 10px;     /* Etwas nach unten versetzt (Startposition) */
        transition: all 0.6s ease-in-out; /* Die Animation: 0.4 Sekunden lang */
        transform: translateY(-10px); /* Noch etwas weiter nach oben geschoben */
    }

    /* 2. Beim Hover: Sichtbar machen */
    .navbar-nav .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        margin-top: 0;        /* An die richtige Position rutschen */
        transform: translateY(0); /* Keine Verschiebung mehr */
    }
}

.navbar-brand-logo {
    max-height: 160px;
    width: auto;
    display: block; /* Vermeidet unerwünschte Abstände unter dem Bild */
}

.page-heading-container {
    padding: 10px 0;
    margin: 0;
}

.page-heading-title {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300 !important;.
    letter-spacing: 0.5px;
    font-size: 2.0rem; /* Etwas kleiner als die vorherigen 2.5rem */
    text-transform: none;.
}

.mobile-spacer-h1 {
    margin: 0;
}

.masthead-structure {
    min-height: auto !important; /* Erzwingt dynamische Höhe */
    padding-top: 15px !important;    /* Reduziert Abstand oben */
    padding-bottom: 15px !important; /* Reduziert Abstand unten */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.figure-caption p {
    margin: 0;
}

/* Unterstreichung in Tabellen entfernen */
/* 
 * Umfassender Fix für Tabellen in Django-CMS Plugins
 * 1. Entfernt Bootstrap-Zeilenlinien
 * 2. Setzt Ausrichtung: Vertikal oben, Horizontal links
 * 3. Fügt angenehmes Padding hinzu
 */

/* 
 * Fix für Tabellen in <figure class="table"> 
 * Zielt spezifisch auf die Struktur in Ihrem HTML-Code ab
 */

/* Override für Bootstrap Tabellen-Standard */
.table > :not(caption) > * > * {
  /* Behalten wir bei, damit Variablen funktionieren */
  background-color: var(--bs-table-bg);
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);

  /* ÄNDERUNG 1: Linien entfernen */
  border-bottom-width: 0px; 

  /* ÄNDERUNG 2: Padding anpassen (0.5rem ist oft zu wenig für schöne Luft) */
  /* Beispiel: 1rem oben/unten, 1.5rem links/rechts */
  padding: 1rem 1.5rem; 

  /* ÄNDERUNG 3: Ausrichtung erzwingen */
  /* Hinweis: vertical-align und text-align müssen ggf. direkt am Element sein, 
     falls der Bootstrap-Selektor sie nicht abdeckt. Sicherer ist oft eine Zusatzregel: */
}

/* Zusätzliche Regel für Ausrichtung, falls sie vom obigen Selektor nicht erfasst wird */
.table > :not(caption) > * > * {
  vertical-align: top !important;
  text-align: left !important;
}

.table td p, 
.table th p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5; /* Lesbarkeit erhalten */
}

p {
  margin: 1rem 0;
}

ul li {
    margin: 0 !important;
}

ul li p {
    margin: 0 !important;
}