/* Pflegegradrechner */
.form-wrapper {
	max-width: 100ch;
	margin: 0 auto;
}

.form-wrapper p {
	max-width: 50em !important;
}

.modul-wrapper,
.calculator-results {
	border-top: 1px dotted var(--color-6);
}

.modul-wrapper {
	/* in Schritt 5 ist das Grid anders */
	--column-layout: 1fr;
	gap: 0 1rem;
}

.modul-label,
.modul-input {
	grid-column: -1/1;
}

.modul-input[type=number] {
	border-radius: var(--border-radius);
	width: calc(2 * 1em + 6ch);
}

.modul-wrapper .next-step[data-step="6"],
.modul-wrapper .prev-step[data-step="4"] {
	grid-column: 1/-1;
}

@media(min-width: 36em) {
	.modul-wrapper .next-step {
		grid-column: 2;
		justify-self: end;
	}

	.modul-wrapper .next-step {
		grid-column: 2;
		justify-self: end;
	}

	.modul-wrapper .next-step[data-step="6"] {
		grid-column: 3;
	}

	.modul-wrapper .prev-step {
		grid-column: 1;
		justify-self: start;
	}
}

@media (min-width: 36em) {
	#modul-5 .modul-wrapper {
		--column-layout: 1fr auto 2fr;
	}

	#modul-5 .modul-hint {
		grid-column: 3;
	}

	.modul-wrapper {
		--column-layout: 1fr 2fr;
	}

	.modul-label {
		grid-column: -1/1;
	}

	.modul-input {
		grid-column: 1;
		align-self: start;
	}

	.modul-input[type=number],
	.modul-hint {
		grid-column: 2;
	}

	.modul-input[type=number] {
		margin-bottom: var(--size3);
	}
}

@media (max-width: 35.999em) {
	#modul-5 .modul-wrapper {
		--column-layout: 1fr auto;
	}

	:is(#modul-5 .modul-wrapper) .modul-input {
		grid-column: 1;
		align-self: baseline;
	}

	:is(#modul-5 .modul-wrapper) .modul-input[type=number] {
		grid-column: 2;
	}

	:is(#modul-5 .modul-wrapper) .modul-hint {
		grid-column: 1/-1;
	}
}

.modul-hint {
	--text-len: 1fr;
	align-content: center;
}

.modul-hint>svg {
	--symbol-size: 1.5em;
	--icon-fill: var(--brand-accent-400);
	--icon-stroke: var(--brand-accent-400);
	color: var(--brand-accent-400);
	align-self: center;
	margin-top: 1px;
}

@media (max-width: 63.999em) {
	.modul-hint {
		--widget-areas: "img text";
		grid-template-columns: auto 1fr;
		margin-top: var(--size-2);
		gap: .5ch;
	}

	.modul-hint>svg {
		--symbol-size: 1.2em;
		align-self: start;

	}
}

/* Schritte */
.steps-wrapper {
	outline: 2px solid var(--brand-accent-900);
	border-radius: 22px;
	background-color: var(--brand-accent-900);
	max-width: 50em;
}

#steps .steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

@media (max-width: 29.999em) {
	#steps .steps {
		grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
	}
}

#steps .step {
	width: auto;
	background-color: transparent;
	border-color: transparent;
	border-radius: 0;
	color: var(--brand-accent-800-contrast);
}

:is(#steps .step):hover {
	cursor: pointer;
}

#steps [aria-current] {
	background-color: var(--brand-accent-600);
	color: var(--brand-accent-600-contrast);
	outline: 2px solid var(--brand-accent-600);
	animation: fade-in .5s ease-in;
}

#steps :nth-last-child(1 of [aria-current]) {
	outline: 2px solid var(--brand-accent-400);
	background-color: var(--brand-accent-400);
	color: var(--color-10);
}

#steps [data-step="1"] {
	border-radius: 22px 0 0 22px;
}

#steps [data-step="result"] {
	border-radius: 0 22px 22px 0;
}

.result-wrapper {
	--column-layout: 1fr 1fr;
	--row-layout: auto 1fr;
	--grid-layout: "head head" "table info";
}
.result-products .c_card-deck {
	--column-layout: 1fr 1fr;
}

.result-title {
	grid-area: head;
}
.result-wrapper .table-data {
	grid-area: table;
	place-self: center;
	width: 100%;
}
.result-wrapper .table-data>caption {
	caption-side: unset;
}

.result-wrapper .disclaimer {
	grid-area: info;
	align-self: end;
}

.result-wrapper tfoot {
	background-color: var(--brand-accent-600);
}

.result-products .m_card {
	--card-rows: 1fr;
  --card-layout: "h b";
  --card-columns: 1fr;
}

@media (min-width: 36em) {
	.result-products .m_card {
		--card-rows: auto 1fr;
		--card-layout:
			"h b"
			"h b";
		--card-columns: 1fr 2fr;
	}
}
.result-products .card-head img {
	height: 100%;
}

.result-products .card-title {
	margin-top: 0;
	margin-bottom: 0;
}

.result-products .card-foot {
	display: none;
}