main.guide {
	--advisor-width: minmax(min-content, 82ch);
	--toc-width: minmax(min-content, 35ch);

	@media (max-width: 1024px) {
		--toc-width: minmax(22ch, 35ch);
	}
}

.layout:target .block-form {
	outline: 2px solid var(--brand-accent-600);
	outline-offset: 3px;
	border-radius: 1ex;
}

.c_card-deck {

	/* .grid ! */
	&:not(.-deck-slim) figure.card-head,
	&:not(.-deck-slim) figure.card-head img {
		--spacing: var(--size-3);
		aspect-ratio: var(--aspect, 16/9);
		/* hack für safari */
		max-width: 100%;
	}

	&.-deck-slim {
		/* container: deck-slim / inline-size; */

		.card-head img {
			height: 100%;
		}

		/* overwrite cards.css */
		.card-foot .btn {
			display: initial !important;
		}

	}
}

.m_card {
	&.-portrait {
		aspect-ratio: var(--aspect);
	}

	&.-card-slim {
		&.box {
			padding: 0;
		}

		&:not(.-h-bf) .card-head img {
			height: 100%;
		}

		/* -portrait */
		&.-h-bf {
			--card-columns: 1fr 2fr;
		}
	}

	.card-foot {
		padding-block-end: var(--size-3);
	}
}

@supports selector(:has(a, b)) {
	.m_card {
		.card-foot:has(button[class], .btn, :any-link[href]) {
			z-index: 5;
		}
	}
}

.c_card-deck .no-cover,
.m_card.no-cover {
	--card-layout: "b b" "f f";
}

header.hero-image {
	/* hat template override */
	--title-hue: 96;
	--title-opac: 85%;
	--block-spacing-inline: 0;
	--gap: var(--size-3);
	grid-template-areas:
		"L C C R"
		"L C C R"
		"L C C R";
	grid-template-columns: 1fr var(--toc-width, 1fr) var(--advisor-width, 3fr) 1fr;
	grid-template-rows:
		[title] auto [heading] auto [intro] auto;

	>* {
		grid-column: C;
	}

	.section-title {
		grid-row: title;
	}

	.h2 {
		grid-row: heading;
	}

	.page-intro {
		--_bg: hsl(var(--title-hue, 37), 15%, 90%, var(--title-opac, 85%));
		padding: var(--spacing, var(--size-3));
		background-color: var(--_bg, transparent);
		grid-row: intro;
	}

	@media (max-width: 35.99em) {
		display: block;

		.page-title {
			text-wrap: unset;
		}
	}
}

/* guides.twig > hero.twig */
.guides header[data-noheading] .section-title {
	padding-bottom: 0;
}

.guides header[data-nointro] {
	padding-bottom: 0;
	margin-bottom: 0;
}

.c_partner {
	background-color: var(--surface-10);
	margin: 0 auto;
}

.c_advisor,
.c_partner {
	display: grid;
	gap: var(--spacing);
	position: relative;

	h2,
	.h2,
	h3,
	.h3 {
		--spacer: var(--size-3);
		margin-top: unset;
	}

	h3,
	.h3 {
		--spacer-end: 1ex;
	}
}

section.c_advisor {
	grid-template-columns: var(--toc-width) var(--advisor-width);
	grid-template-areas:
		"head head"
		". utils"
		"toc content"
		". foot";
	justify-content: space-evenly;
	align-items: start;
	background-color: var(--surface-10);

	.page-sidebar {
		grid-area: toc;
		order: -1;
		display: flex;
		flex-direction: column;
		position: sticky;
		top: var(--spacing);
		background: unset;
	}

	.colofon {
		grid-area: foot;
		line-height: 1.625;
	}

	.guide-cta {
		z-index: 50;
		grid-area: utils;
		display: flex;
		justify-content: end;
		position: sticky;
		top: 0;
		padding: calc(var(--space-inside) * .5);
		transition: visibility 350ms ease-in, opacity 350ms ease-in;

		&.-absolute {
			position: absolute;
		}

		@media (min-width: 50em) {
			padding-block: calc(var(--space-inside) * .75);
			padding-inline: calc(var(--space-inside) * 2);
		}
	}

	@media (max-width: 49.999em) {
		padding: 0;
		grid-template-columns: 1fr;
		grid-template-areas:
			"utils"
			"head"
			"toc"
			"content"
			"foot";

		.page-sidebar {
			background-color: transparent;
			display: none;
		}

		.guide-cta {
			left: 0;
			justify-content: space-between;
			align-items: center;
			width: 100vw;
			position: fixed;
		}

		#guide-cta {
			margin: unset;
		}

		.sub-wrapper {
			margin-top: calc(var(--space-inside) + 2 * var(--spacer) + 2 * var(--font-lineheight-1));
			width: 100dvw;
			left: -5px;
		}
	}

	@media (max-width: 29.999) {
		.guide-cta {
			grid-area: unset;
			left: 0;
		}
	}
}

