/* BAZA Import — Runde 2 (Designer, 19.10.2026). Grundlage: ~/m-ai/wissen/apple-design/web-leitfaden.md.
   Marken: [Apple] steht so bei Apple · [Übertragung] App-Regel aufs Web · [Annahme] unsere Setzung. */

:root {
  --r2e: cubic-bezier(.2, .7, .2, 1);      /* Reveal-Kurve, wie Velantir v5/v6 */
  --r2s: cubic-bezier(.16, 1, .3, 1);      /* Hero-Karten: weich auslaufend */
}

/* =====================================================================================================================
   1. HERO — Signature-Moment „Fächer der Übergaben“ (Leitfaden §11: ein Moment pro Seite, abschaltbar, Standbild-Rückfall)
   Laden: Text sofort lesbar (30 % → 100 % in 300 ms, B4 [Apple] „nie warten lassen“; Dennis 18.10.: Hero-Animation kurz),
   Karten fallen aus der Unschärfe in den Fächer (≤ 600 ms). Scrollen (ab 900 px): Text wird unscharf und hebt ab, der Fächer
   legt sich zur Reihe „200+ машин“ aus (B1 [Apple]: Bewegung erklärt — aus dem Bild wird der Beweis). Nur transform, opacity,
   filter (M7 [Annahme]: läuft im Compositor, ruckelt am iPhone nicht). Scrollen wird nie gekapert (§11 [Übertragung]).
   ===================================================================================================================== */
.hx { position: relative; }
.hx__in { position: relative; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; grid-template-columns: minmax(0, 1fr);
  padding: var(--s6) max(var(--gutter), env(safe-area-inset-right)) var(--s7) max(var(--gutter), env(safe-area-inset-left));
  display: grid; row-gap: var(--s6); }
.hx__copy { max-width: 640px; }
.hx__h1 { max-width: min(16ch, 100%); overflow-wrap: break-word; }
.hx__copy { min-width: 0; }
.hx__lede { margin-top: var(--s5); max-width: 46ch; }
.hx__actions { margin-top: var(--s6); }
.hx__proof { display: flex; align-items: center; gap: 12px; margin-top: var(--s5); }
.hx__faces { display: flex; flex: none; }
.hx__faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; box-shadow: 0 1px 3px rgba(15,16,18,.18); }
.hx__faces img:first-child { margin-left: 0; }
.hx__proof p { margin: 0; font-size: var(--fs-cap); line-height: 1.3; color: var(--ink-3); }   /* F4: #63676c 5,7:1 */
.hx__proof b { display: block; font-size: var(--fs-small); color: var(--ink); font-weight: 600; }

/* Fächer: fünf Karten, Mitte oben. --i = Lage (-2 … 2), --a = Abstand zur Mitte, --k = Spreizung (Handy: wächst beim Scrollen) */
.hx__deck { --cw: min(54vw, 250px); position: relative; height: calc(var(--cw) * 4 / 3 + 96px); }
.hx-card { position: absolute; left: calc(50% - var(--cw) / 2); top: 8px; width: var(--cw); aspect-ratio: 3 / 4; margin: 0;
  border-radius: 20px; overflow: hidden; background: var(--surface-2); z-index: calc(10 - var(--a));
  box-shadow: 0 1px 2px rgba(15,16,18,.08), 0 18px 40px -14px rgba(15,16,18,.38);   /* §6 Tiefe: Karten schweben über der Fläche */
  transform: translate3d(calc(var(--i) * var(--k, 1) * 44%), calc(var(--a) * 14px), 0) rotate(calc(var(--i) * var(--k, 1) * 6deg));
  transform-origin: 50% 100%; }
.hx-card img { width: 100%; height: 100%; object-fit: cover; }
.hx-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.18)); }

/* Echte Rechnung als schwebender Zettel (Lesetest 19.10. Punkt 3: realistisches Beispiel zuerst, nicht der Lamborghini).
   Handy: eigene Karte unter dem Text; Rechner: schwebt über dem Fächer (gleiche Rasterzelle). */
.hx-chip { position: relative; z-index: 20; width: 100%; max-width: 420px;
  display: grid; gap: 2px; padding: 12px 16px 14px; border-radius: 18px; background: var(--glass-solid);
  box-shadow: 0 1px 2px rgba(15,16,18,.08), 0 22px 48px -16px rgba(15,16,18,.34); border: 1px solid var(--line); }
.hx-chip__k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--ink-3); margin-bottom: 4px; }
.hx-chip__m { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.hx-chip__car { font-size: var(--fs-small); font-weight: 600; color: var(--ink); line-height: 1.3; }
.hx-chip__note { font-size: var(--fs-cap); color: var(--ok); line-height: 1.35; font-weight: 500; }   /* F: #1f7a4a 5,3:1 auf Weiß */

.hx__wall { margin: var(--s4) 0 0; }
.hx__wall .h2 { font-variant-numeric: tabular-nums; }
.hx-after { padding-top: 0; }

/* Laden — Text: sofort lesbar, nach 300 ms scharf (Velantir-Prinzip v4-hero). Karten: aus der Unschärfe in den Fächer, Mitte zuerst. */
@keyframes hx-text { from { opacity: .3; filter: blur(4px); translate: 0 6px; } }
@keyframes hx-deal { from { opacity: 0; filter: blur(14px); translate: 0 56px; scale: .9; } }
@keyframes hx-pop { from { opacity: 0; translate: 0 14px; scale: .97; } }
@media (prefers-reduced-motion: no-preference) {
  .hx__copy > * { animation: hx-text 300ms var(--r2s) backwards; }
  .hx__copy > :nth-child(3) { animation-delay: 40ms; } .hx__copy > :nth-child(4) { animation-delay: 80ms; } .hx__copy > :nth-child(5) { animation-delay: 120ms; }
  .hx-card { animation: hx-deal 480ms var(--r2s) backwards; animation-delay: calc(30ms + var(--a) * 60ms); }
  .hx-chip { animation: hx-pop 420ms var(--r2s) 380ms backwards; }
}
/* „Bewegung reduzieren“: nur kurzes Überblenden, keine Unschärfe, keine Verschiebung (B2 [Apple]) */
@keyframes hx-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-card, .hx-chip { animation: hx-fade 200ms ease backwards; } }

/* Rechner ab 900 px ohne Scroll-Fassung (Bewegung reduzieren, 200 % Schrift, sehr niedriges Fenster): Text links, Fächer rechts */
@media (min-width: 900px) {
  .hx { overflow: clip; }
  .hx__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--s7); padding-top: var(--s7); }
  .hx__wall { grid-column: 1 / -1; margin-top: var(--s6); }
  .hx__copy { grid-column: 1; grid-row: 1; }
  .hx__deck { --cw: clamp(200px, 19vw, 290px); grid-column: 2; grid-row: 1; }
  .hx-chip { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; width: 330px; margin-bottom: -8px; }
}
/* Handy: Text und Hauptknopf über dem Falz (Dennis 12.10.), darunter der Fächer, der sich beim Scrollen spreizt, Rechnung schwebt darüber */
@media (max-width: 899px) {
  .hx { overflow-x: clip; }
  .hx__in { padding-top: var(--s4); row-gap: var(--s5); }
  .hx__copy { order: 0; } .hx__deck { order: 1; } .hx-chip { order: 2; margin: -72px auto 0; width: calc(100% - 24px); } .hx__wall { order: 3; }
  .hx__deck { --cw: min(50vw, 220px); margin: 0 calc(-1 * var(--gutter)); height: calc(var(--cw) * 4 / 3 + 40px); }
}

