/* Eigene Styles für den Blog (optional, da Tailwind genutzt wird) */ 

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
  background: #f3e8ff;
}
::-webkit-scrollbar-thumb {
  background: #f472b6;
  border-radius: 8px;
}

.prose {
  max-width: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Card Hover Animation */
article.group:hover img {
  box-shadow: 0 8px 32px 0 rgba(236, 72, 153, 0.15);
}

/* Button Style Beispiel */
.btn-zaya {
  background: linear-gradient(90deg, #f472b6 0%, #60a5fa 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: bold;
  box-shadow: 0 2px 8px 0 rgba(236, 72, 153, 0.15);
  transition: background 0.3s, box-shadow 0.3s;
}
.btn-zaya:hover {
  background: linear-gradient(90deg, #60a5fa 0%, #f472b6 100%);
  box-shadow: 0 4px 16px 0 rgba(236, 72, 153, 0.25);
}

body.dark {
  background: linear-gradient(135deg, #18181b 0%, #312e81 100%) !important;
  color: #f3f4f6;
}

.dark .prose {
  color: #e5e7eb;
}

.dark article.group {
  background: rgba(24,24,27,0.95);
  border-color: #27272a;
}

.dark .btn-zaya {
  background: linear-gradient(90deg, #f472b6 0%, #60a5fa 100%);
  color: #fff;
}

.dark .btn-zaya:hover {
  background: linear-gradient(90deg, #60a5fa 0%, #f472b6 100%);
}

.dark ::-webkit-scrollbar {
  background: #18181b;
}
.dark ::-webkit-scrollbar-thumb {
  background: #f472b6;
}

.sidebar-kategorien {
  @apply rounded-2xl shadow bg-white/90 dark:bg-gray-900/90 p-8;
}
.sidebar-kategorien h3 {
  @apply text-lg font-bold mb-4 text-pink-600 dark:text-pink-400;
}
.sidebar-kategorien ul li a {
  @apply block px-3 py-2 rounded-lg transition font-medium text-gray-600 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 hover:bg-pink-50 dark:hover:bg-gray-800;
}