/**
*  Anmelde-Karte in der Seitenleiste
*
*  - Titel --paper-white auf --brand-structure (--cool): 11 : 1
*  - Text  --cool9 auf --brand-structure (--cool): 10 : 1
*  - Button --paper-white auf --warm-2: 4,6 : 1
**/

.c-signup {
	padding: var(--space-m);
	border-radius: 0.35rem;
	background: var(--brand-structure);
	color: var(--paper-white);
}

.c-signup__title {
	margin: 0;
	color: var(--paper-white);
	font-family: var(--font-editorial);
	font-size: var(--fs-1);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--lh-h3);
	text-wrap: balance;
}

.c-signup__text {
	margin: var(--space-xs) 0 0;
	color: var(--cool9);
	font-family: var(--font-interface);
	font-size: var(--fs--1);
	line-height: var(--lh--1);
}

.c-signup__button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-block-start: var(--space-s);
	padding: 0.7em 1.1em;
	border-radius: var(--border-radius);
	background: var(--warm-2);
	color: var(--paper-white);
	font-family: var(--font-interface);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.3s ease-out;

	&::after {
		content: "→";
		content: "→" / "";
	}

	&:hover {
		background: var(--warm-3);
	}

	&:focus-visible {
		outline: 3px solid var(--paper-white);
		outline-offset: 2px;
		box-shadow: 0 0 0 6px var(--cool-1);
	}
}

.c-signup__form {
	margin-block-start: var(--space-s);
}

.c-signup__more {
	margin: var(--space-s) 0 0;
	padding: 0;
}

/* Link auf weißer Schrift, unterstrichen: 16 : 1 auf --cool-2 */
.c-signup__link {
	color: var(--paper-white);
	font-family: var(--font-interface);
	font-size: var(--fs-0);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;

	&::after {
		content: " →";
		content: " →" / "";
	}

	&:hover {
		color: var(--warm2);
	}

	&:focus-visible {
		outline: 3px solid var(--paper-white);
		outline-offset: 3px;
	}
}