.m_advisor {
	grid-area: content;
	background-color: white;
	margin: 0 auto;

	>header,
	>section:not(:last-of-type) {
		/* border-bottom: var(--border-width) solid var(--border-color); */
		padding-bottom: var(--spacing);
	}

	.layout {
		display: grid;
	}

	.layout>a.btn {
		max-width: max-content;
		justify-self: center;
	}

	.c_card-deck {
		gap: var(--gutter);
	}

	.-deck-duo {
		@media (min-width: 80em) {
			grid-template-columns: 1fr 1fr;
			--card-rows: [T] 1fr [M] auto auto [B];
		}

	}
}

/* "Links" auf inaktive o. fehlender Seiten */
#page-main[data-user]:not([data-user=""]) em[data-draft] {}

/* HTML Module */
figure.table-data {
	--border-radius: 5px;
}

table.table-data {
	--border-radius: 1ex;
	outline: 2px solid var(--color-8);
	outline-offset: 1px;

	&:is(.schema-0, .schema-1, .schema-2, .schema-3) tbody tr:nth-child(odd) {
		--table-row-background-color: var(--surface-10);
	}

	&.schema-1 {
		--table-head-background-color: var(--brand-primary-600);
		--table-row-background-color: var(--brand-primary-900);
	}

	&.schema-2 {
		--table-head-background-color: var(--brand-secondary-600);
		--table-row-background-color: var(--brand-secondary-900);
	}

	&.schema-3 {
		--table-head-background-color: var(--brand-accent-600);
		--table-row-background-color: var(--brand-accent-900);
	}
}

:is(figure, table, dl).table-data {
	--spacing: var(--size-3);
	margin-inline: auto;
	max-width: 100%;
}

:is(figure, dl).table-data {
	overflow-x: auto;
}

:is(table, dl).table-data :is(th, dt) {
	-webkit-hyphens: auto;
	hyphens: auto;
}

:is(table, dl).table-data,
.table-data caption {
	outline: var(--border-width) solid var(--table-head-background-color);
}

.table-data> :is(caption, figcaption) {
	text-align: center;
	caption-side: bottom;
	font-weight: normal;
	font-size: smaller;
	line-height: 1.2;
	padding: 1ex 3em;

	strong,
	b {
		font-weight: bolder
	}
}

.table-data tbody {
	outline: 1px solid var(--table-row-background-color);
	outline-offset: 2px;
}

.table-data>tbody tr td:first-of-type {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
	left: 0;
}

.table-data>thead th {
	min-width: 8ch;
}


/* site/snippets/blocks/wia-box.php */

