@layer utilities {
	.hidden {
		display: none;
	}
	.visually-hidden:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	.wrap {
		display: block;
		width: 100%;
		max-width: 1662px;
		margin: 0 auto;
		padding: 0 5%;
		&.intro {
			margin-block: calc(2% + 2rem);
			p {
				font-size: clamp(1.2rem, 3vw, 1.666rem);
				line-height: 1.3;
			}
			& > * {
				max-width: 50rem;
			}
			& + .blocks,
			& + .blog {
				margin-top: -4rem;
			}
		}
	}
	.icon {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		& svg {
			width: 100%;
			height: 100%;
		}
	}
	.nbsp {
		white-space: nowrap;
		width: 1.5rem;
		display: inline-block;
	}
	.buttonlink {
		font-family: var(--din);
		cursor: pointer;
		appearance: none;
		border: none;
		width: fit-content;
		margin: 0 auto 1rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		font-size: 1.2rem;
		padding: 0.5rem 1.5rem;
		transition:
			padding 0.15s ease,
			background 0.4s ease;
		color: white;
		border-radius: 0.3rem;
		background: var(--erde) url(/assets/img/arrow-white.svg) no-repeat 110%
			center;
		background-size: 0.7rem;
		.das-eckerts & {
			background-color: var(--wasser);
		}

		&:hover,
		&:focus,
		&:active {
			padding-right: 2.5rem;
			background-color: black;
			background-position: calc(100% - 1rem) center;
		}
	}
}