/* MHL-SH-TYPOGRAPHY-ALIGNMENT-V4
   Begrenzung auf Aktivitäten, Sehenswürdigkeiten und Leuchttürme.
*/

/* Einheitliche linke Textkante und kein künstliches 28ch-Limit. */
html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header .page-header__copy {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header h1 {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;

    /* Fluid: auf Desktop einzeilig, auf kleineren Screens kleiner. */
    font-size: clamp(1.2rem, 3.05vw, 3.1rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: nowrap !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header .eyebrow {
    margin-left: 0 !important;
    text-align: left !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header
.page-header__copy > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 72ch !important;
    margin-left: 0 !important;
    text-align: left !important;
    text-wrap: pretty;
}

/* Gleiche Innenabstände für Infokasten, Themenkarten und Detailbereich. */
html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__lead {
    padding: clamp(1rem, 1.4vw, 1.3rem) !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card {
    padding: clamp(1rem, 1.4vw, 1.3rem) !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__details {
    padding: clamp(1rem, 1.4vw, 1.3rem) !important;
}

/* Überschriften in den vier Karten beginnen auf derselben Höhe. */
html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card .eyebrow {
    display: flex !important;
    align-items: center !important;
    min-height: 1.3em !important;
    margin: 0 0 .7rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card h3 {
    display: flex !important;
    align-items: center !important;
    min-height: 1.5em !important;
    margin: .1rem 0 .5rem !important;
    font-size: clamp(.84rem, .9vw, 1.03rem) !important;
    line-height: 1.25 !important;
    text-align: left !important;
    letter-spacing: -.015em;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__card > p:last-child {
    margin-top: .25rem !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    text-wrap: pretty;
}

/* Der Lead-Titel und die Beschreibung nutzen dieselbe Textkante. */
html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__lead-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    text-align: left !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__lead-copy h2 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    text-align: left !important;
    line-height: 1.18 !important;
    text-wrap: balance;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__lead-copy > p:last-child {
    margin-left: 0 !important;
    text-align: left !important;
    text-wrap: pretty;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__details-head {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    text-align: left !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__notes {
    align-items: stretch !important;
}

html body.scene-sh.mhl-attractions-logo-size-fix
.mhl-sh-editorial-layout__note {
    box-sizing: border-box !important;
    min-width: 0 !important;
    text-align: left !important;
}

/* Tablet: H1 verkleinern, bevor unnötige Umbrüche entstehen. */
@media (max-width: 1000px) {
    html body.scene-sh.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header h1 {
        font-size: clamp(.95rem, 3.1vw, 2rem) !important;
        letter-spacing: -.04em !important;
    }
}

/* Smartphone: möglichst einzeilig, mit fließend reduzierter Schriftgröße. */
@media (max-width: 600px) {
    html body.scene-sh.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header h1 {
        font-size: clamp(.72rem, 3.1vw, 1.15rem) !important;
        letter-spacing: -.045em !important;
        white-space: nowrap !important;
        text-wrap: nowrap !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 h3 {
        font-size: 1rem !important;
    }
}