/* join — fester Knopf „Вступить в группу BAZA“ (.jb), Pop-up (.jd) und das Drei-Schritt-Formular (.wbf).
   Markup und Texte: _src/join.mjs (Leiste, Pop-up) und _src/lib.mjs workbookForm() (Formular); Verhalten: assets/js/join.js, site.js */

/* Die alte mobile Leiste ersetzt .jb */
[data-dock] { display: none !important; }

/* ---------- Leiste ---------- */
/* Handy: volle Breite unten, deckend weiß, Häkchen als Zeile über dem Knopf */
.jb { position: fixed; z-index: 45; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 28px;
  background: var(--glass-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 32px));
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out), visibility 0s linear 320ms; }
.jb.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.jb__pts { list-style: none; margin: 0; padding: 4px 6px 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: .8125rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
.jb__pts li { display: inline-flex; align-items: center; gap: 5px; }
.jb__dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(31, 122, 74, .13); color: var(--ok); flex: none; }
.jb__dot .jb__ck { width: 12px; height: 12px; }

.jb__btn { --h: 48px; width: 100%; padding: 0 22px 0 10px; gap: 10px; }
@media (hover: hover) { .jb__btn:hover { transform: translateY(-1px); } }
.jb__btn:active { transform: scale(.97); }
.jb__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
.jb__badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 20, 22, .12); color: var(--on-accent); flex: none; }
.jb__badge .jb__ck { width: 18px; height: 18px; }

/* Desktop: Pille unten in der Mitte, Häkchen in der Pille links vom Knopf (Dennis 19.10. 15:28: „unten in der Mitte … war schon ganz cool“) */
@media (min-width: 700px) {
  .jb { left: 50%; right: auto; translate: -50% 0; bottom: calc(20px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 48px);
    flex-direction: row; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 999px; }
  .jb__pts { flex-wrap: nowrap; padding: 0; gap: 14px; font-size: .875rem; }
  .jb__btn { --h: 48px; width: auto; flex: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(255, 106, 0, .7); }
}
@media (min-width: 700px) and (max-width: 1099px) { .jb__pts li:nth-child(n+2) { display: none; } }
/* Häkchen zeichnen sich beim ersten Erscheinen nacheinander (260 ms je Häkchen, 90 ms Versatz); danach Ruhe */
.jb .jb__ck path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.jb.is-drawn .jb__ck path { animation: jbDraw 260ms var(--ease-out) both; }
.jb.is-drawn .jb__ck--1 path { animation-delay: 160ms; }
.jb.is-drawn .jb__ck--2 path { animation-delay: 250ms; }
.jb.is-drawn .jb__ck--3 path { animation-delay: 340ms; }
.jb.is-drawn .jb__ck--4 path { animation-delay: 430ms; }
.jb.is-drawn .jb__badge { animation: jbPulse 620ms ease-out 700ms 1 both; }
@keyframes jbDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jbPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); transform: scale(1); } 40% { transform: scale(1.1); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); transform: scale(1); } }

