/* =========================================
   6. HEADER STYLES (Dynamic)
   ========================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    color: white;
    /* Höhe und Radius definieren */
    height: var(--header-height-mobile);
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    transition: height 0.3s ease, border-radius 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Hintergrundbild mit Overlay */
.header-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/Basar4.jpg'); /* Dein Bild hier rein! */
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* Dunkles Overlay, damit Text lesbar ist */
.header-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Abdunklung */
    backdrop-filter: blur(2px);
}

.header-top {
    justify-content: space-between;
    padding-top: 1rem;
    position: relative;
    z-index: 2;
}

.header-logo {
    width: 40px;
    height: 40px;
}

.brand-name {
    font-family: 'Segoe Print', sans-serif;
    font-size: 1.2rem;
    line-height: 1;
}


.icon-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Suchleiste */
.header-bottom {
    margin-top: 1rem;
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.search-bar {
    background: white;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-grey);
}

.search-bar input {
    width: 100%;
    border: none;
    outline: none
}

/* === SCROLLED STATE (Der Schrumpf-Effekt) === */
body.scrolled .main-header {
    height: var(--header-height-scrolled); 
}

/* Im gescrollten Zustand verschwindet das Bild und die Suche */
body.scrolled .header-bg { opacity: 1; }
body.scrolled .header-bottom {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}


/* =========================================
   7. MOBILE BOTTOM NAV
   ========================================= */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--clr-lightgrey);
    z-index: 1001;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

#menuBtn{
    background: none;
}

.nav-item {
    font-size: 1.5rem;
    color: var(--clr-grey);
    position: relative;
    padding: 0.5rem;
    transition: color 0.3s;
}

.nav-item.active, .nav-item:hover {
    color: var(--clr-red);
}

.cart-counter {
    position: absolute;
    top: 2px;
    right: -2px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* =========================================
   8. SIDE MENU (Off-Canvas)
   ========================================= */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.side-menu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 75%; /* 3/4 Breite */
    height: 82%;
    background: var(--clr-light);
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 3rem;
    display: flex;
    border-top-left-radius: 80px;
    flex-direction: column;
    border-left: 1px solid var(--clr-red);
    border-top: 1px solid var(--clr-red);
}

/* Aktiv-Klasse für JS */
.menu-open .menu-overlay { opacity: 1; visibility: visible; }
.menu-open .side-menu { transform: translateX(0); }

.menu-logo {
    width: 70%;
}
.side-menu-header {
    text-align: center;
    margin-bottom: 2rem;
}
.side-menu-links li {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}
.side-menu-links a {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.side-menu-footer {
    margin-top: auto;
    text-align: center;
}
.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}
.social-btn {
    font-size: 1.8rem;
    color: var(--clr-dark);
}

/* =========================================
   9. DARK MODE HELFER
   ========================================= */
body.dark-mode {
    --clr-light: #1a1a1a;
    --clr-dark: #f2f2f2;
    --clr-grey: #cccccc;
    background-color: var(--clr-light);
    color: var(--clr-dark);
}

/* Nav & Header im Dark Mode anpassen */
body.dark-mode .mobile-bottom-nav, 
body.dark-mode .side-menu {
    background-color: #242424;
    border-color: #333;
}

/* =========================================
   10. SEARCH RESULTS STYLES
   ========================================= */
.search-bar {
    position: relative; /* Wichtig, damit Ergebnisse relativ dazu positioniert werden */
}

.search-results {
    /* Wichtig: Jetzt positioniert nach dem Viewport, nicht relativ zur Suche */
    position: fixed; 
    left: 0;
    right: 0;
    /* Der top-Wert muss der Höhe des Headers entsprechen (wenn er groß ist) */
    top: var(--header-height-mobile); 
    
    /* Um den Rand links und rechts des Containers auszugleichen */
    margin-inline: 1rem; 

    /* ... (Restliche Styles) ... */
    background-color: white;
    color: #242424;
    border: 1px solid var(--clr-lightgrey);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 250px;
    overflow-y: auto;
    z-index: 999; /* Sehr hohe Z-Index, um über allem zu liegen (aber unter dem Header 1000) */
    list-style: none;
    padding: 0;
    
    /* Standardmäßig versteckt */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Klicks auf transparente Elemente verhindern */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-results.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Klicks zulassen, wenn aktiv */
}

.search-results li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--clr-lightgrey);
}

.search-results li:hover {
    background-color: var(--clr-lightgrey);
}

.search-results li:last-child {
    border-bottom: none;
}

/* =========================================
   11. SEASONAL MODE STYLES
   ========================================= */



/* Die magische Kante */
footer::before {
    content: "";
    position: absolute;
    top: -10px; /* Genau die Höhe des SVGs */
    left: 0;
    width: 100%;
    height: 50px;
    background-color: inherit; /* Nimmt die Farbe des Footers an! */
    /* Hier wird das SVG als Maske genutzt -> Farbe ist also steuerbar! */
    color: var(--clr-light);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
}

