@import url("footer-new.css");

/* =========================================================
   MOST WANTED – HARMONIC CORE
   Referenz: finaler Look von tattoo-berlin.php
========================================================= */

:root{
    --mw-h-seam:#172229;
    --mw-h-dark:#223039;
    --mw-h-dark-2:#33434c;
    --mw-h-mid:#87959d;
    --mw-h-stone:#c8d1d5;
    --mw-h-soft:#dce1e3;
    --mw-h-soft-2:#e4e7e8;
    --mw-h-ink:#172129;
    --mw-h-muted:#5e6c74;
    --mw-h-blue:#00aeef;
}

body.mw-new-home{
    background:var(--mw-h-seam);
}

/* ---------------------------------------------------------
   UNIVERSALER HERO – Bild bleibt erhalten
--------------------------------------------------------- */
body.mw-new-home .mw-subpage-hero{
    position:relative;
    display:flex;
    min-height:clamp(540px,72vh,760px);
    align-items:center;
    overflow:hidden;
    isolation:isolate;

    /* Gemeinsames Most-Wanted-Herobild.
       Pfad ist relativ zu /css/mw-harmonic-core.css. */
    background-image:
        linear-gradient(
            90deg,
            rgba(7,13,17,.82) 0%,
            rgba(7,13,17,.65) 38%,
            rgba(7,13,17,.26) 68%,
            rgba(7,13,17,.18) 100%
        ),
        url("../images/mw-subpage-background.jpg") !important;

    background-position:
        center center,
        center center !important;

    background-size:
        auto,
        cover !important;

    background-repeat:
        no-repeat,
        no-repeat !important;
}

body.mw-new-home .mw-subpage-hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.16)),
        radial-gradient(circle at 72% 38%,rgba(0,174,239,.10),transparent 34%) !important;
}

body.mw-new-home .mw-subpage-hero-vignette{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    box-shadow:inset 0 0 110px rgba(0,0,0,.42) !important;
}

body.mw-new-home .mw-subpage-hero h1{color:#fff !important;}
body.mw-new-home .mw-subpage-hero h2,
body.mw-new-home .mw-subpage-hero-kicker{color:#00aeef !important;}
body.mw-new-home .mw-subpage-hero p{color:rgba(255,255,255,.84) !important;}

body.mw-new-home .mw-subpage-hero-button{
    background:#00aeef !important;
    border-color:#00aeef !important;
    color:#fff !important;
    box-shadow:0 10px 30px rgba(0,174,239,.18);
    transition:.22s ease;
}
body.mw-new-home .mw-subpage-hero-button:hover,
body.mw-new-home .mw-subpage-hero-button:focus-visible{
    background:#e5e8e9 !important;
    border-color:#e5e8e9 !important;
    color:#111820 !important;
    transform:translateY(-2px);
}

/* ---------------------------------------------------------
   HARMONISCHE SECTION-FLÄCHEN
   Jede Seite setzt nur --mw-flow-from / --mw-flow-bg.
--------------------------------------------------------- */
body.mw-new-home main#seiteninhalt section.mw-h-flow{
    position:relative;
    isolation:isolate;
    border-top:0 !important;
    border-bottom:0 !important;
    background:var(--mw-flow-bg) !important;
    color:var(--mw-flow-text);
}

/* Der Verlauf sitzt ausschließlich am oberen Rand einer Section.
   Der eigentliche Content liegt bereits auf der Zielfarbe. */
body.mw-new-home main#seiteninhalt section.mw-h-flow::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:-1px;
    height:clamp(92px,8vw,150px);
    pointer-events:none;
    background:linear-gradient(
        180deg,
        var(--mw-flow-from) 0%,
        color-mix(in srgb,var(--mw-flow-from) 55%,var(--mw-flow-bg)) 38%,
        var(--mw-flow-bg) 100%
    ) !important;
}

