:root {
	/* https://easingwizard.com/ */
	--easing-wiggle-energetic: linear(
		0,
		0.76 4.4%,
		0.928 6.2%,
		0.984 8%,
		0.92 9.9%,
		0.731 11.9%,
		-0.506 20.3%,
		-0.667 22.2%,
		-0.731 24%,
		-0.731 24.8%,
		-0.712 25.7%,
		-0.615 27.5%,
		0.252 35.9%,
		0.4 38.1%,
		0.463 40.3%,
		0.455 41.9%,
		0.399 43.7%,
		-0.106 51.9%,
		-0.195 54.1%,
		-0.235 56.3%,
		-0.235 57.9%,
		-0.209 59.7%,
		0.019 67.5%,
		0.061 69.6%,
		0.082 71.7%,
		0.085 73.3%,
		0.077 75.1%,
		0.011 81.9%,
		-0.009 85.5%,
		0
	);
	--easing-overshot-in-dynamic: linear(
		0,
		-0.001 9%,
		-0.007 15.3%,
		-0.013 18.2%,
		-0.02 21%,
		-0.029 23.7%,
		-0.04 26.3%,
		-0.056 29.3%,
		-0.074 32.2%,
		-0.096 35.2%,
		-0.121 38.2%,
		-0.176 43.9%,
		-0.307 56.3%,
		-0.337 59.6%,
		-0.357 62.4%,
		-0.367 64.1%,
		-0.374 65.8%,
		-0.378 67.4%,
		-0.379 68.9%,
		-0.377 70.4%,
		-0.372 71.8%,
		-0.363 73.2%,
		-0.352 74.5%,
		-0.329 76.4%,
		-0.298 78.3%,
		-0.26 80.1%,
		-0.213 81.9%,
		-0.16 83.6%,
		-0.096 85.3%,
		-0.027 86.9%,
		0.053 88.5%,
		0.239 91.6%,
		0.456 94.5%,
		0.709 97.3%,
		1
	);
	--easing-overshot-out-dynamic: linear(
		0,
		0.291 2.7%,
		0.544 5.5%,
		0.761 8.4%,
		0.947 11.5%,
		1.027 13.1%,
		1.096 14.7%,
		1.16 16.4%,
		1.213 18.1%,
		1.26 19.9%,
		1.298 21.7%,
		1.329 23.6%,
		1.352 25.5%,
		1.363 26.8%,
		1.372 28.2%,
		1.377 29.6%,
		1.379 31.1%,
		1.378 32.6%,
		1.374 34.2%,
		1.367 35.9%,
		1.357 37.6%,
		1.337 40.4%,
		1.307 43.7%,
		1.176 56.1%,
		1.121 61.8%,
		1.096 64.8%,
		1.074 67.8%,
		1.056 70.7%,
		1.04 73.7%,
		1.029 76.3%,
		1.02 79%,
		1.013 81.8%,
		1.007 84.7%,
		1.001 91%,
		1
	);
	--overshot-inout-dynamic: linear(
		0,
		-0.001 4.9%,
		-0.007 8.3%,
		-0.02 11.4%,
		-0.04 14.3%,
		-0.07 17.2%,
		-0.11 20.2%,
		-0.158 23.1%,
		-0.267 29.2%,
		-0.309 32.1%,
		-0.325 33.7%,
		-0.333 35.2%,
		-0.332 36.5%,
		-0.324 37.8%,
		-0.311 38.8%,
		-0.293 39.7%,
		-0.27 40.6%,
		-0.241 41.5%,
		-0.164 43.2%,
		-0.065 44.8%,
		0.057 46.3%,
		0.198 47.7%,
		0.358 49%,
		0.719 51.6%,
		0.856 52.8%,
		0.97 54%,
		1.086 55.5%,
		1.18 57.1%,
		1.248 58.7%,
		1.276 59.6%,
		1.298 60.5%,
		1.319 61.8%,
		1.327 62.5%,
		1.331 63.2%,
		1.333 63.9%,
		1.333 64.6%,
		1.331 65.4%,
		1.326 66.2%,
		1.308 68%,
		1.278 70.1%,
		1.154 77.1%,
		1.107 80%,
		1.075 82.4%,
		1.048 84.8%,
		1.035 86.3%,
		1.024 87.9%,
		1.015 89.5%,
		1.009 91.2%,
		1.002 94.8%,
		1
	);
	--easing-bounce-firm: linear(
		0,
		0.151 8.1%,
		0.223 11.7%,
		0.304 15.2%,
		0.392 18.4%,
		0.497 21.6%,
		0.619 24.8%,
		0.752 27.9%,
		0.999 33.3%,
		0.842 37.1%,
		0.79 38.6%,
		0.748 40%,
		0.714 41.4%,
		0.691 42.7%,
		0.677 44%,
		0.673 44.7%,
		0.672 45.3%,
		0.676 46.5%,
		0.69 47.8%,
		0.712 49.1%,
		0.743 50.4%,
		0.824 53%,
		0.999 57.7%,
		0.927 60%,
		0.883 61.8%,
		0.867 62.7%,
		0.856 63.6%,
		0.85 64.4%,
		0.848 65.3%,
		0.849 66.1%,
		0.855 67%,
		0.865 67.9%,
		0.879 68.8%,
		0.911 70.5%,
		0.999 74.5%,
		0.97 76.2%,
		0.953 77.5%,
		0.943 78.8%,
		0.94 80.2%,
		0.942 81.4%,
		0.95 82.7%,
		0.989 86.9%,
		1 88.2%,
		0.99 90%,
		0.987 91.9%,
		0.989 93.5%,
		0.998 97.5%,
		1
	);
	--easing-spring-drop: linear(
		0,
		0.002 0.2%,
		0.013 0.5%,
		0.025 0.7%,
		0.05 1%,
		0.071 1.2%,
		0.109 1.5%,
		0.153 1.8%,
		0.204 2.1%,
		0.3 2.6%,
		0.429 3.2%,
		0.882 5.1%,
		1.04 5.8%,
		1.182 6.5%,
		1.253 6.9%,
		1.301 7.2%,
		1.358 7.6%,
		1.395 7.9%,
		1.427 8.2%,
		1.454 8.5%,
		1.475 8.8%,
		1.491 9.1%,
		1.502 9.4%,
		1.508 9.7%,
		1.509 9.9%,
		1.506 10.2%,
		1.499 10.5%,
		1.488 10.8%,
		1.473 11.1%,
		1.453 11.4%,
		1.431 11.7%,
		1.405 12%,
		1.356 12.5%,
		1.29 13.1%,
		1.06 15%,
		0.98 15.7%,
		0.908 16.4%,
		0.871 16.8%,
		0.847 17.1%,
		0.818 17.5%,
		0.799 17.8%,
		0.783 18.1%,
		0.769 18.4%,
		0.758 18.7%,
		0.75 19%,
		0.745 19.3%,
		0.742 19.6%,
		0.742 20.1%,
		0.746 20.4%,
		0.752 20.7%,
		0.769 21.3%,
		0.794 21.9%,
		0.819 22.4%,
		0.852 23%,
		0.97 24.9%,
		1.01 25.6%,
		1.047 26.3%,
		1.078 27%,
		1.102 27.7%,
		1.118 28.3%,
		1.127 28.9%,
		1.131 29.5%,
		1.131 30%,
		1.126 30.6%,
		1.117 31.2%,
		1.105 31.8%,
		1.075 32.9%,
		0.995 35.5%,
		0.976 36.2%,
		0.96 36.9%,
		0.949 37.5%,
		0.941 38.1%,
		0.936 38.7%,
		0.933 39.3%,
		0.935 40.3%,
		0.942 41.3%,
		0.957 42.5%,
		0.998 45.1%,
		1.016 46.4%,
		1.029 47.8%,
		1.034 49.2%,
		1.033 50.2%,
		1.029 51.2%,
		1.022 52.4%,
		0.992 56.3%,
		0.985 57.7%,
		0.983 59%,
		0.985 61.1%,
		1.004 66.2%,
		1.009 68.9%,
		1.008 71%,
		0.998 75.9%,
		0.996 78.5%,
		0.996 80.8%,
		1.002 88.5%,
		1
	);
	--ease-in-sine: cubic-bezier(0.13, 0, 0.39, 0);
	--ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
	--ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
	--ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
	--ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
	--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
	--ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
	--ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);

	--ease-out-sine: cubic-bezier(0.61, 1, 0.87, 1);
	--ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

	--ease-inout-sine: cubic-bezier(0.36, 0, 0.64, 1);
	--ease-inout-quad: cubic-bezier(0.44, 0, 0.56, 1);
	--ease-inout-cubic: cubic-bezier(0.66, 0, 0.34, 1);
	--ease-inout-quart: cubic-bezier(0.78, 0, 0.22, 1);
	--ease-inout-quint: cubic-bezier(0.86, 0, 0.14, 1);
	--ease-inout-expo: cubic-bezier(0.9, 0, 0.1, 1);
	--ease-inout-circ: cubic-bezier(0.85, 0.09, 0.15, 0.91);
	--ease-inout-jump: cubic-bezier(1, 0, 0, 1);
	--ease-inout-anticipate: cubic-bezier(0.8, -0.4, 0.5, 1);

	--ease-outin-sine: cubic-bezier(0.64, 1, 0.36, 0);
	--ease-outin-quad: cubic-bezier(0.56, 1, 0.44, 0);
	--ease-outin-cubic: cubic-bezier(0.34, 1, 0.66, 0);
	--ease-outin-quart: cubic-bezier(0.22, 1, 0.78, 0);
	--ease-outin-quint: cubic-bezier(0.14, 1, 0.86, 0);
	--ease-outin-expo: cubic-bezier(0.1, 1, 0.9, 0);
	--ease-outin-circ: cubic-bezier(0.15, 0.91, 0.85, 0.09);
	--ease-outin-jump: cubic-bezier(0, 1, 1, 0);
}

