Initialisieren

components/tools/coin-flip.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Coins } from "lucide-react";
+import Coin3D from "@/components/coin-3d";
+import { gsap } from "@/lib/gsap";
+import { coinEase } from "@/lib/motion";
+import { popConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+export default function CoinFlip() {
+  const [frontLabel, setFrontLabel] = useLocalStorage("coin-front", "Kopf");
+  const [backLabel, setBackLabel] = useLocalStorage("coin-back", "Zahl");
+  const [history, setHistory] = useState<string[]>([]);
+  const [flipping, setFlipping] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+
+  const coinRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const rotationRef = useRef(0);
+
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const front = frontLabel.trim() || "Kopf";
+  const back = backLabel.trim() || "Zahl";
+
+  const flip = () => {
+    if (flipping) return;
+
+    const isBack = Math.random() < 0.5;
+    const label = isBack ? back : front;
+    setFlipping(true);
+    setResult(null);
+    play("coin");
+
+    const current = rotationRef.current;
+    const base = Math.ceil(current / 360) * 360;
+    let target = base + 360 * 5 + (isBack ? 180 : 0);
+    if (target - current < 360 * 4) target += 360;
+
+    const dur = reduced ? 0.3 : 2.6;
+
+    gsap.to(coinRef.current, {
+      rotationX: target,
+      duration: dur,
+      ease: reduced ? "power1.out" : coinEase,
+      onComplete: () => {
+        rotationRef.current = target;
+        setFlipping(false);
+        setResult(label);
+        setHistory((h) => [label, ...h].slice(0, 10));
+        play("pop");
+        popConfetti();
+      },
+    });
+
+    if (!reduced) {
+      gsap.to(stageRef.current, {
+        y: -54,
+        duration: dur / 2,
+        yoyo: true,
+        repeat: 1,
+        ease: "power2.out",
+      });
+    }
+  };
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
+      {/* Bühne */}
+      <div className="flex flex-col items-center">
+        <div ref={stageRef} className="coin-scene p-4">
+          <button
+            type="button"
+            onClick={flip}
+            aria-label="Münze werfen"
+            className="block cursor-pointer rounded-full drop-shadow-[0_10px_18px_rgba(17,20,18,0.12)] transition-transform duration-200 hover:scale-[1.04] active:scale-95"
+          >
+            <Coin3D ref={coinRef} frontLabel={front} backLabel={back} size={188} />
+          </button>
+        </div>
+
+        <div className="mt-2 h-14" aria-live="polite">
+          <AnimatePresence mode="wait">
+            {result && (
+              <motion.p
+                key={result + history.length}
+                initial={{ opacity: 0, scale: 0.6, y: 12 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={{ type: "spring", stiffness: 380, damping: 22 }}
+                className="font-display text-3xl font-semibold tracking-tight"
+              >
+                <span className="text-primary">{result}!</span>
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={flip}
+          disabled={flipping}
+          whileTap={{ scale: 0.95 }}
+          className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Coins className="h-5 w-5" />
+          {flipping ? "Fliegt …" : "Münze werfen"}
+        </motion.button>
+        <p className="mt-3 text-xs text-ink-soft">
+          Tipp: Du kannst auch direkt auf die Münze tippen.
+        </p>
+      </div>
+
+      {/* Einstellungen */}
+      <div className="space-y-5">
+        <div className="rounded-3xl border border-line bg-cream/70 p-5">
+          <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+            Seiten beschriften
+          </h3>
+          <div className="mt-4 grid grid-cols-2 gap-3">
+            <label className="block">
+              <span className="mb-1.5 block text-xs font-medium text-ink-soft">
+                Vorderseite
+              </span>
+              <input
+                value={frontLabel}
+                onChange={(e) => setFrontLabel(e.target.value)}
+                maxLength={14}
+                placeholder="Kopf"
+                className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+              />
+            </label>
+            <label className="block">
+              <span className="mb-1.5 block text-xs font-medium text-ink-soft">
+                Rückseite
+              </span>
+              <input
+                value={backLabel}
+                onChange={(e) => setBackLabel(e.target.value)}
+                maxLength={14}
+                placeholder="Zahl"
+                className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+              />
+            </label>
+          </div>
+          <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+            Z. B. „Ja“ &amp; „Nein“, „Kino“ &amp; „Couch“ – deine Beschriftung
+            bleibt gespeichert.
+          </p>
+        </div>
+
+        {history.length > 0 && (
+          <div className="rounded-3xl border border-line bg-cream/70 p-5">
+            <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+              Verlauf
+            </h3>
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              <AnimatePresence initial={false}>
+                {history.map((entry, i) => (
+                  <motion.span
+                    key={`${entry}-${history.length - i}`}
+                    initial={{ opacity: 0, scale: 0.6 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className={`rounded-full px-3 py-1 text-xs font-semibold ${
+                      i === 0
+                        ? "bg-primary text-white"
+                        : "bg-surface text-ink-soft ring-1 ring-line"
+                    }`}
+                  >
+                    {entry}
+                  </motion.span>
+                ))}
+              </AnimatePresence>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/tools/dice-roller.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Dices } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { popConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+const SIZE = 104;
+const HALF = SIZE / 2;
+
+/** Würfelaugen-Positionen im 3×3-Raster (viewBox 40×40). */
+const PIPS: Record<number, number[]> = {
+  1: [4],
+  2: [0, 8],
+  3: [0, 4, 8],
+  4: [0, 2, 6, 8],
+  5: [0, 2, 4, 6, 8],
+  6: [0, 2, 3, 5, 6, 8],
+};
+
+/** Platzierung der Seiten im Würfel (gegenüberliegende Seiten = 7). */
+const FACE_TRANSFORMS = [
+  `translateZ(${HALF}px)`, // 1 – vorne
+  `rotateX(90deg) translateZ(${HALF}px)`, // 2 – oben
+  `rotateY(90deg) translateZ(${HALF}px)`, // 3 – rechts
+  `rotateY(-90deg) translateZ(${HALF}px)`, // 4 – links
+  `rotateX(-90deg) translateZ(${HALF}px)`, // 5 – unten
+  `rotateY(180deg) translateZ(${HALF}px)`, // 6 – hinten
+];
+
+/** Welche Würfel-Rotation bringt Wert v nach vorne? */
+const FACE_ROTATION: Record<number, { rx: number; ry: number }> = {
+  1: { rx: 0, ry: 0 },
+  2: { rx: -90, ry: 0 },
+  3: { rx: 0, ry: -90 },
+  4: { rx: 0, ry: 90 },
+  5: { rx: 90, ry: 0 },
+  6: { rx: 0, ry: 180 },
+};
+
+const DEFAULT_CUSTOM = ["Ja", "Nein", "Vielleicht", "Frag später", "Gute Idee", "Lass es"];
+
+export default function DiceRoller() {
+  const [mode, setMode] = useLocalStorage<"numbers" | "custom">(
+    "dice-mode",
+    "numbers",
+  );
+  const [customFaces, setCustomFaces] = useLocalStorage<string[]>(
+    "dice-custom",
+    DEFAULT_CUSTOM,
+  );
+  const [rolling, setRolling] = useState(false);
+  const [result, setResult] = useState<number | null>(null);
+
+  const diceRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const rotRef = useRef({ rx: -18, ry: 24 }); // hübscher Startwinkel
+
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const roll = () => {
+    if (rolling) return;
+
+    const value = 1 + Math.floor(Math.random() * 6);
+    setRolling(true);
+    setResult(null);
+    play("dice");
+
+    const { rx, ry } = rotRef.current;
+    const target = FACE_ROTATION[value];
+    const targetRx = Math.ceil(rx / 360) * 360 + 720 + target.rx;
+    const targetRy = Math.ceil(ry / 360) * 360 + 720 + target.ry;
+
+    const dur = reduced ? 0.35 : 1.9;
+
+    gsap.to(diceRef.current, {
+      rotationX: targetRx,
+      rotationY: targetRy,
+      duration: dur,
+      ease: reduced ? "power1.out" : "power3.out",
+      onComplete: () => {
+        rotRef.current = { rx: targetRx, ry: targetRy };
+        setRolling(false);
+        setResult(value);
+        play("pop");
+        popConfetti();
+      },
+    });
+
+    if (!reduced) {
+      gsap.to(stageRef.current, {
+        y: -40,
+        duration: dur / 2,
+        yoyo: true,
+        repeat: 1,
+        ease: "power2.out",
+      });
+    }
+  };
+
+  const resultLabel =
+    result === null
+      ? null
+      : mode === "custom"
+        ? customFaces[result - 1]?.trim() || `Seite ${result}`
+        : String(result);
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
+      {/* Bühne */}
+      <div className="flex flex-col items-center">
+        <div ref={stageRef} className="dice-scene p-6">
+          <button
+            type="button"
+            onClick={roll}
+            aria-label="Würfel rollen"
+            className="block cursor-pointer drop-shadow-[0_22px_26px_rgb(23_23_28/0.22)] transition-transform duration-200 hover:scale-[1.05] active:scale-95"
+          >
+            <div
+              ref={diceRef}
+              className="dice"
+              style={{
+                width: SIZE,
+                height: SIZE,
+                // Startwinkel als Literal (deckt sich mit rotRef's Initialwert) –
+                // GSAP übernimmt danach die Rotation imperativ am DOM-Node.
+                transform: "rotateX(-18deg) rotateY(24deg)",
+              }}
+            >
+              {[1, 2, 3, 4, 5, 6].map((v, i) => (
+                <div
+                  key={v}
+                  className="dice-face"
+                  style={{ transform: FACE_TRANSFORMS[i] }}
+                >
+                  {mode === "numbers" ? (
+                    <svg viewBox="0 0 40 40" className="h-full w-full">
+                      {PIPS[v].map((p) => (
+                        <circle
+                          key={p}
+                          cx={8 + (p % 3) * 12}
+                          cy={8 + Math.floor(p / 3) * 12}
+                          r={3.6}
+                          fill="#17171c"
+                        />
+                      ))}
+                    </svg>
+                  ) : (
+                    <span className="dice-face-label">
+                      {customFaces[v - 1]?.trim() || `Seite ${v}`}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </button>
+        </div>
+
+        <div className="mt-2 h-14" aria-live="polite">
+          <AnimatePresence mode="wait">
+            {resultLabel !== null && (
+              <motion.p
+                key={resultLabel + String(result)}
+                initial={{ opacity: 0, scale: 0.6, y: 12 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={{ type: "spring", stiffness: 380, damping: 22 }}
+                className="font-display text-3xl font-semibold tracking-tight"
+              >
+                <span className="text-primary">{resultLabel}</span>
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={roll}
+          disabled={rolling}
+          whileTap={{ scale: 0.95 }}
+          className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Dices className="h-5 w-5" />
+          {rolling ? "Rollt …" : "Würfeln!"}
+        </motion.button>
+      </div>
+
+      {/* Einstellungen */}
+      <div className="space-y-5">
+        <div className="rounded-3xl border border-line bg-cream/70 p-5">
+          <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+            Würfel-Seiten
+          </h3>
+
+          <div className="mt-4 flex rounded-full border border-line bg-surface p-1">
+            {(
+              [
+                { id: "numbers", label: "Zahlen 1–6" },
+                { id: "custom", label: "Eigene Texte" },
+              ] as const
+            ).map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                onClick={() => setMode(m.id)}
+                className={`relative flex-1 cursor-pointer rounded-full px-3 py-2 text-sm font-semibold transition-colors duration-200 ${
+                  mode === m.id ? "text-white" : "text-ink-soft hover:text-ink"
+                }`}
+              >
+                {mode === m.id && (
+                  <motion.span
+                    layoutId="dice-mode-pill"
+                    transition={{ type: "spring", stiffness: 420, damping: 34 }}
+                    className="absolute inset-0 rounded-full bg-primary"
+                  />
+                )}
+                <span className="relative z-10">{m.label}</span>
+              </button>
+            ))}
+          </div>
+
+          <AnimatePresence initial={false}>
+            {mode === "custom" && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="overflow-hidden"
+              >
+                <div className="mt-4 grid grid-cols-2 gap-2">
+                  {customFaces.map((face, i) => (
+                    <label key={i} className="block">
+                      <span className="mb-1 block text-[11px] font-medium text-ink-soft">
+                        Seite {i + 1}
+                      </span>
+                      <input
+                        value={face}
+                        onChange={(e) =>
+                          setCustomFaces((faces) =>
+                            faces.map((f, idx) =>
+                              idx === i ? e.target.value : f,
+                            ),
+                          )
+                        }
+                        maxLength={18}
+                        placeholder={`Seite ${i + 1}`}
+                        className="w-full rounded-xl border border-line bg-surface px-3 py-2 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+                      />
+                    </label>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+            Klassisch mit Würfelaugen oder mit eigenen Texten – perfekt für
+            „Wer spült heute ab?“.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/tools/ja-nein-generator.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle2, HelpCircle, XCircle } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { popConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+type Answer = "Ja" | "Nein";
+
+export default function JaNeinGenerator() {
+  const [question, setQuestion] = useState("");
+  const [answer, setAnswer] = useState<Answer | null>(null);
+  const [asking, setAsking] = useState(false);
+  const [history, setHistory] = useState<Answer[]>([]);
+
+  const cardRef = useRef<HTMLDivElement>(null);
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const ask = () => {
+    if (asking) return;
+
+    const pick: Answer = Math.random() < 0.5 ? "Ja" : "Nein";
+    setAsking(true);
+    setAnswer(null);
+    play("whoosh");
+
+    const reveal = () => {
+      setAsking(false);
+      setAnswer(pick);
+      setHistory((h) => [pick, ...h].slice(0, 10));
+      play(pick === "Ja" ? "win" : "pop");
+      if (pick === "Ja") popConfetti();
+    };
+
+    if (reduced) {
+      gsap.delayedCall(0.25, reveal);
+      return;
+    }
+
+    const tl = gsap.timeline({ onComplete: reveal });
+    tl.to(cardRef.current, {
+      rotate: -6,
+      x: -10,
+      duration: 0.09,
+      ease: "power1.inOut",
+    })
+      .to(cardRef.current, {
+        rotate: 6,
+        x: 10,
+        duration: 0.09,
+        ease: "power1.inOut",
+      })
+      .repeat(3)
+      .to(cardRef.current, {
+        rotate: 0,
+        x: 0,
+        duration: 0.2,
+        ease: "power2.out",
+      });
+  };
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
+      {/* Bühne */}
+      <div className="flex flex-col items-center">
+        <input
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          maxLength={100}
+          placeholder="Deine Ja/Nein-Frage (optional) …"
+          aria-label="Deine Frage an den Ja-Nein-Generator"
+          className="w-full max-w-sm rounded-full border border-line bg-surface px-5 py-3 text-center text-sm font-medium shadow-soft outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+        />
+
+        <div ref={cardRef} className="mt-8">
+          <button
+            type="button"
+            onClick={ask}
+            aria-label="Ja-Nein-Generator fragen"
+            className="flex h-52 w-52 cursor-pointer items-center justify-center rounded-[2rem] border border-line bg-surface shadow-lift transition-transform duration-200 hover:scale-[1.03] active:scale-95 sm:h-60 sm:w-60"
+          >
+            <div
+              className="relative flex h-full w-full items-center justify-center px-6"
+              aria-live="polite"
+            >
+              <AnimatePresence mode="wait">
+                {answer ? (
+                  <motion.div
+                    key={answer + history.length}
+                    initial={{ opacity: 0, scale: 0.7 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.8 }}
+                    transition={{ type: "spring", stiffness: 380, damping: 22 }}
+                    className={`flex flex-col items-center gap-2 ${
+                      answer === "Ja" ? "text-[#0d7a57]" : "text-clay"
+                    }`}
+                  >
+                    {answer === "Ja" ? (
+                      <CheckCircle2 className="h-14 w-14" />
+                    ) : (
+                      <XCircle className="h-14 w-14" />
+                    )}
+                    <span className="font-display text-3xl font-semibold tracking-tight">
+                      {answer}
+                    </span>
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="idle"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex flex-col items-center gap-2 text-ink-soft"
+                  >
+                    <HelpCircle className="h-14 w-14" />
+                    <span className="text-sm font-medium">Tippen zum Fragen</span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </button>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={ask}
+          disabled={asking}
+          whileTap={{ scale: 0.95 }}
+          className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <HelpCircle className="h-5 w-5" />
+          {asking ? "Überlegt …" : "Ja oder Nein?"}
+        </motion.button>
+        <p className="mt-3 text-xs text-ink-soft">
+          {question.trim()
+            ? `„${question.trim()}“`
+            : "Stell eine Frage – oder lass dich einfach überraschen."}
+        </p>
+      </div>
+
+      {/* Info & Verlauf */}
+      <div className="space-y-5">
+        <div className="rounded-3xl border border-line bg-cream/70 p-5">
+          <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+            So funktioniert&apos;s
+          </h3>
+          <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+            Frage eingeben (optional), auf die Karte oder den Button tippen –
+            der Generator entscheidet zufällig zwischen Ja und Nein. Perfekt
+            für schnelle Entscheidungen ohne langes Abwägen.
+          </p>
+        </div>
+
+        {history.length > 0 && (
+          <div className="rounded-3xl border border-line bg-cream/70 p-5">
+            <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+              Verlauf
+            </h3>
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              <AnimatePresence initial={false}>
+                {history.map((entry, i) => (
+                  <motion.span
+                    key={`${entry}-${history.length - i}`}
+                    initial={{ opacity: 0, scale: 0.6 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className={`rounded-full px-3 py-1 text-xs font-semibold ${
+                      i === 0
+                        ? entry === "Ja"
+                          ? "bg-[#0d7a57] text-white"
+                          : "bg-clay text-white"
+                        : "bg-surface text-ink-soft ring-1 ring-line"
+                    }`}
+                  >
+                    {entry}
+                  </motion.span>
+                ))}
+              </AnimatePresence>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/tools/list-picker.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ListChecks, Sparkles } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { celebrateConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+const DEFAULT_LIST = "Anna\nBen\nClara\nDavid";
+
+export default function ListPicker() {
+  const [text, setText] = useLocalStorage("list-items", DEFAULT_LIST);
+  const [removeAfterDraw, setRemoveAfterDraw] = useLocalStorage(
+    "list-remove",
+    false,
+  );
+  const [display, setDisplay] = useState<string | null>(null);
+  const [drawing, setDrawing] = useState(false);
+  const [winner, setWinner] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+
+  const lastPaintRef = useRef(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const items = text
+    .split("\n")
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+  const draw = () => {
+    if (drawing) return;
+    if (items.length < 2) {
+      setError(true);
+      play("tick");
+      gsap.fromTo(
+        textareaRef.current,
+        { x: -7 },
+        { x: 0, duration: 0.4, ease: "elastic.out(2.5, 0.35)" },
+      );
+      return;
+    }
+    setError(false);
+
+    const pick = items[Math.floor(Math.random() * items.length)];
+    setDrawing(true);
+    setWinner(null);
+    play("whoosh");
+
+    const dur = reduced ? 0.35 : 2.0;
+    const proxy = { p: 0 };
+    lastPaintRef.current = 0;
+
+    gsap.to(proxy, {
+      p: 1,
+      duration: dur,
+      ease: "power2.out",
+      onUpdate: () => {
+        const now = performance.now();
+        const interval = reduced ? 60 : 30 + 260 * proxy.p;
+        if (now - lastPaintRef.current > interval) {
+          lastPaintRef.current = now;
+          setDisplay(items[Math.floor(Math.random() * items.length)]);
+        }
+      },
+      onComplete: () => {
+        setDisplay(pick);
+        setWinner(pick);
+        setDrawing(false);
+        play("win");
+        celebrateConfetti();
+        if (removeAfterDraw) {
+          setText(
+            items
+              .filter((item) => item !== pick)
+              .join("\n"),
+          );
+        }
+      },
+    });
+  };
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[0.9fr_1.1fr]">
+      {/* Liste */}
+      <div className="rounded-3xl border border-line bg-cream/70 p-5">
+        <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+          Deine Liste ({items.length})
+        </h3>
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          rows={8}
+          placeholder={"Ein Eintrag pro Zeile, z. B.\nAnna\nBen\nClara"}
+          aria-label="Liste der Einträge, ein Eintrag pro Zeile"
+          className={`mt-4 w-full resize-none rounded-xl border bg-surface px-4 py-3 font-mono text-sm leading-relaxed outline-none transition focus:ring-2 ${
+            error
+              ? "border-clay/60 focus:border-clay/60 focus:ring-clay/20"
+              : "border-line focus:border-primary/60 focus:ring-primary/20"
+          }`}
+        />
+        <label className="mt-3 flex cursor-pointer items-center gap-2.5 text-sm font-medium text-ink-soft">
+          <input
+            type="checkbox"
+            checked={removeAfterDraw}
+            onChange={(e) => setRemoveAfterDraw(e.target.checked)}
+            className="h-4 w-4 cursor-pointer accent-primary"
+          />
+          Gezogene Einträge entfernen (ohne Zurücklegen)
+        </label>
+        <p className={`mt-3 text-xs leading-relaxed ${error ? "font-semibold text-clay" : "text-ink-soft"}`}>
+          {error
+            ? "Bitte mindestens 2 Einträge eintragen."
+            : "Ideal für Teams, Gruppen-Reihenfolgen oder Gewinnspiele."}
+        </p>
+      </div>
+
+      {/* Anzeige */}
+      <div className="flex flex-col items-center">
+        <div className="flex min-h-[190px] w-full items-center justify-center rounded-[2rem] border border-line bg-cream/70 px-8 py-8">
+          <AnimatePresence mode="wait">
+            {display === null ? (
+              <motion.div
+                key="idle"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="flex flex-col items-center gap-3 text-center"
+              >
+                <ListChecks className="h-8 w-8 text-primary/50" />
+                <p className="font-display text-xl font-medium text-ink-soft">
+                  {items.length >= 2
+                    ? `${items.length} Einträge warten auf die Ziehung.`
+                    : "Trage links mindestens 2 Einträge ein."}
+                </p>
+              </motion.div>
+            ) : (
+              <motion.p
+                key={display + (winner ? "-win" : "")}
+                initial={winner ? { scale: 0.6, opacity: 0, y: 14 } : false}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                transition={{ type: "spring", stiffness: 340, damping: 20 }}
+                className={`break-words text-center font-display text-5xl font-semibold tracking-tight sm:text-6xl ${
+                  winner ? "text-primary" : "text-ink/60"
+                }`}
+                aria-live="polite"
+              >
+                {display}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={draw}
+          disabled={drawing}
+          whileTap={{ scale: 0.95 }}
+          className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Sparkles className="h-5 w-5" />
+          {drawing ? "Zieht …" : "Zufällig ziehen"}
+        </motion.button>
+        {winner && (
+          <p className="mt-3 text-xs text-ink-soft">
+            {removeAfterDraw
+              ? `„${winner}“ wurde von der Liste entfernt.`
+              : "Nochmal ziehen? Einfach erneut klicken."}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

components/tools/magic-8-ball.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Pencil, Plus, Sparkles, X } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { popConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+const DEFAULT_ANSWERS = [
+  "Ja, definitiv.",
+  "Ohne Zweifel.",
+  "Sehr wahrscheinlich.",
+  "Sieht gut aus.",
+  "Frag später nochmal.",
+  "Kann ich jetzt nicht sagen.",
+  "Konzentrier dich und frag erneut.",
+  "Rechne nicht damit.",
+  "Meine Antwort: Nein.",
+  "Eher nicht.",
+];
+
+const MIN_ANSWERS = 2;
+const MAX_ANSWERS = 20;
+
+export default function Magic8Ball() {
+  const [answers, setAnswers] = useLocalStorage<string[]>(
+    "ball-answers",
+    DEFAULT_ANSWERS,
+  );
+  const [question, setQuestion] = useState("");
+  const [answer, setAnswer] = useState<string | null>(null);
+  const [shaking, setShaking] = useState(false);
+  const [editing, setEditing] = useState(false);
+
+  const ballRef = useRef<HTMLDivElement>(null);
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const validAnswers = answers.map((a) => a.trim()).filter(Boolean);
+
+  const shake = () => {
+    if (shaking || validAnswers.length === 0) return;
+
+    const pick =
+      validAnswers[Math.floor(Math.random() * validAnswers.length)];
+    setShaking(true);
+    setAnswer(null);
+    play("whoosh");
+
+    const reveal = () => {
+      setAnswer(pick);
+      setShaking(false);
+      play("pop");
+      popConfetti();
+    };
+
+    if (reduced) {
+      gsap.delayedCall(0.25, reveal);
+      return;
+    }
+
+    const tl = gsap.timeline({ onComplete: reveal });
+    tl.to(ballRef.current, {
+      x: -18,
+      rotation: -9,
+      duration: 0.08,
+      ease: "power1.inOut",
+    })
+      .to(ballRef.current, {
+        x: 16,
+        rotation: 8,
+        duration: 0.08,
+        ease: "power1.inOut",
+      })
+      .repeat(4)
+      .to(ballRef.current, {
+        x: 0,
+        rotation: 0,
+        duration: 0.22,
+        ease: "power2.out",
+      });
+  };
+
+  const updateAnswer = (i: number, value: string) =>
+    setAnswers((list) => list.map((a, idx) => (idx === i ? value : a)));
+
+  const addAnswer = () => {
+    if (answers.length >= MAX_ANSWERS) return;
+    setAnswers((list) => [...list, ""]);
+  };
+
+  const removeAnswer = (i: number) => {
+    if (answers.length <= MIN_ANSWERS) return;
+    setAnswers((list) => list.filter((_, idx) => idx !== i));
+  };
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
+      {/* Bühne */}
+      <div className="flex flex-col items-center">
+        <input
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          maxLength={80}
+          placeholder="Deine Frage (optional) …"
+          aria-label="Deine Frage an den 8-Ball"
+          className="w-full max-w-sm rounded-full border border-line bg-surface px-5 py-3 text-center text-sm font-medium shadow-soft outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+        />
+
+        <div ref={ballRef} className="mt-6">
+          <button
+            type="button"
+            onClick={shake}
+            aria-label="8-Ball schütteln"
+            className="ball-body relative flex h-64 w-64 cursor-pointer items-center justify-center rounded-full transition-transform duration-200 hover:scale-[1.03] active:scale-95 sm:h-72 sm:w-72"
+          >
+            <div className="ball-window relative flex h-32 w-32 items-center justify-center overflow-hidden rounded-full sm:h-36 sm:w-36">
+              {/* Prisma-Dreieck */}
+              <div
+                aria-hidden
+                className="absolute inset-4 bg-primary/60"
+                style={{
+                  clipPath: "polygon(50% 6%, 94% 90%, 6% 90%)",
+                }}
+              />
+              <div
+                className="relative z-10 flex h-full w-full items-center justify-center px-7"
+                aria-live="polite"
+              >
+                <AnimatePresence mode="wait">
+                  {answer ? (
+                    <motion.p
+                      key={answer}
+                      initial={{ opacity: 0, scale: 0.7, filter: "blur(8px)" }}
+                      animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                      exit={{ opacity: 0, filter: "blur(6px)" }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="text-center font-display text-[13px] font-semibold leading-snug text-[#dde5dd]"
+                    >
+                      {answer}
+                    </motion.p>
+                  ) : (
+                    <motion.p
+                      key="eight"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="font-display text-4xl font-semibold text-[#dde5dd]"
+                    >
+                      8
+                    </motion.p>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={shake}
+          disabled={shaking || validAnswers.length === 0}
+          whileTap={{ scale: 0.95 }}
+          className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Sparkles className="h-5 w-5" />
+          {shaking ? "Schüttelt …" : "8-Ball schütteln"}
+        </motion.button>
+        <p className="mt-3 text-xs text-ink-soft">
+          {question.trim()
+            ? `„${question.trim()}“`
+            : "Stell eine Ja/Nein-Frage – oder lass dich einfach überraschen."}
+        </p>
+      </div>
+
+      {/* Antworten-Editor */}
+      <div className="rounded-3xl border border-line bg-cream/70 p-5">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+            Antworten ({validAnswers.length})
+          </h3>
+          <button
+            type="button"
+            onClick={() => setEditing((e) => !e)}
+            aria-expanded={editing}
+            className={`inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
+              editing
+                ? "bg-primary text-white"
+                : "bg-surface text-ink-soft ring-1 ring-line hover:text-primary"
+            }`}
+          >
+            <Pencil className="h-3.5 w-3.5" />
+            {editing ? "Fertig" : "Bearbeiten"}
+          </button>
+        </div>
+
+        <AnimatePresence initial={false}>
+          {editing && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="overflow-hidden"
+            >
+              <div className="mt-4 max-h-[260px] space-y-2 overflow-y-auto pr-1">
+                {answers.map((a, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <input
+                      value={a}
+                      onChange={(e) => updateAnswer(i, e.target.value)}
+                      maxLength={60}
+                      placeholder={`Antwort ${i + 1}`}
+                      aria-label={`Antwort ${i + 1}`}
+                      className="w-full rounded-xl border border-line bg-surface px-3.5 py-2 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => removeAnswer(i)}
+                      disabled={answers.length <= MIN_ANSWERS}
+                      aria-label={`Antwort ${i + 1} entfernen`}
+                      className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-xl text-ink-soft transition-colors hover:bg-clay-soft hover:text-clay disabled:cursor-not-allowed disabled:opacity-30"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+              <button
+                type="button"
+                onClick={addAnswer}
+                disabled={answers.length >= MAX_ANSWERS}
+                className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-2 border-dashed border-line px-4 py-2.5 text-sm font-semibold text-ink-soft transition-colors hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                <Plus className="h-4 w-4" />
+                Antwort hinzufügen
+              </button>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+          Der Ball sagt, was du ihm vorgibst – von klassisch bis fies.{" "}
+          {MIN_ANSWERS}–{MAX_ANSWERS} Antworten, automatisch gespeichert.
+        </p>
+      </div>
+    </div>
+  );
+}

components/tools/random-number.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Hash } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { popConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+const randInt = (lo: number, hi: number) =>
+  lo + Math.floor(Math.random() * (hi - lo + 1));
+
+export default function RandomNumber() {
+  const [min, setMin] = useLocalStorage("num-min", 1);
+  const [max, setMax] = useLocalStorage("num-max", 100);
+  const [display, setDisplay] = useState<string | null>(null);
+  const [rolling, setRolling] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const lastPaintRef = useRef(0);
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const roll = () => {
+    if (rolling) return;
+
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    const result = randInt(lo, hi);
+
+    setRolling(true);
+    setDone(false);
+    play("whoosh");
+
+    const dur = reduced ? 0.3 : 1.7;
+    const proxy = { p: 0 };
+    lastPaintRef.current = 0;
+
+    gsap.to(proxy, {
+      p: 1,
+      duration: dur,
+      ease: "power2.out",
+      onUpdate: () => {
+        const now = performance.now();
+        // Wechsel-Intervall wächst → Slot-Machine-Effekt
+        const interval = reduced ? 60 : 28 + 240 * proxy.p;
+        if (now - lastPaintRef.current > interval) {
+          lastPaintRef.current = now;
+          setDisplay(String(randInt(lo, hi)));
+        }
+      },
+      onComplete: () => {
+        setDisplay(String(result));
+        setRolling(false);
+        setDone(true);
+        play("pop");
+        popConfetti();
+      },
+    });
+  };
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]">
+      {/* Anzeige */}
+      <div className="flex flex-col items-center">
+        <div className="flex min-h-[190px] items-center justify-center rounded-[2rem] border border-line bg-cream/70 px-10 py-8">
+          <AnimatePresence mode="wait">
+            {display === null ? (
+              <motion.p
+                key="idle"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="text-center font-display text-xl font-medium text-ink-soft"
+              >
+                Bereit, wenn du es bist.
+              </motion.p>
+            ) : (
+              <motion.p
+                key={display + (done ? "-done" : "")}
+                initial={done ? { scale: 1.35, opacity: 0 } : false}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ type: "spring", stiffness: 320, damping: 18 }}
+                className={`tabular font-display text-8xl font-semibold tracking-tight sm:text-9xl ${
+                  done ? "text-primary" : "text-ink/70"
+                }`}
+                aria-live="polite"
+              >
+                {display}
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={roll}
+          disabled={rolling}
+          whileTap={{ scale: 0.95 }}
+          className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Hash className="h-5 w-5" />
+          {rolling ? "Rollt …" : "Zahl generieren"}
+        </motion.button>
+        <p className="mt-3 text-xs text-ink-soft">
+          Zufallszahl zwischen {Math.min(min, max)} und {Math.max(min, max)}
+        </p>
+      </div>
+
+      {/* Einstellungen */}
+      <div className="rounded-3xl border border-line bg-cream/70 p-5">
+        <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+          Zahlenraum
+        </h3>
+        <div className="mt-4 grid grid-cols-2 gap-3">
+          <label className="block">
+            <span className="mb-1.5 block text-xs font-medium text-ink-soft">
+              Minimum
+            </span>
+            <input
+              type="number"
+              value={min}
+              onChange={(e) => setMin(Number(e.target.value))}
+              className="tabular w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+            />
+          </label>
+          <label className="block">
+            <span className="mb-1.5 block text-xs font-medium text-ink-soft">
+              Maximum
+            </span>
+            <input
+              type="number"
+              value={max}
+              onChange={(e) => setMax(Number(e.target.value))}
+              className="tabular w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+            />
+          </label>
+        </div>
+        <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+          Perfekt für Lose, Teams oder „Wie viele Liegestütze?“. Reihenfolge
+          von Min &amp; Max ist egal.
+        </p>
+      </div>
+    </div>
+  );
+}

components/tools/wheel-of-fortune.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Plus, RotateCcw, Sparkles, X } from "lucide-react";
+import { gsap } from "@/lib/gsap";
+import { wheelEase } from "@/lib/motion";
+import { celebrateConfetti } from "@/lib/confetti";
+import { useSound } from "@/components/providers/sound-provider";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+
+const DEFAULT_OPTIONS = ["1", "2", "3", "4", "5", "6"];
+
+/** Natürliche, gedeckte Farben – weiße Schrift bleibt lesbar. */
+const PALETTE = [
+  "#33523f",
+  "#a8623f",
+  "#b98a3c",
+  "#5e7a5e",
+  "#6b7f8c",
+  "#8a6b52",
+  "#5f8a80",
+  "#9a5b45",
+  "#4f6b8a",
+  "#8c7a4f",
+  "#5c6e4f",
+  "#3f5e66",
+];
+
+const C = 210;
+const R = 196;
+const MIN_OPTIONS = 2;
+const MAX_OPTIONS = 12;
+
+/** Winkel → Punkt auf dem Kreis (0° = oben, im Uhrzeigersinn). */
+function polar(angleDeg: number, radius: number): [number, number] {
+  const a = (angleDeg * Math.PI) / 180;
+  return [C + radius * Math.sin(a), C - radius * Math.cos(a)];
+}
+
+export default function WheelOfFortune() {
+  const [options, setOptions] = useLocalStorage<string[]>(
+    "wheel-options",
+    DEFAULT_OPTIONS,
+  );
+  const [spinning, setSpinning] = useState(false);
+  const [winner, setWinner] = useState<number | null>(null);
+
+  const wheelRef = useRef<SVGGElement>(null);
+  const pointerRef = useRef<HTMLDivElement>(null);
+  const rotationRef = useRef(0);
+  const lastTickRef = useRef(-1);
+
+  const { play } = useSound();
+  const reduced = usePrefersReducedMotion();
+
+  const labels = options.map((o, i) => o.trim() || `Option ${i + 1}`);
+  const n = labels.length;
+  const seg = 360 / n;
+
+  const spin = () => {
+    if (spinning || n < MIN_OPTIONS) return;
+
+    const winnerIndex = Math.floor(Math.random() * n);
+    setWinner(null);
+    setSpinning(true);
+    play("whoosh");
+    lastTickRef.current = -1;
+
+    // Zufällige Position innerhalb des Gewinner-Segments
+    const offset = 0.18 + Math.random() * 0.64;
+    const targetAngle = winnerIndex * seg + seg * offset;
+
+    const current = rotationRef.current;
+    const currentMod = ((current % 360) + 360) % 360;
+    const delta =
+      (((360 - targetAngle - currentMod) % 360) + 360) % 360;
+    const target = current + 360 * 6 + delta;
+
+    const dur = reduced ? 0.5 : 5.6;
+
+    gsap.to(wheelRef.current, {
+      rotation: target,
+      svgOrigin: `${C} ${C}`,
+      duration: dur,
+      ease: reduced ? "power1.out" : wheelEase,
+      onUpdate: () => {
+        if (reduced) return;
+        const rot = Number(gsap.getProperty(wheelRef.current, "rotation"));
+        const m = ((rot % 360) + 360) % 360;
+        const idx = Math.floor(((360 - m) % 360) / seg);
+        if (idx !== lastTickRef.current) {
+          lastTickRef.current = idx;
+          play("tick");
+          gsap.fromTo(
+            pointerRef.current,
+            { rotation: -16 },
+            {
+              rotation: 0,
+              duration: 0.22,
+              ease: "elastic.out(2.2, 0.4)",
+              transformOrigin: "50% 12%",
+            },
+          );
+        }
+      },
+      onComplete: () => {
+        rotationRef.current = target;
+        setSpinning(false);
+        setWinner(winnerIndex);
+        play("win");
+        celebrateConfetti();
+      },
+    });
+  };
+
+  const updateOption = (i: number, value: string) => {
+    setOptions((opts) => opts.map((o, idx) => (idx === i ? value : o)));
+    setWinner(null);
+  };
+
+  const addOption = () => {
+    if (n >= MAX_OPTIONS) return;
+    setOptions((opts) => [...opts, ""]);
+    setWinner(null);
+  };
+
+  const removeOption = (i: number) => {
+    if (n <= MIN_OPTIONS) return;
+    setOptions((opts) => opts.filter((_, idx) => idx !== i));
+    setWinner(null);
+  };
+
+  const fontSize = n <= 6 ? 15 : n <= 9 ? 13 : 11.5;
+
+  return (
+    <div className="grid items-center gap-10 lg:grid-cols-[1.1fr_0.9fr]">
+      {/* Rad */}
+      <div className="flex flex-col items-center">
+        <div className="relative w-full max-w-[400px]">
+          {/* Zeiger */}
+          <div
+          ref={pointerRef}
+            aria-hidden
+            className="absolute -top-1.5 left-1/2 z-10 h-9 w-7 -translate-x-1/2 bg-primary shadow-[0_6px_16px_rgb(108_92_231/0.5)]"
+            style={{
+              clipPath: "polygon(50% 100%, 0 0, 100% 0)",
+            }}
+          />
+          <svg viewBox="0 0 420 420" className="w-full drop-shadow-[0_20px_36px_rgb(23_23_28/0.14)]">
+            {/* äußerer Ring */}
+            <circle cx={C} cy={C} r={206} fill="#ffffff" stroke="#e9e9e4" />
+            <g ref={wheelRef}>
+              {labels.map((label, i) => {
+                const [x0, y0] = polar(i * seg, R);
+                const [x1, y1] = polar((i + 1) * seg, R);
+                const large = seg > 180 ? 1 : 0;
+                const isWinner = winner === i;
+                const dimmed = winner !== null && !isWinner;
+                return (
+                  <g key={i}>
+                    <path
+                      d={`M ${C} ${C} L ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1} Z`}
+                      fill={PALETTE[i % PALETTE.length]}
+                      stroke="#ffffff"
+                      strokeWidth={isWinner ? 3.5 : 1.5}
+                      className="transition-opacity duration-500"
+                      style={{
+                        opacity: dimmed ? 0.4 : 1,
+                        filter: isWinner
+                          ? "drop-shadow(0 0 14px rgb(242 179 61 / 0.9))"
+                          : undefined,
+                      }}
+                    />
+                    <g transform={`rotate(${i * seg + seg / 2} ${C} ${C})`}>
+                      <text
+                        x={C}
+                        y={C - 118}
+                        textAnchor="middle"
+                        dominantBaseline="central"
+                        transform={`rotate(90 ${C} ${C - 118})`}
+                        fill="#ffffff"
+                        fontSize={fontSize}
+                        fontWeight={600}
+                        fontFamily="var(--font-display)"
+                        style={{
+                          textShadow: "0 1px 3px rgb(0 0 0 / 0.35)",
+                          opacity: dimmed ? 0.4 : 1,
+                        }}
+                        className="transition-opacity duration-500"
+                      >
+                        {label.length > 16 ? `${label.slice(0, 15)}…` : label}
+                      </text>
+                    </g>
+                  </g>
+                );
+              })}
+            </g>
+            {/* Nabe */}
+            <circle cx={C} cy={C} r={30} fill="#ffffff" stroke="#e9e9e4" strokeWidth={2} />
+            <circle cx={C} cy={C} r={9} fill="#6c5ce7" />
+          </svg>
+        </div>
+
+        <div className="mt-4 h-14" aria-live="polite">
+          <AnimatePresence mode="wait">
+            {winner !== null && (
+              <motion.p
+                key={`${winner}-${labels[winner]}`}
+                initial={{ opacity: 0, scale: 0.6, y: 12 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={{ type: "spring", stiffness: 380, damping: 22 }}
+                className="flex items-center gap-2 font-display text-3xl font-semibold tracking-tight"
+              >
+                <Sparkles className="h-6 w-6 text-clay" />
+                <span className="text-primary">{labels[winner]}!</span>
+              </motion.p>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <motion.button
+          type="button"
+          onClick={spin}
+          disabled={spinning || n < MIN_OPTIONS}
+          whileTap={{ scale: 0.95 }}
+          className="mt-2 inline-flex cursor-pointer items-center gap-2 rounded-full bg-primary px-9 py-3.5 text-base font-semibold text-white shadow-cta transition-colors duration-200 hover:bg-primary-strong disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <RotateCcw className="h-5 w-5" />
+          {spinning ? "Dreht sich …" : "Drehen!"}
+        </motion.button>
+      </div>
+
+      {/* Optionen-Editor */}
+      <div className="rounded-3xl border border-line bg-cream/70 p-5">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold uppercase tracking-[0.16em] text-ink-soft">
+            Optionen ({n}/{MAX_OPTIONS})
+          </h3>
+          <button
+            type="button"
+            onClick={() => {
+              setOptions(DEFAULT_OPTIONS);
+              setWinner(null);
+            }}
+            className="cursor-pointer text-xs font-medium text-ink-soft underline-offset-2 transition-colors hover:text-primary hover:underline"
+          >
+            Zurücksetzen
+          </button>
+        </div>
+
+        <div className="mt-4 max-h-[300px] space-y-2 overflow-y-auto pr-1">
+          {options.map((option, i) => (
+            <div key={i} className="flex items-center gap-2.5">
+              <span
+                aria-hidden
+                className="h-3.5 w-3.5 shrink-0 rounded-full ring-2 ring-white"
+                style={{ background: PALETTE[i % PALETTE.length] }}
+              />
+              <input
+                value={option}
+                onChange={(e) => updateOption(i, e.target.value)}
+                maxLength={24}
+                placeholder={`Option ${i + 1}`}
+                aria-label={`Option ${i + 1}`}
+                className="w-full rounded-xl border border-line bg-surface px-3.5 py-2.5 text-sm font-medium outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
+              />
+              <button
+                type="button"
+                onClick={() => removeOption(i)}
+                disabled={n <= MIN_OPTIONS}
+                aria-label={`Option ${i + 1} entfernen`}
+                className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-xl text-ink-soft transition-colors hover:bg-clay-soft hover:text-clay disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          onClick={addOption}
+          disabled={n >= MAX_OPTIONS}
+          className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-2 border-dashed border-line px-4 py-2.5 text-sm font-semibold text-ink-soft transition-colors hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <Plus className="h-4 w-4" />
+          Option hinzufügen
+        </button>
+        <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+          {MIN_OPTIONS}–{MAX_OPTIONS} Optionen. Deine Liste bleibt automatisch
+          gespeichert.
+        </p>
+      </div>
+    </div>
+  );
+}