/* ============================================================
   Bathmaster-Salespage — Sektions-CSS
   Tokens aus tokens.css. Kein Hardcoding von Farben/Spacing.
   ============================================================ */

/* ── Shared: Digistore-Pflichthinweis unter Kauf-CTAs ─────── */
.cta-disclosure {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* ============================================================
   SEITEN-HINTERGRUND — fixiertes Wasserbild (Muster /masterkurs)
   Liegt hinter allem und scrollt nicht mit. Der Wash darueber haelt
   das Bild hell genug, dass die Leseflaechen der Sektionen nicht
   abdunkeln muessen - Lesbarkeit kommt aus den Flaechen, nicht aus
   einem dunklen Filter.
   ============================================================ */
/* PFLICHT, sonst ist die ganze Uebung wirkungslos: base.css setzt
   body { background-color: var(--bg-primary) } = deckendes Weiss. Das wuerde
   .page-bg (z-index: -1) vollstaendig ueberdecken und das Wasserbild waere
   unsichtbar - ohne Fehlermeldung, die Seite saehe nur unveraendert aus.
   /masterkurs macht dasselbe (masterkurs.css:26). */
body { background-color: transparent; }

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-secondary) url("/images/Wasser.webp") center top / cover no-repeat;
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(213, 240, 247, 0.30), transparent 74%),
    linear-gradient(180deg, rgba(247, 251, 252, 0.34) 0%, rgba(247, 251, 252, 0.56) 100%);
}

/* ── CTA mit Schimmer (1:1 von /masterkurs) ───────────────── */
.btn--cta {
  position: relative;
  overflow: hidden;
}
.btn--cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: bm-cta-shimmer 4.5s ease-in-out infinite;
}
@keyframes bm-cta-shimmer {
  0%   { left: -60%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--cta::after { display: none; }
}

/* ============================================================
   01 — HERO (Variante F5: Der Weg als aufsteigende Kurve)
   Sechs Saeulen sitzen auf einer S-Kurve, die sich beim Laden zeichnet;
   jeder Marker setzt genau dann, wenn die Linie ihn erreicht.
   Choreographie bewusst REIN CSS (keine .reveal/IntersectionObserver):
   der Hero steht above the fold, ein Observer brächte dort nichts - und
   die Kaufseite darf nicht mit unsichtbarem Hero starten, wenn JS ausfaellt.
   ============================================================ */
.bm-hero {
  /* Transparent: hier zeigt das fixierte Wasserbild seine volle Wirkung.
     Die Lese-Ebene ist die Frosted-Flaeche von .bm-hero__inner. */
  background: transparent;
  color: var(--text-body);
  padding: var(--section-padding-y) var(--side-padding);
  min-height: clamp(560px, 88vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bm-hero__inner {
  max-width: var(--max-width);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  /* Frosted-Lesepanel ueber dem Wasser - gleiches Muster wie .mk__stack auf
     /masterkurs. Ohne das steht near-black-Text direkt auf einem Foto und der
     Kontrast haengt davon ab, welcher Bildausschnitt gerade darunter liegt. */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(10, 41, 51, 0.14);
  padding: clamp(28px, 4vw, 52px);
}
/* Ohne backdrop-filter (aeltere Browser) deckender, sonst waere der Text
   auf dem Foto nicht mehr sicher lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bm-hero__inner { background: rgba(255, 255, 255, 0.94); }
}

/* Gestaffelter Einstieg — animation-fill-mode: both, damit ohne JS nichts haengen bleibt */
.bm-hero__inner > * {
  animation: bm-hero-rise 0.6s cubic-bezier(0.22, 0.68, 0.24, 1) both;
}
.bm-hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.bm-hero__inner > *:nth-child(2) { animation-delay: 0.14s; }
.bm-hero__inner > *:nth-child(3) { animation-delay: 0.23s; }
.bm-hero__inner > *:nth-child(4) { animation-delay: 0.32s; }
.bm-hero__inner > *:nth-child(5) { animation-delay: 0.32s; }
.bm-hero__inner > *:nth-child(6) { animation-delay: 0.41s; }
.bm-hero__inner > *:nth-child(7) { animation-delay: 0.50s; }

@keyframes bm-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.bm-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-dark);
}

.bm-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--near-black);
  max-width: 19ch;
}

