From 8d3ac635744f3672b8a1de475461fd879eef8b04 Mon Sep 17 00:00:00 2001
From: mhoennig <michael@hoennig.de>
Date: Tue, 21 Jul 2026 21:12:07 +0200
Subject: [PATCH] =?UTF-8?q?frontend:=20Druck-Stylesheet=20=E2=80=94=20nur?=
 =?UTF-8?q?=20das=20Diagramm=20drucken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TASKS Phase 2. @media print in style.css blendet Kopfzeile, Editor-Panel,
Splitter, alle Bedienelemente des Diagramm-Kopfs, Warnungen und Footer aus; das
Diagramm füllt die Seite (App-Grid -> Block, Overflow sichtbar) und darf über
mehrere Seiten laufen. Statusfarben werden mitgedruckt (print-color-adjust:
exact), Knoten brechen nicht über den Seitenrand (break-inside: avoid), der
Günstigster-Pfad-Overlay (in #out) kommt mit.

Verifiziert per Druck-Emulation (Regeln testweise als Screen-Style angewendet):
Editor/Kopf/Splitter/Warnungen/Footer display:none, Diagramm sichtbar, 18
Knoten, Farben + Pfadlinie erhalten. SPEC §9 (Druck) ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/SPEC.md           | 10 ++++++++++
 docs/TASKS.md          |  5 ++++-
 frontend/src/style.css | 23 +++++++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/SPEC.md b/docs/SPEC.md
index 1e8b757..b4f7eae 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -235,6 +235,16 @@ Lesereihenfolge** (Wurzeln, dann Kinder in Tiefe). Ein sichtbarer
 ist eine **Live-Region** (`role="status"`, `aria-live="polite"`), sodass neue
 Warnungen (z. B. gemischte Gates) angesagt werden.
 
+### Druck
+Ein `@media print`-Stylesheet reduziert die Seite auf das **Diagramm**:
+Kopfzeile, Editor-Panel, Splitter, sämtliche Bedienelemente (Diagramm-Kopf),
+Warnungen und Footer werden ausgeblendet; das Diagramm füllt die Seite und darf
+über mehrere Seiten laufen. Die **Statusfarben** werden bewusst mitgedruckt
+(`print-color-adjust: exact`), Knoten brechen nicht über den Seitenrand
+(`break-inside: avoid`), und der Günstigster-Pfad-Overlay wird mitgedruckt.
+Sehr breite Bäume laufen bei 100 % über die Seitenbreite hinaus — dann im
+Druckdialog „an Seite anpassen“ bzw. Querformat wählen.
+
 ## 10. Beispiel (kanonisch)
 
 ```
diff --git a/docs/TASKS.md b/docs/TASKS.md
index e8a6263..55a4bc5 100644
--- a/docs/TASKS.md
+++ b/docs/TASKS.md
@@ -37,7 +37,10 @@ Abhaken beim Erledigen; neue Aufgaben unten anfügen.
       `aria-hidden`; Knoten `tabindex="0"` (Fokus = Lesereihenfolge) mit
       `:focus-visible`-Rahmen; `#warn` als Live-Region (`role=status`,
       `aria-live=polite`). Snapshots aktualisiert.
-- [ ] Druck-Stylesheet (Diagramm ohne Editor-Panel).
+- [x] Druck-Stylesheet (Diagramm ohne Editor-Panel).
+      → `@media print` in `style.css`: blendet Kopf/Editor/Splitter/Bedien-
+      elemente/Warnungen/Footer aus, Diagramm füllt die Seite; Statusfarben via
+      `print-color-adjust:exact`, `break-inside:avoid`, Pfad-Overlay inklusive.
 - [ ] Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).
 
 ## Deployment
diff --git a/frontend/src/style.css b/frontend/src/style.css
index b51a112..828cf44 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -608,3 +608,26 @@
     background:var(--card);border:1px solid rgba(36,52,71,.15);
     border-radius:8px;padding:5px;box-shadow:0 6px 18px rgba(36,52,71,.28);
   }
+
+  /* ---------- Druck: nur das Diagramm (SPEC §9, TASKS Phase 2) ----------
+     Editor-Panel, Bedienelemente, Splitter, Kopfzeile, Warnungen und Footer
+     verschwinden; das Diagramm füllt die Seite und darf über mehrere Seiten
+     laufen. Statusfarben werden bewusst mitgedruckt (Browser strippen
+     Hintergründe sonst). Der Günstigster-Pfad-Overlay liegt in #out und wird
+     mitgedruckt. */
+  @media print{
+    html,body{height:auto!important;overflow:visible!important;background:#fff!important}
+    header,.panel.editor,.gutter,.panel.right .panel-head,
+    .warnings,.zoomctl,.site-footer{display:none!important}
+    .app,.app.side{display:block!important;max-width:none!important;width:auto!important;
+      height:auto!important;margin:0!important;gap:0!important}
+    .panel.right{grid-area:auto!important;background:#fff!important;border:0!important;
+      box-shadow:none!important;border-radius:0!important;
+      height:auto!important;min-height:0!important;overflow:visible!important}
+    .diagram{overflow:visible!important;height:auto!important;padding:8px 0!important}
+    /* Statusfarben & Pfad-Töne mitdrucken */
+    *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
+    /* Knoten nicht über den Seitenrand zerschneiden */
+    #out li{break-inside:avoid}
+    @page{margin:12mm}
+  }