/* Saisonale Masken */
.season-winter footer::before {
    -webkit-mask-image: url('../img/season/Schneedecke.svg');
    mask-image: url('../img/season/Schneedecke.svg');
    background-color: var(--clr-dark);
}
.season-summer footer::before {
    -webkit-mask-image: url('../img/season/Wellen1.svg');
    mask-image: url('../img/season/Wellen1.svg');
    top: -120px; 
    height: 130px;
    background-color: #123b69;
}
.season-spring footer::before, .season-autumn footer::before {
    -webkit-mask-image: url('../img/season/Spring.svg');
    mask-image: url('../img/season/Spring.svg');
    background-color: var(--clr-lightgrey);
    top: -50px; 
    
}

/* Farbanpassung für Footer in Saisons */
.season-autumn footer { background-color: var(--clr-lightgrey); color: white; }
.season-spring footer { background-color: var(--clr-lightgrey);  }
.season-summer footer { background-color: #123b69; color: white;  }

/* --- WINTER (Schneedecke & Dark Mode) --- */
body.season-winter {
    /* Erzwingt Dark Mode (wie gewünscht) */
    --clr-light:  #020818 0%; /* Dunkelblau-Hintergrund */
    --clr-dark: #e6f7ff; /* Helle Schrift */
    background: linear-gradient(to bottom, var(--clr-light),  #123a69 60%, #1b4f85 100%); /* Farbverlauf */
    color: var(--clr-dark);
}

body.season-winter .mobile-bottom-nav, 
body.season-winter .side-menu {
    background-color: #1a2c4e; /* Dunklere Navi */
    border-color: #334a75;
}



/* Herbstblätter-Form */
.autumn-leaf {
    position: fixed;
    top: -20px;
    width: 20px;
    height: 12px;
    border-radius: 80% 0 80% 0; /* Blatt-Form */
    z-index: 2000;
    pointer-events: none;
    animation: fall-wind 10s linear infinite;
}

@keyframes fall-wind {
    0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(100vh) translateX(100px) rotate(360deg); opacity: 0; }
}


/* =========================================
   12. WINTER SNOW EFFECT (KORRIGIERT)
   ========================================= */

/* Snow: white flakes */
.snowflake { 
    position: fixed; 
    top: -10px; 
    left: 0; 
    right: 0; 
    height: 100vh; /* NEU: damit die Animation den ganzen Viewport bedeckt */
    pointer-events: none; 
    z-index: 9999; /* Über dem Header (1000) */
    overflow: hidden; /* Sicherstellen, dass nichts außerhalb fliegt */
}

.snowflake i { 
    position: absolute; 
    top: -2rem; 
    font-style: normal; 
    user-select: none; 
    opacity: .95; 
    color: white; 
    animation-name: fall; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    /* Schatten für bessere Sichtbarkeit vor dem dunklen Hintergrund */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

@keyframes fall { 
    to { 
        transform: translateY(110vh) rotate(360deg); 
    } 
}








/* =========================================
   SUBPAGE STYLES (Update)
   ========================================= */

/* Basis-Layout */
body.subpage {
    padding-top: calc(var(--header-height-scrolled) + 1.5rem);
}

/* Header Container auf Unterseiten */
body.subpage .main-header {
    height: var(--header-height-scrolled);
    background: var(--clr-grey);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Elemente ausblenden, die wir nicht brauchen */
body.subpage .header-bg,
body.subpage .header-bottom { 
    display: none; 
}

/* === Neues Grid-Layout für den Header === */
body.subpage .header-top {
    display: grid;
    /* Links (Auto) | Mitte (Rest) | Rechts (Auto) */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding-top: 0; /* Reset */
}

/* Linker Bereich: Zurück + Logo */
.sub-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-btn {
    color: white;
    font-size: 2.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.header-logo-small {
    height: 32px; /* Angepasste Größe */
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Mittlerer Bereich: Name + Titel */
.sub-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
}

.brand-small {
    font-family: 'Segoe Print', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.subpage-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-red);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 6px;
}

/* Rechter Bereich: Darkmode Button sichtbar machen */
body.subpage #themeToggle {
    display: flex; 
    width: 35px; 
    height: 35px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.2);
}




.nav-item.active i {
    color: var(--clr-red);
}
.nav-item.active span {
    color: var(--clr-red);
    font-weight: 600;
}

/* Stellt sicher, dass die Zahl im Badge immer lesbar bleibt */
.nav-item.active .cart-counter {
    color: #ffffff !important; /* Immer Weiß */
    background-color: var(--clr-red); /* Oder eine dunklere Farbe, falls gewünscht */
}

/* Falls das Icon rot wird, darf der Counter-Kreis nicht transparent werden */
.cart-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    /* Falls dein Badge im aktiven Zustand verschwindet, hier sicherstellen: */
    min-width: 18px;
    height: 18px;
    font-size: 10px;
}