/*-----------------------------------------------------------------------
 * Hover SoftZoom
 ------------------------------------------------------------------------*/
.sawasdee-animate-soft-zoom {
	/* grundzustand */
	transform: scale(1);
	/* transition hier definieren (gilt sowohl für mouse-enter / & leave) */
	transition: transform 0.3s ease-in-out;
}
.sawasdee-animate-soft-zoom:hover {
	/* zielzustand hover */
	transform: scale(1.03);
}

/*-----------------------------------------------------------------------
 * ALLGEMEIN class 'sawasdee-animate' (Sawasdees Intersection Observing)
 ------------------------------------------------------------------------*/
/* Blendet alle zu animierenden Elemente aus, bis sie sichtbar werden */
.sawasdee-animate:not(.sawasdee-is-visible) {
	/* Ohne dies haben wir mit Browser refresh ein kurzes aufblitzen.
	   Animation wie Motion / Gsap mit zugehörigem javascript wirken
	   mit ihrer z.T. opacity: 0; zu Beginn der Animation erst, wenn
	   JS erstmalig durchlaufen wurde.
	*/
	opacity: 0 !important;
	visibility: hidden; /* Optional: verhindert auch Interaktionen wie Klicks */
	transition: opacity 0.3s ease; /* Optional: für einen weicheren Übergang */
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Sawasdee BigLetter Animation
 ------------------------------------------------------------------------*/
/* 
 * nach style.css für visualisierung in back- & frontend nicht sinnvoll, da
 * das data-attribut nur im frontend via theme-animations.js injiziert wird.
 */
.is-style-big-letter[data-first_letter].has-big-letter,
.is-style-big-letter-1st-child > .has-big-letter[data-first_letter]:first-child,
.sawasdee-big-letter[data-first_letter].has-big-letter,
.sawasdee-big-letter-1st-child
	> .has-big-letter[data-first_letter]:first-child {
	position: relative;
	/* Stellt sicher, dass z-index:-1 innerhalb dieses Elements bleibt */
	isolation: isolate;

	/* Zentraler Fallback für die Größe */
	--letter-size: 6em;

	&::before {
		content: attr(data-first_letter);
		display: block;
		position: absolute;

		/* Styling */
		font-size: var(--letter-size);
		font-weight: bold;
		line-height: 1;
		font-family: serif /* inherit */;

		/* Positionierung mittig linke obere Ecke */
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);

		/* Optik & Ebene */
		z-index: -1;
		opacity: 0.1; /* Oder eine spezifische Farbe wie #f0f0f0 */
		color: currentColor; /* Nutzt die Textfarbe, aber durch Opacity abgeschwächt */
		pointer-events: none; /* Verhindert Interaktions-Probleme */
	}

	/*--- Größen-Varianten ---*/
	&.letter-size-s {
		--letter-size: 3em;
	}
	&.letter-size-m {
		--letter-size: 4em;
	}
	&.letter-size-l {
		--letter-size: 5em;
	}
	&.letter-size-xl {
		--letter-size: 6em;
	}
	&.letter-size-xxl {
		--letter-size: 7em;
	}
	&.letter-size-xxxl {
		--letter-size: 8em;
	}
}
/*-----------------------------------------------------------------------
 * Gsap Reveal (H-Tag Style 'Reveal' oder explizit 'is-style-gsap-reveal')
 ------------------------------------------------------------------------*/
