/* ===========================
   WEBAPP-MOBILE.CSS
   NUR für Webapp (Browser) - NICHT für APK!
   Letzte Änderung: 2026-01-19 21:20 CET
   =========================== */

/* Touch Targets */
@media (pointer: coarse) {
    button, a, input[type="button"], input[type="submit"],
    .nav-item, .nav-button, .shadow-card, .aspect-card,
    .choice-card, .modal-close, .lang-button, .password-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    .nav-button, .lang-button { padding: 12px 16px; }
    button, a, input { touch-action: manipulation; }
}

/* Mobile Basis */
@media (max-width: 768px) {
    html { 
        touch-action: manipulation; 
        -ms-touch-action: manipulation; 
        overflow-x: hidden !important;
    }
    body { 
        -webkit-text-size-adjust: 100%; 
        -ms-text-size-adjust: 100%; 
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .nav-item { padding: 8px; }
}

/* ===========================
   CONTENT ZENTRIERUNG
   =========================== */
@media (max-width: 1024px) {
    .main-content, main, #main-content {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===========================
   WEBAPP FOOTER - FIXIERT UNTEN
   =========================== */
@media (max-width: 768px) {
    .navigation {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: var(--nav-height) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        gap: 0 !important;
        border-top: 2px solid var(--neon-cyan) !important;
        z-index: 2147483647 !important;
        background: rgba(10, 10, 15, 0.99) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        transform: none !important;
        will-change: auto !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .nav-left {
        display: flex !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
    }

    .nav-left .app-logo { width: 22px !important; height: 22px !important; flex-shrink: 0 !important; }
    .nav-left .app-title { font-size: 0.8rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .nav-center { display: none !important; }
}

/* Language Switcher & Nav-Right */
@media (max-width: 768px) {
    .language-switcher {
        display: flex !important;
        gap: 2px !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 2px !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        flex-shrink: 0 !important;
        margin-left: 4px !important;
    }
    .lang-button {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
        min-height: 30px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
    }
    .nav-right {
        display: flex !important;
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
    }
    .auth-status { padding: 5px 8px !important; font-size: 0.7rem !important; border-radius: 8px !important; flex-shrink: 0 !important; margin-right: 3px !important; }
    #auth-status-text { display: none !important; }
    .auth-status .user-email { max-width: 50px !important; font-size: 0.65rem !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .login-btn { padding: 5px 10px !important; font-size: 0.7rem !important; }
}

/* Nav Buttons */
@media (max-width: 768px) {
    .nav-button {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .nav-button .nav-icon { font-size: 1.2rem !important; }
    .nav-button .nav-label { display: none !important; }
    .premium-badge { font-size: 0.55rem !important; padding: 2px 4px !important; }
    .footer { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; position: static !important; pointer-events: auto !important; padding: 1.5rem 1rem 110px 1rem !important; margin-top: 1rem !important; background: rgba(10, 10, 20, 0.9) !important; border-top: 1px solid rgba(0, 255, 255, 0.2) !important; text-align: center !important; }
}

/* ===========================
   SEHR SCHMALE SCREENS (Z Fold 3 zugeklappt ~360px)
   =========================== */
@media (max-width: 400px) {
    .nav-left {
        padding: 6px 4px !important;
        gap: 3px !important;
    }
    .nav-left .app-title { 
        display: none !important; 
    }
    .nav-left .app-logo { 
        width: 18px !important; 
        height: 18px !important; 
    }
    .nav-button {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 4px !important;
    }
    .nav-button .nav-icon { 
        font-size: 1rem !important; 
    }
    .language-switcher {
        margin-left: 2px !important;
        padding: 1px !important;
    }
    .lang-button {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        min-height: 26px !important;
        min-width: 28px !important;
    }
    .nav-right {
        padding: 5px 4px !important;
        gap: 3px !important;
    }
    .auth-status { 
        padding: 4px 6px !important; 
        font-size: 0.65rem !important; 
    }
    .login-btn { 
        padding: 4px 8px !important; 
        font-size: 0.65rem !important; 
    }
    
    /* Progress-Text umbrechen - RICHTIGE ID + Parent */
    .progress-section, .overall-progress {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .stats-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding: 10px 5px !important;
    }
    .progress-header {
        overflow: visible !important;
        width: 100% !important;
    }
    #progress-text {
        font-size: 0.65rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: block !important;
    }
    
    /* Difficulty Badge - RICHTIGE KLASSE */
    .difficulty-icon {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
        white-space: normal !important;
        max-width: 70px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    /* Option Buttons - RICHTIGE KLASSEN */
    .scenario-option {
        min-height: auto !important;
        padding: 10px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .option-text {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        display: block !important;
    }
    .option-content {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    /* Shadow Card Header */
    .shadow-header, .aspect-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .shadow-title, .aspect-title {
        font-size: 1.1rem !important;
        word-wrap: break-word !important;
    }
    
    /* Stats Grid - schmale Screens */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    .stat-card, .stat-item {
        padding: 8px 6px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .stat-card h4, .stat-label, .stat-card .label {
        font-size: 0.55rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.2 !important;
    }
    .stat-card .value, .stat-value {
        font-size: 0.9rem !important;
    }
    
    /* Stats Motivation Text */
    .stats-motivation {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px !important;
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    .stats-motivation span {
        display: inline !important;
        white-space: normal !important;
    }
}

/* Home Screen */
@media (max-width: 768px) {
    /* Abstand zum Footer damit nichts abgeschnitten wird */
    main, .main-content, #main-content {
        padding-bottom: 160px !important;
    }
    .hero-section { padding: 15px 10px; }
    .hero-title { font-size: 1.4rem; line-height: 1.3; }
    .hero-subtitle { font-size: 0.85rem; }
    .slider-container { height: auto; min-height: 280px; position: relative; overflow: visible; }
    .slide { padding: 15px 12px; min-height: 260px; }
    .slide-icon { font-size: 2rem; }
    .slide h3 { font-size: 0.95rem; }
    .slide p { font-size: 0.85rem; line-height: 1.5; white-space: normal; overflow: visible; }
    .slider-container p, .slide p { max-height: none; height: auto; overflow: visible; white-space: normal; text-overflow: clip; display: block; }
    .shadow-grid { grid-template-columns: 1fr; gap: 8px; padding: 6px; }
    .shadow-card { padding: 10px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .random-button { width: 100%; max-width: 240px; padding: 10px 18px; font-size: 0.9rem; }
}

/* Scenario & Aspects */
@media (max-width: 768px) {
    .scenario-container, .aspects-container { padding: 10px; }
    .option-button { min-height: 50px; padding: 10px; font-size: 0.85rem; }
    .action-buttons { flex-direction: column; gap: 6px; }
    .action-button { width: 100%; padding: 10px; }
    .reflection-textarea { min-height: 90px; font-size: 16px; padding: 8px; }
    .aspects-grid { grid-template-columns: 1fr; gap: 8px; }
    .aspect-card { padding: 10px; }
}

/* Modals - General (NOT auth/welcome - they have specific rules below) */
@media (max-width: 768px) {
    .modal-content, .upgrade-modal-content {
        width: 92% !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 85vh !important;
        margin: 10px auto !important;
        padding: 12px;
        border-radius: 10px;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    /* Welcome Modal - FULL HEIGHT overlay, scrollable */
    #welcome-modal, .welcome-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        align-items: flex-start !important;
        padding: 20px 0 100px 0 !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* Welcome Content - no height limit, let overlay scroll */
    .welcome-content {
        width: 92% !important;
        max-width: calc(100vw - 20px) !important;
        max-height: none !important;
        margin: 0 auto 40px auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    /* Modal Overlay scrollbar */
    .modal, .modal-overlay, #welcome-modal-overlay {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .welcome-modal p, .onboarding-modal p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    input[type="text"], input[type="email"], input[type="password"], textarea, select { font-size: 16px !important; }
}

/* Touch & Accessibility */
@media (hover: none) and (pointer: coarse) {
    .nav-button:hover, .shadow-card:hover { transform: none; }
    .nav-button:active, .shadow-card:active { transform: scale(0.96); opacity: 0.9; }
    * { -webkit-tap-highlight-color: rgba(0, 255, 255, 0.2); }
    .main-content { -webkit-overflow-scrolling: touch; }
    button, .nav-button { touch-action: manipulation; }
}

/* Landscape */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    :root { --nav-height: 45px; }
    .navigation { flex-direction: row !important; height: var(--nav-height) !important; padding: 3px 6px !important; }
    .nav-left, .nav-right { width: auto !important; border-bottom: none !important; padding: 3px !important; }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .shadow-grid, .aspects-grid { grid-template-columns: repeat(2, 1fr); }
    .navigation {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .nav-left, .nav-right {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print { .navigation, .footer { display: none !important; } }


/* Upgrade Modal */
@media (max-width: 768px) {
    .upgrade-modal-overlay {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
        padding: 20px 10px !important; align-items: flex-start !important; z-index: 100000 !important;
    }
    .upgrade-modal { margin: 0 auto 30px auto !important; max-height: none !important; width: 95% !important; padding: 20px !important; }
    .upgrade-modal h2 { font-size: 1.4rem !important; }
    .upgrade-price { font-size: 2rem !important; margin: 15px 0 !important; }
    .upgrade-features li { font-size: 0.95rem !important; padding: 8px 0 !important; }
    .trust-badges { gap: 8px !important; }
    .trust-badge { font-size: 0.8rem !important; padding: 8px !important; }
    .payment-icons { gap: 5px !important; }
    .payment-icon svg { width: 32px !important; height: 20px !important; }
    .upgrade-modal .upgrade-buy-button { font-size: 1.1rem !important; padding: 16px 30px !important; min-height: 54px !important; width: 100% !important; }
    .login-hint { font-size: 0.85rem !important; padding: 8px 12px !important; }
}

/* Auth Modal */
@media (max-width: 768px) {
    /* CRITICAL: Allow modal overlay to scroll on mobile */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    #auth-modal, .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        padding: 20px 0 100px 0 !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: flex-start !important;
        overscroll-behavior: contain !important;
    }
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content,
    .auth-modal-content {
        width: 92% !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto 40px auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
}

/* Legal Screen */
@media (max-width: 768px) {
    #legal-screen { padding-bottom: 80px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
    #legal-screen .legal-content { padding-bottom: 60px !important; }
}

/* Tablet/iPad Fix */
@media (min-width: 769px) and (max-width: 1024px) {
    .navigation { padding: 8px 12px !important; gap: 10px !important; }
    .nav-left { gap: 8px !important; }
    .nav-right { gap: 6px !important; }
    .app-title { font-size: 0.85rem !important; max-width: 140px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .app-logo { width: 32px !important; height: 32px !important; }
    #auth-status-text { display: none !important; }
    .auth-status { padding: 4px 8px !important; }
    .login-btn { padding: 6px 12px !important; font-size: 0.8rem !important; }
    .nav-button { padding: 6px 10px !important; font-size: 0.85rem !important; min-width: 44px !important; }
    .nav-button .nav-label { display: none !important; }
    .nav-icon { font-size: 1.1rem !important; }
    .language-switcher { gap: 2px !important; }
    .lang-button { padding: 6px 10px !important; font-size: 0.8rem !important; min-height: 36px !important; min-width: 36px !important; }
    .premium-badge { font-size: 0.65rem !important; padding: 3px 6px !important; }
    .auth-status .user-email { max-width: 80px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.75rem !important; }
}

/* Video Dropdown */
@media (max-width: 768px) {
    .video-dropdown-menu {
        top: auto !important; bottom: 100% !important; margin-top: 0 !important; margin-bottom: 8px !important;
        z-index: 100000 !important; left: 50% !important; transform: translateX(-50%) translateY(-5px) !important;
    }
    .video-dropdown.open .video-dropdown-menu { transform: translateX(-50%) translateY(0) !important; }
}

/* iOS Safari Video Fix */
#video-player { -webkit-playsinline: true; touch-action: manipulation; position: relative !important; z-index: 10 !important; pointer-events: auto !important; }
.video-modal { -webkit-overflow-scrolling: touch; }
.video-modal-content { pointer-events: auto !important; }

@media (max-width: 768px) {
    .video-modal-close { top: -45px !important; right: 0 !important; z-index: 20 !important; }
    .video-modal-content { margin-top: 50px !important; }
}