/* --- DESKTOP ANSICHT (ab 992px) --- */
@media (min-width: 992px) {
    /* 1. Den gesamten Header als einzeilige Flexbox definieren */
    .header.container-header.full-width {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Richtet alles von links nach rechts aus */
        gap: 20px !important; /* Minimaler Abstand zwischen den Komponenten */
    }

    /* Native Breiten und Raster komplett aufheben */
    .header.container-header.full-width > div,
    .header.container-header.full-width > nav,
    .header.container-header.full-width > .grid-child,
    .header.container-header.full-width > .container-topbar {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
    }

    /* 2. LOGO (grid-child ohne container-nav) kompakt machen und ganz links platzieren */
    .header .grid-child:not(.container-nav) {
        order: 1 !important;
        width: auto !important;      /* Verhindert, dass die Box die ganze Breite einnimmt */
        max-width: 250px;           /* Begrenzt die Box auf die maximale Größe deines Logos */
        flex: 0 0 auto !important;  /* Verhindert das automatische Aufblähen der Box */
    }

    .header .grid-child:not(.container-nav) img {
        max-width: 100% !important; /* Sorgt dafür, dass das Logo-Bild mitskaliert */
        height: auto !important;
    }

    /* 3. MENÜ (container-topbar oder container-nav) direkt rechts neben dem Logo platzieren */
    .header .container-topbar,
    .header .container-nav {
        order: 2 !important;
        display: flex !important;
        justify-content: flex-start !important; /* Schiebt die Menüpunkte nach links zum Logo */
        flex: 1 1 auto !important;             /* Nutzt den restlichen Platz bis zur Suche */
    }

    /* Bootstrap-Zentrierung der Menüleiste von innen heraus aufheben */
    .header .container-nav .navbar,
    .header .container-nav .navbar-collapse,
    .header .container-nav .mod-menu {
        display: flex !important;
        justify-content: flex-start !important; /* Zwingt die Menüpunkte nach links */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. SUCHE (Das Modul am Ende) nach ganz rechts außen schieben */
    .header .grid-child:has(.mod-search),
    .header .mod-search {
        order: 3 !important;
        margin-left: auto !important; /* Schiebt die Suche an den rechten Rand */
        flex: 0 0 auto !important;
    }
}

/* --- MOBILE ANSICHT (Smartphone unter 992px) --- */
@media (max-width: 991.98px) {
    .header.container-header.full-width {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .header .grid-child:not(.container-nav) { order: 1 !important; width: auto !important; }
    .header .container-topbar, .header .container-nav { order: 2 !important; }
}

/* --- ABSOLUTER FIX FÜR DEN SMART-SEARCH ABSTAND --- */

/* 1. Das Formular direkt ansprechen und als Reihe definieren */
.header form.mod-finder.js-finder-searchform {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* 2. Das Label direkt im Formular ansprechen und Abstand nach rechts erzwingen */
.header form.mod-finder.js-finder-searchform label.finder {
    margin-right: 20px !important; /* 20 Pixel echter Platz zum Feld */
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* 3. Den Eingabe-Container direkt im Formular auf Inline-Block setzen */
.header form.mod-finder.js-finder-searchform .awesomplete {
    display: inline-block !important;
    margin-left: 0 !important;
}