/* komponenten/Navigation/assets/css/seiten_navigation.css */

/* --- DESKTOP STYLES --- */
.seiten-nav-wrapper .hide-scrollbar::-webkit-scrollbar { display: none; }
.seiten-nav-wrapper .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.seiten-nav-wrapper .drag-scroll-container { cursor: grab; }
.seiten-nav-wrapper .seitennav-icon-wrap { display: inline-flex; font-size: 17px; line-height: 1; }
html { scroll-behavior: smooth; }

/* --- MOBILE STYLES --- */
@media (max-width: 767px) {

    /* Der Link-Stapel: etwas weniger milchig, damit die weißen Kacheln
       darauf klar sitzen. */
    .seiten-nav-inner {
        background: rgba(241, 245, 249, 0.72); /* slate-100, halbtransparent */
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    /* Kopfzeile über den Kacheln */
    .seitennav-kopf {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #64748b;               /* slate-500 */
        padding: 2px 8px 4px;
    }

    /* Einzelne Kachel */
    .seitennav-kachel {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 10px 14px;
        background: #ffffff;
        border: 0.5px solid rgba(15, 23, 42, 0.10);
        border-radius: 11px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        text-decoration: none;
        white-space: nowrap;
        transition: transform 0.12s ease, box-shadow 0.15s ease,
                    background 0.15s ease, border-color 0.15s ease;
    }
    .seitennav-kachel:hover {
        background: #eef2ff;          /* indigo-50 */
        border-color: rgba(99, 102, 241, 0.35);
        box-shadow: 0 3px 8px -2px rgba(79, 70, 229, 0.28);
        transform: translateX(2px);
    }
    .seitennav-kachel:active {
        transform: translateX(2px) scale(0.99);
        background: #e0e7ff;          /* indigo-100 */
    }

    /* Akzentstreifen links */
    .seitennav-kachel-akzent {
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #6366f1;          /* indigo-500 */
        opacity: 0.55;
        transition: opacity 0.15s ease;
    }
    .seitennav-kachel:hover .seitennav-kachel-akzent,
    .seitennav-kachel:active .seitennav-kachel-akzent {
        opacity: 1;
    }

    /* Icon */
    .seitennav-kachel-icon {
        display: inline-flex;
        color: #6366f1;               /* indigo-500 */
        flex-shrink: 0;
        font-size: 18px;
        line-height: 1;
    }
    .seitennav-kachel:hover .seitennav-kachel-icon,
    .seitennav-kachel:active .seitennav-kachel-icon {
        color: #4338ca;               /* indigo-700 */
    }

    /* Beschriftung */
    .seitennav-kachel-text {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;               /* slate-800 */
    }
    .seitennav-kachel:hover .seitennav-kachel-text,
    .seitennav-kachel:active .seitennav-kachel-text {
        color: #4338ca;               /* indigo-700 */
    }

    /* Verschwommener Seitenhintergrund im ausgeklappten Zustand.
       Nur weichzeichnen, kein Abdunkeln. Standard: unsichtbar & nicht
       bedienbar (pointer-events: none), damit der Seiteninhalt frei
       bleibt. Erst im Zustand .is-visible wird geblurt und ein Tap
       darauf schließt die Leiste. */
    .seiten-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 997; /* unter der Rail (998), über dem Inhalt */
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        transition: backdrop-filter 0.35s ease,
                    -webkit-backdrop-filter 0.35s ease,
                    opacity 0.35s ease;
    }
    .seiten-nav-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .seiten-nav-slider {
        /* Standard: Stapel vollständig eingeschoben (-100%). Sichtbar bleibt nur
           der Griff, der als absolutes Element an der rechten Stapelkante klebt
           (left: 100%) und im eingeklappten Zustand damit genau am linken
           Bildschirmrand sitzt. */
        position: relative;
        transform: translateX(var(--nav-x, -100%));
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        touch-action: pan-y;
        will-change: transform;
    }
    .seiten-nav-mobile.is-open .seiten-nav-slider {
        --nav-x: 0px;
    }
    .seiten-nav-mobile.is-dragging .seiten-nav-slider {
        transition: none;
    }

    .seiten-nav-handle {
        /* Klebt rechts am Stapel (left: 100% der Sliderbreite = Stapelbreite,
           da der Griff selbst absolute ist und keine Fluss-Breite beiträgt)
           und fährt horizontal mit dem Slider mit.
           Vertikal fest bei 25% der Viewport-Höhe: Der Slider startet bei
           top: 4% (siehe .seiten-nav-mobile), daher 25vh - 4vh = 21vh, damit
           der Griff visuell exakt auf 25% der Bildschirmhöhe sitzt. */
        position: absolute;
        left: 100%;
        top: calc(25vh - 4vh);
        transform: translateY(-50%);
        width: 30px;
        height: 54px;
        background: #6366f1;          /* Indigo 500, voll deckend */
        color: #ffffff;
        border-radius: 0 11px 11px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 3px 0 12px -2px rgba(79, 70, 229, 0.45);
        border: none;
        cursor: pointer;
        z-index: 1;
        transition: opacity 0.25s ease, background 0.2s ease;
    }

    .seiten-nav-handle:active,
    .seiten-nav-mobile.is-open .seiten-nav-handle {
        background: #4338ca;          /* Indigo 700 */
    }

    .seiten-nav-handle svg {
        width: 18px;
        height: 18px;
        transition: transform 0.35s ease;
    }

    .seiten-nav-mobile.is-open .seiten-nav-handle svg {
        transform: rotate(180deg);
    }

    .seiten-nav-mobile.hint .seiten-nav-handle {
        animation: navHandleHint 1.5s ease-in-out 1;
    }
    @keyframes navHandleHint {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50%      { transform: translateY(-50%) translateX(6px); }
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .seiten-nav-slider { transition: none; }
    .seiten-nav-backdrop { transition: opacity 0.2s ease; }
    .seiten-nav-mobile.hint .seiten-nav-handle { animation: none; }
    .seiten-nav-handle svg { transition: none; }
}