/* Trust-Leiste (Teil C) und Kategorie-Kacheln mobil (Teil D) - WIDURO, 05.11.2026
   Markup: Element-Gruppe mit Template trustleiste bzw. kacheln_mobil, darin Elemente
   "Header-Punkt" (.wd-hp). Doku: _HEADER-STARTSEITE.md */

.wd-trust,
.wd-kacheln {
	--wd-ink: #12303a;
	--wd-teal: #00888c;
	color: var(--wd-ink);
}

.wd-hp__icon::before {
	content: attr(data-icon);
}

.wd-hp__link[data-href] {
	cursor: pointer;
}

/* Contao legt je nach Template noch Wrapper um die Elemente -> Zeile per :has */
.wd-trust__row,
.wd-trust__row :has(> .wd-hp),
.wd-kacheln__row,
.wd-kacheln__row :has(> .wd-hp) {
	display: flex;
	margin: 0;
	padding: 0;
}

/* ---------- Trust-Leiste ---------- */

.wd-trust {
	margin: 24px 0;
}

.wd-trust__row {
	padding: 18px 8px;
	border-radius: 14px;
	background: #f1f5f6;
	box-shadow: 0 1px 2px rgba(18, 48, 58, .06);
}

.wd-trust__row :has(> .wd-hp) {
	width: 100%;
	align-items: stretch;
}

.wd-trust .wd-hp {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 4px 14px;
}

.wd-trust .wd-hp + .wd-hp::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 44px;
	background: #d3dee1;
	transform: translateY(-50%);
}

.wd-trust .wd-hp__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wd-ink);
	text-align: left;
}

.wd-trust .wd-hp__icon {
	flex: 0 0 auto;
	color: var(--wd-teal);
	font-size: 40px;
	line-height: 1;
}

.wd-trust .wd-hp__media img,
.wd-trust .wd-hp__media picture {
	display: block;
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.wd-trust .wd-hp__body {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.wd-trust .wd-hp__text {
	font-size: 18px;
	font-weight: 400;
}

.wd-trust .wd-hp__sub {
	font-size: 16px;
	font-weight: 300;
	color: #2f444c;
}

/* ab 1200 px einzeilig je Zeile; die Punkte teilen sich die Breite nach Inhalt */
@media (min-width: 1200px) {
	.wd-trust .wd-hp {
		flex: 1 1 auto;
	}

	.wd-trust .wd-hp__text,
	.wd-trust .wd-hp__sub {
		white-space: nowrap;
	}
}

.wd-trust .wd-hp__link[data-href]:hover .wd-hp__text {
	color: var(--wd-teal);
}

@media (max-width: 1199.98px) {
	.wd-trust .wd-hp {
		padding: 4px 8px;
	}

	.wd-trust .wd-hp__icon {
		font-size: 32px;
	}

	.wd-trust .wd-hp__media img,
	.wd-trust .wd-hp__media picture {
		width: 36px;
		height: 36px;
	}

	.wd-trust .wd-hp__text {
		font-size: 15px;
	}

	.wd-trust .wd-hp__sub {
		font-size: 14px;
	}
}

@media (max-width: 991.98px) {
	.wd-trust {
		margin: 16px 0;
	}

	.wd-trust__row {
		padding: 12px 4px;
		border-radius: 0;
	}

	/* nur Punkte mit "Auch mobil zeigen"; Trennstrich nur zwischen sichtbaren */
	.wd-trust .wd-hp + .wd-hp::before {
		display: none;
	}

	.wd-trust .wd-hp:not(.wd-hp--desktop) ~ .wd-hp:not(.wd-hp--desktop)::before {
		display: block;
		height: 36px;
	}

	.wd-trust .wd-hp {
		padding: 2px 6px;
	}

	.wd-trust .wd-hp__link {
		gap: 6px;
	}

	.wd-trust .wd-hp__icon {
		font-size: 26px;
	}

	.wd-trust .wd-hp__media img,
	.wd-trust .wd-hp__media picture {
		width: 30px;
		height: 30px;
	}

	.wd-trust .wd-hp__text {
		font-size: 13px;
	}

	.wd-trust .wd-hp__sub {
		font-size: 12px;
	}
}

/* ---------- Kategorie-Kacheln (nur mobil) ---------- */

/* 05.11.2026: Wischleiste statt fester 4er-Reihe. Natives Scrollen mit scroll-snap - der
   Finger schiebt frei, beim Loslassen rastet die naechste Kachel am linken Rand ein. Kein JS.
   Die Leiste geht ueber die volle Bildschirmbreite; rechts schaut die naechste Kachel an. */
.wd-kacheln {
	margin: 16px calc(50% - 50vw);
}

.wd-kacheln__row:has(> .wd-hp),
.wd-kacheln__row :has(> .wd-hp) {
	display: flex;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 4px 16px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.wd-kacheln__row::-webkit-scrollbar,
.wd-kacheln__row :has(> .wd-hp)::-webkit-scrollbar {
	display: none;
}

/* in den Kacheln gilt "Auch mobil zeigen" nicht - die ganze Gruppe ist nur mobil */
@media (max-width: 991.98px) {
	.wd-kacheln .wd-hp--desktop {
		display: flex !important;
	}
}

.wd-kacheln .wd-hp {
	display: flex;
	flex: 0 0 clamp(96px, 26vw, 150px);
	min-width: 0;          /* sonst waechst die Kachel mit einem langen Wort mit */
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.wd-kacheln .wd-hp__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 4px 10px;
	border: 1px solid #e3eaec;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(18, 48, 58, .08);
	color: var(--wd-ink);
	text-align: center;
}

.wd-kacheln .wd-hp__media img,
.wd-kacheln .wd-hp__media picture {
	display: block;
	width: auto;
	max-width: 100%;
	height: 58px;
	object-fit: contain;
}

.wd-kacheln .wd-hp__icon {
	color: var(--wd-teal);
	font-size: 40px;
}

.wd-kacheln .wd-hp__link {
	min-width: 0;
}

/* Lange Woerter trennen statt die Kachel zu verbreitern: Trennstelle im Backend mit [-] setzen
   (wird zu ­, siehe TopbarItemController) - nur dort trennt der Browser, mit Bindestrich.
   Bewusst hyphens: manual: die automatische Trennung waehlte z. B. "Terrassentue-ren".
   Ein langes Wort OHNE [-] bricht zur Not ohne Bindestrich um, statt die Kachel zu sprengen. */
.wd-kacheln .wd-hp__text {
	display: block;
	max-width: 100%;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.15;
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: anywhere;
}

.wd-kacheln .wd-hp__text::after {
	content: "chevron_right";
	display: inline-block;
	margin-left: 1px;
	font-family: "Material Icons";
	font-feature-settings: "liga";
	font-size: 18px;
	line-height: 1;
	vertical-align: -4px;
}

.wd-kacheln .wd-hp__sub {
	display: none;
}