/* * ========================================================== * MOTAVIO MOBILE PERFECT V1 * ========================================================== * * DOPPELTER DESKTOP-SCHUTZ: * * 1. HTML-Link: * media="(max-width: 767px)" * * 2. Alle Regeln zusätzlich: * @media (max-width: 767px) * * Desktop >= 768px bekommt aus dieser Datei * KEINE Layout-Regel. * ========================================================== */ @media (max-width: 767px) { /* ======================================================== MOBILE BASIS ======================================================== */ html, body { max-width: 100% !important; overflow-x: clip !important; } img, video, svg { max-width: 100%; } button, input, select, textarea { font: inherit; } /* ======================================================== HERO · MOBILE EIGENE VERSION ======================================================== */ .mv-vin-hero-v4 { min-height: 0 !important; padding: 28px 0 20px !important; overflow: hidden !important; } .mv-vin-hero-v4__grid { width: calc(100% - 24px) !important; max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } .mv-vin-hero-v4__content { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; text-align: center !important; } /* ======================================================== HERO KICKER ======================================================== */ .mv-vin-hero-v4__kicker { align-self: center !important; margin: 0 auto 12px !important; font-size: 10px !important; line-height: 1.2 !important; letter-spacing: .11em !important; } /* ======================================================== HERO HEADLINE ======================================================== */ .mv-vin-hero-v4__title { width: 100% !important; max-width: 12ch !important; margin: 0 auto !important; font-size: clamp( 34px, 10.2vw, 40px ) !important; line-height: .99 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } .mv-vin-hero-v4__title span { display: block !important; } /* ======================================================== HERO BESCHREIBUNG ======================================================== */ .mv-vin-hero-v4__lead { width: 100% !important; max-width: 38ch !important; margin: 16px auto 0 !important; font-size: 15px !important; line-height: 1.55 !important; text-align: center !important; } /* ======================================================== FIN CARD ======================================================== */ .mv-vin-hero-v4__form-card { width: 100% !important; max-width: none !important; margin: 22px 0 0 !important; padding: 16px !important; border-radius: 17px !important; text-align: left !important; box-shadow: 0 16px 38px rgba( 7, 26, 44, .10 ) !important; } .mv-vin-hero-v4__form-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px 12px !important; margin-bottom: 13px !important; } .mv-vin-hero-v4__form-head strong, .mv-vin-hero-v4__form-head b { font-size: 14px !important; line-height: 1.3 !important; } .mv-vin-hero-v4__secure { min-height: 24px !important; padding: 4px 8px !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } /* ======================================================== FIN FORM ======================================================== */ .mv-vin-hero-v4__form { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } .mv-vin-hero-v4__field { width: 100% !important; min-width: 0 !important; } .mv-vin-hero-v4__field input, .mv-vin-hero-v4__form input[type="text"], .mv-vin-hero-v4__form input[name="vin"], .mv-vin-hero-v4__form input[name="fin"] { width: 100% !important; min-width: 0 !important; min-height: 54px !important; padding-left: 14px !important; padding-right: 14px !important; border-radius: 11px !important; /* * Wichtig für iPhone: * 16px verhindert automatisches Zoom * beim Input-Fokus. */ font-size: 16px !important; } /* ======================================================== FIN CTA ======================================================== */ .mv-vin-hero-v4__submit { width: 100% !important; min-width: 0 !important; min-height: 54px !important; margin: 0 !important; padding: 0 16px !important; border-radius: 11px !important; font-size: 14px !important; line-height: 1.2 !important; } /* ======================================================== FIN META ======================================================== */ .mv-vin-hero-v4__form-meta { width: 100% !important; margin-top: 11px !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px 12px !important; font-size: 10px !important; line-height: 1.35 !important; text-align: center !important; } .mv-vin-hero-v4__status { width: 100% !important; margin-top: 10px !important; } /* ======================================================== HERO BENEFITS ======================================================== */ .mv-vin-hero-v4__features { width: 100% !important; margin: 18px 0 0 !important; padding: 14px 0 0 !important; text-align: left !important; } .mv-vin-hero-v4__features > strong { display: block !important; margin: 0 0 10px !important; font-size: 11px !important; line-height: 1.35 !important; text-align: center !important; } .mv-vin-hero-v4__features > div { width: 100% !important; display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 8px !important; } .mv-vin-hero-v4__features > div > span { min-width: 0 !important; min-height: 39px !important; display: flex !important; align-items: center !important; gap: 6px !important; padding: 7px 8px !important; border-radius: 10px !important; font-size: 10.5px !important; line-height: 1.25 !important; white-space: normal !important; } .mv-vin-hero-v4__features i { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px !important; display: grid !important; place-items: center !important; font-size: 9px !important; } /* ======================================================== DESKTOP VISUAL AUF MOBILE NICHT QUETSCHEN Das große Desktop-Fahrzeug-/Report-Visual wird bewusst ausgeblendet. Dadurch sieht der Nutzer sofort: Headline -> FIN -> kostenlos prüfen. ======================================================== */ .mv-vin-hero-v4__visual { display: none !important; } /* ======================================================== HERO KPI / TRUST BAR Alt Mobile: 1 Spalte = unnötig extrem hoch Neu: 2 x 2 ======================================================== */ .mv-hero-v5-bottom { width: calc(100% - 24px) !important; max-width: 520px !important; margin: 18px auto 0 !important; display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; border-radius: 14px !important; overflow: hidden !important; } .mv-hero-v5-bottom-item { min-width: 0 !important; min-height: 62px !important; grid-template-columns: 24px minmax(0, 1fr) !important; gap: 7px !important; padding: 9px 10px !important; } .mv-hero-v5-bottom-item:nth-child(2n) { border-right: 0 !important; } .mv-hero-v5-bottom-item strong { font-size: 9.5px !important; line-height: 1.2 !important; } .mv-hero-v5-bottom-item small { font-size: 7.5px !important; line-height: 1.3 !important; } /* ======================================================== VIDEO / WARUM FAHRZEUGHISTORIE ======================================================== */ .mv-history-why { padding-top: 52px !important; padding-bottom: 58px !important; } .mv-history-why__shell { width: calc(100% - 28px) !important; } .mv-history-why__head { margin-bottom: 24px !important; } .mv-history-why__title { font-size: clamp( 30px, 9vw, 38px ) !important; line-height: 1.03 !important; text-wrap: balance !important; } .mv-history-why__content { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .mv-history-why__video { width: 100% !important; max-width: none !important; aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; border-radius: 15px !important; } .mv-history-real-video, .mv-history-why__video video { width: 100% !important; height: 100% !important; object-fit: contain !important; } .mv-history-why__benefits { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; } .mv-history-why__benefit { min-height: 0 !important; padding: 13px 14px !important; border-radius: 12px !important; } .mv-history-why__benefit h3 { font-size: 13px !important; } .mv-history-why__benefit p { font-size: 11px !important; line-height: 1.45 !important; } /* ======================================================== BEISPIELBERICHT ======================================================== */ .mv-report-v2 { padding-top: 54px !important; padding-bottom: 60px !important; } .mv-report-v2__shell { width: calc(100% - 28px) !important; } .mv-report-v2__head { margin-bottom: 24px !important; } .mv-report-v2__head h2 { font-size: clamp( 31px, 9vw, 38px ) !important; line-height: 1.02 !important; text-wrap: balance !important; } .mv-report-v2__head p { font-size: 14px !important; line-height: 1.55 !important; } .mv-report-v2__panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; border-radius: 16px !important; } .mv-report-v2__copy { padding: 22px 18px !important; } .mv-report-v2__copy h3 { font-size: clamp( 27px, 8vw, 34px ) !important; line-height: 1.04 !important; } .mv-report-v2__visual { min-width: 0 !important; padding: 10px !important; } .mv-report-v2__preview-image { width: 100% !important; height: auto !important; object-fit: contain !important; } /* ======================================================== 4 SCHRITTE ======================================================== */ .mv-process-v3 { padding-top: 52px !important; padding-bottom: 58px !important; } .mv-process-v3__shell { width: calc(100% - 28px) !important; } .mv-process-v3__head h2 { font-size: clamp( 30px, 9vw, 38px ) !important; line-height: 1.03 !important; text-wrap: balance !important; } .mv-process-v3__route { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } .mv-process-v3__step { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .mv-process-v3__bottom { margin-top: 20px !important; } .mv-process-v3__cta { width: 100% !important; min-height: 50px !important; justify-content: center !important; } /* ======================================================== SUPPORT / KONTAKT ======================================================== */ .mv-support-v1 { padding-top: 50px !important; padding-bottom: 56px !important; } .mv-support-v1__shell { width: calc(100% - 28px) !important; } .mv-support-v1__actions { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } .mv-support-v1__button { width: 100% !important; min-height: 50px !important; justify-content: center !important; } /* ======================================================== EXTRA KLEINE HANDYS ======================================================== */ @media (max-width: 360px) { .mv-vin-hero-v4__grid { width: calc(100% - 20px) !important; } .mv-vin-hero-v4__title { font-size: 32px !important; } .mv-vin-hero-v4__form-card { padding: 14px !important; } .mv-vin-hero-v4__features > div { grid-template-columns: minmax(0, 1fr) !important; } .mv-hero-v5-bottom { width: calc(100% - 20px) !important; grid-template-columns: minmax(0, 1fr) !important; } .mv-hero-v5-bottom-item { border-right: 0 !important; } } } /* ========================================================== MOTAVIO · MOBILE HERO V2 NUR <= 767px DESKTOP BLEIBT UNBERÜHRT ========================================================== */ @media (max-width: 767px) { /* -------------------------------------------------------- HERO CONTAINER -------------------------------------------------------- */ .mv-vin-hero-v4 { min-height: auto !important; padding: 22px 0 28px !important; overflow: hidden !important; } .mv-vin-hero-v4__grid { width: calc(100% - 32px) !important; max-width: 480px !important; margin: 0 auto !important; display: block !important; } .mv-vin-hero-v4__content { width: 100% !important; max-width: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; text-align: left !important; } /* -------------------------------------------------------- KICKER -------------------------------------------------------- */ .mv-vin-hero-v4__kicker { align-self: flex-start !important; width: auto !important; max-width: 100% !important; margin: 0 0 15px !important; padding: 7px 11px !important; font-size: 9px !important; line-height: 1.15 !important; letter-spacing: .055em !important; white-space: nowrap !important; } /* -------------------------------------------------------- HEADLINE Ziel: ca. 3–4 Zeilen statt 6 -------------------------------------------------------- */ .mv-vin-hero-v4__title { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: clamp(38px, 10.5vw, 46px) !important; line-height: .96 !important; letter-spacing: -.052em !important; text-align: left !important; text-wrap: balance !important; } .mv-vin-hero-v4__title span { display: inline !important; } /* -------------------------------------------------------- BESCHREIBUNG -------------------------------------------------------- */ .mv-vin-hero-v4__lead { width: 100% !important; max-width: 35ch !important; margin: 17px 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; text-align: left !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; overflow: hidden !important; } /* -------------------------------------------------------- FIN BOX -------------------------------------------------------- */ .mv-vin-hero-v4__form-card { width: 100% !important; margin: 21px 0 0 !important; padding: 16px !important; border-radius: 18px !important; box-sizing: border-box !important; } .mv-vin-hero-v4__form-head { margin: 0 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } .mv-vin-hero-v4__form-head strong, .mv-vin-hero-v4__form-head b { max-width: 70% !important; font-size: 18px !important; line-height: 1.05 !important; letter-spacing: -.025em !important; } /* -------------------------------------------------------- FIN INPUT -------------------------------------------------------- */ .mv-vin-hero-v4__form { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; } .mv-vin-hero-v4__field { width: 100% !important; min-width: 0 !important; display: flex !important; } .mv-vin-hero-v4__field input, .mv-vin-hero-v4__form input[name="vin"], .mv-vin-hero-v4__form input[name="fin"] { width: 100% !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important; padding: 0 14px !important; font-size: 16px !important; border-radius: 11px !important; box-sizing: border-box !important; } /* -------------------------------------------------------- BLAUER CTA -------------------------------------------------------- */ .mv-vin-hero-v4__submit, .mv-vin-hero-v4__form button[type="submit"] { display: flex !important; width: 100% !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 14px !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.15 !important; white-space: normal !important; text-align: center !important; box-sizing: border-box !important; } /* -------------------------------------------------------- KEINE FIN -------------------------------------------------------- */ .mv-vin-hero-v4__no-vin, .mv-vin-hero-v4 a[href*="ohne_fin"], .mv-vin-hero-v4 a[href*="#faq"] { margin-left: auto !important; margin-right: auto !important; font-size: 11px !important; } /* -------------------------------------------------------- GRATIS / PREIS INFO Auf Mobile NICHT zwei Karten nebeneinander. Nur Gratis-Vorteil prominent. -------------------------------------------------------- */ .mv-vin-hero-v4__steps, .mv-vin-hero-v4__price-flow, .mv-vin-hero-v4__offer-flow { width: 100% !important; display: block !important; margin-top: 12px !important; } .mv-vin-hero-v4__steps > *, .mv-vin-hero-v4__price-flow > *, .mv-vin-hero-v4__offer-flow > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .mv-vin-hero-v4__steps > * + *, .mv-vin-hero-v4__price-flow > * + *, .mv-vin-hero-v4__offer-flow > * + * { display: none !important; } /* -------------------------------------------------------- HINWEIS -------------------------------------------------------- */ .mv-vin-hero-v4__note, .mv-vin-hero-v4__legal-note { margin: 11px 0 0 !important; font-size: 10px !important; line-height: 1.35 !important; text-align: center !important; } /* -------------------------------------------------------- RECHTES DESKTOP VISUAL KOMPLETT ENTFERNEN Entscheidend: Keine Anbieterkarte Keine Unfallkarte Kein riesiges Audi-Bild Keine Kilometerkarte -------------------------------------------------------- */ .mv-vin-hero-v4__visual, .mv-vin-hero-v4__visual *, .mv-vin-hero-v4__car, .mv-vin-hero-v4__seller-card, .mv-vin-hero-v4__accident-card, .mv-vin-hero-v4__mileage-card { display: none !important; } /* -------------------------------------------------------- KPI / TRUST Kompakte 3er-Liste statt riesiger Desktop-Box -------------------------------------------------------- */ .mv-hero-v5-bottom { width: calc(100% - 32px) !important; max-width: 480px !important; margin: 18px auto 0 !important; display: grid !important; grid-template-columns: 1fr !important; border-radius: 16px !important; overflow: hidden !important; } .mv-hero-v5-bottom-item { width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 11px 14px !important; display: grid !important; grid-template-columns: 34px 1fr !important; gap: 10px !important; align-items: center !important; border-right: 0 !important; box-sizing: border-box !important; } .mv-hero-v5-bottom-item strong { font-size: 13px !important; line-height: 1.2 !important; } .mv-hero-v5-bottom-item small { font-size: 10px !important; line-height: 1.3 !important; } /* -------------------------------------------------------- KEINE HORIZONTALEN ÜBERLÄUFE -------------------------------------------------------- */ .mv-vin-hero-v4 *, .mv-hero-v5-bottom * { max-width: 100%; box-sizing: border-box; } } /* ========================================================== KLEINE IPHONES ========================================================== */ @media (max-width: 390px) { .mv-vin-hero-v4__grid, .mv-hero-v5-bottom { width: calc(100% - 24px) !important; } .mv-vin-hero-v4__title { font-size: 36px !important; } .mv-vin-hero-v4__lead { font-size: 14px !important; } .mv-vin-hero-v4__form-card { padding: 14px !important; } } /* HERR DEVELOPER · MOBILE HERO BUTTON FIX START */ @media (max-width: 768px) { /* Hero allgemein */ .mv-vin-hero-v4, .mv-vin-hero-v4__inner, .mv-vin-hero-v4__content, .mv-vin-hero-v4__left, .mv-vin-hero-v4__form-wrap, .mv-vin-hero-v4__form-card { overflow: visible !important; height: auto !important; min-height: 0 !important; } /* Formularblock */ .mv-vin-hero-v4__form-card, .mv-vin-hero-v4__form, .mv-vin-hero-v4__form-inner, .mv-vin-hero-v4__form-body, .mv-vin-hero-v4 form { display: flex !important; flex-direction: column !important; gap: 12px !important; } /* FIN-Reihe */ .mv-vin-hero-v4__fin-row, .mv-vin-hero-v4__field-row, .mv-vin-hero-v4__input-row, .mv-vin-hero-v4__form-main, .mv-vin-hero-v4__entry-row, .mv-vin-hero-v4__top-row, .mv-vin-hero-v4__vin-row { display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; align-items: stretch !important; } /* FIN Label/Button links */ .mv-vin-hero-v4__fin-label, .mv-vin-hero-v4__fin-pill, .mv-vin-hero-v4__switch, .mv-vin-hero-v4__mode, .mv-vin-hero-v4__type { width: 84px !important; min-width: 84px !important; max-width: 84px !important; min-height: 72px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; font-weight: 800 !important; } /* Input rechts */ .mv-vin-hero-v4 input, .mv-vin-hero-v4__input, .mv-vin-hero-v4__vin-input, .mv-vin-hero-v4__field input, .mv-vin-hero-v4 form input[type="text"] { width: 100% !important; min-width: 0 !important; min-height: 72px !important; border-radius: 16px !important; font-size: 17px !important; padding: 0 18px !important; } /* "ich habe keine FIN" bleibt sichtbar */ .mv-vin-hero-v4__no-fin, .mv-vin-hero-v4__no-fin-wrap, .mv-vin-hero-v4 .mv-vin-no-fin, .mv-vin-hero-v4 a[href*="#faq"], .mv-vin-hero-v4 button[data-no-fin] { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin-top: 2px !important; margin-bottom: 4px !important; position: relative !important; z-index: 3 !important; } /* WICHTIG: Submit-Button unter der FIN erzwingen */ .mv-vin-hero-v4__submit-wrap, .mv-vin-hero-v4__submit-row, .mv-vin-hero-v4__cta-wrap, .mv-vin-hero-v4__cta-row, .mv-vin-hero-v4__action, .mv-vin-hero-v4__actions, .mv-vin-hero-v4__button-row, .mv-vin-hero-v4 form .submit-wrap, .mv-vin-hero-v4 form .cta-row, .mv-vin-hero-v4 form .actions, .mv-vin-hero-v4 form .button-row { display: block !important; width: 100% !important; grid-column: 1 / -1 !important; order: 40 !important; margin-top: 2px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; transform: none !important; z-index: 5 !important; } .mv-vin-hero-v4__submit, .mv-vin-hero-v4__submit-btn, .mv-vin-hero-v4 .mv-vin-submit, .mv-vin-hero-v4 .btn-primary, .mv-vin-hero-v4 .button-primary, .mv-vin-hero-v4 form button[type="submit"] { display: inline-flex !important; width: 100% !important; min-height: 58px !important; padding: 0 18px !important; border-radius: 16px !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 16px !important; line-height: 1.15 !important; font-weight: 800 !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 6 !important; } /* Angebotsboxen darunter sauber stapeln */ .mv-vin-hero-v4__steps, .mv-vin-hero-v4__price-flow, .mv-vin-hero-v4__offer-flow, .mv-vin-hero-v4__offers, .mv-vin-hero-v4__benefits { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 14px !important; } .mv-vin-hero-v4__steps > *, .mv-vin-hero-v4__price-flow > *, .mv-vin-hero-v4__offer-flow > *, .mv-vin-hero-v4__offers > *, .mv-vin-hero-v4__benefits > * { width: 100% !important; margin: 0 !important; } } /* HERR DEVELOPER · MOBILE HERO BUTTON FIX END */