.bm-hero__title em {
  font-style: normal;
  color: var(--primary-700);
}

.bm-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-body);
  max-width: 54ch;
}

/* ── Der Weg (Desktop) ─────────────────────────────────────── */
.bm-hero__path {
  width: 100%;
  max-width: 1000px;
  margin-top: var(--space-4);
}
.bm-hero__path svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.bm-path__track {
  fill: none;
  stroke: var(--primary-100);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.bm-path__draw {
  fill: none;
  stroke: var(--primary-700);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: bm-path-draw 1.9s cubic-bezier(0.22, 0.68, 0.24, 1) 0.4s both;
}
@keyframes bm-path-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.bm-mark {
  animation: bm-mark-in 0.4s cubic-bezier(0.22, 0.68, 0.24, 1) both;
  cursor: default;
}
@keyframes bm-mark-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bm-mark:focus { outline: none; }
.bm-mark:focus-visible .bm-mark__dot { stroke: var(--accent); stroke-width: 3.5; }

.bm-mark__dot {
  fill: var(--bg-primary);
  stroke: var(--primary-700);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-fast) ease;
}
.bm-mark:hover .bm-mark__dot { transform: scale(1.18); }

.bm-mark__num {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  fill: var(--primary-700);
  letter-spacing: 0.09em;
}
.bm-mark__ttl {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  fill: var(--near-black);
}

/* Ziel-Marker: einziges Accent-Element im Hero — zieht den Blick dorthin,
   wo direkt darunter der CTA steht. */
.bm-mark--last .bm-mark__dot { stroke: var(--accent); fill: var(--accent); }
.bm-mark--last .bm-mark__ttl { fill: var(--accent-dark); }

/* ── Derselbe Weg als Liste (<= 900px) ─────────────────────── */
.bm-hero__steps { display: none; }

.bm-hero__facts {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bm-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

@media (max-width: 900px) {
  .bm-hero { text-align: left; }
  .bm-hero__inner { align-items: flex-start; }
  .bm-hero__path { display: none; }

  .bm-hero__steps {
    display: block;
    list-style: none;
    position: relative;
    padding-left: var(--space-7);
    margin: var(--space-2) 0;
  }
  .bm-hero__steps::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--primary-100);
  }
  .bm-hero__steps::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 2px;
    background: var(--primary-700);
    animation: bm-steps-draw 1.4s cubic-bezier(0.22, 0.68, 0.24, 1) 0.4s both;
  }
  @keyframes bm-steps-draw {
    from { height: 0; }
    to   { height: calc(100% - 12px); }
  }

  .bm-hero__steps li {
    position: relative;
    padding-bottom: var(--space-4);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--near-black);
    animation: bm-step-in 0.5s cubic-bezier(0.22, 0.68, 0.24, 1) both;
  }
  @keyframes bm-step-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
  }
  .bm-hero__steps li:nth-child(1) { animation-delay: 0.50s; }
  .bm-hero__steps li:nth-child(2) { animation-delay: 0.72s; }
  .bm-hero__steps li:nth-child(3) { animation-delay: 0.94s; }
  .bm-hero__steps li:nth-child(4) { animation-delay: 1.16s; }
  .bm-hero__steps li:nth-child(5) { animation-delay: 1.38s; }
  .bm-hero__steps li:nth-child(6) { animation-delay: 1.60s; }

  .bm-hero__steps li::before {
    content: "";
    position: absolute;
    left: calc(var(--space-7) * -1);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-primary);
    border: 2px solid var(--primary-700);
  }
  .bm-hero__steps li:last-child::before {
    border-color: var(--accent);
    background: var(--accent);
  }
  .bm-hero__steps li i {
    display: block;
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--primary-700);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 600px) {
  .bm-hero { min-height: 0; }
  .bm-hero__title { font-size: var(--text-2xl); max-width: 24ch; }
  .bm-hero__sub   { font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-hero__inner > *,
  .bm-mark,
  .bm-hero__steps li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .bm-path__draw  { animation: none; stroke-dashoffset: 0; }
  .bm-hero__steps::after { animation: none; height: calc(100% - 12px); }
}

/* ============================================================
   SHARED Sektions-Primitives (bm-*)
   ============================================================ */
/* Sektionen sind Lese-Flaechen UEBER dem fixierten Wasserbild: hell genug, dass
   alle WCAG-Paare aus 01_CI.md weiter gelten, durchlaessig genug, dass das Bild
   ueber die ganze Seite praesent bleibt. Der Wechsel hell/tint traegt weiterhin
   den Sektions-Rhythmus, nur eben als zwei Deckungsgrade statt zwei Farben. */
.bm-section {
  padding: var(--section-padding-y) var(--side-padding);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  color: var(--text-body);
}
.bm-section--tint { background: rgba(247, 251, 252, 0.80); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bm-section       { background: rgba(255, 255, 255, 0.95); }
  .bm-section--tint { background: rgba(247, 251, 252, 0.93); }
}
/* Abschluss-CTA bleibt deckend dunkel: die einzige dunkle Flaeche der Seite und
   damit der optische Anker fuer die Kaufentscheidung. */
.bm-section--dark {
  background: var(--primary-900);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text-on-dark);
}

