// Sections for Teichträume. Exports all to window. const LOGO_SRC = "assets/logo.svg"; // --- Small primitives ------------------------------------------------------- function SectionLabel({ num, children }) { return (
{num} {children}
); } function Rule({ dark = false }) { return
; } function useReveal() { React.useEffect(() => { const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); }); }, { rootMargin: "-10% 0px -10% 0px", threshold: 0.01 } ); document.querySelectorAll(".reveal").forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // Simple koi illustration (SVG) used for hero swim + accents function KoiSilhouette({ size = 120, color = "#b9121b", rotate = 0, style = {} }) { return ( {/* body */} {/* tail */} {/* top fin */} {/* bottom fin */} {/* dapple spots (black like the logo's koi) */} ); } // --- NAV -------------------------------------------------------------------- function Nav() { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", on, { passive: true }); on(); return () => window.removeEventListener("scroll", on); }, []); React.useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; }, [menuOpen]); const links = [ ["Start", "#hero"], ["Leidenschaft", "#about"], ["Leistungen", "#services"], ["Zubehör", "#zubehoer"], ["Projekte", "#gallery"], ["Kontakt", "#contact"], ]; return ( <>
Teichträume
Teichträume · Koi · seit 2022
{links.map(([t, h]) => ( setMenuOpen(false)}>{t} ))}
Instagram · @teichtraeume info@teichtraeume.de +49 176 21925412 Impressum
); } // --- HERO ------------------------------------------------------------------- function Hero({ heroImage, showKoi = true }) { // Full-bleed koi pond hero, editorial type overlay. return (
{/* Dark gradient */}
{/* subtle caustics overlay */}
{/* top meta row */}
N 50°42'43" · E 6°23'14" Hürtgenwald · NRW Edition MMXXVI
{/* Big title */}
— Teichträume · Hürtgenwald

Spezialisiert
auf Koi.

Seit 2022 planen und pflegen wir Koiteiche, die mehr sind als Wasserbecken — lebende Landschaften, maßgeschneidert für Ihre Fische und Ihren Garten.

Scrollen
↓
); } // --- Swimming koi canvas over hero ----------------------------------------- function SwimmingKoi() { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; let raf; const fish = Array.from(el.querySelectorAll(".koi-fish")); const data = fish.map((f, i) => ({ el: f, t: Math.random() * 10, speed: 0.18 + i * 0.07, yBase: parseFloat(f.dataset.y), amp: 4 + i * 2, dir: i % 2 === 0 ? 1 : -1, x0: i % 2 === 0 ? -20 : 120, })); function tick() { data.forEach((d) => { d.t += 0.004 * d.speed * 6; const prog = (d.t % 1); const x = d.dir === 1 ? d.x0 + prog * 140 : d.x0 - prog * 140; const y = d.yBase + Math.sin(d.t * 2.2) * d.amp; const rot = Math.sin(d.t * 2.2) * 8 * (d.dir === 1 ? 1 : -1); const flip = d.dir === 1 ? 1 : -1; d.el.style.transform = `translate(${x}vw, ${y}vh) rotate(${rot}deg) scaleX(${flip})`; }); raf = requestAnimationFrame(tick); } tick(); return () => cancelAnimationFrame(raf); }, []); return (
); } // --- MARQUEE --------------------------------------------------------------- function Marquee() { const items = ["Planung", "Pflege", "Filtertechnik", "Beratung", "Winterfest", "Wasserwerte", "Belüftung", "Zubehör"]; const row = [...items, ...items, ...items]; return (
{row.map((t, i) => ( {t} ))}
); } // --- ABOUT ----------------------------------------------------------------- function About() { return (
Über Teichträume

Ein Koiteich ist kein Produkt. Er ist eine Beziehung — zwischen Ihnen, dem Wasser und den Tieren, die darin leben.

Gegründet von Tim Afflerbach in Hürtgenwald. Aus einer Kindheitsbegeisterung für Nishikigoi wurde ein Handwerk — und aus dem Handwerk ein Versprechen an jeden Teich, den wir planen.

Wir arbeiten mit ausgewählten Partnern für Filter­technik, Folien und Koi-Importe. Kein Katalog­denken: jede Anlage entsteht für den jeweiligen Ort, die jeweiligen Fische, die jeweiligen Menschen.

Koi werden von Hand gefüttert
Fig. 01 — Fütterung von Hand 2024
{/* Stats */}
{[ ["2022", "Gegründet"], ["20+", "Realisierte Teiche"], ["04", "Handverlesene Partner"], ["∞", "Geduld mit Wasser"], ].map(([n, l], i) => (
{n}
{l}
))}
); } // --- SERVICES --------------------------------------------------------------- function Services() { const services = [ { num: "I", title: "Planung", kicker: "Entwurf & Beratung", body: "Standortanalyse, Statik, Wasserführung, Koi-Besatz. Wir beginnen mit einem Ortstermin und einer ehrlichen Einschätzung — auch wenn sie Ihnen von Ihrem Wunsch abrät.", points: ["Ortstermin & Analyse", "Zeichnungen & 3D-Schnitte", "Material- und Kostenplan"], img: "assets/hero.jpeg", }, { num: "II", title: "Pflege", kicker: "Wartung & Bestandsteiche", body: "Monatliche, quartalsweise oder saisonale Betreuung. Wasserwerte, Filtermedien und Winterfestmachen. Auch als Service für Bestandsteiche.", points: ["Wasserwerte & Protokoll", "Filterreinigung", "Saisonale Betreuung"], img: "assets/image3.jpeg", }, ]; const [active, setActive] = React.useState(0); return (
Planung & Pflege
{services.map((s, i) => ( ))}
{services.map((s, i) => ( {s.title} ))}
{String(active + 1).padStart(2, "0")} / {String(services.length).padStart(2, "0")}
{services[active].title}

