# Bauplan: Arbeitgeber: Einblick statt Floskel

Rezept `arbeitgeber-karriere` · Karriereseite und Recruiting-Microsite eines KMU (Handwerk, Pflege, Industrie, Gastronomie, Handel) · Stimmung: ehrlich, nahbar, konkret, warm · Stand 02.11.2026

Eine Seite für Menschen, die gerade einen Job suchen, oft am Handy und in der Pause: oben das echte Angebot mit Gehaltsspanne, darunter die offenen Stellen und eine Kurzbewerbung ohne Anschreiben. Danach erst die Einblicke: eine Collage aus echten Handyfotos des Teams, ein Tag im Betrieb als waagerechte Zeitleiste, Stimmen mit Namen und Benefits als Zahlen statt Icons. Funnel Display und Funnel Sans, Kreide und Tannengrün, Klatschmohn nur für „Bewerben“. Fotos und Zettel landen wie Sticker mit einem kleinen Überschwinger, Menüs und Formulare bleiben ruhig. Anders als pflege (zweite Startseite im Dienstleister-Auftritt) ist das hier ein eigener Auftritt nur fürs Recruiting, für jede Branche.

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

## Schrift

- Headline: `funnel-display` · Text: `funnel-sans`
- Größen: h1 Funnel Display clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), wght 700, Laufweite -0.03em, Zeilenhöhe 0.96; h2 clamp(1.75rem, 1.3rem + 2vw, 3rem), wght 600, -0.02em; h3 Funnel Sans 1.25rem wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, max. 62ch. Gehaltsspanne in Stellenkarten Funnel Sans 1.25rem wght 700 Tabellenziffern („3.100–3.600 € brutto im Monat“); Uhrzeiten in der Tageszeitleiste Funnel Display 2rem wght 600 Tabellenziffern; Bildunterschriften (Name, Aufgabe, Datum) Funnel Sans 0.875rem wght 500; Zettel in der Collage Funnel Sans kursiv 1rem. Höchstens zwei Gewichte je Familie im Text (400/700).
- 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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [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`, [Optisch exakte Textabstände mit text-box-trim / text-box-edge](https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo) `text-box-trim`

## Farbe

Kreide als Grund, Tinte statt Schwarz, Tannengrün als Hausfarbe für die dunklen Sektionen (Ein Tag als …, Stimmen, Fußzeile), Klatschmohn nur für „Bewerben“ und den aktiven Schritt der Kurzbewerbung. Auf Tannengrün steht der Bewerben-Knopf mit 2 px Kreide-Rand (Klatschmohn auf Tannengrün hat nur 1,9 : 1). Die echten Fotos bringen die übrige Farbe; im Projekt ersetzt die Hausfarbe des Arbeitgebers das Tannengrün, der Signalton bleibt ein einziger.

- `--farbe-grund` #F6F3EC (Grund Kreide)
- `--farbe-text` #161616 (Text Tinte (16,3 : 1))
- `--farbe-text-2` #5A5650 (Sekundärtext, Bildunterschrift, Stand-Datum (6,6 : 1))
- `--farbe-flaeche` #EFE6D2 (Zettel und Hinweisflächen (Tinte darauf 14,6 : 1))
- `--farbe-tannengruen` #1D4A3A (Tannengrün: dunkle Sektionen, Fußzeile (Kreide darauf 9,1 : 1))
- `--farbe-signal` #C8382A (Signal Klatschmohn: Bewerben, aktiver Schritt (Weiß darauf 5,2 : 1; auf Kreide 4,7 : 1; auf Tannengrün nur mit 2 px Kreide-Rand))

## Bewegung

- Animationsstil: [Animationsstil „Federnd verspielt“](https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/demo) `token-federnd-verspielt`
- 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.34, 1.56, 0.64, 1) (token-federnd-verspielt, Spielart Überschwinger, nur Transform kleiner Elemente); UI über token-toggle-asymmetrisch: cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen
- Dauer: 150 (Druck, Farbe, Schatten; Farbe linear), 400 (Knopf-Hover, Haken nach dem Absenden), 500 (Ankunft der Collage-Teile, Versatz 50 ms, Weg höchstens 48 px, Drehung auf den Endwinkel); UI: 280 öffnen, 190 schließen (Menü, Akkordeon, Schritt der Kurzbewerbung, Dialog)
- Regel: Die Collage kommt einmal an und steht dann still (keine Parallaxe, kein Ziehen). Überschwingen nur auf Transform von Fotos, Zetteln, Haken und Knöpfen, nie auf Deckkraft, nie auf Flächen über die halbe Breite. Stellen, Gehälter und Formular stehen sofort, keine Einblendungen beim Scrollen. Die Tageszeitleiste läuft nur, solange gescrollt wird; auf dem Telefon ist sie eine native Wischleiste ohne Pin. Bei prefers-reduced-motion stehen alle Fotos an ihrem Platz (Rückfall cubic-bezier(0, 0, 0.58, 1), 200 ms), die Zeitleiste ist eine senkrechte Liste.
- Hinweis: Federn nur auf kleinen und mittleren Teilen, die ankommen: die Fotos und Zettel der Collage beim Laden (einmal), der Haken nach dem Absenden der Kurzbewerbung, Druck auf Knöpfe, aktive Filter-Chips. Nie auf Deckkraft (200 ms linear), nie auf Flächen über die halbe Breite, nie auf Text. Menü, Akkordeon, Schritte der Kurzbewerbung und Dialoge laufen über animationsstil_ui token-toggle-asymmetrisch (öffnen 280 ms, schließen 190 ms), weil token-federnd-verspielt große Flächen ausschließt. Die Tageszeitleiste ist scrollgebunden und linear.

## 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, 88, 128
- Sektionsabstand: clamp(64px, 8vw, 120px)
- Dichte: mittel
- Hinweis: Mobil zuerst: Stellenkarten mit 16 px Innenabstand und Gehalt oben, Kurzbewerbung mit 20 px zwischen Feldern. Die Collage darf eng überlappen.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(12px, 2vw, 24px)
- Maximale Breite: 1360px
- Raster: Hero 6/6 (H1 links, Collage rechts auf verdecktem 12er-Raster). Stellen als Liste, Tageszeitleiste waagerecht (horizontal-scroll-section), mobil Wischleiste.
- Radius klein: 6px
- Radius groß: 2px
- Pillenform für Buttons: False
- Linie: 1px #5A5650 mit 20 % Deckkraft
- Schatten: nur Fotos und Zettel der Collage liegen mit kurzem, weichem Schatten wie Papier auf dem Tisch
- Form: Fotos fast eckig wie Abzüge, leicht gedreht (Demo collage-scrapbook: 1,5 bis 4°); Knöpfe 6 px. Links zu Stellen als Textlink mit Pfeil (pfeil-icon-button, Variante linie).

## Bildsprache

- Licht: Echtes Licht im Betrieb, Handyfotos reichen, ungefiltert.
- Ausschnitt: Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit.
- Personen: Ja: nur echte Mitarbeitende mit schriftlicher, widerrufbarer Einwilligung.
- Formate: 3:4, 4:5, 1:1
- Nicht: Keine Stockfotos, keine KI-Bilder von Menschen, kein Imagefilm im Hero, keine Daumen-hoch-Teamfotos.

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

- Anrede: du
- Sätze: Kurz und konkret: Beruf, Ort, Gehalt, Stunden. Benefits mit Zahl und Bedingung.
- Haltung: Ehrlich und nahbar; sagt auch, was es nicht gibt. Bei Stellen für Führungskräfte oder in sehr förmlichen Betrieben Sie, dann durchgehend.
- Tonproben: Elektroniker:in gesucht. 38 Stunden, freitags um 13 Uhr Schluss., Bewirb dich in zwei Minuten, ohne Anschreiben.
- Nicht: „junges, dynamisches Team“, „flache Hierarchien“, „familiäres Umfeld“, „Obstkorb“, Merkmale aus § 1 AGG.

## Hero

Collage aus fünf bis sieben echten Fotos aus dem Betrieb (Handyfotos reichen: Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit, alle mit Einwilligung), leicht gedreht auf einem verdeckten 12er-Raster, dazu ein Zettel mit einem echten Satz aus dem Team. Links davon die H1 mit dem konkreten Angebot („Elektroniker:in in Wunstorf. 19,50 bis 25 € die Stunde, 38 Stunden, Freitag früher Schluss.“), darunter „Offene Stellen“ und „In zwei Minuten bewerben“ sowie die Ansprechperson mit Foto, Telefon und WhatsApp. Mobil drei bis vier Fotos im Hochformat unter der H1. Ohne eigenes Bildmaterial entfällt die Collage (wann_nicht) und der Hero wird ein einzelnes echtes Teamfoto; das Rezept verlangt aber eigenes Material, also vorher einen halben Tag mit dem Handy fotografieren. Kein Imagefilm im Hero, keine Stockfotos.

- Raster: 12 Spalten: H1 über Spalte 1 bis 6, Collage über 6 bis 12 auf verdecktem Raster (collage-scrapbook); mobil drei bis vier Fotos im Hochformat unter der H1.
- Bild: Fünf bis sieben echte Fotos, 3:4 und 4:5, leicht gedreht, dazu ein Zettel mit einem echten Satz aus dem Team.
- Überschrift: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), Funnel Display 700, links.
- Handlung: „In zwei Minuten bewerben“ (Klatschmohn gefüllt) und „Offene Stellen“ (Textlink mit Pfeil).
- Zusatz: Ansprechperson mit Foto, Telefon und WhatsApp unter den Knöpfen; mobil untere Leiste Bewerben / Anrufen / WhatsApp.

- Hero: [Collage-/Scrapbook-Layout](https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/demo) `collage-scrapbook`

## Sektionen in dieser Reihenfolge

1. **Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)**: [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) `stellenseite-mit-jobposting`
2. **Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=ring) `mehrschritt-anfrage` · Variante „Fortschrittsring“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=dokument) `datei-upload-ablage` · Variante „Lebenslauf als PDF“
3. **So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
4. **Ein Tag als … (je Beruf eine Strecke mit vier bis acht Stationen und Uhrzeit, von Schichtbeginn bis Feierabend: echte Fotos, ein Satz je Station, auch was anstrengend ist; auf dem Telefon als Wischleiste)**: [Gepinnte Horizontal-Scroll-Section](https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/demo) `horizontal-scroll-section`
5. **Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat) `testimonials-neu-gedacht` · Variante „Ein großes Zitat“, [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel) `eigener-videoplayer` · Variante „Kursvideo mit Kapiteln“
6. **Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft)**: [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“
7. **Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“
8. **Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
9. **Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement) `team-ueber-mich-layout` · Variante „Statement-Satz mit Inline-Bildern“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“
10. **Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)**: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Collage-/Scrapbook-Layout](https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/demo) `collage-scrapbook`
- [Gepinnte Horizontal-Scroll-Section](https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/demo) `horizontal-scroll-section`

## Buttons

- Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Navigation: [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“
- Scroll: [Gepinnte Horizontal-Scroll-Section](https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/demo) `horizontal-scroll-section`
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“, [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) `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`

## Nicht verwenden

- cinematic-video-hero – ein Imagefilm im Hero verdrängt Stellen und Gehalt und lädt lange; Videos gehören zu den Stimmen, mit Untertiteln
- zahlen-odometer – „98 % zufriedene Mitarbeitende“ hochgezählt ist die Floskel in Zahlen
- rotating-words / typewriter-natural – „Wir suchen dich als … Held:in“ versteckt, welche Stelle es wirklich gibt
- bento-grid-interaktiv / stapelkarten – Benefits als Icon-Kacheln sind genau die Floskel, die das Rezept vermeiden will; Benefits als Tabelle mit Zahlen
- logo-wand-social-proof – gekaufte Arbeitgebersiegel und Awards ohne Jahr und Quelle; echte Auszeichnungen als Textzeile mit Jahr
- graustufen-zu-farbe – die meisten Bewerbenden kommen per Handy und sähen die Farbe nie (wann_nicht)
- flick-karten-stapel – Signatur von friseur; außerdem Wischgeste statt lesbarer Liste
- corner-shape-eckenformen – Signatur von pflege
- konfetti-erfolg – nach der Bewerbung eine ruhige Bestätigung mit Name, Foto und Rückrufzeit der Ansprechperson
- prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein Chatbot statt Ansprechperson; wenn doch, beim Start gekennzeichnet (Art. 50 KI-VO)
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – bremsen auf dem Handy und gehören zu Agenturseiten
- hide-on-scroll-header – „Bewerben“ und Telefon müssen immer erreichbar sein
- Stockfotos von lachenden Teams am Laptop, Daumen hoch und Puzzleteile – nur echte Menschen aus dem Betrieb, mit Einwilligung; KI-Bilder von „Mitarbeitenden“ gar nicht

## Regeln

- Erster Bildschirm: Collage aus echten Fotos, H1 mit dem konkreten Angebot (Beruf, Ort, Gehaltsspanne oder Tarif, Stunden), „Offene Stellen“ und „In zwei Minuten bewerben“, Ansprechperson mit Telefon und WhatsApp. Die untere Mobilleiste (mobile-bottom-navigation, Variante fab) zeigt Bewerben, Anrufen und WhatsApp.
- Gehalt in jeder Stelle: Spanne in Euro brutto mit Bezug (Stunde, Monat, Jahr) oder Tarifvertrag mit Entgeltgruppe, dazu Zuschläge. Grundlage: Art. 5 der Entgelttransparenzrichtlinie (EU) 2023/970 verlangt Information über Einstiegsentgelt oder Spanne vor dem Vorstellungsgespräch und verbietet die Frage nach dem bisherigen Gehalt; die Frist zur Umsetzung lief am 07.06.2026 ab, ein deutsches Gesetz ist Stand 02.11.2026 nicht in Kraft (Bundesregierung, BT-Drs. 21/7026). Die Spanne trotzdem nennen; Umsetzung in Deutschland vom Kunden prüfen lassen.
- AGG: Stellentitel geschlechtsneutral oder mit (m/w/d), Texte ohne Merkmale aus § 1 AGG („junges Team“, „Muttersprache Deutsch“, „bis 35 Jahre“); stattdessen Anforderungen der Aufgabe („Deutsch gut genug für Kundengespräche“). Kein Foto, kein Geburtsdatum, keine Staatsangehörigkeit als Pflichtfeld. Vom Kunden prüfen lassen.
- Kurzbewerbung: höchstens fünf Pflichtangaben, kein Anschreiben, Lebenslauf freiwillig, keine Frage nach dem bisherigen Gehalt und keine Gehaltsvorstellung als Pflichtfeld (MFM fragt sie ab). Was im Intro versprochen wird, gilt im Formular (Siemon verspricht „ohne Lebenslauf“ und verlangt ihn dann). Nach dem Absenden: Bestätigung mit Name und Foto der Ansprechperson und der Frist, bis wann sie sich meldet.
- Datenschutz bei Bewerbungen: Hinweis nach Art. 13 DSGVO direkt am Formular, Speicherdauer nach Absage (Frist für AGG-Ansprüche: zwei Monate, § 15 Abs. 4 AGG; übliche Löschfrist etwa sechs Monate) und Talent-Pool nur mit eigener Einwilligung; WhatsApp-Weg mit Hinweis auf die Datenübermittlung. Text vom Kunden; Claude schreibt keine Rechtstexte.
- Echte Einblicke: Fotos, Namen, Stimmen und Videos nur von echten Mitarbeitenden mit schriftlicher, widerrufbarer Einwilligung; wer geht oder widerruft, verschwindet von der Seite. Keine Stockfotos, keine KI-Bilder von Menschen; wo KI-Bilder doch vorkommen, gekennzeichnet (Art. 50 KI-VO). Die Collage (collage-scrapbook) ist statisch, Teile sind nicht ziehbar, der Inhalt steht zusätzlich als Bildbeschreibung im Text.
- Benefits konkret: jede Leistung mit Zahl und Bedingung („30 Tage Urlaub“, „Jobrad, wir zahlen 30 € im Monat dazu“, „1.000 € Weiterbildungsbudget im Jahr“); keine Floskeln wie „Obstkorb“, „flache Hierarchien“, „familiäres Umfeld“ ohne Beleg. Auch sagen, was es nicht gibt (Wochenenddienst, Rufbereitschaft, Schicht).
- Ein Tag als … (horizontal-scroll-section): vier bis acht Stationen mit Uhrzeit und echtem Foto; auf dem Telefon und bei reduzierter Bewegung kein Pin, sondern eine Wischleiste mit Pfeilknöpfen bzw. eine senkrechte Liste. Keine Kerninformation nur in der Zeitleiste (Gehalt, Stunden, Ort stehen in der Stelle).
- Ausbildung: Vergütung je Ausbildungsjahr in Euro, mindestens nach § 17 BBiG bzw. Tarif, Dauer und Zahl der Jahre stimmen überein (Achberg listet vier Jahre bei 3,5 Jahren Dauer), Übernahme nur versprechen, wenn sie gilt. Für Minderjährige eine kurze Info für Eltern.
- Stellenseiten für Google: JobPosting-Daten nur auf der Seite einer einzelnen Stelle, passend zum sichtbaren Text, mit datePosted, Ort und, wo vorhanden, baseSalary und validThrough; abgelaufene Stellen sofort entfernen oder als beendet kennzeichnen (Google erlaubt keine abgelaufenen Stellen). Nicht auf der Übersicht.
- Arbeitgeberbewertungen (kununu, Google): wenn gezeigt, mit Quelle, Schnitt, Anzahl, Stand und dem Hinweis, ob und wie geprüft wird; lieber verlinken als einbetten.
- Bewegung nach token-federnd-verspielt mit UI-Stil token-toggle-asymmetrisch: Fotos und Zettel der Collage landen einmal mit kleinem Überschwinger (500 ms), der Haken nach dem Absenden federt (400 ms); Menü, Akkordeon und Formularschritte öffnen 280 ms und schließen 190 ms ohne Federn. Der Bewerben-Knopf (fuellung-vom-eintrittspunkt) füllt sich vom Eintrittspunkt, auf Touch nur Druck und Farbe; Links zu Stellen als pfeil-icon-button, Variante linie.
- Barrierefreiheit: Bewerbung ohne Upload möglich (Telefon, WhatsApp, Formular), Fehlerliste bei der Kurzbewerbung, 200 % Zoom und Kontrastmodus geprüft. Ein Hinweis, dass Bewerbungen schwerbehinderter Menschen willkommen sind, nur ehrlich und mit Ansprechperson. Pflichtangaben (Impressum, Datenschutz) wie auf jeder Seite; Claude schreibt keine Rechtstexte.

## Rezept-Varianten

- **Ausbildung und Praktikum (Azubi-Microsite)**: Zielgruppe 15 bis 19 Jahre und ihre Eltern. Vergütung je Jahr gleich oben, Praktikum zum Reinschnuppern als eigener kurzer Weg (Wunschwoche, Schule, Telefon der Eltern freiwillig), Schulabschluss nur nennen, wo er wirklich nötig ist. Stimmen von Azubis aus allen Lehrjahren; Fotos von Minderjährigen nur mit Einwilligung der Eltern.
- **Pflege und Gesundheit**: Tarif oder AVR mit Entgeltgruppe und Stufe, Schicht- und Tourenmodell als Tabelle, Dienstwagen, Einspringregel und Frei-Garantie nur, wenn sie gelten; Anerkennung ausländischer Abschlüsse mit Ansprechperson. Ist die Karriereseite Teil eines Pflegedienst-Auftritts, gilt dort pflege-dienst-naehe (zweite Startseite); dieses Rezept nur für eine eigene Recruiting-Microsite, ohne Signatur von pflege. Federn hier gedämpft (wann_nicht von token-federnd-verspielt: Gesundheit): Collage-Teile ohne Überschwinger, nur der Haken nach dem Absenden federt.
- **Gastronomie und Hotel**: Stundenlohn und Monatsgehalt nebeneinander, Trinkgeld-Regel (wie verteilt wird), Vorlauf des Dienstplans, Personalessen, Unterkunft für Saisonkräfte mit Preis, Minijob und Aushilfe mit Stundenlohn. Ein Tag als … mit echten Zeiten auch für Spätdienst.
- **Industrie mit Schichtbetrieb**: Schichtmodell als Tabelle mit Zuschlägen in Prozent, Tarif mit Entgeltgruppe (z. B. Metall und Elektro), Werksverkehr und Parken, Probearbeit in der Linie. Passt als Microsite zu industrie-b2b-mittelstand; Schrift, Farbe und Signatur bleiben die dieses Rezepts.

## Vor der Abgabe

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