/* ============================================================
   MHL – REGIONALE BESONDERHEITEN
   FINAL / editorial / responsive
   ============================================================ */


/* ============================================================
   BASIS
   ============================================================ */

.mhl-regional-page {
    overflow: hidden;
}


/* ============================================================
   INTRO
   ============================================================ */

.mhl-regional-page__intro {
    max-width: 920px;
    margin: 0 0 2rem;
}

.mhl-regional-page__eyebrow {
    display: block;

    margin-bottom: .42rem;

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

    letter-spacing: .18em;

    color:
        rgba(111, 222, 238, .84);
}

.mhl-regional-page__intro h2 {
    margin:
        0 0 .62rem;

    font-size:
        clamp(1.45rem, 1.15rem + .62vw, 2rem);

    line-height: 1.12;

    color:
        #f6fbfd;
}

.mhl-regional-page__intro p {
    max-width: 840px;

    margin: 0;

    line-height: 1.62;

    color:
        rgba(216, 236, 240, .82);
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.mhl-regional-breadcrumb {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: .48rem;

    margin-bottom: 1.25rem;

    padding-bottom: .75rem;

    border-bottom:
        1px solid rgba(106, 221, 238, .11);

    font-size: .78rem;
}

.mhl-regional-breadcrumb a {
    color:
        #72dcea;

    text-decoration: none;

    font-weight: 750;
}

.mhl-regional-breadcrumb a:hover {
    text-decoration: underline;
}

.mhl-regional-breadcrumb span {
    color:
        rgba(182, 214, 220, .42);
}

.mhl-regional-breadcrumb strong {
    color:
        rgba(219, 237, 241, .68);

    font-weight: 650;
}


/* ============================================================
   THEMA-KARTEN
   ============================================================ */

.mhl-regional-topic-grid {
    display: grid;

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

    gap: 1rem;
}

.mhl-regional-topic {
    display: grid;

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

    gap: .9rem;

    min-width: 0;

    padding: 1.05rem;

    border:
        1px solid rgba(98, 219, 237, .17);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 98, 119, .18),
            rgba(4, 36, 52, .42)
        );

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

    text-decoration: none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mhl-regional-topic:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(107, 225, 241, .34);

    box-shadow:
        0 14px 30px rgba(0,0,0,.16),
        inset 0 1px 0
        rgba(255,255,255,.06);
}

.mhl-regional-topic__number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        rgba(91, 211, 231, .07);

    border:
        1px solid rgba(102, 221, 239, .17);

    color:
        #70deed;

    font-size: .73rem;

    font-weight: 850;

    letter-spacing: .08em;
}

.mhl-regional-topic__body {
    min-width: 0;
}

.mhl-regional-topic__eyebrow {
    display: block;

    margin-bottom: .22rem;

    font-size: .64rem;

    font-weight: 850;

    letter-spacing: .13em;

    color:
        rgba(112, 222, 238, .75);
}

.mhl-regional-topic h3 {
    margin:
        0 0 .38rem;

    font-size: 1.04rem;

    line-height: 1.18;

    color:
        #f3fbfd;
}

.mhl-regional-topic p {
    margin:
        0 0 .72rem;

    font-size: .86rem;

    line-height: 1.50;

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

.mhl-regional-topic__meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: .6rem;

    font-size: .72rem;

    font-weight: 750;

    color:
        rgba(188, 219, 226, .66);
}

.mhl-regional-topic__meta span:last-child {
    color:
        #70ddeb;
}


/* ============================================================
   HINWEIS
   ============================================================ */

.mhl-regional-note {
    display: grid;

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

    gap: .8rem;

    margin-top: 1.15rem;

    padding:
        .95rem 1rem;

    border-left:
        3px solid rgba(108, 222, 239, .64);

    border-radius: 12px;

    background:
        rgba(75, 207, 226, .04);
}

.mhl-regional-note__icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        rgba(90, 213, 233, .07);

    color:
        #73deed;
}

.mhl-regional-note strong {
    display: block;

    margin-bottom: .2rem;

    color:
        #ffffff;
}

.mhl-regional-note p {
    margin: 0;

    line-height: 1.5;

    color:
        rgba(208, 231, 236, .78);
}


