/**
 * ESF Scribble – handschriftlicher Hinweis mit gezeichnetem Pfeil.
 *
 * Alle instanzspezifischen Werte kommen als Custom Properties vom Element:
 * --fab-color, --fab-size, --fab-arrow, --fab-speed,
 * --fab-l1-steps, --fab-l2-steps
 */

.fab-scribble {
	--fab-color: #111;
	--fab-size: 26px;
	--fab-arrow: 96px;
	--fab-speed: 1;
	--fab-l1-steps: 10;
	--fab-l2-steps: 13;

	/* Startzeiten (bei Speed 1): erst Text, dann Pfeil. */
	--fab-d-l1: 0.1s;
	--fab-d-l2: 0.9s;
	--fab-d-shaft: 1.8s;
	--fab-d-head: 2.25s;

	display: inline-flex;
	align-items: center;
	gap: 22px;
	margin-left: 12px;
	font-family: Mansalva, cursive;
	letter-spacing: 0.08em;
	font-size: var(--fab-size);
	line-height: 1.2;
	color: var(--fab-color);
	text-decoration: none;
}

.fab-scribble:hover,
.fab-scribble:focus,
.fab-scribble:visited {
	color: var(--fab-color);
	text-decoration: none;
}

/* Reihenfolge umkehren: erst Pfeil, dann Text. */
.fab-scribble.is-arrow-first {
	--fab-d-shaft: 0.1s;
	--fab-d-head: 0.55s;
	--fab-d-l1: 0.9s;
	--fab-d-l2: 1.7s;
}

.fab-scribble.is-uppercase {
	text-transform: uppercase;
}

.fab-scribble p {
	margin: 0;
}

.fab-scribble svg {
	width: var(--fab-arrow);
	height: auto;
	flex: none;
	overflow: visible;
}

.fab-scribble path {
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.fab-scribble span {
	display: block;
	clip-path: inset(-10% 100% -10% 0);
}

.fab-scribble.is-drawn .fab-l1 {
	animation: fabWrite calc(0.8s / var(--fab-speed)) steps(var(--fab-l1-steps)) calc(var(--fab-d-l1) / var(--fab-speed)) forwards;
}

.fab-scribble.is-drawn .fab-l2 {
	animation: fabWrite calc(0.8s / var(--fab-speed)) steps(var(--fab-l2-steps)) calc(var(--fab-d-l2) / var(--fab-speed)) forwards;
}

.fab-scribble.is-drawn .fab-shaft {
	animation: fabDraw calc(0.5s / var(--fab-speed)) ease-out calc(var(--fab-d-shaft) / var(--fab-speed)) forwards;
}

.fab-scribble.is-drawn .fab-head {
	animation: fabDraw calc(0.25s / var(--fab-speed)) ease-out calc(var(--fab-d-head) / var(--fab-speed)) forwards;
}

@keyframes fabWrite {

	to {
		clip-path: inset(-10% -5% -10% 0);
	}
}

@keyframes fabDraw {

	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fab-scribble span {
		clip-path: none;
	}

	.fab-scribble path {
		stroke-dashoffset: 0;
	}

	.fab-scribble.is-drawn .fab-l1,
	.fab-scribble.is-drawn .fab-l2,
	.fab-scribble.is-drawn .fab-shaft,
	.fab-scribble.is-drawn .fab-head {
		animation: none;
	}
}

@media (max-width: 781px) {

	.fab-scribble {
		margin-left: 0;
		width: 100%;
		font-size: calc(var(--fab-size) * 0.846);
	}

	.fab-scribble svg {
		width: calc(var(--fab-arrow) * 0.75);
	}

	/* Option „Auf Mobilgeräten ausblenden“.
	   Im Editor setzt edit.js die Klasse nicht. */
	.fab-scribble.is-hidden-mobile {
		display: none;
	}
}