/* ---- Scroll-Fassung (html.hx-scrub, setzt r2.js ab 900 px, ohne „Bewegung reduzieren“, Schrift ≤ 18 px, Fenster ≥ 620 px hoch) ----
   Bühne 230svh, innen klebend; JS setzt je Karte Ziel-Rechteck (--ex/--ey/--ew/--eh) und Fächer-Versatz (--fx/--fy/--fr/--fs),
   pro Bild nur --o (Text weg), --m (Fächer → Reihe), --t (Überschrift „200+“ da). */
html.hx-scrub .hx { height: 185vh; height: 185svh; overflow: visible; }
html.hx-scrub .hx__in { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; display: block; overflow: hidden; }
html.hx-scrub .hx__copy { position: absolute; z-index: 30; top: var(--header-h); bottom: 0; display: grid; align-content: center;
  left: max(var(--gutter), (100% - var(--max)) / 2); width: min(42vw, 580px); max-width: none; padding-bottom: 40px;
  opacity: calc(1 - var(--o, 0)); filter: blur(calc(var(--o, 0) * 10px)); transform: translate3d(0, calc(var(--o, 0) * -32px), 0); }
html.hx-scrub .hx__h1 { font-size: min(var(--fs-display), 4.2vw); max-width: none; }
html.hx-scrub .hx.is-past .hx__copy { visibility: hidden; }
html.hx-scrub .hx__deck { position: absolute; inset: 0; z-index: 27; height: auto; margin: 0; pointer-events: none; }
html.hx-scrub .hx-card { pointer-events: none; }
html.hx-scrub .hx.is-open .hx-card { pointer-events: auto; }
/* Runde 3: Karte behält ihre Fächergröße und wird zum Daumenbild verkleinert (nie hochskaliert, Fotos bleiben scharf).
   --bx/--by/--bw/--bh = Fächer-Rechteck, --dx/--dy = Weg zum Platz im Beweis-Streifen, --es = Endmaßstab (< 1). */
html.hx-scrub .hx-card { left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); aspect-ratio: auto; transform-origin: 50% 50%;
  transform: translate3d(calc(var(--dx) * var(--m, 0)), calc(var(--dy) * var(--m, 0)), 0)
             rotate(calc(var(--fr) * (1 - var(--m, 0)))) scale(calc(1 + (var(--es) - 1) * var(--m, 0)));
  will-change: transform; }
html.hx-scrub .hx-chip { position: absolute; width: 310px; margin: 0; left: var(--cx); top: var(--cy);
  opacity: calc(1 - var(--o, 0)); transform: translate3d(0, calc(var(--o, 0) * 40px), 0); }
html.hx-scrub .hx__wall { position: absolute; z-index: 25; margin: 0; top: calc(var(--header-h) + 3vh); max-width: none;
  left: max(var(--gutter), (100% - var(--max)) / 2); right: max(var(--gutter), (100% - var(--max)) / 2);
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 18px), 0); pointer-events: none; }
html.hx-scrub .hx.is-open .hx__wall { pointer-events: auto; }
/* Kacheln kommen gestaffelt nach (B1: Reihenfolge = Lesereihenfolge), nur transform */
html.hx-scrub .hx-gl__t { transform: translate3d(0, calc((1 - var(--t, 0)) * (14px + var(--d, 0) * 12px)), 0); }
html.hx-scrub .hx__wall .lede { margin-top: var(--s3); }
html.hx-scrub .hx-after { padding-top: var(--s7); }

/* =====================================================================================================================
   2. AUS DER UNSCHÄRFE, SICHTBAR — alle Abschnitte (Dennis 14:5x: „dass es quasi von blurry ausgeht zu sichtbar … wenn man scrollt“)
   Werte wie Velantir v5/v6 (dort am iPhone abgenommen): 12 px / 10 px Unschärfe, 480/600 ms, 70 ms Staffel, löst 10 % über dem
   unteren Rand aus. Bei „Bewegung reduzieren“ milde Fassung: nur Deckkraft + 4 px, 300 ms, keine Verschiebung.
   Abweichung bewusst: Apple rät von Unschärfe-Übergängen bei reduzierter Bewegung ab (B2 [Apple], accessibility „Cognitive“);
   Dennis' Vorgabe 19.10. (Velantir v6) verlangt eine milde Fassung statt gar nichts.
   ===================================================================================================================== */
.js .rv { opacity: 0; filter: blur(12px); transform: translate3d(0, 18px, 0);
  transition: opacity 340ms var(--r2e), filter 340ms var(--r2e), transform 420ms var(--r2e); }   /* Runde 2b: kürzer (Dennis 15:28) */
.js .rv.is-in { opacity: 1; filter: none; transform: none; }
.js .rv-d1 { transition-delay: 50ms; } .js .rv-d2 { transition-delay: 100ms; } .js .rv-d3 { transition-delay: 150ms; }
@media (max-width: 700px) { .js .rv { filter: blur(10px); transform: translate3d(0, 16px, 0); } .js .rv.is-in { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 0; filter: blur(4px); transform: none; transition: opacity 300ms var(--r2e), filter 300ms var(--r2e); }
  .js .rv-d1 { transition-delay: 40ms; } .js .rv-d2 { transition-delay: 80ms; } .js .rv-d3 { transition-delay: 120ms; }
  .js .rv.is-in { opacity: 1; filter: none; }
}
@media print { .js .rv { opacity: 1 !important; filter: none !important; transform: none !important; } }

/* ---- Hero-Texte Runde 2 (Hormozi §2.1): Preiszeile, Hinweis unter dem Knopf, Karte mit Reitern, Zahlenleiste ---- */
.hx-prices { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hx-prices a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: var(--fs-small); line-height: 1.3;
  transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease); }
.hx-prices a span { color: var(--ink-3); }                               /* 5,2:1 auf --surface */
.hx-prices a b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-prices a:hover { background: #fff; border-color: var(--line-2); }
.hx-prices a:active { transform: scale(.97); }
.hx-prices a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hx__actions { margin-top: var(--s5); }
.hx__under { margin: var(--s3) 0 0; font-size: var(--fs-cap); color: var(--ink-3); }

.hx-chip .rtabs { margin-bottom: 10px; }
.hx-chip .rtabs button { min-height: 44px; }                             /* P21: Trefferfläche */
.hx-chip__rows { display: grid; gap: 4px; margin-top: 8px; font-size: var(--fs-small); }
.hx-chip__rows > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hx-chip__rows span { color: var(--ink-2); }
.hx-chip__rows b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-chip__rows .hx-chip__sum { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 2px; }
.hx-chip__rows .hx-chip__sum span { color: var(--ink); font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.hx-chip__rows .hx-chip__sum small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-cap); }
.hx-chip__rows .hx-chip__sum b { color: var(--ok); font-size: 1.25rem; letter-spacing: -.015em; }   /* #1f7a4a 5,3:1 */
.hx-chip__note { margin: 8px 0 0; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.4; }
.hx-chip .rpanel.is-swap { animation: hx-fade 220ms ease; }

