/* Cassiopeia minimale Breite auf 1024px setzen */
/* === Fehlschlag === */
/* Erzwingt die Mindestbreite für den gesamten Seiten-Grid */
.site-grid {
    min-width: 1024px !important;
    display: grid;
    /* Verhindert das "Zusammenquetschen" auf kleinen Bildschirmen */
}

.navbar-brand {
    /* Das Logo wird nach oben verschoben und das nächste Element nach oben verschoben,
       damit der Kopfzeilenbereich nicht zu groß wird */
    margin-top: -1.5em;
    margin-bottom: -2em;
}

.container-header {
    background-image: linear-gradient(135deg, #eeffff 0%, #669999 100%);
    /*background-image: linear-gradient(135deg, #669999 100%, #eeffff 0%);*/
} 

/* Logo nach oben schieben */
.container-below-top {
    margin-top: -40px;
    position: relative;
    z-index: 10;
}
/* Hero Modul mit gleichfarbigem Rand */
.clm-hero {
    border: 2px solid #4a7c7e !important; /* Gleiche Farbe wie Hintergrund */
  /* #4a7c7e gleiche Farbe // #3a6c6e; dunkler // #5a8c8e; heller */
}

/* Topbar ÜBER dem Logo */
.container-topbar,
[class*="topbar"] {
    position: relative;
    z-index: 20;
}

/* Header insgesamt über den Dots */
header,
.header,
.site-header,
.container-header {
    position: relative;
    z-index: 5;
}

/* Hauptmenü - Option 3: Dunkler Hintergrund */
.container-search ul.mod-menu.mod-list.nav,
.position-search ul.mod-menu.mod-list.nav {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 4px;
    margin-top: -35px;
}

/* Hauptmenü - Links */
.container-search ul.mod-menu.mod-list.nav li a,
.position-search ul.mod-menu.mod-list.nav li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #fff !important;
    font-size: 1.1em;  /* Optionen: 1em, 1.1em, 1.15em, 1.2em, 16px, 18px */
    line-height: 1.4;
    box-sizing: border-box;
    border-radius: 3px;
    transition: background 0.2s;
}

/* Hauptmenü - Hover */
.container-search ul.mod-menu.mod-list.nav li a:hover,
.position-search ul.mod-menu.mod-list.nav li a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.container-search ul.mod-menu.mod-list.nav li,
.position-search ul.mod-menu.mod-list.nav li {
    padding: 0;
    margin: 0;
}

/* Details nebeneinander dargestellt */
dl.article-info {
    margin-left: 15px;
}

dl.article-info dd.createdby::after {
    margin-left: 15px;
    color: #999;
}

dl.article-info dd {
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

.container-nav {
}

@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid {
            margin: 30px;
            grid-template-columns: [full-start] minmax(0,0fr) [main-start] minmax(0,16rem) minmax(0,110rem) minmax(0,110rem) minmax(0,16rem) [main-end] minmax(0,0fr) [full-end]
        }
    }
}

.clm {
    margin-left: 20px;
    margin-right: 20px;
}

.grid-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 10000px;
    margin-right: auto;
    margin-left: auto;
}

/* Topbar-Menü Container mit durchgehendem Hintergrund */
ul.mod-menu.topbar-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    list-style: none;
    margin-top: 0 !important;
    width: fit-content;
    background: rgba(200, 200, 200, 0.3);
    border-radius: 4px;
    padding: 4px;
    margin-left: auto;
    position: relative;
    z-index: 25;
}

/* Normale Links */
ul.mod-menu.topbar-menu li a {
    color: #444;
    text-decoration: none;
    padding: 8px 15px;
    transition: background 0.2s;
}

ul.mod-menu.topbar-menu li a:hover {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

/* Download Button */
ul.mod-menu.topbar-menu li a.btn-download {
    background: #6c757d;
    color: white !important;
    padding: 8px 18px;
    border-radius: 3px;
    font-weight: 600;
}

ul.mod-menu.topbar-menu li a.btn-download:hover {
    background: #5a6268;
}

/* Footer Hintergrund anpassen */
.container-footer,
footer.container-footer {
    background-image: linear-gradient(135deg, #669999 0%, #4d7a7a 100%);
}

/* Footer Text und Links */
.container-footer,
.container-footer a {
    color: #fff;
}

.container-footer a:hover {
    color: #eeffff;
}