#sp-menu .sp-dropdown-inner {
    background-color: #D2D2D2; /* Ihre Wunschfarbe */
}
#sp-menu .sp-dropdown-inner li > a {
    color: #333; /* Farbe der Links */
}
#sp-menu .sp-dropdown-inner li > a:hover {
    color: #fff; /* Schriftfarbe beim Hover */
    background-color: #D2D2D2; /* Hintergrund beim Hover */
}

#sp-main-body {
  padding: 0px 0;
}

.article-details .article-header h1, .article-details .article-header h2, .article-details .article-header h4 {
  font-size: 1.25rem;
}
/* Erhöht die Höhe des mobilen Headers */
#sp-header {
    height: 60px; /* Anpassen des Wertes */
}

/* Erhöht den oberen Bereich des Off-Canvas Menüs */
.offcanvas-menu .offcanvas-inner {
    padding-top: 50px; /* Anpassen des Wertes */
}

header#sp-header { height: 130px !important; 
}

.jem-module-class { /* Klasse des JEM Moduls anpassen */
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Spalten */
}
.jem-item {
    flex: 0 0 calc(50% - 10px); /* 50% Breite minus halber Gap */
}
.jem-module-class {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/*Termine-Modul*/
div#jemmodulebanner .event-title {
    font-size: 1.2em !important; 
    margin: 0 0 5px;
}
/* Uhrzeit im JEM Banner Modul */
div#jemmodulebanner .time {                
    font-size: 16px; 
    font-weight: normal;
}
div#jemmodulebanner .time {
  background: url(img/time.webp) display: none !importent;
padding-left: 30px;
 }

/* Detailansicht */
.componentheading  {
    font-size: 1.25em !important;
    line-height: 1.5;
}

.jem  {
    font-size: 1.0em !important;
    line-height: 1.5;
}
div#jem {background-color: #DADADA;
}

div#jem h2 {background-color: #c3c3c3;
}

div#jemmodulebanner .eventset {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #B8261F;
  text-align: left;
}
div#jemmodulebanner .hr {
  color: #B8261F;
  height: 12px;
}

#sp-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
}

/* ==========================================================================
   1. HAUPTMENÜ (TOP LEVEL)
   ========================================================================== */
.sp-megamenu-parent > li.active > a, 
.sp-megamenu-parent > li:hover > a {
    color: #d32f2f !important;
    text-decoration: underline !important;
    text-underline-offset: 10px; 
    text-decoration-thickness: 4px !important; /* Kräftiger Unterstrich */
}

/* ==========================================================================
   2. UNTERMENÜ (DROPDOWN) - RÄUMLICH & KOMPAKT
   ========================================================================== */
.sp-megamenu-parent .sp-dropdown {
    border-top: 5px solid #d32f2f !important; 
    background-color: #fcfcfc !important; 
    box-shadow: 0 15px 45px rgba(0,0,0,0.25); 
    border-radius: 0 0 5px 5px;
    padding: 0 !important; 
    margin: 0 !important;
    min-width: 230px;
    overflow: hidden;
}

/* Einzelne Menüpunkte im Untermenü */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    padding: 12px 20px;
    color: #333333 !important; 
    font-size: 13px !important;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}

/* KLEINES DREIECK RECHTS (NUR BEI PUNKTEN MIT UNTERMENÜS) */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child > a::after {
    content: ""; 
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #d32f2f; /* Das rote Dreieck */
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Effekt: Dreieck dreht sich leicht beim Hover */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child:hover > a::after {
    transform: translateX(3px); /* Bewegt sich leicht nach rechts */
}

/* Hover-Effekt im Untermenü */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background-color: #f0f0f0 !important; 
    color: #d32f2f !important; 
    padding-left: 25px; 
}

/* Letzte Trennlinie im Dropdown entfernen */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:last-child > a {
    border-bottom: none;
}

/* ==========================================================================
   3. GLOBALE BUTTONS (ROT)
   ========================================================================== */
.sppb-btn-primary, 
.btn-primary,
button[type="submit"],
.jem-button {
    background-color: #d32f2f !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 25px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.sppb-btn-primary:hover, 
.btn-primary:hover {
    background-color: #b71c1c !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* ==========================================================================
   4. JEM-BANNER (ZWEISPALITG) & HEADER
   ========================================================================== */
.jem-banner, .jem-module { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#sp-header.sticky {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .jem-banner, .jem-module {
        grid-template-columns: 1fr;
    }
}
/* 1. Container-Blockaden lösen */
.sp-megamenu-parent .sp-dropdown, 
.sp-megamenu-parent .sp-dropdown-inner, 
.sp-megamenu-parent .sp-dropdown-items {
    overflow: visible !important;
}

/* 2. Die 3. Ebene erzwingen */
.sp-megamenu-parent .sp-dropdown-items .sp-has-child:hover > .sp-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 100% !important; /* Nach rechts ausklappen */
    top: 0 !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1) !important;
}

/* 3. Sicherstellen, dass die Liste innerhalb der 3. Ebene vertikal ist */
.sp-megamenu-parent .sp-dropdown-items .sp-has-child:hover > .sp-dropdown .sp-dropdown-items {
    display: block !important;
}