/* Blauer CTA auf dunklem Grund: #006A8E gegen #0A2933 sind nur 2,47:1, d.h. die
   Button-Flaeche allein ist gegen ihren Hintergrund nicht erkennbar (WCAG 1.4.11
   verlangt 3:1 fuer Bedienelemente). Statt die Sektion aufzuhellen - sie ist der
   gewollte dunkle Anker - bekommt der Button hier eine helle Kontur: rgba(255,255,255,.55)
   ueber #0A2933 ergibt rund 3,5:1, die Grenze ist damit erkennbar. Fuellung und
   Textfarbe bleiben das freigegebene CI-Paar CTA-1 (#006A8E + Weiss, 6,08:1). */
.bm-section--dark .btn--primary {
  border-color: rgba(255, 255, 255, 0.55);
}
.bm-section--dark .btn--primary:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

.bm-container {
  max-width: var(--max-width);
  margin-inline: auto;
}
.bm-container--narrow { max-width: var(--max-width-narrow); }
.bm-container + .bm-container { margin-top: var(--space-10); }

.bm-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--space-3);
}
.bm-eyebrow--ondark { color: var(--primary-300); }

.bm-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  max-width: 22ch;
}
.bm-h2--ondark { color: var(--text-on-dark); }

.bm-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-body);
  margin-top: var(--space-4);
  max-width: 60ch;
}
.bm-lead--ondark { color: var(--text-on-dark-muted); }

.bm-bridge {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  margin-top: var(--space-10);
  max-width: 64ch;
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
}

