/* ------------------------------------------------------------------
   Schritt-Ansicht (dvrw-woo-configuration 0.11.0) — Nicos Entwurf vom 24.09.2026.

   Handgepflegt und NICHT Teil von `bun run build`: die Datei wird nur geladen,
   wenn am Produkt „Schritt-Ansicht" an ist (Frontend::maybe_enqueue), und darf
   wie Nicos custom.css direkt bearbeitet werden. Die Selektoren tragen ihren
   Geltungsbereich selbst (.dvrw-configurator / body.dvrw-configurator-active).

   Das Markup rendert der Server (Renderer), der Controller setzt nur Klassen,
   Texte und `hidden` (src/ui/schritte-view.ts).
   ------------------------------------------------------------------ */

/* Eigene optische Anpassungen.
   Wird als letztes Stylesheet geladen und gewinnt damit gegen alles andere. */


/* ==================================================================
   Textkuerzungen
   ================================================================== */

/* Einleitung unter der Ueberschrift "Solarstrom, der bleibt."
   ("Module fangen den Sonnenstrom. ..."). Steht in der Kurzbeschreibung des
   Produkts — wer sie dort loescht, braucht diese Regel nicht mehr. */
body.dvrw-configurator-active .dvrw-hero__lede {
  display: none;
}


/* ==================================================================
   Schritt-fuer-Schritt-Navigation im Konfigurator
   Greift nur, wenn custom.js den Wrapper .mxx-wizard gesetzt hat.
   ================================================================== */

/* --- nur der aktive Schritt ist sichtbar -------------------------- */
.dvrw-configurator.mxx-wizard .step.mxx-step--hidden {
  display: none;
}

/* Das Formular haengt 16px row-gap an, zusammen also 24px bis zur Navigation */
.dvrw-configurator.mxx-wizard .step {
  margin-bottom: 8px;
}

/* Die Zusammenfassung "Deine Konfiguration" gehoert in den letzten
   Schritt. In Schritt 1 bis 4 bleibt sie ausgeblendet; die Sticky-Leiste
   am unteren Rand zeigt dort weiterhin Preis und Eckdaten. */
.dvrw-configurator.mxx-wizard:not(.mxx-last-step) aside.summary {
  display: none;
}

/* --- Teilpreis in der Sektionsueberschrift ------------------------ */
.dvrw-configurator .step__head-right {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dvrw-configurator .mxx-step-price {
  align-items: baseline;
  background: var(--mxx-lime-soft);
  border: 1px solid var(--mxx-lime-ink);
  border-radius: var(--r-chip);
  color: var(--mxx-ink);
  display: inline-flex;
  gap: 8px;
  padding: 5px 13px;
  white-space: nowrap;
}

.dvrw-configurator .mxx-step-price[hidden] {
  display: none;
}

.dvrw-configurator .mxx-step-price__lbl {
  color: var(--mxx-lime-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dvrw-configurator .mxx-step-price__val {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .dvrw-configurator .mxx-step-price__val {
    font-size: 15px;
  }
}

/* --- Reiterleiste ------------------------------------------------- */

/* Ohne min-width:0 waechst die Rasterspalte auf die Breite aller Reiter
   zusammen und sprengt auf dem Handy das Layout. */
.dvrw-configurator.mxx-wizard main#main {
  min-width: 0;
}

.dvrw-configurator .mxx-steps {
  margin: 0 0 24px;
  max-width: 100%;
  min-width: 0;
}

.dvrw-configurator .mxx-steps__track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}

.dvrw-configurator .mxx-steps__track::-webkit-scrollbar {
  display: none;
}

.dvrw-configurator .mxx-step-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  color: var(--mxx-ink-soft);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  scroll-snap-align: start;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
  white-space: nowrap;
}

.dvrw-configurator .mxx-step-tab:hover {
  background: var(--mxx-paper);
  color: var(--mxx-ink);
}

.dvrw-configurator .mxx-step-tab__num {
  align-items: center;
  background: var(--mxx-paper);
  border: 1px solid var(--mxx-border);
  border-radius: 50%;
  color: var(--mxx-ink-soft);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
  width: 26px;
}

.dvrw-configurator .mxx-step-tab.is-done {
  color: var(--mxx-ink);
}

.dvrw-configurator .mxx-step-tab.is-done .mxx-step-tab__num {
  background: var(--mxx-lime-soft);
  border-color: var(--mxx-lime-ink);
  color: var(--mxx-lime-ink);
}

.dvrw-configurator .mxx-step-tab.is-active {
  background: var(--mxx-lime-soft);
  border-color: var(--mxx-lime-ink);
  color: var(--mxx-ink);
}

