/* CLAUDE: SVG Wave Divider Styles */
/* CLAUDE: Animierte Wellen für Sektions-Übergänge */
/* CLAUDE: Anpassen: Höhe, Animation-Geschwindigkeit */

/* ===========================================
   CLAUDE: BASIS-CONTAINER
   =========================================== */

.pvm-wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;                         /* CLAUDE: Wellen-Höhe */
    overflow: hidden;
    line-height: 0;                       /* CLAUDE: Keine Zeilenhöhe */
    pointer-events: none;
}

/* CLAUDE: Position oben */
.pvm-wave-divider--top {
    top: 0;
}

/* CLAUDE: Position unten */
.pvm-wave-divider--bottom {
    bottom: 0;
}

/* CLAUDE: Gespiegelt (für umgekehrte Wellen) */
.pvm-wave-divider--flip {
    transform: scaleY(-1);
}

/* CLAUDE: SVG responsive */
.pvm-wave-divider svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* ===========================================
   CLAUDE: WELLEN-ANIMATION
   =========================================== */

/* CLAUDE: Animierte Version */
.pvm-wave-divider--animated .pvm-wave--back {
    animation: pvm-wave-slow 25s ease-in-out infinite;
}

.pvm-wave-divider--animated .pvm-wave--middle {
    animation: pvm-wave-medium 18s ease-in-out infinite;
}

.pvm-wave-divider--animated .pvm-wave--front {
    animation: pvm-wave-fast 12s ease-in-out infinite;
}

/* CLAUDE: Keyframes für Wellen-Bewegung */
@keyframes pvm-wave-slow {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-1.5%) translateY(3px);
    }
}

@keyframes pvm-wave-medium {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(1%) translateY(-2px);
    }
}

@keyframes pvm-wave-fast {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-0.5%) translateY(1px);
    }
}

/* ===========================================
   CLAUDE: RESPONSIVE
   =========================================== */

/* CLAUDE: Tablet - kleinere Wellen */
@media (max-width: 1024px) {
    .pvm-wave-divider {
        height: 60px;
    }
}

/* CLAUDE: Mobile - noch kleiner */
@media (max-width: 768px) {
    .pvm-wave-divider {
        height: 40px;
    }
}

/* ===========================================
   CLAUDE: REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-wave-divider--animated .pvm-wave--back,
    .pvm-wave-divider--animated .pvm-wave--middle,
    .pvm-wave-divider--animated .pvm-wave--front {
        animation: none;
    }
}

/* ===========================================
   CLAUDE: SEKTIONS-SPEZIFISCH
   =========================================== */

/* CLAUDE: Welle über dunklem Hintergrund */
.pvm-section--dark .pvm-wave-divider svg path {
    fill: var(--pvm-bg-white, #ffffff);
}

/* CLAUDE: Welle über hellem Hintergrund */
.pvm-section--light .pvm-wave-divider svg path {
    fill: var(--pvm-bg-light, #f8f9fa);
}

/* ===========================================
   CLAUDE: PRINT
   =========================================== */

@media print {
    .pvm-wave-divider {
        display: none;
    }
}