{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "rechtstext-layout",
 "name": "Rechtstexte lesbar setzen",
 "name_en": "Legal pages layout (imprint, privacy policy)",
 "kurz": "Impressum und Datenschutz als lesbares Dokument: Stand-Datum, Inhaltsverzeichnis mit mitlaufender Markierung, Anker zum Kopieren, deutsche Trennung, Druckfassung und gezählte, deutlich markierte Platzhalter statt erfundener Rechtstexte.",
 "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": [
  "sachlich",
  "lesbar",
  "strukturiert"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intersection-observer",
  "print-css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Gerüst für Impressum und Datenschutzerklärung als lesbares Dokument statt Textwand. Oben stehen Titel, Stand-Datum und ein Inhaltsverzeichnis mit Sprungmarken; am Desktop bleibt es seitlich stehen und markiert den aktuellen Abschnitt. Jede Überschrift hat einen eigenen Anker zum Teilen. Lange Wörter wie „Auftragsverarbeitungsvertrag“ werden deutsch getrennt, Adressen und E-Mails nicht. Eine Druckfassung zeigt Links als Adresse und lässt Kopf und Fuß weg. Alle Inhalte, die der Kunde liefern oder prüfen lassen muss, sind als Platzhalter markiert und gezählt; das Gerüst erfindet keine Rechtstexte.",
  "warum_es_wirkt": "Rechtstexte werden selten gelesen, aber gezielt gesucht: Wer ist verantwortlich, welche Dienste laufen, wie widerspreche ich. Ein Inhaltsverzeichnis mit Ankern bringt Besucher direkt an die Stelle; ein sichtbares Stand-Datum zeigt, ob der Text gepflegt ist. Für Generatoren ist das Gerüst wichtig, weil hier sonst frei erfundene Rechtstexte entstehen. Markierte Platzhalter machen sichtbar, was vor dem Start fehlt.",
  "wann_einsetzen": "Auf jeder Kundenseite für Impressum und Datenschutzerklärung, ebenso für AGB, Widerrufsbelehrung, Barrierefreiheitserklärung oder Teilnahmebedingungen. Besonders wenn die Texte aus einem Generator oder von einer Kanzlei kommen und nur gesetzt werden müssen.",
  "wann_nicht": "Nicht als Ersatz für geprüfte Texte: Die Demo zeigt Gerüst und Platzhalter, keine Rechtsberatung, vom Kunden prüfen lassen. Kein Inhaltsverzeichnis bei sehr kurzen Seiten (unter vier Abschnitten). Kein Text im Bild oder als PDF allein. Keine Akkordeons, die Text vor der Browser-Suche verstecken.",
  "varianten": [
   "Datenschutzerklärung: langes Dokument mit seitlichem Inhaltsverzeichnis, Abschnittsmarkierung und Platzhalter-Zähler",
   "Impressum: kurze Seite, Angaben als Definitionsliste, ohne Seitenleiste",
   "Druckfassung über @media print: Links als Adresse, Seitenumbruch vor Hauptabschnitten, Stand-Datum im Kopf",
   "Mehrere Fassungen mit Stand-Datum und Änderungshinweis"
  ],
  "umsetzung": "Ein article mit h1, Stand-Datum als time und einem nav aria-label=\"Inhalt\" mit ol. Am Desktop zwei Spalten: Inhaltsverzeichnis position: sticky, darunter der Text mit max. 68ch. Ein IntersectionObserver mit rootMargin \"0px 0px -70% 0px\" setzt aria-current=\"location\" auf den Eintrag des sichtbaren Abschnitts. Jede h2 hat eine id und einen kleinen Anker-Knopf, der die Adresse mit #abschnitt kopiert. scroll-margin-top für alle Ziele. Text mit lang=de, hyphens: auto, hyphenate-limit-chars: 10 4 4 und overflow-wrap: break-word; Adressen, E-Mails, Telefonnummern und Registernummern bekommen hyphens: manual und white-space: nowrap bzw. wbr. Platzhalter als mark.platzhalter mit sichtbarem Label und gestrichelter Kante, ein Zähler oben springt von Platzhalter zu Platzhalter. Druck: @media print blendet Kopf, Fuß, Inhaltsverzeichnis und Knöpfe aus, setzt Links mit a[href^=http]::after { content: \" (\" attr(href) \")\" }, break-before: page für Hauptabschnitte, break-inside: avoid für Definitionslisten, @page mit Rand. Auf dem Telefon klappt das Inhaltsverzeichnis in ein details-Element über dem Text.",
  "mobil": "Inhaltsverzeichnis als aufklappbares details-Element unter dem Titel, Text einspaltig in voller Breite mit Trennung. Anker-Knöpfe bleiben sichtbar (kein Hover nötig). Ein Knopf „Nach oben“ erscheint erst nach dem ersten Abschnitt.",
  "reduzierte_bewegung": "Sprungmarken springen ohne weiches Scrollen, die Markierung im Inhaltsverzeichnis wechselt ohne Gleiten.",
  "barrierefreiheit": "Eine h1, Abschnitte als h2 und h3 in sauberer Reihenfolge. Inhaltsverzeichnis als nav mit eigenem Namen und aria-current=location. Nach einem Sprung liegt der Fokus auf der Überschrift. Platzhalter sind auch ohne Farbe erkennbar (Label „Platzhalter“, gestrichelte Kante, eckige Klammern). Kein Text in Akkordeons versteckt, damit die Browser-Suche alles findet. Kontrast ≥ 4,5 : 1 auch im Druck."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) beim Austritt",
  "dauer_ms": "200 Markierung im Inhaltsverzeichnis, 350 Aufklappen, 245 Zuklappen, 500 Sprung zum Abschnitt",
  "stagger_ms": "",
  "distanz": "Markierungsbalken folgt nur in y",
  "sonstiges": "Werte aus dem Rezept industrie-b2b-mittelstand (token-swiss-knackig). Text steht sofort, keine Einblendungen.",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept industrie-b2b-mittelstand"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Buckinghamshire Council: How to use the information template and contents panel",
   "url": "https://www.buckinghamshire.gov.uk/about/design-resources/share-guidance-or-information/how-to-use-the-information-template-and-contents-panel/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Inhaltsverzeichnis unter dem Titel ab mehr als drei Überschriften; bei sehr langen Listen besser eine Vorlage mit Überschriften in der Seitenleiste. Überschriften sollen für sich verständlich sein, weil sie in Suchergebnissen erscheinen.",
   "art": "artikel"
  },
  {
   "seite": "Adrian Roselli: Techniques to Break Words",
   "url": "https://adrianroselli.com/2024/02/techniques-to-break-words.html",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (über einen Lese-Proxy), Artikel vom 29.02.2024: hyphens: auto trennt nach lang-Attribut und Wörterbuch des Browsers, overflow-wrap: anywhere bricht ohne Trennstrich. Kein ­ in URLs, E-Mail-Adressen und Code; dort lieber wbr.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Adrian Roselli: Techniques to Break Words",
   "url": "https://adrianroselli.com/2024/02/techniques-to-break-words.html"
  },
  {
   "titel": "MDN: hyphenate-limit-chars",
   "url": "https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/hyphenate-limit-chars"
  }
 ],
 "kombinierbar_mit": [
  "barrierefreiheit-seite",
  "sprunglinks-landmarken",
  "firmendaten-strukturiert",
  "lesesatz-text-wrap",
  "kolophon-footer",
  "zoom-und-textabstand-robust"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Die Recherche Runde 4 nennt nur den internen Befund (jeder Starter hat impressum.html und datenschutz.html ohne gemeinsames Gerüst, Druck-CSS in 5 Starter-style.css, aber in keinem Muster). Belege sind eine Inhaltsrichtlinie (Buckinghamshire Council) und ein Fachartikel zur Worttrennung. Website-Belege mit Award fehlen.",
   "Keine Rechtsberatung: Pflichtangaben für Impressum und Datenschutzerklärung, Wegfall des OS-Links (laut Recherche 03.11. seit 20.07.2025) und alle Texte vom Kunden prüfen lassen.",
   "hyphenate-limit-chars: Browser-Stand am 04.11.2026 nicht geprüft; ohne Unterstützung trennt hyphens: auto mit Standardwerten."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Impressum und Datenschutz als lesbares Dokument: Stand-Datum, Inhaltsverzeichnis mit mitlaufender Markierung, Anker zum Kopieren, deutsche Trennung, Druckfassung und gezählte, deutlich markierte Platzhalter statt erfundener Rechtstexte.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt",
   "dauer_ms": "200 Markierung und Hover, 350 Aufklappen, 245 Zuklappen, 500 Sprung zum Abschnitt (rAF mit derselben Kurve)",
   "markierung": "Balken im Inhaltsverzeichnis: translateY auf offsetTop des Eintrags, Höhe des Eintrags, 3 px Verkehrsblau links, Fläche #E4E5E1",
   "scrollspy": "IntersectionObserver rootMargin 0px 0px −70% 0px, erster sichtbarer Abschnitt, aria-current=location",
   "trennung": "lang=de, hyphens: auto, hyphenate-limit-chars: 10 4 4, overflow-wrap: break-word; Adressen, E-Mail, Telefon, Registernummern nowrap bzw. wbr; Platzhalter hyphens: manual",
   "satzspiegel": "Seitenleiste minmax(220px, 290px), Text max. 68ch; Impressum ohne Seitenleiste, Blatt zweispaltig bis 980 px",
   "platzhalter": "mark.platzhalter und .ph-block: Schraffur #F6ECC4/#F1E3AD, gestrichelte Kante #7A6410, Label „Platzhalter · vom Kunden prüfen lassen“, Zähler mit „Nächster Platzhalter“ (Fokus, Mitte, Ring 3 px)",
   "druck": "@media print und Pult-Ansicht .druckansicht: Navigation, Inhaltsverzeichnis, Knöpfe und Fuß weg, Links mit Adresse, break-before: page vor Hauptabschnitten, @page 18 mm 16 mm 20 mm",
   "nach_oben": "ab 700 px Scroll, 350 ms ein, 245 ms aus"
  },
  "ausloeser": "scroll",
  "touch": "Inhaltsverzeichnis als zugeklapptes details unter dem Titel, schließt nach dem Sprung. Anker-Knöpfe immer sichtbar. Definitionslisten und die Dienste-Tabelle stehen untereinander (Tabelle mit Spaltennamen je Zelle).",
  "reduziert": "Sprünge und „Nach oben“ ohne weiches Scrollen, Markierung ohne Gleiten.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept industrie-b2b-mittelstand, erfundener Hersteller Wiedenau Spanntechnik GmbH in Schmalkalden. Strichpunkt Sans (wdth 110 bis 130) und Archivo, Stahlblau-Kopf, Verkehrsblau nur für „Projekt anfragen“, aktiven Eintrag und Fokus; Abschnittscodes D.01 bis D.10 als Normschrift-Geste. Inhalte sind ausschließlich Gliederung und Platzhalter (was an die Stelle gehört), keine Rechtstexte. Pult: Dokument, Silbentrennung an/aus, Druckansicht. Fußlinks wechseln zwischen Impressum und Datenschutz. Belege: Inhaltsrichtlinie Buckinghamshire Council, Adrian Roselli zur Worttrennung. Keine Rechtsberatung, vom Kunden prüfen lassen. Selbsturteil 4.",
  "varianten": [
   {
    "id": "datenschutz",
    "name": "Datenschutzerklärung",
    "wann": "Lange Rechtstexte (Datenschutz, AGB, Teilnahmebedingungen) mit mehr als vier Abschnitten.",
    "werte": {
     "aufbau": "Seitenleiste mit 10 Einträgen, Text 68ch, Dienste-Tabelle, Fassungen als details"
    }
   },
   {
    "id": "impressum",
    "name": "Impressum",
    "wann": "Kurze Pflichtseiten (Impressum, Kontakt-Angaben): kein Inhaltsverzeichnis, Angaben als Blatt.",
    "werte": {
     "aufbau": "Blatt zweispaltig bis 980 px, dt als Label über dd, keine Seitenleiste",
     "vorfuehrung": "vier Platzhalter nacheinander anspringen, 1500 ms Abstand"
    }
   }
  ]
 }
}