PRD: Joblisting — Figma-Parity

Problem Statement

Als Karriere-Interessent:in lande ich auf der Seite „Offene Stellenanzeigen" (/karriere-bei-solcom/offene-stellenanzeigen) und sehe die Stellen in einem dreispaltigen Karten-Raster, das optisch nicht dem aktuellen SOLCOM-Design entspricht. Die Karten zeigen Felder, die mir bei der Vorauswahl wenig helfen (Stellentyp, Erfahrungslevel), und ich habe nur einen einzigen „Mehr erfahren"-Link — ich kann nicht direkt aus der Liste heraus bewerben. Die Filter-Leiste hat fünf Dropdowns und zwei Buttons („Anwenden"/„Zurücksetzen"), erfordert also einen extra Klick und einen Seiten-Reload, statt sofort zu filtern. Insgesamt fühlt sich die Liste wie ein generisches Drupal-Listing an und nicht wie das in Figma gestaltete, markenkonforme Joblisting.

Die Datenseite (Personio-Import, Datenmodell) funktioniert bereits und ist nicht das Problem — es fehlt die 1:1-Umsetzung des Figma-Designs für Teaser-Karten und Filter.

Solution

Die bestehende Listing-Seite wird visuell exakt an zwei Figma-Frames angeglichen — der Datenfluss (Personio-XML-Import, View, BEF-Filtermechanik) bleibt unverändert:

