/**
 * Helper-Klassen: manuell im Editor zuweisbare Utility-Modifier,
 * nicht an ein bestimmtes Block, Component oder Page gebunden.
 */

.text-border-1,
.text-border-2,
.text-border-3,
.text-border-4 {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0.3em 0em 0.4em;
	box-decoration-break: clone;
}

.text-border-1 {
	background-image: url('../images/text-border-1.svg');
}

.text-border-2 {
	background-image: url('../images/text-border-2.svg');
}

.text-border-3 {
	background-image: url('../images/text-border-3.svg');
}

.text-border-4 {
	background-image: url('../images/text-border-4.svg');
}

.flex-stretch {
	align-items: stretch;

	@media (max-width: 782px) {
		flex-direction: column;
	}
}

.auto-space-between {
	height: auto;
	justify-content: space-between;
}

.safe-svg-cover svg {
	fill: none !important;
}

.has-gigantic-font-size {
	line-height: 1;
}

/* H1/H2/H3 em scribble underline */
h1 em,
h2 em,
h3 em {
	position: relative;
	font-style: normal;
}

h1 em::after,
h2 em::after,
h3 em::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 0;
	bottom: -0.2em;
	height: 0.35em;
	background-image: url('../images/scribble-underline.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-width: 200px;
	transform: translateX(-50%);
	width: 100%;
}

h1.underline1 em::after,
h2.underline1 em::after,
h3.underline1 em::after {
	background-image: url('../images/scribble-underline1.svg');
}

h1.underline2 em::after,
h2.underline2 em::after,
h3.underline2 em::after {
	background-image: url('../images/scribble-underline2.svg');
}

h1.underline3 em::after,
h2.underline3 em::after,
h3.underline3 em::after {
	background-image: url('../images/scribble-underline3.svg');
}

h1.underline4 em::after,
h2.underline4 em::after,
h3.underline4 em::after {
	background-image: url('../images/scribble-underline4.svg');
}

/* Horizontal Scroll Columns */
@media (max-width: 782px) {
	.wp-block-columns.mobile-scroll {
		display: flex;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
		padding-bottom: var(--wp--style--root--padding-left);
	}

	.wp-block-columns.mobile-scroll .wp-block-column {
		flex: 0 0 80vw;
		flex-basis: auto !important;
		width: 80vw;
		scroll-snap-align: start;
		padding-left: var(--wp--style--root--padding-left);
	}

	.wp-block-columns.mobile-scroll .wp-block-column img {
		width: 100%;
		height: auto;
		display: block;
	}
}