/* Waka: seitenweite Regeln (seit 01.11.2026, Alex nach Red Bull TV) */

/* Eine Bewegungssprache: Rueckmeldungen auf Maus und Fokus (Hover) ueberall gleich schnell und mit gleicher Kurve.
   Grosse Bewegungen (Folienwechsel, Menue, Ladeblende) behalten ihre eigenen Zeiten */
:root {
    --waka-dauer: 0.3s;
    --waka-kurve: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Video-, Story- und Team-Karten (Call to Action): beim Hover nur abdunkeln, kein Zoom mehr */
.elementor-widget-call-to-action .elementor-cta__bg {
    transform: none !important;
}
.elementor-widget-call-to-action :is(.elementor-cta, .elementor-cta__bg, .elementor-cta__bg-overlay, .elementor-cta__content, .elementor-cta__content-item),
/* Kajak-Karten: das Boot zoomt weiter (Abdunkeln auf Weiss wirkte grau), jetzt im gleichen Takt */
[data-elementor-id="1119"] .elementor-widget-image img,
/* Karussell-Pfeile (Groesse und Farbe beim Hover) */
.dce-carousel-controls :is(.swiper-button-left, .swiper-button-right) svg,
.dce-carousel-controls :is(.swiper-button-left, .swiper-button-right) svg *,
/* Links im Footer */
.bottommenu :is(.pp-icon-list-item, .pp-icon-list-item a, .pp-icon-list-text, .pp-icon-wrapper, .pp-icon-list-icon),
/* Social-Icons, Knoepfe */
.elementor-social-icon, .elementor-button {
    transition-duration: var(--waka-dauer) !important;
    transition-timing-function: var(--waka-kurve) !important;
}
@media (prefers-reduced-motion: reduce) {
    :root { --waka-dauer: 0s; }
}

/* Beitragsfilter (Waka TV, Waka Team): Unterlinie wie im Footer, angelegt von filter-linie.js (Alex, 01.11.2026).
   Liegt an der Unterkante der Zeile, 6 px unter der Grundlinie wie im Footer, in der Farbe des Filtertexts */
.dce-filters .filters-item > a {
    position: relative;
    display: inline-block;
}
.dce-filters .waka-filter-linie {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    pointer-events: none;
    transition: left var(--waka-dauer) var(--waka-kurve), width var(--waka-dauer) var(--waka-kurve);
}
/* Blob unter dem aktiven Filter (filter-linie.js), Form, Groesse und Takt wie beim aktuellen Menuepunkt, in der Farbe des
   aktiven Filtertexts. Fliesst beim Filterwechsel mit der Kurve der Slider und dehnt sich dabei in Laufrichtung */
/* brechen die Filter um (Handy), 20 px zwischen den Zeilen: der Blob steht mittig in der Luecke statt im Text der
   naechsten Zeile (Alex 01.11.2026: "mobile: beachte da bitte die zeilenhöhe") */
.dce-filters { position: relative; row-gap: 20px; }
.dce-filters .waka-filter-blob {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.dce-filters .waka-filter-blob i {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    border-radius: 69% 31% 60% 40% / 40% 66% 34% 60%;
    animation: waka-blob-wabern 3.2s ease-in-out infinite;
    scale: 0;
    transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dce-filters .waka-filter-blob.da i { scale: 1; }
.dce-filters .waka-filter-blob.fliesst i { animation: waka-blob-wabern 3.2s ease-in-out infinite, waka-blob-fliessen-quer 0.55s ease-in-out; }
@keyframes waka-blob-fliessen-quer { 45% { scale: 1.5 0.75; } }
@keyframes waka-blob-wabern {
    0%, 100% { border-radius: 69% 31% 60% 40% / 40% 66% 34% 60%; transform: rotate(0deg) scale(1.12, 0.9); }
    25% { border-radius: 31% 69% 66% 34% / 60% 37% 63% 40%; transform: rotate(90deg) scale(0.9, 1.14); }
    50% { border-radius: 72% 28% 40% 60% / 37% 60% 40% 63%; transform: rotate(180deg) scale(1.14, 0.9); }
    75% { border-radius: 34% 66% 63% 37% / 44% 63% 37% 56%; transform: rotate(270deg) scale(0.9, 1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .dce-filters .waka-filter-blob, .dce-filters .waka-filter-blob i { transition: none; animation: none; }
}

/* Karten-Karussells (Dynamic Posts, nicht der Header-Slider 324b2b2): am Desktop erscheinen die Pfeile, sobald die Maus
   ueber dem Karussell ist oder ein Pfeil den Tastaturfokus hat. Am Handy und auf Touch-Geraeten gibt es keine Pfeile,
   dort ragt die naechste Karte ins Bild (Karten je Ansicht 1,25) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .elementor-widget-dce-dynamicposts-v2:not(.elementor-element-324b2b2) :is(.swiper-button-left, .swiper-button-right) {
        opacity: 0;
        transition: opacity var(--waka-dauer) var(--waka-kurve);
    }
    .elementor-widget-dce-dynamicposts-v2:not(.elementor-element-324b2b2):is(:hover, :focus-within) :is(.swiper-button-left, .swiper-button-right) {
        opacity: 1;
    }
}
@media (hover: none), (max-width: 767px) {
    .elementor-widget-dce-dynamicposts-v2:not(.elementor-element-324b2b2) :is(.swiper-button-left, .swiper-button-right) {
        display: none;
    }
}