/* Magic Milk Vertrags-Einfuehrung
   Vorgeschaltetes Bildschirm-Onboarding; im Druck bewusst ausgeblendet. */
html.mmci-onboarding-active { overflow: hidden; }

.mm-contract-intro {
  --mmci-red: #e5142a;
  --mmci-pink: #ff4b7e;
  --mmci-ink: #f7eff2;
  --mmci-muted: #bbaeb4;
  position: fixed;
  inset: 0;
  z-index: 1550;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(680px 390px at 88% 5%, rgba(255, 75, 126, .12), transparent 64%),
    radial-gradient(540px 360px at 2% 100%, rgba(229, 20, 42, .13), transparent 67%),
    #120d10;
  color: var(--mmci-ink);
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.mmci-onboarding-leaving .mm-contract-intro { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.mm-contract-intro[hidden] { display: none !important; }

.mm-contract-intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--mmci-red), var(--mmci-pink) 55%, #ffad72);
}

.mmci__shell {
  width: min(1080px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) clamp(18px, 5vw, 58px) clamp(42px, 7vw, 78px);
}

.mmci__choice {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - clamp(76px, 12vw, 142px));
}

.mmci__choice[hidden],
.mmci__guide[hidden] { display: none !important; }

.mmci__choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.mmci__choice-copy { min-width: 0; }

.mmci__choice-copy h2,
.mmci__guide-header h2 {
  max-width: 660px;
  margin: 0;
  color: var(--mmci-ink);
  font: 800 clamp(34px, 5.1vw, 62px)/.98 "Sora AUREON", "Bricolage Grotesque", "Manrope", sans-serif !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.mmci__choice-copy h2:focus,
.mmci__guide-header h2:focus { outline: none; }

.mmci__choice-copy > p,
.mmci__guide-header > p {
  max-width: 610px;
  margin: 17px 0 0;
  color: var(--mmci-muted);
  font: 500 15px/1.65 "Manrope", sans-serif;
}

.mmci__route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

/* 11.09.2026: Aufbau der AUREON-Anmeldemaske, farblich an die beiden
   Illustrationen angepasst. Die kraeftigen Farben sitzen auf der schmalen
   Kante und kleinen Orientierungselementen; die Kartenflaeche bleibt deckend,
   damit kein breiter weisser Metallreflex mehr durchscheint. */
.mmci__route {
  --mmci-route-a: #ff315f;
  --mmci-route-b: #8b5cf6;
  --mmci-route-c: #3488ff;
  --mmci-route-d: #ff6a3d;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 232px;
  padding: 22px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #100c0f;
  color: var(--mmci-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .44);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), box-shadow 420ms ease;
}

.mmci__route:nth-child(2) {
  --mmci-route-a: #20d486;
  --mmci-route-b: #3187ff;
  --mmci-route-c: #8658f6;
  --mmci-route-d: #ff315f;
}

/* Farbige 2-px-Kante statt einer grossflaechigen weissen Spiegelung. */
.mmci__route-metal {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(115deg,
    var(--mmci-route-a) 0%,
    var(--mmci-route-b) 31%,
    var(--mmci-route-c) 61%,
    var(--mmci-route-d) 100%);
  background-size: 180% 100%;
  background-position: 0% 0;
  pointer-events: none;
  animation: mmciRouteGlanz 9s ease-in-out infinite alternate;
}

/* Der fruehere helle Lichtkeil lag als breite Flaeche hinter der halbtransparenten
   Kartenfuellung. Er ist bewusst entfernt; die Kante bewegt nur ihre Farben. */
.mmci__route-metal::after {
  content: none;
}

.mmci__route:nth-child(2) .mmci__route-metal { animation-delay: -3.5s; }

@keyframes mmciRouteGlanz {
  to { background-position: 100% 0; }
}

/* Die Karten kommen versetzt herein, sobald die Auswahl erscheint. */
@keyframes mmciRouteEin {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

[data-mmci-choice]:not([hidden]) .mmci__route {
  animation: mmciRouteEin .62s cubic-bezier(.22, .61, .36, 1) both;
}

[data-mmci-choice]:not([hidden]) .mmci__route:nth-child(2) { animation-delay: .13s; }

/* Sicherheitsgurt: Ist das Einblenden aus irgendeinem Grund nicht gelaufen,
   steht die Karte trotzdem da. Inhalt haengt nie an einer Animation. */
.mmci__route-grid[data-mmci-da="1"] .mmci__route { animation-name: none; opacity: 1; transform: none; }

/* Pausiert, sobald die Karten aus dem Bild sind oder der Tab versteckt ist.
   Nur die Dauerlaeufer - das Einblenden bleibt davon unberuehrt. */
.mmci__route-grid[data-mmci-sicht="0"] .mmci__route-metal,
.mmci__route-grid[data-mmci-sicht="0"] .mmci__route-metal::after,
.mmci__route-grid[data-mmci-sicht="0"] .mmci__route::after { animation-play-state: paused; }

/* Die eigentliche Kartenflaeche. Laesst 2px Metall als Kante stehen. */
.mmci__route::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--mmci-spot-x, 16%) var(--mmci-spot-y, 0%), rgba(134, 88, 246, .13), transparent 34%),
    radial-gradient(circle at 95% 94%, rgba(32, 212, 134, .075), transparent 34%),
    #161115;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
  transition: background 420ms ease;
}

/* Lichtstreifen oben - laeuft nur bei Zeigen oder Fokus. */
.mmci__route::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: -34%;
  width: 30%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--mmci-route-a), var(--mmci-route-b), var(--mmci-route-c), transparent);
  opacity: 0;
  pointer-events: none;
  animation: mmciRouteBeam 5.2s cubic-bezier(.22, .61, .36, 1) infinite;
}

.mmci__route:nth-child(2)::after { animation-delay: 2.6s; }

.mmci__route--guided::before {
  background:
    radial-gradient(circle at var(--mmci-spot-x, 16%) var(--mmci-spot-y, 0%), rgba(255, 49, 95, .16), transparent 35%),
    radial-gradient(circle at 96% 92%, rgba(52, 136, 255, .10), transparent 38%),
    #161115;
}

.mmci__route:hover,
.mmci__route:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 34px 92px rgba(0, 0, 0, .5);
}

.mmci__route:active { transform: translateY(0) scale(.99); }
.mmci__route:focus-visible { outline: 2px solid #ff718e; outline-offset: 3px; }

@keyframes mmciRouteBeam {
  0% { left: -34%; opacity: 0; }
  6% { opacity: .46; }
  34% { opacity: .46; }
  42% { left: 104%; opacity: 0; }
  100% { left: 104%; opacity: 0; }
}

.mmci__route-top,
.mmci__route-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mmci__route-top { justify-content: space-between; }

/* Pille oben links - Vorbild .dash-auth__secure */
.mmci__route-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--mmci-route-b) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mmci-route-b) 10%, transparent);
  color: #f3e9ec;
  font: 700 11.5px/1 "Manrope", sans-serif;
}

