/* ============================================================
   MEERHEIMATLIEBE
   FINAL HERO
   ============================================================ */

.mhl-hero {
    position: relative !important;
    width: 100% !important;
    min-height: min(900px, 100vh) !important;
    height: 100vh !important;

    overflow: hidden !important;
    isolation: isolate !important;

    background: #075c78 !important;
}


/* ============================================================
   HINTERGRUNDBILD
   DIREKTE URL – KEINE CSS-VARIABLE
   ============================================================ */

.mhl-hero__background {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    z-index: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    background-image:
        url("/wp-content/themes/meerheimatliebe/assets/images/hero/home-hero.webp") !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    transform:
        scale(1.015) !important;
}


/* ============================================================
   BILDFILTER
   ============================================================ */

.mhl-hero__background::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            110deg,
            rgba(3,45,67,0.46) 0%,
            rgba(3,65,86,0.24) 40%,
            rgba(0,91,101,0.12) 70%,
            rgba(2,52,66,0.18) 100%
        ) !important;

    pointer-events: none !important;
}


/* ============================================================
   ATMOSPHÄRE
   ============================================================ */

.mhl-hero__overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.05) 28%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            rgba(0,32,52,0.06) 0%,
            transparent 45%,
            rgba(0,38,54,0.18) 100%
        ) !important;
}


/* ============================================================
   CONTENT
   ============================================================ */

.mhl-hero__content {
    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;
    min-height: 100vh !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    padding:
        125px 0 80px 10vw !important;
}


/* ============================================================
   GLASKASTEN
   ============================================================ */

.mhl-hero__glass {
    position: relative !important;

    z-index: 20 !important;

    display: block !important;

    width: 920px !important;
    max-width: calc(100vw - 120px) !important;

    box-sizing: border-box !important;

    padding:
        48px 62px 52px !important;

    border:
        1px solid rgba(255,255,255,0.52) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.28),
            rgba(255,255,255,0.12)
        ) !important;

    backdrop-filter:
        blur(25px) saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(25px) saturate(145%) !important;

    box-shadow:
        0 28px 70px rgba(0,24,42,0.25),
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -1px 0 rgba(255,255,255,0.10) !important;

    overflow: visible !important;
}


/* ============================================================
   GLAS – LICHTREFLEX
   ============================================================ */

.mhl-hero__glass::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.22) 0%,
            transparent 30%,
            transparent 72%,
            rgba(255,255,255,0.07) 100%
        ) !important;

    pointer-events: none !important;
}


/* obere Glas-Kante */

.mhl-hero__glass::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    left: 7% !important;
    right: 7% !important;

    height: 1px !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.92),
            transparent
        ) !important;

    box-shadow:
        0 0 18px rgba(255,255,255,0.38) !important;

    pointer-events: none !important;
}


/* ============================================================
   INHALT ÜBER GLAS
   ============================================================ */

