/* Spec 080: /modelle kompakt. Auswahlfeld im Hero (Zone -> Studio -> Termin)
   und verdichtete Inhalte. Nur fuer new/modelle.html, Tokens aus
   back-to-work.css (--lx-*). Radius <= 8px, Buttons 6px, kein Uppercase. */

.mk{--mk-ink: var(--lx-sea-700); --mk-soft: var(--lx-ink-soft); --mk-line: var(--lx-line); --mk-blue: var(--lx-cta);
  --mk-card: #fff; --mk-gap: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem); --mk-base: #f6f9fe;
  background: var(--mk-base);}

/* Koernige Verlaufsgrafiken (fal, Spec 080) je Abschnitt. Sie ragen in die
   Nachbarn hinein und laufen per Maske aus: keine horizontale Kante, keine Farbbaender. */
.mk-hero, .mk-sec{position: relative; isolation: isolate;}
.mk-bg{position: absolute; inset-inline: 0; inset-block: -7rem; z-index: -1; pointer-events: none;
  background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%);}
/* Navigation ohne eigene Flaeche und ohne Trennlinie: die Hero-Seide liegt
   auch hinter dem Menue. Nach dem Scrollen milchig, weiterhin ohne Linie. */
.mk-body .nav{background: transparent; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color 240ms ease, -webkit-backdrop-filter 240ms ease, backdrop-filter 240ms ease;}
.mk-body.mk-nav-solid .nav{background: rgba(246, 249, 254, .78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);}
.mk-bg--hero{inset-block: -9rem -10rem; background-image: url("/assets/img/modelle/mk-bg-hero.webp");
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);}
.mk-bg--warum{background-image: url("/assets/img/modelle/mk-bg-warum.webp"); background-position: 70% 60%; opacity: .85;}
.mk-bg--final{inset-block-end: 0; background-image: url("/assets/img/modelle/mk-bg-final.webp");
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);}

/* Marker: gemalter Pinselstrich als Grafik, mit Ueberstand, Wort bleibt ganz lesbar. */
.mk-mark{background: url("/assets/img/modelle/mk-marker.svg?v=2") 0 55% / 100% 92% no-repeat;
  padding-inline: 0.25em 0.3em; margin-inline: -0.25em -0.3em; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;}
.mk h1 .mk-mark, .mk h2 .mk-mark{background-size: 100% 66%; background-position: 0 82%;}
.mk *{box-sizing: border-box;}
.mk-wrap{inline-size: min(100% - 2 * var(--lx-gutter), 82rem); margin-inline: auto;}
.mk h1, .mk h2, .mk h3{font-family: var(--lx-font-display); color: var(--mk-ink); margin: 0;}
.mk p{margin: 0;}
.mk-ico{inline-size: 1.1em; block-size: 1.1em; flex: none;}