.is-style-gsap-reveal {
	visibility: hidden; /* Verhindert das Blitzen */
}
.is-style-gsap-reveal.gsap-reveal-initialized {
	visibility: visible;
}
.gsap-reveal-wrapper {
	display: block;
	overflow: hidden;
	position: relative;
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
}
.gsap-reveal-content {
	display: inline-block;
	width: 100%;
	/* Der Text bleibt statisch, wir animieren nur den Clip oder die Verschiebung */
	will-change: transform;
}
/*-----------------------------------------------------------------------
 * Sawasdee Wiggle Animation (Page 'Spielwiese' siehe Wiggle Button)
 ------------------------------------------------------------------------*/
.sawasdee-animate-wiggle {
	opacity: 0; /* Grundzustand */
	/* display: inline-block; */
	will-change: transform, opacity; /* Optimiert das Rendering */
}
.sawasdee-animate-wiggle.sawasdee-is-visible {
	/* Wir nutzen ZWEI Animationen mit unterschiedlichen Kurven */
	animation: fade-in 0.4s ease-out forwards 0.5s,
		wiggle-bounce-effect 1s forwards 0.5s; /* delay 0.5s */

	/* Die Wiggle-Kurve gilt NUR für die zweite Animation (den Wiggle) */
	animation-timing-function: ease-out, var(--easing-wiggle-energetic);
}
@keyframes wiggle-bounce-effect {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(20px);
	}
}
/*-----------------------------------------------------------------------
 * Sawasdee Flip Card (Page 'Spielwiese' und pattern flip-card.php)
 ------------------------------------------------------------------------*/
