/* ============================================================
   MHL – GLOBAL ROUNDED CONTAINERS
   Einheitliche Seitencontainer – bewusst separat isoliert
   ============================================================ */


/* ============================================================
   ROOT / HAUPTSEITENCONTAINER
   ============================================================ */

main#content {
    overflow: visible;
}


/* ============================================================
   DIE BEREITS GENUTZTEN HAUPT-CONTAINER
   ============================================================ */

main#content .glass-card,
main#content .reading-shell,
main#content .prose-page {
    border-radius: 24px;
}


/* ============================================================
   TYPOGRAFISCHE / REDAKTIONELLE HAUPTFLÄCHEN
   ============================================================ */

main#content
section.glass-card,
main#content
article.glass-card,
main#content
div.glass-card,

main#content
section.reading-shell,
main#content
article.reading-shell,
main#content
div.reading-shell {
    border-radius: 24px;
}


/* ============================================================
   KARTEN / KACHELN
   ============================================================ */

main#content
[class*="card"]:not(button):not(input):not(select):not(textarea),

main#content
[class*="tile"]:not(button):not(input):not(select):not(textarea),

main#content
[class*="panel"]:not(button):not(input):not(select):not(textarea) {
    border-radius: 18px;
}


/* ============================================================
   REDAKTIONELLE BOXEN
   ============================================================ */

main#content
.prose-page > section,
main#content
.prose-page > article,
main#content
.prose-page > div:not(.page-header):not(.hero) {
    border-radius: 18px;
}


/* ============================================================
   FORMULAR-/FILTER-CONTAINER
   Die Eingabefelder selbst bleiben unangetastet.
   ============================================================ */

main#content
.filter-card,
main#content
.search-card,
main#content
.planner-card,
main#content
.info-card {
    border-radius: 18px;
}


/* ============================================================
   TOP-LEVEL REGIONALE SEITEN
   ============================================================ */

main#content
.mhl-regional-page {
    border-radius: 24px;
    overflow: hidden;
}

main#content
.mhl-regional-article {
    border-radius: 20px;
}

main#content
.mhl-regional-topic {
    border-radius: 18px;
}

main#content
.mhl-regional-page-row {
    border-radius: 17px;
}


/* ============================================================
   DATENSCHUTZ / RECHTLICHE SEITEN
   ============================================================ */

main#content
.mhl-datenschutz-page {
    border-radius: 24px;
    overflow: hidden;
}


/* ============================================================
   ALLGEMEINE CONTENT-BLOCKS
   Nur Container mit eigenem Hintergrund/Borderrand.
   ============================================================ */

main#content
[class*="shell"],
main#content
[class*="box"],
main#content
[class*="container-card"],
main#content
[class*="content-card"] {
    border-radius: 18px;
}


/* ============================================================
   BILDER IN ABGERUNDETEN CONTAINERN
   Bild folgt der Form des Containers.
   ============================================================ */

main#content
.glass-card > img:first-child,
main#content
.reading-shell > img:first-child,
main#content
.prose-page > img:first-child,

main#content
.glass-card .card-image,
main#content
.reading-shell .card-image,
main#content
.prose-page .card-image {
    border-radius: 18px 18px 0 0;
}


/* ============================================================
   ROUNDED CLIPPING
   ============================================================ */

main#content
.glass-card,
main#content
.reading-shell,
main#content
.prose-page,
main#content
.mhl-regional-page,
main#content
.mhl-datenschutz-page {
    overflow: hidden;
}


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

@media (max-width: 900px) {

    main#content .glass-card,
    main#content .reading-shell,
    main#content .prose-page,
    main#content .mhl-regional-page,
    main#content .mhl-datenschutz-page {
        border-radius: 21px;
    }

    main#content
    [class*="card"]:not(button):not(input):not(select):not(textarea),
    main#content
    [class*="tile"]:not(button):not(input):not(select):not(textarea),
    main#content
    [class*="panel"]:not(button):not(input):not(select):not(textarea) {
        border-radius: 16px;
    }
}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 620px) {

    main#content .glass-card,
    main#content .reading-shell,
    main#content .prose-page,
    main#content .mhl-regional-page,
    main#content .mhl-datenschutz-page {
        border-radius: 17px;
    }

    main#content
    [class*="card"]:not(button):not(input):not(select):not(textarea),
    main#content
    [class*="tile"]:not(button):not(input):not(select):not(textarea),
    main#content
    [class*="panel"]:not(button):not(input):not(select):not(textarea) {
        border-radius: 14px;
    }
}


