{children}

{React.Children.map(children, (c, i) => (

{c}

))}

✦

{text}

Eure Auswertung – noch nicht freigeschaltet

{children}

{status && (

{status.map((x) => ( {x.done ? : ))}

)}

{title} {children}

{label && ( {label} {optional && ( freiwillig )} )} {hint && (

{hint}

)}

onChange(e.target.value)}
        style={{
          width: "100%", boxSizing: "border-box", resize: "vertical",
          fontFamily: SANS, fontSize: 15.5, fontWeight: 300, lineHeight: 1.6, color: C.ink,
          background: offen ? C.terraSoft : C.white,
          border: `1px solid ${offen ? C.terra : C.line}`, borderRadius: 10,
          padding: "14px 16px", outline: "none", minHeight: 44,
        }}
      />
      {offen && (
        <div style={{
          fontFamily: SANS, fontSize: 12.5, fontWeight: 400, color: C.terra,
          marginTop: 7, lineHeight: 1.5,
        }}>Wird für die Auswertung gebraucht</div>
      )}
    </div>
  );
}

function TextInput({ label, value, onChange, placeholder, numeric, flex = 1, id }) {
  const fid = id || `i-${(label || "").slice(0, 20).replace(/\W/g, "")}`;
  return (
    <div style={{ flex, minWidth: 0 }}>
      {label && (
        <label htmlFor={fid} style={{
          display: "block", fontFamily: SANS, fontSize: 12, fontWeight: 500, letterSpacing: 1,
          textTransform: "uppercase", color: C.muted, marginBottom: 7,
        }}>{label}</label>
      )}
      <input
        id={fid} value={value || ""} placeholder={placeholder || ""}
        inputMode={numeric ? "numeric" : "text"}
        onChange={(e) => onChange(numeric ? e.target.value.replace(/[^0-9]/g, "").slice(0, 3) : e.target.value)}
        style={{
          width: "100%", boxSizing: "border-box", fontFamily: SANS, fontSize: 15.5,
          fontWeight: 300, color: C.ink, background: C.white,
          border: `1px solid ${C.line}`, borderRadius: 10, padding: "13px 15px",
          outline: "none", minHeight: 44,
        }}
      />
    </div>
  );
}

/* Auswahlknopf für Einfach- und Mehrfachauswahl */
function Choice({ label, note, selected, onClick, box = "check", disabled }) {
  return (
    <button type="button" onClick={onClick} disabled={disabled} aria-pressed={selected}
      style={{
        display: "flex", alignItems: "flex-start", gap: 13, width: "100%", textAlign: "left",
        padding: "14px 16px", marginBottom: 9, cursor: disabled ? "default" : "pointer",
        borderRadius: 12, minHeight: 44,
        border: `1px solid ${selected ? C.terra : C.line}`,
        background: selected ? C.terra : C.white,
        color: selected ? C.white : C.body,
        opacity: disabled && !selected ? 0.45 : 1,
      }}>
      <span aria-hidden="true" style={{
        width: 19, height: 19, flexShrink: 0, marginTop: 2,
        borderRadius: box === "radio" ? "50%" : 6,
        border: `1px solid ${selected ? C.white : C.line}`,
        background: selected ? C.white : "transparent",
        display: "grid", placeItems: "center",
      }}>
        {selected && <Check size={11} color={C.terra} />}
      </span>
      <span style={{ flex: 1 }}>
        <span style={{ display: "block", fontFamily: SANS, fontSize: 15, fontWeight: 400, lineHeight: 1.5 }}>{label}</span>
        {note && (
          <span style={{
            display: "block", fontFamily: SANS, fontSize: 13, fontWeight: 300, lineHeight: 1.5,
            marginTop: 5, color: selected ? "rgba(255,253,250,0.85)" : C.muted,
          }}>{note}</span>
        )}
      </span>
    </button>
  );
}

/* Einfachauswahl mit Beschriftung */
function Pick({ label, hint, options, value, onChange, optional }) {
  return (
    <div style={{ marginBottom: 32 }}>
      {label && (
        <div style={{ fontFamily: SANS, fontSize: 15, fontWeight: 500, color: C.ink, marginBottom: hint ? 5 : 10, lineHeight: 1.45 }}>
          {label}
          {optional && (
            <span style={{
              fontFamily: SANS, fontSize: 11, fontWeight: 500, letterSpacing: 1, textTransform: "uppercase",
              color: C.muted, marginLeft: 9, border: `1px solid ${C.line}`, borderRadius: 20, padding: "2px 9px",
              verticalAlign: "middle", whiteSpace: "nowrap",
            }}>freiwillig</span>
          )}
        </div>
      )}
      {hint && (
        <div style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, fontStyle: "italic", color: C.muted, marginBottom: 10, lineHeight: 1.5 }}>{hint}</div>
      )}
      {options.map((o) => {
        const on = value === o;
        return (
          <button key={o} type="button" aria-pressed={on} onClick={() => onChange(on ? "" : o)}
            style={{
              display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left",
              padding: "12px 15px", marginBottom: 7, cursor: "pointer", borderRadius: 11, minHeight: 44,
              border: `1px solid ${on ? C.terra : C.line}`,
              background: on ? C.terra : C.white,
              color: on ? C.white : C.body,
            }}>
            <span aria-hidden="true" style={{
              width: 17, height: 17, flexShrink: 0, borderRadius: "50%",
              border: `1px solid ${on ? C.white : C.line}`,
              background: on ? C.white : "transparent", display: "grid", placeItems: "center",
            }}>
              {on && <span style={{ width: 7, height: 7, borderRadius: "50%", background: C.terra }} />}
            </span>
            <span style={{ fontFamily: SANS, fontSize: 14.5, fontWeight: on ? 500 : 300, lineHeight: 1.45 }}>{o}</span>
          </button>
        );
      })}
    </div>
  );
}

/* Mehrfachauswahl als Chips */
function Chips({ label, hint, options, values = [], onToggle, max, optional }) {
  const full = max && values.length >= max;
  return (
    <div style={{ marginBottom: 32 }}>
      {label && (
        <div style={{ fontFamily: SANS, fontSize: 15, fontWeight: 500, color: C.ink, marginBottom: hint ? 5 : 10, lineHeight: 1.45 }}>
          {label}
          {optional && (
            <span style={{
              fontFamily: SANS, fontSize: 11, fontWeight: 500, letterSpacing: 1, textTransform: "uppercase",
              color: C.muted, marginLeft: 9, border: `1px solid ${C.line}`, borderRadius: 20, padding: "2px 9px",
              verticalAlign: "middle", whiteSpace: "nowrap",
            }}>freiwillig</span>
          )}
        </div>
      )}
      {hint && (
        <div style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, fontStyle: "italic", color: C.muted, marginBottom: 10, lineHeight: 1.5 }}>
          {hint}{max ? ` Bis zu ${max}.` : ""}
        </div>
      )}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {options.map((o) => {
          const on = values.includes(o);
          return (
            <button key={o} type="button" aria-pressed={on} disabled={full && !on}
              onClick={() => onToggle(o)}
              style={{
                padding: "10px 15px", minHeight: 44, cursor: full && !on ? "default" : "pointer", borderRadius: 24,
                border: `1px solid ${on ? C.sage : C.line}`,
                background: on ? C.sage : C.white,
                color: on ? C.white : C.body,
                opacity: full && !on ? 0.4 : 1,
                fontFamily: SANS, fontSize: 13.5, fontWeight: on ? 500 : 300, lineHeight: 1.35, textAlign: "left",
              }}>{o}</button>
          );
        })}
      </div>
    </div>
  );
}

/* Bildauswahl im Raster */
function PhotoGrid({ options, images, values = [], onToggle, max }) {
  const full = max && values.length >= max;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 10, alignItems: "stretch" }}>
      {options.map((o) => {
        const on = values.includes(o.k);
        return (
          <button key={o.k} type="button" aria-pressed={on} disabled={full && !on}
            onClick={() => onToggle(o.k)}
            style={{
              position: "relative", padding: 0, overflow: "hidden", borderRadius: 12,
              cursor: full && !on ? "default" : "pointer", background: on ? C.sand : C.white,
              border: `2px solid ${on ? C.terra : "transparent"}`,
              boxShadow: on ? "none" : `0 0 0 1px ${C.line}`,
              opacity: full && !on ? 0.45 : 1,
              display: "flex", flexDirection: "column", width: "100%", height: "100%",
            }}>
            <span style={{ position: "relative", display: "block", width: "100%", paddingTop: "68%", overflow: "hidden", flexShrink: 0 }}>
              <img src={images[o.k]} alt="" style={{
                position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
                objectFit: "cover", objectPosition: "center", display: "block",
              }} />
              <span aria-hidden="true" style={{
                position: "absolute", top: 9, left: 9, width: 22, height: 22, borderRadius: "50%",
                background: on ? C.terra : "rgba(255,253,250,0.9)",
                border: `1px solid ${on ? C.terra : "rgba(255,255,255,0.9)"}`,
                display: "grid", placeItems: "center",
              }}>
                {on && <Check size={13} color={C.white} />}
              </span>
            </span>
            <span style={{
              display: "flex", alignItems: "center", flex: 1, minHeight: 62,
              fontFamily: SANS, fontSize: 12.5, fontWeight: on ? 500 : 300, lineHeight: 1.4,
              color: on ? C.ink : C.body, padding: "10px 12px", textAlign: "left",
            }}>{o.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* Umschalter zwischen den beiden Personen */
function WhoTabs({ who, setWho, names, counts }) {
  return (
    <div role="tablist" aria-label="Person auswählen" style={{
      display: "flex", background: C.taupe, borderRadius: 40, padding: 4, marginBottom: 22,
    }}>
      {["a", "b"].map((k) => (
        <button key={k} role="tab" aria-selected={who === k} type="button"
          onClick={() => setWho(k)}
          style={{
            flex: 1, padding: "12px 6px", minHeight: 44, cursor: "pointer",
            border: "none", borderRadius: 40,
            background: who === k ? C.terra : "transparent",
            color: who === k ? C.white : C.body,
            fontFamily: SANS, fontSize: 14.5, fontWeight: 500,
          }}>
          {names[k]}
          {counts && <span style={{ fontWeight: 300, opacity: 0.8 }}> ({counts[k]})</span>}
        </button>
      ))}
    </div>
  );
}

/* Beschriftung auf zwei Zeilen umbrechen, damit nichts abgeschnitten wird */
function wrapLabel(s) {
  if (s.length <= 11 || !s.includes(" ")) return [s];
  const words = s.split(" ");
  let best = 1, diff = Infinity;
  for (let i = 1; i < words.length; i++) {
    const l = words.slice(0, i).join(" ").length;
    const r = words.slice(i).join(" ").length;
    if (Math.abs(l - r) < diff) { diff = Math.abs(l - r); best = i; }
  }
  return [words.slice(0, best).join(" "), words.slice(best).join(" ")];
}

/* Netzdiagramm für zwei Personen */
function Radar({ a, b, names, showB, ideal }) {
  const W = 470, H = 350, cx = W / 2, cy = H / 2, R = 90, n = WHEEL_AREAS.length;
  const pt = (i, r) => {
    const ang = (Math.PI * 2 * i) / n - Math.PI / 2;
    return [cx + Math.cos(ang) * r, cy + Math.sin(ang) * r];
  };
  const poly = (vals) => WHEEL_AREAS
    .map((it, i) => pt(i, ((vals[it.k] || 0) / 10) * R).join(",")).join(" ");
  const anyA = WHEEL_AREAS.some((it) => a[it.k]);
  const anyB = WHEEL_AREAS.some((it) => b[it.k]);
  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} role="img"
        aria-label={`Beziehungsrad mit acht Bereichen für ${names.a}${showB ? ` und ${names.b}` : ""}`}
        style={{ width: "100%", maxWidth: 480, display: "block", margin: "0 auto" }}>

{/* ruhige Ringe statt Netz */}
        <circle cx={cx} cy={cy} r={R} fill={C.sand} fillOpacity="0.45" />
        {[0.25, 0.5, 0.75, 1].map((f) => (
          <circle key={f} cx={cx} cy={cy} r={R * f} fill="none"
            stroke={C.line} strokeOpacity={f === 1 ? 0.9 : 0.45} strokeWidth="1" />
        ))}
        {WHEEL_AREAS.map((_, i) => {
          const [x, y] = pt(i, R);
          return <line key={i} x1={cx} y1={cy} x2={x} y2={y}
            stroke={C.line} strokeOpacity="0.35" strokeWidth="1" />;
        })}

{ideal ? (
          <polygon points={WHEEL_AREAS.map((_, i) => pt(i, R).join(",")).join(" ")}
            fill={C.sage} fillOpacity="0.2" stroke={C.sage} strokeWidth="2.5"
            strokeLinejoin="round" />
        ) : (
          <>
            {showB && anyB && (
              <>
                <polygon points={poly(b)} fill={C.sage} fillOpacity="0.2"
                  stroke={C.sage} strokeWidth="2.5" strokeLinejoin="round" />
                {WHEEL_AREAS.map((it, i) => {
                  if (!b[it.k]) return null;
                  const [x, y] = pt(i, (b[it.k] / 10) * R);
                  return <circle key={it.k} cx={x} cy={y} r="4" fill={C.sage} />;
                })}
              </>
            )}
            {anyA && (
              <>
                <polygon points={poly(a)} fill={C.terra} fillOpacity="0.2"
                  stroke={C.terra} strokeWidth="2.5" strokeLinejoin="round" />
                {WHEEL_AREAS.map((it, i) => {
                  if (!a[it.k]) return null;
                  const [x, y] = pt(i, (a[it.k] / 10) * R);
                  return <circle key={it.k} cx={x} cy={y} r="4" fill={C.terra} />;
                })}
              </>
            )}
          </>
        )}

{WHEEL_AREAS.map((it, i) => {
          const [x, y] = pt(i, R + 22);
          const anchor = Math.abs(x - cx) < 6 ? "middle" : x > cx ? "start" : "end";
          const lines = wrapLabel(it.label);
          const isTop = i === 0, isBottom = i === n / 2;
          const base = y + (isTop ? -6 : isBottom ? 6 : 0);
          return (
            <text key={it.k} x={x} textAnchor={anchor}
              style={{ fontFamily: SANS, fontSize: 14, fontWeight: 500, fill: C.ink }}>
              {lines.map((ln, li) => (
                <tspan key={li} x={x} y={base + (lines.length === 1 ? 5 : li === 0 ? -2 : 15)}>{ln}</tspan>
              ))}
            </text>
          );
        })}
      </svg>
      {showB && !ideal && (
        <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 6 }}>
          {[[C.terra, names.a], [C.sage, names.b]].map(([col, nm]) => (
            <span key={nm} style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: SANS, fontSize: 12.5, color: C.body }}>
              <span aria-hidden="true" style={{ width: 11, height: 11, borderRadius: 3, background: col }} />{nm}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

/* Regler mit Beschriftung */
function Slider({ label, desc, value, onChange, min = 1, max = 10, suffix, offen }) {
  const id = `sl-${label.replace(/\W/g, "")}`;
  return (
    <div style={{
      marginBottom: 18, padding: desc ? "16px 16px 12px" : 0,
      borderRadius: desc ? 12 : 0,
      background: desc ? (offen ? C.terraSoft : C.sand) : "transparent",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
        <label htmlFor={id} style={{ fontFamily: SANS, fontSize: 15.5, fontWeight: 500, color: C.ink }}>{label}</label>
        <span style={{ fontFamily: SERIF, fontSize: 24, fontWeight: 500, color: offen ? C.muted : C.terra }}>
          {value}{suffix || ""}
        </span>
      </div>
      {desc && (
        <p style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, lineHeight: 1.55, color: C.muted, margin: "6px 0 10px" }}>
          {desc}
        </p>
      )}
      <input id={id} type="range" min={min} max={max} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{ width: "100%", accentColor: C.terra, height: 30, display: "block" }} />
      {desc && (
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 2 }}>
          <span style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 300, color: C.muted }}>da liegt was</span>
          <span style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 300, color: C.muted }}>läuft richtig gut</span>
        </div>
      )}
    </div>
  );
}

/* =========================================================
   APP
========================================================= */
/*
  Teilt den Inhalt eines Kapitels automatisch in Übungen auf.
  Regel: Jede Karte beginnt eine neue Übung. Eine Auswertung schließt
  die Übung ab – sie steht also immer direkt bei der Aufgabe, zu der sie gehört.
*/
/* Rendert eine Frage entweder als Einfach- oder als Mehrfachauswahl */
function QBlock({ item, value, onChange }) {
  if (item.type === "one") {
    return (
      <Pick label={item.q} hint={item.hint} optional={item.optional} options={item.opts}
        value={value || ""} onChange={onChange} />
    );
  }
  const arr = value || [];
  const toggle = (o) => {
    const drin = arr.includes(o);
    if (!drin && item.max && arr.length >= item.max) return;
    onChange(drin ? arr.filter((x) => x !== o) : [...arr, o]);
  };
  return (
    <Chips label={item.q} hint={item.hint} optional={item.optional} options={item.opts}
      max={item.max} values={arr} onToggle={toggle} />
  );
}

const istIntro = (g) => g.some((ch) => ch.props && ch.props.intro);
  const total = groups.length;
  const idx = step < 0 ? total - 1 : Math.min(step, total - 1);
  const uebungen = groups.filter((g) => !istIntro(g)).length;
  const nummer = groups.slice(0, idx + 1).filter((g) => !istIntro(g)).length;
  const aktuellIntro = groups[idx] ? istIntro(groups[idx]) : false;

useEffect(() => { setStepCount(total); }, [total, chapter]);
  useEffect(() => { if (step !== idx) setStep(idx); }, [idx]);
  useEffect(() => { if (setStepIsIntro) setStepIsIntro(aktuellIntro); }, [aktuellIntro, chapter]);
  useEffect(() => {
    if (!setFirstTask) return;
    const i = groups.findIndex((g) => !istIntro(g));
    setFirstTask(i < 0 ? 0 : i);
  }, [groups, chapter]);

return (
    <>
      {total > 1 && (
        <div className="no-print" style={{ marginBottom: 20 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 9 }}>
            <span style={{
              fontFamily: SANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.6,
              textTransform: "uppercase", color: C.terra,
            }}>{aktuellIntro ? "Einführung" : `Übung ${nummer} von ${uebungen}`}</span>
            <div style={{ flex: 1, display: "flex", gap: 4 }}>
              {groups.map((_, i) => (
                <span key={i} aria-hidden="true" style={{
                  flex: 1, height: 4, borderRadius: 4,
                  background: i < idx ? C.terra : i === idx ? C.terra : C.taupe,
                  opacity: i > idx ? 1 : i === idx ? 1 : 0.45,
                }} />
              ))}
            </div>
          </div>
        </div>
      )}
      {groups[idx]}
    </>
  );
}

const [d, setD] = useState({
    profile: { a: "", b: "", ageA: "", ageB: "" },
    useMode: "",
    wheel: { a: {}, b: {} },
    wheelSet: { a: {}, b: {} },
    wheelNote: "",
    story: {},
    storyAttract: { a: [], b: [] },
    storyAdmire: { a: [], b: [] },
    storyGrown: [],
    milestones: [],
    special: { label: "", date: "" },
    affection: { a: [], b: [] },
    qtime: { a: [], b: [] },
    seenMiss: { a: [], b: [] },
    seenWish: { a: [], b: [] },
    seen: { a: {}, b: {} },
    comm: { a: {}, b: {} },
    reach: { a: {}, b: {} },
    conflict: { a: [], b: [] },
    pause: {},
    repair: "",
    repairFirst: "",
    perpetual: [],
    perpetualWhy: [],
    values: { a: [], b: [] },
    valuesTop: { a: [], b: [] },
    core: [],
    money: {},
    moneyTasks: {},
    moneyNote: "",
    close: { a: {}, b: {} },
    closeFree: { a: "", b: "" },
    closeShared: "",
    outside: { open: [], private: [] },
    outsideNote: "",
    balance: { a: {}, b: {} },
    balanceNote: "",
    phases: {},
    phaseStatus: {},
    future: {},
    futureAreas: [],
    vision: [],
    rituals: [],
    ritualMarks: {},
    weekNote: "",
    mood: { nah: 55, mittel: 30, fern: 15 },
    dateSeason: "fruehling",
    dateDone: [],
    promise: "",
    letters: { a: "", b: "" },
    letterDate: "",
    visited: {},
    lastScreen: null,
  });

/* ---------- Schriften ---------- */
  useEffect(() => {
    if (document.getElementById("wb-fonts")) return;
    const l = document.createElement("link");
    l.id = "wb-fonts";
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Poppins:wght@300;400;500;600&family=Dancing+Script:wght@600&display=swap";
    document.head.appendChild(l);
  }, []);

/* ---------- Laden ---------- */
  useEffect(() => {
    (async () => {
      try {
        const r = await store.get(STORAGE_KEY);
        if (r && r.value) setD((p) => ({ ...p, ...JSON.parse(r.value) }));
      } catch (e) { /* erster Besuch */ }
      setLoaded(true);
    })();
  }, []);

const up = useCallback((fn) => {
    setD((prev) => {
      const next = typeof fn === "function" ? fn(prev) : { ...prev, ...fn };
      persist(next);
      return next;
    });
  }, [persist]);

/* ---------- Namen ---------- */
  const names = useMemo(() => ({
    a: (d.profile.a || "").trim() || "Person A",
    b: (d.profile.b || "").trim() || "Person B",
  }), [d.profile.a, d.profile.b]);

const other = (k) => (k === "a" ? names.b : names.a);

/* ---------- Fortschritt ---------- */
  const chapterFilled = useCallback((id) => {
    const has = (o) => o && Object.values(o).some((v) => (typeof v === "string" ? v.trim() : (v || []).length));
    switch (id) {
      case 1: return has(d.story) || (d.milestones || []).length > 0 || has(d.storyAttract) || has(d.storyAdmire);
      case 2: return Object.keys(d.wheel.a).length > 0 || Object.keys(d.wheel.b).length > 0;
      case 3: return d.affection.a.length > 0 || d.affection.b.length > 0 || (d.qtime.a || []).length > 0 || (d.qtime.b || []).length > 0 || has(d.seen.a) || has(d.seen.b);
      case 4: return has(d.comm.a) || has(d.comm.b) || has(d.reach.a) || has(d.reach.b);
      case 5: return d.conflict.a.length > 0 || d.conflict.b.length > 0 || has(d.pause);
      case 6: return d.valuesTop.a.length > 0 || d.valuesTop.b.length > 0 || d.core.length > 0;
      case 7: return has(d.money);
      case 8: return has(d.close.a) || has(d.close.b) || has(d.closeFree) || !!d.closeShared.trim();
      case 9: return d.outside.open.length > 0 || d.outside.private.length > 0;
      case 10: return Object.keys(d.balance.a).length > 0 || Object.keys(d.balance.b).length > 0;
      case 11: return has(d.phaseStatus) || has(d.phases);
      case 12: return has(d.future) || d.futureAreas.length > 0 || d.vision.length > 0;
      case 13: return d.rituals.length > 0 || d.dateDone.length > 0 || Object.keys(d.ritualMarks).length > 0;
      case 14: return !!d.promise.trim();
      case 15: return d.rituals.length > 0 || d.core.length > 0 || d.dateDone.length > 0;
      case 16: return !!d.letters.a.trim() || !!d.letters.b.trim();
      default: return false;
    }
  }, [d]);

const doneCount = CH.filter((c) => chapterFilled(c.id)).length;
  const pct = Math.round((doneCount / CH.length) * 100);

useEffect(() => {
    if (typeof window === "undefined") return;
    window.scrollTo(0, 0);
    if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
  }, [screen]);

