{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "artikel-seite",
 "name": "Artikelseite mit Autorin, Stand und Strukturdaten",
 "name_en": "Article page with author, dates, table of contents and Article JSON-LD",
 "kurz": "Gerüst für Ratgeber und Meldungen: Rubrik, H1, Vorspann, Meta-Zeile mit Autorin, Datum im deutschen Format und Lesezeit aus der Wortzahl, Inhaltsverzeichnis mit Markierung, Lesefortschritt als 2-px-Linie und Article-JSON-LD aus denselben Daten.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "editorial",
  "ruhig",
  "präzise"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "scroll-driven-css",
  "position-sticky",
  "intersection-observer",
  "intl-datetimeformat",
  "json-ld",
  "initial-letter",
  "clipboard-api",
  "dialog"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Gerüst für einen Blog-, Ratgeber- oder News-Artikel einer Kundenseite. Oben Rubrik, H1, ein Vorspann und eine Meta-Zeile mit Autorin, Veröffentlichungs- und Änderungsdatum im deutschen Format und der Lesezeit. Darunter ein Aufmacherbild mit Bildunterschrift und Bildnachweis. Lange Texte bekommen „Kurz gesagt“ und ein Inhaltsverzeichnis, das beim Lesen den aktuellen Abschnitt markiert. Im Text Zwischenüberschriften als Sprungziele, ein Zitat, Abbildungen mit Unterschrift und eine Checkliste. Am Ende ein Stand-Hinweis, die Autorinnen-Box und drei verwandte Artikel. Ein Lesefortschritt läuft als 2-px-Linie unter dem Kopf. Article-JSON-LD entsteht aus denselben Daten wie die sichtbaren Angaben. Kurze Meldungen lassen Inhaltsverzeichnis und Fortschritt weg.",
  "warum_es_wirkt": "Wer einen Artikel öffnet, will wissen, von wem er ist, wie aktuell er ist und wie lange das Lesen dauert. Die Meta-Zeile beantwortet das vor dem ersten Absatz. Das Inhaltsverzeichnis zeigt den Umfang und erlaubt den Sprung zur eigenen Frage. Datum, Autorin und Stand machen den Text überprüfbar, das ist bei Ratgebern von Kanzlei, Praxis oder Handwerk der eigentliche Vertrauensbeweis. Gleiche Daten im Text und im JSON-LD vermeiden Widersprüche.",
  "wann_einsetzen": "Ratgeber, Insights und Neuigkeiten von Kanzlei, Praxis, Handwerk, Industrie, Verein, Kultur, Kurs- und Coaching-Anbietern sowie Freelancern. Immer, wenn ein Text eine eigene URL bekommt und geteilt oder gefunden werden soll.",
  "wann_nicht": "Nicht für Leistungsseiten (dafür leistungsseite-antwort-zuerst) und nicht für Projekte (case-study-geruest). Für Magazin-Inszenierungen mit Doppelseiten ist editorial-magazin-layout da. Kein Inhaltsverzeichnis und kein Lesefortschritt bei Texten unter etwa 600 Wörtern oder mit weniger als drei Zwischenüberschriften. Kein „Aktualisiert“-Datum, wenn sich inhaltlich nichts geändert hat.",
  "varianten": [
   "Ratgeber: lang, mit Kurz gesagt, Inhaltsverzeichnis mit Markierung, Checkliste, Zitat, Stand-Hinweis und Lesefortschritt",
   "Meldung: kurz, einspaltig, Datum vorn, ohne Inhaltsverzeichnis und Fortschritt, mit Pressekontakt, JSON-LD NewsArticle"
  ],
  "umsetzung": "Ein <article> mit <header> (Rubrik, h1, Vorspann, Meta-Zeile) und <footer> (Stand, Autorin). Datum als <time datetime=\"2026-10-14\"> mit Intl.DateTimeFormat('de-DE', {day: 'numeric', month: 'long', year: 'numeric'}), Änderungsdatum nur, wenn es eine inhaltliche Änderung gab. Lesezeit aus der Wortzahl des Artikeltexts (Wörter ÷ 200, aufgerundet), nicht von Hand. Das Inhaltsverzeichnis ist ein <nav aria-labelledby> mit <ol> aus den h2; ein IntersectionObserver mit rootMargin -20 % 0 -70 % setzt aria-current=\"true\" am aktiven Eintrag. h2 mit id und scroll-margin-top in Höhe des festen Kopfs. Der Lesefortschritt ist ein 2 px hohes Element mit transform: scaleX() über animation-timeline: scroll(root), Rückfall per scroll-Ereignis; aria-hidden, weil er nur Dekoration ist. Abbildungen als <figure> mit <figcaption> (Unterschrift plus Bildnachweis). Zitat als <blockquote> mit <cite>, Pull-Quote nur aus dem eigenen Text. Initiale mit initial-letter und Rückfall. Autorin als <address> nicht verwenden (das ist für Kontakt), sondern als Abschnitt mit rel=\"author\"-Link. JSON-LD Article bzw. NewsArticle aus denselben Feldern wie der sichtbare Kopf erzeugen. „Link kopieren“ über navigator.clipboard mit Rückmeldung in role=\"status\". Verwandte Artikel als Liste, ganze Zeile klickbar über einen Link mit ::after.",
  "mobil": "Einspaltig. Das Inhaltsverzeichnis steht als aufklappbares <details> unter dem Vorspann. Meta-Zeile bricht in zwei Zeilen um, Datum bleibt ausgeschrieben. Bilder randlos, Bildunterschrift darunter mit Rand. Verwandte Artikel als Liste ohne Bilder.",
  "reduzierte_bewegung": "Keine Bild-Einblendung, Sprünge im Inhaltsverzeichnis ohne weiches Scrollen. Der Lesefortschritt bleibt, weil er nur der Scrollposition folgt, ohne eigene Bewegung.",
  "barrierefreiheit": "Eine h1, h2 für die Abschnitte, keine übersprungenen Ebenen. Inhaltsverzeichnis als nav mit eigenem Namen, aktiver Eintrag mit aria-current. Fortschrittslinie aria-hidden. Bildunterschriften sichtbar, Alt-Texte beschreiben das Bild, nicht die Unterschrift. Datum als time mit maschinenlesbarem Wert. Kopieren-Rückmeldung in role=\"status\". Text mindestens 4,5 : 1, Meta-Farbe des Rezepts #7C6C5E statt #8E7C6D."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt (token-swiss-knackig laut Rezept kanzlei-beratung-souveraen)",
  "dauer_ms": "125 Farbe und Unterstreichung, 250 Inhaltsverzeichnis-Markierung und Kopieren-Rückmeldung, 500 Bild-Einblendung",
  "stagger_ms": "",
  "distanz": "Markierung im Inhaltsverzeichnis: Balken 2 px links, scaleY 0 → 1",
  "sonstiges": "Lesemaß 65ch, Fließtext 1.0625rem/1.6; Lesezeit 200 Wörter je Minute; Lesefortschritt 2 px",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kanzlei-beratung-souveraen"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 125
 },
 "gesehen_bei": [
  {
   "seite": "Google Search Central: Article structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/article",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: keine Pflichtfelder; empfohlen sind author (je Person ein Eintrag, mit name und url), datePublished, dateModified im ISO-8601-Format mit Zeitzone, headline und image in 16:9, 4:3 und 1:1. Grundlage für den JSON-LD-Block der Demo.",
   "art": "artikel"
  },
  {
   "seite": "kaufDA Magazin: Brötchen vorbestellen bei Lidl, Edeka, Aldi & Co.",
   "url": "https://www.kaufda.de/insights/broetchen-vorbestellen-bei-lidl-edeka-aldi-und-co-wo-geht-es/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Ratgeber-Artikel mit Veröffentlichungs- und Änderungsdatum (14.10.2025). Beispiel für eine Meta-Zeile mit Datum im Artikelkopf.",
   "art": "website"
  },
  {
   "seite": "IHK Region Stuttgart: Preisangaben im Handel und bei Dienstleistungen",
   "url": "https://www.ihk.de/stuttgart/fuer-unternehmen/recht-und-steuern/wettbewerbsrecht/preisangaben-im-handel-und-bei-dienstleistungen-676894",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Ratgeber zu einer Rechtsfrage ohne sichtbares Stand- oder Änderungsdatum. Gegenbeispiel: Bei Rechtsthemen kann die Leserin nicht prüfen, wie aktuell der Text ist.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Google Search Central: Article structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/article"
  },
  {
   "titel": "MDN: animation-timeline",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline"
  },
  {
   "titel": "MDN: initial-letter",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter"
  }
 ],
 "kombinierbar_mit": [
  "scrollspy-kapitelnavigation",
  "scroll-fortschritt",
  "lesesatz-text-wrap",
  "initial-letter-initialen",
  "kopieren-feedback",
  "editorial-magazin-layout",
  "team-ueber-mich-layout",
  "firmendaten-strukturiert",
  "sprunglinks-landmarken"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/artikel-seite/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/artikel-seite/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: BlogPosting und Article-JSON-LD in keinem demo.html, kein Artikel-Gerüst im Fundus [intern]. Award-Beleg nicht gefunden.",
   "Google-Dokumentation zu Article am 04.11.2026 abgerufen: keine Pflichtfelder, Datum mit Zeitzone, ein author-Eintrag je Person.",
   "Lesezeit mit 200 Wörtern je Minute ist eigene Festlegung, keine Norm.",
   "Inhalte der Demo sind allgemein gehalten und keine Rechtsberatung. Rechtliche Texte auf Kundenseiten vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Gerüst für Ratgeber und Meldungen: Rubrik, H1, Vorspann, Meta-Zeile mit Autorin, Datum im deutschen Format und Lesezeit aus der Wortzahl, Inhaltsverzeichnis mit Markierung, Lesefortschritt als 2-px-Linie und Article-JSON-LD aus denselben Daten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt (token-swiss-knackig, Rezept kanzlei-beratung-souveraen)",
   "dauer_ms": {
    "farbe_unterstreichung": 125,
    "inhalt_markierung": 250,
    "bild_einblendung": 500,
    "bild_skalierung": 1200,
    "sprung_scroll": 700
   },
   "inhalt_markierung": "Balken 2 px links, scaleY 0 → 1, Öffnen mit Eintritts-, Schließen mit Austrittskurve",
   "lesefortschritt": "2 px unter dem Kopf, scaleX über view-timeline --artikel, animation-range contain 0 % bis contain 100 %; Rückfall per scroll-Ereignis",
   "aktiver_abschnitt": "letzte h2, deren Oberkante über 30 % der Fensterhöhe liegt (IntersectionObserver rootMargin -20 % 0 -70 % weckt, scroll hält genau)",
   "lesezeit": "Wörter des Artikeltexts ÷ 200, aufgerundet",
   "raster": "Kopf 15rem / 1fr, Körper 15rem / 65ch / 1fr, Spaltenabstand clamp(32px, 5vw, 72px); einspaltig unter 900 px, Inhaltsverzeichnis dann als details",
   "typo": "H1 Newsreader 400 clamp(2rem, 1.3rem + 3.4vw, 4.25rem)/1.05, opsz 72; Vorspann Newsreader clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.45; Text Schibsted Grotesk 1.0625rem/1.6; Initiale initial-letter 3 2",
   "farben": "#F9F8F8 Grund, #EFEBEB Fläche, #1E1E50 Marke, #212529 Text, #7C6C5E Meta, #00BEE6 nur Fokusring und Sprungmarke",
   "aufmacher": "21:9 am Desktop, 4:3 randlos am Telefon; Einblenden opacity 0 → 1 und scale 1.02 → 1",
   "vorfuehrung": "Scroll zum Körper 1300 ms, zwei Klicks ins Inhaltsverzeichnis, weiter lesen 1400 ms, zurück 1200 ms, „Link kopieren“, Schleife"
  },
  "ausloeser": "scroll",
  "touch": "Einspaltig. Inhaltsverzeichnis als zugeklapptes details mit Zahl der Abschnitte unter dem Bild, Auswahl springt und klappt zu. Meta-Zeile bricht um, Aufmacher randlos 4:3, verwandte Artikel als Liste ohne Bilder. Hover-Unterstreichung entfällt.",
  "reduziert": "Kein Einblenden des Aufmachers, Sprünge im Inhaltsverzeichnis ohne weiches Scrollen, Markierung ohne Übergang. Der Lesefortschritt folgt weiter nur der Scrollposition.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen, erfundene Kanzlei Achterberg Sahin Rechtsanwälte PartG mbB aus Uelzen, Ratgeber „Unternehmensnachfolge: Warum fünf Jahre Vorlauf kein Luxus sind“ von Dr. Ilka Achterberg. Variante ?v=meldung: kurze Meldung „Neuer Sprechtag in Bad Bevensen“, Datum vorn, ohne Inhaltsverzeichnis und Fortschritt, mit Pressekontakt, JSON-LD NewsArticle. Pult: Variante und „JSON-LD zeigen“ (Article bzw. NewsArticle mit author je Person, datePublished und dateModified mit Zeitzone, drei Bildformate). Stand-Hinweis mit Änderungsgrund, Hinweis „ersetzt keine Beratung“, Pull-Quote nur aus dem eigenen Text, Porträt als markierter Platzhalter. Bilder beton-treppe und fenster-licht aus medien. Druck-CSS blendet Kopf, Inhaltsverzeichnis und Verwandte aus. Selbsturteil 4.",
  "varianten": [
   {
    "id": "ratgeber",
    "name": "Ratgeber",
    "wann": "Lange Fachtexte ab etwa 600 Wörtern und drei Zwischenüberschriften: Insights von Kanzlei, Praxis, Industrie, Handwerk, Kurs.",
    "werte": {
     "inhaltsverzeichnis": "sticky links, ab 900 px details",
     "lesefortschritt": "an",
     "kurz_gesagt": "drei Punkte als ol auf #EFEBEB",
     "json_ld": "Article"
    }
   },
   {
    "id": "meldung",
    "name": "Meldung",
    "wann": "Kurze Neuigkeit oder Pressemitteilung unter etwa 400 Wörtern: neuer Standort, Personalie, Termin, Auszeichnung.",
    "werte": {
     "inhaltsverzeichnis": "aus",
     "lesefortschritt": "aus",
     "datum": "Newsreader clamp(1.25rem, 1rem + .8vw, 1.75rem) über der H1, mit Wochentag",
     "pressekontakt": "Block auf #EFEBEB",
     "json_ld": "NewsArticle"
    }
   }
  ]
 }
}