/* Live-System: aktuelle Typografie und Komponenten-DNA von evergreen.media. */

/* Originalraster: 77.5rem Inhaltsbreite plus 1.125rem Seitengutter. */
.variant-a .container {
	max-width: 79.75rem;
	padding-inline: 1.125rem;
}

/* Großzügigerer Seitenrhythmus, ohne die inneren Komponenten aufzublähen. */
.variant-a main .section {
	padding-block: 4.5rem;
}

.variant-a main .partner,
.variant-a main .kontakt {
	padding-block: 5.5rem;
}

.variant-a main h1,
.variant-a main h2,
.variant-a main h3,
.variant-a main h4 {
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

.variant-a main h1 {
	font-size: clamp(1.875rem, 1.55rem + 1.4vw, 2.8125rem);
	font-weight: 700;
}

.variant-a main h2 {
	font-size: clamp(1.625rem, 1.4rem + 0.85vw, 2.025rem);
}

.variant-a main h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.575rem);
}

.variant-a main h4 {
	font-size: 1.35rem;
}

.variant-a .btn {
	font-family: var(--font-body);
	font-size: 1.0125rem;
	font-weight: 600;
	line-height: 1.55;
	padding: 0.5625rem 1.6875rem;
	border-width: 0.0625rem;
	border-radius: 0;
}

.variant-a .btn::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.75rem;
	font-size: 1.05em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.variant-a .btn:hover::after,
.variant-a .btn:focus-visible::after {
	transform: translate(0.125rem, -0.125rem);
}

.variant-a .btn--primary:hover,
.variant-a .btn--primary:focus-visible {
	background: var(--c-white);
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.variant-a .contact-form .btn {
	background: var(--c-primary);
	color: var(--c-white);
}

.variant-a .contact-form .btn:hover,
.variant-a .contact-form .btn:focus-visible {
	background: var(--c-white);
	border-color: var(--c-primary);
	color: var(--c-primary);
}

@media (prefers-reduced-motion: reduce) {
	.variant-a .btn::after {
		transition: none;
	}
}

@media (max-width: 48rem) {
	.variant-a main .section,
	.variant-a main .partner,
	.variant-a main .kontakt {
		padding-block: 3rem;
	}
}