useEffect(() => {
    if (!loaded) return;
    const hit = [...MILESTONES].reverse().find((m) => pct >= m.at);
    if (hit && !seenMs.current[hit.at]) {
      seenMs.current[hit.at] = true;
      if (pct > 0) setMilestone(hit);
    }
  }, [pct, loaded]);

const who = tmp.who || "a";
  const setWho = (k) => setTmp((t) => ({ ...t, who: k }));

/* Ist in diesem Kapitel noch eine Person offen? */
  const offenePerson = (() => {
    if (typeof screen !== "number") return null;
    const m = CH.find((c) => c.id === screen);
    if (!m || m.mode !== "erst allein") return null;
    const fertig = passes[screen] || [];
    const andere = who === "a" ? "b" : "a";
    return fertig.includes(andere) ? null : andere;
  })();

/* Weiter: erst durch die Übungen, dann die zweite Person, dann das nächste Kapitel */
  const next = () => {
    if (screen === "welcome") return go("toc");
    if (screen === "toc") return go(1);
    if (typeof screen === "number") {
      if (step < stepCount - 1) { setStep(step + 1); return; }
      if (offenePerson) {
        setPasses((p) => ({ ...p, [screen]: [...(p[screen] || []), who] }));
        setWho(offenePerson);
        setStep(firstTask);
        return;
      }
      return go(screen >= CH.length ? "ende" : screen + 1);
    }
  };
  const prev = () => {
    if (typeof screen === "number" && step > 0) { setStep(step - 1); return; }
    if (screen === "toc") return go("welcome");
    if (screen === 1) return go("toc");
    if (screen === "ende") return go(CH.length, -1);
    if (typeof screen === "number") return go(screen - 1, -1);
  };

/* ---------- Kleine Helfer ---------- */
  const setIn = (path, key, val) => up((p) => ({ ...p, [path]: { ...p[path], [key]: val } }));
  const setWho2 = (path, who, key, val) => up((p) => ({
    ...p, [path]: { ...p[path], [who]: { ...p[path][who], [key]: val } },
  }));
  const toggleIn = (arr, val, max) => {
    const has = arr.includes(val);
    if (!has && max && arr.length >= max) return arr;
    return has ? arr.filter((x) => x !== val) : [...arr, val];
  };

/* Datumszeile für das Bild: nur das besondere Datum, sonst nichts */
  const dateLine = useCallback(() => {
    const sp = d.special || {};
    if (!sp.date) return "";
    const [y, m, day] = sp.date.split("-");
    if (!y || !m || !day) return "";
    const txt = new Date(Number(y), Number(m) - 1, Number(day))
      .toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" });
    return sp.label ? `${sp.label} ${txt}` : txt;
  }, [d.special]);

/* =======================================================
     UNSER BILD – direkt auf eine Zeichenfläche gemalt.
     Dadurch ist die Vorschau exakt das, was gespeichert wird.
  ======================================================= */
  const PW = 1080, PH = 1350;
  const SER = "Georgia, 'Times New Roman', serif";
  const SNS = "Helvetica, Arial, sans-serif";

/* Buchstaben einzeln setzen, damit Sperrung überall funktioniert */
  const spaced = (ctx, text, cx, y, spacing) => {
    const chars = Array.from(text);
    const w = chars.map((c) => ctx.measureText(c).width);
    const total = w.reduce((a, b) => a + b, 0) + spacing * (chars.length - 1);
    let x = cx - total / 2;
    const prev = ctx.textAlign;
    ctx.textAlign = "left";
    chars.forEach((c, i) => { ctx.fillText(c, x, y); x += w[i] + spacing; });
    ctx.textAlign = prev;
  };

const heart = (ctx, cx, cy, sc) => {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.scale(sc, sc);
    ctx.beginPath();
    ctx.moveTo(0, -4.2);
    ctx.bezierCurveTo(-1.6, -8.4, -8, -8.4, -8, -2.6);
    ctx.bezierCurveTo(-8, 2.4, -1.8, 6, 0, 8.4);
    ctx.bezierCurveTo(1.8, 6, 8, 2.4, 8, -2.6);
    ctx.bezierCurveTo(8, -8.4, 1.6, -8.4, 0, -4.2);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  };

const drawPoster = useCallback(async (cv) => {
    if (!cv) return;
    const ctx = cv.getContext("2d");
    if (!ctx) return;

const rcx = 540, rcy = 522, rR = 168, n = WHEEL_AREAS.length;
    const pt = (i, r) => {
      const ang = (Math.PI * 2 * i) / n - Math.PI / 2;
      return [rcx + Math.cos(ang) * r, rcy + Math.sin(ang) * r];
    };
    const hasA = WHEEL_AREAS.some((x) => d.wheel.a[x.k]);
    const hasB = WHEEL_AREAS.some((x) => d.wheel.b[x.k]);
    const llLabel = (k) => (AFFECTION.find((x) => x.k === k) || {}).label;
    const llA = (d.affection.a || []).map(llLabel).filter(Boolean);
    const llB = (d.affection.b || []).map(llLabel).filter(Boolean);
    const hatLL = llA.length > 0 || llB.length > 0;

const ms = (d.milestones || []).filter((x) => x.y)
      .sort((x, y) => x.y.localeCompare(y.y)).slice(0, 4);

const labelBottom = rcy + rR + 38 + 12 + 27;
    const legendY = labelBottom + 34;
    const llTitleY = legendY + 68;
    const llRowY = llTitleY + 46;
    const llRowH = 60;
    const afterLL = hatLL ? llRowY + llRowH : legendY;
    const msTitleY = afterLL + 58;
    const msRowY = msTitleY + 40;

/* Hintergrund und Rahmen */
    ctx.clearRect(0, 0, PW, PH);
    ctx.fillStyle = C.paper;
    ctx.fillRect(0, 0, PW, PH);
    ctx.strokeStyle = C.line;
    ctx.lineWidth = 1.5;
    ctx.strokeRect(26, 26, PW - 52, PH - 52);
    ctx.lineWidth = 0.8;
    ctx.globalAlpha = 0.55;
    ctx.strokeRect(38, 38, PW - 76, PH - 76);
    ctx.globalAlpha = 1;

/* Ecken */
    ctx.strokeStyle = C.terra;
    ctx.lineWidth = 2.5;
    ctx.lineCap = "round";
    ctx.globalAlpha = 0.7;
    [[26, 26, 1, 1], [PW - 26, 26, -1, 1], [26, PH - 26, 1, -1], [PW - 26, PH - 26, -1, -1]]
      .forEach(([x0, y0, sx, sy]) => {
        ctx.beginPath();
        ctx.moveTo(x0, y0 + sy * 4); ctx.lineTo(x0, y0 + sy * 46);
        ctx.moveTo(x0 + sx * 4, y0); ctx.lineTo(x0 + sx * 46, y0);
        ctx.stroke();
      });
    ctx.globalAlpha = 1;
    ctx.lineCap = "butt";

/* weicher Kreis hinter dem Rad */
    ctx.fillStyle = C.sand;
    ctx.globalAlpha = 0.5;
    ctx.beginPath(); ctx.arc(rcx, rcy, rR + 72, 0, Math.PI * 2); ctx.fill();
    ctx.globalAlpha = 0.8;
    ctx.strokeStyle = C.line; ctx.lineWidth = 1;
    ctx.setLineDash([2, 9]);
    ctx.beginPath(); ctx.arc(rcx, rcy, rR + 72, 0, Math.PI * 2); ctx.stroke();
    ctx.setLineDash([]);
    ctx.globalAlpha = 1;

/* Kopfzeile */
    ctx.textBaseline = "alphabetic";
    ctx.fillStyle = C.muted;
    ctx.font = `19px ${SNS}`;
    spaced(ctx, "UNSER BILD", rcx, 112, 7);

ctx.textAlign = "center";
    ctx.fillStyle = C.ink;
    ctx.font = `66px ${SER}`;
    ctx.fillText(`${names.a} & ${names.b}`, rcx, 196);

const dl = dateLine();
    if (dl) {
      ctx.fillStyle = C.muted;
      ctx.font = `21px ${SNS}`;
      ctx.fillText(dl, rcx, 239);
    }

/* Zierlinie mit Herz */
    ctx.strokeStyle = C.line; ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(392, 276); ctx.lineTo(500, 276);
    ctx.moveTo(580, 276); ctx.lineTo(688, 276);
    ctx.stroke();
    ctx.fillStyle = C.terra;
    heart(ctx, 540, 274, 1.5);

/* Rad: Netz */
    ctx.strokeStyle = C.line; ctx.lineWidth = 1.2;
    [2, 4, 6, 8, 10].forEach((lvl) => {
      ctx.beginPath();
      WHEEL_AREAS.forEach((_, i) => {
        const [x, y] = pt(i, (lvl / 10) * rR);
        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
      });
      ctx.closePath(); ctx.stroke();
    });
    WHEEL_AREAS.forEach((_, i) => {
      const [x, y] = pt(i, rR);
      ctx.beginPath(); ctx.moveTo(rcx, rcy); ctx.lineTo(x, y); ctx.stroke();
    });

const shape = (vals, col) => {
      ctx.beginPath();
      WHEEL_AREAS.forEach((it, i) => {
        const [x, y] = pt(i, ((vals[it.k] || 0) / 10) * rR);
        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
      });
      ctx.closePath();
      ctx.fillStyle = col; ctx.globalAlpha = 0.24; ctx.fill(); ctx.globalAlpha = 1;
      ctx.strokeStyle = col; ctx.lineWidth = 3; ctx.stroke();
    };
    if (hasB) shape(d.wheel.b, C.sage);
    if (hasA) shape(d.wheel.a, C.terra);

/* Radbeschriftung */
    ctx.fillStyle = C.ink;
    ctx.font = `20px ${SNS}`;
    WHEEL_AREAS.forEach((it, i) => {
      const [x, y] = pt(i, rR + 38);
      ctx.textAlign = Math.abs(x - rcx) < 6 ? "center" : x > rcx ? "left" : "right";
      const lines = wrapLabel(it.label);
      const isTop = i === 0, isBottom = i === n / 2;
      const base = y + (isTop ? -12 : isBottom ? 12 : 0);
      lines.forEach((ln, li) => {
        ctx.fillText(ln, x, base + (lines.length === 1 ? 7 : li === 0 ? -3 : 24));
      });
    });

/* Legende */
    if (hasA || hasB) {
      ctx.textAlign = "left";
      ctx.font = `21px ${SNS}`;
      ctx.fillStyle = C.terra; ctx.fillRect(392, legendY, 18, 18);
      ctx.fillStyle = C.body; ctx.fillText(names.a, 420, legendY + 15);
      ctx.fillStyle = C.sage; ctx.fillRect(580, legendY, 18, 18);
      ctx.fillStyle = C.body; ctx.fillText(names.b, 608, legendY + 15);
    }

const diamond = (x, y) => {
      ctx.save(); ctx.translate(x, y); ctx.rotate(Math.PI / 4);
      ctx.fillStyle = C.terra; ctx.globalAlpha = 0.75;
      ctx.fillRect(-4.5, -4.5, 9, 9);
      ctx.restore();
    };

/* Sprachen der Liebe */
    if (hatLL) {
      ctx.fillStyle = C.terra;
      ctx.font = `18px ${SNS}`;
      spaced(ctx, "SO ERREICHT MAN UNS", rcx, llTitleY, 5);
      diamond(232, llTitleY - 6);
      diamond(848, llTitleY - 6);

[[names.a, llA, C.terra], [names.b, llB, C.sage]].forEach(([nm, liste, col], i) => {
        if (!liste.length) return;
        const y = llRowY + i * 34;
        ctx.textAlign = "right";
        ctx.fillStyle = col;
        ctx.font = `500 22px ${SNS}`;
        ctx.fillText(nm, 470, y);
        ctx.textAlign = "left";
        ctx.fillStyle = C.ink;
        ctx.font = `italic 26px ${SER}`;
        ctx.fillText(liste.join("  ·  "), 500, y);
      });
      ctx.textAlign = "left";
    }

/* Zeitleiste */
    if (ms.length) {
      ctx.fillStyle = C.terra;
      ctx.font = `18px ${SNS}`;
      spaced(ctx, "UNSERE ZEITLEISTE", rcx, msTitleY, 5);
      diamond(232, msTitleY - 6);
      diamond(848, msTitleY - 6);

if (ms.length > 1) {
        ctx.strokeStyle = C.line; ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(352, msRowY - 8);
        ctx.lineTo(352, msRowY + (ms.length - 1) * 36 - 8);
        ctx.stroke();
      }
      ms.forEach((m, i) => {
        const y = msRowY + i * 36;
        ctx.textAlign = "right";
        ctx.fillStyle = C.terra; ctx.font = `28px ${SER}`;
        ctx.fillText(m.y, 318, y);
        ctx.beginPath(); ctx.arc(352, y - 8, 7, 0, Math.PI * 2);
        ctx.fillStyle = C.terra; ctx.fill();
        ctx.beginPath(); ctx.arc(352, y - 8, 12, 0, Math.PI * 2);
        ctx.strokeStyle = C.terra; ctx.lineWidth = 1; ctx.globalAlpha = 0.4; ctx.stroke(); ctx.globalAlpha = 1;
        ctx.textAlign = "left";
        ctx.fillStyle = C.ink; ctx.font = `23px ${SNS}`;
        ctx.fillText(m.t, 384, y);
      });
    } else if (d.core.length === 3) {
      ctx.textAlign = "center";
      ctx.fillStyle = C.ink; ctx.font = `40px ${SER}`;
      ctx.fillText(d.core.join("  ·  "), rcx, msTitleY + 20);
    }

/* Fußzeile */
    ctx.fillStyle = C.muted;
    ctx.font = `19px ${SNS}`;
    spaced(ctx, "WIR ZWEI · UNSER BEZIEHUNGSJOURNAL", rcx, PH - 62, 3);
    ctx.textAlign = "left";
  }, [d, names, dateLine]);

/*
    Die Zeichenfläche meldet sich selbst, sobald sie im Dokument steht –
    dann wird sofort gezeichnet. Kein Warten, kein Raten.
  */
  const posterMount = useCallback((el) => {
    posterRef.current = el;
    if (el) drawPoster(el);
  }, [drawPoster]);

/* Zusätzlich neu zeichnen, wenn sich Übung oder Kapitel ändert */
  useEffect(() => {
    if (screen !== 14 || !posterRef.current) return;
    drawPoster(posterRef.current);
  }, [screen, step, drawPoster]);

/* Aktives Kapitel im Streifen sichtbar halten */
  useEffect(() => {
    const rail = railRef.current;
    if (!rail || typeof screen !== "number") return;
    const btn = rail.querySelector('[data-ch="' + screen + '"]');
    if (btn && btn.scrollIntoView) {
      btn.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" });
    }
  }, [screen]);

/* Bei jedem Übungswechsel nach oben springen */
  useEffect(() => {
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "auto" });
  }, [screen, step]);

/*
    Speichern in drei Stufen, weil die App in einem eingebetteten Rahmen läuft
    und dort sowohl das Teilen-Menü als auch klassische Downloads blockiert sein können:
    1. Teilen-Menü (führt auf dem Handy zu „Bild sichern“)
    2. normaler Download
    3. das Bild einfach anzeigen – langes Antippen speichert es in die Galerie
  */
  const sharePoster = async () => {
    try {
      const { blob, dataUrl, fname } = await posterFile();
      if (blob && navigator.share && navigator.canShare) {
        try {
          const file = new File([blob], fname, { type: "image/png" });
          if (navigator.canShare({ files: [file] })) {
            await navigator.share({ files: [file] });
            setTmp((t) => ({ ...t, posterFail: false }));
            return;
          }
        } catch (err) {
          if (err && err.name === "AbortError") return;
        }
      }
      setTmp((t) => ({ ...t, posterImg: dataUrl, posterName: fname, posterFail: false }));
    } catch (e) {
      setTmp((t) => ({ ...t, posterFail: true }));
    }
  };

if (!loaded) {
    return (
      <div style={{ minHeight: "100vh", background: C.paper, display: "grid", placeItems: "center", padding: 24 }}>
        <p style={{ fontFamily: SERIF, fontSize: 26, color: C.ink, margin: 0 }}>Einen Moment …</p>
      </div>
    );
  }

/* =======================================================
     WILLKOMMEN
  ======================================================= */
  const resumeAt = (() => {
    const ls = d.lastScreen;
    if (!ls || ls === "welcome" || ls === "toc") return null;
    return ls;
  })();

<div style={{ maxWidth: 460, margin: "0 auto 46px" }}>
          <p style={{
            fontFamily: SERIF, fontSize: "clamp(21px, 5.2vw, 26px)", fontStyle: "italic",
            lineHeight: 1.5, color: C.ink, textAlign: "center", margin: "0 0 26px",
          }}>
            Man weiß erstaunlich genau, wie die andere Person ihren Kaffee trinkt. Und erstaunlich wenig darüber,
            was sie gerade beschäftigt.
          </p>
          <p style={{
            fontFamily: SANS, fontSize: 15.5, fontWeight: 300, lineHeight: 1.8,
            color: C.body, textAlign: "center", margin: 0,
          }}>
            Nicht aus Desinteresse. Es kommt nur nie der passende Moment. Dieses Journal stellt euch die Fragen,
            für die von allein kein Anlass entsteht – und sagt euch nach jeder Übung, was eure Antworten über euch verraten.
          </p>
        </div>

<Card>
          <H3>Was euch erwartet</H3>
          <div>
            {[
              ["16 Kapitel", "in kleine Übungen aufgeteilt, eine pro Bildschirm"],
              ["Rund 10 Minuten", "pro Kapitel – ihr könnt jederzeit aufhören und später weitermachen"],
              ["Auswertung sofort", "nach jeder Übung, nicht erst ganz am Ende"],
              ["Alles bleibt bei euch", "die Antworten werden nur auf diesem Gerät gespeichert"],
            ].map(([t, sub]) => (
              <div key={t} style={{ display: "flex", gap: 13, alignItems: "flex-start", marginBottom: 18 }}>
                <span aria-hidden="true" style={{
                  width: 7, height: 7, borderRadius: "50%", background: C.terra, marginTop: 9, flexShrink: 0,
                }} />
                <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 300, lineHeight: 1.65, color: C.body, margin: 0 }}>
                  <strong style={{ fontWeight: 600, color: C.ink }}>{t}</strong> – {sub}
                </p>
              </div>
            ))}
          </div>
          <P style={{ marginTop: 8, marginBottom: 0, fontSize: 14.5 }}>
            Kein Test, keine Punktzahl, keine richtige Antwort. Am Ende habt ihr ein Manifest, ein Bild zum Aufhängen –
            und ein paar Gespräche, die sonst nicht stattgefunden hätten.
          </P>
        </Card>

<Card tone="white">
          <H3>Unsere Empfehlung: ein Kapitel pro Abend</H3>
          <P>
            Ihr könntet das an einem Wochenende durcharbeiten. Wir raten davon ab. Die Fragen wirken nach,
            und dafür brauchen sie Abstand – ein Kapitel, dann darüber reden, dann schlafen.
          </P>
          <P style={{ marginBottom: 0 }}>
            In zwei bis drei Wochen seid ihr durch. Das klingt lang und ist es nicht: Es sind zehn Minuten am Abend,
            statt eines Abends, nach dem ihr beide erschöpft seid und die Hälfte wieder vergessen habt.
          </P>
        </Card>

<Card>
          <H3>Wer seid ihr?</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>Tragt eure Namen ein. Dann spricht euch das Journal persönlich an statt von „Person A“ und „Person B“. Das Alter ist freiwillig.</P>
          <div style={{ display: "flex", gap: 10, marginBottom: 14 }}>
            <TextInput label="Name" flex={2} value={d.profile.a} placeholder="z. B. Alex"
              onChange={(v) => setIn("profile", "a", v)} />
            <TextInput label="Alter" flex={1} numeric value={d.profile.ageA}
              onChange={(v) => setIn("profile", "ageA", v)} />
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <TextInput label="Name" flex={2} value={d.profile.b} placeholder="z. B. Sam"
              onChange={(v) => setIn("profile", "b", v)} />
            <TextInput label="Alter" flex={1} numeric value={d.profile.ageB}
              onChange={(v) => setIn("profile", "ageB", v)} />
          </div>
          {gap !== null && (
            <p style={{
              fontFamily: SANS, fontSize: 14.5, fontWeight: 300, lineHeight: 1.6, color: C.body,
              marginTop: 18, paddingTop: 16, borderTop: `1px solid ${C.line}`,
            }}>
              {gap === 0
                ? "Ihr seid gleich alt. Auch dann sind Lebensphasen selten identisch – die Kapitel funktionieren genauso."
                : `Zwischen euch liegen ${gap} ${gap === 1 ? "Jahr" : "Jahre"}. Drei Kapitel gehen darauf besonders ein. Der Rest gilt für jedes Paar.`}
            </p>
          )}
        </Card>

<Card>
          <H3>Wie möchtet ihr das Journal nutzen?</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>Das ändert nichts an den Inhalten – es hilft nur, realistisch zu planen.</P>
          {USE_MODES.map((m) => (
            <Choice key={m.k} label={m.label} note={m.note} box="radio"
              selected={d.useMode === m.k}
              onClick={() => up((p) => ({ ...p, useMode: p.useMode === m.k ? "" : m.k }))} />
          ))}
          {mode && (
            <p style={{ fontFamily: SANS, fontSize: 14, fontWeight: 300, lineHeight: 1.6, color: C.body, marginTop: 14, marginBottom: 0 }}>
              Gute Wahl. {mode.note}
            </p>
          )}
        </Card>

<Card tone="sage">
          <H3>Bevor ihr anfangt</H3>
          {[
            "Niemand muss alles beantworten. Fragen, die als freiwillig gekennzeichnet sind, dürft ihr überspringen – und alle anderen auch.",
            "Pausen sind ausdrücklich erlaubt. Alles speichert sich automatisch, ihr könnt jederzeit zurückkommen.",
            "Was hier geteilt wird, wird nicht gegen die andere Person verwendet. Das ist die einzige Regel, die wirklich zählt.",
          ].map((t) => (
            <div key={t} style={{ display: "flex", gap: 12, marginBottom: 12 }}>
              <span aria-hidden="true" style={{ color: C.sage, flexShrink: 0, marginTop: 2 }}>—</span>
              <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 300, lineHeight: 1.65, color: C.body, margin: 0 }}>{t}</p>
            </div>
          ))}
        </Card>

<Card tone="white">
          <H3>Wenn eine Antwort wehtut</H3>
          <P style={{ fontSize: 14.5 }}>
            Irgendwann passiert es. Eine:r von euch sagt etwas, das der andere so nicht auf dem Schirm hatte, und der Abend kippt kurz.
            Das heißt nicht, dass etwas schiefläuft. Meistens ist genau das die Stelle, an der es interessant wird.
          </P>
          <P style={{ fontSize: 14, marginBottom: 14 }}>Drei Sätze, die in so einem Moment mehr helfen als jede Erklärung:</P>
          {SOFT_LINES.map((line) => (
            <div key={line} style={{
              display: "flex", gap: 11, alignItems: "flex-start",
              background: C.sand, borderRadius: 10, padding: "12px 14px", marginBottom: 7,
            }}>
              <span aria-hidden="true" style={{ color: C.line, fontFamily: SERIF, fontSize: 21, lineHeight: 1, marginTop: 2 }}>„</span>
              <p style={{ fontFamily: SANS, fontSize: 14.5, fontWeight: 300, lineHeight: 1.55, color: C.ink, margin: 0 }}>{line}</p>
            </div>
          ))}
          <P style={{ marginTop: 16, marginBottom: 0 }}>
            Und eine Abmachung vorab: Wer etwas ausspricht, tut es nicht, um zu verletzen. Wer etwas hört, muss es nicht sofort einordnen.
            Ihr dürft ein Thema offen liegen lassen und morgen weitermachen.
          </P>
        </Card>