/* 1. Den 3D-Raum vorbereiten */
.sawasdee-flip-card {
	perspective: 1000px; /* Erzeugt die Tiefe beim Drehen */
}
/* 2. Der Container, der sich tatsächlich dreht */
.sawasdee-flip-card-inner {
	position: relative;
	width: 50% !important; /* die maße vom editor erzwingen (im frontend nur eine card sichtbar) */
	transition: transform 0.8s;
	transform-style: preserve-3d; /* Wichtig für den 3D-Effekt */
	display: grid !important; /* Wir nutzen Grid, um beide Seiten übereinander zu legen */
}
/* 3. Hover-Trigger: Wenn die Maus über die Gruppe fährt */
.sawasdee-flip-card:hover .sawasdee-flip-card-inner {
	transform: rotateY(180deg);
}
/* 4. Vorder- und Rückseite im Grid stapeln */
.sawasdee-flip-card-front,
.sawasdee-flip-card-back {
	box-sizing: border-box !important;
	grid-area: 1 / 1; /* Beide belegen die gleiche Zelle */
	backface-visibility: hidden; /* Versteckt die Rückseite, wenn sie abgewandt ist */
	-webkit-backface-visibility: hidden;
}
/* 5. Die Rückseite von vornherein umgedreht starten lassen */
.sawasdee-flip-card-back {
	transform: rotateY(180deg);
}
/*-----------------------------------------------------------------------
 * Sawasdee Cover Card 2 (Page 'Spielwiese' und pattern cover-card-2.php)
 ------------------------------------------------------------------------*/
/* Der Container (Cover oder Gruppe) */
.sawasdee-cover-card-2 {
	/* overflow: hidden; */
	/* position: relative; */
}
/* 1. Das Bild (oder das Background-Image des Covers) */
.sawasdee-cover-card-2 .wp-block-cover__image-background {
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	transform: scale(1);
}
.sawasdee-cover-card-2:hover .wp-block-cover__image-background {
	clip-path: inset(0);
	transform: scale(1.1);
}
/* 2. Der "Schatten" / Overlay-Effekt (Frosted Glass oder Darken) */
.sawasdee-cover-card-2::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3); /* Abdunkeln */
	backdrop-filter: blur(0px); /* Start ohne Blur */
	opacity: 0;
	z-index: 1;
	transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}
