Joblisting

User Story

Als Karriere-Interessent:in möchte ich die offenen Stellen als übersichtliche Teaser-Liste sehen und über Filter eingrenzen können, damit ich schnell die für mich passenden Stellen finde und direkt in die Details oder die Bewerbung springen kann.

Outcome

Die Listing-Seite /karriere-bei-solcom/offene-stellenanzeigen zeigt die Stellen als einspaltige, voll-breite horizontale Teaser-Cards exakt nach dem Figma-Design (Frame 62309-47214): Titel, Eintritts-Label „ab sofort", Einsatzort, sowie zwei CTAs „Details ansehen" und „Sofort bewerben". Darüber sitzt eine reskinte Filter-Leiste (Frame 62309-47236) mit drei Dropdowns (Abteilung, Standort, Erfahrung), die per Auto-Submit ohne Reload filtern und einen Treffer-Counter anzeigen. Layout, Abstände, Typografie und Interaktionen entsprechen 1:1 dem Figma-Design; das responsive Verhalten wird aus dem Desktop-Frame abgeleitet.

Status & Scope

Sub-Task unter P2503-82 (Drupal Theme & SOLCOM Corporate Design) — das Ticket ist ein visueller Layer auf der bereits funktionierenden Listing-Seite. Thematisch verwandt: F-90 Karriere-Seite & Jobsuche (deren AKs bisher „nicht definiert" waren).

In Scope

• Teaser-Card 1:1 Figma (Layout, Stil, Meta, 2 Buttons).
• Listing-Layout: einspaltig, voll-breit (statt 3-spaltigem Grid).
• Filter-Leiste: Reskin + Reduktion auf 3 Dropdowns + Auto-Submit + Result-Counter.
• Responsive-Verhalten an 375 / 768 / 1280.

Out of Scope (verlinkt, nicht hier)

• Apply-Flow (interne Route /karriere/<slug>/bewerben) — F-100 / ADR-0047. „Sofort bewerben" zeigt vorerst auf die externe field_apply_url; der Ziel-Umschwenk ist F-100s Aufgabe.
• Personio-Import / Datenmodell — ADR-0035, unverändert.
• Detailseite (node.vacancy.full) — ADR-0014.
• Top-Job / Featured-Card (field_top_job, field_top_job_image, View-Mode featured, node.vacancy.featured, Views-Display block_top_job) — der gelieferte Figma-Frame zeigt nur uniforme Cards, keine Featured-Variante. Der Top-Job-Block bleibt funktional unangetastet; ein eventuelles Re-Styling ist ein separates Ticket.
• Related-Block „Das könnte Sie auch interessieren" (block_related) — Detailseiten-Surface unter ADR-0014, nicht Teil des Listings.
• URL-Slug-Klärung (PRD-0502 /karriere vs. Sitemap /karriere/jobs vs. Ist /karriere-bei-solcom/offene-stellenanzeigen) — angrenzend, nicht dieses Ticket.
• Unübersetzte Taxonomie-Werte („permanent", „entry-level") — Daten-/Content-Thema, separat.

Gegrillte Entscheidungen (Delta Live → Figma)

Card (Frame 62309-47214)

Filter (Frame 62309-47236)

Implementierungsstrategie

• Card: Canvas-Content-Template node.vacancy.card rekomponieren; neue horizontale CVA-Variante von card-frame; button-Varianten (ghost + lime) und meta-row (Kalender-/Location-Icon) wiederverwenden. Kein neues SDC, kein Stub-Rewrite (Refactor-not-Rewrite, CLAUDE.md). customer-lens-reviewer als kurzer Pre-Check vor dem Bau (≥2-Optionen-Topologie: Variante vs. neues SDC).
• Filter: Bestehende BEF-Leiste reskinnen + auf 3 Filter reduzieren + Auto-Submit aktivieren + Result-Counter. Kein Framework-Wechsel (BEF bleibt) → kein ADR.
• Responsive: Kein Mobile-Frame → abgeleitet: einspaltig durchgehend; Card stackt < 768px (Titel → Meta → Buttons full-width); Filter-Dropdowns stacken full-width, Counter darunter.

Kein ADR: Reskin + SDC-Wiederverwendung, BEF bleibt — nicht hart-reversibel, keine echte Architektur-Trade-off-Entscheidung. Die einzige „überraschende" Entscheidung (statisches „ab sofort" ohne Datenquelle) ist als gegrillt dokumentiert, aber kein Architektur-Record.

