# Bauplan: Kita, Schule, Bildungsträger: offen und verlässlich

Rezept `kita-schule-bildungstraeger` · Kita / Krippe und Kindergarten / Kita-Träger mit mehreren Häusern / Hort und Familienzentrum / freie Schule und Ganztag (auch Volkshochschule und Familienbildung als Variante) · Stimmung: offen, verlässlich, warm, geerdet · Stand 02.11.2026

Eltern suchen zuerst drei Dinge: Gibt es einen Platz, was kostet es, wie melde ich an. Deshalb steht direkt unter dem Hero der Aushang „Plätze frei ab“ je Haus, ehrlich auch mit Warteliste, und der Anmeldeweg (Kita-Portal der Kommune oder eigene Voranmeldung). Danach Häuser, Konzept in Alltagssprache, ein Tag bei uns mit Uhrzeiten, Eingewöhnung, Essen mit Allergenen, Beiträge nach Satzung, Team, Termine und Stellen. Fraunces weich für Überschriften, Literata als ruhige Lesestimme. Kreidepapier, Tafelgrün und Himmelblau, Mohnrot nur für „Platz anfragen“. Signatur: der Aushang. Speiseplan, Schließtage und Elternbriefe hängen als Bögen mit Klebeband im Druck zweier Farben auf Papier, genau wie am Brett im Flur. Kinderfotos nur mit Einwilligung, sonst Räume, Hände, Material. Abgrenzung: Musikschule und Nachhilfe bleiben Variante von kurs-coaching-lernweg.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `kita-schule-bildungstraeger`) und https://cecodesign.de/lab/fundus/rezepte/kita-schule-bildungstraeger/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `fraunces` · Text: `literata`
- Größen: h1 Fraunces clamp(2.25rem, 1.3rem + 4vw, 4.25rem), opsz 96, SOFT 100, wght 500, Laufweite -0.015em, Zeilenhöhe 1.04; Kapitel-H2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem) in Fraunces; H3 und Gebrauchsüberschriften Literata 600, 1.25rem. Fließtext Literata 1.0625rem (17 px), wght 400, Zeilenhöhe 1.62, höchstens 64ch. Zeiten, Beiträge und Speiseplan Literata mit Tabellenziffern. Aushang-Druck in Fraunces 600 und Literata. Knöpfe Literata 600, 1rem.
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Silbentrennung für deutsche Komposita](https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/demo) `silbentrennung-komposita`

## Farbe

Hell und geerdet wie ein Flur mit Garderobe: Kreidepapier als Grund, Himmelblau als ruhige Fläche für Häuser, Zeiten und Beiträge, Tafelgrün für Aushang-Druck, Kapitel und Fuß. Mohnrot nur für „Platz anfragen“ und Anrufen. Sonnengelb nur als Klebeband und Druckfläche im Aushang, nie als Schrift. Kein Regenbogen, keine Bonbonfarben, keine Wachsmalkreide-Verläufe.

