über-uns: Abschnitt "Unsere Kita" — Werte-Akrostichon + Haus-Credo

Aus dem Kita-Leitbild (EJF-Video): das KITA-REGENBOGEN-Akrostichon (14 Werte mit
Regenbogen-Initialen) und das Credo "Wie muss ein Haus sein, in dem Kinder groß
werden?" mit den sechs Leitsätzen. Klar als Worte der Kita gekennzeichnet.

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

src/pages/ueber-uns.astro

@@ -13,6 +13,25 @@ const roleLabel: Record<string, string> = {
   treasurer: "Kassenwart/in",
   board: "Beisitz",
 };
+
+// Werte-Akrostichon der Kita Regenbogen (aus dem Kita-Leitbild)
+const kitaAkrostichon = [
+  "Kreativ", "Individuell", "Transparent", "Authentisch",
+  "Ressourcenorientiert", "Energiegeladen", "Großzügig", "Engagiert",
+  "Neugierig", "Bedürfnisorientiert", "Offen", "Gelassen", "Einfühlsam", "Nachhaltig",
+];
+const rbCycle = [
+  "var(--color-rb-red)", "var(--color-rb-orange)", "var(--color-rb-yellow)",
+  "var(--color-rb-green)", "var(--color-rb-cyan)", "var(--color-rb-blue)", "var(--color-rb-violet)",
+];
+const kitaHaus = [
+  "Voller Respekt und Wertschätzung",
+  "mit Platz für Individualität",
+  "mit Ritualen, die Orientierung bieten",
+  "mit Freiraum für eigene Ideen und Gedanken",
+  "mit der Möglichkeit, Fehler zu machen",
+  "mit viel Zeit zum Spielen",
+];
 ---
 
 <Layout
@@ -85,6 +104,52 @@ const roleLabel: Record<string, string> = {
     </div>
   </section>
 
+  <!-- Unsere Kita -->
+  <Wave color="var(--color-paper-2)" />
+  <section class="bg-[var(--color-paper-2)]">
+    <div class="section">
+      <div class="max-w-3xl mb-12">
+        <p class="eyebrow">Unsere Kita</p>
+        <h2 class="mt-2 text-3xl md:text-4xl font-bold">Wofür die Kita steht.</h2>
+        <p class="mt-4 text-[var(--color-text-muted)] leading-relaxed">
+          Die bewegungsfreundliche Kita „Regenbogen" (Träger: EJF) in Berlin-Heiligensee — in ihren eigenen Worten.
+        </p>
+      </div>
+
+      <div class="grid md:grid-cols-2 gap-7 items-start">
+        <!-- Credo -->
+        <div class="sticker tilt-l">
+          <Decor type="heart" class="w-10 mb-4 anim-float" />
+          <p class="font-display text-xl md:text-2xl font-semibold text-[var(--color-text)] mb-5 leading-snug">
+            „Wie muss ein Haus sein, in dem Kinder groß werden?"
+          </p>
+          <ul class="space-y-3">
+            {kitaHaus.map((item) => (
+              <li class="flex gap-3 items-start">
+                <span class="text-[var(--color-rb-green)] font-bold mt-0.5">✓</span>
+                <span class="text-[var(--color-text)] leading-relaxed">{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <!-- Akrostichon -->
+        <div class="sticker">
+          <p class="eyebrow !text-[var(--color-rb-violet)] mb-4">Kita Regenbogen</p>
+          <ul class="space-y-1.5">
+            {kitaAkrostichon.map((word, i) => (
+              <li class:list={["flex items-baseline gap-3", i === 3 && "mb-3"]}>
+                <span class="font-display font-black text-2xl md:text-3xl leading-none w-7 shrink-0 text-center" style={`color:${rbCycle[i % 7]}`}>{word.charAt(0)}</span>
+                <span class="text-[var(--color-text)] text-lg">{word.slice(1)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+  <Wave color="var(--color-paper)" flip={true} />
+
   <!-- Team -->
   {team.length > 0 && (
     <Fragment>