/*
 * MHL-ATTRACTIONS-HEADING-RESPONSIVE-V2
 * Nur die Überschrift auf der Seite
 * /schleswig-holstein/sehenswuerdigkeiten.
 */

html body.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header,
html body.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header .page-header__copy {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header .page-header__copy {
    width: 100% !important;
}

html body.mhl-attractions-logo-size-fix
main#content.site-main.shell > .page-header h1 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    font-size: clamp(2rem, 3vw, 3.3rem) !important;
    line-height: 1.08 !important;
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    html body.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header h1 {
        font-size: clamp(1.9rem, 3.4vw, 2.65rem) !important;
    }
}

/* Smartphone */
@media screen and (max-width: 767px) {
    html body.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header h1 {
        font-size: clamp(1.65rem, 6vw, 2.3rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
    }
}

/* Sehr schmale Displays */
@media screen and (max-width: 380px) {
    html body.mhl-attractions-logo-size-fix
    main#content.site-main.shell > .page-header h1 {
        font-size: 1.6rem !important;
    }
}