/**
 * Projekt: Glutenfrei leben
 * Datei: public/assets/css/sections/12-mobile-edge-nav.css
 * Zweck: Direkte Mobile-Header- und Edge-Menü-Überschreibung
 * Stand: 2026-06-12
 *
 * Änderung:
 * - Mobile-Edge-Menü weiter nach oben gesetzt.
 * - Aktiver Menüpunkt bleibt eingeklappt.
 * - Ausfahren nur noch bei Hover/Fokus/Tipp.
 */

/* ==========================================================
   01. Standard: Mobile-Menü auf Desktop ausblenden
   ========================================================== */

.gf-mobile-edge-nav {
    display: none;
}

.gf-mobile-edge-nav__link {
    text-decoration: none;
}


/* ==========================================================
   02. Mobile / Tablet schmal
   ========================================================== */

@media (max-width: 859px) {

    body {
        padding-right: env(safe-area-inset-right);
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .91) 58%, rgba(238, 246, 233, .96));
        border-bottom: 1px solid var(--gf-color-border);
    }

    .site-header__inner {
        width: min(100% - 1.5rem, var(--gf-container));
        margin-inline: auto;
        display: grid;
        justify-items: center;
        align-items: center;
        gap: .35rem;
        padding: .9rem 0 .75rem;
        grid-template-columns: 1fr;
    }

    .brand,
    .gf-brand--single-logo {
        justify-content: center;
        width: 100%;
    }

    .brand__text,
    .gf-brand__text--single-logo {
        justify-items: center;
        text-align: center;
        width: 100%;
    }

    .brand__logo,
    .gf-brand__logo--large {
        width: min(19rem, 82vw) !important;
        max-height: 4.9rem !important;
        object-fit: contain;
        object-position: center;
    }

    .brand__text small {
        margin-top: .12rem;
        font-size: .82rem;
        text-align: center;
    }

    .main-nav {
        display: none !important;
    }


    /* ======================================================
       02.01 Edge-Menü rechts
       ====================================================== */

    .gf-mobile-edge-nav {
        position: fixed;
        right: max(.28rem, env(safe-area-inset-right));
        top: clamp(6.4rem, 15vh, 8.2rem);
        z-index: 80;
        display: grid;
        gap: .42rem;
        transform: none;
        pointer-events: none;
    }

    .gf-mobile-edge-nav__link {
        pointer-events: auto;
        justify-self: end;
        display: grid;
        grid-template-columns: 2.65rem auto;
        align-items: center;
        width: 2.85rem;
        min-height: 2.85rem;
        overflow: hidden;
        border-radius: 999px 0 0 999px;
        color: #fff;
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(135deg, var(--gf-color-primary), var(--gf-color-primary-dark));
        border: 1px solid rgba(255, 255, 255, .42);
        box-shadow: 0 .75rem 1.5rem rgba(32, 41, 28, .20);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transform: translateX(.12rem);
        transition:
            width .28s ease,
            transform .28s ease,
            background .28s ease,
            box-shadow .28s ease,
            border-color .28s ease;
    }

    .gf-mobile-edge-nav__link:nth-child(2) {
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(135deg, #d98c2b, #b3681c);
    }

    .gf-mobile-edge-nav__link:nth-child(3) {
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(135deg, #208a9f, #166d80);
    }

    .gf-mobile-edge-nav__link:nth-child(4) {
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(135deg, #7a60c7, #4f3b9a);
    }

    .gf-mobile-edge-nav__link:nth-child(5) {
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(135deg, #e8579a, #b82d72);
    }

    .gf-mobile-edge-nav__link:nth-child(6),
    .gf-mobile-edge-nav__link--strong {
        background:
            radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .30), transparent 34%),
            linear-gradient(135deg, #2f3b2d, #11180f);
    }

    .gf-mobile-edge-nav__short {
        display: grid;
        place-items: center;
        width: 2.65rem;
        height: 2.65rem;
        font-size: .75rem;
        font-weight: 950;
        letter-spacing: -.02em;
        text-align: center;
        line-height: 1;
    }

    .gf-mobile-edge-nav__label {
        display: block;
        max-width: 0;
        opacity: 0;
        padding-right: 0;
        white-space: nowrap;
        font-size: .9rem;
        font-weight: 900;
        transition:
            max-width .28s ease,
            opacity .18s ease,
            padding-right .28s ease;
    }


    /* ======================================================
       02.02 Aktiver Zustand bleibt klein
       ====================================================== */

    .gf-mobile-edge-nav__link.is-active {
        width: 2.95rem;
        transform: translateX(0);
        border-color: rgba(255, 255, 255, .88);
        box-shadow:
            0 .7rem 1.35rem rgba(32, 41, 28, .24),
            0 0 0 3px rgba(255, 255, 255, .34);
    }

    .gf-mobile-edge-nav__link.is-active .gf-mobile-edge-nav__label {
        max-width: 0;
        opacity: 0;
        padding-right: 0;
    }


    /* ======================================================
       02.03 Ausfahren nur bei aktiver Bedienung
       ====================================================== */

    .gf-mobile-edge-nav__link:hover,
    .gf-mobile-edge-nav__link:focus,
    .gf-mobile-edge-nav__link:focus-visible,
    .gf-mobile-edge-nav__link.is-peeking {
        width: min(12.5rem, calc(100vw - 1.25rem));
        transform: translateX(0);
        box-shadow: 0 1rem 2rem rgba(32, 41, 28, .28);
    }

    .gf-mobile-edge-nav__link:hover .gf-mobile-edge-nav__label,
    .gf-mobile-edge-nav__link:focus .gf-mobile-edge-nav__label,
    .gf-mobile-edge-nav__link:focus-visible .gf-mobile-edge-nav__label,
    .gf-mobile-edge-nav__link.is-peeking .gf-mobile-edge-nav__label {
        max-width: 9rem;
        opacity: 1;
        padding-right: 1rem;
    }

    .gf-mobile-edge-nav__link:focus-visible {
        outline: 3px solid rgba(255, 255, 255, .9);
        outline-offset: 3px;
    }
}


/* ==========================================================
   03. Sehr kleine iPhones
   ========================================================== */

@media (max-width: 420px) {
    .brand__logo,
    .gf-brand__logo--large {
        width: min(17rem, 84vw) !important;
        max-height: 4.35rem !important;
    }

    .brand__text small {
        display: none;
    }

    .gf-mobile-edge-nav {
        right: max(.16rem, env(safe-area-inset-right));
        top: clamp(5.9rem, 14vh, 7.2rem);
        gap: .34rem;
    }

    .gf-mobile-edge-nav__link {
        width: 2.5rem;
        min-height: 2.5rem;
        grid-template-columns: 2.35rem auto;
    }

    .gf-mobile-edge-nav__short {
        width: 2.35rem;
        height: 2.35rem;
        font-size: .67rem;
    }

    .gf-mobile-edge-nav__link.is-active {
        width: 2.6rem;
    }

    .gf-mobile-edge-nav__link:hover,
    .gf-mobile-edge-nav__link:focus,
    .gf-mobile-edge-nav__link:focus-visible,
    .gf-mobile-edge-nav__link.is-peeking {
        width: min(11.8rem, calc(100vw - .75rem));
    }
}


/* ==========================================================
   04. Bewegung reduzieren
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .gf-mobile-edge-nav__link,
    .gf-mobile-edge-nav__label {
        transition: none;
    }
}