Architecture Decision Record

`node.vacancy.full`-Canvas-Content-Template-Overhaul nach Figma „Projektdetails"

3-Section-Topologie (Hero 33–66 + Body + Apply-CTA) für node.vacancy.full, mit hart vorverdrahtetem 5er-Field-Mapping für die Meta-Rows. Meta-Card-Topologie definiert in ADR-0013.

Kontext

Das aktuelle Canvas-Content-Template canvas.content_template.node.vacancy.full.yml besteht aus genau drei Render-Bausteinen: einem Breadcrumb-Block, einer einzelnen section mit Heading (Job-Titel) im Header-Slot und Text (field_body) im Main-Slot, sowie einer cta-Section mit Apply-Button.

Optisch wie strukturell ist das deutlich entfernt vom SOLCOM-Figma-Frame „Projektdetails" (figma.com/design/CHHDfbpX8Ys2LBiGs5HVK0?node-id=1019-78888), das Job- und Projekt-Detail-Pages als reichere Komposition zeigt: Hero-Bereich mit Meta-Card links (5 Eckdaten als Icon+Label+Value-Liste in einem Bubble-Frame), Job-Titel + Apply-Button rechts, darunter Lead-Text und Body, dann Cross-Sell-Section, dann Sticky-Apply-Bar am Footer. Das ganze auf Dark-Blue-Background mit Lime-Light-Effekten als Brand-Identity.

Daten-Gaps zum Figma: Der Frame zeigt „Dauer: 6 Monate +" und „Starttermin: 01.05.2026" — beides ist im Vacancy-Bundle nicht modelliert. Die Meta-Card-Inhalte müssen auf andere Vacancy-Felder umgemappt werden. Salary ist 4-Feld-Aggregat (min + max + currency + type) und passt nicht in einen einzigen Field-Ref-Slot.

Die Meta-Card-Komponenten-Topologie ist in ADR-0013 separat festgelegt. Diese ADR fixiert die Page-Section-Topologie und das 5er-Field-Mapping.

Entscheidung

3-Section-Topologie + Breadcrumb für node.vacancy.full, mit hart vorverdrahtetem 5er-Field-Mapping für die Meta-Rows. Konkret:

