/* Rabattpreise der Evaluations (src/components/Rabattpreis.tsx), Kundenwunsch
   vom 03.10.2026: alter Preis durchgestrichen, darunter der Preis mit dem Code
   der Rabattaktion, darunter „w/ coupon at checkout“. Farben aus den
   vorhandenen Token, damit das Farbthema der Verwaltung mitzieht. */

/* „from“ vor dem Couponpreis (seit 04.10.2026 je Plattform verschiedene
   Preise, die Karten zeigen den günstigsten). Klein, damit die Preisbox nur
   wenig breiter wird. */
.lvrb-ab {
  font-size: max(10px, 0.42em);
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ---------- Startseite: Preisfeld im Kaufknopf ---------- */
.lvf-s04 .lvf-s04-btn:has(.lvrb-box) {
  height: auto;
  min-height: var(--s04-btn-h);
  padding-top: 4px;
  padding-bottom: 4px;
}
.lvf-s04 .lvf-s04-btn-price.lvrb-box {
  flex-direction: column;
  gap: 3px;
  width: auto;
  min-width: var(--s04-price-w);
  height: auto;
  min-height: var(--s04-price-h);
  padding: 5px 8px;
}
.lvf-s04 .lvf-s04-card--pop .lvf-s04-btn-price.lvrb-box {
  min-width: var(--s04-price-w-pop);
}
.lvf-s04 .lvrb-alt {
  font-size: max(10px, 0.52em);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.75);
  text-shadow: none;
}
.lvf-s04 .lvrb-neu {
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
/* „1st month“ unter dem Betrag: daneben war die Box bei 1024 bis 1180 px bis
   zu 61 px breiter als der Knopf (Codex-Nachprüfung, im Browser bestätigt). */
.lvf-s04 .lvrb-mo {
  display: block;
  margin-top: 2px;
  font-size: max(9px, 0.5em);
  font-weight: 400;
  letter-spacing: 0.03em;
  opacity: 0.85;
}
.lvf-s04 .lvf-s04-coupon {
  margin: 9px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  color: rgb(var(--lvfb-8cd5ff,140,213,255));
  opacity: 0.85;
}

/* 1000 bis 1179 px: Der Knopf ist nur rund 170 px breit, Beschriftung und
   Preisbox (113 px) passten schon vor den Rabattpreisen nicht nebeneinander
   (26 px Überstand bei 1024 px, auf Deutsch mit „Monatlich“ 38 px).
   Hier steht die Beschriftung deshalb über dem Preis. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .lvf-s04 .lvf-s04-btn:has(.lvrb-box) {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 7px;
  }
  .lvf-s04 .lvf-s04-btn-price.lvrb-box,
  .lvf-s04 .lvf-s04-card--pop .lvf-s04-btn-price.lvrb-box {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Evaluation-Seite: Preisbox der Kontokarten ---------- */
.lvev-e2 .lvev-e2-opt-alt {
  margin: 0 0 2px;
  font-size: max(11px, calc(var(--lvev-e2-price-fs) * 0.5));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
}
.lvev-e2 .lvev-e2-opt + .lvev-e2-opt .lvev-e2-opt-alt {
  margin-top: 8px;
}
.lvev-e2 .lvev-e2-opt-alt s {
  text-decoration-color: rgba(255, 255, 255, 0.75);
}
.lvev-e2 .lvev-e2-opt-price {
  white-space: nowrap;
}
.lvev-e2 .lvev-e2-opt-price .lvrb-mo {
  display: block;
  margin-top: -4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.lvev-e2 .lvev-e2-coupon {
  /* Über die ganze Preisbox, damit der Hinweis in allen vier Karten einzeilig
     steht und die Karten bündig bleiben. */
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgb(var(--lvfb-8cd5ff,140,213,255));
  opacity: 0.85;
}

/* Ab 1280 px stehen Auswahlknopf und Preise nebeneinander, die Preisspalte
   ist in der gewählten Karte (Knopf „Selected“) nur 209 px minus Knopf breit.
   Schon vorher ragte die Notiz „Option 1: Monthly Subscription“ dort 9 px
   über den Kasten (live gemessen 04.10.2026), mit „from“ vor dem Preis wäre
   auch der Preis an den Rand gerückt. Deshalb: Notiz darf umbrechen, „from“
   10 px, Spaltenabstand 6 statt 12 px. */
@media (min-width: 1280px) {
  .lvev-e2 .lvev-e2-plan { column-gap: 6px; }
  .lvev-e2 .lvev-e2-opt-price .lvrb-ab { font-size: 10px; letter-spacing: 0; }
  .lvev-e2 .lvev-e2-opt-note { white-space: normal; }
}

/* Bis 1279 px: Die Preisbox ist bei 1024 px nur 169 px, am Handy 212 px breit.
   Schon vor den Rabattpreisen standen die Notizen („Option 2: One-Time Fee“,
   „Subscription“) bis zu 73 px über und wurden abgeschnitten, am Handy in der
   gewählten Karte. Auswahlknopf deshalb über den Preisen, Notizen umbrechen. */
@media (max-width: 1279px) {
  .lvev-e2 .lvev-e2-plan {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    justify-items: center;
  }
  .lvev-e2 .lvev-e2-chip {
    grid-row: auto;
    align-self: center;
    margin-top: 0;
  }
  .lvev-e2 .lvev-e2-opt-note {
    white-space: normal;
  }
  .lvev-e2 .lvev-e2-coupon {
    grid-column: 1;
  }
}

/* Handy: die rabattierten Monatspreise („$285.60/mo“) sind zwei Zeichen länger
   als die alten, bei 28 px ragten sie aus der Preisbox; in der gewählten Karte
   ist die Spalte wegen „Selected“ schmaler, daher 22 px. */
@media (max-width: 700px) {
  .lvev-e2 .lvev-e2-opt-price { font-size: 22px; letter-spacing: 0; }
  .lvev-e2 .lvev-e2-coupon { font-size: 11px; }
}

/* ---------- Evaluation-Seite: Vergleichstabelle ---------- */
.lvev-e4-cell--price .lvrb-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lvev-e4-cell--price .lvrb-alt {
  font-size: 10px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.5);
  text-decoration-color: rgba(255, 255, 255, 0.75);
}
.lvev-e4-cell--price .lvrb-neu {
  white-space: nowrap;
}
.lvev-e4-cell--price .lvrb-mo {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.85;
}

/* Vergleichstabelle bis 1023 px wischbar: evaluation.css sieht dort
   overflow-x: auto vor (Tabelle 780 bis 940 px breit), fixes-evaluation.css
   setzte danach ohne Breakpoint overflow: hidden. Die Tabelle war am Handy
   rechts abgeschnitten und nicht wischbar, samt der Preise (seit 04.09.2026). */
@media (max-width: 1023px) {
  .lvev-e4-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}