Akzeptanzkriterien

• AK1 — Das Listing ist einspaltig mit voll-breiten horizontalen Cards (statt 3-spaltigem Grid) auf allen Breakpoints.
• AK2 — Jede Card zeigt: Titel (24px Bold), Meta 📅 „ab sofort" + 📍 Ort, sowie zwei Buttons: „Details ansehen" (→ Detailseite /karriere/<slug>) und „Sofort bewerben" (lime, → externe field_apply_url).
• AK3 — Card-Stil entspricht 1:1 Figma-Frame 62309-47214 (Dark-Blue-Gradient, Border #0050a0, Radius 20px, lime CTA) und nutzt Brand-Tokens statt Hardcodes.
• AK4 — Die Filter-Leiste hat genau 3 Dropdowns (Abteilung, Standort, Erfahrung) im Pill-Stil, filtert per Auto-Submit (AJAX, kein Reload), zeigt keine Anwenden/Zurücksetzen-Buttons und einen Result-Counter „• N Treffer".
• AK5 — An 375 / 768 / 1280 verifiziert: Card-Inhalt stackt < 768px (Titel/Meta/Buttons full-width), Filter-Dropdowns stacken full-width.
• AK6 — View vacancies_listing, BEF-Datenquelle und Personio-Import bleiben funktional unverändert; Card wird via Canvas-Template + neue card-frame-Variante umgesetzt, button/meta-row wiederverwendet.

Abhängigkeiten

• Datenquelle: ADR-0035 (Personio-XML-Feed) — definiert, welche Felder verfügbar sind. Liefert kein Eintrittsdatum → „ab sofort" ist statisch.
• Apply-Ziel: F-100 / ADR-0047 schwenken „Sofort bewerben" später von extern auf interne Route. Bis dahin: extern. Keine Blockade für dieses Ticket.
• SDCs: card-frame (neue Variante), button (ghost + lime, vgl. P2503-121), meta-row, card-meta-list. Filter-Dropdown-Stil vgl. P2503-125.
• Spec-Referenz: PRD 2026-05-02-personio-vacancy-integration-prd (Listing-Page-Spec) — wird durch dieses Refinement in Filter-Set + Submit-Verhalten korrigiert (3 statt 5, Auto-Submit bestätigt, Single-Select statt Multi-Select-Pills).

Offene Fragen

• Result-Counter-Text: exakt „N Treffer" (Figma) oder „N Stellen"/„N Ergebnisse"? — Annahme bis Klärung: „N Treffer" 1:1 Figma.
• Pager-Stil unter dem einspaltigen Listing — Figma-Frame zeigt keinen Pager; aktueller Pager (20/Seite) bleibt funktional, Styling an Brand-Tokens angleichen.
• Empty-State („Aktuell sind keine offenen Stellen verfügbar.") — Styling im neuen Layout bestätigen.

QA-Plan

Click-Pfade pro Akzeptanzkriterium — Quelle der Wahrheit für die Pre-PR-Acceptance-Stage des Ralph-Loops und für die Mensch-QA nach PR-Open. Format-Source-of-truth: ADR-0037. Basis-URL: /karriere-bei-solcom/offene-stellenanzeigen (Beispiel-Detail-Slug: /karriere/junior-sales-manager-mwd-vertrieb-1).

Nächste Schritte

1. customer-lens-reviewer Pre-Check: card-frame-Variante vs. dediziertes Career-Card-SDC (Empfehlung: Variante).
2. Card-Twig + CVA-Variante + Canvas-Template node.vacancy.card umsetzen (Figma 62309-47214).
3. BEF-Leiste reskinnen + auf 3 Filter reduzieren + Auto-Submit + Result-Counter (Figma 62309-47236).
4. Visual-Verify an 375/768/1280 gegen beide Frames; solcom-figma-reviewer für Parity-Check.
5. MAPPING.html ergänzen: bisher 0 Einträge für Joblisting-Page/Card/Filter — Node-IDs 62309-47214 + 62309-47236 eintragen (via solcom-design-scanner).