<Card>
          <H3>Wo dieses Journal aufhört</H3>
          <P style={{ marginBottom: 0 }}>
            Es funktioniert unter einer Bedingung: Beide machen freiwillig mit, und keiner von euch hat Angst vor der Reaktion des anderen.
            Wenn das gerade nicht so ist – wenn ihr in einer echten Krise steckt, etwas Größeres passiert ist oder ein Gespräch schon lange nicht mehr
            ohne Eskalation möglich war –, dann ist ein Workbook nicht das falsche, aber das zu kleine Werkzeug. Dafür gibt es Paarberatung,
            und das früh in Anspruch zu nehmen ist kein Scheitern, sondern schlicht effizienter.
          </P>
        </Card>

<div style={{ textAlign: "center", marginTop: 30, marginBottom: 26 }}>
          {resumeAt ? (
            <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
              <Btn onClick={() => go(resumeAt)}>
                {typeof resumeAt === "number" ? `Weiter bei Kapitel ${resumeAt}` : "Weitermachen"} <ChevronRight size={16} />
              </Btn>
              <Btn variant="ghost" onClick={() => go("toc")}>Zur Übersicht</Btn>
            </div>
          ) : (
            <Btn onClick={() => go("toc")}>Weiter zur Übersicht <ChevronRight size={16} /></Btn>
          )}
        </div>

{FinePrint()}
      </div>
    );
  };

const FinePrint = () => (
    <div style={{ borderTop: `1px solid ${C.line}`, paddingTop: 20, marginTop: 10 }}>
      <p style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 300, lineHeight: 1.65, color: C.muted, margin: "0 0 10px" }}>
        <Lock size={11} style={{ verticalAlign: "-1px", marginRight: 6 }} aria-hidden="true" />
        {PRIVACY}
      </p>
      <p style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 300, lineHeight: 1.65, color: C.muted, margin: 0 }}>
        {DISCLAIMER}
      </p>
    </div>
  );

/* =======================================================
     ÜBERSICHT
  ======================================================= */
  const Toc = () => (
    <div>
      <div style={{ textAlign: "center", marginBottom: 30 }}>
        <Kicker>Die Reise</Kicker>
        <H2>{d.profile.a ? `${names.a} und ${names.b}` : "Sechzehn Kapitel"}</H2>
        <p style={{
          fontFamily: SERIF, fontSize: 20, fontStyle: "italic", lineHeight: 1.5,
          color: C.body, maxWidth: 460, margin: "18px auto 0",
        }}>Ihr müsst nicht der Reihe nach vorgehen. Aber es lohnt sich.</p>
      </div>

{ProgressBar()}

<div style={{ textAlign: "center", marginBottom: 30 }}>
        <Btn onClick={() => go(resumeAt || 1)}>
          {resumeAt ? `Weiter bei Kapitel ${resumeAt}` : "Mit Kapitel 1 beginnen"} <ChevronRight size={16} />
        </Btn>
      </div>

{CH.map((c) => {
        const done = chapterFilled(c.id);
        return (
          <button key={c.id} type="button" onClick={() => go(c.id)}
            style={{
              display: "flex", gap: 15, alignItems: "flex-start", width: "100%", textAlign: "left",
              background: C.sand, border: "none", borderRadius: 14, cursor: "pointer",
              padding: "18px 18px", marginBottom: 9, minHeight: 44,
            }}>
            <span aria-hidden="true" style={{
              fontFamily: SERIF, fontSize: 21, fontWeight: 500, lineHeight: 1.15,
              color: done ? C.terra : C.muted, width: 24, flexShrink: 0,
            }}>{done ? "✓" : c.id}</span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, marginBottom: 5 }}>
                <span style={{ fontFamily: SANS, fontSize: 16, fontWeight: 500, color: C.ink }}>{c.title}</span>
                {c.ageGap && <Pill tone="gap">Altersunterschied</Pill>}
              </span>
              <span style={{ display: "block", fontFamily: SANS, fontSize: 13.5, fontWeight: 300, lineHeight: 1.5, color: C.body, marginBottom: 6 }}>
                {c.teaser}
              </span>
              <Pill tone={c.mode === "gemeinsam" ? "duo" : "solo"}>{c.mode}</Pill>
            </span>
            <ChevronRight size={17} color={C.line} style={{ flexShrink: 0, marginTop: 4 }} aria-hidden="true" />
          </button>
        );
      })}

<Card tone="white" style={{ marginTop: 22 }}>
        <H3>Zwei Hinweise, die den Unterschied machen</H3>
        <P>Fangt nicht an, wenn ihr müde seid oder gerade Streit hattet. Das klingt banal und entscheidet trotzdem darüber, ob die Antworten ehrlich oder ausweichend werden.</P>
        <P style={{ marginBottom: 0 }}>Und wenn eine Frage unangenehm ist, überspringt sie nicht sofort. Meistens ist genau die gemeint. Ihr dürft sie trotzdem liegen lassen und später zurückkommen.</P>
      </Card>

<div style={{ textAlign: "center", marginTop: 26, marginBottom: 26 }}>
        <Btn onClick={() => go(resumeAt || 1)}>
          {resumeAt ? `Weiter bei Kapitel ${resumeAt}` : "Mit Kapitel 1 beginnen"} <ChevronRight size={16} />
        </Btn>
      </div>
      {FinePrint()}
    </div>
  );

