/* ============================================================
   MHL – REGIONALE BESONDERHEITEN
   ============================================================ */

.regionale-besonderheiten-page {
    overflow: hidden;
}

.region-intro {
    max-width: 900px;
    margin-bottom: 2.25rem;
}

.region-intro__eyebrow,
.region-section__eyebrow,
.region-closing__eyebrow {
    display: block;

    margin-bottom: .45rem;

    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .20em;

    color: #75e1ef;
}

.region-intro h2 {
    margin: 0 0 .65rem;

    font-size: clamp(
        1.55rem,
        1.2rem + .75vw,
        2.15rem
    );

    line-height: 1.12;

    color: #f7fcfd;
}

.region-intro p {
    max-width: 820px;

    margin: 0;

    font-size: 1rem;
    line-height: 1.62;

    color: rgba(218, 237, 242, .84);
}


/* ============================================================
   SECTIONS
   ============================================================ */

.region-section {
    margin-top: 2.7rem;
}

.region-section__heading {
    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: .9rem;

    align-items: start;

    margin-bottom: 1.15rem;
}

.region-section__number {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    border:
        1px solid rgba(106, 222, 239, .20);

    border-radius: 14px;

    background:
        rgba(48, 184, 209, .08);

    color: #70dfef;

    font-size: .74rem;
    font-weight: 850;

    letter-spacing: .08em;
}

.region-section__heading h2 {
    margin: 0;

    font-size: clamp(
        1.3rem,
        1.08rem + .52vw,
        1.75rem
    );

    line-height: 1.15;

    color: #f4fbfd;
}

.region-section__lead {
    max-width: 920px;

    margin:
        0 0 1.2rem;

    line-height: 1.58;

    color:
        rgba(216, 237, 241, .82);
}


/* ============================================================
   FEATURE GRID
   ============================================================ */

.region-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: .85rem;
}

.region-feature {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: .8rem;

    min-width: 0;

    padding: 1rem;

    border:
        1px solid rgba(92, 220, 237, .17);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 96, 117, .17),
            rgba(4, 37, 53, .38)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.045);
}

.region-feature__icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    border:
        1px solid rgba(98, 220, 239, .18);

    background:
        rgba(58, 197, 222, .07);

    color: #76e1ef;

    font-size: 1.1rem;
}

.region-feature h3 {
    margin:
        .04rem 0 .32rem;

    font-size: 1rem;
    line-height: 1.2;

    color: #f4fbfd;
}

.region-feature p {
    margin: 0;

    font-size: .88rem;

    line-height: 1.5;

    color:
        rgba(211, 232, 237, .78);
}


/* ============================================================
   STORIES / INFO PANELS
   ============================================================ */

.region-story {
    margin-top: .95rem;

    padding:
        .95rem 1.05rem;

    border-left:
        3px solid rgba(106, 222, 239, .68);

    border-radius: 12px;

    background:
        rgba(72, 204, 226, .045);
}

.region-story strong {
    display: block;

    margin-bottom: .2rem;

    color: #ffffff;
}

.region-story p {
    margin: 0;

    font-size: .9rem;

    line-height: 1.52;

    color:
        rgba(216, 235, 239, .80);
}

.region-story--gold {
    border-left-color:
        rgba(255, 201, 90, .78);

    background:
        rgba(255, 198, 83, .045);
}

.region-story--gold strong {
    color:
        #ffd36f;
}

.region-story--history {
    border-left-color:
        rgba(160, 181, 204, .66);

    background:
        rgba(147, 174, 197, .04);
}


/* ============================================================
   ABSCHLUSS
   ============================================================ */

.region-closing {
    margin-top: 3rem;

    padding:
        1.45rem 1.5rem;

    border:
        1px solid rgba(105, 222, 239, .20);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 99, 120, .18),
            rgba(4, 36, 51, .42)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.05);
}

.region-closing__eyebrow {
    margin-bottom: .55rem;
}

.region-closing h2 {
    margin:
        0 0 .65rem;

    font-size: clamp(
        1.35rem,
        1.08rem + .62vw,
        1.9rem
    );

    line-height: 1.14;

    color: #ffffff;
}

.region-closing p {
    max-width: 900px;

    margin:
        0 0 .7rem;

    line-height: 1.58;

    color:
        rgba(218, 237, 241, .82);
}

.region-closing__source-note {
    padding-top: .65rem;

    border-top:
        1px solid rgba(105, 222, 239, .11);

    font-size: .82rem;

    color:
        rgba(190, 218, 224, .64) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .region-feature-grid {
        grid-template-columns: 1fr;
    }

    .region-section {
        margin-top: 2.25rem;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .region-intro {
        margin-bottom: 1.75rem;
    }

    .region-section__heading {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: .7rem;
    }

    .region-section__number {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }

    .region-feature {
        grid-template-columns: 36px minmax(0, 1fr);

        padding: .82rem;

        border-radius: 14px;
    }

    .region-feature__icon {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }

    .region-feature h3 {
        font-size: .95rem;
    }

    .region-feature p {
        font-size: .84rem;
    }

    .region-closing {
        padding: 1.05rem;

        border-radius: 16px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .region-intro h2 {
        font-size: 1.4rem;
    }

    .region-section__heading h2 {
        font-size: 1.2rem;
    }

    .region-feature {
        gap: .65rem;
    }

    .region-feature p,
    .region-story p {
        font-size: .81rem;
    }

    .region-closing p {
        font-size: .88rem;
    }
}