// Aktivstall Mannheims — One-Pager (Langenfeld)
// React component tree, mounted into #app

const { useState, useEffect, useRef } = React;

// ============================================================
// COLOR PRESETS for Tweaks
// ============================================================
const COLOR_PRESETS = {
  espresso: {
    label: "Espresso",
    paper: "#F4F2EE",
    paper2: "#EAE6DD",
    paper3: "#D9D2C2",
    ink: "#1F1B17",
    accent: "#3A2418",
    accentOn: "#F2ECE0",
    sand: "#C9B892",
    cognac: "#8A5A36"
  },
  forest: {
    label: "Wald",
    paper: "#F2EFE7",
    paper2: "#E5E0D2",
    paper3: "#D2CCB9",
    ink: "#1A1F18",
    accent: "#1F2E20",
    accentOn: "#F0EDE2",
    sand: "#BDB28A",
    cognac: "#6E7A4B"
  },
  earth: {
    label: "Erde",
    paper: "#F5EFE3",
    paper2: "#EBE0CB",
    paper3: "#D9C9A9",
    ink: "#241A12",
    accent: "#5A3520",
    accentOn: "#F4ECDB",
    sand: "#D4B987",
    cognac: "#A6603A"
  }
};

// ============================================================
// SHARED SMALL PARTS
// ============================================================
function Eyebrow({ children, dark }) {
  return (
    <span
      className="eyebrow"
      style={{
        fontFamily: "var(--font-sans)",
        fontSize: 11,
        fontWeight: 500,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: dark ? "rgba(244,236,224,0.6)" : "var(--fg-3)",
        display: "inline-block"
      }}>
      
      {children}
    </span>);

}

function PhotoPlaceholder({ aspect = "4/3", caption, dark = false, hue = 0, src, imgPosition = "center", children, style }) {
  // Warm-toned gradient placeholder for documentary photography.
  // If `src` is given, the image is rendered with object-fit: cover
  // and the gradient remains as a fallback while the image loads.
  const grads = [
  "linear-gradient(135deg, var(--cognac) 0%, var(--espresso) 100%)",
  "linear-gradient(150deg, #6b4d2a 0%, #2a1810 100%)",
  "linear-gradient(120deg, #8a6a3f 0%, #3a2418 100%)",
  "linear-gradient(160deg, #a07a4a 0%, #4a2a18 100%)",
  "linear-gradient(140deg, #5a4030 0%, #1f1410 100%)",
  "linear-gradient(125deg, #7a5530 0%, #2a1a10 100%)"];

  return (
    <div
      style={{
        position: "relative",
        aspectRatio: aspect,
        background: grads[hue % grads.length],
        borderRadius: 4,
        overflow: "hidden",
        ...style
      }}>
      
      {src &&
      <img
        src={src}
        alt={caption || ""}
        loading="lazy"
        style={{
          position: "absolute",
          inset: 0,
          display: "block",
          width: "100%",
          height: "100%",
          objectFit: "cover",
          objectPosition: imgPosition,
        }} />

      }
      {children}
      {caption &&
      <div
        style={{
          position: "absolute",
          left: 16,
          bottom: 14,
          fontSize: 10,
          letterSpacing: "0.2em",
          textTransform: "uppercase",
          color: "rgba(244,236,224,0.85)",
          fontFamily: "var(--font-sans)",
          textShadow: "0 1px 4px rgba(20,12,6,0.6)",
          zIndex: 1
        }}>
        
          {caption}
        </div>
      }
    </div>);

}

// ============================================================
// IMAGES — central config of placeholder Unsplash photos.
// Easy swap-out later: replace these URLs with real Aktivstall photos.
// All photos are from Unsplash and used under their free license.
// ============================================================
const U = (id, w = 1600) =>
`https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=80`;

// Confirmed working horse photos (visually verified). We rotate these
// across all horse-content slots — placeholders for the user's own photos.
const IMAGES = {
  // Real Aktivstall Mannheims photos (provided by customer)
  drone1: "assets/photos/drone-1.jpeg",
  drone2: "assets/photos/drone-2.jpeg",
  eingang: "assets/photos/eingang.jpeg",
  familyStrand: "assets/photos/family-strand.jpeg",
  grosselternKinder: "assets/photos/grosseltern-kinder.jpeg",
  fuehranlage: "assets/photos/fuehranlage.jpeg",
  ponybandeImg: "assets/photos/ponybande.jpeg",
  logo: "assets/photos/logo.jpeg",
  raphaela: "assets/photos/raphaela.jpeg",
  reithalleImg: "assets/photos/reithalle.jpeg",
  reitplatz: "assets/photos/reitplatz.jpeg",
  springen: "assets/photos/springen.jpeg",
  stallung: "assets/photos/stallung.jpeg",
  vielseitigkeit: "assets/photos/vielseitigkeit.jpeg",
  weide1: "assets/photos/weide-1.jpeg",
  weide2: "assets/photos/weide-2.jpeg",

  // Aliases — match service slots to the right real photos.
  get hero() {return this.drone2;},
  get reithalle() {return this.reithalleImg;},
  get paddock() {return this.weide1;},
  get sport() {return this.reitplatz;}, // Sport- & Freizeitstall → Reitplatz
  get offenstall() {return this.stallung;}, // Offenstall → Stallung
  get gelaende() {return this.vielseitigkeit;}, // Geländestrecke → Vielseitigkeit
  get unterricht() {return this.springen;}, // Reitunterricht → Springen
  get beritt() {return this.logo;}, // Beritt → Logo
  get ponybande() {return this.ponybandeImg;}, // Ponybande → Ponybande-Logo
  get lehrgang() {return this.reithalleImg;}, // Lehrgänge → Reithalle

  // Familie collage — real family photos
  get fam1() {return this.familyStrand;},
  get fam2() {return this.grosselternKinder;},
  get fam3() {return this.eingang;},

  // Galerie tiles — alle echten Fotos
  get g1() {return this.drone1;},
  get g2() {return this.drone2;},
  get g3() {return this.eingang;},
  get g4() {return this.reithalleImg;},
  get g5() {return this.reitplatz;},
  get g6() {return this.stallung;},
  get g7() {return this.vielseitigkeit;},
  get g8() {return this.springen;},
  get g9() {return this.weide1;},
  get g10() {return this.weide2;},
  get g11() {return this.fuehranlage;},
  get g12() {return this.raphaela;},

  // Team portraits (verified people photos)
  t1: U("1494790108377-be9c29b29330", 600),
  t2: U("1438761681033-6461ffad8d80", 600),
  t3: U("1535713875002-d1d0cf377fde", 600),
  t4: U("1517841905240-472988babdf9", 600)
};

function Btn({ children, variant = "primary", onClick, style }) {
  const base = {
    fontFamily: "var(--font-sans)",
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: 0,
    padding: "14px 28px",
    borderRadius: 999,
    cursor: "pointer",
    transition: "all 200ms cubic-bezier(0.22,1,0.36,1)",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    ...style
  };
  if (variant === "primary") {
    return (
      <button
        onClick={onClick}
        className="btn-primary"
        style={{
          ...base,
          border: "1px solid var(--accent)",
          background: "var(--accent)",
          color: "var(--accent-on)"
        }}>
        
        {children}
      </button>);

  }
  return (
    <button
      onClick={onClick}
      className="btn-ghost"
      style={{
        ...base,
        border: "1px solid var(--border-2)",
        background: "transparent",
        color: "var(--fg-1)"
      }}>
      
      {children}
    </button>);

}

// ============================================================
// NAV
// ============================================================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [isNarrow, setIsNarrow] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onResize = () => setIsNarrow(window.innerWidth < 1100);
    window.addEventListener("scroll", onScroll);
    window.addEventListener("resize", onResize);
    onScroll();
    onResize();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
    };
  }, []);

  const links = [
  ["Konzept", "#konzept"],
  ["Anlage", "#anlage"],
  ["Familie", "#familie"],
  ["Angebot", "#angebot"],
  ["Galerie", "#galerie"],
  ["Stimmen", "#stimmen"]];


  const linkStyle = {
    fontSize: 11,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "var(--fg-2)",
    border: 0,
    fontFamily: "var(--font-sans)",
    fontWeight: 500
  };

  return (
    <nav
      style={{
        position: "fixed",
        top: 0, left: 0, right: 0,
        zIndex: 30,
        backdropFilter: scrolled || menuOpen ? "blur(12px)" : "none",
        background: scrolled || menuOpen ? "rgba(244,242,238,0.88)" : "transparent",
        borderBottom: scrolled || menuOpen ? "1px solid var(--border-1)" : "1px solid transparent",
        transition: "background 280ms cubic-bezier(0.22,1,0.36,1), border-color 280ms cubic-bezier(0.22,1,0.36,1)"
      }}>
      
      <div
        style={{
          maxWidth: "var(--maxw-wide)",
          margin: "0 auto",
          padding: "20px var(--gutter)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24
        }}>
        
        <a href="#top" style={{ border: 0, flexShrink: 0 }}>
          <span
            style={{
              fontFamily: "var(--font-serif)",
              fontSize: 20,
              letterSpacing: "0.32em",
              color: "var(--ink)",
              whiteSpace: "nowrap"
            }}>
            
            {isNarrow ? "AKTIVSTALL" : "AKTIVSTALL\u00A0MANNHEIMS"}
          </span>
        </a>

        {!isNarrow &&
        <ul
          style={{
            display: "flex",
            gap: 28,
            listStyle: "none",
            margin: 0,
            padding: 0
          }}>
          
            {links.map(([l, h]) =>
          <li key={h}>
                <a href={h} style={linkStyle}>{l}</a>
              </li>
          )}
          </ul>
        }

        {!isNarrow &&
        <a href="#kontakt" style={{ ...linkStyle, flexShrink: 0 }}>
            Kontakt&nbsp;→
          </a>
        }

        {isNarrow &&
        <button
          onClick={() => setMenuOpen((v) => !v)}
          aria-label="Menü"
          style={{
            background: "transparent",
            border: 0,
            cursor: "pointer",
            padding: 8,
            display: "flex",
            flexDirection: "column",
            gap: 5,
            width: 32
          }}>
          
            <span style={{ display: "block", height: 1, background: "var(--ink)", width: "100%", transition: "transform 280ms", transform: menuOpen ? "translateY(3px) rotate(45deg)" : "none" }}></span>
            <span style={{ display: "block", height: 1, background: "var(--ink)", width: "100%", opacity: menuOpen ? 0 : 1, transition: "opacity 200ms" }}></span>
            <span style={{ display: "block", height: 1, background: "var(--ink)", width: "100%", transition: "transform 280ms", transform: menuOpen ? "translateY(-3px) rotate(-45deg)" : "none" }}></span>
          </button>
        }
      </div>

      {isNarrow && menuOpen &&
      <div
        style={{
          borderTop: "1px solid var(--border-1)",
          padding: "16px var(--gutter) 28px",
          display: "flex",
          flexDirection: "column",
          gap: 18
        }}>
        
          {links.map(([l, h]) =>
        <a
          key={h}
          href={h}
          onClick={() => setMenuOpen(false)}
          style={{ ...linkStyle, fontSize: 13 }}>
          
              {l}
            </a>
        )}
          <a
          href="#kontakt"
          onClick={() => setMenuOpen(false)}
          style={{ ...linkStyle, fontSize: 13 }}>
          
            Kontakt&nbsp;→
          </a>
        </div>
      }
    </nav>);

}

