@media (max-width: 768px) {
    .container {
        /* Top/Bottom-Padding ist auf Mobile ueberfluessig:
           - Oben sitzt der .mobile-header, der schon Bottom-Padding hat
           - Unten ist die fixe .main-nav, dafuer hat body padding-bottom
           Nur seitliches Padding ist hier sinnvoll, damit Content nicht
           an den Rand klebt. */
        padding: 0 var(--spacing-24);
    }

    /* Filter-Modal: volle Breite auf Mobile */
    .filter-modal-content {
        width: 100%;
        max-width: none;
        max-height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .movie-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .movie-item img {
        width: 80px;
    }

    .login-form {
        padding: var(--spacing-16);
    }

    .button {
        padding: var(--spacing-8) var(--spacing-16);
    }

}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        /* Owner-Feedback 2026-08-14: padding-top: 0 war eine blinde
           Kopie der Mobile-Regel (Commit 99cf7a2), die begruendet war
           weil .mobile-header oben Bottom-Padding hat. Im Bereich
           769-1024 ist aber KEIN Mobile-Header aktiv — Desktop-Nav
           sitzt fixed oben, body hat nur padding-top:70px, ohne
           Container-Top-Padding klebt Content direkt an der Nav.
           Zurueck auf allseitiges Padding wie in der Basis-Regel
           (.container in main.css Zeile 431). */
        padding: var(--spacing-24);
    }

    .movie-item img {
        width: 90px;
    }
}