/* Lokales SVG-Sprite: Header, Karten, Trust-Kacheln (WEB-117). */

.fs-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.fs-icon {
	display: block;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

.fs-icon-well {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 0 0.9rem;
	border: 1px solid var(--fs-line, #e6e8f2);
	border-radius: 0.85rem;
	color: var(--fs-blue, #404890);
	background: #ffffff;
}

.fs-icon-well .fs-icon {
	width: 32px;
	height: 32px;
}

.has-surface-background-color > .fs-icon-well,
.has-surface-background-color .fs-icon-well {
	background: #ffffff;
}

.fs-trust-tiles .fs-icon-well {
	background: var(--fs-surface, #f4f5fa);
}

.fs-cards .wp-block-column:has(.fs-icon-well) .wp-block-heading::before {
	content: none;
	display: none;
}

/* WEB-284: Icon-Well und Überschrift in einer Zeile, Fließtext volle Breite.
   WEB-285: Nur Kacheln mit Button werden Flex-Spalte, damit margin-top: auto greift.
   Kacheln ohne Button und Trust-Kacheln bleiben Grid. */
.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)),
.fs-trust-tiles > .wp-block-column:has(.fs-icon-well) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.85rem;
	row-gap: 0.75rem;
	align-items: start;
}

.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)) > .fs-icon-well,
.fs-trust-tiles > .wp-block-column:has(.fs-icon-well) > .fs-icon-well {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	margin: 0;
}

.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)) > .wp-block-heading,
.fs-trust-tiles > .wp-block-column:has(.fs-icon-well) > .wp-block-heading {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-width: 0;
	margin: 0;
}

.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)) > *:not(.fs-icon-well):not(.wp-block-heading),
.fs-trust-tiles > .wp-block-column:has(.fs-icon-well) > *:not(.fs-icon-well):not(.wp-block-heading) {
	grid-column: 1 / -1;
}

.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)) > .wp-block-image,
.fs-cards .wp-block-column:has(.fs-icon-well):not(:has(> .wp-block-buttons)) > figure {
	margin-block-start: 0;
	margin-bottom: 0;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > .fs-icon-well {
	order: 0;
	flex: 0 0 auto;
	align-self: start;
	margin: 0;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > .wp-block-heading {
	order: 0;
	box-sizing: border-box;
	min-width: 0;
	min-height: 3.5rem;
	margin: -3.5rem 0 0.75rem;
	padding-left: calc(3.5rem + 0.85rem);
	display: flex;
	align-items: center;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > .wp-block-image,
.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > figure {
	order: 1;
	margin-block-start: 0;
	margin-bottom: 0;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > *:not(.fs-icon-well):not(.wp-block-heading):not(.wp-block-image):not(figure):not(.wp-block-buttons) {
	order: 2;
}

.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > .wp-block-buttons {
	order: 3;
	flex-shrink: 0;
}

/* WEB-294: Branchen-Kacheln — Icon oben mittig, Überschrift zentriert darunter. */
.fs-cards.fs-cards--centered .wp-block-column:has(.fs-icon-well) {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fs-cards.fs-cards--centered .wp-block-column:has(.fs-icon-well) > .fs-icon-well {
	grid-column: auto;
	grid-row: auto;
	margin: 0 auto 0.9rem;
}

.fs-cards.fs-cards--centered .wp-block-column:has(.fs-icon-well) > .wp-block-heading {
	grid-column: auto;
	grid-row: auto;
	width: 100%;
	text-align: center;
}

.nav-toggle__icon--close {
	display: none;
}

.nav-toggle.is-open .nav-toggle__icon--menu,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
	display: none;
}

.nav-toggle.is-open .nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: flex;
}

.wp-block-columns.fs-trust-tiles {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 1.75rem;
}

/* WEB-296: Prozessleiste unter 1100px 2×2, nicht vier Zeilen. Desktop-4er bleibt. */
.wp-block-columns.fs-prozess-leiste {
	grid-template-columns: 1fr 1fr;
}

.fs-trust-tiles > .wp-block-column {
	margin: 0;
	border: 1px solid var(--fs-line, #e6e8f2);
	border-radius: var(--fs-radius-card, 0.75rem);
	box-shadow: 0 0.6rem 1.4rem rgba(44, 50, 104, 0.07);
}

.fs-trust-tiles .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
}

.fs-trust-tiles .wp-block-heading::before {
	content: none;
	display: none;
}

.fs-trust-tiles p {
	margin: 0;
	color: var(--fs-muted, #5c6370);
	font-size: 0.95rem;
}

@media (max-width: 700px) {
	.fs-icon-well {
		width: 3rem;
		height: 3rem;
	}

	.fs-cards:not(.fs-cards--centered) .wp-block-column:has(.fs-icon-well):has(> .wp-block-buttons) > .wp-block-heading {
		min-height: 3rem;
		margin-top: -3rem;
		padding-left: calc(3rem + 0.85rem);
	}

	.fs-icon-well .fs-icon {
		width: 28px;
		height: 28px;
	}
}

@media (min-width: 700px) {
	.wp-block-columns.fs-trust-tiles {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1100px) {
	.wp-block-columns.fs-trust-tiles,
	.wp-block-columns.fs-prozess-leiste {
		grid-template-columns: repeat(4, 1fr);
	}

	/* WEB-296: Pfeil aus dem Sprite arrow-right, nur in der Ein-Zeilen-Ansicht. */
	.wp-block-columns.fs-prozess-leiste > .wp-block-column:not(:last-child) {
		position: relative;
	}

	.wp-block-columns.fs-prozess-leiste > .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 1;
		width: 1.15rem;
		height: 1.15rem;
		transform: translate(calc(50% + 0.5rem), -50%);
		pointer-events: none;
		background-color: var(--fs-blue, #404890);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

.fs-prozess-leiste .wp-block-heading a {
	color: var(--fs-link, #404890);
	text-decoration: none;
}

.fs-prozess-leiste .wp-block-heading a:hover,
.fs-prozess-leiste .wp-block-heading a:focus {
	color: var(--fs-link-hover, #2c3268);
	text-decoration: underline;
}
