# Bauplan: Personaldienstleister: direkt und fair

Rezept `personaldienstleister-zeitarbeit` · Personaldienstleister / Zeitarbeit (Arbeitnehmerüberlassung) / Personalvermittlung / Personalberatung für Fach- und Hilfskräfte in Industrie, Logistik, Handwerk, Pflege und Büro · Stimmung: direkt, fair, zupackend, klar · Stand 02.11.2026

Zwei Gruppen kommen auf die Seite: Menschen, die Arbeit suchen („Gibt es was in meiner Nähe, in meiner Schicht, was verdiene ich?“), und Betriebe, die Personal brauchen („Wie schnell, welche Qualifikation, was kostet das?“). Deshalb ist der Hero eine Weiche mit zwei gleich großen Wegen. Für Bewerbende folgen Jobs in der Nähe mit Filter nach Schicht, Arbeitszeit und Führerschein, Stellenseiten mit Stundenlohn als Spanne, Tarif und Einsatzort, eine Kurzbewerbung ohne Anschreiben und ehrliche Antworten zu Zeitarbeit (Equal Pay, Übernahme, Probezeit). Für Betriebe Überlassung und Vermittlung mit Ablauf und Anfrage. Special Gothic kräftig für Überschriften, TikTok Sans für Text. Hellgrau, Arbeitsblau und Werkblau, Grün nur für „Jetzt bewerben“. Signatur: der Schichtfilter. Die Filter sind eine verbundene Knopfgruppe (Früh, Spät, Nacht, Teilzeit, Führerschein), die beim Drücken breiter und eckiger wird und gewählt rund bleibt; die Trefferliste ordnet sich sichtbar neu (button-gruppe-expressiv, toggle, mit flip-zustandswechsel).

