/* ============================================================
   fabrilogy™ — Navigation über Hero-Bild
   Pfad: /httpdocs/shop/templates/ew_evelations/css/fabrilogy_hero.css
   ============================================================ */

/* ── Desktop (ab 992px) ──────────────────────────────────────── */
@media (min-width: 992px) {

    /* Header über allem */
    .index-wrap #header {
        position: relative;
        z-index: 20;
    }

    /* Navbar 30px nach unten schieben – Bootstrap bleibt intakt */
    .index-wrap #main-navigation {
        margin-top: 30px !important;
    }

    /* Schwebende Box – nur solange NICHT sticky */
    .index-wrap #main-navigation:not(.affix) {
        width: 75% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        background: #ffffff !important;
    }

    /* Navigationstexte dunkel */
    .index-wrap #main-navigation:not(.affix) .navbar-nav > li > a {
        color: #333333 !important;
    }

    /* Hover-Farbe */
    .index-wrap #main-navigation:not(.affix) .navbar-nav > li > a:hover {
        color: #ff7a00 !important;
    }

    /* Innerer Container füllt die gesamte Navbar-Breite */
    .index-wrap #main-navigation:not(.affix) > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Wenn sticky (.affix): volle Breite, keine Rundungen, auch weiß */
    .index-wrap #main-navigation.affix {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    /* Schrift auch im affix-Zustand dunkel */
    .index-wrap #main-navigation.affix .navbar-nav > li > a {
        color: #333333 !important;
    }

    .index-wrap #main-navigation.affix .navbar-nav > li > a:hover {
        color: #ff7a00 !important;
    }

    /* Hero-Bild: 30px Lücke + 65px Navbar = 95px nach oben */
    .index-wrap #hero_image {
        margin-top: -95px !important;
        position: relative;
        z-index: 0;
    }

    /* Text unter der Navbar halten */
    .index-wrap #hero_image .fab-header-centering-box {
        padding-top: 95px !important;
    }

    .index-wrap #hero_image .fab-header-inner-grid {
        align-items: center !important;
    }
}

/* ── Tablet (768px – 991px) ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {

    .index-wrap #header {
        position: relative;
        z-index: 20;
    }

    .index-wrap #main-navigation {
        margin-top: 100px !important;
    }

    .index-wrap #hero_image {
        margin-top: -155px !important;
        position: relative;
        z-index: 0;
    }

    .index-wrap #hero_image .fab-header-centering-box {
        padding-top: 155px !important;
    }

    .index-wrap #hero_image .fab-header-inner-grid {
        align-items: center !important;
    }
}

/* ── Mobil (unter 768px) ─────────────────────────────────────── */
@media (max-width: 767px) {

    .index-wrap #hero_image {
        margin-top: 0 !important;
    }

    .index-wrap #hero_image .fab-header-centering-box {
        padding-top: 40px !important;
    }
}