/* =========================================================
   MT MOTORS UI POLISH
   Globale, dezente Premium-Interaktionen.
   ========================================================= */

:root{
    --mtui-blue:#1e74d7;
    --mtui-blue-light:#4098ff;
    --mtui-white:#f5f6f7;
    --mtui-focus:rgba(64,152,255,.82);
    --mtui-ease:cubic-bezier(.22,.78,.2,1);
}

/* Keine Layout-Sprünge beim Seitenwechsel */
html.mtui-leaving body{
    pointer-events:none;
}

/* Der Fade ist absichtlich sehr kurz */
body{
    transition:opacity .20s ease;
}

html.mtui-leaving body{
    opacity:.22;
}

/* =========================================================
   GLOBAL BUTTON SYSTEM
   ========================================================= */

:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .form-back,
    .mtgh-contact,
    .quick-card,
    .contact-button,
    .mt-button,
    [data-mt-button]
){
    position:relative;
    isolation:isolate;
    overflow:hidden;
    transform:translateZ(0);
    transition:
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        transform .30s var(--mtui-ease),
        box-shadow .30s ease !important;
}

/* Leichte blaue Füllung fährt von links ein */
:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .contact-button,
    .mt-button,
    [data-mt-button]
)::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-1px;
    background:linear-gradient(
        90deg,
        var(--mtui-blue),
        #246fc5
    );
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .34s var(--mtui-ease);
}

:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .contact-button,
    .mt-button,
    [data-mt-button]
):hover::before,
:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .contact-button,
    .mt-button,
    [data-mt-button]
):focus-visible::before{
    transform:scaleX(1);
}

:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .contact-button,
    .mt-button,
    [data-mt-button]
):hover{
    border-color:rgba(64,152,255,.92) !important;
    transform:translateY(-2px);
    box-shadow:0 13px 34px rgba(0,0,0,.18);
}

/* Sekundär-Buttons bleiben ruhiger */
:is(.form-back):hover{
    transform:translateY(-1px);
}

/* Pfeile reagieren einheitlich */
:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .area-link,
    .generation-select,
    .mtgh-contact,
    [data-mt-arrow]
) > span:last-child{
    display:inline-block;
    transition:transform .28s var(--mtui-ease);
}

:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .area-link,
    .generation-select,
    .mtgh-contact,
    [data-mt-arrow]
):hover > span:last-child{
    transform:translateX(4px);
}

/* Klick fühlt sich physischer an */
:is(
    .hero-button,
    .cta-button,
    .mtv-contact,
    .submit,
    .form-next,
    .form-back,
    .mtgh-contact,
    .contact-button,
    .mt-button,
    [data-mt-button]
):active{
    transform:translateY(0) scale(.985);
}

/* =========================================================
   CARDS / LINKS
   ========================================================= */

:is(
    .area-card,
    .generation-card,
    .mtv-card,
    .quick-card,
    .project-card,
    .service-card
){
    transition:
        transform .38s var(--mtui-ease),
        border-color .30s ease,
        box-shadow .38s ease,
        background .30s ease;
}

@media (pointer:fine){
    :is(
        .area-card,
        .generation-card,
        .mtv-card,
        .quick-card,
        .project-card,
        .service-card
    ):hover{
        transform:translateY(-3px);
    }
}

