// ============================================================
//  Tim Taxis — WEBSITE (real logo, Einfach.Du.Sein)
// ============================================================
const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

// ============================================================
//  Live content (Supabase) — editable via Dashboard.
//  Falls back to the bundled defaults below if the backend is
//  unreachable, so the page always renders instantly & complete.
// ============================================================
const TT_SB_URL = "https://jwztffvzmuegeihrrfep.supabase.co";
const TT_SB_KEY = "sb_publishable_xzsWP9pt8lox8baME_mhtg_mwJ0xN_T";

const ttMapRetreat = (row) => ({
  m: row.month_label, date: row.date_label, loc: row.location,
  theme: row.theme, price: row.price, open: row.few_seats ? 2 : 8,
  externalUrl: row.external_url || null,
});
const ttMapOffering = (row) => ({
  t: row.title, s: row.subtitle, d: row.description,
  bullets: row.bullets || [], cta: row.cta, href: row.href,
  dark: row.variant === "dark", accent: row.variant === "accent", gift: row.variant === "gift",
});
const ttMapVoice = (row) => ({ text: row.quote, name: row.name, role: row.role });
const ttMapPractitioner = (row) => ({
  id: row.id, n: row.name, role: row.role || "", tel: row.tel || "", email: row.email || "",
  web: row.web || "", ort: row.ort || "", land: row.land || "DE",
  photo: row.photo_url || "", lat: row.lat, lng: row.lng,
});