// ============================================================
// HERO
// ============================================================
function Hero() {
  // Scroll-driven hero with a full-bleed photo background.
  // 0.0 → 0.50 : foreground text + chrome fade out, photo zooms slightly
  // 0.45 → 1.0 : "Pferde leben hier in Bewegung." caption swells in,
  //               photo darkens for legibility, then holds.
  const [p, setP] = React.useState(0);

  React.useEffect(() => {
    let raf = 0;
    function update() {
      raf = 0;
      const el = document.getElementById("hero-scroll-track");
      if (!el) return;
      const r = el.getBoundingClientRect();
      const trackHeight = el.offsetHeight - window.innerHeight;
      const raw = trackHeight > 0 ? -r.top / trackHeight : 0;
      setP(Math.max(0, Math.min(1, raw)));
    }
    function onScroll() {
      if (!raf) raf = requestAnimationFrame(update);
    }
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const easeOut = (x) => 1 - Math.pow(1 - x, 3);

  // ── Phase A: 0..0.5 — intro text fades, photo zooms ──
  const introOut = Math.min(1, p / 0.5);
  const textOpacity = 1 - easeOut(introOut);

  // ── Photo zoom: continuous through whole scroll ──
  const zoom = 1 + 0.18 * easeOut(p); // 1.0 → 1.18

  // ── Photo darkening: ramps in second half for caption legibility ──
  const darken = Math.max(0, Math.min(1, (p - 0.35) / 0.4));

  // ── Phase B: 0.45..0.85 — big caption swells in ──
  const captionIn = easeOut(Math.max(0, Math.min(1, (p - 0.45) / 0.4)));
  const captionScale = 0.92 + 0.08 * captionIn;

  // ── Phase C: 0.85..1.0 — sub-caption (stats) appears ──
  const subIn = Math.max(0, Math.min(1, (p - 0.78) / 0.18));

  return (
    <div
      id="hero-scroll-track"
      style={{
        position: "relative",
        height: "260vh"
      }}>
      
      <section
        id="top"
        className="hero-pinned on-dark"
        style={{
          position: "sticky",
          top: 0,
          height: "100vh",
          overflow: "hidden",
          background: "var(--ink)",
          color: "var(--paper)"
        }}>
        
        {/* ── Layer 0: full-bleed photo background ── */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            overflow: "hidden",
            zIndex: 0
          }}>
          
          <div
            style={{
              position: "absolute",
              inset: 0,
              transform: `scale(${zoom})`,
              transformOrigin: "center 60%",
              transition: "transform 80ms linear",
              willChange: "transform",
              backgroundColor: "#221610",
              backgroundImage: `url("${IMAGES.hero}")`,
              backgroundSize: "cover",
              backgroundPosition: "center 55%"
            }} />
          

          {/* Darkening veil — grows with scroll */}
          <div
            style={{
              position: "absolute",
              inset: 0,
              background: `linear-gradient(180deg, rgba(20,12,6,${0.25 + 0.35 * darken}) 0%, rgba(20,12,6,${0.45 + 0.4 * darken}) 100%)`,
              transition: "background 100ms linear",
              pointerEvents: "none"
            }} />
          

          {/* Caption removed to avoid overlap with the nav brand */}
        </div>

        {/* ── Layer 1: intro foreground (centered text + bottom row) ── */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            zIndex: 2,
            display: "grid",
            gridTemplateRows: "1fr auto",
            padding: "120px var(--gutter) 56px",
            opacity: textOpacity,
            pointerEvents: textOpacity > 0.05 ? "auto" : "none"
          }}>
          
          {/* top: eyebrow + headline + sub */}
          <div
            style={{
              maxWidth: "var(--maxw-wide)",
              margin: "0 auto",
              width: "100%",
              alignSelf: "end",
              transform: `translateY(${-32 * (1 - textOpacity)}px)`
            }}>
            
            <div
              style={{
                fontSize: 11,
                letterSpacing: "0.32em",
                textTransform: "uppercase",
                color: "rgba(244,236,224,0.7)",
                marginBottom: 32
              }}>
              
              Pferde leben hier in Bewegung · Langenfeld · Seit 2023
            </div>
            <h1
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(64px, 9vw, 168px)",
                lineHeight: 0.98,
                letterSpacing: "-0.03em",
                margin: 0,
                color: "var(--paper)",
                textWrap: "balance",
                maxWidth: "14ch",
                textShadow: "0 2px 20px rgba(20,12,6,0.4)"
              }}>
              
              Aktivstall
              <br />
              <em
                style={{
                  fontStyle: "italic",
                  color: "var(--sand)",
                  fontWeight: 400
                }}>
                
                Mannheims.
              </em>
            </h1>
          </div>

          {/* bottom: paragraph + CTAs in two columns */}
          <div
            style={{
              maxWidth: "var(--maxw-wide)",
              margin: "0 auto",
              width: "100%",
              display: "grid",
              gridTemplateColumns: "1.1fr 1fr",
              gap: 64,
              alignItems: "end",
              paddingTop: 80
            }}>
            
            <p
              style={{
                fontSize: 17,
                lineHeight: 1.65,
                color: "rgba(244,236,224,0.85)",
                maxWidth: "44ch",
                margin: 0,
                textShadow: "0 1px 10px rgba(20,12,6,0.4)"
              }}>
              
              Auf 9 Hektar Wiesen in Langenfeld halten wir 70 Pferde
              in einer artgerechten Gruppenhaltung — mit ständigem Zugang
              zu Heu, Bewegung und Sozialkontakt. Kein Kompromiss zwischen
              Komfort und Pferd.
            </p>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 18,
                alignItems: "flex-start",
                justifySelf: "end"
              }}>
              
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a
                  href="#kontakt"
                  className="btn-primary"
                  style={{
                    background: "var(--paper)",
                    color: "var(--ink)",
                    padding: "16px 28px",
                    fontSize: 12,
                    letterSpacing: "0.2em",
                    textTransform: "uppercase",
                    fontWeight: 500,
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 12,
                    transition: "all 200ms"
                  }}>
                  
                  Einstellplatz anfragen <span>→</span>
                </a>
                <a
                  href="#konzept"
                  style={{
                    border: "1px solid rgba(244,236,224,0.5)",
                    color: "var(--paper)",
                    padding: "16px 28px",
                    fontSize: 12,
                    letterSpacing: "0.2em",
                    textTransform: "uppercase",
                    fontWeight: 500,
                    transition: "all 200ms"
                  }}>
                  
                  Unser Konzept
                </a>
              </div>
              <div
                style={{
                  display: "flex",
                  gap: 28,
                  alignItems: "baseline",
                  paddingTop: 8,
                  borderTop: "1px solid rgba(244,236,224,0.18)",
                  paddingTop: 18,
                  marginTop: 8,
                  fontVariantNumeric: "tabular-nums"
                }}>
                
                <div>
                  <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: 32, color: "var(--paper)", lineHeight: 1, marginRight: 8 }}>70</span>
                  <span style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(244,236,224,0.6)" }}>Pferde</span>
                </div>
                <div>
                  <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: 32, color: "var(--paper)", lineHeight: 1, marginRight: 8 }}>9</span>
                  <span style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(244,236,224,0.6)" }}>Hektar</span>
                </div>
                <div>
                  <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: 32, color: "var(--paper)", lineHeight: 1, marginRight: 8 }}>3</span>
                  <span style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(244,236,224,0.6)" }}>Jahre Erfahrung</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── Layer 2: scroll-revealed centered statement ── */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            zIndex: 3,
            display: "grid",
            placeItems: "center",
            padding: "0 var(--gutter)",
            opacity: captionIn,
            pointerEvents: "none"
          }}>
          
          <div
            style={{
              textAlign: "center",
              transform: `scale(${captionScale})`,
              transformOrigin: "center",
              transition: "transform 100ms linear"
            }}>
            
            <div
              style={{
                fontSize: 11,
                letterSpacing: "0.36em",
                textTransform: "uppercase",
                color: "rgba(244,236,224,0.75)",
                marginBottom: 36
              }}>
              
              — Aktivstall Mannheims —
            </div>
            <div
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(56px, 9vw, 168px)",
                lineHeight: 1.0,
                letterSpacing: "-0.03em",
                color: "var(--paper)",
                textWrap: "balance",
                maxWidth: "16ch",
                margin: "0 auto",
                textShadow: "0 4px 30px rgba(20,12,6,0.5)"
              }}>
              
              Pferde leben hier{" "}
              <em
                style={{
                  fontStyle: "italic",
                  color: "var(--sand)",
                  fontWeight: 400
                }}>
                
                in Bewegung.
              </em>
            </div>
            <div
              style={{
                marginTop: 44,
                display: "inline-flex",
                gap: 36,
                opacity: subIn,
                transform: `translateY(${(1 - subIn) * 16}px)`,
                transition: "opacity 100ms linear",
                fontSize: 12,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                color: "rgba(244,236,224,0.75)",
                paddingTop: 28,
                borderTop: "1px solid rgba(244,236,224,0.22)"
              }}>
              
              <span>70&nbsp;Pferde</span>
              <span style={{ color: "rgba(244,236,224,0.3)" }}>·</span>
              <span>9&nbsp;Hektar</span>
              <span style={{ color: "rgba(244,236,224,0.3)" }}>·</span>
              <span>Eine Herde</span>
            </div>
          </div>
        </div>

        {/* ── Scroll progress hint removed — was overlapping with nav menu ── */}
      </section>
    </div>);

}

// ============================================================
// SECTION: KONZEPT — numbered Montfort-style list, on dark band
// ============================================================
function Konzept() {
  const items = [
  {
    n: "1",
    title: "Bewegung rund um die Uhr",
    body: "Unser Offenstall lässt die Pferde frei zwischen Liegehallen, Heuraufen und Auslauf wandern. Bewegung passiert von selbst — ohne Box, ohne Stillstand."
  },
  {
    n: "2",
    title: "Heu, wann immer es nötig ist",
    body: "Mehrere Heuraufen mit Slow-Feeder-Netzen sind 24 Stunden zugänglich. Ein durchgehender Magen-Darm-Trakt entspricht der Natur des Pferdes."
  },
  {
    n: "3",
    title: "Echte Herde, echter Sozialkontakt",
    body: "Pferde sind Herdentiere. Bei uns leben sie in stabilen Gruppen mit klaren Strukturen — kein Sichtkontakt durch Boxenstäbe, sondern echtes Miteinander."
  },
  {
    n: "4",
    title: "Witterungsschutz auf hohem Niveau",
    body: "Großzügige, eingestreute Liegehallen und Unterstände erlauben jederzeit Rückzug. Der Boden ist trocken, planbefestigt und wird täglich gepflegt."
  }];

  return (
    <section
      id="konzept"
      className="on-dark"
      style={{
        background: "var(--accent)",
        color: "var(--accent-on)",
        padding: "160px var(--gutter)"
      }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.6fr",
            gap: 80,
            marginBottom: 96,
            alignItems: "end"
          }}>
          
          <Eyebrow dark>01 · Konzept</Eyebrow>
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: "clamp(32px, 4.2vw, 64px)",
              lineHeight: 1.12,
              letterSpacing: "-0.02em",
              margin: 0,
              maxWidth: "26ch",
              color: "var(--accent-on)"
            }}>
            
            Wir halten Pferde so, wie sie eigentlich
            {" "}
            <em style={{ fontStyle: "italic", color: "var(--sand)", fontWeight: 400 }}>
              leben wollen.
            </em>
          </h2>
        </div>

        <div className="stagger">
          {items.map((it, i) =>
          <div
            key={it.n}
            className="row-konzept"
            style={{
              display: "grid",
              gridTemplateColumns: "80px 1fr 2fr",
              gap: 48,
              padding: "44px 0",
              borderTop: "1px solid rgba(244,236,224,0.18)",
              alignItems: "start",
              ...(i === items.length - 1 ?
              { borderBottom: "1px solid rgba(244,236,224,0.18)" } :
              {})
            }}>
            
              <div
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: 44,
                color: "rgba(244,236,224,0.55)",
                lineHeight: 1
              }}>
              
                {it.n}
              </div>
              <h3
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 26,
                fontWeight: 400,
                margin: 0,
                color: "var(--accent-on)",
                letterSpacing: "-0.01em",
                lineHeight: 1.2
              }}>
              
                {it.title}
              </h3>
              <p
              style={{
                margin: 0,
                fontSize: 16,
                lineHeight: 1.7,
                color: "rgba(244,236,224,0.78)",
                maxWidth: "52ch"
              }}>
              
                {it.body}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: ANLAGE — split image + facility list
