/*
 * MHL – Fünf Wege durch den Heimathafen
 * Zweck: Das jeweils aktive Modul nutzt die gesamte Breite
 * des vorhandenen Rasters. Optik und Inhalte bleiben bestehen.
 * Sämtliche Regeln sind auf die Startseite begrenzt.
 */

html body.scene-home .home-hub > .home-module-grid[data-home-module-grid] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

html body.scene-home .home-module-grid.has-expanded > .home-module.is-expanded {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;

    /* Bestehenden leichten Höhenversatz erhalten,
       aber die Karte nicht über ihre neue volle Breite skalieren. */
    transform: translateY(-10px) !important;
}

html body.scene-home
.home-module-grid.has-expanded > .home-module.is-expanded > .home-module__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body.scene-home
.home-module-grid.has-expanded > .home-module.is-expanded > .home-module__visual {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet und Smartphone: Bild und Text ohne seitliche Quetschung stapeln. */
@media (max-width: 820px) {
    html body.scene-home
    .home-module-grid.has-expanded > .home-module.is-expanded.home-module--visual {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "body" "visual" !important;
    }

    html body.scene-home
    .home-module-grid.has-expanded > .home-module.is-expanded.home-module--visual > .home-module__body {
        grid-area: body !important;
    }

    html body.scene-home
    .home-module-grid.has-expanded > .home-module.is-expanded.home-module--visual > .home-module__visual {
        grid-area: visual !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Schmale Smartphones: keine Mindestbreite und kein horizontaler Überlauf. */
@media (max-width: 480px) {
    html body.scene-home .home-hub > .home-module-grid[data-home-module-grid],
    html body.scene-home .home-module-grid.has-expanded > .home-module.is-expanded {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.scene-home
    .home-module-grid.has-expanded > .home-module.is-expanded > .home-module__body {
        overflow-wrap: anywhere;
    }
}

/* MHL-HOME-MODULE-IMAGE-CENTER-V3
   Vertikale Zentrierung des Bildes innerhalb der geöffneten Box.
   Nur Homepage und nur Layouts mit nebeneinanderliegendem Bild/Text.
   Auf schmalen Displays bleibt die vorhandene Stapelung bestehen. */
@media screen and (min-width: 821px) {
    html body.scene-home
    .home-module-grid.has-expanded
    > .home-module.is-expanded.home-module--visual
    > img.home-module__visual {
        align-self: center !important;
        height: auto !important;
        margin-block: auto !important;
    }
}
/* /MHL-HOME-MODULE-IMAGE-CENTER-V3 */