.mhl-hero__glass > * {
    position: relative !important;

    z-index: 5 !important;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.mhl-hero__eyebrow {
    position: relative !important;

    display: block !important;

    margin:
        0 0 22px !important;

    color:
        rgba(255,255,255,0.96) !important;

    font-size:
        0.78rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        0.28em !important;

    text-transform:
        uppercase !important;

    text-shadow:
        0 2px 7px rgba(0,30,50,0.28) !important;
}


/* ============================================================
   TITEL
   ============================================================ */

.mhl-hero__title {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        #ffffff !important;

    font-size:
        clamp(3.8rem, 4.6vw, 5.5rem) !important;

    font-weight:
        700 !important;

    line-height:
        0.98 !important;

    letter-spacing:
        -0.045em !important;

    overflow: visible !important;
}


/* ============================================================
   WILLKOMMEN BEI
   ============================================================ */

.mhl-hero__welcome {
    display: block !important;

    color:
        #ffffff !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        750 !important;

    line-height:
        0.98 !important;

    letter-spacing:
        -0.045em !important;

    white-space:
        nowrap !important;

    text-shadow:
        0 3px 12px rgba(0,25,50,0.32) !important;
}


/* ============================================================
   MEERHEIMATLIEBE
   ============================================================ */

.mhl-brand-script {
    position: relative !important;

    display: block !important;

    width: max-content !important;
    max-width: none !important;

    margin:
        7px 0 0 !important;

    padding: 0 !important;

    white-space:
        nowrap !important;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        "URW Chancery L",
        "Apple Chancery",
        cursive !important;

    font-size:
        clamp(4.8rem, 5.7vw, 6.6rem) !important;

    font-weight:
        500 !important;

    line-height:
        0.84 !important;

    letter-spacing:
        -0.025em !important;

    filter:
        drop-shadow(
            0 5px 8px rgba(0,25,50,0.30)
        ) !important;
}


/* ============================================================
   MEER – BLAU
   ============================================================ */

.mhl-brand-meer {
    display: inline !important;

    color:
        #0067a6 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.55),
        0 4px 8px rgba(0,35,75,0.30) !important;
}


/* ============================================================
   HEIMAT – WEISS
   ============================================================ */

.mhl-brand-heimat {
    display: inline !important;

    color:
        #ffffff !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.80),
        0 4px 8px rgba(0,25,50,0.30) !important;
}


/* ============================================================
   LIEBE – ROT
   ============================================================ */

.mhl-brand-liebe {
    display: inline !important;

    color:
        #d71932 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.30),
        0 4px 8px rgba(100,0,10,0.30) !important;
}


/* ============================================================
   HERZ
   ============================================================ */

.mhl-brand-heart {
    display: inline-block !important;

    margin-left:
        0.06em !important;

    color:
        #d71932 !important;

    font-family:
        Arial,
        "Segoe UI Symbol",
        sans-serif !important;

    font-size:
        0.54em !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    vertical-align:
        0.02em !important;

    text-shadow:
        0 4px 8px rgba(100,0,10,0.30) !important;
}


/* ============================================================
   BESCHREIBUNG
   ============================================================ */

.mhl-hero__description {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin:
        28px 0 0 !important;

    color:
        rgba(255,255,255,0.97) !important;

    font-size:
        clamp(1.05rem, 1.18vw, 1.18rem) !important;

    line-height:
        1.55 !important;

    text-shadow:
        0 2px 8px rgba(0,25,50,0.32) !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.mhl-hero__actions {
    position: relative !important;

    z-index: 10 !important;

    display: flex !important;

    align-items: center !important;

    gap:
        16px !important;

    margin:
        28px 0 0 !important;
}


.mhl-hero__actions a {
    min-height:
        52px !important;

    padding:
        0 26px !important;

    border-radius:
        999px !important;

    border:
        1px solid rgba(255,255,255,0.68) !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    color:
        #ffffff !important;

    font-weight:
        750 !important;

    text-decoration:
        none !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;

    box-shadow:
        0 9px 24px rgba(0,30,55,0.20),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;

    transition:
        transform .22s ease,
        background .22s ease !important;
}


.mhl-hero__actions a:first-child {
    background:
        rgba(0,82,148,0.88) !important;
}


.mhl-hero__actions a:last-child {
    background:
        rgba(255,255,255,0.14) !important;
}


.mhl-hero__actions a:hover {
    transform:
        translateY(-2px) !important;

    background:
        rgba(255,255,255,0.22) !important;
}


/* ============================================================
   SCROLL
   ============================================================ */

.mhl-hero__scroll {
    position: absolute !important;

    z-index: 30 !important;

    bottom:
        21px !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;

    color:
        rgba(255,255,255,0.94) !important;

    text-shadow:
        0 2px 8px rgba(0,25,50,0.40) !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .mhl-hero__content {
        padding:
            130px 0 75px 10vw !important;
    }

    .mhl-hero__glass {
        width:
            930px !important;

        max-width:
            930px !important;

        padding:
            50px 62px 54px !important;
    }

    .mhl-hero__title {
        font-size:
            clamp(4rem, 4.4vw, 5.3rem) !important;
    }

    .mhl-brand-script {
        font-size:
            clamp(4.8rem, 5.4vw, 6.4rem) !important;
    }
}


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

@media (max-width: 1200px) {

    .mhl-hero__content {
        padding:
            120px 0 75px 6vw !important;
    }

    .mhl-hero__glass {
        width:
            860px !important;

        max-width:
            calc(100vw - 90px) !important;

        padding:
            45px 48px 50px !important;
    }
}


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

@media (max-width: 850px) {

    .mhl-hero {
        min-height:
            760px !important;

        height:
            auto !important;
    }

    .mhl-hero__content {
        min-height:
            760px !important;

        padding:
            105px 18px 70px !important;

        align-items:
            center !important;
    }

    .mhl-hero__glass {
        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            38px 27px 36px !important;

        border-radius:
            26px !important;
    }

    .mhl-hero__title {
        font-size:
            clamp(2.8rem, 10vw, 4rem) !important;
    }

    .mhl-hero__welcome {
        white-space:
            normal !important;
    }

    .mhl-brand-script {
        white-space:
            normal !important;

        font-size:
            clamp(3.2rem, 13vw, 5rem) !important;
    }

    .mhl-hero__description {
        font-size:
            1rem !important;
    }

    .mhl-hero__actions {
        flex-direction:
            column !important;

        align-items:
            stretch !important;
    }

    .mhl-hero__actions a {
        width:
            100% !important;
    }
}


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

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

    .mhl-hero__background {
        transform:
            none !important;
    }

    .mhl-hero__actions a {
        transition:
            none !important;
    }
}


/* ============================================================
   MHL HERO — RESPONSIVE GLASS FINAL
   Hintergrundbild + Glasfläche + Mobile Optimierung
   ============================================================ */

/* ---------- HERO BASIS ---------- */

.mhl-hero {
    position: relative;
    width: 100%;
    min-height: clamp(680px, 88vh, 920px);
    overflow: hidden;
    isolation: isolate;
}

/* ---------- HINTERGRUNDBILD ---------- */

.mhl-hero__background {
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;

    width: 100% !important;
    height: 100% !important;

    background-image: var(--mhl-hero-image) !important;
    background-repeat: no-repeat !important;

    /*
     * Das Bild darf den gesamten Hero ausfüllen.
     * Keine feste Pixelbreite.
     */
    background-size: cover !important;
    background-position: center center !important;

    transform: none !important;
}

/* Atmosphärische Ebene über dem Foto */

.mhl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(3, 48, 76, 0.30) 0%,
            rgba(7, 88, 113, 0.08) 42%,
            rgba(0, 111, 106, 0.12) 100%
        );
}