Karten-Liste (Figma 62309-47214): Statt dreispaltigem Raster eine einspaltige Liste voll-breiter, horizontaler Teaser-Karten. Jede Karte zeigt den Stellentitel, zwei Meta-Items (📅 „ab sofort" und 📍 Einsatzort) und zwei Call-to-Actions: „Details ansehen" (zur Detailseite) und „Sofort bewerben" (lime, führt vorerst zur externen Personio-Bewerbungsseite).
Filter-Leiste (Figma 62309-47236): Reduktion von fünf auf drei Dropdowns (Abteilung, Standort, Erfahrung) im Pill-Stil, Auto-Submit ohne Reload (kein „Anwenden"/„Zurücksetzen") und ein Treffer-Counter „• N Treffer".
Responsive an 375/768/1280: einspaltig durchgehend; unter 768 px stapeln sich Karten-Inhalt (Titel → Meta → Buttons full-width) und Filter-Dropdowns.

Das Ergebnis: ein markenkonformes, scanbares Joblisting, das das in Figma definierte Layout, Spacing, Typografie und Interaktionsverhalten exakt abbildet.

User Stories

Als Karriere-Interessent:in möchte ich die offenen Stellen als übersichtliche, einspaltige Teaser-Liste sehen, damit ich schnell alle Stellen scannen kann, ohne in einem engen Raster zu suchen.
Als Karriere-Interessent:in möchte ich pro Stelle den Titel deutlich lesbar (große, fette Schrift) sehen, damit ich die Position sofort erfasse.
Als Karriere-Interessent:in möchte ich auf der Karte sehen, ab wann die Stelle besetzt werden kann („ab sofort"), damit ich meine Verfügbarkeit einschätzen kann.
Als Karriere-Interessent:in möchte ich auf der Karte den Einsatzort sehen, damit ich Stellen nach Standort vorsortieren kann, ohne in die Detailseite zu klicken.
Als Karriere-Interessent:in möchte ich von der Karte aus mit einem Klick zur Detailseite der Stelle gelangen („Details ansehen"), damit ich die vollständige Beschreibung lesen kann.
Als Karriere-Interessent:in möchte ich von der Karte aus direkt in die Bewerbung springen können („Sofort bewerben"), damit ich mich ohne Umweg über die Detailseite bewerben kann.
Als Karriere-Interessent:in möchte ich erkennen, dass „Sofort bewerben" mich zur Bewerbung führt (lime hervorgehoben, mit Extern-Icon), damit der primäre Handlungspfad klar ist.
Als Karriere-Interessent:in möchte ich die Stellen nach Abteilung filtern, damit ich nur Stellen meines Fachbereichs sehe.
Als Karriere-Interessent:in möchte ich die Stellen nach Standort filtern, damit ich nur Stellen an für mich erreichbaren Orten sehe.
Als Karriere-Interessent:in möchte ich die Stellen nach Erfahrungslevel filtern, damit ich nur zu meinem Karrierestand passende Stellen sehe.
Als Karriere-Interessent:in möchte ich, dass die Liste sich sofort aktualisiert, sobald ich einen Filter wähle (ohne „Anwenden"-Button und ohne Seiten-Reload), damit das Filtern sich flüssig anfühlt.
Als Karriere-Interessent:in möchte ich jederzeit sehen, wie viele Stellen aktuell passen („• N Treffer"), damit ich einschätzen kann, ob meine Filter zu eng sind.
Als Karriere-Interessent:in möchte ich mehrere Filter kombinieren können, damit ich die Liste präzise eingrenzen kann.
Als Karriere-Interessent:in möchte ich einen Filter wieder auf „Alle" zurücksetzen können, damit ich meine Auswahl korrigieren kann.
Als Karriere-Interessent:in möchte ich eine klare Meldung sehen, wenn meine Filterkombination keine Treffer liefert, damit ich weiß, dass die Suche funktioniert hat und ich die Filter lockern muss.
Als Karriere-Interessent:in am Smartphone (≈375 px) möchte ich die Karten gestapelt mit full-width-Buttons sehen, damit ich bequem mit dem Daumen tippen kann.
Als Karriere-Interessent:in am Tablet (≈768 px) möchte ich ein gut lesbares, nicht gequetschtes Layout sehen, damit die Liste auf mittleren Bildschirmen funktioniert.
Als Karriere-Interessent:in am Desktop (≈1280 px) möchte ich die voll-breiten horizontalen Karten exakt wie im Figma-Design sehen, damit der Auftritt markenkonform wirkt.
Als Karriere-Interessent:in möchte ich die Filter am Smartphone full-width gestapelt bedienen können, damit die Dropdowns groß genug und gut tippbar sind.
Als Karriere-Interessent:in, der mit Tastatur oder Screenreader navigiert, möchte ich die Filter und beide Karten-CTAs zugänglich bedienen können, damit die Stellensuche barrierefrei bleibt.
Als Karriere-Interessent:in möchte ich beim Blättern durch die Seiten (Pager) das Layout konsistent behalten, damit ich nicht die Orientierung verliere.
Als SOLCOM-Marketing/Site-Builder möchte ich, dass die Karten das aktuelle Corporate Design (Brand-Tokens, lime CTA, Dark-Blue) konsistent mit dem restlichen Auftritt verwenden, damit das Joblisting nicht aus dem Rahmen fällt.
Als Theme-Entwickler:in möchte ich die Karte über bestehende SDCs (card-frame, button, meta-row) und das Canvas-Template komponieren, damit ich keine duplizierte Card-Mechanik pflegen muss.
Als Personio-/HR-Stakeholder:in möchte ich, dass der Stellen-Import und das Datenmodell durch dieses Redesign nicht verändert werden, damit der bestehende Recruiting-Prozess unberührt bleibt.

Implementation Decisions

Scope-Abgrenzung

Rein visueller Layer auf der bestehenden, funktionierenden Listing-Seite. View vacancies_listing, BEF-Filtermechanik und Personio-XML-Import (ADR-0035) bleiben funktional unverändert (Datenquelle, Felder, Cron, Hard-Delete).
Out of Scope (verlinkt, eigene Tickets): Apply-Flow auf interne Route (F-100 / ADR-0047), Detailseite (ADR-0014), Top-Job/Featured-Block, Related-Block, URL-Slug-Klärung, Übersetzung der Taxonomie-Rohwerte.

Karte (Figma 62309-47214)

Umsetzung über Rekomposition des Canvas-Content-Templates node.vacancy.card plus Anpassung des SDC card-frame — keine duplizierte Card-Mechanik, kein neues monolithisches SDC (Refactor-not-Rewrite, CLAUDE.md).
Karten-Inhalt: Titel-Heading (24 px Bold), zwei meta-row-Instanzen (Icon Kalender → statisches Label „ab sofort"; Icon Location → field_office), dann eine Button-Bar mit zwei button-Varianten.
Button-Bar: „Details ansehen" (Ghost/Glass, Pfeil-Icon, → node-URL /karriere/<slug>) und „Sofort bewerben" (lime, Extern-Icon, → field_apply_url). Der Ziel-Umschwenk von „Sofort bewerben" auf die interne Bewerbungs-Sub-Route ist Aufgabe von F-100/ADR-0047, nicht dieses PRDs.
Karten-Shell: dunkelblauer Fill + Stroke #0050a0 + Radius 20 px. Die genaue card-frame-Topologie (neuer Background/Variant vs. Button-Bar-Slot vs. Komposition im Content-Slot) wird über einen customer-lens-reviewer-Pre-Check entschieden, weil card-frame heute nur einen einzelnen Notch-Button unten-rechts kennt, die Career-Card aber eine Zwei-Button-Bar braucht. Alle Farben/Maße als Brand-Tokens, keine Hex-Hardcodes.
„ab sofort" ist ein statisches Label ohne Datenquelle: der Personio-XML-Feed liefert kein Eintrittsdatum (ADR-0035), und ein neues Feld widerspräche dem Auto-Publish-Modell (ADR-0026). Realisierung als Template-Konstante — kein Feld, keine Migration, keine PHP-Logik.

Filter (Figma 62309-47236)

BEF bleibt als Framework (selective_better_exposed_filters ^3 ist installiert) — kein Framework-Wechsel, daher kein ADR.
Exposed-Filter-Set auf der page-Display von fünf auf drei reduzieren: Abteilung (field_department), Standort (field_office), Erfahrung (field_seniority). „Company" (field_subcompany) und „Employment type" (field_employment_type) als Exposed-Filter entfernen.
Single-Select beibehalten (Default „Alle …"); kein Multi-Select-Pills (korrigiert die Spekulation aus dem Vorgänger-PRD 2026-05-02-personio-vacancy-integration-prd).
Auto-Submit via BEF-Option + Views-AJAX (kein Page-Reload); „Anwenden"/„Zurücksetzen"-Buttons entfernen.
Result-Counter „• N Treffer" rechts in der Filter-Leiste über das SDC result-counter, gespeist aus dem View-Result-Count; muss bei jeder AJAX-Aktualisierung mitlaufen.
Filter-Container im Pill-Stil (Radius 50 px), Dropdowns als weiße Pills (Radius 24 px, Dark-Blue-Bold-Text) — über bestehendes Forms/Dropdown-Pattern (vgl. P2503-125).

Layout & Responsive

Listing von dreispaltigem Raster auf einspaltige, voll-breite Karten umstellen (View-Style / byte_theme-CSS).
Kein Mobile-Frame vorhanden → Verhalten abgeleitet: einspaltig durchgehend; unter 768 px stapelt der Karten-Inhalt (Titel → Meta → Buttons full-width); Filter-Dropdowns stapeln full-width, Counter darunter.
Verifikations-Breakpoints: 375 / 768 / 1280.

Testing Decisions

Annahme (Test-Auswahl in der Grilling-Session nicht final bestätigt): empfohlene Default-Kombination unten. Bei Bedarf erweitern auf den BEF-Functional-Test.

Gute Tests prüfen externes Verhalten, nicht Implementierungsdetails: gerendertes Markup-Kontrakt (welche Elemente/CTAs/hrefs erscheinen), nicht interne CVA-Klassennamen oder CSS-Selektoren.

card-frame-Treatment (Kernel-Render-Contract) — Render des neuen Career-Card-Treatments: rendert mit Content-Slot + Zwei-Button-Bar, korrekte Border-/Background-Ausgabe. Prior Art: web/themes/custom/byte_theme/tests/src/Kernel/CardComponentTest.php, ButtonComponentTest.php.
Canvas-Template node.vacancy.card (Render-Smoketest) — eine Vacancy-Node rendert mit Titel, Meta-Zeilen (statisches „ab sofort" + Ort), „Details ansehen"-Link auf /karriere/<slug> und „Sofort bewerben"-Link auf field_apply_url.
BEF-Filter-Verhalten (Functional, optional/deferred) — drei Exposed-Filter sichtbar, keine Submit-Buttons, Auswahl filtert die Liste, Counter aktualisiert sich. Aufwendiger (Browser/AJAX); als optionale Erweiterung markiert.
Visual-Verify (Pflicht, kein PHPUnit) — an 375/768/1280 gegen beide Figma-Frames via Playwright + solcom-figma-reviewer für den Parity-Check.

Kein Service-Unit-Test: es entsteht keine neue tief-testbare PHP-Logik (das „ab sofort"-Label ist eine Template-Konstante, der Counter eine View-Ausgabe) — ein extrahierter „Deep Module" wäre hier Over-Engineering.

Out of Scope

Apply-Flow auf interne Route /karriere/<slug>/bewerben — F-100 / ADR-0047. „Sofort bewerben" zeigt bis dahin extern.
Personio-Import & Datenmodell — ADR-0035, unverändert. Insbesondere kein neues Eintrittsdatum-Feld.
Detailseite node.vacancy.full — ADR-0014.
Top-Job / Featured-Card (field_top_job, node.vacancy.featured, block_top_job) — der Frame zeigt nur uniforme Karten; Featured-Block bleibt unangetastet, ein Re-Styling ist ein separates Ticket.
Related-Block „Das könnte Sie auch interessieren" — Detailseiten-Surface (ADR-0014).
URL-Slug-Klärung (/karriere vs. /karriere/jobs vs. Ist-Pfad) und Übersetzung der Taxonomie-Rohwerte („permanent", „entry-level") — angrenzend, separat.

Further Notes

MAPPING-Lücke: docs/design/MAPPING.html hat bislang 0 Einträge für Joblisting-Page/Card/Filter. Folgeschritt: Node-IDs 62309-47214 + 62309-47236 via solcom-design-scanner nachtragen.
Spec-Korrektur: dieses PRD korrigiert das ältere Personio-Vacancy-Integration-PRD in zwei Punkten: Filter 3 statt 5 und Single-Select-Auto-Submit statt Multi-Select-Pills.
Kein ADR nötig: Reskin + SDC-Wiederverwendung, BEF bleibt — nicht hart-reversibel, keine echte Architektur-Trade-off-Entscheidung. Die einzige „überraschende" Entscheidung (statisches „ab sofort") ist im Story-Hub als gegrillt dokumentiert.
Story-Hub & QA-Plan: AKs und testbare Click-Pfade liegen in docs/stories/P2503-195-joblisting.html (#qa-plan), Quelle der Wahrheit für die Ralph-Loop-Acceptance-Stage (ADR-0037).
Reihenfolge: (1) customer-lens-reviewer für die card-frame-Topologie, (2) Karte + Canvas-Template, (3) Filter-Reskin + Auto-Submit + Counter, (4) Visual-Verify + solcom-figma-reviewer.