{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "druckansicht-print",
 "name": "Druckansicht als System",
 "name_en": "Print stylesheet system with paper preview",
 "kurz": "Ein Druckstil für Speisekarte, Rezept, Rechtstext und Exposé: A4 mit Kopf, Fuß und „Seite 2 von 3“, weiße Flächen, Umbrüche an der richtigen Stelle, Linkadressen als Liste am Ende, Knopf „Drucken“ mit Optionen und eine Papieransicht mit demselben Stil.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "editorial",
  "ruhig",
  "sachlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "media-queries",
  "print"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein gemeinsamer Druckstil für alle Seiten, die Menschen ausdrucken: Speisekarte, Rezept, Exposé, Rechtstexte. @page legt A4, Ränder sowie Kopf und Fuß mit Seitenzahl „Seite 2 von 3“ fest. Navigation, Knöpfe, Karten und Banner fallen weg. Flächen werden weiß, Text schwarz, Bilder auf Wunsch weggelassen. Überschriften bleiben bei ihrem Text, Tabellenzeilen und Rezeptschritte brechen nicht. Linkadressen stehen als nummerierte Liste am Ende statt mitten im Satz. Ein Knopf „Drucken“ mit zwei, drei Optionen (mit Bildern, Linkliste) ruft den Druckdialog des Browsers. Eine Papieransicht zeigt denselben Druckstil auf dem Bildschirm.",
  "warum_es_wirkt": "Gedruckt wird, was man in der Hand braucht: die Karte für den Tisch, das Rezept in der Küche („nicht mit schmutzigen Fingern das Handy bedienen“), das Exposé zur Besichtigung, die AGB zum Abheften. Ohne Druckstil kommen Menüleiste, Cookie-Banner und graue Flächen mit. Ein sauberes Blatt mit Marke, Stand-Datum und Seitenzahl wirkt wie ein gesetztes Dokument und spart Toner.",
  "wann_einsetzen": "Gastronomie (Speisekarte, Mittagstisch), Lebensmittelhandwerk und Hofladen (Rezepte, Bestellliste), Immobilien (Exposé, Grundriss), Bestattung (Ablauf, Checkliste), Apotheke (Medikationsplan-Hilfe), Weingut (Preisliste), Rechtstexte aller Branchen. Als Grundausstattung in jede Seite mit langem Inhalt.",
  "wann_nicht": "Nicht als Ersatz für ein echtes PDF, wenn das Dokument verbindlich und unverändert sein muss (Vertrag, unterschriebenes Formular). Kein eigener „Druckversion“-Link auf eine zweite Seite: derselbe Inhalt mit @media print reicht. Keine Pflichtangaben nur im Druck oder nur am Bildschirm; Inhalt und Stand müssen gleich sein. Rechtstexte vom Kunden prüfen lassen.",
  "varianten": [
   "Speisekarte: Rubriken ohne Umbruch, Preise rechtsbündig mit Tabellenziffern, Allergene als Fußnote",
   "Rezept: Zutaten und Schritte nebeneinander, Portionen vor dem Druck wählen, Schritte brechen nicht",
   "Rechtstext: Stand-Datum im Kopf, Abschnittsnummern, Linkadressen als Liste, Seitenzahl „von“",
   "Exposé: Titelseite mit Foto, Eckdaten-Tabelle, Grundriss auf eigener Seite, Ansprechperson im Fuß"
  ],
  "umsetzung": "Ein Druckstil als <style media=\"print\"> bzw. print.css, der nur Klassen des Inhalts anspricht. @page { size: A4; margin: 18mm 16mm 20mm; @top-left { content: \"Marke · Dokument\" } @bottom-right { content: \"Seite \" counter(page) \" von \" counter(pages) } }, dazu @page :first ohne Kopf. Im Druck: Navigation, Knöpfe, Pult, Video und Karten display: none; Flächen weiß, Text #000, Linien 0,5 pt; Schrift in pt (10,5 bis 11 pt), Zeilenhöhe 1,35; orphans und widows 3; h2, h3 break-after: avoid; Rezeptschritte, Tabellenzeilen, Gerichte break-inside: avoid; thead wiederholt sich von selbst. Grid und Flex vor dem Umbruch in Blöcke auflösen, weil sie schlecht brechen. Linkadressen: vor dem Druck (beforeprint) sammelt ein Skript alle externen Links, setzt hochgestellte Nummern und eine Liste „Links in diesem Dokument“ ans Ende; ohne Skript greift a[href^=\"http\"]::after mit attr(href). Optionen vor dem Druck (Bilder, Linkliste, Portionen) setzen Klassen am <html>. Der Knopf „Drucken“ ruft window.print(). Die Papieransicht schaltet denselben <style> per media=\"all\" auf den Bildschirm und zeigt ihn als A4-Blatt; maßgeblich bleibt die Druckvorschau des Browsers bzw. ein PDF aus page.pdf().",
  "mobil": "Der Knopf „Drucken“ steht auch auf dem Telefon, denn Telefone drucken über AirPrint oder Mopria und speichern als PDF. Die Papieransicht skaliert das A4-Blatt auf die Breite. Optionen als große Schalter.",
  "reduzierte_bewegung": "Der Wechsel zur Papieransicht passiert sofort, ohne Gleiten.",
  "barrierefreiheit": "Der Druck ändert keinen Inhalt, nur die Darstellung. Bedeutung nie nur über Farbe (Graustufendruck): Allergene, Status und Hinweise mit Wort oder Zeichen. Der Knopf „Drucken“ ist ein echter <button> mit sichtbarem Namen; Optionen als Checkboxen mit Label. Die Papieransicht ist per Tastatur umschaltbar und meldet den Wechsel in einer role=status-Zeile."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "dauer_ms": "200 Hover und Optionen, 400 Wechsel Bildschirm zu Papier, 280 zurück",
  "stagger_ms": "",
  "distanz": "Blatt 16 px von unten",
  "sonstiges": "Druck: A4, Ränder 18/16/20 mm, Text 10,5 pt, Zeilenhöhe 1,35, orphans/widows 3. Randboxen in Chromium 153 geprüft (page.pdf, 05.11.2026).",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept gastro-warm-appetitlich (Kurve und Dauern); Druckwerte eigene Festlegung nach mgifford und 21pdf"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Migipedia (Migros): Drucken aus der App",
   "url": "https://migipedia.migros.ch/de/forum/allgemein/drucken-aus-der-app",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026: Eine Nutzerin vermisst „Rezept drucken“ in der App, weil sie „nicht mit schmutzigen Fingern das Handy oder Tablet bedienen will“. Migros antwortet, dass die Druckversion auf der Desktop-Website weiter verfügbar ist und für die App geprüft wird.",
   "art": "website"
  },
  {
   "seite": "Mike Gifford: Print-Friendly Style Sheets Accessibility Best Practices",
   "url": "https://mgifford.github.io/ACCESSIBILITY.md/examples/PRINT_ACCESSIBILITY_BEST_PRACTICES.html",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026 (Copyright 2026): Linkadressen per ::after mit attr(href), außer Anker und JavaScript-Links; Navigation, Banner und Widgets ausblenden; Größen in pt; Überschriften nicht am Seitenende allein lassen; Tabellenköpfe wiederholen; nicht nur Farbe, in Graustufen testen; @page mit A4 und großzügigen Rändern.",
   "art": "artikel"
  },
  {
   "seite": "21pdf: CSS for print, the complete guide",
   "url": "https://21pdf-marketing.pages.dev/blog/css-print-complete-guide",
   "auszeichnung": "",
   "beobachtung": "Artikel vom 24.04.2026: @page size und margin, break-before/after/inside, orphans und widows (Empfehlung 3), print-color-adjust. Behauptet, Chromium rendere Randboxen (@top-center usw.) nicht. Eigene Prüfung am 05.11.2026 mit Playwright und Chromium 153: @top-left und @bottom-right mit counter(page) und counter(pages) erscheinen im PDF.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: @page",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@page"
  },
  {
   "titel": "MDN: break-inside",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside"
  },
  {
   "titel": "MDN: Window: beforeprint event",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event"
  }
 ],
 "kombinierbar_mit": [
  "speisekarte-editorial",
  "rechtstext-layout",
  "objekt-steckbrief-expose",
  "wein-steckbrief-pflichtangaben",
  "gutschein-konfigurator",
  "trauerfall-sofortleiste",
  "firmendaten-strukturiert",
  "zoom-und-textabstand-robust",
  "kontrastmodus-forced-colors"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/druckansicht-print/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/druckansicht-print/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4 [intern]: @media print in 8 Demos und 5 Starter-style.css, jeweils eigen gebaut. Dieses Muster ist die gemeinsame Basis; rechtstext-layout, speisekarte-editorial und gutschein-konfigurator haben eigene Druckregeln und können sie übernehmen.",
   "Ein Website-Beleg (Migros: Druckversion für Rezepte, Nutzerwunsch), zwei Fachartikel. Award-Beleg fehlt.",
   "Randboxen mit counter(pages) am 05.11.2026 selbst in Chromium 153 (Playwright page.pdf) geprüft. Firefox und Safari nicht geprüft; dort fehlt der Kopf und Fuß womöglich, der Inhalt bleibt.",
   "Die Papieransicht ist eine Annäherung: Seitenumbrüche zeigt nur die echte Druckvorschau."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Druckstil für Speisekarte, Rezept, Rechtstext und Exposé: A4 mit Kopf, Fuß und „Seite 2 von 3“, weiße Flächen, Umbrüche an der richtigen Stelle, Linkadressen als Liste am Ende, Knopf „Drucken“ mit Optionen und eine Papieransicht mit demselben Stil.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (Rezept gastro-warm-appetitlich), Schließen cubic-bezier(0.7, 0, 0.84, 0)",
   "dauer_ms": {
    "hover_optionen": 200,
    "papier_auf": 400,
    "papier_zu": 280
   },
   "distanz": "Blatt 16 px von unten mit Einblenden, zurück 8 px nach unten",
   "seite": "@page size A4, margin 22mm 16mm 22mm (Exposé 22mm 18mm 24mm); Randboxen @top-left Marke · Dokument, @top-right Stand, @bottom-left Adresse und Telefon, @bottom-right \"Seite \" counter(page) \" von \" counter(pages), 8 pt; benannte Seiten karte, rezept, recht, expose über page:; @page expose:first ohne Kopf",
   "schrift_druck": "10,5 pt, Zeilenhöhe 1,38; h1 26 pt, Rubrik 13 pt, Gericht 10 pt, Fußnoten und Linkliste 8,5 pt; orphans und widows 3",
   "umbrueche": "h1 bis h3 break-after: avoid; Gericht, Schritt, Zutat, Tabellenzeile, Tipp, Fußnote break-inside: avoid; Exposé: Text und Grundriss break-before: page",
   "farbe_druck": "Text #000, Flächen weiß, Kästen als 0,5 bis 0,75 pt Rahmen statt Füllung, Platzhalter gestrichelt unterstrichen; Bilder nur, wenn „Mit Bild“ an ist (Klasse ohne-bilder)",
   "links": "beforeprint und Papieransicht: externe Links bekommen hochgestellte Nummer, Liste „Links in diesem Dokument“ am Ende (doppelte Adressen eine Nummer); Option „im Text“: a[href^=\"http\"]::after mit attr(href)",
   "papieransicht": "derselbe <style id=\"druckstil\" media=\"print\"> mit media=\"all\", Blatt 210 mm mit 26/16/28 mm Rand, Kopf und Fuß als Elemente nur in der Papieransicht, Seitenumbruch als gestrichelte Linie, zoom = min(1, (Breite − 24) / 794)",
   "rezept": "Menge 1 bis 4 Laibe, Gramm mal Laibe mit Intl.NumberFormat, druckt mit",
   "geprueft_pdf": "Chromium 153 page.pdf mit preferCSSPageSize: Karte 1 Seite, Rezept 2, Rechtstext 1, Exposé 3 (Titelseite ohne Kopf)",
   "vorfuehrung": "Wechsel Bildschirm und Papier, 1800 ms Bildschirm, 2600 ms Papier"
  },
  "ausloeser": "klick",
  "touch": "Druckleiste umbricht, Knopf „Drucken“ über die volle Breite unter 420 px; Karte einspaltig. Papieransicht skaliert das A4-Blatt per zoom auf die Breite.",
  "reduziert": "Papieransicht erscheint und verschwindet ohne Weg und Überblendung; Knöpfe ohne Verschiebung.",
  "korrekturen": {},
  "geprueft": "05.11.2026",
  "notiz": "Welten: speisekarte, rezept, rechtstext = Rezept gastro-warm-appetitlich, erfundener Landgasthof Haselmaus in Nördlingen (Fraunces, Commissioner); expose = Rezept immobilien-diskret-hochwertig, erfundene Bernsdorff Immobilien in Schwäbisch Hall (Libre Caslon Display, Hanken Grotesk). Bilder zitronen-tisch, foto-hero-mit-leiste-backstube, foto-hero-villa aus medien; Grundriss als SVG. Rufnummern mit 0 nach der Vorwahl. Allergene, Gutscheinbedingungen, Provision und GEG-Angaben sind Beispiele: vom Kunden prüfen lassen. PDFs aller vier Varianten erzeugt und angesehen; Randboxen in Firefox und Safari nicht geprüft. Selbsturteil 4.",
  "varianten": [
   {
    "id": "speisekarte",
    "name": "Speisekarte",
    "wann": "Gastronomie, Hofladen, Weingut: Karte oder Preisliste, die auf den Tisch oder an die Tür kommt.",
    "werte": {
     "aufbau": "zwei Spalten (columns: 2, Abstand 9 mm), Rubrik 13 pt mit 1 pt Linie, Preise rechts mit Tabellenziffern, Allergene als Buchstaben und Fußnote im Rahmen"
    }
   },
   {
    "id": "rezept",
    "name": "Rezept",
    "wann": "Lebensmittelhandwerk, Hofladen, Gastro, Kurs: Rezept zum Nachkochen, das in der Küche liegt.",
    "werte": {
     "aufbau": "Zutaten im Rahmen links 58 mm, Schritte rechts mit Ziffer 16 pt, Bild als Streifen 21:6",
     "menge": "1 bis 4 Laibe vor dem Druck"
    }
   },
   {
    "id": "rechtstext",
    "name": "Rechtstext",
    "wann": "Gutscheinbedingungen, AGB, Impressum, Datenschutz zum Abheften, mit Stand und Fassung.",
    "werte": {
     "aufbau": "Inhaltsverzeichnis fällt weg, Abschnittsnummern bleiben, Text 9,8 pt",
     "links": "vier Adressen als Liste am Ende"
    }
   },
   {
    "id": "expose",
    "name": "Exposé",
    "wann": "Immobilien: Exposé zur Besichtigung mit Titelseite, Eckdaten, Energieausweis und Grundriss.",
    "werte": {
     "aufbau": "Titelseite mit Foto 16:9, Eckdaten-Tabelle und Preis im Rahmen; Text und Energieausweis Seite 2, Grundriss Seite 3",
     "seite": "@page expose: Rand 22/18/24 mm, Kopf ab Seite 2"
    }
   }
  ]
 }
}