/* ============================================================
   NICKINO TEMPLATE – MEDIA QUERIES
   Mobile First → Tablet → Desktop
   ============================================================ */


/* ============================================================
   01) MOBILE (Standard)
   Alles was NICHT überschrieben wird, gilt für Mobile.
   ============================================================ */

/* Mobile: Topbar & Right-Sticky ausblenden */
#topbar {
    display: none;
}

.right-sticky-nav {
    display: none;
}

/* Mobile: Navigation kompakter */
.header-logo img {
    height: 55px;
}

.main-nav {
    display: none; /* später: Mobile-Menü-Button */
}

/* Mobile Sticky Nav sichtbar */
.mobile-sticky-nav {
    display: flex;
}


/* ============================================================
   02) TABLET (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {

    /* Tablet: Navigation sichtbar */
    .main-nav {
        display: flex;
    }

    /* Tablet: Mobile Sticky bleibt sichtbar */
    .mobile-sticky-nav {
        display: flex;
    }

    /* Tablet: Logo etwas größer */
    .header-logo img {
        height: 65px;
    }

    /* Tablet: Right Sticky weiterhin aus */
    .right-sticky-nav {
        display: none;
    }

    /* Tablet: Topbar weiterhin aus */
    #topbar {
        display: none;
    }
}


/* ============================================================
   03) DESKTOP (min-width: 1200px)
   ============================================================ */
@media (min-width: 1200px) {

    /* Desktop: Topbar sichtbar */
    #topbar {
        display: block;
    }

    /* Desktop: Navigation sichtbar */
    .main-nav {
        display: flex;
    }

    /* Desktop: Mobile Sticky ausblenden */
    .mobile-sticky-nav {
        display: none;
    }

    /* Desktop: Right Sticky sichtbar */
    .right-sticky-nav {
        display: flex;
    }

    /* Desktop: Logo größer */
    .header-logo img {
        height: 80px;
    }

    /* Desktop: Mini-Nav nur bei Scroll sichtbar (JS) */
    .mini-nav {
        display: block;
    }
}


/* ============================================================
   04) LARGE DESKTOP (min-width: 1600px)
   Optional: größere Abstände, breitere Layouts
   ============================================================ */
@media (min-width: 1600px) {

    .header-inner,
    .topbar-inner,
    .mini-nav-inner,
    .site-main,
    .footer-inner {
        max-width: 1800px;
    }

    .header-logo img {
        height: 90px;
    }
}