/* Webbaukasten – animierte Hintergründe (Netz, Wellen, Aurora, Raster, Sterne, Blasen, Strömung, Glühwürmchen, Konfetti, Punkte, Farbfluss, Ringe, Formen, Strahlen) */
[class*="is-style-wbk-anim"], .wbk-anim-host { position: relative; isolation: isolate; overflow: hidden; }
.wbk-anim-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; max-width: none !important; width: auto !important; margin: 0 !important; }
.wbk-anim-layer.is-over { z-index: 5; mix-blend-mode: screen; opacity: .85; }
.wbk-anim-layer.is-page { position: fixed; z-index: -1; }
.wbk-anim-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Aurora: fließende Farbflächen (reines CSS) */
.wbk-anim--aurora i { position: absolute; width: 60%; height: 70%; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: normal; animation: wbk-aur 18s ease-in-out infinite alternate; }
.wbk-anim--aurora i:nth-child(1) { background: var(--wp--preset--color--primary); left: -10%; top: -20%; }
.wbk-anim--aurora i:nth-child(2) { background: var(--wp--preset--color--secondary); right: -15%; top: 10%; animation-duration: 22s; animation-delay: -6s; }
.wbk-anim--aurora i:nth-child(3) { background: var(--wp--preset--color--accent); left: 20%; bottom: -35%; animation-duration: 26s; animation-delay: -12s; opacity: .35; }
@keyframes wbk-aur { 0% { transform: translate(0, 0) scale(1) rotate(0); } 50% { transform: translate(12%, 8%) scale(1.15) rotate(25deg); } 100% { transform: translate(-8%, 14%) scale(.9) rotate(-15deg); } }
/* Raster mit Tiefe (reines CSS) */
.wbk-anim--raster { perspective: 420px; }
.wbk-anim--raster i { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: rotateX(62deg);
	background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent) 1px, transparent 1px);
	background-size: 56px 56px; animation: wbk-grid 3.5s linear infinite;
	-webkit-mask-image: linear-gradient(to top, #000 20%, transparent 95%); mask-image: linear-gradient(to top, #000 20%, transparent 95%); }
.wbk-anim--raster b { position: absolute; left: 50%; bottom: 28%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent), transparent 65%); filter: blur(10px); }
@keyframes wbk-grid { to { background-position: 0 56px, 0 0; } }
.wbk-anim--wellen svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 46%; animation: wbk-wave 16s linear infinite; }
.wbk-anim--wellen svg:nth-child(2) { animation-duration: 24s; animation-direction: reverse; opacity: .6; height: 38%; }
.wbk-anim--wellen svg:nth-child(3) { animation-duration: 32s; opacity: .4; height: 30%; }
@keyframes wbk-wave { to { transform: translateX(-50%); } }
/* Farbfluss: wandernder, weicher Verlauf (reines CSS) */
.wbk-anim--farbfluss i { position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent), color-mix(in srgb, var(--wp--preset--color--secondary) 28%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 26%, transparent), color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent)); filter: blur(70px); animation: wbk-flow 28s linear infinite; }
@keyframes wbk-flow { to { transform: rotate(360deg); } }
/* Ringe: pulsierende Kreise aus einer Ecke */
.wbk-anim--ringe i { position: absolute; right: -12%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent); opacity: 0; animation: wbk-ring 9s ease-out infinite; }
.wbk-anim--ringe i:nth-child(2) { animation-delay: -2.25s; border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }
.wbk-anim--ringe i:nth-child(3) { animation-delay: -4.5s; }
.wbk-anim--ringe i:nth-child(4) { animation-delay: -6.75s; border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent); }
@keyframes wbk-ring { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
/* Formen: schwebende Geometrie */
.wbk-anim--formen i { position: absolute; display: block; opacity: .22; animation: wbk-float 14s ease-in-out infinite alternate; }
.wbk-anim--formen .f1 { width: 90px; height: 90px; border-radius: 50%; background: var(--wp--preset--color--primary); left: 6%; top: 14%; }
.wbk-anim--formen .f2 { width: 70px; height: 70px; border-radius: 14px; border: 3px solid var(--wp--preset--color--accent); right: 12%; top: 18%; animation-duration: 18s; transform: rotate(18deg); }
.wbk-anim--formen .f3 { width: 0; height: 0; border-left: 46px solid transparent; border-right: 46px solid transparent; border-bottom: 80px solid var(--wp--preset--color--secondary); left: 46%; bottom: 10%; animation-duration: 20s; }
.wbk-anim--formen .f4 { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--wp--preset--color--primary); right: 30%; bottom: 22%; animation-duration: 11s; }
.wbk-anim--formen .f5 { width: 120px; height: 14px; border-radius: 99px; background: var(--wp--preset--color--accent); left: 22%; bottom: 30%; animation-duration: 16s; }
.wbk-anim--formen .f6 { width: 56px; height: 56px; background: radial-gradient(circle, var(--wp--preset--color--secondary) 2px, transparent 2.5px) 0 0 / 12px 12px; right: 6%; bottom: 8%; opacity: .5; animation-duration: 22s; }
@keyframes wbk-float { 0% { translate: 0 0; rotate: 0deg; } 50% { translate: 18px -26px; rotate: 12deg; } 100% { translate: -14px 14px; rotate: -10deg; } }
/* Lichtstrahlen: langsam drehender Strahlenkranz */
.wbk-anim--strahlen i { position: absolute; left: 50%; top: -60%; width: 160%; aspect-ratio: 1; translate: -50% 0; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%); mask-image: radial-gradient(circle, #000 10%, transparent 62%); animation: wbk-flow 90s linear infinite; }
.wbk-anim--strahlen b { position: absolute; left: 50%; top: -20%; width: 50%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent), transparent 65%); filter: blur(20px); }
/* Punkteraster mit Lichtkegel (folgt der Maus) */
.wbk-anim--punkte i { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--wp--preset--color--contrast) 26%, transparent) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at var(--mx, 70%) var(--my, 30%), #000 0, rgba(0, 0, 0, .25) 38%, transparent 70%); mask-image: radial-gradient(circle at var(--mx, 70%) var(--my, 30%), #000 0, rgba(0, 0, 0, .25) 38%, transparent 70%); }
.wbk-anim--punkte b { position: absolute; width: 40%; aspect-ratio: 1; left: var(--mx, 70%); top: var(--my, 30%); translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 65%); filter: blur(30px); transition: left .6s ease, top .6s ease; animation: wbk-spot 12s ease-in-out infinite alternate; }
@keyframes wbk-spot { 50% { scale: 1.25; } }
@media (prefers-reduced-motion: reduce) {
	.wbk-anim-layer i, .wbk-anim-layer svg, .wbk-anim-layer b { animation: none !important; }
}
/* Editor: Hinweis, dass hier eine Bewegung läuft */
.editor-styles-wrapper [class*="is-style-wbk-anim"]::after { content: "Animierter Hintergrund"; position: absolute; top: 6px; right: 8px; font: 600 11px/1 system-ui, sans-serif; background: rgba(0, 0, 0, .55); color: #fff; padding: 4px 8px; border-radius: 99px; pointer-events: none; }