/* ========================================
   MOVE-EASY24 - MOBILE OPTIMIERUNG
   Dedizierte Mobile Styles für alle Seiten
   ======================================== */

/* ====== GLOBAL MOBILE STYLES ====== */

/* Base Mobile Resets */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* GRÖßER für bessere Lesbarkeit */
    }
    
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        line-height: 1.6 !important; /* Bessere Lesbarkeit */
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ====== NAVIGATION MOBILE ====== */

/* Mobile Menu */
@media (max-width: 768px) {
    nav {
        padding: 0.75rem 1rem !important;
    }
    
    nav .container {
        padding: 0 0.5rem !important;
    }
    
    /* Logo kleiner auf Mobile */
    nav .text-4xl {
        font-size: 2rem !important;
    }
    
    nav .text-2xl {
        font-size: 1.25rem !important;
    }
    
    /* Mobile Menu Button größer */
    #mobile-menu-btn {
        padding: 0.5rem;
        font-size: 1.5rem;
    }
    
    /* Mobile Menu Items */
    #mobile-menu a {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-bottom: 1px solid #f3f4f6;
    }
    
    #mobile-menu a:last-child {
        border-bottom: none;
    }
    
    /* Mobile Menu Animation */
    #mobile-menu.active {
        display: block !important;
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ====== HERO SECTION MOBILE ====== */

