
/* Hide the old per-page custom headers once the global header plugin is active. */
body:has(#mt-global-header) #mt-home-v2 > .mt-header,
body:has(#mt-global-header) #mt-motors-v2 > .mt-header,
body:has(#mt-global-header) #mt-performance-v2 > .mt-header,
body:has(#mt-global-header) #mt-about-v2 > .mt-header,
body:has(#mt-global-header) #mt-contact-v2 > .mt-header,
body:has(#mt-global-header) #mt-automobile > .mt-header {
    display:none !important;
}

html.mtgh-lock,
body.mtgh-lock {
    overflow:hidden !important;
    overscroll-behavior:none !important;
}

#mt-global-header,
#mt-global-header * {
    box-sizing:border-box;
}

#mt-global-header {
    --mt-header-accent:#4098ff;
    --mt-header-height:74px;
    position:relative;
    z-index:999990;
    font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
}

#mt-global-header .mtgh-bar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--mt-header-height);
    z-index:999995;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(3,5,7,.72),rgba(3,5,7,.22) 74%,transparent);
    transition:
        transform .42s cubic-bezier(.22,.78,.2,1),
        height .34s ease,
        top .34s ease,
        left .34s ease,
        width .34s ease,
        border-radius .34s ease,
        background .34s ease,
        box-shadow .34s ease,
        border-color .34s ease;
}

#mt-global-header .mtgh-shell {
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:0 4vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

#mt-global-header .mtgh-logo {
    position:relative;
    z-index:999999;
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

#mt-global-header .mtgh-logo img {
    width:105px;
    height:auto;
    display:block;
    transition:width .32s ease,transform .32s ease;
}

#mt-global-header .mtgh-nav {
    display:flex;
    align-items:center;
    gap:clamp(18px,2vw,36px);
    margin-left:auto;
}

#mt-global-header .mtgh-link {
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    color:rgba(255,255,255,.78);
    text-decoration:none;
    font-size:9px;
    font-weight:600;
    letter-spacing:1.45px;
    text-transform:uppercase;
    transition:color .25s ease,transform .25s ease;
}

#mt-global-header .mtgh-link::after {
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:100%;
    height:1px;
    background:var(--mt-header-accent);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .33s cubic-bezier(.22,.78,.2,1);
}

#mt-global-header .mtgh-link:hover,
#mt-global-header .mtgh-link.is-active {
    color:#fff;
}

#mt-global-header .mtgh-link:hover::after,
#mt-global-header .mtgh-link.is-active::after {
    transform:scaleX(1);
}

#mt-global-header .mtgh-link:hover {
    transform:translateY(-1px);
}

#mt-global-header .mtgh-nav-index {
    color:rgba(255,255,255,.30);
    font-size:5px;
    letter-spacing:.8px;
    transform:translateY(-1px);
}

#mt-global-header .mtgh-contact {
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    min-height:38px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    text-decoration:none;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    overflow:hidden;
    transition:border-color .28s ease,background .28s ease,transform .28s ease;
}

#mt-global-header .mtgh-contact::before {
    content:"";
    position:absolute;
    inset:0;
    background:var(--mt-header-accent);
    transform:translateY(102%);
    transition:transform .3s cubic-bezier(.22,.78,.2,1);
    z-index:-1;
}

#mt-global-header .mtgh-contact:hover,
#mt-global-header .mtgh-contact.is-active {
    border-color:var(--mt-header-accent);
    transform:translateY(-1px);
}

#mt-global-header .mtgh-contact:hover::before,
#mt-global-header .mtgh-contact.is-active::before {
    transform:translateY(0);
}

#mt-global-header .mtgh-arrow {
    font-size:13px;
    font-weight:400;
    transition:transform .28s ease;
}

#mt-global-header .mtgh-contact:hover .mtgh-arrow {
    transform:translate(2px,-2px);
}

#mt-global-header .mtgh-menu {
    position:relative;
    z-index:999999;
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(8,11,14,.28);
    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

#mt-global-header .mtgh-menu span {
    display:block;
    width:20px;
    height:1px;
    margin:5px auto;
    background:#fff;
    transition:transform .3s ease,opacity .3s ease;
}

#mt-global-header .mtgh-progress {
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    overflow:hidden;
    pointer-events:none;
}

#mt-global-header .mtgh-progress-fill {
    width:100%;
    height:100%;
    background:var(--mt-header-accent);
    transform:scaleX(0);
    transform-origin:left center;
    will-change:transform;
}

/* Floating state */
#mt-global-header.is-scrolled .mtgh-bar {
    position:fixed;
    top:10px;
    left:1.15vw;
    width:97.7vw;
    height:62px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(7,10,13,.90);
    box-shadow:0 16px 50px rgba(0,0,0,.26);
}

#mt-global-header.is-glass.is-scrolled .mtgh-bar {
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
}