{services[active].body}

    {services[active].points.map((p) => (
  • {p}
    • ))}
); } // --- ZUBEHÖR ---------------------------------------------------------------- function ZubehoerGlyph({ kind }) { // Editorial SVG diagrams — technical, on-theme, no AI-slop illustrations. const stroke = "var(--ink)"; const accent = "var(--koi)"; const common = { width: "100%", height: "100%", viewBox: "0 0 300 220", preserveAspectRatio: "xMidYMid meet" }; if (kind === "filter") return ( {/* Trommelfilter schematic */} INLET OUTLET ); if (kind === "pump") return ( {/* Impeller */} {[0,60,120,180,240,300].map(a => ( ))} Q = m³/h ); if (kind === "aer") return ( {/* Belüftung — Ausströmer mit Blasen */} {[...Array(14)].map((_, i) => { const x = 90 + (i % 7) * 20; const y = 110 - Math.floor(i / 7) * 36; const r = 3 + (i % 3); return ; })} ); if (kind === "water") return ( {/* Teststreifen / pH */} {[0,1,2,3,4].map(i => ( ))} pH KH NO₂ NO₃ O₂ ); if (kind === "food") return ( {/* Schale mit Koifutter-Pellets */} {[ [120, 102, 4], [140, 100, 5], [160, 104, 4], [180, 98, 5], [200, 104, 4], [130, 112, 5], [150, 114, 4], [170, 110, 5], [190, 112, 4], ].map((p, i) => ) } SOMMER · 3MM ); if (kind === "tools") return ( {/* Kescher */} {/* net pattern */} {[-30,-15,0,15,30].map(dx => )} {[-30,-15,0,15,30].map(dy => )} ); return null; } function Zubehoer() { const items = [ { t: "Filtertechnik", c: "Trommelfilter · Biokammern · UV-C", k: "filter", img: "assets/filter-whatsapp.jpeg" }, { t: "Pumpen", c: "Energiesparend · Frostgeschützt", k: "pump", img: "assets/pump-whatsapp.jpeg" }, { t: "Belüftung", c: "Membrankompressoren · Ausströmer", k: "aer", img: "assets/aeration-whatsapp.jpeg" }, { t: "Wasseraufbereitung",c: "Mineralien · Bakterien · Teststreifen", k: "water" }, { t: "Futter", c: "Saison- & Aufzuchtfutter", k: "food", img: "assets/feeding-whatsapp.jpeg" }, { t: "Werkzeug & Kescher",c: "Koi-gerecht, schonend", k: "tools", img: "assets/tools-whatsapp.jpeg" }, ]; return (
Aus der eigenen Praxis

Die Technik verschwindet —
das Wasser bleibt.

Wir führen nur Produkte, die wir selbst an unseren Anlagen betreiben und aus Erfahrung empfehlen können. Für Beratung und Verkauf besuchen Sie uns gern persönlich in Hürtgenwald.

{items.map((it, i) => (
{String(i + 1).padStart(2, "0")} Art.
{it.img ? ( {it.t} ) : ( )}

{it.t}

{it.c}

))}
); } // --- GALLERY --------------------------------------------------------------- function Gallery() { const shots = [ { cap: "Koi im Teich", meta: "Hero-Motiv", img: "assets/hero-whatsapp.jpeg", big: true }, { cap: "Filtertechnik", meta: "Filterbox mit Bürsten", img: "assets/filter-whatsapp.jpeg" }, { cap: "Pumpe", meta: "Oase AquaMax Eco", img: "assets/pump-whatsapp.jpeg" }, { cap: "Fütterung von Hand", meta: "Handzahme Koi", img: "assets/feeding-whatsapp.jpeg", big: true }, { cap: "Belüftung", meta: "FujiMAC Air Pump", img: "assets/aeration-whatsapp.jpeg" }, { cap: "Werkzeug & Kescher", meta: "Koi Net Maker", img: "assets/tools-whatsapp.jpeg" }, ]; return ( ); } // --- INSTAGRAM ------------------------------------------------------------- // --- CONTACT --------------------------------------------------------------- function Contact() { return (
Ins Gespräch kommen

Schreiben Sie uns —
der Teich wartet.

{[ ["E-Mail", "info@teichtraeume.de", "mailto:info@teichtraeume.de"], ["WhatsApp", "+49 176 21925412", "https://wa.me/4917621925412"], ["Instagram", "@teichtraeume", "https://instagram.com/teichtraeume"], ].map(([k, v, h], i) => ( {k} {v} ↗ ))}
); } // --- FOOTER ----------------------------------------------------------------- function Footer() { return ( ); } Object.assign(window, { Nav, Hero, Marquee, About, Services, Zubehoer, Gallery, Contact, Footer, KoiSilhouette, useReveal, });