@media (max-width: 1000px) {
    
    /* 1. Grid Layout ändern: Alles untereinander */
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
            "content"
            "footer";
    }

    /* 2. Burger Button sichtbar machen */
    .cs-burgerToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 200;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.5rem;
        cursor: pointer;
        color: var(--text-main);
        width: 44px; /* Touch Target Size */
        height: 44px;
    }

    /* 3. Sidebar Off-Canvas schieben */
    .cs-appSidebar {
        position: fixed;
        inset: 0 auto 0 0; /* Top, Bottom, Left 0 */
        width: 85vw;
        max-width: 320px;
        transform: translateX(-100%); /* Ausblenden */
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        z-index: 150; /* Über Content, unter Burger */
        height: 100vh;
        border-right: none;
    }

    /* 4. Klasse 'menu-open' auf Body aktiviert Sidebar */
    body.menu-open .cs-appSidebar {
        transform: translateX(0);
    }

    /* 5. Backdrop Overlay wenn Menü offen */
    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 140;
        backdrop-filter: blur(2px);
    }

    /* Footer auf Mobile anpassen */
    .footer-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .footer-links a {
        margin: 0 0.5rem;
    }
}