#mt-global-header.is-scrolled .mtgh-logo img {
    width:92px;
}

#mt-global-header.is-hidden .mtgh-bar {
    transform:translateY(calc(-100% - 14px));
    opacity:1;
}

#mt-global-header.menu-open .mtgh-bar {
    transform:none !important;
    background:rgba(7,10,13,.98);
    border-color:rgba(255,255,255,.14);
}

/* Mobile overlay */
#mt-global-header .mtgh-mobile {
    position:fixed;
    z-index:999992;
    inset:0;
    display:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:#070a0d;
    transition:opacity .32s ease,visibility .32s ease;
}

#mt-global-header .mtgh-mobile-bg {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 80% 15%,rgba(64,152,255,.13),transparent 30%),
        linear-gradient(180deg,#0a0e12 0%,#070a0d 100%);
}

#mt-global-header .mtgh-mobile-bg::after {
    content:"";
    position:absolute;
    inset:0;
    opacity:.06;
    background:
        linear-gradient(to right,transparent 49.9%,rgba(255,255,255,.22) 50%,transparent 50.1%),
        linear-gradient(to bottom,transparent 49.9%,rgba(255,255,255,.14) 50%,transparent 50.1%);
}

#mt-global-header .mtgh-mobile-inner {
    position:relative;
    z-index:2;
    width:100%;
    min-height:100%;
    padding:105px 20px 26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#mt-global-header .mtgh-mobile-eyebrow {
    color:rgba(255,255,255,.36);
    font-size:6px;
    font-weight:700;
    letter-spacing:2.4px;
}

#mt-global-header .mtgh-mobile-nav {
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(255,255,255,.13);
}

#mt-global-header .mtgh-mobile-link {
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    min-height:72px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;
    text-decoration:none;
    opacity:0;
    transform:translateY(15px);
}

#mt-global-header.menu-open .mtgh-mobile-link {
    animation:mtghItemIn .46s cubic-bezier(.22,.78,.2,1) forwards;
}

#mt-global-header.menu-open .mtgh-mobile-link:nth-child(1){animation-delay:.05s}
#mt-global-header.menu-open .mtgh-mobile-link:nth-child(2){animation-delay:.09s}
#mt-global-header.menu-open .mtgh-mobile-link:nth-child(3){animation-delay:.13s}
#mt-global-header.menu-open .mtgh-mobile-link:nth-child(4){animation-delay:.17s}
#mt-global-header.menu-open .mtgh-mobile-link:nth-child(5){animation-delay:.21s}

@keyframes mtghItemIn {
    to {opacity:1;transform:translateY(0)}
}

#mt-global-header .mtgh-mobile-index {
    color:var(--mt-header-accent);
    font-size:7px;
    font-weight:700;
    letter-spacing:1px;
}

#mt-global-header .mtgh-mobile-label {
    color:#fff;
    font-size:clamp(31px,9.5vw,44px);
    line-height:.95;
    font-weight:500;
    letter-spacing:-1.7px;
}

#mt-global-header .mtgh-mobile-arrow {
    color:rgba(255,255,255,.35);
    font-size:20px;
}

#mt-global-header .mtgh-mobile-link.is-active .mtgh-mobile-label {
    color:var(--mt-header-accent);
}

#mt-global-header .mtgh-mobile-contact .mtgh-mobile-label {
    color:#fff;
}

#mt-global-header .mtgh-mobile-foot {
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:rgba(255,255,255,.25);
    font-size:5px;
    font-weight:700;
    letter-spacing:1.3px;
}

/* Tablet */
@media (max-width:1050px) {
    #mt-global-header .mtgh-shell {
        padding:0 28px;
    }

    #mt-global-header .mtgh-nav {
        gap:15px;
    }

    #mt-global-header .mtgh-link {
        font-size:8px;
    }

    #mt-global-header .mtgh-contact {
        padding:0 12px;
    }
}

/* Mobile */
@media (max-width:760px) {
    #mt-global-header {
        --mt-header-height:62px;
    }

    #mt-global-header .mtgh-bar {
        height:62px;
    }

    #mt-global-header .mtgh-shell {
        padding:0 18px;
    }

    #mt-global-header .mtgh-logo img {
        width:82px;
    }

    #mt-global-header .mtgh-nav {
        display:none;
    }

    #mt-global-header .mtgh-menu {
        display:block;
    }

    #mt-global-header .mtgh-mobile {
        display:block;
    }

    #mt-global-header.menu-open .mtgh-mobile {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    #mt-global-header .mtgh-menu.is-open span:nth-child(1) {
        transform:translateY(6px) rotate(45deg);
    }

    #mt-global-header .mtgh-menu.is-open span:nth-child(2) {
        opacity:0;
    }

    #mt-global-header .mtgh-menu.is-open span:nth-child(3) {
        transform:translateY(-6px) rotate(-45deg);
    }

    #mt-global-header.is-scrolled .mtgh-bar {
        top:7px;
        left:10px;
        width:calc(100% - 20px);
        height:56px;
        border-radius:10px;
    }

    #mt-global-header.is-scrolled .mtgh-logo img {
        width:76px;
    }

    #mt-global-header.is-scrolled .mtgh-menu {
        width:40px;
        height:40px;
    }
}





