"Feature: Add calendar and guest status templates"

backend/app/static/css/input.css

@@ -1430,4 +1430,97 @@ footer {
 /* Verbesserte Form-Labels */
 .form-label-new {
   @apply block mb-2 text-sm font-medium text-slate-900 dark:text-white;
-}
+}
+
+/* Dark Mode Toggle - Premium Design */
+.dark-mode-toggle-premium {
+  @apply relative cursor-pointer outline-none focus:outline-none;
+  z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */
+}
+
+.dark-mode-toggle-premium:focus-visible {
+  @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-blue-400 dark:ring-offset-slate-900 rounded-full;
+}
+
+/* Animationen für verzögerte Pulse-Effekte */
+@keyframes delayed-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animation-delay-500 {
+  animation-delay: 0.5s;
+  animation: delayed-pulse 2s ease-in-out infinite;
+}
+
+.animation-delay-1000 {
+  animation-delay: 1s;
+  animation: delayed-pulse 2s ease-in-out infinite;
+}
+
+.animation-delay-1500 {
+  animation-delay: 1.5s;
+  animation: delayed-pulse 2s ease-in-out infinite;
+}
+
+/* Improved icon transitions */
+.dark-mode-toggle-premium .sun-icon,
+.dark-mode-toggle-premium .moon-icon {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Glassmorphism effect for better visual depth */
+.dark-mode-toggle-premium .backdrop-blur-md {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Enhanced hover effects */
+.dark-mode-toggle-premium:hover .sun-icon svg,
+.dark-mode-toggle-premium:hover .moon-icon svg {
+  filter: drop-shadow(0 0 8px currentColor);
+  transform: scale(1.1);
+}
+
+/* Smooth gradient transitions */
+.dark-mode-toggle-premium .bg-gradient-to-r {
+  transition: opacity 0.5s ease-in-out;
+}
+
+/* Better shadow effects */
+.dark-mode-toggle-premium .shadow-lg {
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.dark .dark-mode-toggle-premium .shadow-lg {
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.3), 
+    0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+/* Rotation animation for smooth icon transitions */
+@keyframes icon-rotate-in {
+  0% {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+.dark-mode-toggle-premium .sun-icon.icon-enter,
+.dark-mode-toggle-premium .moon-icon.icon-enter {
+  animation: icon-rotate-in 0.5s ease-out forwards;
+}
+
+/* Active state animation */
+.dark-mode-toggle-premium:active > div {
+  transform: scale(0.95);
+  transition: transform 0.1s ease-out;
+}
+
+/* User Menu Button - Neues Design */