/*
 * header-icons-fix.css
 * Einheitliche und ausreichende Abstände zwischen den Top-Header Icons.
 * Gilt für Desktop, Tablet und Mobile.
 */

/* ── Allgemein: Icon-Container mit gleichmäßigem Abstand ── */
.header-top .header-top-right .nav > li,
.header-top .header-top-right > li,
.header-top .top-nav > li,
#top-bar .nav > li,
#top-bar .top-nav > li {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

/* Erstes Icon: kein linker Rand */
.header-top .header-top-right .nav > li:first-child,
.header-top .top-nav > li:first-child,
#top-bar .nav > li:first-child {
    margin-left: 0 !important;
}

/* Letztes Icon: kein rechter Rand */
.header-top .header-top-right .nav > li:last-child,
.header-top .top-nav > li:last-child,
#top-bar .nav > li:last-child {
    margin-right: 0 !important;
}

/* ── Desktop (ab 1024px) ── */
@media (min-width: 1024px) {
    .header-top .header-top-right .nav > li,
    .header-top .top-nav > li,
    #top-bar .nav > li,
    #top-bar .top-nav > li {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* ── Tablet (768px – 1023px) ── */
@media (max-width: 1023px) and (min-width: 768px) {
    .header-top .header-top-right .nav > li,
    .header-top .top-nav > li,
    #top-bar .nav > li,
    #top-bar .top-nav > li {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* ── Mobile-Small (bis 767px) ── */
@media (max-width: 767px) {
    .header-top .header-top-right .nav > li,
    .header-top .top-nav > li,
    #top-bar .nav > li,
    #top-bar .top-nav > li {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
}

/* ── Fallback: direkter Padding auf Icon-Buttons/Links ── */
.header-top .nav-icon,
.header-top .social-link,
#top-bar .nav-icon,
#top-bar .social-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
}