/* ==================================================== */
/*      MOBILE RESPONSIVE FIXES - VILLA ZINA           */
/* ==================================================== */

/* Grundlegende Verhinderung von horizontalem Scrollen */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Alle Elemente auf max-width begrenzen */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Bilder und Medien responsive machen */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container und Grid-Systeme sicherstellen */
.container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    overflow: hidden;
}

/* Überschreibe feste Breiten aus style.css */
.container {
    max-width: 100% !important;
}

.feature-description {
    max-width: 100% !important;
}

.contact-form {
    max-width: 700px !important;
}

.faq-container {
    max-width: 100% !important;
}

.modal-content {
    max-width: 95% !important;
    width: 95% !important;
}

/* Slider und Header-Bereiche */
.slider-main,
.slide,
.slide-content-container {
    max-width: 100vw;
    overflow: hidden;
}

/* Galerie-Grid responsive */
.impressions-grid {
    max-width: 100%;
    padding: 0 15px;
}

/* Lightbox responsive */
.lightbox {
    max-width: 100vw;
    max-height: 100vh;
}

.lightbox-content {
    max-width: 100%;
    padding: 20px;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
}

/* Formulare responsive */
.contact-form {
    max-width: 700px;
    padding: 20px;
    margin: 20px auto;
}

.form-group input,
.form-group textarea,
.form-group select {
    max-width: 100%;
    width: 100%;
}

/* Navigation responsive */
header {
    max-width: 100vw;
    overflow: hidden;
}

.desktop-nav,
.mobile-nav {
    max-width: 100%;
}

/* Footer responsive */
footer {
    max-width: 100%;
    padding: 20px;
}

/* Preis-Karten responsive */
.price-grid {
    max-width: 100%;
    padding: 0 15px;
}

.price-card {
    max-width: 100%;
}

/* Features-Grid responsive */
.features-grid {
    max-width: 100%;
    padding: 0 15px;
}

/* FAQ-Container responsive */
.faq-container {
    max-width: 100%;
    padding: 0 20px;
}

/* Modal responsive */
.modal-content {
    max-width: 95%;
    margin: 20px;
    padding: 20px;
}

/* Cookie-Banner responsive */
#cookie-banner {
    max-width: 100%;
    padding: 15px;
}

/* Scroll-Arrows responsive */
.scroll-arrow {
    max-width: 50px;
    max-height: 50px;
}

/* Hamburger-Menu responsive */
.hamburger-menu {
    max-width: 50px;
    max-height: 50px;
}

/* Mobile Navigation responsive */
.mobile-nav {
    max-width: 100vw;
    max-height: 100vh;
}

.mobile-nav-content {
    max-width: 100%;
    padding: 20px;
}

/* Spezielle Fixes für sehr kleine Bildschirme */
@media (max-width: 375px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .contact-form {
        max-width: 95%;
        padding: 15px;
    }
    
    .modal-content {
        margin: 10px;
        padding: 15px;
    }
    
    .lightbox-content {
        padding: 15px;
    }
}

/* Fixes für Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .contact-form {
        max-width: 700px;
    }
}

/* Landscape-Modus Fixes */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-nav {
        max-height: 100vh;
    }
    
    .lightbox-img {
        max-height: 70vh;
    }
}

/* Spezielle Fixes für iOS Safari */
@supports (-webkit-touch-callout: none) {
    html, body {
        -webkit-overflow-scrolling: touch;
    }
    
    .slider-main,
    .slide {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Fixes für Android Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html, body {
        -webkit-text-size-adjust: 100%;
    }
}

/* Verhindere horizontales Scrollen bei Touch-Gesten */
@media (pointer: coarse) {
    html, body {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    
    .slider-main,
    .slide {
        touch-action: pan-y;
    }
}

/* Fixes für sehr große Bildschirme */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

/* Debug-Modus für Entwicklung (kann entfernt werden) */
.debug-horizontal-scroll * {
    outline: 1px solid red;
}

/* Zusätzliche Sicherheitsmaßnahmen */
section {
    max-width: 100%;
    overflow: hidden;
}

main {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fixes für eingebettete Inhalte */
iframe[src*="google.com/maps"],
iframe[src*="maps.google.com"] {
    max-width: 100%;
    width: 100%;
}

/* Fixes für externe Videos */
video {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Fixes für SVG-Grafiken */
svg {
    max-width: 100%;
    height: auto;
}

/* Fixes für Canvas-Elemente */
canvas {
    max-width: 100%;
    height: auto;
}