@@ -75,9 +76,9 @@ const roleLabel: Record = {
{ icon: "đŻ", text: "Wirkung vor Verwaltung â jeder Euro geht an die Kinder, nicht in den Apparat" },
{ icon: "đ€", text: "Gemeinschaft ist kein Ziel, sie ist das Mittel" },
].map(({ icon, text }) => (
-
@@ -87,31 +88,39 @@ const roleLabel: Record = {
{team.length > 0 && (
-
- Der Vorstand
-
- Wir sind Eltern. Wir haben Kinder in der Kita. Wir kennen den Unterschied zwischen dem, was ist, und dem, was sein könnte.
-
-
- {team.map((member: any) => (
-
-
- {member.photo
- ?
- : "đ€"}
-
-
{member.name}
-
{roleLabel[member.role] ?? member.role}
- {member.bio &&
{member.bio}
}
+
+
+
+
+
Wer dahintersteckt
+
Der Vorstand
+
+ Wir sind Eltern. Wir haben Kinder in der Kita. Wir kennen den Unterschied zwischen dem, was ist, und dem, was sein könnte.
+
+
+ {team.map((member: any) => (
+
+
+ {member.photo
+ ?
+ : "đ€"}
+
+
{member.name}
+
{roleLabel[member.role] ?? member.role}
+ {member.bio &&
{member.bio}
}
+
+ ))}
- ))}
-
+
+
+
)}
- HĂ€ufige Fragen
+ Gut zu wissen
+ HĂ€ufige Fragen
{[
{
@@ -140,9 +149,15 @@ const roleLabel: Record
= {
-
- Jetzt Mitglied werden
- oder
- Schreib uns
+
+
+
+
Werd Teil davon.
+
Ab 1 ⏠im Monat. Kein Aufwand, groĂe Wirkung.
+
+
UnterstĂŒtzen
-
- Du musst kein Mitglied sein,
- um zu helfen.
-
-
+
+ Du musst kein Mitglied sein,
+ um zu helfen.
+
Einmalspenden, Sachspenden, Projektpatenschaften â jede Form der UnterstĂŒtzung
landet direkt bei den Kindern.
-
-
-
+
+
-
+
diff --git a/src/pages/was-wir-tun.astro b/src/pages/was-wir-tun.astro
index 30f3e72..3763b58 100644
--- a/src/pages/was-wir-tun.astro
+++ b/src/pages/was-wir-tun.astro
@@ -1,30 +1,29 @@
---
import Layout from "../layouts/Layout.astro";
+import PageHeader from "../components/PageHeader.astro";
+import Decor from "../components/Decor.astro";
---
-
- Was wir tun
-
- Nicht das Pflichtprogramm.
- Das Besondere.
-
-
+
+ Nicht das Pflichtprogramm.
+ Das Besondere.
+
Der Staat finanziert die Grundversorgung. Der TrÀger stellt den Rahmen.
Der Förderverein fĂŒllt den Raum, der danach kommt.
-
-
-
+
+
-
-
đ€
-
Teilhabe
+
đ€
+
FĂŒr alle
+
Teilhabe
Manche Familien können sich den Ausflugsbeitrag nicht leisten. Manche können das
KostĂŒm fĂŒrs TheaterstĂŒck nicht kaufen. Manche möchten nicht, dass ihr Kind angefragt
@@ -97,14 +97,15 @@ import Layout from "../layouts/Layout.astro";
-
đ
-
Gemeinschaft
+
đ
+
Zusammen
+
Gemeinschaft
Eine Kita ist stÀrker, wenn das Umfeld sie trÀgt. Der Förderverein baut diese
Verbindung: zwischen Eltern, Erzieher*innen, Nachbarschaft und lokalen Unternehmen.
@@ -137,12 +138,20 @@ import Layout from "../layouts/Layout.astro";
-
- Dabei sein.
- Ab 1 ⏠im Monat. Keine Verpflichtungen.
-
-
Mitglied werden
-
Einmalig spenden
+
+
+
+
+
+
+
Schon ab 1 ⏠im Monat
+
Dabei sein.
+
Keine Verpflichtungen. Nur Kinder, die mehr bekommen.
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 9536d70..ff750da 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,31 +1,50 @@
@import "tailwindcss";
+/* ============================================================
+ Kitafreunde Regenbogen â "Warm Paper" Design System
+ Picture-book warmth · rainbow as punctuation · hand-drawn soul
+ ============================================================ */
+
@theme {
- /* Regenbogen CI â aus dem Logoguide */
- --color-rb-red: #E8192C;
+ /* --- Rainbow CI (exact aus dem Logoguide) --- */
+ --color-rb-red: #E8192C;
--color-rb-orange: #F5820D;
--color-rb-yellow: #F9C80E;
- --color-rb-green: #00A651;
- --color-rb-cyan: #00AEEF;
- --color-rb-blue: #3B4FA8;
+ --color-rb-green: #00A651;
+ --color-rb-cyan: #00AEEF;
+ --color-rb-blue: #3B4FA8;
--color-rb-violet: #6B3FA0;
- --color-primary: #6B3FA0;
- --color-primary-dark: #4D2C78;
- --color-primary-light: #9B6FC8;
- --color-accent: #F5820D;
- --color-accent-light: #FEF3E8;
+ /* --- Brand roles --- */
+ --color-primary: #6B3FA0; /* violet â Marke, Text-Akzente, Links */
+ --color-primary-dark: #4D2C78;
+ --color-primary-light: #9B6FC8;
+ --color-accent: #F5820D; /* orange â Aktionen, WĂ€rme */
+ --color-accent-dark: #D96E00;
+ --color-accent-light: #FDEBD3;
- --color-surface: #FAFAFA;
- --color-surface-alt: #F4EFF9;
- --color-text: #1A1A2E;
- --color-text-muted: #6B7280;
- --color-border: #E5E7EB;
+ /* --- Paper surfaces --- */
+ --color-paper: #FBF4E6; /* warmes Recyclingpapier â Haupt-BG */
+ --color-paper-2: #F4E9D4; /* getönt â alternierende Sektionen */
+ --color-paper-3: #2A2433; /* tiefe Tinten-Sektion */
- --font-brand: "Apex Brush", "Pacifico", cursive;
- --font-body: "Inter", system-ui, sans-serif;
+ /* --- Back-compat Aliase (bestehende Seiten nutzen diese) --- */
+ --color-surface: #FBF4E6;
+ --color-surface-alt: #F4E9D4;
+ --color-text: #2A2433; /* warme Tinte mit Violett-Unterton */
+ --color-text-muted: #6E6679;
+ --color-border: #E7DAC2; /* warmer Papierrand */
+
+ /* --- Typografie --- */
+ --font-brand: "Apex Brush", "Pacifico", cursive; /* Signatur, sparsam */
+ --font-display: "Fraunces", "Georgia", serif; /* Headlines */
+ --font-body: "Hanken Grotesk", system-ui, sans-serif; /* FlieĂtext, UI */
+
+ /* --- Radii: organisch, weich --- */
+ --radius-blob: 42% 58% 63% 37% / 41% 44% 56% 59%;
}
+/* --- Marken-Webfont (lokal eingebettet) --- */
@font-face {
font-family: "Apex Brush";
src: url("/fonts/ApexBrush-Regular.woff2") format("woff2"),
@@ -34,49 +53,224 @@
font-display: swap;
}
+/* ============================================================
+ Base
+ ============================================================ */
+@layer base {
+
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--color-text);
- background: var(--color-surface);
+ background-color: var(--color-paper);
+ /* subtile, warme LichtwÀsche in Regenbogenfarben */
+ background-image:
+ radial-gradient(60rem 40rem at 110% -10%, rgba(245,130,13,0.10), transparent 60%),
+ radial-gradient(50rem 40rem at -10% 0%, rgba(107,63,160,0.10), transparent 55%),
+ radial-gradient(45rem 40rem at 50% 120%, rgba(0,174,239,0.08), transparent 60%);
+ background-attachment: fixed;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
}
-.font-brand { font-family: var(--font-brand); }
+/* Papier-Korn â extrem subtil, ĂŒber allem, ohne Interaktion */
+body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
+ opacity: 0.5;
+ mix-blend-mode: multiply;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
+}
+/* Inhalt liegt ĂŒber dem Korn */
+body > * { position: relative; z-index: 2; }
-.rainbow-bar {
- height: 4px;
- background: linear-gradient(
- to right,
- #E8192C, #F5820D, #F9C80E, #00A651, #00AEEF, #3B4FA8, #6B3FA0
- );
+::selection { background: var(--color-rb-yellow); color: var(--color-text); }
+
+h1, h2, h3, h4 {
+ font-family: var(--font-display);
+ font-weight: 600;
+ font-optical-sizing: auto;
+ letter-spacing: -0.015em;
+ line-height: 1.05;
+ text-wrap: balance;
}
-.rainbow-text {
- background: linear-gradient(135deg, #6B3FA0, #3B4FA8, #00A651);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+a { text-underline-offset: 3px; }
+
+:focus-visible {
+ outline: 3px solid var(--color-accent);
+ outline-offset: 2px;
+ border-radius: 4px;
}
+} /* @layer base */
+
+/* ============================================================
+ Components
+ ============================================================ */
+@layer components {
+
+/* Signatur-Eyebrow im Pinsel-Font */
+.eyebrow {
+ font-family: var(--font-brand);
+ color: var(--color-accent);
+ font-size: 1.35rem;
+ line-height: 1;
+ transform: rotate(-2deg);
+ display: inline-block;
+}
+
+/* Buttons â Sticker-Pillen mit Tiefe */
.btn-primary {
- @apply inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold text-white transition-all duration-200;
- background: var(--color-primary);
+ @apply inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full font-semibold text-white;
+ background: var(--color-accent);
+ box-shadow: 0 6px 0 0 var(--color-accent-dark), 0 14px 24px -10px rgba(217,110,0,0.6);
+ transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
-.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
+.btn-primary:hover {
+ background: #ff8f1f;
+ transform: translateY(-2px);
+ box-shadow: 0 8px 0 0 var(--color-accent-dark), 0 20px 30px -10px rgba(217,110,0,0.6);
+}
+.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--color-accent-dark); }
.btn-secondary {
- @apply inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold transition-all duration-200;
- border: 2px solid var(--color-primary);
+ @apply inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full font-semibold;
color: var(--color-primary);
+ background: #fff;
+ border: 2px solid var(--color-primary);
+ box-shadow: 0 6px 0 0 var(--color-primary);
+ transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
-.btn-secondary:hover { background: var(--color-surface-alt); }
+.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--color-primary); background: #fff; }
+.btn-secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--color-primary); }
-.card {
- @apply rounded-2xl bg-white border p-6 transition-shadow duration-200;
- border-color: var(--color-border);
+/* Sticker-Karte â leicht gekippt, richtet sich beim Hover auf */
+.card,
+.sticker {
+ @apply rounded-3xl bg-white p-6;
+ border: 1px solid var(--color-border);
+ box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -24px rgba(42,36,51,0.35);
+ transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
-.card:hover { box-shadow: 0 8px 30px rgba(107,63,160,0.12); }
+.card:hover,
+.sticker:hover {
+ transform: translateY(-6px) rotate(0deg);
+ box-shadow: 0 28px 50px -24px rgba(42,36,51,0.45);
+}
+.tilt-l { transform: rotate(-1.4deg); }
+.tilt-r { transform: rotate(1.4deg); }
-.section { @apply py-16 px-4 max-w-6xl mx-auto; }
-.section-sm { @apply py-10 px-4 max-w-6xl mx-auto; }
+/* Chip / Badge */
+.chip {
+ @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold;
+ background: var(--color-accent-light);
+ color: var(--color-accent-dark);
+}
+
+/* Regenbogen-Balken */
+.rainbow-bar {
+ height: 6px;
+ background: linear-gradient(90deg,
+ 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));
+}
+
+/* Regenbogen-Text (Verlauf) */
+.rainbow-text {
+ background: linear-gradient(100deg,
+ var(--color-rb-red), var(--color-rb-orange), var(--color-rb-green),
+ var(--color-rb-cyan), var(--color-rb-violet));
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ color: transparent;
+}
+
+/* Hand-gezeichnete Unterstreichung (fĂŒr SchlĂŒsselwörter) */
+.squiggle {
+ position: relative;
+ display: inline-block;
+}
+.squiggle::after {
+ content: "";
+ position: absolute;
+ left: -2%;
+ right: -2%;
+ bottom: -0.12em;
+ height: 0.34em;
+ background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 40 4, 70 16, 100 9 S 165 3, 198 11' fill='none' stroke='%23F5820D' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+.squiggle-violet::after {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 40 4, 70 16, 100 9 S 165 3, 198 11' fill='none' stroke='%236B3FA0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Organischer Blob-Container (Bilder/Badges) */
+.blob { border-radius: var(--radius-blob); }
+
+/* Foto-âKlebeband" Look */
+.photo-frame {
+ background: #fff;
+ padding: 0.6rem;
+ border-radius: 1rem;
+ box-shadow: 0 18px 40px -22px rgba(42,36,51,0.5);
+}
+.photo-frame img { border-radius: 0.6rem; display: block; width: 100%; height: 100%; object-fit: cover; }
+
+/* Sektions-Helfer */
+.section { @apply py-20 px-4 max-w-6xl mx-auto; }
+.section-sm { @apply py-12 px-4 max-w-6xl mx-auto; }
+
+/* FlieĂtext (CMS-Body, lange Texte) â eigener Stil, kein Typography-Plugin nötig */
+.prose { color: var(--color-text-muted); line-height: 1.75; }
+.prose > * + * { margin-top: 1.05em; }
+.prose h2 { font-family: var(--font-display); color: var(--color-text); font-size: 1.6rem; font-weight: 700; margin-top: 1.8em; line-height: 1.2; }
+.prose h3 { font-family: var(--font-display); color: var(--color-text); font-size: 1.25rem; font-weight: 700; margin-top: 1.5em; }
+.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
+.prose a:hover { color: var(--color-primary-dark); }
+.prose strong { color: var(--color-text); font-weight: 700; }
+.prose ul { list-style: disc; padding-left: 1.4em; }
+.prose ol { list-style: decimal; padding-left: 1.4em; }
+.prose li + li { margin-top: 0.4em; }
+.prose blockquote { border-left: 4px solid var(--color-accent); padding-left: 1em; font-style: italic; color: var(--color-text); }
+.prose img { border-radius: 1rem; }
+
+} /* @layer components */
+
+/* ============================================================
+ Motion
+ ============================================================ */
+
+@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
+@keyframes float-slow { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-22px) rotate(3deg) } }
+@keyframes spin-slow { to { transform: rotate(360deg) } }
+@keyframes wiggle { 0%,100%{ transform: rotate(-3deg) } 50%{ transform: rotate(3deg) } }
+@keyframes fade-up { from { opacity:0; transform: translateY(24px) } to { opacity:1; transform: translateY(0) } }
+@keyframes pop-in { 0%{ opacity:0; transform: scale(.8) } 100%{ opacity:1; transform: scale(1) } }
+
+.anim-float { animation: float 6s ease-in-out infinite; }
+.anim-float-slow { animation: float-slow 9s ease-in-out infinite; }
+.anim-spin-slow { animation: spin-slow 26s linear infinite; }
+.anim-wiggle { animation: wiggle 4s ease-in-out infinite; }
+
+/* Auftritt beim Laden, gestaffelt */
+.reveal { opacity: 0; animation: fade-up .7s cubic-bezier(.2,.8,.2,1) forwards; }
+.reveal.d1 { animation-delay: .08s; }
+.reveal.d2 { animation-delay: .18s; }
+.reveal.d3 { animation-delay: .30s; }
+.reveal.d4 { animation-delay: .44s; }
+.reveal.d5 { animation-delay: .58s; }
+
+@media (prefers-reduced-motion: reduce) {
+ *, *::before, *::after {
+ animation-duration: .001ms !important;
+ animation-iteration-count: 1 !important;
+ scroll-behavior: auto !important;
+ transition-duration: .001ms !important;
+ }
+ .reveal { opacity: 1; }
+}