/* ============================================================
   SEITENAUSWAHL
   ============================================================ */

.mhl-regional-page-list {
    display: grid;

    gap: .75rem;
}

.mhl-regional-page-row {
    display: grid;

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

    gap: .85rem;

    align-items: center;

    min-width: 0;

    padding:
        .95rem 1rem;

    border:
        1px solid rgba(99, 220, 238, .16);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 96, 116, .16),
            rgba(4, 37, 52, .36)
        );

    text-decoration: none;

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

    transition:
        transform .17s ease,
        border-color .17s ease,
        background .17s ease;
}

.mhl-regional-page-row:hover {
    transform:
        translateX(2px);

    border-color:
        rgba(106, 224, 240, .34);

    background:
        linear-gradient(
            135deg,
            rgba(20, 111, 133, .20),
            rgba(4, 39, 55, .41)
        );
}

.mhl-regional-page-row__number {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    border:
        1px solid rgba(100, 220, 239, .17);

    background:
        rgba(84, 210, 231, .07);

    color:
        #70deed;

    font-size: .72rem;

    font-weight: 850;
}

.mhl-regional-page-row__body {
    min-width: 0;
}

.mhl-regional-page-row__kicker {
    display: block;

    margin-bottom: .18rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .63rem;

    font-weight: 850;

    letter-spacing: .13em;

    color:
        rgba(111, 222, 239, .72);
}

.mhl-regional-page-row h3 {
    margin:
        0 0 .25rem;

    font-size: .99rem;

    line-height: 1.2;

    color:
        #f3fbfd;
}

.mhl-regional-page-row p {
    margin: 0;

    font-size: .83rem;

    line-height: 1.45;

    color:
        rgba(204, 228, 234, .74);
}

.mhl-regional-page-row__arrow {
    color:
        #6eddeb;

    font-size: 1.15rem;
}


/* ============================================================
   THEMA FOOTER
   ============================================================ */

.mhl-regional-topic-navigation {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    margin-top: 1.15rem;

    padding-top: .8rem;

    border-top:
        1px solid rgba(106, 221, 238, .10);
}

.mhl-regional-topic-navigation span {
    font-size: .73rem;

    color:
        rgba(191, 219, 225, .60);
}

.mhl-regional-topic-navigation a {
    color:
        #70deed;

    font-size: .78rem;

    font-weight: 800;

    text-decoration: none;
}


/* ============================================================
   ARTIKELSEITE
   ============================================================ */

.mhl-regional-article {
    max-width: 920px;

    padding:
        1.35rem 1.4rem 1.35rem;

    border:
        1px solid rgba(99, 220, 238, .17);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 92, 112, .17),
            rgba(4, 36, 52, .41)
        );

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

.mhl-regional-article__header {
    margin-bottom: 1.25rem;
}

.mhl-regional-article__kicker {
    display: block;

    margin-bottom: .45rem;

    font-size: .68rem;

    font-weight: 850;

    letter-spacing: .16em;

    color:
        #71deed;
}

.mhl-regional-article__header h2 {
    margin:
        0 0 .65rem;

    font-size:
        clamp(1.55rem, 1.18rem + .75vw, 2.25rem);

    line-height: 1.10;

    color:
        #f7fcfd;
}

.mhl-regional-article__lead {
    margin: 0;

    font-size: 1.04rem !important;

    line-height: 1.58;

    color:
        rgba(234, 246, 249, .91) !important;

    font-weight: 650;
}

.mhl-regional-article__text p {
    margin:
        0 0 1rem;

    font-size: 1rem;

    line-height: 1.67;

    color:
        rgba(210, 232, 237, .83);
}

.mhl-regional-article__text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   FAKTENBOX
   ============================================================ */

