.header.container-header {
    position: relative;
    top: -20px;
}





/* Nur die rechte Sidebar schmaler machen */
@media (min-width: 992px) {
  .grid-child.container-sidebar-right {
    width: calc(100% - 97px) !important;
    margin-left: auto; /* Hält die Sidebar rechtsbündig am Rand */
  }
}


/* Abstand der Artikel/Hauptspalte vom linken Rand um 50px erhöhen */
@media (min-width: 992px) {
  .grid-child.container-component {
    padding-left: 55px;
  }
}


/* Abstand der Artikel/Hauptspalte vom linken Rand um 50px erhöhen */
@media (min-width: 992px) {
  .grid-child.container-component {
    padding-right: 50px;
  }
}






/* 1. BANNER BEGRENZUNG */
.container-banner {
  max-width: var(--cassiopeia-container-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cassiopeia-gutter, 1rem);
  padding-right: var(--cassiopeia-gutter, 1rem);
}

/* 2. GRAUER HINTERGRUND FÜR DAS MENÜ */
.container-header .mod-menu,
ul.mod-menu {
  background-color: #888888 !important; /* Grauer Balken */
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important; /* Waagerechte Ausrichtung */
  flex-wrap: wrap;
  list-style: none !important;
}

/* 3. MENÜEINTRÄGE (FETT, WEISS & 20PX SCHRIFTGRÖSSE) */
ul.mod-menu > li > a,
ul.mod-menu > li > span,
ul.mod-menu .nav-link {
  color: #ffffff !important; /* Weiße Schrift */
  font-weight: bold !important; /* Fette Schrift */
  font-size: 21px !important; /* Neue Schriftgröße */
  padding: 10px 18px !important; /* Innenabstand der Felder */
  display: block !important;
  text-decoration: none !important;
}

/* 4. AKTIVER MENÜPUNKT ("AKTUELL" - ROT) */
ul.mod-menu > li.active > a,
ul.mod-menu > li.active > span,
ul.mod-menu > li.active,
ul.mod-menu > li.current > a {
  background-color: #cc2222 !important; /* Roter Hintergrund */
  color: #ffffff !important;
}

/* 5. HOVER-EFFEKT */
ul.mod-menu > li > a:hover,
ul.mod-menu > li > span:hover {
  background-color: #666666 !important; /* Dunkelgrau beim Drüberfahren */
  color: #ffffff !important;
}





/* 1. FARBSCHEMA 'ALTERNATIVE' VOLLSTÄNDIG AUF WEISS UMSTELLEN */
:root,
body,
body.site,
.site-grid,
header.header,
.container-header {
  --cassiopeia-color-primary: #ffffff !important;
  --template-color-primary: #ffffff !important;
  --template-bg-dark: #ffffff !important;
  --template-bg-light: #f8f9fa !important;

  background-color: #F4F5F7 !important;
  background-image: none !important;
}

/* 2. TEXT- UND LINKFARBEN ANPASSEN (Damit Schrift lesbar bleibt) */
body {
  color: #212529 !important; /* Dunkle Schrift für den Fließtext */
}

a {
  color: #cc2222 !important; /* Rote Links passend zu Ihrem aktiven Menüpunkt */
}

a:hover,
a:focus {
  color: #990000 !important;
}


/* FOOTER VOLLSTÄNDIG AUF WEISS UMSTELLEN */
footer,
footer.footer,
.container-footer,
.container-footer.full-width {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid #e5e5e5; /* Optional: Eine dezent graue Trennlinie nach oben */
  color: #333333 !important;
}

/* Text und Links im Footer dunkel & gut lesbar machen */
.container-footer,
.container-footer p,
.container-footer div,
.container-footer span,
.container-footer a {
  color: #333333 !important;
}

/* Hover-Effekt für Links im Footer (Rot wie das Menü) */
.container-footer a:hover {
  color: #cc2222 !important;
  text-decoration: underline !important;
}



/* 1. ÄUSSERSTE EBENE: HELLGRAU (NUR HTML) */
html,
html#is-global {
  background-color: #e2e8f0 !important; /* Modernes Hellgrau außen */
  background: #e2e8f0 !important;
  background-image: none !important;
}