/* Zahlenleiste (Hormozi §4: nur Belegtes) — Endbild der Bühne, sonst Band unter dem Fächer */
.hx-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.hx-stat { display: grid; gap: 4px; align-content: start; }
.hx-stat__n { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.05; font-weight: 680; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-stat--wide .hx-stat__n { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); letter-spacing: -.02em; padding-top: .35em; }
.hx-stat__l { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35; }
.hx-stat__l small { display: block; font-size: var(--fs-cap); color: var(--ink-3); }
.hx-stat .fill { font-size: var(--fs-small); letter-spacing: 0; }
@media (min-width: 900px) { .hx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.hx__wall { padding-top: var(--s5); border-top: 1px solid var(--line); }
html.hx-scrub .hx__wall { padding-top: 0; border-top: 0; }

/* Preiszeile am Handy: drei Felder nebeneinander statt drei Zeilen (Hauptknopf bleibt bei 390 × 844 über dem Falz) */
@media (max-width: 520px) {
  .hx-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hx-prices a { display: grid; gap: 2px; align-content: start; height: 100%; padding: 8px 10px; border-radius: 14px; font-size: var(--fs-cap); }
  .hx-prices a b { font-size: var(--fs-cap); }
}

/* =====================================================================================================================
   3. BENTO «Что внутри клуба» (Dennis 14:5x: „mit mehr Bildern und Vignette“). 12er-Raster ab 1000 px, 6er ab 700 px, sonst 1 Spalte
   (L3 [Übertragung]: Umbruch nach Inhalt). Fotos randabfallend mit Vignette, Text weiß auf ≥ 60 % Schwarz (F1: ≥ 5,7:1 auch über
   hellem Bild, gemessen in Prüfung). Helle Kacheln für Leistungen ohne Bild, drei abstrakte Oberflächen (Chat, Seite, Punkte).
   ===================================================================================================================== */
.bxg { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.bx { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 220px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,16,18,.04); }
.bx__body { position: relative; z-index: 2; padding: 22px 22px 24px; display: grid; gap: 6px; }
.bx__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink); margin-bottom: 6px; }
.bx__ico svg { width: 20px; height: 20px; }
.bx h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.bx p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; max-width: 52ch; }
/* Foto-Kachel: Bild randabfallend, Vignette (Ecken) + Verlauf unten für den Text */
.bx--photo { border: 0; background: #1b1c1f; color: #fff; min-height: 300px; }
.bx__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001);
  transition: transform 900ms var(--r2s); }
.bx--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 30%, rgba(8,8,10,0) 45%, rgba(8,8,10,.55) 100%),
              linear-gradient(180deg, rgba(8,8,10,0) 32%, rgba(8,8,10,.62) 62%, rgba(8,8,10,.86) 100%); }
.bx--photo .bx__ico, .bx--dark .bx__ico { background: rgba(255,255,255,.14); color: #fff; }
.bx--photo p, .bx--dark p { color: rgba(255,255,255,.86); }             /* auf ≥ .62 Schwarz: ≥ 7:1 */
.bx--photo .bx__body { pointer-events: none; }
.bx--photo .fill { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .bx--photo:hover .bx__img { transform: scale(1.04); } }
.bx--dark { background: var(--dark); color: var(--dark-ink); border: 0; }
.bx--dark p { color: var(--dark-ink-2); }

/* Große Kachel: drei echte Unterrichts-Bildschirme als Stapel, fächert bei Hover leicht auf */
.bx-sys { min-height: 460px; justify-content: flex-start; }
.bx-stack { position: relative; flex: 1; min-height: 230px; margin: 4px 0 0; }
.bx-stack__i { position: absolute; margin: 0; left: 50%; bottom: -18px; width: min(78%, 460px); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
  transform: translateX(calc(-50% + (var(--j) - 1) * 13%)) translateY(calc(var(--j) * -22px)) rotate(calc((var(--j) - 1) * 4deg));
  transform-origin: 50% 100%; transition: transform 600ms var(--r2s); z-index: calc(3 - var(--j)); }
.bx-stack__i img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 30%; }
@media (hover: hover) and (pointer: fine) {
  .bx-sys:hover .bx-stack__i { transform: translateX(calc(-50% + (var(--j) - 1) * 20%)) translateY(calc(var(--j) * -30px)) rotate(calc((var(--j) - 1) * 6deg)); }
}

/* Abstrakte Oberflächen (nur Form, keine erfundenen Nachrichten oder Zahlen) */
.bx-ui { position: relative; margin: 20px 20px 0; }
.bx-ui--chat { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface); }
.bx-ui--chat i { display: block; height: 26px; width: var(--w); border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 2px rgba(15,16,18,.06); }
.bx-ui--chat i.r { justify-self: end; border-radius: 14px 14px 4px 14px; background: #ffe4cf; }
.bx-ui--site { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px -16px rgba(15,16,18,.3); }
.bx-ui__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--surface); }
.bx-ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.bx-ui__bar span { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: #fff; }
.bx-ui__page { display: grid; gap: 6px; padding: 10px; }
.bx-ui__page img { width: 100%; height: 86px; object-fit: cover; border-radius: 8px; }
.bx-ui__page i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--surface-2); }
.bx-ui__page b { display: block; width: 84px; height: 22px; border-radius: 11px; background: var(--accent-a); }
.bx-ui--pts { padding: 14px 16px; border-radius: 18px; background: var(--surface); }
.bx-pts__row { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.bx-pts__row s { color: var(--ink-3); font-size: var(--fs-small); }
.bx-pts__row span svg { width: 16px; height: 16px; color: var(--ink-3); }
.bx-pts__row b { font-size: 1.375rem; letter-spacing: -.02em; font-weight: 680; }
.bx-pts__row small { font-size: var(--fs-cap); color: var(--ink-3); font-weight: 500; }
.bx-pts__bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.bx-pts__bar i { height: 8px; border-radius: 4px; background: var(--surface-2); }
.bx-pts__cap { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-cap); color: var(--ink-3); }
/* Punkte füllen sich beim Erscheinen (Zweck: zeigt „Aufgaben → Preis sinkt“, B1 [Übertragung]); reduziert: sofort voll */
.bx-pts__bar i { background: linear-gradient(90deg, var(--ok) 50%, var(--surface-2) 50%) right / 200% 100% no-repeat; }
.bx-pts.is-in .bx-pts__bar i, .bx-pts:not(.rv) .bx-pts__bar i { background-position: left; transition: background-position 360ms var(--r2e); }
.bx-pts.is-in .bx-pts__bar i:nth-child(2) { transition-delay: 380ms; } .bx-pts.is-in .bx-pts__bar i:nth-child(3) { transition-delay: 460ms; }
.bx-pts.is-in .bx-pts__bar i:nth-child(4) { transition-delay: 540ms; } .bx-pts.is-in .bx-pts__bar i:nth-child(5) { transition-delay: 620ms; }
.bx-pts.is-in .bx-pts__bar i:nth-child(6) { transition-delay: 700ms; } .bx-pts.is-in .bx-pts__bar i:nth-child(1) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .bx-pts .bx-pts__bar i { background-position: left; transition: none !important; } }

