@media (min-width: 992px) {
    /* 1. Wir aktivieren das native Joomla-Grid für den Header */
    .container-header {
        display: grid !important;
        grid-template-columns: auto 1fr !important; /* Spalte 1 fürs Logo, Spalte 2 fürs Menü */
        align-items: center !important;
    }

    /* 2. LOGO: Wir zwingen es in die ERSTE Spalte (ganz nach links) */
    .container-header .grid-child:has(.navbar-brand),
    .container-header .brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* 3. MENÜ: Wir zwingen es in die ZWEITE Spalte (nach rechts) */
    .container-header .grid-child:has(.mod-menu),
    .container-header .menu {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important; /* Schiebt das Menü innerhalb seiner Spalte nach rechts */
    }

    /* 4. MENÜPUNKTE: Horizontal nebeneinander ausrichten */
    .container-header ul.mod-menu,
    .container-header ul.menu,
    .container-header .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Abstand zwischen den einzelnen Menü-Links */
    .container-header ul.menu > li,
    .container-header .navbar-nav > li {
        margin-left: 25px !important;
        margin-right: 0 !important;
    }
}

/* Diese Regeln gelten für ALLE Bildschirmgrößen (auch Smartphones) */
.container-header {
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Logo links, Topbar/Menü rechts daneben */
    align-items: center !important;
    gap: 10px; /* Optional: Kleiner Abstand zwischen Logo und Menü */
}

/* LOGO: Erste Spalte auf allen Geräten */
.container-header .grid-child:has(.navbar-brand),
.container-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* MENÜ/TOPBAR: Zweite Spalte auf allen Geräten */
.container-header .grid-child:has(.mod-menu),
.container-header .menu,
.container-header .navbar-toggler { /* .navbar-toggler sorgt dafür, dass auch das Hamburger-Icon rechts sitzt */
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important; 
}


/* Entfernt die Unterstreichung des Website-Titels im Header */
.container-header .navbar-brand a,
.container-header .site-title a,
.container-header .brand a {
    text-decoration: none !important;
    box-shadow: none !important; /* Entfernt eventuelle feine Linien unter dem Text */
}

/* Verhindert, dass die Unterstreichung beim Drüberfahren (Hover) wiederkommt */
.container-header .navbar-brand a:hover,
.container-header .site-title a:hover,
.container-header .brand a:hover {
    text-decoration: none !important;
    box-shadow: none !important;
}