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

/* ============================================
   ÜBERSCHRIFTEN
   ============================================ */
@layer user {
    h1, .card-header {
        color: #004b00 !important;
    } 
}

/* ============================================
   HEADER - HINTERGRUND & NAVIGATION
   ============================================ */

.container-header {
    background-color: rgb(237, 241, 242) !important;
    background-image: none !important;
}

/* Alle Navigationslinks im Header auf dunkelgrün */
.container-header .nav-link,
.container-header .mod-menu__item a,
.container-header .navbar-nav .nav-item a,
.container-header .menu a,
.container-header ul li a,
.container-header nav a,
header .nav-link,
header .mod-menu__item a,
header .navbar-nav .nav-item a,
header .menu a,
header ul li a,
header nav a,
.container-header a,
header a {
    color: #004b00 !important;
}

/* Hover-Effekte */
.container-header .nav-link:hover,
.container-header .mod-menu__item a:hover,
.container-header .navbar-nav .nav-item a:hover,
.container-header .menu a:hover,
.container-header ul li a:hover,
.container-header nav a:hover,
header .nav-link:hover,
header .mod-menu__item a:hover,
header .navbar-nav .nav-item a:hover,
header .menu a:hover,
header ul li a:hover,
header nav a:hover {
    color: #002a00 !important;
    text-decoration: underline !important;
}

/* Hamburger-Menü-Icon für Mobile (Desktop-Variante) */
.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='%23004b00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown-Pfeile */
.container-header .dropdown-toggle::after,
header .dropdown-toggle::after {
    color: #004b00 !important;
    border-top-color: #004b00 !important;
}

/* Aktive Menüpunkte */
.container-header .active > a,
header .active > a {
    color: #004b00 !important;
    font-weight: bold !important;
}

/* Menü in der Position 'menu' rechts ausrichten */
.container-header .container-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-bottom: 1em;
}

/* Modul in der Position 'topbar' positionieren */
.container-topbar {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   MOBILES MENU (unter 767px)
   ============================================ */
@media only screen and (max-width: 767px) {
    .container-header .nav-collapse {
        background-color: #1a1a2e;
    }

    .container-header .nav-collapse .nav-item {
        background-color: transparent;
    }

    .container-header .nav-collapse .nav-link {
        color: #ffffff !important;
    }

    .container-header .nav-collapse .nav-link:hover,
    .container-header .nav-collapse .nav-link:focus {
        color: #ffd700 !important;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .container-header .nav-collapse .nav-item.active .nav-link {
        color: #ffd700 !important;
        font-weight: bold;
    }

    .container-header .nav-collapse .dropdown-menu {
        background-color: #16213e;
        border: none;
    }

    .container-header .nav-collapse .dropdown-item {
        color: #e0e0e0 !important;
    }

    .container-header .nav-collapse .dropdown-item:hover {
        color: #ffd700 !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .container-header .navbar-toggler {
        color: #004b00;
        border-color: rgba(0, 0, 0, 0.5);
    }

    .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") !important;
    }

    .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") !important;
    }

    .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);
    }
}

/* ============================================
   TABLET: Desktop-Menü horizontal (768-1024px)
   ============================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        height: auto !important;
    }

    .metismenu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }

    .metismenu > li {
        display: inline-block !important;
        float: none !important;
        list-style: none !important;
        margin: 0 !important;
    }

    .metismenu > li > a,
    .metismenu > li > button {
        display: inline-block !important;
        padding: 1px 1px !important;
        white-space: nowrap !important;
    }

    /* Icons ausblenden */
    .fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-light, .fa-brands,
    i[class*="fa-"], i[class*="icon-"], span[class*="fa-"],
    .metismenu i, .metismenu .fa, .metismenu .fas, .metismenu .far,
    .metismenu .fa-solid, .metismenu .fa-regular, .nav-icon, .menu-icon {
        display: none !important;
    }

    .metismenu .mm-toggler-nolink .mm-toggler {
        display: none !important;
    }

    .metismenu .mm-collapse {
        position: absolute !important;
        background: white !important;
        min-width: 200px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        display: none !important;
    }

    .metismenu li:hover > .mm-collapse {
        display: block !important;
    }

    .metismenu .mm-collapse li {
        display: block !important;
    }

    .metismenu .mm-collapse li a {
        display: block !important;
        padding: 8px 16px !important;
    }
}

/* ============================================
   MOBILE ALLGEMEIN (unter 767px)
   ============================================ */