- `--farbe-grund` #F7F2E8 (Grund Kreidepapier)
- `--farbe-text` #1F2A2E (Text (13,2 : 1 auf Grund))
- `--farbe-flaeche` #DDE8EC (Fläche Himmel: Häuser, Zeiten, Beiträge (Text 11,8 : 1))
- `--farbe-dunkel` #24423A (Dunkel Tafelgrün: Aushang-Druck, Kapitel, Footer (Weiß darauf 11,0 : 1, Kreidepapier 9,8 : 1))
- `--farbe-signal` #B23A1C (Signal Mohn: Platz anfragen, Anrufen (Weiß darauf 6,0 : 1; als Schrift auf Grund 5,4 : 1))
- `--farbe-akzent` #F2C14E (Akzent Sonnengelb (nur Klebeband und Druckfläche im Aushang; Text darauf 8,8 : 1; nie als Schrift))
- `--farbe-leise` #5A6164 (Leise: Stand-Daten, Meta (5,7 : 1 auf Grund, 5,1 : 1 auf Himmel))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui
- Dauer: 200 (Hover, Farbe), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 1000 (H1-Zeilen und Hero-Foto einmal), 700 (Seitenwechsel als Blatt über Blatt, zurück 500)
- Regel: Plätze, Beiträge, Zeiten und Speiseplan stehen sofort. Die H1 steigt beim ersten Aufruf zeilenweise aus der Maske, das Hero-Foto öffnet sich per clip-path, danach bewegt sich nur, was Eltern anfassen. Der Aushang hängt still; nur am Desktop wandert ein Streiflicht mit dem Zeiger über die Papierfasern. Seitenwechsel: das neue Blatt schiebt sich über das alte. Bei prefers-reduced-motion steht alles, Seitenwechsel als Überblendung.
- Hinweis: Editorial-langsam nur für H1 und das Hero-Foto beim ersten Aufruf (Zeilenmaske, Bild per clip-path inset). Alles, was Eltern bedienen (Reiter, Akkordeon, Filter, Formular), läuft über das UI-Paar: 300 ms auf, 200 ms zu. Der Aushang bewegt sich nicht von selbst.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.16, 1, 0.3, 1)` (--ease) für H1-Zeilen, Hero-Foto, Seitenwechsel als Blatt; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 200 ms, mittel 300 ms, gross 1000 ms, seitenwechsel 700 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit „Platz anfragen“ und Telefon: ab 0 ms, steht
2. H1 (zwei Zeilen): ab 0/100 ms, 1000 ms, Zeilenmaske translateY 100 % → 0, --ease
3. Hero-Foto im Passepartout: ab 120 ms, 1000 ms, clip-path inset(8% 8% 8% 8%) → inset(0), Bild schon gemalt (LCP, nie über Deckkraft)
4. Aushang „Plätze frei ab“: ab 0 ms, steht (Information)
- Ende nach 1120 ms. Wiederholt: Nur die H1-Zeilen mit halbem Versatz, Foto steht (sessionStorage).

**Scrollen** (höchstens drei Reveal-Arten):

- Bild-Kapitel (`css-view-reveal-nativ`): Fotos im Konzept und in den Häusern; 1000ms, Versatz 0 ms, clip-path inset(0 0 12% 0) → inset(0), keine Deckkraft; animation-timeline: view(), entry 0 % bis 40 %; ohne Unterstützung Endzustand
- Tageslinie (`prozess-timeline-wachsende-linie`): Ein Tag bei uns; scrollgekoppelt, Versatz 0 ms, Linie wächst bis zur Uhrzeit des Abschnitts, Knoten werden erreicht; scrollgekoppelt, linear
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Freie Plätze und Anmeldeweg, Beiträge und Zeiten, Speiseplan und Allergene

**Hover** (300 ms ein, 200 ms aus, --ui-ease-ein / --ui-ease-aus; nur mit Zeiger):

- Link: Unterstreichung kehrt wieder (unterstreichung-varianten wiederkehr)
- Knopf: tiefen-taste-3d soft: Taste sinkt 2 px; pfeil-icon-button linie: Pfeil 4 px
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px, Foto steht
- Bild: kein Zoom

**Signatur** `papier-druck-textur`: Aushänge (Plätze frei ab, Speiseplan der Woche, Schließtage, Elternbrief) hängen als Bögen, um höchstens 1,6° gedreht, mit Klebeband in Sonnengelb und Druck in Tafelgrün und Mohn. Sie stehen still; am Desktop folgt nur ein Streiflicht dem Zeiger über die Papierfasern (Lerp, endet, wenn der Zeiger ruht). Der Text ist echtes HTML. Auslöser: Zeiger über dem Bogen (nur hover: hover); Wiederholung: nur solange der Zeiger sich bewegt.

**Seitenwechsel** `seite-schiebt-ueber-alte`; dazu `vt-shared-element-morph`. Richtung: vorwaerts: das neue Blatt schiebt sich von unten über das alte, das alte tritt auf 0,95 zurück; zurueck: das obere Blatt gleitet nach unten weg; gleiche Ebene (Reiter, Filter) ohne Übergang. Geteilt: kopf, haus (Foto der Hauskarte → Kopfbild der Haus-Seite). Dauer 700 ms, zurück 500 ms.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Höchstens drei Aushänge je Seite, nie unter langem Fließtext (wann_nicht von papier-druck-textur). Kein Element bewegt sich von selbst länger als 1,2 s. Das Streiflicht ist ein Material-Effekt: kein zweiter Material-Effekt in derselben Ansicht.

**Reduzierte Bewegung:** H1 und Foto stehen; Aushang ohne Streiflicht; Reiter und Dialoge ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Blatt und ohne Bild-Flug. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** hüpfende Buchstaben, wackelnde Kinderzeichnungen; Seifenblasen, Konfetti, Regenbogen-Verläufe; Laufband mit Terminen.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Seitenwechsel nach seite-schiebt-ueber-alte (450 bis 600 ms, hier 700 ms), Bild-Flug nach vt-shared-element-morph (gekürzt auf die Dauer des Blatts). Begrenzungen eigene Festlegung.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 36, 52, 72, 100, 140
- Sektionsabstand: clamp(72px, 9vw, 140px)
- Dichte: luftig
- Hinweis: Großzügig wie ein heller Flur: Aushänge mit 36 px Rand zueinander, Zeiten und Beiträge dicht, Konzept mit viel Raum.
- Spalten: 12
- Seitenrand: clamp(18px, 5vw, 72px)
- Spaltenabstand: clamp(16px, 2.2vw, 32px)
- Maximale Breite: 1200px
- Raster: Hero: Foto im Passepartout über Spalte 1 bis 8, Aushang über Spalte 9 bis 12, leicht über die Bildkante gehängt. Konzept 5/7, Häuser als zweispaltige Karten, Aushänge nie mehr als zwei nebeneinander.
- Radius klein: 10px
- Radius groß: 22px
- Pillenform für Buttons: False
- Linie: 1px #24423A26 in Tabellen; Felder 1px in Leise (3:1)
- Schatten: nur am Aushang: drop-shadow 0 1px 1px und 0 18px 26px in Tafelgrün mit 12 bis 16 % Deckkraft
- Form: Weich, aber nicht kindlich: Karten 22 px, Aushang eckig mit Klebeband, Knöpfe 10 px.

## Bildsprache

- Licht: Tageslicht in Räumen und Garten, warm, ohne Blitz.
- Ausschnitt: Räume, Material, Hände beim Tun, Kinder von hinten oder angeschnitten; Team in der Halbtotale.
- Personen: Team mit Einwilligung; Kinder nur mit schriftlicher Einwilligung der Sorgeberechtigten, sonst nicht erkennbar.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Stockfotos mit lachenden Kindern, keine erkennbaren Kinder ohne Einwilligung, keine KI-Kinder.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Kurz, freundlich, konkret: was gilt, ab wann, was kostet es, was ist der nächste Schritt.
- Haltung: Wie die Leitung beim Erstgespräch: offen, ehrlich bei Wartelisten, ohne Pädagogik-Jargon.
- Tonproben: Krippe: Plätze frei ab März 2027. Kindergarten: Warteliste., Wir melden uns innerhalb von zwei Wochen, auch wenn wir keinen Platz haben.
- Nicht: „Kinder sind unsere Zukunft“, „ganzheitliche Förderung“ ohne Inhalt, Verniedlichungen.

## Hero

Foto-Hero im Passepartout (foto-hero, Variante passepartout): ein echtes Foto aus dem Haus, Raum, Garten oder Hände beim Basteln, Kinder nur von hinten oder mit Einwilligung, auf Kreidepapier. H1 oben links (Name des Hauses oder ein Satz zum Haus), daneben der erste Aushang „Plätze frei ab [Monat]“ je Altersgruppe bzw. „Warteliste“ mit Anmeldeweg. Kein Stockfoto mit lachenden Kindern im Kreis.

- Raster: Foto im Passepartout über Spalte 1 bis 8, H1 darüber oben links; Aushang über Spalte 9 bis 12, um 1,6° gedreht; mobil H1, Foto, Aushang untereinander.
- Bild: Echtes Foto aus dem Haus (Raum, Garten, Hände), 4:5 mobil, 3:2 Desktop, im Passepartout auf Kreidepapier.
- Überschrift: clamp(2.25rem, 1.3rem + 4vw, 4.25rem), Fraunces; Name des Hauses oder ein Satz zum Haus, kein Label darüber.
- Handlung: „Platz anfragen“ (Mohn, weiche Taste) und Telefon als tel:-Link mit sichtbarer Nummer.
- Zusatz: Aushang „Plätze frei ab“ je Altersgruppe mit Stand-Datum und Anmeldeweg; mobil untere Leiste Anrufen / Platz anfragen.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=passepartout) `foto-hero` · Variante „Kleiner Abzug auf Fläche“

## Sektionen in dieser Reihenfolge

1. **Freie Plätze und Anmeldung (direkt unter dem Hero: je Haus und Altersgruppe „Plätze frei ab“ oder „Warteliste“ mit Stand-Datum; Anmeldeweg über das Kita-Portal der Kommune oder eigene Voranmeldung, Fristen, was danach passiert; als Aushang)**: [Papier- und Drucktextur](https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo?v=aushang) `papier-druck-textur` · Variante „Aushang am Schwarzen Brett“, [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“
2. **Unsere Häuser und Standorte (nur bei mehreren Häusern eines Trägers: je Haus eine Seite mit Betreuungszeiten, Altersgruppen, Plätzen, Schließtagen, Leitung, Anfahrt; bei einem Haus stehen diese Angaben bei Plätzen und Kontakt; Fotos nur mit Einwilligung)**: [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=studio) `standort-detailseite` · Variante „Studio“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=standorte) `karte-zwei-klick` · Variante „Mehrere Standorte“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
3. **Pädagogisches Konzept (Schwerpunkte in Alltagssprache mit je einem Bild aus dem Alltag; Konzeption zusätzlich als barrierearmes PDF mit Stand)**: [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“
4. **Ein Tag bei uns (Uhrzeiten vom Bringen bis zum Abholen; Krippe und Kindergarten als Reiter, wenn sie sich unterscheiden)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=linie) `prozess-timeline-wachsende-linie` · Variante „Durchgehende Linie“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
5. **Eingewöhnung (Ablauf in Wochen, Rolle der Eltern, was mitbringen; ein Modell nur nennen, wenn das Haus es so lebt)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“
6. **Essen (Speiseplan der Woche als Aushang; Frühstück, Mittag, Vesper; Allergene und Zusatzstoffe je Gericht; wer kocht, Essensgeld)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro) `speisekarte-editorial` · Variante „Bistro-Tafel“
7. **Beiträge und Betreuungszeiten (Elternbeiträge nach Satzung der Kommune bzw. des Trägers mit Stand, Betreuungsumfänge, Essensgeld, Ermäßigungen; Rechner nur mit der echten Beitragstabelle)**: [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=mitgliedschaft) `preisseite-geruest` · Variante „Mitgliedschaft“
8. **Team (Leitung und Fachkräfte mit Rolle und Gruppe; Fotos und Namen nur mit Einwilligung)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
9. **Termine und Elternbriefe (Schließtage und Feste als Aushang, Elternabende, Neuigkeiten mit Datum; Schließtage zusätzlich als seitenweite Leiste)**: [News-Übersicht mit Kategorien und Jahr-Archiv](https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo?v=mehr) `news-uebersicht-archiv` · Variante „Weitere laden“, [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=meldung) `artikel-seite` · Variante „Meldung“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“
10. **Arbeiten bei uns (Erzieher:in, Kinderpfleger:in, praxisintegrierte Ausbildung, FSJ; Arbeitszeiten und Tarif ehrlich; jede Stelle mit eigener Seite)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“, [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=ausbildung) `stellenseite-mit-jobposting` · Variante „Ausbildung mit Vergütung je Jahr“
11. **Fragen von Eltern (Anmeldung, Kosten, Eingewöhnung, Krankheit, Schließtage, Essen; eigene Seite mit Suche ab etwa acht Fragen)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“
12. **Kontakt und Besichtigung (Anliegen wählen: Platz, Besichtigung, Bewerbung, Sonstiges; Bringen und Abholen als Skizze mit Eingang, Kinderwagen, Parken; keine Gesundheitsdaten des Kindes im Formular)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=weiche) `kontakt-anfrage-formular` · Variante „Anliegen-Weiche“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“
13. **Erklärung zur Barrierefreiheit (eigene Seite; kommunale Träger sind öffentliche Stellen, dann gilt das Landesrecht zur Barrierefreiheit)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Papier- und Drucktextur](https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo?v=aushang) `papier-druck-textur` · Variante „Aushang am Schwarzen Brett“

## Moment (Pflicht: woran man sich erinnert)

- Was: Das schwarze Brett: Aushänge (Plätze frei ab, Speiseplan der Woche, Schließtage) hängen als große Bögen leicht gedreht; am Desktop hebt sich der Bogen unter dem Zeiger an.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß: Bögen mindestens 4 Spalten, Druck lesbar ab 18 px
- Muster: [Papier- und Drucktextur](https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo?v=aushang) `papier-druck-textur` · Variante „Aushang am Schwarzen Brett“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Tiefen-Taste (3D-Button)](https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=soft) `tiefen-taste-3d` · Variante „Soft-Taste mit Kontur“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Seitenwechsel: [Neue Seite schiebt sich über die alte (Stack / Slide-over mit Parallax)](https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/demo) `seite-schiebt-ueber-alte`, [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=linie) `prozess-timeline-wachsende-linie` · Variante „Durchgehende Linie“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`
- Material: [Papier- und Drucktextur](https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo?v=aushang) `papier-druck-textur` · Variante „Aushang am Schwarzen Brett“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- collage-scrapbook – Signatur von arbeitgeber-karriere; der Aushang ist die eine Papier-Geste
- maskottchen-zustaende – Signatur von tierarztpraxis; keine Kita-Figur, die Kinder kommen aus echten Bildern
- konfetti-erfolg – nach dem Absenden zählt der nächste Schritt, nicht die Feier
- zahlen-odometer – keine hochgezählten Kinderzahlen
- marquee-laufband – Termine laufen nicht durch
- smooth-scroll-lenis – Eltern lesen auf dem Telefon nebenbei
- cursor-follower-lerp / magnetische-elemente – Agentur-Gesten
- Comic- und Schulschriften, Regenbogen, Wachsmalkreide-Verläufe – kindlich statt verlässlich
- Stockfotos mit lachenden Kindern, erkennbare Kinder ohne Einwilligung – Fotos aus dem Haus mit Einwilligung, sonst Räume und Hände