const ProgressBar = () => (
    <div style={{ marginBottom: 26 }}>
      <div style={{
        display: "flex", justifyContent: "space-between", fontFamily: SANS, fontSize: 12,
        letterSpacing: 1.2, textTransform: "uppercase", color: C.muted, marginBottom: 8,
      }}>
        <span>{doneCount} von {CH.length} Kapiteln begonnen</span>
        <span>{pct} %</span>
      </div>
      <div role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100}
        style={{ height: 5, background: C.taupe, borderRadius: 4, overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${pct}%`, background: C.terra, borderRadius: 4, transition: "width .35s" }} />
      </div>
    </div>
  );

/* =======================================================
     KAPITEL 1 – UNSERE GESCHICHTE
  ======================================================= */
  const Ch1 = () => {
    const ms = d.milestones || [];
    const msSorted = [...ms].sort((x, y) => (x.y || "9999").localeCompare(y.y || "9999"));
    const norm = (v) => (v && !Array.isArray(v) ? v : { a: [], b: [] });
    const admire = norm(d.storyAdmire);
    const attract = norm(d.storyAttract);
    const bothAdmire = (admire.a || []).length > 0 && (admire.b || []).length > 0;
    const picked = [
      d.story.kennen, d.story.ernst,
      (attract.a || []).length + (attract.b || []).length,
      (admire.a || []).length + (admire.b || []).length,
      (d.storyGrown || []).length, ms.length,
    ].filter(Boolean).length;

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Jedes Paar hat eine Kurzfassung seiner Geschichte – die, die man Fremden erzählt. Rund, knapp, ein bisschen glattgeschliffen.</>
          <>Hier geht es um die längere Fassung. Die mit den Umwegen und dem Moment, in dem es auch anders hätte laufen können.</>
        </Lead>

<Card>
          <Pick label="Wie habt ihr euch kennengelernt?" options={STORY_HOW}
            value={d.story.kennen} onChange={(v) => setIn("story", "kennen", v)} />
          {d.story.kennen === "Ganz anders" && (
            <Field label="Dann erzählt kurz, wie es war" rows={3}
              placeholder="Zwei Sätze reichen."
              value={d.story.kennenText} onChange={(v) => setIn("story", "kennenText", v)} />
          )}
          <Pick label="Wann wurde euch klar, dass es ernst wird?" options={STORY_REAL}
            hint="Es gibt selten einen großen Moment. Meistens ist es ein unspektakulärer."
            value={d.story.ernst} onChange={(v) => setIn("story", "ernst", v)} />
          {d.story.ernst === "Ein anderer Moment" && (
            <Field label="Welcher Moment war es?" rows={3}
              placeholder="Auch ein ganz kleiner zählt."
              value={d.story.ernstText} onChange={(v) => setIn("story", "ernstText", v)} />
          )}
        </Card>

<Card tone="white">
          <H3>Euer besonderes Datum</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>
            Ein Datum, das für euch zählt. Es erscheint später oben auf eurem Bild in Kapitel 14.
          </P>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 14 }}>
            {SPECIAL_LABELS.map((l) => {
              const on = (d.special || {}).label === l;
              return (
                <button key={l} type="button" aria-pressed={on}
                  onClick={() => setIn("special", "label", on ? "" : l)}
                  style={{
                    padding: "10px 15px", minHeight: 44, cursor: "pointer", borderRadius: 24,
                    border: `1px solid ${on ? C.terra : C.line}`,
                    background: on ? C.terra : C.white,
                    color: on ? C.white : C.body,
                    fontFamily: SANS, fontSize: 13.5, fontWeight: on ? 500 : 300,
                  }}>{l}</button>
              );
            })}
          </div>
          <input type="date" value={(d.special || {}).date || ""}
            aria-label="Besonderes Datum"
            onChange={(e) => setIn("special", "date", e.target.value)}
            style={{
              width: "100%", boxSizing: "border-box", fontFamily: SANS, fontSize: 15.5,
              fontWeight: 300, color: C.ink, background: C.white,
              border: `1px solid ${C.line}`, borderRadius: 10, padding: "13px 15px",
              outline: "none", minHeight: 44,
            }} />
          {(d.special || {}).date && (
            <p style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, color: C.muted, margin: "12px 0 0", lineHeight: 1.5 }}>
              Auf eurem Bild steht dann: <span style={{ color: C.ink }}>{dateLine()}</span>
            </p>
          )}
        </Card>

<Card tone="white">
          <H3>Unsere Zeitleiste</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>
            Tippt an, was zu euch gehört, und tragt das Jahr ein. Am Ende habt ihr eure Geschichte auf einen Blick –
            und meistens fällt dabei auf, wie viel in kurzer Zeit passiert ist.
          </P>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: ms.length ? 22 : 0 }}>
            {MILESTONE_IDEAS.map((t) => {
              const on = ms.some((x) => x.t === t);
              return (
                <button key={t} type="button" aria-pressed={on} onClick={() => addMs(t)}
                  style={{
                    padding: "10px 15px", minHeight: 44, cursor: "pointer", borderRadius: 24,
                    border: `1px solid ${on ? C.sage : C.line}`,
                    background: on ? C.sage : C.white,
                    color: on ? C.white : C.body,
                    fontFamily: SANS, fontSize: 13.5, fontWeight: on ? 500 : 300,
                  }}>{t}</button>
              );
            })}
          </div>

{ms.length > 0 && (
            <div style={{ position: "relative", paddingLeft: 26, marginTop: 4 }}>
              <span aria-hidden="true" style={{
                position: "absolute", left: 5, top: 14, bottom: 14, width: 2, background: C.line,
              }} />
              {ms.map((x, i) => (
                <div key={x.t} style={{
                  position: "relative", display: "flex", alignItems: "center", gap: 12,
                  padding: "11px 0", borderTop: i === 0 ? "none" : `1px solid ${C.line}`,
                }}>
                  <span aria-hidden="true" style={{
                    position: "absolute", left: -26, width: 12, height: 12, borderRadius: "50%",
                    background: x.y ? C.terra : C.taupe, border: `2px solid ${C.paper}`,
                  }} />
                  <span style={{ flex: 1, minWidth: 0, fontFamily: SANS, fontSize: 14.5, fontWeight: 400, color: C.ink, lineHeight: 1.4 }}>{x.t}</span>
                  <input value={x.y || ""} placeholder="Jahr" inputMode="numeric" aria-label={`Jahr für ${x.t}`}
                    onChange={(e) => setYear(x.t, e.target.value.replace(/[^0-9]/g, "").slice(0, 4))}
                    onBlur={sortiereMeilensteine}
                    style={{
                      width: 74, flexShrink: 0, boxSizing: "border-box", textAlign: "center",
                      fontFamily: SANS, fontSize: 14.5, fontWeight: 400, color: C.ink, background: C.sand,
                      border: `1px solid ${C.line}`, borderRadius: 9, padding: "10px 6px", outline: "none", minHeight: 44,
                    }} />
                </div>
              ))}
              <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 12, paddingTop: 14 }}>
                <span aria-hidden="true" style={{
                  position: "absolute", left: -26, width: 12, height: 12, borderRadius: "50%",
                  background: C.paper, border: `2px solid ${C.terra}`,
                }} />
                <span style={{ fontFamily: SERIF, fontSize: 20, fontStyle: "italic", color: C.terra }}>heute</span>
                <span style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, color: C.muted, lineHeight: 1.5 }}>
                  – und hier fängt der Rest an
                </span>
              </div>
            </div>
          )}
        </Card>

<Card>
          <H3>Kurz getrennt: was jede:r für sich sieht</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>
            Bei diesen beiden Fragen kommt selten dasselbe heraus – und das ist der interessante Teil.
            Schaltet oben um und antwortet nacheinander, bevor ihr vergleicht.
          </P>
          <WhoTabs who={who} setWho={setWho} names={names}
            counts={{ a: (admire.a || []).length + (attract.a || []).length, b: (admire.b || []).length + (attract.b || []).length }} />
          <Chips label={`Was hat ${names[who]} am Anfang an ${other(who)} angezogen?`} max={3}
            hint="Nicht nur das Offensichtliche. Oft war es eine Kleinigkeit."
            options={STORY_ATTRACT} values={attract[who] || []}
            onToggle={(o) => up((p) => ({ ...p, storyAttract: { ...attract, [who]: toggleIn(attract[who] || [], o, 3) } }))} />
          <Chips label={`Was bewundert ${names[who]} heute an ${other(who)}?`} max={3}
            hint="Heute, nicht damals. Das ist oft etwas anderes geworden."
            options={STORY_ADMIRE} values={admire[who] || []}
            onToggle={(o) => up((p) => ({ ...p, storyAdmire: { ...admire, [who]: toggleIn(admire[who] || [], o, 3) } }))} />
        </Card>

{bothAdmire && (
          <Result title="Was ihr aneinander seht">
            <P>
              {names.a} bewundert an {names.b}: <strong style={{ fontWeight: 600, color: C.ink }}>{admire.a.join(", ")}</strong>.
            </P>
            <P>
              {names.b} bewundert an {names.a}: <strong style={{ fontWeight: 600, color: C.ink }}>{admire.b.join(", ")}</strong>.
            </P>
            <P style={{ marginBottom: 0 }}>
              Lest euch das gegenseitig einmal laut vor. Die meisten Menschen wissen erstaunlich genau, wofür sie kritisiert werden,
              und erstaunlich wenig darüber, wofür sie bewundert werden.
            </P>
          </Result>
        )}

<Card>
          <Chips label="Was ist seit dem Anfang gewachsen?" max={3}
            hint="Diese Frage gilt euch beiden – hier reicht eine gemeinsame Antwort."
            options={STORY_GROWN} values={d.storyGrown || []}
            onToggle={(o) => up((p) => ({ ...p, storyGrown: toggleIn(p.storyGrown || [], o, 3) }))} />
          <Pick label="Welche Art von Erinnerung beschreibt euch am besten?" options={MEMORY_KINDS}
            hint="Nicht die schönste – die typischste. Sucht euch die Schublade aus, dann kommt der Rest von allein."
            value={d.story.erinnerungArt} onChange={(v) => setIn("story", "erinnerungArt", v)} />
          {d.story.erinnerungArt && (
            <Field label="Und welche genau?" rows={3} optional
              hint={MEMORY_HINTS[d.story.erinnerungArt] || ""}
              placeholder="Zwei, drei Sätze reichen völlig."
              value={d.story.erinnerung} onChange={(v) => setIn("story", "erinnerung", v)} />
          )}
        </Card>

{picked < 3 && (
          <Pending>Bearbeitet drei der Aufgaben – dann steht hier, worauf ihr beim Vergleich eurer Erinnerungen achten könnt.</Pending>
        )}

{picked >= 3 && (
          <Result title="Was euch dieses Kapitel gezeigt hat">
            {msSorted.filter((x) => x.y).length >= 2 && (
              <P>
                Eure Zeitleiste reicht von <strong style={{ fontWeight: 600, color: C.ink }}>{msSorted.filter((x) => x.y)[0].y}</strong> bis
                {" "}<strong style={{ fontWeight: 600, color: C.ink }}>{msSorted.filter((x) => x.y).slice(-1)[0].y}</strong>.
                Schaut sie euch einmal zusammen an – vor allem die Jahre, in denen mehrere Punkte dicht beieinander liegen.
              </P>
            )}
            <P>Wenn ihr das zu zweit ausgefüllt habt, ist euch vermutlich aufgefallen: An mindestens einer Stelle erinnert ihr euch unterschiedlich. Das ist normal und kein Streitpunkt – zwei Menschen erleben denselben Moment aus zwei Perspektiven, und die eigene Erinnerung fühlt sich immer wie die richtige an.</P>
            <P style={{ marginBottom: 0 }}>Interessanter als die Frage, wer recht hat, ist diese: Was sagt es über euch, dass jede:r sich ausgerechnet an <em>diesen</em> Teil erinnert?</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 2 – WO WIR GERADE STEHEN
  ======================================================= */
  const Ch2 = () => {
    const mine = d.wheel[who] || {};
    /* „bestätigt“ heißt: bewusst angefasst – auch wenn der Wert bei 5 bleibt */
    const set = (w) => d.wheelSet && d.wheelSet[w] ? d.wheelSet[w] : {};
    const okd = (w, k) => !!(set(w)[k] || (d.wheel[w] || {})[k]);
    const doneA = WHEEL_AREAS.filter((x) => okd("a", x.k)).length;
    const doneB = WHEEL_AREAS.filter((x) => okd("b", x.k)).length;
    const doneMine = WHEEL_AREAS.filter((x) => okd(who, x.k)).length;
    const offene = WHEEL_AREAS.filter((x) => !okd(who, x.k));
    const full = doneMine === WHEEL_AREAS.length;
    const bothFull = doneA === WHEEL_AREAS.length && doneB === WHEEL_AREAS.length;

/* Kennzahlen für eine Person – so lässt sich beides nebeneinander zeigen */
    const read = (w) => {
      const v = WHEEL_AREAS.map((x) => ({ ...x, v: okd(w, x.k) ? ((d.wheel[w] || {})[x.k] || 5) : 0 })).filter((x) => x.v > 0);
      if (!v.length) return null;
      const lo = [...v].sort((x, y) => x.v - y.v)[0];
      const hi = [...v].sort((x, y) => y.v - x.v)[0];
      return {
        avg: v.reduce((s2, x) => s2 + x.v, 0) / v.length,
        low: lo, high: hi, spread: hi.v - lo.v,
        full: v.length === WHEEL_AREAS.length,
      };
    };
    const rA = read("a"), rB = read("b");
    const rMine = read(who);
    const avg = rMine ? rMine.avg : 0;
    const low = rMine ? rMine.low : null;
    const high = rMine ? rMine.high : null;
    const spread = rMine ? rMine.spread : 0;

const gaps = bothFull
      ? WHEEL_AREAS.map((x) => ({ label: x.label, diff: Math.abs(d.wheel.a[x.k] - d.wheel.b[x.k]) }))
          .sort((x, y) => y.diff - x.diff)
      : [];

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Eine Beziehung hat mehrere Bereiche, und die stehen selten alle gleich gut da. Meistens läuft das meiste gut – und an einer Stelle hakt es seit Monaten, ohne dass es je jemand ausspricht.</>
          <>Gleich schätzt ihr acht dieser Bereiche einzeln ein, jede:r für sich. Danach seht ihr, wo eure Einschätzungen zusammenpassen und wo nicht.</>
        </Lead>

<Card tone="white" intro style={{ padding: "24px 14px 18px" }}>
          <div style={{ textAlign: "center", marginBottom: 6 }}>
            <Kicker>So sähe es aus, wenn überall alles rundläuft</Kicker>
          </div>
          <Radar a={{}} b={{}} names={names} ideal />
          <p style={{ fontFamily: SANS, fontSize: 13.5, fontWeight: 300, lineHeight: 1.6, color: C.muted, textAlign: "center", margin: "10px auto 0", maxWidth: 400 }}>
            Ein Beispiel, kein Ziel. Kaum ein Paar füllt alle acht Bereiche gleich weit aus – und das muss auch nicht sein.
            Interessant wird es an den Stellen, die deutlich zurückbleiben.
          </p>
        </Card>

<Card>
          <WhoTabs who={who} setWho={setWho} names={names} counts={{ a: `${doneA}/8`, b: `${doneB}/8` }} />
          <H3>{names[who]}: Wie erlebst du diese acht Bereiche?</H3>
          <P style={{ fontSize: 14, marginBottom: 22 }}>
            Zehn heißt: läuft richtig gut. Eins heißt: da liegt etwas. Schätzt ein, wo ihr heute steht – nicht, wo ihr gern wärt.
            Jeder Regler startet in der Mitte; auch die Fünf zählt, ihr müsst sie nur einmal bestätigen.
          </P>
          {WHEEL_AREAS.map((x) => (
            <Slider key={x.k} label={x.label} desc={x.desc} value={mine[x.k] || 5}
              offen={!okd(who, x.k)}
              onChange={(v) => setWheel(x.k, v)} />
          ))}
          {offene.length > 0 && (
            <div style={{
              background: C.terraSoft, border: `1px solid ${C.terra}`, borderRadius: 12,
              padding: "16px 18px", marginTop: 6,
            }}>
              <p style={{ fontFamily: SANS, fontSize: 14, fontWeight: 500, color: C.ink, margin: "0 0 6px" }}>
                Noch {offene.length} von 8 offen
              </p>
              <p style={{ fontFamily: SANS, fontSize: 13.5, fontWeight: 300, lineHeight: 1.6, color: C.body, margin: "0 0 14px" }}>
                Diese Bereiche stehen noch unberührt bei 5: {offene.map((x) => x.label).join(", ")}.
                Wenn die Fünf für dich passt, bestätige sie – sonst zieht den Regler.
              </p>
              <Btn small onClick={bestaetigeRest}>Die übrigen bei 5 bestätigen</Btn>
            </div>
          )}
        </Card>

{!full && (
          <Pending status={[
            { name: `${names.a} (${doneA}/8)`, done: doneA === WHEEL_AREAS.length },
            { name: `${names.b} (${doneB}/8)`, done: doneB === WHEEL_AREAS.length },
          ]}>Sobald alle acht Bereiche bestätigt sind, erscheint hier euer Rad mit der Auswertung.</Pending>
        )}

{full && (
          <Card tone="white" style={{ padding: "26px 14px 20px" }}>
            <div style={{ textAlign: "center", marginBottom: 6 }}>
              <Kicker>{bothFull ? "Eure beiden Räder" : `Das Rad von ${names[who]}`}</Kicker>
            </div>
            <Radar a={d.wheel.a} b={d.wheel.b} names={names} showB={doneB === WHEEL_AREAS.length} />
            <p style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, color: C.muted, textAlign: "center", margin: "14px 0 0" }}>
              {bothFull
                ? "Achtet weniger auf die Größe als auf die Stellen, an denen die beiden Formen auseinanderlaufen."
                : `Fertig. Gebt jetzt weiter – das zweite Rad erscheint automatisch.`}
            </p>
          </Card>
        )}

{full && (
          <Result title={bothFull ? "Was eure Räder einzeln zeigen" : `Was das Rad von ${names[who]} zeigt`}>
            {bothFull ? (
              <>
                <P>
                  <strong style={{ fontWeight: 600, color: C.ink }}>{names.a}</strong> liegt im Schnitt bei {rA.avg.toFixed(1)} –
                  am stärksten {rA.high.label}, am schwächsten {rA.low.label}.
                </P>
                <P>
                  <strong style={{ fontWeight: 600, color: C.ink }}>{names.b}</strong> liegt im Schnitt bei {rB.avg.toFixed(1)} –
                  am stärksten {rB.high.label}, am schwächsten {rB.low.label}.
                </P>
              </>
            ) : (
              <P>
                Der Schnitt liegt bei <strong style={{ fontWeight: 600, color: C.ink }}>{avg.toFixed(1)}</strong>.
                {" "}Am stärksten erlebst du <strong style={{ fontWeight: 600, color: C.ink }}>{high.label}</strong>, am schwächsten <strong style={{ fontWeight: 600, color: C.ink }}>{low.label}</strong>.
              </P>
            )}
            <P>
              {spread >= 4
                ? "Zwischen dem stärksten und dem schwächsten Bereich liegen mehrere Punkte. Genau das ist die Delle im Rad – es läuft bei euch nicht unrund, weil zu wenig da wäre, sondern weil es ungleich verteilt ist."
                : spread >= 2
                ? "Euer Rad läuft ziemlich rund. Die Unterschiede sind da, aber keiner fällt weit heraus. Das ist deutlich angenehmer als ein Rad mit lauter Neunen und einer Drei."
                : "Euer Rad ist auffällig gleichmäßig. Das heißt auch: Es gibt keine einzelne Baustelle, an der ihr ansetzen könnt. Wenn ihr etwas verändern wollt, geht es hier ums Gesamtniveau."}
            </P>
            <div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px" }}>
              <Kicker color={C.ink}>Wo ich anfangen würde: {low.label}</Kicker>
              <P style={{ marginBottom: 0 }}>{low.help}</P>
            </div>
          </Result>
        )}

{bothFull && (() => {
          const avgA = WHEEL_AREAS.reduce((x, y) => x + d.wheel.a[y.k], 0) / WHEEL_AREAS.length;
          const avgB = WHEEL_AREAS.reduce((x, y) => x + d.wheel.b[y.k], 0) / WHEEL_AREAS.length;
          const together = WHEEL_AREAS
            .map((x) => ({ label: x.label, help: x.help, sum: d.wheel.a[x.k] + d.wheel.b[x.k] }))
            .sort((x, y) => x.sum - y.sum);
          const weakest = together[0];
          const strongest = together[together.length - 1];
          const agree = gaps.filter((g) => g.diff <= 1).length;
          return (
            <Result title="Was eure beiden Räder zusammen zeigen">
              <P>
                Jetzt liegen zwei Formen übereinander. Das Interessante daran ist nicht, wessen Zahlen höher sind –
                sondern wo ihr denselben Alltag unterschiedlich erlebt.
              </P>

<div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px", marginBottom: 18 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                  <span style={{ fontFamily: SANS, fontSize: 14, color: C.body }}>{names.a}</span>
                  <span style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 500, color: C.terra }}>{avgA.toFixed(1)}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontFamily: SANS, fontSize: 14, color: C.body }}>{names.b}</span>
                  <span style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 500, color: C.sage }}>{avgB.toFixed(1)}</span>
                </div>
                <p style={{ fontFamily: SANS, fontSize: 13.5, fontWeight: 300, lineHeight: 1.6, color: C.muted, margin: "12px 0 0" }}>
                  {Math.abs(avgA - avgB) < 0.8
                    ? "Eure Gesamtbilder liegen dicht beieinander. Ihr schaut ähnlich auf eure Beziehung."
                    : `${avgA > avgB ? names.a : names.b} sieht das Ganze insgesamt etwas positiver. Das ist häufig – und meistens erlebt die Person mit den niedrigeren Zahlen einfach mehr von dem, was gerade fehlt.`}
                </p>
              </div>

<div style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: C.ink, marginBottom: 10 }}>
                Wo eure Formen auseinandergehen
              </div>
              {gaps.slice(0, 3).map((g) => (
                <div key={g.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "11px 0", borderBottom: `1px solid ${C.line}` }}>
                  <span style={{ fontFamily: SANS, fontSize: 14.5, color: C.ink }}>{g.label}</span>
                  <span style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, color: g.diff >= 3 ? C.terra : C.muted }}>
                    {g.diff === 0 ? "gleich" : `${g.diff} Punkte auseinander`}
                  </span>
                </div>
              ))}
              <P style={{ marginTop: 16 }}>
                {gaps[0].diff >= 3
                  ? <>Bei <strong style={{ fontWeight: 600, color: C.ink }}>{gaps[0].label}</strong> liegt ihr am weitesten auseinander. Das ist kein Widerspruch, den eine:r von euch auflösen muss. Ihr erlebt denselben Alltag verschieden – und beide Wahrnehmungen sind gültig. Fragt euch gegenseitig: Woran machst du deine Zahl fest? Meistens fällt beim Antworten ein konkreter Moment, den die andere Person gar nicht auf dem Schirm hatte.</>
                  : gaps[0].diff === 2
                  ? <>Die größte Abweichung liegt bei <strong style={{ fontWeight: 600, color: C.ink }}>{gaps[0].label}</strong>, und selbst die ist klein. Ihr habt ein ziemlich ähnliches Bild von eurer Beziehung – das ist seltener, als man denkt.</>
                  : "Ihr liegt überall dicht beieinander. Das heißt: Ihr redet offenbar genug miteinander, um euch nicht auseinanderzuleben. Nutzt das und geht ein Thema an, bevor es eins wird."}
              </P>
              <P>
                Bei {agree} von acht Bereichen seid ihr euch praktisch einig
                {agree >= 6 ? " – eine ungewöhnlich hohe Übereinstimmung." : agree >= 3 ? ". Das ist ein normaler Wert." : ". Das ist wenig, und genau deshalb lohnt sich dieses Gespräch."}
              </P>

<div style={{ background: C.sageSoft, borderRadius: 12, padding: "16px 18px" }}>
                <Kicker color={C.sage}>Euer gemeinsamer Startpunkt</Kicker>
                <P style={{ marginBottom: 8 }}>
                  Zusammengerechnet steht <strong style={{ fontWeight: 600, color: C.ink }}>{strongest.label}</strong> bei
                  euch am stärksten da – das ist eure Reserve, wenn es woanders hakt.
                  {" "}Am schwächsten ist <strong style={{ fontWeight: 600, color: C.ink }}>{weakest.label}</strong>. Dort
                  würde ich anfangen, weil es beide betrifft und nicht nur eine:n von euch.
                </P>
                <P style={{ marginBottom: 0 }}>{weakest.help}</P>
              </div>
            </Result>
          );
        })()}

{(doneA < WHEEL_AREAS.length || doneB < WHEEL_AREAS.length) && (
          <Pending status={[
            { name: `${names.a} (${doneA}/${WHEEL_AREAS.length})`, done: doneA === WHEEL_AREAS.length },
            { name: `${names.b} (${doneB}/${WHEEL_AREAS.length})`, done: doneB === WHEEL_AREAS.length },
          ]}>
            Sobald beide alle acht Regler eingestellt haben, liegen hier zwei Formen übereinander –
            mit einer Auswertung dazu, wo ihr euren Alltag unterschiedlich erlebt und wo ihr gemeinsam anfangen könnt.
          </Pending>
        )}

{(doneA > 0 || doneB > 0) && (
          <Field label="Was fällt euch dazu ein?" optional rows={3}
            hint="Besonders zu dem Bereich, bei dem eure Zahlen am weitesten auseinanderliegen."
            value={d.wheelNote} onChange={(v) => up((p) => ({ ...p, wheelNote: v }))} />
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 3 – ICH SEHE DICH
  ======================================================= */
  const Ch3 = () => {
    const picks = d.affection[who] || [];
    const bothPicked = d.affection.a.length === 2 && d.affection.b.length === 2;
    const shared = bothPicked ? d.affection.a.filter((x) => d.affection.b.includes(x)) : [];
    const lab = (k) => (AFFECTION.find((x) => x.k === k) || {}).label;

const qtA = d.qtime.a || [], qtB = d.qtime.b || [];
    const bothQt = qtA.length === 4 && qtB.length === 4;
    const qtLab = (k) => (QUALITY_TIME.find((x) => x.k === k) || {}).label;
    const qtShared = bothQt ? qtA.filter((x) => qtB.includes(x)) : [];
    const qtOnlyA = bothQt ? qtA.filter((x) => !qtB.includes(x)) : [];
    const qtOnlyB = bothQt ? qtB.filter((x) => !qtA.includes(x)) : [];
    const qtOnlyOther = [...qtOnlyA, ...qtOnlyB];

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Der eine räumt die Küche auf und meint damit: Ich hab dich lieb. Die andere wartet auf einen Satz, der genau das sagt – und hört ihn nicht.</>
          <>Beide geben. Nur in unterschiedlichen Währungen. Deshalb kann sich jemand ungeliebt fühlen, obwohl sich die andere Seite echt Mühe gibt.</>
        </Lead>

<Card>
          <H3>Was kommt bei dir am besten an, {names[who]}?</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>
            Wählt genau zwei aus. Nicht die, die am nettesten klingen – die, bei denen ihr merkt: Ja, genau das fehlt mir, wenn es fehlt.
            {picks.length === 2 && " Noch einmal tippen, um die Auswahl zu ändern."}
          </P>
          {AFFECTION.map((af) => (
            <Choice key={af.k} label={af.label} note={af.desc}
              selected={picks.includes(af.k)}
              disabled={picks.length >= 2 && !picks.includes(af.k)}
              onClick={() => up((p) => ({
                ...p, affection: { ...p.affection, [who]: toggleIn(p.affection[who], af.k, 2) },
              }))} />
          ))}
        </Card>

{(d.affection.a.length > 0 || d.affection.b.length > 0) && (
          <Card tone="white">
            <H3>Was das konkret füreinander heißt</H3>
            <P style={{ fontSize: 14, marginBottom: 20 }}>
              Links steht, was die eine Seite braucht – und damit gleichzeitig, worauf die andere achten kann. Beides gilt gleichzeitig.
            </P>
            {["a", "b"].map((k) => {
              const sel = d.affection[k] || [];
              if (!sel.length) return null;
              return (
                <div key={k} style={{
                  background: k === "a" ? C.terraSoft : C.sageSoft,
                  borderRadius: 12, padding: "18px 18px 6px", marginBottom: 12,
                }}>
                  <Kicker color={C.ink}>Damit erreichst du {names[k]}</Kicker>
                  {sel.map((code) => {
                    const af = AFFECTION.find((x) => x.k === code);
                    return (
                      <div key={code} style={{ marginBottom: 14 }}>
                        <div style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 500, color: C.ink, marginBottom: 5 }}>{af.label}</div>
                        <P style={{ marginBottom: 5 }}>{af.give}</P>
                        <P style={{ fontSize: 14, color: C.muted, margin: 0 }}>{af.miss}</P>
                      </div>
                    );
                  })}
                </div>
              );
            })}
            {(!d.affection.a.length || !d.affection.b.length) && (
              <P style={{ fontSize: 14, marginBottom: 0, fontStyle: "italic", color: C.muted }}>
                Sobald auch {d.affection.a.length ? names.b : names.a} gewählt hat, steht hier beides nebeneinander.
              </P>
            )}
          </Card>
        )}

<Card tone="white">
          <Kicker>Aufgabe – unsere gemeinsame Zeit</Kicker>
          <H3>Was bedeutet für {names[who]} „Qualitätszeit“?</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>
            Wählt die vier Bilder aus, die zeigen, wie ihr am liebsten Zeit miteinander verbringt.
            Es gibt kein richtig oder falsch – es geht um das, was sich für euch gut anfühlt.
            {(d.qtime[who] || []).length < 4 && ` Noch ${4 - (d.qtime[who] || []).length} frei.`}
          </P>
          <PhotoGrid options={QUALITY_TIME} images={QT_IMG} max={4}
            values={d.qtime[who] || []}
            onToggle={(k) => up((p) => ({ ...p, qtime: { ...p.qtime, [who]: toggleIn(p.qtime[who] || [], k, 4) } }))} />
        </Card>

{bothQt && (
          <Result title="Eure gemeinsame Zeit im Vergleich">
            {qtShared.length > 0 ? (
              <>
                <P>Bei {qtShared.length === 1 ? "einem Bild" : `${qtShared.length} Bildern`} seid ihr euch einig:</P>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 16 }}>
                  {qtShared.map((k) => (
                    <span key={k} style={{
                      fontFamily: SANS, fontSize: 13.5, fontWeight: 400, color: C.ink,
                      background: C.sageSoft, borderRadius: 20, padding: "7px 14px",
                    }}>{qtLab(k)}</span>
                  ))}
                </div>
                <P>Das ist eure sichere Bank. Wenn ihr nicht wisst, was ihr am Wochenende machen sollt, nehmt etwas davon – da liegt ihr bei beiden richtig.</P>
              </>
            ) : (
              <P>Ihr habt kein einziges Bild gemeinsam gewählt. Das klingt erstmal nach viel, ist es aber nicht: Es heißt nur, dass ihr Nähe über unterschiedliche Dinge herstellt. Wichtig wird es erst, wenn im Alltag immer nur die eine Sorte vorkommt.</P>
            )}
            {qtOnlyOther.length > 0 && (
              <div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px" }}>
                <Kicker color={C.ink}>Was nur eine:r von euch gewählt hat</Kicker>
                <P style={{ marginBottom: 8 }}>
                  {qtOnlyA.length > 0 && <>{names.a}: {qtOnlyA.map(qtLab).join(" · ")}<br /></>}
                  {qtOnlyB.length > 0 && <>{names.b}: {qtOnlyB.map(qtLab).join(" · ")}</>}
                </P>
                <P style={{ marginBottom: 0 }}>
                  Genau hier entstehen die stillen Enttäuschungen. Nicht weil jemand etwas falsch macht, sondern weil man dem anderen die eigene Lieblingsform von Zeit schenkt und sich wundert, dass sie nicht ankommt. Nehmt euch aus dieser Liste je eine Sache vor – die der anderen Person, nicht die eigene.
                </P>
              </div>
            )}
          </Result>
        )}

{!bothQt && (
          <Pending status={[
            { name: names.a, done: qtA.length === 4 },
            { name: names.b, done: qtB.length === 4 },
          ]}>Sobald beide vier Bilder gewählt haben, seht ihr hier, wo sich eure Vorstellung von gemeinsamer Zeit deckt – und wo nicht.</Pending>
        )}

<Card>
          <H3>Und im Alltag, {names[who]}?</H3>
          <Chips label="Wann fühle ich mich übersehen?" max={3}
            hint="Das darf unangenehm sein. Es ist kein Vorwurf, nur eine Information."
            options={SEEN_MISS} values={d.seenMiss[who] || []}
            onToggle={(o) => up((p) => ({ ...p, seenMiss: { ...p.seenMiss, [who]: toggleIn(p.seenMiss[who] || [], o, 3) } }))} />
          <Chips label="Was wünsche ich mir häufiger?" max={3}
            hint="Als Wunsch gedacht, nicht als Kritik."
            options={SEEN_WISH} values={d.seenWish[who] || []}
            onToggle={(o) => up((p) => ({ ...p, seenWish: { ...p.seenWish, [who]: toggleIn(p.seenWish[who] || [], o, 3) } }))} />
          {SEEN_Q.map((q) => (
            <Field key={q.k} label={q.q} hint={q.hint} optional={q.optional} rows={2}
              value={(d.seen[who] || {})[q.k]}
              onChange={(v) => setWho2("seen", who, q.k, v)} />
          ))}
        </Card>

{!bothPicked && (
          <Pending status={[
            { name: names.a, done: d.affection.a.length === 2 },
            { name: names.b, done: d.affection.b.length === 2 },
          ]}>Sobald beide je zwei Formen ausgewählt haben, seht ihr hier den Vergleich – und wo ihr aneinander vorbeigeben könntet, ohne es zu merken.</Pending>
        )}

{bothPicked && (
          <Result title="Euer Vergleich">
            <P>
              {names.a} braucht vor allem <strong style={{ fontWeight: 600, color: C.ink }}>{d.affection.a.map(lab).join(" und ")}</strong>.
              {" "}Bei {names.b} sind es <strong style={{ fontWeight: 600, color: C.ink }}>{d.affection.b.map(lab).join(" und ")}</strong>.
            </P>
            <P>
              {shared.length === 2
                ? "Ihr habt beide dasselbe gewählt. Das macht vieles leicht – ihr müsst weniger übersetzen. Achtet nur darauf, dass ihr die anderen drei Formen nicht ganz vergesst."
                : shared.length === 1
                ? `Eine Überschneidung: ${lab(shared[0])}. Das ist euer gemeinsamer Nenner. Die jeweils andere Wahl ist der Punkt, an dem ihr aneinander vorbeigeben könnt, ohne es zu merken.`
                : "Ihr habt vier verschiedene Formen gewählt. Das ist überhaupt kein schlechtes Zeichen – es heißt nur, dass ihr bewusster übersetzen müsst. Was für die eine Seite selbstverständlich Liebe zeigt, kommt bei der anderen nicht automatisch an."}
            </P>
            <div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px" }}>
              <Kicker color={C.ink}>Für heute Abend</Kicker>
              <P style={{ marginBottom: 0 }}>
                Sagt euch gegenseitig eine Sache, die die andere Person in der letzten Woche getan hat und die angekommen ist. Konkret, nicht allgemein. Das dauert zwei Minuten und wirkt länger als jedes Geschenk.
              </P>
            </div>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 4 – KOMMUNIKATION
  ======================================================= */
  const Ch4 = () => {
    const filledA = Object.values(d.reach.a || {}).filter((v) => (v || "").trim()).length;
    const filledB = Object.values(d.reach.b || {}).filter((v) => (v || "").trim()).length;
    return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Missverständnisse entstehen selten, weil zu wenig geredet wird. Sondern weil beide annehmen, die andere Person wisse schon, wie etwas gemeint war.</>
          <>Dieses Kapitel ist eine Gebrauchsanweisung für euch selbst – die ihr euch danach gegenseitig gebt.</>
        </Lead>

<Card>
          <H3>Fünf Fragen für {names[who]}</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>Antippen genügt. Es geht darum, wie es tatsächlich ist – nicht darum, wie es klingen soll.</P>
          {COMM_Q.map((q) => (
            <QBlock key={q.k} item={q}
              value={(d.comm[who] || {})[q.k]}
              onChange={(v) => setWho2("comm", who, q.k, v)} />
          ))}
        </Card>

<Card tone="white">
          <H3>So erreichst du mich besser</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>Drei Sätze zum Vervollständigen. Das ist der Teil dieses Journals, den ihr euch am ehesten gegenseitig zeigen solltet – deshalb lohnen sich hier eigene Worte.</P>
          {REACH_ME.map((r) => (
            <div key={r.k} style={{ marginBottom: 20 }}>
              <div style={{ fontFamily: SERIF, fontSize: 19, fontStyle: "italic", color: C.ink, marginBottom: 8, lineHeight: 1.4 }}>
                {r.start}
              </div>
              <textarea rows={2} value={(d.reach[who] || {})[r.k] || ""} placeholder={r.ph}
                aria-label={r.start}
                onChange={(e) => setWho2("reach", who, r.k, e.target.value)}
                style={{
                  width: "100%", boxSizing: "border-box", resize: "vertical",
                  fontFamily: SANS, fontSize: 15.5, fontWeight: 300, lineHeight: 1.6, color: C.ink,
                  background: C.sand, border: `1px solid ${C.line}`, borderRadius: 10,
                  padding: "13px 15px", outline: "none",
                }} />
            </div>
          ))}
        </Card>

{filledA < 3 && filledB < 3 && (
          <Pending>Füllt mindestens drei der Satzanfänge aus – dann steht hier, wie ihr die Sätze am besten miteinander teilt.</Pending>
        )}

{(filledA >= 3 || filledB >= 3) && (
          <Result title="Was ihr jetzt damit macht">
            <P>{names.a} hat {filledA} Sätze ausgefüllt, {names.b} hat {filledB}.</P>
            <P>
              {filledA >= 3 && filledB >= 3
                ? "Lest euch die Sätze gegenseitig vor – nicht kommentieren, nur vorlesen und zuhören. Und dann fragt bei genau einem nach: „Was meinst du damit konkret?“"
                : "Sobald beide Seiten ausgefüllt sind, lest ihr sie euch gegenseitig vor. Nicht kommentieren, nur vorlesen und zuhören."}
            </P>
            <P style={{ marginBottom: 0 }}>
              Der Satz über das, was euch verschließt, ist der wichtigste. Wenn ihr aus diesem Kapitel eine einzige Sache mitnehmt, dann diesen.
            </P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 5 – KONFLIKTE & REPARATUR
  ======================================================= */
  const Ch5 = () => {
    const picks = d.conflict[who] || [];
    const bothSet = d.conflict.a.length > 0 && d.conflict.b.length > 0;
    const overlap = bothSet ? d.conflict.a.filter((x) => d.conflict.b.includes(x)) : [];
    const lab = (k) => (CONFLICT.find((x) => x.k === k) || {}).label;
    const pauseDone = Object.values(d.pause).filter((v) => (typeof v === "string" ? v.trim() : (v || []).length)).length;

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Paare streiten selten über etwas Neues. Meistens läuft ein Streit nach demselben Ablauf ab, egal worum es gerade geht.</>
          <>Wer diesen Ablauf kennt, kann ihn unterbrechen. Wer ihn nicht kennt, hält ihn für den Charakter der anderen Person.</>
        </Lead>

<Card>
          <H3>Was macht {names[who]} im Streit?</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>Mehrfachauswahl. Die meisten kennen zwei oder drei dieser Reaktionen bei sich – je nachdem, worum es geht und wie müde sie sind.</P>
          {CONFLICT.map((cf) => (
            <Choice key={cf.k} label={cf.label} selected={picks.includes(cf.k)}
              onClick={() => up((p) => ({
                ...p, conflict: { ...p.conflict, [who]: toggleIn(p.conflict[who], cf.k) },
              }))} />
          ))}
        </Card>

{picks.length > 0 && (
          <Card tone="white">
            <Kicker>Dazu jeweils drei Gedanken</Kicker>
            {picks.map((k) => {
              const cf = CONFLICT.find((x) => x.k === k);
              return (
                <div key={k} style={{ marginBottom: 24, paddingBottom: 20, borderBottom: `1px solid ${C.line}` }}>
                  <H3 style={{ marginBottom: 14 }}>{cf.label}</H3>
                  {[["Mögliche Stärke", cf.strength], ["Mögliches Risiko", cf.risk], ["Hilfreicher nächster Schritt", cf.step]].map(([h, t]) => (
                    <div key={h} style={{ marginBottom: 12 }}>
                      <div style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: C.muted, marginBottom: 5 }}>{h}</div>
                      <P style={{ marginBottom: 0 }}>{t}</P>
                    </div>
                  ))}
                </div>
              );
            })}
          </Card>
        )}

<Card>
          <H3>Unsere Pause-Regel</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>Jetzt gemeinsam. Legt vorher fest, was gilt, wenn ein Gespräch kippt – im Streit selbst kann das niemand mehr verhandeln.</P>
          <Chips label="Woran erkennen wir, dass wir eine Pause brauchen?" max={3}
            hint="Konkrete Zeichen, keine Stimmungen."
            options={PAUSE_SIGNS} values={d.pause.erkennen || []}
            onToggle={(o) => setIn("pause", "erkennen", toggleIn(d.pause.erkennen || [], o, 3))} />
          <Pick label="Wie lange darf eine Pause dauern?" options={PAUSE_LENGTH}
            hint="Legt euch fest. Unbestimmte Pausen fühlen sich für den Wartenden wie Bestrafung an."
            value={d.pause.dauer} onChange={(v) => setIn("pause", "dauer", v)} />
          <Pick label="Mit welchem Satz gehen wir raus?" options={PAUSE_PROMISE}
            hint="Ein fester Satz, den beide kennen. Er sagt: Ich bin nicht weg."
            value={d.pause.zusage} onChange={(v) => setIn("pause", "zusage", v)} />
          <Pick label="Wie finden wir danach wieder zueinander?" options={PAUSE_BACK}
            value={d.pause.zurueck} onChange={(v) => setIn("pause", "zurueck", v)} />
        </Card>

<Card tone="white">
          <H3>Und wie kommt ihr wieder rein?</H3>
          <P style={{ fontSize: 14 }}>
            Die Pause-Regel klärt, wie ihr aus einem Streit rauskommt. Der Rückweg ist der Teil, den fast alle dem Zufall überlassen –
            und deshalb bleibt so oft eine Stunde übrig, in der beide warten, dass die andere Seite anfängt.
          </P>
          <Pick label="Unser Satz für danach" options={REPAIR_LINES}
            hint="Diese Sätze funktionieren, weil sie keine Diskussion neu eröffnen. Nehmt den, den ihr euch tatsächlich sagen hören könnt."
            value={d.repair} onChange={(v) => up((p) => ({ ...p, repair: v }))} />
          <Pick label="Wer macht bei uns normalerweise den ersten Schritt?"
            hint="Und die ehrlichere Frage hinterher: Ist das für beide in Ordnung?"
            options={[`Meistens ${names.a}`, `Meistens ${names.b}`, "Mal so, mal so", "Meistens keiner – es verläuft im Sand"]}
            value={d.repairFirst} onChange={(v) => up((p) => ({ ...p, repairFirst: v }))} />
        </Card>

<Card>
          <H3>Nicht jeder Streit will gelöst werden</H3>
          <P style={{ fontSize: 14 }}>
            Ungefähr zwei Drittel aller Konflikte in langen Beziehungen werden nie gelöst. Sie hängen an Temperament, an Herkunft,
            an Bedürfnissen, die sich nicht wegdiskutieren lassen. Paare, die lange zusammenbleiben, haben nicht weniger davon –
            sie reden nur anders darüber.
          </P>
          <P style={{ fontSize: 14, marginBottom: 20 }}>
            Der Unterschied ist im Grunde simpel: Ein lösbares Thema braucht eine Entscheidung. Ein Dauerthema braucht nur, dass beide
            verstehen, warum es der anderen Seite so wichtig ist – und dass niemand mehr versucht zu gewinnen. Der Fehler ist nicht,
            das Thema zu haben. Der Fehler ist, es jedes Mal wieder lösen zu wollen.
          </P>
          <Chips label="Was ist bei uns so ein Dauerthema?" max={2}
            hint="Das eine, das alle paar Monate wiederkommt, meistens an einem anderen Anlass. Wenn euch sofort etwas einfällt, ist es das."
            options={PERPETUAL_TOPICS} values={d.perpetual || []}
            onToggle={(o) => up((p) => ({ ...p, perpetual: toggleIn(p.perpetual || [], o, 2) }))} />
          <Chips label="Was steckt für euch dahinter?" max={3}
            hint="Nicht die Position, sondern das Bedürfnis darunter. Ordnung heißt oft Sicherheit. Spontaneität heißt oft Freiheit."
            options={PERPETUAL_NEEDS} values={d.perpetualWhy || []}
            onToggle={(o) => up((p) => ({ ...p, perpetualWhy: toggleIn(p.perpetualWhy || [], o, 3) }))} />
          {(d.perpetual || []).length > 0 && (
            <P style={{ fontSize: 14, marginBottom: 0, marginTop: 4 }}>
              {(d.perpetual || []).join(" und ")} wird nicht verschwinden. Aber wenn ihr einmal ausgesprochen habt, was für den anderen daran hängt,
              hört das Thema auf, jedes Mal grundsätzlich zu werden – und wird zu etwas, das ihr eben habt.
            </P>
          )}
        </Card>

{!bothSet && (
          <Pending>Wenn beide ihre Reaktionen markiert haben, erklärt euch die Auswertung hier, wie eure Muster zusammenspielen – und welche Kombination sich am schnellsten aufschaukelt.</Pending>
        )}

{bothSet && (
          <Result title="Wie eure Muster zusammenspielen">
            <P>
              {names.a}: {d.conflict.a.map(lab).join(", ")}.<br />
              {names.b}: {d.conflict.b.map(lab).join(", ")}.
            </P>
            <P>
              {(d.conflict.a.includes("rueckzug") && d.conflict.b.includes("angriff")) ||
               (d.conflict.b.includes("rueckzug") && d.conflict.a.includes("angriff"))
                ? "Eine Seite zieht sich zurück, die andere geht nach vorn. Das ist die häufigste Kombination überhaupt – und die, die sich am schnellsten aufschaukelt: Je mehr die eine nachsetzt, desto weiter geht die andere weg. Beide fühlen sich dabei im Recht. Der Ausweg ist nicht mehr Druck, sondern eure Pause-Regel."
                : overlap.length > 0
                ? `Ihr teilt mindestens ein Muster: ${overlap.map(lab).join(", ")}. Das kann angenehm sein, weil ihr euch versteht – und schwierig, weil euch beiden dieselbe Fähigkeit fehlt. Wenn ihr beide einlenkt, wird nie etwas geklärt. Wenn ihr beide zurückzieht, redet irgendwann niemand mehr.`
                : "Eure Muster sind unterschiedlich, ohne direkt gegeneinander zu laufen. Das ist eine gute Ausgangslage. Wichtig bleibt: Sagt euch gegenseitig, was eure Reaktion bedeutet – von außen wird sie fast immer falsch gelesen."}
            </P>
            <P style={{ marginBottom: 0 }}>
              {pauseDone >= 3
                ? "Eure Pause-Regel steht. Schreibt euch den entscheidenden Satz irgendwo hin, wo ihr ihn im Ernstfall seht."
                : "Was jetzt noch fehlt, ist die Pause-Regel darüber. Die ist wichtiger als die Analyse – sie ist das Einzige aus diesem Kapitel, das im Streit tatsächlich hilft."}
            </P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 6 – WERTE & LEBENSENTWÜRFE
  ======================================================= */
  const Ch6 = () => {
    const circled = d.values[who] || [];
    const top = d.valuesTop[who] || [];
    const bothTop = d.valuesTop.a.length === 5 && d.valuesTop.b.length === 5;
    const shared = bothTop ? d.valuesTop.a.filter((x) => d.valuesTop.b.includes(x)) : [];
    const pool = bothTop ? Array.from(new Set([...d.valuesTop.a, ...d.valuesTop.b])) : [];

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Wofür würdet ihr unbequem werden? Nicht bei einer Kleinigkeit – sondern da, wo ihr auch einen Streit in Kauf nehmt.</>
          <>Was euch dazu einfällt, ist ein Wert. Und ziemlich viele Paarkonflikte sind keine Meinungsverschiedenheiten, sondern zwei Werte, die gerade gegeneinanderstehen.</>
        </Lead>

<Card tone="white" style={{ padding: "28px 16px 24px" }}>
          <p style={{ fontFamily: SANS, fontSize: 14, fontWeight: 300, lineHeight: 1.6, color: C.body, textAlign: "center", margin: "0 0 22px" }}>
            {names[who]}: Kreis alles ein, was dir wichtig ist. Sei großzügig – fünfzehn bis fünfundzwanzig sind normal.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", columnGap: 5, rowGap: 13 }}>
            {VALUES.map((v, i) => {
              const on = circled.includes(v);
              return (
                <button key={v} type="button" aria-pressed={on}
                  onClick={() => up((p) => {
                    const wasOn = p.values[who].includes(v);
                    return {
                      ...p,
                      values: { ...p.values, [who]: toggleIn(p.values[who], v) },
                      valuesTop: wasOn
                        ? { ...p.valuesTop, [who]: (p.valuesTop[who] || []).filter((x) => x !== v) }
                        : p.valuesTop,
                    };
                  })}
                  style={{
                    position: "relative", background: "none", border: "none", cursor: "pointer",
                    padding: "9px 12px", fontFamily: SERIF, fontSize: 18.5,
                    fontWeight: on ? 600 : 400, color: on ? C.ink : C.body, lineHeight: 1.1,
                  }}>
                  {on && (
                    <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"
                      style={{
                        position: "absolute", inset: "-4px -2px",
                        width: "calc(100% + 4px)", height: "calc(100% + 8px)",
                        transform: `rotate(${[-2.5, 1.8, -1.2, 2.4][i % 4]}deg)`, pointerEvents: "none",
                      }}>
                      <path d={SCRIBBLES[i % SCRIBBLES.length]} fill="none" stroke={C.terra}
                        strokeWidth="2.2" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
                    </svg>
                  )}
                  {v}
                </button>
              );
            })}
          </div>
        </Card>

{circled.length > 0 && (
          <Card>
            <H3>Jetzt runter auf fünf</H3>
            <P style={{ fontSize: 14, marginBottom: 16 }}>
              Der unbequeme Teil. Tipp an, was übrig bleiben soll – nicht was gut klingt, sondern das, wofür du im Zweifel etwas anderes aufgeben würdest.
              {top.length < 5 && ` Noch ${5 - top.length} frei.`}
            </P>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {circled.map((v) => {
                const on = top.includes(v);
                return (
                  <button key={v} type="button" aria-pressed={on}
                    disabled={!on && top.length >= 5}
                    onClick={() => up((p) => ({
                      ...p, valuesTop: { ...p.valuesTop, [who]: toggleIn(p.valuesTop[who], v, 5) },
                    }))}
                    style={{
                      padding: "10px 16px", minHeight: 44, cursor: "pointer", borderRadius: 24,
                      border: `1px solid ${on ? C.terra : C.line}`,
                      background: on ? C.terra : C.white,
                      color: on ? C.white : C.body,
                      fontFamily: SANS, fontSize: 14, fontWeight: on ? 500 : 300,
                      opacity: !on && top.length >= 5 ? 0.45 : 1,
                    }}>{v}</button>
                );
              })}
            </div>
          </Card>
        )}

{top.length === 5 && (
          <Card tone="white">
            <H3>Und jetzt in eine Reihenfolge</H3>
            <P style={{ fontSize: 14, marginBottom: 18 }}>
              Bringt eure fünf in eine Rangfolge – eins ist der Wert, für den ihr im Zweifel alles andere zurückstellen würdet.
              Das ist der unbequemste Schritt in diesem Kapitel und der aufschlussreichste.
            </P>
            {top.map((v, i) => (
              <div key={v} style={{
                display: "flex", gap: 12, alignItems: "center", padding: "10px 0",
                borderBottom: i < 4 ? `1px solid ${C.line}` : "none",
              }}>
                <span aria-hidden="true" style={{
                  fontFamily: SERIF, fontSize: 20, fontWeight: 500, color: C.white,
                  background: C.terra, borderRadius: "50%", width: 30, height: 30,
                  display: "grid", placeItems: "center", flexShrink: 0,
                }}>{i + 1}</span>
                <span style={{ flex: 1, fontFamily: SERIF, fontSize: 23, fontWeight: 500, color: C.ink, lineHeight: 1.2 }}>{v}</span>
                <div style={{ display: "flex", gap: 5, flexShrink: 0 }}>
                  {[["hoch", -1, i === 0], ["runter", 1, i === top.length - 1]].map(([lbl, dir, off]) => (
                    <button key={lbl} type="button" disabled={off}
                      aria-label={`${v} nach ${lbl === "hoch" ? "oben" : "unten"}`}
                      onClick={() => up((p) => {
                        const arr = [...(p.valuesTop[who] || [])];
                        const j = i + dir;
                        if (j < 0 || j >= arr.length) return p;
                        [arr[i], arr[j]] = [arr[j], arr[i]];
                        return { ...p, valuesTop: { ...p.valuesTop, [who]: arr } };
                      })}
                      style={{
                        width: 40, height: 40, borderRadius: 10, cursor: off ? "default" : "pointer",
                        border: `1px solid ${C.line}`, background: C.white,
                        opacity: off ? 0.3 : 1, display: "grid", placeItems: "center", padding: 0,
                      }}>
                      <span aria-hidden="true" style={{
                        display: "block", width: 0, height: 0,
                        borderLeft: "6px solid transparent", borderRight: "6px solid transparent",
                        ...(lbl === "hoch"
                          ? { borderBottom: `8px solid ${C.terra}` }
                          : { borderTop: `8px solid ${C.terra}` }),
                      }} />
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </Card>
        )}

{!bothTop && (
          <Pending status={[
            { name: names.a, done: (d.valuesTop.a || []).length === 5 },
            { name: names.b, done: (d.valuesTop.b || []).length === 5 },
          ]}>Sobald beide ihre fünf Werte festgelegt haben, seht ihr hier eure Überschneidungen – und daraus wählt ihr dann drei gemeinsame Kernwerte.</Pending>
        )}

{bothTop && (
          <>
            <Result title="Wo ihr euch trefft">
              {shared.length > 0 ? (
                <>
                  <P>
                    Ihr habt {shared.length === 1 ? "einen gemeinsamen Wert" : `${shared.length} gemeinsame Werte`}:
                  </P>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 18 }}>
                    {shared.map((v) => (
                      <span key={v} style={{
                        fontFamily: SERIF, fontSize: 20, fontWeight: 500, color: C.ink,
                        background: C.sageSoft, borderRadius: 24, padding: "8px 18px",
                      }}>{v}</span>
                    ))}
                  </div>
                </>
              ) : (
                <P>
                  In euren Top fünf überschneidet sich nichts. Das ist kein Alarmzeichen – sehr oft meint ihr dasselbe und nennt es
                  nur anders. Geht die zehn Begriffe zusammen durch und lasst euch gegenseitig erklären, was ihr darunter versteht.
                </P>
              )}

<P style={{ marginBottom: 12 }}>Und hier sind die Werte, die sich unterscheiden:</P>
              <div style={{ marginBottom: 18 }}>
                {[["a", C.terraSoft], ["b", C.sageSoft]].map(([k, bg]) => {
                  const eigen = (d.valuesTop[k] || []).filter((v) => !shared.includes(v));
                  if (!eigen.length) return null;
                  return (
                    <div key={k} style={{ background: bg, borderRadius: 12, padding: "14px 16px", marginBottom: 8 }}>
                      <div style={{ fontFamily: SANS, fontSize: 13, fontWeight: 600, color: C.ink, marginBottom: 7 }}>
                        Nur bei {names[k]}
                      </div>
                      <div style={{ fontFamily: SERIF, fontSize: 19, fontWeight: 500, color: C.ink, lineHeight: 1.5 }}>
                        {eigen.join(" · ")}
                      </div>
                    </div>
                  );
                })}
              </div>

<div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px" }}>
                <Kicker color={C.ink}>Euer Auftrag für heute</Kicker>
                <P style={{ marginBottom: 0 }}>
                  Besprecht mindestens einen Wert von jeder Seite, der beim anderen nicht auftaucht. Nicht um jemanden zu überzeugen –
                  lasst euch nur erzählen, woher der kommt. Genau da liegen die meisten Konflikte, die sich nach Sturheit anfühlen und keine ist.
                </P>
              </div>
            </Result>

<Card>
              <H3>Eure drei Kernwerte</H3>
              <P style={{ fontSize: 14, marginBottom: 16 }}>
                Jetzt gemeinsam: Wählt aus euren zehn Begriffen drei aus, die für eure Beziehung gelten sollen. Nicht für jede:n einzeln – für euch als Paar.
                {d.core.length < 3 && ` Noch ${3 - d.core.length} frei.`}
              </P>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {pool.map((v) => {
                  const on = d.core.includes(v);
                  return (
                    <button key={v} type="button" aria-pressed={on}
                      disabled={!on && d.core.length >= 3}
                      onClick={() => up((p) => ({ ...p, core: toggleIn(p.core, v, 3) }))}
                      style={{
                        padding: "10px 16px", minHeight: 44, cursor: "pointer", borderRadius: 24,
                        border: `1px solid ${on ? C.sage : C.line}`,
                        background: on ? C.sage : C.white,
                        color: on ? C.white : C.body,
                        fontFamily: SANS, fontSize: 14, fontWeight: on ? 500 : 300,
                        opacity: !on && d.core.length >= 3 ? 0.45 : 1,
                      }}>{v}</button>
                  );
                })}
              </div>
            </Card>
          </>
        )}

{d.core.length === 3 && (
          <Card tone="sage" style={{ textAlign: "center", padding: "34px 22px" }}>
            <Kicker color={C.sage}>Euer Satz</Kicker>
            <p style={{ fontFamily: SERIF, fontSize: "clamp(23px, 5.6vw, 30px)", fontWeight: 500, lineHeight: 1.35, color: C.ink, margin: 0 }}>
              Unsere Beziehung soll geprägt sein von {d.core[0]}, {d.core[1]} und {d.core[2]}.
            </p>
          </Card>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 7 – GELD & ENTSCHEIDUNGEN
  ======================================================= */
  const Ch7 = () => {
    const answered = Object.values(d.money).filter((v) => (typeof v === "string" ? v.trim() : (v || []).length)).length;
    const taskCount = Object.keys(d.moneyTasks || {}).length;
    const mineHeavy = MONEY_TASKS.filter((t) => d.moneyTasks[t] === "a").length;
    const yoursHeavy = MONEY_TASKS.filter((t) => d.moneyTasks[t] === "b").length;
    const shareOpts = [["a", names.a], ["both", "Beide"], ["b", names.b]];
    return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Über Geld zu reden fühlt sich unromantisch an. Deshalb schieben es die meisten so lange, bis eine Entscheidung ansteht, die nicht warten kann.</>
          <>Hier geht es nicht um Zahlen, sondern darum, wer bei euch worüber entscheidet – und ob sich das für beide richtig anfühlt.</>
        </Lead>

<Card tone="white">
          <P style={{ marginBottom: 0, fontSize: 14.5 }}>
            Dieses Kapitel füllt ihr zusammen aus. Wenn ihr euch bei einer Frage nicht einig seid, sagt es laut, statt es wegzuklicken – Uneinigkeit auszusprechen ist wertvoller, als sie zu glätten.
          </P>
        </Card>

<Card>
          {MONEY_Q.map((q) => (
            <QBlock key={q.k} item={q} value={d.money[q.k]} onChange={(v) => setIn("money", q.k, v)} />
          ))}
        </Card>

<Card tone="white">
          <H3>Wer macht bei euch was?</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>
            Auch die unsichtbaren Aufgaben zählen – Überblick behalten und Mitdenken sind Arbeit, auch wenn sie nirgends auftauchen.
          </P>
          {MONEY_TASKS.map((t) => (
            <div key={t} style={{ marginBottom: 18 }}>
              <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 400, color: C.ink, margin: "0 0 9px" }}>{t}</p>
              <div style={{ display: "flex", gap: 6 }}>
                {shareOpts.map(([v, lbl]) => {
                  const on = d.moneyTasks[t] === v;
                  return (
                    <button key={v} type="button" aria-pressed={on}
                      onClick={() => up((p) => { const nx = { ...p.moneyTasks }; if (on) delete nx[t]; else nx[t] = v; return { ...p, moneyTasks: nx }; })}
                      style={{
                        flex: 1, padding: "11px 4px", minHeight: 44, cursor: "pointer", borderRadius: 9,
                        border: `1px solid ${on ? C.terra : C.line}`,
                        background: on ? C.terra : C.white,
                        color: on ? C.white : C.muted,
                        fontFamily: SANS, fontSize: 12.5, fontWeight: on ? 500 : 300, lineHeight: 1.3,
                      }}>{lbl}</button>
                  );
                })}
              </div>
            </div>
          ))}
          {taskCount >= 4 && (
            <div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px", marginTop: 6 }}>
              <Kicker color={C.ink}>Wie es sich verteilt</Kicker>
              <P style={{ marginBottom: 0 }}>
                {Math.abs(mineHeavy - yoursHeavy) <= 1
                  ? "Das liegt bei euch ziemlich gleichmäßig. Wichtiger als die Verteilung ist ohnehin, dass beide wissen, was die andere Seite trägt – und das wisst ihr jetzt."
                  : `${mineHeavy > yoursHeavy ? names.a : names.b} trägt deutlich mehr davon. Das muss nicht falsch sein, solange es beiden bewusst ist und nicht einfach so passiert ist. Fragt einmal nach: Ist das eine bewusste Aufteilung oder nur die, die sich irgendwann eingeschlichen hat?`}
              </P>
            </div>
          )}
        </Card>

<Field label="Wie sorgen wir dafür, dass beide auf Augenhöhe entscheiden?" optional rows={3}
          hint="Besonders dann, wenn eine Seite mehr einbringt als die andere. Ein Satz genügt."
          value={d.moneyNote} onChange={(v) => up((p) => ({ ...p, moneyNote: v }))} />

{answered < 3 && (
          <Pending>Beantwortet mindestens drei Fragen – dann findet ihr hier ein Muster, das bei vielen Paaren unbemerkt entsteht, und eine Vereinbarung, die es entschärft.</Pending>
        )}

{answered >= 3 && (
          <Result title="Worauf ihr achten könnt">
            <P>Ein Muster, das bei vielen Paaren auftaucht: Wer mehr einbringt, entscheidet unbemerkt mehr mit. Nicht aus Absicht – es ergibt sich. Und wer weniger einbringt, sagt seltener etwas, weil es sich unpassend anfühlt.</P>
            <P style={{ marginBottom: 0 }}>Falls euch das bekannt vorkommt, ist das keine Schuldfrage. Es lässt sich mit einer einzigen Vereinbarung entschärfen: Ab einer bestimmten Summe entscheidet ihr grundsätzlich zu zweit – unabhängig davon, aus wessen Konto es kommt.</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 8 – NÄHE & ZÄRTLICHKEIT
  ======================================================= */
  const Ch8 = () => {
    const mine = d.close[who] || {};
    const answered = Object.values(mine).filter((v) => (typeof v === "string" ? v.trim() : (v || []).length)).length;
    return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Nähe entsteht nicht nur im Bett. Sondern beim Kochen, im Auto, in dem Moment, in dem jemand merkt, dass etwas nicht stimmt, bevor es ausgesprochen ist.</>
          <>Der erste Teil ist für dich allein. Was ihr davon teilt, entscheidet ihr danach.</>
        </Lead>

<Card tone="sage">
          <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <Lock size={17} color={C.sage} style={{ flexShrink: 0, marginTop: 3 }} aria-hidden="true" />
            <div>
              <P>Nichts muss beantwortet oder geteilt werden, wenn es sich nicht sicher anfühlt. Der gemeinsame Teil weiter unten ist ausdrücklich freiwillig.</P>
              <P style={{ fontSize: 14, marginBottom: 0 }}>
                Ein ehrlicher Hinweis dazu: Eure Antworten liegen zusammen auf diesem Gerät, und über die Namen oben lässt sich zwischen beiden Seiten hin- und herschalten.
                „Privat“ heißt hier also: Ihr müsst nichts vorlesen. Was wirklich niemand lesen soll, schreibt lieber gar nicht erst hin.
              </P>
            </div>
          </div>
        </Card>

<Card>
          <H3>Für {names[who]} allein</H3>
          {CLOSE_PRIVATE.map((q) => (
            <QBlock key={q.k} item={q} value={mine[q.k]}
              onChange={(v) => setWho2("close", who, q.k, v)} />
          ))}
          <Field label="Was bedeutet Intimität für mich – abseits von allem Körperlichen?" optional rows={3}
            hint="Die eine Frage in diesem Kapitel, für die es keine Auswahlliste gibt. Zwei Zeilen reichen."
            value={(d.closeFree || {})[who]}
            onChange={(v) => up((p) => ({ ...p, closeFree: { ...p.closeFree, [who]: v } }))} />
        </Card>

<Card tone="white">
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
            <H3 style={{ marginBottom: 0 }}>Wenn ihr mögt: gemeinsam</H3>
            <Pill tone="solo">freiwillig</Pill>
          </div>
          <P style={{ fontSize: 14, marginBottom: 18 }}>Fünf Fragen zum Vorlesen. Ihr müsst sie nicht der Reihe nach nehmen und keine davon beantworten.</P>
          {CLOSE_TOGETHER.map((q, i) => (
            <div key={i} style={{ display: "flex", gap: 12, padding: "12px 0", borderTop: i === 0 ? "none" : `1px solid ${C.line}` }}>
              <span aria-hidden="true" style={{ fontFamily: SERIF, fontSize: 17, color: C.terra, flexShrink: 0 }}>{i + 1}</span>
              <p style={{ fontFamily: SERIF, fontSize: 19, fontStyle: "italic", lineHeight: 1.45, color: C.ink, margin: 0 }}>{q}</p>
            </div>
          ))}
          <Field label="Wollt ihr etwas festhalten?" optional rows={3}
            hint="Nur wenn ihr möchtet. Ein Satz reicht."
            value={d.closeShared} onChange={(v) => up((p) => ({ ...p, closeShared: v }))} />
        </Card>

{answered < 3 && (
          <Pending>Beantwortet ein paar der privaten Fragen – dann steht hier der eine Gedanke, auf den es bei diesem Thema wirklich ankommt.</Pending>
        )}

{answered >= 3 && (
          <Result title="Ein Gedanke zum Schluss">
            <P>Was Nähe angeht, gibt es keinen Normalwert. Paare unterscheiden sich hier stärker als in fast allem anderen – und Vergleiche mit anderen führen zu nichts.</P>
            <P style={{ marginBottom: 0 }}>Was zählt, ist nur eins: Könnt ihr darüber reden, ohne dass sich jemand rechtfertigen muss? Wenn ja, ist der Rest lösbar. Wenn nein, ist genau das der eigentliche Punkt.</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 9 – AUSSENWELT & GRENZEN
  ======================================================= */
  const Ch9 = () => {
    const put = (bucket, topic) => up((p) => {
      const openL = p.outside.open.filter((x) => x !== topic);
      const privL = p.outside.private.filter((x) => x !== topic);
      const already = p.outside[bucket].includes(topic);
      if (already) return { ...p, outside: { open: openL, private: privL } };
      return {
        ...p,
        outside: bucket === "open"
          ? { open: [...openL, topic], private: privL }
          : { open: openL, private: [...privL, topic] },
      };
    });
    const sorted = d.outside.open.length + d.outside.private.length;

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Reaktionen von außen treffen fast nie beide gleich. Meistens trägt eine Seite mehr davon und sagt es nicht.</>
          <>Es geht nicht darum, Fremden etwas zu erklären. Es geht darum, dass ihr vorher wisst, was ihr erzählt und was nicht.</>
        </Lead>

<Card>
          <H3>Was gehört zu uns – und was gehört den anderen?</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>Ordnet jedes Thema zu. Tippt auf einen der beiden Knöpfe; nochmal tippen hebt die Zuordnung wieder auf.</P>
          {OUTSIDE_TOPICS.map((t) => {
            const isOpen = d.outside.open.includes(t);
            const isPriv = d.outside.private.includes(t);
            return (
              <div key={t} style={{ padding: "14px 0", borderBottom: `1px solid ${C.line}` }}>
                <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 400, lineHeight: 1.5, color: C.ink, margin: "0 0 10px" }}>{t}</p>
                <div style={{ display: "flex", gap: 8 }}>
                  <button type="button" aria-pressed={isOpen} onClick={() => put("open", t)}
                    style={{
                      flex: 1, padding: "10px 8px", minHeight: 44, cursor: "pointer", borderRadius: 10,
                      border: `1px solid ${isOpen ? C.sage : C.line}`,
                      background: isOpen ? C.sage : C.white,
                      color: isOpen ? C.white : C.body,
                      fontFamily: SANS, fontSize: 13, fontWeight: isOpen ? 500 : 300,
                    }}>Darüber sprechen wir offen</button>
                  <button type="button" aria-pressed={isPriv} onClick={() => put("private", t)}
                    style={{
                      flex: 1, padding: "10px 8px", minHeight: 44, cursor: "pointer", borderRadius: 10,
                      border: `1px solid ${isPriv ? C.terra : C.line}`,
                      background: isPriv ? C.terra : C.white,
                      color: isPriv ? C.white : C.body,
                      fontFamily: SANS, fontSize: 13, fontWeight: isPriv ? 500 : 300,
                    }}>Das bleibt privat</button>
                </div>
              </div>
            );
          })}
        </Card>

<Card tone="white">
          <H3>Sätze für unangenehme Kommentare</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>Vier Tonlagen. Sucht euch pro Situation eine aus – und sprecht sie einmal laut aus, sonst fallen sie euch im Moment nicht ein.</P>
          {REPLIES.map((r) => (
            <div key={r.tone} style={{ marginBottom: 20 }}>
              <div style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: C.terra, marginBottom: 9 }}>{r.tone}</div>
              {r.lines.map((line) => (
                <div key={line} style={{
                  display: "flex", gap: 11, alignItems: "flex-start",
                  background: C.sand, borderRadius: 10, padding: "12px 14px", marginBottom: 7,
                }}>
                  <span aria-hidden="true" style={{ color: C.line, fontFamily: SERIF, fontSize: 21, lineHeight: 1, marginTop: 2 }}>„</span>
                  <p style={{ fontFamily: SANS, fontSize: 14.5, fontWeight: 300, lineHeight: 1.55, color: C.ink, margin: 0 }}>{line}</p>
                </div>
              ))}
            </div>
          ))}
          <Field label="Eigene Sätze, die zu euch passen" optional rows={3}
            hint="Am besten in eurer eigenen Sprache. Fremde Sätze bringt man selten über die Lippen."
            value={d.outsideNote} onChange={(v) => up((p) => ({ ...p, outsideNote: v }))} />
        </Card>

{sorted < 4 && (
          <Pending>Ordnet mindestens vier Themen zu – dann seht ihr hier, wie eure Grenze nach außen aussieht und worauf ihr dabei achten solltet.</Pending>
        )}

{sorted >= 4 && (
          <Result title="Eure Linie nach außen">
            <P>
              Offen: {d.outside.open.length} {d.outside.open.length === 1 ? "Thema" : "Themen"}. Privat: {d.outside.private.length}.
              {d.outside.private.length === 0
                ? " Bisher ist nichts als privat markiert. Prüft das noch einmal – Paare ohne geschützten Bereich erklären sich auf Dauer sehr viel."
                : d.outside.open.length === 0
                ? " Ihr schützt fast alles. Das ist völlig legitim. Achtet nur darauf, dass Verschlossenheit nach außen nicht auch zwischen euch entsteht."
                : " Diese Aufteilung ist eure Grenze. Sie funktioniert nur, wenn beide sie kennen und beide sie einhalten – auch dann, wenn jemand nachbohrt."}
            </P>
            <P style={{ marginBottom: 0 }}>
              Ein Hinweis, der oft unterschätzt wird: Klärt auch, was in sozialen Netzwerken sichtbar sein darf. Diese Grenze verschiebt sich schneller als jede andere, und meistens merkt es nur eine Seite.
            </P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 10 – BALANCE
  ======================================================= */
  const Ch10 = () => {
    const mine = d.balance[who] || {};
    const answered = Object.keys(mine).length;
    const bothDone = Object.keys(d.balance.a).length === BALANCE_AREAS.length
      && Object.keys(d.balance.b).length === BALANCE_AREAS.length;

const verdicts = bothDone ? BALANCE_AREAS.map((area) => {
      const va = d.balance.a[area], vb = d.balance.b[area];
      const bothBalanced = va === 2 && vb === 2;
      const diff = Math.abs(va - vb);
      return {
        area,
        kind: bothBalanced ? "gut" : diff >= 2 ? "unterschiedlich" : "gespraech",
      };
    }) : [];

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Balance heißt nicht, dass alles halbe-halbe ist. In den meisten Beziehungen übernimmt jede Seite ihre Bereiche, und das funktioniert gut.</>
          <>Die eigentliche Frage ist eine andere: Zählt eure Stimme gleich viel? Wird gefragt, bevor entschieden wird?</>
        </Lead>

<Card>
          <H3>Wer entscheidet bei euch?</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>
            {names[who]}: Wie erlebst du die Entscheidungen in diesen Bereichen? Es geht um dein Erleben, nicht um eine objektive Wahrheit – die gibt es hier nicht.
          </P>
          {BALANCE_AREAS.map((area) => (
            <div key={area} style={{ marginBottom: 22 }}>
              <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 400, color: C.ink, margin: "0 0 9px" }}>{area}</p>
              <div style={{ display: "flex", gap: 6 }}>
                {BALANCE_SCALE.map((sc) => {
                  const on = mine[area] === sc.v;
                  return (
                    <button key={sc.v} type="button" aria-pressed={on}
                      onClick={() => setWho2("balance", who, area, sc.v)}
                      style={{
                        flex: 1, padding: "11px 4px", minHeight: 44, cursor: "pointer", borderRadius: 9,
                        border: `1px solid ${on ? C.terra : C.line}`,
                        background: on ? C.terra : C.white,
                        color: on ? C.white : C.muted,
                        fontFamily: SANS, fontSize: 11.5, fontWeight: on ? 500 : 300, lineHeight: 1.3,
                      }}>{sc.label}</button>
                  );
                })}
              </div>
            </div>
          ))}
        </Card>

{!bothDone && (
          <Pending>Wenn beide alle neun Bereiche eingeschätzt haben, sortiert die Auswertung sie hier in drei Gruppen – ohne Punktzahl, nur nach eurer Wahrnehmung.</Pending>
        )}

{bothDone && (
          <Result title="Wie ihr die Balance erlebt">
            <P>Hier steht keine Punktzahl. Es geht nur darum, wo eure Wahrnehmungen zusammenpassen und wo nicht.</P>
            {["gut", "gespraech", "unterschiedlich"].map((kind) => {
              const items = verdicts.filter((v) => v.kind === kind).map((v) => v.area);
              if (items.length === 0) return null;
              const head = kind === "gut" ? "Hier erlebt ihr bereits viel Balance"
                : kind === "gespraech" ? "Hier lohnt sich ein offenes Gespräch"
                : "Hier scheinen eure Wahrnehmungen unterschiedlich zu sein";
              const note = kind === "gut" ? "Beide erleben diese Bereiche als ausgewogen. Das ist eine gute Grundlage."
                : kind === "gespraech" ? "Ihr liegt nah beieinander, aber nicht deckungsgleich. Ein kurzes Gespräch reicht hier meistens."
                : "Ihr erlebt dieselben Bereiche verschieden. Das ist der interessanteste Befund in diesem Kapitel – und kein Vorwurf an eine der beiden Seiten.";
              const col = kind === "gut" ? C.sage : kind === "gespraech" ? C.muted : C.terra;
              return (
                <div key={kind} style={{ marginBottom: 20 }}>
                  <div style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: col, marginBottom: 9 }}>{head}</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 9 }}>
                    {items.map((a) => (
                      <span key={a} style={{
                        fontFamily: SANS, fontSize: 13.5, fontWeight: 400, color: C.ink,
                        background: C.sand, borderRadius: 20, padding: "6px 14px",
                      }}>{a}</span>
                    ))}
                  </div>
                  <P style={{ fontSize: 14, marginBottom: 0 }}>{note}</P>
                </div>
              );
            })}
            <div style={{ background: C.sand, borderRadius: 12, padding: "16px 18px" }}>
              <Kicker color={C.ink}>Leitfrage</Kicker>
              <p style={{ fontFamily: SERIF, fontSize: 21, fontStyle: "italic", lineHeight: 1.45, color: C.ink, margin: 0 }}>
                Fühlen sich beide Stimmen in unserer Beziehung gleich wertvoll an?
              </p>
            </div>
          </Result>
        )}

{answered > 0 && (
          <Field label="Was möchtet ihr dazu festhalten?" optional rows={3}
            hint="Besonders zu den Bereichen, bei denen ihr unterschiedlich geantwortet habt."
            value={d.balanceNote} onChange={(v) => up((p) => ({ ...p, balanceNote: v }))} />
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 11 – LEBENSPHASEN
  ======================================================= */
  const Ch11 = () => {
    const answered = Object.values(d.phaseStatus || {}).filter((v) => (v || "").trim()).length;
    const openTopics = PHASE_TOPICS
      .filter((t) => d.phaseStatus[t.k] === "Nie darüber gesprochen" || d.phaseStatus[t.k] === "Haben wir mal angerissen")
      .map((t) => t.label);
    return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Zwei Menschen stehen selten an genau derselben Stelle im Leben. Bei größerem Altersunterschied fällt das stärker auf, aber es gilt für fast jedes Paar.</>
          <>Es geht nicht darum, sich Sorgen zu machen. Es geht darum, was ihr heute besprecht, damit ihr später bewusster entscheiden könnt.</>
        </Lead>

<Card tone="white">
          <P style={{ marginBottom: 0, fontSize: 14.5 }}>
            Geht die Themen kurz durch und ordnet jedes ein. Das dauert zwei Minuten – und zeigt euch danach ziemlich genau, wo eine Unterhaltung fehlt.
          </P>
        </Card>

<Card>
          {PHASE_TOPICS.map((t) => {
            const st = d.phaseStatus[t.k];
            return (
              <div key={t.k} style={{ marginBottom: 24 }}>
                <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 500, color: C.ink, margin: "0 0 4px" }}>{t.label}</p>
                <p style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, fontStyle: "italic", color: C.muted, margin: "0 0 10px", lineHeight: 1.5 }}>{t.q}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {PHASE_STATUS.map((s) => {
                    const on = st === s;
                    return (
                      <button key={s} type="button" aria-pressed={on}
                        onClick={() => setIn("phaseStatus", t.k, on ? "" : s)}
                        style={{
                          padding: "10px 14px", minHeight: 44, cursor: "pointer", borderRadius: 22,
                          border: `1px solid ${on ? C.terra : C.line}`,
                          background: on ? C.terra : C.white,
                          color: on ? C.white : C.body,
                          fontFamily: SANS, fontSize: 13, fontWeight: on ? 500 : 300,
                        }}>{s}</button>
                    );
                  })}
                </div>
                {(st === "Nie darüber gesprochen" || st === "Haben wir mal angerissen") && (
                  <div style={{ marginTop: 14 }}>
                    <Field label="" optional rows={2}
                      placeholder="Was müsstet ihr dazu klären? Ein Stichwort reicht."
                      value={d.phases[t.k]} onChange={(v) => setIn("phases", t.k, v)} />
                  </div>
                )}
              </div>
            );
          })}
        </Card>

{answered < 2 && (
          <Pending>Ordnet mindestens zwei Themen ein – dann steht hier, welches davon ihr als Erstes in einen echten Termin verwandeln solltet.</Pending>
        )}

{answered >= 2 && (
          <Result title="Was ihr daraus mitnehmt">
            {openTopics.length > 0 ? (
              <>
                <P>
                  Ungeklärt {openTopics.length === 1 ? "ist" : "sind"} bei euch: <strong style={{ fontWeight: 600, color: C.ink }}>{openTopics.join(", ")}</strong>.
                </P>
                <P>Nehmt davon eins – am besten das, bei dem einer von euch gerade innerlich „na ja“ gedacht hat. Das ist meistens das, vor dem beide ein bisschen ausweichen.</P>
              </>
            ) : (
              <P>Ihr habt alles entweder geklärt oder als nicht relevant markiert. Das ist ungewöhnlich – prüft einmal, ob „geklärt“ wirklich heißt, dass ihr darüber gesprochen habt, oder ob ihr nur beide dasselbe annehmt.</P>
            )}
            <P style={{ marginBottom: 0 }}>Und macht daraus einen Termin statt eines Vorsatzes. „Wir müssten mal“ hat noch kein Paar weitergebracht. Ein Datum im Kalender schon.</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 12 – UNSERE ZUKUNFT
  ======================================================= */
  const Ch12 = () => {
    const hz = tmp.hz || "jahr";
    const setHz = (k) => setTmp((t) => ({ ...t, hz: k }));
    const cur = HORIZONS.find((h) => h.k === hz);
    const filled = HORIZONS.filter((h) => (d.future[h.k] || "").trim()).length;

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Träume, über die niemand spricht, bleiben Träume. Sobald sie irgendwo stehen, werden mit der Zeit Pläne daraus.</>
          <>Vier Zeitpunkte, einer nach dem anderen. Nicht alles auf einmal – das führt nur dazu, dass man gar nicht erst anfängt.</>
        </Lead>

<Card>
          <H3>Welche Bereiche sind euch wichtig?</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>Wählt drei bis fünf aus. Das hilft, beim Schreiben nicht ins Allgemeine abzurutschen.</P>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {FUTURE_AREAS.map((a) => {
              const on = d.futureAreas.includes(a);
              return (
                <button key={a} type="button" aria-pressed={on}
                  onClick={() => up((p) => ({ ...p, futureAreas: toggleIn(p.futureAreas, a) }))}
                  style={{
                    padding: "10px 16px", minHeight: 44, cursor: "pointer", borderRadius: 24,
                    border: `1px solid ${on ? C.sage : C.line}`,
                    background: on ? C.sage : C.white,
                    color: on ? C.white : C.body,
                    fontFamily: SANS, fontSize: 13.5, fontWeight: on ? 500 : 300,
                  }}>{a}</button>
              );
            })}
          </div>
        </Card>

<div style={{ display: "flex", gap: 5, marginBottom: 20, overflowX: "auto", paddingBottom: 4 }}>
          {HORIZONS.map((h, i) => {
            const on = hz === h.k;
            const has = (d.future[h.k] || "").trim();
            return (
              <button key={h.k} type="button" aria-pressed={on} onClick={() => setHz(h.k)}
                style={{
                  flex: "1 0 auto", padding: "12px 14px", minHeight: 44, cursor: "pointer", borderRadius: 12,
                  border: `1px solid ${on ? C.terra : C.line}`,
                  background: on ? C.terra : C.white,
                  color: on ? C.white : C.body,
                  fontFamily: SANS, fontSize: 12.5, fontWeight: on ? 500 : 300, whiteSpace: "nowrap",
                }}>
                {has && !on && <span aria-hidden="true" style={{ color: C.terra, marginRight: 6 }}>•</span>}
                {h.label}
              </button>
            );
          })}
        </div>

<Card tone="white" style={{ position: "relative" }}>
          <div aria-hidden="true" style={{
            display: "flex", alignItems: "center", gap: 10, marginBottom: 18,
          }}>
            {HORIZONS.map((h, i) => (
              <React.Fragment key={h.k}>
                <span style={{
                  width: hz === h.k ? 13 : 9, height: hz === h.k ? 13 : 9, borderRadius: "50%",
                  background: (d.future[h.k] || "").trim() ? C.terra : C.taupe,
                  border: hz === h.k ? `2px solid ${C.terra}` : "none", flexShrink: 0,
                }} />
                {i < HORIZONS.length - 1 && <span style={{ flex: 1, height: 1, background: C.line }} />}
              </React.Fragment>
            ))}
          </div>
          <H3>{cur.label}</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>{cur.note}</P>
          <Field label="" rows={6}
            placeholder={d.futureAreas.length > 0
              ? `Denkt an: ${d.futureAreas.join(", ")}`
              : "Wie sieht euer Leben aus? Wo wohnt ihr, was macht ihr, wie geht es euch?"}
            value={d.future[hz]} onChange={(v) => setIn("future", hz, v)} />
          <div style={{ display: "flex", justifyContent: "space-between", gap: 10 }}>
            <Btn small variant="quiet" onClick={() => {
              const i = HORIZONS.findIndex((h) => h.k === hz);
              if (i > 0) setHz(HORIZONS[i - 1].k);
            }}><ChevronLeft size={14} /> Vorher</Btn>
            <Btn small variant="ghost" onClick={() => {
              const i = HORIZONS.findIndex((h) => h.k === hz);
              if (i < HORIZONS.length - 1) setHz(HORIZONS[i + 1].k);
            }}>Später <ChevronRight size={14} /></Btn>
          </div>
        </Card>

<Card>
          <H3>Euer Visionboard</H3>
          <P style={{ fontSize: 14, marginBottom: 16 }}>
            Kurze Schlagwörter statt Sätze. Tippt einen Vorschlag an oder schreibt euer eigenes – die Karte landet dann bei dem Zeitpunkt, der oben ausgewählt ist ({cur.label.toLowerCase()}).
          </P>
          <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
            <input value={tmp.vis || ""} placeholder="Zum Beispiel: Ein Haus mit Garten"
              aria-label="Eigenen Wunsch eintragen"
              onChange={(e) => setTmp((t) => ({ ...t, vis: e.target.value }))}
              onKeyDown={(e) => {
                if (e.key !== "Enter" || !(tmp.vis || "").trim()) return;
                up((p) => ({ ...p, vision: [...p.vision, { t: tmp.vis.trim(), w: hz }] }));
                setTmp((t) => ({ ...t, vis: "" }));
              }}
              style={{
                flex: 1, minWidth: 0, fontFamily: SANS, fontSize: 15.5, fontWeight: 300,
                padding: "13px 15px", borderRadius: 10, border: `1px solid ${C.line}`,
                background: C.white, outline: "none", color: C.ink, minHeight: 44,
              }} />
            <button type="button" aria-label="Wunsch hinzufügen"
              onClick={() => {
                if (!(tmp.vis || "").trim()) return;
                up((p) => ({ ...p, vision: [...p.vision, { t: tmp.vis.trim(), w: hz }] }));
                setTmp((t) => ({ ...t, vis: "" }));
              }}
              style={{
                background: C.terra, border: "none", borderRadius: 10, cursor: "pointer",
                padding: "0 17px", minHeight: 44, color: C.white, display: "grid", placeItems: "center",
              }}><Plus size={17} /></button>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {VISION_SUGGEST.filter((x) => !d.vision.some((v) => v.t === x)).map((x) => (
              <button key={x} type="button"
                onClick={() => up((p) => ({ ...p, vision: [...p.vision, { t: x, w: hz }] }))}
                style={{
                  padding: "9px 14px", minHeight: 44, cursor: "pointer", borderRadius: 22,
                  border: `1px solid ${C.line}`, background: C.white, color: C.body,
                  fontFamily: SANS, fontSize: 13, fontWeight: 300,
                  display: "inline-flex", alignItems: "center", gap: 7,
                }}>
                <Plus size={12} color={C.terra} aria-hidden="true" /> {x}
              </button>
            ))}
          </div>
        </Card>

{d.vision.length > 0 && (
          <div style={{ background: C.taupe, borderRadius: 16, padding: "26px 14px 12px", marginBottom: 20 }}>
            {HORIZONS.map((h) => {
              const items = d.vision.map((v, i) => ({ ...v, i })).filter((v) => v.w === h.k);
              if (!items.length) return null;
              return (
                <div key={h.k} style={{ marginBottom: 24 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 18 }}>
                    <span aria-hidden="true" style={{ flex: 1, height: 1, background: C.line }} />
                    <span style={{ fontFamily: SANS, fontSize: 11, letterSpacing: 2.4, fontWeight: 600, textTransform: "uppercase", color: C.ink }}>
                      {h.label}
                    </span>
                    <span aria-hidden="true" style={{ flex: 1, height: 1, background: C.line }} />
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 15 }}>
                    {items.map((v, n) => (
                      <div key={v.i} style={{ position: "relative", transform: `rotate(${[-2.4, 2, 1.3, -1.6, 2.6, -2.1][n % 6]}deg)` }}>
                        <div style={{ background: C.white, borderRadius: 3, padding: "15px 11px 18px", boxShadow: "0 5px 16px rgba(74,59,46,0.15)" }}>
                          <div style={{
                            background: `linear-gradient(150deg, ${C.sand} 0%, ${C.taupe} 100%)`,
                            borderRadius: 2, minHeight: 84, display: "flex", alignItems: "center",
                            justifyContent: "center", padding: "15px 9px", marginBottom: 11,
                          }}>
                            <span style={{ fontFamily: HAND, fontSize: 24, fontWeight: 600, lineHeight: 1.15, color: C.ink, textAlign: "center" }}>
                              {v.t}
                            </span>
                          </div>
                          <div style={{ fontFamily: SANS, fontSize: 9, letterSpacing: 1.4, fontWeight: 500, textTransform: "uppercase", color: C.muted, textAlign: "center" }}>
                            {h.label}
                          </div>
                        </div>
                        <span aria-hidden="true" style={{
                          position: "absolute", top: -8, left: "50%",
                          transform: "translateX(-50%) rotate(-3deg)", width: 50, height: 16,
                          background: "rgba(142,76,54,0.3)", border: "1px solid rgba(142,76,54,0.2)", borderRadius: 1,
                        }} />
                        <button type="button" aria-label={`${v.t} entfernen`}
                          onClick={() => up((p) => ({ ...p, vision: p.vision.filter((_, j) => j !== v.i) }))}
                          style={{
                            position: "absolute", top: -8, right: -8, width: 26, height: 26, borderRadius: "50%",
                            border: `1px solid ${C.line}`, background: C.white, cursor: "pointer",
                            display: "grid", placeItems: "center", padding: 0,
                          }}><X size={12} color={C.muted} /></button>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        )}

{filled < 2 && (
          <Pending>Beschreibt mindestens zwei Zeitpunkte – dann prüft die Auswertung hier, ob eure Zeitachse vollständig ist und wo eine Lücke klafft.</Pending>
        )}

{filled >= 2 && (
          <Result title="Eure Zeitachse">
            <P>Ihr habt {filled} von vier Zeitpunkten beschrieben.</P>
            <P>
              {!(d.future.jahr || "").trim()
                ? "Auffällig: Für das nächste Jahr steht noch nichts. Genau das ist aber der einzige Zeitraum, in dem ihr heute schon etwas tun könnt. Nehmt euch einen Punkt aus einem der späteren Felder und fragt euch, welche kleine Version davon in zwölf Monaten möglich wäre."
                : !(d.future.spaeter || "").trim()
                ? "Was noch fehlt, ist der letzte Zeitpunkt. Über „später im Leben“ sprechen die wenigsten Paare – und gerade bei unterschiedlichen Lebensphasen ist es das Feld, das am meisten Klarheit bringt."
                : "Ihr habt über alle Zeiträume nachgedacht, auch über den letzten. Das machen die wenigsten. Lest die vier Texte einmal hintereinander – daran seht ihr, ob eure Richtungen zusammenpassen."}
            </P>
            <P style={{ marginBottom: 0 }}>Nehmt euch aus dem ersten Feld eine einzige Sache mit ins Manifest. Der Rest darf offen bleiben.</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 13 – ALLTAG & RITUALE
  ======================================================= */
  const Ch13 = () => {
    const season = SEASONS.find((s) => s.k === d.dateSeason) || SEASONS[0];
    const ideas = SEASON_DATES[season.k];
    return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Beziehungen verändern sich nicht durch große Vorsätze, sondern durch das, was regelmäßig passiert.</>
          <>Deshalb zwei Listen: kleine Rituale für den Alltag und Ideen für die Abende, an denen ihr euch wirklich verabredet.</>
        </Lead>

<Card>
          <H3>Unsere Rituale</H3>
          <P style={{ fontSize: 14, marginBottom: 18 }}>Wählt höchstens drei aus. Mehr schafft im Alltag niemand, und drei eingehaltene sind mehr wert als acht guten Willens.</P>
          {RITUAL_IDEAS.map((r) => (
            <Choice key={r} label={r} selected={d.rituals.includes(r)}
              onClick={() => up((p) => ({ ...p, rituals: toggleIn(p.rituals, r) }))} />
          ))}
        </Card>

<Card tone="white">
          <H3>Date-Ideen nach Jahreszeit</H3>
          <div style={{ display: "flex", background: C.taupe, borderRadius: 40, padding: 4, marginBottom: 20 }}>
            {SEASONS.map((s) => (
              <button key={s.k} type="button" aria-pressed={d.dateSeason === s.k}
                onClick={() => up((p) => ({ ...p, dateSeason: s.k }))}
                style={{
                  flex: 1, padding: "11px 4px", minHeight: 44, cursor: "pointer", border: "none", borderRadius: 40,
                  background: d.dateSeason === s.k ? C.terra : "transparent",
                  color: d.dateSeason === s.k ? C.white : C.body,
                  fontFamily: SANS, fontSize: 13, fontWeight: 500,
                }}>{s.label}</button>
            ))}
          </div>
          {ideas.map((idea) => {
            const key = `${season.k}|${idea}`;
            const done = d.dateDone.includes(key);
            return (
              <div key={key} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "13px 0", borderBottom: `1px solid ${C.line}` }}>
                <button type="button" aria-pressed={done} aria-label={`${idea} als erledigt markieren`}
                  onClick={() => up((p) => ({ ...p, dateDone: toggleIn(p.dateDone, key) }))}
                  style={{
                    width: 22, height: 22, minWidth: 22, marginTop: 1, borderRadius: 6, cursor: "pointer",
                    border: `1px solid ${done ? C.terra : C.line}`,
                    background: done ? C.terra : C.white,
                    display: "grid", placeItems: "center", padding: 0,
                  }}>
                  {done && <Check size={12} color={C.white} />}
                </button>
                <p style={{
                  fontFamily: SANS, fontSize: 15, fontWeight: 300, lineHeight: 1.5, margin: 0,
                  color: done ? C.muted : C.body, textDecoration: done ? "line-through" : "none",
                }}>{idea}</p>
              </div>
            );
          })}
        </Card>

{d.rituals.length > 0 && (
          <Card tone="white" style={{ padding: "26px 16px 24px" }}>
            <H3>Eine Woche zum Abhaken</H3>
            <P style={{ fontSize: 14, marginBottom: 20 }}>
              Hakt ab, was ihr tatsächlich gemacht habt. Nach sieben Tagen seht ihr schneller als in jedem Gespräch, was bei euch wirklich passiert.
            </P>
            <div style={{ overflowX: "auto" }}>
              <div style={{ minWidth: 316 }}>
                <div style={{ display: "flex", marginBottom: 10 }}>
                  <span style={{ flex: 1 }} />
                  {WEEKDAYS.map((day) => (
                    <span key={day} style={{ width: 32, textAlign: "center", fontFamily: SANS, fontSize: 10.5, fontWeight: 600, color: C.muted }}>{day}</span>
                  ))}
                </div>
                {d.rituals.map((r, ri) => (
                  <div key={r} style={{ display: "flex", alignItems: "center", marginBottom: 10 }}>
                    <span style={{ flex: 1, minWidth: 0, fontFamily: SANS, fontSize: 13, fontWeight: 300, lineHeight: 1.35, color: C.body, paddingRight: 10 }}>{r}</span>
                    {WEEKDAYS.map((day, di) => {
                      const mk = `${ri}-${di}`;
                      const on = d.ritualMarks[mk];
                      return (
                        <span key={di} style={{ width: 32, display: "flex", justifyContent: "center" }}>
                          <button type="button" aria-pressed={!!on} aria-label={`${r} am ${day}`}
                            onClick={() => up((pp) => ({ ...pp, ritualMarks: { ...pp.ritualMarks, [mk]: !pp.ritualMarks[mk] } }))}
                            style={{
                              width: 26, height: 26, borderRadius: "50%", cursor: "pointer", padding: 0,
                              border: `1px solid ${on ? C.terra : C.line}`,
                              background: on ? C.terra : C.white, display: "grid", placeItems: "center",
                            }}>
                            {on && <Check size={13} color={C.white} />}
                          </button>
                        </span>
                      );
                    })}
                  </div>
                ))}
              </div>
            </div>
            <Field label="Rückblick auf die Woche" optional rows={3}
              hint="An welchem Tag lief es am besten – und was war da anders? Was ist als Erstes ausgefallen, als es stressig wurde?"
              value={d.weekNote} onChange={(v) => up((pp) => ({ ...pp, weekNote: v }))} />
          </Card>
        )}

<Card>
          <H3>Wie fühlt sich euer Alltag gerade an?</H3>
          <P style={{ fontSize: 14, marginBottom: 20 }}>
            Verteilt hundert Prozent auf die drei Zustände. Es geht nicht um Genauigkeit, sondern um das Bauchgefühl.
          </P>
          {MOOD_BARS.map((m, i) => (
            <div key={m.k} style={{ marginBottom: 22 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
                <span style={{ fontFamily: SANS, fontSize: 15, fontWeight: 400, color: C.ink }}>{m.label}</span>
                <span style={{ fontFamily: SERIF, fontSize: 21, fontWeight: 500, color: C.terra }}>{d.mood[m.k]} %</span>
              </div>
              <div style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 300, color: C.muted, marginBottom: 9 }}>{m.note}</div>
              <div aria-hidden="true" style={{ height: 15, background: C.taupe, borderRadius: 10, overflow: "hidden", marginBottom: 7 }}>
                <div style={{ height: "100%", width: `${d.mood[m.k]}%`, borderRadius: 10, transition: "width .25s", background: [C.terra, "#B08A6E", C.sage][i] }} />
              </div>
              <input type="range" min="0" max="100" step="5" value={d.mood[m.k]}
                aria-label={`${m.label} in Prozent`}
                onChange={(e) => setIn("mood", m.k, Number(e.target.value))}
                style={{ width: "100%", accentColor: C.terra, height: 30 }} />
            </div>
          ))}
          {(() => {
            const sum = MOOD_BARS.reduce((acc, m) => acc + d.mood[m.k], 0);
            return (
              <p style={{ fontFamily: SANS, fontSize: 13, fontWeight: 300, textAlign: "right", color: sum === 100 ? C.muted : C.terra, margin: 0 }}>
                {sum === 100 ? "Summe stimmt." : `Zusammen ${sum} % – zieht es auf hundert.`}
              </p>
            );
          })()}
        </Card>

{(d.rituals.length > 0 || d.dateDone.length > 0) && (
          <Result title="Euer Alltag">
            <P>
              {d.rituals.length > 0 && `${d.rituals.length} ${d.rituals.length === 1 ? "Ritual" : "Rituale"} ausgewählt. `}
              {d.dateDone.length > 0 && `${d.dateDone.length} ${d.dateDone.length === 1 ? "Idee" : "Ideen"} bereits abgehakt.`}
            </P>
            <P>
              {d.rituals.length > 3
                ? "Das sind mehr als drei. Erfahrungsgemäß überlebt davon höchstens die Hälfte den ersten stressigen Monat. Streicht bewusst, statt es später schleifen zu lassen."
                : d.rituals.length > 0
                ? "Eine gute Zahl. Legt jetzt noch fest, wer im Zweifel daran erinnert – Rituale ohne Zuständigkeit schlafen leise ein."
                : "Noch kein Ritual ausgewählt. Nehmt eins, das weniger als fünf Minuten kostet. Genau die halten am längsten."}
            </P>
            <P style={{ marginBottom: 0 }}>Und tragt eine der Date-Ideen diese Woche in den Kalender ein. Eine Liste, aus der nie etwas wird, ist nur eine weitere Liste.</P>
          </Result>
        )}

{(() => {
          const dom = MOOD_BARS.reduce((acc, m) => (d.mood[m.k] > d.mood[acc.k] ? m : acc), MOOD_BARS[0]);
          const txt = {
            nah: "Der größte Teil eurer Zeit fühlt sich verbunden an. Das ist eine schöne Ausgangslage – und der beste Moment, um die unbequemen Themen anzugehen. Aus Sicherheit heraus zu reden ist leichter als aus einer Krise heraus.",
            mittel: "Der größte Teil liegt im Dazwischen. So leben die meisten Paare über weite Strecken: Es ist nichts falsch, aber auch nichts besonders. Genau hier wirken kleine Rituale stärker als große Gespräche.",
            fern: "Der größte Teil fühlt sich gerade auf Distanz an. Das ist ein ernstzunehmendes Signal, aber kein Urteil über euch. Lasst große Pläne weg und sucht euch eine einzige tägliche Berührung mit dem Alltag der anderen Person – eine Frage, ein Anruf, zehn Minuten am Abend.",
          }[dom.k];
          return (
            <Result title="Was ihr daraus mitnehmt">
              <P>Am stärksten ist gerade <strong style={{ fontWeight: 600, color: C.ink }}>{dom.label.toLowerCase()}</strong>. {txt}</P>
              <P style={{ marginBottom: 0 }}>
                {d.mood.fern >= 30
                  ? "Und ein Hinweis: Bei diesem Anteil an Distanz würde ich beim ersten Ritual bewusst etwas wählen, das täglich stattfindet – nicht etwas Großes am Wochenende."
                  : "Kommt in ein paar Wochen zurück und schaut, ob sich die Verteilung verschoben hat. Das ist aussagekräftiger als der heutige Stand."}
              </P>
            </Result>
          );
        })()}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 14 – MANIFEST
  ======================================================= */
  const manifestText = (() => {
    const L = [];
    L.push("UNSER BEZIEHUNGSMANIFEST");
    L.push(`${names.a} und ${names.b}`);
    L.push("");
    if (d.core.length === 3) {
      L.push("UNSERE DREI WERTE");
      L.push(`Unsere Beziehung soll geprägt sein von ${d.core[0]}, ${d.core[1]} und ${d.core[2]}.`);
      L.push("");
    }
    const admireA = (d.seen.a || {}).bewundere, admireB = (d.seen.b || {}).bewundere;
    if ((admireA || "").trim() || (admireB || "").trim()) {
      L.push("WAS WIR ANEINANDER SCHÄTZEN");
      if ((admireA || "").trim()) L.push(`${names.a}: ${admireA.trim()}`);
      if ((admireB || "").trim()) L.push(`${names.b}: ${admireB.trim()}`);
      L.push("");
    }
    const pauseBits = [...(d.pause.erkennen || []), d.pause.dauer, d.pause.zusage, d.pause.zurueck].filter((x) => (x || "").trim());
    if (pauseBits.length) {
      L.push("WIE WIR KONFLIKTE FÜHREN");
      pauseBits.forEach((b) => L.push(`— ${b.trim()}`));
      L.push("");
    }
    if (d.outside.private.length) {
      L.push("WAS WIR NACH AUSSEN SCHÜTZEN");
      L.push(d.outside.private.join(" · "));
      L.push("");
    }
    if ((d.future.jahr || "").trim()) {
      L.push("WAS WIR GEMEINSAM AUFBAUEN");
      L.push(d.future.jahr.trim());
      L.push("");
    }
    if (d.rituals.length) {
      L.push("UNSERE RITUALE");
      d.rituals.forEach((r) => L.push(`— ${r}`));
      L.push("");
    }
    if ((d.promise || "").trim()) {
      L.push("UNSER VERSPRECHEN");
      L.push(d.promise.trim());
      L.push("");
    }
    L.push(new Date().toLocaleDateString("de-DE", { day: "2-digit", month: "long", year: "numeric" }));
    return L.join("\n");
  })();

const PosterCard = () => {
    const ready = WHEEL_AREAS.some((x) => d.wheel.a[x.k]) || WHEEL_AREAS.some((x) => d.wheel.b[x.k]);
    return (
      <Card tone="white">
        <Kicker>Zum Aufhängen</Kicker>
        <H3>Euer Bild</H3>
        <P style={{ fontSize: 14, marginBottom: ready ? 18 : 0 }}>
          Alles, was ihr eingetragen habt, auf einer Seite: euer Rad, die Zeit, die euch beiden guttut, eure Zeitleiste.
          Als Bild zum Speichern – für den Kühlschrank, den Sperrbildschirm oder um es jemandem zu schicken.
        </P>
        {!ready ? (
          <P style={{ fontSize: 14, marginBottom: 0, fontStyle: "italic", color: C.muted }}>
            Sobald ihr in Kapitel 2 die acht Regler eingestellt habt, entsteht hier eure Seite.
          </P>
        ) : (
          <>
            <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
              <canvas ref={posterMount} width={PW} height={PH}
                aria-label="Euer Bild"
                style={{ width: "100%", height: "auto", display: "block" }} />
            </div>

{!tmp.posterImg ? (
              <>
                <Btn small onClick={sharePoster}>Bild sichern</Btn>
                <p style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 300, lineHeight: 1.55, color: C.muted, marginTop: 12, marginBottom: 0 }}>
                  Falls sich kein Menü öffnet, erscheint das Bild direkt hier – dann lange darauf tippen und „Bild sichern“ wählen.
                </p>
              </>
            ) : (
              <div>
                <div style={{ background: C.sand, borderRadius: 12, padding: "14px 16px", marginBottom: 14 }}>
                  <p style={{ fontFamily: SANS, fontSize: 14, fontWeight: 500, color: C.ink, margin: "0 0 6px" }}>
                    Fast geschafft
                  </p>
                  <p style={{ fontFamily: SANS, fontSize: 13.5, fontWeight: 300, lineHeight: 1.6, color: C.body, margin: 0 }}>
                    Tippt unten <strong style={{ fontWeight: 500, color: C.ink }}>lange auf das Bild</strong> und wählt
                    „Bild sichern“ beziehungsweise „Zu Fotos hinzufügen“. Am Rechner klappt ein Rechtsklick und
                    „Bild speichern unter“.
                  </p>
                </div>
                <img src={tmp.posterImg} alt="Euer Bild zum Speichern"
                  style={{
                    width: "100%", height: "auto", display: "block", borderRadius: 12,
                    border: `1px solid ${C.line}`, marginBottom: 14,
                  }} />
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <a href={tmp.posterImg} download={tmp.posterName || "wir-zwei.png"}
                    style={{
                      display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none",
                      fontFamily: SANS, fontSize: 14, fontWeight: 500, color: C.terra,
                      border: `1px solid ${C.line}`, borderRadius: 24, padding: "11px 18px", minHeight: 44,
                      boxSizing: "border-box",
                    }}>Stattdessen herunterladen</a>
                  <Btn small variant="quiet" onClick={() => setTmp((t) => ({ ...t, posterImg: null }))}>
                    Fertig
                  </Btn>
                </div>
              </div>
            )}

{tmp.posterFail && (
              <p style={{ fontFamily: SANS, fontSize: 13, color: C.muted, marginTop: 12, marginBottom: 0 }}>
                Das hat nicht geklappt. Macht stattdessen einfach einen Screenshot der Vorschau oben –
                das Ergebnis ist dasselbe.
              </p>
            )}
          </>
        )}
      </Card>
    );
  };

const Ch14 = () => {
    const blocks = [
      { h: "Unsere drei Werte", body: d.core.length === 3 ? `Unsere Beziehung soll geprägt sein von ${d.core[0]}, ${d.core[1]} und ${d.core[2]}.` : null, from: "Kapitel 6", to: 6 },
      { h: "Was wir aneinander schätzen", body: [(d.seen.a || {}).bewundere, (d.seen.b || {}).bewundere].filter((x) => (x || "").trim()).join("\n"), from: "Kapitel 3", to: 3 },
      { h: "Wie wir Konflikte führen", body: [...(d.pause.erkennen || []), d.pause.dauer, d.pause.zusage, d.pause.zurueck].filter((x) => (x || "").trim()).join("\n"), from: "Kapitel 5", to: 5 },
      { h: "Was wir nach außen schützen", body: d.outside.private.length ? d.outside.private.join(" · ") : null, from: "Kapitel 9", to: 9 },
      { h: "Was wir gemeinsam aufbauen", body: (d.future.jahr || "").trim() || null, from: "Kapitel 12", to: 12 },
      { h: "Unsere Rituale", body: d.rituals.length ? d.rituals.join("\n") : null, from: "Kapitel 13", to: 13 },
    ];
    const ready = blocks.filter((b) => b.body).length;

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Dieses Kapitel schreibt sich fast von selbst – alles, was hier steht, habt ihr in den Kapiteln davor schon beantwortet.</>
          <>Es fehlt nur noch ein einziger Satz. Und der ist der schwerste.</>
        </Lead>

<div id="manifest" style={{
          background: C.white, borderRadius: 16, padding: "34px 24px 30px", marginBottom: 20,
          border: `1px solid ${C.line}`,
        }}>
          <div style={{ textAlign: "center", marginBottom: 26, paddingBottom: 22, borderBottom: `1px solid ${C.line}` }}>
            <div aria-hidden="true" style={{ color: C.line, fontSize: 14, letterSpacing: 8, marginBottom: 12 }}>✦ ✦ ✦</div>
            <p style={{ fontFamily: SANS, fontSize: 11.5, letterSpacing: 3, fontWeight: 600, textTransform: "uppercase", color: C.muted, margin: "0 0 8px" }}>
              Unser Beziehungsmanifest
            </p>
            <p style={{ fontFamily: HAND, fontSize: 34, fontWeight: 600, color: C.ink, margin: 0, lineHeight: 1.15 }}>
              {names.a} & {names.b}
            </p>
          </div>

{blocks.map((b) => (
            <div key={b.h} style={{ marginBottom: 22 }}>
              <div style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.6, textTransform: "uppercase", color: C.terra, marginBottom: 8 }}>
                {b.h}
              </div>
              {b.body ? (
                b.body.split("\n").map((line, i) => (
                  <p key={i} style={{ fontFamily: SERIF, fontSize: 19, lineHeight: 1.5, color: C.ink, margin: "0 0 6px" }}>{line}</p>
                ))
              ) : (
                <button type="button" onClick={() => go(b.to)} className="no-print"
                  style={{
                    background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left",
                    fontFamily: SANS, fontSize: 14, fontWeight: 300, fontStyle: "italic",
                    color: C.muted, textDecoration: "underline", minHeight: 44,
                  }}>
                  Noch offen – in {b.from} ergänzen
                </button>
              )}
            </div>
          ))}

<div style={{ marginBottom: 8 }}>
            <div style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.6, textTransform: "uppercase", color: C.terra, marginBottom: 8 }}>
              Unser Versprechen
            </div>
            {(d.promise || "").trim() ? (
              <p style={{ fontFamily: SERIF, fontSize: 21, fontStyle: "italic", lineHeight: 1.5, color: C.ink, margin: 0 }}>
                {d.promise}
              </p>
            ) : (
              <p className="no-print" style={{ fontFamily: SANS, fontSize: 14, fontStyle: "italic", color: C.muted, margin: 0 }}>
                Steht noch aus – gleich unten.
              </p>
            )}
          </div>
        </div>

<Card>
          <Field label="Ein Versprechen, das wir uns geben"
            hint="Ein Satz. Nicht groß, sondern einhaltbar. Ein Versprechen, das ihr nur an guten Tagen halten könnt, ist keins."
            placeholder="Zum Beispiel: Wir gehen nicht schlafen, ohne einander gesagt zu haben, woran wir gerade sind."
            rows={3} value={d.promise} onChange={(v) => up((p) => ({ ...p, promise: v }))} />
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn small onClick={doCopy}>
              {copied ? <><Check size={14} /> Kopiert</> : <><Copy size={14} /> Text kopieren</>}
            </Btn>
            <Btn small variant="ghost" onClick={() => window.print()}>
              <Printer size={14} /> Drucken oder als PDF
            </Btn>
          </div>
          {tmp.copyFail && (
            <p style={{ fontFamily: SANS, fontSize: 13, color: C.muted, marginTop: 12, marginBottom: 0 }}>
              Das Kopieren hat dein Browser blockiert. Nutz stattdessen „Drucken oder als PDF“.
            </p>
          )}
        </Card>

{PosterCard()}

{ready < 3 && (
          <Pending>Euer Manifest füllt sich automatisch, sobald ihr die verlinkten Kapitel bearbeitet habt. Sobald drei Abschnitte stehen, findet ihr hier den letzten Hinweis dazu.</Pending>
        )}

{ready >= 3 && (
          <Result title="Was ihr jetzt damit macht">
            <P>{ready} von sechs Abschnitten sind gefüllt. Die offenen Punkte könnt ihr jederzeit nachtragen – sie erscheinen hier automatisch.</P>
            <P style={{ marginBottom: 0 }}>Druckt es aus und hängt es irgendwo hin, wo ihr es seht. Nicht als Dekoration, sondern als Erinnerung: An dem Tag, an dem ihr das geschrieben habt, wart ihr euch über all das einig.</P>
          </Result>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 15 – UNSERE LISTE
  ======================================================= */
  const listText = (() => {
    const L = [];
    L.push("UNSERE LISTE");
    L.push(`${names.a} und ${names.b}`);
    L.push("");
    if (d.core.length === 3) {
      L.push("UNSERE DREI WERTE");
      L.push(d.core.join(" · "));
      L.push("");
    }
    const lab = (k) => (AFFECTION.find((x) => x.k === k) || {}).label;
    if (d.affection.a.length || d.affection.b.length) {
      L.push("WODURCH WIR UNS GELIEBT FÜHLEN");
      if (d.affection.a.length) L.push(`${names.a}: ${d.affection.a.map(lab).join(", ")}`);
      if (d.affection.b.length) L.push(`${names.b}: ${d.affection.b.map(lab).join(", ")}`);
      L.push("");
    }
    if (d.rituals.length) {
      L.push("UNSERE RITUALE");
      d.rituals.forEach((r) => L.push(`- ${r}`));
      L.push("");
    }
    const open = [];
    SEASONS.forEach((se) => SEASON_DATES[se.k].forEach((idea) => {
      if (!d.dateDone.includes(`${se.k}|${idea}`)) open.push(`${se.label}: ${idea}`);
    }));
    const done = d.dateDone.map((k) => {
      const [sk, idea] = k.split("|");
      const se = SEASONS.find((x) => x.k === sk);
      return `${se ? se.label : ""}: ${idea}`;
    });
    if (done.length) {
      L.push("DATE-IDEEN, DIE WIR SCHON GEMACHT HABEN");
      done.forEach((x) => L.push(`- ${x}`));
      L.push("");
    }
    if (d.vision.length) {
      L.push("UNSER VISIONBOARD");
      HORIZONS.forEach((h) => {
        const items = d.vision.filter((v) => v.w === h.k);
        if (items.length) L.push(`${h.label}: ${items.map((v) => v.t).join(" · ")}`);
      });
      L.push("");
    }
    const pause = [...(d.pause.erkennen || []), d.pause.dauer, d.pause.zusage, d.pause.zurueck].filter((x) => (x || "").trim());
    if (pause.length) {
      L.push("UNSERE PAUSE-REGEL");
      pause.forEach((x) => L.push(`- ${x.trim()}`));
      L.push("");
    }
    const qtBoth = (d.qtime.a || []).filter((x) => (d.qtime.b || []).includes(x))
      .map((k) => (QUALITY_TIME.find((y) => y.k === k) || {}).label);
    if (qtBoth.length) {
      L.push("ZEIT, DIE UNS BEIDEN GUTTUT");
      qtBoth.forEach((x) => L.push(`- ${x}`));
      L.push("");
    }
    if ((d.repair || "").trim()) {
      L.push("UNSER SATZ FÜR DANACH");
      L.push(d.repair.trim());
      L.push("");
    }
    if (d.outside.private.length) {
      L.push("DAS BLEIBT PRIVAT");
      L.push(d.outside.private.join(" · "));
      L.push("");
    }
    L.push(new Date().toLocaleDateString("de-DE", { day: "2-digit", month: "long", year: "numeric" }));
    return L.join("\n");
  })();

return (
      <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
        <Lead>
          <>Das Manifest ist das Feierliche. Das hier ist das Praktische.</>
          <>Alles, was ihr euch vorgenommen habt, an einer Stelle: zum Kopieren in eure Notizen, zum Ausdrucken für den Kühlschrank, zum Wiederlesen in einem halben Jahr.</>
        </Lead>

<Card tone="white">
          {groups.map((g, gi) => (
            <div key={g.h} style={{ marginBottom: gi === groups.length - 1 ? 0 : 24 }}>
              <div style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.6, textTransform: "uppercase", color: C.terra, marginBottom: 10 }}>
                {g.h}
              </div>
              {g.items.length ? (
                g.items.map((it, i) => (
                  <div key={i} style={{ display: "flex", gap: 11, marginBottom: 7 }}>
                    <span aria-hidden="true" style={{ color: C.line, flexShrink: 0 }}>—</span>
                    <span style={{ fontFamily: SANS, fontSize: 15, fontWeight: 300, lineHeight: 1.6, color: C.body }}>{it}</span>
                  </div>
                ))
              ) : (
                <button type="button" onClick={() => go(g.to)} className="no-print"
                  style={{
                    background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left",
                    fontFamily: SANS, fontSize: 14, fontWeight: 300, fontStyle: "italic",
                    color: C.muted, textDecoration: "underline", minHeight: 44,
                  }}>{g.empty} ergänzen</button>
              )}
            </div>
          ))}
        </Card>

{openDates.length > 0 && (
          <Card>
            <H3>Was noch offen ist</H3>
            <P style={{ fontSize: 14, marginBottom: 16 }}>
              Diese Date-Ideen habt ihr noch nicht abgehakt. Sucht euch drei aus und tragt sie in den Kalender ein – nicht irgendwann, sondern mit Datum.
            </P>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {openDates.slice(0, 8).map((x, i) => (
                <span key={i} style={{
                  fontFamily: SANS, fontSize: 13, fontWeight: 300, color: C.body,
                  background: C.white, border: `1px solid ${C.line}`, borderRadius: 22, padding: "8px 14px",
                }}>{x.idea}</span>
              ))}
            </div>
          </Card>
        )}

<Card>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn small onClick={async () => {
              try {
                await navigator.clipboard.writeText(listText);
                setCopied(true); setTimeout(() => setCopied(false), 1800);
              } catch (e) { setTmp((t) => ({ ...t, copyFail2: true })); }
            }}>
              {copied ? <><Check size={14} /> Kopiert</> : <><Copy size={14} /> Liste kopieren</>}
            </Btn>
            <Btn small variant="ghost" onClick={() => window.print()}>
              <Printer size={14} /> Drucken oder als PDF
            </Btn>
          </div>
          {tmp.copyFail2 && (
            <p style={{ fontFamily: SANS, fontSize: 13, color: C.muted, marginTop: 12, marginBottom: 0 }}>
              Das Kopieren hat euer Browser blockiert. Nutzt stattdessen „Drucken oder als PDF“.
            </p>
          )}
        </Card>

{filledGroups >= 3 ? (
          <Result title="Was diese Liste wert ist">
            <P>{filledGroups} von {groups.length} Abschnitten sind gefüllt. Das ist mehr, als die meisten Paare je schriftlich festhalten.</P>
            <P>
              Kopiert sie euch beide in die Notizen auf dem Handy. Nicht als Pflicht, sondern als Nachschlagewerk:
              Wenn ihr in drei Monaten nicht wisst, was ihr am Wochenende machen sollt, steht es hier.
              Und wenn es kracht, steht eure Pause-Regel hier – schwarz auf weiß, aus einem Moment, in dem ihr beide ruhig wart.
            </P>
            <P style={{ marginBottom: 0 }}>
              Setzt euch außerdem eine Erinnerung in sechs Monaten. Dann kommt ihr her, lest diese Liste und seht ziemlich genau,
              was ihr davon wirklich gelebt habt.
            </P>
          </Result>
        ) : (
          <Pending>
            Diese Liste füllt sich von selbst, während ihr die anderen Kapitel bearbeitet.
            Sobald drei Abschnitte stehen, findet ihr hier eine Einordnung dazu.
          </Pending>
        )}
      </Steps>
    );
  };

/* =======================================================
     KAPITEL 16 – BRIEF AN DICH
  ======================================================= */
  const Ch16 = () => (
    <Steps step={step} setStep={setStep} setStepCount={setStepCount} setStepIsIntro={setStepIsIntro} setFirstTask={setFirstTask} chapter={screen}>
      <Lead>
        <>Am Anfang entscheidet man sich einmal füreinander. Danach jeden Tag wieder – nur sagt es irgendwann niemand mehr laut.</>
        <>Genau dafür ist dieses letzte Kapitel da.</>
      </Lead>

<Card tone="white">
        <H3>{names[who]} schreibt an {other(who)}</H3>
        <P style={{ fontSize: 14, marginBottom: 14 }}>
          Warum ich mich heute wieder für dich entscheide. Kein perfekter Text – lieber ein ehrlicher. Schreibt so, wie ihr redet.
        </P>
        <P style={{ fontSize: 14, marginBottom: 10 }}>
          Falls der Anfang schwerfällt: Nimm einen dieser Sätze, schreib ihn ab und mach einfach weiter.
        </P>
        <div style={{ marginBottom: 18 }}>
          {[
            "Was ich dir viel zu selten sage, ist …",
            "Wofür ich dir nie richtig gedankt habe: …",
            "Wenn ich an das letzte Jahr mit dir denke, dann …",
            "Woran ich gemerkt habe, dass du es ernst meinst: …",
          ].map((s) => (
            <div key={s} style={{
              fontFamily: SERIF, fontSize: 17, fontStyle: "italic", lineHeight: 1.5, color: C.body,
              background: C.sand, borderRadius: 10, padding: "10px 14px", marginBottom: 6,
            }}>{s}</div>
          ))}
        </div>
        <textarea rows={12} value={d.letters[who] || ""}
          aria-label={`Brief von ${names[who]} an ${other(who)}`}
          placeholder={`Liebe:r ${other(who)}, …`}
          onChange={(e) => setIn("letters", who, e.target.value)}
          style={{
            width: "100%", boxSizing: "border-box", resize: "vertical",
            fontFamily: SERIF, fontSize: 19, fontWeight: 400, lineHeight: 1.7, color: C.ink,
            background: C.sand, border: `1px solid ${C.line}`, borderRadius: 12,
            padding: "20px 20px", outline: "none",
          }} />
      </Card>

<Card>
        <Field label="Wann wollt ihr diese Briefe wieder lesen?" optional rows={1}
          hint="Ein Datum reicht. Tragt es euch gleich in den Kalender ein – sonst passiert es nicht."
          placeholder="Zum Beispiel: an unserem Jahrestag"
          value={d.letterDate} onChange={(v) => up((p) => ({ ...p, letterDate: v }))} />
      </Card>

{!((d.letters.a || "").trim() && (d.letters.b || "").trim()) && (
        <Pending>
          Wenn beide Briefe geschrieben sind, steht hier, wie ihr sie euch am besten gegenseitig gebt –
          und warum es sich lohnt, ein Datum festzulegen, an dem ihr sie noch einmal lest.
        </Pending>
      )}

{(d.letters.a || "").trim() && (d.letters.b || "").trim() && (
        <Result title="Beide Briefe sind geschrieben">
          <P>Lest sie euch nicht selbst durch. Lest sie euch gegenseitig vor – laut, und ohne zwischendurch zu kommentieren.</P>
          <P style={{ marginBottom: 0 }}>
            {(d.letterDate || "").trim()
              ? `Und dann kommt wieder, wenn es so weit ist: ${d.letterDate.trim()}.`
              : "Und setzt euch ein Datum, an dem ihr sie erneut lest. In einem Jahr klingen diese Zeilen völlig anders."}
          </P>
        </Result>
      )}
    </Steps>
  );

/* =======================================================
     ABSCHLUSS
  ======================================================= */
  const Ende = () => (
    <div style={{ textAlign: "center", paddingTop: 20 }}>
      <div aria-hidden="true" style={{ color: C.line, fontSize: 17, letterSpacing: 10, marginBottom: 24 }}>✦ ✦ ✦</div>
      <H2>Das war die Reise</H2>
      <p style={{
        fontFamily: SERIF, fontSize: "clamp(20px, 4.8vw, 25px)", fontStyle: "italic",
        lineHeight: 1.55, color: C.ink, maxWidth: 480, margin: "26px auto 30px",
      }}>
        Nicht die Umstände entscheiden über die Qualität einer Beziehung. Entscheidend ist, wie zwei Menschen einander sehen, respektieren und gemeinsam wachsen.
      </p>
      <p style={{ fontFamily: SANS, fontSize: 15.5, fontWeight: 300, lineHeight: 1.7, color: C.body, maxWidth: 470, margin: "0 auto 34px" }}>
        Alles bleibt gespeichert. Kommt in ein paar Monaten zurück, lest euer Manifest und schaut, was inzwischen anders ist. Genau dafür ist dieses Journal gemacht.
      </p>
      <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap", marginBottom: 40 }}>
        <Btn onClick={() => go(14)}>Zum Manifest</Btn>
        <Btn variant="ghost" onClick={() => go("toc")}>Zur Übersicht</Btn>
      </div>

<div style={{ borderTop: `1px solid ${C.line}`, paddingTop: 24, marginBottom: 26 }}>
        <button type="button" onClick={async () => {
          if (!window.confirm("Wirklich alle Antworten löschen? Das lässt sich nicht rückgängig machen.")) return;
          if (!window.confirm("Letzte Sicherheitsfrage: Alle sechzehn Kapitel werden geleert. Fortfahren?")) return;
          try { await store.del(STORAGE_KEY); } catch (e) { /* war nichts da */ }
          window.location.reload();
        }} style={{
          background: "none", border: "none", cursor: "pointer", minHeight: 44,
          fontFamily: SANS, fontSize: 13, color: C.muted,
          display: "inline-flex", alignItems: "center", gap: 8,
        }}>
          <RotateCcw size={13} aria-hidden="true" /> Alle Antworten zurücksetzen
        </button>
      </div>
      {FinePrint()}
    </div>
  );

/* =======================================================
     HÜLLE
  ======================================================= */
  const SCREENS = { 1: Ch1, 2: Ch2, 3: Ch3, 4: Ch4, 5: Ch5, 6: Ch6, 7: Ch7, 8: Ch8,
    9: Ch9, 10: Ch10, 11: Ch11, 12: Ch12, 13: Ch13, 14: Ch14, 15: Ch15, 16: Ch16 };
  const meta = typeof screen === "number" ? CH.find((c) => c.id === screen) : null;
  const Body = screen === "welcome" ? Welcome : screen === "toc" ? Toc : screen === "ende" ? Ende : SCREENS[screen];

return (
    <div style={{ minHeight: "100vh", background: C.paper, paddingBottom: 120 }}>
      {/* Kapitelnavigation */}
      {typeof screen === "number" && (
        <header className="no-print" style={{
          position: "sticky", top: 0, zIndex: 20, background: C.paper,
          borderBottom: `1px solid ${C.line}`, padding: "10px 16px 12px",
        }}>
          <div style={{ maxWidth: 680, margin: "0 auto" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: meta ? 6 : 8 }}>
              <button type="button" onClick={() => go("toc")}
                style={{
                  display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer",
                  border: `1px solid ${C.line}`, background: C.white, borderRadius: 20,
                  padding: "7px 13px", minHeight: 36, flexShrink: 0,
                  fontFamily: SANS, fontSize: 12.5, fontWeight: 500, color: C.body,
                }}>
                <ChevronLeft size={13} color={C.terra} /> Übersicht
              </button>
              <span style={{ flex: 1 }} />
              {meta && meta.mode === "erst allein" && !stepIsIntro && (
                <div role="group" aria-label="Person wechseln" style={{
                  display: "flex", flexShrink: 0, border: `1px solid ${C.line}`,
                  borderRadius: 20, overflow: "hidden", background: C.white,
                }}>
                  {["a", "b"].map((k) => (
                    <button key={k} type="button" onClick={() => setWho(k)}
                      aria-pressed={who === k}
                      style={{
                        padding: "7px 13px", minHeight: 36, cursor: "pointer", border: "none",
                        background: who === k ? C.terra : "transparent",
                        color: who === k ? C.white : C.muted,
                        fontFamily: SANS, fontSize: 12.5, fontWeight: 500,
                        maxWidth: 92, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                      }}>{names[k]}</button>
                  ))}
                </div>
              )}
            </div>
            {meta && (
              <p style={{
                fontFamily: SERIF, fontSize: 19, fontWeight: 500, lineHeight: 1.25,
                color: C.ink, margin: "0 0 9px",
              }}>
                <span style={{
                  fontFamily: SANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.4,
                  textTransform: "uppercase", color: C.terra, marginRight: 9,
                }}>Kapitel {meta.id}</span>
                {meta.title}
              </p>
            )}
            <nav ref={railRef} aria-label="Kapitel" style={{ display: "flex", gap: 4, overflowX: "auto", paddingBottom: 6 }}>
              {CH.map((c) => (
                <button key={c.id} type="button" onClick={() => go(c.id)} data-ch={c.id}
                  aria-label={`Kapitel ${c.id}: ${c.title}`}
                  aria-current={screen === c.id ? "step" : undefined}
                  style={{
                    flexShrink: 0, minWidth: 30, height: 30, borderRadius: 8, cursor: "pointer",
                    border: `1px solid ${screen === c.id ? C.terra : "transparent"}`,
                    background: screen === c.id ? C.terra : chapterFilled(c.id) ? C.taupe : "transparent",
                    color: screen === c.id ? C.white : C.muted,
                    fontFamily: SANS, fontSize: 12, fontWeight: 500, padding: 0,
                  }}>{c.id}</button>
              ))}
            </nav>
            <div style={{ height: 3, background: C.taupe, borderRadius: 3, overflow: "hidden" }}>
              <div style={{ height: "100%", width: `${pct}%`, background: C.terra, transition: "width .35s" }} />
            </div>
          </div>
        </header>
      )}

<main style={{ maxWidth: 640, margin: "0 auto", padding: "40px 20px 0" }}>
        {meta && (
          <div style={{ marginBottom: 14 }}>
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 9, marginBottom: 14 }}>
              <span style={{ fontFamily: SANS, fontSize: 12, letterSpacing: 2.6, fontWeight: 600, textTransform: "uppercase", color: C.terra }}>
                Kapitel {meta.id}
              </span>
              <Pill tone={meta.mode === "gemeinsam" ? "duo" : "solo"}>{meta.mode}</Pill>
              {meta.ageGap && <Pill tone="gap">Altersunterschied</Pill>}
            </div>
            <H2>{meta.title}</H2>
          </div>
        )}
        {Body()}
      </main>

{/* Rechtliche Fußzeile – auf jeder Seite erreichbar */}
      <footer style={{
        maxWidth: 640, margin: "48px auto 0", padding: "22px 20px 0",
        borderTop: `1px solid ${C.line}`, textAlign: "center",
      }}>
        <p style={{
          fontFamily: SANS, fontSize: 13, fontWeight: 400, lineHeight: 1.7,
          color: C.body, margin: "0 0 10px",
        }}>
          <a href="./impressum.html" style={{ color: C.terra, textDecoration: "none" }}>Impressum</a>
          <span aria-hidden="true" style={{ color: C.line, margin: "0 10px" }}>·</span>
          <a href="./datenschutz.html" style={{ color: C.terra, textDecoration: "none" }}>Datenschutz</a>
        </p>
        <p style={{
          fontFamily: SANS, fontSize: 12, fontWeight: 300, lineHeight: 1.6,
          color: C.muted, margin: 0,
        }}>
          Die Abbuchung erfolgt durch Digistore24.com
        </p>
      </footer>

{/* Hinweis am Kapitelende */}
      {typeof screen === "number" && step === stepCount - 1 && !offenePerson && screen < CH.length && chapterFilled(screen) && (
        <p className="no-print" style={{
          maxWidth: 640, margin: "0 auto", padding: "0 20px",
          fontFamily: SERIF, fontSize: 18, fontStyle: "italic", lineHeight: 1.6,
          color: C.muted, textAlign: "center",
        }}>
          Ein guter Moment, um für heute Schluss zu machen. Redet noch kurz darüber – morgen geht es weiter.
        </p>
      )}

{/* Navigation – bleibt unten am Bildschirmrand stehen */}
      {screen !== "welcome" && (
        <nav className="no-print" aria-label="Seitennavigation" style={{
          position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 30,
          background: C.paper, borderTop: `1px solid ${C.line}`,
          padding: "12px 18px calc(12px + env(safe-area-inset-bottom, 0px))",
        }}>
          <div style={{
            maxWidth: 640, margin: "0 auto", display: "flex",
            alignItems: "center", justifyContent: "space-between", gap: 10,
          }}>
            <Btn small variant="quiet" onClick={prev}
              style={{ flexShrink: 0, paddingLeft: 14, paddingRight: 16 }}>
              <ChevronLeft size={15} /> Zurück
            </Btn>
            {screen !== "ende" ? (
              <Btn small onClick={next} style={{ flex: 1, maxWidth: 260 }}>
                {screen === "toc"
                  ? "Kapitel 1"
                  : typeof screen === "number" && step < stepCount - 1
                    ? "Weiter"
                    : offenePerson
                      ? `Weiter mit ${names[offenePerson]}`
                      : screen === CH.length ? "Abschluss" : "Nächstes Kapitel"} <ChevronRight size={15} />
              </Btn>
            ) : <span />}
          </div>
        </nav>
      )}

{/* Meilenstein */}
      {milestone && (
        <div role="dialog" aria-modal="true" aria-labelledby="ms-t" className="no-print"
          style={{
            position: "fixed", inset: 0, zIndex: 60, background: "rgba(74,59,46,0.42)",
            display: "grid", placeItems: "center", padding: 22,
          }}
          onClick={() => setMilestone(null)}>
          <div onClick={(e) => e.stopPropagation()} style={{
            background: C.paper, borderRadius: 18, padding: "34px 26px 28px",
            maxWidth: 400, width: "100%", textAlign: "center",
          }}>
            <div aria-hidden="true" style={{ color: C.terra, fontSize: 15, letterSpacing: 8, marginBottom: 14 }}>✦</div>
            <h3 id="ms-t" style={{ fontFamily: SERIF, fontSize: 29, fontWeight: 500, color: C.ink, margin: "0 0 14px" }}>
              {milestone.title}
            </h3>
            <p style={{ fontFamily: SANS, fontSize: 15, fontWeight: 300, lineHeight: 1.7, color: C.body, margin: "0 0 24px" }}>
              {milestone.text}
            </p>
            <Btn full onClick={() => setMilestone(null)}>Weiter</Btn>
          </div>
        </div>
      )}

{/* Speicherhinweis */}
      <div aria-live="polite" className="no-print" style={{
        position: "fixed", bottom: 20, left: "50%",
        transform: `translateX(-50%) translateY(${saved ? "0" : "18px"})`,
        opacity: saved ? 1 : 0, transition: "all .3s", pointerEvents: "none", zIndex: 50,
        background: C.ink, color: C.white, fontFamily: SANS, fontSize: 13, fontWeight: 400,
        padding: "10px 20px", borderRadius: 30, display: "flex", alignItems: "center", gap: 8,
      }}>
        <Check size={14} aria-hidden="true" /> Gespeichert
      </div>
    </div>
  );
}

/* App starten */
ReactDOM.createRoot(document.getElementById("root")).render(<App />);