Redesign: "Warm Paper" visual system, real logo + webfont, polished pages

- Brand: replace 🌈-emoji placeholder with the real logo in header, hero
  and footer; embed the Apex Brush webfont locally (/public/fonts)
- Design system (global.css): warm paper palette, Fraunces + Hanken Grotesk,
  sticker buttons/cards, squiggle underlines, organic blobs, wave dividers,
  staggered load motion; wrap base/components in @layer so Tailwind
  utilities reliably override (fixes ignored padding/weight overrides)
- Home: new hero showcasing the logo, manifest, three pillars, Momente
  gallery (placeholder photos), stats band, projects, CTA
- New components: PageHeader, Wave, Decor
- Subpages: unified headers (Apex Brush eyebrow + Fraunces H1), blob badges,
  consistent CTA bands and chips; add real .prose styling (no Tailwind
  typography plugin installed)
- Fix datenschutz: font names Pacifico/Inter -> Fraunces/Hanken Grotesk

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/pages/index.astro

@@ -1,164 +1,236 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { getSettings, getFeaturedProjects, getLatestPosts, imageUrl } from "../lib/directus";
+import Wave from "../components/Wave.astro";
+import Decor from "../components/Decor.astro";
+import { getSettings, getFeaturedProjects, imageUrl } from "../lib/directus";
 
 const settings = await getSettings();
 const featuredProjects = await getFeaturedProjects();
-const latestPosts = await getLatestPosts(3);
+
+// --- Platzhalter, damit die Seite auch ohne CMS lebendig wirkt ---
+const stats = {
+  members: settings?.stats_members ?? 120,
+  funded: settings?.stats_funded ?? 14500,
+};
+
+const momente = [
+  { src: "/img/momente/m1.jpg", cap: "Sommerfest",   tone: "var(--color-rb-red)" },
+  { src: "/img/momente/m2.jpg", cap: "Malwerkstatt", tone: "var(--color-rb-orange)" },
+  { src: "/img/momente/m3.jpg", cap: "Naturtag",     tone: "var(--color-rb-green)" },
+  { src: "/img/momente/m4.jpg", cap: "Freispiel",    tone: "var(--color-rb-cyan)" },
+  { src: "/img/momente/m5.jpg", cap: "Musikstunde",  tone: "var(--color-rb-violet)" },
+  { src: "/img/momente/m6.jpg", cap: "Gartenprojekt",tone: "var(--color-rb-blue)" },
+];
+
+const fallbackProjects = [
+  { title: "Theaterwoche für alle Gruppen", slug: "#", date: "Frühjahr 2026", img: "/img/momente/m5.jpg", chip: "Kultur", summary: "Eine Woche Bühne, Kostüme und Mut — ein Theaterpädagoge zu Gast in der Kita." },
+  { title: "Naschgarten im Hof", slug: "#", date: "Laufend", img: "/img/momente/m6.jpg", chip: "Natur", summary: "Hochbeete, Beeren und Kräuter. Die Kinder säen, pflegen und ernten selbst." },
+  { title: "Inklusions-Ausflüge", slug: "#", date: "Ganzjährig", img: "/img/momente/m3.jpg", chip: "Teilhabe", summary: "Damit wirklich jedes Kind mitkommt — wir übernehmen Eintritt und Fahrt." },
+];
+const projectsToShow = featuredProjects.length > 0 ? null : fallbackProjects;
 ---
 
 <Layout
   title="Mehr als Kita. Mehr als genug."
   description="Der Kitafreunde Regenbogen e.V. ist der Förderverein der Integrationskita Regenbogen in Berlin-Tegel. Für das Besondere. Für alle Kinder."
 >
