/* Portal zu MV Automotive Studio — kompaktes Band auf den Automobil-Seiten von maurice-veith.com
   Nutzt die Tokens der bestehenden Seite (--bg2, --line, --soft, --f-head …).
   Das Gelb (#f1df32) ist die Akzentfarbe der neuen Marke und kündigt den Wechsel an. */
section.mvp{--mvp-y:#f1df32;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1.25rem,3vw,2.75rem);padding-top:clamp(1.25rem,2.4vw,1.75rem);padding-bottom:clamp(1.25rem,2.4vw,1.75rem);background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mvp-copy{min-width:0}
.mvp-label{margin:0 0 .55rem;font-family:var(--f-head);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.mvp-label b{font-weight:inherit;color:var(--mvp-y)}
[data-theme="light"] .mvp-label b{color:var(--acc)}
.mvp-title{margin:0;font-family:var(--f-head);font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.mvp-title em{font-style:italic;font-weight:400;color:var(--soft)}
.mvp-text{margin:.5rem 0 0;max-width:44rem;font-size:.9rem;line-height:1.6;color:var(--soft)}
.mvp-cta{display:inline-flex;align-items:center;gap:1rem;padding:.4rem .4rem .4rem 1.4rem;border-radius:999px;background:var(--mvp-y);color:#0a0a0a;font-family:var(--f-head);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mvp-cta b{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#0a0a0a;color:var(--mvp-y);font-weight:400;font-size:.95rem;letter-spacing:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mvp-cta:hover b,.mvp-cta:focus-visible b{transform:rotate(-45deg)}
.mvp-cta:focus-visible{outline:2px solid var(--mvp-y);outline-offset:4px}

.mvp-stage{position:relative;display:block;width:clamp(150px,15vw,210px);aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#0a0a0a;isolation:isolate;cursor:pointer}
.mvp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mvp-ring{position:absolute;left:50%;top:50%;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid var(--mvp-y);opacity:.8;transition:transform .9s cubic-bezier(.2,.8,.2,1),background .6s}
.mvp-ring:before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--mvp-y);animation:mvp-pulse 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.mvp-stage:hover video,.mvp:has(.mvp-cta:hover) .mvp-stage video{transform:scale(1.09)}
.mvp-stage:hover .mvp-ring,.mvp:has(.mvp-cta:hover) .mvp-ring{transform:scale(1.25);background:rgba(241,223,50,.14)}
@keyframes mvp-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}

/* Übergang */
.mvp-ov{position:fixed;inset:0;z-index:2147483000;pointer-events:auto;cursor:progress}
.mvp-ov-shade{position:absolute;inset:0;background:#0a0a0a;opacity:0}
.mvp-ov-film{position:absolute;overflow:hidden;background:#0a0a0a;will-change:left,top,width,height,clip-path}
.mvp-ov-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:none;will-change:transform,filter}
.mvp-ov-dot{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#f1df32;color:#0a0a0a;display:grid;place-items:center;font:800 1rem/1 'Syne',sans-serif;letter-spacing:-.06em;opacity:0}
.mvp-ov-dot:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #f1df32;opacity:0}
.mvp-ov.is-waiting .mvp-ov-dot:after{animation:mvp-wait 1.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes mvp-wait{from{transform:scale(1);opacity:.8}to{transform:scale(2.4);opacity:0}}
.mvp-ov-cap{position:absolute;left:0;right:0;bottom:clamp(1.5rem,5vh,3rem);display:flex;justify-content:center;align-items:center;gap:1rem;margin:0;font:600 .6rem/1 var(--f-head,'Syne',sans-serif);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,236,.6);opacity:0}
.mvp-ov-cap i{display:block;width:3.5rem;height:1px;background:rgba(244,242,236,.2);position:relative;overflow:hidden}
.mvp-ov-cap i:after{content:'';position:absolute;inset:0;background:#f1df32;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.25,1)}
.mvp-ov-cap span+i+span{color:#f4f2ec}
.mvp-ov.is-waiting .mvp-ov-cap i:after{transform:scaleX(1)}

@media (max-width:768px){
  section.mvp{grid-template-columns:88px minmax(0,1fr);gap:1rem 1.1rem;padding-top:1.4rem;padding-bottom:1.4rem}
  .mvp-stage{width:88px;aspect-ratio:1}
  .mvp-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
  .mvp-text{display:none}
  .mvp-cta{grid-column:1/-1;justify-content:space-between}
  .mvp-ov-cap{font-size:.52rem;gap:.6rem}
  .mvp-ov-cap i{width:2rem}
}
@media (prefers-reduced-motion:reduce){
  .mvp-ring:before{animation:none}
  .mvp-stage video,.mvp-ring,.mvp-cta b{transition:none}
}