.dvrw-configurator .mxx-step-tab.is-active .mxx-step-tab__num {
  background: var(--mxx-lime-ink);
  border-color: var(--mxx-lime-ink);
  color: var(--mxx-card);
}

.dvrw-configurator .mxx-step-tab:focus-visible {
  outline: 2px solid var(--mxx-lime-ink);
  outline-offset: 2px;
}

/* --- Fortschrittslinie unter den Reitern -------------------------- */
.dvrw-configurator .mxx-steps__bar {
  background: var(--mxx-hairline);
  border-radius: 999px;
  height: 3px;
  overflow: hidden;
}

.dvrw-configurator .mxx-steps__bar-fill {
  background: var(--mxx-lime-ink);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width var(--dur-base) var(--ease-out-quart);
  width: 0;
}

/* --- Zurueck / Weiter --------------------------------------------- */
.dvrw-configurator .mxx-nav {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 50px;
}

.dvrw-configurator .mxx-nav__btn {
  flex: 0 0 auto;
}

.dvrw-configurator .mxx-nav__btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.dvrw-configurator .mxx-nav__prev.is-hidden,
.dvrw-configurator .mxx-nav__next.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Navigation liegt hinter der Zusammenfassung. Das Formular ist ein
   Flex-Container, deshalb volle Breite erzwingen. */
.dvrw-configurator.mxx-wizard .grid > .mxx-nav,
.dvrw-configurator.mxx-wizard form.cart > .mxx-nav {
  flex: 1 1 100%;
  margin-top: 0;
  width: 100%;
}

.dvrw-configurator .mxx-nav__counter {
  color: var(--mxx-ink-faint);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

.dvrw-configurator .mxx-nav__next--cart {
  box-shadow: 0 8px 22px -10px oklch(0.42 0.13 140 / 0.6);
}

@media (max-width: 640px) {
  .dvrw-configurator .mxx-step-tab {
    font-size: 13px;
    padding: 8px 13px 8px 8px;
  }

  .dvrw-configurator .mxx-nav {
    gap: 10px;
  }

  .dvrw-configurator .mxx-nav__counter {
    display: none;
  }

  .dvrw-configurator .mxx-nav__btn {
    flex: 1 1 auto;
  }
}


/* ==================================================================
   Sektion 3: CCU V2+ 2300W als Stepper, ready2plugin, Leistungsanzeige
   Kompakt gehalten, damit die Sektion ohne Scrollen sichtbar bleibt.
   ================================================================== */

/* etwas weniger Luft in Schritt 3 */
.dvrw-configurator.mxx-wizard #step-3 .step__lede {
  margin-bottom: 18px;
}

.dvrw-configurator.mxx-wizard #step-3 .derive {
  margin-top: 10px;
  padding: 11px 16px;
}

.dvrw-configurator.mxx-wizard #step-3 .meter-gift {
  margin-top: 12px;
}

.dvrw-configurator.mxx-wizard #step-3 .meter-gift .card-pick {
  min-height: 0;
  padding: 14px 16px;
}

.dvrw-configurator .mxx-ccu {
  display: flex;
  flex-direction: column;
}

/* --- Leistungskarte: links die Zahl, rechts der Schalter ------------ */
.dvrw-configurator .mxx-power {
  background: var(--mxx-paper);
  border: 1px solid var(--mxx-hairline);
  border-radius: var(--r-control);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-top: 12px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out-quart),
              background var(--dur-base) var(--ease-out-quart);
}

.dvrw-configurator .mxx-power.is-unlocked {
  background: var(--mxx-lime-soft);
  border-color: var(--mxx-lime-ink);
}

.dvrw-configurator .mxx-power__col {
  min-width: 0;
  padding: 14px 16px;
}

.dvrw-configurator .mxx-power__col--watt {
  border-right: 1px solid var(--mxx-hairline);
}

.dvrw-configurator .mxx-power.is-unlocked .mxx-power__col--watt {
  border-right-color: rgba(0, 153, 18, 0.25);
}

.dvrw-configurator .mxx-power__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: space-between;
}