blockquote.wia-box,
details.wia-box {
	background-color: var(--surface-8);
	width: 100%;
	max-width: unset;
	outline: 1px solid transparent;
	box-shadow: var(--shadow-dark);

	ul:last-child {
		margin-bottom: unset;
	}

	&.-check {
		--icon-fill: none;
		--icon-check: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" stroke=\"%23237789\" fill=\"none\" stroke-width=\"4\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>");

		ul,
		ol {
			list-style-type: none;
			display: flex;
			flex-direction: column;

			>li {
				display: inline-flex;
				flex-direction: column;

				&::before {
					content: var(--icon-check);
					margin-right: calc(var(--spacing) * .5);
					position: absolute;
					left: 1rem;
					margin-top: 1px;
				}
			}
		}
	}

	&.-primary {
		--_bg: var(--brand-primary-400);
		--_bgl: var(--brand-primary-900);
		color: var(--brand-primary-400-contrast);
	}

	&.-secondary {
		--_bg: var(--brand-secondary-400);
		--_bgl: var(--brand-secondary-900);
		color: var(--brand-compl-400-contrast);
	}

	&.-accent,
	&.-accent:is(details)>summary {
		--icon-check: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" stroke=\"white\" fill=\"none\" stroke-width=\"4\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>");
		--_bg: var(--brand-accent-400);
		--_bgl: var(--brand-accent-900);
		background-color: var(--_bg);
		color: var(--brand-accent-400-contrast);

		.quote-head {

			.icon-exclamation,
			.icon-info {
				--icon-fill: var(--brand-accent-400-contrast);
			}

			.icon-check {
				--icon-stroke: var(--brand-accent-400-contrast);
			}
		}

		
	}
	&.-accent a {
		color: var(--brand-accent-400-contrast);
	}

	&.-ghost,
	&.-kontur {
		--icon-check: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" stroke=\"%23237789\" fill=\"none\" stroke-width=\"4\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>");
	a {
		color: var(--brand-primary-500);
	}
	}

	&:is(.-primary, .-secondary, .-accent) {
		box-shadow: unset;
		background-color: var(--_bg, inherit);
	}

	&:is(.-primary, .-secondary, .-accent).-ghost,
	&:is(.-primary, .-secondary, .-accent).-ghost:is(details)>summary {
		background-color: var(--_bgl, inherit);
		color: var(--color-0);
		box-shadow: var(--shadow-dark);
		outline-color: var(--_bgl, inherit);

		a {
			color: var(--color-0);
		}
	}

	&:is(.-primary, .-secondary, .-accent).-kontur,
	&:is(.-primary, .-secondary, .-accent).-kontur:is(details)>summary {
		outline-width: 2px;
		outline-color: var(--_bg, inherit);
		color: var(--color-0);

		&:not(.-ghost) {
			background: var(--surface-8);
			box-shadow: var(--shadow-dark);
		}
	}

	&:is(.-primary, .-secondary, .-accent).-kontur,
	&:is(.-primary, .-secondary, .-accent).-ghost {

		&li::before {
			color: var(--brand-accent-400);
		}
	}

	.quote-head:is(.h3, .h4) {
		margin-top: -1ex;
	}
}

/* Der erste Textinhalt unter dem Kreis mit dem Icon) */
blockquote.wia-box:not(:has(.quote-head))> :nth-child(3) {
	padding-top: var(--spacing);
}

blockquote.wia-box:not(.faq-item) {
	margin-top: 3em;
	position: relative;
	border-radius: 1em;
}


blockquote.wia-box .wia-box-icon-wrapper {
	--icon-size: 3em;
	--icon-color: var(--brand-accent-400);
	--border-color: var(--surface-8);
	display: block;
	z-index: 30;
	width: calc(.65 * var(--icon-size));
	height: calc(.65 * var(--icon-size));
	background-color: var(--surface-10);
	position: absolute;
	transform: translate(calc(-.45 * var(--icon-size)), calc(-.45 * var(--icon-size)));
	border-radius: 100%;
	display: flex;
	justify-content: center;
	outline: 2px solid var(--border-color);
	align-items: center;
	font-size: var(--icon-size);
	font-weight: 500;
	color: var(--icon-color);

	@media (max-width: 50em) {
		--icon-size: 2.5em;
		/* transform: translate(calc(-.25 * var(--icon-size)), calc(-.6 * var(--icon-size))) */
	}
}

.layout>blockquote.wia-box.box:first-child {
	margin-top: 3em;
}


.wia-box.-accent .wia-box-icon-wrapper {
	--border-color: var(--brand-accent-400);
	--icon-color: var(--_bg);
	--border-color: var(--_bg);
}

.wia-box.-accent.-ghost .wia-box-icon-wrapper {
	--border-color: var(--_bgl)
}

.wia-box.-accent.-kontur.-ghost .wia-box-icon-wrapper {
	--icon-color: var(--_bg);
	--border-color: var(--_bg);
}


.wia-box.-kontur:has(.wia-box-icon-wrapper) {
	&.-accent {
		--border-color: var(--_bg);
	}

	.wia-box-icon-wrapper {
		background-color: var(--surface-8);
	}

	&.-accent.-ghost>.wia-box-icon-wrapper {
		background-color: var(--_bgl);
	}
}


