/* Mobile Vollbreite Fix - Einfach am Ende der styles.css einfügen */

/* Force full width on mobile devices */
@media (max-width: 768px) {
    /* Reset all max-width restrictions */
    * {
        max-width: none !important;
    }
    
    /* Ensure full width for all containers */
    .container,
    .navbar,
    .hero,
    .hero-content,
    .clarity-headline,
    .clarity-text,
    .ei-block,
    .section-headline,
    .programm-list,
    .faq-section,
    .blog-section,
    .team-member,
    .retreat-impressions,
    .retreat-details,
    .signup-form,
    .blog-form,
    .blog-posts,
    .privacy-content,
    .privacy-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Navigation fixes */
    .navbar {
        padding: 1rem 0.5rem !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Hero section fixes */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
    }
    
    .hero {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Text elements - Schriftgrößen angepasst für bessere Lesbarkeit */
    .hero-content h1,
    .hero-content p,
    .section-headline {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
    }
    
    /* Texte unter Hauptüberschriften - zentriert */
    .ei-sub,
    .clarity-text {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Zeilenumbruch für Charles Berner nur auf mobilen Geräten */
    .ei-sub {
        white-space: pre-line;
    }
    
    /* Programm-Beschreibungen - linksbündig */
    .programm-desc {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Überschriften größer und deutlicher */
    .clarity-headline {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.8rem, 7vw, 4.5rem) !important;
        font-weight: 700 !important;
    }
    
    .ei-title {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.8rem, 7vw, 4.5rem) !important;
        font-weight: 700 !important;
    }
    
    /* Enlightenment Intensive Überschrift - in einer Zeile halten */
    .ei-title-text {
        white-space: nowrap !important;
    }
    
    /* Inhalt und Tagesstruktur Überschriften - gleicher Stil wie Das Retreat */
    .content-headline,
    .schedule-headline {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(2rem, 6vw, 4rem) !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: #44484a !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        max-width: 90vw !important;
        margin: 3.8cm auto calc(2rem + 1cm) auto !important;
    }
    
    .hero-content h1 {
        font-size: clamp(2.6rem, 12vw, 9.4rem) !important;
    }
    
    .hero-content p {
        font-size: clamp(1.2rem, 5vw, 2.4rem) !important;
    }
    
    /* Allgemeine Textgrößen für bessere Lesbarkeit */
    .programm-title {
        font-size: 1.8rem !important;
    }
    
    
    .faq-question {
        font-size: 1.4rem !important;
    }
    
    .faq-answer {
        font-size: 1.4rem !important;
    }
    
    .blog-title {
        font-size: 1.4rem !important;
    }
    
    .blog-teaser {
        font-size: 1.1rem !important;
    }
    
    .blog-content {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    .blog-content-full p {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    .team-member-info h2 {
        font-size: 2.2rem !important;
    }
    
    .team-member-info p {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    .retreat-price {
        font-size: 3.2rem !important;
    }
    
    .price-includes {
        font-size: 1.8rem !important;
    }
    
    .included-list li {
        font-size: 1.2rem !important;
    }
    
    .important-note-headline {
        font-size: 2.3rem !important;
    }
    
    .waiver-text {
        font-size: 1.4rem !important;
    }
    
    .waiver-list li {
        font-size: 1.4rem !important;
    }
    
    .signup-headline {
        font-size: 2rem !important;
    }
    
    .signup-text {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.4rem, 6vw, 3.8rem) !important;
        line-height: 1.4 !important;
    }
    
    .form-group label {
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
        padding: 0.8rem !important;
        border-radius: 8px !important;
        border: 2px solid #ddd !important;
        background: #f9f9f9 !important;
    }
    
    /* Formulare auf Anmeldeseite - etwas kleiner als Team/Wissenswertes */
    .signup-form,
    .contact-form {
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 1.5rem !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    .signup-form .form-group label,
    .contact-form .form-group label {
        font-size: clamp(1rem, 4.5vw, 2.8rem) !important;
    }
    
    .signup-form .form-group input,
    .signup-form .form-group textarea,
    .contact-form .form-group input,
    .contact-form .form-group textarea {
        font-size: clamp(1rem, 4.5vw, 2.8rem) !important;
        padding: 0.6rem !important;
    }
    
    .submit-btn,
    .submit-button {
        font-size: 1rem !important;
    }
    
    .blog-readmore-btn {
        font-size: 1rem !important;
    }
    
    .read-more-btn {
        font-size: 0.9rem !important;
    }
    
    .blog-author {
        font-size: 0.9rem !important;
    }
    
    .blog-date {
        font-size: 0.95rem !important;
    }
    
    .carousel-counter {
        font-size: 1.1rem !important;
    }
    
    
    .detail-item h3 {
        font-size: 1.6rem !important;
    }
    
    .detail-item p {
        font-size: 1.4rem !important;
    }
    
    .detail-item a {
        font-size: 1.4rem !important;
    }
    
    .privacy-section h2 {
        font-size: 1.6rem !important;
    }
    
    .privacy-section h3 {
        font-size: 1.3rem !important;
    }
    
    .privacy-section p {
        font-size: 1rem !important;
    }
    
    .privacy-section li {
        font-size: 1rem !important;
    }
    
    .modal-content h2 {
        font-size: 1.8rem !important;
    }
    
    .modal-content p {
        font-size: 1.4rem !important;
    }
    
    .photo-upload-text {
        font-size: 1.4rem !important;
    }
    
    .tooltip .tooltiptext {
        font-size: 1rem !important;
    }
    
    .footer-section h4 {
        font-size: 1.1rem !important;
    }
    
    .footer-section a {
        font-size: 0.9rem !important;
    }
    
    .footer-bottom p {
        font-size: 0.9rem !important;
    }
    
    .cookie-banner-text h3 {
        font-size: 1.3rem !important;
    }
    
    .cookie-banner-text p {
        font-size: 0.9rem !important;
    }
    
    .cookie-btn {
        font-size: 0.9rem !important;
    }
    
    .cookie-category-title {
        font-size: 1rem !important;
    }
    
    .cookie-category-description {
        font-size: 0.9rem !important;
    }
    
    .cookie-settings-btn {
        font-size: 0.9rem !important;
    }
    
    /* Mandala-Symbol in der mobilen Version - doppelt so groß */
    .mandala-svg img,
    .mandala-logo {
        max-width: 160px !important;
    }
    
    /* Text-Overlay in das obere Drittel verschieben für mobile Version */
    .image-overlay.text-overlay .text-content {
        position: absolute !important;
        top: 10% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 500px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Extra small mobile - Schriftgrößen angepasst */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: clamp(2.2rem, 10vw, 7.4rem) !important;
    }
    
    .hero-content p {
        font-size: clamp(1.1rem, 4vw, 1.8rem) !important;
    }
    
    .programm-title {
        font-size: 1.5rem !important;
    }
    
    
    .footer-section a {
        font-size: 0.8rem !important;
    }
    
    .privacy-hero h1 {
        font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    }
    
    .privacy-hero p {
        font-size: clamp(0.9rem, 4vw, 1.4rem) !important;
    }
    
    
    /* Texte unter Hauptüberschriften für sehr kleine Bildschirme - zentriert */
    .ei-sub,
    .clarity-text {
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Programm-Beschreibungen für sehr kleine Bildschirme - linksbündig */
    .programm-desc {
        text-align: left !important;
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Blog-Content für sehr kleine Bildschirme - gleicher Stil wie Programm-Beschreibungen */
    .blog-content,
    .blog-content-full p {
        text-align: left !important;
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Team-Mitglieder Beschreibungen für sehr kleine Bildschirme - gleicher Stil wie Programm-Beschreibungen */
    .team-member-info p {
        text-align: left !important;
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Anmeldeseite Text für sehr kleine Bildschirme - gleicher Stil wie andere Texte */
    .signup-text {
        text-align: left !important;
        font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Formulare für sehr kleine Bildschirme */
    .form-group label {
        font-size: clamp(1rem, 4vw, 2.8rem) !important;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: clamp(1rem, 4vw, 2.8rem) !important;
        padding: 0.6rem !important;
    }
    
    /* Formulare auf Anmeldeseite für sehr kleine Bildschirme - noch kleiner */
    .signup-form,
    .contact-form {
        max-width: 95% !important;
        padding: 1rem !important;
    }
    
    .signup-form .form-group label,
    .contact-form .form-group label {
        font-size: clamp(0.9rem, 3.5vw, 2.4rem) !important;
    }
    
    .signup-form .form-group input,
    .signup-form .form-group textarea,
    .contact-form .form-group input,
    .contact-form .form-group textarea {
        font-size: clamp(0.9rem, 3.5vw, 2.4rem) !important;
        padding: 0.5rem !important;
    }
    
    /* Überschriften für sehr kleine Bildschirme */
    .clarity-headline {
        font-size: clamp(1.6rem, 6vw, 4rem) !important;
        font-weight: 700 !important;
    }
    
    .ei-title {
        font-size: clamp(1.6rem, 6vw, 4rem) !important;
        font-weight: 700 !important;
    }
    
    /* Enlightenment Intensive Überschrift für sehr kleine Bildschirme - in einer Zeile halten */
    .ei-title-text {
        white-space: nowrap !important;
    }
    
    /* Inhalt und Tagesstruktur für sehr kleine Bildschirme - gleicher Stil wie Das Retreat */
    .content-headline,
    .schedule-headline {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: #44484a !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        max-width: 90vw !important;
        margin: 2.5cm auto calc(1.5rem + 0.5cm) auto !important;
    }
    
    /* Mandala-Symbol für sehr kleine Bildschirme - doppelt so groß */
    .mandala-svg img,
    .mandala-logo {
        max-width: 120px !important;
    }
}