-  <!-- Hero -->
-  <section class="relative overflow-hidden bg-gradient-to-br from-[var(--color-surface-alt)] to-white">
-    <div class="section py-24 md:py-32 text-center">
-      <p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-4">
-        Berlin-Tegel · Integrationskita Regenbogen
-      </p>
-      <h1 class="font-brand text-5xl md:text-7xl text-[var(--color-text)] mb-6 leading-tight">
-        Mehr als Kita.<br>
-        <span class="rainbow-text">Mehr als genug.</span>
-      </h1>
-      <p class="text-xl text-[var(--color-text-muted)] max-w-2xl mx-auto mb-10 leading-relaxed">
-        Wir schaffen die Momente, die Kinder ihr Leben lang mit sich tragen —
-        Kulturprojekte, Naturerfahrungen, Gemeinschaft. Und dafür, dass kein Kind
-        außen vor bleibt.
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="/mitglied-werden" class="btn-primary text-base">Jetzt Mitglied werden</a>
-        <a href="/was-wir-tun" class="btn-secondary text-base">Was wir tun</a>
+  <!-- ===================== HERO ===================== -->
+  <section class="relative overflow-hidden">
+    <!-- schwebende Deko -->
+    <Decor type="sparkle" class="w-10 absolute top-24 left-[6%] anim-float opacity-80" />
+    <Decor type="cloud"   class="w-24 absolute top-16 right-[10%] anim-float-slow opacity-80" />
+    <Decor type="loop"    class="w-28 absolute bottom-24 left-[4%] opacity-60 anim-wiggle" />
+
+    <div class="section grid lg:grid-cols-2 gap-12 items-center pt-14 pb-24 md:pt-20">
+      <!-- Text -->
+      <div class="text-center lg:text-left">
+        <p class="eyebrow reveal d1">Berlin-Tegel · seit 2019</p>
+        <h1 class="reveal d2 mt-3 text-[clamp(2.6rem,7vw,4.7rem)] text-[var(--color-text)] font-black leading-[0.98]">
+          Mehr als Kita.<br>
+          <span class="squiggle rainbow-text">Mehr als genug.</span>
+        </h1>
+        <p class="reveal d3 mt-6 text-lg md:text-xl text-[var(--color-text-muted)] max-w-xl mx-auto lg:mx-0 leading-relaxed">
+          Wir schaffen die Momente, die Kinder ihr Leben lang mit sich tragen —
+          Kultur, Natur, Gemeinschaft. Und dafür, dass <strong class="text-[var(--color-text)] font-semibold">kein Kind außen vor bleibt</strong>.
+        </p>
+        <div class="reveal d4 mt-9 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
+          <a href="/mitglied-werden" class="btn-primary text-base"><span aria-hidden="true">♥</span> Jetzt Mitglied werden</a>
+          <a href="/was-wir-tun" class="btn-secondary text-base">Was wir tun</a>
+        </div>
+        <div class="reveal d5 mt-7 flex flex-wrap gap-x-6 gap-y-2 justify-center lg:justify-start text-sm text-[var(--color-text-muted)]">
+          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Ab 1 € im Monat</span>
+          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Steuerlich absetzbar</span>
+          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Kein Ehrenamt nötig</span>
+        </div>
+      </div>
+
+      <!-- Logo-Bühne -->
+      <div class="reveal d3 relative mx-auto w-full max-w-md aspect-square">
+        <!-- weicher Farb-Halo -->
+        <div class="absolute inset-6 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-white/70 backdrop-blur-sm shadow-[0_40px_80px_-30px_rgba(42,36,51,0.4)]"></div>
+        <div class="absolute inset-0 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-gradient-to-br from-[var(--color-accent-light)] via-transparent to-[rgba(0,174,239,0.15)]"></div>
+        <Decor type="sun"     class="w-28 absolute -top-2 -right-2 anim-spin-slow" />
+        <Decor type="rainbow" class="w-32 absolute bottom-4 -left-4 opacity-90 anim-float" />
+        <Decor type="sparkle" class="w-8 absolute top-10 left-6 anim-wiggle" />
+        <!-- DAS Logo, groß und schön -->
+        <img src="/logo/logo.png" alt="Kitafreunde Regenbogen Logo"
+             class="relative z-10 w-[78%] h-[78%] object-contain mx-auto mt-[11%] drop-shadow-[0_18px_30px_rgba(42,36,51,0.18)] anim-float" />
       </div>
     </div>
-    <!-- Decorative rainbow -->
-    <div class="rainbow-bar absolute bottom-0 left-0 right-0"></div>
+
+    <Wave color="var(--color-paper-2)" />
   </section>
 
-  <!-- Drei-Sätze -->
-  <section class="section-sm text-center">
-    <p class="text-2xl md:text-3xl font-semibold text-[var(--color-text)] max-w-3xl mx-auto leading-snug">
-      Die Kita stellt die Grundversorgung sicher. Das Land zahlt das Nötige.
-      <span class="text-[var(--color-primary)]">Wir bezahlen das Besondere.</span>
-    </p>
+  <!-- ===================== MANIFEST ===================== -->
+  <section class="bg-[var(--color-paper-2)]">
+    <div class="section-sm text-center max-w-3xl">
+      <Decor type="heart" class="w-12 mx-auto mb-5 anim-float" />
+      <p class="font-display text-2xl md:text-4xl font-semibold text-[var(--color-text)] leading-snug">
+        Die Kita sichert die Grundversorgung. Das Land zahlt das Nötige.
+        <span class="squiggle text-[var(--color-primary)]">Wir bezahlen das Besondere.</span>
+      </p>
+    </div>
   </section>