.m_html>.grid {
	--column-layout: repeat(12, 1fr);
	background-attachment: scroll;
	background-size: cover;
	background-position: var(--align-inline) var(--align-block);

	>* {
		backdrop-filter: blur(6px) contrast(75%) brightness(125%);
		background-color: #fffb;
		box-shadow: var(--shadow-2), var(--glow-4);
	}
}

.m_html>.box-image {
	--gutter: 1ex;
}

.m_html>section:not(.box-image) [data-span]+[data-span] {
	box-shadow:
		var(--spacer-pull) 0px 0px var(--panel-background-color, red),
		calc(var(--spacer-pull) - var(--border-width)) 0px 0px var(--border-color, green);
}

/* guide videos */
figure.video,
figure.video iframe {
	width: 100%;
	min-height: fit-content;

	@media (max-width: 36em) {
		min-height: 300px;
	}
}

/* Block IFrame */
figure.iframe {
	resize: vertical;
	box-shadow: var(--shadow-dark);
	margin-block: var(--spacing);
	max-height: 95vh;
}

figure.iframe>iframe {
	background: transparent;
	padding: .5ex 0;
	width: 100%;
	max-width: 100%;
	height: 50vh;
	min-height: var(--_mh, 90vh);
	max-height: 90vh;
}

/* static.css */

html {
	scroll-padding-top: calc(7.9375rem + 1.5 * var(--block-spacing-block));
	background-color: var(--surface-9);
	scroll-behavior: smooth;
}

@media (max-width: 63.999em) {
	html {
		--max-content-width: 100%;
	}
}

.c_advisor .menu-toc .menu-link {
	--menu-item-shadow-color: none;
}

.page-sidebar nav.menu-toc {

	@media (max-width: 1024px) {
		background-color: var(--surface-10);
	}
}

@supports (max-height: 96dvh) {
	.menu {
		max-height: calc(100vh - var(--spacing) * 2 - var(--size-5));
		/* 2 mal padding + 1 mal top*/
	}
}

.menu-toc ol.menu {

	@media (max-width: 1024px) {
		margin-right: unset;
	}
}

.menu-toc ol.menu>li {
	margin-bottom: var(--size-1);
}


.menu-toc li {


	@media (max-width: 1024px) {

		/* border: 1px solid lime; */
		>ol,
		>ol>li {
			padding-left: unset;
			text-indent: calc(0 * var(--toc-indent, 2ch))
		}

		>ol>li>ol>li.menu-item {
			display: block;
		}
	}
}

.menu-toc .menu-item {
	width: 100%;
}

.toc-mobile .sub-wrapper {
	width: 95vw;
	overflow: scroll;
}

.toc-mobile .sub-wrapper .menu-item:hover {
	background-color: unset;
}


.menu-toc .menu-label {
	@media (min-width: 1024px) {
		display: inline;
	}
}

.menu-toc .sub-wrapper {
	min-width: 26ch;
}

.menu-toc .sub-wrapper .menu {
	outline: none;
}