/* leichte maritime Abdunklung unten */

.mhl-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(2, 38, 61, 0.38),
            rgba(2, 38, 61, 0)
        );
}


/* ============================================================
   HEADER — KOMPAKTES GLAS
   ============================================================ */

.mhl-hero .mhl-header,
.mhl-hero header,
.mhl-hero__header {
    position: relative;
    z-index: 20;
}

.mhl-hero .mhl-glass {
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

/*
 * Navigation/Branding-Glas:
 * stärker transparent als bisher,
 * damit das Hintergrundbild sichtbar bleibt.
 */

.mhl-hero .mhl-nav,
.mhl-hero .mhl-header-inner,
.mhl-hero .mhl-site-header {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18),
            rgba(255,255,255,0.08)
        ) !important;

    border: 1px solid rgba(255,255,255,0.34) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 14px 40px rgba(0,35,55,0.18) !important;

    -webkit-backdrop-filter:
        blur(24px) saturate(145%) !important;

    backdrop-filter:
        blur(24px) saturate(145%) !important;
}


/* ============================================================
   HERO GLASKASTEN
   ============================================================ */

.mhl-hero__glass {
    position: relative;

    /*
     * Bewusst deutlich transparenter.
     * Das Foto soll durch das Glas sichtbar bleiben.
     */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.22) 0%,
            rgba(255,255,255,0.13) 48%,
            rgba(190,235,240,0.12) 100%
        ) !important;

    border: 1px solid rgba(255,255,255,0.48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(255,255,255,0.12),
        0 25px 70px rgba(0,35,55,0.20),
        0 0 0 1px rgba(255,255,255,0.06) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(150%) contrast(105%) !important;

    backdrop-filter:
        blur(22px) saturate(150%) contrast(105%) !important;

    overflow: visible !important;
}

/* Glas-Lichtkante */

.mhl-hero__glass::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18),
            transparent 34%,
            transparent 68%,
            rgba(255,255,255,0.08)
        );

    opacity: 0.9;
}

/* weiche Glasreflexion */

.mhl-hero__glass::after {
    content: "";
    position: absolute;

    width: 55%;
    height: 45%;

    top: -25%;
    left: -12%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0) 70%
        );

    transform: rotate(-12deg);
    pointer-events: none;
}


/* ============================================================
   BRANDING
   ============================================================ */

.mhl-brand-meer {
    color: #0069a8 !important;

    text-shadow:
        0 2px 5px rgba(0,25,50,0.32);
}

.mhl-brand-heimat {
    color: #ffffff !important;

    text-shadow:
        0 2px 5px rgba(0,25,50,0.25);
}

.mhl-brand-liebe {
    color: #e30620 !important;

    text-shadow:
        0 2px 5px rgba(70,0,0,0.30);
}

