From 890b811bc1f3cc0be93a3f1e9c879c5e6da5ee71 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 12 May 2026 10:49:10 +0200
Subject: [PATCH] fix(style): move ChronikFuerDichBox animation to global CSS
 to suppress Tailwind noise

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/activity/ChronikFuerDichBox.svelte    | 25 +--------------
 frontend/src/routes/layout.css                | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/activity/ChronikFuerDichBox.svelte b/frontend/src/lib/activity/ChronikFuerDichBox.svelte
index 14a440f1..9cb94c24 100644
--- a/frontend/src/lib/activity/ChronikFuerDichBox.svelte
+++ b/frontend/src/lib/activity/ChronikFuerDichBox.svelte
@@ -79,7 +79,7 @@ function href(n: NotificationItem): string {
 		<ul role="list" class="flex flex-col gap-2">
 			{#each unread as n (n.id)}
 				<li
-					class="fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas"
+					class="chronik-fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas"
 				>
 					<a
 						href={href(n)}
@@ -124,26 +124,3 @@ function href(n: NotificationItem): string {
 		</ul>
 	{/if}
 </section>
-
-<style>
-.fade-in {
-	animation: chronik-fade-in 160ms ease-out;
-}
-
-@keyframes chronik-fade-in {
-	from {
-		opacity: 0;
-		transform: translateY(-4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.fade-in {
-		animation: none;
-	}
-}
-</style>
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 85c41e67..f3e289da 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -459,3 +459,34 @@
 		transform: translateX(350%);
 	}
 }
+
+@media print {
+	:global(.app-nav) {
+		display: none;
+	}
+
+	@page {
+		margin: 1.5cm;
+	}
+}
+
+.chronik-fade-in {
+	animation: chronik-fade-in 160ms ease-out;
+}
+
+@keyframes chronik-fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.chronik-fade-in {
+		animation: none;
+	}
+}