/* TSV Pfersee - öffentliche Website: eigenständige CSS-Datei
   (vorher inline in templates/base.html; hier zusammengeführt, unverändertes Verhalten). */

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-scroll {
    display: flex;
    animation: scroll 20s linear infinite;
}
.animate-scroll:hover { animation-play-state: paused; }

html, body { max-width: 100vw; overflow-x: hidden; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
#mobile-menu { transition: transform 0.3s ease-in-out; }
#mobile-menu.hidden { transform: translateX(100%); display: none; }

/* Scroll-Reveal: Elemente faden/gleiten sanft ein, sobald sie ins Bild scrollen.
   Ohne JS (z.B. deaktiviert) bleiben sie normal sichtbar - siehe site.js initReveal(). */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Dark-Mode-Umschalter in der Navigation */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease;
    font-size: 1.05rem;
}
.theme-toggle:hover { background-color: rgba(255, 255, 255, 0.22); }
.theme-toggle .bi-sun { display: none; }
html.dark .theme-toggle .bi-moon-stars { display: none; }
html.dark .theme-toggle .bi-sun { display: inline; }