/* ── 3er-Karten ─────────────────────────────────────────── */
.bm-cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.bm-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.bm-section--tint .bm-card { background: #fff; }

/* ── K1-Kachel (gewaehlt S194, Pattern-Reuse aus der Saeulen-Gallery) ──
   Eigene Kachel je Eintrag statt einer grossen Hintergrundflaeche.
   Gemessene Kontraste auf #EDF7FB: #1A1A18 14,9:1 · #4D4D4F 7,2:1 ·
   #006A8E 5,0:1 · ACHTUNG #6B6B6D nur 4,4:1 = AA verfehlt, deshalb hier
   NIE --text-secondary auf der Kachel verwenden.
   ⚠ #EDF7FB fehlt noch in der Approved-Pairs-Tabelle von 01_CI.md
   (offener CI-Nachtrag) - selbst gemessen, AA/AAA-konform. */
.bm-tile {
  background: #EDF7FB;
  border: 1px solid rgba(0, 106, 142, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow:
    0 1px 2px rgba(10, 41, 51, 0.05),
    0 4px 14px rgba(10, 41, 51, 0.07);
  transition: transform var(--transition-base) ease,
              box-shadow var(--transition-base) ease;
}
.bm-tile:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(10, 41, 51, 0.06),
    0 10px 24px rgba(10, 41, 51, 0.10);
}
/* Letzte Kachel als Ziel-Akzent - dieselbe Logik wie der Accent-Marker am
   Ende der Hero-Kurve: der Blick landet dort, wo es hingeht. */
.bm-tile:last-child { border-color: rgba(242, 100, 25, 0.5); }
.bm-tile .bm-card__title { color: var(--near-black); }
.bm-tile p { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .bm-tile { transition: none; }
  .bm-tile:hover { transform: none; }
}
.bm-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text-heading);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.bm-card p { color: var(--text-body); font-size: var(--text-base); }
.bm-card--highlight { border-color: var(--primary-500); box-shadow: var(--shadow-md); }
.bm-card--num::before {
  content: attr(data-n);
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--primary-500);
  line-height: 1;
  margin-bottom: var(--space-3);
}

/* ── 2-Spalten Listen (was-es-ist / filter) ─────────────── */
.bm-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.bm-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.bm-col--no { background: var(--bg-secondary); }
.bm-col__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}
.bm-checklist, .bm-crosslist { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.bm-checklist li, .bm-crosslist li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.bm-checklist li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: var(--weight-bold);
  color: var(--primary-700);
}
.bm-crosslist li::before {
  content: "\00D7";
  position: absolute; left: 0; top: -2px;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.bm-kernsatz {
  margin-top: var(--space-10);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--primary-700);
  text-align: center;
  max-width: 48ch;
  margin-inline: auto;
}

/* ── Gunther ────────────────────────────────────────────── */
.bm-gunther {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-12);
  align-items: center;
}
.bm-gunther__media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--primary-300), var(--primary-700));
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-lg);
}
.bm-gunther__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: var(--text-sm);
}
.bm-gunther__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bm-gunther__cap {
  position: relative; z-index: 1;
  color: #fff; padding: var(--space-5);
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.bm-gunther__text p { margin-top: var(--space-4); color: var(--text-body); }

/* ── FAQ ────────────────────────────────────────────────── */
.bm-faq .faq-item { border-bottom: 1px solid var(--border); }
.bm-faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--text-heading);
  position: relative;
}
.bm-faq summary::-webkit-details-marker { display: none; }
.bm-faq summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xl); color: var(--primary-500);
}
.bm-faq .faq-item[open] summary::after { content: "\2212"; }
.bm-faq .faq-item__body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--transition-base) ease;
}
.bm-faq .faq-item__body p {
  padding-bottom: var(--space-5);
  color: var(--text-body);
  line-height: var(--leading-normal);
}

