/* ===========================================================================
   VOLT-GAS – MOBILE-REDESIGN „Variante B · Kontrast“
   ---------------------------------------------------------------------------
   Wird ausschließlich per <link media="(max-width: 767px)"> geladen → Laptop,
   Tablet (ab 768 px) und Desktop bleiben unverändert. Alle Regeln hängen an
   html.mv2, damit sie die bestehenden Regeln aus style.css sicher übersteuern.
   Logik, IDs, Validierungen und Texte des Rechners bleiben unangetastet; der
   Vollbild-Ablauf wird von js/mobile.js über html.mflow geschaltet.
   =========================================================================== */

.mv2 {
  --m-navy: #1A1F36;
  --m-navy-2: #232946;
  --m-amber: #F5A500;
  --m-amber-600: #DB9300;
  --m-amber-50: #FFF6E0;
  --m-green: #00C896;
  --m-green-700: #00785A;
  --m-green-50: #E7F8F2;
  --m-ink: #1A1F36;
  --m-ink-2: #474D66;
  --m-ink-3: #6A7088;
  --m-line: #E6E8EE;
  --m-line-2: #D3D7E0;
  --m-surface-2: #F5F6F8;
  --m-surface-3: #EEF0F4;
  --m-gutter: 20px;
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-header: 60px;
  scroll-padding-top: 72px;
}

/* Sichtbarkeit der mobilen Zusatz-Elemente */
.mv2 .m-only { display: revert; }
.mv2 div.m-only { display: block; }
.mv2 .d-only { display: none !important; }

.mv2 body { -webkit-tap-highlight-color: transparent; }
.mv2 :focus-visible { outline: 3px solid rgba(245,165,0,.6); outline-offset: 2px; }