// ============================================================
function Anlage() {
  // NOTE: Einige Zahlen/Ausstattung sind Platzhalter — vom Kunden noch zu bestätigen.
  const features = [
  "9 Hektar Wiesen",
  "20 × 40 m Reithalle",
  "20 × 60 m Reitplatz",
  "Longierhalle, ⌀ 18 m",
  "Führanlage für 4 Pferde",
  "Geländestrecke 800 m mit 10 Sprüngen",
  "Solarium",
  "Waschbox",
  "Reiterstübchen mit Küche & Kamin",
  "Hängerstellplatz",
  "Allergiker-Herde",
  "Heuraufen",
  "Liegeflächen",
  "Vollpension"];

  return (
    <section
      id="anlage"
      style={{ padding: "160px var(--gutter)", background: "var(--paper)" }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 80,
            alignItems: "start"
          }}>
          
          <div style={{ position: "sticky", top: 120 }}>
            <Eyebrow>02 · Anlage</Eyebrow>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(32px, 4vw, 56px)",
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
                margin: "24px 0 32px",
                maxWidth: "20ch"
              }}>
              
              Neun Hektar Wiesen — durchdacht
              {" "}
              <em style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>
                aufgeteilt.
              </em>
            </h2>
            <p
              style={{
                fontSize: 17,
                lineHeight: 1.7,
                color: "var(--fg-2)",
                maxWidth: "42ch",
                margin: "0 0 40px"
              }}>
              
              Trail, Trainingsflächen, Weiden und Sozialräume sind so
              angeordnet, dass Pferd und Reiter auf kurzen Wegen alles
              finden — ohne dass die Herde gestört wird.
            </p>

            <PhotoPlaceholder
              aspect="4/3"
              hue={2}
              src={IMAGES.reithalle} />
            
          </div>

          <div>
            <PhotoPlaceholder
              aspect="3/4"
              hue={1}
              src={IMAGES.paddock}
              style={{ marginBottom: 24 }} />
            

            <ul
              style={{
                listStyle: "none",
                margin: "32px 0 0",
                padding: 0,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: "0"
              }}>
              
              {features.map((f, i) =>
              <li
                key={i}
                style={{
                  padding: "18px 0",
                  borderTop: "1px solid var(--border-1)",
                  fontFamily: "var(--font-serif)",
                  fontSize: 18,
                  color: "var(--fg-1)",
                  fontWeight: 400,
                  lineHeight: 1.3,
                  paddingRight: i % 2 === 0 ? 16 : 0,
                  paddingLeft: i % 2 === 1 ? 16 : 0,
                  ...(i >= features.length - 2 ?
                  { borderBottom: "1px solid var(--border-1)" } :
                  {})
                }}>
                
                  <span
                  style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    color: "var(--fg-3)",
                    marginRight: 14,
                    letterSpacing: "0.05em"
                  }}>
                  
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  {f}
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: STATS BAND — quiet numbers
// ============================================================
function Stats() {
  const stats = [
  ["8–16", "Pferde pro Gruppe"],
  ["9 ha", "Wiesen in Langenfeld"],
  ["24/7", "Heu & Bewegung"],
  ["800 m", "Geländestrecke, 10 Sprünge"]];

  return (
    <section
      style={{
        padding: "120px var(--gutter)",
        background: "var(--paper-2)",
        borderTop: "1px solid var(--border-1)",
        borderBottom: "1px solid var(--border-1)"
      }}>
      
      <div
        className="stagger"
        style={{
          maxWidth: "var(--maxw-wide)",
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32
        }}>
        
        {stats.map(([n, l], i) =>
        <div
          key={i}
          style={{
            borderLeft:
            i === 0 ? "none" : "1px solid var(--border-1)",
            paddingLeft: i === 0 ? 0 : 32
          }}>
          
            <div
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: "clamp(40px, 5.4vw, 80px)",
              lineHeight: 1,
              letterSpacing: "-0.02em",
              color: "var(--ink)",
              marginBottom: 14
            }}>
            
              {n}
            </div>
            <div
            style={{
              fontSize: 13,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              color: "var(--fg-3)",
              fontFamily: "var(--font-sans)"
            }}>
            
              {l}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ============================================================
// SECTION: FAMILIE — family-run, personal pull-quote + photo collage
// ============================================================
function Familie() {
  return (
    <section
      id="familie"
      style={{
        padding: "180px var(--gutter) 200px",
        background: "var(--paper)",
        position: "relative",
        overflow: "hidden"
      }}>
      
      <div
        style={{
          maxWidth: "var(--maxw-wide)",
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "1.05fr 1fr",
          gap: 96,
          alignItems: "center"
        }}>
        
        {/* ── LEFT: Pull quote + family signature ── */}
        <div>
          <Eyebrow>03 · Familiengeführt</Eyebrow>

          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: "var(--display-weight)",
              fontSize: "clamp(40px, 5vw, 72px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              color: "var(--ink)",
              margin: "20px 0 48px"
            }}>
            
            Ein Stall, geführt{" "}
            <em
              style={{
                fontStyle: "italic",
                color: "var(--cognac)",
                fontWeight: 400
              }}>
              
              wie ein Zuhause.
            </em>
          </h2>

          <p
            style={{
              fontFamily: "var(--font-serif)",
              fontStyle: "italic",
              fontSize: 22,
              lineHeight: 1.55,
              color: "var(--fg-1)",
              maxWidth: "44ch",
              marginBottom: 36,
              textWrap: "pretty"
            }}>„Wir sind selbst Pferdemenschen — jeden Tag, mit jedem Wetter. Unser Stall ist kein Job, sondern unser Leben. Genau deshalb behandeln wir jedes Pferd, das hier einzieht, wie unser eigenes."




          </p>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 20,
              paddingTop: 24,
              borderTop: "1px solid var(--border-1)"
            }}>
            
            <div
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 20,
                fontStyle: "italic",
                color: "var(--ink)",
                letterSpacing: "-0.01em"
              }}>
              
              — Familie Mannheims
            </div>
            <div style={{ flex: 1, height: 1, background: "var(--border-1)" }} />
            <div
              style={{
                fontSize: 11,
                letterSpacing: "0.28em",
                textTransform: "uppercase",
                color: "var(--fg-3)"
              }}>
              
              Inhaber
            </div>
          </div>

          <p
            style={{
              marginTop: 48,
              fontSize: 16,
              lineHeight: 1.7,
              color: "var(--fg-2)",
              maxWidth: "52ch"
            }}>
            
            Familiengeführt heißt für uns: kurze Wege, klare Ansprache,
            verlässliche Hände. Keine anonyme Verwaltung, keine wechselnden
            Schichten — sondern Menschen, die du kennst und denen du dein
            Pferd anvertraust.
          </p>
        </div>

        {/* ── RIGHT: Single hero family photo ── */}
        <div style={{ position: "relative" }}>
          <PhotoPlaceholder
            aspect="4/5"
            hue={0}
            src={IMAGES.fam1}
            imgPosition="center 25%" />
          
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: ANGEBOT — what we offer (8 service cards on dark band)
// ============================================================
function Angebot() {
  const services = [
  {
    n: "01",
    t: "Sport- & Freizeitstall",
    body: "Für ambitionierte Turnierreiter genauso wie für entspannte Freizeitreiter. Top ausgestattete Trainingsflächen, professionelle Betreuung, lebendige Stallgemeinschaft.",
    tag: "Hauptangebot",
    img: IMAGES.sport
  },
  {
    n: "02",
    t: "Offenstall",
    body: "Artgerechte Herdenhaltung mit 9 Hektar Wiesen, Heuraufen rund um die Uhr, Liegeflächen und permanenter Bewegungsfreiheit.",
    tag: "Haltungsform",
    img: IMAGES.offenstall
  },
  {
    n: "03",
    t: "Geländestrecke",
    body: "Eigene Geländestrecke von 800 Metern mit 10 Sprüngen direkt auf der Anlage — Kondition, Technik und Vertrauen unter freiem Himmel.",
    tag: "Anlage",
    img: IMAGES.gelaende
  },
  {
    n: "04",
    t: "Reitunterricht",
    body: "Dressur, Springen, Freispringen und Cavalettiarbeit — strukturierter Reitunterricht für alle Niveaus, individuell angepasst, mit Plan.",
    tag: "Unterricht",
    img: IMAGES.unterricht
  },
  {
    n: "05",
    t: "Beritt",
    body: "Professioneller Beritt für dein Pferd — Jungpferde-Ausbildung, Umschulung oder gezieltes Training. Einfühlsam, pferdegerecht, individuell.",
    tag: "Ausbildung",
    img: IMAGES.beritt
  },
  {
    n: "06",
    t: "Ponybande Mannheims",
    body: "Die Ponybande — der perfekte Einstieg für Kinder. Spielerischer Umgang mit Ponys, echte Gemeinschaft und Pferdeliebe von Anfang an.",
    tag: "Kinder",
    img: IMAGES.ponybande
  },
  {
    n: "07",
    t: "Lehrgänge",
    body: "Regelmäßige Lehrgänge für Reiter aller Levels — von der Grundausbildung bis zur Verfeinerung. Lerne von erfahrenen Trainern und entwickle dich und dein Pferd weiter.",
    tag: "Events",
    img: IMAGES.lehrgang
  },
  {
    n: "08",
    t: "Reiterfitness",
    body: "Reiterspezifisches Fitnesstraining — für mehr Balance, Stabilität und Beweglichkeit im Sattel. Ideal als Ergänzung zum Reitunterricht.",
    tag: "Training",
    img: IMAGES.reitplatz
  }];


  // Horizontal-scroll progress: as user scrolls vertically through the
  // tall track, the inner row translates left.
  const [p, setP] = React.useState(0);
  const [active, setActive] = React.useState(0);
  const [maxShiftPx, setMaxShiftPx] = React.useState(0);

  // Compute exact translateX needed at p=1 by measuring the last card's
  // distance from the viewport center. Re-measure on resize.
  const rowRef = React.useRef(null);
  React.useEffect(() => {
    function measure() {
      const row = rowRef.current;
      if (!row) return;
      const cards = row.querySelectorAll(".angebot-card");
      if (!cards.length) return;
      const last = cards[cards.length - 1];
      const lr = last.getBoundingClientRect();
      const rr = row.getBoundingClientRect();
      // Current translateX from style isn't applied during measure (we set 0 baseline).
      // To get the natural offset, account for current transform by reading actual.
      const currentTx = function () {
        const t = getComputedStyle(row).transform;
        if (!t || t === "none") return 0;
        const m = t.match(/matrix\(([^)]+)\)/);
        return m ? parseFloat(m[1].split(",")[4]) : 0;
      }();
      const lastCenter = lr.left + lr.width / 2 - currentTx; // baseline (no transform)
      const viewportCenter = window.innerWidth / 2;
      const shift = Math.max(0, lastCenter - viewportCenter - currentTx);
      // Actually simpler: lastCenter (baseline) - viewportCenter = total shift needed
      const baselineLastCenter = lr.left + lr.width / 2 - currentTx;
      setMaxShiftPx(Math.max(0, baselineLastCenter - viewportCenter));
    }
    measure();
    window.addEventListener("resize", measure);
    // re-measure after fonts/images settle
    const t = setTimeout(measure, 600);
    return () => {
      window.removeEventListener("resize", measure);
      clearTimeout(t);
    };
  }, [services.length]);

  React.useEffect(() => {
    let raf = 0;
    function update() {
      raf = 0;
      const el = document.getElementById("angebot-track");
      if (!el) return;
      const r = el.getBoundingClientRect();
      const trackHeight = el.offsetHeight - window.innerHeight;
      const raw = trackHeight > 0 ? -r.top / trackHeight : 0;
      const clamped = Math.max(0, Math.min(1, raw));
      setP(clamped);
      // active card index based on progress
      const idx = Math.round(clamped * (services.length - 1));
      setActive(idx);
    }
    function onScroll() {
      if (!raf) raf = requestAnimationFrame(update);
    }
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [services.length]);

  // Gap between cards in the horizontal track.
  const gapPx = 40;

  // Track is tall enough to scroll through all cards comfortably.
  // ~35vh of scroll runway per card after the first — keeps the section snappy.
  const trackVh = 100 + (services.length - 1) * 35;

  return (
    <div
      id="angebot-track"
      style={{
        position: "relative",
        height: `${trackVh}vh`,
        background: "var(--accent)"
      }}>
      
      <section
        id="angebot"
        className="on-dark hero-pinned"
        style={{
          position: "sticky",
          top: 0,
          height: "100vh",
          overflow: "hidden",
          background: "var(--accent)",
          color: "var(--accent-on)",
          display: "grid",
          gridTemplateRows: "auto 1fr",
          padding: "72px 0 88px"
        }}>
        
        {/* ── Header (stays pinned) ── */}
        <div
          style={{
            maxWidth: "var(--maxw-wide)",
            margin: "0 auto",
            padding: "0 var(--gutter)",
            width: "100%",
            display: "grid",
            gridTemplateColumns: "1fr auto",
            gap: 48,
            alignItems: "end"
          }}>
          
          <div>
            <Eyebrow dark>04 · Angebot</Eyebrow>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(40px, 5.4vw, 88px)",
                lineHeight: 1.05,
                letterSpacing: "-0.02em",
                margin: "20px 0 0",
                color: "var(--accent-on)"
              }}>
              
              Unser{" "}
              <em style={{ fontStyle: "italic", color: "var(--sand)", fontWeight: 400 }}>
                Angebot
              </em>
            </h2>
          </div>
          <a
            href="#kontakt"
            style={{
              border: "1px solid rgba(244,236,224,0.35)",
              padding: "16px 28px",
              fontSize: 11,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: "var(--accent-on)",
              fontWeight: 500,
              transition: "all 240ms",
              whiteSpace: "nowrap"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--accent-on)";
              e.currentTarget.style.color = "var(--accent)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "var(--accent-on)";
            }}>
            
            Anfragen →
          </a>
        </div>

        {/* ── Horizontal card track ── */}
        <div
          style={{
            position: "relative",
            overflow: "hidden",
            display: "flex",
            alignItems: "center",
            margin: "0"
          }}>
          
          <div
            ref={rowRef}
            style={{
              display: "flex",
              gap: gapPx,
              paddingLeft: "var(--gutter)",
              paddingRight: "var(--gutter)",
              transform: `translateX(${-p * maxShiftPx}px)`,
              transition: "transform 100ms linear",
              willChange: "transform"
            }}>
            
            {services.map((s, i) => {
              const isActive = i === active;
              const distance = Math.abs(i - p * (services.length - 1));
              const dim = Math.min(0.55, distance * 0.18);
              return (
                <article
                  key={i}
                  className="angebot-card"
                  style={{
                    flexShrink: 0,
                    width: `32vw`,
                    minWidth: 320,
                    maxWidth: 440,
                    height: "min(560px, 100%)",
                    minHeight: 0,
                    background:
                    "linear-gradient(180deg, rgba(244,236,224,0.04) 0%, rgba(244,236,224,0.01) 100%)",
                    border: "1px solid rgba(244,236,224,0.2)",
                    padding: "0 0 22px",
                    overflow: "hidden",
                    position: "relative",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    transition: "opacity 240ms ease-out, transform 320ms cubic-bezier(0.22,1,0.36,1)",
                    opacity: 1 - dim,
                    transform: isActive ? "translateY(-8px)" : "translateY(0)"
                  }}>
                  
                  <div
                    style={{
                      position: "relative",
                      width: "100%",
                      height: "clamp(110px, 22vh, 180px)",
                      backgroundColor: "#221610",
                      backgroundImage: `url("${s.img}")`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      flexShrink: 0
                    }}>
                    
                    <div
                      style={{
                        position: "absolute",
                        inset: 0,
                        background:
                        "linear-gradient(180deg, rgba(20,12,6,0.05) 0%, rgba(20,12,6,0.55) 100%)"
                      }} />
                    
                  </div>

                  <div style={{ padding: "22px 28px 0", flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "hidden" }}>
                  <div>
                    <div
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "flex-start",
                          marginBottom: 28
                        }}>
                        
                      <span
                          style={{
                            fontSize: 10,
                            letterSpacing: "0.22em",
                            textTransform: "uppercase",
                            color: "var(--sand)",
                            paddingTop: 6,
                            fontWeight: 500
                          }}>
                          
                        {s.tag}
                      </span>
                      <span
                          style={{
                            fontFamily: "var(--font-serif)",
                            fontWeight: 300,
                            fontSize: 44,
                            color: isActive ?
                            "rgba(244,236,224,0.55)" :
                            "rgba(244,236,224,0.18)",
                            lineHeight: 1,
                            letterSpacing: "-0.02em",
                            transition: "color 320ms"
                          }}>
                          
                        {s.n}
                      </span>
                    </div>

                    <h3
                        style={{
                          fontFamily: "var(--font-serif)",
                          fontWeight: 300,
                          fontSize: 30,
                          margin: "0 0 18px",
                          color: "var(--accent-on)",
                          letterSpacing: "-0.015em",
                          lineHeight: 1.1,
                          textWrap: "balance"
                        }}>
                        
                      {s.t}
                    </h3>
                    <p
                        style={{
                          margin: 0,
                          fontSize: 14,
                          lineHeight: 1.55,
                          color: "rgba(244,236,224,0.72)",
                          maxWidth: "32ch",
                          display: "-webkit-box",
                          WebkitLineClamp: 6,
                          WebkitBoxOrient: "vertical",
                          overflow: "hidden"
                        }}>
                        
                      {s.body}
                    </p>
                  </div>

                  {/* hairline + label at bottom */}
                  <div
                      style={{
                        borderTop: "1px solid rgba(244,236,224,0.15)",
                        paddingTop: 20,
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        fontSize: 11,
                        letterSpacing: "0.18em",
                        textTransform: "uppercase",
                        color: "rgba(244,236,224,0.55)"
                      }}>
                      
                    <span>Aktivstall Mannheims</span>
                    <span style={{ color: "var(--sand)" }}>→</span>
                  </div>
                  </div>
                </article>);

            })}
          </div>
        </div>

        {/* ── Footer: progress + counter + dots ── */}
        <div
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 32,
            zIndex: 5,
            maxWidth: "var(--maxw-wide)",
            margin: "0 auto",
            padding: "0 var(--gutter)",
            width: "100%",
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            gap: 32,
            alignItems: "center"
          }}>
          
          <div
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: 28,
              color: "var(--accent-on)",
              letterSpacing: "-0.01em",
              lineHeight: 1,
              fontVariantNumeric: "tabular-nums"
            }}>
            
            <span style={{ color: "var(--sand)" }}>
              {String(active + 1).padStart(2, "0")}
            </span>
            <span style={{ color: "rgba(244,236,224,0.4)", margin: "0 6px" }}>/</span>
            <span style={{ color: "rgba(244,236,224,0.55)" }}>
              {String(services.length).padStart(2, "0")}
            </span>
          </div>

          {/* progress bar */}
          <div
            style={{
              height: 1,
              background: "rgba(244,236,224,0.18)",
              position: "relative",
              overflow: "hidden"
            }}>
            
            <div
              style={{
                position: "absolute",
                inset: 0,
                background: "var(--sand)",
                transformOrigin: "left center",
                transform: `scaleX(${p})`,
                transition: "transform 100ms linear"
              }} />
            
          </div>

          {/* dots */}
          <div style={{ display: "flex", gap: 8 }}>
            {services.map((_, i) =>
            <span
              key={i}
              style={{
                width: i === active ? 22 : 6,
                height: 6,
                background:
                i === active ? "var(--sand)" : "rgba(244,236,224,0.28)",
                transition: "all 280ms cubic-bezier(0.22,1,0.36,1)"
              }} />

            )}
          </div>
        </div>

        {/* corner hint */}
        <div
          style={{
            position: "absolute",
            top: 24,
            right: "var(--gutter)",
            fontSize: 10,
            letterSpacing: "0.24em",
            textTransform: "uppercase",
            color: "rgba(244,236,224,0.45)",
            display: "flex",
            alignItems: "center",
            gap: 10,
            opacity: p < 0.05 ? 1 : 0,
            transition: "opacity 320ms",
            pointerEvents: "none"
          }}>
          
          Scrollen
          <span style={{ display: "inline-block", animation: "nudgeRight 1.6s ease-in-out infinite" }}>
            ↓
          </span>
        </div>
      </section>
    </div>);

}