/* ── Closing ────────────────────────────────────────────── */
.bm-closing { text-align: center; }
.bm-closing .bm-h2, .bm-closing .bm-lead { margin-inline: auto; }
.bm-closing__actions {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); margin-top: var(--space-8);
}
.bm-closing__micro {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
}
.cta-disclosure--ondark { color: rgba(255,255,255,0.55); }
.bm-signature {
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

/* ── Sticky-CTA (autonom, erscheint nach Hero) ──────────── */
/* Heller Frosted-Balken statt der frueheren dunklen Leiste. Grund ist nicht Geschmack:
   der CTA soll wie im ATF blau sein, und #006A8E auf #0A2933 misst 2,47:1 — unter den
   3:1, die WCAG 1.4.11 fuer die Erkennbarkeit von Bedienelementen verlangt. Auf heller
   Flaeche sind es 6,08:1. Passt ausserdem zur jetzt hellen Seite. */
.bm-sticky {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-top: 1px solid rgba(0, 106, 142, 0.16);
  color: var(--text-body);
  box-shadow: 0 -6px 24px rgba(10, 41, 51, 0.10);
  transform: translateY(120%);
  transition: transform var(--transition-base) ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bm-sticky { background: rgba(255, 255, 255, 0.98); }
}
.bm-sticky.is-visible { transform: none; }
.bm-sticky__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-3) var(--side-padding);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.bm-sticky__text { display: flex; flex-direction: column; line-height: 1.3; }
.bm-sticky__text strong {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--near-black);
}
.bm-sticky__text span { font-size: var(--text-sm); color: var(--text-primary); }
.bm-sticky__action { display: flex; flex-direction: column; flex: 0 0 auto; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .bm-cards3 { grid-template-columns: 1fr; }
  .bm-cols2 { grid-template-columns: 1fr; }
  .bm-gunther { grid-template-columns: 1fr; }
  .bm-gunther__media { max-width: 360px; }
}
@media (max-width: 600px) {
  .bm-h2 { font-size: var(--text-2xl); }
  /* Mobil gestapelt und mittig: Titel + Preiszeile zentriert ueber dem
     vollbreiten Button. Vorher standen sie linksbuendig neben einem
     vollbreiten Button und wirkten dadurch abgerissen. */
  .bm-sticky__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }
  .bm-sticky__text {
    align-items: center;
    text-align: center;
  }
  .bm-sticky__text strong { font-size: var(--text-sm); }
  .bm-sticky__text span   { font-size: var(--text-xs); }
  .bm-sticky__action { width: 100%; }
  .bm-sticky__action .btn { width: 100%; }
}

/* ============================================================
   09 — OFFER (Variante N3: Kennzahlen-Buehne + Siegel aus N7)
   Der Umfang steht VOR dem Preis: vier Kennzahlen als Buehne, darunter
   das Aufnahme-Dokument. Bewusst HELL — die einzige dunkle Flaeche der
   Seite bleibt der Abschluss-CTA (11-cta) direkt darunter; zwei dunkle
   Flaechen in Folge haetten ihm seine Wirkung genommen.
   Effekt-Budget dieser Sektion: 0 (Restraint-Reset vor dem Kauf, AP #15).
   ============================================================ */
.bm-container--offer { max-width: 900px; }
.bm-container--offer > .bm-eyebrow { text-align: center; }

.bm-offer__h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-align: center;
  max-width: 24ch;
  margin: 0 auto var(--space-10);
}

/* ── Kennzahlen-Buehne ─────────────────────────────────────── */
.bm-offer__stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  text-align: center;
  margin-bottom: var(--space-12);
  align-items: stretch;
}
/* Kachel-Sprache wie K1 (Problem-Kacheln, Saeulen): dezenter CI-Grund,
   leichter Rand, gestufter Schatten fuer Tiefe. Gleiche Kontrast-Regel:
   auf #EDF7FB NIE --text-secondary (nur 4,4:1). */
