/* ============================================================
   Back To Work Superspecial (/back-to-work) — Ergaenzungen

   Die Seite laedt drei Stylesheets: back-to-work.css (das geteilte
   Grunddesign), modelle.css (die Auswahlkarten aus dem Funnel-Design,
   siehe dort Abschnitt "Die Karte") und diese Datei. Hier steht nur,
   was die Paketauswahl zusaetzlich braucht: die Preiszeile in der
   Karte, die Rabattecke und das Ersparnis-Panel.

   Farben NIE hier definieren, immer die --lx-Variablen benutzen.
   ============================================================ */

/* ---- Rabatt in der ausgeschnittenen Ecke ---- */
.btw .mod-card__corner--rabatt {
  color: var(--lx-cta);
  font-size: 14.5px;
  letter-spacing: -.01em;
}

/* ---- Die Preiszeile der Paketkarte -------------------------------------
   Gross der Preis je Sitzung, klein und durchgestrichen der Einzelpreis,
   darunter der Gesamtpreis. In dieser Reihenfolge, weil im Funnel
   ebenfalls der Sitzungspreis die Vergleichsgroesse ist.
   -------------------------------------------------------------------- */
.btw .btwx-preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin-block-start: 0.35rem;
}
.btw .btwx-preis__jetzt {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--lx-ink);
}
.btw .btwx-preis__statt {
  font-size: 11px;
  color: var(--lx-ink-soft);
}
.btw .btwx-preis__einheit {
  inline-size: 100%;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--lx-ink-soft);
}

/* Die Ersparnis ist das Argument dieser Seite, deshalb steht sie als
   eigene Zeile am Fuss der Karte und nicht im Fliesstext. */
.btw .btwx-spar {
  display: block;
  margin-block-start: 0.4rem;
  padding-block-start: 0.4rem;
  border-block-start: 1px solid var(--lx-line);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--lx-cta);
}

/* ---- Signature-Zonen-Karten ----------------------------------------
   Dieselbe Kartenbreite wie die Studiokarten in Schritt 1: die drei
   Schritte gehoeren zusammen, und neun grosse Karten machten den dritten
   Schritt sonst laenger als die beiden anderen zusammen. */
@media (min-width: 52rem) {
  .btw .btwx-sigs .btw-swipe__track {
    gap: clamp(10px, 1.2vw, 14px);
    max-inline-size: 52rem;
  }
}
.btw .btwx-sigs .mod-card__shot img { object-position: center 44%; }
/* Preis und Einheit in zwei Zeilen: auf der schmalen Karte brach sonst
   "je Behandlung" mitten im Wortpaar um. */
