/* ========================================
   NordSAR – Mobile Overrides
   Fixes für inline-style Grids in PHP-Seiten
   und allgemeine Mobile-UX-Verbesserungen
======================================== */

/* ── Inline-Grid-Fixes (about, contact, index etc.) ── */
@media (max-width: 760px) {

    /* about.php – Mission Grid */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* contact.php – Kontakt + Formular nebeneinander */
    [style*="grid-template-columns:1fr 1.4fr"],
    [style*="grid-template-columns: 1fr 1.4fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* equipment.php – Spende-CTA */
    [style*="grid-template-columns:1fr auto"],
    [style*="grid-template-columns: 1fr auto"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* index.php – About-Vorschau Grid */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:1fr 1.4fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Flex-Reihen die auf Mobile umbrechen sollen */
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Inline flex-Reihen in about / index CTAs */
    [style*="display:flex"][style*="gap:1rem"],
    [style*="display: flex"][style*="gap: 1rem"] {
        flex-wrap: wrap;
    }
}

/* ── Touch-freundliche Mindestgrößen ── */
@media (max-width: 600px) {

    /* Alle Buttons mindestens 48px hoch (WCAG) */
    a.btn, button.btn, input[type="submit"] {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Formular-Inputs: 16px verhindert iOS-Auto-Zoom */
    input, textarea, select {
        font-size: 16px !important;
    }

    /* Inline-Grids in index.php Highlight-Kacheln */
    [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"] {
        grid-template-columns: 1fr 1fr !important; /* 2er bleibt auf 600px OK */
    }

    /* Admin-Stats auf Mobile */
    .admin-stats { grid-template-columns: 1fr 1fr !important; }

    /* Notfall-Modal von unten auf Mobile */
    .notfall-overlay { align-items: flex-end; padding: 0; }
    .notfall-modal {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 85vh;
    }

    /* Admin-Topbar kompakter */
    .admin-topbar { padding: 0.85rem 1rem; }
    .admin-topbar-title h1 { font-size: 1rem; }
    .admin-topbar-actions { gap: 0.5rem; }
    .admin-user-badge { display: none; } /* Platz sparen */

    /* Tabellen scrollen horizontal */
    .admin-table-card { overflow-x: auto; }
    .admin-table { min-width: 580px; }

    /* Press-Detail Buttons */
    .press-detail .btn { width: 100%; justify-content: center; }

    /* Impressum / Datenschutz Grid */
    [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* ── 400px und kleiner (kleine Android-Geräte) ── */
@media (max-width: 400px) {
    .logo-main { font-size: 1rem !important; }
    .admin-stats { grid-template-columns: 1fr !important; }
    .press-card-day { display: none; } /* Datum klein, Platz sparen */

    /* Notfall-Nummer-Text kleiner */
    .notfall-num-number { font-size: 1rem; }
    .notfall-modal-body { padding: 1rem; }
}

/* ── Safe Area (iPhone mit Notch / Dynamic Island) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }
    .notfall-modal {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .cookie-banner {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .admin-sidebar {
        padding-left: env(safe-area-inset-left);
    }
}

/* ── Landscape Mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; }
    .hero-content { padding: 4.5rem 0 2rem; }
    .hero-title { font-size: clamp(1.5rem, 5vw, 2rem); }
    .hero-desc { font-size: 0.9rem; margin-bottom: 1rem; }
    .hero-stats { display: none; }
    .page-hero { padding: 2.5rem 0 1.5rem; }
}

/* ── Aufbau-Banner Mobile ── */
@media (max-width: 600px) {
    /* Aufbau-Banner: Text kleiner, untereinander */
    .features-strip + div .container {
        flex-direction: column;
        gap: 0.25rem;
    }
    .features-strip + div {
        padding: 0.75rem 0;
    }
    .features-strip + div span {
        font-size: 0.82rem !important;
    }
}

/* ── Print-Styles ── */
@media print {
    .site-header, .cookie-banner, .notfall-overlay,
    .btn-notfall-header, .hamburger { display: none !important; }
    .header-spacer { height: 0 !important; }
    body { background: #fff; }
    a { color: inherit; }
}