/* ===========================================================
   LICHT & WASSERWELT
   JTL-SHOP 5.8 – NOVA CHILD
   MOBILE STARTWELTEN / OPC-ZWEI-SPALTEN-LAYOUT

   Übernahme der bisherigen NOVA-Regeln.
   Nur mobil bis 767,98 px.
   Überschriften +3 px; Beschreibung und Button -15 px.
   Andere Desktop-Layouts und Portlets nicht gezielt ändern.

   Benötigt die vorhandene Klasse .lw-opc-zoom
   sowie die bisherige OPC-HTML-Struktur.
   =========================================================== */

@media (max-width: 767.98px) {

    /* 1. Zwei Spalten für die Startwelten und folgende Zeile */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) + .container-fluid > .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) + .container-fluid > .row > .col {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .clearfix,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) + .container-fluid > .row > .clearfix {
        display: none !important;
    }

    /* 2. Gemeinsame Zeilen für Titel, Text und Button */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
        min-height: 500px;
        row-gap: 20px;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .clearfix {
        display: none !important;
    }

    /* 3. Grid-Subgrid für die beiden Inhalts-Spalten */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div {
        display: grid !important;
        grid-template-rows: subgrid;
        grid-template-columns: minmax(0, 1fr);
        grid-row: 1 / 6;
        min-width: 0;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col {
        width: auto !important;
        max-width: none !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div {
        position: relative !important;
        transform: translateY(calc(50px - (1rem - 8px))) !important;
    }

    /* 4. Vorhandenen leeren Abstandhalter ausblenden */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > .opc-Container:first-child {
        display: none !important;
    }

    /* 5. Text- und Button-Positionen beibehalten */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > h1 {
        grid-row: 2;
        transform: translateY(3px) !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > div:not(.opc-Container):not(.opc-Button) {
        grid-row: 3;
        transform: translateY(-15px) !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > .opc-Button {
        position: static !important;
        grid-row: 4;
        transform: translateY(-15px) !important;
    }

    /* 6. Schwarze Textflächen entfernen, Abmessungen erhalten */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > h1,
    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container p {
        width: fit-content;
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
        max-width: 100%;
        box-sizing: border-box;
        padding: 2px 4px;
        background-color: transparent !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container > div > h1 {
        justify-self: center;
        align-self: stretch;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-left: 0;
        padding-right: 0;

        /* Ganze Wörter erhalten; Textgröße skaliert mit der Breite */
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        font-size: min(30px, 7.5vw) !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) > .row > .col > .opc-Container p {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 100%;
    }

    /* 7. Beschreibung unterhalb der Startwelten einspaltig */

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) + .container-fluid > .row {
        display: block !important;
    }

    #main-wrapper > .container-fluid:has(> .row > .col > .lw-opc-zoom) + .container-fluid > .row > .col {
        width: 100% !important;
        max-width: 100% !important;
    }

} /* Ende mobile Ansicht */