.container-header {
      background-color: darkgreen;
      background-image: none;
    }
.container-body {
  background-color: lightgreen;
}
/* 1. Den echten Joomla-Banner-Container ansprechen */
.container-banner {
    background-color: darkgreen;
    width: 100% !important;
    height: 480px !important;
    display: flex !important;
    justify-content: center !important; /* Zentriert Showplus horizontal */
    align-items: center !important;     /* Zentriert Showplus vertikal */
    position: relative !important;
    overflow: hidden !important;
}

/* 2. SHOWPLUS-ERZWINGUNG (Nutzt die exakte ID aus deinem HTML) */
#showplus_images_showplus_banner-fix,
#showplus_images_showplus_banner-fix .showplusx-slideshow,
#showplus_images_showplus_banner-fix .showplus-slideshow {
    width: 1080px !important;
    height: 480px !important;
    max-width: 1080px !important;
    max-height: 480px !important;
    margin: 0 auto !important; /* Sorgt für die Zentrierung im Flex-Layout */
    float: none !important;
    position: relative !important;
}

/* 3. Die eigentlichen Bilder im Slider auf 1080x480 fixieren */
#showplus_images_showplus_banner-fix img {
    width: 1080px !important;
    height: 480px !important;
    max-width: 1080px !important;
    max-height: 480px !important;
    object-fit: cover !important; /* Schneidet die Bilder sauber proportional zu */
    display: block !important;
}

/* 4. Die kleinen Seitenzahlen (Pager) unter dem Bild verstecken oder zentrieren */
#showplus_images_showplus_banner-fix .showplus-pager {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
    background: rgba(0,0,0,0.5) !important; /* Macht den Hintergrund leicht dunkel für Lesbarkeit */
    padding: 2px 10px !important;
    border-radius: 10px !important;
    color: white !important;
}
#showplus_images_showplus_banner-fix .showplus-pager a {
    color: white !important;
}

    h1, h2, h3, h4, h5, h6 {
      color: darkgreen;
    }
    .h1, .h2, .h3, .h4, .h5, .h6 {
      color: darkgreen;
    }
    a, a:hover, a:focus {
      color: darkgreen;
    }
    .btn-info {
        background-color: darkgreen;
        border-color: #30638d;
        color: #fff;
    }
    .btn-primary, .btn-primary:focus, .btn-primary:hover {
        background-color: darkgreen;
        border-color: var(--cassiopeia-color-hover);
    }

    .btn-check:focus + .btn-info, .btn-info:focus, .btn-info:hover {
        background-color: darkgreen;
        border-color: #264f71;
        color: #fff;
    }

.container-footer {
       background-color: darkgreen !important;
       background-image: none;
       text-color: white;
}

.footer {
 
background-color: darkgreen !important;
       background-image: none;
       text-color: white !important;
}