.bx-mentor { justify-content: flex-end; transition: transform var(--dur-press) var(--ease), background-color var(--dur-hover) var(--ease); }
.bx-mentor:hover { background: #1c1d20; }
.bx-mentor:active { transform: scale(.985); }
.bx-mentor:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bx__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; color: var(--dark-accent); min-height: 44px; }
.bx__go svg { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease); }
.bx-mentor:hover .bx__go svg { transform: translateX(3px); }
.bx-res { min-height: 340px; }
.bx-cta { margin-top: var(--s6); justify-content: center; }

@media (min-width: 700px) {
  .bxg { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-sys, .bx-res, .bx-mentor { grid-column: span 6; }
  .bx-sup, .bx-log, .bx-live, .bx-chat, .bx-day, .bx-ip, .bx-site, .bx-pts { grid-column: span 3; }
}
@media (min-width: 1000px) {
  .bxg { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); }
  .bx-sys { grid-column: 1 / 8; grid-row: span 2; min-height: 600px; }
  .bx-sup { grid-column: 8 / 13; } .bx-log { grid-column: 8 / 13; }
  .bx-live, .bx-chat, .bx-day, .bx-ip, .bx-site, .bx-pts { grid-column: span 4; }
  .bx-res { grid-column: span 8; min-height: 380px; } .bx-mentor { grid-column: span 4; }
}
.bx-stack__i { width: min(86%, 560px); bottom: -10px; }
.bx-ui--week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px; border-radius: 18px; background: var(--surface); }
.bx-ui--week span { display: grid; justify-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--ink-3); }
.bx-ui--week i { width: 100%; max-width: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--ok); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.bx-ui--doc { display: flex; justify-content: center; padding: 14px; border-radius: 18px; background: var(--surface); }
.bx-ui--doc > div { position: relative; width: 62%; display: grid; gap: 7px; padding: 14px 14px 18px; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px -12px rgba(15,16,18,.35); transform: rotate(-2deg); }
.bx-ui--doc b { display: block; width: 46%; height: 10px; border-radius: 5px; background: var(--ink); opacity: .8; margin-bottom: 4px; }
.bx-ui--doc i { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--surface-2); }
.bx-ui--doc > span { position: absolute; right: 22%; bottom: 10px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--accent-a); color: var(--ink); background: rgba(255,255,255,.9); transform: rotate(-12deg); }
.bx-ui--doc > span svg { width: 22px; height: 22px; }

/* =====================================================================================================================
   4. NEUE ABSCHNITTE — Market Value (Hormozi §3) und «Кто за этим стоит» (§2.7)
   ===================================================================================================================== */
.mv { display: grid; gap: var(--s7); align-items: center; }
.mv .checks { margin-top: var(--s5); }
.mv__g { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--s5); padding: 16px 18px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); max-width: 560px; }
.mv__g p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.mv__g b { color: var(--ink); }
.mv__gi { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #e9f4ee; color: var(--ok); }
.mv__gi svg { width: 20px; height: 20px; }
.mv__links { margin-top: var(--s5); }
/* Bild: Website-Mock + Katalogkarte, zwei Ebenen (Tiefe §6), abstrakt, nur eigenes Foto */
.mv__vis { position: relative; min-height: 420px; }
.mv-site { position: absolute; left: 0; top: 0; width: 86%; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(15,16,18,.06), 0 40px 80px -30px rgba(15,16,18,.35); transform: rotate(-1.5deg); }
.mv-site__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface); }
.mv-site__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mv-site__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: var(--fs-cap); color: var(--ink-3); }
.mv-site__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 14px; align-items: center; }
.mv-site__hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.mv-site__hero > div { display: grid; gap: 8px; }
.mv-site__hero b { display: block; height: 16px; width: 90%; border-radius: 6px; background: var(--ink); opacity: .85; }
.mv-site__hero i, .mv-cat__row i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--surface-2); }
.mv-site__hero em { display: block; width: 110px; height: 30px; margin-top: 6px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); }
.mv-site__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 0 14px 16px; }
.mv-site__form i { height: 34px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.mv-site__form em { width: 90px; border-radius: 10px; background: var(--ink); }
.mv-cat { position: absolute; right: 0; bottom: 0; width: min(62%, 320px); padding: 14px 16px 10px; border-radius: 18px; background: var(--glass-solid);
  border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(15,16,18,.42); transform: rotate(1.5deg); }
.mv-cat p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-2); }
.mv-cat__m { width: 20px; height: 20px; border-radius: 6px; }
.mv-cat__row { display: grid; grid-template-columns: 28px 1fr 46px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.mv-cat__pin { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-ink); }
.mv-cat__pin svg { width: 14px; height: 14px; }
.mv-cat__row b { height: 22px; border-radius: 999px; background: var(--surface-2); }
@media (min-width: 900px) { .mv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } .mv__vis { min-height: 460px; } }
@media (max-width: 520px) { .mv__vis { min-height: 330px; } .mv-site__form { grid-template-columns: 1fr auto; } .mv-site__form i:nth-child(2) { display: none; } }

.who { display: grid; gap: var(--s6); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.who__ph { position: relative; width: 132px; display: grid; gap: 10px; }
.who__mark { width: 132px; height: 132px; border-radius: 32px; box-shadow: var(--shadow-2); }
.who__fill .fill { font-size: var(--fs-cap); }
.who__tx .h2 { margin-bottom: var(--s4); }
.who__tx p { margin: 0 0 8px; max-width: 60ch; color: var(--ink-2); }
.who__tx p b { color: var(--ink); font-size: var(--fs-lede); }
.who__src { font-size: var(--fs-cap); }
.who__src a { color: var(--ink-3); }
@media (min-width: 760px) { .who { grid-template-columns: 180px minmax(0, 1fr); } .who__ph, .who__mark { width: 180px; } .who__mark { height: 180px; } }

/* Gratis-Streifen über den Preiskarten (Hormozi §2.5) und Preis am Weg (§2.2) */
.free-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: var(--s5);
  padding: 18px 22px; border-radius: 22px; background: #fff; border: 1px dashed var(--line-2); }
.free-strip__l { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
.free-strip p { margin: 4px 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--fs-small); }
.path__price { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

/* Große Schrift (≥ 19 px Grundgröße, z. B. 200 %): Hero einspaltig, Fächer unter dem Text (P06) */
@media (min-width: 900px) {
  html.hx-big .hx__in { grid-template-columns: minmax(0, 1fr); }
  html.hx-big .hx__copy, html.hx-big .hx__deck, html.hx-big .hx-chip, html.hx-big .hx__wall { grid-column: 1; grid-row: auto; }
  html.hx-big .hx-chip { justify-self: center; margin: -64px 0 0; position: relative; }
}

/* ===== Runde 2b (Dennis 15:28): Hero leerer, Pill zurück, Rechnungen im Scrollbild, schneller, mehr Luft ===== */
.hx__lede { margin-top: var(--s5); }
.hx__actions { margin-top: var(--s6); }
/* Pill: echte Übergabefotos + 200+ Autos + 103 Mitglieder der Gruppe (belegt t.me 19.10.; zahlende Mitglieder nicht belegt) */
.hx-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--s6); padding: 6px 16px 6px 6px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,16,18,.05), 0 10px 30px -14px rgba(15,16,18,.22); }
.hx-pill__faces { display: flex; }
.hx-pill__faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; }
.hx-pill__faces img:first-child { margin-left: 0; }
.hx-pill__i { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.25; }      /* 5,7:1 */
.hx-pill__i b { color: var(--ink); font-weight: 650; }
.hx-pill__sep { width: 1px; height: 18px; background: var(--line-2); }
@media (max-width: 480px) {
  .hx-pill { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 12px; row-gap: 2px; border-radius: 22px; padding: 8px 16px 8px 8px; }
  .hx-pill__faces { grid-row: span 2; } .hx-pill__sep { display: none; } .hx-pill__i { min-width: 0; }
}

