@charset "UTF-8";
/* CSS Document */
/* Zentrale Design-Anpassungen für Puentedeclientes */

/* ==========================================================================
   1. Barrierefreiheit & Kontrast (Lighthouse-Fixes)
   ========================================================================== */
/* Setzt dunklen Text auf den hellen Tags für perfekten Kontrast */
.tag-eeat, .tag-local, .tag-gbp {
    color: #111111 !important;
}

/* ==========================================================================
   2. Responsive Navigation (Fix für das Burger-Menü)
   ========================================================================== */

/* Verhindert, dass Textfarbe in der Navigation untergeht */
:root {
    --text-main: #212121;
}

/* Container-Standard für das Menü */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 54px;
}

/* Desktop-Anzeige: Links nebeneinander */
.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Versteckt die Checkbox und das Hamburger-Icon standardmäßig auf Desktop */
#nav-check {
    display: none;
}
.menu-toggle {
    display: none;
    cursor: pointer;
    padding: 15px;
    user-select: none;
}

/* Mobil-Optimierung (wird aktiv ab 768px Displaybreite) */
@media (max-width: 768px) {
    /* Zeigt das Hamburger-Menü rechts an */
    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        right: 15px;
        top: 0;
        height: 100%;
    }

    /* Das animierte Burger-Icon (4 Linien-Technik) */
    .burger-icon {
        display: inline-block;
        width: 20px;
        height: 14px;
        position: relative;
    }
    .burger-icon span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--text-main, #212121);
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transition: .25s ease-in-out;
    }
    .burger-icon span:nth-child(1) { top: 0px; }
    .burger-icon span:nth-child(2), .burger-icon span:nth-child(3) { top: 6px; }
    .burger-icon span:nth-child(4) { top: 12px; }

    /* Versteckt die Menü-Liste standardmäßig auf dem Smartphone */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #eeeeee;
    }

    /* Untereinander liegende Menüpunkte im Mobilmodus */
    .main-navigation li {
        display: block;
        margin: 0;
        border-bottom: 1px solid #eeeeee;
    }
    .main-navigation a {
        display: block;
        padding: 12px 20px;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
    }
    /* Aktiver Link bekommt mobil einen linken statt unteren Rahmen */
    .main-navigation a.active {
        border-bottom: none;
        border-left: 4px solid var(--accent-red, #d62839);
    }

    /* CSS-Magie: Wenn die Checkbox aktiv ist, zeige das Menü und animiere das X */
    #nav-check:checked ~ .nav-links {
        display: flex;
    }
    #nav-check:checked ~ .menu-toggle .burger-icon span:nth-child(1) { top: 6px; width: 0%; left: 50%; }
    #nav-check:checked ~ .menu-toggle .burger-icon span:nth-child(2) { transform: rotate(45deg); }
    #nav-check:checked ~ .menu-toggle .burger-icon span:nth-child(3) { transform: rotate(-45deg); }
    #nav-check:checked ~ .menu-toggle .burger-icon span:nth-child(4) { top: 6px; width: 0%; left: 50%; }
}