/* ================================================= */
/* MOBILE FIXES (Wird nur auf Geräten < 992px geladen) */
/* ================================================= */

/* 1. NAVBAR & LOGO FIX (Weiß-in-Weiß Fehler) */
@media (max-width: 992px) {
    /* Logo Grösse korrigieren */
    .navbar-brand img {
        height: 70px !important; /* Verkleinern, um Platz zu sparen */
    }

    /* Navbar IMMER weiss f «ür die mobile Sidebar */
    .navbar.fixed-top,
    .navbar.scrolled,
    body:not(.home) .navbar.fixed-top {
        background-color: var(--sos-white) !important;
    }
    
    /* Nav-Links IMMER dunkel machen f «ür die Lesbarkeit */
    .navbar-dark .navbar-nav .nav-link {
        color: var(--sos-text-dark) !important;
        border-bottom: 1px solid #eee;
    }
    .navbar-dark .navbar-nav .nav-link:hover {
         color: var(--sos-red) !important;
    }
    .navbar-toggler-icon {
        /* Burger-Icon dunkel machen */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }

    /* Fix f «ür Breadcrumbs-Padding auf Nicht-Home Seiten */
    body:not(.home) .wrap > .container {
        padding-top: 20px !important; /* Etwas weniger Padding auf Mobile */
    }

    /* Hero Headline Gr «össe anpassen */
    .hero-main-headline {
        font-size: 2.2rem !important;
    }
    .hero-subline {
         font-size: 1.2rem !important;
         white-space: normal !important; /* Zeilenumbruch erlauben */
         overflow: visible !important;
    }
}


/* 2. REAL LIFE CASES FIX (Stapel auf Mobilgeräten) */
@media (max-width: 992px) {
    /* Alle Cases stapeln und den Reverse-Befehl ignorieren */
    .use-cases-story-grid-elegant { 
        grid-template-columns: 1fr; 
        gap: 2rem; 
    }
    .story-item-elegant,
    .story-item-elegant.reverse-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "content"; /* Immer Bild oben, Text unten */
        text-align: center;
    }
    .story-content-elegant { text-align: center; }
}


/* 3. TESTIMONIALS FIX (Feste H «öhe und Textbeschr «änkung) */
@media (max-width: 768px) {
    .testimonial-card-elegant {
        height: 320px !important; /* Konsistente H «öhe f «ür Slider-Effekt */
        min-width: 90vw; /* Fast volle Breite, damit es scrollt */
    }
    .testimonial-card-elegant p {
        -webkit-line-clamp: 6 !important; /* Text k «ürzen, um «Überlauf zu vermeiden */
        overflow: hidden !important;
    }
}