body.site {
    background-image: url('/images/layout/BG_Grey.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
margin-top: 1em;
background-color: white;
padding: 20px;
}

/* --- Anpassungen nur für mobile Geräte (Smartphones) --- */
@media only screen and (max-width: 767px) {

    /* Beispiel: Ändere die Schriftgröße im Hauptcontainer */
    .container {
        font-size: 0.9rem;
    }

    /* Beispiel: Passe die Größe von Überschriften an */
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1rem;
    }
}

/* --- Mobile Menu Farben anpassen --- */
@media only screen and (max-width: 767px) {

    /* Hintergrundfarbe des gesamten mobilen Menüs */
    .container-header .nav-collapse {
        background-color: #1a1a2e; /* Dunkelblau, kannst du ändern */
    }

    /* Hintergrundfarbe der Menü-Items */
    .container-header .nav-collapse .nav-item {
        background-color: transparent;
    }

    /* Link-Farbe der Menüpunkte */
    .container-header .nav-collapse .nav-link {
        color: #ffffff !important; /* Weiß */
    }

    /* Link-Farbe beim Hover/Überfahren */
    .container-header .nav-collapse .nav-link:hover,
    .container-header .nav-collapse .nav-link:focus {
        color: #ffd700 !important; /* Gold, kannst du ändern */
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Aktiver Menüpunkt (die Seite, auf der du gerade bist) */
    .container-header .nav-collapse .nav-item.active .nav-link {
        color: #ffd700 !important; /* Gold */
        font-weight: bold;
    }

    /* Untermenü (Dropdown) */
    .container-header .nav-collapse .dropdown-menu {
        background-color: #16213e; /* Etwas dunkler für Untermenüs */
        border: none;
    }

    /* Untermenü-Links */
    .container-header .nav-collapse .dropdown-item {
        color: #e0e0e0 !important;
    }

    /* Untermenü-Links beim Hover */
    .container-header .nav-collapse .dropdown-item:hover {
        color: #ffd700 !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Hamburger-Button (Toggle) Farbe */
    .container-header .navbar-toggler {
        color: #004b00; /* Grün */
        border-color: rgba(0, 0, 0, 0.5);
    }

    /* Hamburger-Button Icon */
    .container-header .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Schließen-Button (X) im offenen Menü */
    .container-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M6 24L24 6'/%3e%3c/svg%3e");
    }

    /* Suchfeld im mobilen Menü (falls vorhanden) */
    .container-header .nav-collapse .mod-finder .form-control {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .container-header .nav-collapse .mod-finder .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }
}


/* Abstand um Bilder in den Beiträgen */
.com-content .item-page img, 
.com-content .category-list img {
    margin: 10px; /* Erzeugt einen gleichmässigen Abstand rundherum */
}

/*figure {
  max-width: 30%;
  flex-basis: 50%;
margin: 10px;
}

.bild-klein img {
max-width: 30%;
  max-width: 375px !important;
  height: auto !important;
  margin: 10px;
}

.img left {
  margin: 10px;
  float: left;
}*/

/* Für Cassiopeia Template optimiert 
.blog-image-float { */
  .item-image {
    float: left;
    margin: 0 15px 15px 0;
    max-width: 50%;
    height: auto;
    /*border-radius: 8px; /* Optional: abgerundete Ecken */
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Optional: leichter Schatten */
}

/* Mobile Anpassung für Cassiopeia */
@media (max-width: 767px) {
    /*.blog-image-float { */
  .item-image {
        float: none;
        display: block;
        margin: 15px auto;
        max-width: 100%;
    }
}


/* Farbe des Haupttitels im Beitrag (H1) */
.page-header h1, 
.com-content-article__title {
  color: #004b00 !important; /* Ersetze dies mit deiner Wunschfarbe (z.B. Hex-Code) */
}

/* Titel in der Blog-Übersicht */
.blog-items .page-header h2 a,
.com-content-category-blog__item h2 a {
  color: #004b00 !important; /* Standardfarbe des Titels im Blog */
  text-decoration: none;
}

/* Farbe, wenn man mit der Maus über den Blog-Titel fährt (Hover) */
.blog-items .page-header h2 a:hover,
.com-content-category-blog__item h2 a:hover {
  color: #00a900 !important; /* Hover-Farbe */
  text-decoration: underline;
}


/* Option A: Kräftiges, modernes Grün */
.modul-gruen {
  background-color: #004b00 !important; /* Bootstrap-Erfolgsgrün */
  color: #ffffff !important; /* Weiße Schrift für guten Kontrast */
  padding: 1.5rem; /* Abstand vom Text zum Rand */
  border-radius: 8px; /* Leicht abgerundete Ecken */
}

/* Sorgt dafür, dass auch Links und Überschriften im grünen Modul weiß werden */
.modul-gruen h1, .modul-gruen h2, .modul-gruen h3, .modul-gruen a {
  color: #ffffff !important;
}

/* Überschreiben des css damit die Footermodule Obenbündig sind*/
.footer .grid-child {
justify-content: space-between;
align-items: baseline;
padding: 2.5rem .5em;
}