/* Zahlenleiste + Bildunterschrift + zwei Rechnungen (Audi Q3 zuerst, Lesetest Punkt 3) */
.hx-wallcap { margin: var(--s4) 0 0; font-size: var(--fs-cap); color: var(--ink-3); letter-spacing: .02em; }
.hx-rcs { display: grid; gap: 14px; margin-top: var(--s5); }
@media (min-width: 640px) { .hx-rcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hx-rc { padding: 16px 18px 14px; border-radius: 20px; background: var(--glass-solid); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,16,18,.08), 0 26px 56px -20px rgba(15,16,18,.36); }
.hx-rc__car { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.hx-rc .hx-chip__sum b { font-size: 1.375rem; }
html.hx-scrub .hx-rcs { position: static; margin: 0; }
html.hx-scrub .hx-rc { position: absolute; z-index: 26; width: 320px; left: var(--rx); top: var(--ry); pointer-events: none;
  --v: clamp(0, calc((var(--t, 0) - .3) * 2.4), 1);
  opacity: var(--v); filter: blur(calc((1 - var(--v)) * 8px)); transform: translate3d(0, calc((1 - var(--v)) * 28px), 0); }
html.hx-scrub .hx-rc--b { --v: clamp(0, calc((var(--t, 0) - .5) * 2.4), 1); }
html.hx-scrub .hx.is-open .hx-rc { pointer-events: auto; }

/* Mehr Luft (Dennis: „alles vielleicht ein bisschen weiter auseinander“): Abschnitte 88 → 136 px statt 96 px fest */
.section { padding: clamp(88px, 5vw + 56px, 136px) 0; }
.head { margin-bottom: clamp(48px, 3vw + 20px, 64px); }
.hx-after { padding-top: clamp(88px, 5vw + 56px, 136px); }
html.hx-scrub .hx-after { padding-top: clamp(88px, 5vw + 56px, 136px); }
/* „Как проходит импорт“ als eigener Abschnitt, gleicher Abstand wie alle (Dennis: „viel zu nah aneinander“) */
.section--route .hx-route__t { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.025em; font-weight: 680; margin: 0 0 var(--s7); text-align: center; }
.section--route .journey { margin-top: 0; }

/* Workbook-Abschnitt (Dennis 15:28: Verhältnis passt nicht): Buch mit echtem Cover größer, Abschnitt kompakter */
.book--cover { width: min(440px, 74vw); aspect-ratio: 794 / 1123; }
.book--cover .book__cover { padding: 0; overflow: hidden; background: #0b0b0c; box-shadow: 0 2px 6px rgba(15,16,18,.12), 0 40px 80px -30px rgba(15,16,18,.55); }
.book--cover .book__cover::after { opacity: .35; mix-blend-mode: screen; }
.book__img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 960px) {
  #tetrad .wb { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
  #tetrad .head { margin-bottom: var(--s5); }
  #tetrad .parts { margin-bottom: var(--s5); }
}
/* 200 % Schrift am Handy: Zeilen der Rechnung dürfen umbrechen (P06) */
.hx-chip__rows > div { flex-wrap: wrap; } .hx-chip__rows b { white-space: normal; overflow-wrap: anywhere; }
/* 200 % Schrift am Handy: Preiskarten und zweispaltige Blöcke laufen nicht über (P06; Fund 19.10. auf /nastavnik/, schon in Runde 1) */
.split > *, .price { min-width: 0; }
.price__amt { flex-wrap: wrap; overflow-wrap: anywhere; }
.price .fill { overflow-wrap: anywhere; }
@media (min-width: 22.5em) and (max-width: 480px) { .hx-pill__i { white-space: nowrap; } }   /* em: bei 200 % Schrift darf es umbrechen */

/* =====================================================================================================================
   4. RUNDE 3 (Designer, 19.10.2026) — Dennis 16:00: „in der zweiten Sektion wichtige Punkte“, „eine Überschriftart … schwarz-grau“,
   Abschnitts-Label als „kleine … Pill … ausgegraut“.
   ===================================================================================================================== */
/* 4a Zweiter Abschnitt „Главное“: was der Club ist (Überschrift), für wen, was man bekommt, Garantie; Fotos nur begleitend im
   Beweis-Streifen. Ab 900 px mit Scroll-Fassung landen die fünf Fächerkarten dort als Daumenbilder (Signature-Moment bleibt). */
.hx__wall .eyebrow { margin-bottom: var(--s4); }
.hx-gl__h { max-width: 30ch; }
.hx-gl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s6); }
.hx-gl__t { position: relative; min-width: 0; padding: var(--s5); border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); }
.hx-gl__t--who { background: var(--bg); box-shadow: var(--shadow-2); }                     /* M: schwebt über der Fläche */
.hx-gl__t--gar { background: var(--dark); color: var(--dark-ink); border-color: transparent; box-shadow: var(--shadow-2); }
.hx-gl__k { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.hx-gl__t--gar .hx-gl__k { color: var(--dark-ink); }
.hx-gl__paths, .hx-gl__checks { list-style: none; margin: 0; padding: 0; }
.hx-gl__paths a { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none; font-size: var(--fs-small); line-height: 1.4; }               /* P21: ≥ 44 px */
.hx-gl__paths li:last-child a { padding-bottom: 0; }
.hx-gl__paths a > span { flex: 1; min-width: 0; color: var(--ink-2); }                            /* 8,0:1 */
.hx-gl__paths b { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body); }
.hx-gl__paths svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.hx-gl__paths a:hover svg { transform: translateX(3px); color: var(--accent-ink); }                 /* Orange = Interaktion */
.hx-gl__paths a:active { opacity: .7; }
.hx-gl__paths a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.hx-gl__checks li { display: flex; gap: 10px; padding: 5px 0; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.hx-gl__checks svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); }      /* Status „inklusive“, 5,3:1 */
.hx-gl__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s4); border-radius: 12px; background: rgba(255,255,255,.08); color: var(--dark-ink); }
.hx-gl__ico svg { width: 20px; height: 20px; }
.hx-gl__t--gar p { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--dark-ink-2); }   /* 8,0:1 */
.hx-gl__t--gar .hx-gl__price { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.12); color: var(--dark-ink); font-weight: 600; }
.hx-gl__proof { display: grid; gap: var(--s5); }
.hx-gl__proof .hx-wallcap { margin: var(--s3) 0 0; }
.hx-gl__slots { display: none; }
.hx-gl__proof .hx-stat__n { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.hx-gl__proof .hx-stat--wide .hx-stat__n { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); padding-top: .3em; }
@media (min-width: 700px) {
  .hx-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-gl__t--who, .hx-gl__proof { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .hx-gl { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); }
  .hx-gl__t--who { grid-column: auto; }
  .hx-gl__proof .hx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Scroll-Fassung: Platzhalter für die fünf Daumenbilder, Zahlen rechts daneben im 2 × 2-Raster */
html.hx-scrub .hx-gl__h { font-size: min(var(--fs-h2), 3.3vw); max-width: 34ch; }
html.hx-scrub .hx-gl { margin-top: var(--s5); }
html.hx-scrub .hx-gl__proof { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s7); padding-block: var(--s4); }
html.hx-scrub .hx-gl__slots { --th: clamp(92px, 14vh, 148px); display: flex; gap: 10px; }
html.hx-scrub .hx-slot { flex: none; width: calc(var(--th) * .75); height: var(--th); border-radius: 10px; background: var(--surface-2); }
html.hx-scrub .hx-gl__proof .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }

/* 4b Abschnitts-Label als kleine graue Pill, überall gleich (ersetzt Punkt + Großbuchstaben). Zurückgenommen: 13 px, Gewicht 500,
   Grau auf leicht getönter Fläche — T: kleinster Text 13 px; F: Kontrast gemessen im Prüfbericht (≥ 4,5:1). */
.eyebrow { display: inline-flex; align-items: center; gap: 0; width: fit-content; min-height: 28px; padding: 4px 12px; border-radius: 999px;
  background: rgba(15,16,18,.045); border: 1px solid var(--line); font-size: var(--fs-cap); font-weight: 500; line-height: 1.3;
  letter-spacing: .01em; text-transform: none; color: var(--ink-3); margin: 0 0 var(--s4); }
.eyebrow::before { content: none; display: none; }
.section--dark .eyebrow, .hx-gl__t--gar .eyebrow, .dark .eyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--dark-ink-2); }

/* 4c Eine Überschriftart: Schwarz + Grau wie die H1, in jedem Abschnitt (Grau #6b6f74 nur ab Großtext, ~5:1 auf Weiß) */
h1 .dim, h2 .dim { color: var(--ink-dim); }
.section--dark h2 .dim { color: var(--dark-ink-2); }

/* 4d Hero-Knopf mit Beigabe darunter (knopf.md Punkt 1): klein, grau, direkt am Knopf (Nähe = Zugehörigkeit) */
.hx__cta { display: grid; justify-items: start; gap: 8px; }
.hx__under { margin: 0; padding-left: 4px; font-size: var(--fs-cap); line-height: 1.35; color: var(--ink-3); }   /* 5,7:1 */

/* 4e Feinschliff: Pill ersetzt die Trennlinie über „Главное“; Preiszeile der Garantie unten bündig */
.hx__wall { border-top: 0; padding-top: var(--s5); }
.hx-gl__t--gar { display: flex; flex-direction: column; }
.hx-gl__t--gar .hx-gl__price { margin-top: auto; }
.hx-gl__t--gar > p:not(.hx-gl__price) { margin-bottom: var(--s4); }
/* 4f Scroll-Fassung kompakt, damit „Главное“ auch auf 1280 × 720 und 1366 × 768 ganz ins Bild passt (sonst ruhige Fassung, r2.js) */
html.hx-scrub .hx-gl__h { font-size: min(var(--fs-h2), 3vw, 5vh); max-width: 40ch; }
html.hx-scrub .hx__wall .eyebrow { margin-bottom: var(--s3); }
html.hx-scrub .hx-gl { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); gap: 10px; margin-top: min(var(--s5), 2.6vh); }
html.hx-scrub .hx-gl__t--who { grid-column: auto; }
html.hx-scrub .hx-gl__t { padding: min(var(--s5), 2.4vh) 20px; }
html.hx-scrub .hx-gl__proof { padding-block: min(var(--s4), 1.6vh); }
html.hx-scrub .hx-gl__k { margin-bottom: 6px; }
html.hx-scrub .hx-gl__paths a { padding: min(10px, 1vh) 0; }
html.hx-scrub .hx-gl__checks li { padding: min(5px, .45vh) 0; }
html.hx-scrub .hx-gl__ico { width: 36px; height: 36px; margin-bottom: min(var(--s4), 1.6vh); }
html.hx-scrub .hx-gl__slots { --th: clamp(84px, 13vh, 148px); }
html.hx-scrub .hx-gl__proof .hx-stats { gap: min(var(--s4), 1.6vh) var(--s5); }

/* ===== Runde 4 (Dennis 19.10.2026 20:01) ===== */
/* Punkt 6: Übergabefotos nicht mehr als runde Avatare in einer Pill unter dem Knopf, sondern als kleiner Fächer über der H1 —
   Echo des Foto-Fächers rechts (ein Motiv, kein zweites). Eckig statt rund: es sind Übergabefotos, keine Mitgliedergesichter. */
.hx-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 var(--s5); }
.hx-proof__ph { display: flex; flex: none; padding-left: 4px; }
.hx-proof__ph img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; border: 2px solid var(--bg); margin-left: -10px;
  box-shadow: 0 6px 14px -6px rgba(15,16,18,.45); }
.hx-proof__ph img:first-child { margin-left: 0; rotate: -7deg; } .hx-proof__ph img:nth-child(2) { rotate: -2deg; }
.hx-proof__ph img:nth-child(3) { rotate: 3deg; } .hx-proof__ph img:nth-child(4) { rotate: 8deg; }
.hx-proof__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-3); }   /* 5,7:1 */
.hx-proof__t b { color: var(--ink); font-weight: 650; }
.hx-proof__dot { color: var(--ink-3); }
@media (max-width: 480px) { .hx-proof { gap: 8px 12px; margin-bottom: var(--s4); } .hx-proof__ph img { width: 34px; height: 34px; } .hx-proof__dot { display: none; } .hx-proof__t { display: grid; gap: 0; } }

/* Punkt 5: mehr Luft zwischen Kernsatz und Kacheln (A1: Abstand trennt Gruppen) */
.hx-gl { margin-top: var(--s7); }
html.hx-scrub .hx-gl { margin-top: clamp(var(--s5), 5vh, var(--s7)); }

/* Punkt 2: «Для кого» als drei gleich große App-Kacheln: Symbol im abgerundeten Quadrat, Titel, ein Satz, Pfeil = Link auf die Unterseite.
   Dieselben drei Symbole wie die Kacheln im Workbook-Formular (Flagge, Koffer, Schlüssel). Orange = Interaktion (die Kachel ist ein Link). */