/* V1.4 — Original cleaner header design + current smooth behavior */
#mt-global-header .mtgh-bar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:74px;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:linear-gradient(
        180deg,
        rgba(3,5,7,.78),
        rgba(3,5,7,.24) 72%,
        transparent
    );
    box-shadow:none;
    will-change:transform;
    transition:
        transform .46s cubic-bezier(.22,.78,.2,1),
        height .34s ease,
        background .34s ease,
        backdrop-filter .34s ease,
        border-color .34s ease;
}

/* Ganz oben: bündig, ruhig und vollständig sichtbar */
#mt-global-header.is-at-top .mtgh-bar {
    transform:translateY(0) !important;
    height:74px !important;
    background:linear-gradient(
        180deg,
        rgba(3,5,7,.78),
        rgba(3,5,7,.24) 72%,
        transparent
    ) !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
}

/* Beim Scrollen: gleicher Aufbau, nur kompakter/dunkler */
#mt-global-header.is-scrolled:not(.is-at-top) .mtgh-bar {
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:62px !important;
    border-radius:0 !important;
    background:rgba(7,10,13,.93) !important;
    border-bottom:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
}

/* Glass bleibt dezent, ohne Floating-Card */
#mt-global-header.is-glass.is-scrolled:not(.is-at-top) .mtgh-bar {
    backdrop-filter:blur(16px) saturate(1.08);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);
}

/* Runterscrollen -> sauber weg */
#mt-global-header.is-hidden:not(.is-at-top) .mtgh-bar {
    transform:translateY(calc(-100% - 8px));
}

/* Hochscrollen -> weich zurück */
#mt-global-header:not(.is-hidden) .mtgh-bar {
    transform:translateY(0);
}

/* Logo bleibt wie im ursprünglichen Design */
#mt-global-header.is-scrolled .mtgh-logo img {
    width:92px;
}

/* Kein Karten-/Pill-Gefühl beim Kontaktbutton: etwas reduzierter */
#mt-global-header .mtgh-contact {
    border-radius:0;
}

@media(max-width:760px){
    #mt-global-header .mtgh-bar,
    #mt-global-header.is-at-top .mtgh-bar{
        height:62px !important;
    }

    #mt-global-header.is-scrolled:not(.is-at-top) .mtgh-bar{
        height:58px !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        border-radius:0 !important;
    }

    #mt-global-header.is-hidden:not(.is-at-top) .mtgh-bar{
        transform:translateY(calc(-100% - 6px));
    }
}



/* V1.5 — Reliable hero/top behavior */
#mt-global-header.is-at-top,
#mt-global-header.is-at-top .mtgh-bar {
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

#mt-global-header.is-at-top .mtgh-bar {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    transform:translate3d(0,0,0) !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Während des Hero-Bereichs bleibt die Navigation vollständig sichtbar. */
#mt-global-header.is-hero-zone .mtgh-bar {
    transform:translate3d(0,0,0) !important;
}

/* Erst nach dem Hero darf sie beim Herunterscrollen verschwinden. */
#mt-global-header.is-hidden:not(.is-at-top):not(.is-hero-zone) .mtgh-bar {
    transform:translate3d(0,-110%,0) !important;
}

/* Beim Hochscrollen wieder weich einfahren. */
#mt-global-header:not(.is-hidden) .mtgh-bar {
    transform:translate3d(0,0,0);
}

@media(max-width:760px){
    #mt-global-header.is-at-top .mtgh-bar{
        height:62px !important;
    }
}



/* V1.6 — Bolder, larger, more readable header */
#mt-global-header {
    --mt-header-height:82px;
}

/* Mehr Höhe und Präsenz */
#mt-global-header .mtgh-bar {
    height:82px;
    border-bottom:1px solid rgba(255,255,255,.16);
    background:linear-gradient(
        180deg,
        rgba(3,5,7,.88),
        rgba(3,5,7,.38) 74%,
        rgba(3,5,7,.08)
    );
}

/* Breiteres Layout */
#mt-global-header .mtgh-shell {
    padding:0 4.4vw;
}

/* Logo etwas größer */
#mt-global-header .mtgh-logo img {
    width:118px;
}

/* Navigation sichtbarer */
#mt-global-header .mtgh-nav {
    gap:clamp(22px,2.25vw,42px);
}

#mt-global-header .mtgh-link {
    min-height:44px;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.55px;
}