/* Keine Einblend-Animationen beim Scrollen (ruhiger, weniger „KI-Optik“) */
.mv2 .v2-fade-init, .mv2 .v2-fade-in, .mv2 .reveal, .mv2 [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.mv2 .header { background: var(--m-navy); border-bottom: 1px solid var(--m-navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mv2 .header__inner { flex-wrap: nowrap; gap: 4px; height: var(--m-header); padding: 0 8px 0 var(--m-gutter); }
.mv2 .header .logo { flex-direction: row; margin-right: auto; height: 44px; align-items: center; }
.mv2 .header .logo__img { display: none; }
.mv2 .header .logo__img--light { display: block; height: 30px; width: auto; }
.mv2 .header .logo__slogan { display: none; }
.mv2 .header__inner > .btn--primary { display: none; }
.mv2 .header__tel { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; }
.mv2 .header__tel svg { width: 24px; height: 24px; }
.mv2 .nav-toggle { margin-left: 0; border: 0; border-radius: 12px; background: transparent; width: 44px; height: 44px; gap: 5px; }
.mv2 .nav-toggle span { background: #fff; width: 20px; }
.mv2 .nav-toggle:hover { background: rgba(255,255,255,.08); }
.mv2 .nav-toggle.is-open { background: transparent; }
.mv2 .nav-toggle.is-open span { background: #fff; }

/* ── Menü: Vollbild-Sheet in Navy ────────────────────────────────────────── */
.mv2 .mobile-menu__backdrop { display: none; }
.mv2 .mobile-menu__panel {
  width: 100%; inset: 0; padding: 0; background: var(--m-navy); color: #fff; box-shadow: none;
  transform: translateY(8px); opacity: 0; transition: transform .2s var(--m-ease), opacity .2s var(--m-ease);
}
.mv2 .mobile-menu.is-open .mobile-menu__panel { transform: none; opacity: 1; }
.mv2 .mobile-menu__head { height: var(--m-header); margin: 0; padding: 0 8px 0 var(--m-gutter); border-bottom: 1px solid rgba(255,255,255,.1); }
.mv2 .mobile-menu__logo img { height: 30px; }
.mv2 .mobile-menu__close { width: 44px; height: 44px; border-radius: 12px; background: transparent; color: #fff; font-size: 0; }
.mv2 .mobile-menu__close svg { width: 24px; height: 24px; }
.mv2 .mobile-menu__trust { display: none; }
.mv2 .mobile-menu__nav { flex: 1; gap: 0; margin: 0; padding: 8px var(--m-gutter) 16px; overflow-y: auto; }
.mv2 .mobile-menu__nav a {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: 18px; font-weight: 620; color: #fff;
}
.mv2 .mobile-menu__nav a:hover, .mv2 .mobile-menu__nav a:focus-visible { background: transparent; color: #fff; border-left-color: transparent; }
.mv2 .mobile-menu__nav a::before {
  content: ""; width: 20px; height: 20px; flex: none; background: var(--m-amber);
  -webkit-mask: var(--mi, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")) center / contain no-repeat;
          mask: var(--mi, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")) center / contain no-repeat;
}
.mv2 .mobile-menu__nav a::after {
  content: ""; width: 18px; height: 18px; margin-left: auto; flex: none; background: rgba(255,255,255,.45);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Icons je Ziel (Linien-Icons statt Emojis) */
.mv2 .mobile-menu__nav a[href*="rechner"]       { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav a[href*="tarifrechner"]  { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14v4M8 18h.01M12 18h.01'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav a[href*="energiepruefer"]{ --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'/%3E%3Cpath d='M13.3 16.3 15 18'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav a[href*="gewerbe"]       { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav a[href*="ratgeber"]      { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2ZM22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7Z'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav a[href*="kontakt"]       { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5a9 9 0 0 1 18 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3Cpath d='M21 17v1a4 4 0 0 1-4 4h-4'/%3E%3C/svg%3E"); }
.mv2 .mobile-menu__nav .nav__badge, .mv2 .mobile-menu__nav .m-badge { margin-left: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: rgba(0,200,150,.16); color: #5BE3BC; }
.mv2 .mobile-menu__cta { margin: 0; min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 650; box-shadow: none; transform: none; }
.mv2 .mobile-menu__foot-wrap { padding: 16px var(--m-gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 12px; }
.mv2 .mobile-menu__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mv2 .mobile-menu__quick a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 650; text-decoration: none; }
.mv2 .mobile-menu__quick svg { width: 20px; height: 20px; }
.mv2 .mobile-menu__footer { justify-content: center; gap: 4px 18px; padding: 0; border: 0; }
.mv2 .mobile-menu__footer a { color: #9EA4B8; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

/* ── Hero: Navy-Bühne, weiße Vergleichskarte ragt in den hellen Bereich ──── */
.mv2 .hero--home {
  min-height: 0; padding: 18px var(--m-gutter) 0; text-align: left;
  background: linear-gradient(var(--m-navy) 0, var(--m-navy) calc(100% - var(--m-hero-white, 232px)), #fff calc(100% - var(--m-hero-white, 232px)));
}
.mv2 .hero--home .hero__bg, .mv2 .hero--home .hero__photo, .mv2 .hero--home .hero__particles,
.mv2 .hero--home .hero__scene, .mv2 .hero--home .hero__bonus-bubble, .mv2 .hero--home .hero__eyebrow,
.mv2 .hero--home .hero__slogan, .mv2 .hero--home .hero__badges { display: none !important; }
.mv2 .hero--home .hero__content { max-width: none; padding: 0; text-align: left; position: relative; }
.mv2 .hero--home .hero__headline { margin: 0; font-size: clamp(30px, 8.6vw, 36px); line-height: 1.08; letter-spacing: -.025em; font-weight: 760; color: #fff; text-align: left; }
.mv2 .hero--home .hero__headline-accent { color: #fff; }
.mv2 .hero--home .hero__headline-m { display: block; color: var(--m-amber); }
.mv2 .hero--home .hero__sub { margin: 12px 0 0; max-width: 60%; padding-bottom: 30px; font-size: 15.5px; line-height: 1.5; color: #C5CAD8; text-align: left; }
.mv2 .hero--home .hero__searchbar-wrap { position: relative; margin: 0; }
/* Volti steht hinter der Karte – Füße verdeckt, neben dem Einleitungstext */
.mv2 .hero--home .hero__sb-volti {
  position: absolute; right: -4px; bottom: calc(100% - 22px); top: auto; width: 128px; height: auto; margin: 0;
  z-index: 0; filter: none; animation: none; transform: none; pointer-events: none;
}
.mv2 .hero--home .hero__searchbar {
  position: relative; z-index: 1; display: block; padding: 18px 16px 16px; border-radius: 22px; overflow: visible; background: #fff;
  box-shadow: 0 12px 32px -12px rgba(10,14,32,.35), 0 0 0 1px rgba(26,31,54,.06);
}
.mv2 .hero--home .hero__sb-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; width: auto; border: 0; }
.mv2 .hero--home .hero__sb-tab {
  min-height: 56px; justify-content: center; gap: 10px; border-radius: 14px; border: 1px solid var(--m-line-2); background: #fff;
  font-size: 16px; font-weight: 650; color: var(--m-ink);
}
.mv2 .hero--home .hero__sb-tab svg { width: 20px; height: 20px; color: var(--m-ink-3); }
.mv2 .hero--home .hero__sb-tab.active { background: var(--m-navy); border-color: var(--m-navy); color: #fff; }
.mv2 .hero--home .hero__sb-tab.active svg { color: var(--m-amber); }
.mv2 .hero--home .hero__sb-divider { display: none; }
.mv2 .hero--home .hero__sb-field { padding: 0; margin-top: 14px; width: auto; }
.mv2 .hero--home .hero__sb-field label { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--m-ink); }
.mv2 .hero--home .hero__sb-field input {
  min-height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--m-line-2); border-radius: 12px; font-size: 16px; color: var(--m-ink); background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A7088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 15 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat 15px center;
}
.mv2 .hero--home .hero__sb-field input:focus { border-color: var(--m-amber-600); box-shadow: 0 0 0 4px rgba(245,165,0,.18); }
.mv2 .hero--home .hero__sb-field input::placeholder { color: #9AA0B4; }
.mv2 .hero--home .hero__sb-btn {
  display: flex; width: 100%; min-height: 54px; margin-top: 16px; border-radius: 14px; padding: 0 20px;
  background: var(--m-amber); color: var(--m-navy); font-size: 17px; font-weight: 650; letter-spacing: -.005em; filter: none;
}
.mv2 .hero--home .hero__sb-btn::after { display: none; }
.mv2 .hero--home .hero__sb-btn:active { background: var(--m-amber-600); }
.mv2 .hero__trust3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px 0 22px; }
.mv2 .hero__trust3 > div { text-align: center; font-size: 13px; line-height: 1.35; color: var(--m-ink-2); }
.mv2 .hero__trust3 svg { display: block; margin: 0 auto 6px; color: var(--m-navy); }
.mv2 .hero__trust3 b { display: block; color: var(--m-ink); font-size: 14px; }
/* Fehlerzustand PLZ (startFromHero setzt borderColor) */
.mv2 .hero--home #heroPlz[style*="border-color"] { box-shadow: 0 0 0 4px rgba(198,40,40,.12); }

/* ── Andock-Leiste unten: „Tarife vergleichen“ + WhatsApp ────────────────── */
.mv2 .mobile-cta {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; min-height: 52px; padding: 0 18px; border-radius: 14px;
  background: var(--m-amber); color: var(--m-navy); box-shadow: none; justify-content: center; gap: 8px;
}
.mv2 .mobile-cta__pulse, .mv2 .mobile-cta__label span { display: none !important; }
.mv2 .mobile-cta__label strong { font-size: 17px; font-weight: 650; }
.mv2 .mobile-cta__arrow { background: transparent; color: var(--m-navy); width: auto; height: auto; }
.mv2 body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 79; height: calc(72px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--m-line); transform: translateY(110%); transition: transform .22s var(--m-ease); pointer-events: none;
}
.mv2 body.show-mobile-cta::after { transform: none; }
.mv2 .wa-float {
  right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 14px;
  background: #E8F8EE; color: #128C4A; box-shadow: none; z-index: 81; transform: translateY(calc(100% + 24px)); transition: transform .22s var(--m-ease);
}
.mv2 body.show-mobile-cta .wa-float { transform: none; }
.mv2 .wa-float__pulse, .mv2 .wa-float__label { display: none !important; }
.mv2 .wa-float__icon { width: 26px; height: 26px; }
.mv2 .back-to-calc { display: none !important; }


/* ===========================================================================
   TARIFRECHNER als Vollbild-Ablauf (html.mflow, gesteuert von js/mobile.js)
   =========================================================================== */
/* Solange der Ablauf geschlossen ist, übernimmt die Hero-Karte den Einstieg */
.mv2.mvjs.mvhero:not(.mflow) .section--calculator { display: none; }
.mv2.mflow, .mv2.mflow body { overflow: hidden; }
.mv2.mflow .section--calculator {
  position: fixed; inset: 0; z-index: 500; display: block; padding: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; background: #fff; scroll-padding: 120px 0 120px;
}
.mv2.mflow .section--calculator > .container { padding: 0; max-width: none; }
.mv2.mflow .section--calculator .section__header { display: none; }
.mv2.mflow #calculator { max-width: none; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; background: #fff; }
.mv2.mflow .calc-volti-buddy, .mv2.mflow #calculator > .progress-bar { display: none !important; }
.mv2.mflow .mobile-cta, .mv2.mflow .wa-float, .mv2.mflow body::after, .mv2.mflow .sticky-summary { display: none !important; }

/* Kopfleiste des Ablaufs */
.mv2 .mflow-bar { display: none; }
.mv2.mflow .mflow-bar { display: block; position: sticky; top: 0; z-index: 5; background: var(--m-navy); color: #fff; }
.mv2 .mflow-bar__top { height: 56px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 0 8px; }
.mv2 .mflow-bar__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.mv2 .mflow-bar__btn svg { width: 24px; height: 24px; }
.mv2 .mflow-bar__title { text-align: center; line-height: 1.2; }
.mv2 .mflow-bar__title b { display: block; font-size: 16px; font-weight: 650; }
.mv2 .mflow-bar__title span { font-size: 13px; color: #A9AFC2; }
.mv2 .mflow-bar__progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 16px 12px; }
.mv2 .mflow-bar__progress i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.mv2 .mflow-bar__progress i::after { content: ""; position: absolute; inset: 0; background: var(--m-amber); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--m-ease); }
.mv2 .mflow-bar__progress i.is-done::after, .mv2 .mflow-bar__progress i.is-on::after { transform: scaleX(1); }

/* Schritte */
.mv2 .calc-step { padding: 24px var(--m-gutter) 0; animation: none; }
.mv2 .calc-step__title { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; font-weight: 720; color: var(--m-ink); margin: 0 0 6px; }
.mv2 .calc-step__sub { font-size: 15.5px; line-height: 1.5; color: var(--m-ink-2); margin: 0 0 22px; }
.mv2 .calc-step__sub-link { color: var(--m-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--m-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mv2 .field-group { margin-bottom: 16px; gap: 6px; }
.mv2 .field-label { font-size: 14px; font-weight: 600; color: var(--m-ink); }
.mv2 .field-input {
  min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; background: var(--m-surface-2); font-size: 16px; color: var(--m-ink);
}
.mv2 textarea.field-input { padding: 14px 16px; }
.mv2 .field-input:focus { background: #fff; border-color: var(--m-amber-600); box-shadow: 0 0 0 4px rgba(245,165,0,.18); }
.mv2 select.field-input { -webkit-appearance: none; appearance: none; padding-right: 44px;
  background: var(--m-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A7088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.mv2 .form-grid { grid-template-columns: 1fr; gap: 0; }

/* Schritt 1: Energieart + Kundentyp als große Auswahlflächen */
.mv2 #step-1 .field-group + .field-group { margin-top: 12px; }
.mv2 .tile-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.mv2 .tile {
  position: relative; align-items: flex-start; justify-content: center; gap: 10px; min-height: 104px; padding: 16px; text-align: left;
  border-radius: 14px; border: 1px solid transparent; background: var(--m-surface-2); box-shadow: none;
}
.mv2 .tile:hover { background: var(--m-surface-2); border-color: transparent; }
.mv2 svg.tile__icon { width: 40px; height: 40px; padding: 9px; margin: 0; border-radius: 12px; background: #fff; color: var(--m-ink-2); }
.mv2 .tile__label { font-size: 16px; font-weight: 650; color: var(--m-ink); }
.mv2 .tile.active { background: #fff; border-color: var(--m-navy); box-shadow: inset 0 0 0 1px var(--m-navy); }
.mv2 .tile.active svg.tile__icon { background: var(--m-amber); color: var(--m-navy); }
.mv2 .tile.active::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/12px;
}

/* Schritt 3: Richtwerte als Kacheln */
.mv2 .richtwerte { margin: 0 0 18px; }
.mv2 .richtwerte__label { font-size: 14px; font-weight: 650; color: var(--m-ink); margin-bottom: 10px; }
.mv2 .richtwerte__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mv2 #gas-fields .richtwerte__items { grid-template-columns: 1fr 1fr; }
.mv2 .richtwert-btn {
  min-height: 64px; padding: 8px 6px; border-radius: 12px; border: 1px solid transparent; background: var(--m-surface-2);
  font-size: 13px; line-height: 1.3; color: var(--m-ink-2); box-shadow: none; transform: none;
}
.mv2 .richtwert-btn strong { color: var(--m-ink); font-size: 14px; }
.mv2 .richtwert-btn.is-active { background: var(--m-navy); border-color: var(--m-navy); color: rgba(255,255,255,.8); box-shadow: none; transform: none; }
.mv2 .richtwert-btn.is-active strong { color: #fff; }
.mv2 .checkbox-label { min-height: 44px; align-items: center; font-size: 15px; color: var(--m-ink-2); }
.mv2 .checkbox-label input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--m-navy); }
.mv2 .savings-prompt { border: 0; border-radius: 16px; background: var(--m-surface-2); margin-top: 8px; }
.mv2 .savings-prompt__header { min-height: 64px; padding: 12px 16px; background: transparent; border: 0; }
.mv2 .savings-prompt__icon { display: none; }
.mv2 .savings-prompt__title strong { font-size: 15.5px; color: var(--m-ink); }
.mv2 .savings-prompt__title span { font-size: 13px; color: var(--m-ink-3); }

/* Aktionsleiste: Hauptbutton im Daumenbereich, Zurück übernimmt die Kopfleiste */
.mv2 .calc-nav {
  position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; margin: 24px calc(-1 * var(--m-gutter)) 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--m-line);
}
.mv2 .calc-nav .btn--ghost { display: none; }
.mv2 .calc-nav .btn {
  flex: 1; width: 100%; min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 650; justify-content: center; box-shadow: none; transform: none;
}
.mv2 .calc-nav .btn--primary { background: var(--m-amber); color: var(--m-navy); }
.mv2 .calc-nav .arrow { display: none; }
.mv2 #step-4 .calc-nav { display: none; }
/* Tastatur offen → Leiste wird Teil des Formulars, verdeckt keine Felder */
.mv2.mflow.kb-open .calc-nav { position: static; border-top: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Ladeansicht */
.mv2 .loading-overlay { background: rgba(255,255,255,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mv2 .loading-box { box-shadow: none; background: transparent; }
.mv2 .loading-box #loadingMsg { font-size: 18px; font-weight: 650; color: var(--m-ink); }
.mv2 .loading-box__hint { font-size: 14px; color: var(--m-ink-3); }

/* ── Schritt 4: Ergebnisse (Preis zuerst) ───────────────────────────────── */
.mv2 #step-4 { padding-top: 16px; background: #fff; }
.mv2 body.calc-v3 #tariffSection .results-main { max-width: none; }
.mv2 .results-filter, .mv2 .results-side { display: none; }
.mv2 .v3h { gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--m-surface-2); flex-direction: column; }
.mv2 .v3h__title { font-size: 20px; font-weight: 720; letter-spacing: -.015em; color: var(--m-ink); }
.mv2 .v3h__sub { font-size: 15px; color: var(--m-ink-2); }
.mv2 .v3h__meta { font-size: 13px; color: var(--m-ink-3); }
.mv2 .v3h__edit { min-height: 44px; border-radius: 12px; background: #fff; border-color: var(--m-line-2); font-size: 15px; }
.mv2 .v3bar { margin-top: 14px; gap: 10px; }
.mv2 .v3bar__tabs { padding: 4px; gap: 4px; border: 0; border-radius: 14px; background: var(--m-surface-3); margin: 0 calc(-1 * var(--m-gutter)); border-radius: 0; padding: 4px var(--m-gutter); background: transparent; }
.mv2 .v3bar__tab { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--m-line-2); background: #fff; font-size: 14px; color: var(--m-ink-2); }
.mv2 .v3bar__tab.is-active { background: var(--m-navy); border-color: var(--m-navy); color: #fff; }
.mv2 .v3bar__right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
.mv2 .v3bar__sel select { min-height: 44px; border-radius: 12px; background-color: var(--m-surface-2); border-color: transparent; font-size: 14px; }
.mv2 body.calc-v3 .v3bar .btn-email-tariffs--icon { width: 44px; height: 44px; border-radius: 12px; background: var(--m-surface-2); border-color: transparent; }
.mv2 .v3-list { gap: 12px; }
.mv2 .v3-divider { font-size: 12px; letter-spacing: .08em; color: var(--m-ink-3); }

/* Tarifkarte: Monatsabschlag oben, Anbieter, Konditionen-Raster, Button */
.mv2 .vc { border-radius: 20px; border: 1px solid var(--m-line); box-shadow: none; margin-top: 0; }
.mv2 .vc--reco { border: 0; box-shadow: 0 0 0 2px var(--m-navy); padding-top: 34px; }
.mv2 .vc__label { top: 0; left: 0; right: 0; height: 34px; border-radius: 18px 18px 0 0; border: 0; padding: 0 18px; background: var(--m-surface-2); color: var(--m-ink-2); font-size: 13px; font-weight: 650; }
.mv2 .vc--reco .vc__label { background: var(--m-navy); color: #fff; }
.mv2 .vc--reco .vc__label svg { color: var(--m-amber); width: 14px; height: 14px; }
.mv2 .vc--top { padding-top: 34px; }
.mv2 .vc__main {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "amount bonus" "per per" "alt alt" "prov prov" "facts facts" "cta cta" "more more";
  padding: 18px; gap: 0; align-items: start;
}
.mv2 .vc__price { display: contents; }
.mv2 .vc__amount { grid-area: amount; font-size: 30px; font-weight: 760; letter-spacing: -.03em; line-height: 1.05; color: var(--m-ink); }
.mv2 .vc__per { grid-area: per; margin-top: 2px; font-size: 13px; color: var(--m-ink-3); }
.mv2 .vc__alt { grid-area: alt; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--m-ink-2); text-align: left; }
.mv2 .vc__bonus { grid-area: bonus; align-self: start; justify-self: end; margin: 2px 0 0; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 650; background: var(--m-amber-50); color: #7A5200; }
.mv2 .vc__prov {
  grid-area: prov; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center;
  margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--m-line);
}
.mv2 .vc__logo { width: 52px; height: 40px; padding: 4px; border-radius: 10px; border-color: var(--m-line); }
.mv2 .vc__rate { font-size: 15.5px; font-weight: 650; }
.mv2 .vc__provider { font-size: 13px; color: var(--m-ink-3); }
.mv2 .vc__tags { grid-column: 1 / -1; }
.mv2 .vc-tag { height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12.5px; }
.mv2 .vc-facts {
  grid-area: facts; margin-top: 14px; padding: 0; border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--m-line);
}
.mv2 .vc-facts li { flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; background: #fff; font-size: 12.5px; color: var(--m-ink-3); }
.mv2 .vc-facts li:last-child { grid-column: 1 / -1; }
.mv2 .vc-facts li svg { display: none; }
.mv2 .vc-facts__k { flex: none; white-space: normal; }
.mv2 .vc-facts strong { font-size: 14.5px; font-weight: 650; color: var(--m-ink); }
.mv2 .vc__cta { grid-area: cta; margin-top: 16px; min-height: 50px; border-radius: 14px; background: var(--m-amber); color: var(--m-navy); font-size: 16px; font-weight: 650; box-shadow: none; }
.mv2 .vc__more { grid-area: more; min-height: 44px; margin: 4px 0 -8px; font-size: 14px; color: var(--m-ink-2); }
.mv2 .vc__details { padding: 14px 18px 16px; border-radius: 0 0 20px 20px; background: var(--m-surface-2); }
.mv2 .vc-det dd { font-size: 14px; }
.mv2 .v3-more__btn { min-height: 48px; width: 100%; border-radius: 14px; }
.mv2 body.calc-v3 #tariffList .wa-help { border-radius: 16px; }
.mv2 .tariff-lead-capture { border-radius: 16px; background: var(--m-surface-2); border: 0; box-shadow: none; }
.mv2 .tariff-lead-capture__icon { display: none; }

/* ── Schritt 5: Abschluss (Checkout v4) ─────────────────────────────────── */
.mv2 #step-5 { padding-top: 0; }
.mv2 body.calc-ck4 #step-5 .ck4 { gap: 16px; }
.mv2 body.calc-ck4 #step-5 .ck4__aside { margin: 0 calc(-1 * var(--m-gutter)); border: 0; border-radius: 0; box-shadow: none; background: var(--m-surface-2); }
.mv2 body.calc-ck4 #step-5 .ck4__aside-toggle { min-height: 64px; padding: 12px var(--m-gutter); background: var(--m-surface-2); }
.mv2 body.calc-ck4 #step-5 .ck4-steps { display: flex; gap: 6px; margin: 4px 0 12px; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item { flex: 1; align-items: stretch; gap: 0; padding-top: 0; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item::before { display: none; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__dot { width: auto; height: 3px; border: 0; border-radius: 2px; background: var(--m-surface-3); font-size: 0; box-shadow: none; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__dot svg { display: none; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item.is-done .ck4-steps__dot { background: var(--m-navy); }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item.is-active .ck4-steps__dot { background: var(--m-amber); box-shadow: none; }
.mv2 body.calc-ck4 #step-5 .ck4-steps__lbl { display: block; margin-top: 8px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--m-ink-3); }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item.is-active .ck4-steps__lbl { color: var(--m-ink); }
.mv2 body.calc-ck4 #step-5 .ck4-steps__item.is-done .ck4-steps__lbl { color: var(--m-ink-2); }
.mv2 body.calc-ck4 #step-5 .ck4-steps__mobile { display: none; }
.mv2 body.calc-ck4 #step-5 .ck4-title__num { display: none; }
.mv2 body.calc-ck4 #step-5 .ck4-title__h { font-size: 24px; font-weight: 720; letter-spacing: -.018em; }
.mv2 body.calc-ck4 #step-5 .ck4-title__sub { font-size: 15px; }
.mv2 body.calc-ck4 #step-5 .field-input { min-height: 52px; font-size: 16px; border-radius: 12px; border-color: transparent; background: var(--m-surface-2); }
.mv2 body.calc-ck4 #step-5 .field-input:focus { background: #fff; border-color: var(--m-amber-600); }
.mv2 body.calc-ck4 #step-5 .checkbox-label { min-height: 44px; font-size: 14.5px; }
.mv2 body.calc-ck4 #step-5 .checkbox-label input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--m-navy); }
.mv2 body.calc-ck4 #step-5 .calc-nav { flex-direction: row; margin-top: 24px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--m-line); }
.mv2 body.calc-ck4 #step-5 .calc-nav .btn--success { min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 650; background: var(--m-amber); color: var(--m-navy); }
/* Letzter Schritt bleibt eindeutig erkennbar grün (bestehende Entscheidung, Text unverändert § 312j BGB) */
.mv2 body.calc-ck4 #step-5.ck4-last .calc-nav .btn--success { background: #17a86f; color: #fff; }
.mv2.mflow.kb-open body.calc-ck4 #step-5 .calc-nav { position: static; padding-left: 0; padding-right: 0; border-top: 0; }

/* Erfolgsseite */
.mv2 #step-success { padding: 24px var(--m-gutter) 40px; }

/* Ergänzungen: Andock-Leiste ausblenden statt nur verschieben, Logo im Menü */
.mv2 .mobile-cta { transform: translateY(calc(100% + 24px)); }
.mv2 .mobile-cta.is-visible { transform: none; }
.mv2 .mobile-cta:not(.is-visible) { pointer-events: none; }
.mv2.mvnocta .wa-float { transform: none; }
.mv2 .mobile-menu__logo-dark { display: none !important; }
.mv2 .mobile-menu__logo-light { display: block; height: 30px; width: auto; }

/* Fix: unsichtbarer Fehler-Toast fing Fingertipps im Header ab (Menü, Logo) */
.mv2 .error-toast:not(.visible) { visibility: hidden; pointer-events: none; }
.mv2 .error-toast { top: calc(var(--m-header) + 10px); width: calc(100% - 32px); border-radius: 14px; z-index: 9998; }
/* Sticky-Zusammenfassung (Schritt 5) mobil ersetzt durch die Aktionsleiste im Ablauf */
.mv2.mvjs .sticky-summary { display: none !important; }

/* ── Feinschliff nach erstem Test ───────────────────────────────────────── */
/* Volti: Platz neben dem Einleitungstext garantieren, damit er die Überschrift nie berührt */
.mv2 .hero--home .hero__sub { min-height: 112px; padding-bottom: 30px; }
.mv2 .hero--home .hero__sb-volti { width: 116px; bottom: calc(100% - 26px); }
.mv2 .hero__trust3 svg { width: 22px; height: 22px; }
.mv2 .mobile-menu__quick.m-only { display: grid; }
.mv2 .wa-float .wa-float__icon { width: 26px !important; height: 26px !important; }
.mv2 .mobile-cta { justify-content: center; }
.mv2 .mobile-cta__label { flex: none; }
.mv2 .mobile-cta__arrow { display: none; }

/* Kurze Schritte: Aktionsbutton unten im Daumenbereich */
.mv2.mflow #step-1.active, .mv2.mflow #step-2.active, .mv2.mflow #step-3.active {
  display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px);
}
.mv2.mflow #step-1.active > .calc-nav, .mv2.mflow #step-2.active > .calc-nav, .mv2.mflow #step-3.active > .calc-nav { margin-top: auto; }
.mv2.mflow #step-1.active > .field-group:last-of-type, .mv2.mflow #step-2.active > .form-grid, .mv2.mflow #step-3.active > .savings-prompt { margin-bottom: 24px; }
.mv2.mflow.kb-open .calc-step.active { min-height: 0; }

/* Straßenauswahl: Liste direkt unter dem Feld statt Bottom-Sheet (bleibt über der Tastatur sichtbar) */
.mv2 .combobox__dropdown:not([hidden]) {
  position: static; left: auto; right: auto; bottom: auto; margin-top: 8px; max-height: 264px; border-radius: 14px; border: 1px solid var(--m-line);
  box-shadow: 0 6px 20px -8px rgba(26,31,54,.25); animation: none; z-index: auto;
}
.mv2 .combobox__dropdown:not([hidden])::before { display: none; }
.mv2 .combobox__option { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-size: 16px; }
.mv2 .combobox__toggle { width: 44px; height: 44px; }
.mv2.mflow body::after, .mv2.mflow body.combobox-open::after { display: none !important; }

/* ===========================================================================
   STARTSEITE – Inhaltsbereiche im System von Variante B
   =========================================================================== */
.mv2 .section { padding: 48px var(--m-gutter); }
.mv2 .section > .container, .mv2 .section > .container--narrow { padding: 0; max-width: none; }
.mv2 .section__header { margin: 0 0 24px; text-align: left; }
.mv2 .section__header h2, .mv2 .v2-headline { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; font-weight: 720; text-align: left; margin: 0 0 8px; }
.mv2 .section__header p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--m-ink-2); text-align: left; max-width: none; }
.mv2 .section__eyebrow, .mv2 .vgw__eyebrow, .mv2 .vgi__eyebrow, .mv2 .vgb__eyebrow, .mv2 .vg-rev__eyebrow {
  display: block; margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3);
}
.mv2 .vgw__eyebrow::before, .mv2 .vgi__eyebrow::before, .mv2 .vgb__eyebrow::before { display: none; }

/* Doppelte bzw. widersprüchliche Zahlen-Kacheln mobil ausblenden (Hero-Versprechen + Beratung decken es ab) */
.mv2 .trust-strip, .mv2 .stats-tiles, .mv2 .section--v2-trust-ed { display: none; }

/* „Lieber Gewinner oder Verlierer?“ */
.mv2 .vgw { padding: 48px var(--m-gutter); background: #fff; }
.mv2 .vgw__in { padding: 0; gap: 24px; }
.mv2 .vgw__h { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; font-weight: 720; }
.mv2 .vgw__h em { font-style: normal; color: inherit; }
.mv2 .vgw__p { font-size: 15.5px; line-height: 1.55; color: var(--m-ink-2); }
.mv2 .vgw__btn { display: flex; justify-content: center; width: 100%; min-height: 52px; border-radius: 14px; background: var(--m-amber); color: var(--m-navy); font-size: 16px; font-weight: 650; box-shadow: none; }
.mv2 .vgw__note { justify-content: center; font-size: 13px; color: var(--m-ink-3); }
.mv2 .vgw__cards { gap: 12px; }
.mv2 .vgw-card { border-radius: 20px; border: 1px solid var(--m-line); box-shadow: none; overflow: hidden; background: #fff; }
.mv2 .vgw-card--mit { border-color: var(--m-navy); box-shadow: inset 0 0 0 1px var(--m-navy); }
.mv2 .vgw-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mv2 .vgw-card__label { border-radius: 8px; font-size: 13px; font-weight: 650; }
.mv2 .vgw-card__list { padding: 14px 16px 16px; gap: 8px; }
.mv2 .vgw-card__list li { font-size: 15px; line-height: 1.45; color: var(--m-ink-2); }

/* Gewerbe vor Ort */
.mv2 .onsite-usp { padding: 0 var(--m-gutter) 8px; background: #fff; }
.mv2 .onsite-usp > .container { padding: 0; }
.mv2 .onsite-usp__card { padding: 16px; border: 1px solid var(--m-line); border-radius: 16px; box-shadow: none; background: var(--m-surface-2); }
.mv2 .onsite-usp__icon { display: none; }
.mv2 .onsite-usp__body { font-size: 15px; line-height: 1.55; color: var(--m-ink-2); }

/* „Wofür interessierst du dich?“ → kompakte Zeilen */
.mv2 .vgi { padding: 48px var(--m-gutter); background: var(--m-surface-2); }
.mv2 .vgi__in { padding: 0; gap: 20px; }
.mv2 .vgi__h { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; font-weight: 720; }
.mv2 .vgi__p { font-size: 15.5px; color: var(--m-ink-2); }
.mv2 .vgi__list li { font-size: 15px; }
.mv2 .vgi__cards { display: grid; gap: 0; padding: 4px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--m-line); }
.mv2 .vgi-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; min-height: 88px; padding: 12px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mv2 .vgi-card + .vgi-card { border-top: 1px solid var(--m-line); }
.mv2 .vgi-card__media { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.mv2 .vgi-card__media img { width: 64px; height: 64px; object-fit: cover; }
.mv2 .vgi-card__body { padding: 0; }
.mv2 .vgi-card__icon { display: none; }
.mv2 .vgi-card__title { font-size: 16px; font-weight: 650; margin: 0 0 2px; }
.mv2 .vgi-card__text { font-size: 14px; line-height: 1.4; color: var(--m-ink-3); margin: 0 0 4px; }
.mv2 .vgi-card__cta { min-height: 32px; font-size: 14px; font-weight: 650; color: var(--m-ink); }

/* Persönliche Beratung (Navy) */
.mv2 .vgb { padding: 48px var(--m-gutter); }
.mv2 .vgb__in { padding: 0; gap: 20px; }
.mv2 .vgb__eyebrow { color: var(--m-amber); }
.mv2 .vgb__h { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; font-weight: 740; }
.mv2 .vgb__p { font-size: 15.5px; line-height: 1.55; }
.mv2 .vgb-card { border-radius: 20px; box-shadow: none; }
.mv2 .vgb__photo img, .mv2 .vgb__photo { border-radius: 20px; }

/* So funktioniert's */
.mv2 .v2-how-flow { display: grid; gap: 10px; }
.mv2 .v2-how-flow__arrow { display: none; }
.mv2 .v2-how-flow__step { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 16px; border: 0; border-radius: 18px; background: var(--m-surface-2); box-shadow: none; text-align: left; }
.mv2 .v2-how-flow__step:last-of-type { background: var(--m-amber-50); }
.mv2 .v2-how-flow__num { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--m-line); font-size: 16px; font-weight: 750; color: var(--m-navy); position: static; }
.mv2 .v2-how-flow__step h3 { margin: 2px 0 0; font-size: 17px; font-weight: 650; }
.mv2 .v2-how-flow__step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }

/* Echte Geschichte */
.mv2 .section--story { background: #fff; }
.mv2 .story-grid { gap: 20px; }
.mv2 .story-video { border-radius: 20px; overflow: hidden; }
.mv2 .story-grid__lead { font-size: 15.5px; }
.mv2 .story-facts { gap: 8px; }
.mv2 .story-fact { border-radius: 14px; box-shadow: none; }
.mv2 .story-quote { border-radius: 16px; font-size: 15px; }
.mv2 .section--story .btn--primary { width: 100%; justify-content: center; min-height: 52px; border-radius: 14px; box-shadow: none; transform: none; }

/* Bewertungen: hell, wischbar */
.mv2 .vg-rev { padding: 48px 0; background: #fff; color: var(--m-ink); }
.mv2 .vg-rev::before, .mv2 .vg-rev::after { display: none; }
.mv2 .vg-rev__head { position: relative; padding: 0 var(--m-gutter); margin: 0 0 20px; text-align: left; }
.mv2 .vg-rev__head h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; font-weight: 720; color: var(--m-ink); text-align: left; margin: 0; padding-right: 84px; }
.mv2 .vg-rev__eyebrow { color: var(--m-ink-3); background: none; border: 0; }
.mv2 .vg-rev__volti-wrap { position: absolute; right: 12px; bottom: -8px; left: auto; top: auto; width: 72px; height: auto; margin: 0; transform: none; }
.mv2 .vg-rev__volti { width: 72px; height: auto; animation: none; filter: none; }
.mv2 .vg-rev__stage { padding: 0; }
.mv2 .vg-rev__arrow { display: none; }
.mv2 .vg-rev__track { gap: 12px; padding: 2px var(--m-gutter) 6px; scroll-padding: 0 var(--m-gutter); }
.mv2 .vg-rev-card { flex: 0 0 86%; padding: 20px; border-radius: 20px; background: var(--m-surface-2); border: 0; box-shadow: none; color: var(--m-ink); }
.mv2 .vg-rev-card__quote { display: none; }
.mv2 .vg-rev-card__stars { color: var(--m-amber); }
.mv2 .vg-rev-card__text { font-size: 15px; line-height: 1.55; color: var(--m-ink-2); }
.mv2 .vg-rev-card__avatar { background: var(--m-surface-3) !important; color: var(--m-ink); }
.mv2 .vg-rev-card__meta strong { color: var(--m-ink); }
.mv2 .vg-rev-card__meta small { color: var(--m-ink-3); }
.mv2 .vg-rev__dots { gap: 6px; margin-top: 14px; }
.mv2 .vg-rev__dot { width: 24px; height: 24px; padding: 0; background: none; border: 0; position: relative; }
.mv2 .vg-rev__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 3px; background: var(--m-line-2); transition: width .2s, margin .2s; }
.mv2 .vg-rev__dot.is-active::after { width: 18px; margin-left: -9px; background: var(--m-navy); }

/* Ratgeber */
.mv2 .v2-blog-edit { display: grid; gap: 12px; }
.mv2 .v2-blog-tile { padding: 18px; border-radius: 18px; border: 1px solid var(--m-line); box-shadow: none; background: #fff; }
.mv2 .v2-blog-tile__num { display: none; }
.mv2 .v2-blog-tile__tag { font-size: 12px; letter-spacing: .08em; color: var(--m-ink-3); }
.mv2 .v2-blog-tile h3 { font-size: 17px; line-height: 1.35; }
.mv2 .v2-blog-tile p { font-size: 14.5px; color: var(--m-ink-2); }
.mv2 .v2-blog-tile__cta { min-height: 44px; display: inline-flex; align-items: center; font-weight: 650; color: var(--m-ink); }
.mv2 .v2-blog-cta-edit, .mv2 .v2-faq-more { display: flex; justify-content: center; }
.mv2 .v2-blog-cta-edit .btn, .mv2 .v2-faq-more .btn { width: 100%; justify-content: center; min-height: 48px; border-radius: 14px; border: 1px solid var(--m-line-2); color: var(--m-ink); font-weight: 650; }

/* FAQ */
.mv2 .section--v2-faq-ed { background: var(--m-surface-2); }
.mv2 .v2-faq-edit { gap: 0; }
.mv2 .v2-faq-item { margin: 0; border: 0; border-top: 1px solid var(--m-line-2); border-radius: 0; background: none; box-shadow: none; }
.mv2 .v2-faq-item:last-of-type { border-bottom: 1px solid var(--m-line-2); }
.mv2 .v2-faq-item.is-open, .mv2 .v2-faq-item[open] { border-color: var(--m-line-2); box-shadow: none; }
.mv2 .v2-faq-q { min-height: 60px; padding: 14px 0; font-size: 16px; font-weight: 620; color: var(--m-ink); background: none; }
.mv2 .v2-faq-chev { color: var(--m-ink-3); }
.mv2 .v2-faq-a { padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--m-ink-2); }

/* Kontakt („Hast du Fragen?“) */
.mv2 .section--dark { padding: 48px var(--m-gutter); }
.mv2 .section--dark .section__header h2 { color: #fff; }
.mv2 .section--dark .section__header p { color: #C5CAD8; }
.mv2 .section__eyebrow--light { color: var(--m-amber); }
.mv2 .kontakt-grid { gap: 10px; }
.mv2 .kontakt-card { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; min-height: 76px; padding: 14px 16px; text-align: left; border-radius: 16px; box-shadow: none; }
.mv2 .kontakt-card__icon { grid-row: span 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
.mv2 .kontakt-card h3, .mv2 .kontakt-card strong { margin: 0; font-size: 16px; }
.mv2 .kontakt-card p, .mv2 .kontakt-card span { margin: 0; font-size: 14px; }
.mv2 .kontakt-volti-slot { display: none; }

/* Footer: Linkgruppen aufklappbar (js/mobile.js), Kontakt + Recht kompakt */
.mv2 .footer { padding: 40px var(--m-gutter) 24px; }
.mv2 .footer__inner { padding: 0; gap: 24px; }
.mv2 .footer__links { display: block; }
.mv2 .footer__links > div { border-top: 1px solid rgba(255,255,255,.12); }
.mv2 .footer__links > div:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.mv2 .footer__links h5 { margin: 0; }
.mv2 .footer__acc { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.mv2 .footer__acc::after { content: ""; width: 20px; height: 20px; background: #8E94AA; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.mv2 .footer__links > div.is-open .footer__acc::after { transform: rotate(180deg); }
.mv2.mvjs .footer__links > div:not(.is-open) > a { display: none; }
.mv2 .footer__links > div > a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: #C7CBD8; }
.mv2 .footer__links > div.is-open { padding-bottom: 10px; }
.mv2 .footer-newsletter__intro h3 { color: #fff; }
.mv2 .footer-newsletter__intro p { color: #C5CAD8; }
.mv2 .footer-newsletter input[type="email"] { min-height: 52px; border-radius: 12px; font-size: 16px; }
.mv2 .footer-newsletter .btn--primary { min-height: 52px; border-radius: 12px; }
.mv2 .footer__bottom { padding: 20px 0 0; }
.mv2 .onsite-usp__card { display: block; }
.mv2 .onsite-usp__body { width: auto; max-width: none; }
.mv2 .v2-how-flow__step::before, .mv2 .v2-how-flow__step::after, .mv2 .v2-how-flow::before, .mv2 .v2-how-flow::after { display: none; }

/* Andock-Leiste: Platz für WhatsApp nur, wenn die Seite den Knopf hat; Hintergrund auch ohne Rechner-Skript */
.mv2.mvwa .mobile-cta { right: 76px; }
.mv2 body:has(.mobile-cta.is-visible)::after { transform: none; }
.mv2 body:has(.mobile-cta.is-visible) .wa-float { transform: none; }
.mv2.mflow body:has(.mobile-cta.is-visible)::after { display: none; }
/* Gewerbe: vorhandenes Telefon-Icon im Header als Icon-Button */
.mv2 .header-phone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent; color: #fff; }
.mv2 .header-phone svg { width: 24px; height: 24px; color: #fff; stroke: currentColor; }
.mv2 .header-phone__num { display: none; }

/* Inline-Rechner (Tarifrechner-Seite): schmalere Ränder, damit Kachel-Texte nicht umbrechen */
.mv2 .section--calculator > .container { padding-left: 12px; padding-right: 12px; }
.mv2 .calc-step { padding: 20px 16px 0; }
.mv2 .tile__label { font-size: 15px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.mv2.mflow .calc-step { padding: 24px var(--m-gutter) 0; }
/* Gewerbe: Abschnittsköpfe linksbündig wie im übrigen System */
.mv2 .g2-head { text-align: left; }
.mv2 .g2-head h2, .mv2 .g2-head p { text-align: left; margin-left: 0; margin-right: 0; }
.mv2:not(.mflow) .calc-nav { margin-left: -16px; margin-right: -16px; }

/* Kontrast-Korrekturen (WCAG AA, axe-core) */
.mv2 .onsite-usp a { color: var(--m-ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--m-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mv2 .story-fact__num { color: #8A5A00; }
.mv2 .footer__bottom p { color: #A4AABD; }
.mv2 .vc-tag--eco { color: #00785A; background: #E7F8F2; }
.mv2 .vc-tag--bonus { color: #7A5200; background: var(--m-amber-50); }

/* Touchflächen ≥ 44 px und Mindestschriftgröße 12 px */
.mv2 .vgb-card__tel { min-height: 44px; display: inline-flex; align-items: center; }
.mv2 .vg-rev__dots { gap: 0; }
.mv2 .vg-rev__dot { width: 32px; height: 44px; }
.mv2 .footer-newsletter__consent input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.mv2 .footer-newsletter__consent { min-height: 44px; align-items: flex-start; gap: 10px; }
.mv2 .vgb-card__top-txt span, .mv2 .vgb-card__meta, .mv2 .vgb-local__k, .mv2 .footer-newsletter__badge { font-size: 12px; }
.mv2 .story-video__badge { font-size: 12px; }
.mv2 .story-fact__label { font-size: 12.5px; }
.mv2 .kontakt-card small { font-size: 13px; }

/* Rechnungs-Upload (Energieprüfer-Modal) im Rechner */
.mv2.mflow .section--calculator { display: flex; flex-direction: column; }
.mv2.mflow .mflow-bar { order: -1; flex: none; }
.mv2.mflow #vgEpBanner { margin: 12px var(--m-gutter) 0; }
.mv2 .ep-prefill-banner { border: 0; border-radius: 14px; background: var(--m-green-50); box-shadow: none; }
.mv2 .ep-prefill-banner__close { width: 44px; height: 44px; }
.mv2 .ep-quick-modal__close { width: 44px; height: 44px; }
.mv2 .ep-quick-drop__actions .btn { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.mv2 .ep-quick-row__icon { display: none; }
.mv2 .ep-quick-result__primary { min-height: 52px; border-radius: 14px; background: var(--m-amber); background-image: none; color: var(--m-navy); box-shadow: none; }
.mv2 .ep-quick-result__actions .btn--ghost, .mv2 #epQuickErrorRetry { min-height: 44px; border-radius: 12px; }


/* ── Feinschliff 2026-10-24 ─────────────────────────────────────────────── */
/* Hero: Jahresverbrauch direkt in kWh (statt Personen-Auswahl) */
.mv2 .hero--home .hero__sb-field { position: relative; }
.mv2 .hero--home #heroVerbrauch {
  padding-right: 96px; -moz-appearance: textfield; appearance: textfield;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A7088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
}
.mv2 .hero--home #heroVerbrauch::-webkit-outer-spin-button, .mv2 .hero--home #heroVerbrauch::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mv2 .hero__sb-unit { position: absolute; right: 16px; bottom: 0; height: 52px; display: flex !important; align-items: center; font-size: 14px; color: var(--m-ink-3); pointer-events: none; }

/* Tarifkarte: Versorger mit größerem Logo über dem Preis */
.mv2 .vc__main { grid-template-areas: "prov prov" "amount bonus" "per per" "alt alt" "facts facts" "cta cta" "more more"; }
.mv2 .vc__prov { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; margin: 0 0 14px; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--m-line); }
.mv2 .vc__logo { width: 96px; height: 60px; padding: 6px 10px; border-radius: 12px; }
.mv2 .vc__rate { font-size: 17px; line-height: 1.3; }
.mv2 .vc__provider { font-size: 14px; margin-top: 2px; }

/* Hero: Privat oder Gewerbe – Segment-Umschalter über Strom/Gas */
.mv2 .hero__sb-cust { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: var(--m-surface-3); }
.mv2 .hero__sb-cust-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--m-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mv2 .hero__sb-cust-btn svg { width: 18px; height: 18px; flex: none; color: var(--m-ink-3); }
.mv2 .hero__sb-cust-btn.active { background: #fff; color: var(--m-ink); box-shadow: 0 1px 2px rgba(26,31,54,.08), 0 2px 8px -2px rgba(26,31,54,.14); }
.mv2 .hero__sb-cust-btn.active svg { color: var(--m-navy); }
.mv2 .hero__sb-cust-btn:focus-visible { outline: 2px solid var(--m-amber-600); outline-offset: 2px; }