/* Zusätzliches CSS – alles, was sich nicht sinnvoll mit Tailwind-Klassen
   direkt im HTML ausdrücken lässt. */

/* Scrollbalken-Platz immer reservieren, damit der zentrierte Inhalt beim
   Wechsel zwischen kurzen und langen Ansichten nicht seitlich springt. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Reiter-Leiste: auf schmalen Screens horizontal scrollbar, ohne Scrollbalken,
   mit weichem Rand als Hinweis "hier geht's weiter". */
[data-tabbar] { scroll-snap-type: x proximity; }
[data-tabbar] > button { scroll-snap-align: center; }
[data-tabbar]::-webkit-scrollbar { display: none; }
[data-tabbar] { scrollbar-width: none; }
@media (max-width: 767px) {
  [data-tabbar] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 0.15s ease-out; }

/* Schlanke, dezente Scrollbalken (Webkit-Browser) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); }

/* Datum-/Uhrzeit-Picker-Icon im Dark Mode invertieren, sonst kaum sichtbar */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Grundlegende Tap-Optik auf Touch-Geräten etwas entschärfen */
button, a { -webkit-tap-highlight-color: transparent; }