/* ==========================================================================
   Header & Logo Area
   ========================================================================== */
.header-top-row { display: flex; justify-content: space-between; align-items: center; padding: 20px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; gap: 20px; }
.header-left { display: flex; align-items: center; justify-content: flex-start; gap: 15px; }
.site-logo { flex-shrink: 0; }
.site-logo img { width: auto !important; max-width: 100%; object-fit: contain; }
.site-branding-text { display: flex; flex-direction: column; text-align: left; }
.site-title { margin: 0; line-height: 1.2; }
.site-description { margin: 4px 0 0 0; opacity: 0.9; }

.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.header-navigation-row { display: flex; justify-content: center; width: 100%; padding: 0 20px 15px 20px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }

/* Suche & Login Button */
.header-search .search-form { position: relative; display: flex; align-items: center; width: 200px; }
.header-search .search-form label { margin: 0; display: block; width: 100%; }
.header-search .search-field { width: 100%; padding: 6px 35px 6px 15px; border: 1px solid; border-radius: 20px; outline: none; }
.header-search .search-submit { position: absolute; right: 0; top: 0; width: 35px; height: 100%; background: none; border: none; cursor: pointer; color: transparent; z-index: 2; }
.header-search .search-form::after { content: '🔍'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; opacity: 0.5; pointer-events: none; z-index: 1; }
.login-button { padding: 6px 20px; border-radius: 20px; font-weight: bold; transition: filter 0.2s ease; }

/* Hauptnavigation */
.menu-toggle, .dropdown-toggle { display: none !important; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row !important; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.main-navigation li { position: relative; }
.main-navigation a { padding: 8px 10px; display: block; font-weight: bold; border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.main-navigation a:hover { color: var(--menu-active-color); border-bottom-color: var(--menu-active-color); }
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current-menu-parent > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current_page_parent > a { color: var(--menu-active-color); border-bottom-color: var(--menu-active-color); }
.main-navigation li.menu-item-has-children > a::before { content: '▶'; display: inline-block; margin-right: 6px; font-size: 0.75em; vertical-align: middle; opacity: 0.7; }
.main-navigation ul ul { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; padding: 5px 0 0 0; z-index: 9999; flex-direction: column !important; flex-wrap: nowrap; gap: 6px; }
.main-navigation li:hover > ul { display: flex; }
.main-navigation ul ul li { width: 100%; }
.main-navigation ul ul a { padding: 10px 18px; text-align: left; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); background-color: var(--header-bg); border-bottom: none; }
.main-navigation ul ul a:hover { transform: translateX(3px); background-color: var(--menu-active-color); color: #ffffff !important; }
.main-navigation ul ul ul { position: absolute; top: 15px; left: 95%; padding: 0; }

/* ==========================================================================
   Mobile Optimierung (Schlicht & Linksbündig ohne Buttons)
   ========================================================================== */
@media (max-width: 768px) {
    .header-top-row { flex-direction: column; text-align: center; }
    .header-left, .header-right { justify-content: center; align-items: center; width: 100%; }
    .header-right { flex-wrap: wrap; margin-top: 15px; }
    
    /* Navigations-Bereich linksbündig ausrichten */
    .header-navigation-row { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        width: 100%; 
        padding: 0 20px 15px 20px;
    }
    
    .main-navigation { width: 100%; }
    
    /* Der reine Hamburger-Icon ohne Rahmen */
    .menu-toggle { 
        display: block !important; 
        background-color: transparent; 
        border: none; 
        padding: 5px 0; 
        margin: 0; 
        font-size: 0; 
        cursor: pointer; 
        text-align: left;
    }
    
    .menu-toggle::before {
        content: "\2261"; 
        font-size: 45px; 
        color: var(--text-color); 
        line-height: 1; 
        display: block;
    }

    /* Hauptmenü-Liste: Absolut flach, kein Hintergrund, kein Schatten */
    .main-navigation ul { 
        display: none; 
        flex-direction: column !important; 
        width: 100%; 
        padding: 10px 0 0 0; 
        background: transparent !important; 
        box-shadow: none !important; 
        border-radius: 0 !important;
        align-items: flex-start;
        gap: 0;
    }
    .main-navigation ul.toggled { 
        display: flex; 
    }
    
    /* Menü-Punkte linksbündig ausrichten */
    .main-navigation li {
        width: 100%;
        text-align: left;
    }
    
    /* Haupt-Links: Keine Unterstreichungen oder Rahmen */
    .main-navigation a {
        padding: 8px 0;
        border-bottom: none !important;
        display: inline-block;
        width: 100%;
    }
    .main-navigation a:hover,
    .main-navigation .current-menu-item > a {
        border-bottom-color: transparent !important;
        color: var(--menu-active-color);
    }

    /* Untermenüs: Dauerhaft listenartig geöffnet und eingerückt */
    .main-navigation ul ul { 
        position: static; 
        display: flex !important; 
        flex-direction: column !important;
        box-shadow: none !important; 
        background: transparent !important; 
        padding-left: 20px; /* Ein Stück weiter nach rechts gerückt */
        min-width: 100%; 
        margin-top: 0;
        gap: 0;
    }
    .main-navigation li:hover > ul { 
        display: flex !important; 
    }
    
    /* Desktop-Button-Styling für mobile Untermenü-Links komplett aufheben */
    .main-navigation ul ul a {
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 6px 0 !important;
        font-weight: normal; /* Macht die Unterpunkte optisch noch schlichter */
    }
    
    .main-navigation ul ul a:hover {
        transform: none !important; /* Verhindert das seitliche Verspringen vom Desktop */
        background-color: transparent !important;
        color: var(--menu-active-color) !important;
    }
    
    /* Kleiner optischer Indikator für Hauptpunkte mit Unterpunkten */
    .main-navigation li.menu-item-has-children > a::before {
        content: "▼";
        font-size: 0.7em;
        margin-right: 8px;
        vertical-align: middle;
    }
}