.mhl-regional-fact {
    display: grid;

    gap: .25rem;

    margin-top: 1.35rem;

    padding:
        .95rem 1rem;

    border-left:
        3px solid rgba(255, 204, 94, .78);

    border-radius: 13px;

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

.mhl-regional-fact__label {
    font-size: .65rem;

    font-weight: 850;

    letter-spacing: .15em;

    color:
        #ffd36c;
}

.mhl-regional-fact strong {
    color:
        #ffffff;

    line-height: 1.48;
}

.mhl-regional-fact small {
    margin-top: .1rem;

    font-size: .74rem;

    color:
        rgba(193, 219, 225, .61);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.mhl-regional-pagination {
    display: grid;

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

    gap: .75rem;

    align-items: stretch;

    margin-top: 1.35rem;
}

.mhl-regional-pagination__side {
    min-width: 0;
}

.mhl-regional-pagination__side a {
    display: grid;

    gap: .18rem;

    min-height: 100%;

    padding:
        .82rem .9rem;

    border:
        1px solid rgba(99, 220, 238, .15);

    border-radius: 14px;

    background:
        rgba(4, 37, 52, .27);

    text-decoration: none;
}

.mhl-regional-pagination__side a:hover {
    border-color:
        rgba(105, 223, 239, .30);
}

.mhl-regional-pagination__side small {
    color:
        rgba(183, 215, 222, .62);

    font-size: .65rem;

    text-transform: uppercase;

    letter-spacing: .10em;
}

.mhl-regional-pagination__side strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        #f0fafc;

    font-size: .8rem;
}

.mhl-regional-pagination__side--next {
    text-align: right;
}

.mhl-regional-pagination__center {
    display: grid;

    place-items: center;

    gap: .3rem;

    padding:
        .55rem .7rem;
}

.mhl-regional-pagination__center span {
    white-space: nowrap;

    color:
        rgba(186, 216, 223, .64);

    font-size: .68rem;

    font-weight: 750;
}

.mhl-regional-pagination__center a {
    color:
        #70deed;

    font-size: .76rem;

    font-weight: 850;

    text-decoration: none;
}


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

@media (max-width: 900px) {

    .mhl-regional-topic-grid {
        grid-template-columns: 1fr;
    }

    .mhl-regional-pagination {
        grid-template-columns:
            1fr 1fr;
    }

    .mhl-regional-pagination__center {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .mhl-regional-pagination__side--next {
        text-align: right;
    }
}


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

@media (max-width: 620px) {

    .mhl-regional-topic {
        grid-template-columns:
            38px minmax(0, 1fr);

        gap: .72rem;

        padding: .88rem;

        border-radius: 15px;
    }

    .mhl-regional-topic__number {
        width: 38px;
        height: 38px;

        border-radius: 11px;
    }

    .mhl-regional-topic h3 {
        font-size: .96rem;
    }

    .mhl-regional-topic p {
        font-size: .82rem;
    }

    .mhl-regional-topic__meta {
        align-items: flex-start;

        flex-direction: column;

        gap: .18rem;
    }

    .mhl-regional-page-row {
        grid-template-columns:
            38px minmax(0, 1fr);

        gap: .7rem;

        padding: .82rem;

        border-radius: 14px;
    }

    .mhl-regional-page-row__number {
        width: 38px;
        height: 38px;

        border-radius: 11px;
    }

    .mhl-regional-page-row__arrow {
        display: none;
    }

    .mhl-regional-page-row h3 {
        font-size: .93rem;
    }

    .mhl-regional-page-row p {
        font-size: .80rem;
    }

    .mhl-regional-topic-navigation {
        align-items: flex-start;

        flex-direction: column;
    }

    .mhl-regional-article {
        padding:
            1rem
            .95rem
            1.05rem;

        border-radius: 16px;
    }

    .mhl-regional-article__header h2 {
        font-size: 1.35rem;
    }

    .mhl-regional-article__lead {
        font-size: .95rem !important;
    }

    .mhl-regional-article__text p {
        font-size: .9rem;
        line-height: 1.58;
    }

    .mhl-regional-pagination {
        grid-template-columns: 1fr;
    }

    .mhl-regional-pagination__center {
        grid-column: auto;
        grid-row: auto;
        order: -1;
    }

    .mhl-regional-pagination__side--next {
        text-align: left;
    }

    .mhl-regional-breadcrumb {
        font-size: .71rem;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mhl-regional-topic,
    .mhl-regional-page-row {
        transition: none;
    }
}