/* Herbstanfangs-Special (/herbst-spezial) · Spec 025
   Ergaenzungen zu back-to-work.css + modelle.css + btw-special.css.
   Jasper 17.09.: weniger Kaesten, integrativer; Auswahl als Klick-Funnel
   Schritt fuer Schritt (Paket > Fuer wen > Studio), nicht untereinander.
   Radien <= 8 px, keine Versalien, kein text-shadow, keine Endlos-Animation. */

.hbx { --hbx-amber: #a4541c; --hbx-amber-hell: #e39a52; }

/* ============================ Hero ============================ */
.hbx .hbx-label { display: inline-flex; align-items: center; gap: 0.45rem; }
.hbx .hbx-label svg { inline-size: 1.15em; block-size: 1.15em; color: var(--hbx-amber); flex: none; }
.hbx .btw-hero-photo video { object-position: 30% 50%; }
.hbx .lx-hero__img .lx-sticker--onphoto { background: var(--hbx-amber); }

/* Preisblock: gross die Rate mit Kreis, daneben "im Monat", darunter eine
   normal lesbare Zeile mit Streichpreis und Rabatt, dann die Ersparnis. */
.hbx .hbx-preis { display: grid; justify-items: start; gap: 0; margin-block: var(--lx-space-s, 1rem) 0; }
.hbx .hbx-preis__ab { font-weight: 700; font-size: var(--lx-text-sm, 0.95rem); color: var(--lx-ink, #171717); }
.hbx .hbx-preis__zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-block: 0.35rem 0.55rem; }
.hbx .hbx-preis__zahl {
  position: relative; display: inline-block; padding: 0.08em 0.38em 0.1em 0.28em; margin-inline-start: -0.28em;
  font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--lx-ink, #171717); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hbx .hbx-preis__kreis { position: absolute; inset: -0.12em -0.1em -0.16em -0.08em; inline-size: calc(100% + 0.18em); block-size: calc(100% + 0.28em); color: var(--lx-cta, #06c); pointer-events: none; overflow: visible; }
.hbx .hbx-preis__monat { font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: var(--lx-ink-soft, #404040); }
.hbx .hbx-preis__statt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.4rem; font-size: 1rem; color: var(--lx-ink-soft, #404040); }
.hbx .hbx-preis__statt s { color: var(--lx-ink, #171717); text-decoration-thickness: 1.5px; }
.hbx .hbx-preis__rabatt { font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.55rem; line-height: 1; color: var(--hbx-amber); margin-inline-start: 0.3rem; }
.hbx .hbx-preis__spar { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--lx-cta, #06c); }
.hbx .hbx-preis__spar svg { flex: none; inline-size: 2.4rem; block-size: 1.3rem; color: var(--lx-peach, #94b8e0); }

/* Handy: eigene Reihenfolge fuer die neuen Bausteine (die Textspalte loest
   sich in back-to-work.css auf, ohne order stuenden sie ganz oben). */
@media (max-width: 52rem) {
  .btw .btw-hero-grid > .btw-hero-text > .hbx-preis { order: 5; margin-block: 0.1rem 0; }
  .btw .btw-hero-grid > .btw-hero-text > .hbx-uhr { order: 6; margin-block: 0.2rem 0; }
  .btw .btw-hero-grid > .btw-hero-text > .hbx-ctas { order: 7; }
  .btw .btw-hero-grid > .btw-hero-text > .lx-zstat { order: 8; }
}

/* Countdown als Zahlenzeile, ohne Kacheln */
.hbx .hbx-uhr {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  margin: var(--lx-space-s, 1rem) 0 0; font-variant-numeric: tabular-nums;
}
.hbx .hbx-uhr__label { font-weight: 600; color: var(--hbx-amber); margin-inline-end: 0.1rem; }
.hbx .hbx-uhr__z { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.hbx .hbx-uhr__z b { font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1; color: var(--lx-navy, #003a80); letter-spacing: -0.02em; }
.hbx .hbx-uhr__z i { font-style: normal; font-size: 0.85rem; color: var(--lx-ink-soft, #404040); }

.hbx .hbx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
.hbx .hbx-textlink {
  display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--lx-navy, #003a80);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, var(--lx-navy, #003a80) 25%, transparent);
}
.hbx .hbx-textlink svg { inline-size: 1.1em; block-size: 1.1em; transition: translate 0.2s ease; }
.hbx .hbx-textlink:hover svg { translate: 3px 0; }
.hbx .hbx-hero .lx-zstat { margin-block-start: var(--lx-space-s, 1rem); }

/* ============================ Klick-Funnel ============================ */
.hbx .hbf-kopf { display: grid; gap: var(--lx-space-s, 1rem); margin-block-end: var(--lx-space-m, 1.6rem); position: relative; }
.hbx .hbf-kopf h2 { margin: 0.3rem 0 0; }

.hbx .hbf-schritte {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
}
.hbx .hbf-schritte button {
  inline-size: 100%; display: flex; align-items: center; gap: 0.6rem; text-align: start;
  background: none; border: 0; padding: 0.3rem 0; cursor: pointer; color: inherit; font: inherit;
}
.hbx .hbf-schritte b {
  flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  font-family: var(--lx-font-display); font-weight: 800; font-size: 0.95rem;
  background: #fff; color: var(--lx-ink-soft, #404040); border: 2px solid var(--lx-line, #d6e3f2);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, scale 0.25s ease;
}
.hbx .hbf-schritte span { display: grid; min-inline-size: 0; line-height: 1.2; }
.hbx .hbf-schritte i { font-style: normal; font-weight: 700; color: var(--lx-ink-soft, #404040); font-size: 0.95rem; }
.hbx .hbf-schritte em { font-style: normal; font-size: 0.8rem; color: var(--lx-ink-soft, #404040); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbx .hbf-schritte li.is-aktiv b { background: var(--lx-cta, #06c); border-color: var(--lx-cta, #06c); color: #fff; scale: 1.08; }
.hbx .hbf-schritte li.is-aktiv i { color: var(--lx-navy, #003a80); }
.hbx .hbf-schritte li.is-fertig b { background: var(--lx-navy, #003a80); border-color: var(--lx-navy, #003a80); color: #fff; }
.hbx .hbf-schritte li.is-fertig em { color: var(--lx-navy, #003a80); font-weight: 600; }
.hbx .hbf-balken { display: block; block-size: 3px; border-radius: 3px; background: var(--lx-line, #d6e3f2); overflow: hidden; }
.hbx .hbf-balken span { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--lx-cta, #06c), var(--hbx-amber)); transition: inline-size 0.45s cubic-bezier(.22,.61,.36,1); }

/* Die Buehne: ein Schritt sichtbar, Bahn gleitet seitlich */
.hbx .hbf-bahn { overflow: hidden; transition: block-size 0.4s cubic-bezier(.22,.61,.36,1); margin-inline: -0.75rem; padding-inline: 0.75rem; }
.hbx .hbf-track { display: flex; inline-size: 300%; transition: transform 0.55s cubic-bezier(.22,.61,.36,1); will-change: transform; align-items: flex-start; }
.hbx .hbf-panel { inline-size: calc(100% / 3); flex: none; padding: 0.25rem 0.75rem 0.5rem; box-sizing: border-box; opacity: 0.35; transition: opacity 0.4s ease; }
.hbx .hbf-panel.is-aktiv { opacity: 1; }
.hbx .hbf-frage { font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); color: var(--lx-navy, #003a80); margin: 0; line-height: 1.15; }
.hbx .hbf-hinweis { margin: 0.35rem 0 var(--lx-space-s, 1rem); color: var(--lx-ink-soft, #404040); font-size: var(--lx-text-sm, 0.95rem); }
.hbx .hbf-zurueck {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem; padding: 0.3rem 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--lx-cta, #06c);
}
.hbx .hbf-zurueck svg { inline-size: 1.1em; block-size: 1.1em; }
.hbx .hbf-fuss { margin-block-start: var(--lx-space-s, 1rem); max-inline-size: 62ch; }
.hbx .hbf-nochmal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: var(--lx-space-s, 1rem) 0 0; font-weight: 600; color: var(--lx-navy, #003a80); }
.hbx .hbf-nochmal .lx-btn svg { inline-size: 1.1em; block-size: 1.1em; }

/* Paketkarten: hochformatige Herbstfotos und Loops */
.hbx .btwx-pakete .mod-card__shot img,
.hbx .btwx-pakete .mod-card__shot video.lz-video { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.hbx .btwx-pakete .mod-card__shot video.lz-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hbx .btwx-preis__jetzt { display: inline-flex; align-items: baseline; gap: 0.1em; white-space: nowrap; }
.hbx .hbx-monat { font-size: 0.55em; font-weight: 700; color: var(--lx-ink-soft, #404040); letter-spacing: 0; }
.hbx .mod-locs .mod-card__shot img { object-position: center 60%; }
.hbx .mod-card__bar svg { flex: none; }

/* Damen / Herren */
.hbx .hbf-geschlecht { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem); max-inline-size: 46rem; }
.hbx .hbf-g label { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hbx .hbf-g input { position: absolute; opacity: 0; pointer-events: none; }
.hbx .hbf-g__box {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 0.4rem;
  padding: clamp(1rem, 0.7rem + 1.5vw, 1.75rem) 1rem 1.25rem; border-radius: 8px; background: #fff;
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--lx-navy, #003a80) 55%, transparent);
  outline: 2px solid transparent; outline-offset: -2px;
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1), outline-color 0.2s ease, background-color 0.2s ease;
}
.hbx .hbf-g label:hover .hbf-g__box { transform: translateY(-3px); }
.hbx .hbf-g img { inline-size: clamp(5.5rem, 4rem + 6vw, 9rem); block-size: auto; aspect-ratio: 1; transition: scale 0.3s ease; }
.hbx .hbf-g label:hover img { scale: 1.05; }
.hbx .hbf-g__text { display: grid; gap: 0.2rem; }
.hbx .hbf-g__text b { font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); color: var(--lx-navy, #003a80); }
.hbx .hbf-g__text small { font-size: 0.85rem; line-height: 1.4; color: var(--lx-ink-soft, #404040); }
.hbx .hbf-g .mod-card__mark { position: absolute; inset-block-start: 0.7rem; inset-inline-end: 0.7rem; }
.hbx .hbf-g input:checked + .hbf-g__box { outline-color: var(--lx-cta, #06c); background: var(--lx-sea-100, #eaf2fc); }
.hbx .hbf-g input:checked + .hbf-g__box .mod-card__mark { scale: 1; }
.hbx .hbf-g input:focus-visible + .hbf-g__box { outline-color: var(--lx-navy, #003a80); }

/* ============================ Warum jetzt (ohne Kaesten) ============================ */
.hbx .hbx-warum .lx-sechead { margin-block-end: var(--lx-space-m, 1.6rem); }
.hbx .hbx-gruende {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.hbx .hbx-grund { border-block-start: 1px solid var(--lx-line, #d6e3f2); }
.hbx .hbx-grund summary {
  list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem;
  padding: 1rem 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hbx .hbx-grund summary::-webkit-details-marker { display: none; }
.hbx .hbx-grund summary .lx-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--hbx-amber); transition: scale 0.25s ease; }
.hbx .hbx-grund summary:hover .lx-icon { scale: 1.08; }
.hbx .hbx-grund__text { display: grid; gap: 0.1rem; min-inline-size: 0; }
.hbx .hbx-grund__text b { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--lx-navy, #003a80); }
.hbx .hbx-grund__text span { font-size: 0.9rem; color: var(--lx-ink-soft, #404040); line-height: 1.35; }
.hbx .hbx-grund__plus { position: relative; inline-size: 1.4rem; block-size: 1.4rem; color: var(--lx-cta, #06c); }
.hbx .hbx-grund__plus::before, .hbx .hbx-grund__plus::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 0.8rem; block-size: 2px; background: currentColor; border-radius: 2px; translate: -50% -50%; transition: rotate 0.25s ease;
}
.hbx .hbx-grund__plus::after { rotate: 90deg; }
.hbx .hbx-grund details[open] .hbx-grund__plus::after { rotate: 0deg; }
.hbx .hbx-grund details p { margin: 0; padding: 0 0 1.1rem calc(2.5rem + 0.8rem); font-size: 0.95rem; line-height: 1.5; color: var(--lx-ink-soft, #404040); overflow: hidden; }

/* ============================ Handy ============================ */
@media (max-width: 40rem) {
  .hbx .hbf-schritte { gap: 0.25rem; }
  .hbx .hbf-schritte button { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .hbx .hbf-schritte em { max-inline-size: 100%; }
  .hbx .hbx-grund details p { padding-inline-start: 0; }
}

/* ============================ Nach dem Herbstanfang ============================ */
.hbx-vorbei .hbx [data-mod-countdown] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hbx .hbf-track, .hbx .hbf-bahn, .hbx .hbf-panel, .hbx .hbf-balken span, .hbx .hbf-g__box { transition: none; }
}

/* Nachschliff 17.09.: versteckte Zeile wirklich verstecken, inaktive
   Schritte nicht am Rand durchscheinen lassen, "im Monat" naeher an die Rate. */
.hbx .hbf-nochmal[hidden] { display: none; }
.hbx .hbf-panel { visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.55s; }
.hbx .hbf-panel.is-aktiv { visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.hbx .hbx-preis__zeile { gap: 0.2rem 0.45rem; }