From 83342c8bf13b34f6a54563bf74b6de9f2e8bc576 Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Thu, 29 Jan 2026 11:22:35 +0100
Subject: ergaenze eine Konfetti-Animation

---
 kuchenstand.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

(limited to 'kuchenstand.css')

diff --git a/kuchenstand.css b/kuchenstand.css
index 02b7539..0c4a37e 100644
--- a/kuchenstand.css
+++ b/kuchenstand.css
@@ -38,3 +38,60 @@ ul.klassen-navigation li {
 ul li:hover {
   background-color: #111111;
 }
+
+.konfetti-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Prevent interaction */
+  overflow: hidden;
+}
+
+@keyframes konfetti-fall {
+  0% {
+    transform: translateY(-100%) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(360deg);
+    opacity: 0.8;
+  }
+}
+
+.konfetti-stueck {
+  position: absolute;
+  width: 10px;
+  height: 20px;
+  background: var(--konfetti-color, red);
+  opacity: 0.9;
+  animation: konfetti-fall var(--fall-dauer, 4s) linear infinite;
+}
+
+/* Randomize confetti properties */
+.konfetti-stueck:nth-child(1) {
+  left: 10%;
+  --konfetti-farbe: #ff6347;
+  --fall-dauer: 3s;
+}
+.konfetti-stueck:nth-child(2) {
+  left: 25%;
+  --konfetti-farbe: #ffa500;
+  --fall-dauer: 5s;
+}
+.konfetti-stueck:nth-child(3) {
+  left: 40%;
+  --konfetti-farbe: #32cd32;
+  --fall-dauer: 4.5s;
+}
+.konfetti-stueck:nth-child(4) {
+  left: 60%;
+  --konfetti-farbe: #1e90ff;
+  --fall-dauer: 3.5s;
+}
+.konfetti-stueck:nth-child(5) {
+  left: 80%;
+  --konfetti-farbe: #ff69b4;
+  --fall-dauer: 6s;
+}
-- 
cgit v1.2.3