/* 2. INNERE SEITE: WEISSER CONTAINER IN DER MITTE */
body,
body.site {
  max-width: 1320px !important;
  margin: 30px auto !important; /* Erzeugt den grauen Rand oben/unten/seitlich */
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 3. ALLE INNENBEREICHE WEISS HALTEN */
.site-grid,
header.header,
.container-header,
.container-banner,
.container-main,
.container-footer,
footer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  margin: 0 !important;
  grid-gap: 0 !important;
  gap: 0 !important;
}

/* 4. HEADER & LOGO TEXT */
.container-header .navbar-brand,
.container-header .brand-title,
.container-header a {
  color: #333333 !important;
}

/* 5. HAUPTMENÜ */
.container-header .mod-menu,
.container-header [class*="position-menu"] {
  background-color: #888888 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.container-header [class*="position-menu"] a,
.container-header .mod-menu a,
.container-header .mod-menu .nav-link {
  color: #ffffff !important;
  font-weight: bold !important;
  padding: 10px 18px !important;
  display: block !important;
  text-decoration: none !important;
}

.container-header [class*="position-menu"] .active a,
.container-header .mod-menu li.active > a {
  background-color: #cc2222 !important;
  color: #ffffff !important;
}

.container-header [class*="position-menu"] a:hover,
.container-header .mod-menu a:hover {
  background-color: #666666 !important;
  color: #ffffff !important;
}

/* 6. FOOTER TEXT */
.container-footer,
.container-footer a {
  color: #333333 !important;
}

.container-footer a:hover {
  color: #cc2222 !important;
}




/* Rahmen und Schatten von allen Modulen und Cards in der rechten Sidebar entfernen */
.container-sidebar-right .card,
.container-sidebar-right div[class*="sidebar"],
div.sidebar-right .card,
div.sidebar-right div.card-body {
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    --card-border-width: 0px !important;
}











/* Metismenu-Navigationsleiste waagerecht erzwingen */
ul.metismenu.nav-pills,
ul.mod-menu.nav-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

ul.metismenu.nav-pills > li,
ul.mod-menu.nav-pills > li {
  margin-right: 2px !important;
  margin-bottom: 0 !important;
}










CSS
/* 2 Spalten für den Kategorieblog erzwingen */
.com-content-category-blog .blog-items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}