/* ============================================================
   BUTTONS / INPUTS NICHT ÜBERSCHREIBEN
   ============================================================ */

main#content button,
main#content input,
main#content select,
main#content textarea,
main#content a {
    /* absichtlich leer – bestehende Designs behalten */
}


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

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

    main#content .glass-card,
    main#content .reading-shell,
    main#content .prose-page {
        transition: none;
    }
}
/* MHL UNIFIED PAGE HEADER V2 */

/* ============================================================
   MHL UNIFIED PAGE HEADER V2
   Nur für ausgewählte öffentliche Inhaltsseiten.
   Inhalt bleibt vollständig dynamisch.
   ============================================================ */

body:has(.mhl-regional-page) header.page-header,
body:has(.mhl-regional-index) header.page-header,
body:has(.mhl-about-page) header.page-header,
body:has(.mhl-schleswig-holstein-page) header.page-header,
body:has(.mhl-files-page) header.page-header,
body:has(.mhl-content-report-page) header.page-header,
body:has(.mhl-privacy-page) header.page-header,
body:has(.mhl-how-built-page) header.page-header,
body.scene-contact header.page-header {
    min-height: clamp(250px, 29vh, 330px) !important;
    height: auto !important;

    padding: clamp(1.75rem, 3.2vw, 3rem)
             clamp(1.5rem, 4vw, 4rem) !important;

    border-radius: 30px !important;

    overflow: hidden;
    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.10);

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

/*
 * Textbereich darf wachsen.
 * Dadurch wird bei langen Seitentiteln nichts abgeschnitten.
 */
body:has(.mhl-regional-page) header.page-header .page-header__copy,
body:has(.mhl-regional-index) header.page-header .page-header__copy,
body:has(.mhl-about-page) header.page-header .page-header__copy,
body:has(.mhl-schleswig-holstein-page) header.page-header .page-header__copy,
body:has(.mhl-files-page) header.page-header .page-header__copy,
body:has(.mhl-content-report-page) header.page-header .page-header__copy,
body:has(.mhl-privacy-page) header.page-header .page-header__copy,
body:has(.mhl-how-built-page) header.page-header .page-header__copy,
body.scene-contact header.page-header .page-header__copy {
    min-width: 0;
    max-width: 920px;
}

/*
 * Icon bleibt Bestandteil des vorhandenen Designs,
 * wird aber nicht künstlich vergrößert.
 */
body:has(.mhl-regional-page) header.page-header .page-header__icon,
body:has(.mhl-regional-index) header.page-header .page-header__icon,
body:has(.mhl-about-page) header.page-header .page-header__icon,
body:has(.mhl-schleswig-holstein-page) header.page-header .page-header__icon,
body:has(.mhl-files-page) header.page-header .page-header__icon,
body:has(.mhl-content-report-page) header.page-header .page-header__icon,
body:has(.mhl-privacy-page) header.page-header .page-header__icon,
body:has(.mhl-how-built-page) header.page-header .page-header__icon,
body.scene-contact header.page-header .page-header__icon {
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 700px) {
    body:has(.mhl-regional-page) header.page-header,
    body:has(.mhl-regional-index) header.page-header,
    body:has(.mhl-about-page) header.page-header,
    body:has(.mhl-schleswig-holstein-page) header.page-header,
    body:has(.mhl-files-page) header.page-header,
    body:has(.mhl-content-report-page) header.page-header,
    body:has(.mhl-privacy-page) header.page-header,
    body:has(.mhl-how-built-page) header.page-header,
    body.scene-contact header.page-header {
        min-height: 220px !important;
        padding: 1.5rem !important;
        border-radius: 24px !important;
    }
}