/* ==========================================================================
   SKYBAVARIA HEADER: RECHTSBÜNDIGES LAYOUT FÜR LOGO & SUCHE + 100% MENÜ
   ========================================================================== */

/* Desktop & Tablet (Bildschirme ab 768px) */
@media screen and (min-width: 768px) {
    
    /* 1. Header-Bereich vorbereiten: Setzt die maximale Breite stabil auf 1320px */
    .site-header, .header, .container-header {
        position: relative !important;
        display: block !important;
        max-width: 1320px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 140px !important; /* Schafft Platz oben für Logo und Suche */
        box-sizing: border-box !important;
    }

    /* 2. LOGO (Brand): Bleibt stabil oben rechts */
    .header .navbar-brand, 
    .container-header .navbar-brand,
    .header .brand,
    .container-header .brand {
        position: absolute !important;
        top: 15px !important;        
        right: 15px !important;      
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* 3. SUCHFELD: Dockt perfekt links neben dem Logo an */
    .header .container-search,
    .container-header .container-search {
        position: absolute !important;
        top: 50px !important;        
        right: 350px !important;     /* Abstand anpassen, wenn das Logo durchsichtig ist */
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* 4. MENÜ: Bricht aus dem verengten Raster aus und nimmt die volle Breite ein */
    .header .container-nav,
    .container-header .container-nav {
        grid-column: 1 / -1 !important; /* Zwingt Cassiopeia-Grids, die ganze Breite freizugeben */
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important; 
        padding: 0 !important;
    }

    /* Schiebt die innere Leiste (inklusive grauem Balken) auf die volle Weite */
    .container-header .navbar,
    .container-nav .navbar,
    .container-nav .navbar-expand-md,
    .container-nav .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    }

    /* Suchfeld-Breite definieren */
    .header .mod-search, 
    .container-header .mod-search,
    .container-search .search,
    .header input[type="search"] {
        width: 220px !important; 
        margin: 0 !important;
    }
}