/* ---------------- Hero ---------------- */
.mk-hero{padding-block: clamp(0.75rem, 0.4rem + 1.2vw, 1.75rem) clamp(1.5rem, 1rem + 2vw, 3rem);}
.mk-hero__grid{display: grid; gap: clamp(1rem, 0.5rem + 2vw, 3rem); align-items: start;}
@media (min-width: 960px){
  .mk-hero__grid{grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center;}
}
.mk-crumb{display: flex; gap: 0.4rem; font-family: var(--lx-font-body); font-size: var(--lx-text-xs); color: #6b7a90; margin-block-end: 0.25rem;}
.mk-crumb a{color: inherit;}
.mk-intro{display: flex; flex-direction: column; gap: clamp(0.6rem, 0.45rem + 0.5vw, 1rem);}
.mk .mk-intro h1{font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;}
.mk-intro .lx-doodle-underline{block-size: 0.35em;}

.mk-proof{display: flex; flex-direction: column; gap: clamp(0.6rem, 0.45rem + 0.5vw, 1rem);}
.mk-plaetze{display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-family: var(--lx-font-body);
  font-size: var(--lx-text-sm); font-weight: 600; color: var(--lx-pink-700);}
.mk-plaetze__bar{position: relative; inline-size: 7.5rem; block-size: 5px; border-radius: 3px; background: #cfdcf0; overflow: hidden;}
.mk-plaetze__bar > span{position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 30%; background: var(--mk-blue); border-radius: 3px;}

.mk-wert{display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-family: var(--lx-font-body); color: var(--mk-soft);}
.mk-wert > b{font-family: var(--lx-font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; color: var(--mk-blue); line-height: 1;}
.mk-wert s{color: var(--mk-soft);}
.mk-wert__info{flex-basis: 100%; font-size: var(--lx-text-xs);}
.mk-lead{font-family: var(--lx-font-body); font-size: var(--lx-text-base); line-height: 1.55; color: var(--mk-soft); max-inline-size: 46ch;}

.mk-checks{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-family: var(--lx-font-body);
  font-size: var(--lx-text-sm); color: var(--lx-ink);}
.mk-checks li{display: flex; gap: 0.55rem; align-items: flex-start; line-height: 1.4;}
.mk-checks .mk-ico{color: var(--mk-blue); margin-block-start: 0.12em;}

.mk-goog{display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-family: var(--lx-font-body);
  font-size: var(--lx-text-sm); color: var(--lx-ink); text-decoration: none;}
.mk-goog:hover{text-decoration: underline;}
.mk-goog__g svg{inline-size: 18px; block-size: 18px; display: block;}
.mk-goog__stars{color: #f5a623; letter-spacing: 0.04em;}

/* ---------------- Auswahlfeld ---------------- */
.mk-picker{background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 8px;
  box-shadow: 0 24px 60px -30px rgba(0, 58, 128, .35);
  padding: clamp(0.75rem, 0.55rem + 0.8vw, 1.25rem); min-inline-size: 0;}

.mk-steps{list-style: none; margin: 0 0 clamp(0.6rem, 0.45rem + 0.5vw, 0.9rem); padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; font-family: var(--lx-font-body); counter-reset: none;}
.mk-steps li{position: relative; display: flex; align-items: center; gap: 0.45rem; padding-block-end: 0.55rem; min-inline-size: 0;
  font-size: var(--lx-text-xs); color: #7c8ba0;}
.mk-steps li::after{content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; border-radius: 2px; background: #e3ebf6;
  transition: background-color 600ms var(--mk-ease);}
.mk-steps li{transition: color 500ms var(--mk-ease);}
.mk-steps__n{display: grid; place-items: center; flex: none; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%;
  border: 1.5px solid currentColor; font-weight: 700; font-size: 0.75rem; line-height: 1;}
.mk-steps__t{font-weight: 600;}
.mk-steps__v{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mk-soft); font-weight: 400;}
.mk-steps__v:not(:empty)::before{content: "· "; }
.mk-steps li.is-current{color: var(--mk-ink);}
.mk-steps li.is-current::after{background: var(--mk-blue);}
.mk-steps li.is-done{color: var(--mk-blue);}
.mk-steps li.is-done::after{background: #9fc2ea;}
.mk-steps li.is-done .mk-steps__n{background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; font-size: 0;}
.mk-steps li.is-done .mk-steps__n::before{content: ""; inline-size: 0.6rem; block-size: 0.32rem; border: solid #fff; border-width: 0 0 2px 2px;
  rotate: -45deg; translate: 0 -1px;}
.mk-steps li::after{transform-origin: left center;}
@media (max-width: 1200px){ .mk-steps__v{display: none;} }
@media (max-width: 480px){ .mk-steps li:not(.is-current) .mk-steps__t{display: none;} }

/* Buehne: drei Panels liegen uebereinander. Das aktive steht im Fluss und
   bestimmt die Hoehe; die anderen blenden weich aus, mit kurzem Versatz und
   leichter Unschaerfe. Lange, sanft auslaufende Kurven statt harter Schieber. */
.mk{--mk-ease: cubic-bezier(.22, 1, .36, 1); --mk-dur: 620ms;}
.mk-stage{position: relative; overflow: hidden; transition: block-size var(--mk-dur) var(--mk-ease);}
.mk-panel{position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%;
  opacity: 0; visibility: hidden; filter: blur(4px); transform: translateX(var(--mk-shift, 6%));
  transition: opacity 420ms var(--mk-ease), transform var(--mk-dur) var(--mk-ease), filter 480ms var(--mk-ease), visibility 0s linear var(--mk-dur);}
.mk-panel.is-before{--mk-shift: -6%;}
.mk-panel.is-after{--mk-shift: 6%;}
.mk-panel.is-active{position: relative; opacity: 1; visibility: visible; filter: none; transform: none;
  transition: opacity 520ms var(--mk-ease) 90ms, transform var(--mk-dur) var(--mk-ease), filter 520ms var(--mk-ease) 60ms, visibility 0s;}
[dir="rtl"] .mk-panel.is-before{--mk-shift: 6%;}
[dir="rtl"] .mk-panel.is-after{--mk-shift: -6%;}
[dir="rtl"] .mk-back .mk-ico, [dir="rtl"] .mk-studio__go, [dir="rtl"] .mk-gender__go{scale: -1 1;}

/* Gestaffelter Einlauf der Kacheln nach jedem Wechsel (und beim Laden). */
@keyframes mk-rise{from{opacity: 0; transform: translateY(10px) scale(.985);} to{opacity: 1; transform: none;}}
.mk-reveal li{animation: mk-rise 640ms var(--mk-ease) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms);}
.mk-reveal .mk-chosen, .mk-reveal .mk-panel__title{animation: mk-rise 560ms var(--mk-ease) both; animation-delay: 60ms;}
.mk-picker.is-instant .mk-panel, .mk-picker.is-instant .mk-stage{transition: none;}
@media (prefers-reduced-motion: reduce){
  .mk-panel, .mk-stage{transition: none !important; filter: none;}
  .mk-reveal li, .mk-reveal .mk-chosen, .mk-reveal .mk-panel__title{animation: none;}
}

.mk .mk-panel__title{font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2;
  margin-block-end: clamp(0.55rem, 0.45rem + 0.4vw, 0.85rem); outline: none;}
.mk-panel__note{margin-block-start: 0.6rem; font-family: var(--lx-font-body); font-size: var(--lx-text-xs); color: #6b7a90;}
.mk-picker__fine{margin-block-start: 0.7rem; font-family: var(--lx-font-body); font-size: var(--lx-text-xs); color: #6b7a90; line-height: 1.45;}

/* Zonen */
.mk-zones{list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mk-gap); grid-template-columns: repeat(2, minmax(0, 1fr));}
.mk-zone{all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 0.6rem; inline-size: 100%; block-size: 100%;
  padding: 0.35rem; border: 1.5px solid transparent; border-radius: 8px; background: rgba(230, 239, 255, .5); cursor: pointer;
  font-family: var(--lx-font-body); color: var(--lx-ink); -webkit-tap-highlight-color: transparent;
  transition: border-color 380ms var(--mk-ease), background-color 380ms var(--mk-ease), box-shadow 480ms var(--mk-ease), transform 480ms var(--mk-ease);}
.mk-zone:hover{background: #e3edfc; transform: translateY(-2px); box-shadow: 0 14px 28px -22px rgba(0, 58, 128, .45);}
.mk-zone__img img{transition: transform 900ms var(--mk-ease);}
.mk-zone:hover .mk-zone__img img{transform: scale(1.045);}
.mk-zone:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: -3px;}
.mk-zone:active{transform: scale(.985);}
.mk-zone[aria-pressed="true"]{border-color: var(--mk-blue); background: #fff;}
.mk-zone__img{position: relative; flex: none; inline-size: 3.6rem; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #e6efff;}
.mk-zone__img img, .mk-zone__img video{position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block;}
.mk-zone__img video{z-index: 1;}
.mk-zone__txt{display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0;}
.mk-zone__txt b{font-family: var(--lx-font-display); font-weight: 700; font-size: 0.98rem; color: var(--mk-ink); line-height: 1.2;}
.mk-preis{font-size: 0.8rem; color: #6b7a90; white-space: nowrap;}
.mk-preis__jetzt{font-weight: 700; color: var(--mk-blue);}
.mk-zone__check{position: absolute; inset-block-start: 0.4rem; inset-inline-end: 0.4rem; inline-size: 1.15rem; block-size: 1.15rem; padding: 0.15rem;
  border-radius: 50%; background: var(--mk-blue); color: #fff; stroke-width: 3; opacity: 0; scale: .6; z-index: 2;
  transition: opacity 360ms var(--mk-ease), scale 520ms cubic-bezier(.34, 1.4, .64, 1);}
.mk-zone[aria-pressed="true"] .mk-zone__check{opacity: 1; scale: 1;}

.mk-zones__note{display: flex; align-items: center; padding: 0.35rem 0.5rem; font-family: var(--lx-font-body); font-size: 0.78rem; line-height: 1.4; color: #6b7a90;}
.mk-zones__note b{color: var(--mk-ink);}

@media (min-width: 640px){
  .mk-zones{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .mk-zone{flex-direction: column; align-items: stretch; gap: 0.45rem; padding: 0.4rem 0.4rem 0.6rem;}
  .mk-zone__img{inline-size: 100%; aspect-ratio: 4 / 3;}
  .mk-zone__txt{padding-inline: 0.2rem;}
  .mk-zone__check{inset-block-start: 0.65rem; inset-inline-end: 0.65rem;}
  .mk-zones__note{padding: 0.6rem;}
}

/* Studios */
.mk-chosen{display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem 0.4rem 0.25rem; margin-block-end: 0.8rem;
  border-radius: 8px; background: #eef4ff; font-family: var(--lx-font-body);}
.mk-back{all: unset; box-sizing: border-box; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 6px;
  color: var(--mk-ink); cursor: pointer; flex: none;}
.mk-back:hover{background: #dbe8fb;}
.mk-back:focus-visible, .mk-chosen__edit:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: 1px;}
.mk-back .mk-ico{inline-size: 1.25rem; block-size: 1.25rem;}
.mk-chosen__img{flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 6px; overflow: hidden; background: #dbe8fb;}
.mk-chosen__img img{inline-size: 100%; block-size: 100%; object-fit: cover; display: block;}
.mk-chosen__txt{display: flex; flex-direction: column; min-inline-size: 0; flex: 1;}
.mk-chosen__txt small{font-size: 0.75rem; color: #6b7a90;}
.mk-chosen__txt b{font-family: var(--lx-font-display); color: var(--mk-ink); font-size: 1rem; line-height: 1.2;}
.mk-chosen__edit{all: unset; cursor: pointer; font-size: var(--lx-text-sm); font-weight: 600; color: var(--mk-blue); text-decoration: underline;
  text-underline-offset: 3px; padding: 0.3rem 0.4rem; border-radius: 4px;}

.mk-studios{list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mk-gap);}
.mk-studio{all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 0.75rem; inline-size: 100%; block-size: 100%;
  padding: 0.4rem 0.6rem 0.4rem 0.4rem; border: 1.5px solid transparent; border-radius: 8px; background: rgba(230, 239, 255, .5); cursor: pointer;
  font-family: var(--lx-font-body); color: var(--lx-ink); -webkit-tap-highlight-color: transparent;
  transition: border-color 380ms var(--mk-ease), background-color 380ms var(--mk-ease), box-shadow 480ms var(--mk-ease), transform 480ms var(--mk-ease);}
.mk-studio:hover{background: #e3edfc; transform: translateY(-2px); box-shadow: 0 14px 28px -22px rgba(0, 58, 128, .45);}
.mk-studio__img img{transition: transform 900ms var(--mk-ease);}
.mk-studio:hover .mk-studio__img img{transform: scale(1.045);}
.mk-studio:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: -3px;}
.mk-studio:active{transform: scale(.99);}
.mk-studio[aria-pressed="true"]{border-color: var(--mk-blue); background: #fff;}
.mk-studio__img{flex: none; inline-size: 5.2rem; aspect-ratio: 400 / 268; border-radius: 6px; overflow: hidden; background: #e6efff;}
.mk-studio__img img{inline-size: 100%; block-size: 100%; object-fit: cover; display: block;}
.mk-studio__txt{display: flex; flex-direction: column; min-inline-size: 0; flex: 1; line-height: 1.3;}
.mk-studio__txt small{font-size: 0.75rem; color: #6b7a90;}
.mk-studio__txt b{font-family: var(--lx-font-display); font-weight: 700; font-size: 1rem; color: var(--mk-ink);}
.mk-studio__adr{font-size: 0.8rem; color: #6b7a90;}
.mk-studio__frei{font-size: 0.8rem; font-weight: 600; color: #127a4a; min-block-size: 0;}
.mk-studio__frei:empty{display: none;}
.mk-studio__go{flex: none; color: var(--mk-blue); inline-size: 1.25rem; block-size: 1.25rem;}

@media (min-width: 640px){
  .mk-studios{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .mk-studio{align-items: stretch; padding: 0.4rem 0.5rem 0.4rem 0.4rem;}
  .mk-studio__img{inline-size: 40%; max-inline-size: 9rem;}
  .mk-studio__txt{justify-content: center; padding-block: 0.15rem;}
  .mk-studio__go{align-self: center;}
}

.mk-genders{list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mk-gap); grid-template-columns: repeat(2, minmax(0, 1fr));}
.mk-gender{all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
  inline-size: 100%; min-block-size: clamp(6.5rem, 5rem + 6vw, 10.5rem); padding: 1rem 1.1rem; border: 1.5px solid transparent; border-radius: 8px;
  background: rgba(230, 239, 255, .5); cursor: pointer; font-family: var(--lx-font-body); color: var(--lx-ink); -webkit-tap-highlight-color: transparent;
  transition: border-color 380ms var(--mk-ease), background-color 380ms var(--mk-ease), box-shadow 480ms var(--mk-ease), transform 480ms var(--mk-ease);}
.mk-gender:hover{background: #e3edfc; transform: translateY(-2px); box-shadow: 0 14px 28px -22px rgba(0, 58, 128, .45);}
.mk-gender:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: -3px;}
.mk-gender:active{transform: scale(.99);}
.mk-gender b{font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--mk-ink); letter-spacing: -0.015em;}
.mk-gender small{font-size: 0.85rem; color: #6b7a90;}
.mk-gender__go{position: absolute; inset-inline-end: 0.9rem; inset-block-end: 0.9rem; inline-size: 1.25rem; block-size: 1.25rem; color: var(--mk-blue);}
.mk-gender.is-remembered{background: rgba(255, 255, 255, .9); border-color: #cfe0f6;}
.mk-gender[aria-pressed="true"]{border-color: var(--mk-blue); background: #fff;}
.mk-ghint{margin-block-start: 0.8rem; font-family: var(--lx-font-body); font-size: 0.88rem; line-height: 1.5; color: var(--mk-ink);}
.mk-chosen__g{font-weight: 600; color: #4f6584;}

.mk-done{margin-block-start: 0.8rem;}
.mk-done__btn{inline-size: 100%; justify-content: center; gap: 0.5rem;}
.mk-done__btn .mk-ico{inline-size: 1.15rem; block-size: 1.15rem;}

/* ---------------- Inhalte ---------------- */
.mk-sec{padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);}
.mk-sec--tight{padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);}
.mk-sec--facts{padding-block: clamp(0.5rem, 0.3rem + 0.8vw, 1.25rem);}
.mk-head{display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; margin-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);}
.mk .mk-head h2, .mk .mk-why h2, .mk .mk-final h2{font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;}
.mk-head p{font-family: var(--lx-font-body); font-size: var(--lx-text-sm); color: var(--mk-soft);}
.mk-head a, .mk-bpg a, .mk-links a{color: var(--mk-blue);}

.mk-facts{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 900px){ .mk-facts{grid-template-columns: repeat(4, minmax(0, 1fr));} }
.mk-facts li{display: flex; gap: 0.65rem; align-items: flex-start; font-family: var(--lx-font-body); font-size: 0.82rem; color: #6b7a90; line-height: 1.35;}
.mk-facts .mk-ico{inline-size: 1.6rem; block-size: 1.6rem; color: var(--mk-blue); stroke-width: 1.7;}
.mk-facts b{display: block; font-family: var(--lx-font-display); font-size: 0.95rem; color: var(--mk-ink);}

.mk-flow{list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 900px){ .mk-flow{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;} }
.mk-flow li{position: relative; font-family: var(--lx-font-body);}
.mk-flow figure{margin: 0 0 0.6rem; aspect-ratio: 16 / 10;}
.mk-flow figure img{inline-size: 100%; block-size: 100%; object-fit: cover; display: block;}
.mk-flow__n{position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem;
  border-radius: 6px; background: #fff; color: var(--mk-ink); font-family: var(--lx-font-display); font-weight: 800; font-size: 0.9rem; z-index: 1;}
.mk .mk-flow h3{font-size: 1rem; font-weight: 700; margin-block-end: 0.2rem;}
.mk-flow p{font-size: 0.85rem; line-height: 1.45; color: var(--mk-soft);}

.mk-why{display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);}
@media (min-width: 960px){ .mk-why{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;} }
.mk-why__text{display: grid; gap: 0.8rem; font-family: var(--lx-font-body); font-size: var(--lx-text-base); line-height: 1.6; color: var(--mk-soft);}
.mk-why__text h2{margin-block-end: 0.2rem;}
.mk-why__fine{font-size: var(--lx-text-sm); color: #6b7a90;}
.mk-tech{display: flex; gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);}
.mk-tech__img{flex: none; inline-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); margin: 0; align-self: center; background: none; border-radius: 0;}
.mk-tech__img img{inline-size: 100%; block-size: auto; display: block; mix-blend-mode: multiply;}
.mk-tech__body{display: grid; gap: 0.75rem; align-content: start; min-inline-size: 0;}
.mk .mk-tech h3{font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); font-weight: 800; line-height: 1.25;}
.mk-logos{display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;}
.mk-logos img{block-size: 1.6rem; inline-size: auto;}

.mk-faq{gap: 0.5rem;}
@media (min-width: 900px){ .btw .mk-faq{grid-template-columns: 1fr 1fr; align-items: start;} }
.btw .mk-faq summary{font-size: 0.98rem;}
.btw .mk-faq details, .btw .mk-faq details[open]{border: 0; border-block-end: 1px solid rgba(0, 58, 128, .12); border-radius: 0; background: transparent;}
.btw .mk-faq summary{padding-inline: 0;}
.btw .mk-faq .lx-faq__body{padding-inline: 0;}

.mk-bpg{display: grid; gap: 0.8rem 1.25rem; align-items: center;}
@media (min-width: 900px){ .mk-bpg{grid-template-columns: auto minmax(0, 1fr) auto;} }
.mk-bpg__ico{inline-size: 2.2rem; block-size: 2.2rem; color: var(--mk-blue); stroke-width: 1.6;}
.mk .mk-bpg__text h2{font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); font-weight: 800; line-height: 1.25; margin-block-end: 0.3rem;}
.mk-bpg__text p{font-family: var(--lx-font-body); font-size: 0.85rem; line-height: 1.5; color: var(--mk-soft);}
.mk-bpg__btns{display: flex; flex-wrap: wrap; gap: 0.5rem;}
.mk-bpg__btns .lx-btn{padding: 0.55rem 0.9rem; font-size: 0.9rem;}

.mk-links{display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-block-start: 1rem; font-family: var(--lx-font-body); font-size: var(--lx-text-sm); color: #6b7a90;}
.mk-links a{text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #a9c6e8;}
.mk-links a:hover{text-decoration-color: currentColor;}

.mk-final__grid{display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); align-items: center;}
@media (min-width: 900px){ .mk-final__grid{grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);} }
.mk-final__grid > div{display: grid; gap: 0.8rem; justify-items: start;}
.mk-final__cta{margin-block-start: 0.3rem;}
.mk-final__cta .lx-btn{gap: 0.55rem;}
.mk-final__vid{margin: 0; aspect-ratio: 4 / 3;}
.mk-final__vid video{inline-size: 100%; block-size: 100%; object-fit: cover; display: block;}
.mk-fine{font-family: var(--lx-font-body); font-size: var(--lx-text-xs); color: #6b7a90;}

/* ---------------- Mitlaufende Leiste ---------------- */
.mk-sticky{transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important; transition-duration: 560ms !important; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lx-z-sticky, 50); padding: 0.6rem var(--lx-gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-block-start: 1px solid var(--mk-line); box-shadow: 0 -10px 30px -20px rgba(0, 58, 128, .35);
  transform: translateY(110%); transition: transform 280ms var(--lx-ease);}
.mk-sticky.is-visible{transform: none;}
.mk-sticky__in{inline-size: min(100%, 82rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.mk-sticky__txt{display: flex; flex-direction: column; min-inline-size: 0; font-family: var(--lx-font-body); line-height: 1.25;}
.mk-sticky__txt > b{font-family: var(--lx-font-display); color: var(--mk-ink); font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mk-sticky__txt small{font-size: 0.78rem; color: #6b7a90;}
.mk-sticky .lx-btn{flex: none; padding: 0.65rem 1.1rem; font-size: 0.95rem;}

/* Telefon: Intro ruhig und zentriert, mit Luft bis zum Auswahlfeld. */
@media (max-width: 959px){
  .mk-lead, .mk-intro .mk-checks, .mk-wert__info{display: none;}
  .mk-hero{padding-block-start: clamp(1.25rem, 1rem + 2vw, 2rem);}
  .mk-hero__grid{gap: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);}
  .mk-intro{align-items: center; text-align: center; gap: 0.9rem;}
  .mk .mk-intro h1{font-size: clamp(1.75rem, 1.2rem + 3vw, 2.6rem); line-height: 1.1; text-wrap: balance; margin-inline: auto;}
  .mk-plaetze--hero{flex-direction: column; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;}
  .mk-plaetze--hero .mk-plaetze__bar{inline-size: 9rem; block-size: 4px;}
  .mk-proof{display: flex; flex-direction: column; align-items: center; gap: 0.55rem;}
  .mk-wert{justify-content: center; align-items: baseline; gap: 0.5rem;}
  .mk-wert > b{font-size: 1.9rem;}
  .mk-goog{align-self: center; font-size: 0.82rem; color: #4f6584;}
}
@media (max-width: 639px){
  .mk-zones__note{grid-column: 1 / -1; padding-block: 0.1rem;}
  .mk-studio{padding-block: 0.3rem;}
  .mk-studio__img{inline-size: 4.4rem;}
  .mk-studio__adr{display: none;}
  .mk-chosen{margin-block-end: 0.6rem;}
}
@media (max-width: 380px){
  .mk-zone{gap: 0.45rem;}
  .mk-zone__img{inline-size: 3rem;}
  .mk-zone__txt b{font-size: 0.9rem;}
  .mk-preis{font-size: 0.74rem;}
}
/* Sehr breite Fenster: etwas mehr Luft, Aufbau bleibt gleich. */
@media (min-width: 2200px){
  .mk-wrap, .mk-sticky__in{inline-size: min(100% - 2 * var(--lx-gutter), 92rem);}
}

/* Ersparnis deutlich: Originalpreis rot und kraeftig, handgezogener roter
   Strich als Grafik (mk-strich.svg), 0 € groesser und schwerer. */
.mk-preis s, .mk-wert s{position: relative; display: inline-block; text-decoration: none; color: #c8102e; font-weight: 800; white-space: nowrap;}
.mk-preis s::after, .mk-wert s::after{content: ""; position: absolute; inset: 12% -8% 6%; pointer-events: none;
  background: url("/assets/img/modelle/mk-strich.svg?v=1") center / 100% 100% no-repeat;}
.mk-preis{display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; font-size: 0.78rem; color: #6b7a90; white-space: normal;}
.mk-preis__jetzt{font-family: var(--lx-font-display); font-size: 1.12rem; font-weight: 900; color: var(--mk-blue); letter-spacing: -0.01em;}
.mk-preis__statt s{font-size: 0.92rem;}
.mk-wert{gap: 0.2rem 0.8rem;}
.mk-wert > b{font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight: 900;}
.mk-wert s{font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);}