/* ==========================================================================
   Komm ins Bauchgefühl — willkommen-bewegung.css
   Ruhige Hintergrund-Bewegung der Willkommen-Fläche (Muster „Willkommen“, Startseite).
   kib-laden-wenn: kib-willkommen
   ========================================================================== */

/* Hintergrund: drei weiche Klekse, die sehr langsam treiben und „atmen“ (Umbau 18.10.2026).
   Nur transform wird animiert (läuft auf der Grafikkarte, kein Ruckeln, kein Layout-Neuberechnen).
   Volltöne ohne Verlauf; bei „Bewegung reduzieren“ stehen die Klekse still. */
.kib-willkommen::before,
.kib-willkommen::after,
.kib-willkommen > .kib-willkommen-innen::before {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	pointer-events: none;
	will-change: transform;
	animation: 38s ease-in-out infinite alternate both;
}

/* großer, dunkler Kleks rechts unten */
.kib-willkommen::after {
	right: -8vw;
	bottom: -14vw;
	width: min(48vw, 660px);
	background-color: var(--kib-sand-tief, #DCD0BB);
	animation-name: kib-treiben-gross;
}

/* kleiner Kleks in Kleks-Schleier oben, zwischen den Spalten */
.kib-willkommen::before {
	top: -7vw;
	left: 38vw;
	width: min(18vw, 240px);
	background-color: var(--kib-kleks-schleier, #F3E4E7);
	opacity: 0.6;
	animation-name: kib-treiben-klein;
	animation-duration: 46s;
}

/* Salbei-Schleier links unten */
.kib-willkommen > .kib-willkommen-innen::before {
	left: -7vw;
	bottom: -9vw;
	width: min(28vw, 380px);
	background-color: var(--kib-salbei-schleier, #E5E8E0);
	opacity: 0.75;
	animation-name: kib-treiben-salbei;
	animation-duration: 54s;
}

@keyframes kib-treiben-gross {
	0%   { transform: translate(0, 0) rotate(-18deg) scale(1); }
	50%  { transform: translate(-3.5vw, -2.5vw) rotate(-8deg) scale(1.07); }
	100% { transform: translate(-1vw, -5vw) rotate(-24deg) scale(0.97); }
}

@keyframes kib-treiben-klein {
	0%   { transform: translate(0, 0) rotate(40deg) scale(1); }
	50%  { transform: translate(4vw, 2.5vw) rotate(70deg) scale(1.12); }
	100% { transform: translate(-2vw, 4vw) rotate(25deg) scale(0.94); }
}

@keyframes kib-treiben-salbei {
	0%   { transform: translate(0, 0) rotate(140deg) scale(1); }
	50%  { transform: translate(3vw, -3vw) rotate(165deg) scale(1.08); }
	100% { transform: translate(5vw, 1vw) rotate(125deg) scale(1); }
}

@media (max-width: 780px) {
	.kib-willkommen::after {
		width: 78vw;
		right: -26vw;
		bottom: -22vw;
	}

	.kib-willkommen::before {
		width: 34vw;
		top: -12vw;
		left: auto;
		right: 10vw;
	}

	.kib-willkommen > .kib-willkommen-innen::before {
		width: 44vw;
		left: -16vw;
		bottom: auto;
		top: 38%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kib-willkommen::before,
	.kib-willkommen::after,
	.kib-willkommen > .kib-willkommen-innen::before {
		animation: none;
	}
}