.mmci__route-chip-ico {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Unterschied zwischen den Wegen traegt der Rahmen, nicht die Schriftfarbe.
   Rosa Text auf Dunkel ist fest verboten (Mert, 30.08.2026). */
.mmci__route--guided .mmci__route-chip {
  border-color: rgba(255, 80, 122, .55);
  background: rgba(255, 49, 95, .10);
  color: var(--mmci-ink);
}
.mmci__route--guided .mmci__route-chip-ico { color: #ff6488; }
.mmci__route:nth-child(2) .mmci__route-chip-ico { color: #41e49c; }

/* Zaehler oben rechts - Vorbild .dash-auth__step-pill */
.mmci__route-step {
  flex: none;
  color: color-mix(in srgb, var(--mmci-route-c) 72%, white);
  font: 800 10px/1 "Manrope", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.mmci__route-visual {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(165px, 24vw, 235px);
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mmci-route-c) 38%, transparent);
  border-radius: 14px;
  background: #eef3f7;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), 0 0 0 1px color-mix(in srgb, var(--mmci-route-a) 13%, transparent);
  pointer-events: none;
}

.mmci__route-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
  pointer-events: none;
}

.mmci__route-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}

.mmci__route:hover .mmci__route-visual img,
.mmci__route:focus-visible .mmci__route-visual img {
  transform: scale(1.018);
}

.mmci__route > strong {
  display: block;
  margin-top: 22px;
  color: var(--mmci-ink);
  font: 750 clamp(20px, 2.3vw, 27px)/1.1 "Sora AUREON", "Bricolage Grotesque", sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.mmci__route > strong::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mmci-route-a), var(--mmci-route-b), var(--mmci-route-c));
  box-shadow: 0 0 14px color-mix(in srgb, var(--mmci-route-b) 30%, transparent);
}

.mmci__route-copy {
  display: block;
  margin-top: 9px;
  margin-bottom: clamp(20px, 2vw, 24px);
  color: var(--mmci-muted);
  font: 500 12px/1.6 "Manrope", sans-serif;
}

/* Exakt derselbe Liquid-Metal-Knopf wie in der AUREON-Portal-Anmeldung. */
.mmci__route-action {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 58px;
  margin-top: auto;
  padding: 0 52px 0 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 800 15.5px/1 "Manrope", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, opacity 180ms ease;
}

.mmci__route-action::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 75, 126, .18), transparent 42%),
    linear-gradient(180deg, #21171b 0%, #0d0a0c 100%);
  box-shadow:
    inset 0 1px .5px rgba(255, 255, 255, .26),
    inset 0 -1px .5px rgba(0, 0, 0, .72);
}

.mmci__route-action-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.mmci__route-action .dash-auth__metal {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(105deg, #393337 0%, #f9f7f8 20%, #625a5f 37%, #fff 52%, #332d31 69%, #d7d1d4 84%, #4f484c 100%);
  pointer-events: none;
}

.mmci__route-action .dash-auth__metal canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.mmci__route-action::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 2;
  transform: translateY(-52%);
  font-size: 22px;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.mmci__route:hover .mmci__route-action {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .08);
}

.mmci__route:active .mmci__route-action {
  transform: translateY(0) scale(.985);
}

.mmci__route:focus-visible .mmci__route-action {
  outline: 3px solid rgba(255, 75, 126, .72);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mmci__route { transition: none; }
  .mmci__route:hover, .mmci__route:focus-visible { transform: none; }
  .mmci__route-visual img { transition: none; }
  .mmci__route:hover .mmci__route-visual img,
  .mmci__route:focus-visible .mmci__route-visual img { transform: none; }
  .mmci__route-metal, .mmci__route-metal::after, .mmci__route::after { animation: none; }
  [data-mmci-choice]:not([hidden]) .mmci__route { animation: none; opacity: 1; transform: none; }
  .mmci__button,
  .mmci__button svg { transition: none; }
}