.btw .btwx-sig-preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  font-size: 11px;
  color: var(--lx-ink-soft);
}
.btw .btwx-sig-preis > span:last-child {
  inline-size: 100%;
  font-size: 10.5px;
  line-height: 1.3;
}
.btw .btwx-sig-preis s { color: var(--lx-ink-soft); }
.btw .btwx-sig-preis em {
  font-family: var(--lx-font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 1rem;
  color: var(--lx-cta);
}

/* ---- Das Ersparnis-Panel ----------------------------------------------
   Eine Zeile je Paket: Name, Listenpreis fuer zehn Einzelsitzungen,
   Paketpreis, Ersparnis. Kein Diagramm, keine Balken — die Zahlen
   sprechen fuer sich, und eine Tabelle laesst sich nachrechnen.
   -------------------------------------------------------------------- */
.btw .btwx-rechnung {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-start: var(--lx-space-s);
  font-size: var(--lx-text-sm);
}
.btw .btwx-rechnung th {
  text-align: end;
  padding: 0 0 0.5rem;
  font-size: var(--lx-text-xs);
  font-weight: 600;
  color: var(--lx-ink-soft);
  border-block-end: 1px solid var(--lx-line);
}
.btw .btwx-rechnung th:first-child { text-align: start; }
.btw .btwx-rechnung td {
  padding: 0.65rem 0;
  text-align: end;
  border-block-end: 1px solid var(--lx-line);
  white-space: nowrap;
}
.btw .btwx-rechnung td:first-child {
  text-align: start;
  white-space: normal;
  font-weight: 600;
  color: var(--lx-ink);
  padding-inline-end: 0.6rem;
}
.btw .btwx-rechnung s { color: var(--lx-ink-soft); }
.btw .btwx-rechnung .btwx-rechnung__spar {
  font-family: var(--lx-font-display);
  font-weight: 800;
  color: var(--lx-cta);
}
.btw .btwx-rechnung tr:last-child td { border-block-end: 0; }

/* Auf dem Telefon faellt die Spalte mit dem Listenpreis weg: vier Zahlen
   nebeneinander passen dort nicht, und die Ersparnis ist die wichtigere. */
@media (max-width: 40rem) {
  .btw .btwx-rechnung th:nth-child(2),
  .btw .btwx-rechnung td:nth-child(2) { display: none; }
  .btw .btwx-rechnung { font-size: var(--lx-text-xs); }
}

/* ---- Der Geschenk-Streifen -------------------------------------------
   Steht zwischen Paketwahl und Zonenwahl und sagt in einem Satz, was
   zum Paket dazukommt. Flaeche in Markenfarbe, damit der Bonus nicht
   wie eine weitere Kachel unter vielen aussieht.
   -------------------------------------------------------------------- */
.btw .btwx-geschenk {
  display: grid;
  gap: 0.35rem;
  /* Unten Luft: der Streifen klebte sonst an der Ueberschrift von Schritt 3
     und las sich wie deren Vorzeile. */
  margin-block: var(--lx-space-s) var(--lx-space-m);
  padding: var(--lx-space-s);
  border-radius: var(--lx-r-md);
  background: var(--lx-navy);
  color: var(--lx-text-inv);
}
.btw .btwx-geschenk b {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.25;
}
.btw .btwx-geschenk span {
  font-size: var(--lx-text-sm);
  line-height: 1.5;
  color: var(--lx-text-inv-soft);
}

/* ---- Die Sitzungsstufen ueber Schritt 2 --------------------------------
   Ein Segmentschalter, keine Pillen: die Laserazor-Hardrule sind hoechstens
   8 px Radius, und vier runde Kapseln nebeneinander sehen nach Spielzeug
   aus. Der gewaehlte Abschnitt ist gefuellt, die anderen tragen nur die
   Haarlinie. Auf dem Telefon wird die Leiste wischbar statt umgebrochen,
   damit die vier Stufen eine Zeile bleiben.
   -------------------------------------------------------------------- */
.btw .btwx-stufen {
  display: flex;
  gap: 6px;
  margin-block: 0 var(--lx-space-s);
  padding: 4px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  background: var(--lx-bg);
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.btw .btwx-stufen::-webkit-scrollbar { display: none; }

.btw .btwx-stufen button {
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: var(--lx-r-sm);
  background: none;
  font-family: var(--lx-font-body);
  font-weight: 600;
  font-size: var(--lx-text-sm);
  line-height: 1.2;
  color: var(--lx-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--lx-dur-fast) var(--lx-ease),
              color var(--lx-dur-fast) var(--lx-ease);
}
.btw .btwx-stufen button:hover { color: var(--lx-cta); }
.btw .btwx-stufen button.is-active {
  background: var(--lx-cta);
  color: #fff;
}
.btw .btwx-stufen button:focus-visible {
  outline: 3px solid var(--lx-cta-ring);
  outline-offset: 2px;
}

/* Ohne Rabatt gibt es nichts anzuzeigen: bei einer einzelnen Sitzung
   verschwinden Ecke und Ersparniszeile ganz. */
.btw .mod-card__corner[hidden],
.btw .btwx-preis__statt[hidden],
.btw .btwx-spar[hidden] { display: none; }

/* ---- Die Schlagzeile --------------------------------------------------
   "Laser-Haarentfernung" ist ein langes Kompositum. In der halben
   Container-Breite des Heros passt es bei der Grundgroesse nicht in eine
   Zeile, die Schlagzeile wurde dadurch vier Zeilen hoch und der Bindestrich
   landete mitten im Blickfeld. Eine Stufe kleiner haelt das Wort zusammen
   und die Schlagzeile bei drei Zeilen.
   -------------------------------------------------------------------- */
.btw.btwx .lx-hero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.08;
}