.mhl-brand-heart {
    color: #e30620 !important;

    display: inline-block;

    text-shadow:
        0 3px 7px rgba(90,0,0,0.30);
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1181px) {

    .mhl-hero {
        min-height: 860px;
    }

    .mhl-hero__background {
        background-size: cover !important;
        background-position: center center !important;
    }

    .mhl-hero__glass {
        width: min(900px, 70vw) !important;
        max-width: 900px !important;

        margin-left: 0 !important;

        padding:
            clamp(42px, 4vw, 68px)
            clamp(48px, 5vw, 78px) !important;

        border-radius: 30px !important;
    }

    .mhl-hero__title {
        max-width: 100% !important;
    }
}


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

@media (min-width: 768px) and (max-width: 1180px) {

    .mhl-hero {
        min-height: 760px;
    }

    .mhl-hero__background {
        background-size: cover !important;
        background-position: 58% center !important;
    }

    .mhl-hero__glass {
        width: calc(100% - 64px) !important;
        max-width: 820px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 44px !important;

        border-radius: 28px !important;
    }
}


/* ============================================================
   MOBILE — WICHTIG
   ============================================================ */

@media (max-width: 767px) {

    .mhl-hero {
        width: 100% !important;

        /*
         * Höhe über Viewport statt feste Desktop-Höhe.
         */
        min-height: 760px !important;
        height: auto !important;

        overflow: hidden !important;
    }

    /*
     * Hintergrund auf Mobile separat positionieren.
     *
     * cover = kein leerer Rand.
     * 52% = Motiv bleibt mittig.
     */
    .mhl-hero__background {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-size: cover !important;
        background-position: 52% center !important;

        transform: none !important;
    }

    /*
     * Etwas stärkere maritime Farbstimmung,
     * aber Foto bleibt sichtbar.
     */
    .mhl-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(2,47,73,0.20) 0%,
                rgba(2,70,92,0.04) 45%,
                rgba(2,39,58,0.26) 100%
            ) !important;
    }


    /* ---------- HEADER MOBILE ---------- */

    .mhl-hero .mhl-nav,
    .mhl-hero .mhl-header-inner,
    .mhl-hero .mhl-site-header {

        width: calc(100% - 28px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        border-radius: 22px !important;

        padding: 10px 14px !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.20),
                rgba(255,255,255,0.09)
            ) !important;

        border-color:
            rgba(255,255,255,0.38) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(145%) !important;

        backdrop-filter:
            blur(20px) saturate(145%) !important;
    }


    /* ---------- HERO GLAS MOBILE ---------- */

    .mhl-hero__glass {

        /*
         * Fast volle Breite innerhalb des mobilen Screens.
         */
        width: calc(100% - 28px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-top: 30px !important;

        padding:
            30px 24px 32px !important;

        border-radius: 28px !important;

        /*
         * Das ist der eigentliche "Glaskasten":
         * deutlich transparenter als die bisherige Version.
         */
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.25) 0%,
                rgba(255,255,255,0.14) 45%,
                rgba(200,235,240,0.12) 100%
            ) !important;

        border:
            1px solid rgba(255,255,255,0.52) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.45),
            inset 0 -1px 0 rgba(255,255,255,0.14),
            0 20px 55px rgba(0,35,55,0.22) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(155%) !important;

        backdrop-filter:
            blur(20px) saturate(155%) !important;
    }


    /* ---------- TEXT MOBILE ---------- */

    .mhl-hero__eyebrow {
        font-size: 0.68rem !important;
        letter-spacing: 0.22em !important;
    }

    .mhl-hero__title {
        width: 100% !important;
        max-width: 100% !important;

        font-size:
            clamp(2.35rem, 10vw, 3.6rem) !important;

        line-height: 0.98 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /*
     * Branding darf niemals rechts aus dem Glaskasten laufen.
     */
    .mhl-brand {
        max-width: 100% !important;
        white-space: normal !important;
    }

    .mhl-brand-meer,
    .mhl-brand-heimat,
    .mhl-brand-liebe,
    .mhl-brand-heart {
        white-space: nowrap !important;
    }


    .mhl-hero__description {
        max-width: 100% !important;

        font-size: 0.98rem !important;
        line-height: 1.55 !important;

        margin-top: 20px !important;
    }


    /* ---------- BUTTONS ---------- */

    .mhl-hero__actions {
        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

        width: 100% !important;

        align-items: stretch !important;
    }

    .mhl-hero__actions a {
        width: 100% !important;
        max-width: none !important;

        justify-content: center !important;

        min-height: 50px !important;
    }


    /* ---------- SCROLL CUE ---------- */

    .mhl-hero__scroll {
        margin-top: 24px !important;
    }
}


