/**
 * Mobile Responsive Overrides V1.0.0
 * Zentralisierte Mobile-Styles für alle öffentlichen Seiten
 *
 * @package Projecta_Redesign
 * @version 1.0.0
 * @since 2026-01-13
 *
 * WICHTIG: Diese Datei wird NACH allen anderen Styles geladen!
 * Sie enthält globale Mobile-Overrides für konsistentes Verhalten.
 */

/* ==========================================================================
   BREAKPOINT SYSTEM (Standardisiert)
   ==========================================================================

   Mobile:    0 - 480px     (Extra kleine Phones)
   Tablet:    481px - 768px (Standard Mobile/Tablet Portrait)
   Desktop:   769px - 1024px (Tablet Landscape / Small Desktop)
   Wide:      1025px+       (Desktop)

   ========================================================================== */

/* ==========================================================================
   GLOBAL MOBILE OVERRIDES
   ========================================================================== */

@media (max-width: 768px) {
    /* --------------------------------------------------------------------------
       Grid Stacking - Force 1 column on mobile
       -------------------------------------------------------------------------- */
    .grid-2-col,
    .two-columns,
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* --------------------------------------------------------------------------
       Padding Reduction - Less whitespace on mobile
       -------------------------------------------------------------------------- */
    .section-padding,
    section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --------------------------------------------------------------------------
       Typography - Responsive font sizes
       -------------------------------------------------------------------------- */
    h1, .hero-title, .hero-title-modern {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

    h2, .section-title {
        font-size: clamp(1.3rem, 4vw, 2rem) !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    }

    /* --------------------------------------------------------------------------
       Flexbox Stacking - Common patterns
       -------------------------------------------------------------------------- */
    .hero-features,
    .cta-buttons,
    .trust-items {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* --------------------------------------------------------------------------
       Cards & Containers
       -------------------------------------------------------------------------- */
    .card,
    .feature-card,
    .benefit-card,
    .benefits-card {
        padding: 1.25rem !important;
    }

    /* --------------------------------------------------------------------------
       Forms - Full width inputs
       -------------------------------------------------------------------------- */
    .form-row,
    .form-group-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --------------------------------------------------------------------------
       Tables - Horizontal scroll
       -------------------------------------------------------------------------- */
    .table-responsive,
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --------------------------------------------------------------------------
       Images & Media - Responsive
       -------------------------------------------------------------------------- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ==========================================================================
   EXTRA SMALL SCREENS (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    /* --------------------------------------------------------------------------
       Container - Minimal padding
       -------------------------------------------------------------------------- */
    .container,
    .site-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --------------------------------------------------------------------------
       Touch Targets - Minimum 44x44px (WCAG 2.1)
       -------------------------------------------------------------------------- */
    button,
    .btn,
    a.button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* --------------------------------------------------------------------------
       Typography - Even smaller for extra small screens
       -------------------------------------------------------------------------- */
    h1, .hero-title, .hero-title-modern {
        font-size: 1.5rem !important;
    }

    h2, .section-title {
        font-size: 1.25rem !important;
    }

    p, .text-body {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* --------------------------------------------------------------------------
       Cards - More compact
       -------------------------------------------------------------------------- */
    .card,
    .feature-card,
    .benefit-card,
    .benefits-card {
        padding: 1rem !important;
        border-radius: 8px !important;
    }
}

/* ==========================================================================
   Z-INDEX SCALE (Konsolidiert)
   ==========================================================================

   Standardisierte Z-Index Werte für konsistente Überlagerung

   ========================================================================== */

:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 1000;
    --z-overlay: 1500;
    --z-modal-backdrop: 2000;
    --z-modal: 2100;
    --z-toast: 3000;
    --z-loading: 4000;
    --z-max: 9999;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .hide-desktop,
    .mobile-only {
        display: none !important;
    }
}

/* Force no horizontal scroll */
.no-overflow-x {
    overflow-x: hidden !important;
}

/* Text truncation */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    /* Hide navigation and interactive elements */
    .site-header,
    .main-navigation,
    .mobile-menu-toggle,
    .notification-toast,
    .portal-modal,
    .content-panel {
        display: none !important;
    }

    /* Full width for content */
    .container,
    .site-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}