## Regeln

- Erster Bildschirm: Foto im Passepartout, H1 und der Aushang „Plätze frei ab“ je Altersgruppe oder „Warteliste“ mit Stand-Datum und dem Anmeldeweg. Mobil untere Leiste Anrufen / Platz anfragen.
- Signatur (papier-druck-textur): höchstens drei Aushänge je Seite (Plätze, Speiseplan, Schließtage oder Elternbrief), Druck als echter Text, Klebeband nur Zier. Nie unter langem Fließtext, nie als Hintergrund. Bei reduzierter Bewegung und auf Touch ohne Streiflicht.
- Plätze ehrlich: Warteliste und „derzeit keine Plätze“ sind gültige Antworten; nie „Kontaktieren Sie uns“ statt einer Antwort. Vergibt die Kommune über ein Portal, steht der Link dorthin vor jedem eigenen Formular.
- Kinderfotos und Namen nur mit schriftlicher, zweckgebundener und widerrufbarer Einwilligung der Sorgeberechtigten; bei Widerruf oder Abgang entfernen. Ohne Einwilligung: Räume, Material, Hände, Aufnahmen von hinten. Kinderzeichnungen nur mit Einwilligung und ohne Namen.
- Formulare ohne Gesundheitsdaten: Allergien, Diagnosen, Förderbedarf und Impfstatus erst im Aufnahmegespräch. Den Nachweis über den Masernschutz vor der Aufnahme (Infektionsschutzgesetz) nur als Hinweis im Anmeldeablauf nennen. Vom Kunden prüfen lassen.
- Beiträge nach Satzung mit Stand-Datum und Link zur Satzung der Kommune bzw. Beitragsordnung des Trägers; Essensgeld getrennt. Keine Beispielbeträge ohne Quelle.
- Speiseplan mit den 14 Hauptallergenen und Zusatzstoffen je Gericht; Hinweis, wer kocht oder liefert. Vom Kunden bzw. Caterer prüfen lassen.
- Impressum mit Träger (Verein, Kirchengemeinde, gGmbH oder Kommune), Vertretungsberechtigten und Register; Betriebserlaubnis und Kinderschutzkonzept nur nennen, wenn vorhanden. Kommunale Träger sind öffentliche Stellen: Erklärung zur Barrierefreiheit nach Landesrecht (barrierefreiheit-seite, Variante erklaerung). Vom Kunden prüfen lassen.
- Knöpfe: weiche Taste in Mohn (tiefen-taste-3d, Variante soft) nur für „Platz anfragen“; Nebenwege als ruhiger Textlink mit Pfeil (pfeil-icon-button, Variante linie). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Freie Schule / Privatschule / Ganztagsschule**: Schrift, Farbe, Stil und Signatur bleiben; der Aushang trägt Infoabende, Anmeldefristen und Schulgeldstaffel. Statt Plätzen je Altersgruppe die Aufnahme je Jahrgang mit Frist und Verfahren (Infoabend, Hospitation, Aufnahmegespräch). Infoabende als veranstaltung-detailseite (Variante anmeldung) mit Platzgrenze. Schulgeld als Staffel nach Einkommen mit Stand und Hinweis auf Ermäßigung; das Sonderungsverbot (Art. 7 Abs. 4 GG) beachtet der Träger, die Seite zeigt nur seine echte Ordnung. Staatliche Genehmigung bzw. Anerkennung, Abschlüsse und Träger nur mit echtem Bescheid. Vom Kunden prüfen lassen.
- **Bildungsträger mit Kursprogramm (Volkshochschule, Familienbildung, Elternschule)**: Schrift, Farbe, Stil und Signatur bleiben; der Aushang zeigt „Neu im Programm“ und Anmeldeschluss. Kursprogramm als programm-kalender (Variante programm) mit Filter nach Fachbereich, Ort, Tageszeit und Barrierefreiheit (facettenfilter-ergebnisliste, Variante leiste); je Kurs eine veranstaltung-detailseite (Variante ticket bei Entgelt, anmeldung bei kostenlosen Terminen) mit Dozent:in, Terminen, Entgelt, Ermäßigung, Rücktritt und freien Plätzen nur aus echter Quelle. Online-Anmeldung mit Entgelt ist ein Vertrag mit Verbraucher:innen: Widerrufs-Button „Vertrag widerrufen“ im Footer (widerruf-und-kuendigung-schaltflaeche, Variante richtig); ob ein Widerrufsrecht besteht, klärt der Träger. Volkshochschulen in kommunaler Trägerschaft sind öffentliche Stellen (Barrierefreiheit nach Landesrecht). Abgrenzung: Musikschule und Nachhilfe bleiben Variante von kurs-coaching-lernweg. Vom Kunden prüfen lassen.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.