/* ============================================================
   SEHR KLEINE HANDYS
   ============================================================ */

@media (max-width: 420px) {

    .mhl-hero {
        min-height: 720px !important;
    }

    .mhl-hero__background {
        background-position: 50% center !important;
    }

    .mhl-hero__glass {
        width: calc(100% - 20px) !important;

        padding:
            26px 20px 28px !important;

        border-radius: 24px !important;
    }

    .mhl-hero__title {
        font-size:
            clamp(2.15rem, 11vw, 3rem) !important;
    }

    .mhl-brand-meer,
    .mhl-brand-heimat,
    .mhl-brand-liebe {
        font-size: 0.90em !important;
    }
}


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

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

    .mhl-hero__background {
        transform: none !important;
    }
}



/* ============================================================
   MHL HERO FINAL OVERRIDE
   Hintergrundbild + echtes transparentes Glass
   ============================================================ */

/* HERO STACKING */
.mhl-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #073f5b !important;
}


/* ============================================================
   1. ECHTES HINTERGRUNDBILD
   ============================================================ */

.mhl-hero__background {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background-image:
        url("/wp-content/themes/meerheimatliebe/assets/images/hero/home-hero.webp") !important;

    background-repeat: no-repeat !important;

    /*
     * Desktop:
     * Das Foto füllt den gesamten Hero.
     */
    background-size: cover !important;
    background-position: center center !important;

    background-color: #073f5b !important;

    transform: none !important;
}


/* ============================================================
   2. SANFTE MARITIME FARBEBENE
   ============================================================ */

.mhl-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            115deg,
            rgba(2, 48, 76, 0.18) 0%,
            rgba(4, 92, 119, 0.04) 45%,
            rgba(0, 112, 108, 0.10) 100%
        ) !important;
}


/* ============================================================
   3. UNTERER VERLAUF
   ============================================================ */

.mhl-hero::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 28% !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            to top,
            rgba(2, 40, 60, 0.28),
            rgba(2, 40, 60, 0)
        ) !important;
}


/* ============================================================
   4. HEADER ÜBER DEM BILD
   ============================================================ */

.mhl-hero > * {
    position: relative;
}


/* vorhandene Navigation nach vorne */

.mhl-hero .mhl-nav,
.mhl-hero .mhl-header,
.mhl-hero .mhl-header-inner,
.mhl-hero .mhl-site-header,
.mhl-hero nav {
    z-index: 10 !important;
}


/* ============================================================
   5. HERO CONTENT
   ============================================================ */

.mhl-hero__content {
    position: relative !important;

    z-index: 5 !important;
}


/* ============================================================
   6. GLASKASTEN — DEUTLICH TRANSPARENTER
   ============================================================ */

.mhl-hero__glass {

    position: relative !important;

    z-index: 5 !important;

    /*
     * Wichtig:
     * NICHT blau einfärben.
     * Das Foto soll sichtbar durchscheinen.
     */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.09) 45%,
            rgba(210,240,245,0.07) 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.52) !important;

    /*
     * Sehr dezenter Schatten,
     * damit der Kasten nicht wie ein blaues Panel wirkt.
     */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.48),
        inset 0 -1px 0 rgba(255,255,255,0.10),
        0 24px 65px rgba(0,25,45,0.20) !important;

    /*
     * Das eigentliche Milchglas.
     */
    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%)
        brightness(108%) !important;

    backdrop-filter:
        blur(18px)
        saturate(135%)
        brightness(108%) !important;

    overflow: visible !important;
}


/* ============================================================
   7. GLAS-REFLEXION
   ============================================================ */

.mhl-hero__glass::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    border-radius: inherit !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.04) 32%,
            rgba(255,255,255,0) 62%,
            rgba(255,255,255,0.07) 100%
        ) !important;

    opacity: 1 !important;
}


/* Lichtreflex oben links */

.mhl-hero__glass::after {

    content: "" !important;

    position: absolute !important;

    top: -18% !important;
    left: -10% !important;

    width: 58% !important;
    height: 42% !important;

    border-radius: 50% !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.04) 38%,
            rgba(255,255,255,0) 72%
        ) !important;

    transform: rotate(-10deg) !important;
}


/* ============================================================
   8. BRANDING
   ============================================================ */

.mhl-brand-meer {
    color: #0069a8 !important;

    text-shadow:
        0 2px 4px rgba(0,35,70,0.38) !important;
}