.bm-kpi {
  background: #EDF7FB;
  border: 1px solid rgba(0, 106, 142, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(10, 41, 51, 0.05),
    0 4px 10px rgba(10, 41, 51, 0.07),
    0 12px 28px rgba(10, 41, 51, 0.09);
  transition: transform var(--transition-base) ease,
              box-shadow var(--transition-base) ease;
}
.bm-kpi:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(10, 41, 51, 0.06),
    0 8px 18px rgba(10, 41, 51, 0.09),
    0 20px 40px rgba(10, 41, 51, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .bm-kpi { transition: none; }
  .bm-kpi:hover { transform: none; }
}
.bm-kpi b {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--primary-700);
}
.bm-kpi span {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

/* ── Aufnahme-Dokument ─────────────────────────────────────── */
.bm-doc {
  position: relative;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Siegel: Wortlaut unantastbar — nur "Aufnahme"/"Teilnahme", nie Zertifikat,
   Zulassung oder Urkunde (Level 2 verleiht keine Berechtigung, FernUSG). */
/* Stempel. Breiten-Rechnung, weil das Wort den Kreis vorher gesprengt hat:
   "GRUPPENSTART" = 12 Zeichen; bei --text-xs (max 11,52px) und Sora 700
   uppercase sind das rund 98px Textbreite. Der Kreis braucht also >=118px
   Aussenmass, sonst laeuft das Wort ueber den Rand hinaus. */
.bm-doc__seal {
  position: absolute;
  right: var(--space-6);
  top: var(--space-6);
  width: 118px;
  height: 118px;
  border-radius: var(--radius-pill);
  /* User-Vorgabe S194: Rand + Toenung in --accent (dekorativ zulaessig),
     Schrift aber --accent-dark. --accent als Textfarbe ist 3.18:1 und in
     01_CI.md ausdruecklich verboten; erlaubtes Pair ist ACCENT-2. */
  border: 2px solid var(--accent);
  background: rgba(242, 100, 25, 0.10);
  color: var(--accent-dark);
  transform: rotate(-8deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: var(--leading-snug);
}
.bm-doc__seal b {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  /* Bewusst enger als --tracking-wider (0.12em): 12 Zeichen x 0.12em waeren
     allein 14px zusaetzliche Breite und genau die Ursache des Ueberlaufs. */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bm-doc__seal span {
  font-size: var(--text-xs);
  margin-top: 3px;
  white-space: nowrap;
}

.bm-doc__head {
  /* Rechts Platz fuer den Stempel: 118px Kreis + 24px Abstand + Luft. */
  padding: var(--space-5) 156px var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.bm-doc__head b {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--near-black);
}
.bm-doc__head span {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-700);
}

.bm-doc__body { padding: var(--space-6); }
.bm-doc__lab {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.bm-doc__inc { list-style: none; }
.bm-doc__inc li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.bm-doc__inc li:last-child { border-bottom: 0; }
.bm-doc__it {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--near-black);
}
/* Jede Position traegt eine Mengenangabe — dadurch wird Umfang zaehlbar
   statt behauptet. Das ist der legale Ersatz fuer einen Streichpreis-Anker. */
.bm-doc__iq {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--primary-700);
  white-space: nowrap;
}

.bm-doc__price {
  padding: var(--space-6);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: end;
}
/* Kein Streichpreis-Element: 706060 stand 30 Tage bei 999 EUR, jede durchgestrichene
   Referenz darueber ist §11 PAngV / §5 UWG exponiert. Klasse bewusst nicht vorhanden,
   damit sie nicht versehentlich wieder gesetzt wird. */
.bm-doc__amount {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--near-black);
}
.bm-doc__perm {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-top: var(--space-2);
}
.bm-doc__rate {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-top: var(--space-1);
}
.bm-doc__ratenote {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  max-width: 46ch;
}

.bm-doc__ctacol { text-align: right; }
.bm-doc__scarce {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--space-3);
}

/* Konditionszeile. Am 27.07. kurzzeitig entfernt (Coupon existierte noch nicht),
   am selben Tag zurueck, sobald der Coupon angelegt war. Rueckbau-Termin 05.08.
   Details und Wortlaut: docs/copy-bathmaster.md §09. Codes gehoeren nicht in
   ausgeliefertes CSS - die Datei ist oeffentlich abrufbar. */
.bm-doc__kond {
  grid-column: 1 / -1;
  background: var(--bg-primary);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.bm-offer__pay {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-4);
}
.bm-offer__foot {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-2);
}
.bm-offer__why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  max-width: 60ch;
  margin: var(--space-3) auto 0;
  line-height: var(--leading-normal);
}