/* Footer auf volle Breite und Flex-Ausrichtung setzen */
.container-footer {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

/* Das "Eigene HTML"-Modul im Footer nach rechts schieben */
.container-footer .grid-child,
.container-footer .mod-custom,
.container-footer .mod-custom118 {
  margin-left: auto !important;
  text-align: right !important;
}



/* 20px Abstand zum rechten Rand ergänzen */
.container-footer .mod-custom,
.container-footer .mod-custom118 {
  margin-right: 65px !important;
}



/* Rahmen um Module in der Position top-a entfernen */
.container-top-a .card,
div.top-a.card {
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  --card-border-width: 0px !important;
}






body {
    background-color: #f4f4f4;
}


/* Stellt die alte hidden-phone Funktionalität in Joomla 4 wieder her */
@media (max-width: 767.98px) {
  .hidden-phone {
    display: none !important;
  }
}




/* Aktiven Seitennavigations-Button (.page-link) hellgrau färben */
.page-item.active .page-link,
.page-link.active {
  background-color: #d3d3d3 !important;
  border-color: #cccccc !important;
  color: #212529 !important; /* Dunkle Schrift für gute Lesbarkeit */
}

/* Hover-Zustand für den aktiven Button */
.page-item.active .page-link:hover,
.page-link.active:hover {
  background-color: #c0c0c0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

/* Optional: Inaktive Buttons bei Hover leicht grau hinterlegen */
.page-link:hover {
  background-color: #e9ecef !important;
  color: #212529 !important;
}




/* Seitentitel / Artikelüberschriften in der mobilen Ansicht nach rechts rücken */
@media (max-width: 991.98px) {
  .page-header,
  .com-content-category-blog__item h2,
  .item-content h2 {
    padding-left: 5px;
  }
}


/* Eigenes Modul in der mobilen Ansicht um 10px nach rechts rücken */
@media (max-width: 991.98px) {
  .mod-custom,
  .grid-child.container-component {
    padding-left: 10px;
  }
}



/* Erzwingt den Abstand bei ALLEN linksbündigen Bildern & Bild-Containern */
.com-content img,
.mod-custom img,
figure.float-start,
figure[style*="float: left"],
figure[style*="float:left"],
img.float-start,
img[style*="float: left"],
img[style*="float:left"],
img[align="left"] {
  margin-right: 20px !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}







/* Nur die Archiv-Jahresbuttons schlanker/kompakter machen */
.container-top-a .nav-link,
.container-top-a .mod-menu a {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  font-size: 1,2rem !important;
  line-height: 1.6 !important;
}






/* Abstand zwischen den Menüpunkten verringern */
ul.mod-menu.nav-pills {
    gap: 0px !important; /* Alternativ 0px für gar keinen Abstand */
}



/* 1. Margins der einzelnen Listenelemente entfernen */
ul.mod-menu li,
ul.mod-menu .nav-item {
    margin: 0 !important;
}

/* 2. Abstand der Menüpunkte über gap steuern */
ul.mod-menu.nav-pills {
    gap: 4px !important; /* Oder 0px */
}

/* 3. Margins der Links zurücksetzen */
ul.mod-menu .nav-link {
    margin: 0 !important;
}



/* Mobile Optimierung für kleine Bildschirme */
@media (max-width: 991.98px) {
    /* Menü vertikal untereinander stapeln */
    ul.mod-menu.nav-pills {
        flex-direction: column !important;
        width: 100% !important;
        gap: 4px !important; /* Leicht vergrößerter Abstand für die Bedienung mit dem Finger */
    }

    /* Jedes Listenelement auf volle Breite dehnen */
    ul.mod-menu li,
    ul.mod-menu .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Links zentrieren und Touch-Fläche vergrößern */
    ul.mod-menu .nav-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 15px !important;
    }
}


/* Mobile Optimierung für kleine Bildschirme */
@media (max-width: 991.98px) {
    /* Menü vertikal untereinander stapeln */
    ul.mod-menu.nav-pills {
        flex-direction: column !important;
        width: 100% !important;
        gap: 4px !important; /* Leicht vergrößerter Abstand für die Bedienung mit dem Finger */
    }

    /* Jedes Listenelement auf volle Breite dehnen */
    ul.mod-menu li,
    ul.mod-menu .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Links zentrieren und Touch-Fläche vergrößern */
    ul.mod-menu .nav-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 15px !important;
    }
}



/* === HOCHPRIORITÄRE NAVIGATION (GANZ OBEN IN USER.CSS EINFÜGEN) === */

/* 1. Desktop & Basis (Flach, 0px Abstand, volle graue Leiste) */
.container-header,
.container-header .navbar,
.container-header .container-fluid,
.container-header .mod-menu {
    width: 100% !important;
    max-width: 100% !important;
}

ul.mod-menu.nav-pills {
    display: flex !important;
    gap: 0px !important;
    background-color: #888888 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.mod-menu li,
ul.mod-menu .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

ul.mod-menu .nav-link {
    margin: 0 !important;
    padding: 4px 10px !important;
    line-height: 1.2 !important;
}

/* 2. Mobilgeräte */
@media (max-width: 991.98px) {
    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #333 !important;
        border: 1px solid #555 !important;
        padding: 8px 12px !important;
        margin: 5px 0 !important;
        cursor: pointer !important;
    }

    .navbar-toggler-icon {
        width: 1.5em !important;
        height: 1.5em !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-toggler::after {
        content: "Menü" !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    .navbar-collapse {
        background-color: #555 !important;
        padding: 10px !important;
        margin-top: 5px !important;
    }

    .navbar-collapse ul.mod-menu.nav-pills {
        flex-direction: column !important;
        width: 100% !important;
        gap: 4px !important;
        background-color: transparent !important;
    }

    .navbar-collapse ul.mod-menu .nav-item,
    .navbar-collapse ul.mod-menu .nav-link {
        width: 100% !important;
        text-align: left !important;
    }
}