.dvrw-configurator .mxx-power__label {
  color: var(--mxx-ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dvrw-configurator .mxx-power__badge {
  border-radius: var(--r-chip);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  text-transform: uppercase;
}

.dvrw-configurator .mxx-power.is-locked .mxx-power__badge {
  background: var(--mxx-warn-soft);
  border: 1px solid var(--mxx-warn-border);
  color: var(--mxx-warn);
}

.dvrw-configurator .mxx-power.is-unlocked .mxx-power__badge {
  background: var(--mxx-lime-ink);
  color: var(--mxx-card);
}

.dvrw-configurator .mxx-power__value {
  align-items: baseline;
  color: var(--mxx-ink);
  display: flex;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  gap: 6px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 8px;
  transition: color var(--dur-base) var(--ease-out-quart);
}

.dvrw-configurator .mxx-power.is-unlocked .mxx-power__value {
  color: var(--mxx-lime-ink);
}

.dvrw-configurator .mxx-power__unit {
  color: var(--mxx-ink-soft);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.dvrw-configurator .mxx-power__hint {
  color: var(--mxx-ink-soft);
  font-size: 12.5px;
  line-height: 1.4;
  margin: 6px 0 0;
}

.dvrw-configurator .mxx-power.is-unlocked .mxx-power__hint {
  color: var(--mxx-ink);
}

/* --- ready2plugin-Schalter ---------------------------------------- */
.dvrw-configurator .mxx-r2p {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.dvrw-configurator .mxx-r2p__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dvrw-configurator .mxx-r2p__title {
  align-items: center;
  color: var(--mxx-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 600;
  gap: 4px 8px;
  line-height: 1.3;
}

.dvrw-configurator .mxx-r2p__tag {
  background: var(--mxx-lime-ink);
  border-radius: var(--r-chip);
  color: var(--mxx-card);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.dvrw-configurator .mxx-r2p__price {
  color: var(--mxx-ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.dvrw-configurator .mxx-power.is-unlocked .mxx-r2p__price {
  color: var(--mxx-lime-ink);
}

.dvrw-configurator .mxx-r2p__sub {
  color: var(--mxx-ink-soft);
  font-size: 12.5px;
  line-height: 1.4;
}

/* --- Hinweis bei gesperrter Anzahl ---------------------------------- */
.dvrw-configurator .mxx-ccu__info {
  align-items: center;
  background: var(--mxx-card);
  border: 1px dashed var(--mxx-border);
  border-radius: var(--r-control);
  color: var(--mxx-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 8px 12px;
  line-height: 1.4;
  margin-top: 10px;
  padding: 9px 12px;
}

.dvrw-configurator .mxx-ccu__info[hidden] {
  display: none;
}

.dvrw-configurator .mxx-ccu__info-icon {
  align-items: center;
  border: 1.5px solid var(--mxx-ink-soft);
  border-radius: 50%;
  color: var(--mxx-ink-soft);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.dvrw-configurator .mxx-ccu__info-text {
  flex: 1 1 200px;
}

.dvrw-configurator .mxx-ccu__info-btn {
  background: transparent;
  border: 1px solid var(--mxx-border);
  border-radius: var(--r-chip);
  color: var(--mxx-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
  white-space: nowrap;
}

.dvrw-configurator .mxx-ccu__info-btn:hover {
  background: var(--mxx-lime-soft);
  border-color: var(--mxx-lime-ink);
}

@media (max-width: 640px) {
  .dvrw-configurator .mxx-ccu__stepper .stepper__value {
    font-size: 26px;
    min-width: 0;
  }

  .dvrw-configurator .mxx-power {
    grid-template-columns: 1fr;
  }

  .dvrw-configurator .mxx-power__col--watt {
    border-bottom: 1px solid var(--mxx-hairline);
    border-right: 0;
  }

  .dvrw-configurator .mxx-power.is-unlocked .mxx-power__col--watt {
    border-bottom-color: rgba(0, 153, 18, 0.25);
  }
}


/* ==================================================================
   Sektion 4: Selbst installieren oder Installation durch den Partner
   ================================================================== */

.dvrw-configurator .mxx-install {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
}

.dvrw-configurator .mxx-install__choice {
  margin-top: 0;
}

.dvrw-configurator .mxx-install__opt {
  min-height: 0;
  padding: 16px 18px;
}

.dvrw-configurator .mxx-install__opt .card-pick__price {
  color: var(--mxx-ink-soft);
  font-size: 12.5px;
}

.dvrw-configurator .mxx-install__opt.is-on .card-pick__price {
  color: var(--mxx-lime-ink);
}

/* --- Paketkarte des Partners ---------------------------------------- */
.dvrw-configurator .mxx-install__pkg {
  background: var(--mxx-paper);
  border: 1px solid var(--mxx-hairline);
  border-radius: var(--r-control);
  padding: 14px 16px;
}

.dvrw-configurator .mxx-install__pkg[hidden] {
  display: none;
}

.dvrw-configurator .mxx-install__pkg-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.dvrw-configurator .mxx-install__pkg-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dvrw-configurator .mxx-install__eyebrow {
  color: var(--mxx-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dvrw-configurator .mxx-install__partner {
  color: var(--mxx-ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dvrw-configurator .mxx-install__price {
  color: var(--mxx-ink);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

.dvrw-configurator .mxx-install__list {
  color: var(--mxx-ink-soft);
  columns: 2;
  column-gap: 20px;
  font-size: 12.5px;
  line-height: 1.45;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.dvrw-configurator .mxx-install__list li {
  break-inside: avoid;
  padding: 2px 0 2px 16px;
  position: relative;
}

.dvrw-configurator .mxx-install__list li::before {
  color: var(--mxx-lime-ink);
  content: "\2713";
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 2px;
}

.dvrw-configurator .mxx-install__pay {
  border-top: 1px solid var(--mxx-hairline);
  color: var(--mxx-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 6px 22px;
  margin-top: 12px;
  padding-top: 10px;
}

.dvrw-configurator .mxx-install__pay[hidden] {
  display: none;
}

.dvrw-configurator .mxx-install__pay strong {
  color: var(--mxx-ink);
  font-variant-numeric: tabular-nums;
}

.dvrw-configurator .mxx-install__note {
  background: var(--mxx-warn-soft);
  border: 1px solid var(--mxx-warn-border);
  border-radius: 10px;
  color: var(--mxx-warn);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 12px 0 0;
  padding: 9px 12px;
}

/* Zwischenzeile vor der Montageort-Auswahl */
.dvrw-configurator .mxx-install__where {
  color: var(--mxx-ink-soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 2px 0 0;
}

/* --- Service gewaehlt: Montageort-Auswahl und Kabel fallen weg ---------
   Die Montageorte legt der Partner beim Aufmass fest. */
.dvrw-configurator.mxx-wizard #step-4.mxx-install-service .service-block--cable,
.dvrw-configurator.mxx-wizard #step-4.mxx-install-service .install-progress,
.dvrw-configurator.mxx-wizard #step-4.mxx-install-service #install-grid,
.dvrw-configurator.mxx-wizard #step-4.mxx-install-service .dvrw-icon-card[data-loc="ohne"] {
  display: none;
}

.dvrw-configurator.mxx-wizard #step-4.mxx-install-service .mxx-install__where {
  background: var(--mxx-paper);
  border: 1px solid var(--mxx-hairline);
  border-radius: var(--r-control);
  color: var(--mxx-ink);
  margin-top: 0;
  padding: 12px 14px;
}

/* --- "zzgl. Montage ..." unter den Summen ---------------------------- */
.dvrw-configurator .mxx-install-extra {
  color: var(--mxx-ink-soft);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 6px;
}

.dvrw-configurator .mxx-install-extra[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .dvrw-configurator .mxx-install__list {
    columns: 1;
  }

}


/* ==================================================================
   Partner-Badge im Produktbild (?partner=...)
   ================================================================== */
.woocommerce-product-gallery .mxx-partner-badge,
.mxx-partner-badge {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 14px 10px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 21;
}

.mxx-partner-badge__kicker {
  color: #6d6d70;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Theme und WooCommerce setzen Galerie-Bilder auf 100 % Breite,
   deshalb hier mit Nachdruck */
.woocommerce-product-gallery .mxx-partner-badge__logo,
.mxx-partner-badge__logo {
  display: block !important;
  height: var(--mxx-logo-h, 26px) !important;
  margin: 0 !important;
  max-width: 150px !important;
  object-fit: contain;
  width: auto !important;
}

@media (max-width: 640px) {
  .mxx-partner-badge {
    border-radius: 10px;
    padding: 7px 10px 8px;
    right: 10px;
    top: 10px;
  }

  .woocommerce-product-gallery .mxx-partner-badge__logo,
  .mxx-partner-badge__logo {
    height: calc(var(--mxx-logo-h, 26px) * 0.8) !important;
    max-width: 120px !important;
  }
}

/* Quadratische Logos füllen die Badge-Breite (so breit wie der Rabatt-Knopf),
   die Höhe aus dem Admin gilt für sie nicht */
.woocommerce-product-gallery .mxx-partner-badge__logo--quadrat,
.mxx-partner-badge__logo--quadrat {
  align-self: center;
  border-radius: 8px;
  height: 112px !important;
  width: 112px !important;
}

@media (max-width: 640px) {
  .woocommerce-product-gallery .mxx-partner-badge__logo--quadrat,
  .mxx-partner-badge__logo--quadrat {
    border-radius: 6px;
    height: 96px !important;
    width: 96px !important;
  }
}


/* ==================================================================
   Schritt 5: Extras und Zusammenfassung als eine Karte
   ================================================================== */
/* main hat im Flex-Formular keine feste Breite und richtet sich nach
   seinem Inhalt; die Zusammenfassung hat width:100 %. Beide gleich breit
   machen, sonst stehen die Karten rechts nicht buendig. */
.dvrw-configurator.mxx-wizard form.cart > main#main,
.dvrw-configurator.mxx-wizard form.cart > aside.summary,
.dvrw-configurator.mxx-wizard .grid > main#main,
.dvrw-configurator.mxx-wizard .grid > aside.summary {
  box-sizing: border-box;
  flex: 1 1 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.dvrw-configurator.mxx-wizard main#main > .step,
.dvrw-configurator.mxx-wizard .mxx-steps {
  box-sizing: border-box;
  width: 100%;
}

/* .grid ist display:contents, den Abstand macht das Formular (flex, row-gap) */
.dvrw-configurator.mxx-wizard.mxx-last-step .grid,
.dvrw-configurator.mxx-wizard.mxx-last-step form.cart,
body.dvrw-configurator-active.woocommerce div.product .dvrw-configurator.mxx-wizard.mxx-last-step form.cart {
  gap: 0;
  row-gap: 0;
}

.dvrw-configurator.mxx-wizard.mxx-last-step #step-5 {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  padding-bottom: 10px;
}

.dvrw-configurator.mxx-wizard.mxx-last-step aside.summary {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-card);
  padding-top: 0;
  top: 0;
}

/* feine Trennlinie zwischen Extras und Zusammenfassung */
.dvrw-configurator.mxx-wizard.mxx-last-step aside.summary::before {
  border-top: 1px solid var(--mxx-hairline);
  content: "";
  display: block;
  margin: 0 0 22px;
}

.dvrw-configurator.mxx-wizard.mxx-last-step .grid > .mxx-nav {
  margin-top: 24px;
}


/* ==================================================================
   Leser-Rabatt der Partner-Aktion (direkt vom Preis, zählt zur Ersparnis)
   ================================================================== */
.mxx-partner-badge__deal {
  background: var(--mxx-lime-ink, #009912);
  border-radius: 999px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 2px;
  padding: 3px 8px;
  white-space: nowrap;
}

.dvrw-configurator .mxx-partner-deal {
  color: var(--mxx-ink-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  margin: 2px 0 10px;
}

.dvrw-configurator .summary-partner .summary-partner__value {
  color: var(--mxx-lime-ink);
  font-weight: 600;
}

.dvrw-configurator .mxx-partner-deal strong {
  color: var(--mxx-lime-ink);
  white-space: nowrap;
}

/* Die Leiste blendet unbekannte Kinder ihres Fußes aus (configurator.css) —
   der Leser-Rabatt gehört dazu. */
.dvrw-configurator .sticky-bottom .sticky-bottom__footer > .mxx-partner-deal {
  display: block;
  font-size: 11px;
  margin: 0;
}

/* Direkt unter dem Preis: der Preisblock ist flex mit 14 px Abstand, dazu 20 px
   Außenabstand unter dem Preis — die Zeile gehört sichtbar zum Preis (gemessen 36 → 10 px). */
.dvrw-configurator .dvrw-product-totals > .wapf--inner + .mxx-partner-deal {
  margin-top: -26px;
}


/* ==================================================================
   Handy kompakt (Nikos 25.09.2026: „make it shorter to pass on user screen")
   Ziel: auf 390 × 844 steht ein Schritt samt Weiter über der Leiste.
   Nur Abstände, Schriftgrößen und Raster — kein Inhalt verschwindet.
   ================================================================== */
@media (max-width: 640px) {
  /* Reiterleiste */
  .dvrw-configurator.mxx-wizard .mxx-steps { margin-bottom: 10px; }
  .dvrw-configurator.mxx-wizard .mxx-steps__track { padding-bottom: 6px; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab { padding: 6px 11px 6px 6px; gap: 7px; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab__num { width: 22px; height: 22px; font-size: 11px; }

  /* Karte, Kopf, Überschrift, Einleitung */
  .dvrw-configurator.mxx-wizard .step { padding: 14px 14px 16px; }
  .dvrw-configurator.mxx-wizard .step__head { margin-bottom: 4px; }
  .dvrw-configurator.mxx-wizard .mxx-step-price { padding: 3px 10px; gap: 6px; }
  .dvrw-configurator.mxx-wizard .mxx-step-price__val { font-size: 14px; }
  .dvrw-configurator.mxx-wizard .step__title { font-size: 19px; line-height: 1.2; margin: 6px 0 4px; }
  .dvrw-configurator.mxx-wizard .step__lede { font-size: 13px; line-height: 1.45; margin: 0 0 10px; }
  .dvrw-configurator.mxx-wizard #step-3 .step__lede { margin-bottom: 10px; }

  /* Zähler (Wp, kWh, CCU) */
  .dvrw-configurator.mxx-wizard .stepper { padding: 5px; }
  .dvrw-configurator.mxx-wizard .stepper__btn { width: 40px; height: 40px; }
  .dvrw-configurator.mxx-wizard .stepper__value { font-size: 24px; line-height: 1.15; }
  .dvrw-configurator.mxx-wizard .mxx-ccu__stepper .stepper__value { font-size: 19px; }

  /* Skala unter dem Wp-Zähler */
  .dvrw-configurator.mxx-wizard .scale { margin-top: 10px; }
  .dvrw-configurator.mxx-wizard .scale__labels { font-size: 11px; }

  /* „Sie erhalten" als eine flache Zeile */
  .dvrw-configurator.mxx-wizard .derive,
  .dvrw-configurator.mxx-wizard #step-3 .derive { margin-top: 8px; padding: 8px 12px; gap: 2px; }
  .dvrw-configurator.mxx-wizard .derive__label { font-size: 10px; }
  .dvrw-configurator.mxx-wizard .derive__value { font-size: 13px; line-height: 1.35; }

  /* Ergebnis-Zahlen: kleiner, in Schritt 2 nebeneinander */
  .dvrw-configurator.mxx-wizard .outcome { margin-top: 10px; padding-top: 10px; }
  .dvrw-configurator.mxx-wizard .outcome__label { font-size: 10px; margin-bottom: 2px; }
  .dvrw-configurator.mxx-wizard .outcome__value { font-size: 30px; line-height: 1.1; }
  .dvrw-configurator.mxx-wizard .outcome__value .unit { font-size: 14px; }
  .dvrw-configurator.mxx-wizard .outcome__value-eur { font-size: 13px; }
  .dvrw-configurator.mxx-wizard #step-2 .outcome {
    column-gap: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .dvrw-configurator.mxx-wizard #step-2 .outcome > * { margin-top: 0; min-width: 0; }
  .dvrw-configurator.mxx-wizard #step-2 .outcome > .outcome__label { grid-column: 1; grid-row: 1; }
  .dvrw-configurator.mxx-wizard #step-2 .outcome > .outcome__value { grid-column: 1; grid-row: 2; font-size: 26px; }
  .dvrw-configurator.mxx-wizard #step-2 .outcome > .savings-output {
    border: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
  }
  .dvrw-configurator.mxx-wizard #step-2 .savings-output__col { display: flex; flex-direction: column; gap: 2px; }
  .dvrw-configurator.mxx-wizard #step-2 .savings-output__label { font-size: 10px; }
  .dvrw-configurator.mxx-wizard #step-2 .savings-output__value { font-size: 26px; }
  .dvrw-configurator.mxx-wizard .savings-output__value { font-size: 30px; line-height: 1.1; }
  .dvrw-configurator.mxx-wizard .savings-output__value .unit { font-size: 14px; }

  /* Schritt 3: Leistungskarte und Messgeräte enger, Messgeräte nebeneinander */
  .dvrw-configurator.mxx-wizard .mxx-power { margin-top: 8px; }
  .dvrw-configurator.mxx-wizard .mxx-power__col { padding: 10px 12px; }
  .dvrw-configurator.mxx-wizard .mxx-power__value { font-size: 28px; margin-top: 4px; }
  .dvrw-configurator.mxx-wizard .mxx-power__hint { margin-top: 3px; font-size: 12px; }
  .dvrw-configurator.mxx-wizard .mxx-r2p__title { font-size: 13.5px; }
  .dvrw-configurator.mxx-wizard .mxx-r2p__sub { font-size: 11.5px; }
  .dvrw-configurator.mxx-wizard .mxx-ccu__info { margin-top: 8px; padding: 7px 10px; font-size: 11.5px; }
  .dvrw-configurator.mxx-wizard .mxx-ccu__info-btn { padding: 4px 10px; font-size: 11.5px; }
  .dvrw-configurator.mxx-wizard #step-3 .meter-gift { margin-top: 10px; padding: 10px; }
  .dvrw-configurator.mxx-wizard .meter-gift__title { font-size: 14px; margin: 4px 0 2px; }
  .dvrw-configurator.mxx-wizard .meter-gift__lede { font-size: 11.5px; margin-bottom: 8px; }
  .dvrw-configurator.mxx-wizard .meter-gift__cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dvrw-configurator.mxx-wizard #step-3 .meter-gift .card-pick { padding: 10px; }
  .dvrw-configurator.mxx-wizard .meter-gift .card-pick__title { font-size: 13px; }
  .dvrw-configurator.mxx-wizard .meter-gift .card-pick__sub { font-size: 11px; line-height: 1.35; }
  .dvrw-configurator.mxx-wizard .meter-gift .card-pick__price { font-size: 12px; margin-top: 6px; }

  /* Schritt 4: Wahl nebeneinander, Montageorte dreispaltig, Kabel nebeneinander */
  .dvrw-configurator.mxx-wizard .mxx-install { gap: 8px; margin-bottom: 8px; }
  .dvrw-configurator.mxx-wizard .mxx-install__choice { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dvrw-configurator.mxx-wizard .mxx-install__opt { padding: 10px; }
  .dvrw-configurator.mxx-wizard .mxx-install__opt .card-pick__title { font-size: 13.5px; line-height: 1.25; }
  .dvrw-configurator.mxx-wizard .mxx-install__opt .card-pick__sub { font-size: 11px; line-height: 1.35; }
  .dvrw-configurator.mxx-wizard .mxx-install__opt .card-pick__price { font-size: 11px; padding-right: 26px; }
  .dvrw-configurator.mxx-wizard .mxx-install__where { font-size: 12px; }
  .dvrw-configurator.mxx-wizard .install-progress { padding: 8px 12px; margin: 6px 0 8px; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-card { padding: 8px 6px; min-height: 0; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-card__label { font-size: 12px; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-card__price { font-size: 10.5px; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-card .qty-stepper { margin-top: 6px; padding-top: 6px; gap: 2px; }
  .dvrw-configurator.mxx-wizard .dvrw-icon-card .qty-stepper__btn { width: 30px; height: 30px; }
  .dvrw-configurator.mxx-wizard #step-4 .service-block--cable { margin-top: 10px; padding-top: 10px; }
  .dvrw-configurator.mxx-wizard .cable-cross__note { font-size: 11.5px; }
  .dvrw-configurator.mxx-wizard .cable-cross__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Zurück / Weiter näher an den Schritt */
  .dvrw-configurator.mxx-wizard .mxx-nav { margin: 10px 0 16px; }
  .dvrw-configurator.mxx-wizard .mxx-nav__btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* Leiste unten: Preis + Knopf in einer Zeile, Ersparnis darunter */
  .dvrw-configurator.mxx-wizard .sticky-bottom { padding-top: 16px; row-gap: 2px; }
  .dvrw-configurator.mxx-wizard .sticky-bottom__totals {
    align-items: center;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dvrw-configurator.mxx-wizard .sticky-bottom__totals .wapf--inner { grid-column: 1; grid-row: 1; }
  .dvrw-configurator.mxx-wizard .sticky-bottom__totals .dvrw-savings-badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .dvrw-configurator.mxx-wizard .sticky-bottom__totals .sticky-bottom__cta {
    flex: none;
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 10px 16px;
    width: auto;
  }
  .dvrw-configurator.mxx-wizard .sticky-bottom .wapf-grand-total { font-size: 19px; }
  .dvrw-configurator.mxx-wizard .sticky-bottom .dvrw-original-total { font-size: 13px; }
}

/* Sehr schmale Handys (320 px): drei Montageorte nebeneinander sind zu eng. */
@media (max-width: 359px) {
  .dvrw-configurator.mxx-wizard .dvrw-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Handy: Reiterleiste passt in eine Zeile — nur der aktive Reiter zeigt seinen Namen,
   die anderen nur die Nummer (Name bleibt für Screenreader im DOM, visuell versteckt).
   Gemessen 25.09.: Leiste brauchte 574 px bei 370 px Platz, Schritt 4–5 waren abgeschnitten.
   Dazu weniger Luft zwischen Preis-Trennlinie und Reitern (28 + 28 + 16 px). */
@media (max-width: 640px) {
  .dvrw-configurator.mxx-wizard .mxx-steps__track { gap: 8px; justify-content: space-between; overflow: visible; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab:not(.is-active) { padding: 4px; gap: 0; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab:not(.is-active) .mxx-step-tab__label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .dvrw-configurator.mxx-wizard .mxx-step-tab.is-active { padding-right: 14px; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab__num { width: 28px; height: 28px; font-size: 12px; }

  body.dvrw-configurator-active.woocommerce div.product p.price { padding-bottom: 14px; margin-bottom: 12px; }
  body.dvrw-configurator-active.woocommerce div.product .dvrw-configurator.mxx-wizard form.cart { row-gap: 0; }
}

@media (max-width: 359px) {
  .dvrw-configurator.mxx-wizard .mxx-steps__track { gap: 4px; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab.is-active { font-size: 12.5px; gap: 6px; padding-right: 10px; }
  .dvrw-configurator.mxx-wizard .mxx-step-tab__num { width: 26px; height: 26px; }
}

/* „+" am CCU-Zähler: gesperrt, aber tippbar — der Tipp zeigt den Grund darunter. */
.dvrw-configurator .mxx-ccu__stepper .stepper__btn.is-blocked {
  cursor: not-allowed;
  opacity: 0.4;
}
.dvrw-configurator .mxx-ccu__stepper + .mxx-ccu__info { margin-top: 8px; }
@keyframes mxx-info-flash {
  0% { background: var(--mxx-lime-soft); border-color: var(--mxx-lime-ink); transform: scale(1.01); }
  100% { background: var(--mxx-card); border-color: var(--mxx-border); transform: none; }
}
.dvrw-configurator .mxx-ccu__info.is-flash { animation: mxx-info-flash 0.9s var(--ease-out-quart, ease-out); }
@media (prefers-reduced-motion: reduce) {
  .dvrw-configurator .mxx-ccu__info.is-flash { animation: none; }
}

/* Zurück und Weiter bündig mit der Karte (Nikos 25.09.2026). Das schwebende Trusted-Shops-Siegel
   (unten rechts) bleibt immer sichtbar — Ausblenden gefiel nicht. Auf dem Handy (Siegel 64 × 90 px
   am rechten Rand) endet die Knopfzeile darum vor dem Siegel, damit es daneben mitscrollt statt
   „Weiter" zu verdecken; auf dem Desktop bündig. */
.dvrw-configurator.mxx-wizard .mxx-nav { padding-left: 0; padding-right: 0; }
.dvrw-configurator.mxx-wizard .mxx-nav__prev { padding-left: 0; }
@media (max-width: 640px) {
  .dvrw-configurator.mxx-wizard .mxx-nav { padding-right: 74px; }
}

/* Steps 1–4: kein „In den Warenkorb" in der Leiste (Nikos 25.09.2026: direkt neben „Weiter" ein
   Fehlklick-Risiko — eine halb konfigurierte Anlage im Warenkorb). Preis und Ersparnis bleiben
   sichtbar; gekauft wird in Schritt 5 über „Ihre Konfiguration". */
.dvrw-configurator.mxx-wizard:not(.mxx-last-step) .sticky-bottom__totals .sticky-bottom__cta { display: none; }
@media (max-width: 640px) {
  .dvrw-configurator.mxx-wizard:not(.mxx-last-step) .sticky-bottom__totals { grid-template-columns: minmax(0, 1fr); }
}

/* „0 Wp" / ohne Solar (Nico, 29.09.2026): nur Speicher und CCU. Die Klasse .mxx-ohne-solar setzen
   Renderer (Erstpaint) und SchritteView.syncZeroSolar(). Schritt 4 (Installation) entfällt ganz,
   ebenso Montage-/Kabelzeilen und die Ertragszahlen — ohne eigene Module gibt es dafür keine
   Grundlage. Statt der Skala steht in Schritt 1 ein Hinweis (Information, keine Warnung). */
.dvrw-configurator.mxx-wizard .mxx-step-tab[hidden],
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-tab-4,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-4,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-1 .scale__labels,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-1 #wp-warn,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-1 .derive,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-1 .outcome,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar #step-2 .outcome,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar .summary-install,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar .summary__outcomes,
.dvrw-configurator.mxx-wizard.mxx-ohne-solar .sb-outcome {
  display: none !important;
}
.dvrw-configurator.mxx-wizard .mxx-zero-solar-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--mxx-border);
  border-radius: 12px;
  background: var(--mxx-card);
  color: var(--mxx-ink);
  font-size: 14px;
  line-height: 1.5;
}
.dvrw-configurator.mxx-wizard .mxx-zero-solar-note[hidden] { display: none; }
.dvrw-configurator.mxx-wizard .mxx-zero-solar-note__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--mxx-lime-ink);
}
.dvrw-configurator.mxx-wizard .mxx-zero-solar-note__icon svg { display: block; width: 18px; height: 18px; }