@media (max-width: 760px) {
  .bm-offer__h2 { font-size: var(--text-2xl); }
  .bm-offer__stage { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .bm-doc__inc li { grid-template-columns: 1fr; gap: 2px; }
  .bm-doc__price { grid-template-columns: 1fr; }
  .bm-doc__ctacol { text-align: left; }
  .bm-doc__ctacol .btn { display: block; width: 100%; }
  .bm-doc__head,
  .bm-doc__body,
  .bm-doc__price { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* Stempel raus aus der Ecke: ein Kreis, der breit genug fuer
     "GRUPPENSTART" ist, laesst neben sich keinen brauchbaren Platz mehr
     fuer die Kopfzeile. Deshalb mobil mittig ueber der Kopfzeile statt
     rechts daneben - der Stempel bleibt lesbar, der Titel auch. */
  .bm-doc__seal {
    position: static;
    margin: var(--space-6) auto 0;
  }
  .bm-doc__head { padding-right: var(--space-4); padding-top: var(--space-4); }
}

/* ============================================================
   03 — STUFEN / WERTLEITER (Hover-Lift Cards + C3-Fortschrittsbalken)
   ============================================================ */

/* C3 (A2): Der Balken laeuft bis 66 % - Stufe 2 von 3, "du bist hier".
   Gefuellt wird erst bei .is-visible, das animations.js per
   IntersectionObserver setzt. Waere die Animation an den Seiten-Load
   gebunden, waere der Balken beim Herunterscrollen laengst voll und
   die Bewegung nie zu sehen. */
.bm-progress {
  max-width: 900px;
  margin: 0 auto var(--space-8);
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.bm-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary-500), var(--accent));
  transition: width 1.4s cubic-bezier(0.22, 0.68, 0.24, 1);
}
.bm-progress.is-visible .bm-progress__fill { width: 66%; }

@media (prefers-reduced-motion: reduce) {
  /* Aussage bleibt, Bewegung faellt weg - der Balken steht sofort auf 66 %. */
  .bm-progress__fill { transition: none; width: 66%; }
}

.bm-stufen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
/* Zwei-Stufen-Variante (User-Entscheid 28.07., dritte Karte entfernt).
   Ohne diese Regel stuenden die zwei Karten in einem 3-Spalten-Raster und
   liessen rechts eine leere Spalte stehen. max-width haelt sie auf der
   Breite, die sie zu dritt hatten - sonst werden zwei Karten unnoetig breit. */
.bm-stufen--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
  margin-inline: auto;
}
.bm-stufe {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base) ease, box-shadow var(--transition-base) ease;
}
.bm-stufe:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bm-stufe--hl {
  transform: translateY(-10px);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
}
.bm-stufe__n {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--primary-100);
  color: var(--primary-700);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.bm-stufe__sub {
  font-size: var(--text-xs);
  color: var(--accent-dark);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.bm-stufe__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text-heading);
  line-height: var(--leading-snug);
}
.bm-stufe p { font-size: var(--text-base); color: var(--text-body); }
.bm-stufe__here {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-8);
  background: var(--accent);
  color: var(--near-black);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

@media (max-width: 900px) {
  .bm-stufen { grid-template-columns: 1fr; }
  .bm-stufe--hl { transform: none; }
  .bm-stufe:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-stufe { transition: none; }
  .bm-stufe:hover { transform: none; }
}

/* ============================================================
   05 — SÄULEN (Variante R5 in Ausfuehrung K1, gewaehlt S194)
   Die vertikale Linie mit Punkten (alte Variante B3) ist ersetzt durch ein
   Kachel-Raster - jede Saeule eine eigene Flaeche. Die Kachel-Grundform kommt
   aus .bm-tile (siehe oben, geteilt mit den Problem-Kacheln), hier kommen nur
   die Innereien dazu.
   ============================================================ */
.bm-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
}
/* .bm-tile braucht hier eine Spalte, damit die Phasen-Zeile per margin-top:auto
   am Fuss klebt und die Kacheln trotz unterschiedlich langer Texte gleich enden. */
