/* Styling für den gesamten Banner-Bereich */
.site-grid > .container-top-a {
    height:70px !important; /* Gewünschte Gesamthöhe des Banners */
    max-height: 150px !important;
    min-height: 0 !important;
    background-color: #e6e4e5 !important; /* Dunkelblau (Hier Wunschfarbe als HEX-Code eintragen) */
    overflow: hidden !important;
}

/* Zentrierung und Schriftfarbe für das Custom-Modul darin */
.container-top-a .mod-custom {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Zentriert den Text vertikal */
    align-items: center !important;     /* Zentriert den Text horizontal */
    color: #1e3a8a  !important;           /* Blaue Schriftfarbe */
    text-align: center !important;
    padding: 15px !important;            /* Sicherheitsabstand zum Rand */
}

/* 1. Ebene (Hauptmenü) */
.mod-menu.nav.menu.mod-list > .mod-menu__item > a {
    color: #FF0000 !important; /* Testfarbe: Rot */
}

/* 2. Ebene (Erstes Untermenü) */
.mod-menu.nav.menu.mod-list .mod-menu__sub .mod-menu__item > a {
    color: #00FF00 !important; /* Testfarbe: Grün */
}

/* sidebar links und rechts fixieren*/
.container-sidebar-left, 
.sidebar-left {
  position: sticky;
  top: 155px; /* Abstand zum oberen Bildschirmrand beim Scrollen */
  align-self: flex-start;
}

.container-sidebar-right, 
.sidebar-right {
  position: sticky;
  top: 155px; /* Abstand zum oberen Bildschirmrand beim Scrollen */
  align-self: flex-start;
}

/* Footer-Bereich für volle Breite öffnen */
.footer-inner {
  display: block !important;
  width: 100% !important;
}

/* Das Modul selbst auf 100% Breite setzen */
.footer-inner .mod-custom {
  width: 100% !important;
  max-width: 100% !important;
}

/* Die Tabelle im Modul über die gesamte Breite strecken */
.footer-inner table {
  width: 100% !important;
  table-layout: fixed; /* Sorgt für gleichmäßige Spaltenaufteilung */
}

/* Reduziert den oberen und unteren Abstand im Footer-Bereich */
.site-footer {
  padding-top: 0rem !important;    /* Standard ist oft 4rem oder mehr */
  padding-bottom: 0rem !important; /* Standard ist oft 4rem oder mehr */
}

/* Entfernt zusätzliche Abstände der Tabelle und des Moduls */
.site-footer .mod-custom,
.site-footer table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Verhindert, dass der "Nach oben"-Link den Footer hochdrückt */
.footer .back-to-top-link {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  margin: 0 !important;
  padding: 10px !important;
  z-index: 9999 !important;
  background: #ffffff !important; /* Gibt dem schwebenden Link einen weißen Hintergrund */
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

/* Entfernt jeglichen verbliebenen Rest-Abstand im Footer-Container */
footer.footer, 
.site-footer,
.footer-inner {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: auto !important;
}

/* 2. Alternativ das Menü-Modul direkt in der Sidebar einfärben */
.sidebar-left .mod-menu,
.site-sidebar-left .mod-menu {
  background-color: #e6e4e5 !important; /* Falls das Grid oben blockiert */
  padding: 15px !important;
  border-radius: 4px;
}

/* Ersetzt das Cassiopeia-Blau im Kopfbereich durch ein leichtes Grau */
.container-header {
  background-color: #e6e4e5!important; /* Ein schönes, helles Grau */
  background-image: none !important;    /* Löscht das standardmäßige Blau-Gradientenbild */
}

/* Exakte Färbung über die eindeutige ID des Suchfelds */
#mod-finder-searchword111,
input.js-finder-search-query.form-control {
    background-color: #e6e4e5 !important;
    color: #333333 !important;
    border: 1px solid #b3b3b3 !important;
}

/* Verhindert das Zurückfärben beim Reinklicken */
#mod-finder-searchword111:focus,
input.js-finder-search-query.form-control:focus {
    background-color: #d8d8d8 !important;
    color: #000000 !important;
    border-color: #8c8c8c !important;
    box-shadow: none !important; /* Entfernt den blauen Standard-Leuchteffekt */
}