/**
*  Startseite als Modularseite (Design landingpage.png)
*
*  Module: Merkmale (--soft), Anmeldung. Der Kopf ist das Modul hero.
*  Aufbau wie c-intro und c-topic: ein Streifen links neben Dachzeile
*  und Überschrift zusammen, keine weitere Linie dazwischen.
*  Farben über Rollen-Token (siehe variables--global.css).
**/

.l-module.c-landing {
	padding-block: var(--space-xl);
	background: var(--surface-page);
}

.l-module.c-landing--soft {
	background: var(--topic-bg-1);
}

.c-landing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-l) var(--space-xl);
	align-items: center;
}

.c-landing__text {
	min-inline-size: 0;
}

/* Ein Streifen für Dachzeile und Überschrift */
.c-landing__head {
	padding-inline-start: var(--space-s);
	border-inline-start: 4px solid var(--stripe);
}

.c-landing__eyebrow {
	--eyebrow-color: var(--color-accent-strong);
	margin-block-end: var(--space-3xs);
}

.c-landing .c-landing__title {
	margin: 0;
	max-inline-size: none;
	color: var(--ink-navy);
	font-family: var(--font-editorial);
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	text-wrap: balance;
}

h2.c-landing__title {
	font-size: var(--fs-h2);
}

.c-landing__body {
	margin-block-start: var(--space-m);
	color: var(--ink-navy-soft);
	font-family: var(--font-editorial);
}

.c-landing__body > p {
	max-inline-size: var(--reading-width);
	margin: 0;
	padding: 0;
	color: var(--ink-navy-soft);
}

.c-landing__body > p + p {
	margin-block-start: var(--space-xs);
}

/* Merkmale */
.c-landing__features {
	display: grid;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-landing__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--space-s);
	margin: 0;
}

.c-landing__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-accent) 25%, var(--surface-card));
	color: var(--color-accent-strong);
}

.c-landing__feature-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.c-landing__feature-title {
	font-size: var(--fs-1);
	line-height: var(--lh-1);
	color: var(--ink-navy);
}

.c-landing__feature-text {
	font-family: var(--font-interface);
	font-size: var(--fs--1);
	line-height: var(--lh-0);
	color: var(--ink-navy-soft);
}

/* Anmeldekarte */
.c-landing__card {
	padding: var(--space-m);
	border: 1px solid var(--paper-line);
	border-radius: var(--border-radius);
	background: var(--surface-card);
	box-shadow: var(--card-shadow);

	& form {
		margin: 0;
		padding: 0;
		border: 0;
		max-width: none;
		background: transparent;
	}

	& .form-field,
	& .altcha-field {
		margin-block-end: var(--space-s);
	}

	& label {
		display: block;
		font-family: var(--font-interface);
		font-size: var(--fs--1);
		font-weight: 700;
	}

	& input[type="text"],
	& input[type="email"] {
		display: block;
		inline-size: 100%;
		box-sizing: border-box;
		padding: 0.7em 0.9em;
		border: 1px solid var(--input-border);
		border-radius: var(--border-radius);
		background: var(--input-bg);
		color: var(--input-text);
		font-family: var(--font-interface);
		font-size: var(--fs-0);
	}

	& input:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: 2px;
	}

	& .buttons {
		display: block;
	}

	& button[type="submit"],
	& .c-form__button {
		inline-size: 100%;
		margin: 0;
		padding: 0.75em 1.25em;
		border: 0;
		border-radius: var(--border-radius);
		background: var(--color-highlight);
		color: var(--paper-white);
		font-family: var(--font-interface);
		font-size: var(--fs-0);
		font-weight: 700;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			background: var(--color-highlight-strong);
			color: var(--paper-white);
		}
	}
}

.c-landing__note {
	margin: var(--space-s) 0 0;
	padding: 0;
	font-family: var(--font-interface);
	font-size: var(--fs--2);
	line-height: var(--lh-0);
	color: var(--ink-navy-soft);
}

@media (min-width: 768px) {
	.c-landing__inner--signup {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.c-landing__inner--features {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.c-landing__inner--features .c-landing__features {
		padding-inline-start: var(--space-xl);
		border-inline-start: 1px solid var(--paper-line);
	}
}