.hx-gl__who { grid-column: 1 / -1; min-width: 0; }
.hx-gl__k--who { margin: 0 0 var(--s3); }
.hx-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.hx-apps li { display: flex; min-width: 0; }
.hx-app { position: relative; flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; column-gap: 14px; row-gap: 2px; align-items: center;
  min-height: 84px; padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: var(--shadow-2); color: var(--ink); text-decoration: none;
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.hx-app__ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff;
  background: linear-gradient(160deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -8px rgba(255,106,0,.7); color: var(--on-accent); }   /* Schrift auf #ff6a00: #141416 6,41:1 */
.hx-app__ico svg { width: 26px; height: 26px; }
.hx-app__t { grid-column: 2; align-self: end; font-size: var(--fs-body); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.hx-app__p { grid-column: 2; align-self: start; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.hx-app__go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--ink-3);
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.hx-app__go svg { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease); }
.hx-app:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.hx-app:hover .hx-app__go { background: var(--accent-a); color: var(--on-accent); }
.hx-app:hover .hx-app__go svg { transform: translateX(2px); }
.hx-app:active { transform: scale(.98); transition-duration: var(--dur-press); }
.hx-app:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 700px) { .hx-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Zweite Reihe: «Что получаешь» + «Гарантия»; dritte Reihe: Fotos + Zahlen. Die unbelegte Kachel «закрытый клуб» ist entfallen (Punkt 1). */
@media (min-width: 700px) { .hx-gl { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .hx-gl__proof { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .hx-gl { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hx-gl__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .hx-gl__proof .hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); }
}
@media (min-width: 900px) { .hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .hx-stat--wide { grid-column: 1 / -1; } }
html.hx-scrub .hx-gl { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
html.hx-scrub .hx-gl__proof { grid-column: 1 / -1; }
html.hx-scrub .hx-gl__proof .hx-stats { grid-template-columns: auto auto minmax(0, 1fr); gap: min(var(--s4), 1.6vh) var(--s7); }
html.hx-scrub .hx-gl__who { transform: translate3d(0, calc((1 - var(--t, 0)) * 14px), 0); }
html.hx-scrub .hx-app { min-height: 0; padding: min(16px, 1.8vh) 16px; }
html.hx-scrub .hx-app__ico { width: min(52px, 5.6vh); height: min(52px, 5.6vh); border-radius: min(15px, 1.6vh); }
html.hx-scrub .hx-gl__k--who { margin-bottom: min(var(--s3), 1.2vh); }

/* Punkt 3: Workbook-Fenster (und Pop-up) offen → Seite dahinter unscharf. Nur das stehende Bild hinter dem Fenster wird gefiltert;
   ohne Unterstützung oder bei „Transparenz reduzieren“ bleibt die dunklere Fläche (M: Material nur, wo es Ebenen trennt). Echtgerät offen. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wbd::backdrop, .jd::backdrop { background: rgba(15,16,18,.28); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
}
@media (prefers-reduced-transparency: reduce) { .wbd::backdrop, .jd::backdrop { background: rgba(15,16,18,.6); -webkit-backdrop-filter: none; backdrop-filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .hx-app, .hx-app__go, .hx-app__go svg { transition: none; }
  .hx-app:hover, .hx-app:active { transform: none; }
}

/* Punkt 8: Menü nach Wichtigkeit; im Blatt stehen die Länder unter einer schlichten Zeile «Страны» (kein Link, keine Pill) */
.sheet nav .sheet__k { display: block; padding: var(--s4) 0 var(--s1); font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }

/* Punkt 7: Dankeseite — «Вступить в группу BAZA» als großer nächster Schritt direkt unter dem PDF. Dunkle Karte = oberste Ebene der Seite
   (Tiefe), Orange nur am Knopf (Interaktion). Weiß auf --dark 16,7:1, --dark-ink-2 8,0:1. */
.tg-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin: var(--s7) 0 var(--s6); padding: var(--s6);
  border-radius: 28px; background: radial-gradient(120% 140% at 100% 0%, rgba(255,106,0,.30), transparent 55%), var(--dark); color: var(--dark-ink); box-shadow: var(--shadow-3); overflow: hidden; }
.tg-next__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--on-accent);
  background: linear-gradient(160deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.tg-next__ico svg { width: 28px; height: 28px; }
.tg-next__h { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 680; color: var(--dark-ink); max-width: 22ch; }
.tg-next__h .dim { color: var(--dark-ink-2); }
.tg-next__txt p { margin: var(--s3) 0 0; max-width: 56ch; font-size: var(--fs-lede); line-height: 1.45; color: var(--dark-ink-2); }
.tg-next__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.tg-next .btn { --h: 60px; padding: 0 30px; font-size: 1.1875rem; }
.tg-next .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tg-next .cap { color: var(--dark-ink-2); }
@media (max-width: 599px) { .tg-next { padding: var(--s5); border-radius: 24px; } .tg-next .btn { width: 100%; } }
@media (min-width: 900px) { .tg-next { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s6); align-items: start; padding: var(--s7); }
  .tg-next__act { grid-column: 2; } }
/* Punkt 8: sieben Menüpunkte in einer Zeile, nichts bricht um (gemessen 1200–1440 px). Unter 1200 px das Blatt-Menü;
   Telefon bis 1499 px als runder Knopf (44 × 44, P21), darüber als Nummer. */
.nav a, .nav button.nav__dd { white-space: nowrap; }
@media (min-width: 75em) { .logo, .logo span, .top__right .btn { white-space: nowrap; } .top .nav, .top .logo { flex: none; } }
.nav a, .nav button.nav__dd { padding: 0 10px; }
@media (max-width: 74.99em) { .nav { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 93.74em) { .tel { display: none; } }
.tel-ico { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--surface); text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease); }
.tel-ico svg { width: 18px; height: 18px; }
.tel-ico:hover { background: var(--surface-2); }
.tel-ico:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 75em) and (max-width: 93.74em) { .tel-ico { display: inline-grid; } }
@media (max-width: 599px) { .tg-next { margin-top: var(--s5); } }
@media (max-width: 599px) { .tg-next .btn { --h: 56px; padding: 0 20px; font-size: 1.0625rem; } }

/* =====================================================================================================================
   RUNDE 5 (Designer, 19.10.2026) — Teil A, reine Gestaltung. Dennis 20:36 / 20:09.
   ===================================================================================================================== */

/* 5.1 Bento «Что внутри клуба»: Vignette von unten bis über die Textzone (Dennis: „Die so eine Vignette von unten nach oben …
   So bis zu dem Teil, wo quasi der Text immer steht“). Der Verlauf hängt am Textblock, nicht an der Kachelhöhe: er beginnt
   immer --fade über dem Text und ist an der ersten Textzeile schon dicht — gleich, wie hoch die Kachel ist (BI6 [Übertragung]:
   Text über Bild nur mit gesichertem Kontrast; F4 [Apple] ≥ 4,5:1, gemessen gegen den hellsten Bildpunkt unter jeder Zeile).
   Weiche Kurve statt linearer Kante (kein sichtbarer Streifen). Die Ecken-Vignette bleibt leicht, für Tiefe (§6). */
.bx--photo { --fade: 88px; }
.bx--photo::after { background: radial-gradient(140% 110% at 50% 18%, rgba(8,8,10,0) 52%, rgba(8,8,10,.38) 100%); }
.bx--photo .bx__body::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--fade)) 0 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,8,10,0) 0,
    rgba(8,8,10,.05) calc(var(--fade) * .25),
    rgba(8,8,10,.2) calc(var(--fade) * .5),
    rgba(8,8,10,.44) calc(var(--fade) * .75),
    rgba(8,8,10,.68) var(--fade),
    rgba(8,8,10,.8) calc(var(--fade) + 72px),
    rgba(8,8,10,.88) 100%); }