.mhl-brand-heimat {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(0,35,70,0.25) !important;
}

.mhl-brand-liebe {
    color: #e30620 !important;

    text-shadow:
        0 2px 5px rgba(80,0,0,0.32) !important;
}

.mhl-brand-heart {
    color: #e30620 !important;

    text-shadow:
        0 2px 5px rgba(80,0,0,0.30) !important;
}


/* ============================================================
   9. DESKTOP — KOMPAKTER KASTEN
   ============================================================ */

@media (min-width: 1181px) {

    .mhl-hero {
        min-height: 860px !important;
    }

    .mhl-hero__background {
        background-size: cover !important;
        background-position: center center !important;
    }

    .mhl-hero__glass {
        width: min(920px, 72vw) !important;
        max-width: 920px !important;

        padding:
            48px 58px 50px !important;

        border-radius: 30px !important;
    }
}


/* ============================================================
   10. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1180px) {

    .mhl-hero {
        min-height: 780px !important;
    }

    .mhl-hero__background {
        background-size: cover !important;
        background-position: 55% center !important;
    }

    .mhl-hero__glass {
        width: calc(100% - 70px) !important;
        max-width: 900px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 44px !important;

        border-radius: 28px !important;
    }
}


/* ============================================================
   11. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .mhl-hero {
        width: 100% !important;

        min-height: 760px !important;

        height: auto !important;

        overflow: hidden !important;
    }


    /*
     * Mobil wird das Bild nicht mehr von einem negativen
     * z-index verschluckt.
     */
    .mhl-hero__background {

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 0 !important;

        background-image:
            url("/wp-content/themes/meerheimatliebe/assets/images/hero/home-hero.webp") !important;

        background-repeat: no-repeat !important;

        /*
         * Wichtig für Mobil:
         * Das Motiv wird nicht nach rechts gedrückt.
         */
        background-size: cover !important;

        background-position:
            center center !important;
    }


    /* mobile Farbüberlagerung */

    .mhl-hero::before {

        background:
            linear-gradient(
                180deg,
                rgba(3,45,70,0.12) 0%,
                rgba(3,70,90,0.02) 48%,
                rgba(2,42,60,0.22) 100%
            ) !important;
    }


    /* ========================================================
       MOBILER GLASKASTEN
       ======================================================== */

    .mhl-hero__glass {

        width:
            calc(100% - 28px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding:
            30px 23px 32px !important;

        border-radius:
            26px !important;

        /*
         * Noch transparenter als Desktop.
         */
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.17),
                rgba(255,255,255,0.08)
            ) !important;

        border:
            1px solid rgba(255,255,255,0.54) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(140%) !important;

        backdrop-filter:
            blur(18px)
            saturate(140%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.48),
            0 20px 55px rgba(0,25,45,0.20) !important;
    }


    /* ========================================================
       TEXT
       ======================================================== */

    .mhl-hero__title {

        width: 100% !important;

        max-width: 100% !important;

        font-size:
            clamp(2.35rem, 10vw, 3.5rem) !important;

        line-height:
            0.98 !important;

        overflow-wrap:
            normal !important;
    }


    .mhl-hero__description {

        max-width:
            100% !important;

        font-size:
            0.98rem !important;

        line-height:
            1.5 !important;
    }


    /* ========================================================
       BUTTONS
       ======================================================== */

    .mhl-hero__actions {

        display: flex !important;

        flex-direction: column !important;

        gap: 11px !important;

        width: 100% !important;
    }

    .mhl-hero__actions a {

        width: 100% !important;

        max-width: none !important;

        min-height: 48px !important;

        justify-content: center !important;
    }
}


/* ============================================================
   12. SEHR KLEINE GERÄTE
   ============================================================ */

@media (max-width: 420px) {

    .mhl-hero {
        min-height: 720px !important;
    }

    .mhl-hero__background {

        background-size: cover !important;

        /*
         * Lighthouse links halten, ohne dass das gesamte
         * Motiv aus dem sichtbaren Bereich verschwindet.
         */
        background-position:
            48% center !important;
    }

    .mhl-hero__glass {

        width:
            calc(100% - 20px) !important;

        padding:
            26px 20px 28px !important;

        border-radius:
            23px !important;
    }
}


/* ============================================================
   13. SICHERHEIT: ALTE NEGATIVE LAYER ÜBERSCHREIBEN
   ============================================================ */

.mhl-hero__background {
    z-index: 0 !important;
}

