{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "news-uebersicht-archiv",
 "name": "News-Übersicht mit Kategorien und Jahr-Archiv",
 "name_en": "News overview with categories, year archive, load more or pagination and empty state",
 "kurz": "News-Übersicht mit Aufmacher, Kategorie-Knöpfen mit Zahl, Jahr-Auswahl, Liste nach Jahren, „Weitere laden“ mit Fokus auf den ersten neuen Beitrag oder Seitenzahlen, Leerzustand mit Ausweg und Stand in der URL.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "klar",
  "menschlich",
  "kraftvoll"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "history-api",
  "intl-datetimeformat",
  "form",
  "position-sticky"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Übersichtsseite für Neuigkeiten, Blog oder Presse. Oben der jüngste Beitrag als Aufmacher, darunter eine Filterzeile mit Kategorien und Jahr. Die Liste zeigt Datum, Kategorie, Titel, einen Satz Anriss und die Lesezeit, nach Jahren gegliedert. Weitere Beiträge kommen entweder über „Weitere laden“ (der Fokus springt auf den ersten neuen Beitrag) oder über Seitenzahlen mit Vor und Zurück. Filter und Seite stehen in der URL, damit Zurück und Teilen funktionieren. Findet ein Filter nichts, erklärt ein Leerzustand warum und bietet den nächsten sinnvollen Weg an.",
  "warum_es_wirkt": "Eine News-Seite beweist, dass der Betrieb lebt. Dafür muss das Datum vorn stehen und das Archiv durchsuchbar sein. Kategorien und Jahre sind die zwei Fragen, mit denen Leute suchen („Was gab es zur Mitgliederversammlung?“, „Was war 2024?“). „Weitere laden“ hält den Fuß erreichbar, Seitenzahlen geben Orientierung. Beides mit Fokus und URL ist für Tastatur und Screenreader bedienbar.",
  "wann_einsetzen": "Verein, Kultur, Handwerk, Praxis, Kanzlei, Industrie und alle Betriebe mit mehr als etwa acht Beiträgen. „Weitere laden“ für bis etwa 60 Beiträge und gemischte Leser, Seitenzahlen für große Archive, Presse und wenn Leute „Seite 3“ wiederfinden müssen.",
  "wann_nicht": "Bei weniger als sechs Beiträgen reicht eine Liste ohne Filter. Kein Endlos-Scrollen: Es versteckt den Fuß mit Kontakt und Impressum. Keine Kategorien, die nur einen Beitrag haben. Kein Aufmacher, wenn der jüngste Beitrag älter als ein Jahr ist; dann ehrlich ohne „Neu“.",
  "varianten": [
   "Weitere laden: sechs Beiträge je Schub, Fokus auf den ersten neuen, Statuszeile mit Zahl, Stand in der URL",
   "Seitenzahlen: nav mit aria-current, Vor und Zurück, Auslassung bei vielen Seiten, Fokus auf die Listenüberschrift",
   "Leerzustand mit Grund und Ausweg (Filter lösen, nächstes Jahr mit Treffern)"
  ],
  "umsetzung": "Die Beiträge kommen als Liste aus dem CMS (Titel, Datum, Kategorie, Anriss, Lesezeit, Bild optional). Filterzeile als <form> mit einer Gruppe Kategorie-Knöpfen (aria-pressed) und einem <select> für das Jahr; Änderungen filtern sofort und schreiben ?kategorie=…&jahr=…&seite=… per history.replaceState. Ohne JavaScript funktioniert das Formular per GET. Liste als <ol> mit <article> je Beitrag; Jahreszahl als eigene h2 je Gruppe. Ein Link je Beitrag (Titel), die Zeile ist über ::after klickbar. „Weitere laden“: Knopf mit Restzahl („6 weitere, noch 12“), danach Fokus per focus() auf den Titel-Link des ersten neuen Beitrags, Ansage in role=\"status\" („6 weitere Beiträge geladen, 12 von 24“). Seitenzahlen: <nav aria-label=\"Seiten\"> mit Links, aria-current=\"page\", bei vielen Seiten 1 … 4 5 6 … 12; nach dem Wechsel Fokus auf die Listenüberschrift (tabindex=-1) und dorthin scrollen. Leerzustand als eigener Block mit Grund, „Filter zurücksetzen“ und einem Vorschlag mit Trefferzahl. Datum mit Intl.DateTimeFormat('de-DE').",
  "mobil": "Kategorien als waagerecht umbrechende Knopfreihe, Jahr als Auswahlfeld darunter. Beiträge einspaltig, Datum und Kategorie in einer Zeile über dem Titel, Bild klein rechts oder weg. Seitenzahlen kürzen auf Zurück, „Seite 2 von 4“ und Weiter.",
  "reduzierte_bewegung": "Neue Beiträge und gefilterte Listen erscheinen ohne Gleiten und ohne Versatz. Fokus und Ansage bleiben.",
  "barrierefreiheit": "Filter als echte Knöpfe mit aria-pressed bzw. select mit label. Trefferzahl in role=\"status\". Nach „Weitere laden“ Fokus auf den ersten neuen Beitrag, nach Seitenwechsel auf die Listenüberschrift. Seitenzahlen als nav mit Namen, aktuelle Seite mit aria-current=\"page\". Datum als time. Leerzustand als Text, nicht als Bild."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen (animationsstil_ui token-toggle-asymmetrisch laut Rezept verein-nonprofit-wirkung)",
  "dauer_ms": "150 Knöpfe und Filter, 320 neue Beiträge einblenden, 180 Liste ausblenden beim Filtern",
  "stagger_ms": "40 je neuem Beitrag",
  "distanz": "neue Beiträge translateY 12 px → 0",
  "sonstiges": "6 Beiträge je Schub bzw. je Seite; Skelett 280 ms beim Nachladen (Demo, im Einsatz echte Ladezeit)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept verein-nonprofit-wirkung"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Nielsen Norman Group: Infinite Scrolling, When to Use It, When to Avoid It",
   "url": "https://nngroup.com/articles/infinite-scrolling-tips",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (Tim Neusesser, 04.09.2022): „Load more“ hält den Fuß erreichbar und macht das Ende sichtbar; Seitenzahlen geben Orientierungspunkte; Endlos-Scrollen erschwert das Wiederfinden, die Rückkehr an die Position soll gespeichert werden.",
   "art": "artikel"
  },
  {
   "seite": "WordPress Accessibility Handbook: Infinite Scroll",
   "url": "https://make.wordpress.org/accessibility/handbook/markup/design-patterns/infinite-scroll/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: rät von Endlos-Scrollen ab, „Load more“ kann bei wenigen Einträgen funktionieren, empfiehlt Seitenzahlen. Grundlage für die zwei Varianten.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: History.replaceState()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
  },
  {
   "titel": "MDN: aria-current",
   "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current"
  }
 ],
 "kombinierbar_mit": [
  "facettenfilter-ergebnisliste",
  "skeleton-shimmer",
  "fehlerseite-leerzustand",
  "artikel-seite",
  "gestaffelte-einblendung",
  "mega-footer-sitemap"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: kein Muster und kein Starter mit News-Übersicht; „Mehr laden“ in keinem demo.html [intern].",
   "NN/g und WordPress-Handbuch am 04.11.2026 abgerufen. Beide raten von Endlos-Scrollen ab. Keine Website mit Award-Beleg geprüft.",
   "Sechs Beiträge je Schub und die Skelett-Dauer sind eigene Festlegung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "News-Übersicht mit Aufmacher, Kategorie-Knöpfen mit Zahl, Jahr-Auswahl, Liste nach Jahren, „Weitere laden“ mit Fokus auf den ersten neuen Beitrag oder Seitenzahlen, Leerzustand mit Ausweg und Stand in der URL.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen (animationsstil_ui token-toggle-asymmetrisch, Rezept verein-nonprofit-wirkung)",
   "dauer_ms": {
    "ui": 150,
    "neue_beitraege": 320,
    "liste_ausblenden": 180,
    "skelett": 280,
    "anteil_balken": 320,
    "aufmacher_bild_hover": 900
   },
   "stagger_ms": 40,
   "distanz": "neue Beiträge translateY 12 px → 0 mit Deckkraft",
   "je_schub": 6,
   "url": "?kategorie=…&jahr=…&seite=…&v=… per history.replaceState; beim Laden wiederhergestellt",
   "fokus": "Weitere laden: Titel-Link des ersten neuen Beitrags; Seitenzahlen: Listenüberschrift (tabindex -1); Ansage in role=status",
   "liste": "Jahr als h3 sticky links (Big Shoulders 800 clamp(3rem, 2rem + 3vw, 5rem)), Beitrag als Zeile: Kategorie versal, Datum TT.MM.JJJJ, Minuten, Titel Big Shoulders 700, Anriss, Bild 132 px 4:3",
   "bildplatz": "ohne Foto ein SVG-Muster je Kategorie (Welle, Messkurve, Punkte, Zeilen), im Einsatz echtes Foto",
   "leerzustand": "große 0 aria-hidden, Grund aus den Daten (erste Jahreszahl der Kategorie), drei Wege mit Trefferzahl",
   "farben": "#FFFFFF Grund, #002E6D Marke, #EDF5FA helle Fläche, #DFDFD7 Linien, #FFCA0A nur Spenden",
   "vorfuehrung": "Aktionen, Jahr 2025, Presse 2024 (Leerzustand), Filter zurücksetzen, zweimal Weitere laden bzw. Seite 2 und 3, Schleife"
  },
  "ausloeser": "klick",
  "touch": "Kategorien als umbrechende Knopfreihe, Jahr darunter, Filterleiste nicht sticky. Beiträge einspaltig mit Bild 84 px, Anriss entfällt. Seitenzahlen kürzen auf Zurück, „Seite x von y“, Weiter. Menü-Knopf im Kopf.",
  "reduziert": "Neue und gefilterte Beiträge erscheinen ohne Versatz und ohne Überblenden, kein Schimmer im Skelett, Scrollen ohne Gleiten.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Flussläufer e. V. aus Merseburg (Gewässerpaten an Saale, Geisel, Luppe), 24 Beiträge 2024 bis 2026 in vier Kategorien. Grundvariante ?v=mehr (Weitere laden), Variante ?v=seiten (Seitenzahlen). Pult: Variante und „Leerzustand zeigen“ (Presse 2024). Aufmacher nur ohne Filter, dann ohne Doppelung in der Liste. Bilder huegel-nebel und dialog-modal-nativ-schule aus medien, sonst SVG-Muster. Band für Presse, Newsletter und Mitmachen vor dem Fuß. Selbsturteil 4.",
  "varianten": [
   {
    "id": "mehr",
    "name": "Weitere laden",
    "wann": "Bis etwa 60 Beiträge und gemischte Leser: Verein, Handwerk, Praxis, Kultur. Der Fuß mit Kontakt bleibt erreichbar.",
    "werte": {
     "knopf": "2 px Rahmen #002E6D, „6 weitere Beiträge laden“, darunter „12 von 23 angezeigt“ und Balken 3 px",
     "fokus": "erster neuer Beitrag"
    }
   },
   {
    "id": "seiten",
    "name": "Seitenzahlen",
    "wann": "Große Archive und Presse, wenn Leute eine Seite wiederfinden oder verlinken: Kanzlei, Industrie, Kultur mit vielen Jahren.",
    "werte": {
     "seiten": "Links 44 × 44 px, aria-current=page, Auslassung …, Zurück und Weiter mit aria-disabled",
     "fokus": "Listenüberschrift „Beiträge, Seite 2 von 4“"
    }
   }
  ]
 }
}