.bm-tiles .bm-tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}
.bm-tile__n {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--primary-700);
  margin-bottom: var(--space-3);
}
.bm-tile__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--near-black);
  margin-bottom: var(--space-3);
}
.bm-tile__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}
/* Phasen-Zeile in --primary-700 (5,0:1 auf #EDF7FB), NICHT --text-secondary:
   das waeren nur 4,4:1 und damit AA verfehlt. Siehe Pair KACHEL-3 in 01_CI.md. */
.bm-tile__phase {
  display: block;
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-700);
}
/* Letzte Kachel als Ziel-Akzent - konsistent zum Accent-Marker am Ende der
   Hero-Kurve und zur letzten Problem-Kachel. */
.bm-tiles .bm-tile:last-child .bm-tile__n,
.bm-tiles .bm-tile:last-child .bm-tile__phase { color: var(--accent-dark); }

@media (max-width: 900px) { .bm-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bm-tiles { grid-template-columns: 1fr; } }

.bm-curr {
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}
.bm-curr strong { color: var(--text-heading); }

/* ============================================================
   06 — ABLAUF (vertikale 6-Monats-Timeline)
   ============================================================ */
.bm-timeline { position: relative; }
.bm-timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--primary-300);
}
.bm-tl {
  position: relative;
  padding: 0 0 var(--space-8) var(--space-10);
}
.bm-tl:last-child { padding-bottom: 0; }
.bm-tl__dot {
  position: absolute;
  left: 0; top: 4px;
  width: 16px; height: 16px;
  border-radius: var(--radius-pill);
  background: var(--primary-500);
  border: 3px solid var(--bg-secondary);
  box-shadow: 0 0 0 2px var(--primary-500);
}
.bm-tl__dot--end { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bm-tl__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text-heading);
}
.bm-tl p { font-size: var(--text-base); color: var(--text-body); margin-top: var(--space-1); }

/* ============================================================
   FOOTER (eigener bathmaster-Footer — Styles, da kurs.css nicht geladen)
   ============================================================ */
.site-footer {
  background: var(--bg-footer);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-12);
  padding-inline: var(--side-padding);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.site-footer__brand img { height: 28px; width: auto; opacity: 0.9; }
.site-footer__disclaimer {
  max-width: 56ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.site-footer__nav a {
  color: var(--text-on-dark);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}
.site-footer__nav a:hover { border-bottom-color: var(--text-on-dark); }
.site-footer__copy { font-size: var(--text-xs); opacity: 0.7; }

/* ── Streichpreis (24.09.2026) ────────────────────────────────
   Gesetzt auf Entscheidung Julian vom 24.09.2026, damit die Seite zum
   Webinar V3 passt: Folie 48 nennt die 2.500 EUR als "der Preis auf
   meiner Website".

   ⚠ Weiter oben in dieser Datei steht der aeltere Gegenbefund, der
   absichtlich verhindern sollte, dass diese Klasse existiert:
   "706060 stand 30 Tage bei 999 EUR, jede durchgestrichene Referenz
   darueber ist § 11 PAngV / § 5 UWG exponiert." Dieser Befund wurde
   Julian am 24.09.2026 erneut vorgelegt. Rueckbau = diese Regel und
   die eine <p class="bm-doc__strike"> in 09-offer.html loeschen. */
.bm-doc__strike {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-bottom: var(--space-2);
}

/* ── Erster-Sonntag-Garantie (24.09.2026) ─────────────────────
   Aus dem Webinar V3, Folie 52. Steht bewusst UNTER dem Preisblock und
   nicht darin: sie ist keine Kondition des Kaufs, sondern die Umkehr
   des Risikos danach. */
.bm-guarantee {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.bm-guarantee__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--primary-700);
}
.bm-guarantee__text {
  margin-top: var(--space-3);
  margin-inline: auto;
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
@media (max-width: 640px) {
  .bm-guarantee { padding: var(--space-5); }
}