{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "stellen-karriere",
 "name": "Stellenliste mit Kurzbewerbung",
 "name_en": "Job listings with filters and one-step application",
 "kurz": "Offene Stellen nach Bereich, Ort und Teilzeit filtern, die Trefferzahl zählt mit, jede Stelle klappt mit Gehaltsrahmen auf, beworben wird in einem Schritt mit Name, E-Mail und Datei.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "seriös",
  "klar",
  "lesbar"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "form",
  "dialog",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Offene Stellen als Liste mit Filtern nach Bereich, Ort und Teilzeit. Die Trefferzahl zählt live mit, aktive Filter stehen als Chips darüber. Jede Stelle klappt auf: Aufgaben, Profil, was der Betrieb bietet, Gehaltsrahmen und Ansprechperson. Beworben wird in einem Schritt: Name, E-Mail, eine Datei, Datenschutz. Danach ein klarer Erfolgszustand. Passt keine Stelle zum Filter, zeigt ein Leerzustand Auswege statt einer leeren Fläche.",
  "warum_es_wirkt": "Bewerbende entscheiden in Sekunden, ob eine Stelle passt. Ort, Umfang und Gehalt stehen deshalb vorne. Ein kurzes Formular ohne Anschreiben senkt die Hürde, besonders am Telefon.",
  "wann_einsetzen": "Karriereseiten von Kanzleien, Praxen, Handwerksbetrieben und Agenturen ab etwa vier offenen Stellen oder mehreren Standorten.",
  "wann_nicht": "Bei ein oder zwei Stellen: dann ohne Filter, Stellen direkt offen zeigen (Variante „Wenige Stellen“). Nicht, wenn ein Bewerbermanagement-System ohnehin eine eigene Liste mitbringt; dann nur gestalten, nicht nachbauen.",
  "varianten": [
   "Liste mit Filtern (Bereich, Ort, Teilzeit), Detail aufklappbar, Kurzbewerbung im Dialog",
   "Wenige Stellen: ohne Filter, Stellen direkt aufgeklappt, Initiativbewerbung daneben",
   "Mit Messenger-Erstkontakt statt Formular (Handwerk)"
  ],
  "umsetzung": "Stellen als Liste von <article> mit Daten zu Bereich, Ort und Teilzeit. Filter als echte Formularelemente in einem <form>; jede Änderung filtert, schreibt die Trefferzahl in eine role=\"status\"-Zeile, zeigt an jeder Pille die Zahl bei ihrer Wahl und listet aktive Filter als entfernbare Chips. Umordnen per document.startViewTransition() mit view-transition-name je Stelle (Fallback: sofort). Detail per <button aria-expanded> und Bereich mit inert, Höhe über grid-template-rows 0fr → 1fr. Kurzbewerbung in <dialog> per showModal(): Name, E-Mail, Datei (Typ und Größe per setCustomValidity), Pflicht-Häkchen Datenschutz; Erfolg im selben Dialog mit den nächsten Schritten. Leerzustand mit „Filter lockern“ samt Trefferzahl und Initiativbewerbung. Im Einsatz die Stellen zusätzlich als schema.org JobPosting auszeichnen und die Datei serverseitig prüfen. Gehaltsangaben und Datenschutztext vom Kunden prüfen lassen.",
  "mobil": "Filter hinter einem Knopf, Trefferzahl und Chips kleben oben. Dialog in voller Höhe, die Dateiauswahl öffnet auch Kamera und Dateien des Telefons. Große Ziele.",
  "reduzierte_bewegung": "Kein Umordnen per View Transition, kein Gleiten beim Aufklappen; Inhalte erscheinen sofort.",
  "barrierefreiheit": "Filter als fieldset mit legend. Trefferzahl in role=\"status\". Aufklapp-Knopf mit aria-expanded und aria-controls. Dialog mit aria-labelledby, Fokus auf das erste Feld, Esc schließt, Fokus zurück auf den Auslöser. Fehlertexte erst nach Verlassen des Felds, verknüpft über aria-describedby. Datei-Feld mit sichtbarem Label und Hinweis zu Format und Größe."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.22, 1)",
  "dauer_ms": "125 Farbe und Unterstreichung, 250 Aufklappen und Umordnen, 330 Dialog",
  "stagger_ms": "",
  "distanz": "Einblendung 8 px",
  "sonstiges": "Kurve und Dauern aus dem Rezept kanzlei-beratung-souveraen (Oppenhoff .125s, cubic-bezier(.4,0,.22,1); Noerr .33s)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kanzlei-beratung-souveraen"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.22,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.22, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Workable: Careers page best practices",
   "url": "https://resources.workable.com/stories-and-insights/careers-page-attract-candidates",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 01.11.2026: Stellen und Filter (Ort, Abteilung) gleich auf der Karriereseite zeigen; kurze Bewerbung auf einer Seite; jedes Feld hinterfragen; mehrseitige Abläufe sind am Telefon schwer, keine Pop-up-Fenster im mobilen Ablauf.",
   "art": "artikel"
  },
  {
   "seite": "Joveo: Career site best practices for apply conversion",
   "url": "https://www.joveo.com/blog/career-site-best-practices-apply-conversion/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 01.11.2026: nur abfragen, was für die Vorauswahl nötig ist; Lebenslauf-Upload oder kurzer Interessensbekundung zuerst; Gehaltsrahmen, Ort und Arbeitszeit vorne nennen; Start- und Abschlussquote der Bewerbung messen.",
   "art": "artikel"
  },
  {
   "seite": "Handwerksblatt: Recruiting im Handwerk",
   "url": "https://www.handwerksblatt.de/betriebsfuehrung/themen-specials/digitales-handwerk/recruiting-im-handwerk-digitale-wege-zur-fachkraeftegewinnung",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 01.11.2026: empfiehlt Kurzbewerbungsverfahren ohne Anschreiben, volle Bedienbarkeit am Smartphone und als Alternative den Erstkontakt per Messenger.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: <dialog>",
   "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog"
  },
  {
   "titel": "MDN: View Transition API",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"
  },
  {
   "titel": "Google Search Central: JobPosting",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/job-posting"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "akkordeon-hoehe-auto",
  "team-ueber-mich-layout",
  "checkbox-radio-animiert",
  "toggle-switch"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "DEF-Recherche 01.11.2026 (D2): Stellenliste mit Filter und Kurzbewerbung in einem Schritt für handwerk, kanzlei, praxis, kreativ.",
   "Belege sind Fachartikel (Workable, Joveo, Handwerksblatt), abgerufen 01.11.2026. Website-Beleg einer deutschen Kanzlei mit Kurzbewerbung fehlt noch.",
   "Gehaltsrahmen in Stellenanzeigen: EU-Entgelttransparenzrichtlinie; die deutsche Umsetzung vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Offene Stellen nach Bereich, Ort und Teilzeit filtern, die Trefferzahl zählt mit, jede Stelle klappt mit Gehaltsrahmen auf, beworben wird in einem Schritt mit Name, E-Mail und Datei.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.4, 0, 0.22, 1)",
   "dauer_ms": 250,
   "dauer_farbe_ms": 125,
   "dauer_aufklappen_ms": "250 (grid-template-rows 0fr → 1fr, Inhalt opacity 0 → 1 und translate -8px → 0)",
   "dauer_umordnen_ms": "250 (View Transition, view-transition-name je Stelle, :root ohne Namen)",
   "dauer_dialog_ms": "330 öffnen (opacity, translate 8px → 0, @starting-style), 250 schließen",
   "trefferzahl": "role=status, Zahl blendet bei Änderung in 250 ms aus 6 px ein",
   "zahlen_an_filtern": "jede Pille zeigt die Trefferzahl bei ihrer Wahl; 0 gestrichelt",
   "datei": "accept .pdf .doc .docx .jpg .jpeg .png, höchstens 10 MB, Prüfung per setCustomValidity",
   "farben": "#1E1E50 Marke, #F9F8F8 Grund, #EFEBEB Fläche, #D2CDC7 Linie, #00BEE6 nur Fokus und aktive Filter",
   "schriften": "Newsreader 400 (opsz auto) für Titel, Schibsted Grotesk 400/500 für alles Funktionale",
   "dauer_wegfallen_ms": "125 (::view-transition-old(*):only-child, damit nachrückender Inhalt nicht durch die alte Stelle scheint)"
  },
  "ausloeser": "klick",
  "touch": "Unter 860 px liegen die Filter hinter einem Knopf „Filter (n)“, die Zeile mit Trefferzahl und Chips bleibt oben kleben. Pillen und Chips mit größeren Zielen. Der Dialog füllt unter 640 px den ganzen Bildschirm, Knöpfe in voller Breite.",
  "reduziert": "Kein Umordnen per View Transition, kein Gleiten beim Aufklappen und Öffnen des Dialogs; Inhalte und Trefferzahl erscheinen sofort.",
  "korrekturen": {
   "umsetzung": "Stellen als Liste von <article> mit Daten zu Bereich, Ort und Teilzeit. Filter als echte Formularelemente in einem <form>; jede Änderung filtert, schreibt die Trefferzahl in eine role=\"status\"-Zeile, zeigt an jeder Pille die Zahl bei ihrer Wahl und listet aktive Filter als entfernbare Chips. Umordnen per document.startViewTransition() mit view-transition-name je Stelle (Fallback: sofort). Detail per <button aria-expanded> und Bereich mit inert, Höhe über grid-template-rows 0fr → 1fr. Kurzbewerbung in <dialog> per showModal(): Name, E-Mail, Datei (Typ und Größe per setCustomValidity), Pflicht-Häkchen Datenschutz; Erfolg im selben Dialog mit den nächsten Schritten. Leerzustand mit „Filter lockern“ samt Trefferzahl und Initiativbewerbung. Im Einsatz die Stellen zusätzlich als schema.org JobPosting auszeichnen und die Datei serverseitig prüfen. Gehaltsangaben und Datenschutztext vom Kunden prüfen lassen.",
   "mobil": "Filter hinter einem Knopf, Trefferzahl und Chips kleben oben. Dialog in voller Höhe, die Dateiauswahl öffnet auch Kamera und Dateien des Telefons. Große Ziele."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen, erfundene Kanzlei Eberhardt Oettle Partner (Steuerberatung und Recht) mit Standorten Heilbronn, Neckarsulm und Öhringen. Newsreader für Titel und Zahlen, Schibsted Grotesk für alles andere, Nachtblau #1E1E50 auf warmen Graus, Cyan nur für Fokus und aktive Filter. Neun Stellen mit Gehaltsrahmen, Ansprechperson Carolin Sautter. Die Vorführung wählt Recht, Heilbronn und Teilzeit, landet im Leerzustand, lockert den Ort, klappt die Stelle auf, öffnet die Kurzbewerbung, füllt sie aus (Datei per DataTransfer angehängt) und sendet. Der Zeiger liegt als Popover über dem Dialog. Referenzen: resources.workable.com, joveo.com, handwerksblatt.de. AD-Review 02.11.2026: Note 4. Wegfallende Stellen blenden in 125 ms aus, damit nachrückender Inhalt nicht durchscheint.",
  "varianten": [
   {
    "id": "liste",
    "name": "Viele Stellen mit Filter",
    "wann": "Ab etwa vier Stellen oder mehreren Standorten: Kanzleien, Praxisverbünde, größere Handwerksbetriebe.",
    "werte": {
     "filter": "Bereich (Radio), Ort (Checkbox), Teilzeit (Schalter)",
     "detail": "zu, per Klick auf",
     "leerzustand": "Lockern-Knöpfe mit Trefferzahl"
    }
   },
   {
    "id": "wenige",
    "name": "Wenige Stellen",
    "wann": "Kleine Kanzlei oder Betrieb mit ein bis drei Stellen: keine Filter, Stellen direkt offen, Initiativbewerbung darunter.",
    "werte": {
     "filter": "keine",
     "detail": "offen",
     "leerzustand": "entfällt"
    }
   }
  ]
 }
}