/*
----------------------------------------
Datei: responsive.css
Beschreibung: Anpassungen für Tablet (640–1023px) und Mobil (bis 639px).
Auf Mobil wird die Sidebar zum Overlay; Funktionen bleiben gleich.
----------------------------------------
*/

@layer overrides {
    @media (max-width: 1023px) {
        .app__inhalt {
            padding: var(--abstand-6);
        }

        .app,
        .app.ist-sidebar-kompakt {
            grid-template-columns: minmax(0, 1fr);
        }

        .app__inhalt {
            grid-column: 1;
        }

        .app__sidebar {
            position: fixed;
            left: 0;
            top: var(--hoehe-header);
            bottom: 0;
            width: var(--breite-sidebar);
            height: auto;
            z-index: var(--z-sidebar-mobil);
            transform: translateX(-100%);
            transition: transform var(--dauer-standard) var(--easing-standard);
            box-shadow: var(--schatten-gross);
        }

        .app.ist-sidebar-offen .app__sidebar {
            transform: none;
        }

        .app.ist-sidebar-offen .seitenleiste__hintergrund {
            display: block;
            position: fixed;
            inset: var(--hoehe-header) 0 0 0;
            /* direkt unter der Sidebar, damit diese bedienbar bleibt */
            z-index: calc(var(--z-sidebar-mobil) - 1);
            background: var(--farbe-overlay);
        }

        /* Im Overlay immer mit Text, auch wenn auf dem Desktop eingeklappt */
        .ist-sidebar-kompakt .hauptnavigation__bereich,
        .ist-sidebar-kompakt .hauptnavigation__text,
        .ist-sidebar-kompakt .seitenleiste__version {
            position: static;
            width: auto;
            height: auto;
            clip-path: none;
        }

        .ist-sidebar-kompakt .hauptnavigation__link {
            justify-content: flex-start;
            padding-inline: var(--abstand-3);
        }

        .dashboard-spalten {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 639px) {
        .app__inhalt {
            padding: var(--abstand-4);
        }

        .kopfleiste {
            gap: var(--abstand-2);
            padding-inline: var(--abstand-2);
        }

        .kopfleiste__name,
        .kopfleiste__status,
        .benutzermenue__name {
            display: none;
        }

        .seitenkopf__titel {
            font-size: var(--schriftgroesse-6);
        }

        .formular-raster {
            grid-template-columns: minmax(0, 1fr);
        }

        .karte {
            padding: var(--abstand-4);
        }

        .datentabelle__toolbar {
            padding-inline: var(--abstand-4);
        }

        .toolbar__suche {
            max-width: none;
        }

        .details__zeile {
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
        }

        .button,
        .hauptnavigation__link {
            min-height: 44px;
        }

        .einzelseite__karte {
            padding: var(--abstand-6);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            transition-duration: 0ms !important;
            animation-duration: 0ms !important;
        }
    }
}