.pap-designsystem {
	display: grid;
	gap: 32px;
	padding: 40px;
	border-radius: 8px;
	background: var(--pap-dunkel-hintergrund);
	color: var(--pap-dunkel-text);
}

.pap-designsystem section {
	display: grid;
	gap: 16px;
}

.pap-designsystem h1,
.pap-designsystem h2,
.pap-designsystem h3,
.pap-designsystem p { margin: 0; }

.pap-designsystem h1,
.pap-designsystem h2,
.pap-designsystem h3,
.pap-designsystem h4 {
	color: var(--pap-dunkel-text);
}

.pap-designsystem p {
	color: var(--pap-dunkel-text);
}

.pap-designsystem .pap-karte__meta {
	color: var(--pap-dunkel-text-zart);
}

.pap-designsystem .pap-designsystem__kartentitel {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.pap-designsystem__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.pap-designsystem__farbe {
	display: grid;
	gap: 8px;
}

.pap-designsystem__farbfeld {
	min-height: 88px;
	border: 1px solid var(--pap-dunkel-border);
	background: var(--pap-farbmuster);
}

.pap-designsystem__beispiel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--pap-dunkel-border);
}

.pap-designsystem__beispiel--hell {
	background: var(--pap-flaeche);
	color: var(--contrast);
}

.pap-designsystem__beispiel--hell .pap-button--sekundaer {
	border-color: var(--pap-border);
	color: var(--contrast);
}

.pap-designsystem__beispiel--hell .pap-button--sekundaer:hover,
.pap-designsystem__beispiel--hell .pap-button--sekundaer:active {
	background: var(--pap-flaeche-betont);
	color: var(--contrast);
}

.pap-designsystem__beispiel--dunkel {
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text);
}

.pap-designsystem__formular {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pap-designsystem__formular label { display: grid; gap: 6px; }
.pap-designsystem__formular label:last-child { grid-column: 1 / -1; }
.pap-designsystem__formular input,
.pap-designsystem__formular select,
.pap-designsystem__formular textarea { width: 100%; }

.pap-designsystem .pap-karte--hell h3,
.pap-designsystem .pap-karte--hell p {
	color: var(--contrast);
}

@media (max-width: 720px) {
	.pap-designsystem { padding: 20px; }
	.pap-designsystem__formular { grid-template-columns: 1fr; }
	.pap-designsystem__formular label:last-child { grid-column: 1; }
}