// ============================================================
// SECTION: TESTIMONIALS — Was unsere Einsteller sagen
// ============================================================
function Testimonials() {
  const reviews = [
  {
    body: "Wir stehen seit der Eröffnung in diesem Stall und sind rundum zufrieden. Die Pferde leben ein glückliches Leben, werden stets gut versorgt und stehen an erster Stelle. Die Stallgemeinschaft ist prima und es werden sowohl im Sommer draußen als auch im Winter drinnen im gemütlichen Stübchen mit Kamin viele gemeinsame Stunden verbracht.",
    who: "Britta Schöder",
    when: "Vor einem Jahr"
  },
  {
    body: "Wir möchten uns ganz herzlich bei Frau Lena für den wunderbaren Reitunterricht bedanken. Unser 8-jähriger Sohn ist begeistert vom Reiten unter ihrer Anleitung — jede Stunde ist für ihn eine große Freude. Auch während der Sommerferienreitwoche hat er dort eine fantastische Zeit verbracht, voller Spaß, Lernen und Kontakt mit den Pferden.",
    who: "Asia Zachajka",
    when: "Vor 5 Monaten"
  },
  {
    body: "9 Hektar Wiesen — hier hat mein Pferd endlich den Platz, den es verdient. Artgerechte Haltung, tolle Gemeinschaft, familiengeführt mit Herzblut.",
    who: "Deine Bewertung könnte hier stehen",
    when: "Google · 4,0 ★",
    placeholder: true
  }];


  return (
    <section
      id="stimmen"
      className="on-dark"
      style={{
        background: "var(--accent)",
        color: "var(--accent-on)",
        padding: "160px var(--gutter)",
        borderTop: "1px solid rgba(244,236,224,0.12)"
      }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <Eyebrow dark>06 · Stimmen</Eyebrow>
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: "clamp(36px, 5vw, 72px)",
              lineHeight: 1.1,
              letterSpacing: "-0.02em",
              margin: "20px auto 0",
              color: "var(--accent-on)",
              maxWidth: "26ch"
            }}>
            
            Was unsere Einsteller{" "}
            <em style={{ fontStyle: "italic", color: "var(--sand)", fontWeight: 400 }}>
              sagen
            </em>
          </h2>
        </div>

        <div
          className="stagger"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 24
          }}>
          
          {reviews.map((r, i) =>
          <article
            key={i}
            style={{
              border: "1px solid rgba(244,236,224,0.18)",
              padding: "36px 32px 32px",
              opacity: r.placeholder ? 0.6 : 1,
              display: "flex",
              flexDirection: "column"
            }}>
            
              <div
              style={{
                display: "flex",
                gap: 4,
                color: "var(--sand)",
                fontSize: 18,
                marginBottom: 24,
                letterSpacing: "0.05em"
              }}>
              
                {"★★★★★".split("").map((s, k) =>
              <span key={k}>{s}</span>
              )}
              </div>
              <p
              style={{
                margin: "0 0 32px",
                fontFamily: "var(--font-serif)",
                fontStyle: "italic",
                fontSize: 16,
                lineHeight: 1.6,
                color: "rgba(244,236,224,0.85)",
                flex: 1
              }}>
              
                „{r.body}"
              </p>
              <div
              style={{
                fontSize: 11,
                letterSpacing: "0.18em",
                textTransform: "uppercase",
                color: "rgba(244,236,224,0.5)",
                fontFamily: "var(--font-sans)",
                borderTop: "1px solid rgba(244,236,224,0.18)",
                paddingTop: 18
              }}>
              
                — {r.who} · {r.when}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: REITUNTERRICHT
// ============================================================
function Unterricht() {
  return (
    <section
      id="unterricht"
      style={{ padding: "160px var(--gutter)", background: "var(--paper)" }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <Eyebrow>03 · Reitunterricht</Eyebrow>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 80,
            alignItems: "end",
            marginTop: 24,
            marginBottom: 80
          }}>
          
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: "clamp(32px, 4vw, 56px)",
              lineHeight: 1.1,
              letterSpacing: "-0.02em",
              margin: 0,
              maxWidth: "22ch"
            }}>
            
            Reiten lernen heißt — das Pferd
            {" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>
              verstehen.
            </em>
          </h2>
          <p
            style={{
              margin: 0,
              fontSize: 17,
              lineHeight: 1.7,
              color: "var(--fg-2)",
              maxWidth: "44ch"
            }}>
            
            Klassischer Unterricht für Erwachsene und Jugendliche, mit
            geprüften Trainern, ehrlich verbundenen Schulpferden und einem
            Fokus auf Sitz, Hilfengebung und das Gespräch mit dem Tier.
          </p>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 24
          }}>
          
          {[
          {
            tag: "Einzeln",
            t: "Privatstunde",
            p: "60 €",
            s: "45 Min · auf eigenen oder Schulpferd",
            body: "Detailarbeit am Sitz, an einer einzelnen Lektion oder einem konkreten Trainingsziel. Kein Gruppendruck.",
            hue: 3
          },
          {
            tag: "Gruppe",
            t: "Reitstunde",
            p: "35 €",
            s: "60 Min · max. 4 Reiter",
            body: "Strukturierte Reihen-Lektion an Sitz und Hilfengebung. Schulpferde sind enthalten.",
            hue: 1
          },
          {
            tag: "Bodenarbeit",
            t: "Kurs Pferd&Mensch",
            p: "ab 120 €",
            s: "Wochenend-Format",
            body: "Vom Führen über Longe und Doppellonge bis zur Freiarbeit. Auch ohne Reiterfahrung.",
            hue: 5
          }].
          map((c, i) =>
          <article
            key={i}
            style={{
              background: "var(--paper)",
              border: "1px solid var(--border-1)",
              borderRadius: 4,
              overflow: "hidden",
              display: "flex",
              flexDirection: "column"
            }}>
            
              <PhotoPlaceholder aspect="5/4" hue={c.hue} />
              <div style={{ padding: "28px 28px 32px" }}>
                <Eyebrow>{c.tag}</Eyebrow>
                <h3
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 400,
                  fontSize: 28,
                  margin: "12px 0 6px",
                  letterSpacing: "-0.01em",
                  lineHeight: 1.15
                }}>
                
                  {c.t}
                </h3>
                <div
                style={{
                  fontSize: 13,
                  color: "var(--fg-3)",
                  marginBottom: 18,
                  fontFamily: "var(--font-sans)"
                }}>
                
                  {c.s}
                </div>
                <p
                style={{
                  margin: "0 0 24px",
                  fontSize: 15,
                  lineHeight: 1.6,
                  color: "var(--fg-2)"
                }}>
                
                  {c.body}
                </p>
                <div
                style={{
                  display: "flex",
                  alignItems: "baseline",
                  justifyContent: "space-between",
                  paddingTop: 16,
                  borderTop: "1px solid var(--border-1)"
                }}>
                
                  <span
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontWeight: 400,
                    fontSize: 22,
                    color: "var(--ink)"
                  }}>
                  
                    {c.p}
                  </span>
                  <a
                  href="#kontakt"
                  style={{
                    fontSize: 11,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    color: "var(--fg-2)",
                    border: 0,
                    fontWeight: 500
                  }}>
                  
                    Termin →
                  </a>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: GALERIE — editorial mosaic
// ============================================================
function Galerie() {
  return (
    <section
      id="galerie"
      style={{
        padding: "160px var(--gutter)",
        background: "var(--paper-2)"
      }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            marginBottom: 64
          }}>
          
          <div>
            <Eyebrow>05 · Galerie</Eyebrow>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(32px, 4vw, 56px)",
                lineHeight: 1.12,
                letterSpacing: "-0.02em",
                margin: "20px 0 0",
                maxWidth: "16ch"
              }}>
              
              Ein Tag auf dem Hof.
            </h2>
          </div>
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              color: "var(--fg-3)",
              letterSpacing: "0.05em"
            }}>
            
            12 Bilder · Aktivstall Mannheims
          </span>
        </div>

        <div
          className="stagger"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(6, 1fr)",
            gridAutoRows: "120px",
            gap: 16
          }}>
          
          {[
          { c: "span 3", r: "span 4", h: 0, src: IMAGES.g1 },
          { c: "span 3", r: "span 3", h: 1, src: IMAGES.g2 },
          { c: "span 2", r: "span 3", h: 2, src: IMAGES.g3 },
          { c: "span 2", r: "span 3", h: 3, src: IMAGES.g4 },
          { c: "span 2", r: "span 3", h: 4, src: IMAGES.g5 },
          { c: "span 4", r: "span 3", h: 5, src: IMAGES.g6 },
          { c: "span 3", r: "span 3", h: 2, src: IMAGES.g9 },
          { c: "span 3", r: "span 3", h: 3, src: IMAGES.g10 },
          { c: "span 3", r: "span 4", h: 4, src: IMAGES.g11 }].
          map((g, i) =>
          <div
            key={i}
            style={{
              gridColumn: g.c,
              gridRow: g.r
            }}>
            
              <PhotoPlaceholder
              aspect="auto"
              hue={g.h}
              src={g.src}
              style={{ height: "100%" }} />
            
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: TEAM
// ============================================================
function Team() {
  const people = [
  { n: "Eva Lindner", r: "Stallleitung & Inhaberin", b: "Pferdewirtin Klassische Reitausbildung. Seit 2014 verantwortlich für Konzept und Herde.", hue: 0, src: IMAGES.t1 },
  { n: "Tobias Reiff", r: "Trainer A · Reitlehrer", b: "Trainer A Dressur, FN-geprüft. Spezialisiert auf jungen Pferden und Wiedereinsteigern.", hue: 2, src: IMAGES.t2 },
  { n: "Jana Schaub", r: "Bodenarbeit · Pferd&Mensch", b: "Akademische Reitkunst, Centered Riding Instructor. Kursleitung Wochenendformate.", hue: 4, src: IMAGES.t3 },
  { n: "Markus Holl", r: "Stallmeister", b: "Tägliche Pflege der Anlage, Hufpflege-Koordination, Heumanagement. Seit 2017 im Team.", hue: 1, src: IMAGES.t4 }];

  return (
    <section
      id="team"
      style={{ padding: "160px var(--gutter)", background: "var(--paper)" }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.6fr",
            gap: 80,
            marginBottom: 80,
            alignItems: "end"
          }}>
          
          <Eyebrow>05 · Team</Eyebrow>
          <h2
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 300,
              fontSize: "clamp(32px, 4vw, 56px)",
              lineHeight: 1.1,
              letterSpacing: "-0.02em",
              margin: 0,
              maxWidth: "26ch"
            }}>
            
            Vier Menschen, eine Herde — und sehr viel
            {" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>
              tägliche Arbeit.
            </em>
          </h2>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 24
          }}>
          
          {people.map((p, i) =>
          <div key={i}>
              <PhotoPlaceholder aspect="4/5" hue={p.hue} src={p.src} />
              <div style={{ paddingTop: 20 }}>
                <h3
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 400,
                  fontSize: 22,
                  margin: 0,
                  letterSpacing: "-0.01em"
                }}>
                
                  {p.n}
                </h3>
                <div
                style={{
                  fontSize: 12,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  color: "var(--fg-3)",
                  margin: "8px 0 14px"
                }}>
                
                  {p.r}
                </div>
                <p
                style={{
                  margin: 0,
                  fontSize: 14,
                  lineHeight: 1.6,
                  color: "var(--fg-2)"
                }}>
                
                  {p.b}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SECTION: KONTAKT — call to enroll