.mmci__choice-note {
  margin-top: 16px !important;
  color: #8f8389 !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}

.mmci__guide { padding-top: 8px; }
.mmci__guide-header { max-width: 790px; margin: 0 0 26px; padding-right: 54px; }
.mmci__guide-header .mmci__brand-logo {
  display: block;
  width: clamp(68px, 8vw, 82px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 20px;
  object-fit: contain;
}
.mmci__guide-header h2 { font-size: clamp(31px, 4.7vw, 54px) !important; }

/* RollingText: Originalwort bestimmt Breite und Umbruch; einzelne Rollen
   liegen darueber. Nach dem Einrollen steht wieder nur der Originaltext. */
.mmci__title-word { display: inline-block; position: relative; white-space: nowrap; }
.mmci__rolling-base { opacity: 0; }
.mmci__rolling-cell { position: absolute; top: 0; overflow: hidden; pointer-events: none; }
.mmci__rolling-reel { display: block; will-change: transform; }
.mmci__rolling-reel > span { display: block; text-align: left; }

@media (prefers-reduced-motion: no-preference) {
  .mmci__guide-header[data-mmci-heading-motion="waiting"] .mmci__eyebrow {
    opacity: 0;
  }
  .mmci__guide-header[data-mmci-heading-motion="playing"] .mmci__eyebrow {
    animation: mmci-title-label-in 560ms cubic-bezier(.23, 1, .32, 1) both;
  }
  .mmci__guide-header[data-mmci-heading-motion="playing"] .mmci__eyebrow::before {
    transform-origin: left center;
    animation: mmci-title-line-in 760ms cubic-bezier(.23, 1, .32, 1) both;
  }
}

@keyframes mmci-title-label-in {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes mmci-title-line-in {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}

@media print, (prefers-reduced-motion: reduce) {
  .mmci__rolling-base { opacity: 1 !important; }
  .mmci__rolling-cell { display: none !important; }
  .mmci__guide-header .mmci__title-word,
  .mmci__guide-header .mmci__eyebrow,
  .mmci__guide-header .mmci__eyebrow::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.mmci__tabs--intro { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mmci__intro-again {
  min-height: 38px;
  margin-top: 15px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #b8abb1;
  font: 700 10.5px/1.35 "Manrope", sans-serif;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.mmci__intro-again:hover { color: #fff; border-bottom-color: #ff718e; }
.mmci__intro-again:focus-visible { outline: 2px solid #ff718e; outline-offset: 3px; }

.mmci__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: 34px;
}

.mmci__header-copy { min-width: 0; }

.mmci__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  color: #ff8aa2;
  font: 750 11px/1.2 "Manrope", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mmci__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--mmci-pink);
}

.mmci__header h2 {
  max-width: 590px;
  margin: 0;
  color: var(--mmci-ink);
  font: 800 clamp(34px, 5.1vw, 62px)/.98 "Sora AUREON", "Bricolage Grotesque", "Manrope", sans-serif !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.mmci__header p {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--mmci-muted);
  font: 500 15px/1.65 "Manrope", sans-serif;
}

.mmci__attention {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding: 13px 14px;
  border-left: 2px solid var(--mmci-pink);
  background: rgba(255, 75, 126, .075);
}

.mmci__attention-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 113, 142, .55);
  border-radius: 50%;
  color: #ff8da4;
  font: 800 13px/1 "Manrope", sans-serif;
}

.mmci__attention div > strong,
.mmci__attention div > span { display: block; }
.mmci__attention strong { color: #fff; font: 800 12px/1.25 "Manrope", sans-serif; }
.mmci__attention div > span { margin-top: 3px; color: #bcaeb4; font: 500 11px/1.45 "Manrope", sans-serif; }

.mmci__hero-art {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: #a8d8ee;
  box-shadow: 0 24px 54px -34px rgba(255, 75, 126, .8);
}

.mmci__hero-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mmci__hero-art figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  background: rgba(18, 13, 16, .76);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 750 10px/1 "Manrope", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mmci__hero-art figcaption img { width: 22px; height: 22px; object-fit: contain; }

.mmci__essentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.mmci__essentials article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .028);
}

.mmci__essentials article > span {
  color: #ff6c87;
  font: 800 10px/1.3 "Manrope", sans-serif;
  letter-spacing: .08em;
}

.mmci__essentials strong {
  display: block;
  color: #f7eff2;
  font: 750 12px/1.3 "Manrope", sans-serif;
}

.mmci__essentials p {
  margin: 5px 0 0;
  color: var(--mmci-muted);
  font: 500 11px/1.48 "Manrope", sans-serif;
}

.mmci__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.mmci__tab {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #82767c;
  font: 700 12px/1.3 "Manrope", sans-serif;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mmci__tab:hover { color: #d8ccd1; }
.mmci__tab:active { transform: scale(.985); }
.mmci__tab[aria-selected="true"] {
  background: rgba(255, 255, 255, .075);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
}

.mmci__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 7px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mmci-red), var(--mmci-pink));
}

.mmci__tab:focus-visible,
.mmci__button:focus-visible,
.mmci__skip:focus-visible {
  outline: 2px solid #ff718e;
  outline-offset: 3px;
}

.mmci__button:focus-visible { border-radius: 999px; }

.mmci__back:focus-visible { outline: 2px solid #ff718e; outline-offset: 3px; }

.mmci__stage {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.mmci__panel {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(320px, 1.12fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  min-height: 410px;
  padding: clamp(18px, 3vw, 30px);
}

.mm-contract-intro.is-interactive .mmci__panel[hidden] { display: none; }

.mmci__copy { padding: 10px 0 10px clamp(2px, 1vw, 10px); }

.mmci__number {
  display: block;
  margin-bottom: 28px;
  color: #ff6c87;
  font: 800 12px/1 "Manrope", sans-serif;
  letter-spacing: .16em;
}

.mmci__copy h3 {
  margin: 0 0 13px;
  color: #fff;
  font: 800 clamp(26px, 3.4vw, 40px)/1.04 "Sora AUREON", "Bricolage Grotesque", "Manrope", sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.mmci__copy p {
  max-width: 38ch;
  margin: 0;
  color: var(--mmci-muted);
  font: 500 14px/1.68 "Manrope", sans-serif;
}

.mmci__fact-lines {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.mmci__fact-lines > div {
  display: grid;
  grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
}

.mmci__fact-lines strong { color: #fff; font: 800 12px/1.35 "Manrope", sans-serif; }
.mmci__fact-lines span { color: #a99ba1; font: 550 9.5px/1.48 "Manrope", sans-serif; }

.mmci__rule {
  margin-top: 20px;
  padding: 13px 14px;
  border-left: 2px solid var(--mmci-pink);
  background: rgba(255, 75, 126, .07);
}

.mmci__rule strong,
.mmci__rule span { display: block; }
.mmci__rule strong { color: #fff; font: 800 11px/1.2 "Manrope", sans-serif; }
.mmci__rule span { margin-top: 4px; color: #bbaeb4; font: 500 10px/1.5 "Manrope", sans-serif; }

.mmci__signals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.mmci__signals span { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: rgba(255, 255, 255, .03); color: #d8cdd1; font: 700 9.5px/1 "Manrope", sans-serif; }

.mmci__panel--summary { display: block; min-height: 0; padding: clamp(22px, 3.5vw, 38px); }
.mm-contract-intro.is-interactive .mmci__panel--summary[hidden] { display: none; }
.mmci__summary-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 30px; align-items: end; }
.mmci__summary-head .mmci__number { grid-column: 1 / -1; margin-bottom: -12px; }
.mmci__summary-head h3 { margin: 0; color: #fff; font: 800 clamp(28px, 4vw, 46px)/1 "Sora AUREON", "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
.mmci__summary-head p { margin: 0; color: var(--mmci-muted); font: 500 12px/1.6 "Manrope", sans-serif; }
.mmci__summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 26px; }
.mmci__summary-grid article { min-width: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(255, 255, 255, .028); }
.mmci__summary-grid strong,
.mmci__summary-grid span { display: block; }
.mmci__summary-grid strong { color: #fff; font: 800 11px/1.25 "Manrope", sans-serif; }
.mmci__summary-grid span { margin-top: 6px; color: #a99ba1; font: 500 9.5px/1.5 "Manrope", sans-serif; }
.mmci__summary-next { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-left: 2px solid var(--mmci-pink); background: rgba(255, 75, 126, .07); }
.mmci__summary-next strong { color: #fff; font: 800 11px/1.3 "Manrope", sans-serif; }
.mmci__summary-next span { color: #bbaeb4; font: 500 10px/1.45 "Manrope", sans-serif; }

.mmci__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: #eef2f5;
}

.mmci__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mmci__media--art {
  border: 0;
  background: transparent;
}

.mmci__media--art img {
  object-fit: cover;
  mix-blend-mode: normal;
}

.mmci__media figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 8px;
  background: rgba(18, 13, 16, .72);
  color: #f8f3f5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 650 10px/1.25 "Manrope", sans-serif;
}

.mmci__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.mmci__status {
  margin: 0 auto 0 0;
  color: #8f8389;
  font: 650 11px/1.3 "Manrope", sans-serif;
}

.mmci__skip {
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #b8abb1;
  font: 650 12px/1.3 "Manrope", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.mmci__back {
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #8f8389;
  font: 650 11px/1.3 "Manrope", sans-serif;
  cursor: pointer;
}

.mmci__back:hover { color: #fff; }

.mmci__skip:hover { color: #fff; }

.mmci__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 0 20px 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 75, 126, .13), transparent 42%) padding-box,
    linear-gradient(180deg, #21171b 0%, #0d0a0c 100%) padding-box,
    linear-gradient(105deg, #4b4448 0%, #f4f1f2 18%, #73696e 34%, #c9a76f 49%, #fbf9fa 62%, #625b72 78%, #433d41 100%) border-box;
  background-size: 100% 100%, 100% 100%, 220% 100%;
  background-position: 0 0, 0 0, 0% 50%;
  color: #fff;
  box-shadow:
    0 16px 30px -22px rgba(7, 4, 6, .92),
    inset 0 1px rgba(255, 255, 255, .08);
  font: 800 13px/1 "Manrope", sans-serif;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease;
}

.mmci__button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 38px -24px rgba(7, 4, 6, .96),
    0 0 0 1px rgba(255, 255, 255, .04),
    inset 0 1px rgba(255, 255, 255, .1);
}

.mmci__button:active { transform: translateY(0) scale(.985); }

.mmci__button svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.mmci__button:hover svg { transform: translateX(3px); }

/* Die Vergütung ist eine mögliche Spannbreite, keine feste Zusage. Die kleine
   Einordnung bleibt bewusst ruhig und verwendet die vorhandenen Theme-Farben. */
.mm-verguetung-range {
  font-size: clamp(16px, 3.8vw, 28px) !important;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.mm-verguetung-note {
  max-width: 23em;
  margin: 7px auto 0;
  color: var(--ink-soft);
  font: 600 9.5px/1.45 "Manrope", sans-serif;
  text-wrap: balance;
}

.mmci__management {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.mmci__panel--management { display: block; min-height: 470px; }
.mm-contract-intro.is-interactive .mmci__panel--management[hidden] { display: none; }

.mmci__management-eyebrow {
  display: block;
  margin-bottom: 13px;
  color: #ff8aa2;
  font: 800 10px/1.3 "Manrope", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mmci__management h3 {
  margin: 0;
  color: #fff;
  font: 800 clamp(30px, 4.3vw, 50px)/1 "Sora AUREON", "Bricolage Grotesque", "Manrope", sans-serif;
  letter-spacing: -.032em;
}

.mmci__management-copy > p {
  max-width: 48ch;
  margin: 17px 0 0;
  color: var(--mmci-muted);
  font: 500 14px/1.68 "Manrope", sans-serif;
}

.mmci__management-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.mmci__management-facts div {
  min-width: 0;
  padding: 13px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}

.mmci__management-facts strong,
.mmci__management-facts span { display: block; }
.mmci__management-facts strong { color: #fff; font: 800 14px/1.25 "Manrope", sans-serif; }
.mmci__management-facts span { margin-top: 3px; color: #9f9197; font: 600 9px/1.35 "Manrope", sans-serif; }

.mmci__management-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  margin-top: 18px;
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(255, 75, 126, .92), rgba(203, 12, 43, .96));
  color: #fff;
  box-shadow: 0 18px 38px -24px rgba(229, 20, 42, .9), inset 0 1px rgba(255, 255, 255, .32);
  font: 800 13px/1.25 "Manrope", sans-serif;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.mmci__management-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mmci__management-cta:active { transform: scale(.985); }
.mmci__management-cta:focus-visible { outline: 2px solid #ff718e; outline-offset: 3px; }
.mmci__management-cta,
.mmci__management-cta > span { color: #fff !important; }
.mmci__management-cta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mmci__management-copy > small { display: block; margin-top: 11px; color: #85777d; font: 500 9.5px/1.5 "Manrope", sans-serif; }

.mmci__management-visual { position: relative; min-width: 0; padding: 0; }

.mmci__world-art {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 17px;
  background: #fff;
}

.mmci__world-art img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.mmci__world-art figcaption { padding: 10px 12px; color: #4b3940; background: #f8f4f2; font: 650 9.5px/1.35 "Manrope", sans-serif; }

/* Hell ist eine eigene Gestaltung, nicht nur ein heller Seitenhintergrund.
   Der Metall-Hauptknopf bleibt in beiden Modi dunkel; Flaechen, Typografie,
   Linien und Schatten der Einfuehrung wechseln dagegen bewusst. */
:root[data-contract-theme="light"] .mm-contract-intro {
  --mmci-ink: #2b171f;
  --mmci-muted: #6d5961;
  border-color: rgba(77, 38, 51, .16);
  background:
    radial-gradient(680px 390px at 88% 5%, rgba(255, 75, 126, .10), transparent 64%),
    radial-gradient(540px 360px at 2% 100%, rgba(229, 20, 42, .075), transparent 67%),
    #fffaf7;
  color: var(--mmci-ink);
  box-shadow: 0 34px 76px -42px rgba(79, 42, 53, .28), inset 0 1px rgba(255, 255, 255, .9);
}

:root[data-contract-theme="light"] .mmci__eyebrow { color: #b70d22; }
/* Hellmodus: gleiche Bauart, helle Metallkante und helle Glasflaeche.
   Der Knopf unten bleibt dunkel - er ist die eine Aktion je Karte. */
:root[data-contract-theme="light"] .mmci__route {
  background: #fffdfd;
  box-shadow: 0 22px 54px -32px rgba(77, 38, 51, .5);
}
:root[data-contract-theme="light"] .mmci__route-metal {
  background: linear-gradient(115deg,
    var(--mmci-route-a) 0%,
    var(--mmci-route-b) 31%,
    var(--mmci-route-c) 61%,
    var(--mmci-route-d) 100%);
  background-size: 180% 100%;
}
:root[data-contract-theme="light"] .mmci__route::before {
  background:
    radial-gradient(circle at var(--mmci-spot-x, 16%) var(--mmci-spot-y, 0%), rgba(134, 88, 246, .075), transparent 34%),
    radial-gradient(circle at 95% 94%, rgba(32, 212, 134, .055), transparent 34%),
    #fffdfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
:root[data-contract-theme="light"] .mmci__route--guided::before {
  background:
    radial-gradient(circle at var(--mmci-spot-x, 16%) var(--mmci-spot-y, 0%), rgba(255, 49, 95, .085), transparent 36%),
    radial-gradient(circle at 96% 92%, rgba(52, 136, 255, .055), transparent 38%),
    #fffdfd;
}
:root[data-contract-theme="light"] .mmci__route::after {
  background: linear-gradient(90deg, transparent, var(--mmci-route-a), var(--mmci-route-b), var(--mmci-route-c), transparent);
}
:root[data-contract-theme="light"] .mmci__route:hover,
:root[data-contract-theme="light"] .mmci__route:focus-visible {
  box-shadow: 0 28px 66px -30px rgba(77, 38, 51, .58);
}
:root[data-contract-theme="light"] .mmci__route-chip {
  border-color: color-mix(in srgb, var(--mmci-route-b) 42%, transparent);
  background: color-mix(in srgb, var(--mmci-route-b) 8%, white);
  color: #47343d;
}
:root[data-contract-theme="light"] .mmci__route--guided .mmci__route-chip {
  border-color: rgba(229, 20, 42, .42);
  background: rgba(255, 49, 95, .075);
  color: #9e1229;
}
:root[data-contract-theme="light"] .mmci__route-step { color: #5a4650; }
:root[data-contract-theme="light"] .mmci__route-visual {
  border-color: color-mix(in srgb, var(--mmci-route-c) 33%, transparent);
  box-shadow: 0 16px 34px -22px rgba(77, 38, 51, .4), 0 0 0 1px color-mix(in srgb, var(--mmci-route-a) 11%, transparent);
}
:root[data-contract-theme="light"] .mmci__choice-note { color: #765f68 !important; }
:root[data-contract-theme="light"] .mmci__intro-again { color: #684f59; border-bottom-color: rgba(77, 38, 51, .24); }
:root[data-contract-theme="light"] .mmci__intro-again:hover { color: #2b171f; border-bottom-color: #b70d22; }
:root[data-contract-theme="light"] .mmci__attention {
  border-left-color: var(--mmci-red);
  background: #fff0f3;
}
:root[data-contract-theme="light"] .mmci__attention-mark {
  border-color: rgba(183, 13, 34, .4);
  color: #b70d22;
  background: rgba(255, 255, 255, .72);
}
:root[data-contract-theme="light"] .mmci__attention strong { color: #321a22; }
:root[data-contract-theme="light"] .mmci__attention div > span { color: #6b555e; }
:root[data-contract-theme="light"] .mmci__hero-art {
  border-color: rgba(72, 39, 49, .18);
  box-shadow: 0 24px 46px -30px rgba(122, 52, 74, .35);
}
:root[data-contract-theme="light"] .mmci__actions-slot .mm-pdfblob {
  border-color: rgba(77, 38, 51, .22) !important;
  background: rgba(255, 255, 255, .7) !important;
  color: #3a222b !important;
  box-shadow: 0 10px 26px -22px rgba(77, 38, 51, .5) !important;
}
:root[data-contract-theme="light"] .mmci__essentials article {
  border-color: rgba(77, 38, 51, .12);
  background: rgba(255, 255, 255, .7);
}
:root[data-contract-theme="light"] .mmci__essentials article > span { color: #b70d22; }
:root[data-contract-theme="light"] .mmci__essentials strong { color: #321a22; }
:root[data-contract-theme="light"] .mmci__tabs {
  border-color: rgba(77, 38, 51, .14);
  background: rgba(255, 255, 255, .68);
}
:root[data-contract-theme="light"] .mmci__tab { color: #765f68; }
:root[data-contract-theme="light"] .mmci__tab:hover { color: #321a22; }
:root[data-contract-theme="light"] .mmci__tab[aria-selected="true"] {
  background: #fff;
  color: #2b171f;
  box-shadow: 0 7px 20px -15px rgba(77, 38, 51, .45), inset 0 0 0 1px rgba(77, 38, 51, .08);
}
:root[data-contract-theme="light"] .mmci__stage {
  border-color: rgba(77, 38, 51, .14);
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px rgba(255, 255, 255, .95);
}
:root[data-contract-theme="light"] .mmci__number { color: #b70d22; }
:root[data-contract-theme="light"] .mmci__copy h3 { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__fact-lines > div,
:root[data-contract-theme="light"] .mmci__summary-grid article,
:root[data-contract-theme="light"] .mmci__signals span { border-color: rgba(77, 38, 51, .12); background: rgba(255, 255, 255, .72); }
:root[data-contract-theme="light"] .mmci__fact-lines strong,
:root[data-contract-theme="light"] .mmci__rule strong,
:root[data-contract-theme="light"] .mmci__summary-head h3,
:root[data-contract-theme="light"] .mmci__summary-grid strong,
:root[data-contract-theme="light"] .mmci__summary-next strong { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__fact-lines span,
:root[data-contract-theme="light"] .mmci__rule span,
:root[data-contract-theme="light"] .mmci__summary-grid span,
:root[data-contract-theme="light"] .mmci__summary-next span { color: #6d5961; }
:root[data-contract-theme="light"] .mmci__rule,
:root[data-contract-theme="light"] .mmci__summary-next { background: #fff0f3; }
:root[data-contract-theme="light"] .mmci__signals span { color: #5f4851; }
:root[data-contract-theme="light"] .mmci__media { border-color: rgba(77, 38, 51, .15); }
:root[data-contract-theme="light"] .mmci__footer { border-top-color: rgba(77, 38, 51, .12); }
:root[data-contract-theme="light"] .mmci__status { color: #765f68; }
:root[data-contract-theme="light"] .mmci__skip { color: #684f59; }
:root[data-contract-theme="light"] .mmci__skip:hover { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__back { color: #765f68; }
:root[data-contract-theme="light"] .mmci__back:hover { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__management-eyebrow { color: #b70d22; }
:root[data-contract-theme="light"] .mmci__management h3 { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__management-facts div { border-color: rgba(77, 38, 51, .13); background: rgba(255, 255, 255, .72); }
:root[data-contract-theme="light"] .mmci__management-facts strong { color: #2b171f; }
:root[data-contract-theme="light"] .mmci__management-facts span { color: #765f68; }
:root[data-contract-theme="light"] .mmci__management-copy > small { color: #6f5962; }
:root[data-contract-theme="light"] .mmci__world-art { border-color: rgba(77, 38, 51, .15); }

/* Wenn die Einfuehrung direkt angesprungen ist, ist die grosse Seitennavigation
   ohnehin ausgeblendet. Der Themenknopf darf dann nach oben ruecken, statt auf
   dem Kartenrand zu liegen. */
html.mmci-onboarding-active .mm-contract-theme-toggle {
  top: max(14px, env(safe-area-inset-top));
  z-index: 1600;
}

/* Die beiden globalen Helfer liegen sonst mitten ueber der gefuehrten Szene.
   Nur solange die Einfuehrung sichtbar ist, treten sie ruhig zurueck. */
html.mmci-onboarding-active nav[aria-label="Schnell zu einem Abschnitt"],
html.mmci-onboarding-active .aura-orb[aria-label*="Auri"],
html.mmci-onboarding-active .au-nav2 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

@media (prefers-reduced-motion: no-preference) {
  .mmci__choice.is-visible .mmci__choice-grid { animation: mmci-choice-enter 520ms cubic-bezier(.22, 1, .36, 1) both; }
  .mm-contract-intro.is-interactive .mmci__panel.is-active .mmci__copy,
  .mm-contract-intro.is-interactive .mmci__panel.is-active .mmci__media {
    animation: mmci-enter 440ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .mm-contract-intro.is-interactive .mmci__panel.is-active .mmci__media { animation-delay: 70ms; }
  .mmci__media img { transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }
  .mmci__panel.is-active .mmci__media:hover img { transform: scale(1.018); }
}

@keyframes mmci-choice-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes mmci-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .mm-contract-intro { width: 100%; border-radius: 0; }
  .mmci__shell { padding: 30px 18px max(34px, env(safe-area-inset-bottom)); }
  .mmci__choice { min-height: 0; }
  .mmci__choice-grid { grid-template-columns: 1fr; gap: 20px; }
  .mmci__choice-copy h2 { font-size: clamp(31px, 10vw, 42px) !important; }
  .mmci__choice-copy > p,
  .mmci__guide-header > p { margin-top: 12px; font-size: 13px; }
  .mmci__route-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .mmci__route { min-height: 208px; padding: 18px; border-radius: 18px; }
  .mmci__route::before { border-radius: 16px; }
  .mmci__route-visual { height: clamp(158px, 45vw, 190px); margin-top: 16px; border-radius: 12px; }
  .mmci__route > strong { margin-top: 18px; font-size: 23px; }
  .mmci__route-chip { min-height: 30px; padding: 0 11px; font-size: 11px; }
  .mmci__route-action { min-height: 58px; padding: 0 52px 0 24px; }
  .mmci__hero-art { aspect-ratio: 16 / 10; }
  .mmci__guide { padding-top: 2px; }
  .mmci__guide-header { margin-bottom: 20px; padding-right: 38px; }
  .mmci__guide-header h2 { font-size: 31px !important; }
  .mmci__tabs--intro { grid-template-columns: repeat(3, minmax(94px, 1fr)); }
  .mmci__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }
  .mmci__header h2 { font-size: clamp(31px, 10vw, 42px) !important; }
  .mmci__header p { margin-top: 12px; font-size: 13px; }
  .mmci__attention { margin-top: 16px; }
  .mmci__hero-art { aspect-ratio: 16 / 13; border-radius: 14px; }
  .mmci__hero-art > img { object-position: center 58%; }
  .mmci__essentials { grid-template-columns: 1fr; gap: 7px; }
  .mmci__essentials article { padding: 12px 13px; }
  .mmci__tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(106px, 1fr)); scrollbar-width: none; }
  .mmci__tabs::-webkit-scrollbar { display: none; }
  .mmci__tab { padding-inline: 8px; font-size: 11px; }
  .mmci__panel { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 16px; }
  .mmci__copy { padding: 4px 2px 0; }
  .mmci__number { margin-bottom: 17px; }
  .mmci__copy h3 { font-size: 27px; }
  .mmci__copy p { font-size: 13px; }
  .mmci__fact-lines > div { grid-template-columns: 1fr; gap: 4px; }
  .mmci__media { order: -1; aspect-ratio: 16 / 11; border-radius: 13px; }
  .mmci__summary-head { grid-template-columns: 1fr; gap: 9px; }
  .mmci__summary-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 20px; }
  .mmci__summary-grid article { padding: 12px; }
  .mmci__summary-next { align-items: flex-start; }
  .mmci__footer { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; padding: 13px 16px 16px; }
  .mmci__status { grid-column: 1 / -1; width: auto; }
  .mmci__back { justify-self: start; padding-left: 0; }
  .mmci__skip { justify-self: end; margin: 0; padding-right: 0; }
  .mmci__button { grid-column: 1 / -1; width: 100%; min-height: 56px; margin-top: 2px; }
  .mmci__management { grid-template-columns: 1fr; gap: 26px; }
  .mmci__panel--management { min-height: 0; }
  .mmci__management-facts { gap: 6px; }
  .mmci__management-facts div { padding: 11px 9px; }
  .mmci__management-visual { padding: 0; }
}

@media (max-width: 390px) {
  .mmci__tabs { grid-template-columns: repeat(4, 104px); }
  .mmci__tabs--intro { grid-template-columns: repeat(3, 98px); }
  .mmci__skip { font-size: 11px; }
  .mmci__button { padding-inline: 14px; }
}

@media print {
  html.mmci-onboarding-active { overflow: visible !important; }
  .mm-contract-intro { display: none !important; }
}

/* Gefuehrter Vertragsabschluss im ruhigen AUREON-App-System. Die Schritt-
   schiene adaptiert den lokal dokumentierten 21st.dev-Wizard, waehrend
   Vertragsfelder, Werte und Validierung unveraendert bleiben. */
.mmcw-contract {
  --mmcw-bg: #0d0b0e;
  --mmcw-surface: #151116;
  --mmcw-surface-2: #1b161c;
  --mmcw-field: #120f13;
  --mmcw-line: rgba(255, 255, 255, .105);
  --mmcw-line-strong: rgba(255, 255, 255, .18);
  --mmcw-text: #f7f2f4;
  --mmcw-muted: #a99ea4;
  --mmcw-faint: #756b71;
  --mmcw-accent: #ff4b7e;
  --mmcw-accent-2: #e5142a;
  --mmcw-card-pad: clamp(18px, 3vw, 30px);
  --mmcw-card-fill: linear-gradient(155deg, #24191f 0%, #191418 42%, #151114 100%);
  --mmcw-metal: linear-gradient(115deg, #e1dce1 0%, #99919b 23%, #e6e0e4 42%, #bba77b 43%, #756e7e 44%, #8a8490 70%, #ded9df 100%);
  --mmcw-step-fill: #30232b;
  --mmcw-step-ink: #eee7ec;
  --mmcw-ease: cubic-bezier(.22, 1, .36, 1);
}

html.mmcw-active nav[aria-label="Schnell zu einem Abschnitt"],
html.mmcw-active .aura-orb[aria-label*="Auri"],
html.mmcw-active .mm-sidenav,
html.mmcw-active #mmFab {
  opacity: 0 !important;
  pointer-events: none !important;
}

.mmcw-contract > [data-mmcw-step]:not(.is-mmcw-visible) { display: none !important; }
.mmcw-contract > .mmcw-only-direct { display: none !important; }

.mmcw,
.mmcw__review {
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--mmcw-card-fill) padding-box, var(--mmcw-metal) border-box;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 20px 54px -38px rgba(0, 0, 0, .65);
}

.mmcw {
  position: relative;
  margin: 20px 0 22px;
  scroll-margin-top: 72px;
  overflow: hidden;
}

/* Moving reflection is clipped to the rim; the opaque reading surface stays still. */
.mmcw__rim {
  position:absolute; inset:-2px; z-index:2; padding:2px;
  border-radius:inherit; overflow:hidden; pointer-events:none; display:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
  .mmcw__rim { display:block; }
}
.mmcw__rim i {
  position:absolute; top:50%; left:50%; display:block;
  background:conic-gradient(from 0deg,transparent 0deg 45deg,rgba(232,211,172,.25) 65deg,#fff5df 78deg,#fff 83deg,transparent 106deg 225deg,rgba(194,191,233,.3) 248deg,#e4edff 265deg,#fff 270deg,transparent 295deg);
  transform:translate(-50%,-50%) rotate(0deg);
}
.mmcw__steps button.is-current span::before {
  content:""; position:absolute; inset:-6px; border:1px solid rgba(225,211,225,.45);
  border-radius:13px; pointer-events:none; opacity:.28;
}
@media (prefers-reduced-motion:no-preference) {
  .mmcw__rim i { animation:mmcwRimOrbit 9s linear infinite; animation-play-state:paused; }
  .mmcw__steps button.is-current span::before { animation:mmcwStepPulse 2.8s ease-in-out infinite; animation-play-state:paused; }
  .mmcw[data-mmcw-motion="on"] .mmcw__rim i,
  .mmcw[data-mmcw-motion="on"] .mmcw__steps button.is-current span::before { animation-play-state:running; }
}
@keyframes mmcwRimOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes mmcwStepPulse {
  0%,100% { transform:scale(.98); opacity:.18; }
  50% { transform:scale(1.13); opacity:.65; }
}
@media (hover:hover) and (pointer:fine) {
  .mmcw__steps button:hover span { transform:translateY(-2px); }
}
.mmcw__steps button:active span { transform:scale(.96); }
.mmcw-contract.mmcw-instant > [data-mmcw-step].is-mmcw-visible { animation:none; }
.mmcw-contract.mmcw-instant .mmcw__meter i { transition:none; }
@media (prefers-reduced-motion:reduce) {
  .mmcw__rim { display:none; }
  .mmcw__steps button.is-current span::before { animation:none; }
  .mmcw__steps button:hover span,.mmcw__steps button:active span { transform:none; }
}
@media print { .mmcw__rim { display:none; } }

.mmcw__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: var(--mmcw-card-pad) var(--mmcw-card-pad) 0;
}

.mmcw__identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--mmcw-line);
  border-radius: 999px;
  background: rgba(150, 135, 145, .06);
  color: var(--mmcw-muted);
  font: 700 11px/1.2 "Manrope", sans-serif;
}

.mmcw__identity svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mmcw__tools {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px var(--mmcw-card-pad) 16px;
}

.mmcw__tools button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mmcw-muted);
  font: 700 10.5px/1.2 "Manrope", sans-serif;
  cursor: pointer;
  transition: color 180ms ease;
}

.mmcw__tools button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mmcw__tools button:hover { color: var(--mmcw-text); }
.mmcw__tools button:focus-visible,
.mmcw__steps button:focus-visible,
.mmcw__nav button:focus-visible { outline: 2px solid var(--mmcw-muted); outline-offset: 3px; }

.mmcw__head {
  padding: 22px var(--mmcw-card-pad) 0;
}

.mmcw__count,
.mmcw__review-head > span {
  display: block;
  margin-bottom: 9px;
  color: var(--mmcw-muted);
  font: 800 10px/1.4 "Manrope", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.mmcw__topline .mmcw__count { margin: 0; font-size: 9px; white-space: nowrap; }

.mmcw__head h3,
.mmcw__review-head h3 {
  margin: 0;
  color: var(--mmcw-text);
  font: 750 clamp(23px, 3vw, 29px)/1.16 "Bricolage Grotesque", "Manrope", sans-serif;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}

.mmcw__head p,
.mmcw__review-head p {
  max-width: 580px;
  margin: 10px 0 0;
  color: var(--mmcw-muted);
  font: 500 13.5px/1.55 "Manrope", sans-serif;
}

.mmcw__meter {
  flex: 1;
  min-width: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.mmcw__meter i {
  display: block;
  width: 100%;
  transform: scaleX(.2);
  transform-origin: left center;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #91858d, #dfd6dc);
  transition: transform 280ms var(--mmcw-ease);
}

.mmcw__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  padding: 0 var(--mmcw-card-pad) 26px;
  background: transparent;
}

.mmcw__steps button {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 49px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--mmcw-muted);
  font: 700 9.5px/1.2 "Manrope", sans-serif;
  cursor: pointer;
}

.mmcw__steps button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  border-radius: 999px;
  background: var(--mmcw-line);
}

.mmcw__steps button:last-child::after { content: none; }
.mmcw__steps button.is-done::after { background: var(--mmcw-line-strong); }

.mmcw__steps button span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--mmcw-line-strong);
  border-radius: 9px;
  background: var(--mmcw-surface);
  color: var(--mmcw-muted);
  font: 750 10px/1 "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 320ms var(--mmcw-ease);
}

.mmcw__steps button small {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mmcw__steps button.is-current { color: var(--mmcw-text); }
.mmcw__steps button.is-current span {
  border: 2px solid transparent;
  background: linear-gradient(var(--mmcw-step-fill), var(--mmcw-step-fill)) padding-box, var(--mmcw-metal) border-box;
  color: var(--mmcw-text);
  box-shadow: 0 0 0 4px rgba(160, 141, 151, .1);
}

.mmcw__steps button.is-done { color: var(--mmcw-muted); }
.mmcw__steps button.is-done span {
  border-color: var(--mmcw-line-strong);
  background: var(--mmcw-step-fill);
  color: transparent;
}

.mmcw__steps button.is-done span::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--mmcw-step-ink);
  border-bottom: 2px solid var(--mmcw-step-ink);
  transform: translateY(-1px) rotate(-45deg);
}

.mmcw__brief { padding: 24px var(--mmcw-card-pad); border-top: 1px solid var(--mmcw-line); }
.mmcw__brief > strong {
  display: block;
  margin-bottom: 15px;
  color: var(--mmcw-text);
  font: 800 14px/1.3 "Manrope", sans-serif;
}
.mmcw__brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-top: 1px solid var(--mmcw-line);
  border-bottom: 1px solid var(--mmcw-line);
}
.mmcw__brief-grid > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 16px 14px 16px 0;
  color: var(--mmcw-muted);
  font: 500 11.25px/1.55 "Manrope", sans-serif;
}
.mmcw__brief-grid > span:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--mmcw-line); }
.mmcw__brief-grid > span:nth-child(n+3) { border-top: 1px solid var(--mmcw-line); }
.mmcw__brief-grid > span > svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  border: 1px solid currentColor;
  border-radius: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.mmcw__brief-grid > span:nth-child(1) > svg { color: #ff6488; }
.mmcw__brief-grid > span:nth-child(2) > svg { color: #ffc46b; }
.mmcw__brief-grid > span:nth-child(3) > svg { color: #9c8cff; }
.mmcw__brief-grid > span:nth-child(4) > svg { color: #4fd39a; }
.mmcw__brief-grid b { display: block; margin: 1px 0 4px; color: var(--mmcw-text); font-size: 11.75px; }
.mmcw__brief-grid em { display: block; font-style: normal; }
.mmcw__message { min-height: 0; margin: 0; padding: 0 clamp(20px, 4vw, 34px) 14px; color: #ff8aa2; font: 700 11.5px/1.45 "Manrope", sans-serif; }
.mmcw__message:empty { display: none; }

/* Field feedback stays in the layout: no browser popover covering the form. */
#vertrag .mmcw-field-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(229, 20, 42, .28);
  border-radius: 10px;
  background: #25171b;
  color: #f3e9ec;
  font: 600 12px/1.55 "Manrope", sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
  animation: mmcwFieldErrorIn 160ms ease-out;
}
#vertrag .mmcw-field-error svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #e5142a;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
#vertrag .mmcw-field-invalid {
  border-color: #e5142a !important;
  box-shadow: 0 0 0 3px rgba(229, 20, 42, .12) !important;
}
#vertrag .vg-choice.mmcw-field-invalid {
  outline: 1px solid #e5142a;
  outline-offset: 4px;
  border-radius: 8px;
}
#vertrag .au-tel__nr.mmcw-field-invalid { box-shadow: none !important; }
:root[data-contract-theme="light"] #vertrag .mmcw-field-error {
  background: #fff7f7;
  color: #34232a;
}
@keyframes mmcwFieldErrorIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #vertrag .mmcw-field-error { animation: none; } }
@media print { #vertrag .mmcw-field-error { display: none; } }

.mmcw__nav {
  position: sticky;
  z-index: 20;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 520px);
  margin: 24px 0 28px auto;
  padding: 7px;
  border: 1px solid var(--mmcw-line);
  border-radius: 999px;
  background: rgba(13, 11, 14, .9);
  box-shadow: 0 18px 45px -30px rgba(0, 0, 0, .95);
  backdrop-filter: blur(12px);
}

.mmcw__nav button {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  font: 800 12.5px/1 "Manrope", sans-serif;
  cursor: pointer;
}
.mmcw__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--mmcw-muted);
  transition: color 180ms ease, background 180ms ease;
}
.mmcw__back svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mmcw__back:hover { color: var(--mmcw-text); background: rgba(255, 255, 255, .045); }
.mmcw__next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 330px;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b090c, #0b090c) padding-box,
    linear-gradient(105deg, #4c454a 0%, #e9e5e7 18%, #6d6469 34%, #fff 48%, #443d41 63%, #d0b16d 78%, #585055 100%) border-box;
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 14px 28px -22px rgba(0, 0, 0, .95);
  transition: transform 180ms var(--mmcw-ease), box-shadow 180ms ease;
}
.mmcw__next:hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 18px 34px -23px rgba(0, 0, 0, 1); }
.mmcw__next svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}

/* 12.09.2026: Die Hauptnavigation lebt auch auf Touch-Geräten. Eine kurze,
   matte Reflexion läuft beim Erscheinen sofort einmal durch und kehrt danach
   nur in ruhigem Takt zurück; der Pfeil bestätigt dabei die Richtung. */
.mmci__button::before,
.mmcw__next::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -65%;
  left: -45%;
  width: 34%;
  height: 230%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(17deg);
  pointer-events: none;
}

.mmci__button > span,
.mmci__button > svg,
.mmcw__next > svg {
  position: relative;
  z-index: 1;
}

.mmcw__next:hover svg,
.mmcw__next:focus-visible svg { transform: translateX(3px); }

@keyframes mmciCtaReflex {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(17deg); }
  4% { opacity: .18; }
  16% { opacity: .2; transform: translate3d(440%, 0, 0) rotate(17deg); }
  20%, 100% { opacity: 0; transform: translate3d(440%, 0, 0) rotate(17deg); }
}

/* Der Metallverlauf selbst wandert entlang der geschlossenen Kante. Innenflaeche
   und Typografie bleiben ruhig; nur Silber, Gold und der kuehle Reflex bewegen sich. */
@keyframes mmciCtaEdge {
  from { background-position: 0 0, 0 0, 0% 50%; }
  to { background-position: 0 0, 0 0, 100% 50%; }
}

@keyframes mmciCtaArrow {
  0%, 2%, 18%, 100% { transform: translateX(0); }
  8% { transform: translateX(4px); }
  13% { transform: translateX(-1px); }
}

@media (prefers-reduced-motion: no-preference) {
  .mmci__button[data-mmci-cta-motion="on"] {
    animation: mmciCtaEdge 5.6s linear infinite alternate;
  }

  .mmci__button[data-mmci-cta-motion="on"]::before,
  .mmcw__next[data-mmci-cta-motion="on"]::before {
    animation: mmciCtaReflex 4.6s cubic-bezier(.22, 1, .36, 1) infinite;
  }

  .mmci__button[data-mmci-cta-motion="on"] svg,
  .mmcw__next[data-mmci-cta-motion="on"] svg {
    animation: mmciCtaArrow 4.6s cubic-bezier(.22, 1, .36, 1) infinite;
  }

  .mmci__button[data-mmci-cta-motion="on"]:hover svg,
  .mmci__button[data-mmci-cta-motion="on"]:focus-visible svg,
  .mmcw__next[data-mmci-cta-motion="on"]:hover svg,
  .mmcw__next[data-mmci-cta-motion="on"]:focus-visible svg {
    animation: none;
    transform: translateX(3px);
  }
}
.mmcw__nav.is-first .mmcw__next { max-width: none; }
.mmcw__nav.is-last { width: fit-content; margin-right: auto; margin-left: 0; }
.mmcw__nav button.is-mmcw-hidden,
.mmcw__brief.is-mmcw-hidden { display: none !important; }

.mmcw__review {
  margin: 22px 0;
  padding: var(--mmcw-card-pad);
}
.mmcw__review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; border-top: 1px solid var(--mmcw-line); }
.mmcw__review dl > div { min-width: 0; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--mmcw-line); }
.mmcw__review dl > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--mmcw-line); }
.mmcw__review dt { margin-bottom: 5px; color: var(--mmcw-muted); font: 700 10px/1.4 "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mmcw__review dd { margin: 0; overflow-wrap: anywhere; color: var(--mmcw-text); font: 650 13px/1.5 "Manrope", sans-serif; }

/* Die bestehenden Vertragsfelder erhalten im gefuehrten Modus dieselbe
   flache Hierarchie wie die AUREON-App: ein Abschnitt, darin ruhige Felder. */
.mmcw-contract > [data-mmcw-step].is-mmcw-visible { animation: mmcwStepIn 330ms var(--mmcw-ease) both; }
@keyframes mmcwStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mmcw-contract > [data-mmcw-step="0"]:not(.vg-grid):not(.vg-panel) {
  margin: 28px 4px 11px !important;
  color: var(--mmcw-accent) !important;
  font: 800 10px/1.2 "Manrope", sans-serif !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.mmcw-contract > .vg-grid.is-mmcw-visible,
.mmcw-contract > .vg-panel.is-mmcw-visible {
  padding: clamp(18px, 3.5vw, 26px);
  border: 1px solid var(--mmcw-line);
  border-radius: 20px;
  background: var(--mmcw-surface);
  box-shadow: none;
}

.mmcw-contract > .vg-grid.is-mmcw-visible { gap: 16px 18px; }
.mmcw-contract > .vg-panel.is-mmcw-visible { margin-top: 16px; }
.mmcw-contract > .vg-panel.is-mmcw-visible > .cap {
  margin-bottom: 18px;
  color: var(--mmcw-accent);
  font-weight: 800;
  letter-spacing: .12em;
}

.mmcw-contract .vg-label { color: var(--mmcw-muted); font-weight: 700; }
.mmcw-contract .vg-input,
.mmcw-contract .vg-select,
.mmcw-contract .vg-textarea {
  min-height: 48px;
  border-color: var(--mmcw-line-strong);
  border-radius: 12px;
  background: var(--mmcw-field);
  color: var(--mmcw-text);
  box-shadow: none;
}

.mmcw-contract .vg-input:focus,
.mmcw-contract .vg-select:focus,
.mmcw-contract .vg-textarea:focus {
  border-color: rgba(255, 255, 255, .46);
  background: var(--mmcw-surface-2);
  box-shadow: 0 0 0 3px rgba(255, 75, 126, .075);
}

.mmcw-contract .vg-chip {
  border-color: var(--mmcw-line-strong);
  background: rgba(255, 255, 255, .022);
}
.mmcw-contract .vg-chip.on { border-color: rgba(255, 75, 126, .62); background: rgba(255, 75, 126, .075); }

:root[data-contract-theme="light"] .mmcw-contract {
  --mmcw-bg: #fffdfd;
  --mmcw-surface: #f8f4f6;
  --mmcw-surface-2: #f3ecef;
  --mmcw-field: #fff;
  --mmcw-line: rgba(63, 34, 44, .115);
  --mmcw-line-strong: rgba(63, 34, 44, .2);
  --mmcw-text: #25191e;
  --mmcw-muted: #6d5d63;
  --mmcw-faint: #94838a;
  --mmcw-card-fill: linear-gradient(155deg, #f3e8ee 0%, #fffafc 42%, #f8f4f6 100%);
  --mmcw-step-fill: #eee3e9;
  --mmcw-step-ink: #49313c;
}
:root[data-contract-theme="light"] .mmcw { box-shadow: inset 0 1px #fff, 0 24px 60px -46px rgba(77, 38, 51, .42); }
:root[data-contract-theme="light"] .mmcw__meter { background: rgba(77, 38, 51, .1); }
:root[data-contract-theme="light"] .mmcw__meter i { background: linear-gradient(90deg, #ad949f, #65515d); }
:root[data-contract-theme="light"] .mmcw__nav { background: rgba(255, 253, 253, .9); box-shadow: 0 16px 36px -28px rgba(77, 38, 51, .55); }
:root[data-contract-theme="light"] .mmcw-contract .vg-chip { background: rgba(43, 23, 31, .018); }
:root[data-contract-theme="light"] .mmcw-contract .vg-chip.on { background: rgba(229, 20, 42, .055); }

@media (max-width: 760px) {
  .mmcw { margin-top: 16px; }
  .mmcw__tools { gap: 16px; }
  .mmcw__steps { padding-inline: 12px; }
  .mmcw__steps button { min-height: 48px; font-size: clamp(7.5px, 2.25vw, 9.5px); }
  .mmcw__steps button span { width: 29px; height: 29px; }
  .mmcw__steps button::after { top: 14px; left: calc(50% + 17px); width: calc(100% - 34px); }
  .mmcw__brief-grid { grid-template-columns: 1fr; }
  .mmcw__brief-grid > span,
  .mmcw__brief-grid > span:nth-child(even) { padding: 15px 0; border-left: 0; }
  .mmcw__brief-grid > span:nth-child(n+2) { border-top: 1px solid var(--mmcw-line); }
  .mmcw__review dl { grid-template-columns: 1fr; }
  .mmcw__review dl > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .mmcw-contract > .vg-grid.is-mmcw-visible,
  .mmcw-contract > .vg-panel.is-mmcw-visible { padding: 18px 15px; border-radius: 17px; }
  .mmcw__nav { bottom: 8px; width: calc(100% - 8px); margin: 22px 4px 24px; }
  .mmcw__nav button { padding-inline: 16px; }
  .mmcw__next { max-width: none; }
}

@media (max-width: 390px) {
  .mmcw__identity { font-size: 10px; gap: 6px; padding-inline: 9px; }
  .mmcw__steps button small { letter-spacing: -.02em; }
}

/* On the review step there is only Back: no oversized navigation pill. */
#vertrag .mmcw__nav.is-last {
  position: static;
  width: fit-content;
  margin: 12px 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
#vertrag .mmcw__nav.is-last .mmcw__back {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--mmcw-line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--mmcw-text);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
#vertrag .mmcw__nav.is-last .mmcw__back:hover {
  border-color: var(--mmcw-muted);
  background: var(--mmcw-surface-2);
}
#vertrag .mmcw__back:focus-visible {
  outline: 2px solid var(--mmcw-muted);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mmcw-contract > [data-mmcw-step].is-mmcw-visible { animation: none; }
  .mmcw__meter i,
  .mmcw__steps button span,
  .mmcw__next,
  .mmcw__next svg { transition: none; animation: none; }
  .mmci__button::before,
  .mmcw__next::before { display: none; animation: none; }
}

@media print {
  .mmcw { display: none !important; }
  .mmcw-contract > [data-mmcw-step] { display: block !important; }
  .mmcw__nav, .mmcw__review { display: none !important; }
}