/* Lizenz- und Angebotsrechner — rechner-spezifisches CSS.
   Grundlage (Tokens, Header/Footer, Karten, Formular, Buttons) kommt aus base.css,
   die VOR dieser Datei geladen wird. */

/* Step tabs */
.bmr__tabs {
  display: flex;
  gap: .5rem;
  background: var(--white);
  border-radius: 99px;
  padding: .4rem;
  box-shadow: 0 1px 3px rgba(29, 37, 46, .08);
}
.bmr__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--base-semi-dark);
  padding: .55rem .75rem;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bmr__tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--base-ultra-light);
  color: var(--base-semi-dark);
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bmr__tab.is-active { background: var(--base); color: var(--white); }
.bmr__tab.is-active .bmr__tab-num { background: var(--primary); color: var(--base); }
.bmr__tab.is-done .bmr__tab-num { background: var(--primary); color: var(--base); }

/* Views (eine sichtbar) */
.bmr__view { display: none; }
.bmr__view.is-active { display: block; }

/* Zurück / Weiter */
.bmr__nav-row { margin-top: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bmr__nav-row--end { justify-content: flex-end; }

/* Laufende Summe auf Schritt 2 */
.bmr__running { margin-top: 1.25rem; font-size: .95rem; color: var(--base-semi-dark); }
.bmr__running strong { color: var(--base); font-size: 1.05rem; }

/* Schritt 1 — zweispaltig: Fragen links, Verdict + Add-ons rechts */
.bmr__s1-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
.bmr__s1-side { display: flex; flex-direction: column; gap: 1rem; }

.bmr__questions { display: flex; flex-direction: column; }
.bmr__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--base-light);
}
.bmr__q:last-child { border-bottom: 0; }
.bmr__q-text { min-width: 0; overflow-wrap: anywhere; }
.bmr__q-title { font-weight: 600; }
.bmr__q-sub { font-size: .875rem; color: var(--base-semi-dark); }

.bmr__seg--billing .bmr__seg-opt.is-active { background: var(--primary); color: var(--base); }

/* Add-on-Boxen — Typo identisch zur Verdict-Box (Feedback 04.08.) */
.bmr__addon { font-size: .95rem; color: var(--base); background: var(--base-ultra-light); border-radius: var(--radius); padding: 1rem 1.25rem; }
.bmr__addon-title { font-weight: 600; }
.bmr__addon--wide { margin-top: 1.5rem; }
.bmr__addon-q-heading { font-size: 1.35rem; font-weight: 700; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--base-light); }

/* Schritt 2 — Abrechnungs-Toggle */
.bmr__billing { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bmr__billing-label { font-size: .9rem; font-weight: 600; color: var(--base-semi-dark); }

/* Schritt 2 — Lizenz-Zeilen */
.bmr__rows { margin-top: 1rem; display: flex; flex-direction: column; }
.bmr__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--base-light);
}
.bmr__row:last-child { border-bottom: 0; }
.bmr__row-text { min-width: 0; overflow-wrap: anywhere; }
.bmr__row-title { font-weight: 600; }
.bmr__row-sub { font-size: .875rem; color: var(--base-semi-dark); }
.bmr__row-price { font-size: .875rem; color: var(--base-medium); white-space: nowrap; text-align: right; }

/* Zusammenfassung */
.bmr__summary { margin-top: 1.5rem; }
.bmr__mix { list-style: none; padding: 0; margin-top: .75rem; display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; }
.bmr__mix li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .5rem; align-items: baseline; }
.bmr__mix li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.bmr__mix-n { text-align: right; font-variant-numeric: tabular-nums; }
.bmr__mix li span:last-child { white-space: nowrap; }
.bmr__mix .bmr__mix-empty { display: block; color: var(--base-light); }
.bmr__total--year strong { font-size: 1.6rem; color: var(--white); }
.bmr__savings { font-size: .9rem; font-weight: 400; margin-top: .25rem; }
.bmr__savings--yearly { color: var(--primary); }
.bmr__savings--monthly { color: var(--magenta); }

/* Ersparnispotenzial */
.bmr__potential { margin-top: 1.5rem; background: var(--base-ultra-light); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.bmr__potential h3 { font-size: 1.1rem; font-weight: 700; }
.bmr__potential-list { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .95rem; color: var(--base-semi-dark); display: flex; flex-direction: column; gap: .35rem; }
.bmr__rate { margin-top: 1rem; }
.bmr__rate label { font-size: .9rem; font-weight: 600; color: var(--base-semi-dark); }
.bmr__rate-row { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.bmr__rate-row input[type=range] { flex: 1; accent-color: var(--primary); }
.bmr__rate-val { font-weight: 700; white-space: nowrap; min-width: 5.5rem; text-align: right; }
.bmr__potential-result { margin-top: .9rem; font-size: 1rem; }
.bmr__potential-result .bmr__potential-num { color: var(--base); font-size: 1.6rem; font-weight: 700; white-space: nowrap; }
.bmr__potential-month { color: var(--base-semi-dark); }

/* Tablet: Schritt-1-Grid klappt zuerst um */
@media (max-width: 820px) {
  .bmr__s1-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 600px) {
  /* Reiter zeigen nur noch die Ziffern. Der Titel des Schritts steht direkt
     darunter als Überschrift der Karte — als Label im Reiter brach er auf
     schmalen Displays über drei Zeilen um und blähte die Pille zur Blase auf. */
  .bmr__tab-label { display: none; }
  .bmr__tab { padding: .55rem .5rem; }

  .bmr__q { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Lizenz-Zeilen zweizeilig: Beschreibung über die volle Breite, darunter
     Preis links und Stepper rechts. Nebeneinander bleibt für beides zu wenig
     Platz — der Stepper landete sonst außerhalb des Bildschirms. */
  .bmr__row { grid-template-columns: 1fr auto; gap: 0 .75rem; }
  .bmr__row-text { grid-column: 1 / -1; }
  /* `nowrap` muss hier weg: der Preis steht jetzt in der 1fr-Spalte und würde
     sonst als unteilbarer Block deren Mindestbreite bestimmen — genau das
     schob den Stepper wieder über den rechten Rand hinaus. */
  .bmr__row-price { grid-column: 1; text-align: left; align-self: center; margin-top: .55rem; white-space: normal; font-size: .8rem; }
  .bmr__row .bmr__count { grid-column: 2; justify-self: end; margin-top: .55rem; }

  /* Zurück/Weiter dürfen umbrechen, statt sich gegenseitig zu zerquetschen */
  .bmr__nav-row { flex-wrap: wrap; gap: .6rem; }
  .bmr__nav-row .bmr__go { padding: .6rem 1.1rem; }
}