.bx--photo h3 { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.bx--photo p { color: rgba(255,255,255,.9); }

/* 5.2 Laufband der Übergabefotos (Dennis 20:09: „dass die vielleicht so durchlaufen“). Volle Breite, ruhiges Tempo (~40 px/s,
   B6 [Apple]: nichts Schnelles in Dauerschleife), weiche Kanten links/rechts. Hält bei Zeiger und Tastaturfokus (B4 [Apple]: nie
   warten lassen — man greift jederzeit zu) und per Knopf (B7 [Übertragung]: Bewegung in Dauerschleife nur mit Steuerung).
   „Bewegung reduzieren“: steht still und wird zur Wischleiste (B2 [Apple]). Nur transform (M7 [Annahme]: Compositor, ruckelt nicht). */
.marq { position: relative; z-index: 1; margin-top: -48px; padding-bottom: clamp(64px, 3vw + 40px, 96px); }   /* über dem Abschnitt davor, sonst fängt der den Klick ab */
.marq__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.marq__head .cap { margin: 0; }
.marq__btn { flex: none; background: var(--bg); border: 1px solid var(--line-2); box-shadow: none; }
.marq__btn svg { width: 16px; height: 16px; }
.marq__btn .marq__play, .marq.is-paused .marq__btn .marq__pause { display: none; }
.marq.is-paused .marq__btn .marq__play { display: block; }
.marq__view { position: relative; overflow: hidden; padding: 6px 0 14px; outline: none; }
.marq__view::before, .marq__view::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(24px, 7vw, 140px); pointer-events: none; }
.marq__view::before { left: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 100%); }
.marq__view::after { right: 0; background: linear-gradient(270deg, var(--bg) 0%, rgba(255,255,255,0) 100%); }
.marq__track { display: flex; width: max-content; animation: marq calc(var(--n) * 6.5s) linear infinite; will-change: transform; }
.marq__set { display: flex; margin: 0; padding: 0; list-style: none; }
.marq__i { flex: none; width: clamp(200px, 16vw + 30px, 264px); margin-right: 14px; }
.marq__i img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: var(--surface-2); cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(15,16,18,.06); transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .marq__view:hover .marq__track { animation-play-state: paused; }
  .marq__i img:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(15,16,18,.5); }
}
.marq__view:focus-within .marq__track, .marq.is-paused .marq__track, .marq.is-off .marq__track { animation-play-state: paused; }
.marq__more { margin-top: var(--s2); }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marq__track { animation: none; width: auto; }
  .marq__set[data-marq-clone], .marq__btn, .marq__view::before, .marq__view::after { display: none; }
  .marq__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .marq__i { scroll-snap-align: start; }
  .marq__i img { transition: none; }
}

/* 5.3 Workbook (Dennis 20:36: „das Workbook, das sieht irgendwie scheiße aus“). Links eine helle Bühne, darauf das echte Cover als
   Buch im Raum: Vorderseite, Seitenschnitt, Rücken, Schatten am Boden (Tiefe §6, M1 [Übertragung]: eine Ebene schwebt — das Buch).
   Rechts: Überschrift (eine Überschriftart: Schwarz + Grau), sieben Teile als Inhaltsverzeichnis, EIN Hauptknopf wie im Hero
   (F3 [Apple]). Verhältnis: Buch ≈ 380 px breit auf einer Bühne von ≈ 600 px — das Buch trägt den Abschnitt, nicht das Formular.
   Bewegung: das Buch neigt sich leicht zum Zeiger (≤ 6°, Zweck: zeigt „das ist ein Ding, das man bekommt“, lädt zum Klick ein, B1);
   bei „Bewegung reduzieren“ und am Touch-Gerät steht es ruhig im festen Winkel (B2 [Apple]). */
.section--wbx { background: var(--bg); }
.wbx { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 960px) { .wbx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 96px); align-items: stretch; } .wbx__tx { align-self: center; } }
.wbx__stage { position: relative; display: grid; place-items: center; min-height: clamp(460px, 34vw + 120px, 640px); border-radius: 36px; overflow: hidden;
  perspective: 1600px; background:
    radial-gradient(60% 50% at 50% 38%, #ffffff 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #f4f3ef 0%, #ebe9e3 100%);
  box-shadow: inset 0 0 0 1px rgba(15,16,18,.05); --rx: 0deg; --ry: 0deg; --mx: 50%; --w: clamp(250px, 18vw + 140px, 420px); }
.wbx__book { --t: 22px; position: relative; z-index: 1; display: block; width: var(--w); aspect-ratio: 794 / 1123;
  transform-style: preserve-3d; transform: translateY(-18px) rotateX(calc(7deg + var(--rx))) rotateY(calc(24deg + var(--ry))) rotateZ(-1deg);
  transition: transform 700ms var(--r2s); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wbx__cover, .wbx__spine { position: absolute; display: block; }
.wbx__cover { inset: 0; transform: translateZ(calc(var(--t) / 2)); border-radius: 3px 12px 12px 3px; overflow: hidden; background: #0b0b0c;
  box-shadow: inset 4px 0 6px -2px rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.08),
    0 2px 4px rgba(15,16,18,.18), 0 28px 46px -26px rgba(15,16,18,.55); }
.wbx__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wbx__cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; z-index: 1;   /* Falz am Rücken */
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.10) 55%, rgba(0,0,0,0)); }
.wbx__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: linear-gradient(115deg, rgba(255,255,255,0) calc(var(--mx) - 28%), rgba(255,255,255,.22) var(--mx), rgba(255,255,255,0) calc(var(--mx) + 28%)); }
.wbx__spine { top: 0; bottom: 0; left: calc(var(--t) / -2); width: var(--t); transform: rotateY(-90deg); border-radius: 2px;   /* Buchrücken */
  background: linear-gradient(90deg, #050506 0%, #1d1e22 45%, #0c0c0e 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.wbx__floor { position: absolute; z-index: 0; left: 50%; top: calc(50% + var(--w) * .7072 - 34px); width: calc(var(--w) * 1.15); height: 56px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(15,16,18,.30), rgba(15,16,18,0)); filter: blur(6px); }
@media (hover: hover) and (pointer: fine) { .wbx__stage:hover .wbx__book { transition-duration: 260ms; } }
@media (prefers-reduced-motion: reduce) { .wbx__book { transition: none; } .wbx__shine { display: none; } }
.wbx__tx { min-width: 0; }
.wbx__tx .head { margin-bottom: var(--s6); }
.wbx__toc { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; border-top: 1px solid var(--line); counter-reset: none; }
@media (min-width: 1200px) { .wbx__toc { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--s6); } }   /* liest spaltenweise 01–04, 05–07 */
.wbx__toc li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.wbx__n { font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.wbx__t { font-size: var(--fs-body); line-height: 1.35; color: var(--ink); font-weight: 560; letter-spacing: -.005em; }
.wbx__cta { display: grid; justify-items: start; gap: var(--s4); }
.wbx__meta { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--fs-cap); line-height: 1.45; color: var(--ink-3); }
.wbx__meta svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }