.pap-designsystem {
	display: grid;
	gap: 32px;
	padding: 40px;
	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 .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; }
}

/* Erweiterte visuelle Referenz oberhalb des bisherigen Designsystem-Bereichs. */
.pap-designsystem__erweiterung {
	gap: 32px;
}

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

.pap-designsystem__referenzblock > h3 {
	margin: 0;
}

.pap-designsystem__komponente {
	display: grid;
	justify-items: start;
	gap: 8px;
	min-width: 0;
}

.pap-designsystem__klassenhinweis {
	display: block;
	max-width: 100%;
	padding: 3px 7px;
	border: 1px solid var(--pap-dunkel-border);
	border-radius: var(--pap-radius-4);
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text-zart);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pap-designsystem__komponentenbeispiel--hell .pap-designsystem__klassenhinweis {
	border-color: var(--pap-border);
	background: var(--pap-flaeche-betont);
	color: var(--pap-text-zart);
}

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

.pap-designsystem__typografieeintrag {
	display: grid;
	align-content: start;
	gap: 10px;
	min-width: 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--pap-dunkel-border);
}


.pap-designsystem__typografieeintrag--breit {
	grid-column: 1 / -1;
}

.pap-designsystem__typografie-code {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pap-dunkel-text-zart);
	font-family: "Roboto Mono", monospace;
	font-size: var(--pap-schrift-100);
	font-weight: 400;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.pap-designsystem__typografie-code code {
	font: inherit;
	color: inherit;
}

.pap-designsystem__komponentenbeispiel {
	display: grid;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--pap-dunkel-border);
	border-radius: var(--pap-radius-8);
}

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

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

.pap-designsystem__komponentenbeispiel--hell :is(h1, h2, h3, h4, p, strong) {
	color: var(--contrast);
}

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

.pap-designsystem__buttonraster,
.pap-designsystem__statusraster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px 16px;
}

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

.pap-designsystem__vollformular label,
.pap-designsystem__editorbeispiel label {
	display: grid;
	gap: 6px;
}

.pap-designsystem__vollformular :is(input, select, textarea),
.pap-designsystem__editorbeispiel :is(input, textarea) {
	width: 100%;
}

.pap-designsystem__vollformular-breit {
	grid-column: 1 / -1;
}

.pap-designsystem__werkzeugkarte,
.pap-designsystem__gespeichertbeispiel {
	max-width: 42rem;
}

.pap-designsystem__kartenaktionen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.pap-designsystem__werkzeugkopfbeispiel {
	padding: 20px;
	border: 1px solid var(--pap-dunkel-border);
	border-radius: var(--pap-radius-8);
	background: var(--pap-dunkel-flaeche-betont);
}

.pap-designsystem__filterbeispiel {
	margin-bottom: 0;
}

.pap-designsystem__dialogbeispiel[open] {
	position: static;
	inset: auto;
	width: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
}

.pap-designsystem__gespeichertdarstellung {
	display: grid;
	min-height: 8rem;
	place-items: center;
	border: 1px solid var(--pap-dunkel-border);
	border-radius: var(--pap-radius-8);
	background: var(--pap-dunkel-flaeche-betont);
	color: var(--pap-dunkel-text-zart);
}

.pap-designsystem__standalonebeispiel {
	display: grid;
	height: 22rem;
	min-height: 0;
	align-content: center;
	gap: 16px;
}

.pap-designsystem__trenner {
	width: 100%;
	margin: 8px 0;
	border: 0;
	border-top: 1px solid var(--pap-dunkel-border);
}

@media (max-width: 720px) {
	.pap-designsystem__typografiebeispiele {
		grid-template-columns: 1fr;
	}

	.pap-designsystem__kontextgruppe,
	.pap-designsystem__dialograster,
	.pap-designsystem__kartenraster,
	.pap-designsystem__vollformular {
		grid-template-columns: 1fr;
	}

	.pap-designsystem__vollformular-breit {
		grid-column: 1;
	}
}

.pap-designsystem__kartenraster--varianten {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pap-designsystem__codekarte {
	align-content: start;
}

.pap-designsystem__karten-code {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 0.9rem;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.pap-designsystem__karten-code code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: "Roboto Mono", monospace;
	font-size: inherit;
}


.pap-designsystem__kartenklasse {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: "Roboto Mono", monospace;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
	.pap-designsystem__kartenraster--varianten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.pap-designsystem__kartenraster--varianten {
		grid-template-columns: 1fr;
	}
}


.pap-designsystem__lerntraining-buttonbeispiel {
	display: grid;
	gap: 10px;
	max-width: 42rem;
	padding-top: 8px;
}

.pap-designsystem__lerntraining-buttonbeispiel > h4,
.pap-designsystem__lerntraining-buttonbeispiel > p {
	margin: 0;
}