/* LIGHT: kein Reinweiß, sondern Rauch-/Slate-Grau */
body.mw-new-home main#seiteninhalt section.mw-h-light{
    --mw-flow-text:#172129;
}
body.mw-new-home main#seiteninhalt section.mw-h-light h1,
body.mw-new-home main#seiteninhalt section.mw-h-light h2,
body.mw-new-home main#seiteninhalt section.mw-h-light > div > h3{
    color:#172129 !important;
}
body.mw-new-home main#seiteninhalt section.mw-h-light > div > p,
body.mw-new-home main#seiteninhalt section.mw-h-light > div > div > p{
    color:#5d6b73;
}

/* Übliche Karten auf hellen Sections: zurückhaltend einbetten. */
body.mw-new-home main#seiteninhalt section.mw-h-light [class*="card"]:not([class*="image"]):not([class*="gallery"]),
body.mw-new-home main#seiteninhalt section.mw-h-light [class*="panel"]:not([class*="image"]):not([class*="gallery"]),
body.mw-new-home main#seiteninhalt section.mw-h-light [class*="box"]:not([class*="image"]):not([class*="gallery"]){
    border-color:rgba(30,48,58,.13);
}

/* DARK: kein Schwarz, sondern tiefes Blaugrau/Graphit */
body.mw-new-home main#seiteninhalt section.mw-h-dark{
    --mw-flow-text:#edf1f2;
}
body.mw-new-home main#seiteninhalt section.mw-h-dark h1,
body.mw-new-home main#seiteninhalt section.mw-h-dark h2,
body.mw-new-home main#seiteninhalt section.mw-h-dark h3{
    color:#edf1f2 !important;
}
body.mw-new-home main#seiteninhalt section.mw-h-dark p,
body.mw-new-home main#seiteninhalt section.mw-h-dark li{
    color:#bdc8cd;
}

/* Buttons dürfen weder weiß-auf-weiß noch schwarz-auf-schwarz verschwinden. */
body.mw-new-home main#seiteninhalt .mw-h-light a[class*="button"]:not([class*="primary"]),
body.mw-new-home main#seiteninhalt .mw-h-light a[class*="btn"]:not([class*="primary"]){
    border-color:#2c3a43 !important;
    color:#172129 !important;
}
body.mw-new-home main#seiteninhalt .mw-h-light a[class*="button"]:not([class*="primary"]):hover,
body.mw-new-home main#seiteninhalt .mw-h-light a[class*="btn"]:not([class*="primary"]):hover{
    background:#223039 !important;
    border-color:#223039 !important;
    color:#f1f4f5 !important;
}

body.mw-new-home main#seiteninhalt .mw-h-dark a[class*="button"]:not([class*="primary"]),
body.mw-new-home main#seiteninhalt .mw-h-dark a[class*="btn"]:not([class*="primary"]){
    border-color:rgba(226,232,235,.32) !important;
    color:#eef2f3 !important;
}

/* Footer-Seam */
body.mw-new-home main#seiteninhalt section.mw-h-final{
    margin-bottom:0 !important;
    border-bottom:0 !important;
}

/* Focus */
body.mw-new-home a:focus-visible,
body.mw-new-home button:focus-visible{
    outline:2px solid #00aeef;
    outline-offset:3px;
}

/* MOBILE HERO */
@media(max-width:768px){
    body.mw-new-home .mw-subpage-hero{
        min-height:650px;
        background:
            linear-gradient(
                180deg,
                rgba(7,13,17,.38) 0%,
                rgba(7,13,17,.58) 52%,
                rgba(7,13,17,.82) 100%
            ),
            url("../images/mw-subpage-background.jpg")
            center center / cover no-repeat !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(7,13,17,.38) 0%,
                rgba(7,13,17,.58) 52%,
                rgba(7,13,17,.82) 100%
            ),
            url("../images/mw-subpage-background.jpg") !important;

        background-position:
            center center,
            center center !important;

        background-size:
            auto,
            cover !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }

    body.mw-new-home .mw-subpage-hero-overlay{
        background:
            linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.20)),
            radial-gradient(circle at 65% 25%,rgba(0,174,239,.10),transparent 38%) !important;
    }

    body.mw-new-home .mw-subpage-hero-vignette{
        box-shadow:inset 0 0 65px rgba(0,0,0,.32) !important;
    }

    body.mw-new-home main#seiteninhalt section.mw-h-flow::before{
        height:100px;
    }
}