/* ========================================
   VEGENERGY HEADER STYLES - NEU STRUKTURIERT
   Version: 2.0
   Letzte Aktualisierung: 2026-01-05
   ======================================== */

/* ========================================
   CSS VARIABLEN
   ======================================== */
:root {
    --header-spacing: 30px;
    --header-top-offset: 30px;
    --header-top-offset-mobile: 20px;
    --logo-max-width: 600px;
    --logo-mobile-padding: 10px;
    --nav-gap: 20px;
    --icon-size: 20px;
    --icon-padding: 15px;
    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.5s ease-in-out;
    --animation-duration: 0.8s;
    --mobile-menu-bg: #222222;
    --mobile-breakpoint: 850px;
}

/* ========================================
   HEADER CONTAINER
   ======================================== */
header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    z-index: 10;
    top: var(--header-top-offset);
    animation: fadeInFromTop var(--animation-duration) ease;
}

/* ========================================
   LOGO BEREICH
   ======================================== */
header .logo {
    display: flex;
    justify-content: space-between;
    animation: fadeInFromTop var(--animation-duration) ease;
}

header .logo a {
    display: block;
}

header .logo img {
    width: 55%;
    padding-left: var(--header-spacing);
    max-width: var(--logo-max-width);
    object-fit: contain;
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */
header nav {
    display: flex;
    justify-content: center;
    padding-right: var(--header-spacing);
    padding-left: 60px;
    gap: var(--nav-gap);
    animation: fadeInFromTop var(--animation-duration) ease;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--nav-gap);
}

/* ========================================
   NAVIGATION ICONS
   ======================================== */
.icon {
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.icon-account,
.icon-cart-empty,
.icon-contact {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--vegaenergy-dark);
    padding: var(--icon-padding);
    background-color: #ffffff;
    border-radius: var(--border-radius-small);
    transition: all var(--transition-fast);
}

.icon-contact {
    stroke-width: 2.5px;
}

/* Icon Hover Effekte */
svg:hover {
    transform: scale(1.05);
    transition: transform var(--transition-fast);
    background-color: var(--vegaenergy-dark);
    color: #fff;
}

/* ========================================
   "JETZT TESTEN" BUTTON
   ======================================== */
.btn-test-now {
    height: var(--icon-size);
    padding: var(--icon-padding) 24px;
    background-color: #ffffff;
    color: var(--vegaenergy-dark);
    font-family: 'Mukta', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.btn-test-now:hover {
    background-color: var(--vegaenergy-dark);
    color: #fff;
    transform: scale(1.05);
}

.btn-test-now:active {
    transform: scale(0.98);
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */
.navbar-mobile {
    display: none; /* Standardmäßig versteckt auf Desktop */
    justify-content: space-between;
    align-items: center;
    background-color: var(--mobile-menu-bg);
    padding: 10px var(--header-spacing);
    border-top-left-radius: var(--border-radius-medium);
    border-bottom-left-radius: var(--border-radius-medium);
}

/* Burger Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}

.menu-toggle .bar {
    background-color: #fff;
    height: 3px;
    width: 25px;
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* Burger Menu Animation bei Öffnung */
.menu-toggle.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Navigation Liste */
.navbar-mobile .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    top: -20px;
    right: 0;
    background-color: var(--mobile-menu-bg);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all var(--transition-medium);
    transform: translateY(-100%);
}

.navbar-mobile .nav-list.active {
    display: flex;
    align-items: center;
    max-height: 800px;
    opacity: 1;
    border-bottom-left-radius: var(--border-radius-medium);
    border-bottom-right-radius: var(--border-radius-medium);
    transform: translateY(0);
    padding-top: 19px;
    padding-bottom: 10px;
    box-shadow: 0 5px 20px rgba(34, 34, 34, 0.48);
    animation: slideInDown var(--transition-medium) forwards;
}

.navbar-mobile .nav-list a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
}

/* Mobile Navigation Header */
.nav-list-header {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    width: 100%;
}

/* X-Close Icon im Mobile Menu */
.icon-x-close {
    height: var(--icon-size);
    color: white;
    padding: var(--icon-padding);
    padding-left: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.icon-x-close:hover {
    background-color: transparent;
    opacity: 0.7;
}

/* Mobile Navigation Links */
.nav-links-padding {
    align-items: center;
    justify-content: center;
    padding-left: 25vw;
    padding-right: 25vw;
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 150px;
}

/* Horizontale Linie im Mobile Menu */
.custom-hr {
    height: 2px;
    background-color: white;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    list-style: none;
    border: none;
    display: list-item;
}

.custom-hr::marker {
    content: '';
}

/* Starterbox Button im Mobile Menu */
.btn-test-mobile {
    background-color: #ffffff !important;
    color: var(--vegaenergy-dark) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    border-radius: var(--border-radius-small);
    padding: 15px 25vw !important;
    margin: 15px 0 5px 0;
    text-align: center;
    display: block;
}

/* ========================================
   RESPONSIVE - TABLET & MOBILE
   ======================================== */

/* Tablet & Small Desktop */
@media screen and (max-width: 850px) {
    /* navbar-mobile auf Mobile/Tablet anzeigen */
    .navbar-mobile {
        display: flex;
    }

    header {
        top: var(--header-top-offset-mobile);
        justify-content: space-around;
    }

    header .logo {
        width: 100%;
        padding-top: 0;
    }

    header .logo img {
        padding-left: 0;
        margin-left: var(--logo-mobile-padding);
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        flex-shrink: 1;
    }

    header nav {
        padding-right: 0;
        padding-left: 0;
    }

    header .logo,
    header nav {
        animation: none;
    }

    /* Desktop Navigation ausblenden */
    header nav .nav-links {
        display: none;
    }

    .btn-test-now {
        display: none;
    }

    /* Mobile Menu Toggle anzeigen */
    .menu-toggle {
        display: flex;
    }

    .navbar-mobile {
        border-top-left-radius: var(--border-radius-medium);
        border-bottom-left-radius: var(--border-radius-medium);
    }
}

/* Desktop - Mobile Navigation ausblenden */
@media screen and (min-width: 851px) {
    .navbar-mobile .nav-list {
        display: none;
    }

    .menu-toggle {
        display: none;
    }
}

/* Sehr kleine Smartphones */
@media screen and (max-width: 450px) {
    header .logo {
        justify-content: center;
        width: 100%;
        padding-top: 0;
    }

    header .logo img {
        margin-left: var(--logo-mobile-padding);
        padding-left: 0;
    }

    .navbar-mobile {
        padding: 10px 20px;
    }

    .navbar-mobile .nav-list {
        width: 100%;
        top: -20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .navbar-mobile ul li a img {
        margin-left: var(--logo-mobile-padding);
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        flex-shrink: 1;
    }
}

/* ========================================
   ANIMATIONEN
   ======================================== */
@keyframes fadeInFromTop {
    from {
        opacity: 0;
        transform: translateY(-15%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}