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/projekte/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import PageHeader from "../../components/PageHeader.astro";
 import { getAllProjects, imageUrl } from "../../lib/directus";
 
 const projects = await getAllProjects();
@@ -20,17 +21,15 @@ const statusColor: Record<string, string> = {
   title="Projekte"
   description="Aktuelle und vergangene Projekte des Kitafreunde Regenbogen e.V.: Theater, Natur, Musik, Ausflüge — für alle Kinder der Integrationskita Regenbogen Berlin."
 >
-  <section class="section pt-16 pb-0">
-    <p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-3">Projekte</p>
-    <h1 class="font-brand text-5xl text-[var(--color-text)] mb-4">Was wir schon gemacht haben.<br><span class="rainbow-text">Was als nächstes kommt.</span></h1>
-    <p class="text-xl text-[var(--color-text-muted)] max-w-2xl leading-relaxed">
+  <PageHeader eyebrow="Projekte">
+    Was wir schon gemacht haben.<br><span class="squiggle rainbow-text">Was als nächstes kommt.</span>
+    <Fragment slot="lead">
       Jedes Projekt erzählt, warum der Verein existiert. Konkret, sichtbar, für alle.
-    </p>
-  </section>
-  <div class="rainbow-bar max-w-6xl mx-auto px-4 my-10"></div>
+    </Fragment>
+  </PageHeader>
 
   {projects.length === 0 ? (
-    <section class="section pt-0">
+    <section class="section pt-6">
       <div class="card text-center py-16 bg-[var(--color-surface-alt)]">
         <p class="text-4xl mb-4">🚀</p>
         <h2 class="text-xl font-bold mb-2">Projekte folgen</h2>