// ============================================================
function Kontakt() {
  return (
    <section
      id="kontakt"
      className="on-dark"
      style={{
        background: "var(--accent)",
        color: "var(--accent-on)",
        padding: "160px var(--gutter) 140px"
      }}>
      
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 96,
            alignItems: "start"
          }}>
          
          <div>
            <Eyebrow dark>07 · Anfrage</Eyebrow>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: "clamp(40px, 5vw, 80px)",
                lineHeight: 1.05,
                letterSpacing: "-0.02em",
                margin: "24px 0 32px",
                maxWidth: "16ch",
                color: "var(--accent-on)"
              }}>
              
              Lust auf einen
              {" "}
              <em style={{ fontStyle: "italic", color: "var(--sand)", fontWeight: 400 }}>
                Probetag?
              </em>
            </h2>
            <p
              style={{
                margin: "0 0 40px",
                fontSize: 17,
                lineHeight: 1.7,
                color: "rgba(244,236,224,0.78)",
                maxWidth: "44ch"
              }}>
              
              Schreib uns kurz: Name, dein Pferd (oder dein Wunsch nach
              einem), und wann du vorbeikommen willst. Wir antworten
              innerhalb von 48 Stunden.
            </p>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: "20px 32px",
                fontSize: 16,
                fontFamily: "var(--font-sans)"
              }}>
              
              <span style={{ color: "rgba(244,236,224,0.55)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", paddingTop: 4 }}>Adresse</span>
              <span style={{ color: "var(--accent-on)" }}>
                Aktivstall Mannheims<br />
                Heckenstraße 35<br />
                40764 Langenfeld (Rheinland)
              </span>
              <span style={{ color: "rgba(244,236,224,0.55)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", paddingTop: 4 }}>Telefon</span>
              <span style={{ color: "var(--accent-on)" }}>0177 9757880</span>
              <span style={{ color: "rgba(244,236,224,0.55)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", paddingTop: 4 }}>E-Mail</span>
              <span style={{ color: "var(--accent-on)" }}>kontakt@aktivstall-mannheims.de</span>
              <span style={{ color: "rgba(244,236,224,0.55)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", paddingTop: 4 }}>Besuche</span>
              <span style={{ color: "var(--accent-on)" }}>
                Täglich geöffnet<br />
                Schließt 21:00 Uhr
              </span>
            </div>
          </div>

          {/* Form — wired to Web3Forms */}
          <Web3FormsContact />
        </div>
      </div>
    </section>);

}

// ============================================================
// CONTACT FORM (Web3Forms)
// ============================================================
function Web3FormsContact() {
  const WEB3FORMS_KEY = "dbe5b4d9-8c2f-4cdb-a99c-9a6cccd4630e";
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    setErrorMsg("");
    const fd = new FormData(e.currentTarget);
    fd.append("access_key", WEB3FORMS_KEY);
    fd.append("subject", "Neue Anfrage über Aktivstall-Website");
    fd.append("from_name", "Aktivstall Mannheims · Website");
    // honeypot is already in the form (botcheck)
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: fd
      });
      const data = await res.json().catch(() => ({}));
      if (data && data.success) {
        setStatus("success");
        e.target.reset();
      } else {
        setStatus("error");
        setErrorMsg(data?.message || "Unbekannter Fehler beim Senden.");
      }
    } catch (err) {
      setStatus("error");
      setErrorMsg("Netzwerkfehler. Bitte später erneut versuchen.");
    }
  }

  if (status === "success") {
    return (
      <div
        style={{
          border: "1px solid rgba(244,236,224,0.18)",
          padding: 56,
          background: "rgba(244,236,224,0.04)",
          textAlign: "center",
          minHeight: 400,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          gap: 20
        }}>
        
        <div
          style={{
            width: 56,
            height: 56,
            borderRadius: "50%",
            border: "1px solid var(--sand)",
            display: "grid",
            placeItems: "center",
            color: "var(--sand)"
          }}>
          
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>
        <h3
          style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 300,
            fontSize: 36,
            margin: 0,
            color: "var(--accent-on)",
            letterSpacing: "-0.02em"
          }}>
          
          Vielen Dank!
        </h3>
        <p
          style={{
            margin: 0,
            color: "rgba(244,236,224,0.78)",
            fontSize: 16,
            lineHeight: 1.6,
            maxWidth: "44ch"
          }}>
          
          Deine Anfrage ist bei uns angekommen. Wir melden uns innerhalb von 48&nbsp;Stunden bei dir.
        </p>
        <button
          type="button"
          onClick={() => setStatus("idle")}
          style={{
            marginTop: 12,
            background: "transparent",
            border: "1px solid rgba(244,236,224,0.4)",
            color: "var(--accent-on)",
            padding: "12px 24px",
            fontSize: 11,
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            cursor: "pointer",
            fontFamily: "var(--font-sans)"
          }}>
          
          Weitere Anfrage senden
        </button>
      </div>);

  }

  return (
    <form
      onSubmit={handleSubmit}
      style={{
        border: "1px solid rgba(244,236,224,0.18)",
        padding: 40,
        background: "rgba(244,236,224,0.04)"
      }}>
      
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <FormField name="name" label="Name" placeholder="Dein vollständiger Name" required />
        <FormField name="telefon" label="Telefon" placeholder="+49 …" type="tel" />
        <FormField name="email" label="E-Mail" placeholder="deine@email.de" type="email" required span={2} />
        <FormField name="pferd_name" label="Name des Pferdes" placeholder="z.B. Luna" />
        <FormField name="pferd_rasse" label="Rasse" placeholder="z.B. Hannoveraner" />
        <FormField name="einzugstermin" label="Gewünschter Einzugstermin" type="date" span={2} />
        <FormField
          name="herkunft"
          label="Wie habt ihr uns gefunden?"
          placeholder="Bitte wählen…"
          span={2}
          options={[
          "Google-Suche",
          "Instagram",
          "Facebook",
          "Empfehlung",
          "Bin Nachbar / vorbeigefahren",
          "Sonstiges"]
          } />
        
        <FormField name="nachricht" label="Nachricht" placeholder="Erzähl uns von deinem Pferd…" textarea span={2} />

        {/* Hidden honeypot — bots fill this, humans don't see it */}
        <input
          type="checkbox"
          name="botcheck"
          tabIndex={-1}
          autoComplete="off"
          style={{ display: "none" }} />
        
        {/* Web3Forms reply-to */}
        <input type="hidden" name="redirect" value="false" />

        <button
          type="submit"
          disabled={status === "sending"}
          className="form-submit"
          style={{
            gridColumn: "span 2",
            marginTop: 16,
            fontFamily: "var(--font-sans)",
            fontSize: 13,
            fontWeight: 600,
            padding: "20px 28px",
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            cursor: status === "sending" ? "wait" : "pointer",
            border: 0,
            background: status === "sending" ? "rgba(238,212,159,0.6)" : "var(--sand)",
            color: "var(--accent)",
            transition: "all 240ms cubic-bezier(0.22,1,0.36,1)",
            opacity: status === "sending" ? 0.7 : 1
          }}
          onMouseEnter={(e) => {
            if (status !== "sending")
            e.currentTarget.style.background = "var(--accent-on)";
          }}
          onMouseLeave={(e) => {
            if (status !== "sending")
            e.currentTarget.style.background = "var(--sand)";
          }}>
          
          {status === "sending" ? "Wird gesendet…" : "Anfrage absenden"}
        </button>

        {status === "error" &&
        <p
          style={{
            gridColumn: "span 2",
            margin: "8px 0 0",
            fontSize: 13,
            color: "#ffb59c",
            textAlign: "center",
            fontFamily: "var(--font-sans)",
            lineHeight: 1.5
          }}>
          
            Hoppla — {errorMsg} Bitte versuche es erneut oder schreib uns direkt an{" "}
            <a
            href="mailto:info@aktivstall-mannheims.de"
            style={{ color: "var(--sand)", borderBottom: "1px solid var(--sand)" }}>
            
              info@aktivstall-mannheims.de
            </a>
            .
          </p>
        }

        <p
          style={{
            gridColumn: "span 2",
            margin: "8px 0 0",
            fontSize: 12,
            color: "rgba(244,236,224,0.5)",
            textAlign: "center",
            fontFamily: "var(--font-sans)",
            lineHeight: 1.5
          }}>
          
          Mit dem Absenden stimmst du der Verarbeitung deiner Daten zu.{" "}
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              window.dispatchEvent(new CustomEvent("legal:open", { detail: "datenschutz" }));
            }}
            style={{
              color: "rgba(244,236,224,0.7)",
              borderBottom: "1px solid rgba(244,236,224,0.4)",
              cursor: "pointer"
            }}>
            
            Datenschutz
          </a>
        </p>
      </div>
    </form>);

}

function FormField({ label, placeholder, textarea, type = "text", required, options, span = 1, name }) {
  const labelEl =
  <label
    style={{
      display: "block",
      fontSize: 11,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color: "rgba(244,236,224,0.55)",
      marginBottom: 8
    }}>
    
      {label}{required && <span style={{ color: "var(--sand)", marginLeft: 4 }}>*</span>}
    </label>;

  const fieldStyle = {
    width: "100%",
    background: "transparent",
    border: 0,
    borderBottom: "1px solid rgba(244,236,224,0.28)",
    color: "var(--accent-on)",
    fontFamily: "var(--font-sans)",
    fontSize: 16,
    padding: "10px 0",
    outline: "none",
    transition: "border-color 200ms"
  };
  const onFocus = (e) => e.currentTarget.style.borderBottomColor = "var(--accent-on)";
  const onBlur = (e) => e.currentTarget.style.borderBottomColor = "rgba(244,236,224,0.28)";
  let control;
  if (textarea) {
    control =
    <textarea
      name={name}
      rows={3}
      placeholder={placeholder}
      required={required}
      style={{ ...fieldStyle, resize: "vertical", minHeight: 80 }}
      onFocus={onFocus}
      onBlur={onBlur} />;


  } else if (options) {
    control =
    <select
      name={name}
      required={required}
      defaultValue=""
      style={{
        ...fieldStyle,
        appearance: "none",
        WebkitAppearance: "none",
        backgroundImage: "linear-gradient(45deg, transparent 50%, rgba(244,236,224,0.5) 50%), linear-gradient(135deg, rgba(244,236,224,0.5) 50%, transparent 50%)",
        backgroundPosition: "calc(100% - 14px) center, calc(100% - 8px) center",
        backgroundSize: "6px 6px, 6px 6px",
        backgroundRepeat: "no-repeat",
        paddingRight: 28,
        colorScheme: "dark"
      }}
      onFocus={onFocus}
      onBlur={onBlur}>
      
        <option value="" disabled>{placeholder || "Bitte wählen…"}</option>
        {options.map((o) =>
      <option key={o} value={o} style={{ background: "var(--accent)", color: "var(--accent-on)" }}>{o}</option>
      )}
      </select>;

  } else {
    control =
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      required={required}
      style={{ ...fieldStyle, colorScheme: type === "date" ? "dark" : "auto" }}
      onFocus={onFocus}
      onBlur={onBlur} />;


  }
  return (
    <div style={{ gridColumn: span === 2 ? "span 2" : "auto" }}>
      {labelEl}
      {control}
    </div>);

}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  const InstaIcon =
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>;

  return (
    <footer
      style={{
        background: "var(--paper)",
        padding: "80px var(--gutter) 36px",
        borderTop: "1px solid var(--border-1)"
      }}>
      
      <div
        style={{
          maxWidth: "var(--maxw-wide)",
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 48
        }}>
        
        <div>
          <div
            style={{
              fontFamily: "var(--font-serif)",
              fontSize: 16,
              letterSpacing: "0.32em",
              color: "var(--ink)",
              marginBottom: 18
            }}>
            
            AKTIVSTALL&nbsp;MANNHEIMS
          </div>
          <p style={{ maxWidth: "38ch", margin: "0 0 24px", fontSize: 14, color: "var(--fg-2)" }}>
            Artgerechte Pferdehaltung in Langenfeld (Rheinland). 70 Pferde,
            neun Hektar Wiesen, eine Herde — seit 2023.
          </p>
          <a
            href="https://www.instagram.com/aktivstall_mannheims/"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              fontSize: 13,
              color: "var(--fg-2)",
              border: 0,
              padding: "10px 16px",
              borderTop: "1px solid var(--border-1)",
              borderBottom: "1px solid var(--border-1)",
              borderLeft: "1px solid var(--border-1)",
              borderRight: "1px solid var(--border-1)",
              transition: "all 200ms",
              fontFamily: "var(--font-sans)"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--accent)";
              e.currentTarget.style.color = "var(--accent-on)";
              e.currentTarget.style.borderColor = "var(--accent)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "var(--fg-2)";
              e.currentTarget.style.borderColor = "var(--border-1)";
            }}>
            
            {InstaIcon}
            <span style={{ letterSpacing: "0.06em" }}>@aktivstall_mannheims</span>
          </a>
        </div>
        {[
        ["Hof", [
        ["Konzept", "#konzept"],
        ["Anlage", "#anlage"],
        ["Familie", "#familie"],
        ["Angebot", "#angebot"],
        ["Galerie", "#galerie"],
        ["Stimmen", "#stimmen"]]],

        ["Kontakt", [
        ["Anfrage stellen", "#kontakt"],
        ["Heckenstraße 35, 40764 Langenfeld", "#kontakt"],
        ["0177 9757880", "tel:01779757880"],
        ["kontakt@aktivstall-mannheims.de", "mailto:kontakt@aktivstall-mannheims.de"]]],

        ["Rechtliches", [
        ["Impressum", "legal:impressum"],
        ["Datenschutz", "legal:datenschutz"]]]].

        map(([t, links]) =>
        <div key={t}>
            <h4
            style={{
              fontFamily: "var(--font-sans)",
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--fg-3)",
              margin: "0 0 18px",
              fontWeight: 600
            }}>
            
              {t}
            </h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {links.map(([l, h]) => {
              const isLegal = typeof h === "string" && h.startsWith("legal:");
              return (
                <a
                  key={l}
                  href={isLegal ? "#" : h}
                  onClick={
                  isLegal ?
                  (e) => {
                    e.preventDefault();
                    window.dispatchEvent(
                      new CustomEvent("legal:open", {
                        detail: h.split(":")[1]
                      })
                    );
                  } :
                  undefined
                  }
                  style={{ fontSize: 14, color: "var(--fg-2)", border: 0 }}>
                  
                    {l}
                  </a>);

            })}
            </div>
          </div>
        )}
      </div>

      <div
        style={{
          maxWidth: "var(--maxw-wide)",
          margin: "60px auto 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          fontSize: 11,
          color: "var(--fg-3)",
          letterSpacing: "0.08em",
          paddingTop: 28,
          borderTop: "1px solid var(--border-1)",
          flexWrap: "wrap",
          gap: 16
        }}>
        
        <span>© 2026 Aktivstall Mannheims — Alle Rechte vorbehalten</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          Crafted by{" "}
          <a
            href="https://bk-studio.de"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              color: "var(--fg-1)",
              borderBottom: "1px solid var(--border-2)",
              fontFamily: "var(--font-serif)",
              fontSize: 13,
              letterSpacing: "0.18em",
              padding: "2px 0"
            }}>
            
            BK&nbsp;STUDIO
          </a>
        </span>
      </div>
    </footer>);

}