// Anker-ID für eine Behandler-Kachel (für Karten-Klick → Scroll)
const ttPracId = (name) => "prac-" + (name || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");

// Klick-Tracking → tt_track RPC (fire-and-forget, anonym)
const ttTrack = (kind, p) => {
  try {
    fetch(TT_SB_URL + "/rest/v1/rpc/tt_track", {
      method: "POST",
      mode: "no-cors",
      headers: { apikey: TT_SB_KEY, Authorization: "Bearer " + TT_SB_KEY, "Content-Type": "application/json" },
      body: JSON.stringify({ p_kind: kind, p_id: (p && p.id) || "", p_name: (p && p.n) || "" }),
    });
  } catch (e) { /* ignore */ }
};

// Zur Behandler-Kachel scrollen + kurz hervorheben (für Karten-Klick)
const ttScrollToPrac = (p) => {
  const el = typeof document !== "undefined" && document.getElementById(ttPracId(p.n));
  if (!el) return;
  el.scrollIntoView({ behavior: "smooth", block: "center" });
  el.classList.add("tt-flash");
  setTimeout(() => el.classList.remove("tt-flash"), 1700);
};

const TT_DEFAULTS = {
  practitioners: null, // gefüllt aus Backend; Fallback = ONE_ON_ONE_PRACTITIONERS

  retreats: [
    { m: "Jun", date: "31.05.–05.06.", loc: "Gut Sedlbrunn · Pöttmes", theme: "6-Tage-Retreat", price: "999 €", open: 2 },
    { m: "Jul", date: "24.–26.07.", loc: "SEINZ Resort · Bad Kohlgrub", theme: "Wochenend-Retreat", price: "499 €", open: 6 },
    { m: "Okt", date: "30.10.–01.11.", loc: "Frankfurter Ring", theme: "2-Tages-Retreat", price: "ext.", open: 8 },
    { m: "Nov", date: "08.–13.11.", loc: "Holzöstersee · Österreich", theme: "Ausbildung Modul 1 · DSR", price: "3.500 €", open: 8 },
    { m: "Nov", date: "27.–29.11.", loc: "Sonnenstrahl · Kißlegg", theme: "Wochenend-Retreat", price: "499 €", open: 8 },
  ],
  offerings: [
    { t: "Retreats", s: "2,5 oder 6 Tage · Präsenz", d: "Einzigartige Retreats, in denen es nur um eines geht: um Dich. Dein vollständiges Ankommen im Hier & Jetzt, eine große Befreiung, dauerhafte Freude.", bullets: ["Wochenend-Retreat ab 499 €", "6-Tage-Retreat ab 999 €", "zzgl. Unterkunft & Verpflegung"], cta: "Termine 2026 ansehen", href: "#/retreats", dark: true },
    { t: "Ausbildung", s: "Betreutes Fühlen & DSR®", d: "Für Menschen, die nicht nur sich selbst, sondern auch anderen helfen wollen. 8 Tage (6 Präsenz + 2 online) in Tims wundermächtigen Methoden für Körper, Geist & Seele.", bullets: ["Ausbildungsgebühr 3.500 €", "Wiederholer 1.500 €", "Ratenzahlung möglich"], cta: "Mehr erfahren", href: "#/retreats", accent: true },
    { t: "Online-Kurs", s: "Vollkommen.Du.Sein", d: "Unser Content — orts- und zeitunabhängig. Mit Videokurs und umfangreichem Bonusmaterial gehst Du Deinen Weg in Deinem Tempo.", bullets: ["Tiefe innere Ruhe", "Emotionale Ausgeglichenheit", "Lebenslanger Zugang"], cta: "Zum Kurs", href: "https://erwachen.funnelcockpit.com/webseite/" },
    { t: "Inner Circle", s: "Regelmäßig · Live · Online", d: "Ein geschützter Raum, in dem Du Dich regelmäßig erinnern darfst: an Ruhe, an Frieden, an Dich. Gemeinsamer Satsang, aus Deinem Zuhause.", bullets: ["Regelmäßiger Satsang", "Entspannt von zuhause", "Offener Austausch"], cta: "Zum Inner Circle", href: "https://einfachdusein.mydigibiz24.com/preview/9ecd9ca7-314f-4b1b-a607-5f6a44dd76f8/d8c8d0cd8da720398a374cd952b8798c" },
    { t: "Betreutes Fühlen®", s: "1:1 · Präsenz oder online", d: "Eine liebevolle, präsente Begleitung in Deine Gefühle — bei Tim selbst oder einer seiner ausgebildeten Mentor:innen. 60 Minuten, ganz für Dich.", bullets: ["399 € bei Tim · 119 € bei Mentor:innen", "Einzeln buchbar", "Präsenz oder online (Zoom)"], cta: "Session anfragen", href: "#/1on1", dark: true },
    { t: "Deep Silence Regulation®", s: "DSR · Körper, Geist & Seele", d: "Tims wundermächtige Methode, die Dich in tiefste Stille führt. Eine Anwendung umfasst mindestens drei Sessions — sanft, tief, regulierend.", bullets: ["139 € pro Session", "Anwendung ab 3 Sessions", "Präsenz oder online"], cta: "DSR anfragen", href: "#/1on1" },
    { t: "Kostenfreies Webinar", s: "Vollkommen.Du.Sein", d: "Erfahre den einen unbekannten Grund, warum wahre Erfüllung den meisten verwehrt bleibt — und die zwei Erkenntnisse, die sie auch für Dich möglich machen.", bullets: ["Innerer Frieden", "Wahre Erfüllung", "Kostenfrei · jetzt als Aufzeichnung"], cta: "Aufzeichnung ansehen", href: "https://timtaxis.com/s/timtaxis/webinar", gift: true },
  ],
  voices: [
    { text: "Jeder, der das Gefühl hat, er könnte ein noch besseres oder leichteres Leben führen, ist bei Tim bestens aufgehoben.", name: "Marvin", role: "Unternehmer · München" },
    { text: "Tims Begleitung fühlt sich an wie nach Hause kommen.", name: "Brigitte", role: "1:1 Session" },
    { text: "Tim hilft auf so einfache und leicht erfahrbare Weise, mit sehr schnellen Ergebnissen.", name: "Vik", role: "1:1 Session" },
    { text: "Wann immer ich in Situationen gerate, die in mir eine Unklarheit auslösen, bin ich froh, mich jederzeit an Tim wenden zu können. Seine Unterstützung bringt mich wieder ein Stück näher zu meiner Wahrheit und Klarheit.", name: "Christina", role: "1:1 Begleitung" },
    { text: "Nachdem Meditationen und Achtsamkeitsübungen mir keine dauerhafte Ruhe gebracht hatten, war die Arbeit mit Tim eine ganz neue Erfahrung — endlich nicht mehr aufgescheucht, endlich angekommen.", name: "Christina", role: "HR Managerin · Düsseldorf" },
  ],
  settings: {
    heroClaim: "Einfach.Du.Sein.",
    contactEmail_willkommen: "willkommen@timtaxis.de",
    contactEmail_tim: "tim@timtaxis.de",
    url_innerCircle: "https://einfachdusein.mydigibiz24.com/preview/9ecd9ca7-314f-4b1b-a607-5f6a44dd76f8/d8c8d0cd8da720398a374cd952b8798c",
    url_onlineKurs: "https://erwachen.funnelcockpit.com/webseite/",
    url_webinar: "https://timtaxis.com/s/timtaxis/webinar",
    url_oneOnOne: "https://timtaxis.com/s/timtaxis/1on1_copy",
    url_newsletter: "https://timtaxis-newsletter.klicktipp.site/",
    footerTagline: "Das Ende der Suche, ist das Ankommen bei Dir selbst.",
    course_price: "890 €",
    course_nextGroup: "Nächste Gruppe · 4. Mai 2026",
    giftHeadline: "Warum Meditation oft nicht hilft — und was stattdessen.",
  },
};

const TTContentContext = React.createContext(TT_DEFAULTS);

const TTContentProvider = ({ children }) => {
  const [content, setContent] = useStateW(TT_DEFAULTS);
  useEffectW(() => {
    let cancelled = false;
    const opts = { headers: { apikey: TT_SB_KEY, Authorization: "Bearer " + TT_SB_KEY } };
    const base = TT_SB_URL + "/rest/v1/";
    const pull = (path) => fetch(base + path, opts).then((r) => (r.ok ? r.json() : null)).catch(() => null);
    Promise.all([
      pull("tt_retreats?select=*&order=sort_order"),
      pull("tt_offerings?select=*&order=sort_order"),
      pull("tt_testimonials?select=*&order=sort_order"),
      pull("tt_settings?select=key,value"),
      pull("tt_practitioners?select=*&order=sort_order"),
    ]).then(([rt, of, ts, st, pr]) => {
      if (cancelled) return;
      setContent((prev) => ({
        retreats: rt && rt.length ? rt.map(ttMapRetreat) : prev.retreats,
        offerings: of && of.length ? of.map(ttMapOffering) : prev.offerings,
        voices: ts && ts.length ? ts.map(ttMapVoice) : prev.voices,
        settings: st && st.length
          ? { ...prev.settings, ...Object.fromEntries(st.map((s) => [s.key, s.value])) }
          : prev.settings,
        practitioners: pr && pr.length ? pr.map(ttMapPractitioner) : prev.practitioners,
      }));
    });
    return () => { cancelled = true; };
  }, []);
  return <TTContentContext.Provider value={content}>{children}</TTContentContext.Provider>;
};

const useTTContent = () => React.useContext(TTContentContext) || TT_DEFAULTS;

// ----- Assets -----
const LOGO_INK   = "assets/logo-ink.png";
const LOGO_CREAM = "assets/logo-cream.png";
const LOGO_AMBER = "assets/logo-amber.png";

// ----- Photo component (real image with caption overlay) -----
// `glow` positions a blurred sun behind the image so every photo radiates.
//   - true / "tr": top-right (default)
//   - "tl": top-left
//   - "br": bottom-right
//   - "bl": bottom-left
//   - false: disabled
const SitePhoto = ({ src, alt = "Tim Taxis", ratio = "3 / 4", caption, position = "center", grayscale = false, glow = true, glowSize = 440 }) => {
  const pos = glow === true ? "tr" : glow;
  const glowClass = {
    tr: "-top-16 -right-16 md:-top-24 md:-right-24",
    tl: "-top-16 -left-16 md:-top-24 md:-left-24",
    br: "-bottom-16 -right-16 md:-bottom-24 md:-right-24",
    bl: "-bottom-16 -left-16 md:-bottom-24 md:-left-24",
  }[pos];
  return (
    <div className="relative w-full">
      {glow && (
        <div
          aria-hidden
          className={`absolute pointer-events-none ${glowClass} opacity-70`}
          style={{ filter: "blur(18px)", zIndex: 0 }}
        >
          <SunMark size={glowSize} />
        </div>
      )}
      <div className="relative w-full overflow-hidden bg-[color:var(--ink)]/5" style={{ aspectRatio: ratio, zIndex: 2 }}>
        <img
          src={src}
          alt={alt}
          className="absolute inset-0 w-full h-full"
          style={{ objectFit: "cover", objectPosition: position, filter: grayscale ? "grayscale(1)" : "none" }}
        />
        {caption && (
          <div className="absolute bottom-0 left-0 right-0 p-4 font-mono text-[9px] tracking-[0.22em] uppercase text-white/90"
               style={{ background: "linear-gradient(to top, rgba(0,0,0,0.55), transparent)" }}>
            {caption}
          </div>
        )}
        <div className="absolute top-0 left-0 w-12 h-px bg-white/60"></div>
        <div className="absolute top-0 left-0 w-px h-12 bg-white/60"></div>
        <div className="absolute bottom-0 right-0 w-12 h-px bg-white/60"></div>
        <div className="absolute bottom-0 right-0 w-px h-12 bg-white/60"></div>
      </div>
    </div>
  );
};

// ----- Portrait placeholder (kept as fallback for avatars) -----
const SitePortrait = ({ label = "Tim", ratio = "3 / 4", tone = "warm", caption }) => {
  const grad = tone === "light"
    ? "linear-gradient(160deg, oklch(0.94 0.025 82) 0%, oklch(0.88 0.04 70) 55%, oklch(0.80 0.08 60) 100%)"
    : "linear-gradient(160deg, oklch(0.90 0.03 80) 0%, oklch(0.80 0.08 65) 45%, oklch(0.55 0.10 50) 100%)";
  return (
    <div className="relative w-full overflow-hidden" style={{ aspectRatio: ratio, background: grad }}>
      {/* soft radiant sun position */}
      <div className="absolute inset-0" style={{
        background: "radial-gradient(circle at 30% 25%, oklch(0.95 0.1 75 / 0.55), transparent 55%)"
      }} />
      {/* silhouette shape */}
      <svg viewBox="0 0 300 400" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id={`sil-${label}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="oklch(0.45 0.05 50)" stopOpacity="0.35" />
            <stop offset="100%" stopColor="oklch(0.25 0.02 50)" stopOpacity="0.8" />
          </linearGradient>
        </defs>
        <path d="M150 95 C 185 95, 200 120, 200 150 C 200 175, 185 195, 150 200 C 115 195, 100 175, 100 150 C 100 120, 115 95, 150 95 Z
                 M 70 400 L 70 300 C 70 240, 110 215, 150 215 C 190 215, 230 240, 230 300 L 230 400 Z"
              fill={`url(#sil-${label})`} />
      </svg>
      <div className="absolute bottom-3 left-3 right-3 flex justify-between items-end">
        <span className="font-mono text-[10px] tracking-[0.18em] uppercase text-white/85 bg-black/25 backdrop-blur-sm px-2 py-1">
          {label}
        </span>
        {caption && <span className="font-mono text-[10px] text-white/75">{caption}</span>}
      </div>
    </div>
  );
};

// ----- Official logo (includes "Einfach.Du.Sein" tagline baked in) -----
const OFFICIAL = {
  gold:    "assets/logo-official-gold.png",
  ink:     "assets/logo-official-ink.png",
  navy:    "assets/logo-official-navy.png",
  duotone: "assets/logo-official-duotone.png",
  white:   "assets/logo-official-white.png",
};
const LogoMark = ({ variant = "navy", size = 180, className = "", includesTagline = true }) => {
  // Map old variant names to new official variants for backwards compat
  const map = { ink: "navy", cream: "white", amber: "gold" };
  const key = OFFICIAL[variant] ? variant : (map[variant] || "navy");
  return (
    <img src={OFFICIAL[key]} alt="Tim Taxis · Einfach.Du.Sein" style={{ width: size, height: "auto" }} className={className} />
  );
};

// Tagline is now baked into the logo — this component becomes a no-op for official logos,
// but we keep it for contexts that don't show the logo (footer microcopy, etc.)
const Tagline = ({ className = "", variant = "ink" }) => null;

// ========== NAV ==========
const WebNav = ({ prefs, setPrefs }) => {
  const [scrolled, setScrolled] = useStateW(false);
  const [menuOpen, setMenuOpen] = useStateW(false);
  const [currentHash, setCurrentHash] = useStateW(() => (typeof window !== "undefined" ? window.location.hash : ""));
  useEffectW(() => {
    const onHash = () => setCurrentHash(window.location.hash);
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useEffectW(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffectW(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const { settings } = useTTContent();
  const INNER_CIRCLE_URL = settings.url_innerCircle;
  const ONE_ON_ONE_URL = settings.url_oneOnOne;
  const links = [
    { h: "#/ueber", t: "Über Tim" },
    { h: "#/angebote", t: "Angebote", children: [
      { h: "#/1on1", t: "Betreutes Fühlen®" },
      { h: "#/1on1", t: "Deep Silence Regulation®" },
      { h: "#/ausgebildete", t: "Ausgebildete finden · Karte" },
    ] },
    { h: "#/kurs", t: "Onlinekurs" },
    { h: INNER_CIRCLE_URL, t: "Inner Circle", ext: true },
    { h: "#/retreats", t: "Retreats" },
    { h: "#/stimmen", t: "Stimmen" },
  ];
  return (
    <>
      <header
        className="sticky top-0 z-[60] backdrop-blur-md border-b border-[color:var(--ink)]/10 py-5"
        style={{ backgroundColor: "color-mix(in srgb, var(--paper) 15%, transparent)" }}
      >
        <div className="max-w-[1400px] mx-auto px-5 md:px-8 flex items-center justify-between gap-4">
          <a href="#/" className="flex items-center shrink-0" onClick={() => setMenuOpen(false)}>
            <LogoMark variant="navy" size={72} className="md:!w-[96px]" />
          </a>
          <nav className="hidden lg:flex items-center gap-6 xl:gap-8 font-mono text-[11px] tracking-[0.18em] uppercase text-[color:var(--ink)]/75">
            {links.map(({ h, t, ext, children }) => {
              const active = !ext && currentHash === h;
              if (children) {
                return (
                  <div key={t} className="relative group">
                    <a
                      href={h}
                      className={`relative inline-flex items-center gap-1.5 transition-colors ${active ? "text-[color:var(--accent-deep)]" : "hover:text-[color:var(--accent-deep)]"}`}
                    >
                      {t}
                      <span aria-hidden className="text-[8px] transition-transform group-hover:rotate-180">▾</span>
                    </a>
                    <div className="invisible absolute left-1/2 top-full z-50 -translate-x-1/2 pt-4 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100">
                      <div className="min-w-[260px] border border-[color:var(--ink)]/10 bg-[color:var(--paper)] py-2 shadow-[0_24px_56px_rgba(18,34,75,0.14)]">
                        {children.map((c) => (
                          <a
                            key={c.t}
                            href={c.h}
                            {...(c.ext ? { target: "_blank", rel: "noreferrer" } : {})}
                            className="block px-5 py-3 font-serif text-[16px] normal-case tracking-normal text-[color:var(--ink)]/80 transition-colors hover:bg-[color:var(--cream)] hover:text-[color:var(--accent-deep)]"
                          >
                            {c.t}
                          </a>
                        ))}
                      </div>
                    </div>
                  </div>
                );
              }
              return (
                <a
                  key={h}
                  href={h}
                  {...(ext ? { target: "_blank", rel: "noreferrer" } : {})}
                  className={`relative transition-colors ${active ? "text-[color:var(--accent-deep)]" : "hover:text-[color:var(--accent-deep)]"}`}
                >
                  {t}
                  {active && <span aria-hidden className="absolute left-0 right-0 -bottom-1 h-px bg-[color:var(--accent-deep)]" />}
                </a>
              );
            })}
          </nav>
          <div className="flex items-center gap-2 md:gap-3">
            {prefs && setPrefs && (
              <div className="hidden md:block">
                <DesignSwitcher prefs={prefs} setPrefs={setPrefs} variant="desktop" />
              </div>
            )}
            <a href="#/geschenk" className="hidden sm:inline-block font-mono text-[10px] md:text-[11px] tracking-[0.20em] uppercase px-4 md:px-5 py-2.5 md:py-3 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
              Geschenk ↗
            </a>
            <button
              aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(!menuOpen)}
              className="lg:hidden w-10 h-10 flex flex-col items-center justify-center gap-[5px] text-[color:var(--ink)] relative z-[60]"
            >
              <span className={`block w-6 h-[2px] bg-current transition-transform ${menuOpen ? "translate-y-[7px] rotate-45" : ""}`} />
              <span className={`block w-6 h-[2px] bg-current transition-opacity ${menuOpen ? "opacity-0" : ""}`} />
              <span className={`block w-6 h-[2px] bg-current transition-transform ${menuOpen ? "-translate-y-[7px] -rotate-45" : ""}`} />
            </button>
          </div>
        </div>
      </header>

      <div
        className={`lg:hidden fixed inset-0 bg-[color:var(--paper)] z-[50] transition-opacity duration-200 ${menuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
        style={{ overflowY: "auto" }}
      >
        <div className="h-[88px]" />
        <nav className="max-w-[1400px] mx-auto px-5 md:px-8 pb-10 flex flex-col divide-y divide-[color:var(--ink)]/10 font-serif text-[26px] leading-[1.2]">
          {links.map(({ h, t, ext, children }) => {
            const active = !ext && currentHash === h;
            return (
              <div key={t}>
                <a
                  href={h}
                  {...(ext ? { target: "_blank", rel: "noreferrer" } : {})}
                  onClick={() => setMenuOpen(false)}
                  className={`py-5 flex items-center justify-between ${active ? "text-[color:var(--accent-deep)]" : "hover:text-[color:var(--accent-deep)]"}`}
                >
                  <span className={active ? "italic" : ""}>{t}</span>
                  <span className="font-mono text-[11px] tracking-[0.22em] text-[color:var(--ink)]/40">{active ? "●" : "↗"}</span>
                </a>
                {children && (
                  <div className="pb-5 -mt-2 flex flex-col pl-5 border-l-2 border-[color:var(--accent)]/40 ml-1">
                    {children.map((c) => (
                      <a
                        key={c.t}
                        href={c.h}
                        {...(c.ext ? { target: "_blank", rel: "noreferrer" } : {})}
                        onClick={() => setMenuOpen(false)}
                        className="py-2.5 font-serif text-[19px] text-[color:var(--ink)]/70 hover:text-[color:var(--accent-deep)]"
                      >
                        {c.t}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
          <a href="#/geschenk" onClick={() => setMenuOpen(false)} className="mt-8 font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] text-center hover:bg-[color:var(--accent-deep)] border-t-0">
            Kostenfreies Geschenk →
          </a>
          {prefs && setPrefs && (
            <div className="mt-8">
              <DesignSwitcher prefs={prefs} setPrefs={setPrefs} variant="inline" />
            </div>
          )}
        </nav>
      </div>
    </>
  );
};

// ========== HERO ==========
const WebHero = () => (
  <section id="top" className="relative overflow-hidden" style={{ background: "var(--cream)" }}>

    <div className="relative max-w-[1400px] mx-auto px-5 md:px-8 pt-10 md:pt-20 pb-20 md:pb-32">
      <div className="grid grid-cols-12 gap-8 md:gap-10 items-end">
        <div className="col-span-12 lg:col-span-7">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6 md:mb-10">
            Satsang · 1:1 · Retreats · Onlinekurs
          </div>
          <h1 className="font-serif text-[clamp(2.75rem,10vw,10rem)] leading-[0.95] md:leading-[0.92] tracking-[-0.02em] text-[color:var(--ink)]">
            Einfach.<br/>
            <span className="italic font-normal gradient-glut">Du.</span><br/>
            Sein.
          </h1>
          <div className="mt-8 md:mt-10 max-w-xl">
            <p className="font-serif text-[20px] md:text-[24px] leading-[1.45] text-[color:var(--ink)]/85">
              Das Ende der Suche.
              <span className="block italic text-[color:var(--ink)] mt-1">Das Ankommen bei Dir selbst.</span>
            </p>
            <p className="mt-5 md:mt-6 font-serif text-[16px] md:text-[17px] leading-[1.65] text-[color:var(--ink)]/70">
              Du hast schon vieles ausprobiert — doch es hat Dir noch nicht dauerhaft das gebracht, was Du Dir von Herzen wünschst. Dann bist Du hier genau richtig. Willkommen zuhause.
            </p>
          </div>
          <div className="mt-8 md:mt-12 flex flex-wrap gap-4 md:gap-5">
            <a href="#/geschenk" className="font-mono text-[11px] tracking-[0.22em] uppercase px-6 md:px-8 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
              Kostenfreies Geschenk →
            </a>
            <a href="#/angebote" className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/80 hover:text-[color:var(--accent-deep)] border-b border-[color:var(--ink)]/30 pb-1 self-center">
              Alle Angebote ansehen
            </a>
          </div>
        </div>

        <div className="col-span-12 lg:col-span-5 relative">
          <div className="relative isolate">
            <div
              aria-hidden
              className="absolute pointer-events-none -top-[160px] -right-[120px] md:-top-[220px] md:-right-[160px] opacity-95"
              style={{ filter: "blur(10px)", zIndex: -1 }}
            >
              <SunMark size={420} />
            </div>
            <SitePhoto src="assets/tim-hero.jpg" alt="Tim Taxis" ratio="4 / 5" caption="2025 · Satsang" position="center 30%" glow={false} />
            <div className="hero-floating-card absolute -bottom-8 -left-8 bg-[color:var(--paper)] border border-[color:var(--ink)]/15 p-5 md:p-6 max-w-[280px] shadow-xl z-10" style={{ boxShadow: "0 30px 60px -20px rgba(0,0,0,0.2)" }}>
              <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-2 md:mb-3">
                Tims Einladung
              </div>
              <div className="font-serif italic text-[16px] md:text-[17px] leading-[1.45] text-[color:var(--ink)]">
                „Du musst nichts leisten. Du musst nichts beweisen. Du musst nicht einmal wissen, warum Du hier bist.”
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {/* Scrolling strip */}
    <div className="relative border-t border-b border-[color:var(--ink)]/15 overflow-hidden bg-[color:var(--cream-deep)]/40">
      <div className="flex gap-16 whitespace-nowrap font-serif text-[clamp(1.5rem,2.5vw,2.25rem)] py-5 text-[color:var(--ink)]/80 animate-[scroll_40s_linear_infinite]">
        {[..."Stille · Weite · Klarheit · Frieden · Wärme · Erwachen · Freude · Hingabe · Gelassenheit · Sein ·".split(" ")].concat(["Stille","·","Weite","·","Klarheit","·","Frieden","·","Wärme","·","Erwachen","·"]).map((w, i) => (
          <span key={i} className={w === "·" ? "text-[color:var(--ink)]/25" : (i % 3 === 0 ? "italic" : "")}>{w}</span>
        ))}
      </div>
    </div>
  </section>
);

// ========== WHAT YOU WONT FIND ==========
const WhatYouWontFind = () => {
  const items = [
    { h: "Weitere Methoden", t: "Du brauchst keine neue Technik. Alles, was Du suchst, ist schon da — verborgen unter der Anstrengung, es erreichen zu wollen." },
    { h: "Neue Konzepte", t: "Ich verkaufe Dir keine Ideen, keinen Gott, keine Universelle Macht, an die Du glauben musst. Es geht um die Stille." },
    { h: "Versprechen auf morgen", t: "Frieden ist nicht das Ziel einer langen Reise. Er beginnt hier. Jetzt. Mit Dir." },
  ];
  return (
    <section className="bg-white">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="01" label="Ehrlich gesagt" />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <h2 className="col-span-12 md:col-span-8 font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.02] tracking-[-0.01em]">
            Was Du hier<br/>
            <span className="italic">nicht finden wirst.</span>
          </h2>
          <p className="col-span-12 md:col-span-4 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 self-end">
            Damit Du weißt, worauf Du Dich einlässt — und worauf nicht. Das ist kein Marketing. Das ist eine Einladung.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-[color:var(--ink)]/15">
          {items.map((it, i) => (
            <div key={it.h} className={`py-12 md:px-10 ${i < items.length - 1 ? "md:border-r border-[color:var(--ink)]/15" : ""} border-b md:border-b-0 border-[color:var(--ink)]/15`}>
              <div className="font-serif italic text-[84px] leading-none gradient-glut mb-8">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="font-serif text-[28px] leading-[1.1] text-[color:var(--ink)] mb-4">{it.h}</h3>
              <p className="font-serif text-[16px] leading-[1.6] text-[color:var(--ink)]/75">{it.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ========== WELCOME BLOCK ==========
const Welcome = () => (
  <section className="bg-[color:var(--cream-deep)] relative overflow-hidden">
    <div className="absolute -left-32 -bottom-32 opacity-25"><SunMark size={520} /></div>
    <div className="relative max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
      <div className="grid grid-cols-12 gap-10 items-center">
        <div className="col-span-12 md:col-span-5">
          <SitePhoto src="assets/tim-satsang-smile.jpg" alt="Stille · Raum" ratio="5 / 6" position="center 30%" glow="tl" glowSize={380} />
        </div>
        <div className="col-span-12 md:col-span-6 md:col-start-7">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
            02 — Willkommen
          </div>
          <h2 className="font-serif text-[clamp(2.25rem,5vw,4.25rem)] leading-[1.02] tracking-[-0.01em] text-[color:var(--ink)]">
            Hier bist Du willkommen —<br/>
            <span className="italic">genau so, wie Du bist.</span>
          </h2>
          <div className="mt-10 space-y-5 font-serif text-[19px] leading-[1.55] text-[color:var(--ink)]/85 max-w-xl">
            <p>Du musst nichts leisten. Du musst nichts beweisen. Du musst nicht einmal wissen, warum Du hier bist.</p>
            <p>Alles, was Dich ausmacht — Deine Freude, Deine Zweifel, Deine Fragen — darf hier sein.</p>
            <p className="text-[color:var(--ink)] italic border-l-2 border-[color:var(--strahlen)] pl-6">
              Es gibt kein Richtig oder Falsch. Keine Rolle, die Du erfüllen musst. Hier ist Raum. Raum für Dich. Für Dein ganzes Sein.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ========== ABOUT TIM ==========
const AboutTimWeb = () => (
  <section id="ueber-tim" className="bg-white">
    <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
      <SectionLabel num="03" label="Über Tim" />
      <div className="grid grid-cols-12 gap-10">
        <div className="col-span-12 md:col-span-5">
          <SitePhoto src="assets/tim-park.jpg" alt="Tim · heute" ratio="4 / 5" caption="Tim · heute" position="center 20%" glow="tr" glowSize={400} />
          <div className="mt-6 grid grid-cols-2 gap-x-6 gap-y-5 font-mono text-[11px] tracking-[0.12em] uppercase text-[color:var(--ink)]/60 border-t border-[color:var(--ink)]/15 pt-6">
            <div><div className="text-[color:var(--ink)]/40">Rolle heute</div><div className="text-[color:var(--ink)] mt-1 normal-case tracking-normal font-serif text-[15px]">Spiritueller Mentor &amp; Satsang-Lehrer</div></div>
            <div><div className="text-[color:var(--ink)]/40">Früher</div><div className="text-[color:var(--ink)] mt-1 normal-case tracking-normal font-serif text-[15px]">Sales-Experte, 2× Trainer d. Jahres</div></div>
            <div><div className="text-[color:var(--ink)]/40">Rückzug</div><div className="text-[color:var(--ink)] mt-1">Ende 2018</div></div>
            <div><div className="text-[color:var(--ink)]/40">Rückkehr</div><div className="text-[color:var(--ink)] mt-1">2022</div></div>
            <div><div className="text-[color:var(--ink)]/40">Lehrer</div><div className="text-[color:var(--ink)] mt-1 normal-case tracking-normal font-serif text-[15px]">Eli Jaxon-Bear</div></div>
            <div><div className="text-[color:var(--ink)]/40">Praxis</div><div className="text-[color:var(--ink)] mt-1 normal-case tracking-normal font-serif text-[15px]">Deep Silence Regulation®</div></div>
          </div>
        </div>

        <div className="col-span-12 md:col-span-7 md:pl-10">
          <h2 className="font-serif text-[clamp(2rem,4.5vw,4rem)] leading-[1.02] tracking-[-0.01em] text-[color:var(--ink)]">
            Vom Bestseller-Autor<br/>
            zum <span className="italic">stillen Begleiter</span>.
          </h2>
          <div className="mt-10 space-y-6 font-serif text-[18px] leading-[1.65] text-[color:var(--ink)]/85 max-w-2xl">
            <p>
              Tim Taxis war einer der renommiertesten Sales-Experten im deutschsprachigen Raum — zweimal „Trainer des Jahres”, Bestseller-Autor, Top-Speaker, Hochschuldozent. Mit Buchungen rund um den Globus.
            </p>
            <p>
              Ende 2018 zog er sich — dem Ruf seines Herzens folgend — völlig aus der Öffentlichkeit zurück. Vier Jahre der Umkehr, der inneren Einkehr. In der Begegnung mit seinem letzten Lehrer, Eli Jaxon-Bear, geschah ein direktes, vollkommenes Erkennen.
            </p>
            <p>
              Heute führt er Menschen so vollkommen ins Hier &amp; Jetzt, dass Aufwachen — heraus aus der Trance des Egos und hinein in das direkte Erleben der wahren Natur — geschehen kann.
            </p>
            <p className="text-[color:var(--ink)] italic border-l-2 border-[color:var(--strahlen)] pl-6 font-serif text-[22px] leading-[1.4]">
              „Die spirituelle Suche endet nicht durch mehr Anstrengung. Sie endet durch das ehrliche Aufhören zu suchen.”
            </p>
          </div>
          <div className="mt-10 flex items-center gap-5">
            <LogoMark variant="navy" size={120} />
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55">
              handschrift · tim
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ========== WHAT YOU'LL GAIN ==========
const Benefits = () => {
  const items = [
    { h: "Erhöhte Lebensqualität", t: "Entdecke Dein wahres Ich — indem Du Deine inneren Schichten erkundest und zu einem tieferen Selbstverständnis gelangst." },
    { h: "Lebenslange Gelassenheit", t: "Eine anhaltende Gelassenheit, die Dir ermöglicht, mit den Wellen des Lebens souverän und ruhig zu surfen." },
    { h: "Authentisches Selbstsein", t: "Lebe ein authentisches Leben, in dem Du Dich trauen kannst, Du selbst zu sein, und Deine Einzigartigkeit vollständig entfaltest." },
    { h: "Dauerhafte innere Ruhe", t: "Eine tiefe, beständige Ruhe, die über den Moment hinausgeht und Dir hilft, jeden Tag gelassener zu meistern." },
    { h: "Emotionale Ausgeglichenheit", t: "Finde Dein emotionales Gleichgewicht wieder und lerne, auch in herausfordernden Zeiten stabil und zentriert zu bleiben." },
    { h: "Tiefgreifende Selbstfindung", t: "Jenseits von Rollen und Identitäten — das, was Du bist, bevor Du antwortest." },
  ];
  return (
    <section id="weg" className="bg-[color:var(--cream)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="04" label="Wozu ich Dich einlade" />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <h2 className="col-span-12 md:col-span-8 font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.02] tracking-[-0.01em]">
            Wenn Du aufhörst<br/>
            mit <span className="italic gradient-glut">„Um-Zu”</span>.
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0 border-t border-[color:var(--ink)]/15">
          {items.map((it, i) => (
            <div key={it.h}
                 className={`p-10 border-b border-[color:var(--ink)]/15 ${(i + 1) % 3 !== 0 ? "lg:border-r" : ""} ${(i % 2 === 0) ? "md:border-r" : ""} lg:[&:nth-child(3n)]:border-r-0`}>
              <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-5">
                {String(i + 1).padStart(2, "0")}
              </div>
              <h3 className="font-serif text-[26px] leading-[1.1] text-[color:var(--ink)] mb-3">{it.h}</h3>
              <p className="font-serif text-[15px] leading-[1.6] text-[color:var(--ink)]/75">{it.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ========== OFFERINGS GRID ==========
const Offerings = () => {
  const { offerings } = useTTContent();

  return (
    <section id="angebote" className="bg-white">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="05" label="Unsere Angebote" />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <h2 className="col-span-12 md:col-span-8 font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.02] tracking-[-0.01em]">
            Deine Erfahrung —<br/>
            <span className="italic">sechs Türen, ein Raum</span>.
          </h2>
          <p className="col-span-12 md:col-span-4 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 self-end">
            In all diesen Formaten machen wir erlebbar, was ohnehin schon in Dir steckt.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {offerings.map((o, i) => {
            const base = "relative p-8 md:p-9 flex flex-col overflow-hidden min-h-[380px]";
            const tones = o.dark
              ? "bg-[color:var(--ink)] text-[color:var(--paper)]"
              : o.accent
                ? "bg-[color:var(--cream-deep)] text-[color:var(--ink)]"
                : o.gift
                  ? "bg-[color:var(--accent)] text-[color:var(--ink)]"
                  : "bg-[color:var(--cream)] text-[color:var(--ink)]";
            return (
              <article key={o.t} className={`${base} ${tones}`}>
                {o.dark && <div className="absolute -right-16 -bottom-16 opacity-30"><SunMark size={260} /></div>}
                <div className="relative flex-1">
                  <div className={`font-mono text-[10px] tracking-[0.22em] uppercase mb-6 ${o.dark ? "text-[color:var(--paper)]/55" : "text-[color:var(--ink)]/55"}`}>
                    {String(i + 1).padStart(2, "0")} · {o.s}
                  </div>
                  <h3 className={`font-serif text-[32px] leading-[1.05] mb-4 ${o.dark ? "" : ""}`}>
                    {o.t}
                  </h3>
                  <p className={`font-serif text-[15px] leading-[1.6] mb-6 ${o.dark ? "text-[color:var(--paper)]/80" : "text-[color:var(--ink)]/75"}`}>
                    {o.d}
                  </p>
                  <ul className="space-y-2 font-serif text-[14px]">
                    {o.bullets.map((b) => (
                      <li key={b} className="flex items-start gap-2.5">
                        <span className={o.dark ? "text-[color:var(--strahlen)]" : "text-[color:var(--strahlen)]"}>◦</span>
                        <span className={o.dark ? "text-[color:var(--paper)]/85" : "text-[color:var(--ink)]/80"}>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="relative mt-8 pt-5 border-t border-current/15 flex items-center justify-between">
                  <a
                    href={o.href || "#"}
                    {...(o.href && o.href.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {})}
                    className={`font-mono text-[11px] tracking-[0.18em] uppercase border-b pb-1 ${o.dark ? "border-[color:var(--paper)]/50 text-[color:var(--paper)] hover:text-[color:var(--accent)]" : "border-[color:var(--ink)]/40 text-[color:var(--ink)] hover:text-[color:var(--accent-deep)]"}`}
                  >
                    {o.cta} →
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ========== COURSE DETAIL ==========
const CourseDetail = () => {
  const { settings } = useTTContent();
  const modules = [
    { n: "01", title: "Das erste Sehen", dur: "Woche 1", body: "Ein Raum, in dem zum ersten Mal nichts von Dir erwartet wird." },
    { n: "02", title: "Identität und ihr Trugbild", dur: "Woche 2", body: "Wir schauen auf die Geschichten, die Du für Dich hältst." },
    { n: "03", title: "Betreutes Fühlen", dur: "Woche 3", body: "Gefühle nicht lösen, sondern zulassen — und durchschauen." },
    { n: "04", title: "Deep Silence Regulation®", dur: "Woche 4", body: "Der direkte Zugang zur Stille, die Du schon bist." },
    { n: "05", title: "Das Unmittelbare", dur: "Woche 5", body: "Kein Warten. Kein später. Das, was jetzt ist, als einziger Ort." },
    { n: "06", title: "Weiter ohne Weg", dur: "Woche 6", body: "Integration. Rückkehr. Die Einladung, dass dies nie endet." },
  ];
  return (
    <section id="kurs" className="bg-[color:var(--cream)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="06" label="Onlinekurs" />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <div className="col-span-12 md:col-span-7">
            <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
              6 Wochen · 24 Sessions · lebenslanger Zugang
            </div>
            <h2 className="font-serif text-[clamp(2.5rem,6vw,5.5rem)] leading-[0.98] tracking-[-0.02em]">
              Der Onlinekurs<br/>
              <span className="italic">Einfach.Du.Sein</span>.
            </h2>
          </div>
          <p className="col-span-12 md:col-span-4 md:col-start-9 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/75 self-end">
            Für Menschen, die nicht mehr lernen wollen — sondern endlich weniger tragen.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          <div className="lg:col-span-8 border-t border-[color:var(--ink)]/15">
            {modules.map((m) => (
              <div key={m.n} className="grid grid-cols-12 gap-4 py-7 border-b border-[color:var(--ink)]/15 group">
                <div className="col-span-2 md:col-span-1 font-mono text-[12px] tracking-[0.18em] text-[color:var(--ink)]/45 pt-1">
                  {m.n}
                </div>
                <div className="col-span-10 md:col-span-7">
                  <h3 className="font-serif text-[24px] leading-[1.1] text-[color:var(--ink)]">{m.title}</h3>
                  <p className="font-serif text-[15px] leading-[1.55] text-[color:var(--ink)]/70 mt-2">{m.body}</p>
                </div>
                <div className="col-span-10 col-start-3 md:col-span-4 md:col-start-auto font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55 pt-1">
                  {m.dur}
                </div>
              </div>
            ))}
          </div>

          <aside className="lg:col-span-4">
            <div className="sticky top-28 bg-[color:var(--paper)] border border-[color:var(--ink)]/15 p-8">
              <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">Teilnahme</div>
              <div className="font-serif text-[56px] leading-none text-[color:var(--ink)]">{settings.course_price || "890 €"}</div>
              <div className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55 mt-2">einmalig · inkl. MwSt.</div>
              <div className="my-6 h-px bg-[color:var(--ink)]/15" />
              <ul className="space-y-3 font-serif text-[15px] text-[color:var(--ink)]/80">
                {["24 geführte Video-Sessions", "Wöchentlicher Live-Call mit Tim", "Stiller Gruppen-Raum", "Lebenslanger Zugang", "30 Tage Rückkehr-Garantie"].map((s) => (
                  <li key={s} className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span>{s}</li>
                ))}
              </ul>
              <a href={settings.url_onlineKurs} target="_blank" rel="noreferrer" className="mt-8 block text-center w-full font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
                Jetzt teilnehmen →
              </a>
              <p className="mt-4 font-mono text-[10px] tracking-[0.12em] text-[color:var(--ink)]/50 text-center uppercase">
                {settings.course_nextGroup || "Nächste Gruppe · 4. Mai 2026"}
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

// ========== RETREATS ==========
const RetreatsBlock = () => {
  const { retreats: r } = useTTContent();
  return (
    <section id="retreats" className="bg-[color:var(--ink)] text-[color:var(--paper)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <div className="flex items-baseline gap-6 mb-16">
          <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--paper)]/55">07</span>
          <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--paper)]/55">Retreats · Termine</span>
          <div className="flex-1 h-px bg-[color:var(--paper)]/20" />
        </div>
        <div className="grid grid-cols-12 gap-10 mb-16">
          <div className="col-span-12 md:col-span-7">
            <h2 className="font-serif text-[clamp(2.5rem,6vw,5.5rem)] leading-[0.98] tracking-[-0.02em]">
              Tage, an denen<br/>
              <span className="italic gradient-glut">nichts passiert</span> —<br/>
              und alles geschieht.
            </h2>
          </div>
          <p className="col-span-12 md:col-span-4 md:col-start-9 font-serif text-[17px] leading-[1.6] text-[color:var(--paper)]/75 self-end">
            In intensiven Retreats führen wir Dich in die Stille, die Du bist. Begleitet von täglichen DSR-Sessions.
          </p>
        </div>

        <div className="border-t border-[color:var(--paper)]/20">
          {r.map((row, i) => (
            <div key={i} className="grid grid-cols-12 gap-4 py-7 border-b border-[color:var(--paper)]/20 items-center hover:bg-[color:var(--paper)]/5 -mx-2 px-2 transition-colors">
              <div className="col-span-2 md:col-span-1 font-serif italic text-[32px] gradient-glut">{row.m}</div>
              <div className="col-span-5 md:col-span-3 font-mono text-[12px] tracking-[0.14em] uppercase text-[color:var(--paper)]/75">{row.date}</div>
              <div className="col-span-12 md:col-span-4 font-serif text-[22px] leading-[1.1]">{row.theme}</div>
              <div className="col-span-6 md:col-span-2 font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--paper)]/60">{row.loc}</div>
              <div className="col-span-6 md:col-span-2 text-right">
                <span className="block font-serif text-[18px] text-[color:var(--paper)]">{row.price}</span>
                {row.open <= 3 ? (
                  <span className="font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--accent)]">
                    nur wenige Plätze
                  </span>
                ) : null}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-wrap gap-5 items-center">
          <a href="mailto:willkommen@timtaxis.de" className="font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--accent)] text-[color:var(--ink)] hover:bg-[color:var(--paper)] transition-colors">
            Platz anfragen →
          </a>
          <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--paper)]/60">
            Buchung per E-Mail an willkommen@timtaxis.de · zzgl. Unterkunft &amp; Verpflegung
          </span>
        </div>
      </div>
    </section>
  );
};

// ========== GALLERY / IN PRÄSENZ ==========
const InPresence = () => (
  <section id="in-praesenz" className="bg-[color:var(--cream)]">
    <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
      <SectionLabel num="08" label="In Präsenz · Fragmente" />
      <div className="grid grid-cols-12 gap-8 mb-16">
        <h2 className="col-span-12 md:col-span-8 font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.02] tracking-[-0.01em]">
          Begegnung,<br/>
          <span className="italic">Raum, Stille</span>.
        </h2>
        <p className="col-span-12 md:col-span-4 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 self-end">
          Momentaufnahmen aus Satsangs, Retreats und Bühnen — von Bayern bis zu Festivals, von kleinen Kreisen bis zu vollen Sälen.
        </p>
      </div>

      {/* Asymmetric magazine grid */}
      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-12 md:col-span-8">
          <SitePhoto src="assets/tim-theater.jpg" alt="Im Theater · vor vollem Saal" ratio="16 / 10" caption="Theatersaal · Dialog vor Publikum" position="center" glow="tr" glowSize={460} />
        </div>
        <div className="col-span-12 md:col-span-4 flex flex-col gap-6">
          <SitePhoto src="assets/tim-satsang-stage.jpg" alt="Satsang · Gestik" ratio="4 / 5" caption="Satsang · im Dachstuhl" position="center 20%" glow="tl" glowSize={360} />
        </div>

        <div className="col-span-6 md:col-span-3">
          <SitePhoto src="assets/tim-festival.jpg" alt="Yoga United Festival" ratio="3 / 4" caption="Yoga United · Festival" position="center 20%" glow="tr" glowSize={340} />
        </div>
        <div className="col-span-6 md:col-span-3">
          <SitePhoto src="assets/tim-satsang-square.jpg" alt="Spirit Festival" ratio="3 / 4" caption="Ananda Spirit Festival" position="center 20%" glow="bl" glowSize={340} />
        </div>
        <div className="col-span-12 md:col-span-6">
          <SitePhoto src="assets/retreat-audience.jpg" alt="Retreat · Publikum" ratio="3 / 2" caption="Vortragssaal · voll besetzt" position="center" glow="tr" glowSize={420} />
        </div>
      </div>

      <div className="mt-16 grid grid-cols-12 gap-6 items-center">
        <div className="col-span-12 md:col-span-5">
          <SitePhoto src="assets/tim-lachen.jpg" alt="Lachen" ratio="4 / 5" position="center 15%" glow="tr" glowSize={360} />
        </div>
        <div className="col-span-12 md:col-span-7">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
            ~ Humor als Medizin
          </div>
          <p className="font-serif text-[clamp(1.4rem,2.4vw,2rem)] leading-[1.3] text-[color:var(--ink)]">
            „Das Grundgefühl ist Freude.<br/>
            <span className="italic text-[color:var(--ink)]/70">Nicht weil etwas passiert ist — sondern weil nichts im Weg ist.“</span>
          </p>
          <div className="mt-8 font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/50">— Tim</div>
        </div>
      </div>
    </div>
  </section>
);

// ========== TESTIMONIALS ==========
const WebTestimonials = () => {
  const { voices } = useTTContent();
  return (
    <section id="stimmen" className="bg-white">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="09" label="Stimmen · Wahrhaftigkeit" />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <h2 className="col-span-12 md:col-span-8 font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.02] tracking-[-0.01em]">
            Menschen, die<br/>
            <span className="italic">Wahrhaftigkeit erfahren</span>.
          </h2>
          <p className="col-span-12 md:col-span-4 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 self-end">
            Viele erleben in kürzester Zeit, was sie vorher Jahre oder Jahrzehnte sehnlichst gesucht haben.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
          {voices.map((v, i) => (
            <figure key={i} className="border-t-2 border-[color:var(--accent-deep)] pt-8">
              <div className="font-serif text-[42px] leading-none text-[color:var(--accent-deep)] mb-3">“</div>
              <blockquote className="font-serif text-[18px] leading-[1.55] text-[color:var(--ink)] italic">
                {v.text}
              </blockquote>
              <figcaption className="mt-8 flex items-center gap-3">
                <div className="w-11 h-11 rounded-full flex items-center justify-center font-serif text-[15px] text-[color:var(--paper)] shrink-0"
                     style={{ background: "oklch(0.55 0.14 55)" }}>
                  {v.name[0]}
                </div>
                <div>
                  <div className="font-serif text-[15px] text-[color:var(--ink)]">{v.name}</div>
                  <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55 mt-0.5">{v.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

// ========== GIFT CTA ==========
// KlickTipp Opt-in (öffentlicher Embed-Key der Newsletter-Liste)
const TT_KLICKTIPP_ENDPOINT = "https://app.klicktipp.com/api/subscriber/signin.html";
const TT_KLICKTIPP_APIKEY = "7c8pznskxz8za607";

const GiftCTA = () => {
  const [firstName, setFirstName] = useStateW("");
  const [email, setEmail] = useStateW("");
  const [status, setStatus] = useStateW("idle"); // idle | sending | done | error

  const submit = (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus("sending");
    const body = new URLSearchParams();
    body.set("apikey", TT_KLICKTIPP_APIKEY);
    body.set("email", email.trim());
    if (firstName.trim()) body.set("fieldFirstName", firstName.trim());
    fetch(TT_KLICKTIPP_ENDPOINT, {
      method: "POST",
      mode: "no-cors",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: body.toString(),
    })
      .then(() => setStatus("done"))
      .catch(() => setStatus("done")); // no-cors: Antwort nicht lesbar, Eintrag erfolgt dennoch
  };

  return (
    <section id="geschenk" className="bg-[color:var(--accent)] relative overflow-hidden">
      <div className="absolute -left-40 -top-40 opacity-25"><SunMark size={600} /></div>
      <div className="relative max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <div className="grid grid-cols-12 gap-10 items-center">
          <div className="col-span-12 md:col-span-7">
            <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/70 mb-8">
              10 — Mein Geschenk an Dich
            </div>
            <h2 className="font-serif text-[clamp(2.5rem,6vw,6rem)] leading-[0.98] tracking-[-0.02em] text-[color:var(--ink)]">
              Warum Meditation<br/>
              oft nicht hilft —<br/>
              <span className="italic">und was stattdessen.</span>
            </h2>
            <p className="mt-10 font-serif text-[20px] leading-[1.5] text-[color:var(--ink)]/80 max-w-xl">
              Ein kostenfreies Video, in dem Du erfährst, wie Du in nur wenigen Minuten wirkliche Ruhe im Kopf findest. Kein Trick. Keine Technik. Nur ein Zeigen.
            </p>
          </div>
          <div className="col-span-12 md:col-span-5">
            {status === "done" ? (
              <div className="bg-[color:var(--paper)] p-10 border border-[color:var(--ink)]/10 shadow-2xl" style={{ boxShadow: "0 40px 80px -20px rgba(0,0,0,0.25)" }}>
                <div className="font-serif italic text-[28px] leading-[1.2] text-[color:var(--ink)]">Fast geschafft.</div>
                <p className="mt-4 font-serif text-[17px] leading-[1.55] text-[color:var(--ink)]/80">
                  Bitte bestätige zum Schluss noch die E-Mail in Deinem Postfach — dann kommt Dein
                  Geschenk sofort zu Dir. Schau ggf. auch im Spam-Ordner nach.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} className="bg-[color:var(--paper)] p-10 border border-[color:var(--ink)]/10 shadow-2xl" style={{ boxShadow: "0 40px 80px -20px rgba(0,0,0,0.25)" }}>
                <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
                  Kostenfrei · sofort per E-Mail
                </div>
                <label className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 block mb-2">Vorname</label>
                <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full bg-transparent border-b-2 border-[color:var(--ink)]/25 pb-3 font-serif text-[18px] text-[color:var(--ink)] focus:border-[color:var(--accent-deep)] outline-none mb-6" placeholder="Dein Vorname" />

                <label className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 block mb-2">E-Mail</label>
                <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="w-full bg-transparent border-b-2 border-[color:var(--ink)]/25 pb-3 font-serif text-[18px] text-[color:var(--ink)] focus:border-[color:var(--accent-deep)] outline-none mb-8" placeholder="du@beispiel.de" />

                <button type="submit" disabled={status === "sending"} className="w-full font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors disabled:opacity-70">
                  {status === "sending" ? "Senden…" : "Geschenk anfordern →"}
                </button>
                <p className="mt-5 font-mono text-[9px] tracking-[0.12em] uppercase text-[color:var(--ink)]/50 text-center">
                  Kein Spam · Du kannst jederzeit austragen
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// ========== FOOTER ==========
const WebFooter = () => {
  const { settings } = useTTContent();
  return (
  <footer className="bg-[color:var(--ink)] text-[color:var(--paper)]">
    <div className="max-w-[1400px] mx-auto px-8 py-20">
      <div className="grid grid-cols-12 gap-8 mb-16">
        <div className="col-span-12 md:col-span-5">
          <LogoMark variant="white" size={200} />
          <p className="mt-8 font-serif text-[17px] leading-[1.55] text-[color:var(--paper)]/70 max-w-sm">
            {settings.footerTagline}
          </p>
        </div>
        {[
          { h: "Angebote", items: [
            { l: "Retreats & Termine", h: "#/retreats" },
            { l: "Ausbildung (DSR)", h: "#/retreats" },
            { l: "Online-Kurs", h: settings.url_onlineKurs },
            { l: "Inner Circle", h: settings.url_innerCircle },
            { l: "1:1 Sessions", h: "mailto:" + settings.contactEmail_tim },
            { l: "Webinar", h: settings.url_webinar },
          ] },
          { h: "Über", items: [
            { l: "Über Tim", h: "#/" },
            { l: "Mein Weg", h: "#/" },
            { l: "Newsletter", h: settings.url_newsletter },
          ] },
          { h: "Kontakt", items: [
            { l: settings.contactEmail_willkommen, h: "mailto:" + settings.contactEmail_willkommen },
            { l: "Mauerkircherstr. 94", h: null },
            { l: "81925 München", h: null },
          ] },
        ].map((col) => (
          <div key={col.h} className="col-span-6 md:col-span-2">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--paper)]/50 mb-5">{col.h}</div>
            <ul className="space-y-2.5 font-serif text-[15px] text-[color:var(--paper)]/85">
              {col.items.map((it) => (
                <li key={it.l}>
                  {it.h ? (
                    <a
                      href={it.h}
                      {...(it.h.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {})}
                      className="hover:text-[color:var(--accent)]"
                    >
                      {it.l}
                    </a>
                  ) : (
                    <span className="text-[color:var(--paper)]/60">{it.l}</span>
                  )}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="mt-16 pt-8 border-t border-[color:var(--paper)]/15 flex flex-wrap justify-between gap-4 font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--paper)]/50">
        <div>© Tim Taxis {new Date().getFullYear()} · Einfach. Du. Sein. · USt-IdNr. DE256343527</div>
        <div className="flex gap-6">
          <a href="/impressum" className="hover:text-[color:var(--accent)]">Impressum</a>
          <a href="/datenschutz" className="hover:text-[color:var(--accent)]">Datenschutz</a>
          <a href="/agb" className="hover:text-[color:var(--accent)]">AGB</a>
        </div>
      </div>
    </div>
  </footer>
  );
};

// ========== 1:1 SESSIONS (Betreutes Fühlen · Deep Silence Regulation®) ==========
const ONE_ON_ONE_PRACTITIONERS = [
  // Deutschland (nach PLZ)
  { n: "Linda Wittig", email: "erlaubedich@web.de", ort: "03130 Spremberg", land: "DE" },
  { n: "Dr. Regina Nause", tel: "+4915253182551", email: "r.nausegina@outlook.de", ort: "06295 Lutherstadt Eisleben", land: "DE" },
  { n: "Sabine Keil", tel: "+491636037961", email: "vitametik-keil@gmx.de", ort: "06317 Seegebiet Mansfelder Land", land: "DE" },
  { n: "Olivia Keil", tel: "+491775456252", email: "info@oliviakeil.com", ort: "10317 Berlin", web: "www.oliviakeil.com", land: "DE" },
  { n: "Alina Keil", tel: "+4915756776358", email: "keil-auratechnik@gmx.de", ort: "12524 Berlin", land: "DE" },
  { n: "Martina Lies", role: "Mentorin", tel: "+491723454306", email: "beratung@martinalies.de", ort: "13187 Berlin & 16248 Lunow-Stolzenhagen", land: "DE" },
  { n: "Götz Rausch", role: "Mentor", tel: "+491704668770", email: "goetzrausch@gmx.de", ort: "16248 Stolzenhagen", land: "DE" },
  { n: "Henrika Kaup", tel: "+4915753067603", email: "kontakt@henrika-kaup.de", ort: "21335 Lüneburg", land: "DE" },
  { n: "Birgit Danneberg", role: "Mentorin", tel: "+4917673591903", email: "birgit.danneberg@freenet.de", ort: "23820 Pronstorf", web: "begleitetes-fuehlen.de", land: "DE" },
  { n: "Jörg Kreikenbohm", tel: "+4917680891195", email: "joerg.kreikenbohm2014@gmail.com", ort: "26316 Varel", land: "DE" },
  { n: "Silke Kreikenbohm", tel: "+4917696604687", email: "sikreibo93@gmail.com", ort: "26316 Varel", land: "DE" },
  { n: "Nicole Thomson", tel: "+4917671240933", email: "ankommen@nicole-thomson.de", ort: "27232 Sulingen", web: "www.nicole-thomson.de", land: "DE" },
  { n: "Dörte Borchers", tel: "+4915156122099", email: "coaching-koerperarbeit@web.de", ort: "27729 Axstedt", land: "DE" },
  { n: "Mareike Ehlers", tel: "+491608003500", email: "kontakt@deineselbstheilung.de", ort: "32479 Hille", web: "www.deineselbstheilung.de", land: "DE" },
  { n: "Otto Lintze", role: "Mentor", tel: "+491792302201", email: "otto.lintze@t-online.de", ort: "34355 Staufenberg", land: "DE" },
  { n: "Eva Colditz", tel: "+4915251786813", email: "evacolditz70@gmail.com", ort: "37242 Bad Sooden-Allendorf", land: "DE" },
  { n: "Jürgen Protschko", tel: "+4915121138507", email: "jr.protschko@gmail.com", ort: "48324 Sendenhorst", land: "DE" },
  { n: "Elisabeth Rottmann", tel: "+4915151081065", email: "e.rottmann@gmx.net", ort: "48683 Ahaus", land: "DE" },
  { n: "Janka Pies", tel: "+491635748596", email: "janka.pies@googlemail.com", ort: "51503 Rösrath", land: "DE" },
  { n: "Darja Delbeck", tel: "+491729542383", email: "darjadelbeck@gmail.com", ort: "53173 Bonn", land: "DE" },
  { n: "Antje Leenders", tel: "+491741868805", email: "antjeleenders@web.de", ort: "59368 Werne", land: "DE" },
  { n: "Melanie Everdiking-Hinz", role: "Mentorin", tel: "+4917622064923", email: "Innereoase@gmail.com", ort: "59519 Möhnesee", land: "DE" },
  { n: "Eugen Sawatzky", email: "sawatzky.eugen@gmail.com", ort: "59494 Soest", land: "DE" },
  { n: "Frank Ludwig", tel: "+491636962152", email: "fraludwig@web.de", ort: "63067 Offenbach", land: "DE" },
  { n: "Hans-Jürgen Keßler", role: "Mentor", tel: "+4915155521771", email: "hallo@kesslers-xxl.de", ort: "63165 Mühlheim", land: "DE" },
  { n: "Anna Zaaki", role: "Mentorin", email: "kontakt@anna-zaaki.com", ort: "64839 Münster (Hessen)", web: "www.anna-zaaki.com", land: "DE" },
  { n: "Heike Jürgens", role: "Mentorin", tel: "015229743288", email: "juergens.heike@icloud.com", ort: "68199 Mannheim", land: "DE" },
  { n: "Stephan Bogen", tel: "+4915201934827", email: "stephan@bogens.de", ort: "72336 Balingen-Dürrwangen", land: "DE" },
  { n: "Jens Rossig", tel: "+491724904954", email: "jens.rossig@web.de", ort: "78234 Engen", land: "DE" },
  { n: "Güler Dogan (DOCFM)", tel: "+49017660606308", email: "info@chiropraktik-bb.de", ort: "71034 Böblingen", land: "DE" },
  { n: "Carmen Galster", tel: "+4917638330064", email: "carmen.galster@gmx.de", ort: "72539 Pfronstetten", land: "DE" },
  { n: "Wolfgang Galster", tel: "+4917678426635", email: "wgalster@web.de", ort: "72539 Pfronstetten", land: "DE" },
  { n: "Oliver Streicher", tel: "+491774036901", email: "oliverstreicher@aol.com", ort: "73563 Mögglingen", land: "DE" },
  { n: "Brigitte Burkert", tel: "+491714263084", email: "brigitte.burkert@web.de", ort: "71522 Backnang", land: "DE" },
  { n: "Dieter Trayer", role: "Mentor", tel: "+498926025503", email: "info@hansdietertrayer.de", ort: "81379 München", land: "DE" },
  { n: "Elisabeth Jahn", tel: "+491774085560", email: "Freiraum-wm@web.de", ort: "82362 Weilheim", web: "elisabeth-jahn-systemische-beratung.com", land: "DE" },
  { n: "Axel Schulz", tel: "+4915773885094", email: "axel@institut-liebe.org", ort: "82131 Stockdorf", web: "www.axelschulz.de", land: "DE" },
  { n: "Frank Schulze", tel: "+4915254990080", email: "mail@unternehmensberatung-schulze.de", ort: "82211 Herrsching", land: "DE" },
  { n: "Sabine Kroiß", tel: "+4915151545359", email: "skroiss@web.de", ort: "83334 Inzell", land: "DE" },
  { n: "Cornelia Fach", role: "Mentorin", tel: "+491721006498", email: "connyfach@gmx.de", ort: "83128 Halfing", land: "DE" },
  { n: "Ulrich Bohnefeld", role: "Mentor", tel: "+4916094445635", email: "ulrich.bohnefeld@hotmail.com", ort: "83209 Prien am Chiemsee", land: "DE" },
  { n: "Birgit Golling", tel: "+4915736248364", email: "info@birgit-golling.de", ort: "86529 Schrobenhausen", land: "DE" },
  { n: "Christer Ostertag", tel: "+4915906317041", email: "info@praxis-ostertag.de", ort: "88214 Ravensburg", land: "DE" },
  { n: "Regina Mäck", tel: "+491635142190", email: "regina.maeck@gmx.de", ort: "89143 Blaubeuren", land: "DE" },
  { n: "Roman Söllner", tel: "+491605435709", email: "romansoellner@gmail.com", ort: "90403 Nürnberg", land: "DE" },
  { n: "Martina Wegmann", role: "Mentorin", tel: "+4917631269748", email: "post@martinawegmann.de", ort: "93152 Nittendorf", web: "www.martinawegmann.de", land: "DE" },
  { n: "Janine Reimann", tel: "+4915735241204", email: "janine.reimann@gmx.de", ort: "97799 Zeitlofs", land: "DE" },
  // Österreich
  { n: "Gabriela Polednak-Heger", tel: "+4369981675540", email: "gabriela@polednak.at", ort: "A-2130 Mistelbach", land: "AT" },
  { n: "Gerald Laher", role: "Mentor", tel: "+436641828288", email: "gerald@laher.at", ort: "A-4170 Haslach", land: "AT" },
  { n: "Marianne Laher", role: "Mentorin", tel: "+436641555268", email: "marianne@laher.at", ort: "A-4170 Haslach", land: "AT" },
  { n: "Theresia Reiter", tel: "+4368110440230", email: "reiter_theresia@gmx.at", ort: "A-4906 Eberschwang", land: "AT" },
  { n: "Raphaela Seemann", tel: "+436641343797", email: "raphaela@seemanns.talk.at", ort: "A-5020 Salzburg", land: "AT" },
  { n: "Markus Aigner", role: "Mentor", tel: "+436603197770", email: "info@markus-aigner.com", ort: "A-5321 Koppl", land: "AT" },
  { n: "Franz Ragginger", role: "Mentor", tel: "+436508510310", email: "info@franz-ragginger.at", ort: "A-5321 Koppl", land: "AT" },
  { n: "Birgit Hacker", tel: "+436643088792", email: "birigt@fbhacker.at", ort: "A-8813 St. Lambrecht", land: "AT" },
  // Schweiz
  { n: "Fabienne Sulser", role: "Mentorin", tel: "+41796270333", email: "fabsueris@bluewin.ch", ort: "CH-2502 Biel/Bienne", land: "CH" },
  { n: "Brigit Geiser", role: "Mentorin", tel: "+41798154319", email: "brigitgeiser@gmail.com", ort: "CH-2503 Biel", land: "CH" },
  { n: "Andrea Johanna Oppliger", tel: "+41765355637", email: "Andrea.j.oppliger@gmail.com", ort: "CH-8302 Kloten", web: "www.atelier1a.ch", land: "CH" },
  { n: "Yves Berger", tel: "+41797550276", email: "yberger@gmx.net", ort: "CH-3183 Bern", land: "CH" },
  { n: "Franziska Haas", tel: "+41786573000", email: "franziska.pfi@gmx.ch", ort: "CH-8424 Embrach", web: "www.atelier1a.ch", land: "CH" },
  { n: "Ursina Pfister", role: "Mentorin", tel: "+41796318064", email: "ursina.pfister@gmx.ch", ort: "CH-8636 Wald", land: "CH" },
  // International
  { n: "Birgit Sippel", role: "Mentorin", tel: "+12503093659", email: "birgitsippel7@gmail.com", ort: "Coldstream, BC · Kanada", land: "INT" },
];
// Fotos (von timtaxis.com extrahiert) — Reihenfolge = Array-Reihenfolge
ONE_ON_ONE_PRACTITIONERS.forEach((p, i) => { p.photo = `assets/practitioners/${i}.jpg`; });

// Avatar mit Foto + Initialen-Fallback
const ttInitialsName = (name) =>
  name.replace(/\(.*?\)/g, "").replace(/Dr\.?/g, "").trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
const PracAvatar = ({ p, size }) => {
  const [err, setErr] = useStateW(false);
  // Gleicher Kreis-Look wie im Karten-Hover: runder Rahmen mit warmer Akzent-Outline
  const ring = { outline: "2px solid var(--accent)", outlineOffset: "3px" };
  if (p.photo && !err) {
    return (
      <img
        src={p.photo}
        alt={p.n}
        loading="lazy"
        onError={() => setErr(true)}
        className="shrink-0 rounded-full object-cover"
        style={{ width: size, height: size, objectPosition: "50% 12%", ...ring }}
      />
    );
  }
  return (
    <div
      className="grid shrink-0 place-items-center rounded-full font-serif text-[color:var(--ink)]"
      style={{ width: size, height: size, fontSize: size * 0.32, background: "linear-gradient(150deg, oklch(0.92 0.06 80), oklch(0.79 0.13 65))", ...ring }}
    >
      {ttInitialsName(p.n)}
    </div>
  );
};

const PractitionerCard = ({ p }) => (
  <div
    id={ttPracId(p.n)}
    className="tt-prac-card group flex scroll-mt-28 flex-col items-center rounded-xl border border-[color:var(--ink)]/12 bg-[color:var(--paper)] p-6 text-center"
  >
    {/* Rundes Foto — gleicher Look wie der Karten-Hover, nur groß */}
    <div className="pt-1.5">
      <PracAvatar p={p} size={124} />
    </div>

    <h4 className="mt-5 font-serif text-[22px] leading-tight text-[color:var(--ink)]">{p.n}</h4>
    {p.role ? (
      <span className="mt-2 rounded-full border border-[color:var(--accent-deep)]/30 px-2.5 py-1 font-mono text-[9px] tracking-[0.16em] uppercase text-[color:var(--accent-deep)]">
        {p.role}
      </span>
    ) : null}
    <div className="mt-2 font-mono text-[9px] tracking-[0.14em] uppercase text-[color:var(--ink)]/45">
      Betreutes Fühlen · DSR®
    </div>
    <div className="mt-1 flex items-center justify-center gap-1.5 font-mono text-[10px] tracking-[0.12em] uppercase text-[color:var(--ink)]/55">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="shrink-0 opacity-70"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
      <span>{p.ort}</span>
    </div>
    {p._dist != null ? (
      <div className="mt-1.5 font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--accent-deep)]">
        ≈ {Math.round(p._dist)} km entfernt
      </div>
    ) : null}

    {/* Kontakt-Buttons — volle Kartenbreite, am Kartenfuß verankert */}
    <div className="mt-5 flex w-full flex-col gap-2">
      <div className="flex gap-2">
          <a
            href={`mailto:${p.email}`}
            onClick={() => ttTrack("email", p)}
            className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-[color:var(--ink)] px-3 py-3 font-mono text-[10px] tracking-[0.16em] uppercase text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors"
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
            E-Mail
          </a>
          {p.tel ? (
            <a
              href={`tel:${p.tel.replace(/[^+\d]/g, "")}`}
              onClick={() => ttTrack("tel", p)}
              className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-[color:var(--ink)]/25 px-3 py-3 font-mono text-[10px] tracking-[0.16em] uppercase text-[color:var(--ink)] hover:border-[color:var(--accent-deep)] hover:text-[color:var(--accent-deep)] transition-colors"
            >
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
              Anrufen
            </a>
          ) : null}
        </div>
        {p.web ? (
          <a
            href={`https://${p.web.replace(/^https?:\/\//, "")}`}
            target="_blank"
            rel="noreferrer"
            className="mt-0.5 text-center font-mono text-[10px] tracking-[0.12em] uppercase text-[color:var(--accent-deep)] hover:underline"
          >
            {p.web}
          </a>
        ) : null}
      </div>
  </div>
);

// Approx. Standort (lat,lng) je Behandler:in für die DACH-Karte (Name = Schlüssel)
const ONE_ON_ONE_GEO = {
  "Linda Wittig": [51.57, 14.37], "Dr. Regina Nause": [51.53, 11.55], "Sabine Keil": [51.48, 11.65],
  "Olivia Keil": [52.50, 13.49], "Alina Keil": [52.41, 13.55], "Martina Lies": [52.57, 13.40],
  "Götz Rausch": [52.86, 14.05], "Henrika Kaup": [53.25, 10.41], "Birgit Danneberg": [53.92, 10.45],
  "Jörg Kreikenbohm": [53.40, 8.14], "Silke Kreikenbohm": [53.40, 8.18], "Nicole Thomson": [52.68, 8.80],
  "Dörte Borchers": [53.32, 8.78], "Mareike Ehlers": [52.34, 8.75], "Otto Lintze": [51.38, 9.57],
  "Eva Colditz": [51.27, 9.97], "Jürgen Protschko": [51.84, 7.83], "Elisabeth Rottmann": [52.08, 7.01],
  "Janka Pies": [50.90, 7.19], "Darja Delbeck": [50.68, 7.15], "Antje Leenders": [51.66, 7.63],
  "Melanie Everdiking-Hinz": [51.49, 8.13], "Eugen Sawatzky": [51.57, 8.11], "Frank Ludwig": [50.10, 8.77],
  "Hans-Jürgen Keßler": [50.12, 8.83], "Anna Zaaki": [49.92, 8.86], "Heike Jürgens": [49.49, 8.47],
  "Stephan Bogen": [48.27, 8.85], "Jens Rossig": [47.86, 8.77], "Güler Dogan (DOCFM)": [48.69, 9.01],
  "Carmen Galster": [48.25, 9.34], "Wolfgang Galster": [48.24, 9.38], "Oliver Streicher": [48.82, 9.96],
  "Brigitte Burkert": [48.95, 9.43], "Dieter Trayer": [48.11, 11.55], "Elisabeth Jahn": [47.84, 11.14],
  "Axel Schulz": [48.08, 11.40], "Frank Schulze": [47.99, 11.18], "Sabine Kroiß": [47.77, 12.75],
  "Cornelia Fach": [47.95, 12.27], "Ulrich Bohnefeld": [47.86, 12.35], "Birgit Golling": [48.56, 11.27],
  "Christer Ostertag": [47.78, 9.61], "Regina Mäck": [48.41, 9.78], "Roman Söllner": [49.45, 11.08],
  "Martina Wegmann": [49.00, 11.97], "Janine Reimann": [50.25, 9.78],
  "Gabriela Polednak-Heger": [48.57, 16.57], "Gerald Laher": [48.58, 14.04], "Marianne Laher": [48.57, 14.09],
  "Theresia Reiter": [48.16, 13.55], "Raphaela Seemann": [47.81, 13.04], "Markus Aigner": [47.82, 13.13],
  "Franz Ragginger": [47.81, 13.18], "Birgit Hacker": [47.07, 14.30],
  "Fabienne Sulser": [47.14, 7.25], "Brigit Geiser": [47.13, 7.29], "Andrea Johanna Oppliger": [47.45, 8.58],
  "Yves Berger": [46.95, 7.44], "Franziska Haas": [47.51, 8.59], "Ursina Pfister": [47.28, 8.92],
};

// ── Umkreissuche: PLZ-Region → Koordinaten ───────────────────────────────
// DE: zweistelliges PLZ-Präfix, AT/CH: erste Ziffer (Leitregion-Zentroid)
const DE_PLZ2 = { "00": [51.30, 12.60], "01": [51.05, 13.74], "02": [51.16, 14.99], "03": [51.76, 14.33], "04": [51.34, 12.37], "05": [51.40, 12.20], "06": [51.48, 11.97], "07": [50.88, 12.08], "08": [50.72, 12.49], "09": [50.83, 12.92], "10": [52.52, 13.40], "11": [52.50, 13.45], "12": [52.45, 13.42], "13": [52.57, 13.35], "14": [52.40, 13.06], "15": [52.34, 14.55], "16": [52.83, 13.82], "17": [53.56, 13.26], "18": [54.09, 12.14], "19": [53.63, 11.41], "20": [53.55, 9.99], "21": [53.46, 9.85], "22": [53.59, 10.04], "23": [53.87, 10.69], "24": [54.32, 10.14], "25": [54.48, 9.05], "26": [53.14, 8.21], "27": [53.55, 8.58], "28": [53.08, 8.81], "29": [52.96, 10.56], "30": [52.37, 9.74], "31": [52.15, 9.95], "32": [52.12, 8.67], "33": [51.72, 8.75], "34": [51.31, 9.49], "35": [50.80, 8.77], "36": [50.55, 9.68], "37": [51.53, 9.94], "38": [52.27, 10.52], "39": [52.13, 11.63], "40": [51.23, 6.78], "41": [51.19, 6.44], "42": [51.26, 7.18], "43": [51.40, 7.00], "44": [51.51, 7.47], "45": [51.46, 7.01], "46": [51.50, 6.70], "47": [51.43, 6.76], "48": [51.96, 7.63], "49": [52.28, 8.05], "50": [50.94, 6.96], "51": [50.99, 7.10], "52": [50.78, 6.08], "53": [50.73, 7.10], "54": [49.75, 6.64], "55": [50.00, 8.27], "56": [50.36, 7.59], "57": [50.88, 8.02], "58": [51.36, 7.47], "59": [51.68, 7.82], "60": [50.11, 8.68], "61": [50.32, 8.61], "62": [50.20, 8.50], "63": [50.05, 9.00], "64": [49.87, 8.65], "65": [50.08, 8.24], "66": [49.24, 6.99], "67": [49.45, 7.99], "68": [49.49, 8.47], "69": [49.40, 8.69], "70": [48.78, 9.18], "71": [48.85, 9.07], "72": [48.52, 9.06], "73": [48.70, 9.65], "74": [49.14, 9.22], "75": [48.89, 8.70], "76": [49.01, 8.40], "77": [48.47, 7.95], "78": [47.95, 8.50], "79": [47.99, 7.85], "80": [48.14, 11.58], "81": [48.11, 11.60], "82": [47.95, 11.35], "83": [47.86, 12.12], "84": [48.54, 12.15], "85": [48.46, 11.43], "86": [48.37, 10.90], "87": [47.73, 10.32], "88": [47.78, 9.61], "89": [48.40, 9.99], "90": [49.45, 11.08], "91": [49.59, 11.00], "92": [49.45, 12.16], "93": [49.01, 12.10], "94": [48.57, 13.46], "95": [49.95, 11.58], "96": [49.90, 10.90], "97": [49.79, 9.95], "98": [50.61, 10.69], "99": [50.98, 11.03] };
const AT_PLZ1 = { "1": [48.21, 16.37], "2": [48.20, 16.65], "3": [48.20, 15.62], "4": [48.31, 14.29], "5": [47.80, 13.05], "6": [47.27, 11.39], "7": [47.69, 16.55], "8": [47.07, 15.44], "9": [46.62, 14.31] };
const CH_PLZ1 = { "1": [46.52, 6.63], "2": [47.00, 6.93], "3": [46.95, 7.45], "4": [47.56, 7.59], "5": [47.39, 8.05], "6": [47.05, 8.31], "7": [46.85, 9.53], "8": [47.37, 8.54], "9": [47.42, 9.37] };
const TT_CITY_GEO = {
  "Berlin": [52.52, 13.40], "Hamburg": [53.55, 9.99], "München": [48.14, 11.58], "Muenchen": [48.14, 11.58],
  "Köln": [50.94, 6.96], "Koeln": [50.94, 6.96], "Frankfurt": [50.11, 8.68], "Stuttgart": [48.78, 9.18],
  "Düsseldorf": [51.23, 6.78], "Duesseldorf": [51.23, 6.78], "Leipzig": [51.34, 12.37], "Dortmund": [51.51, 7.47],
  "Essen": [51.46, 7.01], "Dresden": [51.05, 13.74], "Hannover": [52.37, 9.74], "Nürnberg": [49.45, 11.08],
  "Nuernberg": [49.45, 11.08], "Bremen": [53.08, 8.81], "Bonn": [50.73, 7.10], "Mannheim": [49.49, 8.47],
  "Karlsruhe": [49.01, 8.40], "Freiburg": [47.99, 7.85], "Kassel": [51.31, 9.49], "Münster": [51.96, 7.63],
  "Muenster": [51.96, 7.63], "Mainz": [50.00, 8.27], "Augsburg": [48.37, 10.90], "Kiel": [54.32, 10.14],
  "Wien": [48.21, 16.37], "Graz": [47.07, 15.44], "Linz": [48.31, 14.29], "Salzburg": [47.80, 13.05],
  "Innsbruck": [47.27, 11.39], "Klagenfurt": [46.62, 14.31], "Zürich": [47.37, 8.54], "Zuerich": [47.37, 8.54],
  "Bern": [46.95, 7.45], "Basel": [47.56, 7.59], "Genf": [46.20, 6.14], "Lausanne": [46.52, 6.63],
  "Luzern": [47.05, 8.31], "St. Gallen": [47.42, 9.37],
};

// Entfernung zweier Koordinaten in km (Haversine)
const ttHaversine = (aLat, aLng, bLat, bLng) => {
  const R = 6371, toRad = (d) => (d * Math.PI) / 180;
  const dLat = toRad(bLat - aLat), dLng = toRad(bLng - aLng);
  const s = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(aLat)) * Math.cos(toRad(bLat)) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
  return 2 * R * Math.asin(Math.min(1, Math.sqrt(s)));
};
const ttCoordOf = (p) => {
  const la = p.lat != null ? p.lat : (ONE_ON_ONE_GEO[p.n] || [])[0];
  const ln = p.lng != null ? p.lng : (ONE_ON_ONE_GEO[p.n] || [])[1];
  return (la != null && ln != null) ? [la, ln] : null;
};
// PLZ (DE 5-stellig / AT·CH 4-stellig) oder Stadtname → { lat, lng, label } | null
const ttResolveCenter = (query, people) => {
  const s = (query || "").trim();
  if (!s) return null;
  const m5 = s.match(/(?:^|\D)(\d{5})(?:\D|$)/);
  if (m5) { const c = DE_PLZ2[m5[1].slice(0, 2)]; if (c) return { lat: c[0], lng: c[1], label: "PLZ " + m5[1] }; }
  const m4 = s.match(/(?:^|\D)(\d{4})(?:\D|$)/);
  if (m4) {
    const d = m4[1][0], cands = [];
    if (AT_PLZ1[d]) cands.push({ lat: AT_PLZ1[d][0], lng: AT_PLZ1[d][1], label: "PLZ " + m4[1] });
    if (CH_PLZ1[d]) cands.push({ lat: CH_PLZ1[d][0], lng: CH_PLZ1[d][1], label: "PLZ " + m4[1] });
    if (cands.length === 2 && people && people.length) {
      const nearest = (c) => Math.min.apply(null, people.map((p) => { const co = ttCoordOf(p); return co ? ttHaversine(c.lat, c.lng, co[0], co[1]) : 9e9; }));
      return nearest(cands[0]) <= nearest(cands[1]) ? cands[0] : cands[1];
    }
    if (cands.length) return cands[0];
  }
  const low = s.toLowerCase();
  for (const name in TT_CITY_GEO) {
    const nl = name.toLowerCase();
    if (low === nl || (low.length >= 3 && (low.indexOf(nl) === 0 || nl.indexOf(low) === 0))) {
      return { lat: TT_CITY_GEO[name][0], lng: TT_CITY_GEO[name][1], label: name };
    }
  }
  return null;
};

// DACH-Grenzen, projiziert auf 780×1000 (gleiche Projektion wie die Pins)
const DACH_PATHS = {
  DE: "M288.1 22.4 L289.3 62.2 L356.7 86.2 L356 122.8 L423.8 103.5 L461.2 75.2 L536.5 115.9 L568 148.8 L583.6 201.2 L565 228.7 L589.2 265.5 L605.7 320.6 L600.5 356.2 L627.8 422 L598 432.7 L580.5 420.9 L563.7 440.5 L515.9 460.5 L491.1 486.2 L442.7 508.6 L454.3 539.3 L461.4 582.7 L495.4 607.5 L533.1 651.8 L509.6 699.4 L485.6 712.5 L495.1 779.6 L488.8 797.1 L468.1 776 L436.1 772.9 L388.4 791.4 L329.6 787 L320.1 814.2 L286.4 785.5 L266.3 791.2 L194.8 759.7 L181.2 782.1 L124.5 781.4 L132.9 707.9 L166.6 637.3 L70.5 618.4 L39.1 591.4 L42.9 546.2 L29.5 522.9 L37.1 453.2 L25.9 345.2 L66 345.2 L82.9 306.3 L99.5 212 L87 177.1 L100 155.3 L155.7 149.7 L168.1 172.4 L213.4 121.6 L198.1 82.9 L195.1 24.5 L245.5 38.1 L288.1 22.4 Z",
  AT: "M758.6 729.5 L753.6 771.7 L716 771.9 L729 794.2 L706.8 860.6 L694.1 878 L635.8 880.5 L602.2 903.9 L547.1 895.9 L451.8 869.3 L436.9 833.5 L371 851.4 L363.2 871 L322.8 856.3 L288.8 853.5 L258.7 834.8 L268.9 809.5 L266.3 791.2 L286.4 785.5 L320.1 814.2 L329.6 787 L388.4 791.4 L436.1 772.9 L468.1 776 L488.8 797.1 L495.1 779.6 L485.6 712.5 L509.6 699.4 L533.1 651.8 L582.6 685 L620.1 642.8 L643.6 635.1 L695.3 666.6 L726.6 661.3 L757.4 680.7 L752 693.8 L758.6 729.5 Z",
  CH: "M266.3 791.2 L268.9 809.5 L258.7 834.8 L288.8 853.5 L322.8 856.3 L317.6 898.6 L288.2 916 L238.9 903.1 L224.4 944.6 L192.7 947.9 L181.1 931.6 L143.7 966.5 L111.6 971.4 L82.9 949.4 L60 904.2 L28.2 920.3 L29.2 873.6 L77.9 815.7 L75.8 789.5 L106.1 799 L124.5 781.4 L181.2 782.1 L194.8 759.7 L266.3 791.2 Z",
};
const DACH_CITIES = [
  { n: "Hamburg", g: [53.55, 9.99] }, { n: "Berlin", g: [52.52, 13.40] }, { n: "Köln", g: [50.94, 6.96] },
  { n: "Frankfurt", g: [50.11, 8.68] }, { n: "München", g: [48.14, 11.58] }, { n: "Wien", g: [48.21, 16.37] },
  { n: "Zürich", g: [47.37, 8.54] }, { n: "Bern", g: [46.95, 7.44] },
];

// Initialen für den Avatar (ohne Titel/Klammerzusätze)
const ttInitials = (name) =>
  name.replace(/\(.*?\)/g, "").replace(/Dr\.?/g, "").trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();

const DachMap = ({ practitioners, center, radius }) => {
  const W = 780, H = 1000, LNG0 = 5.6, LNG1 = 17.3, LAT0 = 45.5, LAT1 = 55.2;
  const px = (lng) => ((lng - LNG0) / (LNG1 - LNG0)) * W;
  const py = (lat) => ((LAT1 - lat) / (LAT1 - LAT0)) * H;
  const rawPins = practitioners
    .map((p) => {
      const lat = p.lat != null ? p.lat : (ONE_ON_ONE_GEO[p.n] || [])[0];
      const lng = p.lng != null ? p.lng : (ONE_ON_ONE_GEO[p.n] || [])[1];
      return lat != null && lng != null ? { ...p, x: px(lng), y: py(lat) } : null;
    })
    .filter(Boolean);
  // Überlappende Pins auseinanderziehen, damit jeder hoverbar bleibt (Spiral-Displacement)
  const pins = [];
  const MIN = 15;
  for (const p of rawPins) {
    let x = p.x, y = p.y, t = 0;
    while (pins.some((q) => Math.hypot(q.x - x, q.y - y) < MIN) && t < 16) {
      const ang = t * 2.399, rad = 8 + t * 2;
      x = p.x + Math.cos(ang) * rad; y = p.y + Math.sin(ang) * rad; t++;
    }
    pins.push({ ...p, x, y });
  }
  const [active, setActive] = useStateW(null);

  return (
    <div className="relative mx-auto w-full max-w-[600px]">
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img" aria-label="Standorte der Ausgebildeten in Deutschland, Österreich und der Schweiz">
        {Object.values(DACH_PATHS).map((d, i) => (
          <path key={i} d={d} fill="var(--cream-deep)" fillOpacity="0.45" stroke="var(--ink)" strokeOpacity="0.22" strokeWidth="1.5" strokeLinejoin="round" />
        ))}
        {DACH_CITIES.map((c) => (
          <g key={c.n} opacity="0.4">
            <circle cx={px(c.g[1])} cy={py(c.g[0])} r="2.5" fill="var(--ink)" />
            <text x={px(c.g[1]) + 7} y={py(c.g[0]) + 4} fontSize="13" className="font-mono" fill="var(--ink)">{c.n}</text>
          </g>
        ))}
        {pins.map((p, i) => (
          <circle
            key={i} cx={p.x} cy={p.y} r={active === i ? 9 : 5.5}
            fill="var(--accent-deep)" stroke="var(--paper)" strokeWidth="2"
            style={{ cursor: "pointer", transition: "r 150ms" }}
            onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}
            onClick={() => { ttTrack("pin", p); ttScrollToPrac(p); }}
          />
        ))}
        {center ? (
          <g style={{ pointerEvents: "none" }}>
            {radius ? (
              <ellipse
                cx={px(center.lng)} cy={py(center.lat)}
                rx={(radius / (111.32 * Math.cos((center.lat * Math.PI) / 180))) * (W / (LNG1 - LNG0))}
                ry={(radius / 110.57) * (H / (LAT1 - LAT0))}
                fill="var(--accent)" fillOpacity="0.1" stroke="var(--accent-deep)" strokeOpacity="0.55" strokeWidth="1.6" strokeDasharray="5 5"
              />
            ) : null}
            <circle cx={px(center.lng)} cy={py(center.lat)} r="11" fill="none" stroke="var(--ink)" strokeOpacity="0.45" strokeWidth="1.6" />
            <circle cx={px(center.lng)} cy={py(center.lat)} r="6" fill="var(--ink)" stroke="var(--paper)" strokeWidth="2" />
          </g>
        ) : null}
      </svg>
      {active != null && pins[active] ? (
        <div
          className="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full rounded-xl bg-[color:var(--ink)] p-3 text-[color:var(--paper)] shadow-2xl"
          style={{ left: `${(pins[active].x / W) * 100}%`, top: `calc(${(pins[active].y / H) * 100}% - 14px)` }}
        >
          <div className="flex items-center gap-3 pr-1">
            {pins[active].photo ? (
              <img
                src={pins[active].photo}
                alt={pins[active].n}
                className="size-14 shrink-0 rounded-full object-cover"
                style={{ outline: "2px solid var(--accent)", outlineOffset: "2px" }}
              />
            ) : (
              <div
                className="grid size-14 shrink-0 place-items-center rounded-full font-serif text-[19px] text-[color:var(--ink)]"
                style={{ background: "linear-gradient(150deg, oklch(0.9 0.06 80), oklch(0.78 0.13 65))" }}
              >
                {ttInitials(pins[active].n)}
              </div>
            )}
            <div className="min-w-0">
              {pins[active].role ? (
                <div className="font-mono text-[9px] tracking-[0.16em] uppercase text-[color:var(--accent)] mb-0.5">
                  {pins[active].role}
                </div>
              ) : null}
              <div className="font-serif text-[16px] leading-tight whitespace-nowrap">{pins[active].n}</div>
              <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-[color:var(--paper)]/65 mt-0.5 whitespace-nowrap">{pins[active].ort}</div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
};

const ONE_ON_ONE_GROUPS = [
  { land: "DE", label: "Deutschland" },
  { land: "AT", label: "Österreich" },
  { land: "CH", label: "Schweiz" },
  { land: "INT", label: "International" },
];

const Ausgebildete = () => {
  const { settings, practitioners } = useTTContent();
  const tim = settings.contactEmail_tim || "tim@timtaxis.de";
  // Backend-Liste, sonst gebündelter Fallback (mit Geo aus ONE_ON_ONE_GEO)
  const all = (practitioners && practitioners.length)
    ? practitioners
    : ONE_ON_ONE_PRACTITIONERS.map((p) => ({ ...p, lat: (ONE_ON_ONE_GEO[p.n] || [])[0], lng: (ONE_ON_ONE_GEO[p.n] || [])[1] }));
  const [q, setQ] = useStateW("");
  const [geoCenter, setGeoCenter] = useStateW(null);
  const [radius, setRadius] = useStateW(null);
  const [geoStatus, setGeoStatus] = useStateW("idle");
  const ql = q.trim().toLowerCase();

  // Mittelpunkt aus getipptem Ort/PLZ — nur relevant, wenn ein Radius gewählt ist
  const typedCenter = (!geoCenter && radius != null) ? ttResolveCenter(q, all) : null;
  const center = geoCenter || typedCenter;
  const radiusActive = radius != null && center != null;
  // Textsuche greift, außer der getippte Text wurde als Standort verwendet
  const textActive = !!ql && !typedCenter;

  let list = center
    ? all.map((p) => { const co = ttCoordOf(p); return { ...p, _dist: co ? ttHaversine(center.lat, center.lng, co[0], co[1]) : null }; })
    : all;
  if (textActive) list = list.filter((p) => `${p.n} ${p.ort} ${p.role || ""}`.toLowerCase().includes(ql));
  if (radiusActive) list = list.filter((p) => p._dist != null && p._dist <= radius);
  if (center) list = list.slice().sort((a, b) => (a._dist == null ? 9e9 : a._dist) - (b._dist == null ? 9e9 : b._dist));
  const filtered = list;

  const locate = () => {
    if (typeof navigator === "undefined" || !navigator.geolocation) { setGeoStatus("denied"); return; }
    setGeoStatus("locating");
    navigator.geolocation.getCurrentPosition(
      (pos) => { setGeoCenter({ lat: pos.coords.latitude, lng: pos.coords.longitude, label: "Deinem Standort" }); setRadius((r) => r || 50); setGeoStatus("ok"); },
      () => setGeoStatus("denied"),
      { enableHighAccuracy: false, timeout: 8000, maximumAge: 600000 }
    );
  };
  const pickRadius = (km) => {
    setRadius((cur) => (cur === km ? null : km));
    if (!geoCenter && !ttResolveCenter(q, all)) locate();
  };
  const resetGeo = () => { setGeoCenter(null); setRadius(null); setGeoStatus("idle"); };

  return (
    <>
      <section className="bg-[color:var(--cream)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
            Betreutes Fühlen · Deep Silence Regulation®
          </div>
          <h1 className="font-serif text-[clamp(2.5rem,7vw,6rem)] leading-[0.98] tracking-[-0.02em] text-[color:var(--ink)] max-w-[15ch]">
            Die <span className="italic gradient-glut">Ausgebildeten.</span>
          </h1>
          <p className="mt-8 max-w-[62ch] font-serif text-[19px] leading-[1.55] text-[color:var(--ink)]/80">
            {all.length} wundervolle Menschen, alle von Tim persönlich im
            Betreuten Fühlen und in der Deep Silence Regulation® ausgebildet — in ganz
            Deutschland, Österreich und der Schweiz für Dich da.
          </p>
        </div>
      </section>

      {/* DACH-Karte */}
      <section className="bg-white">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <SectionLabel num="—" label="Im DACH-Raum für Dich da" />
          <p className="font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 max-w-[58ch] mb-8">
            Finde eine Begleiterin oder einen Begleiter in Deiner Nähe — suche nach Name, Ort
            oder PLZ, oder fahre mit der Maus über einen Punkt auf der Karte.
          </p>

          {/* Suche — direkt über der Karte, mittig */}
          <div className="mb-12 flex flex-col items-center gap-3 text-center">
            <div className="relative w-full max-w-[460px]">
              <svg className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: "var(--ink)", opacity: 0.4 }}>
                <circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
              </svg>
              <input
                type="search"
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="Suche nach Name, Ort oder PLZ…"
                aria-label="Ausgebildete durchsuchen"
                className="h-[52px] w-full rounded-full border border-[color:var(--ink)]/20 bg-[color:var(--paper)] pl-12 pr-5 font-serif text-[16px] text-[color:var(--ink)] outline-none transition-colors placeholder:text-[color:var(--ink)]/40 focus:border-[color:var(--accent-deep)]"
              />
            </div>
            {/* Umkreissuche */}
            <div className="flex flex-wrap items-center justify-center gap-2">
              <span className="font-mono text-[10px] tracking-[0.16em] uppercase text-[color:var(--ink)]/40 mr-1">Umkreis</span>
              {[25, 50, 100].map((km) => (
                <button
                  key={km} type="button" onClick={() => pickRadius(km)}
                  className={`rounded-full border px-3 py-1.5 font-mono text-[10px] tracking-[0.14em] uppercase transition-colors ${radius === km ? "border-[color:var(--accent-deep)] bg-[color:var(--accent-deep)] text-[color:var(--paper)]" : "border-[color:var(--ink)]/20 text-[color:var(--ink)]/70 hover:border-[color:var(--accent-deep)]"}`}
                >
                  {km} km
                </button>
              ))}
              <button
                type="button" onClick={locate}
                className="inline-flex items-center gap-1.5 rounded-full border border-[color:var(--ink)]/20 px-3 py-1.5 font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--ink)]/70 hover:border-[color:var(--accent-deep)] hover:text-[color:var(--accent-deep)] transition-colors"
              >
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg>
                In meiner Nähe
              </button>
              {(geoCenter || radius != null) ? (
                <button type="button" onClick={resetGeo} className="ml-1 font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--ink)]/45 underline hover:text-[color:var(--accent-deep)]">
                  zurücksetzen
                </button>
              ) : null}
            </div>
            <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55">
              {geoStatus === "locating" ? "Standort wird ermittelt…"
                : geoStatus === "denied" ? "Standort nicht verfügbar — gib eine PLZ oder Stadt ein"
                : radiusActive ? `${filtered.length} im Umkreis von ${radius} km um ${center.label}`
                : radius != null ? "Standort erlauben oder PLZ / Stadt eingeben"
                : ql ? `${filtered.length} Treffer`
                : `${all.length} insgesamt`}
            </span>
          </div>

          <DachMap practitioners={filtered} center={center} radius={radiusActive ? radius : null} />
        </div>
      </section>

      {/* Verzeichnis */}
      <section className="bg-[color:var(--cream)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <SectionLabel num="—" label={radiusActive ? `Umkreis · ${radius} km um ${center.label}` : ql ? `Suchergebnisse · „${q.trim()}"` : "Alle Ausgebildeten · nach Postleitzahl"} />
          {filtered.length === 0 ? (
            <div className="py-16 text-center">
              {radiusActive ? (
                <>
                  <p className="font-serif text-[22px] text-[color:var(--ink)]/70">
                    Niemand im Umkreis von <span className="italic gradient-glut">{radius} km</span>.
                  </p>
                  <p className="mt-3 font-serif text-[16px] text-[color:var(--ink)]/55">
                    Probier einen größeren Radius — oder{" "}
                    <a href={`mailto:${tim}`} className="text-[color:var(--accent-deep)] hover:underline">schreib Tim</a>.
                  </p>
                </>
              ) : (
                <>
                  <p className="font-serif text-[22px] text-[color:var(--ink)]/70">
                    Keine Treffer für <span className="italic gradient-glut">„{q.trim()}"</span>.
                  </p>
                  <p className="mt-3 font-serif text-[16px] text-[color:var(--ink)]/55">
                    Versuch einen anderen Ort oder Namen — oder{" "}
                    <a href={`mailto:${tim}`} className="text-[color:var(--accent-deep)] hover:underline">schreib Tim</a>.
                  </p>
                </>
              )}
            </div>
          ) : radiusActive ? (
            <div>
              <div className="flex items-baseline gap-4 mb-6">
                <h3 className="font-serif italic text-[28px] text-[color:var(--ink)]">Nächste zuerst</h3>
                <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/45">{filtered.length} {filtered.length === 1 ? "Mensch" : "Menschen"}</span>
                <div className="flex-1 h-px bg-[color:var(--ink)]/12" />
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                {filtered.map((p) => <PractitionerCard key={p.n + p.ort} p={p} />)}
              </div>
            </div>
          ) : (
            ONE_ON_ONE_GROUPS.map((g) => {
              const list = filtered.filter((p) => p.land === g.land);
              if (!list.length) return null;
              return (
                <div key={g.land} className="mb-14 last:mb-0">
                  <div className="flex items-baseline gap-4 mb-6">
                    <h3 className="font-serif italic text-[28px] text-[color:var(--ink)]">{g.label}</h3>
                    <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/45">{list.length} {list.length === 1 ? "Mensch" : "Menschen"}</span>
                    <div className="flex-1 h-px bg-[color:var(--ink)]/12" />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                    {list.map((p) => <PractitionerCard key={p.n + p.ort} p={p} />)}
                  </div>
                </div>
              );
            })
          )}
        </div>
      </section>

      {/* Kontakt */}
      <section className="bg-[color:var(--ink)] text-[color:var(--paper)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)] text-center">
          <h2 className="font-serif text-[clamp(2rem,5vw,3.5rem)] leading-[1.05] tracking-[-0.01em]">
            Unsicher, wer zu Dir passt?
          </h2>
          <p className="mt-6 font-serif text-[18px] text-[color:var(--paper)]/75 max-w-[48ch] mx-auto">
            Schreib Tim — er hilft Dir gerne, den richtigen Menschen für Dich zu finden.
          </p>
          <a href={`mailto:${tim}`} className="mt-8 inline-block font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--accent)] text-[color:var(--ink)] hover:bg-[color:var(--paper)] transition-colors">
            {tim} →
          </a>
        </div>
      </section>
    </>
  );
};

const OneOnOne = () => {
  const { settings } = useTTContent();
  const willkommen = settings.contactEmail_willkommen || "willkommen@timtaxis.de";
  const tim = settings.contactEmail_tim || "tim@timtaxis.de";

  const questions = [
    "Braucht Dein Körper Zuwendung bzw. möchtest Du, dass sich körperlich bald etwas ändert?",
    "Quälen Dich regelmäßig negative Gedanken, innere Konflikte oder unangenehme Gefühle?",
    "Steckst Du in einer akuten Krise und kommst nicht alleine raus?",
    "Fühlst Du Dich manchmal leer, ängstlich oder gestresst?",
    "Möchtest Du Dein Herz öffnen, wahres Glück und Erfüllung erleben?",
    "Oder möchtest Du vielleicht sogar aufwachen und Deine wahre Natur (er)leben?",
  ];

  const voices = [
    { name: "Vik", text: "Tim hilft auf so einfache und leicht erfahrbare Weise, mit sehr schnellen Ergebnissen." },
    { name: "Brigitte", text: "Tims Begleitung fühlt sich an wie nach Hause kommen." },
    { name: "Christina", text: "Wann immer ich noch in Situationen gerate, die in mir eine Unklarheit auslösen, bin ich froh, mich jederzeit an Tim wenden zu können. Seine Unterstützung bringt mich dann wieder ein stückweit näher zu meiner Wahrheit und Klarheit." },
  ];

  const groups = [
    { land: "DE", label: "Deutschland" },
    { land: "AT", label: "Österreich" },
    { land: "CH", label: "Schweiz" },
    { land: "INT", label: "International" },
  ];

  const contraindications = [
    "Du unter akuten schwerwiegenden psychologischen Problemen leidest",
    "Du Dich in einem akuten Zustand von (Re-)Traumatisierung befindest",
    "Du neurologische Erkrankungen wie z. B. Epilepsie oder Fibromyalgie hast",
    "Du andere schwerwiegende psychologische oder körperliche Erkrankungen hast",
    "Du schwanger bist",
  ];

  return (
    <>
      {/* Hero */}
      <section className="bg-[color:var(--cream)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 mb-6">
            1:1 · Betreutes Fühlen · Deep Silence Regulation®
          </div>
          <h1 className="font-serif text-[clamp(2.5rem,7vw,6rem)] leading-[0.98] tracking-[-0.02em] text-[color:var(--ink)] max-w-[16ch]">
            Hier bist Du willkommen — <span className="italic gradient-glut">genau so, wie Du bist.</span>
          </h1>
          <p className="mt-8 max-w-[60ch] font-serif text-[19px] leading-[1.55] text-[color:var(--ink)]/80">
            Persönliche Sessions vor Ort und online — eine ganz besondere Gelegenheit, was auch
            immer Dich gerade umtreibt. Tim und die wundervollen Menschen, die er persönlich
            ausgebildet hat, sind für Dich da.
          </p>
          <a href={`mailto:${tim}`} className="mt-8 inline-block font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
            Kontakt aufnehmen →
          </a>
        </div>
      </section>

      {/* Intro + Fragen */}
      <section className="bg-white">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-5">
              <h2 className="font-serif text-[clamp(2rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.01em] text-[color:var(--ink)]">
                Was wünschst Du Dir<br/>für Dein Leben?
              </h2>
              <p className="mt-6 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 max-w-md">
                Offen und präsent sind wir Dir wohlwollend zugewandt — ganz praktisch, mit all
                unserer Liebe und Aufmerksamkeit. Einmalig oder regelmäßig. Du entscheidest.
              </p>
            </div>
            <div className="col-span-12 md:col-span-7">
              <ul className="flex flex-col">
                {questions.map((q, i) => (
                  <li key={i} className="flex gap-5 py-5 border-b border-[color:var(--ink)]/12">
                    <span className="font-serif italic text-[22px] gradient-glut leading-none shrink-0">{String(i + 1).padStart(2, "0")}</span>
                    <span className="font-serif text-[18px] leading-[1.45] text-[color:var(--ink)]/85">{q}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Zwei Methoden */}
      <section className="bg-[color:var(--cream)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <SectionLabel num="—" label="Zwei Wege der Begleitung" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-[color:var(--paper)] border border-[color:var(--ink)]/15 p-8 md:p-10 flex flex-col">
              <h3 className="font-serif text-[32px] leading-[1.05] text-[color:var(--ink)]">Betreutes Fühlen</h3>
              <p className="mt-4 font-serif text-[16px] leading-[1.6] text-[color:var(--ink)]/75 flex-1">
                Eine liebevolle, präsente Begleitung in Deine Gefühle. Einzeln buchbar — bei Tim
                selbst oder einer seiner ausgebildeten Mentor:innen.
              </p>
              <div className="mt-8 pt-6 border-t border-[color:var(--ink)]/15 flex items-baseline gap-3">
                <span className="font-serif text-[40px] gradient-glut leading-none">399 €</span>
                <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55">bei Tim</span>
                <span className="font-serif text-[24px] text-[color:var(--ink)]/70 leading-none ml-2">119 €</span>
                <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55">bei Mentor:innen</span>
              </div>
            </div>
            <div className="bg-[color:var(--ink)] text-[color:var(--paper)] p-8 md:p-10 flex flex-col relative overflow-hidden">
              <div className="absolute -right-16 -bottom-16 opacity-30"><SunMark size={260} /></div>
              <h3 className="relative font-serif text-[32px] leading-[1.05]">Deep Silence Regulation®</h3>
              <p className="relative mt-4 font-serif text-[16px] leading-[1.6] text-[color:var(--paper)]/80 flex-1">
                Tims wundermächtige Methode, die Dich in tiefste Stille führt. Eine Anwendung
                besteht aus mindestens drei Sessions — sanft, tief, regulierend.
              </p>
              <div className="relative mt-8 pt-6 border-t border-[color:var(--paper)]/20 flex items-baseline gap-3">
                <span className="font-serif text-[40px] text-[color:var(--accent)] leading-none">139 €</span>
                <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-[color:var(--paper)]/60">pro Session · ab 3 Sessions</span>
              </div>
            </div>
          </div>
          <p className="mt-8 font-serif text-[16px] leading-[1.6] text-[color:var(--ink)]/70 max-w-[60ch]">
            Eine Session dauert 60 Minuten, per Zoom/online oder persönlich vor Ort. Nimm gerne
            direkt Kontakt mit Tim (<a href={`mailto:${willkommen}`} className="text-[color:var(--accent-deep)] hover:underline">{willkommen}</a>) oder jemandem Deiner Wahl auf.
          </p>
        </div>
      </section>

      {/* Behandler-Verzeichnis · Teaser → eigene Seite */}
      <section className="bg-white">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <div className="bg-[color:var(--cream)] border border-[color:var(--ink)]/12 p-10 md:p-14 text-center">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--accent-deep)] mb-5">
              {ONE_ON_ONE_PRACTITIONERS.length} Ausgebildete · DACH-weit
            </div>
            <h2 className="font-serif text-[clamp(1.75rem,4vw,3rem)] leading-[1.1] text-[color:var(--ink)] max-w-[20ch] mx-auto">
              Finde eine Begleiterin oder einen Begleiter <span className="italic">in Deiner Nähe.</span>
            </h2>
            <p className="mt-5 font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/70 max-w-[52ch] mx-auto">
              Außer Tim persönlich sind viele wundervolle Menschen für Dich da — in ganz
              Deutschland, Österreich und der Schweiz, mit Karte und vollständigem Verzeichnis.
            </p>
            <a href="#/ausgebildete" className="mt-8 inline-block font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
              Alle Ausgebildeten ansehen →
            </a>
          </div>
        </div>
      </section>

      {/* Stimmen */}
      <section className="bg-[color:var(--cream)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <SectionLabel num="—" label="Stimmen" />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-12">
            {voices.map((v, i) => (
              <figure key={i} className="border-t-2 border-[color:var(--accent-deep)] pt-8">
                <div className="font-serif text-[42px] leading-none text-[color:var(--accent-deep)] mb-3">“</div>
                <blockquote className="font-serif text-[18px] leading-[1.55] text-[color:var(--ink)] italic">{v.text}</blockquote>
                <figcaption className="mt-6 font-mono text-[11px] tracking-[0.18em] uppercase text-[color:var(--ink)]/55">— {v.name}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Haftungsausschluss */}
      <section className="bg-white">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
          <SectionLabel num="—" label="Haftungsausschluss" />
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-7 font-serif text-[15px] leading-[1.7] text-[color:var(--ink)]/70 space-y-4">
              <p>
                Wir üben mit unserem Angebot keine heilkundliche Tätigkeit aus und leisten weder
                Diagnose noch Therapie in Hinblick auf psychische, physische oder psychosomatische
                Erkrankungen. Die Sessions können und sollen keinesfalls den Besuch eines Arztes,
                Psychologen, Therapeuten oder Psychiaters und dessen diagnostische Tätigkeit und
                Behandlung ersetzen.
              </p>
              <p>
                Es wird keine Garantie für den Erfolg der Sessions übernommen. Die Anwendung und
                Umsetzung obliegt allein dem Ratsuchenden. Wenn Du Dich aktuell in ärztlicher oder
                psychotherapeutischer Behandlung befindest, besprich die Zusammenarbeit mit uns
                bitte zuvor mit Deinem Arzt, um Kontraindikationen auszuschließen. Die Haftung für
                den Erfolg einer Session sowie für direkte oder indirekte Folgeschäden wird in
                jedem Fall ausgeschlossen.
              </p>
              <p className="text-[color:var(--ink)]/60">
                DSR ist kein Ersatz für eine medizinische, psychiatrische oder psychotherapeutische
                Behandlung. Es werden keine Diagnosen gestellt, keine Heilversprechen abgegeben und
                keine Therapien im medizinischen Sinne durchgeführt. Die Angebote richten sich an
                gesunde Menschen mit Interesse an Selbsterfahrung, Achtsamkeit und innerer
                Entwicklung. Erfahrungsberichte sind ausschließlich subjektive Aussagen der
                jeweiligen Person und keinesfalls ein Heilsversprechen.
              </p>
            </div>
            <div className="col-span-12 md:col-span-5">
              <div className="bg-[color:var(--cream-deep)]/50 border border-[color:var(--ink)]/12 p-7">
                <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-[color:var(--accent-deep)] mb-4">
                  Bitte beachte · nicht geeignet, wenn
                </div>
                <ul className="space-y-3 font-serif text-[15px] leading-[1.5] text-[color:var(--ink)]/80">
                  {contraindications.map((c, i) => (
                    <li key={i} className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span>{c}</li>
                  ))}
                </ul>
                <p className="mt-5 font-serif text-[14px] leading-[1.5] text-[color:var(--ink)]/60">
                  Wir empfehlen grundsätzlich, ärztlichen Rat einzuholen.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Kontakt */}
      <section className="bg-[color:var(--ink)] text-[color:var(--paper)]">
        <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)] text-center">
          <h2 className="font-serif text-[clamp(2rem,5vw,4rem)] leading-[1.05] tracking-[-0.01em]">
            Du hast den Ruf gehört.<br/><span className="italic text-[color:var(--accent)]">Wir sind für Dich da.</span>
          </h2>
          <p className="mt-6 font-serif text-[18px] text-[color:var(--paper)]/75 max-w-[50ch] mx-auto">
            Buchung &amp; Fragen per E-Mail an Tim — oder direkt an einen Menschen Deiner Wahl.
          </p>
          <a href={`mailto:${tim}`} className="mt-8 inline-block font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--accent)] text-[color:var(--ink)] hover:bg-[color:var(--paper)] transition-colors">
            {tim} →
          </a>
        </div>
      </section>
    </>
  );
};

// ========== PAGE HEADER (used on sub-pages) ==========
const PageHeader = ({ eyebrow, title, subtitle }) => (
  <section className="relative overflow-hidden" style={{ background: "var(--cream)" }}>
    <div className="relative max-w-[1400px] mx-auto px-5 md:px-8 pt-20 pb-20 md:pt-32 md:pb-28">
      <div className="flex items-baseline gap-4 mb-8">
        <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55">{eyebrow}</span>
        <div className="flex-1 h-px bg-[color:var(--ink)]/15" />
      </div>
      <h1 className="font-serif text-[clamp(2.5rem,7vw,6rem)] leading-[0.98] tracking-[-0.02em] text-[color:var(--ink)] max-w-4xl">
        {title}
      </h1>
      {subtitle && (
        <p className="mt-8 font-serif text-[18px] md:text-[20px] leading-[1.55] text-[color:var(--ink)]/75 max-w-2xl">
          {subtitle}
        </p>
      )}
    </div>
  </section>
);

// ========== ROUTE DEFINITIONS ==========
const ROUTES = {
  ueber: {
    title: "Über Tim",
    subtitle: "Vom Bestseller-Autor zum stillen Begleiter — ein Weg, der sich selbst aufgelöst hat.",
    eyebrow: "02 · Über",
    render: () => <><PageHeader eyebrow="02 · Über" title={<>Über <span className="italic">Tim</span>.</>} subtitle="Vom Bestseller-Autor zum stillen Begleiter — ein Weg, der sich selbst aufgelöst hat." /><AboutTimWeb /></>,
  },
  weg: {
    title: "Mein Weg",
    render: () => <><PageHeader eyebrow="03 · Weg" title={<>Mein <span className="italic">Weg</span>.</>} subtitle="Stationen, Rückzug, Rückkehr — und was geblieben ist." /><AboutTimWeb /></>,
  },
  angebote: {
    title: "Angebote",
    render: () => <><PageHeader eyebrow="04 · Angebote" title={<>Alle <span className="italic">Angebote</span>.</>} subtitle="Satsang, 1:1 Sessions, Retreats, Onlinekurs — vier Wege, einem Ziel entgegen: Dir selbst zu begegnen." /><Benefits /><Offerings /></>,
  },
  kurs: {
    title: "Onlinekurs",
    render: () => <><PageHeader eyebrow="06 · Onlinekurs" title={<>Der Onlinekurs <span className="italic">Einfach.Du.Sein</span>.</>} subtitle="Sechs Wochen, 24 Sessions, lebenslanger Zugang." /><CourseDetail /></>,
  },
  retreats: {
    title: "Retreats",
    render: () => <><PageHeader eyebrow="07 · Retreats" title={<>Retreats & <span className="italic">Termine</span>.</>} subtitle="Tage, an denen nichts passiert — und alles geschieht." /><RetreatsBlock /><InPresence /></>,
  },
  stimmen: {
    title: "Stimmen",
    render: () => <><PageHeader eyebrow="09 · Stimmen" title={<>Menschen, die <span className="italic">Wahrhaftigkeit</span> erfahren.</>} subtitle="Viele erleben in kürzester Zeit, was sie vorher Jahre lang gesucht haben." /><WebTestimonials /></>,
  },
  geschenk: {
    title: "Geschenk",
    render: () => <><PageHeader eyebrow="10 · Geschenk" title={<>Mein <span className="italic">Geschenk</span> an Dich.</>} subtitle="Ein kostenfreies Video, wie Du in wenigen Minuten wirklich Ruhe im Kopf findest." /><GiftCTA /></>,
  },
  "1on1": {
    title: "1:1 Sessions",
    render: () => <OneOnOne />,
  },
  ausgebildete: {
    title: "Ausgebildete",
    render: () => <Ausgebildete />,
  },
};

function parseRoute() {
  const raw = (typeof window !== "undefined" ? window.location.hash : "") || "";
  const m = raw.replace(/^#\/?/, "").split("?")[0].split("/")[0].toLowerCase();
  if (!m) return "home";
  if (ROUTES[m]) return m;
  return "home";
}

function useRoute() {
  const [route, setRoute] = useStateW(parseRoute);
  useEffectW(() => {
    const onHash = () => {
      setRoute(parseRoute());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

function HomePage() {
  return (
    <>
      <WebHero />
      <WhatYouWontFind />
      <Welcome />
      <AboutTimWeb />
      <Benefits />
      <Offerings />
      <CourseDetail />
      <RetreatsBlock />
      <InPresence />
      <WebTestimonials />
      <GiftCTA />
    </>
  );
}

function RouteView() {
  const route = useRoute();
  if (route === "home") return <HomePage />;
  const r = ROUTES[route];
  return r.render();
}

Object.assign(window, {
  WebNav, WebHero, WhatYouWontFind, Welcome, AboutTimWeb, Benefits,
  Offerings, CourseDetail, RetreatsBlock, InPresence, WebTestimonials, GiftCTA, WebFooter,
  LogoMark, Tagline, SitePortrait, SitePhoto,
  PageHeader, RouteView, ROUTES, useRoute, HomePage
});
