/*
 * File: responsive.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Breakpoint-Anpassungen für größere Bildschirme.
 * Mobile-First-Defaults stehen in den jeweiligen Komponenten-
 * Dateien; hier werden nur Tablet-/Desktop-Overrides definiert.
 *
 *   ≥ 480px  – Login-Karte schmaler, Popup leicht eingerückt
 *   ≥ 768px  – Listeneinträge kompakter (6rem statt 6.5rem),
 *              KW-Button kleiner (3.8rem)
 *   ≥ 1024px – Popup zentrierter (25 % Seitenabstand), Content
 *              bekommt max-width für angenehme Lesebreite
 */

@media (min-width: 480px) {
    #login { width: min(80%, 24rem); }
    .popup { left: 8%; right: 8%; }
}

@media (min-width: 768px) {
    #login { width: 22rem; }
    .popup { left: 15%; right: 15%; }
    #content div.content-delivery { height: 6rem; }
    #content-block div.delivery-headline button.weeknum-marker {
        width: 3.8rem;
        height: 3.8rem;
    }
}

@media (min-width: 1024px) {
    .popup { left: 25%; right: 25%; }
    #content { max-width: 100%; margin: 0 auto; }
    #content-block div.touren-list { padding: 0 max(1rem, env(safe-area-inset-left)); }
}

/* ============================================================
   SAFE-AREA-INSETS für moderne Geräte (iPhone Notch, Android Cutout)
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
    #header div.main-headline { padding-top: max(.25rem, env(safe-area-inset-top)); }
    #footer { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}