/* MHL-SH-LAYOUT-SPACING-ALIGNMENT-V3
   Nur die drei SH-Planerseiten:
   - kompakterer Abstand unter dem Seitenbanner
   - identische Seitenbreite für redaktionelle Kästen und Planer
   - gleichmäßiges Kartenraster
*/

/* Headerhöhe und vertikale Abstände an die SH-Referenz angleichen. */
html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header {
    box-sizing: border-box !important;
    min-height: clamp(205px, 17vw, 255px) !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: .35rem !important;
    padding-top: clamp(.55rem, 1.4vw, 1.1rem) !important;
    padding-bottom: .6rem !important;
    overflow: visible !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header .page-header__copy {
    max-width: min(100%, 1260px) !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header h1 {
    max-width: 28ch !important;
    font-size: clamp(2rem, 3.25vw, 3.75rem) !important;
    line-height: 1.07 !important;
    text-wrap: balance;
}

/* Die Editorial-Elemente sollen sich an der tatsächlichen Planerbreite
   orientieren, nicht an der größeren verfügbaren Main-Breite. */
html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout {
    display: grid !important;
    box-sizing: border-box !important;
    width: calc(100% - 26px) !important;
    max-width: none !important;
    margin: 0 auto .65rem !important;
    gap: .7rem !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__lead {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__grid {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: .7rem !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Unterer Infobereich exakt so breit wie der Editorial-Introbereich. */
html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__details {
    box-sizing: border-box !important;
    width: calc(100% - 26px) !important;
    max-width: none !important;
    margin: .75rem auto 2rem !important;
}

/* Der Abstand zwischen Editorial-Teil und Planer bleibt kompakt. */
html body.scene-sh.mhl-attractions-logo-size-fix
.attractions-shell {
    margin-top: .65rem !important;
}

/* Tablet */
@media (max-width: 1000px) {
    html body.scene-sh.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header {
        min-height: 220px !important;
        padding-top: .65rem !important;
        padding-bottom: .5rem !important;
    }

    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout,
    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout__details {
        width: calc(100% - 1rem) !important;
    }

    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    html body.scene-sh.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header {
        min-height: 0 !important;
        padding-top: .5rem !important;
        padding-bottom: .4rem !important;
    }

    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout,
    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout__details {
        width: calc(100% - .5rem) !important;
    }

    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
    }

    html body.scene-sh.mhl-attractions-logo-size-fix
    .mhl-sh-editorial-layout__card {
        height: auto !important;
    }
}