/* ---------- Pop-up ---------- */
.jd { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(440px, calc(100vw - 32px)); max-width: none; max-height: none; overflow: visible; }
.jd:focus, .jd:focus-visible { outline: none; }
.jd::backdrop { background: rgba(15, 16, 18, .42); }
.jd[open] { animation: jdIn 240ms var(--ease-out); }
.jd[open]::backdrop { animation: jdFade 240ms linear; }
@keyframes jdIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes jdFade { from { opacity: 0; } to { opacity: 1; } }
.jd__card { position: relative; background: var(--bg); border-radius: 24px; box-shadow: var(--shadow-3); overflow: hidden auto; overscroll-behavior: contain; max-height: calc(100dvh - 32px); }
.jd__ph { margin: 0; height: 160px; background: var(--surface); }
.jd__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
@media (max-height: 760px) { .jd__ph { height: 112px; } }
.jd__body { padding: 20px 24px calc(12px + env(safe-area-inset-bottom)); }
.jd__body .eyebrow { margin: 0 0 8px; }
.jd__t { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.jd__p { margin: 8px 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.jd__list { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.jd__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; color: var(--ink); }
.jd__list svg { width: 22px; height: 22px; flex: none; margin-top: -2px; color: var(--ok); stroke-width: 2.25; }
.jd .formcard { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.jd__later { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 12px; background: none;
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jd__later:hover { color: var(--ink); }
.jd__later:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.jd__x { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: var(--shadow-1); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press) var(--ease); }
.jd__x svg { width: 20px; height: 20px; }
.jd__x:active { transform: scale(.94); }
.jd__x:focus-visible, .jd .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wbd .jd__x { background: var(--surface); box-shadow: none; }   /* Workbook-Fenster: dasselbe Kreuz, ohne Foto dahinter */

/* ---------- Formular in drei Schritten (workbookForm) ---------- */
.wbf__bar { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; }
.wbf__back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -6px 0 -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wbf__back[hidden] { display: none; }
.wbf__back svg { width: 22px; height: 22px; transform: scaleX(-1); }
.wbf__back:hover { background: var(--surface); }
.wbf__back:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.wbf__of { font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.wbf__prog { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.wbf__prog i { display: block; height: 100%; width: calc(var(--n, 1) / 3 * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); transition: width 240ms var(--ease-out); }
.wbf__q { margin: 0 0 12px; padding: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.wbf__s { margin: 0; }
.js .wbf [data-step]:not(.is-cur) { display: none; }
.wbf__s.is-in { animation: wbfIn 220ms var(--ease-out); }
@keyframes wbfIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wbf__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.wbf__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 8px; text-align: center;
  border-radius: 16px; background: var(--bg); border: 1.5px solid var(--line-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.25; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease); -webkit-tap-highlight-color: transparent; }
.wbf__tile svg { width: 24px; height: 24px; color: var(--accent-ink); }
.wbf__tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .wbf__tile:hover { border-color: var(--ink); } }
.wbf__tile:active { transform: scale(.97); }
.wbf__tile:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-1); }
.wbf__tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.field.has-err .wbf__tile { border-color: var(--err); }
.wbf__hint { margin: 2px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
/* Schritt 1: der Absenden-Knopf ist nur für Tastatur und Screenreader da (Tipp auf eine Kachel geht von selbst weiter) */
.js .wbf__s[data-step="1"] .wbf__go:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Ohne JS: alle drei Schritte untereinander, ohne Fortschritt und Weiter-Knöpfe */
html:not(.js) .wbf__bar, html:not(.js) .wbf__go { display: none; }
html:not(.js) .wbf__s + .wbf__s { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Bewegung reduzieren: keine Gleit-/Zeichenbewegung, nur Überblenden (150 ms), Häkchen stehen fertig */
@media (prefers-reduced-motion: reduce) {
  /* site.css setzt unter reduce alle Dauern auf .001ms !important; hier gezielt 150 ms Überblenden zurückholen */
  .jb { transform: none; transition-property: opacity, visibility !important; transition-duration: 150ms, 0s !important; transition-timing-function: linear !important; transition-delay: 0s, 150ms !important; }
  .jb.is-on { transition-delay: 0s, 0s !important; }
  .jb__pts { transform: none !important; transition-property: opacity, visibility !important; transition-duration: 150ms, 0s !important; transition-delay: 0s, 150ms !important; }
  .jb.is-open .jb__pts, .jb:has(.jb__btn:focus-visible) .jb__pts { transition-delay: 0s, 0s !important; }
  .jb .jb__ck path, .jb.is-drawn .jb__ck path { stroke-dashoffset: 0; animation: none; }
  .jb.is-drawn .jb__badge { animation: none; }
  .jb__btn:hover, .jb__btn:active, .jd__x:active, .wbf__tile:active { transform: none; }
  .jd[open] { animation: jdFade 150ms linear !important; }
  .jd[open]::backdrop { animation: jdFade 150ms linear !important; }
  .wbf__s.is-in { animation: none; }
}