/* ========================================
   MOBILE-FIRST OPTIMIZATIONS
   flexHUB digital.group
   ======================================== */

/* ========================================
   1. TOUCH-FRIENDLY TAP TARGETS
   Minimum 44x44px für alle interaktiven Elemente
   ======================================== */

@media (max-width: 768px) {
    /* Buttons - Größere Touch-Targets */
    .btn,
    button,
    [role="button"] {
        min-height: 48px;
        min-width: 48px;
        padding: 14px 24px;
    }
    
    /* Links in Navigation */
    .nav-link,
    .dropdown-link,
    .mega-card {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    /* Footer Links */
    .footer-links a {
        display: inline-block;
        padding: 8px 0;
        min-height: 44px;
        line-height: 28px;
    }
    
    /* Form Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    /* Checkbox & Radio Labels */
    .form-checkbox label,
    input[type="checkbox"] + label,
    input[type="radio"] + label {
        padding: 12px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Social Icons */
    .social-links a,
    .share-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ========================================
   2. VERBESSERTE MOBILE NAVIGATION
   ======================================== */

@media (max-width: 768px) {
    /* Mobile Nav Overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 998;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Swipe-freundliches Mobile Menu */
    .nav-menu {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    
    /* Mobile Menu Scrollbar verstecken */
    .nav-menu::-webkit-scrollbar {
        display: none;
    }
    
    .nav-menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Größerer Toggle Button */
    .nav-toggle {
        width: 48px;
        height: 48px;
        padding: 12px;
        margin: -12px -12px -12px 0;
    }
    
    /* Active States für Touch */
    .nav-link:active,
    .mega-card:active,
    .dropdown-link:active {
        background: rgba(13, 79, 110, 0.08);
        transform: scale(0.98);
    }
}

/* ========================================
   3. MOBILE-OPTIMIERTE TYPOGRAFIE
   ======================================== */

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }
    
    /* Größere Basis-Schrift für bessere Lesbarkeit */
    body {
        font-size: 16px;
        line-height: 1.7;
    }
    
    /* Optimierte Heading-Größen */
    h1, .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.2;
    }
    
    h2, .section-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        line-height: 1.25;
    }
    
    h3 {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
    }
    
    /* Bessere Absatz-Lesbarkeit */
    p {
        font-size: 1rem;
        line-height: 1.75;
    }
    
    /* Hero Section */
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Section Subtitles */
    .section-subtitle {
        font-size: 1rem;
    }
}

/* Sehr kleine Bildschirme */
@media (max-width: 375px) {
    h1, .hero-title {
        font-size: 1.5rem;
    }
    
    h2, .section-title {
        font-size: 1.35rem;
    }
    
    .btn {
        font-size: 0.9rem;
        padding: 12px 20px;
    }
}

/* ========================================
   4. MOBILE-OPTIMIERTE ABSTÄNDE
   ======================================== */

@media (max-width: 768px) {
    /* Container Padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Sections */
    section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    /* Section Headers */
    .section-header {
        margin-bottom: 40px;
    }
    
    /* Cards */
    .service-card,
    .benefit-card,
    .case-study-card {
        padding: 24px 20px;
    }
    
    /* Hero */
    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }
    
    /* Hero Stats */
    .hero-stats {
        gap: 20px;
        margin-top: 32px;
    }
    
    /* CTA Buttons */
    .hero-cta {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    .service-card,
    .benefit-card {
        padding: 20px 16px;
    }
}

/* ========================================
   5. TOUCH FEEDBACK & ACTIVE STATES
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Entferne Hover-Effekte auf Touch-Geräten */
    .btn:hover,
    .service-card:hover,
    .case-study-card:hover,
    .benefit-card:hover {
        transform: none;
    }
    
    /* Active States statt Hover */
    .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
    
    .service-card:active,
    .case-study-card:active,
    .benefit-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Link Active State */
    a:active {
        opacity: 0.7;
    }
    
    /* Schnellere Transitions für Touch */
    .btn,
    .service-card,
    a {
        transition-duration: 0.15s;
    }
}

/* Tap Highlight entfernen (Custom Active States nutzen) */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Custom Tap Highlight für wichtige Elemente */
    .btn,
    .nav-link,
    .service-card,
    a {
        -webkit-tap-highlight-color: rgba(13, 79, 110, 0.1);
    }
}

/* ========================================
   6. MOBILE PERFORMANCE OPTIMIERUNGEN
   ======================================== */

@media (max-width: 768px) {
    /* Hardware-Beschleunigung für Animationen */
    .service-card,
    .benefit-card,
    .nav-menu,
    .btn {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Reduzierte Schatten für Performance */
    .service-card,
    .benefit-card,
    .case-study-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .service-card:active,
    .benefit-card:active {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Einfachere Gradients */
    .hero {
        background: linear-gradient(180deg, #003d5c 0%, #0d5f7a 100%);
    }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .fade-in {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   7. MOBILE FORMULARE
   ======================================== */

@media (max-width: 768px) {
    /* Kontaktformular */
    .contact-form {
        gap: 16px;
    }
    
    .form-group {
        margin-bottom: 0;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    /* Full-Width Inputs */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100%;
    }
    
    /* Textarea optimiert */
    textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Submit Button */
    .contact-form .btn {
        width: 100%;
        margin-top: 8px;
    }
    
    /* Newsletter Form */
    .newsletter-form {
        flex-direction: column;
        gap: 12px;
    }
    
    .newsletter-form input {
        width: 100%;
    }
    
    .newsletter-form .btn {
        width: 100%;
    }
}

/* ========================================
   8. MOBILE FOOTER
   ======================================== */

@media (max-width: 768px) {
    .footer {
        padding: 48px 0 32px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /* Footer Brand - linksbündig */
    .footer-brand {
        text-align: left;
        margin-bottom: 16px;
    }
    
    .footer-brand .logo {
        justify-content: flex-start;
    }
    
    .footer-brand p {
        max-width: 100%;
        text-align: left;
    }
    
    /* Footer Links - linksbündig, vertikal */
    .footer-links {
        text-align: left;
        display: block;
    }
    
    .footer-links h4 {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .footer-links a,
    .footer-links span {
        display: block !important;
        font-size: 0.85rem;
        margin-bottom: 10px;
        padding: 4px 0;
    }
    
    /* Newsletter - linksbündig */
    .footer-newsletter {
        text-align: left;
        margin-top: 8px;
    }
    
    .footer-newsletter h4 {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .footer-newsletter p {
        font-size: 0.85rem;
    }
    
    /* Social Links - linksbündig */
    .social-links {
        justify-content: flex-start;
    }
    
    /* Footer Bottom */
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: left;
        padding-top: 24px;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
    }
    
    .footer-legal {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-start;
    }
}

/* ========================================
   9. MOBILE CARDS & GRIDS
   ======================================== */

@media (max-width: 768px) {
    /* Service Cards */
    .services-grid {
        gap: 16px;
    }
    
    .service-card {
        display: flex;
        flex-direction: column;
    }
    
    .service-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }
    
    .service-icon svg {
        width: 28px;
        height: 28px;
    }
    
    /* Benefits Grid */
    .benefits-grid {
        gap: 16px;
    }
    
    /* Case Studies */
    .case-studies-grid {
        gap: 16px;
    }
    
    /* Stats Row */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-box {
        text-align: center;
    }
    
    .stat-box .stat-number {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ========================================
   10. MOBILE STICKY ELEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Sticky Navbar */
    .navbar {
        padding: 12px 0;
    }
    
    .navbar.scrolled {
        padding: 8px 0;
    }
    
    /* Sticky CTA Bar */
    .sticky-cta-bar {
        padding: 10px 16px;
        flex-direction: column;
        gap: 10px;
    }
    
    .sticky-cta-content {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .sticky-cta-text {
        font-size: 0.85rem;
        text-align: center;
    }
    
    .sticky-cta-button {
        width: 100%;
        justify-content: center;
    }
    
    .sticky-cta-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* ========================================
   11. MOBILE IMAGES & MEDIA
   ======================================== */

@media (max-width: 768px) {
    /* Responsive Images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Hero Visual */
    .hero-visual {
        margin-top: 40px;
    }
    
    /* Blog Card Images */
    .blog-card-image,
    .hero-blog-card-image {
        height: 200px;
    }
    
    /* Case Study Images */
    .case-study-card .card-image {
        height: 180px;
    }
}

/* ========================================
   12. MOBILE SCROLL OPTIMIERUNGEN
   ======================================== */

@media (max-width: 768px) {
    /* Smooth Scroll mit reduziertem Offset */
    html {
        scroll-padding-top: 80px;
    }
    
    /* Momentum Scrolling für iOS */
    .nav-menu,
    .scrollable-container {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Overscroll Verhalten */
    body {
        overscroll-behavior-y: none;
    }
}

/* ========================================
   13. BOTTOM NAVIGATION FÜR MOBILE (Optional)
   Kann aktiviert werden durch .enable-bottom-nav Klasse auf body
   ======================================== */

@media (max-width: 768px) {
    body.enable-bottom-nav {
        padding-bottom: 70px;
    }
    
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        background: white;
        border-top: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding: 8px 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: var(--gray-500);
        font-size: 0.7rem;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.2s ease;
        min-width: 64px;
    }
    
    .bottom-nav-item:active {
        background: var(--gray-100);
    }
    
    .bottom-nav-item.active {
        color: var(--primary-600);
    }
    
    .bottom-nav-item svg {
        width: 24px;
        height: 24px;
    }
    
    .bottom-nav-item span {
        font-weight: 500;
    }
}

/* ========================================
   14. SAFE AREA INSETS (Notch-Geräte)
   ======================================== */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .navbar {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
        
        .sticky-cta-bar {
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
        
        .mobile-bottom-nav {
            padding-bottom: max(8px, env(safe-area-inset-bottom));
            height: calc(70px + env(safe-area-inset-bottom));
        }
        
        .footer {
            padding-bottom: max(32px, env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   15. DARK MODE MOBILE OPTIMIERUNGEN
   ======================================== */

/* Dark Mode für Mobile deaktiviert - Website hat keinen Dark Mode
   Falls später ein Dark Mode implementiert wird, kann dieser Abschnitt aktiviert werden
*/

/* ========================================
   16. LANDSCAPE MODUS OPTIMIERUNGEN
   ======================================== */

@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 80px 0 40px;
    }
    
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .stat-box {
        flex: 1 1 30%;
    }
    
    .nav-menu {
        padding-top: 70px;
    }
}

/* ========================================
   17. PRINT STYLES FÜR MOBILE
   ======================================== */

@media print {
    .navbar,
    .sticky-cta-bar,
    .mobile-bottom-nav,
    .chatbot-container,
    .nav-toggle {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a {
        text-decoration: underline;
    }
    
    .hero {
        background: none !important;
        color: black !important;
    }
}