.sawasdee-cover-card-2:hover::before {
	opacity: 1;
	backdrop-filter: blur(4px); /* Der "Schaden" / Weichzeichner-Look */
}
/* 3. Der Inhalt (Title, Desc, Button) */
.sawasdee-cover-card-2 .wp-block-cover__inner-container {
	z-index: 2;
	position: relative;
}
/* Button & Description verstecken */
.sawasdee-cover-card-2 .wp-block-button,
.sawasdee-cover-card-2 :is(p/* , h2 */) {
	/* Beispiel-Selektor */
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Einblenden bei Hover */
.sawasdee-cover-card-2:hover .wp-block-button,
.sawasdee-cover-card-2:hover :is(p/* , h2 */) {
	opacity: 1;
	transform: translateY(0);
}
/*-----------------------------------------------------------------------
 * Sawasdee Cover Card 1 (Page 'Spielwiese' und pattern cover-card-1.php)
 ------------------------------------------------------------------------*/
/* 1. Container & Bild */
.sawasdee-cover-card1 .wp-block-cover {
	overflow: hidden;
}
.sawasdee-cover-card1 .wp-block-cover__image-background {
	transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.sawasdee-cover-card1:hover .wp-block-cover__image-background {
	transform: scale(1.08);
}
/* 2. Texte: Das kontrollierte Verschwinden */
.sawasdee-cover-card1 .wp-block-cover__inner-container :is(h2, p) {
	transition: all 0.5s ease-in-out;
	opacity: 1;
	transform: translateY(0);
}
.sawasdee-cover-card1:hover .wp-block-cover__inner-container :is(h2, p) {
	opacity: 0;
	transform: translateY(-20px); /* Texte weichen nach oben aus */
}
/* 3. Der Button: Die kontrollierte Ankunft */
.sawasdee-cover-card1 .wp-block-buttons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translateY(20px); /* Startet weiter unten */
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease-out;
	margin: 0 !important;
}
.sawasdee-cover-card1:hover .wp-block-buttons {
	opacity: 1;
	transform: translate(-50%, -50%) translateY(0); /* Gleitet in die Mitte */
	pointer-events: auto;
	transition-delay: 0.1s; /* Wartet kurz, bis der Text Platz gemacht hat */
}
/* 4. Button-Link Styling (Bodenständig & Sauber) */
.sawasdee-cover-card1 .wp-block-button__link {
	white-space: nowrap;
	transition: all 0.3s ease !important;
}
/*-----------------------------------------------------------------------
 * Sawasdee 3D-ARC Animation horizontal/vertikal mit intersection observe
 * Block-Style varianten an group/row/stack/columns/buttons/images
 ------------------------------------------------------------------------*/
/* --- GEMEINSAME BASIS --- */
.is-style-3d-arc-vflip,
.is-style-3d-arc-hflip {
	perspective: 2000px;
	/* Wir erzwingen Sichtbarkeit des Containers, aber die Inhalte/das Element selbst starten versteckt */
	opacity: 1 !important;
}

/* Der "Anker": Das Element selbst ODER dessen direkte Kinder */
.is-style-3d-arc-vflip,
.is-style-3d-arc-vflip > *,
.is-style-3d-arc-hflip,
.is-style-3d-arc-hflip > * {
	opacity: 0;
	backface-visibility: hidden;
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.6s ease-out;
	will-change: transform, opacity;

	/* 0.5s Verzögerung hinzufügen */
	transition-delay: 0.3s;
}

/* --- VARIANTE 1: VFLIP (Vertikaler Schwenk von oben) --- */
.is-style-3d-arc-vflip,
.is-style-3d-arc-vflip > * {
	transform-origin: top center;
	transform: rotateX(-60deg) scale(0.9);
}

.is-style-3d-arc-vflip.sawasdee-is-visible,
.is-style-3d-arc-vflip.sawasdee-is-visible > * {
	opacity: 1;
	transform: rotateX(0deg) scale(1);
}

/* --- VARIANTE 2: HFLIP (Horizontaler Schwenk von links/Tür-Effekt) --- */
.is-style-3d-arc-hflip,
.is-style-3d-arc-hflip > * {
	transform-origin: left center;
	transform: rotateY(-60deg) scale(0.9);
}

.is-style-3d-arc-hflip.sawasdee-is-visible,
.is-style-3d-arc-hflip.sawasdee-is-visible > * {
	opacity: 1;
	transform: rotateY(0deg) scale(1);
}

/* --- LOGIK-FIX FÜR ÜBERSCHRIFTEN & BUTTONS --- */
/* Wenn das Element selbst die Klasse hat (z.B. h2), 
   verhindern wir, dass die Animation doppelt auf den Text im Inneren angewendet wird. */
.wp-block-heading.is-style-3d-arc-vflip > *,
.wp-block-heading.is-style-3d-arc-hflip > *,
.wp-block-button.is-style-3d-arc-vflip > *,
.wp-block-button.is-style-3d-arc-hflip > * {
	opacity: 1;
	transform: none;
	transition: none;
}
/*-----------------------------------------------------------------------
 * Heading Doodle Underline (pattern heading-doodle-underline.php)
 * Heading Variant 'Doodle Underline'
 ------------------------------------------------------------------------*/
.is-style-doodle-underline.sawasdee-animate::after {
	clip-path: inset(0 100% 0 0);
}
.is-style-doodle-underline.sawasdee-animate.sawasdee-is-visible::after {
	animation: draw-underline 0.8s ease-out forwards;
	animation-delay: 0.2s;
}
@keyframes draw-underline {
	to {
		clip-path: inset(0 0 0 0);
	}
}
/*-----------------------------------------------------------------------
 * Title Animated (pattern title-animated.php)
 ------------------------------------------------------------------------*/
.sawasdee-anim-container.sawasdee-is-visible .sawasdee-anim-titlebar {
	animation: bounce-in-right 1.5s ease forwards;
}
.sawasdee-anim-container.sawasdee-is-visible .sawasdee-anim-title {
	/* NEU: Initialer Zustand für die Animation */
	opacity: 0;

	animation: fade-in 1s 0.5s ease forwards, grow 1s 0.5s ease forwards;
}
/*-----------------------------------------------------------------------
 * Heading Abstract Underline ( pattern using svg-wrapper plugin )
 ------------------------------------------------------------------------*/
/* Animation nur aktiv wenn Wrapper .sawasdee-is-visible hat */
.sawasdee-abstract-underline.sawasdee-is-visible.gla-svg-wrapper
	.gla-svg-container
	svg
	path {
	/* NEU: Initialer Zustand für die Animation */
	stroke-dasharray: 500;
	stroke-dashoffset: 500;

	animation: draw-path 0.6s 0.3s ease forwards;
}
@keyframes draw-path {
	to {
		/* Den Offset auf 0 setzen, um die Linie voll anzuzeigen */
		stroke-dashoffset: 0;
	}
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Sawasdee Keyframes (mit optionaler Verwendung)
   animate.css animationen sind zu bevorzugen
   siehe https://animate.style/
   z.B. Advanced CSS class(es):
	 - 'animate__animated animate__fadeIn'
	 - '_animate__animated _animate__fadeIn' (mit intersecttion observer)
 ------------------------------------------------------------------------*/
@keyframes soft-zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes pulse {
	from {
		transform: scale(0.8);
	}
	to {
		transform: scale(1.2);
	}
}
@keyframes flash {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes grow {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes bounce {
	70% {
		transform: translateY(0%);
	}
	80% {
		transform: translateY(-15%);
	}
	90% {
		transform: translateY(0%);
	}
	95% {
		transform: translateY(-7%);
	}
	97% {
		transform: translateY(0%);
	}
	99% {
		transform: translateY(-3%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes bounce2 {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(0.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}
@keyframes swing {
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes wobble {
	0% {
		transform: translateX(0%);
	}
	15% {
		transform: translateX(-25%) rotate(-5deg);
	}
	30% {
		transform: translateX(20%) rotate(3deg);
	}
	45% {
		transform: translateX(-15%) rotate(-3deg);
	}
	60% {
		transform: translateX(10%) rotate(2deg);
	}
	75% {
		transform: translateX(-5%) rotate(-1deg);
	}
	100% {
		transform: translateX(0%);
	}
}
@keyframes fade-in-down {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fade-in-left {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fade-out-down {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes fade-out-right {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}
@keyframes bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes bounce-in-right {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}
	60% {
		opacity: 1;
		transform: translateX(-30px);
	}
	80% {
		opacity: 1;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes bounce-out {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(0.95);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		transform: scale(0.3);
	}
}
@keyframes bounce-out-down {
	0% {
		transform: translateY(0);
	}
	20% {
		opacity: 1;
		transform: translateY(-20px);
	}
	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes rotate-in-down-left {
	0% {
		transform-origin: left bottom;
		transform: rotate(-90deg);
		opacity: 0;
	}
	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}
@keyframes rotate-in-up-left {
	0% {
		transform-origin: left bottom;
		transform: rotate(90deg);
		opacity: 0;
	}
	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}
@keyframes roll-in {
	0% {
		opacity: 0;
		transform: translateX(-100%) rotate(-120deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
}
@keyframes roll-out {
	0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}
}