/* marken-farben.css – Farben je Marke (body.mk-{slug}). Lädt nach marken.css.
   --b  = dunkle Markenfarbe (Hero, Fußzeile)   --a = Akzent (Buttons, Linien)
   --at = Textfarbe auf dem Akzent              --hl = helle Akzentfarbe auf dunklem Grund */
body.mk{--b:#1F2226;--a:#1F2226;--at:#fff;--hl:#fff}
body.mk-volkswagen{--b:#001E50;--a:#0040C5;--at:#fff;--hl:#00B0F0}
body.mk-bmw{--b:#0B1E33;--a:#1C69D4;--at:#fff;--hl:#4C9BFF}
body.mk-audi{--b:#111111;--a:#BB0A30;--at:#fff;--hl:#E3123F}
body.mk-mercedes{--b:#0B0B0C;--a:#00ADEF;--at:#fff;--hl:#A4AAAE}
body.mk-opel{--b:#1D1D1B;--a:#F7E400;--at:#1D1D1B;--hl:#F7E400}
body.mk-skoda{--b:#0E3A2F;--a:#2E8B4E;--at:#fff;--hl:#78FAAE}
body.mk-seat{--b:#1B1B1B;--a:#E2001A;--at:#fff;--hl:#D7A27A}
body.mk-toyota,body.mk-toyota-hilux{--b:#1A1A1A;--a:#EB0A1E;--at:#fff;--hl:#FF4D5E}
body.mk-fiat{--b:#3A0D16;--a:#B5122E;--at:#fff;--hl:#F2C14E}
body.mk-mitsubishi{--b:#141414;--a:#E60012;--at:#fff;--hl:#FF4D57}
body.mk-porsche{--b:#0E0E10;--a:#D5001C;--at:#fff;--hl:#C9A55C}

/* Kopf */
.mk-hdr{border-bottom:3px solid var(--a)}
.mk-logo b{color:var(--a)}
body.mk-opel .mk-logo b{color:var(--b);background:var(--a);padding:2px 6px}
.mk-tel{color:var(--b)}
.mk-btn,.btn{background:var(--a);border-color:var(--a);color:var(--at)}
.mk-btn:hover,.btn:hover{background:var(--b);border-color:var(--b);color:#fff}
.mk-btn-o{background:transparent;color:inherit;border-color:currentColor}

/* Hero: volle Breite in Markenfarbe */
.mk-hero{position:relative;color:#fff;box-shadow:0 0 0 100vmax var(--b);clip-path:inset(0 -100vmax);background:var(--b)}
.mk-hero::before{content:"";position:absolute;inset:0 -100vmax;background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--a) 35%,transparent),transparent 60%);pointer-events:none;z-index:0}
.mk-hero>*{position:relative;z-index:1}
.mk-hero h1,.mk-hero .mk-lead{color:#fff}
.mk-hero .mk-label{color:var(--hl)}
.mk-hero .mk-facts{color:rgba(255,255,255,.78)}
.mk-hero .mk-facts span{color:rgba(255,255,255,.35)}
.mk-hero a:not(.mk-btn){color:#fff}
.mk-hero .mk-btn-o{color:#fff}
.mk-hero-img figcaption{color:rgba(255,255,255,.7)}
.mk-hero .mk-form{color:var(--ink);border:0;border-top:5px solid var(--a);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.mk-hero .mk-form a{color:var(--ink)}
.mk-crumbs{background:var(--b);box-shadow:0 0 0 100vmax var(--b);clip-path:inset(0 -100vmax);color:rgba(255,255,255,.7);padding-bottom:4px}
.mk-crumbs a,.mk-crumbs span{color:rgba(255,255,255,.85)}

/* Inhalte */
.mk-sec h2::after,.mk-band h2::after{content:"";display:block;width:56px;height:4px;background:var(--a);margin-top:14px}
.mk-models{border-top:3px solid var(--a)}
.mk-models a:hover{background:color-mix(in srgb,var(--a) 8%,#fff)}
.mk-models a:hover span{color:var(--a)}
body.mk-opel .mk-models a:hover span{color:var(--b)}
.mk-points li{border-top:3px solid var(--a)}
.mk-points li::before{color:var(--a);font-weight:700}
.mk-step-n{background:var(--a);border-color:var(--a);color:var(--at)}
.mk-faq{border-top:3px solid var(--a)}
.mk-inline a:hover{border-color:var(--a);color:var(--a)}
.mk-band{background:color-mix(in srgb,var(--a) 7%,#F3F4F5)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--a)}
body.mk-opel .field input:focus,body.mk-opel .field select:focus,body.mk-opel .field textarea:focus{border-bottom-color:var(--b)}

/* Fuß + Handyleiste */
.mk-foot{background:var(--b);border-top:4px solid var(--a)}
.mk-foot .mk-logo b{color:var(--hl);background:none;padding:0}
.mk-mbar{border-top:3px solid var(--a)}
.mk-mbar a:first-child{color:var(--b)}
.mk-mbar a:last-child{background:var(--a);color:var(--at)}
@media (max-width:600px){.mk-hero .mk-form{box-shadow:none}}
body.mk-opel .mk-hero::before{background:radial-gradient(ellipse at 15% 0%,rgba(247,228,0,.16),transparent 55%)}

/* ===== v2: Kartenstil (abgerundete Bildkarten, graue Karten, schwarze Pillen-Buttons), Schrift Barlow ===== */
body.mk{--font:"Barlow","Helvetica Neue",Arial,sans-serif;--r:24px;--btn:#000;--btn-t:#fff;font-family:var(--font)}
body.mk-opel{--btn:#1D1D1B}
body.mk h1,.mk-hero h1{font-weight:600;letter-spacing:-.02em}
.mk-sec h2,.mk-band h2,.mk-more h2,.mk-form-h{font-weight:600;letter-spacing:-.01em}
.mk-steps b,.mk-points b,.mk-faq dt{font-weight:700}
.mk-lead{font-weight:500}

/* Kopf: Logo, Telefon- und Mail-Symbol */
.mk-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mk-tel{display:inline-flex;align-items:center;gap:8px}
.mk-mail{display:inline-flex;align-items:center;color:var(--ink)}
.mk-logo{font-weight:500}
.mk-logo b{font-weight:700}

/* Buttons abgerundet */
.mk-btn,.btn{border-radius:12px}
.mk-hdr .mk-btn{border-radius:10px}

/* Hero: heller Grund, Bild als große abgerundete Karte */
.mk-hero{color:var(--ink);background:#fff;box-shadow:none;clip-path:none;padding-top:28px}
.mk-hero::before{display:none}
.mk-hero h1,.mk-hero .mk-lead{color:var(--ink)}
.mk-hero .mk-lead{color:var(--ink-2)}
.mk-hero .mk-label{color:var(--a)}
body.mk-opel .mk-hero .mk-label{color:var(--b)}
.mk-hero .mk-facts{color:var(--mute)}
.mk-hero .mk-facts span{color:var(--line)}
.mk-hero a:not(.mk-btn){color:var(--ink)}
.mk-crumbs{background:none;box-shadow:none;clip-path:none;color:var(--mute)}
.mk-crumbs a,.mk-crumbs span{color:var(--mute)}

.mk-card{position:relative;display:block;margin:0;border-radius:var(--r);overflow:hidden;background:var(--b);color:#fff!important;text-decoration:none;isolation:isolate}
.mk-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.mk-card:hover img{transform:scale(1.03)}
.mk-card::before,.mk-card::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.mk-card::before{top:0;height:38%;background:linear-gradient(rgba(0,0,0,.72),transparent)}
.mk-card::after{bottom:0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.mk-card-top{position:absolute;z-index:2;top:22px;left:0;right:0;text-align:center;font:700 clamp(34px,6vw,58px)/1 var(--font);letter-spacing:-.02em;font-style:italic}
.mk-card-bot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 26px 26px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 20px}
.mk-chip{grid-column:1/-1;justify-self:start;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);font-size:14px;font-weight:500}
.mk-card-txt{font-size:19px;line-height:1.4;font-weight:500}
.mk-card-arr{font-size:30px;line-height:1}
.mk-hero-img figcaption{display:none}
.mk-hero .mk-form{border-radius:var(--r);border:0;border-top:0;background:#F2F2F2;box-shadow:none;padding:28px}
.mk-hero .mk-form .field input,.mk-hero .mk-form .field select,.mk-hero .mk-form .field textarea{background:#fff;border:1px solid #D6D8DB;border-radius:10px;padding:10px 12px}
.mk-hero .mk-form .field input:focus,.mk-hero .mk-form .field select:focus,.mk-hero .mk-form .field textarea:focus{border:1px solid var(--btn);outline:2px solid color-mix(in srgb,var(--a) 35%,transparent)}
.mk-form .file-label{border-radius:10px;background:#fff}
.mk-form .btn{background:var(--btn);border-color:var(--btn);color:var(--btn-t);border-radius:12px;min-height:56px;font-size:16px}
.mk-form .btn:hover{background:var(--a);border-color:var(--a);color:var(--at)}

/* Modelle: graue Karten, horizontal wischbar auf dem Handy */
.mk-sec#modelle h2{text-align:center}
.mk-sec#modelle h2::after{margin:14px auto 0}
.mk-models{border-top:0;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mk-models li,.mk-models li:not(:nth-child(4n)),.mk-models li:not(:nth-child(3n)),.mk-models li:nth-child(odd){border:0}
.mk-models a{height:100%;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border-radius:var(--r);background:#F2F2F2;border-top:5px solid var(--a)}
.mk-models a:hover{background:#EAEAEA}
.mk-models span{font-weight:600;font-size:32px}
.mk-models small{font-size:15px;color:var(--ink-2);line-height:1.45;flex:1}
.mk-models em{font-style:normal;display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:10px;border-radius:12px;background:var(--btn);color:var(--btn-t);font-weight:600;font-size:15px}
.mk-models a:hover em{background:var(--a);color:var(--at)}

/* Wert-Punkte und Ablauf als Karten */
.mk-points li{border-top:0;background:#F2F2F2;border-radius:18px;padding:20px 20px 18px}
.mk-steps li{background:#F2F2F2;border-radius:18px;padding:22px 20px 18px}
.mk-steps::before{display:none}
.mk-faq div{border-bottom:1px solid var(--line)}

@media (max-width:820px){
  .mk-hero,.mk-hero-noimg{grid-template-areas:'img' 'txt' 'form'}
  .mk-hero-noimg{grid-template-areas:'txt' 'form'}
}
@media (max-width:600px){
  .mk-hdr-in{justify-content:space-between}
  .mk-logo{font-size:20px}
  .mk-tel{margin-left:auto}
  .mk-tel span{display:none}
  .mk-ico{width:27px;height:27px}
  .mk-hero{padding-top:16px}
  .mk-hero-img{margin:0}
  .mk-card img{aspect-ratio:3/4}
  .mk-card-txt{font-size:17px}
  .mk-hero .mk-form{margin:0;border-radius:var(--r);padding:22px 18px}
  .mk-models{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 6px;gap:14px;scrollbar-width:none}
  .mk-models li{flex:0 0 84%;scroll-snap-align:center}
  .mk-models span{font-size:28px}
  .mk-mbar a:last-child{background:var(--btn);color:var(--btn-t)}
}