Block 1 — Breadcrumb (block.system_breadcrumb_block, unverändert aus dem Bestand übernommen).
Block 2 — Hero-Section (sdc.byte_theme.section, columns: 33-66, mobile_columns: 1, background: primary, padding_block_start/end: 64).
- Spalte 1 (33%, Main-Slot, Position 0): 1× card-meta-list (neue SDC aus ADR-0013) mit 5× meta-row als verschachtelte Slot-Children.
- Spalte 2 (66%, Main-Slot, Position 1): 1× heading (Field-Ref auf entity:node:vacancy.title.value, level: 1, text_size: heading-responsive-4xl, text_color: inverted-Variante wegen Dark-Blue-Background) + 1× cta mit Apply-Button (Field-Ref auf field_apply_url.uri, Label „Jetzt bewerben", Icon arrow-right).
Block 3 — Body-Section (sdc.byte_theme.section, columns: 100, background: primary, padding_block_start: 0, padding_block_end: 64).
- Main-Slot: 1× text mit Field-Ref auf field_body.processed, text_size: normal, text_color: inverted.
Block 4 — Apply-CTA-Section (sdc.byte_theme.cta, unverändert aus dem Bestand übernommen).

5er-Field-Mapping für Meta-Rows (Reihenfolge im Slot-Tree von oben nach unten):

Position	Icon (Phosphor)	Label	Field-Ref auf `entity:node:vacancy`
1	`briefcase`	„Stellentyp"	`field_employment_type.entity.name`
2	`map-pin`	„Einsatzort"	`field_office.entity.name`
3	`clock`	„Arbeitszeit"	`field_schedule.entity.name`
4	`graduation-cap`	„Erfahrungslevel"	`field_seniority.entity.name`
5	`identification-card`	„Stellen-Nr."	`field_personio_id.value`

Icon-Strategie: Phosphor-Icon-Pack via existing icon-SDC. Alle 5 gewählten Icons existieren im Phosphor-Pack. Custom-SVG-Export aus Figma ist Fallback bei späterer Visual-Drift, nicht für MVP.
Hero-Background-Farbe: Aktuell background: primary als Platzhalter. Im SOLCOM-Brand-System (ADR-0003) ist primary die Lime-Brand-Farbe — das passt nicht zum Dark-Blue-Background des Figma. Build-Time-Klärung: welche section-allowed-values für background_color sind verfügbar, gibt es eine dark/inverted/navy-Variante?
Reihenfolge in Spalte 2 (Title oben, Apply-Button darunter) matcht das Figma. Für Mobile (mobile_columns: 1) entscheidet die natürliche DOM-Reihenfolge — Spalte 1 (Meta-Card) oben, Spalte 2 (Title + Apply) unten. Visual-Verify-Entscheidung in Phase 7 des Build-Workflows.

Rejected alternatives

rejected Aktuelles 3-Render-Bausteine-Template unverändert lassen, nur Brand-CSS-Layer drüberbügeln

Wäre Codepfad-frei, aber matcht das Figma in keinem Punkt: keine Meta-Card, kein 2-Spalten-Hero, kein visueller Brand-Auftritt. Verworfen — der ganze Overhaul-Auftrag wäre obsolet.

rejected Vollständig neuer Vacancy-View-Mode detail mit eigenem Content-Template, parallel zum unveränderten vacancy.full

Verworfen, weil dann zwei Templates gepflegt werden müssten und kein klarer Trigger entscheidet, wann full vs. detail rendert.

rejected 2-Spalten-Hero mit columns: 50-50

Die Meta-Card im Figma ist 473px breit auf 1120px Container = ~42% — 33-66 matcht das Figma-Verhältnis besser, und 50-50 würde die Title-Spalte zu schmal machen.

rejected Meta-Card als Sidebar in eigener Section unter dem Hero

Visuell kein Hero-Effekt mehr — die Meta-Card und der Job-Titel zusammen sind das, was Bewerbende „in 3 Sekunden scannen". Verworfen.

rejected Salary-Anzeige in die Meta-Card aufnehmen

Salary ist ein 4-Feld-Aggregat — passt nicht in einen einzigen Field-Ref pro meta-row.value. Workaround wäre Twig-Token-Replacement oder ein eigener salary-display-SDC. Beides Out-of-Scope für MVP.

rejected Cross-Sell-Sektion + Sticky-Apply-Bar mitumsetzen

Cross-Sell braucht eine vacancies-related-View (existiert nicht), Sticky-Bar braucht eigene SDC. Beide vergrößern den Scope substanziell und brauchen je einen eigenen Lens-Lauf. Verworfen für MVP.

rejected Background-Lights als Theme-CSS-Layer in dieser Iteration mitliefern

Theme-Eingriff mit absolut positionierten Glow-SVGs. Eigener Visual-Aufwand. Verworfen für MVP, eigener Folge-Issue.

rejected Years-Experience statt Erfahrungslevel als Position 4 der Meta-Card

field_seniority wurde gewählt, weil es das übergeordnete Karriere-Stadium beschreibt (Junior/Senior/Lead), während field_years_experience granularer aber redundant zu Job-Titel-Konventionen ist.

Consequences

Aktuelles canvas.content_template.node.vacancy.full.yml wird umstrukturiert, nicht ergänzt. Bestehende UUIDs und component_version-Hashes werden teils übernommen (Breadcrumb-Block, Apply-CTA-Section), teils neu generiert (Hero-Section, Body-Section). Migration ist entity::save()-getrieben — bestehende Vacancy-Nodes re-rendern automatisch nach drush cim. Kein Daten-Migrate nötig.
Neue Dependencies im Template-Frontmatter. dependencies.config muss erweitert werden um die neuen Canvas-Komponenten und die neu referenzierten Felder / Taxonomie-Vocabularies. Nach drush cim darf drush config:status keine Drift zeigen.
Empty-Field-Verhalten ist aktuell nicht definiert. Wenn eine Vacancy kein field_seniority hat, rendert die meta-row mit leerem value-String — visuell ein abgehängter Label ohne Wert. MVP akzeptiert das; Folge-Iteration könnte meta-row.twig mit Twig-if-Wrapping versehen.
Mobile-Stacking auf mobile_columns: 1 lässt die Meta-Card oben und den Title unten landen (Spalte 1 zuerst). Wahrscheinlich UX-suboptimal — Mobile-User wollen zuerst den Job-Titel sehen. Visual-Verify entscheidet, ob die Spalten-Reihenfolge umgedreht wird.
Hero-Background-Token muss vor dem Build geklärt werden. background: primary ist als Platzhalter eingeplant. Im SOLCOM-Brand-System ist primary die Lime-Brand-Farbe — das passt nicht zum Dark-Blue-Background des Figma. Build-Time-Klärung erforderlich.
Heading-Color muss text_color: inverted sein, damit der weiße Job-Titel auf Dark-Blue-Background lesbar ist. Falls heading-SDC kein inverted-Color-Token kennt, ist eine Theme-Side-Erweiterung nötig.
Recruiter-interne Notizen im field_body bleiben sichtbar. Live-Body enthält Strings wie „Bewerbungslink: …", „Schaltung: StepStone Pro Ultimate", „Freigabe an: Sandra Brandt". Daten-Bug aus der Personio-Migration. Template-Overhaul löst das nicht — separater Issue im Vacancy-Modul-Kontext. Bewusste Restbedingung.
Back-Button, Cross-Sell, Sticky-Bar, Background-Lights, Lime-Bar Bullets, Category-Badge, Salary-Aggregat: alle Out-of-Scope und je als Folge-Issue zu führen.
Cherry-Pick-Reibung gegen Upstream-Personio-Migrate. Wenn die Personio-Migration später neue Felder hinzufügt (field_duration, field_start_date), kann das 5er-Mapping per ADR-Update gewechselt werden.
Pflicht-Verfahren nach Template-Änderung: drush config:status → drush config:import --yes → drush cache:rebuild → Visual-Verify via agent-browser. Diff-time Reviewer-Pflicht: solcom-brand-reviewer und drupal-config-architecture-reviewer.
Wiederverwendbarkeit der Topologie für andere Bundle-Detail-Pages. Die 3-Section-Topologie ist generisch genug, um für eine spätere Freelancer-Projekt-Detail-Page wiederverwendet zu werden — das war auch der Auswahlgrund für die zwei-SDC-Card-Topologie aus ADR-0013.