#mt-global-header .mtgh-nav-index {
    font-size:5.5px;
    letter-spacing:.9px;
}

/* Kontakt CTA größer und markanter */
#mt-global-header .mtgh-contact {
    min-height:44px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.28);
    font-size:9px;
    font-weight:700;
    letter-spacing:1.6px;
}

#mt-global-header .mtgh-arrow {
    font-size:14px;
}

/* Scroll-Zustand ebenfalls etwas kräftiger */
#mt-global-header.is-scrolled:not(.is-at-top) .mtgh-bar {
    height:68px !important;
    background:rgba(7,10,13,.955) !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.20);
}

#mt-global-header.is-scrolled .mtgh-logo img {
    width:100px;
}

#mt-global-header.is-scrolled .mtgh-link {
    font-size:9.5px;
}

#mt-global-header.is-scrolled .mtgh-contact {
    min-height:40px;
}

/* Ganz oben bewusst größer und klarer */
#mt-global-header.is-at-top .mtgh-bar {
    height:82px !important;
    background:linear-gradient(
        180deg,
        rgba(3,5,7,.90),
        rgba(3,5,7,.40) 72%,
        rgba(3,5,7,.10)
    ) !important;
}

/* Hover weiterhin reaktiv, aber harmonischer mit größerer Typo */
@media (pointer:fine) and (min-width:761px) {
    #mt-global-header .mtgh-link:hover > span:last-child,
    #mt-global-header .mtgh-link:focus-visible > span:last-child {
        transform:scale(1.14);
        letter-spacing:1.95px;
    }

    #mt-global-header .mtgh-contact:hover > span:first-child,
    #mt-global-header .mtgh-contact:focus-visible > span:first-child {
        transform:scale(1.12);
        letter-spacing:2px;
    }
}

/* Tablet */
@media(max-width:1050px){
    #mt-global-header .mtgh-shell{
        padding:0 30px;
    }

    #mt-global-header .mtgh-logo img{
        width:108px;
    }

    #mt-global-header .mtgh-nav{
        gap:17px;
    }

    #mt-global-header .mtgh-link{
        font-size:8.7px;
        letter-spacing:1.35px;
    }

    #mt-global-header .mtgh-contact{
        padding:0 14px;
        font-size:8.3px;
    }
}

/* Mobile: ebenfalls etwas kräftiger, aber nicht zu klobig */
@media(max-width:760px){
    #mt-global-header{
        --mt-header-height:68px;
    }

    #mt-global-header .mtgh-bar,
    #mt-global-header.is-at-top .mtgh-bar{
        height:68px !important;
    }

    #mt-global-header .mtgh-shell{
        padding:0 18px;
    }

    #mt-global-header .mtgh-logo img{
        width:90px;
    }

    #mt-global-header .mtgh-menu{
        width:46px;
        height:46px;
    }

    #mt-global-header .mtgh-menu span{
        width:22px;
    }

    #mt-global-header.is-scrolled:not(.is-at-top) .mtgh-bar{
        height:62px !important;
    }

    #mt-global-header.is-scrolled .mtgh-logo img{
        width:82px;
    }

    #mt-global-header.is-scrolled .mtgh-menu{
        width:42px;
        height:42px;
    }
}

@media (prefers-reduced-motion:reduce) {
    #mt-global-header *,
    #mt-global-header *::before,
    #mt-global-header *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}


/* V1.1 — Reactive nav typography */
@media (pointer:fine) and (min-width:761px) {
    #mt-global-header .mtgh-link > span:last-child {
        display:inline-block;
        transform-origin:center center;
        transition:
            transform .28s cubic-bezier(.22,.78,.2,1),
            letter-spacing .28s ease;
        will-change:transform;
    }

    #mt-global-header .mtgh-link:hover > span:last-child,
    #mt-global-header .mtgh-link:focus-visible > span:last-child {
        transform:scale(1.13);
        letter-spacing:1.8px;
    }

    #mt-global-header .mtgh-link:hover .mtgh-nav-index,
    #mt-global-header .mtgh-link:focus-visible .mtgh-nav-index {
        transform:translateY(-1px) scale(1.18);
        color:var(--mt-header-accent);
    }

    #mt-global-header .mtgh-nav-index {
        transition:
            transform .28s cubic-bezier(.22,.78,.2,1),
            color .28s ease;
    }

    #mt-global-header .mtgh-contact > span:first-child {
        display:inline-block;
        transform-origin:center center;
        transition:
            transform .28s cubic-bezier(.22,.78,.2,1),
            letter-spacing .28s ease;
    }

    #mt-global-header .mtgh-contact:hover > span:first-child,
    #mt-global-header .mtgh-contact:focus-visible > span:first-child {
        transform:scale(1.11);
        letter-spacing:1.9px;
    }
}