@media (max-width: 768px) {
    .hero-section {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-section h2 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    .hero-section p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Hero Buttons */
    .hero-section .btn,
    .hero-section button,
    .hero-section a[class*="bg-"] {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Hero Background Image */
    .hero-section .absolute img {
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* ====== GRID LAYOUTS MOBILE ====== */

@media (max-width: 768px) {
    /* Alle Grids werden zu Single Column */
    .grid,
    [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Features, Stats, Cards */
    .grid > div,
    .grid > article,
    .grid > section {
        margin-bottom: 1rem;
    }
}

/* ====== CARDS & BOXES MOBILE ====== */

@media (max-width: 768px) {
    /* Alle Cards volle Breite */
    .card,
    [class*="rounded-"],
    [class*="shadow-"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Card Padding kleiner */
    .p-8 {
        padding: 1.5rem !important;
    }
    
    .p-6 {
        padding: 1.25rem !important;
    }
    
    .p-4 {
        padding: 1rem !important;
    }
}

/* ====== FORMS MOBILE ====== */

@media (max-width: 768px) {
    /* Form Container */
    form {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Input Fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Labels */
    label {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* Form Buttons */
    form button,
    form input[type="submit"] {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
        margin-top: 1rem !important;
    }
    
    /* Multi-Column Forms */
    form .grid-cols-2,
    form .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ====== MODALS MOBILE ====== */

@media (max-width: 768px) {
    /* Modal Container */
    .modal,
    [class*="fixed"][class*="inset-0"] {
        padding: 1rem !important;
    }
    
    /* Modal Content */
    .modal-content,
    .modal > div {
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
        margin: 1rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Modal Header */
    .modal h2,
    .modal h3 {
        font-size: 1.25rem !important;
    }
    
    /* Modal Close Button */
    .modal button[class*="absolute"] {
        top: 1rem !important;
        right: 1rem !important;
    }
}

/* ====== TABLES MOBILE ====== */

@media (max-width: 768px) {
    /* Table Wrapper */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 0.85rem !important;
    }
    
    /* Table Cells */
    th, td {
        padding: 0.5rem !important;
        min-width: 100px !important;
    }
    
    /* Responsive Table Alternative */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ====== TYPOGRAPHY MOBILE ====== */

@media (max-width: 768px) {
    h1 {
        font-size: 2rem !important; /* GRÖßER: 32px */
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }
    
    h2 {
        font-size: 1.75rem !important; /* GRÖßER: 28px */
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    
    h3 {
        font-size: 1.5rem !important; /* GRÖßER: 24px */
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    h4 {
        font-size: 1.25rem !important; /* GRÖßER: 20px */
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    p {
        font-size: 1rem !important; /* GRÖßER: 16px */
        line-height: 1.7 !important;
    }
    
    /* Größere Text in Hero */
    .hero-section p {
        font-size: 1.1rem !important; /* 17.6px */
        line-height: 1.7 !important;
    }
    
    /* Text Alignment auf Mobile */
    .text-justify {
        text-align: left !important;
    }
}

/* ====== SPACING MOBILE ====== */

@media (max-width: 768px) {
    /* Container Padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section Spacing */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Large Spacing reduzieren */
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Margin Spacing */
    .mb-12 {
        margin-bottom: 2rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem !important;
    }
}

/* ====== BUTTONS MOBILE ====== */

@media (max-width: 768px) {
    /* Standard Buttons */
    .btn,
    button:not(.icon-only),
    a[class*="bg-"]:not(.inline) {
        min-height: 44px !important; /* Touch-friendly */
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* Button Groups */
    .button-group {
        flex-direction: column !important;
    }
    
    .button-group > * {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Floating Action Buttons */
    .fab,
    .floating-btn {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* ====== IMAGES & MEDIA MOBILE ====== */

@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Video Responsive */
    video,
    iframe {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Background Images */
    [style*="background-image"] {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ====== DASHBOARD MOBILE ====== */

@media (max-width: 768px) {
    /* Dashboard Sidebar */
    .dashboard-sidebar {
        display: none !important;
    }
    
    .dashboard-sidebar.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        height: 100vh !important;
        z-index: 100 !important;
        background: white !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Dashboard Content */
    .dashboard-content {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Dashboard Cards */
    .dashboard-card {
        margin-bottom: 1rem !important;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ====== OLD CHATBOT MOBILE - DISABLED ====== */

@media (max-width: 768px) {
    /* Hide old chatbot completely */
    #chatbot-widget,
    #chatbot-button,
    #chatbot-container,
    #chatbot-messages,
    #chatbot-input-area,
    #chatbot-input {
        display: none !important;
        visibility: hidden !important;
    }
}
    
    /* Quick Reply Buttons */
    .quick-reply-btn {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0.25rem !important;
    }
}

/* ====== FOOTER MOBILE ====== */

@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    footer h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    footer ul li {
        margin-bottom: 0.5rem !important;
    }
    
    footer a {
        font-size: 0.95rem !important;
    }
}

/* ====== ANIMATIONS MOBILE ====== */

@media (max-width: 768px) {
    /* Reduce motion für bessere Performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Smooth Scroll */
    html {
        scroll-behavior: smooth;
    }
}

/* ====== UTILITIES MOBILE ====== */

@media (max-width: 768px) {
    /* Hide on Mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on Mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Full Width on Mobile */
    .mobile-full {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Text Center on Mobile */
    .mobile-center {
        text-align: center !important;
    }
    
    /* No Padding on Mobile */
    .mobile-no-padding {
        padding: 0 !important;
    }
}

/* ====== FIXES FÜR BEKANNTE PROBLEME ====== */

@media (max-width: 768px) {
    /* Horizontal Scroll Fix */
    body, html {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* iOS Input Zoom Fix */
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"] {
        font-size: 16px !important;
    }
    
    /* Touch Highlight Fix */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
    
    /* Safe Area für iPhone X+ */
    @supports (padding: env(safe-area-inset-left)) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}

/* ====== LANDSCAPE MODE ====== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Navigation kompakter im Landscape */
    nav {
        padding: 0.5rem 1rem !important;
    }
    
    /* Hero Section kleiner */
    .hero-section {
        padding-top: 4rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Modals kleiner */
    .modal-content {
        max-height: 70vh !important;
    }
}

/* ====== SMALL MOBILE (< 375px) ====== */

@media (max-width: 374px) {
    html {
        font-size: 13px !important;
    }
    
    nav .text-2xl {
        font-size: 1.1rem !important;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    button, .btn {
        padding: 0.65rem 1rem !important;
        font-size: 0.95rem !important;
    }
}

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

@media print {
    nav,
    footer,
    #chatbot-widget,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}