/* =========================================================================
   LERN8 – Mobile Sections Fix
   -------------------------------------------------------------------------
   Ziel: Auf Mobilgeräten sitzt der blaue Inhaltsbereich jeder Sektion IMMER
   sauber am unteren Rand des sichtbaren Bereichs. Die Boxen werden als
   horizontaler Swipe-Slider (CSS Scroll-Snap) mit Pager-Punkten dargestellt.

   Wirkt ausschließlich bis 767px Breite und nur unter .is-mobile, damit
   Desktop/Tablet-Layout unberührt bleibt.

   Diese Datei wird NACH style.css geladen und überschreibt gezielt die
   widersprüchlichen Alt-Regeln.
   ========================================================================= */

@media (max-width: 767px) {

    /* ---- 1. Sektion = vollflächige Bühne, Inhalt unten verankert -------- */

    .is-mobile .section.panel {
        min-height: 100vh;
        /* dynamische Viewport-Höhe für mobile Browser-Leisten (iOS Safari) */
        min-height: 100svh;
        position: relative;
        overflow: hidden;
    }

    /* Der Bild-Container wird zur Flex-Spalte: Bild oben, blauer Block unten */
    .is-mobile .section.panel .section-image-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;   /* schiebt den Inhalt nach unten */
        min-height: 100vh;
        min-height: 100svh;
        height: auto;
        padding: 0;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    /* Bootstrap .container Reset im mobilen Kontext */
    .is-mobile .section.panel .section-image-container > .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 100vh;
        min-height: 100svh;
        justify-content: flex-end;   /* alles nach unten drücken */
    }

    /* ---- 2. Der blaue Block (Headline + Boxen) -------------------------- */

    .is-mobile .section.panel .section-headline-wrapper,
    .is-mobile .section.panel .posts-wrapper.pwrap-mobile {
        background-color: rgba(0, 72, 138, 0.82); /* Lern8-Blau, leicht transparent */
        margin: 0;
        width: 100%;
    }

    /* Headline-Block: oberer Rand des blauen Bereichs */
    .is-mobile .section.panel .section-headline-wrapper {
        margin-top: auto;            /* DAS verankert den Block unten */
        padding: 22px 22px 0 22px;
    }

    .is-mobile .section.panel .section-headline {
        /* sämtliche widersprüchlichen Alt-Werte neutralisieren */
        padding: 0 !important;
        margin: 0 !important;
        text-align: left;
    }

    .is-mobile .section.panel .section-headline h1,
    .is-mobile .section.panel .section-headline h2 {
        font-size: 26px;
        line-height: 1.2;
        margin: 0 0 6px 0;
        font-weight: 300;
        color: #fff;
    }

    .is-mobile .section.panel .section-headline .subline {
        display: block;
        font-size: 16px;
        font-weight: 300;
        opacity: 0.9;
    }

    /* ---- 3. Boxen-Slider (CSS Scroll-Snap) ----------------------------- */

    .is-mobile .section.panel .posts-wrapper.pwrap-mobile {
        opacity: 1 !important;       /* Alt-Regel setzte teils opacity:0 */
        margin: 0 !important;
        padding: 0 0 14px 0;
        display: block;
    }

    .is-mobile .section.panel .posts-wrapper.pwrap-mobile .slider-box {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
        gap: 0;
        padding: 4px 0 0 0;
    }
    .is-mobile .section.panel .posts-wrapper.pwrap-mobile .slider-box::-webkit-scrollbar {
        display: none;               /* WebKit */
    }

    /* Jede einzelne Box = eine volle Slide-Breite */
    .is-mobile .section.panel .posts-wrapper.pwrap-mobile .slider-box > div {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        box-sizing: border-box;
        padding: 6px 22px 10px 22px;
        text-align: left;
    }

    .is-mobile .section.panel .posts-wrapper.pwrap-mobile .slider-box > div h3 {
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        margin: 0 0 8px 0;
        text-align: left;
    }

    .is-mobile .section.panel .posts-wrapper.pwrap-mobile .slider-box > div p {
        font-size: 15px;
        line-height: 1.5;
        color: #eef3f8;
        margin: 0 0 6px 0;
        text-align: left;
    }

    /* ---- 4. Pager-Punkte (per JS injiziert) ---------------------------- */

    .l8-slider-pager {
        display: flex;
        justify-content: center;
        gap: 9px;
        padding: 12px 0 4px 0;
        margin: 0;
        list-style: none;
    }
    .l8-slider-pager li {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transition: background 0.25s ease, transform 0.25s ease;
        cursor: pointer;
    }
    .l8-slider-pager li.is-active {
        background: #fff;
        transform: scale(1.25);
    }

    /* Nur anzeigen, wenn es mehr als eine Box gibt – Klasse von JS gesetzt */
    .l8-slider-pager.is-single {
        display: none;
    }

    /* ---- 4b. Sonderfall TOP-SECTION (#section-lernenlernen) ------------- *
       Diese erste Sektion hat KEINEN .section-image-container, sondern eine
       eigene Struktur (.first-img-container + .top-section__headline-box +
       .posts-wrapper.pwrap-mobile als direkte Kinder). Daher hier eigene
       Flex-Verankerung. */

    .is-mobile #section-lernenlernen.section.panel {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100vh;
        min-height: 100svh;
        position: relative;
        background-color: #fff;
    }

    /* Bild füllt den oberen Bereich, schrumpft aber nicht den blauen Block weg */
    .is-mobile #section-lernenlernen .first-img-container {
        flex: 1 1 auto;
        height: auto;
        min-height: 45vh;
        position: relative;
    }
    .is-mobile #section-lernenlernen .first-img-container__mobile-image {
        height: 100%;
        min-height: 45vh;
        background-size: cover;
        background-position: center;
    }

    /* Headline-Box: aus absolut -> in den Fluss, direkt über den Boxen */
    .is-mobile #section-lernenlernen .top-section__headline-box {
        position: static;
        transform: none;
        width: 100%;
        margin: 0;
        padding: 22px 22px 0 22px;
        background-color: rgba(0, 72, 138, 0.82);
        text-align: left;
        box-sizing: border-box;
    }
    .is-mobile #section-lernenlernen .top-section__headline {
        font-size: 24px;
        line-height: 1.2;
        margin: 0 0 6px 0;
        text-align: left;
    }
    .is-mobile #section-lernenlernen .top-section__headline-box .subline {
        font-size: 16px;
        font-weight: 300;
        opacity: 0.9;
    }

    /* Die blauen Boxen der Top-Section: gleicher Slider wie überall (greift
       bereits über .posts-wrapper.pwrap-mobile oben). Nur das absolute
       Positioning der Alt-Klasse pwrap0 zurücksetzen. */
    .is-mobile #section-lernenlernen .posts-wrapper.pwrap-mobile,
    .is-mobile .posts-wrapper.pwrap0 {
        position: static !important;
        bottom: auto !important;
    }

    /* ---- 5. Aufräumen: störende Alt-Effekte auf Mobile deaktivieren ----- */

    /* die zufälligen Fade-In-Richtungs-Animationen verschieben den Block */
    .is-mobile .section.panel .posts-wrapper.pwrap-mobile,
    .is-mobile .section.panel .section-headline {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Maus-Scroll-Icon und Pagination auf Mobile aus */
    .is-mobile .mouse-down-icon,
    .is-mobile .pagination {
        display: none !important;
    }
}