.mhl-hero__atmosphere {
    z-index: 2 !important;
}

.mhl-hero__content {
    z-index: 5 !important;
}

.mhl-hero__scroll {
    z-index: 6 !important;
}


/* ============================================================
   END
   ============================================================ */



/* ============================================================
   MHL HERO — CIRCLE / OVAL ENTFERNEN
   Das Glas bleibt, künstliche Reflexionsfläche wird deaktiviert.
   ============================================================ */

.mhl-hero__glass::after {
    content: none !important;
    display: none !important;
}

.mhl-hero__glass::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    border-radius: inherit !important;

    pointer-events: none !important;

    /*
     * Nur eine sehr dezente lineare Glasreflexion.
     * KEINE elliptische Fläche / KEIN Kreis.
     */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.035) 35%,
            rgba(255,255,255,0) 70%,
            rgba(255,255,255,0.045) 100%
        ) !important;

    opacity: 1 !important;
}


/* ============================================================
   GLAS NOCH NATÜRLICHER
   ============================================================ */

.mhl-hero__glass {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.13) 0%,
            rgba(255,255,255,0.075) 48%,
            rgba(220,245,248,0.06) 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.50) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 24px 65px rgba(0,25,45,0.18) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%) !important;

    backdrop-filter:
        blur(18px)
        saturate(135%) !important;
}


/* ============================================================
   MOBILE EBENFALLS OHNE KREIS
   ============================================================ */

@media (max-width: 767px) {

    .mhl-hero__glass::after {
        content: none !important;
        display: none !important;
    }

    .mhl-hero__glass::before {
        content: "" !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.11),
                rgba(255,255,255,0.025) 45%,
                rgba(255,255,255,0) 75%
            ) !important;
    }

    .mhl-hero__glass {
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.14),
                rgba(255,255,255,0.065)
            ) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(140%) !important;

        backdrop-filter:
            blur(18px)
            saturate(140%) !important;
    }
}