+  <Wave color="var(--color-paper)" flip={true} />
 
-  <!-- Drei Säulen -->
+  <!-- ===================== DREI SÄULEN ===================== -->
   <section class="section">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div class="text-center mb-12">
+      <p class="eyebrow">Wofür wir da sind</p>
+      <h2 class="mt-2 text-4xl md:text-5xl font-bold">Drei Versprechen.</h2>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
       {[
-        {
-          icon: "🎭",
-          color: "var(--color-rb-violet)",
-          title: "Erleben",
-          text: "Theater, Musik, Natur, Kunst. Erlebnisse, die keine Lehrplan-Vorgabe anordnet — und die man nicht vergisst.",
-          href: "/was-wir-tun#erleben",
-        },
-        {
-          icon: "🤝",
-          color: "var(--color-rb-green)",
-          title: "Teilhabe",
-          text: "Kein Kind bleibt beim Ausflug zuhause, weil die Familie sich den Beitrag nicht leisten kann. Punkt.",
-          href: "/was-wir-tun#teilhabe",
-        },
-        {
-          icon: "🌍",
-          color: "var(--color-rb-orange)",
-          title: "Gemeinschaft",
-          text: "Eltern, Erzieher*innen, Nachbarschaft, lokale Unternehmen. Der Verein verbindet, wer die Kita trägt.",
-          href: "/was-wir-tun#gemeinschaft",
-        },
-      ].map(({ icon, color, title, text, href }) => (
-        <a href={href} class="card group cursor-pointer">
-          <div class="text-4xl mb-4">{icon}</div>
-          <h3 class="text-xl font-bold mb-2 group-hover:text-[var(--color-primary)] transition-colors"
-            style={`color: ${color}`}>{title}</h3>
-          <p class="text-[var(--color-text-muted)] leading-relaxed text-sm">{text}</p>
-          <p class="mt-4 text-sm font-semibold text-[var(--color-primary)]">Mehr erfahren →</p>
+        { emoji: "🎭", color: "var(--color-rb-violet)", title: "Erleben", text: "Theater, Musik, Natur, Kunst. Erlebnisse, die kein Lehrplan vorschreibt — und die man nie vergisst.", href: "/was-wir-tun#erleben", tilt: "tilt-l" },
+        { emoji: "🤝", color: "var(--color-rb-green)",  title: "Teilhabe", text: "Kein Kind bleibt beim Ausflug zuhause, weil die Familie den Beitrag nicht stemmen kann. Punkt.", href: "/was-wir-tun#teilhabe", tilt: "" },
+        { emoji: "🌍", color: "var(--color-rb-orange)", title: "Gemeinschaft", text: "Eltern, Erzieher*innen, Nachbarschaft, lokale Betriebe. Der Verein verbindet, wer die Kita trägt.", href: "/was-wir-tun#gemeinschaft", tilt: "tilt-r" },
+      ].map(({ emoji, color, title, text, href, tilt }) => (
+        <a href={href} class={`sticker group ${tilt}`}>
+          <div class="blob w-16 h-16 grid place-items-center text-3xl mb-5"
+               style={`background:${color}20; box-shadow: inset 0 0 0 2px ${color}40;`}>
+            <span>{emoji}</span>
+          </div>
+          <h3 class="font-display text-2xl font-bold mb-2 transition-colors" style={`color:${color}`}>{title}</h3>
+          <p class="text-[var(--color-text-muted)] leading-relaxed">{text}</p>
+          <p class="mt-5 text-sm font-semibold text-[var(--color-primary)] group-hover:gap-2 inline-flex items-center gap-1 transition-all">
+            Mehr erfahren <span aria-hidden="true">→</span>
+          </p>
         </a>
       ))}
     </div>
   </section>
 
-  <!-- Zahlen -->
-  {settings && (settings.stats_members || settings.stats_funded) && (
-    <section class="bg-[var(--color-primary)] text-white">
-      <div class="max-w-6xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
-        {settings.stats_members && (
-          <div>
-            <p class="font-brand text-5xl mb-2">{settings.stats_members}</p>
-            <p class="text-white/80">Mitglieder unterstützen den Verein</p>
-          </div>
-        )}
-        {settings.stats_funded && (
-          <div>
-            <p class="font-brand text-5xl mb-2">{settings.stats_funded.toLocaleString("de")} €</p>
-            <p class="text-white/80">geförderte Projekte</p>
-          </div>
-        )}
+  <!-- ===================== MOMENTE (Galerie) ===================== -->
+  <Wave color="var(--color-paper-2)" />
+  <section class="bg-[var(--color-paper-2)]">
+    <div class="section">
+      <div class="flex flex-wrap items-end justify-between gap-4 mb-10">
+        <div>
+          <p class="eyebrow">Aus dem Alltag</p>
+          <h2 class="mt-2 text-4xl md:text-5xl font-bold">Momente, die zählen.</h2>
+        </div>
+        <span class="chip" title="Platzhalterbilder">📷 Beispielbilder</span>
       </div>
-    </section>
-  )}
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-5">
+        {momente.map((m, i) => (
+          <figure class={`photo-frame relative ${i % 3 === 0 ? "tilt-l" : i % 3 === 2 ? "tilt-r" : ""} transition-transform duration-300 hover:rotate-0 hover:-translate-y-1 ${i === 0 || i === 4 ? "md:row-span-2" : ""}`}>
+            <div class={`relative overflow-hidden rounded-[0.6rem] ${i === 0 || i === 4 ? "aspect-[3/4]" : "aspect-[4/3]"}`}>
+              <img src={m.src} alt={m.cap} loading="lazy" style="filter: saturate(0.9) contrast(1.03);" />
+              <!-- Markenfärbung, damit Platzhalter on-brand wirken -->
+              <div class="absolute inset-0" style={`background:${m.tone}; mix-blend-mode: soft-light; opacity:.6;`}></div>
+              <div class="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent"></div>
+            </div>
+            <figcaption class="absolute bottom-3 left-3">
+              <span class="chip" style={`background:${m.tone}; color:#fff;`}>{m.cap}</span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </div>
+  </section>
+  <Wave color="var(--color-paper-3)" />
 
-  <!-- Aktuelle Projekte -->
-  {featuredProjects.length > 0 && (
-    <section class="section">
-      <h2 class="text-3xl font-bold mb-2">Aktuelle Projekte</h2>
-      <p class="text-[var(--color-text-muted)] mb-8">Was wir gerade machen und was geplant ist.</p>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {featuredProjects.map((p: any) => (
-          <a href={`/projekte/${p.slug}`} class="card group">
-            {p.image && (
-              <div class="aspect-video bg-[var(--color-surface-alt)] rounded-xl mb-4 overflow-hidden">
-                <img src={imageUrl(p.image, 600)} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
+  <!-- ===================== ZAHLEN ===================== -->
+  <section class="relative overflow-hidden bg-[var(--color-paper-3)] text-white">
+    <Decor type="sparkle" class="w-12 absolute top-8 right-[12%] opacity-70 anim-wiggle" />
+    <Decor type="sparkle" class="w-7 absolute bottom-10 left-[14%] opacity-60 anim-float" />
+    <div class="max-w-5xl mx-auto px-4 py-20 grid grid-cols-1 sm:grid-cols-3 gap-10 text-center">
+      <div>
+        <p class="font-display text-6xl font-black rainbow-text">{stats.members}</p>
+        <p class="text-white/70 mt-2">Mitglieder tragen den Verein</p>
+      </div>
+      <div>
+        <p class="font-display text-6xl font-black rainbow-text">{stats.funded.toLocaleString("de")}&nbsp;€</p>
+        <p class="text-white/70 mt-2">in Projekte geflossen</p>
+      </div>
+      <div>
+        <p class="font-display text-6xl font-black rainbow-text">100%</p>
+        <p class="text-white/70 mt-2">der Mittel kommen bei den Kindern an</p>
+      </div>
+    </div>
+  </section>
+  <Wave color="var(--color-paper)" />
+
+  <!-- ===================== PROJEKTE ===================== -->
+  <section class="section">
+    <div class="flex flex-wrap items-end justify-between gap-4 mb-10">
+      <div>
+        <p class="eyebrow">Was gerade läuft</p>
+        <h2 class="mt-2 text-4xl md:text-5xl font-bold">Aktuelle Projekte</h2>
+      </div>
+      <a href="/projekte" class="btn-secondary text-sm">Alle Projekte →</a>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
+      {featuredProjects.length > 0
+        ? featuredProjects.map((p: any) => (
+            <a href={`/projekte/${p.slug}`} class="sticker group !p-0 overflow-hidden">
+              {p.image && (
+                <div class="aspect-video overflow-hidden">
+                  <img src={imageUrl(p.image, 600)} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                </div>
+              )}
+              <div class="p-6">
+                <p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
+                <h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
+                <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-2">{p.summary}</p>
               </div>
-            )}
-            <p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
-            <h3 class="font-bold text-lg group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
-            <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-2">{p.summary}</p>
-          </a>
-        ))}
-      </div>
-      <div class="mt-8 text-center">
-        <a href="/projekte" class="btn-secondary">Alle Projekte →</a>
-      </div>
-    </section>
-  )}
+            </a>
+          ))
+        : projectsToShow!.map((p) => (
+            <a href={p.slug} class="sticker group !p-0 overflow-hidden">
+              <div class="aspect-video overflow-hidden relative">
+                <img src={p.img} alt={p.title} loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                <span class="chip absolute top-3 left-3 bg-white/90">{p.chip}</span>
+              </div>
+              <div class="p-6">
+                <p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
+                <h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
+                <p class="text-sm text-[var(--color-text-muted)] mt-2">{p.summary}</p>
+              </div>
+            </a>
+          ))}
+    </div>
+  </section>
 
-  <!-- Aktuelles -->
-  {latestPosts.length > 0 && (
-    <section class="section bg-[var(--color-surface-alt)] rounded-3xl">
-      <h2 class="text-3xl font-bold mb-8">Aktuelles</h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {latestPosts.map((post: any) => (
-          <a href={`/aktuelles/${post.slug}`} class="card group">
-            <p class="text-xs text-[var(--color-text-muted)] mb-2">
-              {new Date(post.published_at).toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" })}
-            </p>
-            <h3 class="font-bold leading-snug group-hover:text-[var(--color-primary)] transition-colors">{post.title}</h3>
-            {post.excerpt && <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-3">{post.excerpt}</p>}
-          </a>
-        ))}
+  <!-- ===================== CTA ===================== -->
+  <section class="section">
+    <div class="relative overflow-hidden rounded-[2.5rem] bg-[var(--color-primary)] text-white text-center px-6 py-16 md:py-20">
+      <div class="absolute inset-0 opacity-30 bg-gradient-to-br from-[var(--color-rb-violet)] via-[var(--color-rb-blue)] to-[var(--color-rb-cyan)]"></div>
+      <Decor type="sun"     class="w-24 absolute -top-4 -left-4 opacity-80 anim-spin-slow" />
+      <Decor type="rainbow" class="w-28 absolute -bottom-2 right-6 opacity-90 anim-float" />
+      <div class="relative max-w-2xl mx-auto">
+        <p class="eyebrow !text-[var(--color-rb-yellow)]">Schon ab 1 € im Monat</p>
+        <h2 class="mt-3 text-4xl md:text-6xl font-black">Werde Kitafreund*in.</h2>
+        <p class="mt-5 text-lg text-white/85">
+          Kein Aufwand. Kein verpflichtendes Ehrenamt.<br class="hidden sm:block">
+          Nur Kinder, die mehr bekommen.
+        </p>
+        <a href="/mitglied-werden" class="btn-primary text-lg mt-9 !bg-white !text-[var(--color-primary)] !shadow-[0_6px_0_0_rgba(0,0,0,0.25)]">
+          <span aria-hidden="true">♥</span> Jetzt Mitglied werden
+        </a>
+        <p class="text-sm text-white/70 mt-4">Gemeinnützig anerkannt · Beiträge steuerlich absetzbar</p>
       </div>
-      <div class="mt-8">
-        <a href="/aktuelles" class="btn-secondary">Alle Beiträge →</a>
-      </div>
-    </section>
-  )}
-
-  <!-- CTA -->
-  <section class="section text-center">
-    <div class="max-w-2xl mx-auto">
-      <div class="rainbow-bar w-24 mx-auto mb-8 rounded-full" style="height: 4px;"></div>
-      <h2 class="font-brand text-4xl md:text-5xl text-[var(--color-text)] mb-4">Ab 1 € im Monat.</h2>
-      <p class="text-lg text-[var(--color-text-muted)] mb-8">
-        Kein Aufwand. Kein Ehrenamt verpflichtend.<br>
-        Nur Kinder, die mehr bekommen.
-      </p>
-      <a href="/mitglied-werden" class="btn-primary text-lg px-8 py-4">Jetzt Mitglied werden</a>
-      <p class="text-sm text-[var(--color-text-muted)] mt-4">
-        Gemeinnützig anerkannt · Beiträge steuerlich absetzbar
-      </p>
     </div>
   </section>
 </Layout>