/* assets/css/header.css */

/* --- Import der Montserrat-Schriftart --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&display=swap'); /* 800 für extra fett */

.shop-header-magic { /* Angepasster Haupt-Header-Container */
    background: linear-gradient(90deg, var(--shop-primary-color) 0%, var(--shop-primary-color-dark) 100%); /* Elegante Farbverlauf */
    padding: 15px 20px; /* Vertikales Padding, Seiten-Padding */
    color: var(--shop-light-text);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Dezenter Schatten */
    position: sticky; /* Sticky Header */
    top: 0;
    width: 100%;
    z-index: 1000; /* Sicherstellen, dass der Header über allem liegt */
    display: flex; /* Flexbox für den Header-Inhalt */
    justify-content: center; /* Zentriert den Inhalt */
    align-items: center; /* Vertikale Zentrierung */
}

.container-header { /* Neuer Container für Header-Inhalt */
    max-width: 1200px; /* Max-Breite wie Haupt-Container */
    width: 100%; /* Wichtig für Flexbox */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Ermöglicht Umbruch auf kleineren Bildschirmen */
}

/* --- Logo Styling --- */
.shop-logo-magic {
    position: relative; /* Wichtig für z-index und Hinausragen */
    z-index: 1001; /* Über der Navigation */
    transition: transform 0.4s ease-out;
}

.shop-logo-magic a {
    text-decoration: none;
    display: flex;
    align-items: center;
    transform: translateY(0); /* Basis-Position */
    transition: transform 0.4s ease-out, filter 0.4s ease-out; /* Für Glow und Bewegung */
}

.header-logo-img { /* Für Bild-Logo */
    height: 70px; /* GRÖSSER */
    transition: all 0.4s ease-out;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); /* Dezenter Schatten */
}

.shop-logo-magic a:hover .header-logo-img {
    height: 85px; /* NOCH GRÖSSER BEIM HOVER */
    transform: translateY(-8px) scale(1.1); /* Leicht nach oben und grösser */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px var(--shop-secondary-color)); /* WEISSER UND FARBIGER GLOW */
}


.header-logo-text-part1, .header-logo-text-part2 { /* Für Text-Logo */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extra fett */
    font-size: 2.8em; /* GRÖSSER */
    line-height: 1;
    text-transform: uppercase;
    transition: all 0.4s ease; /* Sanftere Übergänge */
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.header-logo-text-part1 {
    color: var(--shop-light-text); /* Weiss */
}

.header-logo-text-part2 {
    color: var(--shop-secondary-color); /* Akzentfarbe, z.B. ein helleres Rot oder Orange */
    margin-left: 8px; /* MEHR ABSTAND zwischen den Teilen */
}

.shop-logo-magic a:hover .header-logo-text-part1,
.shop-logo-magic a:hover .header-logo-text-part2 {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px var(--shop-secondary-color); /* WEISSER UND FARBIGER GLOW */
    transform: translateY(-5px); /* Leichter Schweb-Effekt */
}

/* --- Navigation Styling --- */
.shop-nav-magic ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Grosszügigerer Abstand zwischen Nav-Items */
    align-items: center;
}

.shop-nav-magic li {
    margin: 0;
}

.nav-link-magic {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8); /* Leichter Transparenz */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1em; /* Etwas grösser */
    padding: 8px 0; /* Vertikales Padding für Hover-Effekt */
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-link-magic:hover {
    color: var(--shop-light-text); /* Vollständig weiss beim Hover */
    transform: translateY(-2px); /* Leichter Schweb-Effekt */
}

/* Unterstrich-Effekt beim Hover */
.nav-link-magic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--shop-secondary-color); /* Akzentfarbe */
    transition: width 0.3s ease-out;
}

.nav-link-magic:hover::after {
    width: 100%;
}

/* --- Warenkorb-Zähler --- */
.cart-item-count-magic { /* Angepasste Klasse */
    background-color: var(--shop-secondary-color); /* Akzentfarbe */
    color: var(--shop-primary-color-dark); /* Dunklerer Text für Kontrast */
    font-size: 0.85em; /* Etwas grösser */
    font-weight: 700;
    border-radius: 14px; /* Stärker abgerundet (Pillenform) */
    padding: 3px 10px; /* Grösseres Padding */
    margin-left: 8px; /* MEHR ABSTAND zum Text "Warenkorb" */
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.nav-link-cart:hover .cart-item-count-magic {
    transform: scale(1.15); /* Deutlicherer Pop-Effekt beim Hover auf den Link */
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    background-color: var(--shop-light-text); /* Weiss beim Hover */
    color: var(--shop-primary-color); /* Akzentfarbe */
}

/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
    .shop-header-magic {
        padding: 10px 15px; /* Reduziertes Padding auf Mobile */
    }
    .container-header {
        flex-direction: column; /* Stapelt Logo und Navigation */
        gap: 15px; /* Abstand zwischen Logo und Nav */
    }
    .shop-logo-magic {
        width: 100%;
        text-align: center;
        /* Beim Verkleinern des Bildschirms sollte das Logo nicht zu stark herausragen */
        transform: translateY(0) !important; /* Reset transform */
        z-index: 1; /* Reset z-index */
    }
    .shop-logo-magic a:hover .header-logo-img { /* Reset Hover-Effekt auf Mobile, wenn zu gross */
        height: 50px; /* Zurück auf Basisgrösse */
        transform: translateY(0) scale(1) !important;
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)) !important;
    }
    .header-logo-img {
        height: 50px; /* Angepasste Grösse auf Mobile */
    }
    .header-logo-text-part1, .header-logo-text-part2 {
        font-size: 2.2em; /* Kleinere Text-Logo Grösse */
    }
    .shop-nav-magic ul {
        flex-direction: column; /* Nav-Links stapeln */
        gap: 10px; /* Reduzierter Abstand */
        width: 100%;
        text-align: center;
    }
    .nav-link-magic {
        font-size: 1em; /* Kleinere Schrift für Nav-Links */
    }
    .cart-item-count-magic {
        font-size: 0.75em; /* Kleiner auf Mobile */
        padding: 2px 8px;
    }
    .shop-logo-magic a:hover .header-logo-text-part1,
    .shop-logo-magic a:hover .header-logo-text-part2 { /* Reset Hover-Effekt auf Mobile */
        text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 480px) {
    .header-logo-img {
        height: 40px; /* Noch kleiner auf sehr kleinen Bildschirmen */
    }
    .header-logo-text-part1, .header-logo-text-part2 {
        font-size: 1.8em; /* Noch kleiner für sehr kleine Bildschirme */
    }
    .shop-nav-magic ul {
        gap: 8px;
    }
    .nav-link-magic {
        font-size: 0.9em;
    }
    .cart-item-count-magic {
        font-size: 0.7em;
        padding: 1px 6px;
    }
}