/* ============================================================
   MOTAVIO FAHRZEUGCHECK · PROFESSIONAL POLISH V2

   Brand Blue  #168FE6
   Dark        #071A2C
   White       #FFFFFF

   Nur visuelle Feinabstimmung.
   Keine Funktion / Struktur.
   ============================================================ */


/* ============================================================
   SHARED DESIGN SYSTEM
   ============================================================ */

.mv-vin-hero-v4,
.mv-history-why,
.mv-report-v2,
.mv-how-it-works-section {
    --mvp-blue: #168FE6;
    --mvp-blue-dark: #0D78CE;
    --mvp-dark: #071A2C;
    --mvp-text: #53697C;
    --mvp-muted: #788A9A;
    --mvp-line: #D9E5EE;
    --mvp-soft: #F5F9FC;
    --mvp-white: #FFFFFF;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}


/* überall dieselbe Inhaltsbreite */

.mv-vin-hero-v4__inner,
.mv-vin-hero-v4__container,
.mv-vin-hero-v4__shell,
.mv-history-why__shell,
.mv-report-v2__shell,
.mv-how-it-works-wrap {
    width: min(1160px, calc(100% - 48px)) !important;
    max-width: 1160px !important;

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


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

.mv-vin-hero-v4 {
    min-height: auto !important;

    padding:
        58px
        0
        52px !important;
}


/* linker / rechter Bereich */

.mv-vin-hero-v4__inner,
.mv-vin-hero-v4__grid,
.mv-vin-hero-v4__layout {
    column-gap: 50px !important;
    align-items: center !important;
}


/* Eyebrow */

.mv-vin-hero-v4 [class*="eyebrow"],
.mv-vin-hero-v4 [class*="kicker"],
.mv-vin-hero-v4 [class*="badge"] {
    margin-bottom: 13px !important;

    color: var(--mvp-blue) !important;

    font-size: 10.5px !important;
    line-height: 1 !important;

    font-weight: 800 !important;
    letter-spacing: .09em !important;
}


/* Hero Headline */

.mv-vin-hero-v4 h1 {
    max-width: 590px !important;

    margin:
        0
        0
        16px !important;

    color: var(--mvp-dark) !important;

    font-size:
        clamp(
            46px,
            3.9vw,
            57px
        ) !important;

    line-height: .99 !important;

    font-weight: 800 !important;

    letter-spacing: -.048em !important;
}


/* Hero Lead */

.mv-vin-hero-v4 h1 + p {
    max-width: 570px !important;

    margin:
        0
        0
        21px !important;

    color: var(--mvp-text) !important;

    font-size: 14.5px !important;
    line-height: 1.57 !important;

    font-weight: 400 !important;
}


/* FIN */

.mv-vin-hero-v4 form {
    border-radius: 13px !important;
}


.mv-vin-hero-v4 form input[type="text"] {
    font-size: 13.5px !important;
}


.mv-vin-hero-v4 form button {
    font-size: 12.5px !important;
    font-weight: 800 !important;
}


.mv-vin-hero-v4__form-meta {
    margin-top: 7px !important;

    font-size: 9.5px !important;
    line-height: 1.3 !important;
}


/* Feature row unter FIN */

.mv-vin-hero-v4__features {
    margin-top: 18px !important;
}


.mv-vin-hero-v4__features > strong {
    margin-bottom: 8px !important;

    color: var(--mvp-dark) !important;

    font-size: 11.5px !important;
    font-weight: 800 !important;
}


.mv-vin-hero-v4__features span {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
}


/* Hero Visual rechts */

.mv-vin-hero-v4__visual {
    min-height: 445px !important;
}


/* ============================================================
   WHY SECTION
   ============================================================ */

.mv-history-why {
    padding:
        58px
        0
        62px !important;
}


/* Header */

.mv-history-why__head {
    max-width: 820px !important;

    margin:
        0
        auto
        30px !important;
}


.mv-history-why__eyebrow {
    margin-bottom: 11px !important;

    color: var(--mvp-blue) !important;

    font-size: 10.5px !important;

    font-weight: 800 !important;

    letter-spacing: .075em !important;
}


.mv-history-why__title {
    max-width: 800px !important;

    font-size:
        clamp(
            38px,
            3.25vw,
            48px
        ) !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -.046em !important;
}


/* Content */

.mv-history-why__content {
    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, .94fr) !important;

    gap: 18px !important;

    align-items: stretch !important;
}


/* Video */

.mv-history-why__video {
    min-height: 320px !important;

    border-radius: 16px !important;

    box-shadow:
        0
        14px
        35px
        rgba(7, 26, 44, .06) !important;
}


.mv-history-why__video-image {
    inset: 12px !important;

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

    border-radius: 11px !important;
}


.mv-history-why__video::after {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
}


/* Play */

.mv-history-why__play {
    width: 72px !important;
    height: 72px !important;
}


.mv-history-why__play::before {
    border-top-width: 12px !important;
    border-bottom-width: 12px !important;
    border-left-width: 20px !important;
}


/* Controls */

.mv-history-why__controls {
    left: 27px !important;
    right: 27px !important;
    bottom: 25px !important;
}


/* Benefit Cards */

.mv-history-why__benefits {
    gap: 8px !important;
}


.mv-history-why__benefit {
    grid-template-columns:
        48px
        minmax(0, 1fr) !important;

    gap: 13px !important;

    padding:
        13px
        16px !important;

    border-radius: 14px !important;

    box-shadow:
        0
        9px
        26px
        rgba(7, 26, 44, .04) !important;
}


.mv-history-why__icon {
    width: 48px !important;
    height: 48px !important;

    border-radius: 11px !important;
}


.mv-history-why__icon svg {
    width: 23px !important;
    height: 23px !important;
}


.mv-history-why__benefit h3 {
    margin:
        0
        0
        3px !important;

    color: var(--mvp-dark) !important;

    font-size: 16.5px !important;
    line-height: 1.16 !important;

    font-weight: 800 !important;

    letter-spacing: -.024em !important;
}


.mv-history-why__benefit p {
    margin: 0 !important;

    color: var(--mvp-text) !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   BEISPIELBERICHT
   ============================================================ */

.mv-report-v2 {
    padding:
        58px
        0
        64px !important;
}


/* Head */

.mv-report-v2__head {
    max-width: 800px !important;

    margin:
        0
        auto
        28px !important;
}


.mv-report-v2__eyebrow {
    margin-bottom: 11px !important;

    color: var(--mvp-blue) !important;

    font-size: 10.5px !important;

    font-weight: 800 !important;

    letter-spacing: .075em !important;
}


.mv-report-v2__head h2 {
    font-size:
        clamp(
            38px,
            3.2vw,
            48px
        ) !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -.046em !important;
}


.mv-report-v2__head p {
    max-width: 620px !important;

    margin:
        12px
        auto
        0 !important;

    color: var(--mvp-text) !important;

    font-size: 13.5px !important;
    line-height: 1.5 !important;
}


/* Hauptpanel */

.mv-report-v2__panel {
    grid-template-columns:
        minmax(310px, 33%)
        minmax(0, 67%) !important;

    min-height: 0 !important;

    border-radius: 18px !important;

    box-shadow:
        0
        17px
        42px
        rgba(7, 26, 44, .065) !important;
}


/* links */

.mv-report-v2__copy {
    padding:
        26px
        27px
        28px !important;
}


.mv-report-v2__copy-eyebrow {
    margin-bottom: 11px !important;

    font-size: 9.5px !important;
}


.mv-report-v2__copy h3 {
    margin-bottom: 11px !important;

    font-size: 27px !important;
    line-height: 1.04 !important;

    font-weight: 800 !important;

    letter-spacing: -.037em !important;
}


.mv-report-v2__dramatic {
    margin-bottom: 14px !important;

    color: #425B70 !important;

    font-size: 11.5px !important;
    line-height: 1.47 !important;
}


.mv-report-v2__copy h4 {
    margin-bottom: 9px !important;

    font-size: 13px !important;
    line-height: 1.22 !important;

    font-weight: 800 !important;
}


.mv-report-v2__copy ul {
    gap: 6px !important;

    margin-bottom: 17px !important;
}


.mv-report-v2__copy li {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
}


.mv-report-v2__open {
    min-height: 38px !important;

    padding:
        0
        14px !important;

    border-radius: 8px !important;

    font-size: 10.5px !important;
}


/* rechts */

.mv-report-v2__visual {
    padding: 14px !important;
}


.mv-report-v2__browser {
    height: 380px !important;
    min-height: 380px !important;

    border-radius: 12px !important;

    box-shadow:
        0
        12px
        30px
        rgba(7, 26, 44, .08) !important;
}


/* Browserbar */

.mv-report-v2__browser-head {
    height: 47px !important;

    padding:
        0
        13px !important;
}


.mv-report-v2__brand i {
    width: 25px !important;
    height: 25px !important;
}


.mv-report-v2__brand strong {
    font-size: 10.5px !important;
}


.mv-report-v2__brand span {
    font-size: 6px !important;
}


.mv-report-v2__vehicle strong {
    font-size: 8.5px !important;
}


.mv-report-v2__vehicle span {
    font-size: 7px !important;
}


/* Vorschau */

.mv-report-v2__report-image {
    top: 57px !important;

    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;

    border-radius: 8px !important;
}


.mv-report-v2__report-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    background: #FFFFFF !important;
}


/* Hint */

.mv-report-v2__hint {
    right: 25px !important;
    bottom: 23px !important;

    padding:
        6px
        9px !important;

    font-size: 7.5px !important;
}


/* ============================================================
   4 SCHRITTE
   ============================================================ */

.mv-how-it-works-section {
    padding:
        58px
        0
        62px !important;
}


/* Header */

.mv-how-it-works-head {
    max-width: 720px !important;

    margin:
        0
        auto
        27px !important;
}


.mv-how-it-works-eyebrow {
    margin-bottom: 10px !important;

    color: var(--mvp-blue) !important;

    font-size: 10.5px !important;

    font-weight: 800 !important;

    letter-spacing: .075em !important;
}


.mv-how-it-works-title {
    font-size:
        clamp(
            37px,
            3.05vw,
            46px
        ) !important;

    line-height: 1.01 !important;

    font-weight: 800 !important;

    letter-spacing: -.044em !important;
}


.mv-how-it-works-subtext {
    max-width: 620px !important;

    margin:
        12px
        auto
        0 !important;

    color: var(--mvp-text) !important;

    font-size: 13.5px !important;
    line-height: 1.52 !important;
}


/* Grid */

.mv-how-it-works-grid {
    gap: 13px !important;
}


/* Cards */

.mv-how-it-works-card {
    min-height: 195px !important;

    padding:
        17px
        17px
        18px !important;

    border-radius: 17px !important;

    box-shadow:
        0
        11px
        30px
        rgba(7, 26, 44, .045) !important;
}


/* Nummer */

.mv-how-it-works-stepno {
    top: 16px !important;
    right: 16px !important;

    font-size: 18px !important;
}


/* Icon */

.mv-how-it-works-icon {
    width: 48px !important;
    height: 48px !important;

    margin-bottom: 15px !important;

    border-radius: 13px !important;
}


.mv-how-it-works-icon svg {
    width: 23px !important;
    height: 23px !important;
}


/* Headline Card */

.mv-how-it-works-card h3 {
    margin-bottom: 7px !important;

    color: var(--mvp-dark) !important;

    font-size: 16.5px !important;
    line-height: 1.13 !important;

    font-weight: 800 !important;

    letter-spacing: -.024em !important;
}


/* Copy */

.mv-how-it-works-card p {
    color: var(--mvp-text) !important;

    font-size: 11.5px !important;
    line-height: 1.48 !important;
}


/* Arrow */

.mv-how-it-works-arrow {
    right: -12px !important;

    width: 23px !important;
    height: 23px !important;
}


.mv-how-it-works-arrow svg {
    width: 13px !important;
    height: 13px !important;
}


/* Bottom note */

.mv-how-it-works-note {
    margin-top: 20px !important;

    color: var(--mvp-muted) !important;

    font-size: 11px !important;
}


/* ============================================================
   SECTION RHYTHM
   ============================================================ */

/*
   Die Bereiche sollen optisch zusammengehören,
   aber trotzdem klar voneinander getrennt sein.
*/

.mv-history-why,
.mv-report-v2,
.mv-how-it-works-section {
    border-top:
        1px solid
        rgba(217, 229, 238, .70);
}


/* keine künstlichen riesigen Außenabstände */

.mv-vin-hero-v4 + .mv-history-why,
.mv-history-why + .mv-report-v2,
.mv-report-v2 + .mv-how-it-works-section {
    margin-top: 0 !important;
}


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

@media (max-width: 950px) {

    .mv-vin-hero-v4,
    .mv-history-why,
    .mv-report-v2,
    .mv-how-it-works-section {
        padding-top: 50px !important;
        padding-bottom: 54px !important;
    }


    .mv-history-why__content {
        grid-template-columns: 1fr !important;
    }


    .mv-report-v2__panel {
        grid-template-columns: 1fr !important;
    }


    .mv-report-v2__browser {
        height: 490px !important;
        min-height: 490px !important;
    }


    .mv-how-it-works-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .mv-how-it-works-arrow {
        display: none !important;
    }

}


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

@media (max-width: 650px) {

    .mv-vin-hero-v4__inner,
    .mv-vin-hero-v4__container,
    .mv-vin-hero-v4__shell,
    .mv-history-why__shell,
    .mv-report-v2__shell,
    .mv-how-it-works-wrap {
        width: calc(100% - 28px) !important;
    }


    .mv-vin-hero-v4,
    .mv-history-why,
    .mv-report-v2,
    .mv-how-it-works-section {
        padding:
            43px
            0
            46px !important;
    }


    .mv-vin-hero-v4 h1 {
        font-size: 40px !important;
    }


    .mv-history-why__title,
    .mv-report-v2__head h2,
    .mv-how-it-works-title {
        font-size: 33px !important;
    }


    .mv-report-v2__copy h3 {
        font-size: 26px !important;
    }


    .mv-history-why__video {
        min-height: 280px !important;
    }


    .mv-report-v2__browser {
        height: 350px !important;
        min-height: 350px !important;
    }


    .mv-how-it-works-grid {
        grid-template-columns: 1fr !important;
    }


    .mv-how-it-works-card {
        min-height: 0 !important;
    }

}