/* ===========================================================================
   QB-Sneak Mobile App-Shell
   ---------------------------------------------------------------------------
   Macht aus der bestehenden Hauptnavigation auf Handys eine feste Tab-Bar am
   unteren Rand (App-Optik). Reine Praesentation:

   - KEINE DOM-Aenderung. Dieselben <a href>-Links, dieselbe Reihenfolge,
     derselbe Text. Crawler (Googlebot, GPTBot, ClaudeBot, PerplexityBot)
     sehen exakt dasselbe HTML wie vorher.
   - KEIN JavaScript. Jede Seite bleibt eine eigene URL mit eigenem HTML.
   - Alles in @media (max-width:768px) -> Desktop bleibt unveraendert.

   Selektoren decken beide Nav-Varianten ab:
     .site-nav  = generierte Seiten (qbs.css)
     .qbnav     = handgepflegte Seiten (index.html, qb-ranking.html, reel.html)
   =========================================================================== */

@media (max-width: 768px) {

    /* --- Tab-Bar --------------------------------------------------------- */
    body nav.site-nav, body nav.qbnav {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-between;
        gap: 0;
        padding: 0 2px env(safe-area-inset-bottom, 0px);
        background: rgba(4, 7, 14, 0.88);
        backdrop-filter: blur(18px) saturate(1.3);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
        border-bottom: none;
        border-top: 1px solid rgba(25, 232, 232, 0.22);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
    }

    /* --- einzelner Tab ---------------------------------------------------- */
    body nav.site-nav a, body nav.qbnav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 1px 9px;
        min-height: 56px;
        font-size: clamp(7.5px, 2.3vw, 9.5px);
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.62);
        text-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Icon: CSS-Maske, faerbt sich ueber currentColor mit dem Tab-Zustand */
    body nav.site-nav a::before, body nav.qbnav a::before {
        content: "";
        display: block;
        width: 21px;
        height: 21px;
        flex: none;
        background: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        transition: transform 0.18s ease;
    }

    /* --- aktiver Tab ------------------------------------------------------ */
    body nav.site-nav a[aria-current="page"], body nav.qbnav a[aria-current="page"],
    body nav.site-nav a.brand, body nav.qbnav a.brand {
        color: rgba(255, 255, 255, 0.62);
        text-shadow: none;
    }
    body nav.site-nav a[aria-current="page"], body nav.qbnav a[aria-current="page"] {
        color: var(--cyan, #19e8e8);
        text-shadow: 0 0 10px rgba(25, 232, 232, 0.55);
    }
    body nav.site-nav a[aria-current="page"]::before, body nav.qbnav a[aria-current="page"]::before {
        filter: drop-shadow(0 0 7px rgba(25, 232, 232, 0.7));
    }
    /* schmaler Indikator ueber dem aktiven Tab */
    body nav.site-nav a[aria-current="page"]::after, body nav.qbnav a[aria-current="page"]::after {
        content: "";
        position: absolute;
        top: 0;
        width: 26px;
        height: 2px;
        border-radius: 0 0 3px 3px;
        background: var(--cyan, #19e8e8);
        box-shadow: 0 0 10px rgba(25, 232, 232, 0.9);
    }
    body nav.site-nav a, body nav.qbnav a { position: relative; }

    /* Touch-Feedback statt :hover (auf Touch klebt :hover) */
    body nav.site-nav a:hover, body nav.qbnav a:hover { color: rgba(255, 255, 255, 0.62); text-shadow: none; }
    body nav.site-nav a[aria-current="page"]:hover, body nav.qbnav a[aria-current="page"]:hover {
        color: var(--cyan, #19e8e8); text-shadow: 0 0 10px rgba(25, 232, 232, 0.55);
    }
    body nav.site-nav a:active::before, body nav.qbnav a:active::before { transform: scale(0.86); }
    body nav.site-nav a:active, body nav.qbnav a:active { color: var(--cyan, #19e8e8); }

    /* --- Icons (Zuordnung ueber href, nicht ueber Position) --------------- */
    body nav.site-nav a[href="/"]::before, body nav.qbnav a[href="/"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.3l9 7.3'/%3E%3Cpath d='M5.4 9.6V20.7h13.2V9.6'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.3l9 7.3'/%3E%3Cpath d='M5.4 9.6V20.7h13.2V9.6'/%3E%3C/svg%3E");
    }
    body nav.site-nav a[href="/folgen"]::before, body nav.qbnav a[href="/folgen"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.2v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='2.8' y='13.9' width='4.6' height='6.7' rx='1.8'/%3E%3Crect x='16.6' y='13.9' width='4.6' height='6.7' rx='1.8'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.2v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='2.8' y='13.9' width='4.6' height='6.7' rx='1.8'/%3E%3Crect x='16.6' y='13.9' width='4.6' height='6.7' rx='1.8'/%3E%3C/svg%3E");
    }
    body nav.site-nav a[href="/teams"]::before, body nav.qbnav a[href="/teams"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19.4 6v5.6c0 4.6-3.1 8.5-7.4 9.8-4.3-1.3-7.4-5.2-7.4-9.8V6z'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19.4 6v5.6c0 4.6-3.1 8.5-7.4 9.8-4.3-1.3-7.4-5.2-7.4-9.8V6z'/%3E%3C/svg%3E");
    }
    body nav.site-nav a[href="/qb-ranking"]::before, body nav.qbnav a[href="/qb-ranking"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4.8 20.4V13.2'/%3E%3Cpath d='M12 20.4V4.4'/%3E%3Cpath d='M19.2 20.4V9.2'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4.8 20.4V13.2'/%3E%3Cpath d='M12 20.4V4.4'/%3E%3Cpath d='M19.2 20.4V9.2'/%3E%3C/svg%3E");
    }
    body nav.site-nav a[href="/nfl-a-z"]::before, body nav.qbnav a[href="/nfl-a-z"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.4A2.2 2.2 0 0 1 6.2 3.2H20v17.6H6.2A2.2 2.2 0 0 1 4 18.6z'/%3E%3Cpath d='M8.4 3.2v17.6'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.4A2.2 2.2 0 0 1 6.2 3.2H20v17.6H6.2A2.2 2.2 0 0 1 4 18.6z'/%3E%3Cpath d='M8.4 3.2v17.6'/%3E%3C/svg%3E");
    }
    body nav.site-nav a[href="/hosts"]::before, body nav.qbnav a[href="/hosts"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.4' r='3.3'/%3E%3Cpath d='M3.4 20.4c0-3.2 2.6-5.5 5.8-5.5s5.8 2.3 5.8 5.5'/%3E%3Cpath d='M16.3 11a2.7 2.7 0 1 0-1.5-4.9'/%3E%3Cpath d='M17 15.5c2.1.5 3.6 2.3 3.6 4.9'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.4' r='3.3'/%3E%3Cpath d='M3.4 20.4c0-3.2 2.6-5.5 5.8-5.5s5.8 2.3 5.8 5.5'/%3E%3Cpath d='M16.3 11a2.7 2.7 0 1 0-1.5-4.9'/%3E%3Cpath d='M17 15.5c2.1.5 3.6 2.3 3.6 4.9'/%3E%3C/svg%3E");
    }

    /* --- Platz schaffen, damit die Bar nichts verdeckt -------------------- */
    html body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
    }

    /* Sprungmarken landen nicht mehr unter der Bar */
    :target { scroll-margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Wer Bewegung reduziert haben will, bekommt keine */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    body nav.site-nav a::before, body nav.qbnav a::before { transition: none; }
}