## 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 `personaldienstleister-zeitarbeit`) und https://cecodesign.de/lab/fundus/rezepte/personaldienstleister-zeitarbeit/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `special-gothic` · Text: `tiktok-sans`
- Größen: h1 Special Gothic clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), wdth 85, wght 700, Laufweite -0.02em, Zeilenhöhe 0.92; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem). H3, Stellentitel und Gebrauchsüberschriften TikTok Sans 650, 1.25rem. Fließtext TikTok Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.55, höchstens 64ch. Stundenlöhne, Zuschläge, Schichten und Postleitzahlen TikTok Sans 600 mit Tabellenziffern. Filterknöpfe und Knöpfe TikTok Sans 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`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Silbentrennung für deutsche Komposita](https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/demo) `silbentrennung-komposita`

## Farbe

Klar wie eine Stellentafel: Hellgrau als Grund, Arbeitsblau hell als Fläche für Filter, Löhne und Fragen, Werkblau für die Betriebe-Seite, Kapitel und Fuß. Grün nur für „Jetzt bewerben“ und „Personal anfragen“. Keine Warnwesten-Orange-Flächen, keine Stock-Helme.

- `--farbe-grund` #F4F4F1 (Grund Hellgrau)
- `--farbe-text` #16181C (Text (16,1 : 1 auf Grund))
- `--farbe-flaeche` #DCE5F0 (Fläche Arbeitsblau: Filter, Löhne, Fragen (Text 14,0 : 1))
- `--farbe-dunkel` #13233A (Dunkel Werkblau: Betriebe-Seite, Kapitel, Footer (Weiß darauf 15,8 : 1, Hellgrau 14,3 : 1))
- `--farbe-signal` #1B7340 (Signal Grün: Jetzt bewerben, Personal anfragen (Weiß darauf 5,9 : 1; als Schrift auf Grund 5,3 : 1))
- `--farbe-leise` #575B62 (Leise: Einsatzort, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Arbeitsblau))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Kurve: cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig); schließen cubic-bezier(0.5, 0, 0.75, 0)
- Dauer: 200 (Hover, Farbe), 350 (Filter, Reiter, Dialog öffnen), 240 (schließen), 250 (Filterknopf ändert Form, Trefferliste ordnet sich neu), 500 (H1-Zeilen einmal), 600 (Seitenwechsel, Stellentitel wird H1)
- Regel: Stundenlöhne, Schichten, Einsatzorte und Telefon stehen sofort. Die H1 steigt einmal aus der Maske. Filterknöpfe werden beim Drücken breiter und eckiger und gewählt rund; die Trefferliste ordnet sich sichtbar neu, die Trefferzahl wird angesagt. Beim Seitenwechsel wird der Stellentitel der Karte zur H1 der Stellenseite. Bei prefers-reduced-motion wechseln Filter nur die Farbe, die Liste springt ohne Weg.
- Hinweis: Knapp und gerade: H1 einmal in der Zeilenmaske, Filterknöpfe ändern Breite und Ecken in 250 ms, die Trefferliste ordnet sich per FLIP in 250 ms (nur Position, ausgeblendete Karten ohne Einblendung). Die Kurven der Demo button-gruppe-expressiv werden auf die Rezeptkurve umgestellt.

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

- Hauptkurve: `cubic-bezier(0.25, 1, 0.5, 1)` (--ease) für H1, Filterknöpfe, Trefferliste, Akkordeon, Seitenwechsel
- Dauern: klein 200 ms, mittel 350 ms, gross 500 ms, seitenwechsel 600 ms, schliessen 240 ms (als `--dauer-klein` … in tokens.css)

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

1. Kopf mit „Jetzt bewerben“ und Telefon: ab 0 ms, steht
2. Foto mit Weiche (zwei Wege): ab 0 ms, steht (LCP)
3. H1 (zwei Zeilen): ab 0/40 ms, 500 ms, Zeilenmaske translateY 100 % → 0, --ease
- Ende nach 540 ms. Wiederholt: H1 steht (sessionStorage).

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

- keine Reveals
- 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, Stundenlöhne, Tarif und Zuschläge, Trefferliste und Filter, Erlaubnis und Kontakt

**Hover** (350 ms ein, 240 ms aus, --ease-ein / --ease-aus; nur mit Zeiger):

- Link: Unterstreichung läuft durch (unterstreichung-varianten durchlauf)
- Knopf: tiefen-taste-3d stapel: Taste sinkt 3 px; pfeil-icon-button linie: Pfeil 8 px
- Karte: karte-ganzflaechig-klickbar raster: Stellentitel unterstrichen, Pfeil 8 px
- Bild: kein Zoom

**Signatur** `button-gruppe-expressiv` (Variante toggle): Der Schichtfilter: eine verbundene Knopfgruppe mit 2 px Fugen (Früh, Spät, Nacht, Teilzeit, Führerschein; höchstens fünf je Gruppe). Druck macht den Knopf in 150 ms breiter und eckiger, gewählt wird er rund mit Häkchen; die Trefferliste ordnet sich per FLIP in 250 ms neu, ausgeblendete Stellen verschwinden ohne Einblendung, die Trefferzahl wird angesagt. Leerzustand mit Job-Alarm statt leerer Fläche. Auslöser: Druck und Auswahl; Wiederholung: je Auswahl.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen); dazu `vt-shared-element-morph`. Richtung: vorwaerts (Liste → Stelle → nächste Stelle): der Stellentitel der Karte wird zur H1, der Inhalt rückt 8 px nach; zurueck: die H1 wird wieder Kartentitel und die Liste steht mit den gewählten Filtern. Geteilt: kopf, stellentitel (Kartentitel → H1 der Stellenseite). Dauer 600 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 fünf Knöpfe je Filtergruppe (wann_nicht von button-gruppe-expressiv); mehr Optionen als Auswahlliste. Keine Einblendung der Treffer, nur Umordnen.

**Reduzierte Bewegung:** Filter wechseln nur Farbe und Häkchen, ohne Breite; Trefferliste ohne FLIP; H1 steht; Seitenwechsel als Überblendung 150 ms ohne Titel-Morph. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Laufband mit Jobtiteln; wechselnde Wörter im Hero („Staplerfahrer … Pflegekraft …“); Konfetti nach der Bewerbung.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Filter nach button-gruppe-expressiv (toggle), Umordnen nach flip-zustandswechsel (nativ), Titel-Morph nach vt-shared-element-morph (auf 600 ms gekürzt). 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, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(56px, 7vw, 128px)
- Dichte: kompakt
- Hinweis: Dicht wie eine Stellentafel: Trefferliste mit 12 px Abstand, Filter mit 2 px Fugen, Kapitel mit klarem Abstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(14px, 2vw, 28px)
- Maximale Breite: 1280px
- Raster: Hero mit zwei gleich breiten Wegen (6/6) unter dem Foto. Trefferliste: Filter oben über 12 Spalten, Karten zweispaltig, auf dem Telefon einspaltig. Stellenseite 8/4 mit Lohn und Bewerben rechts sticky.
- Radius klein: 8px
- Radius groß: 16px
- Pillenform für Buttons: False
- Linie: 1px #16181C24 in Listen; Felder 1px in Leise (3:1)
- Schatten: nur an der Taste (tiefen-taste-3d)
- Form: Griffig: Filterknöpfe wechseln zwischen 8 px und rund, Karten 16 px, Taste mit Tiefe.

## Bildsprache

- Licht: Echtes Arbeitslicht in Halle, Lager, Station, Büro; keine Studio-Porträts.
- Ausschnitt: Menschen bei der Arbeit, Hände am Werkzeug, Disposition am Telefon; Einsatzbetrieb nur mit Freigabe erkennbar.
- Personen: Mitarbeitende nur mit Einwilligung; Einsatzbetriebe nur mit Zustimmung.
- Formate: 3:2, 4:5
- Nicht: Keine Helme mit Daumen hoch, keine Handschlag-Bilder, keine KI-Arbeiter:innen.
- 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: du für Bewerbende, Sie für Betriebe (eine Anrede je Weg, vom Kunden bestätigen lassen)
- Sätze: Kurz und direkt: was, wo, wann, wie viel.
- Haltung: Wie eine Disponentin am Telefon: zupackend, ehrlich bei Lohn und Schichten.
- Tonproben: Lager in [Ort], Frühschicht 6 bis 14:30 Uhr, 15,20 bis 16,80 € pro Stunde nach Tarif., Wir rufen dich zu deiner Wunschzeit zurück. Anschreiben brauchst du nicht.
- Nicht: „Wir suchen dich!“ ohne Stelle, „Top-Gehalt“, „junges dynamisches Team“.

## Hero

Foto-Hero mit Weiche (foto-hero-mit-leiste, Variante weiche): ein echtes Foto aus einem Einsatz (Lager, Werkhalle, Station) mit Einwilligung der Person und des Einsatzbetriebs. Darunter zwei gleich breite Wege ohne Rangfolge: „Ich suche Arbeit“ mit Postleitzahl-Feld und „Ich suche Personal“ mit Telefon der Disposition. H1 oben links, kein Label darüber. Kein Stockfoto mit Helm und Daumen hoch.

- Raster: H1 oben links über 7 Spalten, Foto randlos darunter, zwei gleich breite Wege (6/6) auf dem unteren Bilddrittel; mobil H1, Foto, Wege untereinander.
- Bild: Echtes Foto aus einem Einsatz, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), Special Gothic; ein Satz für beide Gruppen oder der Name, kein Label darüber.
- Handlung: Weg 1 „Ich suche Arbeit“ mit Postleitzahl und „Jobs zeigen“; Weg 2 „Ich suche Personal“ mit Telefon der Disposition und „Personal anfragen“ (Grün).
- Zusatz: Mobil untere Leiste Anrufen / Jobs / Bewerben.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=weiche) `foto-hero-mit-leiste` · Variante „Weiche zu den Filialen“

## Sektionen in dieser Reihenfolge

1. **Jobs in deiner Nähe (Postleitzahl oder Ort, Filter als Knopfgruppen: Schicht, Arbeitszeit, Führerschein; Trefferliste mit Stundenlohn als Spanne, Einsatzort, Schicht; Leerzustand mit Job-Alarm)**: [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=toggle) `button-gruppe-expressiv` · Variante „Toggle-Gruppe (Mehrfachauswahl)“, [Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)](https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ) `flip-zustandswechsel` · Variante „Nativ: element-scoped View Transition“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“, [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo?v=keine-treffer) `fehlerseite-leerzustand` · Variante „Suche ohne Treffer“
2. **Stellenseite (je Stelle eine Seite: Aufgaben, Stundenlohn als Spanne und Tarif, Zuschläge, Schichten, Einsatzort, Arbeitnehmerüberlassung oder Direkteinstellung genannt, Führerschein nur wenn nötig; JobPosting nur für sichtbare Inhalte)**: [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=handwerk) `stellenseite-mit-jobposting` · Variante „Handwerk mit Stundenlohn“
3. **Kurzbewerbung (ohne Anschreiben: Name, Telefon, Wunschzeit für den Rückruf, Lebenslauf freiwillig als Foto oder Datei; Fehlerliste; Bestätigung mit Rückrufzeit)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=kurzbewerbung) `stellen-karriere` · Variante „Kurzbewerbung mit Rückruf“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=kompakt-mobil) `datei-upload-ablage` · Variante „Ein Knopf und Kacheln“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=termin) `danke-seite-naechste-schritte` · Variante „Fester Termin“
4. **Was wir bieten (Tarif, Zuschläge, Urlaub, Arbeitskleidung, Fahrtkosten, Übernahmechance ehrlich; Zahlen nur echt als Tabelle)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“
5. **So läuft es für Bewerbende (Bewerbung → Gespräch → Vertrag → Einsatz → feste Ansprechperson; Dauer ehrlich)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=unterstrich) `prozess-timeline-wachsende-linie` · Variante „Unterstrich je Schritt“
6. **Für Betriebe (Arbeitnehmerüberlassung, Personalvermittlung, Branchen; je Leistung eine Seite mit Antwort zuerst: wie schnell, welche Qualifikation, wovon der Verrechnungssatz abhängt)**: [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“, [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=handwerk) `ansprechperson-band` · Variante „Handwerk“
7. **Anfrage für Personal (Qualifikation, Anzahl, Zeitraum, Einsatzort, Schicht; erledigte Schritte als Kurzfassung)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht) `mehrschritt-anfrage` · Variante „Senkrechter Stepper“
8. **Niederlassungen (ab vier Standorten Liste mit Suche; je Niederlassung eine Seite mit Status, Bus und Rad, Disposition, Jobs vor Ort)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste) `standortfinder-liste` · Variante „Liste mit Übersicht und Karte per 2-Klick“, [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale) `standort-detailseite` · Variante „Filiale“, [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“
9. **Stimmen (Mitarbeitende mit Vorname, Einsatz und Monat; Bewertungen von Google oder Arbeitgeberportalen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand) `testimonials-neu-gedacht` · Variante „Masonry-Wand“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere) `bewertungsprofil-mit-echtheitshinweis` · Variante „Mehrere Plattformen“
10. **Fragen zu Zeitarbeit (Was ist Zeitarbeit, Equal Pay, Höchstüberlassungsdauer, Probezeit, Übernahme, Kosten für Bewerbende: keine; eigene Seite mit Suche)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“
11. **Erklärung zur Barrierefreiheit (eigene Seite; freiwillig im bewährten Aufbau, vom Kunden prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=toggle) `button-gruppe-expressiv` · Variante „Toggle-Gruppe (Mehrfachauswahl)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Der Schichtfilter groß unter der Weiche: eine verbundene Knopfgruppe (Früh, Spät, Nacht, Teilzeit, Führerschein), Druck macht den Knopf breiter, die Trefferzahl antwortet sofort.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Knöpfe mindestens 56 px hoch über 8 Spalten
- Muster: [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=toggle) `button-gruppe-expressiv` · Variante „Toggle-Gruppe (Mehrfachauswahl)“
- 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=stapel) `tiefen-taste-3d` · Variante „Stapel aus Schatten, Kante und Front“
- 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: [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)“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=toggle) `button-gruppe-expressiv` · Variante „Toggle-Gruppe (Mehrfachauswahl)“, [Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)](https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ) `flip-zustandswechsel` · Variante „Nativ: element-scoped View Transition“, [Absenden wird Bestätigung](https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/demo?v=karte) `absenden-zu-bestaetigung` · Variante „Karte: Formular wird Bestätigungskarte“, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“

## 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?v=keine-treffer) `fehlerseite-leerzustand` · Variante „Suche ohne Treffer“
- [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?v=termin) `danke-seite-naechste-schritte` · Variante „Fester Termin“
- [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 / horizontal-scroll-section – Signaturen von arbeitgeber-karriere
- rotating-words – wechselnde Jobtitel im Hero sind bewegte Information (Grundregel)
- marquee-laufband – Jobs laufen nicht durch
- zahlen-odometer – keine hochgezählten Vermittlungen
- konfetti-erfolg – nach der Bewerbung zählt die Rückrufzeit
- smooth-scroll-lenis – Bewerbende sind auf dem Telefon und in Eile
- Stockfotos mit Helm und Daumen hoch, Warnwesten-Orange als Fläche – eigene Fotos aus Einsätzen
- „Bewerben in 30 Sekunden“, „Top-Gehalt“ ohne Zahl, Lockangebote ohne echte Stelle – irreführend

## Regeln

- Erster Bildschirm: Foto aus einem Einsatz, H1 und zwei gleich große Wege („Ich suche Arbeit“ mit Postleitzahl, „Ich suche Personal“ mit Telefon der Disposition). Mobil untere Leiste Anrufen / Jobs / Bewerben.
- Signatur (button-gruppe-expressiv, Variante toggle): Filter als verbundene Knopfgruppen mit höchstens fünf Optionen, role=toolbar und aria-pressed, Trefferzahl per aria-live; Umordnen per flip-zustandswechsel (Variante nativ) nur als Position. Nie als Navigation zwischen Seiten. Bei reduzierter Bewegung nur Farbe und Häkchen.
- Erlaubnis zur Arbeitnehmerüberlassung der Bundesagentur für Arbeit mit erteilender Stelle im Impressum (§ 5 DDG); Tarifvertrag nennen. Stellen, die als Überlassung besetzt werden, als solche erkennbar machen. Vom Kunden prüfen lassen.
- Stellen ehrlich: Stundenlohn als Spanne und Tarif, Zuschläge, Schichten, Einsatzort oder Region; Einsatzbetrieb nur mit dessen Zustimmung. Equal Pay und Höchstüberlassungsdauer in den Fragen erklären, ohne Rechtsberatung. Entgeltangaben in Stellenanzeigen nach den Regeln zur Entgelttransparenz vom Kunden prüfen lassen.
- Bewerbende zahlen nichts; Vermittlungsgutscheine nur nennen, wenn der Träger dafür zugelassen ist. Bewerberdaten nur für den Zweck, mit Löschfrist in der Datenschutzerklärung; Lebenslauf freiwillig. Vom Kunden prüfen lassen.
- Stellenanzeigen ohne Benachteiligung (m/w/d, keine Altersgrenzen ohne Grund); JobPosting-Daten nur für sichtbare Stellen und mit Ablaufdatum.
- Bewertungen von Google oder Arbeitgeberportalen nur mit Echtheitshinweis direkt dabei (bewertungsprofil-mit-echtheitshinweis).
- Knöpfe: Taste in Grün (tiefen-taste-3d, Variante stapel) für „Jetzt bewerben“ und „Personal anfragen“; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Personalvermittlung und Personalberatung (ohne Zeitarbeit)**: Schrift, Farbe, Stil und Signatur bleiben; die Knopfgruppen filtern nach Fachbereich, Region und Erfahrung. Stellen mit Gehaltsspanne und Arbeitgeber nur mit dessen Zustimmung, sonst anonym nach Branche und Region. Für Unternehmen Ablauf und Honorar auf Erfolgsbasis als Satz mit Rechenweg. Keine Erlaubnis nach AÜG nötig; Vermittlungsgutscheine nur mit Zulassung. Vom Kunden prüfen lassen.
- **Pflege-Personaldienst (Pflegekräfte auf Zeit)**: Schrift, Farbe, Stil und Signatur bleiben; die Knopfgruppen filtern nach Einrichtung (Klinik, Altenpflege, ambulant), Schicht und Region. Stellen nach stellenseite-mit-jobposting (Variante pflege) mit Entgeltgruppe bzw. Spanne, Zuschlägen, Dienstwagen und Unterkunft bei Fernjobs. Anerkennung ausländischer Abschlüsse nur mit Verweis auf die zuständige Stelle. Fotos aus Einrichtungen nur mit Einwilligung der Einrichtung und der Personen. 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“.