// ============================================================
// TWEAKS PANEL
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "displayWeight": 300
} /*EDITMODE-END*/;

function applyPalette(name) {
  const p = COLOR_PRESETS[name] || COLOR_PRESETS.espresso;
  const r = document.documentElement;
  r.style.setProperty("--paper", p.paper);
  r.style.setProperty("--paper-2", p.paper2);
  r.style.setProperty("--paper-3", p.paper3);
  r.style.setProperty("--ink", p.ink);
  r.style.setProperty("--accent", p.accent);
  r.style.setProperty("--accent-on", p.accentOn);
  r.style.setProperty("--accent-hover", p.accent);
  r.style.setProperty("--sand", p.sand);
  r.style.setProperty("--cognac", p.cognac);
  r.style.setProperty("--bg-1", p.paper);
  r.style.setProperty("--bg-2", p.paper2);
  r.style.setProperty("--bg-3", p.paper3);
  r.style.setProperty("--fg-1", p.ink);
  r.style.setProperty("--fg-on-dark", p.accentOn);
  r.style.setProperty("--bg-dark", p.accent);
  r.style.setProperty("--espresso", p.accent);
  r.style.setProperty("--espresso-dark", p.accent);
}

function TweaksPanelHost() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    applyPalette(tweaks.palette);
    document.documentElement.style.setProperty(
      "--display-weight",
      tweaks.displayWeight
    );
  }, [tweaks.palette, tweaks.displayWeight]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakSlider } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Farb-Palette">
        <TweakRadio
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
          { value: "espresso", label: "Espresso" },
          { value: "forest", label: "Wald" },
          { value: "earth", label: "Erde" }]
          } />
        
      </TweakSection>
      <TweakSection title="Display-Schriftstärke">
        <TweakSlider
          value={tweaks.displayWeight}
          onChange={(v) => setTweak("displayWeight", v)}
          min={200}
          max={500}
          step={50}
          formatValue={(v) => v.toString()} />
        
      </TweakSection>
    </TweaksPanel>);

}

// Apply default palette on load (before edit mode is touched)
applyPalette(TWEAK_DEFAULTS.palette);

