/**
 * Patches, Fixes, Overrides der WiA Styles.
 * @todo Bei Gelegenheit zurückportieren.
 */

body:is(.page-card, .page-html, .page-faq, .page-module) main {
	max-width: 80ch;
	margin-inline: auto;
	margin-block: 2rem;

	hr {
		color: var(--color-7);
	}
}

header.panel-page-header {
	border-bottom: 2px solid var(--color-7);

	> :is(h2, h3, p, div) {
		color: var(--color-5);
	}
}

/* ersetzt core.css 4910-4935 aus spacing.scss */
:is(.stack-xs, .stack-sm, .stack-md, .stack-lg, .stack-xl)[class] {

	> :first-child:not(:only-child),
	>*+ :not(br, hr) {
		margin-top: unset;
		margin-bottom: var(--spacer-end);
	}

	> :last-child:not(br, hr) {
		margin-bottom: 0;
	}
}

:is(h1, .h1, h2, .h2, h3, .h3) {
	font-weight: normal;
}

:is(pre, xmp) {
	max-width: 120ch;
	overflow: auto;
}

/* @fix .card-foot :any-link.card-link 
	 wenn <a.card-link btn -secondary -ghost> */
.btn:any-link.card-link {
	color: var(--btn-text);
}

.media-box {
	display: grid;
	grid-template-columns: var(--card-columns);
	grid-template-rows: var(--card-rows) auto;
	grid-template-areas: var(--card-layout);

	& figcaption {
		grid-row-start: -1;
		grid-column: 1 / -1;
		text-align: center;
		align-self: end;
		font-size: smaller;
		line-height: normal;
		padding: .5ex 1em;
	}

	& figcaption:not(.forced) {
		opacity: 0;
	}
}

.media-box .-nw.-nw,
.media-box .-ne.-ne,
.media-box .-se.-se,
.media-box .-sw.-sw {
	grid-area: var(--placement);
}

.media-box .-ne.-ne,
.media-box .-se.-se {
	justify-items: end;
}


@media (max-width: 35.999em) {
	.c_card-deck.-deck-duo {
		grid-template-columns: 1fr;
	}
}

.-deck-trio>.last-odd {
	grid-column: 1/-1;
	margin-inline: calc(100%/var(--deck-items)/2);
}

@media (max-width: 39.999em) {

	.-deck-trio,
	.-deck-trio .m_card {
		flex-direction: column;
	}
}

@media (max-width: 44.999em) {
	.-deck-trio {
		--deck-items: 1;
	}
}

@media (min-width: 49.999em) {
	.-deck-trio>.m_card:only-child {
		--card-columns: 1fr 2fr;
		--card-layout: "h b" "h f";
		--card-rows: 1fr auto;
		flex-basis: var(--max-content-width);
	}
}

@media (min-width: 63.999em) {
	.-deck-trio {
		flex-wrap: wrap;
	}

	.-deck-trio .m_card {
		flex-basis: var(--col-item);
	}
}

.-deck-quart {
	--grid-layout-gap: var(--grid-spacing-inline, var(--size-3));
	--grid-column-count: 4;
	--grid-item--min-width: 16em;

	--gap-count: calc(var(--grid-column-count) - 1);
	--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
	--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

	display: grid;
	grid-gap: var(--grid-layout-gap);
	/* container-type: inline-size; */

	@media (min-width: 80em) {
		grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
	}

	.m_card {
		--card-columns: 1fr;
		--card-layout: "h" "b" "f";
		--card-rows: auto 1fr auto;

		.card-foot {
			justify-self: center;
		}
	}
}

.-deck-quart,
.-deck-slim {
	.card-body .card-title {
		color: var(--brand-accent-400);
	}
}

/* Zusätzliches CSS für Akkordions/FAQ */
.accordion {
	&.-accent {
		--icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke=\"white\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"1 9 12 20 23 9\" /></svg>");
	}

	&.-ghost summary::after,
	&.-kontur summary::after {
		--icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke=\"%232f2f2f\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"1 9 12 20 23 9\" /></svg>");
	}

	&.-accent p {
		background-color: var(--surface-8);
		color: var(--color);
	}

	.accordion[open]>summary::after {
		transform: rotate(0);
	}
}

.accordion p:not(:first-of-type),
.accordion ul>li>p {
	border: unset;
}

.accordion p {
	margin-bottom: unset;
}

details.accordion {
	padding: 0;
	background-color: var(--_bgl);
}

.accordion:is(blockquote),
details.accordion summary,
details.accordion p {
	padding: calc(var(--spacing) * 0.5);
}

details.accordion p {
	margin-top: 0;
}

details.accordion[open]>summary {
	margin-bottom: 0;
}

.faq-title {
	padding-block: unset;
}

details.faq-item {
	--spacing: var(--size-3);
}

.faq-item dd {
	margin: 0 0 var(--size-3) var(--size-2);
}


.embedded {
	margin: 0 var(--spacing-neg);

	&.-iframe {
		.iframe-preview-bg {
			max-height: 400px;
		}
	}
}

.iframe-preview-bg {
	position: absolute;
	top: 0;
	background: radial-gradient(circle, #fff 0, #bebab3 80%);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	img {
		width: auto;
	}
}

#button-search {
	display: inline-grid;
}

/* Breadcrumbs */
.breadcrumbs .menu-label {
	overflow-x: hidden;
	text-overflow: ellipsis;
	max-width: 20ch;
}


/* Mobile Menu */
@media (max-width: 63.99em) {
	.menu__wrap ul:not(.fixed-navigation) {
		.img-text {
			--widget-areas: "text img";

			svg {
				place-self: end;
			}
		}
	}

	.menu__wrap ul.fixed-navigation .img-text {
		--gap: 0 1ex;
	}
}

main.error {
	position: relative;
}