@media only screen and (max-width: 767px) {
    .container {
        font-size: 0.9rem;
    }

    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1rem;
    }
}

/* ============================================
   BLOG-BEITRÄGE & BILDER
   ============================================ */
.com-content .item-page img, 
.com-content .category-list img {
    margin: 10px;
}

.image-left .blog-item,
.image-right .blog-item {
    display: flex;
    align-items: flex-start;
    gap: 0px;
}

.image-left .blog-item .item-image {
    flex: 0 0 20px;
    /* max-width: 20px; */ /* AUSKOMMENTIERT: Syntaxfehler (fehlendes Slash) */
}

@media (max-width: 576px) {
    .image-left .blog-item,
    .image-right .blog-item {
        flex-direction: column;
    }
    .image-left .blog-item .item-image {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Bild float für Blog */
.item-image {
    float: left;
    margin: 0 15px 15px 0;
    max-width: 50%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 767px) {
    .item-image {
        float: none;
        display: block;
        margin: 15px auto;
        max-width: 100%;
    }
}

/* Blog-Titel */
.blog-items .page-header h2 a,
.com-content-category-blog__item h2 a {
    color: #004b00 !important;
    text-decoration: none;
}

.blog-items .page-header h2 a:hover,
.com-content-category-blog__item h2 a:hover {
    color: #00a900 !important;
    text-decoration: underline;
}

/* Definiert die Animation für das Einleitungsbild */
@keyframes scaleOnLoad {
    from {
        transform: scale(0.7); /* Startet bei 70% Größe */
        opacity: 0.7;          /* Optional: Startet leicht transparent für weicheren Effekt */
    }
    to {
        transform: scale(1);   /* Endet bei 100% (Originalgröße) */
        opacity: 1;
    }
}

/* Greift das Einleitungsbild aus dem "Bilder und Links"-Tab */
.article-full-image img, 
.item-image img,
.com-content-article__body .pull-left img,
.com-content-article__body .pull-right img {
    animation: scaleOnLoad 1.2s ease-out forwards;
    transform-origin: center center; /* Skaliert aus der Mitte heraus */
    will-change: transform;          /* Optimiert die Performance im Browser */
}

/* ============================================
   MODUL: GRÜNER HINTERGRUND
   ============================================ */
.modul-gruen {
    background-color: rgba(0, 75, 0, 0.7) !important;
    color: #ffffff !important;
    padding: 1.5rem;
    border-radius: 8px;
}

.modul-gruen h1, .modul-gruen h2, .modul-gruen h3, .modul-gruen a {
    color: #ffffff !important;
}

/* ============================================
   SIDEBAR / COMPONENT
   ============================================ */
.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;
}

/* ============================================
   FOOTER
   ============================================ */
.footer .grid-child {
    justify-content: space-between;
    align-items: baseline;
    padding: 2.5rem .5em;
    background-color: rgba(0, 75, 0, 0.7) !important;
}

.container-footer {
    background-color: rgba(0, 75, 0, 0.7) !important;
    background-image: none !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

.container-footer .footer {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1em 15px;
}

/* ============================================
   SLIDER BESCHRIFTUNG (Responsive)
   ============================================ */
.flexslidercontainer .caption .innercaption.simple_caption {
    background-color: rgba(0, 75, 0, 0.7) !important;
    text-align: center;
    font-size: xx-large;
    padding: 10px 20px;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .flexslidercontainer .caption .innercaption.simple_caption {
        font-size: x-large !important;
        padding: 8px 15px;
    }
}

/* ============================================
   CONTENT-BEREICHE MIT ECKENABRUNDUNG
   ============================================ */

/* Haupt-Content-Bereich (die weiße Box) */
.container-component > :first-child,
.container-sidebar-left > :first-child,
.container-sidebar-right > :first-child {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Falls es mehrere verschachtelte Container gibt */
.container-component > *,
.container-sidebar-left > *,
.container-sidebar-right > * {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Blog-Items im Content */
.com-content .blog-item {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Einzelne Beitragsseiten */
.com-content .item-page {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Kategorielisten */
.com-content .category-list {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Optional: Auch die Artikel-Bilder im Content abrunden */
.com-content .item-image img,
.com-content .blog-item img {
    border-radius: 8px !important;
}

/* Optional: Die Card-Elemente im Content */
.com-content .card {
    border-radius: 12px !important;
    overflow: hidden !important;
}