// ============================================================
// LEGAL MODAL — Impressum / Datenschutz / AGB
// Opens via window.dispatchEvent(new CustomEvent("legal:open", {detail:"impressum"}))
// ============================================================
const LEGAL_CONTENT = {
  impressum: {
    title: "Impressum",
    eyebrow: "Angaben gemäß § 5 TMG",
    body:
    <>
        <h3>Anbieter</h3>
        <p>
          Mannheims GbR<br />
          Heckenstraße 35<br />
          40764 Langenfeld
        </p>

        <h3>Kontakt</h3>
        <p>
          Telefon: 0177 9757880<br />
          E-Mail: <a href="mailto:info@aktivstall-mannheims.de">info@aktivstall-mannheims.de</a>
        </p>

        <h3>Vertretungsberechtigte</h3>
        <p>Raphaela Mannheims</p>

        <h3>Steuernummer</h3>
        <p>139/5894/3968</p>

        <h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
        <p>
          Raphaela Mannheims<br />
          Heckenstraße 35<br />
          40764 Langenfeld
        </p>

        <h3>Streitschlichtung</h3>
        <p>
          Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung
          (OS) bereit:{" "}
          <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer">
            https://ec.europa.eu/consumers/odr/
          </a>
          . Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor
          einer Verbraucherschlichtungsstelle teilzunehmen.
        </p>

      </>

  },
  datenschutz: {
    title: "Datenschutzerklärung",
    eyebrow: "Hinweise zur Datenverarbeitung",
    body:
    <>
        <h3>1. Einleitung</h3>
        <p>
          Der Schutz Ihrer persönlichen Daten hat höchste Priorität. Diese
          Datenschutzerklärung erläutert die Art, den Umfang und den Zweck der
          Verarbeitung personenbezogener Daten (im Folgenden „Daten" genannt)
          in Zusammenhang mit dem Onlineangebot. Dies umfasst die zugehörige
          Website, Funktionen und Inhalte sowie die externen Onlinepräsenzen,
          wie beispielsweise die Social-Media-Profile (im Folgenden zusammengefasst
          als „Onlineangebot"). Ihre personenbezogenen Daten werden vertraulich
          behandelt und es wird strikt den gesetzlichen Datenschutzvorschriften
          sowie den Bestimmungen dieser Datenschutzerklärung entsprochen.
        </p>

        <h3>Allgemeine Hinweise</h3>
        <p>
          Diese Datenschutzerklärung gibt Ihnen einen umfassenden Überblick darüber,
          was mit Ihren personenbezogenen Daten geschieht, wenn Sie diese Website
          besuchen. Personenbezogene Daten sind alle Informationen, die dazu
          genutzt werden können, Sie persönlich zu identifizieren. Detaillierte
          Informationen zum Datenschutz entnehmen Sie bitte dieser vollständigen
          Datenschutzerklärung.
        </p>

        <h3>Verantwortliche Stelle</h3>
        <p>
          Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber.
          Die Kontaktdaten des Verantwortlichen finden Sie im Abschnitt „Verantwortlicher"
          in dieser Datenschutzerklärung.
        </p>

        <h3>Erhebung Ihrer Daten</h3>
        <p>
          Personenbezogene Daten werden zum einen dadurch erhoben, dass Sie diese
          aktiv mitteilen, z.B. durch das Ausfüllen eines Kontaktformulars. Andere
          Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der
          Website durch die IT-Systeme des Verantwortlichen erfasst. Hierbei handelt
          es sich vor allem um technische Daten (z.B. Internetbrowser, Betriebssystem
          oder Uhrzeit des Seitenaufrufs). Diese Datenerfassung erfolgt automatisch,
          sobald Sie die Website betreten.
        </p>

        <h3>Verwendung Ihrer Daten</h3>
        <p>
          Ein Teil der Daten wird erhoben, um die fehlerfreie Bereitstellung der
          Website sicherzustellen. Andere Daten können zur Analyse Ihres
          Nutzerverhaltens verwendet werden, um das Angebot zu optimieren und auf
          Ihre Bedürfnisse anzupassen.
        </p>

        <h3>Datenübermittlung an externe Stellen</h3>
        <p>
          Im Rahmen der Geschäftstätigkeit des Verantwortlichen kann es erforderlich
          sein, personenbezogene Daten an externe Stellen zu übermitteln. Diese
          Übermittlung erfolgt ausschließlich unter bestimmten Bedingungen: wenn
          die Weitergabe zur Erfüllung eines Vertrags notwendig ist, wenn eine
          gesetzliche Verpflichtung besteht, beispielsweise an Steuerbehörden,
          wenn ein berechtigtes Interesse gemäß Art. 6 Abs. 1 lit. f DSGVO vorliegt,
          oder wenn eine andere rechtliche Grundlage die Datenübermittlung erlaubt.
          Beim Einsatz externer Dienstleister zur Datenverarbeitung erfolgt die
          Weitergabe personenbezogener Daten ausschließlich auf Grundlage eines
          gültigen Vertrags zur Auftragsverarbeitung gemäß Art. 28 DSGVO. Wenn eine
          gemeinsame Verarbeitung der Daten mit anderen Stellen stattfindet, wird
          ein Vertrag über die gemeinsame Verarbeitung gemäß Art. 26 DSGVO
          abgeschlossen.
        </p>

        <h3>Widerruf von Einwilligungen zur Datenverarbeitung</h3>
        <p>
          Bestimmte Datenverarbeitungen können nur mit Ihrer ausdrücklichen
          Einwilligung erfolgen. Diese Einwilligung kann jederzeit widerrufen werden.
          Die Rechtmäßigkeit der bis zum Zeitpunkt des Widerrufs erfolgten
          Datenverarbeitung bleibt durch den Widerruf unberührt.
        </p>

        <h3>Widerspruchsrecht bei spezifischen Datenverarbeitungen und Werbemaßnahmen (Art. 21 DSGVO)</h3>
        <p>
          Erfolgt die Verarbeitung Ihrer personenbezogenen Daten auf der Basis von
          Art. 6 Abs. 1 lit. E oder F DSGVO, haben Sie das Recht, jederzeit gegen
          diese Verarbeitung Widerspruch einzulegen, sofern Sie Gründe haben, die
          sich aus Ihrer besonderen Situation ergeben. Dies betrifft auch das
          Profiling, das auf diesen Bestimmungen basiert. Die konkrete Rechtsgrundlage
          der Datenverarbeitung finden Sie in dieser Datenschutzerklärung. Bei einem
          Widerspruch wird der Verantwortliche Ihre personenbezogenen Daten nicht
          mehr verarbeiten, es sei denn, es können zwingende schutzwürdige Gründe
          nachgewiesen werden, die Ihre Interessen, Rechte und Freiheiten überwiegen
          oder die Verarbeitung dient der Geltendmachung, Ausübung oder Verteidigung
          von Rechtsansprüchen (Widerspruch gemäß Art. 21 Abs. 1 DSGVO).
        </p>
        <p>
          Werden Ihre personenbezogenen Daten für Zwecke der Direktwerbung genutzt,
          steht Ihnen das Recht zu, jederzeit Widerspruch gegen diese Verarbeitung
          einzulegen. Dies gilt auch für das Profiling, sofern es in Verbindung mit
          Direktwerbung steht. Nach Ihrem Widerspruch wird der Verantwortliche Ihre
          personenbezogenen Daten nicht mehr für diese Werbezwecke verwenden
          (Widerspruch gemäß Art. 21 Abs. 2 DSGVO).
        </p>

        <h3>Rechte gemäß Datenschutz-Grundverordnung</h3>
        <p>
          Sie haben das Recht, bei Verstößen gegen die DSGVO eine Beschwerde bei
          einer zuständigen Aufsichtsbehörde einzureichen. Dieses Recht kann
          insbesondere in dem Mitgliedstaat ausgeübt werden, in dem sich der
          gewöhnliche Aufenthaltsort, der Arbeitsplatz oder der Ort des mutmaßlichen
          Verstoßes befindet. Andere verwaltungsrechtliche oder gerichtliche
          Rechtsbehelfe bleiben hiervon unberührt.
        </p>
        <p>
          Personenbezogene Daten, die auf Basis einer Einwilligung oder zur Erfüllung
          eines Vertrags automatisiert verarbeitet werden, können in einem
          strukturierten, gängigen und maschinenlesbaren Format angefordert werden.
          Auf Wunsch kann auch eine direkte Übermittlung dieser Daten an einen
          anderen Verantwortlichen erfolgen, sofern dies technisch möglich ist.
        </p>
        <p>
          Jede betroffene Person hat das Recht, unentgeltlich Auskunft über ihre
          gespeicherten personenbezogenen Daten, deren Herkunft, Empfänger sowie
          den Zweck der Datenverarbeitung zu erhalten. Darüber hinaus besteht ein
          Recht auf Berichtigung oder Löschung dieser Daten, sofern gesetzliche
          Bestimmungen dies zulassen. Bei weiteren Fragen oder Anliegen zum Thema
          personenbezogene Daten kann jederzeit Kontakt mit dem Verantwortlichen
          aufgenommen werden.
        </p>
        <p>
          Es besteht das Recht, die Einschränkung der Verarbeitung personenbezogener
          Daten zu verlangen, wenn die Richtigkeit der Daten bestritten wird und
          eine Überprüfung aussteht. Auch bei unrechtmäßiger Verarbeitung kann
          anstelle einer Löschung die Einschränkung der Datenverarbeitung verlangt
          werden. Weiterhin kann die Einschränkung gefordert werden, wenn die Daten
          nicht mehr benötigt werden, aber zur Geltendmachung, Ausübung oder
          Verteidigung von Rechtsansprüchen erforderlich sind. Bei Widerspruch gegen
          die Verarbeitung gemäß Art. 21 Abs. 1 DSGVO, bis zur Klärung, wessen
          Interessen überwiegen, besteht ebenfalls das Recht auf Einschränkung.
        </p>
        <p>
          Sind die personenbezogenen Daten in der Verarbeitung eingeschränkt, dürfen
          diese, abgesehen von der Speicherung, nur mit Einwilligung der betroffenen
          Person oder zur Geltendmachung, Ausübung oder Verteidigung von
          Rechtsansprüchen, zum Schutz der Rechte anderer natürlicher oder juristischer
          Personen oder aus Gründen eines wichtigen öffentlichen Interesses der EU
          oder eines Mitgliedstaates verarbeitet werden.
        </p>

        <h3>2. Verantwortlicher</h3>
        <p>
          Verantwortlicher für die Datenverarbeitung auf dieser Website im Sinne der
          Datenschutz-Grundverordnung (DSGVO) ist:
        </p>
        <p>
          <strong>Mannheims GbR</strong><br />
          Vertreten durch: Frau<br />
          Heckenstraße 35, 40764 Langenfeld<br />
          Website: www.aktivstall-mannheims.de<br />
          E-Mail: info@aktivstall-mannheims.de<br />
          Telefon: 0177 9757880
        </p>

        <h3>3. Auftragsverarbeiter</h3>
        <p>
          Die Zusammenarbeit erfolgt mit verschiedenen Auftragsverarbeitern, die im
          Auftrag Daten verarbeiten. Diese Dienstleister sind vertraglich verpflichtet,
          die Daten vertraulich zu behandeln und ausschließlich im Rahmen der jeweiligen
          Dienstleistung zu nutzen. Zudem gibt es Fälle, in denen die Verantwortung
          für die Datenverarbeitung gemeinsam mit anderen Stellen getragen wird. In
          solchen Fällen werden die Verantwortlichkeiten transparent geregelt und
          dokumentiert, um die Einhaltung der Datenschutzanforderungen sicherzustellen.
        </p>

        <h3>4. Begriffsbestimmungen</h3>
        <p>
          Um die Transparenz dieser Datenschutzerklärung zu gewährleisten und sie für
          jedermann verständlich zu machen, werden in dieser Erklärung vorrangig
          Begriffe verwendet, die auch in der Datenschutz-Grundverordnung (DSGVO)
          definiert sind. Die vollständigen gesetzlichen Definitionen finden sich in
          Art. 4 DSGVO. Im Folgenden werden die wichtigsten Begriffe im Zusammenhang
          mit dieser Datenschutzerklärung erläutert:
        </p>
        <p>
          <strong>Personenbezogene Daten:</strong> Dies umfasst alle Informationen,
          die sich auf eine identifizierte oder identifizierbare natürliche Person
          (im Folgenden „betroffene Person") beziehen. Eine Person gilt als
          identifizierbar, wenn sie direkt oder indirekt, insbesondere durch Zuordnung
          zu einer Kennung wie einem Namen, einer Kennnummer, Standortdaten, einer
          Online-Kennung (z.B. Cookie) oder einem oder mehreren spezifischen Merkmalen
          identifiziert werden kann, die Ausdruck der physischen, physiologischen,
          genetischen, psychischen, wirtschaftlichen, kulturellen oder sozialen
          Identität dieser Person sind.
        </p>
        <p>
          <strong>Verarbeitung:</strong> Dieser Begriff umfasst jede Handlung oder
          eine Reihe von Handlungen, die im Zusammenhang mit personenbezogenen Daten
          durchgeführt werden, unabhängig davon, ob sie mit oder ohne Hilfe
          automatisierter Verfahren erfolgen. Dies kann das Erheben, Erfassen,
          Organisieren, Ordnen, Speichern, Anpassen oder Verändern, Auslesen, Abfragen,
          Verwenden, Offenlegen durch Übermittlung, Verbreiten oder eine andere Form
          der Bereitstellung, Abgleichen oder Verknüpfen, Einschränken, Löschen oder
          Vernichten von Daten umfassen.
        </p>
        <p>
          <strong>Verantwortlicher:</strong> Dies ist die natürliche oder juristische
          Person, Behörde, Einrichtung oder andere Stelle, die allein oder gemeinsam
          mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen
          Daten entscheidet.
        </p>
        <p>
          <strong>Auftragsverarbeiter:</strong> Eine natürliche oder juristische Person,
          Behörde, Einrichtung oder andere Stelle, die personenbezogene Daten im Auftrag
          des Verantwortlichen verarbeitet.
        </p>
        <p>
          <strong>Einwilligung:</strong> Jede freiwillig, für den bestimmten Fall, in
          informierter Weise und unmissverständlich abgegebene Willensbekundung in Form
          einer Erklärung oder einer sonstigen eindeutigen bestätigenden Handlung, mit
          der die betroffene Person zu verstehen gibt, dass sie mit der Verarbeitung
          der sie betreffenden personenbezogenen Daten einverstanden ist.
        </p>
        <p>
          <strong>Website:</strong> Die Website bezeichnet das gesamte Internetangebot,
          das von dem Verantwortlichen unter einer spezifischen URL bereitgestellt wird.
          Dazu gehören sämtliche durch den Verantwortlichen publizierten Inhalte,
          Informationen, Funktionen und Dienste, die dem Nutzer über diese URL zugänglich
          gemacht werden. Die Website dient als digitale Plattform zur Bereitstellung
          von Informationen, Dienstleistungen und zur Interaktion zwischen dem
          Verantwortlichen und den Nutzern.
        </p>
        <p>
          <strong>Endgerät:</strong> Ein Endgerät ist ein elektronisches Gerät, das in
          der Lage ist, auf das Internet zuzugreifen und Webseiten zu laden. Dazu zählen
          unter anderem Computer, Laptops, Tablets und Smartphones.
        </p>

        <h3>5. Hosting</h3>
        <p>
          Diese Website wird auf den Servern eines externen Dienstleisters gehostet,
          um Ihnen eine zuverlässige und sichere Nutzung dieses Onlineangebots zu
          gewährleisten.
        </p>
        <p>
          Die Datenverarbeitung durch den Hosting-Anbieter erfolgt gemäß Art. 6 Abs. 1
          lit. f DSGVO, da der Verantwortliche ein berechtigtes Interesse daran hat,
          eine stabile und sichere Website bereitzustellen. Sollte es notwendig sein,
          die Einwilligung des Nutzers einzuholen (beispielsweise für die Nutzung
          bestimmter Cookies oder Tracking-Technologien), basiert die Datenverarbeitung
          auf der Einwilligung des Nutzers gemäß Art. 6 Abs. 1 lit. a DSGVO sowie
          § 25 Abs. 1 TTDSG. Ihre Einwilligung können Sie jederzeit mit Wirkung für
          die Zukunft widerrufen.
        </p>
        <p>
          Der Hosting-Anbieter ist:
        </p>
        <p>
          <strong>Hostinger</strong><br />
          Švitrigailos str. 34, Vilnius 03230, Litauen
        </p>
        <p>
          Details zur Datenverarbeitung und zum Datenschutz können Sie der
          Datenschutzerklärung des Hosting-Anbieters entnehmen. Diese finden Sie hier:{" "}
          <a href="https://www.hostinger.com/de/legal/datenschutz-bestimmungen" target="_blank" rel="noopener noreferrer">
            https://www.hostinger.com/de/legal/datenschutz-bestimmungen
          </a>
        </p>

        <h3>6. Rechtliche Grundlagen der Datenverarbeitung</h3>
        <p>
          Die Verarbeitung Ihrer personenbezogenen Daten erfolgt auf Grundlage der
          Datenschutz-Grundverordnung (DSGVO) sowie weiterer relevanter gesetzlicher
          Bestimmungen. Je nach Zweck der Datenverarbeitung kommen unterschiedliche
          Rechtsgrundlagen zur Anwendung.
        </p>
        <p>
          Sofern Sie der Verarbeitung Ihrer personenbezogenen Daten zugestimmt haben,
          erfolgt diese auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a
          DSGVO. Dies gilt insbesondere für die Verarbeitung besonderer Kategorien
          personenbezogener Daten gemäß Art. 9 Abs. 2 lit. a DSGVO sowie für die
          Übermittlung personenbezogener Daten in Drittländer nach Art. 49 Abs. 1
          lit. a DSGVO. Ihre Einwilligung kann jederzeit widerrufen werden.
        </p>
        <p>
          Die Verarbeitung Ihrer Daten kann zur Erfüllung eines Vertrags oder zur
          Durchführung vorvertraglicher Maßnahmen notwendig sein und erfolgt in diesem
          Fall auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO. Darüber hinaus kann eine
          Verarbeitung erforderlich sein, um rechtlichen Verpflichtungen nachzukommen,
          was dann gemäß Art. 6 Abs. 1 lit. c DSGVO geschieht.
        </p>
        <p>
          In bestimmten Fällen erfolgt die Verarbeitung zur Wahrung berechtigter
          Interessen des Verantwortlichen oder eines Dritten, sofern nicht Ihre
          Interessen oder Grundrechte und Grundfreiheiten überwiegen. Diese Verarbeitung
          basiert auf Art. 6 Abs. 1 lit. f DSGVO.
        </p>
        <p>
          Für bestimmte Verarbeitungen können zudem nationale Regelungen, wie
          beispielsweise § 25 TTDSG bei der Speicherung von Cookies oder dem Zugriff
          auf Informationen auf Ihrem Endgerät, zur Anwendung kommen. Die jeweils
          anwendbaren Rechtsgrundlagen werden in den spezifischen Abschnitten dieser
          Datenschutzerklärung detailliert erläutert.
        </p>
        <p>
          Sofern Ihre Daten zur Erfüllung eines Vertrages oder zur Durchführung
          vorvertraglicher Maßnahmen erforderlich sind, erfolgt die Verarbeitung Ihrer
          Daten auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO. Für die Erfüllung einer
          rechtlichen Verpflichtung stützt sich die Datenverarbeitung auf Art. 6 Abs. 1
          lit. c DSGVO. Darüber hinaus kann eine Datenverarbeitung auf Basis berechtigter
          Interessen gemäß Art. 6 Abs. 1 lit. f DSGVO erfolgen. Die spezifischen
          Rechtsgrundlagen im Einzelfall werden in den folgenden Abschnitten dieser
          Datenschutzerklärung jeweils erläutert.
        </p>

        <h3>7. Datenweitergabe an unsichere Drittstaaten und nicht DPF-zertifizierte US-Unternehmen</h3>
        <p>
          Falls auf dieser Website Tools von Unternehmen eingesetzt werden, die ihren
          Sitz in datenschutzrechtlich unsicheren Drittstaaten haben, oder US-Tools
          verwendet werden, deren Anbieter nicht nach dem EU-US Data Privacy Framework
          (DPF) zertifiziert sind, können Ihre personenbezogenen Daten in diese Staaten
          übertragen und dort verarbeitet werden. Es wird darauf hingewiesen, dass in
          datenschutzrechtlich unsicheren Drittstaaten kein Datenschutzniveau
          gewährleistet werden kann, das dem der EU entspricht. Für die USA als
          unsicheren Drittstaat wird grundsätzlich kein mit der EU vergleichbares
          Datenschutzniveau garantiert. Eine Datenübertragung in die USA ist daher nur
          dann zulässig, wenn der Empfänger entweder eine Zertifizierung unter dem
          „EU-US Data Privacy Framework" (DPF) besitzt oder über geeignete zusätzliche
          Garantien verfügt. Ausführliche Informationen zur möglichen Übermittlungen
          an Drittstaaten einschließlich der Datenempfänger finden Sie in dieser
          Datenschutzerklärung.
        </p>

        <h3>8. Speicherdauer</h3>
        <p>
          Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer
          genannt wurde, verbleiben personenbezogene Daten beim Verantwortlichen, bis
          der Zweck für die Datenverarbeitung entfällt. Wenn ein berechtigtes
          Löschersuchen geltend gemacht wird oder eine Einwilligung zur Datenverarbeitung
          widerrufen wird, werden die betreffenden Daten gelöscht, sofern keine anderen
          rechtlich zulässigen Gründe für die Speicherung der personenbezogenen Daten
          vorliegen (z. B. steuer- oder handelsrechtliche Aufbewahrungsfristen). In
          diesen Fällen erfolgt die Löschung nach Fortfall dieser Gründe.
        </p>
        <p>
          Der Verantwortliche speichert personenbezogene Daten nur so lange, wie es zur
          Erfüllung der jeweiligen Zwecke erforderlich ist, für die die Daten erhoben
          wurden. Hierzu zählen insbesondere die Erfüllung vertraglicher Verpflichtungen,
          die Einhaltung gesetzlicher Aufbewahrungsfristen sowie die Wahrung berechtigter
          Interessen des Verantwortlichen, wie z. B. IT-Sicherheit und Schutz vor
          Missbrauch. Sollte die Verarbeitung personenbezogener Daten auf einer
          Einwilligung beruhen, erfolgt die Speicherung bis zum Widerruf dieser
          Einwilligung durch die betroffene Person. Ein solcher Widerruf ist jederzeit
          mit Wirkung für die Zukunft möglich. Danach werden die Daten unverzüglich
          gelöscht, es sei denn, es liegen gesetzliche Aufbewahrungspflichten oder
          andere vorrangige rechtliche Gründe vor, die eine weitere Speicherung
          erforderlich machen.
        </p>
        <p>
          Zusammenfassend werden personenbezogene Daten nach Erfüllung des Zwecks oder
          Wegfall der rechtlichen Grundlage für die Speicherung gelöscht, es sei denn,
          es bestehen weiterhin rechtliche Verpflichtungen oder berechtigte Interessen,
          die eine weitere Speicherung rechtfertigen.
        </p>

        <h3>9. Sicherheitsmaßnahmen und Datenminimierung</h3>
        <p>
          Es werden umfassende technische und organisatorische Maßnahmen ergriffen, um
          Ihre personenbezogenen Daten wirksam vor zufälliger oder unrechtmäßiger
          Zerstörung, Verlust, Veränderung oder unbefugter Offenlegung bzw. unbefugtem
          Zugriff zu schützen. Dabei wird darauf geachtet, dass ausschließlich die für
          den jeweiligen Zweck unbedingt erforderlichen Daten erhoben und verarbeitet
          werden. Diese Strategie der Datenminimierung trägt dazu bei, das Risiko für
          Missbrauch und unberechtigten Zugriff deutlich zu verringern. Die
          Sicherheitsmaßnahmen werden kontinuierlich an den Stand der Technik angepasst,
          um den Schutz Ihrer Daten dauerhaft auf einem hohen Niveau zu gewährleisten.
        </p>

        <h3>10. SSL/TLS-Verschlüsselung</h3>
        <p>
          Um die Sicherheit Ihrer Daten bei der Übertragung zu schützen, werden dem
          aktuellen Stand der Technik entsprechende Verschlüsselungsverfahren (z. B.
          SSL oder TLS) über HTTPS verwendet. SSL (Secure Socket Layer) bzw. TLS
          (Transport Layer Security) sind Protokolle zur Verschlüsselung von
          Datenübertragungen im Internet. Dadurch wird sichergestellt, dass die
          zwischen Ihrem Browser und dem Server ausgetauschten Daten vor unbefugtem
          Zugriff geschützt sind. Eine verschlüsselte Verbindung erkennen Sie daran,
          dass die Adresszeile des Browsers von "http://" auf "https://" wechselt und
          an dem Schloss-Symbol in Ihrer Browserzeile.
        </p>

        <h3>11. Speicherung von Nutzerinformationen in Log-Files</h3>
        <p>
          Bei jedem Zugriff auf die Website werden automatisch Informationen allgemeiner
          Natur erfasst, die Ihr Browser an den Server übermittelt. Diese Informationen
          werden in sogenannten Log-Files gespeichert und umfassen im Regelfall:
        </p>
        <p>
          a) IP-Adresse des anfragenden Rechners<br />
          b) Datum und Uhrzeit des Zugriffs<br />
          c) Name und URL der abgerufenen Datei<br />
          d) Website, von welcher der Zugriff erfolgt (Referrer-URL)<br />
          e) Verwendeter Browser und User Agent String<br />
          f) Betriebssystem<br />
          g) Name Ihres Access-Providers<br />
          h) HTTP-Statuscode
        </p>
        <p>
          Die Speicherung dieser Daten erfolgt aus Sicherheitsgründen, zur Gewährleistung
          eines reibungslosen Verbindungsaufbaus der Website, zur komfortablen Nutzung
          der Website, zur Auswertung der Systemsicherheit und -stabilität sowie zu
          weiteren administrativen Zwecken. Rechtsgrundlage für die Datenverarbeitung
          ist Art. 6 Abs. 1 lit. f DSGVO. Das berechtigte Interesse ergibt sich aus den
          genannten Zwecken zur Datenerhebung. In keinem Fall werden die erhobenen Daten
          zu dem Zweck verwendet, Rückschlüsse auf Ihre Person zu ziehen. Die
          gespeicherten Daten werden anonymisiert oder gelöscht, sofern keine
          gesetzlichen Aufbewahrungspflichten bestehen.
        </p>

        <h3>12. Nutzung des Kontaktformulars</h3>
        <p>
          Bei Fragen jeglicher Art besteht die Möglichkeit, über ein auf dieser Website
          bereitgestelltes Formular Kontakt mit dem Verantwortlichen aufzunehmen. Um zu
          wissen, von wem die Anfrage stammt und um diese beantworten zu können, ist
          die Angabe folgender Daten erforderlich: Vorname, Nachname, Telefon, E-Mail,
          Name des Pferdes, Rasse, gewünschter Einzugstermin, „Wie habt ihr uns gefunden?".
        </p>
        <p>
          Die Datenverarbeitung zum Zwecke der Kontaktaufnahme mit dem Verantwortlichen
          erfolgt nach Art. 6 Abs. 1 S. 1 lit. a DSGVO auf Grundlage der freiwillig
          erteilten Einwilligung.
        </p>
        <p>
          Die für die Benutzung des Kontaktformulars erhobenen personenbezogenen Daten
          werden nach Erledigung der gestellten Anfrage regelmäßig gelöscht.
        </p>

        <h3>13. Anfragen per E-Mail oder Telefon</h3>
        <p>
          Es besteht die Möglichkeit, Anfragen per E-Mail oder telefonisch an den
          Verantwortlichen zu richten. Die dabei übermittelten personenbezogenen Daten
          (z.B. Name, E-Mail-Adresse, Telefonnummer und die Anfrage selbst) werden vom
          Verantwortlichen ausschließlich zum Zwecke der Bearbeitung der Anfrage und
          etwaiger Anschlussfragen verarbeitet und gespeichert.
        </p>
        <p>
          Die Rechtsgrundlage für diese Datenverarbeitung ist Art. 6 Abs. 1 lit. b
          DSGVO, da die Verarbeitung zur Erfüllung eines Vertrags oder zur Durchführung
          vorvertraglicher Maßnahmen erforderlich ist. Wenn die Verarbeitung nicht auf
          einen Vertrag bezogen ist, erfolgt sie auf Grundlage von Art. 6 Abs. 1 lit. f
          DSGVO, da der Verantwortliche ein berechtigtes Interesse an der Bearbeitung
          und Beantwortung der Anfragen hat.
        </p>

        <h3>14. Untersagung der Zusendung von Werbe-E-Mails</h3>
        <p>
          Die Nutzung der im Impressum veröffentlichten Kontaktdaten zur Übersendung
          von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird
          hiermit untersagt. Jegliche unautorisierte Verwendung der Kontaktdaten für
          Werbezwecke stellt eine Verletzung der Rechte des Betreibers dieser Website
          dar und wird nicht toleriert. Der Betreiber dieser Website behält sich
          ausdrücklich rechtliche Schritte vor, falls es zu Verstößen kommt, insbesondere
          bei der unverlangten Zusendung von Werbeinformationen wie Spam-E-Mails.
        </p>
        <p>
          <strong>Versenden an Bestandskunden ohne Einwilligung</strong>
        </p>
        <p>
          Newsletter werden an Bestandskunden auch ohne deren ausdrückliche Einwilligung
          unter bestimmten Voraussetzungen versendet. Dies ist gemäß Art. 6 Abs. 1 lit. f
          DSGVO zulässig, wenn die folgenden Bedingungen erfüllt sind:
        </p>
        <p>
          a) Bestandskundeneigenschaft: Der Kunde hat im Zusammenhang mit dem Verkauf
          einer Ware oder Dienstleistung seine E-Mail-Adresse hinterlegt.<br />
          b) Direktwerbung für eigene ähnliche Produkte oder Dienstleistungen: Der
          Newsletter enthält nur Werbung für eigene ähnliche Produkte oder Dienstleistungen.<br />
          c) Hinweis auf Widerspruchsrecht: Der Kunde wurde bereits bei der Erhebung der
          E-Mail-Adresse und in jedem Newsletter klar und deutlich darauf hingewiesen,
          dass er der Verwendung seiner E-Mail-Adresse jederzeit widersprechen kann, ohne
          dass hierfür andere als die Übermittlungskosten nach den Basistarifen entstehen.<br />
          d) Kein Widerspruch des Kunden: Der Kunde hat der Verwendung seiner E-Mail-Adresse
          nicht widersprochen.
        </p>
        <p>
          Diese Art des Newsletter-Versands erfolgt auf Grundlage des berechtigten
          Interesses des Verantwortlichen, Bestandskunden über ähnliche Produkte oder
          Dienstleistungen zu informieren und die Geschäftsbeziehung zu pflegen. Die
          Verarbeitung der Daten erfolgt gemäß Art. 6 Abs. 1 lit. f DSGVO. Selbstverständlich
          können Kunden jederzeit der Verwendung ihrer E-Mail-Adresse zu diesem Zweck
          widersprechen. Hierzu reicht eine formlose Mitteilung per E-Mail an den
          Verantwortlichen oder die Nutzung des "Austragen"-Links im jeweiligen Newsletter.
        </p>

        <h3>15. Social Media Plugins</h3>
        <p>
          In diesem Abschnitt werden Sie über die Integration und Nutzung von sozialen
          Medien auf dieser Website informiert. Dies umfasst Details zur Datenverarbeitung
          und Ihren Rechten im Zusammenhang mit der Nutzung von Social Media Plugins
          und deren Funktionen.
        </p>
      </>

  }
};