/* Textlinks */
:is(
    .area-link,
    .footer-column a,
    .mtv-detail-link
){
    transition:
        color .25s ease,
        transform .25s var(--mtui-ease);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

html.mtui-focus :is(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible{
    outline:1px solid var(--mtui-focus) !important;
    outline-offset:3px !important;
}

/* Mausfokus nicht unnötig zeigen */
:is(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus:not(:focus-visible){
    outline:none;
}

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

@media(max-width:760px){
    /* Kein Hochspringen von Cards auf Touch */
    :is(
        .area-card,
        .generation-card,
        .mtv-card,
        .quick-card,
        .project-card,
        .service-card
    ){
        transform:none !important;
    }
}

@media(prefers-reduced-motion:reduce){
    body,
    :is(
        .hero-button,
        .cta-button,
        .mtv-contact,
        .submit,
        .form-next,
        .form-back,
        .mtgh-contact,
        .area-card,
        .generation-card,
        .mtv-card,
        .quick-card,
        .project-card,
        .service-card
    ){
        transition:none !important;
    }

    html.mtui-leaving body{
        opacity:1 !important;
    }
}


/* =========================================================
   V1.1 FINAL POLISH
   ========================================================= */

/* Dezente Marken-Textauswahl */
::selection{
    background:rgba(30,116,215,.78);
    color:#fff;
}

/* Fortschrittslinie während interner Navigation */
#mtui-nav-progress{
    position:fixed;
    top:0;
    left:0;
    z-index:2147483000;
    width:0;
    height:2px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(90deg,#1e74d7,#4098ff);
    box-shadow:0 0 12px rgba(64,152,255,.42);
    transition:
        width .18s cubic-bezier(.22,.78,.2,1),
        opacity .15s ease;
}

html.mtui-leaving #mtui-nav-progress{
    opacity:1;
    width:78%;
}

/* Bei tatsächlich beginnender Navigation kurz fast voll */
html.mtui-leaving.mtui-progress-end #mtui-nav-progress{
    width:96%;
}

/* Kartengrafiken reagieren hochwertiger, ohne das Layout zu bewegen */
html.mtui-card-media :is(
    .area-card,
    .generation-card,
    .mtv-card,
    .quick-card,
    .project-card,
    .service-card
) img{
    transition:
        transform .55s cubic-bezier(.22,.78,.2,1),
        filter .45s ease;
}

@media(pointer:fine){
    html.mtui-card-media :is(
        .area-card,
        .generation-card,
        .mtv-card,
        .quick-card,
        .project-card,
        .service-card
    ):hover img{
        transform:scale(1.025);
        filter:brightness(1.035) contrast(1.015);
    }
}

/* Formulare: klarer Fokus ohne grelle Effekte */
:is(
    #mt-contact-v2,
    .mt-inquiry-form
) :is(input,select,textarea){
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

:is(
    #mt-contact-v2,
    .mt-inquiry-form
) :is(input,select,textarea):focus{
    border-color:rgba(64,152,255,.72) !important;
    box-shadow:0 0 0 3px rgba(64,152,255,.07) !important;
}

/* Fehlerzustände nur zeigen, nachdem der Browser eine Benutzereingabe bewertet */
:is(
    #mt-contact-v2,
    .mt-inquiry-form
) :is(input,select,textarea):user-invalid{
    border-color:rgba(232,102,102,.62) !important;
}

/* Bessere Touch-Rückmeldung ohne den Custom-Look zu verändern */
@media(pointer:coarse){
    :is(a,button,[role="button"]){
        -webkit-tap-highlight-color:rgba(64,152,255,.12);
    }
}

/* Scrollbar nur dezent einfärben, wo WebKit es unterstützt */
@media(pointer:fine){
    html{
        scrollbar-color:#3c4650 #0a0d10;
    }

    html::-webkit-scrollbar{
        width:10px;
    }

    html::-webkit-scrollbar-track{
        background:#0a0d10;
    }

    html::-webkit-scrollbar-thumb{
        background:#3a444d;
        border:2px solid #0a0d10;
        border-radius:999px;
    }

    html::-webkit-scrollbar-thumb:hover{
        background:#4a5660;
    }
}

@media(prefers-reduced-motion:reduce){
    #mtui-nav-progress{
        display:none !important;
    }

    html.mtui-card-media :is(
        .area-card,
        .generation-card,
        .mtv-card,
        .quick-card,
        .project-card,
        .service-card
    ) img{
        transition:none !important;
        transform:none !important;
    }
}