/* ============================================================
   MHL HERO — MOBILE FINAL
   Kompakter Glaskasten / responsive Schrift / keine Überläufe
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .mhl-hero {
        position: relative !important;

        min-height: 100svh !important;
        height: auto !important;

        padding:
            18px
            14px
            90px
            14px !important;

        overflow: hidden !important;
    }


    /* Hintergrundbild wirklich über die komplette Fläche */
    .mhl-hero__background {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-image: var(--mhl-hero-image) !important;
        background-size: cover !important;

        /*
         * Wichtig:
         * nicht zu stark hineinzoomen.
         */
        background-position: center center !important;

        background-repeat: no-repeat !important;

        transform: none !important;
    }


    /* --------------------------------------------------------
       HERO CONTENT
       -------------------------------------------------------- */

    .mhl-hero__content {
        position: relative !important;
        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            170px
            0
            20px !important;

        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }


    /* --------------------------------------------------------
       GLASKASTEN
       -------------------------------------------------------- */

    .mhl-hero__glass {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 auto !important;

        padding:
            30px
            24px
            28px !important;

        box-sizing: border-box !important;

        border-radius: 30px !important;

        /*
         * Echtes transparentes Glas.
         * Das Hintergrundbild muss deutlich sichtbar bleiben.
         */
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.16) 0%,
                rgba(255,255,255,0.075) 48%,
                rgba(220,245,248,0.055) 100%
            ) !important;

        border:
            1px solid rgba(255,255,255,0.52) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.48),
            inset 0 -1px 0 rgba(255,255,255,0.10),
            0 18px 45px rgba(0,25,45,0.20) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(135%) !important;

        backdrop-filter:
            blur(18px)
            saturate(135%) !important;

        overflow: hidden !important;
    }


    /* Keine dekorativen Kreise */
    .mhl-hero__glass::after {
        content: none !important;
        display: none !important;
    }


    /* Dezente lineare Glasreflexion */
    .mhl-hero__glass::before {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        border-radius: inherit !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.12) 0%,
                rgba(255,255,255,0.025) 42%,
                rgba(255,255,255,0) 78%
            ) !important;

        opacity: 1 !important;
    }


    /* Inhalt über der Glasreflexion */
    .mhl-hero__glass > * {
        position: relative !important;
        z-index: 2 !important;
    }


    /* --------------------------------------------------------
       EYEBROW
       -------------------------------------------------------- */

    .mhl-hero__eyebrow {
        display: block !important;

        margin-bottom: 18px !important;

        font-size: 0.70rem !important;
        line-height: 1.3 !important;

        letter-spacing: 0.22em !important;

        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
       WILLKOMMEN BEI
       -------------------------------------------------------- */

    .mhl-hero__title {
        margin: 0 !important;

        font-size:
            clamp(2.45rem, 11.5vw, 4rem) !important;

        line-height: 0.92 !important;

        letter-spacing: -0.045em !important;

        max-width: 100% !important;

        overflow: visible !important;

        text-wrap: balance !important;
    }


    /* --------------------------------------------------------
       MEER HEIMAT LIEBE
       -------------------------------------------------------- */

    /*
     * Die drei farbigen Spans bleiben erhalten.
     * Auf Mobil werden sie als EIN zusammenhängender Schriftzug
     * behandelt, damit nichts rechts aus dem Glas läuft.
     */

    .mhl-brand-meer,
    .mhl-brand-heimat,
    .mhl-brand-liebe,
    .mhl-brand-heart {

        display: inline !important;

        white-space: nowrap !important;

        line-height: 0.95 !important;
    }


    .mhl-brand-meer,
    .mhl-brand-heimat,
    .mhl-brand-liebe {

        font-size:
            clamp(2.05rem, 9.2vw, 3.5rem) !important;

        letter-spacing: -0.055em !important;
    }


    /*
     * Der komplette Schriftzug darf nicht über den Rand laufen.
     */
    .mhl-hero__brand,
    .mhl-hero__title-brand,
    .mhl-brand {

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden !important;

        white-space: nowrap !important;
    }


    /* Rotes Herz */
    .mhl-brand-heart {

        display: inline-block !important;

        margin-left: 5px !important;

        font-size:
            clamp(1.65rem, 7vw, 2.8rem) !important;

        color: #e31b2f !important;

        vertical-align: middle !important;

        transform: translateY(-2px) !important;
    }


    /* --------------------------------------------------------
       BESCHREIBUNG
       -------------------------------------------------------- */

    .mhl-hero__description {
        margin:
            22px
            0
            24px !important;

        max-width: 100% !important;

        font-size:
            clamp(1rem, 4.3vw, 1.2rem) !important;

        line-height: 1.5 !important;

        overflow-wrap: normal !important;
    }


    /* --------------------------------------------------------
       BUTTONS
       -------------------------------------------------------- */

    .mhl-hero__actions {

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

        width: 100% !important;

        margin: 0 !important;

        align-items: stretch !important;
    }


    .mhl-hero__actions a {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        min-height: 54px !important;

        padding:
            13px
            18px !important;

        box-sizing: border-box !important;

        border-radius: 999px !important;

        font-size:
            0.95rem !important;

        line-height: 1.2 !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* --------------------------------------------------------
       SCROLL-HINWEIS
       -------------------------------------------------------- */

    .mhl-hero__scroll {

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        margin:
            8px
            auto
            0 !important;

        z-index: 5 !important;
    }


    /* --------------------------------------------------------
       KLEINE TELEFONE
       -------------------------------------------------------- */

    @media (max-width: 390px) {

        .mhl-hero {
            padding:
                12px
                10px
                80px
                10px !important;
        }

        .mhl-hero__content {
            padding-top: 150px !important;
        }

        .mhl-hero__glass {
            padding:
                26px
                20px
                24px !important;

            border-radius: 26px !important;
        }

        .mhl-hero__title {
            font-size:
                clamp(2.25rem, 11vw, 3.2rem) !important;
        }

        .mhl-brand-meer,
        .mhl-brand-heimat,
        .mhl-brand-liebe {
            font-size:
                clamp(1.78rem, 8.4vw, 3rem) !important;
        }

        .mhl-hero__description {
            font-size: 0.98rem !important;
            line-height: 1.48 !important;
        }

        .mhl-hero__actions a {
            min-height: 50px !important;
            font-size: 0.9rem !important;
        }
    }
}


/* ============================================================
   SEHR KLEINE / HOHE MOBILE DISPLAYS
   ============================================================ */

@media (max-width: 767px) and (max-height: 700px) {

    .mhl-hero__content {
        padding-top: 135px !important;
    }

    .mhl-hero__glass {
        padding-top: 24px !important;
        padding-bottom: 22px !important;
    }

    .mhl-hero__eyebrow {
        margin-bottom: 14px !important;
    }

    .mhl-hero__description {
        margin-top: 18px !important;
        margin-bottom: 18px !important;
    }

    .mhl-hero__actions {
        gap: 9px !important;
    }

    .mhl-hero__actions a {
        min-height: 46px !important;
    }
}