/*
 * WELCOME TO RUSSIA - MOBILE FIX PATCH
 * =====================================
 * Fixes für die mobile Darstellung von de.html
 * Einfach NACH styles_v4_1.css einbinden:
 * <link rel="stylesheet" href="css/mobile-fixes.css">
 *
 * Gefundene Probleme:
 * 1. .grid-2 minmax(400px) → Overflow auf kleinen Screens
 * 2. .card Padding (3rem) zu groß auf Mobile
 * 3. Hero-Video/Background braucht mobile Anpassung
 * 4. Footer-Grid hat nur 3 Spalten, HTML hat 5 Bereiche
 * 5. Buttons zu breit auf Mobile
 * 6. Stats-Zahlen zu groß
 * 7. Blockquote/Zitat-Sektion nicht mobil-optimiert
 * 8. Fehlende Touch-Targets für Links
 */


/* ============================================
   FIX 1: GRID OVERFLOW-SCHUTZ
   Das Grid-2 mit minmax(400px) erzwingt 400px
   Mindestbreite → horizontaler Scroll auf Handys!
   ============================================ */

/* ============================================
   MOBILE CAROUSEL / SCROLL-SNAP FÜR KARTEN
   ============================================ */

@media (max-width: 768px) {
    .grid-3,
    .grid-2 {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0 1rem 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
    }
    
    .grid-3::-webkit-scrollbar,
    .grid-2::-webkit-scrollbar {
        display: none;
    }
    
    .grid-3 > *,
    .grid-2 > * {
        flex: 0 0 85%;
        scroll-snap-align: center;
        min-width: 280px;
    }
    
    /* ============================================
       2026 SMART CAROUSEL INDICATORS
       ============================================ */
    
    /* Dynamischer Scroll-Progress Balken */
    .grid-3::after,
    .grid-2::after {
        content: '';
        position: absolute;
        bottom: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 64px;
        height: 3px;
        background: rgba(0,0,0,0.1);
        border-radius: 3px;
        overflow: hidden;
    }
    
    /* Progress-Füllung mit CSS Scroll-Timeline (Chrome/Edge 2026) */
    @supports (animation-timeline: scroll()) {
        .grid-3::after,
        .grid-2::after {
            background: rgba(0,0,0,0.1);
        }
        
        .grid-3,
        .grid-2 {
            timeline-scope: --carousel;
        }
        
        .grid-3::before,
        .grid-2::before {
            content: '';
            position: absolute;
            bottom: 0.75rem;
            left: 50%;
            transform: translateX(-50%);
            width: 0%;
            height: 3px;
            background: var(--color-gold, #c9a227);
            border-radius: 3px;
            z-index: 3;
            animation: carousel-progress linear;
            animation-timeline: --carousel;
        }
        
        @keyframes carousel-progress {
            to { width: 64px; }
        }
    }
    
    /* Fallback: Animated Gradient für alle Browser */
    @supports not (animation-timeline: scroll()) {
        .grid-3::after,
        .grid-2::after {
            background: linear-gradient(90deg, 
                var(--color-gold, #c9a227) 0%, 
                var(--color-gold, #c9a227) 33%, 
                rgba(0,0,0,0.1) 33%, 
                rgba(0,0,0,0.1) 100%
            );
            background-size: 300% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0%, 100% { background-position: 100% 0; }
            50% { background-position: 0 0; }
        }
    }
    
    /* Fade-Effekt + Glow am rechten Rand */
    .grid-3,
    .grid-2 {
        mask-image: linear-gradient(to right, 
            black calc(100% - 60px), 
            transparent calc(100% - 20px)
        );
        -webkit-mask-image: linear-gradient(to right, 
            black calc(100% - 60px), 
            transparent calc(100% - 20px)
        );
    }
    
    /* Touch-Glow Effekt beim Interagieren */
    .grid-3:active,
    .grid-2:active {
        cursor: grabbing;
    }
    
    /* Swipe-Hinweis: Automatisch ausblenden nach Interaktion */
    .grid-3,
    .grid-2 {
        scroll-behavior: smooth;
    }
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}


/* ============================================
   FIX 2: CARD PADDING AUF MOBILE REDUZIEREN
   --space-12 = 3rem ist auf einem 375px Screen
   viel zu viel → Inhalt wird gequetscht
   ============================================ */

@media (max-width: 768px) {
    .card {
        padding: 1.5rem;
    }

    .card-lg {
        padding: 2rem;
    }

    .card-sm {
        padding: 1rem;
    }

    .card-featured {
        padding: 1.5rem;
    }

    .card-dark {
        padding: 1.5rem;
    }

    .card-media {
        margin: -1.5rem -1.5rem 1rem -1.5rem;
        height: 180px;
    }

    .card-magazine-content {
        padding: 1.25rem;
    }
}


/* ============================================
   FIX 3: HERO SEKTION - MOBILE OPTIMIERUNG
   100vh + margin-top:80px = zu hoch auf Mobile.
   Video-Background braucht eigene Mobile-Regeln.
   ============================================ */

@media (max-width: 768px) {
    .hero {
        min-height: calc(100vh - 60px);
        min-height: calc(100svh - 60px);
        /* Safe viewport für iOS Safari */
        padding: 5rem 1.25rem 3rem;
        margin-top: 60px;
    }

    .hero h1 {
        font-size: 2rem;
        line-height: 1.15;
        margin-bottom: 1.25rem;
    }

    .hero .text-lead {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-content {
        padding: 0 0.5rem;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 1.75rem;
    }
}

/* Hero Video-Container (falls <video> im Hero) */
.hero video,
.hero iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================
   FIX 4: NAVIGATION - MOBILE FEINSCHLIFF
   Nav-Bar-Höhe auf Mobile reduzieren,
   damit mehr Platz für Content bleibt.
   ============================================ */

@media (max-width: 768px) {
    .nav-inner {
        height: 60px;
    }

    .nav-logo {
        font-size: 1.15rem;
    }

    .nav-logo span {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .nav-mobile {
        padding-top: 5rem;
    }
}


/* ============================================
   FIX 5: FOOTER - KORREKTES MOBILE LAYOUT
   HTML hat 5 Bereiche (Logo+Beschreibung,
   Dienste, Themen, Organisation, Quellen)
   aber footer-grid definiert nur 3 Spalten.
   ============================================ */

@media (min-width: 769px) {
    .footer-grid {
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-logo {
        font-size: 1.75rem;
    }

    .footer {
        padding: 3rem 0 2rem;
    }

    .footer h4 {
        margin-bottom: 0.75rem;
    }

    .footer ul {
        line-height: 2.2;
        /* Größere Touch-Targets */
    }
}

/* Tablet: 2-Spalten-Footer */
@media (min-width: 481px) and (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    /* Logo-Bereich über volle Breite */
    .footer-grid>*:first-child {
        grid-column: 1 / -1;
        text-align: center;
    }
}


/* ============================================
   FIX 6: BUTTONS - MOBILE GRÖSSEN
   Padding var(--space-12) = 3rem horizontal
   ist auf Mobile viel zu breit.
   ============================================ */

@media (max-width: 768px) {
    .btn {
        padding: 0.85rem 1.75rem;
        font-size: 0.9rem;
    }

    .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .btn-sm {
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
    }

    /* Button-Gruppen untereinander */
    .btn-group,
    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group .btn {
        width: 100%;
        text-align: center;
    }
}


/* ============================================
   FIX 7: STATS BAR - MOBILE ANPASSUNG
   --text-5xl = 3rem/2.5rem für Zahlen
   → zu groß auf kleinen Screens
   ============================================ */

@media (max-width: 768px) {
    .stats-bar {
        padding: 2rem 0;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .stat-number {
        font-size: 1.75rem;
    }
}


/* ============================================
   FIX 8: TYPOGRAPHY - MOBILE SCHRIFTGRÖSSEN
   Zusätzlich zu den :root Overrides in v4.1
   ============================================ */

@media (max-width: 480px) {
    :root {
        --text-6xl: 2.25rem;
        --text-5xl: 2rem;
        --text-4xl: 1.65rem;
        --text-3xl: 1.4rem;
        --text-2xl: 1.2rem;
    }

    h2 {
        margin-bottom: 0.75rem;
    }

    .section-subtitle {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }
}


/* ============================================
   FIX 9: BLOCKQUOTE / ZITAT-SEKTION
   Maria Butina Bild + Zitat nebeneinander
   → muss auf Mobile gestackt werden
   ============================================ */

@media (max-width: 768px) {
    blockquote {
        font-size: 1.05rem;
        padding-left: 1rem;
        margin: 1.5rem 0;
    }

    /* Falls das Zitat-Layout als Grid/Flex gebaut ist */
    .quote-section,
    .testimonial,
    [class*="quote"] {
        flex-direction: column !important;
        text-align: center;
    }

    .quote-section img,
    .testimonial img,
    [class*="quote"] img {
        width: 120px;
        height: 120px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        object-fit: cover;
    }
}


/* ============================================
   FIX 10: SECTION SPACING - MOBILE
   --space-24 = 6rem (reduziert auf 4rem)
   ist immer noch zu viel zwischen Sektionen
   auf kleinen Screens.
   ============================================ */

@media (max-width: 480px) {
    .section {
        padding: 2.5rem 0;
    }

    :root {
        --space-24: 2.5rem;
        --space-32: 3.5rem;
        --space-16: 2.5rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ============================================
   FIX 11: BILDER RESPONSIVE ABSICHERUNG
   Verhindert horizontalen Overflow
   ============================================ */

img {
    max-width: 100%;
    height: auto;
}


/* ============================================
   FIX 12: TOUCH-TARGETS & ACCESSIBILITY
   Mindestens 44x44px für interaktive Elemente
   (Apple HIG & WCAG Empfehlung)
   ============================================ */

@media (max-width: 768px) {

    .nav-link,
    .footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .nav-lang a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Sprach-Flaggen größer */
    .nav-lang img {
        width: 24px;
        height: auto;
    }
}


/* ============================================
   FIX 13: MISSION KARTEN (I. II. III. IV.)
   Falls diese als .grid-4 gelayoutet sind
   ============================================ */

@media (max-width: 768px) {

    .grid-4 .card,
    .grid-4 .card-dark {
        padding: 1.5rem;
    }

    .card-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
}


/* ============================================
   FIX 14: HORIZONTALER OVERFLOW KILLER
   Letzter Sicherheitsnetz gegen
   horizontales Scrollen
   ============================================ */

html,
body {
    overflow-x: hidden;
}

/* Prevent overflow from positioned elements */
.hero,
.section,
.footer {
    overflow-x: hidden;
}


/* ============================================
   FIX 15: SEKTION "WEGE NACH RUSSLAND"
   Die 3 verlinkten Karten brauchen
   auf Mobile volle Breite
   ============================================ */

@media (max-width: 768px) {

    .card a,
    a.card,
    a.card-featured {
        display: block;
    }

    .card h3 {
        font-size: 1.25rem;
    }

    .card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}


/* ============================================
   FIX 16: iOS SAFARI SPEZIAL-FIXES
   ============================================ */

/* Fix für iOS Safari 100vh Bug */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
}

/* Fix für Sticky-Hover-States auf Touch */
@media (hover: none) and (pointer: coarse) {
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-card);
    }

    .card-featured:hover {
        box-shadow: var(--shadow-card);
        transform: none;
    }

    .card-dark:hover {
        transform: none;
    }

    .btn:hover::before {
        display: none;
    }

    .btn-primary:hover {
        transform: none;
    }
}


/* ============================================
   FIX 17: SAFE OVERFLOW HARDENING (AUTO-ADDED)
   Prevent common horizontal scroll triggers
   ============================================ */

@media (max-width: 768px) {

    .container,
    .nav,
    .nav-inner,
    .hero,
    .hero-content,
    .section,
    .footer,
    .footer-grid {
        max-width: 100%;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    iframe,
    video,
    svg {
        max-width: 100%;
    }

    [style*="100vw"] {
        width: 100% !important;
    }
}


/* ============================================
   FIX 18: iOS SAFARI SPECIFIC FIXES
   Fix invisible buttons and image display
   ============================================ */

/* iOS Safari: Fix invisible .btn-secondary on de/gemeinsame-werte.html */
@supports (-webkit-touch-callout: none) {

    .btn-secondary,
    .btn-outline,
    .btn-ghost {
        color: var(--color-charcoal) !important;
        -webkit-text-fill-color: currentColor;
        opacity: 1 !important;
        background-color: transparent !important;
        border: 2px solid var(--color-gold) !important;
    }

    .btn-secondary::before,
    .btn-outline::before,
    .btn-ghost::before {
        opacity: 0 !important;
        display: none !important;
    }

    .btn-secondary span,
    .btn-outline span,
    .btn-ghost span {
        position: relative;
        z-index: 2;
        color: inherit !important;
    }

    /* Ensure primary button remains unaffected */
    .btn-primary {
        background-color: var(--color-gold) !important;
        color: var(--color-charcoal) !important;
        border-color: var(--color-gold) !important;
    }

    /* iOS Safari: Fix --hero-image CSS variable not rendering 
       iOS Safari has issues with background-image via CSS custom properties */
    .hero[style*="--hero-image"] {
        background-image: var(--hero-image) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Ensure WebP images load on iOS Safari by forcing background properties */
    section[style*="--hero-image"] {
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}


/* ============================================
   FIX 19: iOS KB-SLIDER INTERACTION FIXES
   Ensure dots/arrows are clickable and track works
   ============================================ */
@supports (-webkit-touch-callout: none) {
    .kb-slider {
        position: relative;
    }

    .kb-track {
        display: flex;
        will-change: transform;
        transform: translateZ(0);
    }

    .kb-slide {
        flex: 0 0 100%;
    }

    .kb-dots {
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }

    .kb-dots button,
    .kb-dots .kb-dot,
    .kb-prev,
    .kb-next {
        pointer-events: auto;
    }

    .kb-prev,
    .kb-next {
        z-index: 6;
    }
}

/* ============================================
   CAROUSEL DOT PAGINATION - 2026
   ============================================ */

/* Carousel Dots - nur auf Mobile sichtbar */
.carousel-dots {
    display: none;
}

@media (max-width: 768px) {
    .carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: all 0.25s ease;
        padding: 0;
        flex-shrink: 0;
        min-width: 8px;
        min-height: 8px;
    }
    
    .carousel-dot.active {
        width: 20px;
        height: 8px;
        background: var(--color-gold, #c9a227);
        border-radius: 4px;
        min-width: 20px;
    }
    
    .carousel-dot:focus-visible {
        outline: 2px solid var(--color-gold, #c9a227);
        outline-offset: 3px;
    }
    
    /* Verstecke alte Indikatoren wenn Dots vorhanden */
    .grid-3:has(+ .carousel-dots)::after,
    .grid-2:has(+ .carousel-dots)::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-dot {
        transition: none;
    }
}