/* dersieber.de - Custom CSS (Design-Variablen, Animationen, Komponenten) */
/* Extrahiert aus der Live-Seite, lokal gehostet fuer DSGVO-Konformitaet */

body { font-family: Inter, sans-serif; }

:root { --primary-green: #92C83E; --dark-green: #07393C; --accent-yellow: #FDD835; }

.bg-primary-green { background-color: var(--primary-green); }

.text-primary-green { color: var(--primary-green); }

.bg-dark-green { background-color: var(--dark-green); }

.text-dark-green { color: var(--dark-green); }

.border-primary-green { border-color: var(--primary-green); }

.ring-primary-green { --tw-ring-color: var(--primary-green); }

.video-container { overflow: hidden; }

@keyframes periodicNudge {
  0%, 90%, 100% { transform: rotate(0deg) scale(1); }
  92% { transform: rotate(-4deg) scale(1.05); }
  94% { transform: rotate(4deg) scale(1.05); }
  96% { transform: rotate(-4deg) scale(1.05); }
  98% { transform: rotate(4deg) scale(1.05); }
}

.sunny-animation-wrapper { animation: 10s ease-in-out 0s infinite normal none running periodicNudge; background: none; border: none; padding: 0px; cursor: pointer; display: block; }

@keyframes tiltHead {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

.sunny-mascot { transition: transform 0.3s ease-in-out; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 10px 15px); }

.sunny-animation-wrapper:hover .sunny-mascot { animation: 0.6s ease-in-out 0s 1 normal none running tiltHead; }

.sunny-animation-wrapper:hover { animation-play-state: paused; }

.modal-overlay { transition: opacity 0.3s ease-in-out; }

.modal-content { transform: translateY(20px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }

.modal-active .modal-content { transform: translateY(0px); opacity: 1; }

.scrubber { appearance: none; width: 100%; height: 6px; background: linear-gradient(to right, var(--primary-green) var(--progress, 0%), #e5e7eb var(--progress, 0%)); border-radius: 3px; outline: none; transition: opacity 0.2s; cursor: pointer; }

.scrubber::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--dark-green); transition: transform 0.1s; }

.scrubber:hover::-webkit-slider-thumb { transform: scale(1.1); }

.video-modal-body { position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden; width: 100%; background-color: rgb(0, 0, 0); border-radius: 0.5rem; }

.video-modal-body iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px; }

.slider-container { scroll-snap-type: x mandatory; }

.slider-item { scroll-snap-align: center; }