function LegalModal() {
  const [open, setOpen] = React.useState(null); // null | "impressum" | "datenschutz" | "agb"

  React.useEffect(() => {
    function onOpen(e) {setOpen(e.detail);}
    function onKey(e) {if (e.key === "Escape") setOpen(null);}
    window.addEventListener("legal:open", onOpen);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("legal:open", onOpen);
      window.removeEventListener("keydown", onKey);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [open]);

  if (!open || !LEGAL_CONTENT[open]) return null;
  const { title, eyebrow, body } = LEGAL_CONTENT[open];

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label={title}
      onClick={(e) => {if (e.target === e.currentTarget) setOpen(null);}}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 1000,
        background: "rgba(20, 12, 6, 0.6)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        display: "grid",
        placeItems: "center",
        padding: "48px 24px",
        animation: "legal-fade 200ms ease-out"
      }}>
      
      <div
        style={{
          width: "100%",
          maxWidth: 760,
          maxHeight: "calc(100vh - 96px)",
          background: "var(--paper)",
          color: "var(--ink)",
          display: "flex",
          flexDirection: "column",
          boxShadow: "0 20px 60px rgba(20,12,6,0.4)",
          animation: "legal-rise 240ms cubic-bezier(0.22,1,0.36,1)"
        }}>
        
        {/* Header */}
        <div
          style={{
            padding: "32px 40px 24px",
            borderBottom: "1px solid var(--border-1)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
            gap: 24,
            flexShrink: 0
          }}>
          
          <div>
            <div
              style={{
                fontSize: 10,
                letterSpacing: "0.28em",
                textTransform: "uppercase",
                color: "var(--fg-3)",
                marginBottom: 12,
                fontFamily: "var(--font-sans)"
              }}>
              
              {eyebrow}
            </div>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 300,
                fontSize: 38,
                margin: 0,
                color: "var(--ink)",
                letterSpacing: "-0.02em",
                lineHeight: 1.05
              }}>
              
              {title}
            </h2>
          </div>
          <button
            type="button"
            onClick={() => setOpen(null)}
            aria-label="Schließen"
            style={{
              flexShrink: 0,
              width: 40,
              height: 40,
              border: "1px solid var(--border-2)",
              background: "transparent",
              cursor: "pointer",
              display: "grid",
              placeItems: "center",
              color: "var(--fg-1)",
              transition: "all 200ms"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--ink)";
              e.currentTarget.style.color = "var(--paper)";
              e.currentTarget.style.borderColor = "var(--ink)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "var(--fg-1)";
              e.currentTarget.style.borderColor = "var(--border-2)";
            }}>
            
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <line x1="6" y1="6" x2="18" y2="18" />
              <line x1="18" y1="6" x2="6" y2="18" />
            </svg>
          </button>
        </div>

        {/* Body — scrollable */}
        <div
          className="legal-body"
          style={{
            padding: "32px 40px 40px",
            overflowY: "auto",
            fontFamily: "var(--font-sans)",
            color: "var(--fg-1)",
            fontSize: 15,
            lineHeight: 1.7
          }}>
          
          {body}
        </div>
      </div>
    </div>);

}

// ============================================================
// APP
// ============================================================
function App() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Konzept />
        <Stats />
        <Anlage />
        <Familie />
        <Angebot />
        <Galerie />
        <Testimonials />
        <Kontakt />
      </main>
      <Footer />
      <TweaksPanelHost />
      <LegalModal />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);