
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>Hier entsteht die neue Website der TT-Akademie Külsheim</title>
<link rel="stylesheet" href="/assets/tta_website/css/tta-schrift.css">
<style>
	:root { --gold:#fdad1f; --petrol:#0b6570; --petrol-dark:#06474f; --paper:#fffdf8; --ink:#102429; --muted:#5e6f72; }
	* { box-sizing:border-box; }
	html, body { margin:0; height:100%; }
	body {
		font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink);
		background:linear-gradient(160deg, var(--petrol) 0%, var(--petrol-dark) 100%);
		display:flex; align-items:center; justify-content:center; padding:24px 16px;
	}
	main {
		background:var(--paper); border-radius:16px; max-width:560px; width:100%;
		padding:40px 32px 28px; text-align:center; border-top:6px solid var(--gold);
		box-shadow:0 20px 50px rgba(0,0,0,.25);
	}
	.logo { max-width:200px; width:60%; height:auto; }
	/* R8: Animation, Platz fest reserviert (kein Layout-Sprung beim Laden) */
	.animation { width:min(260px, 70vw); aspect-ratio:1/1; margin:18px auto 0; }
	.animation svg { display:block; }
	.kicker { margin:10px 0 6px; color:var(--petrol); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; }
	h1 { margin:0 0 14px; font-size:clamp(1.45rem, 4.6vw, 2rem); line-height:1.2; font-weight:900; color:var(--petrol-dark); text-wrap:balance; }
	p { line-height:1.6; margin:0 0 14px; }
	a { color:var(--petrol); }
	footer { margin-top:26px; padding-top:16px; border-top:1px solid #e1e4e6; font-size:.85rem; color:var(--muted); }
	footer a { margin:0 6px; }
</style>
</head>
<body data-tta-baustelle>
<main>
	<img class="logo" src="/assets/tta_website/images/logo-tt-akademie.jpg" alt="TT-Akademie FC Külsheim 1932 e.V. Tischtennis">
	<div class="animation" id="tta-animation" role="img" aria-label="Animation: Website im Aufbau" data-quelle="/assets/tta_website/lottie/tta-baustelle-12715f1f.json"></div>
	<p class="kicker">Bald online</p>
	<h1>Hier entsteht die neue Website der TT-Akademie Külsheim</h1>
	<p>Wir gehen in Kürze online – schaut bald wieder vorbei!</p>
	<p>Fragen? Schreibt uns: <a href="mailto:info@tt-akademie-kuelsheim.de">info@tt-akademie-kuelsheim.de</a></p>
	<footer>
		<div>TT-Akademie · FC Külsheim 1932 e.V. · Tischtennis</div>
		<div style="margin-top:6px">
			<a href="https://fckuelsheim.de/verein/impressum/" rel="noopener">Impressum</a>·
			<a href="https://fckuelsheim.de/verein/datenschutz/" rel="noopener">Datenschutz</a>
		</div>
	</footer>
</main>
<script src="/assets/tta_website/js/lottie-light-5.12.2.min.js" defer></script>
<script>
	// R8: Lottie abspielen; bei prefers-reduced-motion nur ein Standbild.
	window.addEventListener("DOMContentLoaded", function () {
		var ziel = document.getElementById("tta-animation");
		if (!ziel || !window.lottie) return;
		var ruhig = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
		var anim = window.lottie.loadAnimation({
			container: ziel, renderer: "svg", loop: !ruhig, autoplay: !ruhig,
			path: ziel.getAttribute("data-quelle"),
			rendererSettings: { preserveAspectRatio: "xMidYMid meet", progressiveLoad: true }
		});
		if (ruhig) anim.addEventListener("DOMLoaded", function () { anim.goToAndStop(170, true); });
	});
</script>
</body>
</html>