.c_show-more {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-bottom: 0 !important;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: linear-gradient(to bottom, transparent, #fff 80%);
	content: "";
	height: calc(6 * var(--gutter));
}

hr {
	width: 100%;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
	!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-15.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-15.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-15.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-15.use[4]!./assets/styles/components/_accordion.scss ***!
	\****************************************************************************************************************************************************************************************************************************************************************************************************************************/


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

/* Intropages, Partners */
.guides,
.partner,
.intropage,
.service {
	>header.hero {
		min-height: 14em;
	}
}

body main>section.c_partner,
body main>section.c_intropage {

	padding-inline: 0;

	.m_partner,
	.m_intropage {
		padding-inline: var(--spacing);
	}

	.m_partner>div:not(.c_card-deck),
	.m_intropage>div:not(.c_card-deck) {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: justify;

		p,
		ul,
		h3,
		h4,
		blockquote,
		.faq-wrapper,
		.table-data {
			max-width: 80ch;
			width: 100%
		}

		h2,
		h3,
		h4,
		div>.field-title,
		.m_media-box {
			text-align: center;
		}

		h2,
		h3,
		h4 {
			margin-top: var(--size-8);
		}

	}

	h2.text-center,
	h3.text-center,
	h4.text-center {
		justify-self: center;
	}

	figure.media-box>img {
		max-width: var(--img-width, 50em);
	}

	a.btn {
		max-width: fit-content;

	}

	/* Bewertungen */
	.rating-item {

		.i-icon-star {
			--icon-fill: var(--brand-primary-400);
		}

		.rater {
			color: var(--color-5);
		}

	}

	.c_card-deck .m_card>.card-body {
		align-content: start;
	}
}

/* Drecksgrau bei den PNG Zeichnungen weg */
figure.media-box:has(> img[role="presentation"][src$="png"]) {

	&::before,
	&::after {
		content: '';
		inset: 0;
		position: absolute;
		background-color: var(--brand-accent-800);
		opacity: 0.5;
	}

	&::after {
		background-color: transparent;
		background-position: center;
		background-size: 100%;
		background-image: var(--png-overlay, none);
		mix-blend-mode: luminosity;
	}

	/* img[role="img"][src$="png"], */
	>img[role="presentation"][src$="png"] {
		filter: contrast(1.5);
		mix-blend-mode: multiply;
	}
}

/* Advantages */
.partner-advantages {
	outline: none;
	padding: calc(var(--spacing) * .5);
	z-index: 10;

	.advantages-list,
	ul {
		display: grid;
		gap: var(--spacing);
		padding-top: calc(var(--spacing) * .5);
		margin-bottom: 0;
		list-style-type: none;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		;
	}

	.advantages-item,
	li {
		--icon-check: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" stroke=\"%23237789\" fill=\"none\" stroke-width=\"4\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>");

		justify-self: center;
		display: flex;

		&::before {
			content: var(--icon-check);
			margin-right: calc(var(--spacing) * .25);
			vertical-align: middle;
		}

		@media (max-width: 50em) {
			justify-self: start;
		}
	}
}

.c_intropage {
	.layout>p {
		max-width: 80ch;
		text-align: center;
		justify-self: center;
		align-self: center;
	}
}

/* Homepage */
[id="home"] {
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;

	#page-title,
	#page-subtitle {
		text-align: center;
	}

	@media (max-width: 35.999em) {
		background-image: none;
		background-color: var(--brand-accent-900);
	}
}

/* Media Box Component */
.c_media-box {
	width: 100%;
	max-height: 20em;

	/* &.media-box {
		--card-rows: [T] auto [M] auto [B];
	} */

	figure {
		grid-area: 1 / 1 / 3 / 3;

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.inverted {
		align-content: center;
		border-radius: .25rem;
	}

	.m_media-box.full-area,
	.m_media-box.-upper,
	.m_media-box.-lower {
		justify-items: center;
	}

	.m_media-box .btn {
		align-self: center;
	}

	@media (max-width: 36em) {
		max-height: max-content;
	}

}

/* Header Such-Widget /snippets/blocks/listing-search.php */

/* Styles für Introseiten */


#c_search-header {
	/* z-index: 50; */
	grid-column: 1 /5;
}

@media (max-width: 35.99em) {

	#c_search-header {
		width: 100%;
	}
}


.fixed-md {
	position: fixed !important;
	top: .75rem;
}

.bts-wrapper {
	position: fixed;
	top: 0;
	z-index: 30;
	max-width: 100%;
	width: calc(100% - 2* var(--spacing));
	margin-inline: var(--spacing);
	align-self: center;

	@media (min-width: 50em) {
		width: auto;
		border-bottom-left-radius: 20% 80%;
		border-bottom-right-radius: 20% 80%;
		background-color: var(--surface-10);
		box-shadow: var(--shadow-dark);
		justify-self: center;
	}

	@media (max-width: 49.99em) {
		>.btn {
			width: 100%;
		}
	}
}

/* Styles für Ratgeberseiten (Such-Widget) */
.listing-search {
	.card-foot {
		place-items: start;
	}

	.side-button {
		width: 100%;
		grid-template-columns: 1fr auto;
	}
}

@media (max-width: 22.5em) {
	.listing-search {
		.side-button {
			flex-direction: column;
			gap: var(--spacing);
		}
	}

	.side-button a.-half {
		--_radii: 1em;
	}

}